/* ============================================================
   deck.css — RISK FINDER AUTO ダークセマンティックレイヤ
   ------------------------------------------------------------
   出典: design/marketplace-mockups/index.html の <style>（コマンド
   デッキ意匠・単一ダークテーマ）を .deck-* prefix の素の CSS に移植。
   Tailwind ユーティリティに非依存で完結する（purge 対象外）。

   設計方針（IMPLEMENTATION-PLAN §1）:
   - トークンは .deck スコープに定義（:root 直書き禁止＝全ページ波及回避）。
     <body class="deck"> 前提で子孫へ継承する。
   - クラス prefix は .deck-*（非 Tailwind）。app.min.css の purge 済み
     ユーティリティや shell.css の rf-* / .tooltip と衝突しない。
   - 純白 #FFFFFF / 純黒 #000000 は不使用（地=--bg #070B15 系・文字=--ink
     #E4EEF9 系）。box-shadow の rgba(0,0,0,.x) は半透明シャドウ。
   - CSP: style-src 'self' 'unsafe-inline'（ADR-012）準拠。外部フォント/
     画像/CDN 参照なし。
   ============================================================ */

/* ---------- デザイントークン（.deck スコープ） ---------- */
.deck {
  --bg:       #070B15;
  --bg2:      #0C1220;
  --panel:    #111A2C;
  --panel2:   #0E1626;
  --panel-hi: #16233A;
  --line:      rgba(120, 200, 240, .12);
  --line-soft: rgba(120, 200, 240, .07);
  --line-hot:  rgba(56, 225, 208, .35);
  --accent:  #38E1D0;   /* シアン: 稼働 UI の主役 */
  --accent2: #4EA8FF;   /* ブルー: 補助 */
  --iris:    #9A8BFF;   /* 署名色: プラン章標のみ（最小限） */
  --ink:      #E4EEF9;
  --ink-soft: #8A9BB6;
  --ink-faint:#51637F;
  --crit: #FF5C6C;   /* Critical=赤 */
  --high: #FF9F45;   /* High=橙 */
  --med:  #FFD666;   /* Medium=黄 */
  --low:  #5FB2FF;   /* Low=青 */
  --ok:   #6EE7A8;   /* 稼働/成功=緑 */
  --grade-b: #A8E063; /* リスクグレード B（A=--ok と C=--high の中間・黄緑） */
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Noto Sans JP", "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, "DejaVu Sans Mono", monospace;
}

/* ---------- ページ地（<body class="deck">） ---------- */
.deck {
  background:
    radial-gradient(1100px 640px at 18% -6%, #10233C 0%, transparent 58%),
    radial-gradient(900px 560px at 92% 108%, #0B1A2E 0%, transparent 52%),
    var(--bg);
  color: var(--ink);
  color-scheme: light dark;
  font-family: var(--sans);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  line-height: 1.6;
}
.deck,
.deck *,
.deck *::before,
.deck *::after { box-sizing: border-box; }

.deck a { color: var(--accent); text-decoration: none; }
.deck a:hover { color: #57ECDE; }

/* ---------- テキストユーティリティ ---------- */
.deck-tabular { font-variant-numeric: tabular-nums; }
.deck-mono { font-family: var(--mono); }

/* ---------- 共通 UI プリミティブ ---------- */
.deck-eyebrow {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ink-soft);
}

/* チップ（状態タグ・色 + テキストで状態表現） */
.deck-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  padding: 3px 9px;
  border-radius: 20px;
  border: 1px solid transparent;
  white-space: nowrap;
}
.deck-chip.ok   { background: rgba(110, 231, 168, .12); color: var(--ok);       border-color: rgba(110, 231, 168, .25); }
.deck-chip.run  { background: rgba(78, 168, 255, .12);  color: var(--accent2);  border-color: rgba(78, 168, 255, .25); }
.deck-chip.wait { background: rgba(120, 200, 240, .08); color: var(--ink-soft); border-color: var(--line); }
.deck-chip.err  { background: rgba(255, 92, 108, .12);  color: var(--crit);     border-color: rgba(255, 92, 108, .28); }
.deck-chip.iris { background: rgba(154, 139, 255, .12); color: var(--iris);     border-color: rgba(154, 139, 255, .3); }
.deck-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* ボタン（min-height 44px = タッチターゲット保証） */
.deck-btn {
  appearance: none;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  padding: 0 20px;
  min-height: 44px;
  border-radius: 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid transparent;
  color: var(--ink);
  background: transparent;
  transition: transform .15s, box-shadow .2s, background .2s;
}
.deck-btn.primary {
  color: #04121A;   /* 深い藍黒: シアン地でのコントラスト確保（純黒ではない） */
  background: linear-gradient(120deg, var(--accent), #57ECDE);
  box-shadow: 0 8px 24px -8px rgba(56, 225, 208, .6);
}
.deck-btn.primary:not(:disabled):hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 30px -8px rgba(56, 225, 208, .7);
}
.deck-btn.ghost {
  color: var(--ink);
  background: rgba(120, 200, 240, .06);
  border-color: var(--line);
}
.deck-btn.ghost:not(:disabled):hover { background: rgba(120, 200, 240, .12); }
/* 取り消せない操作（結果の削除）用。.ghost と併用する前提で色だけ差し替える。 */
.deck-btn.crit { color: var(--crit); border-color: rgba(255, 92, 108, .35); }
/* 押せないボタン。`disabled` 属性は挙動を止めるだけなので、上の cursor:pointer と .primary の
   シアングラデーションがそのまま残り「押せるのに無反応」に見える（利用者報告 2026-09-09）。
   hover 側は :not(:disabled) で外す——詳細度が同じでソース順に頼ることになるため。
   彩度と明度を落とすのは暗地・明地の両方で効き、待ち時間の案内文と併記されるので
   色だけで状態を伝えることにはならない。 */
.deck-btn:disabled {
  cursor: not-allowed;
  opacity: .42;
  filter: saturate(.25);
  box-shadow: none;
  transform: none;
}

/* ---------- 確認モーダル（<dialog>） ----------
   取り消せない操作の直前に一度止めるための箱。フォーカストラップ・Esc・スクロールロック・
   背景の inert 化はブラウザ標準（showModal）に任せる。トークンは DOM 継承で届くため、
   top-layer に上がっても .deck の変数がそのまま使える。 */
.deck-dialog {
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 26px;
  max-width: 520px;
  width: calc(100% - 32px);
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  color: var(--ink);
  font-family: var(--sans);
  box-shadow: 0 24px 60px -12px rgba(4, 10, 22, .8);
}
.deck-dialog::backdrop { background: rgba(4, 10, 22, .72); }
.deck-dialog h2 {
  margin: 0;
  font-size: 19px;
  font-weight: 400;
  letter-spacing: -.01em;
}
.deck-dialog .target {
  margin: 12px 0 0;
  font-family: var(--mono);
  font-size: 13px;
  color: var(--ink-soft);
}
.deck-dialog .target b { color: var(--accent); font-weight: 500; }
.deck-dialog .notes {
  margin: 18px 0 0;
  padding: 14px 16px 14px 34px;
  border-radius: 12px;
  border: 1px solid rgba(255, 159, 69, .28);
  background: rgba(255, 159, 69, .08);
  font-size: 13px;
  line-height: 1.85;
  color: var(--ink-soft);
}
.deck-dialog .notes b { color: var(--ink); font-weight: 500; }
.deck-dialog .actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 24px;
}

