/* ── Visa 짐 1개 무료 안내 창 (#608) ─────────────────────────────────────────
   마크업: templates/fragments/visaFreeBagInfo.html. 창 자체는 css/kd/bottomsheet.css 가 그린다 —
   여기서는 ① 이 인스턴스의 겹침 순서와 ② 안에 들어가는 안내 내용만 다룬다.
   ⚠️ 내용 디자인은 확정 전이다(바뀔 수 있음). 색·목록 모양은 지금 메인 이벤트 블록(index.html .gl-visa-*)과 맞췄다. */

/* ① 겹침 순서. BottomSheet 기본값(2000·2001)은 공용 헤더(9999, layout.css)와 AskAI 런처
   (2147482000, askai-widget.css)보다 아래라, 창이 열린 채 헤더·런처가 위에 떠서 눌린다.
   결제 직전 안내(koreaDelivery.css .vfb-final, 2147482500)와 같은 근거로 그 위에 둔다.
   AskAI 팝업(2147483000)은 런처가 가려져 열 수 없으므로 겹치지 않는다. */
#overlay-visa-free-bag-info {
    z-index: 2147482500;
}
#bottomsheet-visa-free-bag-info {
    z-index: 2147482501;
}

/* 제목 자리의 Visa 로고(visaFreeBagInfo.js 가 넣는다). 닫기 버튼(32px) 높이의 가운데에 맞춘다.
   로고 둘레 0.5X(11.5px): 위는 헤더 안쪽 여백(14~20px), 옆의 닫기 버튼까지는 가운데 정렬이라 충분히 떨어진다. */
#title-visa-free-bag-info.vfbi-title-logo {
    align-self: center;
    margin-top: 0;
    line-height: 0;
}
/* 로고 바로 아래 한 문장 = BottomSheet 부제목 칸(#subtitle-…). 헤더 안이라 본문을 스크롤해도 로고와 함께 고정된다.
   가운데 정렬 + 얇은 선으로 아래 본문(왼쪽 정렬)과 나눈다(2026-10-15 결정).
   로고는 닫기 버튼(32px) 줄 가운데라 로고 밑에 4.5px 가 이미 있다 → 제목 줄 아래 여백을 걷고 문장 위 7px 를 더해
   로고↔문장 줄 상자 12px. 가이드 여백 0.5X(11.5px)를 지키는 가장 가까운 거리다. */
#bottomsheet-visa-free-bag-info .bottonsheet-header-top {
    margin-bottom: 0;
}
#bottomsheet-visa-free-bag-info #subtitle-visa-free-bag-info {
    margin: 0;
    /* 폰에서 두 줄이 될 때 길이를 고르게 나눈다(뒤에 한 단어만 남지 않게). PC 는 한 줄 그대로.
       지원 안 하는 옛 브라우저는 지금처럼 보이기만 한다. */
    text-wrap: balance;
    padding: 7px 0 16px;
    border-bottom: 1px solid #ece8f3;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    color: #1434CB;  /* Visa Blue, 흰 바탕 대비 8.81:1 */
}

/* ② 안내 내용 — 디자인 ~/Downloads/visa-1bag-free-popup (2026-10-26).
   세 영역(Promotion Details / How to Use / Must-Knows)은 아이콘 칸 너비와 글자 시작선을 맞춘다:
   모바일 아이콘 칸 36px + 간격 12px, PC(768px+) 40px + 14px. 보라는 이 페이지 팔레트 #4B2E6E(디자인 #4A2B6E 와 같은 색). */
#bottomsheet-visa-free-bag-info {
    --vfbi-icon: 36px;
    --vfbi-gap: 12px;
    --vfbi-pad: 16px;
}
/* 회색 구분선(위 규칙의 border-bottom)은 유지한다 — 머리(로고·문장)와 본문을 나누는 선(2026-10-26 사용자 확인). */
#bottomsheet-visa-free-bag-info #subtitle-visa-free-bag-info {
    font-size: 17px;
    line-height: 1.35;
    padding-bottom: 18px;
}
/* 닫기: 32px 회색 원, 누르는 영역은 44px (공용 버튼 모양은 이 창에서만 바꾼다) */
#bottomsheet-visa-free-bag-info .bottomsheet-close-btn {
    width: 44px;
    height: 44px;
    margin: -6px -8px 0 0;
    border-radius: 50%;
    background: transparent;
    background-image: radial-gradient(circle, #F2F1F4 15.5px, transparent 16px);
    color: #5B5866;
}
.vfbi {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding-top: 20px;  /* 머리 아래 구분선과 첫 제목 사이 */
    text-align: left;
    color: #1F1D24;
}
.vfbi-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.vfbi-group-title {
    margin: 0;
    font-size: 15px;
    font-weight: 600;
    color: #4B2E6E;
}
.vfbi-box {
    margin: 0;
    padding: var(--vfbi-pad);
    list-style: none;
    border: 1px solid #ECE6F4;
    border-radius: 16px;
}
.vfbi-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
}

