/* みまもり 監視コンソール — mim ブランド皮（mim-console-ui skill）× beautiful-web-ui 意味色。
   面と主色は参照 webapp の navy 系（--bg #0c1220 / --blue #5490d9 / --amber #cc9040 / radius 6px）に寄せ、
   severity（danger/warning/info）は温存。ダーク既定 / [data-theme="light"] 切替。 */
:root{
  color-scheme:dark;
  --bg-base:#0c1220; --bg-inset:#0d1826; --surface-1:#111b2b; --surface-2:#16233a; --surface-3:#1c2c47;
  --border:#233248; --border-muted:#1a2638; --border-strong:#31445f;
  /* 2026-08-25 研究室指摘「中間色から白または黒などのはっきりした色へ」。
     旧 --text-muted はコントラスト比 3.55:1（ダーク surface-1 上）で WCAG AA 4.5:1 に届いて
     いなかった。最も明るい面（--surface-3 #1c2c47）の上でも AA を満たす値へ引き上げる
     （実測: secondary 7.48:1 / muted 5.61:1 @ surface-3）。 */
  --text:#d9e2f0; --text-secondary:#aebfd6; --text-muted:#8fa6c4; --text-on-accent:#fff;
  --accent:#5490d9; --accent-emphasis:#3d78c4; --accent-hover:#68a1e4; --accent-subtle:rgba(84,144,217,.12);
  --success:#3a9a6a; --success-subtle:rgba(58,154,106,.16);
  --warning:#cc9040; --warning-subtle:rgba(204,144,64,.16);
  --danger:#e15c54; --danger-emphasis:#c94840; --danger-subtle:rgba(225,92,84,.16);
  --info:#79b8ff; --info-subtle:rgba(84,144,217,.12);
  --amber:#cc9040;                                     /* 検知数 = ambient な活動量（アラームではない） */
  --flag-yellow:#e9c645;                               /* 遊泳注意の黄旗（琥珀より明るく, 2026-07-26 ユーザー要望） */
  --font-sans:'Inter','Noto Sans JP',system-ui,-apple-system,"Segoe UI",Roboto,"Hiragino Kaku Gothic ProN","Yu Gothic",sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  /* 2026-08-25 研究室指摘「全体的に文字サイズが大きいほうがよい」で 1 段引き上げた
     （base .875rem=14px → 1rem=16px。以下同様に 1 段ずつ）。直書き px も併せて +1px した */
  --text-xs:.8125rem; --text-sm:.875rem; --text-base:1rem; --text-md:1.125rem; --text-lg:1.25rem; --text-xl:1.5rem;
  --sp-1:.25rem; --sp-2:.5rem; --sp-3:.75rem; --sp-4:1rem; --sp-5:1.5rem; --sp-6:2rem; --sp-7:3rem;
  --radius-sm:4px; --radius-md:6px; --radius-lg:8px; --radius-xl:12px; --radius-full:9999px;
  --shadow-1:0 1px 2px rgba(0,0,0,.4);
  --shadow-2:0 2px 6px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.04);
  --shadow-3:0 8px 24px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.06);
  --rescue:#6fe0ff; --rip-area:#b26be0;                /* レスキュー=水色 / 離岸流エリア=紫（2026-07-28 ユーザー指定） */
  --dur-fast:120ms; --dur-normal:200ms; --ease:cubic-bezier(.2,0,0,1);
  --topbar-h:52px; --focus-ring:0 0 0 2px var(--bg-base),0 0 0 4px var(--accent);
  --bg-grad:radial-gradient(ellipse at 50% 0%,rgba(22,44,76,.22) 0%,transparent 60%);
}
[data-theme="light"]{
  color-scheme:light;
  --bg-base:#eef2f7; --bg-inset:#f2f5f9; --surface-1:#ffffff; --surface-2:#f6f8fb; --surface-3:#fff;
  --border:#c9d4e2; --border-muted:#dde4ec; --border-strong:#a8b8cc;
  /* ライトも同様（実測: secondary 7.34:1 / muted 5.02:1 @ 最も暗い面 --bg-base #eef2f7） */
  --text:#1c2b40; --text-secondary:#3d5068; --text-muted:#56697f;
  --accent:#2f6cb3; --accent-emphasis:#2f6cb3; --accent-hover:#2a60a0; --accent-subtle:rgba(47,108,179,.12);
  --success:#1a7f37; --success-subtle:rgba(26,127,55,.12);
  --warning:#9a6a1d; --warning-subtle:rgba(154,106,29,.12);
  --danger:#c43d34; --danger-emphasis:#c43d34; --danger-subtle:rgba(196,61,52,.12);
  --info:#2f6cb3; --info-subtle:rgba(47,108,179,.12);
  --amber:#9a6a1d;
  --flag-yellow:#b1921a;
  --rescue:#12a5d4; --rip-area:#8e44c8;
  --shadow-1:0 1px 2px rgba(31,35,40,.1); --shadow-2:0 3px 8px rgba(31,35,40,.12),0 0 0 1px rgba(31,35,40,.05); --shadow-3:0 8px 24px rgba(31,35,40,.16);
  --bg-grad:radial-gradient(ellipse at 50% 0%,rgba(84,144,217,.10) 0%,transparent 60%);
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}   /* display を持つクラス（.btn 等）でも hidden 属性を必ず効かせる */
/* コンテンツが短いページ（検知設定など）でもフッターを最下部に固定する sticky footer
   （2026-07-26 ユーザー指摘: 検知設定タブでフッターが上に浮く） */
/* html/body に overflow-x:hidden を置かない（2026-07-28 バグ洗い出し）。
   overflow-x を hidden にすると overflow-y は visible ではいられず auto になり、body が
   スクロールコンテナになる。すると .topbar の position:sticky が効かず、下へスクロールすると
   ヘッダ（ナビ・通知ベル・ログアウト）が流れて見えなくなっていた。
   横あふれは「あふれる部品の中だけスクロールさせる」（.table-wrap / .gbar / .man-table 等）で
   抑える。320〜1440px の各画面を実測して横スクロールが出ないことを確認済み。 */
body{margin:0;max-width:100%;
  background:var(--bg-base);background-image:var(--bg-grad);background-repeat:no-repeat;
  color:var(--text);font-family:var(--font-sans);font-size:var(--text-base);line-height:1.5;-webkit-font-smoothing:antialiased;
  min-height:100dvh;display:flex;flex-direction:column}
main{flex:1 0 auto}
h1,h2,h3{line-height:1.25;font-weight:600;margin:0}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{outline:none;box-shadow:var(--focus-ring);border-radius:var(--radius-sm)}
:focus:not(:focus-visible){outline:none}
/* 背景は accent-emphasis（#3d78c4）だと白文字で 4.49:1 と基準をわずかに下回る（2026-07-28 実測）。
   ここだけ濃い青に固定して 6.4:1 にする */
.skip{position:absolute;left:-9999px;top:0;background:#2f5f9e;color:#fff;padding:var(--sp-2) var(--sp-4);border-radius:0 0 var(--radius-md) 0;z-index:9999}
.skip:focus{left:0}

/* ---- top bar（mim ブランド: 白クリップのロゴブロック + 上端の青アクセント線） ---- */
.topbar{position:sticky;top:0;z-index:1000;height:var(--topbar-h);display:flex;align-items:center;gap:var(--sp-3);
  /* 横は溢れさせない・縦は clip しない（overflow:hidden だと拠点選択ポップアップが
     ヘッダー高さで切れて選べない。2026-07-28 ユーザー指摘） */
  max-width:100vw;overflow-x:clip;overflow-y:visible;
  padding:0 var(--sp-4) 0 0;background:var(--surface-1);border-bottom:1px solid var(--border-muted)}
/* ヘッダ最上部の青いグラデーション線（.topbar::before）は 2026-07-29 ユーザー指定で廃止 */
.h-logos{position:relative;display:flex;align-items:center;gap:8px;height:100%;flex:none;
  padding:0 24px 0 14px;background:#fff;clip-path:polygon(0 0,calc(100% - 12px) 0,100% 100%,0 100%)}
/* ライトテーマは背景も白面になるため右縁に区切り影（モック準拠） */
[data-theme="light"] .h-logos{box-shadow:1px 0 0 var(--border)}
.topnav{display:flex;gap:2px;margin-left:var(--sp-2)}
.topnav a{color:var(--text-secondary);font-weight:500;font-size:var(--text-sm);padding:5px 11px;border-radius:4px;border:1px solid transparent;white-space:nowrap}
.topnav a:hover{color:var(--text);background:var(--surface-2);text-decoration:none}
.topnav a.active{color:var(--text);background:var(--accent-subtle)}
.topbar .spacer{flex:1}
.h-status{display:flex;align-items:center;gap:6px;font-size:var(--text-xs);color:var(--text-secondary);white-space:nowrap}
.h-status-dot{width:6px;height:6px;border-radius:50%;background:#3a9a6a;box-shadow:0 0 6px rgba(58,154,106,.4)}
.h-clock{font-size:var(--text-xs);color:var(--text-muted);font-variant-numeric:tabular-nums;font-family:var(--font-mono);white-space:nowrap;flex:none}   /* flex:none … 縮めると英語表記で見切れる（2026-07-28） */
/* 没入モード（[F]）: ヘッダは白クリップのロゴだけ残し、操作クロムを隠して映像を最大化 */
body.fsmon .topnav,body.fsmon .h-status,body.fsmon .h-clock,body.fsmon .h-master,
body.fsmon .topbar .iconbtn,body.fsmon .topbar .btn{display:none}
/* 没入（[F]）では拠点の並び・全画面ボタンを隠して映像領域を拡大（モック準拠）。
   ただし自動切替だけは残す — 2026-08-25 に .fab（浮きボタン）をバーの項目へ移した際、
   バーごと消えると没入中に自動切替を切り替えられなくなり、それまでできたことが減るため。
   バーを下端の細い帯にして、その 1 項目だけを出す。 */
body.fsmon .gbar{position:fixed;left:0;right:0;bottom:0;z-index:40;min-height:0;padding:6px var(--sp-5);
  background:none;border-bottom:none;overflow:visible}
body.fsmon .gbar > *:not(.auto-toggle){display:none}
body.fsmon .auto-toggle{background:color-mix(in srgb,var(--surface-1) 92%,transparent);
  backdrop-filter:blur(6px);border-color:var(--border-strong);border-radius:999px;
  box-shadow:0 6px 20px rgba(0,0,0,.45)}
.iconbtn{display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;border:1px solid var(--border-strong);
  background:var(--surface-2);color:var(--text);border-radius:var(--radius-md);cursor:pointer;font-size:16px}
.iconbtn:hover{background:var(--surface-3)}

/* ---- 通知ベル + 通知センター（右ドロワー。モック mim-console-mock.html の ndrawer 準拠） ---- */
.h-bell{position:relative}
.h-bell:hover{border-color:var(--accent);background:var(--accent-subtle)}
.bell-badge{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:var(--radius-full);
  background:var(--danger);color:#fff;font-size:11px;font-weight:700;display:flex;align-items:center;justify-content:center;
  font-variant-numeric:tabular-nums;box-shadow:0 0 0 2px var(--surface-1)}
.bell-badge[hidden]{display:none}
.nscrim{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1090}
.ndrawer{position:fixed;top:0;right:0;bottom:0;width:min(380px,100vw);z-index:1100;display:flex;flex-direction:column;
  background:var(--surface-1);border-left:1px solid var(--border-strong);box-shadow:-12px 0 40px rgba(0,0,0,.5)}
.ndrawer[hidden],.nscrim[hidden]{display:none}
[data-theme="light"] .ndrawer{box-shadow:-12px 0 40px rgba(30,50,80,.22)}
.nd-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border-muted)}
.nd-title{font-size:var(--text-base);font-weight:600;display:flex;align-items:center;gap:8px}
.nd-cnt{display:inline-flex;align-items:center;justify-content:center;min-width:18px;padding:0 5px;border-radius:var(--radius-full);
  background:var(--accent-subtle);color:var(--accent);font-size:var(--text-xs);font-weight:700;font-variant-numeric:tabular-nums}
.nd-close{width:28px;height:28px;border:1px solid var(--border-strong);background:none;color:var(--text-secondary);
  border-radius:var(--radius-sm);cursor:pointer;font-size:14px}
.nd-close:hover{color:var(--text);border-color:var(--accent)}
.nd-body{flex:1;overflow-y:auto;overscroll-behavior:contain;padding:12px 14px}
.nd-tools{display:flex;align-items:center;gap:var(--sp-2);margin-bottom:var(--sp-2)}
.nd-more{display:flex;justify-content:center;padding:var(--sp-2) 0}
.n-item{display:flex;gap:10px;padding:10px;border:1px solid var(--border-muted);border-radius:var(--radius-md);
  margin-bottom:8px;cursor:pointer;transition:border-color var(--dur-fast);background:var(--surface-2)}
.n-item:hover{border-color:var(--border-strong)}
.n-item.unread{border-left:3px solid var(--accent);background:var(--accent-subtle)}
.n-item.unread.n-item--danger{border-left-color:var(--danger)}
.n-item.unread.n-item--warning{border-left-color:var(--warning)}
.n-ic{flex:none;width:26px;height:26px;border-radius:var(--radius-md);display:flex;align-items:center;justify-content:center;
  font-size:12px;font-weight:700}
.n-ic--rip{background:var(--danger-subtle);color:var(--danger)}
.n-ic--person{background:var(--warning-subtle);color:var(--warning)}
.n-ic--admin{background:var(--accent-subtle);color:var(--accent)}
.n-ic--system{background:var(--surface-3);color:var(--text-secondary)}
.n-ic--rescue{background:var(--rescue-subtle,rgba(90,190,220,.18));color:var(--rescue)}
.n-c{flex:1;min-width:0}
.n-t{font-size:var(--text-sm);font-weight:600;line-height:1.4}
.n-b{font-size:var(--text-xs);color:var(--text-secondary);line-height:1.5;margin-top:2px;overflow-wrap:break-word}
.n-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:4px;font-size:var(--text-xs);color:var(--text-muted);font-variant-numeric:tabular-nums}
.n-beach{color:var(--accent)}
.n-empty{text-align:center;color:var(--text-muted);font-size:var(--text-sm);padding:26px 0}
/* 管理者 → 自治体アカウントへの送信フォーム（admin のみ表示） */
.nd-send{border:1px solid var(--border-muted);border-radius:var(--radius-md);margin-bottom:var(--sp-3);background:var(--surface-2)}
.nd-send>summary{cursor:pointer;padding:var(--sp-2) var(--sp-3);font-size:var(--text-sm);font-weight:600;color:var(--text-secondary);list-style:none}
.nd-send>summary::before{content:"▸ ";color:var(--text-muted)}
.nd-send[open]>summary::before{content:"▾ "}
.nd-send__form{display:grid;gap:var(--sp-3);padding:var(--sp-2) var(--sp-3) var(--sp-3)}
.nd-send__beaches{border:1px solid var(--border-muted);border-radius:var(--radius-md);padding:var(--sp-2) var(--sp-3);
  display:flex;gap:var(--sp-2) var(--sp-3);flex-wrap:wrap;margin:0}
