/* 드베르 모션 엔진 공통 모양 — 홈 히어로(index.html)와 같은 결. 1080×1080 무대, 먹보라 다크.
   규칙: 라일락은 면·띠로만(글자색은 --lil2 숫자·번호에만), 흰 이름표는 테·각진 그림자 없이 부드러운 그림자 하나.
   템플릿 고유 모양은 템플릿 파일이 <style> 로 더한다(M.css). */
@font-face{font-family:'Pretendard';font-weight:45 930;src:url(../fonts/Pretendard.woff2) format('woff2')}
@font-face{font-family:'Hanken';font-weight:100 900;src:url(../fonts/HankenGrotesk.woff2) format('woff2')}
:root{--bg:#26232D;--bg2:#1E1B24;--panel:#2E2A37;--fg:#F3F0F8;--fg2:#D9D3E6;--mute:#A9A2BA;--lil:#D6CBF0;--lil2:#B9A6F5;--ink:#1A1720;--line:rgba(214,203,240,.18);--line2:rgba(214,203,240,.32);--ok:#9FE3C9;--no:#F2A7B5}
html,body{margin:0;height:100%;overflow:hidden;background:var(--bg)}
#st{position:absolute;left:0;top:0;width:1080px;height:1080px;transform-origin:0 0;overflow:hidden;background:var(--bg);font-family:'Pretendard',sans-serif;color:var(--fg);word-break:keep-all}
#st *{box-sizing:border-box;position:absolute;margin:0}
#st .flow,#st .flow *{position:relative}   /* 글 흐름 안의 줄(목록·문단)은 .flow 로 */
/* 바탕 층: 빛 · 격자 · 결 · 가장자리 어둡게 · 아래 빛 */
#glow{left:380px;top:-420px;width:1100px;height:1100px;border-radius:50%;background:radial-gradient(circle,rgba(185,166,245,.18) 0,rgba(185,166,245,.06) 38%,rgba(185,166,245,0) 66%)}
#bloom{left:-240px;top:640px;width:980px;height:640px;border-radius:50%;background:radial-gradient(closest-side,rgba(214,203,240,.20),rgba(214,203,240,0));opacity:0}
#grid{left:-108px;top:-108px;width:1404px;height:1404px;background-image:linear-gradient(to right,rgba(214,203,240,.055) 2px,transparent 2px),linear-gradient(to bottom,rgba(214,203,240,.055) 2px,transparent 2px);background-size:108px 108px;-webkit-mask-image:radial-gradient(circle at 62% 40%,#000 0,rgba(0,0,0,.35) 45%,transparent 72%);mask-image:radial-gradient(circle at 62% 40%,#000 0,rgba(0,0,0,.35) 45%,transparent 72%)}
#noise{inset:0;opacity:.05;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
#vig{inset:0;background:radial-gradient(125% 115% at 56% 40%,rgba(23,21,28,0) 46%,rgba(23,21,28,.78) 100%);pointer-events:none}
#world{left:0;top:0;width:1080px;height:1080px;transform-origin:540px 540px}
#noise,#vig{z-index:50}
/* 머리 띠(왼쪽 위): 줄표 + 라일락 이름표 */
.eb{left:72px;top:64px;height:48px;white-space:nowrap;z-index:40}
.eb i{left:0;top:23px;width:30px;height:3px;background:var(--lil);transform-origin:0 50%}
.eb span{left:46px;top:0;font-size:38px;font-weight:650;letter-spacing:-.025em;line-height:48px;color:var(--lil)}
.rule{left:72px;width:936px;height:2px;background:var(--line);transform-origin:0 50%}
/* 큰 문장 한 줄: 글자마다 가림 상자 안에서 솟는다(M.line) */
.ln{left:72px;overflow:hidden;white-space:nowrap}
#st .ln span{position:relative;display:inline-block;white-space:pre;font-weight:900;letter-spacing:-.05em}
/* 흰 이름표 · 스티커 · 숫자 */
.tag{left:0;top:0;white-space:nowrap;font-size:40px;font-weight:720;letter-spacing:-.035em;line-height:1;padding:13px 20px 15px;background:var(--fg);color:var(--ink);border-radius:3px;box-shadow:0 16px 34px rgba(10,8,14,.42)}
.sk{left:0;top:0;width:auto}
.num{font-family:'Hanken',sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.mark{background:var(--lil);color:var(--ink)}   /* 라일락 면 위 먹색 글자 */
/* 웹페이지·폰 틀(M.browser / M.phone): 실제 화면처럼 밝은 면, 바깥은 다크 무대 */
.brw{left:0;top:0;background:#FBFAFD;border-radius:14px;overflow:hidden;box-shadow:0 40px 90px rgba(8,6,12,.55),0 0 0 2px rgba(255,255,255,.06)}
.brw .bar{left:0;top:0;width:100%;height:64px;background:#ECE9F2;border-bottom:1px solid #DDD8E6}
.brw .dot{top:24px;width:16px;height:16px;border-radius:50%;background:#CFC8DC}
.brw .url{left:120px;right:40px;top:14px;height:36px;border-radius:18px;background:#fff;color:#6B6478;font-size:22px;line-height:36px;padding:0 22px;white-space:nowrap;overflow:hidden;font-family:'Hanken','Pretendard',sans-serif}
.brw .body{left:0;top:64px;width:100%;bottom:0;overflow:hidden;color:#221E2A}
.phn{left:0;top:0;background:#0E0C12;border-radius:64px;padding:18px;box-shadow:0 40px 90px rgba(8,6,12,.55),0 0 0 3px rgba(214,203,240,.14)}
.phn .scr{left:18px;top:18px;right:18px;bottom:18px;border-radius:48px;overflow:hidden;background:#FBFAFD;color:#221E2A}
.phn .notch{left:50%;top:30px;width:150px;height:38px;margin-left:-75px;border-radius:20px;background:#0E0C12;z-index:5}
/* 화면 속 공통 부품(밝은 면 위) */
.ui-f{background:#fff;border:2px solid #E2DDEA;border-radius:10px;color:#221E2A}
.ui-lb{color:#6B6478;font-weight:600}
.ui-btn{background:#221E2A;color:#fff;border-radius:10px;font-weight:700;text-align:center}
.ui-sw{width:76px;height:42px;border-radius:21px;background:#D5CFDF}
.ui-sw i{left:4px;top:4px;width:34px;height:34px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.ring{border:5px solid var(--lil2);border-radius:14px;box-shadow:0 0 0 10px rgba(185,166,245,.22)}
.cur{left:0;top:0;width:44px;height:44px;z-index:45;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.rip{left:0;top:0;width:90px;height:90px;margin:-45px 0 0 -45px;border-radius:50%;border:4px solid var(--lil2);z-index:44}
.ex{font-size:22px;font-weight:700;color:#8A8299;letter-spacing:.02em}   /* '화면 예시' 표시 */