/* ─────────────────────────────────────────────────────
   enBright Design System — 価値観ネットワーク
   参照: ikigai_values.html / enbright.co.jp
───────────────────────────────────────────────────── */

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }

:root {
  /* ── Core palette (ikigai_values.html exact values) ── */
  --bg:          #0B0B14;
  --bg2:         #12121E;
  --surface:     rgba(255,255,255,0.025);
  --surface-h:   rgba(255,255,255,0.055);
  --border:      rgba(255,255,255,0.055);
  --border-h:    rgba(255,255,255,0.12);

  --text:        #DDD9D0;
  --text-mid:    #C8C0B8;
  --text-dim:    #6A6678;
  --text-label:  #A8A4A0;

  /* ── enbright.co.jp accent — gold ── */
  --gold:        #E8C252;
  --gold-rgb:    232,194,82;
  --gold-dim:    rgba(232,194,82,0.15);
  --gold-border: rgba(232,194,82,0.40);

  /* ── Category colours (ikigai_values.html exact) ── */
  --s1:     #F0A050; --s1-rgb: 240,160,80;
  --s2:     #E07898; --s2-rgb: 224,120,152;
  --s3:     #58B87A; --s3-rgb: 88,184,122;
  --s4:     #8890D8; --s4-rgb: 136,144,216;
}

/* ── Base ─────────────────────────────────────────── */
html, body {
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font-family: 'Noto Serif JP', 'Hiragino Mincho ProN', serif;
  line-height: 1.7;
}

/* 老眼でも読みやすいように、rem 基準を引き上げる（全体が約18%拡大） */
html { font-size: 118%; }

/* Subtle purple radial glow at the top — matches ikigai_values.html */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: radial-gradient(ellipse at 50% 0%, rgba(80,70,120,0.14) 0%, transparent 62%);
  pointer-events: none;
  z-index: 0;
}

/* ── Phase containers ─────────────────────────────── */
.phase {
  display: none;
  min-height: 100vh;
  position: relative;
  z-index: 1;
}
.phase.active {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* ══════════════════════════════════════════════════
   PHASE 1 — やりたいこと入力
══════════════════════════════════════════════════ */
.phase-inner {
  width: 100%;
  max-width: 660px;
  padding: 56px 28px 100px;
}

/* ── enBright App Header ── */
.app-header {
  text-align: center;
  margin-bottom: 52px;
}
.app-header .en {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size:0.82rem;
  letter-spacing: 0.38em;
  color: var(--text-dim);
  margin-bottom: 12px;
}
.app-header h1 {
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.42em;
  color: var(--text-mid);
}
.rule {
  width: 60px; height: 1px;
  background: linear-gradient(to right, transparent, var(--text-dim), transparent);
  margin: 16px auto 20px;
}
.subtitle {
  font-size:0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}

/* ── Input row ── */
.input-row {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.input-row input {
  flex: 1;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 13px 18px;
  color: var(--text);
  font-family: inherit;
  font-size: 0.9rem;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.input-row input:focus {
  border-color: var(--gold-border);
  box-shadow: 0 0 0 1px rgba(var(--gold-rgb),0.08);
}
.input-row input::placeholder { color: var(--text-dim); }

/* ── Buttons ── */
.btn-add {
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  border-radius: 12px;
  padding: 13px 22px;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  letter-spacing: 0.06em;
}
.btn-add:hover {
  background: rgba(var(--gold-rgb),0.25);
  box-shadow: 0 0 18px rgba(var(--gold-rgb),0.18);
}
.btn-add:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: none;
}

/* 「確定」ボタン — 追加の前に入力内容を確定する */
.btn-confirm {
  background: transparent;
  border: 1px solid var(--gold-border);
  color: var(--gold);
  border-radius: 12px;
  padding: 13px 18px;
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  white-space: nowrap;
  letter-spacing: 0.06em;
}
.btn-confirm:hover {
  background: rgba(var(--gold-rgb),0.12);
}

/* 確定した内容のプレビュー */
.confirm-preview {
  margin: 10px auto 0;
  max-width: 560px;
  font-size: 0.85rem;
  color: var(--gold);
  letter-spacing: 0.04em;
  text-align: center;
  animation: fadeIn 0.25s ease;
}

.btn-primary {
  background: rgba(var(--gold-rgb),0.12);
  border: 1px solid var(--gold-border);
  color: var(--gold);
  border-radius: 12px;
  padding: 14px 30px;
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  letter-spacing: 0.08em;
}
.btn-primary:hover:not(:disabled) {
  background: rgba(var(--gold-rgb),0.22);
  box-shadow: 0 0 24px rgba(var(--gold-rgb),0.22);
}
.btn-primary:disabled { opacity: 0.28; cursor: not-allowed; }

.btn-secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  color: var(--text-dim);
  border-radius: 12px;
  padding: 14px 24px;
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  letter-spacing: 0.04em;
}
.btn-secondary:hover:not(:disabled) {
  background: var(--surface-h);
  color: var(--text);
  border-color: var(--border-h);
}
.btn-secondary:disabled { opacity: 0.28; cursor: not-allowed; }
.btn-secondary.active {
  background: rgba(232,194,82,0.12);
  border-color: rgba(232,194,82,0.45);
  color: #E8C252;
}

.btn-outline {
  background: transparent;
  border: 1px solid rgba(var(--s2-rgb),0.38);
  color: var(--s2);
  border-radius: 12px;
  padding: 14px 24px;
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: background 0.2s, box-shadow 0.2s;
  letter-spacing: 0.04em;
}
.btn-outline:hover {
  background: rgba(var(--s2-rgb),0.1);
  box-shadow: 0 0 18px rgba(var(--s2-rgb),0.15);
}

/* ── Item counter ── */
.item-counter {
  font-size:0.85rem;
  color: var(--text-dim);
  margin-bottom: 20px;
  letter-spacing: 0.08em;
}
#item-count {
  color: var(--gold);
  font-weight: 500;
}

/* ── Item list ── */
#item-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 36px;
  max-height: 52vh;
  overflow-y: auto;
  padding-right: 4px;
}

/* ikigai_values.html card style */
.item-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 12px 16px;
  animation: fadeIn 0.22s ease;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s, transform 0.2s;
}
.item-card:hover {
  background: var(--surface-h);
  border-color: rgba(var(--gold-rgb),0.28);
  box-shadow: 0 0 20px rgba(var(--gold-rgb),0.06), 0 4px 16px rgba(0,0,0,0.25);
  transform: translateY(-2px);
}
.item-number {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size:0.85rem;
  color: var(--text-dim);
  min-width: 28px;
  text-align: right;
}
.item-text {
  flex: 1;
  font-size: 0.88rem;
  color: var(--text);
  letter-spacing: 0.04em;
}
.item-delete {
  background: none;
  border: none;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 3px 5px;
  border-radius: 6px;
  line-height: 1;
  transition: color 0.15s;
  opacity: 0.5;
}
.item-delete:hover { color: var(--s2); opacity: 1; }

.phase-footer {
  display: flex;
  justify-content: flex-end;
}

/* ══════════════════════════════════════════════════
   PHASE 2 — 価値観選択
══════════════════════════════════════════════════ */
#phase-2.active {
  display: flex;
  flex-direction: column;
}
.phase2-inner {
  max-width: 1120px;
  padding: 28px 28px 90px;
  width: 100%;
}

/* ── Progress ── */
.phase2-top { margin-bottom: 0; }

/* ── やりたいこと＋語の説明（選んでいるあいだ画面に残す） ──
   価値観は下のほうまで並ぶため、そこを見に行くと照らし合わせる相手
   （やりたいこと）とホバー中の語の説明が視界から消えてしまっていた。
   両方をひとつの枠にまとめ、上端に貼りつける。 */
.p2-sticky {
  position: sticky;
  top: 0;
  z-index: 15;
  background: var(--bg);   /* 下のグリッドが透けないよう不透明にする */
  /* 上の余白は、画面右上に固定されている言語切替バッジの居場所。
     ここを詰めるとバッジがやりたいことの1行目に重なる。 */
  padding: 46px 0 10px;
  margin-bottom: 2px;
}
.p2-sticky::after {
  /* 下端をわずかにぼかし、グリッドが下に潜っていることを示す */
  content: '';
  position: absolute;
  left: 0; right: 0; top: 100%;
  height: 10px;
  background: linear-gradient(to bottom, var(--bg), transparent);
  pointer-events: none;
}
.p2-sticky .value-desc-panel { margin: 10px 0 0; }
/* やりたいことが長い場合でも、画面の1/4以上は占めないようにする */
.p2-sticky .item-prompt { max-height: 26vh; overflow-y: auto; }

.progress-bar-wrap {
  width: 100%;
  height: 2px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 10px;
  overflow: hidden;
}
.progress-bar {
  height: 100%;
  background: linear-gradient(to right, var(--gold), rgba(var(--gold-rgb),0.5));
  border-radius: 2px;
  transition: width 0.45s ease;
  width: 0%;
  box-shadow: 0 0 8px rgba(var(--gold-rgb),0.5);
}
.progress-text {
  display: flex;
  justify-content: space-between;
  font-size:0.85rem;
  color: var(--text-dim);
  margin-bottom: 12px;
  letter-spacing: 0.08em;
}
.sel-count { color: var(--gold); }

/* ── Item prompt ── */
.item-prompt {
  font-size: 1.0rem;
  font-weight: 400;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 2px solid var(--gold-border);
  border-radius: 12px;
  padding: 14px 20px;
  letter-spacing: 0.05em;
  min-height: 50px;
}

/* ── 説明パネル ── */
.value-desc-panel {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  min-height: 52px;
  margin: 10px 0 10px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 10px;
  transition: border-color 0.2s, background 0.2s;
}
.value-desc-panel.has-value {
  border-color: rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.04);
}
.desc-chip-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
  background: var(--text-dim);
  transition: background 0.2s, box-shadow 0.2s;
}
.desc-chip-dot.s1 { background: var(--s1); box-shadow: 0 0 7px var(--s1); }
.desc-chip-dot.s2 { background: var(--s2); box-shadow: 0 0 7px var(--s2); }
.desc-chip-dot.s3 { background: var(--s3); box-shadow: 0 0 7px var(--s3); }
.desc-chip-dot.s4 { background: var(--s4); box-shadow: 0 0 7px var(--s4); }
.desc-chip-label {
  font-size:0.85rem;
  font-weight: 500;
  color: var(--text-mid);
  letter-spacing: 0.08em;
  white-space: nowrap;
  flex-shrink: 0;
  min-width: 5em;
}
.desc-sep {
  color: var(--text-dim);
  font-size:0.85rem;
  flex-shrink: 0;
  margin-top: 1px;
}
.desc-body {
  font-size:0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  line-height: 1.65;
}

/* ── Category legend chips ── */
.category-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.legend-item {
  font-size:0.85rem;
  letter-spacing: 0.10em;
  padding: 3px 11px;
  border-radius: 20px;
  border: 1px solid;
}
.legend-item.s1 { color: var(--s1); border-color: rgba(var(--s1-rgb),0.38); background: rgba(var(--s1-rgb),0.07); }
.legend-item.s2 { color: var(--s2); border-color: rgba(var(--s2-rgb),0.38); background: rgba(var(--s2-rgb),0.07); }
.legend-item.s3 { color: var(--s3); border-color: rgba(var(--s3-rgb),0.38); background: rgba(var(--s3-rgb),0.07); }
.legend-item.s4 { color: var(--s4); border-color: rgba(var(--s4-rgb),0.38); background: rgba(var(--s4-rgb),0.07); }

