/* ============================================================
   계좌이체 결제 수단 · 입금 안내 (2026-10-26 재설계, docs/bank-ui/01_fable_spec.md BU1~BU14 · 03_astra_a.md)
   js/sections/lms/bank-transfer.js(주문 창 결제 수단 · 입금표) · vbank-guide.js(vbank-guide.html 페이지)가 쓴다.
   시안 docs/bank-ui/mock/bank-transfer.proposed.css 를 옮기고 아스트라 검토를 반영했다(아래 「A1~A6」).
     A1 휴대폰 군청 머리를 줄여(제목 24px · 위아래 여백) 금액 · 은행 · 계좌번호 · 예금주 · 기한이 첫 화면(390x844)에 함께 보이게
     A2 계좌번호는 글자를 줄여 한 줄을 지키지 않는다(휴대폰 28px 고정). 넘치면 하이픈 뒤에서만 줄바꿈(JS 가 <wbr> 를 넣음)
     A3 기한 지남 설명의 전화번호는 줄 중간에서 끊지 않는다(.vg-lead b nowrap)
     A4 그림자를 좁고 옅게(홈 .hr-off-card 와 비슷한 값), 카드 아래 여백 72/48 → 56/32px
     A5 15px 글자를 없앰: 설명 · 예금주 · 보조 문장 · 주문 줄 · 이름표 · 머리말 15 → 16px(과정 소개 휴대폰 글자 단 17 · 16 · 14)
     A6 주문 창 안내 상자는 전체 굵게 대신 핵심 문장(<b>)만 굵게
     반영하지 않음: 아스트라 「모든 r 값 하나로」 - 대표 말은 한 상자의 네 모서리를 같게였으므로 바깥 18 · 안쪽 12 두 값 유지(BU3)
   원칙: 색 면은 군청 · 보라 · 흰색 · 연두(군청 위)만, 파스텔 틴트 · 왼쪽 막대 · 초록 · 주황 · 회색 테두리 표 없음,
         모서리는 두 값(바깥 18px · 안쪽 12px)만, 글자는 50~70대 휴대폰 기준(본문 17px 이상, 누르는 자리 48px 이상).
   탈출구: 예전 판(테두리 표 · 초록 상자)은 git 기록(이 파일 2026-10-26 ez4)에 있다.
   ============================================================ */

/* ───── 토큰(BU3): 두 화면이 함께 쓴다. 과정 소개 .ci · 홈 .hv 와 같은 값 ───── */
.vg, .enr-sheet {
    --k-violet: #553ae7; --k-violet-dark: #4128c9; --k-navy: #0f1a4b; --k-lime: #c8f03c;
    --k-ink: #14151a; --k-text: #3d404a; --k-muted: #5f636e; --k-line: #e4e5e9; --k-soft: #f3f4f6;
    --k-on-navy-2: #c5c9d9; --k-on-navy-3: #9ba1b8; --k-navy-line: rgba(255, 255, 255, .14);
    --r-outer: 18px;   /* 바깥 틀: 입금표 카드 · 주문 창(.enr-sheet 18px 과 같음) */
    --r-inner: 12px;   /* 안쪽: 단추 · 선택 칸 · 안내 칸 · 입력란(.enr-primary · .enr-agree 12px 과 같음) */
    --bk-shadow: 0 8px 24px rgba(11, 11, 15, .08); /* A4: 넓게 번진 그림자 대신 좁고 옅게(홈 .hr-off-card 0 10px 28px .06 과 비슷) */
}

/* ============================================================
   1. 주문 창 결제 수단(bank-transfer.js methodBlock) - BU9 · BU10 · BU11
   ============================================================ */
.bk-method { margin: 18px 0 6px; }
.bk-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.bk-choice { position: relative; display: block; cursor: pointer; }
.bk-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
/* 선택 칸(BU9): 비선택 = 흰 바탕 · 1px 선, 선택 = 군청 면 · 흰 글자 + 제목 아래 연두 띠(머리글의 현재 메뉴 띠와 같은 장치).
   아이콘 없음(RD4 · RD25). 모서리 12px */
