/* ──────────────────────────────────────────────────────────────
   LP作成ツールの紹介。索引が無彩色なので、ここはツール自身の色を借りる。
   （wp-spec が WordPress 管理画面の色を借りているのと同じ考え方）

   型：左に節番号の柱、右に本文。画面写真が主役で、文章は添える。
   追従目次は使わない（wp-spec がその型なので重ねない）。
   ────────────────────────────────────────────────────────────── */
:root {
  /* Meiryo UI 優先。無い環境は OS 標準の日本語 UI 書体へ落とす */
  --ui: "Meiryo UI", Meiryo, "Hiragino Kaku Gothic ProN", "Yu Gothic UI", "Yu Gothic", sans-serif;
  --bg:      #F4F6F8;
  --panel:   #FFFFFF;
  --panel-2: #EDF0F3;
  --ink:     #1C1F23;
  --ink-2:   #545B64;
  --ink-3:   #8A9099;
  --line:    #DFE3E8;
  --accent:  #1D4ED8;
  --accent-w:#E7EDFD;
  --ok:      #065F46;
  --ok-w:    #ECFDF5;
  --ng:      #991B1B;
  --ng-w:    #FEF2F2;
  --shadow:  0 1px 2px rgba(28,31,35,.06), 0 8px 24px rgba(28,31,35,.06);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #101316; --panel: #181C20; --panel-2: #21262B;
    --ink: #E9EBED; --ink-2: #B0B6BC; --ink-3: #7C838A;
    --line: #2A3036; --accent: #8AA4FA; --accent-w: #1B2440;
    --ok: #5FCB94; --ok-w: #12241C; --ng: #EF7C7D; --ng-w: #2A1718;
    --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.4);
  }
}
:root[data-theme="dark"] {
  --bg: #101316; --panel: #181C20; --panel-2: #21262B;
  --ink: #E9EBED; --ink-2: #B0B6BC; --ink-3: #7C838A;
  --line: #2A3036; --accent: #8AA4FA; --accent-w: #1B2440;
  --ok: #5FCB94; --ok-w: #12241C; --ng: #EF7C7D; --ng-w: #2A1718;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 10px 30px rgba(0,0,0,.4);
}

