/* =====================================================================
   kaname_hub.css  —  お金の学校ハブ（/kaname/learn）専用スタイル
   ---------------------------------------------------------------------
   ・6本柱を「象徴SVG＋番号＋タイトル＋一言＋進捗＋レッスン数」のカードに。
   ・トーンは kaname.css のトークン（--kt-bg/--kt-ink/--kt-accent/--kt-serif）
     を再利用。子供っぽくせず、上品・静か。和トーン厳守。
   ・クラス接頭辞は .kth-（レッスン本文側 .ktl-/別担当 kaname_learn.css と非衝突）。
   ・出現アニメ .kth-reveal は kaname_learn.css に依存せず自前定義。
   ===================================================================== */

/* --- 出現アニメ（下からふわり）。JSが .is-in を付けるまで隠す。 ------- */
.kth-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
.kth-reveal.is-in { opacity: 1; transform: none; }
/* JS無効でも必ず見える（フェイルセーフ） */
.kt-nojs .kth-reveal { opacity: 1; transform: none; }

/* --- 6本柱グリッド ---------------------------------------------------- */
.kth-grid {
  list-style: none;
  margin: 28px 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  /* 各カードは自分の中身の高さにする（既定の stretch だと、レッスン数が少ない柱が
     隣の高い柱に合わせて引き伸ばされ、中に大きな空白が出て“崩れて”見えた・2026-07-24
     オーナー指摘「左寄り/表示の乱れ」の一環の是正）。 */
  align-items: start;
}

/* --- 1枚の柱カード ---------------------------------------------------- */
.kth-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px 18px 16px;
  background: var(--kt-bg-soft, #FBF9F4);
  border: 1px solid var(--kt-line, #E7E1D5);
  border-radius: 16px;
  box-shadow: 0 1px 2px rgba(46, 42, 36, .04);
  transition: transform .28s cubic-bezier(.22,.61,.36,1),
              box-shadow .28s ease,
              border-color .28s ease;
  /* 出現を 1枚ずつ少し遅らせる（--kth-i は inline で指定） */
  transition-delay: calc(var(--kth-i, 0) * 70ms);
}
.kth-card:hover,
.kth-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(46, 42, 36, .10);
  border-color: #CDD8E6;
}
/* reveal の transition-delay と hover の transition が競合しないよう、
   is-in 後は delay を 0 に戻す（hover が即反応する）。 */
.kth-card.is-in { transition-delay: 0s; }

