/* Kaname 伴走UI（連続記録・今日の一歩・獲得バッジ）。
   member.html / roadmap.html の主導線に“従属”する小さな帯。
   上品な和モダン・kt-* トークン流用・390px基準（新規 width:100% リテラル無し）。
   タップ44px確保・prefers-reduced-motion 尊重・非断定（保証/煽りなし）。
   サーバ契約（未実装でも崩れない）:
     kt_streak(int連続日数) / kt_step_done_today(bool) / kt_badges([{emoji,label}]) */

.kt-streak {
  margin: 12px 0 0;
  padding: 14px 15px 13px;
  border-radius: 18px;
  background: linear-gradient(135deg, #fff, #f4f8ff);
  border: 1px solid rgba(43, 108, 246, .14);
  box-shadow: 0 4px 14px rgba(43, 108, 246, .05);
}

/* 上段：連続記録＋今日の一歩の状態を横並び（狭幅では縦へ折り返す）。 */
.kt-streak-top {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.kt-streak-flame {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex: 0 0 auto;
}
.kt-streak-fire { font-size: 22px; line-height: 1; }
.kt-streak-num {
  font-size: 26px; font-weight: 800; line-height: 1;
  color: var(--kt-accent, #2b6cf6);
}
.kt-streak-unit { font-size: 12.5px; font-weight: 700; color: var(--kt-ink-soft, #5b6478); }

.kt-streak-copy {
  min-width: 0; flex: 1 1 8.5em;
}
.kt-streak-kicker {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--kt-kicker, #A64B35); margin: 0 0 2px;
}
.kt-streak-lead {
  font-size: 11.5px; line-height: 1.5; color: var(--kt-ink-soft, #5b6478); margin: 0;
}

/* 今日の一歩：未＝押せるボタン、完了＝静かなチェック表示。
   [hidden] を確実に効かせる（display 指定が [hidden] を上書きしないように）。 */
.kt-streak-step { margin: 11px 0 0; }
.kt-streak [hidden] { display: none !important; }
.kt-streak-form { margin: 0; }
.kt-streak-btn {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  box-sizing: border-box;
  width: auto;
  min-height: 46px;
  padding: 12px 16px;
  border: 0; border-radius: 14px;
  background: linear-gradient(135deg, #2b6cf6, #4f86ff);
  color: #fff; font-size: 14.5px; font-weight: 800;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 6px 16px rgba(43, 108, 246, .18);
  transition: transform .12s ease, box-shadow .12s ease;
}
.kt-streak-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 22px rgba(43, 108, 246, .24); }
.kt-streak-btn:disabled { opacity: .7; cursor: default; }
.kt-streak-btn-ico { font-size: 16px; line-height: 1; }

.kt-streak-done {
  display: flex; align-items: center; gap: 9px;
  padding: 11px 14px; border-radius: 14px;
  background: rgba(43, 108, 246, .08);
  border: 1px solid rgba(43, 108, 246, .16);
}
.kt-streak-done-ico {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--kt-accent, #2b6cf6); color: #fff;
  font-size: 13px; font-weight: 800;
}
.kt-streak-done-text { font-size: 12.5px; font-weight: 700; color: var(--kt-ink, #1e2433); line-height: 1.4; }

.kt-streak-flash {
  font-size: 11.5px; line-height: 1.5; color: var(--kt-accent-d, #1b52cc);
  margin: 8px 0 0;
}
.kt-streak-flash--warn { color: #96591a; }

/* 獲得バッジ：小さなチップで静かに並べる（競争でなく“積み上がりの記録”）。 */
.kt-streak-badges { margin: 12px 0 0; padding-top: 11px; border-top: 1px dashed rgba(43, 108, 246, .16); }
.kt-streak-badges-h {
  font-size: 10.5px; font-weight: 800; letter-spacing: .04em;
  color: var(--kt-ink-soft, #5b6478); margin: 0 0 8px;
}
.kt-streak-badge-list {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 7px;
}
.kt-streak-badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-radius: 999px;
  background: #fff; border: 1px solid rgba(43, 108, 246, .16);
  font-size: 11.5px; font-weight: 700; color: var(--kt-ink, #1e2433);
  min-height: 30px;
}
.kt-streak-badge-emoji { font-size: 14px; line-height: 1; }
.kt-streak-badges-empty {
  font-size: 11.5px; line-height: 1.5; color: var(--kt-ink-soft, #5b6478); margin: 0;
}

/* 極小幅（320px）でも崩れない：連続記録の数字を少し詰める。 */
@media (max-width: 340px) {
  .kt-streak-num { font-size: 23px; }
  .kt-streak-fire { font-size: 20px; }
  .kt-streak-copy { flex-basis: 7em; }
}

/* 動きを控える設定を尊重（出現アニメ・押下トランジションを止める）。 */
@media (prefers-reduced-motion: reduce) {
  .kt-streak-btn { transition: none; }
  .kt-streak-btn:hover { transform: none; }
}

/* 2026-07-24 PC複数列化(min-width:1024px)。モバイル不変。担当:B-ロードマップ
   対象: 自由への地図 /kaname/roadmap。既存の縦積み(獲得バッジの帯・6 Stageの道)を
   PC幅だけグリッドで複数列にreflow（色/フォント/角丸/影は既存ルールのまま・
   ここでは display/grid-template-columns/gap/align-items のみ追加）。
   .kt-rm-* は同ページ内の <style> 定義（kaname_roadmap.html）だが、担当CSSファイル
   のみの編集ルールのため、この新規ブロックからPC幅の段組みだけを与える。 */
@media (min-width: 1024px) {
  /* 獲得バッジ：チップの折返し(flex)をグリッドの複数列へ統一。 */
  .kt-streak-badge-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
  }
  .kt-streak-badge { min-width: 0; }

  /* 6 Stageの道は「縦一本の進行線」が意味を持つ（1→2→…→6を .kt-rm-stage::before の縦線で
     接続）。2列化すると 1→3→5 / 2→4→6 で線が分断され進行順が崩れる（Codex指摘）ため、
     道は単一列のまま（複数列化しない）。バッジ帯のみPCで3列にする。 */
}