/* 동봉 글꼴 (모두 SIL OFL 1.1, 각각 보통 400·굵게 700 두 벌)
   - 고딕: Pretendard 서브셋 (fonts/LICENSE-Pretendard-OFL.txt). UI와 본문 고딕에 쓴다.
   - 명조: Noto Serif KR 서브셋 (fonts/LICENSE-OFL.txt). 서재 제목, 표지, 본문 명조에 쓴다.
   완성형 2,350자 범위 밖 글자는 뒤 폰트로 대체된다. 굵기는 400과 700만 쓰고, 없는 굵기·기울임은
   font-synthesis: none 으로 브라우저가 흉내 내지 못하게 막는다. */
@font-face {
  font-family: "TV Sans";
  src: url("../fonts/pretendard-2350-regular-v1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TV Sans";
  src: url("../fonts/pretendard-2350-bold-v1.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TV Serif";
  src: url("../fonts/noto-serif-kr-2350-v1.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "TV Serif";
  src: url("../fonts/noto-serif-kr-2350-bold-v1.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- 디자인 토큰 ----------
   테마는 <html data-theme>에 실린다. color-scheme으로 네이티브 컨트롤·스크롤바도 앱 테마를 따르게 한다.
   밝은 테마는 순백 대신 아주 살짝 따뜻한 종이색, 어두운 테마는 순검정 대신 살짝 들어올린 먹색을 쓴다. */
:root {
  color-scheme: light;
  --bg: #fbfaf7;
  --fg: #1e1c19;
  --muted: #7b7669;
  --border: #e7e3da;
  --border-strong: #d3cec2;
  --bar-bg: rgba(251, 250, 247, 0.9);
  --bar-fg: #1e1c19;
  --surface: #ffffff;
  --surface-2: #f2f0ea;
  --surface-3: #e7e4dc;
  --accent: #b4532a;
  --accent-fg: #ffffff;
  --accent-soft: rgba(180, 83, 42, 0.12);
  --danger: #c23a2f;
  --mark: #ffe08a;
  --shadow-1: 0 1px 2px rgba(40, 30, 15, 0.08), 0 2px 8px rgba(40, 30, 15, 0.06);
  --shadow-2: 0 4px 14px rgba(40, 30, 15, 0.14), 0 1px 3px rgba(40, 30, 15, 0.08);
  --shadow-sheet: 0 -12px 40px rgba(40, 30, 15, 0.14);
  --scrim: rgba(30, 24, 16, 0.42);
  /* 넘김 중 화면 경계에 드리우는 종이 그림자 (밀기 효과) */
  --edge: rgba(40, 30, 15, 0.24);
  --edge-soft: rgba(40, 30, 15, 0.06);
  /* 책장 넘김: 들린 종이가 아래에 드리우는 그림자, 뒤집힌 면의 접힘선 그늘과 빛 받는 면, 종이 가장자리 그림자 */
  --curl-cast: rgba(40, 30, 15, 0.3);
  --curl-sh: rgba(40, 30, 15, 0.22);
  --curl-hi: rgba(255, 255, 255, 0.55);
  --curl-drop: rgba(40, 30, 15, 0.3);
  --font-sans: "TV Sans", Pretendard, system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  --font-serif: "TV Serif", "Noto Serif KR", "Noto Serif CJK KR", "Nanum Myeongjo", "Apple Myungjo", Batang, serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --dur: 0.28s;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #121214;
  --fg: #d7d4cc;
  --muted: #8e8a81;
  --border: #27272b;
  --border-strong: #36363b;
  --bar-bg: rgba(18, 18, 20, 0.88);
  --bar-fg: #e2dfd7;
  --surface: #1b1b1e;
  --surface-2: #252528;
  --surface-3: #303034;
  --accent: #e4956a;
  --accent-fg: #1c0f07;
  --accent-soft: rgba(228, 149, 106, 0.16);
  --danger: #f07b70;
  --mark: #6d5200;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 8px rgba(0, 0, 0, 0.3);
  --shadow-2: 0 4px 14px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-sheet: 0 -12px 40px rgba(0, 0, 0, 0.5);
  --scrim: rgba(0, 0, 0, 0.55);
  --edge: rgba(0, 0, 0, 0.7);
  --edge-soft: rgba(0, 0, 0, 0.25);
  --curl-cast: rgba(0, 0, 0, 0.7);
  --curl-sh: rgba(0, 0, 0, 0.6);
  --curl-hi: rgba(255, 255, 255, 0.05);
  --curl-drop: rgba(0, 0, 0, 0.75);
}

* { box-sizing: border-box; }
/* 앱 전체를 선택 불가로. Chrome(Android)은 선택 가능한 글자를 탭하면 하단에 "탭하여 검색" 바를 띄우는데,
   본문뿐 아니라 바·시트·카드 글자에서도 발동하므로 입력 요소만 빼고 모두 막는다. 정보 시트의 라이선스 목록은 복사할 수 있게 되돌린다. */
:where(*:not(input):not(textarea):not([contenteditable])) { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
input, textarea, .about-list, .about-list * { user-select: text; -webkit-user-select: text; }
html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-sans);
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
  font-synthesis: none;
}
[hidden] { display: none !important; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
svg { width: 24px; height: 24px; fill: currentColor; }
h1, h2 { margin: 0; font-weight: 700; }
.muted { color: var(--muted); }

#app { position: fixed; inset: 0; }
.screen { position: fixed; inset: 0; background: var(--bg); }

/* ---------- 눌림 피드백 ---------- */
.icon-btn, .action-btn, .btn-text, .btn-secondary, .preset, .segmented button, .stepper button, .menu-item, .row-main, .book {
  transition: transform 0.12s var(--ease-out), background-color 0.15s ease, color 0.15s ease;
}
.icon-btn:active, .action-btn:active, .btn-text:active, .preset:active, .stepper button:active { transform: scale(0.92); }
.btn-secondary:active, .fab:active { transform: scale(0.97); }

/* ---------- 서재 ---------- */
.library { display: flex; flex-direction: column; }
.app-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(14px + env(safe-area-inset-top, 0px)) 20px 12px;
  background: var(--bg);
}
.app-bar h1 { display: flex; align-items: center; font-family: var(--font-serif); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.app-bar .logo { width: 28px; height: 28px; flex: none; border-radius: 7px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); }
.btn-text { display: inline-flex; align-items: center; gap: 4px; color: var(--accent); font-weight: 700; padding: 6px 10px; border-radius: 10px; }
.btn-text:active { background: var(--accent-soft); }
.app-bar .wordmark { display: flex; align-items: center; gap: 9px; margin-left: -6px; padding: 4px 8px 4px 6px; border-radius: 12px; }
.app-bar .wordmark:active { background: var(--surface-2); }

/* 정보 시트 */
.about-head { display: flex; align-items: center; gap: 14px; padding: 6px 4px 10px; }
.about-logo { width: 52px; height: 52px; flex: none; border-radius: 12px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14); }
.about-name { font-family: var(--font-serif); font-size: 22px; font-weight: 700; letter-spacing: -0.01em; }
.about-version { font-family: var(--font-sans); font-size: 12.5px; font-weight: 400; color: var(--muted); margin-left: 4px; font-variant-numeric: tabular-nums; }
.about-tagline { color: var(--muted); font-size: 13.5px; margin-top: 2px; }
.about-text { font-size: 13.5px; line-height: 1.6; color: var(--muted); padding: 0 4px 4px; }
.about-list { list-style: none; padding: 0 4px; margin: 0; }
.about-list li { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 0; font-size: 14.5px; border-bottom: 1px solid var(--border); }
.about-list li:last-child { border-bottom: 0; }
.about-list a { color: var(--fg); text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 3px; }
.about-list .muted { font-size: 12.5px; flex: none; }
.btn-text svg { width: 20px; height: 20px; }
.library-body { flex: 1; overflow-y: auto; padding-bottom: 104px; -webkit-overflow-scrolling: touch; }
/* 설치 안내 카드 */
.install-card {
  display: flex; gap: 14px; align-items: flex-start;
  margin: 4px 20px 12px; padding: 14px 16px 8px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--border);
}
.install-logo { width: 40px; height: 40px; flex: none; border-radius: 10px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12); margin-top: 1px; }
.install-text { flex: 1; min-width: 0; }
.install-title { margin: 0 0 4px; font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.install-body { margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--muted); word-break: keep-all; }
.install-actions { display: flex; justify-content: flex-end; align-items: center; gap: 6px; margin: 6px -8px 0 0; }
/* 삼성 인터넷(html.no-share)은 share_target 없는 매니페스트로 설치되므로 공유 기능을 약속하는 구절을 숨긴다 (index.html head 스크립트 참고) */
.no-share .share-only { display: none; }
.book-list { list-style: none; margin: 0; padding: 4px 0 8px; }
.book {
  display: flex; gap: 14px; align-items: center;
  padding: 12px 20px;
}
.book:active { background: var(--surface-2); }
/* 표지: 제목에서 만든 색과 첫 글자들. 왼쪽의 밝은 띠가 책등처럼, 오른쪽 아래의 얇은 선 두 개가 겹친 종이처럼 보이게 한다.
   누르는 동안 책등을 축으로 살짝 기운다. */
.book-cover {
  position: relative; flex: none; width: 46px; height: 64px; border-radius: 3px 6px 6px 3px;
  background: linear-gradient(160deg, var(--c1), var(--c2));
  color: rgba(255, 255, 255, 0.92);
  display: flex; align-items: flex-end;
  padding: 6px 6px 7px 9px;
  font-family: var(--font-serif); font-size: 15px; line-height: 1.2; font-weight: 700; letter-spacing: 0.02em;
  overflow: hidden; white-space: nowrap;
  box-shadow: inset 3px 0 0 rgba(255, 255, 255, 0.22), 1.5px 1.5px 0 0 var(--surface), 3px 3px 0 0 var(--border-strong), var(--shadow-1);
  transform-origin: left center;
  transition: transform 0.18s var(--ease-out), box-shadow 0.18s ease;
}
/* 종이 결: 아주 옅은 노이즈를 겹친다 (SVG 데이터 URI, 파일 없음) */
.book-cover::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.22; mix-blend-mode: overlay;
}
.book:active .book-cover { transform: perspective(500px) rotateY(-14deg); }

