/* jinken-case 共通スタイル
   DADS準拠: 本文16px以上 / テキスト4.5:1 / 非テキスト3:1 / 色だけに情報を載せない */
:root{
  --ink:#16181a;
  --ink-sub:#3d4348;   /* 白背景で 4.5:1 以上 */
  --line:#767c82;      /* 白背景で 3:1 以上 */
  --bg:#ffffff;
  --panel:#f2f4f6;
  --key:#0017c1;       /* DADS ブルー */
  --key-hover:#000f8a;
  --key-active:#000a5c;
  --key-pale:#e8ebff;
  --key-pale2:#d5dbff;
  --bar:#3d4348;       /* 分布バー: 全選択肢で同一色 */
  --warn-bg:#fff4e5;
  --warn-line:#8a5a00; /* 白背景で 4.5:1 以上 */
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink);
  font-family:"Hiragino Sans","Noto Sans JP",system-ui,sans-serif;
  font-size:18px; line-height:1.7;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:56rem;margin:0 auto;padding:1.5rem 1.25rem 3rem}
/* 固定表示の不使用宣言バーが、共通フッター(site-bar.js)を覆わないようにする */
body:has(.standing-notice){padding-bottom:4rem}

h1{font-size:clamp(24px,3.4vw,34px);line-height:1.4;margin:0 0 1rem}
h2{font-size:clamp(20px,2.6vw,26px);line-height:1.4;margin:2rem 0 .75rem}
h3{font-size:clamp(18px,2.2vw,21px);line-height:1.4;margin:1.5rem 0 .5rem}
p{margin:0 0 1rem}
.lead{font-size:clamp(19px,2.2vw,24px);line-height:1.75}

a{color:var(--key);text-underline-offset:3px}
a:hover{color:var(--key-hover)}
a:focus-visible{outline:3px solid var(--key);outline-offset:2px}

/* ---- ヘッダー / ステップ ---- */
header.app{border-bottom:2px solid var(--line);padding-bottom:.75rem;margin-bottom:1.5rem}
.toprow{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:baseline;justify-content:space-between;margin-bottom:.5rem}
.deck-title{font-size:16px;font-weight:700;margin:0}
.toplinks{font-size:16px}
.steps{display:flex;flex-wrap:wrap;gap:.5rem;list-style:none;margin:0;padding:0;font-size:16px}
.steps li{color:var(--ink-sub)}
.steps li[aria-current="step"]{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:4px}
.steps li::after{content:"／";margin-left:.5rem;color:var(--line)}
.steps li:last-child::after{content:""}

/* ---- ブロック ---- */
.facts{background:var(--panel);border-left:6px solid var(--line);padding:1.25rem 1.5rem;margin:0 0 1.5rem;border-radius:4px}
.facts > :last-child{margin-bottom:0}
.quote{border:2px solid var(--line);border-radius:8px;padding:1.25rem 1.5rem;margin:0 0 1.5rem;font-size:clamp(19px,2.4vw,25px);line-height:1.8}
.quote p{margin:0 0 .75rem}
.quote p:last-child{margin-bottom:0}
.attr{font-size:16px;color:var(--ink-sub);margin-top:1rem}
.note{font-size:16px;color:var(--ink-sub);border:1px dashed var(--line);border-radius:4px;padding:.75rem 1rem;margin:1.5rem 0 0}
.warn{font-size:16px;color:var(--ink);background:var(--warn-bg);border:2px solid var(--warn-line);border-radius:4px;padding:.75rem 1rem;margin:1rem 0}
.warn strong{color:var(--warn-line)}

/* ---- 投票 ---- */
.votes{display:grid;gap:1rem;margin:0 0 1.5rem}
@media(min-width:44rem){.votes.n2{grid-template-columns:repeat(2,1fr)}
  .votes.n3{grid-template-columns:repeat(3,1fr)}
  .votes.n4{grid-template-columns:repeat(2,1fr)}}
