/**
 * Tiny Steps LP — tiny-steps.css
 *
 * 設計思想:
 *   - #ts-root 配下のみ完全独立デザイン
 *   - Cocoon / entry-content / article 干渉を完全排除
 *   - CSS カスタムプロパティで全色・全値を管理
 *   - モバイルファースト + clamp() 流体タイポグラフィ
 *   - アニメーションは opacity / transform / filter のみ使用
 *   - カラーパレット: 深いインク × 暖かい紙 × テラコッタオレンジ × ゴールド
 *   - フォント: Shippori Mincho（明朝見出し）+ Noto Sans JP（本文）
 *
 * @package cocoon-child-master
 */

/* ================================================================
   1. COCOON 干渉リセット
   ================================================================ */
.tiny-steps .article,
.tiny-steps .entry-content,
.tiny-steps .main,
.tiny-steps .content,
.tiny-steps .wrap,
.tiny-steps #main,
.tiny-steps #body-in,
.tiny-steps #container,
.tiny-steps #container-in,
.tiny-steps #contents,
.tiny-steps #contents-in {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  float: none !important;
  position: static !important;
  overflow: visible !important;
  height: auto !important;
  min-height: 0 !important;
  flex: none !important;
}

.tiny-steps #sidebar,
.tiny-steps .sidebar,
.tiny-steps #sidebar-scroll,
.tiny-steps .sidebar-top,
.tiny-steps .sidebar-bottom {
  display: none !important;
}

.tiny-steps #footer:not(.tp-footer),
.tiny-steps .site-footer:not(.tp-footer),
.tiny-steps .footer:not(.tp-footer) {
  display: none !important;
}

/* ================================================================
   2. CSS カスタムプロパティ（#ts-root スコープ）
   ================================================================ */
#ts-root {
  /* ─ カラーパレット ─ */
  --ts-ink:           #1a1410;
  --ts-ink-soft:      #3d3530;
  --ts-ink-muted:     #7a6e68;
  --ts-paper:         #faf7f2;
  --ts-paper-warm:    #f4efe6;
  --ts-paper-deep:    #ede6d8;
  --ts-accent:        #c4602a;
  --ts-accent-light:  #e8845a;
  --ts-accent-pale:   #f5e0d4;
  --ts-green:         #4a7c59;
  --ts-green-pale:    #ddeee3;
  --ts-gold:          #b8923a;
  --ts-gold-pale:     #f5e9d0;
  --ts-blue:          #3a5f7c;
  --ts-blue-pale:     #d4e4f0;

  /* ─ タイポグラフィ ─ */
  --ts-font-sans:    'Noto Sans JP', sans-serif;
  --ts-font-serif:   'Shippori Mincho', 'Noto Serif JP', serif;

  /* ─ スペーシング ─ */
  --ts-section-py:    clamp(4rem, 8vw, 6rem);
  --ts-container-max: 720px;
  --ts-container-wide: 900px;
  --ts-radius:        2px;
  --ts-radius-md:     8px;
  --ts-radius-lg:     12px;

  /* ─ シャドウ ─ */
  --ts-shadow:        0 2px 24px rgba(26,20,16,0.08);
  --ts-shadow-deep:   0 8px 48px rgba(26,20,16,0.16);

  /* ─ トランジション ─ */
  --ts-transition:    0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ts-transition-slow: 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* ================================================================
   3. GLOBAL RESET — #ts-root スコープ
   ================================================================ */
#ts-root,
#ts-root *,
#ts-root *::before,
#ts-root *::after {
  box-sizing: border-box;
}

#ts-root h1,
#ts-root h2,
#ts-root h3,
#ts-root h4,
#ts-root h5,
#ts-root h6,
#ts-root p,
#ts-root ul,
#ts-root ol,
#ts-root li,
#ts-root figure,
#ts-root blockquote,
#ts-root dl,
#ts-root dd {
  margin: 0;
  padding: 0;
}

#ts-root ul,
#ts-root ol {
  list-style: none;
}

#ts-root {
  background-color: var(--ts-paper);
  color: var(--ts-ink);
  font-family: var(--ts-font-sans);
  font-weight: 400;
  line-height: 1.9;
  overflow-x: clip;
  overflow-y: visible;
  position: relative;
  width: 100%;
  max-width: 100%;
  padding: 0;
  margin: 0;
  overflow-wrap: break-word;
  word-break: normal;
  word-break: auto-phrase;
}

/* ── スクロールバー統一 ── */
#ts-root::-webkit-scrollbar { width: 4px; }
#ts-root::-webkit-scrollbar-track { background: var(--ts-paper-warm); }
#ts-root::-webkit-scrollbar-thumb { background: var(--ts-accent); border-radius: 2px; }

/* ── テキスト選択ハイライト ── */
#ts-root ::selection {
  background: var(--ts-accent-pale);
  color: var(--ts-ink);
}

/* ================================================================
   4. BLOCKQUOTE / TABLE 白抜き完全解消（Cocoon対策）
   ================================================================ */
#ts-root blockquote {
  background: var(--ts-paper-warm) !important;
  border-left: 3px solid var(--ts-gold) !important;
  border-right: none !important;
  color: var(--ts-ink) !important;
  padding: 1.5rem 1.75rem !important;
  margin: 0 !important;
  box-shadow: none !important;
  border-radius: 0 var(--ts-radius-md) var(--ts-radius-md) 0 !important;
}