/* ── Value grid — 2カラム ── */
.value-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 28px;
  margin-bottom: 20px;
  max-height: calc(100vh - 330px);
  overflow-y: auto;
  padding-right: 6px;
}
@media (max-width: 640px) {
  .value-grid { grid-template-columns: 1fr; }

  /* スマートフォンでは固定しない。
     やりたいことが折り返して縦に伸び、画面の4割を占めてしまうため、
     選ぶ場所のほうが潰れる。1カラムなので上に戻るのも一操作で済む。
     見切れの報告があったのはノートPC幅（横に広く、縦が足りない）で、
     そちらは 641px 以上でこれまでどおり固定される。 */
  .p2-sticky {
    position: static;
    padding: 0;
    margin-bottom: 12px;
  }
  .p2-sticky::after { display: none; }
  .p2-sticky .item-prompt { max-height: none; }
  /* 1行に並べると説明文が細長い列に押し込まれて縦に伸びるので、語名の下に回す */
  .p2-sticky .value-desc-panel { flex-wrap: wrap; }
  .p2-sticky .desc-body { flex: 1 0 100%; }
}

/* Category section inside grid */
.value-category-section {}

/* Section header */
.value-cat-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 9px;
}
.value-cat-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.value-cat-title {
  font-size:0.85rem;
  letter-spacing: 0.32em;
  opacity: 0.9;
  white-space: nowrap;
}
.value-cat-line { flex: 1; height: 1px; }

.value-category-section[data-cat="s1"] .value-cat-dot  { background: var(--s1); box-shadow: 0 0 8px var(--s1); }
.value-category-section[data-cat="s1"] .value-cat-title { color: var(--s1); }
.value-category-section[data-cat="s1"] .value-cat-line  { background: linear-gradient(to right, rgba(var(--s1-rgb),0.35), transparent); }
.value-category-section[data-cat="s2"] .value-cat-dot  { background: var(--s2); box-shadow: 0 0 8px var(--s2); }
.value-category-section[data-cat="s2"] .value-cat-title { color: var(--s2); }
.value-category-section[data-cat="s2"] .value-cat-line  { background: linear-gradient(to right, rgba(var(--s2-rgb),0.35), transparent); }
.value-category-section[data-cat="s3"] .value-cat-dot  { background: var(--s3); box-shadow: 0 0 8px var(--s3); }
.value-category-section[data-cat="s3"] .value-cat-title { color: var(--s3); }
.value-category-section[data-cat="s3"] .value-cat-line  { background: linear-gradient(to right, rgba(var(--s3-rgb),0.35), transparent); }
.value-category-section[data-cat="s4"] .value-cat-dot  { background: var(--s4); box-shadow: 0 0 8px var(--s4); }
.value-category-section[data-cat="s4"] .value-cat-title { color: var(--s4); }
.value-category-section[data-cat="s4"] .value-cat-line  { background: linear-gradient(to right, rgba(var(--s4-rgb),0.35), transparent); }

/* ── Chips grid（コンパクト・密） ── */
.chips-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 6px;
}

/* ── Value chip ──
   ボタンは全て同じ大きさ（高さ固定）。長いラベルは
   文字数クラス(chip-len-m/l)でフォントを縮めて収める */
.value-chip {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2px 4px;
  border-radius: 8px;
  font-family: inherit;
  font-size:0.85rem;
  cursor: pointer;
  text-align: center;
  line-height: 1.35;
  letter-spacing: 0.04em;
  height: 46px;
  overflow: hidden;
  user-select: none;
  transition: background 0.18s, border-color 0.18s, color 0.18s,
              box-shadow 0.18s, transform 0.14s;
  /* デフォルト: カテゴリ色なし（クラスで上書き） */
  background: rgba(255,255,255,0.035);
  border: 1px solid rgba(255,255,255,0.07);
  color: rgba(200,192,184,0.65);
}

/* 文字数に応じてフォントを縮めてボタン内に収める */
.value-chip.chip-len-m { font-size: 0.76rem; letter-spacing: 0.02em; }
.value-chip.chip-len-l { font-size: 0.68rem; letter-spacing: 0; }

/* ── カテゴリ別の未選択色 ── */
.value-chip.cat-s1 {
  background: rgba(var(--s1-rgb),0.05);
  border-color: rgba(var(--s1-rgb),0.18);
  color: rgba(240,160,80,0.72);
}
.value-chip.cat-s2 {
  background: rgba(var(--s2-rgb),0.05);
  border-color: rgba(var(--s2-rgb),0.18);
  color: rgba(224,120,152,0.72);
}
.value-chip.cat-s3 {
  background: rgba(var(--s3-rgb),0.05);
  border-color: rgba(var(--s3-rgb),0.18);
  color: rgba(88,184,122,0.72);
}
.value-chip.cat-s4 {
  background: rgba(var(--s4-rgb),0.05);
  border-color: rgba(var(--s4-rgb),0.18);
  color: rgba(136,144,216,0.72);
}

/* ── ホバー ── */
.value-chip.cat-s1:hover:not(.dimmed) { background: rgba(var(--s1-rgb),0.12); border-color: rgba(var(--s1-rgb),0.40); color: var(--s1); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--s1-rgb),0.12); }
.value-chip.cat-s2:hover:not(.dimmed) { background: rgba(var(--s2-rgb),0.12); border-color: rgba(var(--s2-rgb),0.40); color: var(--s2); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--s2-rgb),0.12); }
.value-chip.cat-s3:hover:not(.dimmed) { background: rgba(var(--s3-rgb),0.12); border-color: rgba(var(--s3-rgb),0.40); color: var(--s3); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--s3-rgb),0.12); }
.value-chip.cat-s4:hover:not(.dimmed) { background: rgba(var(--s4-rgb),0.12); border-color: rgba(var(--s4-rgb),0.40); color: var(--s4); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--s4-rgb),0.12); }

/* ── 選択済み ── */
.value-chip.selected-s1 {
  background: rgba(var(--s1-rgb),0.18);
  border-color: rgba(var(--s1-rgb),0.65);
  color: var(--s1);
  box-shadow: 0 0 18px rgba(var(--s1-rgb),0.18), inset 0 0 0 1px rgba(var(--s1-rgb),0.25);
  transform: translateY(-2px);
}
.value-chip.selected-s2 {
  background: rgba(var(--s2-rgb),0.18);
  border-color: rgba(var(--s2-rgb),0.65);
  color: var(--s2);
  box-shadow: 0 0 18px rgba(var(--s2-rgb),0.18), inset 0 0 0 1px rgba(var(--s2-rgb),0.25);
  transform: translateY(-2px);
}
.value-chip.selected-s3 {
  background: rgba(var(--s3-rgb),0.18);
  border-color: rgba(var(--s3-rgb),0.65);
  color: var(--s3);
  box-shadow: 0 0 18px rgba(var(--s3-rgb),0.18), inset 0 0 0 1px rgba(var(--s3-rgb),0.25);
  transform: translateY(-2px);
}
.value-chip.selected-s4 {
  background: rgba(var(--s4-rgb),0.18);
  border-color: rgba(var(--s4-rgb),0.65);
  color: var(--s4);
  box-shadow: 0 0 18px rgba(var(--s4-rgb),0.18), inset 0 0 0 1px rgba(var(--s4-rgb),0.25);
  transform: translateY(-2px);
}

/* ── 3つ選択済みで選択できないもの ── */
.value-chip.dimmed {
  opacity: 0.28;
  cursor: not-allowed;
  transform: none !important;
}

/* ── Phase 2 nav ── */
.phase2-nav {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  position: sticky;
  bottom: 0;
  background: linear-gradient(to top, var(--bg) 65%, transparent);
  padding: 20px 0 10px;
}

/* ══════════════════════════════════════════════════
   PHASE 3 — Network visualization
══════════════════════════════════════════════════ */
#phase-3.active {
  display: flex;
  flex-direction: column;
  align-items: stretch;   /* .phase.active の center を上書き */
  height: 100vh;
  overflow: hidden;
}

/* ── ツールバー ── */
.p3-toolbar {
  height: 52px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 20px;
  background: rgba(11,11,20,0.97);
  border-bottom: 1px solid var(--border);
  gap: 12px;
  z-index: 20;
}
.p3-brand {
  display: flex;
  align-items: baseline;
  gap: 14px;
  white-space: nowrap;
  flex-shrink: 0;
}
.p3-brand .en {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size:0.72rem;
  letter-spacing: 0.30em;
  color: var(--text-dim);
}
.p3-brand-title {
  font-size:0.85rem;
  font-weight: 300;
  letter-spacing: 0.32em;
  color: var(--text-mid);   /* ツールバーが明るくなった際に取り残されていた */
}
.p3-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.p3-actions .btn-secondary,
.p3-actions .btn-outline { padding: 7px 14px; font-size:0.85rem; }

/* ── メインエリア ── */
.p3-main {
  flex: 1;
  display: flex;
  min-height: 0;
}

#network-container {
  flex: 1;
  position: relative;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
}
/* Canvas は JS で動的挿入 — position:absolute, top:0, left:0 */

/* ── サイドバー ── */
.p3-sidebar {
  width: 210px;
  flex-shrink: 0;
  overflow-y: auto;
  background: rgba(11,11,20,0.92);
  border-left: 1px solid var(--border);
  padding: 14px 12px;
}

#top10-list {
  /* 絶対配置なし — サイドバー内の通常フロー */
}

/* 回転コントロールボタングループ */
.rot-controls {
  display: flex;
  align-items: center;
  gap: 2px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 8px;
  padding: 3px;
}
.btn-rot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: rgba(200,192,184,0.55);
  font-size:0.85rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  line-height: 1;
}
.btn-rot:hover {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.90);
}
.btn-rot.active {
  background: rgba(255,255,255,0.14);
  color: rgba(255,255,255,0.95);
}

/* ── この星座の使いかた（価値観 → 行動の反転） ── */
.usage-text {
  background: rgba(184,150,90,0.05);
  border: 1px solid rgba(184,150,90,0.18);
  border-radius: 12px;
  padding: 26px 28px 22px;
}
.usage-para {
  font-family: 'Noto Serif JP', serif;
  font-size: 0.85rem;
  font-weight: 300;
  line-height: 2.1;
  letter-spacing: 0.06em;
  color: var(--text-mid);   /* 暗色テーマの値を直書きしていて明背景で読めなかった */
  margin-bottom: 18px;
}
.usage-para:last-child { margin-bottom: 0; }
.usage-para b {
  color: var(--gold);
  font-weight: 500;
}


/* ── 招待ページ: 見本を先に見せるブロック ──────────────────────
   招待ページで78%が離脱していたため、「20分かかる」より先に
   「何が手に入るか」を出す構成に変えた。画像とサンプル文はその実物。 */
/* イントロだけヘッダーを詰める。ボタンをファーストビューに収めるため。 */
#phase-intro .app-header { margin-bottom: 2px; }
#phase-intro .app-header h1 { font-size: 1.28rem; }
#phase-intro .rule { margin: 10px auto 12px; }
#phase-intro .intro-lead { margin-bottom: 14px; }

