/* ⚠️ AUTO-GENERATED FROM /_context/design_tokens/design_tokens_master.css
 *    DO NOT EDIT THIS FILE — changes will be overwritten on next sync.
 *    Edit the master and run: bash _context/design_tokens/sync.sh
 */

/* ════════════════════════════════════════════════════════════════════════════
 *  AVA DESIGN TOKENS — MASTER (SSoT, Single Source of Truth)
 *
 *  📍 위치: /_context/design_tokens/design_tokens_master.css
 *  📅 V32 — 워크스페이스 통합 (2026-05-14)
 *
 *  ⚠️ 절대 룰
 *  ──────────
 *  1. 이 파일은 :root CSS 변수와 단순 opt-in 유틸리티 클래스만 정의합니다.
 *  2. 글로벌 자손 셀렉터 룰 (body h1, .X p, .X img, * 등) 절대 금지 — V30 사고 원인.
 *  3. 사이트별 추가 룰은 각 사이트의 `_common/site_specific_rules.css` 에 분리.
 *  4. 토큰 정의 수정은 본 파일에서만. 수정 후 `bash _context/design_tokens/sync.sh` 실행.
 *  5. 각 사이트의 `_common/design_tokens.css` 는 본 마스터의 카피 — 직접 수정 금지.
 *
 *  🏥 적용 사이트
 *  ────────────
 *  - public_patient/_common/design_tokens.css   (환자 사이트 ava-ps.com)
 *  - public_admin/admin/_common/design_tokens.css   (업무 허브 gangnamsps.com)
 *  - yeonyeonlaw/_common/design_tokens.css   (Yeon & Yeon)
 *
 *  📊 사용 패턴
 *  ───────────
 *  - CSS: var(--ava-ink) 직접 호출 또는 Tailwind 클래스 (text-ava-ink 등)
 *  - JS:  TOKENS 객체 (design_tokens_master.js 참조)
 *  - PPTX/PDF/DOCX 출력: TOKENS_OUTPUT 매핑 (master.js)
 *
 *  🎨 톤 정체성: V24 Modern Clean (골드 5% 다이어트)
 *  ─────────────────────────────────────────────
 *  글로벌 하이엔드 (Aesop·La Mer·Cartier·Apple) 패턴 = 화이트 베이스 90% + 1% 액센트.
 *  골드+명조체 = 90년대 호텔/한의원 톤 → 모던 쿨톤으로 재구성.
 * ════════════════════════════════════════════════════════════════════════════ */