#ts-root blockquote::before,
#ts-root blockquote::after {
  display: none !important;
}

/* ================================================================
   5. ベースタイポグラフィ
   ================================================================ */
#ts-root h1,
#ts-root h2,
#ts-root h3 {
  font-family: var(--ts-font-serif);
  line-height: 1.4;
  color: var(--ts-ink);
}

#ts-root p {
  color: var(--ts-ink-soft);
  margin-bottom: 1.4rem;
}

#ts-root p:last-child {
  margin-bottom: 0;
}

#ts-root strong {
  color: var(--ts-ink);
}

#ts-root a {
  color: var(--ts-accent);
  text-decoration: none;
  transition: color var(--ts-transition);
}

#ts-root a:hover {
  color: var(--ts-accent-light);
}

/* ================================================================
   6. レイアウト基盤
   ================================================================ */
#ts-root .ts-container {
  max-width: var(--ts-container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2rem);
}

#ts-root .ts-container--wide {
  max-width: var(--ts-container-wide);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2rem);
}

/* ── 共通セクション ── */
#ts-root .ts-section {
  padding-block: var(--ts-section-py);
  max-width: var(--ts-container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2rem);
}

#ts-root .ts-section-bg-warm {
  background: var(--ts-paper-warm);
}

/* ── セクションラベル ── */
#ts-root .ts-section__label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--ts-accent);
  margin-bottom: 1rem;
}

#ts-root .ts-section__label--light {
  color: var(--ts-accent-light);
}

/* ── セクションタイトル ── */
#ts-root .ts-section__title {
  font-size: clamp(1.5rem, 5vw, 2.4rem);
  font-weight: 700;
  margin-bottom: 1.5rem;
  color: var(--ts-ink);
  line-height: 1.35;
}

#ts-root .ts-section__title--light {
  color: var(--ts-paper);
}

/* ── リード文 ── */
#ts-root .ts-lead {
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  color: var(--ts-ink-soft);
  margin-bottom: 2rem;
  line-height: 2;
}

/* ── h3 ── */
#ts-root .ts-h3 {
  font-family: var(--ts-font-serif);
  font-size: 1.1rem;
  margin-bottom: 1rem;
  color: var(--ts-ink);
}

/* ── 脚注・ヒント ── */
#ts-root .ts-footnote {
  font-size: 0.75rem;
  color: var(--ts-ink-muted);
  text-align: center;
  margin-bottom: 1.5rem;
}

#ts-root .ts-hint {
  font-size: 0.88rem;
  color: var(--ts-ink-muted);
  margin-bottom: 1.5rem;
}

/* ================================================================
   7. スクロールリビールアニメーション（ts-reveal）
   ================================================================ */
#ts-root .ts-reveal {
  opacity: 0;
  transform: translateY(28px);
  transition:
    opacity  0.7s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

#ts-root .ts-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 遅延バリエーション（stagger） */
#ts-root .ts-reveal[data-delay="1"] { transition-delay: 0.1s; }
#ts-root .ts-reveal[data-delay="2"] { transition-delay: 0.2s; }
#ts-root .ts-reveal[data-delay="3"] { transition-delay: 0.3s; }
#ts-root .ts-reveal[data-delay="4"] { transition-delay: 0.4s; }
#ts-root .ts-reveal[data-delay="5"] { transition-delay: 0.5s; }

/* ================================================================
   8. 読書進捗バー（#ts-root 外部のグローバル要素）
   ================================================================ */
#ts-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(to right, var(--ts-accent, #c4602a), var(--ts-gold, #b8923a));
  z-index: 9999;
  transition: width 0.1s linear;
  width: 0%;
  pointer-events: none;
}

/* ================================================================
   9. フローティングナビ（#ts-root 外部）
   ================================================================ */
.ts-nav-pill {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.ts-nav-pill.is-visible {
  opacity: 1;
  pointer-events: all;
}

.ts-nav-pill a {
  width: 44px;
  height: 44px;
  background: #1a1410;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #faf7f2;
  text-decoration: none;
  font-size: 1rem;
  transition: background 0.2s, transform 0.2s;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25);
}

.ts-nav-pill a:hover {
  background: #c4602a;
  transform: scale(1.1);
}

/* ================================================================
   10. HERO セクション
   ================================================================ */
#ts-root .ts-hero {
  min-height: 100svh;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: clamp(5rem, 10vw, 8rem) clamp(1.25rem, 5vw, 2rem) 4rem;
  position: relative;
  background: var(--ts-ink);
  overflow: hidden;
}

#ts-root .ts-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 60% at 50% 80%, rgba(196,96,42,0.18) 0%, transparent 70%),
    radial-gradient(ellipse 60% 40% at 20% 20%, rgba(184,146,58,0.10) 0%, transparent 60%);
  pointer-events: none;
}

/* ── 波紋アニメーション ── */
#ts-root .ts-hero__ripples {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

#ts-root .ts-ripple {
  position: absolute;
  border-radius: 50%;
  border: 1px solid rgba(196,96,42,0.15);
  animation: ts-rippleExpand 8s ease-out infinite;
  transform: translate(-50%, -50%);
  left: 50%;
  bottom: 20%;
}

