/* 사주 취업운 — Figma "05 · unslop (데이터 분석형)" 토큰 */
:root{
  --bg:#0c0d0c;--fg:#eef0ec;--mute:#a6aca4;--dim:#7d837c;--acc:#a9c68a;--warn:#e8735a;
  --field:#1f221f;--field-line:rgba(255,255,255,.06);--seg:#161816;--seg-on:#2a2e29;--line:rgba(255,255,255,.14);--rule:rgba(255,255,255,.08);
  --card:linear-gradient(180deg,#1c201b 0%,#131513 100%);
  --btn:linear-gradient(180deg,#bcd2a0 0%,#94b078 100%);
  --e-목:#6fbf8a;--e-화:#e8735a;--e-토:#d9b45e;--e-금:#e4e7e1;--e-수:#6a9fd8;
  --f-body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-num:"Geist","IBM Plex Sans KR",sans-serif;--f-mono:"Geist Mono",ui-monospace,Menlo,monospace;--f-serif:"Noto Serif KR",serif;
  color-scheme:dark}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;background:var(--bg);color:var(--fg);font:15px/1.5 var(--f-body);-webkit-text-size-adjust:100%}
body{background:
  radial-gradient(60% 75% at 85% 0%,rgba(85,128,60,.28) 0%,rgba(38,64,28,.08) 55%,rgba(12,13,12,0) 100%) fixed,
  radial-gradient(60% 60% at 0% 55%,rgba(52,85,42,.10) 0%,rgba(12,13,12,0) 100%) fixed,var(--bg)}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none;padding:0}
a{color:inherit}
p{margin:0}
[hidden]{display:none!important}

/* 화면 틀 */
.screen{max-width:430px;min-height:100dvh;margin:0 auto;padding:max(12px,env(safe-area-inset-top)) 20px calc(28px + env(safe-area-inset-bottom));display:flex;flex-direction:column}
.screen>.grow{flex:1 0 24px}
.topbar{display:flex;align-items:center;gap:8px;height:56px;flex:none}
.back{width:40px;height:40px;border-radius:20px;background:var(--field);display:grid;place-items:center;flex:none}
.back svg{width:18px;height:18px}
.topbar .t{flex:1;text-align:center;font-size:15px;font-weight:500}
.topbar .step{width:40px;text-align:right;font:12px var(--f-mono);color:var(--dim)}
.lead{color:var(--mute);font-size:14px;margin:4px 0 12px}
.h1{font-size:32px;line-height:40px;font-weight:500;margin:0}
.h2{font-size:24px;line-height:1.25;font-weight:500;margin:12px 0 8px}
.eyebrow{font-size:13px;color:var(--mute)}
.mute{color:var(--mute)}.dim{color:var(--dim)}.acc{color:var(--acc)}.warn{color:var(--warn)}
.mono{font-family:var(--f-mono)}.num{font-family:var(--f-num);font-weight:500}
.small{font-size:12px}.xs{font-size:11px}
.gap8{height:8px}.gap12{height:12px}.gap16{height:16px}.gap24{height:24px}

