:root{
  --ink:#eef3f8; --dim:#9fb0c2; --cyan:#8fdcff; --amber:#f0bf78; --red:#ff4257; --bg:#05070b;
  --box: rgba(8,12,20,.78); --line: rgba(143,220,255,.28);
  --serif: "Nanum Myeongjo", "Noto Serif KR", serif;
  --sans: "Noto Sans KR", system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
  --ts: 1;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{width:100%;height:100%;background:#000;overflow:hidden;color:var(--ink);font-family:var(--sans);
  -webkit-font-smoothing:antialiased;user-select:none;-webkit-user-select:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.hidden{display:none!important}

#viewport{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:#000}
#game{position:relative;width:1920px;height:1080px;overflow:hidden;background:var(--bg);transform-origin:center center;flex:none}

/* ─── 무대 ─── */
#stage{position:absolute;inset:0;overflow:hidden}
#bgwrap{position:absolute;inset:-2%;}
.bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;will-change:opacity,transform}
.bg.on{opacity:1}
.bg.kb{animation:kenburns 38s ease-in-out infinite alternate}
@keyframes kenburns{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.09) translate(-1.2%,-.8%)}}
.bg.fallback{background-image:none!important}
.bg .fbname{position:absolute;right:40px;bottom:320px;font:700 22px var(--mono);color:rgba(255,255,255,.12);letter-spacing:.3em}
.rgb{mix-blend-mode:screen;opacity:0;pointer-events:none}
.rgb.r{filter:url(#none) sepia(1) saturate(8) hue-rotate(-50deg) brightness(.7)}
.rgb.c{filter:sepia(1) saturate(8) hue-rotate(150deg) brightness(.7)}

#chars{position:absolute;inset:0;pointer-events:none}
.ch{position:absolute;bottom:-60px;height:1060px;transform:translateX(-50%);transition:left .6s cubic-bezier(.2,.8,.2,1),filter .35s,opacity .45s,transform .45s;
  opacity:0;filter:brightness(.62) saturate(.8);will-change:transform,opacity}
.ch img{height:100%;display:block;filter:drop-shadow(0 0 24px rgba(0,0,0,.45))}
.ch.on{opacity:1}
.ch.speak{filter:none}
.ch .breath{height:100%;animation:breath 5.5s ease-in-out infinite;transform-origin:50% 100%}
@keyframes breath{0%,100%{transform:scaleY(1)}50%{transform:scaleY(1.006)}}
.ch.jump .breath{animation:jumpy .35s ease}
@keyframes jumpy{30%{transform:translateY(-22px)}}
.ch.shake .breath{animation:chshake .4s}
@keyframes chshake{20%{transform:translateX(-14px)}40%{transform:translateX(12px)}60%{transform:translateX(-8px)}80%{transform:translateX(5px)}}
.ch .xfade{position:absolute;inset:0;height:100%;opacity:0;transition:opacity .28s}

#cgwrap{position:absolute;inset:0;pointer-events:none}
.cg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.1s}
.cg.on{opacity:1}
.cg.kb{animation:cgpan 30s ease-in-out infinite alternate}
@keyframes cgpan{from{transform:scale(1.0)}to{transform:scale(1.06) translate(-1%,-1%)}}

#fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#tint{position:absolute;inset:0;pointer-events:none;transition:background 1.2s,backdrop-filter 1.2s,opacity 1.2s;mix-blend-mode:normal}
#tint.sepia{backdrop-filter:sepia(.75) saturate(.8) contrast(.95) brightness(.95);background:rgba(90,60,20,.12)}
#tint.red{background:rgba(160,0,20,.26);mix-blend-mode:multiply}
#tint.blue{background:rgba(10,40,110,.35);mix-blend-mode:multiply}
#tint.dark{background:rgba(0,0,0,.55)}
#tint.mono{backdrop-filter:grayscale(1) contrast(1.1)}
#tint.dream{backdrop-filter:blur(1.5px) brightness(1.08) saturate(1.1);background:radial-gradient(ellipse at center,rgba(255,230,190,.12),rgba(255,240,220,.35))}
#tint.night{background:rgba(0,40,20,.45);backdrop-filter:grayscale(1) sepia(1) hue-rotate(60deg) saturate(3) brightness(.9)}
#vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at center,transparent 55%,rgba(0,0,0,.55) 100%)}
#grain{position:absolute;inset:-50%;pointer-events:none;opacity:.07;background-size:256px 256px;animation:grain 1s steps(6) infinite;mix-blend-mode:overlay}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-5%,3%)}40%{transform:translate(4%,-6%)}60%{transform:translate(-7%,1%)}80%{transform:translate(3%,5%)}100%{transform:translate(0,0)}}
#scan{position:absolute;inset:0;pointer-events:none;opacity:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.05) 0 2px,transparent 2px 5px)}
#slices{position:absolute;inset:0;pointer-events:none}

/* 글리치 상태 */
#game.glitch #stage{animation:gjit .18s steps(2) infinite}
#game.glitch .rgb{opacity:.55}
#game.glitch .rgb.r{transform:translate(-14px,0)}
#game.glitch .rgb.c{transform:translate(14px,3px)}
#game.glitch #scan{opacity:1}
#game.glitch #textbox{animation:gjit .22s steps(2) infinite}
#game.glitch2 #stage{animation:gjit2 .12s steps(2) infinite;filter:contrast(1.3) saturate(1.4)}
#game.glitch2 .rgb{opacity:.8}
#game.glitch2 .rgb.r{transform:translate(-30px,0)}
#game.glitch2 .rgb.c{transform:translate(30px,-6px)}
#game.glitch2 #scan{opacity:1}
@keyframes gjit{0%{transform:translate(0,0)}25%{transform:translate(-6px,2px)}50%{transform:translate(5px,-3px) skewX(-1deg)}75%{transform:translate(-2px,4px)}100%{transform:translate(0,0)}}
@keyframes gjit2{0%{transform:translate(0,0) scale(1.01)}25%{transform:translate(-18px,5px) skewX(3deg)}50%{transform:translate(14px,-8px) skewX(-4deg)}75%{transform:translate(-8px,8px)}100%{transform:translate(0,0)}}
.slice{position:absolute;left:0;right:0;background-size:1920px 1080px;mix-blend-mode:difference;opacity:.9}

/* 흔들림 */
#game.shake #stage{animation:shake .5s cubic-bezier(.36,.07,.19,.97)}
#game.shake2 #stage{animation:shake2 .9s cubic-bezier(.36,.07,.19,.97)}
@keyframes shake{10%,90%{transform:translate(-4px,2px)}20%,80%{transform:translate(8px,-4px)}30%,50%,70%{transform:translate(-14px,6px)}40%,60%{transform:translate(14px,-6px)}}
@keyframes shake2{10%,90%{transform:translate(-10px,6px) rotate(-.3deg)}20%,80%{transform:translate(20px,-10px) rotate(.4deg)}30%,50%,70%{transform:translate(-30px,14px) rotate(-.6deg)}40%,60%{transform:translate(30px,-14px) rotate(.6deg)}}

#letterbox .lb{position:absolute;left:0;right:0;height:0;background:#000;transition:height 1s cubic-bezier(.6,0,.2,1);z-index:5}
#letterbox .top{top:0}#letterbox .bot{bottom:0}
#letterbox.on .lb{height:110px}

/* ─── HUD ─── */
#hud{position:absolute;left:54px;top:40px;z-index:6;font-family:var(--mono);text-shadow:0 0 12px rgba(0,0,0,.9);transition:opacity .6s}
.hud-date{font-size:20px;letter-spacing:.28em;color:var(--dim)}
.hud-time{font-size:64px;font-weight:700;letter-spacing:.06em;line-height:1;color:#fff;margin-top:4px}
.hud-time.flip{animation:flip .5s}
@keyframes flip{0%{opacity:.2;filter:blur(3px);transform:translateY(-6px)}100%{opacity:1;filter:none;transform:none}}
.hud-time.red{color:var(--red);text-shadow:0 0 18px rgba(255,40,60,.7)}
.hud-loop{margin-top:8px;font-size:18px;letter-spacing:.25em;color:var(--cyan)}
#pov{position:absolute;right:54px;top:44px;z-index:6;display:flex;align-items:center;gap:14px;font-family:var(--mono);text-shadow:0 0 12px #000}
.pov-label{font-size:14px;letter-spacing:.3em;color:var(--dim);border:1px solid rgba(255,255,255,.3);padding:3px 8px}
#povName{font:700 24px var(--sans);letter-spacing:.2em}

/* 뉴스 */
#news{position:absolute;left:0;right:0;bottom:340px;z-index:6;display:flex;align-items:stretch;height:92px;animation:newsin .6s ease;box-shadow:0 10px 40px rgba(0,0,0,.6)}
@keyframes newsin{from{transform:translateX(-100%)}to{transform:none}}
.news-tag{background:var(--red);color:#fff;font:900 36px var(--sans);padding:0 34px;display:flex;align-items:center;letter-spacing:.1em}
.news-head{background:#fff;color:#111;font:900 34px var(--sans);padding:0 30px;display:flex;align-items:center;white-space:nowrap}
.news-body{flex:1;background:rgba(10,20,40,.92);font:500 26px var(--sans);display:flex;align-items:center;overflow:hidden;white-space:nowrap}
.news-body span{padding-left:100%;animation:ticker 22s linear infinite}
@keyframes ticker{to{transform:translateX(-100%)}}

/* 중앙 텍스트 */
#center{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;pointer-events:none}
#centerText{font:800 52px/1.7 var(--serif);text-align:center;letter-spacing:.06em;text-shadow:0 0 30px rgba(0,0,0,.95),0 0 4px #000;white-space:pre-line;max-width:1500px}
#centerText.in{animation:centerin 1.4s ease both}
@keyframes centerin{from{opacity:0;letter-spacing:.3em;filter:blur(8px)}to{opacity:1}}
#count{position:absolute;inset:0;z-index:7;display:flex;align-items:center;justify-content:center;font:700 300px var(--mono);color:var(--red);text-shadow:0 0 60px rgba(255,30,50,.8);pointer-events:none}
#count.pop{animation:countpop .5s ease}
@keyframes countpop{from{transform:scale(1.4);opacity:.2}to{transform:none;opacity:1}}

/* ─── 텍스트 박스 ─── */
#textbox{position:absolute;left:0;right:0;bottom:0;height:330px;z-index:8;padding:0 260px;
  background:linear-gradient(180deg,transparent 0,rgba(4,8,14,calc(var(--boxa,.82) * .75)) 28%,rgba(4,8,14,var(--boxa,.82)) 100%);}
#textbox::before{content:"";position:absolute;left:220px;right:220px;top:70px;height:1px;background:linear-gradient(90deg,transparent,var(--line),transparent)}
#namebox{position:absolute;left:260px;top:34px;height:52px;display:flex;align-items:center}
#name{font:700 32px var(--sans);letter-spacing:.14em;color:var(--nc,#fff);text-shadow:0 0 18px var(--ncg,rgba(143,220,255,.4))}
#name:empty{display:none}
#text{position:absolute;left:260px;right:260px;top:96px;font:400 34px/1.72 var(--serif);letter-spacing:.015em;color:var(--ink);
  text-shadow:0 2px 6px rgba(0,0,0,.9);word-break:keep-all;white-space:pre-wrap}
#text.narr{color:#dfe6ee}
#text.mono{color:#cfe8ff;font-style:normal}
#text .c{opacity:0;transition:opacity .18s}
#text .c.v{opacity:1}
#text .r{color:#ff7584}
#text .em{color:var(--amber);font-weight:700}
#text .g{display:inline-block;animation:gtext .2s steps(2) infinite;color:#b8f0ff}
@keyframes gtext{0%{transform:translate(0,0);text-shadow:-3px 0 #f0f,3px 0 #0ff}50%{transform:translate(2px,-1px);text-shadow:3px 0 #f0f,-3px 0 #0ff}}
#text .big{font-size:1.35em;font-weight:800}
#text .small{font-size:.8em;color:var(--dim)}
#next{position:absolute;right:250px;bottom:52px;color:var(--cyan);font-size:22px;opacity:0;animation:bob 1.2s ease-in-out infinite}
#next.on{opacity:1}
@keyframes bob{50%{transform:translateY(6px)}}
#quick{position:absolute;right:30px;bottom:14px;display:flex;gap:6px;opacity:.55;transition:opacity .3s}
#quick:hover{opacity:1}
#quick button{font:500 15px var(--mono);letter-spacing:.08em;padding:6px 10px;color:var(--dim)}
#quick button:hover,#quick button.on{color:var(--cyan)}
#game.hideui #textbox,#game.hideui #hud,#game.hideui #pov,#game.hideui #nvl{opacity:0;pointer-events:none}

#nvl{position:absolute;inset:0;z-index:8;background:rgba(3,6,11,.8);padding:130px 300px;overflow:hidden}
#nvlText{font:400 33px/1.95 var(--serif);word-break:keep-all;white-space:pre-wrap}
#nvlText p{margin-bottom:.45em;min-height:1em}
#nvlText .c{opacity:0;transition:opacity .18s}#nvlText .c.v{opacity:1}
#nvlText .r{color:#ff7584}#nvlText .em{color:var(--amber);font-weight:700}
#nvlText .g{display:inline-block;animation:gtext .2s steps(2) infinite;color:#b8f0ff}

/* ─── 선택지 ─── */
#choices{position:absolute;inset:0;z-index:9;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;background:rgba(0,0,0,.35)}
#choiceList{display:flex;flex-direction:column;gap:22px;align-items:center}
.choice{width:980px;padding:26px 40px;font:700 32px var(--serif);letter-spacing:.04em;text-align:center;
  background:linear-gradient(90deg,rgba(8,14,24,.2),rgba(8,14,24,.88) 20%,rgba(8,14,24,.88) 80%,rgba(8,14,24,.2));
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);transition:all .25s;position:relative;animation:chin .5s both}
.choice:hover{color:#fff;background:linear-gradient(90deg,rgba(40,90,130,.1),rgba(30,70,110,.9) 20%,rgba(30,70,110,.9) 80%,rgba(40,90,130,.1));letter-spacing:.08em}
.choice.seen::after{content:"✓";position:absolute;right:60px;color:var(--cyan);opacity:.6;font-size:22px;top:50%;transform:translateY(-50%)}
.choice.danger:hover{background:linear-gradient(90deg,rgba(130,20,30,.1),rgba(110,20,30,.9) 20%,rgba(110,20,30,.9) 80%,rgba(130,20,30,.1))}
@keyframes chin{from{opacity:0;transform:translateY(16px)}}
#choiceTimer{width:980px;height:6px;background:rgba(255,255,255,.1);margin-bottom:34px;opacity:0}
#choiceTimer.on{opacity:1}
#choiceTimerBar{height:100%;width:100%;background:var(--red);box-shadow:0 0 16px var(--red);transform-origin:left}

/* ─── 버퍼링/되감기 ─── */
#buffer{position:absolute;inset:0;z-index:12;display:flex;flex-direction:column;align-items:center;justify-content:center;background:rgba(0,0,0,.55);gap:28px}
.spinner{width:140px;height:140px;animation:spin 1.1s linear infinite}
.spinner svg{width:100%;height:100%}
.spinner circle{fill:none;stroke:#fff;stroke-width:5;stroke-dasharray:170 90;stroke-linecap:round;filter:drop-shadow(0 0 10px var(--cyan))}
@keyframes spin{to{transform:rotate(360deg)}}
.buf-label{font:700 26px var(--mono);letter-spacing:.5em;color:#fff}
.buf-label span{margin-left:.6em;color:var(--cyan)}
#rewind{position:absolute;inset:0;z-index:12;background:rgba(0,10,30,.45);display:flex;flex-direction:column;align-items:center;justify-content:center;backdrop-filter:grayscale(.8) contrast(1.2)}
.rw-sym{font:700 90px var(--mono);color:#fff;letter-spacing:-.1em;animation:blink .5s steps(2) infinite}
.rw-time{font:700 140px var(--mono);color:#fff;text-shadow:-4px 0 #f0f,4px 0 #0ff}
.rw-lines{position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 3px,transparent 3px 7px);animation:rwl .3s linear infinite}
@keyframes rwl{to{background-position:0 -70px}}
@keyframes blink{50%{opacity:0}}

/* ─── 챕터 카드 ─── */
#chapter{position:absolute;inset:0;z-index:11;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ch-num{font:500 24px var(--mono);letter-spacing:.8em;color:var(--dim);animation:fadein 1.2s both}
.ch-line{width:0;height:1px;background:var(--cyan);margin:34px 0;animation:line 1.6s .4s both;box-shadow:0 0 12px var(--cyan)}
@keyframes line{to{width:520px}}
.ch-title{font:800 84px var(--serif);letter-spacing:.2em;animation:fadein 1.8s .8s both}
.ch-sub{margin-top:26px;font:400 24px var(--sans);color:var(--dim);letter-spacing:.3em;animation:fadein 1.6s 1.6s both}
@keyframes fadein{from{opacity:0;filter:blur(6px)}to{opacity:1;filter:none}}

#endcard{position:absolute;inset:0;z-index:13;background:rgba(0,0,0,.88);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;text-align:center}
.end-kind{font:700 30px var(--mono);letter-spacing:.6em;color:var(--red);animation:fadein 1s both}
#endcard.good .end-kind{color:var(--cyan)}
#endcard.true .end-kind{color:var(--amber)}
.end-title{font:800 76px var(--serif);letter-spacing:.12em;animation:fadein 1.4s .5s both}
.end-sub{font:400 26px var(--sans);color:var(--dim);animation:fadein 1.4s 1.2s both;max-width:1300px;line-height:1.8}
.end-hint{margin-top:30px;font:400 22px var(--sans);color:var(--cyan);animation:fadein 1.4s 2s both;letter-spacing:.1em}

#credits{position:absolute;inset:0;z-index:13;background:#000;overflow:hidden}
#creditsRoll{position:absolute;left:0;right:0;top:100%;text-align:center;font:400 28px/2.2 var(--sans);color:var(--dim)}
#creditsRoll h3{font:700 22px var(--mono);letter-spacing:.4em;color:var(--cyan);margin-top:80px}
#creditsRoll .big{font:800 64px var(--serif);color:#fff;letter-spacing:.2em;margin:40px 0}
#creditsRoll p{color:#fff}

#toast{position:absolute;right:50px;top:170px;z-index:14;display:flex;flex-direction:column;gap:10px;align-items:flex-end;pointer-events:none}
.toast{background:rgba(8,16,28,.92);border-left:3px solid var(--cyan);padding:14px 24px;font:500 20px var(--sans);animation:toast 3.4s both}
.toast b{color:var(--cyan);font-family:var(--mono);letter-spacing:.2em;margin-right:12px;font-size:16px}
@keyframes toast{0%{opacity:0;transform:translateX(40px)}10%,85%{opacity:1;transform:none}100%{opacity:0}}
#fade{position:absolute;inset:0;z-index:15;background:#000;opacity:0;pointer-events:none;transition:opacity .8s}
#fade.on{opacity:1}
#fade.white{background:#fff}

/* ─── 타이틀 ─── */
#title{position:absolute;inset:0;z-index:20;background:#000}
#titleBg{position:absolute;inset:-3%;background-size:cover;background-position:center;animation:kenburns 50s ease-in-out infinite alternate;filter:brightness(.8)}
#titleFx{position:absolute;inset:0;width:100%;height:100%}
.title-shade{position:absolute;inset:0;background:linear-gradient(90deg,rgba(0,0,0,.2) 40%,rgba(0,0,0,.75) 100%),linear-gradient(0deg,rgba(0,0,0,.7),transparent 40%)}
#logo{position:absolute;left:130px;top:140px}
.logo-ko{font:800 190px var(--serif);letter-spacing:.08em;position:relative;color:#fff;text-shadow:0 0 50px rgba(0,0,0,.8)}
.logo-ko::before,.logo-ko::after{content:attr(data-text);position:absolute;inset:0;opacity:0}
.logo-ko::before{color:#f0f;animation:lg1 5s infinite}
.logo-ko::after{color:#0ff;animation:lg2 5s infinite}
@keyframes lg1{0%,88%,100%{opacity:0;transform:none}89%{opacity:.7;transform:translate(-10px,0);clip-path:inset(20% 0 50% 0)}91%{opacity:.7;transform:translate(8px,0);clip-path:inset(60% 0 10% 0)}93%{opacity:0}}
@keyframes lg2{0%,88%,100%{opacity:0;transform:none}90%{opacity:.7;transform:translate(10px,0);clip-path:inset(10% 0 70% 0)}92%{opacity:.7;transform:translate(-8px,0);clip-path:inset(40% 0 30% 0)}94%{opacity:0}}
.logo-en{font:700 30px var(--mono);letter-spacing:1.05em;color:var(--cyan);margin-top:6px;margin-left:12px}
.logo-tag{margin-top:40px;font:400 26px var(--serif);color:#dfe6ee;letter-spacing:.06em;text-shadow:0 0 20px #000}
#titleMenu{position:absolute;right:150px;bottom:150px;display:flex;flex-direction:column;align-items:flex-end;gap:10px}
#titleMenu button{font:500 34px var(--sans);letter-spacing:.3em;padding:8px 0;color:rgba(255,255,255,.72);transition:all .25s;text-shadow:0 0 20px #000;position:relative}
#titleMenu button::before{content:"";position:absolute;right:calc(100% + 20px);top:50%;width:0;height:1px;background:var(--cyan);transition:width .3s}
#titleMenu button:hover{color:#fff;letter-spacing:.38em}
#titleMenu button:hover::before{width:70px}
#titleMenu button:disabled{opacity:.25;pointer-events:none}
#titleFoot{position:absolute;left:130px;bottom:60px;font:400 18px var(--sans);color:rgba(255,255,255,.4);letter-spacing:.1em}
#clearMark{position:absolute;left:136px;top:118px;font:700 20px var(--mono);letter-spacing:.4em;color:var(--amber)}

/* ─── 패널 ─── */
#panel{position:absolute;inset:0;z-index:30;background:rgba(3,6,11,.94);backdrop-filter:blur(8px);padding:70px 110px;display:flex;flex-direction:column;animation:panelin .35s ease}
@keyframes panelin{from{opacity:0;transform:scale(1.02)}}
.panel-head{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);padding-bottom:18px}
.panel-head h2{font:800 48px var(--serif);letter-spacing:.2em}
#panelClose{font-size:40px;color:var(--dim);padding:0 10px}
#panelClose:hover{color:#fff}
.panel-tabs{display:flex;gap:10px;margin:22px 0 10px}
.panel-tabs button{font:500 22px var(--sans);padding:8px 22px;border:1px solid rgba(255,255,255,.15);color:var(--dim);letter-spacing:.15em}
.panel-tabs button.on{border-color:var(--cyan);color:var(--cyan)}
.panel-body{flex:1;overflow-y:auto;margin-top:20px;padding-right:20px}
.panel-body::-webkit-scrollbar{width:8px}.panel-body::-webkit-scrollbar-thumb{background:rgba(143,220,255,.25)}

.slots{display:grid;grid-template-columns:repeat(4,1fr);gap:26px}
.slot{position:relative;aspect-ratio:16/10;background:#0b121c center/cover;border:1px solid rgba(255,255,255,.12);cursor:pointer;overflow:hidden;transition:border-color .2s,transform .2s}
.slot:hover{border-color:var(--cyan);transform:translateY(-3px)}
.slot .info{position:absolute;left:0;right:0;bottom:0;padding:12px 16px;background:linear-gradient(0deg,rgba(0,0,0,.92),rgba(0,0,0,.2));font:400 17px/1.5 var(--sans)}
.slot .info b{display:block;font:700 15px var(--mono);color:var(--cyan);letter-spacing:.15em}
.slot .empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:500 20px var(--mono);color:rgba(255,255,255,.25);letter-spacing:.3em}
.slot .del{position:absolute;right:8px;top:6px;font-size:20px;color:var(--dim);opacity:0}
.slot:hover .del{opacity:1}

.log-item{padding:18px 0;border-bottom:1px solid rgba(255,255,255,.06);display:flex;gap:30px}
.log-item .n{width:170px;flex:none;font:700 24px var(--sans);text-align:right}
.log-item .t{font:400 28px/1.7 var(--serif);color:#dbe3ec;word-break:keep-all}

.cfg{display:grid;grid-template-columns:320px 1fr;gap:34px 40px;align-items:center;max-width:1300px;font-size:26px}
.cfg label{color:var(--dim);letter-spacing:.1em}
.cfg input[type=range]{width:100%;accent-color:#8fdcff;height:30px}
.cfg .row{display:flex;gap:14px}
.cfg .row button{padding:8px 24px;border:1px solid rgba(255,255,255,.2);font-size:22px;color:var(--dim)}
.cfg .row button.on{border-color:var(--cyan);color:var(--cyan)}
.cfg .preview{grid-column:1/3;padding:26px 30px;background:rgba(255,255,255,.04);font:400 30px/1.7 var(--serif);min-height:120px}

.chapters{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
.chap{aspect-ratio:16/9;background:#0b121c center/cover;position:relative;border:1px solid rgba(255,255,255,.12);cursor:pointer;transition:all .25s;overflow:hidden}
.chap:hover{border-color:var(--cyan);transform:translateY(-4px)}
.chap .lbl{position:absolute;inset:auto 0 0 0;padding:20px 24px;background:linear-gradient(0deg,rgba(0,0,0,.95),transparent)}
.chap .lbl small{display:block;font:500 16px var(--mono);letter-spacing:.3em;color:var(--cyan)}
.chap .lbl span{font:800 32px var(--serif);letter-spacing:.1em}
.chap.lock{pointer-events:none;filter:grayscale(1) brightness(.3)}

.gallery{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
.gal{aspect-ratio:16/9;background:#0b121c center/cover;border:1px solid rgba(255,255,255,.1);cursor:pointer;transition:transform .2s}
.gal:hover{transform:scale(1.04);border-color:var(--cyan)}
.gal.lock{background:repeating-linear-gradient(45deg,#0a0f16 0 10px,#0d141d 10px 20px)!important;cursor:default;display:flex;align-items:center;justify-content:center;font:700 22px var(--mono);color:rgba(255,255,255,.15)}
#viewer{position:absolute;inset:0;z-index:40;background:#000;cursor:pointer}
#viewerImg{position:absolute;inset:0;background:center/contain no-repeat}

.tips{display:grid;grid-template-columns:420px 1fr;gap:40px;height:100%}
.tip-list{overflow-y:auto;border-right:1px solid var(--line);padding-right:20px}
.tip-list button{display:block;width:100%;text-align:left;padding:14px 18px;font:500 24px var(--sans);color:var(--dim);border-left:2px solid transparent}
.tip-list button.on{color:#fff;border-color:var(--cyan);background:rgba(143,220,255,.06)}
.tip-list button.lock{opacity:.3;pointer-events:none}
.tip-list button.new::after{content:" NEW";font:700 14px var(--mono);color:var(--amber)}
.tip-body h3{font:800 44px var(--serif);margin-bottom:26px;letter-spacing:.08em}
.tip-body p{font:400 29px/1.9 var(--serif);color:#dbe3ec;white-space:pre-wrap;word-break:keep-all}

.music{display:flex;flex-direction:column;gap:6px;max-width:1100px}
.track{display:flex;align-items:center;gap:30px;padding:18px 26px;border-bottom:1px solid rgba(255,255,255,.07);cursor:pointer;font-size:26px}
.track:hover,.track.on{background:rgba(143,220,255,.07)}
.track.on .tn{color:var(--cyan)}
.track .no{font:700 20px var(--mono);color:var(--dim);width:50px}
.track .tn{flex:1;font-weight:500}
.track .desc{font-size:19px;color:var(--dim)}
.track.lock{opacity:.25;pointer-events:none}

.menu-list{display:flex;flex-direction:column;align-items:center;gap:20px;margin-top:80px}
.menu-list button{width:560px;padding:22px;font:500 30px var(--sans);letter-spacing:.3em;border:1px solid rgba(255,255,255,.14);transition:all .2s}
.menu-list button:hover{border-color:var(--cyan);color:var(--cyan)}

/* 스플래시 */
#splash{position:absolute;inset:0;z-index:100;background:#000;display:flex;align-items:center;justify-content:center;cursor:pointer}
.splash-inner{text-align:center;display:flex;flex-direction:column;gap:30px}
.splash-warn{font:400 24px var(--sans);color:var(--dim);letter-spacing:.08em}
.splash-phones{font:400 24px var(--sans);color:var(--dim)}
.splash-click{margin-top:60px;font:700 30px var(--mono);letter-spacing:.8em;color:#fff;animation:pulse 2s ease-in-out infinite}
.splash-load{font:400 18px var(--mono);color:rgba(255,255,255,.3);letter-spacing:.2em;height:20px}
@keyframes pulse{50%{opacity:.3}}
#centerText .big{font-size:1.7em;letter-spacing:.2em}
#centerText .r{color:#ff7584}#centerText .em{color:var(--amber)}
#centerText .g{display:inline-block;animation:gtext .2s steps(2) infinite;color:#b8f0ff}