/* 裏エンジェルナンバー: 墨（裏）と生成り（表）と、警告の朱。絵は使わない。設計は memo/7 */
:root {
  --ink: #0e0e10;
  --ink-2: #19191c;
  --bone: #f3efe6;
  --red: #c2331c;
  --red-light: #e8573c;
  --mute-dark: #9d978a;
  /* 読む面（表＝生成り） */
  --bg: #f3efe6;
  --fg: #1c1b19;
  --surface: #e8e2d4;
  --line: #d6cfbf;
  --mute: #6f6a5f;
  --accent: #c2331c;
  --box-bg: #0e0e10;
  --box-fg: #f3efe6;
  --box-line: #3a3a3f;
  --fs: 17px;
  --serif: "Shippori Mincho", "Hiragino Mincho ProN", "Yu Mincho", "YuMincho", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Hiragino Sans", "Hiragino Kaku Gothic ProN", "Yu Gothic Medium", "Yu Gothic", Meiryo, sans-serif;
  --col: 680px;
}
/* 画面を裏返した時（裏＝墨）。結論の札は逆に生成りになる */
html.ura {
  --bg: #151517;
  --fg: #e7e2d6;
  --surface: #1f1f23;
  --line: #313136;
  --mute: #9d978a;
  --accent: #e8573c;
  --box-bg: #f3efe6;
  --box-fg: #0e0e10;
  --box-line: #cfc8b8;
}
html.big { --fs: 19.5px; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; background: var(--ink); }
body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--sans);
  font-size: var(--fs);
  line-height: 1.95;
  letter-spacing: 0.02em;
  -webkit-font-smoothing: antialiased;
  transition: background-color .5s, color .5s;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
svg { max-width: 100%; }
.sp { display: none; }
[hidden] { display: none !important; }

/* ---- 上の帯 ---- */
.site-header {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 0 20px; height: 56px;
  background: var(--ink); color: var(--bone);
  border-bottom: 1px solid #2a2a2e;
}
.brand { display: inline-flex; align-items: center; gap: 9px; text-decoration: none; font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: 0.06em; white-space: nowrap; }
.mark { width: 20px; height: 20px; flex: none; }
.tools { display: flex; gap: 8px; }
.tool {
  height: 32px; padding: 0 12px; border: 1px solid #4a4a50; background: transparent; color: var(--bone);
  font-family: var(--serif); font-size: 13px; letter-spacing: 0.08em; cursor: pointer; white-space: nowrap; transition: background .2s, color .2s, border-color .2s;
}
.tool:hover { border-color: var(--bone); }
.tool-main { background: var(--bone); color: var(--ink); border-color: var(--bone); font-weight: 700; }
.tool-main:hover { background: var(--red); border-color: var(--red); color: #fff; }

.progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 30; pointer-events: none; }
.progress span { display: block; height: 100%; background: var(--red-light); transform: scaleX(0); transform-origin: 0 50%; }

/* ---- 黒い冒頭 ---- */
.hero { background: var(--ink); color: var(--bone); padding: 28px 20px 40px; text-align: center; }
.hero h1 { font-family: var(--serif); font-weight: 800; margin: 0 auto; max-width: var(--col); letter-spacing: 0.04em; }
.eyebrow { margin: 0 0 18px; font-family: var(--serif); font-size: 13px; letter-spacing: 0.3em; color: var(--red-light); }

