/* ===== らぶスタAI＋ 本体UI =====
   本番アプリ（lovestar-app）の DESIGN_SYSTEM.md に合わせたトークン。
   色・角丸・書体を本番と揃えることで、デモが「別のツール」に見えないようにする。
   本番の値を変えたときは、ここも合わせること。 */

:root {
  /* ★書体。本番は next/font で Noto Serif JP / Noto Sans JP を読み込んでいる。
     ここでは各HTMLの <head> から Google Fonts で同じ2書体を読む。 */
  --serif: "Noto Serif JP", "Hiragino Mincho ProN", "Yu Mincho", serif;
  --sans:  "Noto Sans JP", "Hiragino Sans", system-ui, sans-serif;

  /* Lavender — ベース */
  --lv-50:  #f9f8fc;
  --lv-100: #f3eefb;
  --lv-200: #e8dbf6;
  --lv-300: #d6bdf0;
  --lv-400: #c49fe9;
  --lv-500: #ad7ee0;
  --lv-600: #955ed6;
  --lv-700: #7d42c8;
  --lv-800: #662d99;
  --lv-900: #4d1d75;

  /* Beige — 温かみ */
  --bg-100: #fdf6f0;
  --bg-200: #faede6;
  --bg-300: #f5ddce;
  --bg-500: #e8b8a3;
  --bg-700: #c08a74;

  /* Plum — テキスト・強調 */
  --pl-50:  #faf3f6;
  --pl-100: #f2e2e9;
  --pl-300: #d9a7b8;
  --pl-500: #b36b85;
  --pl-700: #9e4a67;
  --pl-900: #853d54;

  --gold: #d4af37;   /* ★AI＋の画面では「ゴールの◆」だけに使う。多用すると安く見える */
  --pink: #f8c3cd;
  --grad: linear-gradient(to right, #ad7ee0, #b36b85);
  --grad-bar: linear-gradient(to right, #c49fe9, #b36b85);

  /* 本番の shadow-soft / shadow-card。影はプラムではなくラベンダーで落とす */
  --shadow-soft: 0 4px 20px rgba(173, 126, 224, .08);
  --shadow-card: 0 10px 30px rgba(173, 126, 224, .12);

  --r-lg: 3rem;      /* 主カード */
  --r-md: 2.5rem;    /* 副カード */
  --r-sm: 2rem;      /* 白カード・表 */
}

* { box-sizing: border-box; }

body.lovesta {
  margin: 0;
  color: var(--pl-900);
  font-family: var(--sans);
  line-height: 1.85;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
}

/* ラベンダー畑の背景。
   ★background-attachment: fixed は iOS Safari で効かない（カクつく・伸びる）ので、
     position: fixed の擬似要素で敷く。本番と同じ絵で、カードを載せると「すりガラス」になる。 */
body.lovesta::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background: url("/img/lavandula.jpg") center / cover no-repeat;
}
/* 文字を読ませるためのベール。これが無いと写真の上で本文が沈む */
body.lovesta::after {
  content: ""; position: fixed; inset: 0; z-index: -1;
  background: linear-gradient(160deg, rgba(249,248,252,.62), rgba(253,246,240,.70) 55%, rgba(243,238,251,.66));
}

.lovesta h1, .lovesta h2, .lovesta h3, .lovesta h4 {
  font-family: var(--serif);
  color: var(--pl-700);
  font-weight: 700;
  letter-spacing: .04em;
}

.page { max-width: 860px; margin: 0 auto; padding: 28px 18px 64px; }

/* ── ヘッダー ── */
.brand { text-align: center; padding: 10px 0 16px; position: relative; }
.brand .logo {
  font-family: var(--serif);
  font-size: 30px; font-weight: 700; letter-spacing: .12em;
  background: var(--grad); -webkit-background-clip: text; background-clip: text;
  color: transparent;
}
.brand .logo-img { display: block; margin: 0 auto; width: 150px; max-width: 48%; height: auto; }
.brand .tag { font-size: 13px; color: var(--pl-500); letter-spacing: .08em; margin-top: 6px; }
.brand .out {
  position: absolute; top: 8px; right: 0;
  background: rgba(255,255,255,.6); border: 1px solid var(--pl-100); cursor: pointer;
  color: var(--pl-500); font-size: 12.5px; font-weight: 700;
  padding: 5px 14px; border-radius: 999px; backdrop-filter: blur(6px);
  transition: all .3s;
}
.brand .out:hover { background: #fff; color: var(--pl-900); }

/* ── カード（本番: bg-beige-100/95 backdrop-blur-sm rounded-[3rem] border-2） ── */
.card {
  background: rgba(253, 246, 240, .93);
  border: 2px solid rgba(250, 237, 230, .8);
  border-radius: var(--r-md);
  padding: 30px 26px;
  margin-bottom: 22px;
  box-shadow: var(--shadow-card);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.card.lav {
  background: rgba(243, 238, 251, .95);
  border-color: rgba(232, 219, 246, .8);
}
.card.white {
  background: rgba(255, 255, 255, .95);
  border-color: rgba(255, 255, 255, .6);
  border-radius: var(--r-sm);
}
.card.hero { border-radius: var(--r-lg); padding: 34px 28px; }

/* 見出し。本番の「縦バー付き h2」 */
.card h2 {
  font-size: 20px; margin: 0 0 18px;
  display: flex; align-items: center; gap: 12px;
}
.card h2::before {
  content: ""; width: 7px; height: 28px; border-radius: 999px;
  background: var(--pl-500); flex-shrink: 0; box-shadow: 0 1px 3px rgba(133,61,84,.18);
}
.card.lav h2::before { background: var(--lv-500); }

@media (max-width: 480px) {
  .page { padding: 20px 14px 56px; }
  .card { padding: 26px 20px; }
  .card.hero { padding: 30px 22px; }
  .brand .logo { font-size: 25px; }
  /* 幅が足りずロゴとログアウトが重なるので、ボタンを上に逃がす */
  .brand { padding-top: 34px; }
  .brand .out { top: -6px; }
}

/* ── ルートカード ── */
.route-card .no {
  display: inline-block; font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 12px; letter-spacing: .2em; color: var(--pl-700);
  border: 1px solid var(--bg-300); border-radius: 999px; padding: 3px 14px;
}
.route-card .rname {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 23px; font-weight: 700; color: var(--pl-700);
  line-height: 1.6; margin: 12px 0 4px;
  word-break: keep-all; overflow-wrap: break-word;
}
.route-card .pct {
  font-size: 13px; color: var(--pl-500);
}
.route-card .pct b {
  font-size: 22px; color: var(--pl-700); font-variant-numeric: tabular-nums;
  vertical-align: -1px; margin: 0 2px;
}

/* ── 進捗 ── */
.prog { margin-top: 22px; }
.prog .bar {
  height: 9px; border-radius: 999px; background: var(--lv-200); overflow: hidden;
}
.prog .bar i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(to right, var(--lv-400), var(--pl-500));
}
.prog .cap {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--pl-500); margin-bottom: 8px;
}
.prog .cap b { font-size: 15px; color: var(--pl-700); }

.steps-mini { margin-top: 20px; }
.steps-mini .s {
  display: flex; gap: 14px; padding: 11px 0;
  border-bottom: 1px dashed var(--bg-200); font-size: 14px;
}
.steps-mini .s:last-child { border-bottom: none; }
.steps-mini .s .n {
  width: 24px; height: 24px; line-height: 24px; text-align: center; flex-shrink: 0;
  border-radius: 50%; background: var(--lv-200); color: var(--pl-500); font-size: 12px;
}
.steps-mini .s.here .n { background: var(--pl-500); color: #fff; }
.steps-mini .s.here { color: var(--pl-900); font-weight: 700; }
.steps-mini .s.dim { color: var(--pl-500); opacity: .72; }

/* ── ボタン ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--grad); color: #fff; border: none; cursor: pointer;
  padding: 15px 30px; border-radius: 999px; font-size: 15px; font-weight: 700;
  letter-spacing: .06em; box-shadow: var(--shadow-soft);
  font-family: inherit; transition: transform .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: default; transform: none; }

/* ── チャット ── */
.chat-card { padding-bottom: 22px; }
.chat-log {
  max-height: 62vh; overflow-y: auto; padding: 4px 2px 8px;
  display: flex; flex-direction: column; gap: 14px;
  overscroll-behavior: contain;
}
/* ───────── チャット（LINEと同じ組み）─────────
 * アイコンは吹き出しの外・左に固定。名前は吹き出しの上。
 * ★アイコンを吹き出しの中に入れない。行が折り返したときに位置がずれる。 */
.msg { display: flex; align-items: flex-start; gap: 9px; max-width: 88%; font-size: 15px; line-height: 1.9; }
.msg.ai { align-self: flex-start; }
.msg.me { align-self: flex-end; max-width: 82%; }

.msg .av {
  flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  background: linear-gradient(150deg, #fdf1f4, #f6eefc);
  border: 1px solid var(--bg-200); display: grid; place-items: center;
}
.msg .av img { width: 100%; height: 100%; object-fit: cover; display: none; }
.msg .av img.ok { display: block; }
.msg .col { min-width: 0; }
.msg.ai .who {
  display: block; font-size: 11px; letter-spacing: .1em;
  color: var(--pl-500); margin: 0 0 4px 3px; font-weight: 700;
}
.msg .bub {
  display: inline-block; white-space: pre-wrap; word-break: break-word;
}
.msg.ai .bub {
  background: #fff; border: 1px solid var(--bg-200);
  border-radius: .4rem 1.3rem 1.3rem 1.3rem; padding: 13px 17px;
  box-shadow: var(--shadow-soft); color: var(--pl-900);
}
.msg.me .bub {
  background: var(--grad); color: #fff;
  border-radius: 1.3rem 1.3rem .4rem 1.3rem; padding: 12px 17px;
}
.msg .typing { color: var(--pl-300); }

.sugg { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.sugg button {
  background: #fff; border: 1px solid var(--lv-200); color: var(--pl-700);
  border-radius: 999px; padding: 8px 16px; font-size: 13px; cursor: pointer;
  font-family: inherit;
}
.sugg button:hover { background: var(--lv-100); border-color: var(--lv-300); }

.composer {
  display: flex; gap: 10px; align-items: flex-end; margin-top: 18px;
  padding-top: 18px; border-top: 1px solid var(--bg-200);
}
.composer textarea {
  flex: 1; resize: none; border: 1px solid var(--bg-200); border-radius: 1.3rem;
  padding: 13px 16px; font-size: 16px; font-family: inherit; line-height: 1.7;
  background: #fff; color: var(--pl-900); max-height: 140px;
}
.composer textarea:focus { outline: none; border-color: var(--lv-300); }
.composer button { padding: 13px 24px; font-size: 14px; flex-shrink: 0; }

/* ── 空状態（受講後に埋まる場所） ── */
.empty {
  text-align: center; padding: 34px 22px; border-radius: 2rem;
  border: 1px dashed var(--lv-200); background: rgba(255,255,255,.5);
  color: var(--pl-500); font-size: 14px; line-height: 2;
}
.empty b { display: block; color: var(--pl-700); font-size: 15px; margin-bottom: 6px; }

/* 受講後に見える画面の見本。実データではないことを必ず明示する */
.preview-note {
  font-size: 12px; color: var(--pl-500); margin-top: 14px; line-height: 1.9;
}

.demo-bar {
  background: var(--pl-700); color: #fff; font-size: 12px;
  padding: 8px 16px; text-align: center; letter-spacing: .08em;
}

.foot {
  font-size: 12px; color: var(--pl-500); line-height: 2;
  text-align: center; margin-top: 30px; padding: 0 10px;
}

/* ===== 下部タブ =====
   画面遷移ではなくタブ切り替えにしている。
   ページを読み込み直すとチャットの表示が作り直しになり、
   スクロール位置も入力途中の文字も消えるため。 */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  display: flex; background: rgba(249, 248, 252, .96);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--lv-200);
  padding-bottom: env(safe-area-inset-bottom);
}
.tabbar button {
  flex: 1; background: none; border: none; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 2px 10px; font-family: inherit;
  /* 3タブ×日本語ラベルは幅が厳しいので、2行前提で小さめに組む */
  font-size: 10px; line-height: 1.35; letter-spacing: 0; font-weight: 700;
  color: var(--pl-500); opacity: .65; text-align: center;
  border-top: 2px solid transparent; margin-top: -1px;
}
.tabbar button span { display: block; }
.tabbar button svg { width: 22px; height: 22px; }
.tabbar button.on {
  opacity: 1; color: var(--pl-700); border-top-color: var(--pl-500);
}
.tabbar button .dot {
  position: absolute; margin-left: 26px; margin-top: -2px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--lv-300);
}

/* タブ分の高さを空ける。空けないと最後のカードが隠れる */
.page { padding-bottom: 104px; }
@media (max-width: 480px) { .page { padding-bottom: 96px; } }

.panel { display: none; }
.panel.on { display: block; }

/* ── チャットタブ ──
 * 対話部分は高さを縛らず、ページごとスクロールさせる（会話が読みやすい）。
 * ただし入力欄はタブバーの上に貼り付けておく。
 *
 * ★以前は max-height: none だけを指定していたため、
 *   会話が伸びるほど入力欄が下へ押し出され、画面外に出ていた
 *   （14往復で 2,880px 地点＝画面外）。書くには全メッセージを
 *   スクロールし切る必要があり、事実上入力できない状態だった。
 */
.panel#panel-chat .chat-log {
  max-height: none; min-height: 46vh; overflow: visible;
  background: linear-gradient(180deg, rgba(173,126,224,.06), rgba(243,238,251,.42));
  border-radius: 18px; padding: 16px 12px;
}
.panel#panel-chat .composer {
  position: sticky; z-index: 15;
  /* タブバー（約72px＋セーフエリア）のぶん浮かせる */
  bottom: calc(76px + env(safe-area-inset-bottom));
  margin-top: 18px; padding: 14px;
  background: rgba(253, 246, 240, .96); backdrop-filter: blur(10px);
  border: 1px solid var(--bg-200); border-radius: 1.6rem;
  box-shadow: 0 6px 20px rgba(133, 61, 84, .12);
}
/* 入力欄を貼り付けたぶん、最後の発言が隠れないよう下に余白を作る */
.panel#panel-chat .chat-card { padding-bottom: 8px; }
@media (max-width: 480px) {
  .panel#panel-chat .composer { bottom: calc(72px + env(safe-area-inset-bottom)); padding: 11px; }
}

/* ===== セッション履歴（受講後の見本） ===== */
.preview-badge {
  display: inline-block; font-size: 11px; letter-spacing: .1em; font-weight: 700;
  color: var(--bg-700); background: var(--bg-200); border: 1px solid var(--bg-300);
  border-radius: 999px; padding: 3px 12px; margin-left: auto;
}
.card h2 .preview-badge { font-family: "Hiragino Sans", sans-serif; }

