/* =========================================================
   별마당도서관 콘텐츠 뷰어 — 오픈 전
   기준 시안: 아이폰 15 393×852 (상태바 54px는 기기 영역이라 제외)
   모바일 전용 · mobile-first
   ========================================================= */

:root {
  --c-gold: #ffbb5d;
  --c-gold-soft: #e3ba78;
  --c-cream: #faf2e5;
  --c-navy: #061021;
  --c-cell: #0b131d;
  --c-banner: #850508;
  --c-sky: #0b1a3a;

  --f-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  --f-serif-ko: "Noto Serif KR", serif;
  --f-serif-en: "Noto Serif", serif;
  --f-serif-ja: "Noto Serif JP", serif;
  --f-serif-zh: "Noto Serif SC", serif;
  /* 책 본문 · 제목 글꼴 : 언어 선택(html lang)에 따라 바뀐다. viewer.js의 BOOK_FONTS와 같은 글꼴 */
  --f-book: var(--f-serif-ko);

  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --topbar-h: 42px;
  --banner-h: 76px;
  --pager-h: 60px;
  --screen-h: 100vh;
}

/* 언어별 책 글꼴 : 영어는 시안대로 자간 4%, 일본어 · 중국어는 문장부호 줄바꿈 규칙을 엄격하게 */
html[lang="en"] { --f-book: var(--f-serif-en); }
html[lang="ja"] { --f-book: var(--f-serif-ja); }
html[lang="zh"] { --f-book: var(--f-serif-zh); }
html[lang="en"] .book-page__body,
html[lang="en"] .book-title-in { letter-spacing: .04em; }
html[lang="ja"] .book-text,
html[lang="zh"] .book-text { line-break: strict; }

@supports (height: 100dvh) {
  :root { --screen-h: 100dvh; }
}

*,
*::before,
*::after { box-sizing: border-box; }

/* 화면은 모두 position: fixed 이므로 문서는 높이를 갖지 않고 스크롤도 하지 않는다 */
html {
  height: 100%;
  overflow: hidden;
  overscroll-behavior-x: none;   /* 가로 밀기로 브라우저 기록이 이동하지 않게(Android Chrome 등) */
  -webkit-text-size-adjust: 100%;
}

body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior-x: none;
  background: #000;
  color: var(--c-cream);
  font-family: var(--f-sans);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

img { display: block; max-width: none; }
h1, h2, p, ul, dl, dd { margin: 0; }
ul { padding: 0; list-style: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--c-gold); outline-offset: 2px; }

/* ---------- 화면 공통 ---------- */
/* 화면 높이 기준 단위(cqh)를 쓰기 위해 각 화면을 크기 컨테이너로 둔다 */
.screen {
  position: fixed;
  inset: 0;
  height: var(--screen-h);
  overflow: hidden;
  container-type: size;
  opacity: 0;
  transition: opacity .6s ease;
}

.screen.is-active { opacity: 1; }
.screen[hidden] { display: none; }

/* ---------- 모든 화면 공통 하늘 ----------
   배경(시안 "00 BG / 공통 배경 · cover") 위에 별 필드(앱 루트에 한 번만)를 둔다.
   스플래시를 뺀 화면은 투명해서 이 층 위에 내용만 바뀐다. */
.sky {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: url("../images/bg-common.webp") 50% 50% / cover no-repeat, var(--c-sky);
  pointer-events: none;
}

/* 별 필드는 캔버스 한 장(asset/js/sky.js)이 그린다 — 배치 · 반짝임 규칙도 그쪽에 있다 */
.sky__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* ---------- ① 스플래시 ---------- */
.screen--splash {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #000;
}

/* 로고 215×98 (2026.10.23 시안 : 위 별마당도서관 마크 삭제). 시안(798 기준) 가운데 323 = 화면 가운데보다 76 위 → 화면 높이 비례(가운데 정렬이라 여백은 두 배) */
.splash__logo {
  display: block;
  width: 215px;
  height: auto;
  margin-top: -19cqh;
  overflow: visible;
}

.splash__brand {
  position: absolute;
  left: 50%;
  bottom: calc(82px + var(--safe-bottom));
  width: 116px;
  height: auto;
  transform: translateX(-50%);
}

/* 등장 연출(약 1.2초, 스플래시 2초 안에 끝난다)
   0.08s ~   READ 글자가 펼친 책 곡선 아래 가림선 뒤에서 하나씩 솟아오른다
   0.26s ~   펼친 책 곡선이 가운데에서 양옆으로 펼쳐진다
   0.38s ~   THE LIBRARY가 이어서 솟아오른다
   0.56s ~   A 안 책장이 아래 칸부터 불 켜지듯 나타난다
   0.8s  ~   하단 로고가 떠오른다
   전체      로고가 살짝 다가온다 */
.splash__logo { animation: splash-push 1.8s cubic-bezier(.2, .7, .2, 1) both; }

.splash__ch {
  transform-box: fill-box;
  animation: splash-rise .56s cubic-bezier(.16, 1, .3, 1) calc(80ms + var(--i) * 60ms) both;
}

.splash__row--2 .splash__ch { animation: splash-rise .5s cubic-bezier(.16, 1, .3, 1) calc(380ms + var(--i) * 32ms) both; }

.splash__swoosh {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: splash-open .6s cubic-bezier(.16, 1, .3, 1) .26s both;
}

.splash__book { animation: splash-book .3s ease-out var(--d) both; }

.splash__brand { animation: splash-brand .5s cubic-bezier(.2, .7, .2, 1) .8s both; }

@keyframes splash-push { from { scale: .94; } }
@keyframes splash-rise { from { transform: translateY(120%); } }
@keyframes splash-open { from { opacity: 0; transform: scaleX(0); } }
@keyframes splash-book { from { opacity: 0; } }
@keyframes splash-brand { from { opacity: 0; translate: 0 8px; } }

/* ---------- 상단 고정 : 현장 안내 + 언어 선택 ----------
   스플래시를 뺀 모든 화면이 함께 쓰는 하나의 상단바 */
.topbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: calc(var(--topbar-h) + var(--safe-top));
  padding: var(--safe-top) 24px 0;
  transition: opacity .6s ease, visibility .6s;
}

body[data-screen="splash"] .topbar {
  visibility: hidden;
  opacity: 0;
}

/* 책 화면 : 열람 시간 · 언어 선택을 화면 위 ~ 종이 시작점(상단 바 42 + .reader 위 여백 16) 띠의 가운데에 둔다(2026.10.23 시안) */
body[data-screen="book"] .topbar { height: calc(var(--topbar-h) + 16px + var(--safe-top)); }

.topbar__label {
  font-size: 10px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--c-gold);
  opacity: .85;
}

.lang-switch {
  display: flex;
  align-items: center;
  gap: 1px;
  height: 34px;
  padding: 4px;
  background: var(--c-navy);
  border: .7px solid rgba(255, 187, 93, .55);
  border-radius: 18px;
}