/* フォーム */
.deck-field { display: block; }
.deck-field > label {
  display: block;
  font-size: 12px;
  color: var(--ink-soft);
  margin-bottom: 7px;
}
.deck-input {
  width: 100%;
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink);
  background: var(--panel2);
  border: 1px solid var(--line);
  border-radius: 11px;
  padding: 12px 14px;
  min-height: 46px;
  transition: border-color .2s, box-shadow .2s;
}
.deck-input::placeholder { color: var(--ink-faint); }
.deck-input:focus {
  outline: none;
  border-color: var(--line-hot);
  box-shadow: 0 0 0 3px rgba(56, 225, 208, .14);
}
select.deck-input {
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%),
    linear-gradient(135deg, var(--ink-soft) 50%, transparent 50%);
  background-position: right 16px center, right 11px center;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}

/* カード */
.deck-card {
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* セグメンテッドコントロール（モードトグル等の再利用プリミティブ） */
.deck-segmented {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  border-radius: 12px;
  background: var(--panel2);
  border: 1px solid var(--line);
  flex-wrap: wrap;
}
.deck-seg {
  appearance: none;
  border: 0;
  cursor: pointer;
  font-family: var(--sans);
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink-soft);
  padding: 7px 13px;
  border-radius: 9px;
  background: transparent;
  transition: color .2s, background .2s;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.deck-seg .n { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }
.deck-seg:hover { color: var(--ink); }
.deck-seg[aria-selected="true"] { background: rgba(56, 225, 208, .13); color: var(--accent); }
.deck-seg[aria-selected="true"] .n { color: var(--accent); }

/* ---------- アプリシェル（rail + topbar） ---------- */
.deck-shell {
  display: grid;
  grid-template-columns: 216px 1fr;
  min-height: 100dvh;
}
@media (max-width: 780px) {
  .deck-shell { grid-template-columns: 1fr; }
  .deck-rail { display: none; }
}
.deck-rail {
  border-right: 1px solid var(--line);
  background: rgba(9, 14, 26, .6);
  display: flex;
  flex-direction: column;
}
/* rail のビューポート追従は 2 カラムが成立するデスクトップ幅のみ。
   モバイル(≤780px)は 1 カラムで rail が自然高の nav strip になるため 100dvh を適用しない
   （基底 .deck-rail は max-width:780px の display:none より後に来て後勝ちするため、
   height:100dvh を基底へ置くとモバイルに漏れて rail が全画面高になる）。 */
@media (min-width: 781px) {
  .deck-rail {
    position: sticky;
    top: 0;
    height: 100dvh;
    overflow-y: auto;
  }
}
.deck-rail .logo {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 0 18px;
  height: 62px;
  border-bottom: 1px solid var(--line);
}
/* ---------- ワードマーク（受領ロゴ・rail とログインで共用） ----------
   受領した原本は濃紺 #0F1041 で、暗いテーマの地（--bg #070B15）に対し 1.10:1、
   ログインカード地（#111A2C）に対し 1.03:1 と実質不可視になる。そのため原本の
   透過 PNG を **CSS マスク**として使い、地色をテーマのインク色で塗る。
   マスクはアルファチャンネルだけを見るので、**字形・字間・改行は原本のまま**で、
   変わるのはインクの色だけ。明るいテーマでは原本と同じ #0F1041 に塗り戻す
   （下の prefers-color-scheme: light ブロック）。
   マスク URL（--wordmark-src）はテンプレート側が static_asset_url で渡す。 */
.deck-rail .logo .wordmark,
.deck-auth-card .brand-lg .wordmark {
  display: block;
  width: 100%;
  /* 2 段組ワードマークの実寸（上段=原本 1194x98 / 下段=版名を右寄せ。ADR-056）。
     下段を右端で揃えるので LITE / EXPERT / AUTO で外寸が変わらず、3 版とも同じ比率で足りる。 */
  aspect-ratio: 1194 / 175;
  background-color: var(--ink);
  -webkit-mask-image: var(--wordmark-src);
  mask-image: var(--wordmark-src);
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.deck-rail nav {
  padding: 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.deck-rail .nav {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-soft);
  transition: background .2s, color .2s;
}
.deck-rail .nav:hover { background: rgba(120, 200, 240, .05); color: var(--ink); }
.deck-rail .nav[aria-current] { background: rgba(56, 225, 208, .1); color: var(--accent); }
.deck-rail .nav svg { width: 16px; height: 16px; opacity: .85; flex-shrink: 0; }
.deck-rail .foot {
  margin-top: auto;
  padding: 14px;
  border-top: 1px solid var(--line);
}
.deck-rail .foot .u {
  font-size: 11.5px;
  color: var(--ink-soft);
  font-family: var(--mono);
  word-break: break-all;
}
/* スクロールしても画面上端に留める。ログアウトと使い方ガイドは全ページ共通の操作で、
   長い結果ページの下まで行ってから戻る必要が出るのを避ける。rail が既に sticky なので
   同じ挙動に揃う。z-index は本文のカード（既定の重なり）より上、モーダル類より下。
   地を濃くして blur を掛けるのは、下を流れる本文が透けて見出しが読めなくなるため
   （sticky にする前は本文の上に載らなかったので .4 で足りていた）。 */
.deck-topbar {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 62px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 0 clamp(16px, 3vw, 28px);
  background: rgba(7, 11, 21, .86);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.deck-topbar h1 {
  font-size: 17px;
  font-weight: 300;
  color: var(--ink);
  margin: 0;
  letter-spacing: .01em;
}
.deck-topbar .spacer { flex: 1; }
.deck-iconbtn {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-soft);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.deck-iconbtn:hover { color: var(--ink); background: rgba(120, 200, 240, .06); }
.deck-iconbtn svg { width: 17px; height: 17px; }
/* アイコンボタンをリンクとして使う場合（使い方ガイド）。下線を消し、明地の `.deck a:hover`
   （後に出るため後勝ちする）に食われないよう要素セレクタ分だけ詳細度を上げる。 */
a.deck-iconbtn { text-decoration: none; color: var(--ink-soft); }
a.deck-iconbtn:hover { color: var(--ink); }
a.deck-iconbtn[aria-current] { color: var(--accent); border-color: var(--line-hot); }
.deck-body { padding: clamp(16px, 3vw, 28px); }

/* ---------- ダッシュボード ---------- */
.deck-launch {
  position: relative;
  padding: 22px;
  border-radius: 16px;
  overflow: hidden;
  background:
    radial-gradient(600px 220px at 12% 0%, rgba(56, 225, 208, .1), transparent 60%),
    linear-gradient(180deg, var(--panel-hi), var(--panel2));
  border: 1px solid var(--line-hot);
}
.deck-launch .deck-eyebrow { color: var(--accent); }
.deck-launch h3 {
  font-size: 20px;
  font-weight: 200;
  margin: 6px 0 16px;
  color: var(--ink);
}
.deck-launch h3 b { font-weight: 500; color: var(--accent); }
.deck-launch-row {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  flex-wrap: wrap;
}
.deck-launch-row .deck-field.grow { flex: 1; min-width: 220px; }
.deck-prompt-input { position: relative; }
.deck-prompt-input .caret {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--mono);
  color: var(--accent);
  font-size: 14px;
  pointer-events: none;
}
.deck-prompt-input .deck-input { padding-left: 30px; font-family: var(--mono); }

/* KPI タイル */
.deck-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 18px 0;
}
@media (max-width: 720px) {
  .deck-kpis { grid-template-columns: repeat(2, 1fr); }
}
.deck-kpi {
  padding: 16px;
  border-radius: 13px;
  background: rgba(120, 200, 240, .04);
  border: 1px solid var(--line);
}
.deck-kpi .l {
  font-size: 11px;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 6px;
}
.deck-kpi .v {
  font-family: var(--mono);
  font-size: 30px;
  font-weight: 300;
  color: var(--ink);
  margin-top: 8px;
  line-height: 1;
}
.deck-kpi .v small { font-size: 14px; color: var(--ink-faint); }
.deck-kpi .v.accent { color: var(--accent); }
.deck-kpi .v.warn { color: var(--high); }
.deck-kpi .spark {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 22px;
  margin-top: 10px;
}
.deck-kpi .spark i {
  flex: 1;
  background: linear-gradient(180deg, var(--accent), rgba(56, 225, 208, .2));
  border-radius: 2px;
  opacity: .7;
}

/* パネル見出し + フィルタ */
.deck-panel-h {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.deck-panel-h .deck-eyebrow { color: var(--ink-soft); }
.deck-filters {
  display: flex;
  gap: 10px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.deck-filters .deck-input { min-height: 44px; padding: 10px 12px; font-size: 12.5px; }
.deck-filters .deck-input.search { flex: 1; min-width: 180px; }

/* 履歴テーブル */
.deck-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.deck-table thead th {
  text-align: left;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-faint);
  font-weight: 500;
  padding: 8px 10px;
  border-bottom: 1px solid var(--line);
}
.deck-table tbody td {
  padding: 12px 10px;
  border-bottom: 1px solid var(--line-soft);
  vertical-align: middle;
}
.deck-table tbody tr:hover { background: rgba(120, 200, 240, .03); }
.deck-table .tgt { font-family: var(--mono); color: var(--ink); }
.deck-table .when {
  color: var(--ink-faint);
  font-family: var(--mono);
  font-size: 11.5px;
  white-space: nowrap;
}
.deck-table .act { text-align: right; }

/* ---------- スキャン進捗（コンソール） ---------- */
.deck-console { position: relative; padding: 22px; }
.deck-console::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(120, 200, 240, .03) 0 1px, transparent 1px 3px);
  mix-blend-mode: screen;
  opacity: .5;
}
.deck-con-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.deck-con-status { display: inline-flex; align-items: center; gap: 11px; }
.deck-live {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 0 var(--accent);
  animation: deck-pulse 1.6s infinite;
}
@keyframes deck-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(56, 225, 208, .55); }
  70%  { box-shadow: 0 0 0 11px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}