.sess {
  width: 100%; text-align: left; cursor: pointer; font-family: inherit;
  background: rgba(255,255,255,.7); border: 1px solid var(--bg-200);
  border-radius: 1.6rem; padding: 18px 20px; margin-bottom: 12px;
  transition: border-color .2s, box-shadow .2s;
  display: block; color: inherit;
}
.sess:hover { border-color: var(--lv-300); box-shadow: var(--shadow-soft); }
.sess.on { border-color: var(--pl-500); background: #fff; box-shadow: var(--shadow-card); }
.sess .row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.sess .no {
  background: var(--bg-200); color: var(--pl-700); font-weight: 700;
  border-radius: 999px; padding: 3px 12px;
}
.sess .when { color: var(--pl-500); }
.sess .to { margin-left: auto; color: var(--pl-700); font-weight: 700; font-size: 13px; }
.sess .ttl {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 17px; font-weight: 700; color: var(--pl-700);
  line-height: 1.6; margin: 9px 0 6px;
}
.sess .sum { font-size: 13px; color: var(--pl-900); opacity: .82; line-height: 1.85; }
.sess .mini { height: 5px; border-radius: 999px; background: var(--lv-200); margin-top: 12px; overflow: hidden; }
.sess .mini i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(to right, var(--lv-400), var(--pl-500));
}

/* 見本の時点を表示しているときの帯 */
.viewing {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--bg-200); border: 1px solid var(--bg-300);
  border-radius: 1.4rem; padding: 12px 18px; margin-bottom: 18px;
  font-size: 13px; color: var(--pl-700); line-height: 1.7;
}
.viewing button {
  margin-left: auto; background: #fff; border: 1px solid var(--bg-300);
  color: var(--pl-700); border-radius: 999px; padding: 6px 16px;
  font-size: 12px; font-weight: 700; cursor: pointer; font-family: inherit;
}
.viewing button:hover { background: var(--lv-100); }

.steps-mini .s.done { color: var(--pl-700); opacity: 1; }
.steps-mini .s.done .n { background: var(--bg-300); color: var(--pl-700); }

/* セッション見本の中の、発言と宿題 */
.sess .voice {
  margin-top: 12px; padding: 11px 15px; border-radius: 1rem;
  background: var(--lv-100); border: 1px solid var(--lv-200);
  font-size: 13px; color: var(--pl-700); line-height: 1.8;
}
.sess .voice em {
  display: block; font-style: normal; font-size: 11px;
  color: var(--lv-500); letter-spacing: .1em; font-weight: 700; margin-bottom: 3px;
}
.sess .hw {
  margin-top: 10px; font-size: 13px; color: var(--pl-900); line-height: 1.8;
  padding-left: 15px; border-left: 2px solid var(--bg-300);
}
.sess .hw em {
  display: block; font-style: normal; font-size: 11px;
  color: var(--bg-700); letter-spacing: .1em; font-weight: 700; margin-bottom: 3px;
}

/* ===== セッションレポート（既存レポートと同じ構成） ===== */
.sess .open {
  margin-top: 14px; padding-top: 14px; border-top: 1px dashed var(--bg-200);
}
.sess:not(.on) .open { display: none; }
.sess .more {
  margin-top: 10px; font-size: 12px; color: var(--lv-600); font-weight: 700;
}
.sess.on .more { display: none; }

.rep-h {
  font-size: 12px; letter-spacing: .1em; font-weight: 700; color: var(--pl-700);
  display: flex; align-items: center; gap: 8px; margin: 16px 0 9px;
}
.rep-h::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--pl-500);
}
.rep-h.gold::before { background: var(--pl-500); }
.rep-h.lav::before { background: var(--lv-500); }

/* バランススコア（本番はレーダー。ここは横棒で同じ6項目を出す） */
.scores { display: grid; gap: 7px; }
.scores .m { display: flex; align-items: center; gap: 10px; font-size: 12px; }
.scores .m .lbl { width: 68px; flex-shrink: 0; color: var(--pl-700); }
.scores .m .track { flex: 1; height: 7px; border-radius: 999px; background: var(--lv-200); overflow: hidden; }
.scores .m .track i { display: block; height: 100%; border-radius: 999px; background: var(--lv-500); }
.scores .m .val { width: 30px; text-align: right; color: var(--pl-700); font-variant-numeric: tabular-nums; }
.scores .m.focus .lbl { font-weight: 700; color: var(--pl-900); }
.scores .m.focus .track i { background: linear-gradient(to right, var(--lv-400), var(--pl-500)); }
.scores .cap { font-size: 11px; color: var(--pl-500); margin-top: 8px; }

.rep-box {
  background: rgba(255,255,255,.75); border: 1px solid var(--bg-200);
  border-radius: 1.1rem; padding: 13px 16px; font-size: 13px; line-height: 1.85;
}
.rep-box.route {
  background: var(--lv-100); border-color: var(--lv-200);
}
.rep-box.route b { color: var(--pl-700); }

.gotoloc {
  display: inline-block; cursor: pointer;
  color: var(--lv-700); font-weight: 700; font-size: 12px;
  border-bottom: 1px solid var(--lv-300); padding-bottom: 1px;
}
.gotoloc:hover { color: var(--pl-700); border-color: var(--pl-500); }

/* ===== 現在地（詳細版） ===== */
.now {
  border-radius: 2rem; padding: 22px 20px; margin: 20px 0 8px;
  background: linear-gradient(160deg, rgba(173,126,224,.13), rgba(179,107,133,.07));
  border: 1px solid var(--lv-300);
}
.now .kick {
  font-size: 11px; letter-spacing: .22em; font-weight: 700; color: var(--bg-700);
  display: flex; align-items: center; gap: 8px;
}
.now .kick .badge {
  background: var(--lv-300); color: #fff; border-radius: 999px;
  padding: 2px 10px; letter-spacing: .1em;
}
.now .when { font-size: 12px; color: var(--pl-500); margin-top: 12px; }
.now .name {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 21px; font-weight: 700; color: var(--pl-700);
  line-height: 1.6; margin: 4px 0 10px;
}
.now .what { font-size: 14px; line-height: 1.9; color: var(--pl-900); opacity: .9; }

.now .q {
  margin-top: 16px; padding: 14px 16px; border-radius: 1.1rem;
  background: rgba(255,255,255,.72); border: 1px solid var(--bg-200);
}
.now .q .lb {
  font-size: 11px; letter-spacing: .12em; font-weight: 700;
  color: var(--bg-700); margin-bottom: 5px;
}
.now .q .tx {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 16px; color: var(--pl-700); font-weight: 700; line-height: 1.75;
}

.now .pair { display: grid; gap: 9px; margin-top: 14px; }
.now .pair div { font-size: 13px; line-height: 1.8; }
.now .pair em {
  font-style: normal; font-weight: 700; font-size: 11px; letter-spacing: .1em;
  display: block; margin-bottom: 2px;
}
.now .pair .sign em { color: var(--lv-600); }
.now .pair .caut em { color: var(--bg-700); }

.now .todo {
  margin-top: 16px; padding: 15px 17px; border-radius: 1.2rem;
  background: #fff; border: 1px solid var(--pl-300);
}
.now .todo .lb {
  font-size: 11px; letter-spacing: .14em; font-weight: 700; color: var(--pl-500);
}
.now .todo .ttl { font-size: 15px; font-weight: 700; color: var(--pl-900); margin: 5px 0 4px; }
.now .todo .how { font-size: 13px; line-height: 1.85; color: var(--pl-900); opacity: .86; }

/* 全体の道のり（開閉できる） */
.road { margin-top: 26px; }
.road > .lb {
  font-size: 12px; letter-spacing: .12em; font-weight: 700;
  color: var(--pl-500); margin-bottom: 12px;
}
.rstep {
  width: 100%; text-align: left; font-family: inherit; color: inherit; cursor: pointer;
  background: none; border: none; border-bottom: 1px dashed var(--bg-200);
  padding: 12px 0; display: block;
}
.rstep:last-of-type { border-bottom: none; }
.rstep .hd { display: flex; gap: 12px; align-items: flex-start; }
.rstep .n {
  width: 25px; height: 25px; line-height: 25px; text-align: center; flex-shrink: 0;
  border-radius: 50%; background: var(--lv-200); color: var(--pl-500); font-size: 12px;
}
.rstep.done .n { background: var(--bg-300); color: var(--pl-700); }
.rstep.here .n { background: var(--pl-500); color: #fff; box-shadow: 0 0 0 5px rgba(179,107,133,.16); }
.rstep .tx { font-size: 14px; line-height: 1.7; }
.rstep.here .tx { font-weight: 700; color: var(--pl-900); }
.rstep.next .tx { color: var(--pl-900); }
.rstep:not(.here):not(.next) .tx { color: var(--pl-500); opacity: .78; }
.rstep .sub { font-size: 11px; color: var(--pl-500); margin-top: 3px; }
.rstep .det { display: none; margin: 10px 0 2px 37px; font-size: 12.5px; line-height: 1.85; }
.rstep.open .det { display: block; }
.rstep .det .k { color: var(--lv-600); font-weight: 700; }
.rstep .det .c { color: var(--bg-700); font-weight: 700; }
.rstep .tip { font-size: 11px; color: var(--lv-600); margin-top: 4px; }
.rstep.open .tip { display: none; }

.goalrow {
  margin-top: 10px; padding: 20px 22px; border-radius: 1.6rem;
  background: linear-gradient(160deg, rgba(173,126,224,.16), rgba(179,107,133,.08));
  border: 1px solid var(--lv-300);
}
.goalrow .lb { font-size: 11px; letter-spacing: .24em; color: var(--bg-700); font-weight: 700; }
.goalrow .g {
  font-family: "Hiragino Mincho ProN", "Yu Mincho", serif;
  font-size: 18px; font-weight: 700; color: var(--pl-700); line-height: 1.75; margin-top: 8px;
}
.goalrow .g + .g { margin-top: 6px; }
.remain {
  margin-top: 14px; font-size: 12.5px; color: var(--pl-500); line-height: 1.9;
}
.remain b { color: var(--pl-700); }

/* 通過済みの段階は「達成した」見た目にする。薄くすると努力が消えて見える */
.rstep.done .tx { color: var(--pl-700); opacity: 1; }
.rstep.done .n { background: var(--pl-500); color: #fff; }

/* ===== この段階のToDo =====
   「AIに従えば進む」を作る中心。判断させず、チェックするだけにする。 */
.todos { margin-top: 18px; }
.todos .hd {
  display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px;
}
.todos .hd .lb {
  font-size: 11px; letter-spacing: .14em; font-weight: 700; color: var(--pl-500);
}
.todos .hd .cnt {
  margin-left: auto; font-size: 13px; font-weight: 700; color: var(--pl-700);
  font-variant-numeric: tabular-nums;
}
.todos .track {
  height: 6px; border-radius: 999px; background: var(--lv-200);
  overflow: hidden; margin: 8px 0 12px;
}
.todos .track i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(to right, var(--lv-400), var(--pl-500));
  transition: width .35s ease;
}
.todo {
  width: 100%; text-align: left; font-family: inherit; cursor: pointer;
  display: flex; gap: 12px; align-items: flex-start;
  background: #fff; border: 1px solid var(--bg-200); border-radius: 1.1rem;
  padding: 13px 15px; margin-bottom: 8px;
  font-size: 13.5px; line-height: 1.8; color: var(--pl-900);
  transition: border-color .2s, background .2s;
}
.todo:hover { border-color: var(--lv-300); }
.todo .box {
  width: 21px; height: 21px; flex-shrink: 0; margin-top: 2px;
  border-radius: 7px; border: 1.5px solid var(--lv-300); background: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; color: #fff; line-height: 1;
}
.todo.done { background: rgba(173,126,224,.09); border-color: var(--lv-300); }
.todo.done .box { background: var(--lv-300); border-color: var(--lv-300); }
.todo.done .tx { text-decoration: line-through; opacity: .62; }

.todos .after {
  font-size: 12px; line-height: 1.85; color: var(--pl-500); margin-top: 10px;
}
.todos .after b { color: var(--pl-700); }
.todos .after.clear {
  color: var(--pl-700); background: rgba(173,126,224,.12);
  border: 1px solid var(--lv-300); border-radius: 1rem; padding: 11px 14px;
}

/* 道のりの各段階に、ToDoの進み具合を出す */
.rstep .todocnt {
  font-size: 11px; color: var(--bg-700); font-weight: 700; margin-left: 8px;
}

/* ルート結果画面はタブバーが無いので、その分の余白を戻す */
body.lovesta:not(:has(.tabbar)) .page { padding-bottom: 64px; }

/* ───────── グラフ（既存ダッシュボードと同じ6項目・同じ配色） ───────── */
.chart-h { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--pl-700);
  margin: 4px 0 10px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.chart-h .cap2 { font-family: var(--sans); font-size: 11.5px; font-weight: 500; color: var(--pl-500); }
.chart-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
  background: #fff; border: 1px solid var(--lv-200); border-radius: 20px; padding: 10px 6px; }
/* 既存アプリと同じく、入りきらないぶんは横スクロールで見せる（間引かない）。
   1回あたり46pxを確保して、第◯回のラベルが重ならないようにしてある。 */
.linechart { display: block; height: auto; }
.linechart .ax { font-size: 10px; fill: var(--pl-500); font-family: var(--sans); }
.linechart .ax.tot { font-size: 11px; font-weight: 700; fill: var(--pl-700); }
.linechart .ax.no { font-size: 10px; fill: var(--lv-600); }
.legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 10px 0 20px;
  font-size: 11.5px; color: var(--pl-700); }
.legend .lg { display: inline-flex; align-items: center; gap: 5px; }
.legend .lg i { width: 14px; height: 3px; border-radius: 2px; display: inline-block; }

.balance { display: grid; grid-template-columns: 1fr; gap: 6px; align-items: center; }
@media (min-width: 620px) { .balance { grid-template-columns: 260px 1fr; gap: 16px; } }
.radar { display: block; width: 100%; max-width: 260px; margin: 0 auto; height: auto; }
.radar .rlbl { font-size: 10.5px; font-weight: 700; fill: var(--pl-900); font-family: var(--sans); }
.radar .rlbl.gold { fill: var(--pl-500); }
.scores .track { position: relative; }
.scores .track u { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff;
  border-radius: 2px; transform: translateX(-1px); box-shadow: 0 0 0 1px rgba(133,61,84,.14); }

/* ───────── エネルギーマトリクス（既存レポートと同じ4象限） ───────── */
.mtx-wrap { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 0 0 6px; }
@media (min-width: 620px) { .mtx-wrap { grid-template-columns: 240px 1fr; align-items: center; } }
.mtx { position: relative; width: 100%; max-width: 240px; margin: 0 auto; aspect-ratio: 1;
  display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 2px; background: var(--lv-200);
  border-radius: 18px; overflow: hidden; }
.mtx .q { display: flex; align-items: flex-start; justify-content: center; padding-top: 8px;
  font-size: 11px; font-weight: 700; color: var(--pl-500); }
