/* 서재 읽기 화면 — 폰 우선. 색은 토큰으로만 정의한다. */
:root {
  --bg: #fbfaf7; --ink: #23262b; --muted: #6b7079; --line: #e3e0d8; --accent: #1f5f99;
  --accent-ink: #fff; --key: #0d3b8a; --panel: #ffffff; --hl: #fff3c4; --memo: #e98a15;
  --shadow: 0 6px 24px rgba(0,0,0,.14); --fs: 17px; --lh: 1.8;
  --font: "NanumSquare Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --serif: "Noto Serif KR", "Nanum Myeongjo", "Batang", serif;
}
:root[data-theme="dark"] {
  --bg: #16181c; --ink: #e4e6ea; --muted: #9aa1ab; --line: #2c3037; --accent: #6fa8e8;
  --accent-ink: #0d1117; --key: #9cc3f5; --panel: #1f2228; --hl: #4a4020; --memo: #f0a040;
  --shadow: 0 6px 24px rgba(0,0,0,.5);
}
:root[data-theme="sepia"] {
  --bg: #f4ecd8; --ink: #3b3024; --muted: #7a6a55; --line: #e0d3b6; --accent: #8a5a2b;
  --accent-ink: #fff; --key: #6b3d12; --panel: #fbf5e6; --hl: #f3dd9b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="sepia"]) {
    --bg: #16181c; --ink: #e4e6ea; --muted: #9aa1ab; --line: #2c3037; --accent: #6fa8e8;
    --accent-ink: #0d1117; --key: #9cc3f5; --panel: #1f2228; --hl: #4a4020; --memo: #f0a040;
    --shadow: 0 6px 24px rgba(0,0,0,.5);
  }
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--bg); color: var(--ink); }
body { font-family: var(--font); -webkit-text-size-adjust: 100%; }
a { color: var(--accent); }
button { font: inherit; color: inherit; }

/* 머리 막대 */
.bar { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 4px;
  height: 52px; padding: 0 8px; background: var(--panel); border-bottom: 1px solid var(--line);
  transition: transform .2s; }
.bar.hide { transform: translateY(-100%); }
.bar .title { flex: 1; min-width: 0; font-weight: 700; font-size: 15px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; }
.icon { width: 44px; height: 44px; border: 0; background: none; border-radius: 10px; font-size: 20px;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer; text-decoration: none; }
.icon:active { background: var(--line); }
.progress { position: fixed; left: 0; bottom: 0; height: 3px; background: var(--accent); z-index: 30; width: 0; }

/* 본문 */
main#content { max-width: 720px; margin: 0 auto; padding: 16px 16px 40vh; font-size: var(--fs);
  line-height: var(--lh); word-break: keep-all; overflow-wrap: break-word; }
#content p { margin: 0 0 .9em; }
#content p.indent { margin-left: 1.2em; }
#content p.bullet, #content p.sub { position: relative; padding-left: 1.2em; }
#content p.bullet::before { content: "•"; position: absolute; left: .2em; color: var(--accent); font-weight: 700; }
#content p.sub { margin-left: 1.2em; }
#content p.sub::before { content: "◦"; position: absolute; left: .2em; color: var(--accent); }
#content h1, #content h2, #content h3 { line-height: 1.4; color: var(--accent); scroll-margin-top: 64px; }
#content h1 { font-size: 1.5em; margin: 2.2em 0 .8em; padding-bottom: .4em; border-bottom: 2px solid var(--accent); }
#content h2 { font-size: 1.2em; margin: 1.8em 0 .6em; padding-left: .5em; border-left: 4px solid var(--accent); }
#content h3 { font-size: 1.05em; margin: 1.4em 0 .4em; color: var(--ink); }
#content .chapno { margin-top: 2.5em; font-size: 2.6em; font-weight: 300; color: var(--accent); line-height: 1; }
#content .chapno + h1 { margin-top: .3em; }
#content .part { margin: 3em 0 .2em; font-size: .95em; font-weight: 700; letter-spacing: .1em; color: var(--muted); }
#content strong.key { color: var(--key); }
#content b.lead { color: var(--accent); }
#content ol.num { padding-left: 1.6em; margin: 0 0 1em; }
#content figure { margin: 1.2em 0; text-align: center; }
#content figure img, #content img.page { max-width: 100%; height: auto; border-radius: 6px; background: #fff; cursor: zoom-in; }
#content .cells { display: grid; grid-template-columns: minmax(6em, 32%) 1fr; gap: 0 .8em;
  border-top: 1px solid var(--line); padding: .5em 0; margin: 0; }
