/* 울산박물관 일기 — 1920×1080 한 판. 치수는 Figma 값 그대로 (펼친 책 안쪽은 기준 1120×760 값, ×1.2223로 키움) */
@font-face { font-family: 'Noto Serif KR'; src: url(../fonts/NotoSerifKR.woff2) format('woff2'); font-weight: 400 700; }

:root {
  --ink: #2b2118;           /* ink/primary */
  --rule: rgba(43,33,24,.35); /* ink/rule */
  --rule-strong: #8c7b65;   /* ink/rule-strong = button/fill */
  --paper: #ece2c9;         /* paper/base */
  --dark-text: #e9e4da;
  --btn-pressed: #6e604e;
  --leaf-dur: 480ms; --leaf-gap: 55ms;   /* 넘김 조절값 (개발가이드 §4-4) */
  --cover-dur: 700ms;
}

* { box-sizing: border-box; margin: 0; -webkit-user-select: none; user-select: none; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none; }
html, body { height: 100%; overflow: hidden; background: #000; }
html { touch-action: pan-y; }
button { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }

#stage {
  position: absolute; left: 50%; top: 50%; width: 1920px; height: 1080px; overflow: hidden;
  transform: translate(-50%, -50%) scale(var(--s, 1));
  font-family: 'Noto Serif KR', serif; color: var(--ink);
  perspective: 4000px;
}
.bg { position: absolute; inset: 0; width: 1920px; height: 1080px; }

/* ── S00 표지 ── */
.book {
  position: absolute; top: 67px; width: 545.26px; height: 740px; z-index: 3;
  transform-origin: right center; transform-style: preserve-3d;
  transition: transform 500ms cubic-bezier(.3,.1,.2,1), opacity 400ms;
}
.book[data-diary=juko]   { left: 271px; }
.book[data-diary=simwon] { left: 1103px; }
.book img { position: absolute; left: -58.42px; top: -29.21px; width: 662.1px; height: 856.84px; backface-visibility: hidden; pointer-events: none; }
.book .inside { position: absolute; inset: 0; background: url(../img/page_r.webp) center / 100% 100%; transform: rotateY(180deg); backface-visibility: hidden; transition: opacity 300ms; }
.desc { position: absolute; z-index: 4; font-size: 20px; line-height: 35px; font-weight: 500; letter-spacing: -.2px; color: var(--dark-text); transition: opacity 400ms;
  top: 831px; width: 533px; margin: 0; }   /* 책 기준: 왼쪽 +12, 아래 끝(807) +24, 폭은 책 폭 − 12 */
.desc[data-diary=juko]   { left: 283px; }
.desc[data-diary=simwon] { left: 1115px; }
.book.flip { transition: transform var(--cover-dur) cubic-bezier(.35,.1,.25,1), opacity 300ms; }

/* ── 펼친 화면 ── */
#open { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity 300ms, visibility 0s 300ms; }
#stage.is-open #open { opacity: 1; visibility: visible; transition: opacity 300ms; }
#stage.half .spread-img { clip-path: inset(0 746px 0 0); }   /* 표지가 오른쪽 면에 없을 때 — 책등(x 1060) 오른쪽을 비움 */
#stage.half .page.right { opacity: 0; }
#stage.closing .book-title { opacity: 0; transition: opacity 300ms; }   /* '처음으로' 누르면 제목부터 걷음 */
.spread-img { position: absolute; left: 314px; top: 40px; width: 1492px; height: 1041px; }

.book-title { position: absolute; left: 64px; top: 64px; display: flex; flex-direction: column; gap: 18px; white-space: nowrap; }
.book-title .t { font-size: 58px; line-height: 70px; font-weight: 700; letter-spacing: -.7px; color: var(--dark-text); white-space: normal; word-break: keep-all; max-width: 311px; }   /* 책(x 375) 앞에서 줄바꿈 — '이근오 죽오일기'는 두 줄 */
.book-title .h { align-self: flex-start; height: 38px; }   /* 한자는 Figma 붓글씨 서체를 이미지로 (서체 파일 없음) */

