/* =====================================================================
   design-system.css — biz_site 디자인 시스템 (모던 미니멀 · 네이비)
   2026-06-12 전면 리뉴얼.

   안전 원칙 (중요):
   - 전역 리셋(* {}) / 엘리먼트 셀렉터(body, a, h1…) 금지 — 기존 페이지 보호.
   - :root 토큰은 순수 추가(부작용 없음). 컴포넌트는 모두 `ds-` 접두 →
     클래스를 붙인 곳에서만 작동. base.html 에 전역 링크해도 기존 화면 무영향.
   - 내부 화면을 점진 리스킨하며 ds- 클래스로 교체.
   ===================================================================== */

:root{
  /* 색 */
  --ds-ink:#0a0a0a;
  --ds-ink-2:#3f3f46;
  --ds-muted:#71717a;
  --ds-line:#ececf0;
  --ds-bg:#ffffff;
  --ds-bg-2:#f7f8fa;
  --ds-field:#f4f4f6;

  --ds-navy:#0f2b5b;        /* 포인트(primary) */
  --ds-navy-700:#0b2147;    /* hover */
  --ds-navy-soft:#e9eef6;   /* 틴트 */

  /* 상태색 — 의미 전달용 최소 사용 */
  --ds-ok:#0d9488;
  --ds-warn:#d97706;
  --ds-danger:#dc2626;

  /* 형태 */
  --ds-r-card:18px;
  --ds-r-btn:11px;
  --ds-r-pill:999px;
  --ds-shadow-sm:0 1px 2px rgba(15,23,42,.04);
  --ds-shadow:0 10px 30px rgba(15,23,42,.08);
  --ds-shadow-lg:0 24px 60px rgba(15,23,42,.16);

  /* 타이포 */
  --ds-font:'Noto Sans KR','Pretendard',system-ui,sans-serif;
}

/* ---------- eyebrow (섹션/페이지 윗라벨) ---------- */
.ds-eyebrow{font-size:12.5px;font-weight:700;letter-spacing:.16em;color:var(--ds-navy);text-transform:uppercase}

/* ---------- 버튼 ---------- */
.ds-btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;font-family:var(--ds-font);font-weight:700;font-size:14px;line-height:1;padding:12px 20px;border-radius:var(--ds-r-btn);border:0;cursor:pointer;transition:background .15s,color .15s,box-shadow .15s;text-decoration:none}
.ds-btn-primary{background:var(--ds-navy);color:#fff}
.ds-btn-primary:hover{background:var(--ds-navy-700);color:#fff}
.ds-btn-secondary{background:var(--ds-field);color:var(--ds-ink)}
.ds-btn-secondary:hover{background:#e9e9ee}
.ds-btn-ghost{background:transparent;color:var(--ds-navy);padding-left:8px;padding-right:8px}
.ds-btn-ghost:hover{color:var(--ds-navy-700)}
.ds-btn-sm{padding:9px 15px;font-size:13px}
.ds-btn[disabled],.ds-btn:disabled{opacity:.5;cursor:not-allowed}

/* ---------- 칩/배지 ---------- */
.ds-chip{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600;padding:4px 10px;border-radius:var(--ds-r-pill);line-height:1.3}
.ds-chip-navy{background:var(--ds-navy-soft);color:var(--ds-navy)}
.ds-chip-ok{background:#d9f2ee;color:#0a7a6f}
.ds-chip-muted{background:#f1f1f4;color:var(--ds-muted)}
.ds-chip-warn{background:#fdeede;color:#9a5a08}

/* ---------- 카드 ---------- */
.ds-card{background:var(--ds-bg);border:1px solid var(--ds-line);border-radius:var(--ds-r-card);transition:box-shadow .18s,transform .18s}
.ds-card-hover:hover{box-shadow:var(--ds-shadow);transform:translateY(-3px)}

/* ---------- 1줄 페이지 헤더 ---------- */
.ds-page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.ds-page-head .ds-page-title{font-size:24px;font-weight:900;letter-spacing:-.03em;display:flex;align-items:center;gap:9px;color:var(--ds-ink)}
.ds-page-head .ds-page-cap{font-size:13px;color:var(--ds-muted);margin-top:3px}

/* ---------- 플로팅 도움말 (ⓘ 호버 툴팁) — 장황한 안내 배너 대체 ---------- */
.ds-tip{position:relative;display:inline-flex;cursor:help;color:var(--ds-muted);vertical-align:middle}
.ds-tip>i{font-size:15px}
.ds-tip .ds-tip__bubble{position:absolute;bottom:140%;left:50%;transform:translateX(-50%);background:#0a0a0a;color:#fff;font-size:12.5px;font-weight:400;line-height:1.55;padding:10px 13px;border-radius:9px;width:260px;max-width:78vw;opacity:0;visibility:hidden;transition:opacity .16s,visibility .16s;box-shadow:0 8px 24px rgba(0,0,0,.25);z-index:60;text-align:left;white-space:normal}
.ds-tip .ds-tip__bubble::after{content:"";position:absolute;top:100%;left:50%;transform:translateX(-50%);border:6px solid transparent;border-top-color:#0a0a0a}
.ds-tip:hover .ds-tip__bubble,.ds-tip:focus-within .ds-tip__bubble{opacity:1;visibility:visible}

/* ---------- 접이식 안내 (기본 접힘) ---------- */
.ds-disclosure{border:1px solid var(--ds-line);border-radius:12px;background:var(--ds-bg-2);overflow:hidden}
.ds-disclosure>summary{list-style:none;cursor:pointer;padding:12px 16px;font-size:13px;font-weight:700;color:var(--ds-ink-2);display:flex;align-items:center;gap:8px}
.ds-disclosure>summary::-webkit-details-marker{display:none}
.ds-disclosure>summary::before{content:"\F229";font-family:"bootstrap-icons";color:var(--ds-muted);transition:transform .15s}
.ds-disclosure[open]>summary::before{transform:rotate(90deg)}
.ds-disclosure .ds-disclosure__body{padding:0 16px 14px;font-size:13px;line-height:1.65;color:var(--ds-muted)}

/* ---------- KPI ---------- */
.ds-kpi{background:var(--ds-bg);border:1px solid var(--ds-line);border-radius:13px;padding:15px 18px}
.ds-kpi b{font-size:24px;font-weight:900;letter-spacing:-.03em;color:var(--ds-ink);display:block}
.ds-kpi span{display:block;font-size:12px;color:var(--ds-muted);margin-top:2px}

/* ---------- 입력 필드 ---------- */
.ds-field{width:100%;font-family:var(--ds-font);font-size:14px;color:var(--ds-ink);background:var(--ds-bg);border:1px solid var(--ds-line);border-radius:10px;padding:11px 14px;transition:border-color .15s,box-shadow .15s}
.ds-field:focus{outline:0;border-color:var(--ds-navy);box-shadow:0 0 0 3px var(--ds-navy-soft)}

/* ---------- 접근성: 키보드 포커스 가시화 ---------- */
.ds-btn:focus-visible,.ds-field:focus-visible{outline:2px solid var(--ds-navy);outline-offset:2px}