/* ============ 法律頁（隱私權 / 個資告知 / Cookie）============ */
.legal { padding-block: clamp(var(--sp-7), 6vw, var(--sp-9)); }
.legal__inner { width: min(92vw, 760px); margin-inline: auto; }

.legal__title {
  font-size: clamp(1.9rem, 1.3rem + 2vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1.2;
  color: var(--c-ink);
  margin-bottom: var(--sp-2);
}
.legal__title .accent { color: var(--c-brand); }
.legal__updated {
  font-size: .88rem;
  color: var(--c-ink-3);
  margin-bottom: var(--sp-7);
}

.legal__body h2 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--c-ink);
  margin: var(--sp-7) 0 var(--sp-3);
  padding-left: var(--sp-3);
  border-left: 3px solid var(--c-brand);
  line-height: 1.4;
}
.legal__body h2:first-child { margin-top: 0; }
.legal__body p {
  font-size: 1rem;
  line-height: 1.9;
  color: var(--c-ink-2);
  margin-bottom: var(--sp-4);
  text-wrap: pretty;
}
.legal__body ul { margin: 0 0 var(--sp-4); padding-left: 1.4em; }
.legal__body li {
  font-size: 1rem;
  line-height: 1.85;
  color: var(--c-ink-2);
  margin-bottom: var(--sp-2);
}
.legal__body li::marker { color: var(--c-brand); }
.legal__body strong { color: var(--c-ink); font-weight: 700; }
.legal__body a { color: var(--c-brand); text-decoration: none; border-bottom: 1px solid transparent; }
.legal__body a:hover { border-bottom-color: currentColor; }

/* 提示條 */
.legal__note {
  display: flex;
  gap: var(--sp-3);
  margin-top: var(--sp-8);
  padding: var(--sp-4) var(--sp-5);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  font-size: .9rem;
  line-height: 1.7;
  color: var(--c-ink-3);
}
.legal__note i { color: var(--c-brand); margin-top: .2em; }

/* 相關頁互連 */
.legal__related {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-top: var(--sp-7);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-line);
}
.legal__related a {
  padding: var(--sp-3) var(--sp-5);
  background: var(--c-bg-alt);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-full);
  font-size: .9rem;
  font-weight: 600;
  color: var(--c-ink);
  text-decoration: none;
  transition: background .2s var(--ease-out), color .2s var(--ease-out);
}
.legal__related a:hover { background: var(--c-brand); border-color: var(--c-brand); color: #fff; }