/* Category colours are agreed. Existing spacing and font choices are preserved. */
@font-face{font-family:ToolShelfNoto;src:url('assets/noto-ui-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:ToolShelfNoto;src:url('assets/noto-ui-500.ttf') format('truetype');font-weight:500 600;font-display:swap}
@font-face{font-family:ToolShelfNoto;src:url('assets/noto-ui-700.ttf') format('truetype');font-weight:700 900;font-display:swap}
:root{--ink:#33333b;--text:#47474f;--muted:#707078;--line:#dedee6;--red:#E94A4D;--paper:#f5f5fa;--header:68px}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px}body{margin:0;color:var(--text);background:var(--paper);font-family:ToolShelfNoto,'Noto Sans KR','Malgun Gothic',Arial,sans-serif;font-size:16px;line-height:1.5}button,input,select{font:inherit}button,a,select{-webkit-tap-highlight-color:transparent}button{color:inherit;cursor:pointer;border:0;background:none}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--red);outline-offset:4px}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.skip{position:fixed;top:-100px;left:12px;z-index:50;background:white;padding:12px}.skip:focus{top:8px}
.header{height:var(--header);padding:0 32px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:44px;position:sticky;top:0;z-index:10}.brand{display:inline-flex;color:#26262c;font-family:Arial,sans-serif;font-weight:800;font-size:28px;letter-spacing:-1.2px;white-space:nowrap;line-height:1}.brand>span{color:var(--red)}.desktop-nav{display:flex;align-items:stretch;gap:27px;height:100%;flex:1}.nav-item{position:relative;display:flex;align-items:stretch}.nav-item>a{display:flex;align-items:center;white-space:nowrap;font-size:14px;font-weight:500}.nav-item>a:hover,.nav-item.open>a{color:var(--red)}.header-actions{display:flex;align-items:center;gap:12px;margin-left:auto}.header-actions select{border:0;background:#fff;font-size:13px;color:var(--text);padding:6px;cursor:pointer}.icon-button{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:6px}.icon-button:hover{background:var(--paper)}.mobile-toggle{display:none}.hamburger,.hamburger:before,.hamburger:after{display:block;width:20px;height:2px;background:currentColor;position:relative}.hamburger:before,.hamburger:after{content:'';position:absolute;left:0;top:-6px}.hamburger:after{top:6px}
.category-dropdown{display:none;position:absolute;top:100%;left:-16px;min-width:240px;max-width:320px;padding:8px;background:#fff;border:1px solid var(--line);border-radius:0 0 10px 10px;box-shadow:0 12px 24px #24243412;max-height:calc(100dvh - 90px);overflow:auto}.nav-item:nth-last-child(-n+2) .category-dropdown{left:auto;right:-16px}.nav-item.open .category-dropdown{display:block}.category-dropdown button{width:100%;display:flex;align-items:center;gap:10px;text-align:left;font-size:13px;padding:10px;border-radius:6px;white-space:nowrap}.category-dropdown button:hover{background:var(--paper)}.category-dropdown img{width:26px;height:26px;flex-shrink:0}.mobile-nav{position:absolute;top:calc(var(--header) - 1px);left:0;right:0;background:#fff;border-bottom:1px solid var(--line);padding:12px 20px;max-height:calc(100dvh - var(--header));overflow:auto;box-shadow:0 10px 20px #2424340d}.mobile-nav a{display:block;padding:12px;border-radius:6px;font-size:14px}.mobile-nav a:hover{background:var(--paper)}
main{min-height:70vh}.hero{text-align:center;padding:48px 24px 8px;margin:0 auto;max-width:1100px}.hero h1{font-size:38px;line-height:1.4;letter-spacing:-1px;font-weight:600;color:var(--ink);margin:0 0 12px}.hero>p:not(.search-status){font-size:17px;line-height:1.7;color:var(--muted);margin:0}.search{display:flex;align-items:center;gap:12px;margin:28px auto 0;padding:0 18px;max-width:600px;background:#fff;border:1px solid var(--line);border-radius:10px;height:54px;text-align:left}.search:focus-within{border-color:#9b9ba8}.search svg{width:20px;height:20px;fill:none;stroke:#83838e;stroke-width:1.7;flex-shrink:0}.search input{border:0;outline:none!important;min-width:0;width:100%;background:transparent;color:var(--ink);font-size:14px;height:100%}.search input::placeholder{color:#92929c}.search kbd{border:1px solid #e7e7ed;border-radius:4px;color:#9696a0;font-family:inherit;font-size:12px;padding:0 6px}.search-status{height:20px;margin:8px 0;font-size:12px;color:var(--muted)}
.catalogue{padding:0 32px 40px;max-width:2200px;margin:auto}.popular-section{padding:12px 0 26px;border-bottom:1px solid #e5e5ec;margin-bottom:32px}.popular-empty{border:1px dashed #d6d6df;border-radius:10px;background:#ffffff70;color:#868690;font-size:13px;margin:0;padding:20px 24px}.section-heading{display:flex;align-items:center;gap:12px;margin:0 0 16px}.section-heading h2{color:var(--ink);font-size:22px;line-height:30px;font-weight:600;margin:0;letter-spacing:-.4px}.section-heading>span{font-size:12px;color:#898992}.tool-section{scroll-margin-top:100px;margin:0 0 40px}.tools-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}.tool-card{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0;min-height:190px;padding:24px;background:#fff;border:1px solid var(--line);border-radius:12px;transition:border-color .15s,background .15s}.tool-card:hover{background:#fcfcfe;border-color:#b7b7c4}.tool-card img{width:48px;height:48px;object-fit:contain;flex-shrink:0;margin-bottom:16px}.tool-card h3{font-size:18px;line-height:26px;color:var(--ink);font-weight:500;letter-spacing:-.3px;margin:0 0 8px;word-break:keep-all;overflow-wrap:anywhere}.tool-card p{font-size:13px;line-height:19px;color:var(--muted);margin:0;word-break:keep-all;overflow-wrap:anywhere}.no-results{text-align:center;padding:50px 10px;color:var(--muted)}.text-button{color:var(--red);font-size:14px;text-decoration:underline;padding:10px}
.all-tools-section{padding:30px 0 10px;border-top:1px solid var(--line);scroll-margin-top:90px}.directory{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:30px 24px}.directory h3{font-size:13px;color:#6e6e79;margin:0 0 12px;font-weight:600} .directory :is(a,.unavailable-tool){display:block;font-size:13px;line-height:1.6;margin:8px 0;width:fit-content}.directory a:hover{color:var(--red);text-decoration:underline}footer{background:#fff;border-top:1px solid var(--line);padding:24px 32px;display:flex;align-items:center;justify-content:space-between;gap:20px;font-size:12px;color:var(--muted)}footer>div{display:flex;align-items:center;gap:20px}footer .brand{font-size:23px}footer p{margin:0}
dialog{border:1px solid var(--line);border-radius:14px;width:min(680px,calc(100% - 32px));max-height:calc(100dvh - 32px);padding:32px;color:var(--text);box-shadow:0 16px 60px #25253325;overflow:auto}dialog::backdrop{background:#22223066}.dialog-close{position:absolute;right:10px;top:10px;font-size:28px;font-family:Arial}.work-heading{display:flex;align-items:center;gap:16px;margin:8px 32px 16px 0}.work-heading img{width:48px;height:48px}.work-heading p{font-size:12px;color:var(--muted);margin:0 0 3px}.work-heading h2{font-size:25px;line-height:1.4;margin:0;color:var(--ink)}#dialog-description{font-size:13px;line-height:1.7;margin:0 0 20px}.design-label{background:var(--paper);padding:10px 12px;font-size:12px;color:var(--muted);border-radius:6px;margin-bottom:16px}.state-selector{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}.state-selector button{font-size:12px;padding:6px 10px;border:1px solid var(--line);border-radius:6px}.state-selector button[aria-pressed=true]{background:#33333b;border-color:#33333b;color:#fff}.work-area{border:1px solid var(--line);border-radius:10px;padding:28px;text-align:center;min-height:260px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px}.work-area h3{font-size:18px;line-height:1.6;margin:0}.work-area p{font-size:13px;line-height:1.7;color:var(--muted);margin:0}.work-area>p:last-child{font-size:12px}.file-drop{width:100%;padding:20px 12px;display:flex;flex-direction:column;align-items:center;gap:16px}.file-drop img{width:48px;height:48px}.primary-button,.secondary-button{border-radius:7px;font-size:14px;font-weight:500;padding:11px 24px;min-height:44px}.primary-button{background:var(--red);color:white}.primary-button:hover{background:#bf2925}.primary-button:disabled{cursor:not-allowed;opacity:.55}.secondary-button{border:1px solid var(--line);background:#fff}.secondary-button:hover{background:var(--paper)}.work-area details{width:100%;text-align:left;border-top:1px solid var(--line);padding:14px 0}.work-area summary{font-size:13px;cursor:pointer}.work-area details p{padding-top:12px}.work-area progress{width:100%;height:10px;border:0;accent-color:var(--red);border-radius:6px;overflow:hidden}.work-area progress::-webkit-progress-bar{background:#ededf3}.work-area progress::-webkit-progress-value{background:var(--red)}.confirm-actions{display:flex;justify-content:flex-end;gap:8px;flex-wrap:wrap}#cancel-dialog{width:min(420px,calc(100% - 32px));padding:24px}#cancel-dialog h3{margin:0 0 12px}#cancel-dialog p{font-size:13px;line-height:1.7;margin:0 0 20px}
@media(min-width:1600px){.tools-grid{grid-template-columns:repeat(6,minmax(0,1fr))}.tool-card{padding:28px;min-height:200px}.header{gap:60px}.desktop-nav{gap:36px}.directory{grid-template-columns:repeat(8,minmax(0,1fr))}}
@media(max-width:1250px){.header{gap:24px;padding:0 24px}.desktop-nav{gap:18px}.nav-item>a{font-size:13px}.brand{font-size:25px}}
@media(max-width:1100px){.desktop-nav{display:none}.mobile-toggle{display:inline-flex}.header{height:60px;--header:60px}.header-actions{margin-left:auto}.mobile-nav{top:59px}.hero h1{font-size:32px}.tool-section{scroll-margin-top:82px}html{scroll-padding-top:82px}}
@media(max-width:900px){.tools-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.catalogue{padding:0 24px 30px}.tool-card{padding:22px}.directory{grid-template-columns:repeat(3,minmax(0,1fr))}footer{flex-wrap:wrap}}
@media(max-width:680px){.tools-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.hero{padding:30px 16px 4px}.hero h1{font-size:25px;line-height:1.45;letter-spacing:-.7px}.hero>p:not(.search-status){font-size:14px}.search{height:50px;margin-top:22px}.search kbd{display:none}.catalogue{padding:0 16px 28px}.popular-section{margin-bottom:28px;padding-bottom:22px}.popular-empty{padding:16px;font-size:12px}.section-heading{margin-bottom:12px}.section-heading h2{font-size:20px}.tool-card{padding:18px 16px;min-height:195px}.tool-card img{width:48px;height:48px;margin-bottom:12px}.tool-card h3{font-size:16px;line-height:23px}.tool-card p{font-size:12px;line-height:18px}.tool-section{margin-bottom:30px}.directory{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px} .directory :is(a,.unavailable-tool){font-size:12px}.header{padding:0 16px;gap:12px}.brand{font-size:25px}.header-actions select{font-size:12px}.header-actions{gap:4px}footer{padding:22px 16px;gap:16px}footer>div{gap:12px}footer>div>span{display:none}footer>p{order:3;width:100%}dialog{padding:24px 18px}.work-heading{gap:12px}.work-heading h2{font-size:21px}.work-area{padding:20px 14px;min-height:260px}.state-selector{gap:6px}.state-selector button{padding:6px 8px;font-size:11px}}
@media(max-width:360px){.tool-card{padding:16px 12px}.tool-card h3{font-size:15px}.tool-card p{font-size:11px;line-height:17px}.hero h1{font-size:23px}.header{padding:0 12px}.directory{gap:20px 12px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*:before,*:after{transition:none!important}}

.tool-card:disabled, .category-dropdown button:disabled, .unavailable-tool { opacity: .48; cursor: default; }
.unavailable-tool { display: block; }
.tool-card:disabled:hover { transform: none; box-shadow: none; }

.site-wordmark {
  display: block;
  width: 220px;
  height: auto;
  aspect-ratio: 80 / 17;
  object-fit: cover;
  object-position: center 44%;
}
@media (max-width: 680px) {
  .site-wordmark { width: clamp(160px, 50vw, 185px); }
}

header .brand:has(.site-wordmark) {
  flex-shrink: 0;
}
header .site-wordmark {
  width: 250px;
}
@media (max-width: 680px) {
  header .site-wordmark { width: clamp(170px, 49vw, 200px); }
}

header.has-category-nav {
  gap: clamp(8px, 2vw, 22px);
  min-height: 64px;
  height: auto;
  padding-block: 8px;
}
.tool-category-nav {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow-x: auto;
  padding: 4px;
  gap: clamp(12px, 1.7vw, 27px);
}
@media (max-width: 400px) {
  header.has-category-nav {
    column-gap: 8px;
  }
  header.has-category-nav .site-wordmark {
    width: 150px;
  }
}

.tool-category-nav > div > button {
  padding: 6px 2px;
  white-space: nowrap;
  font-size: 14px;
  font-weight: 500;
}
.tool-category-nav > div > button[aria-expanded="true"] {
  color: var(--red);
}
.tool-category-popup {
  position: fixed;
  inset: auto;
  margin: 0;
  width: max-content;
  min-width: min(220px, calc(100vw - 16px));
  max-width: calc(100vw - 16px);
  overflow: auto;
  padding: 8px;
  border: 1px solid var(--line);
  border-radius: 0 0 10px 10px;
  background: #fff;
  color: var(--text);
  box-shadow: 0 12px 24px #24243412;
}
.tool-category-popup a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px;
  border-radius: 6px;
  font-size: 13px;
}
.tool-category-popup a:hover {
  background: var(--paper);
}
.tool-category-popup img {
  width: 26px;
  height: 26px;
}