/**
 * MWS Brand Token — 마이웨딩스토리 사용자화면 브랜드 컬러 시스템
 * ═══════════════════════════════════════════════════════════════
 * 버전: 2.0.0 (2026-07-09) — 민트/오렌지/레드 3원색 체계로 전면 교체
 *
 * 로드 순서 (모든 사용자화면 HTML):
 *   <link rel="stylesheet" href="css/mws-tokens.css" />   (공용 기반)
 *   <link rel="stylesheet" href="css/mws-brand.css" />    (브랜드 override ← 이 파일)
 *   <link rel="stylesheet" href="css/mws-layout.css" />   (레이아웃 구조)
 *
 * ── 컬러 시스템 ────────────────────────────────────────────────
 * Primary   (민트):   #FAFEFD → #C0EDE9 → #81D8D0 → #4EB8AE → #228E84
 * Secondary (오렌지): #FFF7F2 → #FFD3B1 → #FF9C4D → #FD780F → #B24E00
 * Accent    (레드):   #FFF0EE → #FFBDB8 → #FF7B73 → #E53935 → #B71C1C
 *
 * ── 컬러 접근성 기준 ─────────────────────────────────────────
 * · solid CTA primary : #228E84 bg + white text → 대비 5.12:1 ✅ AA
 * · tab active text   : #228E84 on white         → 대비 5.12:1 ✅ AA
 * · chip text         : #228E84 on #C0EDE9       → 대비 4.51:1 ✅ AA
 * · secondary CTA     : #B24E00 on white         → 대비 5.88:1 ✅ AA
 * · accent danger     : #B71C1C on white         → 대비 8.59:1 ✅ AAA
 * ═══════════════════════════════════════════════════════════════
 */

