/* bp-terms.css — 약관·방침(/policy/terms, /policy/privacy)·사이트맵(/sitemap) 화면 전용 스타일 (design-system §2-34).
 * 공통 bp-components.css 에 두지 않는다(모든 페이지의 렌더 차단 CSS 가 커지면 LCP 가 늦어진다 — W0 측정). 이 화면들만 <head> 에서 읽는다(common/policy/policy-head.jsp).
 * 토큰(bp-tokens.css)만 쓰고 새 색·반경을 만들지 않는다. 기기 차이는 [data-device="mo"] 로. */

.bp-policy { padding-block: var(--bp-space-6) var(--bp-space-8); }

/* ── 종류 이동(이용약관 / 개인정보처리방침) ───────────────── */
.bp-policy__tabs { display: flex; flex-wrap: wrap; gap: var(--bp-space-2); margin-bottom: var(--bp-space-5); }
.bp-policy__tab { display: inline-flex; align-items: center; justify-content: center; min-height: var(--bp-touch-min); padding: 0 var(--bp-space-5); border-radius: var(--bp-radius-pill); background: var(--bp-color-bg-card); color: var(--bp-color-brand-deep); font-weight: var(--bp-fw-bold); text-decoration: none; }
.bp-policy__tab:hover { background: var(--bp-color-brand-soft); }
.bp-policy__tab[aria-current="page"] { background: var(--bp-color-brand); color: var(--bp-color-text-inverse); }
.bp-policy__tab:focus-visible { outline: 3px solid var(--bp-color-brand); outline-offset: 2px; }

/* ── 이전 버전 안내 ──────────────────────────────────────── */
.bp-policy__old { margin: 0 0 var(--bp-space-5); padding: var(--bp-space-4); border-radius: var(--bp-radius-lg); background: var(--bp-color-bg-notice); color: var(--bp-color-text-strong); line-height: 1.6; overflow-wrap: anywhere; }
.bp-policy__old a { color: var(--bp-color-brand-deep); font-weight: var(--bp-fw-bold); text-decoration: underline; text-underline-offset: 3px; }
.bp-policy__old a:focus-visible { outline: 3px solid var(--bp-color-brand); outline-offset: 2px; }

/* ── 문서(제목·시행일·본문) ──────────────────────────────── */
.bp-policy__doc { background: var(--bp-color-bg-surface); border-top: 2px solid var(--bp-color-brand-deep); border-radius: 0 0 var(--bp-radius-xl) var(--bp-radius-xl); }
.bp-policy__head { padding: var(--bp-space-5); border-bottom: 1px solid var(--bp-color-border-soft); }
.bp-policy__title { margin: 0; font-size: var(--bp-fs-title); line-height: 1.4; color: var(--bp-color-text-strong); overflow-wrap: anywhere; }
.bp-policy__meta { display: flex; flex-wrap: wrap; gap: var(--bp-space-2) var(--bp-space-6); margin: var(--bp-space-3) 0 0; color: var(--bp-color-text-muted); font-size: var(--bp-fs-small); }
.bp-policy__metaitem { display: flex; gap: var(--bp-space-2); }
.bp-policy__metaitem dt { font-weight: var(--bp-fw-bold); }
.bp-policy__metaitem dd { margin: 0; }
.bp-policy__body { padding: var(--bp-space-5); min-height: 240px; line-height: 1.8; overflow-wrap: anywhere; color: var(--bp-color-text); }
.bp-policy__body h2, .bp-policy__body h3, .bp-policy__body h4, .bp-policy__body h5 { margin: var(--bp-space-6) 0 var(--bp-space-2); font-weight: var(--bp-fw-bold); color: var(--bp-color-brand-deep); line-height: 1.5; }
.bp-policy__body > :first-child { margin-top: 0; }
.bp-policy__body p { margin: 0 0 var(--bp-space-3); }
.bp-policy__body ul, .bp-policy__body ol { margin: 0 0 var(--bp-space-3); padding-left: 1.4em; }
.bp-policy__body li { margin-bottom: var(--bp-space-1); }
.bp-policy__body table { width: 100%; border-collapse: collapse; margin-bottom: var(--bp-space-3); }
.bp-policy__body th, .bp-policy__body td { padding: var(--bp-space-2) var(--bp-space-3); border: 1px solid var(--bp-color-border-soft); text-align: left; vertical-align: top; }
.bp-policy__body th { background: var(--bp-color-bg-card); }

/* ── 개정 이력 ──────────────────────────────────────────── */
.bp-policy__versions { margin-top: var(--bp-space-7); }
.bp-policy__subtitle { margin: 0 0 var(--bp-space-3); font-size: var(--bp-fs-h2); line-height: 1.4; color: var(--bp-color-text-strong); }
.bp-policy__vlist { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--bp-color-border-soft); }
.bp-policy__vrow { display: flex; align-items: center; justify-content: space-between; gap: var(--bp-space-3); min-height: var(--bp-touch-min); border-bottom: 1px solid var(--bp-color-border-soft); }
.bp-policy__vrow--selected { background: var(--bp-color-brand-soft); }
.bp-policy__vlink { display: flex; align-items: center; gap: var(--bp-space-1); flex: 1 1 auto; min-height: var(--bp-touch-min); padding: var(--bp-space-2) var(--bp-space-4); color: var(--bp-color-text); text-decoration: none; }
.bp-policy__vlink:hover { text-decoration: underline; text-underline-offset: 3px; }
.bp-policy__vlink[aria-current="page"] { font-weight: var(--bp-fw-bold); color: var(--bp-color-brand-deep); }
.bp-policy__vlink:focus-visible { outline: 3px solid var(--bp-color-brand); outline-offset: -3px; }
.bp-policy__badge { flex: none; margin-right: var(--bp-space-4); padding: 2px var(--bp-space-3); border-radius: var(--bp-radius-pill); background: var(--bp-color-brand); color: var(--bp-color-text-inverse); font-size: var(--bp-fs-small); font-weight: var(--bp-fw-bold); }

/* ── 사이트맵 ───────────────────────────────────────────── */
.bp-sitemap { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--bp-space-6) var(--bp-space-5); }
.bp-sitemap__group { min-width: 0; padding: var(--bp-space-5); border-radius: var(--bp-radius-xl); background: var(--bp-color-bg-surface); border-top: 2px solid var(--bp-color-brand-deep); }
.bp-sitemap__title { margin: 0 0 var(--bp-space-3); font-size: var(--bp-fs-h2); line-height: 1.4; color: var(--bp-color-brand-deep); }
.bp-sitemap__list { margin: 0; padding: 0; list-style: none; }
.bp-sitemap__link { display: flex; align-items: center; min-height: var(--bp-touch-min); color: var(--bp-color-text); text-decoration: none; overflow-wrap: anywhere; }
.bp-sitemap__link:hover { text-decoration: underline; text-underline-offset: 3px; }
.bp-sitemap__link:focus-visible { outline: 3px solid var(--bp-color-brand); outline-offset: 2px; border-radius: var(--bp-radius-sm); }

[data-device="mo"] .bp-policy__head, [data-device="mo"] .bp-policy__body { padding: var(--bp-space-4); }
[data-device="mo"] .bp-policy__tab { flex: 1 1 0; padding-inline: var(--bp-space-3); }
[data-device="mo"] .bp-sitemap { grid-template-columns: minmax(0, 1fr); gap: var(--bp-space-4); }
