/* sagi-shield デザインシステム v2(product/DESIGN-SYSTEM.md準拠)
   方向: 不安な利用者が信用できる「窓口」— 抑制・余白・連続性
   運用: このファイルを変更したら4つのHTMLのlink ?v=Nを+1する(キャッシュバスト) */
:root{
  --danger:#B3261E; --warn:#B26A00; --safe:#1B5E20;
  --ink:#17202B; --ink-sub:#5A6572;
  --surface:#FFF; --surface-alt:#F5F7FA; --line:#E3E7EC;
  --accent:#1A3C6E;            /* 主アクセント=信頼の濃藍 */
  --accent-hover:#142F56;
  --link:#1D4ED8;
  --note-bg:#F0F4FA; --note-line:#A8BFDD;
  --danger-bg:#FDECEA; --warn-bg:#FFF4E5; --safe-bg:#EAF5EC;
  --fs-h1:2rem; --fs-h2:1.3rem; --fs-body:1.0625rem; --fs-small:.875rem;
  --leading:1.75;
  --shadow-s:0 1px 2px rgba(16,24,40,.05),0 2px 8px rgba(16,24,40,.06);
  --shadow-m:0 2px 6px rgba(16,24,40,.07),0 8px 24px rgba(16,24,40,.08);
  --r-s:10px; --r-m:14px; --r-l:18px;
}
*{box-sizing:border-box}
body{font-family:-apple-system,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP",sans-serif;
  margin:0;color:var(--ink);font-size:var(--fs-body);line-height:var(--leading);
  background:var(--surface-alt);-webkit-font-smoothing:antialiased;
  word-break:auto-phrase;line-break:strict;overflow-wrap:break-word}
.wrap{max-width:720px;margin:0 auto;padding:32px 20px 140px}
h1,h2{font-family:"Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP","Yu Mincho",serif}
h1{font-size:var(--fs-h1);line-height:1.25;margin:0 0 10px;font-weight:600;letter-spacing:.01em}
h2{font-size:var(--fs-h2);margin:0 0 10px;font-weight:600;line-height:1.4}
p{margin:0 0 14px}
a{color:var(--link)}
small,.sub{color:var(--ink-sub);font-size:var(--fs-small);line-height:1.6}
code{background:#EEF1F5;padding:2px 6px;border-radius:4px;font-size:.95em}

/* ページ頭: パンくず+大見出し+役割説明(全ページ共通の「受付票」) */
.pagehead{margin-bottom:22px;padding-bottom:18px;border-bottom:1px solid var(--line)}
.pagehead .crumb{font-size:var(--fs-small);color:var(--ink-sub);margin-bottom:10px}
.pagehead .crumb a{color:var(--ink-sub);text-decoration:none}
.pagehead .crumb a:hover{text-decoration:underline}
.aisign{font-size:var(--fs-small);color:var(--ink-sub);margin-top:6px}

/* ブランド帯(トップのみ) */
.brand{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.brand .mark{vertical-align:-2px;margin-right:6px}
.tagline{font-size:var(--fs-body);color:var(--ink-sub);margin-top:2px}

/* カード: 受付票の質感(薄影・広めの余白) */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-l);
  padding:24px 26px;margin:18px 0;box-shadow:var(--shadow-s)}
.card>:last-child{margin-bottom:0}
/* 注意喚起ブロック(警告色の主張を抑えた静かな帯) */
.scenario{background:var(--note-bg);border:1px solid var(--note-line);
  border-left:4px solid var(--accent)}
.scenario h2{font-size:1.1rem;margin-bottom:8px}
.scenario ol{margin:0;padding-left:1.4em}
.scenario li{margin:6px 0}

/* ボタン: 48px・動詞ラベル・藍 */
.btn{display:inline-block;background:var(--accent);color:#fff;border:0;
  padding:14px 30px;border-radius:var(--r-s);font-size:var(--fs-body);font-weight:600;
  cursor:pointer;text-decoration:none;min-height:48px;line-height:1.3;
  box-shadow:0 1px 2px rgba(20,47,86,.18);
  transition:background .15s ease,transform .15s ease,box-shadow .15s ease}
@media (hover:hover) and (pointer:fine){
  .btn:hover{background:var(--accent-hover);transform:translateY(-1px);
    box-shadow:0 2px 6px rgba(20,47,86,.22)}
}
.btn:active{transform:translateY(0)}
.btn:disabled{background:transparent;color:#8B95A3;border:1.5px solid #C4CDD8;
  box-shadow:none;cursor:not-allowed;transform:none}
