/* ★ 2026-10-14 3단계 공용 고침(S2D-4·C2D-5): 1행에 있던 Google Fonts `@import`(Inter+Noto Sans KR)를 뺐다 — `theme.css` 에 똑같은 주소가 있고,
     이 파일을 싣는 화면은 모두 `theme.css` 도 싣는다. `@import` 는 그 글꼴 CSS 를 다 받을 때까지 첫 그림을 막는다(느린 3G 로컬 1.05→5.65초).
     글꼴은 `theme.js` 가 막지 않게(`media=print`→`all`) 따로 싣는다. 기록 `backend/.omc/plans/link-tellby-usability.md` §6-23 */
/* 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","Noto Sans KR",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(--on-accent,#16181d)}
.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:var(--on-accent,#16181d);
  font:800 11px/19px var(--font,"Inter","Noto Sans KR",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)}
.tn-float .tn-word{display:none}   /* 지도 위에는 워드마크 없음 — JS 가 안 그리지만 옛 캐시 JS 대비(2026-09-26) */

/* ════ 공용 머리띠 틀 = 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 휴대폰 모양 그대로(사장님 캡처 2026-09-26): **첫 줄 한 줄에** 로고 · 사이트 · 언어 · 🛒 · 👤,
   둘째 줄 검색칸 전폭. ★처음엔 도구를 둘째 줄로 내려 세 줄이 됐다 — link 만 두 줄이었다. */
@media (max-width:719px){
  .tn-head .tn-sites{flex:1 1 auto;min-width:0}
  .tn-head .tn-tools{flex:none;margin-left:auto;gap:6px}
  .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} }
/* ★ 좁은 폰(390px)에서도 **한 줄**: 사이트 줄이 줄어들며 옆으로 밀리고, 도구(언어·🛒·👤)는 늘 첫 줄 오른쪽.
     (사장님 캡처의 link 는 한 줄이었는데 390px 에서는 link 도 두 줄이 됐다 — 폭 기준으로 다시 맞춤, 2026-09-26) */
@media (max-width:719px){
  .tn{flex-wrap:wrap}
  .tn .tn-sites{flex:1 1 0;min-width:0;gap:0}
  .tn .tn-site{padding:5px 8px;font-size:12px;min-height:30px}
  .tn .tn-tools{flex:none;margin-left:auto;gap:6px}
  .tn .tn-ic{width:34px;height:34px}
  .tn .tn-ic svg{width:18px;height:18px}
  .tn .tn-lang .pill,.tn .tn-lang button{min-height:34px;height:34px;padding:0 10px;font-size:12px}
  .tn .tn-mid:not(:empty){order:3;flex:1 1 100%}
}

/* ════ 앱 모양 머리 (2026-09-26 사장님 「앱 좌측 상단 로고 글꼴·점 · 하단 앱 아이콘을 상단 메뉴로」) ════
   워드마크 = `frontend/components/brand/Wordmark.tsx`: 대문자·Inter 700·자간 1.5·26px·주황 점 8px.
   사이트 단추 = `BottomTabBar.tsx`: 44px 동그라미, 지금 것만 주황 바탕 + 테두리 + 흰 아이콘. */
/* ★ 2026-10-17 「하나로 묶는 얼굴」(`tellby-site-identity.md` §3-2): 워드마크는 어느 사이트든 「TELLBY•」, 그 밑 작은 이름표(.tn-name)가 사이트 이름.
   예전엔 CONTENT·LINK·GRND 가 폭이 달라 문턱이 둘(410/420·540)이었다 — 이름이 하나라 문턱도 하나다. */