#ts-root .ts-ripple:nth-child(1) { width: 100px;  height: 100px;  animation-delay: 0s;   }
#ts-root .ts-ripple:nth-child(2) { width: 220px;  height: 220px;  animation-delay: 1.5s; }
#ts-root .ts-ripple:nth-child(3) { width: 380px;  height: 380px;  animation-delay: 3s;   }
#ts-root .ts-ripple:nth-child(4) { width: 580px;  height: 580px;  animation-delay: 4.5s; }
#ts-root .ts-ripple:nth-child(5) { width: 820px;  height: 820px;  animation-delay: 6s;   }

@keyframes ts-rippleExpand {
  0%   { opacity: 0.8; transform: translate(-50%, -50%) scale(0.3); }
  100% { opacity: 0;   transform: translate(-50%, -50%) scale(1);   }
}

/* ── ヒーロー テキスト ── */
#ts-root .ts-hero__eyebrow {
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.3em;
  color: var(--ts-accent-light);
  text-transform: uppercase;
  margin-bottom: 2rem;
  position: relative;
  z-index: 1;
}

#ts-root .ts-hero__title {
  font-family: var(--ts-font-serif);
  font-size: clamp(2.2rem, 8vw, 4.8rem);
  font-weight: 700;
  color: var(--ts-paper);
  line-height: 1.25;
  margin-bottom: 1.5rem;
  position: relative;
  z-index: 1;
}

#ts-root .ts-hero__title em {
  color: var(--ts-accent-light);
  font-style: normal;
  display: block;
  font-size: 0.6em;
  font-weight: 300;
  letter-spacing: 0.05em;
  margin-top: 0.5rem;
}

#ts-root .ts-hero__lead {
  font-size: clamp(0.95rem, 2.5vw, 1.05rem);
  color: rgba(250,247,242,0.7);
  max-width: 540px;
  margin: 0 auto 2.5rem;
  font-weight: 300;
  line-height: 2;
  position: relative;
  z-index: 1;
}

/* ── ヒーロー CTA ── */
#ts-root .ts-hero__cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 3rem;
  position: relative;
  z-index: 1;
}

/* ── スクロール誘導 ── */
#ts-root .ts-hero__scroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  color: rgba(250,247,242,0.4);
  font-size: 0.72rem;
  letter-spacing: 0.15em;
  position: relative;
  z-index: 1;
}

#ts-root .ts-hero__scroll-line {
  width: 1px;
  height: 60px;
  background: linear-gradient(to bottom, transparent, var(--ts-accent-light), transparent);
  animation: ts-scrollPulse 2s ease-in-out infinite;
}

@keyframes ts-scrollPulse {
  0%, 100% { opacity: 0.3; transform: scaleY(0.8); }
  50%       { opacity: 0.8; transform: scaleY(1);   }
}

/* ================================================================
   11. CTA ボタン
   ================================================================ */
#ts-root .ts-cta-btn {
  display: inline-block;
  padding: 1rem 2.5rem;
  background: var(--ts-accent);
  color: #fff;
  font-family: var(--ts-font-serif);
  font-size: clamp(0.95rem, 2.5vw, 1.05rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  border-radius: var(--ts-radius);
  text-decoration: none;
  transition:
    background-color var(--ts-transition),
    transform 0.2s ease,
    box-shadow 0.2s ease;
  cursor: pointer;
  border: none;
  box-shadow: 0 4px 20px rgba(196,96,42,0.3);
  will-change: transform;
}

#ts-root .ts-cta-btn:hover {
  background: #a84d20 !important;
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(196,96,42,0.4);
  color: #fff;
}

#ts-root .ts-cta-btn:active {
  transform: translateY(0);
}

#ts-root .ts-cta-btn--large {
  padding: 1.2rem 3rem;
  font-size: clamp(1rem, 2.5vw, 1.15rem);
}

#ts-root .ts-cta-sub {
  font-size: 0.78rem;
  color: var(--ts-ink-muted);
  letter-spacing: 0.05em;
  margin: 0;
}

#ts-root .ts-cta-sub--light {
  color: rgba(250,247,242,0.5);
}

/* ================================================================
   12. Section A — ストーリーブロック・強調ボックス
   ================================================================ */
#ts-root .ts-story-block {
  background: var(--ts-paper-warm);
  border-left: 3px solid var(--ts-accent);
  padding: 2rem 1.8rem;
  margin: 2rem 0;
  border-radius: 0 var(--ts-radius) var(--ts-radius) 0;
  font-family: var(--ts-font-serif);
  font-size: 1.05rem;
  color: var(--ts-ink-soft);
  line-height: 2.1;
}

#ts-root .ts-story-block__time {
  font-size: 0.72rem;
  letter-spacing: 0.2em;
  color: var(--ts-accent);
  font-family: var(--ts-font-sans);
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-bottom: 1rem;
}

#ts-root .ts-emphasis-box {
  background: var(--ts-ink);
  color: var(--ts-paper);
  padding: 2rem;
  margin: 2.5rem 0;
  border-radius: var(--ts-radius);
  text-align: center;
}

#ts-root .ts-emphasis-box__big {
  font-family: var(--ts-font-serif);
  font-size: clamp(1.2rem, 4vw, 1.75rem);
  font-weight: 700;
  line-height: 1.6;
  margin-bottom: 0.8rem;
}

#ts-root .ts-emphasis-box__sub {
  font-size: 0.88rem;
  color: rgba(250,247,242,0.55);
  font-weight: 300;
  margin: 0;
}

