/* 「한 편의 환생극」(2026-10-05) — 결과를 다섯 막 + 환생록 책으로. 막 틀은 theatre.mjs, 내용은 기존 요소 그대로.
   각 막: 장면 그림(조직 전경·생업 일터, v7 화풍 생성, 인물 없음)이 한 화면을 채우고, 그 아래에서 한지 판이 떠오른다. */

/* ── 종이 한 장이던 결과를 무대로 ─────────────────────────── */
.life-result.theatre{max-width:none;width:100vw;margin:0 0 0 calc(50% - 50vw);padding:0;background:none!important;box-shadow:none;border:0;border-image:none!important;color:var(--shell-text,#e9e1cf);position:relative}
/* 막 맞물림 스크롤(scroll-snap)은 쓰지 않는다: 화면을 막 시작점으로 도로 당기며 위 메뉴가 나타나자마자 다시 숨었다(2026-10-06 사용자 보고) */

/* ── 막 ─────────────────────────────────────────────────── */
.act{position:relative;isolation:isolate;min-height:100svh;display:grid;align-content:start;justify-items:center;
 padding:clamp(150px,34svh,320px) 16px clamp(80px,12svh,140px)}
.act[hidden]{display:none}
/* 장면은 한 화면 높이만 그리고 아래로 밤빛에 녹인다(판이 길어도 그림이 늘어나지 않게) */
.act__bg{position:absolute;inset:0 0 auto 0;height:min(100%,112svh);z-index:-1;overflow:hidden;pointer-events:none;background:var(--bg,#141a18)}
.act__bg img,.act__bg video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 42%}
.act__bg img{scale:1.06;transition:scale 2.4s cubic-bezier(.2,.7,.2,1),filter 1.2s}
.act.is-in .act__bg img{scale:1}
.act__bg video{opacity:0;transition:opacity 1.2s}
.act__bg.is-moving video{opacity:1}
.act__bg::after{content:'';position:absolute;inset:0;
 background:linear-gradient(180deg,var(--bg,#141a18) 0,#141a1800 16%,#141a1800 46%,#141a18cc 78%,var(--bg,#141a18) 100%),
 radial-gradient(120% 90% at 50% 40%,transparent 50%,#0b100ecc 100%)}
/* 그림 없는 막(마음과 사연)은 먹 번짐만 */
.act--heart .act__bg:not(:has(img)){background:radial-gradient(70% 50% at 50% 24%,#2b3a33 0,transparent 70%),var(--bg,#141a18)}
.act--keep .act__bg img{filter:brightness(.55) saturate(.8)}

/* 한지 판 */
.act__sheet{position:relative;width:min(920px,100%);box-sizing:border-box;background-color:var(--paper);background-image:var(--paper-grain);background-size:320px 320px;
 color:var(--ink);padding:44px 56px 40px;box-shadow:0 40px 120px #000a,0 2px 0 #fff3 inset;
 border:11px solid transparent;border-image:var(--brush-frame-ink) var(--frame-slice,80) / 11px / 4px stretch}
.act__sheet>:first-child+*{margin-top:0}
/* 막 머리: 판 위 왼쪽에 큰 붓 글자 하나와 막 이름 */
.act__mark{position:absolute;left:-6px;top:0;translate:0 -100%;margin:0;padding-bottom:10px;display:flex;align-items:baseline;gap:12px;pointer-events:none}
.act__mark b{font:400 clamp(46px,7vw,72px)/1 'Hanja Brush','Song Myung',serif;color:#efe2c2;text-shadow:0 4px 24px #000c}
.act__mark span{font:500 13px/1 var(--sans);letter-spacing:.42em;color:#e9dcbd;text-shadow:0 2px 10px #000}

/* 막에 들어오면: 판이 아래에서 떠오르며 번짐이 걷힌다(막마다 한 번) */
/* (검수) 흐림이 크면 떠오르는 중간 프레임이 빈 화면처럼 보였다 — 흐림·거리·시간을 줄였다 */
.act .act__sheet,.act .act__mark{transition:opacity .7s cubic-bezier(.2,.7,.2,1),translate .7s cubic-bezier(.2,.7,.2,1),filter .7s}
.act:not(.is-in) .act__sheet{opacity:0;translate:0 28px;filter:blur(3px)}
.act:not(.is-in) .act__mark{opacity:0;translate:-24px -100%}
.act.is-in .act__mark{transition-delay:.18s}

/* ── 막별 ───────────────────────────────────────────────── */
/* 壹막 소속 문장: 붓 무대가 내려앉기 전에는 비워 두고, 내려앉으면 먹이 스미듯 드러난다 */
.reveal-place svg{transition:opacity .5s,scale .5s cubic-bezier(.2,.7,.2,1)}
.reveal-place svg.is-awaiting{opacity:0;scale:.6}
.reveal-place svg.is-landed{animation:org-landed .9s cubic-bezier(.2,.7,.2,1)}
@keyframes org-landed{0%{scale:1.6;filter:drop-shadow(0 0 10px #c4604c)}100%{scale:1;filter:none}}
/* (검수) 관주의 말이 판의 한지와 같은 색이라 말풍선이 묻혔다 — 한 톤 짙은 한지로 */
.act__sheet .narrator-bubble{background-color:color-mix(in srgb,var(--paper) 86%,#8a7449)}
/* 壹: 판 위 첫 줄(모드·다시 짚기)은 그대로, 관주의 말이 판의 머리 */
.act--awaken .result-topline{margin-top:0}
/* 肆: 목패가 주인공 — 판은 투명한 진열대, 안내만 한지 */
.act--hopae .act__sheet{background:none;box-shadow:none;border-image:none;border-color:transparent;color:var(--shell-text,#e9e1cf);padding:0}
.keep-hopae{display:grid;grid-template-columns:minmax(260px,400px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:center}
.keep-hopae .token-peek{width:100%;margin:0}
/* 앞면·입체·측면·뒷면·확대 단추는 결과 화면에서 뺀다(2026-10-06 사용자 지시 "이거 없애 구려"). 끌어서 돌려 보기는 그대로 */
.act--hopae .hopae-view-controls{display:none}
.keep-hopae .token-peek.has-hopae-3d{width:100%}
.keep-hopae #life-hopae-guide{background-color:var(--paper);background-image:var(--paper-grain);background-size:320px 320px;color:var(--ink);padding:26px 28px;
 border:9px solid transparent;border-image:var(--brush-frame-ink) var(--frame-slice,80) / 9px / 3px stretch;box-shadow:0 30px 80px #0009}
.keep-hopae #life-hopae-guide:empty{display:none}
/* 伍: 간직과 두 개의 문 */
.act--keep .keep-ending{margin:0;padding:0 0 28px;border:0;border-image:none!important;display:block;background:none}
.book-doors{display:grid;grid-template-columns:1.3fr 1fr;gap:14px;padding-top:26px;border-top:1px solid var(--line)}
.book-door{position:relative;display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:16px;row-gap:4px;align-items:center;text-align:left;
 padding:20px 22px;background:none;color:var(--ink);cursor:pointer;border:10px solid transparent;border-image:var(--brush-frame-ink) var(--frame-slice,80) / 10px / 3px stretch;
 transition:background-size .35s,translate .25s}
.book-door b{grid-row:1/3;font:400 clamp(34px,4.6vw,46px)/1 'Hanja Brush','Song Myung',serif;color:var(--red)}
.book-door span{font:600 19px/1.3 var(--serif)}
.book-door small{font:400 12.5px/1.6 var(--sans);color:var(--paper-label2,#6f6a5c)}
.book-door:not(.is-record){background:var(--brush-swash-gold) center/0% 120% no-repeat}
.book-door:hover,.book-door:focus-visible{translate:0 -2px;outline:none}
.book-door:not(.is-record):hover,.book-door:not(.is-record):focus-visible{background-size:108% 120%}
.book-door.is-record b{color:var(--ink)}
.book-door[hidden]{display:none}
.book-doors:has(.book-door[hidden]){grid-template-columns:1fr}

/* ── 막 표시(오른쪽 세로 · 좁은 화면은 아래 가로) ─────────── */
.act-rail{position:fixed;right:max(12px,env(safe-area-inset-right));top:50%;translate:0 -50%;z-index:40;display:flex;flex-direction:column;gap:4px;
 padding:8px 6px;background:#0b100ecc;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:1px solid #d8c89a33}
.act-rail button{position:relative;display:grid;place-items:center;width:38px;height:38px;padding:0;border:0;background:none;color:#a8ab98;cursor:pointer}
.act-rail b{font:400 19px/1 'Hanja Brush','Song Myung',serif}
.act-rail span{position:absolute;right:calc(100% + 10px);top:50%;translate:0 -50%;white-space:nowrap;font:500 12px/1 var(--sans);letter-spacing:.12em;color:#efe2c2;
 background:#0b100ee6;padding:7px 10px;opacity:0;pointer-events:none;transition:opacity .2s}
.act-rail button:hover span,.act-rail button:focus-visible span,.act-rail button[aria-current] span{opacity:1}
.act-rail button[aria-current]{color:#f3e3b8;background:var(--brush-swash-red) center/120% 80% no-repeat}
.act-rail button[data-go=book]{margin-top:6px;border-top:1px solid #d8c89a33;color:#d8c89a}
html.is-book .act-rail button[data-go=book]{color:#f3e3b8;background:var(--brush-swash-red) center/120% 80% no-repeat}
/* 환생록 장 레일은 책에서만, 막 표시는 무대에서 장 레일과 겹치지 않게 */
html.is-theatre:not(.is-book) :is(.chapter-rail,.rail-toggle){display:none!important}
html.is-book .act-rail{top:auto;bottom:24px;translate:0 0}
html.is-book .act-rail button:not([data-go=book]){display:none}
html.is-book .act-rail button[data-go=book] span{opacity:1}

/* ── 환생록 책 ──────────────────────────────────────────── */
.book{width:min(920px,calc(100% - 32px));box-sizing:border-box;margin:28px auto 96px;background-color:var(--paper);background-image:var(--paper-grain);background-size:320px 320px;
 color:var(--ink);padding:0 56px 40px;box-shadow:0 30px 100px #000b;border:11px solid transparent;border-image:var(--brush-frame-ink) var(--frame-slice,80) / 11px / 4px stretch;
 animation:book-open .7s cubic-bezier(.2,.7,.2,1) both}
.book[hidden]{display:none}
@keyframes book-open{from{opacity:0;translate:0 30px;clip-path:inset(0 0 100% 0)}to{opacity:1;translate:0 0;clip-path:inset(0 0 0 0)}}
.book__bar{position:sticky;top:0;z-index:5;display:flex;justify-content:space-between;align-items:center;gap:16px;margin:0 -56px 26px;padding:14px 56px;
 background-color:var(--paper);background-image:var(--paper-grain);background-size:320px 320px;border-bottom:1px solid var(--line)}
.book__title{font:400 18px/1.2 'Hanja Brush','Song Myung',var(--serif);color:var(--red);letter-spacing:.06em}
.book .flow-deeper{margin-top:40px}
/* 책에서는 강호 기록이 늘 펼쳐져 있다 — 펼치기 단추는 뺀다(2026-10-06 사용자 지시) */
.book #pane-record>summary{display:none}

/* ── 서막: 이런 강호에서 눈을 뜹니다 ────────────────────── */
.welcome-orgs{margin:0 0 clamp(36px,6vw,64px)}
.welcome-orgs__head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;margin-bottom:16px}
.welcome-orgs__head h2{margin:0;font:400 clamp(24px,3.4vw,34px)/1.25 var(--brush-display,'Song Myung'),serif;color:#f1e6c9}
.welcome-orgs__head p{margin:0;font:500 12px/1.5 var(--sans);color:var(--shell-small,#86918a)}
.welcome-orgs__track{display:grid;grid-auto-flow:column;grid-auto-columns:clamp(150px,22vw,220px);gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:10px;
 scrollbar-width:thin;scrollbar-color:#d8c89a55 transparent}
.welcome-orgs__track figure{margin:0;scroll-snap-align:start;position:relative;aspect-ratio:3/4;overflow:hidden;background:#0d1311}
.welcome-orgs__track img{width:100%;height:100%;object-fit:cover;transition:scale .6s cubic-bezier(.2,.7,.2,1),filter .6s;filter:brightness(.82) saturate(.9)}
.welcome-orgs__track figure:hover img{scale:1.06;filter:none}
.welcome-orgs__track figcaption{position:absolute;inset:auto 0 0 0;padding:28px 12px 12px;background:linear-gradient(180deg,transparent,#0b100ef0);
 font:500 14px/1.2 var(--serif);color:#f1e6c9;letter-spacing:.06em}

/* ── 좁은 화면 ─────────────────────────────────────────── */
@media (max-width:760px){
 .act{padding:clamp(120px,40svh,300px) 10px 64px}
 /* 장면 그림이 없는(못 받은) 막은 막 이름이 들어갈 자리만 비운다(2026-10-06 사용자 보고: 參막 위가 텅 빔) */
 .act:has(> .act__bg:not(:has(img))){padding-top:96px}
 .act__bg{height:min(100%,78svh)}
 .act__sheet{padding:30px 18px 26px;border-width:8px;border-image-width:8px}
 .act__mark{left:4px}
 .keep-hopae{grid-template-columns:1fr;justify-items:center}
 .keep-hopae .token-peek{width:min(300px,86vw)}
 .keep-hopae #life-hopae-guide{padding:20px 16px;width:100%;box-sizing:border-box}
 .book-doors{grid-template-columns:1fr}
 .welcome-orgs__head{flex-direction:column;align-items:center;gap:6px;text-align:center}
 .book{width:calc(100% - 16px);padding:0 16px 30px;margin-top:12px}
 .book__bar{margin:0 -16px 20px;padding:12px 60px 12px 16px}
 .act-rail{top:auto;bottom:max(10px,env(safe-area-inset-bottom));right:50%;translate:50% 0;flex-direction:row;padding:4px 6px}
 .act-rail button{width:40px;height:36px}
 .act-rail span{display:none}
 .act-rail button[data-go=book]{margin:0 0 0 6px;border-top:0;border-left:1px solid #d8c89a33}
 html.is-book .act-rail{bottom:max(10px,env(safe-area-inset-bottom));right:16px;translate:0 0}
}