/* ============================================================
   ソラノメ — 共通スタイル
   方針: 公共の地図に業務ログを添えた画面。色は「地図のカテゴリ」と「例外（重要度・要対応）」だけに使う。
   カードは最小限、罫線と表で整理する。和文は BIZ UDPゴシック、数字は BIZ UDゴシック、座標・ID は IBM Plex Mono。
   ============================================================ */

/* Windows 10/11 に入っている BIZ UD を優先し、無い環境だけ Web フォントを使う */
@font-face { font-family: "UD Local"; src: local("BIZ UDPGothic"), local("BIZ-UDPGothic"), local("BIZUDPGothic"); font-weight: 400; font-display: swap; }
@font-face { font-family: "UD Local"; src: local("BIZ UDPGothic Bold"), local("BIZ-UDPGothic-Bold"), local("BIZUDPGothic-Bold"); font-weight: 700; font-display: swap; }
@font-face { font-family: "UD Local Fixed"; src: local("BIZ UDGothic Bold"), local("BIZ-UDGothic-Bold"), local("BIZUDGothic-Bold"); font-weight: 700; font-display: swap; }

:root {
  /* 指定の 5 色 */
  --bg: #F4F7F6; --nav: #10282E; --accent: #197F72; --ink-900: #182B32; --card: #FFFFFF;
  --accent-700: #11564D; --accent-50: #EAF4F2; --accent-100: #D3E8E3; --accent-on-dark: #7FD1C2;
  /* 中立色（文字は ink-500 まで） */
  --ink-700: #33474E; --ink-600: #4F6168; --ink-500: #66777D;
  --line-300: #C5D0CD; --line-200: #DCE3E1; --fill-100: #EDF1F0; --fill-50: #F7F9F8;
  --nav-text: #C9D4D5; --nav-muted: #9FB3B8; --nav-line: rgba(255,255,255,.08);
  /* 重要度（文字色／背景） */
  --danger: #B42318; --danger-bg: #FEE4E2; --danger-line: #D92D20;
  --warning: #B54708; --warning-bg: #FEF0C7; --warning-line: #E36A00;
  --caution: #8A5A00; --caution-bg: #FEF7C3; --caution-line: #CA8504;
  --special: #5B2C83;
  /* 地図のカテゴリ */
  --cat-wildlife: #A3551C; --cat-disaster: #C7362E; --cat-transport: #2456B8; --cat-facility: #4A5888;
  --cat-drone: #6A45C2; --cat-tourism: #2C8550; --cat-event: #B83A86; --cat-other: #56677A; --cat-weather: #0B78AE;
  /* 形・奥行き・余白 */
  --r-tag: 2px; --r-ctl: 4px; --r-card: 6px; --r-sheet: 12px;
  --shadow-float: 0 0 0 1px rgba(16,40,46,.10), 0 1px 2px rgba(16,40,46,.12);
  --shadow-pop: 0 0 0 1px rgba(16,40,46,.08), 0 8px 24px -8px rgba(16,40,46,.28);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 72px; --s9: 120px;
  /* 文字 */
  --font: "UD Local", "BIZ UDPGothic", "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic UI", Meiryo, sans-serif;
  --font-num: "UD Local Fixed", "BIZ UDGothic", var(--font);
  --mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  /* 骨格 */
  --sidebar-w: 208px; --rail-w: 64px; --topbar-h: 48px; --panel-w: 360px; --tabbar-h: 60px;
  /* 動き（構造の変化を伝えるためだけに使う） */
  --ease: cubic-bezier(.2,.8,.2,1); --ease-in: cubic-bezier(.4,0,1,1);
  --t1: 120ms; --t2: 180ms; --t3: 240ms; --t4: 320ms;
}