/* Promotion Details: 아이콘 원 + 이름(작은 회색) 위 · 값(굵게) 아래 */
.vfbi-details {
    padding-top: 4px;
    padding-bottom: 4px;
}
.vfbi-details li {
    display: flex;
    align-items: center;
    gap: var(--vfbi-gap);
    padding: 12px 0;
}
.vfbi-details li + li {
    border-top: 1px solid #F0ECF5;
}
.vfbi-details .vfbi-icon {
    width: var(--vfbi-icon);
    height: var(--vfbi-icon);
    border-radius: 50%;
    background: #F3EEF9;
    color: #4B2E6E;
}
.vfbi-details .is-benefit .vfbi-icon {
    background: #4B2E6E;
    color: #fff;
}
.vfbi-kv {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}
.vfbi-kv-label {
    font-size: 12px;
    font-weight: 500;
    color: #6B6478;
}
.vfbi-kv-value {
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
}
.vfbi-details .is-benefit .vfbi-kv-value {
    color: #4B2E6E;
}

/* How to Use: 번호 원(28px)을 아이콘 칸 가운데에 두고 세로선으로 잇는다 */
.vfbi-steps li {
    position: relative;
    display: grid;
    grid-template-columns: var(--vfbi-icon) minmax(0, 1fr);
    column-gap: var(--vfbi-gap);
}
.vfbi-steps li:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(var(--vfbi-icon) / 2 - 1px);
    top: 32px;
    bottom: 4px;
    width: 2px;
    background: #E2DAEE;
}
.vfbi-step-num {
    justify-self: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #4B2E6E;
    color: #fff;
    font-size: 13px;
    font-weight: 600;
    line-height: 28px;
    text-align: center;
}
.vfbi-steps p {
    margin: 0;
    padding: 3px 0 18px;
    font-size: 14px;
    line-height: 1.5;
}
.vfbi-steps li:last-child p {
    padding-bottom: 0;
}
/* 단계 글자("Step 1") — 문장 위에 작게, 메인 How It Works 의 STEP 1 과 같은 위계 */
.vfbi-step-label {
    display: block;
    margin-bottom: 1px;
    font-size: 12px;
    font-weight: 600;
    line-height: 1.4;
    color: #4B2E6E;
}
/* 1단계 서비스명 — 본문보다 한 단계만 굵게(칩만큼 튀지 않게) */
.vfbi-strong {
    font-weight: 600;
}
.vfbi-chip {
    padding: 1px 6px;
    border-radius: 6px;
    background: #EEF1FD;
    color: #1434CB;  /* Visa Blue */
    font-weight: 600;
    white-space: nowrap;
}

/* Must-Knows: 옅은 바탕 상자, 마지막 줄(다른 카드 결제 시 취소)은 점선 위·굵은 글씨 */
.vfbi-musts {
    display: flex;
    flex-direction: column;
    gap: 10px;
    border-color: #ECE9F0;
    background: #FAFAFB;
}
.vfbi-musts li {
    display: grid;
    grid-template-columns: var(--vfbi-icon) minmax(0, 1fr);
    column-gap: var(--vfbi-gap);
    font-size: 13px;
    line-height: 1.5;
    color: #3A3742;
}
.vfbi-musts .vfbi-icon {
    justify-self: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #F0EBF7;
}
.vfbi-musts li > span:last-child {
    padding-top: 4px;
}
.vfbi-musts li.is-warn {
    padding-top: 10px;
    border-top: 1px dashed #E2DEE8;
}
.vfbi-musts li.is-warn > span:last-child {
    font-weight: 500;
    color: #1F1D24;
}
/* #669 첫 줄(본인 카드만): 빨간 글씨·빨간 아이콘. 결제 화면 경고(.visa-freebag-notice.warn)와 같은 붉은색. */
.vfbi-musts li.is-alert > span:last-child {
    font-weight: 700;
    color: #DC2626;
}
.vfbi-musts li.is-alert .vfbi-icon {
    background: #FDE8E6;
}