.deck-con-status .lb {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .22em;
  color: var(--accent);
  font-weight: 600;
}
.deck-con-status .tg { font-family: var(--mono); font-size: 13px; color: var(--ink); }
.deck-con-status .tg b { color: var(--accent); }
.deck-hero {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-top: 16px;
  position: relative;
  z-index: 1;
}
.deck-hero h2 { font-size: clamp(22px, 4vw, 32px); font-weight: 200; margin: 0; color: var(--ink); }
.deck-hero h2 b { font-weight: 500; color: var(--accent); }
.deck-hero .pct {
  margin-left: auto;
  font-family: var(--mono);
  font-weight: 300;
  font-size: clamp(32px, 6vw, 52px);
  line-height: 1;
}
.deck-hero .pct .u { font-size: .42em; color: var(--ink-soft); }
.deck-con-sub {
  font-family: var(--mono);
  font-size: 12px;
  color: var(--ink-soft);
  margin: 8px 0 14px;
  position: relative;
  z-index: 1;
}
.deck-cursor {
  display: inline-block;
  width: 7px;
  height: 13px;
  background: var(--accent);
  margin-left: 2px;
  vertical-align: -1px;
  animation: deck-blink 1s steps(2) infinite;
}
@keyframes deck-blink { 50% { opacity: 0; } }
.deck-track {
  height: 4px;
  background: rgba(120, 200, 240, .1);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 20px;
  position: relative;
  z-index: 1;
}
.deck-track > span {
  display: block;
  height: 100%;
  width: 0;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--accent2), var(--accent));
  box-shadow: 0 0 10px rgba(56, 225, 208, .5);
  transition: width .4s ease;
}
.deck-con-grid {
  display: grid;
  grid-template-columns: 292px 1fr;
  gap: 16px;
  position: relative;
  z-index: 1;
}
@media (max-width: 820px) {
  .deck-con-grid { grid-template-columns: 1fr; }
}
.deck-con-panel {
  background: linear-gradient(180deg, var(--panel), var(--panel2));
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px;
}
.deck-con-panel h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  color: var(--ink-soft);
  font-weight: 600;
  margin: 0 0 12px;
}

