/* ================================================================
   KKTI Key — Identity re-skin（声＝スペクトルの帯）
   旧: 黄色×Anton  →  新: ink×Zenゴシック×等幅音名×スペクトル配色
   クラス名・JSは不変。見た目のみ刷新。
   ================================================================ */

:root {
  --bg:#0A0B0F; --bg-elev:#10121a; --bg-card:#14161f; --bg-card2:#1b1e28;
  --fg:#EFEBE2; --fg-2:#c7c4bd; --fg-3:#8a8c99; --fg-4:#5a5c69;
  --border:rgba(255,255,255,0.07);
  /* スペクトル（低=暖 → 高=寒） */
  --c-low:#E5533B; --c-amber:#E5A93B; --c-green:#54BE89; --c-blue:#4F86E8; --c-high:#9B6CF0;
  /* 互換用エイリアス（旧名→新色） */
  --yellow:#E5A93B; --yellow-dark:#E5533B; --green:#54BE89; --orange:#E5A93B; --red:#E5533B;
  /* CTA 暖グラデ */
  --cta1:#FF5E3A; --cta2:#FF9E2C;
  /* 発光ゴールド（メタリック＋グロー） */
  --gold-grad:linear-gradient(180deg,#F6D479,#E5A93B 55%,#C88A2B);
  --gold-glow:0 0 20px rgba(229,169,59,.5), 0 6px 20px rgba(229,169,59,.32), inset 0 1px 0 rgba(255,255,255,.42);
}

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

html, body {
  background:var(--bg);
  color:var(--fg);
  font-family:'Zen Kaku Gothic New', -apple-system, BlinkMacSystemFont, sans-serif;
  font-feature-settings:'palt';
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  min-height:100vh;
  background-image:
    radial-gradient(800px 560px at 88% -6%, rgba(155,108,240,.10), transparent 60%),
    radial-gradient(620px 480px at -6% 108%, rgba(229,83,59,.08), transparent 55%);
  background-attachment:fixed;
}

button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }
img { display:block; max-width:100%; }

.screen { display:none; min-height:100vh; }
.screen.active { display:block; }

.container { max-width:600px; margin:0 auto; padding:24px 20px 80px; }

/* 等幅＝音名・キー・数値の署名フォント */
.mono, .test-pitch-value, .test-range-value, .test-result-range, .test-result-octaves,
.rec-box-key, .info-value, .song-rank, .vowel-range, .block-count {
  font-family:'JetBrains Mono', monospace;
}

/* ========== HEADER ========== */
.app-header {
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 20px; position:sticky; top:0;
  background:rgba(10,11,15,0.82);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  z-index:50; border-bottom:1px solid var(--border);
}
.logo-box { display:flex; align-items:center; }
.logo-img { height:30px; width:auto; filter:drop-shadow(0 4px 16px rgba(0,0,0,.45)); }
.icon-btn {
  width:40px; height:40px; display:flex; align-items:center; justify-content:center;
  color:var(--fg); border-radius:50%; transition:background .2s;
}
.icon-btn:active { background:rgba(255,255,255,0.08); }

/* ========== HERO ========== */
.hero { position:relative; padding:34px 20px 26px; text-align:left; max-width:600px; margin:0 auto; overflow:hidden; }
.hero-decorations { display:none; }  /* オーブ/グリッド/ノイズ＝量産型の元なので撤去 */

.hero-tag {
  display:inline-flex; align-items:center; gap:10px;
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:12px; font-weight:700;
  letter-spacing:.16em; color:var(--c-amber);
  padding:0; border:none; border-radius:0; margin-bottom:20px;
}
.hero-tag::before { content:""; width:24px; height:1px; background:var(--c-amber); opacity:.7; }

.hero-title {
  font-family:'Zen Kaku Gothic New',sans-serif; font-size:42px; font-weight:900;
  line-height:1.28; letter-spacing:.01em; margin-bottom:16px;
}
.hero-title::after { content:none; }

.hero-sub { font-size:14px; color:var(--fg-2); line-height:1.9; margin-bottom:24px; max-width:30ch; }

/* ========== PROFILE CHIP ========== */
.profile-chip { display:none; }
.profile-chip.measured {
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(135deg, rgba(155,108,240,.12), rgba(79,134,232,.06));
  border:1px solid rgba(155,108,240,.28); border-radius:14px;
  padding:14px 16px; margin-bottom:18px; cursor:pointer; transition:transform .15s;
}
.profile-chip.measured:active { transform:scale(.98); }
.profile-chip-label { font-size:10px; color:var(--fg-3); letter-spacing:.12em; font-weight:700; font-family:'JetBrains Mono',monospace; }
.profile-chip-range { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:20px; color:var(--c-high); letter-spacing:.02em; flex:1; text-align:center; }
.profile-chip-action { font-size:11px; color:var(--fg-2); background:rgba(255,255,255,0.07); padding:4px 10px; border-radius:12px; }

/* ========== CTA ========== */
.cta-measure {
  width:100%; display:flex; align-items:center; justify-content:center; gap:12px;
  background:linear-gradient(100deg, var(--cta1), var(--cta2)); color:#1a0a04;
  font-weight:900; font-size:17px; padding:18px 24px; border-radius:14px; letter-spacing:.03em;
  transition:transform .15s; box-shadow:0 12px 30px rgba(255,94,58,.40);
  animation:ctaPulse 2.6s ease-in-out infinite; margin-bottom:14px;
}
.cta-measure:active { transform:scale(.98); }
@keyframes ctaPulse { 0%,100%{box-shadow:0 12px 26px rgba(255,94,58,.30)} 50%{box-shadow:0 16px 46px rgba(255,94,58,.58)} }
/* 波紋アイコン（マイクの代替） */
.cta-ripple { position:relative; width:11px; height:11px; border-radius:50%; background:#1a0a04; display:inline-block; flex:none; }
.cta-ripple::before, .cta-ripple::after {
  content:""; position:absolute; left:50%; top:50%; width:11px; height:11px; border-radius:50%;
  border:2px solid #1a0a04; transform:translate(-50%,-50%) scale(1); animation:rip 1.8s ease-out infinite;
}
.cta-ripple::after { animation-delay:.9s; }
@keyframes rip { 0%{transform:translate(-50%,-50%) scale(1);opacity:.6} 100%{transform:translate(-50%,-50%) scale(3);opacity:0} }
.cta-icon { display:none; }  /* 旧🎤は隠す（HTMLで .cta-ripple に差し替え推奨） */

/* ========== 検索（インライン） ========== */
.hero-search-wrap { margin-top:8px; }
.hero-search {
  width:100%; display:flex; align-items:center; gap:12px;
  background:var(--bg-elev); border:1px solid var(--border); border-radius:12px;
  padding:14px 16px; transition:border-color .2s;
}
.hero-search:focus-within { border-color:var(--c-amber); }
.hero-search svg { color:var(--fg-3); flex-shrink:0; }
.hero-search-text { flex:1; background:transparent; border:none; outline:none; color:var(--fg); font-size:15px; font-family:inherit; min-width:0; }
.hero-search-text::placeholder { color:var(--fg-3); }
.search-clear { width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--fg-2); background:rgba(255,255,255,0.06); border-radius:50%; font-size:13px; flex-shrink:0; }
.search-results-inline { margin-top:12px; display:none; }
.search-results-inline.show { display:block; }

/* ========== BLOCK ========== */
.block { margin-bottom:34px; }
.block-head { display:flex; align-items:flex-end; justify-content:space-between; margin-bottom:16px; }
.eyebrow { font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.22em; color:var(--c-amber); font-weight:700; display:block; margin-bottom:6px; }
.block-title { font-family:'Zen Kaku Gothic New',sans-serif; font-weight:900; font-size:24px; letter-spacing:.01em; }
.block-count { font-size:13px; color:var(--fg-3); }

