/* kids232 — hidden 은 언제나 숨깁니다 (class 의 display 에 밀리지 않게) */
[hidden]{display:none!important}

/* 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}
/* ★ kids435 — #bkTime 도 b 라서 이 min-width 를 물려받았습니다.
     그 칸은 book.php 에서 min-width:0 으로 덮습니다. */
.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}

  /* ★★ kids435 — 「이야기 들려주기」 띠가 좁은 화면에서 넘쳤습니다.
     (테스터 2026-09-20 · 「읽어주기 사이즈 안맞음」)

     한 줄에 ▶(38) + 이름(120) + 막대(120) + 시간(120) + 사이 간격까지
     최소 457px 이 필요했습니다. 360px 폰에서는 셋이 제멋대로 줄바꿈되고,
     120px 로 눌린 이름 칸이 「2쪽을 읽어드려요 · 끝까지 이어서 읽어요」를
     담느라 글자가 잘렸습니다. 게다가 body 에 word-break:keep-all 이 걸려
     있어 한 덩어리가 쪼개지지도 않았습니다.

     좁은 화면에서는 ▶ 와 이름을 한 줄, 막대와 시간을 아랫줄로 내립니다. */
  .bk-audio{gap:8px 10px;padding:10px 11px}
  .bk-audio b{min-width:0;font-size:13px}
  .bk-audio span{overflow-wrap:anywhere;word-break:keep-all}
  .bk-track{flex:1 1 100%;min-width:0;order:9}
  #bkTime{order:10;margin-left:auto}
}

/* ══ kids220 — 대사와 만화 한 칸 ══════════════════════
   ① .bk-say  동화책: 글 아래에 「이름 대사」 한 줄씩
   ② .bk-toon 만화:   그림이 칸을 가득 채우고 말풍선이 그 위에 얹힘

   그림 속에는 글자가 없습니다. AI 가 한글을 못 써서 일부러 빼고
   그린 뒤 여기서 진짜 글자로 올립니다 — 그래야 읽을 수 있고,
   나중에 대사만 고쳐도 그림을 다시 안 그립니다. */
.bk-say{margin-top:14px;display:flex;flex-direction:column;gap:7px}
.bk-say p{margin:0;font-size:calc(var(--bk-fs,17px) - 2px);line-height:1.7;color:var(--bk-ink)}
.bk-say p b{display:inline-block;min-width:62px;margin-right:8px;font-weight:800;
  font-size:12px;color:var(--bk-sub)}

.bk-toon figure{position:relative;aspect-ratio:4/3}
.bk-toon .bk-cap{padding:12px 20px 4px;font-size:calc(var(--bk-fs,17px) - 3px);
  line-height:1.7;color:var(--bk-sub);text-align:center}
.bk-toon .bk-no{margin:8px 0 16px}

.bk-bub{position:absolute;inset:0;padding:14px;display:flex;flex-direction:column;
  gap:10px;pointer-events:none}
.bk-bub span{position:relative;max-width:74%;align-self:flex-start;
  background:#fff;color:#1B1B1F;border:2px solid #14141A;border-radius:16px;
  padding:9px 13px 10px;font-size:14.5px;line-height:1.5;font-weight:600;
  box-shadow:2px 3px 0 rgba(20,20,26,.85)}