.bk-choice-box {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 88px; padding: 14px 10px;
    border: 1px solid var(--k-line); border-radius: var(--r-inner); background: #fff; color: var(--k-ink); text-align: center;
    transition: background-color .15s, border-color .15s, color .15s;
}
.bk-choice-box b {
    display: inline-block; padding: 0 2px 3px; font-size: 17px; font-weight: 800; line-height: 1.25; color: var(--k-ink);
    background-image: linear-gradient(var(--k-lime), var(--k-lime)); background-repeat: no-repeat; background-position: 50% 100%; background-size: 0% 6px;
    transition: background-size .2s ease;
}
.bk-choice-box small { font-size: 14px; font-weight: 600; line-height: 1.4; color: var(--k-muted); }
.bk-choice.is-on .bk-choice-box, .bk-choice input:checked + .bk-choice-box { background: var(--k-navy); border-color: var(--k-navy); color: #fff; }
.bk-choice.is-on .bk-choice-box b, .bk-choice input:checked + .bk-choice-box b { color: #fff; background-size: 100% 6px; }
.bk-choice.is-on .bk-choice-box small, .bk-choice input:checked + .bk-choice-box small { color: var(--k-on-navy-2); }
.bk-choice input:focus-visible + .bk-choice-box { outline: 3px solid var(--k-violet); outline-offset: 2px; }
@media (hover: hover) { .bk-choice:hover input:not(:checked) + .bk-choice-box { border-color: var(--k-navy); } }

/* 안내 칸(BU10, 대표 「채우기하고 글자는 흰색으로. 테두리 없고」): 군청 면 · 흰 글자 · 테두리 없음 · 왼쪽 막대 없음.
   군청인 이유: 바로 아래 보라 주문 단추(행동)와 역할을 나눈다(RD4 보라 = 행동, 군청 = 구조 · 정보) */
.bk-bank-fields { margin-top: 10px; padding: 14px 16px; border: 0; border-radius: var(--r-inner); background: var(--k-navy); color: #fff; box-shadow: none; }
.bk-note { margin: 0; font-size: 16px; line-height: 1.6; font-weight: 400; color: #fff; word-break: keep-all; }
.bk-note b { font-weight: 800; color: #fff; } /* A6: 핵심 문장만 굵게 */
/* 농협 계좌 방식(예비, method 'bank')의 입력란: 군청 면 위 흰 입력란 */
.bk-nh { margin-top: 14px; }
.bk-field { display: block; }
.bk-field span { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 700; color: #fff; }
.bk-field input { width: 100%; box-sizing: border-box; min-height: 50px; padding: 10px 12px; border: 0; border-radius: var(--r-inner); background: #fff; color: var(--k-ink); font: inherit; font-size: 18px; }
.bk-field input:focus-visible { outline: 3px solid var(--k-lime); outline-offset: 2px; }
.bk-field small { display: block; margin-top: 6px; font-size: 14px; line-height: 1.5; color: var(--k-on-navy-2); }
/* 현금영수증 용도 칸(2026-10-27 영수증 RU13 · astra 11 Must 2, 시안 receipt.proposed.css E): 접힌 칸 대신 늘 보이는 세 칸, 기본 선택 없음.
   군청 위 선택 칸: 비선택 = 흰 1px 선 · 흰 글자, 선택 = 연두 면 · 검정 글자(복사 완료 표시와 같은 조합). 글자 16px 이상(Must 5) */
.bk-cr { margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .22); }
.bk-cr-q { margin: 0 0 4px; font-size: 17px; font-weight: 800; color: #fff; }
.bk-cr-help { margin: 0 0 10px; font-size: 16px; line-height: 1.55; color: var(--k-on-navy-2); word-break: keep-all; }
.bk-cr-choices { display: grid; gap: 8px; }
.bk-cr-choice { position: relative; display: block; cursor: pointer; }
.bk-cr-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.bk-cr-box { display: flex; align-items: center; justify-content: space-between; gap: 10px; min-height: 52px; padding: 10px 14px; border: 1px solid rgba(255, 255, 255, .55); border-radius: var(--r-inner); background: transparent; color: #fff; transition: background-color .15s, color .15s, border-color .15s; }
.bk-cr-box b { font-size: 17px; font-weight: 800; line-height: 1.3; color: #fff; }
.bk-cr-box small { flex: none; font-size: 16px; font-weight: 600; color: var(--k-on-navy-2); white-space: nowrap; }
.bk-cr-choice input:checked + .bk-cr-box { background: var(--k-lime); border-color: var(--k-lime); color: var(--k-ink); }
.bk-cr-choice input:checked + .bk-cr-box b, .bk-cr-choice input:checked + .bk-cr-box small { color: var(--k-ink); }
.bk-cr-choice input:focus-visible + .bk-cr-box { outline: 3px solid var(--k-lime); outline-offset: 2px; }
.bk-cr-field { display: block; margin-top: 10px; }
.bk-cr-field span { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 700; color: #fff; }
.bk-cr-field input { width: 100%; box-sizing: border-box; min-height: 52px; padding: 10px 14px; border: 0; border-radius: var(--r-inner); background: #fff; color: var(--k-ink); font: inherit; font-size: 20px; font-weight: 700; letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.bk-cr-field input:focus-visible { outline: 3px solid var(--k-lime); outline-offset: 2px; }
.bk-cr-field small { display: block; margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--k-on-navy-2); }
.bk-cr-later { margin: 10px 0 0; font-size: 16px; line-height: 1.55; color: var(--k-on-navy-2); word-break: keep-all; }
.bk-cr-later b { color: #fff; font-weight: 700; }
.bk-cr [hidden] { display: none !important; }
@media (max-width: 480px) {
    .bk-cr-box { flex-direction: column; align-items: flex-start; gap: 2px; }
    .bk-cr-box small { white-space: normal; }
}

/* 입금을 기다리는 주문이 있을 때 창 맨 위 알림(BU11): 주황 상자 대신 군청 면 · 흰 글자 · 흰 선 단추 */
.bk-pending { margin: 10px 0 12px; padding: 14px 16px; border: 0; border-radius: var(--r-inner); background: var(--k-navy); color: #fff; }
.bk-pending p { margin: 0 0 10px; font-size: 16px; line-height: 1.55; color: #fff; word-break: keep-all; }
.bk-pending .bk-btn { margin-top: 0; }
.bk-pending .bk-btn-line { border-color: #fff; background: transparent; color: #fff; }
.bk-pending .bk-btn-line:hover { background: rgba(255, 255, 255, .1); }
.bk-pending .bk-btn-line:focus-visible { outline-color: var(--k-lime); }

/* ============================================================
   2. 입금표(guideHtml 이 그리는 부분. 주문 창 안(농협)과 vbank-guide.html 카드 안에서 같은 모양) - BU4 · BU5 · BU6
   ============================================================ */
.bk-lead { margin: 6px 0 14px; font-size: 17px; font-weight: 700; color: var(--k-ink); }
/* 기한 지남 경고(농협 방식에서만 닿음): 상자 없이 빨간 글자만(base.css --danger) */
.bk-warn { margin: 6px 0 12px; padding: 0; border: 0; border-radius: 0; background: none; color: #dc2626; font-size: 17px; font-weight: 800; line-height: 1.5; }
/* 표(BU4): 테두리 상자 · 왼쪽 막대 없이 1px 선으로만 줄을 나눈다. 행 = 이름표(작게) 위, 값(크게) 아래, 복사 단추는 PC 오른쪽 · 휴대폰 아래 전체 폭 */
.bk-guide { margin: 0 0 20px; border: 0; border-radius: 0; background: none; overflow: visible; }
.bk-row { display: block; padding: 18px 0; border-top: 1px solid var(--k-line); }
.bk-row:first-child { padding-top: 0; border-top: 0; }
.bk-row dt { margin: 0 0 6px; font-size: 16px; font-weight: 700; line-height: 1.4; color: var(--k-muted); }
.bk-row dd { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px 20px; align-items: center; font-size: 17px; line-height: 1.5; color: var(--k-ink); word-break: keep-all; }
.bk-row-key { box-shadow: none; padding-left: 0; } /* 예전 왼쪽 보라 막대 없음 */
.bk-val { min-width: 0; }
.bk-big { display: block; font-size: 44px; font-weight: 800; line-height: 1.15; letter-spacing: -.02em; color: var(--k-ink); font-variant-numeric: tabular-nums; }
/* A2: 글자를 줄여 한 줄을 지키지 않는다. 줄바꿈 자리는 JS 가 하이픈 뒤에 넣은 <wbr> 뿐(숫자 사이는 끊지 않음),
   하이픈이 없는 긴 번호가 칸보다 넓을 때만 마지막 수단으로 아무 데서나 끊는다(overflow-wrap) */
.bk-num { font-size: 34px; letter-spacing: 0; white-space: normal; word-break: keep-all; overflow-wrap: break-word; }
.bk-bank { display: block; margin-bottom: 2px; font-size: 18px; font-weight: 700; line-height: 1.4; color: var(--k-ink); }
.bk-holder { display: block; margin-top: 4px; font-size: 16px; font-weight: 600; line-height: 1.5; color: var(--k-text); }
.bk-due { display: block; font-size: 22px; font-weight: 800; line-height: 1.3; color: var(--k-ink); font-variant-numeric: tabular-nums; }
.bk-sub { display: block; margin-top: 4px; font-size: 16px; font-weight: 500; line-height: 1.5; color: var(--k-text); }
.bk-small { font-size: 16px; color: var(--k-muted); word-break: break-all; }
.bk-meta dd { display: block; font-size: 16px; color: var(--k-text); }
.bk-meta dd b { font-weight: 700; color: var(--k-ink); }
/* 복사 단추(BU5): 보라 면 · 흰 글자 · 48px. 눌러 복사되면 연두 면 · 검정 글자 「계좌번호 복사 완료」(대상 포함, 아스트라 검토. 홈 알림 배지와 같은 조합) */
.bk-copy {
    display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px;
    border: 0; border-radius: var(--r-inner); background: var(--k-violet); color: #fff; font: inherit; font-size: 16px; font-weight: 800; white-space: nowrap; cursor: pointer;
    transition: background-color .15s, color .15s;
}
.bk-copy:hover { background: var(--k-violet-dark); }
.bk-copy.is-done { background: var(--k-lime); color: var(--k-ink); }
.bk-copy:focus-visible { outline: 3px solid var(--k-violet); outline-offset: 3px; }
/* 안내 문장(BU6): 초록 상자 · 체크 아이콘 없이 본문 글. vbank-guide.html 에서는 이 문장이 군청 머리로 올라가고(head: false) 여기엔 없다 */
.bk-open { display: block; margin: 0 0 12px; padding: 0; border: 0; border-radius: 0; background: none; font-size: 17px; line-height: 1.6; font-weight: 600; color: var(--k-ink); word-break: keep-all; }
.bk-open i { display: none; }
.bk-mail { margin: 0 0 12px; font-size: 16px; line-height: 1.6; color: var(--k-text); }
.bk-live:empty { display: none; }
/* 단추(BU7): 바탕 보라 = 주 행동 하나, 선 = 보조. 52px · 17px · 모서리 12px(주문 창 .enr-primary 와 같은 값) */
.bk-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; box-sizing: border-box; min-height: 52px; margin-top: 10px; padding: 12px 16px;
    border-radius: var(--r-inner); font: inherit; font-size: 17px; font-weight: 800; line-height: 1.3; text-decoration: none; cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.bk-btn-main { border: 0; background: var(--k-violet); color: #fff; }
.bk-btn-main:hover { background: var(--k-violet-dark); color: #fff; }
.bk-btn-line { border: 1px solid var(--k-violet); background: #fff; color: var(--k-violet); }
.bk-btn-line:hover { background: #f6f4ff; color: var(--k-violet-dark); border-color: var(--k-violet-dark); }
.bk-btn:focus-visible { outline: 3px solid var(--k-violet); outline-offset: 3px; }
.bk-btn i { display: none; } /* 전화 아이콘 없음: 번호 글자가 곧 표시 */
.bk-btn > span { text-align: center; }
.bk-tel { white-space: nowrap; } /* A3: 「전화 문의 031-302-8090」 이 좁은 화면 · 글자 확대에서 번호 중간이 아니라 띄어쓰기에서 꺾이게 */

/* 휴대폰: 복사 단추는 값 아래 전체 폭. 계좌번호는 28px 고정(A2, 시안의 폭 기준 clamp 는 320px 에서 23.6px 까지 줄어 뺐다),
   칸이 모자라면(320px · 글자 확대) 하이픈 뒤에서 두 줄로 */
@media (max-width: 640px) {
    .bk-row { padding: 16px 0; }
    .bk-row dd { grid-template-columns: 1fr; gap: 10px; }
    .bk-copy { width: 100%; }
    .bk-big { font-size: 36px; }
    .bk-num { font-size: 28px; }
    .bk-due { font-size: 20px; }
}

/* ============================================================
   3. vbank-guide.html 페이지 틀(BU1 · BU2 · BU8): 군청 머리 + 그 아래로 걸친 흰 입금표 카드(홈 · 과정 소개의 「군청 띠 위 카드」 문법)
   ============================================================ */
.vg { color: var(--k-ink); font-size: 17px; line-height: 1.7; }
.vg [hidden] { display: none !important; }
.vg p, .vg dt, .vg dd, .vg li { word-break: keep-all; }
.vg-hero { padding: 44px 0 112px; background: var(--k-navy); color: #fff; }
.vg-col { max-width: 680px; margin: 0 auto; padding: 0 24px; }
.vg-kicker { margin: 0 0 10px; font-size: 16px; font-weight: 700; letter-spacing: .01em; color: var(--k-on-navy-2); }
.vg-h1 { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.22; letter-spacing: -.03em; color: #fff; word-break: keep-all; }
.vg-h1 span { display: block; color: var(--k-lime); } /* 홈 첫 화면 제목의 둘째 줄 연두와 같은 장치 */
.vg-lead { max-width: 40em; margin: 16px 0 0; font-size: 17px; line-height: 1.65; color: var(--k-on-navy-2); overflow-wrap: break-word; } /* 긴 메일 주소가 좁은 화면에서 넘치지 않게 */
.vg-lead b { color: #fff; font-weight: 700; white-space: nowrap; } /* A3: 전화번호가 줄 중간에서 끊기지 않게 */
.vg-main { padding: 0 0 56px; } /* A4: 카드 아래 72 → 56px */
.vg-card { position: relative; margin-top: -72px; padding: 28px 32px 26px; border: 1px solid var(--k-line); border-radius: var(--r-outer); background: #fff; box-shadow: var(--bk-shadow); }
.vg-card:empty { visibility: hidden; } /* 불러오는 동안 빈 흰 상자를 보이지 않되 자리는 지켜 내용이 들어올 때 화면이 뛰지 않게 */
.vg-card .bk-guide { margin-bottom: 0; }
.vg-card .bk-row:last-child { padding-bottom: 0; } /* A4: 마지막 줄(주문)과 단추 줄 사이 선 위아래 여백을 같게(시안은 줄 여백 + 단추 줄 여백이 겹쳐 34px) */
.vg-card .bk-open { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--k-line); }
.vg-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--k-line); }
.vg-actions .bk-btn { margin-top: 0; }
.vg-actions--one { grid-template-columns: 1fr; }
.vg-actions:first-child { margin-top: 0; padding-top: 0; border-top: 0; } /* 안내 상태(로그인 필요 등): 카드에 단추만 있을 때 위 선 없음 */
.vg-msg { margin: 0; font-size: 17px; line-height: 1.65; color: var(--k-text); }
.vg-msg + .vg-msg { margin-top: 8px; }
.vg-help { margin: 24px 0 0; font-size: 16px; line-height: 1.6; color: var(--k-muted); }
.vg-help a { color: var(--k-violet); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.vg :focus-visible { outline: 3px solid var(--k-violet); outline-offset: 3px; }
.vg-hero :focus-visible { outline-color: var(--k-lime); }
.vg a { transition: color .15s, background-color .15s, border-color .15s; }

/* A1: 휴대폰 군청 머리를 줄인다(위 28 → 20px, 제목 28 → 24px, 걸침 48 → 36px). 390x844 첫 화면에 기한 줄까지 들어온다 */
@media (max-width: 640px) {
    .vg-hero { padding: 20px 0 56px; }
    .vg-col { padding: 0 16px; }
    .vg-kicker { margin-bottom: 6px; font-size: 14px; line-height: 1.5; }
    .vg-h1 { font-size: 24px; line-height: 1.3; }
    .vg-lead { margin-top: 8px; font-size: 16px; line-height: 1.55; }
    .vg-main { padding-bottom: 32px; }
    .vg-card { margin-top: -36px; padding: 20px 18px; }
    .vg-actions { grid-template-columns: 1fr; gap: 8px; margin-top: 18px; padding-top: 18px; }
}
/* 좁은 화면 · 글자 확대(390px 의 200% = 195px): 좌우 여백을 줄여 계좌번호 마디(「946434-」)가 28px 그대로 한 줄에 들어가게 */
@media (max-width: 360px) {
    .vg-col { padding: 0 12px; }
    .vg-card { padding: 18px 14px; }
    .bk-btn { padding: 12px 10px; } /* 「전화 문의 031-302-8090」 이 200% 확대(195px)에서도 칸 안에 */
}
/* 200% 확대 같은 아주 좁은 폭(240px 이하)에서만 금액을 36 → 30px(「350,000원」 도 카드 안). 계좌번호는 줄이지 않고 하이픈에서 꺾는다(A2) */
@media (max-width: 240px) {
    .bk-big:not(.bk-num) { font-size: 30px; }
}
@media (prefers-reduced-motion: reduce) {
    .bk-choice-box, .bk-choice-box b, .bk-copy, .bk-btn { transition: none; }
}
@media (forced-colors: active) {
    .bk-choice-box b { background: none; }
    .bk-choice.is-on .bk-choice-box, .bk-choice input:checked + .bk-choice-box { outline: 3px solid CanvasText; }
}