/* ===== 共通スタイル（デザイントークンと共通部品） =====
   機能ごとの見た目は schedule.css / bulletin.css / address.css に書く。
   色・余白はここの変数を使うこと。
   値の根拠: docs/research/reports/社内グループウェア UI デザイン方針.md（WCAG 2.2 AA を目標にした調整）

   文字の決まり
   - 太さは 400 と 700 の 2 段だけ（Windows の BIZ UDPゴシックに中間の太さがないため）
   - 12px 未満は使わない。12px（太字）は 2〜6 字の短いラベル（バッジ・タグ・表見出し）だけ
   - 日時・件数・補足など読ませる補助情報は 13px、PC の本文・一覧・操作は 14px、読む文章は 16px
   - 幅 720px 以下（スマホ）では本文・一覧・入力欄を 16px にする（iOS は 16px 未満の入力欄で画面を拡大するため） */
:root {
  --c-bg: #f4f6f9;
  --c-surface: #ffffff;
  --c-surface-2: #f8fafc;
  --c-border: #dde3ea;          /* 区切り線・カードの枠 */
  --c-border-strong: #c3ccd7;   /* ボタンの枠・点線の枠 */
  --c-border-input: #7d8796;    /* 入力欄・選択欄・検索欄の枠（白地 3.63:1） */
  --c-text: #1f2937;            /* 本文（白地 14.68:1） */
  --c-text-2: #5b6573;          /* 補助（5.91:1） */
  --c-text-3: #636a75;          /* 日時・件数・補足など読ませる補助文字（白地 5.46:1・地 5.04:1） */
  --c-text-disabled: #8a94a3;   /* 押せない状態と飾りのアイコンだけ（文字には使わない） */
  --c-primary: #2b66cc;         /* アクセント（白地 5.42:1、淡い青の上 4.73:1、白文字 5.42:1） */
  --c-primary-hover: #245bc0;
  --c-primary-weak: #e8f0fd;
  --c-focus: #1d4ed8;           /* フォーカスの輪郭（白地 6.70:1） */
  --c-danger: #c53030;
  --c-danger-weak: #fdecec;
  --c-warn: #8a5a12;
  --c-warn-weak: #fdf4e3;
  --c-ok: #276749;
  --c-ok-weak: #e6f4ec;
  --c-sat: #2b6cb0;  /* 土曜 */
  --c-sun: #c53030;  /* 日曜・祝日 */
  --c-today: #fff8db;
  --radius: 8px;
  --radius-sm: 5px;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .08);
  --shadow-lg: 0 12px 32px rgba(16, 24, 40, .18);
  --header-h: 52px;
  --font: "Hiragino Sans", "Hiragino Kaku Gothic ProN", "BIZ UDPGothic", Meiryo, "Yu Gothic UI", sans-serif;
}

