/* =================================================================== */
/* Kaname マイジャーニー（積み上がる継続価値ページ）専用スタイル        */
/*   /kaname/member/journey の3セクションを「上質ポップ」で。           */
/*   ・今月のテーマ＋特典（#kj-theme）＝季節色の特典バッジ・問い           */
/*   ・積み上がり（#kj-stack）＝streakを大きく誇らしく／整え度メーター／   */
/*     気づきアルバム（カード列）／節目バッジ（カラフル円）               */
/*   ・変化（#kj-change）＝before/after 矢印カード／手紙（便箋風）        */
/*                                                                       */
/*   3つの section は テンプレ側で .kt-card（pop.css）を併用しているため、 */
/*   器（角丸/影/余白/地色）は既存 .kt-card に任せ、ここでは「中の部品」を  */
/*   ポップに足す（=二重背景にしない）。                                  */
/*   color トークンは kaname_pop.css の --ktp-*／--kt-display を再利用    */
/*   （このファイルでは定義しない・pop.css と kaname.css は編集禁止）。   */
/*   すべて .kt-pop スコープ内のみ。390px 最優先・はみ出し0・可読性。      */
/* =================================================================== */

/* ------------------------------------------------------------------ */
/* セクション間の余白（カード同士のリズム）。                           */
/* ------------------------------------------------------------------ */
.kt-pop #kj-theme,
.kt-pop #kj-suggest,
.kt-pop #kj-stack,
.kt-pop #kj-change { margin-top: 18px; }

/* ================================================================== */
/* ① 今月のテーマ＋特典（#kj-theme）。器は .kt-card--accent。          */
/*    今月だけの「問い」と「特典バッジ」をポップに。                    */
/* ================================================================== */
.kt-pop #kj-theme { position: relative; overflow: hidden; }
.kt-pop #kj-theme::before {
  /* 右上にふわっと浮く季節の灯（装飾・非読み上げ）。 */
  content: "";
  position: absolute;
  top: -36px; right: -30px;
  width: 108px; height: 108px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, rgba(255,197,61,.50), rgba(255,122,89,.16) 70%, transparent);
  pointer-events: none;
}
.kt-pop #kj-theme > * { position: relative; }

/* 今月の問い（テーマを自分ごとにする一行）。 */
.kt-pop .kj-theme-q {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.6;
  color: var(--ktp-indigo-d);
  background: linear-gradient(transparent 62%, rgba(255,197,61,.45) 0);
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  margin: 10px 0 0;
}

/* 特典バッジ（今月の小さな贈り物）。白カードで“貼った”感。 */
.kt-pop .kj-gift {
  position: relative;
  margin: 16px 0 4px;
  padding: 16px 16px 14px;
  border-radius: 20px;
  background: #FFFFFF;
  box-shadow: 0 6px 18px rgba(43, 108, 246, .12);
}
.kt-pop .kj-gift::before {
  /* 左上に貼った“特典”シール（絵文字）。 */
  content: "🎁";
  position: absolute;
  top: -14px; left: 14px;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  font-size: 19px; line-height: 1;
  background: var(--ktp-sun);
  border-radius: 50%;
  box-shadow: 0 0 0 3px #FFFFFF, 0 5px 14px rgba(255, 197, 61, .42);
  transform: rotate(-8deg);
}
.kt-pop .kj-gift-kicker {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--ktp-coral-d);
  margin: 6px 0 6px 44px;     /* シールぶん右に寄せる。 */
}
.kt-pop .kj-gift-title {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 15.5px;
  line-height: 1.5;
  color: var(--ktp-ink);
  margin: 0 0 5px;
}
.kt-pop .kj-gift-desc {
  font-size: 13px;
  line-height: 1.8;
  color: var(--ktp-ink-soft);
  margin: 0;
}

/* ================================================================== */
/* ② 積み上がり（#kj-stack）。器は .kt-card--soft。                   */
/* ================================================================== */

/* --- 同期バッジ（trial/paid：端末をまたいで積み上がる安心の小表示） --- */
.kt-pop .kj-sync {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 8px 0 2px;
  padding: 5px 12px 5px 10px;
  border-radius: 999px;
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ktp-mint-d);
  background: var(--ktp-mint-bg);
  box-shadow: 0 0 0 1.5px rgba(24, 199, 174, .22) inset;
  max-width: 100%;
}
.kt-pop .kj-sync-dot { font-size: 13px; line-height: 1; }
.kt-pop .kj-sync-txt { overflow-wrap: anywhere; }
/* 確定同期で、ほんの一拍だけやさしく浮かぶ（1回・無限ループ無し）。 */
.kt-pop .kj-sync.is-synced { animation: kj-sync-in .5s var(--ktp-bounce); }
@keyframes kj-sync-in {
  0%   { opacity: 0; transform: translateY(4px); }
  100% { opacity: 1; transform: none; }
}

