/* zuzu-ui 共通デザイン（Bootstrap 5 上・全 zuzu アプリ共通）
 * 改版:
 * - 2026-06-03 a: 下線（text-decoration）を無効化。
 * - 2026-06-03 コメント: page-shell 参照を sample/page-shell.php に更新。
 * - 2026-06-03 zuzu-switch-field: form-control/-sm/-lg 連動・switch と状態文言の縦位置を中央揃え
 * - 2026-06-03 form-label と入力の行間 0 を .mb-3 限定から全体へ（.zuzu-switch-field 含む）
 * - 2026-06-03 ラベル付き switch: hidden 値同期（data-ok-value / data-ng-value・ymir data-on/off-label 互換）
 * - 2026-06-03 ラベル付き switch（.zuzu-switch-field + data-ok / data-ng + zuzu.js 初期化）
 * - 2026-06-03 標準シェル: ヘッダー/フッター薄グレー（zuzu-shell-header/footer）、本文白（zuzu-shell-main）。
 * - 2026-06-03 シェル/ドロワー面: zuzu-color の --zuzu-shell-header-bg / --zuzu-shell-footer-bg / --zuzu-drawer-* を参照。
 * - 2026-06-03 ヘッダー・フッター背景を個別変数で指定（chrome-bg は header へフォールバック互換）。
 * - 2026-06-03 hpo-action-bar 背景を --zuzu-action-bar-bg で指定。
 * - 2026-06-03 zuzu-shell-main 既定は幅 100%（幅制限は .container 等を明示したときのみ）。
 * - 2026-06-03 main 直下の col-* は幅 100% に揃える（狭めるときは .zuzu-content-narrow を内側に）。
 * - 2026-06-03 hpo Bootstrap 移行: シェル navbar・offcanvas nav、未移行画面用 legacy compat。
 * - 2026-06-03 サイドナビ階層（collapse・右端＞・階層2文字頭揃え）を標準化。
 * - 2026-06-03 日本語フォント・フォームラベル密着を style.css から移管。
 * - 2026-06-03 Bootstrap 5 専用化。snackbar（zuzu-core ShowSnackbar 用）。
 * - 2026-06-03 snackbar: 画面中央表示（.center）。.top は後方互換で同位置。
 * - 2026-06-03 Bootstrap table: th は text-center で統一。td は列ごとにクラス付与。
 * - 2026-06-03 zuzu-shell 内 page-footer-fixed を layout と同型に（フッターデザイン継承）。
 * - 2026-06-04 ドロワー nav active: --bs-primary ではなく --zuzu-drawer-active-bg を参照（default で primary と drawer-bg が同色のため）
 * - 2026-06-03 暗色ドロワー: .zuzu-drawer-offcanvas（白文字・nav-pills active・collapse ボタン）をエンジン標準化。
 * - 2026-06-03 ドロワー nav active/hover: リンク幅 100%（パネル余白内で左右いっぱい）。
 * - 2026-06-03 ドロワー nav: 背景帯に小さめ角丸（--zuzu-drawer-nav-radius）。
 * - 2026-06-03 sample 専用: .sample-zuzu-shell（lg 以上サイド常時・未満 offcanvas）を zuzu.css に追加。
 * - 2026-06-03 hpo-action-bar（hpo style.css 同型）。標準は non-fixed、固定は .hpo-action-bar-fixed を追加。
 * - 2026-06-03 ファイル input-group: .zuzu-file-pick-btn（input-group-text・枠色は form-control と同色）。
 * - 2026-06-03 ファイル: .zuzu-file-drop（複数・D&D。dragover 時は .zuzu-file-drop-active）。
 * - 2026-06-03 ファイル input: Firefox は display:none 非送信のため .zuzu-file-input-hidden（d-none 不可）。
 * - 2026-06-03 sample: hpo-action-bar は maincol 内（flex 下段）。fixed 時も右列内（absolute）。
 * - 2026-06-03 sample: ドロワー下端テーマ色 select（.sample-drawer-theme）。
 * - 2026-06-03 sample: theme-color.php 1 行 1 項目（.sample-theme-color-row）。
 * - 2026-06-03 checkbox/radio 横並び: .zuzu-form-check-row（改行なし・項目間に左余白）。
 *
 * 役割: 基底は bootstrap.min.css、色は zuzu-color.css、本ファイル、各アプリ style.css。
 */

/* 本文フォント（日本語 UI 共通） */
body {
  font-family: "Hiragino Kaku Gothic ProN", "Hiragino Kaku Gothic Pro", "Hiragino Sans", Meiryo, sans-serif;
}

a {
  text-decoration: none;
}

/* ラベル＋入力を1塊に（項目間の余白は .mb-3 ・row g-* 等で付ける） */
.form-label {
  margin-bottom: 0;
  line-height: 1.2;
}
.form-label + .form-control,
.form-label + .form-select,
.form-label + .zuzu-switch-field,
.form-label + textarea.form-control,
.form-label + .input-group,
.form-label + .zuzu-form-check-row {
  margin-top: 0;
}

/*
 * checkbox / radio 横並び（zuzu 既定。sample/form-checks-radios.php が正本）
 *   <div class="mb-3">
 *     <span class="form-label d-block">見出し</span>
 *     <div class="zuzu-form-check-row">
 *       <div class="form-check"><input class="form-check-input" type="radio" name="g" id="g1" value="1"><label class="form-check-label" for="g1">A</label></div>
 *       <div class="form-check">…</div>
 *     </div>
 *   </div>
 * 縦積み（.form-check だけを縦に並べる）は sample にも置かない。
 */
