/* 레이더룸 컴포넌트 — 예시판(관리콘솔.html · 우리 코드)에서 가져와 색만 tokens.css 의 블랙·화이트·레드로. 새 색 없음. */
:root{--f-pop:'Black Han Sans','Noto Sans KR',sans-serif;--f-stk:'Archivo Black','Black Han Sans',sans-serif}
.lab{font-family:var(--f-num);font-size:10.5px;color:var(--mu);font-weight:700;letter-spacing:.1em;text-transform:uppercase}
/* 팝아트 딱지 */
.stk{display:inline-block;font-family:var(--f-stk);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:3px 7px 2px;background:var(--red);color:var(--paper);transform:rotate(-2deg);box-shadow:2px 2px 0 var(--fg);line-height:1.25;white-space:nowrap}
.stk.inv{background:var(--fg);color:var(--bg);box-shadow:2px 2px 0 var(--red)}
.stk.out{background:transparent;color:var(--red);box-shadow:none;outline:1.5px solid var(--red);outline-offset:-1.5px}
.ht{background-image:var(--dot);background-size:6px 6px}
.card.popc{border:1.5px solid var(--fg);box-shadow:5px 5px 0 var(--red)}
.card.dots{background-image:var(--dot);background-size:7px 7px}
.ch h3 .stk{margin-left:6px;vertical-align:2px}
.card{padding:20px}
.ch h3{font-size:16px}
/* 데이터 벽 */
.ledger{display:grid;grid-template-columns:auto repeat(4,minmax(0,1fr));border:1.5px solid var(--fg);border-radius:var(--r2);overflow:hidden;margin-bottom:18px;box-shadow:5px 5px 0 var(--red)}
.ledger>div{padding:12px 16px;border-left:1px solid var(--ln);min-width:0}
.ledger>div:first-child{border-left:0;background:var(--red);color:var(--paper);display:flex;flex-direction:column;justify-content:center}
.ledger>div:first-child b{font-family:var(--f-stk);font-size:14px;letter-spacing:.06em}
.ledger>div:first-child small{font-size:11px;font-weight:700;color:var(--paper);opacity:.85}
.ledger b.num{display:block;font-size:28px;font-weight:700;line-height:1.1}
.ledger small{display:block;font-size:11px;color:var(--mu)}
.ledger p{grid-column:1/-1;margin:0;padding:7px 16px;border-top:1px dashed var(--ln2);font-size:12px;color:var(--mu);background-image:var(--dot);background-size:6px 6px}
@media (max-width:860px){.ledger{grid-template-columns:repeat(2,minmax(0,1fr))}.ledger>div:first-child{grid-column:1/-1}}
/* 캐릭터 레이 */
.ray{overflow:visible;flex:none}
.ray .rb{fill:var(--paper);stroke:var(--ink);stroke-width:3;stroke-linejoin:round}
.ray .rrim{fill:none;stroke:var(--ink);stroke-width:2.5}
.ray .rarm{fill:none;stroke:var(--fg);stroke-width:3.2;stroke-linecap:round}
.ray .rtip{fill:var(--red);stroke:var(--ink);stroke-width:2;animation:tipb 1.6s ease-in-out infinite}
.ray .rwave{fill:none;stroke:var(--red);stroke-width:3;stroke-linecap:round;animation:wv 1.6s ease-out infinite}
.ray .rsh{fill:var(--fg);opacity:.16}
.ray .rl{fill:none;stroke:var(--ink);stroke-width:3.2;stroke-linecap:round}
.ray .re{fill:var(--ink)}
.ray .rc{fill:var(--red)}
.ray .rbg{fill:var(--red);stroke:var(--ink);stroke-width:2}
.ray .rbang text{font:900 18px 'Archivo Black',sans-serif;fill:var(--paper)}
.ray .rdish{transform-origin:50px 62px;animation:sweepR 5s ease-in-out infinite}
.ray.r-alert .rtip,.ray.r-alert .rwave{animation-duration:.55s}
.ray.r-alert .rdish{animation-duration:1.4s}
@keyframes tipb{50%{opacity:.35}}
@keyframes wv{0%{opacity:0}40%{opacity:1}100%{opacity:0}}
@keyframes sweepR{0%,100%{transform:rotate(-7deg)}50%{transform:rotate(7deg)}}
/* 관제 머리 */
.chead{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px;margin-bottom:18px}
@media (max-width:1000px){.chead{grid-template-columns:minmax(0,1fr)}}
.ctitle{position:relative;padding:22px;border-radius:var(--r2);border:1px solid var(--ln);background:var(--p1);overflow:hidden;min-height:200px}
.ctitle h1{font-family:var(--f-pop);font-weight:400;font-size:clamp(28px,2.8vw,42px);line-height:1.15;letter-spacing:-.01em;margin-top:8px;position:relative}
.ctitle h1 em{font-style:normal;background:var(--red);color:var(--paper);padding:0 8px;box-shadow:4px 4px 0 var(--fg);display:inline-block;transform:rotate(-1.5deg)}
.ctitle .sub{margin:12px 0 0;font-size:12.5px;color:var(--mu);position:relative}
.ctitle .shot{position:absolute;right:-40px;top:-40px;width:240px;height:240px;border-radius:50%;object-fit:cover;opacity:.16;filter:grayscale(1) contrast(1.2)}
.ctitle .acts{position:relative;margin-top:14px;display:flex;gap:8px;flex-wrap:wrap}
.say{display:flex;gap:12px;align-items:center;padding:18px;border-radius:var(--r2);border:1.5px solid var(--fg);background:var(--bg);box-shadow:5px 5px 0 var(--red);min-width:0}
.say .bub{position:relative;flex:1;min-width:0;background:var(--fg);color:var(--bg);padding:14px 16px;border-radius:14px 14px 14px 4px;font-size:16px;font-weight:800;line-height:1.5;letter-spacing:-.02em}
.say .bub small{display:block;font-size:11px;font-weight:700;opacity:.65;margin-bottom:4px;letter-spacing:.04em}
.say .bub .src{margin-left:4px}
/* 숫자 카드(큰 숫자 + 선/게이지) */
.kp{position:relative;background:var(--p1);border:1.5px solid var(--fg);border-radius:var(--r2);padding:16px 16px 14px;min-width:0;box-shadow:4px 4px 0 var(--fg);transition:transform .2s}
.kp:hover{transform:translate(-2px,-2px)}
.kp.hot{box-shadow:5px 5px 0 var(--red)}
.kp .lab2{font-size:13px;font-weight:800}
.kp .v{font-family:var(--f-num);font-size:46px;font-weight:700;line-height:1;margin:12px 0 4px;letter-spacing:-.03em}
.kp .v small{font-size:15px;color:var(--mu);margin-left:3px;font-weight:600}
.kp .v.none{font-size:22px;font-family:var(--f-ui);font-weight:900;color:var(--mu);margin:16px 0 10px}
.kp .viz{height:50px;margin:6px 0 6px}
.kp .viz svg{width:100%;height:50px;display:block;overflow:visible}
.kp .b{font-size:11px;color:var(--mu);line-height:1.45}
.kp>.stk{position:absolute;right:12px;top:-10px}
.sp-l{fill:none;stroke:var(--fg);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.sp-d{fill:var(--red);stroke:var(--bg);stroke-width:2}
.sp-g{stroke:var(--ln2);stroke-dasharray:3 4}
.sp-t{font-size:10px;fill:var(--mu);font-family:var(--f-ui);font-weight:700}
.sp-a{fill:var(--p3)}
.sp-r{fill:var(--red)}
/* 순위 사다리 */
.ladder{width:100%;height:auto;display:block;overflow:visible}
.ladder .tk{stroke:var(--ln2)}
.ladder .tt{fill:var(--mu);font-size:10px;font-family:var(--f-num)}
.ladder .first{fill:var(--rs)}
.ladder .fl{stroke:var(--red);stroke-dasharray:5 4;stroke-width:1.5}
.ladder .flt{fill:var(--red);font-size:10.5px;font-weight:800;font-family:var(--f-ui)}
.ladder .dot{fill:var(--fg);stroke:var(--bg);stroke-width:2}
.ladder .dot.me{fill:var(--red)}
.ladder .ln{stroke:var(--ln2);stroke-width:1}
.ladder .lb{font-size:12px;font-weight:800;fill:var(--fg);font-family:var(--f-ui)}
.ladder .lb.me{fill:var(--red)}
.ladder .out{fill:var(--mu);font-size:11px;font-family:var(--f-ui);font-weight:700}
.ladder .outz{fill:var(--p2)}
/* 가로 막대(검색량 · 리뷰 경주) */
.hb{display:grid;grid-template-columns:118px minmax(0,1fr);gap:10px;align-items:center;margin:8px 0}
.hb span{font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hb .tr{position:relative;height:26px;background:var(--p2);border-radius:3px}
.hb .tr i{position:absolute;left:0;top:0;bottom:0;background:var(--fg);opacity:.82;border-radius:0 3px 3px 0;animation:race 1.6s cubic-bezier(.2,.8,.2,1) both}
.hb .tr b{position:absolute;top:4px;font-family:var(--f-num);font-size:12px;padding-left:7px;white-space:nowrap}
.hb.me span{color:var(--red);font-weight:900}
.hb.me .tr i{background:var(--red);opacity:1;box-shadow:3px 3px 0 var(--fg)}
@keyframes race{from{width:0}}
/* 3D 막대 대결 */
.duel{position:relative;height:330px;border-radius:var(--r2);background:radial-gradient(ellipse at 50% 80%,var(--p2),var(--bg) 75%);border:1px solid var(--ln);overflow:hidden}
.duel .fl{position:absolute;left:3%;right:3%;bottom:0;height:120px;transform:perspective(500px) rotateX(58deg);transform-origin:50% 100%;background-image:linear-gradient(var(--ln) 1px,transparent 1px),linear-gradient(90deg,var(--ln) 1px,transparent 1px);background-size:34px 34px}
.duel .cols{position:absolute;left:3%;right:3%;bottom:62px;top:30px;display:flex;justify-content:space-around;align-items:flex-end}
.duel .cl{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;width:15%;height:100%;justify-content:flex-end}
.duel .bx{position:relative;width:44px;background:color-mix(in srgb,var(--fg) 75%,var(--bg));transform-origin:bottom;animation:grow .9s cubic-bezier(.2,.8,.2,1) both;margin-right:12px}
.duel .bx::before{content:'';position:absolute;left:0;width:100%;top:-10px;height:10px;background:var(--fg);transform:skewX(-50deg);transform-origin:bottom left}
.duel .bx::after{content:'';position:absolute;top:0;right:-12px;width:12px;height:100%;background:color-mix(in srgb,var(--fg) 42%,var(--bg));transform:skewY(-40deg);transform-origin:top left}
.duel .cl.me .bx{background:var(--red)}
.duel .cl.me .bx::before{background:color-mix(in srgb,var(--red) 62%,var(--paper))}
.duel .cl.me .bx::after{background:color-mix(in srgb,var(--red) 55%,var(--ink))}
.duel .vl{font-family:var(--f-num);font-weight:700;font-size:13px;white-space:nowrap}
.duel .cl.me .vl{color:var(--red)}
.duel .nm{position:absolute;bottom:-50px;font-size:11px;font-weight:700;text-align:center;width:100%;line-height:1.25;height:28px;overflow:hidden}
.duel .cl.me .nm{color:var(--red);font-weight:900}
@keyframes grow{from{transform:scaleY(.02)}}
.seg{display:inline-flex;border:1.5px solid var(--fg);border-radius:var(--r);overflow:hidden;margin-left:auto}
.seg button{padding:6px 12px;font-size:12.5px;font-weight:800}
.seg button.on{background:var(--fg);color:var(--bg)}
/* 폰 목업 */
.phone{border:9px solid var(--ink);border-radius:38px;background:var(--ink);box-shadow:0 0 0 1.5px var(--ln2),8px 10px 0 var(--red);max-width:330px;margin:0 auto}
.phone .scr{background:var(--paper);color:var(--ink);border-radius:30px;overflow:hidden;--fg:var(--ink);--bg:var(--paper);--ln:color-mix(in srgb,var(--ink) 12%,transparent);--ln2:color-mix(in srgb,var(--ink) 25%,transparent);--mu:color-mix(in srgb,var(--ink) 60%,var(--paper));--mu2:color-mix(in srgb,var(--ink) 42%,var(--paper));--p3:color-mix(in srgb,var(--ink) 13%,var(--paper));--rs:color-mix(in srgb,var(--red) 12%,transparent)}
.phone .nt{height:24px;display:flex;justify-content:center;align-items:center}
.phone .nt i{width:84px;height:6px;border-radius:9px;background:var(--ink)}
.phone .mapl{border:0;border-radius:0}
.phone .mbg{height:110px;position:relative;background-color:color-mix(in srgb,var(--ink) 4%,var(--paper));background-image:linear-gradient(color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--ink) 7%,transparent) 1px,transparent 1px);background-size:22px 22px}
.phone .mbg b{position:absolute;width:13px;height:13px;border-radius:50% 50% 50% 0;transform:translate(-50%,-100%) rotate(-45deg);background:var(--ink)}
.phone .mbg b.me{background:var(--red);width:17px;height:17px}
.phone .it{padding:9px 12px}
/* 게이지 · 고리 · 체크리스트 */
.ring{display:grid;place-items:center;position:relative}
.ring svg{display:block}
.ring .bgc{fill:none;stroke:var(--p3)}
.ring .fgc{fill:none;stroke:var(--red);stroke-linecap:round}
.ring .fgc.ink{stroke:var(--fg)}
.ring b{position:absolute;font-family:var(--f-num);font-size:28px;font-weight:700;text-align:center;line-height:1}
.ring b small{display:block;font-size:11px;color:var(--mu);font-family:var(--f-ui);margin-top:4px}
.chk{display:grid;grid-template-columns:22px minmax(0,1fr) auto;gap:10px;align-items:center;padding:8px 0;border-bottom:1px dashed var(--ln);font-size:13px}
.chk i{width:18px;height:18px;border:1.8px solid var(--fg);display:grid;place-items:center;font-style:normal;font-weight:900;font-size:12px;border-radius:3px}
.chk.ok i{background:var(--fg);color:var(--bg)}
.chk.no i{border-color:var(--red);color:var(--red)}
.chk.no b{color:var(--red)}
.chk .xs{white-space:nowrap}
/* 거품 */
.bubbles{position:relative;height:270px}
.bubbles .bb{position:absolute;border-radius:50%;display:grid;place-content:center;text-align:center;font-weight:800;border:1.5px solid var(--fg);background:var(--bg);line-height:1.15;animation:pop .6s cubic-bezier(.2,1.4,.4,1) both;transform:translate(-50%,-50%)}
.bubbles .bb.top{background:var(--red);color:var(--paper);border-color:var(--red);box-shadow:3px 3px 0 var(--fg)}
.bubbles .bb small{display:block;font-family:var(--f-num);font-weight:700;font-size:11px;opacity:.85}
@keyframes pop{from{opacity:0;scale:.2}}
.dist{display:grid;grid-template-columns:34px minmax(0,1fr) 28px;gap:8px;align-items:center;font-size:12px;margin:6px 0}
.dist .bar{height:14px;border-radius:3px}
/* 낮은 별점 카드 */
.lowc{border:1.5px solid var(--red);border-radius:var(--r2);padding:14px;background:var(--bg);position:relative}
.lowc+.lowc{margin-top:14px}
.lowc>.stk{position:absolute;right:10px;top:-10px}
.draft{margin-top:10px;border:1.5px dashed var(--fg);border-radius:var(--r);padding:10px;font-size:13px;white-space:pre-line;background:var(--p1)}
/* 처방 카드 */
.rxg{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:22px 18px;padding:12px 0 4px 10px}
.rxc{position:relative;border:1.5px solid var(--fg);border-radius:var(--r2);padding:16px 14px 12px;background:var(--bg);box-shadow:4px 4px 0 var(--fg);min-width:0}
.rxc.p1{box-shadow:5px 5px 0 var(--red)}
.rxc .no{position:absolute;left:-12px;top:-14px;width:32px;height:32px;border-radius:50%;background:var(--red);color:var(--paper);display:grid;place-items:center;font-family:var(--f-num);font-weight:700;font-size:14px;box-shadow:2px 2px 0 var(--fg)}
.rxc h5{font-size:14.5px;font-weight:900;letter-spacing:-.02em;margin:0 0 4px 12px;line-height:1.35}
.rxc ul{margin:6px 0 8px;padding-left:18px;font-size:12.5px;color:var(--mu)}
.flow{display:flex;font-size:10.5px;font-weight:800;margin-top:8px}
.flow span{flex:1;text-align:center;padding:4px 2px;border:1px solid var(--ln2);margin-left:-1px;color:var(--mu);white-space:nowrap}
.flow span.on{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.flow span.now{background:var(--red);color:var(--paper);border-color:var(--red)}
/* 3D 동네 지도 */
.rm{position:relative;height:470px;perspective:1300px;perspective-origin:50% 8%;overflow:hidden;border-radius:var(--r2);background:radial-gradient(ellipse at 50% 48%,var(--p2),var(--bg) 72%);border:1px solid var(--ln)}
.rm .pl{position:absolute;left:50%;top:12%;width:min(480px,84%);aspect-ratio:1;transform-style:preserve-3d;transform:translateX(-50%) rotateX(58deg) rotateZ(-24deg);border:1px solid var(--ln2);background-color:color-mix(in srgb,var(--fg) 3%,var(--bg));background-image:linear-gradient(var(--ln) 1px,transparent 1px),linear-gradient(90deg,var(--ln) 1px,transparent 1px);background-size:40px 40px}
.rm .sweep{position:absolute;left:-20%;top:-20%;width:140%;height:140%;border-radius:50%;background:conic-gradient(from 0deg,var(--rs2) 0deg,transparent 46deg,transparent 360deg);animation:spin 7s linear infinite;pointer-events:none}
@keyframes spin{to{transform:rotate(360deg)}}
.pin{position:absolute;width:0;height:0;transform-style:preserve-3d}
.pin .sh{position:absolute;left:-14px;top:-14px;width:28px;height:28px;border-radius:50%;background:radial-gradient(color-mix(in srgb,var(--ink) 60%,transparent),transparent 70%)}
.pin .ring2{position:absolute;left:-20px;top:-20px;width:40px;height:40px;border-radius:50%;border:2.5px solid var(--red);animation:pulse 1.7s ease-out infinite}
@keyframes pulse{0%{transform:scale(.35);opacity:1}100%{transform:scale(1.9);opacity:0}}
.pin .st{position:absolute;left:0;top:0;transform-origin:0 0;transform:rotateX(-90deg);transform-style:preserve-3d}
.c3{position:absolute;left:0;top:0;transform-style:preserve-3d;--h:calc(var(--hh) * 1px);--cf:color-mix(in srgb,var(--fg) 80%,var(--bg));--cs:color-mix(in srgb,var(--fg) 52%,var(--bg));--cs2:color-mix(in srgb,var(--fg) 38%,var(--bg));--ct:var(--fg);transform-origin:0 0;animation:grow .9s cubic-bezier(.2,.8,.2,1) both}
.c3 .f{position:absolute;left:calc(var(--w) / -2);bottom:0;width:var(--w);height:var(--h);background:var(--cf);transform-origin:50% 100%}
.c3 .fr{transform:translateZ(calc(var(--w) / 2))}
.c3 .bk{transform:rotateY(180deg) translateZ(calc(var(--w) / 2));background:var(--cs2)}
.c3 .lf{transform:rotateY(-90deg) translateZ(calc(var(--w) / 2));background:var(--cs)}
.c3 .rt{transform:rotateY(90deg) translateZ(calc(var(--w) / 2));background:var(--cs)}
.c3 .tp{height:var(--w);bottom:var(--h);transform:translateZ(calc(var(--w) / 2)) rotateX(90deg);background:var(--ct)}
.c3.a{--cf:var(--red);--cs:color-mix(in srgb,var(--red) 62%,var(--ink));--cs2:color-mix(in srgb,var(--red) 45%,var(--ink));--ct:color-mix(in srgb,var(--red) 70%,var(--paper))}
.pin .lb{position:absolute;left:0;bottom:calc(var(--hh) * 1px + 10px);transform:translateX(-50%) rotateX(90deg) rotateZ(24deg) rotateX(-58deg);transform-origin:50% 100%;font-size:10px;font-weight:700;white-space:nowrap;background:var(--bg);color:var(--fg);border:1px solid var(--ln2);padding:1px 5px;border-radius:3px}
.pin .lb.hot{background:var(--red);color:var(--paper);border-color:var(--red);font-weight:900;font-size:11px;box-shadow:2px 2px 0 var(--fg)}
.rm-hud{position:absolute;left:12px;top:10px;font-family:var(--f-num);font-size:10.5px;color:var(--mu);line-height:1.6;z-index:5}
.rm-hud b{color:var(--red)}
.rm-lg{position:absolute;left:12px;bottom:10px;right:12px;font-size:11px;color:var(--mu);display:flex;flex-wrap:wrap;gap:4px 14px;z-index:5}
.rm-lg i{display:inline-block;width:9px;height:9px;margin-right:5px;vertical-align:-1px;background:var(--fg)}
.rm-lg i.a{background:var(--red)}
/* A4 서류철 리포트 */
.a4{position:relative;background:var(--paper);color:var(--ink);padding:38px 38px 80px;border:1px solid color-mix(in srgb,var(--ink) 15%,transparent);box-shadow:0 1px 2px color-mix(in srgb,var(--ink) 20%,transparent),0 24px 40px -24px var(--ink),8px 8px 0 var(--red);max-width:780px;margin:26px auto 0;font-size:13px;line-height:1.55;
 --fg:var(--ink);--bg:var(--paper);--mu:color-mix(in srgb,var(--ink) 60%,var(--paper));--mu2:color-mix(in srgb,var(--ink) 42%,var(--paper));--ln:color-mix(in srgb,var(--ink) 12%,transparent);--ln2:color-mix(in srgb,var(--ink) 26%,transparent);--p1:color-mix(in srgb,var(--ink) 4%,var(--paper));--p2:color-mix(in srgb,var(--ink) 7%,var(--paper));--p3:color-mix(in srgb,var(--ink) 13%,var(--paper));--rs:color-mix(in srgb,var(--red) 12%,transparent)}
.a4::before{content:"";position:absolute;left:14px;top:120px;width:11px;height:11px;border-radius:50%;background:color-mix(in srgb,var(--ink) 10%,transparent);box-shadow:0 240px 0 color-mix(in srgb,var(--ink) 10%,transparent),0 480px 0 color-mix(in srgb,var(--ink) 10%,transparent)}
.a4 .clip{position:absolute;left:52px;top:-26px;width:30px;height:74px;border:4px solid color-mix(in srgb,var(--ink) 55%,var(--paper));border-radius:15px;border-bottom-color:transparent;transform:rotate(-6deg)}
.a4 .clip::after{content:'';position:absolute;left:5px;top:12px;width:12px;height:46px;border:3px solid color-mix(in srgb,var(--ink) 55%,var(--paper));border-radius:8px;border-top-color:transparent}
.a4-hd{display:flex;justify-content:space-between;align-items:center;border-bottom:2.5px solid var(--ink);padding-bottom:8px;font-family:var(--f-num);font-size:11px;font-weight:700;gap:8px;flex-wrap:wrap}
.a4-hd .lg{font-family:var(--f-stk);letter-spacing:.05em;font-size:13px}
.a4-hd .lg i{font-style:normal;background:var(--red);color:var(--paper);padding:0 4px}
.a4 h2{font-size:26px;font-weight:900;letter-spacing:-.04em;line-height:1.3;margin:16px 0 4px}
.a4 mark{background:linear-gradient(transparent 52%,color-mix(in srgb,var(--red) 50%,transparent) 52%);color:inherit;padding:0 2px}
.a4 h5{font-size:12.5px;font-weight:900;border-bottom:1.5px solid var(--ink);padding-bottom:3px;margin:22px 0 8px;letter-spacing:-.01em;display:flex;gap:8px;align-items:baseline}
.a4 h5 small{margin-left:auto;font-weight:500;color:var(--mu);font-size:10.5px}
.a4-k{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.a4-k div{border:1.5px solid var(--ink);padding:8px 9px;min-width:0}
.a4-k div:first-child{background:var(--ink);color:var(--paper)}
.a4-k small{display:block;font-size:10.5px;font-weight:700;opacity:.75}
.a4-k b{font-family:var(--f-num);font-size:22px;font-weight:700;letter-spacing:-.03em;line-height:1.2;display:block}
.a4-k em{display:block;font-style:normal;font-size:10px;opacity:.7;line-height:1.35}
.a4-2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:20px}
.a4 table{font-size:12px}
.a4 td,.a4 th{padding:4px}
.a4-todo{list-style:none;padding:0;margin:0}
.a4-todo li{display:flex;gap:8px;align-items:flex-start;margin-bottom:6px;font-size:12.5px}
.a4-todo li i{width:13px;height:13px;border:1.8px solid var(--ink);flex:none;margin-top:4px}
.a4-cm{border-left:4px solid var(--red);padding:8px 12px;background:var(--rs);font-family:'Nanum Pen Script','Noto Sans KR',cursive;font-size:21px;line-height:1.3;white-space:pre-line}
.a4 .seal{position:absolute;right:38px;bottom:58px;width:94px;height:94px;border-radius:50%;border:3px double var(--red);color:var(--red);display:grid;place-items:center;font-family:var(--f-stk);font-size:12px;transform:rotate(-14deg);opacity:.85;text-align:center;line-height:1.15;background:color-mix(in srgb,var(--paper) 70%,transparent)}
.a4-ft{position:absolute;left:38px;right:38px;bottom:22px;display:flex;justify-content:space-between;gap:8px;border-top:1px solid var(--ink);padding-top:8px;font-size:11px;font-weight:700}
@media (max-width:640px){.a4{padding:30px 18px 80px}.a4-k{grid-template-columns:repeat(2,minmax(0,1fr))}.a4-2{grid-template-columns:minmax(0,1fr)}.a4 h2{font-size:21px}.a4-ft{left:18px;right:18px}.a4 .seal{right:16px;width:76px;height:76px;font-size:10px}}
/* ── 3D 팝업(허브 기능지도 .pop 그대로 · 색만) ── */
.pop{position:fixed;inset:0;background:color-mix(in srgb,var(--ink) 88%,transparent);display:grid;place-items:center;padding:20px;z-index:80;perspective:1400px}
.pop[hidden]{display:none}
.pop-in{width:min(860px,100%);max-height:calc(100% - 20px);animation:rise3d .6s cubic-bezier(.2,.8,.2,1) both;transform-style:preserve-3d}
.pop-card{position:relative;background:var(--paper);color:var(--ink);max-height:calc(100vh - 60px);overflow:auto;border-radius:6px;transform:rotateX(var(--px,6deg)) rotateY(var(--py,-8deg)) rotateZ(var(--pz,0deg));transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s;
  box-shadow:0 2px 4px color-mix(in srgb,var(--ink) 20%,transparent),calc(var(--sx,0px) * -1) calc(60px + var(--sy,0px) * -1) 100px -30px var(--ink),0 0 0 1px color-mix(in srgb,var(--paper) 8%,transparent),10px 10px 0 var(--red);
  --fg:var(--ink);--bg:var(--paper);--mu:color-mix(in srgb,var(--ink) 60%,var(--paper));--mu2:color-mix(in srgb,var(--ink) 42%,var(--paper));--ln:color-mix(in srgb,var(--ink) 12%,transparent);--ln2:color-mix(in srgb,var(--ink) 26%,transparent);--p1:color-mix(in srgb,var(--ink) 4%,var(--paper));--p2:color-mix(in srgb,var(--ink) 7%,var(--paper));--p3:color-mix(in srgb,var(--ink) 13%,var(--paper));--rs:color-mix(in srgb,var(--red) 12%,transparent)}
.pop-card::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),color-mix(in srgb,var(--paper) 40%,transparent),transparent 55%)}
.pop-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:18px 20px;border-bottom:2px solid var(--ink)}
.pop-head b{font-size:clamp(20px,3vw,28px);font-weight:900;letter-spacing:-.04em}
.pop-head button{font-size:13px;font-weight:800;border-bottom:2px solid var(--red)}
.pop-body{padding:20px;font-size:14px}
.pop-body h4{font-size:13px;font-weight:900}
.pop-body ul{padding-left:18px}
@keyframes rise3d{from{transform:rotateX(48deg) rotateZ(-6deg) translateY(160px) scale(.82);opacity:0}}
[data-pop]{cursor:pointer}
/* ── 카드 3D 틸트 + 빛 반사 + 겹 그림자(서류 더미 .paper 결) ── */
.tilt{transform:perspective(900px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg));transition:transform .35s cubic-bezier(.2,.8,.2,1),box-shadow .35s}
.tilt.tilting{transition:transform .08s linear}
.tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at var(--gx,50%) var(--gy,0%),color-mix(in srgb,var(--paper) 22%,transparent),transparent 55%);opacity:0;transition:opacity .3s}
.tilt.tilting::after{opacity:1}
.kp.tilt,.rxc.tilt{box-shadow:4px 4px 0 var(--fg),0 1px 1px color-mix(in srgb,var(--ink) 12%,transparent),0 6px 10px -4px color-mix(in srgb,var(--ink) 25%,transparent),0 22px 30px -18px color-mix(in srgb,var(--ink) 45%,transparent)}
.kp.tilt.hot,.rxc.tilt.p1{box-shadow:5px 5px 0 var(--red),0 6px 10px -4px color-mix(in srgb,var(--ink) 25%,transparent),0 22px 30px -18px color-mix(in srgb,var(--ink) 45%,transparent)}
.tilt-press:active,.tbar a:active,.kp:active{transform:scale(.97)}
@media (hover:none){.tilt{transform:none}.tilt:active{transform:scale(.97)}}
/* ── 화면 전환: 아래에서 순서대로 떠오르기 ── */

