/* bp-card.css — 국민행복카드 화면(허브·혜택 비교·임시 템플릿 랜딩·응모 폼·사은품 선택 확인)과 그 dev 샘플 전용 스타일.
 * 공통 bp-components.css 에 두면 모든 페이지의 렌더 차단 CSS 가 커져 비주얼 페이지 LCP 가 늦어진다(W0 측정: 68KB→118KB 에서 느린 4G LCP +1초).
 * 이 화면들만 <head> 에서 읽고(common/card/card-css.jsp), 비주얼 페이지 랜딩은 응모 대화상자를 열 때 bp.card-apply.js 가 불러온다. */

/* ── 24. 카드 응모 폼(샘플 /dev/samples/card-apply, design-system §2-24) ───────────── */
/* 대화상자: PC = bp-modal--form(가운데), MO = bp-modal--sheet 를 전체 화면으로. 머리·꼬리는 고정이고 본문만 스크롤한다 */
.bp-capply-modal { --bp-capply-bg: var(--bp-card-color, var(--bp-color-brand)); --bp-capply-fg: var(--bp-color-text-inverse); }
.bp-capply-modal[data-card="kb"], .bp-capply-modal[data-card="ibk"] { --bp-capply-fg: var(--bp-color-text-strong); }
.bp-capply-modal[data-card="nh"] { --bp-capply-bg: var(--bp-card-bg); --bp-capply-fg: var(--bp-card-on); }
.bp-capply-modal [hidden] { display: none !important; }
.bp-capply-modal .bp-modal__panel { width: min(100%, 720px); background: var(--bp-color-bg-surface); }
.bp-capply-modal .bp-modal__panel > form { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.bp-capply .bp-modal__body { flex: 1 1 auto; min-height: 0; padding: var(--bp-space-2) var(--bp-space-5) var(--bp-space-5); }
.bp-capply__head { padding: var(--bp-space-4) var(--bp-space-4) var(--bp-space-3) var(--bp-space-5); border-bottom: 1px solid var(--bp-color-border-soft); }
.bp-capply__issuer { display: flex; align-items: center; gap: var(--bp-space-3); min-width: 0; }
.bp-capply__mark { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--bp-radius-circle); background: var(--bp-capply-bg); color: var(--bp-capply-fg); font-size: var(--bp-fs-body); font-weight: var(--bp-fw-bold); }
.bp-capply__issuer-text { min-width: 0; }
.bp-capply__eyebrow { font-size: var(--bp-fs-small); color: var(--bp-color-text-muted); }
.bp-capply__title { font-size: var(--bp-fs-title); line-height: var(--bp-lh-heading); }
.bp-capply__title:focus-visible, .bp-capply__done-title:focus-visible { outline-offset: 4px; }
.bp-capply__fields { min-width: 0; margin: 0; padding: 0; border: 0; }
.bp-capply__note { margin: var(--bp-space-2) 0 0; text-align: right; font-size: var(--bp-fs-small); color: var(--bp-color-text-muted); }
.bp-capply__sec { padding-block: var(--bp-space-4); }
.bp-capply__sec + .bp-capply__sec { border-top: 1px solid var(--bp-color-border-soft); }
.bp-capply__sec-title { margin-bottom: var(--bp-space-3); font-size: var(--bp-fs-title); font-weight: var(--bp-fw-bold); line-height: var(--bp-lh-heading); color: var(--bp-color-brand-deep); }
.bp-capply__sub { margin-top: var(--bp-space-4); }
.bp-capply__opt { font-weight: var(--bp-fw-regular); color: var(--bp-color-text-muted); }
.bp-capply__link { color: var(--bp-color-brand-text); text-decoration: underline; }
/* 신청인 정보(회원정보 값 표시) */
.bp-capply__info { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--bp-space-2) var(--bp-space-4); font-size: var(--bp-fs-body); }
.bp-capply__info dt { color: var(--bp-color-text-muted); }
.bp-capply__info dd { margin: 0; font-weight: var(--bp-fw-medium); color: var(--bp-color-text-strong); overflow-wrap: anywhere; }
/* 사은품 카드: 네이티브 라디오 + 카드 라벨. 선택 is-selected(카드사 색 테두리), 품절 is-soldout(라디오 disabled + 품절 표시) */
.bp-capply__gifts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bp-space-3); }
.bp-capply-gift { display: flex; align-items: flex-start; gap: var(--bp-space-3); min-height: var(--bp-touch-min); padding: var(--bp-space-4); background: var(--bp-color-bg-surface); border: 2px solid var(--bp-color-border-soft); border-radius: var(--bp-radius-md); cursor: pointer; transition: border-color var(--bp-dur-fast), background-color var(--bp-dur-fast); }
.bp-capply-gift:hover:not(.is-soldout) { border-color: var(--bp-capply-bg); }
.bp-capply-gift.is-selected { border-color: var(--bp-capply-bg); background: var(--bp-color-bg-card-warm); }
.bp-capply-gift:has(.bp-choice__input:focus-visible) { outline: 2px solid var(--bp-color-brand); outline-offset: 2px; }
.bp-capply-gift .bp-choice__input { margin-top: 2px; }
.bp-capply-gift__body { display: grid; gap: var(--bp-space-1); min-width: 0; }
.bp-capply-gift__top { display: flex; flex-wrap: wrap; gap: var(--bp-space-1); }
.bp-capply-gift__name { font-size: var(--bp-fs-input); font-weight: var(--bp-fw-bold); line-height: var(--bp-lh-heading); overflow-wrap: anywhere; color: var(--bp-color-text-strong); }
.bp-capply-gift__desc { font-size: var(--bp-fs-small); color: var(--bp-color-text-muted); }
.bp-capply-gift__flag { background: var(--bp-color-neutral-bg); border-color: transparent; color: var(--bp-color-text-inverse); }
.bp-capply-gift.is-soldout { background: var(--bp-color-bg-page); cursor: not-allowed; }
.bp-capply-gift.is-soldout .bp-capply-gift__name { color: var(--bp-color-text-muted); text-decoration: line-through; }
/* 입금 계좌: 저장된 계좌(마스킹) + '다른 계좌 사용' 펼침 */
.bp-capply__saved { display: flex; align-items: center; justify-content: space-between; gap: var(--bp-space-3); padding: var(--bp-space-3) var(--bp-space-4); border: 1px solid var(--bp-color-border-soft); border-radius: var(--bp-radius-md); background: var(--bp-color-bg-card); }
.bp-capply__saved-main { min-width: 0; }
.bp-capply__saved-acct { font-size: var(--bp-fs-input); font-weight: var(--bp-fw-bold); overflow-wrap: anywhere; }
.bp-capply__bank { margin-right: var(--bp-space-1); }
.bp-capply__saved .bp-btn { flex: none; }
.bp-capply__other { display: grid; gap: var(--bp-space-4); }
.bp-capply__saved + .bp-capply__other { margin-top: var(--bp-space-4); }
/* 안내사항 6항 */
.bp-capply__notice { padding: var(--bp-space-4) var(--bp-space-5); border-radius: var(--bp-radius-lg); }
.bp-capply__notice ol { display: grid; gap: var(--bp-space-2); padding-left: var(--bp-space-5); list-style: decimal; }
.bp-capply__notice strong { margin-right: var(--bp-space-1); }
.bp-capply__temp { margin-left: var(--bp-space-1); vertical-align: middle; }
.bp-capply__notice + .bp-field__help { margin-top: var(--bp-space-2); }
/* 약관 동의 묶음 */
.bp-capply .bp-agree { padding: var(--bp-space-3) var(--bp-space-4); }
.bp-capply .bp-agree .bp-choice { font-size: var(--bp-fs-body); }
.bp-capply .bp-agree__view { flex: none; white-space: nowrap; }
.bp-capply .bp-field__label { font-size: var(--bp-fs-input); }
.bp-capply .bp-agree__all { display: flex; font-size: var(--bp-fs-input); }
/* 꼬리: 안내 문구 + 취소/신청하기(MO 는 전폭 두 칸) */
.bp-capply__foot { flex-direction: column; align-items: stretch; gap: var(--bp-space-2); padding: var(--bp-space-3) var(--bp-space-5) var(--bp-space-4); border-top: 1px solid var(--bp-color-border-soft); background: var(--bp-color-bg-surface); }
.bp-capply__hint { text-align: right; font-size: var(--bp-fs-small); color: var(--bp-color-text-muted); }
.bp-capply__actions { display: flex; justify-content: flex-end; gap: var(--bp-space-2); }
.bp-capply__actions .bp-btn { min-width: 140px; }
/* 완료 화면 */
.bp-capply__done { display: grid; justify-items: center; gap: var(--bp-space-3); padding-block: var(--bp-space-6) var(--bp-space-4); text-align: center; }
.bp-capply__done .bp-modal__badge { margin-bottom: 0; }
.bp-capply__done-title { font-size: var(--bp-fs-h2); color: var(--bp-color-brand-deep); }
.bp-capply__done-gift { font-size: var(--bp-fs-input); color: var(--bp-color-text); overflow-wrap: anywhere; }
.bp-capply__done-text { max-width: 480px; font-size: var(--bp-fs-body); color: var(--bp-color-text-muted); }
/* 페이지(샘플) */
.bp-capply-page__lead { max-width: 640px; margin-inline: auto; text-align: center; font-size: var(--bp-fs-body); color: var(--bp-color-text); }
.bp-capply-page__actions { padding-top: var(--bp-space-4); }
/* 시연 영역(샘플 전용 — 운영 화면에서는 쓰지 않는다) */
.bp-capply__demo, .bp-cgifts__demo { margin-top: var(--bp-space-5); padding: var(--bp-space-3) var(--bp-space-4); border: 1px dashed var(--bp-color-border-soft); border-radius: var(--bp-radius-md); background: var(--bp-color-bg-card-warm); font-size: var(--bp-fs-small); }
.bp-cgifts__demo { margin-top: 0; margin-bottom: var(--bp-space-4); }
.bp-capply__demo-title, .bp-cgifts__demo-title { font-weight: var(--bp-fw-bold); color: var(--bp-color-brand-deep); }
.bp-capply__demo-text { margin-top: var(--bp-space-1); color: var(--bp-color-text-muted); }
.bp-capply__demo-actions, .bp-cgifts__demo-actions { display: flex; flex-wrap: wrap; gap: var(--bp-space-2); margin-top: var(--bp-space-3); }
.bp-capply__demo-group { margin-top: var(--bp-space-3); }
.bp-capply__demo-group .bp-capply__demo-actions { margin-top: var(--bp-space-1); }
.bp-capply__demo-label { font-weight: var(--bp-fw-bold); color: var(--bp-color-text); }
.bp-capply__demo [aria-pressed="true"], .bp-cgifts__demo [aria-pressed="true"] { background: var(--bp-color-brand); border-color: var(--bp-color-brand); color: var(--bp-color-text-inverse); }
.bp-capply__demo .bp-choice { display: flex; font-size: var(--bp-fs-small); }