.btn-sec{background:transparent;color:var(--accent);
  border:1.5px solid #B7C4D4;box-shadow:none}
@media (hover:hover) and (pointer:fine){
  .btn-sec:hover{background:#EDF2F8;color:var(--accent-hover);border-color:#8FA3BC}}
.btn-block{display:block;width:100%;text-align:center;margin:10px 0}
/* 主ボタンの補助行(状況選択型ボタン用) */
.btn .btn-sub{display:block;font-size:var(--fs-small);font-weight:400;
  color:#DCE6F2;margin-top:2px;line-height:1.4}
.btn-sec .btn-sub{color:var(--ink-sub)}
.btn:active{transform:scale(.98)}

/* 入力 */
textarea,input[type=text]{width:100%;padding:14px 16px;font-size:var(--fs-body);
  border:1px solid #C4CDD8;border-radius:var(--r-s);font-family:inherit;
  line-height:1.7;background:var(--surface);color:var(--ink);
  transition:border-color .15s ease,box-shadow .15s ease}
textarea{min-height:160px}
textarea::placeholder,input::placeholder{color:#98A3B0}
textarea:focus,input:focus{outline:none;border-color:var(--link);
  box-shadow:0 0 0 3px rgba(29,78,216,.15)}
button:focus-visible,a:focus-visible{outline:3px solid var(--link);outline-offset:2px}

/* 判定チップ: 語+色+記号の3重符号化(色はここだけ強く) */
.verdict{border-radius:var(--r-m);padding:20px 24px;margin:18px 0;
  border:1px solid;display:none}
.verdict.on{display:block}
.chip{display:inline-block;padding:3px 14px;border-radius:999px;color:#fff;
  font-weight:700;margin-right:8px;font-size:.95rem;white-space:nowrap}
.risk-high{background:var(--danger-bg);border-color:var(--danger)}
.risk-high .chip{background:var(--danger)}
.risk-medium{background:var(--warn-bg);border-color:var(--warn)}
.risk-medium .chip{background:var(--warn)}
.risk-low,.risk-safe{background:var(--safe-bg);border-color:var(--safe)}
.risk-low .chip,.risk-safe .chip{background:var(--safe)}

/* 出現モーション: 意味を運ぶ最小のものだけ(判定・対話の現れる瞬間) */
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.verdict.on,.msg{animation:rise .3s ease-out both}
/* 対話は順に現れる(会話の流れを視覚で示す) */
.msg:nth-child(2){animation-delay:.08s}
.msg:nth-child(3){animation-delay:.16s}
.msg:nth-child(4){animation-delay:.24s}
.msg:nth-child(n+5){animation-delay:.32s}

/* シグネチャ: AIの名乗り転写(この製品の世界観をそのまま見せる一行) */
.sigline{background:var(--surface);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:var(--r-m);
  padding:16px 20px;margin:16px 0 20px;display:flex;gap:12px;align-items:baseline;
  box-shadow:var(--shadow-s)}
.sigline .sig-who{flex-shrink:0;font-size:var(--fs-small);font-weight:700;
  color:var(--accent);letter-spacing:.02em}
.sigline .sig-tx{font-family:"Hiragino Mincho ProN","Hiragino Mincho Pro","Noto Serif JP","Yu Mincho",serif;
  font-size:1.08rem;line-height:1.6;text-wrap:balance}
.sigline .caret{display:inline-block;width:1px;height:1.1em;background:var(--ink);
  vertical-align:-2px;margin-left:2px;animation:blink 1s step-end infinite}
@keyframes blink{50%{opacity:0}}
.sigline.done .caret{display:none}

/* 手口DB照合の表示(判定材料の一つ・確定表現に見せない) */
.tm{margin:6px 0;padding:8px 12px;border-left:3px solid var(--warn);
  background:var(--note-bg);font-size:var(--fs-small);border-radius:0 8px 8px 0}
.tm-none{border-left-color:var(--ink-sub);color:var(--ink-sub)}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
}

/* 対話ログ: 縦積み+話者ラベル */
.msg{margin:10px 0;padding:12px 16px;border-radius:var(--r-m);font-size:1rem}
.msg .who{display:block;font-size:var(--fs-small);font-weight:700;margin-bottom:3px}
.msg.agent{background:#EEF1F5;border-left:4px solid #41525F}
.msg.agent .who{color:#41525F}
.msg.visitor{background:#E8F0FB;border-left:4px solid var(--link)}
.msg.visitor .who{color:var(--link)}

/* 台帳 */
table.ledger{width:100%;border-collapse:collapse;background:var(--surface);
  border-radius:var(--r-m);overflow:hidden;box-shadow:var(--shadow-s);
  border:1px solid var(--line)}
table.ledger td,table.ledger th{border-bottom:1px solid var(--line);
  padding:13px 12px;text-align:left;font-size:.98rem}
table.ledger th{font-size:var(--fs-small);color:var(--ink-sub);
  background:#FAFBFC;font-weight:600}
table.ledger tbody tr:last-child td{border-bottom:0}
tr.rowlink{cursor:pointer;transition:background .12s ease}
tr.rowlink:hover{background:#F2F6FC}
@media (max-width:768px){
  table.ledger thead{display:none}
  table.ledger tr{display:block;border-bottom:1px solid var(--line);padding:8px 4px}
  table.ledger td{display:block;border:0;padding:3px 12px}
  table.ledger td::before{content:attr(data-label);display:inline-block;
    min-width:4.5em;color:var(--ink-sub);font-size:.8rem;margin-right:.4em}
}

pre.report{background:#F8FAFC;border:1px solid var(--line);border-radius:var(--r-s);
  padding:16px 18px;white-space:pre-wrap;font-size:.92rem;line-height:1.6;
  overflow-x:auto;color:#33404E}

/* 免責バー: 常設だが静かに */
.legal{position:fixed;left:0;right:0;bottom:0;
  background:rgba(38,50,56,.94);color:#DCE3E8;
  font-size:var(--fs-small);padding:8px 16px;text-align:center;
  backdrop-filter:blur(4px);z-index:10}

/* 手順表示: 分岐ではなく「順に進む」ことを番号で示す */
.steps{display:flex;flex-direction:column;gap:10px;margin:6px 0 14px}
.step{display:flex;gap:14px;align-items:flex-start}
.step-no{flex-shrink:0;width:28px;height:28px;border-radius:50%;
  background:var(--accent);color:#fff;font-weight:700;font-size:.95rem;
  display:flex;align-items:center;justify-content:center;margin-top:2px}
.step small{display:block;color:var(--ink-sub);font-size:var(--fs-small);line-height:1.5}

/* 次アクションカード: 判定の直後に現れる「今やること」 */
.next-act{border-left:4px solid var(--accent)}
.next-ol{margin:0 0 10px;padding-left:1.4em;line-height:1.8}
.notified{margin:8px 0;padding:8px 12px;border-radius:var(--r-s);
  background:var(--safe-bg);border:1px solid var(--safe);font-size:var(--fs-small)}
.notified:empty{display:none}
.next-links{font-size:var(--fs-small);margin-top:6px}

/* エラー表示: 静かだが確実に見える */
.err{background:var(--danger-bg);border:1px solid var(--danger);
  border-radius:var(--r-s);padding:12px 16px;margin:14px 0;font-size:.95rem}
/* 確認質問の説明行 */
.dlg-note{font-size:var(--fs-small);color:var(--ink-sub);margin:18px 0 4px}
/* 詳細の定義リスト */
dl.kv{display:grid;grid-template-columns:9.5em 1fr;gap:4px 14px;font-size:.95rem}
dl.kv dt{font-weight:700;color:var(--ink-sub)}
dl.kv dd{margin:0}
@media (max-width:560px){dl.kv{grid-template-columns:1fr}dl.kv dd{margin-bottom:8px}}
.line-id{display:flex;align-items:center;gap:10px;flex-wrap:wrap}

/* 耳打ち選択チップ(通話中に片手で押せる大きさ) */
.chipset{display:flex;flex-wrap:wrap;gap:10px;margin:10px 0}
.wchip{padding:14px 20px;min-height:48px;font-size:1.05rem;font-weight:700;
  color:var(--ink);background:var(--surface-alt);border:1.5px solid var(--line);
  border-radius:999px;cursor:pointer}
.wchip:active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* demo mode: 常設で分かる帯(?demo=1のときのみ表示) */
.demo-badge{position:sticky;top:0;z-index:5;background:var(--warn-bg);
  border:1px solid var(--warn);color:var(--warn);font-weight:700;
  font-size:var(--fs-small);text-align:center;padding:8px 12px;
  border-radius:var(--r-s);margin-bottom:14px}

/* 検証項目の逐次点灯(「確認中」の装飾ではなく実際の検証段を見せる) */
.verify-steps{margin:8px 0 0;padding-left:1.2em;font-size:.95rem;color:var(--ink-sub)}
.verify-steps li{margin:4px 0;transition:color .2s ease,font-weight .2s ease}
.verify-steps li.on{color:var(--ink);font-weight:700}