.intro-sample {
  margin: 0 auto 12px;
  max-width: 560px;
}
.intro-sample img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 14px;
  box-shadow: 0 10px 34px rgba(40,28,12,0.18), 0 2px 8px rgba(40,28,12,0.10);
}
.intro-sample figcaption {
  margin-top: 10px;
  text-align: center;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.intro-quote {
  max-width: 600px;
  margin: 0 auto 18px;
  padding: 14px 18px 10px;
  background: rgba(184,150,90,0.055);
  border: 1px solid rgba(184,150,90,0.20);
  border-radius: 12px;
}
.intro-quote p {
  font-size: 0.85rem;
  line-height: 2.0;
  letter-spacing: 0.03em;
  color: var(--text-mid);
  margin: 0;
}
.intro-quote b { color: var(--gold-deep, #8E6730); font-weight: 600; }
.intro-quote .iq-note {
  margin-top: 10px;
  font-size: 0.8rem;
  color: var(--text-dim);
  text-align: right;
}
/* .phase-footer は flex/右寄せなので、招待ページでは縦積み・中央に上書きする */
.intro-cta,
#phase-intro .phase-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 4px;
}
#phase-intro .phase-footer .btn-primary { min-width: 280px; }
.intro-cta-note {
  margin-top: 12px;
  text-align: center;
  font-size: 0.8rem;
  letter-spacing: 0.05em;
  color: var(--text-dim);
}
/* ここから下は「読んでから決めたい人」向け。区切りを一本入れる。 */
.intro-fold {
  width: 70px; height: 1px;
  margin: 34px auto 30px;
  background: linear-gradient(to right, transparent, rgba(184,150,90,0.42), transparent);
}
@media (max-width: 520px) {
  /* スマホでもボタンをファーストビューに入れたいので、見出し周りを詰める */
  #phase-intro .app-header h1 { font-size: 1.06rem; letter-spacing: 0.30em; }
  #phase-intro .app-header .en { font-size: 0.78rem; }
  #phase-intro .rule { margin: 8px auto 9px; }
  #phase-intro .intro-lead { font-size: 0.95rem; margin-bottom: 10px; }
  .intro-sample { margin-top: 0; margin-bottom: 8px; }
  .intro-sample figcaption { margin-top: 7px; font-size: 0.8rem; }
  .intro-quote { padding: 12px 14px 9px; margin-bottom: 14px; }
  .intro-quote p { font-size: 0.82rem; line-height: 1.85; }
  .intro-cta-note { margin-top: 9px; }
  #phase-intro .phase-footer .btn-primary { min-width: 0; width: 100%; }
}

/* ── フッター ── */
.p3-footer {
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 0 20px;
  background: rgba(11,11,20,0.95);
  border-top: 1px solid var(--border);
}
.p3-legend-row {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
}

.legend-3-items {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.legend-3-item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size:0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}
.l3-dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  display: inline-block;
}
.l3-dot.s1 { background: var(--s1); box-shadow: 0 0 6px var(--s1); }
.l3-dot.s2 { background: var(--s2); box-shadow: 0 0 6px var(--s2); }
.l3-dot.s3 { background: var(--s3); box-shadow: 0 0 6px var(--s3); }
.l3-dot.s4 { background: var(--s4); box-shadow: 0 0 6px var(--s4); }
.legend-3-hint {
  font-size:0.85rem;
  color: rgba(106,102,120,0.55);
  letter-spacing: 0.06em;
}

/* #top10-list は .p3-sidebar 内の通常フロー（絶対配置なし）*/
.top10-heading {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size:0.60rem;
  letter-spacing: 0.38em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 9px;
}
.top10-ol {
  display: flex;
  flex-direction: column;
  gap: 3px;
  list-style: none;
}
.top10-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 12px 4px 8px;
  border-radius: 5px;
  border: 1px solid rgba(255,255,255,0.06);
  background: rgba(255,255,255,0.02);
}
.top10-item.is-top3 {
  border-color: rgba(232,194,82,0.35);
  background: rgba(232,194,82,0.07);
}
.top10-rank {
  font-size:0.85rem;
  color: var(--text-dim);
  min-width: 1.4em;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.top10-item.is-top3 .top10-rank { color: var(--gold); }
.top10-dot-sm {
  width: 5px; height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}
.top10-dot-sm.s1 { background: var(--s1); box-shadow: 0 0 4px var(--s1); }
.top10-dot-sm.s2 { background: var(--s2); box-shadow: 0 0 4px var(--s2); }
.top10-dot-sm.s3 { background: var(--s3); box-shadow: 0 0 4px var(--s3); }
.top10-dot-sm.s4 { background: var(--s4); box-shadow: 0 0 4px var(--s4); }
.top10-label {
  font-size:0.85rem;
  color: var(--text);
  letter-spacing: 0.04em;
}
.top10-item.is-top3 .top10-label { color: rgba(232,194,82,0.90); }
.top10-star { font-size:0.85rem; color: var(--gold); margin-left: 1px; }
.top10-count {
  font-size:0.85rem;
  color: var(--text-dim);
  margin-left: 2px;
}
.top10-item.is-top3 .top10-count { color: rgba(232,194,82,0.65); }

/* ── Tooltip ── */
.tooltip {
  position: absolute;
  background: rgba(11,11,20,0.96);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 10px 14px;
  font-size:0.85rem;
  color: var(--text);
  pointer-events: none;
  z-index: 100;
  letter-spacing: 0.05em;
  line-height: 1.55;
  max-width: 200px;
  backdrop-filter: blur(12px);
  box-shadow: 0 8px 32px rgba(0,0,0,0.5);
  transition: opacity 0.15s;
}
.tooltip.hidden { opacity: 0; }
.tooltip-name  { font-size: 0.88rem; font-weight: 500; color: var(--text-mid); }
.tooltip-cat   { font-size:0.85rem; color: var(--text-dim); margin-top: 3px; letter-spacing: 0.12em; }
.tooltip-count { margin-top: 6px; color: var(--gold); font-size:0.85rem; }

/* リンクホバー用ツールチップ */
.tooltip-link-names {
  font-size:0.85rem;
  font-weight: 500;
  color: var(--text);
  letter-spacing: 0.04em;
  line-height: 1.5;
}
.tooltip-link-count {
  margin-top: 5px;
  font-size:0.85rem;
  color: var(--gold);
  letter-spacing: 0.06em;
}

/* Canvas は cursor:grab を JS で直接設定 */

/* ── Animations ── */
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(5px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Scrollbars ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 2px; }

/* ══════════════════════════════════════════════════
   PHASE 3 — 物語を見るボタン
══════════════════════════════════════════════════ */
.btn-narrative {
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: linear-gradient(135deg, rgba(136,144,216,0.18), rgba(88,184,122,0.12));
  border: 1px solid rgba(136,144,216,0.40);
  border-radius: 20px;
  color: rgba(200,192,220,0.90);
  font-family: 'Noto Serif JP', serif;
  font-size:0.85rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
  pointer-events: all;
}
.btn-narrative:hover {
  background: linear-gradient(135deg, rgba(136,144,216,0.32), rgba(88,184,122,0.22));
  border-color: rgba(136,144,216,0.70);
  color: #fff;
}

/* 狭い画面では横に並べず、ランキングを星座の下に回す。
   210px 固定・縮小不可のサイドバーを横に置いたままだと、375px の画面で
   星座に残るのは 145px しかなく、体験の中心である星座より一覧のほうが
   広いという逆転が起きていた。 */
@media (max-width: 640px) {
  .p3-main { flex-direction: column; }
  /* 高さは vh で先に確定させる。中身の高さ任せ(flex-basis:auto)にすると、
     ランキングは JS が後から流し込むため、キャンバスを測る時点では
     まだ空＝高さ0。キャンバスが全高を取ったあとに一覧が入り、
     フッターに重なっていた。 */
  .p3-sidebar {
    width: auto;
    flex: 0 0 32vh;
    max-height: 32vh;
    border-left: none;
    border-top: 1px solid var(--border);
  }
  #network-container { flex: 1 1 auto; }
  /* 幅が足りず「物語を見る」が縦に潰れるため、凡例は畳む
     （色の意味は下のランキングの点で分かる） */
  .p3-legend-row { display: none; }
  .p3-footer { padding: 0 12px; }
  .btn-narrative { white-space: nowrap; }
}

/* ══════════════════════════════════════════════════
   PHASE 4 — 統計 & クラスター
══════════════════════════════════════════════════ */

/* ── ネットワーク統計 ── */
.p4-stats-section { padding-bottom: 0; }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 18px 16px;
  text-align: center;
}
.stat-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem;
  font-weight: 300;
  color: var(--gold);
  letter-spacing: 0.04em;
  line-height: 1;
}
.stat-label {
  font-size:0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.10em;
  margin-top: 8px;
}

/* ── クラスターグリッド ── */
.cluster-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
}
@media (max-width: 520px) { .cluster-grid { grid-template-columns: 1fr; } }
.cluster-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px;
}
.cluster-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.cluster-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.cluster-dot.s1 { background: var(--s1); box-shadow: 0 0 6px var(--s1); }
.cluster-dot.s2 { background: var(--s2); box-shadow: 0 0 6px var(--s2); }
.cluster-dot.s3 { background: var(--s3); box-shadow: 0 0 6px var(--s3); }
.cluster-dot.s4 { background: var(--s4); box-shadow: 0 0 6px var(--s4); }
.cluster-name {
  font-size:0.85rem;
  color: var(--text-mid);
  letter-spacing: 0.06em;
  flex: 1;
}
.cluster-pct {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.0rem;
  color: var(--text-dim);
}
.cluster-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}
.cluster-chip {
  font-size:0.85rem;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: 0.04em;
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-mid);
  background: rgba(255,255,255,0.04);
}
.cluster-chip.s1 { border-color: rgba(240,160,80,0.30); color: rgba(240,160,80,0.90); }
.cluster-chip.s2 { border-color: rgba(224,120,152,0.30); color: rgba(224,120,152,0.90); }
.cluster-chip.s3 { border-color: rgba(88,184,122,0.30); color: rgba(88,184,122,0.90); }
.cluster-chip.s4 { border-color: rgba(136,144,216,0.30); color: rgba(136,144,216,0.90); }
.cluster-chip.chip-top { font-weight: 500; border-width: 1.5px; }

/* ── キャラクターカード ──────────────────────────── */
.char-card {
  border-radius: 18px;
  padding: 28px 24px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

/* ── 画像 + テキスト レイアウト ── */
.char-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
  position: relative;
  z-index: 1;
}
@media (max-width: 700px) {
  .char-layout { grid-template-columns: 1fr; }
}

