@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css');

/* ============================================================
 * Battery Value Chain Wars — 미니멀 관제실
 *  · 밝은 배경 + 흰 카드 + 강조색은 주황 하나
 *  · 넉넉한 여백, 굵고 큰 한글
 *  · 진영 색은 "데이터 구분용"이며 UI 강조색이 아니다
 * ============================================================ */
:root{
  --bg:#F3F4F6;
  --panel:#FFFFFF;
  --panel2:#F7F8FA;
  --line:#E5E7EB;
  --line2:#D1D5DB;
  --ink:#111827;
  --sub:#6B7280;

  --accent:#F2760C;            /* 단일 강조 — 주황 */
  --accent-dark:#C05A00;
  --accent-soft:#FFF2E5;
  --on-accent:#FFFFFF;

  --good:#0F7B52; --good-soft:#E6F5EF;
  --warn:#B45309; --warn-soft:#FEF3C7;
  --bad:#C02626;  --bad-soft:#FDECEC;

  --grad1:#FFFFFF; --grad2:#F7F8FA;
  --schi1:#FFFFFF; --schi2:#F7F8FA;

  /* 진영 구분색 */
  --mine:#8A6420; --pre:#6C4FBF; --cat:#0E8F77; --cell:#2E6FB8; --ev:#D9642B; --rec:#3E8E41;

  --r:14px;
  --r-sm:10px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-lg:0 10px 30px rgba(16,24,40,.10);
  --thumbBorder:#FFFFFF;
}
:root[data-theme="dark"]{
  --bg:#14161A;
  --panel:#1C1F24;
  --panel2:#23272E;
  --line:#31363E;
  --line2:#434952;
  --ink:#F0F2F5;
  --sub:#9BA3AF;

  --accent:#FF8A2B;
  --accent-dark:#E0700F;
  --accent-soft:#3A2612;
  --on-accent:#1A1206;

  --good:#3FBF8A; --good-soft:#12301F;
  --warn:#E5A93C; --warn-soft:#33280F;
  --bad:#F0685C;  --bad-soft:#3A1B18;

  --grad1:#1C1F24; --grad2:#23272E;
  --schi1:#1C1F24; --schi2:#16181C;

  --mine:#C9A03A; --pre:#A98BEA; --cat:#3FC5A8; --cell:#66A6E6; --ev:#F0895A; --rec:#6FC272;

  --shadow:0 1px 2px rgba(0,0,0,.30);
  --shadow-lg:0 12px 34px rgba(0,0,0,.45);
  --thumbBorder:#1C1F24;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'Pretendard','Pretendard Variable',-apple-system,'Malgun Gothic',sans-serif;
  background:var(--bg);color:var(--ink);line-height:1.5;padding:18px;
  transition:background .2s,color .2s;-webkit-font-smoothing:antialiased}
h1{font-size:20px;font-weight:800;letter-spacing:-.4px}
h2{font-size:17px;font-weight:800;letter-spacing:-.3px}
a{color:var(--accent)}

button{font-family:inherit;font-weight:700;font-size:14px;border:1px solid var(--line2);
  background:var(--panel);color:var(--ink);padding:10px 16px;border-radius:var(--r-sm);
  cursor:pointer;transition:.15s}
