/* 남주 화면. 폰 안 모양은 audition/docs/v2-flows/flow9 (9판) 을 그대로 가져왔다. 9판의 폰 틀만 빼고 화면을 꽉 채운다 */
:root{--display:'Hahmlet','AppleMyungjo',serif;--body:'IBM Plex Sans KR','Apple SD Gothic Neo',sans-serif;--bub:'Gowun Dodum','Apple SD Gothic Neo',sans-serif;--top:max(16px,env(safe-area-inset-top));color-scheme:dark}
*{box-sizing:border-box}
html,body{margin:0;background:#05060A;color:#FFF6EE;height:100%;-webkit-text-size-adjust:100%}
body{font-family:var(--body);overscroll-behavior:none}
#app{position:relative;width:100%;max-width:480px;height:100vh;height:100dvh;margin:0 auto;overflow:hidden;background:#101421}
button{-webkit-tap-highlight-color:transparent}
button:focus-visible,input:focus-visible{outline:3px solid #F7B9A6;outline-offset:2px}
input{font-size:16px!important}
.s{position:absolute;inset:0;padding:calc(var(--top) + 8px) 16px max(16px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:12px;color:#FFF6EE;background:#101421;font-family:var(--body);overflow:hidden;word-break:keep-all}
.s h3{margin:0;font-family:var(--display);font-weight:700;font-size:24px;line-height:1.3;letter-spacing:-.3px}
.sub{font-size:13px;color:#B9BCCB;line-height:1.55}
.tiny{font-size:13px;color:#A4A8BA;text-align:center;line-height:1.5}
.grow{flex-grow:1}
.scr{flex:1 1 0;min-height:0;overflow-y:auto;margin:0 -16px;padding:0 16px 8px;display:flex;flex-direction:column;gap:10px}
.scr::-webkit-scrollbar,.pslide::-webkit-scrollbar{display:none}
.ep{font-family:var(--display);font-size:12px;letter-spacing:.14em;color:#F7B9A6}
.b{display:block;text-align:center;background:#F7B9A6;color:#2A1712;font-weight:700;font-size:16px;padding:15px;border-radius:14px;border:0;font-family:inherit;cursor:pointer;width:100%;flex-shrink:0}
.b:disabled{opacity:.5;cursor:default}
.b2{display:block;text-align:center;background:transparent;color:#FFF6EE;font-weight:700;font-size:14px;padding:12px;border-radius:14px;border:1.5px solid #3A4060;font-family:inherit;cursor:pointer;width:100%}
.lnk{font-size:12.5px;color:#B9BCCB;text-align:center;text-decoration:underline;text-underline-offset:3px;background:none;border:0;font-family:inherit;cursor:pointer}
.aip{position:absolute;top:8px;right:8px;z-index:3;font-size:11.5px;font-weight:700;background:rgba(16,20,33,.72);color:#FFF6EE;padding:3px 8px;border-radius:999px}
/* 컷(사진 한 칸). 사진은 크게, 아래로 어둡게 */
.cut{position:relative;border-radius:10px;overflow:hidden;background:#1B2135;flex-shrink:0}
.cut img{width:100%;height:100%;object-fit:cover;object-position:center 20%;display:block}
.cut.dk::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,20,33,0) 45%,rgba(16,20,33,.85) 100%);pointer-events:none}
.cut .nm{position:absolute;left:9px;bottom:8px;z-index:2;font-family:var(--display);font-weight:700;font-size:15px;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.cut .nm i{font-style:normal;font-weight:400;font-size:12px;margin-left:3px}
.cap{position:absolute;z-index:2;background:#FFF8E7;color:#1B1A1A;font-family:var(--display);font-size:12.5px;line-height:1.45;padding:6px 9px;border-radius:3px;max-width:82%;box-shadow:0 2px 6px rgba(0,0,0,.25)}
.sbt{position:absolute;left:10px;right:10px;bottom:10px;z-index:2;text-align:center;font-family:var(--display);font-size:13.5px;line-height:1.5;text-shadow:0 1px 5px rgba(0,0,0,.85)}
/* 말풍선(그) · 내 말풍선 · 속마음 */
.bub{position:relative;align-self:flex-start;background:#fff;color:#141414;font-family:var(--bub);font-size:14.5px;line-height:1.5;padding:10px 14px;border-radius:20px;max-width:84%}
.bub::after{content:"";position:absolute;left:22px;bottom:-7px;border:8px solid transparent;border-top-color:#fff;border-bottom:0}
.bub.on{position:absolute;z-index:2}
.me{align-self:flex-end;background:#F7B9A6;color:#2A1712;font-family:var(--bub);font-size:14.5px;line-height:1.5;padding:10px 14px;border-radius:20px 20px 6px 20px;max-width:80%}
.inner{align-self:flex-end;background:#FFF8E7;color:#3A3020;font-family:var(--display);font-size:12.5px;padding:6px 10px;border-radius:3px}
.wait{align-self:flex-start;font-size:12.5px;color:#9FD3F5;font-family:var(--bub)}
.inp{display:flex;gap:8px;flex-shrink:0}
.inp input{flex:1;min-width:0;font:inherit;font-family:var(--bub);font-size:15px;padding:12px 14px;border-radius:999px;border:1.5px solid #3A4060;background:#161B2C;color:#FFF6EE}
.inp button{font:inherit;font-weight:700;font-size:14px;padding:0 16px;border-radius:999px;border:0;background:#F7B9A6;color:#2A1712;cursor:pointer}
.inp button:disabled{opacity:.45}
/* 카드 */
.pc{display:flex;flex-direction:column;gap:5px;background:none;border:0;padding:0;font-family:inherit;text-align:left;cursor:pointer;color:#FFF6EE;width:100%;min-width:0}
.pc .ln{font-family:var(--display);font-size:12.5px;line-height:1.45;color:#E9E3DA;padding:0 2px}
.pc .meta{font-size:12px;color:#8C90A3;padding:0 2px}
.g2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 9px}
.g3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}
.ring{outline:3px solid #F7B9A6;outline-offset:-3px}.ring.f{outline-color:#E8B04A}.ring.a{outline-color:#9FD3F5}
.mk{position:absolute;top:8px;left:8px;z-index:3;width:24px;height:24px;border-radius:50%;background:#F7B9A6;color:#2A1712;font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.mk.f{background:#E8B04A}
.tag{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 8px;border-radius:999px;background:#F7B9A6;color:#2A1712}.tag.n{background:#9FD3F5;color:#0F1A24}
.note{background:#1B2135;border-radius:12px;padding:11px 13px;font-size:13px;line-height:1.55;color:#D8DAE5}
.fbar{margin:0 -16px;padding:11px 16px;background:#E8B04A;font-size:12px;color:#2A1D05;font-weight:700}
/* 엔딩 카드 */
.endc{position:relative;flex:1;min-height:0;border-radius:18px;overflow:hidden;background:#000}
.endc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.endc::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,20,33,.15) 0%,rgba(16,20,33,0) 30%,rgba(16,20,33,.92) 78%)}
.endc .in{position:absolute;left:16px;right:16px;bottom:16px;z-index:2;display:flex;flex-direction:column;gap:9px}
.endc .big{font-family:var(--display);font-weight:700;font-size:23px;line-height:1.3}
.logo{font-family:var(--display);font-weight:700;letter-spacing:-.3px}.logo b{color:#F7B9A6}
/* 프로필 */
.ov{position:absolute;inset:0;z-index:5;background:#101421;display:flex;flex-direction:column;color:#FFF6EE;word-break:keep-all}
.ov .scr{margin:0;padding:0 16px 12px}
.ptop{position:relative;height:360px;flex-shrink:0;margin:0 -16px}
.pslide{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;height:100%}
.pslide>.cut{flex:0 0 100%;scroll-snap-align:start;height:100%;border-radius:0}
.dots{position:absolute;bottom:12px;left:0;right:0;display:flex;gap:4px;justify-content:center;z-index:3}.dots b{width:16px;height:3px;border-radius:2px;background:rgba(255,255,255,.4)}.dots b.on{background:#fff}
.back{position:absolute;top:46px;left:12px;z-index:6;width:34px;height:34px;border-radius:50%;background:rgba(16,20,33,.8);border:0;font-size:18px;cursor:pointer;color:#FFF6EE}
.pname{font-family:var(--display);font-weight:700;font-size:32px;margin:12px 0 0;line-height:1.1}.pname small{font:500 17px var(--body);margin-left:5px;color:#B9BCCB}
.plab{font-size:11.5px;font-weight:700;color:#F7B9A6;letter-spacing:.06em;margin-top:6px}
details.more{border-top:1px solid #262C42;padding-top:10px}
details.more summary{font-size:13.5px;font-weight:700;cursor:pointer;color:#B9BCCB}
details.more p{font-size:13.5px;line-height:1.7;margin:8px 0 0;color:#D8DAE5}
.pbar{display:flex;gap:8px;padding:10px 16px 16px;background:#101421;flex-shrink:0}
@media (prefers-reduced-motion:no-preference){.s{animation:in .2s ease-out}.ov{animation:up .22s ease-out}.pop{animation:pop .25s ease-out}@keyframes in{from{opacity:.4;transform:translateX(8px)}to{opacity:1;transform:none}}@keyframes up{from{opacity:.5;transform:translateY(14px)}to{opacity:1;transform:none}}@keyframes pop{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}}
/* 8판: 풀사이즈 한 컷 첫 화면 · 세로 웹툰 대화 */
.s.full{padding:0;gap:0}
.hero{position:absolute;inset:0;background:#0F1A24}
.hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 30%}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(15,26,36,.35) 0%,rgba(15,26,36,0) 16%,rgba(15,26,36,0) 44%,rgba(15,26,36,.94) 80%)}
.hero .t{position:absolute;z-index:3;left:18px;right:18px;bottom:20px;display:flex;flex-direction:column;gap:11px}
.hero .top{position:absolute;z-index:3;top:40px;left:18px;right:18px;display:flex;align-items:center}
.hero h3{font-family:"Song Myung",var(--display);font-weight:400;font-size:38px;line-height:1.18;letter-spacing:-.5px;text-shadow:0 2px 16px rgba(0,0,0,.7)}
.hero .sub{color:#DDE3EA;font-family:var(--bub);font-size:14px}
.hero .aip{top:40px;right:16px}
.hero .fbar{position:absolute;z-index:4;top:0;left:0;right:0;margin:0}
.wt{flex:1 1 0;min-height:0;overflow-y:auto;background:#0F1A24;display:flex;flex-direction:column;gap:0;padding:0 0 10px}
.wt::-webkit-scrollbar{display:none}
.wt .pn{position:relative;flex-shrink:0}
.wt .pn img{width:100%;display:block}
.wt .pn .box{position:absolute;z-index:2;background:#FFF8E7;color:#2B2622;font-family:var(--bub);font-size:13px;line-height:1.5;padding:7px 10px;border-radius:2px;box-shadow:0 2px 6px rgba(0,0,0,.3);max-width:78%}
.wt .say{position:relative;align-self:flex-start;margin:14px 16px 4px;background:#fff;color:#141414;font-family:var(--bub);font-size:15px;line-height:1.5;padding:10px 15px;border-radius:20px;max-width:80%}
.wt .say::after{content:"";position:absolute;left:24px;top:-8px;border:8px solid transparent;border-bottom-color:#fff;border-top:0}
.wt .pn .say{position:absolute;margin:0;left:14px;bottom:14px;box-shadow:0 3px 10px rgba(0,0,0,.35)}
.wt .pn .say::after{top:auto;bottom:-8px;border-bottom:0;border-top:8px solid #fff;border-left-color:transparent;border-right-color:transparent}
.wt .mine{align-self:flex-end;margin:12px 16px 2px;background:#9FD3F5;color:#0F1A24;font-family:var(--bub);font-size:15px;line-height:1.5;padding:10px 15px;border-radius:20px;max-width:78%;position:relative}
.wt .mine::after{content:"";position:absolute;right:22px;top:-8px;border:8px solid transparent;border-bottom-color:#9FD3F5;border-top:0}
.wt .think{align-self:center;margin:12px 16px 0;background:#FFF8E7;color:#3A3020;font-family:var(--bub);font-size:13.5px;line-height:1.5;padding:6px 10px;border-radius:2px}
.wt .gap{height:14px;flex-shrink:0}
.wt .wait{margin:12px 16px 0}
.wbar{flex-shrink:0;background:#0F1A24;padding:10px 14px 14px;display:flex;flex-direction:column;gap:8px;border-top:1px solid #1E2C3A}
.wbar .inp input{background:#16242F;border-color:#2A3A4A}
.wbar .inp button,.wbar .b{background:#9FD3F5;color:#0F1A24}
.wbar .tiny{color:#7F93A6}
.wbar .lnk{color:#9FB3C6}
.wt .beat{align-self:center;margin:16px 16px 4px;background:#FFF8E7;color:#2B2622;font-family:var(--bub);font-size:13px;line-height:1.5;padding:8px 12px;border-radius:2px;text-align:center;box-shadow:0 2px 6px rgba(0,0,0,.3)}
.wbar .inp input:focus-visible{outline:2px solid #9FD3F5;outline-offset:1px}
.whead{position:absolute;z-index:4;top:40px;left:12px;font-family:var(--bub);font-size:12px;letter-spacing:.1em;color:#FFF6EE;background:rgba(15,26,36,.72);padding:3px 9px;border-radius:999px}
.altn{position:absolute;z-index:9;left:16px;right:16px;bottom:120px;background:#E8B04A;color:#231A05;font-size:12px;line-height:1.4;border-radius:10px;padding:6px 9px}
.lock{position:relative;flex:1;min-height:0;overflow:hidden;background:#000}
.lock>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:blur(3px) brightness(.55)}
.lock .lk{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;padding:60px 14px 26px;gap:6px;color:#fff}
.lock .clk{font-size:64px;font-weight:300;line-height:1}
.lock .day{font-size:14px;color:#E4E6EE;margin-bottom:22px}
.lock .nt{box-sizing:border-box;width:100%;text-align:left;background:rgba(245,245,250,.86);color:#151821;border:0;border-radius:18px;padding:12px 14px;font:inherit;font-size:14px;line-height:1.45;cursor:pointer}
.lock .nt .nh{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:#5A5F6E;margin-bottom:3px}
.lock .tiny{color:#D5D8E2}
.mhead{display:flex;align-items:center;gap:9px;flex-shrink:0;padding-bottom:8px;border-bottom:1px solid #262B40}
.mhead img{width:34px;height:34px;border-radius:50%;object-fit:cover;object-position:center 20%}
.mhead b{font-size:15px}
/* 몰입판 장면: 화면 꽉 찬 세로 컷 + 아래 대사창. 카메라 = 지수의 눈 */
.stage{position:absolute;inset:0;overflow:hidden;background:#05060C;color:#FFF6EE;font-family:var(--body)}
.stage .bg{position:absolute;inset:0}
.stage .bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 18%;transform:scale(1.06)}
.stage .shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(5,6,12,.5) 0,rgba(5,6,12,0) 15%,rgba(5,6,12,0) 46%,rgba(5,6,12,.6) 66%,rgba(5,6,12,.92) 90%)}
.stage .hud{position:absolute;z-index:3;top:34px;left:14px;right:14px;display:flex;align-items:center;gap:8px;font-size:12px}
.stage .hud .ttl{font-family:var(--display);font-weight:700;letter-spacing:.06em;text-shadow:0 1px 6px rgba(0,0,0,.7)}
.stage .hud .chip{background:rgba(5,6,12,.5);border:1px solid rgba(255,255,255,.18);border-radius:999px;padding:3px 9px;font-size:11.5px;font-weight:700;color:#FFF6EE;font-family:inherit}
.stage .hud button.chip{cursor:pointer}
.stage .walk{position:absolute;z-index:3;top:62px;left:14px;display:flex;gap:4px;align-items:center;font-size:11px;color:#E9E3DA;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.stage .walk i{width:16px;height:3px;border-radius:2px;background:rgba(255,255,255,.3)}.stage .walk i.on{background:#F7B9A6}
.stage .low{position:absolute;z-index:3;left:0;right:0;bottom:0;padding:0 16px 14px;display:flex;flex-direction:column;gap:10px}
.stage .nar{font-family:var(--display);font-size:14px;line-height:1.6;color:#F3EDE4;text-shadow:0 1px 8px rgba(0,0,0,.95);padding-left:17px}
.stage .myl{align-self:flex-end;max-width:84%;font-family:var(--bub);font-size:14px;line-height:1.5;color:#CFE6F6;text-shadow:0 1px 6px #000;text-align:right}.stage .myl::before{content:"나 · ";color:#9FD3F5;font-weight:700;font-size:11.5px}
.stage .dlg{padding:12px 6px 12px 15px;background:linear-gradient(to right,rgba(8,9,15,.5),rgba(8,9,15,.08));-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-left:2px solid #F7B9A6;border-radius:2px 14px 14px 2px;min-height:86px}
.stage .dlg .nm{font-family:var(--display);font-weight:700;font-size:11.5px;color:#F7B9A6;letter-spacing:.2em;margin-bottom:4px}
.stage .dlg .ln{font-family:var(--display);font-size:17.5px;line-height:1.58;color:#FFF6EE;min-height:1.6em;text-shadow:0 2px 8px rgba(0,0,0,.8)}
.stage .dlg .dots{display:inline-flex;gap:5px;padding:8px 0}.stage .dlg .dots b{width:6px;height:6px;border-radius:50%;background:#F7B9A6;opacity:.35}
.stage .thk{font-family:var(--display);font-style:italic;font-size:13.5px;color:#D3CDC4;text-shadow:0 1px 6px #000;padding-left:17px}
.stage .inp input{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#FFF6EE;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.stage .inp input::placeholder{color:#B5B8C6}
.stage .inp button{background:#F7B9A6;color:#2A1712}
.stage .tiny{color:#B5B8C6}
.stage .nt2{position:absolute;z-index:4;top:86px;left:12px;right:12px;background:rgba(245,245,250,.9);color:#151821;border-radius:16px;padding:10px 13px;font-size:13.5px;line-height:1.45}
.stage .nt2 .nh{display:flex;justify-content:space-between;font-size:11px;color:#5A5F6E;margin-bottom:2px}
.stage .log{position:absolute;inset:0;z-index:6;background:rgba(5,6,12,.92);padding:40px 16px 16px;display:flex;flex-direction:column;gap:10px;overflow-y:auto}
.stage .log .l{font-family:var(--display);font-size:14.5px;line-height:1.55}.stage .log .l b{color:#F7B9A6;margin-right:6px}.stage .log .l.me{color:#BFE0F7}.stage .log .l.me b{color:#9FD3F5}
.stage .log .l.n{font-style:italic;color:#B5B8C6;font-size:13px;text-align:center}
@media (prefers-reduced-motion:no-preference){
.stage .bg img{animation:kb 22s ease-in-out infinite alternate}
.stage .bg img.nw{animation:fin 1s ease-out,kb 22s ease-in-out infinite alternate}
.stage .nar.nw{animation:fup 1.4s ease-out}
.stage .dlg .dots b{animation:blink 1.1s infinite}.stage .dlg .dots b:nth-child(2){animation-delay:.18s}.stage .dlg .dots b:nth-child(3){animation-delay:.36s}
@keyframes kb{from{transform:scale(1.06) translate(0,0)}to{transform:scale(1.14) translate(-1.5%,-1.5%)}}
@keyframes fin{from{opacity:0}to{opacity:1}}
@keyframes fup{0%{opacity:0;transform:translateY(6px)}30%{opacity:1;transform:none}}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}}
.slots{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;flex-shrink:0}
.slot{display:flex;flex-direction:column;gap:6px;min-width:0}
.slot .box{position:relative;height:132px;border-radius:12px;overflow:hidden;background:#161B2C;border:1.5px dashed #3A4060;display:flex;align-items:center;justify-content:center;font-family:var(--display);font-size:30px;color:#3A4060}
.slot .box.on{border:0}.slot .box img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%}
.slot .l{font-size:11.5px;font-weight:700}.slot .n{font-family:var(--display);font-weight:700;font-size:16px;line-height:1.2}.slot .n.e{color:#5A5F78;font-weight:400;font-size:13px}
.slot.sm .l{color:#F7B9A6}.slot.sf .l{color:#E8B04A}.slot.sa .l{color:#9FD3F5}
.slot.sm .box.on{outline:3px solid #F7B9A6;outline-offset:-3px}.slot.sf .box.on{outline:3px solid #E8B04A;outline-offset:-3px}.slot.sa .box.on{outline:3px solid #9FD3F5;outline-offset:-3px}
.deck{flex:1 1 0;min-height:0;display:flex;overflow-x:auto;scroll-snap-type:x mandatory;margin:0 -16px;gap:0}
.deck::-webkit-scrollbar{display:none}
.sc{box-sizing:border-box;flex:0 0 100%;scroll-snap-align:start;padding:0 16px;display:flex;flex-direction:column;gap:9px;min-height:0}
.sc .pic{position:relative;flex:1 1 0;min-height:0;border-radius:14px;overflow:hidden;background:#1B2135}
.sc .pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 25%}
.sc .pic::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,20,33,.55) 0%,rgba(16,20,33,0) 24%,rgba(16,20,33,0) 52%,rgba(16,20,33,.94) 100%);pointer-events:none}
.sc .when{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--display);font-size:13px;letter-spacing:.06em;color:#FFF6EE}
.sc .txt{position:absolute;left:12px;right:12px;bottom:12px;z-index:2;display:flex;flex-direction:column;gap:9px}
.sc .ji{font-family:var(--display);font-size:14px;line-height:1.6;color:#F1ECE4;text-shadow:0 1px 4px rgba(0,0,0,.7)}
.sc .who2{display:flex;align-items:baseline;gap:8px;flex-shrink:0}
.sc .who2 b{font-family:var(--display);font-size:18px}.sc .who2 span{font-size:12.5px;color:#8C90A3}
.sc .who2 button{margin-left:auto}
.ddots{display:flex;gap:5px;justify-content:center;flex-shrink:0}.ddots b{width:6px;height:6px;border-radius:50%;background:#3A4060}.ddots b.on{background:#F7B9A6;width:16px;border-radius:3px}
.rv{display:flex;gap:10px;align-items:center;padding:7px 0;border-bottom:1px solid #1F2539}
.rv img{width:46px;height:58px;object-fit:cover;object-position:center 25%;border-radius:8px;flex-shrink:0}
.rv .t{flex:1;min-width:0;font-size:13px;line-height:1.45}.rv .t b{font-family:var(--display);font-size:15px;display:block}
.rv.pk img{outline:3px solid #E8B04A;outline-offset:-3px}

/* 배포판에서 더한 것 */
.top2{display:flex;align-items:center;gap:8px;flex-shrink:0}
.chip2{font:inherit;font-size:12px;font-weight:700;padding:5px 11px;border-radius:999px;border:1px solid #3A4060;background:#161B2C;color:#FFF6EE;cursor:pointer}
.row{display:flex;gap:11px;align-items:center;background:#161B2C;border-radius:14px;padding:10px 12px;border:0;color:#FFF6EE;font:inherit;text-align:left;width:100%;cursor:pointer}
.row img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:center 20%;flex-shrink:0}
.row .t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}.row .t b{font-family:var(--display);font-size:16px}.row .t span{font-size:12.5px;color:#A4A8BA}
.row .st{font-size:12px;font-weight:700;color:#8C90A3;text-align:right;flex-shrink:0;max-width:40%}.row .st.new{color:#F7B9A6}
.row[disabled]{cursor:default;opacity:.62}
.lab{font-size:11px;font-weight:700}.lab.sm{color:#F7B9A6}.lab.sa{color:#9FD3F5}
.ntc{box-sizing:border-box;width:100%;text-align:left;background:rgba(245,245,250,.92);color:#151821;border:0;border-radius:18px;padding:11px 14px;font:inherit;font-size:14px;line-height:1.45;cursor:pointer}
.ntc .nh{display:flex;justify-content:space-between;align-items:center;font-size:11.5px;color:#5A5F6E;margin-bottom:3px}
.dsep{align-self:center;font-size:11.5px;color:#7C8196;margin:6px 0 0}
.mscr{flex:1 1 0;min-height:0;overflow-y:auto;margin:0 -16px;padding:8px 16px;display:flex;flex-direction:column;gap:9px}
.mscr::-webkit-scrollbar{display:none}
.mscr .bub::after{display:none}.mscr .bub{border-radius:20px 20px 20px 6px}
.toast{position:absolute;z-index:20;left:16px;right:16px;bottom:96px;background:#E8B04A;color:#231A05;font-size:13.5px;font-weight:700;border-radius:12px;padding:10px 12px;text-align:center}
.shop{position:absolute;inset:0;z-index:15;background:rgba(5,6,12,.86);display:flex;align-items:flex-end}
.shop .in{width:100%;background:#161B2C;border-radius:20px 20px 0 0;padding:18px 16px max(18px,env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:10px}
.pk2{display:flex;align-items:center;gap:10px;background:#101421;border-radius:12px;padding:12px}
.pk2 b{font-size:15px}.pk2 span{margin-left:auto;font-size:14px;color:#B9BCCB}
.pk2 button{font:inherit;font-size:12.5px;font-weight:700;padding:7px 11px;border-radius:999px;border:0;background:#3A4060;color:#B9BCCB}
.pk3{display:flex;gap:8px}.pk3 .b{flex:2;width:auto}.pk3 .b2{flex:1;width:auto}
.dock{display:flex;flex-direction:column;gap:8px;flex-shrink:0}
.wl{display:flex;gap:8px}.wl input{flex:1;min-width:0;font:inherit;padding:11px 13px;border-radius:12px;border:1.5px solid #3A4060;background:#161B2C;color:#FFF6EE}.wl button{font:inherit;font-weight:700;font-size:14px;padding:0 14px;border-radius:12px;border:0;background:#9FD3F5;color:#0F1A24}
.ld{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:var(--display);color:#B9BCCB}
.pickc{display:flex;flex-direction:column;gap:8px;background:#1B2135;border-radius:14px;padding:12px}
.picked{position:absolute;top:12px;right:12px;z-index:3;background:#F7B9A6;color:#2A1712;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px}
/* 노치 폰: 위쪽 고정값을 안전 영역 기준으로 */
.stage .hud{top:calc(var(--top) + 18px)}
.stage .walk{top:calc(var(--top) + 46px)}
.hero .top,.hero .aip{top:calc(var(--top) + 24px)}
.stage .nt2{top:calc(var(--top) + 70px)}