/* 법적 고지 — /privacy · /terms 읽기 페이지(src/legal.js)와 가입 화면의 만 14세 확인·동의 줄.
   플랫폼 셸(x-plat) 위의 문서형 페이지: 왼쪽 목차 레일 200 · 사이 64 · 본문 680(≥1024, 왼쪽 정렬). 그보다 좁으면 한 칸, 목차는 접는 상자.
   색은 잉크 계단만(팀 색 없음). 한글 줄은 keep-all. 발(footer)의 정책 링크 모양은 v4-platform.css(모든 플랫폼 페이지가 싣는다) */

/* ── 가입 화면 — 만 14세 확인(필수) + 동의 한 줄. 비밀번호 칸과 버튼 사이 ── */
body.x-auth .lg-age {
  position: relative; display: flex; align-items: center; gap: var(--s-3); min-height: var(--hit); margin-top: calc(-1 * var(--s-3));
  font: 500 var(--t-ui)/1.45 var(--font); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent;
}
body.x-auth .lg-agree {
  margin: var(--s-1) 0 var(--s-5); font: 400 var(--t-footnote)/1.6 var(--font); letter-spacing: -0.005em; color: var(--ink-3);
  text-align: left; word-break: keep-all;
}
body.x-auth .lg-agree a { color: var(--ink-2); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-3); transition: color var(--dur-1) var(--ease-out), text-decoration-color var(--dur-1) var(--ease-out); }
body.x-auth .lg-agree a b { font-weight: 600; }
@media (hover: hover) and (pointer: fine) { body.x-auth .lg-agree a:hover { color: var(--ink); text-decoration-color: var(--ink); } }

/* ── 읽기 페이지 ── */
body.x-legal .lg-page { padding-bottom: var(--s-11); } /* 폭은 플랫폼 .container(1060) — 제목 x = 헤더 로고 x */
body.x-legal .lg-head { padding-top: var(--s-10); margin-bottom: var(--s-7); }
body.x-legal .lg-head > h1 { font: 600 var(--t-title-1)/1.15 var(--font); letter-spacing: -0.04em; }
body.x-legal .lg-head .plat-lead { max-width: 600px; word-break: keep-all; }
body.x-legal .lg-meta { margin-top: var(--s-3); font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }
body.x-legal .lg-tabs { margin-bottom: var(--s-9); }

body.x-legal .lg-grid { display: grid; grid-template-columns: 200px minmax(0, 680px); column-gap: var(--s-10); align-items: start; }
body.x-legal .lg-rail { position: sticky; top: calc(var(--bar-h) + var(--s-6)); max-height: calc(100vh - var(--bar-h) - var(--s-9)); overflow: auto; scrollbar-width: none; }
body.x-legal .lg-rail::-webkit-scrollbar { display: none; }
body.x-legal .lg-toc-h { margin-bottom: var(--s-2); font: 600 var(--t-footnote)/1.45 var(--font); color: var(--ink); }
body.x-legal :is(.lg-toc, .lg-toc-m) ol { margin: 0; padding: 0; list-style: none; }
body.x-legal :is(.lg-toc, .lg-toc-m) a {
  display: flex; gap: var(--s-2); padding: 5px 0; font: 400 var(--t-footnote)/1.45 var(--font); letter-spacing: -0.005em; color: var(--ink-2);
  word-break: keep-all; transition: color var(--dur-1) var(--ease-out);
}
body.x-legal :is(.lg-toc, .lg-toc-m) .lg-toc-n { flex: none; min-width: 18px; color: var(--ink-3); }
body.x-legal.x-legal-terms :is(.lg-toc, .lg-toc-m) .lg-toc-n { min-width: 44px; }
@media (hover: hover) and (pointer: fine) { body.x-legal :is(.lg-toc, .lg-toc-m) a:hover { color: var(--ink); } }
body.x-legal .lg-toc-m { display: none; }

