
:root{
  --bg:#EEF1F4; --surface:#FBFCFD; --surface-2:#E4E9EE;
  --ink:#171C23; --ink-2:#4E5966; --ink-3:#79838F;
  --rule:#D0D8E0; --rule-strong:#AFBBC6;
  --accent:#1F4B73; --accent-soft:#CBDBE9;
  --mark:#8A5A2B; --mark-soft:#EDE0CF;
  --ok:#2F6B4F; --pend:#8A5A2B;
  --shadow:0 1px 0 rgba(23,28,35,.04), 0 8px 24px -18px rgba(23,28,35,.5);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12171C; --surface:#1A2028; --surface-2:#222A33;
    --ink:#E7EBEF; --ink-2:#A3AEBA; --ink-3:#78838F;
    --rule:#2C353F; --rule-strong:#43505C;
    --accent:#86B6DE; --accent-soft:#25394B;
    --mark:#C8975C; --mark-soft:#33291C;
    --ok:#79BE9B; --pend:#C8975C;
    --shadow:0 1px 0 rgba(0,0,0,.3), 0 8px 24px -18px rgba(0,0,0,.9);
  }
}
:root[data-theme="dark"]{
  --bg:#12171C; --surface:#1A2028; --surface-2:#222A33;
  --ink:#E7EBEF; --ink-2:#A3AEBA; --ink-3:#78838F;
  --rule:#2C353F; --rule-strong:#43505C;
  --accent:#86B6DE; --accent-soft:#25394B;
  --mark:#C8975C; --mark-soft:#33291C;
  --ok:#79BE9B; --pend:#C8975C;
  --shadow:0 1px 0 rgba(0,0,0,.3), 0 8px 24px -18px rgba(0,0,0,.9);
}

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:"Zen Kaku Gothic New","Hiragino Sans","Yu Gothic",sans-serif;
  font-size:16px;line-height:1.9;
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
.wrap{max-width:880px;margin:0 auto;padding:0 24px 120px}
h1,h2,h3,h4{
  font-family:"Shippori Mincho","Hiragino Mincho ProN","Yu Mincho",serif;
  font-weight:700;text-wrap:balance;line-height:1.5;margin:0;
}
p{margin:0}
.stack{display:flex;flex-direction:column}
.g12{gap:12px}.g16{gap:16px}.g20{gap:20px}.g28{gap:28px}

.draftbar{
  margin-top:20px;padding:10px 16px;
  background:var(--mark-soft);color:var(--ink);
  font-size:12.5px;line-height:1.7;
  border-left:3px solid var(--mark);
}
.masthead{padding:44px 0 36px;border-bottom:2px solid var(--ink)}
.eyebrow{
  font-family:"IBM Plex Mono",monospace;font-size:11px;
  letter-spacing:.22em;text-transform:uppercase;color:var(--ink-3);
}
.masthead h1{font-size:clamp(32px,6vw,48px);letter-spacing:.02em;padding-top:10px}
.lede{font-size:16.5px;color:var(--ink-2);max-width:36em;padding-top:14px}

section{padding-top:60px}
.sec-head{display:flex;align-items:baseline;gap:14px;border-bottom:1px solid var(--rule);padding-bottom:10px}
.sec-num{font-family:"IBM Plex Mono",monospace;font-size:12px;font-weight:600;color:var(--accent);letter-spacing:.1em}
.sec-head h2{font-size:22px;letter-spacing:.02em}
.prose{max-width:34em}
.prose p + p{margin-top:1.1em}
strong{font-weight:700;color:var(--ink)}
.note{font-size:13px;color:var(--ink-3);max-width:38em}