/* ---------- 표지 스타일 (app.js applyCover가 cover-* 클래스와 data-text를 붙인다) ----------
   글자: 모노그램은 한 줄, 제목은 작은 글씨로 세 줄까지 */
.cover-text { display: block; min-width: 0; }
.book-cover[data-text="title"] .cover-text {
  font-size: 0.6em; line-height: 1.3; white-space: normal; word-break: keep-all; overflow-wrap: anywhere;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
}
.book-cover::before { content: ""; position: absolute; pointer-events: none; }
/* 제목 표지: 글자를 위에 두고 아래에 얇은 선 */
.cover-title { align-items: flex-start; padding-top: 14%; }
.cover-title .cover-text { padding-bottom: 6%; border-bottom: 1px solid rgba(255, 255, 255, 0.45); }
/* 띠지: 아래 3분의 1에 밝은 띠, 글자는 띠 위에 진한 색으로 */
.cover-band::before { left: 0; right: 0; bottom: 0; height: 34%; background: rgba(255, 255, 255, 0.86); }
.cover-band { padding-bottom: 5%; }
.cover-band .cover-text { position: relative; color: var(--c2); }
.cover-band[data-text="title"] .cover-text { -webkit-line-clamp: 2; }
/* 무지: 단색 바탕, 안쪽 테두리, 가운데 작은 글자 */
.cover-plain { background: var(--c1); align-items: center; justify-content: center; text-align: center; padding: 12%; }
.cover-plain::before { inset: 7%; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 2px; }
.cover-plain .cover-text { font-size: 0.85em; }
.cover-plain[data-text="title"] .cover-text { font-size: 0.55em; }
/* 양장: 넓고 진한 책등, 글자는 그 옆에 */
.cover-bound::before { left: 0; top: 0; bottom: 0; width: 22%; background: rgba(0, 0, 0, 0.3); border-right: 1px solid rgba(255, 255, 255, 0.22); }
.cover-bound { padding-left: 30%; box-shadow: 1.5px 1.5px 0 0 var(--surface), 3px 3px 0 0 var(--border-strong), var(--shadow-1); }
.hero-cover.cover-bound { box-shadow: 2px 2px 0 0 var(--surface), 4px 4px 0 0 var(--border-strong), var(--shadow-2); }
/* 내 사진: 이미지가 표지를 채우고 글자와 장식은 숨긴다 */
.cover-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cover-image .cover-text, .cover-image::before { display: none; }