/* MO: 전체 화면 시트 */
@keyframes bp-capply-sheet-in { from { transform: translateY(32px); opacity: 0; } to { transform: none; opacity: 1; } }
[data-device="mo"] .bp-capply-modal.bp-modal--sheet { place-items: stretch; }
[data-device="mo"] .bp-capply-modal .bp-modal__panel { width: 100%; height: 100dvh; max-height: 100dvh; border-radius: 0; }
[data-device="mo"] .bp-capply-modal:not([hidden]) .bp-modal__panel { animation: bp-capply-sheet-in var(--bp-dur-base) ease-out; }
[data-device="mo"] .bp-capply-modal .bp-field__control, [data-device="mo"] .bp-capply-modal .bp-select__trigger { background: var(--bp-color-bg-surface); }
[data-device="mo"] .bp-capply__head { padding: var(--bp-space-2) var(--bp-space-2) var(--bp-space-2) var(--bp-space-4); }
[data-device="mo"] .bp-capply .bp-modal__body { padding-inline: var(--bp-space-4); }
[data-device="mo"] .bp-capply__gifts { grid-template-columns: 1fr; }
[data-device="mo"] .bp-capply__notice { padding: var(--bp-space-3) var(--bp-space-4); }
[data-device="mo"] .bp-capply__saved { flex-direction: column; align-items: stretch; }
[data-device="mo"] .bp-capply__saved .bp-btn { width: 100%; }
[data-device="mo"] .bp-capply .bp-agree { padding: var(--bp-space-2) var(--bp-space-3); }
[data-device="mo"] .bp-capply .bp-agree__all { font-size: var(--bp-fs-body); }
[data-device="mo"] .bp-capply__foot { padding: var(--bp-space-3) var(--bp-space-4) calc(var(--bp-space-3) + env(safe-area-inset-bottom)); }
[data-device="mo"] .bp-capply__hint { text-align: center; }
[data-device="mo"] .bp-capply__actions .bp-btn { flex: 1 1 0; min-width: 0; padding-inline: var(--bp-space-3); }
[data-device="mo"] .bp-capply__done .bp-modal__badge { width: 64px; height: 64px; }
[data-device="mo"] .bp-capply__done .bp-modal__badge .bp-icon { width: 32px; height: 32px; }
[data-device="mo"] .bp-capply-page__lead { text-align: left; }

