/* ===== デザイントークン（単一の正本） =====
   アプリ（src/styles/app.css が @import）と公開ページ（scripts/build-public-pages.ts が
   公開ページ用 CSS の先頭に連結）の両方がこのファイルを読む。値はここだけで変える。 */
:root {
  --color-bg: #FFF4D6;
  --color-brand-yellow: #FFC42E;
  --color-coral: #FF5B7A;
  --color-coral-dark: #D94462;
  --color-sky-blue: #4FC3E8;
  --color-white: #FFFFFF;
  --color-text: #4A3528;
  --color-text-muted: #9E8B7E;
  --color-green: #5BC47A;
  --color-muted-gray: #B0A89E;
  --color-error: #F0563F;
  --color-card-border: rgba(74, 53, 40, 0.12);
  /* 見守りモード専用 */
  --color-watch-bg: #1A1410;
  --color-watch-bg-alpha42: rgba(26, 20, 16, 0.42);
  --color-watch-bg-alpha50: rgba(26, 20, 16, 0.50);
  --color-watch-bg-alpha55: rgba(26, 20, 16, 0.55);
  --color-watch-bg-alpha74: rgba(26, 20, 16, 0.74);
  --color-watch-rec: #EF5350;

  --font-family: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Rounded Mplus 1c', sans-serif;
  --radius-card: 20px;
  --radius-pill: 999px;
  --radius-sm: 12px;

  /* 段差影（ぷっくりボタン用） */
  --shadow-toy-btn: 0 4px 0 var(--color-coral-dark), 0 6px 12px rgba(0,0,0,.12);
  --shadow-toy-btn-press: 0 1px 0 var(--color-coral-dark), 0 2px 4px rgba(0,0,0,.12);
  --shadow-card: 0 2px 8px rgba(0,0,0,.08);
  --shadow-header: 0 4px 0 rgba(0,0,0,.08);
}


/* ===== 公開ページ（/about・/guide・/dictionary 配下）=====
   ビルドで src/styles/tokens.css の後ろに連結して配る。色・角丸・影・書体はトークンの変数だけを使い、値を書き写さない。
   設計書 spec-20261006-voice-dictionary.md 5.3。
   禁止: 絵文字、左辺・上辺の色帯、グラデーションの見出し帯、装飾アイコン。
   幅の上限は width: min(100%, X)、メディアクエリは範囲構文で書く。 */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-family);
  font-weight: 500;
  font-size: 16px;
  line-height: 1.8;
  overflow-wrap: anywhere;
}
a { color: var(--color-coral-dark); text-underline-offset: 3px; }
a:hover { color: var(--color-coral); }

.pp-wrap { width: min(100%, 720px); margin: 0 auto; padding: 0 16px; }

/* ---- ヘッダー（アプリと同じ黄色の帯） ---- */
.pp-header {
  background: var(--color-brand-yellow);
  border-radius: 0 0 24px 24px;
  box-shadow: var(--shadow-header);
}
.pp-header-inner {
  width: min(100%, 720px); margin: 0 auto; padding: 6px 16px;
  display: flex; align-items: center;
}
.pp-logo {
  display: inline-flex; align-items: center; min-height: 44px;
  font-size: 18px; font-weight: 700; color: var(--color-text); text-decoration: none;
}
.pp-logo:hover { color: var(--color-text); }

/* ---- パンくず ---- */
.pp-breadcrumb ol {
  list-style: none; display: flex; flex-wrap: wrap; align-items: center;
  padding: 12px 0 0; font-size: 14px; line-height: 1.6; color: var(--color-text-muted);
}
.pp-breadcrumb li { display: inline-flex; align-items: center; }
.pp-breadcrumb li + li::before { content: "＞"; margin: 0 6px; }
.pp-breadcrumb a {
  display: inline-flex; align-items: center; min-height: 32px;
  color: var(--color-text-muted);
}

/* ---- h1・最終更新日・リード ---- */
.pp-intro { padding: 12px 0 4px; }
.pp-intro h1 { font-size: 26px; line-height: 1.45; font-weight: 700; }
.pp-updated { margin: 4px 0 14px; font-size: 13px; color: var(--color-text-muted); }
.pp-lead { font-size: 17px; margin-bottom: 12px; }

/* ---- H2 の節（白いカード。結果画面の「くわしく」と同じ組み方） ---- */
.pp-card {
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 20px 18px;
  margin: 16px 0;
}
.pp-card h2 { font-size: 20px; line-height: 1.5; font-weight: 700; margin-bottom: 12px; }
.pp-card h3 { font-size: 17px; line-height: 1.5; font-weight: 700; margin-bottom: 8px; }
.pp-card p, .pp-card ul, .pp-card ol, .pp-table-wrap, .pp-glance { margin-bottom: 12px; }
.pp-card > :last-child, .pp-sub > :last-child { margin-bottom: 0; }
.pp-card ul, .pp-card ol { padding-left: 1.5em; }
.pp-card li { margin-bottom: 6px; }
.pp-card li > p { margin-bottom: 6px; }
.pp-sub { margin-top: 18px; }

/* 「AIとりリンガルが目安にしている値」は白地の中のクリーム地の内側カードで区別する（色帯は使わない） */
.pp-inner {
  background: var(--color-bg);
  border-radius: var(--radius-sm);
  padding: 16px 14px;
}