/* 표지 시트 */
.cover-preview { display: flex; justify-content: center; padding: 6px 0 16px; }
.cover-row { display: flex; align-items: flex-start; gap: 12px; padding: 8px 0; }
.cover-row.disabled { opacity: 0.4; pointer-events: none; }
.cover-row-label { font-size: 13px; color: var(--muted); min-width: 40px; padding-top: 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { padding: 7px 12px; border-radius: 16px; background: var(--surface-2); font-size: 13.5px; color: var(--muted); border: 1.5px solid transparent; transition: background-color 0.15s ease, color 0.15s ease; }
.chip.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.swatches { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 4px; }
.swatch { width: 30px; height: 30px; border-radius: 50%; background: var(--sw); border: 2px solid transparent; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.1); transition: transform 0.15s var(--ease-spring); }
.swatch.auto { background: conic-gradient(from 90deg, hsl(0 42% 45%), hsl(60 42% 45%), hsl(120 42% 45%), hsl(180 42% 45%), hsl(240 42% 45%), hsl(300 42% 45%), hsl(360 42% 45%)); }
.swatch.active { border-color: var(--fg); transform: scale(1.12); }
.swatch:active { transform: scale(0.92); }

/* 지금 읽는 책 카드 */
.hero {
  position: relative; display: flex; gap: 16px;
  margin: 6px 20px 4px; padding: 16px 16px 24px;
  border-radius: 20px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow-1);
  overflow: hidden;
  transition: background-color 0.15s ease;
}
.hero:active { background: var(--surface-2); }
.hero-cover {
  width: 84px; height: 117px; border-radius: 4px 9px 9px 4px;
  padding: 10px 10px 12px 15px; font-size: 26px;
  box-shadow: inset 4px 0 0 rgba(255, 255, 255, 0.22), 2px 2px 0 0 var(--surface), 4px 4px 0 0 var(--border-strong), var(--shadow-2);
}
.hero:active .hero-cover { transform: perspective(800px) rotateY(-10deg); }
.hero-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
/* 라벨과 제목은 오른쪽 위 ⋮ 버튼 자리를 비워 둔다 */
.hero-label { font-size: 11.5px; font-weight: 700; letter-spacing: 0.06em; color: var(--accent); margin-bottom: 4px; padding-right: 32px; }
.hero-title {
  font-family: var(--font-serif); font-size: 19px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.3;
  overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; padding-right: 32px;
}
.hero-chapter { font-size: 13.5px; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hero-chapter:empty { display: none; }
.hero-meta { font-size: 12.5px; color: var(--muted); margin-top: 3px; font-variant-numeric: tabular-nums; }
.hero-actions { display: flex; align-items: center; justify-content: flex-end; margin-top: auto; padding-top: 10px; }
/* ⋮은 목록 항목과 같은 오른쪽 위 자리에 */
.hero-more { position: absolute; top: 6px; right: 6px; width: 40px; height: 40px; color: var(--muted); }
.btn-primary {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px 9px 12px; border-radius: 20px;
  background: var(--accent); color: var(--accent-fg); font-weight: 700; font-size: 14px;
  box-shadow: 0 4px 12px rgba(180, 83, 42, 0.28);
  transition: transform 0.12s var(--ease-out);
}
.btn-primary:active { transform: scale(0.96); }
.btn-primary svg { width: 20px; height: 20px; }
/* 진행률 막대: 카드의 둥근 모서리에 잘리지 않도록 안쪽에 둔다 */
.hero-progress { position: absolute; left: 16px; right: 16px; bottom: 10px; height: 4px; border-radius: 2px; background: var(--surface-3); overflow: hidden; }
.hero-progress span { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.4s var(--ease-out); }
.list-label { font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted); padding: 16px 20px 2px; }
.book-main { flex: 1; min-width: 0; }
.book-more { color: var(--muted); margin-right: -10px; }
.book-title { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.book-meta { color: var(--muted); font-size: 12.5px; margin-top: 3px; font-variant-numeric: tabular-nums; }
.book-progress { height: 3px; background: var(--surface-3); border-radius: 2px; margin-top: 9px; overflow: hidden; }
.book-progress span { display: block; height: 100%; background: var(--accent); border-radius: 2px; transition: width 0.4s var(--ease-out); }
.storage-note { text-align: center; color: var(--muted); font-size: 12px; line-height: 1.5; margin: 0; padding: 14px 28px 0; font-variant-numeric: tabular-nums; }
/* 판권면처럼 맨 아래 한 줄: 누르면 정보 시트 */
/* 글자 폭만큼만 눌리도록 가운데 정렬한 축소 블록. 바깥 여백은 margin으로 둔다. */
.about-link { display: table; width: auto; margin: 2px auto 10px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.5; padding: 8px 12px; border-radius: 10px; font-variant-numeric: tabular-nums; }
.about-link u { text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 3px; }
.about-link:active { color: var(--fg); background: var(--surface-2); }
.empty + .about-link { margin-top: -8px; }
.empty { text-align: center; padding: 64px 28px 24px; color: var(--muted); }
.empty-icon { width: 60px; height: 60px; color: var(--border-strong); margin-bottom: 10px; }
.empty p { margin: 8px 0; }
.empty .lead { color: var(--fg); font-size: 17px; font-weight: 700; }
.hint { font-size: 14px; line-height: 1.6; }
.hint.small { font-size: 12px; }
.demo-buttons { display: flex; flex-direction: column; gap: 8px; margin: 22px auto 10px; max-width: 280px; }
.btn-secondary {
  padding: 11px 14px; border-radius: 12px;
  background: var(--surface-2); color: var(--fg); font-weight: 400;
}
.fab {
  position: fixed; right: 20px; bottom: calc(22px + env(safe-area-inset-bottom, 0px));
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 22px 14px 16px; border-radius: 30px;
  background: var(--accent); color: var(--accent-fg); font-weight: 700;
  box-shadow: 0 8px 20px rgba(180, 83, 42, 0.32), 0 2px 6px rgba(0, 0, 0, 0.14);
  transition: transform 0.12s var(--ease-out), box-shadow 0.2s ease;
}

/* ---------- 뷰어 ---------- */
.reader { overflow: hidden; }
.viewport {
  position: absolute; inset: 0;
  --font-size: 18px; --line-height: 1.7; --margin: 16px;
  font-size: var(--font-size);
  line-height: var(--line-height);
  font-family: var(--font-sans);
  -webkit-touch-callout: none;
  background: var(--bg); /* 화면 전환에서 본문이 한 장의 종이처럼 잡히도록 바탕을 가진다 */
}
/* 화면 전환 없이 열릴 때(첫 실행 자동 이어읽기, 미지원 브라우저)만 살짝 떠오른다 (app.js가 enter를 붙였다 뗀다) */
.viewport.enter { animation: viewport-in 0.32s var(--ease-out); }
@keyframes viewport-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---------- 화면 전환 (View Transitions) ----------
   서재 ↔ 뷰어: 누른 표지가 본문으로 커지고, 돌아올 때는 본문이 표지로 줄어든다 (app.js screenTransition).
   미지원 브라우저는 즉시 바뀐다. */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.26s; animation-timing-function: var(--ease-out); }