.nd-send__beaches legend{padding:0 4px}

/* ---- buttons ---- */
.btn{--_bg:var(--surface-2);--_fg:var(--text);--_bd:var(--border-strong);
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);min-height:32px;padding:0 var(--sp-4);
  font:500 var(--text-base)/1 var(--font-sans);color:var(--_fg);background:var(--_bg);border:1px solid var(--_bd);
  border-radius:var(--radius-md);cursor:pointer;white-space:nowrap;transition:background var(--dur-fast) var(--ease),transform var(--dur-fast)}
.btn:hover{background:color-mix(in srgb,var(--_bg) 86%,white)}
.btn:active{transform:translateY(1px)}
.btn--primary{--_bg:var(--accent-emphasis);--_fg:#fff;--_bd:transparent}
.btn--primary:hover{--_bg:var(--accent-hover)}
.btn--danger{--_bg:transparent;--_fg:var(--danger);--_bd:var(--border-strong)}
.btn--danger:hover{--_bg:var(--danger-emphasis);--_fg:#fff;--_bd:transparent}
.btn--sm{min-height:28px;padding:0 var(--sp-3);font-size:var(--text-sm)}
/* 押せないボタンは見た目でも押せないと分かるようにする（2026-07-28 バグ洗い出し:
   「設定」などが disabled でも有効時と同じ色で、押しても何も起きない理由が分からなかった） */
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{background:var(--_bg)}

/* ---- controls ---- */
select,input,textarea{min-height:32px;color:var(--text);background:var(--bg-inset);border:1px solid var(--border-strong);
  border-radius:var(--radius-md);padding:0 var(--sp-3);font:inherit;font-size:var(--text-base)}
textarea{padding:var(--sp-2) var(--sp-3);width:100%;resize:vertical;line-height:1.4}
select:focus-visible,input:focus-visible,textarea:focus-visible{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-subtle)}
.switch{display:inline-flex;align-items:center;gap:var(--sp-2);color:var(--text-secondary);font-size:var(--text-sm);cursor:pointer}
.field{display:flex;flex-direction:column;gap:var(--sp-2)}
.label{font-size:var(--text-sm);font-weight:500;color:var(--text-secondary)}
.controls{display:flex;align-items:center;gap:var(--sp-4);flex-wrap:wrap;padding:var(--sp-4) var(--sp-5) 0}

/* ---- card ---- */
.card{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-1)}
.card__header{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-muted);display:flex;align-items:center;justify-content:space-between}
.card__title{font-size:var(--text-md);font-weight:600;display:flex;align-items:center;gap:var(--sp-2)}
.tmark{width:10px;height:10px;border-radius:3px;display:inline-block;flex:none}
.tmark--danger{background:var(--danger)} .tmark--info{background:var(--info)}
.tmark--rescue{background:var(--rescue)} .tmark--rip{background:var(--rip-area)}
.card__body{padding:var(--sp-4)}

/* ---- badges / status pills (color + dot + TEXT; icon in markup) ---- */
.badge{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:var(--radius-full);
  font-size:var(--text-xs);font-weight:600;line-height:1.5;border:1px solid transparent;white-space:nowrap}
.badge::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor}
.badge--neutral{color:var(--text-secondary);background:var(--surface-2);border-color:var(--border)}
.badge--danger{color:var(--danger);background:var(--danger-subtle)}
.badge--warning{color:var(--warning);background:var(--warning-subtle)}
.badge--info{color:var(--info);background:var(--info-subtle)}
.badge--success{color:var(--success);background:var(--success-subtle)}
/* 検知種別バッジ（2026-07-27）: モックのエリア識別色に合わせる */
.badge--rip-area{color:var(--rip-area);background:rgba(178,107,224,.16)}
.badge--rescue{color:var(--rescue);background:rgba(111,224,255,.16)}
.badge--plain::before{display:none}
.badge--clip{max-width:150px;overflow:hidden;text-overflow:ellipsis;display:inline-block;line-height:1.9}

/* ---- connection status ---- */
.conn{display:inline-flex;align-items:center;gap:var(--sp-2);font-size:var(--text-sm);font-weight:500}
.conn::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--text-muted)}
.conn.ok{color:var(--success)} .conn.ok::before{background:var(--success);box-shadow:0 0 0 3px var(--success-subtle)}
.conn.ng{color:var(--danger)} .conn.ng::before{background:var(--danger)}

/* ================= monitor（拠点ウォール + 右レール） ================= */
.monitor{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:var(--sp-3);
  padding:var(--sp-2) var(--sp-3) var(--sp-3);height:calc(100dvh - var(--topbar-h));min-height:0;overflow:hidden}
.monitor>*{min-height:0}
.monitor .rail{overflow-y:auto;overscroll-behavior:contain;padding-right:2px}
.monitor.rail-hidden{grid-template-columns:minmax(0,1fr)}
.monitor.rail-hidden .rail{display:none}
body.fsmon .monitor{grid-template-columns:minmax(0,1fr);height:calc(100dvh - var(--topbar-h))}
body.fsmon .monitor .rail{display:none}
@media(max-width:1100px){.monitor{grid-template-columns:1fr;height:auto;overflow:visible}
  .monitor .rail{order:2;overflow:visible}}

/* 拠点ウォール: 枚数はデータ駆動。JS(sizeWall)が16:9厳守でカード実寸をpx確定し、
   flex wrap + 中央寄せで端数行も自動センタリング（枚数固定の nth-child に依存しない） */
.wall{min-height:0;display:flex;flex-wrap:wrap;gap:5px;align-content:center;justify-content:center;align-items:center}
.wall.duo{flex-direction:column;flex-wrap:nowrap;align-items:stretch;justify-content:center;gap:5px}
.wall-row{display:flex;gap:5px;justify-content:center;min-height:0}
/* 1〜2 拠点ウォールの情報帯（モック duo の signInfoRO(merged) 準拠。QR なし・上限 200px） */
/* 2026-08-25 ユーザー指摘「ラベルが見えなくなっている場合がある」。
   上限が 140px だったため、気象庁の風・波の文が 2 行になると下が切れて読めなかった
   （v0.20.0 で文字を 1 段大きくしたぶん、切れる場面が増えていた）。
   モックの上限どおり 200px まで伸ばす。帯が伸びたぶんは sizeWall が映像タイル側で吸収する。 */
.wall-info{flex:none;display:grid;grid-template-columns:1.6fr 1fr;gap:5px;max-height:clamp(120px,20vh,200px);min-height:0}
/* 没入（[F]）はレール・拠点バーが消えて縦が空くので、さらに伸ばして折り返しを丸ごと見せる */
body.fsmon .wall-info{max-height:clamp(140px,24vh,240px)}
.wall-info .wi-env,.wall-info .wi-news{padding:7px 10px;border:1px solid var(--border-muted);border-radius:8px;
  background:var(--surface-1);display:flex;flex-direction:column;justify-content:center;overflow:hidden}
/* 列の幅は中身に合わせて配分する（2026-08-25 ユーザー指摘「まだ余白があるので」）。
   1fr x3 の均等割りだと、気温・水温（"30 ℃" で足りる）と満潮・干潮（"05:00 / 18:34"）に
   余白が余り、いちばん長い風・波（気象庁の文）だけが 2 行に折り返して切れていた。
   温度 0.7 / 風・波 2 / 潮 1.1 にすると、風の主文はおおむね 1 行に収まる。 */
.wall-info .wi-grid{grid-template-columns:max-content minmax(0,0.7fr) minmax(0,2fr) minmax(0,1.1fr);
  gap:6px 14px;align-items:center}
/* 遊泳条件を出さない拠点（沖縄の事務所）は旗の列ごと畳む。空いた幅は風・波へ回る（2026-08-25） */
.wall-info .wi-grid--noflag{grid-template-columns:minmax(0,0.7fr) minmax(0,2fr) minmax(0,1.1fr)}
/* 帯の中の余白を詰める（値のサイズは保ったまま行間だけ圧縮） */
.wall-info .se-k{margin-bottom:1px}
.wall-info .se-v{line-height:1.15}
/* ウォールの情報帯は限られた高さに収めるため、サイネージ用の大きな字面を抑える
   （2026-07-27 ユーザー指摘: 値だけ極端に大きく見える） */
/* 折り返しは許し、途中で切らない・省略記号も付けない（2026-08-25 ユーザー指定）。
   単語の途中で改行してでも全文を見せる（気象庁の文は空白が少なく、
   overflow-wrap が無いと 1 語扱いになって列からはみ出す） */
.wall-info .env-cell .ev{font-size:16px;font-weight:600;font-family:var(--font-sans);font-variant-numeric:tabular-nums;letter-spacing:0;
  line-height:1.3;overflow-wrap:anywhere}