/* --- 連続日数（streak）：大きく誇らしく。テキストはインラインで隣に。 --- */
.kt-pop .kj-streak {
  text-align: center;
  border-radius: 22px;
  padding: 18px 16px;
  margin: 12px 0 18px;
  background: linear-gradient(135deg, var(--ktp-indigo-bg), #FFFFFF 72%);
  box-shadow: 0 6px 18px rgba(43, 108, 246, .10);
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 17px;
  color: var(--ktp-ink);
  line-height: 1.4;
}
.kt-pop .kj-streak-num {
  display: inline-block;
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 56px;
  line-height: 1;
  color: var(--ktp-indigo);
  vertical-align: -8px;
  margin-right: 4px;
  font-variant-numeric: tabular-nums;
}
/* streak 更新時の “ぽんっ” 一拍（無限ループ無し）。 */
.kt-pop .kj-streak-num.is-bump { animation: kj-bump .5s var(--ktp-bounce); }
@keyframes kj-bump {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.16); }
  100% { transform: scale(1); }
}

/* --- 整え度メーター（tune）：色付きで伸びる。 --- */
.kt-pop .kj-tune-label {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--ktp-ink);
  margin: 0 0 8px;
}
.kt-pop .kj-tune {                 /* テンプレ上はこれがトラック本体。 */
  position: relative;
  height: 16px;
  border-radius: 999px;
  background: var(--ktp-mint-bg);
  overflow: hidden;
  margin: 0 0 8px;
}
.kt-pop .kj-tune-fill {            /* <i> 要素。width% は JS が設定。 */
  display: block;
  position: absolute;
  inset: 0 auto 0 0;
  width: 0%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--ktp-mint), var(--ktp-indigo));
  transition: width .8s var(--ktp-ease);
}
.kt-pop .kj-tune-num {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 22px;
  color: var(--ktp-mint-d);
  font-variant-numeric: tabular-nums;
}
.kt-pop .kj-tune-num::after { content: " / 100"; font-size: 13px; color: var(--ktp-ink-soft); }
/* 先月比 +N（JS が動的生成）。 */
.kt-pop .kj-tune-delta {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 800;
  color: #04332C;
  background: var(--ktp-mint-bg);
  border-radius: 999px;
  padding: 2px 9px;
  margin-left: 8px;
  vertical-align: middle;
}

/* --- 気づきアルバム（積み上がる堀）。 --- */
.kt-pop .kj-album-label {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--ktp-ink);
  margin: 20px 0 10px;
}
.kt-pop .kj-album-form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 14px;
}
.kt-pop .kj-album-input {
  width: 100%;
  box-sizing: border-box;
  min-height: 72px;
  resize: vertical;
  font: inherit;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ktp-ink);
  background: #FFFFFF;
  border: 2px solid var(--ktp-sun-bg);
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 4px 12px rgba(30, 36, 51, .06);
  outline: none;
  transition: border-color .2s var(--ktp-ease), box-shadow .2s var(--ktp-ease);
}
.kt-pop .kj-album-input:focus {
  border-color: var(--ktp-indigo);
  box-shadow: 0 0 0 3px var(--ktp-indigo-bg);
}
.kt-pop .kj-album-input::placeholder { color: #6b7488; }

/* 「そっと残す」ボタン（pop の kt-btn に寄せたチャンキー丸ボタン）。 */
.kt-pop .kj-album-add {
  align-self: flex-end;
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 14px;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--ktp-indigo), var(--ktp-indigo-d));
  border: none;
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(43, 108, 246, .30);
  transition: transform .2s var(--ktp-bounce-s), box-shadow .25s var(--ktp-ease);
}
.kt-pop .kj-album-add:hover { box-shadow: 0 8px 20px rgba(43, 108, 246, .38); }
.kt-pop .kj-album-add:active { transform: scale(.95); }