::view-transition-group(book) {
  animation-duration: 0.44s; animation-timing-function: var(--ease-out);
  z-index: 2; border-radius: 4px; box-shadow: var(--shadow-2);
  background: var(--bg); /* 표지와 본문이 교차하는 동안 뒤가 비치지 않게 종이색 바탕을 깐다 */
}
::view-transition-old(book), ::view-transition-new(book) {
  width: 100%; height: 100%; object-fit: cover; mix-blend-mode: normal;
  animation: none; opacity: 1;
}
/* 표지 스냅샷은 크게 늘리면 흐려지므로 상자가 작을 때만 보인다:
   들어갈 때는 본문이 곧바로 위에 떠오르고, 돌아올 때는 표지가 마지막에 나타난다. */
@keyframes vt-in { from { opacity: 0; } to { opacity: 1; } }
:root.vt-open::view-transition-old(book) { animation: vt-in 0.1s ease-out reverse both; }
:root.vt-open::view-transition-new(book) { animation: vt-in 0.14s ease-out both; }
:root.vt-close::view-transition-new(book) { animation: vt-in 0.16s 0.26s ease-out both; }
/* 짝이 없을 때(표지가 목록에 없는 책에서 돌아올 때 등)는 그냥 사라지거나 나타난다 */
::view-transition-old(book):only-child { animation: vt-in 0.26s ease-out reverse both; }
::view-transition-new(book):only-child { animation: vt-in 0.26s ease-out both; }
.viewport[data-font="serif"] { font-family: var(--font-serif); }
.viewport[data-justify="1"] p { text-align: justify; }
.viewport.mode-page { touch-action: none; }
.viewport.mode-scroll { touch-action: pan-y; }

.viewport p {
  margin: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  orphans: 1; widows: 1;
  text-align: left;
}
.viewport p.blank { height: calc(var(--line-height) * 1em); break-inside: avoid; }
/* 문단 첫 줄 들여쓰기 (원본의 앞 공백은 색인에서 떼어내고 여기서 일정하게 준다) */
.viewport p:not(.h):not(.t):not(.cont):not(.blank):not(.cut) { text-indent: 1em; }
/* 장 제목: 앞에 여유를 두고, 페이지(컬럼) 맨 아래에 홀로 남지 않게 한다 */
.viewport p.h {
  font-weight: 700; font-size: 1.2em; line-height: 1.4;
  margin: 1.5em 0 0.75em; text-indent: 0; letter-spacing: -0.01em;
  break-after: avoid-column; break-inside: avoid;
}
/* 책 제목: 첫 페이지를 표지처럼 */
.viewport p.t {
  font-weight: 700; font-size: 1.5em; line-height: 1.35;
  text-align: center; padding-top: 4.5em; margin-bottom: 2em; text-indent: 0; letter-spacing: -0.015em;
}
.viewport[data-justify="1"] p.t { text-align: center; }