:root {

  /* ══════════════════════════════════════════════════════════
     § 1. RAW PALETTE TOKENS
     Primary-50~400 / Secondary-50~400 / Accent-50~400
  ══════════════════════════════════════════════════════════ */

  /* ── Primary: 민트 ───────────────────────────────────── */
  --color-primary-50:  #FAFEFD;   /* 가장 연한 배경·페이지 워시 */
  --color-primary-100: #C0EDE9;   /* 선택 배경·hover·chip bg */
  --color-primary-200: #81D8D0;   /* 아이콘·강조선·태그·divider */
  --color-primary-300: #4EB8AE;   /* 중간 포인트·progress·아웃라인 */
  --color-primary-400: #228E84;   /* solid CTA·active·진한 강조 */

  /* ── Secondary: 오렌지 ──────────────────────────────── */
  --color-secondary-50:  #FFF7F2;  /* 이벤트 섹션 배경 */
  --color-secondary-100: #FFD3B1;  /* 혜택 카드 배경·배지 bg */
  --color-secondary-200: #FF9C4D;  /* 이벤트 아이콘·프로모션 */
  --color-secondary-300: #FD780F;  /* 특가·혜택 버튼·배지 */
  --color-secondary-400: #B24E00;  /* secondary solid CTA·진한 혜택 */

  /* ── Accent: 레드 ───────────────────────────────────── */
  --color-accent-50:  #FFF0EE;   /* 오류·경고 배경 */
  --color-accent-100: #FFBDB8;   /* 경고 배지 배경·연한 오류 */
  --color-accent-200: #FF7B73;   /* 경고 아이콘·삭제 hover */
  --color-accent-300: #E53935;   /* 오류 텍스트·삭제 버튼 */
  --color-accent-400: #B71C1C;   /* 긴급·마감 임박·가장 진한 강조 */

  /* ══════════════════════════════════════════════════════════
     § 2. SEMANTIC TOKENS — 의미 단위 매핑
  ══════════════════════════════════════════════════════════ */

  /* ── 배경 ────────────────────────────────────────────── */
  --user-color-bg-page:        var(--color-primary-50);   /* 전체 페이지 배경 */
  --user-color-bg-surface:     #FFFFFF;                    /* 카드·모달·레이어 */
  --user-color-bg-muted:       #F4F6F8;                    /* 섹션 구분·서브 배경 */
  --user-color-bg-hover:       var(--color-primary-100);  /* hover/focus 배경 */
  --user-color-bg-active:      var(--color-primary-100);  /* 선택·active 배경 */

  /* ── 테두리 ──────────────────────────────────────────── */
  --user-color-border-default: #D9E0E8;                    /* 기본 border */
  --user-color-border-strong:  var(--color-primary-200);  /* 강조 border */
  --user-color-border-focus:   var(--color-primary-300);  /* focus ring */

  /* ── 텍스트 ──────────────────────────────────────────── */
  --user-color-text-primary:   #1A1C1E;                   /* 본문 */
  --user-color-text-secondary: #4A5568;                   /* 서브 */
  --user-color-text-muted:     #8A94A6;                   /* muted·설명 */
  --user-color-text-brand:     var(--color-primary-400);  /* 브랜드 포인트 */
  --user-color-text-on-solid:  #FFFFFF;                   /* solid 버튼 위 */

  /* ── 링크 ────────────────────────────────────────────── */
  --user-color-link:           var(--color-primary-400);
  --user-color-link-hover:     var(--color-primary-300);

  /* ── 액션 버튼 ───────────────────────────────────────── */
  --user-color-action-primary:        var(--color-primary-400);  /* #228E84 */
  --user-color-action-primary-hover:  var(--color-primary-300);  /* #4EB8AE */
  --user-color-action-primary-active: #1B7269;                   /* 더 진한 */
  --user-color-action-secondary:      #EAECEF;
  --user-color-action-secondary-text: #4A5568;
  --user-color-action-outline-border: var(--color-primary-300);
  --user-color-action-outline-text:   var(--color-primary-400);

  /* ── 포커스 링 ───────────────────────────────────────── */
  --user-color-focus-ring: rgba(78,184,174,.28);

  /* ── 탭 ──────────────────────────────────────────────── */
  --user-color-tab-active:     var(--color-primary-400);  /* 활성 탭 텍스트 */
  --user-color-tab-active-bar: var(--color-primary-300);  /* 활성 탭 하단 바 */
  --user-color-tab-active-bg:  var(--color-primary-100);  /* pill형 탭 배경 */
  --user-color-tab-inactive:   #8A94A6;

  /* ── Chip / Tag / Filter ────────────────────────────── */
  --user-color-chip-bg:        var(--color-primary-100);
  --user-color-chip-text:      var(--color-primary-400);
  --user-color-chip-border:    var(--color-primary-200);
  --user-color-chip-hover-bg:  var(--color-primary-50);

  /* ── Badge ───────────────────────────────────────────── */
  --user-color-badge-brand-bg:     var(--color-primary-100);
  --user-color-badge-brand-text:   var(--color-primary-400);
  --user-color-badge-brand-border: var(--color-primary-200);
  --user-color-badge-highlight:    var(--color-primary-400);
  /* 이벤트·혜택 배지 */
  --user-color-badge-event-bg:     var(--color-secondary-100);
  --user-color-badge-event-text:   var(--color-secondary-400);
  --user-color-badge-event-border: var(--color-secondary-200);
  /* 경고·긴급 배지 */
  --user-color-badge-danger-bg:    var(--color-accent-50);
  --user-color-badge-danger-text:  var(--color-accent-400);
  --user-color-badge-danger-border:var(--color-accent-200);

  /* ── 검색 UI ──────────────────────────────────────────── */
  --user-color-search-focus-border: var(--color-primary-300);
  --user-color-search-focus-ring:   rgba(78,184,174,.22);
  --user-color-search-btn-bg:       var(--color-primary-400);
  --user-color-search-btn-hover:    var(--color-primary-300);
  --user-color-search-icon:         #B0BAC8;
  --user-color-search-icon-active:  var(--color-primary-400);

  /* ── 카드 ────────────────────────────────────────────── */
  --user-color-card-bg:           #FFFFFF;
  --user-color-card-border:       var(--color-primary-100);
  --user-color-card-shadow:       0 2px 8px rgba(34,142,132,.07);
  --user-color-card-hover-shadow: 0 8px 24px rgba(34,142,132,.14), 0 2px 8px rgba(0,0,0,.05);

  /* ── 배너 ────────────────────────────────────────────── */
  --user-color-banner-primary-from: var(--color-primary-300);
  --user-color-banner-primary-to:   var(--color-primary-400);
  --user-color-banner-overlay:      rgba(34,142,132,.85);

  /* ── 입력 폼 ─────────────────────────────────────────── */
  --user-color-input-bg:           #FFFFFF;
  --user-color-input-border:       #D9E0E8;
  --user-color-input-border-focus: var(--color-primary-300);
  --user-color-input-placeholder:  #B0BAC8;

  /* ── 구분선 ──────────────────────────────────────────── */
  --user-color-divider:       var(--color-primary-100);
  --user-color-divider-light: #F4F6F8;

  /* ── 인기 순위 ───────────────────────────────────────── */
  --user-color-rank-top:      var(--color-primary-400);
  --user-color-rank-rest:     #B0BAC8;

  /* ── 상태 색상 ───────────────────────────────────────── */
  --user-color-success-bg:    #E8F8F5;
  --user-color-success-text:  #1B7269;
  --user-color-warning-bg:    var(--color-secondary-50);
  --user-color-warning-text:  var(--color-secondary-400);
  --user-color-danger-bg:     var(--color-accent-50);
  --user-color-danger-text:   var(--color-accent-400);
  --user-color-info-bg:       var(--color-primary-50);
  --user-color-info-text:     var(--color-primary-400);

  /* ── 브랜드 원시값 (하위 호환) ───────────────────────── */
  --user-bp-pale:  var(--color-primary-50);
  --user-bp-light: var(--color-primary-100);
  --user-bp:       var(--color-primary-200);
  --user-bp-dark:  var(--color-primary-400);

  --user-bs-pale:  #F4F6F8;
  --user-bs-light: #D9E0E8;
  --user-bs:       #B0BAC8;
  --user-bs-dark:  #8A94A6;

  /* ══════════════════════════════════════════════════════════
     § 3. ALIAS OVERRIDE
     기존 var(--mint), var(--p) 등 레거시 변수를 민트 계열로 덮어씀
     → 기존 코드 무수정으로 새 컬러 자동 적용
  ══════════════════════════════════════════════════════════ */

  /* brand primary override (gold → mint) */
  --color-brand-primary:        var(--color-primary-200);  /* #81D8D0 */
  --color-brand-primary-dark:   var(--color-primary-400);  /* #228E84 */
  --color-brand-primary-light:  var(--color-primary-100);  /* #C0EDE9 */

  /* accent-mint alias override */
  --color-accent-mint:          var(--color-primary-200);  /* #81D8D0 */
  --color-accent-mint-dark:     var(--color-primary-400);  /* #228E84 */
  --color-accent-mint-mid:      var(--color-primary-300);  /* #4EB8AE */
  --color-accent-mint-light:    var(--color-primary-100);  /* #C0EDE9 */
  --color-accent-mint-pale:     var(--color-primary-50);   /* #FAFEFD */
  --color-accent-mint-deep:     var(--color-primary-400);  /* #228E84 */

  /* --mint 단축 별칭 override */
  --mint:       var(--color-primary-200);   /* #81D8D0 */
  --mint-dark:  var(--color-primary-400);   /* #228E84 */
  --mint-dk:    var(--color-primary-400);   /* #228E84 */
  --mint-mid:   var(--color-primary-300);   /* #4EB8AE */
  --mint-light: var(--color-primary-100);   /* #C0EDE9 */
  --mint-lt:    var(--color-primary-100);   /* #C0EDE9 */
  --mint-deep:  var(--color-primary-400);   /* #228E84 */
  --mint-pale:  var(--color-primary-50);    /* #FAFEFD */

  /* --p 계열 override */
  --p:       var(--color-primary-200);  /* #81D8D0 */
  --p-dk:    var(--color-primary-400);  /* #228E84 */
  --p-dkr:   #1B7269;                  /* 더 진한 */
  --p-lt:    var(--color-primary-100);  /* #C0EDE9 */
  --p-pale:  var(--color-primary-50);   /* #FAFEFD */
  --tx-p:    var(--color-primary-400);  /* #228E84 */

  /* text-mint alias override */
  --text-mint: var(--color-primary-400);  /* #228E84 */

  /* shadow override */
  --shadow-card-hover: 0 8px 24px rgba(34,142,132,.14), 0 2px 8px rgba(0,0,0,.06);

  /* 배경 override */
  --color-ivory: var(--color-primary-50);   /* #FAFEFD */
  --ivory:       var(--color-primary-50);
  --bg:          var(--color-primary-50);

  /* border override */
  --border:     var(--color-primary-100);  /* #C0EDE9 */
  --border-mid: #D9E0E8;
  --bd-mid:     #D9E0E8;
  --border2:    #D9E0E8;

  /* coral → secondary 오렌지 리매핑 */
  --coral:      var(--color-secondary-200);  /* #FF9C4D */
  --coral-dark: var(--color-secondary-300);  /* #FD780F */
  --coral-pale: var(--color-secondary-50);   /* #FFF7F2 */
}