.vote-btn{
  display:flex;flex-direction:column;gap:.35rem;align-items:flex-start;
  width:100%;text-align:left;cursor:pointer;
  background:var(--bg);color:var(--ink);
  border:2px solid var(--key);border-radius:8px;
  padding:1rem 1.25rem;font:inherit;
}
.vote-btn:hover{background:var(--key-pale)}
.vote-btn:active{background:var(--key-pale2)}
.vote-btn:focus-visible{outline:3px solid var(--key);outline-offset:3px}
.vote-btn .num{font-size:16px;font-weight:700;color:var(--key)}
.vote-btn .label{font-size:clamp(18px,2.1vw,22px);font-weight:700;line-height:1.4}
.vote-btn .count{font-size:16px;color:var(--ink-sub)}

/* ---- 分布: 全バー同色・多数派を強調しない ---- */
.dist{list-style:none;margin:0 0 1.5rem;padding:0;display:grid;gap:1.25rem}
.dist .row-head{display:flex;justify-content:space-between;gap:1rem;font-size:clamp(17px,2vw,20px);line-height:1.4}
.dist .row-head .name{font-weight:700}
.dist .track{background:var(--panel);border:1px solid var(--line);border-radius:4px;height:2rem;margin-top:.4rem;overflow:hidden}
.dist .fill{background:var(--bar);height:100%;width:0;transition:width .5s ease}
.curtain{background:var(--panel);border:2px dashed var(--line);border-radius:8px;padding:2rem 1.5rem;text-align:center;margin:0 0 1.5rem}
.curtain p{font-size:clamp(18px,2.1vw,22px)}

/* ---- ボタン ---- */
.btnrow{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:2rem}
button.act,a.act{
  font:inherit;font-size:18px;font-weight:700;cursor:pointer;text-decoration:none;display:inline-block;
  border-radius:8px;padding:.7rem 1.4rem;border:2px solid var(--key);
}
button.act:focus-visible,a.act:focus-visible{outline:3px solid var(--key);outline-offset:3px}
.primary{background:var(--key);color:#fff}
.primary:hover{background:var(--key-hover);color:#fff}
.primary:active{background:var(--key-active)}
.secondary{background:var(--bg);color:var(--key)}
.secondary:hover{background:var(--key-pale)}
.secondary:active{background:var(--key-pale2)}
button.act[disabled]{border-color:var(--line);background:var(--panel);color:var(--ink-sub);cursor:not-allowed}

/* ---- 固定フッター（不使用宣言の短縮版） ---- */
.standing-notice{
  position:fixed;left:0;right:0;bottom:0;z-index:10;
  background:var(--bg);border-top:2px solid var(--line);
  font-size:16px;color:var(--ink-sub);
  padding:.6rem 1.25rem;text-align:center;
}

/* ---- 編集モード ---- */
.field{margin:0 0 1.5rem}
.field > label,.field > .lab{display:block;font-weight:700;font-size:17px;margin-bottom:.35rem}
.field .help{font-size:16px;color:var(--ink-sub);margin:0 0 .5rem}
input[type="text"],textarea,select{
  width:100%;font:inherit;font-size:17px;line-height:1.6;color:var(--ink);background:var(--bg);
  border:2px solid var(--line);border-radius:6px;padding:.6rem .8rem;
}
input[type="text"]:focus-visible,textarea:focus-visible,select:focus-visible{outline:3px solid var(--key);outline-offset:2px;border-color:var(--key)}
textarea{min-height:6.5rem;resize:vertical}
.row{display:flex;gap:.5rem;align-items:flex-start;margin-bottom:.5rem}
.row textarea,.row input{flex:1}
.mini{font:inherit;font-size:16px;cursor:pointer;border:2px solid var(--line);background:var(--bg);color:var(--ink);border-radius:6px;padding:.5rem .7rem;white-space:nowrap}
.mini:hover{background:var(--panel)}
.mini:focus-visible{outline:3px solid var(--key);outline-offset:2px}
fieldset{border:2px solid var(--line);border-radius:8px;padding:1rem 1.25rem;margin:0 0 2rem}
legend{font-weight:700;font-size:18px;padding:0 .4rem}
.check{display:flex;gap:.6rem;align-items:flex-start;margin-bottom:.8rem;font-size:17px;line-height:1.6}
.check input{width:1.4rem;height:1.4rem;margin-top:.15rem;flex:none;accent-color:var(--key)}
dialog.terms{border:2px solid var(--key);border-radius:10px;padding:1.5rem;max-width:44rem;color:var(--ink)}
dialog.terms::backdrop{background:rgba(0,0,0,.55)}

.hidden{display:none}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}