/* =====================================================================
   법정 문서 — 서비스 이용약관 · 개인정보처리방침 · CCTV 운영 · 관리방침 · 이메일 무단 수집거부
   Figma 시안 없음 → 서브 공통 톤(본 · 포슬린 · 베이지 액센트)으로 읽기 쉬운 문서 타이포
   마크업: section.legal-hero(크럼 · h1 · 설명) → nav.sub-nav.legal-nav(문서 간 이동)
           → section.legal-page > .legal-page__grid > nav.legal-toc(build.py 가 h2[id] 에서 생성) + article.legal-doc
           .legal-page--indexed = 본문에 원문 '순서' 목록(.legal-index)이 있는 문서 → Tablet · Mobile 에서는 목차 상자 대신 그 목록을 쓴다
   build.py page_css(): 4개 페이지 모두 이 파일(assets/pages/legal.css)을 쓴다 · --artifact 는 전역으로 합쳐지므로 legal-* 범위만 사용
   ===================================================================== */
.legal-hero{margin-top:var(--header-h);padding:72px 0 56px;background:var(--bone)}
.legal-hero .crumb{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:center;margin-bottom:28px;font-size:12.5px;line-height:1.4;letter-spacing:.04em;color:var(--text-3)}
.legal-hero .crumb a:hover{color:var(--brown)}
.legal-hero .crumb i{width:3px;height:3px;border-radius:50%;background:var(--beige)}
.legal-hero .crumb b{font-weight:400;color:var(--text-2)}
.legal-hero h1 .en{display:block;font-family:var(--ff-en);font-size:64px;line-height:1;font-weight:400;letter-spacing:-.015em;color:var(--text-strong)}
.legal-hero h1 em{font-style:italic;font-weight:300;color:var(--brown)}
.legal-hero h1 .kr{display:block;margin-top:14px;font-family:var(--ff-kr-serif);font-size:28px;font-weight:400;line-height:1.35;letter-spacing:-.03em;color:var(--text-strong)}
.legal-hero p{margin-top:14px;font-size:15px;line-height:1.8;letter-spacing:-.01em;color:var(--text-2)}