.wall-info .env-cell .ek{font-size:12px}
.wall-info .se-h{font-size:13px}
.wall-info .wi-flag .sf-lead{font-size:11px;font-weight:600;color:var(--text-secondary);letter-spacing:.08em}
.wall-info .sn-b{font-size:16px;font-weight:700;color:var(--text);line-height:1.45;overflow:hidden}
/* 値の単位（℃ など）は値より一段小さく、行内で揃える */
.wall-info .env-cell .ev u{font-size:12px;text-decoration:none;margin-left:2px;color:var(--text-secondary)}
/* グリッドの行間・列間を均等にして見た目の統一感を出す */
.wall-info .wi-flag{grid-row:span 2;display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:4px;padding:10px 20px;border-radius:8px;border:1.5px solid var(--border)}
.wall-info .wi-flag .sf-t{font-size:26px;font-weight:700;display:flex;align-items:center;gap:8px}
.wall-info .wi-flag .sf-ic{display:inline-flex;width:1em;height:1em;flex:none}
.wall-info .wi-flag .sf-ic svg{width:100%;height:100%;display:block}
.wall-info .wi-flag[data-kind="success"]{background:rgba(84,144,217,.14);border-color:rgba(84,144,217,.55)}
.wall-info .wi-flag[data-kind="success"] .sf-t{color:var(--accent)}
.wall-info .wi-flag[data-kind="warning"]{background:rgba(204,144,64,.14);border-color:rgba(204,144,64,.55)}
.wall-info .wi-flag[data-kind="warning"] .sf-t{color:var(--flag-yellow)}
.wall-info .wi-flag[data-kind="danger"]{background:rgba(225,92,84,.18);border-color:rgba(225,92,84,.6)}
.wall-info .wi-flag[data-kind="danger"] .sf-t{color:var(--danger)}
@media(max-width:1100px){.wall-info{max-height:none}}
@media(max-width:1100px){
  .wall{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));align-content:start}
  .wall.duo{display:grid}
  .wall-row{display:contents}
  .wall .vcard{width:100%!important;height:auto!important;aspect-ratio:16/9}
}

/* ---- 映像カード（参照 webapp の .card + ov-top/ov-bot。映像面は常時ダーク） ---- */
.vcard{position:relative;background:rgba(13,21,35,.9);border:1px solid rgba(255,255,255,.04);
  border-radius:var(--radius-md);overflow:hidden;display:flex;flex-direction:column;
  transition:border-color .3s;cursor:pointer;flex:none}
.vcard:hover{border-color:rgba(255,255,255,.10)}
.vcard.alarm{border-color:rgba(225,92,84,.7);box-shadow:0 0 0 1px rgba(225,92,84,.5),0 0 24px -6px rgba(225,92,84,.6)}
/* レスキューエリア立入（warning 系。danger のアラームより一段弱い強調） */
.vcard.rescue-warn{border-color:rgba(204,144,64,.75);box-shadow:0 0 0 1px rgba(204,144,64,.5),0 0 20px -6px rgba(204,144,64,.55)}
/* 拡大はモック準拠: 拠点バー(40px)とフッタを避ける。全画面時はヘッダごと覆う */
.vcard.zoom{position:fixed;inset:calc(var(--topbar-h) + 40px + 5px) 5px calc(28px + 5px) 5px;z-index:60;width:auto!important;height:auto!important;margin:0}
body.fsmon .vcard.zoom{inset:5px}
.vid{position:relative;flex:1;min-height:0;background:#060a10;overflow:hidden}
.vid::after{content:'';position:absolute;inset:0;box-shadow:inset 0 0 60px rgba(0,0,0,.25);pointer-events:none;z-index:1}
/* モック準拠: カメラ画像は切り取らず全体を見せる（contain。管理タイルのみ座標整合のため fill 上書き） */
.vid img.feed{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;display:block;transition:opacity .35s ease}
.vid img.feed.contain{object-fit:contain}
/* 凍結/断のフィードを live に見せない（STALE 表示） */
.vid .nosig{position:absolute;inset:0;display:none;align-items:center;justify-content:center;z-index:2;
  color:rgba(255,255,255,.82);font-size:13px;font-weight:600;letter-spacing:.14em;pointer-events:none;
  background:repeating-linear-gradient(45deg,rgba(255,255,255,.015) 0 12px,transparent 12px 24px)}
.vid.err img.feed{opacity:0}
.vid.err .nosig{display:flex}
.vid canvas{position:absolute;inset:0;width:100%;height:100%;z-index:2;cursor:crosshair}
.ov-top{position:absolute;top:0;left:0;right:0;padding:10px 14px 28px;z-index:3;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,transparent 100%);
  display:flex;justify-content:space-between;align-items:flex-start}
.b-name{font-size:14px;font-weight:500;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
.b-loc{font-size:10px;color:rgba(255,255,255,.75);margin-top:1px;font-weight:300}
.b-date{text-align:right;font-size:12px;color:rgba(255,255,255,.85);text-shadow:0 1px 4px rgba(0,0,0,.6);
  font-variant-numeric:tabular-nums;font-family:var(--font-mono)}
.b-time{font-size:10px;color:rgba(255,255,255,.72);margin-top:1px;font-family:var(--font-mono);text-align:right}
.ov-bot{position:absolute;bottom:0;left:0;right:0;padding:24px 12px 8px;z-index:3;
  background:linear-gradient(0deg,rgba(0,0,0,.6) 0%,transparent 100%);
  display:flex;justify-content:space-between;align-items:flex-end}
.tabs{display:flex;gap:3px}
.tab{padding:3px 9px;min-height:24px;font-size:11px;font-weight:500;font-family:var(--font-sans);border:1px solid rgba(255,255,255,.13);
  border-radius:3px;background:rgba(0,0,0,.35);color:rgba(255,255,255,.78);cursor:pointer;transition:all .2s;user-select:none}
.tab.active{background:#5490d9;border-color:#5490d9;color:#fff}
/* 離岸流が出ているカメラのタブ（2026-07-29 ユーザー指定:「同時に複数カメラで発生している
   場合でも両方モニターに反映」）。映していないカメラの発生に気づけるよう印を付ける。
   色だけに頼らず、選択中でなくても分かるよう枠と太字も変える */
.tab.crit{border-color:var(--danger);color:#fff;font-weight:700;
  background:color-mix(in srgb, var(--danger) 55%, transparent)}
.tab.crit.active{background:var(--danger);border-color:var(--danger)}
.tab:hover:not(.active){background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.7)}
.cam-badge{font-family:var(--font-mono);font-size:11px;font-weight:700;color:#cfe0e8;background:rgba(0,0,0,.3);
  border:1px solid rgba(255,255,255,.13);border-radius:3px;padding:2px 7px}
/* 検知バッジ（琥珀 = ambient な活動量。アラームではない） */
.det{display:flex;align-items:center;gap:5px;pointer-events:none}
.det-dot{width:5px;height:5px;border-radius:50%;background:#cc9040;box-shadow:0 0 5px rgba(204,144,64,.4);
  animation:detpulse 2.5s ease-in-out infinite}
.det.crit .det-dot{background:#e15c54;box-shadow:0 0 6px rgba(225,92,84,.5)}
@keyframes detpulse{0%,100%{opacity:.9}50%{opacity:.25}}
.det-val{font-size:13px;font-weight:600;color:#cc9040;font-variant-numeric:tabular-nums;font-family:var(--font-mono)}
.det.crit .det-val{color:#e15c54}
.det-unit{font-size:10px;color:rgba(255,255,255,.72);margin-left:1px}
.det-na{font-size:11px;color:rgba(255,255,255,.62)}
@media(prefers-reduced-motion:reduce){.det-dot{animation:none}}

/* 自動切替トグル — 2026-08-25 研究室指摘「自動きりかえのボタンが画像とかぶっている」。
   position:fixed の浮きボタン（.fab）をやめ、拠点バー（.gbar）の項目にした。
   映像の上に何も重ねないので、情報量を減らす方針（説明文の i マーク化）とも揃う。
   バーへの差し込みは app.js の renderGbar が行う。 */
.auto-toggle{display:inline-flex;align-items:center;gap:8px;flex:none;font-size:var(--text-sm);
  color:var(--text-secondary);background:none;border:1px solid var(--border);border-radius:4px;
  padding:6px 12px;cursor:pointer;font-family:inherit;transition:all .2s;white-space:nowrap}
.auto-toggle:hover{color:var(--text);border-color:var(--accent);background:var(--accent-subtle)}
.auto-toggle .sw{width:28px;height:15px;border-radius:9px;background:var(--bg-inset);border:1px solid var(--border-strong);
  position:relative;transition:.18s;flex:none}
.auto-toggle .sw::after{content:'';position:absolute;top:1px;left:1.5px;width:11px;height:11px;border-radius:50%;
  background:var(--text-secondary);transition:.18s}
.auto-toggle[aria-pressed="true"] .sw{background:var(--accent);border-color:transparent}
.auto-toggle[aria-pressed="true"] .sw::after{left:14px;background:#fff}
.auto-toggle[aria-pressed="true"]{color:var(--text)}

/* side rail */
.rail{display:flex;flex-direction:column;gap:var(--sp-4)}
.alarm-item{display:grid;grid-template-columns:1fr auto;gap:var(--sp-2) var(--sp-3);align-items:center;
  padding:var(--sp-3) 0;border-bottom:1px solid var(--border-muted)}
.alarm-item:last-child{border-bottom:none}
.alarm-item .who{font-weight:500}
.alarm-item .meta{color:var(--text-secondary);font-size:var(--text-sm)}
.alarm-item .actions{grid-column:1/-1;display:flex;gap:var(--sp-2);flex-wrap:wrap}
.empty{text-align:center;padding:var(--sp-6) var(--sp-4);color:var(--text-secondary)}
.empty__icon{font-size:26px;opacity:.6}
.empty__title{color:var(--text);font-weight:600;margin-top:var(--sp-2)}
.weather-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-2)}
.weather-item{display:flex;justify-content:space-between;background:var(--bg-inset);border:1px solid var(--border-muted);padding:6px 10px;border-radius:var(--radius-md)}
.weather-item .k{color:var(--text-secondary);font-size:var(--text-sm)}
.hint{color:var(--text-muted);font-size:var(--text-sm)}

/* ---- 説明の i マーク（2026-08-25 研究室指摘「説明文をそれぞれ i マークに隠す」） ---- */
.ihint-wrap{position:relative;display:inline-flex;align-items:center;margin-left:6px;vertical-align:middle}
/* 記号の "i" ではなく線画アイコン（2026-08-25 ユーザー指定）。
   アイコン自体が丸を持つので、ボタン側の丸枠は外して余白だけ持たせる。 */
.ihint{width:26px;height:26px;flex:none;display:inline-flex;align-items:center;justify-content:center;
  border:none;background:none;color:var(--text-secondary);border-radius:var(--radius-sm);
  cursor:pointer;padding:0;transition:all var(--dur-fast) var(--ease)}
.ihint svg{width:20px;height:20px;display:block}   /* 2026-08-25 ユーザー指定で 16 → 18 → 20px */
.ihint:hover{color:var(--accent);background:var(--accent-subtle)}
.ihint[aria-expanded="true"]{color:var(--text-on-accent);background:var(--accent)}
.ihint-pop{position:absolute;left:0;top:calc(100% + 6px);z-index:1200;width:max-content;max-width:min(360px,80vw);
  padding:10px 12px;background:var(--surface-1);border:1px solid var(--border-strong);
  border-radius:var(--radius-md);box-shadow:var(--shadow-3);text-align:left;white-space:normal}
/* ポップの中の説明は本文色で出す（隠した先まで薄いと読めない） */
.ihint-pop .ihint-body{margin:0;color:var(--text);font-size:var(--text-sm);line-height:1.7}
/* 画面右端で切れないよう、右寄りに置かれたボタンは右基準にする */
.ihint-wrap.is-right .ihint-pop{left:auto;right:0}


/* ---- login ---- */
/* 縦は「中身が入る高さ」を確保したうえで中央寄せ（携帯の横向きでロゴ帯が画面外へ出ないよう
   place-items:center ではなく align-content で寄せる。2026-07-28 タッチ対応） */
.login{min-height:100dvh;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:var(--sp-5);padding:var(--sp-5);
  background:radial-gradient(1200px 600px at 50% -10%,rgba(68,147,248,.12),transparent 60%),var(--bg-base)}
.login__card{width:min(340px,100%);background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-xl);
  box-shadow:var(--shadow-3);padding:var(--sp-6)}
/* 協賛・運営ロゴ + クレジット + バージョン（2026-07-28 ユーザー指定） */
.login__foot{display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);text-align:center}
.login__logos{display:flex;align-items:center;gap:14px;background:#fff;border-radius:var(--radius-md);padding:8px 18px}
.login__logos img{height:26px;width:auto;object-fit:contain;display:block}
.login__logos img.logo-circle{height:32px}
.login__cred{margin:0;font-size:11px;color:var(--text-muted);letter-spacing:.02em}
.login__ver{margin:0;font-size:var(--text-xs);color:var(--text-muted);font-variant-numeric:tabular-nums}
.login__ver .sep{margin:0 .4em;opacity:.6}

/* β版の明示（2026-07-29 ユーザー指定: タブ・ヘッダ・ログイン画面で強めに示す）。
   -beta が外れるとテンプレート側の if ごと消えるので、ここは残してよい */
.beta-badge{display:inline-block;padding:1px 8px;border-radius:999px;background:var(--warning);
  color:#fff;font-size:12px;font-weight:700;letter-spacing:.08em;line-height:18px;flex:none}
.beta-note{display:flex;align-items:flex-start;gap:8px;margin:0 0 var(--sp-3);padding:8px 10px;
  border:1px solid var(--warning);border-radius:6px;background:var(--warning-subtle);
  font-size:var(--text-xs);line-height:1.6;color:var(--text);text-align:left}
.beta-note .beta-badge{margin-top:2px}
.login__help{margin:var(--sp-4) 0 0;text-align:center;font-size:var(--text-sm)}
.login__brand{display:flex;align-items:center;gap:var(--sp-2);justify-content:center;margin-bottom:var(--sp-2);
  background:#fff;border-radius:var(--radius-md);padding:8px 16px}
.login h1{font-size:var(--text-lg);text-align:center;margin-bottom:var(--sp-5)}
.login form{display:grid;gap:var(--sp-3)}
.login input{width:100%}
.login .error{color:var(--danger);font-size:var(--text-sm);text-align:center}
.login .sub{color:var(--text-muted);font-size:var(--text-sm);text-align:center;margin-top:var(--sp-4)}

/* ---- history ---- */
.page{padding:var(--sp-5)}
.table-wrap{max-width:100%;overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius-lg)}
table.history{width:100%;border-collapse:collapse;font-size:var(--text-base)}
.history thead th{position:sticky;top:0;text-align:left;font-size:var(--text-sm);font-weight:600;color:var(--text-secondary);
  background:var(--surface-1);padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border)}
.history tbody td{padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-muted)}
.history tbody tr:last-child td{border-bottom:none}
.history tbody tr:hover{background:var(--surface-2)}
.history .num{font-variant-numeric:tabular-nums;font-family:var(--font-mono);color:var(--text-secondary)}
.pager{display:flex;gap:var(--sp-3);align-items:center;padding:var(--sp-4) 0;color:var(--text-secondary);font-size:var(--text-sm)}

/* ---- toast ---- */
/* トーストは下中央・フッタ直上（モック準拠） */
.toast-region{position:fixed;bottom:calc(44px + var(--sp-3));left:50%;transform:translateX(-50%);z-index:1200;
  display:flex;flex-direction:column;align-items:center;gap:var(--sp-3);max-width:min(480px,92vw)}
.toast{display:flex;gap:var(--sp-3);padding:var(--sp-3) var(--sp-4);background:var(--surface-3);color:var(--text);
  border:1px solid var(--border);border-left:3px solid var(--accent);border-radius:var(--radius-md);box-shadow:var(--shadow-3);
  animation:toastin var(--dur-normal) var(--ease)}
.toast--success{border-left-color:var(--success)} .toast--danger{border-left-color:var(--danger)}
.toast--warning{border-left-color:var(--warning)}
@keyframes toastin{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.toast{animation:none}}

/* ---- logs（検知ログ）---- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:var(--sp-3)}
.stat{background:var(--surface-1);border:1px solid var(--border);border-radius:var(--radius-lg);padding:var(--sp-3) var(--sp-4)}
.stat .k{font-size:var(--text-sm);color:var(--text-secondary)}
.stat .v{font-size:var(--text-xl);font-weight:600;font-variant-numeric:tabular-nums;margin-top:2px}
.stat .v u{font-size:var(--text-sm);font-weight:400;color:var(--text-muted);text-decoration:none;margin-left:2px}
.chart-wrap{position:relative}
.chart-wrap canvas{display:block;width:100%}
/* 凡例は図の上に置く（2026-07-28 ユーザー指定） */
.chart-legend{display:flex;gap:var(--sp-4);flex-wrap:wrap;margin-bottom:var(--sp-3);
  justify-content:center;align-items:flex-start;
  font-size:var(--text-sm);color:var(--text-secondary)}
.chart-legend .chip{width:10px;height:10px;border-radius:3px;display:inline-block;margin-right:6px;vertical-align:-1px}
.chart-tip{position:absolute;pointer-events:none;display:none;z-index:5;min-width:120px;
  background:var(--surface-3);border:1px solid var(--border);border-radius:var(--radius-md);
  box-shadow:var(--shadow-1);padding:var(--sp-2) var(--sp-3);font-size:var(--text-sm)}
.chart-tip .d{font-weight:600;margin-bottom:2px}
.chart-tip .r{display:flex;justify-content:space-between;gap:var(--sp-3);color:var(--text-secondary)}
.chart-tip .r b{color:var(--text);font-variant-numeric:tabular-nums;font-weight:600}
.chart-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  color:var(--text-muted);font-size:var(--text-sm);pointer-events:none}
.chart-empty[hidden]{display:none}
details.card>summary{cursor:pointer;padding:var(--sp-3) var(--sp-4);font-weight:600;color:var(--text-secondary);list-style:none}
details.card>summary::before{content:"▸ ";color:var(--text-muted)}
details.card[open]>summary::before{content:"▾ "}
details.card[open]>summary{border-bottom:1px solid var(--border-muted)}