/* 페이지 모드 */
.frame {
  position: absolute; inset: 0;
  padding:
    calc(var(--margin) + 8px + env(safe-area-inset-top, 0px))
    calc(var(--margin) + env(safe-area-inset-right, 0px))
    calc(var(--margin) + 8px + env(safe-area-inset-bottom, 0px))
    calc(var(--margin) + env(safe-area-inset-left, 0px));
  /* 자르지 않는다. 좌우는 스테이지의 clip-path가, 바깥은 .reader의 overflow가 맡는다. */
}
/* 스테이지는 좌우(다른 화면의 컬럼)만 자른다. 위아래는 열어 두어 트랙의 그늘이 화면 끝까지 닿게 한다. */
.stage { position: relative; width: 100%; height: 100%; clip-path: inset(-200px 0); }
.track { position: absolute; left: 0; top: 0; height: 100%; min-width: 100%; will-change: transform; }
/* 트랙의 의사 요소는 종이와 함께 움직인다. 위치 값(--stride, --page-w, --mid)은 reader.js _measure가 트랙에 준다. */
.track::before, .track::after { content: ""; position: absolute; left: 0; right: 0; pointer-events: none; z-index: 1; }
/* 2쪽 보기 접힘선: 펼침면 가운데의 얇은 선. 본문 높이만큼만 긋는다. */
.track::before { display: none; top: 0; bottom: 0; }
.viewport[data-cols="2"] .track::before {
  display: block;
  background: repeating-linear-gradient(to right,
    transparent 0, transparent calc(var(--mid) - 0.5px),
    var(--border) calc(var(--mid) - 0.5px), var(--border) calc(var(--mid) + 0.5px),
    transparent calc(var(--mid) + 0.5px), transparent var(--stride));
}
/* 넘김 중 화면 경계: 나가는 쪽 가장자리가 어두워지고 들어오는 쪽에 그림자가 드리운다. 트랙은 본문 여백 안쪽이라
   위아래로 200px씩 내밀어 화면 끝까지 잇는다 (스테이지는 좌우만 자르므로 잘리지 않는다).
   농도(--shade)는 reader.js가 넘김 진행도에 맞춰 0→1→0으로 매 프레임 준다. 멈춰 있으면 0. */
.track::after {
  top: -200px; bottom: -200px;
  opacity: var(--shade, 0);
  background: repeating-linear-gradient(to right,
    var(--edge-soft) 0, transparent 28px,
    transparent calc(var(--page-w) - 34px), var(--edge) calc(var(--page-w) + 20px),
    var(--edge-soft) var(--stride));
}
.pages {
  column-fill: auto;
}
/* 청크는 항상 컬럼 맨 위에서 시작한다. 앞뒤 청크를 붙이거나 떼어도 다른 청크의 배치가 바뀌지 않는다. */
.pages > .chunk { break-before: column; }
/* 2쪽 보기에서 좌우 짝을 유지하기 위한 빈 컬럼 */
.pages > .spacer { break-after: column; height: 1px; }

/* ---------- 책장 넘김 (reader.js _turnBegin/_turnDraw) ----------
   뷰포트 전체를 한 장의 종이로 본다. 트랙은 미리 목적지로 옮겨져 있고, 그 위에
   .curl-front  현재 화면 사본. 접힘선까지만 보이도록 clip-path 다각형으로 자른다 (종이색 바탕 포함)
   .curl-flap   접힘선 너머로 들려 뒤집힌 부분. 안쪽(.curl-flap-in)을 다각형으로 자르고 바깥에 drop-shadow로 종이 가장자리 그림자
   .curl-back   뒤집힌 면의 음영 (접힘선 쪽이 어둡고 조금 떨어져 밝다)
   .curl-shade  들린 종이가 아래 종이에 드리우는 그림자
   다각형과 그라데이션은 매 프레임 reader.js가 인라인으로 준다. 상태 바(z-index 4)는 뷰포트 밖 형제라 가려지지 않는다. */
.curl { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; }
.curl.edge { background: var(--bg); } /* 넘길 쪽이 없을 때 드러나는 빈 종이 */
.curl-front, .curl-flap, .curl-flap-in, .curl-flap-page, .curl-back, .curl-shade { position: absolute; inset: 0; }
/* 2쪽 보기에서 뒤집힌 면에 실리는 목적지 쪽. reader.js가 뷰포트 좌표계의 대칭·회전 행렬을 준다 */
.curl-flap-page { transform-origin: 0 0; }
.curl-front, .curl-flap-in, .curl-shade { will-change: clip-path; }
.curl-front { background: var(--bg); }
.curl-flap { filter: drop-shadow(0 0 10px var(--curl-drop)); }
.curl-flap-in { background: var(--bg); }
/* 스테이지 자리에 놓이는 본문 상자. 스테이지처럼 좌우만 자른다 (사본의 마지막 컬럼이 넘칠 수 있다) */
.curl-page { position: absolute; clip-path: inset(-200px 0); }
.curl-page > .pages { position: relative; }
/* 2쪽 보기 접힘선(책등 선). 트랙의 것과 같은 자리 */
.viewport[data-cols="2"] .curl-page::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: calc(50% - 0.5px); width: 1px; background: var(--border);
}
/* 사본에서 문단 중간부터 시작하는 조각(.cut)은 위의 들여쓰기 규칙에서 빠지고, 중간에서 끝나는 조각은 마지막 줄도 양쪽 정렬 (원본과 같은 줄 모양) */
.viewport[data-justify="1"] .curl p.cut-end:not(.t) { text-align-last: justify; }

