/* ============================================================
   Copilot 活用診断 デモ — 共通スタイル
   トークンは既存デモ hp/public/demo/review-446280/ と共有。
   面は白／グレー、色は点。絵文字ゼロ（アイコンは inline SVG monoline）。
   ============================================================ */
:root{
  --bg:#f2f5f9;
  --paper:#ffffff;
  --ink:#1c2733;
  --ink-soft:#5a6b7d;
  --ink-faint:#93a3b3;
  --navy:#1e3a5f;
  --navy-deep:#152c4a;
  --sky:#4a7fa5;
  --ok:#2f7a4d;
  --pen:#c93a2b;
  --amber:#b57d24;
  --teal:#1f8a70;
  --gray:#6b7a8a;
  --line:#dbe3ec;
  --line-soft:#eaeff5;
  --gothic:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic","YuGothic","Meiryo",system-ui,sans-serif;
}
*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; font-family:var(--gothic); color:var(--ink);
  background:linear-gradient(180deg,#eef2f7 0%, var(--bg) 40%);
  display:flex; justify-content:center; -webkit-font-smoothing:antialiased;
  line-height:1.8;
}
.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }
.app{ width:100%; max-width:680px; padding:22px 18px 56px; }
.app.wide{ max-width:1000px; }
.app.mid{ max-width:780px; }

/* ---- 見出し・導入 ---- */
.demo-badge{
  display:inline-block; font-size:11px; font-weight:700; letter-spacing:.06em;
  color:#8a4a1f; background:#fdf3e6; border:1px solid #ecd3ae;
  border-radius:999px; padding:5px 12px; margin-bottom:14px;
}
.brand{ font-size:11px; letter-spacing:.22em; color:var(--ink-faint); margin:0; }
h1{ font-size:24px; line-height:1.55; letter-spacing:.02em; margin:10px 0 0; font-weight:700; color:var(--navy-deep); }
h1 .em{ color:var(--pen); }
.lead{ font-size:13.5px; color:var(--ink-soft); line-height:1.95; margin:14px 0 0; }
.lead b{ color:var(--ink); }
.meta-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top:14px; }
.chip{ font-size:11px; color:var(--ink-soft); background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:5px 12px; }