.lang-switch__btn {
  width: 33px;   /* 2026.10.23 시안 : KO · EN · CN · JP 칸 33×26 */
  height: 26px;
  padding: 0;
  border-radius: 14px;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-cream);
}

.lang-switch__btn[aria-pressed="true"] {
  background: rgba(255, 187, 93, .16);
  font-weight: 600;
  color: var(--c-gold);
}

/* ---------- ② 타이틀 : 키비주얼 ----------
   좌표는 모션 기준(참고 사이트 02_모션/01 타이틀 화면) 393×852 그대로다. 위 54(상태바 자리)는 화면 밖이고,
   y 776(레드 박스 윗선)이 배너 윗선에 오도록 놓는다(--banner-real은 JS가 배너 실제 높이로 넣는다).
   화면이 낮으면 JS가 --kv-scale(≤1)을 넣어 그 선을 기준으로 함께 축소한다 — 캐릭터 아래 끝은 늘 배너 뒤에 숨는다.
   폭이 좁으면 좌우가 잘린다(플립 시안). 제목도 그림 글자라 함께 줄어든다(시안 "SCALE 통일"). */
.keyvisual {
  --kv-scale: 1;
  position: absolute;
  left: 50%;
  bottom: calc(var(--banner-real, 76px) - 76px);
  width: 393px;
  height: 852px;
  transform: translateX(-50%) scale(var(--kv-scale));
  transform-origin: 50% 776px;
  pointer-events: none;
}

.keyvisual > * { position: absolute; }

/* 레이어마다 화면 크기(393×852) 래퍼라 변형 기준점을 화면 좌표 그대로 쓴다 */
.keyvisual__layer {
  position: absolute;
  display: block;
  left: 0;
  top: 0;
  width: 393px;
  height: 852px;
}

.keyvisual__layer > img { position: absolute; }

/* 쌓는 순서(아래 → 위) : 시계 · 분침 · 분침 장식 · 시계 효과 → 빛 궤적 → 제목 → 캐릭터 → 도깨비불 */
#kv-clock,
#kv-min-hand,
#kv-min-hand-blue,
#kv-ribbon,
#kv-magic { z-index: 2; }
#kv-light { z-index: 3; }
.keyvisual__title { z-index: 4; }
#kv-char-rig { z-index: 5; }
#kv-flame { z-index: 6; }

/* 변형 기준점(화면 좌표) : 시계 중심 205, 253.14 · 분침 뿌리 203, 253.5 */
#kv-clock { transform-origin: 205px 253.14px; }
#kv-min-hand,
#kv-min-hand-blue,
#kv-ribbon { transform-origin: 203px 253.5px; }
#kv-flame { transform-origin: 64.4px 533.5px; }
#kv-staff { transform-origin: 64.6px 528.5px; }
#kv-char { transform-origin: 196.5px 640px; }
#kv-tassel { transform-origin: 60.5px 555px; }
#kv-bell { transform-origin: 281.5px 636.5px; }
#kv-hat-tail { transform-origin: 309px 587.5px; }

#kv-min-hand-blue { opacity: 0; }
#kv-magic { opacity: 0; pointer-events: none; }

/* 도깨비 · 시계는 아래부터 유령처럼 드러난다(--rv −22 → 100) */
#kv-char-rig,
#kv-clock,
#kv-min-hand {
  --rv: 100;
  -webkit-mask-image: linear-gradient(to top, #000 calc(var(--rv) * 1%), transparent calc(var(--rv) * 1% + 22%));
  mask-image: linear-gradient(to top, #000 calc(var(--rv) * 1%), transparent calc(var(--rv) * 1% + 22%));
}

/* 빛 궤적 : 시안은 검은 바탕 그림을 밝게 겹치지만(LIGHTEN), 배경이 공통 하늘 층에 따로 있고 키비주얼은 축소 때문에
   따로 묶여 겹칠 배경이 없다. 그래서 그림 자체를 투명 배경(밝기 = 불투명도)으로 바꿔 보통으로 얹는다(kv-trail-full.webp) */
.keyvisual__light,
.keyvisual__trail {
  left: 0;
  top: 0;
  width: 393px;
  height: 852px;
  opacity: 0;
  pointer-events: none;
}

/* 분침을 따라 휘는 빛 궤적 그림(WebGL, title-motion.js) — 같은 층에서 SVG 심지 · 중심선 아래 */
#kv-trail { z-index: 3; }

/* 제목 : 로고 + 부제 한 줄(사이 9). 시안 언어별 타이틀 — 국문 로고(236×35) / 영문 · 중문 영문 2줄 로고(200×54) /
   일문 로고(232.87×38.8). 부제는 영문 벡터, 일문은 일문 벡터, 중문은 중문 글자. 묶음의 세로 가운데는 언어가 바뀌어도 같다(국문 위치 기준) */
.keyvisual__title {
  left: 45.1px;
  top: 415.3px;
  width: 312px;
  text-align: center;
}

html[lang="en"] .keyvisual__title { top: 405.8px; }   /* 묶음 높이 71.57 : 국문(52.57)보다 19 높아 9.5 올린다 */
html[lang="ja"] .keyvisual__title { top: 419.1px; }   /* 2026.10.29 피그마 일문 타이틀(로고 + 일문 부제) 로고 위 끝 */
html[lang="zh"] .keyvisual__title { top: 400.6px; }   /* 82 → 14.7 */

.keyvisual__title-ko { height: 35px; }
html[lang="en"] .keyvisual__title-ko,
html[lang="zh"] .keyvisual__title-ko { height: 54px; }
html[lang="ja"] .keyvisual__title-ko { height: 38.8px; }

.keyvisual__fog .keyvisual__logo,
.keyvisual__fog .keyvisual__sub { display: none; }

html:not([lang="en"]):not([lang="ja"]):not([lang="zh"]) .keyvisual__logo--ko,
html[lang="en"] .keyvisual__logo--en,
html[lang="zh"] .keyvisual__logo--en,
html[lang="ja"] .keyvisual__logo--ja,
html:not([lang="zh"]):not([lang="ja"]) .keyvisual__sub--en,
html[lang="ja"] .keyvisual__sub--ja,
html[lang="zh"] .keyvisual__sub--zh { display: block; }

.keyvisual__logo--ja { width: 232.87px; height: 38.8px; }

/* 2026.10.29 일문 부제 「クリスマスをあと5分だけ」(피그마 일문 로고 벡터에서 부제만 분리 · 161.8×12)
   피그마처럼 로고 중심보다 3 왼쪽에 오도록 그림 오른쪽에 여백을 넣었다(가운데 정렬 그대로)
   로고 위 끝 → 그림 위 끝 43.4(피그마) : 기본 배치(50.8)보다 부제 줄을 7.4 당긴다
   (그림에 음수 여백을 주면 안개 마스크 밖으로 나가 글자 위가 잘린다) */
.keyvisual__sub--ja { width: 161.8px; height: 12px; }
html[lang="ja"] .keyvisual__title-en { margin-top: -6.4px; }

/* 중문 부제 : Noto Serif SC 13/19 · 자간 8% */
.keyvisual__sub--zh {
  font-family: var(--f-serif-zh);
  font-size: 13px;
  font-weight: 400;
  line-height: 19px;
  letter-spacing: .08em;
  white-space: nowrap;
  color: #fff;
}

.keyvisual__title-en {
  margin: 1px 0 -8px;
  padding: 8px 0;
}

/* 안개 등장용 마스크 : 가운데에서 양옆으로 퍼지는 부드러운 가장자리(--mw 0 → 260). 평소(260)에는 전부 보인다 */
.keyvisual__fog {
  --mw: 260;
  display: inline-block;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 70%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 30%, #000 70%, transparent 100%);
  -webkit-mask-size: calc(var(--mw) * 1%) 100%;
  mask-size: calc(var(--mw) * 1%) 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: 50% 50%;
  mask-position: 50% 50%;
}

.keyvisual__fog img { display: block; }

/* ---------- 타이틀 상시 루프(CSS) ----------
   도깨비불 · 불티 · 술 · 모자 꼬리 · 방울은 처음부터 계속, 빛 궤적 · 분침 장식 발광은 진입이 끝나면(.is-live) 시작 */
.keyvisual__burn,
.keyvisual__burn img {
  position: absolute;
  left: 0;
  top: 0;
  width: 393px;
  height: 852px;
}

.keyvisual__burn {
  transform-origin: 64.4px 533.5px;
  animation: kv-burn 1.25s ease-in-out infinite;
}

.keyvisual__flame-a { animation: kv-lick .9s ease-in-out infinite; }

/* 3D 도깨비불 : 그림 불꽃 2장(참고 모션과 같은 흔들림) 위에 WebGL 불꽃을 스크린으로 덮는다(WebGL을 못 쓰면 그림 불꽃만).
   영역은 flame-gl.js의 AREA(시안 0, 330 · 130×222)와 같다 */
.keyvisual__flame-gl {
  position: absolute;
  left: 0;
  top: 330px;
  z-index: 1;
  width: 130px;
  height: 222px;
  mix-blend-mode: screen;
}

.keyvisual__flame-b {
  mix-blend-mode: screen;
  opacity: .45;
  animation: kv-lick-2 .7s ease-in-out infinite -.3s;
}

.keyvisual__embers {
  position: absolute;
  inset: 0;
}

.keyvisual__ember {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--s);
  height: var(--s);
  margin: calc(var(--s) / -2);
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0, #bff6ff 40%, rgba(49, 216, 253, 0) 75%);
  opacity: 0;
  animation: kv-ember 1.6s ease-out infinite var(--d);
}

