/* ============================================================
   RINKA Design System — rinka-design-system.css
   基準実装: AI Image Toolkit（Creator Mode）
   ------------------------------------------------------------
   - トークンは --rds-* プレフィックス。main.css の --rinka-*（ファン
     サイト側）とは衝突させず、フォントだけ継承する。
   - Creator Mode の気分: Professional / Calm / Minimal / Precise。
     「AIイラストを作る人の、静かな作業台」。
   - 装飾原則: 影よりヘアライン。グラデーションは主ボタンの1箇所だけ。
     角丸はファンサイト(24px)より角ばらせて空気を切り替える。
   - Prompt・数値・ファイル名などの「データ」は必ず mono で組む。
   - ドキュメント: docs/RINKA_DESIGN_SYSTEM.md / docs/COMPONENT_USAGE.md
   ============================================================ */

/* ------------------------------------------------------------
   ① Design Tokens
   ---------------------------------------------------------- */
:root {
  /* --- 色: プラムがかったニュートラル（青グレー禁止） --- */
  --rds-ink:        #3b2b34;  /* 見出し・本文の主色 */
  --rds-ink-soft:   #7c6672;  /* 補足・キャプション */
  --rds-ink-faint:  #a893a0;  /* さらに弱い注記・placeholder */
  --rds-paper:      #faf8f9;  /* ページ地 */
  --rds-surface:    #ffffff;  /* カード・パネル地 */
  --rds-surface-2:  #f6f1f4;  /* 淡い区画・コードチップ地 */
  --rds-line:       #eadfe6;  /* ヘアライン（標準の区切り） */
  --rds-line-strong:#d9c6d2;  /* 強調ヘアライン */

  /* --- アクセント: 深いローズ（ファンピンクの"仕事モード"） --- */
  --rds-accent:        #c2568c;
  --rds-accent-strong: #a63f75;
  --rds-accent-soft:   #f9eef4;
  --rds-accent-line:   #ecc7da;

  /* --- 機能色（既存ヒント配色と整合） --- */
  --rds-ok:        #2e7d5b;
  --rds-ok-soft:   #ecf9f3;
  --rds-warn:      #9a6b1e;
  --rds-warn-soft: #fff7e8;
  --rds-danger:      #b3403f;
  --rds-danger-soft: #fdeeee;

  /* --- フォーカスリング --- */
  --rds-focus: #e8a3c6;

  /* --- タイポグラフィ --- */
  --rds-font:       var(--rinka-font, "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif);
  --rds-font-latin: var(--rinka-font-latin, "Quicksand", sans-serif);
  --rds-font-mono:  ui-monospace, "Cascadia Code", Consolas, "Courier New", monospace;

  --rds-text-xs:  0.75rem;
  --rds-text-sm:  0.85rem;
  --rds-text-md:  0.95rem;
  --rds-text-lg:  1.15rem;
  --rds-text-xl:  1.45rem;
  --rds-text-2xl: 1.9rem;

  /* --- スペーシング（4pxベース） --- */
  --rds-space-1: 4px;
  --rds-space-2: 8px;
  --rds-space-3: 12px;
  --rds-space-4: 16px;
  --rds-space-5: 24px;
  --rds-space-6: 32px;
  --rds-space-7: 48px;
  --rds-space-8: 64px;

  /* --- 角丸: ファンサイト(24px)より角ばらせる --- */
  --rds-radius-sm:  8px;
  --rds-radius-md:  12px;
  --rds-radius-lg:  16px;
  --rds-radius-pill: 999px;

  /* --- 影: 控えめ2段。基本はヘアラインで区切る --- */
  --rds-shadow-1: 0 1px 2px rgba(59, 43, 52, 0.06);
  --rds-shadow-2: 0 8px 24px rgba(59, 43, 52, 0.10);

  /* --- タッチターゲット --- */
  --rds-tap: 44px;

  /* --- z-index スケール（固定値・場当たり z-index 禁止） --- */
  --rds-z-raised:  10;   /* カード内バッジ等 */
  --rds-z-sticky:  100;  /* 追従バー */
  --rds-z-overlay: 500;  /* パネル・ドロワー */
  --rds-z-toast:   900;  /* 通知 */
}

/* ------------------------------------------------------------
   ② ベース・ユーティリティ
   ---------------------------------------------------------- */
.rds-icon {
  display: inline-block;
  width: 1.15em;
  height: 1.15em;
  vertical-align: -0.2em;
  flex: none;
}
.rds-icon--emoji { font-style: normal; line-height: 1; }

.rds-mono {
  font-family: var(--rds-font-mono);
  font-size: 0.92em;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

/* 数値・データは桁が揃ってこそ比較できる（baseline-ui / WIG: tabular-nums） */
.rds-preview code,
.rds-preview__meter code { font-variant-numeric: tabular-nums; }

/* 見出しは widow を作らない・本文は読みやすい折返し（WIG: text-wrap） */
.rds-section-head h2,
.rds-hero .rinka-tk-head h1,
.rds-featured__name,
.rds-empty__title { text-wrap: balance; }
.rds-hero__who,
.rds-card__desc,
.rds-featured__desc,
.rds-section-head .rds-section-desc,
.rds-empty__body { text-wrap: pretty; }

/* ダブルタップズーム遅延の除去（WIG: touch-action） */
.rds-btn,
a.rds-card,
.rds-nav__link,
a.rds-rail__step,
.rds-featured__card,
.rinka-tk-tool,
.rinka-tk-goal { touch-action: manipulation; }

/* アンカー遷移時に見出しが上に張り付かないように（WIG: scroll-margin-top） */
#rinka-tk-goal,
#rinka-tk-recent,
#rinka-tk-fav { scroll-margin-top: var(--rds-space-7); }

/* 下部パネルのスクロール連鎖を止める（WIG: overscroll-behavior） */
#rinka-tk-history-panel,
#rinka-tk-menu-panel { overscroll-behavior: contain; }

.rds-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* キーボードフォーカス（共通） */
.rds-btn:focus-visible,
.rds-card:focus-visible,
.rds-input:focus-visible,
a.rds-rail__step:focus-visible,
.rds-hero__actions a:focus-visible {
  outline: 3px solid var(--rds-focus);
  outline-offset: 2px;
  border-radius: var(--rds-radius-sm);
}

/* ------------------------------------------------------------
   ③ Layout: グリッド / スタック
   ---------------------------------------------------------- */
.rds-stack   { display: flex; flex-direction: column; gap: var(--rds-space-4); }
.rds-stack--tight { gap: var(--rds-space-2); }
.rds-stack--loose { gap: var(--rds-space-6); }

.rds-grid { display: grid; gap: var(--rds-space-4); }
.rds-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rds-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) {
  .rds-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
  .rds-grid--2, .rds-grid--3 { grid-template-columns: minmax(0, 1fr); }
}

/* セクション見出し（eyebrow + タイトル + 説明） */
.rds-section-head { margin: 0 0 var(--rds-space-4); }
.rds-section-head .rds-eyebrow {
  display: block;
  font-family: var(--rds-font-latin);
  font-size: var(--rds-text-xs);
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--rds-accent);
  margin-bottom: var(--rds-space-1);
}
.rds-section-head h2 {
  margin: 0;
  font-size: var(--rds-text-xl);
  color: var(--rds-ink);
  line-height: 1.35;
}
.rds-section-head .rds-section-desc {
  margin: var(--rds-space-2) 0 0;
  font-size: var(--rds-text-sm);
  color: var(--rds-ink-soft);
}