/* ── 25. 사은품 선택 확인(샘플 /dev/samples/card-gifts, SCR-MY-04, design-system §2-24) ───────────── */
.bp-cgifts [hidden] { display: none !important; }
.bp-cgifts__count { margin-bottom: var(--bp-space-2); font-size: var(--bp-fs-body); color: var(--bp-color-text-muted); }
.bp-cgifts__count strong { font-weight: var(--bp-fw-bold); color: var(--bp-color-brand-text); }
.bp-cgifts__table th { white-space: nowrap; }
.bp-cgifts__table td { vertical-align: middle; overflow-wrap: anywhere; }
.bp-cgifts__table time { white-space: nowrap; }
/* 상태 배지: 접수(기본 bp-badge) · 확인중(--wait) · 발송대기(아래) · 발송완료(--ok) · 반려(아래). 색만이 아니라 글자로도 구분한다 */
.bp-cgifts__badge--pending { background: var(--bp-color-brand-soft); border-color: var(--bp-color-brand-soft); color: var(--bp-color-brand-deep); }
.bp-cgifts__badge--rejected { background: var(--bp-color-bg-surface); border-color: var(--bp-color-error); color: var(--bp-color-error); }
.bp-cgifts__empty .bp-btn { margin-top: var(--bp-space-2); }
/* 발송 일정·조건 안내(관리자 편집 콘텐츠 자리) */
.bp-cgifts__guide { margin-top: var(--bp-space-6); padding: var(--bp-space-5); border: 1px solid var(--bp-color-border-soft); border-radius: var(--bp-radius-lg); background: var(--bp-color-bg-card-warm); }
.bp-cgifts__guide-title { margin-bottom: var(--bp-space-4); font-size: var(--bp-fs-title); line-height: var(--bp-lh-heading); color: var(--bp-color-brand-deep); }
.bp-cgifts__temp { margin-left: var(--bp-space-1); vertical-align: middle; }
.bp-cgifts__guide-sub { font-size: var(--bp-fs-input); font-weight: var(--bp-fw-bold); line-height: var(--bp-lh-heading); color: var(--bp-color-text-strong); }
.bp-cgifts__guide-body > * + * { margin-top: var(--bp-space-2); }
.bp-cgifts__guide-body > * + .bp-cgifts__guide-sub { margin-top: var(--bp-space-5); }
.bp-cgifts__schedule { max-width: 520px; background: var(--bp-color-bg-surface); }
.bp-cgifts__schedule tbody th { background: transparent; font-weight: var(--bp-fw-medium); text-align: left; }
.bp-cgifts__legend { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--bp-space-2) var(--bp-space-4); align-items: center; font-size: var(--bp-fs-body); }
.bp-cgifts__legend dd { margin: 0; }
/* MO: 표를 행마다 카드로 쌓는다. thead 는 시각만 숨기고(표 의미는 role 로 유지) 값 앞 라벨은 data-label 로 보여 준다 */
[data-device="mo"] .bp-cgifts__table, [data-device="mo"] .bp-cgifts__table tbody, [data-device="mo"] .bp-cgifts__table tr, [data-device="mo"] .bp-cgifts__table td { display: block; }
[data-device="mo"] .bp-cgifts__table thead { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); }
[data-device="mo"] .bp-cgifts__table tbody tr { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: var(--bp-space-3); row-gap: var(--bp-space-1); align-items: center; margin-bottom: var(--bp-space-3); padding: var(--bp-space-4); border: 1px solid var(--bp-color-border-soft); border-radius: var(--bp-radius-lg); background: var(--bp-color-bg-card-warm); }
[data-device="mo"] .bp-cgifts__table td { display: grid; grid-template-columns: 7em minmax(0, 1fr); gap: var(--bp-space-2); padding: 0; border: 0; text-align: left; font-size: var(--bp-fs-body); }
[data-device="mo"] .bp-cgifts__table td::before { content: attr(data-label); content: attr(data-label) / ""; color: var(--bp-color-text-muted); }
[data-device="mo"] .bp-cgifts__table td:nth-child(2) { grid-area: 1 / 1; display: block; }
[data-device="mo"] .bp-cgifts__table td:nth-child(4) { grid-area: 1 / 2; display: block; font-size: var(--bp-fs-input); font-weight: var(--bp-fw-bold); color: var(--bp-color-text-strong); }
[data-device="mo"] .bp-cgifts__table td:nth-child(5) { grid-area: 2 / 1 / auto / -1; display: block; margin-top: var(--bp-space-2); font-size: var(--bp-fs-input); }
[data-device="mo"] .bp-cgifts__table td:nth-child(2)::before, [data-device="mo"] .bp-cgifts__table td:nth-child(4)::before, [data-device="mo"] .bp-cgifts__table td:nth-child(5)::before { content: none; }
[data-device="mo"] .bp-cgifts__table td:nth-child(1) { grid-area: 3 / 1 / auto / -1; margin-top: var(--bp-space-3); padding-top: var(--bp-space-3); border-top: 1px solid var(--bp-color-border-soft); }
[data-device="mo"] .bp-cgifts__table td:nth-child(3) { grid-area: 4 / 1 / auto / -1; }
[data-device="mo"] .bp-cgifts__table td:nth-child(6) { grid-area: 5 / 1 / auto / -1; }
[data-device="mo"] .bp-cgifts__guide { padding: var(--bp-space-4); }
[data-device="mo"] .bp-cgifts__schedule { max-width: none; }
[data-device="mo"] .bp-cgifts__legend { grid-template-columns: 1fr; gap: var(--bp-space-1); }
[data-device="mo"] .bp-cgifts__legend dd { margin-bottom: var(--bp-space-2); }
/* ── 26. 카드 혜택·비교 + 카드사 랜딩 임시 템플릿(샘플 /dev/samples/card-benefit·card-landing, design-system §2-16·§2-20·§2-25) ───────────── */
/* 카드사 채움색: 칩 선택·응모하기 버튼·선택됨 표시처럼 "카드사 색 배경 + 글자"를 쓰는 곳의 공통 값(§2-21 규칙: 글자는 흰색/짙은색 중 대비 4.5 이상, NH 는 대표색이 둘 다 4.5 미만이라 선택 배경색) */
[data-card="lotte"], [data-card="samsung"], [data-card="shinhan"] { --bp-card-fill: var(--bp-card-color); --bp-card-fill-on: var(--bp-color-text-inverse); }
[data-card="kb"], [data-card="ibk"] { --bp-card-fill: var(--bp-card-color); --bp-card-fill-on: var(--bp-color-text-strong); }
[data-card="nh"] { --bp-card-fill: var(--bp-card-bg); --bp-card-fill-on: var(--bp-card-on); }

/* 시연 영역(샘플 전용 — 운영 화면에서는 쓰지 않는다) */
.bp-card-demo { margin-block: var(--bp-space-5); padding: var(--bp-space-3) var(--bp-space-4); border: 1px dashed var(--bp-color-border-soft); border-radius: var(--bp-radius-md); background: var(--bp-color-bg-card-warm); font-size: var(--bp-fs-small); color: var(--bp-color-text); }
.bp-card-demo__title { display: flex; align-items: center; gap: var(--bp-space-2); font-weight: var(--bp-fw-bold); color: var(--bp-color-brand-deep); }
.bp-card-demo__text { margin-top: var(--bp-space-1); color: var(--bp-color-text-muted); }
.bp-card-demo__list { margin-top: var(--bp-space-2); padding-left: var(--bp-space-5); list-style: disc; color: var(--bp-color-text-muted); }
.bp-card-demo__list li + li { margin-top: var(--bp-space-1); }
.bp-card-demo__actions { display: flex; flex-wrap: wrap; gap: var(--bp-space-2); margin-top: var(--bp-space-3); }
.bp-card-demo code { padding: 0 var(--bp-space-1); border-radius: var(--bp-radius-sm); background: var(--bp-color-bg-card); font-size: inherit; }

/* 혜택·비교 bp-cbenefit — 공통(안내·기준일·끝 안내·셀 문구) */
.bp-cbenefit__notes { display: grid; gap: var(--bp-space-1); margin-bottom: var(--bp-space-3); font-size: var(--bp-fs-body); color: var(--bp-color-text-strong); }
.bp-cbenefit__notes li:last-child, .bp-cbenefit__notes p:last-child { color: var(--bp-color-error); font-weight: var(--bp-fw-bold); }   /* 샘플은 li, 실제 화면은 콘텐츠 블록의 p */
.bp-cbenefit__asof { margin-bottom: var(--bp-space-4); font-size: var(--bp-fs-small); color: var(--bp-color-text-muted); text-align: right; }
.bp-cbenefit__foot { margin-top: var(--bp-space-4); font-size: var(--bp-fs-small); color: var(--bp-color-text-muted); text-align: right; }
.bp-cbenefit__line { display: block; }
.bp-cbenefit__note { display: block; margin-top: var(--bp-space-1); font-size: var(--bp-fs-small); color: var(--bp-color-text-muted); }
.bp-cbenefit__grp + .bp-cbenefit__grp { margin-top: var(--bp-space-3); }
.bp-cbenefit__empty { color: var(--bp-color-text-muted); }
.bp-cbenefit__dot { flex: none; width: 10px; height: 10px; border-radius: var(--bp-radius-circle); background: var(--bp-card-color, var(--bp-color-brand)); }

