/* "책 형태로 읽는 콘텐츠" 공용 플립북 리더 스타일 — reading-picturebook.css에서 이름을
   바꿔 옮겼다(2026-09-12, "공용 UI/UX 파일 하나를 만들고 거기서 리딩북들이 선택적으로
   보이게 해달라" 요청 반영). js/book-reader.js와 짝이다 — 새 리딩북을 추가할 때 이
   CSS·JS를 그대로 불러쓰고 content index.json만 새로 두면 된다(엔진 복제 없음).

   디자인 이력 — 1차: 문장 쪼개기로 화면당 글자 수를 줄임. 2차: 애플 스타일 유리질감
   크롬. 3차: "상용 플립북 이상 경쟁력" 요청으로 그림이 카드 전체를 채우는 전면
   (full-bleed) 구도로 전환, 글씨는 하단 스크림 위 흰 글씨(Epic!·Homer 같은 상용 아동
   리더 구도), 자동읽기 중 지금 읽는 단어를 밝히는 노래방 자막(.pb-word.on) 추가.
   4차: 표지·마지막 장도 전면 구도로 통일. 5차(이번): "첫 화면 색감이 구리다, 애플
   최신 OS 스타일로" 요청으로 팔레트를 숲색+금색(동화책 느낌)에서 중립 그래파이트+
   파랑(애플 다크모드 systemBlue 계열)으로 다시 짰다 — 호스트 캐릭터 Rabi의 망토
   색과도 자연스럽게 맞는다. StPageFlip이 #book 내부의 실제 3D 페이지 넘김·그림자·
   드래그를 맡고, 이 파일은 무대 배경·오버레이 크롬·페이지 내부 스타일만 담당한다. */

:root{
  --pb-ink:#1c1c1e; --pb-green:#2c2c2e; --pb-mint:#eef2f7; --pb-paper:#fdfaf3;
  --pb-accent:#0a84ff; --pb-muted:#98989d;
  --pb-spring:cubic-bezier(.34,1.56,.64,1);
  --pb-ease:cubic-bezier(.4,0,.2,1);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:var(--pb-ink);
  font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Pretendard","Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}