* { box-sizing: border-box; }
svg.ico { width: 16px; height: 16px; flex: none; }
html, body { margin: 0; padding: 0; }
html { scroll-padding-top: 60px; } /* 固定ヘッダー（52px）の下にフォーカスした要素が隠れないように */
body { font-family: var(--font); font-size: 14px; line-height: 1.6; color: var(--c-text); background: var(--c-bg); }
a { color: var(--c-primary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; line-height: 1.4; font-weight: 700; }
h1 { font-size: 20px; }
h2 { font-size: 17px; }
h3 { font-size: 15px; }
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* ===== フォーカス（キーボード操作で、いまどこにいるかを必ず見せる） ===== */
:focus-visible { outline: 2px solid var(--c-focus); outline-offset: 2px; }

/* ===== ヘッダー ===== */
.app-header {
  position: sticky; top: 0; z-index: 50;
  height: var(--header-h); display: flex; align-items: center; gap: 12px;
  padding: 0 16px; background: var(--c-surface); border-bottom: 1px solid var(--c-border);
}
.brand { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--c-text); white-space: nowrap; }
.brand:hover { text-decoration: none; }
.brand img { width: 26px; height: 26px; }
.app-nav { display: flex; gap: 2px; margin-left: 8px; }
.app-nav a {
  display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-sm);
  color: var(--c-text-2); white-space: nowrap;
}
.app-nav a:hover { background: var(--c-surface-2); text-decoration: none; color: var(--c-text); }
.app-nav a.active { background: var(--c-primary-weak); color: var(--c-primary); font-weight: 700; }
.app-nav .ico { width: 18px; height: 18px; }
.header-spacer { flex: 1; }
.header-search { position: relative; }
.header-search input {
  width: 220px; height: 34px; padding: 0 10px 0 32px; border: 1px solid var(--c-border-input); border-radius: 999px; background: var(--c-surface);
}
.header-search .ico { position: absolute; left: 10px; top: 8px; width: 18px; height: 18px; color: var(--c-text-2); pointer-events: none; }
/* 幅が狭いときに検索欄の代わりに出す「検索」ボタン */
.header-search-link {
  display: none; align-items: center; gap: 4px; height: 36px; padding: 0 10px; border-radius: var(--radius-sm);
  color: var(--c-text-2); white-space: nowrap;
}
.header-search-link:hover { background: var(--c-surface-2); color: var(--c-text); text-decoration: none; }
.header-search-link .ico { width: 18px; height: 18px; }
.icon-btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; border: 0; border-radius: 50%; background: transparent; color: var(--c-text-2); cursor: pointer;
}
.icon-btn:hover { background: var(--c-surface-2); color: var(--c-text); }
.icon-btn .ico { width: 20px; height: 20px; }
.badge-dot {
  position: absolute; top: 0; right: -2px; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 10px;
  background: var(--c-danger); color: #fff; font-size: 12px; font-weight: 700; line-height: 20px; text-align: center;
}
.user-menu { position: relative; }
.user-menu-btn { display: flex; align-items: center; gap: 8px; border: 0; background: transparent; cursor: pointer; padding: 4px 8px; border-radius: var(--radius-sm); }
.user-menu-btn:hover { background: var(--c-surface-2); }
.dropdown {
  position: absolute; right: 0; top: calc(100% + 4px); min-width: 180px; padding: 6px; background: var(--c-surface);
  border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow-lg); z-index: 60;
}
.dropdown a, .dropdown button {
  display: block; width: 100%; padding: 8px 10px; border: 0; background: none; text-align: left; color: var(--c-text); border-radius: var(--radius-sm); cursor: pointer;
}
.dropdown a:hover, .dropdown button:hover { background: var(--c-surface-2); text-decoration: none; }
.dropdown hr { border: 0; border-top: 1px solid var(--c-border); margin: 4px 0; }

/* ===== アバター ===== */
.avatar {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%; color: #fff; font-size: 13px; font-weight: 700;
}
.avatar.sm { width: 22px; height: 22px; font-size: 12px; }
.avatar.lg { width: 40px; height: 40px; font-size: 16px; }

/* ===== レイアウト ===== */
main.main { max-width: 1400px; margin: 0 auto; padding: 20px 20px 48px; } /* ページの入れ物（<main> 要素だけ。部品の .main と区別する） */
main.main.wide { max-width: none; }
.page-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.page-head h1 { margin-right: auto; }
.toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.toolbar .sep { width: 1px; height: 24px; background: var(--c-border); margin: 0 4px; }
.grid-2 { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 16px; }
.split { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 16px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.row { display: flex; align-items: center; gap: 8px; }
.row.wrap { flex-wrap: wrap; }
.grow { flex: 1; }
.muted { color: var(--c-text-2); }
.faint { color: var(--c-text-3); }
.small { font-size: 13px; }
.nowrap { white-space: nowrap; }
.ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pre { white-space: pre-wrap; word-break: break-word; }
/* 画面には出さず、読み上げソフトにだけ伝える文字 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ===== カード ===== */
.card { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius); box-shadow: var(--shadow); }
.card-head { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--c-border); }
.card-head h2, .card-head h3 { margin-right: auto; }
.card-body { padding: 16px; }
.card-body.tight { padding: 0; }
.card-foot { padding: 10px 16px; border-top: 1px solid var(--c-border); background: var(--c-surface-2); border-radius: 0 0 var(--radius) var(--radius); }