/* PC 표(§2-16): 진짜 table — 머리글 brand-deep, 첫 열 bg-card, 베베폼 혜택 행 강조, 본문 행 교차 */
.bp-cbenefit__panel { padding: var(--bp-space-6); border-radius: var(--bp-radius-xl); background: var(--bp-color-bg-surface); box-shadow: var(--bp-shadow-panel); }
.bp-cbenefit__table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; font-size: var(--bp-fs-small); line-height: var(--bp-lh-base); color: var(--bp-color-text-strong); }
.bp-cbenefit__table thead th { padding: var(--bp-space-4) var(--bp-space-2); border-bottom: 4px solid var(--bp-color-brand-deep); border-left: 1px solid var(--bp-color-border-menu); background: var(--bp-color-brand-deep); color: var(--bp-color-bg-page); font-size: var(--bp-fs-body); font-weight: var(--bp-fw-medium); text-align: center; }
.bp-cbenefit__table thead th[data-card] { border-bottom-color: var(--bp-card-color); }
.bp-cbenefit__table thead th:first-child { width: 14%; border-left: 0; border-top-left-radius: var(--bp-radius-lg); }
.bp-cbenefit__table thead th:last-child { border-top-right-radius: var(--bp-radius-lg); }
.bp-cbenefit__table tbody th { padding: var(--bp-space-4) var(--bp-space-2); border-bottom: 1px solid var(--bp-color-border-soft); background: var(--bp-color-bg-card); font-size: var(--bp-fs-body); font-weight: var(--bp-fw-bold); text-align: center; vertical-align: middle; }
.bp-cbenefit__table tbody td { padding: var(--bp-space-4) var(--bp-space-3); border-bottom: 1px solid var(--bp-color-border-soft); border-left: 1px solid var(--bp-color-border-soft); background: var(--bp-color-bg-surface); vertical-align: top; overflow-wrap: anywhere; }
.bp-cbenefit__table tbody tr:nth-child(even) td { background: var(--bp-color-bg-card-warm); }
.bp-cbenefit__table tbody tr:last-child th { border-bottom-left-radius: var(--bp-radius-lg); }
.bp-cbenefit__table .bp-cbenefit__row--bebe th { background: var(--bp-color-brand); color: var(--bp-color-text-inverse); }
.bp-cbenefit__table .bp-cbenefit__row--bebe td { background: var(--bp-color-brand-soft); text-align: center; }
.bp-cbenefit__bebe-lines { font-weight: var(--bp-fw-bold); color: var(--bp-color-text-strong); }
.bp-cbenefit__bebe-lines + .bp-cbenefit__bebe-lines { margin-top: var(--bp-space-2); }
.bp-cbenefit__row--bebe .bp-cbenefit__go { margin-top: var(--bp-space-4); }
.bp-cbenefit__row--bebe .bp-cbenefit__note { margin-top: var(--bp-space-3); color: var(--bp-color-text-strong); }

/* MO(시안 없음, 신규): 카드사 칩(가로 스크롤 탭) → 카드사 혜택(베베폼 혜택 강조 카드 + 항목 아코디언) */
[data-device="mo"] .bp-cbenefit { max-width: calc(348px + 2 * var(--bp-space-4)); }
.bp-cbenefit__chips { display: flex; gap: var(--bp-space-2); margin-inline: calc(-1 * var(--bp-space-1)); padding: var(--bp-space-2) var(--bp-space-1); overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: thin; }
.bp-cbenefit__chip { flex: none; display: inline-flex; align-items: center; gap: var(--bp-space-2); min-width: var(--bp-touch-min); min-height: var(--bp-touch-min); padding: 0 var(--bp-space-4); border: 1px solid var(--bp-color-border-soft); border-radius: var(--bp-radius-pill); background: var(--bp-color-bg-surface); color: var(--bp-color-brand-deep); font-size: var(--bp-fs-body); font-weight: var(--bp-fw-bold); white-space: nowrap; scroll-snap-align: start; }
.bp-cbenefit__chip:hover { background: var(--bp-color-bg-card); }
.bp-cbenefit__chip[aria-selected="true"] { border-color: transparent; background: var(--bp-card-fill); color: var(--bp-card-fill-on); }
.bp-cbenefit__chip[aria-selected="true"] .bp-cbenefit__dot { background: var(--bp-card-fill-on); }
.bp-cbenefit__tabpanel { margin-top: var(--bp-space-3); }
.bp-cbenefit__ptitle { display: flex; align-items: center; gap: var(--bp-space-2); margin-bottom: var(--bp-space-3); font-size: var(--bp-fs-title); font-weight: var(--bp-fw-bold); color: var(--bp-color-text-strong); }
.bp-cbenefit__ptitle .bp-cbenefit__dot { width: 14px; height: 14px; }
.bp-cbenefit__bebe { padding: var(--bp-space-5) var(--bp-space-4); border-radius: var(--bp-radius-xl); background: var(--bp-color-brand); box-shadow: var(--bp-shadow-card); color: var(--bp-color-text-inverse); text-align: center; }
.bp-cbenefit__bebe-label { display: inline-flex; align-items: center; min-height: 26px; margin-bottom: var(--bp-space-3); padding: 0 var(--bp-space-3); border-radius: var(--bp-radius-pill); background: var(--bp-color-brand-deep); color: var(--bp-color-text-inverse); font-size: var(--bp-fs-small); font-weight: var(--bp-fw-bold); }
.bp-cbenefit__bebe .bp-cbenefit__bebe-lines { color: var(--bp-color-text-inverse); font-size: var(--bp-fs-title); line-height: var(--bp-lh-heading); }
.bp-cbenefit__bebe .bp-cbenefit__go { margin-top: var(--bp-space-4); background: var(--bp-color-bg-surface); color: var(--bp-color-brand-text); }
.bp-cbenefit__bebe .bp-cbenefit__go:hover { background: var(--bp-color-bg-band); color: var(--bp-color-brand-deep); }
.bp-cbenefit__bebe-note { margin-top: var(--bp-space-3); font-size: var(--bp-fs-small); }
.bp-cbenefit__acc { margin-top: var(--bp-space-4); }
.bp-cbenefit__apanel .bp-cbenefit__grp + .bp-cbenefit__grp { padding-top: var(--bp-space-3); border-top: 1px dashed var(--bp-color-border-soft); }