/* ------------------------------------------------------------
   ④ Shared Buttons
   ---------------------------------------------------------- */
.rds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--rds-space-2);
  min-height: var(--rds-tap);
  padding: 10px 20px;
  border-radius: var(--rds-radius-md);
  border: 1px solid transparent;
  font-family: var(--rds-font);
  font-size: var(--rds-text-md);
  font-weight: 700;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.rds-btn .rds-icon { width: 1.05em; height: 1.05em; }

/* 主ボタン: サイト内で唯一グラデーションを許す場所 */
.rds-btn--primary {
  background: linear-gradient(135deg, var(--rds-accent), var(--rds-accent-strong));
  color: #fff;
  box-shadow: var(--rds-shadow-1);
}
.rds-btn--primary:hover {
  color: #fff;
  transform: translateY(-1px);
  box-shadow: var(--rds-shadow-2);
}

/* 副ボタン: 白地＋ヘアライン */
.rds-btn--ghost {
  background: var(--rds-surface);
  border-color: var(--rds-line-strong);
  color: var(--rds-ink);
}
.rds-btn--ghost:hover {
  border-color: var(--rds-accent);
  color: var(--rds-accent-strong);
  background: var(--rds-accent-soft);
}

/* 静かなリンク風ボタン */
.rds-btn--quiet {
  background: transparent;
  color: var(--rds-ink-soft);
  padding-left: var(--rds-space-2);
  padding-right: var(--rds-space-2);
}
.rds-btn--quiet:hover { color: var(--rds-accent-strong); background: var(--rds-accent-soft); }

