/* ts-nav.css — 왼쪽 햄버거 메뉴(req.md 9.9). Keep 사이트 Layout.tsx 사이드바 값 그대로:
   흰 배경, 오른쪽 1px 경계선, 첫 칸 52px + 아래 경계선, 접힘 52(2026-09-30 64에서 ChatGPT 크기로) ↔ 펼침 195(--ts-nav-open-width, 2026-09-29 260에서 1/4 줄임, transition .25s),
   펼침 트리 = 굵은 대문자 섹션 제목(12.5px 800) · 하위 항목(13px 700) · 들여쓰기+왼쪽 1.5px 세로선 · ▶/▼. */
.ts-nav {
  flex: 0 0 auto;
  width: var(--ts-rail-width);
  height: 100%;
  display: flex; flex-direction: column;
  background: var(--ts-surface);
  border-right: 1px solid var(--ts-line);
  box-shadow: 0 4px 20px rgba(15, 40, 80, 0.02);
  overflow: hidden;
  transition: width .25s, transform .25s;
  position: relative; z-index: 30;
}
.ts-site[data-nav-open="true"] .ts-nav { width: var(--ts-nav-open-width); }
.ts-nav-top {
  flex: 0 0 var(--ts-bar);
  display: flex; align-items: center; justify-content: center;
  padding: 0 11px;
  border-bottom: 1px solid var(--ts-line-soft);
}
.ts-nav-badge { cursor: pointer; transition: transform .2s; }
.ts-nav-badge:hover { transform: scale(1.05); }
.ts-nav-collapse {
  display: none; margin-left: auto;
  width: 32px; height: 32px; padding: 0;
  border: 1px solid var(--ts-line); border-radius: 9px;
  background: var(--ts-surface); cursor: pointer;
  place-items: center;
}
.ts-collapse-glyph { display: flex; width: 10px; height: 20px; border: 1.5px solid var(--ts-ink-2); border-radius: 3px; overflow: hidden; }
.ts-collapse-glyph span { width: 4px; height: 100%; background: var(--ts-accent); }
.ts-site[data-nav-open="true"] .ts-nav-badge { display: none; }
.ts-site[data-nav-open="true"] .ts-nav-collapse { display: grid; }