.hero-article h1 { font-size: clamp(22px, 5.6vw, 31px); line-height: 1.6; text-align: left; }
.crumb { max-width: var(--col); margin: 0 auto 18px; display: flex; gap: 8px; font-size: 12px; color: var(--mute-dark); text-align: left; }
.crumb a { text-decoration: none; }
.crumb a:hover { color: var(--bone); }
.meta { margin: 20px 0 0; font-size: 12px; color: var(--mute-dark); letter-spacing: 0.08em; }
.meta span { margin: 0 4px; }
.visits { margin: 18px 0 0; font-family: var(--serif); font-size: 14px; letter-spacing: 0.08em; color: var(--red-light); }
.nowchip {
  display: inline-block; margin: 16px 0 0; padding: 8px 18px; border: 1px solid var(--red-light); color: var(--bone);
  font-family: var(--serif); font-size: 14px; letter-spacing: 0.06em; text-decoration: none; animation: pulse 2.4s ease-in-out infinite;
}
.nowchip::after { content: " ↓"; color: var(--red-light); }
@keyframes pulse { 50% { box-shadow: 0 0 0 6px rgba(232, 87, 60, .16); } }

.hero-page { padding: 44px 20px 48px; }
.hero-page h1 { font-size: clamp(24px, 6vw, 34px); line-height: 1.5; }

