/* 약관 · 동의서 문서 스타일 (legal-docs.js · HPLegal 이 그리는 글) — 2026-10-20 app.css 에서 옮겼다.
   쓰는 곳 — 앱(index.html: 계정관리 약관 페이지 · 로그인 아래 약관 시트 · 동의서 상세)과 주소로 바로 여는
   /terms · /privacy 페이지(terms.html · privacy.html). 토큰은 design-system/tokens.css 를 쓴다.
   ⚠️ --safe-bottom 은 앱에서는 .app 이(app.css), 바로 여는 페이지에서는 아래 .legal-standalone 이 준다. */

/* ═══════════ 약관 · 동의서 문서 (legal-docs.js 가 그린다) ═══════════
   Figma T-1 5811:5474 · T-2 5811:5634 · ②~⑤ 5906:15042 · 15058 · 15063 · 15067 의 본문.
     · 페이지(T-1 · T-2) — 머리(제목 accent/head1/SB-24 · 시행일 base/body3/R-12 text/secondary) · 조 간격 28
     · 시트(S-1 · S-2)   — 머리는 시트 머리(sheet header)가 맡고 조 간격 24
     · 동의서(②~⑤)       — 머리(태그 · 제목) + 안내 + 표 · 강조 안내 묶음, 참고, 동의를 거부할 권리 · 간격 32
   조 안: 제목(base/body1/M-16 흰) · 글(base/body2/R-14 gray_200) · 간격 8. 목록은 번호 + 글 간격 4, 하위는 24 들여. */
.legal {
  display: flex;
  flex-direction: column;
  gap: 32px;
  word-break: keep-all;
  overflow-wrap: break-word;   /* 한 줄에 다 안 들어가는 낱말(메일 주소 등)만 쪼갠다 — anywhere 는 "사진·영상" 을 · 에서 끊었다 */
  color: var(--gray-200);
}
.legal--policy { gap: 28px; }   /* 약관 · 방침 — 조 간격 28 */
.legal--page { padding: 20px 20px calc(56px + var(--safe-bottom)); }
.legal--sheet { gap: 24px; }
.legal mark { background: none; color: var(--yellow-400); }   /* Figma 노란 글씨 — '확인 필요' 문구(legal-docs.js 머리 주석) */
.legal b { font-weight: 500; color: var(--text-primary); }
.legal__head { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; }
.legal__title { margin: 0; color: var(--text-primary); }
.legal__date { margin: 0; color: var(--text-secondary); }
.legal__p { margin: 0; }
.legal__p:not([class*="base-"]) {
  /* base/body2/R-14 */
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.legal__gap { display: block; height: 1.5em; }   /* 한 칸 안의 빈 줄(문단 나눔) */
.legal__art { display: flex; flex-direction: column; gap: 8px; }
.legal__h { margin: 0; color: var(--text-primary); }
.legal__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  /* base/body2/R-14 */
  font-family: var(--font-base);
  font-weight: 400;
  font-size: 14px;
  line-height: 1.5;
  letter-spacing: 0.01em;
}
.legal__li { display: flex; gap: 4px; }
.legal__li--sub { padding-left: 24px; }
.legal__mark { flex-shrink: 0; width: 18px; }   /* 시안 번호 칸 18 고정 · 글과 4 */
/* 표 — 테두리 border/card · 모서리 8 · 칸 여백 12 · 머리 줄(또는 머리 칸) 흰 8% */
.legal__table {
  overflow: hidden;
  border: 1px solid var(--border-card);
  border-radius: 8px;
}
.legal__table table { width: 100%; border-collapse: collapse; table-layout: fixed; }
.legal__th,
.legal__td {
  padding: 12px;
  border-right: 1px solid var(--border-card);
  border-bottom: 1px solid var(--border-card);
  text-align: left;
  vertical-align: top;
}
.legal__th:last-child,
.legal__td:last-child { border-right: 0; }
.legal__table tr:last-child > * { border-bottom: 0; }
.legal__tr--head,
.legal__th--key { background: var(--white-a08); }
.legal__th { font-weight: 500; color: var(--text-primary); }
/* 카드 — 테두리 #303136 50% · 모서리 8 · 여백 16 · 간격 12 */
.legal__cards { display: flex; flex-direction: column; gap: 8px; }
.legal__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 16px;
  border: 1px solid rgba(48, 49, 54, 0.5); /* ⚠️ non-token: Figma T-2 카드 테두리 #303136 50% */
  border-radius: 8px;
}
.legal__card-title { margin: 0; color: var(--text-primary); }
.legal__field { display: flex; flex-direction: column; gap: 4px; }
.legal__field-key { color: var(--text-secondary); }
.legal__field-val--strong { color: var(--text-primary); }
.legal__note { margin: 0; }
/* 동의서 ②~⑤ */
.legal__tag { display: flex; }
.legal__intro-group { display: flex; flex-direction: column; gap: 20px; }
.legal__facts { display: flex; flex-direction: column; gap: 28px; }
.legal__notes { display: flex; flex-direction: column; gap: 8px; }
.legal__refuse { display: flex; flex-direction: column; gap: 8px; }
.legal__refuse-h { margin: 0; color: var(--text-primary); }


/* ═══════════ 주소로 바로 여는 약관 페이지 — /terms · /privacy (terms.html · privacy.html) ═══════════
   로그인 · 앱 없이 문서만 띄운다(카카오싱크 약관 등록 · 키오스크 처리방침 QR · 외부 링크 — #225 · 10-19 다원).
   계정관리 약관 페이지(T-1 5811:5471 · T-2 5811:5631)와 같은 바탕 · 본문이고, 뒤로 갈 앱 화면이 없어 헤더는 없다.
   폰 폭은 그대로, 넓은 화면(데스크톱 · 태블릿)에서는 본문 폭만 600 으로 묶어 가운데 둔다. */
.legal-standalone {   /* <html> 에 붙인다 — 끌어당겨 넘쳐도 바탕이 같은 색이게 */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
  background: var(--neutral-1000);
  -webkit-text-size-adjust: 100%;
}
.legal-standalone body { margin: 0; }
.legal-standalone .legal--page {
  box-sizing: border-box;
  max-width: 600px;
  margin: 0 auto;
  padding-top: calc(32px + var(--safe-top));
}