/* ---- people（人数検知: 検知数ログ + 保存画像。モックの personview 準拠） ---- */
.pv-chip{font-size:var(--text-xs);color:var(--text-secondary);border:1px solid var(--border);
  border-radius:var(--radius-full);padding:2px 9px;white-space:nowrap;font-variant-numeric:tabular-nums}
.pv-gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:8px}
.pv-thumb{position:relative;aspect-ratio:4/3;border-radius:var(--radius-sm);overflow:hidden;
  border:1px solid var(--border-strong);cursor:pointer;background:#060a10;padding:0}
.pv-thumb:hover{border-color:var(--accent)}
.pv-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.pv-thumb .cap{position:absolute;left:0;right:0;bottom:0;z-index:2;display:flex;justify-content:space-between;gap:4px;
  padding:3px 6px;font-size:11px;color:rgba(255,255,255,.85);background:linear-gradient(0deg,rgba(0,0,0,.72),transparent);
  font-variant-numeric:tabular-nums;font-family:var(--font-mono)}
.pv-empty{padding:26px 10px;text-align:center;font-size:var(--text-sm);color:var(--text-muted)}
/* ライトボックス（保存画像の拡大表示） */
.pv-lb{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  background:rgba(4,8,16,.78);backdrop-filter:blur(2px)}
.pv-lb-box{width:min(92vw,880px);background:var(--surface-1);border:1px solid var(--border-strong);
  border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-3)}
.pv-lb-scene{position:relative;aspect-ratio:4/3;max-height:min(62vh,660px);margin:0 auto;background:#060a10;overflow:hidden}
.pv-lb-scene img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
.pv-lb-meta{display:flex;flex-wrap:wrap;gap:4px 18px;padding:10px 14px;font-size:var(--text-xs);color:var(--text-secondary);
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;border-top:1px solid var(--border-muted)}
.pv-lb-meta b{color:var(--text);font-weight:500}
.pv-lb-bar{display:flex;align-items:center;gap:8px;padding:8px 14px;border-top:1px solid var(--border-muted)}
.pv-lb-bar .sp{flex:1;font-size:var(--text-xs);color:var(--text-muted);font-variant-numeric:tabular-nums;font-family:var(--font-mono)}

/* ================= 海岸詳細 / サイネージ（/signage/{beach}: 読み取り専用） ================= */
/* 1 海岸表示は PC ではページをスクロールさせない（ヘッダー・拠点バー・フッターを引いた残りに収める） */
body:has(.signage) main{display:flex;flex-direction:column;min-height:0;flex:1 1 auto}
/* height を確定させる（min-height だけだと中身が大きいとき body ごと伸びて、
   「残り高さいっぱい」を基準にするカメラ最大化（sizeCams）が働かない。2026-07-29） */
body:has(.signage){overflow:hidden;height:100dvh}
.signage{flex:1;min-height:0;overflow:hidden;display:flex;flex-direction:column;
  padding:8px 14px 10px;max-width:none;height:auto}
/* 携帯・タブレット（タッチ端末）や狭い画面では 1 画面に収めず、縦スクロールで見る
   （2026-07-29 ユーザー指定: 携帯は必ず・タブレットも入り切らなければスクロール。PC は 1 画面固定のまま）。
   モニターから拠点を選ぶとこの画面が先に出るため、overflow:hidden が携帯にも効いていると
   「モニターがスクロールできない」symptom になる（実測: docH 1440 > 844 で scrollY 固定） */
@media(max-width:960px),(pointer:coarse){
  body:has(.signage){overflow:auto;height:auto;min-height:100dvh}
  .signage{height:auto;overflow:visible}
}
.sign-board{flex:1;min-height:0;display:flex;flex-direction:column;justify-content:flex-start;gap:8px;
  background:var(--surface-1);border:1px solid var(--border-muted);border-radius:var(--radius-md);padding:12px}
.beach-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;flex:none}
.bh-name{font-size:18px;font-weight:600} .bh-loc{font-size:13px;color:var(--text-secondary);margin-top:2px}
.bh-r{display:flex;align-items:center;gap:12px}
.bh-meta{font-size:13px;color:var(--text-secondary);font-variant-numeric:tabular-nums;font-family:var(--font-mono)}
/* 全カメラ並列（モック cam-grid 準拠: 列数=カメラ台数、1 カメラ 1 カード） */
/* PC はカメラ映像を最大化する（2026-07-29 ユーザー指定。16:9 に限らずどの画面でも最大を取る）。
   実寸は JS（signage.js の sizeCams）が「1〜n 行」の組合せから最大になる幅を選んで px 確定する */
.sign-cams{flex:1 1 auto;min-height:0;display:flex;flex-wrap:wrap;justify-content:center;align-content:center;gap:10px;
  overflow:hidden}   /* JS が確定するまでの一瞬、素の width:100% であふれるのを見せない */
.sign-cams .vcard{width:100%;aspect-ratio:16/9;cursor:default}
/* 携帯・タブレット縦は従来どおり縦積み（JS の px 確定は >960px のみ）。全画面ボタンも PC 用 */
@media(max-width:960px){.sign-cams{flex-direction:column;flex-wrap:nowrap;align-content:stretch}
  .sign-cams .vcard{width:100%!important;height:auto!important}
  #sgFs{display:none}}
/* エリア重畳（JS が contain 表示の実映像矩形に合わせて位置決めする） */
.sg-cam svg.area-svg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:2;pointer-events:none}
/* 情報帯: 遊泳条件 / 遊泳環境 / お知らせ・イベント / QR */
/* flex:none … 余った縦はカメラ（.sign-cams flex:1）へ回して映像を最大化（2026-07-29） */
.sign-info{flex:none;min-height:0;max-height:clamp(220px,32vh,420px);margin-top:8px;overflow:hidden;
  display:grid;grid-template-columns:minmax(150px,.7fr) 2fr 1.4fr max-content;gap:10px;align-items:stretch}