/* 카드사 랜딩 임시 템플릿 bp-card-landing(§2-20): PC 컨테이너 1130 / MO 414 기준 카드 폭 348, 섹션 간격 --bp-space-7 */
.bp-card-landing__inner { width: 100%; max-width: var(--bp-w-container); margin-inline: auto; padding-inline: var(--bp-space-4); }
[data-device="mo"] .bp-card-landing__inner { max-width: calc(348px + 2 * var(--bp-space-4)); }
.bp-card-landing__sec { margin-top: var(--bp-space-7); }
.bp-card-landing__h2 { margin-bottom: var(--bp-space-4); font-size: var(--bp-fs-h2); font-weight: var(--bp-fw-bold); line-height: var(--bp-lh-heading); color: var(--bp-color-text-strong); }
.bp-card-landing__lead { margin-bottom: var(--bp-space-4); color: var(--bp-color-text-muted); }
/* ① 비주얼 밴드: 배경 --bp-card-{카드사}-bg, 글자 -on (신한은 -on/-bg 가 4.46 이라 모든 글자를 굵은 큰 글자로 둔다 → 3:1 기준) */
.bp-card-landing__hero { padding-block: var(--bp-space-8); background: var(--bp-card-bg, var(--bp-color-bg-card)); color: var(--bp-card-on, var(--bp-color-text-strong)); }   /* 토큰이 없는 신규 카드사는 중립색 폴백 */
[data-device="mo"] .bp-card-landing__hero { padding-block: var(--bp-space-6); }
.bp-card-landing__hero-inner { display: flex; align-items: center; gap: var(--bp-space-7); }
[data-device="mo"] .bp-card-landing__hero-inner { flex-direction: column; align-items: flex-start; gap: var(--bp-space-5); }
.bp-card-landing__logo { flex: none; display: grid; place-items: center; width: 240px; height: 96px; border-radius: var(--bp-radius-lg); background: repeating-linear-gradient(135deg, var(--bp-color-bg-section) 0 12px, var(--bp-color-bg-surface) 12px 24px); color: var(--bp-color-text-strong); }
[data-device="mo"] .bp-card-landing__logo { width: 160px; height: 64px; }
.bp-card-landing__logo-text { padding: var(--bp-space-1) var(--bp-space-2); border-radius: var(--bp-radius-sm); background: var(--bp-color-bg-surface); font-size: var(--bp-fs-small); font-weight: var(--bp-fw-bold); }
.bp-card-landing__title { font-size: var(--bp-fs-title); font-weight: var(--bp-fw-bold); line-height: var(--bp-lh-heading); }
.bp-card-landing__copy { display: grid; gap: var(--bp-space-1); margin-top: var(--bp-space-3); }
.bp-card-landing__copy-line { font-size: var(--bp-fs-h2); font-weight: var(--bp-fw-bold); line-height: var(--bp-lh-heading); }
/* ② 혜택 요약 */
.bp-card-landing__sum-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bp-space-5); }
[data-device="mo"] .bp-card-landing__sum-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bp-space-3); }
.bp-card-landing__sum-item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--bp-space-2); padding: var(--bp-space-5); border-radius: var(--bp-radius-xl); background: var(--bp-color-bg-surface); box-shadow: var(--bp-shadow-card); }
[data-device="mo"] .bp-card-landing__sum-item { padding: var(--bp-space-4); }
.bp-card-landing__sum-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: var(--bp-radius-circle); background: var(--bp-card-bg, var(--bp-color-bg-card)); color: var(--bp-card-on, var(--bp-color-brand-deep)); }
.bp-card-landing__sum-title { font-weight: var(--bp-fw-bold); color: var(--bp-color-text-strong); }
.bp-card-landing__sum-desc { font-size: var(--bp-fs-small); color: var(--bp-color-text); }
/* ③ 사은품 그리드: 네이티브 라디오(카드 전체를 덮는 투명 입력) + 테두리 프레임. 선택 = 카드사 색 테두리 + 선택됨 표시 + 채워진 점, 품절 = 이미지 위 오버레이 */
.bp-gift-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--bp-space-5); }
[data-device="mo"] .bp-gift-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--bp-space-3); }
.bp-gift-card { position: relative; display: flex; flex-direction: column; border-radius: var(--bp-radius-lg); background: var(--bp-color-bg-surface); box-shadow: var(--bp-shadow-card); cursor: pointer; transition: box-shadow var(--bp-dur-fast); }
.bp-gift-card:hover { box-shadow: var(--bp-shadow-pick-hover); }
.bp-gift-card.is-soldout { cursor: not-allowed; box-shadow: none; }
.bp-gift-card__input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: inherit; }
.bp-gift-card__frame { position: absolute; inset: 0; z-index: 3; border: 2px solid var(--bp-color-border-soft); border-radius: inherit; pointer-events: none; }
.bp-gift-card__input:checked ~ .bp-gift-card__frame { border-width: 3px; border-color: var(--bp-card-color, var(--bp-color-brand)); box-shadow: 0 0 0 1px var(--bp-card-color, var(--bp-color-brand)); }
.bp-gift-card__input:focus-visible ~ .bp-gift-card__frame { outline: 2px solid var(--bp-color-brand); outline-offset: 3px; }
.bp-gift-card__img { position: relative; display: grid; place-items: center; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--bp-radius-lg) var(--bp-radius-lg) 0 0; background: repeating-linear-gradient(135deg, var(--bp-color-bg-section) 0 12px, var(--bp-color-bg-surface) 12px 24px); }
.bp-gift-card__ph { padding: var(--bp-space-1) var(--bp-space-2); border-radius: var(--bp-radius-sm); background: var(--bp-color-bg-surface); font-size: var(--bp-fs-small); color: var(--bp-color-text-muted); }
.bp-gift-card__dot { position: absolute; top: var(--bp-space-3); left: var(--bp-space-3); width: 24px; height: 24px; border: 2px solid var(--bp-color-border-radio); border-radius: var(--bp-radius-circle); background: var(--bp-color-bg-surface); }
.bp-gift-card__input:checked ~ .bp-gift-card__img .bp-gift-card__dot { border-color: var(--bp-color-brand); background: var(--bp-color-brand); box-shadow: inset 0 0 0 4px var(--bp-color-bg-surface); }
.bp-gift-card__sel { display: none; position: absolute; top: var(--bp-space-3); right: var(--bp-space-3); align-items: center; min-height: 26px; padding: 0 var(--bp-space-3); border-radius: var(--bp-radius-pill); background: var(--bp-card-fill); color: var(--bp-card-fill-on); font-size: var(--bp-fs-small); font-weight: var(--bp-fw-bold); }
.bp-gift-card__input:checked ~ .bp-gift-card__img .bp-gift-card__sel { display: inline-flex; }
.bp-gift-card__soldout { position: absolute; inset: 0; z-index: 1; display: grid; place-items: center; background: var(--bp-color-overlay); color: var(--bp-color-text-inverse); font-size: var(--bp-fs-title); font-weight: var(--bp-fw-bold); }
.bp-gift-card__body { display: flex; flex-direction: column; align-items: flex-start; gap: var(--bp-space-1); padding: var(--bp-space-3) var(--bp-space-4) var(--bp-space-4); }
.bp-gift-card__name { font-weight: var(--bp-fw-bold); color: var(--bp-color-text-strong); }
.bp-gift-card__amt { font-weight: var(--bp-fw-bold); color: var(--bp-color-brand-text); }
.bp-gift-card.is-soldout .bp-gift-card__ph { visibility: hidden; }
.bp-gift-card.is-soldout .bp-gift-card__name, .bp-gift-card.is-soldout .bp-gift-card__amt { color: var(--bp-color-text-muted); }
/* ⑤ 발송 일정·조건 */
.bp-card-landing__ship-box { padding: var(--bp-space-5); border-radius: var(--bp-radius-xl); background: var(--bp-color-bg-surface); box-shadow: var(--bp-shadow-panel); }
.bp-card-landing__ship-list { margin-top: var(--bp-space-4); font-size: var(--bp-fs-small); }
/* ⑥ 하단 고정 CTA 바(스택 끝의 sticky — 푸터를 가리지 않는다). 버튼 색은 §2-21 규칙(--bp-card-fill / -on) */
.bp-card-landing__cta { position: sticky; bottom: 0; z-index: var(--bp-z-header); margin-top: var(--bp-space-7); background: var(--bp-color-bg-surface); box-shadow: 0 -4px 12px rgba(74, 33, 42, .12); }
.bp-card-landing__cta-inner { display: flex; align-items: center; gap: var(--bp-space-5); width: 100%; max-width: var(--bp-w-container); margin-inline: auto; padding: var(--bp-space-2) var(--bp-space-4); }
.bp-card-landing__apply { flex: 1; border-radius: var(--bp-radius-pill); background: var(--bp-card-fill, var(--bp-color-brand)); color: var(--bp-card-fill-on, var(--bp-color-text-inverse)); }
.bp-card-landing__apply:hover { background: var(--bp-card-fill, var(--bp-color-brand)); color: var(--bp-card-fill-on, var(--bp-color-text-inverse)); filter: brightness(.94); }
.bp-card-landing__event { flex: none; display: inline-flex; align-items: center; gap: var(--bp-space-1); min-height: var(--bp-touch-min); padding-inline: var(--bp-space-2); color: var(--bp-color-brand-text); font-weight: var(--bp-fw-bold); text-decoration: underline; }
[data-device="mo"] .bp-card-landing__cta-inner { flex-direction: column; align-items: stretch; gap: 0; max-width: calc(348px + 2 * var(--bp-space-4)); }
[data-device="mo"] .bp-card-landing__event { justify-content: center; }
/* ⑦ 카드 광고 고지(임시 문구) */
.bp-card-landing__ad { margin-block: var(--bp-space-7); }
.bp-card-landing__ad > .bp-card-landing__inner { padding-top: var(--bp-space-5); border-top: 1px solid var(--bp-color-border-soft); }
.bp-card-landing__ad-title { display: flex; align-items: center; gap: var(--bp-space-2); font-size: var(--bp-fs-body); font-weight: var(--bp-fw-bold); color: var(--bp-color-text-strong); }
.bp-card-landing__ad-list { margin-top: var(--bp-space-2); font-size: var(--bp-fs-small); color: var(--bp-color-text-muted); }