/* 気づき一覧（日付つきカードが積み上がる）。 */
.kt-pop #kj-album,
.kt-pop .kj-album {
  list-style: none;
  margin: 0 0 4px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kt-pop .kj-album-item {
  background: #FFFFFF;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 4px 12px rgba(30, 36, 51, .07);
  border-left: 5px solid var(--ktp-sun);
}
.kt-pop .kj-album-item:nth-child(3n+1) { border-left-color: var(--ktp-coral); }
.kt-pop .kj-album-item:nth-child(3n+2) { border-left-color: var(--ktp-mint); }
.kt-pop .kj-album-item:nth-child(3n)   { border-left-color: var(--ktp-indigo); }
.kt-pop .kj-album-date {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 11.5px;
  color: var(--ktp-ink-soft);
  margin: 0 0 4px;
}
.kt-pop .kj-album-text {
  font-size: 14px;
  line-height: 1.8;
  color: var(--ktp-ink);
  margin: 0;
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
}
/* 追加直後の1枚だけ、そっと立ち上がる。 */
.kt-pop .kj-album-item.is-new { animation: kj-rise .5s var(--ktp-bounce); }
@keyframes kj-rise {
  0%   { opacity: 0; transform: translateY(10px) scale(.97); }
  100% { opacity: 1; transform: none; }
}
/* 気づきがまだ無い時のやさしい空表示。 */
.kt-pop .kj-album-empty {
  font-size: 13px;
  line-height: 1.8;
  color: var(--ktp-ink-soft);
  text-align: center;
  padding: 12px 6px;
  margin: 0;
  background: var(--ktp-sun-bg);
  border-radius: 14px;
}

/* --- 無料向け：アルバム横の控えめロック（脅さず前向き） --- */
.kt-pop .kj-lock {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 10px 0 2px;
  padding: 11px 14px;
  border-radius: 16px;
  background: var(--ktp-indigo-bg);
  border: 1.5px dashed rgba(43, 108, 246, .30);
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ktp-indigo-d);
}
.kt-pop .kj-lock-ic { font-size: 16px; line-height: 1.4; flex: 0 0 auto; }
.kt-pop .kj-lock-txt { overflow-wrap: anywhere; }

/* --- 無料向け：アップグレード訴求（サーバ描画 .kj-upgrade を上質ポップに） --- */
/* バックエンドが .kj-upgrade をサーバ描画する想定。JS が is-emph を付け強調。 */
.kt-pop .kj-upgrade {
  position: relative;
  overflow: hidden;
  margin: 16px 0 2px;
  padding: 18px 16px 16px;
  border-radius: 22px;
  background: linear-gradient(135deg, var(--ktp-indigo-bg), var(--ktp-mint-bg) 130%);
  box-shadow: 0 8px 22px rgba(43, 108, 246, .14);
}
.kt-pop .kj-upgrade::before {
  /* 右上のやわらかな灯（装飾）。 */
  content: "";
  position: absolute;
  top: -34px; right: -28px;
  width: 100px; height: 100px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, rgba(24,199,174,.40), rgba(43,108,246,.12) 70%, transparent);
  pointer-events: none;
}
.kt-pop .kj-upgrade > * { position: relative; }
.kt-pop .kj-upgrade .kj-upgrade-kicker,
.kt-pop .kj-upgrade-kicker {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .03em;
  color: var(--ktp-mint-d);
  margin: 0 0 6px;
}
.kt-pop .kj-upgrade .kj-upgrade-title,
.kt-pop .kj-upgrade-title {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 16.5px;
  line-height: 1.5;
  color: var(--ktp-ink);
  margin: 0 0 6px;
}
.kt-pop .kj-upgrade .kj-upgrade-body,
.kt-pop .kj-upgrade-body {
  font-size: 13px;
  line-height: 1.8;
  color: var(--ktp-ink-soft);
  margin: 0 0 12px;
}
/* CTA（バックエンドが a.kj-upgrade-cta などで出す想定。チャンキー丸ボタン）。 */
.kt-pop .kj-upgrade .kj-upgrade-cta,
.kt-pop a.kj-upgrade-cta {
  display: inline-block;
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 14px;
  color: #FFFFFF;
  text-decoration: none;
  background: linear-gradient(135deg, var(--ktp-indigo), var(--ktp-indigo-d));
  border: none;
  border-radius: 999px;
  padding: 11px 24px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(43, 108, 246, .30);
  transition: transform .2s var(--ktp-bounce-s), box-shadow .25s var(--ktp-ease);
}
.kt-pop .kj-upgrade .kj-upgrade-cta:hover,
.kt-pop a.kj-upgrade-cta:hover { box-shadow: 0 8px 20px rgba(43, 108, 246, .38); }
.kt-pop .kj-upgrade .kj-upgrade-cta:active,
.kt-pop a.kj-upgrade-cta:active { transform: scale(.95); }
/* JS が付ける強調：ほんの少しだけ持ち上げて目線を集める（脅さない）。 */
.kt-pop .kj-upgrade.is-emph {
  box-shadow: 0 10px 28px rgba(43, 108, 246, .20);
  outline: 2px solid rgba(24, 199, 174, .28);
  outline-offset: 2px;
}

