/* ===================================================================== KOKOPICK 바우처 · 디자인 토큰 --------------------------------------------------------------------- 모든 화면(사용자/병원/관리자)이 공유하는 색·타이포·간격 변수입니다. 색상값을 직접 쓰지 말고 반드시 이 파일의 변수를 사용하세요. 다크 모드는 (1) OS 설정 (2) 두 가지를 모두 지원합니다. ===================================================================== */ @import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600;700&family=Noto+Sans+KR:wght@400;500;700&family=IBM+Plex+Mono:wght@400;500;600&display=swap'); :root { color-scheme: light; /* ---- 중립 (Neutral) ---- */ --paper: #ffffff; /* 카드·시트 배경 */ --bg: #eef1f6; /* 페이지 배경 */ --bg-alt: #e3e8f1; /* 보조 배경(입력, 리스트 박스) */ --ink: #131b30; /* 본문 텍스트 */ --ink-soft: #57617a; /* 보조 텍스트 */ --ink-faint: #8790a3; /* 캡션·비활성 */ --line: #dde2ec; /* 구분선 */ --line-strong: #c7cedd; /* 입력 테두리 */ /* ---- 브랜드 ---- */ --brand: #a68af0; /* KOKOPICK 로고 퍼플 */ --brand-soft: #f0eafd; /* ---- 역할별 강조색 ---- */ --user: #1c5aa8; /* 사용자(내 바우처) */ --user-soft: #e8f0fb; --hosp: #0d7a6c; /* 병원용 */ --hosp-soft: #e2f5f1; --admin: #6a4aa0; /* 관리자 백오피스 */ --admin-soft: #efe8fa; /* ---- 상태색 ---- */ --ok: #16805f; /* 정상·완료 */ --warn: #9a6b12; /* 대기·주의 */ --danger: #b23b26; /* 차감·미정산·오류 */ --ok-bg: rgba(22,128,95,.12); --warn-bg: rgba(154,107,18,.14); --danger-bg: rgba(178,59,38,.12); /* ---- 그림자 ---- */ --shadow: 0 1px 2px rgba(19,27,48,.05), 0 10px 28px -14px rgba(19,27,48,.22); --shadow-lg: 0 2px 4px rgba(19,27,48,.06), 0 24px 48px -20px rgba(19,27,48,.28); /* ---- 반경 ---- */ --radius-card: 16px; --radius-box: 12px; --radius-btn: 10px; --radius-pill: 999px; /* ---- 간격 (4px 스케일) ---- */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; /* ---- 타이포 ---- */ --font-display: 'IBM Plex Sans KR', 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif; --font-body: 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', 'Noto Sans KR', 'SFMono-Regular', Consolas, monospace; /* ---- 레이아웃 ---- */ --app-max: 480px; /* 모바일 앱 최대 폭 */ --sidebar-w: 236px; /* 백오피스 사이드바 */ /* 기본 강조색(각 앱 body 클래스에서 덮어씀) */ --accent: var(--brand); --accent-soft: var(--brand-soft); } /* OS 다크 모드 (사용자가 라이트로 명시 지정한 경우는 제외) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --paper: #171d2c; --bg: #0c111e; --bg-alt: #111726; --ink: #e8ecf5; --ink-soft: #a4adc4; --ink-faint: #6b7590; --line: #262f45; --line-strong: #333e58; --brand: #b9a3f5; --brand-soft: #241d3a; --user: #7aace4; --user-soft: #1b2c46; --hosp: #4fc4ac; --hosp-soft: #12312c; --admin: #ab8ce0; --admin-soft: #2a2244; --ok: #4fd19b; --warn: #e0b268; --danger: #e08268; --ok-bg: rgba(79,209,155,.14); --warn-bg: rgba(224,178,104,.16); --danger-bg: rgba(224,130,104,.16); --shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 30px -16px rgba(0,0,0,.65); --shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 30px 60px -24px rgba(0,0,0,.7); } } /* 사용자가 직접 선택한 다크 모드 */ :root[data-theme="dark"] { color-scheme: dark; --paper: #171d2c; --bg: #0c111e; --bg-alt: #111726; --ink: #e8ecf5; --ink-soft: #a4adc4; --ink-faint: #6b7590; --line: #262f45; --line-strong: #333e58; --brand: #b9a3f5; --brand-soft: #241d3a; --user: #7aace4; --user-soft: #1b2c46; --hosp: #4fc4ac; --hosp-soft: #12312c; --admin: #ab8ce0; --admin-soft: #2a2244; --ok: #4fd19b; --warn: #e0b268; --danger: #e08268; --ok-bg: rgba(79,209,155,.14); --warn-bg: rgba(224,178,104,.16); --danger-bg: rgba(224,130,104,.16); --shadow: 0 1px 2px rgba(0,0,0,.35), 0 12px 30px -16px rgba(0,0,0,.65); --shadow-lg: 0 2px 6px rgba(0,0,0,.4), 0 30px 60px -24px rgba(0,0,0,.7); } /* 역할별 강조색 매핑 — 각 페이지 */ body.app-user { --accent: var(--user); --accent-soft: var(--user-soft); } body.app-hosp { --accent: var(--hosp); --accent-soft: var(--hosp-soft); } body.app-admin { --accent: var(--admin); --accent-soft: var(--admin-soft); }