/* 스크롤 모드 */
.scroller {
  position: absolute; inset: 0;
  overflow-y: auto; overflow-x: hidden;
  overflow-anchor: none;
  -webkit-overflow-scrolling: touch;
}
.scroll-content {
  padding:
    calc(var(--margin) + 8px + env(safe-area-inset-top, 0px))
    calc(var(--margin) + env(safe-area-inset-right, 0px))
    calc(var(--margin) + 40vh)
    calc(var(--margin) + env(safe-area-inset-left, 0px));
}

::highlight(tv-search) { background: var(--mark); color: inherit; }

/* 상하단 바 */
.bar {
  position: absolute; left: 0; right: 0;
  background: var(--bar-bg); color: var(--bar-fg);
  backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  transition: transform 0.26s var(--ease-out), opacity 0.2s ease;
  pointer-events: none; opacity: 0;
  z-index: 5;
}
.reader.bars-visible .bar { pointer-events: auto; opacity: 1; }
.top-bar {
  top: 0; display: flex; align-items: center; gap: 2px;
  padding: calc(4px + env(safe-area-inset-top, 0px)) 6px 4px;
  border-bottom: 1px solid var(--border);
  transform: translateY(-100%);
}
.bottom-bar {
  bottom: 0;
  padding: 10px 14px calc(6px + env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  transform: translateY(100%);
}
.reader.bars-visible .top-bar, .reader.bars-visible .bottom-bar { transform: none; }
.title { flex: 1; min-width: 0; padding: 0 4px; }
.title-main { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.title-sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-top: 1px; }
.title-sub:empty { display: none; }
/* 장이 바뀌면 부제가 살짝 교차되며 바뀐다 (app.js가 fade를 붙였다 뗀다) */
.title-sub.fade { animation: sub-in 0.28s var(--ease-out); }
@keyframes sub-in { from { opacity: 0; transform: translateY(3px); } }
/* 책갈피를 넣을 때 아이콘이 한 번 튄다 */
.icon-btn.pop svg { animation: icon-pop 0.42s var(--ease-spring); }
@keyframes icon-pop { 0% { transform: scale(0.7); } 55% { transform: scale(1.3); } 100% { transform: scale(1); } }
.icon-btn {
  width: 44px; height: 44px; border-radius: 22px; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.icon-btn:active { background: var(--surface-2); }
.progress-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 0 2px; }
.progress-label { font-size: 13px; min-width: 52px; text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }
/* 슬라이더 말풍선: 손잡이 위에 떠서 그 위치의 장 제목과 어림 쪽수를 보인다 (app.js showSliderBubble) */
.slider-bubble {
  position: absolute; bottom: calc(100% + 6px); left: 0;
  transform: translate(-50%, 6px) scale(0.96); transform-origin: 50% 100%;
  max-width: min(260px, 80vw); padding: 8px 12px; border-radius: 12px;
  background: var(--surface); color: var(--fg); border: 1px solid var(--border); box-shadow: var(--shadow-2);
  opacity: 0; pointer-events: none; white-space: nowrap;
  transition: opacity 0.14s ease, transform 0.22s var(--ease-spring);
}
.slider-bubble.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.bubble-chapter { font-size: 13.5px; font-weight: 700; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; }
.bubble-chapter:empty { display: none; }
.bubble-meta { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; margin-top: 1px; }
.bubble-chapter:empty + .bubble-meta { font-size: 13.5px; color: var(--fg); margin-top: 0; }

/* 진행률 슬라이더: 채워진 트랙 + 흰 원 손잡이 */
input[type="range"].slider {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 32px; margin: 0; background: transparent;
  --pct: 0%;
}
input[type="range"].slider::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(var(--accent), var(--accent)) 0 0 / var(--pct) 100% no-repeat, var(--surface-3);
}
input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; margin-top: -8px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}
input[type="range"].slider::-moz-range-track { height: 4px; border-radius: 2px; background: var(--surface-3); }
input[type="range"].slider::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--accent); }
input[type="range"].slider::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--surface); border: 2px solid var(--accent);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}
.actions-row { display: flex; justify-content: space-around; margin-top: 2px; }
.action-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 8px; font-size: 11.5px; border-radius: 12px; min-width: 64px; color: var(--muted); }
.action-btn svg { color: var(--bar-fg); }
.action-btn:active { background: var(--surface-2); }

