/* core.css — 全ビュー共通の土台スタイル（切替バー・ボタン・バッジ・モーダル・トースト） */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Yu Gothic UI',
               'Hiragino Kaku Gothic ProN', 'Meiryo', 'Helvetica Neue', sans-serif;
  background: #f5f6f8;
  color: #111827;
  min-height: 100vh;
  font-size: 14px;
  font-feature-settings: "palt" 1;
  -webkit-font-smoothing: antialiased;
}

/* ---- View switcher（画面切り替えバー） ---- */
.view-switch {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; gap: 6px;
  background: #111827; color: #fff;
  /* 右側は固定配置の「⚙設定 / ログアウト」ボタンと重なるので余白を確保する */
  padding: 0 178px 0 16px; height: 46px;
  box-shadow: 0 1px 6px rgba(0,0,0,0.18);
}
.view-switch .vs-brand { font-weight: 700; font-size: 15px; margin-right: 10px; letter-spacing: -0.3px; }
.view-switch a {
  color: #d1d5db; text-decoration: none;
  font-size: 13px; font-weight: 500;
  padding: 5px 12px; border-radius: 8px;
  transition: background .12s, color .12s;
  white-space: nowrap;
}
.view-switch a:hover { background: rgba(255,255,255,0.12); color: #fff; }
.view-switch a.active { background: #2563eb; color: #fff; }
/* ビュー切替と「集計（分析）」を分ける区切り線＋紫トーン（青のビュー群と別カテゴリだと一目で分かる） */
.view-switch .vs-sep { width: 1px; align-self: center; height: 22px; background: rgba(255,255,255,0.2); margin: 0 8px; flex-shrink: 0; }
.view-switch a.vs-analytics { color: #c4b5fd; }
.view-switch a.vs-analytics:hover { background: rgba(167,139,250,0.18); color: #fff; }
.view-switch a.vs-analytics.active { background: #7c3aed; color: #fff; }
.view-switch .vs-spacer { flex: 1; }
/* タイトル検索（中央）: 2つの伸縮スペーサで挟んで中央寄せ。候補はボックス直下にドロップ。 */
.view-switch .vs-search-wrap { position: relative; display: flex; flex: 0 1 auto; }
.view-switch .vs-search {
  width: 220px; padding: 6px 12px 6px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08);
  color: #fff; font-size: 12.5px; font-family: inherit;
}
.view-switch .vs-search::placeholder { color: #94a3b8; }
.view-switch .vs-search:focus { outline: none; background: #fff; color: #111827; border-color: #60a5fa; }
.view-switch .vs-search-results {
  position: absolute; top: calc(100% + 4px); left: 0; min-width: 260px; max-width: 380px;
  max-height: 60vh; overflow-y: auto; padding: 4px;
  background: #fff; color: #111827; border: 1px solid #e5e7eb; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.22); z-index: 350;
}
.view-switch .vs-search-results.hidden { display: none; }
.vs-sr-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  background: none; border: none; padding: 7px 9px; border-radius: 7px; cursor: pointer;
  font-family: inherit; font-size: 13px; color: #111827;
}
.vs-sr-item:hover { background: #eff6ff; }
.vs-sr-t { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vs-sr-due { font-size: 11px; color: #6b7280; white-space: nowrap; }
.vs-sr-empty { padding: 10px; font-size: 12.5px; color: #9ca3af; text-align: center; }

/* 新版が出た時に出す「今すぐ更新」バー（ナビ直下・中央）。 */
.update-bar {
  position: fixed; top: 54px; left: 50%; transform: translateX(-50%); z-index: 300;
  display: flex; align-items: center; gap: 12px;
  background: #1d4ed8; color: #fff;
  padding: 8px 10px 8px 16px; border-radius: 24px; font-size: 13px; font-weight: 600;
  box-shadow: 0 6px 20px rgba(29,78,216,0.45);
  animation: updbar-in .25s ease;
}
.update-bar button {
  background: #fff; color: #1d4ed8; border: none; border-radius: 18px;
  padding: 5px 14px; font-size: 12.5px; font-weight: 700; font-family: inherit; cursor: pointer;
}
.update-bar button:hover { background: #eff6ff; }
.update-bar .ver { font: 11px/1 ui-monospace, SFMono-Regular, Menlo, monospace; opacity: .8; }
@keyframes updbar-in { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }

/* 表示項目トグル（ボード/受信箱などの上部。常時出す項目を省略できる） */
.card-toggles {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 6px 14px; background: #f8fafc; border-bottom: 1px solid #e5e7eb;
  font-size: 12px; color: #6b7280;
}
.card-toggles .ft-label { font-weight: 700; color: #9ca3af; letter-spacing: .04em; }
.card-toggles .ft-item { display: inline-flex; align-items: center; gap: 5px; cursor: pointer; user-select: none; }
.card-toggles .ft-item input { accent-color: #2563eb; cursor: pointer; margin: 0; }
/* 「＋ 追加」: すぐ追加の左に置く、はっきりしたボタン */
.view-switch .vs-add {
  margin-right: 8px; padding: 7px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 700; white-space: nowrap;
  box-shadow: 0 1px 4px rgba(37,99,235,0.4);
}
.view-switch .vs-quick {
  width: 240px; margin-right: 8px; padding: 6px 12px; border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.08);
  color: #fff; font-size: 12.5px; font-family: inherit;
}
.view-switch .vs-quick::placeholder { color: #94a3b8; }
.view-switch .vs-quick:focus { outline: none; background: #fff; color: #111827; border-color: #60a5fa; }
/* 右上クイック追加の「完了済」: ONにして案件を入れると作業時間を聞く完了記録ダイアログが出る */
.view-switch .vs-donechk { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #c7d2fe; cursor: pointer; white-space: nowrap; user-select: none; margin-right: 4px; }
.view-switch .vs-donechk input { accent-color: #10b981; cursor: pointer; margin: 0; }

/* ---- Buttons ---- */
.btn {
  padding: 6px 12px; border-radius: 8px; border: none; cursor: pointer;
  font-size: 13px; font-weight: 500; font-family: inherit;
  transition: background .12s; display: inline-flex; align-items: center; gap: 5px;
  white-space: nowrap;
}
.btn:active { transform: scale(0.97); }
.btn-primary   { background: #2563eb; color: #fff; }
.btn-primary:hover { background: #1d4ed8; }
.btn-secondary { background: #f3f4f6; color: #374151; border: 1px solid #e5e7eb; }
.btn-secondary:hover { background: #e9ebee; }
.btn-success   { background: #d1fae5; color: #047857; }
.btn-success:hover { background: #a7f3d0; }
.btn-danger    { background: #fee2e2; color: #dc2626; }
.btn-danger:hover { background: #fecaca; }
.btn-archive   { background: #f5f3ff; color: #6d28d9; border: 1px solid #ddd6fe; }
.btn-archive:hover { background: #ede9fe; }
.btn-sm { padding: 4px 9px; font-size: 12px; border-radius: 6px; }

/* ---- Badges ---- */
.badge {
  font-size: 11px; padding: 2px 8px; border-radius: 20px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
}
.badge-overdue  { background: #fee2e2; color: #dc2626; }
.badge-today    { background: #fef3c7; color: #b45309; }
.badge-week     { background: #dbeafe; color: #1d4ed8; }
.badge-future   { background: #f3f4f6; color: #6b7280; }
.badge-nodue    { background: #f9fafb; color: #9ca3af; border: 1px solid #e5e7eb; }
.badge-done     { background: #d1fae5; color: #047857; }
.badge-category { background: #f3e8ff; color: #7c3aed; }
.badge-progress { background: #dbeafe; color: #1d4ed8; }
.badge-waiting  { background: #fef3c7; color: #92400e; }
.badge-copy     { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; } /* ⤵ 引き取った側 */
.badge-copied   { background: #eef2ff; color: #4338ca; border: 1px solid #c7d2fe; } /* ⤴ 引き取られた元 */
.badge-rec      { background: #f0f9ff; color: #0369a1; border: 1px solid #bae6fd; } /* 🔁 繰り返し */
.badge-strict   { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; } /* ⚠ 絶対厳守 */
.badge-est      { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; } /* ⏱ 予想時間 */
.badge-half     { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; } /* ◐ 半分完了 */
.badge-private  { background: #f1f5f9; color: #475569; border: 1px solid #cbd5e1; } /* 🔒 非公開 */
.badge-assigned { background: #ede9fe; color: #6d28d9; border: 1px solid #ddd6fe; } /* 👤 ○○から依頼 */
.badge-notice   { background: #d1fae5; color: #047857; border: 1px solid #a7f3d0; } /* 📨 完了通知 */
/* 繰り返し案件の「[7月対応分]」等の期間ラベル（タイトル先頭） */
.rec-pre { color: #0369a1; font-weight: 800; margin-right: 4px; white-space: nowrap; }

.est-toggle { cursor: pointer; }
.est-toggle:hover { background: #fef3c7; text-decoration: line-through; } /* 取り消し予告 */

/* 予想時間のインラインチップ（未設定Todoのみ表示。普段は薄く、ホバーで浮く） */
.est-pick {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 10px; color: #b8bcc4; opacity: .65; transition: opacity .12s;
}
.est-pick:hover { opacity: 1; }
.est-pick button {
  border: none; background: #f3f4f6; color: #6b7280; cursor: pointer;
  font-size: 10px; font-weight: 700; font-family: inherit;
  padding: 1px 5px; border-radius: 9px; transition: background .1s, color .1s;
}
.est-pick button:hover { background: #2563eb; color: #fff; }

/* 「半分完了」トグル */
.half-toggle { cursor: pointer; }
.half-toggle:hover { background: #ddd6fe; text-decoration: line-through; } /* 取り消し予告 */
/* 未着手時の淡い「◐ ½」ボタン（est-pick と同じトーン） */
.chip-half {
  border: none; background: #f3f4f6; color: #8b8f98; cursor: pointer;
  font-size: 10px; font-weight: 700; font-family: inherit;
  padding: 1px 6px; border-radius: 9px; opacity: .7;
  transition: background .1s, color .1s, opacity .12s;
}
.chip-half:hover { background: #7c3aed; color: #fff; opacity: 1; }

/* 期限超過とそれ以降の境界線（受信箱・メンバー共通） */
.ovsep {
  display: flex; align-items: center; gap: 10px;
  color: #dc2626; font-size: 11px; font-weight: 700; letter-spacing: .04em;
  margin: 2px 0;
}
.ovsep::before, .ovsep::after { content: ''; flex: 1; border-top: 2px solid #dc2626; opacity: .55; }

/* ---- Modal（追加・編集） ---- */
.overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.35);
  display: flex; align-items: center; justify-content: center; z-index: 300; padding: 16px;
  backdrop-filter: blur(2px);
}
.overlay.hidden { display: none; }
.modal {
  background: #fff; border-radius: 14px; padding: 22px; width: 100%; max-width: 460px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
  /* 画面に収まらない時は窓自体をスクロール（iPadで「保存」が押せない問題の対策）。
     dvh はiOS Safariのアドレスバー込みの実高さ。未対応ブラウザは上の vh を使う。 */
  max-height: calc(100vh - 28px);
  max-height: calc(100dvh - 28px);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.modal h2 { font-size: 17px; font-weight: 700; margin-bottom: 14px; }
/* 入力中に背景を誤クリックして閉じなかったことを伝える、控えめな横揺れ */
@keyframes cm-shake { 0%,100% { transform: translateX(0); } 20% { transform: translateX(-7px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(4px); } }
.modal.cm-shake { animation: cm-shake .32s ease; }
/* 繰り返しの日付変更スコープ選択（今回だけ / これ以降ずっと） */
.overlay.recur-scope { z-index: 400; }
.recur-scope .modal { max-width: 380px; }
.recur-scope .rs-lead { font-size: 13px; color: #374151; line-height: 1.55; margin-bottom: 16px; }
.recur-scope .rs-lead b { color: #111827; }
.recur-scope .rs-actions { display: flex; flex-direction: column; gap: 10px; }
.recur-scope .rs-actions .btn { width: 100%; flex-direction: column; align-items: flex-start; gap: 3px; padding: 12px 14px; white-space: normal; text-align: left; }
.recur-scope .rs-actions .btn span { font-weight: 700; font-size: 14px; }
.recur-scope .rs-actions .btn small { font-weight: 400; font-size: 11px; opacity: .85; }
.recur-scope .rs-cancel { margin-top: 16px; text-align: center; }
.recur-scope .rs-cancel .btn { min-width: 120px; justify-content: center; }
.form-group { margin-bottom: 12px; }
.form-group label { display: block; font-size: 12px; font-weight: 600; color: #374151; margin-bottom: 5px; text-transform: uppercase; letter-spacing: 0.02em; }
.form-group input, .form-group textarea, .form-group select {
  width: 100%; padding: 9px 11px; border: 1.5px solid #e5e7eb; border-radius: 8px;
  font-size: 14px; font-family: inherit; color: #111827; background: #fafafa; transition: border-color .12s;
}
.form-group input:focus, .form-group textarea:focus, .form-group select:focus { outline: none; border-color: #2563eb; background: #fff; }
/* メモは初期は浅く（2行ぶん）。必要なら下端をドラッグで広げられる（resize:vertical）。 */
.form-group textarea { resize: vertical; min-height: 42px; }
/* 繰り返し・カテゴリ・担当者を横に並べて縦を圧縮（狭い画面では折り返す） */
.form-row { display: flex; gap: 10px; }
.form-row .form-group { flex: 1 1 0; min-width: 0; }
@media (max-width: 520px) { .form-row { flex-wrap: wrap; } .form-row .form-group { flex: 1 1 46%; } }
.lbl-hint { color: #9ca3af; font-weight: 700; cursor: help; }
.form-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 18px; }

/* ---- 完了案件の記録ダイアログ（右上「完了済」ONで出る） ---- */
.dl-lead { font-size: 12.5px; color: #4b5563; margin: -8px 0 16px; line-height: 1.5; }
.dl-lead b { color: #047857; }
.dl-title { font-size: 14px; font-weight: 600; color: #111827; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 9px 11px; word-break: break-all; }

/* ---- 変更履歴（編集モーダル下部） ---- */
.cm-log { margin-top: 16px; border-top: 1px solid #f1f5f9; padding-top: 10px; max-height: 180px; overflow-y: auto; }
.cm-log-head { font-size: 11px; font-weight: 700; color: #9ca3af; text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.cm-log-row { display: flex; gap: 8px; align-items: baseline; font-size: 12px; color: #4b5563; padding: 3px 0; border-bottom: 1px dashed #f3f4f6; }
.cm-log-when { color: #9ca3af; white-space: nowrap; font-size: 11px; }
.cm-log-who { color: #6b7280; white-space: nowrap; font-weight: 600; font-size: 11px; }
.cm-log-what { flex: 1; word-break: break-all; }

/* ---- Toast ---- */
.toast {
  position: fixed; bottom: 24px; right: 24px; background: #1f2937; color: #fff;
  padding: 10px 18px; border-radius: 10px; font-size: 13px; font-weight: 500;
  box-shadow: 0 4px 20px rgba(0,0,0,0.25); z-index: 400; animation: fadeUp .2s ease;
}
.toast.hidden { display: none; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }

/* ---- プル更新インジケータ（上端で下に引っ張ると出る丸いスピナー） ---- */
.ptr {
  position: fixed; top: 8px; left: 50%; transform: translate(-50%, -56px);
  width: 34px; height: 34px; border-radius: 50%; background: #fff;
  box-shadow: 0 3px 14px rgba(0,0,0,0.2); z-index: 600;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity .18s ease;
}
.ptr.show { opacity: 1; }
.ptr::before {
  content: ''; width: 17px; height: 17px; border-radius: 50%;
  border: 2.5px solid #c7d2fe; border-top-color: #2563eb; transition: border-color .15s;
}
.ptr.ready::before { border-color: #93c5fd; border-top-color: #1d4ed8; }
.ptr.spinning::before { animation: ptr-rot .6s linear infinite; }
@keyframes ptr-rot { to { transform: rotate(360deg); } }

/* ---- 絶対厳守警告（ナビ直下・全幅の細い赤帯）
       strict_alert=ON × 期限前日〜完了まで。✓完了は各項目の左端。折りたたみ可。 ---- */
.alert-bar {
  position: sticky; top: 46px; z-index: 190;
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  background: #dc2626; color: #fff;
  padding: 8px 14px; min-height: 56px; font-size: 13px;
  box-shadow: 0 1px 5px rgba(220,38,38,0.30);
  overflow: hidden;  /* ↓の光のひと撫で(::before)を赤帯の内側で切り抜く */
}
/* 光のひと撫で（sheen）: 数秒に一度、淡い光が赤帯をスッと横切る。
   点滅させず危機感だけ持続させる狙い。文字・チップは光より前面に出し、
   光は赤地の上だけを撫でる。z-index:0 の地の光 < z-index:1 の文字。 */
.alert-bar::before {
  content: ''; position: absolute; top: 0; bottom: 0; left: 0; width: 24%;
  background: linear-gradient(100deg, transparent 0%, rgba(255,255,255,0.42) 50%, transparent 100%);
  transform: translateX(-170%) skewX(-18deg);
  pointer-events: none; z-index: 0;
  animation: ab-sheen 4.5s ease-in-out infinite;
}
@keyframes ab-sheen {
  0%   { transform: translateX(-170%) skewX(-18deg); }
  18%  { transform: translateX(540%)  skewX(-18deg); }
  100% { transform: translateX(540%)  skewX(-18deg); }
}
.alert-bar .ab-head, .alert-bar .ab-min,
.alert-bar .ab-item, .alert-bar .ab-expand { position: relative; z-index: 1; }
/* OSの「視差効果を減らす/動きを減らす」設定では光を出さない（バリアフリー） */
@media (prefers-reduced-motion: reduce) { .alert-bar::before { display: none; } }
.alert-bar .ab-top { display: contents; }  /* 見出しと「たたむ」をバー直列に並べる */
.alert-bar .ab-head { font-size: 13px; font-weight: 800; letter-spacing: .05em; white-space: nowrap; }
.alert-bar .ab-item {
  display: inline-flex; align-items: stretch;
  background: #fff; border-radius: 8px; overflow: hidden;
  max-width: 100%;
}
.alert-bar .ab-done {
  border: none; border-right: 1px solid #fecaca;
  background: #f8fffa; color: #15803d;
  font-size: 13.5px; font-weight: 800; font-family: inherit; cursor: pointer; padding: 6px 12px;
}
.alert-bar .ab-done:hover { background: #dcfce7; }
.alert-bar .ab-t {
  display: inline-flex; align-items: center; gap: 6px; min-width: 0;
  background: transparent; border: none; color: #7f1d1d; padding: 6px 12px;
  font-size: 13.5px; font-weight: 600; font-family: inherit; cursor: pointer;
}
.alert-bar .ab-t:hover { background: #fff1f2; }
.alert-bar .ab-due { background: #991b1b; color: #fff; font-size: 12px; font-weight: 800; padding: 3px 9px; border-radius: 20px; white-space: nowrap; }
.alert-bar .ab-min, .alert-bar .ab-expand {
  border: none; background: transparent; color: rgba(255,255,255,0.85);
  font-size: 12px; font-weight: 700; font-family: inherit; cursor: pointer;
  padding: 5px 10px; border-radius: 10px;
}
.alert-bar .ab-min { margin-left: auto; }
.alert-bar .ab-min:hover, .alert-bar .ab-expand:hover { background: rgba(255,255,255,0.18); color: #fff; }
@media (max-width: 760px) { .alert-bar { position: relative; top: auto; } }

/* ---- 画面分割内(embed)補正 ----
   各ビューはナビ(46px)前提の高さ・stickyを持つため、ナビの無いembedでは
   下に死んだ余白やズレ(=「グニュ」)が出る。embed時だけ補正する。 ---- */
body.embed .board { height: 100vh; padding: 12px; }
body.embed .side { top: 0; }
body.embed .cal-col { top: 12px; }
body.embed .wrap { padding: 12px; }

/* 期限クイックチップ（モーダル内） */
.due-quick { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 7px; }
.due-quick button {
  padding: 5px 12px; border-radius: 16px; cursor: pointer;
  border: 1px solid #e5e7eb; background: #fff; color: #374151;
  font-size: 12.5px; font-weight: 600; font-family: inherit; transition: background .12s;
}
.due-quick button:hover { background: #eef2ff; }
.due-quick button.sel { background: #2563eb; border-color: #2563eb; color: #fff; }

/* 絶対厳守チェック（モーダル内） */
.cm-strict { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #b91c1c; font-weight: 600; cursor: pointer; text-transform: none; letter-spacing: 0; }
.cm-strict input { width: auto; accent-color: #dc2626; }
.cm-note { font-size: 12px; color: #6d28d9; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 8px; padding: 7px 10px; margin-bottom: 12px; line-height: 1.5; }
.cm-private { display: flex; align-items: center; gap: 7px; font-size: 13px; color: #475569; font-weight: 600; cursor: pointer; text-transform: none; letter-spacing: 0; }
.cm-private input { width: auto; accent-color: #475569; }

/* ---- メモ（description）。タイトル下に常時表示する控えめな注記 ---- */
.tmemo {
  font-size: 11.5px; line-height: 1.5; color: #6b7280;
  background: #fafaf9; border-left: 2px solid #d6d3d1;
  padding: 3px 8px; margin-top: 4px; border-radius: 0 6px 6px 0;
  white-space: pre-wrap; word-break: break-all;
}

/* ---- Empty / loading ---- */
.empty { text-align: center; padding: 56px 20px; color: #9ca3af; }
.loading { text-align: center; padding: 40px; color: #9ca3af; }

/* ---- 開発に連絡（右下フローティング） ---- */
.dev-contact {
  position: fixed; right: 18px; bottom: 18px; z-index: 250;
  background: #1f2937; color: #e5e7eb;
  border: 1px solid #374151; border-radius: 24px;
  padding: 9px 16px; font-size: 12.5px; font-weight: 600; font-family: inherit;
  cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: background .12s, transform .08s;
}
.dev-contact:hover { background: #111827; }
.dev-contact:active { transform: scale(0.96); }
@media (max-width: 760px) { .dev-contact { right: 12px; bottom: 12px; } }

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 3px; }

/* ---- モバイル対応（760px以下） ---- */
@media (max-width: 760px) {
  /* ナビは折り返し。検索とクイック追加は別段で全幅。伸縮スペーサは折返し時に不要 */
  .view-switch { flex-wrap: wrap; height: auto; padding: 8px 10px; row-gap: 6px; }
  .view-switch .vs-spacer { display: none; }
  .view-switch .vs-search-wrap { order: 9; flex: 1 1 100%; }
  .view-switch .vs-search { width: 100%; }
  .view-switch .vs-search-results { max-width: none; right: 0; }
  .view-switch .vs-quick { order: 10; flex: 1 1 100%; width: auto; margin-right: 0; }
  /* 画面分割をスマホ(縦積み)で開いたとき、各ペイン(iframe)内のボードは自然な高さにして
     親ページ側でスクロールさせる。height:100vh のままだと画面1枚分で頭打ちになり、
     下のカードが見えず「スクロールできない」状態になる（縦積みでは特に致命的）。 */
  body.embed .board { height: auto; }
  /* モーダルは画面幅いっぱい近くまで */
  .modal { width: calc(100vw - 28px); max-width: none; }
}