:root{
  --paper:#fbfaf7; --card:#fff; --ink:#16181d; --ink-2:#4a5058; --ink-3:#5e656e;
  --rule:#e3e0d9; --rule-2:#cfcbc2;
  --accent:#0f5c56; --accent-soft:#e6f0ee; --accent-ink:#0a423e;
  --flag:#a8321e; --flag-soft:#fbeae6;
  --ok:#1c6b3f; --ok-soft:#e6f2ea;
  --mono:ui-monospace,"SFMono-Regular",Consolas,"Noto Sans Mono CJK JP",monospace;
  --sans:-apple-system,BlinkMacSystemFont,"Segoe UI","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic UI",sans-serif;
  --serif:"Hiragino Mincho ProN","Yu Mincho","Noto Serif JP",serif;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --paper:#14161a; --card:#1b1e23; --ink:#eceef1; --ink-2:#b3b9c2; --ink-3:#868d97;
    --rule:#2b2f36; --rule-2:#3b4048;
    --accent:#5fb8ac; --accent-soft:#16302e; --accent-ink:#8fd3c9;
    --flag:#e08a76; --flag-soft:#331d18;
    --ok:#6dbb8c; --ok-soft:#16281e;
  }
}
:root[data-theme="dark"]{
  --paper:#14161a; --card:#1b1e23; --ink:#eceef1; --ink-2:#b3b9c2; --ink-3:#868d97;
  --rule:#2b2f36; --rule-2:#3b4048;
  --accent:#5fb8ac; --accent-soft:#16302e; --accent-ink:#8fd3c9;
  --flag:#e08a76; --flag-soft:#331d18;
  --ok:#6dbb8c; --ok-soft:#16281e;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:var(--sans); font-size:16px; line-height:1.85;
  font-feature-settings:"palt" 1;
}
.wrap{max-width:760px; margin:0 auto; padding:0 20px}

/* ── header ── */
.site-head{border-bottom:1px solid var(--rule); background:var(--card)}
.site-head .wrap{display:flex; align-items:baseline; gap:14px; padding-top:14px; padding-bottom:14px; flex-wrap:wrap}
.brand{font-family:var(--serif); font-size:17px; font-weight:700; letter-spacing:.04em; color:var(--ink); text-decoration:none}
.brand span{color:var(--accent)}
.tagline{font-size:12.5px; color:var(--ink-3); letter-spacing:.02em}

/* ── disclosure (景表法・全ページ本文冒頭に必須) ── */
.disclosure{
  margin:18px 0 0; padding:9px 13px; border:1px solid var(--rule-2); border-radius:5px;
  background:var(--card); color:var(--ink-2); font-size:12.5px; line-height:1.7;
}
.disclosure b{color:var(--ink); font-weight:600}

/* ── type ── */
h1{
  font-family:var(--serif); font-size:29px; line-height:1.45; letter-spacing:.01em;
  margin:26px 0 6px; font-weight:700;
}
.sub{font-size:15px; color:var(--ink-2); margin:0 0 4px; line-height:1.75}
.meta{font-size:12.5px; color:var(--ink-3); letter-spacing:.01em; margin:14px 0 0;
  padding-top:12px; border-top:1px solid var(--rule)}
h2{
  font-family:var(--serif); font-size:21px; margin:44px 0 12px; padding-bottom:7px;
  border-bottom:2px solid var(--ink); font-weight:700; letter-spacing:.02em;
}
h3{font-size:16px; margin:28px 0 8px; font-weight:700; color:var(--ink)}
p{margin:0 0 15px}
a{color:var(--accent-ink); text-underline-offset:3px}
ul,ol{padding-left:1.3em; margin:0 0 15px}
li{margin-bottom:7px}
small{font-size:12.5px; color:var(--ink-3)}

/* ── the lede: what changed ── */
.flagbox{
  margin:22px 0 6px; padding:16px 18px; border-left:4px solid var(--flag);
  background:var(--flag-soft); border-radius:0 6px 6px 0;
}
.flagbox .k{
  display:inline-block; font-family:var(--mono); font-size:11px; letter-spacing:.09em;
  color:var(--flag); font-weight:700; margin-bottom:5px;
}
.flagbox p{margin:0; font-size:15px; line-height:1.8}
.flagbox strong{font-weight:700}
.strike{text-decoration:line-through; color:var(--ink-3); text-decoration-thickness:2px}