/* ---------- 오버레이 ---------- */
.overlay {
  position: fixed; inset: 0; z-index: 20;
  background: rgba(0, 0, 0, 0);
  transition: background var(--dur) var(--ease-out);
}
.overlay.open { background: var(--scrim); }
/* 미리보기 오버레이: 본문이 보이도록 어둡게 덮지 않는다 (설정 시트) */
.overlay.preview.open { background: transparent; }
.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--surface); color: var(--fg);
  border-radius: 20px 20px 0 0;
  transform: translateY(100%);
  transition: transform 0.34s var(--ease-out);
  max-height: 85%;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: var(--shadow-sheet);
}
.overlay.open .sheet { transform: none; }
/* 시트 머리(핸들·제목)는 스크롤과 무관하게 고정되고, 아래로 끌면 시트가 닫힌다 (ui.js). 본문만 스크롤한다. */
.sheet-head { flex: none; padding: 8px 20px 0; touch-action: none; }
.sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 20px calc(16px + env(safe-area-inset-bottom, 0px)); }
.sheet-handle { display: block; position: relative; width: 36px; height: 4px; border-radius: 2px; background: var(--border-strong); margin: 4px auto 10px; }
.sheet-handle::after { content: ''; position: absolute; inset: -14px -24px; } /* 손가락이 닿을 넉넉한 영역 */
.sheet-title { font-size: 17px; margin: 6px 0 8px; letter-spacing: -0.01em; }
.sheet.settings { max-height: 64%; }
.sheet.settings .sheet-head { padding-top: 6px; }
/* 섹션 라벨: 작은 회색 글자 앞에 아이콘을 붙이고, 섹션 사이에는 얇은 선과 넉넉한 여백을 둔다. */
.sheet-section {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.06em; color: var(--muted);
  padding: 18px 0 6px; margin-top: 8px; border-top: 1px solid var(--border);
}
.sheet-section svg { width: 16px; height: 16px; }
.sheet-body > .sheet-section:first-child { padding-top: 4px; margin-top: 0; border-top: 0; }
.setting-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; min-height: 48px; }
.setting-label { font-size: 15px; letter-spacing: -0.005em; }
.setting-label small { display: block; font-size: 12px; color: var(--muted); margin-top: 2px; }
/* 프리셋: 세 가지 읽기 감각 */
.preset-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 4px 0 6px; }
.preset {
  padding: 10px 6px 9px; border-radius: 14px; text-align: center;
  background: var(--surface-2); border: 1.5px solid transparent; font-size: 12.5px; color: var(--muted); line-height: 1.3;
}
.preset b { display: block; color: var(--fg); font-weight: 400; margin-bottom: 3px; height: 26px; line-height: 26px; }
.preset[data-preset="comfort"] b { font-size: 18px; }
.preset[data-preset="dense"] b { font-size: 15px; }
.preset[data-preset="large"] b { font-size: 22px; }
.preset.active { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); }
.preset.active b { color: var(--accent); }
/* 세부 조정 접기/펼치기 */
.detail-toggle { width: 100%; text-align: left; }
.detail-toggle .chevron { width: 22px; height: 22px; color: var(--muted); transition: transform 0.2s var(--ease-out); }
.detail-toggle[aria-expanded="true"] .chevron { transform: rotate(180deg); }
.detail-rows { padding-left: 12px; border-left: 2px solid var(--border); margin: 0 0 4px 4px; }
.stepper { display: flex; align-items: center; background: var(--surface-2); border-radius: 12px; padding: 2px; }
.stepper button {
  width: 40px; height: 34px; border-radius: 10px;
  font-size: 20px; line-height: 1; color: var(--fg);
}
.stepper button:active { background: var(--surface-3); }
.stepper span { min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; font-size: 15px; }
.segmented { display: flex; background: var(--surface-2); border-radius: 12px; padding: 3px; gap: 2px; }
.segmented button { padding: 7px 13px; border-radius: 9px; font-size: 14px; color: var(--muted); }
.segmented button.active { background: var(--surface); color: var(--fg); font-weight: 700; box-shadow: var(--shadow-1); }
.segmented button.serif { font-family: var(--font-serif); }
/* 현재 읽기 방식에서 의미 없는 설정은 흐리게 하고 입력을 막는다 */
.setting-row.disabled { opacity: 0.4; pointer-events: none; }
/* on/off 스위치 */
.switch {
  position: relative; width: 48px; height: 28px; border-radius: 14px; flex: none;
  background: var(--border-strong); transition: background 0.2s ease;
}
.switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.28s var(--ease-spring);
}
.switch[aria-checked="true"] { background: var(--accent); }
.switch[aria-checked="true"]::after { transform: translateX(20px); }
.sheet-foot { display: flex; justify-content: flex-end; padding: 6px 0 0; }
.btn-link { color: var(--accent); font-size: 14px; padding: 6px 4px; font-weight: 400; }
.menu-item { display: block; width: 100%; text-align: left; padding: 14px 4px; font-size: 16px; border-top: 1px solid var(--border); }
.menu-item:active { background: var(--surface-2); }
.menu-item.danger { color: var(--danger); }
.menu-item.accent { color: var(--accent); font-weight: 700; }
.text-input {
  display: block; width: 100%; font: inherit; font-size: 16px;
  padding: 11px 14px; margin: 4px 0 8px; border-radius: 12px; border: 0;
  background: var(--surface-2); color: var(--fg); outline: none;
}
.text-input:focus { box-shadow: 0 0 0 2px var(--accent); }
.info-box { padding: 4px 4px 12px; font-size: 14px; line-height: 1.7; }
.info-box .muted { display: inline-block; min-width: 56px; }

