/* AI 성경동화 화면 스타일 — 수채화 그림책에 맞춘 따뜻한 종이 톤, 폰 폭 우선 */
:root {
  --paper: #f6efe2;
  --paper-2: #fffaf1;
  --ink: #3b2f25;
  --ink-2: #6d5d4f;
  --line: #e4d6c0;
  --accent: #c0703f;
  --accent-ink: #fff;
  --sky: #5b8db8;
  --leaf: #6f9a5b;
  --tip: #fff3d6;
  --shadow: 0 10px 30px rgba(80, 55, 30, 0.12);
  --radius: 18px;
  --story: 'Gowun Batang', 'Literata', serif;
  --story-en: 'Literata', 'Gowun Batang', serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --paper: #1f1a15; --paper-2: #2a231c; --ink: #f2e8da; --ink-2: #c9b9a6; --line: #43382c;
    --accent: #e08a55; --tip: #3a3022; --shadow: 0 10px 30px rgba(0, 0, 0, 0.35); color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--paper); color: var(--ink); font-family: Pretendard, system-ui, sans-serif; font-size: 16px; line-height: 1.6; -webkit-text-size-adjust: 100%; }
button, select { font: inherit; color: inherit; }
a { color: var(--sky); }
.loading { text-align: center; padding: 30vh 16px; color: var(--ink-2); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 16px 48px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* 머리 */
.top { display: flex; align-items: center; gap: 10px; padding: 14px 0; flex-wrap: wrap; }
.top .home { text-decoration: none; color: var(--ink-2); font-size: 14px; }
.top h1 { margin: 0; font-size: 20px; font-family: var(--story); }
.top .spacer { flex: 1; }
.hero { padding: 28px 0 8px; }
.hero h1 { font-family: var(--story); font-size: clamp(28px, 6vw, 44px); line-height: 1.25; margin: 0 0 8px; }
.hero p { margin: 0; color: var(--ink-2); max-width: 640px; }

/* 나이 고르기 */
.ages { margin: 22px 0 6px; }
.ages h2 { font-size: 17px; margin: 0 0 10px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line); background: var(--paper-2); cursor: pointer; display: inline-flex; flex-direction: column; align-items: center; line-height: 1.2; }
.chip b { font-size: 15px; }
.chip small { font-size: 11px; color: var(--ink-2); }
.chip[aria-pressed='true'] { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); }
.chip[aria-pressed='true'] small { color: var(--accent-ink); opacity: 0.9; }
.band-goal { margin: 12px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-2); font-size: 14px; }
.band-goal strong { color: var(--ink); }