/* 본문 */
body.x-legal .lg-doc { min-width: 0; font: 400 var(--t-body)/1.75 var(--font); letter-spacing: -0.01em; color: var(--ink-2); word-break: keep-all; overflow-wrap: anywhere; }
body.x-legal .lg-sec { scroll-margin-top: calc(var(--bar-h) + var(--s-5)); }
body.x-legal .lg-sec + .lg-sec, body.x-legal .lg-sum + .lg-sec { margin-top: var(--s-8); padding-top: var(--s-8); border-top: 1px solid var(--line); }
body.x-legal .lg-h2 { display: flex; align-items: baseline; gap: var(--s-3); margin-bottom: var(--s-4); font: 600 var(--t-headline)/1.35 var(--font); letter-spacing: -0.025em; color: var(--ink); }
body.x-legal .lg-n { flex: none; font: 500 var(--t-ui)/1 var(--font); letter-spacing: 0; color: var(--ink-3); }
body.x-legal .lg-h3 { margin: var(--s-7) 0 var(--s-3); font: 600 var(--t-card)/1.4 var(--font); letter-spacing: -0.02em; color: var(--ink); }
body.x-legal .lg-doc p { margin: 0 0 var(--s-4); }
body.x-legal .lg-doc :is(p, .lg-ul):last-child { margin-bottom: 0; }
body.x-legal .lg-doc :is(strong, b) { font-weight: 600; color: var(--ink); }
body.x-legal .lg-doc a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: var(--line-3); transition: text-decoration-color var(--dur-1) var(--ease-out); }
@media (hover: hover) and (pointer: fine) { body.x-legal .lg-doc a:hover { text-decoration-color: var(--ink); } }
body.x-legal .lg-doc .lg-toc-m a { text-decoration: none; } /* 목차는 본문 링크 밑줄 없이 — 행 자체가 링크 */
body.x-legal .lg-ul { margin: 0 0 var(--s-4); padding-left: 1.25em; }
body.x-legal .lg-ul > li + li { margin-top: var(--s-2); }
body.x-legal .lg-ul > li::marker { color: var(--ink-3); }
body.x-legal .lg-note { font-size: var(--t-ui); line-height: 1.7; color: var(--ink-3); }
body.x-legal .lg-doc code { padding: 1px 5px; border-radius: var(--r-xs); background: var(--wash-2); font: 500 .88em/1 var(--font-mono); color: var(--ink); }
body.x-legal .lg-doc .lg-pre { margin: var(--s-3) 0 var(--s-6); padding: var(--s-4); border-radius: var(--r-sm); background: var(--wash-2); font: 400 12px/1.6 var(--font-mono); color: var(--ink-2); white-space: pre-wrap; overflow-wrap: anywhere; } /* 오픈소스 고지의 라이선스 전문 */
body.x-legal .lg-doc .lg-end { margin: var(--s-10) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--line); font: 400 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); }