/* ── コールアウト ── */
#ts-root .ts-callout {
  display: flex;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
  background: var(--ts-paper-warm);
  border-radius: var(--ts-radius-md);
  margin: 1.5rem 0;
  align-items: flex-start;
}

#ts-root .ts-callout__icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
  line-height: 1;
}

#ts-root .ts-callout__text {
  font-size: 0.93rem;
  color: var(--ts-ink-soft);
  line-height: 1.8;
  margin: 0;
}

/* ================================================================
   13. Section B — アコーディオンカード
   ================================================================ */
#ts-root .ts-cards-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 2rem 0;
}

#ts-root details.ts-reason-card {
  background: var(--ts-paper-warm);
  border: 1px solid var(--ts-paper-deep);
  border-radius: var(--ts-radius-md);
  overflow: hidden;
  transition: box-shadow var(--ts-transition);
}

#ts-root details.ts-reason-card:hover {
  box-shadow: var(--ts-shadow);
}

#ts-root details.ts-reason-card[open] {
  border-color: var(--ts-accent);
}

#ts-root details.ts-reason-card summary {
  padding: 1.2rem 1.5rem;
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 1rem;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--ts-ink);
  position: relative;
  user-select: none;
}

#ts-root details.ts-reason-card summary::-webkit-details-marker {
  display: none;
}

#ts-root details.ts-reason-card summary::after {
  content: '+';
  position: absolute;
  right: 1.5rem;
  font-size: 1.4rem;
  color: var(--ts-accent);
  transition: transform var(--ts-transition);
  font-weight: 300;
  line-height: 1;
}

#ts-root details.ts-reason-card[open] summary::after {
  transform: rotate(45deg);
}

#ts-root .ts-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  flex-shrink: 0;
}

#ts-root .ts-card-body {
  padding: 0 1.5rem 1.5rem 4.3rem;
  color: var(--ts-ink-soft);
  font-size: 0.93rem;
}

#ts-root .ts-card-body p {
  margin-bottom: 0.8rem;
}

#ts-root .ts-check-phrase {
  margin-top: 1rem;
  padding: 0.8rem 1rem;
  background: var(--ts-accent-pale);
  border-radius: var(--ts-radius);
  font-size: 0.85rem;
  color: var(--ts-accent);
  font-weight: 500;
}

#ts-root .ts-check-phrase::before {
  content: '✓ ';
  font-weight: 700;
}

/* ================================================================
   14. Section C — 行動モデル・引用・数値
   ================================================================ */
#ts-root .ts-model-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  margin: 2rem 0;
}

#ts-root .ts-model-item {
  flex: 1;
  background: var(--ts-paper-warm);
  border: 1px solid var(--ts-paper-deep);
  border-radius: var(--ts-radius-md);
  padding: 1.25rem 0.75rem;
  text-align: center;
}

#ts-root .ts-model-item--result {
  background: var(--ts-accent-pale);
  border-color: var(--ts-accent);
}

#ts-root .ts-model-icon {
  font-size: 1.8rem;
  margin-bottom: 0.6rem;
  display: block;
  line-height: 1;
}

#ts-root .ts-model-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--ts-ink-muted);
  text-transform: uppercase;
  margin-bottom: 0.3rem;
}

#ts-root .ts-model-value {
  font-family: var(--ts-font-serif);
  font-size: 0.95rem;
  color: var(--ts-ink);
  font-weight: 700;
}

#ts-root .ts-model-value--accent {
  color: var(--ts-accent);
}

#ts-root .ts-model-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.4rem;
  color: var(--ts-accent);
  font-size: 1.1rem;
  font-weight: 700;
  flex-shrink: 0;
  align-self: center;
}

/* ── 引用ブロック ── */
#ts-root .ts-quote-block {
  border-left: 3px solid var(--ts-gold);
  padding: 1.5rem 1.8rem;
  margin: 2.5rem 0;
  background: var(--ts-gold-pale);
  border-radius: 0 var(--ts-radius-md) var(--ts-radius-md) 0;
}

#ts-root .ts-quote-block blockquote {
  font-family: var(--ts-font-serif) !important;
  font-size: 1.05rem !important;
  color: var(--ts-ink) !important;
  line-height: 2 !important;
  margin-bottom: 0.5rem !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
  border-radius: 0 !important;
}

#ts-root .ts-quote-block cite {
  font-size: 0.78rem;
  color: var(--ts-gold);
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.05em;
}

/* ── 数値ロウ ── */
#ts-root .ts-numbers-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  text-align: center;
  margin: 2.5rem 0 0.5rem;
  padding: 2rem 1.5rem;
  background: var(--ts-paper-warm);
  border-radius: var(--ts-radius-md);
}

#ts-root .ts-big-number {
  font-family: var(--ts-font-serif);
  font-size: clamp(2.5rem, 8vw, 4.5rem);
  font-weight: 900;
  color: var(--ts-accent);
  line-height: 1;
  margin-bottom: 0.5rem;
}

#ts-root .ts-number-caption {
  font-size: 0.8rem;
  color: var(--ts-ink-muted);
  line-height: 1.6;
}

/* ================================================================
   15. Section D — アクションピッカー
   ================================================================ */
#ts-root .ts-action-picker {
  margin: 1.5rem 0;
}

#ts-root .ts-action-category {
  margin-bottom: 1.5rem;
}

#ts-root .ts-action-category-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ts-ink-muted);
  margin-bottom: 0.8rem;
}