/* 접힘 레일: ☰ + 항목 아이콘 */
.ts-nav-rail { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px 0 10px; flex: 1; min-height: 0; }
.ts-site[data-nav-open="true"] .ts-nav-rail { display: none; }
.ts-rail-btn {
  display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0;
  border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--ts-ink-3);
  cursor: pointer; transition: all .2s;
}
.ts-rail-btn:hover { background: var(--ts-accent-soft); color: var(--ts-accent-ink); }
/* ☰도 다른 레일 버튼과 같은 크기 — 테두리 상자 없이, 호버 때 옅은 배경만(ChatGPT 레일처럼) */
.ts-rail-menu { color: var(--ts-ink-2); }
.ts-rail-btn svg, .ts-nav-link svg, .ts-account-btn svg { width: 20px; height: 20px; stroke: currentColor; stroke-width: 1.7; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.ts-rail-sep { width: 24px; height: 1px; background: var(--ts-line); margin: 2px 0; }
.ts-icon-sun { display: none; }
body.dark-mode .ts-icon-sun { display: inline; }
body.dark-mode .ts-icon-moon { display: none; }

/* 펼침 본문 */
.ts-nav-body {
  display: none; flex-direction: column; gap: 6px;
  flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
  padding: 14px 10px 18px; width: var(--ts-nav-open-width);
}
.ts-site[data-nav-open="true"] .ts-nav-body { display: flex; }
.ts-nav button { font-family: inherit; }
.ts-account-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  min-height: 44px; padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--ts-accent); border-radius: 12px;
  background: var(--ts-accent-soft); color: var(--ts-accent-ink);
  font: 700 13px var(--ksans); cursor: pointer; text-align: left;
}
.ts-account-btn:hover { border-color: var(--ts-accent-2); }
.ts-account-actions { display:flex; flex-direction:column; gap:5px; margin-top:6px; padding:9px; border:1px solid var(--ts-line); border-radius:12px; background:var(--ts-accent-soft); }
.ts-account-actions .ts-account-btn { margin:0; }
.ts-account-secondary-actions { display:grid; grid-template-columns:1fr 1fr; gap:5px; }
.ts-nav .ts-account-action { box-sizing:border-box; display:flex; align-items:center; justify-content:center; width:100%; min-height:44px; padding:10px 8px; border:1px solid var(--ts-line); border-radius:10px; background:var(--ts-surface); color:var(--ts-ink-2); font:600 12px var(--ksans); cursor:pointer; }
.ts-account-action:hover { border-color:var(--ts-accent-2); color:var(--ts-accent-ink); }
.ts-nav-head, .ts-tree-head, .ts-tree-book-head {
  display: flex; align-items: center; width: 100%;
  border: 0; background: transparent; cursor: pointer; text-align: left;
  border-radius: 10px;
}
.ts-nav-head { padding: 10px 12px; font: 800 12.5px var(--ksans); color: var(--ts-ink-strong); text-transform: uppercase; letter-spacing: .01em; }
.ts-nav-head > span:first-child, .ts-tree-head > span:first-child, .ts-tree-book-head > span:first-child { flex: 1; min-width: 0; }
.ts-nav-head:hover, .ts-tree-head:hover, .ts-tree-book-head:hover, .ts-nav-link:hover { background: var(--ts-hover); color: var(--ts-accent-ink); }
.ts-caret { flex-shrink: 0; margin-left: 8px; padding: 2px 6px; font-size: 10px; color: var(--ts-sub); transition: transform .15s; }
[aria-expanded="true"] > .ts-caret { transform: rotate(90deg); }
.ts-nav-note { font: 500 11px var(--ksans); color: var(--ts-sub); text-transform: none; }
.ts-nav-children, .ts-tree-children {
  display: flex; flex-direction: column; gap: 4px;
  padding-left: 8px; margin: 4px 0 8px 12px;
  border-left: 1.5px solid var(--ts-line);
}
.ts-nav-section[data-open="false"] > .ts-nav-children { display: none; }
.ts-tree-group[data-open="false"] > .ts-tree-children { display: none; }
.ts-tree-head { padding: 8px 12px; font: 700 13px var(--ksans); color: var(--ts-ink-2); }
.ts-tree-book-head { padding: 7px 12px; font: 500 13px var(--ksans); color: var(--ts-ink-3); }
.ts-tree-book-head.is-current { color: var(--ts-accent-ink); font-weight: 700; }
.ts-tree-book-head .ts-caret { font-size: 9px; }
.ts-tree-chapters { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; padding: 4px 4px 8px 12px; }
.ts-tree-chapters button {
  height: 28px; padding: 0; border: 1px solid var(--ch-border); border-radius: 7px;
  background: var(--ch-bg); color: var(--ch-text); font: 600 11.5px var(--ksans); cursor: pointer;
}
.ts-tree-chapters button:hover { border-color: var(--ch-hover-border); background: var(--ch-hover-bg); }
.ts-tree-chapters button.sel { background: var(--ch-active-grad); color: #fff; border-color: transparent; }
.ts-nav-help { margin: 4px 4px 8px; font-size: 11.5px; line-height: 1.6; color: var(--ts-sub); }
.ts-nav-sep { border: 0; border-top: 1px solid var(--ts-line); margin: 10px 0; }
.ts-nav-link {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border: 0; border-radius: 8px; background: transparent;
  font: 500 13px var(--ksans); color: var(--ts-ink-3); cursor: pointer; text-align: left;
}
.ts-lang-link { font-size: 12px; }
.ts-lang-current { margin-left: auto; color: var(--ts-accent-ink); font-weight: 600; }

/* 성경선택(번역본) 카드 — TASK-020 서랍 카드와 같은 구성, 260px 폭에 맞춤 */
.ts-edition-list { display: flex; flex-direction: column; gap: 6px; }
.ts-edition-option {
  --ed-accent: var(--ts-line); --ed-soft: var(--ts-surface); --ed-text: var(--ts-ink);
  display: flex; align-items: center; gap: 6px;
  padding: 8px 6px 8px 8px;
  border: 1px solid var(--ts-line); border-radius: 10px; background: var(--ts-surface);
}
.ts-edition-option[data-lang="ko"] { --ed-accent: var(--ts-ko); --ed-soft: var(--ts-ko-soft); --ed-text: var(--ts-ko-ink); }
.ts-edition-option[data-lang="en"] { --ed-accent: var(--ts-en); --ed-soft: var(--ts-en-soft); --ed-text: var(--ts-en-ink); }
.ts-edition-option:has(input:checked) { background: var(--ed-soft); border-color: var(--ed-accent); }
.ts-edition-option:has(input:checked) strong { color: var(--ed-text); }
.ts-edition-option[data-primary="true"] { box-shadow: inset 4px 0 var(--ed-accent); }
.ts-edition-label { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; cursor: pointer; }
.ts-edition-label input { width: 17px; height: 17px; flex-shrink: 0; accent-color: var(--ed-accent); }
.ts-edition-label strong { display: block; font-size: 12.5px; color: var(--ts-ink); }
.ts-edition-label small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.45; color: var(--ts-sub); }
.ts-edition-move { display: flex; flex-direction: column; gap: 2px; flex-shrink: 0; }
.ts-edition-move button {
  width: 26px; height: 22px; padding: 0; border: 1px solid var(--ts-line); border-radius: 6px;
  background: var(--ts-surface); color: var(--ts-ink-2); font-size: 12px; cursor: pointer;
}
.ts-edition-move button:disabled { opacity: .3; cursor: default; }
.ts-visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* 모바일: 오프캔버스(왼쪽에서 밀려 나옴) + 백드롭 */
.ts-nav-backdrop { display: none; }
@media (max-width: 767px) {
  .ts-nav { position: fixed; top: 0; bottom: 0; left: 0; width: min(88vw, 300px); transform: translateX(-100%); box-shadow: none; }
  .ts-site[data-nav-open="true"] .ts-nav { width: min(88vw, 300px); transform: translateX(0); box-shadow: 0 14px 50px rgba(0, 0, 0, .2); }
  .ts-nav-rail { display: none; }
  .ts-nav-body { display: flex; width: 100%; }
  .ts-nav-top { justify-content: space-between; }
  .ts-nav-badge { display: grid; }
  .ts-site[data-nav-open="true"] .ts-nav-badge { display: grid; }
  .ts-nav-collapse { display: grid; }
  .ts-site[data-nav-open="true"] .ts-nav-backdrop { display: block; position: fixed; inset: 0; z-index: 29; background: rgba(10, 25, 45, .35); backdrop-filter: blur(4px); }
}
@media (prefers-reduced-motion: reduce) { .ts-nav, .ts-caret, .ts-rail-btn { transition: none; } }

