/*
 * sho eigo 共通ビジュアルレイヤー
 * Open Design: warm storybook / navy structure / restrained gold / paper surfaces.
 * 各ページ固有のテーマは尊重し、共通の導線・状態表示・カードだけを正規化する。
 */

:root {
  --sho-navy: #13234a;
  --sho-navy-deep: #0c1a39;
  --sho-gold: #b89455;
  --sho-gold-light: #d9b97a;
  --sho-cream: #f6f2e9;
  --sho-paper: #fffdfa;
  --sho-paper-soft: #f9f5ee;
  --sho-ink: #1a1814;
  --sho-muted: #5a554c;
  --sho-line: #e2dccd;
  --sho-success: #3f7652;
  --sho-radius-card: 18px;
  --sho-radius-control: 12px;
  --sho-radius-pill: 999px;
  --sho-shadow-card: 0 12px 30px rgba(19, 35, 74, .08);
  --sho-shadow-control: 0 8px 20px rgba(19, 35, 74, .13);
  --sho-font-body: "Noto Serif CJK JP", "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sho-font-label: "Cormorant Garamond", Georgia, serif;
}

html {
  text-rendering: optimizeLegibility;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible {
  outline: 3px solid var(--sho-gold-light);
  outline-offset: 4px;
}

.site-header {
  border-bottom-color: rgba(226, 220, 205, .92);
  background: rgba(253, 250, 243, .94);
  backdrop-filter: blur(12px);
}

.brand,
.site-brand,
.brand-name {
  color: var(--sho-navy);
}

.brand span,
.site-brand span,
.brand-subtitle,
.eyebrow,
.kicker,
.section-label,
.section-head .label {
  color: var(--sho-gold);
}

.nav-cta,
.site-nav-cta,
.btn-primary,
.button-primary,
.cta-btn,
.header-cta,
.plan-cta.gold,
.plan-cta.solid,
.hero-cta,
.nagare-cta,
.submit-btn {
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--sho-radius-control);
  background: var(--sho-gold);
  color: var(--sho-navy);
  box-shadow: var(--sho-shadow-control);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.nav-cta:hover,
.site-nav-cta:hover,
.btn-primary:hover,
.button-primary:hover,
.cta-btn:hover,
.header-cta:hover,
.plan-cta.gold:hover,
.plan-cta.solid:hover,
.hero-cta:hover,
.nagare-cta:hover,
.submit-btn:hover {
  background: var(--sho-gold-light);
  color: var(--sho-navy);
  box-shadow: 0 12px 24px rgba(19, 35, 74, .16);
  transform: translateY(-2px);
}

.btn-secondary,
.button-secondary,
.btn-quiet {
  min-height: 44px;
  border: 1px solid rgba(19, 35, 74, .3);
  border-radius: var(--sho-radius-control);
  background: rgba(255, 253, 250, .72);
  color: var(--sho-navy);
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease;
}

.btn-secondary:hover,
.button-secondary:hover,
.btn-quiet:hover {
  background: var(--sho-paper);
  color: var(--sho-navy);
  box-shadow: var(--sho-shadow-card);
  transform: translateY(-2px);
}

.card,
.plan,
.tier,
.service-card,
.plan-detail,
.free-copy,
.free-list,
.course-card,
.voice-card,
.feature-box {
  border-color: var(--sho-line);
  border-radius: var(--sho-radius-card);
  box-shadow: var(--sho-shadow-card);
}

.section-title,
.card h3,
.plan h3,
.tier h3,
.service-card h3 {
  font-family: var(--sho-font-body);
  color: var(--sho-navy);
}

.hero h1,
.hero h2 {
  font-family: var(--sho-font-body);
}

.status-pill,
.status-line,
.plan-status,
.availability-badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 32px;
  padding: 6px 11px;
  border: 1px solid rgba(184, 148, 85, .42);
  border-radius: var(--sho-radius-pill);
  background: #f3eee4;
  color: var(--sho-navy);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.4;
  letter-spacing: .015em;
}

.status-pill::before,
.status-line::before,
.plan-status::before,
.availability-badge::before,
.status-badge::before {
  width: 7px;
  height: 7px;
  flex: 0 0 7px;
  border-radius: 50%;
  background: var(--sho-gold);
  content: "";
}

.status-available,
.is-available,
.status-live,
.available {
  border-color: rgba(63, 118, 82, .32);
  background: #eef5ef;
  color: #245238;
}

.status-available::before,
.is-available::before,
.status-live::before,
.available::before {
  background: var(--sho-success);
}

.status-invite,
.status-invited,
.invite,
.status-pill.invite,
.status-line.status-invite,
.plan-status.status-invite {
  border-color: rgba(184, 148, 85, .48);
  background: #f4ead8;
  color: #5d4825;
}

.status-invite::before,
.status-invited::before,
.invite::before,
.status-pill.invite::before,
.status-line.status-invite::before,
.plan-status.status-invite::before {
  background: var(--sho-gold);
}

.status-preparing,
.preparing,
.status-soon,
.status-pill.status-preparing,
.plan-status.status-preparing {
  border-color: var(--sho-line);
  background: #f5f1e9;
  color: var(--sho-muted);
}

