*,*::before,*::after{box-sizing:border-box}
:root{
  --ink:#16202e; --ink2:#41536b; --ink3:#6d7f95;
  --line:#d8dee7; --line2:#eaeef3; --bg:#f4f6f9; --card:#fff;
  --navy:#1d3557; --navy2:#2c4c7c; --accent:#0f7b6c;
  --hot:#b3261e; --warn:#c8791b; --cool:#2b6cb0;
}
html,body{margin:0;padding:0}
body{background:var(--bg);color:var(--ink);
  font-family:"Malgun Gothic","맑은 고딕","Apple SD Gothic Neo","Noto Sans KR",sans-serif;
  font-size:15px;line-height:1.6;-webkit-text-size-adjust:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 18px}
a{color:var(--navy2)}

/* 머리 */
.top{background:var(--navy);color:#fff;padding:20px 0 16px}
.brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.mark{font-weight:800;letter-spacing:.06em;font-size:19px;background:#fff;color:var(--navy);
  padding:2px 9px;border-radius:3px}
.ttl{font-size:22px;font-weight:700}
.sub{margin:8px 0 0;color:#c6d4e6;font-size:14px}
.facts{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:14px 0 0;padding:0}
.facts li{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);
  border-radius:4px;padding:6px 10px;font-size:13px;color:#eaf1fa}
.facts b{color:#fff;font-size:15px}

/* 탭 */
.tabs{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:5}
.tabs .wrap{display:flex;gap:2px;overflow-x:auto}
.tabs a{padding:12px 16px;text-decoration:none;color:var(--ink2);font-weight:600;font-size:14px;
  border-bottom:3px solid transparent;white-space:nowrap}
.tabs a.on{color:var(--navy);border-bottom-color:var(--navy)}

main{padding:20px 0 40px}
.view{display:none}
.view.on{display:block}

.note{background:#eef4fb;border:1px solid #cfe0f2;border-left:4px solid var(--navy2);
  border-radius:4px;padding:11px 14px;font-size:14px;color:var(--ink2);margin:0 0 16px}
.note b{color:var(--ink)}
.panel{background:var(--card);border:1px solid var(--line);border-radius:6px;padding:14px}
h2{font-size:19px;margin:26px 0 10px;padding-bottom:6px;border-bottom:2px solid var(--navy)}
h3{font-size:16px;margin:20px 0 8px;color:var(--navy)}
p.cap{font-size:13px;color:var(--ink3);margin:6px 0 0}

/* 트랙 전환 */
.track-sw{display:flex;gap:0;margin:0 0 12px;flex-wrap:wrap}
.track-sw button{border:1px solid var(--line);background:#fff;color:var(--ink2);
  padding:9px 16px;font-size:14px;font-weight:600;cursor:pointer;font-family:inherit}
.track-sw button:first-child{border-radius:4px 0 0 4px}
.track-sw button:last-child{border-radius:0 4px 4px 0;border-left:0}
.track-sw button.on{background:var(--navy);border-color:var(--navy);color:#fff}

/* 필터 */
.filters{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}
.f{display:flex;flex-direction:column;gap:4px;min-width:112px}
.f.grow{flex:1 1 180px}
.f label{font-size:12px;color:var(--ink3);font-weight:600}
select,input[type=search],button{font-family:inherit;font-size:14px}
select,input[type=search]{border:1px solid var(--line);border-radius:4px;padding:7px 8px;
  background:#fff;color:var(--ink);width:100%;max-width:100%}
.f.btns{min-width:auto}
button.ghost{border:1px solid var(--navy);color:var(--navy);background:#fff;border-radius:4px;
  padding:8px 12px;font-weight:600;cursor:pointer}
button.ghost:hover{background:var(--navy);color:#fff}
.scopeline{font-size:13px;color:var(--ink3);margin:10px 2px}
.scopeline b{color:var(--ink)}

/* 표 */
.tablebox{overflow-x:auto;background:#fff;border:1px solid var(--line);border-radius:6px}
/* 최소폭 — 이보다 좁으면 칸이 한 글자씩 접혀 못 읽는다. 대신 표 상자 안에서 가로로 민다(쪽 자체는 안 넘침) */
table.grid{border-collapse:collapse;width:100%;font-size:14px;min-width:600px}
table.grid th,table.grid td{padding:8px 10px;border-bottom:1px solid var(--line2);text-align:left}
/* 좁은 폭에서는 글자 칸이 줄바꿈해 **모든 열이 보이게** 한다 — 숫자 열만 붙여 둔다 */
table.grid td.num,table.grid th.num,table.grid td:last-child{white-space:nowrap}
table.grid thead th{background:#f0f3f7;color:var(--ink2);font-size:13px;position:sticky;top:0}
table.grid td.num,table.grid th.num{text-align:right;font-variant-numeric:tabular-nums}
table.grid tbody tr{cursor:pointer}
table.grid tbody tr:hover{background:#f6f9fd}
td.nm{white-space:normal;min-width:150px;font-weight:600}
.gr{display:inline-block;border-radius:3px;padding:1px 6px;font-size:12px;font-weight:700;color:#fff;
  background:#5a6b80}   /* 등급 값이 늘어나도 배지가 흰 바탕에 흰 글자로 사라지지 않게 기본색을 둔다 */
.gr.A{background:var(--hot)} .gr.B{background:var(--warn)} .gr.C{background:#4b7f4b}
.gr.D{background:#5a6b80} .gr.E{background:#98a4b3}
.pager{display:flex;gap:6px;align-items:center;justify-content:center;margin:14px 0;flex-wrap:wrap}
.pager button{border:1px solid var(--line);background:#fff;border-radius:4px;padding:6px 11px;
  cursor:pointer;color:var(--ink2)}
.pager button[disabled]{opacity:.4;cursor:default}
.pager span{font-size:13px;color:var(--ink3)}

/* 상세 */
a.back{font-size:14px;text-decoration:none}
.fac-head{background:#fff;border:1px solid var(--line);border-radius:6px;padding:16px}
.fac-head h1{font-size:21px;margin:0 0 4px}
.fac-head .loc{color:var(--ink3);font-size:14px;margin:0}
.kpis{display:flex;flex-wrap:wrap;gap:10px;margin:14px 0 0}
.kpi{border:1px solid var(--line);border-radius:5px;padding:9px 13px;min-width:120px;background:#fbfcfe}
.kpi .k{font-size:12px;color:var(--ink3)}
.kpi .v{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.kpi.hot .v{color:var(--hot)}
dl.spec{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0;font-size:14px}
dl.spec dt{color:var(--ink3)}
dl.spec dd{margin:0}

/* 표 (분석표 공통) */
table.tbl{border-collapse:collapse;width:100%;font-size:13.5px;background:#fff;min-width:520px}
table.tbl th,table.tbl td{border:1px solid var(--line);padding:6px 9px;text-align:left}
table.tbl th{background:#f0f3f7;color:var(--ink2);font-weight:600}
table.tbl td.num{text-align:right;font-variant-numeric:tabular-nums}
table.tbl tr.hl td{background:#fff6f4}
.scroll{overflow-x:auto;border-radius:6px}
svg{max-width:100%;height:auto;display:block}
.figbox{background:#fff;border:1px solid var(--line);border-radius:6px;padding:14px}
ul.plain{margin:8px 0;padding-left:20px}
ul.plain li{margin:4px 0}
code{background:#eef1f5;padding:1px 5px;border-radius:3px;font-size:13px}
.formula{background:#16202e;color:#e6edf6;border-radius:6px;padding:14px 16px;font-size:14px;
  line-height:1.9;overflow-x:auto}
.formula b{color:#8fd6c6}
.warnbox{background:#fff6ee;border:1px solid #f0d3b4;border-left:4px solid var(--warn);
  border-radius:4px;padding:11px 14px;font-size:14px;color:var(--ink2)}

/* 꼬리 */
.foot{border-top:1px solid var(--line);background:#fff;padding:18px 0 30px;margin-top:30px}
.foot p{margin:4px 0;font-size:13px;color:var(--ink3)}
.foot .disc{margin-top:10px;color:var(--ink2)}

/* 폭이 좁아도 **글자 크기는 줄이지 않는다**(캡처가 지원서에 8pt 미만으로 인쇄되면 안 읽힌다).
   줄이는 것은 여백뿐이다. */
@media (max-width:820px){
  table.grid th,table.grid td{padding:7px 6px}
}
@media (max-width:640px){
  body{font-size:14px}
  .ttl{font-size:18px}
  .wrap{padding:0 12px}
  .f{min-width:calc(50% - 7px)}
  .f.grow{flex:1 1 100%}
  .kpi{min-width:calc(50% - 5px)}
  dl.spec{grid-template-columns:1fr;gap:2px}
  dl.spec dd{margin-bottom:6px;font-weight:600}
}