/* 読了済みの柱は藍の細い縁で「達成」を静かに示す */
.kth-card.is-done {
  border-color: #BFD0E2;
  background: var(--kt-accent-bg, #EAEEF4);
}

/* --- カード上部：象徴SVG＋番号＋タイトル ----------------------------- */
.kth-card-head {
  display: flex;
  align-items: center;
  gap: 14px;
}
.kth-symbol {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  display: block;
}
.kth-symbol img {
  width: 100%;
  height: 100%;
  display: block;
}
.kth-card:hover .kth-symbol,
.kth-card:focus-within .kth-symbol {
  /* ほんのり持ち上がる（上品に） */
  transform: translateY(-1px) scale(1.03);
  transition: transform .28s cubic-bezier(.22,.61,.36,1);
}

.kth-titles { min-width: 0; }
.kth-no {
  display: inline-block;
  font-family: var(--kt-serif, serif);
  font-size: 12px;
  letter-spacing: .14em;
  color: var(--kt-gold, #B89B6A);
  line-height: 1;
  margin-bottom: 4px;
}
.kth-title {
  display: block;
  font-family: var(--kt-serif, serif);
  font-size: 20px;
  font-weight: 600;
  color: var(--kt-ink, #2E2A24);
  line-height: 1.25;
}
.kth-sub {
  display: block;
  font-size: 12.5px;
  color: var(--kt-ink-soft, #6E685E);
  margin-top: 2px;
  line-height: 1.4;
}

/* --- 一言（短い説明） ------------------------------------------------- */
.kth-lead {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.7;
  color: var(--kt-ink-soft, #6E685E);
}

/* --- 進捗（レッスン数＋バー） ---------------------------------------- */
.kth-meta { margin-top: auto; }
.kth-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 6px;
}
.kth-count {
  font-size: 12.5px;
  color: var(--kt-ink, #2E2A24);
  font-weight: 600;
}
.kth-count .kth-count-unit {
  font-weight: 400;
  color: var(--kt-ink-soft, #6E685E);
}
.kth-done {
  font-size: 11.5px;
  color: var(--kt-accent-d, #2E4A6B);
  letter-spacing: .02em;
}
.kth-bar {
  display: block;
  height: 5px;
  border-radius: 999px;
  background: var(--kt-line, #E7E1D5);
  overflow: hidden;
}
.kth-fill {
  display: block;
  height: 100%;
  width: 0;                 /* JSで data-pct → width。JS無効時は下のフォールバック */
  border-radius: 999px;
  background: linear-gradient(90deg, var(--kt-accent, #3A5A82), var(--kt-accent-d, #2E4A6B));
  transition: width .9s cubic-bezier(.22,.61,.36,1);
  transition-delay: calc(var(--kth-i, 0) * 70ms + 200ms);
}
/* JS無効でも進捗が見えるよう、inline の --kth-pct でフォールバック */
.kt-nojs .kth-fill { width: calc(var(--kth-pct, 0) * 1%); transition: none; }

/* --- 柱内レッスン一覧（折りたたみ＝文字量を抑え網羅感は保つ） --------- */
.kth-lessons { margin-top: 2px; }
.kth-lessons-toggle {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--kt-accent-d, #2E4A6B);
  letter-spacing: .02em;
  user-select: none;
}
.kth-lessons-toggle::-webkit-details-marker { display: none; }
/* 独自の開閉印は廃止（2026-07-14 折りたたみ共通作法＝base.htmlの「ひらく/とじる」チップへ
   全ページ一本化・1機能=1名称）。content上書きはhead_extra後読みで後勝ちするためここに残さない。 */

.kth-lesson-list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
  border-top: 1px solid var(--kt-line, #E7E1D5);
}
.kth-lesson-row { border-bottom: 1px solid var(--kt-line, #E7E1D5); }
.kth-lesson-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 2px;
  text-decoration: none;
  color: var(--kt-ink, #2E2A24);
}
.kth-lesson-link:hover .kth-lesson-title { color: var(--kt-accent-d, #2E4A6B); }
.kth-lesson-no {
  flex: 0 0 auto;
  width: 22px;
  font-family: var(--kt-serif, serif);
  font-size: 12px;
  color: var(--kt-gold, #B89B6A);
}
.kth-lesson-main { flex: 1 1 auto; min-width: 0; }
.kth-lesson-title {
  display: block;
  font-size: 13px;
  line-height: 1.45;
  transition: color .2s ease;
}
.kth-lesson-min {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--kt-ink-soft, #6E685E);
}
.kth-lesson-row.is-done .kth-lesson-no::before {
  content: "\2713\00a0";    /* ✓ */
  color: var(--kt-accent, #3A5A82);
}

/* --- レッスン行の挿絵サムネ（視覚化ダイエットV1-a・2026-07-22）--------
   既存 illus_<id>.webp を再利用。width/height指定でCLS防止・実在ガードは
   テンプレ側(kt_static_exists)＝無ければ<img>ごと出さず崩れない。 */
.kth-lesson-thumb {
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  object-fit: cover;
  background: var(--kt-bg-soft, #F2F6FF);
}
/* 一言（subtitle）＝タイトル直下の1行・省略記号で折返さない（390px安全）。 */
.kth-lesson-sub {
  display: block;
  font-size: 10.5px;
  line-height: 1.35;
  margin-top: 1px;
  color: var(--kt-ink-soft, #6E685E);
  opacity: .82;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* --- 柱内「もっと見る」（初期6件を超える分・視覚化ダイエットV1-a） -----
   開閉の見た目(共通チップ/帯)は base.html の全ページ共通ルールに乗る。
   ここでは入れ子の間隔だけ最小限に調整。 */
.kth-lessons-more { margin-top: 8px; }
.kth-lessons-more .kth-lesson-list { margin-top: 8px; }

/* --- レスポンシブ：狭い画面は1列（390pxで横スクロールしない） -------- */
@media (max-width: 560px) {
  .kth-grid { grid-template-columns: 1fr; gap: 14px; }
  .kth-title { font-size: 19px; }
  .kth-symbol { width: 52px; height: 52px; }
}

/* --- モーション配慮：動きを止めたい人には静かに即表示 ---------------- */
@media (prefers-reduced-motion: reduce) {
  .kth-reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .kth-card { transition: none !important; }
  .kth-card:hover, .kth-card:focus-within { transform: none; }
  .kth-fill { transition: none !important; }
}

/* =====================================================================
   ▼ ポップ大改造 v3（2026-06-25）：.kt-pop スコープで学習ハブを派手×上質に。
     ・6本柱を「色のある・チャンキーで楽しい」カードに（各柱に色を割当）。
     ・極太丸見出し・大きな角丸・色付き影・ぽってりした象徴の器。
     ・進捗バー/読了マークを鮮やかに。色数は柱ごとに1色＝散らからない。
   ===================================================================== */

/* ハブ上部：イントロを楽しく（数字を跳ねる青・地図リンクを太く）。 */
.kt-pop .ktl-hero { font-family: var(--kt-display); font-weight: 800; font-size: 38px; }
@media (max-width: 380px) { .kt-pop .ktl-hero { font-size: 32px; } }
.kt-pop .ktl-school-intro-num { font-family: var(--kt-display); font-weight: 800; color: var(--ktp-indigo); }

/* 全体進捗バー：青→ミントの鮮やかなバー。 */
.kt-pop .ktl-progress-label { font-weight: 700; }
.kt-pop .ktl-progress-count { font-weight: 800; color: var(--ktp-indigo); }

/* 柱カードを各柱の色でチャンキーに（左縁に色帯＋象徴の器に色面）。
   色割当（2026-07-03 配色案2・柱トークン --kt-p-*）:
   整=青 / 貯=深緑 / 稼=褐色オレンジ / 増=紫 / 守=朱赤 / 使=テラコッタ。
   data-pillar="p0".."p5" 属性で対応（nth-child依存禁止・下の規則参照）。*/
.kt-pop .kth-card {
  border-width: 2px;
  border-radius: 22px;
  box-shadow: 0 8px 22px rgba(43,108,246,.08);
  background: #FFFFFF;
}
.kt-pop .kth-card:hover,
.kt-pop .kth-card:focus-within {
  transform: translateY(-4px);
  box-shadow: 0 16px 34px rgba(43,108,246,.16);
}
.kt-pop .kth-title { font-family: var(--kt-display); font-weight: 800; font-size: 21px; color: var(--ktp-ink); }
.kt-pop .kth-no { font-family: var(--kt-display); font-weight: 800; letter-spacing: .08em; }
.kt-pop .kth-symbol { width: 60px; height: 60px; }

/* 各柱のテーマ色（--kc=メイン, --kcb=薄面, --kcd=文字用の濃色）。
   2026-07-03 配色案2：nth-child依存をやめ、テンプレ側の data-pillar="p0".."p5"（p.id）で注入。
   --kcd は文字（柱番号・読了・トグル等）に使うため、AA未達の柱（整える/稼ぐ）は -text 変種を使う。 */
.kt-pop .kth-card[data-pillar="p0"] { --kc: var(--kt-p-totonoeru); --kcb: var(--kt-p-totonoeru-bg); --kcd: var(--kt-p-totonoeru-text); }
.kt-pop .kth-card[data-pillar="p1"] { --kc: var(--kt-p-tameru);   --kcb: var(--kt-p-tameru-bg);   --kcd: var(--kt-p-tameru); }
.kt-pop .kth-card[data-pillar="p2"] { --kc: var(--kt-p-kasegu);   --kcb: var(--kt-p-kasegu-bg);   --kcd: var(--kt-p-kasegu-text); }
.kt-pop .kth-card[data-pillar="p3"] { --kc: var(--kt-p-fuyasu);   --kcb: var(--kt-p-fuyasu-bg);   --kcd: var(--kt-p-fuyasu); }
.kt-pop .kth-card[data-pillar="p4"] { --kc: var(--kt-p-mamoru);   --kcb: var(--kt-p-mamoru-bg);   --kcd: var(--kt-p-mamoru); }
.kt-pop .kth-card[data-pillar="p5"] { --kc: var(--kt-p-tsukau);   --kcb: var(--kt-p-tsukau-bg);   --kcd: var(--kt-p-tsukau); }

/* 象徴SVGの器を、その柱の色のぽってり丸面に（白縁で抜く＝上質）。 */
.kt-pop .kth-card .kth-symbol {
  border-radius: 20px;
  background: var(--kcb, var(--ktp-indigo-bg));
  padding: 4px;
  box-shadow: inset 0 0 0 2px #FFFFFF;
}
/* 柱番号・読了・count をその柱の濃色に。 */
.kt-pop .kth-card .kth-no { color: var(--kcd, var(--ktp-indigo-d)); }
.kt-pop .kth-card .kth-done { color: var(--kcd, var(--ktp-indigo-d)); font-weight: 700; }
.kt-pop .kth-card .kth-lessons-toggle { color: var(--kcd, var(--ktp-indigo-d)); font-weight: 700; }
.kt-pop .kth-card .kth-lesson-no { color: var(--kcd, var(--ktp-indigo-d)); font-family: var(--kt-display); font-weight: 700; }
.kt-pop .kth-card .kth-lesson-link:hover .kth-lesson-title { color: var(--kcd, var(--ktp-indigo-d)); }
.kt-pop .kth-card .kth-lesson-row.is-done .kth-lesson-no::before { color: var(--kc, var(--ktp-indigo)); }

/* 進捗バー：その柱の色で満ちる（薄面トラック＋濃グラデのfill）。 */
.kt-pop .kth-card .kth-bar { height: 7px; background: var(--kcb, var(--ktp-indigo-bg)); }
.kt-pop .kth-card .kth-fill {
  background: linear-gradient(90deg, var(--kc, var(--ktp-indigo)), var(--kcd, var(--ktp-indigo-d)));
}

/* 完了した柱は、その柱の薄面で「達成」を楽しく示す。 */
.kt-pop .kth-card.is-done {
  border-color: var(--kc, var(--ktp-indigo));
  background: var(--kcb, var(--ktp-indigo-bg));
}

/* 「続ける器」クラブ帯：青の楽しい面に（控えめだが新baseに合わせる）。 */
.kt-pop .kt-hub-club { border-radius: 22px; }
.kt-pop .kt-hub-club-title { font-family: var(--kt-display); font-weight: 800; }

/* モーション配慮：pop でも reduce 尊重（baseの規則を踏襲）。 */
@media (prefers-reduced-motion: reduce) {
  .kt-pop .kth-card:hover, .kt-pop .kth-card:focus-within { transform: none; }
}

/* =====================================================================
   ▼ 学びの道（ロードマップ）v1（2026-06-26）：.kth-road
     ・初級→中級→上級→専門の「段階的な進行」を縦の道で可視化。
     ・「いまここ／次はここ／その先に専門」のマーカーで続ける意味を見せる。
     ・続けるほどの「深まり予告」（専門応用）を控えめなチップで。
     ・上質ポップ言語（白地＋色トークン・丸見出し・チャンキー角丸）を踏襲。
     ・390pxで横スクロール0（縦積み・幅は親に追従）。
   ===================================================================== */
.kth-road {
  margin: 30px 0 26px;
  padding: 22px 18px 20px;
  border: 2px solid #BBD2FF;
  border-radius: 26px;
  background: linear-gradient(170deg, var(--ktp-indigo-bg, #E7EFFF), #FFFFFF 70%);
  box-shadow: 0 12px 30px rgba(43,108,246,.10);
}
.kth-road-kicker {
  display: inline-block;
  margin: 0 0 10px;
  background: var(--ktp-indigo, #2B6CF6);
  color: #FFFFFF;
  border-radius: 999px;
  padding: 6px 15px;
  font-family: var(--kt-display);
  font-weight: 800;
  letter-spacing: .06em;
  font-size: 12.5px;
  box-shadow: 0 4px 12px rgba(43,108,246,.30);
  transform: rotate(-1.4deg);
}
.kth-road-h {
  margin: 0 0 6px;
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1.3;
  color: var(--ktp-ink, #1E2433);
}
.kth-road-sub {
  margin: 0 0 18px;
  color: var(--ktp-ink-soft, #5B6478);
  font-weight: 600;
  line-height: 1.75;
  font-size: 13.5px;
}

/* --- 縦の道：左に色の伸びる線、各段がノード（番号丸）でつながる --------- */
.kth-road-steps {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  position: relative;
}
.kth-road-step {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 0 0 18px 0;
}
.kth-road-step:last-child { padding-bottom: 0; }
/* 段と段をつなぐ縦線（ノードの中心を通す）。最後の段は線なし。 */
.kth-road-step::before {
  content: "";
  position: absolute;
  left: 17px;            /* ノード幅36pxの中心 */
  top: 36px;
  bottom: 0;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, var(--krs-c, var(--ktp-indigo)), var(--ktp-indigo-bg));
}
.kth-road-step:last-child::before { display: none; }

/* ノード（段番号の丸）＝段の色で。白フチで“貼った”感。 */
.kth-road-node {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 16px;
  color: #FFFFFF;
  background: var(--krs-c, var(--ktp-indigo));
  box-shadow: 0 0 0 3px #FFFFFF, 0 6px 16px rgba(43,108,246,.28);
  position: relative;
  z-index: 1;
}

.kth-road-body { min-width: 0; flex: 1 1 auto; }
.kth-road-stage {
  display: inline-block;
  background: var(--krs-bg, var(--ktp-indigo-bg));
  color: var(--krs-d, var(--ktp-indigo-d));
  border-radius: 999px;
  padding: 3px 11px;
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 12px;
  letter-spacing: .04em;
  margin-right: 6px;
}
/* 「いまここ／次はここ／その先に専門」のマーカー（続ける意味の核） */
.kth-road-badge-here,
.kth-road-badge-next,
.kth-road-badge-far {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 800;
  font-size: 11px;
  vertical-align: middle;
}
.kth-road-badge-here {
  background: var(--ktp-coral, #FF7A59);
  color: #FFFFFF;
  box-shadow: 0 4px 12px rgba(255,122,89,.30);
}
.kth-road-badge-next {
  background: var(--ktp-sun-bg, #FFF4D6);
  color: var(--ktp-sun-d, #B97F00);
}
.kth-road-badge-far {
  background: var(--ktp-mint-bg, #DEFAF3);
  color: var(--ktp-mint-d, #0E927F);
}
.kth-road-title {
  margin: 7px 0 3px;
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.35;
  color: var(--ktp-ink, #1E2433);
}
.kth-road-lead {
  margin: 0 0 9px;
  color: var(--ktp-ink-soft, #5B6478);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.65;
}
/* 段に含まれる柱への小リンク（チップ）。下のカードへアンカー。 */
.kth-road-pills { display: flex; flex-wrap: wrap; gap: 7px; }
.kth-road-pill {
  display: inline-block;
  background: #FFFFFF;
  border: 1.6px solid var(--krs-c, var(--ktp-indigo));
  color: var(--krs-d, var(--ktp-indigo-d));
  border-radius: 999px;
  padding: 4px 11px;
  font-weight: 800;
  font-size: 11.5px;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}
.kth-road-pill:hover {
  background: var(--krs-bg, var(--ktp-indigo-bg));
  transform: translateY(-1px);
}

/* 段ごとのテーマ色：初級=青 / 中級=サン / 上級=ミント。 */
.kth-road-step--basic { --krs-c: var(--ktp-indigo); --krs-bg: var(--ktp-indigo-bg); --krs-d: var(--ktp-indigo-d); }
.kth-road-step--mid   { --krs-c: var(--ktp-sun);    --krs-bg: var(--ktp-sun-bg);    --krs-d: var(--ktp-sun-d); }
.kth-road-step--adv   { --krs-c: var(--ktp-mint);   --krs-bg: var(--ktp-mint-bg);   --krs-d: var(--ktp-mint-d); }
.kth-road-step--mid .kth-road-node { box-shadow: 0 0 0 3px #FFFFFF, 0 6px 16px rgba(255,197,61,.34); color: #5A3D00; }
.kth-road-step--adv .kth-road-node { box-shadow: 0 0 0 3px #FFFFFF, 0 6px 16px rgba(24,199,174,.30); color: #04332C; }

/* いまここの段は、ほんのり強調（薄い色面で“現在地”を静かに示す）。 */
.kth-road-step.is-here .kth-road-body {
  background: rgba(255,255,255,.6);
  border-radius: 16px;
}

/* --- 深まり予告：続けるほど専門応用へ（控えめなチップの列） ----------- */
.kth-deepen {
  margin-top: 6px;
  padding: 16px 16px 14px;
  border: 2px dashed #BFEFE6;
  border-radius: 22px;
  background: linear-gradient(180deg, var(--ktp-mint-bg, #DEFAF3), #FFFFFF 80%);
}
.kth-deepen-h {
  margin: 0 0 4px;
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 16px;
  color: var(--ktp-mint-d, #0E927F);
}
.kth-deepen-sub {
  margin: 0 0 12px;
  color: var(--ktp-ink-soft, #5B6478);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.65;
}
.kth-deepen-list {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  gap: 9px;
}
.kth-deepen-item {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  background: #FFFFFF;
  border: 1.6px solid var(--kt-line, #E7E1D5);
  border-left: 6px solid var(--kdc, var(--ktp-indigo));
  border-radius: 14px;
  padding: 10px 12px;
}
.kth-deepen-from {
  font-weight: 800;
  font-size: 12px;
  color: var(--ktp-ink, #1E2433);
}
.kth-deepen-arrow {
  font-weight: 800;
  color: var(--kdc, var(--ktp-indigo));
}
.kth-deepen-to {
  font-family: var(--kt-display);
  font-weight: 800;
  font-size: 13px;
  color: var(--kdcd, var(--ktp-indigo-d));
  line-height: 1.35;
}
.kth-deepen-item--indigo { --kdc: var(--ktp-indigo); --kdcd: var(--ktp-indigo-d); }
.kth-deepen-item--mint   { --kdc: var(--ktp-mint);   --kdcd: var(--ktp-mint-d); }
.kth-deepen-item--coral  { --kdc: var(--ktp-coral);  --kdcd: var(--ktp-coral-d); }
.kth-deepen-item--sun    { --kdc: var(--ktp-sun);    --kdcd: var(--ktp-sun-d); }
.kth-deepen-note {
  margin: 6px 0 0;
  color: var(--ktp-ink-soft, #5B6478);
  font-size: 11.5px;
  line-height: 1.6;
}

@media (max-width: 380px) {
  .kth-road-h { font-size: 22px; }
  .kth-road { padding: 20px 14px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .kth-road-kicker { transform: none !important; }
  .kth-road-pill:hover { transform: none; }
}