/* ── 27. 국민행복카드 허브·카드사 선택 팝업(bp-cardpick, 실제 화면 /card, design-system §2-17) ───────────── */
/* 크기 단위 --bp-cp-u = "시안 1px 이 화면에서 차지하는 길이". 시안 박스(PC 1050×1047, MO 350×662)를 높이 86%·폭 94% 안으로 줄이되 PC 는 최대 1.25배(§2-10 예외).
   transform 이 아니라 길이 계산이라 글자·터치 영역이 흐려지지 않고, 글자는 14px 아래로 내려가지 않는다. 모달이 아닌 모습(JS 없음)은 폭 기준만 쓴다. */
.bp-modal--card-picker { --bp-cp-u: min(1.25px, calc(86dvh / 1047), calc(94vw / 1050)); display: flex; overflow-y: auto; touch-action: pan-y; }
[data-device="mo"] .bp-modal--card-picker { --bp-cp-u: min(1px, calc(86dvh / 662), calc(94vw / 350)); }
.bp-modal--card-picker .bp-modal__dim { position: fixed; }
.bp-modal--card-picker .bp-modal__panel.bp-cardpick { flex: none; width: calc(var(--bp-cp-u) * 1050); max-height: none; margin: auto; overflow: visible; background: transparent; border-radius: 0; box-shadow: none; }
[data-device="mo"] .bp-modal--card-picker .bp-modal__panel.bp-cardpick { width: calc(var(--bp-cp-u) * 350); }
/* JS 없음: 팝업이 아니라 본문에 놓인 선택 패널(딤·닫기 없음, 헤더·푸터 그대로 쓸 수 있다) */
.bp-modal--card-picker:not(.is-enhanced) { --bp-cp-u: min(1.25px, calc(94vw / 1050)); position: static; display: block; padding: 0 var(--bp-space-4) var(--bp-space-8); overflow: visible; touch-action: auto; }
[data-device="mo"] .bp-modal--card-picker:not(.is-enhanced) { --bp-cp-u: min(1px, calc(94vw / 350)); }
.bp-modal--card-picker:not(.is-enhanced) .bp-modal__dim, .bp-modal--card-picker:not(.is-enhanced) .bp-cardpick__close { display: none; }

.bp-cardpick__box { position: relative; padding: calc(var(--bp-cp-u) * 67) 0 calc(var(--bp-cp-u) * 38); border-radius: calc(var(--bp-cp-u) * 11); background: var(--bp-color-bg-card); box-shadow: var(--bp-shadow-modal); outline: none; }
[data-device="mo"] .bp-cardpick__box { padding: calc(var(--bp-cp-u) * 36) 0 calc(var(--bp-cp-u) * 31); border-radius: calc(var(--bp-cp-u) * 10); }
.bp-cardpick__list { display: flex; justify-content: center; }
.bp-cardpick__list--top { gap: calc(var(--bp-cp-u) * 82); }
.bp-cardpick__list--top + .bp-cardpick__list--bottom { margin-top: calc(var(--bp-cp-u) * 52); }
.bp-cardpick__list--bottom { gap: calc(var(--bp-cp-u) * 26); }
[data-device="mo"] .bp-cardpick__list--top { gap: calc(var(--bp-cp-u) * 15); }
[data-device="mo"] .bp-cardpick__list--top + .bp-cardpick__list--bottom { margin-top: calc(var(--bp-cp-u) * 12); }
[data-device="mo"] .bp-cardpick__list--bottom { flex-direction: column; align-items: center; gap: calc(var(--bp-cp-u) * 7); }

