/* ============================================================
   영수증 · 회사 제출 서류 (2026-10-27, docs/receipt/10_fable_spec.md RU4~RU12 · RU14 · RU15, 시안 mock/receipt.proposed.css B · C · D 를 옮김)
   js/sections/lms/receipt.js 가 쓴다: 증빙 화면(receipt.html .rc) · 수강료 납입 확인서(receipt-doc.html .rcd) · 진위 확인(receipt-verify.html .rv)
   astra 11(Must) 반영:
     M1 증빙 화면 머리에 서류별 쓰임 두 줄(.rc-uses). 실패 화면에서도 확인서 줄이 재신청 양식보다 위(JS 순서)
     M2 현금영수증 용도는 기본 선택 없음, 세 칸(개인 소득공제용 · 회사 지출증빙용 · 나중에 선택합니다)
     M3 상태 칸: 발급 여부 확인 중 · 기존 영수증 취소 중 · 취소 완료 · 재발급 실패 · 자동 발급 이용 불가, 취소된 서류 표시(.rc-void)
     M4 확인서 직인은 수료증과 같은 방식으로 발급 기관명 끝 글자에 반쯤 겹침(.rcd-org · .rcd-seal, 시안처럼 오른쪽 끝으로 떨어지지 않게 inline-block)
     M5 휴대폰 도움말 · 용도 · 상태 글자 16px 이상, 일부 환불 세 칸은 좁으면 세로(≤480px)
   원칙(대표 확정): 색 면은 군청 · 보라 · 흰색 · 연두 · 검정만 또렷하게(옅은 틴트 금지), 안내 상자 = 채움 + 흰 글자 + 테두리 없음,
     모서리 두 값(바깥 18 · 안쪽 12), 아이콘 · 회색 테두리 표 · 왼쪽 막대 · 초록 성공 상자 없음, 누르는 자리 48px 이상.
   ============================================================ */

/* ───── 토큰(bank-transfer.css 의 .vg 와 같은 값) ───── */
.rc, .rcd, .rv {
    --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, .22);
    --r-outer: 18px; --r-inner: 12px;
    --k-shadow: 0 8px 24px rgba(11, 11, 15, .08);
}

/* ============================================================
   B. 증빙 화면 receipt.html(RU4~RU9) - 군청 머리 + 걸친 흰 카드(입금 안내 vbank-guide 와 같은 틀)
   ============================================================ */
.rc { color: var(--k-ink); font-size: 17px; line-height: 1.7; }
.rc [hidden] { display: none !important; }
.rc p, .rc dt, .rc dd, .rc li { word-break: keep-all; }
.rc-hero { padding: 40px 0 112px; background: var(--k-navy); color: #fff; }
.rc-col { max-width: 760px; margin: 0 auto; padding: 0 24px; }
.rc-kicker { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--k-on-navy-2); }
.rc-h1 { margin: 0; font-size: 32px; font-weight: 800; line-height: 1.25; letter-spacing: -.03em; color: #fff; word-break: keep-all; }
.rc-h1 span { display: block; color: var(--k-lime); font-variant-numeric: tabular-nums; } /* 둘째 줄 연두 = 금액 · 상태 */
.rc-lead { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--k-on-navy-2); overflow-wrap: anywhere; }
.rc-lead b { color: #fff; font-weight: 700; }
.rc-main { padding: 0 0 56px; }
.rc-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(--k-shadow); }
.rc-card:empty { visibility: hidden; }
.rc-in { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.4; color: var(--k-ink); }
/* M1 서류별 쓰임(무엇을 어디에 내는지): 이름표 굵게 + 서류 이름 */
.rc-uses { margin: 10px 0 0; padding: 0; list-style: none; }
.rc-uses li { margin: 0; font-size: 17px; line-height: 1.6; color: var(--k-text); }
.rc-uses li + li { margin-top: 2px; }
.rc-uses b { font-weight: 800; color: var(--k-ink); }

