/* 議会AI — 高齢の議員でも迷わず使えることを最優先にした設計
   ・本文18px以上／ボタン高さ64px以上
   ・1画面につき1つの作業
   ・色だけに意味を持たせない（必ず文字を添える） */

:root{
  --bg:#F4F1EC;
  --surface:#FFFFFF;
  --ink:#12263A;
  --ink-soft:#53616F;
  --line:#DDD6CB;
  --accent:#A8813C;
  --link:#1F4E79;
  --danger:#B3261E;
  --ok:#1E6B4F;
  --radius:14px;
  --shadow:0 2px 0 rgba(18,38,58,.06), 0 10px 30px rgba(18,38,58,.07);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:"Hiragino Kaku Gothic ProN","Hiragino Sans","Yu Gothic Medium","Yu Gothic",Meiryo,sans-serif;
  font-size:18px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
}
.hidden{display:none !important}
button{font-family:inherit}

/* ══ ブランド ══ */
.brand{text-align:center;margin-bottom:34px}
.brand-mark{
  display:inline-block;
  font-size:38px;font-weight:800;letter-spacing:-.03em;
  color:var(--ink);
  border-bottom:6px solid var(--accent);
  padding-bottom:4px;line-height:1.1;
}
.brand-mark.sm{font-size:26px;border-bottom-width:4px}
.brand-sub{margin:12px 0 0;font-size:15px;color:var(--ink-soft);letter-spacing:.04em}