/* 타일: 로고 · 혜택 문구 2~3줄 · 신청하기. 타일 전체가 링크다(버튼의 ::after 가 타일을 덮는다) */
.bp-cardpick__tile { position: relative; display: flex; flex: none; flex-direction: column; align-items: center; border-radius: calc(var(--bp-cp-u) * 12); background: var(--bp-color-bg-surface); box-shadow: var(--bp-shadow-card); text-align: center; }
.bp-cardpick__list--top .bp-cardpick__tile { width: calc(var(--bp-cp-u) * 362); min-height: calc(var(--bp-cp-u) * 416); }
.bp-cardpick__list--bottom .bp-cardpick__tile { width: calc(var(--bp-cp-u) * 201); min-height: calc(var(--bp-cp-u) * 290); }
.bp-cardpick__logo { display: flex; align-items: center; justify-content: center; max-width: 100%; }
.bp-cardpick__list--top .bp-cardpick__logo { height: calc(var(--bp-cp-u) * 144); margin-top: calc(var(--bp-cp-u) * 69); }
.bp-cardpick__list--bottom .bp-cardpick__logo { height: calc(var(--bp-cp-u) * 106); margin-top: calc(var(--bp-cp-u) * 31); }
.bp-cardpick__logo-img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* 로고 이미지가 연결되기 전(logoUrl 없음)의 자리표시: 카드사 대표색 점 + 이름. 글자는 짙은 색이라 대표색 위 대비를 따지지 않는다 */
.bp-cardpick__logo-ph { display: grid; justify-items: center; gap: calc(var(--bp-cp-u) * 14); }
.bp-cardpick__logo-dot { width: calc(var(--bp-cp-u) * 60); height: calc(var(--bp-cp-u) * 60); border-radius: var(--bp-radius-circle); background: var(--bp-card-color); }
.bp-cardpick__list--bottom .bp-cardpick__logo-dot { width: calc(var(--bp-cp-u) * 44); height: calc(var(--bp-cp-u) * 44); }
.bp-cardpick__logo-name { font-size: max(14px, calc(var(--bp-cp-u) * 28)); font-weight: var(--bp-fw-bold); color: var(--bp-color-text-strong); line-height: 1.2; }
.bp-cardpick__list--bottom .bp-cardpick__logo-name { font-size: max(14px, calc(var(--bp-cp-u) * 20)); }
.bp-cardpick__copy { display: grid; max-width: 100%; padding-inline: calc(var(--bp-cp-u) * 6); color: var(--bp-color-text-strong); font-weight: var(--bp-fw-regular); }
.bp-cardpick__list--top .bp-cardpick__copy { margin-top: calc(var(--bp-cp-u) * 30); margin-bottom: calc(var(--bp-cp-u) * 20); font-size: max(14px, calc(var(--bp-cp-u) * 22.5)); line-height: 1.11; }
.bp-cardpick__list--bottom .bp-cardpick__copy { margin-top: calc(var(--bp-cp-u) * 28); margin-bottom: calc(var(--bp-cp-u) * 16); font-size: max(14px, calc(var(--bp-cp-u) * 18.5)); line-height: 1.05; }
.bp-cardpick__line { display: block; }
.bp-cardpick__apply { position: static; min-height: 0; margin-top: auto; padding: 0; font-weight: var(--bp-fw-medium); }
.bp-cardpick__apply::after { content: ""; position: absolute; inset: 0; }   /* 타일 전체가 링크 영역(모서리까지) */
.bp-cardpick__list--top .bp-cardpick__apply { width: calc(var(--bp-cp-u) * 225); height: calc(var(--bp-cp-u) * 75); margin-bottom: calc(var(--bp-cp-u) * 28); font-size: max(18.7px, calc(var(--bp-cp-u) * 30)); }
.bp-cardpick__list--bottom .bp-cardpick__apply { width: calc(var(--bp-cp-u) * 163); height: calc(var(--bp-cp-u) * 47); margin-bottom: calc(var(--bp-cp-u) * 22); font-size: max(18.7px, calc(var(--bp-cp-u) * 22.7)); }
/* 눌림(MO): hover 와 같은 카드사 색. 글자색 대비는 design-system §1-2(신한은 굵은 큰 글자 3:1)를 따른다 */
.bp-cardpick__apply:active { background: var(--bp-card-bg, var(--bp-color-bg-card)); color: var(--bp-card-on, var(--bp-color-text-strong)); box-shadow: var(--bp-shadow-pick-hover); }
/* transform 을 끈다: .bp-btn:active 의 translateY 는 버튼을 ::after(타일 전체 링크 영역)의 기준 박스로 만들어, 눌린 동안 링크 영역이 버튼 크기로 줄고 mouseup 이 밖에 떨어져 클릭이 안 된다. .bp-btn:active:not(:disabled):not(.is-disabled) 보다 구체적이어야 이긴다 */
.bp-btn.bp-cardpick__apply:active:not(:disabled):not(.is-disabled) { transform: none; }
[data-card="shinhan"] .bp-cardpick__apply:active { font-weight: var(--bp-fw-bold); }

/* MO: 상단 135×187 두 개 + 하단 309×65 가로형 4행. 신청하기 글자는 굵은 18.7px 이상(큰 글자) — 신한 눌림색 대비 4.46:1 이 큰 글자 기준 3:1 을 넘는다 */
[data-device="mo"] .bp-cardpick__list--top .bp-cardpick__tile { width: calc(var(--bp-cp-u) * 135); min-height: calc(var(--bp-cp-u) * 187); }
[data-device="mo"] .bp-cardpick__list--top .bp-cardpick__logo { height: calc(var(--bp-cp-u) * 56); margin-top: calc(var(--bp-cp-u) * 18); }
[data-device="mo"] .bp-cardpick__list--top .bp-cardpick__logo-dot { width: calc(var(--bp-cp-u) * 26); height: calc(var(--bp-cp-u) * 26); }
[data-device="mo"] .bp-cardpick__list--top .bp-cardpick__logo-ph { gap: calc(var(--bp-cp-u) * 6); }
[data-device="mo"] .bp-cardpick__list--top .bp-cardpick__logo-name { font-size: 14px; }
[data-device="mo"] .bp-cardpick__list--top .bp-cardpick__copy { margin-top: calc(var(--bp-cp-u) * 10); margin-bottom: calc(var(--bp-cp-u) * 8); font-size: 14px; line-height: 1.2; }
[data-device="mo"] .bp-cardpick__list--top .bp-cardpick__apply { width: calc(var(--bp-cp-u) * 108); height: calc(var(--bp-cp-u) * 34); margin-bottom: calc(var(--bp-cp-u) * 12); font-size: 1.17rem; font-weight: var(--bp-fw-bold); }
[data-device="mo"] .bp-cardpick__list--bottom .bp-cardpick__tile { flex-direction: row; gap: calc(var(--bp-cp-u) * 6); width: calc(var(--bp-cp-u) * 309); min-height: calc(var(--bp-cp-u) * 65); padding: calc(var(--bp-cp-u) * 6) calc(var(--bp-cp-u) * 8); border-radius: calc(var(--bp-cp-u) * 13); text-align: left; }
[data-device="mo"] .bp-cardpick__list--bottom .bp-cardpick__logo { flex: 0 0 calc(var(--bp-cp-u) * 76); height: auto; margin: 0; }
[data-device="mo"] .bp-cardpick__list--bottom .bp-cardpick__logo-dot { display: none; }
[data-device="mo"] .bp-cardpick__list--bottom .bp-cardpick__logo-name { font-size: 14px; text-align: center; }
[data-device="mo"] .bp-cardpick__list--bottom .bp-cardpick__copy { flex: 1 1 0; min-width: 0; margin: 0; padding: 0; font-size: 14px; line-height: 1.25; }
[data-device="mo"] .bp-cardpick__list--bottom .bp-cardpick__apply { flex: 0 0 calc(var(--bp-cp-u) * 82); width: calc(var(--bp-cp-u) * 82); height: calc(var(--bp-cp-u) * 36); margin: 0; font-size: 1.17rem; font-weight: var(--bp-fw-bold); background: var(--bp-color-bg-band); box-shadow: none; }
[data-device="mo"] .bp-cardpick__list--bottom .bp-cardpick__apply:hover, [data-device="mo"] .bp-cardpick__list--bottom .bp-cardpick__apply:focus-visible, [data-device="mo"] .bp-cardpick__list--bottom .bp-cardpick__apply:active { background: var(--bp-card-bg); color: var(--bp-card-on); }   /* 기본 배경 규칙(위)보다 구체적이라 hover/focus/눌림 색을 다시 건다 */

