/* ============================================
   BEMを、5通りに（/self-practice.html 専用）

   規約:
   - 全セレクタを .sp-page / .sp-alert-wrap 配下にスコープする。
   - トークンは :root ではなく .sp-page に置く。
     共有 style.css は :root に --radius:4px を持ち、.nav-links a /
     .nav-cta がそれを参照しているため、:root へ再定義すると
     共有ヘッダーの角丸が変わる（＝下層への横展開になる）。
   - style.css / script.js / components.js は一切変更しない。
   - 展示ラベル2色は白文字とのコントラストを機械確認済み
     （企画展示 #8C6828 = 5.09 / 比較展示 #4D5B7C = 6.77、いずれもAA以上）。
   ============================================ */

.sp-page {
  --sp-play:    #8C6828;
  --sp-serious: #4D5B7C;
  --sp-maxw:    780px;
}

/* ── 共通パーツ ───────────────────────── */
.sp-page .sp-narrow { max-width: var(--sp-maxw); }
.sp-page .sp-band { background: var(--cream-dark); }

.sp-page .sp-lead {
  font-size: var(--fs-lead);
  color: var(--text-mid);
  line-height: var(--lh-loose);
  margin-top: 1.5rem;
  max-width: 64ch;
}

/* ── 冒頭の断り ───────────────────────── */
.sp-alert-wrap { background: var(--cream); padding: 2rem 0 0; }
.sp-alert-wrap .sp-narrow { max-width: 780px; }
.sp-alert {
  background: #FBF3E4;
  border: 1px solid #E3CE9F;
  border-left: 4px solid var(--gold-dark);
  border-radius: var(--radius);
  padding: 1.1rem 1.3rem;
}
.sp-alert p {
  margin: 0;
  font-size: var(--fs-body-sm);
  color: var(--text-dark);
  line-height: var(--lh-body);
}
.sp-alert b { font-weight: var(--fw-bold); }
.sp-alert a {
  color: var(--slate);
  font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 1px;
}
.sp-alert a:hover { color: var(--gold-dark); }

/* ── パターン一覧 ─────────────────────── */
.sp-page .sp-cases {
  margin-top: 2.5rem;
  display: grid;
  gap: 2rem;
}
.sp-page .sp-case {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.sp-page .sp-case--serious { border-color: var(--sp-serious); border-width: 2px; }
.sp-page .sp-case > a {
  display: block;
  line-height: 0;
  border-bottom: 1px solid var(--border);
}
.sp-page .sp-case img {
  width: 100%;
  height: auto;
  display: block;
  transition: opacity var(--transition);
}
.sp-page .sp-case > a:hover img { opacity: 0.88; }
.sp-page .sp-case-body { padding: 1.5rem clamp(1.1rem, 3vw, 1.8rem) 1.7rem; }
.sp-page .sp-case-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  margin-bottom: 0.9rem;
}
.sp-page .sp-case-head h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-bold);
  color: var(--slate-dark);
  line-height: var(--lh-heading);
}
.sp-page .sp-eval {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-body);
  color: var(--text-mid);
}
.sp-page .sp-open { margin-top: 1rem; }
.sp-page .sp-open a {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--slate);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.sp-page .sp-open a::after { content: '↗'; font-size: 0.9em; }
.sp-page .sp-open a:hover { color: var(--gold-dark); }

/* 展示ラベル（白文字・コントラスト確認済み） */
.sp-page .sp-tag {
  flex: 0 0 auto;
  display: inline-block;
  padding: 0.32rem 0.9rem;
  border-radius: 999px;
  font-size: var(--fs-micro);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-subtle);
  color: var(--white);
  white-space: nowrap;
}
.sp-page .sp-tag--play    { background: var(--sp-play); }
.sp-page .sp-tag--serious { background: var(--sp-serious); }

