/* ===== 3D空間上のラベル（自前実装：vector3.project → 絶対配置） ===== */
.label-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay);
}
.hair-label {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
  cursor: pointer;
  white-space: nowrap;
  transition: opacity 0.15s ease;
}
.hair-label.is-hidden { opacity: 0; pointer-events: none; }
.hair-label .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--c-accent-gold);
  border: 1.5px solid #fff;
  box-shadow: 0 1px 4px rgba(0,0,0,0.25);
  flex-shrink: 0;
}
.hair-label .name {
  font-size: var(--fs-xxs);
  background: var(--label-bg);
  color: var(--c-ink);
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  letter-spacing: 0.02em;
}
.hair-label:hover .name,
.hair-label.is-open .name {
  background: var(--c-ink);
  color: #fff;
}
.hair-label.is-open .dot { background: var(--c-melanin); }

/* ラベル解説カード */
.label-card {
  position: absolute;
  transform: translate(-50%, 10px);
  width: 240px;
  max-width: 60vw;
  background: var(--c3d-panel-bg);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-strong);
  padding: var(--sp-3);
  font-size: var(--fs-xs);
  line-height: var(--lh-base);
  color: var(--c-ink);
  z-index: var(--z-card);
  pointer-events: auto;
}
.label-card h4 {
  font-size: var(--fs-sm);
  font-weight: 700;
  margin-bottom: 4px;
  color: var(--c-melanin-deep);
}
.label-card .close-btn {
  position: absolute;
  top: 6px;
  right: 8px;
  border: none;
  background: none;
  font-size: 16px;
  line-height: 1;
  color: var(--c-ink-faint);
  padding: 4px;
}
.label-card .close-btn:hover { color: var(--c-ink); }

/* ===== スケールバー ===== */
.scale-bar {
  position: absolute;
  left: var(--sp-4);
  bottom: var(--sp-4);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  z-index: var(--z-overlay);
  pointer-events: none;
  font-family: var(--ff-eng);
}
.scale-bar-track {
  height: 8px;
  border-left: 2px solid var(--c-ink);
  border-right: 2px solid var(--c-ink);
  border-bottom: 2px solid var(--c-ink);
  min-width: 20px;
  transition: width 0.15s ease;
}
.scale-bar-label {
  font-size: var(--fs-xxs);
  color: var(--c-ink);
  background: var(--label-bg);
  padding: 1px 8px;
  border-radius: 999px;
}

/* ===== 品質・fps インジケータ（控えめに右下） ===== */
.view-status {
  position: absolute;
  right: var(--sp-4);
  bottom: var(--sp-4);
  font-size: 10px;
  color: var(--c-ink-faint);
  z-index: var(--z-overlay);
  pointer-events: none;
  font-family: var(--ff-eng);
  letter-spacing: 0.04em;
}

/* ===== 常時表示の注記 ===== */
.legal-note {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  font-size: var(--fs-xxs);
  color: var(--c-ink-soft);
  text-align: center;
  z-index: var(--z-note);
}
.legal-note .info-btn {
  border: 1px solid var(--c-ink-faint);
  border-radius: 50%;
  width: 18px;
  height: 18px;
  min-width: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: var(--c-ink-soft);
  background: transparent;
  line-height: 1;
}
.legal-note .info-btn:hover { background: var(--c-base-warm); }

/* 注記の詳細（ⓘクリックで展開） */
.legal-detail {
  position: fixed;
  inset: 0;
  background: rgba(43,58,46,0.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--sp-4);
}
.legal-detail.is-open { display: flex; }
.legal-detail-card {
  background: var(--c3d-panel-bg);
  border-radius: var(--radius-md);
  padding: var(--sp-5);
  max-width: 560px;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-strong);
  position: relative;
}
.legal-detail-card h3 {
  font-size: var(--fs-md);
  margin-bottom: var(--sp-3);
  color: var(--c-melanin-deep);
}
.legal-detail-card ul { line-height: var(--lh-base); }
.legal-detail-card li {
  margin-bottom: var(--sp-2);
  font-size: var(--fs-xs);
  padding-left: 1em;
  text-indent: -1em;
}
.legal-detail-card .close-btn {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  border: none;
  background: none;
  font-size: 20px;
  color: var(--c-ink-faint);
}