#ts-root .ts-action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

#ts-root .ts-action-btn {
  background: var(--ts-paper-warm);
  border: 1.5px solid var(--ts-paper-deep);
  border-radius: 20px;
  padding: 0.55rem 1.1rem;
  font-size: 0.88rem;
  color: var(--ts-ink-soft);
  cursor: pointer;
  transition: all 0.2s ease;
  font-family: var(--ts-font-sans);
  font-weight: 400;
  line-height: 1.4;
  white-space: nowrap;
}

#ts-root .ts-action-btn:hover {
  border-color: var(--ts-accent);
  color: var(--ts-accent);
  background: var(--ts-accent-pale);
}

#ts-root .ts-action-btn.is-selected {
  background: var(--ts-accent);
  border-color: var(--ts-accent);
  color: white;
  font-weight: 700;
}

/* ── 選択済みアクション表示 ── */
#ts-root .ts-selected-actions {
  margin-top: 1.5rem;
  padding: 1.2rem 1.5rem;
  background: var(--ts-accent-pale);
  border-radius: var(--ts-radius-md);
  border: 1.5px solid var(--ts-accent);
}

#ts-root .ts-selected-actions__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ts-accent);
  margin-bottom: 0.6rem;
}

#ts-root .ts-selected-actions__text {
  font-family: var(--ts-font-serif);
  font-size: 0.95rem;
  color: var(--ts-ink);
  line-height: 2;
}

/* ================================================================
   16. Section E — ルールメーカー
   ================================================================ */
#ts-root .ts-rule-maker {
  background: var(--ts-paper-warm);
  border: 1px solid var(--ts-paper-deep);
  border-radius: var(--ts-radius-md);
  padding: 2rem;
  margin: 2rem 0;
}

#ts-root .ts-rule-maker__title {
  font-size: 1rem;
  margin-bottom: 1.5rem;
  color: var(--ts-ink);
  font-family: var(--ts-font-serif);
}

#ts-root .ts-rule-row {
  margin-bottom: 1.2rem;
}

#ts-root .ts-rule-row label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ts-ink-muted);
  margin-bottom: 0.4rem;
}

#ts-root .ts-rule-select {
  width: 100%;
  padding: 0.75rem 2.5rem 0.75rem 1rem;
  border: 1.5px solid var(--ts-paper-deep);
  border-radius: var(--ts-radius);
  background: white;
  font-family: var(--ts-font-sans);
  font-size: 0.93rem;
  color: var(--ts-ink);
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%237a6e68' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  cursor: pointer;
  transition: border-color var(--ts-transition);
}

#ts-root .ts-rule-select:focus {
  outline: none;
  border-color: var(--ts-accent);
}

#ts-root .ts-rule-output {
  margin-top: 1.5rem;
  padding: 1.5rem;
  background: var(--ts-ink);
  border-radius: var(--ts-radius);
  color: var(--ts-paper);
  font-family: var(--ts-font-serif);
  font-size: 1.05rem;
  line-height: 1.9;
  animation: ts-fadeIn 0.4s ease;
}

#ts-root .ts-rule-highlight {
  color: var(--ts-accent-light);
  font-weight: 700;
}

/* ── 共通ボタン ── */
#ts-root .ts-btn-primary {
  width: 100%;
  padding: 1rem;
  background: var(--ts-accent);
  color: white;
  border: none;
  border-radius: var(--ts-radius);
  font-family: var(--ts-font-serif);
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 1rem;
  transition: background var(--ts-transition), transform 0.15s ease;
  letter-spacing: 0.05em;
  will-change: transform;
}

#ts-root .ts-btn-primary:hover {
  background: #a84d20;
  transform: translateY(-1px);
}

#ts-root .ts-btn-primary:active {
  transform: translateY(0);
}

/* ================================================================
   17. Section F — 遊びカード
   ================================================================ */
#ts-root .ts-play-cards {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
  margin: 2rem 0;
}

#ts-root .ts-play-card {
  border: 1.5px solid var(--ts-paper-deep);
  border-radius: var(--ts-radius-md);
  padding: 1.5rem;
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  background: white;
  transition: border-color var(--ts-transition), box-shadow var(--ts-transition), transform 0.2s ease;
}

#ts-root .ts-play-card:hover {
  border-color: var(--ts-green);
  box-shadow: 0 4px 20px rgba(74,124,89,0.1);
  transform: translateY(-2px);
}

#ts-root .ts-play-card__emoji {
  font-size: 2rem;
  flex-shrink: 0;
  line-height: 1;
}

#ts-root .ts-play-card__content h4 {
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
  color: var(--ts-ink);
}

#ts-root .ts-play-card__content p {
  font-size: 0.88rem;
  color: var(--ts-ink-muted);
  margin: 0;
}

/* ── 遊び ミニフォーム ── */
#ts-root .ts-play-mini-form {
  background: var(--ts-green-pale);
  border-radius: var(--ts-radius-md);
  padding: 1.5rem;
  margin: 2rem 0;
}

#ts-root .ts-play-mini-form__title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--ts-green);
  margin-bottom: 0.8rem;
}

#ts-root .ts-play-mini-form__desc {
  font-size: 0.9rem;
  color: var(--ts-green);
  margin-bottom: 1rem;
}

#ts-root .ts-play-mini-form__label {
  font-size: 0.82rem;
  color: var(--ts-green);
  font-weight: 700;
  display: block;
  margin-bottom: 0.4rem;
}