.rds-btn--sm { min-height: 36px; padding: 6px 14px; font-size: var(--rds-text-sm); }

/* ------------------------------------------------------------
   ⑤ Shared Cards
   ---------------------------------------------------------- */
.rds-card {
  display: block;
  background: var(--rds-surface);
  border: 1px solid var(--rds-line);
  border-radius: var(--rds-radius-lg);
  padding: var(--rds-space-4) var(--rds-space-4);
  color: var(--rds-ink);
  text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
a.rds-card:hover {
  border-color: var(--rds-accent-line);
  box-shadow: var(--rds-shadow-2);
  transform: translateY(-2px);
  color: var(--rds-ink);
}
.rds-card__title {
  display: flex;
  align-items: center;
  gap: var(--rds-space-2);
  font-weight: 700;
  font-size: var(--rds-text-md);
  color: var(--rds-ink);
}
.rds-card__title .rds-icon { color: var(--rds-accent); }
.rds-card__desc {
  margin: var(--rds-space-2) 0 0;
  font-size: var(--rds-text-sm);
  color: var(--rds-ink-soft);
  line-height: 1.6;
}

/* ------------------------------------------------------------
   ⑥ Shared Forms
   ---------------------------------------------------------- */
.rds-field { display: flex; flex-direction: column; gap: var(--rds-space-1); }
.rds-field__label {
  font-size: var(--rds-text-sm);
  font-weight: 700;
  color: var(--rds-ink);
}
.rds-field__help { font-size: var(--rds-text-xs); color: var(--rds-ink-soft); margin: 0; }
.rds-input {
  min-height: var(--rds-tap);
  padding: 8px 14px;
  border: 1px solid var(--rds-line-strong);
  border-radius: var(--rds-radius-md);
  background: var(--rds-surface);
  color: var(--rds-ink);
  font-family: var(--rds-font);
  font-size: var(--rds-text-md);
}
.rds-input::placeholder { color: var(--rds-ink-faint); }
.rds-input:focus {
  border-color: var(--rds-accent);
  outline: 3px solid var(--rds-focus);
  outline-offset: 1px;
}

/* ------------------------------------------------------------
   ⑦ Shared Navigation（水平ナビ・タブ列）
   ---------------------------------------------------------- */
.rds-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rds-space-2);
  align-items: center;
}
.rds-nav__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 40px;
  padding: 6px 14px;
  border-radius: var(--rds-radius-pill);
  border: 1px solid var(--rds-line);
  background: var(--rds-surface);
  color: var(--rds-ink-soft);
  font-size: var(--rds-text-sm);
  font-weight: 700;
  text-decoration: none;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.rds-nav__link:hover { color: var(--rds-accent-strong); border-color: var(--rds-accent-line); }