/* 画像列 */
.char-img-col {
  display: flex;
  flex-direction: column;
}
.char-img-wrap {
  width: 100%;
  aspect-ratio: 1 / 1;
  border-radius: 14px;
  overflow: hidden;
  background: #0B0B14;
  border: 1px solid rgba(255,255,255,0.08);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
/* ジェネレーティブアート canvas */
.char-art-canvas {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: 13px;
}

/* テキスト列 */
.char-text-col {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
/* カテゴリ別グロー + ボーダー */
/* アート列なし（テキストのみの1カラム） */
.char-layout-noart { grid-template-columns: 1fr !important; }

/* SOURCE CODE 予約ボタン */
.btn-book-source {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 18px;
  padding: 16px 26px;
  background: linear-gradient(135deg, rgba(var(--gold-rgb),0.22), rgba(var(--gold-rgb),0.10));
  border: 1px solid var(--gold-border);
  border-radius: 14px;
  color: var(--gold);
  font-family: inherit;
  font-size: 1.0rem;
  letter-spacing: 0.08em;
  text-decoration: none;
  text-align: center;
  transition: background 0.2s, box-shadow 0.2s, transform 0.2s;
}
.btn-book-source:hover {
  background: rgba(var(--gold-rgb),0.30);
  box-shadow: 0 0 26px rgba(var(--gold-rgb),0.22);
  transform: translateY(-1px);
}
.btn-book-source .bk-sub {
  font-size:0.85rem;
  color: var(--text-mid);
  letter-spacing: 0.14em;
}

.char-s1 { border-color: rgba(240,160,80,0.40); }
.char-s2 { border-color: rgba(224,120,152,0.40); }
.char-s3 { border-color: rgba(88,184,122,0.40);  }
.char-s4 { border-color: rgba(136,144,216,0.40); }
.char-s1::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 50% -10%, rgba(240,160,80,0.10) 0%, transparent 60%); pointer-events:none; }
.char-s2::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 50% -10%, rgba(224,120,152,0.10) 0%, transparent 60%); pointer-events:none; }
.char-s3::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 50% -10%, rgba(88,184,122,0.10) 0%, transparent 60%); pointer-events:none; }
.char-s4::before { content:''; position:absolute; inset:0; background: radial-gradient(ellipse at 50% -10%, rgba(136,144,216,0.10) 0%, transparent 60%); pointer-events:none; }

/* ヘッダー行 */
.char-card-top {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 20px;
}
.char-icon {
  font-size: 2.6rem;
  line-height: 1;
  flex-shrink: 0;
}
.char-s1 .char-icon { color: var(--s1); text-shadow: 0 0 20px rgba(240,160,80,0.6); }
.char-s2 .char-icon { color: var(--s2); text-shadow: 0 0 20px rgba(224,120,152,0.6); }
.char-s3 .char-icon { color: var(--s3); text-shadow: 0 0 20px rgba(88,184,122,0.6);  }
.char-s4 .char-icon { color: var(--s4); text-shadow: 0 0 20px rgba(136,144,216,0.6); }
.char-titles { display: flex; flex-direction: column; gap: 4px; }
.char-name {
  font-size: 1.55rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  color: var(--text);
  line-height: 1.2;
}
.char-sub {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: 0.85rem;
  letter-spacing: 0.24em;
  color: var(--text-dim);
}

/* キャッチコピー */
.char-summary {
  font-size:0.85rem;
  letter-spacing: 0.08em;
  color: var(--gold);
  border: 1px solid var(--gold-border);
  background: var(--gold-dim);
  border-radius: 8px;
  padding: 10px 18px;
  margin-bottom: 22px;
  line-height: 1.6;
}

/* 説明文 */
.char-desc { margin-bottom: 24px; }
.char-desc-para {
  font-size:0.85rem;
  color: rgba(200,192,184,0.85);
  line-height: 1.9;
  margin-bottom: 10px;
  letter-spacing: 0.03em;
}

/* ギフト × 影 の2カラム */
.char-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 560px) { .char-cols { grid-template-columns: 1fr; } }
.char-section-label {
  font-size:0.92rem;
  font-weight: 600;
  letter-spacing: 0.10em;
  color: var(--text-dim);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.char-gift-list, .char-shadow-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.char-gift-item {
  padding: 9px 13px;
  border-radius: 8px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.07);
  font-size:0.85rem;
  line-height: 1.65;
}
.char-gift-title { color: var(--text-mid); font-weight: 500; }
.char-gift-desc  { color: var(--text-dim); }
.char-shadow-note {
  margin-top: 8px;
  font-size: 0.8rem;
  line-height: 1.9;
  letter-spacing: 0.04em;
  color: var(--text-dim);
}
.char-shadow-item {
  padding: 9px 13px;
  border-radius: 8px;
  background: rgba(224,120,152,0.04);
  border: 1px solid rgba(224,120,152,0.15);
  font-size:0.85rem;
  color: rgba(224,120,152,0.80);
  line-height: 1.65;
}

/* ══════════════════════════════════════════════════
   PHASE 4 — 葛藤 & ナラティブ
══════════════════════════════════════════════════ */
#phase-4.active {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  /* 前のフェーズと同じ夜空 (body の --bg + 紫のグロー) をそのまま見せる */
  background: transparent;
}
.p4-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.p4-inner {
  max-width: 680px;
  margin: 0 auto;
  padding: 48px 24px 60px;
}

/* ── ヘッダー ── */
.p4-header {
  text-align: center;
  margin-bottom: 40px;
}
.p4-header .en {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size:0.72rem;
  letter-spacing: 0.38em;
  color: var(--text-dim);
  display: block;
  margin-bottom: 10px;
}
.p4-header h2 {
  font-size: 0.88rem;
  font-weight: 300;
  letter-spacing: 0.42em;
  color: rgba(200,192,184,0.80);
  margin-bottom: 16px;
}
.p4-header .rule {
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 0 auto;
}

/* ── セクション共通 ── */
.p4-section {
  margin-bottom: 44px;
}
/* 節の見出し。中身は日本語なので明朝で組む。
   以前は欧文の Cormorant Garamond 斜体・0.68rem・字間0.32em を指定していたが、
   日本語には斜体が無いためブラウザが疑似斜体で歪ませ、すぐ下の説明文(0.85rem)
   より小さく薄い見出しになっていた。 */
.p4-section-label {
  font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', serif;
  font-style: normal;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--gold);
  text-transform: none;
  margin-bottom: 8px;
}
.p4-section-sub {
  font-size:0.85rem;
  color: var(--text-dim);
  letter-spacing: 0.04em;
  margin-bottom: 18px;
  line-height: 1.7;
}

/* ── 称号直下のシェア（受け取った直後の一手） ── */
.seal-share{
  display:flex; justify-content:center; gap:12px; flex-wrap:wrap;
  margin-top:18px;
}
.btn-seal-share{
  font-family:'Shippori Mincho', serif;
  font-size:0.88rem; letter-spacing:0.08em;
  color:var(--gold); background:transparent;
  border:1px solid var(--gold-border); border-radius:999px;
  padding:10px 22px; cursor:pointer;
  transition:background .25s, color .25s;
}
.btn-seal-share:hover{ background:var(--gold-dim); }

/* ── カテゴリバー ── */
.cat-bar {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.cat-bar-item {
  display: flex;
  align-items: center;
  gap: 12px;
}
.cat-bar-label {
  font-size:0.85rem;
  letter-spacing: 0.04em;
  width: 84px;
  flex-shrink: 0;
  opacity: 0.85;
}
.cat-bar-label.s1 { color: var(--s1); }
.cat-bar-label.s2 { color: var(--s2); }
.cat-bar-label.s3 { color: var(--s3); }
.cat-bar-label.s4 { color: var(--s4); }
.cat-bar-label.d1 { color: var(--d1); }
.cat-bar-label.d2 { color: var(--d2); }
.cat-bar-label.d3 { color: var(--d3); }
.cat-bar-label.d4 { color: var(--d4); }
.cat-bar-label.d5 { color: var(--d5); }
.cat-bar-label.d6 { color: var(--d6); }
.cat-bar-label.d7 { color: var(--d7); }
.cat-bar-label.d8 { color: var(--d8); }
.cat-bar-track {
  flex: 1;
  height: 8px;
  background: rgba(255,255,255,0.06);
  border-radius: 4px;
  overflow: hidden;
}
.cat-bar-fill {
  height: 100%;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 6px;
  transition: width 0.8s cubic-bezier(0.4,0,0.2,1);
  min-width: 0;
}
.cat-bar-fill.s1 { background: linear-gradient(90deg, rgba(240,160,80,0.4), var(--s1)); }
.cat-bar-fill.s2 { background: linear-gradient(90deg, rgba(224,120,152,0.4), var(--s2)); }
.cat-bar-fill.s3 { background: linear-gradient(90deg, rgba(88,184,122,0.4), var(--s3)); }
.cat-bar-fill.s4 { background: linear-gradient(90deg, rgba(136,144,216,0.4), var(--s4)); }
.cat-bar-pct-inner {
  font-size:0.85rem;
  color: rgba(255,255,255,0.80);
  letter-spacing: 0;
  font-family: monospace;
}
.cat-bar-pct-outer {
  font-size:0.85rem;
  color: var(--text-dim);
  font-family: monospace;
  min-width: 28px;
}

/* ── 葛藤カード ── */
.tension-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.tension-card {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  padding: 20px 22px;
  transition: border-color 0.2s;
}
.tension-card:hover {
  border-color: rgba(255,255,255,0.16);
}
.tension-primary {
  border-color: rgba(136,144,216,0.28);
  background: rgba(136,144,216,0.05);
}
.tension-secondary {
  border-color: rgba(255,255,255,0.10);
}
.tension-tertiary {
  border-color: rgba(255,255,255,0.07);
  opacity: 0.88;
}
.tension-header {
  margin-bottom: 12px;
}
.tension-vs {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.tension-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 12px;
  border-radius: 20px;
  font-size:0.85rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  border: 1px solid currentColor;
}
.tension-chip em {
  font-style: normal;
  font-size:0.85rem;
  opacity: 0.65;
  letter-spacing: 0;
}
.tension-chip.s1 { color: var(--s1); background: rgba(240,160,80,0.10); }
.tension-chip.s2 { color: var(--s2); background: rgba(224,120,152,0.10); }
.tension-chip.s3 { color: var(--s3); background: rgba(88,184,122,0.10); }
.tension-chip.s4 { color: var(--s4); background: rgba(136,144,216,0.10); }
.tension-sym {
  font-size: 0.90rem;
  color: rgba(255,255,255,0.25);
  flex-shrink: 0;
}
.tension-title {
  font-family: 'Noto Serif JP', serif;
  font-size:0.85rem;
  font-weight: 500;
  color: rgba(200,192,184,0.90);
  letter-spacing: 0.04em;
}
.tension-desc {
  font-size:0.85rem;
  color: rgba(150,145,165,0.85);
  line-height: 1.85;
  letter-spacing: 0.04em;
}
.no-tension {
  font-size:0.85rem;
  color: var(--text-dim);
  padding: 16px 0;
  line-height: 1.8;
}

/* ── ナラティブ ── */
.narrative-text {
  background: rgba(255,255,255,0.025);
  border: 1px solid rgba(255,255,255,0.07);
  border-radius: 12px;
  padding: 28px 28px 24px;
}
.narrative-para {
  font-family: 'Noto Serif JP', serif;
  font-size:0.85rem;
  font-weight: 300;
  line-height: 2.1;
  letter-spacing: 0.06em;
  color: rgba(200,192,184,0.85);
  margin-bottom: 20px;
}
.narrative-para:last-child { margin-bottom: 0; }
.narrative-para:first-child {
  color: rgba(220,212,200,0.92);
}

/* ── フッター ── */
.p4-footer {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 48px;
}

/* ── JSON コピーボタン ── */
.btn-copy-json {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  border-radius: 6px;
  color: var(--gold);
  font-family: inherit;
  font-size:0.85rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.btn-copy-json:hover {
  background: rgba(var(--gold-rgb), 0.22);
  border-color: rgba(var(--gold-rgb), 0.65);
}
.btn-copy-json .copy-icon {
  font-size: 1rem;
  line-height: 1;
}
.btn-copy-json.copied {
  background: rgba(88, 184, 122, 0.18);
  border-color: rgba(88, 184, 122, 0.50);
  color: #58B87A;
}

/* ── 音脈名刺 / 羅針盤 ハンドオフ ─────────────────── */
.handoff-box {
  background: var(--surface);
  border: 1px solid var(--gold-border);
  border-radius: 14px;
  padding: 24px 22px;
}
.handoff-row { margin-bottom: 18px; }
.handoff-label {
  display: block;
  font-size:16px;
  color: var(--text-label);
  letter-spacing: 0.12em;
  margin-bottom: 8px;
}
.handoff-input {
  width: 100%;
  max-width: 340px;
  padding: 11px 14px;
  background: var(--bg2);
  border: 1px solid var(--border-h);
  border-radius: 8px;
  color: var(--text);
  font-family: inherit;
  font-size:16px;
  outline: none;
  transition: border-color 0.2s;
}
.handoff-input:focus { border-color: var(--gold-border); }
.handoff-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}
.btn-handoff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 10px;
  background: var(--bg2);
  border: 1px solid var(--border-h);
  border-radius: 10px;
  color: var(--text);
  font-family: inherit;
  font-size:16px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: all 0.2s;
}
.btn-handoff:hover { border-color: var(--gold-border); background: var(--surface-h); }
.btn-handoff:disabled { opacity: 0.6; cursor: default; }
.btn-handoff .hf-sub {
  font-size:16px;
  color: var(--text-dim);
  letter-spacing: 0.08em;
}
.btn-handoff-all {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, rgba(232,194,82,0.9), rgba(232,194,82,0.65));
  border: none;
  border-radius: 10px;
  color: #14140F;
  font-family: inherit;
  font-size:16px;
  font-weight: 500;
  letter-spacing: 0.14em;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 14px;
}
.btn-handoff-all:hover { filter: brightness(1.08); }
.btn-handoff-all:disabled { opacity: 0.6; cursor: default; }
.handoff-note {
  font-size:16px;
  color: var(--text-dim);
  letter-spacing: 0.05em;
  line-height: 1.8;
}