#ts-root .ts-fun-goal-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--ts-green);
  border-radius: var(--ts-radius);
  background: white;
  font-family: var(--ts-font-sans);
  font-size: 0.93rem;
  color: var(--ts-ink);
  transition: border-color var(--ts-transition);
}

#ts-root .ts-fun-goal-input:focus {
  outline: none;
  border-color: var(--ts-ink);
}

/* ================================================================
   18. Section G — コミュニティ
   ================================================================ */
#ts-root .ts-community-story {
  background: var(--ts-blue-pale);
  border-radius: var(--ts-radius-md);
  padding: 2rem;
  margin: 2rem 0;
  position: relative;
  overflow: hidden;
}

#ts-root .ts-community-story::before {
  content: '人';
  position: absolute;
  right: -10px;
  top: -20px;
  font-size: 8rem;
  font-family: var(--ts-font-serif);
  color: rgba(58,95,124,0.06);
  font-weight: 900;
  pointer-events: none;
  line-height: 1;
}

#ts-root .ts-community-story p {
  position: relative;
  z-index: 1;
}

#ts-root .ts-community-steps {
  margin: 1.5rem 0;
  counter-reset: ts-community-step;
}

#ts-root .ts-community-steps li {
  counter-increment: ts-community-step;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.95rem;
  color: var(--ts-ink-soft);
}

#ts-root .ts-community-steps li::before {
  content: counter(ts-community-step);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ts-blue);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

#ts-root .ts-community-steps li span {
  font-size: 0.88rem;
  color: var(--ts-ink-muted);
}

#ts-root .ts-commit-area {
  background: white;
  border: 1.5px solid var(--ts-blue);
  border-radius: var(--ts-radius);
  padding: 1.2rem;
  margin-top: 1.5rem;
}

#ts-root .ts-commit-area label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ts-blue);
  display: block;
  margin-bottom: 0.5rem;
}

#ts-root .ts-commit-area input {
  width: 100%;
  border: none;
  background: transparent;
  font-family: var(--ts-font-sans);
  font-size: 0.95rem;
  color: var(--ts-ink);
  padding: 0.4rem 0;
}

#ts-root .ts-commit-area input:focus {
  outline: none;
}

/* ================================================================
   19. Section H — 公開メーター・パブリッシュフォーム
   ================================================================ */
#ts-root .ts-publish-meter {
  margin: 2rem 0;
  padding: 2rem;
  background: var(--ts-paper-warm);
  border-radius: var(--ts-radius-md);
}

#ts-root .ts-publish-meter__title {
  font-size: 1rem;
  color: var(--ts-ink);
  margin-bottom: 0.5rem;
  font-family: var(--ts-font-sans);
  font-weight: 700;
}

#ts-root .ts-publish-meter__desc {
  font-size: 0.88rem;
  color: var(--ts-ink-muted);
  margin-bottom: 0;
}

#ts-root input[type=range] {
  width: 100%;
  margin: 1rem 0 0.5rem;
  accent-color: var(--ts-accent);
  cursor: pointer;
  height: 4px;
}

#ts-root .ts-meter-track {
  height: 8px;
  background: var(--ts-paper-deep);
  border-radius: 4px;
  margin-bottom: 0.6rem;
  overflow: hidden;
}

#ts-root .ts-meter-fill {
  height: 100%;
  background: linear-gradient(to right, var(--ts-accent), var(--ts-gold));
  border-radius: 4px;
  transition: width 0.4s ease;
}

#ts-root .ts-meter-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.78rem;
  color: var(--ts-ink-muted);
}

#ts-root .ts-meter-label__value {
  color: var(--ts-accent);
  font-weight: 700;
}

#ts-root .ts-publish-form {
  margin-top: 1.5rem;
}

#ts-root .ts-publish-form__label {
  font-size: 0.9rem;
  font-weight: 700;
  margin-bottom: 0.8rem;
  color: var(--ts-ink);
}

#ts-root .ts-publish-form__textarea-label {
  display: block;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--ts-ink-muted);
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

#ts-root .ts-publish-choices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

#ts-root .ts-publish-choice {
  padding: 0.5rem 1rem;
  border: 1.5px solid var(--ts-paper-deep);
  border-radius: 20px;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--ts-ink-soft);
  background: white;
  font-family: var(--ts-font-sans);
  transition: all 0.2s;
}

#ts-root .ts-publish-choice.is-active {
  background: var(--ts-accent);
  border-color: var(--ts-accent);
  color: white;
  font-weight: 700;
}

#ts-root .ts-publish-textarea {
  width: 100%;
  min-height: 80px;
  border: 1.5px solid var(--ts-paper-deep);
  border-radius: var(--ts-radius);
  padding: 0.75rem 1rem;
  font-family: var(--ts-font-sans);
  font-size: 0.93rem;
  color: var(--ts-ink);
  background: white;
  resize: vertical;
  line-height: 1.8;
  transition: border-color var(--ts-transition);
}

#ts-root .ts-publish-textarea:focus {
  outline: none;
  border-color: var(--ts-accent);
}

/* ================================================================
   20. Section I — サマリーセクション（ダーク背景）
   ================================================================ */
#ts-root .ts-summary-section {
  background: var(--ts-ink);
  color: var(--ts-paper);
  padding-block: var(--ts-section-py);
}