/* 立場の並び */
.fam{padding-top:34px}
.fam-h{
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  letter-spacing:.18em;color:var(--accent);padding-bottom:8px;
}
.rows{display:flex;flex-direction:column;border-top:1px solid var(--rule-strong)}
.r{
  display:grid;grid-template-columns:186px 1fr;gap:4px 22px;
  padding:15px 0;border-bottom:1px solid var(--rule);
}
.r b{font-size:14.5px;font-weight:700;line-height:1.6}
.r .a{font-size:14.5px;color:var(--ink-2);line-height:1.85}
.r .s{
  display:block;padding-top:6px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  color:var(--ink-3);letter-spacing:.03em;
}

.quote{
  border-left:2px solid var(--mark);padding:4px 0 4px 18px;
  font-family:"Shippori Mincho",serif;font-size:16px;line-height:1.9;
  color:var(--ink);max-width:38em;
}
.quote cite{
  display:block;font-family:"IBM Plex Mono",monospace;font-style:normal;
  font-size:10.5px;color:var(--ink-3);letter-spacing:.05em;padding-top:9px;
}

.split{
  background:var(--surface);border:1px solid var(--rule);
  border-left:3px solid var(--accent);padding:22px 24px;
  display:flex;flex-direction:column;gap:10px;box-shadow:var(--shadow);
}
.split h3{font-size:17px}
.split p{font-size:14.5px;color:var(--ink-2);max-width:40em}

