/* ══════════════════════════════════════════════════════════════════════════
   CRETOP ANALYZER — 공통 스타일시트 (cretop-common.css v2.0 — IBM Carbon)
   © 지에이월드(gaworld.kr)

   ┌────────────────────────────────────────────────────────────────────────┐
   │ 변경 토큰 매핑 (v1.0 → v2.0 / Apple → IBM Carbon)                      │
   │                                                                        │
   │   --blue       #3b82f6  →  #335aff  (Blue 60 / Primary)                │
   │   --blue-hover         →  #1f47e3  (Blue 70)                           │
   │   --gray-100   #0f172a  →  #161616  (Text primary)                     │
   │   --gray-70             →  #525252  (Text secondary)                   │
   │   --gray-50             →  #8d8d8d  (Helper)                           │
   │   --gray-20             →  #e0e0e0  (Border subtle)                    │
   │   --gray-10             →  #f4f4f4  (Layer 01)                         │
   │   --green      #10b981  →  #24a148  (Support success)                  │
   │   --red        #ef4444  →  #da1e28  (Support error)                    │
   │   --yellow     —         →  #f1c21b  (Support warning)                 │
   │   --radius     12px     →  0        (Sharp corners — Carbon signature) │
   │   --font-body  Pretendard → IBM Plex Sans KR + Pretendard               │
   │   --font-num   JetBrains  → IBM Plex Mono                               │
   │   --shadow-lg  큰 보랏빛  → 0 2px 6px rgba(0,0,0,.08) (거의 사용 안함)  │
   │                                                                        │
   │ 기존 클래스명·CSS 변수명·미디어 쿼리는 100% 유지.                       │
   │ 디자인 룩만 IBM Carbon White theme로 교체.                              │
   └────────────────────────────────────────────────────────────────────────┘
   ══════════════════════════════════════════════════════════════════════════ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [1] 웹 폰트 — IBM Plex Sans KR + IBM Plex Mono + Pretendard(폴백)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@300;400;500;600;700&family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap');
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable.css');


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [2] 기본 변수 & 레이아웃 — Carbon 토큰으로 재정의 (변수명 보존)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cretop-app, .cretop-app *, .cretop-app *::before, .cretop-app *::after { box-sizing: border-box; }

.cretop-app {
  /* ── 브랜드 = IBM Blue 60 ──────────────────────────── */
  --brand:     #335aff;
  --brand-50:  #edf5ff;   /* Blue 10 */
  --brand-100: #d0e2ff;   /* Blue 20 */
  --brand-200: #a6c8ff;   /* Blue 30 */
  --brand-600: #1f47e3;   /* Blue 70 */
  --brand-700: #0d2ab3;   /* Blue 80 */

  /* ── 팔레트: 모두 Carbon 등가물로 매핑 (단일 Blue 강조 원칙) ── */
  --blue:#335aff;       --blue-50:#edf5ff;    --blue-100:#d0e2ff;   --blue-700:#1f47e3;
  --blue-hover:#1f47e3;
  --indigo:#335aff;     --indigo-50:#edf5ff;  --indigo-100:#d0e2ff; --indigo-700:#1f47e3;
  --violet:#8a3ffc;     --violet-50:#f6f2ff;  --violet-100:#e8daff; --violet-700:#491d8b;
  --pink:#ee5396;       --pink-50:#fff0f7;    --pink-100:#ffd6e8;   --pink-700:#9f1853;
  --rose:#da1e28;       --rose-50:#fff1f1;    --rose-100:#ffd7d9;   --rose-700:#a2191f;
  --orange:#ff832b;     --orange-50:#fff2e8;  --orange-100:#ffd9be; --orange-700:#8a3800;
  --amber:#f1c21b;      --amber-50:#fcf4d6;   --amber-100:#fddc69;  --amber-700:#684e00;
  --green:#24a148;      --green-50:#defbe6;   --green-100:#a7f0ba;  --green-700:#0e6027;
  --emerald:#198038;    --emerald-50:#defbe6; --emerald-100:#a7f0ba;--emerald-700:#044317;
  --teal:#005d5d;       --teal-50:#d9fbfb;    --teal-100:#9ef0f0;   --teal-700:#004144;
  --cyan:#1192e8;       --cyan-50:#e5f6ff;    --cyan-100:#bae6ff;   --cyan-700:#00539a;
  --sky:#0072c3;        --sky-50:#e5f6ff;     --sky-100:#bae6ff;    --sky-700:#003a6d;
  --red:#da1e28;        --red-50:#fff1f1;     --red-100:#ffd7d9;    --red-700:#a2191f;
  --yellow:#f1c21b;
  --slate-500:#525252;  --slate-600:#393939;  --slate-700:#262626;  --slate-800:#161616;

  /* ── 그레이 = Carbon Gray scale ───────────────────────── */
  --gray-50:#f4f4f4;    /* Layer 01 */
  --gray-100:#f4f4f4;   /* Layer 01 (also 100/old) */
  --gray-200:#e0e0e0;   /* Border subtle (Gray 20) */
  --gray-300:#c6c6c6;   /* Disabled (Gray 30) */
  --gray-400:#a8a8a8;   /* Placeholder (Gray 40) */
  --gray-500:#8d8d8d;   /* Helper (Gray 50) */
  --gray-600:#6f6f6f;   /* Text helper (Gray 60) */
  --gray-700:#525252;   /* Text secondary (Gray 70) */
  --gray-800:#393939;   /* (Gray 80) */
  --gray-900:#161616;   /* Text primary (Gray 100) */

  /* ── Sharp edge — Carbon 시그니처 ───────────────────── */
  --radius:    0;
  --radius-sm: 0;
  --radius-lg: 0;

  /* ── Type ──────────────────────────────────────────── */
  --font-body: 'IBM Plex Sans KR', 'IBM Plex Sans', 'Pretendard Variable', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-num:  'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --font-emoji:'IBM Plex Sans KR', sans-serif;

  /* ── Elevation — Carbon은 그림자 거의 안 씀 ─────────── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 2px 6px rgba(0,0,0,.08);
  --shadow-lg: 0 2px 6px rgba(0,0,0,.08);

  /* ── Spacing — Carbon 4/8 grid ──────────────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px;
  --space-4: 16px; --space-5: 24px; --space-6: 32px;
  --space-7: 48px; --space-8: 64px;

  /* 기본 레이아웃 */
  font-family: var(--font-body);
  color: var(--gray-900);
  line-height: 1.43;        /* Carbon body-short-01 */
  letter-spacing: 0.16px;
  max-width: 1240px;
  margin: 24px auto;
  padding: 0 16px 64px;
  background: #ffffff;
}

