/* 찌뿌두둥 법적 문서 공통 스타일
   app/legal(styles/input.css)에서 확정한 flat editorial layout을 plain CSS로 옮긴 것.
   카드·구분선·배경 박스 없이 제목 → 본문이 white background 위에 바로 놓인다.

   Figma AC-01-04-a (1449:2978) 문서 계층을 white theme으로 변환한 값.
   title    → head_24_sb  (24px / 600 / 1.4)  charcoal-11 #252527
   heading  → body_15_sb  (15px / 600 / 1.4)  charcoal-9  #424246
   body     → Etc_13_r    (13px → 14px / 400)  charcoal-8  #525257
   marker   → charcoal-6  #73737A
   레퍼런스의 line-height: normal은 한글 장문에 맞춰 1.6으로 바꾼다.
   간격: 제목→본문 22px, section→section 26px, heading→body 8px,
   문단→문단 10px, list item 6px. */

/* ---------- reset (이 문서에서 쓰는 요소만) ---------- */

*,
::before,
::after {
  box-sizing: border-box;
  border: 0 solid #e5e7eb;
}

html {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  font-family:
    "Pretendard Variable",
    Pretendard,
    -apple-system,
    BlinkMacSystemFont,
    "Apple SD Gothic Neo",
    "Noto Sans KR",
    "Segoe UI",
    sans-serif;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

body {
  margin: 0;
  line-height: inherit;
  background-color: #ffffff;
  color: #252527;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
p {
  margin: 0;
  font-size: inherit;
  font-weight: inherit;
}

ol,
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

a {
  color: inherit;
  text-decoration: inherit;
}

b,
strong {
  font-weight: bolder;
}

/* ---------- layout ---------- */

.legal-page {
  margin-left: auto;
  margin-right: auto;
  width: 100%;
  max-width: 640px;
  padding: 1.75rem 1.25rem 3rem;
  padding-bottom: max(3rem, env(safe-area-inset-bottom));
}

@media (min-width: 640px) {
  .legal-page {
    padding-top: 2.5rem;
  }
}

/* ---------- typography ---------- */

.legal-document-header h1 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  color: #252527;
}

.legal-document-meta {
  margin-top: 0.5rem;
  font-size: 13px;
  line-height: 1.6;
  color: #73737a;
}

.legal-document-body {
  margin-top: 22px;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.6;
  color: #525257;
}

.legal-document-body h2 {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: #424246;
}

.legal-document-body h2:not(:first-child) {
  margin-top: 26px;
}

.legal-document-body h2 + p,
.legal-document-body h2 + ol,
.legal-document-body h2 + ul {
  margin-top: 0.5rem;
}

.legal-document-body p + p,
.legal-document-body ol,
.legal-document-body ul,
.legal-document-body ol + p,
.legal-document-body ul + p {
  margin-top: 0.625rem;
}

.legal-document-body ol {
  list-style-type: decimal;
  padding-left: 1.25rem;
}

.legal-document-body ul {
  list-style-type: disc;
  padding-left: 1.25rem;
}

.legal-document-body li + li {
  margin-top: 0.375rem;
}

/* 항목 안에 중첩된 세부 목록은 list item 간격과 같게 붙인다. */
.legal-document-body li > ol,
.legal-document-body li > ul {
  margin-top: 0.375rem;
}

.legal-document-body li::marker {
  color: #73737a;
}

/* 수집 항목 / 이용 목적 같은 항목 라벨 — 본문과 같은 크기, heading 색으로만
   구분한다. */
.legal-document-body li strong {
  font-weight: 600;
  color: #424246;
}

.legal-document-body a {
  color: #252527;
  text-decoration-line: underline;
  text-underline-offset: 2px;
}

/* "수집·이용"처럼 가운뎃점(U+00B7)으로 이어진 어절은 한 줄에 둔다.
   word-break: keep-all이 있어도 브라우저가 가운뎃점 앞뒤를 줄바꿈 기회로
   보기 때문에 HTML에서 해당 어절만 <span class="nowrap">으로 감싼다. */
.nowrap {
  white-space: nowrap;
}

/* ---------- table ---------- */

/* 위탁·국외 이전 고지처럼 칸이 많은 표는 폰 화면을 넘는다.
   표만 가로로 밀어 보게 감싸고 본문은 세로로만 흐르게 둔다. */
.legal-table {
  margin-top: 0.625rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.legal-table table {
  border-collapse: collapse;
  min-width: 1080px;
  font-size: 13px;
  line-height: 1.6;
}

.legal-table th,
.legal-table td {
  border: 1px solid #e5e7eb;
  padding: 0.5rem 0.625rem;
  text-align: left;
  vertical-align: top;
  /* html 의 overflow-wrap: anywhere 가 표에서는 칸을 글자 단위로 쪼갠다.
     "미 국"처럼 끊기지 않도록 표 안에서는 어절 단위로만 줄바꿈한다. */
  overflow-wrap: normal;
  word-break: keep-all;
}

/* 머리글이 접히면 그 열 전체가 좁아진다. 한 줄로 둬서 최소 너비를 잡는다. */
.legal-table th {
  font-weight: 600;
  color: #424246;
  white-space: nowrap;
}

/* 주소는 어절이 길어 칸을 넘는다. 링크에만 글자 단위 줄바꿈을 허용한다. */
.legal-table a {
  overflow-wrap: anywhere;
}