/* 서재 */
.shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: 18px; margin-top: 22px; }
.book { background: var(--paper-2); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; color: inherit; border: 1px solid var(--line); transition: transform 0.2s; }
.book:hover { transform: translateY(-3px); }
.book .cover { aspect-ratio: 1; background: linear-gradient(135deg, #f3d9b4, #c9dfe9); display: grid; place-items: center; font-family: var(--story); font-size: 22px; color: var(--ink-2); text-align: center; padding: 12px; }
.book .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.book .meta { padding: 12px 14px 16px; }
.book h3 { margin: 0; font-family: var(--story); font-size: 19px; }
.book .en { margin: 2px 0 6px; color: var(--ink-2); font-family: var(--story-en); font-size: 14px; }
.book .ref { font-size: 12px; color: var(--ink-2); }
.book.soon { opacity: 0.6; pointer-events: none; }
.book .cover { position: relative; }
.book .cover .ph-title { padding: 0 14px; text-align: center; }
.book .cover .no { position: absolute; top: 8px; left: 8px; min-width: 28px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.85); color: var(--ink-2); font: 600 12px/1.6 var(--ui, system-ui); text-align: center; }
.finder { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 22px; }
.tabs { display: flex; gap: 8px; }
.tab { border: 1.5px solid var(--line, #d9ccb8); background: var(--paper-2); color: var(--ink); border-radius: 999px; padding: 8px 16px; font: inherit; font-weight: 600; cursor: pointer; min-height: 44px; }
.tab small { color: var(--ink-2); font-weight: 500; }
.tab[aria-pressed="true"] { background: var(--ink); color: var(--paper-2); border-color: var(--ink); }
.tab[aria-pressed="true"] small { color: inherit; opacity: .8; }
.q { flex: 1 1 220px; min-height: 44px; padding: 8px 14px; border-radius: 999px; border: 1.5px solid var(--line, #d9ccb8); background: var(--paper-2); font: inherit; color: var(--ink); }

.badge { display: inline-block; font-size: 11px; padding: 2px 8px; border-radius: 999px; background: var(--line); color: var(--ink-2); margin-left: 6px; vertical-align: middle; }

.foot { margin-top: 40px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-2); }

/* 책 읽기 */
.reader { max-width: 760px; margin: 0 auto; padding: 0 16px 40px; }
.bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 0; position: sticky; top: 0; background: var(--paper); z-index: 5; }
.bar .title { flex: 1 1 100%; font-family: var(--story); font-size: 18px; font-weight: 700; order: -1; }
.btn { min-height: 44px; min-width: 44px; padding: 8px 14px; border-radius: 12px; border: 1.5px solid var(--line); background: var(--paper-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; text-decoration: none; color: inherit; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--accent-ink); font-weight: 700; }
.btn[aria-pressed='true'] { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 12px; overflow: hidden; }
.seg button { min-height: 44px; padding: 8px 12px; border: 0; background: var(--paper-2); cursor: pointer; }
.seg button[aria-pressed='true'] { background: var(--ink); color: var(--paper); }
select.btn { appearance: auto; }
.notice { background: var(--tip); border-radius: 12px; padding: 10px 14px; font-size: 14px; margin: 4px 0 12px; }

.stage { perspective: 1600px; }
.page { background: var(--paper-2); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; border: 1px solid var(--line); transform-origin: left center; transition: transform 0.28s ease, opacity 0.28s ease; }
.page.turn-out { transform: rotateY(-70deg); opacity: 0.2; }
.page.turn-back { transform-origin: right center; transform: rotateY(70deg); opacity: 0.2; }
@media (prefers-reduced-motion: reduce) { .page { transition: none; } .page.turn-out, .page.turn-back { transform: none; } }
.art { aspect-ratio: 1; background: linear-gradient(135deg, #f3d9b4, #c9dfe9); display: grid; place-items: center; }
.art img { width: 100%; height: 100%; object-fit: cover; display: block; }
.art .ph { font-family: var(--story); color: var(--ink-2); font-size: 20px; padding: 20px; text-align: center; }
.text { padding: 18px 20px 22px; }
.ko { font-family: var(--story); font-size: 19px; line-height: 1.8; margin: 0; white-space: pre-line; }
.en { font-family: var(--story-en); font-size: 17px; line-height: 1.7; margin: 10px 0 0; color: var(--ink-2); white-space: pre-line; }
.only-en .en { color: var(--ink); margin-top: 0; font-size: 19px; }
.big .ko { font-size: 26px; text-align: center; }
.big .en { font-size: 21px; text-align: center; }
.tip { margin: 14px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--tip); font-size: 14px; }
.tip b { margin-right: 4px; }
.ref-line { margin-top: 10px; font-size: 12px; color: var(--ink-2); }
.nav { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 14px; }
.nav .count { color: var(--ink-2); font-size: 14px; }
.nav .btn { min-width: 108px; }

/* 마무리 쪽 */
.end h2 { font-family: var(--story); font-size: 22px; margin: 0 0 12px; }
.end section { margin: 0 0 18px; }
.end h3 { font-size: 15px; margin: 0 0 8px; color: var(--accent); }
.verse { border-left: 4px solid var(--accent); padding: 8px 12px; background: var(--paper); border-radius: 0 10px 10px 0; }
.verse p { margin: 0 0 6px; font-family: var(--story); }
.verse .vsrc { font-size: 12px; color: var(--ink-2); }
.q { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.q li { padding: 10px 12px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); }
.q .qt { display: inline-block; font-size: 12px; padding: 1px 8px; border-radius: 999px; background: var(--leaf); color: #fff; margin-bottom: 4px; }
.box { padding: 12px 14px; border-radius: 12px; background: var(--paper); border: 1px solid var(--line); white-space: pre-line; }
details { border: 1px solid var(--line); border-radius: 12px; padding: 8px 12px; background: var(--paper); }
details summary { cursor: pointer; min-height: 32px; font-weight: 700; }
.src h4 { margin: 12px 0 4px; font-size: 14px; }
.src p { margin: 0 0 4px; font-size: 14px; }
.src sup { color: var(--ink-2); margin-right: 3px; }
.other { display: flex; flex-wrap: wrap; gap: 8px; }

/* 만든 방법 */
.about table { width: 100%; border-collapse: collapse; font-size: 14px; }
.about th, .about td { border-bottom: 1px solid var(--line); padding: 8px 6px; text-align: left; vertical-align: top; }
.about .tbl { overflow-x: auto; }
.about h2 { font-family: var(--story); margin: 28px 0 10px; }

/* 인쇄: 쪽마다 한 장 */
.print-only { display: none; }
@media print {
  body { background: #fff; }
  .bar, .nav, .notice, .no-print { display: none !important; }
  .print-only { display: block; }
  .print-page { break-after: page; padding: 0; }
  .print-page .art { max-width: 15cm; margin: 0 auto; }
  .page { box-shadow: none; border: 0; }
}

/* 나이 묶음·챈트·노래 */
.group-h { font-size: 13px; color: var(--ink-2); margin: 14px 0 6px; font-weight: 600; }
.end small { font-weight: 400; color: var(--ink-2); font-size: 12px; }
.hint { font-size: 13px; color: var(--ink-2); margin: 0 0 8px; }
.row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chant-lines, .song-lines { margin: 0; padding-left: 22px; display: grid; gap: 6px; }
.chant-lines li, .song-lines li { padding: 6px 8px; border-radius: 10px; transition: background 0.15s; }
.chant-lines li.now, .song-lines li.now { background: var(--tip); }
.chant-lines .call { font-weight: 700; }
.chant-lines .call::after { content: ' ⟶ '; color: var(--ink-2); font-weight: 400; }
.chant-lines i, .song-lines .sub { font-style: normal; color: var(--ink-2); }
.song-lines .sub { display: block; font-size: 14px; font-family: var(--story-en); }
.song-lines span[lang='ko'] { font-family: var(--story); font-size: 17px; }
.beats { display: inline-flex; gap: 4px; margin-left: 8px; vertical-align: middle; }
.beats b { width: 8px; height: 8px; border-radius: 50%; background: var(--line); }
.beats b.on { background: var(--accent); }
.credit { font-size: 11px; color: var(--ink-2); margin: 8px 0 0; }

/* 내 읽기 기록(이어 읽기·별) */
.mine { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin: 18px 0 0; padding: 12px 14px; border-radius: 14px; background: var(--paper-2); border: 1px solid var(--line); }
.mine .resume { max-width: 100%; text-align: left; }
.mine .tally { font-weight: 700; }
.mine small { flex-basis: 100%; color: var(--ink-2); font-size: 12px; }
.link { border: 0; background: none; color: var(--ink-2); text-decoration: underline; cursor: pointer; min-height: 44px; padding: 0 6px; font-size: 13px; }
.book .cover .read { position: absolute; top: 8px; right: 8px; padding: 2px 8px; border-radius: 999px; background: var(--leaf); color: #fff; font: 600 12px/1.6 var(--ui, system-ui); }

/* 눌러서 읽어 주는 그림, 아주 느리게 움직이는 그림 */
.art { overflow: hidden; }
.art[data-say] { cursor: pointer; }
.art[data-say]:focus-visible { outline: 3px solid var(--accent); outline-offset: -3px; }
@media (prefers-reduced-motion: no-preference) {
  .page .art img { animation: bb-drift 24s ease-in-out infinite alternate; transform-origin: 50% 42%; }
}
@keyframes bb-drift { from { transform: scale(1); } to { transform: scale(1.07) translate(-1%, -1%); } }

/* 이야기 확인 놀이 */
.quiz-q p { margin: 0 0 4px; font-family: var(--story); font-size: 18px; }
.quiz-q p.sub, .quiz p.sub { font-family: var(--story-en); font-size: 15px; color: var(--ink-2); }
.quiz-opts { display: grid; gap: 8px; margin-top: 10px; }
.quiz-opt { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: var(--paper); cursor: pointer; text-align: left; }
.quiz-opt img { width: 56px; height: 56px; border-radius: 10px; object-fit: cover; flex: none; }
.quiz-t { display: grid; }
.quiz-t .sub { font-family: var(--story-en); font-size: 13px; color: var(--ink-2); }
.quiz-opt.ok { background: var(--leaf); border-color: var(--leaf); color: #fff; }
.quiz-opt.ok .sub { color: #fff; }
.quiz-opt.no { opacity: 0.5; text-decoration: line-through; }
.quiz-opt:disabled { cursor: default; }
.quiz-fb { min-height: 1.6em; margin: 8px 0 0; font-weight: 700; color: var(--accent); }
.quiz-stars { font-size: 28px; margin: 4px 0 8px; letter-spacing: 4px; }
@media print { .quiz { display: none; } .art img { animation: none !important; transform: none !important; } }