@media(max-width:1100px){.sign-info{grid-template-columns:1fr 1fr;max-height:none;overflow:visible}}
@media(max-width:640px){.sign-info{grid-template-columns:1fr}}
.sign-flag{display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:6px;
  padding:14px 10px;border-radius:8px;border:1.5px solid var(--border);min-width:0}
.sign-flag .sf-lead{font-size:clamp(11px,1.5vh,16px);font-weight:600;color:var(--text-secondary);letter-spacing:.08em}
.sign-flag .sf-t{font-size:clamp(18px,3.4vh,38px);font-weight:700;display:flex;align-items:center;
  justify-content:center;gap:.4em;flex-wrap:wrap;max-width:100%;overflow-wrap:anywhere;line-height:1.15}
/* 旗アイコンで示す（2026-07-28 ユーザー指定。従来のドットは廃止） */
.sign-flag .sf-ic{display:inline-flex;width:1em;height:1em;flex:none}
.sign-flag .sf-ic svg{width:100%;height:100%;display:block}
.sign-flag.b{background:rgba(84,144,217,.14);border-color:rgba(84,144,217,.55)} .sign-flag.b .sf-t{color:var(--accent)}
.sign-flag.y{background:rgba(233,198,69,.14);border-color:rgba(233,198,69,.55)} .sign-flag.y .sf-t{color:var(--flag-yellow)}
.sign-flag.r{background:rgba(225,92,84,.18);border-color:rgba(225,92,84,.6)} .sign-flag.r .sf-t{color:var(--danger)}
.se-h{display:flex;align-items:center;gap:7px;font-size:clamp(11px,1.5vh,15px);font-weight:600;
  color:var(--text-secondary);margin-bottom:8px;letter-spacing:.03em}
.seh-mark{width:8px;height:8px;border-radius:2px;background:var(--accent);flex:none}
.sign-env,.sign-news,.sign-qr{padding:12px;border:1px solid var(--border-muted);border-radius:8px;min-height:0;
  display:flex;flex-direction:column;justify-content:center}
.se-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(6px,1.2vh,14px) 18px;
  justify-items:start;align-content:center}
.env-cell{display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.env-cell .ek{display:inline-flex;align-items:center;gap:4px;font-size:clamp(10px,1.5vh,15px);font-weight:700;
  color:var(--text-secondary);letter-spacing:.04em;padding:2px 7px;
  border:1px solid var(--border);border-radius:3px;background:rgba(255,255,255,.03);white-space:nowrap}
.env-cell .ek svg{width:1.1em;height:1.1em;flex:none}
[data-theme="light"] .env-cell .ek{background:rgba(15,35,65,.04)}
.env-cell .ev{font-family:var(--font-sans);font-size:clamp(15px,2.2vh,24px);font-weight:600;
  font-variant-numeric:tabular-nums;line-height:1.35}
.env-cell .ev u{font-size:11px;color:var(--text-secondary);text-decoration:none;margin-left:2px;font-family:var(--font-sans)}
.sign-news{overflow:auto}
.sn-b{font-size:clamp(13px,2.2vh,24px);line-height:1.8;font-weight:700;color:var(--text)}
/* お知らせは箇条書き（1 件 = 1 項目）。現行システム・iOS アプリと同じ構造（2026-07-28） */
.sn-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.3em}
.sn-list .sn-item{display:flex;gap:.55em;align-items:baseline}
.sn-list .sn-item::before{content:"・";flex:none;color:var(--text);font-size:1.25em;line-height:1}
.sn-b .sn-date{color:var(--text-secondary);font-size:.82em;margin-right:.5em;font-variant-numeric:tabular-nums}
.sign-qr{align-items:center;text-align:center;gap:8px}
.sign-qr span{font-size:clamp(9px,1.3vh,13px);color:var(--text-secondary);line-height:1.4;max-width:240px}
/* 実 QR 2 枚（iOS / Android。モック qr-pair 準拠） */
.qr-pair{display:flex;gap:12px}
.qr-item{display:flex;flex-direction:column;align-items:center;gap:3px}
.qr-item img.qr{width:clamp(62px,10vh,112px);height:clamp(62px,10vh,112px);border-radius:3px;background:#fff;
  box-shadow:0 0 0 3px #fff;display:block}
.qr-item .os{font-size:clamp(9px,1.3vh,13px);color:var(--text-secondary)}
/* 状態ピル（遊泳条件） */
.pill{display:inline-flex;align-items:center;gap:6px;padding:3px 11px;border-radius:999px;font-size:13px;font-weight:600;border:1px solid transparent}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.b{color:var(--accent);background:var(--accent-subtle)}
.pill.y{color:var(--flag-yellow);background:rgba(233,198,69,.14)}
.pill.r{color:var(--danger);background:var(--danger-subtle)}

/* ================= 管理ページ（/manage, 1画面統合） =================
   モック mim-console-mock.html「管理」ビュー準拠: カメラ実映像タイル + パネル横並び。
   旧 /settings（検知しきい値・エリア）は 2026-07-25 に本画面へ統合。 */
.manage{padding:0 var(--sp-5) var(--sp-6);max-width:none;margin:0}
/* 帯（.controls）は画面端まで、そのほかの中身は従来どおり 1500px で中央寄せ */
.manage > *:not(.controls){max-width:1500px;margin-left:auto;margin-right:auto}
/* カメラタイル: 列数=カメラ台数（--cams は JS が設定）。エリア編集の描画面を兼ねる */
.mg-cams{display:grid;grid-template-columns:repeat(var(--cams,3),minmax(0,1fr));gap:var(--sp-4);margin-top:var(--sp-4)}
@media(max-width:900px){.mg-cams{grid-template-columns:1fr}}
.mg-cams .vcard{width:100%;aspect-ratio:16/9;cursor:default}
/* エリアは正規化座標=フレーム全体基準。cover の切り欠きで座標がずれないよう fill で貼る */
.mg-cam .vid img.feed{object-fit:fill}
/* 編集面はオーバーレイ（ov-top/ov-bot, z-3）より上に置く（モックの rescue-svg z-6 相当）。
   管理タイルの ov-bot はカメラバッジのみでクリック対象が無いため pointer-events も切る */
.mg-cam svg.area-svg{position:absolute;inset:0;width:100%;height:100%;z-index:4}
/* 描画中はブラウザ既定のスクロール・ピンチにジェスチャを渡さない（touch-action:none）。
   指の軌跡がそのまま図形になる。描いていないときは通常どおり画面をスクロールできる
   （2026-07-28 ユーザー要望のタッチ対応） */
.mg-cam svg.area-svg.editing,.mg-cam svg.area-svg.drawing{cursor:crosshair;touch-action:none}
/* レスキューエリア編集中のタイル明示: ティールの枠 + 「編集中」バッジ（右下。左下の cam バッジと重ねない） */
.mg-cam.editing{outline:2px solid var(--rescue);outline-offset:1px}
/* 編集中バッジ。文言は JS が data-editing に入れる（言語切替と離岸流/レスキューの出し分け） */
.mg-cam.editing::after{content:attr(data-editing);position:absolute;right:8px;bottom:8px;z-index:5;
  background:var(--rescue);color:var(--bg-base);font-size:var(--text-xs);font-weight:700;letter-spacing:.02em;
  padding:3px 9px;border-radius:var(--radius-sm);pointer-events:none}
.mg-cam.editing--rip::after{background:var(--rip-area);color:#fff}
.mg-cam .ov-bot{pointer-events:none}
/* パネル横並び（モック admin-panels 準拠）。admin=4列 / operator=2列は auto-fit で自然に埋まる */
/* 縦幅は 4 パネルで揃える（2026-07-28 ユーザー指定）。各列の最後のカードが余白を吸収して
   下端が一直線になる。お知らせは入力欄自体が伸びる */
.admin-panels{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:var(--sp-4);align-items:stretch;margin-top:var(--sp-4)}
@media(max-width:640px){.admin-panels{grid-template-columns:1fr;align-items:start}}
.op-col{display:flex;flex-direction:column;gap:var(--sp-4);min-width:0}
.op-col > .card:last-child{flex:1;display:flex;flex-direction:column}
.op-col > .card:last-child > .card__body{flex:1;display:flex;flex-direction:column}
.op-col > .card:last-child > .card__body > .field:has(#noticeInput){flex:1;display:flex;flex-direction:column}
#noticeInput{flex:1;min-height:110px;resize:vertical}
.op-col .manage-actions{margin-top:auto;padding-top:var(--sp-3)}
/* お知らせの行エディタ（1 行 = 箇条書きの 1 項目。2026-07-28 ユーザー指定） */
.notice-list{display:flex;flex-direction:column;gap:6px}
.notice-row{display:flex;align-items:center;gap:8px}
.notice-row::before{content:"・";color:var(--text);flex:none;font-weight:700;
  font-size:1.5em;line-height:1;margin-right:-2px}
.notice-row input{flex:1;min-width:0}
.notice-del{flex:none;width:26px;height:26px;display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--border-strong);background:none;color:var(--text-muted);border-radius:4px;
  cursor:pointer;font-family:inherit;font-size:14px;line-height:1}
.notice-del:hover{color:var(--danger);border-color:var(--danger)}
.notice-add{align-self:flex-start;margin-top:var(--sp-2)}

/* 遊泳条件は旗アイコンの 3 分割コントロール（2026-07-28 ユーザー指定: 折り返しの余白をなくし
   旗の色で一目で分かるようにする）。選択中は旗の色で塗り、未選択は淡色 */
.flagseg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.fseg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  border:1px solid var(--border-strong);background:rgba(255,255,255,.03);
  color:var(--text-secondary);font-size:13px;font-weight:600;padding:10px 6px;border-radius:6px;
  cursor:pointer;font-family:inherit;text-align:center;line-height:1.25;
  transition:background .12s ease,border-color .12s ease,color .12s ease}
/* 閲覧画面に出せない遊泳条件は選べない（2026-08-25 ユーザー指定）。
   隠すのではなく無効にして「選べない」ことを見せる */
.fseg:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(1)}
.fseg:disabled:hover{background:none;border-color:var(--border)}
[data-theme="light"] .fseg{background:rgba(15,35,65,.03)}
.fseg .fseg-ic{display:block;width:22px;height:22px}
.fseg .fseg-ic svg{width:100%;height:100%;display:block}
.fseg:hover{color:var(--text);border-color:var(--border-strong)}
.fseg--allowed .fseg-ic{color:var(--accent)}
.fseg--caution .fseg-ic{color:var(--flag-yellow)}
.fseg--prohibited .fseg-ic{color:var(--danger)}
.fseg.active{color:var(--text)}
.fseg--allowed.active{border-color:var(--accent);background:var(--accent-subtle)}
.fseg--caution.active{border-color:var(--flag-yellow);background:rgba(233,198,69,.16)}
.fseg--prohibited.active{border-color:var(--danger);background:rgba(225,92,84,.16)}
@media(prefers-reduced-motion:reduce){.fseg{transition:none}}
/* 水温・干満: 自由記述 3 入力を 1 カードに横並び（モック opPanelA の op-grid 準拠） */
.tide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--sp-3)}
.tide-grid input{min-width:0;width:100%;font-variant-numeric:tabular-nums}
.manage-actions{display:flex;justify-content:flex-end;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-4)}

/* ---- 検知設定（/settings, admin）・エリア（管理ページ内, admin） — モック準拠 ---- */
/* 海岸タブ（モックの拠点バー相当） */
/* 拠点タブ（管理・検知設定）: 配色と選択の見え方はモニターの拠点バー（.beach-btn）に合わせ、
   大きさは読みやすいこちらの寸法を残す（2026-07-27 ユーザー指定） */
.beach-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* 管理・検知設定の操作行は、モニターの拠点バー（.gbar）と同じ帯として見せる。
   構成も同じ（拠点ラベル + タブ + 右端のアクション）ので、面と下線を揃えれば見た目が一致する */
