:root{
  --canvas:#EDEFF3; --card:#FFFFFF; --soft:#F4F6F9; --soft-2:#EEF1F6;
  --ink:#17191F; --ink-2:#3D424D; --muted:#69707E; --faint:#9AA1AD;
  --line:#E2E6EC; --line-strong:#D3D9E1;
  --brand:#0E4DFF; --brand-ink:#0A3AC2; --brand-soft:#E8EEFF;
  --up:#12A150; --up-soft:rgba(18,161,80,.10);
  --down:#E0393E; --down-soft:rgba(224,57,62,.10);
  --amber:#C77A08; --amber-soft:rgba(199,122,8,.12);
  --slate:#8A93A3; --lav:#A08BFF; --lav-soft:#D9D2FF;
  --shadow:0 1px 2px rgba(20,25,35,.05),0 6px 20px rgba(20,25,35,.06);
  --radius:16px;
  --sans:"Pretendard","Pretendard Variable",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{font-size:clamp(14px,.92vw,16px)}
body{margin:0;background:var(--canvas);color:var(--ink);font-family:var(--sans);line-height:1.45;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
button{font-family:inherit;cursor:pointer}
input,select{font-family:inherit;font-size:.95rem}
.boot{padding:40px;text-align:center;color:var(--muted)}
.sr{position:absolute;left:-9999px}

/* ---------- Top bar ---------- */
.top{position:sticky;top:0;z-index:30;background:rgba(237,239,243,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.top-in{max-width:1440px;margin:0 auto;padding:10px 24px 0}
.row1{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{width:38px;height:38px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;font-weight:900;font-size:18px}
.brand-title{font-weight:800;font-size:1.05rem;display:block;line-height:1.1}
.brand-sub{font-size:.72rem;color:var(--muted);letter-spacing:.02em}
.meta-chip{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:5px 12px;font-size:.78rem;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.meta-chip b{font-weight:800}
.meta-chip.warn{border-color:var(--amber);color:var(--amber);background:var(--amber-soft)}
.meta-chip.bad{border-color:var(--down);color:var(--down);background:var(--down-soft)}
.meta-chip.good{border-color:var(--up);color:var(--up);background:var(--up-soft)}
.spacer{flex:1}
.unit{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--card)}
.unit button{border:0;background:transparent;padding:6px 12px;font-size:.78rem;color:var(--muted)}
.unit button[aria-pressed=true]{background:var(--ink);color:#fff}
.user-chip{display:inline-flex;align-items:center;gap:8px;font-size:.8rem;color:var(--ink-2)}
.user-chip .role{background:var(--brand-soft);color:var(--brand-ink);border-radius:6px;padding:2px 6px;font-weight:700;font-size:.7rem}
.linkbtn{border:0;background:transparent;color:var(--muted);font-size:.8rem;text-decoration:underline}
.tabs{display:flex;gap:6px;margin-top:10px;overflow-x:auto;padding-bottom:10px}
.tabs a{white-space:nowrap;padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--card);font-size:.84rem;color:var(--ink-2);display:inline-flex;align-items:center;gap:6px}
.tabs a[aria-current=page]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tabs a .soon{font-size:.62rem;background:var(--soft-2);color:var(--muted);border-radius:4px;padding:1px 5px}
.tabs a[aria-current=page] .soon{background:rgba(255,255,255,.2);color:#fff}
.tabs a .dot{width:8px;height:8px;border-radius:50%;background:var(--pc,#999)}

/* ---------- Layout ---------- */
.wrap{max-width:1440px;margin:0 auto;padding:20px 24px 60px}
section.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:20px 22px;margin-bottom:18px}
.sec-head{display:flex;align-items:baseline;gap:12px;margin-bottom:12px;flex-wrap:wrap}
.sec-num{font-size:.7rem;color:var(--faint);font-weight:700;letter-spacing:.08em}
.sec-head h2{margin:0;font-size:1.2rem;font-weight:800}
.sec-head h3{margin:0;font-size:1rem;font-weight:800}
.sec-note{margin:0;color:var(--muted);font-size:.8rem;flex-basis:100%}
.units{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 14px}
.ubadge{border:1px solid var(--line);border-radius:999px;padding:4px 10px;font-size:.74rem;color:var(--ink-2);background:var(--soft)}
.ubadge b{font-weight:800}
.callout{border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:8px;padding:10px 14px;background:var(--card);font-size:.82rem;line-height:1.6;color:var(--ink-2);margin:12px 0}
.callout.info{border-left-color:var(--brand)}
.callout.bad{border-left-color:var(--down)}
.foot{color:var(--muted);font-size:.78rem;margin:10px 0 0}

/* ---------- KPI grid ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.kpi{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px;position:relative}
.kpi .t{font-size:.74rem;color:var(--muted);line-height:1.3}
.kpi .t b{color:var(--ink-2)}
.kpi .n{font-size:1.65rem;font-weight:800;letter-spacing:-.02em;margin-top:4px;font-variant-numeric:tabular-nums}
.kpi .n.good{color:var(--up)} .kpi .n.mid{color:var(--amber)} .kpi .n.bad{color:var(--down)} .kpi .n.na{color:var(--faint)}
.kpi .s{font-size:.7rem;color:var(--faint);margin-top:4px}
.kpi .pc{position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:3px;background:var(--pc,transparent)}
.badge{display:inline-block;border-radius:5px;padding:1px 6px;font-size:.66rem;font-weight:700;vertical-align:middle}
.badge.prov{background:var(--amber-soft);color:var(--amber)}
.badge.na{background:var(--soft-2);color:var(--muted)}
.badge.assume{background:var(--lav-soft);color:#5436C7}
.badge.fixture{background:var(--brand-soft);color:var(--brand-ink)}

/* ---------- Charts ---------- */
.charts{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:14px}
.chart-card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.chart-card h4{margin:0 0 2px;font-size:1rem;font-weight:800;display:flex;align-items:center;gap:8px}
.chart-card .sub{font-size:.74rem;color:var(--muted);margin:0 0 8px;line-height:1.5}
.chart-card svg{width:100%;height:auto;display:block}
.legend{display:flex;gap:14px;flex-wrap:wrap;font-size:.74rem;color:var(--ink-2);margin-top:6px}
.legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.cmode{display:flex;gap:6px;margin:6px 0 10px}
.dchip{border:1px solid var(--line);background:var(--card);border-radius:999px;padding:4px 12px;font-size:.76rem;color:var(--ink-2)}
.dchip.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.dchip.pc{background:var(--pc);border-color:var(--pc);color:#fff}
.tip{position:fixed;pointer-events:none;background:var(--ink);color:#fff;font-size:.72rem;padding:8px 10px;border-radius:8px;z-index:99;max-width:300px;line-height:1.5;box-shadow:var(--shadow)}
.tip b{color:#fff}

/* ---------- Tables ---------- */
.scroll{overflow-x:auto}
table.grid{width:100%;border-collapse:collapse;font-size:.82rem;font-variant-numeric:tabular-nums}
table.grid th{font-weight:700;color:var(--muted);text-align:right;padding:8px 10px;border-bottom:1px solid var(--line-strong);white-space:nowrap;font-size:.74rem}
table.grid th:first-child,table.grid td:first-child{text-align:left}
table.grid td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
table.grid td.none{color:var(--faint)}
table.grid tr.total td{font-weight:800;background:var(--soft)}
.pill{display:inline-block;border-radius:999px;padding:2px 9px;font-size:.74rem;font-weight:800}
.pill.good{background:var(--up-soft);color:var(--up)} .pill.mid{background:var(--amber-soft);color:var(--amber)} .pill.bad{background:var(--down-soft);color:var(--down)} .pill.na{background:var(--soft-2);color:var(--faint)}
.neg{color:var(--down)} .pos{color:var(--up)}

/* ---------- Pipeline tree ---------- */
.ptree{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);margin-bottom:18px;overflow:hidden}
.ptree-head{display:flex;align-items:center;gap:10px;padding:14px 18px;flex-wrap:wrap}
.ptree-head h3{margin:0;font-size:1.05rem;font-weight:800;display:flex;align-items:center;gap:8px}
.ptree-head .pcdot{width:10px;height:10px;border-radius:2px;background:var(--pc)}
.ptree-head .ann{margin-left:auto;font-size:.8rem;color:var(--muted)}
.ptree-head .ann b{font-size:1.2rem;color:var(--ink);font-weight:800}
.ptree table{width:100%;border-collapse:collapse;font-size:.8rem;font-variant-numeric:tabular-nums}
.ptree th{background:var(--soft);color:var(--muted);font-weight:700;font-size:.7rem;padding:8px 10px;text-align:right;border-bottom:1px solid var(--line-strong);white-space:nowrap}
.ptree th.lbl{text-align:left;min-width:260px}
.ptree th small{display:block;font-weight:500;color:var(--faint)}
.ptree td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:right;white-space:nowrap}
.ptree td.lbl{text-align:left}
.ptree tr.d0 td{font-weight:800;background:var(--soft)}
.ptree tr.d1 td.lbl{padding-left:26px}
.ptree tr.d2 td.lbl{padding-left:46px}
.ptree tr.d3 td.lbl{padding-left:66px}
.ptree tr.conv td{color:var(--muted);font-size:.72rem;font-style:italic;background:#FAFBFC}
.ptree tr.conv td.lbl{padding-left:46px}
.ptree .tog{border:0;background:transparent;width:18px;color:var(--muted);font-size:.7rem;padding:0}
.ptree .cnt{color:var(--muted);font-size:.74rem;text-decoration:underline dotted;cursor:pointer}
.ptree .amt{font-weight:800}
.ptree .amt.unk{color:var(--faint);font-weight:500}
.ptree .custbtn{border:1px solid var(--line);border-radius:999px;background:var(--card);font-size:.66rem;padding:1px 7px;color:var(--muted);margin-left:6px}
.ptree td.sep{border-left:1px solid var(--line-strong)}
.ptree th.sep{border-left:1px solid var(--line-strong)}
.ptree .warn{color:var(--amber);font-size:.72rem}

/* ---------- Modal ---------- */
.modal-bg{position:fixed;inset:0;background:rgba(20,25,35,.45);z-index:50}
.modal{position:fixed;top:6vh;left:50%;transform:translateX(-50%);width:min(760px,94vw);max-height:86vh;overflow:auto;background:var(--card);border-radius:16px;box-shadow:var(--shadow);z-index:51;padding:18px 20px}
.modal h3{margin:0 0 4px;font-size:1rem;display:flex;justify-content:space-between;align-items:center}
.modal .path{font-size:.74rem;color:var(--muted);margin-bottom:10px}
.modal ol{margin:0;padding-left:0;list-style:none}
.modal li{padding:6px 0;border-bottom:1px solid var(--line);font-size:.84rem;display:flex;gap:8px;align-items:center}
.modal li.grp{font-weight:800;color:var(--ink-2);background:var(--soft);padding:4px 8px;border-radius:6px;margin-top:8px;border:0}
.modal .amt{margin-left:auto;font-weight:700;font-variant-numeric:tabular-nums}
.modal .lv{font-size:.66rem;background:var(--brand-soft);color:var(--brand-ink);border-radius:4px;padding:1px 5px}
.modal .drop{font-size:.7rem;color:var(--down)}
.x{border:0;background:transparent;font-size:1.1rem;color:var(--muted)}

/* ---------- Assumptions ---------- */
.assume{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end;background:var(--soft);border:1px dashed var(--line-strong);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.fld{display:flex;flex-direction:column;gap:3px}
.fld label{font-size:.68rem;color:var(--muted)}
.fld input{width:84px;border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:var(--card)}
.assume .note{font-size:.72rem;color:var(--muted);max-width:36ch}

/* ---------- Bridge ---------- */
.bridge{display:grid;grid-template-columns:repeat(auto-fit,minmax(380px,1fr));gap:14px}
.bcard{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:var(--card)}
.bhead{display:flex;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.bname{font-weight:800;display:flex;align-items:center;gap:6px}
.cchip{width:10px;height:10px;border-radius:2px;display:inline-block}
.bcov{margin-left:auto;font-weight:800;font-size:1.3rem}
.bcov small{display:block;font-size:.66rem;font-weight:500;color:var(--muted)}
.bar{position:relative;height:26px;background:var(--soft-2);border-radius:6px;overflow:visible;display:flex;margin:8px 0 14px}
.bar .seg{height:100%}
.bar .seg.a{background:var(--ink)} .bar .seg.k{background:var(--slate)} .bar .seg.b{background:var(--pc)}
.bar .notch{position:absolute;top:-4px;bottom:-4px;width:2px;background:var(--ink)}
.bar .notch.fc{background:var(--lav);border-left:2px dashed var(--lav);width:0}
.bar .notch span{position:absolute;top:-18px;left:4px;font-size:.62rem;white-space:nowrap;color:var(--muted)}
.bstats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px 12px;margin:0;font-size:.78rem}
.bstat dt{color:var(--muted);font-size:.68rem} .bstat dd{margin:0;font-weight:700;font-variant-numeric:tabular-nums}
.bstat dd.dim{color:var(--muted);font-weight:500} .bstat dd.acc{color:var(--pc)}

/* ---------- Auth pages ---------- */
.auth{max-width:420px;margin:8vh auto;background:var(--card);border-radius:18px;box-shadow:var(--shadow);padding:28px 30px}
.auth h1{margin:0 0 4px;font-size:1.3rem}
.auth p.sub{color:var(--muted);font-size:.84rem;margin:0 0 18px}
.auth label{display:block;font-size:.76rem;color:var(--muted);margin:12px 0 4px}
.auth input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--soft)}
.auth .err{color:var(--down);font-size:.74rem;margin-top:4px}
.btn{border:0;border-radius:10px;padding:10px 16px;font-weight:700;font-size:.9rem;background:var(--ink);color:#fff}
.btn.full{width:100%;margin-top:18px}
.btn.ghost{background:var(--soft);color:var(--ink-2);border:1px solid var(--line)}
.btn.sm{padding:5px 10px;font-size:.76rem;border-radius:8px}
.btn.danger{background:var(--down-soft);color:var(--down)}
.btn.ok{background:var(--up-soft);color:var(--up)}
.auth .alt{text-align:center;font-size:.8rem;color:var(--muted);margin-top:14px}
.auth .alt a{color:var(--brand);font-weight:700}
.status-box{text-align:center;padding:30px}
.status-box .big{font-size:2.4rem}
.status-box h2{margin:8px 0 4px}

/* ---------- Placeholder (준비 중) ---------- */
.placeholder{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:28px}
.placeholder h2{margin:0 0 6px}
.placeholder ul{color:var(--ink-2);font-size:.86rem}
.placeholder code{background:var(--soft);padding:1px 5px;border-radius:4px;font-size:.78rem}

/* ---------- Admin ---------- */
.admin-grid{display:grid;grid-template-columns:1fr;gap:16px}
.toolbar{display:flex;gap:8px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
.toolbar select{border:1px solid var(--line);border-radius:8px;padding:5px 8px;background:var(--card)}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:10px 16px;border-radius:10px;font-size:.84rem;z-index:99;box-shadow:var(--shadow)}
.skeleton{height:120px;border-radius:12px;background:linear-gradient(90deg,var(--soft) 25%,var(--soft-2) 50%,var(--soft) 75%);background-size:200% 100%;animation:sk 1.2s infinite}
@keyframes sk{0%{background-position:200% 0}100%{background-position:-200% 0}}

@media (max-width:760px){
  .wrap{padding:14px}
  .bstats{grid-template-columns:repeat(2,1fr)}
  .ptree th.lbl{min-width:180px}
}

/* ---- 2차 화면 ---- */
.tabs a.tab.on{background:var(--ink);color:#fff;border-color:var(--ink)}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(420px,1fr));gap:14px;margin-top:12px}
.md h2{font-size:1.1rem;margin:10px 0 6px}.md h3{font-size:.98rem;margin:12px 0 4px}.md h4{font-size:.9rem;margin:10px 0 4px;color:var(--brand-ink)}
.md p{margin:4px 0;font-size:.86rem;line-height:1.55}.md ul{margin:4px 0 6px 18px;font-size:.86rem;line-height:1.5}.md table{margin:8px 0;font-size:.8rem}.md code{background:var(--soft-2);padding:1px 5px;border-radius:4px;font-size:.8rem}
.insight{margin-top:12px}
.plan-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:10px 0}.plan-grid label{font-size:.72rem;color:var(--muted);display:flex;flex-direction:column;gap:2px}.plan-grid input{width:100%}
.legend-item{display:inline-flex;align-items:center;font-size:.74rem;color:var(--ink-2)}.legend-item i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px}
input[type=password],input[type=number],input:not([type]){border:1px solid var(--line);border-radius:8px;padding:6px 8px;font:inherit;font-size:.82rem}
@media print{.topbar,.tabs,.btn,form,.toast{display:none!important}.card{box-shadow:none;border:none}body{background:#fff}}
/* ---------- 계정 (B07) · 장애 배너 ---------- */
#pwform label{display:block;font-size:.76rem;color:var(--muted);margin:12px 0 4px}
#pwform input{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--soft)}
#pwform .err{color:var(--down);font-size:.74rem;margin:6px 0}
#pwform .btn{margin-top:10px}
.user-chip a{color:inherit;text-decoration:none;font-weight:700}.user-chip a:hover{text-decoration:underline}
.outage{position:sticky;top:0;z-index:98;background:#FDECEC;color:#8A1C1C;border-bottom:1px solid #F3B4B4;padding:8px 16px;font-size:.82rem;text-align:center}
/* Google SSO 버튼 (B04) */
.btn.google{display:flex;align-items:center;justify-content:center;gap:8px;background:#fff;color:var(--ink);border:1px solid var(--line-strong);text-decoration:none;margin-bottom:6px}
.btn.google:hover{background:var(--soft)}
.auth .or{display:flex;align-items:center;gap:8px;color:var(--faint);font-size:.72rem;margin:10px 0 2px}.auth .or:before,.auth .or:after{content:"";flex:1;border-top:1px solid var(--line)}
.grid.wh-log th,.grid.wh-log td{text-align:left}
/* B06 단계 목표 기준 배지 */
.basis{display:inline-block;font-size:.62rem;font-weight:700;border-radius:5px;padding:1px 5px;vertical-align:1px}
.basis.stock{background:#E8EEFF;color:#2747B8}.basis.flow{background:#E7F6EC;color:#1C7A3E}