/* ══════════════════════════════════════════════════════════════════
   HILiT 법적 고지 화면 — privacy.html · terms.html 공용
   랜딩 맨 아래 [개인정보 처리방침] [이용약관]이 여는 검정 화면이다(사용자 지시).

   🔴 문서의 원본은 서비스 앱(hilit.site)의 legal/privacy/page.tsx · legal/terms/page.tsx 다.
      이 화면은 그 문장을 한 글자도 고치지 않고 옮겨 목차·표만 정리했다.
      원본이 바뀌면 이 두 파일도 같이 고친다 — 어긋나면 랜딩과 서비스가 서로 다른 약관을 보인다.
   🔴 빈 칸([운영자명 — 사업자 등록 완료 후 기재] 등)은 원본 그대로 둔다.
      원본 주석이 "지금 임의로 적으면 그것이 허위 표시가 된다"고 적어 두었다.
   ══════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
html { background: #040606; scroll-behavior: smooth; scroll-padding-block-start: calc(var(--nav-height) + var(--space-4)); }
body { min-width: 320px; margin: 0; background: #040606; color: var(--color-light); font-family: var(--font-body); font-size: 1rem; line-height: 1.75; word-break: keep-all; overflow-wrap: break-word; }
a { color: var(--color-accent); text-underline-offset: .25em; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; }
::selection { background: var(--color-accent); color: var(--color-accent-ink); }
.skip-link { position: fixed; inset-block-start: var(--space-3); inset-inline-start: var(--space-3); z-index: 40; transform: translateY(-180%); padding: var(--space-3) var(--space-4); background: var(--color-accent-ink); color: var(--color-accent); font-weight: 700; }
.skip-link:focus { transform: none; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* ── 위 막대 — 랜딩 내비와 같은 검정 막대 + 시안→라임 선 ─────────────── */
.legal-bar { position: sticky; inset-block-start: 0; z-index: 30; background: rgb(4 6 6 / .94); box-shadow: 0 1px 0 rgb(255 255 255 / .08); }
.legal-bar::after { content: ""; position: absolute; inset: auto 0 0; height: 2px; background: linear-gradient(90deg, #08d9ed 0%, #24ecc8 45%, #d7ff00 100%); }
.legal-bar-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); width: min(100%, 87.5rem); min-height: var(--nav-height); margin-inline: auto; padding-inline: var(--page-gutter); }
.legal-brand { display: inline-flex; }
.legal-brand img { display: block; width: clamp(6rem, 10vw, 7.5rem); height: auto; }
.legal-back { display: inline-flex; align-items: center; gap: .5em; min-height: 2.5rem; padding-inline: var(--space-4); border: var(--rule) solid rgb(255 255 255 / .35); color: var(--color-light); font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-decoration: none; white-space: nowrap; }
.legal-back::before { content: "\2190"; }

/* ── 본문 ─────────────────────────────────────────────────────────── */
.legal { width: min(100%, 52rem); margin-inline: auto; padding: var(--space-7) var(--page-gutter) var(--space-9); }

/* 🔴 아래 부품(탭·안내·목차·관련 링크)은 모두 .legal 을 앞에 붙인다. 본문 공용 규칙
   (.legal p · .legal ol · .legal ul · .legal li + li · .legal h2)과 우선순위가 같으면 뒤에 오는
   공용 규칙이 이겨 버린다 — 실측: 목차 제목에 장 구분선이 붙고, 탭이 들여쓰기되고 한 칸 어긋났다. */

/* 두 문서 사이를 오가는 탭 — 지금 문서는 채운다. */
.legal .legal-tabs { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0 0 var(--space-6); padding: 0; list-style: none; }
.legal .legal-tabs li + li { margin: 0; }
.legal-tabs a { display: inline-flex; align-items: center; min-height: 2.5rem; padding-inline: var(--space-4); border: var(--rule) solid rgb(255 255 255 / .22); border-radius: 999px; color: var(--color-light-muted); font-size: var(--text-sm); font-weight: 700; text-decoration: none; }
.legal-tabs a[aria-current="page"] { border-color: var(--color-accent); background: var(--color-accent); color: var(--color-accent-ink); }

.legal h1 { margin: 0; font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.15; letter-spacing: -.03em; text-wrap: balance; }
.legal-meta { margin: var(--space-3) 0 0; color: var(--color-light-muted); font-size: var(--text-sm); }