/* ══ ゲート（登録・ログイン） ══ */
.gate{min-height:100vh;display:flex;align-items:flex-start;justify-content:center;padding:48px 20px 80px}
.gate-box{
  width:100%;max-width:560px;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow);padding:44px 38px 38px;
}
.gate-title{font-size:32px;font-weight:800;letter-spacing:-.02em;line-height:1.35;margin:0 0 14px}
.gate-lead{margin:0 0 30px;color:var(--ink-soft);font-size:17px}
.gate-note{margin:20px 0 0;font-size:14px;line-height:1.7;color:var(--ink-soft);background:#F7F5F1;border-radius:10px;padding:14px 16px}

.fld{display:block;margin-bottom:24px}
.fld-label{display:block;font-weight:800;font-size:17px;margin-bottom:8px;letter-spacing:.01em}
.opt{
  display:inline-block;margin-left:10px;font-size:13px;font-weight:700;
  color:var(--ink-soft);background:#EFEBE3;border-radius:99px;padding:2px 10px;vertical-align:2px;
}
.fld-hint{display:block;margin-top:8px;font-size:14px;color:var(--ink-soft);line-height:1.6}

input[type=text],input[type=password],select,textarea{
  width:100%;padding:16px 16px;font-size:19px;font-family:inherit;
  border:2px solid var(--line);border-radius:10px;background:#FCFBF9;color:var(--ink);
}
input:focus,select:focus,textarea:focus{outline:3px solid #B9D4EE;border-color:var(--link)}
select{appearance:none;background-image:linear-gradient(45deg,transparent 50%,var(--ink) 50%),linear-gradient(135deg,var(--ink) 50%,transparent 50%);background-position:calc(100% - 22px) 26px,calc(100% - 15px) 26px;background-size:7px 7px;background-repeat:no-repeat}
.bigin{font-size:20px}
.bigta{font-size:19px;line-height:1.8;resize:vertical;min-height:180px}

/* ══ ボタン ══ */
.btn{
  display:block;width:100%;border:none;border-radius:12px;cursor:pointer;
  font-weight:800;letter-spacing:.02em;transition:transform .08s,filter .15s;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{filter:brightness(1.15)}
.btn-primary:disabled{background:#9AA5AE;cursor:not-allowed}
.btn-ghost{background:#fff;color:var(--ink);border:2px solid var(--ink)}
.btn-xl{min-height:64px;font-size:21px}
.btn-xxl{min-height:76px;font-size:24px}
.linkbtn{
  display:block;width:100%;margin-top:18px;background:none;border:none;cursor:pointer;
  color:var(--link);font-size:16px;font-weight:700;text-decoration:underline;padding:10px;
}
.linkbtn.sm{font-size:15px;margin-top:8px;text-align:left;padding:6px 0}
.err{color:var(--danger);font-weight:700;font-size:16px;margin:0 0 14px;min-height:1px}

/* ══ チップ（分野選択） ══ */
.chips{display:flex;flex-wrap:wrap;gap:10px}
.chip{
  background:#fff;border:2px solid var(--line);border-radius:99px;
  padding:11px 18px;font-size:16px;font-weight:700;cursor:pointer;color:var(--ink);
  line-height:1.4;
}
.chip:hover{border-color:var(--ink-soft)}
.chip[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.chips.big .chip{font-size:17px;padding:14px 20px}

/* ══ レイアウト ══ */
.layout{display:flex;min-height:100vh}
.sidebar{
  width:288px;flex:0 0 288px;background:var(--ink);color:#fff;
  display:flex;flex-direction:column;padding:26px 20px;
}
.side-brand{margin-bottom:30px;padding-left:6px}
.sidebar .brand-mark{color:#fff;border-bottom-color:var(--accent)}
.side-nav{display:flex;flex-direction:column;gap:8px;flex:1}
.navbtn{
  display:flex;align-items:center;gap:14px;width:100%;
  background:transparent;border:none;border-radius:11px;cursor:pointer;
  padding:16px 14px;color:#D5DEE6;font-size:17px;font-weight:700;text-align:left;line-height:1.45;
}
.navbtn:hover{background:rgba(255,255,255,.09);color:#fff}
.navbtn[aria-current=true]{background:#fff;color:var(--ink)}
.navbtn .ico{font-size:22px;flex:0 0 auto}
.side-foot{border-top:1px solid rgba(255,255,255,.18);padding-top:18px;margin-top:18px}
.side-user-name{font-weight:800;font-size:17px}
.side-user-city{font-size:14px;color:#AEBDCB;margin-bottom:10px}
.sidebar .linkbtn{color:#BBD3E8}

.main{flex:1;min-width:0;padding:40px 44px 100px;max-width:940px}
.page-head{margin-bottom:26px}
.page-head h1{font-size:32px;font-weight:800;letter-spacing:-.02em;margin:0 0 8px}
.page-hint{margin:0;color:var(--ink-soft);font-size:16px}

/* ══ カード ══ */
.card{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:28px 30px;margin-bottom:20px;box-shadow:var(--shadow);
}
.step{display:flex;align-items:center;gap:13px;font-size:21px;font-weight:800;margin:0 0 16px;letter-spacing:-.01em}
.step-no{
  flex:0 0 auto;width:34px;height:34px;border-radius:50%;background:var(--ink);color:#fff;
  display:grid;place-items:center;font-size:17px;font-weight:800;
}
.step-hint{margin:-6px 0 16px;color:var(--ink-soft);font-size:15px;line-height:1.7}

.bigcheck{display:flex;align-items:center;gap:14px;cursor:pointer;font-size:19px;font-weight:700;padding:6px 0}
.bigcheck input{width:28px;height:28px;accent-color:var(--ink);cursor:pointer}

/* ══ 口調 ══ */
.tones{display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
.tonebtn{
  background:#fff;border:2px solid var(--line);border-radius:11px;cursor:pointer;
  padding:14px 6px;font-size:15px;font-weight:800;color:var(--ink);line-height:1.4;
}
.tonebtn .tnum{display:block;font-size:13px;color:var(--ink-soft);font-weight:700;margin-bottom:4px}
.tonebtn[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}
.tonebtn[aria-pressed=true] .tnum{color:#C7D5E1}
.tone-desc{margin:16px 0 0;padding:14px 16px;background:#F7F5F1;border-radius:10px;font-size:16px;color:var(--ink-soft)}

.counts{display:flex;gap:10px}
.countbtn{
  flex:1;background:#fff;border:2px solid var(--line);border-radius:11px;cursor:pointer;
  padding:16px 8px;font-size:18px;font-weight:800;color:var(--ink);
}
.countbtn[aria-pressed=true]{background:var(--ink);color:#fff;border-color:var(--ink)}

.genhint{text-align:center;color:var(--ink-soft);font-size:15px;margin:14px 0 0}

/* ══ 進捗 ══ */
.progress{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px 26px;margin-bottom:24px}
.prog-head{display:flex;align-items:center;gap:12px;font-weight:800;font-size:18px}
.spinner{
  width:20px;height:20px;flex:0 0 auto;border:3px solid #DCE3EA;border-top-color:var(--ink);
  border-radius:50%;animation:spin .8s linear infinite;
}
@keyframes spin{to{transform:rotate(360deg)}}
.prog-list{margin:14px 0 0;padding-left:22px;color:var(--ink-soft);font-size:15px;max-height:220px;overflow:auto}
.prog-list li{margin-bottom:5px;line-height:1.6}
.progress.done .spinner{display:none}
.progress.done .prog-head{color:var(--ok)}

/* ══ 原稿 ══ */
.manuscript{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);
  padding:48px 52px;box-shadow:var(--shadow);font-size:19px;line-height:2.0;
  min-height:60px;
}
.manuscript:empty{display:none}
.manuscript h1{font-size:27px;font-weight:800;margin:0 0 22px;padding-bottom:12px;border-bottom:3px solid var(--ink);letter-spacing:-.01em}
.manuscript h2{font-size:23px;font-weight:800;margin:38px 0 14px;padding-left:14px;border-left:6px solid var(--accent);letter-spacing:-.01em}
.manuscript h3{font-size:20px;font-weight:800;margin:28px 0 10px;color:var(--ink)}
.manuscript p{margin:0 0 16px}
.manuscript ul,.manuscript ol{margin:0 0 18px;padding-left:26px}
.manuscript li{margin-bottom:8px}
.manuscript blockquote{
  margin:14px 0 20px;padding:16px 20px;background:#F5F7F9;
  border-left:5px solid #9BB0C2;border-radius:0 10px 10px 0;color:#2C3E50;font-size:17.5px;line-height:1.85;
}
.manuscript blockquote strong{color:var(--ink)}
.manuscript strong{font-weight:800}
.manuscript hr{border:none;border-top:1px solid var(--line);margin:30px 0}
.manuscript a{color:var(--link)}
.manuscript .warn{background:#FFF4E5;border-left-color:#D98324;color:#7A4A0F;font-weight:700}

.sources{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:30px 34px;margin-top:22px}
.sources h2{font-size:20px;font-weight:800;margin:0 0 6px}
.sources-note{margin:0 0 16px;font-size:14.5px;color:var(--ink-soft)}
.sources ol{margin:0;padding-left:24px;font-size:16px;line-height:1.8}
.sources li{margin-bottom:12px;word-break:break-word}
.sources a{color:var(--link)}
.sources .src-title{font-weight:700;display:block}
.sources .src-url{font-size:13.5px;color:var(--ink-soft)}

.result-actions{display:flex;gap:14px;margin-top:26px}
.result-actions .btn{flex:1}

.domlist{margin:0;padding-left:22px;font-size:16px;color:var(--ink-soft);line-height:1.9}
.domlist code{background:#F1EEE8;padding:2px 8px;border-radius:5px;font-size:15px;color:var(--ink)}

.kv{display:grid;grid-template-columns:180px 1fr;gap:12px 20px;font-size:17px}
.kv dt{font-weight:800}
.kv dd{margin:0;color:var(--ink-soft)}

/* ══ スマホ ══ */
@media(max-width:820px){
  body{font-size:17px}
  .layout{flex-direction:column}
  .sidebar{width:100%;flex:none;flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px;padding:14px 16px}
  .side-brand{margin:0 auto 0 0}
  .side-nav{flex-direction:row;flex-wrap:wrap;flex:1 1 100%;gap:6px}
  .navbtn{width:auto;flex:1 1 auto;justify-content:center;padding:12px 10px;font-size:14.5px;gap:7px}
  .navbtn .ico{font-size:18px}
  .side-foot{flex:1 1 100%;display:flex;align-items:center;gap:16px;margin-top:6px;padding-top:12px}
  .side-user-city{margin:0}
  .sidebar .linkbtn{width:auto;margin:0}
  .main{padding:24px 16px 80px}
  .card{padding:22px 18px}
  .manuscript{padding:28px 20px;font-size:18px}
  .tones{grid-template-columns:repeat(2,1fr)}
  .result-actions{flex-direction:column}
  .kv{grid-template-columns:1fr;gap:4px 0}
  .kv dd{margin-bottom:10px}
}

/* ══ 印刷（A4／読み上げ用） ══ */
@media print{
  @page{size:A4;margin:20mm 18mm}
  body{background:#fff;font-size:12.5pt;line-height:1.9;
       font-family:"Hiragino Mincho ProN","Yu Mincho",serif}
  .sidebar,.noprint,.progress,.page-head{display:none !important}
  .layout{display:block}
  .main{padding:0;max-width:none}
  .manuscript,.sources{border:none;box-shadow:none;padding:0;background:none;font-size:12.5pt;border-radius:0}
  .sources{margin-top:16mm;border-top:1pt solid #000;padding-top:6mm}
  .manuscript h1{font-size:17pt;border-bottom:1.5pt solid #000;page-break-after:avoid}
  .manuscript h2{font-size:14pt;border-left:3pt solid #000;page-break-after:avoid;margin-top:9mm}
  .manuscript h3{font-size:12.5pt;page-break-after:avoid;margin-top:6mm}
  .manuscript blockquote{background:none;border-left:2pt solid #999;padding:2mm 0 2mm 5mm;font-size:11.5pt}
  .manuscript li,.manuscript p,.manuscript blockquote{page-break-inside:avoid}
  .sources a{text-decoration:none;color:#000}
  .sources .src-url{font-size:9pt}
}