/* モニターの拠点バー（.gbar）と完全に同じ帯にする: ヘッダー直下へ密着させ（ページ左右余白を打ち消し）、
   高さ・面・下線・文字サイズを揃える（2026-07-27 ユーザー指摘: 浮いた帯・色違い・字の大きさ差） */
/* .manage は max-width:1500px で中央寄せのため、負のマージンだけでは画面端まで届かない。
   100vw 幅にして左右へはみ出させ、モニターの拠点バーと同じ「画面いっぱいの帯」にする
   （2026-07-27 ユーザー指定） */
/* 帯はヘッダー直下に密着させる（.page/.manage の上パディングを打ち消す） */
/* 帯は「本文の幅 + 左右パディング」で画面端まで伸ばす。
   100vw だとスクロールバーぶんを含むため、スクロールするページ（管理・アラートログ・
   人数検知）だけ帯が約 7px 左へずれ、「拠点」の左余白がタブごとに食い違っていた
   （2026-07-28 ユーザー指摘）。vw を使わなければどのタブでも同じ位置に揃う。
   .manage は max-width を持たせず、帯以外の中身側で中央寄せする（下の .manage > *:not(.controls)） */
.manage > .controls,
/* 2026-08-25 研究室指摘「拠点の行までを固定化したほうが、スクロールしてわかりやすい」。
   .topbar（top:0）の直下に貼り付ける。z-index は .topbar(1000) より下・本文より上。 */
.controls.beach-bar{position:sticky;top:var(--topbar-h);z-index:900;
  background:var(--surface-1);border-bottom:1px solid var(--border);
  min-height:46px;padding:0 var(--sp-5)!important;
  width:auto;   /* position は上の sticky（2026-08-25）。ここで relative に戻さない */
  margin-left:calc(-1 * var(--sp-5));margin-right:calc(-1 * var(--sp-5));
  margin-bottom:var(--sp-4);border-radius:0;display:flex;align-items:center;gap:6px;flex-wrap:wrap}
/* 帯を持つページは上パディングを 0 にする（負マージンだとヘッダーに潜り込む） */
.page.has-bar{padding-top:0}
/* 拠点タブ群の右に区切りの余白（対象日などが密着して見えるのを防ぐ。2026-07-27） */
.controls.beach-bar > .beach-tabs{margin-right:var(--sp-5);position:relative}
.controls.beach-bar > .beach-tabs::after{content:"";position:absolute;right:calc(-1 * var(--sp-5) / 2);
  top:50%;transform:translateY(-50%);width:1px;height:18px;background:var(--border-strong)}
/* 発報中の拠点の印（赤ドット）。どの画面の拠点ボタンにも共通で付く（2026-07-29） */
.btab.is-alerting::after,.beach-btn.is-alerting::after{content:"";display:inline-block;
  width:8px;height:8px;margin-left:6px;border-radius:50%;background:var(--danger);
  vertical-align:1px;animation:alertdot 1.2s ease-in-out infinite}
@keyframes alertdot{0%,100%{opacity:1}50%{opacity:.35}}
@media(prefers-reduced-motion:reduce){.btab.is-alerting::after,.beach-btn.is-alerting::after{animation:none}}

/* 帯の中のタブ・ボタンはモニターと同寸（font var(--text-sm) / padding 6px 14px / radius 4px） */
.manage > .controls .btab,.controls.beach-bar .btab{font-size:var(--text-sm);padding:6px 14px}
.manage > .controls .btn,.controls.beach-bar .btn{font-size:var(--text-sm)}
/* 帯に載る対象日などのラベルも同じ字面に */
.controls.beach-bar .switch{font-size:var(--text-sm);color:var(--text-secondary)}
.beach-tabs .bt-label{font-size:11px;color:var(--text-muted);letter-spacing:.08em;margin-right:2px;
  white-space:nowrap;flex:none}
.btab{border:1px solid var(--border);background:none;color:var(--text-secondary);
  font-size:var(--text-sm);font-weight:500;padding:6px 14px;border-radius:4px;cursor:pointer;
  font-family:inherit;transition:all .2s}
.btab:hover{color:var(--text);border-color:var(--accent);background:var(--accent-subtle)}
.btab.active{background:var(--accent);border-color:var(--accent);color:#fff}
/* 検知種別カード（アラート間隔 / 発生回数 / ならない時間）。/settings ではモックの
   set-cards（auto-fit minmax(270px,1fr)）で横並び */
.set-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:var(--sp-4);
  align-items:start;margin-top:var(--sp-4)}
.set-card .set-row{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:9px 0;border-bottom:1px solid var(--border-muted)}
.set-card .set-row label{font-size:var(--text-sm);color:var(--text-secondary)}
.set-in{display:inline-flex;align-items:center;gap:6px}
.set-in input{width:100px;text-align:right;font-variant-numeric:tabular-nums}
.set-in .unit{font-size:var(--text-xs);color:var(--text-muted);min-width:1.5em}
/* 2026-08-25 研究室指摘「保存ボタンは右揃えでよいのではないか」。
   space-between だと未保存カード（更新者の行が無い）で保存だけが左端に残っていた。
   flex-end + 更新者側の margin-right:auto なら、保存の有無にかかわらず右端に揃う。 */
.set-foot{display:flex;align-items:center;justify-content:flex-end;gap:var(--sp-3);margin-top:var(--sp-3)}
.set-foot > .hint{margin-right:auto}
/* エリア（凡例ドット + タイル上のポリゴン） */
.area-key{display:inline-flex;align-items:center;gap:6px;margin-right:var(--sp-3);white-space:nowrap}
.ak-dot{width:9px;height:9px;border-radius:2px;display:inline-block;flex:none}
.ak-rescue{background:var(--rescue)} .ak-rip{background:var(--rip-area)}
/* ポリゴン（stroke/fill の色は JS が種別ごとに style で当てる。モックの ra-* 準拠） */
.ra-fill{fill-opacity:.22;stroke-width:.9;vector-effect:non-scaling-stroke;stroke-linejoin:round}
.ra-fill.inactive{fill-opacity:.06;stroke-dasharray:3 3;opacity:.6}
.ra-fill.hot{fill-opacity:.34;stroke-width:1.6}
/* AI が検知した離岸流の枠（海岸詳細 / サイネージ）。モニターの canvas と同じ見た目に
   そろえる: 赤の実線 + 暗いハロー（明るい映像の上でも縁が見える）。2026-07-29 */
.rip-rect-det{fill:none;stroke:#e15c54;stroke-width:2.7;vector-effect:non-scaling-stroke;
  paint-order:stroke;stroke-linejoin:round;filter:drop-shadow(0 0 2px rgba(1,4,9,.85))}
