/*
 * 베베폼플러스 디자인 토큰 — docs/20-design-system/design-system.md §1 이 원본이다.
 * 값을 바꾸면 문서와 함께 바꾼다(dev/check-tokens-vs-doc.mjs 가 이름·값을 비교한다).
 * 기기별 값은 <html data-device="pc|mo"> 로 전환한다(서버가 PC/MO JSP 를 고르므로 폭 미디어쿼리로 분기하지 않는다).
 */
:root {
  /* ── 1-1. 색: 브랜드·액션 ───────────────────────────── */
  --bp-color-brand: #BE3F5A;
  --bp-color-brand-hover: #A8344D;
  --bp-color-brand-text: #A8344D;
  --bp-color-brand-deep: #4A212A;
  --bp-color-brand-soft: #F3D8DE;
  --bp-color-brand-tint: #F5D0D5;
  --bp-color-link-instagram: #0077C7;
  --bp-color-link-instagram-hover: #0068AD;

  /* 텍스트 */
  --bp-color-text: #3B3B3B;
  --bp-color-text-strong: #221B19;
  --bp-color-text-muted: #606060;
  --bp-color-text-placeholder: #6B6B6B;
  --bp-color-text-inverse: #FFFFFF;
  --bp-color-error: #C41616;
  --bp-color-success: #1E7B2C;
  --bp-color-success-graphic: #1FA028;
  --bp-color-notice-label: #C41616;   /* 시안 #DD2121 은 #F4E1B9 위 3.78:1 로 미달 → 4.70:1 */

  /* 배경·표면 */
  --bp-color-bg-page: #F4EDE7;
  --bp-color-bg-surface: #FFFFFF;
  --bp-color-bg-band: #F4E2E4;
  --bp-color-bg-section: #F6E9E7;
  --bp-color-bg-card: #FAF4F3;
  --bp-color-bg-card-warm: #FFF9F7;
  --bp-color-bg-notice: #F4E1B9;
  --bp-color-bg-hover: #ECE1D7;
  --bp-color-bg-option: #E8E8E8;
  --bp-color-disabled-bg: #ADADAD;
  --bp-color-neutral-bg: #6B6B6B;
  --bp-color-neutral-bg-hover: #5A5A5A;
  --bp-color-overlay: rgba(0, 0, 0, .7);
  --bp-color-footer-label: #C2AAA7;
  --bp-color-footer-value: #EEC6CE;
  --bp-color-footer-meta: #BCA3A4;
  --bp-color-faq-muted: #B04A60;

  /* 보더 */
  --bp-color-border: #3B3B3B;
  --bp-color-border-field: #8E8E8E;
  --bp-color-border-menu: #8B8784;
  --bp-color-border-divider: #ABABAB;
  --bp-color-border-soft: #E8C7CE;
  --bp-color-border-muted: #D4D4D4;
  --bp-color-border-radio: #6B6B6B;

  /* ── 1-2. 카드사 색 (대표색 / 선택 배경 / 배경 위 글자) ───── */
  --bp-card-lotte: #BE1011;   --bp-card-lotte-bg: #DF898A;   --bp-card-lotte-on: #221B19;
  --bp-card-kb: #F8B500;      --bp-card-kb-bg: #F8B500;      --bp-card-kb-on: #221B19;
  --bp-card-samsung: #1453A3; --bp-card-samsung-bg: #83A0F0; --bp-card-samsung-on: #221B19;
  --bp-card-nh: #3B9436;      --bp-card-nh-bg: #9FCA9C;      --bp-card-nh-on: #221B19;
  --bp-card-shinhan: #232D6A; --bp-card-shinhan-bg: #6B74AA; --bp-card-shinhan-on: #FFFFFF;
  --bp-card-ibk: #48C7A9;     --bp-card-ibk-bg: #77EBD2;     --bp-card-ibk-on: #221B19;

  /* ── 1-3. 타이포그래피 ─────────────────────────────── */
  --bp-font-sans: 'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --bp-fw-light: 400;      /* 시안은 300 계열도 Regular 로 렌더된다 */
  --bp-fw-regular: 400;
  --bp-fw-medium: 500;
  --bp-fw-bold: 700;
  --bp-ls-tight: -0.05em;
  --bp-ls-base: -0.02em;
  --bp-ls-wide: 0.01em;
  --bp-lh-base: 1.45;
  --bp-lh-heading: 1.25;

  /* 간격 */
  --bp-space-1: 4px;  --bp-space-2: 8px;  --bp-space-3: 12px;
  --bp-space-4: 16px; --bp-space-5: 24px; --bp-space-6: 32px;
  --bp-space-7: 48px; --bp-space-8: 64px; --bp-space-9: 96px;

  /* 반경 */
  --bp-radius-sm: 6px;
  --bp-radius-md: 9px;
  --bp-radius-lg: 12px;
  --bp-radius-xl: 20px;
  --bp-radius-pill: 999px;
  --bp-radius-circle: 50%;
  --bp-radius-modal: 16px;

  /* 그림자 */
  --bp-shadow-header: 0 6px 10px rgba(74, 33, 42, .13);
  --bp-shadow-panel: 0 4px 24px rgba(74, 33, 42, .05);
  --bp-shadow-card: 0 5px 9px rgba(74, 33, 42, .07);
  --bp-shadow-note: 0 4px 5px rgba(74, 33, 42, .2);
  --bp-shadow-fab: 0 4px 10px rgba(190, 63, 90, .3);
  --bp-shadow-modal: 0 10px 30px rgba(0, 0, 0, .3);
  --bp-shadow-pick: 0 3px 4px rgba(0, 0, 0, .16);
  --bp-shadow-pick-hover: 0 7px 14px rgba(0, 0, 0, .26);

  /* z-index */
  --bp-z-header: 20;
  --bp-z-dropdown: 50;
  --bp-z-dim: 500;
  --bp-z-modal: 600;
  --bp-z-toast: 700;

  /* 모션 */
  --bp-dur-fast: .15s;
  --bp-dur-base: .2s;
  --bp-dur-slide: .6s;
  --bp-ease-slide: cubic-bezier(.4, 0, .2, 1);

  /* 레이아웃 폭 */
  --bp-w-container: 1130px;
  --bp-w-panel: 1128px;
  --bp-w-form-col: 528px;
  --bp-w-wide: 1356px;
  --bp-w-mo: 414px;

  /* 브레이크포인트(참고값: CSS 미디어쿼리에는 var() 를 쓸 수 없다) */
  --bp-bp-sm: 480px;
  --bp-bp-md: 768px;
  --bp-bp-lg: 1024px;
  --bp-bp-xl: 1280px;

  /* ── 기기별 의미 토큰 (기본 = PC) ───────────────────── */
  --bp-fs-display: 2.8125rem;      /* 45px  서브페이지 H1 */
  --bp-fs-h2: 1.6875rem;           /* 27px */
  --bp-fs-title: 1.5rem;           /* 24px */
  --bp-fs-label: 1.625rem;         /* 26px */
  --bp-fs-cta: 1.625rem;           /* 26px */
  --bp-fs-input: 1.375rem;         /* 22px */
  --bp-fs-modal-title: 2.3125rem;  /* 37px */
  --bp-fs-modal-body: 1.625rem;    /* 26px */
  --bp-fs-gnb: 1.25rem;            /* 20px */
  --bp-fs-body: 1rem;              /* 16px */
  --bp-fs-small: .875rem;          /* 14px */
  --bp-fs-error: .9375rem;         /* 15px */
  --bp-fs-btn: 1.625rem;           /* 26px  CTA(lg) */
  --bp-fs-btn-md: 1.4375rem;       /* 23px  기본 버튼(시안 31 → 23) */
  --bp-input-h: 62px;
  --bp-cta-h: 73px;
  --bp-header-h: 171px;
  --bp-band-h: 218px;
  --bp-radio-size: 30px;
  --bp-check-size: 28px;
  --bp-touch-min: 44px;
}

