/* AI-CADS デザインシステム(UX仕様書 第5章) — ダーク既定 / ライト / ハイコントラスト */
:root {
  --bg: #0E1621; --surface: #16202B; --surface2: #1C2733; --text: #E8EDF2; --text2: #9AA8B5; --border: #2E3B49;
  --primary: #123F63; --accent: #58A0D8; --focus: #58A0D8;
  --critical: #E05A52; --high: #E8933F; --medium: #E3BC4E; --low: #8FB4CE; --info: #6A9FD6;
  --st-detect: #E05A52; --st-defend: #E8933F; --st-recover: #6A9FD6; --st-ok: #4FB57F; --st-gray: #6b7785; --st-purple: #b08cdb;
  --c1:#4E79A7;--c2:#F28E2B;--c3:#E15759;--c4:#76B7B2;--c5:#59A14F;--c6:#EDC948;--c7:#B07AA1;--c8:#FF9DA7;
  --font: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, system-ui, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --row-h: 36px; --radius: 6px; --shadow: 0 8px 24px rgba(0,0,0,.35);
}
[data-theme="light"] {
  --bg:#F5F7FA;--surface:#FFFFFF;--surface2:#EEF2F6;--text:#1C2733;--text2:#5A6B7D;--border:#D9E2EA;--primary:#0E3A5C;--accent:#2E78A4;--focus:#2E78A4;
  --critical:#C1443F;--high:#D97A26;--medium:#D9A72E;--low:#7FA5C0;--info:#4A7FB5;--st-detect:#C1443F;--st-defend:#D97A26;--st-recover:#4A7FB5;--st-ok:#3E9B67;
  --shadow: 0 8px 24px rgba(0,0,0,.12);
}
[data-theme="high-contrast"] { --bg:#000;--surface:#0a0a0a;--surface2:#151515;--text:#fff;--text2:#e0e0e0;--border:#8a8a8a;--accent:#7cc4ff;--focus:#ffd400; }
[data-density="dense"] { --row-h: 28px; }
* { box-sizing: border-box; } [hidden] { display: none !important; }
html, body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); font-size: 13px; line-height: 1.5; }
a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; }
h1 { font-size: 20px; font-weight: 700; margin: 0 0 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
h2 { font-size: 16px; font-weight: 700; margin: 0 0 8px; } h3 { font-size: 14px; font-weight: 700; margin: 0 0 6px; }
.t5 { font-size: 12px; color: var(--text2); } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 12px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.skip { position: absolute; left: -999px; } .skip:focus { left: 8px; top: 8px; background: var(--surface); padding: 8px; z-index: 999; }
/* レイアウト: ヘッダー48px + サイドナビ240px + コンテンツ */
.app { display: grid; grid-template-rows: 48px 1fr; grid-template-columns: 240px 1fr; min-height: 100vh; }
.app.collapsed { grid-template-columns: 56px 1fr; } .app.wall { grid-template-columns: 0 1fr; } .app.wall header, .app.wall nav.side { display: none; }
header.top { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 50; }
.brand { font-weight: 700; letter-spacing: .04em; color: var(--text); white-space: nowrap; }
.ws { display: flex; gap: 4px; } .ws a { padding: 6px 10px; border-radius: var(--radius); color: var(--text2); } .ws a.active, .ws a:hover { background: var(--surface2); color: var(--text); text-decoration: none; }
.gsearch { flex: 1; max-width: 480px; display: flex; } .gsearch input { width: 100%; }
.clock { font-family: var(--mono); color: var(--text2); font-size: 12px; }
nav.side { background: var(--surface); border-right: 1px solid var(--border); padding: 12px 8px; overflow-y: auto; }
nav.side .grp { font-size: 11px; color: var(--text2); padding: 10px 8px 4px; text-transform: uppercase; letter-spacing: .06em; }
nav.side a { display: block; padding: 7px 10px; border-radius: var(--radius); color: var(--text); } nav.side a.active { background: var(--primary); color: #fff; } nav.side a:hover { background: var(--surface2); text-decoration: none; }
main { padding: 16px; min-width: 0; }
.banner { padding: 8px 12px; border-radius: var(--radius); margin-bottom: 12px; display: flex; gap: 12px; align-items: center; border: 1px solid; }
.banner.warn { background: color-mix(in srgb, var(--high) 15%, var(--surface)); border-color: var(--high); } .banner.crit { background: color-mix(in srgb, var(--critical) 18%, var(--surface)); border-color: var(--critical); } .banner.info { background: color-mix(in srgb, var(--info) 15%, var(--surface)); border-color: var(--info); }
/* カード・グリッド */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; margin-bottom: 16px; }
.card.pad0 { padding: 0; } .card h2 { display: flex; justify-content: space-between; align-items: center; }
.grid { display: grid; gap: 16px; } .g2 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } .g31 { grid-template-columns: 2fr 1fr; } .g13 { grid-template-columns: 1fr 2fr; }
@media (max-width: 1280px) { .g4 { grid-template-columns: 1fr 1fr; } .g3 { grid-template-columns: 1fr 1fr; } .app { grid-template-columns: 56px 1fr; } nav.side a span.l, nav.side .grp, nav.side .hint { display: none; } }
.app.collapsed nav.side a span.l, .app.collapsed nav.side .grp, .app.collapsed nav.side .hint { display: none; }
/* KPI タイル */
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; display: block; color: var(--text); position: relative; }
.kpi:hover { text-decoration: none; border-color: var(--accent); } .kpi .v { font-size: 26px; font-weight: 700; font-family: var(--mono); line-height: 1.1; } .kpi .k { color: var(--text2); font-size: 12px; } .kpi .s { font-size: 12px; margin-top: 4px; }
.kpi.crit { border-left: 4px solid var(--critical); } .kpi.high { border-left: 4px solid var(--high); } .kpi.ok { border-left: 4px solid var(--st-ok); } .kpi.info { border-left: 4px solid var(--info); }
/* バッジ */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; border: 1px solid transparent; white-space: nowrap; }
.badge.critical { background: var(--critical); color: #fff; } .badge.high { background: var(--high); color: #111; } .badge.medium { background: var(--medium); color: #111; } .badge.low { background: var(--low); color: #111; } .badge.info { background: var(--info); color: #fff; }
.badge.st-new { background: var(--info); color: #fff; } .badge.st-triaging { background: transparent; border-color: var(--info); color: var(--info); } .badge.st-in_progress { background: var(--high); color: #111; } .badge.st-defending { background: transparent; border: 2px solid var(--high); color: var(--high); }
.badge.st-monitoring { background: var(--medium); color: #111; } .badge.st-closed { background: var(--st-ok); color: #fff; } .badge.st-false_positive, .badge.st-rejected, .badge.st-gray { background: var(--st-gray); color: #fff; } .badge.st-failed { background: var(--critical); color: #fff; }
.badge.est { background: transparent; border: 1px dashed var(--st-purple); color: var(--st-purple); } .badge.method { background: var(--surface2); color: var(--text2); border-color: var(--border); } .badge.ai { background: transparent; border-color: var(--st-purple); color: var(--st-purple); }
.badge.shadow { background: transparent; border-color: var(--medium); color: var(--medium); }
/* リスクゲージ */
.gauge { display: inline-flex; align-items: center; gap: 6px; } .gauge .bar { width: 60px; height: 6px; background: var(--surface2); border-radius: 3px; overflow: hidden; } .gauge .bar i { display: block; height: 100%; }
.gauge.big .bar { width: 100%; height: 10px; } .gauge .n { font-family: var(--mono); font-weight: 700; min-width: 24px; text-align: right; }
.fill-critical { background: var(--critical); } .fill-high { background: var(--high); } .fill-medium { background: var(--medium); } .fill-low { background: var(--low); } .fill-info { background: var(--info); }
/* テーブル */
table.data { width: 100%; border-collapse: collapse; font-size: 13px; } table.data th, table.data td { padding: 0 12px; height: var(--row-h); border-bottom: 1px solid var(--border); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 360px; }
table.data th { color: var(--text2); font-weight: 600; font-size: 12px; position: sticky; top: 0; background: var(--surface); z-index: 1; } table.data th a { color: inherit; }
table.data tbody tr:hover { background: var(--surface2); } table.data tbody tr:focus-within, table.data tbody tr.sel { background: color-mix(in srgb, var(--accent) 18%, var(--surface)); outline: 1px solid var(--accent); outline-offset: -1px; }
table.data tr.dim td { opacity: .55; } table.data td.r, table.data th.r { text-align: right; } .tbl { overflow: auto; max-height: calc(100vh - 220px); }
/* SLA バー */
.sla { display: inline-flex; align-items: center; gap: 6px; } .sla .bar { width: 48px; height: 5px; background: var(--surface2); border-radius: 3px; overflow: hidden; } .sla .bar i { display: block; height: 100%; background: var(--st-ok); } .sla.warn .bar i { background: var(--high); } .sla.over .bar i { background: var(--critical); } .sla.over .t { color: var(--critical); font-weight: 700; }
/* フォーム・ボタン */
input, select, textarea, button { font: inherit; color: var(--text); } input[type=text], input[type=search], input[type=password], input[type=number], input[type=datetime-local], select, textarea { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 6px 8px; min-height: 32px; } textarea { min-height: 72px; width: 100%; }
label { color: var(--text2); font-size: 12px; } .field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 8px; } .row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .row.between { justify-content: space-between; }
.btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; min-height: 32px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface2); cursor: pointer; white-space: nowrap; } .btn:hover { border-color: var(--accent); }
.btn.primary { background: var(--accent); color: #0b1620; border-color: var(--accent); font-weight: 700; } .btn.danger { background: var(--critical); border-color: var(--critical); color: #fff; font-weight: 700; } .btn.warn { background: var(--high); border-color: var(--high); color: #111; } .btn.ok { background: var(--st-ok); border-color: var(--st-ok); color: #fff; } .btn.ghost { background: transparent; }
.btn.sm { padding: 2px 8px; min-height: 24px; font-size: 12px; } .btn:disabled { opacity: .5; cursor: not-allowed; } .btn.kill { background: #8b1a14; border-color: var(--critical); color: #fff; font-weight: 700; }
/* フィルタバー */
.filterbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 12px; } .filterbar select, .filterbar input { min-width: 100px; }
.chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { display: inline-flex; gap: 4px; align-items: center; padding: 2px 8px; border-radius: 999px; background: var(--surface2); border: 1px solid var(--border); font-size: 12px; } .chip a { color: var(--text2); }
/* タイムライン */
.timeline { list-style: none; padding: 0; margin: 0; border-left: 2px solid var(--border); } .timeline li { position: relative; padding: 4px 0 10px 16px; } .timeline li::before { content: ""; position: absolute; left: -7px; top: 8px; width: 10px; height: 10px; border-radius: 50%; background: var(--st-gray); }
.timeline li.detect::before, .timeline li.critical::before { background: var(--st-detect); } .timeline li.high::before { background: var(--high); } .timeline li.medium::before { background: var(--medium); } .timeline li.defend::before { background: var(--st-defend); } .timeline li.recover::before { background: var(--st-recover); } .timeline li.record::before, .timeline li.note::before { background: var(--st-gray); }
.timeline li.predicted { opacity: .7; } .timeline li.predicted::before { background: transparent; border: 2px dashed var(--st-purple); width: 8px; height: 8px; } .timeline .ts { font-family: var(--mono); font-size: 11px; color: var(--text2); } .timeline .tac { display: inline-block; font-size: 11px; padding: 0 6px; border-radius: 4px; background: var(--surface2); margin-right: 6px; }
/* 3ペイン(UX-04) */
.panes { display: grid; grid-template-columns: 1fr 1.3fr 1fr; gap: 16px; } @media (max-width: 1365px) { .panes { grid-template-columns: 1fr; } }
/* モーダル / ドロワー / トースト / パレット */
dialog { background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 8px; padding: 20px; max-width: 560px; width: 92vw; box-shadow: var(--shadow); } dialog::backdrop { background: rgba(0,0,0,.55); } dialog h3 { margin-top: 0; }
.drawer { position: fixed; top: 48px; right: 0; bottom: 0; width: 420px; background: var(--surface); border-left: 1px solid var(--border); box-shadow: var(--shadow); transform: translateX(100%); transition: transform .2s; z-index: 60; overflow: auto; padding: 16px; } .drawer.open { transform: none; }
.toasts { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 100; } .toast { background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--info); padding: 10px 14px; border-radius: var(--radius); box-shadow: var(--shadow); max-width: 420px; } .toast.ok { border-left-color: var(--st-ok); } .toast.err { border-left-color: var(--critical); } .toast.warn { border-left-color: var(--high); }
.palette { position: fixed; inset: 0; background: rgba(0,0,0,.5); display: none; z-index: 120; align-items: flex-start; justify-content: center; padding-top: 12vh; } .palette.open { display: flex; } .palette .box { width: 560px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--shadow); } .palette input { width: 100%; border: 0; border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; padding: 12px; font-size: 15px; } .palette ul { list-style: none; margin: 0; padding: 6px 0; max-height: 50vh; overflow: auto; } .palette li { padding: 8px 12px; cursor: pointer; display: flex; justify-content: space-between; } .palette li.sel, .palette li:hover { background: var(--surface2); } .palette kbd { color: var(--text2); }
kbd { font-family: var(--mono); font-size: 11px; background: var(--surface2); border: 1px solid var(--border); border-radius: 4px; padding: 0 5px; }
/* 通知ベル */
.bell { position: relative; } .bell .cnt { position: absolute; top: -6px; right: -8px; background: var(--critical); color: #fff; border-radius: 999px; font-size: 10px; padding: 0 5px; font-weight: 700; }
.notif { padding: 8px 0; border-bottom: 1px solid var(--border); } .notif .t { font-size: 11px; color: var(--text2); }
/* 空状態・スケルトン・LLM */
.empty { padding: 32px; text-align: center; color: var(--text2); } .empty .a { margin-top: 8px; }
.skeleton { background: linear-gradient(90deg, var(--surface2), var(--surface), var(--surface2)); background-size: 200% 100%; animation: sk 1.2s infinite; border-radius: 4px; height: 14px; margin: 6px 0; } @keyframes sk { from { background-position: 200% 0 } to { background-position: -200% 0 } }
.llm { border: 1px dashed var(--st-purple); border-radius: var(--radius); padding: 10px 12px; background: color-mix(in srgb, var(--st-purple) 6%, var(--surface)); } .llm .hd { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .llm .ev { font-size: 11px; color: var(--text2); margin-top: 6px; } .llm .ev code { background: var(--surface2); padding: 0 4px; border-radius: 3px; margin-right: 4px; }
.undecidable { color: var(--high); font-weight: 700; }
/* チャート */
.chart svg { width: 100%; height: auto; display: block; } .legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 11px; color: var(--text2); margin-top: 4px; } .legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: middle; }
.bars { display: grid; grid-template-columns: 120px 1fr 48px; gap: 4px 8px; align-items: center; font-size: 12px; } .bars .bar { height: 10px; background: var(--surface2); border-radius: 3px; overflow: hidden; } .bars .bar i { display: block; height: 100%; background: var(--accent); }
/* 地球儀 */
.globe-wrap { position: relative; background: radial-gradient(ellipse at center, #0b1a2e 0%, #060c16 70%); border-radius: var(--radius); border: 1px solid var(--border); overflow: hidden; min-height: 560px; } .globe-wrap canvas { width: 100%; height: 100%; display: block; cursor: grab; } .globe-wrap .ov { position: absolute; left: 12px; bottom: 12px; font-size: 11px; color: #9fb3c8; background: rgba(0,0,0,.35); padding: 4px 8px; border-radius: 4px; } .globe-wrap .ov2 { position: absolute; right: 12px; top: 12px; font-size: 11px; color: #9fb3c8; background: rgba(0,0,0,.35); padding: 4px 8px; border-radius: 4px; }
.player { display: flex; gap: 8px; align-items: center; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); } .player input[type=range] { flex: 1; }
.mode-tabs a { padding: 6px 14px; border-radius: var(--radius); border: 1px solid var(--border); color: var(--text2); } .mode-tabs a.active { background: var(--critical); color: #fff; border-color: var(--critical); } .mode-tabs a.active.est { background: var(--st-purple); border-color: var(--st-purple); }
/* その他 */
.mono { font-family: var(--mono); } .muted { color: var(--text2); } .right { text-align: right; } .nowrap { white-space: nowrap; } .small { font-size: 12px; } .mt8 { margin-top: 8px; } .mt16 { margin-top: 16px; } .mb8 { margin-bottom: 8px; } .w100 { width: 100%; }
pre.raw { background: var(--surface2); padding: 10px; border-radius: var(--radius); overflow: auto; font-size: 12px; max-height: 320px; } details summary { cursor: pointer; color: var(--accent); }
.tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 12px; } .tabs a { padding: 8px 14px; color: var(--text2); border-bottom: 2px solid transparent; } .tabs a.active { color: var(--text); border-bottom-color: var(--accent); } .tabs a:hover { text-decoration: none; color: var(--text); }
.check { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--border); } .check.done { color: var(--text2); text-decoration: line-through; }
.steps { display: flex; gap: 6px; flex-wrap: wrap; } .step { padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); font-size: 12px; } .step.on { background: var(--critical); color: #fff; border-color: var(--critical); } .step.next { border-style: dashed; border-color: var(--st-purple); color: var(--st-purple); }
.matrix td, .matrix th { text-align: center !important; } .lvl-approve { color: var(--critical); font-weight: 700; } .lvl-execute { color: var(--high); } .lvl-view { color: var(--text2); } .lvl-none { color: var(--border); }
.login { display: flex; flex-direction: column; align-items: center; min-height: 100vh; background: linear-gradient(160deg, #0b1a2e, #0E1621 60%); } .login .card { width: 380px; margin: auto; }
.footer { text-align: center; padding: 16px 12px; color: var(--text2); font-size: 12px; } .footer a { color: inherit; text-decoration: none; } .footer a:hover { text-decoration: underline; }
#rank-tbl { table-layout: fixed; } #rank-tbl th:last-child, #rank-tbl td:last-child { white-space: normal; word-break: break-word; overflow-wrap: anywhere; width: 34%; }
@media print { header.top, nav.side, .filterbar, .btn, .toasts { display: none !important; } .app { display: block; } }
/* ---- サイドナビ: アイコン + ラベル / 折りたたみ時はアイコンのみ ---- */
nav.side a { display: flex; align-items: center; gap: 10px; }
nav.side a .ic { width: 22px; text-align: center; font-size: 16px; flex: 0 0 22px; line-height: 1; }
.app.collapsed nav.side { padding: 12px 6px; }
.app.collapsed nav.side .grp, .app.collapsed nav.side .l, .app.collapsed nav.side .hint { display: none; }
.app.collapsed nav.side a { justify-content: center; padding: 8px 0; margin: 2px 0; }
.app.collapsed nav.side a .ic { font-size: 20px; }
@media (max-width: 1280px) { nav.side .hint { display: none; } nav.side a { justify-content: center; } nav.side a .ic { font-size: 20px; } }
[hidden] { display: none !important; }
/* ---- 地球儀の拡大表示 / フルスクリーン ---- */
.globe-wrap .gtools { position: absolute; right: 12px; bottom: 12px; display: flex; gap: 6px; z-index: 5; }
.globe-wrap .gtools .btn { background: rgba(10,20,35,.8); border-color: rgba(120,170,220,.5); color: #e8edf2; }
.globe-wrap.max { position: fixed; inset: 0; z-index: 200; border-radius: 0; height: 100vh !important; min-height: 100vh; }
.globe-wrap.max canvas { height: 100vh !important; }
.globe-wrap:fullscreen { width: 100vw; height: 100vh; border-radius: 0; }
.globe-wrap:fullscreen canvas { height: 100vh !important; }
.globe-wrap.max .player-float { position: absolute; left: 50%; bottom: 56px; transform: translateX(-50%); width: min(900px, 90vw); }
body.globe-max { overflow: hidden; }
.lang-sel { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius); padding: 4px 6px; color: var(--text); min-height: 28px; font-size: 12px; }