.mc,.mc *,.mc *::before,.mc *::after{box-sizing:border-box}
.mc{font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic',sans-serif;color:#17243c;background:#f3f5f8;font-size:16px;font-synthesis:none;padding:24px 28px}
.mc button,.mc input{font:inherit}
.mc button{cursor:pointer}
.mc button:focus-visible,.mc a:focus-visible,.mc input:focus-visible,.mc td:focus-visible,.mc .point:focus-visible{outline:3px solid #4f7bf4;outline-offset:3px}
.mc .ico{display:inline-block;flex-shrink:0;vertical-align:-2px}
.mc .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mc .layout{display:grid;grid-template-columns:minmax(0,1fr) 500px;gap:20px;align-items:start}
.mc .layout.noside{grid-template-columns:minmax(0,1fr)}
.mc .layout.noside .side{display:none}
/* overflow:hidden 은 패널을 스크롤 컨테이너로 만들어 안의 sticky(선택 안내 줄)를 막는다 — clip 은 모서리만 자르고 sticky 를 살린다 */
.mc .panel{border:1px solid #dce2ec;border-radius:14px;background:#fff;overflow:clip}
.mc .toolbar{padding:20px 22px;border-bottom:1px solid #e7eaf0;display:flex;gap:14px;justify-content:space-between;align-items:center;flex-wrap:wrap}
.mc .toolbar h2{font-size:17px;margin:0}
.mc .toolbar p{font-size:13px;color:#607087;margin:6px 0 0}
.mc .stamp{display:block;margin-top:2px;font-size:12px;color:#6d7a8f}
.mc .segment{display:flex;padding:3px;background:#edf1f7;border-radius:8px;gap:3px}
.mc .segment button{border:0;background:none;color:#5c6c85;padding:8px 12px;border-radius:6px;font-size:14px}
.mc .segment button[aria-pressed=true]{background:#fff;color:#17243c;box-shadow:0 1px 4px #14233b20}
.mc .metricbar{display:flex;gap:14px;align-items:center;padding:16px 22px 0;font-size:14px;color:#607087}
.mc .models{padding:18px 22px 10px}
.mc .pgroup+.pgroup{margin-top:12px}
.mc .plabel{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;color:#607087}
.mc .pgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.mc .model{display:flex;align-items:center;gap:9px;background:#fff;border:1px solid #d9e0ec;padding:11px;border-radius:8px;font-size:14px;text-align:left;color:inherit;transition:opacity .15s}
.mc .model[aria-pressed=false]{opacity:.45;background:#f1f3f6}
.mc .model .line{width:22px;height:3px;background:var(--c);position:relative;flex-shrink:0}
.mc .model .line::after{content:'';width:7px;height:7px;border-radius:50%;background:var(--c);position:absolute;left:7px;top:-2px}
.mc .model .check{margin-left:auto;color:var(--c);display:flex}
.mc .subcontrols{display:flex;align-items:center;gap:16px;padding:8px 22px 0;color:#607087;font-size:13px;flex-wrap:wrap}
.mc .textbtn{border:none;background:none;padding:5px 0;color:#395579;font-size:13px}
.mc .sidetoggle{font-weight:700;text-decoration:underline;text-underline-offset:3px}
.mc .subcontrols label{display:flex;align-items:center;gap:6px;margin-left:auto}
.mc .chartarea{position:relative;padding:8px 10px 0;min-height:440px}
.mc .chartarea>svg{display:block;width:100%;height:auto;overflow:visible}
.mc .chartarea svg text{font-family:inherit}
.mc .point{cursor:pointer;outline:none}
.mc .point:focus,.mc .point:hover{stroke:#17243c;stroke-width:3}
.mc .point:focus circle{stroke:#17243c}
.mc .dataerr{padding:24px 22px;color:#9b1c1c;background:#fff4f4;border:1px solid #f0c4c4;border-radius:8px;margin:12px;font-size:14px;line-height:1.7}
.mc .dataerr ul{margin:0;padding-left:18px}
.mc .chartnote{font-size:13px;color:#65748b;padding:0 22px 18px;line-height:1.65}
.mc .speednote{padding:0 22px 18px;font-size:13px;color:#65748b;line-height:1.6}
/* 선택 안내 줄 — 그래프 바로 위. 그래프가 길어 아래쪽 점을 볼 때도 보이게 화면 위에 붙는다 */
.mc .hint{position:sticky;top:0;z-index:5;margin-top:10px;border-top:1px solid #e7eaf0;border-bottom:1px solid #e7eaf0;padding:13px 22px;color:#4e607b;font-size:14px;min-height:49px;background:#f8faff}
.mc .hint strong{color:#17243c}

/* 오른쪽 표: 고정 + 압축, 패널 안 글자 14px 고정 */
.mc .side{position:sticky;top:16px;align-self:start;max-height:calc(100vh - 32px);display:flex;flex-direction:column}
.mc .side,.mc .side *{font-size:14px;line-height:1.3}
.mc .tablehead{padding:10px 12px;border-bottom:1px solid #e7eaf0;display:flex;justify-content:space-between;align-items:baseline;gap:8px;flex-shrink:0}
.mc .tablehead h2{margin:0;font-weight:700}
.mc .tablehead .legend{color:#64748b;margin-left:auto;white-space:nowrap}
.mc .sideclose{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;margin:-4px -4px -4px 0;border:0;border-radius:6px;background:none;color:#607087;align-self:center}
.mc .sideclose:hover{background:#edf1f7;color:#17243c}
.mc .tables{overflow:auto;min-height:0;flex:1 1 auto;scrollbar-width:thin}
.mc .matrix{border-collapse:separate;border-spacing:0;width:100%;font-variant-numeric:tabular-nums;white-space:nowrap}
.mc .matrix thead th{position:sticky;top:0;z-index:2;background:#fff;color:#607087;font-weight:600;text-align:right;padding:5px 5px;border-bottom:1px solid #dce2ec}
.mc .matrix thead th.corner{left:0;z-index:3;text-align:left;padding-left:12px}
.mc .matrix tbody th{position:sticky;left:0;z-index:1;background:#fff;text-align:left;font-weight:500;padding:4px 6px 4px 12px;border-bottom:1px solid #f0f2f6;vertical-align:middle}
.mc .matrix .nm{display:flex;align-items:center;gap:6px;color:#17243c}
.mc .matrix .dot{width:8px;height:8px;border-radius:50%;background:var(--c);flex-shrink:0}
.mc .matrix .src{display:inline-flex;align-items:center;gap:3px;margin-left:14px;color:#64748b;text-decoration:none}
.mc .matrix .src:hover{color:#17243c;text-decoration:underline}
.mc .matrix .src .ico{width:12px;height:12px}
.mc .matrix td{text-align:right;padding:4px 5px;border-bottom:1px solid #f0f2f6;cursor:pointer}
.mc .matrix td.na{cursor:default;color:#9aa6b8}
.mc .matrix td .v,.mc .matrix td .s,.mc .matrix td .c{display:block}
/* 세 값 구분 — 색·단위. 배경 대비 4.5:1 이상 (가장 어두운 선택 칸 #dfeaff 기준: #17243c 12.8 · #0a6577 5.5 · #8a5a00 4.9) */
.mc .matrix td .v,.mc .legend .lg-v{font-weight:700;color:#17243c}
.mc .matrix td .s,.mc .legend .lg-s{color:#0a6577}
.mc .matrix td .c,.mc .legend .lg-c{color:#8a5a00}
.mc .legend b{font-weight:600}
.mc .legend .lg-v{font-weight:700}
.mc .matrix .prow th{position:static;padding:8px 12px 4px;background:#f6f8fb;color:#607087;font-size:14px;font-weight:700;letter-spacing:.04em;text-align:left;border-bottom:1px solid #e7eaf0}
.mc .matrix td:hover{background:#edf3ff}
.mc .matrix td.active{background:#dfeaff;outline:2px solid #4f7bf4;outline-offset:-2px}
.mc .matrix td.active .v{color:#1748a3}
.mc .matrix tr.off td,.mc .matrix tr.off th{opacity:.38}
.mc .matrix tr.off td{cursor:default}
.mc .matrix tr.off td:hover{background:none}
.mc .matrix tr.off th{background:#fff}

.mc .notes{display:flex;gap:24px;justify-content:space-between;padding:18px 4px;color:#6d7a8f;font-size:12px;line-height:1.8}
.mc .notes p{margin:0}
.mc .notes a{color:#456389}
.mc .tooltip{position:fixed;background:#17243c;color:#fff;border-radius:9px;padding:12px 15px;font-size:13px;line-height:1.8;pointer-events:none;z-index:20;box-shadow:0 5px 18px #15243a30;min-width:170px}
.mc .tooltip strong{font-size:14px}
.mc .tooltip[hidden]{display:none}
@media(min-width:1600px){.mc{max-width:1800px;margin-left:auto;margin-right:auto}}
@media(max-width:1080px){.mc .layout{grid-template-columns:minmax(0,1fr) 400px}.mc .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}.mc .model{font-size:13px}}
@media(max-width:800px){
  .mc{padding:14px}
  .mc .layout{grid-template-columns:minmax(0,1fr)}
  .mc .side{position:static;max-height:none;display:block}
  .mc .tables{overflow-x:auto;overflow-y:visible}
  .mc .models{padding:14px}
  .mc .pgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .mc .toolbar{padding:17px}
  .mc .chartarea{min-height:0}
  .mc .subcontrols{padding:5px 15px}
  .mc .subcontrols label{margin-left:0}
  .mc .notes{display:block}
  .mc .notes p+p{margin-top:10px}
  .mc .chartnote{padding:0 16px 14px}
  .mc .hint{padding:14px 16px;font-size:13px}
}