.keyvisual.is-live #kv-ribbon,
.keyvisual.is-live .keyvisual__light,
.keyvisual.is-live .keyvisual__trail { animation: kv-soft-glow 6s ease-in-out infinite; }

#kv-tassel { animation: kv-sway 3.6s ease-in-out infinite; }
#kv-bell { animation: kv-bell 2.2s ease-in-out infinite -.6s; }
#kv-hat-tail { animation: kv-hat-swing 3.4s ease-in-out infinite; }

@keyframes kv-burn {
  0%, 100% { transform: scale(1, 1) skewX(0); }
  25% { transform: scale(.96, 1.07) skewX(-2.5deg); }
  50% { transform: scale(1.03, .96) skewX(1.5deg); }
  75% { transform: scale(.98, 1.04) skewX(-1deg); }
}

@keyframes kv-lick {
  0%, 100% { filter: brightness(1); }
  40% { filter: brightness(1.22); }
  70% { filter: brightness(.95); }
}

@keyframes kv-lick-2 {
  0%, 100% { transform: scale(-.92, 1.02); opacity: .3; }
  50% { transform: scale(-1, 1.14) skewX(4deg); opacity: .6; }
}

@keyframes kv-ember {
  0% { transform: translate(0, 0) scale(1); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--dx), -46px) scale(.3); opacity: 0; }
}

/* 은은한 발광 : 투명도만 6초 주기로 오르내림(색 변화 · 번쩍임 없음) */
@keyframes kv-soft-glow {
  0%, 100% { opacity: 1; }
  50% { opacity: .78; }
}

@keyframes kv-sway {
  0%, 100% { transform: rotate(-3deg); }
  50% { transform: rotate(3deg); }
}

@keyframes kv-bell {
  0%, 100% { transform: rotate(-7deg); }
  50% { transform: rotate(7deg); }
}

@keyframes kv-hat-swing {
  0%, 100% { transform: rotate(-3deg); }
  45% { transform: rotate(4deg); }
  70% { transform: rotate(2.5deg); }
}

/* ---------- 하단 고정 : 작가 소개 + 책 읽어보기 (2026.10.23 시안) ----------
   소개 문구(언어별 2~3줄, 작가 이름만 금색) + 버튼(이름 / (CLICK) 두 줄, 내용 폭 + 좌우 24). 박스 좌우 여백 24 · 사이 12.
   문구 줄 수가 언어마다 달라 배너 높이도 달라진다(키비주얼 축소는 viewer.js가 실제 높이로 다시 맞춘다) */
.banner {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: calc(var(--banner-h) + var(--safe-bottom));
  padding: 16px 24px calc(16px + var(--safe-bottom));
  background: var(--c-banner);
  border-top: 1px solid var(--c-gold);
}

.banner__intro {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  font-size: 12px;
  font-weight: 600;
  line-height: 16px;
  color: var(--c-cream);
}

html[lang="ko"] .banner__intro { letter-spacing: -.02em; }

.banner__sub {
  font-weight: 700;
  line-height: 17px;
}

.banner__accent {
  font-style: normal;
  color: #ffba5e;
}

/* 일문 · 중문 : 시안대로 Noto Sans JP 500 / Noto Sans SC 700 */
html[lang="ja"] .banner { font-family: "Noto Sans JP", var(--f-sans); }
html[lang="zh"] .banner { font-family: "Noto Sans SC", var(--f-sans); }
html[lang="ja"] .banner__intro { font-weight: 500; letter-spacing: -.02em; }
html[lang="zh"] .banner__intro { font-weight: 700; }
/* 문구 첫머리 여는 괄호(『 · 《) : 전각 괄호는 글자 칸 왼쪽 절반이 비어 첫 줄만 들여쓴 듯 보이므로 그만큼 당겨 아랫줄과 왼쪽 끝을 맞춘다 */
.banner__punct { margin-left: -.5em; }

.banner__cta {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 43px;
  padding: 0 24px;
  border-radius: 24px;
  background: #ffba5e;
  box-shadow: 0 0 14px rgba(255, 186, 94, .55);
  font-weight: 700;
  color: #470305;
  white-space: nowrap;
}

.banner__cta-label {
  font-size: 12px;
  line-height: 15px;
}