.ra-line{fill-opacity:.14;stroke-width:1;vector-effect:non-scaling-stroke;stroke-linejoin:round;fill:none}
polygon.ra-line{fill-opacity:.14}
.ra-guide{fill:none;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:3 3;opacity:.65}
.ra-dot{fill:#fff;stroke-width:.6;vector-effect:non-scaling-stroke}
.ra-dot.ra-start{stroke:#fff;stroke-width:1}   /* 始点（クリックで閉じる目印。モック ra-start 準拠） */
/* 言語切替（ヘッダのアイコンボタン列 / ログイン画面は右上に単独で置く。2026-07-28） */
#langToggle{font-size:12px;font-weight:700;letter-spacing:.04em;width:auto;min-width:34px;padding:0 8px}
.login__lang{position:fixed;top:var(--sp-4);right:var(--sp-4);z-index:10}

/* ON/OFF トグルスイッチ（2026-07-28 ユーザー指定: 単なる表示切替はスイッチで示す） */
.tgl{display:inline-flex;align-items:center;gap:var(--sp-2);cursor:pointer;
  font-size:var(--text-sm);color:var(--text-secondary);user-select:none}
.tgl input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.tgl-track{position:relative;flex:none;width:34px;height:18px;border-radius:999px;
  background:var(--surface-3);border:1px solid var(--border-strong);
  transition:background .15s ease,border-color .15s ease}
.tgl-knob{position:absolute;top:2px;left:2px;width:12px;height:12px;border-radius:50%;
  background:var(--text-muted);transition:transform .15s ease,background .15s ease}
.tgl input:checked + .tgl-track{background:var(--accent);border-color:var(--accent)}
.tgl input:checked + .tgl-track .tgl-knob{transform:translateX(16px);background:var(--text-on-accent)}
.tgl input:focus-visible + .tgl-track{outline:2px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){.tgl-track,.tgl-knob{transition:none}}

/* 離岸流アラート中の文言バナー（モニターの映像カード上部中央。2026-07-28 ユーザー要望） */
.rip-banner{position:absolute;top:8%;left:50%;transform:translateX(-50%);z-index:4;
  display:inline-flex;align-items:center;gap:7px;white-space:nowrap;
  background:rgba(190,44,38,.92);color:#fff;font-weight:700;font-size:clamp(12px,1.4vw,20px);
  padding:.45em 1em;border-radius:999px;box-shadow:0 2px 10px rgba(0,0,0,.4);
  animation:ripbanner 1.6s ease-in-out infinite}
.rip-banner svg{flex:none}
@keyframes ripbanner{0%,100%{opacity:1}50%{opacity:.72}}
@media(prefers-reduced-motion:reduce){.rip-banner{animation:none}}

/* 人検知の検知枠（管理タイル。モニターの canvas 描画と同じ赤・実線。2026-07-28） */
.det-rect{fill:none;stroke:#e15c54;stroke-width:1.6;vector-effect:non-scaling-stroke;
  paint-order:stroke;filter:drop-shadow(0 0 1px rgba(1,4,9,.75))}

/* 離岸流エリア矩形（モック rip-rect 準拠）: 下書き=破線 / 設定済み=実線+1.6s 明滅（通知中） */
.rip-rect{fill-opacity:.14;stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-dasharray:4 3}
.rip-rect.set{stroke-dasharray:none;fill-opacity:.24;animation:ripblink 1.6s ease-in-out infinite}
@keyframes ripblink{0%,100%{opacity:1}50%{opacity:.45}}
@media(prefers-reduced-motion:reduce){.rip-rect.set{animation:none}}
/* カメラ別の操作行（モック rescue-row 準拠。離岸流/レスキュー両パネルで共用）。
   狭い列でもはみ出さないよう折返し + ボタンは改行しない */
.rescue-row{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-2);padding:7px 0;border-bottom:1px solid var(--border-muted)}
/* 離岸流の行はボタンが 3 つ（範囲を描く / 設定 / クリア）。パネル 1 列の幅に収める */
.rescue-row .btn{white-space:nowrap;flex:none;padding:0 var(--sp-2);font-size:var(--text-xs)}
.rescue-row:last-child{border-bottom:none}
.rc-cam{font-weight:600;font-size:var(--text-sm);min-width:52px;font-variant-numeric:tabular-nums}
/* 状態は 1 行で読ませる（折り返すと「未 / 設 / 定」と縦に割れる。2026-07-28 実測 390px）。
   伸びるのは余白側（margin-right:auto）にして、ボタン 3 つを 1 行に収める */
.rc-status{font-size:var(--text-xs);flex:0 1 auto;min-width:0;white-space:nowrap;margin-right:auto;
  overflow:hidden;text-overflow:ellipsis}
/* ボタン群は塊で扱う（幅が足りないときは塊ごと右寄せで次の行へ。1 個だけ落ちない） */
.rc-acts{display:flex;gap:var(--sp-2);flex:none;margin-left:auto}
.rc-status.off{color:var(--text-muted)}
.rc-status.on{color:var(--rescue);font-weight:600}
.rc-status.draft{color:var(--rip-area)}
.rc-status.alarm{color:var(--danger);font-weight:600}

/* ---- brand logos（モック mim-console-mock.html 準拠） ---- */
.h-logos img.logo-mim{height:30px;width:auto;object-fit:contain;display:block}
.login__brand img{height:34px;width:auto;object-fit:contain;display:block}
/* フッタはモック準拠: 44px・クレジット中央寄せ */
.botbar{display:flex;align-items:center;justify-content:center;height:44px;position:relative;margin-top:var(--sp-6);
  border-top:1px solid var(--border);background:var(--surface-1)}
.botbar .cred{font-size:11px;color:var(--text-muted);padding:0 12px;letter-spacing:.02em}
.f-logos{position:absolute;right:0;top:0;bottom:0;display:flex;align-items:center;gap:8px;
  padding:0 16px 0 30px;background:#fff;clip-path:polygon(18px 0,100% 0,100% 100%,0 100%)}
[data-theme="light"] .f-logos{box-shadow:-1px 0 0 var(--border)}
.f-logos img{height:26px;width:auto;object-fit:contain}
.f-logos img.logo-circle{height:32px}

/* ---- グローバル拠点バー（モック gbar 準拠） ---- */
/* 左余白は他画面の帯（.controls.beach-bar）と同じ var(--sp-5) に揃える（2026-07-28 ユーザー指摘） */
.gbar{display:flex;align-items:center;gap:6px;min-height:46px;padding:0 var(--sp-5);background:var(--surface-1);
  border-bottom:1px solid var(--border);overflow-x:auto;overflow-y:hidden;scrollbar-width:none;flex:none}
.gbar::-webkit-scrollbar{display:none}
.gbar .gb-label{font-size:11px;color:var(--text-muted);letter-spacing:.08em;margin-right:2px;white-space:nowrap;flex:none}
.gbar .gb-sep{width:1px;height:18px;background:var(--border-strong);flex:none;margin:0 2px}
.beach-btn{flex:none;padding:6px 14px;font-size:var(--text-sm);font-weight:500;font-family:inherit;cursor:pointer;
  border:1px solid var(--border);border-radius:4px;background:none;color:var(--text-secondary);transition:all .2s}
.beach-btn:hover{color:var(--text);border-color:var(--accent);background:var(--accent-subtle)}
.beach-btn.active{background:var(--accent);border-color:var(--accent);color:#fff}

/* ---- 拠点選択マスター（管理者・モック h-master 準拠） ---- */
.h-master{position:relative}
.h-master-btn{font-size:var(--text-sm);font-weight:500;color:var(--text-secondary);background:none;
  padding:6px 14px;cursor:pointer;border:1px solid var(--border);border-radius:4px;
  font-family:inherit;transition:all .2s;white-space:nowrap}
.h-master-btn:hover{color:var(--text);border-color:var(--accent);background:var(--accent-subtle)}
.h-master-btn[aria-expanded="true"]{background:var(--accent);border-color:var(--accent);color:#fff}
.h-master-pop{position:absolute;right:0;top:calc(100% + 8px);min-width:210px;z-index:1100;padding:6px;
  background:var(--surface-1);border:1px solid var(--border-strong);border-radius:var(--radius-md);
  box-shadow:0 12px 32px rgba(0,0,0,.45)}
.h-master-pop .mp-title{font-size:10px;color:var(--text-muted);letter-spacing:.06em;padding:4px 8px 6px;text-transform:uppercase}
.h-master-pop label{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:4px;font-size:13px;color:var(--text);cursor:pointer}
.h-master-pop label .loc{margin-left:auto;font-size:10px;color:var(--text-muted)}
.h-master-pop label:hover{background:var(--accent-subtle)}
.h-master-pop input{accent-color:var(--accent)}
.h-master-pop .mp-note{font-size:10px;color:var(--text-muted);padding:6px 8px 2px;border-top:1px solid var(--border);margin-top:4px}

/* ---- モバイル用ボトムナビ（モック bottom-nav 準拠） ---- */
/* 2026-07-29 ユーザー指定「もう少し大きくして目立たせて」: 高さ 54→64px・文字 10.5→12.5px、
   選択中は青の面で塗る（上線だけより一目で分かる） */
.bottom-nav{display:none;position:fixed;left:0;right:0;bottom:0;z-index:70;height:64px;
  background:color-mix(in srgb,var(--surface-1) 96%,transparent);backdrop-filter:blur(8px);
  border-top:1px solid var(--border-strong);padding-bottom:env(safe-area-inset-bottom)}
.bottom-nav a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;
  font-size:13.5px;font-weight:600;color:var(--text-secondary);text-decoration:none;cursor:pointer}
.bottom-nav a::before{content:'';width:22px;height:4px;border-radius:2px;background:transparent;transition:background .2s}
.bottom-nav a.active{color:var(--accent);font-weight:700;background:var(--accent-subtle)}
.bottom-nav a.active::before{background:var(--accent)}
/* タブレット（iPad 834px 等）〜スマホ: 上部ナビを下部ナビへ移す。
   2026-07-27: ヘッダ項目が収まらず全ページが横スクロールしていた実測に基づく */
@media(max-width:1024px){
  .topnav{display:none}
  .bottom-nav{display:flex}
  /* フッターは携帯・タブレットでも出す（2026-07-29 ユーザー指定: ロゴ入りのフッターが欲しい）。
     下タブ（.bottom-nav）は fixed なので、フッターはページ末尾に通常配置のまま重ならない */
  .botbar{margin-top:var(--sp-4)}
  body{padding-bottom:76px}   /* 下タブ 64px + 余白 */
  .h-logos{padding:0 16px 0 10px}
  .h-logos img.logo-mim{height:26px}
}
@media(max-width:860px){
  .h-status{display:none}       /* 拠点数バッジ（幅が足りないときは落とす） */
  .h-clock{font-size:11px}
}
@media(max-width:600px){
  /* バナーが海岸名・カメラ名に重なるのを避けて少し下げる（2026-07-29 外部評価） */
  .rip-banner{top:56px}
  .h-clock{display:none}
  .topbar{gap:var(--sp-2);padding-right:var(--sp-2)}
  .topbar .btn{padding:5px 10px}
}
/* ヘッダは絶対に横へ溢れさせない（可変要素だけを縮める） */
.h-master,.h-status{min-width:0}

/* 携帯・タブレット（下タブ幅）の極小文字の引き上げ（2026-07-30 ユーザー指定の総点検）。
   映像カードはこの幅では画面幅いっぱいに大きく出るため、PC 向けの 9〜10px アクセントが
   不釣り合いに小さい。デザインの階層は保ちつつ 1〜2px 上げる */
@media(max-width:1024px){
  .b-loc,.b-time,.det-unit{font-size:12px}
  .b-date{font-size:13px}
  .cam-badge{font-size:13px}
  .gbar .gb-label,.beach-tabs .bt-label,.kind-label{font-size:12px}
  .sign-qr span,.qr-item .os{font-size:clamp(11px,1.3vh,13px)}
}

/* 全画面時のロゴはヘッダの白クリップブロックのみ（モック準拠。左下 fsLogo は廃止=二重表示防止） */
#fsLogo{display:none}

/* ---- 検知ログ: 毎分チャート（モック graph 準拠。Y軸固定 + 横スクロール、右端=最新） ---- */
.minute-chart{position:relative;display:flex;align-items:stretch}
.mc-yaxis{flex:none;display:block}
.mc-scroll{flex:1;min-width:0;overflow-x:auto;overflow-y:hidden}
.mc-inner canvas{display:block}

/* ---- 人数検知ギャラリのツール（カメラ絞り込み・並び替え） ---- */
.pv-tools{display:flex;align-items:center;gap:8px;margin-left:auto;flex-wrap:wrap}
.pv-cams{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.pv-tools select{font-size:13px;padding:3px 8px}

/* ---- モック kiosk 準拠のモニターレイアウト調整 ---- */
/* gbar(40px) + フッタ(28px) を差し引き、フッタが常に見える一画面構成にする */
body[data-immersive]{height:100dvh;overflow:hidden;display:flex;flex-direction:column}
body[data-immersive] main{flex:1;min-height:0;display:flex;flex-direction:column}
body[data-immersive] .monitor{flex:1;height:auto;min-height:0;padding:var(--sp-2)}
body[data-immersive] .wall{flex:1;min-height:0;align-content:stretch}
body[data-immersive] .botbar{margin-top:0}
.wall-hint{position:fixed;right:12px;bottom:52px;z-index:40;font-size:10px;color:var(--text-muted);
  letter-spacing:.02em;pointer-events:none;opacity:.6}
body.fsmon .wall-hint{display:none}
@media(max-width:1100px){body[data-immersive]{height:auto;overflow:auto}.wall-hint{display:none}}

/* ---- カードの遊泳フラグピル（モック pill.ovl 準拠。severity とは別軸の旗色） ---- */
.swim-pill{display:inline-flex;align-items:center;gap:5px;margin-top:6px;padding:2px 9px;border-radius:999px;
  font-size:11.5px;font-weight:600;border:1px solid;background:rgba(8,14,24,.62);width:max-content;
  backdrop-filter:blur(3px)}
.swim-pill::before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor}
.swim-pill[data-kind="success"]{color:#7db3e8;border-color:rgba(84,144,217,.55)}
.swim-pill[data-kind="warning"]{color:#d9a558;border-color:rgba(204,144,64,.55)}
/* 遊泳不可は最重要状態なので塗りで強調（モック準拠） */
.swim-pill[data-kind="danger"]{background:rgba(225,92,84,.88);border-color:transparent;color:#fff}
.swim-pill[data-kind="danger"]::before{background:#fff}
.gbar .gb-fs{margin-left:auto}
/* 携帯には全画面ボタンを出さない（2026-07-29 ユーザー指定。ページスクロールで見る想定） */
@media(max-width:600px){.gb-fs{display:none}}

/* ---- アラート履歴の検知画像サムネイル（2026-07-27） ---- */
.hs-thumb{display:block;width:96px;height:54px;padding:0;border:1px solid var(--border-strong);
  border-radius:var(--radius-sm);overflow:hidden;background:#060a10;cursor:zoom-in}
.hs-thumb:hover{border-color:var(--accent)}
.hs-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.pv-lb-head{display:flex;align-items:center;justify-content:space-between;gap:var(--sp-3);
  padding:var(--sp-3) var(--sp-4);border-bottom:1px solid var(--border-muted);font-size:var(--text-sm)}


/* ---- 全画面ボタンを目立たせる（2026-07-27 ユーザー要望） ---- */
.beach-btn.gb-fs{border:1px solid var(--accent);background:var(--accent-subtle);color:var(--text);
  font-weight:600}
.beach-btn.gb-fs:hover{background:var(--accent);color:var(--text-on-accent);border-color:var(--accent)}

/* ---- アラート種別の絞り込みボタン（アラートログ, 2026-07-27） ---- */
.kind-tabs{display:flex;gap:6px;flex-wrap:wrap;margin:0 0 var(--sp-4)}
.kind-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--border);background:none;
  padding:5px 10px;border-radius:4px;cursor:pointer;font-family:inherit;transition:all .2s}
.kind-btn:hover{border-color:var(--accent);background:var(--accent-subtle)}
.kind-btn.active{border-color:var(--accent);background:var(--accent-subtle);box-shadow:inset 0 0 0 1px var(--accent)}
.kind-btn .kc{font-variant-numeric:tabular-nums;font-size:var(--text-xs);color:var(--text-muted)}
/* 履歴テーブルの種別アイコン */
.history .k-ic{margin-right:6px}

/* 種別の絞り込み行（見出し + ボタン列。2026-07-27） */
.kind-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin:0 0 var(--sp-4)}
.kind-row .kind-tabs{margin:0}
.kind-label{font-size:11px;color:var(--text-muted);letter-spacing:.08em;white-space:nowrap;flex:none}

/* 検知種別アイコン（インライン SVG。バッジの文字色に追従） */
.k-svg{display:inline-flex;align-items:center;justify-content:center;width:14px;height:14px;flex:none}
.k-svg svg{width:14px;height:14px;display:block}
.badge .k-svg{margin-right:1px}
.badge:has(.k-svg)::before{display:none}   /* アイコンがあるバッジは丸ドットを出さない */

/* 保存画像の連続再生バー（2026-07-27） */
.pv-lb-bar .pv-lb-speed{font-size:var(--text-xs);color:var(--text-secondary);gap:6px}
.pv-lb-bar .pv-lb-speed select{font-size:var(--text-xs);padding:2px 6px}
.pv-lb-help{font-size:var(--text-xs);color:var(--text-muted);white-space:nowrap}
@media(max-width:640px){.pv-lb-help{display:none}}

/* カードのタイトルと補足の間隔（「保存画像」と日付が詰まって見えるのを防ぐ。2026-07-27） */
.card__header .card__title + .hint{margin-left:var(--sp-3)}

/* アラートログの「対応」列（状態遷移ボタン。2026-07-28 モニター右レール廃止に伴う移設） */
.hs-act{vertical-align:middle;white-space:nowrap;color:var(--text-secondary)}

/* 検知設定の発報ルール概念図（2026-07-28 ユーザー要望。設定値に追従して描き直す）。
   図には帯・点・時間軸だけを置き、説明は下の凡例に出す（図中の文字は抑止が長いと重なる） */
.set-diagram-wrap{margin:var(--sp-4) 0 var(--sp-3);padding:var(--sp-3);border:1px solid var(--border);
  border-radius:8px;background:rgba(127,127,127,.06)}
.set-diagram-title{font-size:var(--text-xs);font-weight:600;color:var(--text-secondary);margin-bottom:var(--sp-3)}
.alarm-diagram{width:100%;height:auto;display:block}
.set-diagram-legend{list-style:none;margin:var(--sp-2) 0 0;padding:0;display:flex;flex-direction:column;gap:4px;
  font-size:var(--text-xs);color:var(--text-secondary);line-height:1.5;counter-reset:adstep}
.set-diagram-legend li{display:flex;align-items:flex-start;gap:7px}
/* 起きる順（1.→2.→3.）が読み取れるように番号を振る。最後の「点は AI の検知」は補足なので振らない */
.set-diagram-legend li:not(:last-child){counter-increment:adstep}
.set-diagram-legend li:not(:last-child)::before{content:counter(adstep) ".";flex:none;
  font-variant-numeric:tabular-nums;color:var(--text-muted);min-width:1.1em}
.adl{width:11px;height:11px;border-radius:3px;flex:none;margin-top:3px}
.adl--window{background:rgba(84,144,217,.35);border:1px solid rgba(84,144,217,.7)}
.adl--suppress{background:rgba(127,127,127,.28);border:1px dashed rgba(127,127,127,.75)}
.adl--fire{background:var(--danger)}
.adl--again{background:transparent;border-left:2px dashed var(--text-muted);border-radius:0;width:6px}
.adl--none{background:transparent;border:1px solid var(--text-muted)}
.adl--dot{background:var(--accent);border-radius:50%;width:9px;height:9px;margin-top:4px}
.ad-axis{stroke:var(--border);stroke-width:1}
.ad-tick{stroke:var(--border);stroke-width:.8}
.ad-axis-label{fill:var(--text-secondary);font-size:11px}
.ad-window{fill:rgba(84,144,217,.24);stroke:rgba(84,144,217,.65);stroke-width:1;rx:3}
.ad-suppress{fill:rgba(120,120,120,.42);stroke:rgba(150,150,150,.7);stroke-dasharray:3 2;stroke-width:1;rx:3}
.ad-dot{fill:var(--accent)}
.ad-dot--muted{fill:var(--text-muted);opacity:.45}
.ad-dot--fire{fill:var(--danger)}
.ad-fireline{stroke:var(--danger);stroke-width:1.5}
.ad-againline{stroke:var(--text-muted);stroke-width:1;stroke-dasharray:3 2}
.ad-label{fill:var(--text-secondary);font-size:12px;font-weight:600}
.ad-label--fire{fill:var(--danger)}
.ad-label--muted{fill:var(--text-muted);font-weight:500}
.ad-note{fill:var(--text-secondary);font-size:11px}
.ad-span{stroke:var(--text-muted);stroke-width:.8;opacity:.7}
.ad-span--window{stroke:var(--accent)}
.ad-span--suppress{stroke:var(--text-muted)}

/* 対応中アラートの操作（管理画面。レガシー手引き 5.2 と同じく "当該カメラ映像の下"）。
   2026-07-28: 全幅のバーからカメラごとの欄へ変更 */
.mg-cell{display:flex;flex-direction:column;gap:var(--sp-2);min-width:0}
/* 広い画面では 1 行に収める。ただし収まらないときは折り返す —
   1 行に固執した結果、管理画面だけがページごと横スクロールしていた
   （2026-07-29 実測: 携帯 390px で 520px、タブレット横 1024px で 1182px まで伸びていた）。
   横スクロールは操作の邪魔になるうえ、説明書の図も端が切れていた */
.cam-alert{border:1px solid var(--danger);border-radius:8px;background:rgba(225,92,84,.08);
  padding:6px 8px;display:flex;flex-direction:column;gap:4px}
.cam-alert__row{display:flex;align-items:center;gap:8px;min-width:0;font-size:var(--text-sm);min-height:28px;
  flex-wrap:wrap}
.cam-alert .ca-at{color:var(--text-muted);font-variant-numeric:tabular-nums;font-family:var(--font-mono);
  white-space:nowrap}
/* ボタン列は塊で折り返す（1 つだけ次の行に落ちると押し間違えやすい）。
   ボタン内の文字は折らない（.btn 側の white-space:nowrap） */
.cam-alert .ca-acts{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.cam-alert .badge{white-space:nowrap}
/* アラートが無い間も同じ高さを確保する（枠と色だけ消す）。カメラの位置がずれない */
.cam-alert--empty{border-color:transparent;background:transparent}

/* レスキューエリアの立入通知スイッチ行（拠点共通。2026-07-29） */
.rescue-notify-row{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-3);
  padding-top:var(--sp-3);border-top:1px solid var(--border-muted)}
.rescue-notify-row .hint{margin:0}

/* 通知に添えた画像（レスキューエリア設定など。2026-07-28） */
.n-img{display:block;width:100%;max-width:260px;margin:6px 0;border-radius:6px;border:1px solid var(--border)}

/* ================= 携帯・タブレット（タッチ操作）対応 =================
   2026-07-28 ユーザー要望「携帯・タブレットだと画面タッチで動くようにしてほしい（Shift が使えない）」。
   Shift・右クリック・hover を前提にした操作は、JS 側でボタン／長押し／タップに置き換えてある。
   ここでは、指で操作したときにブラウザ既定のジェスチャに邪魔されないようにする。 */
/* エリアを描いている間のスクロール抑止（touch-action:none）は、管理ページの
   .mg-cam svg.area-svg.editing / .drawing の定義にまとめてある（上記） */
/* ダブルタップ拡大の待ち時間（約 300ms）を無くす。押した反応が遅れず、
   映像カードのダブルタップ＝拡大も確実に効く */
.vcard,.pv-thumb,.hs-thumb,.btn,.iconbtn,.btab,.beach-btn,.tab,.fseg,.kind-btn,
.notice-del,.nd-close,.bottom-nav a,.topnav a{touch-action:manipulation}
/* グラフは縦スクロールを残したまま、横になぞって値を読めるようにする */
.chart-wrap canvas,.mc-inner canvas{touch-action:pan-y}
@media (pointer:coarse){
  /* 指で押す前提の大きさ（WCAG 2.2 目標サイズ）。マウス環境の見た目は変えない */
  .btn{min-height:40px}
  .btn--sm{min-height:34px;padding:0 var(--sp-4)}
  .iconbtn{width:40px;height:40px}
  .nd-close{width:36px;height:36px}
  .notice-del{width:32px;height:32px}
  .btab,.beach-btn,.kind-btn,.h-master-btn{padding:9px 14px}
  .tab{padding:6px 12px;font-size:12px}
  .h-master-pop label{padding:9px 8px}
  /* iOS Safari は 16px 未満の入力欄にフォーカスするとページごと拡大する。
     入力のたびに画面が飛ぶのを防ぐため、タッチ端末では 16px にする */
  select,input,textarea{min-height:40px;font-size:16px}
}
/* 携帯（〜600px）のヘッダ: 中身が入りきらないと .topbar は overflow-x:clip なので
   右端のログアウトが切れて押せなくなる（2026-07-28 実測 390px で発生）。
   ここは pointer:coarse の指サイズ指定より後に置いて必ず勝たせる */
@media(max-width:600px){
  .topbar{gap:5px;padding-right:5px}
  .topbar .iconbtn{width:32px;height:32px;font-size:14px}
  .topbar .btn{padding:0 9px;font-size:12px;min-height:32px}
  .h-master-btn{padding:6px 9px;font-size:12px}
  .h-logos{padding:0 12px 0 8px}
  .h-logos img.logo-mim{height:22px}
  /* 携帯のフッターは縦積み（1 行だと中央のクレジットと右のロゴ面が重なる幅しかない）。
     ロゴは白抜き前提なので白いプレートに載せたまま中央へ */
  .botbar{height:auto;flex-direction:column;gap:8px;padding:10px 0 12px}
  .f-logos{position:static;clip-path:none;border-radius:8px;padding:5px 14px}
}
/* ---- 三本線メニュー（携帯。2026-07-29 ユーザー指定） ----
   401〜600px ではヘッダの中身（約 500px）が入り切らず右端が切れ、かつての 400px 以下の
   2 行折返しはロゴや本文と重なっていた（実測）。携帯では操作を三本線メニューへまとめ、
   ヘッダは「ロゴ + 通知ベル + 三本線」だけの 1 行にする */
.h-menu-btn{display:none}
.h-menu-pop{position:fixed;top:calc(var(--topbar-h) + 6px);right:6px;z-index:1200;
  width:min(300px,calc(100vw - 12px));max-height:calc(100dvh - var(--topbar-h) - 80px);
  overflow-y:auto;overscroll-behavior:contain;background:var(--surface-1);
  border:1px solid var(--border-strong);border-radius:var(--radius-md);box-shadow:var(--shadow-3);padding:6px}
.hm-item{display:flex;align-items:center;width:100%;gap:8px;padding:11px 10px;border:0;background:none;
  color:var(--text);font:inherit;font-size:var(--text-sm);border-radius:6px;cursor:pointer;text-decoration:none;text-align:left}
.hm-item:hover{background:var(--surface-2);text-decoration:none}
.hm-sec{border-bottom:1px solid var(--border-muted);margin-bottom:4px;padding-bottom:4px}
.hm-title{font-size:11px;color:var(--text-muted);letter-spacing:.06em;padding:6px 10px 2px;text-transform:uppercase}
#hmenuBeaches label{display:flex;align-items:center;gap:8px;padding:9px 10px;border-radius:4px;
  font-size:14px;color:var(--text);cursor:pointer}
#hmenuBeaches label .loc{margin-left:auto;font-size:10px;color:var(--text-muted)}
/* チェックボックスは入力欄向けの min-height（タッチ端末で 40px）を受けない。
   受けると 1 行が 60px 近くまで伸びて、6 拠点で画面からあふれる（2026-07-29 実測） */
#hmenuBeaches input,.h-master-pop input{accent-color:var(--accent);min-height:0;width:18px;height:18px;padding:0;flex:none}
#hmenuBeaches .mp-title{display:none}   /* メニュー側は .hm-title の見出しを使う */
#hmenuBeaches .mp-note{font-size:11px;color:var(--text-muted);padding:4px 10px 2px}
@media(max-width:600px){
  .h-menu-btn{display:inline-flex}
  /* 通知ベルと三本線以外の操作はメニューへ（ヘッダの重なり・見切れ対策） */
  .topbar .h-master,.topbar>a.iconbtn,.topbar>.btn,
  .topbar>button.iconbtn:not(.h-bell):not(.h-menu-btn){display:none}
}
/* 海岸詳細の見出し行も 320px では 1 行に収まらない（2026-07-28 実測） */
@media(max-width:400px){
  .beach-head{flex-wrap:wrap}
  .bh-r{flex-wrap:wrap;min-width:0}
  .bh-meta{overflow-wrap:anywhere}
}