/* 툴쏙 공통 글로벌 내비게이션(도구 페이지용) — tsk- 접두사로 호스트 페이지 CSS와 충돌 방지
   허브(index.html)의 검증된 2줄 헤더(P1~P8)를 도구 페이지에 이식한 컴포넌트.
   자급자족: 이 파일이 필요로 하는 색상·폰트 변수를 전부 여기서 정의한다. */
:root {
  --tsk-mint:    #0E6E5C;
  --tsk-ink:     #1b211b;
  --tsk-ink-80:  rgba(27,33,27,.80);
  --tsk-ink-60:  rgba(27,33,27,.62);
  --tsk-ink-45:  rgba(27,33,27,.46);
  --tsk-ink-35:  rgba(27,33,27,.35);
  --tsk-line:    #e2e6dd;
  --tsk-line-2:  #d4dbcd;
  --tsk-mint-08: rgba(14,110,92,.08);
  --tsk-mint-12: rgba(14,110,92,.12);
  --tsk-mint-35: rgba(14,110,92,.35);
  --tsk-sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", "Segoe UI", sans-serif;
  --tsk-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

.tsk-nav-shell { position: sticky; top: 0; z-index: 50; font-family: var(--tsk-sans); }
.tsk-topbar {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--tsk-line);
}
.tsk-topbar-inner {
  max-width: 1180px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 0 16px; height: 54px;
}
.tsk-brand-link {
  font-family: var(--tsk-mono); font-weight: 700; font-size: 16px;
  letter-spacing: -0.01em; color: var(--tsk-ink); text-decoration: none; white-space: nowrap;
}
.tsk-brand-link .tsk-brand-dot { color: var(--tsk-mint); }
.tsk-brand-tagline { font-size: 13px; font-weight: 500; color: var(--tsk-ink-60); letter-spacing: -0.01em; white-space: nowrap; }
.tsk-brand-tagline .tsk-hl { color: var(--tsk-mint); }
@media (max-width: 480px) { .tsk-brand-tagline { display: none; } }
.tsk-navtools { display: flex; gap: 4px; margin-left: auto; }
.tsk-nav-icon-btn {
  appearance: none; border: none; background: none; cursor: pointer;
  width: 40px; height: 40px; border-radius: 10px;
  display: grid; place-items: center; color: var(--tsk-ink-60);
}
.tsk-nav-icon-btn:hover { color: var(--tsk-mint); background: var(--tsk-mint-08); }
.tsk-nav-icon-btn svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.7; }
#tsk-nav-search-btn { background: var(--tsk-mint-12); color: var(--tsk-mint); border-radius: 11px; }
#tsk-nav-search-btn svg { stroke-width: 2; }
#tsk-nav-search-btn:hover, #tsk-nav-search-btn[aria-expanded="true"] { background: var(--tsk-mint); color: #fff; }