/* 표 — 헤어라인 상자, 머리는 캔버스 면. 휴대폰은 행마다 쌓인다 */
body.x-legal .lg-tw { margin: var(--s-5) 0; border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
body.x-legal .lg-tbl { width: 100%; border-collapse: collapse; font: 400 var(--t-ui)/1.6 var(--font); letter-spacing: -0.005em; color: var(--ink-2); }
body.x-legal .lg-tbl :is(th, td) { padding: var(--s-3) var(--s-4); text-align: left; vertical-align: top; }
body.x-legal .lg-tbl thead th { background: var(--canvas); border-bottom: 1px solid var(--line); font: 600 var(--t-footnote)/1.45 var(--font); color: var(--ink-3); white-space: nowrap; }
body.x-legal .lg-tbl tbody tr + tr > * { border-top: 1px solid var(--line); }
body.x-legal .lg-tbl tbody th { width: 30%; font-weight: 600; color: var(--ink); }
body.x-legal .lg-sub { display: inline-block; margin-top: 2px; font: 400 var(--t-footnote)/1.45 var(--font); }
body.x-legal .lg-sub a { color: var(--ink-3); }
/* 열이 많은 표(위탁·국외 이전) — 넓은 화면에서도 회사마다 한 덩어리: 이름 한 줄 + 라벨·값 줄 */
body.x-legal .lg-tw.is-stack thead { display: none; }
body.x-legal .lg-tw.is-stack :is(tbody, tr, th, td) { display: block; }
body.x-legal .lg-tw.is-stack tbody th { width: auto; padding-bottom: var(--s-2); font-size: var(--t-body); }
body.x-legal .lg-tw.is-stack td { display: grid; grid-template-columns: 108px minmax(0, 1fr); align-items: baseline; column-gap: var(--s-4); padding-top: 3px; padding-bottom: 3px; }
body.x-legal .lg-tw.is-stack td::before { content: attr(data-th); font: 500 var(--t-footnote)/1.6 var(--font); color: var(--ink-3); }
body.x-legal .lg-tw.is-stack td:last-child { padding-bottom: var(--s-4); }
body.x-legal .lg-tw.is-stack tbody tr + tr > * { border-top: 0; }
body.x-legal .lg-tw.is-stack tbody tr + tr { border-top: 1px solid var(--line); }

/* 한눈에 보기 — 캔버스 면 위 두 칸 */
body.x-legal .lg-sum { padding: var(--s-6); border-radius: var(--r-lg); background: var(--canvas); }
body.x-legal .lg-sum-h { margin-bottom: var(--s-4); font: 600 var(--t-ui)/1.45 var(--font); color: var(--ink); }
body.x-legal .lg-sum ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--s-6); margin: 0; padding: 0; list-style: none; }
body.x-legal .lg-sum-row { display: flex; align-items: flex-start; gap: var(--s-3); }
body.x-legal .lg-sum-ic { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--paper); box-shadow: 0 0 0 1px var(--line); color: var(--ink-2); }
body.x-legal .lg-sum-ic svg { width: var(--ic-sm); height: var(--ic-sm); }
body.x-legal .lg-sum-tx { display: flex; flex-direction: column; min-width: 0; }
body.x-legal .lg-sum-t { font: 600 var(--t-footnote)/1.45 var(--font); color: var(--ink); }
body.x-legal .lg-sum-s { margin-top: 2px; font: 400 var(--t-ui)/1.55 var(--font); letter-spacing: -0.005em; color: var(--ink-2); }

/* 보호책임자 — 라벨 · 값 */
body.x-legal .lg-dl { margin: var(--s-4) 0 0; border: 1px solid var(--line); border-radius: var(--r-md); font: 400 var(--t-ui)/1.6 var(--font); }
body.x-legal .lg-dl > div { display: grid; grid-template-columns: 160px minmax(0, 1fr); column-gap: var(--s-4); padding: var(--s-3) var(--s-4); }
body.x-legal .lg-dl > div + div { border-top: 1px solid var(--line); }
body.x-legal .lg-dl dt { color: var(--ink-3); }
body.x-legal .lg-dl dd { margin: 0; color: var(--ink); }