/* ===== ボタン ===== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 14px;
  border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); background: var(--c-surface); color: var(--c-text);
  font-weight: 700; cursor: pointer; white-space: nowrap; text-decoration: none !important;
}
.btn:hover { background: var(--c-surface-2); }
.btn:disabled { opacity: .5; cursor: default; }
.btn .ico { width: 16px; height: 16px; }
.btn-primary { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.btn-primary:hover { background: var(--c-primary-hover); }
.btn-danger { color: var(--c-danger); border-color: #f0c2c2; }
.btn-danger:hover { background: var(--c-danger-weak); }
.btn-ghost { border-color: transparent; background: transparent; }
.btn-ghost:hover { background: var(--c-surface-2); }
.btn-sm { min-height: 28px; padding: 0 10px; font-size: 13px; }
/* フォームの主ボタン（登録する・保存する）は少し大きく */
.card-foot .btn-primary, .form-actions .btn-primary, .modal-foot .btn-primary { min-height: 40px; padding: 0 20px; }
.btn-group { display: inline-flex; }
.btn-group .btn { border-radius: 0; margin-left: -1px; }
.btn-group .btn:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); margin-left: 0; }
.btn-group .btn:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.btn-group .btn.active { background: var(--c-primary-weak); color: var(--c-primary); border-color: var(--c-primary); position: relative; z-index: 1; }
.link-btn { border: 0; background: none; color: var(--c-primary); cursor: pointer; padding: 0; }
.link-btn:hover { text-decoration: underline; }