/* 2번째 줄: 카테고리 메뉴(아이콘+이름) */
.tsk-catmenu-bar {
  background: rgba(255,255,255,.82);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--tsk-line);
}
.tsk-cat-nav {
  display: flex; gap: 6px; margin: 0 auto; max-width: 1180px;
  justify-content: flex-start; overflow-x: auto;
  padding: 6px 12px 8px; scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tsk-cat-nav::-webkit-scrollbar { display: none; }
.tsk-cat-nav a {
  flex: 0 0 auto; scroll-snap-align: start;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  min-width: 62px; padding: 6px 6px; border-radius: 12px;
  text-decoration: none; color: var(--tsk-ink-80);
  font-size: 13px; font-weight: 500; letter-spacing: -0.01em;
  background: none; border: none; text-align: center;
}
.tsk-cat-nav a svg {
  width: 32px; height: 32px; display: block;
  stroke: var(--tsk-mint); stroke-width: 1.6; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  transition: transform .18s ease;
}
.tsk-cat-nav a:hover, .tsk-cat-nav a:focus-visible, .tsk-cat-nav a.active { color: var(--tsk-mint); background: var(--tsk-mint-08); }
.tsk-cat-nav a:hover svg { transform: translateY(-2px); }

/* 드롭다운(오버레이) */
.tsk-nav-dropdown {
  position: absolute; left: 0; right: 0; top: 100%;
  background: rgba(255,255,255,.98);
  -webkit-backdrop-filter: saturate(160%) blur(14px);
  backdrop-filter: saturate(160%) blur(14px);
  border-bottom: 1px solid var(--tsk-line-2);
  box-shadow: 0 12px 28px rgba(27,33,27,.12);
  overflow: hidden;
  max-height: 0; opacity: 0; visibility: hidden;
  transition: max-height .28s ease, opacity .18s ease, visibility 0s linear .28s;
}
.tsk-nav-dropdown.open {
  max-height: 80vh; opacity: 1; visibility: visible; overflow-y: auto;
  transition: max-height .28s ease, opacity .18s ease, visibility 0s;
}
.tsk-nav-dropdown-inner { max-width: 1180px; margin: 0 auto; padding: 20px 16px 26px; }
@media (min-width: 768px) { .tsk-nav-dropdown-inner { padding: 24px 22px 28px; } }

.tsk-nav-scrim {
  position: fixed; left: 0; right: 0; bottom: 0; top: 54px;
  background: rgba(20,26,20,.20);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity .22s ease, visibility 0s linear .22s;
  z-index: 40;
}
.tsk-nav-scrim.show { opacity: 1; visibility: visible; pointer-events: auto; transition: opacity .22s ease, visibility 0s; }
/* 드롭다운이 본문을 완전히 덮을 때, 가려진 본문을 포커스·스크린리더 대상에서 제외
   (공간은 유지 — visibility:hidden은 레이아웃을 흔들지 않음) */
.tsk-content-dim { visibility: hidden; }

/* 드롭다운 내부: 애플식 3단 위계 */
.tsk-drop-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 20px; flex-wrap: wrap; }
.tsk-drop-head h2 { margin: 0; font-size: 15px; font-weight: 700; letter-spacing: -0.02em; color: var(--tsk-ink); }
.tsk-drop-head .tsk-drop-cnt { font-family: var(--tsk-mono); font-size: 12px; font-weight: 500; color: var(--tsk-ink-35); }
.tsk-drop-grid { display: grid; grid-template-columns: 1fr; gap: 22px; }
.tsk-drop-lbl { font-size: 12px; font-weight: 600; letter-spacing: 0; color: var(--tsk-ink-45); margin: 0 0 6px; }
.tsk-drop-secondary .tsk-drop-lbl:not(:first-child) { margin-top: 14px; }
.tsk-drop-primary { display: grid; grid-template-columns: 1fr; gap: 14px 26px; }
.tsk-drop-group { min-width: 0; }
.tsk-drop-big {
  display: block; font-size: 15px; font-weight: 600; line-height: 1.3;
  color: var(--tsk-ink); text-decoration: none; padding: 8px 0;
  letter-spacing: -0.01em; min-height: 40px;
}
.tsk-drop-big:hover, .tsk-drop-big:focus-visible { color: var(--tsk-mint); }
.tsk-drop-small {
  display: block; font-size: 13.5px; font-weight: 500; color: var(--tsk-ink-80);
  text-decoration: none; padding: 8px 0; letter-spacing: -0.01em; min-height: 40px;
}
.tsk-drop-small:hover, .tsk-drop-small:focus-visible { color: var(--tsk-mint); }
.tsk-drop-ext { font-size: 12.5px; line-height: 1.7; color: var(--tsk-ink-45); margin: 12px 0 0; }
.tsk-drop-ext a { color: var(--tsk-ink-60); text-decoration: none; }
.tsk-drop-ext a:hover { color: var(--tsk-mint); }

@media (min-width: 768px) {
  .tsk-topbar-inner { padding: 0 22px; }
  .tsk-cat-nav { justify-content: center; flex-wrap: nowrap; gap: 8px; overflow-x: visible; padding: 6px 22px 8px; }
  .tsk-cat-nav a { min-width: 0; padding: 6px 6px; }
  .tsk-cat-nav a svg { width: 34px; height: 34px; }
  .tsk-drop-grid { grid-template-columns: minmax(0, 1fr) 200px; gap: 40px; align-items: start; }
  .tsk-drop-primary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tsk-drop-secondary { border-left: 1px solid var(--tsk-line); padding-left: 36px; }
}

/* 로컬 서브내비(P5): 도구 페이지 상단, 2번째 줄 카테고리 메뉴 바로 아래.
   같은 카테고리 형제 도구를 바로가기 알약으로 보여준다(애플 제품페이지 아이콘줄 패턴).
   nav-shell과 별개(스티키 아님) — 페이지 맨 위 1회, 스크롤하면 본문과 함께 지나간다. */
.tsk-local-subnav { background: #fff; border-bottom: 1px solid var(--tsk-line); padding: 10px 16px; }
.tsk-local-inner { max-width: 820px; margin: 0 auto; }
.tsk-local-crumb { font-size: 12px; color: var(--tsk-ink-35); margin: 0 0 8px; white-space: nowrap; overflow-x: auto; }
.tsk-local-crumb .tsk-local-crumb-sep { margin: 0 4px; }
.tsk-local-crumb .tsk-local-crumb-cur { color: var(--tsk-ink); font-weight: 500; }
.tsk-local-pills {
  display: flex; align-items: center; gap: 6px; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tsk-local-pills::-webkit-scrollbar { display: none; }
.tsk-local-pill {
  flex: 0 0 auto; font-size: 13px; font-weight: 500; color: var(--tsk-ink-80);
  background: #f4f6f1; border-radius: 20px; padding: 7px 14px;
  text-decoration: none; white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center;
}
.tsk-local-pill:hover, .tsk-local-pill:focus-visible { background: var(--tsk-mint-12); color: var(--tsk-mint); }
.tsk-local-pill.active { background: var(--tsk-mint); color: #fff; font-weight: 600; }
.tsk-local-all {
  flex: 0 0 auto; font-size: 12.5px; font-weight: 600; color: var(--tsk-mint);
  text-decoration: none; padding: 7px 6px 7px 12px; margin-left: 4px;
  border-left: 1px solid var(--tsk-line); white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center;
}
.tsk-local-all:hover, .tsk-local-all:focus-visible { text-decoration: underline; text-underline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  .tsk-nav-scrim, .tsk-cat-nav a svg { transition: none; }
}