/* ============================================================================
   테마: 기본파랑 (2026-10-02)

   기준 이미지: `.claude/docs/_archive/ui-ux-2026-10-05/ui/references/design-system-blue.png`(보관).
   **흰 바탕에 가까운 기본(베이직) 테마 + 파랑은 포인트만**(사용자: "기본 배경이나 이런거 거의 하얀색이야, 베이직에 가까운 테마").
   - 바탕·카드·사이드바·상단바는 거의 흰색, 회색은 푸른 기 없는 중립 회색. 파랑은 기본 동작·지금 메뉴·고른 칸에만.
   - 베이지톤의 떠 있는 면(사방 음영·들어간 입력칸) 대신 **옅은 선 + 아주 얕은 그림자**(기준 이미지의 흰 카드·흰 입력칸).
   custom.css(베이지톤) 다음에 싣고 **색·그림자 변수만** 바꾼다. 모서리·간격·글자·부품 배치는 베이지톤과 같다
   (App\Utils\Theme, `.claude/docs/ui/erp-exceptions.md` 8절, 공통 /home/claude_common/ui/design-system.md "테마").

   - 색의 뜻은 그대로: 파랑=기본 동작, 초록=정상, 빨강=삭제·위험, 노랑=주의(공통 /home/claude_common/ui/design-system.md)
   - 아래쪽 "색을 직접 적은 곳"은 custom.css가 변수 대신 베이지·청록 값을 바로 적은 자리다 - custom.css에 새로
     직접 색을 적으면 여기에도 짝을 더한다.
   ========================================================================== */

:root[data-theme="blue"] {
  /* 사이드바 - 흰색, 지금 메뉴만 파랑 */
  --erp-nav-bg: #ffffff;
  --erp-nav-bg-hover: #f3f4f6;
  --erp-nav-active: #2b74cb;
  --erp-nav-text: #4b5563;
  --erp-nav-text-strong: #111827;

  /* 본문 - 기준 이미지 바탕 #fafbfd · 면 #fdfeff. 카드는 흰색, 바탕은 아주 옅은 회색이라 선과 얕은 그림자로 가른다 */
  --erp-bg: #f7f8fa;
  --erp-surface: #ffffff;
  --erp-surface-sunk: #f4f5f7;
  --erp-surface-hover: #f9fafb;
  --erp-border: #e5e7eb;
  --erp-border-strong: #d1d5db;
  --erp-border-soft: #eef0f2;

  --erp-text: #1f2329;
  --erp-text-label: #374151;
  --erp-text-muted: #6b7280;
  --erp-text-faint: #9ca3af;

  /* 강조색 - 기준 이미지 버튼 #2b74cb, 누름 #2f639e */
  --erp-primary: #2b74cb;
  --erp-primary-dark: #245fa6;
  --erp-primary-soft: #eaf2fc;
  --erp-primary-ring: rgba(43, 116, 203, .18);
  --erp-success: #2f9a6c;
  --erp-success-soft: #e6f5ee;
  --erp-danger: #dc3c44;
  --erp-danger-dark: #b8343a;
  --erp-danger-soft: #fdeaea;
  --erp-warning: #c98315;
  --erp-warning-soft: #fdf4dc;
  --erp-info: #3283c4;
  --erp-info-soft: #e8f1fa;

  /* 층 - 떠 있는 면 대신 얕은 그림자 한 겹(기준 이미지 LEVEL 1~5는 아주 옅다) */
  --erp-sh-dark: rgba(16, 24, 40, .08);
  --erp-sh-soft: rgba(16, 24, 40, .04);
  --erp-shadow-1: 0 1px 2px rgba(16, 24, 40, .06);                                   /* 버튼·알약 */
  --erp-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 2px 8px rgba(16, 24, 40, .05);     /* 카드 */
  --erp-shadow-4: 0 12px 32px rgba(16, 24, 40, .14), 0 2px 6px rgba(16, 24, 40, .06); /* 모달·펼침 메뉴 */
  --erp-shadow-in: inset 0 1px 2px rgba(16, 24, 40, .05);                             /* 입력·눌림 */
}