.rds-nav__link.is-active {
  background: var(--rds-ink);
  border-color: var(--rds-ink);
  color: #fff;
}

/* ------------------------------------------------------------
   ⑧ Empty / Error States
   ---------------------------------------------------------- */
.rds-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rds-space-2);
  padding: var(--rds-space-6) var(--rds-space-4);
  border: 1px dashed var(--rds-line-strong);
  border-radius: var(--rds-radius-lg);
  background: var(--rds-surface);
  text-align: center;
}
.rds-empty__icon { width: 28px; height: 28px; color: var(--rds-ink-faint); }
.rds-empty__title { margin: 0; font-weight: 700; color: var(--rds-ink); font-size: var(--rds-text-md); }
.rds-empty__body { margin: 0; color: var(--rds-ink-soft); font-size: var(--rds-text-sm); }

.rds-error {
  padding: var(--rds-space-3) var(--rds-space-4);
  border: 1px solid #f2c9c9;
  border-left: 4px solid var(--rds-danger);
  border-radius: var(--rds-radius-md);
  background: var(--rds-danger-soft);
}
.rds-error__title { margin: 0; font-weight: 700; color: var(--rds-danger); font-size: var(--rds-text-sm); }
.rds-error__howto { margin: var(--rds-space-1) 0 0; color: var(--rds-ink); font-size: var(--rds-text-sm); }

/* ------------------------------------------------------------
   ⑨ Hero（作業台の入口）
   ---------------------------------------------------------- */
.rds-hero {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: var(--rds-space-6);
  align-items: center;
  padding: var(--rds-space-6) var(--rds-space-5);
  margin: 0 0 var(--rds-space-6);
  background: var(--rds-surface);
  border: 1px solid var(--rds-line);
  border-radius: var(--rds-radius-lg);
  position: relative;
  overflow: hidden;
}
/* さりげないりんかブランディング: 上辺のローズヘアラインだけ */
.rds-hero::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--rds-accent), var(--rds-accent-line) 70%, transparent);
}
.rds-hero__copy { min-width: 0; }

/* 既存 .rinka-tk-head（中央寄せ）を Hero 内では左寄せに */
.rds-hero .rinka-tk-head { text-align: left; margin: 0 0 var(--rds-space-4); }
.rds-hero .rinka-tk-head h1 { font-size: var(--rds-text-2xl); line-height: 1.3; }

.rds-hero__who {
  margin: 0 0 var(--rds-space-4);
  color: var(--rds-ink-soft);
  font-size: var(--rds-text-md);
  line-height: 1.7;
}
.rds-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--rds-space-2);
  align-items: center;
}