.banner__cta-click {
  font-size: 9px;
  line-height: 11px;
  letter-spacing: .02em;
  color: #75301b;
}

/* 좁은 폭(379 미만 · 플립 360) 시안 : 문구-버튼 사이 8, 소개 · 버튼 글자 11, 버튼 좌우 14 (CLICK 9 그대로) */
@media (max-width: 378.98px) {
  .banner { gap: 8px; }

  .banner__intro { font-size: 11px; }
  .banner__cta { padding: 0 14px; }
  .banner__cta-label { font-size: 11px; }
}

/* ---------- 높이 맞춤 본문 (③ 바코드 · ④ 잠금 해제 공용) ----------
   시안 "03 CONTENT / 높이에 따라 간격 조절 · 스크롤 없음" 규칙.
   1) 여유가 있으면 블록 사이 간격이 늘어난다(space-between, 최소 8px).
   2) 위·아래 여백은 화면 높이에 비례해 시안 값(798 기준 위 24 = 3cqh · 아래 42 = 5.3cqh)까지만 커지고,
      낮은 화면에선 최소값까지 줄어든다. 위 여백이 없는 화면(④)은 --pad-top만 바꾼다.
   3) 그래도 모자라면 JS가 --fit(<1)을 넣어 내용 전체를 비율대로 축소한다. 높이를 1/--fit로 늘려 그린 뒤 줄이므로 결과 높이는 화면과 같다.
   overflow는 보이게 둔다 — 화면(.screen)이 잘라 주고, ④ 그림처럼 본문 폭(345)보다 넓은 장식이 잘리지 않아야 한다. */
.fit-panel {
  --fit: 1;
  --pad-top: clamp(12px, 3cqh, 24px);
  position: absolute;
  top: calc(var(--topbar-h) + var(--safe-top));
  left: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 345px;
  height: calc((100cqh - var(--topbar-h) - var(--safe-top)) / var(--fit));
  padding: var(--pad-top) 0 calc(clamp(24px, 5.3cqh, 42px) + var(--safe-bottom));
  transform: translateX(-50%) scale(var(--fit));
  transform-origin: 50% 0;
}

/* ---------- ③ 바코드·열람 안내 (2026.10.23 시안) ----------
   개장 전(body[data-phase="before"]) : 견본 바코드 카드 위에 카운트다운(위아래로 바코드 줄이 보인다)
   개장 후(open) : 손님 바코드 카드. 제목과 나머지 문구는 같다.
   세로 배치(393×852 기준) : 제목 138 · 카드 168(252×117) · 자물쇠 그림 310(165.68×168.54) · 제목 485.5 · 안내 532.5 · 안내 줄 603 / 661 / 717.
   등장 모션은 asset/js/barcode-motion.js(시작 전 [data-enter] 요소는 숨겨 둔다) */
body:not([data-phase="before"]) .countdown,
body[data-phase="before"] .pass { display: none; }

.locked {
  justify-content: flex-start;
  gap: 0;
  padding-top: 42px;
}