/* --- 節目バッジ（カラフル円・#kj-badges は div）。 --- */
.kt-pop .kj-badges-label {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--ktp-ink);
  margin: 20px 0 12px;
}
/* 【絶対に迷わない・2026-07-10オーナー指示】バッジ折りたたみ（summary化）。フォント/色/
   余白トークンは.kj-badges-labelのまま。開閉印は2026-07-14からbase.htmlの共通チップ
   「ひらく/とじる」に一本化（独自chevronはここでは持たない）。 */
.kt-pop summary.kj-badges-label {
  cursor: pointer;
  list-style: none;
  position: relative;
  padding-right: 22px;
}
.kt-pop summary.kj-badges-label::-webkit-details-marker { display: none; }
.kt-pop summary.kj-badges-label::marker { content: ""; }
/* 独自の開閉印は廃止（2026-07-14 折りたたみ共通作法＝base.htmlの「ひらく/とじる」チップへ
   全ページ一本化・1機能=1名称）。content上書きはhead_extra後読みで後勝ちするためここに残さない。 */
.kt-pop #kj-badges,
.kt-pop .kj-badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px 8px;
}
.kt-pop .kj-badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.kt-pop .kj-badge-disc {
  display: inline-grid;
  place-items: center;
  width: 60px; height: 60px;
  border-radius: 50%;
  font-size: 28px;
  line-height: 1;
  background: #EEF0F5;
  color: #5B6478;
  box-shadow: 0 0 0 3px #FFFFFF, 0 4px 10px rgba(30, 36, 51, .08);
  filter: grayscale(1);
  opacity: 1;
  transition: transform .25s var(--ktp-bounce);
}
.kt-pop .kj-badge-label {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 11.5px;
  line-height: 1.3;
  color: var(--ktp-ink-soft);
}
.kt-pop .kj-badge-need {
  font-size: 10.5px;
  line-height: 1.4;
  color: #6b7488;
}
/* 点灯（達成）：色が戻り、白フチが効いて誇らしい。 */
.kt-pop .kj-badge.is-on .kj-badge-disc {
  filter: none;
  opacity: 1;
  background: var(--ktp-sun);
  box-shadow: 0 0 0 3px #FFFFFF, 0 6px 16px rgba(255, 197, 61, .45);
}
.kt-pop .kj-badge.is-on:nth-child(3n+1) .kj-badge-disc {
  background: var(--ktp-coral); box-shadow: 0 0 0 3px #FFFFFF, 0 6px 16px rgba(255,122,89,.42);
}
.kt-pop .kj-badge.is-on:nth-child(3n+2) .kj-badge-disc {
  background: var(--ktp-mint); box-shadow: 0 0 0 3px #FFFFFF, 0 6px 16px rgba(24,199,174,.40);
}
.kt-pop .kj-badge.is-on:nth-child(3n) .kj-badge-disc {
  background: var(--ktp-indigo); color: #FFFFFF; box-shadow: 0 0 0 3px #FFFFFF, 0 6px 16px rgba(43,108,246,.40);
}
.kt-pop .kj-badge.is-on .kj-badge-label { color: var(--ktp-ink); }
/* 点灯の瞬間だけ、上品にぽんっと祝う（1回）。 */
.kt-pop .kj-badge.just-lit .kj-badge-disc { animation: kj-celebrate .6s var(--ktp-bounce); }
@keyframes kj-celebrate {
  0%   { transform: scale(.6) rotate(-10deg); }
  55%  { transform: scale(1.18) rotate(6deg); }
  100% { transform: scale(1) rotate(0); }
}

/* ================================================================== */
/* ③ 変化（#kj-change）。器は .kt-card--soft。                        */
/* ================================================================== */

/* 再診断リンク（誘導ボタン風）。 */
.kt-pop .kj-rediag-link {
  display: inline-block;
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--ktp-coral-d);
  text-decoration: none;
  background: var(--ktp-coral-bg);
  border-radius: 999px;
  padding: 10px 18px;
  margin: 8px 0 16px;
  box-shadow: 0 4px 12px rgba(255, 122, 89, .18);
  transition: transform .2s var(--ktp-bounce-s);
}
.kt-pop .kj-rediag-link:active { transform: scale(.96); }