button:hover{border-color:var(--accent);color:var(--accent)}
button.pri{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
button.pri:hover{background:var(--accent-dark);border-color:var(--accent-dark);color:var(--on-accent)}
button.big{font-size:16px;padding:14px 24px}
button:disabled{opacity:.4;cursor:not-allowed}

/* ══════════ 상단 툴바 ══════════ */
.topbar{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:12px 18px;margin-bottom:18px;box-shadow:var(--shadow)}
.tb-brand{display:flex;align-items:center;gap:10px;font-size:15px;font-weight:800;letter-spacing:-.3px}
.tb-brand .tbi{font-size:22px}
.tb-brand .tb-sub{font-size:12px;font-weight:700;color:var(--sub);
  background:var(--panel2);border:1px solid var(--line);border-radius:20px;padding:3px 10px}
.tb-right{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tb-code{font-size:13px;color:var(--sub);font-weight:700;display:flex;align-items:center;gap:8px}
.tb-code b{font-size:22px;letter-spacing:3px;color:var(--ink);font-variant-numeric:tabular-nums}
.tbtn{font-size:13px;padding:8px 13px;border-radius:20px}
.tbtn.hot{background:var(--accent);color:var(--on-accent);border-color:var(--accent)}
.tbtn.hot:hover{background:var(--accent-dark);color:var(--on-accent)}

/* ══════════ 관제실 골격 ══════════ */
.shell{display:grid;grid-template-columns:320px minmax(0,1fr);gap:18px;align-items:start}
.side{position:sticky;top:18px;display:flex;flex-direction:column;gap:14px}
.main{display:flex;flex-direction:column;gap:16px;min-width:0}

/* 세로 4단계 */
.vsteps{list-style:none;background:var(--panel);border:1px solid var(--line);
  border-radius:var(--r);padding:8px;box-shadow:var(--shadow)}
.vstep{display:flex;align-items:center;gap:12px;padding:12px 13px;border-radius:var(--r-sm);
  color:var(--sub);font-weight:700;font-size:14.5px;transition:.2s}
.vstep .vn{width:26px;height:26px;border-radius:50%;flex:none;display:flex;align-items:center;
  justify-content:center;font-size:13px;font-weight:800;background:var(--panel2);
  border:1px solid var(--line2);color:var(--sub)}
.vstep.done{color:var(--ink)}
.vstep.done .vn{background:var(--good);border-color:var(--good);color:#fff}
.vstep.act{background:var(--accent-soft);color:var(--accent-dark);font-weight:800}
.vstep.act .vn{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
:root[data-theme="dark"] .vstep.act{color:var(--accent)}

/* 지금 할 일 */
.nowcard{background:var(--panel);border:1px solid var(--line);border-left:5px solid var(--accent);
  border-radius:var(--r);padding:18px;box-shadow:var(--shadow)}
.nowlab{font-size:11px;font-weight:800;letter-spacing:.12em;color:var(--accent)}
.nowtitle{font-size:20px;font-weight:800;line-height:1.35;margin-top:7px;letter-spacing:-.4px}
.nowdesc{font-size:13.5px;color:var(--sub);line-height:1.65;margin-top:9px}

/* 단 하나의 실행 버튼 */
.mainbtn{width:100%;background:var(--accent);color:var(--on-accent);border:none;
  border-radius:var(--r);padding:22px 18px;font-size:19px;font-weight:800;letter-spacing:-.3px;
  cursor:pointer;box-shadow:0 6px 18px rgba(242,118,12,.28);transition:.18s}
.mainbtn:hover{background:var(--accent-dark);color:var(--on-accent);transform:translateY(-2px);
  box-shadow:0 10px 26px rgba(242,118,12,.36)}
.mainbtn:disabled{background:var(--panel2);color:var(--sub);box-shadow:none;transform:none;border:1px solid var(--line)}
.mainbtn.ready{background:var(--good);box-shadow:0 6px 18px rgba(15,123,82,.28)}
.mainbtn.ready:hover{background:#0B6242;box-shadow:0 10px 26px rgba(15,123,82,.36)}
.mainhint{font-size:12px;color:var(--sub);text-align:center;margin-top:-4px}

/* 사이드 메타 */
.sidemeta{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:6px 16px;box-shadow:var(--shadow)}
.smrow{display:flex;align-items:center;justify-content:space-between;padding:11px 0;
  border-bottom:1px solid var(--line);font-size:13px;color:var(--sub);font-weight:700}
.smrow:last-child{border:none}
.smrow b{font-size:19px;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:.5px}
.smrow b.code{letter-spacing:3px}
.smrow b.warn{color:var(--bad)}

/* ══════════ 본문 ══════════ */
.hero2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:20px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.card>h3{font-size:13px;font-weight:800;color:var(--sub);letter-spacing:.02em;
  margin-bottom:14px;display:flex;align-items:center;gap:6px}
.gaugecard{text-align:center}
.gaugecard .statuschip{display:inline-block;font-size:14px;font-weight:800;padding:6px 16px;
  border-radius:20px;margin-top:6px}
.quickstats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:18px;
  padding-top:16px;border-top:1px solid var(--line)}
.qs{text-align:center}
.qs .qsl{font-size:11px;color:var(--sub);font-weight:700}
.qs .qsv{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums;margin-top:3px}

/* 팀 현황 리스트 */
.teamlist{list-style:none;display:flex;flex-direction:column;gap:2px}
.trow{display:flex;align-items:center;gap:11px;padding:11px 10px;border-radius:var(--r-sm);
  font-size:14px;font-weight:700;transition:.15s}
.trow:hover{background:var(--panel2)}
.trow .tdot{width:10px;height:10px;border-radius:50%;flex:none;background:var(--line2)}
.trow .tname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow .tlead{font-size:11.5px;font-weight:700;color:var(--sub);white-space:nowrap}
/* 이름 길이와 무관하게 열이 흔들리지 않도록 상태·금액 칸을 고정폭으로 잡는다 */
/* 리더 이름은 진행자가 "누가 리더였는지" 부르는 데 쓴다 — 알아볼 만큼은 보여야 한다.
   116px 고정이라 '김철수 팀장(생산기술)' 같은 이름은 절반도 안 보였다.
   행에 여유가 있으면 늘리고, 좁아지면 팀 이름과 함께 줄어든다. */
.trow .chip.lead{flex:0 1 auto;max-width:220px;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.trow .chip.ok,.trow .chip.wait,.trow .chip.idle{flex:none;min-width:62px;text-align:center}
.trow .tprofit{font-variant-numeric:tabular-nums;font-size:13.5px;white-space:nowrap;
  flex:none;min-width:78px;text-align:right}
.trow.off{opacity:.45}
.trow .tfree{flex:none;font-size:11px;line-height:1;padding:4px 7px;min-height:0;
  opacity:0;transition:opacity .15s}
.trow:hover .tfree,.trow .tfree:focus{opacity:1}
.chip{font-size:11px;font-weight:800;padding:3px 9px;border-radius:20px;white-space:nowrap;letter-spacing:.02em}
.chip.ok{background:var(--good);color:#fff}
.chip.wait{background:var(--warn-soft);color:var(--warn);border:1px dashed var(--warn)}
.chip.idle{background:var(--panel2);color:var(--sub);border:1px solid var(--line)}
.chip.lead{background:var(--accent-soft);color:var(--accent-dark);border:1px solid var(--accent)}
:root[data-theme="dark"] .chip.lead{color:var(--accent)}
/* 교대가 필요한 리더 — 알림이지 경보는 아니다. 전 팀에 동시에 뜨므로 톤을 낮춘다 */
.chip.lead.stale{background:transparent;color:var(--sub);border:1px dashed var(--line2);font-weight:700}
:root[data-theme="dark"] .chip.lead.stale{color:var(--sub)}

/* 접힘 영역 */
.fold{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.fold>summary{cursor:pointer;list-style:none;padding:16px 20px;font-size:14.5px;font-weight:800;
  display:flex;align-items:center;gap:10px;color:var(--ink);border-radius:var(--r)}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:'▸';color:var(--accent);font-size:14px;transition:.2s}
.fold[open]>summary::before{transform:rotate(90deg)}
.fold>summary:hover{color:var(--accent)}
.fold>summary .fsub{font-size:12.5px;font-weight:600;color:var(--sub);margin-left:auto}
.foldbody{padding:4px 20px 22px;display:flex;flex-direction:column;gap:16px}

/* 진영 카드 */
.factions{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
.fcard{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);
  padding:15px;position:relative;overflow:hidden}
.fcard::before{content:'';position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--accent)}
.fcard.mine::before{background:var(--mine)} .fcard.pre::before{background:var(--pre)}
.fcard.cat::before{background:var(--cat)}   .fcard.cell::before{background:var(--cell)}
.fcard.ev::before{background:var(--ev)}     .fcard.rec::before{background:var(--rec)}
.ctitle{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.ctitle .name{font-weight:800;font-size:14.5px;display:flex;align-items:center;gap:7px}
/* 배지는 10px 굵은 글씨라 WCAG 기준 4.5:1 이 필요하다.
   진영색을 그대로 쓰고 흰 글자를 얹으면 라이트에서 3색(양극재·완성차·리사이클),
   다크에서는 7색 전부가 미달이었다(2.1~2.8:1). 배지에만 쓰는 색을 따로 둔다.
   — 라이트: 색을 조금 어둡게 하고 흰 글자
   — 다크  : 색은 그대로 두고 글자를 어둡게 (배경이 밝은 계열이므로) */
:root{
  --badge-ink:#fff;
  --badge-mine:var(--mine); --badge-pre:var(--pre);   --badge-cat:#0D8670;
  --badge-cell:var(--cell); --badge-ev:#BF5826;       --badge-rec:#3A853D;
  --badge-sub:var(--sub);
}
:root[data-theme="dark"]{
  --badge-ink:#17150F;
  --badge-cat:var(--cat); --badge-ev:var(--ev); --badge-rec:var(--rec);
}
.badge{font-size:10px;font-weight:800;padding:3px 9px;border-radius:20px;
  color:var(--badge-ink);background:var(--badge-sub)}
.mine .badge{background:var(--badge-mine)} .pre .badge{background:var(--badge-pre)}
.cat .badge{background:var(--badge-cat)}   .cell .badge{background:var(--badge-cell)}
.ev .badge{background:var(--badge-ev)}     .rec .badge{background:var(--badge-rec)}
.dot{width:9px;height:9px;border-radius:50%;background:var(--line2);display:inline-block}
.dot.on{background:var(--good)}
.seat{border-top:1px dashed var(--line2);padding-top:10px;margin-top:10px}
.seat:first-child{border:none;padding-top:0;margin-top:0}
.seathead{display:flex;align-items:center;gap:6px;font-size:12.5px;font-weight:800;margin-bottom:7px;flex-wrap:wrap}
.seathead .sp{margin-left:auto;font-variant-numeric:tabular-nums}
.sharetag{font-size:10.5px;font-weight:700;padding:2px 8px;border-radius:20px;
  background:var(--panel);border:1px solid var(--line);color:var(--sub)}
.lv{margin:6px 0}
.lv .lvtop{display:flex;justify-content:space-between;font-size:11.5px;color:var(--sub);margin-bottom:3px}
.lv .lvtop b{color:var(--ink);font-variant-numeric:tabular-nums;font-weight:700}
.lv .lvtrack{height:5px;background:var(--line);border-radius:5px;overflow:hidden}
.lv .lvfill{height:100%;border-radius:5px;transition:width .4s}
.profit{margin-top:12px;padding-top:10px;border-top:1px dashed var(--line2);
  display:flex;justify-content:space-between;align-items:baseline}
.profit .lab{font-size:11.5px;color:var(--sub);font-weight:700}
.profit .val{font-size:20px;font-weight:800;font-variant-numeric:tabular-nums}
.pos{color:var(--good)} .neg{color:var(--bad)}
.seatbtns{display:flex;gap:6px;margin-top:10px}
.seatbtns button{font-size:11.5px;padding:6px 10px}

/* 지표·차트 */
.charts3{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.chartbox{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.chartbox h3{font-size:12.5px;color:var(--sub);margin-bottom:12px;font-weight:800;
  display:flex;align-items:center;gap:6px}
.metrics{background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:6px 16px}
.m{display:flex;justify-content:space-between;padding:9px 0;font-size:13.5px;border-bottom:1px solid var(--line)}
.m:last-child{border:none}
.m .k{color:var(--sub);display:inline-flex;align-items:center;gap:6px;font-weight:600}
.m .v{font-weight:800;font-variant-numeric:tabular-nums}

/* 진행 도구 */
.controls{display:flex;flex-wrap:wrap;gap:9px;align-items:center;
  background:var(--panel2);border:1px solid var(--line);border-radius:var(--r);padding:14px 16px}
.controls .glab{font-size:12.5px;color:var(--sub);font-weight:800;margin-right:4px}
.controls select{padding:9px 10px;border-radius:var(--r-sm);background:var(--panel);color:var(--ink);
  border:1px solid var(--line2);font-family:inherit;font-weight:700;font-size:13px}
.eco{display:flex;align-items:center;gap:9px;margin-left:auto;font-size:12.5px;color:var(--sub);font-weight:700}
.eco input{width:130px}
.pill{font-size:12.5px;font-weight:700;padding:6px 12px;border-radius:20px;
  background:var(--panel2);border:1px solid var(--line);color:var(--sub)}
.banner{border-radius:var(--r);padding:13px 16px;font-size:13.5px;font-weight:700;line-height:1.6}
.banner.event{background:var(--warn-soft);color:var(--warn);border:1px solid var(--warn)}
.note{font-size:12px;color:var(--sub);margin-top:10px;line-height:1.65}
.rolebtn{font-size:13px;padding:9px 14px;border-radius:20px}
.term{border-bottom:1.5px dotted var(--accent);cursor:help;font-weight:700}

input[type=range]{width:100%;height:6px;-webkit-appearance:none;background:var(--line);
  border-radius:6px;outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;
  background:var(--accent);cursor:pointer;border:3px solid var(--thumbBorder);box-shadow:var(--shadow)}
input[type=range]::-moz-range-thumb{width:20px;height:20px;border-radius:50%;background:var(--accent);
  border:3px solid var(--thumbBorder)}
input[type=range]:disabled{opacity:.6}

.ic{display:inline-flex;align-items:center;justify-content:center;width:15px;height:15px;border-radius:50%;
  border:1px solid var(--line2);color:var(--sub);font-size:9.5px;font-weight:800;cursor:help;
  font-style:normal;flex:none}
.ic:hover{border-color:var(--accent);color:var(--accent)}

/* ══════════ 차트 (charts.js) ══════════ */
.chbar{margin:10px 0;cursor:help}
.chbar-top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:5px;align-items:baseline}
.chbar-name{font-weight:700}
.chbar-top b{font-variant-numeric:tabular-nums}
.chbar-track{height:10px;background:var(--line);border-radius:6px;overflow:hidden}
.chbar-fill{height:100%;border-radius:6px;transition:width .45s cubic-bezier(.3,1,.4,1)}
.chbar:hover .chbar-fill{filter:brightness(1.1)}
svg [data-tip]:hover{filter:brightness(1.15)}
.legend{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:10px;font-size:11.5px;color:var(--sub)}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;
  vertical-align:middle;font-style:normal}
.cstep{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.cstep-item{display:flex;align-items:center;gap:7px;opacity:.4;transition:.2s}
.cstep-item.act,.cstep-item.done{opacity:1}
.cstep-dot{width:22px;height:22px;border-radius:50%;background:var(--line);color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex:none}
.cstep-item.act .cstep-dot{background:var(--accent);color:var(--on-accent)}
.cstep-item.done .cstep-dot{background:var(--good);color:#fff}
.cstep-label{font-size:11.5px;font-weight:700;white-space:nowrap}
.cstep-line{flex:1;height:2px;background:var(--line);min-width:12px}

/* ══════════ 발표모드 스코어보드 (B안) ══════════ */
.score{position:fixed;inset:0;z-index:500;display:none;
  background:linear-gradient(160deg,#0A1830 0%,#071224 60%,#050D1A 100%);color:#EAF2FF;
  padding:34px 40px;overflow:auto}
.score.show{display:flex;flex-direction:column;gap:20px}
.score-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.score-title{font-size:26px;font-weight:900;letter-spacing:-.5px}
.score-title span{color:#7DF9C0}
.score-sub{font-size:14px;color:#8FA6C4;font-weight:700;margin-top:4px}
.score-close{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);color:#EAF2FF;
  font-size:14px;font-weight:800;padding:11px 20px;border-radius:24px;cursor:pointer}
.score-close:hover{background:rgba(255,255,255,.16);border-color:#7DF9C0;color:#7DF9C0}

.rankrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.rankcard{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  border-radius:16px;padding:16px 14px;text-align:center;position:relative}
.rankcard.top{background:linear-gradient(165deg,rgba(125,249,192,.20),rgba(125,249,192,.05));
  border-color:#7DF9C0}
.rankcard .rk{font-size:22px;font-weight:900;line-height:1}
.rankcard .rname{font-size:14.5px;font-weight:800;margin:9px 0 7px;line-height:1.3}
.rankcard .rval{font-size:24px;font-weight:900;font-variant-numeric:tabular-nums;color:#7DF9C0;letter-spacing:-.5px}
.rankcard.top .rval{font-size:28px}
.rankcard .rdelta{font-size:13px;font-weight:800;margin-top:6px}
.rdelta.up{color:#7DF9C0} .rdelta.down{color:#FF8A8A} .rdelta.same{color:#7E93B0}

.score-center{text-align:center;padding:14px 0 6px}
.score-center .sclab{font-size:17px;font-weight:800;color:#8FA6C4;letter-spacing:.05em}
.score-center .scbig{font-size:clamp(110px,20vw,220px);font-weight:900;line-height:.92;
  color:#7DF9C0;font-variant-numeric:tabular-nums;letter-spacing:-.04em;
  text-shadow:0 0 60px rgba(125,249,192,.35)}
.score-center .scstat{display:inline-block;font-size:20px;font-weight:900;padding:8px 26px;
  border-radius:30px;margin-top:6px}
.score-meta{display:flex;justify-content:center;gap:34px;flex-wrap:wrap;margin-top:18px}
.score-meta .smi{text-align:center}
.score-meta .smk{font-size:13px;color:#8FA6C4;font-weight:700}
.score-meta .smv{font-size:28px;font-weight:900;font-variant-numeric:tabular-nums;margin-top:2px}

.score-foot{margin-top:auto}
.score-foot .sflab{font-size:13px;color:#8FA6C4;font-weight:800;letter-spacing:.08em;margin-bottom:10px}
.sfrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.sfitem{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);border-radius:12px;
  padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.sfitem .sfn{font-size:13.5px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sfitem .sfv{font-size:16px;font-weight:900;font-variant-numeric:tabular-nums;white-space:nowrap}
.sfv.pos{color:#7DF9C0} .sfv.neg{color:#FF8A8A}

/* ══════════ 오버레이 ══════════ */
.obov{position:fixed;inset:0;background:rgba(17,24,39,.68);z-index:600;display:none;
  align-items:center;justify-content:center;padding:22px;overflow:auto}
.obov.show{display:flex}
.obcard{background:var(--panel);border:1px solid var(--line);border-radius:20px;max-width:580px;
  width:100%;padding:30px;text-align:center;box-shadow:var(--shadow-lg)}
.obcard .obemoji{font-size:46px}
.obcard h2{font-size:23px;margin:10px 0 8px}
.obcard .obsub{color:var(--sub);font-size:14px;line-height:1.7}
.oblist{text-align:left;margin:20px 0}
.obrow{display:flex;gap:13px;align-items:flex-start;padding:13px;border-radius:var(--r-sm);
  background:var(--panel2);margin:9px 0}
.obrow .n{width:26px;height:26px;border-radius:50%;background:var(--accent);color:var(--on-accent);
  font-weight:800;font-size:13px;display:flex;align-items:center;justify-content:center;flex:none}
.obrow .t{font-size:14px;font-weight:800}
.obrow .d{font-size:12.5px;color:var(--sub);margin-top:3px;line-height:1.6}
.obnav{display:flex;gap:9px;justify-content:center;margin-top:8px}
.obdots{display:flex;gap:6px;justify-content:center;margin:16px 0 12px}
.obdots i{width:7px;height:7px;border-radius:50%;background:var(--line2);display:block}
.obdots i.on{background:var(--accent);width:22px;border-radius:4px}

/* ══════════ 팀 화면 공통 ══════════ */
.actbar{display:flex;align-items:center;gap:13px;border-radius:var(--r);padding:15px 17px;margin:12px 0;
  border:1px solid var(--line);background:var(--panel);box-shadow:var(--shadow)}
.actbar.go{border-color:var(--accent);background:var(--accent-soft)}
.actbar.wait{border-color:var(--line2);background:var(--panel2)}
.actbar.done{border-color:var(--good);background:var(--good-soft)}
.actbar .ai{font-size:24px;flex:none}
.actbar .at{font-weight:800;font-size:16px;letter-spacing:-.3px}
.actbar .ad{font-size:13px;color:var(--sub);margin-top:3px;line-height:1.55}
:root[data-theme="dark"] .actbar.go .at,:root[data-theme="dark"] .actbar.done .at{color:var(--ink)}

/* ══════════ 랜딩 ══════════ */
.wrap{max-width:640px;margin:6vh auto 0}
.hero{text-align:center;margin-bottom:28px}
.hero .mark{font-size:48px}
.hero h1{font-size:27px;margin:10px 0 6px}
.hero p{color:var(--sub);font-size:14.5px}
.choose{display:grid;grid-template-columns:1fr 1fr;gap:15px}
@media(max-width:520px){.choose{grid-template-columns:1fr}}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:24px;
  text-align:center;cursor:pointer;transition:.18s;box-shadow:var(--shadow)}
.tile:hover{border-color:var(--accent);transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.tile .ti{font-size:36px} .tile h3{margin:11px 0 5px;font-size:18px} .tile p{color:var(--sub);font-size:12.5px}
.form{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:22px;
  margin-top:18px;box-shadow:var(--shadow)}
.form label{display:block;font-size:12.5px;color:var(--sub);margin:10px 0 6px;font-weight:700}
.form input[type=text]{width:100%;padding:14px;font-size:17px;font-family:inherit;
  border:1px solid var(--line2);border-radius:var(--r-sm);background:var(--panel2);color:var(--ink);
  text-transform:uppercase;letter-spacing:4px;text-align:center;font-weight:800}
.facpick{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
.facbtn{padding:14px;border-radius:var(--r-sm);border:1px solid var(--line2);background:var(--panel);
  color:var(--ink);font-weight:700;cursor:pointer;display:flex;align-items:center;gap:9px;justify-content:center}
.facbtn.sel{border-color:var(--accent);border-width:2px}
.facbtn:disabled{opacity:.4;cursor:not-allowed}
.err{color:var(--bad);font-size:13px;font-weight:700;margin-top:10px;min-height:18px;text-align:center}
.themeBtn{font-size:13px;font-weight:700;border:1px solid var(--line2);background:var(--panel);
  color:var(--ink);padding:8px 13px;border-radius:20px;cursor:pointer}

/* ══════════ 툴팁 — 테마 무관 고정색 ══════════ */
#tooltip{position:fixed;z-index:9999;max-width:290px;
  background:#16150F;color:#F4EFE4;border:1px solid #4C473D;border-radius:10px;
  padding:11px 13px;font-size:12px;line-height:1.65;
  box-shadow:0 10px 28px rgba(0,0,0,.45);opacity:0;visibility:hidden;
  transition:opacity .12s;pointer-events:none}
#tooltip b{color:#FFC98A}
#tooltip i,#tooltip em{color:#B9D8C4;font-style:normal}

/* ══════════ 반응형 ══════════ */
@media(max-width:1180px){
  .shell{grid-template-columns:1fr}
  .side{position:static}
  .vsteps{display:flex;padding:6px}
  .vstep{flex:1;justify-content:center;padding:11px 8px;font-size:13px}
  .vstep .vn{width:22px;height:22px;font-size:12px}
}
@media(max-width:860px){
  body{padding:12px}
  .hero2{grid-template-columns:1fr}
  .topbar{padding:11px 14px}
  .tb-code b{font-size:20px}
  .score{padding:22px 18px}
  .score-title{font-size:21px}
  .score-meta{gap:20px}
}
@media(max-width:560px){
  .tb-right{width:100%;justify-content:space-between}
  .vstep .vlabel{display:none}
  .vsteps{gap:2px}
  .quickstats{grid-template-columns:1fr;gap:8px}
  .score-meta .smv{font-size:22px}
}

/* 진영 캐릭터 — 이모지 대신 사람 얼굴 */
.cav{display:inline-flex;align-items:center;justify-content:center;flex:none;
  border-radius:50%;overflow:hidden;border:1px solid var(--line)}
.cav img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block}
.cpt{display:inline-flex;align-items:flex-end;justify-content:center;flex:none;overflow:hidden}
.cpt img{width:100%;height:100%;object-fit:contain;display:block}
:root[data-theme="dark"] .cav img,:root[data-theme="dark"] .cpt img{filter:invert(1) hue-rotate(180deg)}