/* ============================================================
   취소/환불 정책 화면 (2026-10-27 재설계, docs/inquiry-refund-ui/01_fable_spec.md IR17~IR28 · 03_impl.md IR29~)
   시안 docs/inquiry-refund-ui/mock/refund-policy.proposed.css 를 옮기고 아스트라 검토(02_astra_a.md)와 구현 결정을 반영했다.
     IR29 글자 16px 이상(시안의 14 · 14.5 · 15px 를 16px 로) · IR30 그림자는 운영 중인 입금 안내 값
     IR34 제4조 계산 표: 표 제목은 스크롤 상자 밖, 표는 첫 열 고정 + 보이는 가로 스크롤 막대(astra A4)
     IR35 카드의 행동 단추는 고른 구분에 맞춰(온라인 = 「온라인 강의 환불 신청하기」, 집체교육 = 1:1 문의 · 전화, astra A5)
     IR36 조항 끝 「목차로」(astra N2), 휴대폰 본문 17px(astra N3), 요약 세 항목 사이 간격
   이 파일은 refund-policy.html 만 싣는다. 이용약관 · 개인정보처리방침은 같은 class 를 쓰는 예전 refund-policy.css 를 그대로 쓴다(IR28).
   규정 본문 · 표 숫자는 한 글자도 바꾸지 않는다(tests/inquiry-refund-ui.test.js 글자 대조).
   원칙(계좌이체 BU1~BU14 · 문의하기 IR1~IR16 과 같음): 색 면은 군청 · 보라 · 흰색 · 연두(군청 위)만, 파스텔 틴트 · 아이콘 · 번호 원 · 회색 상자 없음,
         모서리는 두 값(바깥 18px · 안쪽 12px)만, 글자 16px 이상(규정 본문 17px).
   탈출구: refund-policy.html 의 링크를 refund-policy.css?v=20261005 로 되돌리면 예전 모양(HTML 틀은 git 기록).
   ============================================================ */

/* ───── 토큰(IR3): 문의하기 .iq · 계좌이체 .vg 와 같은 값 ───── */
.rp {
    --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; --r-inner: 12px;
    --k-shadow: 0 8px 24px rgba(11, 11, 15, .08); /* IR30: 입금 안내 --bk-shadow 와 같은 값 */
    --rp-col: 880px;
    display: block; color: var(--k-ink); font-size: 17px; line-height: 1.7;
}
.rp [hidden] { display: none !important; }
.rp p, .rp li, .rp td, .rp th, .rp dd { word-break: keep-all; }
.rp :focus-visible { outline: 3px solid var(--k-violet); outline-offset: 3px; }
.rp a { transition: color .15s, background-color .15s, border-color .15s; }
.rp i.fas, .rp i.fa { display: none; } /* 아이콘 없음(RD4) */

/* ============================================================
   1. 페이지 틀(IR17): 군청 머리 + 걸친 흰 카드(구분 선택 + 행동 단추)
   ============================================================ */
