:root {
  --bg: #fbfaf7;
  --surface: #ffffff;
  --ink: #1d1c1a;
  --ink-2: #55524c;
  --ink-3: #8a867d;
  --rule: #e3dfd6;
  --rule-strong: #cfc9bc;
  --accent: #1f4e8c;
  --accent-soft: #e8eef7;
  --ed: #8a867d;
  --ins: #1f4e8c;
  --del: #a33a2a;
  --series-1: #2a78d6;
  --serif: "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", "Noto Serif JP", "Noto Serif CJK JP", serif;
  --sans: "Hiragino Sans", "Yu Gothic UI", "Yu Gothic", "Noto Sans JP", "Noto Sans CJK JP", system-ui, sans-serif;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171716;
    --surface: #1f1f1d;
    --ink: #ecebe6;
    --ink-2: #bdbab1;
    --ink-3: #8f8b82;
    --rule: #34332f;
    --rule-strong: #4a4843;
    --accent: #8fb3ea;
    --accent-soft: #233149;
    --ed: #8f8b82;
    --ins: #8fb3ea;
    --del: #e48a7b;
    --series-1: #3987e5;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html { scroll-padding-top: 4rem; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--sans); font-size: 15px; line-height: 1.7; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .85em; color: var(--ink-2); }

header.site {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between;
  padding: .6rem 1.5rem; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--rule);
}
.brand { color: var(--ink); font-weight: 600; letter-spacing: .04em; }
.brand span { margin-left: .8em; font-weight: 400; color: var(--ink-3); font-size: .9em; }
.ednote-toggle { font-size: .85rem; color: var(--ink-2); cursor: pointer; }
footer.site { margin: 4rem auto 2rem; max-width: 70rem; padding: 0 1.5rem; color: var(--ink-3); font-size: .8rem; }

/* ---------- トップ */
main.home { max-width: 62rem; margin: 0 auto; padding: 2.5rem 1.5rem; }
main.home h1 { font-family: var(--serif); font-weight: 600; font-size: 2rem; margin: 0 0 .5rem; letter-spacing: .04em; }
.lead { color: var(--ink-2); max-width: 46rem; }
.system { margin: 2.5rem 0 3rem; }
.level { display: grid; grid-template-columns: 4.5rem 1fr; gap: 1rem; align-items: start; }
.lvname { font-family: var(--serif); color: var(--ink-3); padding-top: 1.1rem; text-align: right; letter-spacing: .3em; }
.row { display: flex; flex-direction: column; gap: .5rem; }
.card {
  display: grid; gap: .15rem; padding: 1.1rem 1.3rem; background: var(--surface); border: 1px solid var(--rule);
  border-radius: 10px; color: var(--ink); transition: border-color .15s, box-shadow .15s;
}
.card:hover { text-decoration: none; border-color: var(--accent); box-shadow: 0 2px 10px rgb(0 0 0 / .05); }
.card .lv { display: none; }
.card strong { font-family: var(--serif); font-size: 1.3rem; font-weight: 600; }
.card .meta { color: var(--ink-2); font-size: .88rem; }
.card .stats { margin-top: .4rem; font-size: .85rem; color: var(--ink-2); }
.card .stats b { color: var(--ink); font-variant-numeric: tabular-nums; }
.card .based { list-style: none; display: flex; flex-wrap: wrap; gap: .4rem; padding: 0; margin: .5rem 0 0; font-size: .78rem; }
.card .based li { padding: .05rem .55rem; border-radius: 99px; background: var(--accent-soft); color: var(--accent); }
.card .based li.h { background: none; color: var(--ink-3); padding-left: 0; }
.pre { margin: 0 0 0 1.3rem; padding: .4rem .9rem; border-left: 2px dashed var(--rule-strong); color: var(--ink-3); font-size: .82rem; }
.pre span { margin-right: .6em; }
.pre small { display: block; }
.arrow { margin: .6rem 0 .6rem 5.5rem; color: var(--ink-3); font-size: .85rem; letter-spacing: .1em; }
.about h2 { font-size: 1rem; }
.about li { color: var(--ink-2); margin-bottom: .3rem; }