/* ========== GENRE ========== */
.genre-grid { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.genre-grid::-webkit-scrollbar { display:none; }
.genre-card {
  flex:0 0 auto; display:flex; align-items:center; gap:8px;
  padding:10px 16px; border-radius:999px; background:var(--bg-card);
  border:1px solid var(--border); transition:all .18s; color:var(--fg-2);
}
.genre-card::before { content:""; width:8px; height:8px; border-radius:50%; background:linear-gradient(135deg,var(--g1,var(--c-amber)),var(--g2,var(--c-amber))); flex:none; }
.genre-card.active { background:#1c1f29; color:#fff; border-color:transparent; }
.genre-all::before { background:var(--fg); }
.genre-all.active { background:#1c1f29; }
.genre-en { font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; letter-spacing:.08em; color:var(--fg-3); }
.genre-card.active .genre-en { color:var(--fg-2); }
.genre-jp { font-size:13px; font-weight:700; }

/* ========== SONG LIST ========== */
.popular-list { display:flex; flex-direction:column; gap:6px; }
.song-card {
  display:flex; align-items:center; gap:14px; background:var(--bg-card);
  border-radius:12px; padding:14px 16px; border:1px solid var(--border);
  transition:all .15s; cursor:pointer;
}
.song-card:active { transform:scale(.99); background:var(--bg-card2); }
.song-rank { font-weight:700; font-size:18px; color:var(--fg-4); min-width:32px; text-align:center; }
.song-meta { flex:1; min-width:0; }
.song-card-title { font-size:15px; font-weight:700; margin-bottom:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.song-card-artist { font-size:12px; color:var(--fg-3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* 推奨キーバッジ */
.song-rec-badge { font-family:'JetBrains Mono',monospace; font-size:17px; font-weight:700; padding:6px 11px; border-radius:9px; min-width:52px; text-align:center; }
.song-rec-badge.fit   { background:rgba(84,190,137,.14); color:var(--c-green); border:1px solid rgba(84,190,137,.30); }
.song-rec-badge.tight { background:rgba(229,169,59,.13); color:var(--c-amber); border:1px solid rgba(229,169,59,.30); }
.song-rec-badge.shift { background:rgba(79,134,232,.13); color:var(--c-blue);  border:1px solid rgba(79,134,232,.28); }
.song-rec-badge.far   { background:rgba(229,83,59,.13);  color:var(--c-low);   border:1px solid rgba(229,83,59,.28); }

/* ========== SEARCH RESULT ITEMS ========== */
.search-result-item { display:flex; align-items:center; gap:12px; padding:12px 14px; border-radius:10px; background:var(--bg-card); margin-bottom:6px; border:1px solid var(--border); cursor:pointer; }
.search-result-item:active { background:var(--bg-card2); }
.search-result-main { flex:1; min-width:0; }
.search-result-title { font-size:14px; font-weight:700; margin-bottom:2px; }
.search-result-artist { font-size:12px; color:var(--fg-3); }
.search-result-rec { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:14px; padding:4px 10px; border-radius:8px; }
.search-result-rec.fit   { color:var(--c-green); background:rgba(84,190,137,.14); }
.search-result-rec.tight { color:var(--c-amber); background:rgba(229,169,59,.13); }
.search-result-rec.shift { color:var(--c-blue);  background:rgba(79,134,232,.13); }
.search-result-rec.far   { color:var(--c-low);   background:rgba(229,83,59,.13); }
.search-result-empty { padding:24px; text-align:center; color:var(--fg-3); font-size:13px; }

/* ========== BACK BUTTON ========== */
.back-btn { margin:20px 0 24px; font-size:13px; color:var(--fg-2); display:inline-block; padding:6px 0; }

/* ========== VOICE TEST ========== */
.test-container { text-align:center; padding-top:0; }
.test-progress-wrap { height:4px; background:rgba(255,255,255,0.06); border-radius:2px; overflow:hidden; margin:0 0 24px; }
.test-progress-bar { height:100%; background:linear-gradient(90deg,var(--c-low),var(--c-amber),var(--c-green),var(--c-blue),var(--c-high)); width:0%; transition:width .2s linear; border-radius:2px; }
.test-header { margin-bottom:20px; }
.test-eyebrow { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.24em; color:var(--c-amber); font-weight:700; display:block; margin-bottom:4px; }
.test-status { font-size:11px; color:var(--fg-3); font-family:'JetBrains Mono',monospace; letter-spacing:.06em; }

.test-vowel-big {
  font-family:'Zen Kaku Gothic New',sans-serif; font-weight:900; font-size:150px; line-height:1;
  color:var(--c-amber); text-align:center; margin:12px 0 16px; min-height:150px;
  text-shadow:0 10px 40px rgba(229,169,59,.35); letter-spacing:-.02em;
}
.test-vowel-big[data-direction="up"]   { color:var(--c-high); text-shadow:0 10px 40px rgba(155,108,240,.38); }
.test-vowel-big[data-direction="down"] { color:var(--c-amber); text-shadow:0 10px 40px rgba(229,169,59,.35); }

.test-instr { font-size:17px; color:var(--fg); font-weight:700; margin-bottom:6px; min-height:24px; }
.test-subtext { font-size:13px; color:var(--fg-2); margin-bottom:20px; min-height:18px; }
.test-hint { font-size:11px; color:var(--fg-3); text-align:center; margin-top:10px; }

.test-pitch-card { background:linear-gradient(135deg,var(--bg-card),var(--bg-card2)); border-radius:16px; padding:18px; margin-bottom:12px; border:1px solid var(--border); display:flex; flex-direction:column; gap:6px; }
.test-pitch-label { font-size:10px; color:var(--fg-3); letter-spacing:.1em; font-family:'JetBrains Mono',monospace; }
.test-pitch-value { font-size:42px; font-weight:700; color:var(--c-high); letter-spacing:.01em; }

.test-range-grid { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:24px; }
.test-range-item { background:var(--bg-card); border-radius:12px; padding:14px; border:1px solid var(--border); text-align:left; }
.test-range-label { display:block; font-size:10px; color:var(--fg-3); letter-spacing:.1em; margin-bottom:4px; font-family:'JetBrains Mono',monospace; }
.test-range-value { font-size:24px; font-weight:700; color:var(--fg); letter-spacing:.01em; }

/* ========== TEST RESULT ========== */
.test-result-block { text-align:center; padding:40px 20px 20px; }
.result-label { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.24em; color:var(--c-amber); font-weight:700; display:block; margin-bottom:14px; }
.test-result-range { font-size:52px; font-weight:700; letter-spacing:.01em; color:var(--fg); display:flex; align-items:baseline; justify-content:center; gap:14px; margin-bottom:6px; }
.test-result-sep { color:var(--fg-4); font-size:30px; }
.test-result-low { color:var(--c-amber); } .test-result-high { color:var(--c-high); }
.test-result-octaves { font-size:13px; color:var(--fg-2); letter-spacing:.08em; margin-bottom:24px; }
.test-result-stable { background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:14px 18px; display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; }
.test-result-stable-label { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; color:var(--fg-3); }
.test-result-stable-value { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:20px; color:var(--fg); }

.test-result-vowels { margin-bottom:24px; display:flex; flex-direction:column; gap:6px; }
.vowel-row { display:flex; align-items:center; background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:12px 16px; gap:16px; }
.vowel-char { font-family:'Zen Kaku Gothic New',sans-serif; font-weight:900; font-size:26px; color:var(--c-amber); min-width:32px; text-align:center; }
.vowel-range { flex:1; font-weight:700; font-size:16px; color:var(--fg); text-align:right; letter-spacing:.01em; }
.test-result-msg { font-size:13px; color:var(--fg-2); line-height:1.8; padding:0 16px; margin-bottom:24px; }

/* 結果画面：声域スペクトル帯（声＝光る帯） */
.result-scope { display:flex; justify-content:center; align-items:stretch; margin:10px 0 22px; }
.rs-labels { position:relative; width:84px; height:320px; margin-right:14px; }
.rs-bar { position:relative; width:90px; height:320px; border-radius:45px; overflow:hidden;
  background:linear-gradient(to top, var(--c-low), var(--c-amber) 28%, var(--c-green) 52%, var(--c-blue) 76%, var(--c-high));
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.08), 0 24px 60px rgba(0,0,0,.5); }
.rs-mask { position:absolute; left:0; right:0; height:0; background:rgba(8,9,13,.80); transition:height .9s cubic-bezier(.22,1,.36,1); }
.rs-mask-top { top:0; } .rs-mask-bot { bottom:0; }
.rs-edge { position:absolute; left:-5px; right:-5px; height:2px; background:rgba(255,255,255,.92); box-shadow:0 0 12px rgba(255,255,255,.5); top:50%; transition:top .9s cubic-bezier(.22,1,.36,1); z-index:3; }
.rs-ticks { position:relative; width:60px; height:320px; margin-left:14px; }
.rs-tick { position:absolute; left:0; font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--fg-4); transform:translateY(-50%); white-space:nowrap; }
.rs-tick::before { content:""; position:absolute; left:-14px; top:50%; width:8px; height:1px; background:var(--border); }
.rs-hi, .rs-lo { position:absolute; right:0; text-align:right; top:50%; transform:translateY(-50%); transition:top .9s cubic-bezier(.22,1,.36,1); }
.rs-cap { display:block; font-family:'JetBrains Mono',monospace; font-size:9px; letter-spacing:.2em; color:var(--fg-4); margin-bottom:2px; }
.rs-hi .test-result-high, .rs-lo .test-result-low { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:22px; line-height:1.1; }

/* ========== 音域シェアカード（画像化専用・360px固定／画面外） ========== */
/* display:none不可（html2canvasはレイアウト要）→ 画面外へ逃がす */
#rangeShareCard {
  position:absolute; left:-99999px; top:0; width:360px;
  box-sizing:border-box; text-align:center;
  padding:30px 24px 22px;
  border-radius:22px; overflow:hidden;
  background:
    radial-gradient(220px 200px at 50% -8%, rgba(229,169,59,.16), transparent 64%),
    linear-gradient(165deg, #14161f, #0A0B0F 62%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 18px 50px rgba(0,0,0,.5);
  font-family:'Zen Kaku Gothic New', sans-serif;
}
.range-card-glow {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(160px 140px at 84% 6%, rgba(229,169,59,.14), transparent 60%),
    radial-gradient(200px 180px at 10% 102%, rgba(155,108,240,.16), transparent 60%);
}
#rangeShareCard > *:not(.range-card-glow) { position:relative; z-index:1; }
.range-card-eyebrow {
  display:block; font-family:'JetBrains Mono',monospace; font-size:11px;
  letter-spacing:.24em; color:var(--c-amber); font-weight:700; margin-bottom:6px;
}
/* カード内スペクトルは画面と同じ見た目を踏襲（.result-scope/.rs-* を再利用） */
.range-card-scope { margin:6px 0 18px; }
.range-card-scope .rs-hi .range-card-note,
.range-card-scope .rs-lo .range-card-note {
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:22px; line-height:1.1; color:var(--fg);
}
.range-card-scope .rs-hi .range-card-note { color:var(--c-high); }
.range-card-scope .rs-lo .range-card-note { color:var(--c-low); }
.range-card-oct {
  font-family:'JetBrains Mono',monospace; font-weight:700; font-size:30px;
  letter-spacing:.02em; color:var(--fg); margin-bottom:16px;
}
.range-card-stable {
  background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.10); border-radius:12px;
  padding:12px 16px; display:flex; justify-content:space-between; align-items:center; margin-bottom:14px;
}
.range-card-stable-label { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.08em; color:var(--fg-3); }
.range-card-stable-value { font-family:'JetBrains Mono',monospace; font-weight:700; font-size:18px; color:var(--fg); }
.range-card-vowels { display:flex; flex-direction:column; gap:5px; margin-bottom:16px; }
.range-card-vrow {
  display:flex; align-items:center; gap:12px;
  background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
  border-radius:8px; padding:7px 13px;
}
.range-card-vchar { font-weight:900; font-size:16px; color:var(--c-amber); min-width:20px; text-align:center; }
.range-card-vrange { flex:1; font-family:'JetBrains Mono',monospace; font-weight:700; font-size:13px; color:var(--fg-2); text-align:right; }
.range-card-footer { display:flex; align-items:center; justify-content:space-between; border-top:1px solid rgba(255,255,255,.12); padding-top:13px; margin-top:4px; }
.range-card-wm { font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; color:var(--c-amber); letter-spacing:.06em; }
.range-card-tag { font-size:10px; color:var(--fg-3); letter-spacing:.06em; }

/* ========== SONG DETAIL ========== */
.song-detail { padding:8px 0 40px; }
.song-genre { display:inline-block; font-family:'JetBrains Mono',monospace; font-size:10px; letter-spacing:.16em; font-weight:700; color:var(--c-amber); padding:4px 10px; border:1px solid rgba(229,169,59,.4); border-radius:6px; margin-bottom:14px; }
.song-title { font-family:'Zen Kaku Gothic New',sans-serif; font-weight:900; font-size:34px; letter-spacing:.01em; line-height:1.2; margin-bottom:6px; }
.song-artist { font-size:14px; color:var(--fg-2); margin-bottom:24px; }

.song-rec-box { display:none; border-radius:16px; padding:24px; margin-bottom:24px; text-align:center; flex-direction:column; gap:6px; border:1px solid var(--border); }
.song-rec-box.show { display:flex; } .song-rec-box.hide { display:none; }
.song-rec-box.fit   { background:linear-gradient(150deg,rgba(84,190,137,.16),rgba(84,190,137,.03)); border-color:rgba(84,190,137,.3); }
.song-rec-box.tight { background:linear-gradient(150deg,rgba(229,169,59,.14),rgba(229,169,59,.03)); border-color:rgba(229,169,59,.3); }
.song-rec-box.shift { background:linear-gradient(150deg,rgba(79,134,232,.14),rgba(79,134,232,.03)); border-color:rgba(79,134,232,.3); }
.song-rec-box.far   { background:linear-gradient(150deg,rgba(229,83,59,.13),rgba(229,83,59,.03)); border-color:rgba(229,83,59,.3); }
.rec-box-label { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.16em; color:var(--fg-3); font-weight:700; }
.rec-box-key { font-size:60px; font-weight:700; color:var(--c-amber); letter-spacing:-.01em; line-height:1; }
.song-rec-box.fit .rec-box-key { color:var(--c-green); }
.song-rec-box.tight .rec-box-key { color:var(--c-amber); }
.song-rec-box.shift .rec-box-key { color:var(--c-blue); }
.song-rec-box.far .rec-box-key { color:var(--c-low); }
.rec-box-comment { font-size:13px; color:var(--fg-2); margin-top:4px; }

.no-profile-cta { background:var(--bg-card); border:1px dashed var(--fg-4); border-radius:14px; padding:22px; margin-bottom:24px; text-align:center; }
.no-profile-cta p { font-size:13px; color:var(--fg-2); margin-bottom:14px; }

.info-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-bottom:24px; }
.info-item { background:var(--bg-card); border:1px solid var(--border); border-radius:10px; padding:14px; }
.info-label { font-size:10px; letter-spacing:.08em; color:var(--fg-3); font-family:'JetBrains Mono',monospace; display:block; margin-bottom:4px; }
.info-value { font-size:20px; font-weight:700; color:var(--fg); letter-spacing:.01em; }

/* ========== SHARE BUTTONS ========== */
.share-row { display:flex; gap:10px; margin:16px 0 12px; }
.share-btn { flex:1; display:flex; align-items:center; justify-content:center; gap:8px; padding:12px 14px; border-radius:10px; font-size:13px; font-weight:700; transition:transform .15s, opacity .2s; border:1px solid var(--border); }
.share-btn:active { transform:scale(.97); }
.share-x { background:#0d0e12; color:#FFF; border-color:rgba(255,255,255,0.15); }
.share-line { background:#06C755; color:#FFF; border-color:rgba(0,0,0,0.1); }

/* ========== PRIMARY BUTTON ========== */
.primary-btn { width:100%; background:var(--gold-grad); color:#1a0a04; font-weight:900; font-size:16px; padding:18px 24px; border-radius:14px; letter-spacing:.03em; border:none; transition:transform .15s, box-shadow .2s; box-shadow:var(--gold-glow); }
.primary-btn:active { transform:scale(.98); }

/* ========== LEGAL ========== */
.legal-note { font-size:11px; color:var(--fg-3); line-height:1.8; text-align:center; padding:24px 16px; }

/* ========== MAIN FOOTER ========== */
.main-footer { background:var(--bg-elev); border-top:1px solid var(--border); padding:30px 20px 26px; margin-top:20px; }
.main-footer-inner { max-width:600px; margin:0 auto; text-align:center; }
.main-footer-brand { margin-bottom:16px; }
.main-footer-logo { height:24px; margin:0 auto 8px; filter:drop-shadow(0 4px 14px rgba(0,0,0,.4)); }
.main-footer-tag { font-size:11px; color:var(--fg-3); margin:0; }
.main-footer-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:14px; margin-bottom:16px; }
.main-footer-nav a { font-size:12px; color:var(--fg-2); text-decoration:none; transition:color .2s; }
.main-footer-nav a:hover { color:var(--c-amber); }
.main-footer-copy { font-family:'JetBrains Mono',monospace; font-size:10px; color:var(--fg-3); letter-spacing:.08em; padding-top:14px; border-top:1px solid var(--border); }

/* ========== MEDIA ========== */
@media (min-width:600px) {
  .hero-title { font-size:52px; }
  .test-vowel-big { font-size:200px; min-height:200px; }
  .test-pitch-value { font-size:54px; }
  .test-result-range { font-size:68px; }
}

/* ================================================================
   声タイプ診断（上部タブ / 診断結果カード / 記事一覧）
   ================================================================ */

/* ----- 上部タブ ----- */
.main-tabs {
  position:sticky; top:0; z-index:60;
  display:flex; align-items:stretch;
  background:rgba(10,11,15,0.92);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.main-tab {
  flex:1; padding:14px 6px; font-size:14px; font-weight:700;
  color:var(--fg-3); letter-spacing:.04em; position:relative; transition:color .2s;
}
.main-tab.active { color:var(--fg); }
.main-tab.active::after {
  content:""; position:absolute; left:50%; bottom:-1px; transform:translateX(-50%);
  width:42%; height:2px; border-radius:2px;
  background:linear-gradient(90deg, var(--cta1), var(--cta2));
}
/* 既存ヘッダーはタブの下に潜り込ませる */
.app-header { top:46px; }

/* JP/EN 言語トグル：モバイルでタブバーと被らないよう、バー右端に収める。
   インラインstyle（top:8px/right:10px）を上書きするため !important。jaは未測定でもこのバーは常時表示なので両言語で有効。 */
@media (max-width:599px) {
  /* タブバー右端に EN の居場所を物理的に確保＝5タブが左へ詰まり「記事」と被らない */
  .main-tabs { padding-right:46px; }
  #langToggleWrap {
    top:0 !important; right:8px !important;
    height:46px !important;             /* タブバーと同じ高さ */
    display:flex !important; align-items:center !important;  /* バー内で縦中央 */
    pointer-events:none;                /* 枠は素通し＝ボタンだけ押せる */
  }
  #langToggleBtn {
    pointer-events:auto;
    padding:3px 7px !important;
    background:rgba(10,11,15,0.55) !important;  /* 下のタブ文字と分離して見せる */
    opacity:0.85 !important;
  }
}

/* ----- 診断：未測定 ----- */
.diag-container { text-align:center; }
.diag-eyebrow { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.24em; color:var(--c-amber); font-weight:700; display:block; margin:18px 0; }
.diag-empty { padding:40px 0 20px; }
.diag-empty-title { font-size:30px; font-weight:900; line-height:1.4; margin-bottom:18px; }
.diag-empty-sub { font-size:14px; color:var(--fg-2); line-height:1.9; margin-bottom:30px; }
.diag-empty .cta-measure { max-width:340px; margin-left:auto; margin-right:auto; }
.diag-empty-note { font-size:11px; color:var(--fg-3); margin-top:14px; line-height:1.7; }

/* ----- 診断：結果カード（シェアの核） ----- */
.diag-result { padding-top:18px; }
.diag-result .result-label { text-align:center; }
.vt-card {
  --vt-c1:#B11E3A; --vt-c2:#F2762E;
  position:relative; overflow:hidden; text-align:center;
  border-radius:22px; padding:30px 22px 22px;
  background:linear-gradient(150deg, var(--vt-c1), var(--vt-c2));
  box-shadow:0 18px 50px rgba(0,0,0,.45);
  border:1px solid rgba(255,255,255,.14);
}
.vt-card-glow {
  position:absolute; inset:0; pointer-events:none;
  background:
    radial-gradient(140px 120px at 80% 8%, rgba(255,255,255,.32), transparent 60%),
    radial-gradient(180px 160px at 12% 100%, rgba(0,0,0,.22), transparent 60%);
}
.vt-card > *:not(.vt-card-glow) { position:relative; z-index:1; }
.vt-tag { font-family:'JetBrains Mono',monospace; font-size:11px; letter-spacing:.28em; color:rgba(255,255,255,.85); font-weight:700; display:block; margin-bottom:14px; }
.vt-name { font-size:44px; font-weight:900; color:#fff; line-height:1.2; letter-spacing:.06em; text-shadow:0 2px 12px rgba(0,0,0,.25); }
.vt-subtitle { display:inline-block; margin-top:16px; font-size:12px; font-weight:700; color:#fff; background:rgba(0,0,0,.22); border:1px solid rgba(255,255,255,.25); padding:7px 16px; border-radius:20px; letter-spacing:.04em; line-height:1.15; }
.vt-name ruby rt { font-size:13px; font-weight:600; color:rgba(255,255,255,.88); letter-spacing:.06em; }
.vt-subtitle ruby { margin:0 1px; }
.vt-subtitle ruby rt { font-size:8px; font-weight:600; color:rgba(255,255,255,.82); }
.vt-tagline { font-size:15px; color:rgba(255,255,255,.94); margin-top:16px; font-weight:500; letter-spacing:.03em; }
/* 結果カードのキャラ（透過PNG。characters/char-<code>.png。無ければJSで非表示） */
.vt-char { display:block; width:156px; height:156px; object-fit:contain; margin:2px auto 12px; filter:drop-shadow(0 8px 18px rgba(0,0,0,.34)); }

/* 軸スペクトル */
.vt-axes { margin:22px 4px 8px; display:flex; flex-direction:column; gap:13px; }
.vt-axis { display:flex; flex-direction:column; gap:4px; }
.vt-axis-name { font-size:10px; font-weight:800; color:rgba(255,255,255,.92); letter-spacing:.08em; text-align:center; }
.vt-axis-bar { display:flex; align-items:center; gap:10px; }
.vt-axis-end { font-size:10px; color:rgba(255,255,255,.82); font-weight:700; width:46px; flex:none; }
.vt-axis-end:first-child { text-align:right; }
.vt-axis-end:last-child { text-align:left; }
.vt-axis-track { flex:1; height:6px; border-radius:6px; background:rgba(0,0,0,.26); position:relative; }
.vt-axis-dot { position:absolute; top:50%; width:14px; height:14px; border-radius:50%; background:#fff; transform:translate(-50%,-50%); box-shadow:0 2px 8px rgba(0,0,0,.35); }

.vt-card-footer { display:flex; align-items:center; justify-content:space-between; margin-top:20px; padding-top:14px; border-top:1px solid rgba(255,255,255,.22); }
.vt-rarity { font-family:'JetBrains Mono',monospace; font-size:12px; font-weight:700; color:#fff; letter-spacing:.04em; }
.vt-watermark { font-size:10px; color:rgba(255,255,255,.72); letter-spacing:.1em; }

/* 説明・強み */
.vt-desc { font-size:14px; color:var(--fg-2); line-height:1.95; margin:22px 2px 16px; text-align:left; }
.vt-strengths { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:8px; }
.vt-chip { font-size:12px; font-weight:700; color:var(--fg); background:var(--bg-card2); border:1px solid var(--border); padding:7px 13px; border-radius:20px; }

/* 16タイプ 深掘りプロフィール */
.vt-lore { text-align:left; margin:10px 2px 20px; }
.vt-lore-head { margin-bottom:14px; }
.vt-lore-persona { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.08em; color:#E5A93B; background:var(--bg-card2); border:1px solid var(--border); padding:4px 12px; border-radius:999px; }
.vt-lore-catch { font-size:17px; font-weight:800; color:var(--fg); line-height:1.55; margin:11px 0 0; }
.vt-lore-essence { font-size:14px; color:var(--fg-2); line-height:1.95; margin:14px 0 18px; }
.vt-lore-block { margin:15px 0; }
.vt-lore-h { display:block; font-size:12.5px; font-weight:800; color:var(--fg); letter-spacing:.04em; margin-bottom:7px; }
.vt-lore-block p { font-size:13.5px; color:var(--fg-2); line-height:1.85; margin:0; }
.vt-lore-aruaru { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.vt-lore-aruaru li { font-size:13.5px; color:var(--fg-2); line-height:1.7; padding-left:17px; position:relative; }
.vt-lore-aruaru li::before { content:''; position:absolute; left:2px; top:.62em; width:5px; height:5px; border-radius:50%; background:#E5A93B; }
.vt-lore-homu { margin-top:16px; font-size:13px; font-weight:600; color:var(--fg); line-height:1.75; background:linear-gradient(135deg, rgba(229,83,59,.15), rgba(229,169,59,.08)); border:1px solid rgba(229,83,59,.32); border-radius:12px; padding:12px 14px; }

/* 声の相性（相方系統の4キャラ ランキング） */
.vt-compat { margin:8px 2px 18px; text-align:left; }
.vt-compat-h { font-size:12.5px; font-weight:800; color:var(--fg); letter-spacing:.04em; margin-bottom:8px; }
.vt-compat-card { background:var(--bg-card2); border:1px solid var(--border); border-radius:14px; padding:16px; }
.vt-compat-sub { font-size:12.5px; color:var(--fg-3); margin:0 0 12px; text-align:center; }
.vt-compat-sub b { color:#E5A93B; font-weight:800; }
.vt-compat-hint { font-size:11px; color:var(--fg-3); margin:0 0 10px; text-align:center; opacity:.85; }
.vt-compat-list { display:flex; flex-direction:column; gap:8px; }
.vt-compat-row { display:block; padding:7px 10px; border-radius:10px; background:rgba(255,255,255,.045); border:1px solid transparent; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease, background .15s ease; }
.vt-compat-row:hover { transform:translateY(-2px); box-shadow:0 6px 18px rgba(0,0,0,.30); background:rgba(255,255,255,.08); }
.vt-compat-row:active { transform:translateY(0); box-shadow:0 2px 8px rgba(0,0,0,.22); }
.vt-compat-row.top { border-color:#E5A93B; background:rgba(229,169,59,.10); }
.vt-compat-row.top:hover { background:rgba(229,169,59,.16); }
.vt-compat-rowmain { display:flex; align-items:center; gap:12px; }
.vt-compat-rank { width:20px; text-align:center; font-size:14px; font-weight:800; color:var(--fg-3); flex:none; }
.vt-compat-row.top .vt-compat-rank { color:#E5A93B; }
.vt-compat-char { width:42px; height:42px; object-fit:contain; flex:none; }
.vt-compat-tname { flex:1; font-size:15px; font-weight:700; color:var(--fg); }
.vt-compat-tname rt { font-size:9px; }
.vt-compat-badge { font-size:10px; font-weight:800; color:#1a1a1a; background:#E5A93B; padding:3px 8px; border-radius:6px; flex:none; }
.vt-compat-caret { font-size:11px; color:var(--fg-3); flex:none; transition:transform .2s ease; }
.vt-compat-row.open .vt-compat-caret { transform:rotate(180deg); }
.vt-compat-detail { max-height:0; overflow:hidden; opacity:0; font-size:12.5px; color:var(--fg-2); line-height:1.75; padding:0 2px; transition:max-height .28s ease, opacity .2s ease, padding .28s ease, margin .28s ease; }
.vt-compat-row.open .vt-compat-detail { max-height:280px; opacity:1; padding:9px 2px 3px; margin-top:7px; border-top:1px solid var(--border); }
.vt-compat-nudge { font-size:12px; color:var(--fg-3); margin:14px 0 0; text-align:center; }

/* 縦型 発表ビュー（動画用） */
.reveal-cta-btn { width:100%; margin-top:10px; background:var(--gold-grad); color:#1a0a04; border:none; border-radius:12px; padding:15px; font-size:14px; font-weight:800; letter-spacing:.02em; box-shadow:var(--gold-glow); }
.friend-cta { width:100%; margin-top:10px; background:transparent; color:var(--c-amber); border:1.5px solid rgba(229,169,59,.5); border-radius:12px; padding:14px; font-size:14px; font-weight:800; letter-spacing:.02em; cursor:pointer; transition:background .15s, border-color .15s; }
.friend-cta:active { background:rgba(229,169,59,.08); }
.vt-reveal { position:fixed; inset:0; z-index:9999; display:flex; align-items:center; justify-content:center; background:#060608; }
.vt-reveal[hidden] { display:none; }
.vtr-stage { position:relative; width:100%; max-width:440px; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:38px 24px 34px; box-sizing:border-box; text-align:center; overflow:hidden; background:radial-gradient(135% 72% at 50% 33%, var(--vtr-c2,#F2762E), var(--vtr-c1,#B11E3A) 40%, #0b0b0f 78%), #0b0b0f; }
.vtr-stage::after { content:''; position:absolute; inset:0; z-index:1; pointer-events:none; background:radial-gradient(118% 92% at 50% 46%, transparent 56%, rgba(0,0,0,.5)); }
.vtr-flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; z-index:6; }
.vtr-brand { position:relative; z-index:2; font-size:12px; font-weight:900; letter-spacing:.44em; text-indent:.44em; color:rgba(255,255,255,.82); opacity:0; }
.vtr-hook { position:relative; z-index:2; font-size:14.5px; font-weight:700; color:rgba(255,255,255,.92); line-height:1.55; opacity:0; }
.vtr-loading { position:absolute; top:50%; left:0; right:0; transform:translateY(-50%); font-size:18px; font-weight:700; letter-spacing:.2em; color:rgba(255,255,255,.85); opacity:0; z-index:4; }
.vtr-main { position:relative; z-index:2; display:flex; flex-direction:column; align-items:center; gap:11px; }
.vtr-char-wrap { position:relative; width:204px; height:204px; display:flex; align-items:center; justify-content:center; }
.vtr-char-wrap::before { content:''; position:absolute; width:78%; height:78%; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,.55), var(--vtr-c2,#F2762E) 36%, transparent 70%); filter:blur(28px); opacity:0; }
.vt-reveal.anim .vtr-char-wrap::before { animation:vtrGlow 1.1s ease-out both; animation-delay:1.3s; }
.vtr-char { position:relative; z-index:1; max-width:100%; max-height:100%; object-fit:contain; opacity:0; filter:drop-shadow(0 14px 34px rgba(0,0,0,.55)); }
.vtr-tag { font-size:11.5px; letter-spacing:.3em; text-indent:.3em; color:rgba(255,255,255,.7); font-weight:800; opacity:0; }
.vtr-name { font-size:64px; font-weight:900; color:#fff; line-height:1.0; letter-spacing:.01em; text-shadow:0 6px 30px rgba(0,0,0,.5); opacity:0; }
.vtr-name rt { font-size:16px; font-weight:700; letter-spacing:0; }
.vtr-rarity { display:inline-flex; align-items:center; font-size:14px; font-weight:800; letter-spacing:.04em; color:#fff; background:rgba(0,0,0,.28); border:1.5px solid rgba(255,255,255,.72); border-radius:999px; padding:7px 20px; opacity:0; }
.vtr-catch { max-width:330px; font-size:16px; font-weight:700; color:#fff; line-height:1.6; opacity:0; }
.vtr-cta { position:relative; z-index:2; font-size:14px; font-weight:700; color:rgba(255,255,255,.9); line-height:1.5; opacity:0; margin-bottom:48px; }
.vtr-url { display:inline-block; margin-top:11px; font-size:16px; font-weight:900; letter-spacing:.02em; color:#15110a; background:#fff; border:none; border-radius:999px; padding:9px 20px; box-shadow:0 6px 20px rgba(0,0,0,.35), 0 0 16px rgba(255,255,255,.45); }
.vtr-close { position:absolute; top:14px; right:14px; width:38px; height:38px; border-radius:50%; background:rgba(0,0,0,.32); color:#fff; border:none; font-size:17px; opacity:0; transition:opacity .3s; }
.vtr-replay { position:absolute; bottom:16px; left:50%; transform:translateX(-50%); background:rgba(255,255,255,.18); color:#fff; border:1px solid rgba(255,255,255,.55); border-radius:999px; padding:11px 20px; font-size:13px; font-weight:700; opacity:0; transition:opacity .3s; }
.vt-reveal.show-controls .vtr-close, .vt-reveal.show-controls .vtr-replay { opacity:1; }
.vt-reveal.anim .vtr-brand { animation:vtrRise .5s ease-out both; }
.vt-reveal.anim .vtr-hook { animation:vtrRise .5s ease-out both; animation-delay:.15s; }
.vt-reveal.anim .vtr-loading { animation:vtrPulse 1.2s ease-in-out both; }
.vt-reveal.anim .vtr-flash { animation:vtrFlash .5s ease-out both; animation-delay:1.2s; }
.vt-reveal.anim .vtr-char { animation:vtrPop .7s cubic-bezier(.2,1.5,.5,1) both; animation-delay:1.25s; }
.vt-reveal.anim .vtr-tag { animation:vtrRise .5s ease-out both; animation-delay:1.75s; }
.vt-reveal.anim .vtr-name { animation:vtrRise .55s ease-out both; animation-delay:1.9s; }
.vt-reveal.anim .vtr-rarity { animation:vtrStamp .55s cubic-bezier(.2,1.4,.4,1) both; animation-delay:2.35s; }
.vt-reveal.anim .vtr-catch { animation:vtrRise .5s ease-out both; animation-delay:2.75s; }
.vt-reveal.anim .vtr-cta { animation:vtrRise .5s ease-out both; animation-delay:3.0s; }
@keyframes vtrRise { from{opacity:0; transform:translateY(22px);} to{opacity:1; transform:translateY(0);} }
@keyframes vtrPop { 0%{opacity:0; transform:scale(.2);} 60%{opacity:1; transform:scale(1.12);} 100%{opacity:1; transform:scale(1);} }
@keyframes vtrStamp { 0%{opacity:0; transform:scale(2.3) rotate(-7deg);} 70%{opacity:1; transform:scale(.92) rotate(-7deg);} 100%{opacity:1; transform:scale(1) rotate(-3deg);} }
@keyframes vtrFlash { 0%{opacity:0;} 45%{opacity:.55;} 100%{opacity:0;} }
@keyframes vtrPulse { 0%{opacity:0;} 22%{opacity:1;} 78%{opacity:1;} 100%{opacity:0; visibility:hidden;} }
@keyframes vtrGlow { 0%{opacity:0; transform:scale(.6);} 55%{opacity:.92;} 100%{opacity:.68; transform:scale(1);} }

/* 相性アーティスト */
.vt-artist {
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg, rgba(229,169,59,.12), rgba(229,83,59,.06));
  border:1px solid rgba(229,169,59,.30); border-radius:14px; padding:16px 18px; margin:18px 0 8px;
}
.vt-artist-label { font-size:11px; color:var(--fg-3); font-weight:700; letter-spacing:.06em; }
.vt-artist-name { font-size:20px; font-weight:900; color:var(--c-amber); }

/* 課金導線 */
.vt-paywall {
  display:flex; align-items:center; gap:14px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:14px;
  padding:16px; margin:14px 0 18px; text-align:left;
}
.vt-paywall-body { flex:1; display:flex; flex-direction:column; gap:5px; }
.vt-paywall-title { font-size:14px; font-weight:800; color:var(--fg); }
.vt-paywall-sub { font-size:11px; color:var(--fg-3); line-height:1.6; }
.vt-paywall-btn { flex:none; font-size:12px; font-weight:800; color:var(--fg-2); background:var(--bg-card2); border:1px solid var(--border); padding:10px 14px; border-radius:10px; }

/* 測り直す */
.ghost-btn { width:100%; background:transparent; border:1px solid var(--border); color:var(--fg-3); font-size:13px; font-weight:700; padding:14px; border-radius:12px; transition:color .2s, border-color .2s; }
.ghost-btn:active { color:var(--fg); border-color:var(--fg-4); }

/* ===== ② 前診断（マイク不要）＆ ① 系統ノート ===== */
.prediag-entry { width:100%; margin-top:10px; background:transparent; color:var(--c-amber); border:1.5px solid rgba(229,169,59,.5); border-radius:12px; padding:13px; font-size:13.5px; font-weight:800; letter-spacing:.01em; cursor:pointer; transition:background .15s, border-color .15s, transform .12s; }
.prediag-entry:active { background:rgba(229,169,59,.08); transform:scale(.99); }
/* 未測定画面の二次CTA（マイク測定）＝予想ボタンより一段控えめに */
.cta-secondary { background:transparent !important; color:var(--c-amber) !important; border:1.5px solid rgba(229,169,59,.5); box-shadow:none !important; animation:none !important; margin-top:10px; }
.cta-secondary .cta-ripple { background:var(--c-amber); }
.cta-secondary:active { background:rgba(229,169,59,.08) !important; }

.prediag-container { max-width:560px; padding-top:14px; }
.prediag-head { display:flex; align-items:center; gap:12px; margin-bottom:18px; }
.prediag-eyebrow { font-size:11px; font-weight:800; letter-spacing:.14em; color:var(--fg-3); text-transform:uppercase; }
.prediag-quiz { padding:8px 2px 24px; }
.prediag-progress { height:5px; background:rgba(255,255,255,.08); border-radius:999px; overflow:hidden; margin-bottom:18px; }
.prediag-progress-bar { height:100%; background:var(--gold-grad); border-radius:999px; transition:width .35s cubic-bezier(.2,.7,.3,1); }
.prediag-count { font-size:12px; font-weight:800; color:var(--c-amber); letter-spacing:.05em; }
.prediag-count small { color:var(--fg-3); font-weight:700; }
.prediag-q { font-size:22px; font-weight:900; line-height:1.5; margin:10px 0 22px; color:var(--fg); }
.prediag-opts { display:flex; flex-direction:column; gap:11px; }
.prediag-opt { width:100%; text-align:left; background:var(--bg-card2); border:1px solid var(--border); color:var(--fg); font-size:15.5px; font-weight:700; padding:18px; border-radius:14px; cursor:pointer; transition:transform .12s, border-color .15s, background .15s; }
.prediag-opt:hover { border-color:rgba(229,169,59,.5); background:rgba(229,169,59,.06); }
.prediag-opt:active { transform:scale(.985); }
.prediag-result { padding:6px 2px 30px; }
.prediag-rlabel { display:block; text-align:center; font-size:12px; font-weight:800; letter-spacing:.12em; color:var(--fg-3); margin-bottom:12px; }
.prediag-card { margin-bottom:14px; }
.prediag-catch { text-align:center; font-size:15px; font-weight:800; color:var(--fg); margin:2px 0 14px; }
.prediag-note { text-align:center; font-size:12.5px; line-height:1.7; color:var(--fg-3); background:rgba(255,255,255,.04); border:1px solid var(--border); border-radius:12px; padding:12px 14px; margin-bottom:14px; }
.prediag-note b { color:var(--c-amber); }
.prediag-result .cta-measure { margin-bottom:10px; }
.prediag-result .friend-cta { margin-top:0; margin-bottom:10px; }

.vt-family-note { font-size:12px; line-height:1.7; color:var(--fg-3); text-align:center; background:rgba(255,255,255,.035); border:1px solid var(--border); border-radius:10px; padding:9px 12px; margin:2px 0 12px; }
.vt-family-note b { color:var(--c-amber); }

/* ----- 記事一覧 ----- */
.article-list { display:flex; flex-direction:column; gap:12px; }
.article-card { display:block; text-decoration:none; background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:18px; transition:border-color .2s, transform .15s; }
.article-card:active { transform:scale(.99); border-color:var(--c-amber); }
.article-card-title { display:block; font-size:16px; font-weight:800; color:var(--fg); margin-bottom:6px; }
.article-card-sub { display:block; font-size:12px; color:var(--fg-3); line-height:1.6; }

/* ----- 個人別 詳細分析（detail）----- */
.vt-detail { margin:6px 0 16px; text-align:left; }
.vt-detail-note { font-size:11px; color:var(--fg-3); line-height:1.7; background:var(--bg-card); border:1px dashed var(--border); border-radius:10px; padding:11px 13px; margin-bottom:18px; }
.vt-detail-note b { color:var(--fg-2); }
.vt-detail-block { margin-bottom:22px; }
.vt-h { font-size:13px; font-weight:800; color:var(--fg-2); letter-spacing:.04em; margin-bottom:11px; }
.vt-h.pos { color:var(--c-amber); }

.vt-stats { display:flex; gap:8px; }
.vt-stats > div { flex:1; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:12px 6px; text-align:center; }
.vt-stats span { display:block; font-size:10px; color:var(--fg-3); margin-bottom:6px; letter-spacing:.03em; }
.vt-stats b { font-size:15px; font-weight:800; color:var(--fg); font-family:'JetBrains Mono',monospace; }

.vt-rank { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:8px; }
.vt-rank-row { display:flex; align-items:center; gap:12px; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:12px 14px; }
.vt-rank-no { flex:none; width:24px; height:24px; border-radius:50%; background:var(--c-amber); color:#0a0b0f; font-size:12px; font-weight:900; display:flex; align-items:center; justify-content:center; }
.vt-rank-main { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.vt-rank-main b { font-size:15px; font-weight:800; color:var(--fg); }
.vt-rank-main small { font-size:11px; color:var(--fg-3); line-height:1.5; }
.vt-rank-pct { flex:none; font-family:'JetBrains Mono',monospace; font-size:18px; font-weight:800; color:var(--c-amber); }
.vt-rank-pct small { font-size:11px; }
.vt-rank-row.locked { cursor:pointer; border-color:rgba(229,169,59,.4); background:linear-gradient(135deg, rgba(229,169,59,.10), rgba(229,169,59,.03)); }
.vt-rank-redact { font-size:15px; font-weight:900; color:rgba(229,169,59,.38); letter-spacing:.12em; user-select:none; }
.vt-rank-lockcta { font-size:11px; color:#E5A93B; font-weight:700; }

.vt-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px; }
.vt-list li { position:relative; font-size:13px; color:var(--fg); line-height:1.65; padding-left:16px; }
.vt-list li::before { content:'·'; position:absolute; left:4px; color:var(--fg-3); font-weight:900; }
.vt-list.train li::before { content:'▸'; font-size:10px; color:var(--c-amber); top:3px; }
.vt-empty { color:var(--fg-3); font-size:12px; }

.vt-songtable { width:100%; border-collapse:collapse; }
.vt-songtable td { border-bottom:1px solid var(--border); padding:11px 4px; vertical-align:middle; }
.vt-song td:first-child b { display:block; font-size:14px; font-weight:700; color:var(--fg); }
.vt-song td:first-child small { display:block; font-size:11px; color:var(--fg-3); margin-top:2px; }
.vt-song-key { text-align:right; font-family:'JetBrains Mono',monospace; font-size:15px; font-weight:800; color:var(--fg-2); white-space:nowrap; }
.vt-song.conf-comfortable .vt-song-key { color:#4ADE80; }
.vt-song.conf-tight .vt-song-key { color:var(--c-amber); }
.vt-song.conf-far .vt-song-key { color:#FF6B6B; }
/* ランキングは <ol> で出力（番号は .vt-rank-no で描く）＝既定マーカーは出さない */
ol.vt-rank { counter-reset:none; }

/* 相性アーティスト：横一列カード */
.vt-artist-row { display:flex; gap:10px; overflow-x:auto; padding:2px 2px 6px; scrollbar-width:none; }
.vt-artist-row::-webkit-scrollbar { display:none; }
.vt-acard { flex:none; width:134px; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:13px 14px; }
.vt-acard b { display:block; font-size:14px; font-weight:800; color:var(--fg); line-height:1.3; margin-bottom:5px; }
.vt-acard small { display:block; font-size:11px; color:var(--fg-3); line-height:1.4; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
/* キーへの導線（重複解消：曲ごとのキーはキータブで） */
.vt-tolink { display:block; text-align:center; background:var(--bg-card2); border:1px solid var(--border); border-radius:12px; padding:14px; font-size:13px; font-weight:800; color:var(--c-amber); }
.vt-tolink:active { border-color:var(--c-amber); }

/* このタイプに近いアーティスト（無料・グループ表示） */
.vt-typeartists { margin:18px 0 8px; }
.vt-typeartists-label { display:block; font-size:11px; color:var(--fg-3); font-weight:700; letter-spacing:.06em; margin-bottom:10px; }
.vt-typeartists-note { display:block; font-size:10px; color:var(--fg-4); margin-top:9px; }
.vt-acard-name { flex:none; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:12px 16px; font-size:14px; font-weight:800; color:var(--fg); white-space:nowrap; }

/* 結果を画像でシェア（拡散の核） */
.share-nudge { text-align:center; font-size:12px; color:var(--fg-3); margin:6px 0 8px; }
.share-img-btn { width:100%; display:flex; align-items:center; justify-content:center; gap:8px; background:var(--gold-grad); color:#1a0a04; font-size:15px; font-weight:800; border:none; padding:15px; border-radius:12px; margin:4px 0 10px; cursor:pointer; box-shadow:var(--gold-glow); }
.share-img-btn:disabled { opacity:.7; }
.share-img-btn:active { transform:scale(.99); }
.share-save-link { display:block; margin:2px auto 12px; background:none; border:none; color:var(--fg-3); font-size:12px; text-decoration:underline; cursor:pointer; padding:4px; }
.share-save-link:active { opacity:.7; }

/* 相性No.1（有料・¥300で解放） */
.vt-no1 { margin:14px 0 4px; }
.vt-no1-lock { display:flex; align-items:center; gap:14px; background:linear-gradient(135deg, rgba(229,169,59,.12), rgba(229,169,59,.03)); border:1px solid rgba(229,169,59,.30); border-radius:14px; padding:16px; text-align:left; }
.vt-no1-lock-body { flex:1; display:flex; flex-direction:column; gap:6px; }
.vt-no1-label { display:block; font-size:10px; font-weight:800; color:#E5A93B; letter-spacing:.14em; }
.vt-no1-redact { display:block; font-size:19px; font-weight:900; color:rgba(229,169,59,.30); letter-spacing:.12em; line-height:1.1; user-select:none; }
.vt-no1-sub { font-size:11px; color:var(--fg-3); line-height:1.65; }
.vt-no1-btn { flex:none; font-size:13px; font-weight:800; color:#1a0a04; background:var(--gold-grad); border:none; padding:12px 16px; border-radius:10px; white-space:nowrap; cursor:pointer; box-shadow:var(--gold-glow); }
.vt-no1-btn:disabled { opacity:.6; box-shadow:none; }
.vt-no1-open { background:linear-gradient(135deg, rgba(229,169,59,.14), rgba(229,169,59,.04)); border:1px solid rgba(229,169,59,.36); border-radius:14px; padding:20px 18px; text-align:center; }
.vt-no1-name { display:block; font-size:25px; font-weight:900; color:var(--c-amber); letter-spacing:.01em; line-height:1.25; margin-top:7px; }
.vt-no1-rest { display:block; font-size:12px; color:var(--fg-2); margin-top:10px; }

/* ===================== 練習・記録（screen-train） ===================== */
.train-container { padding-bottom:40px; }
.tr-streak { display:flex; gap:10px; margin:14px 0 18px; }
.tr-stat { flex:1; background:var(--bg-card); border:1px solid var(--border); border-radius:12px; padding:14px 8px; text-align:center; }
.tr-stat-num { display:block; font-size:28px; font-weight:900; color:var(--c-amber); line-height:1; font-family:'JetBrains Mono',monospace; }
.tr-stat-num small { font-size:13px; margin-left:2px; }
.tr-stat-num.tr-sm { font-size:17px; color:var(--fg); }
.tr-stat-lab { display:block; font-size:11px; color:var(--fg-3); margin-top:7px; letter-spacing:.04em; }

.tr-card { background:var(--bg-card); border:1px solid var(--border); border-radius:14px; padding:16px 16px 18px; margin:14px 0; }
.tr-h { font-size:15px; font-weight:800; color:var(--fg); margin:0 0 10px; }
.tr-card-note { font-size:12px; color:var(--fg-3); margin:-4px 0 12px; line-height:1.5; }

.tr-chart { width:100%; }
.tr-svg { width:100%; height:auto; display:block; }
.tr-band { fill:rgba(229,169,59,.07); stroke:none; }
.tr-line-hi { fill:none; stroke:var(--c-high); stroke-width:2.4; stroke-linejoin:round; stroke-linecap:round; }
.tr-line-lo { fill:none; stroke:var(--c-low); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; opacity:.85; }
.tr-dot-hi { fill:var(--c-high); stroke:var(--bg-card); stroke-width:1.5; }
.tr-grid { stroke:var(--border); stroke-width:1; }
.tr-axl { fill:var(--fg-3); font-size:10px; font-family:'JetBrains Mono',monospace; }
.tr-chart-empty { text-align:center; color:var(--fg-3); font-size:13px; line-height:1.7; padding:28px 10px; }
.tr-chart-cap { text-align:center; font-size:11px; color:var(--fg-4); margin-top:8px; }

.tr-menu-list { display:flex; flex-direction:column; gap:8px; }
.tr-menu-item { background:var(--bg-elev); border:1px solid var(--border); border-radius:10px; padding:11px 13px; }
.tr-menu-item.locked { opacity:.6; }
.tr-menu-head { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.tr-menu-tag { font-size:10px; font-weight:800; color:#1a1308; background:var(--c-amber); padding:2px 9px; border-radius:20px; flex:none; }
.tr-menu-item.locked .tr-menu-tag { background:var(--fg-4); color:var(--bg); }
.tr-menu-title { font-size:13.5px; font-weight:700; color:var(--fg); }
.tr-menu-desc { font-size:12.5px; color:var(--fg-2); line-height:1.6; margin:0; }

.tr-sub { display:flex; align-items:center; gap:12px; margin-top:14px; padding:14px 16px; border-radius:12px; background:linear-gradient(135deg, rgba(229,169,59,.14), rgba(229,83,59,.08)); border:1px solid rgba(229,169,59,.35); }
.tr-sub-body { flex:1; display:flex; flex-direction:column; gap:3px; }
.tr-sub-title { font-size:13.5px; font-weight:800; color:var(--c-amber); }
.tr-sub-sub { font-size:11.5px; color:var(--fg-2); line-height:1.5; }
.tr-sub-btn { flex:none; background:var(--c-amber); color:#1a1308; border:none; border-radius:8px; padding:10px 14px; font-size:12.5px; font-weight:800; cursor:pointer; }
.tr-sub-btn:active { transform:translateY(1px); }

/* ===================== 16タイプ図鑑（screen-types） ===================== */
.types-lead { font-size:13.5px; color:var(--fg-3); line-height:1.7; margin:10px 0 22px; }
.types-root { display:flex; flex-direction:column; gap:26px; }
.types-cta { margin-top:24px; }

.type-group { --c1:#888; --c2:#aaa; }
.type-group-head { display:flex; align-items:center; gap:10px; margin-bottom:3px; }
.type-group-dot { width:13px; height:13px; border-radius:50%; background:linear-gradient(135deg,var(--c1),var(--c2)); flex:none; box-shadow:0 0 12px var(--c2); }
.type-group-title { font-size:19px; font-weight:900; color:var(--fg); letter-spacing:.04em; }
.type-group-title rt { font-size:9px; font-weight:500; color:var(--fg-3); }
.type-group-tag { font-family:'JetBrains Mono',monospace; font-size:10px; font-weight:700; color:var(--fg-3); letter-spacing:.08em; }
.type-group-tagline { font-size:12px; color:var(--fg-3); margin:1px 0 12px; }

.type-grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(140px, 1fr)); gap:10px; }
.type-card { position:relative; display:flex; flex-direction:column; align-items:center; gap:5px; padding:16px 8px 13px; border-radius:16px; cursor:pointer; background:var(--bg-card); border:1px solid var(--border); overflow:hidden; opacity:0; transition:transform .15s, border-color .2s, box-shadow .2s, opacity .5s; }
.type-card.revealed { opacity:1; }
.type-card:active { transform:scale(.97); }
.type-card-glow { position:absolute; inset:0; background:radial-gradient(circle at 50% 0%, var(--c2), transparent 70%); opacity:.15; pointer-events:none; }
.type-card-img { width:94px; height:94px; object-fit:contain; position:relative; z-index:1; filter:drop-shadow(0 4px 10px rgba(0,0,0,.42)); }
.type-card-name { font-size:17px; font-weight:900; color:var(--fg); letter-spacing:.03em; position:relative; z-index:1; }
.type-card-name rt { font-size:8px; font-weight:500; color:var(--fg-3); }
.type-card-state { font-size:11px; font-weight:700; color:var(--fg); background:rgba(255,255,255,.07); border:1px solid var(--border); padding:2px 10px; border-radius:12px; position:relative; z-index:1; }
.type-card.is-me { border-color:var(--c2); box-shadow:0 0 0 1px var(--c2), 0 8px 22px rgba(0,0,0,.4); }
.type-me { position:absolute; top:8px; right:8px; z-index:2; font-size:10px; font-weight:800; color:#0a0b0f; background:linear-gradient(135deg,var(--c1),var(--c2)); padding:2px 8px; border-radius:10px; }
@media (hover:hover){ .type-card:hover { transform:translateY(-3px); border-color:var(--c2); box-shadow:0 10px 26px rgba(0,0,0,.45); } }
@media (min-width:720px){ .type-grid { grid-template-columns:repeat(4, 1fr); } }
/* PCでは図鑑だけ少し広げて、キャラを大きく見せる（16P風） */
@media (min-width:760px){
  #screen-types .container { max-width:880px; }
  #screen-types .type-card-img { width:112px; height:112px; }
  #screen-types .type-card { padding:20px 8px 15px; }
}

/* タイプ詳細モーダル */
.type-modal { position:fixed; inset:0; z-index:200; display:none; }
.type-modal.open { display:block; }
.type-modal-backdrop { position:absolute; inset:0; background:rgba(0,0,0,.66); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px); }
.type-modal-sheet { --c1:#888; --c2:#aaa; position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:100%; max-width:520px; max-height:92vh; overflow-y:auto; background:var(--bg-elev); border:1px solid var(--border); border-bottom:none; border-radius:22px 22px 0 0; padding:0 20px 26px; }
.type-modal.open .type-modal-sheet { animation:tmIn .24s ease; }
@keyframes tmIn { from { opacity:0; transform:translateX(-50%) translateY(18px); } }
.type-modal-close { position:absolute; top:13px; right:13px; z-index:5; width:34px; height:34px; border-radius:50%; background:rgba(0,0,0,.42); border:1px solid var(--border); color:#fff; font-size:14px; cursor:pointer; }

.tm-hero { position:relative; text-align:center; padding:28px 0 6px; margin:0 -20px 16px; overflow:hidden; }
.tm-hero::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 50% -18%, var(--c2), transparent 62%); opacity:.22; pointer-events:none; }
.tm-hero > * { position:relative; z-index:1; }
.tm-char { width:150px; height:150px; object-fit:contain; filter:drop-shadow(0 8px 18px rgba(0,0,0,.42)); }
.tm-tag { display:block; font-family:'JetBrains Mono',monospace; font-size:11px; font-weight:700; letter-spacing:.1em; color:var(--fg-2); margin-top:2px; }
.tm-name { font-size:38px; font-weight:900; color:var(--fg); line-height:1.15; letter-spacing:.05em; }
.tm-name rt { font-size:11px; font-weight:500; color:var(--fg-3); }
.tm-sub { display:inline-block; font-size:12px; font-weight:700; color:var(--fg-2); background:var(--bg-card); border:1px solid var(--border); padding:6px 13px; border-radius:14px; margin-top:10px; line-height:1.3; }
.tm-sub rt { font-size:8px; color:var(--fg-3); }
.tm-tagline { font-size:15px; font-weight:800; color:var(--fg); margin-top:12px; }
.tm-desc { font-size:14px; line-height:1.85; color:var(--fg-2); margin:0 0 20px; }
.tm-sec { margin-bottom:16px; }
.tm-sec-h { display:block; font-size:12px; font-weight:800; color:var(--fg-3); letter-spacing:.06em; margin-bottom:8px; }
.tm-chips { display:flex; flex-wrap:wrap; gap:7px; }
.tm-chip { font-size:12.5px; font-weight:700; color:var(--fg); background:var(--bg-card); border:1px solid var(--border); padding:7px 13px; border-radius:20px; }
.tm-cta { width:100%; margin-top:8px; background:linear-gradient(100deg,var(--c1),var(--c2)); color:#0a0b0f; font-weight:900; font-size:15px; padding:16px; border-radius:14px; letter-spacing:.02em; box-shadow:0 10px 26px rgba(0,0,0,.4); cursor:pointer; }
.tm-cta:active { transform:translateY(1px); }

/* タブ5個に増えた分の安全策（はみ出たら横スクロール） */
.main-tabs { overflow-x:auto; scrollbar-width:none; }
.main-tabs::-webkit-scrollbar { display:none; }
.main-tab { white-space:nowrap; }

/* ===== キャラのモーション：16タイプ それぞれ固有の動き ===== */
/* 常時は動かさない。きっかけ（出現・ホバー・タップ・気まぐれ）で、性格ごとに違う動き */
.type-card-img, .tm-char { transform-origin:50% 92%; will-change:transform; }
.tm-char { cursor:pointer; }

@keyframes kHomura { /* 主人公：力強い二段ジャンプ */
  0%{transform:translateY(0) scale(1)} 22%{transform:translateY(-24px) scaleY(1.14) scaleX(.88)} 44%{transform:translateY(0) scaleY(.82) scaleX(1.16)} 60%{transform:translateY(-11px) scaleY(1.05)} 80%{transform:translateY(0) scaleY(.94) scaleX(1.05)} 100%{transform:translateY(0) scale(1)} }
@keyframes kGuren { /* 挑戦者：闘志の前後シェイク */
  0%,100%{transform:translateX(0) rotate(0)} 18%{transform:translateX(-4px) rotate(-4deg)} 36%{transform:translateX(4px) rotate(4deg) scaleX(1.05)} 54%{transform:translateX(-5px) rotate(-4deg)} 72%{transform:translateX(4px) rotate(3deg)} 88%{transform:translateX(-2px) rotate(-1deg)} }
@keyframes kKagerou { /* 自由人：左右に揺れて回る */
  0%,100%{transform:rotate(0) translateY(0)} 25%{transform:rotate(-9deg) translateY(-7px)} 50%{transform:rotate(0) translateY(-2px)} 75%{transform:rotate(9deg) translateY(-7px)} }
@keyframes kTanebi { /* 初心者：小→大に跳ねる */
  0%{transform:translateY(0) scale(.95)} 28%{transform:translateY(-5px) scale(.97)} 48%{transform:translateY(0) scale(.96)} 70%{transform:translateY(-13px) scale(1.03)} 88%{transform:translateY(0) scaleY(.95) scaleX(1.04)} 100%{transform:translateY(0) scale(1)} }
@keyframes kTasogare { /* 思慮者：ゆったり一揺れ */
  0%,100%{transform:translateY(0) rotate(0)} 50%{transform:translateY(-6px) rotate(2deg)} }
@keyframes kKogane { /* 王様：堂々と浮上 */
  0%{transform:translateY(0) scaleY(1)} 35%{transform:translateY(-9px) scaleY(1.09) scaleX(.95)} 62%{transform:translateY(-7px) scaleY(1.05)} 100%{transform:translateY(0) scale(1)} }
@keyframes kOkibi { /* 保護者：あたたかく横に広がる */
  0%,100%{transform:scale(1) translateY(0)} 40%{transform:scaleX(1.1) scaleY(.93) translateY(-3px)} 70%{transform:scaleX(1.04) scaleY(.99)} }
@keyframes kYamabuki { /* ムードメーカー：陽気にダンス */
  0%,100%{transform:translateY(0) rotate(0)} 20%{transform:translateY(-11px) rotate(-7deg)} 45%{transform:translateY(0) rotate(0)} 70%{transform:translateY(-11px) rotate(7deg)} }
@keyframes kAkatsuki { /* 指導者：前へ踏み出す */
  0%,100%{transform:translateX(0) rotate(0)} 30%{transform:translateX(6px) rotate(5deg) scaleX(1.04)} 58%{transform:translateX(6px) rotate(5deg)} }
@keyframes kHari { /* 分析者：冷静に首かしげ */
  0%,100%{transform:rotate(0) translateY(0)} 30%{transform:rotate(-6deg) translateY(-2px)} 60%{transform:rotate(-6deg)} 82%{transform:rotate(2deg)} }
@keyframes kSazanami { /* 調和者：水面のように流れる */
  0%,100%{transform:skewX(0) translateX(0) translateY(0)} 25%{transform:skewX(-4deg) translateX(-4px)} 50%{transform:skewX(0) translateY(-3px)} 75%{transform:skewX(4deg) translateX(4px)} }
@keyframes kAsagiri { /* ミステリアス：霧のように薄れる */
  0%,100%{transform:translateY(0) scale(1); opacity:1} 35%{transform:translateY(-7px) scale(1.03); opacity:.5} 65%{transform:translateY(-3px); opacity:.8} }
@keyframes kKiraboshi { /* アイドル：スターターン */
  0%,100%{transform:rotate(0) translateY(0) scale(1)} 28%{transform:translateY(-20px) scale(1.09)} 52%{transform:translateY(0) rotate(10deg) scaleY(.9)} 76%{transform:rotate(-5deg) translateY(-6px)} }
@keyframes kTsurara { /* 完璧主義者：鋭い一突き */
  0%,100%{transform:scale(1)} 24%{transform:scaleY(1.14) scaleX(.9) translateY(-9px)} 42%{transform:scaleY(.93) scaleX(1.07) translateY(0)} 60%{transform:scaleY(1.02) translateY(-2px)} }
@keyframes kSasameyuki { /* 繊細さん：細かく震える */
  0%,100%{transform:translateX(0) rotate(0)} 15%{transform:translateX(-1.6px) rotate(-1.6deg)} 30%{transform:translateX(1.6px) rotate(1.6deg)} 45%{transform:translateX(-1.5px) rotate(-1deg)} 60%{transform:translateX(1.3px) rotate(1deg)} 80%{transform:translateX(-1px)} }
@keyframes kAwayuki { /* のんびり屋：舟こぎ居眠り */
  0%,100%{transform:rotate(0) translateY(0)} 42%{transform:rotate(7deg) translateY(5px)} 56%{transform:rotate(9deg) translateY(6px)} 64%{transform:rotate(0) translateY(-3px)} 78%{transform:rotate(2deg) translateY(0)} }

@media (prefers-reduced-motion: reduce){
  .type-card-img, .tm-char { animation:none !important; transform:none !important; }
  .type-card { opacity:1; transition:none; }
}

/* ========== 実践ドリル（マイク判定・サブスク） ========== */
.drill-sec { background: rgba(255,255,255,.03); border: 1px solid rgba(229,169,59,.25); border-radius: 14px; padding: 16px 16px 8px; margin-bottom: 14px; }
.drill-sec.locked { border-color: rgba(255,255,255,.12); }
.drill-sec-head { font-weight: 800; font-size: 1.02rem; margin-bottom: 6px; }
.drill-alldone { color: var(--c-amber); margin-left: 8px; font-size: .9rem; }
.drill-sec-sub { color: #aab; font-size: .85rem; line-height: 1.7; margin: 4px 0 10px; }
.drill-row { display: flex; align-items: center; gap: 12px; padding: 10px 4px; border-top: 1px solid rgba(255,255,255,.06); }
.drill-row.locked { opacity: .55; }
.drill-row-main { flex: 1; min-width: 0; }
.drill-row-head { display: flex; align-items: center; gap: 8px; }
.drill-desc { color: #99a; font-size: .8rem; margin: 4px 0 0; }
.drill-check { font-size: .9rem; }
.drill-btn { background: var(--c-amber); color: #141006; border: none; border-radius: 999px; padding: 9px 16px; font-weight: 800; font-size: .85rem; cursor: pointer; white-space: nowrap; }
.drill-btn.done { background: transparent; color: var(--c-amber); border: 1px solid rgba(229,169,59,.5); }
.drill-lock { color: #889; font-size: .75rem; white-space: nowrap; }
.drill-overlay { position: fixed; inset: 0; background: rgba(5,6,10,.92); z-index: 999; display: flex; align-items: center; justify-content: center; padding: 20px; }
.drill-overlay[hidden] { display: none; }
.drill-card { width: 100%; max-width: 440px; background: #14151d; border: 1px solid rgba(229,169,59,.3); border-radius: 18px; padding: 26px 22px; text-align: center; }
.drill-name { font-weight: 800; font-size: 1.05rem; margin-bottom: 14px; }
.drill-target-label { color: #889; font-size: .75rem; letter-spacing: .12em; }
.drill-target { font-size: 2.6rem; font-weight: 900; color: var(--c-amber); line-height: 1.2; margin-bottom: 10px; }
.drill-steps { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.drill-dot { font-size: .75rem; color: #889; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; padding: 3px 9px; }
.drill-dot.on { color: #141006; background: var(--c-amber); border-color: var(--c-amber); font-weight: 800; }
.drill-dot.done { color: var(--c-amber); border-color: rgba(229,169,59,.5); }
.drill-meter { position: relative; height: 14px; background: rgba(255,255,255,.07); border-radius: 999px; margin: 14px 0 6px; overflow: hidden; }
.drill-zone { position: absolute; left: 42%; width: 16%; top: 0; bottom: 0; background: rgba(94,210,120,.35); border-radius: 999px; }
.drill-needle { position: absolute; top: -2px; bottom: -2px; width: 4px; background: #fff; border-radius: 2px; left: 50%; transform: translateX(-50%); transition: left .08s linear; }
.drill-now-row { color: #aab; font-size: .85rem; margin-bottom: 10px; }
.drill-now-row b { color: #fff; }
.drill-prog { height: 10px; background: rgba(255,255,255,.07); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.drill-fill { height: 100%; width: 0%; background: linear-gradient(90deg,var(--c-amber),#E5853B); border-radius: 999px; transition: width .15s linear; }
.drill-stat { color: #cdd; font-size: .9rem; min-height: 1.4em; margin-bottom: 14px; }
.drill-stop { width: 100%; }
.drill-pass { font-size: 1.8rem; font-weight: 900; color: var(--c-amber); padding: 30px 0 6px; }
.drill-pass-sub { color: #aab; padding-bottom: 24px; }
/* 実践ドリル v2（Lv制） */
.drill-lv { font-size: .7rem; font-weight: 900; color: var(--c-amber); border: 1px solid rgba(229,169,59,.45); border-radius: 6px; padding: 2px 6px; }
.drill-progress-num { margin-left: 10px; font-size: .85rem; color: var(--c-amber); font-weight: 800; }
.drill-check small { font-size: .65rem; color: #9a8; margin-left: 2px; font-weight: 400; }
/* お手本ガイド */
.drill-guide-btn { background: transparent; color: #cdd; border: 1px solid rgba(255,255,255,.25); border-radius: 999px; padding: 7px 16px; font-size: .85rem; cursor: pointer; margin: 2px 0 8px; }
.drill-guide-btn:active { background: rgba(255,255,255,.1); }
.drill-target.playing { animation: drillPulse .9s ease-in-out infinite; }
@keyframes drillPulse { 0%,100% { transform: scale(1); text-shadow: none; } 50% { transform: scale(1.06); text-shadow: 0 0 24px rgba(229,169,59,.55); } }
/* 流れお手本：再生中のチップ発光 */
.drill-dot.play { color: #141006; background: #fff; border-color: #fff; font-weight: 800; box-shadow: 0 0 14px rgba(255,255,255,.45); }
/* ===== 実践ドリル v3 UI（みんなが使いたくなる見た目） ===== */
.drill-sec { background: linear-gradient(180deg, rgba(229,169,59,.05), rgba(255,255,255,.02)); border: 1px solid rgba(229,169,59,.22); border-radius: 18px; padding: 18px 16px 12px; margin-bottom: 16px; }
.drill-sec.locked { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); }
.drill-sec-head { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.06rem; margin-bottom: 12px; }
.drill-progress-num { font-size: .9rem; color: var(--c-amber); font-weight: 900; background: rgba(229,169,59,.14); border-radius: 999px; padding: 2px 11px; }
.drill-alldone { color: var(--c-amber); font-size: .85rem; margin-left: auto; }
/* 進捗バー＋ピップ（達成感の可視化） */
.drill-ladder { height: 8px; background: rgba(255,255,255,.08); border-radius: 999px; overflow: hidden; margin-bottom: 8px; }
.drill-ladder-fill { height: 100%; background: linear-gradient(90deg,var(--c-amber),#E5853B); border-radius: 999px; transition: width .5s cubic-bezier(.2,.8,.2,1); }
.drill-pips { display: flex; gap: 5px; margin-bottom: 12px; }
.drill-pip { flex: 1; height: 4px; border-radius: 999px; background: rgba(255,255,255,.12); transition: background .3s; }
.drill-pip.on { background: var(--c-amber); }
.drill-pip.next { background: rgba(229,169,59,.5); animation: pipPulse 1.4s ease-in-out infinite; }
@keyframes pipPulse { 0%,100% { opacity: .5; } 50% { opacity: 1; } }
.drill-sec-sub { color: #9aa; font-size: .82rem; line-height: 1.65; margin: 0 0 12px; }
/* 行（Lvバッジ＋本体＋ボタン） */
.drill-row { display: flex; align-items: center; gap: 12px; padding: 12px 10px; border-radius: 12px; margin-bottom: 7px; background: rgba(255,255,255,.03); border: 1px solid rgba(255,255,255,.06); transition: transform .12s, box-shadow .2s; }
.drill-row.next { background: rgba(229,169,59,.1); border-color: rgba(229,169,59,.55); box-shadow: 0 0 0 1px rgba(229,169,59,.25), 0 6px 20px rgba(255,159,26,.15); }
.drill-row.done { background: rgba(94,210,120,.07); border-color: rgba(94,210,120,.25); }
.drill-row.locked { opacity: .42; padding: 9px 10px; }
.drill-lvbadge { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: .95rem; color: #cdd; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.14); }
.drill-row.next .drill-lvbadge { color: #141006; background: var(--c-amber); border-color: var(--c-amber); box-shadow: 0 0 14px rgba(229,169,59,.5); }
.drill-lvbadge.done { color: #5ed278; background: rgba(94,210,120,.15); border-color: rgba(94,210,120,.5); }
.drill-row-main { flex: 1; min-width: 0; }
.drill-row-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.drill-row-head b { font-size: .98rem; }
.tr-menu-tag { font-size: .68rem; font-weight: 800; border: 1px solid; border-radius: 6px; padding: 2px 7px; letter-spacing: .02em; }
.drill-desc { color: #99a; font-size: .8rem; margin: 5px 0 0; line-height: 1.5; }
.drill-next-badge { font-size: .62rem; font-weight: 900; color: #141006; background: var(--c-amber); border-radius: 5px; padding: 2px 6px; letter-spacing: .08em; animation: pipPulse 1.4s ease-in-out infinite; }
.drill-check { font-size: .72rem; color: #5ed278; font-weight: 700; }
.drill-btn { flex: none; background: var(--gold-grad); color: #1a0a04; border: none; border-radius: 999px; padding: 10px 18px; font-weight: 800; font-size: .85rem; cursor: pointer; white-space: nowrap; transition: transform .1s; box-shadow: var(--gold-glow); }
.drill-btn:active { transform: scale(.94); }
.drill-btn.next { box-shadow: 0 4px 16px rgba(255,159,26,.45); animation: nextGlow 1.6s ease-in-out infinite; }
@keyframes nextGlow { 0%,100% { box-shadow: 0 4px 16px rgba(255,159,26,.35); } 50% { box-shadow: 0 4px 22px rgba(255,159,26,.7); } }
.drill-btn.done { background: transparent; color: #9aa; border: 1px solid rgba(255,255,255,.2); font-weight: 700; }
.drill-lock { flex: none; font-size: 1.1rem; opacity: .6; padding-right: 6px; }

/* ===== 匿名統計の同意トグル（フッター）===== */
.data-consent-row { display: flex; align-items: center; gap: 8px; margin: 14px 0 6px; flex-wrap: wrap; cursor: pointer; }
.data-consent-row input { width: 16px; height: 16px; accent-color: var(--c-amber); cursor: pointer; flex: none; }
.data-consent-text { font-size: .82rem; color: #cdd; }
.data-consent-link { font-size: .78rem; color: #9aa; text-decoration: underline; }
.data-consent-note { font-size: .7rem; color: #889; line-height: 1.6; margin: 0 0 4px; max-width: 520px; }

/* ===== 任意属性プロンプト（年代・性別）===== */
.demo-prompt { margin: 16px 0; padding: 16px; border-radius: 14px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); }
.demo-prompt-title { font-size: .95rem; font-weight: 800; color: #eee; margin: 0 0 6px; }
.demo-prompt-sub { font-size: .76rem; color: #99a; line-height: 1.6; margin: 0 0 12px; }
.demo-prompt-group { margin-bottom: 12px; }
.demo-prompt-label { display: block; font-size: .74rem; font-weight: 700; color: #aab; margin-bottom: 6px; }
.demo-prompt-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.demo-prompt-opts label { display: inline-flex; align-items: center; gap: 5px; font-size: .82rem; color: #cdd; padding: 6px 10px; border-radius: 999px; background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.1); cursor: pointer; }
.demo-prompt-opts input { accent-color: var(--c-amber); cursor: pointer; }
.demo-prompt-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 6px; }
.demo-prompt-skip { background: transparent; color: #9aa; border: 1px solid rgba(255,255,255,.2); border-radius: 999px; padding: 8px 16px; font-size: .82rem; font-weight: 700; cursor: pointer; }
.demo-prompt-submit { background: var(--c-amber); color: #141006; border: none; border-radius: 999px; padding: 8px 18px; font-size: .82rem; font-weight: 800; cursor: pointer; }
.demo-prompt-submit:active, .demo-prompt-skip:active { transform: scale(.96); }

/* ----- 再利用できる上品なアップセル（控えめ・閉じれる） ----- */
.upsell-slot:empty { display:none; }
.upsell-card {
  position:relative; display:flex; align-items:center; gap:14px;
  background:var(--bg-card); border:1px solid var(--border); border-radius:14px;
  padding:16px 16px; margin:14px 0 4px; text-align:left;
}
.upsell-body { flex:1; display:flex; flex-direction:column; gap:5px; padding-right:18px; }
.upsell-title { font-size:13px; font-weight:800; color:var(--fg); line-height:1.5; }
.upsell-sub { font-size:11px; color:var(--fg-3); line-height:1.6; }
.upsell-cta { flex:none; font-size:12px; font-weight:800; color:var(--fg-2); background:var(--bg-card2); border:1px solid var(--border); padding:10px 14px; border-radius:10px; cursor:pointer; white-space:nowrap; transition:color .2s, border-color .2s; }
.upsell-cta:active { color:var(--fg); border-color:var(--fg-4); }
.upsell-x { position:absolute; top:8px; right:8px; width:24px; height:24px; line-height:1; display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--fg-4); background:transparent; border:none; border-radius:8px; cursor:pointer; }
.upsell-x:active { color:var(--fg-2); }