/* ════════════════════════════════════════════════════════════
   音脈名刺 ブランド retheme — アイボリー×金 (明るく柔らかい)
   ダークテーマの :root を上書きし、②音脈名刺 と同じ世界観へ。
   星座キャンバスと生成アートは「額装された夜空」として暗いまま残す。
   ════════════════════════════════════════════════════════════ */
:root {
  --bg:          #FBF8EE;
  --bg2:         #F4EDDC;
  --surface:     rgba(184,150,90,0.055);
  --surface-h:   rgba(184,150,90,0.11);
  --border:      rgba(181,135,74,0.22);
  --border-h:    rgba(181,135,74,0.42);

  --text:        #2A1F12;
  --text-mid:    #4A3A26;
  /* 補足・注記の色。#A08D6E はアイボリー地に対して 3.0:1 しかなく、
     「思い当たるものだけ持っていってください」のような、いちばん読んでほしい
     やわらかい一文ほど読みにくかった。マイページと同じ値に揃えて 4.6:1 にする。 */
  --text-dim:    #7A6F5E;
  --text-label:  #7A5D27;

  --gold:        #B8965A;
  --gold-rgb:    184,150,90;
  --gold-dim:    rgba(184,150,90,0.13);
  --gold-border: rgba(184,150,90,0.45);

  /* カテゴリ色は明背景向けに濃度調整 (音脈名刺の CAT と同じ) */
  --s1:     #D98A3E; --s1-rgb: 217,138,62;
  --s2:     #C8607E; --s2-rgb: 200,96,126;
  --s3:     #3E9862; --s3-rgb: 62,152,98;
  --s4:     #6874B8; --s4-rgb: 104,116,184;
}

html, body {
  background: var(--bg);
  color: var(--text);
  font-family: 'Shippori Mincho', 'Hiragino Mincho ProN', serif;
}