/* ===== SPEC-v2.0 §10/§11：並べて見る（split）モードの中央仕切り線 =====
   JS 側が viewMode==='split' のときだけ .is-visible を付与する。既定は非表示。 */
.split-divider {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 1px;
  margin-left: -0.5px;
  background: var(--c-line);
  z-index: var(--z-overlay);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.split-divider.is-visible { opacity: 1; }

/* ===== SPEC-v2.0 §9.3/§10.5：高さスライダーと連動するガイド線 =====
   縦断面（long）・並べて見る（split）モードでのみ表示。
   JS 側が top（%）を高さスライダーの値から計算して inline style で設定する。 */
.height-guide-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 0;
  border-top: 1px dashed var(--c-accent-gold);
  z-index: var(--z-overlay);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, top 0.1s ease;
}
.height-guide-line.is-visible { opacity: 0.85; }
/* 並べて見るモードでは右半分（縦断面側）のみに描く */
.height-guide-line.is-right-half { left: 50%; }

/* ===== セミナーモード（Phase 2 で本格実装） =====
   Phase 1 では未実装。フックだけ用意し、クラスは付与しない。 */

@media (max-width: 900px) {
  .scale-bar { left: var(--sp-3); bottom: var(--sp-3); }
  .view-status { display: none; }
}

/* ===== SPEC-v5.1 §2.1：マクロフィブリル拡大モード（Phase 3-B） =====
   main.js が #viewport に .is-zoom を付け外しする。拡大モード中は
   既存の3Dラベル・引き出し線・スケールバーを隠す（labels.js / Labels.setLeaderEnabled は
   一切呼ばない。CSSだけで隠す）。 */
.viewport.is-zoom #label-layer,
.viewport.is-zoom #leader-lines,
.viewport.is-zoom #scale-bar {
  display: none;
}

/* 拡大モード専用ラベルオーバーレイ（SPEC-v5.1 §2.5）。labels.js の .label-layer とは
   別の独立レイヤー。既定は非表示、.is-zoom のときだけ表示する。 */
#zoom-label-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay);
  display: none;
}
.viewport.is-zoom #zoom-label-layer {
  display: block;
}

/* マクロフィブリル／ミクロフィブリル／間充マトリックスの3ラベル。
   クリック不可・カード連動なし（.hair-label とは別クラス）。 */
.zoom-label {
  position: absolute;
  /* SPEC-v5.3 §2.6：ピルの右端を基準にする（旧 -50%,-50% だと引き出し線の始点に重なる）。 */
  transform: translate(-100%, -50%);
  font-size: var(--fs-xxs);
  background: var(--label-bg);
  color: var(--c-ink);
  padding: 2px 8px;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  letter-spacing: 0.02em;
  white-space: nowrap;
  /* SPEC-v6.0d §5.1：ホバー／クリックを拾えるようにする（旧 pointer-events: none から変更）。 */
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.15s ease;
}

/* SPEC-v6.0d §4.4/§5.2：ホバー中の強調・減光。
   既存の `.zoom-label.is-hidden` `.zoom-label-heading.is-hidden` `.zoom-leader.is-hidden` より
   必ず先に書くこと（同specificity同士は後勝ちのため、is-hidden が is-muted に負けてはいけない）。 */
.zoom-label.is-active,
.zoom-label-heading.is-active {
  box-shadow: 0 0 0 3px rgba(0,0,0,0.10), var(--shadow-soft);
  font-weight: 700;
}
.zoom-label.is-muted,
.zoom-label-heading.is-muted { opacity: 0.35; }
.zoom-leader.is-muted,
.zoom-leader-dot.is-muted { opacity: 0.15; }

.zoom-label.is-hidden { opacity: 0; }

