@charset "utf-8";

/* ============================================================
   법적 고지 문서 페이지 — 이용약관 · 개인정보처리방침 · 이메일무단수집거부
   /policy/terms.html · privacy.html · email.html   (2026-09-18 신설, 같은 날 문서형으로 단순화)

   서브페이지 공통 틀(page-hero · sub-tabs · infra-wrap)을 받고, 본문은 장식 없는 문서다.
     왼쪽  목차 — 얇은 글자 목록, 스크롤을 따라온다
     오른쪽 문서 — "제1조 (목적)" 굵은 제목, 본문, ①②③ 항, 1. 2. 호, 회색 머리 표
   ============================================================ */

/* 히어로 — 사진(policy-hero.jpg) 위에 딤. 파일이 없으면 네이비 단색이 바탕으로 남는다 */
.legal-page .page-hero { background: #22395e; }

/* ①②③ — 항 번호 */
@counter-style legal-circled {
  system: fixed;
  symbols: "①" "②" "③" "④" "⑤" "⑥" "⑦" "⑧" "⑨" "⑩" "⑪" "⑫";
  suffix: " ";
}

/* ==================== 두 칸 ==================== */
.legal {
  display: grid;
  grid-template-columns: calc(260 * var(--u)) minmax(0, 1fr);
  column-gap: calc(100 * var(--u));
  align-items: start;
  margin-top: calc(80 * var(--u));
}

/* ---------- 왼쪽 목차 ---------- */
.legal__aside {
  position: sticky;
  top: calc(var(--gnb-h, 110) * var(--u) + 32px);
}
.legal__toc {
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--sub-ink);
}
.legal__toc a {
  display: block;
  padding: calc(11 * var(--u)) 0;
  border-bottom: 1px solid var(--line-track);
  font-size: max(calc(15 * var(--u)), 13px);
  line-height: 1.5;
  letter-spacing: -.02em;
  color: #777;
  text-decoration: none;
  word-break: keep-all;
}
.legal__toc a:hover { color: var(--sub-ink); }
.legal__toc a.is-current { color: var(--sub-ink); font-weight: 600; }

/* ---------- 오른쪽 문서 ---------- */
.legal__doc { min-width: 0; }

.legal__title {
  margin: 0;
  font-weight: 700;
  font-size: max(calc(32 * var(--u)), 22px);
  line-height: 1.3;
  letter-spacing: -.04em;
  color: var(--sub-ink);
}
.legal__date {
  margin: calc(12 * var(--u)) 0 0;
  font-size: max(calc(15 * var(--u)), 13px);
  letter-spacing: -.02em;
  color: #888;
}
.legal__intro {
  margin: calc(36 * var(--u)) 0 0;
  padding: calc(28 * var(--u)) 0;
  border-top: 1px solid var(--sub-ink);
  border-bottom: 1px solid var(--line-track);
  font-size: max(calc(17 * var(--u)), 14px);
  line-height: 1.8;
  letter-spacing: -.02em;
  color: var(--ink-body);
  word-break: keep-all;
}

.legal__sec { margin-top: calc(48 * var(--u)); scroll-margin-top: calc(var(--gnb-h, 110) * var(--u) + 32px); }
.legal__sec h2 {
  margin: 0 0 calc(14 * var(--u));
  font-weight: 700;
  font-size: max(calc(19 * var(--u)), 15px);
  line-height: 1.5;
  letter-spacing: -.03em;
  color: var(--sub-ink);
}
.legal__sec p,
.legal__sec li {
  font-size: max(calc(16 * var(--u)), 14px);
  line-height: 1.8;
  letter-spacing: -.02em;
  color: var(--ink-body);
  word-break: keep-all;
}
.legal__sec p { margin: 0; }
.legal__sec p + p, .legal__sec p + ol, .legal__sec ol + p, .legal__sec p + ul, .legal__sec ul + p,
.legal__sec p + .legal__table-wrap, .legal__sec .legal__table-wrap + p, .legal__sec p + .legal__rows { margin-top: calc(10 * var(--u)); }