/* レーダー */
.deck-radar-wrap { display: grid; place-items: center; padding: 2px 0 12px; }
.deck-radar { position: relative; width: 190px; height: 190px; max-width: 100%; }
.deck-radar canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.deck-reticle {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
  pointer-events: none;
}
.deck-reticle .h { font-family: var(--mono); font-size: 11px; color: var(--ink); }
.deck-reticle .s {
  font-size: 9px;
  color: var(--ink-faint);
  letter-spacing: .1em;
  margin-top: 2px;
}

/* 件数スタット（コンソール小カウンタ） */
.deck-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.deck-stat {
  background: rgba(120, 200, 240, .05);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 6px;
  text-align: center;
}
.deck-stat .v {
  font-family: var(--mono);
  font-size: 22px;
  font-weight: 400;
  color: var(--accent);
  line-height: 1;
}
.deck-stat .v.risk { color: var(--high); }
.deck-stat .l { font-size: 10px; color: var(--ink-soft); margin-top: 5px; }

/* ステップリスト */
.deck-steps { display: flex; flex-direction: column; gap: 1px; margin-top: 14px; }
.deck-step {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 8px 6px;
  border-radius: 9px;
}
.deck-step.active { background: rgba(56, 225, 208, .07); }
.deck-ring {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--ink-faint);
  flex-shrink: 0;
}
.deck-spin {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid var(--accent);
  border-top-color: transparent;
  animation: deck-rot .8s linear infinite;
  flex-shrink: 0;
}
@keyframes deck-rot { to { transform: rotate(360deg); } }
.deck-check {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(18, 161, 80, .24);
  display: grid;
  place-items: center;
  color: var(--ok);
  flex-shrink: 0;
}
.deck-step .nm { flex: 1; font-size: 13px; color: var(--ink-soft); }
.deck-step.active .nm,
.deck-step.done .nm { color: var(--ink); }
.deck-step .tag { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }
.deck-step.active .tag { color: var(--accent); }

