/* =========================================================
   마유 Mayu · 법적 고지 페이지 (서비스 이용약관 / 개인정보 처리방침)
   style.css 다음에 로드 · 디자인 토큰은 style.css :root 사용
   따뜻한 종이 위 · 조용하고 읽기 좋은 단일 컬럼
   ========================================================= */

/* body 배경은 칠하지 않는다: html이 종이색을 칠하고 body::before가 그레인을
   z-index:-1로 깐다. body를 칠하면 그레인이 가려짐(style.css 주석 참조). */

/* ---------- 읽기 컬럼 ---------- */
.legal-wrap{
  width:100%;
  max-width:760px;
  margin-inline:auto;
  padding-inline:24px;
}

/* ---------- 헤더: 워드마크(자연색) → 홈 ---------- */
.legal-header{
  padding:22px 0 18px;
  border-bottom:1px solid var(--line);
}
.legal-logo{display:inline-flex;align-items:center}
/* 종이 위 자연색 로고: 푸터의 brightness(0) invert(1) 반전 필터를 쓰지 않는다 */
.legal-logo img{height:34px;width:auto}

/* ---------- 본문 ---------- */
.legal-main{padding:44px 0 64px}

.legal-title{
  font-size:33px;
  font-weight:800;
  line-height:1.24;
  letter-spacing:-.02em;
  color:var(--ink);
  margin:0 0 6px;
}

.legal-meta{
  font-size:14px;
  color:var(--ink-soft);
  margin:0 0 26px;
}
/* §8은 시행일 라인이 없어 콜아웃이 곧바로 옴 → 제목과의 간격 확보 */
.legal-title + .legal-callout{margin-top:22px}

/* ---------- 한눈에 보기 콜아웃 카드 ---------- */
.legal-callout{
  background:var(--cream);
  border:1px solid var(--line);
  border-left:4px solid var(--sage);
  border-radius:14px;
  padding:16px 20px;
  margin:0 0 38px;
  font-size:14.5px;
  line-height:1.78;
  color:var(--ink-soft);
}
.legal-callout strong{color:var(--ink);font-weight:700}

/* ---------- 조문 / 소절 제목 ---------- */
.legal-h2{
  font-size:19px;
  font-weight:800;
  line-height:1.42;
  letter-spacing:-.01em;
  color:var(--ink);
  margin:36px 0 10px;
}
.legal-doc > .legal-h2:first-of-type{margin-top:10px}

/* ---------- 본문 단락 ---------- */
.legal-doc p{
  font-size:15.5px;
  line-height:1.82;
  color:var(--ink);
  margin:0 0 14px;
}
html[lang="ko"] .legal-doc p,
html[lang="ko"] .legal-callout,
html[lang="ko"] .legal-table td,
html[lang="ko"] .legal-table th{word-break:keep-all}

/* ---------- 표 (처리방침) ---------- */
.legal-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  margin:8px 0 22px;
  border-radius:12px;
}
.legal-table{
  width:100%;
  min-width:460px;
  border-collapse:collapse;
  font-size:14.5px;
  line-height:1.7;
}
.legal-table th,
.legal-table td{
  text-align:left;
  vertical-align:top;
  padding:11px 14px;
  border-bottom:1px solid var(--line);
}
.legal-table thead th{
  background:var(--cream);
  color:var(--ink);
  font-weight:700;
  white-space:nowrap;
  border-bottom:1.5px solid var(--card-edge);
}
.legal-table tbody tr:last-child td{border-bottom:0}
.legal-table tbody td:first-child{
  color:var(--ink);
  font-weight:600;
}

/* ---------- 푸터: 간결·중앙·톤다운(종이 위) ---------- */
.legal-footer{
  border-top:1px solid var(--line);
  padding:28px 0 44px;
  text-align:center;
}
.legal-footer-nav{
  display:flex;flex-wrap:wrap;
  align-items:center;justify-content:center;
  gap:8px;
  font-size:13px;
}
.legal-footer-nav a{
  color:var(--ink-soft);
  font-weight:600;
  transition:color var(--t-mid,180ms) var(--e,ease);
}
.legal-footer-nav a:hover{color:var(--pink)}
.legal-footer-nav span{color:var(--pencil)}
.legal-footer-copy{
  margin:12px 0 0;
  font-size:12px;
  color:var(--pencil);
}

/* ---------- 반응형 ---------- */
@media (max-width:640px){
  .legal-wrap{padding-inline:20px}
  .legal-header{padding:18px 0 14px}
  .legal-logo img{height:30px}
  .legal-main{padding:30px 0 48px}
  .legal-title{font-size:27px}
  .legal-h2{font-size:18px;margin-top:30px}
  .legal-doc p{font-size:15px}
}

/* 참고 번역 고지의 원문 링크(영문 참고본 전용 — 한국어 페이지 콜아웃엔 링크 없음) */
.legal-callout a{color:inherit;font-weight:600;text-decoration:underline;text-underline-offset:2px}
.legal-callout a:hover{color:var(--rose)}