/* =====================================================================
   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}

/* =====================================================================
   세무정보(calc) 계산기 navy 통일 스킨 — 2026-06-13 (전수 커버판)
   .calc-compact 스코프 → 단독 계산기 페이지 + calc_tools 임베드 카드 공통.
   구조/JS/Django 로직 불변. attribute selector 로 모든 shade·hover·focus 변종 커버.
   유지(navy 제외): red·rose(에러/위험), yellow·orange·amber(경고/주의),
   green·emerald(계산 결과·성공·실수령 등 positive 의미색), gray·slate·zinc(중립).
   navy 통일 대상 = brand 포인트색: blue·sky·cyan·indigo·violet·purple·fuchsia·pink·teal.
   ===================================================================== */
/* 포인트 텍스트색 → navy (모든 shade + hover:text 변종 포함) */
.calc-compact [class*="text-blue-"],.calc-compact [class*="text-sky-"],.calc-compact [class*="text-cyan-"],
.calc-compact [class*="text-indigo-"],.calc-compact [class*="text-violet-"],.calc-compact [class*="text-purple-"],
.calc-compact [class*="text-fuchsia-"],.calc-compact [class*="text-pink-"],.calc-compact [class*="text-teal-"]{color:#0f2b5b !important}
/* 배경 틴트 50/100 → navy-soft */
.calc-compact .bg-blue-50,.calc-compact .bg-blue-100,.calc-compact .bg-sky-50,.calc-compact .bg-cyan-50,
.calc-compact .bg-indigo-50,.calc-compact .bg-indigo-100,.calc-compact .bg-violet-50,
.calc-compact .bg-purple-50,.calc-compact .bg-purple-100,.calc-compact .bg-pink-50,.calc-compact .bg-pink-100,.calc-compact .bg-fuchsia-50,
.calc-compact .bg-teal-50{background-color:#e9eef6 !important}
.calc-compact .bg-blue-200,.calc-compact .bg-indigo-200,.calc-compact .bg-purple-200{background-color:#dbe3f1 !important}
/* 솔리드 배경 400~900 → navy */
.calc-compact .bg-blue-500,.calc-compact .bg-blue-600,.calc-compact .bg-blue-700,.calc-compact .bg-blue-800,
.calc-compact .bg-sky-500,.calc-compact .bg-sky-600,.calc-compact .bg-cyan-500,.calc-compact .bg-cyan-600,
.calc-compact .bg-indigo-500,.calc-compact .bg-indigo-600,.calc-compact .bg-indigo-700,
.calc-compact .bg-violet-500,.calc-compact .bg-violet-600,.calc-compact .bg-purple-500,.calc-compact .bg-purple-600,.calc-compact .bg-purple-700,
.calc-compact .bg-pink-500,.calc-compact .bg-pink-600,.calc-compact .bg-fuchsia-500,
.calc-compact .bg-teal-500,.calc-compact .bg-teal-600{background-color:#0f2b5b !important}
/* 솔리드 hover 배경 → navy-700 / 틴트 hover → navy-soft */
.calc-compact [class*="hover:bg-blue-6"]:hover,.calc-compact [class*="hover:bg-blue-7"]:hover,
.calc-compact [class*="hover:bg-indigo-6"]:hover,.calc-compact [class*="hover:bg-indigo-7"]:hover,
.calc-compact [class*="hover:bg-purple-6"]:hover,.calc-compact [class*="hover:bg-purple-7"]:hover{background-color:#0b2147 !important}
.calc-compact .hover\:bg-blue-50:hover,.calc-compact .hover\:bg-indigo-50:hover{background-color:#e9eef6 !important}
/* 보더 → navy 라인 (모든 shade·hover 변종) */
.calc-compact [class*="border-blue-"],.calc-compact [class*="border-sky-"],.calc-compact [class*="border-cyan-"],
.calc-compact [class*="border-indigo-"],.calc-compact [class*="border-violet-"],.calc-compact [class*="border-purple-"],
.calc-compact [class*="border-pink-"],.calc-compact [class*="border-fuchsia-"],.calc-compact [class*="border-teal-"]{border-color:#d7e0f0 !important}
.calc-compact [class*="hover:border-blue-"]:hover,.calc-compact [class*="hover:border-indigo-"]:hover,
.calc-compact [class*="hover:border-purple-"]:hover{border-color:#cdd8ec !important}
/* focus ring/border → navy (모든 shade) */
.calc-compact [class*="focus:ring-blue-"]:focus,.calc-compact [class*="focus:ring-indigo-"]:focus,
.calc-compact [class*="focus:ring-purple-"]:focus,
.calc-compact [class*="focus:ring-teal-"]:focus{--tw-ring-color:#cdd8ec !important}
.calc-compact [class*="focus:border-blue-"]:focus,.calc-compact [class*="focus:border-indigo-"]:focus{border-color:#0f2b5b !important}
.calc-compact .ring-indigo-200,.calc-compact .ring-blue-200{--tw-ring-color:#cdd8ec !important}
/* 그라데이션 정지점 (from/to) → navy 틴트 (brand 색만) */
.calc-compact [class*="from-blue-"],.calc-compact [class*="from-indigo-"],
.calc-compact [class*="from-teal-"],.calc-compact [class*="from-purple-"],.calc-compact [class*="from-sky-"]{--tw-gradient-from:#e9eef6 !important;--tw-gradient-to:rgba(233,238,246,0) !important;--tw-gradient-stops:var(--tw-gradient-from),var(--tw-gradient-to) !important}
.calc-compact [class*="to-blue-"],.calc-compact [class*="to-indigo-"],.calc-compact [class*="to-teal-"]{--tw-gradient-to:#e9eef6 !important}
/* divide (자식 간 구분선) → navy 라인 (brand 색만) */
.calc-compact [class*="divide-blue-"]>:not([hidden])~:not([hidden]),
.calc-compact [class*="divide-indigo-"]>:not([hidden])~:not([hidden]){border-color:#d7e0f0 !important}