.zuzu-form-check-row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  column-gap: 1.25rem;
}
.zuzu-form-check-row > .form-check {
  margin-bottom: 0;
  flex: 0 0 auto;
}

/* ファイル選択: 左端フォルダ（input-group-text で form-control と同じ --bs-border-color） */
.input-group > button.zuzu-file-pick-btn.input-group-text {
  cursor: pointer;
}

/* ファイル: ドラッグ＆ドロップ対象（.zuzu-file-drop 内の input-group に枠強調） */
.zuzu-file-drop .input-group {
  transition: box-shadow 0.15s ease-in-out;
}
.zuzu-file-drop.zuzu-file-drop-active .input-group {
  box-shadow: 0 0 0 0.2rem rgba(var(--bs-primary-rgb), 0.25);
}
.zuzu-file-drop .zuzu-file-label {
  cursor: pointer;
}

/* type=file: d-none 禁止（Firefox は非表示だと multipart 送信されない）。Bootstrap visually-hidden 相当 */
input[type="file"].zuzu-file-input-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 0;
}

/*
 * ラベル付き switch（form-control-sm 同型枠・横に状態文言・hidden で POST 値）
 * 用法（.ymir の field-switch-field + hidden と同趣旨）:
 *   <div class="zuzu-switch-field form-control form-control-sm"
 *        data-ok="あり" data-ng="なし" data-ok-value="1" data-ng-value="0">
 *     <div class="form-check form-switch mb-0">
 *       <input type="hidden" class="zuzu-switch-value" name="..." value="0">
 *       <input class="form-check-input" type="checkbox" role="switch" id="..." value="1">
 *       <span class="zuzu-switch-state-label" aria-live="polite"></span>
 *     </div>
 *   </div>
 * ラベル: data-ok / data-ng（または ymir 互換 data-on-label / data-off-label）
 * 値: data-ok-value / data-ng-value（省略時 1 / 0）。切替時に .zuzu-switch-value を zuzu.js が更新。
 */
/* 枠は form-control / -sm / -lg に任せる（padding・min-height は Bootstrap 準拠） */
.zuzu-switch-field {
  display: flex;
  align-items: center;
  padding: 0;
  background-color: var(--bs-body-bg);
}
.zuzu-switch-field.form-control {
  min-height: calc(1.5em + 0.75rem + calc(var(--bs-border-width) * 2));
  padding: 0.375rem 0.75rem;
}
.zuzu-switch-field.form-control-sm {
  min-height: calc(1.5em + 0.5rem + calc(var(--bs-border-width) * 2));
  padding: 0.25rem 0.5rem;
}
.zuzu-switch-field.form-control-lg {
  min-height: calc(1.5em + 1rem + calc(var(--bs-border-width) * 2));
  padding: 0.5rem 1rem;
}
.zuzu-switch-field .form-check.form-switch {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: 100%;
  min-height: 1.5em;
  margin-bottom: 0;
  padding-left: 0;
}
.zuzu-switch-field .form-check-input {
  margin-top: 0;
  margin-left: 0;
  flex-shrink: 0;
  float: none;
}
.zuzu-switch-field .zuzu-switch-state-label {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--bs-body-color);
  user-select: none;
}
.zuzu-switch-field.form-control-sm .form-check.form-switch {
  min-height: 1.5em;
}
.zuzu-switch-field.form-control-sm .zuzu-switch-state-label {
  font-size: 0.875rem;
  line-height: 1.5;
}
.zuzu-switch-field.form-control-lg .form-check.form-switch {
  min-height: 1.5em;
}
.zuzu-switch-field.form-control-lg .zuzu-switch-state-label {
  font-size: 1.25rem;
  line-height: 1.5;
}

/*
 * サイドナビ階層（Bootstrap collapse・nav-link 見た目は各アプリ側）
 */
.zuzu-nav-collapse-chevron {
  transition: transform 0.35s ease;
}
button.zuzu-nav-collapse-btn[aria-expanded="true"] .zuzu-nav-collapse-chevron {
  transform: rotate(90deg);
}

/* --- 標準ページシェル（zuzu-ui 既定・sample/page-shell.php）
 * ヘッダー/フッター: 薄いグレー（--bs-secondary-bg ≒ Bootstrap bg-body-secondary）
 * 本文: 白（--bs-body-bg ≒ Bootstrap bg-body）
 * body にはテーマクラスのみ（例: class="blue"）。全体を gray にする bg-body-tertiary は付けない。
 * コンテンツ（.zuzu-shell-main）: 指定がなければ親幅いっぱい（width 100%）。
 * 狭めたいときは main 直下に col-* を付けず、内側に .zuzu-content-narrow または .container を置く（.cursor/rules/project.mdc）。
 */
.zuzu-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.zuzu-shell-header {
  background-color: var(--zuzu-shell-header-bg, var(--zuzu-shell-chrome-bg, var(--bs-secondary-bg)));
  flex-shrink: 0;
}
.zuzu-shell-header.bg-body-tertiary {
  background-color: var(--zuzu-shell-header-bg, var(--zuzu-shell-chrome-bg, var(--bs-secondary-bg))) !important;
}
.zuzu-shell-footer {
  background-color: var(--zuzu-shell-footer-bg, var(--zuzu-shell-chrome-bg, var(--bs-secondary-bg)));
  flex-shrink: 0;
}
.zuzu-shell-main {
  flex: 1 1 auto;
  background-color: var(--bs-body-bg);
  min-width: 0;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding-left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
  padding-right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
}
/* main 直下の col-* だけ付けた幅制限は無効（各画面で引き算しない） */
.zuzu-shell-main > [class*="col-"] {
  width: 100% !important;
  max-width: 100% !important;
  flex: 0 0 auto !important;
}
/* 意図的に狭めるブロック（main の内側に置く） */
.zuzu-content-narrow {
  width: 100%;
  max-width: 36rem;
}