.status-preparing::before,
.preparing::before,
.status-soon::before,
.status-pill.status-preparing::before,
.plan-status.status-preparing::before {
  background: #8b8275;
}

.status-paused,
.paused,
.status-pill.status-paused,
.plan-status.status-paused {
  border-color: #d7d4cc;
  background: #f1f0ec;
  color: var(--sho-muted);
}

.status-paused::before,
.paused::before,
.status-pill.status-paused::before,
.plan-status.status-paused::before {
  background: #8b8275;
}

.plan-status {
  margin-top: 12px;
}

.status-pill.invite,
.status-line.status-invite,
.plan-status.status-invite {
  background: #f4ead8;
  color: #5d4825;
}

.status-pill.status-available,
.plan-status.status-available {
  background: #eef5ef;
  color: #245238;
}

.status-pill.status-preparing,
.plan-status.status-preparing {
  background: #f5f1e9;
  color: var(--sho-muted);
}

.status-pill.status-paused,
.plan-status.status-paused {
  background: #f1f0ec;
  color: var(--sho-muted);
}

.status-pill.status-available::before,
.plan-status.status-available::before {
  background: var(--sho-success);
}

.status-pill.status-preparing::before,
.plan-status.status-preparing::before,
.status-pill.status-paused::before,
.plan-status.status-paused::before {
  background: #8b8275;
}

.plan-tag,
.level,
.badge,
.pill,
.hero-points li {
  border-radius: var(--sho-radius-pill);
}

.plan-tag,
.section-label,
.kicker,
.eyebrow,
.level.gold {
  letter-spacing: .12em;
}

.hero-actions .btn,
.hero-actions a,
.actions .btn,
.actions a,
.course-cta .btn,
.course-cta a,
.cta-btn,
.header-cta,
.plan-cta.gold,
.plan-cta.solid,
.hero-cta,
.nagare-cta,
.submit-btn {
  min-height: 44px;
}

.note,
.plain-note,
.plan-note,
.plan-entry-note {
  color: var(--sho-muted);
}

@media (max-width: 720px) {
  .hero-actions,
  .actions {
    gap: 10px;
  }

  .hero-actions .btn,
  .hero-actions a,
  .actions .btn,
  .actions a {
    max-width: 100%;
  }

  .status-pill,
  .status-line,
  .plan-status,
  .availability-badge,
  .status-badge {
    font-size: 11px;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  a,
  button,
  .btn,
  .nav-cta,
  .site-nav-cta,
  .button-primary,
  .button-secondary,
  .cta-btn,
  .header-cta {
    transition: none;
  }

  .btn-primary:hover,
  .button-primary:hover,
  .nav-cta:hover,
  .site-nav-cta:hover,
  .cta-btn:hover,
  .header-cta:hover,
  .plan-cta.gold:hover,
  .plan-cta.solid:hover,
  .hero-cta:hover,
  .nagare-cta:hover,
  .submit-btn:hover,
  .btn-secondary:hover,
  .button-secondary:hover,
  .btn-quiet:hover {
    transform: none;
  }
}


/*
 * 2026-08-15 公開面の「形」統一レイヤー（オーナー裁定: 色は現行のまま・形だけ揃える）
 *
 * このブロックはページ固有CSSの後に読み込む。
 * ⚠️ 色は一切上書きしない。ブランド色の単一ソースは public/all/brand-color.css
 *   （navy #13234a / gold #b89455 / bg #f6f2e9）であり、ここで --gold / --navy / --bg を
 *   再定義すると「正本はゴールドなのに実画面は別色」というズレが生まれるため禁止。
 *   揃えるのは角丸・余白・影・ボタンの当たり判定・フォーカス表示など、色を持たない属性だけ。
 *   経緯: PR #4136 は同じ狙いで色まで置き換えたため、トップの主CTAが背景に埋もれる劣化が出た。
 */
:root {
  --sho-radius-card: 18px;
  --sho-radius-control: 12px;
  --sho-radius-pill: 999px;
  --sho-shadow-card: 0 12px 30px rgba(19, 35, 74, .08);
  --sho-shadow-control: 0 8px 20px rgba(19, 35, 74, .14);
  --sho-tap-min: 44px;
}

/* 押せるものは指で押せる大きさに揃える（形のみ・色は各ページのまま） */
.btn,
.button,
.cta,
.btn-primary,
.btn-secondary,
.button-primary,
.button-secondary {
  min-height: var(--sho-tap-min);
  border-radius: var(--sho-radius-control);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn-pill,
.cta-pill,
.nav-cta {
  border-radius: var(--sho-radius-pill);
}

/* カードの角丸と影を揃える（背景・文字色には触れない） */
.card,
.panel,
.tile,
.topic-card,
.collab-card {
  border-radius: var(--sho-radius-card);
}

/* キーボード操作のフォーカスは全面で見えるようにする（色はブランド gold のフォールバック付き） */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--gold, #b89455);
  outline-offset: 3px;
  border-radius: 4px;
}

/* 横スクロールを起こさない（モバイルの定番崩れ） */
img,
video,
table {
  max-width: 100%;
}

@media (prefers-reduced-motion: reduce) {
  .btn,
  .button,
  .cta,
  .card,
  .panel {
    transition: none !important;
  }
}