/* ============================================================
   テーマ: roumu（ひとり労務ノート）— 「綴じた台帳・温色」
   横罫（台帳）/ セピア褐色 / 採番＋罫線見出し / 明朝
   書体: BIZ UDPMincho ＋ Fira Code
   ============================================================ */
:root {
  --paper:    #F8F5EE;
  --ink:      #241F18;
  --ink-soft: #6B6052;
  --grid:     #E6DFD1;
  --rule:     #DCD4C4;
  --pen:      #9A6B3F;  /* セピア褐色 */
  --pen-deep: #7A5430;
  --marker:   #E7D8BE;
  --disp: "BIZ UDPMincho", "Noto Sans JP", serif;
  --mono: "Fira Code", ui-monospace, "SFMono-Regular", Menlo, monospace;
}
body {
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent 27px, var(--grid) 27px, var(--grid) 28px);
  background-position: 0 10px;
  line-height: 1.9;
}
.masthead, .site-header { border-bottom: 1px solid var(--ink); border-top: 3px solid var(--pen); background: var(--paper); }
.site-footer { border-top: 1px solid var(--ink); }
.brand { font-weight: 700; }
.swipe::before {
  top: auto; bottom: -.02em; left: 0; right: 0; height: .12em;
  background: var(--pen); transform: none; border-radius: 0; mix-blend-mode: normal;
}
.article-body { counter-reset: h2; }
.article-body h2 {
  border-left: none; padding-left: 0; padding-bottom: .35em; border-bottom: 1px solid var(--rule);
  display: flex; align-items: baseline; gap: .6em;
}
.article-body h2::before {
  counter-increment: h2; content: counter(h2, decimal-leading-zero) "｜";
  font-family: var(--mono); font-weight: 600; font-size: .72em; color: var(--pen);
}
h2 { border-left: none; padding-left: 0; }
h3::before { content: "§ "; color: var(--pen); font-size: .85em; }

/* ── 変数化されていない黄/赤tintを媒体色へ ── */
blockquote { background: color-mix(in srgb, var(--marker) 45%, transparent); border-left-color: var(--pen); }
.toc__list a:hover, .toc__list a:focus-visible { background: color-mix(in srgb, var(--marker) 50%, transparent); }
.topicnav__item:hover, .topicnav__item.is-active { background: color-mix(in srgb, var(--marker) 50%, transparent); }
.tokushu-cta__link { background: color-mix(in srgb, var(--marker) 35%, transparent); }
.tokushu-cta__link:hover { background: color-mix(in srgb, var(--marker) 55%, transparent); }
a.tk-item:hover { background: color-mix(in srgb, var(--marker) 28%, transparent); }
.thumb__mark { background: color-mix(in srgb, var(--marker) 85%, transparent); }
.calc-tab:hover { background: color-mix(in srgb, var(--pen) 8%, transparent); }
.calc-input:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--pen) 14%, transparent); }
.cta__btn--ghost:hover { background: color-mix(in srgb, var(--pen) 8%, transparent); }