/**
* MWS Design Token — CSS Variables (Runtime Layer)
* ═══════════════════════════════════════════════════════════════
* Single source of truth for all HTML pages.
* Mirrors /src/styles/tokens/*.ts so that both Next.js components
* and legacy HTML pages share identical values.
*
* Load order in every HTML page:
* (from /mobile/)
* (from root)
*
*
* @version 1.2.1 (2026-06-18) - 기자영역 23 tokens 추가
* ── Alias Layer 안내 ────────────────────────────────────────
* 파일별 인라인 :root{}에서 사용 중인 레거시 변수명을
* 시맨틱 토큰으로 매핑한 역방향 호환 별칭입니다.
* 인라인 중복 선언을 제거한 뒤에도 이 별칭이 폴백으로 작동합니다.
* ═══════════════════════════════════════════════════════════════
*/
:root {
/* ── § 2.0 PALETTE TOKENS — 민트/오렌지/레드 (2026-07-09) ── */
/* Primary: 민트 */
--color-primary-50: #FAFEFD;
--color-primary-100: #C0EDE9;
--color-primary-200: #81D8D0;
--color-primary-300: #4EB8AE;
--color-primary-400: #228E84;
/* Secondary: 오렌지 */
--color-secondary-50: #FFF7F2;
--color-secondary-100: #FFD3B1;
--color-secondary-200: #FF9C4D;
--color-secondary-300: #FD780F;
--color-secondary-400: #B24E00;
/* Accent: 레드 */
--color-accent-50: #FFF0EE;
--color-accent-100: #FFBDB8;
--color-accent-200: #FF7B73;
--color-accent-300: #E53935;
--color-accent-400: #B71C1C;
/* ── Brand (하위 호환 별칭) ─────────────────────────────── */
--color-brand-primary: #81D8D0; /* 민트 (구골드:#CEB588) */
--color-brand-primary-dark: #228E84; /* 민트 딥 (구골드:#A8884E) */
--color-brand-primary-light: #C0EDE9; /* 민트 연한 (구골드:#EADFCB) */
--color-brand-secondary: #FF9C4D; /* 오렌지 (구coral:#FFB3A7) */
--color-brand-secondary-dark: #FD780F; /* 오렌지 진한 (구:#e89080) */
--color-brand-secondary-light:#FFF7F2; /* 오렌지 연한 (구:#fff5f3) */
/* ── Accent-Mint (하위 호환) ────────────────────────────── */
--color-accent-mint: #81D8D0; /* 민트 200 */
--color-accent-mint-dark: #228E84; /* 민트 400 */
--color-accent-mint-mid: #4EB8AE; /* 민트 300 */
--color-accent-mint-light: #C0EDE9; /* 민트 100 */
--color-accent-mint-pale: #FAFEFD; /* 민트 50 */
--color-accent-mint-deep: #228E84; /* 민트 400 */
--color-accent-teal: #0D9488; /* bride-planner / family-support */
--color-accent-teal-light: #F0FDFA;
--color-accent-teal-dark: #0F766E;
--color-accent-warm: #f59e0b;
--color-accent-warm-dark: #D97706;
--color-accent-warm-light: #FEF3C7;
--color-accent-coral: #FFB3A7; /* 실배포값 (구:#F97316) */
--color-accent-coral-light: #fff5f3;
--color-accent-purple: #7C3AED;
--color-accent-purple-light: #F3E8FF;
--color-accent-rose: #E88FA0; /* bride-planner --rose */
--color-accent-rose-deep: #BE185D; /* bride-planner --rose-deep */
--color-accent-rose-mid: #f0a0b0; /* bride-planner --rose-mid */
--color-accent-rose-light: #FCE7F3;
/* + v1.2.1 기자영역 / 신청 상태 (cyan, magenta) */
--color-accent-cyan: #0891B2; /* pending 기본색 (cyan-600) */
--color-accent-cyan-light: #CFFAFE; /* cyan-100 */
--color-accent-cyan-dark: #0E7490; /* cyan-700 hover/active */
--color-accent-magenta: #EC4899; /* NEW/하이라이트 (pink-500) */
--color-accent-magenta-light: #FCE7F3; /* pink-100 (= --badge-event-bg) */
--color-accent-magenta-dark: #BE185D; /* pink-700 (= --color-accent-rose-deep) */
/* ── Neutral ─────────────────────────────────────────────── */
--color-neutral-50: #F8FAFC;
--color-neutral-100: #F1F5F9;
--color-neutral-200: #E2E8F0;
--color-neutral-300: #CBD5E1;
--color-neutral-400: #94A3B8;
--color-neutral-500: #64748B;
--color-neutral-600: #475569;
--color-neutral-700: #334155;
--color-neutral-800: #1E293B;
--color-neutral-900: #0F172A;
--color-white: #FFFFFF;
--color-ivory: #FAFAF8;
/* ── Semantic ────────────────────────────────────────────── */
--color-success: #16A34A;
--color-success-light: #DCFCE7;
--color-success-border: #86EFAC;
--color-warning: #D97706;
--color-warning-light: #FEF3C7;
--color-warning-border: #FDE68A;
--color-error: #EF4444;
--color-error-light: #FEE2E2;
--color-error-border: #FCA5A5;
--color-info: #0EA5E9;
--color-info-light: #E0F2FE;
--color-info-border: #7DD3FC;
/* + v1.2.1 기자 신청 상태 (pending / rejected / new) — DELTA 원본 --status-* → --color-* 변환 */
--color-pending: #0891B2; /* 심사 진행 중 텍스트 (= --color-accent-cyan) */
--color-pending-bg: #ECFEFF; /* cyan-50 */
--color-pending-border: #A5F3FC; /* cyan-200 */
--color-rejected: #DC2626; /* 신청 반려 (red-600, = --ruby) */
--color-rejected-bg: #FEE2E2; /* = --color-error-light */
--color-rejected-border: #FCA5A5; /* = --color-error-border */
--color-new: #EC4899; /* NEW 배지 텍스트 — Large/Bold 전용 (대비 3.18) */
--color-new-bg: #FCE7F3; /* = --color-accent-magenta-light */
--color-new-border: #F9A8D4; /* pink-300 */
/* ── Badge ──────────────────────────────────────────────── */
--badge-jeongchal-bg: #FEF3C7;
--badge-jeongchal-text: #92400E;
--badge-jeongchal-border: #FDE68A;
--badge-escrow-bg: #C0EDE9; /* 민트 100 (구골드:#EADFCB) */
--badge-escrow-text: #228E84; /* 민트 400 (구골드:#A8884E) */
--badge-escrow-border: #81D8D0; /* 민트 200 (구골드:#CEB588) */
--badge-event-bg: #FFD3B1; /* 오렌지 100 (구:#FCE7F3) */
--badge-event-text: #B24E00; /* 오렌지 400 (구:#9D174D) */
--badge-event-border: #FF9C4D; /* 오렌지 200 (구:#F9A8D4) */
--badge-special-bg: #FFF7F2; /* 오렌지 50 (구:#fff5f3) */
--badge-special-text: #B24E00; /* 오렌지 400 (구:#C2410C) */
--badge-special-border: #FFD3B1; /* 오렌지 100 (구:#FED7AA) */
--badge-new-bg: #EFF6FF;
--badge-new-text: #1D4ED8;
--badge-new-border: #BFDBFE;
--badge-hot-bg: #FEE2E2;
--badge-hot-text: #B91C1C;
--badge-hot-border: #FCA5A5;
--badge-pt-bg: #F3E8FF;
--badge-pt-text: #6D28D9;
--badge-pt-border: #DDD6FE;
/* ── Overlay ─────────────────────────────────────────────── */
--color-overlay-modal: rgba(0,0,0,0.5);
--color-overlay-light: rgba(0,0,0,0.2);
/* ── Typography ─────────────────────────────────────────── */
--font-family-base: 'Noto Sans KR', sans-serif;
--font-family-display:'Noto Serif KR', serif;
--font-family-mono: 'Fira Code', 'Consolas', monospace;
--font-size-2xs: 10px;
--font-size-xs: 11px;
--font-size-sm: 12px;
--font-size-md: 13px;
--font-size-base: 14px;
--font-size-lg: 15px;
--font-size-xl: 16px;
--font-size-2xl: 18px;
--font-size-3xl: 20px;
--font-size-4xl: 24px;
--font-size-5xl: 30px;
--font-size-6xl: 40px;
--font-weight-light: 300;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--font-weight-extrabold: 800;
--line-height-tight: 1.2;
--line-height-snug: 1.375;
--line-height-normal: 1.5;
--line-height-relaxed: 1.625;
--line-height-loose: 1.75;
/* ── Spacing ─────────────────────────────────────────────── */
--spacing-0: 0px;
--spacing-xs: 4px;
--spacing-sm: 8px;
--spacing-md: 12px;
--spacing-base: 16px;
--spacing-lg: 24px;
--spacing-xl: 32px;
--spacing-2xl: 48px;
--spacing-3xl: 64px;
--spacing-4xl: 80px;
--spacing-5xl: 96px;
--spacing-6xl: 120px;
/* ── Border Radius ───────────────────────────────────────── */
--radius-none: 0px;
--radius-xs: 4px;
--radius-sm: 8px;
--radius-md: 12px;
--radius-lg: 16px;
--radius-xl: 24px;
--radius-2xl: 32px;
--radius-full: 9999px;
/* ── Shadow ──────────────────────────────────────────────── */
--shadow-card: 0 2px 8px rgba(0,0,0,.07);
--shadow-card-hover: 0 8px 24px rgba(206,181,136,.20), 0 2px 8px rgba(0,0,0,.06); /* 골드 섀도 (구민트:rgba(129,216,208)) */
--shadow-popover: 0 8px 24px rgba(0,0,0,.12), 0 2px 8px rgba(0,0,0,.06);
--shadow-modal: 0 20px 60px rgba(0,0,0,.2), 0 8px 24px rgba(0,0,0,.1);
--shadow-toast: 0 4px 16px rgba(0,0,0,.1), 0 1px 4px rgba(0,0,0,.06);
--shadow-sticky-bar-up: 0 -2px 12px rgba(0,0,0,.08);
--shadow-sm: 0 2px 8px rgba(0,0,0,.07); /* venue 계열 별칭 */
/* ── Container ───────────────────────────────────────────── */
--container-user-lg: 1080px;
--container-user-md: 1080px;
--container-user-sm: 1080px;
--container-mobile-width: 100%;
--container-mobile-padding-x: 16px;
/* ══════════════════════════════════════════════════════════
* ── Alias Layer (역방향 호환 별칭) ─────────────────────────
* 인라인 :root{} 에서 사용 중인 레거시 변수명.
* 시맨틱 토큰 정의 이후에 선언되어 최우선 적용됩니다.
* 파일별 인라인 중복 선언을 제거하더라도 즉시 깨지지 않습니다.
* ══════════════════════════════════════════════════════════ */
/* mint 계열 (그룹1·2·3·4 공통) */
--mint: #CEB588; /* 골드 브랜드 토큰 (구민트:#81D8D0) */
--mint-dark: #A8884E; /* 골드 브랜드 토큰 (구민트:#5ec4bb) */
--mint-dk: #A8884E; /* 골드 브랜드 토큰 (구민트:#5ec4bb) */
--mint-mid: #C4A870; /* 골드 미드톤 (구민트:#6dcec5) */
--mint-light: #EADFCB; /* 골드 연한 (구민트:#e8f9f8) */
--mint-lt: #EADFCB; /* 골드 연한 (구민트:#e8f9f8) */
--mint-deep: #A8884E; /* 골드 딥 (구민트:#3aa8a0) */
--mint-pale: #FFFAF2; /* 골드 페일 (구민트:#f2fbfa) */
/* teal 계열 (그룹3 — bride-planner · family-support) */
--teal: #0D9488;
--teal-lt: #F0FDFA;
--teal-dk: #0F766E;
/* coral 계열 */
--coral: #FFB3A7;
--coral-light: #fff5f3;
/* gold */
--gold: #f59e0b;
/* rose 계열 (bride-planner) */
--rose: #E88FA0;
--rose-deep: #BE185D;
--rose-mid: #f0a0b0;
/* 공통 유틸리티 (그룹4 venue 모바일 · 기타) */
--bg: #f9fafb;
--white: #fff;
--border: #eaecef;
--border-mid: #dde1e7;
--text-primary: #1a1c1e;
--text-secondary: #4a5568;
--text-muted: #8a94a6;
/* radius 단축 별칭 (venue 모바일) */
--r8: 8px;
--r12: 12px;
--r16: 16px;
--r-full:9999px;
/* shadow 단축 별칭 (venue 모바일) */
--sh-sm: 0 2px 8px rgba(0,0,0,.07);
/* layout 단축 별칭 (venue 모바일) */
--page-pad: 16px;
/* ── Motion / Transition ────────────────────────────────── */
--motion-fast: 100ms;
--motion-base: 200ms;
--motion-slow: 350ms;
--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
--ease-decel: cubic-bezier(0, 0, 0.2, 1);
--ease-accel: cubic-bezier(0.4, 0, 1, 1);
/* 단축 별칭 (페이지별 var(--transition), var(--tr) 폴백) */
--transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
--tr: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
--tr-fast: all 0.14s cubic-bezier(0.4, 0, 0.2, 1);
--tr-slow: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
/* ── Layout / Max Width ──────────────────────────────────── */
--max-w: 1280px;
--mw: 1280px;
/* ── Breakpoints (reference only — used in @media rules) ── */
/* --bp-mobile: 0px */
/* --bp-tablet: 768px */
/* --bp-desktop: 1024px */
/* --bp-wide: 1440px */
/* ── Status / State (알림·예약 상태칩용) ─────────────────── */
--status-active-bg: #eff6ff;
--status-active-text: #1d4ed8;
--status-active-border: #bfdbfe;
--status-done-bg: #f0fdf4;
--status-done-text: #16a34a;
--status-done-border: #bbf7d0;
--status-warn-bg: #fef3c7;
--status-warn-text: #92640a;
--status-warn-border: #fde68a;
--status-info-bg: #eff6ff;
--status-info-text: #1d4ed8;
--status-info-border: #bfdbfe;
/* ── Extended Alias (파일별 인라인 :root 제거 지원) ──────── */
--font-main: 'Noto Sans KR', sans-serif;
--font-en: 'Playfair Display', serif;
--ivory: #fafaf8;
--bg: #f9fafb;
--white: #fff;
--border: #eaecef;
--border-mid: #dde1e7;
--bd-mid: #dde1e7;
--text-primary: #1a1c1e;
--text-secondary: #4a5568;
--text-muted: #8a94a6;
--text-mint: #A8884E; /* 골드 브랜드 토큰 (구민트:#3aa8a0) */
--text-coral: #c97b6e;
--tx: #1a1c1e;
--tx2: #4a5568;
--tx3: #8a94a6;
--err: #dc2626;
--success: #16a34a;
--warn-bg: #fef3c7;
--warn-text: #92640a;
--warn-border: #fde68a;
--info-bg: #eff6ff;
--info-text: #1d4ed8;
--info-border: #bfdbfe;
--coral-pale: #fff0ee;
--coral-dark: #e89080;
--gold-pale: #fef3c7;
--gold-deep: #92640a;
--rose-pale: #fff0f3;
--rose-deep: #b5566b;
--peach: #FFDAB9;
--peach-pale: #fff8f0;
--lavender: #c4b5e8;
--lavender-pale: #f4f1fc;
--sh-xs: 0 1px 8px rgba(0,0,0,.05);
--sh-sm: 0 2px 8px rgba(0,0,0,.07);
--shadow-sm: 0 1px 4px rgba(0,0,0,.06);
--shadow-md: 0 4px 16px rgba(0,0,0,.09), 0 1px 4px rgba(0,0,0,.05);
/* ── 누락 별칭 보완 (venue-special-offers · venue-detail 등 사용) ──
* 기존 인라인 :root{}를 주석화한 뒤 아래 변수들이 미등록 상태였음.
* 모든 파일이 이 토큰 파일 하나만으로 동작하도록 추가.
* ──────────────────────────────────────────────────────────── */
/* primary (mint) 단축 별칭 */
--p: #CEB588; /* 골드 브랜드 토큰 (구민트:#81D8D0) */
--p-dk: #A8884E; /* 골드 브랜드 토큰 (구민트:#5EC4BB) */
--p-dkr: #8A6A35; /* 골드 딥 (구민트:#3EADA4) */
--p-lt: #EADFCB; /* 골드 연한 (구민트:#e8f9f8) */
--p-pale: #FFFAF2; /* 골드 페일 (구민트:#f2fbfa) */
--tx-p: #A8884E; /* 골드 브랜드 토큰 (구민트:#3aa8a0) */
/* secondary (coral/salmon) 단축 별칭 */
--s: #FFB3A7; /* = --color-brand-secondary */
--s-dk: #e89080;
--s-lt: #fff5f3;
/* accent 단축 별칭 */
--ruby: #dc2626; /* 잔여타임·remaining 계열 — red-600 */
--ruby-lt: #fee2e2; /* red-100 */
--amber: #f59e0b; /* = --gold */
--amber-lt: #fef3c7;
--emerald: #10b981; /* offseason·비수기 계열 */
--emerald-lt: #d1fae5;
--violet: #7C3AED; /* earlybird 계열 = --color-accent-purple */
--violet-lt: #F3E8FF; /* = --color-accent-purple-light */
/* gold 계열 단축 별칭 보완 */
--gold-lt: #fef3c7; /* = --amber-lt */
--gold-dk: #92640a;
--gold-pale: #fffbeb;
/* text 단축 별칭 보완 */
--tx4: #c0c7d0; /* 최약 텍스트 / 취소선 */
/* border 단축 별칭 보완 */
--border2: #dde1e7; /* = --border-mid */
--bg2: #f1f5f9; /* 카드 인너 배경 등 */
/* border-radius 단축 별칭 보완 */
--r4: 4px;
--r6: 6px;
--r8: 8px;
--r-sm: 6px;
--r-md: 10px;
--r12: 12px;
--r16: 16px;
--r20: 20px;
--r-lg: 16px;
--r-xl: 24px;
--rf: 9999px; /* = --radius-full */
--r-full: 9999px;
/* shadow 단축 별칭 보완 */
--sh-lg: 0 12px 32px rgba(0,0,0,.12), 0 4px 12px rgba(0,0,0,.07);
--sh-xl: 0 20px 48px rgba(0,0,0,.15), 0 8px 24px rgba(0,0,0,.08);
/* ── Theme Alias (기자영역 / 편집실) — v1.2.1 신규 ──────── */
--theme-reporter: #7C3AED; /* 기자영역 주조색 (= --color-accent-purple) */
--theme-reporter-light: #F4F1FC; /* hover 배경 */
--theme-reporter-pale: #FDF4FF; /* 섹션 배경 그라데이션 시작 (fuchsia-50) */
--theme-reporter-deep: #5B21B6; /* active 강조 (purple-800) */
--theme-editor: #C2410C; /* 편집실 주조색 (= --badge-special-text, orange-700) */
--theme-editor-light: #FFEDD5; /* hover/active 배경 (orange-100) */
--theme-editor-pale: #FFF7ED; /* 섹션 배경 그라데이션 시작 (orange-50) */
--theme-editor-deep: #9A3412; /* active 텍스트 (orange-800) */
}