/* SPEC-v5.3 §2.6：色でのひも付け。枠線だけを部品の色にする（背景・文字色は変更しない）。 */
.zoom-label--macro { border: 2px solid #3f7f92; }
.zoom-label--micro { border: 2px solid #ff8c3a; }
.zoom-label--matrix { border: 2px solid #e05a9a; } /* SPEC-v6.0c 追補：枠も芯のピンクの筒に合わせる（R114-4） */
.zoom-label--matrixout { border: 2px solid #8f86b8; }

/* 左右の柱の上に置く固定見出し（オルト／パラ）。引き出し線あり。 */
.zoom-label-heading {
  position: absolute;
  /* SPEC-v6.0c §3.1：柱の真上ではなく画面の角に固定するため、中央基準をやめる。 */
  font-size: var(--fs-xs);
  font-weight: 700;
  background: var(--label-bg);
  color: var(--c-ink);
  padding: 3px 10px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
  /* SPEC-v6.0d §5.1：ホバー／クリックを拾えるようにする（旧 pointer-events: none から変更）。 */
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
.zoom-label-heading.is-hidden { opacity: 0; }
/* SPEC-v6.0c §3.1：左上＝左基準／右上＝右基準 */
.zoom-label-heading.is-ortho { transform: translate(0, 0); border: 2px solid #3f7f92; }
.zoom-label-heading.is-para  { transform: translate(-100%, 0); border: 2px solid #b9873c; }

/* SPEC-v5.3 §2.4：引き出し線のSVGレイヤー。#zoom-label-layer に位置・大きさを一致させる。 */
#zoom-leader-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* SPEC-v5.3 §2.6：引き出し線・丸印の色（ラベルと同じ色でひも付ける）。 */
.zoom-leader {
  stroke-width: 1.6;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}
.zoom-leader--macro { stroke: #3f7f92; }
.zoom-leader--micro { stroke: #ff8c3a; }
.zoom-leader--matrix { stroke: #e05a9a; }      /* SPEC-v6.0c：芯のピンクの筒に合わせる */
.zoom-leader--matrixout { stroke: #8f86b8; }
.zoom-leader--orthohead { stroke: #3f7f92; }   /* SPEC-v6.0c §3.2：新規 */
.zoom-leader--parahead { stroke: #b9873c; }    /* SPEC-v6.0c §3.2：新規 */

.zoom-leader-dot {
  stroke: none;
  transition: opacity 0.15s ease;
}
.zoom-leader-dot--macro { fill: #3f7f92; }
.zoom-leader-dot--micro { fill: #ff8c3a; }
.zoom-leader-dot--matrix { fill: #e05a9a; }
.zoom-leader-dot--matrixout { fill: #8f86b8; }
.zoom-leader-dot--orthohead { fill: #3f7f92; }
.zoom-leader-dot--parahead { fill: #b9873c; }

.zoom-leader.is-hidden,
.zoom-leader-dot.is-hidden {
  opacity: 0;
}

/* 「コルテックス細胞の中」＝画面上部に固定した見出し（引き出し線なし・位置更新なし） */
.zoom-label-title {
  position: absolute;
  top: var(--sp-3);
  left: 50%;
  transform: translateX(-50%);
  font-size: var(--fs-sm);
  font-weight: 700;
  background: var(--label-bg);
  color: var(--c-ink);
  padding: 4px 14px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
  pointer-events: none;
}

/* SPEC-v6.0b §4.3：拡大モード中に固定表示する操作ヒント。毎フレームの再配置はしない。 */
.zoom-hint {
  position: absolute;
  /* SPEC-v6.0c §3.1：上のバンドが混むため下端の中央へ移す。 */
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  line-height: 1.6;
  color: #6b6b6b;
  opacity: 0.75;
  pointer-events: none;
  white-space: nowrap;
}

/* SPEC-v5.2 §2.5-1：拡大モード中だけ表示する注記。1行になったので通常の .legal-note と
   同じ見え方（display:block相当。実際は .legal-note の display:flex を継承）に戻す。
   既定は常時注記を表示し、.is-zoom のときだけ入れ替える
   （main.js が document.body に .is-zoom を付け外しする）。 */
.zoom-notes {
  display: none;
}
body.is-zoom .legal-note:not(.zoom-notes) {
  display: none;
}
body.is-zoom .zoom-notes {
  display: flex;
}

/* SPEC-v5.2 §2.5-3：拡大モード用のⓘカード（#legal-detail-zoom）の表示切り替え。
   既定は隠し、拡大モード中だけ出す。逆に既存の30項目カードは拡大モード中だけ隠す。
   「>」（直接子セレクタ）が必須：#legal-detail-zoom の中の h3/ul は
   .legal-detail-card の孫要素なので、direct child指定なら誤って隠れることはない。 */
#legal-detail-zoom {
  display: none;
}
body.is-zoom #legal-detail-zoom {
  display: block;
}
body.is-zoom .legal-detail-card > h3,
body.is-zoom .legal-detail-card > ul {
  display: none;
}

/* ===== SPEC-v6.1（Phase 4-B）＋ SPEC-v6.2（ナビ右側移動・階層2作り直し）：
   「もっと拡大」（階層1〜4）のナビゲーション =====
   すべて #zoom-label-layer の中に viewDeep.js が生成する。index.html には要素を足さない
   （#legal-detail-deep とその中の .legal-detail-card を除く。§7.2）。 */

/* パンくず（SPEC-v6.2 §5.1・§5.2）。画面右側・縦中央に固定した縦積みの列（幅140px）。
   区切りが「↓」になったため、横並びのwrap前提のレイアウトから縦のflex columnへ変更。
   ★R129-16b 是正：列幅124pxでは最長「プロトフィラメント」（12px×9字＋padding20＝128px）が
     4pxはみ出したため140pxに広げた。設計書 §5.2 の124pxは検算漏れ。 */
#deep-breadcrumb {
  position: absolute;
  right: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 140px;
  gap: 4px;
  pointer-events: auto;
  z-index: var(--z-overlay);
}
.deep-crumb-sep {
  text-align: center;
  font-size: var(--fs-xxs);
  line-height: 14px;
  color: var(--c-ink-faint);
  width: 100%;
}
/* ★R129-16a 是正：button は body の line-height を継承しない（UA既定 normal）ため高さが
   ブラウザ依存になり、パンくず全体高が177〜198pxの範囲でぶれた。18pxを明示して
   ボタン高＝18＋padding4＝22px に固定する。これでパンくず全体高は
   5×22 ＋ 4×14（区切り）＋ 8×4（gap）＝ 198px に確定する（中央基準で 50%±99px）。 */
.deep-crumb-btn {
  font-size: var(--fs-xxs);
  line-height: 18px;
  background: var(--label-bg);
  color: var(--c-ink-soft);
  border: none;
  padding: 2px 10px;
  border-radius: 999px;
  box-shadow: var(--shadow-soft);
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}
.deep-crumb-btn:hover:not(:disabled) {
  background: var(--c-ink);
  color: #fff;
}
.deep-crumb-btn.is-current {
  font-weight: 700;
  color: var(--c-ink);
  cursor: default;
}
.deep-crumb-btn.is-future,
.deep-crumb-btn:disabled {
  color: var(--c-ink-faint);
  cursor: default;
  opacity: 0.55;
}

/* 「もっと拡大」／「1つ戻る」（SPEC-v6.2 §5.1・§5.3）。パンくずと同じ右側の列に、
   ボタンだけ縦位置をずらして並べる（top: calc(50% + 100px) / calc(50% + 144px)）。 */
#deep-btn-in,
#deep-btn-out {
  position: absolute;
  right: var(--sp-3);
  width: 140px;
  box-sizing: border-box;
  text-align: center;
  font-size: var(--fs-xs);
  line-height: 20px;
  font-weight: 700;
  background: var(--label-bg);
  color: var(--c-ink);
  border: 1px solid var(--c-line);
  padding: 4px 14px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  white-space: nowrap;
  pointer-events: auto;
  cursor: pointer;
  z-index: var(--z-overlay);
}
/* ★R129-16a 是正：パンくず全体高が198px（50%±99px）に確定したため、+100px では
   最下段のパンくずと1px しか離れなかった。+112 / +156 に下げてすきま13pxを確保する。
   ボタン高＝line-height20＋padding8＋border2＝30px。下端は 50%+186px で、
   800×600（=486px）でも .zoom-hint と干渉しない。設計書 §5.2 の +100/+144 は見積り誤り。 */
#deep-btn-in { top: calc(50% + 112px); }
#deep-btn-out { top: calc(50% + 156px); }
#deep-btn-in:disabled {
  color: var(--c-ink-faint);
  cursor: default;
  opacity: 0.5;
}

/* 深い階層専用の注記ボタン（§7.2：#zoom-info-btn は流用しない）。右上に固定。 */
.deep-info-btn {
  position: absolute;
  top: var(--sp-3);
  right: var(--sp-3);
  border: 1px solid var(--c-ink-faint);
  border-radius: 50%;
  width: 22px;
  height: 22px;
  min-width: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  color: var(--c-ink-soft);
  background: var(--label-bg);
  line-height: 1;
  pointer-events: auto;
  cursor: pointer;
  z-index: var(--z-overlay);
}
/* 階層0では #legal-detail-deep が開けない（body.is-deep が付かない）ので、ボタン自体を出さない。 */
.deep-info-btn { display: none; }
body.is-deep .deep-info-btn { display: inline-flex; }
.deep-info-btn:hover { background: var(--c-base-warm); }

/* 階層1〜3のラベルとSVG引き出し線を収めるレイヤー（§6.1）。 */
#deep-label-wrap {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: var(--z-overlay);
}
#deep-leader-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: visible;
}

/* 階層1・2のラベル本体（SPEC-v6.2 §4.3）。画面左に寄せて縦に積むため、v6.1の
   「アンカー中央基準」の transform は廃止（左上基準の left/top で位置決めする）。
   折り返して複数行になれる（offsetHeightが可変になる＝衝突回避の前提）。 */
.deep-label {
  position: absolute;
  font-size: var(--fs-xxs);
  background: var(--label-bg);
  color: var(--c-ink);
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-soft);
  letter-spacing: 0.02em;
  white-space: normal;
  max-width: 260px;
  pointer-events: auto;
  cursor: pointer;
  transition: opacity 0.15s ease;
}
/* §2.3：2行目は1行目より2px小さく、色を薄くする。 */
.deep-label-sub {
  font-size: calc(var(--fs-xxs) - 2px);
  color: var(--c-ink-faint);
  margin-top: 2px;
}

/* §8：ホバー強調の active/muted。is-hidden より必ず先に書く（同specificity同士は後勝ちのため）。 */
.deep-label.is-active {
  box-shadow: 0 0 0 3px rgba(0,0,0,0.10), var(--shadow-soft);
  font-weight: 700;
}
.deep-label.is-muted { opacity: 0.35; }
.deep-leader.is-muted,
.deep-leader-dot.is-muted { opacity: 0.15; }

.deep-label.is-hidden { opacity: 0; }

.deep-leader {
  /* SPEC-v6.2 §4.3で<line>から<polyline>へ変更。SVGの既定fillは黒なので、
     囲まれた形にfillが乗らないよう明示的にfill:noneにする（設計書に無い実装上の必須事項）。 */
  fill: none;
  stroke: var(--c-ink-soft);
  stroke-width: 1.6;
  opacity: 0.9;
  transition: opacity 0.15s ease;
}
.deep-leader-dot {
  fill: var(--c-ink-soft);
  stroke: none;
  transition: opacity 0.15s ease;
}
.deep-leader.is-hidden,
.deep-leader-dot.is-hidden {
  opacity: 0;
}

/* SPEC-v6.1 §7.2：深い階層専用の注記カード。#legal-detail と同じ「オーバーレイ＋中央カード」の
   構造（.legal-detail-card は既存ルールをそのまま流用する。ここでは新規定義しない）。
   既定は非表示、body.is-deep のときに #legal-detail-deep.is-open で表示する。 */
#legal-detail-deep {
  position: fixed;
  inset: 0;
  background: rgba(43,58,46,0.35);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 100;
  padding: var(--sp-4);
}
body.is-deep #legal-detail-deep.is-open {
  display: flex;
}

/* SPEC-v6.2 §4.3：狭い画面ではラベルの最大幅を200pxまで縮める。
   旧#deep-breadcrumbのmax-width:94vwは、パンくずが右側固定幅124pxの縦列になったことで
   不要になったため、このルールに置き換える（判断の詳細は完了報告に記載）。 */
@media (max-width: 820px) {
  .deep-label { max-width: 200px; }
}