/* ============================================================ theme.css — 밸류브릿지 통합 디자인 토큰 (단일 소스) · 라이트/다크 두 팔레트를 [data-theme]로 전환 · 어긋난 기존 변수명(--text/--panel/--apricot 등)은 표준 변수를 가리키는 별칭으로 흡수 → 기존 셀렉터 수정 없이 admin(다크)·고객(라이트) 양쪽이 같은 토큰을 공유 · 반드시 core.css / 페이지 인라인 스타일보다 "먼저" 로드할 것 · 테마 적용: (head 인라인 스크립트가 렌더 전 설정) ============================================================ */ /* ── Pretendard (자가호스팅 가변폰트 · 본문/UI 산세리프) ── 앱(Capacitor) 오프라인/CSP에서도 동작하도록 CDN이 아닌 로컬 woff2 사용(R10). 가변축(weight 45~920) 하나로 전 굵기 커버. FOUT 대신 swap. */ @font-face{ font-family:'Pretendard Variable'; src:url('../assets/PretendardVariable.woff2') format('woff2'); font-weight:45 920; font-style:normal; font-display:swap; } /* ── 테마 무관 공통 (서체 · 이징) ── */ :root{ /* 폰트 통일(2026-07-08): 세리프 토큰도 Pretendard로 매핑 → 제목 포함 전면 Pretendard. 토큰 이름(--serif-kr/--serif)은 기존 셀렉터 호환 위해 유지(값만 산세리프). */ --serif-kr:'Pretendard Variable','Pretendard','Noto Sans KR',sans-serif; --serif:'Pretendard Variable','Pretendard','Manrope',sans-serif; --sans-kr:'Pretendard Variable','Pretendard','Noto Sans KR','Manrope',sans-serif; --sans:'Pretendard Variable','Pretendard','Manrope','Noto Sans KR',sans-serif; --ease:cubic-bezier(0.22,1,0.36,1); /* ── 테마 무관 고정색 (딥그린 앱셸·모달·골드 hover) ── */ --on-green:#F2EEE2; /* 딥그린 사이드바·버튼 위 아이보리 텍스트(양테마 고정) */ --on-green-dim:rgba(242,238,226,0.66); --overlay-hi:rgba(255,255,255,0.06); /* 딥그린 위 화이트 오버레이(사이드바 토글 배경) */ --overlay-hi-2:rgba(255,255,255,0.12);/* 동 hover */ --nav-green-hi:#21402F; /* 사이드바 그라디언트 상단(고정) */ --nav-green-lo:#16301F; /* 사이드바 그라디언트 하단(고정) */ --gold-hi:#dcb95a; /* 버튼 hover 밝은 골드(골드는 양테마 동일) */ --scrim:rgba(16,22,19,0.55); /* 모달 백드롭 딤 */ } /* ── LIGHT (기본 — data-theme 미설정 시 폴백) ── */ :root, :root[data-theme="light"]{ color-scheme:light; /* 네이티브 컨트롤(날짜픽커·스크롤바) 라이트화 */ --bg:#FAF8F2; /* 페이퍼 배경 */ --surface:#FFFFFF; /* 카드 표면 */ --surface-2:#F3F0E8; /* 보조 표면(입력·서브패널) */ --ink:#1A1A1A; /* 본문 텍스트 */ --ink-head:#1F2A24; /* 제목(딥그린 잉크) */ --muted:#44423B; /* 보조 텍스트 */ --text-soft:#3D4A42; /* 약한 본문 */ --gold:#C9A84C; /* 골드 악센트(면·선) */ --gold-dim:rgba(201,168,76,0.55); /* 흐린 골드 */ --gold-text:#287042; /* 액센트 텍스트=초록 */ --green:#1E3A2B; /* 딥그린 */ --green-text:#1E3A2B; /* 표면 위 강조 숫자: 라이트=딥그린 유지 */ --green-deep:#16301F; --line:rgba(168,132,46,0.22); /* 헤어라인 */ --line-soft:rgba(168,132,46,0.14); /* 약한 라인 */ --gold-line:rgba(168,132,46,0.30); /* 골드 헤어라인 */ --err:#B0402F; /* 라이트 배경용 접근성 레드 */ --ok:#2E7D4F; /* 라이트 배경용 접근성 그린 */ --bar-bg:rgba(250,248,242,0.92); /* 스티키 상단바(반투명, backdrop-blur용) */ /* ── 상태 3종세트 (라이트) · bg=칩배경(over surface), line=테두리, ink=텍스트 ── */ --err-bg:color-mix(in srgb, var(--err) 8%, var(--surface)); --err-line:color-mix(in srgb, var(--err) 32%, transparent); --err-ink:var(--err); --ok-bg:color-mix(in srgb, var(--ok) 7%, var(--surface)); /* 7%: 배지 텍스트 --ok 대비 WCAG AA(4.6:1) 확보 */ --ok-line:color-mix(in srgb, var(--ok) 30%, transparent); --ok-ink:var(--ok); --warn:#B98A1E; /* 경고=골드 계열 텍스트(라이트) */ --warn-bg:color-mix(in srgb, var(--gold) 14%, var(--surface)); --warn-line:color-mix(in srgb, var(--gold) 40%, transparent); --warn-ink:#7A5E14; /* pending·입금대기·상담중 배지 텍스트(라이트) */ --info:#2F6D9E; --info-bg:color-mix(in srgb, var(--info) 8%, var(--surface)); --info-line:color-mix(in srgb, var(--info) 32%, transparent); --info-ink:#245B84; --purple:#6B5B9E; --purple-bg:color-mix(in srgb, var(--purple) 8%, var(--surface)); --purple-line:color-mix(in srgb, var(--purple) 32%, transparent); --purple-ink:#4A3D6B; --green-tint:color-mix(in srgb, var(--green) 6%, var(--surface)); /* 초록 6% 배경(mypage·account) */ --gold-deep:#A8853E; /* 진골드 stroke/아이콘(라이트) */ --shadow:rgba(31,42,36,0.12); /* 알파 그림자 */ --shadow-2:rgba(31,42,36,0.20); /* ── 별칭(기존 이름 → 표준) ── */ --text:var(--ink); --text-sec:var(--muted); --panel:var(--surface); --panel2:var(--surface-2); --card-bg:var(--surface); --card-border:var(--gold-line); --apricot:var(--err); --gold-soft:var(--gold-dim); --green-soft:var(--surface-2); --deep-green:var(--green); } /* ── DARK (admin 표준 그룹 원본값 기준) ── */ :root[data-theme="dark"]{ color-scheme:dark; /* 네이티브 컨트롤 다크화 (인라인 color-scheme:dark 대체) */ --bg:#0A0E0C; --surface:#0F1512; --surface-2:#16271D; --ink:#F5F2E6; --ink-head:#F5F2E6; --muted:#8b9389; --text-soft:#9AA39A; --gold:#C9A84C; --gold-dim:#9a823b; --gold-text:#7FB389; --green:#1E3A2B; --green-text:#7FC7A0; /* 표면 위 강조 숫자: 다크=밝은 세이지그린(대비 AA) */ --green-deep:#16271D; --line:#1f2a23; --line-soft:rgba(201,168,76,0.12); --gold-line:#1f2a23; --err:#E2887A; --ok:#7FB389; --bar-bg:rgba(10,14,12,0.92); /* 스티키 상단바(반투명) */ /* ── 상태 3종세트 (다크) ── */ --err-bg:color-mix(in srgb, var(--err) 20%, var(--surface)); --err-line:color-mix(in srgb, var(--err) 42%, transparent); --err-ink:#f3c9c2; /* 토스트/에러 텍스트(다크 원본톤) */ --ok-bg:color-mix(in srgb, var(--ok) 16%, var(--surface)); --ok-line:color-mix(in srgb, var(--ok) 40%, transparent); --ok-ink:var(--ok); --warn:#E8C86A; /* 경고=골드 계열 텍스트(다크) */ --warn-bg:color-mix(in srgb, var(--gold) 16%, var(--surface)); --warn-line:color-mix(in srgb, var(--gold) 40%, transparent); --warn-ink:#E8C86A; /* 배지 텍스트(다크 밝은 골드) */ --info:#8FC3E8; --info-bg:color-mix(in srgb, var(--info) 14%, var(--surface)); --info-line:color-mix(in srgb, var(--info) 40%, transparent); --info-ink:#8FC3E8; --purple:#B9A8E8; --purple-bg:color-mix(in srgb, var(--purple) 14%, var(--surface)); --purple-line:color-mix(in srgb, var(--purple) 40%, transparent); --purple-ink:#B9A8E8; --green-tint:var(--surface-2); /* 다크는 보조표면으로 흡수 */ --gold-deep:#C9A84C; /* 진골드 stroke(다크는 밝게) */ --shadow:rgba(0,0,0,0.35); --shadow-2:rgba(0,0,0,0.5); /* ── 별칭(light와 동일 매핑) ── */ --text:var(--ink); --text-sec:var(--muted); --panel:var(--surface); --panel2:var(--surface-2); --card-bg:var(--surface); --card-border:var(--gold-line); --apricot:var(--err); --gold-soft:var(--gold-dim); --green-soft:var(--surface-2); --deep-green:var(--green); } /* ── 테마 전환 순간 트랜지션 억제 (색이 반쯤 애니메이션되는 잔상 방지) ── */ :root.theme-switching *, :root.theme-switching *::before, :root.theme-switching *::after{ transition:none !important; } /* ── 접근성: 모션 최소화 선호 시 애니메이션·트랜지션 억제(prefers-reduced-motion) ── */ @media (prefers-reduced-motion: reduce){ *, *::before, *::after{ animation-duration:0.01ms !important; animation-iteration-count:1 !important; transition-duration:0.01ms !important; scroll-behavior:auto !important; } } /* ============================================================ 테마 토글 버튼 (모든 페이지 공용) · 고객 페이지: 우상단 고정(.theme-btn 기본) · 관리자 페이지: 상단 nav 안(.theme-btn.nav-theme → 흐름 배치) ============================================================ */ .theme-btn{ position:fixed; top:24px; right:70px; /* .corner-mark.tr(right:30px)과 겹치지 않게 어긋냄 */ z-index:40; width:38px; height:38px; border-radius:99px; background:var(--surface); border:1px solid var(--gold-line); color:var(--ink); font-size:16px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:border-color .2s var(--ease), background .2s var(--ease), transform .2s var(--ease); } .theme-btn:hover{ border-color:var(--gold); transform:translateY(-1px); } .theme-btn:focus-visible{ outline:1px solid var(--gold-soft); outline-offset:3px; } /* 관리자 상단바 안에 흐름 배치되는 변형 */ .theme-btn.nav-theme{ position:static; top:auto; right:auto; width:34px; height:34px; font-size:15px; }