/*
 * Bootstrap table 列揃え（全 zuzu アプリ共通）
 * th は text-center で統一。td は Bootstrap 既定（左）または text-center / text-end / text-start を列ごとに付与。
 */
.table > :not(caption) > thead > tr > th.text-start,
.table > :not(caption) > tbody > tr > td.text-start {
  text-align: start !important;
}
.table > :not(caption) > thead > tr > th.text-center,
.table > :not(caption) > tbody > tr > td.text-center {
  text-align: center !important;
}
.table > :not(caption) > thead > tr > th.text-end,
.table > :not(caption) > tbody > tr > td.text-end {
  text-align: end !important;
}

/* シェル内 navbar・offcanvas 等 */
.zuzu-page-navbar .zuzu-header-title {
  font-size: 1.35rem;
  margin: 0;
  line-height: 1.25;
}

/*
 * 左ドロワー（Bootstrap offcanvas・背景は zuzu-color --zuzu-drawer-*）
 * 用法: offcanvas.offcanvas-start.zuzu-drawer-offcanvas
 *       内側に .zuzu-drawer-brand（任意）+ .zuzu-drawer-nav（nav nav-pills flex-column）
 * 各リンクに text-white を付けなくてよい（エンジンで白文字を既定にする）。
 */
.zuzu-drawer-offcanvas {
  --bs-offcanvas-width: min(280px, 85vw);
  --bs-offcanvas-bg: var(--zuzu-drawer-bg, #212529);
  --bs-offcanvas-color: var(--zuzu-drawer-color, #ffffff);
  --zuzu-drawer-link-color: var(--zuzu-drawer-color, #ffffff);
  --zuzu-drawer-nav-radius: 0.375rem;
}
.zuzu-drawer-offcanvas .zuzu-drawer-sidebar-panel {
  min-height: 100%;
  width: 100%;
}
.zuzu-drawer-offcanvas .zuzu-drawer-brand {
  min-height: 3.5rem;
  display: flex;
  align-items: center;
  padding-left: 0.75rem;
  padding-right: 0.75rem;
  flex-shrink: 0;
}
.zuzu-drawer-offcanvas .zuzu-drawer-brand a,
.zuzu-drawer-offcanvas .offcanvas-header a,
.zuzu-drawer-offcanvas .offcanvas-title {
  color: var(--zuzu-drawer-link-color);
}
.zuzu-drawer-offcanvas .zuzu-drawer-brand .zuzu-drawer-brand-title {
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.25;
}
.zuzu-drawer-offcanvas .zuzu-drawer-nav .nav-item {
  width: 100%;
}
.zuzu-drawer-offcanvas .zuzu-drawer-nav .collapse > .nav {
  width: 100%;
}
/* d-inline-flex 指定があってもパネル余白（p-3 等）内で左右いっぱい */
.zuzu-drawer-nav .nav-link {
  display: flex !important;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
  gap: 0.5rem;
  border-radius: var(--zuzu-drawer-nav-radius, 0.375rem);
}
.zuzu-drawer-nav .nav-link i {
  width: 1.25em;
  text-align: center;
}
.zuzu-drawer-offcanvas .zuzu-drawer-nav .nav-link {
  color: var(--zuzu-drawer-link-color);
}
.zuzu-drawer-offcanvas .zuzu-drawer-nav .nav-link:hover,
.zuzu-drawer-offcanvas .zuzu-drawer-nav .nav-link:focus-visible {
  color: var(--zuzu-drawer-link-color);
  background-color: var(--zuzu-drawer-link-hover-bg);
}
.zuzu-drawer-offcanvas .zuzu-drawer-nav .nav-link.active,
.zuzu-drawer-offcanvas .zuzu-drawer-nav .nav-link.active:hover,
.zuzu-drawer-offcanvas .zuzu-drawer-nav .nav-link.active:focus-visible {
  color: var(--zuzu-drawer-active-fg, #ffffff);
  background-color: var(--zuzu-drawer-active-bg);
}
.zuzu-drawer-offcanvas .zuzu-nav-collapse-btn.nav-link {
  color: var(--zuzu-drawer-link-color);
}
.zuzu-drawer-offcanvas .zuzu-nav-collapse-btn.nav-link:hover,
.zuzu-drawer-offcanvas .zuzu-nav-collapse-btn.nav-link:focus-visible {
  color: var(--zuzu-drawer-link-color);
  background-color: var(--zuzu-drawer-link-hover-bg);
}
.zuzu-drawer-offcanvas .zuzu-drawer-nav .nav-item--logout .nav-link {
  color: var(--bs-danger);
  background: transparent;
}
.zuzu-drawer-offcanvas .zuzu-drawer-nav .nav-item--logout .nav-link:hover,
.zuzu-drawer-offcanvas .zuzu-drawer-nav .nav-item--logout .nav-link:focus-visible {
  color: var(--bs-danger);
  background-color: rgba(var(--bs-danger-rgb), 0.2);
}

/*
 * sample 専用（開発 sample/ のみ。本番デプロイでは sample ごと削除）
 * lg（992px）以上: 左ドロワーを常時表示。未満: ハンバーガー + Bootstrap offcanvas。
 * マークアップ: .sample-zuzu-shell > .sample-zuzu-shell-body > .sample-drawer.offcanvas-lg + .sample-zuzu-shell-maincol
 */
.sample-zuzu-shell {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.sample-zuzu-shell-body {
  flex: 1 1 auto;
  min-height: 0;
  align-items: stretch;
}
.sample-zuzu-shell-maincol {
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}
/* 標準（non-fixed）: 本文は main 内スクロール、操作バーは右列下端（左ドロワーと分離） */
.sample-zuzu-shell-maincol > .zuzu-shell-main {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  overflow-y: auto;
}
.sample-zuzu-shell-maincol > .hpo-action-bar {
  flex-shrink: 0;
  width: 100%;
}
/* sample + fixed: ビューポートではなく maincol 内に固定（後者採用） */
.sample-zuzu-shell-maincol:has(> .hpo-action-bar-fixed) > .zuzu-shell-main {
  padding-bottom: var(--hpo-action-bar-spacer);
}
.sample-zuzu-shell-maincol > .hpo-action-bar-fixed {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  flex-shrink: 0;
  width: 100%;
}
@media (min-width: 992px) {
  .sample-zuzu-shell .sample-drawer.offcanvas-lg {
    position: static;
    transform: none !important;
    visibility: visible !important;
    display: flex !important;
    flex-direction: column;
    flex-shrink: 0;
    width: var(--bs-offcanvas-width);
    height: auto;
    min-height: 100%;
    z-index: auto;
    border-right: 1px solid var(--bs-border-color-translucent, rgba(255, 255, 255, 0.15));
    background-color: var(--bs-offcanvas-bg) !important;
  }
  .sample-zuzu-shell .sample-drawer.offcanvas-lg .offcanvas-body {
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    min-height: 100%;
    background-color: var(--bs-offcanvas-bg) !important;
  }
}
@media (max-width: 991.98px) {
  .sample-zuzu-shell .sample-drawer-toggle {
    display: inline-block;
  }
}
.zuzu-drawer-offcanvas .sample-drawer-theme-label {
  color: color-mix(in srgb, var(--zuzu-drawer-color, #fff) 65%, transparent);
}
.zuzu-drawer-offcanvas .sample-drawer-theme .form-select {
  background-color: color-mix(in srgb, var(--zuzu-drawer-color, #fff) 10%, transparent);
  border-color: color-mix(in srgb, var(--zuzu-drawer-color, #fff) 25%, transparent);
  color: var(--zuzu-drawer-color, #fff);
}
.zuzu-drawer-offcanvas .sample-drawer-theme .form-select:focus {
  border-color: color-mix(in srgb, var(--zuzu-drawer-color, #fff) 45%, transparent);
  box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--zuzu-drawer-color, #fff) 15%, transparent);
}

/* sample/theme-color.php: 1 行 1 項目（右端まで） */
.sample-theme-color-form {
  width: 100%;
  max-width: 100%;
}
.sample-theme-color-row {
  display: grid;
  grid-template-columns: minmax(14rem, 2fr) 3.25rem repeat(3, minmax(3.25rem, 1fr)) minmax(5.5rem, 1.15fr);
  gap: 0.5rem 0.75rem;
  align-items: center;
  width: 100%;
  padding: 0.5rem 1rem;
  box-sizing: border-box;
}
.sample-theme-color-row-r input,
.sample-theme-color-row-g input,
.sample-theme-color-row-b input,
.sample-theme-color-row-a input {
  width: 100%;
}
.sample-theme-color-row-head {
  padding-top: 0.65rem;
  padding-bottom: 0.65rem;
}
.sample-theme-color-row-label {
  min-width: 0;
}
.sample-theme-color-row-title {
  display: block;
  font-size: 0.875rem;
  line-height: 1.35;
}
.sample-theme-color-row-code {
  display: block;
  font-size: 0.75rem;
  color: var(--bs-secondary-color);
}
.sample-theme-color-row-picker {
  justify-self: start;
}
.sample-theme-color-row-picker .form-control-color {
  width: 3rem;
  height: 2.25rem;
  padding: 0.15rem;
}
.sample-theme-color-row-r,
.sample-theme-color-row-g,
.sample-theme-color-row-b,
.sample-theme-color-row-a {
  min-width: 0;
}
.sample-theme-color-row-a .input-group-text {
  padding-left: 0.35rem;
  padding-right: 0.35rem;
}

/* 固定アクションバー（hpo / mdg 同型。編集画面の戻る・保存等） */
:root {
  --hpo-fixed-footer-extra: 1.25rem;
  --hpo-action-bar-height: 4rem;
  --hpo-action-bar-spacer: calc(var(--hpo-action-bar-height) + var(--hpo-fixed-footer-extra) + env(safe-area-inset-bottom, 0px));
}
/* hpo-action-bar-fixed: 画面全幅で下端固定（zuzu-shell 直下。Bootstrap .fixed-bottom は不要） */
.zuzu-shell:has(> .hpo-action-bar-fixed) {
  padding-bottom: var(--hpo-action-bar-spacer);
}
.zuzu-shell:has(> .hpo-action-bar-fixed) > main.zuzu-shell-main {
  padding-bottom: 0;
}
.zuzu-shell > .hpo-action-bar-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.hpo-action-bar.navbar {
  --bs-navbar-padding-y: 0;
  padding-top: 0;
}
.hpo-action-bar {
  background-color: var(--zuzu-action-bar-bg, var(--bs-body-bg));
  min-height: var(--hpo-action-bar-height);
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 30;
}
.hpo-action-bar.bg-body-tertiary {
  background-color: var(--zuzu-action-bar-bg, var(--bs-tertiary-bg)) !important;
}
.hpo-action-bar .hpo-action-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  min-width: 5.5rem;
  min-height: var(--hpo-action-bar-height);
  padding: 0.35rem 0.75rem;
  border: 0;
  border-radius: 0;
  text-decoration: none;
  font-size: 0.75rem;
  line-height: 1.2;
}
.hpo-action-bar .hpo-action-item i {
  font-size: 1rem;
  line-height: 1;
}
.hpo-action-bar .hpo-action-item-back {
  color: rgba(0, 0, 0, 0.45);
}
.hpo-action-bar .hpo-action-item-primary {
  color: var(--bs-primary);
  font-weight: 600;
}
.hpo-action-bar .hpo-action-item-primary.hpo-action-item-success {
  color: var(--bs-success);
}
.hpo-action-bar .hpo-action-divider-start {
  border-left: 1px solid var(--bs-border-color);
}
.hpo-action-bar .hpo-action-divider-end {
  border-right: 1px solid var(--bs-border-color);
}

/* snackbar（トースト・zuzu-core SetSnackbar / ShowSnackbar 用・ymir 同型） */
.snackbar {
  position: fixed;
  inset: 50% auto auto 50%;
  inline-size: min(36rem, 92vw);
  z-index: 2000;
  visibility: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  box-sizing: border-box;
  padding: 0.85rem 1.15rem;
  border-radius: var(--bs-border-radius, 0.375rem);
  border: 1px solid transparent;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  text-align: center;
  font-size: 1.125rem;
  font-weight: 400;
  line-height: 1.45;
  transform: translate(-50%, calc(-50% + 0.75rem));
  opacity: 0;
  transition: transform 0.2s ease, opacity 0.2s ease, visibility 0.2s ease;
}
.snackbar.center,
.snackbar.top {
  inset: 50% auto auto 50%;
}
.snackbar:is(.active) {
  visibility: visible;
  transform: translate(-50%, -50%);
  opacity: 1;
}
/* save モード（SetSnackbar save → class secondary） */
.snackbar.secondary {
  color: #1b5e20;
  background-color: #e8f5e9;
  border-color: #c8e6c9;
}
.snackbar.error {
  color: #b71c1c;
  background-color: #ffebee;
  border-color: #ffcdd2;
}
.snackbar.tertiary {
  color: #fff;
  background-color: #5d5f61;
  border-color: transparent;
}
.snackbar.primary {
  color: #fff;
  background-color: #323232;
  border-color: transparent;
}
.snackbar i {
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
}

/* --- legacy zuzu compat（Bootstrap 移行完了まで・段階的に削除） --- */
.z-row { display: flex; flex-wrap: wrap; margin: 0; padding: 0; }
.z-col { display: block; flex: 1 0 auto; box-sizing: border-box; width: 100%; margin: 0; padding: 0 2px; }
.z-fix { flex-grow: 0 !important; }
/* 2026-04-14 幅クラス（.z-s* 等）で列幅を切るときは .z-no-grow を併用（.z-row 内で均等2列は sample/grid.php） */
.z-no-grow { flex-grow: 0 !important; }
.z-max { flex: 1 1 auto; min-width: 0; }

/* s: base */
.z-s1 { width: 1%; }
.z-s2 { width: 2%; }
.z-s3 { width: 3%; }
.z-s4 { width: 4%; }
.z-s5 { width: 5%; }
.z-s6 { width: 6%; }
.z-s7 { width: 7%; }
.z-s8 { width: 8%; }
.z-s9 { width: 9%; }
.z-s10 { width: 10%; }
.z-s11 { width: 11%; }
.z-s12 { width: 12%; }
.z-s13 { width: 13%; }
.z-s14 { width: 14%; }
.z-s15 { width: 15%; }
.z-s16 { width: 16%; }
.z-s17 { width: 17%; }
.z-s18 { width: 18%; }
.z-s19 { width: 19%; }
.z-s20 { width: 20%; }
.z-s21 { width: 21%; }
.z-s22 { width: 22%; }
.z-s23 { width: 23%; }
.z-s24 { width: 24%; }
.z-s25 { width: 25%; }
.z-s26 { width: 26%; }
.z-s27 { width: 27%; }
.z-s28 { width: 28%; }
.z-s29 { width: 29%; }
.z-s30 { width: 30%; }
.z-s31 { width: 31%; }
.z-s32 { width: 32%; }
.z-s33 { width: 33%; }
.z-s34 { width: 34%; }
.z-s35 { width: 35%; }
.z-s36 { width: 36%; }
.z-s37 { width: 37%; }
.z-s38 { width: 38%; }
.z-s39 { width: 39%; }
.z-s40 { width: 40%; }
.z-s41 { width: 41%; }
.z-s42 { width: 42%; }
.z-s43 { width: 43%; }
.z-s44 { width: 44%; }
.z-s45 { width: 45%; }
.z-s46 { width: 46%; }
.z-s47 { width: 47%; }
.z-s48 { width: 48%; }
.z-s49 { width: 49%; }
.z-s50 { width: 50%; }
.z-s51 { width: 51%; }
.z-s52 { width: 52%; }
.z-s53 { width: 53%; }
.z-s54 { width: 54%; }
.z-s55 { width: 55%; }
.z-s56 { width: 56%; }
.z-s57 { width: 57%; }
.z-s58 { width: 58%; }
.z-s59 { width: 59%; }
.z-s60 { width: 60%; }
.z-s61 { width: 61%; }
.z-s62 { width: 62%; }
.z-s63 { width: 63%; }
.z-s64 { width: 64%; }
.z-s65 { width: 65%; }
.z-s66 { width: 66%; }
.z-s67 { width: 67%; }
.z-s68 { width: 68%; }
.z-s69 { width: 69%; }
.z-s70 { width: 70%; }
.z-s71 { width: 71%; }
.z-s72 { width: 72%; }
.z-s73 { width: 73%; }
.z-s74 { width: 74%; }
.z-s75 { width: 75%; }
.z-s76 { width: 76%; }
.z-s77 { width: 77%; }
.z-s78 { width: 78%; }
.z-s79 { width: 79%; }
.z-s80 { width: 80%; }
.z-s81 { width: 81%; }
.z-s82 { width: 82%; }
.z-s83 { width: 83%; }
.z-s84 { width: 84%; }
.z-s85 { width: 85%; }
.z-s86 { width: 86%; }
.z-s87 { width: 87%; }
.z-s88 { width: 88%; }
.z-s89 { width: 89%; }
.z-s90 { width: 90%; }
.z-s91 { width: 91%; }
.z-s92 { width: 92%; }
.z-s93 { width: 93%; }
.z-s94 { width: 94%; }
.z-s95 { width: 95%; }
.z-s96 { width: 96%; }
.z-s97 { width: 97%; }
.z-s98 { width: 98%; }
.z-s99 { width: 99%; }
.z-s100 { width: 100%; }

@media only screen and (min-width: 768px) {
.z-m1 { width: 1%; }
.z-m2 { width: 2%; }
.z-m3 { width: 3%; }
.z-m4 { width: 4%; }
.z-m5 { width: 5%; }
.z-m6 { width: 6%; }
.z-m7 { width: 7%; }
.z-m8 { width: 8%; }
.z-m9 { width: 9%; }
.z-m10 { width: 10%; }
.z-m11 { width: 11%; }
.z-m12 { width: 12%; }
.z-m13 { width: 13%; }
.z-m14 { width: 14%; }
.z-m15 { width: 15%; }
.z-m16 { width: 16%; }
.z-m17 { width: 17%; }
.z-m18 { width: 18%; }
.z-m19 { width: 19%; }
.z-m20 { width: 20%; }
.z-m21 { width: 21%; }
.z-m22 { width: 22%; }
.z-m23 { width: 23%; }
.z-m24 { width: 24%; }
.z-m25 { width: 25%; }
.z-m26 { width: 26%; }
.z-m27 { width: 27%; }
.z-m28 { width: 28%; }
.z-m29 { width: 29%; }
.z-m30 { width: 30%; }
.z-m31 { width: 31%; }
.z-m32 { width: 32%; }
.z-m33 { width: 33%; }
.z-m34 { width: 34%; }
.z-m35 { width: 35%; }
.z-m36 { width: 36%; }
.z-m37 { width: 37%; }
.z-m38 { width: 38%; }
.z-m39 { width: 39%; }
.z-m40 { width: 40%; }
.z-m41 { width: 41%; }
.z-m42 { width: 42%; }
.z-m43 { width: 43%; }
.z-m44 { width: 44%; }
.z-m45 { width: 45%; }
.z-m46 { width: 46%; }
.z-m47 { width: 47%; }
.z-m48 { width: 48%; }
.z-m49 { width: 49%; }
.z-m50 { width: 50%; }
.z-center { text-align: center !important; }
.z-right { text-align: right !important; }
.z-items-center { align-items: center !important; }
.z-justify-center { justify-content: center !important; }
.z-middle {
.layout {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.layout > .container {
  flex: 1 1 auto;
  display: flex;
  min-height: 0;
}
.layout > .container > aside.menu {
  min-width: 12rem;
  flex-shrink: 0;
}
/* aside.menu の .z-menu-item（zuzu-color.css の --menu-link 等で色が変わる） */
.z-menu-item {
  margin-bottom: 0.25rem;
}
.z-menu-item a {
  display: block;
  padding: 0.35rem 0.75rem;
  border-radius: 0.25rem;
  color: var(--menu-link, #1a1c1e);
}
.z-menu-item a i {
  margin-inline-end: 0.5rem;
  width: 1.25em;
  text-align: center;
}
.z-menu-item a:hover {
  background: var(--menu-link-hover-bg, rgba(0, 0, 0, 0.06));
  color: var(--menu-link-hover, #0061a4);
  border-radius: 0.25rem;
}
.z-menu-item.active a {
  background: var(--menu-link-hover-bg, rgba(0, 0, 0, 0.06));
  color: var(--menu-link-hover, #0061a4);
  border-radius: 0.25rem;
  font-weight: 600;
}
.layout > .container > main {
  flex: 1 1 auto;
  min-width: 0;
}
.layout > footer {
  flex-shrink: 0;
}

/* --- Navigation rail（s サイズで aside をアイコンのみの細いバーに。.z-rail-s で常時指定可） --- */
/* --- margin top --- */
.z-mt4   { margin-top:  4px !important; }
.z-mt12  { margin-top: 12px !important; }
.z-card {
  background: var(--surface, #fafafa);
  border: 1px solid #ccc;
  border-radius: 0.25rem;
  overflow: hidden;
}
.z-card-img {
  width: 100%;
  overflow: hidden;
}
.z-card-img img {
  display: block;
  width: 100%;
  height: auto;
  vertical-align: top;
}
.z-card-header {
  padding: 0.75rem 1rem;
  font-weight: 600;
  font-size: 1rem;
  border-bottom: 1px solid #ddd;
  color: var(--on-surface, #333);
}
.z-card-body {
  padding: 1rem;
  line-height: 1.5;
  color: var(--on-surface, #333);
}
.z-card-footer {
  padding: 0.75rem 1rem;
  border-top: 1px solid #ddd;
}
.layout > footer:has(.z-footer-buttons),
.zuzu-shell > footer.page-footer-fixed:has(.z-footer-buttons) {
  padding: 0;
  border-top: none;
}

/* ========== footer 操作行（リンク風・左 Back / 中央スロット / 右など） ========== */
/* 2026-04-15 括り線は隣接子に border-left（先頭には付かない）。ホバーは角丸の薄い背景 */
/* 2026-04-15 上下パディングはバーではなく __action に任せる（タップ領域を確保） */
/* 2026-04-15 フッター操作バー高さ（2.75rem 前後と 4rem の中間） */
/* 改版:
 * - 2026-06-02 z-footer-buttons__action の基本 font-size を 1rem に統一。
 */
.z-footer-buttons {
  display: flex;
  flex-wrap: nowrap;
  align-items: stretch;
  width: 100%;
  min-height: 3.375rem;
  box-sizing: border-box;
  background: var(--surface-container, #f5f5f5);
  border-top: 1px solid var(--z-border-color, #ccc);
  padding: 0 0.35rem;
}
.z-footer-buttons > * + * {
  border-left: 1px solid rgba(0, 0, 0, 0.07);
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.4);
}
.z-footer-buttons__slot {
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  align-self: stretch;
}
.z-footer-buttons__action {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  flex: 0 0 auto;
  align-self: stretch;
  margin: 0;
  padding: 0.55rem 0.85rem;
  min-height: 0;
  border: none;
  border-radius: 0.3rem;
  background: transparent;
  color: var(--on-surface-variant, #444);
  font: inherit;
  font-size: 1rem;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: background 0.15s ease, color 0.15s ease;
}
.z-footer-buttons__action:hover:not(:disabled) {
  background: rgba(0, 0, 0, 0.06);
  color: var(--on-surface, #1a1c1e);
}
.z-footer-buttons__action:focus-visible {
  outline: 2px solid var(--primary, #0061a4);
  outline-offset: 2px;
}
.z-footer-buttons__action:disabled {
  opacity: 0.42;
  cursor: default;
}
.z-footer-buttons__action .fas,
.z-footer-buttons__action .far {
  font-size: 1rem;
  line-height: 1;
  opacity: 0.9;
}

/* ========== layout 余白・field・button（サンプル等で使用） ========== */
.layout > header.page-header-fixed,
.layout-side > .container > .layout-body > header.page-header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  max-width: 100vw;
  box-sizing: border-box;
  background: var(--surface, #fff);
  padding-top: env(safe-area-inset-top, 0px);
  padding-right: 0.75rem;
  padding-bottom: 0;
  padding-left: 0.75rem;
}
/* safe-area は header の padding-top のみ。本文オフセットはヘッダー実高＋ノッチ分 */
.layout:has(> header.page-header-fixed) > .container {
  padding-top: calc(var(--page-header-fixed-spacer, 2.75rem) + env(safe-area-inset-top, 0px));
}
.layout-side:has(> .container > .layout-body > header.page-header-fixed) > .container {
  padding-top: calc(var(--page-header-fixed-spacer-side, 2.85rem) + env(safe-area-inset-top, 0px));
}
.field { margin-bottom: 0.5rem; }
.field label { display: block; }
.field-inner { padding: 0.5rem; border: 1px solid #ccc; border-radius: 0.25rem; }
.field-inner.field-radio { display: flex; align-items: center; flex-wrap: wrap; box-sizing: border-box; }
.field input[type="text"],
.field input[type="email"],
.field input[type="number"],
.field input[type="password"],
.field input[type="search"],
.field input[type="url"],
.field input[type="date"],
.field input[type="time"],
.field input[type="tel"],
.field input[type="file"],
.field textarea,
.field select { width: 100%; box-sizing: border-box; padding: 0.5rem; border: 1px solid #ccc; border-radius: 0.25rem; background: var(--field-input-bg, #fff); color: inherit; }
.field textarea { min-height: 4rem; resize: vertical; }
/* type=file: 外枠・余白は text と同じ。参照ボタンは非表示→枠全体クリックでファイル選択 */
.field input[type="file"] {
  box-sizing: border-box;
  font: inherit;
  line-height: 1.25;
  /* text 系と同じ padding(0.5rem×2)＋行の高さに合わせる（単独配置時） */
  min-height: calc(1.25em + 1rem);
  display: flex;
  align-items: center;
  background: var(--field-input-bg, #fff);
  /* 「ファイルを選択…」系の文言を placeholder っぽいトーンに（選択後のファイル名もややグレー） */
  color: #666;
  cursor: pointer;
}
.field input[type="file"]::file-selector-button {
  display: none;
}
.field input[type="file"]::-webkit-file-upload-button {
  display: none;
}
/* date/time: ブラウザ標準の別枠にせず、text 系と同じボックス・行高に揃える */
.field input[type="date"],
.field input[type="time"] {
  line-height: 1.25;
  min-height: calc(1.25em + 1rem);
  background: var(--field-input-bg, #fff);
  color: inherit;
}
.field input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.field input[type="time"]::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}
.field input[type="date"]::-webkit-datetime-edit,
.field input[type="time"]::-webkit-datetime-edit {
  padding: 0;
.z-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.5rem 1rem;
  border: 1px solid #1976d2;
  border-radius: 0.25rem;
  background-color: #2196f3;
  color: #fff;
  font-size: inherit;
  line-height: 1.25;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
}
/* button 要素のグローバル :hover 背景を上書きし、白文字を保ちつつホバー差が分かる程度に明るく見せる（2026-04-15 0.1→0.2） */
button.z-button:hover,
a.z-button:hover,
.field input[type="submit"].z-button:hover,
.field input[type="button"].z-button:hover {
  background-color: #2196f3;
  box-shadow: inset 0 0 0 9999px rgba(255, 255, 255, 0.2);
}
.z-button:focus-visible {
  outline: 2px solid rgba(33, 150, 243, 0.45);
  outline-offset: 2px;
}
.z-button.is-disabled,
.z-button[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.z-items-end { align-items: flex-end !important; }
.z-mb8 { margin-bottom: 8px !important; }
.z-ml8 { margin-left: 8px !important; }

.layout > footer.page-footer-fixed,
.layout-side > .container > .layout-body > footer.page-footer-fixed,
.zuzu-shell > footer.page-footer-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 30;
  max-width: 100vw;
  box-sizing: border-box;
  background: var(--zuzu-shell-footer-bg, var(--zuzu-shell-chrome-bg, var(--bs-body-bg, #fff)));
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.layout:has(> footer.page-footer-fixed) > .container,
.zuzu-shell:has(> footer.page-footer-fixed) > main.zuzu-shell-main {
  padding-bottom: var(--page-footer-fixed-spacer, calc(3.375rem + env(safe-area-inset-bottom, 0px)));
}
.layout-side:has(> .container > .layout-body > footer.page-footer-fixed) > .container > .layout-body > main {
  padding-bottom: var(--page-footer-fixed-spacer, calc(3.375rem + env(safe-area-inset-bottom, 0px)));
}
/* ========== drawer（左・右・下スライド、ハンバーガーメニュー用） ========== */
.z-drawer-wrap {
  position: fixed;
  inset: 0;
  z-index: 1000;
  visibility: hidden;
  pointer-events: none;
}
.z-drawer-wrap.is-open {
  visibility: visible;
  pointer-events: auto;
}
.z-drawer-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.25s ease;
  cursor: pointer;
}
.z-drawer-wrap.is-open .z-drawer-backdrop {
  opacity: 1;
}
.z-drawer {
  position: fixed;
  z-index: 1001;
  background: var(--surface, #fff);
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease;
  overflow: auto;
  display: flex;
  flex-direction: column;
}
.z-drawer-left {
  left: 0;
  top: 0;
  bottom: 0;
  width: 18rem;
  max-width: 85vw;
  transform: translateX(-100%);
}
.z-drawer-wrap.is-open .z-drawer-left {
  transform: translateX(0);
}
.z-drawer-right {
  right: 0;
  top: 0;
  bottom: 0;
  width: 18rem;
  max-width: 85vw;
  transform: translateX(100%);
}
.z-drawer-wrap.is-open .z-drawer-right {
  transform: translateX(0);
}
.z-drawer-bottom {
  left: 0;
  right: 0;
  bottom: 0;
  height: 50vh;
  max-height: 85vh;
  transform: translateY(100%);
}
.z-drawer-wrap.is-open .z-drawer-bottom {
  transform: translateY(0);
}
.z-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid #ddd;
  flex-shrink: 0;
}
.z-drawer-body {
  padding: 1rem;
  overflow: auto;
  flex: 1 1 auto;
  min-height: 0;
}
.z-drawer-body nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.z-drawer-body .z-menu-item a {
  display: block;
  padding: 0.5rem 0.75rem;
  border-radius: 0.25rem;
  color: var(--menu-link, #1a1c1e);
  text-decoration: none;
}
.z-drawer-body .z-menu-item a:hover {
  background: var(--menu-link-hover-bg, rgba(0, 0, 0, 0.06));
  color: var(--menu-link-hover, #0061a4);
}
.z-drawer-close {
  padding: 0.25rem;
  border: none;
  background: none;
  font-size: 1.5rem;
  line-height: 1;
  color: #666;
  cursor: pointer;
}
.z-drawer-close:hover {
  color: #333;
}
.z-drawer-trigger {
  padding: 0.5rem;
  border: none;
  background: none;
  color: inherit;
  cursor: pointer;
  font-size: 1.25rem;
  line-height: 1;

/* legacy 色ユーティリティ（旧 zuzu-color・z-button 等・移行完了まで） */
.blue, .blue6 { background-color: #2196f3 !important; color: #fff !important; }
.blue-border { border-color: #2196f3 !important; }
.green, .green6 { background-color: #4caf50 !important; color: #fff !important; }
.green-border { border-color: #4caf50 !important; }
.orange, .orange6 { background-color: #ff9800 !important; color: #222 !important; }
.orange-border { border-color: #ff9800 !important; }
button.z-button.blue, a.z-button.blue, .z-button.blue { border-color: #1976d2; }
button.z-button.green, a.z-button.green, .z-button.green { border-color: #388e3c; }
button.z-button.orange, a.z-button.orange, .z-button.orange { border-color: #f57c00; color: #222; }