.cretop-app .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.cretop-app .cr-hidden { display: none !important; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [3] 헤더 — Carbon: 검정 단색 hero, 그라데이션 제거
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cretop-app .cr-header {
  position: relative;
  padding: 32px;
  border-radius: 0;
  background: #161616;     /* Gray 100 — Carbon UI Shell black */
  color: #ffffff;
  overflow: hidden;
  box-shadow: none;
  border: 1px solid #161616;
}
.cretop-app .cr-brand {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; line-height: 16px; letter-spacing: 0.32px;
  color: #c6c6c6;
  text-transform: uppercase;
}
.cretop-app .cr-brand .dot { width: 6px; height: 6px; border-radius: 50%; background: #4589ff; }
.cretop-app .cr-title {
  margin: 16px 0 4px;
  font-family: var(--font-body);
  font-size: 28px; line-height: 36px; letter-spacing: 0;
  font-weight: 400;          /* Carbon productive-heading-04 */
  color: #ffffff;
}
.cretop-app .cr-title .ver {
  font-family: var(--font-num);
  font-size: 12px; font-weight: 400; line-height: 16px; letter-spacing: 0.32px;
  margin-left: 12px; padding: 2px 8px;
  border-radius: 0;
  background: rgba(255,255,255,.12);
  color: #ffffff; vertical-align: middle;
}
.cretop-app .cr-sub {
  font-size: 14px; line-height: 20px; letter-spacing: 0.16px;
  color: #c6c6c6;
}
.cretop-app .cr-steps {
  list-style: none;
  padding: 0;
  margin: 24px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.cretop-app .cr-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  font-size: 12px;
  line-height: 16px;
  letter-spacing: 0.16px;
  font-weight: 500;
  color: #c6c6c6;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 0;
  white-space: nowrap;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [4] 네비바 — Carbon tile + 1px subtle border
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cretop-app .cr-navbar {
  margin-top: 16px; padding: 16px;
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 0;
  box-shadow: none;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cretop-app .cr-co { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 200px; }
.cretop-app .cr-co-logo {
  width: 32px; height: 32px;
  border-radius: 0;
  background: #335aff; color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
}
.cretop-app .cr-co-logo i[data-lucide] { width: 16px; height: 16px; }
.cretop-app .cr-co-name { font-size: 14px; font-weight: 600; color: var(--gray-900); letter-spacing: 0.16px; }
.cretop-app .cr-co-meta { font-size: 12px; color: var(--gray-700); font-family: var(--font-num); margin-top: 2px; letter-spacing: 0.32px; }
.cretop-app .cr-module-title {
  font-size: 14px; color: var(--gray-700); font-weight: 600;
  display: flex; align-items: center; gap: 8px; letter-spacing: 0.16px;
}
.cretop-app .cr-module-title i[data-lucide] { width: 16px; height: 16px; color: var(--brand); }
.cretop-app .cr-module-title .badge {
  font-family: var(--font-num); font-size: 12px; font-weight: 400;
  padding: 2px 8px; border-radius: 999px;
  background: var(--brand-50); color: var(--brand-600);
  margin-left: 4px; letter-spacing: 0.32px;
}
.cretop-app .cr-nav-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* 대시보드 툴바(회사 정보 + AI 프록시 + 액션) — .cr-navbar의 별칭 레이아웃 */
.cretop-app .cr-toolbar {
  margin-top: 16px; padding: 16px;
  background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 0;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.cretop-app .cr-company { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 220px; }
.cretop-app .cr-company-logo {
  width: 32px; height: 32px;
  background: var(--brand); color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
}
.cretop-app .cr-company-logo i[data-lucide] { width: 16px; height: 16px; }
.cretop-app .cr-company-name { font-size: 14px; font-weight: 600; color: var(--gray-900); letter-spacing: 0.16px; }
.cretop-app .cr-company-meta { font-size: 12px; color: var(--gray-700); font-family: var(--font-num); margin-top: 2px; letter-spacing: 0.32px; }
.cretop-app .cr-tb-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }

/* AI 프록시 상태 배지 — 인라인 pill */
.cretop-app .cr-ai-status {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  font-size: 12px; line-height: 16px; font-weight: 500;
  letter-spacing: 0.16px;
  border-radius: 0;
  white-space: nowrap;
}

/* 카드 내부 표 — 너비 100% 기본값 */
.cretop-app .cr-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.cretop-app .cr-table-wrap { width: 100%; overflow-x: auto; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [5] 빈 상태
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cretop-app .cr-empty {
  text-align: center; padding: 64px 16px;
  background: var(--gray-100);
  border: 1px solid var(--gray-200);
  border-radius: 0;
  margin-top: 24px;
}
.cretop-app .cr-empty-icon {
  width: 64px; height: 64px;
  margin: 0 auto 16px;
  border-radius: 0;
  background: #ffffff;
  border: 1px solid var(--gray-200);
  color: var(--gray-600);
  display: grid; place-items: center;
}
.cretop-app .cr-empty-icon i[data-lucide] { width: 28px; height: 28px; }
.cretop-app .cr-empty-title { font-size: 20px; line-height: 26px; font-weight: 400; color: var(--gray-900); margin-bottom: 8px; }
.cretop-app .cr-empty-desc { font-size: 14px; color: var(--gray-700); margin-bottom: 24px; line-height: 1.43; letter-spacing: 0.16px; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [6] KPI 카드 그리드 — Carbon Tile (1px border, 4px top accent)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cretop-app .cr-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin-top: 16px; background: var(--gray-200); border: 1px solid var(--gray-200); }
@media (max-width: 900px) { .cretop-app .cr-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
.cretop-app .cr-kpi {
  background: #ffffff;
  border: 0;
  border-radius: 0;
  padding: 16px;
  box-shadow: none;
  position: relative; overflow: hidden;
  transition: background 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
.cretop-app .cr-kpi:hover { background: var(--gray-100); }
.cretop-app .cr-kpi::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--brand); }
.cretop-app .cr-kpi.t2::before { background: var(--teal); }
.cretop-app .cr-kpi.t3::before { background: var(--amber); }
.cretop-app .cr-kpi.t4::before { background: var(--violet); }
.cretop-app .cr-kpi.t5::before { background: var(--green); }
.cretop-app .cr-kpi.t6::before { background: var(--rose); }
.cretop-app .cr-kpi-label {
  font-size: 12px; line-height: 16px; letter-spacing: 0.32px;
  color: var(--gray-700); font-weight: 400;
  display: flex; align-items: center; gap: 6px;
}
.cretop-app .cr-kpi-label i[data-lucide] { width: 14px; height: 14px; }
.cretop-app .cr-kpi-value {
  font-family: var(--font-num);
  font-size: 28px; line-height: 36px; letter-spacing: 0;
  font-weight: 400; color: var(--gray-900);
  margin-top: 8px;
}
.cretop-app .cr-kpi-value .unit { font-size: 12px; color: var(--gray-700); font-weight: 400; margin-left: 4px; letter-spacing: 0.32px; }
.cretop-app .cr-kpi-value.green { color: var(--green-700); }
.cretop-app .cr-kpi-value.red { color: var(--red); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [7] 메인 카드 — flat tile (no shadow)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cretop-app .cr-card {
  margin-top: 16px; background: #ffffff;
  border: 1px solid var(--gray-200);
  border-radius: 0;
  box-shadow: none;
  overflow: hidden;
}
.cretop-app .cr-card-head {
  padding: 16px 16px;
  border-bottom: 1px solid var(--gray-200);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.cretop-app .cr-card-title {
  font-size: 16px; line-height: 22px; letter-spacing: 0; font-weight: 600;
  color: var(--gray-900);
  display: flex; align-items: center; gap: 8px;
}
.cretop-app .cr-card-title i[data-lucide] { width: 18px; height: 18px; color: var(--gray-900); }
.cretop-app .cr-card-desc { font-size: 12px; color: var(--gray-700); letter-spacing: 0.32px; }
.cretop-app .cr-card-body { padding: 16px; }
.cretop-app .cr-chart { padding: 8px 12px 16px; min-height: 280px; }
.cretop-app .cr-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
@media (max-width: 900px) { .cretop-app .cr-row2 { grid-template-columns: 1fr; } }
.cretop-app .cr-row2 .cr-card { margin-top: 0; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [8] 표 — Carbon Data Table (dense, 1px borders, no rounded)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cretop-app .cr-xtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.cretop-app .cr-xtable th, .cretop-app .cr-xtable td {
  padding: 12px 16px; text-align: right;
  border-bottom: 1px solid var(--gray-200);
  letter-spacing: 0.16px;
}
.cretop-app .cr-xtable th:first-child, .cretop-app .cr-xtable td:first-child { text-align: left; }
.cretop-app .cr-xtable thead th {
  background: var(--gray-100);
  color: var(--gray-900);
  font-size: 14px; line-height: 18px;
  font-weight: 600; text-transform: none; letter-spacing: 0.16px;
  border-bottom: 1px solid var(--gray-200);
  padding: 8px 16px;
  height: 32px;
}
.cretop-app .cr-xtable td.num { font-family: var(--font-num); font-weight: 400; letter-spacing: 0; }
.cretop-app .cr-xtable td.neg { color: var(--red); }
.cretop-app .cr-xtable td.pos { color: var(--green-700); font-weight: 600; }
.cretop-app .cr-xtable tr.total td {
  font-weight: 600; background: var(--brand-50); color: var(--brand-600);
  border-top: 1px solid var(--brand-100); border-bottom: 1px solid var(--brand-100);
}
.cretop-app .cr-xtable tr.highlight td { background: #fcf4d6; color: var(--amber-700); font-weight: 600; }
.cretop-app .cr-xtable tr.sub td { font-size: 12px; color: var(--gray-700); letter-spacing: 0.32px; }
.cretop-app .cr-xtable tr:hover td { background: var(--gray-100); }
.cretop-app .cr-xtable .hint { color: var(--gray-500); font-size: 12px; font-weight: 400; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [9] 파라미터 편집 영역
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cretop-app .cr-params { padding: 16px; }
.cretop-app .cr-params-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
@media (max-width: 900px) { .cretop-app .cr-params-grid { grid-template-columns: repeat(2, 1fr); } }
.cretop-app .cr-param { display: flex; flex-direction: column; gap: 4px; }
.cretop-app .cr-param-label {
  font-size: 12px; line-height: 16px; letter-spacing: 0.32px;
  color: var(--gray-700); font-weight: 400;
}
.cretop-app .cr-param-input {
  font-family: var(--font-num);
  font-size: 14px; font-weight: 400; color: var(--gray-900);
  padding: 0 16px;
  height: 40px;
  border: 0;
  border-bottom: 1px solid var(--gray-500);
  border-radius: 0;
  background: var(--gray-100);   /* Carbon TextInput field-01 */
  text-align: right; outline: 0;
  transition: background 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
.cretop-app .cr-param-input[type="text"] { text-align: left; }
.cretop-app .cr-param-input:hover { background: #e5e5e5; }
.cretop-app .cr-param-input:focus {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  background: var(--gray-100);
  border-bottom-color: transparent;
}
.cretop-app .cr-param-hint {
  font-size: 12px; line-height: 16px; letter-spacing: 0.32px;
  color: var(--gray-600);
}
.cretop-app .cr-param-section {
  grid-column: 1 / -1;
  font-size: 14px; line-height: 18px; letter-spacing: 0.16px;
  font-weight: 600; color: var(--brand-600);
  padding: 12px 0 8px;
  border-bottom: 1px solid var(--brand-100);
  margin-bottom: 4px;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [10] 버튼 — Carbon Button (sharp 0px corners, 70ms hover, no transform)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cretop-app .cr-btn {
  display: inline-flex; align-items: center; justify-content: space-between;
  gap: 32px;
  height: 48px;            /* Carbon Button: large/primary */
  padding: 0 16px 0 16px;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 14px; line-height: 18px; letter-spacing: 0.16px;
  font-weight: 400;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-align: left;
  min-width: 0;
  transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9),
              color 70ms cubic-bezier(0.2, 0, 0.38, 0.9),
              border-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
.cretop-app .cr-btn i[data-lucide] { width: 16px; height: 16px; flex-shrink: 0; }
.cretop-app .cr-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: -4px; box-shadow: inset 0 0 0 1px #fff; }

.cretop-app .cr-btn-primary { background: var(--brand); color: #fff; border-color: var(--brand); }
.cretop-app .cr-btn-primary:hover:not(:disabled) { background: var(--blue-hover); color: #fff; border-color: var(--blue-hover); }
.cretop-app .cr-btn-primary:active:not(:disabled) { background: var(--brand-700); }
.cretop-app .cr-btn-primary:disabled { background: var(--gray-300); color: #8d8d8d; cursor: not-allowed; border-color: transparent; }

.cretop-app .cr-btn-ghost { background: transparent; color: var(--brand); border: 1px solid transparent; padding: 0 16px; }
.cretop-app .cr-btn-ghost:hover { background: var(--gray-100); color: var(--brand-600); }

.cretop-app .cr-btn-ghost-light { background: transparent; color: #fff; border: 1px solid transparent; }
.cretop-app .cr-btn-ghost-light:hover { background: rgba(255,255,255,.16); }

.cretop-app .cr-btn-outline { background: transparent; color: var(--gray-900); border: 1px solid var(--brand); }
.cretop-app .cr-btn-outline:hover { background: var(--brand); color: #fff; }

.cretop-app .cr-btn-danger { background: var(--red); color: #fff; border-color: var(--red); }
.cretop-app .cr-btn-danger:hover { background: #ba1b23; border-color: #ba1b23; }

.cretop-app .cr-btn-danger-ghost { background: transparent; color: var(--red); border: 1px solid transparent; padding: 0 16px; }
.cretop-app .cr-btn-danger-ghost:hover { background: var(--red); color: #fff; }

.cretop-app .cr-btn-amber { background: var(--gray-900); color: #fff; border-color: var(--gray-900); }
.cretop-app .cr-btn-amber:hover { background: #393939; border-color: #393939; }

.cretop-app .cr-btn-ai { background: var(--brand); color: #fff; border-color: var(--brand); }
.cretop-app .cr-btn-ai:hover:not(:disabled) { background: var(--blue-hover); border-color: var(--blue-hover); }
.cretop-app .cr-btn-ai:disabled { background: var(--gray-300); color: #8d8d8d; cursor: not-allowed; }

.cretop-app .cr-btn-sm { height: 36px; padding: 0 12px; font-size: 12px; gap: 8px; }
.cretop-app .cr-btn-lg { height: 52px; padding: 0 22px; font-size: 15px; }

/* 푸터 액션바(cr-navbar / cr-toolbar / cr-footbar / cr-control 내부) — 버튼 높이 48px 통일 */
.cretop-app .cr-nav-actions .cr-btn,
.cretop-app .cr-tb-actions .cr-btn,
.cretop-app .cr-foot-actions .cr-btn,
.cretop-app .cr-control .cr-btn {
  height: 48px; padding: 0 16px;
  font-size: 14px; gap: 10px;
  justify-content: center;
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [11] AI 해석 박스 — Carbon Notification (info)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cretop-app .cr-ai-box {
  margin: 16px 0 0;
  padding: 16px;
  border-radius: 0;
  background: var(--brand-50);
  border: 1px solid var(--brand-100);
  border-left: 3px solid var(--brand);
}
.cretop-app .cr-ai-head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.cretop-app .cr-ai-head i[data-lucide] { width: 16px; height: 16px; color: var(--brand); }
.cretop-app .cr-ai-title { font-size: 14px; line-height: 18px; font-weight: 600; color: var(--gray-900); letter-spacing: 0.16px; }
.cretop-app .cr-ai-content { font-size: 14px; color: var(--gray-900); line-height: 1.43; white-space: pre-wrap; letter-spacing: 0.16px; }
.cretop-app .cr-ai-content.empty { color: var(--gray-600); font-style: normal; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [12] 알림 메시지 — Carbon Inline Notification
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cretop-app .cr-alert {
  margin-top: 16px; padding: 16px;
  border-radius: 0; font-size: 14px;
  display: flex; align-items: flex-start; gap: 12px;
  border: 1px solid var(--gray-200);
  border-left: 3px solid var(--brand);
  background: #ffffff;
  color: var(--gray-900);
  letter-spacing: 0.16px;
}
.cretop-app .cr-alert i[data-lucide] { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.cretop-app .cr-alert.info    { border-left-color: var(--brand);  background: #ffffff; color: var(--gray-900); }
.cretop-app .cr-alert.warning { border-left-color: var(--yellow); background: #ffffff; color: var(--gray-900); }
.cretop-app .cr-alert.error   { border-left-color: var(--red);    background: #ffffff; color: var(--gray-900); }
.cretop-app .cr-alert.success { border-left-color: var(--green);  background: #ffffff; color: var(--gray-900); }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [13] 스피너
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cretop-app .cr-spin {
  display: inline-block; width: 14px; height: 14px;
  border: 2px solid var(--gray-300);
  border-right-color: var(--brand);
  border-radius: 50%;
  animation: crSpin .7s linear infinite;
}
@keyframes crSpin { to { transform: rotate(360deg); } }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [14] 모달 — Carbon Modal (overlay 50%, no shadow)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cretop-app .cr-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(22, 22, 22, .5);    /* Carbon $overlay */
  z-index: 1000;
  display: none; align-items: center; justify-content: center; padding: 16px;
  overflow-y: auto;
}
.cretop-app .cr-modal-overlay.open { display: flex; }
.cretop-app .cr-modal {
  background: #ffffff;
  border-radius: 0;
  max-width: 480px; width: 100%;
  padding: 24px;
  box-shadow: none;
  max-height: 90vh; overflow-y: auto;
  border: 0;
}
.cretop-app .cr-modal h3 { margin: 0 0 8px; font-size: 20px; line-height: 26px; font-weight: 400; letter-spacing: 0; color: var(--gray-900); }
.cretop-app .cr-modal p { margin: 0 0 16px; font-size: 14px; color: var(--gray-700); line-height: 1.43; letter-spacing: 0.16px; }
.cretop-app .cr-modal p strong { color: var(--gray-900); font-weight: 600; }
.cretop-app .cr-modal-actions {
  display: flex; gap: 1px; justify-content: flex-end;
  margin: 24px -24px -24px -24px;       /* Carbon footer = full-bleed two buttons */
}
.cretop-app .cr-modal-actions .cr-btn { flex: 1; max-width: 50%; height: 64px; padding: 16px; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [15] 검색창 — Carbon Search (40px, field-01 background, bottom border)
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cretop-app .cr-search { position: relative; flex: 1; min-width: 220px; max-width: 340px; }
.cretop-app .cr-search input {
  width: 100%;
  padding: 0 16px 0 40px;
  height: 40px;
  border: 0;
  border-bottom: 1px solid var(--gray-500);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 14px; letter-spacing: 0.16px;
  background: var(--gray-100);
  color: var(--gray-900);
  outline: 0;
  transition: background 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
.cretop-app .cr-search input::placeholder { color: var(--gray-500); }
.cretop-app .cr-search input:hover { background: #e5e5e5; }
.cretop-app .cr-search input:focus {
  outline: 2px solid var(--brand);
  outline-offset: -2px;
  border-bottom-color: transparent;
}
.cretop-app .cr-search i[data-lucide] {
  position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
  width: 16px; height: 16px; color: var(--gray-700);
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [16] details / 접기 섹션 — Carbon Accordion
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cretop-app details.cr-details {
  margin-top: 16px;
  background: #ffffff;
  border: 0;
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  border-radius: 0;
  overflow: hidden; box-shadow: none;
}
.cretop-app details.cr-details summary {
  padding: 16px 0;
  font-size: 14px; line-height: 18px; letter-spacing: 0.16px;
  font-weight: 400; color: var(--gray-900);
  cursor: pointer;
  display: flex; align-items: center; gap: 12px;
  background: transparent;
  border-bottom: 0;
  list-style: none;
  transition: background 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
}
.cretop-app details.cr-details summary:hover { background: var(--gray-100); }
.cretop-app details.cr-details summary::marker,
.cretop-app details.cr-details summary::-webkit-details-marker { display: none; }
.cretop-app details.cr-details summary i[data-lucide] { width: 16px; height: 16px; color: var(--gray-900); }
.cretop-app details.cr-details summary .arr { margin-left: auto; transition: transform 150ms cubic-bezier(0.2, 0, 0.38, 0.9); }
.cretop-app details.cr-details summary .arr i[data-lucide] { width: 16px; height: 16px; }
.cretop-app details.cr-details[open] summary .arr { transform: rotate(180deg); }
.cretop-app details.cr-details-body { padding: 16px 0 24px; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [17] 섹션 헤더
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cretop-app .cr-section { margin-top: 32px; }
.cretop-app .cr-section-head {
  display: flex; align-items: baseline; gap: 12px;
  margin-bottom: 16px; padding: 0;
  border-bottom: 1px solid var(--gray-200);
  padding-bottom: 8px;
}
.cretop-app .cr-section-head h2 {
  margin: 0;
  font-family: var(--font-body);
  font-size: 20px; line-height: 26px; letter-spacing: 0;
  font-weight: 400;
  color: var(--gray-900);
}
.cretop-app .cr-section-head .cnt {
  font-family: var(--font-num);
  font-size: 12px; font-weight: 400;
  padding: 2px 8px; border-radius: 999px;
  background: var(--gray-200); color: var(--gray-900);
  letter-spacing: 0.32px;
}
.cretop-app .cr-section-head .desc { font-size: 12px; color: var(--gray-700); flex: 1; text-align: right; letter-spacing: 0.32px; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [18] 빠른 액션 바
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
.cretop-app .cr-quick {
  margin-top: 16px;
  display: flex; gap: 1px; flex-wrap: wrap;
  padding: 0;
  background: var(--gray-200);
  border: 1px solid var(--gray-200);
  border-radius: 0;
  box-shadow: none;
}
.cretop-app .cr-quick > .cr-quick-title { background: #ffffff; }
.cretop-app .cr-quick > .cr-btn { background-color: #ffffff; }
.cretop-app .cr-quick > .cr-btn-primary,
.cretop-app .cr-quick > .cr-btn-amber,
.cretop-app .cr-quick > .cr-btn-danger { background-color: var(--brand); }
.cretop-app .cr-quick-title {
  font-size: 12px; color: var(--gray-700); font-weight: 600;
  letter-spacing: 0.32px; text-transform: uppercase;
  align-self: center;
  padding: 0 16px;
  height: 32px;
  display: flex; align-items: center;
}
.cretop-app .cr-quick-spacer { flex: 1; background: #ffffff; }


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [19] 인쇄
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@media print {
  .cretop-app .no-print { display: none !important; }
}


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [20] 공용 애니메이션
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .5; } }
@keyframes crShine { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }


/* ══════════════════════════════════════════════════════════════════════════
   다크 모드 — IBM Carbon g100 theme (선택적)
   ══════════════════════════════════════════════════════════════════════════ */
.cretop-app[data-theme="dark"],
[data-theme="dark"] .cretop-app {
  --brand:     #4589ff;     /* Blue 50 — dark theme primary */
  --brand-50:  #001d6c;
  --brand-100: #0d2ab3;
  --brand-600: #78a9ff;
  --brand-700: #a6c8ff;
  --gray-100:  #262626;     /* Layer 01 dark */
  --gray-200:  #393939;     /* Border subtle dark */
  --gray-700:  #c6c6c6;
  --gray-900:  #f4f4f4;
  background:  #161616;
  color:       #f4f4f4;
}
.cretop-app[data-theme="dark"] .cr-card,
.cretop-app[data-theme="dark"] .cr-kpi,
.cretop-app[data-theme="dark"] .cr-navbar { background: #262626; border-color: #393939; }
.cretop-app[data-theme="dark"] .cr-header { background: #161616; }


/* ══════════════════════════════════════════════════════════════════════════
   End of cretop-common.css v2.0 — IBM Carbon
   ══════════════════════════════════════════════════════════════════════════ */


/* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━
   [21] Dashboard preview 패턴 — Hero meta, Hero alert, Bar outline, Ratio
   ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */

/* hero 내부 4분할 메타 바 */
.cretop-app .cr-hero-meta {
  margin-top: 24px;
  display: flex; flex-wrap: wrap; gap: 0;
  border-top: 1px solid rgba(255,255,255,.12);
  padding-top: 20px;
}
.cretop-app .cr-hero-meta > div {
  flex: 1; min-width: 160px; padding-right: 24px;
  border-right: 1px solid rgba(255,255,255,.12);
}
.cretop-app .cr-hero-meta > div:last-child { border-right: 0; padding-right: 0; }
.cretop-app .cr-hero-meta .lbl {
  font-size: 12px; font-weight: 400; letter-spacing: 0.32px;
  color: rgba(255,255,255,.6); text-transform: uppercase;
}
.cretop-app .cr-hero-meta .val {
  margin-top: 6px; font-family: var(--font-num);
  font-size: 20px; font-weight: 500; color: #fff;
}
.cretop-app .cr-hero-meta .val .unit {
  font-size: 12px; color: rgba(255,255,255,.6); margin-left: 4px;
}

/* hero alert (위험 알림) */
.cretop-app .cr-hero-alert {
  margin-top: 16px;
  background: #fff1f1;
  border: 1px solid #ffd7d9;
  border-left: 3px solid #da1e28;
  padding: 20px 24px;
  display: flex; align-items: center; gap: 20px;
}
.cretop-app .cr-hero-alert .icon-box {
  width: 56px; height: 56px;
  background: #161616; color: #fff;
  display: grid; place-items: center; flex-shrink: 0;
}
.cretop-app .cr-hero-alert .icon-box i[data-lucide] { width: 24px; height: 24px; }
.cretop-app .cr-hero-alert .label {
  font-size: 12px; font-weight: 600;
  color: #a2191f; letter-spacing: 0.32px;
}
.cretop-app .cr-hero-alert .label::before { content: "▶ "; font-size: 10px; }
.cretop-app .cr-hero-alert .value {
  margin-top: 4px; font-family: var(--font-num);
  font-size: 32px; font-weight: 500; color: #161616; line-height: 1.1;
}
.cretop-app .cr-hero-alert .value .unit {
  font-size: 13px; color: #525252; margin-left: 6px; font-weight: 400;
}
.cretop-app .cr-hero-alert .formula {
  margin-top: 8px; font-family: var(--font-num);
  font-size: 12px; color: #525252;
}

/* outline 막대 차트 */
.cretop-app .cr-bars { padding: 24px 24px 28px; }
.cretop-app .cr-bar-row {
  display: grid; grid-template-columns: 100px 1fr;
  gap: 14px; align-items: center; padding: 8px 0;
}
.cretop-app .cr-bar-label {
  font-size: 12px; color: #525252; text-align: right;
}
.cretop-app .cr-bar-track {
  position: relative; height: 28px;
  display: flex; align-items: center;
}
.cretop-app .cr-bar-fill {
  height: 28px; background: transparent;
  border: 1px solid #335aff;
  display: flex; align-items: center; justify-content: flex-end;
  padding: 0 10px; min-width: 80px;
  font-family: var(--font-num); font-size: 12px; font-weight: 500;
  color: #161616; white-space: nowrap;
}
.cretop-app .cr-bar-fill.gray { border-color: #8d8d8d; }
.cretop-app .cr-bar-fill.amber { border-color: #eb6200; }
.cretop-app .cr-bar-fill.red { border-color: #da1e28; }
.cretop-app .cr-bar-fill.green { border-color: #198038; }
.cretop-app .cr-bar-axis {
  margin-top: 12px; margin-left: 114px;
  display: flex; justify-content: space-between;
  font-family: var(--font-num); font-size: 11px; color: #6f6f6f;
  border-top: 1px solid var(--gray-200); padding-top: 6px;
}

/* footer note */
.cretop-app .cr-footer-note {
  margin-top: 32px; font-size: 12px; color: #6f6f6f;
  text-align: center; font-family: var(--font-num);
  letter-spacing: 0.32px;
}