/* =========================================================================
   ELEMENTA — 법적 고지 문서 (privacy.html)
   본문 읽기에만 쓰는 좁은 스타일. tokens.css · main.css 뒤에 실립니다.
   ========================================================================= */

.legalHead { border-bottom: 1px solid var(--ink-14); }
.legalHead__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-4); flex-wrap: wrap; padding-block: var(--sp-4);
}
.legalHead__brand { display: flex; align-items: baseline; gap: .6rem; text-decoration: none; }
.legalHead__en {
  font-family: var(--font-display); font-weight: 800; letter-spacing: .09em;
  font-size: var(--fs-small); color: var(--ink);
}
.legalHead__ko { font-size: var(--fs-micro); color: var(--ink-64); letter-spacing: .04em; }
.legalHead__tools { display: flex; align-items: center; gap: var(--sp-2); }

.legal { padding: var(--sp-7) 0 var(--sp-8); }
.legal__doc { max-width: min(62ch, var(--maxw)); }

.legal__kicker {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .16em;
  text-transform: uppercase; color: var(--ink-64); margin-bottom: var(--sp-3);
}
.legal__title {
  font-size: var(--fs-h1); line-height: 1.12; letter-spacing: -.01em;
  margin-bottom: var(--sp-3); text-wrap: balance;
}
.legal__lede {
  font-size: var(--fs-lead); line-height: 1.62; color: var(--ink-88);
  margin-bottom: var(--sp-5); text-wrap: pretty;
}

/* 아직 확정되지 않은 사항을 정직하게 알리는 상자 */
.legal__notice {
  border: 1px solid var(--ink-14); border-left: 3px solid var(--accent);
  padding: var(--sp-4); margin-bottom: var(--sp-6);
  background: var(--bg-72, transparent);
}
.legal__notice p { font-size: var(--fs-small); line-height: 1.66; color: var(--ink-88); }
.legal__notice p + p { margin-top: var(--sp-2); }
.legal__noticeTag {
  display: inline-block; font-family: var(--font-mono); font-size: var(--fs-micro);
  letter-spacing: .12em; text-transform: uppercase; color: var(--accent);
  margin-bottom: var(--sp-2);
}

.legal__sec { padding-top: var(--sp-6); }
.legal__sec + .legal__sec { border-top: 1px solid var(--ink-08); }
.legal__num {
  font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-40);
  letter-spacing: .12em; display: block; margin-bottom: .5rem;
}
.legal__h { font-size: var(--fs-h3); line-height: 1.28; margin-bottom: var(--sp-3); text-wrap: balance; }
.legal__sec p { font-size: var(--fs-body); line-height: 1.72; color: var(--ink-88); text-wrap: pretty; }
.legal__sec p + p { margin-top: var(--sp-3); }

.legal__table { width: 100%; border-collapse: collapse; margin-top: var(--sp-3); }
.legal__table th, .legal__table td {
  text-align: left; vertical-align: top; padding: var(--sp-3) var(--sp-3) var(--sp-3) 0;
  border-bottom: 1px solid var(--ink-08); font-size: var(--fs-small); line-height: 1.6;
}
.legal__table th { width: 10rem; color: var(--ink-64); font-weight: 500; }
.legal__table td { color: var(--ink-88); }

.legal__ul { margin-top: var(--sp-3); padding-left: 0; list-style: none; }
.legal__ul li {
  position: relative; padding-left: 1.15rem; font-size: var(--fs-small);
  line-height: 1.72; color: var(--ink-88);
}
.legal__ul li + li { margin-top: var(--sp-2); }
.legal__ul li::before {
  content: ""; position: absolute; left: 0; top: .68em;
  width: 5px; height: 5px; border-radius: 1px; background: var(--accent);
}

.legal__foot {
  margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--ink-14);
  display: flex; gap: var(--sp-4); flex-wrap: wrap; align-items: baseline;
}
.legal__back {
  font-family: var(--font-mono); font-size: var(--fs-micro); letter-spacing: .12em;
  text-transform: uppercase; color: var(--ink); text-decoration: underline;
  text-underline-offset: .3em; text-decoration-color: var(--ink-40);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.legal__back:hover { color: var(--accent); text-decoration-color: var(--accent); }
.legal__stamp { font-family: var(--font-mono); font-size: var(--fs-micro); color: var(--ink-40); letter-spacing: .06em; }

.legal a:not(.legal__back) {
  text-decoration: underline; text-underline-offset: .22em;
  text-decoration-thickness: 1px; text-decoration-color: var(--ink-40);
  transition: color .2s ease, text-decoration-color .2s ease;
}
.legal a:not(.legal__back):hover { color: var(--accent); text-decoration-color: var(--accent); }

@media (max-width: 560px) {
  .legal__table th { width: auto; display: block; padding-bottom: 0; border-bottom: 0; }
  .legal__table td { display: block; padding-top: .35rem; }
  .legal__table tr { display: block; border-bottom: 1px solid var(--ink-08); padding: var(--sp-3) 0; }
  .legal__table th, .legal__table td { border-bottom: 0; }
}