/* 본문 서체: 부크크 명조(라공 10-15). 보통 400·굵게 700 */
@font-face{font-family:'BookkMyungjo';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/BookkMyungjo-Lt.woff2') format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'BookkMyungjo';src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2302@1.0/BookkMyungjo-Bd.woff2') format('woff2');font-weight:700;font-display:swap}
/* 세계관 페이지(lore.php) 스타일 */
:root{--paper:rgba(250,248,243,.70);--ink:#26292a;--ink2:#5d6262;--acc:#2f6f73;--veil:rgba(244,243,238,.55);--fogc:255,255,255}
:root[data-theme=dark]{--paper:rgba(18,22,25,.78);--ink:#e5e6e1;--ink2:#a7aeac;--acc:#8cc4c3;--veil:rgba(14,18,21,.55);--fogc:30,36,40}
*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#dfe3e1;color:var(--ink);font-family:"BookkMyungjo","Noto Serif KR",serif}
:root[data-theme=dark] body{background:#101416}
.stage{position:fixed;inset:0}
.pg{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;opacity:0;visibility:hidden;transition:opacity 1.1s ease,visibility 0s linear 1.1s}
.pg.on{opacity:1;visibility:visible;transition:opacity 1.1s ease}
.bg{position:absolute;inset:-4%;background-size:cover;transform:scale(1.08);filter:saturate(.8) blur(4px)}
.pg.on .bg{animation:drift 22s ease-out forwards}
@keyframes drift{from{transform:scale(1.12) translate3d(0,1%,0)}to{transform:scale(1.02) translate3d(0,-1%,0)}}
.pg::after{content:"";position:absolute;inset:0;background:var(--veil);pointer-events:none}
.k-cover::after,.k-title::after{background:linear-gradient(to bottom,rgba(0,0,0,0) 30%,var(--veil))}
.fog{position:absolute;inset:-20%;z-index:1;pointer-events:none;opacity:.55;background:
 radial-gradient(40% 30% at 20% 30%,rgba(var(--fogc),.9),transparent 70%),
 radial-gradient(35% 25% at 80% 60%,rgba(var(--fogc),.8),transparent 70%),
 radial-gradient(50% 30% at 50% 90%,rgba(var(--fogc),.9),transparent 70%);filter:blur(30px);animation:fogmove 30s ease-in-out infinite alternate}
@keyframes fogmove{from{transform:translate3d(-4%,0,0)}to{transform:translate3d(4%,-2%,0)}}
/* 넘김 때 지나가는 안개 */
.sweep{position:fixed;inset:-30%;z-index:20;pointer-events:none;opacity:0;background:radial-gradient(closest-side,rgba(var(--fogc),.95),rgba(var(--fogc),.7) 60%,transparent);filter:blur(40px)}
.sweep.go{animation:sweep 1.4s ease forwards}
@keyframes sweep{0%{opacity:0;transform:translate3d(-30%,0,0)}45%{opacity:.85}100%{opacity:0;transform:translate3d(30%,0,0)}}
.pg>*:not(.bg):not(.fog){position:relative;z-index:2}
.ln{opacity:0;transform:translateY(14px);transition:opacity .9s ease,transform .9s ease}
.pg.on .ln{opacity:1;transform:none}
.pg.on .ln:nth-child(2){transition-delay:.25s}.pg.on .ln:nth-child(3){transition-delay:.5s}.pg.on .ln:nth-child(4){transition-delay:.75s}.pg.on .ln:nth-child(5){transition-delay:1s}.pg.on .ln:nth-child(6){transition-delay:1.25s}.pg.on .ln:nth-child(7){transition-delay:1.5s}
.cover{text-align:center;color:var(--ink)}.cover small{letter-spacing:.45em;font-size:12px;color:var(--ink2)}
.cover h1{margin:18px 0 12px;font-size:clamp(44px,9vw,88px);font-weight:600;letter-spacing:.14em}.cover p{margin:0;color:var(--ink2);letter-spacing:.2em}
.hint{display:block;margin-top:56px;font:12px system-ui;letter-spacing:.2em;color:var(--ink2);animation:bob 2.4s ease-in-out infinite}@keyframes bob{50%{transform:translateY(6px)}}
.intro{max-width:600px;padding:0 24px;text-align:center;word-break:keep-all}.intro p{font-size:clamp(16px,2.2vw,19px);line-height:2.2;margin:0 0 .9em}
.ctitle{text-align:center}.ctitle small{display:block;font:600 12px system-ui;letter-spacing:.5em;color:var(--acc);margin-bottom:18px}
.ctitle h2{margin:0;font-size:clamp(34px,7vw,64px);font-weight:600;letter-spacing:.1em}
.ctitle h2,.cover h1{animation:none}.pg.on .ctitle h2,.pg.on .cover h1{animation:rise 1.6s ease both}@keyframes rise{from{opacity:0;letter-spacing:.35em;filter:blur(6px)}to{opacity:1;filter:none}}
.end h2{font-size:clamp(26px,5vw,44px)}.go{display:inline-block;margin-top:36px;padding:10px 22px;border:1px solid var(--ink2);border-radius:999px;color:var(--ink);text-decoration:none;font:14px system-ui;letter-spacing:.1em}
.panel{max-width:620px;margin:0 auto;padding:44px 48px;background:var(--paper);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-radius:2px;box-shadow:0 30px 80px -40px rgba(0,0,0,.45)}
.k-region .panel{margin:0 auto}
.panel p{font-size:16.5px;line-height:2.05;margin:0 0 1.05em;word-break:keep-all;text-align:justify}.panel p:last-child{margin:0}
.panel .ttl{font:600 12px system-ui;letter-spacing:.3em;color:var(--acc);margin-bottom:22px}
.panel h3{margin:0 0 22px;font-size:26px;font-weight:600}.panel h3 small{display:block;font:600 11px system-ui;letter-spacing:.35em;color:var(--acc);margin-bottom:10px}
/* 고정 UI */
.ui{position:fixed;left:0;right:0;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:16px 22px;font:12px system-ui;color:var(--ink2);pointer-events:none}
.ui>*{pointer-events:auto}.ui .now{letter-spacing:.15em}.ui .sp{flex:1}
.ui button{padding:6px 12px;border:1px solid rgba(127,127,127,.35);border-radius:999px;background:var(--paper);color:var(--ink2);font:12px system-ui;cursor:pointer}
.bar{position:fixed;left:0;right:0;bottom:0;z-index:30;display:flex;gap:4px;padding:0 22px 18px}
.bar button{padding:0;border:0;flex:1;height:3px;border-radius:2px;background:rgba(127,127,127,.28);position:relative;cursor:pointer}
.bar button i{position:absolute;inset:0;width:0;background:var(--acc);border-radius:2px;transition:width .6s ease}
.bar button span{position:absolute;bottom:10px;left:0;font:11px system-ui;color:var(--ink2);white-space:nowrap;opacity:0;transition:opacity .2s}.bar button:hover span,.bar button:focus-visible span{opacity:1}
.nav{position:fixed;right:18px;bottom:46px;z-index:30;display:flex;gap:6px}.nav button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(127,127,127,.35);background:var(--paper);color:var(--ink);font-size:16px;cursor:pointer}
@media(max-width:720px){.panel,.k-region .panel{margin:0 16px;max-width:none;width:calc(100% - 32px);max-height:calc(100vh - 140px);max-height:calc(100dvh - 140px);overflow:auto;padding:30px 22px;border-radius:4px}.pg{align-items:center}.k-cover,.k-title,.k-intro,.k-end{align-items:center}.panel p{font-size:15.5px;text-align:justify;word-break:normal}.ui .now{display:none}}
@media(prefers-reduced-motion:reduce){.pg.on .bg,.fog,.hint,.sweep.go,.pg.on .ctitle h2,.pg.on .cover h1{animation:none}.ln{transition:none}}
.ctitle h2{word-break:keep-all;padding:0 20px}
.ui button:focus-visible,.nav button:focus-visible,.bar button:focus-visible,.go:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.bar button:focus-visible{height:5px}
.k-cover .go{margin-top:40px}
@media(max-width:380px){.panel,.k-region .panel{margin:0 12px;width:calc(100% - 24px);padding:24px 18px}.panel p{font-size:15px;line-height:1.95}.panel h3{font-size:22px}.cover h1{letter-spacing:.06em}.intro{padding:0 16px}.ui{padding:12px 14px}.bar{padding:0 14px 16px}.nav{right:12px}.ui button{padding:5px 10px}}
.bar button::before{content:"";position:absolute;inset:-12px 0}
/* 어두운 테마: 표지·절 제목·끝 장면도 그림 전체를 덮어 밝은 하늘 위 작은 글씨가 묻히지 않게 한다 */
:root[data-theme=dark] .k-cover::after,:root[data-theme=dark] .k-title::after,:root[data-theme=dark] .k-end::after{background:linear-gradient(to bottom,rgba(14,18,21,.62),rgba(14,18,21,.8))}
:root[data-theme=dark] .cover small,:root[data-theme=dark] .cover p,:root[data-theme=dark] .hint,:root[data-theme=dark] .ctitle small,:root[data-theme=dark] .ui .now{color:#c9cfcd;text-shadow:0 1px 8px rgba(0,0,0,.75)}
:root[data-theme=dark] .cover h1,:root[data-theme=dark] .ctitle h2{text-shadow:0 2px 18px rgba(0,0,0,.55)}
/* 넓은 화면(1100px 이상): 본문 판을 화면 가운데에 둔다. 같은 절의 연속 본문 두 장은 lore.js가 한 장면의 양면(.k-spread)으로 합친다 */
@media(min-width:1100px){
.k-text .panel,.k-region .panel{margin:0 auto;width:min(52vw,700px);max-width:none;padding:80px 60px;max-height:88vh;overflow:auto}
.panel p{font-size:clamp(16.5px,1.1vw,18.5px)}
.k-spread{display:grid;grid-template-columns:repeat(2,min(40vw,640px));justify-content:center;align-content:center;align-items:stretch;gap:2.5vw}
.k-spread .panel{margin:0;width:auto;max-height:88vh;padding:44px 44px}
.k-spread .panel p{line-height:2}
/* 양면: 왼쪽 판이 먼저, 오른쪽 판은 0.4초 늦게 떠오른다 */
.pg.on .p2 .ln{transition-delay:.4s}.pg.on .p2 .ln:nth-child(2){transition-delay:.65s}.pg.on .p2 .ln:nth-child(3){transition-delay:.9s}.pg.on .p2 .ln:nth-child(4){transition-delay:1.15s}.pg.on .p2 .ln:nth-child(5){transition-delay:1.4s}.pg.on .p2 .ln:nth-child(6){transition-delay:1.65s}.pg.on .p2 .ln:nth-child(7){transition-delay:1.9s}
}