/* ── tables ── */
.tbl-scroll{overflow-x:auto; margin:0 0 8px; -webkit-overflow-scrolling:touch}
table{border-collapse:collapse; width:100%; min-width:560px; font-size:14px; background:var(--card)}
caption{
  text-align:left; font-size:13px; color:var(--ink-3); padding:0 0 7px;
  font-family:var(--mono); letter-spacing:.02em;
}
th,td{border:1px solid var(--rule); padding:9px 11px; vertical-align:top; line-height:1.65}
td small,th small{display:inline-block; font-size:11.5px; line-height:1.55; color:var(--ink-3)}
thead th{background:var(--accent-soft); color:var(--accent-ink); font-weight:700; white-space:nowrap; text-align:left}
tbody th{background:var(--paper); font-size:13.5px; white-space:nowrap; font-weight:700; text-align:left}
td.c{text-align:center; white-space:nowrap}
.yes{color:var(--ok); font-weight:700}
.no{color:var(--flag); font-weight:700}
.tag{
  display:inline-block; font-size:11px; font-family:var(--mono); padding:1px 6px;
  border-radius:3px; background:var(--accent-soft); color:var(--accent-ink); font-weight:700;
}
.tag.new{background:var(--flag-soft); color:var(--flag)}

/* ── traps ── */
.trap{border:1px solid var(--rule-2); border-radius:6px; background:var(--card); padding:2px 18px; margin:0 0 14px}
.trap h3{margin:16px 0 6px; font-size:15px; display:flex; gap:8px; align-items:baseline}
.trap h3::before{content:"⚠"; color:var(--flag); font-size:13px}
.trap p{font-size:14.5px; color:var(--ink-2); margin-bottom:14px}

/* ── amazon block ── */
.buy{border:1px solid var(--rule-2); border-radius:6px; background:var(--card); padding:16px 18px; margin:0 0 16px}
.buy .h{font-size:13px; color:var(--ink-3); letter-spacing:.04em; margin-bottom:9px; font-weight:700}
.buy ul{margin:0; padding-left:1.15em}
.buy li{font-size:14.5px; margin-bottom:9px}
.buy .why{display:block; font-size:12.5px; color:var(--ink-3); line-height:1.6}
.biz{
  margin:0 0 16px; padding:16px 18px; border:1px solid var(--accent); border-radius:6px;
  background:var(--accent-soft);
}
.biz .h{font-weight:700; color:var(--accent-ink); margin-bottom:7px; font-size:15px}
.biz p{font-size:14px; color:var(--ink-2); margin-bottom:10px}
.biz a{font-weight:700}

/* ── index list ── */
.list{list-style:none; padding:0; margin:0}
.list li{border-bottom:1px solid var(--rule); margin:0}
.list a{display:block; padding:15px 2px; text-decoration:none; color:inherit}
.list a:hover{background:var(--card)}
.list .t{font-weight:700; font-size:16px; color:var(--ink); line-height:1.55}
.list .d{font-size:13.5px; color:var(--ink-3); margin-top:3px; line-height:1.65}

/* ── footer ── */
.site-foot{margin-top:56px; border-top:1px solid var(--rule); background:var(--card)}
.site-foot .wrap{padding-top:22px; padding-bottom:34px}
.site-foot p{font-size:12.5px; color:var(--ink-3); line-height:1.8; margin:0 0 9px}
.site-foot a{color:var(--ink-2)}

.note{
  font-size:13px; color:var(--ink-2); background:var(--card); border:1px solid var(--rule);
  border-radius:6px; padding:13px 16px; margin:0 0 16px; line-height:1.75;
}
.note b{color:var(--ink)}

@media (max-width:600px){
  body{font-size:15.5px}
  h1{font-size:24px}
  h2{font-size:19px}
  .wrap{padding:0 16px}
}