#content .cells > div { margin: 0; }
#content .cells > div:first-child { font-weight: 700; }
#content .toc { margin: 0; line-height: 1.6; }
#content .toc a, #content .toc span.row { display: flex; gap: .5em; align-items: baseline; padding: .35em 0;
  text-decoration: none; color: inherit; border-bottom: 1px dotted var(--line); }
#content .toc .dots { flex: 1; }
#content .toc .pno { color: var(--muted); font-size: .85em; }
#content .toc.l0 { font-weight: 700; color: var(--accent); margin-top: .8em; }
#content .toc.l1 { padding-left: .8em; }
#content .toc.l2 { padding-left: 1.8em; font-size: .92em; }
#content p.ix { margin: 0 0 .2em; font-size: .9em; line-height: 1.55; padding-left: 1em; text-indent: -1em; }
#content .pg { display: block; height: 0; scroll-margin-top: 64px; }
#content .pgmark { display: flex; align-items: center; gap: .5em; margin: 1.2em 0 .6em; color: var(--muted);
  font-size: 12px; }
#content .pgmark::after { content: ""; flex: 1; border-top: 1px dashed var(--line); }
#content .pgmark button { border: 1px solid var(--line); background: var(--panel); border-radius: 999px;
  padding: 2px 10px; font-size: 12px; cursor: pointer; }
#content .pm { display: none; }
#content [data-k].sel { background: var(--hl); border-radius: 4px; }
#content [data-k].has-highlight { background: rgba(255, 230, 100, 0.4); border-radius: 4px; border-left: 4px solid #f59e0b; padding-left: 0.4em; }
:root[data-theme="dark"] #content [data-k].has-highlight { background: rgba(245, 158, 11, 0.22); border-left-color: #f59e0b; }
#content [data-k].has-memo { border-right: 3px solid var(--memo); padding-right: .4em; }
#content .memo-dot { display: inline-block; margin-left: .3em; font-size: .8em; cursor: pointer; }
#content [data-k].flash { animation: flash 1.6s ease-out; }
@keyframes flash { from { background: var(--hl); } to { background: transparent; } }

/* 문단 도구 (메모, 형광펜, 책갈피, 복사, 읽어주기) */
.tool { position: fixed; z-index: 40; display: none; gap: 2px; padding: 5px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); flex-wrap: wrap; max-width: 95vw; }
.tool.on { display: flex; }
.tool button { border: 0; background: none; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; cursor: pointer;
  white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; color: var(--ink); }
.tool button:hover, .tool button:active { background: var(--line); }

/* 서랍 */
.drawer { position: fixed; inset: 0; z-index: 50; display: none; }
.drawer.on { display: block; }
.drawer .shade { position: absolute; inset: 0; background: rgba(0,0,0,.35); }
.drawer .sheet { position: absolute; left: 0; right: 0; bottom: 0; max-height: 82vh; display: flex;
  flex-direction: column; background: var(--panel); border-radius: 16px 16px 0 0; box-shadow: var(--shadow); }
.tabs { display: flex; border-bottom: 1px solid var(--line); }
.tabs button { flex: 1; border: 0; background: none; padding: 14px 4px; font-size: 14px; cursor: pointer;
  border-bottom: 2px solid transparent; }
.tabs button.on { border-bottom-color: var(--accent); color: var(--accent); font-weight: 700; }
.pane { overflow-y: auto; padding: 8px 16px 24px; -webkit-overflow-scrolling: touch; }
.pane[hidden] { display: none; }
.item { display: block; width: 100%; text-align: left; border: 0; background: none; padding: 12px 4px;
  border-bottom: 1px solid var(--line); cursor: pointer; font-size: 15px; line-height: 1.5; }
.item small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.item .row { display: flex; gap: 8px; align-items: flex-start; }
.item .row span { flex: 1; }
.item .del { border: 0; background: none; color: var(--muted); font-size: 18px; padding: 0 6px; cursor: pointer; }
.lv0 { font-weight: 700; } .lv1 { padding-left: 12px; } .lv2 { padding-left: 24px; font-size: 14px; }
.empty { color: var(--muted); padding: 24px 4px; text-align: center; font-size: 14px; }
.search { display: flex; gap: 8px; padding: 8px 0; position: sticky; top: 0; background: var(--panel); }
.search input { flex: 1; font: inherit; font-size: 16px; padding: 10px 12px; border: 1px solid var(--line);
  border-radius: 10px; background: var(--bg); color: var(--ink); }
