/*
 * 公開 Web サイト（LP / 法務 / サポート）の共通スタイル。
 *
 * 色は**アプリの Flutter テーマが正本**（CLAUDE.md §14）。ここで値を発明せず、
 * mobile/recipitz/lib/core/theme/app_colors.dart の実値をそのまま写す。
 *   --bg              = AppColors.background     (0xFFFFFDF5)
 *   --surface         = AppColors.surface        (0xFFFFFFFF)
 *   --surface-variant = AppColors.surfaceVariant (0xFFF4EFE6)
 *   --text            = AppColors.textMain       (0xFF333333)
 *   --muted           = AppColors.textMuted      (0xFF888888)
 *   --border          = AppColors.border         (0xFFEAE5DA)
 *   --accent          = AppColors.primary        (0xFFC5815A)
 *
 * 書体はシステムフォントのまま。アプリの正本は Zen Maru Gothic / Outfit だが、Web で
 * 使うには Google Fonts への外部リクエストが必要になる。法務・プライバシーポリシーの
 * ページから第三者へリクエストが飛ぶのは別途の判断が要るため、色だけ揃える（#450）。
 *
 * /assets/ は CloudFront Function が全ホスト素通しにする共有パスなので、どのホストからも
 * `/assets/site.css` で引ける。ページ側はここをルート相対で参照してよい唯一の例外。
 */

:root {
  --bg: #FFFDF5;
  --surface: #FFFFFF;
  --surface-variant: #F4EFE6;
  --text: #333333;
  --muted: #888888;
  --border: #EAE5DA;
  --accent: #C5815A;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Noto Sans JP", sans-serif;
  line-height: 1.8;
  -webkit-text-size-adjust: 100%;
}

.wrap { max-width: 720px; margin: 0 auto; padding: 32px 20px 64px; }

a { color: var(--accent); }

h1 { font-size: 1.5rem; margin: 0 0 8px; }
h2 { font-size: 1.15rem; margin: 32px 0 8px; padding-top: 8px; border-top: 1px solid var(--border); }
h3 { font-size: 1rem; margin: 20px 0 6px; }

p, li { font-size: 1rem; }
ol, ul { padding-left: 1.4em; }
li { margin: 6px 0; }

/* 強調は太字だけで表す。正本の AppColors に「強調用の文字色」が無いため値を発明しない。 */
strong { font-weight: 600; }

p.lead { color: var(--muted); margin: 0 0 28px; }
p.meta, .meta { color: var(--muted); font-size: .85rem; margin: 0 0 8px; }

a.back { color: var(--accent); text-decoration: none; font-size: .9rem; }

footer {
  color: var(--muted); font-size: .8rem; margin-top: 44px;
  border-top: 1px solid var(--border); padding-top: 16px;
}

/* --- 表（プライバシーポリシーの一覧・特商法の項目） --- */

table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: .92rem; }
th, td { border: 1px solid var(--border); padding: 8px 10px; text-align: left; vertical-align: top; }
th { background: var(--surface-variant); }

/* 項目名と内容の2列表（特商法）。見出し列の幅を固定して読みやすくする。 */
table.kv { font-size: .95rem; margin: 16px 0; }
table.kv th, table.kv td { padding: 10px 12px; }
table.kv th { width: 32%; font-weight: 600; }

/* --- 囲み（補足・問い合わせ） --- */

.note, .contact {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 14px 16px;
}
.note { color: var(--muted); font-size: .9rem; }
.contact { border-radius: 14px; padding: 18px 20px; margin: 16px 0; }

/* --- よくある質問（サポート） --- */

dl.faq dt { font-weight: 600; margin-top: 20px; }
dl.faq dd { margin: 6px 0 0; }

/* --- 目次のカード（法務トップ） --- */

ul.menu { list-style: none; padding: 0; margin: 0; }
ul.menu li { margin: 0 0 12px; }
a.card {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 18px 20px; text-decoration: none; color: var(--text);
}
a.card:hover { border-color: var(--accent); }
a.card .t { font-weight: 600; }
a.card .d { color: var(--muted); font-size: .9rem; margin-top: 4px; }
p.support { color: var(--muted); font-size: .9rem; margin: 24px 0 0; }

/* --- 中央そろえのページ（LP / 404） --- */

.wrap.center { max-width: 560px; padding-top: 72px; text-align: center; }
.wrap.center h1 { font-size: 1.75rem; margin-bottom: 12px; letter-spacing: .02em; }
.wrap.center p.lead { margin: 0 auto 36px; max-width: 30em; text-align: left; }
.wrap.center footer { border-top: none; }

img.icon { width: 96px; height: 96px; border-radius: 22px; display: block; margin: 0 auto 20px; }
img.icon.small { width: 72px; height: 72px; border-radius: 18px; opacity: .85; }

ul.links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
ul.links li { margin: 0; }
ul.links a {
  display: block; background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 18px; text-decoration: none; color: var(--text); font-size: .95rem;
}
ul.links a:hover { border-color: var(--accent); color: var(--accent); }