.mtx .q1 { background: #eef4fd } .mtx .q2 { background: #fdf8e8 }
.mtx .q3 { background: #f5f4f7 } .mtx .q4 { background: #eef8f0 }
.mtx .ax-y, .mtx .ax-x { position: absolute; font-size: 9.5px; color: var(--pl-500);
  background: rgba(255,255,255,.8); border-radius: 6px; padding: 1px 5px; z-index: 2; }
.mtx .ax-y.top { top: 4px; left: 50%; transform: translateX(-50%) }
.mtx .ax-y.bottom { bottom: 4px; left: 50%; transform: translateX(-50%) }
.mtx .ax-x.left { left: 4px; top: 50%; transform: translateY(-50%) }
.mtx .ax-x.right { right: 4px; top: 50%; transform: translateY(-50%) }
.mtx .dot { position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px; z-index: 3; }
.mtx .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%;
  background: var(--pl-500); box-shadow: 0 0 0 3px rgba(173,126,224,.28); }
.mtx .dot i { position: absolute; inset: 0; border-radius: 50%; background: var(--lv-300);
  opacity: .55; animation: mtxping 1.9s cubic-bezier(0,0,.2,1) infinite; }
@keyframes mtxping { 0% { transform: scale(1); opacity: .55 } 80%,100% { transform: scale(2.4); opacity: 0 } }
.mtx-note { font-size: 12.5px; line-height: 1.85; color: var(--pl-900); }
.mtx-note b { display: block; color: var(--pl-700); margin-bottom: 4px; }

/* ───────── ミクロ分析22項目 ───────── */
.acc { margin: 6px 0 4px; }
.acc-h { display: inline-block; font-size: 12.5px; font-weight: 700; color: var(--lv-700);
  cursor: pointer; padding: 6px 0; border-bottom: 1px solid var(--lv-300); }
.acc-b { margin-top: 12px; background: #fff; border: 1px solid var(--lv-200);
  border-radius: 20px; padding: 14px 16px; }
.acc-b .mg { font-family: var(--serif); font-size: 13px; font-weight: 700; color: var(--pl-700);
  margin: 14px 0 8px; padding-bottom: 5px; border-bottom: 1px dashed var(--lv-200); }
.acc-b .mg:first-child { margin-top: 0 }
.acc-b .mi { margin: 0 0 12px }
.acc-b .mi-h { display: flex; justify-content: space-between; align-items: baseline;
  font-size: 12px; color: var(--pl-900); }
.acc-b .mi-h b { font-family: var(--serif); color: var(--pl-700) }
.acc-b .mi-bar { display: block; height: 5px; border-radius: 3px; background: var(--lv-100);
  margin: 4px 0 5px; overflow: hidden; }
.acc-b .mi-bar i { display: block; height: 100%; border-radius: 3px; }
.acc-b .mi-bar i.hi { background: var(--pl-500) }
.acc-b .mi-bar i.mid { background: var(--lv-400) }
.acc-b .mi-bar i.lo { background: var(--lv-200) }
.acc-b .mi-r { font-size: 11.5px; line-height: 1.8; color: var(--pl-500); }

/* グラフのツールチップ。既存アプリの recharts Tooltip と同じ内容を出す */
.chart-inner { position: relative; }
.linechart .guide { stroke: var(--lv-300); stroke-width: 1; stroke-dasharray: 4 3; }
.linechart .hit { cursor: pointer; }
.chart-tip {
  position: absolute; top: 8px; width: 178px; z-index: 3; pointer-events: none;
  background: rgba(255, 255, 255, .97); border: 1px solid var(--lv-200);
  border-radius: 14px; padding: 9px 11px; box-shadow: var(--shadow-card);
}
.chart-tip .h {
  font-family: var(--serif); font-size: 12.5px; font-weight: 700; color: var(--pl-700);
  padding-bottom: 5px; margin-bottom: 5px; border-bottom: 1px solid var(--lv-100);
}
.chart-tip .h span { font-family: var(--sans); font-size: 10.5px; font-weight: 500; color: var(--pl-500); }
.chart-tip .r { display: flex; align-items: center; gap: 6px; font-size: 11.5px; line-height: 1.9; }
.chart-tip .r i { width: 9px; height: 3px; border-radius: 2px; flex: 0 0 auto; }
.chart-tip .r span { flex: 1; color: var(--pl-900); }
.chart-tip .r b { font-family: var(--serif); color: var(--pl-700); font-variant-numeric: tabular-nums; }
.chart-tip .t {
  margin-top: 6px; padding-top: 5px; border-top: 1px solid var(--lv-100);
  font-size: 11px; font-weight: 700; color: var(--bg-700); text-align: right;
}
.chart-hint { margin: 6px 0 18px; font-size: 11px; color: var(--pl-500); text-align: center; }

/* ───────── 利用回数 ─────────
 * 「制限」として見せず、**入会後との差**を見せる場所にする。
 * 残りが0でも、入会後の数字は必ず出す。
 */
.usage {
  margin: -4px 0 16px; padding: 12px 16px; border-radius: 1.4rem;
  background: linear-gradient(140deg, rgba(173,126,224,.13), rgba(173,126,224,.08));
  border: 1px solid var(--bg-300);
}
.usage.slim {
  margin: -2px 0 14px; padding: 8px 14px; border-radius: 999px;
  background: rgba(255,255,255,.6); border: 1px dashed var(--lv-200);
  font-size: 12px; color: var(--pl-500); line-height: 1.8;
}
.usage.slim b { color: var(--pl-700); }
.usage.slim i { font-style: normal; color: var(--pl-300); }
.usage.slim i b { color: var(--gold); font-family: var(--serif); }
.usage.slim.out { border-style: solid; background: rgba(173,126,224,.08); }

/* きっかけチップ。空のチャットで「何を書けばいいか分からない」の壁を、質問の見本で崩す */
.starters { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin: 2px 0 0 47px; }
.st-l { font-size: 11px; color: var(--pl-300); letter-spacing: .04em; }
.st-c {
  font: inherit; font-size: 13px; color: var(--pl-700); cursor: pointer;
  background: #fff; border: 1.5px solid var(--lv-200); border-radius: 999px;
  padding: 9px 16px; transition: all .2s; text-align: left;
}
.st-c:hover { border-color: var(--lv-400); background: rgba(173,126,224,.06); }
.usage .now { font-size: 13px; line-height: 1.9; color: var(--pl-900); }
.usage .now b { color: var(--pl-700); }
.usage .now .left {
  display: inline-block; margin-left: 8px; padding: 2px 10px; border-radius: 999px;
  background: #fff; border: 1px solid var(--bg-300);
  font-size: 12px; font-weight: 700; color: var(--bg-700);
}
.usage .after {
  margin-top: 7px; padding-top: 7px; border-top: 1px dashed rgba(173,126,224,.5);
  font-size: 13.5px; line-height: 1.85; color: var(--pl-700); font-weight: 700;
}
.usage .after b {
  font-family: var(--serif); font-size: 16px;
  background: linear-gradient(100deg, #9e4a67, #bf9226);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.usage.out { background: linear-gradient(140deg, rgba(173,126,224,.2), rgba(232,184,163,.14)); }
.usage.out .now { color: var(--pl-500); }

/* ───────── タブバー（4つ） ─────────
 * 日報を4つ目のタブにしたぶん、ラベルを短くして幅を確保する。
 */
.tabbar .tab-link {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 9px 2px 10px; text-decoration: none; position: relative;
  font-size: 10px; line-height: 1.35; font-weight: 700;
  color: var(--pl-500); opacity: .65; text-align: center;
  border-top: 2px solid transparent; margin-top: -1px;
}
.tabbar .tab-link svg { width: 22px; height: 22px; }
.tabbar .tab-link .dot {
  position: absolute; top: 7px; right: calc(50% - 17px);
  width: 7px; height: 7px; border-radius: 50%; background: var(--lv-300);
  box-shadow: 0 0 0 2px rgba(249,248,252,.96);
}
@media (max-width: 380px) {
  .tabbar button, .tabbar .tab-link { font-size: 9px; letter-spacing: -.02em; }
  .tabbar button svg, .tabbar .tab-link svg { width: 20px; height: 20px; }
}

/* 浮かせていた日報ボタンは、タブに移したので下の余白を戻す */
.page { padding-bottom: 104px; }
@media (max-width: 480px) { .page { padding-bottom: 96px; } }
.panel#panel-chat .composer { bottom: calc(76px + env(safe-area-inset-bottom)); }
@media (max-width: 480px) { .panel#panel-chat .composer { bottom: calc(72px + env(safe-area-inset-bottom)); } }
.tabbar .tab-link.on { opacity: 1; color: var(--pl-700); border-top-color: var(--pl-500); }

/* ───────── 中長期のダッシュボード ─────────
 * ★黒いカードにしない。ここだけ地の色が違うと、貼り付けたように見える。
 *   アプリ全体と同じ淡い地の上に、道と現在地だけを描く。
 */
.jmap-card {
  background: linear-gradient(170deg, rgba(255,255,255,.9), rgba(249,248,252,.7));
  border-color: var(--bg-200);
}
.jmap-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; }
.jmap-h .cap {
  display: block; font-size: 11px; letter-spacing: .18em; color: var(--bg-700);
  font-weight: 700; margin-bottom: 4px;
}
.jmap-h b {
  font-family: var(--serif); font-size: 16px; color: var(--pl-700); line-height: 1.5;
}
.jmap-n { flex: 0 0 auto; text-align: right; white-space: nowrap; }
.jmap-n b { font-family: var(--serif); font-size: 26px; color: var(--pl-700); }
.jmap-n i { font-style: normal; font-size: 13px; color: var(--pl-500); margin-left: 3px; }

.jmap-svg { display: block; width: 100%; height: auto; margin-top: 6px; }

/* 道。通過したぶんだけ色づく */

/* 段階 */



/* 各段階の要素。ひとつ達成するたびに、上の点が埋まっていく */

/* 行き先 */

.jmap-goal {
  margin-top: 10px; padding-top: 12px; border-top: 1px dashed var(--bg-300);
  font-family: var(--serif); font-size: 15.5px; font-weight: 700;
  color: var(--pl-700); line-height: 1.75;
}
.jmap-goal span {
  display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; color: var(--bg-700); margin-bottom: 4px;
}

/* ───────── 週次のダッシュボード ───────── */
.wk { margin-top: 16px; }
.wk-head { padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--bg-200); }
.wk-cap { font-size: 11px; letter-spacing: .18em; color: var(--bg-700); font-weight: 700; }
.wk-goal {
  font-family: var(--serif); font-size: 16.5px; font-weight: 700;
  color: var(--pl-700); line-height: 1.7; margin-top: 6px;
}
.wk-now { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.wk-now .n {
  flex: 0 0 30px; height: 30px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 13px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(150deg, var(--lv-500), var(--pl-500));
}
.wk-now .t b { display: block; font-family: var(--serif); font-size: 15.5px; color: var(--pl-900); }
.wk-now .t i { display: block; font-style: normal; font-size: 11.5px; color: var(--pl-500); margin-top: 2px; }

.wk-list { display: grid; gap: 8px; }
.wk-row {
  display: flex; align-items: center; gap: 11px; width: 100%; text-align: left;
  font: inherit; font-size: 14.5px; line-height: 1.7; color: var(--pl-900);
  background: #fff; border: 1px solid var(--lv-200); border-radius: 1.2rem;
  padding: 12px 14px; cursor: pointer; transition: border-color .15s, background .15s;
}
.wk-row:hover { border-color: var(--lv-400); }
.wk-row.on { background: linear-gradient(140deg, rgba(173,126,224,.12), #fff 70%); border-color: var(--lv-300); }
.wk-row.on .wk-tx { color: var(--pl-500); text-decoration: line-through; text-decoration-color: rgba(179,107,133,.4); }
.wk-mk { font-size: 17px; line-height: 1; flex: 0 0 auto; }
.wk-tx { flex: 1; min-width: 0; }
.wk-ck {
  flex: 0 0 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--lv-300);
  display: flex; align-items: center; justify-content: center; font-size: 13px; color: #fff;
}
.wk-row.on .wk-ck { background: var(--lv-300); border-color: var(--lv-300); }

.wk-sign {
  margin-top: 14px; font-size: 12.5px; line-height: 1.9; color: var(--pl-500);
  background: var(--bg-100); border-radius: 1.2rem; padding: 12px 15px;
}
.wk-sign b { display: block; color: var(--bg-700); font-size: 11px; letter-spacing: .12em; margin-bottom: 3px; }
.wk-next {
  margin-top: 12px; font-size: 13px; line-height: 1.9; color: var(--pl-700);
  background: linear-gradient(140deg, rgba(173,126,224,.15), #fff 75%);
  border: 1px solid var(--lv-300); border-radius: 1.3rem; padding: 14px 16px;
}
.wk-next span { color: var(--pl-500); font-size: 12px; }

/* ───────── パターンの星図（全画面） ─────────
 * ★ここだけ暗い地にする。埋め込みではなく全画面で開く一枚絵なので、
 *   点が光ることそのものが主役になる。
 */

.cst-wrap {
  position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center;
  padding: 18px; background: rgba(18,12,24,.78); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s;
}
.cst-wrap.on { opacity: 1; }
.cst {
  position: relative; width: 100%; max-width: 430px; max-height: 92dvh; overflow-y: auto;
  background: radial-gradient(120% 90% at 50% 30%, #241a30, #150f1c 70%);
  border: 1px solid #3d2f4e; border-radius: 30px; padding: 20px 18px 22px;
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  transform: translateY(10px) scale(.98); transition: transform .22s cubic-bezier(.2,.7,.3,1);
}
.cst-wrap.on .cst { transform: none; }
.cst-x {
  position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%;
  background: rgba(255,255,255,.08); border: 1px solid #4a3a5c; color: #cbb8dd;
  font-size: 14px; cursor: pointer; line-height: 1;
}
.cst-h { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 10px; }
.cst-h .cap { font-size: 13px; letter-spacing: .16em; color: #9583a8; font-weight: 700; }
.cst-h .n b { font-family: var(--serif); font-size: 27px; color: #f3eefb; }
.cst-h .n i { font-style: normal; font-size: 12px; color: #9583a8; margin-left: 3px; }
.cst-h .n em {
  font-style: normal; display: block; text-align: right; font-size: 11px; color: #d4af37; margin-top: 1px;
}

.cst-svg { display: block; width: 100%; height: auto; margin: 2px 0 4px; }
.cst .core-glow { animation: cstBreath 4s ease-in-out infinite; transform-origin: center; }
@keyframes cstBreath { 0%,100% { opacity: .75 } 50% { opacity: 1 } }

/* 線。両端が点いたときだけ光る。
   奥行き（透明度）は JS が毎フレーム更新するので、ここでは色と太さだけ決める */
.cst .cpulse {
  fill: #efe4fc; pointer-events: none;
  filter: drop-shadow(0 0 5px rgba(214,189,240,.95));
}
.cst-sub {
  text-align: left; font-size: 13px; color: #9d87c2;
  letter-spacing: .05em; margin: 3px 0 0;
}
.cst .dk-ava i { color: #b9a7d6; }
.cst .dk1 p { background: rgba(255,255,255,.92); border-color: rgba(214,189,240,.4); }
.cst-note { margin-top: 14px; }
.cst .cl { stroke: #2b2239; stroke-width: .8; }
.cst .cl.near { stroke: #251d31; stroke-width: .7; }
.cst .cl.main { stroke: #3a2d4d; stroke-width: 1.1; }
.cst .cl.on { stroke: #a97fe0; stroke-width: 1.1; }
.cst .cl.near.on { stroke: #8f6bc4; stroke-width: .9; }
.cst .cl.kind.on { stroke: #b98fe6; stroke-width: 1.2; }
.cst .cl.grow.on { stroke: #d6bdf0; stroke-width: 1.7; }
.cst .cl.main.on { stroke: #ecdffb; stroke-width: 2; filter: drop-shadow(0 0 4px rgba(214,189,240,.6)); }

/* 要素。達成すると点灯する */
.cst .cn { transition: none; }
.cst .cn .halo { fill: transparent; }
.cst .cn .dot { fill: #241c2d; stroke: #4a3a5c; stroke-width: 1.2; }
.cst .cn .lb {
  font-family: var(--sans); font-weight: 700; fill: #6f5f83;
  paint-order: stroke; stroke: #150f1c; stroke-width: 2.5px; stroke-linejoin: round;
}
.cst .cn.on .halo { fill: #ad7ee0; opacity: .2;
  animation: cstPulse 3.4s ease-in-out infinite; animation-delay: calc(var(--i) * .09s); }
.cst .cn.on .dot { filter: drop-shadow(0 0 7px rgba(214,189,240,.95)); stroke-width: 1.5; }
.cst .cn.on .lb { fill: #efe6f8; }
.cst .cn.on .dot.k0 { fill: #d6bdf0; stroke: #e2d1f5; }
.cst .cn.on .dot.k1 { fill: #f0c9d6; stroke: #f8dde5; }
.cst .cn.on .dot.k2 { fill: #e8c99f; stroke: #f3ddbe; }
.cst .cn.on .dot.k3 { fill: #a8c9e8; stroke: #c9dff3; }
@keyframes cstPulse { 0%,100% { opacity: .12 } 50% { opacity: .26 } }

.cst-core circle { fill: #2b2038; stroke: #d6bdf0; stroke-width: 1.6;
  filter: drop-shadow(0 0 16px rgba(214,189,240,.6)); }
.cst-core text { fill: #f3eefb; font-size: 18px; }

.cst-t {
  font-family: var(--serif); font-weight: 700; letter-spacing: .04em;
  color: #f3eefb; padding-right: 46px; line-height: 1.5; font-size: 21px;
}
.cst-goal {
  text-align: center; margin-top: 10px; padding: 14px 14px 16px; border-radius: 16px;
  background: linear-gradient(160deg, rgba(214,189,240,.10), rgba(255,255,255,.03));
  border: 1px solid rgba(214,189,240,.22);
}
.cst-goal .cg-l {
  display: block; font-size: 12px; font-weight: 700; letter-spacing: .16em; color: #b9a8d0;
}
.cst-goal .cg-t {
  font-family: var(--serif); font-size: 23px; font-weight: 700;
  color: #f3eefb; line-height: 1.8; margin: 8px 0 0;
}
.cst-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px 16px; margin-top: 14px; }
.cst-legend .lg { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: #9583a8; }
.cst-legend .lg i { width: 8px; height: 8px; border-radius: 50%; background: #4a3a5c; }
.cst-legend .lg i.k0 { background: #d6bdf0 }
.cst-legend .lg i.k1 { background: #f0c9d6 }
.cst-legend .lg i.k2 { background: #e8c99f }
.cst-legend .lg i.k3 { background: #a8c9e8 }
.cst-note {
  margin-top: 14px; padding-top: 13px; border-top: 1px solid #2e2440;
  font-size: 12px; line-height: 1.9; color: #9583a8; text-align: center;
}
.cst-note b { color: #d6bdf0; }

/* 32要素版の調整。外側（つづける）は控えめに、内側（はじめる）を主役にする */
.cst { max-width: 560px; }
.cst .cn.out .dot { opacity: .92; }
.cst .cn.out.on .lb { fill: #c3aede; }
/* はじめる → つづける をつなぐ線。育っていく方向なので、点線にしない */
.cst .cl.grow { stroke: #33283f; }
.cst .cl.grow.on {
  stroke: #c9a7ea; stroke-opacity: .8; stroke-width: 1.6;
  stroke-dasharray: none; animation: none;
}
.cst-legend .lg i.ring { background: transparent; border: 1.5px solid #7a6a91; }

/* 3D。手前の点を大きく見せるので、外側も薄くしすぎない */
.cst .cn.out .dot { opacity: .95; }
.cst .cn.out.on .lb { fill: #cbb6e6; }
.cst-svg { touch-action: pan-y; }

/* 64要素版。点が倍になるので、1つずつを小さく・線を細くして毛玉にしない */
.cst .cl { stroke-width: .7; }
.cst .cl.near { stroke-width: .6; }
.cst .cl.on { stroke-width: .9; }
.cst .cl.near.on { stroke-width: .7; }
.cst .cl.kind.on { stroke-width: 1; }
.cst .cl.grow.on { stroke-width: 1.4; }
.cst .cn.on .halo { animation-duration: 4.2s; }
/* 種類が8つになったので、凡例は2段に収める */
.cst-legend { gap: 6px 13px; }
.cst-legend .lg { font-size: 11px; }
.cst-legend .lg i.k4 { background: #9fd8c4 }
.cst-legend .lg i.k5 { background: #e8b8a3 }
.cst-legend .lg i.k6 { background: #c8b8e8 }
.cst-legend .lg i.k7 { background: #e8a8c0 }
.cst .cn.on .dot.k4 { fill: #b8e8d8; stroke: #d4f2e8; }
.cst .cn.on .dot.k5 { fill: #f0cdb8; stroke: #f8e2d4; }
.cst .cn.on .dot.k6 { fill: #d8cdf0; stroke: #e8e0f8; }
.cst .cn.on .dot.k7 { fill: #f0bcd0; stroke: #f8d8e4; }

/* ───────── 完成形を見るボタン ─────────
 * 「あと何個で、この姿になるか」を見せる場所。金で、いちばん強く出す。
 */
.cst-full {
  display: block; width: 100%; margin-top: 16px; padding: 15px 18px;
  border: 0; border-radius: 1.5rem; cursor: pointer; text-align: center;
  background: linear-gradient(135deg, #f0d68a 0%, #d4af37 45%, #b8912a 100%);
  box-shadow: 0 6px 20px rgba(212,175,55,.34), inset 0 1px 0 rgba(255,255,255,.45);
  position: relative; overflow: hidden;
  transition: transform .15s, box-shadow .15s;
}
.cst-full:hover { transform: translateY(-1px); box-shadow: 0 9px 26px rgba(212,175,55,.42), inset 0 1px 0 rgba(255,255,255,.45); }
.cst-full:active { transform: translateY(0); }
/* 表面を光が横切る */
.cst-full::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent);
  animation: cstShine 3.4s ease-in-out infinite;
}
@keyframes cstShine { 0% { left: -60% } 55%,100% { left: 130% } }
.cst-full .t {
  display: block; font-family: var(--serif); font-size: 16.5px; font-weight: 700;
  color: #3d2b06; letter-spacing: .06em; position: relative; z-index: 1;
}
.cst-full .s {
  display: block; font-size: 11.5px; color: rgba(61,43,6,.72); margin-top: 3px;
  position: relative; z-index: 1;
}

/* 完成形を出しているあいだ。順に点灯していく */
.cst .cn.lighting .dot, .cst .cn.lighting .halo, .cst .cn.lighting .lb {
  animation: cstLightUp .5s ease-out both;
  animation-delay: var(--d, 0s);
}
@keyframes cstLightUp { from { opacity: 0; transform: scale(.4) } to { opacity: 1; transform: none } }
.cst.full .cl.on { animation: cstLinkUp .45s ease-out both; animation-delay: var(--d, 0s); }
@keyframes cstLinkUp { from { opacity: 0 } to { opacity: 1 } }
.cst.full .cst-core circle { filter: drop-shadow(0 0 26px rgba(240,214,138,.8)); stroke: #f0d68a; }
.cst.full .core-glow { opacity: 1; }
.cst.full .cst-h .n em { color: #f0d68a; }

/* ───────── 設計図タブ ─────────
 * ①誰であるか → ②どこにいるか → ③何をするか → ④なぜそうするか
 * 同じことを2回言わない。理想の未来は①、チェックリストは③にだけ置く。
 */
/* 見本切替。★2つの状態の行き来なので、リンクではなくセグメント（2択）で見せる */
.viewbar {
  display: flex; gap: 4px; margin: 0 0 16px; padding: 4px;
  border-radius: 999px; background: rgba(255,255,255,.72);
  border: 1px solid var(--lv-200);
}
.viewbar button {
  flex: 1; padding: 9px 6px; border: 0; border-radius: 999px; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em;
  color: var(--pl-500); background: none; transition: all .2s; min-height: 38px;
}
.viewbar button.on {
  background: var(--grad); color: #fff; box-shadow: 0 2px 10px rgba(173,126,224,.35);
}
.viewbar button i { font-style: normal; font-weight: 400; font-size: 10px; display: block; margin-top: 1px; opacity: .85; }

.bp-cap {
  font-size: 11px; letter-spacing: .18em; color: var(--bg-700); font-weight: 700;
}

/* ① あなたのルート */
.bp-who { text-align: center; }
.bp-no {
  display: inline-flex; align-items: baseline; gap: 10px; padding: 5px 16px;
  border-radius: 999px; background: var(--bg-100); border: 1px solid var(--bg-200);
  font-size: 12px; letter-spacing: .12em; color: var(--pl-500); font-weight: 700;
}
.bp-no i { font-style: normal; color: var(--pl-700); }
.wrap .bp-who h2, .bp-name {
  font-family: var(--serif); font-size: clamp(29px, 8vw, 38px); font-weight: 700;
  color: var(--pl-700); line-height: 1.5; margin: 14px 0 0; display: block;
}
.bp-ideal {
  margin-top: 16px; padding: 15px 17px; border-radius: 1.5rem;
  background: linear-gradient(150deg, rgba(173,126,224,.13), rgba(255,255,255,.7));
  border: 1px solid var(--lv-300);
  font-family: var(--serif); font-size: 16px; font-weight: 700;
  color: var(--pl-900); line-height: 1.75;
}
.bp-ideal span {
  display: block; font-family: var(--sans); font-size: 10.5px; font-weight: 700;
  letter-spacing: .16em; color: var(--bg-700); margin-bottom: 5px;
}

/* ② いま、ここにいます */
.bp-now { margin-top: 16px; }
.bp-here { display: flex; align-items: center; gap: 12px; margin-top: 4px; }
.bp-here .n {
  flex: 0 0 32px; height: 32px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad);
  box-shadow: 0 2px 8px rgba(173,126,224,.35);
}
.bp-here .t b { display: block; font-family: var(--serif); font-size: 16px; color: var(--pl-900); line-height: 1.5; }
.bp-here .t i { display: block; font-style: normal; font-size: 11.5px; color: var(--pl-500); margin-top: 2px; }

/* ③ 今週やること */
.wk-top { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 12px; }
.wk-cnt b { font-family: var(--serif); font-size: 24px; color: var(--pl-700); }
.wk-cnt i { font-style: normal; font-size: 12px; color: var(--pl-500); margin-left: 2px; }
.wk-grp {
  font-size: 11px; letter-spacing: .14em; font-weight: 700; color: var(--bg-700);
  margin: 14px 0 8px; padding-left: 2px;
}
.wk-grp:first-of-type { margin-top: 0; }

/* ④ この段階について詳しく */
.bp-more { margin-top: 16px; padding: 0; overflow: hidden; }
.bp-more-b { padding: 0 20px 20px; }
.bp-more .bl { margin-bottom: 14px; font-size: 14px; line-height: 1.95; color: var(--pl-900); }
.bp-more .bl em {
  display: block; font-style: normal; font-size: 10.5px; letter-spacing: .14em;
  font-weight: 700; color: var(--bg-700); margin-bottom: 4px;
}
/* 4段階の全体。時期が折り返すと崩れるので、折り返さない */
.st-list { list-style: none; margin: 8px 0 0; padding: 0; }
.st-list li {
  display: flex; align-items: flex-start; gap: 11px;
  padding: 11px 12px; border-radius: 1.1rem; margin-bottom: 4px;
  background: transparent; border: 1px solid transparent;
}
.st-n {
  flex: 0 0 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; background: var(--lv-100); color: var(--pl-500);
}
.st-b { flex: 1; min-width: 0; }
.st-b b {
  display: block; font-size: 13.5px; font-weight: 500; line-height: 1.65; color: var(--pl-500);
}
.st-b i {
  display: block; font-style: normal; font-size: 11px; color: var(--bg-700);
  margin-top: 3px; letter-spacing: .04em; white-space: nowrap;
}
.st-list li.done .st-n { background: var(--lv-500); color: #fff; }
.st-list li.done .st-b b { color: var(--pl-900); }
.st-list li.now {
  background: linear-gradient(140deg, rgba(173,126,224,.12), rgba(255,255,255,.6));
  border-color: rgba(173,126,224,.55);
}
.st-list li.now .st-n { background: var(--pl-500); color: #fff; }
.st-list li.now .st-b b { color: var(--pl-900); font-weight: 700; }
/* ①のカードは中央揃えなので、見出し左の縦線は出さない */
.bp-who h2::before, .bp-now h2::before { display: none; }
.wrap .bp-who h2 { display: block; }

/* ───────── 設計図タブ 見出しの共通形 ─────────
 * すべてのカードで同じ組みにする。小さなラベル → 大きな本題 → 右に数。
 * カードごとに違う組み方をすると、拾い読みができなくなる。
 */
.sec-h {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding-bottom: 13px; margin-bottom: 14px;
  border-bottom: 1px solid var(--bg-200);
}
.sec-cap {
  display: block; font-size: 12.5px; letter-spacing: .2em; font-weight: 700;
  color: var(--bg-700); margin-bottom: 5px;
}
.sec-t {
  display: block; font-family: var(--serif); font-size: clamp(21px, 5.8vw, 25px);
  font-weight: 700; color: var(--pl-900); line-height: 1.55;
}
.sec-n { flex: 0 0 auto; text-align: right; white-space: nowrap; line-height: 1; padding-top: 2px; }
.sec-n b { font-family: var(--serif); font-size: 27px; color: var(--pl-700); }
.sec-n i { font-style: normal; font-size: 12px; color: var(--pl-500); margin-left: 2px; }

/* ② 段階の番号と時期 */
.bp-here { display: flex; align-items: center; gap: 10px; margin-top: 2px; }
.bp-here .n {
  flex: 0 0 26px; height: 26px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--grad);
}
.bp-here i { font-style: normal; font-size: 12px; color: var(--pl-500); letter-spacing: .06em; }

/* ③ 進み具合の帯 */
.wk-bar { height: 5px; border-radius: 999px; background: var(--lv-100); overflow: hidden; margin-bottom: 16px; }
.wk-bar i { display: block; height: 100%; border-radius: 999px; background: var(--grad); transition: width .3s; }

/* ③ 折りたたみの束 */
details.wk-grp {
  border: 1px solid var(--bg-200); border-radius: 1.4rem; overflow: hidden;
  background: rgba(255,255,255,.55); margin-bottom: 10px;
}
details.wk-grp summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 10px;
  padding: 13px 16px;
}
details.wk-grp summary::-webkit-details-marker { display: none; }
details.wk-grp summary::after {
  content: "▾"; margin-left: auto; color: var(--bg-700); font-size: 12px; transition: transform .2s;
}
details.wk-grp[open] summary::after { transform: rotate(180deg); }
details.wk-grp .g-t {
  font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--pl-700);
}
details.wk-grp .g-n {
  font-size: 11.5px; font-weight: 700; color: var(--bg-700);
  background: var(--bg-100); border-radius: 999px; padding: 3px 11px;
}
details.wk-grp .g-note {
  margin: 0 16px 10px; font-size: 11.5px; line-height: 1.8; color: var(--pl-500);
}
details.wk-grp .wk-list { padding: 0 12px 12px; gap: 7px; }

/* ③ 一行ずつ。チェックを左に置いて、目で追う線を1本にする */
.wk-row {
  gap: 12px; padding: 12px 14px; border-radius: 1.1rem; align-items: flex-start;
  background: #fff; border: 1px solid var(--lv-100);
}
.wk-row:hover { border-color: var(--lv-300); }
.wk-row.on { background: linear-gradient(140deg, rgba(173,126,224,.1), #fff 65%); border-color: rgba(173,126,224,.6); }
.wk-ck {
  flex: 0 0 21px; height: 21px; margin-top: 1px; border-radius: 7px;
  border: 1.5px solid var(--lv-300); background: #fff;
  display: flex; align-items: center; justify-content: center; font-size: 12px; color: #fff;
}
.wk-row.on .wk-ck { background: var(--lv-300); border-color: var(--lv-300); }
.wk-mk { font-size: 15px; line-height: 1.5; flex: 0 0 auto; opacity: .85; }
.wk-tx { flex: 1; min-width: 0; font-size: 14px; line-height: 1.75; }

/* ③ 合図 */
.wk-sign {
  margin-top: 4px; font-size: 13px; line-height: 1.9; color: var(--pl-900);
  background: var(--bg-100); border-radius: 1.2rem; padding: 13px 16px;
}
.wk-sign em {
  display: block; font-style: normal; color: var(--bg-700);
  font-size: 10.5px; letter-spacing: .16em; font-weight: 700; margin-bottom: 4px;
}

/* ───────── 愛され体質レベル ─────────
 * 数字そのものより「いまどこにいて、あと何点で次か」が効く。
 * 低いレベルを「足りない」と読ませないよう、名前はすべて到達した状態で書く。
 */
.love {
  border-radius: 1.8rem; padding: 20px 20px 18px; margin-bottom: 20px;
  background: linear-gradient(150deg, rgba(173,126,224,.16), rgba(173,126,224,.1) 55%, rgba(255,255,255,.7));
  border: 1px solid var(--bg-300);
}
.love-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.love-h .cap { font-size: 12.5px; letter-spacing: .2em; font-weight: 700; color: var(--bg-700); }
.love-h .up {
  font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap;
  background: var(--grad);
  border-radius: 999px; padding: 4px 12px; box-shadow: 0 2px 8px rgba(173,126,224,.3);
}
.love-lv { display: flex; align-items: baseline; gap: 12px; margin-top: 10px; flex-wrap: wrap; }
.love-lv .n { font-family: var(--serif); font-size: 15px; color: var(--pl-500); font-weight: 700; }
.love-lv .n b {
  font-size: 40px; line-height: 1;
  background: linear-gradient(120deg, #9e4a67, #ad7ee0 55%, #bf9226);
  -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
.love-lv .t {
  font-family: var(--serif); font-size: 16px; font-weight: 700; color: var(--pl-900); line-height: 1.5;
}
.love-pips { display: flex; gap: 4px; margin: 14px 0 9px; }
.love-pips i {
  flex: 1; height: 6px; border-radius: 999px; background: rgba(255,255,255,.7);
  border: 1px solid var(--bg-300);
}
.love-pips i.on { background: var(--grad); border-color: transparent; }
.love-pips i.cur { background: var(--grad); box-shadow: 0 0 8px rgba(173,126,224,.55); }
.love-bar { height: 4px; border-radius: 999px; background: rgba(255,255,255,.75); overflow: hidden; }
.love-bar i { display: block; height: 100%; border-radius: 999px; background: var(--lv-300); }
.love-foot {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  margin-top: 9px; flex-wrap: wrap;
}
.love-foot > span.tot { font-family: var(--serif); font-size: 19px; font-weight: 700; color: var(--pl-700); }
.love-foot > span.tot i { font-style: normal; font-size: 11.5px; color: var(--pl-500); margin-left: 3px; }
.love-foot .nx { font-size: 12.5px; line-height: 1.7; color: var(--pl-500); }
.love-foot .nx b { color: var(--bg-700); font-size: 14px; }
.love-note { margin-top: 11px; font-size: 11.5px; line-height: 1.85; color: var(--pl-500); }
.love-note b { color: var(--pl-700); }

/* 各回のレポートの中 */
.rep-love {
  display: flex; align-items: center; gap: 12px; margin: 4px 0 14px;
  padding: 11px 14px; border-radius: 1.2rem;
  background: linear-gradient(140deg, rgba(173,126,224,.13), rgba(255,255,255,.65));
  border: 1px solid var(--bg-300);
}
.rep-love .lv {
  flex: 0 0 auto; font-family: var(--serif); font-size: 17px; font-weight: 700; color: #fff;
  background: linear-gradient(150deg, var(--lv-500), var(--pl-500));
  border-radius: 999px; padding: 4px 13px;
}
.rep-love .tx b { display: block; font-family: var(--serif); font-size: 14.5px; color: var(--pl-900); line-height: 1.5; }
.rep-love .tx i { display: block; font-style: normal; font-size: 11px; color: var(--pl-500); margin-top: 2px; }

/* 愛され体質レベル：100点満点と、6つの力の内訳 */
.love-lv { align-items: baseline; gap: 14px; }
.love-lv .pt { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--pl-700); }
.love-lv .pt i { font-style: normal; font-size: 12px; color: var(--pl-500); margin-left: 3px; }
.love-t {
  font-family: var(--serif); font-size: 16.5px; font-weight: 700;
  color: var(--pl-900); line-height: 1.55; margin-top: 8px;
}
.love-foot { justify-content: flex-start; }
.love-more { margin-top: 14px; padding-top: 13px; border-top: 1px dashed var(--bg-300); }
.love-more summary {
  list-style: none; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--lv-700);
}
.love-more summary::-webkit-details-marker { display: none; }
.love-more summary::before { content: "▸ "; }
.love-more[open] summary::before { content: "▾ "; }
.pw-list { display: grid; gap: 13px; margin-top: 14px; }
.pw-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.pw-h b { font-family: var(--serif); font-size: 14.5px; color: var(--pl-900); }
.pw-h span { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--pl-700); white-space: nowrap; }
.pw-h span i { font-style: normal; font-size: 10.5px; color: var(--pl-500); margin-left: 2px; }
.pw-bar { height: 5px; border-radius: 999px; background: rgba(255,255,255,.8); overflow: hidden; margin: 5px 0 4px; }
.pw-bar i { display: block; height: 100%; border-radius: 999px; background: var(--grad); }
.pw-w { font-size: 11.5px; line-height: 1.75; color: var(--pl-500); }

/* レベルの絵と、6角形のパラメータ図 */
.love-art { display: none; }        /* 絵が無いあいだは丸ごと出さない（レベル数字と重複するため） */
.hx { display: block; width: 100%; max-width: 340px; margin: 6px auto 2px; }
.hx-ring { fill: none; stroke: rgba(173,126,224,.24); stroke-width: 1; }
.hx-ring.out { stroke: rgba(173,126,224,.45); }
.hx-spoke { stroke: rgba(173,126,224,.28); stroke-width: 1; }
.hx-area {
  fill: url(#hxg); fill-opacity: .42; stroke: url(#hxg);
  stroke-width: 2.4; stroke-linejoin: round;
}
.hx-knob { fill: #fff; stroke: #ad7ee0; stroke-width: 2; }
.hx-l { font-family: var(--serif); font-size: 11.5px; font-weight: 700; fill: var(--pl-700); }
.hx-v { font-family: var(--serif); font-size: 11px; font-weight: 700; fill: var(--pl-500); }
.hx-l.lead { fill: var(--pl-700); }
.hx-v.lead { fill: var(--pl-500); }

/* レベルは小さいバッジ。大きい数字は点数ひとつだけにする（丸の中の数字と重ならないように） */
.love-badge {
  display: inline-flex; align-items: baseline; gap: 1px;
  font-family: var(--serif); font-size: 11px; font-weight: 700; color: #fff;
  background: var(--grad);
  border-radius: 999px; padding: 3px 11px 4px; letter-spacing: .04em;
}
.love-badge b { font-size: 14px; line-height: 1; }
.love-pt {
  font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1.1;
  margin-top: 6px; color: var(--pl-700);
}
.love-pt i { font-style: normal; font-size: 12.5px; color: var(--pl-500); margin-left: 4px; }

/* ───────── 道のり図（階段）───────── */
/* ★横に伸ばしきらない。広い画面で引き伸ばすと、階段ではなく棒グラフに見える */
.jmap-svg { display: block; width: 100%; max-width: 430px; height: auto; margin: 12px auto 2px; }
.jground { stroke: var(--bg-300); stroke-width: 1.5; }

.jstep { cursor: pointer; }
/* 疑似3D。正面（jt）＋天面（j3top）＋側面（j3side）。
   ★左から右へ描くので、高い段が手前の段の側面を自然に隠す */
.jstep .jt { fill: var(--lv-100); transition: fill .2s; }
.jstep .j3top { fill: #fff; opacity: .82; }
.jstep .j3side { fill: #cbb8e6; opacity: .55; }
.jstep .jb { fill: #fff; stroke: var(--lv-300); stroke-width: 1.8; }
.jstep .jbn { font-family: var(--serif); font-size: 12.5px; font-weight: 700; fill: var(--lv-500); }
.jstep .jw  { font-family: var(--sans); fill: var(--pl-500); }

.jstep.done .jt { fill: var(--lv-200); }
.jstep.done .j3side { fill: #b79ddd; opacity: .6; }
.jstep.done .jb { fill: var(--lv-500); stroke: var(--lv-500); }
.jstep.done .jbn { fill: #fff; }

.jstep.now .jt { fill: url(#jnow); }
.jstep.now .j3top { opacity: .95; }
.jstep.now .j3side { fill: #9a72cc; opacity: .8; }
.jstep.now .jb { fill: var(--pl-500); stroke: var(--pl-500); }
.jstep.now .jbn { fill: #fff; }
.jstep.now .jw { fill: var(--pl-900); font-weight: 700; }

.jstep.todo .jt { fill: var(--lv-100); }
.jstep.todo .j3top { opacity: .7; }
.jstep.todo .j3side { opacity: .4; }

.jstep.sel .jt { stroke: var(--pl-300); stroke-width: 1.5; stroke-dasharray: 3 3; }
.jstep.now.sel .jt { stroke: none; }

/* ゴール。形は他の段と同じ。色だけ金 */
.jstep.goal .gglow { fill: rgba(232,197,94,.38); }
.jstep.goal .jt { fill: url(#jgate); }
.jstep.goal .j3top { fill: #fff; opacity: .85; }
.jstep.goal .j3side { fill: #d3b465; opacity: .6; }
.jstep.goal .gs { font-size: 9px; fill: #d9b23c; }
.jstep.goal .gs.s2 { font-size: 6.5px; }
.jstep.goal .gt {
  font-family: var(--serif); font-size: 13px; font-weight: 700; fill: #8a6a12; letter-spacing: .12em;
}
.jstep.goal .gw { font-family: var(--sans); font-size: 9px; fill: #a08028; }
.jstep.goal.reached .jt { stroke: var(--gold); stroke-width: 1.4; }

/* タップ時の既定フォーカス輪郭（オレンジの枠）を消し、自前の選択表示に一本化する */
.jstep:focus, .jstep:focus-visible { outline: none; }
.jfloor { fill: #b8a3d0; opacity: .3; }

/* 主人公。★抽象的なピンではなく、本人が段の上に立つ */
.jhero { pointer-events: none; }
.jhero .hshadow { fill: #8a6fae; opacity: .25; }
.jhero .hring { fill: none; stroke: #fff; stroke-width: 2.4;
  filter: drop-shadow(0 2px 5px rgba(133,61,84,.28)); }
.jhero .hfill { fill: #e9ddf7; }
.jhero .hpill { fill: var(--pl-700); }
.jhero .hpt { font-size: 9px; font-weight: 700; fill: #fff; letter-spacing: .12em; }

/* これから歩く道 */
.jtrail {
  fill: none; stroke: #b691e0; stroke-width: 2;
  stroke-linecap: round; stroke-dasharray: .5 7; opacity: .85;
}

/* いまここの目印 */
  font-family: var(--sans); font-size: 9px; font-weight: 700;
  letter-spacing: .1em; fill: #fff;
}

/* 階段の下の1行。段階名（13〜32文字）はここが受ける */
.sn {
  margin-top: 4px; padding: 12px 14px; border-radius: 13px;
  background: var(--lv-50); border-left: 3px solid var(--lv-300);
}
.sn.now { background: rgba(173,126,224,.10); border-left-color: var(--lv-300); }
.sn.todo { background: var(--bg-100); border-left-color: var(--bg-300); }
.sn-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sn-n { font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--pl-700); }
.sn-s {
  font-size: 10px; font-weight: 700; color: #fff; border-radius: 999px; padding: 2px 8px;
  background: var(--lv-400);
}
.sn.now .sn-s { background: var(--grad); }
.sn.todo .sn-s { background: var(--bg-500); }
.sn-w { font-size: 10.5px; color: var(--pl-500); margin-left: auto; }
.sn-t {
  font-family: var(--serif); font-size: 18.5px; font-weight: 700; color: var(--pl-900);
  line-height: 1.6; margin: 7px 0 0;
}
.sn.todo .sn-t { color: var(--bg-700); }

/* 「要素のつながりを見る」。明るいカードに黒を置かない */
/* ★「夜空への窓」。押した先のダーク画面と同じ世界をボタンに見せる。
   ページで唯一のダーク要素にして、ここだけ特別なものがあると分かるようにする */
.jmap-open {
  position: relative; overflow: hidden;
  display: flex; align-items: center; gap: 14px; width: 100%; margin-top: 16px;
  padding: 21px 18px; border-radius: 18px; cursor: pointer;
  background: linear-gradient(140deg, #2a1f45, #1a1228 55%, #241a3a);
  border: 1px solid rgba(173,126,224,.4);
  box-shadow: 0 10px 26px rgba(26,18,40,.4), inset 0 0 40px rgba(173,126,224,.16);
  transition: transform .25s, box-shadow .25s;
}
.jmap-open:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(26,18,40,.5), inset 0 0 46px rgba(173,126,224,.22);
}
.jmap-open .sky { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.jmap-open .sky .st circle {
  fill: #e9dcfa; animation: jtw 3.2s ease-in-out infinite;
}
.jmap-open .sky .st circle:nth-child(2n) { animation-delay: -1.1s; }
.jmap-open .sky .st circle:nth-child(3n) { animation-delay: -2.2s; }
.jmap-open .sky .ln path { fill: none; stroke: rgba(185,167,214,.35); stroke-width: .7; }
@keyframes jtw { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .jmap-open .sky .st circle { animation: none; opacity: .8; } }
.jmap-open .ic, .jmap-open .tx, .jmap-open .ar { position: relative; z-index: 1; }
.jmap-open .ic {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(214,189,240,.6), rgba(173,126,224,.2) 70%);
  box-shadow: 0 0 18px rgba(173,126,224,.65);
  display: grid; place-items: center;
  animation: jorb 3.6s ease-in-out infinite;
}
.jmap-open .ic svg { width: 24px; height: 24px; }
@keyframes jorb {
  0%, 100% { box-shadow: 0 0 14px rgba(173,126,224,.5); }
  50% { box-shadow: 0 0 26px rgba(173,126,224,.9); }
}
@media (prefers-reduced-motion: reduce) { .jmap-open .ic { animation: none; } }
.jmap-open .tx { flex: 1; text-align: left; min-width: 0; }
.jmap-open .tx b { display: block; font-family: var(--serif); font-size: 19px; color: #fff; letter-spacing: .03em; }
.jmap-open .tx i { font-style: normal; font-size: 11.5px; color: #b9a7d6; margin-top: 2px; display: block; }
.jmap-open .ar { color: #fff; font-size: 20px; line-height: 1; }
.jmap-open:active { transform: translateY(1px); }

/* ═══════════════════════════════════════════════════════════
   本番（lovestar-app）のプリミティブに合わせる層。
   ここより上の個別スタイルを、本番の型で上書きする。
   ═══════════════════════════════════════════════════════════ */

/* ── ボタン。本番: rounded-full / グラデ / hover -translate-y-0.5 ── */
.btn {
  font-family: var(--sans);
  letter-spacing: .08em;
  box-shadow: 0 4px 6px -1px rgba(173,126,224,.28), 0 2px 4px -2px rgba(173,126,224,.2);
  transition: transform .3s, box-shadow .3s, background .3s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -4px rgba(173,126,224,.4); }
.btn:active { transform: translateY(0); }
.btn.quiet {
  background: linear-gradient(135deg, #c3a2ec, #a87fd8); color: #fff; border: none;
  box-shadow: 0 4px 14px rgba(173,126,224,.32);
}
.btn.quiet:hover { background: linear-gradient(135deg, #b993e6, #9d70d2); color: #fff; }

/* ── セクション見出し（縦バー付き）。本番の h2 パターンを .sec-h にも効かせる ── */
.sec-h { position: relative; padding-left: 16px; }
.sec-h::before {
  content: ""; position: absolute; left: 0; top: 4px;
  width: 5px; height: 30px; border-radius: 999px; background: var(--pl-500);
  box-shadow: 0 1px 3px rgba(133,61,84,.18);
}
.wk .sec-h::before { background: var(--lv-500); }
.sec-cap { font-family: var(--sans); }
.sec-t { font-family: var(--serif); }
.sec-n b { font-family: var(--serif); }

/* ── プログレスバー。本番は「枠+内側の余白+凹み影」で溝に見せる ── */
.track, .wk-bar, .love-bar, .pw-bar {
  background: var(--bg-100);
  border: 1px solid var(--bg-200);
  box-shadow: inset 0 1px 3px rgba(133,61,84,.07);
  padding: 1.5px; height: auto; min-height: 9px;
}
.track > i, .track > span, .wk-bar > i, .love-bar > i, .pw-bar > i {
  height: 6px; border-radius: 999px; background: var(--grad-bar);
  transition: width 1s cubic-bezier(.22,1,.36,1);
}

/* ── バッジ。本番: rounded-full / beige-200/80 / shadow-sm ── */
.badge, .cap2, .pill {
  background: rgba(250,237,230,.8); color: var(--pl-700);
  border: 1px solid rgba(245,221,206,.6);
  border-radius: 999px; padding: 3px 13px; font-weight: 700;
  box-shadow: 0 1px 2px rgba(133,61,84,.05);
}

/* ── タブバー。すりガラスにして、背景の写真が透ける ── */
.tabbar {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-top: 1px solid rgba(232, 219, 246, .8);
  box-shadow: 0 -6px 24px rgba(173,126,224,.10);
}
.tabbar button, .tabbar .tab-link { transition: color .3s, opacity .3s; }
.tabbar button.on, .tabbar .tab-link.on {
  border-top-color: transparent;
  background: linear-gradient(to bottom, rgba(173,126,224,.13), transparent 72%);
}
.tabbar button.on span, .tabbar .tab-link.on span { color: var(--pl-700); }

/* ── 本文の書体をそろえる。数値・見出し・称号は明朝、説明はゴシック ── */
.lovesta b, .lovesta strong { font-weight: 700; }
.lovesta .num, .lovesta .big { font-family: var(--serif); }

/* ロゴ。本番のブランドロゴ（Love Star AI+）をそのまま使う。文字を添えると二重になる */
.brand .logo-img { display: block; margin: 0 auto; width: 216px; max-width: 66%; height: auto; }
@media (max-width: 480px) { .brand .logo-img { width: 190px; } }

/* ルートカードのイメージ画像。設計図（/route）の .hero と同じ組み */
.bp-hero {
  position: relative; margin: 16px 0 2px;
  border-radius: 1.6rem; overflow: hidden; aspect-ratio: 3 / 2;
  background: var(--lv-100); box-shadow: var(--shadow-soft);
}
.bp-hero img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bp-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to bottom, rgba(253,246,240,0) 55%, rgba(253,246,240,.55) 88%, rgba(253,246,240,.85) 100%);
}

/* 下の1行が「ゴール」を受けたとき */
.sn.goal { background: rgba(212,175,55,.10); border-left-color: var(--gold); }
.sn.goal .sn-s { background: linear-gradient(135deg, var(--gold), #c08a74); }
.sn.goal .sn-n { color: #8a6a12; }

/* ───────── 到達率とゴール（設計図・現在地カード）───────── */
/* 出発点の1行。★進捗0%のときに「0」を並べない。
   受講前の見込み客に、画面が「あなたには何もない」と言ってしまう */
.bp-start {
  display: flex; align-items: flex-start; gap: 8px; margin-top: 14px;
}
.bp-start .mk { font-size: 15px; line-height: 1.5; }
.bp-start .tx { font-size: 12px; line-height: 1.8; color: var(--pl-500); }
.bp-start .tx b { color: var(--pl-700); }
.bp-rate-bar.zero { border-style: dashed; background: transparent; box-shadow: none; }
.bp-rate-bar.zero i {
  width: 8px !important; height: 4px; background: var(--lv-400); opacity: .8;
}

/* 現在地カードの右上の数。★単位ラベルのない数字を置かない */
.sec-nl {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .06em;
  color: var(--pl-300); margin-bottom: 3px;
}

/* 階段のタップの手引き */
.jmap-hint {
  margin: 2px 0 0; text-align: center;
  font-size: 10.5px; color: var(--pl-300); letter-spacing: .04em;
}

.bp-rate {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; margin-top: 14px;
}
.bp-rate .lb { font-size: 12px; font-weight: 700; color: var(--pl-500); letter-spacing: .04em; }
.bp-rate .pc { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--pl-700); }
.bp-rate .pc i { font-style: normal; font-size: 13px; margin-left: 1px; }
.bp-rate-bar {
  height: 10px; margin-top: 6px; border-radius: 999px;
  background: rgba(255,255,255,.8); border: 1px solid var(--lv-200);
  box-shadow: inset 0 1px 3px rgba(133,61,84,.07); padding: 2px; overflow: hidden;
}
.bp-rate-bar i {
  display: block; height: 4px; border-radius: 999px;
  background: linear-gradient(to right, #d8c2f2, #ad7ee0);
  transition: width 1.1s cubic-bezier(.22,1,.36,1);
}

/* ゴール。設計図の中でいちばん大きい文字にする */
.bp-goal {
  margin-top: 16px; padding: 18px 18px 20px; border-radius: 1.6rem;
  background: linear-gradient(155deg, rgba(212,175,55,.09), rgba(255,255,255,.72) 65%);
  border: 1px solid var(--bg-200);
}
.bp-goal-h { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.bp-goal-h .bd {
  font-family: var(--serif); font-size: 11px; font-weight: 700; letter-spacing: .16em;
  color: #fff; background: linear-gradient(135deg, #e3c25c, #bf9226);
  border-radius: 999px; padding: 4px 13px;
}
.bp-goal-h .tx { font-size: 11.5px; font-weight: 700; color: #8a6a12; letter-spacing: .04em; }
.bp-goal-t {
  font-family: var(--serif); font-size: 26px; font-weight: 700; line-height: 1.75;
  color: var(--pl-700); margin: 12px 0 0; letter-spacing: .01em;
}
@media (max-width: 480px) { .bp-goal-t { font-size: 23px; } }

/* ───────── 「詳しく」の中身 ───────── */
/* 「これから起きること」の見出しは、他のカードと同じ組みにする */
.bp-more { padding: 26px 22px 22px; }
.bp-more .sec-h { margin-bottom: 15px; }
.bp-more-b { padding: 0; }
.sec-n.stage i { display: block; text-align: right; }
.bm-cap {
  display: inline-block; font-size: 10.5px; letter-spacing: .1em; font-weight: 700;
  color: var(--pl-700); background: rgba(250,237,230,.8);
  border: 1px solid rgba(245,221,206,.7); border-radius: 999px;
  padding: 3px 13px; margin: 0 0 15px;
}
.bm { margin-bottom: 14px; padding: 13px 15px; border-radius: 15px;
  background: var(--lv-50); border-left: 3px solid var(--lv-300); }
.bm:last-child { margin-bottom: 0; }
.bm-h { display: flex; align-items: center; gap: 7px;
  font-size: 11.5px; font-weight: 700; color: var(--pl-500); letter-spacing: .04em; }
.bm-h .ic { font-size: 14px; }
.bm-t { font-size: 14px; line-height: 1.9; color: var(--pl-900); margin: 6px 0 0; }
.bm.voice { background: rgba(243,238,251,.8); border-left-color: var(--lv-500); }
.bm.voice .bm-t { font-family: var(--serif); font-weight: 700; }
.bm.tip { background: rgba(212,175,55,.09); border-left-color: var(--gold); }


/* 星図：押した要素の中身。球の上では文字を切るしかないので、ここで全文を読ませる */
.cst-pick {
  margin: 4px 0 2px; padding: 13px 15px; border-radius: 16px;
  background: rgba(255,255,255,.07); border: 1px solid rgba(214,189,240,.28);
}
.cp-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cp-k {
  font-size: 10.5px; font-weight: 700; color: #1d1728;
  border-radius: 999px; padding: 2px 10px;
}
.cp-s { font-size: 10.5px; color: #b9a8d0; }
.cp-o { font-size: 10.5px; color: #d6bdf0; margin-left: auto; }
.cp-t {
  font-family: var(--serif); font-size: 15px; font-weight: 700; line-height: 1.8;
  color: #f3eefb; margin: 8px 0 0;
}
.cst .cn.sel .dot { stroke: #fff; stroke-width: 2; }
.cst .cn.sel .halo { fill: #fff; opacity: .22; }
.cst-note .dim { color: #9583a8; font-size: 11px; }

/* 種類バッジは凡例と同じ色にする。別の色にすると対応が読めなくなる */
.cp-k.k0 { background: #d6bdf0 }
.cp-k.k1 { background: #f0c9d6 }
.cp-k.k2 { background: #e8c99f }
.cp-k.k3 { background: #a8c9e8 }
.cp-k.k4 { background: #9fd8c4 }
.cp-k.k5 { background: #e8b8a3 }
.cp-k.k6 { background: #c8b8e8 }
.cp-k.k7 { background: #e8a8c0 }

/* 3Dマップの中心。絵を置くと◆から切り替わる（無いあいだは◆のまま） */
.cst-core image { opacity: 0; transition: opacity .6s; }
.cst-core.has-img image { opacity: 1; }
.cst-core.has-img .fb { display: none; }
.cst-core.has-img circle { fill: none; stroke: none; }
.cst-core.has-img image { filter: drop-shadow(0 0 14px rgba(255,255,255,.5)); }

/* ───────── ルートカード（セッション履歴の「愛され体質レベル」と同じ組み）───────── */
.bp-who {
  background: linear-gradient(155deg, rgba(243,238,251,.9), rgba(253,246,240,.94) 60%, rgba(250,237,230,.92));
  border-color: rgba(232,219,246,.85);
}
.bw-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.bw-h .cap {
  font-size: 11.5px; letter-spacing: .1em; font-weight: 700; color: var(--pl-700);
  background: rgba(248,195,205,.34); border-radius: 999px; padding: 5px 16px;
}
.bw-h .no {
  font-family: ui-monospace, SFMono-Regular, monospace; font-size: 11px; letter-spacing: .14em;
  color: var(--pl-700); background: rgba(255,255,255,.75);
  border: 1px solid var(--lv-200); border-radius: 999px; padding: 3px 12px; white-space: nowrap;
}
/* ルート名。カードの主役なので中央に置き、箔のようなグラデーションをかける */
.bp-who .bp-name {
  font-family: var(--serif); font-size: clamp(21px, 6vw, 27px); font-weight: 700;
  line-height: 1.55; margin: 18px 0 0; text-align: center; letter-spacing: .02em;
  background: linear-gradient(100deg, #9e4a67 0%, #c48ba0 30%, #ad7ee0 58%, #9e4a67 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  word-break: keep-all; overflow-wrap: break-word;
}
/* 名前の下の飾り。線と小さなきらめきだけで、詰め込まない */
.bp-orn { position: relative; width: 78%; margin: 10px auto 0; height: 12px; }
.bp-orn i {
  position: absolute; left: 0; right: 0; top: 5px; height: 1.5px; border-radius: 999px;
  background: linear-gradient(to right, transparent, rgba(158,74,103,.35) 22%, rgba(173,126,224,.38) 72%, transparent);
}
.bp-orn b {
  position: absolute; right: -6px; top: -5px; font-size: 12px; color: var(--lv-400);
  font-weight: 400;
}
/* 一致度。履歴カードの点数表示と同じ「大きい数字＋溝バー＋根拠」の並び */
.bw-m { margin-top: 16px; }
.bw-mh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.bw-mh .l { font-size: 12px; font-weight: 700; color: var(--pl-500); letter-spacing: .04em; }
.bw-mh .v {
  font-family: var(--serif); font-size: 30px; font-weight: 700; line-height: 1;
  background: linear-gradient(120deg, #9e4a67, #ad7ee0 70%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.bw-mh .v i { font-style: normal; font-size: 13px; margin-left: 2px; -webkit-text-fill-color: var(--pl-500); }
.bw-bar {
  height: 10px; margin-top: 7px; border-radius: 999px;
  background: rgba(255,255,255,.8); border: 1px solid var(--lv-200);
  box-shadow: inset 0 1px 3px rgba(133,61,84,.07); padding: 2px; overflow: hidden;
}
.bw-bar i {
  display: block; height: 4px; border-radius: 999px; background: var(--grad-bar);
  transition: width 1.2s cubic-bezier(.22,1,.36,1);
}
.bw-src {
  margin: 9px 0 0; font-size: 11px; line-height: 1.8; color: var(--pl-500);
}
.bw-src b { font-family: var(--serif); font-size: 14px; color: var(--pl-700); }
.bw-src span { color: var(--bg-700); }

/* 「設計図を最初から見る」。押せることが分かるよう矢印を添える */
.bp-who .btn.quiet { position: relative; gap: 8px; }
.bp-who .btn.quiet .ar { font-style: normal; font-size: 17px; line-height: 1; }
.viewbar button i { font-style: normal; margin-left: 6px; }

/* 溺愛くんのアイコン。ファイルを置いたときだけ出る */
.msg.ai .who .av, .dk-h .av { display: none; }
.msg.ai .who .av.ok, .dk-h .av.ok {
  display: inline-block; width: 22px; height: 22px; border-radius: 50%;
  vertical-align: -6px; margin-right: 6px; background: #fff;
  box-shadow: 0 1px 4px rgba(133,61,84,.14);
}
.dk-h { display: flex; align-items: center; gap: 0; }
.dk-h .av.ok { width: 46px; height: 46px; vertical-align: middle; margin-right: 12px; }

/* ───────── クエストの一覧 ───────── */
.wk-all {
  display: flex; align-items: center; gap: 11px; width: 100%; margin-top: 14px;
  padding: 12px 15px; border: 1.5px solid var(--lv-200); border-radius: 16px;
  background: rgba(255,255,255,.72); cursor: pointer; transition: all .25s;
}
.wk-all:hover { background: #fff; border-color: var(--lv-400); transform: translateY(-1px); }
.wk-all .tx { flex: 1; text-align: left; }
.wk-all .tx b { display: block; font-family: var(--serif); font-size: 17px; color: var(--pl-700); }
.wk-all .tx i { font-style: normal; font-size: 10.5px; color: var(--pl-500); }
.wk-all .ar { color: var(--lv-500); font-size: 17px; line-height: 1; }

.qw {
  position: fixed; inset: 0; z-index: 60; display: flex; align-items: flex-end;
  justify-content: center; background: rgba(133,61,84,.34);
  backdrop-filter: blur(6px); opacity: 0; transition: opacity .26s;
}
.qw.on { opacity: 1; }
.qbox {
  width: 100%; max-width: 560px; max-height: 88vh; overflow-y: auto;
  background: var(--bg-100); border-radius: 2rem 2rem 0 0; padding: 24px 20px 30px;
  position: relative; transform: translateY(18px); transition: transform .26s;
  box-shadow: 0 -10px 40px rgba(133,61,84,.2);
}
.qw.on .qbox { transform: none; }
.q-x {
  position: absolute; right: 16px; top: 16px; width: 32px; height: 32px; border-radius: 50%;
  border: 0; background: rgba(255,255,255,.85); color: var(--pl-500); font-size: 14px; cursor: pointer;
}
.q-h { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding-right: 42px; }
.q-h .cap { font-family: var(--serif); font-size: 22px; font-weight: 700; color: var(--pl-900); }
.q-h .n b { font-family: var(--serif); font-size: 26px; font-weight: 700; color: var(--pl-700); }
.q-h .n i { font-style: normal; font-size: 12px; color: var(--pl-500); margin-left: 2px; }
.q-lead { font-size: 12px; line-height: 1.8; color: var(--pl-500); margin: 8px 0 14px; }
.q-lead b { color: var(--pl-700); }

.qs { border-radius: 16px; margin-bottom: 10px; overflow: hidden;
      border: 1px solid var(--bg-200); background: rgba(255,255,255,.7); }
.qs summary { list-style: none; cursor: pointer; display: flex; align-items: center;
              gap: 11px; padding: 13px 15px; }
.qs summary::-webkit-details-marker { display: none; }
.q-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
       font-family: var(--serif); font-size: 12.5px; font-weight: 700; color: #fff; background: var(--lv-400); }
.q-b { flex: 1; min-width: 0; }
.q-b b { display: block; font-family: var(--serif); font-size: 14px; color: var(--pl-900); line-height: 1.5; }
.q-b i { font-style: normal; font-size: 10.5px; color: var(--pl-500); }
.q-c { flex: none; font-family: var(--serif); font-size: 17px; font-weight: 700; color: var(--pl-700); }
.q-c em { font-style: normal; font-size: 10.5px; color: var(--pl-500); margin-left: 1px; }

.qs.done { background: rgba(243,238,251,.75); }
.qs.done .q-n { background: var(--lv-500); }
.qs.now { border-color: var(--pl-300); background: #fff; }
.qs.now .q-n { background: var(--pl-500); }
.qs.todo .q-n { background: var(--bg-300); color: var(--bg-700); }
.qs.todo .q-b b { color: var(--bg-700); }

.q-list { list-style: none; margin: 0; padding: 0 15px 14px; }
.q-list li {
  display: flex; gap: 10px; align-items: flex-start; padding: 8px 0;
  font-size: 13px; line-height: 1.75; color: var(--pl-500);
  border-top: 1px dashed var(--bg-200);
}
.q-list li .ck {
  flex: none; width: 18px; height: 18px; border-radius: 6px; margin-top: 2px;
  border: 1.5px solid var(--lv-200); background: #fff; display: grid; place-items: center;
  font-size: 11px; color: transparent;
}
.q-list li.on { color: var(--pl-900); }
.q-list li.on .ck { background: var(--lv-500); border-color: var(--lv-500); color: #fff; }

/* 溺愛くんの表記。読みは日本語、英字は添えるだけなので小さく置く */
.dk-t { display: inline-block; }
.dk-t i {
  font-style: normal; font-family: var(--sans); font-size: 11.5px; font-weight: 700;
  letter-spacing: .12em; color: var(--pl-500); margin-left: 2px; white-space: nowrap;
}
@media (max-width: 400px) { .dk-t i { display: block; margin: 2px 0 0; } }

/* 吹き出しの発言者名。英字は添えるだけなので、さらに小さく薄く */
.msg.ai .who i {
  font-style: normal; font-size: 9.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--pl-300); margin-left: 3px;
}

/* ───────── 愛され体質レベル（称号を主役に）───────── */
/* ★10個のメモリは出さない。称号が主役なので、粒が並ぶと目が散る */
.love-pips { display: none; }
.love-ttl {
  font-family: var(--serif); font-size: clamp(17px, 5vw, 21px); font-weight: 700;
  line-height: 1.4; color: var(--pl-700); margin: 7px 0 0; letter-spacing: .01em;
  word-break: keep-all; overflow-wrap: break-word;
}
.love-what { font-size: 12px; line-height: 1.7; color: var(--pl-500); margin: 5px 0 0; }
.love-pt {
  font-family: var(--serif); font-size: 26px; font-weight: 700; line-height: 1;
  color: var(--pl-700); margin-top: 14px; text-align: right;
}
.love-pt i { font-style: normal; font-size: 12px; color: var(--pl-500); margin-left: 3px; }
.love-bar { margin-top: 7px; }
.love-foot .nx em {
  font-style: normal; font-family: var(--serif); font-weight: 700; color: var(--pl-700);
}
/* 絵が入るまでは、称号の頭文字で場所を持たせる */


/* 進化段階のバッジ。称号の中の種族名と対にして、いま何段目かを見せる */
.love-tier {
  display: inline-block; margin-left: 7px; padding: 3px 11px 4px; border-radius: 999px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  color: var(--lv-700); background: rgba(232,219,246,.9); border: 1px solid var(--lv-300);
}

/* 5つに増えたぶん、タブバーを詰める */
.tabbar button, .tabbar .tab-link { padding-left: 0; padding-right: 0; }
.tabbar button span, .tabbar .tab-link span { font-size: 9.5px; letter-spacing: -.01em; }
.tabbar button svg, .tabbar .tab-link svg { width: 20px; height: 20px; }
@media (min-width: 430px) {
  .tabbar button span, .tabbar .tab-link span { font-size: 10.5px; }
  .tabbar button svg, .tabbar .tab-link svg { width: 22px; height: 22px; }
}

/* ───────── 説明の折りたたみ（チャット・日報で共通）───────── */
.ab {
  margin: 12px 0 4px; border-radius: 16px; overflow: hidden;
  background: linear-gradient(140deg, rgba(248,195,205,.14), rgba(243,238,251,.62));
  border: 1px solid var(--lv-200);
}
.ab summary {
  list-style: none; cursor: pointer; display: flex; align-items: center;
  gap: 11px; padding: 12px 14px;
}
.ab summary::-webkit-details-marker { display: none; }
.ab .ic {
  flex: none; width: 38px; height: 38px; border-radius: 50%; overflow: hidden;
  background: #fff; border: 1px solid var(--bg-200); display: grid; place-items: center;
}
.ab .ic img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.ab .ic img.ok { opacity: 1; }
.ab .ic.emo { font-size: 17px; }
.ab .tx { flex: 1; min-width: 0; text-align: left; }
.ab .tx b { display: block; font-family: var(--serif); font-size: 17px; color: var(--pl-900); }
.ab .tx i { font-style: normal; font-size: 12px; color: var(--pl-500); }
.ab .ar { color: var(--lv-500); font-size: 13px; transition: transform .25s; }
.ab[open] .ar { transform: rotate(180deg); }
.ab[open] .tx i { visibility: hidden; }
.ab-b { padding: 0 16px 16px; }
.ab-b p { font-size: 12.5px; line-height: 1.95; color: var(--pl-500); margin: 0 0 9px; }
.ab-b p:last-child { margin-bottom: 0; }
.ab-b p b { color: var(--pl-700); }
.ab-line {
  padding: 10px 13px; border-radius: 12px; background: rgba(255,255,255,.7);
  border-left: 3px solid var(--lv-400);
}

/* ───────── 愛され体質レベル：左に縦長のイラスト、右に六角形 ───────── */
.love-main { display: flex; gap: 14px; align-items: stretch; margin-top: 14px; }
.love-fig { flex: 0 0 30%; max-width: 30%; }
.love-side { flex: 1 1 70%; min-width: 0; }

/* ★縦長（2:3）。シンデレラの立ち姿が入る比率にしておく */
.love-art {
  width: 100%; aspect-ratio: 2 / 3; border-radius: 1.2rem; overflow: hidden;
  background: linear-gradient(170deg, #fff, rgba(232,219,246,.55) 60%, rgba(248,195,205,.4));
  border: 1px solid rgba(212,175,55,.4);
  box-shadow: 0 6px 18px rgba(158,74,103,.13);
  display: grid; place-items: center; position: relative;
}
.love-art img { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .5s; }
.love-art.ok img { opacity: 1; }
/* 絵が入るまでは、下から光が立ちのぼるだけの枠にしておく */
.love-art::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 55%;
  background: linear-gradient(to top, rgba(212,175,55,.24), transparent);
  pointer-events: none;
}
.love-art.ok::after { display: none; }

.love-fig .love-badge { margin: 0; }
.love-fig .love-tier { margin: 0; }

.love-ttl { margin-top: 0 !important; }
.love-side .hx { max-width: 100%; margin: 8px auto 0; }


/* Lv と進化段階は、イラストの上に重ねる。下に並べると散らかって見える */
.love-fig .love-badge {
  position: absolute; top: 8px; left: 8px; margin: 0; z-index: 2;
  padding: 3px 10px 4px; font-size: 10px;
  box-shadow: 0 2px 8px rgba(133,61,84,.28);
}
.love-fig .love-badge b { font-size: 12.5px; }
.love-fig .love-tier {
  position: absolute; left: 8px; right: 8px; bottom: 8px; margin: 0; z-index: 2;
  text-align: center; font-size: 10px; padding: 4px 6px 5px;
  background: rgba(255,255,255,.9); backdrop-filter: blur(4px);
  border-color: rgba(255,255,255,.9); color: var(--pl-700);
  box-shadow: 0 2px 8px rgba(133,61,84,.16);
}
/* 絵の下側を少し落として、段位の文字が乗るようにする */
.love-art.ok::after {
  display: block; height: 42%;
  background: linear-gradient(to top, rgba(60,30,45,.34), transparent);
}

/* ───────── 各タブの大見出し ───────── */
.ph { text-align: center; padding: 4px 0 16px; }
.ph-l {
  font-size: 14.5px; font-weight: 700; letter-spacing: .1em; color: var(--pl-500);
  margin: 0 0 6px; line-height: 1.7;
}
.ph-t {
  font-family: var(--serif); font-size: clamp(27px, 7.4vw, 34px); font-weight: 700;
  line-height: 1.45; margin: 0; letter-spacing: .04em;
  background: linear-gradient(100deg, #9e4a67 0%, #c48ba0 32%, #ad7ee0 62%, #9e4a67 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  word-break: keep-all; overflow-wrap: break-word;
}
.ph-o { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 11px; }
.ph-o i {
  display: block; width: 46px; height: 1.5px; border-radius: 999px;
  background: linear-gradient(to right, transparent, rgba(173,126,224,.55));
}
.ph-o i:last-child { background: linear-gradient(to left, transparent, rgba(173,126,224,.55)); }
.ph-o b { font-size: 10px; color: var(--gold); font-weight: 400; }

.rp .ph { padding-top: 14px; }

/* 六角形は右の7割いっぱいに使う。上限を外さないと、絵より小さく見える */
.love-side .hx { max-width: none; width: 100%; margin: 10px 0 0; }
.love-side .love-ttl { font-size: clamp(21px, 6vw, 27px); }
@media (max-width: 380px) {
  .love-main { gap: 11px; }
  .love-fig .love-tier { font-size: 9px; letter-spacing: .04em; padding: 3px 4px 4px; }
}

/* ★左の絵と右の中身で、下端をそろえる。
   絵だけ先に終わると、その下に説明のつかない空白ができる */
.love-main { align-items: stretch; }
.love-fig { display: flex; flex-direction: column; }
.love-art { flex: 1 1 auto; aspect-ratio: auto; min-height: 0; }
.love-side { display: flex; flex-direction: column; }
.love-side .hx { flex: 1 1 auto; min-height: 0; margin-bottom: 0; }
/* 六角形は上下の余白を持っているので、絵の下端に合わせて少しだけ詰める */
.love-main + .love-pt { margin-top: 10px; }

/* まだ線が引けない時期。空のグラフを出すより、これから起きることを書く */
.gc-wait {
  margin-top: 12px; padding: 26px 20px; border-radius: 1.4rem; text-align: center;
  background: rgba(255,255,255,.6); border: 1px dashed var(--lv-300);
}
.gc-wait .ic { font-size: 28px; }
.gc-wait b {
  display: block; font-family: var(--serif); font-size: 15px; color: var(--pl-900);
  margin: 8px 0 6px;
}
.gc-wait span { font-size: 11.5px; line-height: 1.85; color: var(--pl-500); }

/* ───────── 回を選ぶ帯 ───────── */
.sp {
  margin: 16px 0 14px; padding: 13px 14px; border-radius: 16px;
  background: rgba(255,255,255,.66); border: 1px solid var(--lv-200);
}
.sp-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sp-h b { font-family: var(--serif); font-size: 13.5px; color: var(--pl-900); }
.sp-h span { font-size: 11px; color: var(--pl-500); }
.sp-h em { font-style: normal; font-weight: 700; color: var(--pl-700); }
.sp-row {
  display: flex; gap: 5px; margin-top: 10px; overflow-x: auto;
  padding-bottom: 4px; -webkit-overflow-scrolling: touch;
}
.sp-row::-webkit-scrollbar { height: 3px; }
.sp-row::-webkit-scrollbar-thumb { background: var(--lv-200); border-radius: 99px; }
.sp-b {
  flex: none; width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
  border: 1px solid var(--lv-200); background: #fff; color: var(--pl-500);
  font-family: var(--serif); font-size: 12px; font-weight: 700; transition: all .2s;
}
.sp-b:hover { border-color: var(--lv-400); }
.sp-b.far { background: var(--lv-50); color: var(--lv-300); }
.sp-b.on {
  background: var(--grad); color: #fff; border-color: transparent;
  box-shadow: 0 2px 8px rgba(173,126,224,.35);
}

/* ───────── 説明ブロックの中身（溺愛くんが答える） ───────── */
.dk-say { display: flex; gap: 10px; align-items: flex-start; }
/* ★アイコンの下には必ず名前を置く。
   顔だけ出すと、誰が喋っているのか分からないまま読まれてしまう。 */
.dk-ava { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; width: 38px; }
.dk-ava img {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; background: #fdf3e6;
  border: 1.5px solid rgba(212,175,55,.28);
}
.dk-ava i {
  font-style: normal; font-size: 8.5px; letter-spacing: .02em; white-space: nowrap;
  color: var(--pl-500); font-weight: 700; line-height: 1;
}
/* ★吹き出しの角を1つだけ落として、アイコン側から出ているようにする */
.dk-b {
  flex: 1 1 auto; min-width: 0;
  background: rgba(255,255,255,.72);
  border: 1px solid var(--lv-200);
  border-radius: 4px 15px 15px 15px;
  padding: 12px 14px;
}
.dk-b > p { margin: 0 0 10px; }
.dk-b > p:last-child { margin-bottom: 0; }

/* ───────── 溺愛くんのひとこと（画面のあちこちに出る小さい吹き出し） ─────────
   ★出す場所は「ひとりで、間が持たない or 感情が動く瞬間」に限る。
     全画面の隅に置くと壁紙になって、キャラクターとして働かなくなる。 */
.dk1 {
  display: flex; gap: 9px; align-items: flex-start; text-align: left;
  /* ★中央寄せの親（照合アニメなど）に置くと幅が潰れるので、自分で幅を持つ */
  width: 100%; max-width: 420px; margin: 14px auto 0;
}
.dk1 .dk-ava { margin-top: 1px; }
.dk1 p {
  flex: 1 1 auto; min-width: 0; margin: 0;
  background: rgba(255,255,255,.78); border: 1px solid var(--lv-200);
  border-radius: 4px 14px 14px 14px; padding: 10px 13px;
  font-size: 12.5px; line-height: 1.85; color: var(--pl-900);
}
.dk1 p b { color: var(--pl-700); }
/* 待ち時間で使うとき。背景が濃いので、白を強める */
.dk1.on-dark p { background: rgba(255,255,255,.9); }
/* 出るときにふわっと。切り替わりを目で追えるようにする */
.dk1.fade p { animation: dk1in .45s ease both; }
@keyframes dk1in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; } }

/* 達成したときに、下からふわっと出るひとこと */
.dk-toast {
  position: fixed; left: 50%; bottom: calc(env(safe-area-inset-bottom, 0px) + 78px);
  transform: translate(-50%, 14px); width: min(420px, calc(100vw - 28px));
  z-index: 60; opacity: 0; transition: opacity .35s, transform .35s; pointer-events: none;
}
.dk-toast.on { opacity: 1; transform: translate(-50%, 0); }
.dk-toast .dk1 { margin: 0; }
.dk-toast .dk1 p { background: #fff; box-shadow: var(--shadow-card); }

/* 「7日つづける」の自動判定行。押せないので、日数の進みだけ見せる */
.wk-row.auto { cursor: default; }
.wk-d7 { flex: none; margin-left: auto; font-size: 11px; color: var(--pl-500); white-space: nowrap; }
.wk-d7 b { font-family: var(--serif); font-size: 15px; color: var(--pl-700); }

/* ゴールをタップしたとき、GOALカードが「ここだよ」と光る */
.bp-goal.pulse { animation: goalPulse 1.3s ease; }
@keyframes goalPulse {
  0% { box-shadow: 0 0 0 0 rgba(212,175,55,.5); }
  100% { box-shadow: 0 0 0 22px rgba(212,175,55,0); }
}

/* 変化の軌跡カードの上端。見出しはページ見出しに1本化し、状態バッジだけ置く */
.hist-top { display: flex; justify-content: flex-end; margin-bottom: 10px; }

/* ───────── 愛されクエスト 3層構造 ─────────
   ★毎日 / 今週 / この段階 で性質を分ける。
     8つを横並びにすると、どれが毎日やることか画面が答えられない。 */

/* 層1: 毎日のワーク。1つだけであることが一目で分かるよう、面を敷いて大きく置く */
.wk-daily {
  margin: 14px 0 16px; padding: 14px 15px 13px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(173,126,224,.14), rgba(253,246,240,.7));
  border: 1px solid var(--lv-200);
}
.wk-daily.on { background: linear-gradient(150deg, rgba(212,175,55,.13), rgba(253,246,240,.75)); }
.wd-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.wd-h .cap { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: var(--pl-500); }
.wd-h .n { font-size: 11.5px; color: var(--pl-500); white-space: nowrap; }
.wd-h .n b { font-family: var(--serif); font-size: 20px; color: var(--pl-700); margin-right: 1px; }
.wk-row.big { padding: 14px 15px; }
.wk-row.big .wk-tx { font-size: 15px; font-weight: 700; }
/* 7日の粒。バーより「あと何日」が数えられる */
.wd-dots { display: flex; gap: 5px; margin: 10px 2px 0; }
.wd-dots i {
  flex: 1; height: 5px; border-radius: 999px; background: rgba(255,255,255,.75);
  border: 1px solid var(--lv-200);
}
.wd-dots i.on { background: var(--grad-bar); border-color: transparent; }
.wd-note { margin: 8px 0 0; font-size: 11px; line-height: 1.75; color: var(--pl-500); }

/* 層3: この段階の挑戦。相手や現実に対する一歩なので、金で「ゴール寄り」に置く */
.wk-chal {
  margin-top: 16px; padding: 14px 15px 13px; border-radius: 18px;
  background: linear-gradient(150deg, rgba(212,175,55,.10), rgba(255,255,255,.72) 65%);
  border: 1px solid var(--bg-200);
}
.wk-chal.on { border-color: rgba(212,175,55,.5); }
.wc-h { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 9px; }
.wc-h .cap { font-size: 12px; font-weight: 700; letter-spacing: .14em; color: #8a6a12; }
.wc-h .n { font-size: 11.5px; font-weight: 700; color: var(--bg-700); white-space: nowrap; }
.wc-b {
  display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left;
  padding: 13px 15px; border-radius: 14px; cursor: pointer;
  background: rgba(255,255,255,.8); border: 1.5px solid var(--bg-200); font: inherit;
}
.wk-chal.on .wc-b { border-color: rgba(212,175,55,.55); background: rgba(255,255,255,.95); }
.wc-tx { font-family: var(--serif); font-size: 15px; font-weight: 700; color: var(--pl-900); line-height: 1.65; }
.wc-note { margin: 8px 0 0; font-size: 11px; line-height: 1.75; color: var(--pl-500); }

/* チェック済みをはっきり見せる。★lv-300では薄く、達成した実感が出ない */
.wk-row.on .wk-ck { background: var(--lv-500); border-color: var(--lv-500); font-weight: 700; }
.wk-chal.on .wc-b .wk-ck {
  background: var(--gold); border-color: var(--gold); color: #fff; font-weight: 700;
}

/* ワークPDFへの入口。毎日のワークの直下に置く */
.wd-pdf {
  display: flex; align-items: center; gap: 10px; margin-top: 9px;
  padding: 10px 13px; border-radius: 13px; text-decoration: none;
  background: rgba(255,255,255,.85); border: 1.5px solid var(--lv-200);
  transition: all .2s;
}
.wd-pdf:hover { border-color: var(--lv-400); background: #fff; }
.wd-pdf .ic { font-size: 17px; flex: none; }
.wd-pdf .tx { flex: 1; min-width: 0; }
.wd-pdf .tx b { display: block; font-size: 13px; color: var(--pl-700); }
.wd-pdf .tx i {
  font-style: normal; display: block; font-size: 10.5px; color: var(--pl-300);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.wd-pdf .ar { color: var(--lv-500); font-size: 16px; line-height: 1; flex: none; }

/* ───────── 愛されクエスト：週のリズムと粒度 ───────── */

/* 今週の7日間。★空の数字とバーで始めない（原則3） */
.wk-week { margin: 14px 0 4px; }
.ww-row { display: flex; gap: 5px; }
.ww-row span { flex: 1; text-align: center; }
.ww-row i {
  display: block; font-style: normal; font-size: 9.5px;
  color: var(--pl-300); margin-bottom: 4px;
}
.ww-row em {
  display: block; height: 7px; border-radius: 999px;
  background: rgba(255,255,255,.8); border: 1px solid var(--lv-200);
}
.ww-row .on em { background: var(--grad-bar); border-color: transparent; }
.ww-row .today i { color: var(--pl-700); font-weight: 700; }
.ww-row .today em { box-shadow: 0 0 0 1.5px var(--gold); }
.ww-n { margin: 9px 0 0; font-size: 11.5px; color: var(--pl-500); }
.ww-n b { font-family: var(--serif); font-size: 15px; color: var(--pl-700); }

/* 時間の粒度ラベル。毎日／今週／この段階を、色と語で見分けられるようにする */
.g-when {
  flex: none; font-size: 9.5px; font-weight: 700; letter-spacing: .08em;
  padding: 3px 8px; border-radius: 999px; white-space: nowrap;
  background: var(--lv-100); color: var(--lv-700); margin-right: 8px;
}
.g-when.day { background: var(--grad); color: #fff; }
.g-when.stage { background: rgba(212,175,55,.2); color: #8a6a12; }
.wd-h .hl, .wc-h .hl { display: flex; align-items: center; min-width: 0; }
.wd-h .cap, .wc-h .cap { letter-spacing: .06em; }
/* 曜日の帯が広がりすぎないように */
.wk-week { max-width: 420px; }

/* 「今週やること」は毎日ではない。左の縦線で見分ける */
.wk-grp { position: relative; padding-left: 3px; }
.wk-grp::before {
  content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px;
  border-radius: 999px; background: var(--lv-200);
}
.wk-grp.full::before { background: var(--lv-500); }

/* やり切ったとき、カードの縁が金色に灯る */
.card.wk.done {
  border-color: rgba(212,175,55,.5);
  box-shadow: 0 0 0 1px rgba(212,175,55,.25), var(--shadow-card);
}

/* 一覧はクエスト本体より軽く。★同じ重さのボタンを並べない（原則6） */
.wk-link {
  display: block; width: 100%; margin: 14px 0 0; padding: 10px;
  background: none; border: none; cursor: pointer;
  font: inherit; font-size: 12.5px; color: var(--pl-500);
  text-decoration: underline; text-underline-offset: 3px;
  text-decoration-color: var(--lv-200);
}
.wk-link:hover { color: var(--pl-700); }

/* 「なぜ、これをやるの？」 */
.ab.why { margin-top: 14px; }
.why-h { display: flex; align-items: center; gap: 9px; margin-bottom: 6px; }
.why-n {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; color: #fff;
  background: var(--lv-500); border-radius: 999px; padding: 3px 10px;
}
.why-w { font-size: 11px; color: var(--pl-500); }
.why-t {
  font-family: var(--serif); font-size: 17px; font-weight: 700;
  color: var(--pl-900); line-height: 1.6; margin: 0 0 12px;
}

/* ───────── 逆算の鎖：未来 → 段階 → 今日 ─────────
   ★設計図タブとクエストタブが別々の島にならないよう、
     クエストの一番上で「なぜ今日これをやるのか」をつなぐ。 */
.bc { margin: 14px 0 4px; }
.bc-r { padding: 11px 14px; border-radius: 14px; }
.bc-r.goal {
  background: linear-gradient(150deg, rgba(212,175,55,.13), rgba(255,255,255,.7) 70%);
  border: 1px solid var(--bg-200);
}
.bc-r.now {
  background: linear-gradient(150deg, rgba(173,126,224,.14), rgba(255,255,255,.7) 70%);
  border: 1px solid var(--lv-200);
}
.bc-l {
  display: block; font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  margin-bottom: 3px;
}
.bc-r.goal .bc-l { color: #8a6a12; }
.bc-r.now .bc-l { color: var(--pl-500); }
.bc-t {
  margin: 0; font-family: var(--serif); font-weight: 700; line-height: 1.6;
  font-size: 15px; color: var(--pl-900);
}
/* 段のあいだの矢印。上から下へ「逆算」であることを示す */
.bc-a { display: flex; align-items: center; gap: 8px; padding: 7px 0 7px 16px; }
.bc-a i {
  flex: none; width: 2px; height: 16px; border-radius: 999px;
  background: linear-gradient(to bottom, var(--lv-300), var(--lv-200));
}
.bc-a span { font-size: 10.5px; color: var(--pl-300); letter-spacing: .02em; }

/* 今日やること。7つのうち1つを前に出す */
.wk-today {
  margin: 14px 0 4px; padding: 13px 14px 11px; border-radius: 16px;
  background: rgba(255,255,255,.72); border: 1.5px dashed var(--lv-300);
}
.wt-h { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; }
.wt-h .cap { font-size: 12px; font-weight: 700; letter-spacing: .06em; color: var(--pl-500); }
.wt-note { margin: 8px 0 0; font-size: 10.5px; color: var(--pl-300); }
.wk-today.all {
  display: flex; align-items: center; gap: 9px; border-style: solid;
  border-color: rgba(212,175,55,.4); background: rgba(212,175,55,.08);
}
.wk-today.all .mk { font-size: 17px; }
.wk-today.all .tx { font-size: 13px; font-weight: 700; color: var(--pl-700); }

/* 群の目的（どこにつながるクエストか） */
.g-note b { color: var(--pl-700); font-family: var(--serif); font-size: 13.5px; }

/* ───────── 「なぜ、これをやるの？」＝溺愛くんが順に語る ─────────
   ★アイコンは最初の1つだけ。3回並べると同じ顔が縦に3つ出て、
     会話ではなくカタログに見える。2つめ以降は同じ列に揃えて続きにする。 */
.why-talk { display: flex; flex-direction: column; gap: 10px; }
.wt-say { display: flex; gap: 10px; align-items: flex-start; }
.dk-sp { flex: none; width: 38px; }
.wt-b {
  flex: 1 1 auto; min-width: 0;
  background: rgba(255,255,255,.8); border: 1px solid var(--lv-200);
  border-radius: 15px; padding: 12px 14px;
}
.wt-say.first .wt-b { border-radius: 4px 15px 15px 15px; }
.wt-l {
  margin: 0 0 7px; font-size: 12.5px; font-weight: 700; color: var(--pl-700);
  line-height: 1.7;
}
.wt-t { margin: 0; font-size: 13px; line-height: 1.95; color: var(--pl-900); }
/* 卒業生の言葉。溺愛くんの言葉と混ざらないよう、引用として立てる */
.wt-t.q {
  font-family: var(--serif); font-size: 14px; font-weight: 700; color: var(--pl-700);
  padding-left: 11px; border-left: 3px solid var(--lv-300);
}
.wt-t.q::before { content: "「"; }
.wt-t.q::after { content: "」"; }