.pass,
.countdown {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.pass__title,
.countdown__title {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: var(--c-gold);
  text-align: center;
}

/* 바코드 카드 252×117 · 바코드 218×91(카드 안 16.5, 13) · 은은한 금빛 번짐 */
.pass__card {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 252px;
  height: 117px;
  margin: 0;
  padding: 13px 17px;
  background: #faf2e3;
  border-radius: 10px;
  box-shadow: 0 0 13.17px 1.3px rgba(242, 166, 64, .32);
}

.pass__code {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 픽셀 등장용 캔버스 : 카드 둘레 32 여유(316×181). 번지는 동안만 보이고 그동안 실제 카드는 투명 */
.pass__card { position: relative; }

.pass__reveal {
  position: absolute;
  left: -32px;
  top: -32px;
  width: 316px;
  height: 181px;
  pointer-events: none;
  visibility: hidden;
}

.pass__card.is-revealing { background: transparent; box-shadow: none; }
.pass__card.is-revealing .pass__code { opacity: 0; }
.pass__card.is-revealing .pass__reveal { visibility: visible; }

.countdown__stage {
  position: relative;
  width: 329px;
  height: 117px;
}

/* 바코드 카드는 개장 후와 같은 .pass__card를 쓰고 자리만 잡는다 */
.countdown__card {
  position: absolute;
  left: 38.5px;
  top: 0;
}

.countdown__timer {
  position: absolute;
  left: 50%;
  top: 19.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 78px;
  padding: 8px;
  background: var(--c-navy);
  border-radius: 10px;
  transform: translateX(-50%);
}

.countdown__cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 67px;
}

.countdown__cell dt {
  font-size: 8px;
  font-weight: 500;
  line-height: 12px;
  color: rgba(250, 242, 229, .7);
}

.countdown__cell dd {
  position: relative;
  width: 61px;
  height: 42px;
  background: var(--c-cell);
  border-radius: 5px;
  font-size: 27px;
  font-weight: 600;
  line-height: 42px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 플립 분할선 */
.countdown__cell dd::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 21.5px;
  height: 1px;
  background: rgba(255, 255, 255, .1);
  opacity: .07;
}

/* 자물쇠 그림 165.68×168.54 : 빛 라인(+ 반짝이) 위에 자물쇠 63.41×66.65(그림 안 55.08, 55.68) */
.locked__art {
  position: relative;
  flex: none;
  width: 165.68px;
  height: 168.54px;
  margin-top: 25px;
}

.locked__light,
.locked__line,
.locked__stars {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.locked__stars img {
  position: absolute;
  display: block;
  max-width: none;
  mix-blend-mode: plus-lighter;
}

.locked__lock {
  position: absolute;
  left: 55.08px;
  top: 55.68px;
  width: 63.41px;
  height: 66.65px;
}

.locked__lock img {
  display: block;
  width: 100%;
  height: 100%;
}

.locked__intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-top: 7px;
  text-align: center;
}

.locked__title {
  font-family: var(--f-serif-ko);
  font-size: 24px;
  font-weight: 700;
  line-height: 33px;
  color: var(--c-cream);
}

html[lang="en"] .locked__title { font-family: var(--f-serif-en); }
html[lang="ja"] .locked__title { font-family: var(--f-serif-ja); }
html[lang="zh"] .locked__title { font-family: var(--f-serif-zh); }

.locked__desc {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

/* 안내 줄 : 아이콘 40 · 사이 14 · 글 205(가운데 묶음, 열람 종료 화면 기준) */
.guide {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

.guide__item {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: 312px;
  min-height: 44px;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

.guide__text { width: 205px; }

/* 바코드 화면 : 글 194 왼쪽 정렬, 줄 사이 18 · 16 */
.locked .guide {
  gap: 0;
  margin-top: 22.5px;
}

.locked .guide__item {
  align-items: flex-start;
  justify-content: flex-start;
  width: 248px;
  min-height: 40px;
}

.locked .guide__item + .guide__item { margin-top: 18px; }
.locked .guide__item:nth-child(3) { margin-top: 16px; }
.locked .guide__item:nth-child(3) .guide__text { color: #ffbb5d; }   /* 2026.10.27 시안 : 저작권 문구 색 */
.locked .guide__text { width: 194px; }

.guide__icon {
  flex: 0 0 40px;
  width: 40px;
  height: 40px;
}

/* 등장 전 : 모션이 시간에 맞춰 올린다(모션을 못 쓰면 barcode-motion.js가 바로 다 보인다) */
.screen--barcode.is-entering [data-enter],
.screen--barcode.is-entering [data-lock-art],
.screen--end.is-entering [data-enter],
.screen--end.is-entering [data-lock-art] { opacity: 0; }

/* ---------- ④ 잠금 해제 (2026.10.23 시안) ----------
   모션 기준 : 참고 사이트 02_모션/02 잠금해제(unlock-motion.js · styles.css · unlock-motion.css · README). 좌표는 393×852 그대로.
   상단 바 아래(96)부터 : 그림 자리 203×216(113.5) · 문구(359.5, 사이 14) · 진행 막대 220(566.5).
   빛 라인 · 별 · 자물쇠는 원본 그림을 마스크로 나눈 결과를 미리 그려 둔 이미지(images/unlock/pre-full)로 쓴다(viewer.jsp 정의부).
   움직임은 모두 asset/js/unlock-motion.js가 시간으로 계산해 넣는다(CSS 애니메이션 없음) */
.unlock {
  justify-content: flex-start;
  gap: 0;
  padding-top: 113.5px;
}

/* 화면 가장자리를 살짝 눌러 시선을 자물쇠로 모은다(열리기 직전 조금 더 짙어졌다 풀린다) */
.ul-vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(118% 78% at 50% 33%, transparent 52%, rgba(3, 8, 22, .62) 100%);
  opacity: .85;
  pointer-events: none;
}

.ul-hero-slot {
  position: relative;
  flex: none;
  width: 203px;
  height: 216px;
}

.ul-hero {
  position: relative;
  left: -9px;
  top: .22168px;
  width: 221px;
  height: 215.5567px;
  isolation: isolate;
}

.ul-light {
  position: absolute;
  left: 0;
  top: -4.548px;
  width: 221px;
  height: 235.67px;
  overflow: visible;
  pointer-events: none;
}

.ul-lock {
  position: absolute;
  left: 65.32px;
  top: 71.50668px;
  width: 89.41016px;
  height: 107.76109px;
  perspective: 560px;
}

.ul-lock__entrance {
  width: 100%;
  height: 100%;
  transform-origin: 50% 62%;
  transform-style: preserve-3d;
}

.ul-lock__mirror {
  position: relative;
  width: 100%;
  height: 100%;
  transform: scaleX(-1);
  transform-style: preserve-3d;
}

.ul-lock__part {
  position: absolute;
  inset: 0;
  width: 89.41016px;
  height: 107.76109px;
  overflow: visible;
}

.ul-lock__shackle { transform-origin: 28.03% 45.01%; }
.ul-lock__shackle svg { display: block; overflow: visible; }

.ul-lock__flash {
  position: absolute;
  left: 13%;
  top: 38%;
  width: 72%;
  height: 60%;
  background: radial-gradient(ellipse, #fff4d8aa, transparent 65%);
  mix-blend-mode: screen;
  opacity: 0;
  pointer-events: none;
}

/* 자물쇠 뒤 금빛 후광 : 미리 흐린 그라디언트의 불투명도만 움직인다 */
.ul-lock__halo {
  position: absolute;
  left: -42%;
  top: 6%;
  width: 184%;
  height: 118%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(255, 206, 128, .62), rgba(255, 176, 72, .22) 52%, rgba(255, 160, 50, 0) 100%);
  opacity: 0;
  pointer-events: none;
}

/* 자물쇠 속 금빛 입자 : 원본 위에 얹어 묶음마다 밝기만 바뀐다 */
.ul-glitter {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.ul-glitter img {
  position: absolute;
  display: block;
  max-width: none;
  opacity: 0;
}

.unlock__intro {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: 345px;
  margin-top: 30px;
  text-align: center;
}

.unlock__title {
  margin: 0;
  font-family: var(--f-serif-ko);
  font-size: 24px;
  font-weight: 700;
  line-height: 33px;
  color: var(--c-gold);
}

html[lang="en"] .unlock__title { font-family: var(--f-serif-en); }
html[lang="ja"] .unlock__title { font-family: var(--f-serif-ja); }
html[lang="zh"] .unlock__title { font-family: var(--f-serif-zh); }

.unlock__desc {
  font-size: 16px;
  font-weight: 500;
  line-height: 24px;
}

.unlock__progress {
  width: 220px;
  margin-top: 50px;
  text-align: center;
}

.unlock__track {
  position: relative;
  display: block;
  width: 220px;
  height: 4px;
  background: rgba(250, 242, 229, .18);
  border-radius: 2px;
}

.unlock__bar {
  display: block;
  width: 100%;
  height: 4px;
  background: linear-gradient(90deg, #fad685, #e59e40);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
}

/* 진행 막대 끝의 작은 빛(타이틀 모션의 심지와 같은 어휘) */
.unlock__glint {
  position: absolute;
  top: -4px;
  left: -7px;
  width: 14px;
  height: 12px;
  border-radius: 50%;
  background: radial-gradient(closest-side, #fff7df, rgba(255, 214, 140, .65) 45%, rgba(255, 180, 80, 0));
  opacity: 0;
  pointer-events: none;
}

.unlock__moving {
  margin-top: 12px;
  font-size: 12px;
  line-height: 18px;
  color: rgba(250, 242, 229, .8);
}

/* ---------- ⑤ 책 본문 ----------
   세로 배치(시안 05) : 상단바 · 20 · 종이(남는 높이) · 20 · 타이머 18 · 22 · 쪽 넘김 막대 60
   종이 크기와 쪽 나누기는 reader.js가 이 영역(.reader__stage)을 재서 정한다. */
.reader {
  position: absolute;
  top: calc(var(--topbar-h) + var(--safe-top));
  left: 0;
  right: 0;
  bottom: calc(var(--pager-h) + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  padding: 16px 0 0;   /* 2026.10.23 시안 : 상단 바 아래 16부터 쪽 번호 바로 위까지 종이(열람 시간은 상단 바 왼쪽으로) */
}

.reader__stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  justify-content: center;
  touch-action: pan-y pinch-zoom; /* 가로 밀기는 책장 넘김, 두 손가락 확대는 브라우저에 맡긴다 */
  user-select: none;
  -webkit-user-select: none;
}

/* 열람 시간 : 2026.10.23 시안 — 책 · 열람 종료 화면에서는 상단 바 왼쪽(READ THE LIBRARY 자리)에 READING TIME 10:00 */
.reader__timer {
  display: none;
  align-items: center;
  gap: 6px;
  height: 18px;
  color: var(--c-cream);
}

body[data-screen="book"] .reader__timer,
body[data-screen="end"] .reader__timer { display: flex; }
body[data-screen="book"] .topbar__label,
body[data-screen="end"] .topbar__label { display: none; }

.reader__timer-icon { width: 14px; height: 16px; }
.reader__timer-label { font-size: 12px; font-weight: 400; line-height: 18px; letter-spacing: .1em; }
.reader__timer-time { font-size: 15px; font-weight: 700; line-height: 18px; font-variant-numeric: tabular-nums; }

.pager {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: calc(var(--pager-h) + var(--safe-bottom));
  padding: 0 24px var(--safe-bottom);
  background: #010b13;
}

.pager__btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border: .7px solid rgba(250, 242, 229, .6);
  border-radius: 22px;
  font-size: 25px;
  line-height: 35px;
  color: var(--c-cream);
}

.pager__btn:disabled { opacity: .28; cursor: default; }

.pager__num {
  font-size: 13px;
  font-weight: 500;
  line-height: 18px;
  font-variant-numeric: tabular-nums;
}

/* ---------- 스와이프 안내 코치마크(첫 진입 1회) ----------
   종이 영역(.reader__stage) 위에만 남색 딤. 안내 묶음(제스처 41 · 간격 49 · 안내 16 · 간격 8 · 보조 12)은 영역 세로 가운데(시안 616 기준 238~378).
   제스처는 시안처럼 가운데에서 오른쪽으로 10px : ‹‹(0) · 궤적(40, 130) · 터치 포인트(144, 40px) · ››(196). 터치는 막지 않는다 */
.coach {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(5, 10, 28, .82);
  text-align: center;
  pointer-events: none;
  opacity: 0;
  transition: opacity .35s ease;
}

.coach[hidden] { display: none; }
.coach.is-shown { opacity: 1; }

.coach__gesture {
  position: relative;
  width: 222px;
  height: 41px;
  margin: 0 0 49px 20px;   /* 시안 : 묶음 가운데가 화면 가운데보다 10px 오른쪽 */
}

.coach__arrow {
  position: absolute;
  left: 0;
  top: 0;
  font-size: 34px;
  font-weight: 700;
  line-height: 41px;
  color: rgba(255, 187, 93, .95);
}

.coach__arrow--sub {
  left: 196px;
  color: rgba(255, 187, 93, .35);
}

/* 금색 터치 포인트가 오른쪽에서 왼쪽으로 밀리고, 금색 궤적이 뒤를 따라온다 → 사라졌다 반복(2.2초) */
.coach__point {
  position: absolute;
  left: 144px;
  top: 3px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #ffbb5d;
  box-shadow: 0 0 16px rgba(255, 186, 92, .6);
  animation: coach-point 2.2s cubic-bezier(.45, 0, .25, 1) infinite;
}

.coach__trail {
  position: absolute;
  left: 40px;
  top: 20px;
  width: 130px;
  height: 6px;
  border-radius: 3px;
  /* 끝까지 늘어나도 시작 때처럼 끝부분이 어둡게 : 포인트 쪽에서 빠르게 옅어지고 뒤 15%는 비운다 */
  background: linear-gradient(90deg, rgba(255, 187, 93, .9) 0%, rgba(255, 187, 93, .55) 30%, rgba(255, 187, 93, .18) 60%, rgba(255, 187, 93, 0) 85%);
  transform-origin: 100% 50%;
  animation: coach-trail 2.2s cubic-bezier(.45, 0, .25, 1) infinite;
}

.coach__title {
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  color: #fff;
}

.coach__desc {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  color: rgba(250, 242, 229, .75);
}

@keyframes coach-point {
  0% { opacity: 0; transform: translateX(0); }
  12% { opacity: 1; transform: translateX(0); }
  62% { opacity: 1; transform: translateX(-110px); }
  80%, 100% { opacity: 0; transform: translateX(-110px); }
}

@keyframes coach-trail {
  0%, 12% { opacity: 1; transform: scaleX(0); }
  62% { opacity: 1; transform: scaleX(1); }
  72%, 100% { opacity: 0; transform: scaleX(1); }   /* 포인트(80%)보다 먼저 사라져 옅어지는 원 아래로 막대 앞끝이 비치지 않게 */
}

/* ---------- 용어 팝업 ----------
   시안 : 종이 영역 위 남색 50% 딤, 카드(폭 321 · 상하 18 좌우 20 · 사이 12 · 반경 18)는 영역 가운데.
   헤더 = ✦ · 용어[번호] · 닫기(28 원), 아래 구분선 · 설명(14/22). 글꼴은 책 글꼴(언어별) */
.term-pop {
  position: absolute;
  inset: 0;
  z-index: 6;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 36px;
  opacity: 0;
  transition: opacity .25s ease;
}

.term-pop[hidden] { display: none; }
.term-pop.is-shown { opacity: 1; }
.term-pop.is-group { padding: 0 24px; }   /* 그룹 용어 팝업 시안 : 카드 폭 345 */
.term-pop.is-group .term-pop__card { max-width: 345px; }

.term-pop__dim {
  position: absolute;
  inset: 0;
  background: rgba(5, 10, 28, .5);
}

.term-pop__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 321px;
  padding: 18px 20px;
  border: 1px solid rgba(201, 158, 84, .8);
  border-radius: 18px;
  background: #faf2e3;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .35);
  font-family: var(--f-book);
  color: #171721;
}

/* 2026.10.27 : 용어가 두 줄 이상이어도 별 · 닫기는 첫 줄 자리 그대로(한 줄일 때와 같은 위치) — 위 맞춤 + 첫 줄 높이(28) 기준 가운데 */
.term-pop__head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 2px 8px;   /* 그룹 용어 : 제목 줄 아래 예시 목록까지 2 */
  padding-bottom: 12px;   /* 시안 : 헤더 · 구분선 · 설명 사이 12 */
  border-bottom: 1px solid rgba(201, 158, 84, .55);
}

.term-pop__star {
  margin-top: 3px;
  font-size: 16px;
  font-weight: 700;
  line-height: 22px;
  color: #c99e54;
}

.term-pop__title {
  flex: 1 1 0;   /* 길면 닫기 버튼을 밀어내지 않고 이 자리에서 줄바꿈 */
  min-width: 0;
  margin: .5px 0 0;
  font-size: 20px;
  font-weight: 700;
  line-height: 27px;
  color: #45331a;
  word-break: keep-all;   /* 중문 "DOKKAEBI（도깨비）"처럼 한글이 섞인 용어가 글자 중간에서 끊기지 않게 */
  overflow-wrap: break-word;
}

.term-pop__no {
  margin-left: 1px;
  font-size: 12px;
  line-height: 0;
}

.term-pop__close {
  flex: none;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 14px;
  background: rgba(69, 51, 26, .08);
  font-family: var(--f-sans);
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: #45331a;
}

/* 그룹 용어 예시 목록(12/18) : 본문에서 누른 단어만 굵게 · 밑줄 */
.term-pop__items {
  flex: 0 0 100%;
  font-size: 12px;
  line-height: 18px;
  color: rgba(69, 51, 26, .7);
}

.term-pop__hit {
  font-weight: 700;
  color: #45331a;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.term-pop__desc {
  font-size: 14px;
  line-height: 22px;
  text-align: left;
}

/* 책 · 종이 */
.book {
  position: relative;
  height: 100%;
  overflow: hidden;
}

.book--spread {
  overflow: visible;
  perspective: 3600px;
}

.book-page {
  position: absolute;
  top: 0;
  height: 100%;
  background: url("../images/paper.webp") 50% 50% / cover no-repeat, #f3ead6;
}

/* 접힌 뒷면에 비치는 다음 쪽 : 종이 뒤에서 비치듯 좌우가 뒤집혀 흐리게.
   뒷면 상자 왼쪽 끝에 붙인 채 뒤집으면 접히는 선을 기준으로 정확히 거울 대칭이 된다 */
.book-page--ghost {
  left: 0;
  background: none;
  transform: scaleX(-1);
}

.book-page--ghost .book-page__body { opacity: .18; }

/* 본문 영역 : 상하 42 · 좌우 24 */
.book-page__body {
  position: absolute;
  top: 42px;
  left: 24px;
  right: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-family: var(--f-book);
  font-size: 14px;
  font-weight: 400;
  line-height: 24px;
  color: #171721;
}

/* 쪽 나누기 재기용 상자 : 화면 밖, 보이지 않음 */
.book-measure {
  position: fixed;
  top: 0;
  left: -10000px;
  right: auto;
  visibility: hidden;
  pointer-events: none;
}

/* 제목 : 한 줄 고정. 본문 폭보다 넓으면 reader.js가 --book-title-size로 줄인다 */
.book-title-in {
  height: 35px;
  padding-bottom: 2px;
  overflow: hidden;
  white-space: nowrap;
  font-family: var(--f-book);
  font-size: var(--book-title-size, 24px);
  font-weight: 700;
  line-height: 33px;
  color: #45331a;
  text-align: center;
}

.book-figure {
  margin: 0;
  aspect-ratio: 345 / 216;   /* 2026.10.23 시안 : 삽화 고정 비율 345×216 */
}

.book-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
}

.book-text {
  text-align: left;
  word-break: normal;
  overflow-wrap: break-word;
}

/* 본문 용어 : 밑줄 + 윗첨자 [번호]. 누르면 용어 팝업. 줄 높이를 바꾸지 않고(쪽 나누기 줄 수 그대로) 번호와 떨어지지 않게 한 덩어리 */
.book-term {
  display: inline;
  font: inherit;
  letter-spacing: inherit;
  color: #b3241b;   /* 2026.10.23 시안 : 각주(용어 · 번호 · 밑줄) 붉은색 */
  white-space: nowrap;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

.book-term__no {
  display: inline-block;   /* 밑줄이 번호까지 이어지지 않게 */
  position: relative;
  top: -.55em;
  margin-left: 1px;
  font-size: 9px;
  line-height: 0;
  vertical-align: baseline;
}

/* 용어집 : 제목(20/28) · 구분선 · 항목(13/22, [번호] 용어는 굵게). 항목은 쪽 사이에서 나누지 않는다 */
.book-gloss__title {
  margin: 0;
  padding-bottom: 16px;   /* 시안 : 제목 아래 2 + 간격 14 뒤 구분선 */
  border-bottom: 1px solid rgba(201, 158, 84, .7);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: #45331a;
  text-align: center;
}

.book-gloss__item {
  font-size: 13px;
  line-height: 22px;
  text-align: left;
  overflow-wrap: break-word;
}

.book-gloss__term {
  font-weight: 700;
  color: #45331a;
}

/* 책 첫 페이지(2026.10.23 시안) : 종이 세로 가운데 · 사이 20. 키비주얼 제목을 종이 색(#45331a)으로 —
   타이틀 화면의 흰 로고 · 부제 벡터를 마스크로 써서 언어별 로고를 그대로 쓴다(국문 기준 폭 345 = 타이틀의 1.462배).
   부제는 영문 벡터, 중문만 글자. 판타지 안내 15/24(첫 문단 600), 용어는 본문 각주와 같은 표시 */
.book-cover {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
  white-space: pre-line;
}

.book-cover__title {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  margin: 0;
  padding: 4px 0 6px;
}

.book-cover__logo,
.book-cover__sub {
  display: block;
  max-width: 100%;   /* 좁은 종이(플립 등)에서는 비율대로 줄인다 */
  height: auto;
  background: #45331a;
  -webkit-mask: var(--m) 50% 50% / contain no-repeat;
  mask: var(--m) 50% 50% / contain no-repeat;
}

.book-cover__logo { --m: url("../images/kv-title-ko.svg"); width: 345px; aspect-ratio: 236 / 35; }
html[lang="en"] .book-cover__logo,
html[lang="zh"] .book-cover__logo { --m: url("../images/kv-title-logo-en.svg"); width: 292.4px; aspect-ratio: 200 / 54; }
html[lang="ja"] .book-cover__logo { --m: url("../images/kv-title-logo-ja.svg"); width: 340.5px; aspect-ratio: 233 / 39; }

.book-cover__sub {
  --m: url("../images/kv-title-en.svg");
  width: 248.5px;
  aspect-ratio: 170 / 9;
  overflow: hidden;
  color: transparent;   /* 글자는 화면 읽기용 — 보이는 것은 벡터 */
  font-size: 1px;
}

/* 2026.10.29 일문 부제 벡터(kv-title-ja.svg 161.8×12, 키비주얼과 같은 1.4618배) */
html[lang="ja"] .book-cover__sub { --m: url("../images/kv-title-ja.svg"); width: 236.5px; aspect-ratio: 161.8 / 12; }

html[lang="zh"] .book-cover__sub {
  width: auto;
  height: auto;
  aspect-ratio: auto;
  overflow: visible;
  background: none;
  -webkit-mask: none;
  mask: none;
  font-family: var(--f-serif-zh);
  font-size: 19px;
  font-weight: 400;
  line-height: 27px;
  letter-spacing: .08em;
  color: #45331a;
}

.book-cover__mark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: #b88c42;
}

.book-cover__mark::before,
.book-cover__mark::after {
  content: "";
  width: 84px;
  height: 1px;
  background: rgba(184, 140, 66, .7);
}

.book-cover__lead,
.book-cover__body {
  font-size: 15px;
  line-height: 24px;
  color: #171721;
}

.book-cover__lead { font-weight: 600; }

/* 마지막 장 : 종이 세로 가운데. (2026.10.23 시안) 삽화 200×200 → 24 → 제목 · 장식 · 안내(간격 16) → 버튼 묶음(간격 40, 버튼 사이 12)
   종이가 낮아 다 못 들어가면 삽화만 줄어든다(글 · 버튼은 그대로) */
.book-page__body--end {
  bottom: 42px;
  justify-content: center;
}

.book-end {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  min-height: 0;
  max-height: 100%;
  text-align: center;
  white-space: pre-line;
}

.book-end > * { flex-shrink: 0; }

.book-end > .book-end__art {
  flex: 0 1 200px;
  width: 200px;
  height: 200px;
  min-height: 0;
  margin-bottom: 8px;   /* 삽화 ~ 제목 24 = 16 + 8 */
  object-fit: contain;
}

.book-end__title {
  margin: 0;
  font-size: 24px;
  font-weight: 700;
  line-height: 34px;
  color: #45331a;
}

.book-end__mark {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 20px;
  font-weight: 700;
  line-height: 24px;
  color: #b88c42;
}

.book-end__mark::before,
.book-end__mark::after {
  content: "";
  width: 56px;
  height: 1px;
  background: rgba(184, 140, 66, .7);
}

.book-end__desc {
  font-size: 16px;
  font-weight: 600;
  line-height: 26px;
  color: #171721;
}

.book-end__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  margin-top: 24px;   /* 묶음 사이 40 = 16 + 24 */
}

.book-end__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  border: 1.5px solid rgba(69, 51, 26, .7);
  border-radius: 24px;
  font-family: var(--f-sans);
  font-size: 15px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: normal;
  color: #45331a;
}

.book-end__btn--primary {
  border: 0;
  background: #ffbb5d;
  box-shadow: 0 4px 12px rgba(255, 186, 92, .45);
  color: #470305;
}

/* 펼침 가운데 접힘선 : 상하 42 안쪽 */
.book__fold {
  position: absolute;
  top: 42px;
  bottom: 42px;
  left: 50%;
  width: 1px;
  background: rgba(115, 97, 69, .5);
  z-index: 4;
}

/* 한 쪽 넘김 : 접히는 장 · 접힌 뒷면 · 아래 쪽 그림자 */
.turn-cur { z-index: 2; }

.turn-flap {
  position: absolute;
  top: 0;
  height: 100%;
  overflow: hidden;
  z-index: 3;
  background: url("../images/paper.webp") 50% 50% / cover no-repeat, #f3ead6;
  box-shadow: -6px 0 14px rgba(0, 0, 0, .18);
}

.turn-flap::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to left, rgba(69, 51, 26, .22), rgba(69, 51, 26, 0) 40%);
  pointer-events: none;
}