.legal-notice { margin: var(--space-6) 0; padding: var(--space-4) var(--space-5); border: var(--rule) solid rgb(8 217 237 / .3); border-inline-start: 3px solid var(--color-accent); background: rgb(8 217 237 / .06); }
.legal .legal-notice p { margin: 0; }

/* 목차 — 긴 문서라 처음에 한 번에 훑고 건너뛰게 한다. */
.legal-toc { margin: var(--space-6) 0 var(--space-7); padding: var(--space-5); border: var(--rule) solid rgb(255 255 255 / .12); background: rgb(255 255 255 / .03); }
.legal .legal-toc > h2 { margin: 0 0 var(--space-3); padding: 0; border: 0; color: var(--color-light-muted); font-size: var(--text-xs); font-weight: 800; letter-spacing: .16em; }
.legal .legal-toc ol { margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); line-height: 1.55; }
.legal .legal-toc > ol { columns: 2 17rem; column-gap: var(--space-6); }
.legal-toc li { break-inside: avoid; }
.legal .legal-toc li + li { margin-block-start: var(--space-2); }
.legal-toc a { color: oklch(86% 0.014 210); text-decoration: none; }
.legal-toc .toc-chapter > a { color: var(--color-light); font-weight: 700; }
.legal .legal-toc .toc-chapter ol { margin-block-start: var(--space-1); padding-inline-start: var(--space-3); border-inline-start: var(--rule) solid rgb(255 255 255 / .12); }
.legal .legal-toc .toc-chapter li + li { margin-block-start: .15rem; }

.legal h2 { margin: var(--space-8) 0 var(--space-4); padding-block-start: var(--space-5); border-block-start: var(--rule) solid rgb(255 255 255 / .14); font-size: clamp(1.2rem, 2.4vw, 1.5rem); font-weight: 800; line-height: 1.4; letter-spacing: -.015em; }
.legal h3 { margin: var(--space-6) 0 var(--space-2); font-size: 1.05rem; font-weight: 700; line-height: 1.5; }
/* 약관은 장(h2) 바로 아래 조(h3)가 온다 — 장 제목과 첫 조 사이를 띄우지 않는다. */
.legal h2 + h3 { margin-block-start: var(--space-4); }
.legal p, .legal li, .legal td { color: oklch(86% 0.014 210); }
.legal p { margin: var(--space-3) 0; }
.legal b { color: var(--color-light); font-weight: 700; }
.legal ol, .legal ul { margin: var(--space-3) 0; padding-inline-start: 1.5rem; }
.legal li + li { margin-block-start: var(--space-2); }
.legal li > ol, .legal li > ul { margin-block: var(--space-2) 0; }
.legal li::marker { color: var(--color-light-muted); }

/* 표 — 좁은 화면에서는 표만 가로로 밀린다. 지면 전체가 옆으로 흔들리지 않게 한다. */
.table-wrap { margin: var(--space-4) 0 var(--space-5); overflow-x: auto; border: var(--rule) solid rgb(255 255 255 / .14); }
.legal table { width: 100%; border-collapse: collapse; font-size: var(--text-sm); line-height: 1.6; }
.legal table.wide { min-width: 40rem; }
.legal th, .legal td { padding: var(--space-3) var(--space-4); border-block-end: var(--rule) solid rgb(255 255 255 / .1); text-align: start; vertical-align: top; }
.legal thead th { background: rgb(255 255 255 / .07); color: var(--color-light); font-weight: 700; white-space: nowrap; }
.legal tbody th { width: 34%; background: rgb(255 255 255 / .035); color: var(--color-light); font-weight: 700; }
.legal tbody tr:last-child > * { border-block-end: 0; }

.legal .legal-related { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-5); margin-block-start: var(--space-9); padding-block-start: var(--space-5); border-block-start: var(--rule) solid rgb(255 255 255 / .14); font-size: var(--text-sm); }
.legal-related a { color: var(--color-light); font-weight: 700; }
.legal-top { margin-inline-start: auto; }

@media (hover: hover) and (pointer: fine) {
  .legal-back:hover, .legal-tabs a:not([aria-current="page"]):hover { border-color: var(--color-accent); color: var(--color-accent); }
  .legal-toc a:hover, .legal-related a:hover { color: var(--color-accent); }
}