:root{--ink:#f6efe2;--ink2:#d2c9b8;--ink3:#948b7d;--gold:#e6c27a}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#000;color:var(--ink);font-family:'Noto Sans KR',system-ui,sans-serif;overflow:hidden}
#app{position:fixed;inset:0;max-width:540px;margin:0 auto;overflow:hidden;background:#000}
.sc{position:absolute;inset:0;opacity:0;pointer-events:none;transition:opacity .9s ease}
.sc.on{opacity:1;pointer-events:auto}
.bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000 center/cover no-repeat}
.kb{animation:kb 16s ease-out forwards}
@keyframes kb{from{transform:scale(1.03)}to{transform:scale(1.14) translateY(-1.5%)}}
.shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,rgba(0,0,0,.55) 0,rgba(0,0,0,0) 22%,rgba(0,0,0,0) 46%,rgba(0,0,0,.84) 78%,rgba(0,0,0,.95) 100%)}
.top{position:absolute;left:0;right:0;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 0;pointer-events:none}
.top b{font-family:'Song Myung',serif;font-weight:400;font-size:16px;letter-spacing:.14em;color:var(--gold)}
.top button{pointer-events:auto;padding:6px 10px;background:rgba(0,0,0,.45);border:1px solid rgba(246,239,226,.3);color:var(--ink2);font:500 12px 'Noto Sans KR',sans-serif}
.prog{position:absolute;left:18px;right:18px;top:calc(env(safe-area-inset-top,0px) + 46px);z-index:30;display:flex;gap:4px}
.prog i{flex:1;height:2px;background:rgba(246,239,226,.18)}
.prog i.on{background:var(--gold)}
.cap{position:absolute;left:0;right:0;bottom:0;z-index:5;padding:0 22px calc(env(safe-area-inset-bottom,0px) + 34px)}
.who{display:flex;align-items:center;gap:9px;font-size:14px;font-weight:700;letter-spacing:.04em;color:var(--ink2)}
.who:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--c,#e6c27a);box-shadow:0 0 12px var(--c,#e6c27a)}
.who em{font-style:normal;font-weight:500;color:var(--ink3)}
.line{margin-top:12px;font-family:'Noto Serif KR',serif;font-weight:700;font-size:22px;line-height:1.55;letter-spacing:-.02em;text-shadow:0 2px 18px rgba(0,0,0,.7);min-height:68px}
.line span{opacity:0;transition:opacity .5s}
.line span.v{opacity:1}
.why{display:inline-block;max-width:100%;line-height:1.5;margin-top:14px;padding:6px 10px;border:1px solid rgba(230,194,122,.45);background:rgba(10,8,6,.6);font-size:13px;color:var(--ink2);opacity:0;transition:opacity .6s}
.why.v{opacity:1}
.why b{color:var(--gold);margin-right:6px}
.tap{position:absolute;right:22px;bottom:calc(env(safe-area-inset-bottom,0px) + 12px);z-index:6;font-size:11.5px;letter-spacing:.08em;color:var(--ink3);animation:bl 2.4s ease-in-out infinite}
@keyframes bl{50%{opacity:.35}}
.mark{position:absolute;left:18px;top:calc(env(safe-area-inset-top,0px) + 60px);z-index:6;padding:4px 9px;background:rgba(0,0,0,.55);border:1px solid rgba(230,194,122,.5);font-size:12px;color:var(--gold)}
.btn{display:block;width:100%;margin-top:20px;padding:16px 0;background:var(--gold);border:0;color:#1a1206;font:900 16px 'Noto Sans KR',sans-serif}
/* 입력 */
.form{position:absolute;left:0;right:0;bottom:0;z-index:6;padding:0 22px calc(env(safe-area-inset-bottom,0px) + 28px)}
.form h1{font-family:'Song Myung',serif;font-weight:400;font-size:40px;letter-spacing:.04em;text-shadow:0 2px 24px rgba(0,0,0,.8)}
.form p{margin-top:8px;font-size:14.5px;line-height:1.7;color:var(--ink2)}
.row{display:flex;gap:6px;margin-top:12px}
.row input,.row select{flex:1;min-width:0;padding:13px 10px;background:rgba(12,10,14,.78);border:1px solid rgba(246,239,226,.25);color:var(--ink);font:500 15px 'Noto Sans KR',sans-serif;border-radius:0;-webkit-appearance:none}
.row input::placeholder{color:var(--ink3)}
.seg{display:flex;border:1px solid rgba(246,239,226,.25)}
.seg button{flex:1;padding:12px 0;background:rgba(12,10,14,.78);border:0;color:var(--ink3);font:700 14px 'Noto Sans KR',sans-serif}
.seg button.on{background:rgba(230,194,122,.18);color:var(--gold)}
.err{margin-top:8px;font-size:13px;color:#f2a39a;min-height:18px}
/* 회의장 */
#pano{position:absolute;inset:0;overflow:hidden;touch-action:none}
#pano .strip{position:absolute;top:0;bottom:0;left:0;display:flex;will-change:transform}
#pano .pv{position:relative;height:100%;flex:none}
#pano .pv img{display:block;height:100%;width:auto;user-select:none;-webkit-user-drag:none}
#pano .gl{position:absolute;width:13%;aspect-ratio:1;transform:translate(-50%,-50%) scale(.6);border-radius:50%;opacity:0;mix-blend-mode:screen;transition:opacity 1.6s ease,transform 1.6s ease;pointer-events:none}
#pano .gl.on{opacity:var(--o);transform:translate(-50%,-50%) scale(1)}
#pano .dk{position:absolute;width:12%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,rgba(2,2,8,.88) 0,rgba(2,2,8,.7) 38%,rgba(2,2,8,0) 70%);opacity:0;transition:opacity 1.6s;pointer-events:none}
#pano .dk.on{opacity:1}
.p-head{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 64px);z-index:6;text-align:center;pointer-events:none}
.p-head small{display:block;font-size:12.5px;letter-spacing:.2em;color:var(--gold)}
.p-head h2{margin-top:6px;font-family:'Song Myung',serif;font-weight:400;font-size:34px;letter-spacing:.06em;text-shadow:0 2px 24px rgba(0,0,0,.85)}
.p-cnt{display:flex;justify-content:center;gap:6px;margin-top:14px;flex-wrap:wrap;padding:0 12px}
.p-cnt span{display:flex;align-items:center;gap:6px;padding:5px 9px;background:rgba(6,6,10,.66);border:1px solid rgba(246,239,226,.16);font-size:13px;color:var(--ink2);opacity:0;transition:opacity .8s}
.p-cnt span.on{opacity:1}
.p-cnt span i{width:8px;height:8px;border-radius:50%;background:var(--c)}
.p-cnt span b{color:var(--ink)}
.p-cnt span.zero{color:var(--ink3)}
.p-cnt span.zero i{background:transparent;border:1px solid var(--c)}
.drag{position:absolute;left:50%;top:calc(env(safe-area-inset-top,0px) + 196px);z-index:6;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font-size:12.5px;color:var(--ink2);pointer-events:none;transition:opacity .6s;white-space:nowrap}
.drag:before,.drag:after{content:"";width:26px;height:1px;background:var(--ink3)}
/* 무료 끝 · 판결 */
.endf{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:center;padding:0 28px;background:radial-gradient(120% 70% at 50% 40%,rgba(20,14,30,.55),rgba(0,0,0,.94))}
.endf small{font-size:12.5px;letter-spacing:.2em;color:var(--gold)}
.endf h2{margin-top:14px;font-family:'Song Myung',serif;font-weight:400;font-size:38px;line-height:1.25}
.endf p{margin-top:16px;font-size:15px;line-height:1.75;color:var(--ink2)}
.endf ul{margin-top:22px;list-style:none;border-top:1px solid rgba(246,239,226,.14)}
.endf li{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid rgba(246,239,226,.14);font-size:14.5px}
.endf li em{font-style:normal;color:var(--ink3);font-size:13px}
.vd2{position:absolute;inset:0;z-index:4;overflow-y:auto;-webkit-overflow-scrolling:touch;background:linear-gradient(180deg,rgba(0,0,0,.35),rgba(0,0,0,.75));word-break:keep-all;-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent calc(env(safe-area-inset-top,0px) + 44px),#000 calc(env(safe-area-inset-top,0px) + 84px));mask-image:linear-gradient(180deg,transparent 0,transparent calc(env(safe-area-inset-top,0px) + 44px),#000 calc(env(safe-area-inset-top,0px) + 84px))}
.vin{padding:calc(env(safe-area-inset-top,0px) + 64px) 18px calc(env(safe-area-inset-bottom,0px) + 40px);max-width:460px;margin:0 auto}
.vhd{position:relative;text-align:center;padding:30px 18px 26px;background:#f3ead6;color:#1d1710;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);animation:vup 1.1s ease both}
.vhd:before{content:"";position:absolute;inset:8px;border:1px solid rgba(29,23,16,.35);pointer-events:none}
.vhd small{display:block;font-size:12px;letter-spacing:.24em;color:#7a6a52}
.vhd h3{margin-top:8px;font-family:'Song Myung',serif;font-weight:400;font-size:40px;letter-spacing:.2em}
.vhd p{margin-top:8px;font-size:13px;color:#5b4f3e;line-height:1.6}
.vst{position:absolute;right:16px;top:16px;width:58px;height:58px;display:flex;align-items:center;justify-content:center;text-align:center;font-family:'Song Myung',serif;font-size:13px;line-height:1.15;color:#fff;background:#a3261f;transform:rotate(-8deg);box-shadow:0 0 0 2px #f3ead6,0 0 0 3px #a3261f;animation:vstamp .7s cubic-bezier(.2,1.6,.4,1) .9s both}
.vst.sm{position:relative;right:auto;top:auto;margin:0 auto 14px;width:54px;height:54px;animation:none}
@keyframes vstamp{0%{transform:rotate(-8deg) scale(2.4);opacity:0}100%{transform:rotate(-8deg) scale(1);opacity:1}}
@keyframes vup{0%{transform:translateY(18px);opacity:0}100%{transform:none;opacity:1}}
.vone{margin-top:14px;padding:22px 18px;text-align:center;border:1px solid rgba(230,194,122,.45);background:rgba(20,14,8,.72)}
.vone span{display:block;font-size:11.5px;letter-spacing:.24em;color:var(--gold)}
.vone p{margin-top:10px;font-family:'Song Myung',serif;font-size:27px;line-height:1.5;color:#f6efe2}
.vno{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:16px;background:rgba(20,14,8,.72);border:1px solid rgba(255,255,255,.08)}
.vno i{flex:none;width:56px;height:56px;border-radius:50%;background:#222 center 20%/cover;box-shadow:0 0 0 2px var(--gold)}
.vno b{font-size:13px;color:var(--gold)}
.vno p{margin-top:4px;font-size:14px;line-height:1.7;color:var(--ink)}
.vsec{margin-top:14px;padding:16px;background:rgba(20,14,8,.72);border:1px solid rgba(255,255,255,.08)}
.vsec h4{font-family:'Song Myung',serif;font-weight:400;font-size:19px;color:var(--gold);margin-bottom:10px}
.vgd{display:flex;gap:12px;align-items:center;padding:10px 0;border-top:1px solid rgba(255,255,255,.07)}
.vgd i{flex:none;width:46px;height:46px;border-radius:50%;background:#222 center 18%/cover;box-shadow:0 0 0 1.5px var(--c);filter:saturate(.85)}
.vgd b{display:block;font-size:14.5px;color:var(--ink)}
.vgd em{font-style:normal;font-size:11px;margin-left:8px;color:var(--c);letter-spacing:.06em}
.vgd p{margin-top:2px;font-size:13.5px;line-height:1.6;color:var(--ink2)}
.vgd.on i{width:56px;height:56px;box-shadow:0 0 0 2px var(--c),0 0 22px var(--c);filter:none}
.vgd.on p{color:var(--ink)}
.vmap{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.vmap div{padding:9px 4px;text-align:center;border:1px solid rgba(255,255,255,.1);font-size:12px;color:var(--ink3)}
.vmap b{display:block;font-size:14px;color:var(--ink2)}
.vmap span{display:block;min-height:14px;font-size:10.5px;margin-top:2px}
.vmap .gd{border-color:var(--gold);background:rgba(230,194,122,.12)}
.vmap .gd b,.vmap .gd span{color:var(--gold)}
.vmap .bad{border-color:#c0473c;background:rgba(192,71,60,.16)}
.vmap .bad b,.vmap .bad span{color:#f0a097}
.vnote{margin-top:10px;font-size:12.5px;line-height:1.6;color:var(--ink2)}
.vtwo{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.vtwo h4{font-size:16px;margin-bottom:6px}
.vtwo p{font-size:13.5px;line-height:1.6;color:var(--ink)}
.vend{margin-top:22px;text-align:center}
.vend p{font-size:13.5px;line-height:1.7;color:var(--ink2)}
.vend .btn{margin-top:16px}
.verdict{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;padding:0 22px;background:radial-gradient(100% 60% at 50% 45%,rgba(40,26,10,.5),rgba(0,0,0,.95))}
.vp{position:relative;width:100%;padding:34px 24px 28px;background:#f3ead6;color:#1d1710;box-shadow:0 30px 80px -20px rgba(0,0,0,.8);transform:translateY(16px) scale(.97);opacity:0;transition:all 1.1s ease .2s}
.sc.on .vp{transform:none;opacity:1}
.vp:before{content:"";position:absolute;inset:8px;border:1px solid rgba(29,23,16,.35);pointer-events:none}
.vp small{display:block;text-align:center;font-size:12px;letter-spacing:.24em;color:#7a6a52}
.vp h3{margin-top:10px;text-align:center;font-family:'Song Myung',serif;font-weight:400;font-size:29px}
.vp p{margin-top:16px;font-family:'Noto Serif KR',serif;font-weight:700;font-size:18.5px;line-height:1.75;text-align:center}
.vp dl{display:grid;grid-template-columns:auto 1fr;gap:8px 14px;margin-top:20px;padding-top:16px;border-top:1px solid rgba(29,23,16,.25);font-size:14px}
.vp dt{color:#7a6a52}
.vp dd b{font-weight:900}
.seal{position:absolute;right:-8px;top:-22px;width:74px;height:74px;border-radius:50%;border:3px solid #b3261e;background:rgba(243,234,214,.6);color:#b3261e;display:flex;flex-direction:column;align-items:center;justify-content:center;font-family:'Song Myung',serif;font-size:15px;line-height:1.15;transform:rotate(-12deg) scale(2.4);opacity:0;transition:transform .35s cubic-bezier(.3,1.6,.5,1) 1.6s,opacity .2s 1.6s}
.sc.on .seal{transform:rotate(-12deg) scale(1);opacity:.92}
#fade{position:absolute;inset:0;z-index:1;background:#000;opacity:0;pointer-events:none;transition:opacity .22s}
#fade.on{opacity:1}
.sc{z-index:2}
.sc.clip .shade{background:linear-gradient(180deg,rgba(0,0,0,.45) 0,rgba(0,0,0,0) 20%,rgba(0,0,0,0) 54%,rgba(0,0,0,.78) 82%,rgba(0,0,0,.92) 100%)}
.title{position:absolute;left:0;right:0;top:38%;text-align:center;z-index:5;opacity:0;transition:opacity 1.4s}
.title.v{opacity:1}
.op small{display:block;font-size:12.5px;letter-spacing:.3em;color:var(--gold);margin-bottom:10px}
.opskip{display:block;margin:14px auto 0;background:none;border:0;color:var(--ink3);font:500 13px 'Noto Sans KR',sans-serif;text-decoration:underline;text-underline-offset:3px}
.opskip.top{position:absolute;right:18px;top:calc(env(safe-area-inset-top,0px) + 58px);margin:0;z-index:8;padding:7px 12px;border:1px solid rgba(246,239,226,.3);text-decoration:none;background:rgba(0,0,0,.35)}
.title small{display:block;font-size:12.5px;letter-spacing:.3em;color:var(--gold)}
.title h1{margin-top:10px;font-family:'Song Myung',serif;font-weight:400;font-size:44px;letter-spacing:.08em;text-shadow:0 2px 30px rgba(0,0,0,.9)}
.mon{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 92px);z-index:5;text-align:center;opacity:0;transform:scale(1.15);transition:opacity 1s .6s,transform 1.4s .6s}
.mon.v{opacity:1;transform:none}
.mon small{display:block;font-size:12.5px;letter-spacing:.24em;color:var(--gold)}
.mon b{display:block;margin-top:4px;font-family:'Song Myung',serif;font-weight:400;font-size:84px;line-height:1;text-shadow:0 4px 40px rgba(0,0,0,.9)}
.mon em{display:block;margin-top:8px;font-style:normal;font-size:13.5px;color:var(--ink2);text-shadow:0 2px 12px rgba(0,0,0,.9)}

.vid{position:absolute;inset:-14px;width:calc(100% + 28px);height:calc(100% + 28px);object-fit:cover;background:#000;z-index:0;opacity:0;transition:opacity .25s;will-change:transform}
.vid.on{opacity:1}
#fx{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.line.sub{opacity:0;transform:translateY(8px);transition:opacity .22s,transform .22s;min-height:0}
.line.sub.v{opacity:1;transform:none}
.who{transition:opacity .3s}
.sc.clip .cap{padding-bottom:calc(env(safe-area-inset-bottom,0px) + 46px)}

.chap{position:absolute;left:0;right:0;top:34%;z-index:5;text-align:center;opacity:0;transform:translateY(8px);transition:opacity .7s,transform .7s;pointer-events:none}
.chap.v{opacity:1;transform:none}
.chap b{display:inline-block;padding:10px 18px;background:rgba(6,5,8,.5);border-top:1px solid rgba(230,194,122,.55);border-bottom:1px solid rgba(230,194,122,.55);font-family:'Song Myung',serif;font-weight:400;font-size:22px;letter-spacing:.12em;color:#f3e6c8;text-shadow:0 2px 18px rgba(0,0,0,.8)}
.title em{display:block;margin-top:14px;font-style:normal;font-size:13px;letter-spacing:.24em;color:var(--ink2)}
.who em{margin-left:2px}
#p3 canvas{display:block;width:100%;height:100%;touch-action:none}