/* Kaname 全画面共通「現在地＋つぎの一歩」バンド（Wave2 迷子解消・2026-07-02）。
   下部タブバー（.kt-tabbar）の直上に固定＝全ページ同じ位置。
   上段: 背骨（診断→学ぶ→整える→続ける）の進捗ドット＋ラベル。
   下段: つぎの一歩CTA 1本だけ。
   トークンは kaname.css の --kt-* を再利用。スコープ: .kt-wayfind のみ。 */

:root {
  --kt-wayfind-h: 72px; /* バンドの実高の目安（本文の下余白確保に使う） */
}

/* バンドがある画面では、タブバー分に加えてバンド分の下余白も確保する
   （kaname_tabbar.css の body padding-bottom への上乗せ）。 */
body:has(.kt-wayfind) {
  padding-bottom: calc(var(--kt-tabbar-h, 64px) + var(--kt-wayfind-h)
                       + env(safe-area-inset-bottom, 0px) + 16px);
}

.kt-wayfind {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--kt-tabbar-h, 64px) + env(safe-area-inset-bottom, 0px));
  z-index: 999; /* タブバー(1000)のすぐ下・本文の上 */
  box-sizing: border-box;
  width: 100%;
  max-width: 100vw;
  padding: 6px 10px 7px;
  background: var(--kt-card, #fff);
  border-top: 1.5px solid var(--kt-line, #E4E9F2);
  font-family: var(--kt-sans, sans-serif);
  -webkit-tap-highlight-color: transparent;
}

/* ── 上段: 背骨の進捗（リンクにしない＝第2メニュー化させない） ── */
.kt-wayfind-path {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  list-style: none;
  margin: 0 0 5px;
  padding: 0;
}
.kt-wayfind-step {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 700;
  color: #5A6478; /* 白地でAA確保（小さな文字のため濃いめ） */
  white-space: nowrap;
}
.kt-wayfind-step + .kt-wayfind-step::before {
  content: "›";
  margin: 0 4px;
  color: #98A1B3;
  font-weight: 400;
}
.kt-wayfind-dot {
  display: grid;
  place-items: center;
  width: 15px;
  height: 15px;
  border-radius: 50%;
  /* 未＝罫トークン（状態色・2026-07-03 配色案2）。 */
  background: var(--kt-line, #E6E8EE);
  color: #4A5468;
  font-size: 9.5px;
  font-weight: 800;
  line-height: 1;
}
/* 済＝成功トークン（状態色）。地色は従来の淡緑を維持し、文字色だけ --kt-success に統一。 */
.kt-wayfind-step.is-done .kt-wayfind-dot {
  background: #D8F2E4;
  color: var(--kt-success, #0C6B5E);
}
/* 現在地＝アクション（CTAと同系統だが淡面＋濃色でドットとしては控えめに・固定UIの青の減量）。
   「次はここ」自体は下段CTAボタン（不変）が示すため、ドットの強調は残さない。
   :not(.is-done): is-done と is-here は同時に付き得る（例: 診断済みで診断ページ滞在）。
   その場合は「✓=実績あり」の緑を優先し、現在地色で潰さない（Codexレビュー指摘・2026-07-03）。 */
.kt-wayfind-step.is-here:not(.is-done) .kt-wayfind-dot {
  background: var(--kt-accent-bg, #E7EFFF);
  color: var(--kt-accent-d, #1B52CC);
}
.kt-wayfind-step.is-next .kt-wayfind-lb {
  color: #1B2B4B;
}
/* 現在ページの所属（進捗とは別物）＝そっと下線だけ */
.kt-wayfind-step.is-here .kt-wayfind-lb {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── 下段: つぎの一歩CTA（常に1本） ── */
.kt-wayfind-next {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 38px;
  padding: 9px 12px;
  border-radius: 12px;
  background: var(--kt-blue, #2B6CF6);
  color: #fff;
  font-size: 13.5px;
  font-weight: 800;
  line-height: 1.4;
  text-align: center;
  text-decoration: none;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.kt-wayfind-next:active {
  transform: translateY(1px);
}
/* 「いまここ」（行き先＝現在ページ）: 押させたい色でなく、静かな現在地色に */
.kt-wayfind-next.is-here {
  background: #EEF3FE;
  color: #1B2B4B;
  border: 1.5px solid #C9D8F8;
}

/* バンドがある画面では、フィードバックFAB（kt_feedback.css:
   bottom = タブバー高+14px）をバンドの上へ持ち上げ、CTAを覆わないようにする。 */
body:has(.kt-wayfind) .kt-fb-fab {
  bottom: calc(var(--kt-tabbar-h, 64px) + var(--kt-wayfind-h)
               + env(safe-area-inset-bottom, 0px) + 14px);
}

/* 「上へ戻る」小ボタン（kaname_ux.css .kt-totop: bottom≒72px）も同様に持ち上げる
   ＝バンドの下に隠れてクリック不能にならないように（Codexレビュー指摘・2026-07-02）。
   FABとの位置関係（同じ右下・従来からの並び）は従来どおり。 */
body:has(.kt-wayfind) .kt-totop {
  bottom: calc(var(--kt-tabbar-h, 64px) + var(--kt-wayfind-h)
               + env(safe-area-inset-bottom, 0px) + 14px);
}

/* スクリーンリーダー専用（視覚には出さない） */
.kt-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 印刷では出さない */
@media print {
  .kt-wayfind { display: none; }
}

/* ================================================================== */
/* デスクトップ表示（2026-07-05・PC最適化）。                          */
/*   kaname_tabbar.css と同じ考え方で、バンドを本文列（.kt-inner）と    */
/*   同じ幅・同じ中心軸に揃える（モバイル≤767pxは一切変更しない）。     */
/* ------------------------------------------------------------------ */
@media (min-width: 768px) {
  .kt-wayfind {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: min(var(--kt-app-w, 600px), calc(100vw - var(--kt-app-gutter-x, 40px)));
    max-width: var(--kt-app-w, 600px);
    border-radius: 20px 20px 0 0;
  }
}