/* 환불 반영 금액(RU6 · Nice 1): 군청 면 세 칸(결제 금액 · 환불 금액 · 지금 납입액). 납입액은 연두로 크게 */
.rc-sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; margin: 18px 0 4px; padding: 16px 20px; border-radius: var(--r-inner); background: var(--k-navy); color: #fff; }
.rc-sum div { min-width: 0; padding: 0 12px; border-left: 1px solid var(--k-navy-line); }
.rc-sum div:first-child { padding-left: 0; border-left: 0; }
.rc-sum dt { margin: 0 0 2px; font-size: 16px; font-weight: 700; color: var(--k-on-navy-2); }
.rc-sum dd { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.25; color: #fff; font-variant-numeric: tabular-nums; }
.rc-sum dd small { display: block; margin-top: 2px; font-size: 16px; font-weight: 500; color: var(--k-on-navy-2); }
.rc-sum .is-net dd { font-size: 26px; color: var(--k-lime); }

/* 서류 줄(RU5): 1px 선으로 나눔. 왼쪽 이름 · 설명, 오른쪽 단추. 휴대폰은 단추가 아래 전체 폭 */
.rc-docs { margin: 18px 0 0; }
.rc-doc { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 24px; align-items: center; padding: 22px 0; border-top: 1px solid var(--k-line); }
.rc-doc:first-child { border-top: 0; padding-top: 14px; }
.rc-doc-main { min-width: 0; }
.rc-doc-name { margin: 0; font-size: 20px; font-weight: 800; line-height: 1.35; color: var(--k-ink); }
.rc-doc-name small { display: inline-block; margin-left: 8px; font-size: 16px; font-weight: 700; color: var(--k-muted); } /* 「법정 증빙」 「보조 서류」 */
.rc-doc-desc { margin: 4px 0 0; font-size: 17px; line-height: 1.6; color: var(--k-text); overflow-wrap: anywhere; }
.rc-doc-desc b { font-weight: 800; color: var(--k-ink); }
.rc-doc-desc + .rc-doc-desc { margin-top: 6px; }
.rc-doc-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.rc-doc-wide { grid-column: 1 / -1; min-width: 0; }
.rc-doc--stack { grid-template-columns: minmax(0, 1fr); } /* 단추가 여럿인 줄(확인서 · 현금영수증): 설명을 넓게, 단추는 아래 줄 왼쪽부터 */
.rc-doc--stack .rc-doc-acts { justify-content: flex-start; }
.rc-nowrap { white-space: nowrap; } /* 현금영수증 신청 칸 · 상태 칸처럼 줄 전체를 쓰는 부분 */
/* 단추: 주 행동 = 보라 면, 보조 = 보라 1px 선. 48px · 16px 800 · 12px */
.rc-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; padding: 0 18px;
    border-radius: var(--r-inner); font: inherit; font-size: 16px; font-weight: 800; line-height: 1.3; text-decoration: none; cursor: pointer; white-space: nowrap;
    transition: background-color .15s, color .15s, border-color .15s;
}
.rc-btn-main { border: 0; background: var(--k-violet); color: #fff; }
.rc-btn-main:hover { background: var(--k-violet-dark); color: #fff; }
.rc-btn-line { border: 1px solid var(--k-violet); background: #fff; color: var(--k-violet); }
.rc-btn-line:hover { background: #f6f4ff; color: var(--k-violet-dark); border-color: var(--k-violet-dark); }
.rc-btn:focus-visible { outline: 3px solid var(--k-violet); outline-offset: 3px; }
.rc-btn[disabled], .rc-btn[aria-busy="true"] { opacity: .6; cursor: default; }
.rc-btn-lg { min-height: 52px; font-size: 17px; }
/* 상태 칸(RU7 · M3): 군청 면(확인 중 · 준비 중 · 취소 중) · 검정 면(실패 · 이용 불가 · 재발급 실패), 흰 글자 · 테두리 없음 */
.rc-status { margin: 12px 0 0; padding: 14px 18px; border: 0; border-radius: var(--r-inner); background: var(--k-navy); color: #fff; }
.rc-status p { margin: 0; font-size: 17px; line-height: 1.6; color: #fff; }
.rc-status p + p { margin-top: 4px; font-size: 16px; color: var(--k-on-navy-2); }
.rc-status b { font-weight: 800; color: #fff; }
.rc-status .rc-btn-line { margin-top: 12px; border-color: #fff; background: transparent; color: #fff; }
.rc-status .rc-btn-line:hover { background: rgba(255, 255, 255, .1); }
.rc-status .rc-btn:focus-visible { outline-color: var(--k-lime); }
.rc-status--ink { background: var(--k-ink); }
.rc-status--ink p + p { color: #d6d8de; }
.rc-status .rc-live { display: block; margin-top: 6px; font-size: 16px; color: var(--k-lime); } /* 자동 갱신 안내(「저절로 바뀝니다」) */
/* 취소된 서류(M3): 「취소됨 · 제출용으로 사용하지 마십시오」 검정 면 표시 + 글자 링크 */
.rc-void { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 10px 0 0; font-size: 16px; line-height: 1.5; color: var(--k-text); }
.rc-void b { display: inline-block; padding: 2px 10px; border-radius: var(--r-inner); background: var(--k-ink); color: #fff; font-weight: 800; }
.rc-void a { color: var(--k-violet); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* 현금영수증 용도 칸(M2): 세 칸, 기본 선택 없음(주문 창 선택 칸과 같은 장치: 흰 1px 선 ↔ 군청 면 + 연두 띠) */
.rc-cr { margin: 14px 0 0; }
.rc-cr-q { margin: 0 0 10px; font-size: 17px; font-weight: 800; color: var(--k-ink); }
.rc-cr-choices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; border: 0; margin: 0; padding: 0; min-width: 0; }
.rc-cr-choices--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rc-choice { position: relative; display: block; cursor: pointer; }
.rc-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.rc-choice-box {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 80px; padding: 12px 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;
}
.rc-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;
}
.rc-choice-box small { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--k-muted); }
.rc-choice input:checked + .rc-choice-box { background: var(--k-navy); border-color: var(--k-navy); color: #fff; }
.rc-choice input:checked + .rc-choice-box b { color: #fff; background-size: 100% 6px; }
.rc-choice input:checked + .rc-choice-box small { color: var(--k-on-navy-2); }
.rc-choice input:focus-visible + .rc-choice-box { outline: 3px solid var(--k-violet); outline-offset: 2px; }
@media (hover: hover) { .rc-choice:hover input:not(:checked) + .rc-choice-box { border-color: var(--k-navy); } }
.rc-cr-help { margin: 8px 0 0; font-size: 16px; line-height: 1.55; color: var(--k-muted); }
.rc-cr-help b { color: var(--k-ink); font-weight: 800; }
.rc-cr-field { display: block; margin-top: 12px; }
.rc-cr-field span { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 700; color: var(--k-ink); }
.rc-cr-field input { width: 100%; box-sizing: border-box; min-height: 52px; padding: 8px 14px; line-height: 1.3; border: 2px solid var(--k-navy); 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; }
.rc-cr-field input:focus-visible { outline: 3px solid var(--k-violet); outline-offset: 2px; }
.rc-cr-field input[aria-invalid="true"] { border-color: #dc2626; }
.rc-cr-field small { display: block; margin-top: 6px; font-size: 16px; line-height: 1.5; color: var(--k-muted); }
.rc-cr-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: start; margin-top: 12px; }
.rc-cr-row .rc-cr-field { margin-top: 0; }
.rc-cr-row .rc-btn { margin-top: 30px; } /* 입력란 이름표 높이만큼 내려 입력란과 같은 줄에 */
.rc-cr-fhelp { grid-column: 1 / -1; margin: 0; font-size: 16px; line-height: 1.5; color: var(--k-muted); } /* 입력란 도움말: 줄 전체 폭(단추 옆 좁은 칸에서 글자가 끊기지 않게) */
.rc-cr-note { margin: 10px 0 0; font-size: 16px; line-height: 1.6; color: var(--k-muted); }
.rc-cr-later { margin: 12px 0 0; font-size: 17px; line-height: 1.6; color: var(--k-text); }
.rc-cr-later .rc-btn { margin-top: 10px; }
.rc-err { margin: 8px 0 0; font-size: 16px; font-weight: 800; color: #dc2626; } /* 상자 없이 빨간 글자(bank-ui BU6 과 같음) */

/* 아래 안내(RU8 · RU9: 이중 증빙 금지 · 계산서 · 환불 · 전화)와 단추 줄 */
.rc-notes { margin: 20px 0 0; padding: 18px 0 0; border-top: 1px solid var(--k-line); }
.rc-notes p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--k-muted); }
.rc-notes p + p { margin-top: 6px; }
.rc-notes a { color: var(--k-violet); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.rc-notes b { color: var(--k-ink); font-weight: 700; white-space: nowrap; }
.rc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--k-line); }
.rc-actions--one { grid-template-columns: 1fr; }
.rc-actions:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.rc-actions .rc-btn { width: 100%; min-height: 52px; font-size: 17px; }
.rc-wait { margin: 0; }
.rc-wait h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; line-height: 1.35; color: var(--k-ink); }
.rc-wait p { margin: 0; font-size: 17px; line-height: 1.65; color: var(--k-text); }
.rc-wait p + p { margin-top: 6px; }
.rc-bank { display: grid; grid-template-columns: 132px minmax(0, 1fr); margin: 14px 0 0; padding: 14px 18px; border-radius: var(--r-inner); background: var(--k-navy); color: #fff; }
.rc-bank dt, .rc-bank dd { margin: 0; padding: 4px 0; font-size: 17px; line-height: 1.5; }
.rc-bank dt { color: var(--k-on-navy-2); font-weight: 700; }
.rc-bank dd { color: #fff; font-weight: 700; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rc :focus-visible { outline: 3px solid var(--k-violet); outline-offset: 3px; }
.rc-hero :focus-visible { outline-color: var(--k-lime); }

@media (max-width: 640px) {
    .rc-hero { padding: 20px 0 56px; }
    .rc-col { padding: 0 16px; }
    .rc-kicker { margin-bottom: 6px; font-size: 16px; }
    .rc-h1 { font-size: 24px; line-height: 1.3; }
    .rc-lead { margin-top: 8px; font-size: 16px; line-height: 1.55; }
    .rc-main { padding-bottom: 32px; }
    .rc-card { margin-top: -36px; padding: 20px 18px; }
    .rc-in { font-size: 19px; }
    .rc-uses li { font-size: 16px; }
    .rc-sum { padding: 14px 14px; }
    .rc-sum div { padding: 0 8px; }
    .rc-sum dd { font-size: 18px; }
    .rc-sum .is-net dd { font-size: 22px; }
    .rc-sum dd small { display: none; }
    .rc-doc { grid-template-columns: 1fr; gap: 10px; padding: 18px 0; }
    .rc-doc-name { font-size: 19px; }
    .rc-doc-name small { display: block; margin: 2px 0 0; }
    .rc-doc-desc { font-size: 16px; }
    .rc-doc-acts { display: grid; grid-template-columns: 1fr; gap: 8px; }
    .rc-doc-acts--2 { grid-template-columns: 1fr; } /* 「확인서 인쇄」 「확인서 PDF 저장」 이름이 길어 반반이면 두 줄이 됨 → 한 줄씩 */
    .rc-doc-acts .rc-btn { width: 100%; min-height: 52px; font-size: 17px; white-space: normal; text-align: center; }
    .rc-doc-acts .rc-btn-main { grid-column: 1 / -1; }
    .rc-status p { font-size: 16px; }
    .rc-cr-choices, .rc-cr-choices--2 { grid-template-columns: 1fr; }
    .rc-choice-box { min-height: 60px; }
    .rc-cr-row { grid-template-columns: 1fr; }
    .rc-cr-row .rc-btn { width: 100%; min-height: 52px; margin-top: 0; order: 2; } /* 휴대폰: 입력란 → 도움말 → 신청 단추 */
    .rc-cr-fhelp { order: 1; }
    .rc-actions { grid-template-columns: 1fr; gap: 8px; margin-top: 18px; padding-top: 18px; }
    .rc-bank { grid-template-columns: 1fr; padding: 12px 14px; }
    .rc-bank dt { padding-bottom: 0; }
    .rc-bank dd { padding-top: 0; }
}
/* M5 좁은 화면: 일부 환불 세 칸을 세로로(「납입액(환불 뒤)」 이 끊기지 않게) */
@media (max-width: 480px) {
    .rc-sum { grid-template-columns: 1fr; padding: 10px 16px; }
    .rc-sum div { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 8px 0; border-left: 0; border-top: 1px solid var(--k-navy-line); }
    .rc-sum div:first-child { border-top: 0; }
    .rc-sum dt { margin: 0; }
}
@media (max-width: 360px) { .rc-col { padding: 0 12px; } .rc-card { padding: 18px 14px; } }

/* ============================================================
   C. 수강료 납입 확인서 receipt-doc.html(RU10 · RU11) - 화면에서는 종이 한 장, 인쇄 · PDF 는 A4
   ============================================================ */
.rcd { background: var(--k-soft); color: var(--k-ink); font-size: 17px; line-height: 1.6; }
.rcd [hidden] { display: none !important; }
.rcd-col { max-width: 860px; margin: 0 auto; padding: 24px 24px 56px; }
/* 단추 줄(화면만): 인쇄 = 주 행동(보라 면), PDF 저장 · 증빙 화면 = 선 */
.rcd-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 18px; }
.rcd-bar .rcd-title { margin: 0 auto 0 0; font-size: 20px; font-weight: 800; color: var(--k-ink); }
.rcd-bar .rc-btn { min-height: 48px; }
.rcd-msg { max-width: 794px; margin: 0 auto; padding: 28px 32px; border: 1px solid var(--k-line); border-radius: var(--r-outer); background: #fff; }
.rcd-msg h1 { margin: 0 0 8px; font-size: 22px; font-weight: 800; }
.rcd-msg p { margin: 0 0 14px; font-size: 17px; color: var(--k-text); }
/* 종이(A4 비율의 흰 판). 화면 폭이 좁으면 100% */
.rcd-sheet { position: relative; width: 100%; max-width: 794px; margin: 0 auto; padding: 56px 64px 48px; border: 1px solid var(--k-line); background: #fff; box-shadow: var(--k-shadow); color: var(--k-ink); font-size: 16px; line-height: 1.55; }
.rcd-sheet:empty { min-height: 400px; }
.rcd-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin: 0 0 28px; }
.rcd-issuer { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.4; }
.rcd-issuer small { display: block; font-size: 14px; font-weight: 500; color: var(--k-muted); }
.rcd-no { margin: 0; text-align: right; font-size: 14px; line-height: 1.5; color: var(--k-text); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rcd-no b { font-weight: 700; color: var(--k-ink); }
.rcd-h1 { margin: 0 0 30px; padding: 0 0 18px; border-bottom: 2px solid var(--k-ink); text-align: center; font-size: 28px; font-weight: 800; letter-spacing: .28em; text-indent: .28em; color: var(--k-ink); }
.rcd-sec { margin: 0 0 20px; }
.rcd-sec h2 { margin: 0 0 8px; font-size: 16px; font-weight: 800; color: var(--k-ink); }
.rcd-sec h2 span { display: inline-block; min-width: 1.6em; margin-right: 2px; } /* 「1.」 번호 자리 */
.rcd-tbl { display: grid; grid-template-columns: 176px minmax(0, 1fr); margin: 0; border-top: 1px solid var(--k-ink); border-bottom: 1px solid var(--k-ink); }
.rcd-tbl dt, .rcd-tbl dd { margin: 0; padding: 9px 12px; border-top: 1px solid var(--k-line); font-size: 15.5px; line-height: 1.5; }
.rcd-tbl dt:first-of-type, .rcd-tbl dd:first-of-type { border-top: 0; }
.rcd-tbl dt { background: var(--k-soft); color: var(--k-text); font-weight: 700; }
.rcd-tbl dd { color: var(--k-ink); font-variant-numeric: tabular-nums; word-break: keep-all; overflow-wrap: anywhere; }
.rcd-tbl dd b { font-weight: 800; }
.rcd-tbl dd.is-net { font-size: 18px; font-weight: 800; }
.rcd-state { margin: 10px 0 0; font-size: 15px; color: var(--k-text); }
.rcd-state b { font-weight: 800; color: var(--k-ink); }
.rcd-confirm { margin: 30px 0 22px; text-align: center; font-size: 17px; font-weight: 700; line-height: 1.8; color: var(--k-ink); }
.rcd-date { margin: 0 0 26px; text-align: center; font-size: 16px; font-variant-numeric: tabular-nums; }
/* 발행기관 + 직인(RC10 · M4, 대표 「직인은 매번 수료증에 올리는 거 있음. 너가 올려」): 수료증 PDF(lib/certificate-pdf.js)와 같은 방식.
   기관명 글자 끝에 사각 직인(images/seal-kai.png = lib/templates/cert/seal.png 사본)이 직인 폭의 22%만큼 겹치고 불투명도 .93.
   기관명 칸은 inline-block(글자 폭만큼)이라 직인이 줄 오른쪽 끝으로 떨어지지 않는다(시안의 떨어진 직인 고침).
   오른쪽 여백 = 직인 폭 - 겹침(88 - 19 = 69px, 휴대폰 72 - 16 = 56px, 인쇄 23.3 - 5.1 = 18.2mm) */
.rcd-sign { margin: 0 0 34px; text-align: center; line-height: 1.6; }
.rcd-sign .rcd-org-wrap { margin: 28px 0 34px; } /* 직인(88px)이 기관명 줄 위아래로 30px 씩 나오므로 앞뒤 줄을 가리지 않게 띄움 */
.rcd-sign .rcd-org { position: relative; display: inline-block; padding-right: 69px; font-size: 20px; font-weight: 800; letter-spacing: .06em; line-height: 1.4; color: var(--k-navy); white-space: nowrap; }
.rcd-sign .rcd-seal { position: absolute; right: 0; top: 50%; width: 88px; height: 88px; transform: translateY(-50%); opacity: .93; pointer-events: none; }
.rcd-sign .rcd-line { margin: 0; font-size: 14px; color: var(--k-text); }
.rcd-foot { padding-top: 14px; border-top: 1px solid var(--k-line); font-size: 14px; line-height: 1.6; color: var(--k-text); } /* 문서 각주(보조 서류 문구 · 진위 확인 · 자동 발행) */
.rcd-foot p { margin: 0 0 4px; word-break: keep-all; overflow-wrap: anywhere; }
.rcd-foot b { font-weight: 800; color: var(--k-ink); }

@media (max-width: 640px) {
    .rcd-col { padding: 16px 16px 32px; }
    .rcd-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    .rcd-bar .rcd-title { grid-column: 1 / -1; margin: 0 0 4px; font-size: 19px; }
    .rcd-bar .rc-btn-main { grid-column: 1 / -1; min-height: 52px; font-size: 17px; }
    .rcd-bar .rc-btn { white-space: normal; text-align: center; }
    .rcd-sheet { padding: 24px 18px 22px; font-size: 16px; }
    .rcd-head { flex-direction: column; gap: 8px; margin-bottom: 18px; }
    .rcd-no { text-align: left; white-space: normal; }
    .rcd-h1 { margin-bottom: 20px; font-size: 22px; letter-spacing: .18em; text-indent: .18em; }
    .rcd-tbl { grid-template-columns: 124px minmax(0, 1fr); }
    .rcd-tbl dt { word-break: keep-all; }
    .rcd-tbl dt, .rcd-tbl dd { padding: 8px 10px; font-size: 16px; }
    .rcd-tbl dd.is-net { font-size: 18px; }
    .rcd-state { font-size: 16px; }
    .rcd-confirm { font-size: 16px; }
    .rcd-sign .rcd-org { padding-right: 56px; font-size: 18px; letter-spacing: .03em; }
    .rcd-sign .rcd-seal { width: 72px; height: 72px; }
    .rcd-sign .rcd-org-wrap { margin: 22px 0 28px; }
    .rcd-sign .rcd-line { font-size: 16px; }
    .rcd-foot { font-size: 16px; }
}

/* 인쇄(RU11): 머리글 · 바닥글 · 단추 · 그림자 숨김, A4 여백, 글자 pt 로 */
@media print {
    @page { size: A4 portrait; margin: 14mm 15mm; }
    html, body { background: #fff !important; }
    .main-header, .main-footer, footer, .rcd-bar, .scroll-top-btn, .auth-modal-overlay, nav, .kai-chat-root { display: none !important; }
    .rcd { background: #fff; }
    .rcd-col { max-width: none; padding: 0; }
    .rcd-sheet { max-width: none; padding: 0; border: 0; box-shadow: none; font-size: 10.5pt; line-height: 1.45; }
    .rcd-head { margin-bottom: 4mm; }
    .rcd-issuer { font-size: 10.5pt; } .rcd-issuer small { font-size: 9pt; } .rcd-no { font-size: 9pt; }
    .rcd-h1 { font-size: 19pt; margin-bottom: 6mm; padding-bottom: 3.5mm; }
    .rcd-sec { margin-bottom: 4.5mm; }
    .rcd-sec h2 { font-size: 10.5pt; margin-bottom: 1.8mm; }
    .rcd-tbl { grid-template-columns: 40mm minmax(0, 1fr); }
    .rcd-tbl dt, .rcd-tbl dd { padding: 1.2mm 3mm; font-size: 10pt; }
    .rcd-tbl dt { background: #f3f4f6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .rcd-tbl dd.is-net { font-size: 12pt; }
    .rcd-state { font-size: 9.5pt; margin-top: 2mm; }
    .rcd-confirm { font-size: 12pt; margin: 6mm 0 2mm; line-height: 1.6; }
    .rcd-date { font-size: 10.5pt; margin-bottom: 5mm; }
    .rcd-sign { margin-bottom: 6mm; line-height: 1.5; }
    .rcd-sign .rcd-line { font-size: 9pt; }
    .rcd-sign .rcd-org { padding-right: 18.2mm; font-size: 15pt; }
    .rcd-sign .rcd-seal { width: 23.3mm; height: 23.3mm; opacity: .93; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
    .rcd-sign .rcd-org-wrap { margin: 9mm 0 9mm; }
    .rcd-foot { font-size: 8.5pt; padding-top: 3mm; }
    .rcd-sec, .rcd-tbl, .rcd-sign, .rcd-foot { break-inside: avoid; }
    a { text-decoration: none; color: inherit; }
}

/* ============================================================
   D. 진위 확인 receipt-verify.html(RU12) - 로그인 없이 보는 공개 화면. 머리 + 걸친 카드 같은 틀
   ============================================================ */
.rv { color: var(--k-ink); font-size: 17px; line-height: 1.7; }
.rv [hidden] { display: none !important; }
.rv p, .rv dt, .rv dd { word-break: keep-all; }
.rv-hero { padding: 40px 0 112px; background: var(--k-navy); color: #fff; }
.rv-col { max-width: 680px; margin: 0 auto; padding: 0 24px; }
.rv-kicker { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--k-on-navy-2); }
.rv-h1 { margin: 0; font-size: 32px; font-weight: 800; line-height: 1.25; letter-spacing: -.03em; color: #fff; }
.rv-h1 span { display: block; color: var(--k-lime); }
.rv-lead { margin: 14px 0 0; font-size: 17px; line-height: 1.6; color: var(--k-on-navy-2); }
.rv-lead b { color: #fff; font-weight: 700; }
.rv-main { padding: 0 0 56px; }
.rv-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(--k-shadow); }
.rv-form { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.rv-field { display: block; }
.rv-field span { display: block; margin-bottom: 6px; font-size: 16px; font-weight: 700; color: var(--k-ink); }
.rv-field input { width: 100%; box-sizing: border-box; min-height: 56px; padding: 10px 16px; border: 2px solid var(--k-navy); border-radius: var(--r-inner); background: #fff; color: var(--k-ink); font: inherit; font-size: 22px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; font-variant-numeric: tabular-nums; }
.rv-field input::placeholder { color: var(--k-on-navy-3); font-weight: 600; letter-spacing: .06em; }
.rv-field input:focus-visible { outline: 3px solid var(--k-violet); outline-offset: 2px; }
.rv-form .rc-btn { min-height: 56px; padding: 0 28px; font-size: 17px; }
.rv-help { margin: 12px 0 0; font-size: 16px; line-height: 1.6; color: var(--k-muted); }
/* 결과(RU12 · Nice 3): 머리 띠 = 군청(일치) · 검정(갱신됨 · 전액 환불 · 없음) 면, 흰 글자. 그 아래 1px 선 표 */
.rv-result { margin: 22px 0 0; padding-top: 22px; border-top: 1px solid var(--k-line); }
.rv-flag { margin: 0 0 16px; padding: 14px 18px; border-radius: var(--r-inner); background: var(--k-navy); color: #fff; }
.rv-flag b { display: block; font-size: 19px; font-weight: 800; line-height: 1.35; }
.rv-flag b.is-lime { color: var(--k-lime); }
.rv-flag p { margin: 4px 0 0; font-size: 16px; line-height: 1.55; color: var(--k-on-navy-2); }
.rv-flag--ink { background: var(--k-ink); }
.rv-flag--ink p { color: #d6d8de; }
.rv-facts { display: grid; grid-template-columns: 150px minmax(0, 1fr); margin: 0; }
.rv-facts dt, .rv-facts dd { margin: 0; padding: 10px 0; border-top: 1px solid var(--k-line); font-size: 16px; line-height: 1.5; }
.rv-facts dt:first-of-type, .rv-facts dd:first-of-type { border-top: 0; }
.rv-facts dt { color: var(--k-muted); font-weight: 700; }
.rv-facts dd { color: var(--k-ink); font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rv-facts dd b { font-size: 18px; font-weight: 800; }
.rv-facts dd small { display: block; font-size: 16px; font-weight: 500; color: var(--k-muted); }
.rv-note { margin: 16px 0 0; font-size: 16px; line-height: 1.6; color: var(--k-muted); }
.rv-note b { color: var(--k-ink); white-space: nowrap; }
.rv :focus-visible { outline: 3px solid var(--k-violet); outline-offset: 3px; }
@media (max-width: 640px) {
    .rv-hero { padding: 20px 0 56px; }
    .rv-col { padding: 0 16px; }
    .rv-h1 { font-size: 24px; line-height: 1.3; }
    .rv-lead { margin-top: 8px; font-size: 16px; }
    .rv-main { padding-bottom: 32px; }
    .rv-card { margin-top: -36px; padding: 20px 18px; }
    .rv-form { grid-template-columns: 1fr; }
    .rv-form .rc-btn { width: 100%; }
    .rv-field input { font-size: 20px; letter-spacing: .06em; }
    .rv-facts { grid-template-columns: 1fr; }
    .rv-facts dt { padding-bottom: 0; }
    .rv-facts dd { padding-top: 2px; border-top: 0; }
}

/* 고대비 모드: 선택 칸 · 상태 칸 테두리 보강 */
@media (forced-colors: active) {
    .rc-choice-box, .rc-status, .rc-sum, .rv-flag, .rc-void b { outline: 1px solid CanvasText; }
    .rc-choice input:checked + .rc-choice-box { outline: 3px solid Highlight; }
}

/* 화면 읽기 프로그램에만 읽히는 글자(「(새 창)」 등) */
.rc-sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
