/* ds.css — Afdal ERP 디자인 시스템 **한 곳** (사장님 지시 2026-09-25 ■4).
 *
 * ERP·계산대·홈페이지·인쇄물이 모두 이 파일의 값을 쓴다. 색·글자 크기·간격·모서리·그림자·움직임을
 * 두 군데 적으면 언젠가 갈라진다 — 값은 여기에만 있고, 다른 곳은 var(--ds-…) 로 읽는다.
 *
 * 확정 팔레트 (2026-09-25)
 *   A 'Midnight gold' — 홈페이지 · ERP 어두운 모드 : 바탕 #0B1426, 남색 #1F2A3C, 샴페인 금 #D4B26A,
 *                                                  청록 #2DD4BF, 밝은 면 #F7F5F0
 *   C 'Clean ivory'   — ERP 밝은 모드(기본)       : 흰 #FFFFFF, 아이보리 #F5F1E8, 남색 #1F2A3C, 금 #C9A227
 * 🚨 WCAG AA(4.5) 를 재서 모자란 두 곳을 고쳤다(재 본 값은 test-ds 가 다시 잰다):
 *   - 밝은 모드에 #2DD4BF 를 그대로 쓰면 흰 바탕 1.86 → 강조색은 짙은 청록 #0F766E(흰 5.47·아이보리 4.86)
 *   - 금 #C9A227 은 글자로는 흰 2.42 → 선·장식에만. 금 글자가 필요하면 #7A6217(흰 5.85·아이보리 5.19)
 * 🚨 상태색은 뜻을 섞지 않는다: 금 = 확인 필요, 빨강 = 오류와 음수에만, 초록 = 끝남·맞음, 청록 = 누를 것.
 * 🚨 이 파일은 같은 서버에서 내려온다. 바깥에서 받아오는 것은 하나도 없다.
 */