/* テレメトリ端末 */
.deck-term {
  background: var(--bg2);
  border: 1px solid var(--line);
  border-radius: 14px;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.deck-term-bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 9px 13px;
  border-bottom: 1px solid var(--line);
  background: rgba(120, 200, 240, .03);
}
.deck-term-bar .d { width: 9px; height: 9px; border-radius: 50%; }
.deck-term-bar .t { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); margin-left: 5px; }
.deck-term-bar .t b { color: var(--ink); }
.deck-term-body {
  font-family: var(--mono);
  font-size: 12px;
  line-height: 1.85;
  padding: 12px 14px;
  height: 320px;
  overflow-y: auto;
}
.deck-tl {
  display: flex;
  gap: 9px;
  align-items: baseline;
  opacity: 0;
  transform: translateY(3px);
  animation: deck-tin .3s forwards;
}
@keyframes deck-tin { to { opacity: 1; transform: none; } }
.deck-tl .lt { color: var(--ink-faint); flex-shrink: 0; }
.deck-tl .lb { flex-shrink: 0; font-weight: 600; }
.deck-tl .lb.ok   { color: var(--ok); }
.deck-tl .lb.info { color: var(--accent2); }
.deck-tl .lb.act  { color: var(--accent); }
.deck-tl .lb.warn { color: var(--high); }
.deck-tl .lm { color: var(--ink-soft); flex: 1; min-width: 0; }
.deck-tl .lc { margin-left: 6px; flex-shrink: 0; font-weight: 600; color: var(--ok); }

/* ---------- 診断結果（ドシエ） ---------- */
.deck-result-head {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 20px;
  padding: 22px;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 720px) {
  .deck-result-head { grid-template-columns: 1fr; }
}
.deck-gauge { position: relative; width: 190px; height: 190px; margin: 0 auto; }
.deck-gauge canvas { width: 100%; height: 100%; }
.deck-gauge .num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
}
.deck-gauge .num .v {
  font-family: var(--mono);
  font-size: 46px;
  font-weight: 300;
  color: var(--high);
  line-height: 1;
}
.deck-gauge .num .l {
  font-size: 10px;
  letter-spacing: .2em;
  color: var(--ink-faint);
  font-family: var(--mono);
  margin-top: 4px;
}
.deck-verdict .deck-eyebrow { color: var(--ink-soft); }
.deck-verdict h2 { font-size: 24px; font-weight: 200; margin: 8px 0; color: var(--ink); }
.deck-verdict h2 b { color: var(--high); font-weight: 500; }
.deck-verdict .meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  font-size: 12.5px;
  color: var(--ink-soft);
  margin-top: 10px;
}
.deck-verdict .meta b { color: var(--ink); font-weight: 400; font-family: var(--mono); }
.deck-verdict .dl { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }

/* 攻撃シナリオ callout */
.deck-scenario {
  margin: 20px 22px;
  padding: 18px;
  border-radius: 14px;
  border: 1px solid rgba(255, 92, 108, .28);
  background: linear-gradient(120deg, rgba(255, 92, 108, .1), rgba(255, 92, 108, .03));
}
.deck-scenario .deck-eyebrow { color: var(--crit); display: flex; align-items: center; gap: 8px; }
.deck-scenario p { margin: 10px 0 0; font-size: 13.5px; color: var(--ink); line-height: 1.75; }

