/* ===========================================================
   文字サイズ切替（共通スタイル）
   - .fz-toggle … 切替スイッチ本体（セグメント風）
        構造: [文字] [標準] [大]
   - .fz-toggle.fz-fixed  … 画面上部に固定（login画面用）
   - .fz-toggle.fz-inline … インライン配置（index等のtopbar用）
   - html.fz-large …「大」がアクティブ
   - html.fz-large 時は「文字」セグメントを非表示
   - .fz-no-zoom … 1.5倍ズームの対象から除外
   =========================================================== */

.fz-toggle{
  display: inline-flex;
  align-items: stretch;
  height: 30px;
  padding: 2px;
  background: rgba(20,16,50,0.85);
  border: 1px solid rgba(160,140,255,0.45);
  border-radius: 999px;
  font-family: 'Zen Kaku Gothic New','Hiragino Kaku Gothic Pro',sans-serif;
  font-size: 11px;
  line-height: 1;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.35);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  white-space: nowrap;
  vertical-align: middle;
}

/* セグメント */
.fz-toggle .fz-seg{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 10px;
  min-width: 36px;
  height: 100%;
  border: none;
  background: transparent;
  color: #c4b8e8;
  font-family: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  border-radius: 999px;
  transition: background .18s, color .18s;
}
.fz-toggle .fz-seg:hover{
  color: #fff;
}
/* ラベル「文字」だけは少し色を変えてセグメントというより見出しっぽく */
.fz-toggle .fz-seg.fz-head{
  color: #f5c842;
  font-weight: 700;
  cursor: default;
  pointer-events: none;
  padding: 0 6px 0 10px;
  min-width: 0;
}
.fz-toggle .fz-seg.fz-head:hover{
  color: #f5c842;
}

/* アクティブ状態（標準 or 大） */
.fz-toggle .fz-seg.is-active{
  background: linear-gradient(135deg, #7c5cbf, #8b5cf6);
  color: #fff;
  box-shadow: 0 2px 6px rgba(139,92,246,0.45);
}

/* 大モード時は「文字」を非表示にしてレイアウトを綺麗に */
html.fz-large .fz-toggle .fz-head{
  display: none;
}

/* ---- 配置モード1: fixed（login画面用：画面上部中央固定） ---- */
.fz-toggle.fz-fixed{
  position: fixed;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10000;
}
@supports(top: env(safe-area-inset-top)){
  .fz-toggle.fz-fixed{
    top: calc(8px + env(safe-area-inset-top));
  }
}

/* ---- 配置モード2: inline（topbar等にそのまま並べる） ---- */
.fz-toggle.fz-inline{
  position: static;
  transform: none;
}

/* ===========================================================
   1.5倍拡大ルール
   body 直下要素のうち .fz-no-zoom が無いものを 1.5倍
   =========================================================== */
html.fz-large body > *:not(.fz-no-zoom){
  zoom: 1.5;
}

/* zoom 非対応ブラウザ（古い Firefox 等）向けフォールバック */
@supports not (zoom: 1){
  html.fz-large body > *:not(.fz-no-zoom){
    transform: scale(1.5);
    transform-origin: top left;
    width: 66.6667%;
  }
}