/* =====================================================================
   theme.css — 대성쎌틱에너시스 영업 대시보드 공통 디자인 시스템 (단일 소스)
   배포: /var/www/data-to.me/dash/theme.css  → 모든 페이지가 <link href="/dash/theme.css">
   마스터 편집본은 01_영업대시보드/theme.css. 수정 후 /dash/로 배포.

   규칙: 각 페이지는 자기 :root 토큰 블록을 삭제하고 이 파일을 link 한다.
         아래 "legacy alias"가 02/05의 옛 변수명(--ink/--paper/--teal 등)을
         표준값으로 재매핑하므로, 페이지 셀렉터는 거의 수정 없이 통일된다.
   ===================================================================== */

:root{
  /* ── canonical 토큰 ───────────────────────────── */
  --bg:#F6F8FA; --surface:#fff; --surface-alt:#F6F8FA;
  --line:#D0D7DE; --line-sub:#E6E8EB;
  --text:#000; --muted:#1a1a1a; --hint:#4b5563;
  --blue:#1d4ed8; --green:#16a34a; --amber:#f59e0b; --red:#dc2626;
  --blue-soft:#eff6ff;            /* 배지 등 옅은 파랑 배경 */
  --font:"Pretendard Variable",Pretendard,"Malgun Gothic","Apple SD Gothic Neo",sans-serif;
  --radius-sm:6px; --radius:8px; --radius-lg:12px;
  --bd:0.5px; --maxw:1560px;

  /* ── legacy alias → 표준값으로 매핑 (02/05 페이지가 :root 지우면 자동 통일) ── */
  --serif:var(--font); --sans:var(--font);
  --ink:var(--text); --ink-mid:var(--muted); --ink-soft:var(--hint); --ink-mute:var(--hint);
  --paper:var(--surface); --paper-mid:var(--surface-alt); --paper-dark:var(--bg);
  --teal:var(--blue); --teal-d:#1e40af; --teal-dd:#1e3a8a;
  --tx:var(--text); --tx2:var(--hint); --tx3:#9ca3af; --bd2:var(--line);
  --rule:0.5px solid var(--text);          /* 02 마스트헤드 라인(굵은 강조는 페이지에서 3px로 덮음) */
  --rule-thin:0.5px solid var(--line);
  --orange:var(--amber); --red-light:#fee2e2;
  --card:var(--surface); --shadow:0 1px 2px rgba(15,23,42,.04);  /* dashboard5 등 옛 변수 — 플랫 톤으로 통일 */
}

/* ── 기본 ───────────────────────────────────────── */
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--font);font-size:13px;line-height:1.6}
.wrap{max-width:var(--maxw);margin:0 auto;padding:20px}

/* ── 카드 ───────────────────────────────────────── */
.card{background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:14px}

/* ── 타이포 ─────────────────────────────────────── */
h1{margin:0 0 6px;font-size:20px;font-weight:500;color:var(--text)}
h2{margin:0 0 10px;font-size:15px;font-weight:500;color:var(--text)}
h3{margin:0 0 8px;font-size:13px;font-weight:500;color:var(--text)}
.muted{color:var(--muted);line-height:1.7;font-size:12px}
.hint{font-size:11px;color:var(--hint)}
.section-label{font-size:10px;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--hint);margin-bottom:10px;padding-bottom:6px;border-bottom:var(--bd) solid var(--line-sub)}

/* ── 배지 ───────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;background:var(--blue-soft);color:var(--blue);font-size:11px;font-weight:600}

/* ── 폼 컨트롤 ──────────────────────────────────── */
label{font-size:11px;color:var(--hint);font-weight:500;letter-spacing:.03em}
select,input{width:100%;padding:8px 10px;border:var(--bd) solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--text);font-family:var(--font);font-size:12px;outline:none;transition:border-color .12s}
select:focus,input:focus{border-color:var(--blue)}

/* ── 버튼 ───────────────────────────────────────── */
.btn,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;min-height:36px;padding:0 14px;border:var(--bd) solid var(--line);border-radius:var(--radius-sm);background:var(--surface);color:var(--muted);font-family:var(--font);font-size:12px;font-weight:500;cursor:pointer;text-decoration:none;transition:background .12s,color .12s}
.btn:hover,.btn-ghost:hover{background:var(--surface-alt);color:var(--text)}
.btn-blue{background:var(--blue);border-color:var(--blue);color:#fff}
.btn-blue:hover{filter:brightness(.95);background:var(--blue);color:#fff}
.btn-red{background:var(--red);border-color:var(--red);color:#fff}

/* ── KPI ────────────────────────────────────────── */
.kpi{background:var(--surface);border:var(--bd) solid var(--line);border-radius:var(--radius);padding:16px}
.kpi .t{font-size:10px;color:var(--hint);margin-bottom:8px;font-weight:500;letter-spacing:.05em;text-transform:uppercase}
.kpi .v{font-size:22px;font-weight:500;font-variant-numeric:tabular-nums;color:var(--text)}

/* ── 테이블 ─────────────────────────────────────── */
.table-wrap{overflow:auto;border:var(--bd) solid var(--line);border-radius:var(--radius-sm)}
table{width:100%;border-collapse:collapse;font-size:12px}
th,td{padding:9px 10px;border-bottom:var(--bd) solid var(--line-sub);text-align:right;white-space:nowrap;vertical-align:middle}
th{position:sticky;top:0;background:var(--surface-alt);z-index:1;font-size:11px;font-weight:500;color:var(--hint);letter-spacing:.03em;border-bottom:var(--bd) solid var(--line)}
th.left,td.left{text-align:left}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:#FAFBFC}
th.sortable{cursor:pointer;user-select:none}
th.sortable:hover{color:var(--text);background:#EAECEF}

/* ── RAG 상태색 ─────────────────────────────────── */
.dot{width:9px;height:9px;border-radius:50%;display:inline-block;flex-shrink:0}
.dot.GREEN{background:var(--green)}.dot.AMBER{background:var(--amber)}.dot.RED{background:var(--red)}
.rag-green{color:var(--green)}.rag-amber{color:var(--amber)}.rag-red{color:var(--red)}