/* --- 実物風ツールプレビュー（AI Critique の縮図・装飾画は使わない） --- */
.rds-preview {
  border: 1px solid var(--rds-line);
  border-radius: var(--rds-radius-md);
  background: var(--rds-paper);
  box-shadow: var(--rds-shadow-1);
  overflow: hidden;
  font-size: var(--rds-text-xs);
}
.rds-preview__bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--rds-line);
  background: var(--rds-surface);
}
.rds-preview__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rds-line-strong); }
.rds-preview__title {
  margin-left: 6px;
  font-family: var(--rds-font-latin);
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--rds-ink-soft);
}
.rds-preview__body {
  display: grid;
  grid-template-columns: 5fr 6fr;
  gap: var(--rds-space-3);
  padding: var(--rds-space-3);
}
.rds-preview__img {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  aspect-ratio: 3 / 4;
  border-radius: var(--rds-radius-sm);
  border: 1px solid var(--rds-line);
  background:
    linear-gradient(160deg, #f7e6ef 0%, #efd9e6 45%, #e3cadb 100%);
  color: var(--rds-ink-soft);
}
.rds-preview__img span { font-weight: 700; }
.rds-preview__img code { font-family: var(--rds-font-mono); color: var(--rds-ink-faint); }
.rds-preview__meters { display: flex; flex-direction: column; gap: 8px; justify-content: center; min-width: 0; }
.rds-preview__meter {
  display: grid;
  grid-template-columns: 4.5em 1fr 2em;
  align-items: center;
  gap: 8px;
  color: var(--rds-ink-soft);
}
.rds-preview__meter i {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: var(--rds-surface-2);
  position: relative;
  overflow: hidden;
}
.rds-preview__meter i::after {
  content: "";
  position: absolute;
  inset: 0;
  width: var(--v, 60%);
  border-radius: 999px;
  background: var(--rds-accent);
  opacity: .75;
}
.rds-preview__meter code { font-family: var(--rds-font-mono); text-align: right; color: var(--rds-ink); }
.rds-preview__verdict {
  margin: 4px 0 0;
  padding: 6px 10px;
  border-radius: var(--rds-radius-sm);
  background: var(--rds-ok-soft);
  color: var(--rds-ok);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* --- タブ付きプレビュー（Hero: 1ツールずつ大きく切替表示） --- */
.rds-preview__tabs {
  display: flex;
  gap: 4px;
  margin-left: auto;
}
.rds-preview__tab {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 999px;
  padding: 3px 10px;
  font: inherit;
  font-size: var(--rds-text-xs);
  font-weight: 700;
  color: var(--rds-ink-faint);
  cursor: pointer;
  transition: color .15s ease, background-color .15s ease, border-color .15s ease;
}
.rds-preview__tab:hover { color: var(--rds-ink-soft); }
.rds-preview__tab.is-active {
  color: var(--rds-accent-strong);
  background: var(--rds-accent-soft);
  border-color: var(--rds-accent-line);
}
.rds-preview__tab:focus-visible {
  outline: 2px solid var(--rds-accent);
  outline-offset: 2px;
}
.rds-preview__panel[hidden] { display: none; }

/* Panel 2: Visual Prompt Builder モック */
.rds-preview__build {
  display: flex;
  flex-direction: column;
  gap: var(--rds-space-2);
  padding: var(--rds-space-3);
}
.rds-preview__buildhint { margin: 0; color: var(--rds-ink-soft); font-weight: 700; }
.rds-preview__chips { display: flex; flex-wrap: wrap; gap: 6px; }
.rds-preview__chip {
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--rds-line);
  background: var(--rds-surface);
  color: var(--rds-ink-soft);
  font-family: var(--rds-font-mono);
  font-size: var(--rds-text-xs);
}
.rds-preview__chip.is-on {
  border-color: var(--rds-accent-line);
  background: var(--rds-accent-soft);
  color: var(--rds-accent-strong);
  font-weight: 700;
}
.rds-preview__chip--add {
  font-family: var(--rds-font-latin);
  color: var(--rds-ink-faint);
  border-style: dashed;
}
.rds-preview__mono {
  display: block;
  padding: 8px 10px;
  border-radius: var(--rds-radius-sm);
  background: var(--rds-surface);
  border: 1px solid var(--rds-line);
  font-family: var(--rds-font-mono);
  font-size: var(--rds-text-xs);
  color: var(--rds-ink-soft);
  overflow-wrap: anywhere;
}

/* Panel 3: Crop Simulator モック */
.rds-preview__crop {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--rds-space-2);
  padding: var(--rds-space-3);
  align-items: end;
}
.rds-preview__cropcell {
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.rds-preview__cropframe {
  width: 100%;
  border-radius: var(--rds-radius-sm);
  border: 2px solid var(--rds-accent-line);
  background: linear-gradient(160deg, #f7e6ef 0%, #efd9e6 45%, #e3cadb 100%);
  position: relative;
  overflow: hidden;
}
.rds-preview__cropframe::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 46%;
  height: 68%;
  transform: translateX(-50%);
  border-radius: 999px 999px 0 0;
  background: var(--rds-accent);
  opacity: .35;
}
.rds-preview__cropframe--45  { aspect-ratio: 4 / 5; }
.rds-preview__cropframe--169 { aspect-ratio: 16 / 9; }
.rds-preview__cropframe--11  { aspect-ratio: 1 / 1; }
.rds-preview__cropcell figcaption {
  font-family: var(--rds-font-mono);
  font-size: var(--rds-text-xs);
  color: var(--rds-ink-faint);
}

/* ------------------------------------------------------------
   ⑩ Workflow Rail（シグネチャ要素）
   制作パイプラインを1本のヘアラインでつなぐ。各ノード＝実ツール。
   ---------------------------------------------------------- */
.rds-rail {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  counter-reset: rds-rail;
}
.rds-rail li { position: relative; min-width: 0; }
/* ノード間コネクタ */
.rds-rail li + li::before {
  content: "";
  position: absolute;
  top: 27px;
  left: calc(-50% + 22px);
  width: calc(100% - 44px);
  height: 2px;
  background: var(--rds-accent-line);
}
.rds-rail__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--rds-space-2);
  padding: var(--rds-space-2) var(--rds-space-1);
  text-decoration: none;
  text-align: center;
  border-radius: var(--rds-radius-md);
  min-height: var(--rds-tap);
}
.rds-rail__node {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 54px; height: 54px;
  border-radius: 50%;
  border: 2px solid var(--rds-accent-line);
  background: var(--rds-surface);
  color: var(--rds-accent-strong);
  transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.rds-rail__node .rds-icon { width: 22px; height: 22px; }
.rds-rail__step:hover .rds-rail__node {
  border-color: var(--rds-accent);
  background: var(--rds-accent-soft);
  transform: translateY(-2px);
}
.rds-rail__label {
  font-size: var(--rds-text-xs);
  font-weight: 700;
  color: var(--rds-ink);
  line-height: 1.4;
}
.rds-rail__sub {
  font-size: var(--rds-text-xs);
  color: var(--rds-ink-faint);
  line-height: 1.3;
}
/* 最終ノード（投稿）はOK色 */
.rds-rail li:last-child .rds-rail__node {
  border-color: var(--rds-ok);
  color: var(--rds-ok);
}
@media (max-width: 900px) {
  .rds-rail {
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .rds-rail li + li::before {
    top: calc(-1 * var(--rds-space-1));
    left: 29px;
    width: 2px;
    height: var(--rds-space-1);
  }
  .rds-rail__step {
    flex-direction: row;
    text-align: left;
    width: 100%;
    padding: var(--rds-space-1) var(--rds-space-2);
  }
  .rds-rail__node { width: 44px; height: 44px; flex: none; }
  .rds-rail__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
}
@media (min-width: 901px) {
  .rds-rail__text { display: contents; }
}

/* ------------------------------------------------------------
   ⑪ Featured Tools（3枚だけ大きく）
   ---------------------------------------------------------- */
.rds-featured {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--rds-space-4);
}
@media (max-width: 900px) { .rds-featured { grid-template-columns: minmax(0, 1fr); } }
.rds-featured__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--rds-space-2);
  padding: var(--rds-space-5);
  background: var(--rds-surface);
  border: 1px solid var(--rds-line);
  border-radius: var(--rds-radius-lg);
  text-decoration: none;
  color: var(--rds-ink);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.rds-featured__card:hover {
  border-color: var(--rds-accent-line);
  box-shadow: var(--rds-shadow-2);
  transform: translateY(-2px);
  color: var(--rds-ink);
}
.rds-featured__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px; height: 48px;
  border-radius: var(--rds-radius-md);
  background: var(--rds-accent-soft);
  color: var(--rds-accent-strong);
}
.rds-featured__icon .rds-icon { width: 24px; height: 24px; }
.rds-featured__name { font-size: var(--rds-text-lg); font-weight: 700; margin: 0; }
.rds-featured__desc { margin: 0; font-size: var(--rds-text-sm); color: var(--rds-ink-soft); line-height: 1.7; flex: 1 1 auto; }
.rds-featured__points {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-direction: column; gap: 4px;
  font-size: var(--rds-text-xs); color: var(--rds-ink-soft);
}
.rds-featured__points li { display: flex; align-items: center; gap: 6px; }
.rds-featured__points .rds-icon { color: var(--rds-ok); width: 14px; height: 14px; }
.rds-featured__go {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--rds-text-sm);
  font-weight: 700;
  color: var(--rds-accent-strong);
}
.rds-featured__badge {
  position: absolute;
  top: var(--rds-space-3);
  right: var(--rds-space-3);
  padding: 2px 10px;
  border-radius: var(--rds-radius-pill);
  background: var(--rds-accent-soft);
  border: 1px solid var(--rds-accent-line);
  color: var(--rds-accent-strong);
  font-size: var(--rds-text-xs);
  font-weight: 700;
}