/* 카드·요소 */
.card{background:var(--card);border:1px solid var(--line);border-radius:20px;padding:16px;display:flex;flex-direction:column;gap:12px;min-width:0}
.card.hero{border-color:rgba(169,198,138,.28);background:radial-gradient(85% 85% at 10% 0%,rgba(127,163,95,.22) 0%,rgba(63,102,48,.08) 45%,rgba(18,20,18,0) 100%),linear-gradient(180deg,#1c201b 0%,#121412 100%)}
.card-h{display:flex;align-items:center;gap:8px}.card-h b{flex:1;font-size:15px;font-weight:500}
.tile{background:var(--field);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:2px;min-width:0}
.mini{background:linear-gradient(180deg,#1e221d,#141614);border:1px solid var(--line);border-radius:14px;padding:12px;display:flex;flex-direction:column;gap:4px;flex:1;min-width:0}
.row{display:flex;gap:8px}.row>*{flex:1;min-width:0}
.tags{display:flex;flex-wrap:wrap;gap:6px}
.tag{background:var(--field);border-radius:6px;padding:4px 8px;font-size:12px;color:var(--mute)}
.tag small{color:var(--dim);font-family:var(--f-mono);margin-left:4px;font-size:11px}
.bar{height:6px;border-radius:3px;background:#2e322d;overflow:hidden}.bar i{display:block;height:100%;border-radius:3px;background:var(--acc)}
.bar.grey i{background:#9a9f98}
.sep{height:1px;background:var(--rule);margin:2px 0}
.note{display:flex;gap:8px;font-size:13px;color:var(--mute)}.note svg{width:16px;height:16px;flex:none;margin-top:2px;color:var(--dim)}

/* 버튼 */
.btn{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:52px;border-radius:14px;background:var(--btn);color:#0e0f0e;font-size:15px;font-weight:600;box-shadow:inset 0 1px 0 rgba(255,255,255,.25);text-decoration:none;flex:none}
.btn:disabled{opacity:.45}
.btn.ghost{background:#1a1c1a;color:var(--fg);border:1px solid var(--line);box-shadow:none}
.btn+.btn{margin-top:10px}
.foot{text-align:center;font-size:12px;color:var(--dim);margin-top:12px}

/* 입력 */
.label{font-size:13px;color:var(--mute);margin-bottom:8px}
.field{position:relative;display:flex;align-items:center;justify-content:space-between;height:52px;padding:0 14px;background:var(--field);border:1px solid var(--field-line);border-radius:12px;flex:1;min-width:0}
.field select{appearance:none;-webkit-appearance:none;background:none;border:0;outline:0;font:500 17px var(--f-num);width:100%;height:100%;padding:0}
.field select:disabled{color:var(--dim)}
.field span{font-size:13px;color:var(--dim);pointer-events:none}
.field:focus-within{border-color:rgba(169,198,138,.5)}
.seg{display:flex;gap:4px;height:44px;padding:4px;background:var(--seg);border:1px solid var(--field-line);border-radius:12px;flex:1}
.seg button{flex:1;border-radius:8px;font-size:14px;color:var(--dim)}
.seg button[aria-pressed=true]{background:var(--seg-on);color:var(--fg);font-weight:500}
.check{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--mute);cursor:pointer;user-select:none}
.check input{appearance:none;-webkit-appearance:none;width:18px;height:18px;border:1px solid rgba(255,255,255,.25);border-radius:5px;margin:0;display:grid;place-items:center}
.check input:checked{background:var(--acc);border-color:var(--acc)}
.check input:checked::after{content:"";width:9px;height:5px;border:2px solid #0e0f0e;border-top:0;border-right:0;transform:rotate(-45deg) translate(1px,-1px)}
.check input:disabled{opacity:.35}
.err{color:var(--warn);font-size:13px;margin-top:10px}

/* 시작 화면 */
.start{position:relative;overflow:hidden}
.start .bgimg{position:absolute;inset:0 0 auto 0;height:540px;background:url(/assets/hero.png) center top/cover no-repeat;max-width:430px;margin:0 auto}
.start .bgimg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,13,12,.55) 0%,rgba(12,13,12,0) 14%,rgba(12,13,12,.1) 55%,rgba(12,13,12,.85) 82%,#0c0d0c 100%)}
.start>*{position:relative}
.start .spacer-top{height:clamp(250px,44dvh,316px)}

/* 분석 중 */
.rain{height:360px;border-radius:20px;border:1px solid var(--rule);background:linear-gradient(180deg,#121412,#0e100e);overflow:hidden;position:relative;font:15px/22px var(--f-serif);display:flex;justify-content:space-around;padding:0 6px}
.rain .col{display:flex;flex-direction:column;color:rgba(169,198,138,.35);will-change:transform;animation:fall linear infinite}
.rain .col b{font-weight:500;color:var(--fg)}
.rain::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,13,12,.6),transparent 20%,transparent 75%,rgba(12,13,12,.8))}
@keyframes fall{from{transform:translateY(-50%)}to{transform:translateY(0)}}
.pct{display:flex;align-items:flex-end;justify-content:space-between;margin:20px 0 10px}
.pct .n{font:500 48px/1 var(--f-num)}.pct .n small{font-size:18px;color:var(--mute);margin-left:4px}
.steps{display:flex;flex-direction:column;gap:14px;margin-top:20px;font-size:14px}
.steps li{display:flex;align-items:center;gap:10px;list-style:none}.steps ol{margin:0;padding:0}
.steps .ic{width:16px;display:grid;place-items:center;color:var(--acc)}
.steps .ic i{width:6px;height:6px;border-radius:3px;background:var(--dim)}
.steps li.on .ic i{background:var(--acc)}
.steps li.wait{color:var(--dim)}
.steps .s{margin-left:auto;font:12px var(--f-mono);color:var(--dim)}

/* 오행 */
.stack{display:flex;gap:2px;height:10px;border-radius:5px;overflow:hidden}
.legend{display:flex;gap:4px}.legend>div{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.dot{display:inline-block;width:6px;height:6px;border-radius:3px;margin-right:5px;vertical-align:middle}
.pillars{display:flex;gap:6px}.pillars>div{flex:1;background:var(--field);border-radius:12px;padding:10px 0;display:flex;flex-direction:column;align-items:center;gap:2px}
.pillars>div.me{border:1px solid var(--line);background:radial-gradient(80% 80% at 50% 0%,rgba(134,170,104,.25),rgba(26,32,23,0)),linear-gradient(180deg,#2c3d20,#1a2017)}
.pillars .gz{font-size:18px;font-weight:500}
.glyph{width:72px;height:72px;border-radius:16px;border:1px solid var(--line);background:linear-gradient(180deg,#1e221d,#141614);display:grid;place-items:center;font:500 40px/48px var(--f-serif);flex:none}
.vbars{display:flex;align-items:flex-end;justify-content:space-between;height:170px;padding:0 2px;gap:12px}
.vbars>div{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px;min-width:0}
.vbars i{width:100%;border-radius:4px;background:#8e928c;min-height:2px}
.vbars .v{font:12px var(--f-mono);color:var(--mute)}
.vbars .on i{background:#b7d39a}.vbars .on .v{color:var(--acc)}
.vbars .k{font-size:13px}.vbars .r{font-size:11px;color:var(--dim);height:16px;white-space:nowrap;letter-spacing:-.02em}
.chips3{display:flex;gap:6px}
.chips3 button{flex:1;height:44px;border-radius:22px;border:1px solid var(--line);background:#141614;font-size:13px;color:var(--mute);white-space:nowrap}
.chips3 button b{color:var(--fg);font-size:14px;margin-right:4px}
.chips3 button[aria-pressed=true]{background:var(--btn);color:#0e0f0e;border-color:transparent}.chips3 button[aria-pressed=true] b{color:#0e0f0e}
.elhead{display:flex;gap:12px;align-items:center}
.elglyph{width:48px;height:48px;border-radius:12px;display:grid;place-items:center;font:500 24px var(--f-serif);background:rgba(232,115,90,.15);flex:none}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.tile .k{display:flex;gap:6px;align-items:center;font-size:12px;color:var(--dim)}.tile .k svg{width:14px;height:14px}
.tile .v{font-size:16px;font-weight:500}
.sw{display:inline-block;width:14px;height:14px;border-radius:3px;margin-right:4px;vertical-align:-2px}
.acts{display:flex;flex-direction:column;gap:10px}.act{display:flex;align-items:center;gap:12px;font-size:14px}
.act .ib{width:32px;height:32px;border-radius:8px;background:var(--field);display:grid;place-items:center;flex:none}.act .ib svg{width:16px;height:16px;color:var(--mute)}
.items3{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.items3>div{background:var(--field);border-radius:12px;padding:12px;font-size:13px;display:flex;flex-direction:column;gap:8px}.items3 svg{width:16px;height:16px;color:var(--mute)}

/* 직무·업종 */
.score{display:flex;align-items:baseline;gap:6px}.score .n{font:500 30px/1 var(--f-num)}.score small{font:12px var(--f-mono);color:var(--dim)}
.lockrow{display:flex;align-items:center;gap:12px;padding:16px;border-radius:20px;border:1px solid var(--line);background:var(--card);text-align:left;width:100%}
.lockrow .ib{width:36px;height:36px;border-radius:10px;background:var(--field);display:grid;place-items:center}.lockrow svg{width:18px;height:18px}
.lockrow div{flex:1}

/* 페이월 */
.preview{position:relative;height:180px;border-radius:20px;border:1px solid var(--line);background:var(--card);padding:16px;overflow:hidden}
.preview .bars{position:absolute;left:16px;right:16px;bottom:16px;height:110px;display:flex;align-items:flex-end;gap:8px;filter:blur(5px)}
.preview .bars i{flex:1;background:#5b605a;border-radius:3px}.preview .bars i.g{background:#b7d39a}
.preview .lock{position:absolute;left:50%;top:58%;transform:translate(-50%,-50%);background:#0e0f0e;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:13px;display:flex;gap:6px;align-items:center;white-space:nowrap}
.preview .lock svg{width:14px;height:14px}
.big4{display:grid;grid-template-columns:1fr 1fr;gap:8px}.big4>div{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px;display:flex;flex-direction:column;gap:4px}
.big4 .n{font:500 26px/1.2 var(--f-num)}.big4 p{font-size:12px;color:var(--mute)}
.pricebar{display:flex;justify-content:space-between;align-items:center;margin:20px 0 12px}.pricebar b{font:500 18px var(--f-num)}

/* 결제 */
.ordercard{display:flex;justify-content:space-between;gap:12px}
#widget:empty{display:none}
#widget{background:#fff;border-radius:16px;overflow:hidden;min-height:120px;color:#111}
.widget-load{padding:24px;text-align:center;color:#666;font-size:13px}

/* 유료 결과 */
.ind .top{display:flex;align-items:flex-start;gap:8px}.ind .rk{font:12px var(--f-mono);color:var(--dim);margin-top:8px}
.ind.first .rk{color:var(--acc)}
.ind .nm{flex:1}.ind .nm b{display:block;font-size:19px;font-weight:500}
.month .hd{display:flex;justify-content:space-between;font:12px var(--f-mono);color:var(--dim)}
.month .hd .g{font-family:var(--f-body);color:var(--mute);display:flex;align-items:center;gap:6px}
.month .ym{display:flex;align-items:center;gap:8px;font-size:18px;font-weight:600}.month .ym .tag{font-weight:400}
.month .bigscore{font:500 72px/1 var(--f-num)}.month .bigscore small{font:14px var(--f-mono);color:var(--dim);margin-left:8px}
.tip{display:flex;gap:10px;align-items:flex-start;background:var(--field);border-radius:12px;padding:12px;font-size:13px}.tip svg{width:16px;height:16px;flex:none;color:var(--acc);margin-top:2px}
.tip.plain{background:none;padding:0;color:var(--mute)}.tip.plain svg{color:var(--dim)}
.gdot{width:6px;height:6px;border-radius:3px;display:inline-block}
.g-best{background:var(--acc)}.g-good{background:#e4e7e1}.g-mid{background:#9a9f98}.g-low{background:#5b605a}
.stats3{display:flex;gap:8px}.stats3>div{flex:1;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:12px}
.stats3 .n{font:500 24px var(--f-num)}.stats3 small{font-size:12px;color:var(--dim);margin-left:4px}
.chart12{position:relative;height:150px;display:flex;align-items:flex-end;gap:6px;border-bottom:1px solid var(--rule);margin-top:24px}
.chart12 button{flex:1;display:flex;align-items:flex-end;height:100%;position:relative}
.chart12 button i{display:block;width:100%;border-radius:4px 4px 0 0}
.chart12 .best i{background:#b7d39a}.chart12 .good i{background:#e4e7e1}.chart12 .mid i{background:#8e928c}.chart12 .low i{background:#4d524c}
.chart12 button.dim i{opacity:.25}
.chart12 .tipnum{position:absolute;left:50%;transform:translateX(-50%);background:#eef0ec;color:#0e0f0e;font:600 12px var(--f-num);border-radius:6px;padding:2px 7px;white-space:nowrap}
.chart12 .avg{position:absolute;left:0;right:0;border-top:1px dashed rgba(255,255,255,.3);pointer-events:none}
.chart12 .avg span{position:absolute;left:0;top:-16px;font:11px var(--f-mono);color:var(--dim)}
.mlabels{display:flex;gap:6px;margin-top:8px}.mlabels span{flex:1;text-align:center;font:12px var(--f-mono);color:var(--dim)}.mlabels span.on{color:var(--fg)}
.filters{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.filters button{height:32px;padding:0 12px;border-radius:16px;border:1px solid var(--line);font-size:13px;color:var(--mute);display:flex;align-items:center;gap:6px}
.filters button[aria-pressed=true]{background:var(--fg);color:#0e0f0e;border-color:var(--fg)}
.mtable{padding:8px 4px}.mtable .th,.mtable .tr{display:grid;grid-template-columns:1.3fr .9fr .6fr 1.3fr;align-items:center;padding:0 12px}
.mtable .th{font-size:12px;color:var(--dim);height:32px}
.mtable .tr{height:44px;font-size:14px;border-radius:12px;width:100%;text-align:left}
.mtable .tr .ym{font:500 14px var(--f-num)}.mtable .tr .sc{font:500 17px var(--f-num)}.mtable .tr .fl{font-size:13px;color:var(--mute);display:flex;align-items:center;gap:6px}
.mtable .open{background:#1f221f}.mtable .desc{background:#1f221f;margin-top:-6px;padding:0 12px 12px;border-radius:0 0 12px 12px;font-size:13px;color:var(--mute)}
.mtable .tr.hide{display:none}

/* 요약·공유 */
.summary .r{display:flex;justify-content:space-between;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule)}
.summary .r b{font-size:16px;font-weight:500}.summary .r small{font:12px var(--f-mono);color:var(--dim);margin-left:6px}
.top3{display:flex;gap:8px}.top3>div{flex:1;border-radius:14px;background:var(--field);padding:12px;display:flex;flex-direction:column;gap:2px}
.top3>div.first{background:var(--btn);color:#0e0f0e}.top3 .n{font:500 18px var(--f-num)}
.spark{display:flex;align-items:flex-end;gap:5px;height:40px;margin-top:12px}.spark i{flex:1;border-radius:2px;background:#4d524c}.spark i.g{background:#b7d39a}
.sheet{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.6)}
.sheet .in{width:100%;max-width:430px;background:#1a1c1a;border-radius:24px 24px 0 0;padding:12px 20px calc(24px + env(safe-area-inset-bottom))}
.sheet .grab{width:36px;height:4px;border-radius:2px;background:#3a3e39;margin:0 auto 18px}
.sheet .opts{display:flex;justify-content:space-between;margin:18px 0 24px}
.sheet .opts button{display:flex;flex-direction:column;align-items:center;gap:10px;font-size:12px;color:var(--mute);width:72px}
.sheet .opts .c{width:56px;height:56px;border-radius:28px;background:#262925;display:grid;place-items:center}.sheet .opts svg{width:20px;height:20px;color:var(--fg)}
.toast{position:fixed;left:50%;bottom:calc(96px + env(safe-area-inset-bottom));transform:translateX(-50%);background:#eef0ec;color:#0e0f0e;border-radius:10px;padding:10px 14px;font-size:13px;z-index:30}
.legal{font-size:11px;color:var(--dim);line-height:1.7;margin-top:24px;text-align:center}.legal a{color:var(--dim)}