:root {
  /* ─── 베이스 색 (90% 사용) ───────────────────────────────────── */
  --ava-paper:        #FFFFFF;   /* Pure White — 입력·카드 배경 */
  --ava-cream:        #FAF7F2;   /* Warm Ivory — 페이지 배경 */
  --ava-surface:      #F4F2EE;   /* Cool Surface — 호버 배경·서피스 */
  --ava-surface-2:    #EBE8E1;   /* Surface-2 — 활성 배경 */
  --ava-line:         #E5E2DA;   /* Soft Line — 얇은 구분선 */
  --ava-line-strong:  #CBC5B8;   /* Strong Line — 강조 구분선 */

  /* ─── 텍스트 (5%) ──────────────────────────────────────────── */
  --ava-ink:          #1F1F1F;   /* Deep Ink — 본문·헤더 */
  --ava-ink-soft:     #3A3A3A;   /* Soft Ink — 본문 보조 */
  --ava-mute:         #6B6B6B;   /* Cool Mute — 보조 텍스트 */
  --ava-mute-light:   #A5A29B;   /* Light Mute — placeholder */

  /* ─── 액센트 (5% 미만 — 절제, 위반 시 재작업) ───────────────── */
  --ava-gold:         #A88C64;   /* Champagne Gold — 로고·hairline·최우선 CTA 1개만 */
  --ava-gold-soft:    #C4B5A0;   /* Soft Gold — 그라데이션·미세 강조 */
  --ava-platinum:     #B0A595;   /* Brushed Platinum — 호버 outline (골드 대체) */
  --ava-deep:         #2A3540;   /* Deep Navy — 보조 CTA / 시그니처 1-2곳 */

  /* ─── 시스템 색 (의료 컨텍스트) ─────────────────────────────── */
  --ava-danger:       #B23A3A;
  --ava-danger-bg:    #FCE9E9;
  --ava-success:      #3BA558;
  --ava-success-bg:   #E8F5EC;
  --ava-warn:         #C48A2F;
  --ava-warn-bg:      #FBF3E0;

  /* ─── 폰트 패밀리 (V31 옵션 A — Pretendard Variable 100%) ── */
  --ava-font-header:  'Pretendard Variable', 'Pretendard', 'Inter', 'Noto Sans KR', sans-serif;
  --ava-font-body:    'Pretendard Variable', 'Pretendard', 'Noto Sans KR', sans-serif;
  --ava-font-display: 'Playfair Display', 'Gowun Batang', serif;       /* 캔버스 내부 시안 1-2곳만 — UI에는 사용 금지 */
  --ava-font-mono:    'IBM Plex Mono', 'D2 Coding', monospace;

  /* ─── 폰트 사이즈 (Admin UI — 고정 6단계) ──────────────────── */
  --ava-fs-xs:    11px;
  --ava-fs-sm:    13px;
  --ava-fs-md:    15px;
  --ava-fs-lg:    18px;
  --ava-fs-xl:    24px;
  --ava-fs-xxl:   36px;

  /* ─── 폰트 굵기 ────────────────────────────────────────────── */
  --ava-fw-regular:  400;
  --ava-fw-medium:   500;
  --ava-fw-semi:     600;
  --ava-fw-bold:     700;

  /* ─── 행간 (Admin UI) ─────────────────────────────────────── */
  --ava-lh-tight:    1.25;
  --ava-lh-normal:   1.5;
  --ava-lh-relaxed:  1.7;

  /* ─── 환자 사이트 반응형 폰트 (V29 — clamp 자동 축소) ─────── */
  --ava-fs-body:      16px;      /* iOS Safari 자동 줌 방지 16px 고정 */
  --ava-fs-body-sm:   14px;
  --ava-fs-caption:   13px;
  --ava-fs-label:     11px;
  --ava-fs-h4-rsp:    clamp(16px, 1.8vw + 12px, 20px);
  --ava-fs-h3-rsp:    clamp(18px, 2.4vw + 12px, 26px);
  --ava-fs-h2-rsp:    clamp(22px, 3.6vw + 12px, 36px);
  --ava-fs-h1-rsp:    clamp(28px, 5vw + 14px, 56px);
  --ava-fs-hero-rsp:  clamp(36px, 7vw + 16px, 80px);

  /* 가독성 — display/heading/body 별 행간 */
  --ava-lh-display:  1.15;       /* H1·Hero */
  --ava-lh-heading:  1.30;
  --ava-lh-body:     1.65;       /* 한국어 가독성 1.6~1.7 */
  --ava-lh-caption:  1.50;

  --ava-tracking-h1:    -0.03em;
  --ava-tracking-h2:    -0.02em;
  --ava-tracking-body:  -0.005em;

  /* 단락 spacing 반응형 */
  --ava-p-section:   clamp(48px, 8vw, 96px);    /* 섹션 사이 */
  --ava-p-block:     clamp(24px, 4vw, 48px);    /* 블록 사이 */
  --ava-p-paragraph: clamp(12px, 1.5vw, 16px);  /* 단락 사이 */

  /* ─── 글자 자간 ───────────────────────────────────────────── */
  --ava-tracking-tight:  -0.02em;
  --ava-tracking-normal: 0;
  --ava-tracking-wide:   0.04em;
  --ava-tracking-wider:  0.12em;
  --ava-tracking-widest: 0.24em;   /* 라벨·EYEBROW 텍스트 */

  /* ─── 여백 7단계 (8 의 배수 기반) ───────────────────────────── */
  --ava-s-1:    4px;
  --ava-s-2:    8px;
  --ava-s-3:    12px;
  --ava-s-4:    16px;
  --ava-s-5:    24px;
  --ava-s-6:    32px;
  --ava-s-7:    48px;
  --ava-s-8:    64px;

  /* ─── 라운드 5단계 ────────────────────────────────────────── */
  --ava-r-sm:     4px;
  --ava-r-md:     8px;
  --ava-r-lg:     14px;
  --ava-r-xl:     24px;
  --ava-r-full:   999px;

  /* ─── 그림자 4단계 (검정 베이스, 골드 X) ───────────────────── */
  --ava-shadow-sm:   0 1px 3px rgba(31,27,23,.08);
  --ava-shadow-md:   0 4px 14px rgba(31,27,23,.10);
  --ava-shadow-lg:   0 12px 40px rgba(31,27,23,.16);
  --ava-shadow-xl:   0 24px 80px rgba(31,27,23,.24);

  /* ─── 전환 3 속도 ─────────────────────────────────────────── */
  --ava-t-fast:    120ms cubic-bezier(.5,1.3,.5,1);
  --ava-t-normal:  180ms cubic-bezier(.5,1.3,.5,1);
  --ava-t-slow:    280ms cubic-bezier(.4,1.2,.5,1);

  /* ─── Z-index 계층 ────────────────────────────────────────── */
  --ava-z-sticky:    10;
  --ava-z-fab:       40;
  --ava-z-overlay:   100;
  --ava-z-modal:     200;
  --ava-z-toast:     9999;
  --ava-z-tooltip:   9998;
}