.turn-shadow {
  position: absolute;
  top: 0;
  width: 46px;
  height: 100%;
  z-index: 1;
  background: linear-gradient(to right, rgba(0, 0, 0, .24), rgba(0, 0, 0, 0));
  pointer-events: none;
}

/* 펼침 넘김 : 가운데 책등 축 3D */
.leaf {
  position: absolute;
  top: 0;
  height: 100%;
  z-index: 5;
  transform-style: preserve-3d;
}

.leaf__face {
  position: absolute;
  inset: 0;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.leaf__face--back { transform: rotateY(180deg); }
.leaf__face .book-page { left: 0; }

.leaf__shade {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: linear-gradient(to right, rgba(0, 0, 0, .5), rgba(0, 0, 0, 0) 70%);
}

/* ---------- ㉑ 열람 종료 ----------
   시안 : 본문(자물쇠 · 안내 · 가이드)과 버튼을 세로 가운데 정렬, 사이 40.
   공용 높이 맞춤(.fit-panel) 위에서 auto 여백으로 가운데를 만든다 — 넘칠 때는 위부터 쌓여 축소 계산이 맞는다. */
.ended {
  justify-content: flex-start;
  gap: 60px;   /* 2026.10.23 시안 : 본문 묶음과 버튼 사이 60 */
}

.ended > :first-child { margin-top: auto; }
.ended > :last-child { margin-bottom: auto; }

.ended__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  width: 100%;
}