.round { position: absolute; left: 1776px; top: 64px; width: 80px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.round .circle { width: 80px; height: 80px; border-radius: 40px; background: var(--rule-strong); display: flex; align-items: center; justify-content: center; }
.round:active .circle, .bk:active .circle { background: var(--btn-pressed); }
.round .label { font-size: 15px; line-height: 20px; font-weight: 500; color: var(--dark-text); white-space: nowrap; }

.spread { position: absolute; left: 375px; top: 64px; width: 1120px; height: 760px; transform: scale(1.2223); transform-origin: 0 0; perspective: 5000px; }
.page { position: absolute; top: 0; width: 560px; height: 760px; }
.page.left { left: 0; }
.page.right { left: 560px; }
/* 주의: .page > .content 처럼 쓰면 잎에 복제한 내용에 스타일이 안 먹는다. 클래스만으로 쓴다 */
.content { position: absolute; left: 50px; top: 48px; width: 460px; height: 672px; display: flex; flex-direction: column; gap: 8px; }
/* 뒤로가기: 왼쪽 면 머리 오른쪽. 원 60 · 누르는 영역 80 (화면 px, 책 안이라 ÷1.2223) */
.bk { position: absolute; right: -8.18px; top: -8.18px; width: 65.45px; height: 65.45px; display: flex; align-items: center; justify-content: center; }
.bk .circle { width: 49.09px; height: 49.09px; border-radius: 50%; background: var(--rule-strong); display: flex; align-items: center; justify-content: center; }
.bk + .ph, .bk + .tight > .ph { padding-right: 57px; }
.spacer { height: 32px; flex: none; }
.tight { flex: none; display: flex; flex-direction: column; }

/* PageHeader */
.ph { flex: none; display: flex; gap: 10px; align-items: baseline; padding-bottom: 20px; border-bottom: 1px solid var(--rule-strong); }
.ph .t { font-size: 32px; line-height: 42px; font-weight: 700; letter-spacing: -.5px; }
.ph .h { font-size: 20px; line-height: 26px; font-weight: 500; white-space: nowrap; }

/* ListItem */
.li { flex: none; width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 32px; border-bottom: 1px solid var(--rule); }
.li .tx { display: flex; align-items: center; flex-wrap: wrap; column-gap: 14px; }
.li .n { font-size: 22px; line-height: 31px; font-weight: 600; letter-spacing: -.3px; }
.li .m { font-size: 16px; line-height: 22px; font-weight: 400; white-space: nowrap; }
.li .ck { display: none; flex: none; }
.li.sel { background: var(--rule-strong); color: var(--dark-text); }
.li.sel .ck { display: block; }
.grid { display: grid; grid-template-columns: 1fr 1fr; column-gap: 16px; }

/* 목차 스크롤 */
.scroll { position: relative; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.scroll::-webkit-scrollbar { display: none; }
.hint { flex: none; height: 52px; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 20px; line-height: 28px; font-weight: 600; visibility: hidden; }
.hint.on { visibility: visible; }
.hint.on svg { animation: hint-bob 1.6s ease-in-out infinite; }
@keyframes hint-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(2px); } }   /* 위아래 4px */
.sbar { position: absolute; left: 473px; width: 6px; border-radius: 3px; pointer-events: none; }
.sbar::before { content: ''; position: absolute; inset: 0; border-radius: 3px; background: var(--ink); opacity: .3; }
.sbar i { position: absolute; left: 0; width: 6px; border-radius: 3px; background: var(--ink); }