.legal-page{padding:72px 0 120px;background:#fff}
.legal-page__grid{display:grid;grid-template-columns:260px minmax(0,820px);gap:80px;align-items:start}
.legal-page--single .legal-page__grid{grid-template-columns:minmax(0,820px)}

/* 조항 목차 — Desktop: 좌측 고정(헤더 + 서브 내비 아래) */
.legal-toc{position:sticky;top:calc(var(--header-h) + 92px);max-height:calc(100vh - var(--header-h) - 124px);overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.legal-toc__head{display:flex;align-items:baseline;gap:10px;padding-bottom:14px;border-bottom:1px solid var(--ink);font-family:var(--ff-en);font-size:22px;font-style:italic;line-height:1.2;color:var(--text-strong)}
.legal-toc__head small{font-family:var(--ff-kr);font-style:normal;font-size:12px;letter-spacing:.12em;color:var(--text-3)}
.legal-toc ol{margin:0;padding:0;list-style:none}
.legal-toc a{display:block;padding:10px 2px;border-bottom:1px solid var(--hair);font-size:14px;line-height:1.55;letter-spacing:-.02em;color:var(--text-2);word-break:keep-all;transition:color .3s var(--ease)}
.legal-toc a:hover{color:var(--brown)}

/* 본문 */
.legal-doc{font-size:16px;line-height:1.85;letter-spacing:-.01em;color:var(--text-mid);word-break:keep-all;overflow-wrap:anywhere}
.legal-doc>*+*{margin-top:12px}
.legal-doc h2{margin-top:64px;padding-top:32px;border-top:1px solid var(--hair);font-size:22px;font-weight:600;line-height:1.5;letter-spacing:-.03em;color:var(--text-strong);scroll-margin-top:calc(var(--header-h) + 84px)}
.legal-doc h3{margin-top:36px;font-size:17px;font-weight:600;line-height:1.6;letter-spacing:-.02em;color:var(--text-strong)}
.legal-doc h3::before{content:"";display:inline-block;width:3px;height:.9em;margin-right:10px;border-radius:2px;background:var(--beige);vertical-align:-.08em}
.legal-doc h4{margin-top:28px;font-size:16px;font-weight:500;line-height:1.6;color:var(--text-strong);scroll-margin-top:calc(var(--header-h) + 84px)}
.legal-doc h2+h3{margin-top:22px}
.legal-doc :is(h2,h3,h4)+:not(h2,h3,h4){margin-top:14px}
.legal-doc strong{font-weight:600;color:var(--text-strong)}
.legal-doc ul{padding-left:1.3em;list-style:disc}
.legal-doc ol{margin-bottom:0;padding-left:1.6em;list-style:decimal}
.legal-doc li+li{margin-top:4px}
.legal-doc li::marker{color:var(--beige)}
.legal-doc a{color:var(--brown);text-decoration:underline;text-underline-offset:3px}
.legal-doc a:hover{color:var(--text-strong)}
/* 원문 '순서' 목록(개인정보처리방침 · CCTV) — 각 조항으로 이동하는 링크 */
.legal-doc .legal-index a{color:inherit;text-decoration:none}
.legal-doc .legal-index a:hover{color:var(--brown);text-decoration:underline}
.legal-doc table{width:100%;border-collapse:collapse;border-top:2px solid var(--beige);font-size:15px;line-height:1.75}
.legal-doc th{width:26%;padding:14px 18px;border-bottom:1px solid var(--hair);background:var(--porcelain);text-align:left;vertical-align:top;font-weight:500;color:var(--text-strong)}
.legal-doc td{padding:14px 18px;border-bottom:1px solid var(--hair);vertical-align:top}
.legal-doc td p+p{margin-top:6px}
.legal-doc td ul{margin:0}
.legal-doc .legal-contact th{width:140px}
.legal-doc .legal-note{font-size:14px;line-height:1.75;color:var(--text-3)}
.legal-doc .nw{white-space:nowrap}/* 전화번호가 하이픈에서 줄바꿈되지 않게 */
.legal-meta{display:flex;flex-wrap:wrap;gap:4px 20px;margin-bottom:28px;padding:14px 20px;border-radius:12px;background:var(--porcelain);font-size:14px;line-height:1.7;color:var(--text-2)}
.legal-meta>span{display:inline-flex;flex-wrap:wrap;align-items:center;gap:4px 8px}
.legal-meta>span+span::before{content:"";width:3px;height:3px;border-radius:50%;background:var(--gold)}
/* 병원 확인 후 채울 값 — 게시 전 반드시 교체 */
.legal-todo{display:inline-block;padding:0 8px;border:1px dashed var(--gold);border-radius:6px;background:rgba(201,159,69,.12);font-size:.94em;font-weight:600;line-height:1.7;color:var(--gold-deep)}

/* ---------- Tablet 768–1279: 목차는 본문 위 상자(2열) ---------- */
@media (max-width:1279px){
  .legal-hero{padding:56px 0 44px}
  .legal-hero h1 .en{font-size:48px}
  .legal-hero h1 .kr{font-size:22px;font-weight:300}
  .legal-page{padding:56px 0 96px}
  .legal-page__grid,.legal-page--single .legal-page__grid{grid-template-columns:minmax(0,1fr);gap:40px}
  .legal-toc{position:static;max-height:none;overflow:visible;padding:22px 28px 16px;border-radius:16px;background:var(--porcelain)}
  .legal-toc__head{padding-bottom:12px;font-size:20px}
  .legal-toc ol{columns:2;column-gap:36px}
  .legal-toc li{break-inside:avoid}
  .legal-page--indexed .legal-toc{display:none}/* 본문에 원문 '순서' 목록(링크)이 있으면 목차 상자 생략 — 같은 목록이 두 번 나오지 않게 */
  .legal-doc h2,.legal-doc h4{scroll-margin-top:calc(var(--header-h) + 78px)}
}

/* ---------- Mobile ≤767: 표는 항목(위) · 내용(아래)으로 쌓음 ---------- */
@media (max-width:767px){
  .legal-hero{padding:40px 0 32px}
  .legal-hero .crumb{margin-bottom:20px}
  .legal-hero h1 .en{font-size:38px}
  .legal-hero h1 .kr{margin-top:10px;font-size:19px}
  .legal-hero p{margin-top:10px;font-size:13.5px;letter-spacing:-.02em;word-break:keep-all}
  .legal-page{padding:40px 0 72px}
  .legal-page__grid,.legal-page--single .legal-page__grid{gap:32px}
  .legal-toc{padding:16px 18px 10px;border-radius:12px}
  .legal-toc__head{font-size:18px}
  .legal-toc ol{columns:1}
  .legal-toc a{padding:8px 2px;font-size:13.5px}
  .legal-doc{font-size:14.5px;line-height:1.8;letter-spacing:-.02em}
  .legal-doc h2{margin-top:48px;padding-top:24px;font-size:18px}
  .legal-doc h2,.legal-doc h4{scroll-margin-top:calc(var(--header-h) + 68px)}
  .legal-doc h3{margin-top:28px;font-size:15.5px}
  .legal-doc h4{margin-top:22px;font-size:14.5px}
  .legal-doc table{font-size:14px}
  .legal-doc table,.legal-doc tbody,.legal-doc tr,.legal-doc th,.legal-doc td{display:block;width:auto}
  .legal-doc th{padding:10px 14px;border-bottom:0}
  .legal-doc td{padding:10px 14px 14px}
  .legal-doc .legal-contact tr{display:grid;grid-template-columns:96px minmax(0,1fr);border-bottom:1px solid var(--hair)}
  .legal-doc .legal-contact :is(th,td){width:auto;padding:10px 14px;border-bottom:0}
  .legal-doc .legal-note{font-size:13px}
  .legal-meta{padding:12px 16px;font-size:13px}
}