/* 2026.10.27 : 바코드 화면 자물쇠 그림(165.68×168.54)을 시안 자리 149×147에 겹친다(왼쪽 -12.75 · 위 -8, 옛 정지 그림 ended-lock.png와 맞춘 값) */
.locked__art.ended__art { margin: -8px -3.93px -13.54px -12.75px; }

/* 바코드 화면과 같은 문구 블록을 쓰되 바코드 화면 세로 배치용 위 여백은 뺀다(사이는 .ended__body의 24) */
.ended .locked__intro { margin-top: 0; }

.ended__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  border-radius: 26px;
  background: #ffba5e;
  box-shadow: 0 0 16px rgba(255, 186, 92, .35);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: -.01em;
  color: #061021;
}

/* ---------- 동작 줄이기 ---------- */
/* ---------- 일반 휴대폰 가로 화면 안내 ----------
   웹 페이지는 화면 방향을 잠글 수 없어서(브라우저가 막는다) 가로로 들면 이 안내가 모든 화면을 덮는다.
   기준은 "가로 + 높이 500 이하"다. 가로로 든 휴대폰은 높이가 320~440이고,
   펼친 폴드(673 이상) · 듀오 두 화면(705) · 태블릿은 높이가 커서 지금처럼 펼침 화면으로 보인다.
   2026.10.29 펼친 폴드도 브라우저 탭 · 주소창 · 작업 표시줄이 높이를 차지하면 500 아래로 내려가 안내가 떴다
   → 기기 화면의 짧은 쪽이 600 미만인 일반 휴대폰(html.is-phone, viewer.jsp에서 붙임)에만 띄운다. */