#ts-root .ts-summary-inner {
  max-width: var(--ts-container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2rem);
}

#ts-root .ts-summary-intro {
  color: rgba(250,247,242,0.7);
  font-size: 1.05rem;
  line-height: 2;
  margin-bottom: 2.5rem;
}

#ts-root .ts-summary-list {
  margin: 2rem 0;
}

#ts-root .ts-summary-item {
  display: flex;
  gap: 1rem;
  margin-bottom: 1.5rem;
  align-items: flex-start;
}

#ts-root .ts-summary-num {
  width: 36px;
  height: 36px;
  border: 1.5px solid var(--ts-accent);
  border-radius: 50%;
  color: var(--ts-accent-light);
  font-family: var(--ts-font-serif);
  font-size: 0.9rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

#ts-root .ts-summary-text {
  padding-top: 0.5rem;
  color: rgba(250,247,242,0.8);
  font-size: 0.95rem;
}

#ts-root .ts-summary-text strong {
  color: var(--ts-paper);
  display: block;
  margin-bottom: 0.2rem;
}

/* ── 最終メッセージ ── */
#ts-root .ts-final-message {
  margin-top: 3rem;
  padding: 2rem;
  border: 1px solid rgba(196,96,42,0.3);
  border-radius: var(--ts-radius-md);
  text-align: center;
}

#ts-root .ts-final-message__big {
  font-family: var(--ts-font-serif);
  font-size: clamp(1.1rem, 3.5vw, 1.5rem);
  color: var(--ts-paper);
  font-weight: 700;
  line-height: 1.7;
  margin-bottom: 0.8rem;
}

#ts-root .ts-final-message__small {
  font-size: 0.88rem;
  color: rgba(250,247,242,0.5);
  margin: 0;
}

/* ── サマリー CTA ── */
#ts-root .ts-summary-cta {
  text-align: center;
  margin-top: 3rem;
  padding-top: 2.5rem;
  border-top: 1px solid rgba(196,96,42,0.2);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.8rem;
}

/* ================================================================
   21. Section J — レシピセクション
   ================================================================ */
#ts-root .ts-recipe-section {
  background: var(--ts-accent-pale);
  padding-block: var(--ts-section-py);
}

#ts-root .ts-recipe-inner {
  max-width: var(--ts-container-max);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 5vw, 2rem);
}

#ts-root .ts-recipe-card {
  background: white;
  border-radius: var(--ts-radius-lg);
  box-shadow: var(--ts-shadow-deep);
  overflow: hidden;
  margin: 2rem 0;
}

#ts-root .ts-recipe-card__header {
  background: var(--ts-accent);
  padding: 1.5rem 2rem;
  color: white;
}

#ts-root .ts-recipe-card__header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 0.2rem;
  color: white;
}

#ts-root .ts-recipe-card__header p {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.75);
  margin: 0;
}

#ts-root .ts-recipe-card__body {
  padding: 2rem;
}

#ts-root .ts-recipe-field {
  margin-bottom: 1.5rem;
}

#ts-root .ts-recipe-field__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ts-ink-muted);
  margin-bottom: 0.5rem;
}

#ts-root .ts-recipe-field__hint {
  font-size: 0.8rem;
  color: var(--ts-ink-muted);
  margin: 0.4rem 0 0;
  line-height: 1.6;
}

#ts-root .ts-recipe-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--ts-paper-deep);
  border-radius: var(--ts-radius);
  background: var(--ts-paper-warm);
  font-family: var(--ts-font-sans);
  font-size: 0.95rem;
  color: var(--ts-ink);
  transition: border-color var(--ts-transition), background var(--ts-transition);
}

#ts-root .ts-recipe-input:focus {
  outline: none;
  border-color: var(--ts-accent);
  background: white;
}

/* ── 生成ボタン ── */
#ts-root .ts-btn-generate {
  width: 100%;
  padding: 1.1rem;
  background: var(--ts-ink);
  color: var(--ts-paper);
  border: none;
  border-radius: var(--ts-radius);
  font-family: var(--ts-font-serif);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: background var(--ts-transition), transform 0.15s ease;
  letter-spacing: 0.05em;
  will-change: transform;
}

#ts-root .ts-btn-generate:hover {
  background: var(--ts-accent);
  transform: translateY(-1px);
}

#ts-root .ts-btn-generate:active {
  transform: translateY(0);
}

/* ── レシピ出力エリア ── */
#ts-root .ts-recipe-output {
  background: var(--ts-paper-warm);
  border: 1.5px dashed var(--ts-accent);
  border-radius: var(--ts-radius-md);
  padding: 1.5rem;
  margin-top: 1.5rem;
  animation: ts-fadeIn 0.4s ease;
}

#ts-root .ts-recipe-output__title {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ts-accent);
  margin-bottom: 1rem;
}

#ts-root .ts-recipe-line {
  font-family: var(--ts-font-serif);
  font-size: 1rem;
  color: var(--ts-ink);
  line-height: 2.1;
}

#ts-root .ts-recipe-line strong {
  color: var(--ts-accent);
}

#ts-root .ts-recipe-encouragement {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--ts-accent);
  border-radius: var(--ts-radius-md);
  color: white;
  text-align: center;
  font-family: var(--ts-font-serif);
  font-size: 1rem;
  font-weight: 700;
  animation: ts-fadeIn 0.4s ease;
}