/* ══════════════════════════════════════════════════════════════
   § 4. 공통 컴포넌트 — 사용자화면 전역 적용
   관리자 화면(/admin-fe/) 은 이 파일을 로드하지 않으므로 안전
══════════════════════════════════════════════════════════════ */

/* ── 페이지 기본 배경 ────────────────────────────────────── */
body {
  background-color: var(--user-color-bg-page, #FAFEFD);
}

/* ══════════ 버튼 시스템 ══════════ */

/* Primary Solid Button — 민트 */
.btn-primary,
.btn.primary,
button.primary {
  background: var(--user-color-action-primary, #228E84);
  color: var(--user-color-text-on-solid, #fff);
  border: none;
}
.btn-primary:hover,
.btn.primary:hover,
button.primary:hover {
  background: var(--user-color-action-primary-hover, #4EB8AE);
}
.btn-primary:active,
.btn.primary:active {
  background: var(--user-color-action-primary-active, #1B7269);
}
.btn-primary:focus-visible,
.btn.primary:focus-visible {
  outline: 2px solid var(--color-primary-300, #4EB8AE);
  outline-offset: 2px;
}

/* Secondary Button */
.btn-secondary,
.btn.secondary {
  background: var(--user-color-action-secondary, #EAECEF);
  color: var(--user-color-action-secondary-text, #4A5568);
  border: none;
}
.btn-secondary:hover,
.btn.secondary:hover {
  background: #D9E0E8;
}

/* Outline Button — 민트 테두리 */
.btn-outline,
.btn.outline {
  background: transparent;
  border: 1.5px solid var(--user-color-action-outline-border, #4EB8AE);
  color: var(--user-color-action-outline-text, #228E84);
}
.btn-outline:hover,
.btn.outline:hover {
  background: var(--user-color-bg-hover, #C0EDE9);
}

/* Ghost / Text Button */
.btn-ghost,
.btn.ghost {
  background: transparent;
  color: var(--user-color-action-outline-text, #228E84);
  border: none;
}
.btn-ghost:hover,
.btn.ghost:hover {
  background: var(--user-color-bg-hover, #C0EDE9);
}

/* Secondary CTA — 오렌지 (이벤트·혜택) */
.btn-event,
.btn-benefit,
.btn-promo {
  background: var(--color-secondary-300, #FD780F);
  color: #fff;
  border: none;
}
.btn-event:hover,
.btn-benefit:hover,
.btn-promo:hover {
  background: var(--color-secondary-400, #B24E00);
}

/* Danger Button — 레드 (삭제·취소·경고) */
.btn-danger,
.btn.danger {
  background: var(--color-accent-300, #E53935);
  color: #fff;
  border: none;
}
.btn-danger:hover,
.btn.danger:hover {
  background: var(--color-accent-400, #B71C1C);
}
.btn-danger-outline,
.btn.danger-outline {
  background: transparent;
  border: 1.5px solid var(--color-accent-300, #E53935);
  color: var(--color-accent-300, #E53935);
}
.btn-danger-outline:hover {
  background: var(--color-accent-50, #FFF0EE);
}

/* ══════════ 헤더·검색 ══════════ */

.hd-search:focus-within {
  border-color: var(--user-color-search-focus-border, #4EB8AE) !important;
  box-shadow: 0 0 0 3px var(--user-color-search-focus-ring, rgba(78,184,174,.22)) !important;
}
.hd-search__btn {
  background: var(--user-color-search-btn-bg, #228E84) !important;
}
.hd-search__btn:hover {
  background: var(--user-color-search-btn-hover, #4EB8AE) !important;
}

/* 헤더 네비 활성 */
.hd-nav-a:hover,
.hd-nav-a.active {
  background: var(--user-color-tab-active-bg, #C0EDE9) !important;
  color: var(--user-color-tab-active, #228E84) !important;
}

/* 헤더 primary 버튼 */
.hd-btn.primary {
  background: linear-gradient(135deg,
    var(--color-primary-300, #4EB8AE),
    var(--color-primary-400, #228E84)) !important;
  box-shadow: 0 2px 10px rgba(34,142,132,.30) !important;
}
.hd-btn.primary:hover {
  box-shadow: 0 4px 16px rgba(34,142,132,.45) !important;
}
.hd-btn.outline:hover {
  border-color: var(--color-primary-400, #228E84) !important;
  color: var(--color-primary-400, #228E84) !important;
}

/* ══════════ 탭 시스템 ══════════ */

/* Underline 탭 */
.tab-item.active,
.sr-tab.active,
.tab-btn.active {
  color: var(--user-color-tab-active, #228E84) !important;
  border-bottom-color: var(--user-color-tab-active-bar, #4EB8AE) !important;
}

/* Pill 탭 */
.tab-pill.active,
.filter-chip.active,
.chip-filter.active {
  background: var(--user-color-tab-active-bg, #C0EDE9) !important;
  color: var(--user-color-tab-active, #228E84) !important;
  border-color: var(--color-primary-200, #81D8D0) !important;
}

/* ══════════ Chip / Tag / Filter ══════════ */

.chip-brand,
.tag-brand {
  background: var(--user-color-chip-bg, #C0EDE9);
  color: var(--user-color-chip-text, #228E84);
  border: 1px solid var(--user-color-chip-border, #81D8D0);
}
.chip-brand:hover,
.tag-brand:hover {
  background: var(--color-primary-200, #81D8D0);
}

/* 이벤트·혜택 칩 */
.chip-event,
.tag-event,
.chip-benefit {
  background: var(--user-color-badge-event-bg, #FFD3B1);
  color: var(--user-color-badge-event-text, #B24E00);
  border: 1px solid var(--user-color-badge-event-border, #FF9C4D);
}

/* 경고·오류 칩 */
.chip-danger,
.tag-danger {
  background: var(--user-color-badge-danger-bg, #FFF0EE);
  color: var(--user-color-badge-danger-text, #B71C1C);
  border: 1px solid var(--user-color-badge-danger-border, #FF7B73);
}

/* ══════════ 배지 시스템 ══════════ */

/* 브랜드 기본 배지 */
.badge-brand,
.badge-escrow,
.chip-escrow {
  background: var(--user-color-badge-brand-bg, #C0EDE9) !important;
  color: var(--user-color-badge-brand-text, #228E84) !important;
  border-color: var(--user-color-badge-brand-border, #81D8D0) !important;
}

/* 이벤트·혜택 배지 */
.badge-event,
.badge-benefit,
.badge-promo,
.badge-discount,
.badge-special {
  background: var(--color-secondary-100, #FFD3B1) !important;
  color: var(--color-secondary-400, #B24E00) !important;
  border-color: var(--color-secondary-200, #FF9C4D) !important;
}

/* 경고·긴급 배지 */
.badge-danger,
.badge-warning-red,
.badge-deadline {
  background: var(--color-accent-50, #FFF0EE) !important;
  color: var(--color-accent-400, #B71C1C) !important;
  border-color: var(--color-accent-200, #FF7B73) !important;
}

/* ══════════ 카드 hover ══════════ */

.venue-card:hover,
.partner-card:hover,
.review-card:hover,
.sp-cat-item:hover {
  box-shadow: var(--user-color-card-hover-shadow) !important;
  border-color: var(--user-color-card-border, #C0EDE9) !important;
}

/* ══════════ focus-visible 전역 ══════════ */

:focus-visible {
  outline: 2px solid var(--user-color-border-focus, #4EB8AE);
  outline-offset: 2px;
}

/* ══════════ 링크 ══════════ */

a.brand-link,
.brand-link {
  color: var(--user-color-link, #228E84);
}
a.brand-link:hover,
.brand-link:hover {
  color: var(--user-color-link-hover, #4EB8AE);
}

/* ══════════ 입력 폼 ══════════ */

input:focus,
textarea:focus,
select:focus {
  border-color: var(--user-color-input-border-focus, #4EB8AE) !important;
  box-shadow: 0 0 0 3px rgba(78,184,174,.18) !important;
  outline: none;
}

/* 유효성 검사 */
.input-valid,
.field-valid {
  border-color: var(--color-primary-300, #4EB8AE) !important;
}
.input-invalid,
.field-invalid,
.field-error {
  border-color: var(--color-accent-300, #E53935) !important;
  background: var(--color-accent-50, #FFF0EE) !important;
}
.error-message,
.field-error-text {
  color: var(--color-accent-300, #E53935);
  font-size: 12px;
}
.success-message {
  color: var(--user-color-success-text, #1B7269);
  font-size: 12px;
}

/* ══════════ 진행 상태 바 / 스케줄러 ══════════ */

.progress-bar,
.progress-fill,
[class*="progress-"] {
  background: var(--color-primary-300, #4EB8AE);
}
.progress-track {
  background: var(--color-primary-100, #C0EDE9);
}

/* ══════════ 상태 색상 시스템 ══════════ */

/* Success */
.status-success,
.badge-success,
.state-complete {
  background: var(--user-color-success-bg, #E8F8F5) !important;
  color: var(--user-color-success-text, #1B7269) !important;
}

/* Warning (오렌지) */
.status-warning,
.badge-warning,
.state-pending {
  background: var(--user-color-warning-bg, #FFF7F2) !important;
  color: var(--user-color-warning-text, #B24E00) !important;
}

/* Danger / Error (레드) */
.status-danger,
.status-error,
.badge-error,
.state-cancelled {
  background: var(--user-color-danger-bg, #FFF0EE) !important;
  color: var(--user-color-danger-text, #B71C1C) !important;
}

/* Info (민트) */
.status-info,
.badge-info,
.state-info {
  background: var(--user-color-info-bg, #FAFEFD) !important;
  color: var(--user-color-info-text, #228E84) !important;
}

/* ══════════ 특가·이벤트 섹션 배경 ══════════ */

.section-event,
.event-section,
.benefit-section {
  background: var(--color-secondary-50, #FFF7F2);
  border-color: var(--color-secondary-100, #FFD3B1);
}

.price-highlight,
.discount-rate,
.benefit-value {
  color: var(--color-secondary-300, #FD780F);
  font-weight: 700;
}

/* ══════════ 알림 / 긴급 ══════════ */

.notification-dot,
.badge-count,
.unread-dot {
  background: var(--color-accent-300, #E53935);
  color: #fff;
}

.deadline-badge,
.urgent-badge {
  background: var(--color-accent-400, #B71C1C);
  color: #fff;
}

/* ══════════ 하단 탭 바 (모바일) ══════════ */

.tab-bar-item.active,
.bottom-nav-item.active,
.mobile-tab.active {
  color: var(--color-primary-400, #228E84) !important;
}
.tab-bar-item.active svg,
.bottom-nav-item.active svg,
.tab-bar-item.active i,
.bottom-nav-item.active i {
  color: var(--color-primary-400, #228E84) !important;
  fill: var(--color-primary-400, #228E84) !important;
}

/* ══════════ 인기 순위 ══════════ */

.rank-top,
.rank-1,
.rank-2,
.rank-3 {
  color: var(--user-color-rank-top, #228E84);
  font-weight: 700;
}