:root {
      --bg: #f4f7fb;
      --panel: #ffffff;
      --panel-soft: #f8fafc;
      --text: #111827;
      --muted: #667085;
      --line: #e5e7eb;
      --primary: #2357d9;
      --primary-soft: #eaf0ff;
      --good: #16845b;
      --good-soft: #e9f8f1;
      --bad: #d14343;
      --bad-soft: #fff0f0;
      --warn: #b7791f;
      --warn-soft: #fff7e6;
      --shadow: 0 10px 30px rgba(17, 24, 39, 0.07);
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      background: var(--bg);
      color: var(--text);
      font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
    }

    button, select { font: inherit; }

    .app-shell {
      min-height: 100vh;
      display: grid;
      grid-template-columns: 240px minmax(0, 1fr);
    }

    aside {
      position: sticky;
      top: 0;
      height: 100vh;
      background: #0f172a;
      color: #fff;
      padding: 24px 18px;
      display: flex;
      flex-direction: column;
      gap: 28px;
    }

    .brand {
      padding: 4px 8px;
    }

    .brand strong {
      display: block;
      font-size: 18px;
      letter-spacing: -0.02em;
    }

    .brand span {
      display: block;
      margin-top: 8px;
      font-size: 12px;
      color: #a9b4c6;
      line-height: 1.5;
    }

    nav {
      display: grid;
      gap: 8px;
    }

    .nav-btn {
      width: 100%;
      border: 0;
      border-radius: 10px;
      background: transparent;
      color: #cbd5e1;
      padding: 12px 14px;
      text-align: left;
      cursor: pointer;
      transition: .18s ease;
    }

    .nav-btn:hover,
    .nav-btn.active {
      background: #1d2a44;
      color: #fff;
    }

    .sidebar-note {
      margin-top: auto;
      padding: 14px;
      border: 1px solid rgba(255,255,255,.1);
      border-radius: 12px;
      color: #b8c3d4;
      font-size: 12px;
      line-height: 1.6;
      background: rgba(255,255,255,.03);
    }

    main {
      padding: 28px 32px 44px;
      min-width: 0;
    }

    .topbar {
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 20px;
      margin-bottom: 24px;
    }

    .topbar h1 {
      margin: 0;
      font-size: 28px;
      letter-spacing: -0.03em;
    }

    .topbar p {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 14px;
    }

    .top-actions {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      align-items: center;
    }

    .chip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: var(--panel);
      border: 1px solid var(--line);
      padding: 10px 12px;
      border-radius: 10px;
      color: #475467;
      font-size: 13px;
      box-shadow: 0 4px 14px rgba(17,24,39,.03);
    }

    .status-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: var(--good);
      box-shadow: 0 0 0 4px rgba(22,132,91,.12);
    }

    .panel {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 16px;
      box-shadow: var(--shadow);
    }

    .panel-header {
      padding: 20px 22px 0;
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 16px;
    }

    .panel-header h2,
    .panel-header h3 {
      margin: 0;
      letter-spacing: -0.02em;
    }

    .panel-header h2 { font-size: 18px; }
    .panel-header h3 { font-size: 16px; }

    .panel-header small {
      color: var(--muted);
    }

    .kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 14px;
      margin-bottom: 18px;
    }

    .kpi-card {
      padding: 18px;
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 14px;
      box-shadow: var(--shadow);
      min-width: 0;
    }

    .kpi-card .label {
      color: var(--muted);
      font-size: 13px;
    }

    .kpi-card .value {
      margin-top: 10px;
      font-size: 24px;
      font-weight: 750;
      letter-spacing: -0.03em;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .kpi-card .meta {
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      gap: 8px;
      font-size: 12px;
      color: var(--muted);
    }

    .delta {
      font-weight: 700;
    }

    .delta.up { color: var(--bad); }
    .delta.down { color: var(--good); }
    .delta.flat { color: var(--warn); }

    .dashboard-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.65fr) minmax(320px, .85fr);
      gap: 18px;
      margin-top: 18px;
    }

    .chart-panel {
      min-height: 470px;
      overflow: hidden;
    }

    .controls {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }

    select {
      border: 1px solid var(--line);
      border-radius: 9px;
      padding: 9px 12px;
      background: #fff;
      color: #344054;
      outline: none;
    }

    .segmented {
      display: inline-flex;
      padding: 4px;
      border-radius: 10px;
      background: var(--panel-soft);
      border: 1px solid var(--line);
    }

    .segmented button {
      border: 0;
      background: transparent;
      color: #667085;
      padding: 7px 12px;
      border-radius: 7px;
      cursor: pointer;
    }

    .segmented button.active {
      background: #fff;
      color: var(--primary);
      box-shadow: 0 2px 8px rgba(17,24,39,.08);
      font-weight: 700;
    }

    .chart-wrap {
      height: 330px;
      padding: 18px 20px 6px;
    }

    canvas {
      width: 100%;
      height: 100%;
      display: block;
    }

    .chart-footer {
      padding: 10px 22px 20px;
      color: var(--muted);
      font-size: 12px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;
      gap: 8px;
    }

    .side-stack {
      display: grid;
      gap: 18px;
    }

    .material-summary {
      padding: 18px 22px 22px;
    }

    .summary-price {
      font-size: 30px;
      font-weight: 800;
      letter-spacing: -0.04em;
    }

    .summary-sub {
      margin-top: 4px;
      color: var(--muted);
      font-size: 13px;
    }

    .metric-list {
      margin-top: 18px;
      display: grid;
      gap: 12px;
    }

    .metric-row {
      display: flex;
      justify-content: space-between;
      gap: 20px;
      padding-bottom: 11px;
      border-bottom: 1px dashed var(--line);
      font-size: 13px;
    }

    .metric-row:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .metric-row span:first-child { color: var(--muted); }

    .badge {
      display: inline-flex;
      align-items: center;
      border-radius: 999px;
      padding: 5px 9px;
      font-size: 11px;
      font-weight: 700;
    }

    .badge.good { background: var(--good-soft); color: var(--good); }
    .badge.bad { background: var(--bad-soft); color: var(--bad); }
    .badge.warn { background: var(--warn-soft); color: var(--warn); }
    .badge.info { background: var(--primary-soft); color: var(--primary); }

    .risk-box {
      margin-top: 16px;
      background: var(--panel-soft);
      border: 1px solid var(--line);
      border-radius: 12px;
      padding: 14px;
      font-size: 13px;
      line-height: 1.65;
      color: #475467;
    }

    .bottom-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
      gap: 18px;
      margin-top: 18px;
    }

    .table-wrap {
      overflow-x: auto;
      padding: 10px 18px 18px;
    }

    table {
      width: 100%;
      border-collapse: collapse;
      min-width: 720px;
    }

    th, td {
      padding: 13px 10px;
      text-align: left;
      border-bottom: 1px solid var(--line);
      font-size: 13px;
      white-space: nowrap;
    }

    th {
      color: var(--muted);
      font-weight: 650;
      background: #fbfcfe;
    }

    td strong { font-weight: 750; }

    .source-list {
      padding: 12px 20px 20px;
      display: grid;
      gap: 10px;
    }

    .source-item {
      display: grid;
      grid-template-columns: 1fr auto;
      gap: 10px;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid var(--line);
    }

    .source-item:last-child { border-bottom: 0; }

    .source-item strong {
      display: block;
      font-size: 13px;
    }

    .source-item span {
      display: block;
      margin-top: 4px;
      color: var(--muted);
      font-size: 12px;
    }

    .page-section { display: none; }
    .page-section.active { display: block; }

    .placeholder {
      padding: 70px 24px;
      text-align: center;
      color: var(--muted);
    }

    .placeholder h2 {
      color: var(--text);
      margin-bottom: 10px;
    }

    @media (max-width: 1180px) {
      .kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .dashboard-grid,
      .bottom-grid { grid-template-columns: 1fr; }
    }

    @media (max-width: 800px) {
      .app-shell { grid-template-columns: 1fr; }
      aside {
        position: static;
        height: auto;
        flex-direction: row;
        align-items: center;
        overflow-x: auto;
      }
      .brand { min-width: 220px; }
      nav { display: flex; }
      .nav-btn { white-space: nowrap; }
      .sidebar-note { display: none; }
      main { padding: 20px 14px 32px; }
      .topbar { flex-direction: column; }
    }

    @media (max-width: 560px) {
      .kpi-grid { grid-template-columns: 1fr; }
      .panel-header { align-items: flex-start; flex-direction: column; }
      .top-actions { width: 100%; }
      .chip { width: 100%; justify-content: center; }
    }