/* 水彩のにじみ (音脈名刺トップと同じ空気感) */
body::before {
  content: '';
  position: fixed;
  top: -12%; left: -18%;
  width: 55vw; height: 55vw;
  max-width: 480px; max-height: 480px;
  border-radius: 50%;
  background: radial-gradient(circle, #C7D4C0 0%, transparent 70%);
  opacity: 0.26;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
body::after {
  content: '';
  position: fixed;
  bottom: -10%; right: -20%;
  width: 60vw; height: 60vw;
  max-width: 520px; max-height: 520px;
  border-radius: 50%;
  background: radial-gradient(circle, #F2D9C4 0%, transparent 70%);
  opacity: 0.24;
  filter: blur(60px);
  pointer-events: none;
  z-index: 0;
}
.phase { position: relative; z-index: 1; }

/* ヘッダの英字ラベル → Cinzel 金 */
.app-header .en, .p3-brand .en, .p4-header .en {
  font-family: 'Cinzel', serif;
  color: var(--gold);
  letter-spacing: 0.5em;
  text-transform: uppercase;
}

/* フェーズ3: ツールバー・サイドバー・フッターを明るく */
.p3-toolbar { background: rgba(251,248,238,0.97) !important; }
.p3-sidebar { background: rgba(251,248,238,0.92) !important; }
.p3-footer  { background: rgba(251,248,238,0.95) !important; }

/* 星座キャンバスは「額装された夜空」— 音脈名刺の星座セクションと同じ扱い */
#network-container {
  border-radius: 18px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 1px rgba(42,30,63,0.35),
    0 18px 44px -18px rgba(85,60,30,0.25);
  margin: 10px;
}

/* ツールチップは夜空の上に浮くため暗いまま (可読性維持) */

/* 主要ボタンを音脈名刺の金グラデへ */
.btn-primary, .btn-narrative {
  background: linear-gradient(135deg, #B5874A, #D4B070) !important;
  color: #FBF8EE !important;
  border: none !important;
  box-shadow: 0 6px 18px -4px rgba(140,100,40,0.45);
}
.btn-primary:disabled {
  background: rgba(184,150,90,0.25) !important;
  color: rgba(74,58,38,0.5) !important;
  box-shadow: none;
}
.btn-handoff-all {
  background: linear-gradient(135deg, #B5874A, #D4B070);
  color: #FBF8EE;
}

/* ══ フェーズ0: プロフィール入力 ══ */
.pf-form {
  max-width: 640px;
  margin: 0 auto;
  text-align: left;
}
.pf-group {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 22px;
  margin-bottom: 16px;
}
.pf-group-label {
  font-size:16px;
  color: var(--gold);
  letter-spacing: 0.28em;
  margin-bottom: 14px;
  font-family: 'Cinzel', 'Shippori Mincho', serif;
}
.pf-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
@media (max-width: 560px) { .pf-row { grid-template-columns: 1fr; } }
.pf-field { margin-bottom: 14px; }
.pf-field:last-child { margin-bottom: 0; }
.pf-field label {
  display: block;
  font-size:16px;
  color: var(--text-label);
  letter-spacing: 0.1em;
  margin-bottom: 7px;
}
.pf-req { color: #C05A48; margin-left: 2px; }
.pf-field input, .pf-field textarea {
  width: 100%;
  padding: 11px 13px;
  background: #FFFDF6;
  border: 1px solid var(--border);
  border-radius: 9px;
  color: var(--text);
  font-family: inherit;
  font-size:16px;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
  resize: vertical;
}
.pf-field input:focus, .pf-field textarea:focus {
  border-color: var(--gold-border);
  box-shadow: 0 0 0 3px rgba(184,150,90,0.15);
}
.pf-error {
  color: #C05A48;
  font-size:16px;
  letter-spacing: 0.05em;
  padding: 10px 14px;
  background: rgba(192,90,72,0.07);
  border: 1px solid rgba(192,90,72,0.25);
  border-radius: 9px;
  margin-top: 4px;
}
.handoff-summary {
  font-size:16px;
  color: var(--text-label);
  letter-spacing: 0.04em;
  padding: 10px 13px;
  background: var(--gold-dim);
  border-radius: 8px;
  margin-bottom: 14px;
  line-height: 1.7;
}
.handoff-input { background: #FFFDF6; }
.btn-handoff { background: #FFFDF6; }
.btn-handoff:hover { background: var(--surface-h); }

/* ── 次の一歩カード (②音脈名刺 / ③羅針盤 への任意の招待) ── */
.next-step-card {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--gold-border);
  border-radius: 16px;
  padding: 22px 22px 20px;
  margin-bottom: 14px;
}
.next-step-future {
  border-style: dashed;
  border-color: var(--border);
  opacity: 0.88;
}
.next-step-num {
  flex: 0 0 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #B5874A, #D4B070);
  color: #FBF8EE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
}
.next-step-future .next-step-num {
  background: var(--surface-h);
  color: var(--gold);
  border: 1px solid var(--gold-border);
}
.next-step-body { flex: 1; min-width: 0; }
.next-step-title {
  font-size:16px;
  font-weight: 600;
  color: var(--text);
  letter-spacing: 0.1em;
  margin-bottom: 8px;
}
.next-step-desc {
  font-size:16px;
  color: var(--text-mid);
  letter-spacing: 0.04em;
  line-height: 1.95;
  margin-bottom: 14px;
}
.next-step-desc b { color: var(--gold); font-weight: 600; }
.next-step-cta {
  display: inline-block;
  padding: 12px 26px;
  background: linear-gradient(135deg, #B5874A, #D4B070);
  color: #FBF8EE;
  border-radius: 999px;
  text-decoration: none;
  font-size:16px;
  letter-spacing: 0.16em;
  box-shadow: 0 6px 18px -4px rgba(140,100,40,0.4);
  transition: transform 0.25s, box-shadow 0.25s;
}
.next-step-cta:hover {
  transform: translateY(-1px);
  box-shadow: 0 9px 24px -4px rgba(140,100,40,0.5);
}
.next-step-details { margin-top: 14px; }
.next-step-details summary {
  cursor: pointer;
  font-size:16px;
  color: var(--text-label);
  letter-spacing: 0.06em;
  padding: 4px 0;
}
.next-step-dl {
  margin-top: 12px;
  padding: 16px;
  background: var(--bg2);
  border-radius: 10px;
}
.next-step-dl p {
  font-size:16px;
  color: var(--text-mid);
  letter-spacing: 0.04em;
  line-height: 1.8;
  margin-bottom: 12px;
}

/* ── SNS シェア / 画像保存 ── */
.share-buttons { margin-bottom: 14px; }
.share-buttons .btn-handoff-all { margin-bottom: 10px; }
.share-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (max-width: 560px) { .share-row { grid-template-columns: 1fr; } }

/* ── フェーズ1: 星を灯す体験 ─────────────────────────── */
.p1-why {
  line-height: 2.1 !important;
}

/* 呼び水の問いチップ */
.prompt-chip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 680px;
  margin: 0 auto 14px;
  padding: 12px 16px;
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  border-radius: 12px;
}
.prompt-label {
  flex-shrink: 0;
  font-size:16px;
  color: var(--gold);
  letter-spacing: 0.18em;
  font-family: 'Cinzel', 'Shippori Mincho', serif;
}
.prompt-text {
  flex: 1;
  min-width: 200px;
  font-size:16px;
  color: var(--text-mid);
  letter-spacing: 0.05em;
  line-height: 1.7;
}
.prompt-fade {
  animation: promptIn 0.5s ease;
}
@keyframes promptIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.prompt-next {
  flex-shrink: 0;
  background: none;
  border: 1px solid var(--border-h);
  border-radius: 999px;
  padding: 6px 13px;
  font-size:16px;
  color: var(--text-label);
  font-family: inherit;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: all 0.2s;
}
.prompt-next:hover {
  border-color: var(--gold-border);
  color: var(--gold);
}

/* 星のプログレス */
.star-progress-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  max-width: 680px;
  margin: 4px auto 6px;
}
.star-progress {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
}
.star-dot {
  font-size:16px;
  color: rgba(184,150,90,0.22);
  transition: color 0.4s, text-shadow 0.4s, transform 0.3s;
}
.star-dot.lit {
  color: var(--gold);
  text-shadow: 0 0 8px rgba(212,176,112,0.65);
}
.star-dot.just-lit {
  animation: starLight 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes starLight {
  0%   { transform: scale(0.4) rotate(-30deg); opacity: 0.2; }
  55%  { transform: scale(1.6) rotate(10deg);  text-shadow: 0 0 18px rgba(212,176,112,0.95); }
  100% { transform: scale(1) rotate(0); }
}
.star-extra {
  font-size:16px;
  color: var(--gold);
  letter-spacing: 0.08em;
  align-self: center;
}
.star-count {
  flex-shrink: 0;
  font-size:16px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
  font-family: 'Cormorant Garamond', serif;
}

/* マイルストーンの声かけ */
.milestone-msg {
  text-align: center;
  font-size:16px;
  color: var(--text-label);
  letter-spacing: 0.08em;
  line-height: 1.8;
  margin-bottom: 12px;
  min-height: 1.8em;
}

/* ════ ゲーミフィケーション ════════════════════════════ */

/* ── フェーズ2: 育つ星空 ── */
.p2-sky-wrap {
  position: relative;
  margin-bottom: 14px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid rgba(232,194,82,0.22);
  box-shadow: 0 4px 24px rgba(0,0,0,0.35);
}
#p2-sky {
  display: block;
  width: 100%;
  height: 118px;
}
.sky-message {
  position: absolute;
  left: 0; right: 0; bottom: 5px;
  text-align: center;
  padding: 0 14px;
  font-size:16px;
  letter-spacing: 0.06em;
  color: rgba(255,246,224,0.96);
  text-shadow: 0 1px 8px rgba(0,0,0,0.85);
  opacity: 0;
  transition: opacity 0.6s ease;
  pointer-events: none;
}
.sky-message.show { opacity: 1; }
.sky-message.insight {
  font-size:16px;
  color: #F2DFB8;
}

/* ── フェーズ1: 問いのカード引き ── */
.prompt-card {
  cursor: pointer;
  user-select: none;
  transition: border-color 0.25s ease, box-shadow 0.3s ease;
}
.prompt-card:hover {
  border-color: rgba(232,194,82,0.65);
  box-shadow: 0 4px 22px rgba(232,194,82,0.14);
}
.prompt-card.flipping {
  animation: cardFlip 0.46s ease;
}
@keyframes cardFlip {
  0%   { transform: perspective(700px) rotateX(0); }
  50%  { transform: perspective(700px) rotateX(88deg); }
  100% { transform: perspective(700px) rotateX(0); }
}

/* ── フェーズ4: 星座の命名 + 称号 ── */
.naming-box {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: stretch;
}
.naming-field {
  flex: 1 1 250px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}
.naming-label {
  font-size:16px;
  letter-spacing: 0.14em;
  color: rgba(220,205,180,0.65);
}
.naming-input {
  width: 100%;
  background: rgba(255,255,255,0.05);
  border: none;
  border-bottom: 1px solid rgba(232,194,130,0.45);
  border-radius: 6px 6px 0 0;
  padding: 12px 14px;
  font-family: 'Shippori Mincho', serif;
  font-size: 19px;
  letter-spacing: 0.08em;
  color: #F5EEDD;
  transition: border-color 0.25s ease, background 0.25s ease;
}
.naming-input:focus {
  outline: none;
  border-bottom-color: #E8C282;
  background: rgba(232,194,130,0.08);
}
.naming-input::placeholder { color: rgba(220,205,180,0.35); }
.title-seal {
  flex: 1 1 250px;
  text-align: center;
  padding: 16px 18px 14px;
  border: 1px solid rgba(232,194,130,0.40);
  border-radius: 12px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(232,194,130,0.10), transparent 70%),
    rgba(255,255,255,0.03);
}
.seal-label {
  font-size:16px;
  letter-spacing: 0.24em;
  color: #E8C282;
  opacity: 0.85;
}
.seal-title {
  margin: 7px 0 5px;
  font-family: 'Shippori Mincho', serif;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #F2DFB8;
  text-shadow: 0 0 18px rgba(232,194,130,0.35);
}
.seal-reason {
  font-size:16px;
  line-height: 1.6;
  color: rgba(220,205,180,0.70);
}

/* ════ 8領域カラー & 選びやすさの工夫 ═══════════════════ */
:root {
  --d1: #C05C4C; --d1-rgb: 192,92,76;
  --d2: #CE7226; --d2-rgb: 232,144,64;
  --d3: #A88F2A; --d3-rgb: 224,196,88;
  --d4: #3E9E5C; --d4-rgb: 92,184,116;
  --d5: #3E86B4; --d5-rgb: 72,156,204;
  --d6: #6C74D0; --d6-rgb: 108,116,208;
  --d7: #9059C2; --d7-rgb: 156,104,208;
  --d8: #B8914C; --d8-rgb: 232,200,144;
}

.category-legend.legend-8 { flex-wrap: wrap; gap: 6px; }
.legend-item.d1 { color: var(--d1); border-color: rgba(var(--d1-rgb),0.38); background: rgba(var(--d1-rgb),0.07); }
.legend-item.d2 { color: var(--d2); border-color: rgba(var(--d2-rgb),0.38); background: rgba(var(--d2-rgb),0.07); }
.legend-item.d3 { color: var(--d3); border-color: rgba(var(--d3-rgb),0.38); background: rgba(var(--d3-rgb),0.07); }
.legend-item.d4 { color: var(--d4); border-color: rgba(var(--d4-rgb),0.38); background: rgba(var(--d4-rgb),0.07); }
.legend-item.d5 { color: var(--d5); border-color: rgba(var(--d5-rgb),0.38); background: rgba(var(--d5-rgb),0.07); }
.legend-item.d6 { color: var(--d6); border-color: rgba(var(--d6-rgb),0.38); background: rgba(var(--d6-rgb),0.07); }
.legend-item.d7 { color: var(--d7); border-color: rgba(var(--d7-rgb),0.38); background: rgba(var(--d7-rgb),0.07); }
.legend-item.d8 { color: var(--d8); border-color: rgba(var(--d8-rgb),0.38); background: rgba(var(--d8-rgb),0.07); }

.value-category-section[data-cat="d1"] .value-cat-dot { background: var(--d1); box-shadow: 0 0 8px var(--d1); }
.desc-chip-dot.d1 { background: var(--d1); box-shadow: 0 0 7px var(--d1); }
.value-category-section[data-cat="d2"] .value-cat-dot { background: var(--d2); box-shadow: 0 0 8px var(--d2); }
.desc-chip-dot.d2 { background: var(--d2); box-shadow: 0 0 7px var(--d2); }
.value-category-section[data-cat="d3"] .value-cat-dot { background: var(--d3); box-shadow: 0 0 8px var(--d3); }
.desc-chip-dot.d3 { background: var(--d3); box-shadow: 0 0 7px var(--d3); }
.value-category-section[data-cat="d4"] .value-cat-dot { background: var(--d4); box-shadow: 0 0 8px var(--d4); }
.desc-chip-dot.d4 { background: var(--d4); box-shadow: 0 0 7px var(--d4); }
.value-category-section[data-cat="d5"] .value-cat-dot { background: var(--d5); box-shadow: 0 0 8px var(--d5); }
.desc-chip-dot.d5 { background: var(--d5); box-shadow: 0 0 7px var(--d5); }
.value-category-section[data-cat="d6"] .value-cat-dot { background: var(--d6); box-shadow: 0 0 8px var(--d6); }
.desc-chip-dot.d6 { background: var(--d6); box-shadow: 0 0 7px var(--d6); }
.value-category-section[data-cat="d7"] .value-cat-dot { background: var(--d7); box-shadow: 0 0 8px var(--d7); }
.desc-chip-dot.d7 { background: var(--d7); box-shadow: 0 0 7px var(--d7); }
.value-category-section[data-cat="d8"] .value-cat-dot { background: var(--d8); box-shadow: 0 0 8px var(--d8); }
.desc-chip-dot.d8 { background: var(--d8); box-shadow: 0 0 7px var(--d8); }
.value-cat-en {
  font-size: 0.62em;
  letter-spacing: 0.22em;
  opacity: 0.55;
  font-family: 'Cinzel', serif;
  margin-left: 6px;
}
.value-chip.cat-d1 {
  background: rgba(var(--d1-rgb),0.05);
  border-color: rgba(var(--d1-rgb),0.20);
  color: var(--d1);
}
.value-chip.cat-d1:hover:not(.dimmed) { background: rgba(var(--d1-rgb),0.13); border-color: rgba(var(--d1-rgb),0.42); color: var(--d1); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--d1-rgb),0.13); }
.value-chip.selected-d1 {
  background: rgba(var(--d1-rgb),0.20);
  border-color: rgba(var(--d1-rgb),0.70);
  color: var(--d1);
  box-shadow: 0 0 18px rgba(var(--d1-rgb),0.20), inset 0 0 0 1px rgba(var(--d1-rgb),0.28);
  transform: translateY(-2px);
}
.value-chip.cat-d2 {
  background: rgba(var(--d2-rgb),0.05);
  border-color: rgba(var(--d2-rgb),0.20);
  color: var(--d2);
}
.value-chip.cat-d2:hover:not(.dimmed) { background: rgba(var(--d2-rgb),0.13); border-color: rgba(var(--d2-rgb),0.42); color: var(--d2); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--d2-rgb),0.13); }
.value-chip.selected-d2 {
  background: rgba(var(--d2-rgb),0.20);
  border-color: rgba(var(--d2-rgb),0.70);
  color: var(--d2);
  box-shadow: 0 0 18px rgba(var(--d2-rgb),0.20), inset 0 0 0 1px rgba(var(--d2-rgb),0.28);
  transform: translateY(-2px);
}
.value-chip.cat-d3 {
  background: rgba(var(--d3-rgb),0.05);
  border-color: rgba(var(--d3-rgb),0.20);
  color: var(--d3);
}
.value-chip.cat-d3:hover:not(.dimmed) { background: rgba(var(--d3-rgb),0.13); border-color: rgba(var(--d3-rgb),0.42); color: var(--d3); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--d3-rgb),0.13); }
.value-chip.selected-d3 {
  background: rgba(var(--d3-rgb),0.20);
  border-color: rgba(var(--d3-rgb),0.70);
  color: var(--d3);
  box-shadow: 0 0 18px rgba(var(--d3-rgb),0.20), inset 0 0 0 1px rgba(var(--d3-rgb),0.28);
  transform: translateY(-2px);
}
.value-chip.cat-d4 {
  background: rgba(var(--d4-rgb),0.05);
  border-color: rgba(var(--d4-rgb),0.20);
  color: var(--d4);
}
.value-chip.cat-d4:hover:not(.dimmed) { background: rgba(var(--d4-rgb),0.13); border-color: rgba(var(--d4-rgb),0.42); color: var(--d4); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--d4-rgb),0.13); }
.value-chip.selected-d4 {
  background: rgba(var(--d4-rgb),0.20);
  border-color: rgba(var(--d4-rgb),0.70);
  color: var(--d4);
  box-shadow: 0 0 18px rgba(var(--d4-rgb),0.20), inset 0 0 0 1px rgba(var(--d4-rgb),0.28);
  transform: translateY(-2px);
}
.value-chip.cat-d5 {
  background: rgba(var(--d5-rgb),0.05);
  border-color: rgba(var(--d5-rgb),0.20);
  color: var(--d5);
}
.value-chip.cat-d5:hover:not(.dimmed) { background: rgba(var(--d5-rgb),0.13); border-color: rgba(var(--d5-rgb),0.42); color: var(--d5); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--d5-rgb),0.13); }
.value-chip.selected-d5 {
  background: rgba(var(--d5-rgb),0.20);
  border-color: rgba(var(--d5-rgb),0.70);
  color: var(--d5);
  box-shadow: 0 0 18px rgba(var(--d5-rgb),0.20), inset 0 0 0 1px rgba(var(--d5-rgb),0.28);
  transform: translateY(-2px);
}
.value-chip.cat-d6 {
  background: rgba(var(--d6-rgb),0.05);
  border-color: rgba(var(--d6-rgb),0.20);
  color: var(--d6);
}
.value-chip.cat-d6:hover:not(.dimmed) { background: rgba(var(--d6-rgb),0.13); border-color: rgba(var(--d6-rgb),0.42); color: var(--d6); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--d6-rgb),0.13); }
.value-chip.selected-d6 {
  background: rgba(var(--d6-rgb),0.20);
  border-color: rgba(var(--d6-rgb),0.70);
  color: var(--d6);
  box-shadow: 0 0 18px rgba(var(--d6-rgb),0.20), inset 0 0 0 1px rgba(var(--d6-rgb),0.28);
  transform: translateY(-2px);
}
.value-chip.cat-d7 {
  background: rgba(var(--d7-rgb),0.05);
  border-color: rgba(var(--d7-rgb),0.20);
  color: var(--d7);
}
.value-chip.cat-d7:hover:not(.dimmed) { background: rgba(var(--d7-rgb),0.13); border-color: rgba(var(--d7-rgb),0.42); color: var(--d7); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--d7-rgb),0.13); }
.value-chip.selected-d7 {
  background: rgba(var(--d7-rgb),0.20);
  border-color: rgba(var(--d7-rgb),0.70);
  color: var(--d7);
  box-shadow: 0 0 18px rgba(var(--d7-rgb),0.20), inset 0 0 0 1px rgba(var(--d7-rgb),0.28);
  transform: translateY(-2px);
}
.value-chip.cat-d8 {
  background: rgba(var(--d8-rgb),0.05);
  border-color: rgba(var(--d8-rgb),0.20);
  color: var(--d8);
}
.value-chip.cat-d8:hover:not(.dimmed) { background: rgba(var(--d8-rgb),0.13); border-color: rgba(var(--d8-rgb),0.42); color: var(--d8); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(var(--d8-rgb),0.13); }
.value-chip.selected-d8 {
  background: rgba(var(--d8-rgb),0.20);
  border-color: rgba(var(--d8-rgb),0.70);
  color: var(--d8);
  box-shadow: 0 0 18px rgba(var(--d8-rgb),0.20), inset 0 0 0 1px rgba(var(--d8-rgb),0.28);
  transform: translateY(-2px);
}

