/* eBook 뷰어 — 그림은 위, 글은 HTML 레이어.
   글을 그림에 굽지 않으므로 글자 크기 조절·다크 전환·검색이 전부 된다.
   다크는 색 토큰만 바꾼다. 그림은 한 벌만 쓴다. */
:root{
  --bk-bg:#FDF9F2; --bk-paper:#fff; --bk-ink:#26201A; --bk-sub:#6E5B4C;
  --bk-line:#EFE7DC; --bk-chip:#F6F1E9; --bk-accent:#F2620D; --bk-title:#7A1F2E;
  --bk-nav:rgba(255,255,255,.94); --bk-navink:#6E5B4C;
  --bk-shadow:0 10px 30px rgba(120,86,44,.16);
  --bk-r:18px;
}
html[data-theme="dark"]{
  --bk-bg:radial-gradient(1100px 600px at 30% -10%,#16337A 0%,#0B1B4A 55%,#071031 100%);
  --bk-paper:rgba(12,28,74,.72); --bk-ink:#EAF1FF; --bk-sub:#B7C7EC;
  --bk-line:rgba(120,170,255,.26); --bk-chip:rgba(255,255,255,.08);
  --bk-accent:#8FE3FF; --bk-title:#fff;
  --bk-nav:rgba(12,28,74,.9); --bk-navink:#EAF1FF;
  --bk-shadow:0 10px 30px rgba(0,0,0,.45);
}
*{box-sizing:border-box}
body.book-body{margin:0;min-height:100vh;background:var(--bk-bg);color:var(--bk-ink);
  font-family:'Noto Sans KR',sans-serif;transition:background .45s,color .45s;word-break:keep-all}
a{color:var(--bk-accent);text-decoration:none}

/* 상단 */
.bk-hd{position:sticky;top:0;z-index:50;background:var(--bk-nav);border-bottom:1px solid var(--bk-line);
  backdrop-filter:blur(8px)}
.bk-hd-in{max-width:1320px;margin:0 auto;padding:8px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.bk-hd img{height:38px;width:auto;display:block}
.bk-hd b{flex:1;min-width:120px;font-size:15px;color:var(--bk-title)}
.bk-btn{cursor:pointer;white-space:nowrap;border:1.5px solid var(--bk-line);background:var(--bk-chip);
  color:var(--bk-ink);border-radius:999px;padding:7px 13px;font:12.5px/1 'Noto Sans KR';font-weight:700}
.bk-btn:hover{border-color:var(--bk-accent)}
.bk-btn.on{background:var(--bk-accent);color:#fff;border-color:transparent}

/* 본문 3단 */
.bk-main{max-width:1320px;margin:0 auto;padding:14px 16px 40px;
  display:grid;grid-template-columns:230px minmax(0,1fr) 230px;gap:16px;align-items:start}
.bk-card{background:var(--bk-paper);border:1px solid var(--bk-line);border-radius:var(--bk-r);padding:14px}
.bk-card h3{margin:0 0 10px;font-size:14px;color:var(--bk-title)}

/* 목차 */
.bk-toc{display:flex;flex-direction:column;gap:6px;max-height:60vh;overflow:auto}
.bk-toc button{cursor:pointer;display:flex;align-items:center;gap:9px;text-align:left;
  border:1.5px solid transparent;background:transparent;color:inherit;border-radius:11px;padding:6px 7px;
  font-family:inherit;transition:transform .2s}
.bk-toc button:hover{transform:translateX(3px)}
.bk-toc button.on{border-color:var(--bk-accent);background:var(--bk-chip)}
.bk-toc img{width:42px;height:30px;object-fit:cover;border-radius:7px;flex:none}
.bk-toc button{position:relative}
.bk-toc button::before{content:attr(data-n);position:absolute;left:5px;top:5px;z-index:2;
  background:rgba(0,0,0,.55);color:#fff;border-radius:5px;padding:0 4px;font-size:9.5px;font-weight:700}
.bk-toc s{flex:1;min-width:0;text-decoration:none}
.bk-toc s b{display:block;font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bk-toc s i{display:block;font-style:normal;font-size:11px;color:var(--bk-sub)}

/* 펼침면 */
.bk-stage{position:relative}
.bk-spread{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--bk-paper);
  border:1px solid var(--bk-line);border-radius:var(--bk-r);overflow:hidden;box-shadow:var(--bk-shadow)}
.bk-page{display:flex;flex-direction:column;min-height:420px}
.bk-page + .bk-page{border-left:1px solid var(--bk-line)}
.bk-page figure{margin:0;aspect-ratio:3/2;overflow:hidden;background:var(--bk-chip)}
.bk-page figure img{width:100%;height:100%;object-fit:cover;display:block}
.bk-page .bk-txt{flex:1;padding:20px 24px 26px;display:flex;flex-direction:column;justify-content:center}
.bk-page .bk-txt p{margin:0;font-size:var(--bk-fs,17px);line-height:1.95;color:var(--bk-ink)}
.bk-page .bk-no{margin-top:14px;font-size:11.5px;color:var(--bk-sub);text-align:center}
.bk-empty{display:grid;place-items:center;color:var(--bk-sub);font-size:13px}

.bk-arrow{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border:none;
  border-radius:50%;background:#fff;color:#3E2E22;font-size:20px;font-weight:700;cursor:pointer;
  box-shadow:0 6px 20px rgba(20,16,10,.35);display:grid;place-items:center}
html[data-theme="dark"] .bk-arrow{background:#1B2A55;color:#EAF1FF}
.bk-arrow:hover{background:var(--bk-accent);color:#fff}
.bk-arrow.l{left:-14px} .bk-arrow.r{right:-14px}
.bk-arrow:disabled{opacity:.3;cursor:default}

/* 나레이션 */
.bk-audio{margin-top:12px;display:flex;align-items:center;gap:11px;flex-wrap:wrap;
  background:var(--bk-paper);border:1px solid var(--bk-line);border-radius:16px;padding:11px 13px}
.bk-audio b{flex:1;min-width:120px;font-size:13.5px}
.bk-audio span{font-size:11.5px;color:var(--bk-sub);display:block;font-weight:400}
.bk-play{width:38px;height:38px;border:none;border-radius:50%;color:#fff;font-size:14px;cursor:pointer;
  background:linear-gradient(135deg,#FB8C2A,#F2620D)}
html[data-theme="dark"] .bk-play{background:linear-gradient(135deg,#3F6FD8,#7C5BF5)}
.bk-track{flex:2;min-width:120px;height:8px;border-radius:999px;background:var(--bk-chip);overflow:hidden;cursor:pointer}
.bk-track i{display:block;height:100%;width:0;background:linear-gradient(90deg,#FB8C2A,#F2620D)}
html[data-theme="dark"] .bk-track i{background:linear-gradient(90deg,#38D0FF,#8B7CFF)}

/* 페이지 미리보기 */
.bk-thumbs{display:grid;grid-template-columns:repeat(auto-fit,minmax(58px,1fr));gap:7px}
.bk-thumbs button{cursor:pointer;padding:0;border:2px solid transparent;border-radius:8px;overflow:hidden;
  background:transparent;transition:transform .2s;aspect-ratio:3/2}
.bk-thumbs button:hover{transform:translateY(-3px)}
.bk-thumbs button.on{border-color:var(--bk-accent)}
.bk-thumbs img{width:100%;height:100%;object-fit:cover;display:block}

/* 읽기 설정 */
.bk-set{display:flex;flex-direction:column;gap:9px}
.bk-set div{display:flex;align-items:center;gap:9px;font-size:12.5px}
.bk-set div>span:first-child{flex:1;color:var(--bk-sub)}
.bk-seg{display:flex;gap:3px;background:var(--bk-chip);border-radius:999px;padding:2px}
.bk-seg button{cursor:pointer;border:none;background:transparent;color:var(--bk-sub);
  border-radius:999px;padding:4px 9px;font:11.5px/1 'Noto Sans KR';font-weight:700}
.bk-seg button.on{background:var(--bk-paper);color:var(--bk-accent);box-shadow:0 1px 4px rgba(0,0,0,.12)}

.bk-cta{display:flex;flex-direction:column;gap:8px}
.bk-cta a,.bk-cta button{display:block;text-align:center;cursor:pointer;border-radius:12px;padding:12px;
  font:14px/1 'Noto Sans KR';font-weight:700;border:1.5px solid var(--bk-line);
  background:var(--bk-chip);color:var(--bk-ink)}
.bk-cta a.p{border:none;color:#fff;background:linear-gradient(135deg,#FB8C2A,#F2620D);font-family:'Jua',sans-serif;font-size:15px}
.bk-cta a.off{opacity:.45;pointer-events:none}
html[data-theme="dark"] .bk-cta a.p{background:linear-gradient(135deg,#3F6FD8,#7C5BF5)}

.bk-hand{font-family:'Gaegu',cursive;font-size:17px;line-height:1.5;letter-spacing:-.5px;
  color:var(--bk-ink);margin:0;font-weight:700}

/* 영상 제작 중 알림 */
.bk-pill{position:fixed;right:16px;bottom:16px;z-index:60;background:var(--bk-nav);
  border:1px solid var(--bk-line);border-radius:999px;padding:9px 15px;font-size:12.5px;
  box-shadow:var(--bk-shadow);color:var(--bk-ink)}

@media (max-width:1080px){
  .bk-main{grid-template-columns:1fr}
  /* 모바일에서는 책이 먼저, 목차·설정은 아래로 */
  .bk-stage{order:-1}
  .bk-toc{max-height:none;flex-direction:row;overflow-x:auto;padding-bottom:4px}
  .bk-toc button{flex:0 0 152px}
  .bk-arrow.l{left:6px} .bk-arrow.r{right:6px}
}
@media (max-width:720px){
  /* 한 장씩 넘긴다 */
  .bk-spread{grid-template-columns:1fr}
  .bk-page + .bk-page{display:none}
  .bk-page{min-height:0}
  .bk-page .bk-txt{padding:16px 18px 22px}
}
.bk-share{max-width:960px;margin:14px auto 0;background:var(--bk-paper);border:1px solid var(--bk-accent);
  border-radius:14px;padding:14px 16px}
.bk-share b{display:block;font-size:14px;margin-bottom:8px}
.bk-share input{width:100%;border:1px solid var(--bk-line);border-radius:9px;padding:9px 11px;
  font:12px ui-monospace,Menlo,monospace;background:var(--bk-bg);color:var(--bk-ink)}
.bk-share span{display:block;margin-top:7px;font-size:11.5px;color:var(--bk-sub)}

/* ── 모바일에서 글자가 잘리던 것 ─────────────────────── */
.bk-txt,.bk-txt *{word-break:keep-all;overflow-wrap:anywhere;white-space:normal;
  max-width:100%;hyphens:auto}
.bk-page{overflow:hidden}
.bk-page img{max-width:100%;height:auto;display:block}
.bk-hd-in{flex-wrap:wrap;gap:7px;max-width:100%}
.bk-btn{white-space:nowrap;flex:0 0 auto}
html,body{max-width:100%;overflow-x:hidden}

@media (max-width:560px){
  .bk-hd-in{padding:10px 12px}
  .bk-btn{font-size:12.5px;padding:7px 11px}
  .bk-page .bk-txt{padding:14px 15px 20px;font-size:15px;line-height:1.9}
  .bk-stage{padding:0 6px}
  .bk-arrow{width:34px;height:34px;font-size:14px}
  .bk-toc button{flex:0 0 122px}
}