/*
  에코114 고객 웹 — 개인정보 처리방침 · 이용약관 전용 스타일 (D-4 · 2026-09-25)
  대상: site/privacy/index.html · site/terms/index.html · site/account-deletion/index.html(계정 삭제 안내 — 2026-09-27 W16 · 같은 부품만 쓴다)

  시안이 없는 화면이라 새 모양을 만들지 않고 이미 쓰는 부품을 따른다.
    · 머리(홈으로 아이콘) — my.css 의 .svg-defs · .icon-button · .page-header 간격을 그대로 옮겨 적었다
      (my.css 는 내 요청 화면 전용이라 통째로 불러오지 않는다)
    · 카드 — my.css·landing.css 의 .receipt 와 같은 테두리·바탕·모서리
    · 링크 — site.css 의 .text-button (누르는 곳 48px)
    · 바닥 — site.css 의 .home-footer 그대로

  지키는 것
  - 치수·색은 tokens.css 의 변수만 쓴다. 여기에 숫자나 색을 새로 적지 않는다.
  - 한글은 어절 단위로 줄을 바꾼다(body 의 word-break: keep-all 을 이어받는다). 본문 폭을 좁게 묶지 않는다.
  - 글 속에 작은 링크를 두지 않는다 — 링크는 모두 한 줄을 차지하는 .text-button(높이 48px 이상)이다.
  - 아직 정해지지 않은 값은 .blank(〔…〕 표시)로 눈에 띄게 둔다. 이 표시가 남아 있으면 게시하지 않는다(투두 D-4).
*/

/* ── 1. 머리 — my.css 에서 옮겨 적은 부품 ─────────────────────── */
.svg-defs { position: absolute; width: var(--zero); height: var(--zero); overflow: hidden; }
.page-header { gap: var(--space-2); }
.icon-button { display: flex; align-items: center; justify-content: center; width: var(--touch-min); height: var(--touch-min); flex-shrink: var(--zero); padding: var(--zero); border: none; border-radius: var(--radius-1); background: var(--color-clear); color: var(--color-text-strong); text-decoration: none; }

/* ── 2. 본문 틀 ───────────────────────────────────────────── */
.policy-main { padding-block: var(--space-4) var(--space-7); }
.policy-main h1 { font-size: var(--font-size-title); line-height: var(--line-height-title); }
.policy-lead { margin-top: var(--space-3); }
.policy-meta { margin-top: var(--space-2); }

/* 차례: 한 줄 한 줄이 누르는 곳(48px 이상) */
.policy-toc { margin-top: var(--space-5); padding-block: var(--space-3); border-block: var(--border-width) solid var(--color-border); }
.policy-toc h2 { font-size: var(--font-size-body); line-height: var(--line-height-body); }
.policy-toc a { display: flex; align-items: center; min-height: var(--touch-min); padding-block: var(--space-1); color: var(--color-text-strong); text-decoration: underline; text-underline-offset: var(--space-1); }

/* 절: 윗선으로 나눈다. 차례에서 눌러 왔을 때 제목이 화면 맨 위에 붙지 않게 조금 띄운다. */
.policy-section { margin-top: var(--space-6); padding-top: var(--space-5); border-top: var(--border-width) solid var(--color-border); scroll-margin-top: var(--space-4); }
.policy-section h2 { font-size: var(--font-size-section); line-height: var(--line-height-section); }
.policy-section h3 { margin-top: var(--space-5); font-size: var(--font-size-body); line-height: var(--line-height-body); }
.policy-section > p,
.policy-section > ul,
.policy-section > ol { margin-top: var(--space-3); }
.policy-section > .text-button { margin-top: var(--space-2); }

/* 점 목록(방침) · 번호 조항(약관 ①②…는 글자로 적는다) */
.policy-list { padding-inline-start: var(--space-5); list-style: disc; }
.policy-list li + li { margin-top: var(--space-2); }
.policy-clauses li + li { margin-top: var(--space-3); }

/* ── 3. 카드 — .receipt 와 같은 모양 ───────────────────────── */
.policy-card { margin-top: var(--space-4); padding: var(--space-4); border: var(--border-width) solid var(--color-border); border-radius: var(--radius-1); background: var(--color-surface); box-shadow: var(--shadow-1); }
.policy-card h3 { margin-top: var(--zero); }
.policy-card dt { margin-top: var(--space-3); color: var(--color-text-strong); font-weight: var(--font-weight-medium); }
.policy-card dt:first-child { margin-top: var(--zero); }
.policy-card h3 + dl { margin-top: var(--space-2); }
.policy-card p { margin-top: var(--space-2); }
.policy-card .text-button { margin-top: var(--space-1); }

/* ── 4. 빈칸 표시 〔…〕 — 사장님·대표님·전문가가 채울 자리 ─────── */
/* 글자 색만으로 알리지 않는다 — 〔 〕 괄호와 "확인" 글자가 함께 있다. 줄이 바뀌어도 줄마다 바탕이 이어진다. */
.blank { padding-inline: var(--space-1); border-radius: var(--radius-1); background: var(--color-primary-weak); color: var(--color-primary-strong); font-weight: var(--font-weight-medium); -webkit-box-decoration-break: clone; box-decoration-break: clone; }