/* ==========================================================================
   be my tree — privacy.css
   /privacy/ 개인정보 처리방침 전용. 페이지 전체가 지상(라이트) 문서 레이아웃
   (docs/improvement-plan-v2.md §1 · §4). 값은 tokens.css 토큰만 사용.
   라이트 토큰(--light-*)은 tokens.css에 없을 때를 대비해 DS 원값을 폴백으로 둔다.
   대비: Ground Brown on #F4F4F4 13.05 · #676767 on #F4F4F4 5.14 · on #FFFFFF 5.66 · Root Green 정사각 마커는 비텍스트 장식
   ========================================================================== */

/* ── 라이트 면: 공통 컴포넌트가 쓰는 시맨틱 별칭을 이 구역에서만 재정의 ───── */
.privacy {
  --text: var(--light-text, #2D2A20);
  --text-soft: var(--light-text-soft, #676767);
  --text-emphasis: var(--light-text, #2D2A20);
  --focus-ring: var(--light-text, #2D2A20);
  --privacy-panel: var(--light-panel, #FFFFFF);
  --privacy-rule: var(--border-guide);          /* #C1C1C1 표·조문 구분선 */
  --privacy-rule-strong: var(--light-text, #2D2A20);
  --privacy-sticky-top: calc(var(--web-btn-h) + var(--web-stack-md));

  background: var(--light-bg, #F4F4F4);
  color: var(--text);
  color-scheme: light;
}

.privacy__back {
  margin-bottom: var(--web-stack-lg);
  font-size: var(--web-fs-small);
  color: var(--text-soft);
}
.privacy__back:hover { color: var(--text); }

/* ── 머리 ─────────────────────────────────────────────── */
.privacy__head {
  display: grid;
  gap: var(--web-stack-sm);
  max-width: var(--web-measure);
}
/* 라이트 면 eyebrow: Ground Brown 글씨 + Root Green 정사각 마커(장식) */
.privacy__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--web-bullet-gap);
  margin-bottom: 0;
}
.privacy__eyebrow::before {
  content: "";
  flex-shrink: 0;
  width: 0.5em;
  height: 0.5em;
  background: var(--bmt-root-green);
}
.privacy__title { margin-bottom: calc(var(--web-stack-sm) * .5); }

.privacy__meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--web-stack-sm) var(--web-grid-gap);
  margin-top: var(--web-stack-sm);
  padding-top: var(--web-stack-sm);
  border-top: 1px solid var(--privacy-rule-strong);
}
.privacy__meta dt {
  font-size: var(--web-fs-small);
  color: var(--text-soft);
}
.privacy__meta dd {
  margin: 0;
  font-weight: var(--fw-semibold);
  overflow-wrap: anywhere;
}

/* ── 한눈에 보기 ───────────────────────────────────────── */
.privacy__summary {
  margin-top: var(--web-stack-lg);
  padding: var(--web-card-p);
  background: var(--privacy-panel);
  box-shadow: var(--stroke-hairline);
}
.privacy__summary-title {
  margin-bottom: var(--web-stack-sm);
  font-size: var(--web-fs-h3);
  letter-spacing: var(--ls-tight);
}
.privacy__summary-list { display: grid; }
.privacy__summary-row {
  display: grid;
  gap: calc(var(--web-stack-sm) * .25);
  padding-block: calc(var(--web-stack-sm) * .75);
  border-top: 1px solid var(--border-hairline);
}
.privacy__summary-row dt { font-weight: var(--fw-bold); }
.privacy__summary-row dd { margin: 0; color: var(--text-soft); }
.privacy__summary-row dd a { color: var(--text); }

/* ── 목차 + 본문 ───────────────────────────────────────── */
.privacy__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--web-stack-lg);
  margin-top: var(--web-stack-lg);
}

.privacy__toc-title {
  padding-bottom: calc(var(--web-stack-sm) * .5);
  border-bottom: 1px solid var(--privacy-rule-strong);
  font-size: var(--web-fs-small);
  letter-spacing: var(--ls-snug);
}
.privacy__toc-list {
  display: grid;
  font-size: var(--web-fs-small);
}
.privacy__toc-list a {
  display: flex;
  padding-block: 0.55em;
  border-bottom: 1px solid var(--border-hairline);
  text-decoration-line: none;
  transition: background-color var(--dur-base) var(--ease-standard);
}
.privacy__toc-list a:hover { background: var(--hover-tint); }
/* 조 번호 + 제목을 한 줄로 묶어 hover 밑줄을 끊김 없이 (flex gap에서 text-decoration이 끊기는 문제) */
.privacy__toc-line {
  display: inline-flex;
  gap: 0.5em;
  padding-bottom: 0.1em;
  background: linear-gradient(var(--bmt-root-green), var(--bmt-root-green)) left bottom / 0 1px no-repeat;
}
.privacy__toc-list a:hover .privacy__toc-line { background-size: 100% 1px; }
.privacy__toc-num {
  flex-shrink: 0;
  min-width: 3.4em;
  color: var(--text-soft);
  font-variant-numeric: tabular-nums;
}

.privacy__body { max-width: var(--web-measure); min-width: 0; }

.privacy__article {
  padding-block: var(--web-stack-md);
  border-top: 1px solid var(--privacy-rule);
  scroll-margin-top: var(--privacy-sticky-top);
}
.privacy__article:first-child { padding-top: 0; border-top: 0; }
.privacy__article > * + * { margin-top: var(--web-stack-sm); }

.privacy__article-title {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  column-gap: 0.6em;
  font-size: var(--web-fs-h3);
  letter-spacing: var(--ls-tight);
}
.privacy__article-num {
  color: var(--text-soft);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.privacy__article strong { font-weight: var(--fw-bold); }

/* 항 번호 — 조문 인용(제3조 제3항)과 일치하는 숫자. 장식 마커 아님 */
.privacy__clauses {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: calc(var(--web-stack-sm) * .75);
  counter-reset: clause;
}
.privacy__clauses > li {
  position: relative;
  min-width: 0;
  padding-left: 1.8em;
  counter-increment: clause;
}
.privacy__clauses > li::before {
  content: counter(clause) ".";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text-soft);
  font-weight: var(--fw-semibold);
  font-variant-numeric: tabular-nums;
}

.privacy__bullets { gap: calc(var(--web-stack-sm) * .5); }
.privacy__bullets > li { line-height: var(--web-lh-body); }
.privacy__bullets > li::before { margin-top: 0.72em; }

/* ── 연락처 정의 목록 ─────────────────────────────────── */
.privacy__contact {
  display: grid;
  margin-top: var(--web-stack-sm);
  border-top: 1px solid var(--privacy-rule);
}
.privacy__contact-row {
  display: grid;
  gap: calc(var(--web-stack-sm) * .25);
  padding-block: calc(var(--web-stack-sm) * .6);
  border-bottom: 1px solid var(--privacy-rule);
}
.privacy__contact-row dt { font-weight: var(--fw-bold); }
.privacy__contact-row dd { margin: 0; overflow-wrap: anywhere; }
.privacy__contact address { font-style: normal; }

/* ── 표: 좁은 폭에서는 가로 스크롤 ───────────────────── */
.privacy__table-wrap {
  margin-top: var(--web-stack-sm);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  background: var(--privacy-panel);
  box-shadow: var(--stroke-hairline);
}
.privacy__table {
  width: 100%;
  min-width: 34em;
  border-collapse: collapse;
  font-size: var(--web-fs-small);
  line-height: var(--web-lh-body);
  text-align: left;
  vertical-align: top;
}
.privacy__table--wide { min-width: 48em; }
.privacy__table th,
.privacy__table td {
  padding: 0.8em 1em;
  border-bottom: 1px solid var(--border-hairline);
  vertical-align: top;
}
.privacy__table thead th {
  font-weight: var(--fw-bold);
  border-bottom: 1px solid var(--privacy-rule-strong);
  white-space: nowrap;
}
.privacy__table tbody th { font-weight: var(--fw-semibold); }
.privacy__table tbody tr:last-child > * { border-bottom: 0; }

@media (min-width: 768px) {
  .privacy__meta { grid-template-columns: repeat(4, auto); justify-content: start; }
  .privacy__summary-row {
    grid-template-columns: minmax(7em, 1fr) minmax(0, 4fr);
    column-gap: var(--web-grid-gap);
  }
  .privacy__toc-list { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--web-grid-gap); }
  .privacy__contact-row {
    grid-template-columns: minmax(10em, 1fr) minmax(0, 2fr);
    column-gap: var(--web-grid-gap);
  }
}

@media (min-width: 1024px) {
  .privacy__layout {
    grid-template-columns: minmax(15em, 1fr) minmax(0, 3fr);
    align-items: start;
  }
  .privacy__toc {
    position: sticky;
    top: var(--privacy-sticky-top);
    max-height: calc(100vh - var(--privacy-sticky-top) - var(--web-stack-sm));
    overflow-y: auto;
  }
  .privacy__toc-list { grid-template-columns: minmax(0, 1fr); }
  .privacy__toc-list a { padding-block: 0.45em; }
}

/* 이전 버전 보관 페이지(/privacy/1.0/) 안내 — 괘선 박스, 그림자 없음 */
.privacy__archive-note {
  margin-bottom: var(--web-stack-md);
  padding: var(--web-stack-sm);
  box-shadow: var(--stroke-hairline);
  background: var(--light-panel);
  font-size: var(--web-fs-small);
  line-height: var(--web-lh-body);
  color: var(--text);
}