/* ホーム画面と同じ見た目にするための、共通の上書き（私の聞こえを知る・説明書・場面を練習する・マイ記録・データ管理）
   読みこむ順：style.css → home.css →（ページの中の style）→ このファイル
   画面の見た目だけを変える。印刷の見た目は、各ページの @media print のまま。 */

@media screen {
  /* style.css の色を、アルビーの色に置きかえる（ページの中で var(--primary) などを使っている所もまとめて変わる） */
  body.theme {
    --primary: #1D7F68;
    --primary-dark: #16654F;
    --primary-light: #E7F7EF;
    --secondary: #B0560F;
    --secondary-light: #FFEBD9;
    --bg: var(--paper);
    --text: var(--navy);
    --text-muted: var(--ink-soft);
    --border: #C3CCD8;
    --radius: 14px;
    --shadow: none;
    --shadow-md: none;
    background-color: var(--paper);
  }

  /* ---------- ページの説明（アルビーの吹き出し・小さめ） ---------- */
  .page-hero { grid-template-columns: 170px 1fr; align-items: center; margin-top: 16px; max-width: 860px; }
  .page-hero .alby::before { bottom: 2px; }
  .page-hero .bubble { margin-bottom: 0; padding: 24px 30px; }
  .page-hero .bubble h1 { font-size: 32px; margin-bottom: 8px; }
  .page-hero .lead { font-size: 18px; }
  .page-hero .bubble p + p { margin-top: 8px; font-size: 15px; color: var(--ink-soft); }

  body.theme .container { max-width: 860px; padding: 28px 24px 56px; }

  /* ---------- カード（ワッペン風） ---------- */
  body.theme .card {
    position: relative; background: #fff; border: 3px solid var(--navy); border-radius: 22px;
    box-shadow: 6px 6px 0 var(--mint); padding: 22px 24px; margin-bottom: 26px;
  }
  body.theme .card::after {
    content: ""; position: absolute; inset: 7px; border: 2px dashed var(--mint-deep);
    border-radius: 15px; opacity: .35; pointer-events: none;
  }
  body.theme .card-title, body.theme .section-title {
    font-family: var(--display); font-weight: 900; font-size: 22px; color: var(--navy); font-feature-settings: "palt";
  }

  /* ---------- ボタン ---------- */
  body.theme .btn { border-radius: 999px; font-weight: 700; font-family: var(--body); }
  body.theme .btn-primary { background: var(--navy); color: #fff; }
  body.theme .btn-primary:hover:not(:disabled) { background: #2C3B72; }
  body.theme .btn-secondary { background: var(--orange); color: var(--navy); }
  body.theme .btn-secondary:hover:not(:disabled) { background: #E57B1E; }
  body.theme .btn-outline { background: #fff; color: var(--navy); border: 2px solid var(--navy); }
  body.theme .btn-outline:hover:not(:disabled) { background: #E7F7EF; color: var(--navy); }
  body.theme .btn-ghost { background: #fff; color: var(--navy); border: 2px solid #8A93AB; }
  body.theme .btn-ghost:hover:not(:disabled) { border-color: var(--navy); color: var(--navy); }
  body.theme .btn:focus-visible, body.theme .back-btn:focus-visible { outline: 4px solid var(--orange); outline-offset: 3px; }

  /* ページの中の「〜にもどる」ボタン（場面を練習するの段階もどしなど） */
  body.theme .container .back-btn {
    padding: 6px 16px; border: 2px solid var(--navy); border-radius: 999px; background: #fff; color: var(--navy);
  }
  body.theme .container .back-btn:hover { text-decoration: none; background: #E7F7EF; }

  /* ---------- 入力欄・チェック ---------- */
  body.theme .form-label { font-size: 15px; color: var(--navy); }
  body.theme .form-input, body.theme .form-textarea, body.theme .form-select { border: 2px solid #8A93AB; border-radius: 12px; color: var(--navy); font-size: 16px; }
  body.theme .form-input:focus, body.theme .form-textarea:focus, body.theme .form-select:focus { border-color: var(--navy); box-shadow: 0 0 0 3px var(--sun); }
  body.theme .check-item { border-radius: 12px; }
  body.theme .check-item:hover { background: #E7F7EF; }
  body.theme .check-item input[type="checkbox"], body.theme input[type="radio"] { accent-color: var(--mint-deep); }
  body.theme .check-label { font-size: 15px; }

  /* ---------- 場面・返答・気持ち ---------- */
  body.theme .scene-card, body.theme .response-card, body.theme .feeling-btn { border: 2px solid var(--navy); border-radius: 16px; background: #fff; }
  body.theme .scene-card:hover, body.theme .response-card:hover, body.theme .feeling-btn:hover { background: #E7F7EF; border-color: var(--navy); }
  body.theme .scene-card.selected, body.theme .response-card.selected, body.theme .feeling-btn.selected {
    background: #E7F7EF; border-color: var(--navy); box-shadow: 4px 4px 0 var(--mint);
  }
  body.theme .scene-title, body.theme .response-text { font-family: var(--display); font-weight: 700; }
  body.theme .step-seg { height: 8px; border-radius: 999px; background: #D7DEE8; }
  body.theme .step-seg.active { background: var(--mint-deep); }
  body.theme .step-seg.done { background: var(--mint); opacity: 1; }

  /* ---------- そのほか ---------- */
  body.theme .badge-green { background: #E7F7EF; color: var(--mint-deep); }
  body.theme .badge-orange { background: #FFEBD9; color: #8A3F06; }
  /* 先輩の例のパターンA・B・C（どれもやり方のちがい。3つとも同じ色） */
  .badge-pattern { background: #E8F0FD; color: #2F5FA8; border: 1.5px solid #2F5FA8; font-size: 13px; }
  body.theme .divider { background: #D7DEE8; }
  body.theme .toast { background: var(--navy); }

  @media (max-width: 820px) {
    .page-hero { grid-template-columns: 1fr; margin-top: 8px; }
    .page-hero .alby img { width: 120px; }
    .page-hero .alby::before { width: 120px; }
    .page-hero .bubble { padding: 20px 20px; }
    .page-hero .bubble h1 { font-size: 25px; }
    .page-hero .lead { font-size: 17px; }
    body.theme .container { padding: 24px 16px 48px; }
    body.theme .card { padding: 18px 16px; }
  }
}

/* 印刷のときは、方眼の背景や新しい飾りを出さない（文字の設定も前と同じにもどす） */
@media print {
  body.theme { background: #fff !important; color: #2C2C2C; line-height: 1.6;
               font-family: 'Noto Sans JP', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif; }
  .top, .page-hero { display: none !important; }
}