mark { background: var(--hl); color: inherit; }

/* 설정 */
.set { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 14px 0;
  border-bottom: 1px solid var(--line); font-size: 15px; }
.seg { display: flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; }
.seg button { border: 0; background: none; padding: 8px 12px; cursor: pointer; font-size: 14px; }
.seg button.on { background: var(--accent); color: var(--accent-ink); }
.credit { color: var(--muted); font-size: 12px; text-align: center; padding: 20px 0 8px; }

/* 메모 창 · 그림 확대 */
.modal { position: fixed; inset: 0; z-index: 60; display: none; align-items: flex-end; justify-content: center;
  background: rgba(0,0,0,.4); }
.modal.on { display: flex; }
.modal .box { width: 100%; max-width: 720px; background: var(--panel); border-radius: 16px 16px 0 0; padding: 16px; }
.modal blockquote { margin: 0 0 10px; padding: 8px 10px; border-left: 3px solid var(--memo); color: var(--muted);
  font-size: 13px; max-height: 5.5em; overflow: hidden; }
.modal textarea { width: 100%; min-height: 140px; font: inherit; font-size: 16px; padding: 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--bg); color: var(--ink); resize: vertical; }
.modal .acts { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.btn { border: 1px solid var(--line); background: var(--bg); border-radius: 10px; padding: 10px 16px; cursor: pointer; font-size: 15px; }
.btn.pri { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); }
.btn.warn { color: #c0392b; }
.zoom { position: fixed; inset: 0; z-index: 70; display: none; background: rgba(0,0,0,.92); overflow: auto; }
.zoom.on { display: block; }
.zoom img { display: block; width: 100%; max-width: none; height: auto; background: #fff; }
.zoom .close { position: fixed; top: 10px; right: 10px; color: #fff; font-size: 26px; }
.toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 80; background: var(--ink);
  color: var(--bg); padding: 10px 16px; border-radius: 999px; font-size: 14px; opacity: 0; transition: opacity .2s;
  pointer-events: none; }
.toast.on { opacity: .92; }

/* 하윤이 부모 가이드 (원본 guide.html 의 모양을 폰 화면에 맞춰 옮김) */
.guide { --g1: #1f5f53; --g2: #2f7d6d; --gline: #9bc9bd; --gth: #e2f1ed;
  --key-bg: #eef6f3; --warn-bg: #fff8ec; --stop-bg: #fff0f4; --dad-bg: #f3f1fb; --say-bg: #f4f4f1; }
:root[data-theme="dark"] .guide { --g1: #8fd3c2; --g2: #6cc1ad; --gline: #3d6b61; --gth: #22332f;
  --key-bg: #1d2a27; --warn-bg: #2d2518; --stop-bg: #2d1c22; --dad-bg: #24212f; --say-bg: #22252b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="sepia"]) .guide {
  --g1: #8fd3c2; --g2: #6cc1ad; --gline: #3d6b61; --gth: #22332f;
  --key-bg: #1d2a27; --warn-bg: #2d2518; --stop-bg: #2d1c22; --dad-bg: #24212f; --say-bg: #22252b; } }
#content.guide h1, #content.guide h2, #content.guide h3 { color: var(--g1); }
#content.guide h1.ch { margin-top: 2.4em; border-bottom: 3px solid var(--g2); }
#content.guide h1.ch small { display: block; font-size: .5em; color: var(--g2); letter-spacing: .2em; }
#content.guide h2 { border-left-color: var(--g2); }
#content.guide h3 { color: var(--g2); }
#content.guide .lead { color: var(--muted); }
#content.guide ul, #content.guide ol { padding-left: 1.3em; margin: .4em 0 .9em; }
#content.guide li { margin: .25em 0; }
#content.guide .cover { text-align: center; padding: 2em 0 1em; }
#content.guide .cover .t1 { color: var(--g2); letter-spacing: .2em; font-weight: 700; }
#content.guide .cover h1 { border: 0; font-size: 1.8em; font-weight: 900; margin: .4em 0; }
#content.guide .cover .t2 { color: var(--muted); }
#content.guide .cover svg { width: 110px; height: auto; margin: 1em auto; display: block; }
#content.guide .cover .meta { color: var(--muted); font-size: .85em; margin-top: 1em; }
#content.guide .toc { line-height: 1.7; }
#content.guide .toc .part { font-weight: 900; color: var(--g2); margin: 1em 0 .2em; }
#content.guide .toc .row { border-bottom: 1px dotted var(--line); }
#content.guide .toc .row a, #content.guide .toc .row:not(:has(a)) { display: flex; justify-content: space-between;
  gap: .6em; padding: .45em 0; text-decoration: none; color: inherit; }
#content.guide .toc .row.todo { color: var(--muted); }
#content.guide .tw { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: .6em 0 1em; }
#content.guide table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: .86em; line-height: 1.55; }
#content.guide th, #content.guide td { border: 1px solid var(--gline); padding: .45em .55em; text-align: left; vertical-align: top; }
#content.guide th { background: var(--gth); color: var(--g1); }
#content.guide .box { border-radius: 12px; padding: .8em 1em; margin: .9em 0; }
#content.guide .box > b:first-child { display: block; margin-bottom: .2em; }
#content.guide .key { background: var(--key-bg); border: 2px solid var(--g2); }
#content.guide .key > b:first-child { color: var(--g1); }
#content.guide .warn { background: var(--warn-bg); border: 2px dashed #f0a53a; }
#content.guide .warn > b:first-child { color: #b86a12; }
#content.guide .stop { background: var(--stop-bg); border: 2px solid #e0567a; }
#content.guide .stop > b:first-child { color: #c23a60; }
#content.guide .dad { background: var(--dad-bg); border: 2px solid #7a6cc4; }
#content.guide .dad > b:first-child { color: #7a6cc4; }
#content.guide .say { background: var(--say-bg); border-left: 4px solid var(--g2); padding: .6em .9em; margin: .6em 0;
  border-radius: 0 8px 8px 0; }
#content.guide .say .who { font-weight: 700; color: var(--g2); }
#content.guide .say .no { color: #c23a60; }
#content.guide .agree { counter-reset: a; list-style: none; padding: 0; }
#content.guide .agree li { counter-increment: a; border: 2px solid var(--gline); border-radius: 12px;
  padding: .7em .9em .7em 3em; margin: .7em 0; position: relative; }
#content.guide .agree li::before { content: counter(a); position: absolute; left: .7em; top: .75em; width: 1.6em;
  height: 1.6em; border-radius: 50%; background: var(--g2); color: #fff; font-weight: 900; text-align: center; line-height: 1.6em; }
#content.guide .sign { display: flex; gap: 1.5em; margin-top: 1em; }
#content.guide .sign span { flex: 1; border-bottom: 1px solid var(--ink); padding-bottom: .2em; }
#content.guide .zones { display: flex; flex-direction: column; gap: .5em; margin: .8em 0; }
#content.guide .zones div { border-radius: 12px; padding: .7em .9em; font-size: .92em; }
#content.guide .zones b { display: block; }
#content.guide .z1 { background: var(--key-bg); border: 2px solid #7aaee0; } #content.guide .z1 b { color: #3a78b8; }
#content.guide .z2 { background: var(--key-bg); border: 3px solid var(--g2); } #content.guide .z2 b { color: var(--g1); }
#content.guide .z3 { background: var(--stop-bg); border: 2px solid #e0567a; } #content.guide .z3 b { color: #c23a60; }
#content.guide .levels td:first-child { width: 17%; font-weight: 900; text-align: center; }
#content.guide .lv1 { color: #3a78b8; } #content.guide .lv2 { color: var(--g2); } #content.guide .lv3 { color: #b86a12; }
#content.guide .lv4 { color: #c9771a; } #content.guide .lv5 { color: #c23a60; }
#content.guide .flow { display: flex; flex-direction: column; align-items: stretch; gap: .2em; margin: .8em 0; font-size: .92em; }
#content.guide .flow div { border: 2px solid var(--gline); border-radius: 10px; padding: .5em .7em; text-align: center; }
#content.guide .flow div b { display: block; color: var(--g2); }
#content.guide .flow i { align-self: center; color: var(--g2); font-style: normal; font-weight: 900; transform: rotate(90deg); }
#content.guide .small { font-size: .85em; color: var(--muted); }
#content.guide .partpage { text-align: center; padding: 3em 0 2em; margin-top: 2em; border-top: 1px solid var(--line); }
#content.guide .partpage .pnum { color: var(--g2); letter-spacing: .3em; font-weight: 700; }
#content.guide .partpage .ptitle { font-size: 1.7em; font-weight: 900; color: var(--g1); margin: .3em 0 .6em; }
#content.guide .partpage p { color: var(--muted); }
#content.guide svg { max-width: 100%; height: auto; }

/* 소리 내어 읽기 */
#content [data-k].speaking { background: var(--hl); border-radius: 4px; box-shadow: -6px 0 0 var(--hl), 6px 0 0 var(--hl); }
.tts-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 45; display: none; justify-content: center;
  align-items: center; gap: 6px; padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
  background: var(--panel); border-top: 1px solid var(--line); box-shadow: var(--shadow); }
