/* ============================================================================
   /legal/ ─ 法的情報ページ
   トークン・ヘッダー・フッターは /css/style.css をそのまま使い、
   ここには法定文書の組みに必要な分だけを足す。
   トップページの CSP は style-src 'self' なので style 属性は使えない。
   インデントなどは必ずクラスで当てる。
   ========================================================================== */

/* /css/style.css の html { scroll-behavior: smooth } を打ち消す。
   このページは1万数千pxあり、smooth のままだと #tokushoho のような
   遠いアンカーへの初期ジャンプが途中で捨てられて先頭に留まる（実測で再現）。
   別ホストのフッターから直接飛んでくる導線なので、確実に着くことを優先する。 */
html { scroll-behavior: auto; }

.legal-main { padding: 34px 0 64px; }

.legal-h1 {
  font-family: var(--font-display);
  font-size: clamp(26px, 5.2vw, 38px);
  line-height: 1.35;
  letter-spacing: 0.04em;
}

.legal-lead {
  margin: 14px 0 0;
  max-width: 62ch;
  font-size: 13.5px;
  color: var(--ink-2);
}

/* ---------- 目次 ---------- */

.legal-toc {
  margin: 28px 0 0;
  padding: 18px 22px;
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.legal-toc ol {
  margin: 0;
  padding-inline-start: 1.4em;
  font-family: var(--font-display);
  font-size: 15px;
  letter-spacing: 0.03em;
}
.legal-toc li + li { margin-top: 4px; }
.legal-toc a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* ---------- セクション ---------- */

/* ヘッダーが position: sticky で min-height 76px。
   アンカーで飛んだときに見出しが隠れないよう、その分を逃がす。 */
.legal-section {
  scroll-margin-top: 92px;
  margin-top: 56px;
  padding-top: 30px;
  border-top: 1px solid var(--line);
}

.legal-h2 {
  font-family: var(--font-display);
  font-size: clamp(20px, 3.6vw, 26px);
  line-height: 1.45;
  letter-spacing: 0.04em;
}

/* 「上記共通運営者情報を参照」の類。本文と混ざらないよう錆色の罫で囲む */
.legal-note {
  margin: 14px 0 0;
  padding: 12px 16px;
  max-width: 68ch;
  background: var(--accent-dim);
  border-inline-start: 2px solid var(--accent);
  font-size: 13px;
  line-height: 1.8;
}
.legal-note a { color: var(--accent); }

/* どのサービスの規約なのかを必ず明示する（価格・通貨・返金条件が
   サービスごとに違うため、取り違えると実害が出る） */
.legal-service {
  margin: 30px 0 0;
  font-family: var(--font-display);
  font-size: 17px;
  letter-spacing: 0.04em;
  color: var(--leaf);
}
.legal-host {
  display: inline-block;
  margin-inline-start: 8px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
}

/* ---------- 本文（各サービスの既存ファイルから移した部分） ---------- */

.legal-body { margin-top: 8px; }

.legal-body .card {
  margin-top: 16px;
  padding: 18px 20px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 3px;
}
.legal-body .card.mt8 { margin-top: 16px; }

.legal-body h3 {
  font-family: var(--font-display);
  font-size: 15.5px;
  line-height: 1.6;
  letter-spacing: 0.03em;
}
.legal-body h4 {
  font-family: var(--font-display);
  font-size: 14px;
  letter-spacing: 0.03em;
  color: var(--ink-2);
}

.legal-body p, .legal-body li { font-size: 13.5px; line-height: 1.9; }
.legal-body .small { color: var(--ink-2); }
.legal-body p { margin: 8px 0 0; }
.legal-body h3 + p, .legal-body h3 + ol, .legal-body h3 + ul { margin-top: 10px; }
.legal-body .mt8 { margin-top: 8px; }
.legal-body .mt16 { margin-top: 16px; }

/* 元ファイルの style="margin:8px 0 0 20px;" の置き換え。
   padding にしているのはマーカーが枠外に出ないようにするため。 */
.legal-body .ind {
  margin: 8px 0 0;
  padding-inline-start: 20px;
}
.legal-body li + li { margin-top: 3px; }
.legal-body a { color: var(--accent); overflow-wrap: anywhere; }

/* 文書そのものの正式名称。市場ごとに呼び名が違う（特定商取引法に基づく表記 /
   전자상거래법에 따른 판매자 정보 표시 / 经营者信息公示 …）ので必ず出す。 */
.legal-doctitle {
  margin: 6px 0 0;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  color: var(--muted);
}

/* ---------- 言語切替 ---------- */

.legal-lang {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 4px 12px;
  max-width: 60%;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  line-height: 1.6;
}
.legal-lang a { color: var(--accent); text-underline-offset: 3px; }
.legal-lang [aria-current] { color: var(--muted); }

.site-footer .footer-note a { color: var(--accent); }

/* ---------- 小さい画面 ---------- */

@media (max-width: 640px) {
  .legal-main { padding: 24px 0 48px; }
  .legal-toc { padding: 14px 16px; }
  .legal-section { margin-top: 40px; padding-top: 24px; }
  .legal-body .card { padding: 15px 16px; }
  /* 端末が狭いと本文が窮屈になるので、左右の余白を詰める */
  .legal-page .wrap { padding-inline: 18px; }
}