/* ── 採用版 ───────────────────────────── */
.sp-page .sp-final {
  margin-top: 2rem;
  padding: 1.6rem clamp(1.1rem, 3vw, 1.8rem);
  background: var(--surface-cool);
  border: 1px solid var(--border-cool);
  border-left: 3px solid var(--teal);
  border-radius: var(--radius);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
}
.sp-page .sp-final p {
  flex: 1 1 22rem;
  margin: 0;
  font-size: var(--fs-body);
  color: var(--text-mid);
  line-height: var(--lh-body);
}
.sp-page .sp-final b { color: var(--slate-dark); font-weight: var(--fw-bold); }

/* ── 確かめたこと / いないこと ───────────── */
.sp-page .sp-check {
  margin-top: 2.2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
}
.sp-page .sp-check-col {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.5rem clamp(1.1rem, 3vw, 1.6rem);
}
.sp-page .sp-check--did { border-top: 3px solid var(--teal); }
.sp-page .sp-check--not { border-top: 3px solid var(--text-light); }
.sp-page .sp-check-col h3 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-subtle);
  color: var(--slate-dark);
  margin-bottom: 1rem;
}
.sp-page .sp-check-col ul { list-style: none; padding: 0; display: grid; gap: 0.8rem; }
.sp-page .sp-check-col li {
  position: relative;
  padding-left: 1.3rem;
  font-size: var(--fs-body-sm);
  color: var(--text-mid);
  line-height: var(--lh-body);
}
.sp-page .sp-check--did li::before {
  content: '';
  position: absolute; left: 0; top: 0.62em;
  width: 7px; height: 7px;
  background: var(--teal);
  transform: rotate(45deg);
}
.sp-page .sp-check--not li::before {
  content: '';
  position: absolute; left: 0; top: 0.85em;
  width: 8px; height: 1px;
  background: var(--text-light);
}

/* ── 判断シートとの違い ─────────────────── */
.sp-page .sp-note {
  padding: 1.7rem clamp(1.2rem, 3vw, 2rem);
  background: var(--cream-dark);
  border-left: 3px solid var(--slate);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.sp-page .sp-note h3 {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-subtle);
  color: var(--slate-dark);
  margin-bottom: 0.8rem;
}
.sp-page .sp-note p {
  font-size: var(--fs-body-sm);
  color: var(--text-mid);
  line-height: var(--lh-body);
  margin-bottom: 1rem;
}
.sp-page .sp-note b { color: var(--slate-dark); font-weight: var(--fw-bold); }
.sp-page .sp-note a {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--slate);
  border-bottom: 1px solid var(--gold);
  padding-bottom: 2px;
}
.sp-page .sp-note a:hover { color: var(--gold-dark); }

/* ── CTA ─────────────────────────────── */
.sp-page .sp-cta { background: var(--slate); }
.sp-page .sp-cta h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-bold);
  color: var(--white);
  line-height: var(--lh-heading);
}
.sp-page .sp-cta p {
  margin-top: 1rem;
  font-size: var(--fs-lead);
  color: rgba(255, 255, 255, 0.85);
  line-height: var(--lh-loose);
  max-width: 56ch;
}
.sp-page .sp-cta-btns {
  margin-top: 2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

/* ── モーション配慮 ───────────────────── */
/* 共有 style.css は prefers-reduced-motion を持たないため、
   本ページ内に限って .fade-up の初期非表示と遷移を無効化する。
   （共有CSSには手を入れない） */
@media (prefers-reduced-motion: reduce) {
  .sp-page .fade-up,
  .sp-page .fade-up.visible {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .sp-page .sp-case img { transition: none; }
}

/* ── narrow viewport ─────────────────── */
@media (max-width: 600px) {
  .sp-page .sp-final { flex-direction: column; align-items: flex-start; }
  .sp-page .sp-cta-btns .btn { width: 100%; justify-content: center; }
  .sp-page .sp-case-head { gap: 0.5rem; }
}