.bk-bub span.r{align-self:flex-end}
.bk-bub span i{display:block;font-style:normal;font-size:11px;font-weight:800;
  color:#8A8A96;margin-bottom:2px}
.bk-bub span::after{content:"";position:absolute;bottom:-10px;left:20px;
  width:0;height:0;border:8px solid transparent;border-top-color:#14141A}
.bk-bub span.r::after{left:auto;right:20px}

@media(max-width:720px){
  .bk-bub{padding:9px;gap:7px}
  .bk-bub span{max-width:86%;font-size:13px;padding:7px 10px 8px}
  .bk-toon figure{aspect-ratio:1/1}
}

/* ── 휴대폰에서 동화 칸이 화면 밖으로 밀리던 것 (kids468) ──────
 *
 *   「동화도 깨지잖아. 승현이는 오늘 민박집에서, 그 화면이 깨지는데」
 *                                            (사장님 화면 2026-09-20)
 *
 * 글이 안 접힌 게 아니었습니다 — **칸 자체가 화면보다 넓어졌습니다.**
 * 그래서 그림도 글도 오른쪽이 똑같이 잘려 나갔습니다.
 *
 * 격자 칸을 `1fr` 로만 잡으면 브라우저는 「안에 든 것만큼은 넓혀 준다」로
 * 읽습니다(min-width 의 기본값이 auto 입니다). 그림 한 장이 크면 그만큼
 * 칸이 밀려 나갑니다. 화면 폭에 맞추려면 minmax(0,1fr) 이라고 **0까지
 * 줄여도 된다**고 적어 줘야 합니다.
 *
 * 넓은 화면(1320px 짜임)에는 이미 minmax(0,1fr) 이 들어 있었는데,
 * 휴대폰으로 바뀌는 자리에서 그냥 1fr 로 덮어써 버렸습니다.
 * 두 군데(본문 3단 · 펼친 두 쪽)를 같이 잠급니다. */
@media (max-width:1080px){
  .bk-main{grid-template-columns:minmax(0,1fr)}
  .bk-main > *{min-width:0}
}
@media (max-width:720px){
  .bk-spread{grid-template-columns:minmax(0,1fr)}
  .bk-spread > *{min-width:0}
}
/* 어느 폭에서든 한 장이 칸을 밀어내지 못하게 */
.bk-stage,.bk-spread,.bk-page,.bk-page figure{max-width:100%;min-width:0}
.bk-page figure img{max-width:100%}

/* kids733 — 덧쪽(겉표지·속표지·이야기 놀이·손편지): 그림 한 장이 쪽 전체. 가로 A5(1240×874) 판이라 잘리지 않게 담습니다 */
.bk-page.bk-x{justify-content:center;background:#fffaf0}
.bk-page.bk-x figure{aspect-ratio:1240/874;background:#fffaf0}
.bk-page.bk-x figure img{object-fit:contain}
.bk-toc button.bk-xt::before{display:none}   /* kids733 — 덧쪽(겉표지·손편지)에는 쪽 번호 동그라미를 안 붙임 */

/* ★ kids750 (테스터 10-15 1-2 · 실물 동화책 사진처럼) — 글이 그림 안 아래 왼쪽/오른쪽(인물 반대편)에 가장자리가 번지는 흰 판으로.
   읽기 설정 「글 자리 › 그림 아래」 또는 관리자 설정 book_view_overlay=0 이면 예전처럼 그림 아래 */
.bk-page.bk-ov{justify-content:center}
.bk-page.bk-ov figure{position:relative;aspect-ratio:3/2;container-type:inline-size}
.bk-page.bk-ov .bk-txt.bk-in{position:absolute;bottom:4%;width:46%;max-height:72%;overflow-y:auto;scrollbar-width:none;
  padding:3.2cqw 3.6cqw;flex:none;justify-content:flex-start;color:#30281f;
  background:rgba(255,255,255,.88);border-radius:28px;
  box-shadow:0 0 16px 10px rgba(255,255,255,.85)}
.bk-page.bk-ov .bk-txt.bk-in::-webkit-scrollbar{display:none}
.bk-page.bk-ov .bk-txt.bk-in.R{right:4%}
.bk-page.bk-ov .bk-txt.bk-in.L{left:4%}
.bk-page.bk-ov .bk-txt.bk-in p{font-size:clamp(11px,2.25cqw,var(--bk-fs,17px));line-height:1.75;color:#30281f}
.bk-page.bk-ov .bk-txt.bk-in .bk-say{margin-top:.5em;gap:.25em}
.bk-page.bk-ov .bk-txt.bk-in .bk-say .bk-l{font-size:clamp(11px,2.25cqw,var(--bk-fs,17px));line-height:1.7}   /* 대사도 글과 같은 크기(예전 규칙이 더 크게 잡아 판 밖으로 잘렸음) */
.bk-page.bk-ov .bk-txt.bk-in .bk-say .bk-l b{display:inline;min-width:0;margin-right:.4em;color:#c8661a}
.bk-page.bk-ov .bk-no{margin:10px 0 4px}
html[data-theme="dark"] .bk-page.bk-ov .bk-txt.bk-in,html[data-theme="dark"] .bk-page.bk-ov .bk-txt.bk-in p{color:#30281f}
/* 크게 보기 — 글 판을 그림 위 귀퉁이에(자리는 book.js placeCap 이 그림 자리를 재서 놓습니다) */
.bk-zoom.ovcap .bk-zoom-cap{background:rgba(255,255,255,.9);color:#30281f;border-radius:30px;padding:18px 22px;line-height:1.75;
  box-shadow:0 0 18px 10px rgba(255,255,255,.88);overflow-y:auto;scrollbar-width:none;right:auto;top:auto}
.bk-zoom.ovcap .bk-zoom-cap p{max-width:none;margin:0 0 4px}
.bk-zoom.ovcap .bk-zoom-cap p.s{color:#30281f}
.bk-zoom.ovcap .bk-zoom-cap p.s b{color:#c8661a}
.bk-zoom.ovcap.zin .bk-zoom-cap{opacity:0;pointer-events:none}

/* kids752 — 좁은 쪽(휴대폰에서 「그림 안」을 고른 경우)은 판을 넓히고 여백을 줄여 글·대사가 덜 잘리게 · 다음 화살표와 안 겹치게 조금 위로 */
@container (max-width:520px){
  .bk-page.bk-ov .bk-txt.bk-in{width:64%;padding:2.4cqw 3cqw;bottom:3%;max-height:80%}
  .bk-page.bk-ov .bk-txt.bk-in p,.bk-page.bk-ov .bk-txt.bk-in .bk-say .bk-l{font-size:11px;line-height:1.6}
}