:root{
  /* ── 원색(팔레트) ── */
  --ds-navy:#1F2A3C;        /* 남색 — 글자·머리띠 */
  --ds-navy-deep:#172131;
  --ds-midnight:#0B1426;    /* 어두운 바탕 */
  --ds-ivory:#F5F1E8;       /* 아이보리 */
  --ds-paper:#F7F5F0;       /* 밝은 면 */
  --ds-white:#FFFFFF;
  --ds-gold:#C9A227;        /* 금 — 선·장식 */
  --ds-gold-ink:#7A6217;    /* 금 글자(밝은 바탕 위) */
  --ds-champagne:#D4B26A;   /* 샴페인 금 — 어두운 바탕 위 */
  --ds-teal:#0F766E;        /* 강조(밝은 모드) */
  --ds-teal-2:#128A7E;
  --ds-teal-hi:#2DD4BF;     /* 강조(어두운 모드) */
  --ds-teal-hi2:#5EEAD4;

  /* ── 글자 크기 · 간격 · 모서리 ── */
  --ds-fs-xs:11px; --ds-fs-sm:12.5px; --ds-fs-md:14.5px; --ds-fs-lg:17px; --ds-fs-xl:22px; --ds-fs-2xl:28px; --ds-fs-3xl:36px;
  --ds-sp-1:4px; --ds-sp-2:8px; --ds-sp-3:12px; --ds-sp-4:16px; --ds-sp-5:20px; --ds-sp-6:24px; --ds-sp-7:32px; --ds-sp-8:48px;
  --ds-r-1:8px; --ds-r-2:12px; --ds-r-3:16px; --ds-r-4:22px; --ds-r-pill:999px;

  /* ── 움직임 — 짧고 부드럽게 ── */
  --ds-dur-1:120ms; --ds-dur-2:200ms; --ds-dur-3:320ms;
  --ds-ease:cubic-bezier(.2,.7,.2,1);

  /* ── 아이콘(선 그림, 같은 서버에서) — mask 로 써서 색은 글자색을 따른다 ── */
  --ds-ico-info:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 11v5.5M12 7.6h.01'/%3E%3C/svg%3E");
  --ds-ico-alert:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3.5 22 20H2z'/%3E%3Cpath d='M12 10v4.5M12 17.4h.01'/%3E%3C/svg%3E");
  --ds-ico-tray:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 13l2.6-6.9A2 2 0 0 1 7.5 4.8h9a2 2 0 0 1 1.9 1.3L21 13'/%3E%3Cpath d='M3 13v4.5A1.5 1.5 0 0 0 4.5 19h15a1.5 1.5 0 0 0 1.5-1.5V13h-5.2l-1.3 2.2h-5l-1.3-2.2z'/%3E%3C/svg%3E");

  /* ── 브랜드 띠(brandshell) — 머리띠·바닥도 이 팔레트를 쓴다 ── */
  --bsNavy:var(--ds-navy);
  --bsNavy2:var(--ds-navy-deep);
  --bsGold:var(--ds-gold);

  /* ── ERP 밝은 모드 'Clean ivory' ── */
  --ds-l-bg:var(--ds-ivory); --ds-l-surface:var(--ds-white); --ds-l-surface2:#EFE9DD;
  --ds-l-ink:var(--ds-navy); --ds-l-muted:#4A4438; --ds-l-line:#E3DCCD;
  --ds-l-accent:var(--ds-teal); --ds-l-accent2:var(--ds-teal-2); --ds-l-accent-soft:#E2F0EC; --ds-l-accent-ink:#FFFFFF;
  --ds-l-amber:var(--ds-gold-ink); --ds-l-amber-soft:#F8F0DA;
  --ds-l-danger:#B42318; --ds-l-danger-soft:#FBEAE7;
  --ds-l-ok:#2F6B4F; --ds-l-ok-soft:#E4EFE8;
  --ds-l-sb-bg:var(--ds-navy); --ds-l-sb-bg2:var(--ds-navy-deep); --ds-l-sb-ink:#ECE7DC; --ds-l-sb-mut:#A3ACBB; --ds-l-sb-act:var(--ds-champagne);
  --ds-l-input:var(--ds-white);

  /* ── ERP 어두운 모드 = A 'Midnight gold' ── */
  --ds-d-bg:var(--ds-midnight); --ds-d-surface:#121D33; --ds-d-surface2:#1A2740;
  --ds-d-ink:var(--ds-paper); --ds-d-muted:#A0AABB; --ds-d-line:#25324B;
  --ds-d-accent:var(--ds-teal-hi); --ds-d-accent2:var(--ds-teal-hi2); --ds-d-accent-soft:#0F3A3C; --ds-d-accent-ink:var(--ds-midnight);
  --ds-d-amber:var(--ds-champagne); --ds-d-amber-soft:#2C2616;
  --ds-d-danger:#F87171; --ds-d-danger-soft:#3B1D22;
  --ds-d-ok:#6FCF97; --ds-d-ok-soft:#173127;
  --ds-d-sb-bg:#081020; --ds-d-sb-bg2:#060C18; --ds-d-sb-ink:#E9E5DB; --ds-d-sb-mut:#8E99AD; --ds-d-sb-act:var(--ds-champagne);
  --ds-d-input:#0E182B;
}

/* ════════ ERP 공용 부품 (기본 테마에서) ════════
   🚨 클래스 이름은 바꾸지 않는다 — 화면 100여 개와 시험이 이 이름들에 걸려 있다.
   🚨 보여 주는 방식만 바꾼다. 글·단추·안내는 하나도 줄이지 않는다. */

/* 입력칸 — 옅은 노란 바탕을 걷고 흰 칸 + 가는 테두리 */
:root[data-skin="afdal"] .field input,:root[data-skin="afdal"] .field select,:root[data-skin="afdal"] .field textarea,
:root[data-skin="afdal"] .searchbar input{
  border:1px solid var(--line);background:var(--input-bg);border-radius:var(--ds-r-1);
  transition:border-color var(--ds-dur-1) var(--ds-ease),box-shadow var(--ds-dur-1) var(--ds-ease);
}
:root[data-skin="afdal"] .field input:hover,:root[data-skin="afdal"] .field select:hover,:root[data-skin="afdal"] .searchbar input:hover{
  border-color:color-mix(in srgb,var(--accent) 40%,var(--line));
}