.rotate-guard {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 24px calc(24px + env(safe-area-inset-right, 0px)) 24px calc(24px + env(safe-area-inset-left, 0px));
  text-align: center;
  background: url("../images/bg-common.webp") 50% 50% / cover no-repeat, var(--c-sky);
}

.rotate-guard__icon {
  width: 56px;
  height: 56px;
  margin-bottom: 8px;
  animation: rotate-guard-turn 2.4s cubic-bezier(.6, 0, .2, 1) infinite;
}

.rotate-guard__title {
  font-family: var(--f-serif-ko);
  font-size: 20px;
  font-weight: 700;
  line-height: 28px;
  color: var(--c-gold);
}

.rotate-guard__text {
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: rgba(250, 242, 229, .8);
}

/* 누운 휴대폰이 세로로 일어서는 동작을 반복한다 */
@keyframes rotate-guard-turn {
  0%, 20% { transform: rotate(-90deg); }
  55%, 100% { transform: rotate(0deg); }
}

@media (orientation: landscape) and (max-height: 500px) {
  .is-phone .rotate-guard { display: flex; }
}

@media (prefers-reduced-motion: reduce) {
  .rotate-guard__icon { animation: none; }
  .screen,
  .topbar { transition: none; }
  .screen--splash * { animation: none !important; }
  .sky *,
  .keyvisual *,
  .coach * { animation: none !important; }
  .coach { transition: none; }
}