/* 하단 안내 + 혜택 바로가기 */
.bp-cardpick__notice { margin-top: calc(var(--bp-cp-u) * 30); padding-inline: calc(var(--bp-cp-u) * 16); font-size: max(14px, calc(var(--bp-cp-u) * 28.1)); line-height: 1.2; text-align: center; color: var(--bp-color-text-strong); }
.bp-cardpick__notice b { font-weight: var(--bp-fw-bold); }
.bp-cardpick__notice-label { font-weight: var(--bp-fw-bold); color: var(--bp-color-notice-label); }
.bp-cardpick__cta { display: flex; width: calc(var(--bp-cp-u) * 718); max-width: calc(100% - var(--bp-cp-u) * 32); min-height: 0; height: calc(var(--bp-cp-u) * 80); margin: calc(var(--bp-cp-u) * 46) auto 0; padding: 0; border-radius: calc(var(--bp-cp-u) * 12); font-size: max(14px, calc(var(--bp-cp-u) * 42.9)); }
.bp-cardpick__cta-ic { width: 1em; height: 1em; }
[data-device="mo"] .bp-cardpick__notice { margin-top: calc(var(--bp-cp-u) * 14); font-size: 14px; }
[data-device="mo"] .bp-cardpick__notice-label { display: block; margin-bottom: calc(var(--bp-cp-u) * 6); }
[data-device="mo"] .bp-cardpick__cta { width: calc(var(--bp-cp-u) * 281); height: calc(var(--bp-cp-u) * 48); margin-top: calc(var(--bp-cp-u) * 19); border-radius: calc(var(--bp-cp-u) * 15); font-size: max(14px, calc(var(--bp-cp-u) * 22)); }

/* 닫기 X: 박스 바깥 위 오른쪽. 보이는 원은 24px, 누르는 영역은 44px(--bp-touch-min) */
.bp-cardpick__close { position: absolute; top: calc(var(--bp-cp-u) * -28 - var(--bp-touch-min) / 2); right: calc(var(--bp-cp-u) * 40 - var(--bp-touch-min) / 2); display: inline-flex; align-items: center; justify-content: center; width: var(--bp-touch-min); height: var(--bp-touch-min); }
[data-device="mo"] .bp-cardpick__close { top: calc(var(--bp-cp-u) * -15 - var(--bp-touch-min) / 2); right: calc(var(--bp-cp-u) * 20 - var(--bp-touch-min) / 2); }
.bp-cardpick__close-ic { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: var(--bp-radius-circle); background: var(--bp-color-border-muted); color: var(--bp-color-text-strong); transition: background-color var(--bp-dur-fast); }
.bp-cardpick__close:hover .bp-cardpick__close-ic, .bp-cardpick__close:focus-visible .bp-cardpick__close-ic { background: var(--bp-color-bg-surface); }
.bp-cardpick__close .bp-icon { width: 14px; height: 14px; }
.bp-cardpick__close:focus-visible { outline-color: var(--bp-color-text-inverse); outline-offset: -4px; }

/* 허브 본문(팝업 뒤): 제목·안내·두 갈래 */
.bp-cardhub { display: grid; justify-items: center; gap: var(--bp-space-3); padding-block: var(--bp-space-7) var(--bp-space-6); text-align: center; }
.bp-cardhub__title { font-size: var(--bp-fs-display); color: var(--bp-color-brand-deep); }
.bp-cardhub__lead { font-size: var(--bp-fs-title); color: var(--bp-color-text-strong); }
.bp-cardhub__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--bp-space-3); margin-top: var(--bp-space-3); }
.bp-cardhub__empty { padding: var(--bp-space-6) 0 var(--bp-space-8); text-align: center; color: var(--bp-color-text-muted); }
@media (prefers-reduced-motion: reduce) { .bp-cardpick__close-ic { transition: none; } }
/* 메인 임시 화면의 카드 진입점(메인 P3 에서 배너로 대체) */
.bp-cardhub__entry { display: grid; gap: var(--bp-space-3); margin-top: var(--bp-space-6); }
.bp-cardhub__entry-list { display: flex; flex-wrap: wrap; gap: var(--bp-space-3); }
[data-device="mo"] .bp-cardhub__entry-list { flex-direction: column; }
/* ── 실제 화면(P2 WP-8: /card/benefit · /card/{issuerCd} 템플릿 · /card/first-meet)에서 더해지는 규칙. 샘플의 클래스는 그대로 쓰고 아래만 추가한다 ───────────── */
.bp-cbenefit__empty { padding-block: var(--bp-space-5); text-align: center; }
.bp-cbenefit__note > * + *, .bp-cbenefit__bebe-note > * + * { margin-top: var(--bp-space-1); }
.bp-cbenefit__foot > * + * { margin-top: var(--bp-space-1); }
/* 혜택 요약 아래 비교 링크 */
.bp-card-landing__more { margin-top: var(--bp-space-4); }
.bp-card-landing__more-link { display: inline-flex; align-items: center; gap: var(--bp-space-1); min-height: var(--bp-touch-min); color: var(--bp-color-brand-text); font-weight: var(--bp-fw-bold); text-decoration: underline; }
/* 발송 일정·조건 공용 부품(common/card/ship-info.jsp): 표 + 콘텐츠 블록 */
.bp-ship-info__table caption { text-align: left; }
.bp-ship-info__group { text-align: left; }
.bp-ship-info__empty { color: var(--bp-color-text-muted); }
.bp-ship-info__condition { margin-top: var(--bp-space-4); font-size: var(--bp-fs-small); }
.bp-ship-info__table + .bp-ship-info__condition { padding-top: var(--bp-space-4); border-top: 1px dashed var(--bp-color-border-soft); }
/* 카드 광고 고지(콘텐츠 블록 본문) */
.bp-card-landing__ad-body { margin-top: var(--bp-space-2); font-size: var(--bp-fs-small); color: var(--bp-color-text-muted); }
.bp-card-landing__ad-body > * + * { margin-top: var(--bp-space-2); }
.bp-card-landing__ad-body ul { list-style: disc; padding-left: var(--bp-space-5); }
/* 첫만남이용권 안내(콘텐츠 블록) */
.bp-first-meet { margin-block: var(--bp-space-6); }
.bp-first-meet__panel { padding: var(--bp-space-6); border-radius: var(--bp-radius-xl); background: var(--bp-color-bg-surface); box-shadow: var(--bp-shadow-panel); color: var(--bp-color-text-strong); }
.bp-first-meet__panel h3 { margin-top: var(--bp-space-5); font-size: var(--bp-fs-title); font-weight: var(--bp-fw-bold); color: var(--bp-color-brand-deep); }
.bp-first-meet__empty { padding-block: var(--bp-space-8); text-align: center; color: var(--bp-color-text-muted); }
[data-device="mo"] .bp-first-meet__panel { padding: var(--bp-space-4); }
/* ── 28. 카드 응모 실제 화면(P2 WP-7, design-system §2-24 보강) ─────────────
   대화상자(승인 샘플 §24)와 같은 마크업을 전체 페이지(/card/{cd}/apply)에 그리는 변형. 대화상자 전용 속성(고정 위치·딤)만 풀고 나머지 모양은 그대로다. */
.bp-capply-modal--page { position: static; inset: auto; z-index: auto; display: block; padding: 0; touch-action: auto; overscroll-behavior: auto; }
.bp-capply-modal--page .bp-modal__panel { width: 100%; max-width: 720px; max-height: none; margin-inline: auto; overflow: visible; border: 1px solid var(--bp-color-border-soft); box-shadow: none; }
.bp-capply-modal--page .bp-modal__body { overflow: visible; }
[data-device="mo"] .bp-capply-modal--page .bp-modal__panel { height: auto; max-height: none; border: 0; border-radius: 0; animation: none; }
/* 로그인 안내를 거쳐 오는 CTA 의 버튼(링크)은 클릭 중 두 번 눌리지 않게 */
[data-bp-card-apply-open][aria-busy="true"] { pointer-events: none; opacity: .7; }
.bp-capply__formerr { margin: var(--bp-space-3) 0 0; text-align: center; font-size: var(--bp-fs-body); }
.bp-capply__formerr:focus-visible { outline: 2px solid var(--bp-color-brand); outline-offset: 4px; }