.rp-hero { padding: 44px 0 112px; background: var(--k-navy); color: #fff; }
.rp-hero :focus-visible { outline-color: var(--k-lime); }
.rp-col { max-width: var(--rp-col); margin: 0 auto; padding: 0 24px; }
.rp-kicker { margin: 0 0 10px; font-size: 16px; font-weight: 700; letter-spacing: .01em; line-height: 1.5; color: var(--k-on-navy-2); }
.rp-h1 { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.22; letter-spacing: -.03em; color: #fff; word-break: keep-all; }
.rp-lead { max-width: 44em; margin: 16px 0 0; font-size: 17px; line-height: 1.65; color: var(--k-on-navy-2); }
.rp-main { padding: 0 0 56px; }
.rp-top { position: relative; margin-top: -72px; padding: 24px 32px 26px; border: 1px solid var(--k-line); border-radius: var(--r-outer); background: #fff; box-shadow: var(--k-shadow); }
.rp-top-label { margin: 0 0 10px; font-size: 16px; font-weight: 700; color: var(--k-muted); }

/* 구분 선택 칸(IR18) = 기존 탭 단추(#rpTabs .rp-tab[data-tab], JS 그대로). 주문 창 결제 수단 칸(BU9)과 같은 장치:
   비선택 = 흰 바탕 · 1px 선, 선택 = 군청 면 · 흰 글자 + 이름 아래 연두 6px 띠(머리글 현재 메뉴와 같은 표시) */
.rp-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 0; }
.rp-tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 80px; padding: 14px 10px;
    border: 1px solid var(--k-line); border-radius: var(--r-inner); background: #fff; color: var(--k-ink); font: inherit; text-align: center; cursor: pointer;
    transition: background-color .15s, border-color .15s, color .15s;
}
.rp-tab > span { 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; }
.rp-tab > small { font-size: 16px; font-weight: 600; line-height: 1.4; color: var(--k-muted); }
.rp-tab:hover { border-color: var(--k-navy); }
.rp-tab.active { background: var(--k-navy); border-color: var(--k-navy); color: #fff; }
.rp-tab.active > span { color: #fff; background-size: 100% 6px; }
.rp-tab.active > small { color: var(--k-on-navy-2); }
.rp-tab:focus-visible { outline-offset: 2px; }

/* 행동 단추(IR19 · IR35): 보라 채움 하나 + 선 「전화 문의」. 고른 구분에 맞는 묶음만 보인다(refund-policy.js) */
.rp-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--k-line); }
.rp-btn {
    display: flex; align-items: center; justify-content: center; gap: 8px; box-sizing: border-box; width: 100%; min-height: 52px; padding: 12px 16px;
    border-radius: var(--r-inner); font: inherit; font-size: 17px; font-weight: 800; line-height: 1.3; text-align: center; text-decoration: none; cursor: pointer;
    transition: background-color .15s, color .15s, border-color .15s;
}
.rp-btn--main { border: 0; background: var(--k-violet); color: #fff; }
.rp-btn--main:hover { background: var(--k-violet-dark); color: #fff; }
.rp-btn--line { border: 1px solid var(--k-violet); background: #fff; color: var(--k-violet); }
.rp-btn--line:hover { background: #f6f4ff; color: var(--k-violet-dark); border-color: var(--k-violet-dark); }
.rp-actions-note { grid-column: 1 / -1; margin: 2px 0 0; font-size: 16px; line-height: 1.6; color: var(--k-text); }

/* ============================================================
   2. 규정 본문(IR20~IR26): 카드 아래 흰 열. 예전 .rp-card 상자는 상자 없이 문서 한 부분으로
   ============================================================ */
.rp-doc { padding-top: 44px; }
.rp-content { display: block; }
.rp-card { margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.rp-card--next { margin-top: 56px; padding-top: 44px; border-top: 1px solid var(--k-line); scroll-margin-top: 96px; }
.rp-card-header { display: block; margin: 0 0 10px; }
.rp-card-header h2, .rp-card-header h3 { margin: 0; font-size: 26px; font-weight: 800; line-height: 1.3; letter-spacing: -.02em; color: var(--k-ink); }
.rp-card-desc { margin: 0 0 28px; font-size: 17px; line-height: 1.7; color: var(--k-text); }

/* 요약(IR21): 녹화형 규정의 3줄 요약은 군청 면 · 흰 글자 · 테두리 없음(대표 「채우기하고 글자는 흰색으로. 테두리 없고」). 문장은 그대로 */
.rp-note { display: block; margin: 4px 0 0; padding: 0; border: 0; border-radius: 0; background: none; }
.rp-note p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--k-text); }
.rp-vod-summary { margin: 0 0 32px; padding: 22px 26px 24px; border: 0; border-radius: var(--r-inner); background: var(--k-navy); color: #fff; }
.rp-vod-summary > div { display: block; }
.rp-vod-summary p { margin: 0; font-size: 16px; font-weight: 800; letter-spacing: .02em; color: var(--k-lime); }
.rp-vod-summary p strong { font-weight: 800; }
.rp-vod-summary ol { margin: 8px 0 0; padding-left: 22px; list-style: decimal; font-size: 17px; line-height: 1.7; color: #fff; }
.rp-vod-summary ol li + li { margin-top: 14px; } /* IR36: 세 항목을 간격으로 구분(astra N2, 문구 그대로) */
.rp-vod-summary :focus-visible { outline-color: var(--k-lime); }

/* 목차(IR22): 1px 판, 두 열(휴대폰 한 열), 누르는 자리 40px */
.rp-toc { margin: 0 0 36px; padding: 18px 22px 16px; border: 1px solid var(--k-line); border-radius: var(--r-inner); background: #fff; scroll-margin-top: 96px; }
.rp-toc-title { margin: 0 0 6px; font-size: 16px; font-weight: 800; color: var(--k-muted); }
.rp-toc ol { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; padding: 0; list-style: none; }
.rp-toc a { display: flex; align-items: center; gap: 8px; min-height: 40px; color: var(--k-ink); font-size: 16px; font-weight: 700; text-decoration: none; }
.rp-toc a b { flex: none; min-width: 2.6em; color: var(--k-muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.rp-toc a:hover { color: var(--k-violet); text-decoration: underline; text-underline-offset: 3px; }
/* 조항 끝 「목차로」(IR36, refund-policy.js 가 붙임): 오른쪽 작은 글 링크, 누르는 자리 40px */
.rp-toc-back { margin: 8px 0 0; text-align: right; }
.rp-toc-back a { display: inline-flex; align-items: center; min-height: 40px; color: var(--k-violet); font-size: 16px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }

/* 조항(IR23): 소제목 20px, 위 1px 선. 본문 번호 목록 17px(예전 15px) */
.rp-section { margin: 0 0 32px; scroll-margin-top: 96px; } /* 목차 id 는 h4 가 아니라 이 묶음에(chat-kb 가 h4 문자열을 그대로 읽어야 해서) */
.rp-section:last-child { margin-bottom: 0; }
.rp-subtitle { display: block; margin: 0 0 14px; padding-top: 24px; border-top: 1px solid var(--k-line); font-size: 20px; font-weight: 800; line-height: 1.4; letter-spacing: -.01em; color: var(--k-ink); }
.rp-art { margin: 0; padding-left: 26px; list-style: decimal; font-size: 17px; line-height: 1.75; color: var(--k-text); }
.rp-art li + li { margin-top: 10px; }
.rp-art li::marker { font-weight: 700; color: var(--k-ink); }
.rp-art strong { font-weight: 700; color: var(--k-ink); }
.rp-art-note { margin: 12px 0 0; font-size: 16px; line-height: 1.65; color: var(--k-muted); }

/* 표(IR24): 바깥 테두리 · 회색 머리 없이 군청 머리 줄 + 1px 줄 선. 숫자는 tabular */
.rp-table { width: 100%; margin: 0 0 16px; border: 0; border-collapse: separate; border-spacing: 0; border-radius: var(--r-inner); overflow: hidden; }
.rp-table thead { background: none; }
.rp-table th { padding: 12px 16px; border: 0; background: var(--k-navy); color: #fff; font-size: 16px; font-weight: 700; line-height: 1.4; text-align: left; white-space: nowrap; }
.rp-table td { padding: 14px 16px; border-bottom: 1px solid var(--k-line); background: #fff; font-size: 16px; line-height: 1.55; color: var(--k-ink); font-variant-numeric: tabular-nums; }
.rp-table tbody tr:hover td { background: #fff; }
.rp-highlight { color: var(--k-ink); font-weight: 800; }
.rp-danger { color: #dc2626; font-weight: 700; } /* base.css --danger, 글자만(BU6) */

/* 제4조 계산 예시(IR34, astra A4): 제목은 스크롤 상자 밖에서 줄바꿈. 표는 상자 안에서만 가로로 밀리고 첫 열(수강한 차시)은 고정.
   상자의 둥근 모서리는 상자가 맡는다(표가 overflow: hidden 이면 고정 열이 표 안에 갇혀 움직이지 않음) */
.rp-table-title { margin: 18px 0 10px; font-size: 16px; font-weight: 700; line-height: 1.5; color: var(--k-ink); }
.rp-scroll-hint { display: none; margin: 0 0 8px; font-size: 16px; line-height: 1.5; color: var(--k-muted); }
.rp-table-scroll { margin: 0 0 16px; border-radius: var(--r-inner); overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
/* 표 아래 가로 스크롤 막대(refund-policy.js 가 붙이고 위치를 맞춤). 휴대폰은 브라우저 막대가 겹쳐 그려지다 사라져 늘 보이는 막대를 따로 둔다 */
.rp-scroll-track { position: relative; height: 8px; margin: -6px 0 18px; border-radius: var(--r-inner); background: var(--k-line); overflow: hidden; }
.rp-scroll-track > span { position: absolute; top: 0; bottom: 0; left: 0; border-radius: var(--r-inner); background: var(--k-muted); }
.rp-table-scroll:focus-visible { outline-offset: 2px; }
.rp-table-scroll .rp-table { margin: 0; border-radius: 0; overflow: visible; }
.rp-table--calc td:first-child { font-weight: 700; }
.rp-table--calc th:first-child, .rp-table--calc td:first-child { position: sticky; left: 0; z-index: 1; border-right: 1px solid var(--k-line); }
.rp-table--calc th:first-child { border-right-color: var(--k-navy-line); }

/* 목록: 검정 점(빨간 점 · 보라 점 없음) */
.rp-list { margin: 0; padding: 0; list-style: none; }
.rp-list li { position: relative; padding: 6px 0 6px 18px; font-size: 17px; line-height: 1.65; color: var(--k-text); }
.rp-list li::before { content: ''; position: absolute; left: 0; top: 18px; width: 5px; height: 5px; border-radius: 50%; background: var(--k-ink); }
.rp-list--warning li::before { background: var(--k-ink); }
.rp-legal .rp-list li::before { background: var(--k-ink); }

/* 환불 절차(IR25): 번호 원 대신 큰 숫자 글자 + 1px 줄 선(순서가 실제 절차라 번호를 둠) */
.rp-steps { display: block; }
.rp-step { display: grid; grid-template-columns: 48px minmax(0, 1fr); gap: 0 14px; align-items: start; padding: 18px 0; border: 0; border-top: 1px solid var(--k-line); border-radius: 0; background: none; }
.rp-step:last-child { border-bottom: 1px solid var(--k-line); }
.rp-step-num { width: auto; height: auto; display: block; border-radius: 0; background: none; color: var(--k-ink); font-size: 28px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.rp-step-text strong { display: block; margin-bottom: 2px; font-size: 17px; font-weight: 800; line-height: 1.5; color: var(--k-ink); }
.rp-step-text p { margin: 0; font-size: 17px; line-height: 1.6; color: var(--k-text); }

/* 관련 법령 · 문의: 회색 상자 없이 글만 */
.rp-legal, .rp-contact { padding: 0; border: 0; border-radius: 0; background: none; }
.rp-legal > p, .rp-contact > p { margin: 0 0 8px; font-size: 17px; line-height: 1.65; color: var(--k-text); }
.rp-contact-info { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.rp-contact-info span { display: inline-flex; align-items: center; font-size: 17px; font-weight: 700; color: var(--k-ink); }

/* 맨 아래 적용 안내: 상자 없이 1px 선 위 글 */
.rp-footer-note { display: block; margin-top: 48px; padding: 22px 0 0; border: 0; border-top: 1px solid var(--k-line); border-radius: 0; background: none; }
.rp-footer-note p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--k-muted); }

/* ============================================================
   3. 휴대폰(640px 이하, IR27 · IR36): 본문 17px(astra N3), 표 16px, 계산 표만 제 상자 안에서 가로 스크롤
   ============================================================ */
@media (max-width: 640px) {
    .rp-hero { padding: 28px 0 76px; }
    .rp-col { padding: 0 16px; }
    .rp-kicker { margin-bottom: 8px; }
    .rp-h1 { font-size: 28px; line-height: 1.25; }
    .rp-lead { margin-top: 12px; font-size: 16px; line-height: 1.6; }
    .rp-main { padding-bottom: 32px; }
    .rp-top { margin-top: -48px; padding: 20px 18px 20px; }
    .rp-tabs { grid-template-columns: 1fr; gap: 8px; }
    .rp-tab { align-items: flex-start; justify-content: center; gap: 2px; min-height: 64px; padding: 10px 16px; text-align: left; }
    .rp-tab > span { padding-left: 0; padding-right: 0; background-position: 0 100%; }
    .rp-actions { grid-template-columns: 1fr; gap: 8px; margin-top: 18px; padding-top: 18px; }
    .rp-doc { padding-top: 36px; }
    .rp-card--next { margin-top: 44px; padding-top: 36px; scroll-margin-top: 72px; }
    .rp-card-header h2, .rp-card-header h3 { font-size: 22px; line-height: 1.35; }
    .rp-card-desc { font-size: 17px; margin-bottom: 22px; }
    .rp-vod-summary { padding: 18px 16px 20px; }
    .rp-vod-summary ol { font-size: 17px; padding-left: 20px; }
    .rp-toc { padding: 14px 16px 12px; scroll-margin-top: 72px; }
    .rp-toc ol { grid-template-columns: 1fr; }
    .rp-subtitle { font-size: 18px; padding-top: 20px; }
    .rp-section { margin-bottom: 28px; scroll-margin-top: 72px; }
    .rp-art { font-size: 17px; padding-left: 22px; }
    .rp-table th { padding: 10px 12px; font-size: 16px; }
    .rp-table td { padding: 12px 12px; font-size: 16px; }
    .rp-scroll-hint { display: block; }
    .rp-table--calc th, .rp-table--calc td { white-space: nowrap; }
    .rp-step { grid-template-columns: 40px minmax(0, 1fr); padding: 16px 0; }
    .rp-step-num { font-size: 24px; }
    .rp-contact-info { flex-direction: column; gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
    .rp-tab, .rp-tab > span, .rp-btn, .rp a { transition: none; }
}
@media (forced-colors: active) {
    .rp-tab > span { background: none; }
    .rp-tab.active { outline: 3px solid CanvasText; }
    .rp-table th { outline: 1px solid CanvasText; }
}