/* ===== フォーム ===== */
.form { display: flex; flex-direction: column; gap: 14px; }
.field { display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 12px; align-items: start; }
.field > label, .field > .label { padding-top: 7px; font-weight: 700; color: var(--c-text-2); }
.field .req::after { content: " *"; color: var(--c-danger); }
.field .help { margin-top: 4px; font-size: 13px; color: var(--c-text-3); }
.input, .select, .textarea {
  width: 100%; min-height: 34px; padding: 6px 10px; border: 1px solid var(--c-border-input); border-radius: var(--radius-sm); background: #fff;
}
.input:focus, .select:focus, .textarea:focus, .rte:focus { outline: 2px solid var(--c-focus); outline-offset: 0; border-color: var(--c-focus); }
.input::placeholder, .textarea::placeholder { color: var(--c-text-3); }
.input.inline, .select.inline { width: auto; }
.textarea { min-height: 100px; resize: vertical; }
.check { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.radio-group { display: flex; gap: 16px; flex-wrap: wrap; padding-top: 6px; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; padding-top: 4px; }
.error-text { color: var(--c-danger); font-size: 13px; }

/* ===== 表 ===== */
.table { width: 100%; border-collapse: collapse; }
.table th, .table td { padding: 8px 12px; border-bottom: 1px solid var(--c-border); text-align: left; vertical-align: top; }
.table th { background: var(--c-surface-2); color: var(--c-text-2); font-weight: 700; font-size: 12px; white-space: nowrap; }
.table tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: #fafcff; }
.table.clickable tbody tr { cursor: pointer; }

/* ===== リスト ===== */
.list { list-style: none; margin: 0; padding: 0; }
.list > li { padding: 10px 16px; border-bottom: 1px solid var(--c-border); }
.list > li:last-child { border-bottom: 0; }
.list > li.clickable { cursor: pointer; }
.list > li.clickable:hover { background: #fafcff; }

/* ===== バッジ・タグ（12px は短いラベルだけ） ===== */
.badge { display: inline-flex; align-items: center; min-height: 20px; padding: 0 8px; border-radius: 10px; font-size: 12px; font-weight: 700; background: var(--c-surface-2); color: var(--c-text-2); border: 1px solid var(--c-border); white-space: nowrap; }
.badge.primary { background: var(--c-primary-weak); color: var(--c-primary); border-color: #c9daf8; }
.badge.danger { background: var(--c-danger-weak); color: var(--c-danger); border-color: #f5caca; }
.badge.warn { background: var(--c-warn-weak); color: var(--c-warn); border-color: #f3dcae; }
.badge.ok { background: var(--c-ok-weak); color: var(--c-ok); border-color: #bfe3cf; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--c-surface-2); border: 1px solid var(--c-border); font-size: 13px; }
.chip button { border: 0; background: none; cursor: pointer; color: var(--c-text-2); padding: 0 0 0 2px; }

/* ===== タブ ===== */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--c-border); margin-bottom: 12px; overflow-x: auto; }
.tabs a, .tabs button { padding: 8px 14px; border: 0; background: none; color: var(--c-text-2); font-weight: 700; border-bottom: 3px solid transparent; cursor: pointer; white-space: nowrap; }
.tabs a:hover, .tabs button:hover { color: var(--c-text); text-decoration: none; }
.tabs .active { color: var(--c-primary); border-bottom-color: var(--c-primary); }
/* タブの帯は横スクロールの枠なので、外側の輪郭は上下が切れる。輪郭はタブの内側に描く */
.tabs a:focus-visible, .tabs button:focus-visible { outline-offset: -2px; }

/* ===== サイドナビ（カテゴリ・ブックなど） ===== */
.side-nav { list-style: none; margin: 0; padding: 6px; }
.side-nav a { display: flex; align-items: center; gap: 6px; padding: 7px 10px; border-radius: var(--radius-sm); color: var(--c-text); }
.side-nav a:hover { background: var(--c-surface-2); text-decoration: none; }
.side-nav a.active { background: var(--c-primary-weak); color: var(--c-primary); font-weight: 700; }
.side-nav .count { margin-left: auto; font-size: 12px; color: var(--c-text-3); }
.side-nav .heading { padding: 10px 10px 4px; font-size: 12px; font-weight: 700; color: var(--c-text-3); }

/* ===== 空状態・読み込み ===== */
.empty { padding: 32px 16px; text-align: center; color: var(--c-text-3); }
.loading { padding: 32px; text-align: center; color: var(--c-text-3); }
.error-box { padding: 16px; border: 1px solid #f5caca; background: var(--c-danger-weak); color: var(--c-danger); border-radius: var(--radius); }
.notice { padding: 10px 14px; border-radius: var(--radius); background: var(--c-primary-weak); color: #1d4ea6; }
.notice.warn { background: var(--c-warn-weak); color: var(--c-warn); }

/* ===== モーダル ===== */
.modal-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; background: rgba(15, 23, 42, .45); overflow: auto; }
.modal { width: 100%; max-width: 640px; background: var(--c-surface); border-radius: 12px; box-shadow: var(--shadow-lg); }
.modal.lg { max-width: 920px; }
.modal.sm { max-width: 420px; }
.modal-head { display: flex; align-items: center; gap: 8px; padding: 14px 18px; border-bottom: 1px solid var(--c-border); }
.modal-head h2 { margin-right: auto; }
.modal-body { padding: 18px; max-height: 70vh; overflow: auto; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--c-border); background: var(--c-surface-2); border-radius: 0 0 12px 12px; }

/* ===== トースト ===== */
#toasts { position: fixed; right: 16px; bottom: 16px; z-index: 200; display: flex; flex-direction: column; gap: 8px; }
.toast { min-width: 240px; max-width: 420px; padding: 10px 14px; border-radius: var(--radius); background: #1f2937; color: #fff; box-shadow: var(--shadow-lg); animation: toast-in .15s ease-out; }
.toast.error { background: var(--c-danger); }
.toast.ok { background: var(--c-ok); }
@keyframes toast-in { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }

/* ===== メンバー選択 ===== */
.picker { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px; }
.picker-pane { border: 1px solid var(--c-border-strong); border-radius: var(--radius-sm); background: #fff; display: flex; flex-direction: column; min-height: 220px; }
.picker-pane .pane-head { display: flex; gap: 6px; padding: 6px; border-bottom: 1px solid var(--c-border); background: var(--c-surface-2); }
.picker-pane .pane-list { flex: 1; overflow: auto; max-height: 240px; list-style: none; margin: 0; padding: 4px; }
.picker-pane .pane-list li { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border-radius: 4px; cursor: pointer; user-select: none; }
.picker-pane .pane-list li:hover { background: var(--c-primary-weak); }
.picker-pane .pane-list li.disabled { color: var(--c-text-disabled); cursor: default; background: none; }
.picker-pane .pane-list .kind { margin-left: auto; font-size: 12px; color: var(--c-text-3); }

/* ===== ログイン ===== */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; }
.login-card { width: 100%; max-width: 380px; padding: 28px; }
.login-card .brand { justify-content: center; font-size: 18px; margin-bottom: 20px; }

/* ===== トップページ ===== */
.top-grid { display: grid; grid-template-columns: minmax(0, 1fr) 360px; gap: 16px; align-items: start; }
.notif-item { display: flex; gap: 10px; align-items: flex-start; }
.notif-item .meta { font-size: 13px; color: var(--c-text-3); }
.notif-item.unread .title { font-weight: 700; }
.app-tag { font-size: 12px; font-weight: 700; padding: 1px 6px; border-radius: 4px; background: var(--c-surface-2); border: 1px solid var(--c-border); color: var(--c-text-2); white-space: nowrap; }
.app-tag.schedule { background: #e8f3ff; color: #1e5fa8; border-color: #c6defa; }
.app-tag.bulletin { background: #fff2e5; color: #a35a12; border-color: #f7d6b3; }
.app-tag.address { background: #ecf8ef; color: #2c7a45; border-color: #c4e7cf; }

/* ===== 検索結果 ===== */
.search-hit mark { background: #fff1a8; color: inherit; padding: 0 1px; }

/* ===== PHP 版で追加した共通部品 ===== */
.flash { padding: 10px 14px; margin-bottom: 14px; border-radius: var(--radius); background: var(--c-ok-weak); color: var(--c-ok); border: 1px solid #bfe3cf; }
.flash.error { background: var(--c-danger-weak); color: var(--c-danger); border-color: #f5caca; }
.flash.info { background: var(--c-primary-weak); color: #1d4ea6; border-color: #c9daf8; }
.error-box + * { margin-top: 12px; }
form .error-box { margin-bottom: 12px; }
details.user-menu > summary { list-style: none; }
details.user-menu > summary::-webkit-details-marker { display: none; }
details.user-menu:not([open]) .dropdown { display: none; }
.dropdown form { margin: 0; }
.file-list { display: flex; flex-wrap: wrap; gap: 8px; }
.file-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 100%; padding: 6px 12px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: var(--c-surface-2); color: var(--c-text); }
.file-chip:hover { border-color: var(--c-primary); background: var(--c-primary-weak); text-decoration: none; }
.file-chip .ico { width: 16px; height: 16px; color: var(--c-text-2); flex: none; }
.file-chip .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-chip .size { font-size: 13px; color: var(--c-text-3); white-space: nowrap; }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; padding: 10px 16px; border-top: 1px solid var(--c-border); }
.btn[aria-disabled="true"] { opacity: .45; pointer-events: none; }
.uploader { display: flex; flex-direction: column; gap: 8px; }
.uploader-drop { display: flex; align-items: center; gap: 10px; padding: 12px; border: 1px dashed var(--c-border-input); border-radius: var(--radius-sm); background: var(--c-surface-2); color: var(--c-text-2); }
.uploader-drop.over { border-color: var(--c-primary); background: var(--c-primary-weak); }
.uploader-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.uploader-list li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; border: 1px solid var(--c-border); border-radius: var(--radius-sm); background: #fff; }
.uploader-list .name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.inline-form { display: inline; margin: 0; }

/* ===== 画面幅が狭いとき =====
   960px 以下: ナビの文字は消さない。ロゴの文字を隠し、検索欄を「検索」ボタンに畳む
   840px 以下: 2 列 → 1 列（1920px の画面を左右に分けた 960px のウィンドウでは 2 列を保つ）
   720px 以下: スマホ。ナビをヘッダーの 2 段目に回して 4 等分のタブにする */
@media (max-width: 1100px) {
  .user-menu-btn .nowrap, .user-menu-btn .ico { display: none; }
  .header-search input { width: 160px; }
}
@media (max-width: 960px) {
  .app-header { gap: 8px; }
  .app-header .brand .label { display: none; }
  .app-nav { margin-left: 0; }
  .app-nav a { padding: 6px 8px; }
  .header-search { display: none; }
  .header-search-link { display: inline-flex; }
}
@media (max-width: 840px) {
  .top-grid, .grid-2, .split { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 720px) {
  /* --header-h は「上端に固定されて残る高さ」としても使われる（掲示板の書式バーなど）。
     スマホでは 1 段目の高さ＝この値にして、スクロール後に残るタブの段（48px＋線 1px）と一致させる */
  :root { --header-h: 49px; }
  html { scroll-padding-top: 56px; }
  body { font-size: 16px; }
  .input, .select, .textarea, input, select, textarea { font-size: 16px; }
  /* ヘッダー: 1 段目（ロゴ・検索・通知・自分）はスクロールで流れ、2 段目のタブ（48px）だけが上端に残る */
  .app-header { height: auto; flex-wrap: wrap; gap: 0 6px; padding: 0 10px; top: calc(-1 * var(--header-h)); }
  .app-header .brand { height: var(--header-h); }
  .app-nav {
    order: 99; flex: 0 0 calc(100% + 20px); margin: 0 -10px;
    display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; border-top: 1px solid var(--c-border);
  }
  .app-nav a {
    flex-direction: column; justify-content: center; gap: 2px; height: 48px; padding: 4px 2px;
    border-radius: 0; font-size: 13px; line-height: 1.2;
  }
  .app-nav .ico { width: 20px; height: 20px; }
  .app-nav a.active { background: transparent; box-shadow: inset 0 -3px 0 var(--c-primary); }
  .field { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .field > label, .field > .label { padding-top: 0; }
  main.main { padding: 12px 12px 40px; }
  .picker { grid-template-columns: minmax(0, 1fr); }
}

/* ===== タッチ操作の端末（指で押すので大きく。画面幅ではなく入力方法で切り替える） ===== */
@media (pointer: coarse) {
  .btn, .btn-sm, .icon-btn { min-height: 44px; min-width: 44px; }
  .btn-primary, .card-foot .btn-primary, .form-actions .btn-primary, .modal-foot .btn-primary { min-height: 48px; }
  .input, .select { min-height: 44px; }
  .list > li { min-height: 48px; }
  .side-nav a, .tabs a, .tabs button, .dropdown a, .dropdown button, .header-search-link { min-height: 44px; }
  .check { min-height: 44px; }
  .picker-pane .pane-list li, .uploader-list li { min-height: 44px; }
  .toolbar, .row.wrap { gap: 8px; }
}

@media print {
  .app-header, .no-print { display: none !important; }
  body { background: #fff; }
  .card { box-shadow: none; }
}