/* コンパクトツール行（Featured以外） */
.rds-tool-row {
  display: flex;
  align-items: center;
  gap: var(--rds-space-3);
  min-height: var(--rds-tap);
}
.rds-tool-row .rds-icon { color: var(--rds-accent); width: 20px; height: 20px; }
.rds-tool-row strong { flex: none; font-size: var(--rds-text-md); }
.rds-tool-row__desc {
  flex: 1 1 auto;
  min-width: 0;               /* flex子のはみ出し防止（WIG: min-w-0） */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--rds-text-sm);
  color: var(--rds-ink-soft);
}
.rds-tool-row__arrow { margin-left: auto; color: var(--rds-ink-faint); flex: none; }
a.rds-tool-row:hover .rds-tool-row__arrow { color: var(--rds-accent-strong); }
@media (max-width: 600px) {
  .rds-tool-row { flex-wrap: wrap; }
  .rds-tool-row__desc { white-space: normal; flex-basis: 100%; order: 4; }
}

/* ------------------------------------------------------------
   ⑫ Reduced Motion
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .rds-btn, .rds-card, .rds-featured__card,
  .rds-rail__step, .rds-rail__node, .rds-nav__link {
    transition: none !important;
  }
  .rds-btn--primary:hover, a.rds-card:hover,
  .rds-featured__card:hover, .rds-rail__step:hover .rds-rail__node {
    transform: none !important;
  }
}

/* ------------------------------------------------------------
   ⑬ 狭幅調整
   ---------------------------------------------------------- */