/* 항 ① ② ③ — 번호가 밖으로 나오고 본문은 들여쓴다 */
.legal__sec ol { margin: 0; padding: 0 0 0 calc(28 * var(--u)); list-style: legal-circled; }
.legal__sec ol > li + li { margin-top: calc(4 * var(--u)); }
.legal__sec ol > li::marker { color: var(--ink-mid); }
/* 호 1. 2. 3. */
.legal__sec ol ol { margin-top: calc(4 * var(--u)); padding-left: calc(22 * var(--u)); list-style: decimal; }
.legal__sec ol ol > li::marker { color: #999; }
.legal__sec ul { margin: 0; padding-left: calc(18 * var(--u)); list-style: "- "; }
.legal__sec ul > li + li { margin-top: calc(2 * var(--u)); }
.legal__sec a { color: var(--sub-point); text-decoration: underline; text-underline-offset: .15em; }

/* 표 */
.legal__table-wrap { overflow-x: auto; }
.legal__table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--sub-ink); }
.legal__table th, .legal__table td {
  padding: calc(11 * var(--u)) calc(14 * var(--u));
  border-bottom: 1px solid var(--line-track);
  font-size: max(calc(15 * var(--u)), 13px);
  line-height: 1.6;
  letter-spacing: -.02em;
  text-align: left;
  vertical-align: top;
  word-break: keep-all;
}
.legal__table thead th { background: #f6f6f6; font-weight: 600; color: var(--sub-ink); }
.legal__table tbody th { font-weight: 500; color: var(--sub-ink); white-space: nowrap; }
.legal__table td { color: var(--ink-body); }

/* 연락처 — 줄 단위 dl */
.legal__rows { margin: 0; border-top: 1px solid var(--sub-ink); }
.legal__rows div {
  display: grid;
  grid-template-columns: calc(160 * var(--u)) 1fr;
  padding: calc(11 * var(--u)) 0;
  border-bottom: 1px solid var(--line-track);
}
.legal__rows dt { font-size: max(calc(15 * var(--u)), 13px); line-height: 1.6; color: var(--sub-ink); font-weight: 500; }
.legal__rows dd { margin: 0; font-size: max(calc(15 * var(--u)), 13px); line-height: 1.6; color: var(--ink-body); }
.legal__rows dd a { color: inherit; text-decoration: none; }
.legal__rows dd a:hover { color: var(--sub-point); }

/* 인용 (법 조문) */
.legal__quote {
  margin: 0;
  padding: calc(4 * var(--u)) 0 calc(4 * var(--u)) calc(20 * var(--u));
  border-left: 2px solid #ccc;
}
.legal__quote p + p { margin-top: calc(6 * var(--u)); }

/* 부칙 */
.legal__foot { margin-top: calc(56 * var(--u)); padding-top: calc(24 * var(--u)); border-top: 1px solid var(--line-track); }

/* ==================== 1024 이하 — 목차가 위로 ==================== */
@media (max-width: 1024px) {
  .legal { grid-template-columns: 1fr; row-gap: calc(36 * var(--u)); margin-top: calc(48 * var(--u)); }
  .legal__aside { position: static; }
  .legal__toc { display: flex; flex-wrap: wrap; gap: 0 calc(18 * var(--u)); border-top: 0; }
  .legal__toc a { padding: calc(6 * var(--u)) 0; border-bottom: 0; }
  .legal__rows div { grid-template-columns: calc(120 * var(--u)) 1fr; }
}
@media (max-width: 768px) {
  .legal { margin-top: var(--sp-block); }
  .legal__sec { margin-top: var(--sp-section); }
  .legal__rows div { grid-template-columns: 1fr; gap: calc(2 * var(--u)); }
}