/* ts-frame.css — 우리 바깥 틀. Keep 사이트 `src/views/Layout.tsx` 모양(읽기 전용 참고):
   왼쪽 메뉴(접힘 52px ↔ 펼침 195px — 2026-09-29 260에서 1/4 줄임, 폭 전환 .25s, 본문을 밀어냄) + 오른쪽 [52px 브랜드 줄 + Keep 뷰어].
   맨 위 왼쪽 모서리 = 메뉴 첫 칸의 아이콘 A 배지 | 메뉴 오른쪽 경계선(세로 구분선) | "The Scripture"(2026-09-28 사람 지시).
   모바일(≤767): 브랜드 줄 없음, Keep 모바일 헤더 한 줄(☰ · 작은 배지+장 제목 · ⚙), 메뉴는 오프캔버스+백드롭. */

/* 글꼴 — 외부 CDN 없이 로컬 파일(OFL: fonts/OFL-*.txt). Keep이 쓰는 글꼴과 같은 것. */
@font-face { font-family: "EB Garamond"; font-style: normal; font-weight: 400 800; font-display: swap; src: url(fonts/EBGaramond-latin.woff2) format("woff2"); }
@font-face { font-family: "EB Garamond"; font-style: italic; font-weight: 400 800; font-display: swap; src: url(fonts/EBGaramond-latin-italic.woff2) format("woff2"); }
@font-face { font-family: "Pretendard"; font-style: normal; font-weight: 45 920; font-display: swap; src: url(fonts/PretendardVariable.woff2) format("woff2-variations"); }
@font-face { font-family: "Plus Jakarta Sans"; font-style: normal; font-weight: 800; font-display: swap; src: url(fonts/PlusJakartaSans-latin.woff2) format("woff2"); }

:root {
  /* ChatGPT 크기로 줄임(사람 지시 2026-09-30 "GPT는 좁거든, GPT 사이즈로 top·햄버거 좌측 수정"):
     접힌 레일 폭 = 상단 브랜드 줄 높이 = 52px(예전 64), TS 배지 30px, 레일 버튼 36px·아이콘 20px·간격 8px, 모바일 헤더 52px. */
  --ts-bar: 52px;
  --ts-rail-width: 52px;
}
.ts-site {
  display: flex;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  position: relative;
}
/* 은은한 하늘빛 번짐(Keep Layout.tsx 배경 glow 두 개와 같은 자리·크기) */
.ts-site::before, .ts-site::after { content: ""; position: absolute; pointer-events: none; z-index: 0; border-radius: 50%; }
.ts-site::before { top: -200px; left: 30%; width: 600px; height: 600px; background: radial-gradient(circle, var(--ts-glow-1) 0%, transparent 70%); }
.ts-site::after { top: 40%; right: -100px; width: 400px; height: 400px; background: radial-gradient(circle, var(--ts-glow-2) 0%, transparent 70%); }

.ts-content {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column;
  position: relative; z-index: 1;
}
.ts-topbar {
  flex: 0 0 var(--ts-bar);
  height: var(--ts-bar);
  display: flex; align-items: center; gap: 12px;
  padding: 0 20px;
  background: var(--ts-surface-glass);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--ts-line-soft);
  z-index: 20;
}
.ts-badge {
  display: grid; place-items: center; flex-shrink: 0;
  width: 30px; height: 30px; padding: 0;
  border-radius: 9px;
  background: var(--ts-surface);
  border: 1px solid var(--ts-line);
  box-shadow: 0 2px 6px var(--ts-badge-shadow);
}
.ts-badge img { width: 24px; height: 24px; display: block; }
.ts-topbar-badge { display: none; }
.ts-site[data-nav-open="true"] .ts-topbar-badge { display: grid; }
.ts-wordmark {
  font: 800 18px "Plus Jakarta Sans", var(--ksans);
  letter-spacing: -0.02em;
  color: var(--ts-ink-strong);
  white-space: nowrap;
}

/* Keep 뷰어(.app)는 브랜드 줄 아래 남은 높이를 채운다(Keep의 100vh 높이들을 칸 높이로). */
.ts-content > .app { flex: 1; min-height: 0; height: auto; }
@media (min-width: 768px) {
  .ts-content .sidebar, .ts-content .main { height: 100%; }
}
@media (min-width: 1600px) {
  .ts-content .sidebar-books-pane, .ts-content .sidebar-chapters-pane { height: 100%; }
}

.six-header h1 { display: flex; align-items: center; gap: 8px; }
.ts-header-badge { display: none; }
@media (max-width: 767px) {
  .ts-topbar { display: none; }
  .ts-header-badge { display: block; width: 24px; height: 24px; flex-shrink: 0; }
  .six-header h1 { min-width: 0; }
  .six-header .six-brand-home { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}

/* 모바일 헤더(Keep .six-header: 44px 아이콘 + 위아래 8px ≈ 61px)도 52px로: 아이콘 버튼 36px, 위아래 8px. */
@media (max-width: 767px) {
  .six-header { padding: max(8px, env(safe-area-inset-top)) 10px 8px; gap: 10px; }
  .six-header .six-icon { min-width: 36px; width: 36px; height: 36px; border-radius: 10px; }
  .six-header .six-icon svg { width: 20px; height: 20px; }
  .six-header h1 { font-size: 21px; }
  .ts-header-badge { width: 22px; height: 22px; }
}