/* ─────────────────────────────────────────────────────────────
 * pages/legal.css — 법무 문서(개인정보처리방침 · 이용약관) 공용
 * theme.css 토큰 사용. 개인정보/약관 페이지에서만 enqueue.
 * sticky 목차 + 읽기 좋은 본문 컬럼.
 * ───────────────────────────────────────────────────────────── */

.lg-hero, .lg-hero *,
.lg-layout, .lg-layout * {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ── Hero (타이틀 밴드) ──────────────────────────────────────── */
.lg-hero {
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  padding: var(--s-12) 0 var(--s-10);
}
.lg-breadcrumb {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; color: var(--c-fg-4); margin-bottom: var(--s-5);
}
.lg-breadcrumb a { color: var(--c-fg-3); }
.lg-breadcrumb a:hover { color: var(--c-primary); }
.lg-breadcrumb [data-lucide] { width: 14px; height: 14px; color: var(--c-fg-4); }
.lg-hero h1 {
  font-size: 40px; letter-spacing: -0.025em;
  margin-bottom: var(--s-4); color: var(--c-fg-1);
}
.lg-hero-meta {
  display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-6);
  font-size: 14px; color: var(--c-fg-3);
}
.lg-hero-meta span { display: inline-flex; align-items: center; gap: 7px; }
.lg-hero-meta [data-lucide] { width: 15px; height: 15px; color: var(--c-primary); }
.lg-hero-meta strong { color: var(--c-fg-1); font-weight: 700; }

/* ── Layout ──────────────────────────────────────────────────── */
.lg-layout {
  display: grid; grid-template-columns: 260px 1fr;
  gap: var(--s-12);
  padding: var(--s-12) 0 var(--s-20);
  align-items: start;
}

/* ── 목차 (sticky) ───────────────────────────────────────────── */
.lg-toc { position: sticky; top: var(--s-6); }
.lg-toc-title {
  font-size: 12px; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--c-fg-4); margin-bottom: var(--s-4);
}
.lg-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.lg-toc a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 8px 12px; border-radius: var(--r-md);
  font-size: 13.5px; color: var(--c-fg-3); line-height: 1.45;
  border-left: 2px solid transparent;
  transition: background .15s ease, color .15s ease;
}
.lg-toc a:hover { background: var(--c-primary-softer); color: var(--c-primary); text-decoration: none; }
.lg-toc a.is-active {
  background: var(--c-primary-softer); color: var(--c-primary);
  font-weight: 700; border-left-color: var(--c-primary);
}
.lg-toc-no { font-variant-numeric: tabular-nums; color: var(--c-fg-4); flex-shrink: 0; }
.lg-toc a:hover .lg-toc-no, .lg-toc a.is-active .lg-toc-no { color: var(--c-primary); }

/* ── 본문 문서 ───────────────────────────────────────────────── */
.lg-doc { max-width: 760px; min-width: 0; }
.lg-intro {
  font-size: 15px; line-height: 1.85; color: var(--c-fg-2);
  padding: var(--s-6); background: var(--c-bg);
  border: 1px solid var(--c-border); border-radius: var(--r-lg);
  margin-bottom: var(--s-10);
}
.lg-intro strong { color: var(--c-fg-1); font-weight: 700; }

.lg-article {
  padding-bottom: var(--s-10); margin-bottom: var(--s-10);
  border-bottom: 1px solid var(--c-border);
  scroll-margin-top: var(--s-8);
}
.lg-article:last-child { border-bottom: 0; margin-bottom: 0; }
.lg-article-no {
  font-family: var(--font-mono); font-size: 13px; font-weight: 700;
  color: var(--c-primary); letter-spacing: 0.06em;
  display: block; margin-bottom: 6px;
}
.lg-article h2 { font-size: 22px; letter-spacing: -0.01em; margin-bottom: var(--s-5); color: var(--c-fg-1); }
.lg-article h3 { font-size: 16px; color: var(--c-fg-1); margin: var(--s-6) 0 var(--s-2); font-weight: 700; }
.lg-article p { font-size: 15px; line-height: 1.85; color: var(--c-fg-2); margin-bottom: var(--s-3); }
.lg-article p:last-child { margin-bottom: 0; }

/* 리스트 — 점 / 번호 */
.lg-ul, .lg-ol {
  margin: 0 0 var(--s-4); padding-left: 0;
  display: grid; gap: 9px; list-style: none;
}
.lg-ul li, .lg-ol li {
  position: relative; padding-left: var(--s-6);
  font-size: 15px; line-height: 1.8; color: var(--c-fg-2);
}
.lg-ul li::before {
  content: ""; position: absolute; left: 7px; top: 12px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--c-primary);
}
.lg-ol { counter-reset: lgol; }
.lg-ol li { counter-increment: lgol; }
.lg-ol li::before {
  content: counter(lgol) "."; position: absolute; left: 0; top: 0;
  font-weight: 700; color: var(--c-primary); font-size: 14px;
  font-variant-numeric: tabular-nums;
}

/* 표 */
.lg-table {
  width: 100%; border-collapse: collapse;
  margin: var(--s-4) 0 var(--s-6); font-size: 14px;
  border: 1px solid var(--c-border);
}
.lg-table caption { text-align: left; font-size: 13px; color: var(--c-fg-4); margin-bottom: 8px; }
.lg-table th, .lg-table td {
  padding: 12px 14px; border: 1px solid var(--c-border);
  text-align: left; vertical-align: top; line-height: 1.65;
}
.lg-table thead th { background: var(--c-bg); font-weight: 700; color: var(--c-fg-1); font-size: 13px; }
.lg-table tbody th { background: #fcfcfd; font-weight: 600; color: var(--c-fg-1); white-space: nowrap; }
.lg-table td { color: var(--c-fg-2); }

/* 강조 노트 */
.lg-note {
  padding: var(--s-5); background: var(--c-primary-softer);
  border-radius: var(--r-md); font-size: 14px; color: var(--c-fg-2);
  line-height: 1.8; margin: var(--s-4) 0;
}
.lg-note strong { color: var(--c-primary); }

/* 담당자 / 연락처 박스 */
.lg-contact {
  padding: var(--s-6); border: 1px solid var(--c-border);
  border-radius: var(--r-lg); background: #fff; margin-top: var(--s-4);
  display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4) var(--s-6);
}
.lg-contact > div { border-left: 2px solid var(--c-primary); padding-left: var(--s-4); }
.lg-contact dt { font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c-fg-4); font-weight: 600; margin-bottom: 4px; }
.lg-contact dd { margin: 0; font-size: 15px; font-weight: 600; color: var(--c-fg-1); line-height: 1.5; }

/* ── 반응형 ──────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .lg-layout { grid-template-columns: 1fr; gap: var(--s-8); padding-top: var(--s-8); }
  .lg-toc {
    position: static; padding-bottom: var(--s-6);
    border-bottom: 1px solid var(--c-border);
  }
  .lg-toc ol { grid-template-columns: 1fr 1fr; gap: 2px var(--s-4); }
  .lg-hero h1 { font-size: 30px; }
  .lg-doc { max-width: none; }
}
@media (max-width: 560px) {
  .lg-toc ol { grid-template-columns: 1fr; }
  .lg-contact { grid-template-columns: 1fr; }
  .lg-hero h1 { font-size: 26px; }
  .lg-table { font-size: 13px; }
  .lg-table th, .lg-table td { padding: 9px 10px; }
}