@media (max-width: 900px) {
  .rds-hero { grid-template-columns: minmax(0, 1fr); padding: var(--rds-space-5) var(--rds-space-4); }
  .rds-hero .rinka-tk-head h1 { font-size: var(--rds-text-xl); }
}
@media (max-width: 480px) {
  .rds-hero__actions { flex-direction: column; align-items: stretch; }
  .rds-hero__actions .rds-btn { width: 100%; }
  .rds-preview__body { grid-template-columns: 1fr; }
  .rds-preview__img { aspect-ratio: 16 / 10; }
}

/* ============================================================
   RDS v2.6 拡張（2026-07-17・追記のみ / 既存トークン・クラスは不変更）
   内容: トークン拡張 / ボタン6種の完成 / 役割別カード /
         SVGアイコン基準 / 更新日表記 / ローディング状態
   ============================================================ */

/* ---------- v2.6 トークン拡張（新規のみ） ---------- */
:root {
  --rds-accent-soft-2: #f3dcea;                 /* accent-soft より一段濃い面（hover用） */
  --rds-ok-soft: #eaf6ef;                       /* Success 面 */
  --rds-warn-soft: #fdf3e4;                     /* Warning 面 */
  --rds-danger-soft: #fdecef;                   /* Error 面 */
  --rds-ok-strong: #2e7d54;                     /* Success 文字（白面でAA） */
  --rds-warn-strong: #9a6200;                   /* Warning 文字（白面でAA） */
  --rds-danger-strong: #b3364d;                 /* Error 文字（白面でAA） */
}

