/* =====================================================================
   tube-bridge.css — 本体スキン連動（ステップ3統合用）v1.0
   ---------------------------------------------------------------------
   読み込み順：tube.css → theme_css.php（本体スキン） → 本ファイル
   ・data-theme="site" のとき、本体スキンのデザイントークン（--dz-*）を
     TUBEモードのトークン（--tm-*）へ橋渡しします。
   ・「夢見る背景」（bg_lib）が body に描く背景・ただよい粒を
     そのまま透かして見せるため、面は半透明＋ぼかしにします。
   ・本体スキン未読込（単体起動）でも壊れないよう、全て
     var(--dz-*, フォールバック) で書いています。
   ===================================================================== */

:root[data-theme="site"] {
  --tm-bg:        transparent;                    /* 本体の背景（スキン／夢見る背景）を透過 */
  --tm-bg-soft:   var(--dz-hover,  #f2f2f2);
  --tm-bg-hover:  var(--dz-hover,  #e9e9e9);
  --tm-surface:   var(--dz-surface,#ffffff);
  --tm-text:      var(--dz-text,   #0f0f0f);
  --tm-text-2:    var(--dz-muted,  #606060);
  --tm-line:      var(--dz-line,   #e5e5e5);
  --tm-chip:      var(--dz-hover,  #f2f2f2);
  --tm-chip-on:   var(--dz-accent, #0f0f0f);
  --tm-chip-on-t: #ffffff;
  --tm-brand:     var(--dz-accent, #e5004f);
  --tm-brand-dk:  var(--dz-button, var(--dz-accent, #b30039));
  --tm-link:      var(--dz-accent, #065fd4);
  --tm-radius:    var(--dz-radius, 12px);
}

/* ---- 面：本体の背景を透かすため、バー類は半透明＋ぼかし ---- */
[data-theme="site"] .tm-app { background: transparent; }
[data-theme="site"] .tm-header,
[data-theme="site"] .tm-chipsbar,
[data-theme="site"] .tm-bnav,
[data-theme="site"] .tm-sidebar,
[data-theme="site"] .tm-search-ov,
[data-theme="site"] .tm-tabs {
  background: color-mix(in srgb, var(--dz-surface, #ffffff) 88%, transparent);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}
/* color-mix 未対応ブラウザ用の保険（単色にフォールバック） */
@supports not (background: color-mix(in srgb, #fff 50%, transparent)) {
  [data-theme="site"] .tm-header,
  [data-theme="site"] .tm-chipsbar,
  [data-theme="site"] .tm-bnav,
  [data-theme="site"] .tm-sidebar,
  [data-theme="site"] .tm-search-ov,
  [data-theme="site"] .tm-tabs { background: var(--dz-surface, #ffffff); }
}
[data-theme="site"] .tm-search { background: var(--dz-surface, #ffffff); }

/* カード面はスキンのサーフェス色で（説明ボックス等はそのまま --tm-bg-soft） */
[data-theme="site"] .tm-pop,
[data-theme="site"] .tm-sheet { background: var(--dz-surface, #ffffff); }

/* 見出しバー（本体の h 色を尊重） */
[data-theme="site"] .tm-section-h { color: var(--dz-heading, var(--dz-text, inherit)); }

/* ---- フォント：本体スキンの書体をそのまま継承 ----
   theme_css.php が body に !important で当てるため通常は自動継承されます。
   .tm-app 側の指定が勝たないよう明示的に inherit へ。 */
[data-theme="site"] .tm-app { font-family: inherit; }

/* ---- 「通常版へ」切替ピル（ヘッダー右） ---- */
.tm-switch {
  display: inline-flex; align-items: center; gap: 6px;
  height: 34px; padding: 0 12px 0 10px;
  border: 1px solid var(--tm-line); border-radius: 999px;
  font-size: 13px; font-weight: 500; white-space: nowrap;
  color: var(--tm-text); text-decoration: none;
  background: transparent;
}
.tm-switch:hover { background: var(--tm-bg-hover); }
.tm-switch .tm-ic { width: 17px; height: 17px; }
@media (max-width: 599px) { .tm-switch span { display: none; } .tm-switch { padding: 0 9px; } }

/* 夢見る背景の「ただよい粒」(.xfbg-float) は、本体サイトと同じく
   コンテンツの手前をふわふわ流れます（pointer-events:none なので操作は透過）。
   固定バー類（z-index 40〜80）だけが粒より前面＝本体ヘッダーと同じ層構造です。 */