.pb-stage{position:fixed;inset:0;display:flex;flex-direction:column;align-items:center;
  padding:max(12px,env(safe-area-inset-top)) 16px max(12px,env(safe-area-inset-bottom));
  background:
    radial-gradient(ellipse 80% 55% at 50% 6%, rgba(10,132,255,.14), transparent 60%),
    radial-gradient(ellipse 120% 90% at 50% 100%, rgba(0,0,0,.55), transparent 55%),
    linear-gradient(180deg,#1c1c1e 0%,#232326 55%,#000 100%);
}

/* ── 유리질감(glassmorphism) 크롬 — 애플 스타일의 핵심. backdrop-filter로 뒤 배경이
   살짝 비쳐 보이는 반투명 바를 쓴다. 지원 안 하는 아주 오래된 브라우저에서도
   rgba 배경이 폴백으로 남아 있어 안 깨진다. ── */
.pb-topbar{width:100%;max-width:720px;display:flex;align-items:center;justify-content:space-between;
  gap:10px;flex-wrap:wrap;padding:8px 14px;border-radius:20px;
  background:rgba(255,255,255,.08);backdrop-filter:blur(20px) saturate(180%);
  -webkit-backdrop-filter:blur(20px) saturate(180%);border:1px solid rgba(255,255,255,.12)}
.pb-exit{color:#eaf4f0;opacity:.85;font-size:13px;font-weight:700;text-decoration:none;
  padding:7px 12px;border-radius:999px;background:rgba(255,255,255,.10);
  transition:transform .15s var(--pb-spring),background .2s var(--pb-ease)}
.pb-exit:hover{opacity:1;background:rgba(255,255,255,.18)}
.pb-exit:active{transform:scale(.94)}
.pb-brand{color:var(--pb-accent);font-size:13px;font-weight:900;letter-spacing:.04em;
  white-space:nowrap}

.pb-levels{display:flex;gap:4px;padding:3px;border-radius:999px;background:rgba(0,0,0,.18)}
.pb-lv{border:none;border-radius:999px;padding:6px 14px;font-size:12px;font-weight:800;
  background:transparent;color:rgba(234,244,240,.75);cursor:pointer;
  transition:background .2s var(--pb-ease),color .2s var(--pb-ease),transform .15s var(--pb-spring)}
.pb-lv:active{transform:scale(.95)}
.pb-lv.on{background:var(--pb-accent);color:#fff}

/* ── 인스타그램 스토리 같은 세그먼트 진행 바 — 지금 이야기 안 책장 위치를 보여 준다.
   전체 페이지 번호("3/26") 대신 "지금 이야기의 몇 번째 장"을 보여 줘서 아이가
   "이 이야기 얼마나 남았지"를 직관적으로 안다. ── */
.pb-storybar{width:100%;max-width:640px;padding:2px 4px 0}
.pb-dots{display:flex;gap:5px;margin-bottom:6px}
.pb-dot{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.22);
  transition:background .3s var(--pb-ease)}
.pb-dot.on{background:var(--pb-accent)}
.pb-storylabel{color:var(--pb-muted);font-size:11px;font-weight:800;text-align:center}

.pb-book-wrap{position:relative;flex:1;width:100%;max-width:640px;min-height:0;
  display:flex;align-items:center;justify-content:center;margin:6px 0}
.pb-book{width:100%;height:100%}

/* StPageFlip이 만드는 개별 페이지 — 위치·transform은 라이브러리가 인라인으로 준다.
   표지·마지막 장·실제 이야기 책장 전부 그림이 카드 전체를 채우는 전면(full-bleed)
   구도로 통일했다(2026-09-12 네 번째 패스 — "첫 화면이 옛날 스타일 그대로다" 피드백
   반영, 표지만 이전 카드형 레이아웃에 남아 있던 게 원인이었다). */
.page{background:var(--pb-paper);overflow:hidden;border-radius:28px;position:relative}

.pb-page-title{font-size:12px;font-weight:900;letter-spacing:.08em;color:#8a9c95;
  text-transform:uppercase;margin:0}

/* 전면 그림 — 카드 전체를 채운다(절반 이상이 아니라 카드 자체가 그림이다). 실제
   삽화든 이모지 자리표시자든 같은 자리를 차지해 삽화가 나중에 채워져도 안 흔들린다.
   표지·마지막 장은 첫 지문의 실제 삽화가 있으면 그대로 쓰고(pb-cover-bg), 없으면
   브랜드 그러데이션(pb-cover-bg-fallback)으로 대신한다. */
.pb-bleed-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pb-illustration-placeholder{display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,var(--pb-mint) 0%,#fff 100%)}
.pb-illustration-placeholder span{font-size:min(34vw,150px);line-height:1}
.pb-cover-bg{filter:brightness(.6) saturate(1.05)}
.pb-cover-bg-fallback{background:
  radial-gradient(circle at 28% 22%, rgba(10,132,255,.32), transparent 55%),
  radial-gradient(circle at 76% 78%, rgba(70,90,120,.5), transparent 60%),
  linear-gradient(160deg,#232326,#000)}

/* 표지·마지막 장 전용 오버레이 — 호스트 캐릭터(Rabi) + 큰 제목 + 파란 CTA 버튼. 화살표
   드래그를 짐작하게 하는 대신, 눌러야 할 곳을 명확히 준다("책 읽기 시작 →"). */
.pb-cover-content{position:absolute;inset:0;z-index:2;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;gap:14px;padding:32px 26px}
.pb-cover-emblem{font-size:64px;line-height:1;filter:drop-shadow(0 6px 18px rgba(0,0,0,.4))}
.pb-cover-title{color:#fff;font-size:clamp(26px,7vw,42px);font-weight:900;margin:0;
  letter-spacing:-.02em;text-shadow:0 2px 16px rgba(0,0,0,.4);max-width:100%}
.pb-cover-sub{color:rgba(255,255,255,.85);font-size:clamp(14px,3.4vw,17px);font-weight:700;margin:0}
.pb-cta{margin-top:6px;border:none;border-radius:999px;background:var(--pb-accent);color:#fff;
  font-weight:900;font-size:clamp(15px,3.6vw,18px);padding:14px 30px;cursor:pointer;
  box-shadow:0 10px 26px rgba(10,132,255,.4);transition:transform .15s var(--pb-spring)}
.pb-cta:active{transform:scale(.94)}

/* 호스트 캐릭터 Rabi — 표지·마지막 장에서는 제목 위에 서서 책을 펼쳐 보이는
   크기로, 이야기 책장에서는 캡션 옆에 작게 붙어 읽어 주는 도우미로 나온다. */
.pb-host{display:block;filter:drop-shadow(0 8px 18px rgba(0,0,0,.4))}
.pb-host-cover{width:clamp(96px,26vw,140px);height:auto}
.pb-host-leaf{width:clamp(52px,15vw,72px);height:auto;flex-shrink:0;align-self:flex-start}

/* 그림 위 지문 라벨 — 좌상단에 작은 반투명 배지로 얹는다. */
.pb-page-title-bleed{position:absolute;top:16px;left:16px;color:#fff;
  background:rgba(0,0,0,.38);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  padding:6px 12px;border-radius:999px;z-index:2}

/* 하단 스크림 — 그림 위에서도 글씨가 항상 또렷하게 읽히도록 어두운 그러데이션을
   깐다(사진 위 자막이 아니라 스크림 위 자막이라 배경색과 상관없이 대비가 보장된다). */
.pb-scrim{position:absolute;left:0;right:0;bottom:0;height:62%;z-index:1;
  background:linear-gradient(to top, rgba(8,8,10,.92) 0%, rgba(8,8,10,.78) 32%,
    rgba(8,8,10,.32) 68%, transparent 100%)}
/* 표지·마지막 장은 카드 전체에 스크림을 깐다(내용 영역이 카드 전체라 62%로는 위쪽이
   너무 밝다) — .pb-scrim 뒤에 둬서 같은 클래스 우선순위에서 이 규칙이 이긴다. */
.pb-scrim-full{height:100%;background:linear-gradient(180deg,
  rgba(8,8,10,.35) 0%, rgba(8,8,10,.55) 45%, rgba(8,8,10,.90) 100%)}

.pb-caption{position:absolute;left:0;right:0;bottom:0;z-index:2;
  padding:18px 22px calc(20px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.pb-text{font-size:clamp(23px,6vw,36px);line-height:1.38;font-weight:800;
  color:#fff;max-width:100%;letter-spacing:-.01em;text-shadow:0 2px 12px rgba(0,0,0,.35)}
/* 자동읽기 중 지금 읽는 단어 — 노래방 자막처럼 밝힌다. */
.pb-word{transition:color .12s var(--pb-ease)}
.pb-word.on{color:var(--pb-accent)}
.pb-moral{font-size:clamp(13px,2.8vw,16px);font-weight:800;color:#fff;
  background:var(--pb-accent);border-radius:10px;padding:6px 14px;flex-shrink:0}

.pb-arrow{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;
  border-radius:50%;border:none;background:rgba(255,255,255,.10);
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);color:#fff;font-size:20px;
  cursor:pointer;display:flex;align-items:center;justify-content:center;z-index:5;
  transition:transform .15s var(--pb-spring),background .2s var(--pb-ease)}
.pb-arrow:hover{background:rgba(255,255,255,.2)}
.pb-arrow:active{transform:translateY(-50%) scale(.9)}
.pb-arrow:disabled{opacity:.25;cursor:default}
.pb-arrow-prev{left:-4px}
.pb-arrow-next{right:-4px}
@media (min-width:680px){.pb-arrow-prev{left:-54px}.pb-arrow-next{right:-54px}}

.pb-bottombar{width:100%;max-width:640px;display:flex;align-items:center;
  justify-content:center;padding:10px 4px 2px}
.pb-tools{display:flex;gap:10px;padding:6px;border-radius:999px;
  background:rgba(255,255,255,.08);backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);border:1px solid rgba(255,255,255,.10)}
.pb-tools button{border:none;border-radius:999px;background:transparent;color:#eaf4f0;
  padding:9px 16px;font-weight:800;font-size:13px;cursor:pointer;
  transition:background .2s var(--pb-ease),transform .15s var(--pb-spring)}
.pb-tools button:active{transform:scale(.94)}
.pb-tools button.on{background:var(--pb-accent);color:#fff}

/* 자동읽기 중 은은한 펄스 — "지금 소리가 나오고 있다"를 시각으로도 알려 준다. */
@keyframes pbPulse{0%,100%{box-shadow:0 0 0 0 rgba(10,132,255,.45)}50%{box-shadow:0 0 0 8px rgba(10,132,255,0)}}
body.pb-speaking .pb-tools{animation:pbPulse 1.4s ease-in-out infinite;border-radius:999px}

.pb-note{color:var(--pb-muted);font-size:11px;margin:2px 0 0;text-align:center}
.pb-hint{display:inline-block;margin:0 auto 4px;color:rgba(234,244,240,.85);font-size:12px;
  font-weight:700;background:rgba(0,0,0,.35);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);padding:6px 14px;border-radius:999px;
  pointer-events:none;transition:opacity .6s ease;white-space:nowrap;align-self:center}
.pb-hint.pb-hint-hidden{opacity:0}

@media (max-width:480px){
  .pb-brand{display:none}
  .pb-cover-emblem{font-size:52px}
}