.panel {
  position: absolute; inset: 0;
  background: var(--surface); color: var(--fg);
  display: flex; flex-direction: column;
  transform: translateX(100%);
  transition: transform 0.3s var(--ease-out);
}
.overlay.open .panel { transform: none; }
.panel-head {
  display: flex; align-items: center; gap: 4px;
  padding: calc(4px + env(safe-area-inset-top, 0px)) 8px 4px;
  border-bottom: 1px solid var(--border);
  margin: 0;
}
.panel-head h2 { font-size: 17px; padding-left: 4px; flex: 1; letter-spacing: -0.01em; }
.panel-head input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px;
  padding: 10px 14px; border-radius: 12px; border: 0;
  background: var(--surface-2); color: var(--fg); outline: none;
}
.panel-status { padding: 10px 20px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.row-list { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.row { display: flex; align-items: center; border-bottom: 1px solid var(--border); }
.row-main { flex: 1; min-width: 0; text-align: left; padding: 12px 20px; }
.row-main:active, .row-main.active { background: var(--surface-2); }
.row-main.active { color: var(--accent); font-weight: 700; }
.row-title { font-size: 12.5px; margin-bottom: 3px; color: var(--muted); font-variant-numeric: tabular-nums; }
.row-sub { font-size: 14.5px; line-height: 1.5; color: var(--fg); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.row-sub mark { background: var(--mark); color: inherit; border-radius: 2px; }
.row-del { color: var(--muted); margin-right: 8px; }
/* 목차 */
.toc-row { display: flex; align-items: baseline; gap: 12px; }
.toc-row .row-sub { flex: 1; -webkit-line-clamp: 1; font-size: 15px; }
.toc-row .toc-pct { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; flex: none; }
.row-main.active .toc-pct { color: var(--accent); }

/* 상태 표시줄 */
.status-bar {
  position: absolute; left: 50%; bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  font-size: 11px; line-height: 1; color: var(--muted);
  padding: 5px 11px; border-radius: 12px; background: var(--bar-bg);
  font-variant-numeric: tabular-nums; white-space: nowrap;
  pointer-events: none; z-index: 4; transition: opacity 0.15s ease;
  max-width: calc(100% - 32px); overflow: hidden; text-overflow: ellipsis;
}
.status-bar[hidden] { display: none; }
/* 장 표시 칩: 새 장에 들어설 때 위쪽 가운데에 잠깐 떴다 사라진다 (app.js showChapterChip) */
.chapter-chip {
  position: absolute; left: 50%; top: calc(10px + env(safe-area-inset-top, 0px));
  transform: translate(-50%, -6px);
  max-width: calc(100% - 48px); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12.5px; line-height: 1; color: var(--fg);
  padding: 8px 14px; border-radius: 14px; background: var(--bar-bg); border: 1px solid var(--border);
  box-shadow: var(--shadow-1); backdrop-filter: blur(14px) saturate(1.4); -webkit-backdrop-filter: blur(14px) saturate(1.4);
  opacity: 0; pointer-events: none; z-index: 4;
  transition: opacity 0.22s ease, transform 0.32s var(--ease-out);
}
.chapter-chip.show { opacity: 1; transform: translate(-50%, 0); }
.chapter-chip[hidden] { display: none; }
.reader.bars-visible .chapter-chip { opacity: 0; }
.status-bar .sep { opacity: 0.45; margin: 0 5px; }
.reader.bars-visible .status-bar { opacity: 0; }
/* 표시줄이 켜져 있으면 본문 아래에 자리를 비운다 */
.viewport[data-status="1"] .frame { padding-bottom: calc(var(--margin) + 26px + env(safe-area-inset-bottom, 0px)); }

/* 탭 영역 안내 */
.guide {
  position: absolute; inset: 0; z-index: 18;
  display: grid; grid-template-columns: 30% 40% 30%;
  background: rgba(0, 0, 0, 0.78); color: #fff;
  animation: fade-in 0.2s ease;
}
@keyframes fade-in { from { opacity: 0; } }
.guide[hidden] { display: none; }
.guide-zone {
  display: flex; align-items: center; justify-content: center; text-align: center;
  font-size: 15px; font-weight: 700; padding: 8px;
}
.guide-zone + .guide-zone { border-left: 1px dashed rgba(255, 255, 255, 0.35); }
.guide-zone span { white-space: nowrap; background: rgba(255, 255, 255, 0.16); border-radius: 12px; padding: 14px 10px; }
.guide-center span { background: rgba(255, 255, 255, 0.08); }
.guide-foot {
  position: absolute; left: 24px; right: 24px; bottom: calc(40px + env(safe-area-inset-bottom, 0px));
  margin: 0; padding: 10px 12px; border-radius: 12px; background: rgba(0, 0, 0, 0.7);
  text-align: center; font-size: 14px; line-height: 1.7; color: rgba(255, 255, 255, 0.9);
}

/* 검색 결과 탐색 바 */
.search-nav {
  position: absolute; left: 50%; bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  display: flex; align-items: center; gap: 2px;
  background: var(--surface); color: var(--fg);
  border: 1px solid var(--border); border-radius: 26px; padding: 2px 4px;
  box-shadow: var(--shadow-2);
  z-index: 15;
  animation: pop-in 0.3s var(--ease-spring);
}
@keyframes pop-in { from { opacity: 0; transform: translate(-50%, 10px) scale(0.96); } }
.search-nav[hidden] { display: none; }
.search-nav-label { padding: 0 10px; font-size: 14px; font-variant-numeric: tabular-nums; min-width: 64px; text-align: center; }
.search-nav-label .q { color: var(--muted); font-size: 12px; display: block; max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.flip-x svg { transform: scaleX(-1); }
/* 바가 보일 때는 탐색 바를 하단 바 위로 올린다 */
.reader.bars-visible .search-nav { bottom: calc(104px + env(safe-area-inset-bottom, 0px)); }

.toast {
  position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px));
  transform: translate(-50%, 12px) scale(0.97);
  background: rgba(32, 30, 27, 0.94); color: #fff;
  padding: 11px 18px; border-radius: 22px; font-size: 14px;
  opacity: 0; transition: opacity 0.18s ease, transform 0.3s var(--ease-spring);
  z-index: 50; pointer-events: none; max-width: 80vw; text-align: center;
  box-shadow: var(--shadow-2);
}
:root[data-theme="dark"] .toast { background: rgba(240, 238, 232, 0.96); color: #1a1a1c; }
.toast.show { opacity: 1; transform: translate(-50%, 0) scale(1); }
.toast.has-action { pointer-events: auto; display: flex; align-items: center; gap: 14px; padding-right: 8px; white-space: nowrap; max-width: 92vw; }
.toast-action { color: #f3b48f; font-weight: 700; padding: 4px 8px; border-radius: 12px; white-space: nowrap; }
:root[data-theme="dark"] .toast-action { color: #a6431b; }
.toast-action:active { background: rgba(255, 255, 255, 0.12); }

@media (min-width: 700px) {
  .sheet, .panel { max-width: 560px; margin: 0 auto; }
  .panel { left: 0; right: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}