/* 멈춰 선 엘리베이터 (11~12차시): 엘리베이터 인테리어 UI. 짙은 유리 패널 + 브러시드 스틸 + 호출 버튼 + 호박색 LED 층 표시창.
   고정 무대 1920×1080을 화면에 맞춰 늘리고(스크롤 없음), Paperlogy 글꼴을 쓴다. */
@font-face{font-family:Paperlogy;src:url(../fonts/Paperlogy-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Paperlogy;src:url(../fonts/Paperlogy-700.woff2) format('woff2');font-weight:700;font-display:swap}
@font-face{font-family:Paperlogy;src:url(../fonts/Paperlogy-800.woff2) format('woff2');font-weight:800;font-display:swap}
:root{--g0:#070a14;--g1:#0e1322;--g2:#161d34;--g3:#222b4a;--glass:rgba(13,18,34,.82);--line:rgba(130,205,255,.38);--steel1:#eef2f8;--steel2:#b9c4d6;--steel3:#7a869b;--cyan:#38e1ff;--cyan2:#0fa3c4;--amber:#ffb629;--amber2:#ffdc82;--pink:#ff62ab;--good:#33e39d;--bad:#ff6c78;--tx:#eaf1ff;--sub:#9fb1d6;--ink:#0b0f1d;--paper:#f6f3ea;--r:22px}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#04060d;font-family:Paperlogy,'Malgun Gothic',sans-serif;font-weight:500;color:var(--tx);word-break:keep-all;overflow-wrap:break-word;-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
img{display:block;max-width:100%}
#stage{position:fixed;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;overflow:hidden;background:var(--g0);font-size:30px;line-height:1.5}
[hidden]{display:none!important}
b,strong{font-weight:800}
.dim{color:var(--sub)}
.lbl{display:block;font-size:22px;font-weight:800;color:var(--amber);letter-spacing:.04em;margin-bottom:4px}
.who{color:var(--cyan);font-weight:800}.jimun{color:var(--amber2);font-weight:700}
.led{font-family:Paperlogy,'Malgun Gothic',sans-serif;font-weight:800;letter-spacing:.05em}

/* ── 버튼 · 입력 ── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:64px;padding:8px 36px;border-radius:14px;background:linear-gradient(#ffe39a,#ffb629);color:#1b1300;font-size:28px;font-weight:800;border:2px solid #fff3c9;box-shadow:0 5px 0 #9a6200,0 0 22px rgba(255,182,41,.35);transition:transform .08s,box-shadow .08s,filter .1s}
.btn:hover:not(:disabled){filter:brightness(1.08);transform:translateY(-2px)}
.btn:active:not(:disabled){transform:translateY(4px);box-shadow:0 1px 0 #9a6200}
.btn:disabled{background:#2a3250;color:#6a7597;border-color:#3a4468;box-shadow:none;cursor:not-allowed}
.btn.line{background:rgba(255,255,255,.06);color:var(--steel1);border:2px solid var(--steel3);box-shadow:none}
.btn.line:hover:not(:disabled){background:rgba(255,255,255,.14)}
.btn.blue,.btn.mint{background:linear-gradient(#8cf0ff,#1fc8ee);color:#04222b;border-color:#d4faff;box-shadow:0 5px 0 #0a7a96,0 0 22px rgba(56,225,255,.4)}
.btn.red,.btn.go{background:linear-gradient(#ff9ccb,#ff4f9d);color:#2a0716;border-color:#ffe0ef;box-shadow:0 5px 0 #a3235f,0 0 22px rgba(255,98,171,.35)}
.btn.sm{min-height:50px;font-size:22px;padding:4px 24px}
.field{width:100%;font:inherit;font-size:30px;padding:12px 22px;border-radius:14px;border:2px solid var(--steel3);background:#050811;color:#fff;outline:none;box-shadow:inset 0 3px 8px rgba(0,0,0,.6)}
.field::placeholder{color:#5f6c92}
.field:focus{border-color:var(--cyan);box-shadow:inset 0 3px 8px rgba(0,0,0,.6),0 0 0 4px rgba(56,225,255,.28)}
.field.area{resize:none;height:150px;line-height:1.55}
.shake{animation:shake .4s}
@keyframes shake{20%{transform:translateX(-9px)}40%{transform:translateX(9px)}60%{transform:translateX(-6px)}80%{transform:translateX(6px)}}
.pill{display:inline-block;padding:2px 18px;border-radius:10px;font-size:21px;font-weight:800;background:var(--g3);border:2px solid var(--line);color:var(--tx)}
.pill.b{background:rgba(56,225,255,.14);border-color:var(--cyan);color:#bff5ff}.pill.r{background:var(--amber);border-color:var(--amber2);color:#1b1300}.pill.g{background:var(--steel2);border-color:var(--steel1);color:#10192c}
.glass,.rc{position:relative;background:var(--glass);border:2px solid var(--line);border-radius:var(--r);padding:16px 26px 18px;box-shadow:0 10px 26px rgba(0,0,0,.35)}
.rc .lab{display:block;font-size:20px;font-weight:800;color:var(--amber);letter-spacing:.1em;margin-bottom:4px}

/* ── 안내 말풍선(보리) ── */
.dlg{position:relative;background:linear-gradient(#1b2342,#121830);color:var(--tx);border:2px solid var(--cyan);margin:10px 8px;padding:18px 24px 16px;font-size:27px;line-height:1.55;border-radius:18px;box-shadow:0 0 22px rgba(56,225,255,.25)}
.dlg .nm{position:absolute;top:-20px;left:18px;background:var(--amber);color:#1b1300;font-size:21px;font-weight:800;padding:0 16px;border-radius:8px}

/* ═════ 표지: 계단 장면 + 호출 패널 ═════ */
#cover{position:absolute;inset:0;background:linear-gradient(rgba(4,6,13,.1),rgba(4,6,13,.55)),url(../images/cover.webp) center/cover #0b1026}
.cvTitle{position:absolute;left:760px;right:50px;top:150px;display:flex;flex-direction:column;align-items:center;gap:8px}
.titlewrap{margin:0}
.titleimg{max-height:230px;width:auto;filter:drop-shadow(0 8px 14px rgba(0,0,0,.65));animation:titleIn 1.4s ease-out both}
@keyframes titleIn{0%{opacity:0;transform:translateY(-30px) scale(.96);filter:brightness(.4) drop-shadow(0 8px 14px rgba(0,0,0,.65))}60%{opacity:1}100%{opacity:1;transform:none}}
.cvsub{display:inline-block;padding:4px 30px;border-radius:12px;background:#04070f;border:2px solid #3a4468;color:var(--amber);font-size:30px;text-shadow:0 0 10px rgba(255,182,41,.8);letter-spacing:.12em;animation:fadeUp .8s ease-out 1s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.callpanel{position:absolute;right:50px;bottom:40px;width:1000px;display:grid;grid-template-columns:230px 1fr;gap:26px;align-items:center;padding:20px 30px;border-radius:26px;background:linear-gradient(145deg,#d9e0eb,#9aa6ba 45%,#cdd6e4 60%,#8793a8);border:3px solid #eef2f8;box-shadow:0 0 0 3px #1b2236,0 24px 50px rgba(0,0,0,.6),inset 0 2px 0 #fff}
.cpLed{display:flex;flex-direction:column;align-items:center;justify-content:center;height:150px;border-radius:14px;background:#04070f;border:4px solid #2a3350;box-shadow:inset 0 0 18px rgba(0,0,0,.9)}
.cpLed span{color:var(--amber);font-size:34px;line-height:1;text-shadow:0 0 10px var(--amber);animation:arr 1.2s ease-in-out infinite}
.cpLed b{color:var(--amber);font-size:84px;line-height:1.05;text-shadow:0 0 14px var(--amber);letter-spacing:.04em}
@keyframes arr{50%{opacity:.25;transform:translateY(-5px)}}
.cpBtns{display:flex;gap:28px;justify-content:center;align-items:flex-start}
.cbtn{display:flex;flex-direction:column;align-items:center;gap:8px;width:190px;color:#10192c;font-weight:800;font-size:26px;text-align:center;line-height:1.25}
.cbtn i{width:104px;height:104px;border-radius:50%;display:grid;place-items:center;font-style:normal;font-size:44px;color:#10192c;background:radial-gradient(circle at 35% 30%,#fff,#c9d2e0 55%,#8f9bb0);border:6px solid var(--cyan);box-shadow:0 0 0 4px #1b2236,0 0 24px rgba(56,225,255,.75),inset 0 -6px 10px rgba(0,0,0,.2);transition:transform .08s,box-shadow .1s}
.cbtn.go i{border-color:var(--amber);box-shadow:0 0 0 4px #1b2236,0 0 26px rgba(255,182,41,.85),inset 0 -6px 10px rgba(0,0,0,.2)}
.cbtn:hover i{transform:scale(1.07)}.cbtn:active i{transform:scale(.94)}
.dial{display:grid;gap:10px;justify-items:center;width:100%}
.dial .lbl{color:#10192c;font-size:28px;margin:0}
.dial .field{max-width:560px;text-align:center;font-size:30px}
.dial .cpBtns{gap:20px}
.tlogo{height:56px;width:auto}
.logoLink{display:inline-block;background:rgba(255,255,255,.92);border:2px solid var(--steel3);border-radius:12px;padding:4px 16px}
#cover .logoLink{box-shadow:0 4px 0 rgba(0,0,0,.4)}
.tray .logoLink{padding:2px 12px}.tray .tlogo{height:42px}

/* ═════ 홈: 엘리베이터 안 + 층 선택 키 ═════ */
#home{position:absolute;left:0;right:0;top:0;bottom:78px;background:linear-gradient(rgba(5,8,18,.5),rgba(5,8,18,.7)),url(../images/lift.webp) center/cover #0b1026}
#homebody{position:absolute;inset:0}
.hdr{position:absolute;left:48px;right:48px;top:26px;height:150px;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.pass{justify-self:start;display:grid;gap:3px;padding:12px 24px;background:var(--glass);border:2px solid var(--line);border-radius:18px;font-size:24px;font-weight:700;color:var(--sub);backdrop-filter:blur(4px)}
.pass b{color:var(--tx);font-size:30px}.pass span b{font-size:24px;color:var(--amber2)}
.ledbox{display:grid;grid-template-columns:auto auto;align-items:center;gap:6px 22px;padding:10px 40px 10px 30px;border-radius:18px;background:#04070f;border:5px solid #2f3a5e;box-shadow:inset 0 0 24px #000,0 0 0 3px #aab5c8,0 16px 30px rgba(0,0,0,.5)}
.ledbox .arr{grid-row:1/3;color:var(--amber);font-size:58px;text-shadow:0 0 12px var(--amber);animation:arr 1.2s ease-in-out infinite}
.ledbox .fl{color:var(--amber);font-size:84px;line-height:1;text-shadow:0 0 16px var(--amber)}
.ledbox .lt{color:var(--amber2);font-size:22px;font-weight:700;opacity:.9;white-space:nowrap}
.hprog{justify-self:end;display:grid;gap:8px;justify-items:end;padding:12px 24px;background:var(--glass);border:2px solid var(--line);border-radius:18px;font-size:24px;font-weight:700;backdrop-filter:blur(4px);min-width:300px}
.prog{width:100%;height:20px;border-radius:99px;background:#0a0e1c;border:2px solid var(--steel3);overflow:hidden}.prog i{display:block;height:100%;background:linear-gradient(90deg,var(--cyan),var(--good));border-radius:99px}
.keys{position:absolute;left:48px;right:48px;top:196px;bottom:176px;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(2,1fr);gap:20px}
.key{position:relative;display:grid;grid-template-rows:auto 1fr;gap:6px;padding:16px 20px 14px;text-align:left;border-radius:24px;background:linear-gradient(160deg,rgba(34,43,74,.9),rgba(13,18,34,.92));border:2px solid var(--line);box-shadow:0 14px 26px rgba(0,0,0,.45);transition:transform .12s,border-color .12s,box-shadow .12s;backdrop-filter:blur(3px)}
.key:hover:not(.lock){transform:translateY(-5px);border-color:var(--cyan);box-shadow:0 18px 30px rgba(0,0,0,.5),0 0 24px rgba(56,225,255,.4)}
.key .top{display:flex;align-items:center;justify-content:space-between}
.key .kb{width:78px;height:78px;border-radius:50%;display:grid;place-items:center;font-size:36px;font-weight:800;color:#10192c;background:radial-gradient(circle at 35% 30%,#fff,#c5cfdf 55%,#8b97ad);border:5px solid var(--steel3);box-shadow:0 0 0 3px #10162a,inset 0 -5px 8px rgba(0,0,0,.2)}
.key .aico{width:104px;height:104px;object-fit:contain;filter:drop-shadow(0 4px 8px rgba(0,0,0,.5))}
.key .nm b{display:block;font-size:34px;line-height:1.2;color:#fff}.key .nm small{display:block;font-size:23px;line-height:1.35;color:var(--sub);margin-top:4px}
.key .st{position:absolute;right:18px;bottom:14px;padding:0 14px;border-radius:8px;font-size:19px;font-weight:800;background:#0a0e1c;color:var(--sub);border:2px solid #3a4468}
.key.next{border-color:var(--amber);box-shadow:0 14px 26px rgba(0,0,0,.45),0 0 28px rgba(255,182,41,.55);animation:glowKey 1.5s ease-in-out infinite}
.key.next .kb{border-color:var(--amber);box-shadow:0 0 0 3px #10162a,0 0 22px rgba(255,182,41,.9),inset 0 -5px 8px rgba(0,0,0,.2)}
.key.next .st{background:var(--amber);color:#1b1300;border-color:var(--amber2)}
@keyframes glowKey{50%{box-shadow:0 14px 26px rgba(0,0,0,.45),0 0 44px rgba(255,182,41,.85)}}
.key.done{border-color:rgba(51,227,157,.65)}.key.done .kb{border-color:var(--good);box-shadow:0 0 0 3px #10162a,0 0 20px rgba(51,227,157,.8),inset 0 -5px 8px rgba(0,0,0,.2)}
.key.done .st{background:rgba(51,227,157,.18);color:var(--good);border-color:var(--good)}
.key.lock{opacity:.5;cursor:not-allowed}.key.lock .aico{filter:grayscale(1) brightness(.8)}
.gstrip{position:absolute;left:48px;right:48px;bottom:16px;height:140px;display:grid;grid-template-columns:auto 1fr auto;align-items:end;gap:16px}
.gstrip .gimg{display:flex;align-items:flex-end;gap:0}.gstrip .gimg img{height:150px;width:auto;object-fit:contain;margin-bottom:-6px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.6))}
.gstrip .dlg{margin:0 0 14px;font-size:26px}
#certBtn{margin-bottom:20px}

/* ── 작업 표시줄(하단 층 바) ── */
#task{position:absolute;left:0;right:0;bottom:0;height:78px;background:linear-gradient(#2a3250,#141a30);border-top:3px solid var(--steel3);display:flex;align-items:center;gap:16px;padding:0 20px;color:var(--tx);z-index:5}
.start{height:52px;padding:0 28px;border-radius:12px;background:linear-gradient(#e9eef6,#a8b3c7);color:#10192c;font-size:25px;font-weight:800;border:2px solid #fff;box-shadow:0 3px 0 #5d6a82}
#steps{display:flex;gap:8px;align-items:center}
.stp2{min-width:48px;height:42px;display:grid;place-items:center;padding:0 12px;border-radius:8px;font-size:22px;font-weight:800;background:#04070f;color:#4d5878;border:2px solid #2a3350}
.stp2.on{color:var(--amber);border-color:var(--amber);text-shadow:0 0 8px var(--amber)}
.stp2.dn{color:var(--good);border-color:rgba(51,227,157,.6)}
.sp{flex:1}.tray{display:flex;align-items:center;gap:14px;font-size:21px}
.tray button{padding:4px 18px;border-radius:10px;border:2px solid var(--steel3);font-size:21px;color:var(--tx);background:rgba(255,255,255,.06)}
.tray #cueBtn{border-color:var(--amber);color:var(--amber2)}
.tray #clock{font-weight:700;color:var(--sub);font-size:20px}

/* ═════ 활동 창 ═════ */
#layer{position:absolute;inset:0;pointer-events:none}#layer>*{pointer-events:auto}
.win{position:absolute;display:flex;flex-direction:column;background:linear-gradient(165deg,rgba(26,34,62,.97),rgba(10,14,28,.98));border:3px solid var(--steel2);border-radius:26px;box-shadow:0 0 0 3px #04060d,0 0 46px rgba(56,225,255,.22),0 30px 60px rgba(0,0,0,.6);overflow:hidden}
.win.full{left:34px;right:34px;top:22px;bottom:20px}
.wt{display:flex;align-items:center;gap:18px;height:84px;background:linear-gradient(#323c60,#1b2240);border-bottom:3px solid var(--steel3);color:var(--tx);padding:0 22px 0 14px;flex:0 0 auto}
.wno{display:grid;place-items:center;min-width:104px;height:58px;padding:0 16px;border-radius:10px;background:#04070f;border:3px solid #4a5678;font-size:40px;color:var(--amber);text-shadow:0 0 12px var(--amber);box-shadow:inset 0 0 14px #000}
.wtl{display:flex;align-items:center;gap:14px;font-size:34px;font-weight:800;flex:1}.wico{width:58px;height:58px;object-fit:contain}
.wbtn .x{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#c5cfdf 60%,#8b97ad);color:#10192c;font-weight:800;font-size:26px;cursor:pointer;border:4px solid var(--cyan);box-shadow:0 0 14px rgba(56,225,255,.6)}
.wbtn .x:hover{border-color:var(--pink)}
.wb{flex:1;min-height:0;position:relative}
.act{display:grid;grid-template-columns:450px 1fr;gap:26px;height:100%;padding:24px 30px 20px}
.side{display:flex;flex-direction:column;gap:18px;min-height:0}
.shot{flex:0 0 auto;aspect-ratio:3/2;border:3px solid var(--steel2);border-radius:20px;overflow:hidden;background:var(--g2);box-shadow:0 10px 24px rgba(0,0,0,.5),0 0 0 3px #04060d}
.shot img{width:100%;height:100%;object-fit:cover}
.mission{flex:1;min-height:0;overflow:hidden;font-size:25px;line-height:1.55;padding:14px 20px;background:rgba(255,255,255,.05);border:2px solid var(--line);border-radius:18px}
.mission h3{font-size:31px;margin:0 0 6px;line-height:1.25;color:var(--amber2)}.mission p{color:var(--tx)}.mission ul{margin:8px 0 0 22px;font-size:22px;color:var(--sub)}.mission li{margin-top:3px}
.main{display:flex;flex-direction:column;min-height:0;min-width:0}
.mainbody{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;gap:12px;padding:2px 6px 0 2px}
.foot{flex:0 0 96px;display:flex;align-items:center;justify-content:space-between;gap:20px;padding-top:12px;border-top:2px solid rgba(130,205,255,.2)}
.foot #fbtn{display:flex;gap:14px}
.say{flex:1;font-size:25px;color:var(--sub);min-width:0;display:flex;justify-content:center}
.say .sy{display:block;text-align:center;background:#04070f;border:2px solid #3a4468;border-radius:14px;padding:8px 24px;font-weight:700;color:var(--tx)}
.say.bad .sy{color:var(--bad);border-color:var(--bad)}.say.good .sy{color:var(--good);border-color:var(--good)}
.qhead{display:flex;gap:10px;align-items:center}
.opts{display:grid;gap:12px}
.opt{display:flex;align-items:center;gap:18px;text-align:left;padding:14px 24px;border-radius:16px;border:2px solid var(--line);background:rgba(255,255,255,.06);font-size:28px;line-height:1.4;color:var(--tx);transition:transform .08s,background .1s}
.opt:hover:not(:disabled){transform:translateX(4px);background:rgba(56,225,255,.14);border-color:var(--cyan)}
.opt .n{flex:0 0 46px;height:46px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#bcc7d9);color:#10192c;display:grid;place-items:center;font-size:24px;font-weight:800}
.opt.right{background:rgba(51,227,157,.18);border-color:var(--good)}.opt.right .n{background:var(--good)}
.opt.wrong{background:rgba(255,108,120,.16);border-color:var(--bad)}
.opt:disabled:not(.right){opacity:.5;cursor:default}

/* 칩 · 체크 */
.chip{padding:6px 20px;border:2px solid var(--steel3);background:rgba(255,255,255,.07);border-radius:10px;font-size:24px;font-weight:700;line-height:1.3;color:var(--tx)}
.chip:hover{border-color:var(--cyan)}
.chip.on{background:rgba(56,225,255,.2);border-color:var(--cyan);color:#d9faff}
.chip.sm{font-size:20px;padding:3px 14px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.whyrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:8px 16px;background:rgba(255,182,41,.08);border:2px solid rgba(255,182,41,.5);border-radius:18px}
.whyrow>b{font-size:25px;margin-right:6px;color:var(--amber2)}
.agree{display:flex;align-items:center;gap:10px;flex-basis:100%;font-size:24px;font-weight:700;cursor:pointer}.agree input{width:28px;height:28px;accent-color:var(--cyan)}

/* 1 장 고르기 */
.scrows{display:grid;gap:6px}
.scrow{display:grid;grid-template-columns:150px 1fr;gap:16px;align-items:center;padding:6px 14px 6px 6px;border:2px solid var(--line);border-radius:18px;background:rgba(255,255,255,.05);text-align:left;transition:transform .08s}
.scrow:hover{transform:translateX(4px);border-color:var(--cyan);background:rgba(56,225,255,.1)}
.scrow.on{background:rgba(51,227,157,.16);border-color:var(--good);box-shadow:0 0 0 3px rgba(51,227,157,.25)}
.scrow .th{width:140px;height:76px;object-fit:cover;border-radius:12px;border:2px solid var(--steel3)}
.scrow .tx{display:grid;gap:2px;min-width:0}
.scrow .hd{display:flex;align-items:center;gap:10px}
.scrow .no{padding:0 14px;border-radius:8px;background:var(--amber);color:#1b1300;font-size:22px}
.scrow .ti{font-size:27px}.scrow .pl{font-size:20px;color:var(--sub)}
.scrow .sm{font-size:21px;line-height:1.28}
.scrow .pt{display:flex;gap:8px;flex-wrap:wrap}.scrow .pt i{font-style:normal;font-size:17px;padding:0 10px;border-radius:8px;background:rgba(56,225,255,.12);border:1px solid var(--cyan2);color:#bff5ff;font-weight:700}

/* 2 인물 만나기 */
.meet{display:grid;grid-template-columns:230px 1fr;gap:20px;align-items:center}
.meet .mp{display:flex;flex-direction:column;align-items:center;gap:4px}.meet .mp img{height:300px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(56,225,255,.45))}.meet .mp b{font-size:30px;padding:0 22px;background:var(--amber);color:#1b1300;border-radius:10px}
.evs{display:grid;gap:10px}
.evl{background:#050811;color:#fff;border:2px solid var(--cyan);box-shadow:0 0 18px rgba(56,225,255,.22);padding:12px 18px;font-size:29px;line-height:1.45;border-radius:14px}
.evl b{display:inline-block;margin-right:12px;padding:0 12px;font-size:19px;border-radius:8px;background:var(--cyan);color:#04222b}
.evl.jm{color:var(--amber2);border-color:var(--amber)}.evl.jm b{background:var(--amber);color:#1b1300}
.opts .opt{font-size:26px;padding:12px 22px}

/* 3 역할 정하기 */
.rolecards{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}
.rcard{display:flex;flex-direction:column;align-items:center;gap:5px;padding:12px 10px 10px;border:2px solid var(--line);border-radius:20px;background:rgba(255,255,255,.05);text-align:center;transition:transform .08s}
.rcard:hover{transform:translateY(-4px);border-color:var(--cyan);background:rgba(56,225,255,.1)}
.rcard.on{background:rgba(51,227,157,.16);border-color:var(--good);box-shadow:0 0 0 3px rgba(51,227,157,.25)}
.rcard .pt{height:190px;object-fit:contain}
.rcard .rn{font-size:30px}.rcard .rj{font-size:19px;line-height:1.35;min-height:104px}.rcard .rt{font-size:17px;line-height:1.3;color:var(--sub);min-height:46px}
.rcard .bar{width:100%;height:14px;border-radius:99px;background:#0a0e1c;border:2px solid var(--steel3);overflow:hidden}.rcard .bar i{display:block;height:100%;background:linear-gradient(90deg,var(--amber),var(--amber2))}
.rcard .rs{font-size:18px;font-weight:700;color:var(--sub)}

/* 4 역할 준비 노트 */
.tx3{font-size:38px;line-height:1.5;font-weight:700}
.who5{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}
.who5b{flex-direction:column;min-height:150px;font-size:26px;padding:6px 8px;gap:2px}.who5b img{height:90px;object-fit:contain}
.who5b{background:rgba(255,255,255,.07);color:var(--tx);border:2px solid var(--line);box-shadow:none}.who5b:hover:not(:disabled){background:rgba(56,225,255,.16);border-color:var(--cyan)}
.who5b.good{background:linear-gradient(#a2ffd5,#2fe39a);color:#032a1a}.who5b.bad{background:rgba(255,108,120,.2);color:var(--bad);border-color:var(--bad);box-shadow:none}
.vline{background:#050811;color:#fff;border:2px solid var(--amber);box-shadow:0 0 20px rgba(255,182,41,.25);padding:20px 26px;font-size:36px;line-height:1.5;border-radius:16px}
.plan{display:grid;gap:9px}
.pl{display:grid;gap:5px;padding:10px 16px;background:rgba(255,255,255,.05);border:2px solid var(--line);border-radius:18px}
.pl>b{font-size:25px;color:var(--amber2)}.pl .q{font-size:22px;color:var(--sub)}
.pl .field{font-size:24px;padding:7px 16px}

/* 5 대사 연습 */
.spk{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center}
.spk img.pt{height:190px;object-fit:contain;filter:drop-shadow(0 0 16px rgba(56,225,255,.45))}
.spk b{font-size:32px}.spk small{font-size:22px;color:var(--sub)}
.vtog{margin-left:auto;display:flex;align-items:center;gap:8px;font-size:21px;font-weight:700;cursor:pointer}.vtog input{width:26px;height:26px;accent-color:var(--cyan)}
.pastlines{display:grid;gap:6px;opacity:.6;font-size:22px;line-height:1.4;min-height:62px}.pastlines .pm{color:var(--amber2)}
.now{position:relative;background:#050811;color:#fff;border:2px solid var(--cyan);box-shadow:0 0 28px rgba(56,225,255,.3);margin:auto 6px;padding:44px 40px 34px;font-size:46px;line-height:1.6;border-radius:20px;flex:none;min-height:400px;display:flex;flex-direction:column;justify-content:center}
.now .bd{position:absolute;top:-24px;left:24px;background:var(--cyan);color:#04222b;font-size:27px;font-weight:800;padding:2px 20px;border-radius:10px}
.now .jimun{display:block;font-size:36px}.now .cue{font-size:24px;color:var(--sub);margin-top:18px}
.now.mine{border-color:var(--amber);box-shadow:0 0 34px rgba(255,182,41,.45)}.now.mine .bd{background:var(--amber);color:#1b1300}
.now.stg{min-height:260px;border-color:var(--steel3);box-shadow:none}.now.stg .bd{background:var(--steel3);color:#fff}
.now .nt.hide{filter:blur(14px);user-select:none}
.now .btn.sm{align-self:flex-start;margin-top:12px}
.now.other{min-height:340px}
.oline{display:flex;align-items:center;gap:22px}.oline img{height:180px;object-fit:contain;filter:drop-shadow(0 0 14px rgba(56,225,255,.5))}.oline div{font-size:42px;line-height:1.55}

/* 6 무대·소품 */
.props{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.prop{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px 6px;border:2px solid var(--line);border-radius:16px;background:rgba(255,255,255,.07);font-size:21px;font-weight:700}
.prop img{height:96px;width:auto;object-fit:contain}
.prop:hover:not(:disabled){border-color:var(--cyan);background:rgba(56,225,255,.12)}
.prop.sel{background:rgba(255,182,41,.2);border-color:var(--amber);transform:translateY(-3px)}
.prop.ok{background:rgba(51,227,157,.18);border-color:var(--good)}
.prop:disabled:not(.ok){opacity:.4}
.clues{display:flex;flex-wrap:wrap;gap:8px}.clue{padding:4px 16px;background:rgba(255,182,41,.1);border:2px solid rgba(255,182,41,.55);border-radius:12px;font-size:22px}.clue b{color:var(--amber2);margin-right:6px}
.cues{display:grid;gap:9px}
.cuec{display:flex;align-items:center;gap:16px;padding:12px 18px;text-align:left;border:2px solid var(--line);border-radius:16px;background:rgba(255,255,255,.06);font-size:27px;line-height:1.35;font-weight:700;color:var(--tx)}
.cuec .cn{flex:0 0 52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#04070f;border:2px solid var(--steel3);color:var(--amber);font-size:26px}
.cuec:hover:not(:disabled){border-color:var(--cyan);background:rgba(56,225,255,.12)}
.cuec.got{background:rgba(51,227,157,.16);border-color:var(--good)}.cuec.got .cn{background:var(--good);color:#032a1a;border-color:var(--good)}
.cuec.wrong{background:rgba(255,108,120,.18);border-color:var(--bad);animation:shake .4s}

/* 7 몸풀기 */
.warmgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.wcard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:10px 10px 12px;background:rgba(255,255,255,.05);border:2px solid var(--line);border-radius:18px;text-align:center}
.wt1{font-size:22px;color:var(--amber2)}
.wcard .wi{height:150px;object-fit:contain}
.bmsg{font-size:19px;line-height:1.35;color:var(--sub);min-height:52px}
.bcircle{width:150px;height:150px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,rgba(56,225,255,.3),rgba(56,225,255,.05));border:3px solid var(--cyan);box-shadow:0 0 22px rgba(56,225,255,.5)}
.bcircle img{height:110px;object-fit:contain}
.bcircle.go{animation:breathe 8s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(.8)}50%{transform:scale(1.18)}}
.bdots{display:flex;gap:10px}.bdots i{width:22px;height:22px;border-radius:50%;border:3px solid var(--steel2);background:transparent}.bdots i.on{background:var(--good);border-color:var(--good)}
.ckb{display:flex;align-items:center;gap:10px;font-size:21px;font-weight:700;cursor:pointer;color:#fff;text-align:left;line-height:1.3}.ckb input{flex:none;width:28px;height:28px;accent-color:var(--cyan)}
.cheer{font-size:25px;font-weight:800;color:var(--amber2);min-height:110px;display:grid;place-items:center;line-height:1.4}
.pledge{margin-top:8px;display:grid;gap:7px;padding:12px 18px;background:rgba(255,98,171,.08);border:2px solid rgba(255,98,171,.55);border-radius:18px}
.pledge>b{font-size:23px;color:#ffb3d6}

/* 8 되돌아보기 */
.sh{display:block;font-size:26px;color:var(--amber2)}
.selfbox{display:grid;gap:3px;padding:8px 18px;background:rgba(255,255,255,.05);border:2px solid var(--line);border-radius:18px}
.srow{display:grid;grid-template-columns:1fr auto;gap:14px;align-items:center;padding:1px 0;border-bottom:1px dashed rgba(130,205,255,.3)}.srow:last-child{border:0}
.sq{font-size:23px;line-height:1.3;font-weight:700}
.sbtn{display:flex;gap:8px}
.lv{display:flex;flex-direction:column;align-items:center;min-width:118px;padding:0 10px;border:2px solid var(--steel3);border-radius:12px;background:rgba(255,255,255,.06)}
.lv i{font-style:normal;font-size:24px;color:var(--amber);letter-spacing:2px}.lv small{font-size:17px;font-weight:700;color:var(--sub)}
.lv:hover{border-color:var(--cyan)}
.lv.on{background:rgba(255,182,41,.22);border-color:var(--amber)}.lv.on small{color:var(--amber2)}
.praisebox{display:grid;gap:6px;margin-top:6px;padding:8px 18px;background:rgba(255,182,41,.07);border:2px solid rgba(255,182,41,.5);border-radius:18px}
.praisebox .field{font-size:24px;padding:8px 16px}

/* 안내(보리) */
.guide{margin-top:auto;display:flex;align-items:flex-end;gap:14px;padding-top:6px}
.guide img{height:150px;width:auto;flex:none;filter:drop-shadow(0 0 14px rgba(56,225,255,.45))}
.guide .dlg{flex:1;margin:0 10px 16px 6px;font-size:26px}

/* 극본 보기 · 큐카드 */
.scriptpop .pb{padding:12px 28px 4px;overflow:hidden;display:flex;flex-direction:column}
.sctabs{display:flex;gap:8px}.sctab{padding:2px 20px;border:2px solid var(--steel3);border-radius:10px;background:rgba(255,255,255,.06);font-size:24px;font-weight:800;color:var(--tx)}.sctab.on{background:var(--amber);border-color:var(--amber2);color:#1b1300}
.sct{font-size:29px;margin:8px 0 6px}.sct small{font-size:21px;color:var(--sub)}
.scbody{display:grid;gap:4px;max-height:640px;overflow:auto;padding-right:8px;font-size:24px;line-height:1.5}
.sl{display:grid;grid-template-columns:150px 1fr;gap:10px;padding:2px 10px;border-radius:10px}.sl .who{text-align:right}
.sl.mine{background:rgba(255,182,41,.16);outline:2px solid var(--amber)}
.sl.stg{display:block;padding-left:170px;color:var(--sub)}
.cuepop .pb{padding:16px 36px 4px}
.cuehead{display:flex;gap:10px;margin-bottom:12px}
.cueprev{padding:10px 20px;border-radius:14px;background:rgba(56,225,255,.1);border:2px solid var(--cyan2);font-size:26px;line-height:1.45;min-height:104px}.cueprev small{display:block;font-size:19px;color:var(--sub);font-weight:800}
.cuenow{position:relative;margin:34px 6px 14px;background:#050811;color:#fff;border:2px solid var(--amber);box-shadow:0 0 32px rgba(255,182,41,.45);padding:40px 34px 28px;font-size:46px;line-height:1.55;border-radius:20px;min-height:300px;display:flex;flex-direction:column;justify-content:center}
.cuenow .bd{position:absolute;top:-24px;left:24px;background:var(--amber);color:#1b1300;font-size:27px;font-weight:800;padding:2px 20px;border-radius:10px}
.cuenow .jimun{display:block;font-size:34px}
.cuenext{font-size:23px;color:var(--sub);min-height:34px}

/* ── 팝업 ── */
#modal{position:absolute;inset:0;background:rgba(3,5,12,.74);display:grid;place-items:center;z-index:20;animation:fade .15s}
@keyframes fade{from{opacity:0}}
.pop{width:min(900px,94%);background:linear-gradient(165deg,#1d2646,#0e1326);border:3px solid var(--steel2);border-radius:26px;box-shadow:0 0 0 3px #04060d,0 0 44px rgba(56,225,255,.28),0 30px 60px rgba(0,0,0,.6);overflow:hidden;max-height:96%;display:flex;flex-direction:column}
.pop .wt{height:70px;padding-left:28px}.pop .wtl{font-size:30px}
.pb{padding:24px 34px 8px;font-size:28px;line-height:1.55;overflow:hidden;flex:1;min-height:0}.pf{display:flex;justify-content:center;gap:14px;padding:12px 30px 26px}
.pop .pb>p{text-align:center}.pop .pb>.how{display:table;margin:0 auto}.pop.ok .pb{text-align:center}.pop.ok h2{font-size:42px;margin:6px 0;color:var(--amber2)}
.how{margin-left:30px;display:grid;gap:8px}
.stampbig{width:220px;height:220px;margin:2px auto 10px;animation:stamp .5s cubic-bezier(.2,1.6,.4,1)}.stampbig img{width:100%;height:100%;display:block;filter:drop-shadow(0 0 22px rgba(255,182,41,.6))}
@keyframes stamp{from{transform:scale(2.4);opacity:0}to{transform:none;opacity:1}}
#toast{position:absolute;left:50%;bottom:112px;transform:translate(-50%,20px);background:#04070f;color:#fff;padding:10px 30px;border-radius:12px;font-size:26px;font-weight:700;opacity:0;pointer-events:none;transition:.25s;z-index:30;border:2px solid var(--amber)}#toast.on{opacity:1;transform:translate(-50%,0)}
#rotate{position:fixed;inset:0;background:var(--g1);color:#fff;display:grid;place-items:center;text-align:center;font-size:24px;z-index:99}

/* ── 도착 증서(인쇄용 밝은 종이) ── */
.certpop .pb{position:relative;padding:0 30px 4px;overflow:hidden}
.certpop .cert{margin-top:16px;animation:certPrint 3.2s steps(48,end) both}
@keyframes certPrint{from{clip-path:inset(0 0 100% 0)}to{clip-path:inset(0 0 0 0)}}
@media (prefers-reduced-motion:reduce){.certpop .cert,.titleimg,.cvsub{animation:none}}
.cert{position:relative;width:1180px;height:787px;margin:0 auto;background:url(../images/cert-bg.webp) center/100% 100% #f6f3ea;color:#10192c;overflow:hidden;box-sizing:border-box;padding:44px 84px 26px;display:grid;grid-template-columns:1.05fr 1fr;grid-template-rows:auto 1fr auto;gap:10px 56px;font-size:24px;border-radius:10px}
.cert .ch{grid-column:1/-1;text-align:center;border-bottom:3px double #7a869b;padding:4px 0 8px}
.cert .ch h2{font-size:46px;line-height:1.3;letter-spacing:.1em;color:#10192c}.cert .ch p{font-size:22px;color:#4b5878;font-weight:700}
.cert .mv{display:grid;grid-template-columns:auto 1fr;gap:2px 14px;padding:8px 14px;margin-bottom:6px;background:rgba(255,182,41,.18);border:2px solid #d99a14;border-radius:12px;font-size:22px}.cert .mv span{color:#4b5878;font-weight:700}.cert .mv b{color:#10192c}
.cert .li{display:flex;justify-content:space-between;gap:14px;border-bottom:1px dashed #9aa6bc;padding:3px 0;font-size:22px;font-weight:700}.cert .li span:last-child{color:#0f8f5f;font-weight:800}
.cert .col{display:flex;flex-direction:column;gap:2px;min-width:0}
.cert dl{display:grid;gap:3px;font-size:20px;line-height:1.4}.cert dt{font-weight:800;color:#b3730a}.cert dd{margin:0 0 0 4px}.cert dd b{color:#d99a14;letter-spacing:2px}
.cert .stampc{width:140px;align-self:flex-end;margin-top:auto}
.cert .cfoot{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:18px;font-size:19px;color:#4b5878;font-weight:700;border-top:3px double #7a869b;padding-top:10px}.cert .cfoot img{height:40px}
.cert .bar{flex:1;height:30px;background:repeating-linear-gradient(90deg,#10192c 0 2px,transparent 2px 4px,#10192c 4px 5px,transparent 5px 8px,#10192c 8px 11px,transparent 11px 13px)}
.cert .cfoot .cs{max-width:560px;font-size:17px;line-height:1.35}
#printsheet{display:none}
@media print{body{background:#fff}#stage,#rotate{display:none!important}#printsheet{display:block;width:1000px;margin:20px auto;zoom:.95}*{-webkit-print-color-adjust:exact;print-color-adjust:exact}}

/* 좁은 화면(16:10 이하) */
#stage.narrow .act{grid-template-columns:400px 1fr}

/* 4층 ① 이 장 읽고 내 대사 찾기 */
.readbox{flex:1;min-height:0;overflow-y:auto;display:grid;gap:6px;align-content:start;padding:2px 8px 2px 2px}
.rl{display:grid;grid-template-columns:150px 1fr;gap:14px;text-align:left;padding:8px 16px;border:2px solid var(--line);border-radius:14px;background:rgba(255,255,255,.05);font-size:24px;line-height:1.45;color:var(--tx);transition:background .1s}
.rl .who{text-align:right;font-size:22px;color:var(--cyan)}
.rl:hover:not(.got){border-color:var(--cyan);background:rgba(56,225,255,.1)}
.rl.got{background:rgba(255,182,41,.2);border-color:var(--amber)}.rl.got .who{color:var(--amber2)}
.rl.bad{background:rgba(255,108,120,.2);border-color:var(--bad);animation:shake .4s}
.rl.stg{display:block;border:0;background:none;padding:0 16px 0 180px;font-size:21px;color:var(--sub)}

/* 1층 극본 읽기 관문 · 극본 보기 읽은 표시 */
.readgate{flex:1;display:grid;gap:18px;justify-items:center;align-content:center;text-align:center;padding:20px}
.readgate h2{font-size:46px;color:var(--amber2)}
.readgate p{font-size:28px;max-width:900px;line-height:1.5}
.rgchips{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;max-width:1000px}
.rgc{padding:6px 20px;border:2px solid var(--steel3);border-radius:12px;font-size:24px;font-weight:700;color:var(--sub);background:rgba(255,255,255,.05)}
.rgc.on{border-color:var(--good);color:var(--good);background:rgba(51,227,157,.12)}
.sctab.rd:not(.on){border-color:var(--good)}
.scnote{margin-left:auto;align-self:center;font-size:22px;color:var(--sub)}

/* 선택한 장 다시 읽기 버튼 */
.btn.rereadbtn{flex:0 0 auto;margin-top:auto;width:100%;border-color:var(--amber);color:var(--amber2)}
.side .mission{flex:1 1 0}

/* 7층: 글자 크기 키움 (관객 약속 등) */
.pledge{gap:12px;padding:18px 26px}
.pledge>b{font-size:32px}
.pledge .ckb{font-size:29px;gap:16px;line-height:1.4}
.pledge .ckb input{width:38px;height:38px}
.wt1{font-size:25px}
.bmsg{font-size:22px;line-height:1.4;min-height:64px}
.wcard .ckb{font-size:25px}.wcard .ckb input{width:32px;height:32px}
.cheer{font-size:28px}

/* 5층 친구와 함께 연습 · 8층 인상 깊었던 부분 */
#peerbox{display:grid;gap:10px;align-content:start}
.peerhow{padding:10px 20px;background:rgba(255,182,41,.08);border:2px solid rgba(255,182,41,.5);border-radius:18px;font-size:23px;line-height:1.5}
.peerhow>b{color:var(--amber2);font-size:25px}.peerhow ol{margin:4px 0 0 26px}
.peerchk{display:grid;gap:6px;padding:10px 20px;background:rgba(255,255,255,.05);border:2px solid var(--line);border-radius:18px}
.ckb2{display:flex;align-items:center;gap:14px;font-size:25px;font-weight:700;cursor:pointer}.ckb2 input{flex:none;width:32px;height:32px;accent-color:var(--cyan)}
.peerin{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.pi{display:grid;gap:6px;align-content:start;padding:10px 16px;background:rgba(255,255,255,.05);border:2px solid var(--line);border-radius:18px}
.pi>b{font-size:23px;color:var(--amber2)}.pi .field{font-size:22px;padding:8px 14px}
.impr{display:grid;gap:8px;align-content:start}
.ib{display:grid;gap:6px;padding:10px 18px;background:rgba(255,255,255,.05);border:2px solid var(--line);border-radius:18px}
.ib .q{font-size:22px;color:var(--sub)}.ib .field{font-size:23px;padding:8px 16px}
.cert dd .cn{display:inline-block;padding:0 8px;margin-right:4px;border-radius:6px;background:#ffe39a;color:#10192c}
.cert dl{font-size:19px}

/* 홈 위쪽 겹침 방지 */
.hprog{grid-template-columns:1fr auto;align-items:center;justify-items:stretch;gap:6px 18px;min-width:440px;padding:10px 22px}
.hprog>b{grid-column:1;justify-self:start;font-size:26px}
.hprog>.prog{grid-column:1}
.hprog>#certBtn{grid-column:2;grid-row:1/3;margin:0;white-space:nowrap}

/* 증서 넘침 방지 */
.cert{grid-template-rows:auto minmax(0,1fr) auto}
.cert .col{min-height:0;overflow:hidden}
.cert dl{font-size:18px;line-height:1.3;gap:2px}
.cert dt{margin-top:2px}
.cert .stampc{width:96px;align-self:flex-end;margin-top:auto}
/* 5층 왼쪽 안내 */
.spk img.pt{height:140px}

/* 작은 화면(크롬북·태블릿)에서도 읽히도록 가장 작은 글자 키움 */
.scrow .pt i{font-size:20px}
.rcard .rt{font-size:20px;min-height:56px}.rcard .rs{font-size:20px}.rcard .rj{font-size:21px;min-height:118px}
.key .st{font-size:22px}
.evl b{font-size:22px}
.lv small{font-size:19px}
.rl .who{font-size:23px}