/* 툴쏙 공통 글로벌 내비게이션(도구 페이지용) — 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: 6px;
  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;
  margin-right: 10px; flex: 0 0 auto;
}
.tsk-brand-link .tsk-brand-dot { color: var(--tsk-mint); }
.tsk-navtools { display: flex; align-items: center; gap: 4px; margin-left: auto; flex: 0 0 auto; }
/* 아이콘만으로는 목적지가 모호해 텍스트 링크로 노출(용어사전·소개) */
.tsk-nav-text-link {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 9px;
  font-size: 13.5px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--tsk-ink-60); text-decoration: none; white-space: nowrap; border-radius: 9px;
}
.tsk-nav-text-link:hover, .tsk-nav-text-link:focus-visible { color: var(--tsk-mint); background: var(--tsk-mint-08); }
@media (max-width: 900px) { .tsk-nav-text-link { display: none; } }
.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; }

/* 상단 1줄 텍스트 카테고리 메뉴 (oktools식) */
.tsk-cat-nav {
  display: flex; align-items: center; gap: 2px;
  flex: 1; min-width: 0; overflow-x: auto;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.tsk-cat-nav::-webkit-scrollbar { display: none; }
.tsk-cat-nav a {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  padding: 8px 11px; border-radius: 9px;
  text-decoration: none; color: var(--tsk-ink-80);
  font-size: 14px; font-weight: 600; letter-spacing: -0.01em;
  white-space: nowrap; min-height: 40px;
}
.tsk-cat-nav a .tsk-caret { font-size: 9px; color: var(--tsk-ink-35); transition: transform .15s 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.active .tsk-caret { transform: rotate(180deg); color: var(--tsk-mint); }

/* 드롭다운(오버레이) */
.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: 860px; margin: 0 auto; padding: 16px 20px 20px; }

.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; }
/* 본문 딤은 .tsk-nav-scrim(반투명 오버레이)만으로 처리한다.
   과거 .tsk-content-dim{visibility:hidden}은 드롭다운이 화면 일부만 덮는데도
   본문 전체를 사라지게 만들어 제거함. 포커스·스크린리더 차단은 nav.js의 inert가 담당. */

/* 드롭다운 내부: 칩(pill) 그리드 */
.tsk-drop-chips { display: flex; flex-wrap: wrap; gap: 7px; }
.tsk-drop-sect-lbl {
  width: 100%; font-size: 11px; font-weight: 600; color: var(--tsk-ink-35);
  margin: 12px 0 3px; letter-spacing: 0.03em;
}
.tsk-drop-sect-lbl:first-child { margin-top: 0; }
.tsk-drop-chip {
  font-size: 13.5px; font-weight: 500; padding: 7px 15px; border-radius: 20px;
  color: var(--tsk-ink-80); text-decoration: none; background: #f2f5f0;
  white-space: nowrap; min-height: 40px; display: inline-flex; align-items: center;
  transition: background .12s, color .12s;
}
.tsk-drop-chip:hover, .tsk-drop-chip:focus-visible { background: var(--tsk-mint-08); color: var(--tsk-mint); }

@media (min-width: 768px) {
  .tsk-topbar-inner { padding: 0 22px; }
  .tsk-nav-dropdown-inner { padding: 18px 28px 22px; }
}

/* 로컬 서브내비(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-crumb a { color: inherit; text-decoration: none; }
.tsk-local-crumb a:hover,
.tsk-local-crumb a:focus-visible { color: var(--tsk-mint); text-decoration: underline; text-underline-offset: 2px; }

/* 푸터 카테고리 내비 — 크롤러가 JS 없이도 카테고리 허브 7개에 닿게 하는 정적 링크.
   색·밑줄은 일부러 지정하지 않는다. 각 도구 인라인 <style>의 footer.site-footer a 가
   이 파일보다 뒤에 와서 어차피 이기므로, 특이도 싸움을 걸 이유가 없다. */
.tsk-footnav { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px; margin: 0 0 12px; }
.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; }

/* 로컬 서브내비 스크롤 화살표.
   화살표는 알약 스크롤 영역(overflow-x:auto) '밖'의 좌우 여백에 놓는다.
   알약 위에 겹쳐 놓으면 (구 버전: 26px 원을 left/right:-13px에 배치) 마지막 알약 글자를 가리고
   터치 타겟도 26px로 작아진다. 여백은 실제로 넘칠 때만 확보한다(넘치지 않으면 화살표도 없다). */
.tsk-local-pills-wrap { position: relative; }
.tsk-local-pills-wrap.tsk-pills-scrollable { padding-left: 42px; padding-right: 42px; }
.tsk-pills-arr {
  box-sizing: border-box;
  display: none; align-items: center; justify-content: center;
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 50%;
  background: #fff; border: 1px solid var(--tsk-line-2);
  box-shadow: 0 1px 6px rgba(27,33,27,.14);
  color: var(--tsk-ink-60);
  cursor: pointer; padding: 0; z-index: 4;
  transition: color .12s, border-color .12s, background .12s;
}
.tsk-pills-arr svg { width: 17px; height: 17px; stroke: currentColor; fill: none; stroke-width: 2; }
.tsk-pills-arr.show { display: flex; }
/* left/right:0 = wrap의 패딩박스 기준 → 화살표가 위 패딩(42px) 안에 들어앉는다 */
.tsk-pills-arr-l { left: 0; }
.tsk-pills-arr-r { right: 0; }
.tsk-pills-arr:hover { color: var(--tsk-mint); border-color: var(--tsk-mint-35); background: #f5faf8; }

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