/* ---------- 法令ページ */
main.law { max-width: 76rem; margin: 0 auto; padding: 2rem 1.5rem; }
.lawhead { border-bottom: 1px solid var(--rule); margin-bottom: 1.5rem; }
.lawhead .kind { margin: 0; color: var(--ink-3); font-size: .85rem; }
.lawhead h1 { font-family: var(--serif); font-weight: 600; font-size: 2rem; margin: .2rem 0; letter-spacing: .05em; }
.lawhead .num { margin: 0; color: var(--ink-2); font-family: var(--serif); }
.lawhead .state, .lawhead .version { margin: .3rem 0; font-size: .88rem; color: var(--ink-2); }
.status { display: inline-block; padding: 0 .6em; border-radius: 4px; border: 1px solid var(--rule-strong); font-size: .8rem; color: var(--ink-2); }
.status.repealed { border-color: var(--del); color: var(--del); }
.tabs { display: flex; gap: 1.5rem; margin-top: 1rem; }
.tabs a { padding: .5rem 0; color: var(--ink-2); border-bottom: 2px solid transparent; }
.tabs a.on { color: var(--ink); border-color: var(--ink); }
.tabs a:hover { text-decoration: none; color: var(--ink); }

.layout { display: grid; grid-template-columns: 15rem minmax(0, 1fr); gap: 2.5rem; }
aside { position: sticky; top: 4rem; align-self: start; max-height: calc(100vh - 5rem); overflow: auto; font-size: .84rem; }
.toc ol { list-style: none; padding: 0; margin: 0; }
.toc ol ol { padding-left: 1em; }
.toc li { margin: .15rem 0; }
.toc a { color: var(--ink-2); }
.toc a:hover { color: var(--accent); }
.toc small { display: block; color: var(--ink-3); }
.toc .suppl, .toc .appdx { margin-top: .5rem; }
.toc .suppl small { display: inline; margin-left: .4em; }

.lawbody { font-family: var(--serif); font-size: 1.02rem; line-height: 1.95; max-width: 46rem; }
.enact { text-indent: 1em; color: var(--ink); }
.heading { font-family: var(--serif); font-weight: 600; letter-spacing: .08em; margin: 2.2rem 0 .8rem; }
h2.heading { font-size: 1.25rem; padding-left: 2em; }
h3.heading, h3 { font-size: 1.1rem; padding-left: 3em; }
h4.heading { font-size: 1rem; padding-left: 4em; }
.article { margin: 0 0 1.1rem; padding: .2rem .6rem; margin-left: -.6rem; border-radius: 6px; }
.article:target, .para:target, .item:target { background: var(--accent-soft); }
.caption { padding-left: 1em; color: var(--ink-2); }
.para { padding-left: 1em; text-indent: -1em; }
.atitle { font-weight: 700; font-family: var(--sans); font-size: .95em; }
.num { font-family: var(--serif); }
.item { padding-left: 2em; text-indent: -1em; }
.item.d2 { padding-left: 3em; }
.item.d3 { padding-left: 4em; }
.article.deleted .para { color: var(--ink-3); }
.colsep { display: inline-block; width: 1em; }
a.ref { color: inherit; text-decoration: underline; text-decoration-color: var(--rule-strong); text-underline-offset: .2em; }
a.ref:hover { color: var(--accent); text-decoration-color: var(--accent); }
ruby rt { font-size: .5em; color: var(--ink-2); }

.ed { color: var(--ed); font-family: var(--sans); font-size: .8em; }
.ednote { font-family: var(--sans); font-size: .8rem; color: var(--ed); margin: .2rem 0 .4rem 2em; text-indent: 0; }
.ednote .tag { display: inline-block; margin-right: .6em; padding: 0 .4em; border: 1px solid var(--rule-strong); border-radius: 3px; font-size: .72rem; }
body.hide-ed .ed, body.hide-ed .ednote { display: none; }

.backref { font-family: var(--sans); font-size: .8rem; margin: .2rem 0 0 1em; }
.backref summary { cursor: pointer; color: var(--ink-3); list-style: none; }
.backref summary::before { content: "↳ "; }
.backref summary::-webkit-details-marker { display: none; }
.backref[open] summary { color: var(--ink-2); }
.backref a { display: inline-block; margin: .1rem .8rem .1rem 0; }