/* ── 検索 ── */
.value-search-row { margin: 0 0 10px; }
.value-search {
  width: 100%;
  padding: 9px 14px;
  border-radius: 999px;
  border: 1px solid rgba(184,150,90,0.35);
  background: rgba(255,255,255,0.55);
  font-family: inherit;
  font-size:16px;
  letter-spacing: 0.05em;
  color: var(--text);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.value-search:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,150,90,0.12);
}
.chip-hide { display: none !important; }

/* ── タロット風の問いカード ── */
.tarot-area { max-width: 680px; margin: 0 auto 16px; }
.tarot-label {
  text-align: center;
  font-size:16px;
  letter-spacing: 0.14em;
  color: var(--gold);
  margin-bottom: 10px;
}
.tarot-row {
  display: flex;
  gap: 12px;
  justify-content: center;
}
.tarot-card {
  flex: 1 1 0;
  max-width: 216px;
  min-height: 96px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  perspective: 700px;
  font-family: inherit;
}
.tc-inner {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 96px;
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.35, 0.1, 0.3, 1);
}
.tarot-card.open .tc-inner { transform: rotateY(180deg); }
.tc-back, .tc-front {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  padding: 10px 12px;
}
.tc-back {
  background:
    radial-gradient(circle at 50% 42%, rgba(184,150,90,0.20), transparent 62%),
    linear-gradient(160deg, #2A2140, #171129);
  border: 1px solid rgba(232,194,130,0.40);
  color: #E8C282;
  font-size: 22px;
  text-shadow: 0 0 14px rgba(232,194,130,0.6);
}
.tarot-card:hover .tc-back { box-shadow: 0 6px 20px rgba(184,150,90,0.25); }
.tc-front {
  transform: rotateY(180deg);
  background: rgba(255,255,255,0.72);
  border: 1px solid rgba(184,150,90,0.45);
  color: var(--text);
  font-size:16px;
  line-height: 1.65;
  letter-spacing: 0.04em;
  text-align: center;
}

/* ── まとめて書き出すモード ── */
.input-mode-row { text-align: center; margin: 6px 0 12px; }
.input-mode-toggle {
  background: none;
  border: none;
  padding: 4px 10px;
  font-family: inherit;
  font-size:16px;
  letter-spacing: 0.08em;
  color: rgba(122,101,68,0.75);
  cursor: pointer;
  border-bottom: 1px dashed rgba(184,150,90,0.4);
  transition: color 0.2s ease;
}
.input-mode-toggle:hover { color: var(--gold); }
.bulk-input {
  position: relative;
  max-width: 680px;
  margin: 0 auto 4px;
}
.bulk-input textarea {
  width: 100%;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(184,150,90,0.35);
  background: rgba(255,255,255,0.6);
  font-family: inherit;
  font-size:16px;
  line-height: 1.8;
  color: var(--text);
  resize: vertical;
}
.bulk-input textarea:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 3px rgba(184,150,90,0.10);
}
.bulk-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 8px;
}
.bulk-count { font-size:16px; color: rgba(122,101,68,0.8); letter-spacing: 0.06em; }

/* ── 入力中の星屑 & 追加時の流れ星 ── */
.input-row, .bulk-input { position: relative; }
.input-spark {
  position: absolute;
  top: -4px;
  color: var(--gold);
  pointer-events: none;
  animation: sparkRise 0.9s ease-out forwards;
  text-shadow: 0 0 8px rgba(184,150,90,0.7);
  z-index: 5;
}
@keyframes sparkRise {
  0%   { opacity: 0; transform: translateY(6px)  scale(0.6) rotate(0deg); }
  25%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-26px) scale(1.1) rotate(90deg); }
}
.fly-star {
  position: fixed;
  z-index: 999;
  color: var(--gold);
  font-size: 18px;
  pointer-events: none;
  opacity: 1;
  text-shadow: 0 0 12px rgba(184,150,90,0.8);
  transition: transform 0.68s cubic-bezier(0.3, 0.55, 0.35, 1), opacity 0.68s ease;
}

/* ── 選んだ瞬間のきらめき ── */
.value-chip { position: relative; }
.chip-spark {
  position: absolute;
  left: 50%;
  top: 50%;
  pointer-events: none;
  font-size:16px;
  color: var(--gold);
  text-shadow: 0 0 7px rgba(184,150,90,0.85);
  animation: chipSpark 0.62s ease-out forwards;
  z-index: 3;
}
@keyframes chipSpark {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.4); }
  22%  { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1.15) rotate(70deg); }
}

/* ════ Phase4 (あなたの価値観の物語) 可読性向上 ═══════════════
   明るい背景に対してダークテーマ時代の淡い文字色が残っていたため、
   本文は墨色ベースへ引き上げ、強調は濃い金＋マーカーで際立たせる。 */
#phase-4 { color: var(--text); }
#phase-4 .p4-header h2 { color: var(--text); font-weight: 500; }
#phase-4 .p4-header .en { color: var(--text-label); }
#phase-4 .p4-section-label { color: #8E6730; }
#phase-4 .p4-section-sub { color: var(--text-mid); }

#phase-4 .stat-value { color: #8E6730; }
#phase-4 .stat-label { color: var(--text-mid); }

#phase-4 .char-name { color: var(--text); }
#phase-4 .char-sub { color: var(--text-mid); }
#phase-4 .char-summary {
  color: #7A5D27;
  border-color: rgba(142,103,48,0.42);
  background: rgba(184,150,90,0.12);
}
#phase-4 .hook-who b { color: #6E4A1E; }
#phase-4 .usage-para b { color: #8E6730; }
#phase-4 .next-step-step { color: #8E6730; }
#phase-4 .char-desc-para { color: var(--text); }
#phase-4 .char-section-label { color: #8E6730; }
#phase-4 .char-gift-title { color: var(--text); }
#phase-4 .char-gift-desc,
#phase-4 .char-gift-item,
#phase-4 .char-shadow-item { color: var(--text-mid); }

#phase-4 .tension-title { color: var(--text); }
#phase-4 .tension-desc { color: var(--text-mid); }

#phase-4 .narrative-para,
#phase-4 .narrative-para:first-child { color: var(--text); }
#phase-4 .nar-hl {
  color: #8E6730;
  font-weight: 600;
  background: linear-gradient(transparent 62%, rgba(232,182,154,0.55) 62%);
  padding: 0 1px;
}

#phase-4 .seal-label { color: var(--text-label); }
#phase-4 .seal-title { color: #8E6730; text-shadow: 0 0 14px rgba(184,150,90,0.30); }
#phase-4 .seal-reason { color: var(--text-mid); }

#phase-4 .handoff-note { color: var(--text-mid); }
#phase-4 .next-step-desc { color: var(--text-mid); }
#phase-4 .next-step-desc b { color: #8E6730; }
#phase-4 .btn-book-source { color: #7A5D27; border-color: rgba(142,103,48,0.50); }
#phase-4 .btn-book-source .bk-sub { color: var(--text-mid); }

/* ── 旅のナラティブ（入口・選択中・物語の回収） ── */
.p0-narrative {
  display: block;
  font-size: 0.82em;
  line-height: 2.05;
  color: var(--text-mid);
  margin: 10px 0 12px;
  letter-spacing: 0.03em;
}
.p2-guide {
  font-size:0.85rem;
  color: var(--text-dim);
  text-align: center;
  margin: 8px auto 2px;
  letter-spacing: 0.05em;
  line-height: 1.8;
  max-width: 560px;
}
.p4-lead {
  font-size:0.85rem;
  color: var(--text-mid);
  text-align: center;
  line-height: 2.1;
  margin-top: 16px;
  letter-spacing: 0.04em;
}

/* ログイン中に固定されたメール欄の注記 */
.pf-locked-note {
  font-size:0.85rem;
  line-height: 1.7;
  color: #4E7D4E;
  letter-spacing: 0.02em;
  margin-top: 5px;
}