/* 아래 고정 버튼 — 스크롤 영역(.bottomsheet-content) 바닥에 붙는다. 공용 BottomSheet 에 하단 칸이 없어
   이 창 안에서 sticky 로 처리한다. 좌우 -20px 은 .bottomsheet-content 안쪽 여백만큼 넓혀 구분선을 끝까지 긋는 것. */
.vfbi-footer {
    position: sticky;
    bottom: -20px;
    margin: 0 -20px -20px;
    padding: 12px 20px calc(20px + env(safe-area-inset-bottom));
    border-top: 1px solid #EFEDF2;
    background: #fff;
}
.vfbi-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    border-radius: 12px;
    background: #4B2E6E;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
}
/* 시작 전 미리 노출(#608) — 버튼 자리의 "곧 열림" 한 줄. 누를 수 있어 보이면 안 되므로 버튼 모양(배경·둥근 상자)은 쓰지 않는다.
   높이는 버튼과 같게 둬서 시작일에 버튼으로 바뀌어도 창 아래가 들썩이지 않게 한다.
   그 아래 시작일 한 줄(#648)은 작은 회색 — 두 줄이 같은 높이 안에 세로로 들어간다. */
.vfbi-soon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    height: 52px;
    margin: 0;
}
.vfbi-soon-label {
    margin: 0;
    color: #4B2E6E;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.25;
}
.vfbi-soon-date {
    margin: 0;
    color: #6B6478;
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
    white-space: nowrap;
}
.vfbi-cta:hover,
.vfbi-cta:focus {
    color: #fff;
    text-decoration: none;
}
.vfbi-cta:focus-visible,
#bottomsheet-visa-free-bag-info .bottomsheet-close-btn:focus-visible {
    outline: 2px solid #1434CB;
    outline-offset: 2px;
}
/* 링크로 자동으로 열 때 창 자체에 초점을 둔다(#659) — 창 테두리에 초점 표시는 그리지 않는다 */
#bottomsheet-visa-free-bag-info:focus {
    outline: none;
}

/* PC 가운데 모달: 폭 540px, 아이콘 칸 40px + 14px, 글자 한 단계 크게 */
@media (min-width: 768px) {
    #bottomsheet-visa-free-bag-info {
        --vfbi-icon: 40px;
        --vfbi-gap: 14px;
        --vfbi-pad: 20px;
        max-width: 540px;
        border-radius: 24px;
    }
    #bottomsheet-visa-free-bag-info #subtitle-visa-free-bag-info {
        font-size: 19px;
    }
    #bottomsheet-visa-free-bag-info .bottomsheet-content {
        padding: 0 32px 28px;
    }
    .vfbi { gap: 28px; }
    .vfbi-group { gap: 12px; }
    .vfbi-group-title { font-size: 16px; }
    .vfbi-details li { padding: 14px 0; }
    .vfbi-kv { gap: 2px; }
    .vfbi-kv-label { font-size: 13px; }
    .vfbi-kv-value { font-size: 15px; }
    .vfbi-steps { padding-top: 18px; padding-bottom: 18px; }
    .vfbi-step-num { width: 30px; height: 30px; line-height: 30px; font-size: 14px; }
    .vfbi-steps li:not(:last-child)::after { top: 34px; }
    .vfbi-steps p { padding: 4px 0 20px; font-size: 15px; }
    .vfbi-musts { padding-top: 18px; padding-bottom: 18px; }
    .vfbi-musts li { font-size: 14px; }
    .vfbi-musts .vfbi-icon { width: 30px; height: 30px; }
    .vfbi-footer {
        bottom: -28px;
        margin: 0 -32px -28px;
        padding: 16px 32px 28px;
    }
    .vfbi-cta { height: 56px; border-radius: 14px; font-size: 17px; }
    .vfbi-soon { height: 56px; }
    .vfbi-soon-label { font-size: 17px; }
    .vfbi-soon-date { font-size: 14px; }
}

/* ③ 디자인 없는 모양(대기용) — 2026-10-26 사용자 요청: "디자인 빼라" 하면 바로 돌려둘 수 있게.
   켜는 법: fragments/visaFreeBagInfo.html 의 <div class="vfbi"> 에 vfbi--plain 클래스 하나만 붙인다. 문구 키·마크업·SQL 은 그대로.
   모양 = 디자인 파일 넣기 전: 상자·아이콘 없이 묶음 제목 + 점 목록, 항목 이름/값은 한 줄("Period: …"),
   단계는 "Step 1 문장" 글자만(동그라미·선 없음), 결제수단 이름·서비스명도 일반 글씨, 마지막 주의사항 강조 없음 — "그냥 글만"(2026-10-26). 하단 고정 버튼·머리 회색 선·스와이프 처리는 공통이라 그대로. */