.tablewrap { overflow-x: auto; margin: .6rem 0 .8rem 1em; text-indent: 0; }
table.lawtable { border-collapse: collapse; font-size: .9rem; line-height: 1.6; }
table.lawtable td { border: 1px solid var(--rule-strong); padding: .25rem .6rem; vertical-align: top; }
table.lawtable tr:first-child td { background: color-mix(in srgb, var(--rule) 45%, transparent); text-align: center; }
.remarks { font-size: .9rem; margin-top: .4rem; }
.remarks .item { padding-left: 2em; }

.suppl-tools { text-align: right; margin: -.4rem 0 .4rem; }
.suppl-tools button, form.compare button {
  font: inherit; font-family: var(--sans); font-size: .8rem; color: var(--ink-2); background: var(--surface);
  border: 1px solid var(--rule-strong); border-radius: 6px; padding: .2rem .7rem; cursor: pointer;
}
details.suppl { border-top: 1px solid var(--rule); }
details.suppl > summary { cursor: pointer; padding: .45rem 0; font-size: .92rem; color: var(--ink-2); }
details.suppl > summary:hover { color: var(--ink); }
details.suppl[open] { padding-bottom: .8rem; }
section.suppl.original h3 small, section.appdx h3 small { margin-left: .8em; font-size: .8rem; color: var(--ink-3); font-weight: 400; }
section.appdx { margin-top: 2rem; }
section.appdx h3 { padding-left: 0; }

/* ---------- 履歴 */
.hist h2 { font-size: 1.1rem; margin-top: 2.2rem; }
.chartwrap { position: relative; max-width: 48rem; margin: 1rem 0; }
svg.chart { width: 100%; height: auto; display: block; font-family: var(--sans); }
svg.chart .bar { fill: var(--series-1); }
svg.chart .grid { stroke: var(--rule); stroke-width: 1; }
svg.chart .axis { stroke: var(--rule-strong); stroke-width: 1; }
svg.chart .tick { fill: var(--ink-3); font-size: 11px; }
svg.chart .hit { fill: transparent; cursor: default; }
svg.chart .hit:hover { fill: color-mix(in srgb, var(--ink) 6%, transparent); }
.tip { position: absolute; pointer-events: none; background: var(--ink); color: var(--bg); font-size: .78rem; padding: .2rem .5rem; border-radius: 4px; white-space: nowrap; transform: translate(-50%, -120%); }
table.list { border-collapse: collapse; font-size: .86rem; min-width: 40rem; }
table.list th { text-align: left; font-weight: 500; color: var(--ink-3); border-bottom: 1px solid var(--rule-strong); padding: .3rem .8rem .3rem 0; }
table.list td { border-bottom: 1px solid var(--rule); padding: .3rem .8rem .3rem 0; font-variant-numeric: tabular-nums; }
table.list td.n { color: var(--ink-3); }
.empty { color: var(--ink-2); background: var(--surface); border: 1px dashed var(--rule-strong); border-radius: 8px; padding: .8rem 1rem; max-width: 46rem; }
form.compare select { font: inherit; padding: .15rem .3rem; }

/* ---------- 新旧対照表 */
table.taisho { border-collapse: collapse; width: 100%; font-family: var(--serif); font-size: .95rem; line-height: 1.8; table-layout: fixed; }
table.taisho thead th { font-family: var(--sans); font-weight: 500; border: 1px solid var(--rule-strong); padding: .3rem; background: var(--surface); }
table.taisho td { border-left: 1px solid var(--rule-strong); border-right: 1px solid var(--rule-strong); padding: .1rem .8rem; vertical-align: top; }
table.taisho tr.unit th { text-align: left; font-family: var(--sans); font-weight: 600; font-size: .85rem; padding: .6rem .8rem .2rem; border: 1px solid var(--rule-strong); border-bottom: none; background: var(--surface); }
table.taisho tbody tr:last-child td { border-bottom: 1px solid var(--rule-strong); }
table.taisho ins { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: .25em; color: var(--ins); }
table.taisho del { text-decoration: line-through; color: var(--del); }

@media (max-width: 860px) {
  .layout { grid-template-columns: 1fr; }
  aside { position: static; max-height: 14rem; border: 1px solid var(--rule); border-radius: 8px; padding: .6rem .8rem; }
  .level { grid-template-columns: 1fr; }
  .lvname { text-align: left; padding: 0; }
  .arrow { margin-left: 1rem; }
}