.pair{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.pair > div{
  display:grid;grid-template-columns:minmax(170px,1fr) 2.3fr;gap:6px 24px;
  padding:15px 0;border-bottom:1px solid var(--rule);
}
.pair b{font-weight:700;font-size:14px}
.pair span{color:var(--ink-2);font-size:14px;line-height:1.85}

/* 出典台帳 */
.tablewrap{overflow-x:auto;border:1px solid var(--rule);background:var(--surface);margin-top:22px}
table{border-collapse:collapse;width:100%;min-width:640px;font-size:13.5px}
th,td{padding:10px 13px;text-align:left;border-bottom:1px solid var(--rule);vertical-align:top}
thead th{
  font-size:11px;font-weight:700;color:var(--ink-3);
  letter-spacing:.06em;background:var(--surface-2);white-space:nowrap;
}
tbody th{font-weight:500;font-size:13.5px}
.st{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;white-space:nowrap}
.st.ok{color:var(--ok)}
.st.pend{color:var(--pend)}

@media (max-width:680px){
  .r{grid-template-columns:1fr;gap:6px}
  .pair > div{grid-template-columns:1fr}
}

/* ── 二行目（なぜそう言えるのか）── */
/* 一行目は42を見比べるための行、二行目は一つを読み込むための行。
   同じ大きさで並べると見比べられなくなるので、少し落として左に罫を引く。 */
.r .a2{
  grid-column:2;margin-top:9px;padding-left:15px;
  border-left:2px solid var(--rule);
  font-size:13.5px;line-height:1.95;color:var(--ink-2);
}
@media (max-width:680px){ .r .a2{grid-column:1} }

/* ── 表題の下の数字 ── */
/* 区切りが無いと「問い 23立場の記述 941」とつながって読めない */
.masthead .meta{
  display:flex;flex-wrap:wrap;gap:6px 0;padding-top:18px;
  font-size:12.5px;letter-spacing:.06em;color:var(--ink-2);
  font-variant-numeric:tabular-nums;
}
.masthead .meta span{padding-right:18px;margin-right:18px;border-right:1px solid var(--rule)}
.masthead .meta span:last-child{padding-right:0;margin-right:0;border-right:0}

/* ── 導線 ── */
.sitenav{
  border-bottom:1px solid var(--rule);background:var(--surface);
  position:sticky;top:0;z-index:10;
}
.sitenav .inner{
  max-width:880px;margin:0 auto;padding:11px 24px;
  display:flex;align-items:baseline;gap:8px 22px;flex-wrap:wrap;
}
.sitenav a{color:var(--ink-2);text-decoration:none;font-size:13px}
.sitenav a:hover,.sitenav a:focus-visible{color:var(--accent);text-decoration:underline}
.sitenav .home{
  font-family:"Shippori Mincho",serif;font-weight:700;font-size:15px;color:var(--ink);
}
.sitenav .trial{
  margin-left:auto;font-family:"IBM Plex Mono",monospace;font-size:10.5px;
  letter-spacing:.12em;color:var(--mark);
}
a{color:var(--accent)}
a:focus-visible,button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

.sitefoot{
  border-top:1px solid var(--rule);margin-top:80px;
  background:var(--surface);
}
.sitefoot .inner{
  max-width:880px;margin:0 auto;padding:28px 24px 40px;
  display:flex;flex-direction:column;gap:10px;
}
.sitefoot p{font-size:12.5px;color:var(--ink-3);line-height:1.9}

/* ── 一覧 ── */
.cards{display:flex;flex-direction:column;border-top:1px solid var(--rule)}
.cards a.card{
  display:grid;grid-template-columns:52px 1fr auto;gap:6px 20px;align-items:baseline;
  padding:17px 0;border-bottom:1px solid var(--rule);
  text-decoration:none;color:inherit;
}
.cards a.card:hover{background:var(--surface)}
.cards .ax{
  font-family:"IBM Plex Mono",monospace;font-size:11px;font-weight:600;
  color:var(--accent);letter-spacing:.08em;
}
.cards .ttl{font-family:"Shippori Mincho",serif;font-weight:700;font-size:17px;line-height:1.5}
.cards .sub{font-size:12.5px;color:var(--ink-3);grid-column:2}
.cards .num{
  font-family:"IBM Plex Mono",monospace;font-size:11px;color:var(--ink-3);
  white-space:nowrap;font-variant-numeric:tabular-nums;
}
.cards .soon{color:var(--ink-3);font-size:12.5px}
.cards div.card{
  display:grid;grid-template-columns:52px 1fr auto;gap:6px 20px;align-items:baseline;
  padding:17px 0;border-bottom:1px solid var(--rule);opacity:.55;
}

/* ── 立場のページ ── */
.tanswers{display:flex;flex-direction:column;border-top:1px solid var(--rule-strong)}
.tanswers > div{padding:18px 0;border-bottom:1px solid var(--rule)}
.tanswers h3{font-size:16px;padding-bottom:6px}
.tanswers h3 a{text-decoration:none}
.tanswers h3 a:hover{text-decoration:underline}
.tanswers p{font-size:14.5px;color:var(--ink-2);line-height:1.85}
.tanswers .src{
  display:block;padding-top:6px;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;color:var(--ink-3);letter-spacing:.03em;
}
.noanswer{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  color:var(--mark);
}
.lead{font-size:16.5px;color:var(--ink-2);max-width:36em}

/* ── 比較（同じ系統のなかの二つの立場）── */
.vs{display:flex;flex-direction:column;border-top:1px solid var(--rule-strong)}
.vs > div{padding:20px 0;border-bottom:1px solid var(--rule)}
.vs h3{font-size:16px;padding-bottom:12px}
.vs h3 a{text-decoration:none}
.vs h3 a:hover{text-decoration:underline}
.vs .pair{display:grid;grid-template-columns:1fr 1fr;gap:20px 26px}
@media (max-width:640px){.vs .pair{grid-template-columns:1fr;gap:16px}}
.vs .side .who{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  color:var(--mark);display:block;padding-bottom:5px;
}
.vs .side p{font-size:14.5px;color:var(--ink-2);line-height:1.85}
.vs .side .src{
  display:block;padding-top:6px;font-family:"IBM Plex Mono",monospace;
  font-size:10.5px;color:var(--ink-3);letter-spacing:.03em;
}
.vslist{display:flex;flex-wrap:wrap;gap:8px;padding-top:16px}
.vslist a{
  font-size:12.5px;text-decoration:none;color:var(--ink-2);
  border:1px solid var(--rule);border-radius:2px;padding:5px 11px;
}
.vslist a:hover{background:var(--surface);color:var(--accent)}