* { box-sizing: border-box; }
body {
  margin: 0; background: var(--bg); color: var(--ink);
  font-family: var(--ui);
  font-size: 15px; line-height: 1.95; -webkit-font-smoothing: antialiased;
}
h1, h2, h3, h4 { margin: 0; font-weight: 700; text-wrap: balance; line-height: 1.45; }
p { margin: 0 0 1.15em; }
a { color: var(--accent); }
.m, code, pre { font-family: var(--ui); font-variant-numeric: tabular-nums; }
code { font-size: .88em; background: var(--panel-2); padding: .1em .4em; border-radius: 3px; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

/* ── 免責の帯 ─────────────────────────────────────────────── */
.band {
  background: var(--ink); color: var(--bg);
  font-size: 11.5px; letter-spacing: .04em; padding: 8px 20px; text-align: center;
}
/* ── 表紙。ツールの ink を敷いて、索引とも wp-spec とも変える ── */
.hero { background: #14181C; color: #E9EBED; padding: 64px 0 46px; }
.kicker {
  font-family: var(--ui); font-size: 11.5px; letter-spacing: .22em;
  color: #8AA4FA; margin: 0 0 20px;
}
.hero h1 { font-size: clamp(27px, 4.4vw, 46px); letter-spacing: .005em; }
/* 見出しの改行は広い画面だけ。狭い画面で強制すると、意図しない位置で折れる */
@media (max-width: 860px) { .hero h1 .brk { display: none; } }
.hero .lede { color: #B0B6BC; margin: 22px 0 0; }

/* 数字。ツールの規模を最初に示す */
.facts {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(126px, 1fr));
  gap: 0; margin: 40px 0 0; border-top: 1px solid #2A3036;
}
.facts div { padding: 18px 0 18px 20px; border-left: 1px solid #2A3036; }
.facts div:first-child { border-left: 0; padding-left: 0; }
.facts b {
  display: block; font-family: var(--ui); font-weight: 600;
  font-size: 25px; line-height: 1.2; color: #FFF;
}
.facts span { font-size: 11.5px; color: #8A9099; letter-spacing: .04em; }

/* 表紙のLP3枚。上端だけ見せて紙面に食い込ませる */
.peek { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin: 46px 0 0; }
.peek figure { margin: 0; }
.peek .win {
  height: 210px; overflow: hidden; border-radius: 8px 8px 0 0;
  border: 1px solid #2A3036; border-bottom: 0; background: #fff;
}
.peek img { display: block; width: 100%; }
.peek figcaption { font-size: 11.5px; color: #8A9099; padding: 9px 2px 0; }

/* ── 節 ───────────────────────────────────────────────────── */
/* 表紙との間は広めに取る。暗い配色だと表紙と本文の明度が近く、
   境界の線だけでは切り替わりが読み取りにくいため。
   main は .wrap でもあるので、要素セレクタだけだと .wrap の padding に負ける */
main.wrap { padding-top: 112px; }
.sec {
  position: relative;
  display: grid; grid-template-columns: 78px minmax(0, 1fr); gap: 0;
  padding: 0 0 56px; margin: 0 0 56px; border-bottom: 1px solid var(--line);
}
.sec:last-of-type { border-bottom: 0; }

/* 節番号は本文の背面に敷く。見出しに少しだけ重ねて、
   「後ろにある」ことを分かるようにする。読む対象ではないので選択もさせない */
.sec > .n {
  position: absolute; left: 22px; top: -16px; z-index: 0;
  font-family: var(--ui); font-weight: 600;
  font-size: 60px; line-height: 1; letter-spacing: -.02em;
  color: var(--ink); opacity: .11;
  pointer-events: none; user-select: none;
}
/* 番号を流れから外したので、本文の列を明示する */
.sec > div:not(.n) { grid-column: 2; position: relative; z-index: 1; }
.sec h2 { font-size: clamp(19px, 2.4vw, 25px); margin: 0 0 18px; }
.sec h3 { font-size: 16px; margin: 30px 0 10px; }
/* 行長は制限しない。42文字に絞ると読みやすさは上がるが、994px の欄の中で
   360px が空いたままになり、「意図した余白」ではなく「崩れ」に見える。
   余白注（.side）を回り込ませることで、空きを実際に使う。 */
.sec > div > p { color: var(--ink-2); }
.sec strong { color: var(--ink); font-weight: 700; }

/* ── 余白注 ───────────────────────────────────────────────────
   本文は欄いっぱいに流すので、注は float で右に置き、本文を回り込ませる。
   雑誌の傍注と同じ扱い。空きを作らずに、拾い読みの手がかりを足す。 */
.side {
  float: right; clear: right; width: 236px; margin: 4px 0 20px 40px;
  border-left: 2px solid var(--line); padding: 2px 0 2px 14px;
  font-size: 12.5px; line-height: 1.8; color: var(--ink-3);
}
.side b {
  display: block; font-family: var(--ui); font-weight: 600;
  font-size: 11px; letter-spacing: .1em; color: var(--accent); margin-bottom: 4px;
}
.side .fig {
  display: block; font-family: var(--ui); font-size: 21px;
  line-height: 1.35; color: var(--ink); margin-bottom: 2px;
}
.side code { font-size: .92em; }

/* ── 図版。文章では伝わらないものだけ描く ─────────────────── */
.dia { margin: 30px 0 26px; }
.dia svg { display: block; width: 100%; height: auto; }
.dia figcaption { font-size: 12.5px; color: var(--ink-3); margin: 10px 2px 0; }
.dia .box { fill: var(--panel); stroke: var(--line); }
.dia .box-a { fill: var(--accent-w); stroke: var(--accent); }
.dia .rule { stroke: var(--line); }
.dia .arrow { stroke: var(--ink-3); fill: none; }
.dia .t { fill: var(--ink); font-size: 13px; font-family: var(--ui); }
.dia .t-s { fill: var(--ink-3); font-size: 11.5px; font-family: var(--ui); }
.dia .t-m { fill: var(--ink-2); font-size: 11.5px;
  font-family: var(--ui); }
.dia .t-a { fill: var(--accent); font-size: 13px; font-family: var(--ui); font-weight: 700; }
.dia .t-ng { fill: var(--ng); font-size: 11.5px; font-family: var(--ui); }

/* ── 画面写真 ─────────────────────────────────────────────── */
.shot { margin: 26px 0; }
.shot img {
  display: block; width: 100%; border: 1px solid var(--line);
  border-radius: 8px; box-shadow: var(--shadow); background: #fff;
}
.shot figcaption { font-size: 12.5px; color: var(--ink-3); margin: 11px 2px 0; }
.shot.narrow { max-width: 720px; }

/* 縦に長い画面は、枠の中でスクロールさせる（紙面を無限に伸ばさない） */
.scroller {
  max-height: 480px; overflow-y: auto; overscroll-behavior: contain;
  border: 1px solid var(--line); border-radius: 8px; box-shadow: var(--shadow); background: #fff;
}
.scroller img { border: 0; border-radius: 0; box-shadow: none; }
.scroller::-webkit-scrollbar { width: 10px; }
.scroller::-webkit-scrollbar-thumb { background: var(--line); border-radius: 6px; }

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 26px 0; }
.duo .shot { margin: 0; }

/* ── 注記 ─────────────────────────────────────────────────── */
.note {
  border-left: 3px solid var(--accent); background: var(--accent-w);
  padding: 14px 18px; margin: 22px 0; border-radius: 0 6px 6px 0;
}
.note.ok { border-color: var(--ok); background: var(--ok-w); }
.note.ng { border-color: var(--ng); background: var(--ng-w); }
.note p { margin: 0 0 .6em; color: var(--ink); }
.note p:last-child { margin: 0; }
.note b { display: block; margin-bottom: .3em; }

/* ── 表 ───────────────────────────────────────────────────── */
.tw { overflow-x: auto; margin: 22px 0; }
table { border-collapse: collapse; width: 100%; font-size: 14px; background: var(--panel); }
th, td { border: 1px solid var(--line); padding: 9px 13px; text-align: left; vertical-align: top; }
th { background: var(--panel-2); font-weight: 700; white-space: nowrap; }
td.c { text-align: center; }
tr > th:first-child { width: 1%; }

/* ── コード ───────────────────────────────────────────────── */
pre {
  background: #14181C; color: #DCE0E4; padding: 15px 18px; border-radius: 8px;
  overflow-x: auto; font-size: 13px; line-height: 1.75; margin: 20px 0;
}
pre code { background: none; padding: 0; color: inherit; font-size: inherit; }

/* ── 箇条書き ─────────────────────────────────────────────── */
.sec ul { color: var(--ink-2); padding-left: 1.3em; margin: 0 0 1.15em; }
.sec li { margin-bottom: .45em; }

/* ── 締め ─────────────────────────────────────────────────── */
footer {
  border-top: 1px solid var(--line); margin-top: 20px;
  padding: 34px 0 60px; font-size: 12.5px; color: var(--ink-3);
}
footer p { margin: 0 0 .6em; text-wrap: pretty; word-break: auto-phrase; }
.back { display: inline-block; margin: 0 0 26px; font-size: 13px; text-decoration: none; }
.back:hover { text-decoration: underline; }

/* ── 画面が小さいとき ─────────────────────────────────────── */
@media (max-width: 860px) {
  .peek { grid-template-columns: 1fr; }
  .peek .win { height: 168px; }
  .duo { grid-template-columns: 1fr; }
  /* 1fr の最小値は min-content。中に固定幅のもの（余白注など）があると
     欄が縮まず、ページごと横に広がる。minmax(0,1fr) で縮めるようにする */
  .sec { grid-template-columns: minmax(0, 1fr); }
  .sec > .n { left: 0; top: -12px; font-size: 46px; }
  .sec > div:not(.n) { grid-column: 1; min-width: 0; }
  /* 狭い画面では回り込ませない。236px を浮かせると本文が数十pxしか残らない */
  .side { float: none; width: auto; margin: 18px 0; }
  .facts div { padding-left: 14px; }
}
@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; }
}