/* legal.css — 이용약관 · 개인정보처리방침 두 장이 함께 쓴다.
 *
 * 로드 순서: tokens.css → base.css → **pages/legal.css**
 * ⚠ 셸이 없다 (로그인 전에도 열려야 한다). `login.css` 와 같은 처지.
 *
 * ★ 옛 서비스는 이 두 장을 **인라인 `<style>` 로** 갖고 있었다
 *   (`legacy/misc_api.py:375` · `:394`). 금지 5 라 파일로 옮겼다.
 * ★ 옛 스타일의 색 리터럴(`#222` · `#444` · `#888` · `#f5c518`)을 안 옮겼다.
 *   전부 토큰이다 — `#f5c518` 은 레몬(`--lemon`) 자리였다.
 *
 * ★ 읽는 화면이라 **글줄 길이와 줄간격이 전부**다. 그 밖에는 아무것도 안 한다.
 */

.legal-body {
  background: var(--bg);
  min-height: 100vh;
  min-height: 100dvh;
}

.legal-wrap {
  max-width: 760px;          /* 옛 스타일의 800px 에서 한 뼘 줄였다 — 한국어는
                                글자가 넓어 760px 쯤이 한 줄에 알맞다 */
  margin: 0 auto;
  padding: 40px 20px 72px;
  color: var(--ink);
  line-height: 1.8;
}

.legal-back { margin-bottom: 24px; }
.legal-back a,
.legal-links a {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--sub-strong);
  text-decoration: none;
}
.legal-back a:hover,
.legal-links a:hover { color: var(--ink); text-decoration: underline; }

.legal-wrap h1 {
  font-size: 26px;
  font-weight: 800;
  letter-spacing: -0.02em;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--lemon);   /* 옛 `#f5c518` 자리 */
}

.legal-wrap h2 {
  margin-top: 34px;
  font-size: 17px;
  font-weight: 700;
}

.legal-wrap p,
.legal-wrap li { margin-top: 10px; font-size: 15px; color: var(--sub-strong); }

.legal-wrap small { font-size: 13px; color: var(--sub); }

.legal-wrap a { color: var(--deep-amber); }


/* ══ 사업자 정보 ═══════════════════════════════════════════════
   ⚠ 빈 값은 서버가 이미 빼고 준다 (`data/company.py::rows()`).
     「주소: —」 같은 빈 자리를 화면에서 만들지 않는다. */
.legal-biz {
  margin-top: 12px;
  display: grid;
  gap: 4px;
  font-size: 14px;
  color: var(--sub);
}
.legal-biz-row { display: flex; gap: 10px; }
/* ⚠ `--off` 를 쓰지 않는다 — 읽으라고 두는 글이다 (landing.css 와 같은 이유) */
.legal-biz dt { min-width: 128px; color: var(--sub); }
.legal-biz dd { color: var(--sub-strong); }

/* ★ 옛 약관의 `style="margin-top:40px"` 자리 (금지 5 라 클래스로 옮겼다) */
.legal-effective { margin-top: 40px; }

.legal-links { margin-top: 40px; }

@media (max-width: 640px) {
  .legal-wrap h1 { font-size: 22px; }
  .legal-biz-row { flex-direction: column; gap: 0; }
  .legal-biz dt { min-width: 0; }
}


/* ══ 환불·해지 정책이 더 쓰는 둘 ═══════════════════════════════
   ★ `/refund` 한 장이 쓴다 (2026-08-21). 약관·방침과 같은 파일을 쓰는
     이유는 셋 다 **읽는 화면**이고 글줄 규칙이 같기 때문이다.

   공용: .num (base.css) */
.legal-formula {
  margin: 12px 0 4px;
  padding: 12px 16px;
  border-radius: 14px;
  background: var(--lemon-soft);
  color: var(--deep-amber);
  font-size: 14.5px;
  font-weight: 700;
}

/* 해지하러 가는 길. ⚠ 정책만 읽고 어디로 갈지 모르면 결국 전화하시게 된다 */
.legal-cta {
  display: inline-block;
  margin-top: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  background: var(--lemon);
  color: var(--ink);            /* 레몬 위는 잉크다 (DESIGN-SYSTEM 11장) */
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
}
.legal-cta:hover { background: var(--amber); }