/* ── 基本 ─────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
html, body { margin: 0; height: 100%; }
body { font-family: var(--font); color: var(--ink-900); background: var(--bg); font-size: 14px; line-height: 22px; letter-spacing: .02em; -webkit-font-smoothing: antialiased; line-break: strict; }
a { color: var(--accent-700); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 3px; }
h1, h2, h3, h4 { margin: 0; font-weight: 700; letter-spacing: .02em; word-break: auto-phrase; text-wrap: balance; }
p { margin: 0 0 12px; text-wrap: pretty; }
body { word-break: auto-phrase; overflow-wrap: break-word; }
.mono, .coord, code, kbd, input, textarea { word-break: normal; }
.fields .num, .detail-when .num { white-space: nowrap; }
img, svg { max-width: 100%; }
button, input, select, textarea { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
::selection { background: var(--accent-100); }
.icon { vertical-align: -0.2em; flex-shrink: 0; }
.icon-glyph { display: inline-flex; align-items: center; justify-content: center; width: var(--sz, 18px); height: var(--sz, 18px); font-weight: 700; font-size: calc(var(--sz, 18px) * .7); line-height: 1; }
.muted { color: var(--ink-600); }
.subtle { color: var(--ink-500); }
.small { font-size: 13px; line-height: 20px; }
.caption { font-size: 12px; line-height: 18px; color: var(--ink-600); letter-spacing: .04em; }
.mono { font-family: var(--mono); font-size: 13px; letter-spacing: 0; }
.num { font-family: var(--font-num); font-variant-numeric: tabular-nums; letter-spacing: 0; }
.nowrap { white-space: nowrap; }
.right { margin-left: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mt-1 { margin-top: 8px; } .mt-2 { margin-top: 16px; } .mt-3 { margin-top: 24px; } .mb-0 { margin-bottom: 0; } .mb-2 { margin-bottom: 16px; }
.flex { display: flex; gap: 8px; align-items: center; } .flex-wrap { flex-wrap: wrap; }
.mobile-only { display: none !important; }
.skip-link { position: absolute; left: 8px; top: -48px; z-index: 100; background: var(--card); padding: 8px 12px; border-radius: var(--r-ctl); box-shadow: var(--shadow-pop); }
.skip-link:focus { top: 8px; }

/* ── 骨格: サイドバー ───────────────────────────────────── */
.app { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); background: var(--nav); color: var(--nav-text); display: flex; flex-direction: column; position: fixed; inset: 0 auto 0 0; z-index: 40; overflow: hidden auto; transition: width var(--t3) var(--ease); view-transition-name: sidebar; }
.brand { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px; color: #fff; flex-shrink: 0; }
.brand:hover { text-decoration: none; }
.brand img { width: 24px; height: 24px; flex-shrink: 0; }
.brand-word { font-size: 17px; font-weight: 700; letter-spacing: .12em; white-space: nowrap; }
.nav { display: flex; flex-direction: column; padding: 8px 0; }
.nav-link { position: relative; display: flex; align-items: center; gap: 12px; height: 40px; padding: 0 20px; color: var(--nav-text); font-size: 14px; white-space: nowrap; border: 0; background: none; width: 100%; text-align: left; transition: background var(--t1) linear, color var(--t1) linear; }
.nav-link .icon { color: var(--nav-muted); transition: color var(--t1) linear; }
.nav-link:hover { background: rgba(255,255,255,.04); color: #fff; text-decoration: none; }
.nav-link:hover .icon { color: #fff; }
.nav-link.active { background: rgba(255,255,255,.06); color: #fff; font-weight: 700; }
.nav-link.active .icon { color: var(--accent-on-dark); }
.nav-link.active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--accent-on-dark); }
.nav-sep { height: 1px; background: var(--nav-line); margin: 8px 20px; }
.sidebar-foot { margin-top: auto; padding: 14px 20px 16px; border-top: 1px solid var(--nav-line); }
.me b { display: block; color: #fff; font-size: 13px; line-height: 20px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me span { display: block; font-size: 12px; line-height: 18px; color: var(--nav-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.foot-actions { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.link-btn { border: 0; background: none; padding: 0; color: var(--nav-muted); font-size: 13px; text-decoration: underline; text-underline-offset: 3px; }
.link-btn:hover { color: #fff; }
.rail-toggle { width: 28px; height: 28px; border: 1px solid var(--nav-line); border-radius: var(--r-ctl); background: none; color: var(--nav-muted); display: inline-flex; align-items: center; justify-content: center; }
.rail-toggle:hover { color: #fff; border-color: rgba(255,255,255,.2); }
/* 地図ページなどで細いレールにする */
.is-rail .sidebar { width: var(--rail-w); }
.is-rail .brand { padding: 0 20px; }
.is-rail .brand-word, .is-rail .nav-link span, .is-rail .me, .is-rail .link-btn, .is-rail .nav-sep { opacity: 0; pointer-events: none; }
.is-rail .nav-link { padding: 0 22px; }
.is-rail .sidebar-foot { padding: 12px 18px; }
.is-rail .foot-actions { justify-content: center; }
.is-rail .rail-toggle .icon { transform: scaleX(-1); }
.brand-word, .nav-link span, .me, .link-btn { transition: opacity var(--t2) linear; }
.is-rail .nav-link[data-tip]:hover::after { content: attr(data-tip); position: fixed; left: calc(var(--rail-w) + 8px); transform: translateY(-50%); margin-top: 20px; background: var(--nav); color: #fff; font-size: 13px; font-weight: 400; padding: 4px 10px; border-radius: var(--r-ctl); box-shadow: var(--shadow-pop); white-space: nowrap; z-index: 90; pointer-events: none; }

/* ── 骨格: 本体とトップバー ─────────────────────────────── */
.main { flex: 1; margin-left: var(--sidebar-w); display: flex; flex-direction: column; min-width: 0; min-height: 100vh; transition: margin-left var(--t3) var(--ease); }
.is-rail .main { margin-left: var(--rail-w); }
.topbar { height: var(--topbar-h); background: var(--card); border-bottom: 1px solid var(--line-200); display: flex; align-items: center; gap: 12px; padding: 0 24px; position: sticky; top: 0; z-index: 30; view-transition-name: topbar; }
.topbar-title { font-size: 16px; line-height: 24px; font-weight: 700; display: flex; align-items: baseline; gap: 10px; min-width: 0; white-space: nowrap; }
.area-btn { display: inline-flex; align-items: center; gap: 2px; border: 0; background: none; padding: 2px 4px; margin-left: -4px; font-size: 14px; color: var(--ink-600); border-radius: var(--r-ctl); }
.area-btn:hover { background: var(--fill-100); color: var(--ink-900); }
.area-text { font-size: 14px; color: var(--ink-600); font-weight: 400; }
.topbar-right { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.demo-tag { height: 24px; padding: 0 8px; border: 1px solid var(--caution); background: var(--caution-bg); color: var(--caution); border-radius: var(--r-tag); font-size: 12px; font-weight: 700; display: inline-flex; align-items: center; gap: 4px; margin-right: 8px; }
.demo-tag:hover { background: #F6EAC4; }
.icon-btn { position: relative; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-ctl); border: 0; background: none; color: var(--ink-600); }
.icon-btn:hover { background: var(--fill-100); color: var(--ink-900); text-decoration: none; }
.count-dot { position: absolute; top: 3px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; font-family: var(--font-num); border: 2px solid var(--card); box-sizing: content-box; transform-origin: center; }
.user-btn { display: inline-flex; align-items: center; gap: 4px; height: 36px; padding: 0 8px 0 10px; border: 0; background: none; border-radius: var(--r-ctl); font-size: 14px; color: var(--ink-900); white-space: nowrap; }
.user-btn:hover { background: var(--fill-100); }
.menu-toggle { display: none; }
.notice-banner { background: var(--accent-50); color: var(--accent-700); font-size: 13px; padding: 8px 24px; border-bottom: 1px solid var(--accent-100); }
.content { padding: 24px 24px 48px; flex: 1; width: 100%; max-width: 1440px; }
.content-map, .content.content-map { padding: 0; max-width: none; display: flex; flex-direction: column; }

/* ── ポップオーバー（Popover API） ─────────────────────── */
.pop { margin: 0; inset: auto; position: fixed; padding: 0; border: 0; border-radius: var(--r-card); background: var(--card); color: var(--ink-900); box-shadow: var(--shadow-pop); width: 320px; max-height: min(70vh, 560px); overflow: auto; opacity: 0; transform: translateY(-4px); transition: opacity var(--t2) var(--ease), transform var(--t2) var(--ease), overlay var(--t2) allow-discrete, display var(--t2) allow-discrete; }
.pop:popover-open { opacity: 1; transform: none; }
@starting-style { .pop:popover-open { opacity: 0; transform: translateY(-4px); } }
.pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-200); font-weight: 700; font-size: 14px; }
.pop-body { padding: 12px 16px; font-size: 13px; line-height: 20px; color: var(--ink-700); }
.pop-body p { margin-bottom: 8px; }
.pop-list { list-style: none; margin: 0; padding: 4px 0; }
.pop-item { display: block; padding: 10px 16px; color: var(--ink-900); border: 0; background: none; width: 100%; text-align: left; font-size: 14px; }
.pop-item:hover { background: var(--fill-50); text-decoration: none; }
.pop-item small { display: block; color: var(--ink-600); font-size: 12px; line-height: 18px; margin-top: 2px; }
.pop-item .t { display: block; font-weight: 700; font-size: 13px; line-height: 20px; }
.pop-item.unread .t::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 6px; vertical-align: 2px; }
.pop-item[aria-current="true"] { font-weight: 700; color: var(--accent-700); }
.pop-foot { display: flex; justify-content: space-between; gap: 8px; padding: 10px 16px; border-top: 1px solid var(--line-200); font-size: 13px; }
.pop-sep { height: 1px; background: var(--line-200); margin: 4px 0; }
.pop-empty { padding: 20px 16px; color: var(--ink-600); font-size: 13px; text-align: center; }

/* ── トースト ───────────────────────────────────────────── */
.toasts { position: fixed; top: 60px; right: 16px; z-index: 80; display: flex; flex-direction: column; gap: 8px; width: min(400px, calc(100vw - 32px)); pointer-events: none; }
.toast { pointer-events: auto; position: relative; overflow: hidden; background: var(--nav); color: #fff; padding: 12px 40px 12px 16px; border-radius: var(--r-card); box-shadow: var(--shadow-pop); font-size: 14px; line-height: 22px; transition: opacity var(--t3) var(--ease), transform var(--t3) var(--ease); }
@starting-style { .toast { opacity: 0; transform: translateY(-8px); } }
.toast.leaving { opacity: 0; transform: translateY(-8px); }
.toast::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: var(--accent-on-dark); transform-origin: left; animation: toast-life 6s linear forwards; }
.toast:hover::after { animation-play-state: paused; }
.toast-error::after { background: #F0A39B; } .toast-warning::after { background: #E9C46A; }
.toast-close { position: absolute; right: 6px; top: 8px; width: 28px; height: 28px; border: 0; background: none; color: rgba(255,255,255,.75); border-radius: var(--r-ctl); font-size: 18px; line-height: 1; }
.toast-close:hover { color: #fff; background: rgba(255,255,255,.08); }
@keyframes toast-life { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* ── ページ見出し ───────────────────────────────────────── */
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.page-title { font-size: 22px; line-height: 32px; }
.page-meta { font-size: 13px; line-height: 20px; color: var(--ink-600); margin-top: 2px; }
.page-meta a { margin-left: 8px; }
.page-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.page-actions form { display: inline; }
.sec-title { font-size: 15px; line-height: 24px; font-weight: 700; display: flex; align-items: baseline; gap: 12px; margin: 0 0 8px; }
.sec-title .more { margin-left: auto; font-size: 13px; font-weight: 400; }
.sec-title small { font-size: 12px; font-weight: 400; color: var(--ink-600); }

/* ── ボタン ─────────────────────────────────────────────── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: var(--r-ctl); border: 1px solid transparent; font-weight: 700; font-size: 14px; background: var(--card); color: var(--ink-900); white-space: nowrap; transition: background var(--t1) linear, border-color var(--t1) linear, color var(--t1) linear, transform var(--t1) var(--ease); }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.btn-primary:hover { background: var(--accent-700); border-color: var(--accent-700); }
.btn-secondary { border-color: var(--line-300); }
.btn-secondary:hover { background: var(--fill-50); border-color: var(--ink-500); }
.btn-ghost { background: transparent; color: var(--accent-700); font-weight: 400; padding: 0 8px; }
.btn-ghost:hover { background: var(--accent-50); }
.btn-danger { color: var(--danger); border-color: #E5BCB6; }
.btn-danger:hover { background: var(--danger-bg); }
.btn-dark { background: var(--nav); color: #fff; border-color: var(--nav); }
.btn-dark:hover { background: #1A3A41; }
.btn-sm { height: 32px; padding: 0 10px; font-size: 13px; }
.btn-lg { height: 44px; padding: 0 20px; font-size: 15px; }
.btn-block { width: 100%; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.text-link { font-size: 13px; display: inline-flex; align-items: center; gap: 2px; }

/* ── セグメント・タブ・タグ ──────────────────────────────── */
.seg { display: inline-flex; border: 1px solid var(--line-300); border-radius: var(--r-ctl); overflow: hidden; background: var(--card); }
.seg a, .seg button { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 0; background: none; font-size: 13px; color: var(--ink-700); border-right: 1px solid var(--line-200); white-space: nowrap; transition: background var(--t1) linear, color var(--t1) linear; }
.seg a:last-child, .seg button:last-child { border-right: 0; }
.seg a:hover, .seg button:hover { background: var(--fill-50); text-decoration: none; }
.seg .on, .seg [aria-pressed="true"], .seg [aria-current="page"] { background: var(--nav); color: #fff; font-weight: 700; }
.seg .n { font-family: var(--font-num); font-size: 12px; opacity: .85; }
.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line-200); margin-bottom: 16px; overflow-x: auto; scrollbar-width: none; }
.tabs a { position: relative; padding: 10px 16px; font-size: 14px; color: var(--ink-600); white-space: nowrap; }
.tabs a:hover { color: var(--ink-900); text-decoration: none; }
.tabs a[aria-current="page"] { color: var(--ink-900); font-weight: 700; }
.tabs a[aria-current="page"]::after { content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 2px; background: var(--accent); }
.tag { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px; border-radius: var(--r-tag); font-size: 12px; line-height: 18px; background: var(--fill-100); color: var(--ink-700); white-space: nowrap; letter-spacing: .03em; }
.tag-caution { background: var(--caution-bg); color: var(--caution); }
.tag-warning { background: var(--warning-bg); color: var(--warning); }
.tag-danger { background: var(--danger-bg); color: var(--danger); }
.tag-outline { background: transparent; border: 1px solid var(--line-300); }
/* 重要度の文字表示 */
.sev { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; color: var(--ink-600); white-space: nowrap; }
.sev::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.sev.sev-info { font-weight: 400; } .sev.sev-info::before { display: none; }
.sev.sev-caution { color: var(--caution); } .sev.sev-warning { color: var(--warning); } .sev.sev-danger { color: var(--danger); }
.state { color: var(--ink-700); white-space: nowrap; }
.state-done { color: var(--ink-600); }
.check { display: inline-flex; align-items: center; gap: 4px; color: var(--ink-600); white-space: nowrap; }
.check::before { content: "✓"; font-weight: 700; color: var(--accent-700); }
.pending { color: var(--caution); font-weight: 700; white-space: nowrap; }
/* 地図と同じ形の色見本 */
.sym { display: inline-block; width: var(--s, 12px); height: var(--s, 12px); background: var(--c); flex-shrink: 0; vertical-align: -1px; }
.sym-circle { border-radius: 50%; }
.sym-square { border-radius: 2px; }
.sym-diamond { transform: rotate(45deg) scale(.82); border-radius: 1px; }
.sym-hollow { background: transparent; box-shadow: inset 0 0 0 1.5px var(--c); }

/* ── 表・行 ─────────────────────────────────────────────── */
.box { background: var(--card); border: 1px solid var(--line-200); border-radius: var(--r-card); }
.box-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-200); min-height: 48px; }
.box-head h2, .box-head h3 { font-size: 15px; line-height: 24px; }
.box-head .more { margin-left: auto; font-size: 13px; }
.box-body { padding: 16px; }
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th { text-align: left; font-size: 12px; line-height: 18px; color: var(--ink-600); font-weight: 400; letter-spacing: .04em; padding: 10px 12px; border-bottom: 1px solid var(--line-200); white-space: nowrap; background: var(--fill-50); }
.table td { height: 44px; padding: 8px 12px; border-bottom: 1px solid var(--line-200); vertical-align: middle; }
.table tbody tr { transition: background var(--t1) linear; }
.table tbody tr:hover td { background: var(--fill-50); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .num, .table .t { text-align: right; white-space: nowrap; }
.table td.t { font-family: var(--font-num); font-size: 13px; color: var(--ink-600); }
.table td.actions { white-space: nowrap; text-align: right; }
.table .title-cell { font-weight: 700; }
.table .title-cell a { color: var(--ink-900); }
.table .title-cell a:hover { color: var(--accent-700); }
.table .cat { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; color: var(--ink-700); }
tr.row-link { cursor: pointer; }
.list-caption { font-size: 12px; line-height: 18px; color: var(--ink-600); padding: 10px 16px; border-top: 1px solid var(--line-200); }
.filter-bar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; padding: 12px 16px; border-bottom: 1px solid var(--line-200); }
.input, .select { height: 36px; border: 1px solid var(--line-300); background: var(--card); border-radius: var(--r-ctl); padding: 0 10px; font-size: 14px; color: var(--ink-900); }
.select { padding-right: 30px; appearance: none; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234F6168' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center; }
.input:focus, .select:focus { outline: 2px solid var(--accent-100); border-color: var(--accent); }
.filter-bar .input { min-width: 220px; }
.empty { color: var(--ink-600); font-size: 13px; padding: 24px 16px; text-align: center; }
.pagination { display: flex; gap: 6px; align-items: center; justify-content: center; margin-top: 16px; font-size: 13px; }
.pagination a, .pagination span { height: 32px; min-width: 32px; padding: 0 10px; display: inline-flex; align-items: center; justify-content: center; border-radius: var(--r-ctl); border: 1px solid var(--line-200); background: var(--card); }
.pagination .current { background: var(--nav); color: #fff; border-color: var(--nav); }
.kv { display: grid; grid-template-columns: 120px 1fr; gap: 10px 16px; margin: 0; font-size: 14px; }
.kv dt { color: var(--ink-600); font-size: 13px; } .kv dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.code { font-family: var(--mono); background: var(--fill-100); border-radius: var(--r-tag); padding: 1px 6px; font-size: 13px; }
.kbd { font-family: var(--mono); font-size: 11px; line-height: 16px; padding: 1px 5px; border: 1px solid var(--line-300); border-bottom-width: 2px; border-radius: 3px; color: var(--ink-600); background: var(--card); }

/* ── 業務ログ（最近の動き・経緯） ──────────────────────── */
.log { list-style: none; margin: 0; padding: 0; }
.log-item { display: grid; grid-template-columns: 64px 16px minmax(0, 1fr); gap: 0 12px; padding: 10px 16px; border-bottom: 1px solid var(--line-200); color: inherit; position: relative; }
.log > li:last-child > .log-item { border-bottom: 0; }
a.log-item:hover { background: var(--fill-50); text-decoration: none; }
.log-time { font-family: var(--font-num); font-size: 13px; color: var(--ink-600); text-align: right; white-space: nowrap; line-height: 22px; }
.log-mark { display: flex; justify-content: center; padding-top: 5px; }
.log-title { display: block; font-weight: 700; line-height: 22px; overflow-wrap: anywhere; }
.log-meta { display: block; font-size: 13px; line-height: 20px; color: var(--ink-600); overflow-wrap: anywhere; }
.log-item.is-recent .log-time { color: var(--ink-900); font-weight: 700; }
.timeline { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 1px; background: var(--line-300); }
.timeline li { position: relative; display: grid; grid-template-columns: 16px 1fr auto; gap: 8px; align-items: baseline; padding: 4px 0; font-size: 13px; line-height: 20px; }
.timeline li::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink-500); position: relative; top: 1px; left: 0; }
.timeline li.k-occur::before { border-color: var(--ink-900); background: var(--ink-900); }
.timeline li.k-verify::before { border-color: var(--accent); background: var(--accent); }
.timeline li.k-ai::before, .timeline li.k-ai-review::before { border-color: var(--cat-drone); }
.timeline li.k-done::before { border-color: var(--ink-500); background: var(--ink-500); }
.timeline .tl-label { font-weight: 700; color: var(--ink-900); }
.timeline .tl-detail { display: block; font-weight: 400; color: var(--ink-600); }
.timeline .tl-time { font-family: var(--font-num); color: var(--ink-600); white-space: nowrap; }

/* ── フォーム ───────────────────────────────────────────── */
.form { display: flex; flex-direction: column; gap: 16px; }
.form-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.field label { display: block; font-size: 13px; line-height: 20px; font-weight: 700; margin-bottom: 6px; color: var(--ink-700); }
.field .req { color: var(--danger); margin-left: 4px; font-weight: 400; font-size: 12px; }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field input[type=url], .field input[type=tel], .field input[type=search], .field input[type=datetime-local], .field select, .field textarea {
  width: 100%; height: 40px; border: 1px solid var(--line-300); border-radius: var(--r-ctl); padding: 0 12px; font-size: 15px; background: var(--card); color: var(--ink-900); transition: border-color var(--t1) linear, box-shadow var(--t1) linear;
}
.field textarea { height: auto; min-height: 96px; padding: 10px 12px; line-height: 24px; resize: vertical; }
.field select { appearance: none; padding-right: 34px; background: var(--card) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234F6168' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 10px center; }
.field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-100); }
.field .help { font-size: 12px; line-height: 18px; color: var(--ink-600); margin-top: 6px; }
.field .error { font-size: 13px; color: var(--danger); margin-top: 6px; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--danger); }
.field-checkbox label.checkbox, label.checkbox { display: flex; align-items: center; gap: 8px; font-weight: 400; cursor: pointer; margin: 0; }
input[type=checkbox], input[type=radio] { width: 16px; height: 16px; accent-color: var(--accent); margin: 0; }
.field > div > div { margin-bottom: 6px; }
.field > div > div label { display: flex; align-items: flex-start; gap: 10px; font-weight: 400; padding: 10px 12px; border: 1px solid var(--line-200); border-radius: var(--r-ctl); cursor: pointer; margin: 0; transition: border-color var(--t1) linear, background var(--t1) linear; }
.field > div > div label:has(input:checked) { border-color: var(--accent); background: var(--accent-50); }
.field > div > div input { margin-top: 3px; }
.file-input { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.file-input input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.file-input .file-name { font-size: 13px; color: var(--ink-600); }
.form-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding-top: 4px; }
.form-errors { background: var(--danger-bg); color: var(--danger); border-radius: var(--r-ctl); padding: 10px 14px; font-size: 13px; }
.form-errors ul { margin: 0; padding-left: 18px; }
.pickmap { height: 300px; border-radius: var(--r-card); border: 1px solid var(--line-200); overflow: hidden; }
.pickmap-hint { font-size: 12px; color: var(--ink-600); margin-top: 6px; }
.form-narrow { max-width: 760px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.span-2 { grid-column: span 2; }
.stack { display: flex; flex-direction: column; gap: 16px; }
.note { font-size: 13px; line-height: 20px; color: var(--ink-700); background: var(--fill-50); border: 1px solid var(--line-200); border-radius: var(--r-ctl); padding: 10px 12px; }
.note-demo { font-size: 12px; line-height: 18px; color: var(--ink-600); display: flex; align-items: center; gap: 6px; }
.note-demo::before { content: "デモ"; font-weight: 700; font-size: 11px; line-height: 16px; padding: 0 4px; border: 1px solid var(--caution); color: var(--caution); border-radius: var(--r-tag); }
.info-box { background: var(--accent-50); border: 1px solid var(--accent-100); border-radius: var(--r-ctl); padding: 10px 14px; font-size: 13px; color: var(--accent-700); }

/* ── チャット ───────────────────────────────────────────── */
.chat { display: flex; flex-direction: column; min-height: 0; }
.chat-messages { display: flex; flex-direction: column; overflow-y: auto; padding: 8px 16px; flex: 1; scroll-behavior: smooth; }
.chat-page .chat-messages { height: calc(100vh - 272px); min-height: 360px; }
.chat-compact .chat-messages { max-height: 280px; padding: 4px 0; }
.msg { padding: 8px 0; display: grid; gap: 2px; }
.msg + .msg.cont { padding-top: 0; }
.msg-meta { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 12px; line-height: 18px; color: var(--ink-600); }
.msg-meta b { font-size: 14px; line-height: 22px; color: var(--ink-900); }
.msg.mine .msg-meta b { color: var(--accent-700); }
.msg.cont .msg-meta { display: none; }
.msg-body { font-size: 15px; line-height: 1.7; color: var(--ink-900); overflow-wrap: anywhere; white-space: pre-wrap; }
.msg.new { animation: msg-in var(--t3) var(--ease); }
@keyframes msg-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.msg-sys { display: flex; gap: 8px; align-items: baseline; font-size: 13px; color: var(--ink-600); padding: 6px 0; }
.msg-sys::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-500); flex-shrink: 0; position: relative; top: -1px; }
.day-sep { display: flex; align-items: center; gap: 12px; font-size: 12px; color: var(--ink-600); margin: 12px 0 4px; }
.day-sep::before, .day-sep::after { content: ""; flex: 1; height: 1px; background: var(--line-200); }
.composer { display: flex; gap: 8px; align-items: flex-end; padding: 12px 16px; border-top: 1px solid var(--line-200); background: var(--card); }
.composer textarea { flex: 1; min-height: 44px; max-height: 120px; border: 1px solid var(--line-300); border-radius: var(--r-ctl); padding: 10px 12px; font-size: 15px; line-height: 22px; resize: none; field-sizing: content; }
.composer textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-100); }
.composer .btn { height: 44px; }
.chat-compact .composer { padding: 10px 0 0; border-top: 0; }
.chat-empty { text-align: center; font-size: 13px; color: var(--ink-600); padding: 20px 8px; }
.chat-updated { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink-600); }

