:root { --blue:#1f4fe0; --blue-dark:#1436a6; --ink:#15213b; --muted:#6c7892; --line:#e5eaf3; --soft:#f5f7fb; --white:#fff; }
* { box-sizing:border-box; }
body { margin:0; overflow-x:hidden; background:#fff; color:var(--ink); font-family:Inter, Pretendard, "Noto Sans KR", Arial, sans-serif; font-size:16px; }
.page-shell { max-width:1320px; margin:0 auto; padding:68px 32px 80px; }
.hero { margin-bottom:38px; } .eyebrow { margin:0 0 8px; color:var(--blue); font-size:.76rem; font-weight:800; letter-spacing:.12em; }
h1,h2,p { margin-top:0; } h1 { margin-bottom:10px; font-size:clamp(2.3rem,5vw,4.4rem); line-height:1.03; letter-spacing:-.06em; } h2 { margin-bottom:0; font-size:1.2rem; letter-spacing:-.03em; }.hero>p:last-child { color:var(--muted); font-size:1.05rem; }
.filter-panel,.panel,.insight-card { border:1px solid var(--line); border-radius:18px; background:var(--white); }.filter-panel { padding:24px; box-shadow:0 10px 35px rgba(28,58,126,.06); }.filter-heading,.panel-header { display:flex; align-items:flex-start; justify-content:space-between; gap:16px; }.filter-heading>span { font-size:1.05rem; font-weight:750; }.filter-heading small,.panel-header>span { color:var(--muted); font-size:.82rem; }.filter-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:20px; } label { color:var(--muted); font-size:.84rem; font-weight:650; } select { display:block; width:100%; margin-top:7px; padding:12px 36px 12px 13px; appearance:auto; border:1px solid #d7deeb; border-radius:10px; background:#fff; color:var(--ink); font:inherit; font-size:.95rem; cursor:pointer; } select:focus { outline:3px solid rgba(31,79,224,.2); border-color:var(--blue); }
.kpi-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:24px 0; }.kpi-card { min-height:148px; padding:23px; border:1px solid var(--line); border-radius:16px; background:linear-gradient(145deg,#fff,#f6f8ff); }.kpi-card span,.kpi-card small { display:block; color:var(--muted); }.kpi-card span { font-size:.87rem; font-weight:700; }.kpi-card strong { display:block; margin:16px 0 7px; color:var(--blue); font-size:clamp(1.6rem,3vw,2.45rem); letter-spacing:-.05em; }.kpi-card small { font-size:.76rem; }
.insight-card { padding:22px 25px; border-left:5px solid var(--blue); background:#f7f9ff; }.insight-card .eyebrow { margin-bottom:6px; }.insight-card>p:last-child { margin-bottom:0; font-size:1.05rem; font-weight:650; line-height:1.55; }.content-grid { display:grid; grid-template-columns:1fr; gap:20px; margin-top:24px; }.panel { padding:26px; }.chart-wrap { position:relative; height:350px; margin-top:18px; }.chart-wrap canvas { max-width:100% !important; }.table-wrap { overflow-x:auto; margin-top:18px; } table { width:100%; min-width:680px; border-collapse:collapse; text-align:right; } th,td { padding:15px 12px; border-bottom:1px solid var(--line); white-space:nowrap; } th { color:var(--muted); font-size:.78rem; font-weight:750; } td { font-size:.92rem; } th:first-child,td:first-child { text-align:left; font-weight:700; } tbody tr:hover { background:#f7f9ff; }.empty-row td { padding:34px; color:var(--muted); text-align:center !important; }
@media (max-width:850px) { .page-shell { padding:42px 18px 56px; }.filter-grid,.kpi-grid { grid-template-columns:repeat(2,1fr); }.chart-wrap { height:300px; } }
@media (max-width:520px) { .filter-grid,.kpi-grid { grid-template-columns:1fr; }.filter-panel,.panel { padding:19px; }.kpi-card { min-height:120px; }.kpi-card strong { margin:11px 0 5px; } }