/* 위험한 단추 — 빨간 네모 덩어리 대신 테두리만(누르면 되돌리기 어려운 것임을 색으로 말하되 눈을 덮지 않게) */
:root[data-skin="afdal"] .btn.dng{background:var(--surface);color:var(--danger);border-color:color-mix(in srgb,var(--danger) 45%,transparent)}
:root[data-skin="afdal"] .btn.dng:hover{background:var(--danger-soft);color:var(--danger);filter:none}

/* 확인 필요 안내 — 금색은 '확인 필요' 의 뜻. 왼쪽 금색 띠 + 옅은 바탕 */
:root[data-skin="afdal"] .banner{background:var(--amber-soft);color:var(--ink);border:1px solid color-mix(in srgb,var(--amber) 28%,transparent);
  border-left:3px solid var(--amber);border-radius:var(--ds-r-2)}

/* 빈 화면 — 한 줄짜리 회색 글 대신 가운데 둥근 표시와 함께 */
:root[data-skin="afdal"] .empty{padding:36px 16px 30px;color:var(--muted)}
/* 빈 쟁반 모양(선 그림) — 색은 글자 회색을 따라 밝게·어둡게 같이 바뀐다(mask). 불러오는 중처럼 짧은 안내에도 어색하지 않게 작게.
   🚨 이미 제 표시(.big — ✓ 등 뜻이 있는 기호)가 있는 빈 화면은 그 표시를 그대로 둔다 */
:root[data-skin="afdal"] .empty::before{content:"";display:block;width:40px;height:40px;margin:0 auto 12px;
  background:var(--muted);opacity:.55;
  -webkit-mask:var(--ds-ico-tray) center/contain no-repeat;mask:var(--ds-ico-tray) center/contain no-repeat}
:root[data-skin="afdal"] .empty:has(.big)::before{display:none}
:root[data-skin="afdal"] .empty .big{opacity:.75}

/* 대시보드 첫 카드(현금·은행) — 밝게: 남색 판 + 금색 윗줄, 어둡게: 한 단 밝은 남색 판 + 청록 숫자.
   청록 통판은 눈이 아프다 — 강조색은 숫자·선에만 */
:root[data-skin="afdal"] .tilehero{background:linear-gradient(150deg,var(--ds-navy) 0%,#26354D 100%);color:#F7F5F0;
  box-shadow:inset 0 2px 0 var(--ds-gold),0 10px 28px rgba(31,42,60,.18)}
:root[data-skin="afdal"] .tilehero .lbl,:root[data-skin="afdal"] .tilehero .sub{color:#DCD6C8;opacity:1}
:root[data-skin="afdal"] .tilehero .val{color:#FFFFFF}
@media (prefers-color-scheme: dark){
  :root[data-skin="afdal"]:not([data-theme="light"]) .tilehero{background:linear-gradient(150deg,#172743 0%,#101C33 100%);
    box-shadow:inset 0 0 0 1px #25324B,inset 0 2px 0 var(--ds-champagne)}
  :root[data-skin="afdal"]:not([data-theme="light"]) .tilehero .val{color:var(--ds-teal-hi)}
}
:root[data-skin="afdal"][data-theme="dark"] .tilehero{background:linear-gradient(150deg,#172743 0%,#101C33 100%);
  box-shadow:inset 0 0 0 1px #25324B,inset 0 2px 0 var(--ds-champagne)}
:root[data-skin="afdal"][data-theme="dark"] .tilehero .val{color:var(--ds-teal-hi)}

/* 움직임 — 짧게. 기기에서 '움직임 줄이기' 를 켜면 끈다 */
:root[data-skin="afdal"] .card,:root[data-skin="afdal"] .tile,:root[data-skin="afdal"] .btn,:root[data-skin="afdal"] .row{
  transition:box-shadow var(--ds-dur-2) var(--ds-ease),transform var(--ds-dur-2) var(--ds-ease),border-color var(--ds-dur-1) var(--ds-ease),background-color var(--ds-dur-1) var(--ds-ease)}
@media (prefers-reduced-motion: reduce){
  :root[data-skin="afdal"] *{transition:none!important;animation:none!important}
}