/* ── 地図ページ ─────────────────────────────────────────── */
.page-map .main { height: 100vh; overflow: hidden; }
.page-map .content { flex: 1; min-height: 0; }
.map-shell { display: flex; height: 100%; min-height: 0; }
.map-stage { position: relative; flex: 1; min-width: 0; min-height: 0; }
#map { position: absolute; inset: 0; background: #EEF1EF; z-index: 1; }
.map-bar { position: absolute; top: 16px; left: 16px; z-index: 6; display: flex; gap: 8px; align-items: center; }
.map-search { position: relative; width: 360px; }
.map-search input { width: 100%; height: 40px; border: 0; border-radius: var(--r-ctl); padding: 0 36px 0 38px; background: var(--card); font-size: 15px; box-shadow: var(--shadow-float); transition: box-shadow var(--t1) linear; }
.map-search input:focus { outline: none; box-shadow: 0 0 0 2px var(--accent), var(--shadow-float); }
.map-search > .icon { position: absolute; left: 12px; top: 11px; color: var(--ink-600); pointer-events: none; }
.map-search .clear { position: absolute; right: 6px; top: 6px; width: 28px; height: 28px; border: 0; background: none; color: var(--ink-600); border-radius: var(--r-ctl); display: inline-flex; align-items: center; justify-content: center; }
.map-search .clear:hover { background: var(--fill-100); }
.map-search .kbd { position: absolute; right: 10px; top: 11px; pointer-events: none; }
.map-search input:not(:placeholder-shown) ~ .kbd, .map-search input:focus ~ .kbd { display: none; }
.map-add { box-shadow: var(--shadow-float); }
.map-add.on { background: var(--nav); border-color: var(--nav); }
.map-controls { position: absolute; top: 16px; right: 16px; z-index: 6; display: flex; flex-direction: column; gap: 8px; }
.ctl-group { display: flex; flex-direction: column; background: var(--card); border-radius: var(--r-ctl); box-shadow: var(--shadow-float); overflow: hidden; }
.ctl { width: 36px; height: 36px; border: 0; background: var(--card); color: var(--ink-700); display: inline-flex; align-items: center; justify-content: center; transition: background var(--t1) linear, color var(--t1) linear; }
.ctl + .ctl { border-top: 1px solid var(--line-200); }
.ctl:hover { background: var(--fill-50); color: var(--ink-900); }
.ctl[aria-expanded="true"], .ctl.on { background: var(--nav); color: #fff; }
.map-pop { width: 260px; }
.basemap-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; padding: 12px; }
.basemap-opt { border: 1px solid var(--line-200); border-radius: var(--r-ctl); padding: 4px; background: var(--card); font-size: 12px; text-align: center; color: var(--ink-700); }
.basemap-opt span { display: block; height: 52px; border-radius: 2px; margin-bottom: 4px; background-size: cover; background-position: center; }
.basemap-opt[aria-pressed="true"] { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent); color: var(--accent-700); font-weight: 700; }
.legend-list { list-style: none; margin: 0; padding: 8px 12px 12px; font-size: 13px; line-height: 20px; }
.legend-list li { display: grid; grid-template-columns: 40px 1fr; gap: 8px; align-items: center; padding: 5px 0; color: var(--ink-700); }
.legend-list li .pin { position: relative; margin: 0 auto; }
.legend-sub { padding: 10px 12px 0; font-size: 12px; color: var(--ink-600); }
.map-readout { position: absolute; left: 16px; bottom: 16px; z-index: 5; display: flex; align-items: flex-end; gap: 8px; pointer-events: none; }
.coords { font-family: var(--mono); font-size: 12px; line-height: 18px; color: var(--ink-700); background: rgba(255,255,255,.88); padding: 2px 6px; border-radius: var(--r-tag); box-shadow: 0 0 0 1px rgba(16,40,46,.08); letter-spacing: 0; }
.map-pickhint { position: absolute; top: 68px; left: 16px; z-index: 6; background: var(--nav); color: #fff; padding: 8px 8px 8px 14px; border-radius: var(--r-ctl); font-size: 14px; display: flex; gap: 12px; align-items: center; box-shadow: var(--shadow-pop); }
.map-pickhint button { background: #fff; color: var(--nav); border: 0; border-radius: var(--r-ctl); height: 28px; padding: 0 10px; font-size: 13px; font-weight: 700; }
.leaflet-container { font-family: var(--font); background: #EEF1EF; }
.leaflet-control-scale-line { border-color: var(--ink-700); color: var(--ink-700); font-family: var(--mono); font-size: 11px; background: rgba(255,255,255,.88); line-height: 16px; }
.leaflet-bottom.leaflet-left .leaflet-control-scale { margin: 0 0 16px 16px; }
.leaflet-control-attribution { font-size: 11px !important; background: rgba(255,255,255,.8) !important; color: var(--ink-600) !important; }
.leaflet-control-attribution a { color: var(--ink-700) !important; }
.leaflet-tooltip.pin-tip { font-family: var(--font); font-size: 13px; line-height: 20px; border: 0; border-radius: var(--r-ctl); box-shadow: var(--shadow-pop); padding: 6px 10px; color: var(--ink-900); }
.leaflet-tooltip.pin-tip small { color: var(--ink-600); font-size: 12px; }
.leaflet-tooltip-top.pin-tip::before { border-top-color: #fff; }
.leaflet-popup-content-wrapper { border-radius: var(--r-card); box-shadow: var(--shadow-pop); }
.leaflet-popup-content { font-family: var(--font); font-size: 14px; margin: 12px 14px; }
.leaflet-popup-content .btn { margin-top: 8px; }
.leaflet-container a.btn-primary { color: #fff; }

/* 地図記号（ピン）: 形＝種類、色＝カテゴリ、輪と大きさ＝重要度 */
.pin-wrap { position: absolute; }
.leaflet-marker-icon.pin-wrap { overflow: visible; }
.pin { --ps: 26px; --ring: 0px; --rc: transparent; position: absolute; left: 50%; top: 50%; width: var(--ps); height: var(--ps); margin: calc(var(--ps) / -2) 0 0 calc(var(--ps) / -2); display: flex; align-items: center; justify-content: center; background: var(--c, var(--cat-other)); color: #fff; border: 2px solid #fff; border-radius: 50%; box-shadow: 0 0 0 var(--ring) var(--rc), 0 1px 3px rgba(16,40,46,.35); transition: transform var(--t2) var(--ease), box-shadow var(--t2) var(--ease); }
.pin .icon { width: calc(var(--ps) * .66); height: calc(var(--ps) * .66); }
.pin.is-square { border-radius: 6px; }
.pin.is-diamond { border-radius: 4px; transform: rotate(45deg) scale(.86); }
.pin.is-diamond .icon { transform: rotate(-45deg); }
.pin.sev-warning { --ps: 30px; --ring: 2.5px; --rc: var(--warning-line); }
.pin.sev-danger { --ps: 34px; --ring: 3.5px; --rc: var(--danger-line); }
.pin.unverified { background: color-mix(in srgb, var(--c) 60%, #fff); border-style: dashed; border-color: var(--c); color: #fff; }
.pin.approx { background: #fff; color: var(--c); border: 2px dashed var(--c); }
.pin.rejected { opacity: .5; }
.pin-wrap:hover .pin { transform: scale(1.1); }
.pin-wrap:hover .pin.is-diamond { transform: rotate(45deg) scale(.95); }
.pin-wrap.selected { z-index: 1000 !important; }
.pin-wrap.selected .pin { transform: scale(1.18); box-shadow: 0 0 0 var(--ring) var(--rc), 0 0 0 calc(var(--ring) + 4px) rgba(25,127,114,.35), 0 4px 10px rgba(16,40,46,.35); }
.pin-wrap.selected .pin.is-diamond { transform: rotate(45deg) scale(1.02); }
.pin-label { position: absolute; left: 50%; top: calc(50% + 18px); transform: translateX(-50%); font-size: 12px; line-height: 16px; font-weight: 700; color: var(--ink-900); white-space: nowrap; pointer-events: none; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff; letter-spacing: .02em; }
.pin.sev-danger ~ .pin-label { top: calc(50% + 22px); }
/* 3 時間以内の新しい情報（波紋）。凡例で意味を示す */
.pin-wrap.recent::before { content: ""; position: absolute; left: 50%; top: 50%; width: 34px; height: 34px; margin: -17px 0 0 -17px; border-radius: 50%; border: 2px solid var(--rc-recent, var(--danger)); opacity: 0; animation: ping 2.4s var(--ease) infinite; pointer-events: none; }
@keyframes ping { 0% { transform: scale(.7); opacity: .7; } 70%, 100% { transform: scale(1.9); opacity: 0; } }
/* 初回読み込み時だけ上から落とす */
.pin-wrap.drop .pin { animation: pin-drop var(--t4) var(--ease) both; animation-delay: var(--d, 0ms); }
@keyframes pin-drop { from { opacity: 0; translate: 0 -10px; } to { opacity: 1; translate: 0 0; } }
.pin-cluster { width: 32px !important; height: 32px !important; margin: -16px 0 0 -16px !important; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 1.5px var(--nav), 0 1px 3px rgba(16,40,46,.3); color: var(--ink-900); display: flex !important; align-items: center; justify-content: center; font-family: var(--font-num); font-weight: 700; font-size: 13px; transition: transform var(--t2) var(--ease); }
.pin-cluster:hover { transform: scale(1.08); }
.pin-cluster.hot { box-shadow: inset 0 0 0 2px var(--danger), 0 1px 3px rgba(16,40,46,.3); }
.pin-cluster.hot::after { content: ""; position: absolute; top: -1px; right: -1px; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); border: 2px solid #fff; }
.here-dot { width: 16px; height: 16px; border-radius: 50%; background: #3F5B86; border: 3px solid #fff; box-shadow: 0 0 0 1px rgba(16,40,46,.2), 0 0 0 8px rgba(63,91,134,.18); }

/* 右パネル */
.panel { width: var(--panel-w); background: var(--card); border-left: 1px solid var(--line-200); display: flex; flex-direction: column; flex-shrink: 0; z-index: 7; min-height: 0; position: relative; }
.sheet-handle, .sheet-peek { display: none; }
.panel-tabs { display: flex; border-bottom: 1px solid var(--line-200); flex-shrink: 0; padding: 0 8px; }
.panel-tabs button { position: relative; border: 0; background: none; padding: 14px 12px 12px; font-size: 14px; color: var(--ink-600); display: inline-flex; align-items: center; gap: 6px; }
.panel-tabs button:hover { color: var(--ink-900); }
.panel-tabs button[aria-selected="true"] { color: var(--ink-900); font-weight: 700; }
.panel-tabs button[aria-selected="true"]::after { content: ""; position: absolute; left: 8px; right: 8px; bottom: -1px; height: 2px; background: var(--accent); }
.panel-tabs .count { font-family: var(--font-num); font-size: 12px; color: var(--ink-600); font-weight: 400; }
.panel-views { position: relative; flex: 1; min-height: 0; display: grid; }
.panel-view { grid-area: 1 / 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; overscroll-behavior: contain; }
.panel-view.enter-from-right { animation: view-in-right var(--t3) var(--ease); }
.panel-view.enter-from-left { animation: view-in-left var(--t3) var(--ease); }
@keyframes view-in-right { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
@keyframes view-in-left { from { opacity: 0; transform: translateX(-24px); } to { opacity: 1; transform: none; } }
.panel-sec { padding: 12px 16px; border-bottom: 1px solid var(--line-200); }
.panel-sec h4 { font-size: 12px; line-height: 18px; color: var(--ink-600); font-weight: 400; letter-spacing: .04em; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.panel-hint { font-size: 13px; line-height: 20px; color: var(--ink-600); padding: 12px 16px; border-bottom: 1px solid var(--line-200); display: flex; gap: 8px; align-items: flex-start; }
.panel-hint .icon { margin-top: 2px; color: var(--ink-500); }
.jma-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 10px 16px; border-bottom: 1px solid var(--line-200); font-size: 13px; }
.jma-row b { font-weight: 700; color: var(--ink-700); margin-right: 2px; }
.jma-advisory { color: var(--caution); background: var(--caution-bg); }
.jma-warning { color: var(--danger); background: var(--danger-bg); }
.jma-special { color: #fff; background: var(--special); }
.wx-line { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-200); font-size: 14px; }
.wx-line .icon { color: var(--cat-weather); }
.wx-line .temp { font-family: var(--font-num); font-size: 20px; font-weight: 700; letter-spacing: 0; }
.wx-line .unit, .temp-unit { font-family: var(--font); font-size: .7em; font-weight: 700; margin-left: 1px; }
.wx-main { display: flex; align-items: baseline; gap: 10px; }
.detail-title:focus, .detail-title:focus-visible { outline: none; }
.icon-btn .count-dot { top: 1px; right: -3px; }
.wx-line .src { margin-left: auto; font-size: 12px; color: var(--ink-600); text-align: right; line-height: 16px; }
.period { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--line-200); font-size: 13px; color: var(--ink-600); }
.period .seg button { height: 28px; padding: 0 10px; font-size: 12px; }
.layer-group { border-bottom: 1px solid var(--line-200); }
.layer-group-head { display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: none; padding: 12px 16px 4px; font-size: 12px; line-height: 18px; color: var(--ink-600); letter-spacing: .04em; text-align: left; }
.layer-group-head .icon { transition: transform var(--t2) var(--ease); }
.layer-group[data-collapsed="true"] .layer-group-head .icon.chev { transform: rotate(-90deg); }
.layer-group-body { display: grid; grid-template-rows: 1fr; transition: grid-template-rows var(--t3) var(--ease); }
.layer-group-body > div { overflow: hidden; }
.layer-group[data-collapsed="true"] .layer-group-body { grid-template-rows: 0fr; }
.layer-group-body > div { padding-bottom: 6px; }
.layer-row { display: grid; grid-template-columns: 18px 22px minmax(0, 1fr) auto; gap: 10px; align-items: center; min-height: 40px; padding: 4px 16px; font-size: 14px; cursor: pointer; transition: background var(--t1) linear; }
.layer-row:hover { background: var(--fill-50); }
.layer-row .name { min-width: 0; line-height: 20px; }
.layer-row .name small { display: block; font-size: 12px; line-height: 16px; color: var(--ink-600); }
.layer-row .n { font-family: var(--font-num); font-size: 13px; color: var(--ink-600); min-width: 22px; text-align: right; transition: color var(--t2) linear; }
.layer-row .n.bump { animation: bump var(--t3) var(--ease); }
@keyframes bump { 0% { transform: scale(1); } 40% { transform: scale(1.25); color: var(--accent-700); } 100% { transform: scale(1); } }
.layer-row .lock { color: var(--ink-500); display: inline-flex; }
.layer-row.off .name, .layer-row.off .sym, .layer-row.off .chip-ico { opacity: .45; }
.layer-row.off .chip-ico { filter: grayscale(1); }
.panel-foot { margin-top: auto; padding: 10px 16px; border-top: 1px solid var(--line-200); font-size: 12px; color: var(--ink-600); display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--fill-50); flex-shrink: 0; }
.refresh { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 2px 4px; margin: -2px -4px; font-size: 12px; color: var(--ink-600); border-radius: var(--r-ctl); }
.refresh:hover { background: var(--fill-100); color: var(--ink-900); }
.refresh .icon { transition: transform var(--t4) var(--ease); }
.refresh.spinning .icon { animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.result-row { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; gap: 10px; padding: 10px 16px; border: 0; border-bottom: 1px solid var(--line-200); width: 100%; background: none; text-align: left; align-items: start; transition: background var(--t1) linear; }
.result-row:hover, .result-row.kb { background: var(--fill-50); }
.result-row .sym { margin-top: 5px; }
.result-row .chip-ico { margin-top: 1px; }
.result-row .t { font-weight: 700; font-size: 14px; line-height: 22px; display: block; }
.result-row .t mark { background: #FFF1B8; color: inherit; padding: 0 1px; border-radius: 2px; }
.result-row .m { font-size: 12px; line-height: 18px; color: var(--ink-600); display: block; }
.result-row .off-note { font-size: 12px; color: var(--caution); white-space: nowrap; }
.panel-back { display: flex; align-items: center; gap: 4px; padding: 6px 8px; border-bottom: 1px solid var(--line-200); flex-shrink: 0; position: sticky; top: 0; background: var(--card); z-index: 2; }
.panel-back .back { border: 0; background: none; font-size: 13px; color: var(--accent-700); display: inline-flex; align-items: center; gap: 2px; padding: 6px 8px; border-radius: var(--r-ctl); }
.panel-back .back:hover { background: var(--accent-50); }
.panel-back .icon-btn { margin-left: auto; width: 32px; height: 32px; }

/* 詳細 */
.detail { padding: 16px 16px 24px; }
.detail-cat { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 18px; color: var(--ink-600); letter-spacing: .04em; }
.detail-title { font-size: 18px; line-height: 28px; margin: 4px 0 6px; }
.status-line { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; line-height: 20px; margin: 0 0 12px; }
.fields { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 0; margin: 0 0 12px; border-top: 1px solid var(--line-200); }
.fields dt, .fields dd { padding: 7px 0; border-bottom: 1px solid var(--line-200); font-size: 13px; line-height: 20px; margin: 0; }
.fields dt { color: var(--ink-600); }
.fields dd { color: var(--ink-900); min-width: 0; overflow-wrap: anywhere; }
.fields .coord { display: inline-flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 12px; color: var(--ink-600); letter-spacing: 0; }
.copy-btn { border: 0; background: none; padding: 2px; color: var(--ink-500); border-radius: 3px; display: inline-flex; }
.copy-btn:hover { color: var(--ink-900); background: var(--fill-100); }
.copy-btn.done { color: var(--accent-700); }
.detail-body { font-size: 15px; line-height: 26px; margin: 0 0 14px; white-space: pre-wrap; letter-spacing: .04em; }
.detail-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 4px; }
.detail-actions form { display: inline; }
.detail-actions .text-link { margin-left: auto; }
.detail-sec { border-top: 1px solid var(--line-200); margin-top: 16px; padding-top: 12px; }
.detail-sec h4 { font-size: 13px; line-height: 20px; font-weight: 700; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.detail-sec h4 .more { margin-left: auto; font-size: 12px; font-weight: 400; }
.detail-photo { margin: 0 0 14px; border-radius: var(--r-ctl); overflow: hidden; border: 1px solid var(--line-200); }
.detail-photo img { display: block; width: 100%; }
.detail .note-demo { margin-top: 16px; }
/* AI の検知（暗い枠＋黄色の枠線） */
.ai-card { display: grid; grid-template-columns: 1fr; gap: 8px; color: inherit; }
a.ai-card:hover { text-decoration: none; }
a.ai-card:hover .frame-dark { box-shadow: 0 0 0 2px var(--accent); }
.frame-dark { position: relative; aspect-ratio: 16 / 9; background: #1B2B30; border-radius: var(--r-ctl); overflow: hidden; transition: box-shadow var(--t2) var(--ease); background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 24px 24px; }
.frame-dark .bbox { position: absolute; border: 2px solid #F2C230; }
.frame-dark .bbox span { position: absolute; left: -2px; bottom: 100%; background: #F2C230; color: #1B2B30; font-size: 12px; line-height: 18px; font-weight: 700; padding: 0 6px; white-space: nowrap; border-radius: 2px 2px 0 0; }
.frame-dark .bbox.draw { animation: bbox-in var(--t4) var(--ease) both; }
@keyframes bbox-in { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: none; } }
.frame-dark .frame-meta { position: absolute; left: 8px; bottom: 6px; right: 8px; display: flex; justify-content: space-between; font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,.7); letter-spacing: 0; }
.ai-facts { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; line-height: 20px; color: var(--ink-700); }
.ai-facts b { font-family: var(--font-num); }
/* スケルトン（読み込み中） */
.skeleton { padding: 16px; display: grid; gap: 10px; }
.sk { height: 12px; border-radius: 3px; background: linear-gradient(90deg, var(--fill-100) 0%, #F6F8F7 40%, var(--fill-100) 80%); background-size: 200% 100%; animation: shimmer 1.2s linear infinite; }
.sk.h { height: 22px; width: 70%; } .sk.w60 { width: 60%; } .sk.w40 { width: 40%; } .sk.block { height: 120px; }
@keyframes shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }

/* ── ダッシュボード ─────────────────────────────────────── */
.status-strip { display: grid; grid-template-columns: repeat(var(--cols, 5), minmax(0, 1fr)); background: var(--card); border: 1px solid var(--line-200); border-radius: var(--r-card); margin-bottom: 24px; }
.cell { display: flex; flex-direction: column; justify-content: space-between; min-height: 92px; padding: 14px 16px; border-right: 1px solid var(--line-200); color: inherit; position: relative; transition: background var(--t1) linear; }
.cell:last-child { border-right: 0; }
a.cell:hover { background: var(--fill-50); text-decoration: none; }
a.cell:hover .cell-label { color: var(--accent-700); }
.cell-label { font-size: 13px; line-height: 20px; color: var(--ink-700); }
.cell-fig { font-family: var(--font-num); font-size: 28px; line-height: 36px; font-weight: 700; letter-spacing: 0; color: var(--ink-900); display: flex; align-items: baseline; gap: 6px; }
.cell-fig small { font-family: var(--font); font-size: 13px; font-weight: 400; color: var(--ink-600); }
.cell.act-caution .cell-fig { color: var(--caution); } .cell.act-warning .cell-fig { color: var(--warning); } .cell.act-danger .cell-fig { color: var(--danger); }
.cell-delta { font-size: 12px; line-height: 18px; color: var(--ink-600); }
.dash { display: grid; grid-template-columns: minmax(0, 8fr) minmax(300px, 4fr); gap: 24px; align-items: start; }
.mini-map { height: 280px; border-radius: var(--r-card); overflow: hidden; border: 1px solid var(--line-200); position: relative; display: block; }
.mini-map .open { position: absolute; right: 8px; bottom: 8px; z-index: 500; }
.side-list { list-style: none; margin: 0; padding: 0; }
.side-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line-200); font-size: 13px; line-height: 20px; }
.side-list li:last-child { border-bottom: 0; }
.side-list .t { font-weight: 700; font-size: 14px; }
.careful { list-style: none; margin: 0; padding: 0; }
.careful li a { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--line-200); color: inherit; align-items: start; }
.careful li a:hover { background: var(--fill-50); text-decoration: none; }
.careful .sym { margin-top: 5px; }
.careful .t { font-size: 15px; line-height: 24px; font-weight: 700; display: block; }
.careful .m { font-size: 13px; line-height: 20px; color: var(--ink-600); display: block; }

/* ── ドローン点検（一覧＋確認ペイン） ─────────────────── */
.review { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 0; background: var(--card); border: 1px solid var(--line-200); border-radius: var(--r-card); align-items: start; }
.review-list { border-right: 1px solid var(--line-200); min-width: 0; }
.det-row { display: grid; grid-template-columns: 88px 18px minmax(0, 1fr) 56px 92px 72px; gap: 10px; align-items: center; min-height: 44px; padding: 6px 16px; border-bottom: 1px solid var(--line-200); color: inherit; font-size: 14px; cursor: pointer; transition: background var(--t1) linear; }
.det-row:hover { background: var(--fill-50); text-decoration: none; }
.det-row[aria-current="true"] { background: var(--accent-50); box-shadow: inset 2px 0 0 var(--accent); }
.det-row .t { font-family: var(--font-num); font-size: 13px; color: var(--ink-600); }
.det-row .name { font-weight: 700; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.det-row .conf { font-family: var(--font-num); text-align: right; font-size: 13px; }
.det-row .geo { font-size: 12px; color: var(--ink-600); white-space: nowrap; }
.det-head { display: grid; grid-template-columns: 88px 18px minmax(0, 1fr) 56px 92px 72px; gap: 10px; padding: 8px 16px; font-size: 12px; color: var(--ink-600); border-bottom: 1px solid var(--line-200); background: var(--fill-50); letter-spacing: .04em; }
.review-pane { padding: 16px; display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.review-pane .fields { margin-bottom: 0; }
.judge { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.judge .btn { height: 40px; }
.judge-hint { font-size: 12px; color: var(--ink-600); display: flex; gap: 10px; flex-wrap: wrap; }

/* ── チャット 3 カラム ──────────────────────────────────── */
.chat-layout { display: grid; grid-template-columns: 280px minmax(0, 1fr) 320px; background: var(--card); border: 1px solid var(--line-200); border-radius: var(--r-card); height: calc(100vh - var(--topbar-h) - 120px); min-height: 520px; overflow: hidden; }
.thread-col { border-right: 1px solid var(--line-200); overflow-y: auto; }
.thread-col h3 { font-size: 12px; font-weight: 400; color: var(--ink-600); letter-spacing: .04em; padding: 14px 16px 6px; }
.thread { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 10px; align-items: start; padding: 10px 16px; color: inherit; border-bottom: 1px solid var(--line-200); }
.thread:hover { background: var(--fill-50); text-decoration: none; }
.thread[aria-current="page"] { background: var(--accent-50); box-shadow: inset 2px 0 0 var(--accent); }
.thread .sym { margin-top: 5px; }
.thread .t { display: block; font-weight: 700; font-size: 14px; line-height: 20px; }
.thread .m { display: block; font-size: 12px; line-height: 18px; color: var(--ink-600); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.thread .n { font-family: var(--font-num); font-size: 12px; color: var(--ink-600); }
.log-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.log-col-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--line-200); }
.log-col-head h2 { font-size: 15px; line-height: 24px; }
.log-col .chat { flex: 1; min-height: 0; }
.log-col .chat-messages { height: auto; min-height: 0; }
.ctx-col { border-left: 1px solid var(--line-200); overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ctx-map { height: 180px; border-radius: var(--r-ctl); overflow: hidden; border: 1px solid var(--line-200); }

/* ── レポート ───────────────────────────────────────────── */
.chart-box { position: relative; height: 240px; }
.chart-box.tall { height: 320px; }
.figure-row { display: flex; gap: 24px; flex-wrap: wrap; }
.figure { display: grid; gap: 2px; }
.figure b { font-family: var(--font-num); font-size: 28px; line-height: 36px; }
.figure span { font-size: 13px; color: var(--ink-600); }

/* ── 設定 ───────────────────────────────────────────────── */
.settings-list { background: var(--card); border: 1px solid var(--line-200); border-radius: var(--r-card); }
.settings-list a { display: grid; grid-template-columns: 20px minmax(0, 1fr) auto; gap: 14px; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--line-200); color: inherit; }
.settings-list a:last-child { border-bottom: 0; }
.settings-list a:hover { background: var(--fill-50); text-decoration: none; }
.settings-list .icon { color: var(--ink-600); }
.settings-list b { display: block; font-size: 14px; }
.settings-list small { display: block; font-size: 13px; color: var(--ink-600); }

/* ── モバイル用タブバー・ドロワー ──────────────────────── */
.tabbar { display: none; }
.drawer-backdrop { position: fixed; inset: 0; background: rgba(16,40,46,.45); z-index: 39; animation: fade-in var(--t2) linear; }
@keyframes fade-in { from { opacity: 0; } }

/* ── ページ遷移（対応ブラウザだけ） ────────────────────── */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--t2); animation-timing-function: var(--ease); }
::view-transition-old(root) { animation-name: vt-out; }
::view-transition-new(root) { animation-name: vt-in; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; transform: translateY(4px); } }
::view-transition-group(sidebar), ::view-transition-group(topbar), ::view-transition-group(tabbar) { animation: none; }

/* 一覧・ログの段階表示（初回だけ） */
.reveal > * { animation: rise var(--t3) var(--ease) both; }
.reveal > *:nth-child(2) { animation-delay: 30ms; } .reveal > *:nth-child(3) { animation-delay: 60ms; } .reveal > *:nth-child(4) { animation-delay: 90ms; }
.reveal > *:nth-child(5) { animation-delay: 120ms; } .reveal > *:nth-child(6) { animation-delay: 150ms; } .reveal > *:nth-child(n+7) { animation-delay: 180ms; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ── レスポンシブ ───────────────────────────────────────── */
@media (max-width: 1280px) {
  .chat-layout { grid-template-columns: 240px minmax(0, 1fr); }
  .ctx-col { display: none; }
  .review { grid-template-columns: minmax(0, 1fr) 360px; }
  .det-row, .det-head { grid-template-columns: 72px 18px minmax(0, 1fr) 48px 72px; }
  .det-row .geo, .det-head .geo { display: none; }
}
@media (max-width: 1100px) {
  .dash { grid-template-columns: 1fr; }
  .status-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .status-strip .cell:nth-child(3n) { border-right: 0; }
  .status-strip .cell:nth-child(n+4) { border-top: 1px solid var(--line-200); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :root { --panel-w: 330px; }
  .map-search { width: 280px; }
}
@media (max-width: 900px) {
  :root { --sidebar-w: 0px; --topbar-h: 52px; }
  body { font-size: 15px; line-height: 24px; }
  .mobile-only { display: inline-flex !important; }
  .desktop-only { display: none !important; }
  .sidebar { width: 280px !important; transform: translateX(-100%); transition: transform var(--t3) var(--ease); }
  .sidebar.open { transform: none; box-shadow: var(--shadow-pop); }
  .is-rail .brand-word, .is-rail .nav-link span, .is-rail .me, .is-rail .link-btn, .is-rail .nav-sep { opacity: 1; pointer-events: auto; }
  .is-rail .nav-link { padding: 0 20px; }
  .rail-toggle { display: none; }
  .main, .is-rail .main { margin-left: 0; }
  .menu-toggle { display: inline-flex; }
  .topbar { padding: 0 8px 0 4px; gap: 4px; }
  .topbar-title { font-size: 16px; overflow: hidden; }
  .topbar-title .area-btn, .topbar-title .area-text { display: none; }
  .user-btn .name { display: none; }
  .demo-tag { margin-right: 2px; }
  .content { padding: 16px 16px calc(var(--tabbar-h) + 24px); }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .span-2 { grid-column: auto; }
  .form-row { grid-template-columns: 1fr; }
  .page-title { font-size: 20px; line-height: 28px; }
  .kv { grid-template-columns: 96px 1fr; }
  .status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .status-strip .cell { border-right: 1px solid var(--line-200); border-top: 0; min-height: 84px; }
  .status-strip .cell:nth-child(2n) { border-right: 0; }
  .status-strip .cell:nth-child(n+3) { border-top: 1px solid var(--line-200); }
  .cell-fig { font-size: 24px; line-height: 32px; }
  .table td { height: 48px; }
  .filter-bar .input { min-width: 0; flex: 1; }
  .field input[type=text], .field input[type=email], .field input[type=password], .field input[type=search], .field select, .field textarea, .input, .select { font-size: 16px; height: 44px; }
  .btn { height: 44px; }
  .btn-sm { height: 36px; }
  .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--tabbar-h) + env(safe-area-inset-bottom)); padding-bottom: env(safe-area-inset-bottom); background: var(--card); border-top: 1px solid var(--line-200); z-index: 35; view-transition-name: tabbar; }
  .tabbar a, .tabbar button { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; line-height: 16px; color: var(--ink-600); border: 0; background: none; padding: 6px 0; position: relative; }
  .tabbar a.active { color: var(--accent-700); font-weight: 700; }
  .tabbar a.active::before { content: ""; position: absolute; top: 0; left: 30%; right: 30%; height: 2px; background: var(--accent); }
  .tabbar a:hover { text-decoration: none; }
  .tabbar .count-dot { top: 3px; right: calc(50% - 26px); min-width: 16px; height: 16px; line-height: 16px; padding: 0 4px; }
  .toasts { top: auto; bottom: calc(var(--tabbar-h) + 12px); right: 12px; left: 12px; width: auto; }
  .pop { width: min(360px, calc(100vw - 16px)); }
  .chat-layout { grid-template-columns: 1fr; height: auto; min-height: 0; border: 0; background: none; }
  .chat-layout.has-thread .thread-col { display: none; }
  .chat-layout:not(.has-thread) .log-col { display: none; }
  .thread-col { border: 1px solid var(--line-200); border-radius: var(--r-card); background: var(--card); }
  .log-col { border: 1px solid var(--line-200); border-radius: var(--r-card); background: var(--card); height: calc(100dvh - var(--topbar-h) - var(--tabbar-h) - 48px); }
  .review { grid-template-columns: 1fr; }
  .review-list { border-right: 0; }
  .review-pane { display: none; }
  .det-row, .det-head { grid-template-columns: 60px 18px minmax(0, 1fr) 44px 64px; padding: 6px 12px; }
  .log-item { grid-template-columns: 52px 14px minmax(0, 1fr); padding: 10px 12px; }

  /* 地図: 全面地図＋ボトムシート */
  .page-map .topbar { display: none; }
  .page-map .main { height: 100dvh; }
  .map-shell { display: block; position: relative; height: 100%; }
  .map-stage { position: absolute; inset: 0 0 var(--tabbar-h) 0; }
  .map-bar { top: 8px; left: 8px; right: 8px; }
  .map-search { flex: 1; width: auto; }
  .map-search input { height: 44px; font-size: 16px; }
  .map-search > .icon { top: 13px; }
  .map-search .clear { top: 8px; }
  .map-search .kbd { display: none; }
  .map-bar .map-add span { display: none; }
  .map-bar .map-add { width: 44px; height: 44px; padding: 0; }
  .map-bar .menu-btn { width: 44px; height: 44px; background: var(--card); box-shadow: var(--shadow-float); }
  .map-controls { top: 64px; right: 8px; }
  .ctl-zoom { display: none; }
  .ctl { width: 44px; height: 44px; }
  .map-readout { display: none; }
  .map-pickhint { top: 64px; left: 8px; right: 64px; }
  .page-map #map .leaflet-bottom.leaflet-right { bottom: var(--sheet-visible, 112px); }
  .panel { position: absolute; left: 0; right: 0; bottom: var(--tabbar-h); width: auto; height: calc(100dvh - var(--tabbar-h) - 64px); border-left: 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: 0 -1px 0 rgba(16,40,46,.08), 0 -8px 24px -8px rgba(16,40,46,.28); transform: translateY(var(--sheet-y, calc(100% - 112px))); transition: transform var(--t3) var(--ease); z-index: 8; will-change: transform; touch-action: none; }
  .panel.dragging { transition: none; }
  .sheet-handle { display: flex; justify-content: center; padding: 8px 0 4px; cursor: grab; flex-shrink: 0; }
  .sheet-handle::before { content: ""; width: 36px; height: 4px; border-radius: 2px; background: var(--line-300); }
  .sheet-peek { display: block; padding: 0 16px 10px; flex-shrink: 0; }
  .peek-summary { font-size: 14px; line-height: 22px; color: var(--ink-900); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 8px; }
  .peek-summary b { font-family: var(--font-num); }
  .peek-chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
  .peek-chips::-webkit-scrollbar { display: none; }
  .peek-chips button { height: 36px; padding: 0 12px; border: 1px solid var(--line-300); border-radius: var(--r-ctl); background: var(--card); font-size: 14px; white-space: nowrap; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-700); }
  .peek-chips button[aria-pressed="true"] { background: var(--nav); border-color: var(--nav); color: #fff; font-weight: 700; }
  .panel[data-mode="detail"] .sheet-peek { display: none; }
  .panel-views { overflow: hidden; }
  .panel-view { padding-bottom: 16px; }
  .layer-row { min-height: 48px; }
  .detail { padding-top: 4px; }
  .detail-title { font-size: 18px; }
  .fields dt, .fields dd { padding: 9px 0; font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; }
  @view-transition { navigation: none; }
}

/* ── 互換（旧クラス名を使う画面向け。順次置き換え） ─────── */
.card { background: var(--card); border: 1px solid var(--line-200); border-radius: var(--r-card); }
.card-head { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--line-200); min-height: 48px; }
.card-title { font-size: 15px; line-height: 24px; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.card-title .icon { color: var(--ink-600); }
.card-body { padding: 16px; }
.card-link { margin-left: auto; font-size: 13px; white-space: nowrap; }
.page-sub { font-size: 13px; line-height: 20px; color: var(--ink-600); margin-top: 2px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.badge { display: inline-flex; align-items: center; gap: 4px; height: 22px; padding: 0 6px; border-radius: var(--r-tag); font-size: 12px; line-height: 18px; background: var(--fill-100); color: var(--ink-700); white-space: nowrap; }
.badge-ok, .badge-info, .badge-accent { background: var(--fill-100); color: var(--ink-700); }
.badge-caution, .badge-sample, .badge-demo { background: var(--caution-bg); color: var(--caution); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-warn, .badge-danger { background: var(--danger-bg); color: var(--danger); }
.layer-badge, .role-badge { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--ink-700); white-space: nowrap; }
.role-badge::before { display: none; }
.empty-block { color: var(--ink-600); font-size: 13px; padding: 28px 16px; text-align: center; background: var(--card); border: 1px dashed var(--line-300); border-radius: var(--r-card); }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px; border: 1px solid var(--line-300); border-radius: var(--r-ctl); background: var(--card); font-size: 13px; color: var(--ink-700); white-space: nowrap; }
.chip:hover { background: var(--fill-50); text-decoration: none; }
.chip.active { background: var(--nav); border-color: var(--nav); color: #fff; font-weight: 700; }
.chip-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.rows { display: flex; flex-direction: column; }
.row-item { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; gap: 12px; align-items: start; padding: 12px 16px; border-bottom: 1px solid var(--line-200); color: inherit; }
.row-item:last-child { border-bottom: 0; }
a.row-item:hover { background: var(--fill-50); text-decoration: none; }
.row-item.plain { grid-template-columns: minmax(0, 1fr) auto; }
.row-item .sym { margin-top: 5px; }
.row-title { font-weight: 700; font-size: 14px; line-height: 22px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.row-meta { font-size: 13px; line-height: 20px; color: var(--ink-600); }
.row-time { font-family: var(--font-num); font-size: 13px; color: var(--ink-600); white-space: nowrap; text-align: right; }
.cat-icon { display: none; }
.pill-list { display: flex; flex-wrap: wrap; gap: 6px; }
.settings-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.settings-grid a.card { display: flex; gap: 12px; padding: 14px 16px; color: inherit; align-items: flex-start; }
.settings-grid a.card:hover { text-decoration: none; border-color: var(--accent); }
.settings-icon { color: var(--ink-600); }
.timeline-simple { list-style: none; margin: 0; padding: 0; }

/* ── 評価を受けた調整 ──────────────────────────────────── */
input[type=search]::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }
.panel { touch-action: auto; }
.toasts { top: auto; bottom: 24px; right: auto; left: 50%; transform: translateX(-50%); align-items: center; }
.toast::after { animation-duration: 4s; }
.kbd, .count-dot, .frame-dark .frame-meta, .note-demo::before { font-size: 12px; }
.leaflet-control-attribution { font-size: 12px !important; }
.leaflet-control-scale-line { font-size: 12px; }
.pin-cluster.worst-warning { box-shadow: inset 0 0 0 2px var(--warning), 0 1px 3px rgba(16,40,46,.3); }
.pin-cluster.worst-danger { box-shadow: inset 0 0 0 2.5px var(--danger), 0 1px 3px rgba(16,40,46,.3); }
.pin-cluster.worst-danger::after { content: ""; position: absolute; top: -1px; right: -1px; width: 9px; height: 9px; border-radius: 50%; background: var(--danger); border: 2px solid #fff; }
.load-error { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 10px 16px; background: var(--danger-bg); color: var(--danger); font-size: 13px; border-bottom: 1px solid #F0CFCA; }
.load-error .btn { margin-left: auto; }
.detail-when { font-size: 13px; line-height: 20px; color: var(--ink-700); margin: 0 0 12px; }
.detail-when .num { color: var(--ink-900); font-weight: 700; }
details.more-fields { margin: 0 0 12px; }
details.more-fields > summary { cursor: pointer; font-size: 13px; color: var(--accent-700); list-style: none; display: inline-flex; align-items: center; gap: 4px; padding: 4px 0; }
details.more-fields > summary::-webkit-details-marker { display: none; }
details.more-fields > summary .icon { transition: transform var(--t2) var(--ease); }
details.more-fields[open] > summary .icon { transform: rotate(180deg); }
details.more-fields .fields { margin-top: 6px; }
.chat-mini .msg-body { font-size: 14px; line-height: 1.65; }
.panel-crumb { display: flex; align-items: center; gap: 4px; font-size: 13px; }
@media (max-width: 900px) {
  .page-map .panel { touch-action: auto; }
  .sheet-handle { padding: 10px 0 8px; touch-action: none; }
  .sheet-peek { touch-action: none; }
  .peek-chips { touch-action: pan-x; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); padding-right: 32px; }
  .peek-chips button { height: 40px; }
  .panel-tabs { touch-action: none; }
  .panel-tabs button { min-height: 44px; }
  .panel[data-sheet="half"] .peek-chips, .panel[data-sheet="full"] .peek-chips { display: none; }
  .panel[data-sheet="half"] .peek-summary, .panel[data-sheet="full"] .peek-summary { margin-bottom: 0; }
  .panel-back .back, .panel-back .icon-btn { min-height: 44px; min-width: 44px; }
  .toasts { bottom: calc(var(--tabbar-h) + 16px); width: calc(100vw - 24px); }
  .toast-close { width: 40px; height: 40px; top: 2px; }
  .topbar .menu-toggle, .topbar .icon-btn[popovertarget="notif-pop"] { display: none; }
  .topbar { padding-left: 16px; }
  .table-cards thead { display: none; }
  .table-cards, .table-cards tbody, .table-cards tr, .table-cards td { display: block; width: 100%; }
  .table-cards tr { position: relative; padding: 12px 16px; border-bottom: 1px solid var(--line-200); }
  .table-cards td { height: auto; padding: 0; border: 0; text-align: left !important; }
  .table-cards td[data-label]::before { content: attr(data-label) "　"; color: var(--ink-600); font-size: 12px; }
  .table-cards td.title-cell { font-size: 15px; margin-bottom: 2px; }
  .table-cards td.t { position: absolute; right: 16px; top: 12px; left: auto; width: auto; text-align: right !important; font-size: 12px; color: var(--ink-600); }
  .table-cards td.title-cell { padding-right: 76px; }
  .table-cards td.hide-sm, .table-cards td.empty-sm { display: none; }
  .table-cards td.actions { margin-top: 6px; text-align: left; }
  .table-cards tbody tr:hover td { background: none; }
  .composer { position: sticky; bottom: 0; }
}

/* ── 詳細ページ（一覧へ戻る・位置の小地図） ───────────── */
.back-link { display: inline-flex; align-items: center; gap: 4px; margin: -4px 0 12px -4px; padding: 4px 8px 4px 4px; font-size: 13px; line-height: 20px; color: var(--ink-600); border-radius: var(--r-btn); }
.back-link:hover { color: var(--ink-900); background: var(--fill-100); text-decoration: none; }
.back-link .icon { transition: transform var(--t2) var(--ease); }
.back-link:hover .icon { transform: translateX(-2px); }
.record-map { border: 1px solid var(--line-200); border-radius: var(--r-card); overflow: hidden; background: var(--card); }
.record-map .mini-map { height: 220px; border: 0; border-radius: 0; }
.record-map-open { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-top: 1px solid var(--line-200); font-size: 13px; font-weight: 700; color: var(--accent-700); }
.record-map-open .icon:last-child { margin-left: auto; transition: transform var(--t2) var(--ease); }
.record-map-open:hover { background: var(--fill-50); text-decoration: none; }
.record-map-open:hover .icon:last-child { transform: translateX(2px); }
.m-only { display: none !important; }
@media (max-width: 900px) {
  .m-only { display: inline-flex !important; }
  .record-map .mini-map { height: 180px; }
}

/* 通知ボタン: 件数はベルに重ねず横に並べる（ベルが隠れないように） */
.topbar .icon-btn[popovertarget="notif-pop"] { width: auto; min-width: 36px; padding: 0 8px; gap: 6px; }
.topbar .icon-btn[popovertarget="notif-pop"] .count-dot { position: static; border: 0; box-sizing: border-box; min-width: 20px; height: 20px; line-height: 20px; padding: 0 6px; font-size: 12px; }
/* アカウントの入口: PC は名前、スマホは頭文字の丸 */
.user-btn .avatar { display: none; }
@media (max-width: 900px) {
  .user-btn .avatar { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background: var(--nav); color: #fff; font-size: 13px; font-weight: 700; }
}

/* ============================================================
   色の出し方（2 回目の改修）: 種類は色相、重要度は暖色の帯と輪、操作はブランドの青緑。
   ============================================================ */
/* 種類の見本（地図の記号と同じ形・色） */
.chip-ico { --sz: 20px; width: var(--sz); height: var(--sz); flex: 0 0 var(--sz); display: inline-flex; align-items: center; justify-content: center; background: var(--c); color: #fff; border-radius: 50%; vertical-align: middle; box-shadow: 0 0 0 1px rgba(16,40,46,.06); }
.chip-ico .icon { color: #fff; }
.chip-square { border-radius: 5px; }
.chip-diamond { border-radius: 3px; transform: rotate(45deg) scale(.84); }
.chip-diamond .icon { transform: rotate(-45deg) scale(1.12); }
.detail-cat .chip-ico { margin-right: 2px; }
.table .cat { gap: 10px; font-weight: 700; color: var(--ink-900); }

/* 重要度: 注意・警戒は淡い帯、危険は塗りつぶし。情報は色を付けない */
.sev { gap: 6px; font-size: 12px; line-height: 20px; padding: 0 9px 0 8px; border-radius: 999px; background: var(--fill-100); color: var(--ink-700); }
.sev::before { width: 6px; height: 6px; }
.sev.sev-info { background: none; padding: 0; font-size: inherit; color: var(--ink-600); }
.sev.sev-caution { background: var(--caution-bg); color: var(--caution); }
.sev.sev-warning { background: var(--warning-bg); color: var(--warning); }
.sev.sev-danger { background: var(--danger); color: #fff; }

/* 状況の数字: 上端の色で状態を示し、見出しに種類の絵記号 */
.status-strip { overflow: hidden; }
.cell { border-top: 3px solid var(--line-200); }
.cell.act-caution { border-top-color: var(--caution-line); }
.cell.act-warning { border-top-color: var(--warning-line); }
.cell.act-danger { border-top-color: var(--danger-line); }
.cell-label { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--ink-900); }
.cell-label .icon { color: var(--c, var(--ink-600)); flex-shrink: 0; }
.cell.act-caution .cell-fig { color: var(--caution); } .cell.act-warning .cell-fig { color: var(--warning); } .cell.act-danger .cell-fig { color: var(--danger); }

/* 近い記号のまとまり: 濃紺の丸に白い数字。最も重い重要度の色の輪 */
.pin-cluster { background: var(--nav); color: #fff; box-shadow: 0 0 0 2px #fff, 0 1px 4px rgba(16,40,46,.45); }
.pin-cluster.worst-warning { box-shadow: 0 0 0 2px #fff, 0 0 0 4.5px var(--warning-line), 0 1px 4px rgba(16,40,46,.45); }
.pin-cluster.worst-danger { box-shadow: 0 0 0 2px #fff, 0 0 0 5px var(--danger-line), 0 1px 4px rgba(16,40,46,.45); }
.pin-cluster.worst-danger::after, .pin-cluster.hot::after { display: none; }

/* 左ナビ: 選択中ははっきり青緑 */
.nav-link.active { background: rgba(127,209,194,.14); }
.nav-link.active::before { width: 3px; top: 6px; bottom: 6px; border-radius: 0 2px 2px 0; }

/* 黄色は「注意」の重要度だけに使う。それ以外（デモ表示・未確認・必須）は中立色 */
.demo-tag { border-color: var(--line-300); background: var(--card); color: var(--ink-700); }
.demo-tag::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--ink-500); }
.demo-tag:hover { background: var(--fill-100); }
.note-demo::before { border-color: var(--line-300); color: var(--ink-600); }
.field .req { color: var(--ink-600); }
/* 未確認: 地図の破線の記号と同じく、破線の枠で示す */
.pending { display: inline-flex; align-items: center; height: 20px; padding: 0 7px; border: 1px dashed var(--ink-500); border-radius: 999px; color: var(--ink-700); font-size: 12px; font-weight: 700; line-height: 18px; }
/* 状況の数字は濃い文字。危険だけ赤。色は上端の線と絵記号で示す */
.cell.act-caution .cell-fig, .cell.act-warning .cell-fig { color: var(--ink-900); }
.cell.act-danger .cell-fig { color: var(--danger); }
/* 位置を選ぶ地図の記号（地域マップと同じ形。中央の白い点が位置） */
.pick-pin { cursor: grab; }
.pick-pin .pick-dot { width: 8px; height: 8px; border-radius: 50%; background: #fff; }
/* 地図の詳細: 戻る行で一覧へ戻る（タブは隠す） */
.panel[data-mode="detail"] .panel-tabs { display: none; }
/* ドローン確認: 右の詳細は画面に留める */
@media (min-width: 901px) { .review-pane { position: sticky; top: calc(var(--topbar-h) + 16px); } }
/* チャット: 右の欄がない会話 */
@media (min-width: 1281px) { .chat-layout.no-ctx { grid-template-columns: 280px minmax(0, 1fr); } }
.log-col-head .caption { margin-left: 12px; }
/* 状況の数字: スマホの 2 列で最後の 1 つが余るときは横いっぱい */
@media (max-width: 900px) { .status-strip .cell:last-child:nth-child(odd) { grid-column: 1 / -1; } }
.back-link { border-radius: var(--r-ctl); }
/* フォーム: 写真・ファイルの選択ボタン、入力欄の幅、スマホの下部タブ */
.field label.btn { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-size: 13px; color: var(--ink-900); }
.field input[type=text], .field input[type=email], .field input[type=password], .field input[type=number], .field input[type=url], .field input[type=datetime-local], .field input[type=date], .field select { max-width: 480px; }
@media (max-width: 900px) {
  .page-form .tabbar { display: none; }
  .page-form .content { padding-bottom: 0; }
}
/* タッチ操作の端末では、キーボード操作の案内を出さない */
@media (hover: none) { .judge-hint, .caption:has(> .kbd), .map-search .kbd { display: none !important; } }
/* 上部バーの題名は、ページ側に見出しがある PC 画面では出さない（エリアの切替は残す） */
@media (min-width: 901px) { body:has(.page-head) .topbar-title .tt { display: none; } }
.topbar-title .tt { overflow: hidden; text-overflow: ellipsis; }
/* 一覧の絞り込み（スマホは開閉式） */
.filter-toggle { display: none; }
.filter-toggle .n { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: 9px; background: var(--nav); color: #fff; font-family: var(--font-num); font-size: 11px; }
@media (max-width: 900px) {
  .filter-toggle { display: inline-flex; }
  .filter-bar:not(.open) select, .filter-bar > button.btn:not(.filter-toggle) { display: none; }
  .filter-bar.open select { flex: 1 1 calc(50% - 4px); }
  /* カード表示の一覧: 地図ボタンだけの操作欄は出さない（行を押すと詳細へ） */
  .table-cards td.actions:has(> a:only-child) { display: none; }
  .d-only { display: none !important; }
}
.m-only-block { display: none; }
@media (max-width: 900px) { .m-only-block { display: block; } }

/* 検知位置の図: 映像は未接続なので、明るい枠に検知範囲だけを示す（SF 調の暗い画面にしない） */
.frame-dark { background: var(--fill-100); background-image: none; border: 1px solid var(--line-200); }
.frame-dark .bbox { min-width: 24px; min-height: 24px; border: 2px solid var(--cat-drone); background: rgba(106,69,194,.08); border-radius: 2px; }
.frame-dark .bbox span { background: var(--cat-drone); color: #fff; }
.frame-dark .bbox.draw { animation: none; }
.frame-dark .frame-meta { font-family: var(--font-num); color: var(--ink-600); }
/* 左下: 名前は上部バーにあるので、ここは「どの立場で見ているか」 */
.me .me-label { display: block; font-size: 11px; line-height: 16px; color: var(--nav-muted); letter-spacing: .04em; }
.wx-src { font-size: 12px; color: var(--ink-500); }
@media (max-width: 900px) { .tabs { -webkit-mask-image: linear-gradient(90deg, #000 88%, transparent); mask-image: linear-gradient(90deg, #000 88%, transparent); } }
/* アプリ左上のロゴの下の制作クレジット */
.brand-word { display: inline-flex; flex-direction: column; line-height: 1.1; }
.brand-word .credit { font-size: 10px; font-weight: 500; letter-spacing: .08em; color: var(--nav-muted); margin-top: 3px; }


/* ── 検知画像（サンプル写真）を敷いた枠 ── */
figure.frame-dark { margin: 0; }
.frame-dark.has-img { background: #26343A; border-color: transparent; }
.frame-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.frame-dark.has-img .bbox { border: 2px solid #fff; background: none; box-shadow: 0 0 0 1px rgba(10,16,20,.5), inset 0 0 0 1px rgba(10,16,20,.3); }
.frame-dark.has-img .bbox span { background: var(--cat-drone); color: #fff; }
.frame-dark .bbox.label-in span { bottom: auto; top: 0; left: 0; border-radius: 0 0 2px 0; }
.frame-dark.has-img .frame-meta { left: 0; right: 0; bottom: 0; padding: 20px 10px 6px; background: linear-gradient(to top, rgba(10,16,20,.62), rgba(10,16,20,0)); color: rgba(255,255,255,.92); }
.frame-credit { display: block; margin: 6px 0 0; font-size: 12px; line-height: 18px; color: var(--ink-600); }
.frame-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.ai-card .frame-credit { margin: -2px 0 0; }
.detail-frame { margin-bottom: 12px; }