.rise.rin{animation:riseIn .65s cubic-bezier(.2,.8,.2,1) both}
@keyframes riseIn{from{opacity:0;transform:translateY(26px) rotateX(8deg)}to{opacity:1}}
.rise.rin.tilt{animation-name:riseIn2}
@keyframes riseIn2{from{opacity:0;translate:0 26px}to{opacity:1;translate:0 0}}
/* ── 서류철에서 딸려 올라오는 A4(허브 #docs 결) ── */
.folder3d{position:relative;padding-top:40px;perspective:1600px}
.folder3d::before{content:"";position:absolute;left:50%;top:0;width:min(820px,100%);height:260px;transform:translateX(-50%);background:color-mix(in srgb,var(--red) 85%,var(--ink));border-radius:10px 10px 0 0;clip-path:polygon(0 18px,30% 18px,34% 0,62% 0,66% 18px,100% 18px,100% 100%,0 100%)}
.folder3d .a4{z-index:1;animation:pullup 1.3s .15s cubic-bezier(.22,1,.36,1) both}
@keyframes pullup{from{transform:translateY(260px) rotateX(-14deg) scale(.94)}60%{transform:translateY(-14px) rotateX(3deg)}to{transform:none}}
.folder3d .pocket{position:absolute;left:50%;top:150px;width:min(840px,100%);height:150px;transform:translateX(-50%);z-index:2;background:var(--red);border-radius:6px;box-shadow:0 -10px 30px -10px var(--ink);display:flex;align-items:flex-end;padding:14px 22px;animation:pocketOut .7s 1.25s cubic-bezier(.4,0,.2,1) forwards;pointer-events:none}
.folder3d .pocket span{font-family:var(--f-stk);color:var(--paper);letter-spacing:.08em;font-size:13px}
@keyframes pocketOut{to{transform:translateX(-50%) translateY(90px) rotateX(70deg);opacity:0}}
/* ── 움직임 줄이기: 3D·움직임 끔 ── */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .tilt{transform:none!important}.pop-card{transform:none!important}
  .folder3d .pocket{display:none}.rm .pl{transform:translateX(-50%) rotateX(0)}
}
/* 내보낸 화면 띠 */
.xbar{position:sticky;top:0;z-index:70;background:var(--red);color:var(--paper);text-align:center;font-size:12px;font-weight:800;padding:5px 10px;letter-spacing:.02em}

@media (max-width:760px){.grid[style]{grid-template-columns:minmax(0,1fr)!important}.chead{grid-template-columns:minmax(0,1fr)}}