/* ---- カード・節 ---- */
.card{ background:var(--paper); border:1.5px solid var(--line); border-radius:16px; padding:18px 18px 16px; margin-top:18px; }
.card > h2, .sec-h{ font-size:13px; letter-spacing:.05em; color:var(--ink-soft); margin:0 0 10px; font-weight:700; }
.sec-h .n{ display:inline-block; min-width:20px; height:20px; line-height:20px; text-align:center; border-radius:6px;
  background:var(--navy); color:#fff; font-size:11px; margin-right:8px; font-variant-numeric:tabular-nums; }
.card p{ font-size:13px; color:var(--ink-soft); line-height:1.9; margin:6px 0 0; }
.card p b{ color:var(--ink); }
.note{ font-size:11.5px; color:var(--ink-faint); line-height:1.85; margin-top:8px; }
.hr{ border:0; border-top:1px dashed var(--line); margin:16px 0; }

/* ---- ボタン ---- */
.btn{
  font:inherit; font-size:13.5px; font-weight:700; cursor:pointer;
  border:1.5px solid var(--line); background:var(--paper); color:var(--ink);
  border-radius:999px; padding:11px 20px; min-height:44px;
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  transition:border-color .12s, background .12s, transform .06s; text-decoration:none;
}
.btn:hover{ border-color:var(--sky); color:var(--navy); }
.btn:active{ transform:translateY(1px); }
.btn:disabled{ opacity:.45; cursor:default; }
.btn.primary{
  color:#fff; border-color:transparent;
  background:linear-gradient(180deg,#2c4d78,var(--navy-deep));
  box-shadow:0 4px 10px rgba(21,44,74,.24);
}
.btn.primary:hover{ color:#fff; }
.btn.small{ font-size:12px; padding:8px 14px; min-height:36px; }
.btn svg{ width:15px; height:15px; flex:none; }
.btnrow{ display:flex; flex-wrap:wrap; gap:9px; margin-top:14px; }

/* ---- ステッパー・進捗（回答画面） ---- */
.stepper{ display:flex; gap:2px; align-items:center; flex-wrap:wrap; margin-bottom:8px; }
.stp{ display:inline-flex; align-items:center; gap:6px; font-size:11px; font-weight:700; color:#a4b0bd; padding:3px 9px; border-radius:999px; }
.stp .dot{ width:7px; height:7px; border-radius:50%; background:#cdd6e0; flex:none; }
.stp.done{ color:var(--ok); }
.stp.done .dot{ background:var(--ok); }
.stp.cur{ color:var(--navy-deep); background:#e6edf5; }
.stp.cur .dot{ background:var(--navy); }
.stpar{ color:#cfd8e2; font-size:10px; }
.remain{ font-size:11.5px; color:var(--ink-faint); margin:0 0 10px; }
.remain b{ color:var(--navy); font-variant-numeric:tabular-nums; }
.wcard{ background:var(--paper); border:1.5px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 8px 22px rgba(30,58,95,.07); }
.pbar{ height:5px; background:#e8edf3; }
.pbar i{ display:block; height:100%; background:linear-gradient(90deg,var(--navy),var(--sky)); transition:width .3s ease; }
.win{ padding:22px 22px 20px; animation:rise .22s ease; }
@keyframes rise{ from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
.win .sec{ font-size:11px; font-weight:700; letter-spacing:.06em; color:var(--ink-faint); }
.qt{ font-size:18px; font-weight:700; line-height:1.6; margin:6px 0 4px; color:var(--navy-deep); }
.qt .opt{ font-size:11px; color:var(--ink-faint); font-weight:600; margin-left:8px; white-space:nowrap; }
.qnote{ font-size:12.5px; color:var(--ink-soft); margin:2px 0 12px; line-height:1.8; }
.sub-q{ margin-top:16px; padding-top:14px; border-top:1px dashed var(--line); }
.sub-q .qt{ font-size:14.5px; margin-top:0; }

/* 選択肢（タップ領域 44px 以上） */
.opts{ display:flex; flex-direction:column; gap:9px; }
.opts.two{ display:grid; grid-template-columns:1fr 1fr; gap:9px; }
.opts label{
  display:flex; align-items:center; gap:11px; min-height:48px;
  border:1.5px solid var(--line); border-radius:12px; background:#fff;
  padding:11px 15px; font-size:14px; font-weight:600; cursor:pointer;
  user-select:none; transition:border-color .12s, background .12s, transform .06s; line-height:1.6;
}
.opts label:hover{ border-color:#a9c2d6; background:#fbfdff; }
.opts label:active{ transform:scale(.995); }
.opts input{ accent-color:var(--navy); width:18px; height:18px; flex:none; }
.opts label.on{ border-color:var(--navy); background:#eef3f8; box-shadow:inset 0 0 0 1px var(--navy); }
.excl-note{ font-size:11.5px; color:var(--ink-faint); margin-top:8px; }

/* チップ選択（want） */
.chips{ display:flex; flex-wrap:wrap; gap:8px; }
.chips button{
  font:inherit; font-size:13.5px; font-weight:600; cursor:pointer; min-height:44px;
  border:1.5px solid var(--line); border-radius:999px; background:#fff; color:var(--ink);
  padding:10px 16px; transition:border-color .12s, background .12s;
}
.chips button:hover{ border-color:#a9c2d6; background:#fbfdff; }
.chips button.on{ border-color:var(--navy); background:#eef3f8; box-shadow:inset 0 0 0 1px var(--navy); }
.chips button.own{ border-style:dashed; }

input[type=text], textarea, select{
  width:100%; border:1.5px solid var(--line); border-radius:11px; padding:11px 13px;
  font:inherit; font-size:14px; background:#fff; color:var(--ink); min-height:44px;
}
input[type=text]:focus, textarea:focus, select:focus{ outline:none; border-color:var(--sky); }
textarea{ min-height:82px; resize:vertical; line-height:1.8; }
label.fl{ display:block; font-size:12px; font-weight:700; color:var(--ink-soft); margin:12px 0 5px; }

.wnav{ display:flex; gap:10px; margin-top:20px; align-items:center; }
.wnav .btn{ flex:1; }
.wnav .btn.back{ flex:0 0 auto; min-width:96px; }
.err{ display:none; font-size:12.5px; color:var(--pen); font-weight:700; margin-top:12px; }
.err.on{ display:block; }

/* ---- 原因の層・仕分けのチップ ---- */
.nb{
  display:inline-flex; align-items:center; justify-content:center; gap:0;
  min-width:26px; height:26px; padding:0 7px; border-radius:8px;
  border:1.5px solid var(--navy); color:var(--navy); background:#fff;
  font-size:13px; font-weight:700; flex:none; line-height:1;
}
.nb.f{ border-style:dashed; font-size:11px; padding:0 9px; }
.layer-row{ display:flex; gap:11px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line-soft); }
.layer-row:first-of-type{ border-top:0; }
.layer-row .lt{ font-size:14px; font-weight:700; color:var(--navy-deep); }
.layer-row .lm{ font-size:12.5px; color:var(--ink-soft); line-height:1.85; margin-top:3px; }

.sortchip{
  display:inline-flex; align-items:center; gap:7px; font-size:12.5px; font-weight:700;
  border-radius:999px; padding:5px 13px; border:1.5px solid; white-space:nowrap;
}
.sortchip .sq{ width:9px; height:9px; border-radius:2px; flex:none; }
.sort-row{ display:flex; gap:11px; align-items:flex-start; padding:12px 0; border-top:1px solid var(--line-soft); }
.sort-row:first-of-type{ border-top:0; }
.sort-row .sm{ font-size:12.5px; color:var(--ink-soft); line-height:1.85; margin-top:5px; }

/* ---- 表（狭い画面ではカード化） ---- */
table.t{ width:100%; border-collapse:collapse; font-size:12.5px; }
table.t th, table.t td{ text-align:left; padding:9px 10px; border-bottom:1px solid var(--line-soft); vertical-align:top; line-height:1.7; }
table.t th{ font-size:11px; color:var(--ink-soft); font-weight:700; border-bottom:1.5px solid var(--line); white-space:nowrap; }
table.t td.n, table.t th.n{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }

/* ---- 横棒 ---- */
.bars{ display:flex; flex-direction:column; gap:9px; }
.bar{ display:grid; grid-template-columns:134px 1fr 80px; gap:10px; align-items:center; font-size:12.5px; }
.bar .bl{ color:var(--ink); font-weight:600; display:flex; align-items:center; gap:7px; }
.bar .bt{ background:#edf1f6; border-radius:5px; height:16px; overflow:hidden; }
.bar .bt i{ display:block; height:100%; border-radius:5px; background:var(--navy); }
.bar .bv{ text-align:right; color:var(--ink-soft); font-variant-numeric:tabular-nums; font-size:12px; }

/* ---- 見出し内の統計 ---- */
.stats{ display:flex; flex-wrap:wrap; gap:8px 20px; margin-top:10px; }
.stat{ font-size:12px; color:var(--ink-soft); }
.stat b{ font-size:19px; color:var(--navy-deep); font-variant-numeric:tabular-nums; margin-right:3px; font-weight:700; }

/* ---- フッター ---- */
footer{ margin-top:28px; border-top:1px dashed var(--line); padding-top:14px; font-size:10.5px; color:var(--ink-faint); line-height:1.9; }
footer a{ color:var(--ink-soft); }
.fnav{ display:flex; flex-wrap:wrap; gap:10px; margin-bottom:8px; }
.fnav a{ font-size:11px; color:var(--sky); text-decoration:none; border-bottom:1px solid #cfdbe7; }
.fnav a.cur{ color:var(--ink-faint); border-bottom-color:transparent; }

/* ---- 汎用 ---- */
.mt0{ margin-top:0; } .mt8{ margin-top:8px; } .mt16{ margin-top:16px; } .mt24{ margin-top:24px; }
.muted{ color:var(--ink-soft); }
.tiny{ font-size:11px; color:var(--ink-faint); }
.svgwrap svg{ display:block; width:100%; height:auto; }
.only-narrow, svg.only-narrow{ display:none; }

@media (max-width:640px){
  h1{ font-size:19px; }
  .app{ padding:18px 14px 48px; }
  .win{ padding:18px 15px 18px; }
  .qt{ font-size:16.5px; }
  .qt .opt{ display:block; margin-left:0; margin-top:2px; }
  .opts.two{ grid-template-columns:1fr; }
  .bar{ grid-template-columns:98px 1fr 66px; gap:8px; font-size:11.5px; }
  .only-narrow, svg.only-narrow{ display:block; }
  .only-wide, svg.only-wide{ display:none; }
  /* 表はカード化（横スクロールにしない） */
  table.t.stack thead{ display:none; }
  table.t.stack tr{ display:block; border:1.5px solid var(--line); border-radius:12px; padding:10px 12px; margin-bottom:10px; background:#fff; }
  table.t.stack td{ display:flex; gap:10px; border:0; padding:4px 0; justify-content:space-between; }
  table.t.stack td::before{ content:attr(data-l); font-size:11px; color:var(--ink-faint); font-weight:700; flex:none; }
  table.t.stack td.n{ text-align:right; }
  .wnav{ flex-direction:column-reverse; }
  .wnav .btn{ width:100%; }
}