/* ── レシピ締め ── */
#ts-root .ts-recipe-closing {
  text-align: center;
  margin-top: 3rem;
  padding-inline: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}

#ts-root .ts-recipe-closing__main {
  font-family: var(--ts-font-serif);
  font-size: clamp(1.1rem, 3.5vw, 1.2rem);
  color: var(--ts-ink);
  line-height: 2;
  font-weight: 700;
}

#ts-root .ts-recipe-closing__sub {
  font-size: 0.88rem;
  color: var(--ts-ink-muted);
  margin: 0.2rem 0 0;
}

/* ── 参考文献 ── */
#ts-root .ts-references {
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid rgba(26,20,16,0.1);
  text-align: center;
  color: var(--ts-ink-muted);
  font-size: 0.75rem;
  line-height: 2;
}

#ts-root .ts-references p {
  color: inherit;
  font-size: inherit;
  margin-bottom: 0.3rem;
}

#ts-root .ts-references__note {
  opacity: 0.6;
}

/* ================================================================
   22. アニメーション
   ================================================================ */
@keyframes ts-fadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0);    }
}

/* ================================================================
   23. レスポンシブ — タブレット（768px〜）
   ================================================================ */
@media (min-width: 768px) {
  #ts-root .ts-play-cards {
    grid-template-columns: 1fr 1fr;
  }

  #ts-root .ts-model-item {
    padding: 1.25rem 1rem;
  }

  #ts-root .ts-hero__title {
    font-size: clamp(3rem, 6vw, 4.8rem);
  }

  #ts-root .ts-cards-grid {
    grid-template-columns: 1fr 1fr;
  }

  #ts-root .ts-recipe-card__body {
    padding: 2.5rem;
  }
}

/* ================================================================
   24. レスポンシブ — デスクトップ（1024px〜）
   ================================================================ */
@media (min-width: 1024px) {
  #ts-root .ts-section {
    padding-inline: 0;
  }

  #ts-root .ts-recipe-inner {
    padding-inline: 0;
  }

  #ts-root .ts-summary-inner {
    padding-inline: 0;
  }

  #ts-root .ts-play-cards {
    grid-template-columns: 1fr 1fr;
  }
}

/* ================================================================
   25. レスポンシブ — スマートフォン（480px以下）
   ================================================================ */
@media (max-width: 480px) {
  #ts-root .ts-model-row {
    flex-direction: column;
    gap: 0.6rem;
  }

  #ts-root .ts-model-arrow {
    transform: rotate(90deg);
    padding: 0;
    align-self: center;
  }

  #ts-root .ts-numbers-row {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  #ts-root .ts-hero__title {
    font-size: clamp(1.9rem, 8vw, 2.8rem);
  }

  #ts-root .ts-recipe-card__body {
    padding: 1.25rem;
  }

  #ts-root .ts-rule-maker {
    padding: 1.25rem;
  }

  #ts-root .ts-callout {
    flex-direction: column;
    gap: 0.5rem;
  }

  .ts-nav-pill {
    bottom: 1rem;
    right: 1rem;
  }

  .ts-nav-pill a {
    width: 40px;
    height: 40px;
  }
}

/* ================================================================
   26. 記事内画像ブロック（ts-article-image）
   ================================================================ */
#ts-root .ts-article-image {
  margin: 3rem 0;
  border-radius: var(--ts-radius-md);
  overflow: hidden;
  position: relative;
  line-height: 0; /* figcaption との間隔制御 */
}

#ts-root .ts-article-image img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  display: block;
  border-radius: var(--ts-radius-md);
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
  vertical-align: bottom;
}

#ts-root .ts-article-image:hover img {
  transform: scale(1.018);
}

#ts-root .ts-article-image__caption {
  display: block;
  text-align: center;
  font-size: 0.73rem;
  color: var(--ts-ink-muted);
  margin-top: 0.65rem;
  letter-spacing: 0.06em;
  line-height: 1.7;
  font-style: italic;
  font-family: var(--ts-font-serif);
}

/* ── 画像①: Hero直後フルブレイクアウト ── */
#ts-root .ts-article-image--full {
  margin-top: 0;
  margin-bottom: 0;
  border-radius: 0;
  max-height: clamp(220px, 35vw, 400px);
}

#ts-root .ts-article-image--full img {
  border-radius: 0;
  max-height: clamp(220px, 35vw, 400px);
  object-position: center 35%;
}

#ts-root .ts-article-image--full .ts-article-image__caption {
  padding-block: 0.8rem 1.2rem;
  background: var(--ts-paper);
}

/* ── 画像⑤: レシピセクション内（accent-pale背景） ── */
#ts-root .ts-article-image--recipe {
  box-shadow: var(--ts-shadow-deep);
  margin-bottom: 3rem;
}

/* ── サマリーセクション内（ダーク背景）での調整 ── */
#ts-root .ts-summary-section .ts-article-image__caption {
  color: rgba(250, 247, 242, 0.45);
  line-height: 1.6;
}

/* ── スマホ対応 ── */
@media (max-width: 480px) {
  #ts-root .ts-article-image {
    margin-block: 2rem;
    border-radius: var(--ts-radius);
  }

  #ts-root .ts-article-image--full {
    margin-inline: -1.25rem;
    max-height: clamp(160px, 50vw, 240px);
    border-radius: 0;
  }

  #ts-root .ts-article-image--full img {
    max-height: clamp(160px, 50vw, 240px);
  }
}