/* before/after の矢印カード。 */
.kt-pop #kj-beforeafter { margin: 0 0 18px; }
.kt-pop .kj-ba {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: stretch;
  gap: 8px;
}
.kt-pop .kj-ba-card {
  border-radius: 20px;
  padding: 14px 10px;
  text-align: center;
  box-shadow: 0 5px 14px rgba(30, 36, 51, .08);
  min-width: 0;
}
.kt-pop .kj-ba-card--before { background: var(--ktp-indigo-bg); }
.kt-pop .kj-ba-card--after  { background: var(--ktp-mint-bg); }
.kt-pop .kj-ba-when {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 11.5px;
  color: var(--ktp-ink-soft);
  margin: 0 0 6px;
}
.kt-pop .kj-ba-type {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 15px;
  line-height: 1.35;
  color: var(--ktp-ink);
  margin: 0;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.kt-pop .kj-ba-arrow {
  display: grid;
  place-items: center;
  font-size: 22px;
  color: var(--ktp-coral);
  font-weight: 800;
}
.kt-pop .kj-ba-empty {
  border-radius: 20px;
  padding: 16px 14px;
  text-align: center;
  font-size: 13px;
  line-height: 1.8;
  color: var(--ktp-ink-soft);
  background: var(--ktp-indigo-bg);
}
/* before/after の直下にそえる一言（JS が .kj-note で出す）。 */
.kt-pop #kj-beforeafter .kj-note {
  font-size: 12px;
  line-height: 1.7;
  color: var(--ktp-ink-soft);
  margin: 10px 0 0;
  text-align: center;
}

/* 1ヶ月前への手紙（便箋風）。中身は JS が組み立てる。 */
.kt-pop #kj-letter {
  position: relative;
  border-radius: 22px;
  padding: 20px 18px 18px;
  background:
    repeating-linear-gradient(
      to bottom,
      #FFFEFB, #FFFEFB 31px,
      rgba(43, 108, 246, .10) 31px, rgba(43, 108, 246, .10) 32px
    );
  box-shadow: 0 8px 22px rgba(30, 36, 51, .10);
  border: 1.5px solid var(--ktp-sun-bg);
}
.kt-pop .kj-letter-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 10px;
}
.kt-pop .kj-letter-emoji { font-size: 22px; line-height: 1; }
.kt-pop .kj-letter-title {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--ktp-ink);
  margin: 0;
}
.kt-pop .kj-letter-body {
  font-size: 14px;
  line-height: 32px;          /* 便箋の罫線に合わせる。 */
  color: var(--ktp-ink);
  margin: 0;
  white-space: pre-wrap;
}
.kt-pop .kj-letter-sign {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 12.5px;
  color: var(--ktp-indigo-d);
  text-align: right;
  margin: 8px 0 0;
}

/* ================================================================== */
/* ★ あなたへの提案（#kj-suggest）。器は .kt-card。                    */
/*    「あなた専用」の特別感＝青/コーラルのアクセント・段階バッジ・      */
/*    フォーカスのハイライト・レッスンカード。続けるほど進化する後押し。 */
/*    法務：やさしい後押し（脅さない・偽希少性なし）。                  */
/* ================================================================== */
.kt-pop #kj-suggest {
  position: relative;
  overflow: hidden;
  /* 「あなたへ」の特別感：上辺に青→コーラルのリボン。 */
  border-top: 4px solid transparent;
  background-clip: padding-box;
}
.kt-pop #kj-suggest::before {
  /* 左上から差すやわらかな「あなただけ」の灯（装飾・非読み上げ）。 */
  content: "";
  position: absolute;
  top: -40px; left: -34px;
  width: 116px; height: 116px;
  border-radius: 50%;
  background: radial-gradient(circle at 60% 60%, rgba(43,108,246,.34), rgba(255,122,89,.14) 68%, transparent);
  pointer-events: none;
}
.kt-pop #kj-suggest > * { position: relative; }

/* 見出しキッカー「あなたへの提案」＝青の小バッジ感。 */
.kt-pop #kj-suggest .kt-card-kicker {
  display: inline-block;
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .03em;
  color: #FFFFFF;
  background: linear-gradient(135deg, var(--ktp-indigo), var(--ktp-coral) 145%);
  border-radius: 999px;
  padding: 4px 12px;
  margin: 0 0 12px;
  box-shadow: 0 4px 12px rgba(43, 108, 246, .26);
}

/* 個別あいさつ（大きく・あなたの言葉で）。 */
.kt-pop .kj-sug-greeting {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 18px;
  line-height: 1.55;
  color: var(--ktp-ink);
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}

/* 段階バッジ（あなたのいまの段階）。 */
.kt-pop .kj-sug-stage {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 8px;
  margin: 0 0 12px;
  padding: 6px 13px 6px 10px;
  border-radius: 999px;
  background: var(--ktp-mint-bg);
  box-shadow: 0 0 0 1.5px rgba(24, 199, 174, .24) inset;
  max-width: 100%;
}
.kt-pop .kj-sug-stage-ic { font-size: 14px; line-height: 1; }
.kt-pop .kj-sug-stage-name {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 12.5px;
  color: var(--ktp-mint-d);
}
.kt-pop .kj-sug-stage-note {
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ktp-ink-soft);
  overflow-wrap: anywhere;
}