/* 検出事項カード（重大度ストライプ） */
.deck-findings { padding: 4px 22px 22px; display: flex; flex-direction: column; gap: 10px; }
.deck-find {
  display: grid;
  grid-template-columns: 4px 1fr auto;
  gap: 14px;
  padding: 15px 16px;
  border-radius: 12px;
  background: rgba(120, 200, 240, .03);
  border: 1px solid var(--line);
  align-items: start;
}
.deck-stripe { border-radius: 4px; align-self: stretch; }
.deck-find.crit .deck-stripe { background: var(--crit); }
.deck-find.high .deck-stripe { background: var(--high); }
.deck-find.med  .deck-stripe { background: var(--med); }
.deck-find.low  .deck-stripe { background: var(--low); }
.deck-sev {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 600;
}
.deck-find.crit .deck-sev { color: var(--crit); }
.deck-find.high .deck-sev { color: var(--high); }
.deck-find.med  .deck-sev { color: var(--med); }
.deck-find.low  .deck-sev { color: var(--low); }
.deck-find h4 { font-size: 15px; font-weight: 400; margin: 5px 0 6px; color: var(--ink); }
.deck-find p { font-size: 12.5px; color: var(--ink-soft); margin: 0; line-height: 1.65; }
.deck-find .tags { display: flex; gap: 6px; margin-top: 9px; flex-wrap: wrap; }
.deck-cve {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--accent2);
  border: 1px solid rgba(78, 168, 255, .28);
  border-radius: 6px;
  padding: 1px 7px;
}
.deck-host {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--ink-soft);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 1px 7px;
}
.deck-find .aside { text-align: right; }

/* 漏洩サマリー（--iris） */
.deck-leak {
  margin: 0 22px 22px;
  padding: 16px;
  border-radius: 13px;
  background: rgba(154, 139, 255, .05);
  border: 1px solid rgba(154, 139, 255, .2);
}
.deck-leak h3 {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--iris);
  margin: 0 0 12px;
}
.deck-leak-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
@media (max-width: 720px) {
  .deck-leak-grid { grid-template-columns: repeat(2, 1fr); }
}
.deck-leak-grid .v { font-family: var(--mono); font-size: 24px; font-weight: 300; color: var(--ink); }
.deck-leak-grid .v.flag { color: var(--crit); }
.deck-leak-grid .l { font-size: 10.5px; color: var(--ink-soft); margin-top: 4px; }

/* ---------- 契約・利用状況 ---------- */
.deck-bill-grid { display: grid; grid-template-columns: 280px 1fr; gap: 18px; padding: 22px; }
@media (max-width: 780px) {
  .deck-bill-grid { grid-template-columns: 1fr; }
}
.deck-ticket-card {
  padding: 22px;
  border-radius: 16px;
  text-align: center;
  background:
    radial-gradient(300px 180px at 50% 0%, rgba(56, 225, 208, .1), transparent 60%),
    linear-gradient(180deg, var(--panel-hi), var(--panel2));
  border: 1px solid var(--line-hot);
}
.deck-ring-gauge { position: relative; width: 168px; height: 168px; margin: 6px auto 14px; }
.deck-ring-gauge canvas { width: 100%; height: 100%; }
.deck-ring-gauge .c {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  text-align: center;
}
.deck-ring-gauge .c .v {
  font-family: var(--mono);
  font-size: 40px;
  font-weight: 300;
  color: var(--accent);
  line-height: 1;
}
.deck-ring-gauge .c .v small { font-size: 16px; color: var(--ink-faint); }
.deck-ring-gauge .c .l {
  font-size: 10px;
  letter-spacing: .18em;
  color: var(--ink-faint);
  font-family: var(--mono);
  margin-top: 3px;
}
.deck-ticket-card .status { margin-top: 6px; }
.deck-bill-detail dl {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin: 0;
}
@media (max-width: 520px) {
  .deck-bill-detail dl { grid-template-columns: 1fr; }
}
.deck-bill-detail .cell {
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(120, 200, 240, .04);
  border: 1px solid var(--line);
}
.deck-bill-detail dt { font-size: 11px; color: var(--ink-soft); }
.deck-bill-detail dd { margin: 6px 0 0; font-size: 15px; color: var(--ink); font-family: var(--mono); }
.deck-bill-detail dd.big { font-size: 22px; font-weight: 300; }
.deck-usage {
  margin-top: 16px;
  padding: 16px;
  border-radius: 13px;
  background: rgba(120, 200, 240, .03);
  border: 1px solid var(--line);
}
.deck-usage .deck-panel-h { margin-bottom: 14px; }
.deck-usage .bars { display: flex; align-items: flex-end; gap: 8px; height: 90px; }
.deck-usage .bars .col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  height: 100%;
  justify-content: flex-end;
}
.deck-usage .bars .col i {
  width: 100%;
  max-width: 30px;
  background: linear-gradient(180deg, var(--accent), rgba(56, 225, 208, .25));
  border-radius: 4px 4px 0 0;
}
.deck-usage .bars .col.now i { background: linear-gradient(180deg, var(--iris), rgba(154, 139, 255, .3)); }
.deck-usage .bars .col span { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); }

/* ---------- ログイン（認証） ---------- */
/* モックはデモページ内の 1 セクション（640px 枠）だったが、実アプリの認証画面は
   ページ全体を占める。ビューポート高で中央寄せしないとカードが上に寄って下が空く。 */
