/* ==========================================================
   文字サイズ切替 - 共通スタイル
   全ページで共通利用
   ========================================================== */

/* ----- スイッチUI（画面右上に固定表示） ----- */
.font-size-toggle {
  position: fixed;
  top: calc(8px + env(safe-area-inset-top, 0px));
  right: calc(8px + env(safe-area-inset-right, 0px));
  z-index: 99999;
  display: flex;
  align-items: center;
  gap: 4px;
  background: rgba(32, 28, 64, 0.92);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(160, 140, 255, 0.3);
  border-radius: 24px;
  padding: 3px 5px 3px 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  font-family: 'Hiragino Kaku Gothic Pro', 'Noto Sans JP', 'Meiryo', sans-serif;
  user-select: none;
  -webkit-user-select: none;
}
.font-size-toggle .fs-label {
  font-size: 10px;
  color: rgba(237, 233, 254, 0.75);
  letter-spacing: 0.05em;
  margin-right: 2px;
}
.font-size-toggle .fs-btn {
  background: transparent;
  border: none;
  color: rgba(237, 233, 254, 0.7);
  font-weight: 700;
  padding: 5px 9px;
  border-radius: 16px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.2s;
  line-height: 1;
}
.font-size-toggle .fs-btn:hover { color: #fff; }
.font-size-toggle .fs-btn.active {
  background: #7c5cbf;
  color: #fff;
  box-shadow: 0 2px 6px rgba(124, 92, 191, 0.4);
}
.font-size-toggle .fs-btn-small { font-size: 11px; }
.font-size-toggle .fs-btn-large { font-size: 15px; }

/* ----- プレースホルダ配置時のスタイル -----
   ページ側に [data-font-size-toggle-here] が置かれているとき、
   スイッチはそのプレースホルダの中にinline配置される。
   プレースホルダ自体を flex 中央寄せにすることで、
   親要素（例: login.php の .logo-area）の中央配置に追従する */
[data-font-size-toggle-here] {
  margin-top: 16px;
  display: flex;
  justify-content: center;
}
/* inline配置のスイッチ: position 解除して通常の流れに従う
   （スマホ・PC問わず、すべての画面サイズで適用） */
.font-size-toggle.font-size-toggle--inline {
  position: static;
  top: auto;
  left: auto;
  right: auto;
}

/* ----- スマホ表示時（≤480px）-----
   文字サイズに関わらず常に同じレイアウトを適用:
   ・トップバーを2行構成にして、横幅が窮屈にならないようにする
     1行目: ロゴ + ユーザー名 (.topbar-left)
     2行目: 文字サイズスイッチ (左) + 継続日数 + ログアウト (右)
   ・login.php にはトップバー (.topbar) が無いため、この調整は index.php のみに適用される
   ・スイッチは:
     - login.php: position:fixed で画面左上に表示
     - index.php: トップバーの実際の flex 子要素として2行目に並ぶ（座標計算なし） */
@media (max-width: 480px) {
  .topbar {
    flex-wrap: wrap;
    row-gap: 6px;
  }
  /* topbar-left を横幅100%にして1行目を独占させる
     → 残りの子要素（toggle, 継続日数+ログアウト）は強制的に2行目へ */
  .topbar > .topbar-left {
    flex: 0 0 100%;
  }
  /* 単独配置（login.php）のスイッチ: 画面左上に固定 */
  .font-size-toggle:not(.font-size-toggle--in-topbar) {
    top: 52px;
    left: 12px;
    right: auto;
  }
  /* トップバー内のスイッチ: position 解除して通常の flex 子要素に戻す
     これでトップバー（と body の zoom）と同じレイアウトに乗るため、
     文字サイズに関わらず常に2行目左に正しく配置される */
  .font-size-toggle.font-size-toggle--in-topbar {
    position: static;
    top: auto;
    left: auto;
    right: auto;
  }
}

/* ----- 大きい文字モード -----
   body全体を1.5倍にズームすることで、
   各ページのCSSを修正せずに文字・余白などを比例拡大する。
   zoomは IE/Edge/Chrome/Safari/Firefox(126+) で利用可能。
*/
html.large-text body {
  zoom: 1.5;
  /* 拡大時にコンテンツがビューポートを超える場合のスクロール対応 */
  overflow-x: auto;
}

/* スイッチ自身は元サイズを保つよう逆スケール */
html.large-text .font-size-toggle {
  zoom: calc(2 / 3);
}

/* 大文字モード時は「文字」ラベルを隠して「標準/大」だけのスッキリした見た目に */
html.large-text .font-size-toggle .fs-label {
  display: none;
}
/* ラベルが消えた分、左パディングを右と揃えてバランスを取る */
html.large-text .font-size-toggle {
  padding-left: 5px;
}