/* 今月のフォーカス（あなたのいま整えたい）＝コーラルのハイライト枠。 */
.kt-pop .kj-sug-focus {
  position: relative;
  margin: 4px 0 16px;
  padding: 15px 16px 14px;
  border-radius: 20px;
  background: linear-gradient(135deg, var(--ktp-coral-bg), #FFFFFF 130%);
  box-shadow: 0 6px 18px rgba(255, 122, 89, .14);
  border-left: 5px solid var(--ktp-coral);
}
.kt-pop .kj-sug-focus-kicker {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 11.5px;
  letter-spacing: .03em;
  color: var(--ktp-coral-d);
  margin: 0 0 6px;
}
.kt-pop .kj-sug-focus-label {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ktp-ink);
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
.kt-pop .kj-sug-focus-axis {
  display: inline-block;
  vertical-align: middle;
  font-size: 10.5px;
  font-weight: 800;
  color: var(--ktp-indigo-d);
  background: var(--ktp-indigo-bg);
  border-radius: 999px;
  padding: 2px 8px;
  margin-left: 7px;
}
.kt-pop .kj-sug-focus-action {
  font-size: 13.5px;
  line-height: 1.8;
  color: var(--ktp-ink);
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}
.kt-pop .kj-sug-focus-step {
  display: inline-block;
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 11px;
  color: #FFFFFF;
  background: var(--ktp-coral);
  border-radius: 999px;
  padding: 2px 9px;
  margin-right: 6px;
  vertical-align: middle;
}
.kt-pop .kj-sug-focus-why {
  font-size: 12.5px;
  line-height: 1.75;
  color: var(--ktp-ink-soft);
  margin: 0;
  overflow-wrap: anywhere;
}

/* あなたに合うレッスン（リンクカード）。 */
.kt-pop .kj-sug-lessons-label {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 14px;
  color: var(--ktp-ink);
  margin: 0 0 10px;
}
.kt-pop .kj-sug-lessons {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0 0 16px;
}
.kt-pop .kj-sug-lesson {
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
  background: #FFFFFF;
  border-radius: 16px;
  padding: 12px 14px;
  box-shadow: 0 4px 12px rgba(30, 36, 51, .07);
  border-left: 5px solid var(--ktp-indigo);
  transition: transform .2s var(--ktp-bounce-s), box-shadow .25s var(--ktp-ease);
}
.kt-pop .kj-sug-lesson:nth-child(3n+2) { border-left-color: var(--ktp-mint); }
.kt-pop .kj-sug-lesson:nth-child(3n)   { border-left-color: var(--ktp-coral); }
.kt-pop .kj-sug-lesson:hover { box-shadow: 0 8px 20px rgba(43, 108, 246, .18); }
.kt-pop .kj-sug-lesson:active { transform: scale(.98); }
.kt-pop .kj-sug-lesson-ic { font-size: 20px; line-height: 1; flex: 0 0 auto; }
.kt-pop .kj-sug-lesson-txt {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
  flex: 1 1 auto;
}
.kt-pop .kj-sug-lesson-title {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ktp-ink);
  overflow-wrap: anywhere;
}
.kt-pop .kj-sug-lesson-why {
  font-size: 12px;
  line-height: 1.6;
  color: var(--ktp-ink-soft);
  overflow-wrap: anywhere;
}
.kt-pop .kj-sug-lesson-arrow {
  flex: 0 0 auto;
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 18px;
  color: var(--ktp-indigo);
}

