/* 議会AI — デザインシステム
   方針：SaaSとしての精度（余白の統一・線の細さ・階層の明確さ）を保ちつつ、
        本文17px以上／操作対象48px以上を守り、高齢の議員でも迷わない密度に留める。 */

/* ブランド：墨（本文）・紺（格式）・朱（校正の朱入れ＝出典と要確認）
   朱を「行動」ではなく「確かめるべき箇所」の色に固定しているのが、この商品の思想 */
:root{
  --canvas:#EFF1F4;
  --surface:#FFFFFF;
  --surface-2:#F5F7F9;
  --ink:#152238;
  --ink-2:#4A5768;
  --ink-3:#7C889A;
  --line:#DFE4EA;
  --line-2:#EDF0F4;
  --kon:#123A6B;
  --kon-2:#1D5A9E;
  --accent:#123A6B;
  --accent-soft:#E8EFF7;
  --shu:#C0562F;
  --shu-soft:#FBF0EA;
  --warn:#B45309;
  --warn-soft:#FEF6E7;
  --ok:#0F7A52;
  --danger:#C0271C;

  --r-sm:8px;
  --r:10px;
  --r-lg:14px;
  --sh-1:0 1px 2px rgba(26,26,31,.04);
  --sh-2:0 1px 3px rgba(26,26,31,.04), 0 12px 32px -16px rgba(26,26,31,.10);
  --sh-3:0 30px 70px -30px rgba(26,26,31,.20);
  --cta:linear-gradient(180deg,#1B4B84 0%,#123A6B 100%);
}

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

/* スクロールバーも道具の一部。太い既定のままにしない */
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#DDDFE6;border-radius:99px;border:2.5px solid var(--canvas)}
::-webkit-scrollbar-thumb:hover{background:#AEB8C8}
.sidebar ::-webkit-scrollbar-thumb{background:#DDDFE6;border-color:transparent}

/* 画面の切り替えをふわりと見せる（アプリらしさの核） */
#view-form,#view-outline,#view-result,#view-history,#view-mypage{
  animation:viewin .32s cubic-bezier(.2,.7,.3,1) both;
}
@keyframes viewin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  #view-form,#view-outline,#view-result,#view-history,#view-mypage{animation:none}
}
button{font-family:inherit;color:inherit}
h1,h2,h3{letter-spacing:-.03em;font-weight:800;margin:0}

/* すべてのアイコンは線幅をそろえる。塗りは持たせない。 */
.ic{width:20px;height:20px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.7;
    stroke-linecap:round;stroke-linejoin:round}

/* ══════════ ロゴ ══════════ */
.logo{display:flex;align-items:center;gap:10px}
.logo-tile{
  width:34px;height:34px;border-radius:10px;background:var(--kon);color:#fff;
  display:grid;place-items:center;font-size:17px;font-weight:800;letter-spacing:0;
}
.logo-text{font-size:20px;font-weight:900;letter-spacing:-.05em}
.logo-text .plus{color:var(--shu)}
.sidebar .logo-text .plus,.auth-aside .logo-text .plus{color:#E8A184}
.logo-tag{
  font-size:10px;font-weight:800;letter-spacing:.09em;padding:3px 7px;border-radius:5px;
  background:var(--line-2);color:var(--ink-3);
}
.auth-aside .logo-tile{background:#fff;color:var(--kon)}
.auth-aside .logo-text{color:#fff}
.sidebar .logo-tile{background:var(--kon);color:#fff}
.sidebar .logo-text{color:var(--ink)}

/* ══════════ 認証画面（左ブランド／右フォームの分割） ══════════ */
.auth{display:grid;grid-template-columns:minmax(0,440px) 1fr;min-height:100vh}
.auth-aside{
  color:#fff;padding:44px 44px 40px;display:flex;flex-direction:column;
  background:var(--kon);
}
.auth-claim{
  margin:56px 0 44px;font-size:33px;line-height:1.5;letter-spacing:-.045em;color:#fff;
}
.auth-points{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:24px;flex:1}
.auth-points li{display:flex;gap:14px;align-items:flex-start}
.auth-points .ic{width:22px;height:22px;margin-top:4px;color:#8FB6E0}
.auth-points b{display:block;font-size:16px;font-weight:800;letter-spacing:-.02em;color:#fff;margin-bottom:2px}
.auth-points span{display:block;font-size:14px;line-height:1.75;color:rgba(255,255,255,.82)}
.auth-foot{margin:36px 0 0;font-size:12.5px;color:rgba(255,255,255,.66);letter-spacing:.01em}

.auth-main{display:flex;align-items:flex-start;justify-content:center;padding:56px 32px 96px;overflow:auto}
.auth-card{width:100%;max-width:600px}
.auth-card.narrow{max-width:420px;padding-top:60px}
.eyebrow{
  margin:0 0 12px;font-size:11.5px;font-weight:800;letter-spacing:.14em;
  color:var(--accent);text-transform:uppercase;
}
.auth-title{font-size:33px;line-height:1.45;margin-bottom:12px}
.auth-lead{margin:0 0 34px;color:var(--ink-3);font-size:15.5px;line-height:1.8}

/* ══════════ フォーム部品 ══════════ */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:0 18px}
.fld{display:block;margin-bottom:22px}
.fld-label{display:block;font-size:14.5px;font-weight:800;letter-spacing:-.01em;margin-bottom:7px}
.fld-label em{
  font-style:normal;margin-left:7px;font-size:11.5px;font-weight:700;letter-spacing:.02em;
  color:var(--ink-3);background:var(--line-2);padding:2px 7px;border-radius:99px;vertical-align:1.5px;
}
.fld-hint{display:block;margin-top:7px;font-size:13px;line-height:1.7;color:var(--ink-3)}

input[type=text],input[type=password],select,textarea{
  width:100%;min-height:52px;padding:13px 15px;font-size:16.5px;font-family:inherit;line-height:1.6;
  border:1.5px solid var(--line);border-radius:var(--r);background:var(--surface);color:var(--ink);
  transition:border-color .15s,box-shadow .15s;
}
input::placeholder,textarea::placeholder{color:#A5AEBC}
input:hover,textarea:hover,select:hover{border-color:#CDD3DD}
input:focus,select:focus,textarea:focus{
  outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(18,58,107,.16);
}
textarea{min-height:150px;resize:vertical;line-height:1.85}
.selwrap{position:relative;display:block}
select{appearance:none;padding-right:44px;cursor:pointer}
.selchev{position:absolute;right:14px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--ink-3)}

.verified{
  margin:-10px 0 22px;font-size:13.5px;line-height:1.7;color:var(--ok);
  background:#F0FAF5;border:1px solid #CFEBDE;border-radius:var(--r-sm);padding:10px 13px;
}
.verified.neutral{color:var(--ink-3);background:var(--surface-2);border-color:var(--line)}
.verified:empty{display:none}

/* チップ（テキストのみ・絵文字なし） */
.chipwrap{display:flex;flex-wrap:wrap;gap:8px}
.chip{
  border:1.5px solid var(--line);background:var(--surface);border-radius:99px;
  padding:9px 16px;font-size:14.5px;font-weight:700;letter-spacing:-.01em;cursor:pointer;
  transition:border-color .14s,background .14s,color .14s;line-height:1.5;
}
.chip:hover{border-color:#C3CAD6;background:var(--surface-2)}
.chip[aria-pressed=true]{background:var(--kon);border-color:var(--kon);color:#fff}

/* ボタン */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  border:1.5px solid transparent;border-radius:var(--r);cursor:pointer;
  font-size:15.5px;font-weight:800;letter-spacing:-.01em;padding:0 20px;min-height:48px;
  transition:background .15s,border-color .15s,box-shadow .15s,transform .06s;
}
.btn:hover{transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--cta);color:#fff;box-shadow:0 2px 6px -2px rgba(18,58,107,.4)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-primary:disabled{background:#A9B1BF;cursor:not-allowed;box-shadow:none;transform:none}

/* 主役のボタンだけアクセント色。押すべき場所が一目で分かる */
#btn-generate,#btn-outline-go{
  background:var(--cta);
  box-shadow:0 4px 12px -4px rgba(18,58,107,.45);
}
#btn-generate:hover,#btn-outline-go:hover{filter:brightness(1.08)}
#btn-outline-go:disabled{background:#A9B1BF;box-shadow:none;filter:none;transform:none}
.btn-ghost{background:var(--surface);color:var(--ink);border-color:var(--line)}
.btn-ghost:hover{border-color:#C3CAD6;background:var(--surface-2)}
.btn-lg{min-height:54px;font-size:16.5px;padding:0 26px}
.btn-block{width:100%}
.textlink{
  display:block;width:100%;margin-top:16px;background:none;border:none;cursor:pointer;padding:10px;
  color:var(--ink-3);font-size:14px;font-weight:700;
}
.textlink:hover{color:var(--accent)}
.privacy{
  margin:16px 0 0;padding:14px 16px;background:var(--surface-2);border:1px solid var(--line);
  border-radius:var(--r-sm);font-size:12.5px;line-height:1.8;color:var(--ink-3);
}
.privacy b{color:var(--ink-2)}
.err{color:var(--danger);font-weight:700;font-size:14.5px;margin:0 0 14px}
.err:empty{display:none}
.switch-err{
  margin:16px 0 0;padding:13px 16px;background:#FBEDEC;border:1px solid #F2CBc8;
  border-radius:var(--r-sm);font-weight:700;font-size:13.5px;line-height:1.8;
}

/* ══════════ アプリのシェル ══════════ */
.shell{display:flex;min-height:100vh}

.sidebar{
  width:252px;flex:0 0 252px;color:#fff;
  background:
    linear-gradient(180deg,#FFFFFF,#FBFBFC);
  display:flex;flex-direction:column;padding:22px 16px 18px;position:sticky;top:0;height:100vh;
}
.sidebar .logo.side{padding:0 8px;margin-bottom:30px}
.navlabel{
  margin:0 0 8px;padding:0 10px;font-size:10.5px;font-weight:800;letter-spacing:.14em;
  color:var(--ink-3);text-transform:uppercase;
}
.nav{display:flex;flex-direction:column;gap:2px;flex:1}
.navitem{
  position:relative;
  display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;cursor:pointer;
  border-radius:10px;padding:11px 10px;text-align:left;color:var(--ink-2);
  font-size:14.5px;font-weight:700;letter-spacing:-.01em;transition:background .14s,color .14s;
}
.navitem:hover{background:var(--surface-2);color:var(--ink)}
a.navitem{text-decoration:none}
/* 選択中は白のカードにして、明るい青の面から浮かせる */
.navitem[aria-current=true]{background:var(--accent-soft);color:var(--kon)}
.navitem[aria-current=true] .ic{opacity:1}
/* 選択中の項目にアクセントのレール。アプリの現在地表示として効く */
.navitem[aria-current=true]::before{
  content:"";position:absolute;left:-16px;top:10px;bottom:10px;width:3px;
  border-radius:0 3px 3px 0;background:var(--kon);
}
.navitem .ic{width:18px;height:18px;opacity:.9}
.navitem .tablabel{display:none}
.navitem .navsub{
  margin-left:auto;font-size:10.5px;font-weight:800;letter-spacing:.04em;
  color:var(--ink-3);background:var(--line-2);padding:2px 7px;border-radius:6px;
}
.navitem[aria-current=true] .navsub{color:#fff;background:var(--kon)}

.sidefoot{border-top:1px solid var(--line);padding-top:12px;margin-top:12px}
.userbox{
  display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;cursor:pointer;
  border-radius:9px;padding:9px 8px;text-align:left;transition:background .14s;
}
.userbox:hover{background:var(--surface-2)}
.avatar{
  width:34px;height:34px;flex:0 0 auto;border-radius:10px;background:var(--accent-soft);
  display:grid;place-items:center;font-size:14px;font-weight:800;color:var(--kon);
}
.userinfo{min-width:0}
.username{display:block;font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.01em;
          overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.usercity{display:block;font-size:12px;color:var(--ink-3)}
.ghostrow{
  display:flex;align-items:center;gap:9px;width:100%;background:none;border:none;cursor:pointer;
  border-radius:10px;padding:10px;color:var(--ink-3);font-size:13.5px;font-weight:700;
}
.ghostrow:hover{background:var(--surface-2);color:var(--ink)}
.ghostrow .ic{width:17px;height:17px}

/* 種別のプルダウン。スマホでのみ表示（デスクトップは左のメニューで選ぶ） */
.modepick{display:none}
.tabhome{display:none}

/* ══════════ メイン ══════════ */
.main{flex:1;min-width:0;padding:0 40px 0;max-width:920px}

.topbar{
  display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding:38px 0 26px;
}
.topbar h1{font-size:28px;line-height:1.35}
.topbar-hint{margin:8px 0 0;color:var(--ink-3);font-size:14.5px;max-width:56ch}
.muni{
  display:flex;align-items:center;gap:8px;flex:0 0 auto;
  background:var(--surface);border:1px solid var(--line);border-radius:99px;
  padding:8px 15px;font-size:13.5px;font-weight:700;box-shadow:var(--sh-1);
}
.muni .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:0 0 auto}
.muni .sub{color:var(--ink-3);font-weight:700}

/* パネル：カードを積まず、1枚の面をヘアラインで区切る */
.panel{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);
  box-shadow:var(--sh-2);overflow:hidden;
}
.sec{padding:28px 32px;border-bottom:1px solid var(--line-2)}
.sec:last-child{border-bottom:none}
.sec-head{margin-bottom:16px}
.sec-head h2{font-size:17px;letter-spacing:-.02em;display:flex;align-items:center;gap:8px}
.sec-head h2 em{
  font-style:normal;font-size:11px;font-weight:700;letter-spacing:.02em;color:var(--ink-3);
  background:var(--line-2);padding:2px 7px;border-radius:99px;
}
.sec-head p{margin:5px 0 0;font-size:13.5px;color:var(--ink-3);line-height:1.7}

/* 政策分野：28個。縦に積むとスクロールが長くなるので、密なグリッドに畳む */
.fieldgroups{display:flex;flex-direction:column;gap:14px}
.fgroup-label{
  font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--ink-3);margin:0 0 7px;
  display:flex;align-items:center;gap:9px;
}
.fgroup-label::after{content:"";flex:1;height:1px;background:var(--line-2)}
/* 1行に詰めず、幅に応じて自動で列を作る。横に伸びすぎるのも防ぐ */
.fieldgroups .chipwrap{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:5px;
}
.fieldgroups .chip{
  border-radius:7px;padding:8px 10px;font-size:12.5px;text-align:left;line-height:1.4;
  font-feature-settings:"palt";white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.fieldgroups{gap:6px}

/* グループの開閉。既定は畳んでおき、スクロールを短く保つ */
.fgroup.foldable{border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.fgroup-toggle{
  display:flex;align-items:center;gap:10px;width:100%;background:none;border:none;cursor:pointer;
  padding:11px 13px;text-align:left;
}
.fgroup-toggle .fgroup-label{margin:0;flex:1;color:var(--ink)}
.fgroup-toggle .fgroup-label::after{display:none}
.fgroup-n{
  font-family:var(--mono);font-size:11px;font-weight:700;color:var(--ink-3);
  background:var(--surface-2);border:1px solid var(--line);border-radius:99px;padding:1px 8px;
}
.fgroup-chev{width:16px;height:16px;color:var(--ink-3);transition:transform .18s}
.fgroup.open .fgroup-chev{transform:rotate(180deg)}
.fgroup.foldable .chipwrap{display:none;padding:0 13px 13px}
.fgroup.foldable.open .chipwrap{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(126px,1fr));gap:5px;
}
.fgroup.foldable:hover{border-color:#C7D0DC}
.chip.hit{display:block}
.chip.miss{display:none}

/* 分野の検索。28個から探す一番速い道 */
.fsearch{position:relative;margin-bottom:16px}
.fsearch input{min-height:46px;padding-left:44px;font-size:15px}
.fsearch-ic{position:absolute;left:15px;top:50%;transform:translateY(-50%);
            color:var(--ink-3);width:18px;height:18px;pointer-events:none}
.fnone{margin:14px 0 0;font-size:14px;color:var(--ink-3)}

/* 選択後は結果だけを表示して、一覧を畳む */
.picked{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  background:var(--accent-soft);border:1px solid #CBD8E6;border-radius:var(--r);
  padding:14px 16px;
}
.picked-label{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--kon)}
.picked-name{font-size:16px;font-weight:800;letter-spacing:-.01em;flex:1;min-width:0}
.picked-change{
  background:#fff;border:1.5px solid var(--line);border-radius:8px;cursor:pointer;
  padding:8px 14px;font-size:13px;font-weight:800;color:var(--ink);
}
.picked-change:hover{border-color:var(--kon);color:var(--kon)}

/* トグルスイッチ */
.switch{display:flex;align-items:center;gap:13px;cursor:pointer;user-select:none;padding:4px 0}
.switch input{position:absolute;opacity:0;width:0;height:0}
.track{
  width:50px;height:30px;flex:0 0 auto;border-radius:99px;background:#D3D8E1;
  position:relative;transition:background .18s;
}
.knob{
  position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;
  box-shadow:0 1px 3px rgba(11,18,32,.28);transition:transform .18s;
}
.switch input:checked + .track{background:var(--kon)}
.switch input:checked + .track .knob{transform:translateX(20px)}
.switch input:focus-visible + .track{box-shadow:0 0 0 3.5px rgba(30,94,255,.2)}
.switch-label{font-size:15.5px;font-weight:700;letter-spacing:-.01em}

/* サイドバーのナビ（つくる／記録の2ブロック） */
.navwrap{flex:1;min-height:0;overflow-y:auto}
.navwrap>.nav{flex:0 0 auto}
.navlabel-2{margin-top:20px}

/* 構成案を待つ間のスケルトン。無言の空白より「作っている」が伝わる */
.skel{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.skel span{
  display:block;height:62px;border-radius:12px;
  background:linear-gradient(100deg,var(--line-2) 30%,#F6F8FB 45%,var(--line-2) 60%);
  background-size:300% 100%;animation:shimmer 1.5s ease-in-out infinite;
}
.skel span:nth-child(2){animation-delay:.12s}
.skel span:nth-child(3){animation-delay:.24s}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:-100% 0}}

/* 残り本数の表示 */
.quotanote{font-size:13px;font-weight:700;color:var(--ink-3);line-height:1.5}
.quotanote.warn{color:var(--warn)}
.quotanote.out{color:var(--danger)}
.actionbar-inner .spacer{flex:1}

/* 履歴 */
.hlist{list-style:none;margin:0;padding:0}
.hitem{
  display:flex;align-items:flex-start;gap:14px;padding:16px 0;border-bottom:1px solid var(--line-2);
}
.hlist li:last-child .hitem{border-bottom:none}
.hopen{
  flex:1;min-width:0;text-align:left;background:none;border:none;cursor:pointer;padding:0;
}
.hmeta{display:flex;align-items:center;gap:9px;margin-bottom:5px;flex-wrap:wrap}
.hbadge{
  font-size:11px;font-weight:800;letter-spacing:.03em;padding:3px 9px;border-radius:99px;
  background:var(--line-2);color:var(--ink-2);
}
.hbadge.draft{background:var(--kon);color:#fff}
.hdate{font-size:12px;color:var(--ink-3)}
.htitle{font-size:16px;font-weight:800;letter-spacing:-.01em;line-height:1.5;margin:0 0 3px}
.hsub{font-size:13px;color:var(--ink-3);line-height:1.6}
.hopen:hover .htitle{color:var(--accent)}
.hdel{
  background:none;border:none;cursor:pointer;color:var(--ink-3);padding:8px;border-radius:7px;
  flex:0 0 auto;display:grid;place-items:center;
}
.hdel:hover{background:#FDECEA;color:var(--danger)}
.hempty{padding:50px 0;text-align:center;color:var(--ink-3);font-size:15px}

/* 構成案 */
.olabel{margin:0 0 6px;font-size:11.5px;font-weight:800;letter-spacing:.1em;color:var(--ink-3)}
.otitle{font-size:22px;line-height:1.5;margin:0 0 10px}
.oapproach{margin:0;font-size:15px;line-height:1.85;color:var(--ink-2)}
.oitems{display:flex;flex-direction:column;gap:12px}
.oitem{
  display:flex;gap:14px;padding:18px 20px;background:var(--surface);
  border:1.5px solid var(--line);border-radius:var(--r);transition:border-color .15s,opacity .15s;
}
.oitem:has(input:not(:checked)){opacity:.45;background:var(--surface-2)}
.oitem input{width:22px;height:22px;margin-top:2px;flex:0 0 auto;accent-color:var(--kon);cursor:pointer}
.oitem-body{min-width:0;flex:1}
.oitem-no{
  display:inline-block;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--ink-3);
  background:var(--line-2);padding:2px 8px;border-radius:99px;margin-bottom:6px;
}
.oitem h3{font-size:17px;line-height:1.5;margin:0 0 8px}
.oitem .aim{margin:0 0 12px;font-size:14.5px;line-height:1.8;color:var(--ink-2)}
.oitem .qs{margin:0 0 12px;padding-left:20px;font-size:14px;line-height:1.8;color:var(--ink-2)}
.oitem .qs li{margin-bottom:3px}
.oitem .srcs{display:flex;flex-wrap:wrap;gap:6px}
.oitem .srcs span{
  font-size:11.5px;font-weight:700;color:var(--ink-3);background:var(--surface-2);
  border:1px solid var(--line);border-radius:99px;padding:3px 10px;
}
#view-outline .actionbar-inner{justify-content:flex-end;gap:12px}
@media(max-width:820px){
  body{font-size:16.5px}
  .shell{flex-direction:column}

  /* 登録・ログインは縦積みに。2分割のままだとフォーム側が潰れて操作できない */
  .auth{display:block;min-height:0}
  .auth-aside{padding:26px 20px 28px}
  .auth-claim{margin:20px 0 22px;font-size:24px;line-height:1.5}
  .auth-points{gap:16px}
  .auth-foot{margin-top:22px}
  .auth-main{display:block;padding:28px 20px 72px;overflow:visible}
  .auth-card,.auth-card.narrow{max-width:none;padding-top:0}
  .auth-title{font-size:27px}

  /* スマホは上帯に詰め込まず、下部のタブバーへ移す（親指の届く位置） */
  .sidebar{
    width:100%;flex:none;height:auto;position:fixed;left:0;right:0;bottom:0;top:auto;z-index:40;
    flex-direction:row;align-items:stretch;gap:0;padding:0 0 env(safe-area-inset-bottom);
    background:var(--kon);border-top:none;box-shadow:0 -2px 10px rgba(0,0,0,.14);
  }
  .sidebar .logo.side{display:none}
  .navlabel{display:none}
  /* 官公庁アプリの定番：紺の下部タブバー。白抜きの文字とアイコン */
  .navwrap{display:contents}
  .nav{display:contents}
  .sidefoot{display:contents}
  .navitem,.userbox,.ghostrow{flex:1 1 0;min-width:0}

  .navitem[data-mode]{display:none}
  .moretab{display:none}
  .tabhome{display:flex}

  .navitem{
    flex-direction:column;justify-content:center;align-items:center;gap:3px;
    padding:6px 2px;font-size:10px;font-weight:600;text-align:center;line-height:1.2;
    border-radius:0;white-space:nowrap;overflow:hidden;height:54px;
    color:rgba(255,255,255,.72);
  }
  .navitem .ic{width:20px;height:20px;opacity:1}
  .navitem .navsub{display:none}
  .navitem[aria-current=true]{background:none;color:#fff}
  .navitem[aria-current=true]::before{display:none}
  .navitem:hover{background:rgba(255,255,255,.08);color:#fff}
  .navitem>span:not(.tablabel):not(.navsub){display:none}
  .navitem .tablabel{display:block;width:100%;text-align:center;
                     overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

  #nav-history,a.navitem[href="/contact"]{display:flex}
  .tabhome{order:1}
  #nav-history{order:2}
  a.navitem[href="/contact"]{order:3}
  .userbox{order:4}
  .ghostrow{order:5}

  .userbox,.ghostrow{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    padding:6px 2px;border-radius:0;height:54px;font-size:10px;width:auto;
    color:rgba(255,255,255,.72);
  }
  .userbox:hover,.ghostrow:hover{background:rgba(255,255,255,.08);color:#fff}
  .userbox .avatar{width:20px;height:20px;border-radius:6px;font-size:10px;
                   background:rgba(255,255,255,.22);color:#fff}
  .userinfo{display:block;font-size:10px;line-height:1.2}
  .userinfo .username{font-size:10px;font-weight:600;color:rgba(255,255,255,.72);max-width:64px}
  .userinfo .usercity{display:none}
  .ghostrow span{display:block;font-size:10px}
  .ghostrow .ic{width:20px;height:20px}

  /* 濃紺のヘッダー。参考にした官公庁アプリと同じ構造 */
  .modepick{
    display:block;position:sticky;top:0;z-index:30;margin:0 -16px;padding:10px 16px 12px;
    background:var(--kon);border:none;
  }
  .modepick-label{
    display:block;font-size:11px;font-weight:600;letter-spacing:.06em;
    color:rgba(255,255,255,.7);margin-bottom:6px;
  }
  .modepick select{
    min-height:46px;font-size:16px;font-weight:700;letter-spacing:-.01em;
    background:#fff;border-color:#fff;border-radius:8px;
  }
  .modepick .selchev{color:var(--kon)}

  .userbox{padding:7px 10px;border-radius:10px}
  .ghostrow{width:auto;padding:7px 10px;border-radius:10px}
  .ghostrow span{display:none}

  /* タブバーのぶん本文の下に余白を確保する */
  .main{padding:0 16px calc(86px + env(safe-area-inset-bottom));max-width:none}
  .actionbar{bottom:calc(64px + env(safe-area-inset-bottom))}

  .topbar{flex-direction:column;align-items:flex-start;gap:14px;padding:22px 0 18px}
  .topbar h1{font-size:24px}
  .grid-2{grid-template-columns:1fr;gap:0}
  .sec{padding:22px 18px}
  .paper{padding:28px 22px;font-size:17px}
  .paper h1{font-size:22px}
  .sources{padding:24px 20px}
  .actionbar-inner{flex-direction:column;align-items:stretch;padding:14px}
  .actionnote{text-align:center}
  .actionbar .btn{width:100%}
  .resultbar{flex-direction:row;align-items:center}
  .resultactions{width:100%}
  .resultactions .btn{flex:1}
  .kv{grid-template-columns:1fr}
  .kv dt{padding-bottom:0;border:none}
  .kv dd{padding-top:4px}
  .fieldgroups .chipwrap,.fgroup.foldable.open .chipwrap{
    grid-template-columns:repeat(auto-fill,minmax(104px,1fr));
  }
}

/* スマホの「その他」ボタン。広い画面では出さない */
.moretab{display:none}
@media(max-width:820px){
  .moretab{
    display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
    flex:1 1 0;min-width:0;background:none;border:none;cursor:pointer;border-radius:10px;
    padding:5px 2px;font-size:10px;font-weight:700;color:var(--ink-2);height:52px;
  }
  .moretab .ic{width:19px;height:19px}
  .sidebar.more-open .moretab{background:var(--accent-soft);color:var(--kon)}
}

/* ══════════ 印刷（A4／議場での読み上げ用） ══════════ */
@media print{
  @page{size:A4;margin:20mm 18mm}
  body{background:#fff;font-size:12.5pt;line-height:1.95;
       font-family:"Hiragino Mincho ProN","Yu Mincho",serif;color:#000}
  .sidebar,.noprint,.statusbar,.topbar,.actionbar{display:none !important}
  .shell{display:block}
  .main{padding:0;max-width:none}
  .paper{border:none;box-shadow:none;padding:0;background:none;font-size:12.5pt;border-radius:0}
  .paper h1{font-size:17pt;border-bottom:1.5pt solid #000;page-break-after:avoid}
  .paper h2{font-size:14pt;border-top:0.5pt solid #999;padding-top:5mm;margin-top:9mm;page-break-after:avoid}
  .paper h3{font-size:12.5pt;color:#000;page-break-after:avoid;margin-top:6mm}
  .paper blockquote{background:none;border:none;border-left:2pt solid #999;
                    border-radius:0;padding:1mm 0 1mm 5mm;font-size:11.5pt;color:#333}
  .paper table{font-size:10.5pt;page-break-inside:avoid}
  .paper th,.paper td{border:0.5pt solid #666;padding:1.5mm 2.5mm;background:none;color:#000}
  .paper blockquote.warn{border-left-color:#000;font-weight:700;color:#000}
  .paper li,.paper p,.paper blockquote{page-break-inside:avoid}
  .sources{margin-top:14mm;border:none;box-shadow:none;padding:6mm 0 0;border-top:1pt solid #000}
  .sources h2 span{display:none}
  .sources a{color:#000}
  .src-url{font-size:8.5pt}
}



/* ══════════ 口調の選択 ══════════ */
/* 「追及」「提案」だけでは意味が伝わらないため、名前と説明を並べた縦リストにする */
.tonelist{display:flex;flex-direction:column;gap:8px}
.tonebtn{
  display:block;width:100%;text-align:left;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);
  padding:14px 16px;transition:border-color .14s,background .14s;
}
.tonebtn:hover{border-color:#C7CFD8;background:var(--surface-2)}
.tonebtn[aria-pressed=true]{border-color:var(--kon);background:var(--accent-soft)}
.tone-name{
  display:flex;align-items:center;gap:8px;
  font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink);margin-bottom:3px;
}
.tonebtn[aria-pressed=true] .tone-name{color:var(--kon)}
.tone-rec{
  font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.04em;
  color:#fff;background:var(--kon);border-radius:99px;padding:2px 8px;
}
.tone-desc{display:block;font-size:13.5px;line-height:1.75;color:var(--ink-2)}


/* ══════════ 官公庁アプリ風の行リスト ══════════ */
/* 参考：國會議員要覧。白地に細い区切り線、右向きの矢印、たっぷりした行の高さ */
.fieldgroups .chipwrap,.fgroup.foldable.open .chipwrap{
  display:block;padding:0;
}
.fieldgroups .chip{
  display:block;width:100%;text-align:left;border:none;border-radius:0;
  border-bottom:1px solid var(--line-2);background:#fff;
  padding:14px 16px;font-size:15px;font-weight:600;white-space:normal;
}
.fieldgroups .chip:last-child{border-bottom:none}
.fieldgroups .chip:hover{background:var(--surface-2)}
.fieldgroups .chip[aria-pressed=true]{
  background:var(--accent-soft);color:var(--kon);font-weight:800;
  box-shadow:inset 3px 0 0 var(--kon);
}
.fgroup.foldable{border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.fgroup-toggle{background:var(--surface-2);border-bottom:1px solid var(--line-2)}
.fgroup.foldable:not(.open) .fgroup-toggle{border-bottom:none}

/* 行リストに右向きの矢印。押せる行であることを示す（参考アプリと同じ作法） */
.fieldgroups .chip{
  position:relative;padding-right:38px;
}
.fieldgroups .chip::after{
  content:"";position:absolute;right:16px;top:50%;width:7px;height:7px;
  border-right:2px solid #B4BECB;border-bottom:2px solid #B4BECB;
  transform:translateY(-50%) rotate(-45deg);
}
.fieldgroups .chip[aria-pressed=true]::after{border-color:var(--kon)}

/* ══════════ ロゴ（引用符マーク＋欧文ワードマーク） ══════════ */
/* 意匠：議場で発する「言葉」＝引用符。片方を朱にして、出典で裏づけた発言を示す */
.logo-tile{width:34px;height:34px;border-radius:0;background:none;display:block;padding:0}
.logo-tile svg{width:34px;height:34px;display:block}
.logo-tile .tile-bg{fill:var(--kon)}
.logo-tile .q1{fill:#fff}
.logo-tile .q2{fill:#E08A5C}
.logo-text{
  font-size:22px;font-weight:700;letter-spacing:.01em;color:var(--ink);line-height:1;
}
.logo-text .plus{color:var(--shu);font-weight:700}
/* 紺地に置くとき（登録画面の左パネルなど）は反転させる */
.auth-aside .logo-tile .tile-bg{fill:#fff}
.auth-aside .logo-tile .q1{fill:var(--kon)}
.auth-aside .logo-text{color:#fff}
.auth-aside .logo-text .plus{color:#F0A882}


/* ══════════ 大項目の数（セグメント） ══════════ */
/* 選ばれている数字がひと目で分かるように、紺で塗りつぶす */
.segmented{
  display:grid;grid-template-columns:repeat(4,1fr);gap:8px;
}
.segbtn{
  cursor:pointer;font-family:inherit;
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r);
  padding:15px 6px;font-size:16px;font-weight:800;letter-spacing:-.01em;color:var(--ink-2);
  transition:border-color .14s,background .14s,color .14s;
}
.segbtn:hover{border-color:#C7CFD8;background:var(--surface-2)}
.segbtn[aria-pressed=true]{
  border-color:var(--kon);background:var(--kon);color:#fff;
  box-shadow:0 2px 8px rgba(18,58,107,.22);
}

@media (max-width:820px){
  .segmented{gap:6px}
  .segbtn{padding:14px 2px;font-size:15px}
}