/* MO 값은 화면 px 그대로(design-system §1-3). 입력은 iOS 확대 방지를 위해 16px 이상 */
:root[data-device="mo"] {
  --bp-fs-display: 1.25rem;        /* 20px  MO H1 */
  --bp-fs-h2: 1.25rem;
  --bp-fs-title: 1.25rem;
  --bp-fs-label: .9375rem;         /* 15px */
  --bp-fs-cta: 1rem;               /* 16px */
  --bp-fs-input: 1rem;             /* 16px */
  --bp-fs-modal-title: 1.25rem;
  --bp-fs-modal-body: .875rem;
  --bp-fs-gnb: .875rem;            /* 14px */
  --bp-fs-body: .875rem;           /* 14px */
  --bp-fs-small: .8125rem;         /* 13px */
  --bp-fs-error: .8125rem;
  --bp-fs-btn: 1rem;
  --bp-fs-btn-md: 1rem;
  --bp-input-h: 46px;
  --bp-cta-h: 59px;
  --bp-header-h: 173px;
  --bp-band-h: 130px;
  --bp-radio-size: 15px;         /* 시안 값. 클릭 영역은 라벨(최소 높이 44px)이 담당한다 */
  --bp-check-size: 20px;
  --bp-shadow-header: 0 5px 8px rgba(74, 33, 42, .14);
  --bp-radius-modal: 10px;
}