/* 変化（前回→今回）＝ミントの一言。 */
.kt-pop .kj-sug-change {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 0 0 12px;
  padding: 11px 14px;
  border-radius: 16px;
  background: var(--ktp-mint-bg);
  font-size: 13px;
  line-height: 1.75;
  color: var(--ktp-mint-d);
}
.kt-pop .kj-sug-change-ic { font-size: 15px; line-height: 1.4; flex: 0 0 auto; }
.kt-pop .kj-sug-change-txt { color: #04332C; overflow-wrap: anywhere; }

/* 進化メッセージ（続けるほど寄り添う）。 */
.kt-pop .kj-sug-evolve {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 13px;
  line-height: 1.7;
  color: var(--ktp-indigo-d);
  background: linear-gradient(transparent 60%, rgba(43,108,246,.16) 0);
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  margin: 0;
}

/* CTA（free teaser／診断導線・チャンキー丸ボタン）。 */
.kt-pop .kj-sug-cta {
  display: inline-block;
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 14px;
  color: #FFFFFF;
  text-decoration: none;
  background: linear-gradient(135deg, var(--ktp-indigo), var(--ktp-indigo-d));
  border-radius: 999px;
  padding: 11px 24px;
  margin: 12px 0 2px;
  box-shadow: 0 6px 16px rgba(43, 108, 246, .30);
  transition: transform .2s var(--ktp-bounce-s), box-shadow .25s var(--ktp-ease);
}
.kt-pop .kj-sug-cta:hover { box-shadow: 0 8px 20px rgba(43, 108, 246, .38); }
.kt-pop .kj-sug-cta:active { transform: scale(.95); }

/* free teaser の本文（上質に）。 */
.kt-pop .kj-sug-teaser {
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ktp-ink-soft);
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}

/* 診断未了：器の灯を青に寄せる。 */
.kt-pop #kj-suggest.is-diag::before {
  background: radial-gradient(circle at 60% 60%, rgba(43,108,246,.30), transparent 70%);
}

/* ================================================================== */
/* ④ 未来ビジョン（#kj-future）。器は .kt-card--soft。                  */
/*    「庭＝お金と暮らし」の3ヶ月後/半年後/1年後の景色を、縦の小径で。    */
/*    続けるほど未来の自分へ続く感覚を情景で。非断定。                   */
/* ================================================================== */
.kt-pop #kj-future { margin-top: 18px; position: relative; overflow: hidden; }
.kt-pop #kj-future::before {
  /* 右上にのぼる朝日の灯（装飾・非読み上げ）。 */
  content: "";
  position: absolute;
  top: -42px; right: -34px;
  width: 116px; height: 116px;
  border-radius: 50%;
  background: radial-gradient(circle at 42% 56%, rgba(255,197,61,.42), rgba(24,199,174,.12) 64%, transparent);
  pointer-events: none;
}
.kt-pop #kj-future > * { position: relative; }

.kt-pop .kj-future-lead {
  margin: 4px 0 16px;
  line-height: 1.65;
}