.vfbi--plain {
    gap: 18px;
}
.vfbi--plain .vfbi-group {
    gap: 6px;
}
.vfbi--plain .vfbi-group-title {
    font-size: 13px;
    font-weight: 700;
}
.vfbi--plain .vfbi-box {
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}
/* 점 목록 (Promotion Details · Must-Knows) */
.vfbi--plain .vfbi-details li,
.vfbi--plain .vfbi-musts li {
    display: block;
    position: relative;
    padding: 0 0 0 14px;
    border: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #333;
}
.vfbi--plain .vfbi-details li + li,
.vfbi--plain .vfbi-musts li + li {
    margin-top: 4px;
    border-top: 0;
}
.vfbi--plain .vfbi-details li::before,
.vfbi--plain .vfbi-musts li::before {
    content: "";
    position: absolute;
    left: 2px;
    top: 0.65em;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #4B2E6E;
}
.vfbi--plain .vfbi-details .vfbi-icon,
.vfbi--plain .vfbi-musts .vfbi-icon {
    display: none;
}
.vfbi--plain .vfbi-musts {
    gap: 4px;
}
.vfbi--plain .vfbi-musts li > span:last-child {
    padding-top: 0;
}
.vfbi--plain .vfbi-musts li.is-warn {
    padding-top: 0;
    border-top: 0;
}
.vfbi--plain .vfbi-musts li.is-warn > span:last-child {
    font-weight: inherit;
    color: inherit;
}
.vfbi--plain .vfbi-musts li.is-alert {
    color: #DC2626;
    font-weight: 700;
}
.vfbi--plain .vfbi-musts li.is-alert::before {
    background: #DC2626;
}
/* 항목 이름/값을 한 줄로 — 사이 띄어쓰기는 마크업의 공백 하나로 충분하다(여백을 더하면 두 칸으로 보인다) */
.vfbi--plain .vfbi-kv {
    display: inline;
}
.vfbi--plain .vfbi-kv-label,
.vfbi--plain .vfbi-kv-value,
.vfbi--plain .vfbi-details .is-benefit .vfbi-kv-value {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    color: inherit;
}
/* 단계: 동그라미·잇는 선 없이 "Step 1 문장" 글자로만 */
.vfbi--plain .vfbi-steps {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.vfbi--plain .vfbi-steps li {
    display: flex;
    gap: 6px;
}
.vfbi--plain .vfbi-steps li:not(:last-child)::after {
    content: none;
}
.vfbi--plain .vfbi-step-num {
    flex: none;
    width: auto;
    min-width: 1.1em;  /* "1." 과 "2." 폭이 달라 문장 시작선이 어긋나지 않게 */
    font-variant-numeric: tabular-nums;
    height: auto;
    border-radius: 0;
    background: none;
    color: #333;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.55;
    text-align: left;
}
.vfbi--plain .vfbi-step-num {
    display: none;
}
.vfbi--plain .vfbi-step-label {
    display: inline;
    margin: 0 0.4em 0 0;
    font-size: inherit;
    font-weight: 600;
    line-height: inherit;
    color: inherit;
}
.vfbi--plain .vfbi-steps p,
.vfbi--plain .vfbi-steps li:last-child p {
    padding: 0;
    font-size: 14px;
    line-height: 1.55;
    color: #333;
}
/* 결제수단 이름·서비스명도 일반 글씨 */
.vfbi--plain .vfbi-chip,
.vfbi--plain .vfbi-strong {
    padding: 0;
    background: none;
    color: inherit;
    font-weight: inherit;
}
@media (min-width: 768px) {
    .vfbi--plain { gap: 18px; }
    .vfbi--plain .vfbi-group { gap: 6px; }
    .vfbi--plain .vfbi-group-title { font-size: 13px; }
    .vfbi--plain .vfbi-steps,
    .vfbi--plain .vfbi-musts { padding-top: 0; padding-bottom: 0; }
    .vfbi--plain .vfbi-details li,
    .vfbi--plain .vfbi-musts li,
    .vfbi--plain .vfbi-steps p { font-size: 14px; }
    .vfbi--plain .vfbi-step-num { width: auto; min-width: 1.1em; height: auto; line-height: 1.55; font-size: 14px; }
    .vfbi--plain .vfbi-steps p,
    .vfbi--plain .vfbi-steps li:last-child p { padding: 0; }
}