.pp-cite { font-size: 0.75em; line-height: 0; }
.pp-cite a { text-decoration: none; padding: 0 1px; }

/* ---- 「ひと目でわかる」表（項目名はピルのラベル） ---- */
.pp-glance { width: 100%; border-collapse: collapse; }
.pp-glance tr { border-bottom: 1px solid var(--color-card-border); }
.pp-glance tr:last-child { border-bottom: none; }
.pp-glance th, .pp-glance td { padding: 10px 0; text-align: left; vertical-align: top; font-size: 16px; }
.pp-glance th { width: 13em; padding-right: 12px; font-weight: 700; }
.pp-pill {
  display: inline-block;
  background: var(--color-brand-yellow);
  border-radius: var(--radius-pill);
  padding: 2px 12px;
  font-size: 14px; line-height: 1.6; font-weight: 700;
}

/* ---- そのほかの表（広い画面は表、狭い画面は行ごとのカード） ---- */
/* 範囲構文の @media を読めない古いブラウザでも、表は枠の中で横に送れるだけでページは横に広がらない */
.pp-table-wrap { overflow-x: auto; }
.pp-table { width: 100%; border-collapse: collapse; }
.pp-table th, .pp-table td {
  border: 1px solid var(--color-card-border);
  padding: 8px 10px; text-align: left; vertical-align: top; font-size: 16px; line-height: 1.7;
}
.pp-table thead th { background: var(--color-bg); font-weight: 700; }
.pp-table tbody th { font-weight: 700; }

/* 読み上げ用に残し、画面からは隠す */
.pp-sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}

@media (width <= 640px) {
  .pp-glance, .pp-glance tbody, .pp-glance tr, .pp-glance th, .pp-glance td { display: block; width: 100%; }
  .pp-glance th { padding: 10px 0 4px; }
  .pp-glance td { padding: 0 0 10px; }

  .pp-table, .pp-table tbody, .pp-table tr, .pp-table th, .pp-table td { display: block; width: 100%; }
  .pp-table thead {
    position: absolute; width: 1px; height: 1px; overflow: hidden;
    clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
  }
  .pp-table tr {
    border: 1px solid var(--color-card-border);
    border-radius: var(--radius-sm);
    padding: 10px 12px;
    margin-bottom: 10px;
  }
  .pp-table tr:last-child { margin-bottom: 0; }
  .pp-table th, .pp-table td { border: none; padding: 2px 0; }
  .pp-table tbody th { padding-bottom: 6px; }
  .pp-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 13px; font-weight: 700; color: var(--color-text-muted);
  }
  .pp-table td:empty { display: none; }
}

/* ---- レーダー図（結果画面と同じ六角形・インライン SVG） ---- */
.pp-radar { margin: 4px 0 14px; text-align: center; }
.pp-radar-title { font-weight: 700; margin-bottom: 4px; }
.pp-radar-svg { display: block; width: min(100%, 280px); height: auto; margin: 0 auto; }
.pp-radar-grid { fill: none; stroke: var(--color-card-border); stroke-width: 0.5; }
.pp-radar-grid--outer { stroke-width: 1; }
.pp-radar-axis { stroke: var(--color-card-border); stroke-width: 0.5; }
.pp-radar-shape { fill: var(--color-brand-yellow); fill-opacity: 0.25; stroke: var(--color-brand-yellow); stroke-width: 2.5; }
.pp-radar-dot { fill: var(--color-brand-yellow); }
.pp-radar-label { font-size: 12px; font-weight: 700; fill: var(--color-text-muted); }
.pp-radar figcaption { font-size: 14px; line-height: 1.7; color: var(--color-text-muted); text-align: left; }

/* ---- 参考文献 ---- */
.pp-ref-list li { margin-bottom: 8px; }
.pp-back { margin: 8px 0 24px; }
.pp-back a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 700; }

/* ---- CTA（アプリの主ボタンと同じ段差影のコーラルボタン） ---- */
.pp-cta {
  background: var(--color-white);
  border: 1px solid var(--color-card-border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: 24px 18px 28px;
  margin: 24px 0;
  text-align: center;
}
.pp-cta-heading { font-size: 20px; line-height: 1.5; font-weight: 700; margin-bottom: 10px; }
.pp-cta p { text-align: left; margin-bottom: 20px; }
.pp-cta-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px;
  padding: 14px 28px;
  border-radius: var(--radius-pill);
  background: var(--color-coral);
  color: var(--color-white);
  font-family: var(--font-family); font-size: 16px; font-weight: 700; line-height: 1.5;
  text-decoration: none;
  box-shadow: var(--shadow-toy-btn);
  transition: transform .1s, box-shadow .1s;
  -webkit-tap-highlight-color: transparent;
}
.pp-cta-btn:hover { color: var(--color-white); }
.pp-cta-btn:active { transform: translateY(3px); box-shadow: var(--shadow-toy-btn-press); }

/* ---- フッター ---- */
.pp-footer { padding: 8px 0 32px; font-size: 14px; color: var(--color-text-muted); }
.pp-footer-links { list-style: none; display: flex; flex-wrap: wrap; gap: 0 16px; }
.pp-footer-links a {
  display: inline-flex; align-items: center; min-height: 44px;
  color: var(--color-text-muted);
}
.pp-copy { margin-top: 8px; }

@media (width >= 720px) {
  .pp-card { padding: 24px 28px; }
  .pp-intro h1 { font-size: 30px; }
}