/* Tellby 공용 머리띠 — tellby_nav.js 와 짝. 토큰은 /static/theme.css 것을 쓴다.
   기획: .omc/plans/tellby-web-design-system.md 「상단 메뉴 통일」 */
.tn{display:flex;align-items:center;gap:10px;min-height:60px;min-width:0;font-family:var(--font,Inter,system-ui,sans-serif)}
.tn *{box-sizing:border-box}
.tn-logo{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:50%;border:var(--bw,2px) solid var(--outline,#111);background:#fff;overflow:hidden;box-shadow:var(--sh,2px 2px 0 #111)}
.tn-logo img{width:100%;height:100%;object-fit:cover;display:block}
.tn-sites{display:flex;gap:4px;align-items:center;min-width:0;overflow-x:auto;scrollbar-width:none;flex:0 1 auto;padding:2px}
.tn-sites::-webkit-scrollbar{display:none}
.tn-site{flex:none;display:inline-flex;align-items:center;min-height:34px;padding:6px 12px;border-radius:999px;border:var(--bw,2px) solid transparent;
  font-weight:800;font-size:13px;letter-spacing:.01em;text-decoration:none;color:var(--sub,#475569);white-space:nowrap}
.tn-site:hover{color:var(--txt,#0f172a);border-color:var(--outline,#111)}
.tn-site[aria-current="page"]{background:var(--txt,#0f172a);color:var(--bg,#fff);border-color:var(--txt,#0f172a)}
.tn-site:focus-visible,.tn-ic:focus-visible,.tn-logo:focus-visible{outline:3px solid var(--accent,#ff6933);outline-offset:2px}
.tn-mid{flex:1 1 auto;min-width:0;display:flex;align-items:center}
.tn-mid:empty{flex:1 1 auto}
.tn-tools{flex:none;display:flex;align-items:center;gap:8px;margin-left:auto}
.tn-lang:empty{display:none}
.tn-lang{display:inline-flex}
.tn-ic{position:relative;flex:none;display:grid;place-items:center;width:40px;height:40px;padding:0;border-radius:50%;cursor:pointer;
  border:var(--bw,2px) solid var(--outline,#111);background:var(--surface,#fff);color:var(--txt,#0f172a);box-shadow:var(--sh,2px 2px 0 #111)}
.tn-ic svg{width:20px;height:20px;fill:currentColor}
.tn-ic:hover{background:var(--accent,#ff6933);color:var(--accent-text,#fff)}
.tn-me{overflow:hidden}
.tn-me img{width:100%;height:100%;object-fit:cover;display:block}
.tn-me.tn-in{border-color:var(--accent,#ff6933)}
.tn-badge{position:absolute;top:-6px;right:-6px;min-width:19px;height:19px;padding:0 5px;border-radius:999px;background:var(--accent,#ff6933);color:#fff;
  font:800 11px/19px var(--font,Inter,system-ui,sans-serif);text-align:center;border:1.5px solid var(--outline,#111)}
/* 지도 위에 떠 있는 모양 — 배경 띠 없이 알약만 */
.tn-float{min-height:0;gap:8px}
.tn-float .tn-sites{background:var(--surface,#fff);border:var(--bw,2px) solid var(--outline,#111);border-radius:999px;box-shadow:var(--sh,2px 2px 0 #111);padding:2px}
.tn-float .tn-site{min-height:30px;padding:4px 11px}
@media (max-width:560px){
  .tn{gap:6px}
  .tn-site{padding:5px 9px;font-size:12px}
  .tn-ic{width:36px;height:36px}
  .tn-logo{width:34px;height:34px}
}
.tn-float .tn-mid{display:none}
.tn-float .tn-tools{margin-left:0}
.tn-float .tn-logo{box-shadow:var(--sh,2px 2px 0 #111)}

/* ════ 공용 머리띠 틀 = link.tellby.us 모양 (2026-09-26 사장님 「상단 탭을 link 에 구현된 모양으로 통일」) ════
   페이지는 <header class="tn-head"><div id="tnav">…</div></header> 만 두면 된다 — 높이·여백·선은 여기서만 정한다.
   값은 link 홈(`yt_home.html` 의 header · .top)에서 그대로 옮겼다: 흐린 배경, 아래 1px 선, 여백 16px × clamp(14px,4vw,40px), 최대폭 1500, 간격 22px. */
.tn-head{position:sticky;top:0;z-index:1000;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  background:var(--bg,#fcfaf8);border-bottom:1px solid var(--border,#e2e8f0);padding:16px clamp(14px,4vw,40px)}
.tn-head > .tn,.tn-head > #tnav{max-width:1500px;margin:0 auto;gap:22px}
@media (max-width:719px){ .tn-head > .tn,.tn-head > #tnav{flex-wrap:wrap;gap:10px 14px} }
/* 휴대폰 = link 휴대폰 모양: 첫 줄 로고 + 사이트 링크, 둘째 줄 오른쪽에 언어·🛒·👤 (가운데 칸이 있으면 셋째 줄 전폭) */
@media (max-width:719px){
  .tn-head .tn-sites{flex:1 1 auto}
  .tn-head .tn-tools{flex:1 1 100%;justify-content:flex-end;margin-left:0}
  .tn-head .tn-mid{order:3;flex:1 1 100%}
  .tn-head .tn-mid:empty{display:none}
}

/* ════ 검색 칸 = link 홈 `#q` 그대로 (2026-09-26) ════
   평소 흰 바탕·굵은 검정 글씨·검정 테두리·그림자 / 갖다 대거나 누르면 주황 바탕 / 안내 글 뒤에서 밑줄 커서가 깜빡인다. */
.tn-mid{justify-content:center}
.tn-search{flex:1;max-width:520px;position:relative;margin:0}
.tn-search input{width:100%;padding:11px 15px;font:inherit;font-size:14px;font-weight:700;color:#16181d;background:#fff;
  border:var(--bw,2px) solid #16181d;border-radius:10px;box-shadow:var(--sh,2px 2px 0 #16181d);transition:background .13s,box-shadow .13s;
  caret-color:var(--accent,#ff6933);-webkit-appearance:none;appearance:none}
.tn-search input::placeholder{color:#16181d;opacity:.5;font-weight:700}
.tn-search input:hover{background:var(--accent,#ff6933)}
.tn-search input:hover::placeholder{opacity:.66}
.tn-search input:focus{outline:none;background:var(--accent,#ff6933);box-shadow:var(--sh-lg,4px 4px 0 #16181d)}
.tn-search input:focus::placeholder{opacity:.55}
.tn-search::after{content:"";position:absolute;left:var(--tn-cursor,15px);bottom:11px;width:18px;height:2px;background:#16181d;border-radius:1px;
  animation:tn-blink 1.05s step-end infinite;pointer-events:none;opacity:.75}
.tn-search.tn-filled::after,.tn-search.tn-focus::after{display:none}
@keyframes tn-blink{0%,50%{opacity:.75}50.01%,100%{opacity:0}}
@media (prefers-reduced-motion:reduce){.tn-search::after{animation:none}}
@media (max-width:719px){ .tn-head .tn-mid:not(:empty){order:3;flex:1 1 100%} .tn-search{max-width:none} .tn-search input{padding:12px 14px;font-size:16px} }