/* 입력칸 - 기준 이미지대로 흰 칸 + 옅은 선(베이지톤은 들어간 면) */
[data-theme="blue"] .input,
[data-theme="blue"] .textarea,
[data-theme="blue"] .select select { background: #ffffff; }
/* 사이드바·상단바 - 흰 면을 그림자 대신 선 한 줄로 가른다 */
[data-theme="blue"] .erp-topbar { background: #ffffff; }

/* ── 색을 직접 적은 곳 (custom.css의 베이지·청록 값) ───────────────────────── */
/* 2026-10-05 뺐다: 모달 뒤 막(공통 modal.css --uk-backdrop가 맡는다), 연도별 분기 칸(custom.css --uk-warn-light),
   [전체 기간] 버튼 색(기간 버튼을 공통 .period-btn으로 옮겼다) - 직접 적은 색이 공통 테마 색을 덮고 있었다 */
[data-theme="blue"] .erp-sidebar { box-shadow: 1px 0 0 var(--erp-border); }
[data-theme="blue"] .erp-topbar { box-shadow: 0 1px 0 var(--erp-border); }
[data-theme="blue"] .btn-row.is-delete:hover,
[data-theme="blue"] .button.is-danger.is-light:hover { background: #f8cfd1; }
[data-theme="blue"] .btn-row.is-view:hover { background: #e5e7eb; }
[data-theme="blue"] .button[disabled]:not(.is-loading) { background: #e5e7eb; }
[data-theme="blue"] .input[readonly],
[data-theme="blue"] .tx-list-search select:disabled,
[data-theme="blue"] .input.invoice-auto,
[data-theme="blue"] .js-quote-item.is-service input[name$="[unit_price]"],
[data-theme="blue"] .js-quote-item.is-service input[name$="[amount]"] { background: #f1f2f4; }
[data-theme="blue"] .nav-backdrop { background: rgba(30, 40, 60, .35); }
@media (max-width: 1023px) {
  [data-theme="blue"] .erp-sidebar { box-shadow: 0 0 40px rgba(30, 40, 60, .35); }
}
[data-theme="blue"] .notification.is-danger,
[data-theme="blue"] .notification.is-danger.is-light { color: #a92c32; border-color: #f3c3c5; }
[data-theme="blue"] .notification.is-warning { color: #8a5d17; border-color: #efd9a3; }
[data-theme="blue"] .notification.is-success { color: #1f6e4c; border-color: #bfe3cf; }

/* 분류·상태 색 - 뜻(구분)은 그대로. 베이지 기운이 든 회색은 중립 회색으로, 상태별 행 바탕(--c-row)은 흰 면에 맞게 더 옅게 */
[data-theme="blue"] .erp-c-none   { --c-bg: #eef0f2; --c-fg: #6b7280; --c-line: #d1d5db; }
[data-theme="blue"] .erp-s-draft  { --c-bg: #eef0f2; --c-fg: #4b5563; --c-line: #d1d5db; --c-row: #f9fafb; }
[data-theme="blue"] .erp-s-normal { --c-bg: #e1f3ea; --c-fg: #26805a; --c-line: #a9d8c0; --c-row: #f4faf7; }
[data-theme="blue"] .erp-s-hold   { --c-bg: #fdf2d6; --c-fg: #9a6a12; --c-line: #ebcf8c; --c-row: #fdf9ee; }
[data-theme="blue"] .erp-s-closed { --c-bg: #fce4e4; --c-fg: #b8343a; --c-line: #f0b4b6; --c-row: #fdf3f3; }
[data-theme="blue"] .erp-s-moved  { --c-bg: #e2eef8; --c-fg: #2b6a9c; --c-line: #b0cde6; --c-row: #f3f8fc; }

/* 첫 화면·2차 로그인·서브계정 고르기·문의하기 - 짙은 청록 브랜드 배경을 짙은 남색으로 */
[data-theme="blue"]:has(.gate-card) {
  background:
    linear-gradient(rgba(226, 234, 248, .06) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(226, 234, 248, .06) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(60rem 40rem at 85% 0%, rgba(59, 130, 220, .45), transparent 60%),
    radial-gradient(40rem 30rem at 0% 100%, rgba(226, 234, 248, .12), transparent 60%),
    linear-gradient(160deg, #0b1a33 0%, #14315f 55%, #0b1a33 100%);
  background-attachment: fixed;
}
[data-theme="blue"] .modal-sheet.switch-modal::backdrop {
  background:
    linear-gradient(rgba(226, 234, 248, .06) 1px, transparent 1px) 0 0 / 48px 48px,
    linear-gradient(90deg, rgba(226, 234, 248, .06) 1px, transparent 1px) 0 0 / 48px 48px,
    radial-gradient(60rem 40rem at 85% 0%, rgba(59, 130, 220, .45), transparent 60%),
    radial-gradient(40rem 30rem at 0% 100%, rgba(226, 234, 248, .12), transparent 60%),
    linear-gradient(160deg, #0b1a33 0%, #14315f 55%, #0b1a33 100%);
}
[data-theme="blue"] .switch-modal-head,
[data-theme="blue"] .inquiry-head {
  background:
    radial-gradient(22rem 10rem at 100% 0%, rgba(147, 190, 240, .35), transparent 70%),
    linear-gradient(135deg, #14315f 0%, #2b74cb 100%);
}
[data-theme="blue"] .switch-modal-hello,
[data-theme="blue"] .switch-modal-lead,
[data-theme="blue"] .inquiry-sub { color: #d3e0f4; }
[data-theme="blue"]:has(#switch-modal[open]),
[data-theme="blue"]:has(.home-gate) { background: #0b1a33; }
[data-theme="blue"] .home-gate {
  color: #e6edf8;
  background:
    radial-gradient(60rem 40rem at 85% 10%, rgba(59, 130, 220, .45), transparent 60%),
    radial-gradient(40rem 30rem at 10% 90%, rgba(226, 234, 248, .12), transparent 60%),
    linear-gradient(160deg, #0b1a33 0%, #14315f 55%, #0b1a33 100%);
}
[data-theme="blue"] .home-sub { color: #c6d3e8; }
[data-theme="blue"] .home-brand-mark { background: linear-gradient(135deg, #2b74cb, #5b9be6); box-shadow: 0 8px 20px rgba(43, 116, 203, .45); }
[data-theme="blue"] .gate-card .gate-submit.is-primary,
[data-theme="blue"] .home-card .home-button.is-primary { box-shadow: 0 10px 24px rgba(43, 116, 203, .35); }
[data-theme="blue"] .switch-modal .switch-modal-start,
[data-theme="blue"] .inquiry-foot .button.is-primary { box-shadow: 0 8px 20px rgba(43, 116, 203, .3); }
[data-theme="blue"] .switch-modal .switch-modal-start:focus-visible { box-shadow: 0 0 0 3px rgba(43, 116, 203, .35), 0 8px 20px rgba(43, 116, 203, .3); }