.deck-auth-stage {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 40px 20px;
}
@supports (min-height: 100dvh) {
  /* モバイルのアドレスバー伸縮で 100vh がはみ出すのを避ける。 */
  .deck-auth-stage { min-height: 100dvh; }
}
/* カードとフッターを 1 ブロックとして扱い、幅を揃えて中央に置く。 */
.deck-auth-wrap {
  width: 100%;
  max-width: 400px;
}
.deck-auth-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 400px;
  padding: 34px 32px;
  border-radius: 20px;
  background: linear-gradient(180deg, rgba(17, 26, 44, .9), rgba(12, 18, 32, .92));
  border: 1px solid var(--line-hot);
  box-shadow: 0 40px 100px -40px rgba(0, 0, 0, .9), 0 0 0 1px rgba(56, 225, 208, .05) inset;
  backdrop-filter: blur(6px);
}
.deck-auth-card .brand-lg {
  display: flex;
  align-items: center;
  gap: 11px;
  justify-content: center;
  margin-bottom: 6px;
}
/* ログインはブランドを見せる場なので rail より大きく取る。カード内幅 336px に対し
   280px（2 段組で高さ約 41px）。全幅まで伸ばすとカードの余白と詰まって窮屈になる。 */
.deck-auth-card .brand-lg .wordmark { max-width: 280px; }
.deck-auth-card .lead {
  text-align: center;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--iris);
  margin-bottom: 24px;
}
.deck-auth-card form { display: flex; flex-direction: column; gap: 15px; }
.deck-auth-card .forgot { text-align: center; margin-top: 18px; font-size: 12.5px; }
.deck-auth-card .forgot a { color: var(--accent2); }
.deck-auth-foot {
  position: relative;
  z-index: 1;
  text-align: center;
  margin-top: 20px;
  font-size: 11px;
  color: var(--ink-faint);
  font-family: var(--mono);
  letter-spacing: .05em;
}

/* ---------- フォーカス可視化（全 interactive 要素） ---------- */
.deck-btn:focus-visible,
.deck-iconbtn:focus-visible,
.deck-input:focus-visible,
.deck-chip:focus-visible,
.deck-seg:focus-visible,
.deck-rail .nav:focus-visible,
.deck a:focus-visible {
  outline: 2px solid var(--accent2);
  outline-offset: 2px;
}

