/* 売上計上自動化PJ 本文ページ共通スタイル（一覧の _style.css と同じ配色トークン） */
:root{
  --bg:#F7F8F6; --surface:#FFFFFF; --ink:#1C2430; --sub:#5B6672;
  --line:#DDE2DF; --accent:#0E7490; --accent-soft:#E3F1F4; --accent-ink:#0B5C73;
  --stop:#B4482F; --stop-soft:#FBECE7; --stop-line:#EBC9BC;
  --warn:#8A6410; --warn-soft:#FBF2DF; --warn-line:#E8D6A8;
  --ok:#0F6B4F; --ok-soft:#E4F1EB; --ok-line:#BEDCD0;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --bg:#12181F; --surface:#1A222B; --ink:#E8ECEF; --sub:#9AA6B0;
    --line:#2C3843; --accent:#38B6D3; --accent-soft:#0E3540; --accent-ink:#7FD4E6;
    --stop:#F0A48C; --stop-soft:#33201A; --stop-line:#5B342A;
    --warn:#E6C378; --warn-soft:#2E2717; --warn-line:#544729;
    --ok:#7FCDAE; --ok-soft:#122C24; --ok-line:#2C4C3F;
  }
}
:root[data-theme="dark"]{
  --bg:#12181F; --surface:#1A222B; --ink:#E8ECEF; --sub:#9AA6B0;
  --line:#2C3843; --accent:#38B6D3; --accent-soft:#0E3540; --accent-ink:#7FD4E6;
  --stop:#F0A48C; --stop-soft:#33201A; --stop-line:#5B342A;
  --warn:#E6C378; --warn-soft:#2E2717; --warn-line:#544729;
  --ok:#7FCDAE; --ok-soft:#122C24; --ok-line:#2C4C3F;
}
*{box-sizing:border-box;margin:0}
body{background:var(--bg);color:var(--ink);font-family:'Noto Sans JP',sans-serif;
     line-height:1.9;font-size:15.5px;padding:0 20px 80px;font-feature-settings:"palt"}
.wrap{max-width:760px;margin:0 auto}
a{color:var(--accent-ink)}
.backlink{display:inline-block;margin-top:24px;font-size:13.5px;color:var(--sub);text-decoration:none}
.backlink:hover{color:var(--accent-ink)}
header.top{padding:26px 0 28px;border-bottom:2px solid var(--ink)}
.kicker{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--accent);
        text-transform:uppercase;margin-bottom:10px}
h1{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:900;
   font-size:clamp(24px,4.6vw,33px);line-height:1.32;text-wrap:balance}
.docmeta{margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:.04em;color:var(--sub)}
.lede{margin-top:14px;color:var(--sub)}
.lede b{color:var(--ink)}

.toc{background:var(--surface);border:1px solid var(--line);border-radius:10px;
     padding:16px 20px;margin-top:26px}
.toc b{font-size:13px;font-family:var(--mono);letter-spacing:.06em;color:var(--accent);
       display:block;margin-bottom:8px}
.toc ol{margin:0;padding-left:1.3em}
.toc li{font-size:14px;margin:3px 0}

section{margin-top:44px}
h2{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:19.5px;
   line-height:1.45;padding-bottom:8px;border-bottom:1px solid var(--line);
   display:flex;align-items:baseline;gap:12px}
h2 .no{font-family:var(--mono);font-size:13px;color:var(--accent);font-weight:600;flex:none}
h3{font-family:'Zen Kaku Gothic New',sans-serif;font-weight:700;font-size:16px;
   margin-top:28px;color:var(--accent-ink)}
p{margin-top:12px}
ul,ol{margin-top:12px;padding-left:1.4em}
li{margin:5px 0}
li > ul,li > ol{margin-top:4px}
b,strong{font-weight:700}
code{font-family:var(--mono);font-size:13px;background:var(--accent-soft);
     color:var(--accent-ink);padding:2px 6px;border-radius:5px;word-break:break-all}
.scroll{overflow-x:auto;margin-top:16px;border:1px solid var(--line);border-radius:10px}
table{border-collapse:collapse;width:100%;min-width:460px;background:var(--surface);font-size:14px}
th,td{border-bottom:1px solid var(--line);padding:10px 14px;text-align:left;vertical-align:top;line-height:1.7}
th{background:var(--accent-soft);color:var(--accent-ink);font-weight:700;white-space:nowrap}
tr:last-child td{border-bottom:none}

.box{border:1px solid var(--line);border-left:4px solid var(--accent);background:var(--surface);
     border-radius:0 10px 10px 0;padding:14px 18px;margin-top:18px;font-size:14.5px}
.box .t{font-weight:700;display:block;margin-bottom:4px;color:var(--accent-ink)}
.box.stop{border-left-color:var(--stop);background:var(--stop-soft);border-color:var(--stop-line)}
.box.stop .t{color:var(--stop)}
.box.warn{border-left-color:var(--warn);background:var(--warn-soft);border-color:var(--warn-line)}
.box.warn .t{color:var(--warn)}
.box.ok{border-left-color:var(--ok);background:var(--ok-soft);border-color:var(--ok-line)}
.box.ok .t{color:var(--ok)}
.box p:first-child{margin-top:0}

.steps{counter-reset:st;list-style:none;padding:0;margin-top:18px}
.steps li{counter-increment:st;position:relative;padding:12px 0 12px 46px;
          border-bottom:1px dashed var(--line)}
.steps li:last-child{border-bottom:none}
.steps li::before{content:counter(st);position:absolute;left:0;top:12px;
  width:28px;height:28px;border-radius:50%;background:var(--accent);color:#fff;
  font-family:var(--mono);font-size:13px;font-weight:600;
  display:flex;align-items:center;justify-content:center}
.steps .sh{font-weight:700;display:block}

.tmpl{background:var(--surface);border:1px dashed var(--line);border-radius:10px;
      padding:16px 20px;margin-top:16px;font-size:14px;line-height:1.9}
.tmpl .th{font-family:var(--mono);font-size:12px;letter-spacing:.06em;color:var(--sub);
          display:block;margin-bottom:8px}

.ng{color:var(--stop);font-weight:700}
.good{color:var(--ok);font-weight:700}

.hist{margin-top:46px;padding-top:18px;border-top:1px solid var(--line);
      font-size:13px;color:var(--sub)}
.hist b{color:var(--ink);font-size:13.5px}
.hist li{margin:6px 0}
footer{margin-top:30px;padding-top:16px;border-top:1px solid var(--line);
       color:var(--sub);font-size:13px}