.tts-bar.on { display: flex; }
.tts-bar button { min-width: 48px; height: 48px; border: 0; border-radius: 12px; background: none; font-size: 20px;
  cursor: pointer; }
.tts-bar button:active { background: var(--line); }
.tts-bar button.big { background: var(--accent); color: var(--accent-ink); min-width: 60px; }
#tts-rate { font-size: 15px; font-weight: 700; }
body.tts-on .progress { bottom: calc(64px + env(safe-area-inset-bottom)); }
.sel { font: inherit; font-size: 14px; max-width: 60%; padding: 8px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--bg); color: var(--ink); }

/* 서재 목록 */
.shelf { max-width: 720px; margin: 0 auto; padding: 16px; }
.shelf h1 { font-size: 22px; margin: 8px 0 16px; }
.book { display: flex; gap: 14px; align-items: center; padding: 14px; margin-bottom: 12px; background: var(--panel);
  border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: inherit; }
.book .cover { width: 64px; height: 86px; flex: none; border-radius: 6px; background: var(--line) center/cover no-repeat; }
.book .meta { flex: 1; min-width: 0; }
.book .meta b { display: block; font-size: 16px; line-height: 1.4; }
.book .meta small { color: var(--muted); font-size: 13px; }
.book .bar2 { height: 4px; border-radius: 2px; background: var(--line); margin-top: 8px; overflow: hidden; }
.book .bar2 i { display: block; height: 100%; background: var(--accent); width: 0; }

