/* ⚠️ 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: #F6F4F0; /* Porcelain Greige — 페이지 배경 (V33: 노란끼↓ 회끼↑) */ --ava-surface: #EEEBE5; /* Stone — 호버 배경·서피스 */ --ava-surface-2: #E4E0D8; /* Surface-2 — 활성 배경 */ --ava-line: #DBD7CE; /* Soft Line — 얇은 구분선 */ --ava-line-strong: #C4BEB2; /* Strong Line — 강조 구분선 */ /* ─── 텍스트 (5%) — 웜 차콜 (V33) ──────────────────────────── */ --ava-ink: #201E1B; /* Warm Charcoal Ink — 본문·헤더 */ --ava-ink-soft: #3B3733; /* Soft Ink (웜) — 본문 보조 */ --ava-mute: #6E6962; /* Greige Mute — 보조 텍스트 */ --ava-mute-light: #A5A29B; /* Light Mute — placeholder (유지) */ /* ─── 액센트 (5% 미만 — 절제, 위반 시 재작업) ───────────────── */ --ava-gold: #A88C64; /* Champagne Gold — 유지 (브랜드 시그니처) */ --ava-gold-soft: #C4B5A0; /* Soft Gold — 유지 */ /* ─── 2026-08-01 신설: '강한' 역할 토큰 ──────────────────────── 문제의 근본은 색이 아니라 역할 겸직이었다. --ava-gold 하나가 ① 장식(보더·큰 제목) ② 작은 글씨 ③ 흰 글씨를 얹는 배경 세 가지를 동시에 하고 있었는데, 중간 명도 한 값으로는 ①만 만족한다. --ava-gold #A88C64 → 흰 배경 3.18:1 / 흰 글씨 얹어도 3.18:1 (AA 4.5 미달) 그래서 하나를 더 두고 역할을 나눈다. 기존 값은 그대로다 — 브랜드 색은 안 바뀐다. ★ 사용 규칙 (새 화면 만들 때 이대로) 장식·큰 글씨(24px+ 또는 18.66px+ 굵게) ................ --ava-gold 작은 글씨(밝은 배경 위) ............................... --ava-gold-strong 흰 글씨를 얹는 배경(버튼·배지) ........................ --ava-gold-strong 어두운 배경(#2f2d2b 등) 위 글씨 ....................... --ava-gold-soft ↑ 어두운 데서는 오히려 더 밝아야 한다. strong 을 쓰면 2.35:1 로 악화된다. 대비: 흰 배경 5.85:1 · 사이트 배경(#FAF7F2) 5.47:1 · 흰 글씨 얹으면 5.85:1 */ --ava-gold-strong: #7A6136; /* Deep Gold — 작은 글씨 + 흰 글씨 얹는 배경 (AA) */ --ava-platinum: #B0A595; /* Brushed Platinum — 유지 */ --ava-deep: #2B2723; /* Warm Espresso — 보조 CTA / 시그니처 1-2곳 (V33: 네이비 교체) */ /* ─── 시스템 색 (의료 컨텍스트) — 뮤트 에디션 (V33) ─────────── */ --ava-danger: #A1554A; /* Muted Terracotta */ --ava-danger-bg: #F2E7E3; --ava-success: #7C8A6A; /* Muted Sage */ --ava-success-bg: #ECEEE6; --ava-warn: #B0843E; /* Muted Ochre */ --ava-warn-bg: #F4EDE1; /* 2026-08-02 추가 — 업무허브 뷰 52곳이 «정보/중립 안내» 색을 각자 #4A6FA5 로 박아 쓰고 있었는데 마스터에 대응 토큰이 없어 통일할 수가 없었다. 다른 시스템 색과 같은 뮤트 계열로 맞춘다. */ --ava-info: #5A7391; /* Muted Slate Blue */ --ava-info-bg: #E7EBF0; /* ─── 진료 도메인 색 (2026-08-27) ──────────────── 환자차트·캘린더가 자체 색으로 쓰던 두 역할을 토큰으로 승격했다. 값은 AVA 어스톤에 맞추어 채도를 낮춰 잡았다 — 종전 #4A3070·#2F8A80 은 허브의 다른 화면보다 유독 짱해서 같은 시스템으로 안 보였다. 실측 대비(흰 배경): consent 6.2 · consent-strong 9.3 device 4.5 · device-strong 6.9 → 작은 글씨엔 -strong */ --ava-consent: #6B5A82; /* 동의서·서명 — 무채도 자두 */ --ava-consent-strong: #4E4160; /* 작은 글씨용 */ --ava-consent-bg: #EDEAF1; /* 배지·면 */ --ava-device: #4E7F78; /* 장비·시술 — 무채도 청록 */ --ava-device-strong: #3A6159; /* 작은 글씨용 */ --ava-device-bg: #E4EDEA; /* 배지·면 */ /* ─── 시스템 색 «작은 글씨용» (2026-08-02) ────────────────────── 뮤트 계열은 면(배지 배경·테두리)에는 좋은데 11~13px 글씨로 쓰면 대비가 모자란다. 실측: success #7C8A6A 를 페이지 배경(#EEEBE5) 위에 올리면 3.10:1 — AA(4.5) 미달. 색상은 그대로 두고 농도만 낮춰 AA 를 넘긴 짝을 둔다. gold ↔ gold-strong 과 같은 규칙. ▸ 글씨·아이콘 = *-strong, ▸ 배지 배경·테두리·그래프 면 = 기본값 */ --ava-success-strong: #636E55; --ava-danger-strong: #8C4A40; --ava-warn-strong: #86642F; --ava-info-strong: #556C88; /* 보조 글씨용 — 밝은 배경에서는 --ava-mute 로 충분하지만 다크 모드에서는 더 밝아야 읽힌다. ui_helpers 의 다크 모드가 이 이름을 자기 파일에서 만들어 쓰고 있었다 (2026-08-02 마스터로 이동). */ --ava-mute-strong: #5A554E; /* ─── 레이아웃 ───────────────────────────────────────────────── 환자 사이트 하단 고정 바가 아이폰 홈 인디케이터에 가리지 않도록 두는 여백. public_patient/style.css 가 자기 파일에서 만들어 쓰던 이름을 여기로 올린다 — 페이지에서 값을 덮어쓰는 것(오버라이드)은 그대로 두면 된다. */ --ava-bottom-safe: env(safe-area-inset-bottom, 0px); /* ─── 폰트 패밀리 (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: 'MaruBuri', 'Playfair Display', serif; /* 2026-08-02: 'Prata' 제거 — 자체 호스팅 목록에 없어 늘 건너뛰는 이름이었다 */ /* V33: 히어로·대제목 (Prata=영문 화보 / 마루부리=한글) */ --ava-font-serif: 'MaruBuri', 'Cormorant Garamond', 'Noto Serif KR', serif; /* V33: 인용·원장 철학 강조 1줄 (명조는 소금처럼 5% 미만) */ --ava-font-subhead: 'Tenor Sans', 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', sans-serif; /* V33: EN 에디토리얼 소제목 (한글은 Pretendard 폴백) */ --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); } /* 자체 호스팅 한글 명조 (V33 — 마루부리, 금지폰트 Gowun Batang 대체) * * 2026-07-30 성능: 상용 core 서브셋(169KB) 우선 + 전체 폰트(425KB) 폴백. * 마루부리는 한글 음절 11,172자를 전부 담아 Regular 만 425KB — 환자 사이트 최대 리소스였음. * 그런데 V33 원칙상 명조는 "소금처럼 5% 미만"(제목·인용)에만 쓴다. * core = 저장소 707개 파일(후기 정적페이지 497개 포함) 실사용 1,114자 + 라틴·자모·기호 = 2,340자. * * 폰트 파일은 이 파일이 아니라 _context/fonts/ 가 관리한다 (빌드+서브셋+sync). * 여기에는 @font-face 를 새로 추가하지 말 것 — 이 파일의 1번 규칙(변수·opt-in 클래스만)에 어긋나고, * 2026-08-01 의 866KB 중복 다운로드 사고가 정확히 그렇게 생겼다. */ /* MaruBuri — 사이트 실사용 글자로 서브셋한 파일 하나만 선언한다. 2026-08-01 이전엔 '전체 폰트(unicode-range 없음) + core(unicode-range 명시)' 2단 구조였는데, 의도는 'core 에 없는 글자만 전체 폰트를 받는다' 였지만 실측하면 둘 다 받았다 (/antiaging 에서 Regular 425KB + Bold 441KB = 866KB, 그 페이지 전송량의 44%). 지금은 _context/fonts/build_fonts.js 가 사이트 전 텍스트를 스캔해 서브셋을 만들고 verify_font_coverage.js 가 렌더된 글자 100% 포함을 확인한다 → 폴백용 전체 폰트가 불필요. ※ 파일은 _context/fonts/sync_fonts.sh 가 3개 사이트 _common/fonts/ 로 배포한다. admin 은 웹 경로가 /admin/_common/fonts/ 라 sync 가 자동 치환한다. */ /* 폰트 패밀리 */ .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-serif { font-family: var(--ava-font-serif); } .ava-font-subhead{ font-family: var(--ava-font-subhead); } .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` 에 분리하세요. * ════════════════════════════════════════════════════════════════════════════ */