/* 縦に伸びる小径（庭をたどる）。左に1本の道、節ごとに灯。 */
.kt-pop .kj-future-path {
  list-style: none;
  margin: 0;
  padding: 0 0 0 6px;
}
.kt-pop .kj-future-step {
  position: relative;
  padding: 0 0 20px 26px;
}
.kt-pop .kj-future-step::before {
  /* 道（縦線）。最後の節は下に伸ばさない。 */
  content: "";
  position: absolute;
  left: 7px; top: 7px; bottom: 0;
  width: 3px;
  border-radius: 3px;
  background: linear-gradient(var(--ktp-mint), rgba(24,199,174,.18));
}
.kt-pop .kj-future-step:last-child { padding-bottom: 2px; }
.kt-pop .kj-future-step:last-child::before { bottom: auto; height: 14px; }
.kt-pop .kj-future-step::after {
  /* 節の灯（季節の点）。色は近い未来→遠い未来でうつろう。 */
  content: "";
  position: absolute;
  left: 0; top: 4px;
  width: 17px; height: 17px;
  border-radius: 50%;
  background: var(--ktp-mint);
  box-shadow: 0 0 0 4px #FFFFFF, 0 4px 12px rgba(24,199,174,.32);
}
.kt-pop .kj-future-step--mid::after { background: var(--ktp-sun); box-shadow: 0 0 0 4px #FFFFFF, 0 4px 12px rgba(255,197,61,.40); }
.kt-pop .kj-future-step--far::after { background: var(--ktp-coral); box-shadow: 0 0 0 4px #FFFFFF, 0 4px 12px rgba(255,122,89,.36); }

.kt-pop .kj-future-when {
  display: inline-block;
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 12.5px;
  letter-spacing: .02em;
  color: var(--ktp-mint-d);
  background: var(--ktp-mint-bg);
  border-radius: 999px;
  padding: 3px 12px;
  margin: 0 0 7px;
}
.kt-pop .kj-future-step--mid .kj-future-when { color: var(--ktp-sun-d); background: var(--ktp-sun-bg); }
.kt-pop .kj-future-step--far .kj-future-when { color: var(--ktp-coral-d); background: var(--ktp-coral-bg); }

.kt-pop .kj-future-scene {
  font-size: 13.5px;
  line-height: 1.9;
  color: var(--ktp-ink-soft);
  margin: 0;
  overflow-wrap: anywhere;
}

/* 締めの一文（未来へ続く感覚）。やわらかい黄のマーカー。 */
.kt-pop .kj-future-foot {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 13.5px;
  line-height: 1.85;
  color: var(--ktp-indigo-d);
  background: linear-gradient(transparent 64%, rgba(255,197,61,.40) 0);
  display: inline;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  margin: 12px 0 0;
}
/* foot の後の note を、inline の foot から行送りする。 */
.kt-pop #kj-future .kj-future-foot + .kt-note { margin-top: 14px; }

/* ================================================================== */
/* 390px 最適化（はみ出し0・読みやすさ優先）。                         */
/* ================================================================== */
@media (max-width: 400px) {
  .kt-pop .kj-streak-num { font-size: 50px; vertical-align: -6px; }
  .kt-pop .kj-streak { font-size: 16px; }
  .kt-pop #kj-badges, .kt-pop .kj-badges { gap: 12px 6px; }
  .kt-pop .kj-badge-disc { width: 56px; height: 56px; font-size: 25px; }
  .kt-pop .kj-ba-type { font-size: 14px; }
  .kt-pop .kj-sug-greeting { font-size: 17px; }
  .kt-pop .kj-sug-focus-label { font-size: 15px; }
}

/* prefers-reduced-motion：積み上がりの“弾み”を全停止。中身は最終状態で静止。*/
@media (prefers-reduced-motion: reduce) {
  .kt-pop .kj-streak-num.is-bump,
  .kt-pop .kj-album-item.is-new,
  .kt-pop .kj-sync.is-synced,
  .kt-pop .kj-badge.just-lit .kj-badge-disc { animation: none !important; }
  .kt-pop .kj-tune-fill { transition: none !important; }
}

/* ---- 【絶対に迷わない・2026-07-10オーナー指示】提案/変化/相棒/未来の折りたたみ ------- */
/* 核（あなたの積み上がり）以外を1つの<details>へ統合。器(.kt-card)の見た目は無変更、
   summary の既定マーカーを消し、開閉chevronを足すだけ（他ページのアコーディオンと同じ作法）。 */
.kt-pop .kt-jy-more > .kt-jy-more-sum {
  cursor: pointer;
  list-style: none;
  position: relative;
  display: block;
  padding-right: 30px;
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 15px;
  color: var(--kt-ink, #2E2A24);
}
.kt-pop .kt-jy-more > .kt-jy-more-sum::-webkit-details-marker { display: none; }
.kt-pop .kt-jy-more > .kt-jy-more-sum::marker { content: ""; }
.kt-pop .kt-jy-more-chev {
  position: absolute;
  top: 0;
  right: 0;
  font-size: 16px;
  font-weight: 800;
  color: var(--kt-ink-soft, #6E685E);
}
.kt-pop .kt-jy-more[open] > .kt-jy-more-sum .kt-jy-more-chev { transform: rotate(180deg); }
.kt-pop .kt-jy-more-body { margin-top: 16px; }
.kt-pop .kt-jy-more-body .kt-card:first-child { margin-top: 0; }

/* 2026-07-24 PC複数列化(min-width:1024px)。モバイル不変。担当:C-リソース歩み */
@media (min-width: 1024px) {
  /* 本文列はPC共通の既定(--kt-app-w=960px・kaname_desktop.css)を使う＝固定タブバー/wayfindと幅が一致。
     以前ここで .kt-pop .kt-inner を直接広げていたが、固定UI(--kt-app-w基準)とズレるため撤去
     （Codex指摘の是正）。2列アルバムは共通幅で十分。 */

  /* 気づきアルバム（積み上がる記録カード）を2列に。 */
  .kt-pop #kj-album,
  .kt-pop .kj-album {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 14px;
  }
  .kt-pop .kj-album-item,
  .kt-pop .kj-album-empty { min-width: 0; }
  /* JSが先頭に足す要約行(.kj-album-summary)と空状態(.kj-album-empty)は全幅にする
     （2列に落とすと要約が半幅・記録が隣に並ぶ不整合になる＝Codex指摘の是正）。 */
  .kt-pop #kj-album > .kj-album-summary,
  .kt-pop .kj-album > .kj-album-summary,
  .kt-pop #kj-album > .kj-album-empty,
  .kt-pop .kj-album > .kj-album-empty { grid-column: 1 / -1; }

  /* 折りたたみ内（提案／今月の変化／相棒／続けた先の庭）の記録カード群を2列に。 */
  .kt-pop .kt-jy-more-body {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 18px 22px;
    align-items: start;
  }
  .kt-pop .kt-jy-more-body > .kt-card {
    margin-top: 0;
    min-width: 0;
  }
}