/* ---------- v2.6 SVGアイコン基準（rinka_rds_icon 出力） ---------- */
.rds-icon {
  display: inline-block;
  vertical-align: -0.18em;                       /* テキストベースラインに揃える */
  flex: 0 0 auto;
}
.rds-icon--loader { animation: rds-spin 1s linear infinite; }
@keyframes rds-spin { to { transform: rotate(360deg); } }

/* ---------- v2.6 ボタン6種の完成（既存 --primary / --ghost はそのまま） ----------
   Primary   = .rds-btn--primary（既存・唯一のグラデーション）
   Secondary = .rds-btn--secondary（白面＋ヘアライン・標準の第2動作）
   Ghost     = .rds-btn--ghost（既存・枠のみ）
   Text      = .rds-btn--text（面なし・行内アクション）
   Danger    = .rds-btn--danger（破壊的操作の確定時のみ）
   Success   = .rds-btn--success（完了・保存の確定時のみ） */
.rds-btn--secondary {
  background: var(--rds-surface);
  color: var(--rds-accent-strong);
  border: 1px solid var(--rds-line-strong);
  box-shadow: var(--rds-shadow-1);
}
.rds-btn--secondary:hover {
  border-color: var(--rds-accent-line);
  background: var(--rds-accent-soft);
}
.rds-btn--text {
  background: transparent;
  color: var(--rds-accent-strong);
  border: 1px solid transparent;
  box-shadow: none;
  padding-left: var(--rds-space-2);
  padding-right: var(--rds-space-2);
}
.rds-btn--text:hover { background: var(--rds-accent-soft); }
.rds-btn--danger {
  background: var(--rds-surface);
  color: var(--rds-danger-strong);
  border: 1px solid var(--rds-danger-strong);
  box-shadow: none;
}
.rds-btn--danger:hover { background: var(--rds-danger-soft); }
.rds-btn--success {
  background: var(--rds-surface);
  color: var(--rds-ok-strong);
  border: 1px solid var(--rds-ok-strong);
  box-shadow: none;
}
.rds-btn--success:hover { background: var(--rds-ok-soft); }
.rds-btn .rds-icon { margin-right: 2px; }

/* ---------- v2.6 役割別カード（.rds-card 追加バリアント） ----------
   Tool        = 一覧の主役。hoverで持ち上がる（既存 .rinka-tk-tool と同格の新形） 
   Feature     = 説明・特徴。静的でフラット
   CTA         = 誘導。accent面で1画面に1〜2枚まで
   Information = 注記・補足。線のみ・最小主張 */
.rds-card--tool { cursor: pointer; }
.rds-card--tool:hover {
  transform: translateY(-2px);
  border-color: var(--rds-accent-line);
  box-shadow: var(--rds-shadow-2);
}
.rds-card--feature {
  box-shadow: none;
  background: var(--rds-surface-2);
}
.rds-card--cta {
  background: var(--rds-accent-soft);
  border-color: var(--rds-accent-line);
}
.rds-card--info {
  box-shadow: none;
  background: transparent;
  border-style: dashed;
  color: var(--rds-ink-soft);
}

/* ---------- v2.6 更新日表記（SEO: 最終更新の可視化） ---------- */
.rds-updated {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: var(--rds-space-2) 0 0;
  font-size: var(--rds-text-xs);
  color: var(--rds-ink-faint);
}
.rds-updated time { font-variant-numeric: tabular-nums; }

/* ---------- v2.6 ローディング状態（subtle・reduced-motion対応） ---------- */
.rds-loading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--rds-ink-soft);
  font-size: var(--rds-text-sm);
}

/* ---------- v2.6 reduced-motion（新規アニメーションのガード） ---------- */
@media (prefers-reduced-motion: reduce) {
  .rds-icon--loader { animation: none; }
  .rds-card--tool:hover { transform: none; }
}