/* ---------- モーション低減設定 ---------- */
@media (prefers-reduced-motion: reduce) {
  .deck *,
  .deck *::before,
  .deck *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ============================================================
   ライトモード（ブラウザ設定準拠・追加レイヤ）
   ------------------------------------------------------------
   既定のダークテーマは維持し、prefers-color-scheme: light 時のみ
   .deck スコープ配下でトークンと dark 依存のハードコード値を上書きする。
   純白 #FFFFFF / 純黒 #000000 は不使用。色相は保ち、明地でコントラスト
   不足になる用途（リンク=--accent / tint 上の文字）のみトーンを暗く調整。
   ============================================================ */
@media (prefers-color-scheme: light) {
  .deck {
    --bg:       #F4F7FC;
    --bg2:      #E8EEF6;
    --panel:    #FAFBFD;
    --panel2:   #EEF2F7;
    --panel-hi: #FDFEFF;
    --line:      rgba(20, 50, 90, .16);
    --line-soft: rgba(20, 50, 90, .09);
    --line-hot:  rgba(10, 110, 98, .72);
    --accent:  #0A6E62;
    --accent2: #0051D5;
    --iris:    #6A4FD6;
    --ink:      #16202E;
    --ink-soft: #55647C;
    --ink-faint:#78859B;
    --crit: #B71C1C;
    --high: #B23C0A;
    --med:  #A16207;
    --low:  #0369A1;
    --ok:   #0A744C;
    /* #A8E063 は明地 2.61:1 で AA 非達のため、色相を保ったまま暗い lime へ寄せる（4.65:1）。 */
    --grade-b: #4D7C0F;
    background:
      radial-gradient(1100px 640px at 18% -6%, #E3EDF8 0%, transparent 58%),
      radial-gradient(900px 560px at 92% 108%, #E8EFF8 0%, transparent 52%),
      var(--bg);
  }

  /* 指摘1・3対応: 情報テキストの --ink-faint 消費を AA 達成の --ink-soft へ差し替え。
     --ink-faint #78859B は明地 bg 3.47:1/card 3.67:1/bg2 3.20:1 で本文 AA 非達のため、
     明地では非情報の装飾用途（.deck-ring の 2px 縁= UI 3:1 で 3.47:1 合格）のみに限定する。 */
  .deck-seg .n,
  .deck-kpi .v small,
  .deck-table thead th,
  .deck-table .when,
  .deck-reticle .s,
  .deck-step .tag,
  .deck-tl .lt,
  .deck-gauge .num .l,
  .deck-ring-gauge .c .v small,
  .deck-ring-gauge .c .l,
  .deck-usage .bars .col span,
  .deck-auth-foot { color: var(--ink-soft); }

  /* placeholder だけ --ink-soft (#55647C・7.02:1) より一段落とす。入力欄には必ず label が
     あり（例: home.html の「診断対象（ドメイン）」）、placeholder は入力例＝凡例として
     読ませるものなので、確定した入力値と同じ濃さだと「もう入っている」ように見える。
     #5F6E86 は bg #F4F7FC 4.82:1 / panel #FAFBFD 4.99:1 / **panel2 #EEF2F7 4.60:1**（実測）で、
     一番暗い地でも本文 AA (4.5:1) を保てる下限。--ink-faint (#78859B) は同じ 3 地で
     3.48 / 3.60 / 3.32:1 と AA 非達のため、そこまでは落とせない。
     ダークは既に 2.96:1 で AA 非達のため、これ以上薄くせず据え置く。 */
  .deck-input::placeholder { color: #5F6E86; }

  .deck a:hover { color: #08544A; }

  .deck-chip.wait { background: rgba(85, 100, 124, .12); }

  .deck-btn.primary {
    color: #F4FBFA;
    background: linear-gradient(120deg, var(--accent), #0C7F70);
    box-shadow: 0 8px 24px -8px rgba(10, 110, 98, .4);
  }
  .deck-btn.primary:not(:disabled):hover { box-shadow: 0 12px 30px -8px rgba(10, 110, 98, .5); }

  .deck-btn.ghost { background: rgba(15, 35, 70, .05); }
  .deck-btn.ghost:not(:disabled):hover { background: rgba(15, 35, 70, .09); }

  .deck-input,
  select.deck-input { border-color: rgba(20, 50, 90, .55); }
  /* 指摘2対応: focus 指標は border(--line-hot .72=3.29:1, resting 3.24 を上回り非劣化)が担う。
     box-shadow は補助グローとして .28→.5 に増やし視認性のみ補強（keyboard は下段 :focus-visible outline が担保）。 */
  .deck-input:focus { box-shadow: 0 0 0 3px rgba(10, 110, 98, .5); }

  .deck-seg[aria-selected="true"] { background: rgba(10, 110, 98, .12); }

  .deck-rail { background: rgba(250, 252, 255, .75); }
  /* 明るい地では受領した原本の色（#0F1041）に塗り戻す。bg #F4F7FC で 16.70:1 あり、
     ブランドの色をそのまま出せる地でわざわざ変える必要がない。 */
  .deck-rail .logo .wordmark,
  .deck-auth-card .brand-lg .wordmark { background-color: #0F1041; }
  .deck-rail .nav:hover { background: rgba(15, 35, 70, .05); }
  .deck-rail .nav[aria-current] { background: rgba(10, 110, 98, .12); }
  /* sticky で本文の上に載るため、暗地と同じく透けない程度まで濃くする。 */
  .deck-topbar { background: rgba(250, 252, 255, .88); }
  .deck-iconbtn:hover { background: rgba(15, 35, 70, .05); }

  .deck-launch {
    background:
      radial-gradient(600px 220px at 12% 0%, rgba(10, 110, 98, .08), transparent 60%),
      linear-gradient(180deg, var(--panel-hi), var(--panel2));
  }

  .deck-kpi,
  .deck-stat,
  .deck-find,
  .deck-bill-detail .cell,
  .deck-usage { background: #FCFDFF; }
  .deck-kpi .spark i { background: linear-gradient(180deg, var(--accent), rgba(10, 110, 98, .25)); }

  .deck-table tbody tr:hover { background: rgba(20, 50, 90, .035); }
  .deck-term-bar { background: rgba(20, 50, 90, .03); }
  .deck-console::before {
    background: repeating-linear-gradient(0deg, rgba(20, 50, 90, .04) 0 1px, transparent 1px 3px);
    mix-blend-mode: multiply;
  }

  .deck-track { background: rgba(20, 50, 90, .1); }
  .deck-track > span { box-shadow: 0 0 10px rgba(10, 110, 98, .25); }

  @keyframes deck-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(10, 110, 98, .5); }
    70%  { box-shadow: 0 0 0 11px transparent; }
    100% { box-shadow: 0 0 0 0 transparent; }
  }

  .deck-step.active { background: rgba(10, 110, 98, .1); }
  .deck-check { background: rgba(14, 143, 94, .18); }

  /* 指摘4対応: callout の赤を --crit #B71C1C 由来(183,28,28)へ統一し eyebrow/severity と単一化 */
  .deck-scenario {
    border-color: rgba(183, 28, 28, .3);
    background: linear-gradient(135deg, rgba(183, 28, 28, .08), rgba(183, 28, 28, .03));
  }

  .deck-cve { border-color: rgba(0, 81, 213, .3); }

  .deck-leak {
    background: rgba(106, 79, 214, .06);
    border-color: rgba(106, 79, 214, .28);
  }

  .deck-ticket-card {
    background:
      radial-gradient(300px 180px at 50% 0%, rgba(10, 110, 98, .1), transparent 60%),
      linear-gradient(180deg, var(--panel-hi), var(--panel2));
  }

  .deck-usage .bars .col i { background: linear-gradient(180deg, var(--accent), rgba(10, 110, 98, .55)); }
  .deck-usage .bars .col.now i { background: linear-gradient(180deg, var(--iris), rgba(106, 79, 214, .55)); }

  .deck-auth-card {
    background: linear-gradient(180deg, #FCFDFF, #EEF2F7);
    box-shadow: 0 24px 60px -30px rgba(20, 40, 80, .18), 0 0 0 1px rgba(10, 110, 98, .06) inset;
  }
}
