/* typeset-v8: インパクト版。設計思想の転換 — 静かな読み物 → ポスター（3秒で要点）。
   なぜ: 著者評「ペーパーはその場でパッとしか読まれない。3秒で要点が入る設計に」(2026-11-14)。
   文面は v7 と同一。変えたのは見せ方と表裏の配分のみ（問答は裏面の下半分へ）。
   色: 紺 #1B2A4A ／ 朱 #C73E1D ／ 地 生成り #FBF8F1。 */
@page {
  size: 148mm 210mm;
  margin: 18mm;
  background: #FBF8F1;
}

* { box-sizing: border-box; }

:root {
  --navy: #1B2A4A;
  --verm: #C73E1D;
  --gray: #B9B6AE;
  --ink: #1B2A4A;
  --paper: #FBF8F1;
}

html {
  font-family: "Noto Sans CJK JP", "Hiragino Sans", "Yu Gothic", sans-serif;
  font-size: 9pt;
  line-height: 1.6;
  color: var(--ink);
}

body { margin: 0; }

.page {
  width: 112mm;
  height: 174mm;
  position: relative;
  overflow: hidden;
  break-after: page;
}
.page:last-child { break-after: auto; }

/* ---- 表面 ---- */
.top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  height: 28mm;
  margin-bottom: 3mm;
}
.kicker {
  font-size: 7.5pt;
  letter-spacing: 0.15em;
  color: var(--navy);
  border-top: 0.6mm solid var(--verm);
  padding-top: 1.5mm;
  margin: 0;
  width: 48mm;
}
/* 絵：幅 54mm ＝ 版面幅 112mm の約48% */
.hero {
  width: 54mm;
  height: auto;
  display: block;
}

h1 { margin: 0 0 3mm; font-weight: 900; }
.h-main {
  display: block;
  font-size: 23pt;
  line-height: 1.22;
  letter-spacing: -0.01em;
  color: var(--navy);
  font-weight: 900;
}
.h-sub {
  display: block;
  margin-top: 2mm;
  font-size: 16pt;
  line-height: 1.25;
  color: var(--verm);
  font-weight: 900;
}

.lead {
  font-size: 7.2pt;
  line-height: 1.4;
  margin: 0 0 3mm;
  color: #4a5368;
  white-space: nowrap;
  letter-spacing: -0.02em;
}

/* ---- 対比バー ---- */
.legend {
  font-size: 6pt;
  color: #555d70;
  margin-bottom: 1.5mm;
  line-height: 1;
}
.legend span { display: inline-block; width: 5mm; height: 2mm; vertical-align: middle; margin-right: 1mm; }
.lg-b { background: var(--gray); }
.lg-f { background: var(--navy); }
.lg-s { background: var(--gray); }
.lg-l { background: var(--verm); }

.row { margin-bottom: 2.2mm; }
.name {
  font-size: 8pt;
  font-weight: 700;
  line-height: 1.2;
  margin-bottom: 0.6mm;
}
.track {
  display: flex;
  align-items: center;
  height: 3.9mm;
  margin-bottom: 0.5mm;
}
.tag {
  width: 10mm;
  flex: none;
  font-size: 5.5pt;
  color: #7a7f8c;
  line-height: 1;
}
.bar { display: block; height: 3.2mm; flex: none; }
.bar.b { width: 34mm; background: var(--gray); }
.word {
  margin-left: 2mm;
  font-size: 8.5pt;
  line-height: 1;
  white-space: nowrap;
}
/* 長さと色で意味が通る：爆速＝短い紺／長期化＝長い朱／変わらない＝同寸グレー */
.fast .bar.a { width: 11mm; background: var(--navy); }
.fast .word { color: var(--navy); }
.slow .bar.a { width: 62mm; background: var(--verm); }
.slow .word { color: var(--verm); }
.same .bar.a { width: 34mm; background: var(--gray); }
.same .word { color: #6b6f7a; }

.preview {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  margin: 0;
  padding-top: 1.5mm;
  border-top: 0.15mm solid var(--navy);
  font-size: 7.5pt;
  text-align: right;
  color: var(--navy);
}

/* ---- 裏面 ---- */
/* 持ち帰りの1行（中見出し級） */
.take2 {
  font-size: 11.5pt;
  font-weight: 900;
  line-height: 1.4;
  color: var(--navy);
  border-top: 0.6mm solid var(--navy);
  padding-top: 2mm;
  margin: 0 0 3mm;
}
.take2 em { font-style: normal; color: var(--verm); }

/* 仕事の相談フック（大） */
.hook {
  font-size: 14pt;
  font-weight: 900;
  line-height: 1.3;
  color: #fff;
  background: var(--navy);
  padding: 2.5mm 3.5mm;
  margin: 0 0 3mm;
}

.next {
  display: flex;
  gap: 4mm;
  align-items: stretch;
  margin: 0 0 4mm;
}
.qrbox { width: 42mm; flex: none; }
.qr {
  width: 40mm; height: 40mm;
  border: 0.5mm solid var(--navy);
  display: flex; align-items: center; justify-content: center;
  text-align: center;
  font-size: 8pt; line-height: 1.4;
  color: var(--navy);
}
.qr-note {
  margin: 1mm 0 0;
  width: 42mm;
  font-size: 5.5pt;
  line-height: 1.35;
  word-break: break-all;
  color: #555d70;
}
.next-main { flex: 1; }
.next-h {
  margin: 0 0 1.5mm;
  font-size: 10pt;
  font-weight: 900;
  color: var(--verm);
  line-height: 1.3;
}
.next-list {
  margin: 0; padding: 0;
  list-style: none;
  font-size: 7.8pt;
  line-height: 1.5;
  counter-reset: n;
}
.next-list li {
  counter-increment: n;
  position: relative;
  padding-left: 5mm;
  margin-bottom: 1.8mm;
}
.next-list li::before {
  content: counter(n);
  position: absolute; left: 0; top: 0.4mm;
  width: 3.8mm; height: 3.8mm;
  background: var(--navy); color: #fff;
  border-radius: 50%;
  font-size: 6.5pt; font-weight: 700;
  line-height: 3.8mm; text-align: center;
}

/* 問答：下半分に小さめ・2段組みで全4往復 */
.qas {
  column-count: 2;
  column-gap: 5mm;
  border-top: 0.15mm solid var(--navy);
  padding-top: 2mm;
}
.qa { break-inside: avoid; margin: 0 0 2.4mm; }
.q {
  font-size: 6.6pt;
  font-weight: 700;
  line-height: 1.35;
  color: var(--navy);
  margin-bottom: 0.6mm;
}
.a {
  font-size: 6.4pt;
  line-height: 1.45;
  color: #2a3248;
  padding-left: 2mm;
  border-left: 0.5mm solid var(--verm);
}
.count { font-size: 6pt; color: #777; white-space: nowrap; }

.colophon {
  position: absolute;
  left: 0; bottom: 0;
  width: 100%;
  font-size: 5.8pt;
  color: #777d8c;
  line-height: 1.4;
}