.hero-top { padding: 44px 20px 56px; position: relative; overflow: hidden; }
.hero-top::before {
  content: "裏"; position: absolute; right: -0.12em; bottom: -0.3em;
  font-family: var(--serif); font-weight: 800; font-size: min(78vw, 560px); line-height: 1;
  color: #161619; pointer-events: none; user-select: none;
}
.hero-top > * { position: relative; }
.hero-top h1 { font-size: clamp(25px, 6.4vw, 44px); line-height: 1.55; }
.hero-sub { margin: 16px auto 0; color: #cfc9bb; font-size: 14px; line-height: 2; }

/* ---- 数字を調べる窓 ---- */
.lookup { width: min(100%, 380px); margin: 30px auto 0; text-align: left; color: var(--bone); }
.lookup-display {
  display: flex; align-items: center; justify-content: center; height: 76px; border: 1px solid var(--bone); background: rgba(14, 14, 16, .86);
  font-family: var(--serif); font-weight: 800; font-size: 44px; letter-spacing: 0.16em; padding-left: 0.16em;
}
.caret { width: 2px; height: 40px; margin-left: 4px; background: var(--red-light); animation: blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.lookup-result { min-height: 86px; display: grid; align-items: center; padding: 10px 0; }
.lookup-result p { margin: 0; text-align: center; font-size: 13px; letter-spacing: 0.06em; }
.lookup-idle { color: var(--mute-dark); }
.lookup-miss { color: var(--red-light); }
.lookup-hit {
  display: grid; grid-template-columns: 1fr auto; gap: 2px 14px; align-items: center; padding: 12px 16px;
  background: var(--bone); color: var(--ink); text-decoration: none; animation: rise .35s ease-out;
}
@keyframes rise { from { opacity: 0; transform: translateY(8px); } }
.lookup-hit-label { font-size: 11px; letter-spacing: 0.2em; color: var(--red); grid-column: 1; }
.lookup-hit-ura { font-family: var(--serif); font-weight: 800; font-size: 20px; line-height: 1.5; grid-column: 1; }
.lookup-hit-go { grid-column: 2; grid-row: 1 / 3; padding: 10px 18px; background: var(--ink); color: var(--bone); font-family: var(--serif); font-size: 13px; letter-spacing: 0.06em; white-space: nowrap; }
.lookup-hit:hover .lookup-hit-go { background: var(--red); }
.keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: #34343a; border: 1px solid #34343a; }
.keys button {
  height: 54px; border: 0; background: var(--ink); color: var(--bone); cursor: pointer;
  font-family: var(--serif); font-weight: 700; font-size: 24px; transition: background .12s, color .12s; -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.keys button:hover { background: #222226; }
.keys button:active { background: var(--bone); color: var(--ink); }
.keys .key-sub { font-size: 13px; letter-spacing: 0.1em; color: var(--mute-dark); font-weight: 500; }
.keys [data-key="now"] { color: var(--red-light); }
.lookup-log { margin-top: 22px; }
.lookup-log-title { margin: 0 0 6px; font-size: 11px; letter-spacing: 0.3em; color: var(--mute-dark); }
.lookup-log ul { list-style: none; margin: 0; padding: 0; border-top: 1px solid #34343a; }
.lookup-log a { display: flex; justify-content: space-between; align-items: baseline; padding: 9px 2px; border-bottom: 1px solid #34343a; text-decoration: none; }
.lookup-log a:hover .log-n { color: var(--red-light); }
.log-n { font-family: var(--serif); font-weight: 700; font-size: 20px; letter-spacing: 0.1em; }
.log-meta { font-size: 12px; color: var(--mute-dark); }

/* ---- 引き出し ---- */
.drawer {
  width: min(100%, 440px); max-width: 100%; height: 100%; max-height: 100%; margin: 0 0 0 auto; padding: 18px 22px 26px; border: 0;
  background: var(--ink); color: var(--bone); overflow-y: auto;
}
.drawer[open] { animation: slide .32s cubic-bezier(.2, .7, .2, 1); }
@keyframes slide { from { transform: translateX(40px); opacity: 0; } }
.drawer::backdrop { background: rgba(0, 0, 0, .62); }
.drawer-head { display: flex; justify-content: space-between; align-items: center; }
.drawer-title { margin: 0; font-family: var(--serif); font-weight: 800; font-size: 18px; letter-spacing: 0.14em; }
.drawer-close { border: 0; background: none; color: var(--mute-dark); font-size: 13px; letter-spacing: 0.1em; cursor: pointer; padding: 8px 0 8px 12px; }
.drawer-close:hover { color: var(--bone); }
.drawer .lookup { margin-top: 18px; width: 100%; }
.drawer-foot { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 30px; padding-top: 18px; border-top: 1px solid #34343a; font-size: 13px; }
.drawer-foot a, .drawer-foot button { color: var(--mute-dark); text-decoration: none; background: none; border: 0; padding: 0; cursor: pointer; font-size: 13px; }
.drawer-foot a:hover, .drawer-foot button:hover { color: var(--bone); }

/* ---- 裏返るカード ---- */
.flip {
  display: block; width: min(100%, 400px); height: 192px; margin: 26px auto 0; padding: 0;
  border: 0; background: none; color: inherit; cursor: pointer; perspective: 1400px;
  -webkit-tap-highlight-color: transparent;
}
.flip-inner { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .95s cubic-bezier(.3, .1, .2, 1); }
.flip.is-ura .flip-inner { transform: rotateY(180deg); }
.flip.no-anim .flip-inner { transition: none; }
.face {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  -webkit-backface-visibility: hidden; backface-visibility: hidden; padding: 14px;
}
.face-omote { background: var(--bone); color: var(--ink); }
.face-ura { background: var(--ink); color: var(--bone); transform: rotateY(180deg); border: 1px solid var(--bone); box-shadow: inset 0 0 0 5px var(--ink), inset 0 0 0 6px var(--red); }
.face-label { font-size: 12px; letter-spacing: 0.3em; color: #6f6a5f; }
.face-ura .face-label { color: var(--red-light); }
.face-number { font-family: var(--serif); font-weight: 800; font-size: 62px; line-height: 1.15; letter-spacing: 0.08em; }
.face-text { font-family: var(--serif); font-weight: 700; font-size: 19px; letter-spacing: 0.06em; }
.flip-hint { margin: 10px 0 0; font-size: 11px; color: #6b675e; letter-spacing: 0.1em; }
.flip:focus-visible, .keys button:focus-visible, .tool:focus-visible { outline: 2px solid var(--red-light); outline-offset: 3px; }

/* ---- 場面の帯（読んでいる間も上に残る） ---- */
.scenes { position: sticky; top: 0; z-index: 20; display: flex; align-items: stretch; background: var(--ink); border-top: 1px solid #2a2a2e; border-bottom: 1px solid #2a2a2e; }
.scenes-track { flex: 1; min-width: 0; display: flex; gap: 6px; padding: 9px 16px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.scenes-track::-webkit-scrollbar { display: none; }
.scenes a {
  flex: none; padding: 5px 14px; border: 1px solid #45454b; color: #cfc9bb; text-decoration: none;
  font-family: var(--serif); font-size: 14px; letter-spacing: 0.06em; line-height: 1.6; white-space: nowrap; transition: background .2s, color .2s, border-color .2s;
}
.scenes a:hover { border-color: var(--bone); color: var(--bone); }
.scenes a.hot { border-color: var(--red-light); color: var(--red-light); }
.scenes a.on { background: var(--bone); border-color: var(--bone); color: var(--ink); }
.scenes-lookup { flex: none; width: 52px; border: 0; border-left: 1px solid #2a2a2e; background: var(--ink); color: var(--bone); cursor: pointer; display: grid; place-items: center; }
.scenes-lookup:hover { color: var(--red-light); }

/* ---- 本文 ---- */
.prose { max-width: var(--col); margin: 0 auto; padding: 40px 20px 72px; }
.prose p { margin: 0 0 1.5em; }
.prose strong { font-weight: 700; background: linear-gradient(transparent 68%, rgba(210, 70, 45, .24) 68%); }
.prose a { color: var(--accent); text-underline-offset: 4px; }
.prose h2 {
  font-family: var(--serif); font-weight: 800; font-size: clamp(21px, 5.2vw, 26px); line-height: 1.6; letter-spacing: 0.04em;
  margin: 3.2em 0 1.2em; padding-top: 22px; position: relative;
}
.prose h2::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 3px; background: var(--accent); }
.prose h3 {
  font-family: var(--serif); font-weight: 700; font-size: 1.12em; line-height: 1.7;
  margin: 2.4em 0 1em; padding-left: 14px; border-left: 3px solid var(--fg);
}

.verdict { margin: 2em 0; padding: 26px 24px 24px; background: var(--box-bg); color: var(--box-fg); position: relative; transition: background-color .5s, color .5s; }
.verdict::after { content: ""; position: absolute; inset: 6px; border: 1px solid var(--box-line); pointer-events: none; }
.verdict p { margin: 0; font-family: var(--serif); font-weight: 700; font-size: 1.06em; line-height: 2; }
.verdict .verdict-label { font-size: 12px; letter-spacing: 0.3em; color: var(--red-light); margin-bottom: 10px; font-weight: 500; }
html.ura .verdict .verdict-label { color: var(--red); }

/* やることの札 */
.steps { list-style: none; counter-reset: step; margin: 0 0 .6em; padding: 0; border-top: 2px solid var(--fg); }
.steps li { counter-increment: step; border-bottom: 1px solid var(--line); }
.steps label { position: relative; display: block; padding: 16px 64px 16px 52px; cursor: pointer; font-weight: 600; -webkit-tap-highlight-color: transparent; }
.steps label::before { content: counter(step); position: absolute; left: 8px; top: 8px; font-family: var(--serif); font-weight: 800; font-size: 30px; line-height: 1.6; color: var(--accent); }
.steps input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.stamp {
  position: absolute; right: 8px; top: 50%; width: 42px; height: 42px; margin-top: -21px; display: grid; place-items: center;
  border: 2px solid var(--line); border-radius: 50%; color: transparent; font-family: var(--serif); font-weight: 800; font-size: 18px;
  transition: border-color .2s;
}
.steps input:checked ~ .stamp { border-color: var(--accent); color: var(--accent); transform: rotate(-12deg); animation: stamp .32s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes stamp { from { transform: rotate(-12deg) scale(1.9); opacity: 0; } }
.steps input:checked ~ .step-text { color: var(--mute); }
.steps input:focus-visible ~ .stamp { outline: 2px solid var(--accent); outline-offset: 3px; }
.prose .steps-note { font-size: 12px; color: var(--mute); margin-bottom: 2em; }

.prose h3.q { border-left: 0; padding-left: 40px; position: relative; margin-bottom: .6em; }
.prose h3.q::before { content: "Q"; position: absolute; left: 0; top: 2px; width: 28px; height: 28px; display: grid; place-items: center; background: var(--box-bg); color: var(--box-fg); font-size: 15px; }
.prose p.a { padding-left: 40px; }

.author { display: flex; gap: 18px; margin-top: 4.5em; padding: 26px 22px; border-top: 3px solid var(--fg); background: var(--surface); }
.author-mark { flex: none; width: 56px; height: 56px; display: grid; place-items: center; background: var(--ink); color: var(--bone); border-radius: 50%; }
.author-mark .mark { width: 28px; height: 28px; }
.author p { margin: 0 0 .5em; font-size: 14px; line-height: 1.9; }
.author .author-role { font-size: 11px; letter-spacing: 0.24em; color: var(--mute); margin: 0; }
.author .author-name { font-family: var(--serif); font-weight: 800; font-size: 22px; letter-spacing: 0.1em; margin-bottom: .3em; }
.author p:last-child { margin: 0; }

.next { margin-top: 2.6em; text-align: center; }
.next p { margin: 0 0 14px; font-size: 14px; color: var(--mute); }
.next-button {
  width: 100%; padding: 16px; border: 0; background: var(--box-bg); color: var(--box-fg); cursor: pointer;
  font-family: var(--serif); font-weight: 700; font-size: 17px; letter-spacing: 0.12em; transition: background .2s, color .2s;
}
.next-button:hover { background: var(--red); color: #fff; }

/* ---- トップの下の段 ---- */
.block { max-width: 760px; margin: 0 auto; padding: 56px 20px 8px; }
.block-title { font-family: var(--serif); font-weight: 800; font-size: 22px; letter-spacing: 0.1em; margin: 0 0 24px; padding-top: 20px; position: relative; }
.block-title::before { content: ""; position: absolute; top: 0; left: 0; width: 44px; height: 3px; background: var(--accent); }

.latest { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.latest a { display: flex; align-items: center; gap: 22px; padding: 20px 24px; background: var(--box-bg); color: var(--box-fg); text-decoration: none; transition: transform .25s, box-shadow .25s; }
.latest a:hover { transform: translateY(-2px); box-shadow: 6px 6px 0 var(--red); }
.latest-number { font-family: var(--serif); font-weight: 800; font-size: 40px; letter-spacing: 0.08em; line-height: 1.2; }
.latest-body { display: flex; flex-direction: column; border-left: 1px solid var(--box-line); padding-left: 22px; }
.latest-label { font-size: 11px; letter-spacing: 0.28em; color: var(--red-light); }
html.ura .latest-label { color: var(--red); }
.latest-ura { font-family: var(--serif); font-weight: 700; font-size: 18px; }

.numbers { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.numbers a, .numbers span { display: block; padding: 10px 0; text-align: center; font-family: var(--serif); font-weight: 700; font-size: 19px; letter-spacing: 0.08em; border: 1px solid var(--line); }
.numbers a { background: var(--box-bg); color: var(--box-fg); border-color: var(--box-bg); text-decoration: none; transition: background .2s, color .2s; }
.numbers a:hover { background: var(--red); border-color: var(--red); color: #fff; }
.numbers span { color: var(--mute); opacity: .55; }
.numbers-note { font-size: 12px; color: var(--mute); margin: 12px 0 0; }

.block-dark { max-width: none; margin-top: 64px; padding: 60px 20px 64px; background: var(--ink-2); color: var(--bone); text-align: center; }
.block-dark .block-title { display: inline-block; font-size: 30px; padding-top: 0; margin-bottom: 16px; }
.block-dark .block-title::before { content: none; }
.block-dark .eyebrow { margin-bottom: 6px; }
.block-dark p { max-width: 520px; margin: 0 auto 1.2em; font-size: 15px; color: #d9d3c5; }
.more { display: inline-block; padding: 10px 26px; border: 1px solid var(--bone); color: var(--bone); text-decoration: none; font-family: var(--serif); font-size: 14px; letter-spacing: 0.1em; transition: background .2s, color .2s; }
.more:hover { background: var(--bone); color: var(--ink); }

/* ---- 下の帯 ---- */
.site-footer { background: var(--ink); color: var(--bone); padding: 48px 20px 36px; text-align: center; border-top: 1px solid #2a2a2e; }
.site-footer .brand { font-size: 19px; }
.footer-tagline { margin: 10px 0 24px; font-family: var(--serif); font-size: 13px; letter-spacing: 0.24em; color: var(--mute-dark); }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; font-size: 12px; }
.site-footer nav a { color: var(--mute-dark); text-decoration: none; }
.site-footer nav a:hover { color: var(--bone); }
.copyright { margin: 28px 0 0; font-size: 11px; color: #5d5a52; letter-spacing: 0.08em; }

/* ---- 幅ごとの作り（スマホ・タブレット・PC）。設計は memo/7 §6 ---- */
/* どの幅でも共通の土台。スマホとタブレットは1列で、カードを題名のすぐ下に置く */
.site-nav, .tool-big, .lookup-hint, .side { display: none; }
.site-header { padding-left: max(20px, env(safe-area-inset-left)); padding-right: max(20px, env(safe-area-inset-right)); }
.site-footer { padding-bottom: max(36px, env(safe-area-inset-bottom)); }
.hero-grid { display: flex; flex-direction: column; align-items: center; }
.hero-copy { display: contents; }
.hero-article .crumb { order: 1; width: 100%; }
.hero-article h1 { order: 2; width: 100%; }
.hero-card { order: 3; width: 100%; }
.hero-article .visits { order: 4; }
.hero-article .nowchip { order: 5; }
.hero-article .meta { order: 6; }
.scenes-track { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 30px), transparent); padding-right: 30px; }
.drawer { height: 100dvh; overscroll-behavior: contain; padding-bottom: max(26px, env(safe-area-inset-bottom)); }
.lookup.flash .lookup-display { animation: flash .9s ease-out; }
@keyframes flash { 0%, 40% { border-color: var(--red-light); box-shadow: 0 0 0 5px rgba(232, 87, 60, .3); } }

/* 指で触る端末: 押しやすい大きさにする。触った後に hover の色が残らないようにする */
@media (hover: none) {
  .tool { height: 40px; padding: 0 14px; }
  .scenes a { padding: 8px 16px; }
  .scenes-lookup { width: 56px; }
  .keys button { height: 60px; }
  .drawer-close { padding: 12px 0 12px 16px; font-size: 14px; }
  .drawer-foot { gap: 4px 22px; }
  .drawer-foot a, .drawer-foot button { padding: 10px 0; font-size: 14px; }
  .site-footer nav { gap: 0 22px; }
  .site-footer nav a { padding: 10px 0; }
  .numbers a, .numbers span { padding: 13px 0; }
  .keys button:hover:not(:active) { background: var(--ink); }
  .latest a:hover { transform: none; box-shadow: none; }
  .numbers a:hover { background: var(--box-bg); border-color: var(--box-bg); color: var(--box-fg); }
  .next-button:hover { background: var(--box-bg); color: var(--box-fg); }
  .tool-main:hover { background: var(--bone); border-color: var(--bone); color: var(--ink); }
  .next-button:active, .numbers a:active, .tool-main:active { background: var(--red); border-color: var(--red); color: #fff; }
  .latest a:active { box-shadow: 4px 4px 0 var(--red); }
}

/* マウスとキーボードの端末: キーボードで入れられることを知らせる */
@media (hover: hover) and (pointer: fine) {
  .lookup-hint { display: block; margin: 10px 0 0; text-align: center; font-size: 11px; letter-spacing: 0.1em; color: var(--mute-dark); }
}

/* タブレット（561〜999px）: 1列のまま、余白と窓を少し広げる */
@media (min-width: 561px) and (max-width: 999px) {
  .hero { padding-left: 32px; padding-right: 32px; }
  .hero-top { padding-top: 56px; padding-bottom: 64px; }
  .lookup { width: min(100%, 420px); }
  .keys button { height: 60px; }
  .prose { padding-left: 32px; padding-right: 32px; }
  .block { padding-left: 32px; padding-right: 32px; }
  .scenes-track { justify-content: center; }
}

/* PC（1000px〜）: 横幅を使う。冒頭は2列、上の帯に案内を出す */
@media (min-width: 1000px) {
  :root { --fs: 18px; }
  html.big { --fs: 21px; }
  .site-header { height: 64px; padding-left: 32px; padding-right: 32px; }
  .brand { font-size: 18px; }
  .site-nav { display: flex; gap: 28px; margin-left: auto; margin-right: 22px; font-family: var(--serif); font-size: 14px; letter-spacing: 0.08em; }
  .site-nav a { position: relative; padding: 6px 0; color: #cfc9bb; text-decoration: none; transition: color .2s; }
  .site-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--red-light); transform: scaleX(0); transform-origin: 0 50%; transition: transform .25s; }
  .site-nav a:hover { color: var(--bone); }
  .site-nav a:hover::after { transform: scaleX(1); }
  .tool-big { display: inline-block; }
  .tool { height: 36px; padding: 0 16px; }

  .hero-top { padding: 76px 40px 88px; }
  .hero-top::before { right: auto; left: -0.1em; font-size: 560px; }
  .hero-top .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 64px; align-items: center; max-width: 1080px; margin: 0 auto; text-align: left; }
  .hero-top .hero-copy { display: block; }
  .hero-top h1 { font-size: clamp(38px, 3.9vw, 52px); margin: 0; max-width: none; }
  .hero-top .eyebrow { margin-bottom: 22px; font-size: 14px; }
  .hero-top .hero-sub { margin: 24px 0 0; font-size: 16px; }
  .hero-top .lookup { margin: 0; }

  .hero-article { padding: 40px 40px 56px; }
  .hero-article .hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: center; max-width: 1080px; margin: 0 auto; text-align: left; }
  .hero-article .hero-copy { display: block; }
  .hero-article h1 { font-size: clamp(30px, 2.9vw, 38px); max-width: none; margin: 0; }
  .hero-article .crumb { max-width: none; margin: 0 0 20px; font-size: 13px; }
  .hero-card { text-align: center; }
  .flip { margin: 0 auto; height: 220px; }
  .face-number { font-size: 72px; }
  .face-text { font-size: 21px; }
  .hero-page { padding: 64px 40px 68px; }

  .scenes-track { justify-content: center; padding: 10px 24px; -webkit-mask-image: none; mask-image: none; }
  .prose { padding-top: 56px; padding-bottom: 96px; }
  .prose h2 { font-size: 28px; }
  .steps label { padding: 20px 76px 20px 60px; transition: background .2s; }
  .steps label:hover { background: var(--surface); }
  .steps label:hover .stamp { border-color: var(--accent); }

  .block { max-width: 1080px; padding: 72px 40px 8px; }
  .block-title { font-size: 26px; }
  .latest { grid-template-columns: repeat(auto-fill, minmax(360px, 1fr)); }
  .numbers { grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 10px; }
  .numbers a, .numbers span { padding: 14px 0; font-size: 21px; }
  .block-dark { max-width: none; padding: 80px 40px 84px; }
  .site-footer { padding: 56px 40px 40px; }
  .site-footer nav { font-size: 13px; gap: 8px 30px; }
}

/* PC の広め（1100px〜）: 本文の右に、ほかの数字を調べる窓を置く（読んでいる間も付いてくる） */
@media (min-width: 1100px) {
  .reading { display: grid; grid-template-columns: minmax(24px, 1fr) 680px 356px minmax(24px, 1fr); align-items: start; }
  .reading .scenes { grid-column: 1 / -1; grid-row: 1; }
  .reading .prose { grid-column: 2; grid-row: 2; width: 100%; margin: 0; }
  .side {
    display: block; grid-column: 3; grid-row: 2; position: sticky; top: 76px; margin: 56px 0 56px 56px; padding: 20px 20px 22px;
    background: var(--ink); color: var(--bone); max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin;
  }
  html.ura .side { border: 1px solid #34343a; }
  .side-title { margin: 0; font-family: var(--serif); font-weight: 800; font-size: 15px; letter-spacing: 0.14em; }
  .side .lookup { width: 100%; margin: 14px 0 0; }
  .side .lookup-display { height: 60px; font-size: 34px; }
  .side .caret { height: 30px; }
  .side .lookup-result { min-height: 78px; }
  .side .lookup-hit { padding: 10px 12px; gap: 2px 10px; }
  .side .lookup-hit-ura { font-size: 17px; }
  .side .lookup-hit-go { padding: 8px 12px; }
  .side .keys button { height: 44px; font-size: 20px; }
  .side .keys .key-sub { font-size: 12px; }
  .side .lookup-log { margin-top: 16px; }
  .side .log-n { font-size: 17px; }
  .scenes-lookup { display: none; }
}

/* PC のいちばん広い幅（1340px〜）: 場面の帯を、本文の左の縦の案内にする */
@media (min-width: 1340px) {
  html { scroll-padding-top: 28px; }
  .reading { grid-template-columns: minmax(24px, 1fr) 246px 680px 356px minmax(24px, 1fr); }
  .reading .scenes { grid-column: 2; grid-row: 1; position: sticky; top: 32px; display: block; margin: 62px 56px 0 0; background: none; border: 0; }
  .reading .scenes::before { content: "場面で読む"; display: block; margin: 0 0 12px; font-size: 11px; letter-spacing: 0.3em; color: var(--mute); }
  .reading .prose { grid-column: 3; grid-row: 1; }
  .side { grid-column: 4; grid-row: 1; top: 32px; max-height: calc(100vh - 64px); }
  .scenes-track { flex-direction: column; gap: 0; padding: 0; overflow: visible; border-left: 1px solid var(--line); justify-content: flex-start; }
  .scenes a, .scenes a.hot, .scenes a.on { border: 0; border-left: 2px solid transparent; margin-left: -1px; padding: 9px 16px; background: none; font-size: 15px; white-space: normal; }
  .scenes a { color: var(--mute); }
  .scenes a.hot { color: var(--accent); }
  .scenes a:hover { color: var(--fg); border-left-color: var(--line); }
  .scenes a.on { color: var(--fg); font-weight: 700; border-left-color: var(--accent); }
}

@media (max-width: 560px) {
  :root { --fs: 16.5px; }
  html.big { --fs: 19px; }
  .sp { display: inline; }
  .pc { display: none; }
  .site-header { padding: 0 14px; }
  .brand { font-size: 15px; gap: 7px; }
  .tool { padding: 0 10px; font-size: 12px; }
  .hero-top { padding: 34px 20px 44px; }
  .latest a { padding: 16px 18px; gap: 16px; }
  .latest-number { font-size: 32px; }
  .latest-body { padding-left: 16px; }
  .author { padding: 22px 16px; gap: 14px; }
  .drawer { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .flip-inner, .latest a, body, .verdict { transition: none; }
  .nowchip, .caret, .drawer[open], .lookup-hit, .steps input:checked ~ .stamp { animation: none; }
}