/* RTMC 분석 서비스 데모 — PV-IMS 프로토타입 디자인 토큰에 맞춘 공통 스타일 */
:root{
  --bg:#f5f5f5; --card:#fff; --line:#e5e5e5; --line2:#eee;
  --ink:#1a1a1a; --muted:#666; --dim:#999;
  --primary:#0066cc; --primary-soft:#eff5ff;
  --lv1:#2e7d32; --lv2:#f9a825; --lv3:#ef6c00; --lv4:#c62828;
  --topbar:52px;
}
*{box-sizing:border-box;margin:0;padding:0}
/* 상단바가 sticky 라, 스크롤로 이동한 요소가 상단바 뒤에 깔리는 것을 막는다. */
html{scroll-padding-top:calc(var(--topbar) + 12px)}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI','Noto Sans KR',sans-serif;
  background:var(--bg);color:var(--ink);font-size:14px;-webkit-font-smoothing:antialiased}

/* ── 상단바 ── */
.topbar{height:var(--topbar);background:#fff;border-bottom:1px solid var(--line);display:flex;
  align-items:center;padding:0 24px;position:sticky;top:0;z-index:200;box-shadow:0 1px 3px rgba(0,0,0,.06)}
.tb-logo{display:flex;flex-direction:column;justify-content:center;min-width:190px}
.tb-logo-name{font-size:15px;font-weight:700;color:var(--primary);letter-spacing:-.3px}
.tb-logo-sub{font-size:10px;color:var(--dim);margin-top:1px}
.tb-nav{display:flex;gap:4px;margin-left:16px;flex:1}
.tb-nav a{font-size:13px;color:#555;text-decoration:none;padding:7px 13px;border-radius:6px}
.tb-nav a:hover{background:#f5f7fa;color:var(--primary)}
.tb-nav a.on{background:var(--primary-soft);color:var(--primary);font-weight:600}
.tb-right{display:flex;align-items:center;gap:16px;font-size:12px;color:#555}
.tb-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border:1px solid var(--line);
  border-radius:20px;font-size:11px;color:var(--muted);background:#fff}
.tb-dot{width:7px;height:7px;border-radius:50%;background:#bbb}
.tb-dot.ok{background:#2e7d32}.tb-dot.bad{background:#c62828}

/* ── 레이아웃 ── */
.wrap{max-width:1440px;margin:0 auto;padding:20px 24px 60px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.page-title{font-size:19px;font-weight:700;letter-spacing:-.3px}
.page-desc{font-size:12.5px;color:var(--muted);margin-top:5px;line-height:1.6}
.grid{display:grid;gap:16px}
.g-2{grid-template-columns:minmax(380px,420px) 1fr}
.g-3{grid-template-columns:repeat(3,1fr)}
.g-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.g-2,.g-3,.g-4{grid-template-columns:1fr}}

.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:18px 20px}
.card.pad0{padding:0;overflow:hidden}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:14px}
.card-title{font-size:14px;font-weight:700}
.card-sub{font-size:11.5px;color:var(--dim);margin-top:3px;line-height:1.5}
.step-tag{display:inline-block;background:var(--primary-soft);color:var(--primary);font-size:11px;
  font-weight:700;padding:2px 7px;border-radius:5px;margin-right:6px}

/* ── 폼 ── */
label.fld{display:block;font-size:12px;font-weight:600;color:#555;margin:14px 0 6px}
textarea,input[type=text],input[type=number],select{width:100%;font-family:inherit;font-size:13.5px;
  color:var(--ink);background:#fff;border:1px solid #ddd;border-radius:7px;padding:9px 11px}
textarea{min-height:104px;resize:vertical;line-height:1.65}
textarea:focus,input:focus,select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 2px rgba(0,102,204,.13)}
.row{display:flex;gap:10px}.row>*{flex:1}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.chip{font-size:11.5px;padding:5px 10px;border:1px solid #ddd;border-radius:16px;background:#fff;
  color:#555;cursor:pointer;transition:.12s}
.chip:hover{border-color:var(--primary);color:var(--primary)}
.chip.on{background:var(--primary);border-color:var(--primary);color:#fff;font-weight:600}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:inherit;
  font-size:13.5px;font-weight:600;padding:11px 18px;border-radius:8px;border:1px solid transparent;
  background:var(--primary);color:#fff;cursor:pointer;transition:.12s}
.btn:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn.block{width:100%;margin-top:18px}
.btn.ghost{background:#fff;border-color:#ddd;color:#555}
.btn.ghost:hover{border-color:var(--primary);color:var(--primary);filter:none}
.btn.sm{font-size:12px;padding:7px 12px}

/* ── Level 배지 ── */
.lv{display:inline-flex;align-items:center;gap:6px;font-weight:700;font-size:12px;
  padding:4px 10px;border-radius:15px;color:#fff;white-space:nowrap}
.lv1{background:var(--lv1)}.lv2{background:var(--lv2)}.lv3{background:var(--lv3)}.lv4{background:var(--lv4)}
.lv-soft{border:1px solid;background:#fff}
.lv-soft.lv1{color:var(--lv1);border-color:var(--lv1)}
.lv-soft.lv2{color:var(--lv2);border-color:var(--lv2)}
.lv-soft.lv3{color:var(--lv3);border-color:var(--lv3)}
.lv-soft.lv4{color:var(--lv4);border-color:var(--lv4)}

/* ── 판정 결과 ── */
.verdict{display:flex;align-items:center;gap:18px;padding:18px 20px;border-radius:10px;color:#fff}
.verdict .big{font-size:30px;font-weight:800;letter-spacing:-1px;line-height:1.1}
.verdict .nm{font-size:13px;opacity:.92;margin-top:3px}
.verdict .act{margin-left:auto;text-align:right}
.verdict .act .k{font-size:11px;opacity:.85}
.verdict .act .v{font-size:15px;font-weight:700;margin-top:3px}
.gauge{height:7px;background:#eee;border-radius:5px;overflow:hidden;margin-top:10px}
.gauge>i{display:block;height:100%;border-radius:5px}
.scale{display:flex;justify-content:space-between;font-size:10.5px;color:var(--dim);margin-top:5px}

.sym{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px dashed var(--line2)}
.sym:last-child{border-bottom:0}
.sym .cat{font-size:11px;color:#fff;background:#8a94a6;border-radius:5px;padding:2px 7px;font-weight:600;flex-shrink:0}
.sym .nm{font-weight:600;font-size:13.5px}
.sym .q{font-size:11.5px;color:var(--dim);margin-top:2px}
.sym .pain{margin-left:auto;font-size:11.5px;color:var(--muted);white-space:nowrap}
.pain-dots{display:inline-flex;gap:2px;margin-left:5px;vertical-align:-1px}
.pain-dots i{width:7px;height:7px;border-radius:50%;background:#e0e0e0;display:block}
.pain-dots i.on{background:var(--lv3)}

.fact{margin:11px 0}
.fact .t{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px}
.fact .t b{font-weight:600}
.fact .t span{color:var(--muted);font-variant-numeric:tabular-nums}
.fact .bar{height:9px;background:#f0f0f0;border-radius:5px;overflow:hidden}
.fact .bar>i{display:block;height:100%;background:linear-gradient(90deg,#4a90d9,#0066cc);border-radius:5px}
.fact .d{font-size:11px;color:var(--dim);margin-top:4px;line-height:1.5}

.flag{display:flex;gap:9px;align-items:flex-start;background:#fff5f5;border:1px solid #f5c6c6;
  color:#8b1f1f;border-radius:8px;padding:11px 13px;font-size:12.5px;line-height:1.6;margin-top:10px}
.note{background:#f8f9fb;border:1px solid var(--line);border-radius:8px;padding:12px 14px;
  font-size:12.5px;line-height:1.75;color:#444}
.muted{color:var(--muted)}.dim{color:var(--dim)}
.tiny{font-size:11px}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,'Courier New',monospace}

/* ── 표 ── */
table{width:100%;border-collapse:collapse;font-size:12.5px}
th{text-align:left;font-weight:600;color:var(--muted);background:#fafafa;padding:10px 12px;
  border-bottom:1px solid var(--line);white-space:nowrap;font-size:11.5px}
td{padding:10px 12px;border-bottom:1px solid var(--line2);vertical-align:middle}
tbody tr:hover{background:#fafcff;cursor:pointer}
tbody tr.on{background:var(--primary-soft)}
.table-scroll{overflow-x:auto}

/* ── KPI ── */
.kpi{background:#fff;border:1px solid var(--line);border-radius:10px;padding:16px 18px}
.kpi .k{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:6px}
.kpi .v{font-size:27px;font-weight:800;letter-spacing:-1px;margin-top:7px;font-variant-numeric:tabular-nums}
.kpi .s{font-size:11px;color:var(--dim);margin-top:4px}

.badge{display:inline-block;font-size:10.5px;font-weight:600;padding:2px 7px;border-radius:5px;
  background:#f0f2f5;color:#555}
.badge.ok{background:#e8f5e9;color:#2e7d32}
.badge.warn{background:#fff8e1;color:#f57f17}
.badge.info{background:var(--primary-soft);color:var(--primary)}

.chart-box{position:relative;height:230px}
.chart-box canvas{max-height:230px}

pre.json{background:#1e2430;color:#d6deeb;border-radius:8px;padding:14px 16px;font-size:11.5px;
  line-height:1.6;overflow:auto;max-height:340px;font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.spin{display:inline-block;width:13px;height:13px;border:2px solid rgba(255,255,255,.4);
  border-top-color:#fff;border-radius:50%;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}
.skel{color:var(--dim);font-size:12.5px;text-align:center;padding:36px 12px;line-height:1.8}