.tn-word{flex:none;display:inline-flex;flex-direction:column;align-items:flex-start;gap:3px;text-decoration:none;color:var(--txt,#0f172a);white-space:nowrap}
.tn-wm{display:inline-flex;align-items:flex-start;font:700 26px/1 "Inter","Noto Sans KR",system-ui,sans-serif;letter-spacing:1.5px}
.tn-word i{width:8px;height:8px;border-radius:50%;background:var(--accent,#ff6933);margin:2px 0 0 3px;flex:none}
.tn-name{font:700 11px/1 "Inter","Noto Sans KR",system-ui,sans-serif;letter-spacing:.02em;color:var(--sub,#475569)}
/* 좁으면 로고를 아예 빼고 남은 단추를 폭 전체에 고르게(2026-10-15 사장님, content-usability.md §7-6 ⑥). 문턱은 `430`px — 14개 말 × 사이트 셋(콘텐츠·링크·광장)이 한 줄·겹침 없이 드는 가장 좁은 폭(크로미움 10px 걸음 실측 10/17: 최대 link·fr 430, 나머지 350~410). */
@media (max-width:719px){ .tn:not(.tn-float) .tn-word{display:none} }
@media (min-width:430px) and (max-width:719px){ .tn:not(.tn-float) .tn-word{display:inline-flex} }
.tn-word:focus-visible{outline:3px solid var(--accent,#ff6933);outline-offset:3px;border-radius:4px}
.tn .tn-sites{gap:2px}
.tn .tn-site{width:44px;height:44px;min-height:0;padding:0;justify-content:center;border-radius:50%;border:1.5px solid transparent;
  background:transparent;color:var(--sub,#94a3b8)}
.tn .tn-site svg{width:24px;height:24px;fill:currentColor}
.tn .tn-site:hover{color:var(--txt,#0f172a);border-color:transparent;background:var(--chip,rgba(15,23,42,.06))}
.tn .tn-site[aria-current="page"]{background:var(--accent,#ff6933);border-color:var(--outline,#111);color:var(--on-accent,#16181d)}
@media (max-width:719px){
  .tn-wm{font-size:20px;letter-spacing:1.2px}
  .tn-word i{width:6px;height:6px}
  .tn-name{font-size:10px}
  .tn .tn-site{width:36px;height:36px;padding:0}
  .tn .tn-site svg{width:21px;height:21px}
}

/* ★ 휴대폰 첫 줄 = 워드마크 · 사이트 아이콘 넷 · 언어 · 🛒 · 👤 를 **가로폭에 같은 간격**으로
     (사장님 2026-09-26 「우측의 언어·장바구니 아이콘을 포함해서 가로폭에 균등간격으로」).
     사이트 묶음과 도구 묶음을 풀어(display:contents) 모두 한 줄의 형제로 두고 space-between. 검색칸은 둘째 줄 그대로. */
@media (max-width:719px){
  .tn:not(.tn-float),.tn-head > #tnav.tn:not(.tn-float){justify-content:space-between;column-gap:0}   /* #tnav 의 gap(id 선택자)이 이겨서 360px 에서 넘쳤다 */
  .tn:not(.tn-float) .tn-sites,.tn:not(.tn-float) .tn-tools{display:contents}
  .tn .tn-site,.tn .tn-ic,.tn .tn-lang{flex:none}
  .tn .tn-ic{width:36px;height:36px}
  .tn .tn-lang .pill,.tn .tn-lang button{min-width:36px;height:36px;min-height:36px;padding:0 8px}
}
@media (max-width:380px){
  .tn:not(.tn-float){flex-wrap:wrap}
  .tn-wm{font-size:17px;letter-spacing:1px}
  .tn .tn-site,.tn .tn-ic{width:32px;height:32px}
  .tn .tn-site svg{width:19px;height:19px}
  .tn .tn-ic svg{width:16px;height:16px}
  .tn .tn-lang .pill,.tn .tn-lang button{min-width:32px;height:32px;min-height:32px;padding:0 6px;font-size:11px}
}

/* ════ 자동 숨김 (2026-10-02 사장님 「쇼츠 및 어떤 경우에도 기본적으로 앞으로 상단 메뉴는 자동 숨김」) ════
   tellby_nav.js 가 머리띠(header 또는 float 의 #tnav)에 .tn-auto 를 달고, 접히면 .tn-away.
   2026-10-04 (사장님 「상단메뉴가 콘텐츠를 가리는 형태가 아니라 최상단 영역 메뉴 아래에 콘텐츠가 구현되는 형태로 — 가리지 않게」):
   떠 있지 않고(sticky) 맨 위에 자리를 차지한다 — 내용은 메뉴 아래에서 시작한다. 내려 읽을 때만 위로 밀려 숨고, 올리면 그 자리로 돌아온다.
   지금 높이 = --site-nav-h(숨으면 0) — 위에 붙는 것은 top:var(--site-nav-h,0px) 로 따라온다. 북 `TellbyNav.module.css` 의 .fold 와 같은 값. */
@property --site-nav-h{syntax:"<length>";inherits:true;initial-value:0px}
html{transition:--site-nav-h .22s ease}
.tn-auto.tn-auto{position:sticky;top:0;z-index:1000;transform:none;transition:transform .22s ease;will-change:transform;
  box-shadow:0 6px 18px rgba(15,23,42,.12)}
.tn-auto.tn-away{transform:translateY(calc(-100% - 8px));box-shadow:none;pointer-events:none}   /* 링크는 Tab 으로 닿는다 — 들어오면 내려온다 */
/* 지도 위(float)는 칩 줄 안에 있으니 자리째 접는다 — 칩이 왼쪽으로 붙는다 */
.tn-float.tn-auto{position:static;transform:none;box-shadow:none;transition:none}
.tn-float.tn-away{display:none}
.tn-handle{position:fixed;top:0;left:50%;z-index:1001;transform:translateX(-50%);width:64px;height:18px;display:grid;place-items:center;
  border:0;border-radius:0 0 10px 10px;background:rgba(252,250,248,.9);cursor:pointer;padding:0;-webkit-tap-highlight-color:transparent}
.tn-handle[hidden]{display:none}
.tn-handle span{width:28px;height:4px;border-radius:9999px;background:#94a3b8}
.tn-handle:focus-visible{outline:3px solid var(--accent,#ff6933);outline-offset:2px}
body.shorts .tn-handle,html[data-tn-immersive] .tn-handle{background:rgba(18,18,18,.85)}
body.shorts .tn-handle span,html[data-tn-immersive] .tn-handle span{background:#6b7280}
@media (prefers-reduced-motion:reduce){ html{transition:none} .tn-auto.tn-auto{transition:none} }
@media print{ .tn-auto,.tn-handle{display:none !important} }

/* ════ 머리띠 높이 줄이기 (2026-10-04 사장님 「최상단 바가 위아래로 너무 넓어 쓸데없이 공간을 많이 차지」) ════
   휴대폰 390px 실측 127px = 여백 16+16 · 첫 줄 최소 60(아이콘은 36) · 사이 10 · 검색칸 48.
   → 여백 8 · 첫 줄은 아이콘 높이대로 · 사이 8. 검색칸은 그대로(사장님: 검색칸 있을 땐 적당 — 넓어 보인 건 검색칸 없는 화면). 데스크톱도 여백 10, 줄 최소 48. */
.tn-head{padding-top:10px;padding-bottom:10px}
.tn-head .tn,.tn-head > #tnav{min-height:48px}
@media (max-width:719px){
  .tn-head{padding-top:8px;padding-bottom:8px}
  .tn-head .tn,.tn-head > #tnav{min-height:0;row-gap:8px}
}

/* ════ 그림 + 보이는 낱말 (2026-10-09 어린이 사용성 P2 「그림 4개 중 글자 붙은 것 0」) ════
   사이트 단추·🛒·👤·언어 단추가 모두 **동그라미 그림(.tn-c) + 밑 낱말(.tn-l)** 한 모양이다.
   예전 규칙(.tn-site 44px 원 · .tn-ic 36px 원)은 위에 남아 있고, 여기서 틀만 바꾼다 — 원 모양은 .tn-c 가 받는다.
   북(`tripbook/app/TellbyNav.module.css`)은 React 라 아직 옛 모양이다. */
.tn .tn-site,.tn .tn-ic,.tn .tn-lang button.tn-ic{display:inline-flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:2px;
  width:auto;min-width:44px;height:auto;min-height:0;padding:0 2px;border:0;border-radius:10px;background:transparent;box-shadow:none;
  color:var(--sub,#475569);text-decoration:none;cursor:pointer;font:inherit}
.tn .tn-c{position:relative;display:grid;place-items:center;width:36px;height:36px;border-radius:50%;flex:none;box-sizing:border-box}
.tn .tn-site .tn-c svg{width:22px;height:22px;fill:currentColor}
.tn .tn-ic .tn-c{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 .tn-ic .tn-c svg{width:19px;height:19px;fill:currentColor}
.tn .tn-l{display:block;font:700 10.5px/1.15 var(--font,"Inter","Noto Sans KR",system-ui,sans-serif);white-space:nowrap;letter-spacing:0;color:var(--sub,#475569)}
.tn .tn-site:hover,.tn .tn-ic:hover{background:transparent;border-color:transparent}
.tn .tn-site:hover .tn-c{background:var(--chip,rgba(15,23,42,.06));color:var(--txt,#0f172a)}
.tn .tn-ic:hover .tn-c{background:var(--accent,#ff6933);color:var(--on-accent,#16181d)}
.tn .tn-site[aria-current="page"]{background:transparent;border:0;color:var(--on-accent,#16181d)}
.tn .tn-site[aria-current="page"] .tn-c{background:var(--accent,#ff6933);border:1.5px solid var(--outline,#111)}
.tn .tn-site[aria-current="page"] .tn-l{color:var(--txt,#0f172a)}
.tn .tn-me .tn-c{overflow:hidden}
.tn .tn-me .tn-c img{width:100%;height:100%;object-fit:cover;display:block}
.tn .tn-me.tn-in .tn-c{border-color:var(--accent,#ff6933)}
.tn .tn-badge{top:-7px;right:-9px}
.tn-float .tn-sites{border-radius:16px;padding:3px 4px}
/* 지도 위(float) — 도구 묶음(언어·🛒·👤)도 알약 바탕 위에. 바탕이 없으면 밑 낱말이 지도 방울과 겹쳐 안 읽혔다(2026-10-09 운영 실측). */
.tn-float .tn-tools{background:var(--surface,#fff);border:var(--bw,2px) solid var(--outline,#111);border-radius:16px;box-shadow:var(--sh,2px 2px 0 #111);padding:3px 4px;gap:2px}
/* 2026-10-15 사장님(nav-unify, content-usability.md §7-7): 링크 /all(지도 위 float)만 사이트 넷·도구 셋을 **바깥 상자 둘**로 묶어 콘텐츠와 달랐다.
   → 묶음 상자를 걷고 단추 하나하나(콘텐츠 윗줄과 같은 동그라미 + 밑 낱말). 지도 위라 낱말이 안 읽히던 것(10/9)은 낱말마다 작은 바탕으로 막는다.
   ★ 나뉜 까닭 = `yt_all.html` 이 `TellbyNav.mount({variant:'float'})` 로 부른다(그 파일은 다른 일꾼 몫 — 안 고침). 위 옛 덩이는 지우지 않고 여기서 덮는다. */
.tn-float .tn-sites,.tn-float .tn-tools{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;gap:4px}
.tn-float .tn-site .tn-c{background:var(--surface,#fff);border:var(--bw,2px) solid var(--outline,#111);box-shadow:var(--sh,2px 2px 0 #111);color:var(--txt,#0f172a)}
.tn-float .tn-site[aria-current="page"] .tn-c{background:var(--accent,#ff6933);color:var(--on-accent,#16181d)}
.tn-float .tn-l{background:var(--surface,#fff);border-radius:6px;padding:1px 5px;margin-top:1px}
@media (max-width:719px){
  .tn .tn-c{width:32px;height:32px}
  .tn .tn-site .tn-c svg{width:20px;height:20px}
  .tn .tn-ic .tn-c svg{width:17px;height:17px}
  .tn .tn-l{font-size:10px}
  .tn .tn-site,.tn .tn-ic,.tn .tn-lang button.tn-ic{min-width:38px}
}
@media (max-width:380px){
  .tn .tn-c{width:30px;height:30px}
  .tn .tn-l{font-size:9.5px}
  .tn .tn-site,.tn .tn-ic,.tn .tn-lang button.tn-ic{min-width:34px}
}
/* 언어 고르기 판(.ltt-langlist)의 모양은 `i18n.js` 의 `button()` 이 스스로 붙인다 — 채널 지도는 이 파일을 안 싣는다. */
/* ════ 2026-10-13 2단계(7~8살) 1회차 S2A-3·S2A-4 — 폰 윗줄 낱말 10→11.5px, 누름 자리 폭 38→44, 「L•」 글자표 높이 20→44.
   잣대 `backend/.omc/plans/link-tellby-usability.md` §6-15-1(누를 것 44×44 · 누를 것 낱말 12px 안팎).
   ★ 폭을 44 로만 키우면 390px 홈에서 「로그인」이 둘째 줄로 떨어졌다(실측: 「L」 44 + 일곱 단추 = 409px > 358px).
     단추 사이 틈(6px)·안 여백(2px)을 빼고 묶음 사이 3px, 머리 좌우 여백 16→8px(링크 홈은 `yt_home.html` 의 header) —
     「L」 까지 44×44 로 한 줄(390px 실측: 링크·콘텐츠·GRND 마지막 단추 오른쪽 끝 382px).
   380px 밑(SE 등)은 그래도 모자라 옛 값 그대로. ════ */
@media (max-width:719px) and (min-width:381px){
  .tn .tn-l{font-size:11.5px}
  .tn .tn-site,.tn .tn-ic,.tn .tn-lang button.tn-ic{min-width:44px;min-height:44px;padding:0}
  .tn .tn-sites,.tn .tn-tools{gap:0}
  .tn-head > .tn,.tn-head > #tnav{column-gap:3px}
  .tn-head{padding-left:8px;padding-right:8px}
  .tn-word{min-width:44px;min-height:44px;padding-top:12px;box-sizing:border-box}
}
/* ════ 2026-10-14 3단계 공용 고침 — 그림 글꼴이 오기 전 이름 낱말 숨김(S2D-4, `display=block`→`swap` 짝) ════
   `theme.js` 가 그림 글꼴(Material Symbols) 쓰는 화면에서 `html.tn-mi-wait` 를 달고, 글꼴이 오면(또는 15초 뒤) 걷는다.
   그동안 `.mi[data-i]::before` 낱말(「shopping_bag」)을 비우고 1em 자리만 둔다 — 글꼴이 오면 같은 1em 그림이라 자리가 안 흔들린다. */
html.tn-mi-wait .mi[data-i]::before{content:""}
html.tn-mi-wait .mi[data-i]{min-width:1em;min-height:1em}
/* ════ 2026-10-14 3단계 공용 고침 S2D-3 — 375·320 윗줄 단추 34×43 → 44×44 / 42×44 (잣대 링크 §6-20-2 임시 문턱 40, 가능하면 44) ════
   381~719 는 위 2026-10-13 덩이(44×44·틈 3px). 380px 밑은 그 덩이가 「모자라 옛 값」(34px)이었다.
   · 360~380(아이폰 SE·미니 375): 틈 0·좌우 여백 8px·밑 낱말 10px 이면 여덟 칸(L• · 사이트 넷 · 언어 · 🛒 · 👤) × 44 = 352 ≤ 359 — 한 줄.
   · 359 밑(320): 여덟 칸 × 40 도 304 를 넘는다 → **정해진 접힘**: 워드마크(L•·C•·G•)를 감춘다 — 같은 곳으로 가는 「지금 사이트」 단추(주황)가
     바로 옆에 있다. 일곱 칸 × 42 = 294 ≤ 304 — 한 줄. 지도 위(float)는 알약 안이라 손대지 않는다(/all 은 워드마크도 없다). */
@media (max-width:380px) and (min-width:360px){
  .tn:not(.tn-float) .tn-c{width:32px;height:32px}
  .tn:not(.tn-float) .tn-l{font-size:10px}
  .tn:not(.tn-float) .tn-site,.tn:not(.tn-float) .tn-ic,.tn:not(.tn-float) .tn-lang button.tn-ic{min-width:44px;min-height:44px;padding:0}
  .tn-head > .tn,.tn-head > #tnav{column-gap:0}
  .tn-head{padding-left:8px;padding-right:8px}
  .tn:not(.tn-float) .tn-word{min-width:44px;min-height:44px;padding-top:12px;box-sizing:border-box}
}
@media (max-width:359px){
  .tn:not(.tn-float) .tn-word{display:none}
  .tn:not(.tn-float) .tn-site,.tn:not(.tn-float) .tn-ic,.tn:not(.tn-float) .tn-lang button.tn-ic{min-width:42px;min-height:44px;padding:0}
  .tn-head > .tn,.tn-head > #tnav{column-gap:0}
  .tn-head{padding-left:8px;padding-right:8px}
}
/* ════ 2026-10-14 3단계 공용 고침 C2D-2 — 720~1100 폭에서 「광장」이 찾기 칸 밑으로 잘림 ════
   `.tn-sites` 가 `flex:0 1 auto; overflow-x:auto` 라 찾기 칸(`.tn-mid`)과 같이 줄어들며 넷째 사이트가 굴림 띠 밖으로 숨었다(굴림 띠도 숨김 — 단서 0).
   → 이 폭에선 사이트 줄은 줄지 않고(`flex:none`) 찾기 칸이 줄어든다. 900 밑은 워드마크를 휴대폰처럼 첫 글자(「C•」)로 — 찾기 칸 폭을 남긴다. */
@media (min-width:720px) and (max-width:1100px){
  .tn-head .tn-sites,.tn-head > #tnav .tn-sites,#tnav.tn:not(.tn-float) .tn-sites{flex:none;overflow:visible}
  .tn-head > .tn,.tn-head > #tnav{gap:14px}
}
@media (min-width:720px) and (max-width:900px){
  /* ★ 2026-10-15 S2D-7(링크 3단계 2회차): 이 줄임이 찾기 칸 없는 링크 홈(가운데가 비어 있음)까지 「LINK」→「L•」(78→27px)로 줄였다
       → 가운데(`.tn-mid`)에 찾기 칸 등이 든 머리에서만 줄인다. `:has()` 를 못 읽는 옛 브라우저는 줄이지 않는다(넘치면 사이트 줄은 위 `flex:none`). */
  /* 2026-10-15 §7-6 ⑥: 「C•」 대신 아예 뺀다(줄일 자리면 뺀다 — 사장님) */
  .tn:not(.tn-float):has(.tn-mid:not(:empty)) .tn-word{display:none}
}
/* ════ 2026-10-16 디자인 검토(design-review-20261015.md §7) — 모든 호스트 한 문법 ════
   D-3 지금 사이트 동그라미 = 주황 #ff6933 + 잉크 아이콘(6.19:1) — §8(10/16 사장님): 어둡게 섞은 주황은 걷음.
   D-4 도구(언어·저장·로그인)도 사이트 단추와 같은 문법 — 테두리·그림자 없는 동그라미, 갖다 대면 옅은 바탕. 지도 위(float)만 흰 바탕+테두리(지도 위 읽힘).
       이름표 12px/700(D-24 6단) — 380px 밑은 한 줄에 들도록 예전 값(10·9.5) 그대로.
   D-16 초점 두 겹(--focus-ring) · D-23 숨은 뒤 손잡이 = 흰 알약(글을 덮어도 읽히게). */
.tn .tn-site[aria-current="page"] .tn-c{background:var(--accent,#ff6933);color:var(--on-accent,#16181d)}
.tn:not(.tn-float) .tn-ic .tn-c{border:0;box-shadow:none;background:transparent;color:var(--sub,#475569)}
.tn:not(.tn-float) .tn-ic:hover .tn-c{background:var(--chip,rgba(15,23,42,.06));color:var(--txt,#0f172a)}
.tn .tn-me.tn-in .tn-c{box-shadow:0 0 0 2px var(--accent,#ff6933)}
.tn .tn-l{font-size:12px;font-weight:700}
@media (max-width:380px){ .tn .tn-l{font-size:10px} }
@media (max-width:359px){ .tn .tn-l{font-size:9.5px} }
.tn-site:focus-visible,.tn-ic:focus-visible,.tn-logo:focus-visible,.tn-word:focus-visible,.tn-handle:focus-visible{outline:none;box-shadow:var(--focus-ring,0 0 0 2px #111,0 0 0 4px #ff6933);border-radius:10px}
.tn-handle{width:56px;height:20px;top:2px;border-radius:var(--r-pill,999px);background:var(--surface,#fff);border:1px solid var(--border,#e2e8f0);box-shadow:0 1px 0 rgba(0,0,0,.06)}

/* ════ 2026-10-17 👤 메뉴(사장님 승인 — tellby-site-identity.md §3-2) ════ body 에 붙는 작은 팝오버. 오른쪽 끝을 단추에 맞추고 JS 가 8px 안쪽으로 둔다. */
.tn-pop{position:fixed;z-index:1200;min-width:168px;max-width:calc(100vw - 16px);display:flex;flex-direction:column;padding:6px;border-radius:14px;
  border:var(--bw,2px) solid var(--outline,#111);background:var(--surface,#fff);box-shadow:var(--sh-lg,4px 4px 0 #111);font-family:var(--font,"Inter","Noto Sans KR",system-ui,sans-serif)}
.tn-pi{display:flex;align-items:center;min-height:44px;padding:0 14px;border:0;border-radius:10px;background:transparent;color:var(--txt,#0f172a);
  font:700 14px/1.2 var(--font,"Inter","Noto Sans KR",system-ui,sans-serif);text-align:left;text-decoration:none;cursor:pointer;white-space:nowrap}
.tn-pi:hover,.tn-pi:focus-visible{background:var(--accent,#ff6933);color:var(--on-accent,#16181d);outline:none}

/* ════ 2026-10-18 정본 7칸 (사장님 「폰에서 TELLBY 가 안 보이고 듣기가 없다 · 언어 단추를 👤 안으로」) ════
   다섯 사이트(tellby.us·content·link·grnd·book)가 이 한 벌을 그대로 쓴다:
   로고(폰 「T•」·넓으면 「TELLBY•」, 늘 https://tellby.us/) · 사이트 넷(듣기·콘텐츠 지도·유튜버 지도·트립북 — 같은 순서) · 도구 둘(저장 · 👤 내 정보).
   언어 단추는 줄에서 빠져 👤 메뉴 안에 든다(`.tn-lang` 은 숨은 자리, 메뉴가 열린 동안만 그 단추가 `.tn-pi-lang` 줄이 된다). 폰 390·360 에서 7칸 × 44px 한 줄.
   위쪽의 옛 규칙(폰에서 워드마크 감춤 · 380 밑 32px · 720~900 에서 찾기 칸이 있으면 감춤)은 지우지 않고 여기서 덮는다. */
.tn .tn-lang{display:none}
.tn .tn-w-short,.tn .tn-ls{display:none}
.tn:not(.tn-float) .tn-word{display:inline-flex !important}
@media (max-width:899px){
  .tn:not(.tn-float) .tn-word{min-width:44px;min-height:44px;padding-top:12px;box-sizing:border-box}
  .tn .tn-w-full{display:none}
  .tn .tn-w-short{display:inline}
  .tn .tn-name{display:none}
  .tn .tn-lf{display:none}
  .tn .tn-ls{display:inline}
}
@media (max-width:719px){
  .tn .tn-site,.tn .tn-ic{min-width:44px;min-height:44px}
  .tn:not(.tn-float){column-gap:0;flex-wrap:nowrap}
  .tn-head{padding-left:8px;padding-right:8px}
}
@media (max-width:380px){
  .tn .tn-site,.tn .tn-ic{min-width:44px;min-height:44px;padding:0}
  .tn .tn-c{width:32px;height:32px}
  .tn .tn-l{font-size:10px}
}
/* 👤 메뉴 안의 언어 줄 — 페이지가 준 단추(요소 그대로)를 메뉴 줄 모양으로 */
.tn-pop .tn-pi-lang{display:flex;flex-direction:row;align-items:center;justify-content:flex-start;gap:10px;width:100%;height:auto;min-width:0;min-height:44px;padding:0 14px;margin:0;
  border:0;border-radius:10px;background:transparent;box-shadow:none;color:var(--txt,#0f172a);text-decoration:none;cursor:pointer;font:700 14px/1.2 var(--font,"Inter","Noto Sans KR",system-ui,sans-serif);text-align:left}
.tn-pop .tn-pi-lang .tn-c{display:grid;place-items:center;width:22px;height:22px;border:0;border-radius:0;background:transparent;box-shadow:none;color:inherit}
.tn-pop .tn-pi-lang .tn-c svg{width:20px;height:20px;fill:currentColor}
.tn-pop .tn-pi-lang .tn-l{font:700 14px/1.2 var(--font,"Inter","Noto Sans KR",system-ui,sans-serif);color:inherit;white-space:nowrap}
.tn-pop .tn-pi-lang:hover,.tn-pop .tn-pi-lang:focus-visible{background:var(--accent,#ff6933);color:var(--on-accent,#16181d);outline:none}
/* ════ 2026-10-18 사장님 「상단 주황이 페이지마다 죽은 주황」「T 가 구석에 박혀 있음」 ════
   · 머리띠 바탕은 이미 꽉 찬 색(var(--bg))이라 흐림 필터는 하는 일이 없었다 — 휴대폰 크롬에서 이 층 안의 주황(#ff6933)만 탁하게 보여 뺀다.
     (맥미니 헤드리스 실측은 세 사이트 모두 255,105,51 — 탁함은 휴대폰 합성에서만 보인다.)
   · 휴대폰 워드마크(T•)는 44px 칸 왼쪽 끝에 붙어 있었다(화면 왼쪽 8px) → 칸 가운데로. 칸 폭은 그대로라 한 줄은 안 깨진다. */
.tn-head{backdrop-filter:none;-webkit-backdrop-filter:none}
@media (max-width:719px){ .tn:not(.tn-float) .tn-word{align-items:center} }
/* 2026-10-18 광장이 위 줄로 돌아와 여덟 칸(T• · 문 다섯 · 🛒 · 👤). 360~380 은 44px × 8 + 여백 16 = 368 > 360 이라 광장이 옆으로 밀려 숨었다
   → 이 폭에서만 칸 42px · 좌우 여백 4px(42×7 + 「유튜버 지도」 46 + 8 = 348). 359 밑의 접힘(워드마크 숨김)과 같은 42px 문턱. */
@media (max-width:380px){
  .tn:not(.tn-float) .tn-word,.tn:not(.tn-float) .tn-site,.tn:not(.tn-float) .tn-ic,.tn:not(.tn-float) .tn-lang button.tn-ic{min-width:42px}
  .tn-head{padding-left:4px;padding-right:4px}
}
/* ════ 2026-10-18 사장님 「상단 메뉴를 고정하고 하단에 페이지만 바뀌도록」·「T 를 오른쪽으로 약간」 ════
   · 같은 주소 안 페이지 이동(link 홈→/all, tellby.us→/listen …)은 브라우저의 문서 사이 전환으로 머리띠를 그 자리에 세워 두고 아래만 바꾼다.
     못 읽는 브라우저는 지금처럼 그냥 넘어간다. 다른 하위 주소(content↔link↔book) 사이는 브라우저 규칙상 이을 수 없다 —
     대신 다섯 곳 모두 첫 HTML 에 구운 같은 메뉴가 들어 있어(`services/nav_bake.py`·`nav_baked.js`·`nav-baked.generated.ts`) 같은 자리에 바로 선다.
   · 폰 「T•」: 칸 가운데 맞춤(위 덩이)만으로는 글자 키움(안드로이드 크롬 글꼴 크기)에서 칸이 차면 다시 왼쪽 끝(화면 8px)에 붙는다.
     → 칸 안 왼쪽 여백으로 못 박는다: 글자 왼쪽 = 머리 여백 8 + 12 = 화면 20px(380 밑은 4 + 16 = 20px). 칸 폭(44·42)은 그대로라 여덟 칸 한 줄. */
@view-transition{navigation:auto}
.tn-head{view-transition-name:tn-head}
@media (prefers-reduced-motion:reduce){ ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none !important} }
@media (max-width:719px){ .tn:not(.tn-float) .tn-word{align-items:flex-start;padding-left:12px} }
@media (max-width:380px){ .tn:not(.tn-float) .tn-word{padding-left:16px} }