/*!
 * hibiki-v2.css — index-v2 + 全 -v2 ページ共通 CSS
 * from_gpt/hibiki-source-code の Next.js デザイン を adapt
 * 抽出元: index-v2.html の <style id="hibiki-v2-styles">
 */

:root {
    --hv2-ink: #25202a;
    --hv2-ink-soft: #665d68;
    --hv2-paper: #f5f0e9;
    --hv2-paper-deep: #e9e0d7;
    --hv2-pink: #d9879e;
    --hv2-gold: #c7a45e;
    --hv2-night: #05050d;
    --hv2-serif: "Shippori Mincho B1", "Yu Mincho", serif;
    --hv2-sans: "Noto Sans JP", system-ui, sans-serif;
    --hv2-latin: "DM Sans", system-ui, sans-serif;
  }
  body.hibiki-v2 {
    margin: 0;
    /* 銀河を最奥の壁紙として全 section の下に fixed で敷く (2026-08-07: user 要望
       「うっすら常に銀河の存在を感じられるように」)。各 section の bg を alpha 化
       することで galaxy が透けて出続ける。 */
    background:
      url("galaxy-bg.jpg") center top / cover fixed,
      var(--hv2-night);
    color: #f8f3ed;
    font-family: var(--hv2-sans); font-weight: 300; line-height: 1.8;
    overflow-x: hidden;
  }
  body.hibiki-v2::before, body.hibiki-v2::after { display: none !important; content: none !important; }

  /* ===== Galaxy Scroll (2026-08-07): 銀河を絶妙にゆっくり左へ動かす =====
     mirror-flip 二枚並べで継ぎ目を完全排除。約 8 分/周期で「よく見ないと分からない」速度。
     wrapper: 200vw、2 枚 (原本 + 横反転) を隣接、translateX(-100vw) で loop。
     Revert: <div class="galaxyScroll"> を HTML から削除するだけ。
     追加重量: 0 バイト (既存 galaxy-bg.jpg 再利用)。 */
  .hibiki-v2 .galaxyScroll {
    position: fixed; top: 0; left: 0;
    width: 200vw; height: 100vh;
    z-index: -1;
    pointer-events: none;
    will-change: transform;
    animation: hv2-galaxyDrift 480s linear infinite;
  }
  .hibiki-v2 .galaxyScroll::before,
  .hibiki-v2 .galaxyScroll::after {
    content: ""; position: absolute; top: 0;
    width: 100vw; height: 100vh;
    background: url("galaxy-bg.jpg") center / cover;
  }
  .hibiki-v2 .galaxyScroll::before { left: 0; }
  .hibiki-v2 .galaxyScroll::after  { left: 100vw; transform: scaleX(-1); }  /* 鏡像で継ぎ目排除 */
  @keyframes hv2-galaxyDrift {
    to { transform: translateX(-100vw); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hibiki-v2 .galaxyScroll { animation: none; }
  }
  .hibiki-v2 main { display: block; }
  .hibiki-v2 button, .hibiki-v2 input { font: inherit; }
  .hibiki-v2 a { color: inherit; }
  .hibiki-v2 img { display: block; max-width: 100%; }

  .hibiki-v2 .cosmos {
    position: relative; min-height: 100vh; overflow: hidden;
    /* 透過 50% (galaxy が半分透けて見える)、bottom は黒へグラデーション */
    background:
      linear-gradient(180deg,
        rgba(5,5,15,.10) 0%,
        rgba(5,5,15,.28) 50%,
        rgba(5,5,15,.68) 85%,
        #05050d 100%),
      url("galaxy-bg.jpg") center top / cover fixed;
  }
  .hibiki-v2 .cosmos::before {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background:
      radial-gradient(circle at 50% 22%, rgba(255,255,255,.22), transparent 25%),
      linear-gradient(90deg, rgba(20,18,36,.34), transparent 30%, transparent 70%, rgba(20,18,36,.34));
  }
  .hibiki-v2 .cosmosNoise {
    position: absolute; inset: 0; opacity: .12; pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
  }

  /* test-server-banner が active な時 --v2-banner-height にその高さが入る。無ければ 0 */
:root { --v2-banner-height: 0px; }
.hibiki-v2 .siteHeader {
    /* sticky: 縦スクロール中も常時表示。cosmos の overflow:hidden を回避するため fixed */
    /* banner 下に配置 (banner なければ top:0) */
    position: fixed; top: var(--v2-banner-height); left: 0; right: 0; z-index: 100;
    width: 100%;
    box-sizing: border-box;  /* padding を含めて viewport 幅に収める (2026-08-07: LINE 登録が右にはみ出る bug fix) */
    padding: 16px max(24px, calc(50% - 590px));  /* inner content ~1180px、両サイド padding */
    display: flex; align-items: center; justify-content: space-between;
    background: linear-gradient(180deg, rgba(5,5,15,.88) 0%, rgba(5,5,15,.72) 100%);
    backdrop-filter: blur(16px) saturate(1.15);
    -webkit-backdrop-filter: blur(16px) saturate(1.15);
    border-bottom: 1px solid rgba(255,255,255,.14);
    box-shadow: 0 6px 20px rgba(0,0,0,.28);
  }
  /* 固定 header + banner 分の余白を確保 (calc で動的追従) */
  body.hibiki-v2 { padding-top: calc(74px + var(--v2-banner-height)); }
  body.hibiki-v2-inner { padding-top: calc(74px + var(--v2-banner-height)); }
  .hibiki-v2 .brand img { width: 196px; filter: drop-shadow(0 0 18px rgba(255,255,255,.12)); }
  /* siteNav: chip 型 pill で視認性を強化。current-page は gold ハイライト、hover で lift、CTA は pink accent */
  .hibiki-v2 .siteNav {
    display: flex; align-items: center; gap: 8px;
    font-size: 12px; letter-spacing: .08em;
    flex-wrap: wrap; justify-content: flex-end;
  }
  .hibiki-v2 .siteNav a {
    text-decoration: none; white-space: nowrap;
    padding: 10px 18px; border-radius: 999px;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.22);
    color: rgba(255,255,255,.9);
    font-family: var(--hv2-sans); font-weight: 400;
    transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
  }
  .hibiki-v2 .siteNav a:hover {
    background: rgba(255,248,220,.16);
    border-color: rgba(244,217,168,.55);
    color: #fff8e8;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(244,217,168,.18);
  }
  .hibiki-v2 .siteNav a[aria-current="page"] {
    background: rgba(244,217,168,.22);
    border-color: #f4d9a8;
    color: #f4d9a8;
    font-weight: 500;
    box-shadow: 0 0 0 3px rgba(244,217,168,.10);
  }
  .hibiki-v2 .siteNav .navCta {
    background: linear-gradient(135deg, rgba(217,135,158,.42), rgba(217,135,158,.28));
    border-color: rgba(217,135,158,.85);
    color: #fff;
    font-weight: 500;
    box-shadow: 0 6px 16px rgba(217,135,158,.22);
  }
  .hibiki-v2 .siteNav .navCta:hover {
    background: linear-gradient(135deg, rgba(217,135,158,.62), rgba(217,135,158,.45));
    border-color: #ffb0c3;
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(217,135,158,.35);
  }
  /* ========== Hamburger toggle (checkbox trick、JS 不要) ==========
   Desktop: 非表示、nav は横並び。Mobile: hamburger 表示、nav は overlay 展開 */
.hibiki-v2 .v2NavCheck { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; }
.hibiki-v2 .v2NavToggle { display: none; }

/* ========== 中間幅 (901px-1440px): chip サイズを圧縮して 1 行に確実収める ========== */
@media (min-width: 901px) and (max-width: 1440px) {
  .hibiki-v2 .siteHeader { padding: 14px 20px; }
  .hibiki-v2 .brand img { width: 150px; }
  .hibiki-v2 .siteNav { gap: 5px; font-size: 11px; }
  .hibiki-v2 .siteNav a,
  .hibiki-v2 .siteNav .navDrop summary { padding: 7px 12px; letter-spacing: .04em; }
}
/* ========== 万一 wrap した際も content が隠れないよう header は overflow visible ========== */
.hibiki-v2 .siteHeader { overflow: visible; }

/* ========== Mobile / 狭幅 (≤900px): hamburger 表示 ========== */
@media (max-width: 900px) {
  .hibiki-v2 .siteHeader {
    padding: 14px 18px;
    /* flex-wrap で brand + toggle を 1 行、nav が checked 時に 2 行目 */
    flex-wrap: wrap;
    gap: 0;
    align-items: center;
    justify-content: space-between;
  }
  .hibiki-v2 .brand img { width: 150px; }

  /* Hamburger button (3 lines → X on open) */
  .hibiki-v2 .v2NavToggle {
    display: flex; flex-direction: column; justify-content: space-between;
    width: 32px; height: 22px;
    cursor: pointer; order: 2;
    padding: 0; margin: 0;
    background: transparent; border: 0;
  }
  .hibiki-v2 .v2NavToggle span {
    display: block; width: 100%; height: 2px;
    background: #fff8e8; border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease;
  }
  .hibiki-v2 .v2NavCheck:checked ~ .v2NavToggle span:nth-child(1) {
    transform: translateY(10px) rotate(45deg);
  }
  .hibiki-v2 .v2NavCheck:checked ~ .v2NavToggle span:nth-child(2) { opacity: 0; }
  .hibiki-v2 .v2NavCheck:checked ~ .v2NavToggle span:nth-child(3) {
    transform: translateY(-10px) rotate(-45deg);
  }

  /* Mobile nav: 初期は畳んでゼロ高さ、checked で expand */
  .hibiki-v2 .siteNav {
    order: 3; width: 100%;
    display: flex; flex-direction: column; flex-wrap: nowrap;
    align-items: stretch; justify-content: flex-start;
    gap: 8px;
    max-height: 0; overflow: hidden;
    padding: 0;
    transition: max-height .35s ease, padding .35s ease, margin-top .35s ease;
  }
  .hibiki-v2 .v2NavCheck:checked ~ .siteNav {
    max-height: 75vh; overflow-y: auto;
    padding: 8px 0 4px;
    margin-top: 12px;
    border-top: 1px solid rgba(255,255,255,.14);
  }
  /* 展開時の各 chip は fluid 幅、左寄せテキスト */
  .hibiki-v2 .siteNav a,
  .hibiki-v2 .siteNav .navDrop summary {
    display: block; width: 100%; text-align: center;
    padding: 12px 16px; font-size: 13px;
  }
  .hibiki-v2 .siteNav .navDrop { width: 100%; }
  .hibiki-v2 .siteNav .navDropMenu {
    position: static; transform: none; opacity: 1; pointer-events: auto;
    margin: 6px 0 0; min-width: 0; background: rgba(15,12,26,.5);
    border-color: rgba(244,217,168,.14);
  }
  .hibiki-v2 .siteNav .navDrop:not([open]) .navDropMenu { display: none; }
  .hibiki-v2 .siteNav .navDrop summary::after { margin-left: auto; }

  /* fixed header 分の余白 (mobile: header は brand + toggle のみで低い) */
  body.hibiki-v2, body.hibiki-v2-inner { padding-top: calc(66px + var(--v2-banner-height)); }
}
@media (max-width: 480px) {
  .hibiki-v2 .siteHeader { padding: 12px 14px; }
  .hibiki-v2 .brand img { width: 130px; }
  .hibiki-v2 .siteNav a,
  .hibiki-v2 .siteNav .navDrop summary { font-size: 12.5px; padding: 11px 14px; }
  body.hibiki-v2, body.hibiki-v2-inner { padding-top: calc(58px + var(--v2-banner-height)); }
}

  .hibiki-v2 .hero {
    position: relative; z-index: 2; min-height: 640px;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 90px 24px 120px;
  }
  .hibiki-v2 .eyebrow, .hibiki-v2 .sectionKicker {
    margin: 0 0 24px; font-family: var(--hv2-latin); font-size: 10px; font-weight: 500;
    letter-spacing: .38em; text-transform: uppercase;
  }
  .hibiki-v2 .hero .eyebrow { color: #e4c4a3; }
  .hibiki-v2 .hero h1 {
    margin: 0; font-family: var(--hv2-serif);
    font-size: clamp(38px, 6.2vw, 78px); font-weight: 400;
    line-height: 1.45; letter-spacing: .08em;
    text-shadow: 0 4px 35px rgba(0,0,0,.35); color: inherit;
  }
  .hibiki-v2 .hero h1 span { color: #fff8f2; }
  .hibiki-v2 .heroLead {
    margin: 30px 0 0; font-family: var(--hv2-serif);
    font-size: clamp(14px, 1.4vw, 17px); line-height: 2.2; letter-spacing: .08em;
    color: rgba(255,255,255,.78);
  }
  .hibiki-v2 .heroCta {
    margin-top: 42px; min-width: 320px; padding: 15px 24px;
    display: flex; justify-content: center; gap: 22px; text-decoration: none;
    border: 1px solid rgba(255,255,255,.5); border-radius: 999px;
    background: rgba(9,8,20,.22); backdrop-filter: blur(14px);
    font-size: 13px; letter-spacing: .14em;
    transition: background .25s, transform .25s;
  }
  .hibiki-v2 .heroCta:hover { background: rgba(255,255,255,.12); transform: translateY(-2px); }

  .hibiki-v2 .soundStage {
    position: relative; z-index: 3;
    width: min(820px, calc(100% - 40px)); margin: 0 auto;
    padding: 70px clamp(24px, 7vw, 78px) 64px; text-align: center;
    border: 1px solid rgba(236,206,218,.26); border-radius: 42px;
    /* 透過 50% (galaxy が glass 越しに見える) — 旧: .78/.88 (opaque) */
    background: linear-gradient(155deg, rgba(16,14,28,.44), rgba(6,6,15,.58));
    box-shadow: 0 35px 100px rgba(0,0,0,.38), inset 0 1px rgba(255,255,255,.12);
    backdrop-filter: blur(18px);
    /* form spotlight 用: lit 時に box-shadow/border が滑らかに brightening */
    transition: box-shadow 900ms ease, border-color 900ms ease;
  }
  /* form spotlight (2026-08-07): body.hv2-form-lit で soundStage を bright cream glow で照らす。
     hibiki-v2-form-spotlight.js が IntersectionObserver で form の可視性検出し class 付与。
     2026-08-08: hv2-form-lit-generated (「響きをひらく」押下後) も同じ baseline glow を
     受けるように OR selector 化。さらに追加 rule で brightest tier に昇格。 */
  .hibiki-v2.hv2-form-lit .soundStage,
  .hibiki-v2.hv2-form-lit-generated .soundStage {
    border-color: rgba(255, 250, 240, .95);
    background: linear-gradient(155deg, rgba(70, 55, 45, .55), rgba(50, 40, 35, .68));
    box-shadow:
      0 35px 100px rgba(0, 0, 0, .38),
      0 0 200px rgba(255, 250, 240, .95),
      0 0 380px rgba(244, 217, 168, .65),
      inset 0 0 60px rgba(255, 248, 232, .45),
      inset 0 1px rgba(255, 255, 255, .55);
  }
  .hibiki-v2 .nameFormRow { transition: box-shadow 900ms ease, border-color 900ms ease; }
  .hibiki-v2.hv2-form-lit .nameFormRow,
  .hibiki-v2.hv2-form-lit-generated .nameFormRow {
    border-color: rgba(255, 250, 240, 1);
    box-shadow:
      0 0 120px rgba(255, 250, 240, 1),
      0 0 60px rgba(244, 217, 168, .85),
      0 0 30px rgba(255, 248, 232, .9),
      0 10px 28px rgba(0, 0, 0, .35);
  }
  /* form 周辺エリアだけ hero 背景に強い bright halo を焼き付ける (soundStage 外側にも波及) */
  .hibiki-v2 .hero { position: relative; }
  .hibiki-v2 .hero::after {
    content: ""; position: absolute; inset: 0;
    background: radial-gradient(ellipse 90% 55% at 50% 75%,
      rgba(255, 248, 232, .38) 0%,
      rgba(244, 217, 168, .18) 30%,
      transparent 60%);
    opacity: 0; pointer-events: none;
    transition: opacity 900ms ease;
    z-index: 1;
  }
  .hibiki-v2.hv2-form-lit .hero::after,
  .hibiki-v2.hv2-form-lit-generated .hero::after { opacity: 1; }

  /* ─── Brightest tier: hv2-form-lit-generated (「響きをひらく」押下後、永続) ───
     baseline の上に box-shadow / inset をさらに強化。scroll しても消えない。 */
  .hibiki-v2.hv2-form-lit-generated .soundStage {
    border-color: rgba(255, 252, 244, 1);
    box-shadow:
      0 35px 100px rgba(0, 0, 0, .38),
      0 0 280px rgba(255, 252, 244, 1),
      0 0 500px rgba(244, 217, 168, .85),
      inset 0 0 90px rgba(255, 248, 232, .65),
      inset 0 1px rgba(255, 255, 255, .75);
  }
  .hibiki-v2.hv2-form-lit-generated .nameFormRow {
    box-shadow:
      0 0 180px rgba(255, 252, 244, 1),
      0 0 90px rgba(244, 217, 168, 1),
      0 0 45px rgba(255, 248, 232, 1),
      0 10px 28px rgba(0, 0, 0, .35);
  }
  .hibiki-v2.hv2-form-lit-generated .hero::after {
    background: radial-gradient(ellipse 95% 60% at 50% 75%,
      rgba(255, 250, 235, .58) 0%,
      rgba(244, 217, 168, .30) 30%,
      transparent 65%);
  }
  /* prefers-reduced-motion 尊重: transition 無効化 (急変を避ける) */
  @media (prefers-reduced-motion: reduce) {
    .hibiki-v2 .soundStage, .hibiki-v2 .nameFormRow { transition: none; }
  }
  /* 旧 index.html の .tn-kata-* ::before pseudo (可読性用 wash) は v2 soundStage 内で不要 (二重背景で可読性悪化) */
  .hibiki-v2 .tn-kata-chars::before,
  .hibiki-v2 .tn-kata-label::before,
  .hibiki-v2 .tn-section::before,
  .hibiki-v2 .tn-progress::before,
  .hibiki-v2 .tn-play-count::before,
  .hibiki-v2 .tn-kata-chars::after,
  .hibiki-v2 .tn-kata-label::after,
  .hibiki-v2 .tn-section::after,
  .hibiki-v2 .tn-progress::after,
  .hibiki-v2 .tn-play-count::after {
    display: none !important; content: none !important;
    background: none !important;
  }
  /* text 可読性強化 (soundStage 内の kata-chars / label / section / progress / play-count) */
  .hibiki-v2 .tn-kata-chars,
  .hibiki-v2 .tn-kata-label,
  .hibiki-v2 .modeLabel,
  .hibiki-v2 .tn-progress,
  .hibiki-v2 .tn-play-count {
    position: relative;
    background: transparent !important;
    text-shadow: 0 1px 2px rgba(0,0,0,.6), 0 0 8px rgba(0,0,0,.4);
  }
  .hibiki-v2 .tn-play-count { color: rgba(255,255,255,.72); font-family: var(--hv2-latin); font-size: 11px; letter-spacing: .16em; text-align: center; margin: 14px 0 0; padding: 8px 16px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; display: inline-block; }
  .hibiki-v2 .tn-play-count:empty { display: none; }
  .hibiki-v2 .soundStageIntro > p, .hibiki-v2 .signature > .tn-sig-owner-label, .hibiki-v2 .modeLabel {
    font-family: var(--hv2-latin); font-size: 9px; letter-spacing: .34em; color: #d99bb1;
  }
  .hibiki-v2 .soundStageIntro h2 {
    margin: 8px 0; font-family: var(--hv2-serif);
    font-size: clamp(28px, 5vw, 44px); font-weight: 400; letter-spacing: .12em;
  }
  .hibiki-v2 .soundStageIntro > span { font-size: 10px; letter-spacing: .12em; color: rgba(255,255,255,.48); }

  .hibiki-v2 .nameForm { margin: 34px auto 0; max-width: 500px; text-align: left; display: block; padding: 0; }
  /* 案 D (2026-08-07): 「まずはここから」ゴールドバッジ + ↓矢印 で視線を form へ誘導 */
  .hibiki-v2 .nameForm .startBadgeWrap { text-align: center; margin-bottom: 6px; }
  .hibiki-v2 .nameForm .startBadge {
    display: inline-block; padding: 6px 14px 5px;
    background: linear-gradient(135deg, #f4d9a8, #e8c88a);
    color: #3a2810; font-size: 10px; font-weight: 600; letter-spacing: .24em;
    border-radius: 999px; box-shadow: 0 4px 14px rgba(244,217,168,.35);
  }
  .hibiki-v2 .nameForm .arrowDown {
    text-align: center; color: #f4d9a8; font-size: 20px;
    margin: 6px 0 4px; animation: hv2-arrowBounce 2s ease-in-out infinite;
  }
  @keyframes hv2-arrowBounce {
    0%,100% { transform: translateY(0); opacity: .7; }
    50%     { transform: translateY(4px); opacity: 1; }
  }
  .hibiki-v2 .nameForm label { display: block; margin: 0 0 8px 0; font-size: 10px; letter-spacing: .16em; color: #f4d9a8; font-weight: 500; text-align: center; }
  /* 案 D: gold 枠 + gold glow で form を目立たせる (旧: rgba(255,255,255,.23) border / .07 bg) */
  .hibiki-v2 .nameFormRow {
    display: flex; gap: 8px; padding: 5px;
    border: 1.5px solid rgba(244, 217, 168, .65); border-radius: 22px;
    background: linear-gradient(135deg, rgba(244,217,168,.10), rgba(244,217,168,.04));
    box-shadow: 0 0 32px rgba(244, 217, 168, .25), 0 10px 28px rgba(0, 0, 0, .35);
  }
  .hibiki-v2 .nameFormRow input {
    min-width: 0; flex: 1; border: 0; outline: 0;
    background: transparent; color: #fff8e8; padding: 8px 14px; letter-spacing: .1em; font-size: 14px;
  }
  .hibiki-v2 .nameFormRow input::placeholder { color: rgba(255, 235, 190, .60); }
  .hibiki-v2 .nameFormActions { display: flex; gap: 10px; margin-top: 12px; justify-content: center; }
  .hibiki-v2 .nameFormActions button {
    border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
    padding: 10px 22px; background: #f4ece8; color: #4c3541; cursor: pointer;
    font-size: 11px; letter-spacing: .12em; transition: opacity .2s;
  }
  .hibiki-v2 .nameFormActions button:disabled { opacity: .35; cursor: default; }
  .hibiki-v2 .nameFormActions .tn-skip-btn { background: transparent; color: rgba(255,255,255,.65); }
  /* 案 D: primary CTA も gold gradient で form 全体と統一 */
  .hibiki-v2 .nameFormActions .tn-gen-btn {
    background: linear-gradient(135deg, #f4d9a8, #d6b880);
    border-color: rgba(244,217,168,.9);
    color: #3a2810; font-weight: 600;
    box-shadow: 0 6px 20px rgba(244,217,168,.42);
    padding: 12px 26px; font-size: 12px;
  }

  /* ─── Cockpit HUD: astronomical telemetry (2026-08-08) ─────────────
     再生時のみ表示 (body.playing がある時)、右下寄せ、mechanical 風 monospace。
     personalParams.astroCtx を Live で読み出して数値表示。 */
  .hibiki-v2 .astroHud {
    /* 2026-08-08: user 判断で一旦オフ。再表示は下 display: none の 1 行を削除するだけ。 */
    display: none;
    position: absolute;
    right: 18px; bottom: 18px;
    padding: 10px 14px 10px 14px;
    min-width: 200px;
    background: linear-gradient(160deg,
      rgba(6, 12, 8, .82),
      rgba(4, 10, 6, .68));
    border: 1px solid rgba(140, 220, 170, .35);
    border-radius: 6px;
    font-family: "SFMono-Regular", "Menlo", "Consolas", monospace;
    color: #6dff9e;
    text-shadow: 0 0 4px rgba(109, 255, 158, .5);
    box-shadow:
      0 4px 20px rgba(0, 0, 0, .5),
      inset 0 0 20px rgba(109, 255, 158, .08),
      inset 0 0 1px rgba(140, 220, 170, .4);
    opacity: 0;
    pointer-events: none;
    transition: opacity .3s;
    z-index: 5;
  }
  .hibiki-v2.playing .astroHud { opacity: 1; }
  .hibiki-v2 .astroHud-title {
    font-size: 9px; letter-spacing: .28em; font-weight: 500;
    color: #8be8a8;
    margin-bottom: 6px; padding-bottom: 4px;
    border-bottom: 1px dashed rgba(140, 220, 170, .3);
  }
  .hibiki-v2 .astroHud-row {
    display: flex; justify-content: space-between; align-items: baseline;
    font-size: 10px; line-height: 1.7;
    letter-spacing: .04em;
    font-variant-numeric: tabular-nums;
  }
  .hibiki-v2 .astroHud-k {
    color: rgba(139, 232, 168, .65);
    letter-spacing: .1em;
  }
  .hibiki-v2 .astroHud-v {
    color: #b0ffc7;
    font-weight: 500;
  }
  .hibiki-v2 .astroHud-blink {
    position: absolute; top: 8px; right: 10px;
    width: 6px; height: 6px; border-radius: 50%;
    background: #6dff9e; box-shadow: 0 0 6px #6dff9e;
    animation: hv2-hudBlink 1.8s ease-in-out infinite;
  }
  @keyframes hv2-hudBlink {
    0%, 100% { opacity: 1; }
    50% { opacity: .25; }
  }
  @media (max-width: 620px) {
    .hibiki-v2 .astroHud {
      right: 10px; bottom: 10px;
      min-width: 168px; padding: 8px 10px;
    }
    .hibiki-v2 .astroHud-title { font-size: 8px; }
    .hibiki-v2 .astroHud-row { font-size: 9px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .hibiki-v2 .astroHud-blink { animation: none; }
  }

  /* Astronomical explanation (details/summary、控えめだが読める) */
  .hibiki-v2 .astroExplain {
    max-width: 640px; margin: 26px auto 0;
    background: rgba(20, 18, 30, .38);
    border: 1px solid rgba(244, 217, 168, .22);
    border-radius: 14px;
    padding: 0;
    overflow: hidden;
    transition: border-color .2s;
  }
  .hibiki-v2 .astroExplain[open] { border-color: rgba(244, 217, 168, .45); }
  .hibiki-v2 .astroExplain > summary {
    cursor: pointer; list-style: none;
    padding: 14px 20px;
    font-size: 12px; letter-spacing: .12em;
    color: #f4d9a8; font-weight: 500;
    display: flex; align-items: center; gap: 8px;
    user-select: none;
  }
  .hibiki-v2 .astroExplain > summary::-webkit-details-marker { display: none; }
  .hibiki-v2 .astroExplain > summary::before {
    content: '⟢'; color: #f4d9a8; font-size: 14px;
    transition: transform .3s;
  }
  .hibiki-v2 .astroExplain[open] > summary::before { transform: rotate(90deg); }
  .hibiki-v2 .astroExplain > summary:hover { color: #fff8e8; }
  .hibiki-v2 .astroExplainBody {
    padding: 6px 24px 22px;
    color: rgba(255,255,255,.78);
    font-size: 13px; line-height: 1.9; letter-spacing: .04em;
    text-align: left;
  }
  .hibiki-v2 .astroLead { margin: 0 0 18px; }
  .hibiki-v2 .astroLead strong { color: #f4d9a8; }
  .hibiki-v2 .astroDl { margin: 0; }
  .hibiki-v2 .astroDl dt {
    margin: 14px 0 4px;
    font-size: 12px; font-weight: 600;
    color: #f4d9a8; letter-spacing: .06em;
  }
  .hibiki-v2 .astroDl dd {
    margin: 0 0 6px 0;
    color: rgba(255,255,255,.72);
    font-size: 12px; letter-spacing: .04em; line-height: 1.85;
  }
  .hibiki-v2 .astroDl dd code {
    font-family: "SFMono-Regular", Consolas, monospace;
    font-size: 11px; padding: 1px 6px;
    background: rgba(244,217,168,.12); color: #f4d9a8;
    border-radius: 4px;
  }
  .hibiki-v2 .astroDisclaimer {
    margin: 20px 0 0; padding-top: 14px;
    border-top: 1px solid rgba(255,255,255,.12);
    font-size: 10px; color: rgba(255,255,255,.5);
    letter-spacing: .06em; line-height: 1.8;
  }

  /* Preset note (2026-08-08): スペシャルヒビキで名前未入力時の説明文 */
  .hibiki-v2 .nameForm .presetNote {
    max-width: 460px; margin: 14px auto 0;
    padding: 10px 16px;
    background: rgba(20, 18, 30, .35);
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 10px;
    font-size: 11px; color: rgba(255, 255, 255, .72);
    letter-spacing: .06em; line-height: 1.7; text-align: center;
  }
  .hibiki-v2 .nameForm .presetNote strong {
    color: #f4d9a8; font-weight: 500;
  }

  /* Signature (personal 生成後) */
  .hibiki-v2 .signature { display: none; margin: 32px 0 28px; text-align: center; }
  .hibiki-v2 .signature .tn-sig-owner-label { display: block; }
  .hibiki-v2 .signature .tn-sig-kata { display: flex; justify-content: center; gap: 6px; margin: 14px 0 6px; flex-wrap: wrap; }
  .hibiki-v2 .signature .tn-sig-kata .tn-sig-kata-cell { width: 34px; }
  .hibiki-v2 .signature .tn-sig-kata img { width: 30px; height: 30px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(214,171,91,.55)); }
  /* 2026-08-13: 合体カタカムナ文字 (SVG) — name char セルに続けて末尾表示 */
  .hibiki-v2 .signature .tn-sig-kata .tn-sig-kata-fusion { width: auto; min-width: 40px; padding: 0 4px; }
  .hibiki-v2 .signature .tn-sig-kata .tn-sig-kata-fusion svg { width: 30px; height: 30px; display: block; margin: 0 auto; filter: drop-shadow(0 0 6px rgba(214,171,91,.55)); }
  .hibiki-v2 .signature .tn-sig-kata .tn-sig-kata-fusion .kata-ruby { font-size: 7px; white-space: nowrap; }
  .hibiki-v2 .signature .tn-sig-kata .kata-ruby { display: block; text-align: center; font-size: 8px; color: #cfac66; }
  /* 2026-08-08 fix: 左右 margin 0 → auto (fit-content pill をセンター寄せ、旧: 左寄せ bug) */
  .hibiki-v2 .signature .tn-sig-owner-name { margin: 10px auto 3px; font-family: var(--hv2-serif); font-size: 20px; letter-spacing: .22em; color: #fff; }
  .hibiki-v2 .signature .tn-sig-owner-birth { color: rgba(255,255,255,.55); font-size: 12px; letter-spacing: .12em; }
  .hibiki-v2 .signature .tn-sig-hint { color: rgba(255,255,255,.42); font-size: 10px; letter-spacing: .16em; margin: 10px 0; }
  .hibiki-v2 .signature .tn-clear-btn {
    border: 1px solid rgba(255,255,255,.25); background: transparent; color: rgba(255,255,255,.55);
    border-radius: 999px; padding: 6px 16px; font-size: 10px; cursor: pointer;
  }

  /* Mode Tabs (朝昼夜) — from_gpt style with data-track compatibility */
  .hibiki-v2 .modeTabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; max-width: 500px; margin: 34px auto 30px; }
  .hibiki-v2 .modeTabs .tn-preset {
    position: relative; padding: 14px 16px;
    display: flex; align-items: center; justify-content: center; gap: 10px;
    color: rgba(255,255,255,.6);
    border: 1px solid rgba(255,255,255,.16); border-radius: 15px;
    background: rgba(255,255,255,.045); cursor: pointer;
    transition: .25s ease;
  }
  .hibiki-v2 .modeTabs .tn-preset span { font-family: var(--hv2-serif); font-size: 17px; }
  .hibiki-v2 .modeTabs .tn-preset small { font-size: 10px; letter-spacing: .1em; }
  .hibiki-v2 .modeTabs .tn-preset.active {
    color: #fff;
    border-color: #ef9eb3;
    box-shadow: inset 0 0 30px rgba(239,158,179,.16), 0 0 20px rgba(239,158,179,.13);
  }
  .hibiki-v2 .modeTabs .tn-preset[data-track="noon"].active { border-color: #a9c5df; box-shadow: inset 0 0 30px rgba(169,197,223,.16), 0 0 20px rgba(169,197,223,.13); }
  .hibiki-v2 .modeTabs .tn-preset[data-track="night"].active { border-color: #c4b1d6; box-shadow: inset 0 0 30px rgba(196,177,214,.16), 0 0 20px rgba(196,177,214,.13); }

  /* Earth button + Futomani spiral */
  .hibiki-v2 .earthWrap { position: relative; width: 280px; height: 280px; margin: 5px auto 0; display: grid; place-items: center; }
  .hibiki-v2 .orbit { position: absolute; inset: 22px; border: 1px solid rgba(179,203,239,.18); border-radius: 50%; pointer-events: none; }
  .hibiki-v2 .orbit.orbitTwo { inset: 47px 15px; transform: rotate(62deg); }
  .hibiki-v2 .earthWrap.isPlaying .orbitOne { animation: hv2-orbitSpin 8s linear infinite; }
  .hibiki-v2 .earthWrap.isPlaying .orbitTwo { animation: hv2-orbitSpinTwo 10s linear infinite reverse; }
  @keyframes hv2-orbitSpin { to { transform: rotate(360deg); } }
  @keyframes hv2-orbitSpinTwo { from { transform: rotate(62deg); } to { transform: rotate(422deg); } }
  .hibiki-v2 .tn-vis-v2 {
    position: relative; z-index: 2;
    width: 230px; height: 230px;
    display: grid; place-items: center;
    background: transparent !important;
  }
  .hibiki-v2 .tn-vis-v2::before, .hibiki-v2 .tn-vis-v2::after { display: none !important; content: none !important; }
  .hibiki-v2 .earthButton {
    position: relative; z-index: 3;
    width: 100%; height: 100%; padding: 0;
    border: 0; background: transparent; cursor: pointer;
    transition: transform .35s, filter .35s;
    /* orbital-switch: 朝=sun / 夜=moon (SVG) 時に --orbital-bg で上書き。
       未セット時は fallback で earth PNG */
    background-image: var(--orbital-bg, url('line-assets/hibiki-earth-button.png')) !important;
    background-size: contain; background-repeat: no-repeat; background-position: center;
  }
  .hibiki-v2 .earthButton img { display: none; }
  .hibiki-v2 .earthButton:hover { transform: scale(1.025); filter: brightness(1.12); }
  .hibiki-v2 .earthButton .sp-label { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); font-size: 9px; letter-spacing: .2em; color: rgba(255,255,255,.74); }
  .hibiki-v2 .earthWrap.isPlaying .earthButton { animation: hv2-earthPulse 3.2s ease-in-out infinite; }

  /* orbital-switch: 白い ▶ overlay (少し浮いた感じ)。
     地球の場合は焼き込み三角の上に乗る (ユーザー承認済)。 */
  .hibiki-v2 .earthButton::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    transform: translate(-32%, -50%);
    border-style: solid;
    border-width: 22px 0 22px 36px;
    border-color: transparent transparent transparent rgba(255,255,255,0.96);
    filter:
      drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45))
      drop-shadow(0 0 10px rgba(255, 255, 255, 0.28));
    pointer-events: none;
    transition: transform .3s ease, opacity .3s ease, filter .3s ease;
  }
  .hibiki-v2 .earthButton:hover::after {
    transform: translate(-30%, -50%) scale(1.06);
    filter:
      drop-shadow(0 8px 18px rgba(0, 0, 0, 0.5))
      drop-shadow(0 0 14px rgba(255, 255, 255, 0.4));
  }
  /* 再生中は控えめに (浮遊感は維持しつつ主張を弱める) */
  .hibiki-v2 .earthWrap.isPlaying .earthButton::after {
    opacity: 0.35;
    transform: translate(-32%, -50%) scale(0.9);
  }
  @keyframes hv2-earthPulse { 50% { transform: scale(1.045); filter: brightness(1.18) drop-shadow(0 0 25px rgba(96,149,255,.45)); } }
  /* kataCircle overlay (buildKataCircle 出力) */
  .hibiki-v2 .tn-kata-circle-wrap { position: absolute; inset: 0; z-index: 4; pointer-events: none; display: block !important; }

  .hibiki-v2 .modeLabel { margin: 22px 0 12px; color: rgba(255,255,255,.64); font-family: var(--hv2-latin); font-size: 9px; letter-spacing: .34em; text-align: center; }
  .hibiki-v2 .progress { max-width: 500px; margin: 0 auto; }
  .hibiki-v2 .progressTrack { height: 1px; background: rgba(255,255,255,.18); display: block; }
  .hibiki-v2 .progressTrack .tn-progress-fill { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #d7889f, #ddd4ef); transition: width .1s linear; }
  .hibiki-v2 .progressMeta { display: flex; justify-content: space-between; margin-top: 11px; font-family: var(--hv2-latin); font-size: 9px; letter-spacing: .15em; color: rgba(255,255,255,.42); }

  /* kata chars row (buildKataChars 出力) — soundStage 内 */
  .hibiki-v2 .tn-kata-chars { display: flex; justify-content: center; gap: 5px; margin: 24px 0 8px; flex-wrap: wrap; }
  .hibiki-v2 .tn-kata-chars .tn-kata-cell { width: 32px; display: flex; flex-direction: column; align-items: center; }
  .hibiki-v2 .tn-kata-chars .tn-kata-cell img { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(214,171,91,.55)); }
  .hibiki-v2 .tn-kata-chars .kata-ruby { display: block; font-size: 8px; color: #cfac66; }
  .hibiki-v2 .tn-kata-label { text-align: center; font-family: var(--hv2-latin); font-size: 9px; letter-spacing: .32em; color: rgba(255,255,255,.72); margin: 8px 0 20px; }

  .hibiki-v2 .descent { position: relative; z-index: 2; height: 290px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; }
  .hibiki-v2 .descent span { display: block; width: 1px; height: 70px; background: linear-gradient(transparent, rgba(255,255,255,.6)); }
  .hibiki-v2 .descent span:last-child { background: linear-gradient(rgba(255,255,255,.6), transparent); }
  .hibiki-v2 .descent p { margin: 0; font-family: var(--hv2-latin); font-size: 8px; letter-spacing: .4em; color: rgba(255,255,255,.48); writing-mode: vertical-rl; }

  /* ===== Depth (paper white 世界) ===== */
  /* 2026-08-07: 旧 opaque paper #f5f0e9 → alpha .92 (galaxy が 8% 透けて出る) */
  .hibiki-v2 .depth { position: relative; background: rgba(245, 240, 233, .92); color: var(--hv2-ink); }
  .hibiki-v2 .depth::before {
    content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .18;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.78' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
  }
  .hibiki-v2 .sectionShell { position: relative; z-index: 1; width: min(1120px, calc(100% - 64px)); margin: 0 auto; }
  .hibiki-v2 .sectionKicker { color: #9a7980; }
  .hibiki-v2 .depthOpening { padding: 180px 0 170px; }
  .hibiki-v2 .depthOpening > h2, .hibiki-v2 .finalCta h2 {
    margin: 0; font-family: var(--hv2-serif); font-size: clamp(38px, 6vw, 72px); font-weight: 400; line-height: 1.55; letter-spacing: .07em;
  }
  .hibiki-v2 .openingGrid { margin-top: 90px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 10vw; align-items: center; }
  .hibiki-v2 .openingCopy { font-family: var(--hv2-serif); font-size: 16px; line-height: 2.3; letter-spacing: .04em; }
  .hibiki-v2 .openingCopy p { margin: 0 0 30px; }
  .hibiki-v2 .lensScene { position: relative; min-height: 500px; display: flex; flex-direction: column; justify-content: center; align-items: center; background: linear-gradient(145deg, #d8c8bf, #9a8990 50%, #363440); overflow: hidden; box-shadow: 0 35px 65px rgba(57,47,52,.18); }
  .hibiki-v2 .lensScene::before { content: ""; position: absolute; inset: 0; background: url("galaxy-bg.jpg") center / cover; filter: sepia(.32) saturate(.55) blur(8px); opacity: .68; transform: scale(1.08); }
  .hibiki-v2 .lensScene::after { content: ""; position: absolute; inset: 0; background: linear-gradient(155deg, rgba(246,234,221,.44), transparent 42%, rgba(21,19,29,.46)); }
  .hibiki-v2 .lensOuter { position: relative; z-index: 2; width: 290px; height: 290px; padding: 20px; border: 1px solid rgba(255,255,255,.62); border-radius: 50%; box-shadow: 0 0 0 28px rgba(255,255,255,.05), 0 0 90px rgba(255,231,199,.28); }
  .hibiki-v2 .lensInner { width: 100%; height: 100%; display: grid; place-items: center; border: 1px solid rgba(255,255,255,.4); border-radius: 50%; background: url("galaxy-bg.jpg") center / cover; filter: contrast(1.05) saturate(.7); }
  .hibiki-v2 .lensInner span { font-family: var(--hv2-latin); font-size: 8px; letter-spacing: .3em; color: #fff; text-shadow: 0 1px 8px #000; }
  .hibiki-v2 .lensScene > p { position: relative; z-index: 2; margin: 35px 0 0; text-align: center; font-family: var(--hv2-serif); font-size: 13px; letter-spacing: .1em; color: rgba(255,255,255,.84); }
  .hibiki-v2 .frameCorner { position: absolute; z-index: 3; width: 34px; height: 34px; border-color: rgba(255,255,255,.7); }
  .hibiki-v2 .cornerA { top: 28px; left: 28px; border-top: 1px solid; border-left: 1px solid; }
  .hibiki-v2 .cornerB { right: 28px; bottom: 28px; border-right: 1px solid; border-bottom: 1px solid; }

  /* 2026-08-07: 旧 opaque #28242e → alpha .82 (galaxy が 18% 透けて出る、暗い section なので少し多めに) */
  .hibiki-v2 .filterSection { position: relative; z-index: 1; padding: 170px 0; color: #f6f0eb; background: rgba(40, 36, 46, .82); overflow: hidden; }
  .hibiki-v2 .filterSection::before { content: ""; position: absolute; inset: 0; opacity: .2; background: radial-gradient(circle at 78% 45%, #c28ca7, transparent 28%), url("galaxy-bg.jpg") center / cover; mix-blend-mode: screen; }
  .hibiki-v2 .filterGrid { display: grid; grid-template-columns: .8fr 1.2fr; gap: 8vw; align-items: center; }
  .hibiki-v2 .filterCopy h3, .hibiki-v2 .processHeading h3, .hibiki-v2 .nameContent > h3, .hibiki-v2 .reframeSection > h3 {
    margin: 0; font-family: var(--hv2-serif); font-size: clamp(34px, 4.7vw, 58px); font-weight: 400; line-height: 1.6; letter-spacing: .06em;
  }
  .hibiki-v2 .filterCopy > p:last-child { margin: 35px 0 0; font-family: var(--hv2-serif); font-size: 14px; line-height: 2.2; color: rgba(255,255,255,.65); }
  .hibiki-v2 .filterStack { position: relative; min-height: 500px; perspective: 1200px; }
  .hibiki-v2 .filterCard { position: absolute; width: min(440px, 78%); height: 300px; padding: 35px; display: flex; flex-direction: column; justify-content: space-between; border: 1px solid rgba(255,255,255,.3); border-radius: 4px; backdrop-filter: blur(14px); box-shadow: 0 30px 60px rgba(0,0,0,.25); }
  .hibiki-v2 .filterCard small { font-family: var(--hv2-latin); font-size: 8px; letter-spacing: .3em; opacity: .65; }
  .hibiki-v2 .filterCard p { margin: 0; font-family: var(--hv2-serif); font-size: 24px; letter-spacing: .08em; }
  .hibiki-v2 .cardBack { top: 10px; right: 0; background: rgba(161,159,190,.18); transform: rotate(7deg); }
  .hibiki-v2 .cardMiddle { top: 90px; left: 11%; background: rgba(203,148,173,.16); transform: rotate(-5deg); }
  .hibiki-v2 .cardFront { top: 175px; right: 9%; background: rgba(232,220,213,.17); transform: rotate(2deg); }
  .hibiki-v2 .cardFront span { align-self: flex-end; font-size: 10px; letter-spacing: .18em; opacity: .68; }

  .hibiki-v2 .processSection { padding: 190px 0; }
  .hibiki-v2 .processHeading { display: flex; justify-content: space-between; align-items: flex-start; gap: 50px; }
  .hibiki-v2 .processHeading .sectionKicker { margin-top: 22px; }
  .hibiki-v2 .processList { margin-top: 110px; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid #cfc3ba; }
  .hibiki-v2 .processList article { padding: 54px 34px 0; border-right: 1px solid #cfc3ba; }
  .hibiki-v2 .processList article:first-child { padding-left: 0; }
  .hibiki-v2 .processList article:last-child { padding-right: 0; border-right: 0; }
  .hibiki-v2 .processVisual { position: relative; height: 190px; margin-bottom: 35px; display: grid; place-items: center; }
  .hibiki-v2 .filterVisual span { position: absolute; width: 130px; height: 94px; border: 1px solid #a7999c; background: rgba(255,255,255,.2); }
  .hibiki-v2 .filterVisual span:nth-child(1) { transform: translate(-25px,-18px) rotate(-7deg); }
  .hibiki-v2 .filterVisual span:nth-child(2) { transform: translate(18px,12px) rotate(4deg); }
  .hibiki-v2 .filterVisual span:nth-child(3) { transform: translate(0,0); border-color: #d0879c; }
  .hibiki-v2 .focusVisual span { width: 140px; height: 140px; border: 1px solid #ad9ba1; border-radius: 50%; box-shadow: 0 0 0 20px rgba(177,161,163,.08), 0 0 0 45px rgba(177,161,163,.05); }
  .hibiki-v2 .focusVisual i { position: absolute; width: 12px; height: 12px; border-radius: 50%; background: #c88b9b; box-shadow: 0 0 20px #c88b9b; }
  .hibiki-v2 .lightVisual::before { content: ""; width: 1px; height: 150px; background: linear-gradient(transparent, #b18a75, transparent); transform: rotate(28deg); }
  .hibiki-v2 .lightVisual span { position: absolute; width: 65px; height: 65px; border-radius: 50%; background: #fff7dc; filter: blur(6px); box-shadow: 0 0 55px 22px rgba(255,218,154,.48); }
  .hibiki-v2 .processNumber { margin: 0 0 8px; font-family: var(--hv2-latin); font-size: 11px; color: #ac8f91; }
  .hibiki-v2 .processEn { margin: 0 0 20px; font-family: var(--hv2-latin); font-size: 8px; letter-spacing: .26em; color: #9b8389; }
  .hibiki-v2 .processList h4 { margin: 0 0 18px; font-family: var(--hv2-serif); font-size: 20px; font-weight: 500; line-height: 1.7; }
  .hibiki-v2 .processList article > p:last-child { margin: 0; font-size: 13px; line-height: 2; color: var(--hv2-ink-soft); }

  /* 2026-08-07: 旧 opaque #0a0912 → alpha .78 (galaxy が 22% 透ける、既存 ::before galaxy .16 と重ねて多層感) */
  .hibiki-v2 .nameSection { position: relative; z-index: 1; padding: 190px 0 160px; overflow: hidden; background: rgba(10, 9, 18, .78); color: #f8f1eb; }
  .hibiki-v2 .nameSection::before { content: ""; position: absolute; inset: 0; background: url("galaxy-bg.jpg") center / cover; opacity: .16; }
  .hibiki-v2 .nameGlow { position: absolute; width: 700px; height: 700px; left: 50%; top: 170px; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(circle, rgba(240,189,202,.2), transparent 64%); filter: blur(12px); }
  .hibiki-v2 .nameContent { text-align: center; }
  .hibiki-v2 .nameContent > h3 { font-size: clamp(38px, 5.4vw, 66px); }
  .hibiki-v2 .nameLead { margin: 52px 0 0; font-family: var(--hv2-serif); font-size: clamp(16px, 2vw, 21px); line-height: 2.3; letter-spacing: .1em; color: rgba(255,255,255,.8); }
  .hibiki-v2 .reasonGrid { margin-top: 110px; display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(255,255,255,.16); text-align: left; }
  .hibiki-v2 .reasonGrid article { min-height: 300px; padding: 46px 40px; border-right: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.025); }
  .hibiki-v2 .reasonGrid article:last-child { border: 0; }
  .hibiki-v2 .reasonGrid span { font-family: var(--hv2-latin); font-size: 10px; color: #d796aa; }
  .hibiki-v2 .reasonGrid h4 { margin: 48px 0 22px; font-family: var(--hv2-serif); font-size: 19px; font-weight: 400; letter-spacing: .05em; }
  .hibiki-v2 .reasonGrid p { margin: 0; font-size: 12px; line-height: 2.1; color: rgba(255,255,255,.57); }
  .hibiki-v2 .principle { margin: 120px auto 0; max-width: 850px; padding: 70px; border-top: 1px solid rgba(255,255,255,.2); border-bottom: 1px solid rgba(255,255,255,.2); }
  .hibiki-v2 .principle > p { margin: 0 0 30px; font-size: 10px; letter-spacing: .2em; color: #d59bad; }
  .hibiki-v2 .principle blockquote { margin: 0; font-family: var(--hv2-serif); font-size: clamp(18px, 2.8vw, 28px); line-height: 2; letter-spacing: .08em; }
  .hibiki-v2 .principle > span { display: block; margin-top: 35px; font-size: 10px; color: rgba(255,255,255,.38); }

  /* 2026-08-07: 旧 opaque paper → alpha .92 (galaxy が 8% 透ける) */
  .hibiki-v2 .reframeSection { padding: 180px 0; text-align: center; background: rgba(245, 240, 233, .92); color: var(--hv2-ink); }
  .hibiki-v2 .reframeGrid { max-width: 850px; margin: 70px auto 95px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 35px; }
  .hibiki-v2 .reframeGrid p { margin: 0; padding: 28px; border: 1px solid #cfc3ba; font-family: var(--hv2-serif); font-size: 18px; }
  .hibiki-v2 .reframeGrid p:last-child { border-color: #cc92a2; background: rgba(224,186,194,.13); }
  .hibiki-v2 .reframeGrid span { color: #b4939d; }
  .hibiki-v2 .reframeSection > h3 { font-size: clamp(28px, 4.3vw, 48px); }

  .hibiki-v2 .finalCta { position: relative; z-index: 1; padding: 210px 24px 190px; text-align: center; overflow: hidden; background: #eee5dc; color: var(--hv2-ink); }
  .hibiki-v2 .finalRing { position: absolute; width: 760px; height: 760px; left: 50%; top: 50%; transform: translate(-50%,-50%); border: 1px solid rgba(175,135,145,.18); border-radius: 50%; pointer-events: none; }
  .hibiki-v2 .finalRing::before, .hibiki-v2 .finalRing::after { content: ""; position: absolute; border: 1px solid rgba(175,135,145,.13); border-radius: 50%; }
  .hibiki-v2 .finalRing::before { inset: 80px; }
  .hibiki-v2 .finalRing::after { inset: 170px; }
  .hibiki-v2 .finalRing span { position: absolute; inset: 270px; border-radius: 50%; background: rgba(255,249,239,.8); box-shadow: 0 0 100px 70px rgba(255,245,220,.62); }
  .hibiki-v2 .finalCta > *:not(.finalRing) { position: relative; z-index: 2; }
  .hibiki-v2 .finalCta h2 { font-size: clamp(38px, 5.7vw, 64px); }
  .hibiki-v2 .finalCta > p:not(.sectionKicker) { margin: 35px 0 0; font-family: var(--hv2-serif); font-size: 14px; letter-spacing: .08em; }
  .hibiki-v2 .finalCta > a { width: min(470px, 90%); margin: 55px auto 0; padding: 18px 26px; display: flex; justify-content: center; gap: 22px; border-radius: 999px; text-decoration: none; background: #2e2832; color: #fff; font-size: 13px; letter-spacing: .12em; box-shadow: 0 18px 35px rgba(48,37,45,.2); transition: transform .25s; }
  .hibiki-v2 .finalCta > a:hover { transform: translateY(-3px); }
  .hibiki-v2 .finalCta > small { display: block; margin-top: 18px; font-size: 9px; color: #887b80; }

  /* 2026-08-07: 旧 opaque #080710 → alpha .82 (galaxy が 18% 透ける) */
  .hibiki-v2 .siteFooter { position: relative; z-index: 2; padding: 65px 7vw 45px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; background: rgba(8, 7, 16, .82); color: rgba(255,255,255,.5); }
  .hibiki-v2 .siteFooter img { width: 170px; }
  .hibiki-v2 .siteFooter p { margin: 0; font-family: var(--hv2-serif); font-size: 11px; letter-spacing: .1em; text-align: center; }
  .hibiki-v2 .siteFooter > span { justify-self: end; font-family: var(--hv2-latin); font-size: 9px; letter-spacing: .2em; }

  @media (max-width: 900px) {
    /* 旧 rule: hamburger 実装前は mobile で nav リンクを CTA のみに絞っていた
       hamburger 導入後は全項目 overlay 表示するため無効化 (2026-08-06) */
    /* .hibiki-v2 .siteNav a:not(.navCta) { display: none; } */
    .hibiki-v2 .openingGrid, .hibiki-v2 .filterGrid { grid-template-columns: 1fr; gap: 80px; }
    .hibiki-v2 .processHeading { display: block; }
    .hibiki-v2 .processHeading .sectionKicker { margin-top: 0; }
    .hibiki-v2 .processList { grid-template-columns: 1fr; }
    .hibiki-v2 .processList article, .hibiki-v2 .processList article:first-child, .hibiki-v2 .processList article:last-child { padding: 55px 0; border-right: 0; border-bottom: 1px solid #cfc3ba; }
    .hibiki-v2 .processList article:last-child { border-bottom: 0; }
    .hibiki-v2 .reasonGrid { grid-template-columns: 1fr; }
    .hibiki-v2 .reasonGrid article { min-height: 0; border-right: 0; border-bottom: 1px solid rgba(255,255,255,.16); }
    .hibiki-v2 .reframeGrid { grid-template-columns: 1fr; }
    .hibiki-v2 .reframeGrid span { transform: rotate(90deg); }
    .hibiki-v2 .siteFooter { grid-template-columns: 1fr; gap: 20px; text-align: center; justify-items: center; }
    .hibiki-v2 .siteFooter > span { justify-self: center; }
  }
  @media (max-width: 620px) {
    .hibiki-v2 .siteHeader { width: calc(100% - 32px); padding: 18px 0; }
    .hibiki-v2 .brand img { width: 145px; }
    .hibiki-v2 .siteNav .navCta { padding: 7px 14px; font-size: 10px; }
    .hibiki-v2 .hero { min-height: 620px; padding: 90px 20px 110px; }
    .hibiki-v2 .hero h1 { font-size: clamp(33px, 10vw, 48px); line-height: 1.65; letter-spacing: .04em; }
    .hibiki-v2 .heroLead br { display: none; }
    .hibiki-v2 .heroCta { min-width: 0; width: 100%; max-width: 350px; font-size: 11px; }
    .hibiki-v2 .soundStage { width: calc(100% - 24px); padding: 50px 18px; border-radius: 28px; }
    .hibiki-v2 .nameFormRow { border-radius: 18px; flex-direction: column; align-items: stretch; }
    .hibiki-v2 .modeTabs { gap: 6px; }
    .hibiki-v2 .modeTabs .tn-preset { flex-direction: column; gap: 0; padding: 10px 6px; }
    .hibiki-v2 .earthWrap { width: 250px; height: 250px; }
    .hibiki-v2 .tn-vis-v2 { width: 210px; height: 210px; }
    .hibiki-v2 .sectionShell { width: calc(100% - 40px); }
    .hibiki-v2 .depthOpening, .hibiki-v2 .filterSection, .hibiki-v2 .processSection, .hibiki-v2 .nameSection, .hibiki-v2 .reframeSection { padding-top: 110px; padding-bottom: 110px; }
    .hibiki-v2 .depthOpening > h2 { font-size: 36px; }
    .hibiki-v2 .openingGrid { margin-top: 60px; gap: 55px; }
    .hibiki-v2 .openingCopy { font-size: 14px; }
    .hibiki-v2 .desktopOnly { display: none; }
    .hibiki-v2 .lensScene { min-height: 410px; }
    .hibiki-v2 .lensOuter { width: 235px; height: 235px; }
    .hibiki-v2 .filterStack { min-height: 440px; }
    .hibiki-v2 .filterCard { width: 85%; height: 250px; padding: 27px; }
    .hibiki-v2 .filterCard p { font-size: 19px; }
    .hibiki-v2 .processList { margin-top: 65px; }
    .hibiki-v2 .processVisual { height: 150px; }
    .hibiki-v2 .nameLead br { display: none; }
    .hibiki-v2 .reasonGrid { margin-top: 70px; }
    .hibiki-v2 .reasonGrid article { padding: 38px 28px; }
    .hibiki-v2 .reasonGrid h4 { margin-top: 28px; }
    .hibiki-v2 .principle { margin-top: 80px; padding: 55px 10px; }
    .hibiki-v2 .reframeGrid { margin: 50px auto 70px; gap: 22px; }
    .hibiki-v2 .reframeGrid p { font-size: 15px; padding: 20px 12px; }
    .hibiki-v2 .finalCta { padding: 150px 20px 140px; }
    .hibiki-v2 .finalRing { width: 580px; height: 580px; }
    .hibiki-v2 .finalCta h2 { font-size: 34px; }
    .hibiki-v2 .finalCta > p:not(.sectionKicker) { font-size: 12px; }
    .hibiki-v2 .finalCta > a { font-size: 11px; padding: 16px 18px; }
  }

/* ============================================================
   -v2 系 (index-v2 以外) 共通レイアウト
   hibiki-v2-shell.js が siteHeader (cosmos-band) と siteFooter を注入
   ============================================================ */
/* paper world (news / events / about-equation 等 コンテンツページ)。
   ただし .warm-body も持っているページ (recovery-sound-v2 等 galaxy を保つ特別ページ) では paper bg を skip */
body.hibiki-v2-inner:not(.warm-body) {
  /* 2026-08-08: 全 sub-pages に銀河 fixed 背景 (user 要望「透明度を上げて銀河が透けて見えるように」)
     v2-main を alpha 化することで cream paper 越しに galaxy が薄く現れる */
  background:
    url("galaxy-bg.jpg") center top / cover fixed,
    var(--hv2-night);
  color: var(--hv2-ink);
  min-height: 100vh;
}
body.hibiki-v2-inner.warm-body {
  min-height: 100vh;
}
/* siteHeader を包む cosmos-band (galaxy 背景の帯) */
.hibiki-v2-inner .cosmos-band {
  position: relative; z-index: 5;
  padding: 0 0 20px;
  background:
    linear-gradient(180deg, rgba(5,5,15,.10) 0%, rgba(5,5,15,.42) 100%),
    url("galaxy-bg.jpg") center top / cover;
  color: #f8f3ed;
}
.hibiki-v2-inner .cosmos-band .cosmosNoise {
  position: absolute; inset: 0; opacity: .12; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
.hibiki-v2-inner .cosmos-band .siteHeader { border-bottom: 1px solid rgba(255,255,255,.14); }

/* Main content wrapper (paper 世界) — 2026-08-08: alpha .88 で 12% galaxy 透過 */
.hibiki-v2-inner .v2-main {
  position: relative; z-index: 1;
  padding: 90px 24px 120px;
  background: rgba(245, 240, 233, .88);
  color: var(--hv2-ink);
}
.hibiki-v2-inner .v2-main .v2-shell {
  width: min(720px, calc(100% - 32px));
  margin: 0 auto;
}
.hibiki-v2-inner .v2-hero { text-align: center; margin-bottom: 64px; }
.hibiki-v2-inner .v2-hero .eyebrow { color: #9a7980; margin-bottom: 18px; }
.hibiki-v2-inner .v2-hero h1 {
  margin: 0; font-family: var(--hv2-serif);
  font-size: clamp(30px, 5vw, 48px); font-weight: 400;
  line-height: 1.5; letter-spacing: .06em; color: var(--hv2-ink);
}
.hibiki-v2-inner .v2-hero .v2-lead {
  margin: 26px auto 0; max-width: 560px;
  font-family: var(--hv2-serif); font-size: 15px;
  line-height: 2.0; letter-spacing: .04em; color: var(--hv2-ink-soft);
}

/* Back link (v2 style) */
.hibiki-v2-inner .v2-back-wrap { text-align: center; margin-top: 72px; }
.hibiki-v2-inner .v2-back {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 24px; border-radius: 999px;
  background: #2e2832; color: #fff;
  font-size: 12px; letter-spacing: .12em;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(48,37,45,.18);
  transition: transform .25s;
}
.hibiki-v2-inner .v2-back:hover { transform: translateY(-2px); }

/* siteFooter は index-v2 の .siteFooter rule で対応済 (既に定義済み) */
.hibiki-v2-inner .hibiki-v2-shell-footer { margin-top: auto; }

/* ============================================================
   -v2 コンテンツページ共通ユーティリティ (news / events 以外の
   about-equation / name-program / blueprint / line-register / report 用)
   ============================================================ */
.hibiki-v2-inner .v2-section { margin: 0 0 68px; }
.hibiki-v2-inner .v2-section:last-child { margin-bottom: 0; }
.hibiki-v2-inner .v2-section h2 {
  margin: 0 0 24px; font-family: var(--hv2-serif);
  font-size: clamp(22px, 3.2vw, 28px); font-weight: 500;
  letter-spacing: .06em; line-height: 1.7; color: var(--hv2-ink);
  padding-bottom: 14px; border-bottom: 1px solid #d5c9be;
}
.hibiki-v2-inner .v2-section h3 {
  margin: 30px 0 14px; font-family: var(--hv2-serif);
  font-size: 18px; font-weight: 500;
  letter-spacing: .04em; color: var(--hv2-ink);
}
.hibiki-v2-inner .v2-section p {
  margin: 0 0 18px; font-family: var(--hv2-serif); font-size: 15px;
  line-height: 2.1; letter-spacing: .04em; color: var(--hv2-ink);
}
.hibiki-v2-inner .v2-section p strong { color: #7a4e5a; font-weight: 500; }
.hibiki-v2-inner .v2-section p:last-child { margin-bottom: 0; }

.hibiki-v2-inner .v2-intro p { font-size: 16px; line-height: 2.3; }

/* Figure (画像) */
.hibiki-v2-inner .v2-figure { margin: 0 0 68px; text-align: center; }
.hibiki-v2-inner .v2-figure img { display: block; margin: 0 auto; max-width: 100%; height: auto; border-radius: 4px; box-shadow: 0 18px 40px rgba(57,47,52,.12); }
.hibiki-v2-inner .v2-figure figcaption { margin-top: 14px; font-family: var(--hv2-latin); font-size: 10px; letter-spacing: .24em; color: #9a7980; text-transform: uppercase; }

/* System / Feature grids */
.hibiki-v2-inner .v2-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px; margin: 24px 0 0;
}
.hibiki-v2-inner .v2-cell {
  padding: 22px 14px; text-align: center; font-family: var(--hv2-serif);
  font-size: 15px; letter-spacing: .06em; color: var(--hv2-ink);
  border: 1px solid #d5c9be; border-radius: 4px; background: #fff;
}
.hibiki-v2-inner .v2-feat-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 14px; margin: 22px 0 0;
}
.hibiki-v2-inner .v2-feat-cell {
  padding: 26px 14px; text-align: center;
  border: 1px solid #d5c9be; border-radius: 4px; background: rgba(255,255,255,.7);
}
.hibiki-v2-inner .v2-feat-icon { font-size: 22px; color: #d0879c; margin-bottom: 8px; }
.hibiki-v2-inner .v2-feat-label { font-family: var(--hv2-serif); font-size: 14px; letter-spacing: .06em; }

/* Benefits list */
.hibiki-v2-inner .v2-benefits { list-style: none; padding: 0; margin: 0; }
.hibiki-v2-inner .v2-benefits li {
  padding: 16px 0 16px 32px; position: relative;
  font-family: var(--hv2-serif); font-size: 15px; line-height: 1.9; letter-spacing: .04em;
  border-bottom: 1px dashed #d5c9be;
}
.hibiki-v2-inner .v2-benefits li:last-child { border-bottom: 0; }
.hibiki-v2-inner .v2-benefits li::before {
  content: "◇"; position: absolute; left: 4px; top: 16px; color: #d0879c; font-size: 12px;
}
.hibiki-v2-inner .v2-benefits li strong { color: #7a4e5a; font-weight: 500; display: block; margin-bottom: 4px; font-size: 16px; }
.hibiki-v2-inner .v2-benefits li span { color: var(--hv2-ink-soft); font-size: 12px; letter-spacing: .04em; }

/* Note box (highlighted paragraph) */
.hibiki-v2-inner .v2-note-box {
  margin: 28px 0 0; padding: 24px 26px;
  background: rgba(217,135,158,.08); border-left: 3px solid #d0879c;
  border-radius: 2px;
}
.hibiki-v2-inner .v2-note-box p { margin: 0; font-family: var(--hv2-serif); font-size: 13px; line-height: 2; color: var(--hv2-ink-soft); }

/* CTA section */
.hibiki-v2-inner .v2-cta {
  padding: 54px 40px; text-align: center;
  background: linear-gradient(155deg, #2e2832, #1a151e); color: #fff;
  border-radius: 4px; margin: 80px 0 0;
}
.hibiki-v2-inner .v2-cta-heading {
  font-family: var(--hv2-serif); font-size: 18px; line-height: 2.1;
  letter-spacing: .06em; margin-bottom: 26px; color: #f4d9a8;
}
.hibiki-v2-inner .v2-cta-btn {
  display: inline-block; padding: 16px 40px; margin: 0 0 18px;
  background: #d0879c; color: #fff; text-decoration: none;
  border-radius: 999px; font-size: 13px; letter-spacing: .14em;
  transition: transform .25s, box-shadow .25s;
  box-shadow: 0 12px 30px rgba(208,135,156,.35);
}
.hibiki-v2-inner .v2-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 16px 36px rgba(208,135,156,.45); }
.hibiki-v2-inner .v2-cta-note { margin-top: 12px; font-family: var(--hv2-latin); font-size: 10px; letter-spacing: .06em; color: rgba(255,255,255,.55); line-height: 1.8; }

.hibiki-v2-inner .v2-subtitle {
  margin-top: 10px; font-family: var(--hv2-serif);
  font-size: 14px; letter-spacing: .14em; color: #9a7980;
}

@media (max-width: 520px) {
  .hibiki-v2-inner .v2-main { padding: 60px 16px 90px; }
  .hibiki-v2-inner .v2-section h2 { font-size: 20px; }
  .hibiki-v2-inner .v2-cta { padding: 40px 24px; }
  .hibiki-v2-inner .v2-cta-heading { font-size: 16px; }
  .hibiki-v2-inner .v2-cta-btn { padding: 14px 28px; font-size: 12px; }
}

/* ============================================================
   siteNav dropdown (スペシャルヒビキ 等) — chip 型 pill と統一
   ============================================================ */
.hibiki-v2 .siteNav .navDrop {
  position: relative; display: inline-block;
}
.hibiki-v2 .siteNav .navDrop summary {
  cursor: pointer; list-style: none;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 18px; border-radius: 999px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.9);
  font-family: var(--hv2-sans); font-weight: 400;
  font-size: 12px; letter-spacing: .08em; white-space: nowrap;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.hibiki-v2 .siteNav .navDrop summary::-webkit-details-marker { display: none; }
.hibiki-v2 .siteNav .navDrop summary::marker { content: ""; }
.hibiki-v2 .siteNav .navDrop summary::after {
  content: ""; display: inline-block;
  width: 5px; height: 5px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translate(-1px, -1px);
  transition: transform .2s ease;
  opacity: .8;
}
.hibiki-v2 .siteNav .navDrop[open] summary::after {
  transform: rotate(-135deg) translate(1px, 1px);
}
.hibiki-v2 .siteNav .navDrop summary:hover,
.hibiki-v2 .siteNav .navDrop[open] summary {
  background: rgba(255,248,220,.16);
  border-color: rgba(244,217,168,.55);
  color: #fff8e8;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(244,217,168,.18);
}
.hibiki-v2 .siteNav .navDropMenu {
  position: absolute; top: calc(100% + 8px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  opacity: 0; pointer-events: none;
  min-width: 180px; padding: 6px;
  background: rgba(15,12,26,.92);
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
  border: 1px solid rgba(244,217,168,.22);
  border-radius: 14px;
  box-shadow: 0 14px 34px rgba(0,0,0,.4), inset 0 1px rgba(255,255,255,.06);
  z-index: 100;
  transition: opacity .2s ease, transform .2s ease;
}
.hibiki-v2 .siteNav .navDrop[open] .navDropMenu {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.hibiki-v2 .siteNav .navDropMenu a {
  display: block; padding: 10px 16px; border-radius: 999px;
  color: rgba(255,255,255,.88); text-decoration: none; white-space: nowrap;
  font-size: 12px; font-family: var(--hv2-sans); font-weight: 400;
  letter-spacing: .06em;
  background: transparent; border: 1px solid transparent;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .15s ease;
}
.hibiki-v2 .siteNav .navDropMenu a:hover,
.hibiki-v2 .siteNav .navDropMenu a[aria-current="page"] {
  background: rgba(244,217,168,.14);
  border-color: rgba(244,217,168,.45);
  color: #f4d9a8;
  transform: translateX(2px);
}
@media (max-width: 900px) {
  .hibiki-v2 .siteNav .navDrop summary { padding: 8px 14px; font-size: 11px; }
  .hibiki-v2 .siteNav .navDropMenu a { font-size: 11px; padding: 8px 14px; }
}
@media (max-width: 480px) {
  .hibiki-v2 .siteNav .navDrop summary { padding: 7px 12px; font-size: 10.5px; letter-spacing: .06em; }
  .hibiki-v2 .siteNav .navDropMenu { min-width: 160px; }
}

/* ============================================================
   Mobile hamburger overlay: navDrop summary の pill 化 override
   (cascade 上、base .navDrop summary rule より後に配置し specificity +1 で確実に勝つ)
   ============================================================ */
@media (max-width: 900px) {
  .hibiki-v2 .siteHeader .siteNav .navDrop summary {
    display: flex;
    align-items: center; justify-content: center;
    width: 100%;
    padding: 12px 16px;
    font-size: 13px;
    text-align: center;
    /* base pill 装飾 (background/border/border-radius/color) はそのまま継承 */
  }
  .hibiki-v2 .siteHeader .siteNav .navDrop summary::after {
    margin-left: 8px;
  }
  /* details 内の a も full-width */
  .hibiki-v2 .siteHeader .siteNav .navDropMenu a {
    display: block; width: 100%; text-align: center;
    padding: 10px 14px;
  }
}