/* ── 사람 지시 2026-09-28: 메뉴 정리 · 준비 중 · 계정 ── */
.ts-rail-spacer { flex: 1; }
.ts-nav-bottom { margin-top: auto; display: flex; flex-direction: column; gap: 4px; padding-top: 10px; border-top: 1px solid var(--ts-line); }
.ts-nav-bottom .ts-account-btn { margin: 6px 0 0; }
/* 준비 중: 회색 톤 + 작은 배지(하늘 팔레트 안의 중립색) */
.ts-soon {
  display: inline-block; margin-left: 8px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--ts-line); background: var(--ts-hover); color: var(--ts-sub);
  font: 600 10.5px var(--ksans); letter-spacing: 0; text-transform: none; vertical-align: middle; white-space: nowrap;
}
.ts-pending { color: var(--ts-sub) !important; }
.ts-nav-head.ts-pending > span:first-child { flex: 0 1 auto; }
.ts-rail-btn.ts-pending { opacity: .6; }
/* 로그인 후 계정 영역: 닉네임(수정) · 이메일(읽기 전용) · 로그아웃 */
.ts-account { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; padding: 10px; border: 1px solid var(--ts-line); border-radius: 12px; background: var(--ts-accent-soft); }
.ts-nick-label { font: 700 11px var(--ksans); color: var(--ts-sub); }
.ts-nick-row { display: flex; gap: 6px; }
.ts-nick-input { flex: 1; min-width: 0; height: 34px; padding: 0 10px; border: 1px solid var(--ts-line); border-radius: 8px; background: var(--ts-surface); color: var(--ts-ink); font: 600 13px var(--ksans); }
.ts-nick-input:focus-visible { outline: 2px solid var(--ts-accent); outline-offset: 1px; }
.ts-nick-save { flex-shrink: 0; height: 34px; padding: 0 12px; border: 0; border-radius: 8px; background: var(--ts-accent); color: #fff; font: 700 12px var(--ksans); cursor: pointer; }
.ts-account-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ts-account-email { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11.5px; color: var(--ts-sub); }
.ts-logout { flex-shrink: 0; padding: 4px 8px; border: 1px solid var(--ts-line); border-radius: 7px; background: var(--ts-surface); color: var(--ts-ink-2); font: 600 11px var(--ksans); cursor: pointer; }
.ts-avatar { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: var(--ts-accent); color: #fff; font: 800 13px var(--ksans); }
.ts-avatar[hidden] { display: none; }
.ts-account[hidden], .ts-account-btn[hidden] { display: none; }

/* 펼침 폭 1/4 줄임(260 → 195px, 사람 지시 2026-09-29 "가로가 좀 긴 듯한? 1/4만 줄여볼까?"). 모바일 오프캔버스 폭은 그대로.
   좁아진 폭에서 메뉴 글자가 두 줄로 깨지지 않게 좌우 여백·글자 간격만 조금 줄인다(글자 크기는 유지, 이메일만 말줄임). */
:root { --ts-nav-open-width: 195px; }
.ts-nav-body .ts-nav-link, .ts-nav-body .ts-nav-head { padding-left: 10px; padding-right: 10px; white-space: nowrap; letter-spacing: -0.02em; }
.ts-nav-body .ts-account-btn { padding: 10px; gap: 8px; white-space: nowrap; letter-spacing: -0.02em; }
.ts-nav-body .ts-lang-current { white-space: nowrap; }
.ts-account { padding: 8px; }
.ts-nick-input { padding: 0 8px; }
.ts-nick-save { padding: 0 10px; }
@media (max-width: 767px) { .ts-nav-body { padding-left: 16px; padding-right: 16px; } }

/* ── 지난 대화 목록(TASK-029, 사람 결정 2026-09-30 "10개가 보이게 … 스크롤이 중간에 생길 수는 있지", 같은 날 추가 지시로 CHAT 바로 밑) ──
   CHAT 바로 아래·하단 고정 묶음(소개·약관·다크·언어·로그인) 위. 목록이 길면 이 칸만 세로 스크롤(다른 메뉴 칸은 줄어들지 않음). 접힌 레일에서는 .ts-nav-body째 숨는다.
   그리는 코드: 샘플 chat-nav-history.js(가짜 기록) / 앱 reader-chat-nav.js(GET /api/v1/chat/history) — 2026-09-30 사람 승인, TASK-032 앱 이식. */
.ts-nav-body:has(> .ts-chat-nav) > :not(.ts-chat-nav) { flex-shrink: 0; }
.ts-chat-nav { flex: 0 1 auto; min-height: 0; display: flex; flex-direction: column; margin-top: 4px; padding-bottom: 8px; }
.ts-chat-nav[data-state="list"] { min-height: 110px; } /* 좁은 창에서도 목록 2~3줄은 보이게 */
.ts-chat-nav-title { flex-shrink: 0; margin: 0 0 4px; padding: 0 10px; font: 700 11px var(--ksans); color: var(--ts-sub); letter-spacing: .02em; }
.ts-chat-nav-list { list-style: none; margin: 0; padding: 0 2px 0 0; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 1px; scrollbar-width: thin; }
.ts-chat-nav-item { display: flex; align-items: baseline; gap: 7px; width: 100%; min-height: 32px; padding: 6px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--ts-ink-3); font: 500 12.5px var(--ksans); text-align: left; cursor: pointer; }
.ts-chat-nav-item:hover { background: var(--ts-hover); color: var(--ts-accent-ink); }
.ts-chat-nav-item:focus-visible { outline: 2px solid var(--ts-accent); outline-offset: -2px; }
.ts-chat-nav-item.is-current { background: var(--ts-accent-soft); color: var(--ts-accent-ink); box-shadow: inset 3px 0 var(--ts-accent); }
.ts-chat-nav-date { flex-shrink: 0; font-weight: 700; color: var(--ts-ink-2); white-space: nowrap; }
.ts-chat-nav-item.is-current .ts-chat-nav-date { color: inherit; }
.ts-chat-nav-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ts-chat-nav-empty, .ts-chat-nav-guest { margin: 0; padding: 6px 10px; font: 500 12px/1.5 var(--ksans); color: var(--ts-sub); }
.ts-chat-nav-guest { width: 100%; border: 0; border-radius: 8px; background: transparent; text-align: left; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.ts-chat-nav-guest:hover { background: var(--ts-hover); color: var(--ts-accent-ink); }