/* ════════════════════════════════════════════════════════════════════════════
 *  단순 opt-in 유틸리티 클래스 — 자손 셀렉터 0개 (V30 사고 재발 방지)
 *  사용처에서 명시적 className 으로 호출 시에만 적용됨.
 *  ════════════════════════════════════════════════════════════════════════════ */

/* 배경 */
.ava-bg-paper    { background: var(--ava-paper); }
.ava-bg-cream    { background: var(--ava-cream); }
.ava-bg-surface  { background: var(--ava-surface); }
.ava-bg-surface-2{ background: var(--ava-surface-2); }
.ava-bg-ink      { background: var(--ava-ink); color: var(--ava-paper); }
.ava-bg-deep     { background: var(--ava-deep); color: var(--ava-paper); }

/* 텍스트 색 */
.ava-text-ink    { color: var(--ava-ink); }
.ava-text-ink-soft { color: var(--ava-ink-soft); }
.ava-text-mute   { color: var(--ava-mute); }
.ava-text-mute-light { color: var(--ava-mute-light); }
.ava-text-gold   { color: var(--ava-gold); }
.ava-text-deep   { color: var(--ava-deep); }
.ava-text-danger { color: var(--ava-danger); }
.ava-text-success{ color: var(--ava-success); }

/* 보더 */
.ava-border       { border: 1px solid var(--ava-line); }
.ava-border-strong{ border: 1px solid var(--ava-line-strong); }
.ava-border-gold  { border: 1px solid var(--ava-gold); }

/* 폰트 패밀리 */
.ava-font-header { font-family: var(--ava-font-header); }
.ava-font-body   { font-family: var(--ava-font-body); }
.ava-font-display{ font-family: var(--ava-font-display); }
.ava-font-mono   { font-family: var(--ava-font-mono); }

/* 폰트 사이즈 (Admin) */
.ava-fs-xs  { font-size: var(--ava-fs-xs); }
.ava-fs-sm  { font-size: var(--ava-fs-sm); }
.ava-fs-md  { font-size: var(--ava-fs-md); }
.ava-fs-lg  { font-size: var(--ava-fs-lg); }
.ava-fs-xl  { font-size: var(--ava-fs-xl); }
.ava-fs-xxl { font-size: var(--ava-fs-xxl); }

/* 그림자 */
.ava-shadow-sm { box-shadow: var(--ava-shadow-sm); }
.ava-shadow-md { box-shadow: var(--ava-shadow-md); }
.ava-shadow-lg { box-shadow: var(--ava-shadow-lg); }
.ava-shadow-xl { box-shadow: var(--ava-shadow-xl); }

/* 라운드 */
.ava-r-sm   { border-radius: var(--ava-r-sm); }
.ava-r-md   { border-radius: var(--ava-r-md); }
.ava-r-lg   { border-radius: var(--ava-r-lg); }
.ava-r-xl   { border-radius: var(--ava-r-xl); }
.ava-r-full { border-radius: var(--ava-r-full); }

/* 전환 */
.ava-t-fast   { transition: all var(--ava-t-fast); }
.ava-t-normal { transition: all var(--ava-t-normal); }
.ava-t-slow   { transition: all var(--ava-t-slow); }

/* sr-only (접근성) */
.ava-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ════════════════════════════════════════════════════════════════════════════
 *  ⚠️ 본 파일 끝 — 아래에 절대 자손 셀렉터를 추가하지 마세요.
 *  사이트별 글로벌 룰 (admin 카드·환자 페이지 hero 등) 은
 *  각 사이트의 `_common/site_specific_rules.css` 에 분리하세요.
 * ════════════════════════════════════════════════════════════════════════════ */