/* TocGroup · TocRow · DateHeader */
.tg { display: flex; align-items: center; gap: 12px; padding: 20px 0 4px; }
.tg b { font-size: 17px; line-height: 24px; font-weight: 700; white-space: nowrap; }
.tg i { flex: 1; height: 1px; background: var(--rule); }
.row { display: flex; flex-direction: column; gap: 10px; padding: 12px 0; border-bottom: 1px dashed var(--rule); }
.dh { display: flex; flex-direction: column; gap: 4px; }
.dh .dr { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 10px; }
.dh .d { display: flex; align-items: center; gap: 6px; font-size: 18px; line-height: 25px; font-weight: 600; white-space: nowrap; }
.dh .d::before { content: ''; width: 8px; height: 8px; border-radius: 4px; background: var(--ink); } /* Icon/Heugeomi */
.dh .d > span { align-self: baseline; }   /* 줄의 기준선은 점이 아니라 날짜 글자에서 */
.dh .s, .dh .w, .intro { font-size: 15px; line-height: 24px; font-weight: 400; }
.body p { font-size: 16px; line-height: 22px; font-weight: 400; white-space: pre-line; }
.body b { font-weight: 700; }
.intro { padding: 12px 0; border-bottom: 1px dashed var(--rule); white-space: pre-line; }

/* ChartPanel */
.chart { flex: none; margin-top: 40px; display: flex; flex-direction: column; gap: 10px; }
.chart .ct { display: flex; gap: 8px; align-items: baseline; }
.chart .ct b { font-size: 17px; line-height: 24px; font-weight: 700; }
.chart .ct span, .chart text { font-size: 12px; line-height: 16px; }
.chart .ct span { opacity: .8; }
.chart svg { display: block; overflow: visible; }
.chart text { fill: var(--ink); fill-opacity: .8; font-family: 'Noto Serif KR', serif; }
.chart text.hl { font-size: 18px; font-weight: 600; fill-opacity: 1; paint-order: stroke; stroke: var(--paper); stroke-width: 4px; stroke-linejoin: round; }

/* 넘김 잎: .leaf(= 첫 띠)가 제본선을 축으로 돌고, 안에 이어 붙인 띠들이 조금씩 더 꺾여 휜다 */
.leaves { position: absolute; inset: 0; transform-style: preserve-3d; pointer-events: none; --bend: -5deg; }   /* 띠 하나가 더 꺾이는 각도. 클수록 많이 휨 */
.leaves.reverse { --bend: 5deg; }
.strip {
  position: absolute; top: 0; left: calc(-1 * var(--w)); width: var(--w); height: 760px;
  transform-style: preserve-3d; transform-origin: right center;
  animation: leaf-bend var(--leaf-dur) cubic-bezier(.35,.1,.25,1) calc(var(--i) * var(--leaf-gap)) both;
}
.leaves.reverse .strip { left: var(--w); transform-origin: left center; }
.leaf { left: calc(560px - var(--w)); animation-name: leaf-fwd; }
.leaves.reverse .leaf { left: 560px; animation-name: leaf-back; }
/* 좌우 -.5px: 띠끼리 1px 겹쳐 이음매 틈을 없앰 */
.strip > .front, .strip > .back { position: absolute; inset: 0 -.5px; overflow: hidden; backface-visibility: hidden; }
.strip > .back { transform: rotateY(180deg); }
.pg { position: absolute; top: 0; width: 560px; height: 760px; background: url(../img/page_l.webp) center / 100% 100%; }
.back > .pg, .leaves.reverse .front > .pg { background-image: url(../img/page_r.webp); }
.leaves.reverse .back > .pg { background-image: url(../img/page_l.webp); }
@keyframes leaf-fwd  { from { transform: rotateY(0) translateZ(var(--z)); } to { transform: rotateY(180deg)  translateZ(var(--z)); } }
@keyframes leaf-back { from { transform: rotateY(0) translateZ(var(--z)); } to { transform: rotateY(-180deg) translateZ(var(--z)); } }
@keyframes leaf-bend { 0%, 100% { transform: rotateY(0); } 45% { transform: rotateY(var(--bend)); } }