/* ── ネットワーク分析(グラフ理論) — 物語画面用 ── */
.na-note { font-size:0.85rem; color: var(--text-dim); line-height: 1.9; margin-bottom: 14px; letter-spacing: 0.03em; }
.na-grid { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.na-card { border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; background: var(--surface); }
.na-role { font-family: 'Cormorant Garamond', serif; font-style: italic; font-size:0.85rem; letter-spacing: 0.22em; color: var(--gold); margin-bottom: 3px; }
.na-star { font-size: 0.95rem; font-weight: 600; color: var(--text); letter-spacing: 0.06em; margin-bottom: 6px; }
.na-card p { font-size:0.85rem; line-height: 1.95; color: var(--text-mid); margin: 0; }
.na-sub { font-size:0.85rem; color: var(--text-mid); line-height: 1.9; margin: 16px 0 8px; }
.na-coms { display: flex; flex-direction: column; gap: 7px; margin-bottom: 16px; }
.na-com { font-size:0.85rem; line-height: 1.9; padding: 9px 14px; background: var(--gold-dim); border: 1px solid var(--line); border-radius: 10px; }
.na-com b { color: var(--gold); margin-right: 8px; }
.na-com span { color: var(--text-mid); font-size:0.85rem; }
.na-com-note { margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--line); color: var(--text); font-size:0.85rem; line-height: 1.95; }
.na-com-foot { margin-top: 10px; color: var(--text-mid); font-size:0.85rem; line-height: 1.95; }
.na-integ { border-top: 1px dashed var(--line); padding-top: 14px; }
.na-meter { height: 8px; border-radius: 999px; background: rgba(120,100,70,0.14); overflow: hidden; margin: 8px 0 10px; }
.na-meter span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--gold), #D4B070); }
.na-integ p { font-size:0.85rem; line-height: 2; color: var(--text-mid); margin: 0; }
.na-method {
  margin-top: 14px;
  border-top: 1px solid rgba(184,150,90,0.18);
  padding-top: 10px;
}
.na-method > summary {
  cursor: pointer;
  list-style: none;
  font-size: 0.85rem;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  padding: 4px 0;
}
.na-method > summary::-webkit-details-marker { display: none; }
.na-method > summary::before { content: '＋ '; }
.na-method[open] > summary::before { content: '− '; }
.na-method > summary:hover { color: var(--gold-deep, var(--text-mid)); }
.na-method-body {
  font-size: 0.85rem;
  line-height: 1.95;
  letter-spacing: 0.03em;
  color: var(--text-dim);
  padding: 8px 0 4px;
}
.na-method-body p { margin-bottom: 10px; }
.na-method-body ul { list-style: none; margin: 0 0 10px; }
.na-method-body li { margin-bottom: 7px; padding-left: 12px; text-indent: -12px; }
.na-method-body b { color: var(--text-mid); font-weight: 500; }

/* ── 冒頭フック(個性+ライフパーパスの問いかけ) ── */
#p4-hook-sec { margin-top: -8px; }
.hook-who { font-size: 0.94rem; line-height: 2.1; color: var(--text); letter-spacing: 0.04em; margin-bottom: 10px; }
.hook-who b { color: var(--gold); font-weight: 600; }
.hook-purpose {
  font-size: 0.86rem; line-height: 2.15; color: var(--text);
  background: var(--gold-dim); border: 1px solid var(--gold-border);
  border-radius: 12px; padding: 16px 18px; margin-bottom: 10px; letter-spacing: 0.03em;
}
.hook-next { font-size:0.85rem; color: var(--text-dim); letter-spacing: 0.04em; line-height: 1.9; }
.hook-why { font-size: 0.8rem; color: var(--text-dim); letter-spacing: 0.04em; line-height: 2.0; margin-bottom: 10px; }

/* ── 8領域の円グラフ ── */
.pie-wrap { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.pie-svg { flex: none; }
.pie-legend { display: flex; flex-direction: column; gap: 5px; min-width: 150px; }
.pie-leg { font-size:0.85rem; color: var(--text-mid); display: flex; align-items: center; gap: 8px; letter-spacing: 0.05em; }
.pie-leg.dim { opacity: 0.4; }
.pie-leg b { margin-left: auto; font-family: 'Cormorant Garamond', serif; font-size:0.85rem; color: var(--text); }
.pie-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; }

/* ── 葛藤カードのネットワーク注記 ── */
.tension-net {
  margin-top: 10px; padding-top: 9px; border-top: 1px dashed var(--line);
  font-size:0.85rem; line-height: 1.9; color: var(--text-mid); letter-spacing: 0.03em;
}

/* ══════════════════════════════════════════════════
   INTRO — はじめての方への招待ページ
══════════════════════════════════════════════════ */
.intro-header { margin-bottom: 8px; }

.intro-lead {
  margin-top: 18px;
  font-size: 1.02rem;
  letter-spacing: 0.14em;
  color: var(--text);
}

.intro-stars {
  text-align: center;
  margin: 26px 0 22px;
  color: var(--gold);
  letter-spacing: 0.6em;
  font-size:0.85rem;
}
.intro-stars .is-star { display: inline-block; opacity: 0.85; animation: introTwinkle 3.2s ease-in-out infinite; }
.intro-stars .s2 { animation-delay: 0.6s; font-size: 0.65em; }
.intro-stars .s3 { animation-delay: 1.2s; }
.intro-stars .s4 { animation-delay: 1.8s; font-size: 0.7em; }
.intro-stars .s5 { animation-delay: 2.4s; font-size: 0.65em; }
@keyframes introTwinkle {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}

.intro-narrative {
  text-align: center;
  font-size:0.85rem;
  line-height: 2.25;
  letter-spacing: 0.05em;
  color: var(--text-mid);
  margin-bottom: 40px;
}

.intro-steps {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 30px;
}
.intro-step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 18px 20px;
}
.intro-step .is-num {
  flex: none;
  width: 34px; height: 34px;
  border: 1px solid var(--gold-border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--gold);
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  margin-top: 2px;
}
.intro-step .is-body b {
  display: block;
  font-size:0.85rem;
  color: var(--text);
  letter-spacing: 0.04em;
  margin-bottom: 5px;
}
.intro-step .is-body p {
  font-size:0.85rem;
  line-height: 1.95;
  color: var(--text-mid);
  letter-spacing: 0.03em;
}

.intro-note {
  text-align: center;
  margin-bottom: 8px;
}
.intro-note p {
  font-size:0.85rem;
  line-height: 2;
  color: var(--text-dim);
  letter-spacing: 0.04em;
}

.intro-sub {
  text-align: center;
  margin-top: 26px;
  font-size:0.85rem;
  line-height: 2.1;
  color: var(--text-dim);
  letter-spacing: 0.03em;
}
.intro-sub a { color: var(--text-mid); text-decoration: underline; }
.intro-sub a:hover { color: var(--gold); }

#phase-intro .phase-footer { justify-content: center; margin-top: 10px; }
#phase-intro .btn-primary { padding: 18px 46px; }

/* 入力行が狭い画面であふれないように（フォント下限適用後の調整） */
.input-row input { min-width: 0; }
@media (max-width: 480px) {
  .input-row { gap: 8px; }
  .btn-add { padding: 13px 16px; }
  .btn-confirm { padding: 13px 14px; }
}

/* 次の一歩カードの STEP ラベル（知る→決める→形にする の三段を示す） */
.next-step-step {
  font-family: 'Cinzel', serif;
  font-size: 0.68rem;
  letter-spacing: 0.32em;
  color: var(--gold);
  margin-bottom: 8px;
  text-transform: uppercase;
}

/* ── 呼び水の問い: 長い問いがカードからはみ出さないように ──
   問いは最長53文字あるのに対し、伏せたカードは3枚が横に並ぶため
   1枚あたりの幅が狭い。開いたカードだけを広げて幅を稼ぎ、
   高さにも余裕を持たせることで、文字を小さくせずに収める。 */
.tarot-card { transition: flex-grow 0.42s ease; }
.tarot-card.open { flex-grow: 4; }          /* 開いた1枚が行の大半を占める */
.tarot-card, .tc-inner { min-height: 128px; }
.tc-front {
  overflow: hidden;                          /* 万一あふれても枠を壊さない */
  padding: 12px 14px;
}
@media (max-width: 480px) {
  .tarot-card, .tc-inner { min-height: 150px; }
  .tarot-card.open { flex-grow: 6; }         /* 狭い画面ではさらに広く */
  .tc-front { font-size: 15px; line-height: 1.6; padding: 10px 10px; }
}
@media (max-width: 360px) {
  /* iPhone SE 等の最小幅。最長の問い（53文字）でも収まる高さにする */
  .tarot-card, .tc-inner { min-height: 172px; }
}


/* 言語切替 — 画面右上に固定。どのページ・どのフェーズでも同じ位置に出す。
   本文の邪魔にならないよう小さく、地の色になじむ半透明の下地を敷く。 */
.lang-switch{
  position:fixed; top:12px; right:14px; z-index:1200;
  margin:0; font-family:'Cormorant Garamond',serif;
  font-size:0.85rem; letter-spacing:0.1em; line-height:1;
}
.lang-switch a{
  display:inline-block; padding:6px 12px; border-radius:999px;
  color:var(--text-mid, #5A6080); text-decoration:none;
  background:rgba(255,252,246,0.82);
  border:1px solid rgba(184,150,90,0.32);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  opacity:.86; transition:opacity .2s, background .2s;
}
.lang-switch a:hover{ opacity:1; background:rgba(255,252,246,0.96); }
@media (max-width:520px){
  .lang-switch{ top:8px; right:8px; font-size:0.8rem; }
  .lang-switch a{ padding:5px 10px; }
}

/* フェーズ3（星座表示）は上部に専用の操作バーがあり、右端の「最初から」と
   重なるため、この画面でだけ切替を隠す。 */
body:has(#phase-3.active) .lang-switch{ display:none; }

/* ── 入口の追従CTA（メインCTAが画面外のときだけ表示。app.js が .show を制御） ── */
#intro-sticky-cta {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center; gap: 14px;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(251, 248, 238, 0.92); backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  transform: translateY(110%); transition: transform .3s ease;
  pointer-events: none;
}
#intro-sticky-cta.show { transform: translateY(0); pointer-events: auto; }
#intro-sticky-cta .btn-primary { margin: 0; padding: 12px 26px; font-size: 0.92rem; }
#intro-sticky-cta .sticky-note { font-size: 0.78rem; color: var(--text-dim); letter-spacing: .04em; white-space: nowrap; }

/* ── 自動保存の実感（フィードバック反映 2026-09） ── */
.autosave-note{
  font-size: 0.78rem;
  color: var(--gold-deep, #8E6730);
  opacity: 0.75;
  letter-spacing: 0.04em;
  text-align: center;
  margin: 4px 0 0;
  min-height: 1.2em;
}
/* ── フェーズ2からやりたいこと一覧へ戻る導線 ── */
.p2-backline{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin: 6px 2px 0;
}
.p2-backline .autosave-note{ text-align: right; margin: 0 }
.p2-back-btn{
  background: none;
  border: none;
  padding: 4px 2px;
  font-family: inherit;
  font-size: 0.82rem;
  letter-spacing: 0.05em;
  color: var(--gold-deep, #8E6730);
  cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color .25s, opacity .25s;
  opacity: 0.85;
}
.p2-back-btn:hover{ opacity: 1; border-bottom-color: currentColor }