/* ≤1023 — 한 칸. 레일 대신 본문 머리의 접는 목차 */
@media (max-width: 1023px) {
  body.x-legal .lg-grid { display: block; max-width: 680px; }
  body.x-legal .lg-rail { display: none; }
  body.x-legal .lg-toc-m { display: block; margin-bottom: var(--s-7); border: 1px solid var(--line); border-radius: var(--r-md); }
  body.x-legal .lg-toc-m > summary {
    display: flex; align-items: center; gap: var(--s-2); min-height: var(--row); padding: 0 var(--s-4); list-style: none; cursor: pointer;
    font: 600 var(--t-ui)/1 var(--font); color: var(--ink); -webkit-tap-highlight-color: transparent;
  }
  body.x-legal .lg-toc-m > summary::-webkit-details-marker { display: none; }
  body.x-legal .lg-toc-m > summary .num { font-weight: 400; color: var(--ink-3); }
  body.x-legal .lg-toc-m > summary svg { width: var(--ic-sm); height: var(--ic-sm); margin-left: auto; color: var(--ink-3); transition: rotate var(--dur-2) var(--ease-out); }
  body.x-legal .lg-toc-m[open] > summary svg { rotate: 180deg; }
  body.x-legal .lg-toc-m ol { padding: 0 var(--s-4) var(--s-3); border-top: 1px solid var(--line); }
  body.x-legal .lg-toc-m a { min-height: var(--hit); align-items: center; padding: 0; font-size: var(--t-ui); }
  body.x-legal .lg-toc-m li + li a { border-top: 1px solid var(--line); }
}
/* ≤699 — 표는 행마다 쌓고, 요약은 한 줄에 하나 */
@media (max-width: 699px) {
  body.x-legal .lg-head { padding-top: var(--s-8); margin-bottom: var(--s-6); }
  body.x-legal .lg-tabs { margin-bottom: var(--s-7); }
  body.x-legal .lg-h2 { font-size: var(--t-card); }
  body.x-legal .lg-sec + .lg-sec, body.x-legal .lg-sum + .lg-sec { margin-top: var(--s-7); padding-top: var(--s-7); }
  body.x-legal .lg-tw thead { display: none; }
  body.x-legal .lg-tw :is(tbody, tr, th, td) { display: block; }
  body.x-legal .lg-tbl tbody th { width: auto; padding-bottom: var(--s-1); }
  body.x-legal .lg-tw td { display: block; padding-top: 2px; padding-bottom: 2px; }
  body.x-legal .lg-tw td::before { content: attr(data-th); display: block; font: 500 var(--t-caption)/1.5 var(--font); color: var(--ink-3); }
  body.x-legal .lg-tw td + td { padding-top: var(--s-2); }
  body.x-legal .lg-tw td:last-child { padding-bottom: var(--s-3); }
  body.x-legal .lg-tw tbody tr + tr > * { border-top: 0; }
  body.x-legal .lg-tw tbody tr + tr { border-top: 1px solid var(--line); }
  body.x-legal .lg-tw.is-stack td { display: block; }
  body.x-legal .lg-tw.is-stack td:last-child { padding-bottom: var(--s-4); }
  body.x-legal .lg-sum { padding: var(--s-5); }
  body.x-legal .lg-sum ul { grid-template-columns: minmax(0, 1fr); gap: var(--s-4); }
  body.x-legal .lg-dl > div { grid-template-columns: minmax(0, 1fr); row-gap: 2px; }
}

/* 앱 모드(SPEC-appmode §4) — 앱 틀 패널 안에서는 폭과 상관없이 한 칸: 다른 앱 화면과 같은 720 기둥 · 같은 제목 x(sidebar.css 앱 틀 머리). 레일 대신 접는 목차 — 위 ≤1023 규칙과 같은 값 */
@media (min-width: 1024px) {
  body.x-app.x-legal .lg-grid { display: block; max-width: 680px; }
  body.x-app.x-legal .lg-rail { display: none; }
  body.x-app.x-legal .lg-toc-m { display: block; margin-bottom: var(--s-7); border: 1px solid var(--line); border-radius: var(--r-md); }
  body.x-app.x-legal .lg-toc-m > summary {
    display: flex; align-items: center; gap: var(--s-2); min-height: var(--row); padding: 0 var(--s-4); list-style: none; cursor: pointer;
    font: 600 var(--t-ui)/1 var(--font); color: var(--ink); -webkit-tap-highlight-color: transparent;
  }
  body.x-app.x-legal .lg-toc-m > summary::-webkit-details-marker { display: none; }
  body.x-app.x-legal .lg-toc-m > summary .num { font-weight: 400; color: var(--ink-3); }
  body.x-app.x-legal .lg-toc-m > summary svg { width: var(--ic-sm); height: var(--ic-sm); margin-left: auto; color: var(--ink-3); transition: rotate var(--dur-2) var(--ease-out); }
  body.x-app.x-legal .lg-toc-m[open] > summary svg { rotate: 180deg; }
  body.x-app.x-legal .lg-toc-m ol { padding: 0 var(--s-4) var(--s-3); border-top: 1px solid var(--line); }
  body.x-app.x-legal .lg-toc-m a { min-height: var(--hit); align-items: center; padding: 0; font-size: var(--t-ui); }
  body.x-app.x-legal .lg-toc-m li + li a { border-top: 1px solid var(--line); }
}