/* 하윤이의 용기 사다리 (아이용 그림책) — 한 장 = 종이 카드 하나. 원본 ladder-book.html 의 모양을 테마에 맞춰 옮김 */
.picbook { --pb-paper: #fffdf7; --pb-sky: #3f8fc2; --pb-sun: #f5b82e; --pb-leaf: #4f9a5c; --pb-worry: #9b8fc4;
  --pb-say: #eef6fb; --pb-worry-bg: #f1eef9; --pb-true-bg: #eaf5ec; --pb-step: #f4f8fb; --pb-line: #d8e3ea; }
:root[data-theme="sepia"] .picbook { --pb-paper: #fbf5e6; --pb-say: #f3ead5; --pb-step: #f3ead5; --pb-line: #e0d3b6; }
:root[data-theme="dark"] .picbook { --pb-paper: #20242a; --pb-sky: #7ab8e3; --pb-say: #1d2a33; --pb-worry-bg: #262236;
  --pb-true-bg: #1d2b21; --pb-step: #1d242b; --pb-line: #343b44; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="sepia"]) .picbook {
  --pb-paper: #20242a; --pb-sky: #7ab8e3; --pb-say: #1d2a33; --pb-worry-bg: #262236;
  --pb-true-bg: #1d2b21; --pb-step: #1d242b; --pb-line: #343b44; } }
#content.picbook { word-break: keep-all; overflow-wrap: anywhere; }
#content.picbook > .page { background: var(--pb-paper); border: 1px solid var(--pb-line); border-radius: 18px;
  padding: 22px clamp(16px, 5vw, 36px); margin: 0 0 18px; min-width: 0; }
#content.picbook .center { text-align: center; }
#content.picbook h1, #content.picbook h2 { color: var(--pb-sky); border: 0; line-height: 1.25; margin: 0 0 .5em; }
#content.picbook h1 { font-size: 2.1em; }
#content.picbook h2 { font-size: 1.5em; padding: 0; }
#content.picbook .num { color: var(--pb-sun); letter-spacing: .08em; margin: 0; }
#content.picbook .big { font-size: 1.15em; }
#content.picbook .hand { font-size: 1.25em; line-height: 1.45; color: var(--pb-sky); }
#content.picbook .note { color: var(--muted); font-size: .88em; }
#content.picbook svg { max-width: 100%; height: auto; display: block; }
#content.picbook .center svg { margin: .6em auto; }
#content.picbook .row { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
#content.picbook .row > * { min-width: 0; }
#content.picbook .say { background: var(--pb-say); border-radius: 14px; padding: 10px 14px; margin: .6em 0; }
#content.picbook .say.worry { background: var(--pb-worry-bg); }
#content.picbook .vs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: .5em 0; }
#content.picbook .vs div { border-radius: 14px; padding: 9px 11px; }
#content.picbook .vs .w { background: var(--pb-worry-bg); } #content.picbook .vs .t { background: var(--pb-true-bg); }
#content.picbook .vs b { display: block; }
@media (max-width: 460px) { #content.picbook .vs { grid-template-columns: 1fr; } }
/* 떨림 온도계 — 서재에서는 누르는 기능 없이 0~10 칸만 보인다 */
#content.picbook .thermo { display: grid; grid-template-columns: repeat(11, 1fr); gap: 3px; margin: .7em 0 .2em; }
#content.picbook .thermo .t { border-radius: 8px; padding: 7px 0; text-align: center; font-weight: 700; color: #fff; }
#content.picbook .t0 { background: #4f9a5c; } #content.picbook .t1 { background: #5ea35a; } #content.picbook .t2 { background: #77ad52; }
#content.picbook .t3 { background: #94b449; } #content.picbook .t4 { background: #b6b83f; } #content.picbook .t5 { background: #d4b336; }
#content.picbook .t6 { background: #e8a331; } #content.picbook .t7 { background: #ec8a31; } #content.picbook .t8 { background: #e86f33; }
#content.picbook .t9 { background: #e05337; } #content.picbook .t10 { background: #cf3b3b; }
#content.picbook .scale { display: flex; justify-content: space-between; font-size: .8em; color: var(--muted); gap: 6px; }
/* 용기 사다리 — 아래에서 위로 */
#content.picbook .steps { display: flex; flex-direction: column-reverse; gap: 7px; margin: .7em 0; }
#content.picbook .step { display: flex; gap: 10px; align-items: center; background: var(--pb-step); border-radius: 12px; padding: 9px 12px; }
#content.picbook .step .n { flex: 0 0 32px; height: 32px; border-radius: 50%; background: var(--pb-sun); color: #fff;
  font-weight: 700; display: grid; place-items: center; }
#content.picbook .step.top .n { background: var(--pb-leaf); }
#content.picbook .step .txt { flex: 1; min-width: 0; }
#content.picbook label { display: block; margin-top: .8em; font-weight: 700; }
/* 원본의 입력칸 → 빈 줄 (예시 글은 흐리게) */
#content.picbook .blank { display: block; border-bottom: 2px dashed var(--pb-line); padding: 4px 2px; min-height: 1.6em;
  color: var(--muted); opacity: .7; font-size: .9em; }
#content.picbook .check { list-style: none; padding: 0; margin: .5em 0; }
#content.picbook .check li { padding: 7px 0 7px 40px; position: relative; border-bottom: 1px dashed var(--pb-line); }
#content.picbook .check li::before { content: ""; position: absolute; left: 2px; top: 9px; width: 26px; height: 26px;
  border-radius: 8px; background: var(--pb-leaf); }
#content.picbook .check li::after { content: ""; position: absolute; left: 10px; top: 13px; width: 9px; height: 15px;
  border: solid #fff; border-width: 0 4px 4px 0; transform: rotate(45deg); }
#content.picbook .check.empty li::before { background: transparent; border: 3px solid var(--pb-line); }
#content.picbook .check.empty li::after { display: none; }
#content.picbook .stickers { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-top: .7em; }
#content.picbook .stickers span { aspect-ratio: 1; border: 3px dashed var(--pb-line); border-radius: 50%; display: grid;
  place-items: center; font-weight: 700; color: var(--muted); }
#content.picbook .sign { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 1em; }
#content.picbook .sign div { border-bottom: 2px solid var(--ink); padding-top: 24px; }
@media (max-width: 460px) { #content.picbook .sign { grid-template-columns: 1fr; } }