/* ============================================================
 * paan.co.jp — Legal pages (privacy / terms / cookie)
 * v33 (2026-05-12): MENU-PAANからのコピペを paan.co.jp 仕様にリブランド
 *   - Royal Navy #1A2E5C 基調 (style.css の --paan-* トークンを継承)
 *   - 白背景 + 青系罫線 (旧 MENU-PAAN のクリーム色 #FAF6F0 → 純白に置換)
 *   - 本文書体: Noto Serif JP (コーポレートサイト本文と統一)
 *   - 翻訳予告バナー: 上品な薄青背景 + Royal Navy 罫線 (旧 黄色警告調を廃止)
 *   - 翻訳案内バナーは i18n.js が ja 以外で表示制御する (= v33 で連携実装)
 * ============================================================ */

/* style.css の :root トークンをそのまま継承して使う前提だが、
   legal.css が単独 import される場面でも破綻しないよう、 ローカル変数で受ける */
:root {
  --legal-bg:      #FFFFFF;                 /* 白基調 (= style.css --paan-bg と同義) */
  --legal-surface: var(--paan-card, #FAFBFD); /* カード内側、 微寒色 */
  --legal-text:    var(--paan-ink, #1A2040);
  --legal-muted:   var(--paan-ink-mid, #5A6378);
  --legal-border:  var(--paan-line, #E4E8F0);
  --legal-accent:  var(--paan-primary, #1A2E5C); /* Royal Navy */
  --legal-accent-deep: var(--paan-primary-deep, #0E1C3D);
}

.legal-section {
  padding: 32px 16px 80px;
}

.legal-inner {
  max-width: 760px;
  margin: 0 auto;
  background: #FFFFFF;
  padding: 40px 36px;
  border: 1px solid var(--legal-border);
  border-radius: 12px;
  box-shadow: 0 1px 0 rgba(26, 32, 64, 0.02);
}

.legal-head {
  margin-bottom: 32px;
  padding-bottom: 22px;
  border-bottom: 1px solid var(--legal-border);
}

.legal-head .eyebrow {
  font-family: 'Marcellus', serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--legal-accent);
  margin-bottom: 10px;
  opacity: 0.85;
}

.legal-head h1,
.legal-head .section-title {
  font-family: 'Noto Serif JP', serif;
  font-size: 26px;
  font-weight: 500;
  margin: 0 0 8px;
  color: var(--legal-accent);
  letter-spacing: 0.04em;
  line-height: 1.5;
}

.legal-head .legal-meta {
  font-size: 12.5px;
  color: var(--legal-muted);
  letter-spacing: 0.02em;
}

/* 本文 (v35.4: .legal-content ツインは未使用のため削除、 .legal-prose のみ) */
.legal-prose {
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', 'Yu Mincho', serif;
  font-size: 15px;
  line-height: 1.85;
  color: var(--legal-text);
}

.legal-prose h2 {
  font-family: 'Noto Serif JP', serif;
  font-size: 17px;
  font-weight: 600;
  margin: 32px 0 12px;
  color: var(--legal-accent);
  letter-spacing: 0.03em;
}

.legal-prose p {
  margin: 0 0 14px;
}

.legal-prose .legal-intro {
  font-size: 15px;
  color: var(--legal-text);
  margin-bottom: 24px;
}

.legal-prose .legal-footer {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--legal-border);
  font-size: 13.5px;
  color: var(--legal-muted);
  letter-spacing: 0.02em;
}

.legal-prose ul,
.legal-prose ol {
  margin: 0 0 16px;
  padding-left: 24px;
}

.legal-prose li {
  margin-bottom: 6px;
}

.legal-prose a {
  color: var(--legal-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: opacity 0.2s ease-out, color 0.2s ease-out;
}

.legal-prose a:hover {
  color: var(--legal-accent-deep);
  opacity: 0.85;
}

@media (max-width: 720px) { /* v35.4: 600px → 720px (サイト標準に統一) */
  .legal-section {
    padding: 24px 12px 64px;
  }
  .legal-inner {
    padding: 28px 22px;
    border-radius: 10px;
  }
  .legal-head h1,
  .legal-head .section-title { font-size: 22px; }
  .legal-prose h2 { font-size: 16px; }
  .legal-prose { font-size: 14.5px; }
}

/* ============================================================
   翻訳予告バナー (= ja 以外のロケールで表示)
   v32: i18n.js の applyToDOM 内で locale が ja 以外なら .is-visible 付与
   - 旧 黄色警告調を廃止、 上品な薄青背景 + Royal Navy アクセント
============================================================ */
.legal-translation-notice {
  display: none; /* デフォルト非表示、 JS で .is-visible 付与時のみ表示 */
  margin: 0 0 28px;
  padding: 16px 20px;
  background: #F4F7FC;                          /* Royal Navy 系の極淡背景 */
  border-left: 3px solid var(--legal-accent);   /* #1A2E5C アクセント */
  border-radius: 4px;
  font-family: 'Noto Sans JP', -apple-system, sans-serif;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--legal-text);
}

.legal-translation-notice.is-visible {
  display: block;
}

.legal-translation-notice strong {
  display: block;
  margin-bottom: 4px;
  color: var(--legal-accent);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.legal-translation-notice a {
  color: var(--legal-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.legal-translation-notice a:hover {
  color: var(--legal-accent-deep);
}