/* Phone layout at every viewport; smaller-phone exceptions remain below. */
html { font-family: Inter, "Hiragino Kaku Gothic ProN", "Yu Gothic", system-ui, sans-serif;
  color: var(--modo-ink);
  background: var(--modo-paper);
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: calc(var(--site-header-h) + 65px); }
body { margin: 0; min-width: 320px; background: var(--modo-paper); }
body.is-assessing { background: var(--modo-paper); }
body.is-assessing .site-header { display: none; }
body.is-assessing .site-footer { display: none; }

/* 狭い画面でも日本語の禁則を守って折る。keep-all + anywhere は、長い見出しで
   緊急改行が句点だけを次行へ押し出すため使わない。長い英数字だけは折り返す。 */
html[lang="ja"] :is(h1, h2, h3) { word-break: normal; overflow-wrap: break-word; line-break: strict; }
/* 図鑑の数と「一体に決めません」の見出しは、対応するブラウザでは語のまとまりで折る（「今日は、一体／に決めません。」の割れ・2026-10-06 小2）。
   見出し全体に当てると、友達の画面の長い見出しが「ありま／す。」と悪くなったので、効果を確かめた 2 つだけにする。対応しないブラウザは上の normal のまま。 */
html[lang="ja"] :is(#dex-count, #unordered-result-title) { word-break: auto-phrase; }
html[lang="ja"] .domain-pole-labels span { word-break: keep-all; overflow-wrap: anywhere; }
/* 設問文は legend であり、見出し用 keep-all の対象外。本文として文字単位で折る。 */
html[lang="ja"] .question-prompt { word-break: normal; }
/* ヒーロー見出しも本文と同じく文字単位で折る。禁則は shared/tokens.css の
   line-break: strict で保ち、Safari の keep-all 解釈に最小幅を依存させない。 */
html[lang="ja"] .home-world-copy h1 { word-break: normal; }
/* keep-all は英字の空白でも折らなくなる。ページ内の英字見出し（"English + math" 等）が
   折り返せず横へ溢れたため、単語が長すぎる時だけは折れるよう逃げ道を残す。
   日本語には効かない（語の途中に「単語が長すぎる」判定が起きないため）。 */
button, input { font: inherit; }
button { color: inherit; }
button:focus-visible, input:focus-visible { outline: 4px solid var(--modo-violet); outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.copy-fallback-field { position: fixed; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* .topbar は 2026-08-02 のヘッダー統一で shared/site-header.html へ置き換わり、
   HTMLからもJSからも消えた。残っていたルールは全部空振りしていたので削除する（2026-08-04 実測）。 */
.brand { min-height: 44px; padding: 0 4px; border: 0; background: transparent; font-weight: 1000; letter-spacing: -.06em; font-size: var(--modo-text-l); cursor: pointer; }
.brand span { display: inline-grid; place-items: center; width: 20px; height: 20px; margin-left: 5px; border-radius: 50%; background: var(--modo-acid); font-size: var(--modo-text-2xs); letter-spacing: 0; }
.menu-button { display: none; min-height: 44px; padding: 0 12px; border: 1px solid var(--modo-ink); background: var(--modo-panel); font-size: var(--modo-text-2xs); font-weight: 950; cursor: pointer; }
#locale-slot { min-width: 0; }

.view { display: none; min-height: calc(100vh - 64px); }
.view.is-active { display: block; }

.eyebrow, .section-kicker { margin: 0 0 16px; color: var(--modo-violet); font-size: var(--modo-text-xs); font-weight: 1000; letter-spacing: .12em; }
.assessment-actions, .dialog-actions, .result-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.button { min-height: 52px; padding: 0 22px; border: 1px solid var(--modo-ink); border-radius: 0; font-weight: 950; cursor: pointer; box-shadow: var(--modo-shadow-m); transition: transform .16s ease, box-shadow .16s ease; }
.button:hover { transform: translate(2px, 2px); box-shadow: var(--modo-shadow-s); }
.button-primary { background: var(--modo-violet); color: white; }
.button-ghost { background: var(--modo-panel); }
.button-danger { background: var(--modo-danger); color: white; }
.privacy-note, .assessment-footnote { color: var(--modo-muted); font-size: var(--modo-text-xs); font-weight: 700; }

/* TOPは紙の世界の「門」。120体の情景と研究所への導線だけで世界を伝える。 */
.home-world {
  position: relative;
  min-height: calc(100svh - 64px);
  display: grid;
  grid-template-rows: auto auto auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 78% 16%, var(--modo-world-sun) 0 108px, transparent 109px),
    radial-gradient(color-mix(in srgb, var(--modo-ink) 2.8%, transparent) 1px, transparent 1px),
    var(--modo-world-sky);
  background-size: auto, 7px 7px, auto;
}
.home-world-copy { position: relative; z-index: 10; display: grid; justify-items: center; align-content: center; gap: 16px; padding: clamp(46px, 7vh, 86px) min(6vw, 28.8px) 18px; text-align: center; }
.home-world-copy > * { min-width: 0; max-width: 100%; }
.home-world-copy h1 { margin: 0; font-size: clamp(2.1rem, min(5.4vw, 25.92px), var(--modo-text-3xl)); line-height: 1.18; letter-spacing: -.05em; font-weight: 1000; }
.home-world-copy h1 small { display: block; margin-bottom: 12px; color: var(--modo-world-soft); font-size: clamp(.82rem, min(1.2vw, 5.76px), var(--modo-text-m)); font-weight: 900; letter-spacing: .08em; }
.home-world-copy > p { margin: 0; max-width: min(34em, 100%); color: var(--modo-world-soft); font-size: clamp(.95rem, min(1.35vw, 6.48px), var(--modo-text-l)); line-height: 1.9; font-weight: 700; word-break: auto-phrase; text-wrap: balance; }
.home-door { min-height: 64px; display: inline-flex; align-items: center; gap: 12px; margin-top: 10px; padding: 0 42px; border: 0; border-radius: 999px; background: var(--modo-violet); color: white; font: inherit; font-size: var(--modo-text-l); font-weight: 950; letter-spacing: .02em; box-shadow: 0 10px 0 var(--modo-world-door-deep), 0 18px 30px color-mix(in srgb, var(--modo-world-door-deep) 28%, transparent); cursor: pointer; transition: transform .14s ease, box-shadow .14s ease; }
html[lang="ja"] .home-door { white-space: nowrap; }
.home-door:hover { transform: translateY(3px); box-shadow: 0 7px 0 var(--modo-world-door-deep), 0 12px 22px color-mix(in srgb, var(--modo-world-door-deep) 26%, transparent); }
.home-door small { font-size: var(--modo-text-xs); font-weight: 800; white-space: nowrap; opacity: .82; }
.home-world-copy .home-promise { min-height: 24px; font-size: var(--modo-text-xs); font-weight: 800; letter-spacing: .04em; }

/* 120体を分類せず、同じ地形の住人として一望する。 */
.home-terrain {
  position: relative;
  height: clamp(340px, 46vh, 470px);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-color: var(--modo-violet) color-mix(in srgb, var(--modo-panel) 70%, transparent);
}
.home-terrain:focus-visible { outline: 4px solid var(--modo-violet); outline-offset: -4px; }
/* 横に長い世界。120体が並ぶぶんだけキャンバスが伸び、丘は繰り返し背景で続く */
.home-terrain-canvas { position: relative; width: max-content; min-width: 100%; height: 100%; }
/* 丘は世界の稜線として繰り返し背景で描く */
.home-hill { position: absolute; left: 0; right: 0; }
.home-hill.far {
  bottom: 20%; height: 34%;
  background: radial-gradient(ellipse 260px 100% at 50% 100%, var(--modo-world-hill-far) 0 99.5%, transparent 100%) repeat-x bottom;
  background-size: 470px 100%;
}
.home-hill.mid {
  bottom: 15%; height: 26%;
  background: radial-gradient(ellipse 215px 100% at 50% 100%, var(--modo-world-hill-mid) 0 99.5%, transparent 100%) repeat-x bottom;
  background-size: 380px 100%;
}
.home-hill.near {
  bottom: 12%; height: 17%;
  background: radial-gradient(ellipse 330px 100% at 50% 100%, var(--modo-world-hill-near) 0 99.5%, transparent 100%) repeat-x bottom;
  background-size: 560px 100%;
}
.home-ground { position: absolute; right: 0; bottom: 0; left: 0; height: 14%; background: var(--modo-world-ground); }
.home-cloud { position: absolute; border-radius: 999px; background: var(--modo-panel); box-shadow: 0 4px 14px color-mix(in srgb, var(--modo-ink) 5%, transparent); opacity: .92; }
.home-cloud::before, .home-cloud::after { content: ""; position: absolute; border-radius: 999px; background: inherit; }
.home-cloud.c1 { top: 4%; left: 10%; width: 150px; height: 44px; }
.home-cloud.c1::before { top: -22px; left: 26px; width: 62px; height: 40px; }
.home-cloud.c1::after { top: -14px; right: 24px; width: 44px; height: 30px; }
.home-cloud.c1 { left: 60px; }
.home-cloud.c2 { top: 26%; left: 620px; width: 110px; height: 34px; }
.home-cloud.c2::before { top: -16px; left: 34px; width: 46px; height: 30px; }
.home-cloud.c3 { top: 8%; left: 1180px; width: 132px; height: 40px; }
.home-cloud.c3::before { top: -20px; left: 30px; width: 56px; height: 36px; }
.home-cloud.c4 { top: 22%; left: 1760px; width: 120px; height: 36px; }
.home-cloud.c4::after { top: -15px; right: 26px; width: 46px; height: 30px; }
/* 住人は地形の上に並ぶ。3つの高さ（レーン）を巡回させ、一列の棚に見えないようにする */
#home-world-residents {
  position: relative;
  height: 100%;
  display: flex;
  /* 折り返さない。120体が一列に並び、横スクロールで会いにいく（折り返すと下揃えで全員が地形の上へ隠れる・2026-08-27 実測） */
  align-items: flex-end;
  gap: clamp(10px, min(2.2vw, 10.56px), 30px);
  /* 縦方向の余白はpxで指定する。%は「横幅」基準で解決されるため、
     横に広いキャンバスでは4%が92pxに化けて住人が宙に浮く（2026-08-16 実測） */
  padding: 0 clamp(16px, min(5vw, 24px), 60px) 34px;
}
.home-dweller {
  position: relative;
  flex: 0 0 auto;
  /* 札を折り返さないので、枠幅は札に合わせて広がる。最小幅だけ決めて間隔を保つ */
  width: auto;
  min-width: clamp(132px, min(34vw, 163.2px), 176px);
  display: grid;
  justify-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.home-terrain:focus-visible .home-dweller[data-active] .home-dweller-name { outline: 4px solid var(--modo-violet); outline-offset: 3px; }
.home-dweller[data-lane="0"] { margin-bottom: 0; }
.home-dweller[data-lane="1"] { margin-bottom: 30px; }
.home-dweller[data-lane="2"] { margin-bottom: 14px; }
/* 高さで揃える。キャラは縦横比がまちまちなので、幅で決めると背の高い子が地形からはみ出す */
.home-dweller img {
  height: clamp(88px, 15vh, 132px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px color-mix(in srgb, var(--modo-ink) 16%, transparent));
  animation: home-breathe 5.2s ease-in-out infinite;
  transform-origin: 50% 100%;
}
.home-dweller:nth-child(3n) img { animation-delay: -1.7s; }
.home-dweller:nth-child(3n + 2) img { animation-delay: -3.3s; }
.home-dweller-name {
  max-width: none;
  padding: 5px 11px;
  border: 1px solid var(--modo-line);
  border-radius: 999px;
  background: var(--modo-panel);
  box-shadow: none;
  font-size: var(--modo-text-2xs);
  font-weight: 900;
  line-height: 1.35;
  text-align: center;
  /* 札の文字は折り返さない（吉田さま指示・旧版でも同じ指摘）。長い一言は札ごと横に伸ばし、住人の枠が札に合わせて広がる */
  white-space: nowrap;
}
.home-dweller-name small, .home-dweller-name span { display: block; }
.home-dweller-name small { margin-bottom: 2px; color: var(--modo-world-soft); font-size: var(--modo-text-2xs); letter-spacing: .08em; }
@keyframes home-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }

.home-rpg-sections { width: min(980px, calc(100% - 36px)); display: grid; gap: 24px; margin: 0 auto; padding: clamp(40px, min(6vw, 28.8px), 72px) 0 34px; }
.home-rpg-sections .rpg-kicker { color: var(--modo-ink); }
.home-institute-window a { min-height: 44px; display: inline-flex; align-items: center; margin-top: 14px; padding: 0; border: 0; background: transparent; color: var(--modo-violet); font: inherit; font-size: var(--modo-text-s); font-weight: 950; text-decoration: none; cursor: pointer; }
.rpg-window.home-institute-window { background: transparent; color: var(--modo-ink); box-shadow: none; }
.home-institute-window .rpg-kicker { color: var(--modo-acid); }
.home-institute-window > p:not(.rpg-kicker) { margin: 8px 0 0; font-size: var(--modo-text-m); line-height: 1.7; font-weight: 900; }
.home-institute-window a { color: var(--modo-acid); }

.site-footer { padding: 38px min(6vw, 28.8px) 24px; border-top: 1px solid var(--modo-ink-soft); background: var(--modo-ink); color: white; }
.footer-brand { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 24px; }
.footer-logo { color: white; font-size: var(--modo-text-xl); }
.footer-brand p { margin: 0; color: var(--modo-line); line-height: 1.7; text-align: right; font-size: var(--modo-text-s); font-weight: 700; }
.footer-links { display: flex; flex-wrap: wrap; column-gap: 24px; padding: 12px 0; border-top: 1px solid var(--modo-ink-soft); }
.footer-links button, .footer-links a, .footer-detail-links button, .footer-detail-links a { min-width: 44px; min-height: 44px; display: flex; align-items: center; padding: 0; border: 0; background: transparent; color: white; font-size: var(--modo-text-s); font-weight: 780; text-align: left; text-decoration: none; cursor: pointer; }
.footer-links button:hover, .footer-links a:hover, .footer-detail-links button:hover, .footer-detail-links a:hover { color: var(--modo-acid); }
.footer-foldouts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; }
.footer-foldouts details { border-top: 1px solid var(--modo-ink-soft); }
.footer-foldouts summary { display: flex; align-items: center; justify-content: space-between; min-height: 52px; padding: 4px 0; color: var(--modo-line); font-size: var(--modo-text-xs); font-weight: 800; list-style: none; cursor: pointer; }
.footer-foldouts summary::-webkit-details-marker { display: none; }
.footer-foldouts summary::after { content: "+"; margin-left: 12px; }
.footer-foldouts details[open] summary::after { content: "−"; }
.footer-detail-links { display: grid; padding: 0 0 16px; }
.footer-foldouts details:not([open]) .footer-detail-links { display: none; }
.footer-legal { display: flex; flex-wrap: wrap; gap: 0 20px; padding-top: 16px; border-top: 1px solid var(--modo-ink-soft); }
.footer-legal a { display: inline-flex; align-items: center; min-width: 44px; min-height: 44px; color: var(--modo-muted-on-ink); font-size: var(--modo-text-2xs); text-decoration: none; }
.site-footer :is(a, button, summary):focus-visible { outline: 3px solid var(--modo-acid); outline-offset: 3px; }
.footer-bottom { display: flex; justify-content: space-between; gap: 24px; padding-top: 24px; color: var(--modo-muted-on-ink); font-size: var(--modo-text-2xs); font-weight: 700; }
.assessment-view { background: var(--modo-paper); }
.assessment-shell { width: min(560px, min(92vw, 441.6px)); margin: 0 auto; padding: 48px 0 80px; }
.progress-row { position: sticky; z-index: 9; top: var(--site-header-h); display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 18px; margin-bottom: 28px; padding: 10px 0; border-bottom: 1px solid var(--modo-ink); background: color-mix(in srgb, var(--modo-paper) 96%, transparent); backdrop-filter: blur(12px); }
body.is-assessing .progress-row { top: 0; }
.assessment-heading { margin: 0; font-size: var(--modo-text-xs); line-height: 1; letter-spacing: .12em; white-space: nowrap; }
.text-button { min-height: 44px; display: inline-flex; align-items: center; border: 0; background: transparent; font-weight: 900; cursor: pointer; }
.assessment-progress { min-width: 0; display: grid; grid-template-columns: auto minmax(40px, 1fr); align-items: center; gap: 12px; }
.assessment-progress strong { font-size: var(--modo-text-s); font-weight: 1000; font-variant-numeric: tabular-nums; white-space: nowrap; }
.progress-track { height: 8px; border: 1px solid var(--modo-ink); background: var(--modo-panel); overflow: hidden; }
.progress-track span { display: block; width: 2%; height: 100%; background: var(--modo-violet); transition: width .25s ease; }
.question-list { display: grid; gap: var(--modo-space-5); margin: 0; padding: 0; list-style: none; }
.assessment-instruction { margin: -12px 0 20px; line-height: var(--modo-leading-body); }
.question-item { min-width: 0; scroll-margin-top: calc(var(--site-header-h) + 96px); padding: 0 6px 6px 0; }
.question-dialog {
  min-width: 0; padding: 20px 18px; border: 3px solid var(--modo-ink); border-radius: 6px;
  background: var(--modo-panel);
  box-shadow: 6px 6px 0 var(--modo-ink), inset 0 0 0 3px var(--modo-panel), inset 0 0 0 4px var(--modo-ink);
}
.question-scene-number { margin: 0 0 7px; color: var(--modo-muted); font-size: var(--modo-text-2xs); font-weight: 950; letter-spacing: .1em; }
.question-context { margin: 0; color: var(--modo-ink); font-size: var(--modo-text-m); font-weight: 900; line-height: 1.65; }
/* 「？」場面の説明。紙に書き足したメモとして、左の縦罫1本で本文と分ける。
   設問カード内は ink/ink-soft の2階調のみ（2026-08-16 吉田さま指摘）に従う。
   ボタンは context と同じ行に置く＝カードの高さを1行も増やさない（60問で3.1画面ぶんの差）。 */
.question-head { display: flex; align-items: flex-start; gap: 10px; margin: 0; }
.question-head > .question-context { flex: 1; min-width: 0; margin: 0; }
.question-scene-toggle {
  /* 390px監査が実寸で検出できる40pxを確保し、当たり判定は ::before でさらに上下へ広げる。
     負の縦マージンで、文脈行の高さ（文字1行ぶん）を 40px に押し広げない
     （2026-09-12 吉田さま指摘「1行目と2行目に隙間」の実因）。 */
  position: relative; flex: none; align-self: flex-start; width: 40px; min-height: 40px; margin-block: -8px; padding: 0;
  border: 1px solid var(--modo-ink-soft); border-radius: 999px; background: transparent;
  color: var(--modo-ink-soft); font: inherit; font-size: 15px; font-weight: 900;
  line-height: 1; cursor: pointer;
}
.question-scene-toggle::before {
  content: ""; position: absolute; inset: -6px -2px;
}
/* 開いている間は太い ink の輪。設問カード内は ink / ink-soft の2階調だけ（2026-08-16） */
.question-scene-toggle[aria-expanded="true"] { border: 2px solid var(--modo-ink); color: var(--modo-ink); }
.question-scene-toggle:hover { border-color: var(--modo-ink); color: var(--modo-ink); }
.question-scene-toggle:focus-visible { outline: 4px solid var(--modo-violet); outline-offset: 2px; }
.question-scene-body {
  /* 設問文の上に開く（spec §3.1）。文脈行と設問文の間に挟まる */
  margin: 8px 0 10px; padding: 2px 0 2px 14px;
  border-inline-start: 2px solid var(--modo-ink-soft);
  color: var(--modo-ink-soft); font-size: var(--modo-text-xs);
  font-weight: 700; line-height: 1.8;
}

.scale { min-width: 0; margin: 0; padding: 0; border: 0; }
.question-prompt { width: 100%; margin: 7px 0 0; padding: 0; font-size: clamp(1rem, min(4.2vw, 20.16px), var(--modo-text-l)); font-weight: 950; line-height: 1.5; }
.scale-column { width: 100%; margin-inline: auto; }
/* 5段階は横1列の丸。小さい丸=あてはまらない、大きい丸=あてはまる。選択で acid に塗る（枠・影は置かない） */
.scale-row { display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 0 2px; }
.scale-option { position: relative; flex: none; display: grid; place-items: center; margin: 0; padding: 6px; cursor: pointer; }
.scale-option input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.scale-dot { display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--modo-ink); background: var(--modo-panel); transition: background .12s ease, transform .12s ease; }
/* 選んだ丸には白の「✓」を出す。塗りだけでは未選択の生成り（#fffdf8）と見分けがつかない（2026-09-12 吉田さま指摘） */
.scale-dot::after { content: "✓"; color: var(--modo-panel); font-weight: 900; line-height: 1; opacity: 0; transition: opacity .12s ease; }
.scale-option[data-step="1"] .scale-dot { width: 28px; height: 28px; font-size: 14px; }
.scale-option[data-step="2"] .scale-dot { width: 34px; height: 34px; font-size: 17px; }
.scale-option[data-step="3"] .scale-dot { width: 40px; height: 40px; font-size: 20px; }
.scale-option[data-step="4"] .scale-dot { width: 47px; height: 47px; font-size: 23px; }
.scale-option[data-step="5"] .scale-dot { width: 54px; height: 54px; font-size: 27px; }
.scale-option:hover .scale-dot { transform: scale(1.06); }
.scale-option:has(input:checked) .scale-dot { background: var(--modo-violet); border-color: var(--modo-violet); transform: scale(1.04); }
.scale-option:has(input:checked) .scale-dot::after { opacity: 1; }
.scale-option:has(input:focus-visible) .scale-dot { outline: 4px solid var(--modo-violet); outline-offset: 3px; }
.scale-poles { display: flex; justify-content: space-between; gap: 8px; margin-top: 6px; color: var(--modo-muted); font-size: .6875rem; font-weight: 900; pointer-events: none; }
.scale-poles span { min-width: 0; text-align: center; white-space: nowrap; }
.scale-caption { min-height: 1.5em; margin: 8px 0 0; color: var(--modo-ink); font-size: var(--modo-text-s); font-weight: 900; line-height: 1.5; }
.scale-caption-step { display: none; }
.question-item:has(input[value="1"]:checked) .scale-caption-step[data-step="1"],
.question-item:has(input[value="2"]:checked) .scale-caption-step[data-step="2"],
.question-item:has(input[value="3"]:checked) .scale-caption-step[data-step="3"],
.question-item:has(input[value="4"]:checked) .scale-caption-step[data-step="4"],
.question-item:has(input[value="5"]:checked) .scale-caption-step[data-step="5"] { display: inline; }
/* 「その場面を経験したことがない」は答えの行（選択ラベル）の右端に控えめなテキストで置く。
   枠・影の command 見た目は廃止（2026-08-31 オーナー指摘「ボタンの場所が謎」）。選択中だけ acid の丸枠 */
.scale-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; column-gap: 12px; }
.scale-footer .scale-caption { flex: 1 1 auto; }
.not-applicable {
  flex: none; margin: 4px 0 0 auto; padding: 12px 2px; border: 0; background: none;
  color: var(--modo-muted); font: inherit; font-size: var(--modo-text-xs); font-weight: 900; line-height: 1.35;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.not-applicable:hover { color: var(--modo-ink); }
.not-applicable.is-selected { margin-top: 8px; padding: 10px 12px; border: 2px solid var(--modo-ink); border-radius: 999px; background: var(--modo-acid); color: var(--modo-ink); text-decoration: none; }
.not-applicable:focus-visible { outline: 4px solid var(--modo-violet); outline-offset: 2px; }
.assessment-actions { justify-content: space-between; margin-top: 28px; }
.assessment-actions .button { min-width: 145px; }
.assessment-back { min-height: 44px; padding: 0 8px; border: 0; background: transparent; color: var(--modo-muted); font-weight: 900; cursor: pointer; }
.assessment-back:disabled { visibility: hidden; }
body.is-assessing .question-item { scroll-margin-top: calc(var(--modo-space-6) + var(--modo-space-2)); }
body.is-assessing .question-item.is-current .question-dialog { border-inline-start: 8px solid var(--modo-violet); }
body.is-assessing #question-next.is-ready { outline: 3px solid var(--modo-ink); outline-offset: 4px; }
/* opacity .35 だと紫地＋白文字が淡藤色＋白になり、ラベルが読めなくなる
   （全サイズの「次へ」「初回80問を始める」等で実測・2026-08-09）。
   assessment-prototype.css と同じ「読める無効色」へ揃える（実測コントラスト6.5:1）。 */
.button:disabled { opacity: 1; border-color: var(--modo-line); background: var(--modo-line); color: var(--modo-ink-soft); cursor: not-allowed; transform: none; box-shadow: none; }

.result-view { padding-bottom: 80px; }
.result-threshold-note { max-width: 560px !important; margin-top: 12px; font-size: var(--modo-text-xs) !important; line-height: 1.65 !important; opacity: .9; }
.result-threshold-note a { min-height: 44px; display: inline-flex; align-items: center; color: inherit; font-weight: 900; }
[data-feedback-copy-id] { user-select: text; }
[data-feedback-copy-id]::selection { background: var(--modo-acid); color: var(--modo-ink); }
.score-section { padding: 56px; border: 1px solid var(--modo-ink); background: var(--modo-panel); }
.score-section .section-lead { max-width: 680px; margin: -10px 0 36px; color: var(--modo-muted); line-height: 1.8; font-weight: 650; }
.score-section .facet-grid { margin-top: 34px; }
.copy-feedback-footnote { margin: 24px 0 0; color: var(--modo-muted); font-size: var(--modo-text-xs); line-height: 1.7; }
.copy-feedback-footnote a { display: inline-flex; align-items: center; min-height: 44px; color: var(--modo-violet); font-size: var(--modo-text-xs); font-weight: 850; }
.result-section { margin-top: 72px; }
.result-section h2 { margin: 0 0 26px; font-size: clamp(2.1rem, min(4vw, 19.2px), var(--modo-text-3xl)); letter-spacing: -.055em; }
.facet-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }

/* 解説つきの特性カード（有料）。数値だけの旧カードは3列で足りたが、
   1項目あたり約350字の本文が入るため1列の読み物ブロックへ切り替える。 */
.facet-grid:has(.has-detail) { grid-template-columns: 1fr; gap: 20px; }
.facet-detail { display: grid; gap: 18px; margin-top: 22px; }
.facet-detail p { margin: 0; line-height: 1.9; }

/* 120個体の長文入口。外側は共通のRPG窓、展開後の章目次と本文は旧読書モードをそのまま使う。 */
  min-width: 0; min-height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  cursor: pointer; list-style: none;
}
.individual-longform-shared h2 { margin: 6px 0 14px; }
.individual-longform-shared > p:last-child { margin: 0; line-height: 1.95; font-weight: 600; }
.domain-list { display: grid; gap: 14px; }
.domain-poles-note { margin: -18px 0 24px; font-size: var(--modo-text-s); font-weight: 900; }
.domain-pole-row { padding: 16px; border-bottom: 1px solid var(--modo-ink); }
.domain-pole-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.domain-pole-heading h3 { margin: 0; font-size: var(--modo-text-s); font-weight: 950; letter-spacing: -.02em; }
.domain-pole-heading strong { flex: 0 0 auto; color: var(--modo-muted); font-size: var(--modo-text-xs); font-variant-numeric: tabular-nums; }
.domain-pole-labels { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 12px; font-size: var(--modo-text-xs); font-weight: 850; line-height: 1.4; }
.domain-pole-labels span:last-child { text-align: right; }
.domain-pole-track { position: relative; height: 12px; margin-top: 9px; border: 1px solid var(--modo-ink); background: color-mix(in srgb, var(--modo-ink) 8%, var(--modo-paper)); }
.domain-pole-track::after { content: ""; position: absolute; top: -3px; bottom: -3px; left: 50%; width: 1px; background: color-mix(in srgb, var(--modo-ink) 35%, transparent); }
.domain-pole-range { position: absolute; z-index: 1; top: 2px; bottom: 2px; left: var(--domain-low); width: var(--domain-range); background: color-mix(in srgb, var(--modo-violet) 28%, transparent); }
.domain-pole-marker { position: absolute; z-index: 2; top: 50%; left: clamp(7px, var(--domain-score), calc(100% - 7px)); width: 14px; height: 14px; border: 2px solid var(--modo-paper); border-radius: 50%; background: var(--modo-ink); box-shadow: 0 0 0 1px var(--modo-ink); transform: translate(-50%, -50%); }
.domain-pole-row.is-missing { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 16px; }
.domain-pole-missing { margin: 0; color: var(--modo-muted); font-size: var(--modo-text-xs); font-weight: 750; }
.domain-pole-list { border: 1px solid var(--modo-ink); background: var(--modo-paper); }
.domain-pole-list .domain-pole-row:last-child { border-bottom: 0; }
.outcome-domain-list { display: grid; gap: 10px; margin: 30px 0; border: 1px solid var(--modo-ink); background: var(--modo-paper); }
.outcome-domain-list .domain-pole-row:last-child { border-bottom: 0; }
.score-note { margin: 22px 0 0; color: var(--modo-muted); font-size: var(--modo-text-xs); font-weight: 650; }
.result-paywall-refund { margin: 18px 0 0; font-size: var(--modo-text-s); font-weight: 950; }
/* クリーム地に acid(#d7ff45) の文字はコントラスト約1.3:1で読めなかった（2026-08-17 指摘）。
   返金は売りの一つなので、色ではなく反転チップで目立たせる */
.result-paywall-card .result-paywall-refund { display: inline-block; padding: 6px 12px; background: var(--modo-ink); color: var(--modo-acid); }
.share-status { min-height: 24px; margin: 20px 0 0; color: var(--modo-violet); font-size: var(--modo-text-xs); line-height: 1.6; font-weight: 850; }
/* 旧4テーマのカード（.result-theme-grid / .result-theme-card）は 2026-08-18 に撤去した。
   1テーマ1文だけで、直後の長文8章に同じテーマが各1,200〜1,400字で全文無料であり、
   最も期待を煽る位置が最も薄いという自壊構造だった。置き換え先はページ先頭の目次 .result-contents-list（2026-09-13）。 */
/* このセレクタは解錠後の有料テーマ（.full-report-theme）と共有していたため、
   前半（.result-theme-card > span）だけ外して後半を残す。まとめて消すと有料側の見出し色が飛ぶ。 */
.full-report-theme header span { color: var(--modo-violet); font-size: var(--modo-text-2xs); font-weight: 950; letter-spacing: .07em; }
.result-paywall { position: relative; margin-top: 34px; padding: 0 26px 34px; border: 1px solid var(--modo-ink); background: var(--modo-ink); box-shadow: 8px 8px 0 var(--modo-violet); overflow: hidden; }
.result-paywall-mask { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; height: 210px; padding: 30px 0 0; opacity: .32; filter: blur(4px); }
.result-paywall-mask > div { display: grid; align-content: start; gap: 14px; padding: 20px; border: 1px solid white; }
.result-paywall-mask span { display: block; height: 12px; background: white; }
.result-paywall-mask span:nth-child(2) { width: 88%; }
.result-paywall-mask span:nth-child(3) { width: 68%; }
.result-paywall-card { position: relative; z-index: 1; width: min(850px, 100%); margin: -118px auto 0; padding: 34px; border: 1px solid var(--modo-ink); background: var(--modo-paper); box-shadow: 7px 7px 0 var(--modo-acid); }
.result-paywall-lock { display: inline-flex; min-height: 32px; align-items: center; margin-bottom: 18px; padding: 0 10px; border: 1px solid var(--modo-ink); background: var(--modo-ink); color: white; font-size: var(--modo-text-2xs); font-weight: 950; letter-spacing: .12em; }
.result-paywall-card h2 { max-width: 760px; margin: 0; font-size: clamp(2.25rem, min(4.5vw, 21.6px), var(--modo-text-3xl)); line-height: var(--modo-leading-tight); letter-spacing: -.065em; }
.result-paywall-title-break { display: none; }
.result-paywall-card > p:not(.section-kicker) { max-width: 700px; margin: 20px 0 0; line-height: 1.75; font-weight: 700; }
.result-paywall-card ul { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin: 26px 0; padding: 0; border: 1px solid var(--modo-ink); list-style: none; }
.result-paywall-card li { min-height: 54px; display: flex; align-items: center; padding: 10px 14px; border-right: 1px solid var(--modo-ink); border-bottom: 1px solid var(--modo-ink); font-size: var(--modo-text-xs); font-weight: 900; }
.result-paywall-card li:nth-child(2n) { border-right: 0; }
.result-paywall-card li:last-child { grid-column: 1 / -1; border-right: 0; border-bottom: 0; background: var(--modo-acid); }
.result-paywall-card li:nth-last-child(2) { border-bottom: 0; }
.result-paywall-personal { display: grid; gap: 6px; margin-bottom: 24px; color: var(--modo-muted); font-size: var(--modo-text-xs); }
.result-paywall-personal strong { color: var(--modo-ink); line-height: 1.55; }
.result-paywall-card .button { min-width: min(100%, 310px); }
.result-paywall-card > small { display: block; margin-top: 12px; color: var(--modo-muted); font-size: var(--modo-text-xs); line-height: 1.65; font-weight: 750; }
.unlocked-full-report { margin-top: 42px; padding: 42px; border: 1px solid var(--modo-ink); background: var(--modo-violet-pale); box-shadow: 8px 8px 0 var(--modo-violet); }
.full-report-heading { max-width: 820px; }
.full-report-heading h2 { margin: 0; font-size: clamp(3rem, min(6vw, 28.8px), var(--modo-text-3xl)); line-height: var(--modo-leading-tight); letter-spacing: -.075em; }
.full-report-heading > p:last-child { max-width: 680px; color: var(--modo-muted); line-height: 1.8; font-weight: 700; }
.full-report-theme-grid { display: grid; grid-template-columns: 1fr 1fr; margin-top: 42px; border: 1px solid var(--modo-ink); }
.full-report-theme { min-width: 0; padding: 28px; border-right: 1px solid var(--modo-ink); border-bottom: 1px solid var(--modo-ink); background: var(--modo-panel); }
.full-report-theme:nth-child(2n) { border-right: 0; }
.full-report-theme:nth-last-child(-n+2) { border-bottom: 0; }
.full-report-theme h3 { margin: 10px 0 24px; font-size: clamp(1.8rem, min(3vw, 14.4px), var(--modo-text-3xl)); line-height: 1; letter-spacing: -.055em; }
.full-report-theme p { margin: 12px 0 0; line-height: 1.8; font-weight: 680; }
.full-report-action { margin-top: 24px; padding: 30px; border: 1px solid var(--modo-ink); background: var(--modo-acid); }
.full-report-action h3 { margin: 0; font-size: clamp(1.8rem, min(3vw, 14.4px), var(--modo-text-3xl)); letter-spacing: -.05em; }
.full-report-action > p:last-child { max-width: 760px; margin-bottom: 0; line-height: 1.8; font-weight: 750; }
.unlocked-full-report .score-section { margin-top: 58px; }
.premium-half-marker { height: 1px; }
.disclaimer { margin-top: 38px; padding-top: 18px; border-top: 1px solid var(--modo-ink); color: var(--modo-muted); font-size: var(--modo-text-xs); line-height: 1.7; }
.outcome-only { width: min(760px, min(90vw, 432px)); margin: 10vh auto; padding: 48px; border: 1px solid var(--modo-ink); background: var(--modo-panel); box-shadow: var(--modo-shadow-l); }
.outcome-only h1 { font-size: clamp(2.5rem, min(6vw, 28.8px), var(--modo-text-3xl)); line-height: var(--modo-leading-tight); letter-spacing: -.06em; }

.method-view { padding: min(7vw, 33.6px) min(5vw, 24px) min(10vw, 48px); }
.friend-view, .shop-view, .dex-view { padding: min(7vw, 33.6px) min(5vw, 24px) min(10vw, 48px); }
/* ビューの最小高さ(100vh-64px)に対して中身が短く、下だけ430px以上空いていた
   （幅430で画面高の6割。2026-08-09 実測）。ビューごと中央寄せにして余白を上下へ分ける */
#friend-view.is-active:has(.connection-hub) { display: grid; align-content: center; }
.connection-hub { max-width: 900px; margin: 0 auto; padding: clamp(26px, min(4vw, 19.2px), 52px); border-radius: 28px; background: var(--modo-world-sky); }
.connection-hub h1 { max-width: 760px; margin: 0; font-size: clamp(2.5rem, min(6vw, 28.8px), var(--modo-text-3xl)); line-height: var(--modo-leading-tight); letter-spacing: -.06em; }
.connection-hub > p:not(.section-kicker) { max-width: 650px; color: var(--modo-world-soft); line-height: var(--modo-leading-body); font-weight: 700; }
.connection-card { display: grid; grid-template-columns: minmax(170px, .65fr) minmax(0, 1.35fr); gap: 24px; align-items: center; margin-top: 28px; padding: 22px; border-radius: 24px; background: var(--modo-panel); box-shadow: 0 6px 22px color-mix(in srgb, var(--modo-ink) 8%, transparent); }
.connection-character { min-width: 0; display: grid; justify-items: center; gap: 8px; }
.connection-character svg { width: min(180px, 100%); }
.connection-character img { width: min(180px, 100%); height: auto; display: block; }
.connection-character strong { text-align: center; }
.connection-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.connection-actions .button { border: 0; border-radius: 999px; box-shadow: none; }
/* 副ボタンの面(--modo-panel)はハブの地(--modo-world-sky)とほぼ同色で、
   枠も影も無いと「素の文字」に見えて押せると分からなかった（1280/1920/768で実測・2026-08-09）。
   輪郭を1本入れて操作できることを示す */
.connection-actions .button-ghost { border: 1px solid var(--modo-line); }
.connection-card :is(#connection-status, #connection-reply-summary) { grid-column: 2; min-height: 24px; margin: 0; color: var(--modo-world-soft); font-size: var(--modo-text-xs); font-weight: 750; }
.method-hero { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(300px, .55fr); gap: min(6vw, 28.8px); align-items: center; min-height: 590px; padding-bottom: min(7vw, 33.6px); }
.method-hero h1 { margin: 0; font-size: clamp(4rem, min(8vw, 38.4px), var(--modo-text-3xl)); line-height: var(--modo-leading-tight); letter-spacing: -.08em; }
.method-hero h1 span { color: var(--modo-violet); }
.method-hero > div > p:last-child { max-width: 690px; margin-top: 34px; color: var(--modo-muted); font-size: var(--modo-text-m); line-height: 1.85; font-weight: 680; }
.method-origin-card { display: grid; gap: 18px; padding: 28px; border: 1px solid var(--modo-ink); background: var(--modo-acid); box-shadow: var(--modo-shadow-l); transform: rotate(1.4deg); }
.method-origin-card small { font-size: var(--modo-text-2xs); font-weight: 1000; letter-spacing: .12em; }
.method-origin-card strong { font-size: clamp(4.5rem, min(9vw, 43.2px), var(--modo-text-3xl)); line-height: var(--modo-leading-tight); letter-spacing: -.09em; }
.method-origin-card span { font-size: var(--modo-text-m); font-weight: 900; }
.method-origin-card b { padding-top: 18px; border-top: 1px solid var(--modo-ink); font-size: var(--modo-text-2xs); letter-spacing: .08em; }
.method-flow { display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--modo-ink); }
.method-flow article { position: relative; min-width: 0; min-height: 410px; padding: 22px; border-right: 1px solid var(--modo-ink); background: var(--modo-panel); }
.method-flow article:last-child { border-right: 0; background: var(--modo-acid); }
.method-flow article:not(:last-child)::after { content: "→"; position: absolute; z-index: 2; top: 18px; right: -14px; display: grid; place-items: center; width: 28px; height: 28px; border: 1px solid var(--modo-ink); border-radius: 50%; background: var(--modo-paper); font-weight: 1000; }
.method-flow small { display: block; min-height: 42px; overflow-wrap: anywhere; font-size: var(--modo-text-2xs); font-weight: 1000; letter-spacing: .08em; }
.method-flow span { display: inline-block; margin-top: 54px; padding: 6px 8px; border: 1px solid var(--modo-ink); background: var(--modo-paper); font-size: var(--modo-text-2xs); font-weight: 950; }
/* 5列に分かれるカードなので1280pxでも内寸186pxしかない。見出しは句読点を持たない短文が多く、
   html[lang="ja"] の keep-all（語中で折らない）だと折る場所が無く枠を越えて隣のカードまで
   はみ出していた（2026-08-05 PC幅で実測）。ここだけ語中の折り返しを許す */
/* word-break: normal を書いても効いていなかった。`.method-flow h2`(0,1,1) は
   29行の `html[lang="ja"] :is(h1,h2,h3)`(0,1,2) に特異度で負けるため keep-all のまま。
   keep-all だと読点までしか折れず、緊急改行が「、」を行頭へ落としていた（1280px実測・2026-08-05）。
   html[lang] を前置して特異度で上回らせる。 */
html[lang="ja"] .method-flow h2, .method-flow h2 { margin: 16px 0 12px; font-size: clamp(1.3rem, min(2.2vw, 10.56px), var(--modo-text-xl)); line-height: 1.05; letter-spacing: -.055em; word-break: normal; overflow-wrap: break-word; }
.method-flow p { margin: 0; color: var(--modo-muted); font-size: var(--modo-text-xs); line-height: 1.7; font-weight: 650; }
.method-separation, .method-guardrails { display: grid; grid-template-columns: minmax(260px, .65fr) minmax(0, 1.35fr); gap: min(6vw, 28.8px); margin-top: 100px; padding-top: 70px; border-top: 1px solid var(--modo-ink); }
/* 見出しは minmax(260px, .65fr) の左列に入るが、5.5vw は画面幅に比例するため列幅を超える。
   1280pxで70.4px×7文字=493px に対し列は約260pxしかなく、「日本らしさで、」が106px はみ出していた
   （2026-08-05 実測）。列幅から逆算して上限を下げ、折り返しも許す */
.method-separation h2, .method-guardrails h2 { margin: 0; font-size: clamp(1.9rem, min(3.1vw, 14.88px), var(--modo-text-3xl)); line-height: var(--modo-leading-tight); letter-spacing: -.07em; word-break: normal; overflow-wrap: anywhere; }
.method-layer-grid { display: grid; border: 1px solid var(--modo-ink); }
.method-layer-grid article { min-height: 200px; padding: 24px; border-bottom: 1px solid var(--modo-ink); background: var(--modo-panel); }
.method-layer-grid article:last-child { border-bottom: 0; background: var(--modo-violet-pale); }
.method-layer-grid small { font-size: var(--modo-text-2xs); font-weight: 1000; letter-spacing: .1em; }
.method-layer-grid h3 { margin: 34px 0 8px; font-size: var(--modo-text-xl); letter-spacing: -.045em; }
.method-layer-grid p { margin: 0; color: var(--modo-muted); line-height: 1.7; font-weight: 650; }
.method-guardrails ul { margin: 0; padding: 0; border: 1px solid var(--modo-ink); list-style: none; }
.method-guardrails li { display: grid; grid-template-columns: 60px 1fr; align-items: center; min-height: 92px; border-bottom: 1px solid var(--modo-ink); background: var(--modo-panel); }
.method-guardrails li:last-child { border-bottom: 0; }
.method-guardrails li b { display: grid; align-self: stretch; place-items: center; border-right: 1px solid var(--modo-ink); background: var(--modo-acid); }
.method-guardrails li span { padding: 20px; font-weight: 850; line-height: 1.6; }
.method-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 60px; }
.method-actions a { display: inline-flex; align-items: center; color: inherit; text-decoration: none; }

.friend-hero { display: grid; grid-template-columns: minmax(0, .8fr) minmax(320px, .5fr); gap: 40px; align-items: center; padding-bottom: 54px; border-bottom: 1px solid var(--modo-ink); }
.friend-hero h1 { margin: 0; font-size: clamp(3.2rem, min(7vw, 33.6px), var(--modo-text-3xl)); line-height: var(--modo-leading-tight); letter-spacing: -.07em; }
.friend-hero.is-referral { align-items: start; padding-bottom: 40px; }
.friend-hero.is-referral h1 { font-size: clamp(3rem, min(5.2vw, 24.96px), var(--modo-text-3xl)); }
.friend-hero > div > p:last-of-type { max-width: 620px; color: var(--modo-muted); line-height: 1.8; font-weight: 650; }
.friend-host-card { padding: 24px; border: 1px solid var(--modo-ink); background: var(--modo-panel); text-align: center; box-shadow: var(--modo-shadow-m); }
/* svg も small もインラインなので、カードが広いと「FRIEND'S MODO」がキャラの真横へ回り込み、
   名前だけが下に残っていた（1280pxで svg 右端1072＝small 左端1072 と実測・2026-08-05）。
   狭い幅では入りきらず偶然に縦積みになっていたため、SPだけ見ていると気づけない。
   両方をブロックにして「キャラ→ラベル→名前」の縦順を幅によらず固定する */
.friend-host-card svg { width: min(250px, 100%); display: block; margin: 0 auto; }
.friend-host-card img { width: min(250px, 100%); height: auto; display: block; margin: 0 auto; }
.friend-host-card small { display: block; }
.friend-host-card strong { display: block; font-size: var(--modo-text-xl); }
.friend-reaction-card { margin-top: 54px; padding: clamp(28px, min(5vw, 24px), 58px); border: 1px solid var(--modo-ink); background: var(--modo-acid); box-shadow: var(--modo-shadow-l); }
.friend-hero .friend-reaction-card { margin-top: 28px; padding: 22px; box-shadow: none; }
.friend-reaction-card h2, .friend-next h2 { margin: 0; font-size: clamp(2.4rem, min(5.5vw, 26.4px), var(--modo-text-3xl)); line-height: var(--modo-leading-tight); letter-spacing: -.065em; }
.friend-hero .friend-reaction-card h2 { font-size: clamp(1.9rem, min(3vw, 14.4px), var(--modo-text-3xl)); }
.friend-reaction-card > p:not(.section-kicker), .friend-next > p:not(.section-kicker) { max-width: 680px; margin: 20px 0 0; line-height: 1.75; font-weight: 700; }
.friend-hero .friend-reaction-card > p:not(.section-kicker) { margin-top: 10px; font-size: var(--modo-text-xs); }
.landing-reaction-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 32px; }
.friend-hero .landing-reaction-row { margin-top: 16px; }
.landing-reaction-row button { min-height: 82px; padding: 14px; border: 1px solid var(--modo-ink); background: var(--modo-paper); color: var(--modo-ink); box-shadow: var(--modo-shadow-m); font-size: clamp(1rem, min(2vw, 9.6px), var(--modo-text-l)); font-weight: 950; cursor: pointer; }
.landing-reaction-row button:hover:not(:disabled) { transform: none; box-shadow: none; }
.landing-reaction-row button.is-selected { background: var(--modo-ink); color: white; box-shadow: none; opacity: 1; }
.landing-reaction-row button:disabled:not(.is-selected) { opacity: .35; }
.friend-reaction-status { min-height: 25px; margin-bottom: 0 !important; font-size: var(--modo-text-s); }
.friend-next { margin-top: 90px; padding: 54px 0; border-top: 1px solid var(--modo-ink); border-bottom: 1px solid var(--modo-ink); }
.shop-guardrail { margin: 36px 0 0; padding: 14px 16px; border: 1px solid var(--modo-ink); background: var(--modo-panel); color: var(--modo-ink); font-size: var(--modo-text-s); line-height: 1.6; font-weight: 800; }
.purchase-order-list { display: grid; gap: 8px; }
.purchase-order { display: grid; grid-template-columns: 1fr auto; gap: 5px 12px; padding: 12px; border: 1px solid var(--modo-ink); background: var(--modo-paper); }
.purchase-order strong { font-size: var(--modo-text-xs); }
.purchase-order span, .purchase-order code { color: var(--modo-muted); font-size: var(--modo-text-2xs); overflow-wrap: anywhere; }
.purchase-order .button { grid-column: 1 / -1; min-height: 40px; padding: 7px 10px; font-size: var(--modo-text-2xs); }
.product-preview-content { max-height: 56vh; margin: 22px 0; padding: 18px; border: 1px solid var(--modo-ink); background: var(--modo-paper); overflow-y: auto; }
.product-personalized { margin: 0 0 14px; font-size: var(--modo-text-xs); letter-spacing: .08em; }
.premium-preview-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.premium-preview-grid article, .premium-bridge { padding: 14px; border: 1px solid var(--modo-ink); background: var(--modo-panel); }
.premium-preview-grid small, .premium-bridge small { font-size: var(--modo-text-2xs); font-weight: 1000; letter-spacing: .1em; }
.premium-preview-grid p, .premium-bridge p { margin: 7px 0 0; color: var(--modo-ink); font-size: var(--modo-text-s); line-height: 1.55; }
.premium-score-preview { display: grid; gap: 6px; margin-top: 10px; }
.premium-score-preview div { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; padding: 10px; border: 1px solid var(--modo-ink); background: var(--modo-acid); }
.premium-score-preview span { font-weight: 850; }
.premium-score-preview small { color: var(--modo-muted); }
.deep-experiment { margin-top: 12px; padding: 16px; border: 2px solid var(--modo-ink); background: var(--modo-paper); box-shadow: var(--modo-shadow-m); }
.deep-experiment.is-active { background: var(--modo-acid); }
.deep-experiment > small { font-size: var(--modo-text-2xs); font-weight: 1000; letter-spacing: .1em; }
.deep-experiment h3 { margin: 7px 0; font-size: var(--modo-text-m); }
.deep-experiment p { margin: 7px 0; font-size: var(--modo-text-s); line-height: 1.55; }
.deep-experiment-task { padding: 10px; border: 1px solid var(--modo-ink); background: var(--modo-panel); }
.deep-experiment-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.deep-experiment-actions .button { min-height: 44px; padding: 9px 13px; font-size: var(--modo-text-xs); }
.product-satisfaction { margin-top: 18px; padding: 18px; border: 2px solid var(--modo-ink); background: var(--modo-violet-pale); }
.product-satisfaction.is-recorded { background: var(--modo-acid); }
.product-satisfaction > small { font-size: var(--modo-text-2xs); font-weight: 1000; letter-spacing: .1em; }
.product-satisfaction h3 { margin: 8px 0; font-size: var(--modo-text-m); }
.product-satisfaction p { margin: 8px 0 0; font-size: var(--modo-text-xs); line-height: 1.6; font-weight: 700; }
.product-satisfaction > strong { display: block; margin-top: 12px; font-size: var(--modo-text-2xl); }
.satisfaction-scale { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-top: 16px; }
.satisfaction-scale button { min-width: 0; min-height: 44px; border: 1px solid var(--modo-ink); background: var(--modo-paper); font-weight: 950; cursor: pointer; }
.satisfaction-scale button:hover { background: var(--modo-acid); }
.satisfaction-ends { display: flex; justify-content: space-between; gap: 12px; margin-top: 7px; color: var(--modo-muted); font-size: var(--modo-text-2xs); font-weight: 800; }
.checkout-panel { display: grid; gap: 14px; margin-top: 26px; padding-top: 24px; border-top: 1px solid var(--modo-ink); }
.checkout-panel h3 { margin: 8px 0 0; font-size: var(--modo-text-l); }
.checkout-contract { display: grid; margin: 0; border: 1px solid var(--modo-ink); border-bottom: 0; }
.checkout-contract > div { display: grid; grid-template-columns: 130px 1fr; border-bottom: 1px solid var(--modo-ink); }
.checkout-contract dt, .checkout-contract dd { margin: 0; padding: 10px 12px; font-size: var(--modo-text-xs); line-height: 1.55; }
.checkout-contract dt { background: var(--modo-paper); font-weight: 950; }
.checkout-contract dd { border-left: 1px solid var(--modo-ink); color: var(--modo-muted); font-weight: 700; }
.checkout-price { display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 2px 16px; padding: 16px; border: 1px solid var(--modo-ink); background: var(--modo-acid); }
.checkout-price span { font-size: var(--modo-text-xs); font-weight: 950; }
.checkout-price strong { grid-row: 1 / span 2; grid-column: 2; font-size: var(--modo-text-xl); letter-spacing: -.04em; }
.checkout-price small { color: var(--modo-muted); font-size: var(--modo-text-2xs); }
.checkout-panel > label:not(.checkout-consent) { display: grid; gap: 7px; font-size: var(--modo-text-xs); font-weight: 950; }
.checkout-panel select { width: 100%; min-height: 50px; padding: 0 12px; border: 1px solid var(--modo-ink); background: var(--modo-paper); color: var(--modo-ink); font: inherit; font-weight: 800; }
.checkout-consent { display: grid; grid-template-columns: 22px 1fr; gap: 9px; align-items: start; font-size: var(--modo-text-xs); line-height: 1.65; font-weight: 700; }
.checkout-consent input { width: 20px; height: 20px; margin: 2px 0 0; accent-color: var(--modo-violet); }
.checkout-consent a { display: inline-flex; align-items: center; min-height: 44px; color: inherit; font-weight: 950; }
.checkout-status { min-height: 28px; margin: 0; color: var(--modo-violet) !important; font-size: var(--modo-text-xs); line-height: 1.55 !important; font-weight: 850; }
.checkout-panel .button { width: 100%; }

dialog { width: min(650px, min(92vw, 441.6px)); padding: 0; border: 1px solid var(--modo-ink); background: transparent; box-shadow: var(--modo-shadow-l); }
dialog::backdrop { background: rgba(17, 15, 22, .68); backdrop-filter: blur(4px); }
.dialog-card { position: relative; padding: 36px; background: var(--modo-panel); }
.dialog-card:has(> :is(.dialog-close, button[id^="close-"])) { padding-top: 72px; }
/* 2.2rem 固定だと 320px 幅で「安全上の問題を報告」9文字が内寸248pxに収まらず、
   カード右端まで2pxの位置まで文字が達していた（2026-08-04 画素で実測）。
   他の見出しと同じく幅に追随させる。1.6rem は320pxで9文字が収まる下限 */
/* 「回答と結果を削除しますか？」のような長い見出しは、級数を下げるだけでは収まらない
   （390pxで12文字×28.9px=347px）。これ以上下げると320pxで小さくなりすぎるので折り返しを許す */
/* 下限1.6rem(25.6px)だと「あなた専用フルレポート」11字に282px必要なのに枠は240pxで、
   緊急改行により長音「ー」が行頭へ落ちて禁則を破っていた（幅320で実測・2026-08-09）。
   幅比例を強め、狭い幅では収まる級数まで落とす */
/* overflow-wrap: anywhere は「どこでも折ってよい」指定で、行頭禁則を無効化する。
   そのため「回答と結果を削除しますか？」の「？」が行頭へ落ちていた（幅390で実測・2026-08-09）。
   break-word なら「収まらない語だけ」を折るので、禁則が効いたまま溢れも防げる */
/* Chrome は行が満杯の時、行頭禁則の「？」でも1文字だけ次行へ落とす（幅390で実測・2026-08-09）。
   text-wrap: pretty でも解消しなかったため、最長見出し13字が1行に収まる級数まで下げて回避する。
   幅390で 310px ÷ 13字 = 23.8px が上限なので 6vw（=23.4px）を採る。 */
html[lang="ja"] .dialog-card h2, .dialog-card h2 { margin: 0 0 16px; font-size: clamp(1.25rem, min(6vw, 28.8px), var(--modo-text-2xl)); letter-spacing: -.05em; word-break: normal; overflow-wrap: break-word; text-wrap: pretty; }
.dialog-card > p { color: var(--modo-muted); line-height: 1.7; }
/* right:20px 固定だとカードの内側余白(36px)と合わず、閉じるボタンだけ本文より
   16px外へ出ていた（幅768で実測・2026-08-09）。余白に追随させて右端を揃える */
.dialog-card > :is(.dialog-close, button[id^="close-"]) { position: absolute; top: 14px; right: max(20px, var(--dialog-pad, 20px)); z-index: 1; min-height: 44px; }
.dialog-card { --dialog-pad: 36px; }
.share-dialog-card { min-height: 520px; }
.share-channel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 28px 0 16px; }
.share-channel { min-height: 104px; display: grid; align-content: space-between; padding: 16px; border: 1px solid var(--modo-line); border-radius: 22px; background: var(--modo-paper); text-align: left; cursor: pointer; box-shadow: none; }
.share-channel:hover { translate: none; box-shadow: none; }
.share-channel strong { font-size: var(--modo-text-l); }
.share-channel span { font-size: var(--modo-text-xs); font-weight: 900; }
.share-channel.is-x { background: var(--modo-ink); color: white; }
.share-channel.is-line { background: var(--modo-good); color: var(--modo-ink); }
.share-other { width: 100%; }
.share-dialog-status { min-height: 28px; color: var(--modo-violet) !important; font-size: var(--modo-text-xs); font-weight: 850; }
.safety-dialog-card { display: grid; gap: 16px; max-height: min(780px, 88vh); overflow-y: auto; }
.safety-dialog-card h2 { margin-bottom: 0; }
.safety-dialog-card > p { margin: 0; }
.safety-dialog-card > label { display: grid; gap: 7px; font-size: var(--modo-text-xs); font-weight: 950; }
.safety-dialog-card select { width: 100%; min-height: 50px; padding: 0 12px; border: 1px solid var(--modo-ink); background: var(--modo-paper); color: var(--modo-ink); font: inherit; font-weight: 800; }
.safety-target { padding: 12px 14px; border-left: 6px solid var(--modo-acid); background: var(--modo-paper); color: var(--modo-ink) !important; font-weight: 850; }
.safety-boundary { display: grid; gap: 5px; padding: 14px; border: 1px solid var(--modo-ink); background: var(--modo-violet-pale); }
.safety-boundary strong { font-size: var(--modo-text-s); }
.safety-boundary span, .safety-emergency { color: var(--modo-muted); font-size: var(--modo-text-xs); line-height: 1.65; font-weight: 700; }
.safety-emergency { padding-left: 12px; border-left: 3px solid var(--modo-coral); line-height: 1.65 !important; }
.safety-receipt { padding: 16px; border: 1px solid var(--modo-ink); background: var(--modo-acid); }
.safety-receipt strong { font-size: var(--modo-text-m); }
.safety-receipt p { margin: 6px 0 12px; font-size: var(--modo-text-xs); line-height: 1.6; font-weight: 750; }
.safety-receipt .result-actions { margin-top: 0; }
.safety-receipt .button { background: var(--modo-panel); }
.safety-status { min-height: 24px; color: var(--modo-violet) !important; font-size: var(--modo-text-xs); font-weight: 850; }
.friend-safety-action { margin-top: 16px; min-height: 44px; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--modo-muted); font-size: var(--modo-text-xs); font-weight: 850; cursor: pointer; }
.share-management-card { max-height: min(760px, 88vh); overflow-y: auto; }
.owned-referral-list { display: grid; gap: 12px; margin-top: 22px; }
.owned-referral-list > article { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--modo-ink); background: var(--modo-paper); }
.owned-referral-list > article.is-disabled { border-left: 8px solid var(--modo-coral); }
.owned-referral-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.owned-referral-heading div { display: grid; gap: 4px; }
.owned-referral-heading strong { font-size: var(--modo-text-m); }
.owned-referral-heading span, .owned-referral-list p { margin: 0; color: var(--modo-muted); font-size: var(--modo-text-xs); line-height: 1.6; font-weight: 750; }
.owned-referral-heading b { padding: 5px 8px; border: 1px solid var(--modo-ink); background: var(--modo-acid); font-size: var(--modo-text-2xs); }
.owned-referral-list select { width: 100%; min-height: 48px; padding: 0 10px; border: 1px solid var(--modo-ink); background: var(--modo-panel); font: inherit; font-size: var(--modo-text-xs); font-weight: 800; }
.owned-referral-list .button { width: 100%; }
.owned-referral-empty { padding: 20px; border: 1px dashed var(--modo-muted); }
.delete-status { min-height: 24px; color: var(--modo-violet) !important; font-weight: 850; }
.copy-feedback-panel { position: absolute; z-index: 60; width: min(390px, calc(min(100vw, 480px) - 24px)); max-height: calc(100vh - 88px); overflow-y: auto; border: 1px solid var(--modo-ink); background: var(--modo-panel); box-shadow: var(--modo-shadow-m); }
.copy-feedback-panel[hidden] { display: none; }
.copy-feedback-panel-card { position: relative; padding: 24px; }
.copy-feedback-panel-card h2 { margin: 0 38px 12px 0; font-size: var(--modo-text-l); letter-spacing: -.04em; }
.copy-feedback-close { position: absolute; top: 18px; right: 18px; }
.copy-feedback-panel-card blockquote { margin: 16px 0 10px; padding: 13px; border-left: 5px solid var(--modo-violet); background: var(--modo-violet-pale); font-size: var(--modo-text-s); line-height: 1.55; font-weight: 800; }
.copy-feedback-privacy { margin: 0 0 20px; font-size: var(--modo-text-xs); }
.copy-feedback-reactions, .copy-feedback-directions > div { display: flex; gap: 7px; flex-wrap: wrap; }
.copy-feedback-reactions button, .copy-feedback-directions button { min-height: 38px; padding: 0 10px; border: 1px solid var(--modo-ink); background: var(--modo-paper); font-size: var(--modo-text-xs); font-weight: 900; cursor: pointer; }
.copy-feedback-reactions button.is-active, .copy-feedback-directions button.is-active { background: var(--modo-ink); color: white; box-shadow: inset 0 -4px 0 var(--modo-acid); }
.copy-feedback-directions { margin: 18px 0 0; padding: 15px; border: 1px solid var(--modo-ink); }
.copy-feedback-directions[hidden] { display: none; }
.copy-feedback-directions legend { padding: 0 8px; font-size: var(--modo-text-xs); font-weight: 950; }
.copy-feedback-status { min-height: 24px; margin: 14px 0; color: var(--modo-violet) !important; font-size: var(--modo-text-xs); font-weight: 850; }
/* 送信後の受領（2026-08-20）。自分の1件が数に入ったことを、その場で返す。
   一文ごとの反応数は閾値を通るまで出さない規定なので、全体の進捗だけを見せる。
   進捗の見せ方は institute/app.js の renderNotesReadout に揃える。 */
.copy-feedback-receipt { margin-top: 16px; padding-top: 16px; border-top: 2px solid var(--modo-line); }
.copy-feedback-receipt[hidden] { display: none; }
.copy-feedback-receipt-lead { margin: 8px 0 10px; font-size: var(--modo-text-s); font-weight: 850; line-height: 1.6; }
.copy-feedback-progress { height: 8px; border: 2px solid var(--modo-ink); background: var(--modo-paper); }
.copy-feedback-progress i { display: block; height: 100%; background: var(--modo-violet); transition: width .3s ease; }
.copy-feedback-receipt-note { margin: 10px 0 0; font-size: var(--modo-text-xs); font-weight: 750; color: var(--modo-muted); line-height: 1.6; }
.copy-feedback-receipt-links { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 0; font-size: var(--modo-text-xs); font-weight: 850; }
.copy-feedback-receipt-undo { margin: 10px 0 0; font-size: var(--modo-text-2xs); font-weight: 700; color: var(--modo-muted); line-height: 1.55; }
@media (prefers-reduced-motion: reduce) { .copy-feedback-progress i { transition: none; }}
.copy-feedback-panel .button { min-height: 44px; box-shadow: var(--modo-shadow-s); font-size: var(--modo-text-xs); }
/* 新TOPの世界言語（丸み・柔らかい影）に合わせる。罫線と黒オフセット影は使わない（2026-08-08） */
.analytics-consent { width: min(920px, calc(100% - 36px)); display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: center; margin: 24px auto 0; padding: 16px 20px; border: 0; border-radius: 22px; background: var(--modo-panel); box-shadow: 0 6px 22px color-mix(in srgb, var(--modo-ink) 12%, transparent); }
.analytics-consent[hidden] { display: none; }
.analytics-consent p { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; row-gap: 2px; margin: 0; }
.analytics-consent strong { align-self: center; font-size: var(--modo-text-s); }
.analytics-consent span { color: var(--modo-muted); font-size: var(--modo-text-xs); line-height: 1.45; font-weight: 650; }
.analytics-consent-copy { grid-column: 1 / -1; }
.analytics-consent a { display: flex; grid-column: 2; grid-row: 1; width: max-content; max-width: 100%; align-items: center; min-height: 32px; color: inherit; font-size: var(--modo-text-xs); font-weight: 900; }
.analytics-consent > div { display: flex; gap: 8px; }
.analytics-consent .button { min-height: 44px; padding: 8px 16px; border-radius: 999px; border-color: transparent; box-shadow: none; font-size: var(--modo-text-xs); }
.analytics-consent .button-ghost { border-color: var(--modo-line); }

.facet-grid { grid-template-columns: 1fr; }
.method-hero, .method-separation, .method-guardrails { grid-template-columns: 1fr; }
.method-origin-card { transform: none; }
.method-flow { grid-template-columns: repeat(2, 1fr); }
/* 5列前提の「→」は各カードの右外に出る。2列では行末カードの矢印が枠の外を指して
   はみ出していた（幅768で実測・2026-08-09）。行末では矢印を出さない */
/* 5列前提の「→」は各カードの右外に出る。2列だと行末カードの矢印が枠の外を指してはみ出す
   （幅768で実測・2026-08-09）。行末だけ消す。1列になる幅では下向き矢印が全カード間に
   必要なので、この打ち消しは2列のときだけに限る。
   440行の :not(:last-child)(0,2,1) に勝つよう擬似クラスを2つ重ねて特異度を揃える。 */
.method-flow article:nth-child(2n):not(.never)::after { display: none; content: none; }
.method-flow article { border-bottom: 1px solid var(--modo-ink); }
.method-flow article:nth-child(2n) { border-right: 0; }
.method-flow article:last-child { grid-column: 1 / -1; border-bottom: 0; }
.friend-hero { grid-template-columns: minmax(0, 1fr); }
.friend-hero.is-referral .friend-host-card { display: none; }
.friend-hero.is-referral .friend-individual-card { display: block; }
/* 5列に並ぶPC幅では内寸186pxしかなく語中折返しを許しているが、
   1〜2列になるこの幅では内寸238px以上あり、最長の区切り（11字=229px）が収まる。
   語中で「見立て／る。」と割れていたので、ここだけ語の切れ目で折る指定へ戻す（2026-08-09 実測） */
html[lang="ja"] .method-flow h2 { word-break: keep-all; }

.home-world { min-height: 0; }
.home-world-copy { gap: 10px; padding: 18px 18px 2px; }
.home-world-copy h1 { font-size: clamp(1.55rem, min(7.4vw, 35.52px), 1.9rem); }
.home-world-copy h1 small { margin-bottom: 6px; }
.home-world-copy > p { line-height: 1.65; }
/* 390×844では地形上半分の空がCTAと隊列を分断していた。
   最大レーン（30px）＋札＋キャラ高を残す222pxまで畳み、足元は従来どおり下端基準で揃える。 */
.home-terrain { height: 222px; }
.home-dweller-name { padding: 4px 6px; font-size: var(--modo-text-2xs); }
.home-door { min-height: 56px; gap: 8px; margin-top: 4px; padding-inline: 22px; font-size: var(--modo-text-m); }
.home-rpg-sections { gap: 20px; padding-top: 12px; }
.method-view, .friend-view, .shop-view, .dex-view { padding: 70px 18px; }
.method-hero { min-height: auto; padding-bottom: 70px; }
.method-hero h1 { font-size: clamp(2.55rem, min(12.8vw, 61.44px), var(--modo-text-3xl)); line-height: var(--modo-leading-tight); }
/* 理由: 見出し内の2行目を親見出しに比例させる相対値。固定段へ替えると14pxまで縮み階層が壊れる。 */
.method-hero h1 span { font-size: .92em; }
.method-origin-card strong { font-size: var(--modo-text-3xl); }
.method-flow { grid-template-columns: 1fr; }
.method-flow article { min-height: 315px; border-right: 0; }
.method-flow article:last-child { grid-column: auto; }
.method-flow article:not(:last-child)::after { top: auto; right: 18px; bottom: -14px; transform: rotate(90deg); }
/* 1列では縦に並ぶので、2列用に消した行末の矢印を戻す */
.method-flow article:nth-child(2n):not(:last-child):not(.never)::after { display: grid; content: "→"; }
.method-separation, .method-guardrails { margin-top: 70px; padding-top: 50px; }
/* 3.5rem(56px)だと keep-all で「科学のふりに使わない。」が573px必要になり390px幅を超える。
   11文字が収まる上限まで下げる（実測: 8vw なら 390px幅で31px→収まる）。
   さらに下限1.9rem(30.4px)が320pxでも効いてしまい、「科学のふりに使わない。」の句点だけが
   次行へ落ちて行頭禁則を破っていた。下限を1.65rem(26.4px)へ（320pxで解消する27px以下）。
   390px以上は8vwが上回るため現状のまま（実測・2026-08-05） */
.method-separation h2, .method-guardrails h2 { font-size: clamp(1.65rem, min(8vw, 38.4px), var(--modo-text-3xl)); }
.method-actions .button { width: 100%; justify-content: center; }
.assessment-shell { padding-top: 22px; }
.progress-row { gap: 10px; }
.question-list { gap: var(--modo-space-3); }
.question-item { padding: 0 6px 6px 0; }
.question-context { margin-bottom: 0; font-size: var(--modo-text-s); }
.question-dialog { padding: 18px 16px; }
.question-prompt { margin-bottom: 0; }
.assessment-actions { position: sticky; z-index: 8; bottom: 0; margin: 8px max(-4vw, -19.2px) 0; padding: 8px min(4vw, 19.2px) max(8px, env(safe-area-inset-bottom)); border-top: 1px solid var(--modo-ink); background: color-mix(in srgb, var(--modo-paper) 96%, transparent); backdrop-filter: blur(12px); }
.assessment-actions .button { min-width: 120px; }
.copy-feedback-panel { max-height: 72vh; }
.score-section { padding: 28px 18px; }
.result-paywall { padding: 0 12px 24px; box-shadow: 5px 5px 0 var(--modo-violet); }
.result-paywall-mask { grid-template-columns: 1fr; height: 165px; }
.result-paywall-mask > div:last-child { display: none; }
.result-paywall-card { margin-top: -82px; padding: 24px 16px; box-shadow: 5px 5px 0 var(--modo-acid); }
/* 2xl固定だと「恋愛・友達・学校／仕事・回復を、」が枠224pxに対し248px必要で溢れる
   （幅320で実測・2026-08-09）。幅比例にして320pxで28.8pxまで落とす */
.result-paywall-card h2 { font-size: clamp(1.4rem, min(9vw, 43.2px), var(--modo-text-2xl)); }
.result-paywall-title-break { display: inline; }
.result-paywall-card ul { grid-template-columns: 1fr; }
.result-paywall-card li, .result-paywall-card li:nth-child(2n), .result-paywall-card li:nth-last-child(2) { border-right: 0; border-bottom: 1px solid var(--modo-ink); }
.result-paywall-card li:last-child { grid-column: auto; border-bottom: 0; }
.result-paywall-card .button { width: 100%; }
.unlocked-full-report { padding: 28px 16px; box-shadow: 5px 5px 0 var(--modo-violet); }
.full-report-theme-grid { grid-template-columns: 1fr; }
.full-report-theme, .full-report-theme:nth-child(2n), .full-report-theme:nth-last-child(-n+2) { border-right: 0; border-bottom: 1px solid var(--modo-ink); }
.full-report-theme:last-child { border-bottom: 0; }
.full-report-action { padding: 24px 16px; }
.result-actions .button { width: 100%; }
/* 3.5rem=56px 固定だと「二人で見ると、」7文字が390px幅で10.6px はみ出す（2026-08-05 実測）。
   幅に追随させ、折り返しも許す */
.friend-hero h1 { font-size: clamp(2.4rem, min(12vw, 57.6px), var(--modo-text-3xl)); overflow-wrap: anywhere; }
/* referral指定のPC用3rem下限は上のモバイル指定より詳細度が高く、共有した一文にも
   48pxが残っていた。本文見出しとして十分な32pxを基準にし、長い一文も読める段数に収める。 */
.friend-hero.is-referral h1 { font-size: clamp(2rem, min(8.2vw, 39.36px), 2.4rem); }
.connection-hub { padding: 24px 18px; }
/* 320pxで「まず、あなたのMODOから。」が61px溢れた（2026-08-08 実測）。
   keep-all下では読点でしか折れないため、下限をさらに下げて収める。
   1.6remでも「まだ発行していません。」の11字連が12px溢れたため1.45remまで下げる */
.connection-hub h1 { font-size: clamp(1.4rem, min(7vw, 33.6px), var(--modo-text-3xl)); }
.connection-card { grid-template-columns: 1fr; padding: 18px; }
.connection-actions .button { width: 100%; }
.connection-card :is(#connection-status, #connection-reply-summary) { grid-column: auto; }
.friend-hero > * { min-width: 0; }
.friend-reaction-card { padding: 28px 18px; box-shadow: var(--modo-shadow-m); }
.friend-hero .friend-reaction-card { padding: 20px 16px; }
.landing-reaction-row { grid-template-columns: 1fr; }
/* 共有着地は、返信を選ぶことが最初の目的。390×844では3択を縦積みにすると
   共有された一文が数行になった時にカード下端が初期画面を越える。短い3択だけは
   横一列に戻し、本文を削らず、各ボタンの58pxタップ領域も保つ。 */
.friend-hero.is-referral .landing-reaction-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.landing-reaction-row button { min-height: 58px; }
.friend-next { margin-top: 68px; padding: 44px 0; }
/* 閉じるボタンの右位置(--dialog-pad)も同じ20pxへ合わせる（2026-08-09） */
.dialog-card { padding: 26px 20px; --dialog-pad: 20px; }
.safety-dialog-card { max-height: 84vh; }
.checkout-contract > div { grid-template-columns: 105px 1fr; }
.premium-preview-grid { grid-template-columns: 1fr; }
.share-channel-grid { grid-template-columns: 1fr 1fr; }
.share-channel { min-height: 92px; }
.analytics-consent { width: calc(100% - 20px); grid-template-columns: 1fr; gap: 8px; padding: 10px 12px; }
.analytics-consent .analytics-consent-copy { font-size: var(--modo-text-2xs); line-height: 1.35; }
/* 見た目の行高は 24px のまま、タップ領域だけ 44px に広げる。広げる向きは上（バナーの余白側）だけにして、下の本文へ矩形を重ねない */
.analytics-consent a { min-height: 44px; margin: -18px 0 -2px; }
.analytics-consent > div { display: grid; grid-template-columns: 1fr 1fr; }
.analytics-consent .button { padding: 6px 8px; font-size: var(--modo-text-2xs); line-height: 1.2; }
.site-footer { padding: 28px 18px 20px; }
.footer-brand { display: block; padding-bottom: 20px; }
.footer-brand p { margin-top: 12px; text-align: left; }
.footer-foldouts { grid-template-columns: 1fr; }
.footer-bottom { display: grid; }

@media (max-width: 360px) {
  .home-door { min-height: 58px; padding: 0 20px; font-size: var(--modo-text-m); gap: 8px; }
  .home-door small { white-space: nowrap; font-size: var(--modo-text-2xs); }
  /* 3rem(48px)固定だと320pxで「二人で見ると、」7文字に312px必要なのに枠は284px。
     keep-all で読点までは折れず緊急改行になり、「、」「。」が単独で行頭に落ちて禁則を破っていた
     （320px実測・2026-08-05）。13.4vw＝320pxで42.9px（実測で解消する43px以下）、360pxでは48pxのまま */
  .friend-hero h1 { font-size: clamp(2.4rem, min(13.4vw, 64.32px), var(--modo-text-3xl)); overflow-wrap: break-word; }}

html { scroll-padding-bottom: 69px; }
/* 2xl(37.9px)固定だと「16語じゃなく8語。」10字に320px必要なのに枠は284pxで、
   幅320のタイプ一覧・結果・料金で18px横へ溢れていた（2026-08-09 実測）。
   幅比例にして320pxで30.4px、400px以上で従来の37.9pxへ戻す */
.method-hero h1 { font-size: clamp(1.5rem, min(9.5vw, 45.6px), var(--modo-text-2xl)); }
/* 理由: 最狭幅では親見出しと同じ級数を保つ相対指定。固定16pxへ替えると意図した見出しが分断される。 */
.method-hero h1 span { font-size: 1em; }
.assessment-shell { padding-top: 10px; }
.progress-row { margin-bottom: 14px; }

body:has(.assessment-view.is-active) .site-header .site-nav,
body:has(.assessment-view.is-active) .site-header .menu-button,
body:has(.assessment-view.is-active) .site-locale-tools { display: none; }
/* 診断中は設問へ集中できるよう隠し、未回答の計測イベントは送らず保留する。 */
body:has(.assessment-view.is-active) #analytics-consent:not([data-analytics-settings-open]) { display: none; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; }}

/* ============================================================
   実行順6・7 — 考え方／料金を、他画面と同じA×RPGの窓へ統一する。
   ============================================================ */
#method-view.method-view, #shop-view.shop-view {
  width: min(980px, calc(100% - 36px));
  margin: 0 auto;
  padding: clamp(48px, min(7vw, 33.6px), 92px) 0 clamp(80px, min(10vw, 48px), 130px);
}

#method-view { display: none; gap: 24px; }
#method-view.is-active { display: grid; }
#method-view .method-hero {
  min-height: 430px;
  grid-template-columns: minmax(0, 1.2fr) minmax(250px, .55fr);
  gap: clamp(28px, min(5vw, 24px), 64px);
  align-items: center;
  padding-bottom: 32px;
}
#method-view .method-hero h1 { margin: 8px 0 0; color: white; font-size: clamp(2.7rem, min(7vw, 33.6px), var(--modo-text-3xl)); line-height: 1.08; letter-spacing: -.065em; }
#method-view .method-hero h1 span { color: var(--modo-acid); }
#method-view .method-hero-copy > p:last-child { max-width: 630px; margin: 22px 0 0; color: var(--modo-violet-pale); font-size: var(--modo-text-m); line-height: 1.8; font-weight: 750; }
#method-view .method-origin-card { gap: 12px; padding: 22px; border: 3px solid var(--modo-ink); border-radius: 6px; background: var(--modo-acid); box-shadow: 5px 5px 0 var(--modo-ink); color: var(--modo-ink); transform: rotate(1deg); }
#method-view .method-origin-card strong { font-size: clamp(3rem, min(7vw, 33.6px), var(--modo-text-3xl)); }

#method-view .method-principles { padding: 24px; }
#method-view .method-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 14px; border: 0; }
#method-view .method-flow article { min-height: 0; padding: 18px; border: 2px solid var(--modo-ink); border-radius: 6px; background: var(--modo-panel); box-shadow: 4px 4px 0 var(--modo-ink); }
#method-view .method-flow article:last-child { border-right: 2px solid var(--modo-ink); background: var(--modo-violet-pale); }
#method-view .method-flow article::after { display: none; content: none; }
#method-view .method-flow small { min-height: 0; color: var(--modo-muted); }
#method-view .method-flow span { margin-top: 28px; border-width: 2px; border-radius: 999px; }
html[lang="ja"] #method-view .method-flow h2, #method-view .method-flow h2 { margin: 12px 0 8px; font-size: var(--modo-text-l); line-height: 1.35; word-break: normal; overflow-wrap: break-word; }
#method-view .method-flow p { font-size: var(--modo-text-s); line-height: 1.75; }

#method-view .method-separation, #method-view .method-guardrails { grid-template-columns: minmax(220px, .65fr) minmax(0, 1.35fr); gap: clamp(28px, min(5vw, 24px), 60px); margin-top: 0; padding-top: 26px; border-top: 3px solid var(--modo-ink); }
#method-view .method-separation h2, #method-view .method-guardrails h2 { margin-top: 8px; font-size: clamp(1.75rem, min(4vw, 19.2px), var(--modo-text-2xl)); }
#method-view .method-layer-grid, #method-view .method-guardrails ul { border: 0; }
#method-view .method-layer-grid article { min-height: 0; padding: 18px; border-bottom-width: 2px; }
#method-view .method-layer-grid h3 { margin: 20px 0 6px; font-size: var(--modo-text-l); }
#method-view .method-guardrails li { min-height: 76px; border-bottom-width: 2px; }
#method-view .method-guardrails li b { border-right-width: 2px; }
#method-view .method-actions { margin-top: 4px; }

#shop-view.is-active { display: grid; place-items: center; }
.shop-rpg-shell { width: min(620px, 100%); display: grid; justify-items: center; gap: 24px; text-align: center; }
.shop-sign { display: inline-block; padding: 8px 16px; border: 3px solid var(--modo-ink); border-radius: 6px; background: var(--modo-coral); color: var(--modo-ink); /* 白はcoral地で3.2:1のためAA不達 */ box-shadow: 4px 4px 0 var(--modo-ink); font-size: var(--modo-text-m); font-weight: 1000; letter-spacing: .06em; transform: rotate(2deg); }
.shop-message { width: 100%; text-align: left; transform: rotate(-.4deg); }
.shop-message h1 { margin: 8px 0 0; font-size: clamp(2rem, min(6vw, 28.8px), var(--modo-text-2xl)); line-height: 1.2; letter-spacing: -.05em; }
.shop-message > p:not(.rpg-kicker, .shop-guardrail) { margin: 12px 0 0; color: var(--modo-ink-soft); font-size: var(--modo-text-m); line-height: 1.8; font-weight: 800; }
.shop-message .shop-guardrail { margin: 18px 0 0; padding: 12px 0 0; border: 0; border-top: 2px solid var(--modo-ink); background: transparent; color: var(--modo-muted); font-size: var(--modo-text-xs); }
.shop-rpg-shell > .button { min-width: min(280px, 100%); }

#method-view .method-hero, #method-view .method-separation, #method-view .method-guardrails { grid-template-columns: 1fr; }
#method-view .method-hero { min-height: 0; padding-bottom: 24px; }
#method-view .method-origin-card { transform: none; }
#method-view .method-flow { grid-template-columns: 1fr; }
#method-view .method-flow article { min-height: 0; border-right: 2px solid var(--modo-ink); }
#method-view .method-flow article:last-child { grid-column: auto; }
#method-view .method-flow article:nth-child(2n)::after { display: none; content: none; }
.shop-message h1 { font-size: var(--modo-text-xl); }

/* 商品ダイアログの見出しは「商品名 · ¥価格」。中黒は行頭禁則なので、
   1行に収まらない幅では区切りを消して価格を独立行に落とす
   （幅390で「・¥980」が行頭に来ていた。2026-08-09 実測） */
.product-dialog-price { white-space: nowrap; }
.product-dialog-price::before { content: " \00B7 "; }
.product-dialog-price { display: block; }
.product-dialog-price::before { content: none; }

/* 結果ページ v0.2 のモバイル調整（内容先行ヒーロー・章ナビ・15特性一覧・試し読み） */
.result-measurement { margin-top: 24px; }
/* 「タイプ名の奥にある、連続スコア。」等が2xl固定だと390pxで読点が行頭へ落ちる。
   10文字（読点前の1行分）が枠354pxへ収まる級数まで幅比例で下げる */
.score-section h2 { font-size: clamp(1.4rem, min(7vw, 33.6px), 2rem); }
.result-measurement h2 { margin-bottom: 18px; }
.domain-poles-note { margin: -12px 0 16px; }
.domain-pole-row { padding: 8px 16px; }
.domain-pole-labels { gap: 10px; margin-top: 8px; font-size: var(--modo-text-2xs); }
.domain-pole-track { margin-top: 6px; }
.domain-pole-row.is-missing { grid-template-columns: 1fr; gap: 6px; }
.score-note { margin-top: 14px; }

/* タイプ解説の長文セクション（全文無料）。罫線で区切らず、余白と見出しと引用のリズムで読ませる
   （16Personalitiesの実測: hr は全ページ0個、区切りはプルアウトと余白が担っていた） */
.longform-section { margin-top: 64px; }
.longform-head { max-width: 40ch; margin: 0 auto 26px; text-align: center; }
.longform-head h2 { margin: 6px 0 0; font-size: clamp(1.6rem, min(6.4vw, 30.72px), 2.3rem); line-height: 1.3; letter-spacing: -.04em; }
.longform-lead { max-width: 36ch; margin: 0 auto 30px; color: var(--modo-muted); font-size: var(--modo-text-s); line-height: 1.85; font-weight: 650; text-align: center; }
.longform-block { max-width: 34em; margin: 0 auto; }
.longform-block + .longform-block { margin-top: 40px; }
.longform-block h3 { margin: 0 0 14px; font-size: clamp(1.08rem, min(4.6vw, 22.08px), 1.35rem); line-height: 1.45; letter-spacing: -.02em; }
.longform-block p { margin: 0 0 1.1em; line-height: 1.95; font-weight: 600; }

/* 署名: 一度きりの登場。下からせり上がり、わずかに行き過ぎて戻る1拍。
   ループはさせない（10,000字の読み物の横で動き続けると読書の妨げになる）。 */
@keyframes onboarding-peek {
  0%   { transform: translateY(28px); opacity: 0; }
  70%  { transform: translateY(-5px); opacity: 1; }
  100% { transform: translateY(0); opacity: 1; }
}

/* 目印は段落の「下」へ右寄せで置く。
   絶対配置で重ねると、最終行が右端まで埋まった段落で本文と衝突する
   （2026-08-20、実物の目視で発見。幅・はみ出しの数値検査は全部通っていた）。
   横に並べると本文幅が44px削られ、390pxで14行に収めた設計が壊れる。
   下に置けば幅も行数も無傷で、重なりも構造的に起きない。 */
.longform-para { position: relative; margin-bottom: 1.1em; }
.longform-para > [data-feedback-copy-id] { margin-bottom: 0; }
.copy-feedback-mark {
  position: absolute; right: 0; bottom: -22px;
  display: grid; place-items: center; margin: 0;
  width: 44px; height: 44px;
  border: 0; background: transparent; cursor: pointer;
  opacity: 0; pointer-events: none;
  transition: opacity .16s ease, color .16s ease, border-color .16s ease;
}
.longform-para:focus-within .copy-feedback-mark,
.longform-para.is-armed .copy-feedback-mark { opacity: 1; pointer-events: auto; }
@media (hover: hover) {
  .longform-para:hover .copy-feedback-mark { opacity: 1; pointer-events: auto; }}
.copy-feedback-mark:focus-visible { outline: 2px solid var(--modo-acid); outline-offset: -4px; }
@media (prefers-reduced-motion: reduce) { .copy-feedback-mark { transition: none; }}
.longform-list { list-style: none; max-width: 34em; margin: 0 auto; padding: 0; display: grid; gap: 10px; }
.longform-list li { padding: 20px 22px; border: 1px solid var(--modo-ink); background: white; }
.longform-list .longform-para { margin-bottom: 0; }
.longform-list strong { display: block; margin-bottom: 8px; font-size: var(--modo-text-m); letter-spacing: -.02em; }
.longform-list p { margin: 0; line-height: 1.9; font-weight: 600; }
.longform-section { margin-top: 48px; }
.longform-list li { padding: 16px 16px; }

/* ---- 図鑑: A×RPGの住人録 ---- */
.dex-book { width: min(760px, 100%); margin-inline: auto; }
.dex-heading { margin-bottom: 20px; }
.dex-heading .section-kicker { margin-bottom: 6px; color: var(--modo-muted); letter-spacing: .08em; }
.dex-heading .dex-count { margin: 0; color: var(--modo-ink); font-size: clamp(1.65rem, min(7.7vw, 36.96px), var(--modo-text-2xl)); line-height: 1.15; font-weight: 1000; letter-spacing: -.045em; }
.dex-heading > p:last-child { max-width: 38em; margin: 10px 0 0; color: var(--modo-ink-soft); font-size: var(--modo-text-s); font-weight: 800; line-height: 1.7; }
.dex-action { margin-bottom: 20px; }
.dex-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(8px, min(2vw, 9.6px), 14px);
}
.dex-cell { position: relative; min-width: 0; margin: 0; padding: 4px; text-align: center; outline: none; }
.dex-cell img {
  display: block; width: 100%; height: auto; aspect-ratio: 1 / 1;
  border: 2px solid var(--modo-ink); background: var(--modo-panel); object-fit: contain;
}
.dex-cell[data-state="met"] .dex-number { color: var(--modo-violet); }
.dex-cell[data-state="today"] { outline: 3px solid var(--modo-acid); outline-offset: -1px; background: color-mix(in srgb, var(--modo-acid) 30%, transparent); }
.dex-cell[data-state="today"] .dex-number { color: var(--modo-violet); }
.dex-cell[data-highlight="true"] { outline: 3px solid var(--modo-violet); outline-offset: 1px; }
.dex-cell figcaption {
  display: flex; flex-direction: column; gap: 1px; margin-top: 5px;
  min-width: 0; font-size: .7rem; line-height: 1.3;
}
.dex-number { color: var(--modo-muted); font-size: .64rem; font-weight: 950; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dex-name { display: block; width: 100%; color: var(--modo-ink); font-size: .68rem; font-weight: 900; letter-spacing: -.02em; white-space: nowrap; word-break: keep-all; }
.dex-cell[data-name-size="compact"] .dex-name { font-size: .6rem; letter-spacing: -.045em; }
.dex-cell[data-name-size="tight"] .dex-name { font-size: .53rem; letter-spacing: -.06em; } /* 9文字「まっさらのおりがみ」が390px・4列で77>75pxと2pxはみ出したため一段詰める（journey実測） */
.dex-note { margin: 22px 0 0; color: var(--modo-muted); font-size: var(--modo-text-xs); line-height: 1.7; font-weight: 900; text-align: center; }
@media (max-width: 360px) {
  .dex-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }}

/* ---- 120個体を主表示にする結果 ---- */
.individual-loading { min-height: 70svh; display: grid; place-items: center; padding: 48px 20px; font-weight: 900; }
.result-view { overflow-x: clip; background: var(--modo-paper); }
.rpg-result { min-width: 0; }
.result-world-scene {
  position: relative; height: clamp(250px, min(34vw, 163.2px), 430px); overflow: hidden;
  background:
    radial-gradient(circle at 78% 18%, var(--modo-world-sun) 0 70px, transparent 71px),
    radial-gradient(color-mix(in srgb, var(--modo-ink) 2.8%, transparent) 1px, transparent 1px),
    var(--modo-world-sky);
  background-size: auto, 7px 7px, auto;
}
.result-world-scene img { position: absolute; z-index: 5; left: 50%; bottom: 18px; height: 76%; width: auto; max-width: min(62vw, 297.6px); object-fit: contain; transform: translateX(-50%); filter: drop-shadow(0 12px 14px color-mix(in srgb, var(--modo-ink) 24%, transparent)); }
.result-hill, .result-ground { position: absolute; right: -8%; left: -8%; }
.result-hill { border-radius: 50% 50% 0 0 / 100% 100% 0 0; }
.result-hill.hill-far { bottom: 19%; height: 43%; background: var(--modo-world-hill-far); }
.result-hill.hill-mid { bottom: 9%; height: 32%; background: var(--modo-world-hill-mid); }
.result-hill.hill-near { bottom: 0; height: 23%; background: var(--modo-world-hill-near); }
.result-ground { bottom: 0; height: 9%; background: var(--modo-world-ground); }
.result-cloud { position: absolute; z-index: 2; border-radius: 999px; background: var(--modo-panel); box-shadow: 0 4px 14px color-mix(in srgb, var(--modo-ink) 5%, transparent); }
.result-cloud::before, .result-cloud::after { content: ""; position: absolute; border-radius: inherit; background: inherit; }
.result-cloud.cloud-one { top: 16%; left: 8%; width: 126px; height: 34px; }
.result-cloud.cloud-one::before { top: -17px; left: 24px; width: 52px; height: 32px; }
.result-cloud.cloud-one::after { top: -10px; right: 18px; width: 38px; height: 24px; }
.result-cloud.cloud-two { top: 31%; right: 9%; width: 92px; height: 28px; }
.result-cloud.cloud-two::before { top: -13px; left: 29px; width: 40px; height: 25px; }
.rpg-result-body { position: relative; z-index: 10; width: min(980px, calc(100% - 36px)); display: grid; gap: 24px; margin: -42px auto 0; }
.individual-encounter h1 { margin: 6px 0 0; font-size: clamp(2.1rem, min(6vw, 28.8px), 4.2rem); line-height: 1.1; letter-spacing: -.055em; }
.individual-truth { margin: 12px 0 0; color: var(--modo-violet-pale); font-size: clamp(1rem, min(2vw, 9.6px), var(--modo-text-l)); line-height: 1.65; font-weight: 850; }
.individual-tagline { width: fit-content; max-width: 100%; margin: 16px 0 0; padding: 7px 12px; border-radius: 6px; background: var(--modo-acid); color: var(--modo-ink); font-size: clamp(.7rem, min(2.6vw, 12.48px), var(--modo-text-m)); line-height: 1.4; font-weight: 950; white-space: nowrap; transform: rotate(-1deg); }
.individual-neighbours .rpg-kicker { color: var(--modo-ink); }
.individual-neighbour-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-top: 14px; }
.individual-neighbour { min-width: 0; margin: 0; padding: 8px 5px; border: 2px solid var(--modo-ink); background: white; box-shadow: 4px 4px 0 var(--modo-ink); text-align: center; }
.individual-neighbour img { display: block; width: 100%; height: auto; background: white; }
.individual-neighbour figcaption { display: grid; justify-items: center; gap: 5px; padding-top: 5px; font-size: var(--modo-text-xs); line-height: 1.35; font-weight: 900; overflow-wrap: anywhere; }
.neighbour-truth { font-weight: 400; line-height: 1.4; }
.individual-neighbour.changes-family { border-width: 3px; }
.visual-term::before { content: attr(aria-label); }
.result-measurement .rpg-kicker { color: var(--modo-ink); }
.result-measurement .domain-poles-note { margin: 7px 0 14px; color: var(--modo-muted); font-size: var(--modo-text-xs); font-weight: 850; }
.rpg-result .domain-pole-list, .rpg-outcome .domain-pole-list, .rpg-outcome .outcome-domain-list { border: 2px solid var(--modo-ink); background: white; }
.rpg-result .domain-pole-row, .rpg-outcome .domain-pole-row {
  min-width: 0; display: grid; grid-template-columns: minmax(146px, 168px) minmax(0, 1fr) 34px;
  grid-template-rows: auto 16px; align-items: center; gap: 5px 10px; padding: 12px 14px; border-bottom: 2px solid var(--modo-ink);
}
.rpg-result .domain-pole-row:last-child, .rpg-outcome .domain-pole-row:last-child { border-bottom: 0; }
.rpg-result .domain-pole-heading, .rpg-outcome .domain-pole-heading { display: contents; }
.rpg-result .domain-pole-heading h3, .rpg-outcome .domain-pole-heading h3 { grid-column: 1; grid-row: 1 / 3; margin: 0; font-size: var(--modo-text-xs); line-height: 1.35; font-weight: 950; letter-spacing: -.025em; white-space: nowrap; }
.rpg-result .domain-pole-heading strong, .rpg-outcome .domain-pole-heading strong { grid-column: 3; grid-row: 1 / 3; justify-self: end; color: var(--modo-ink); font-size: var(--modo-text-xs); font-variant-numeric: tabular-nums; }
.rpg-result .domain-pole-labels, .rpg-outcome .domain-pole-labels { grid-column: 2; display: flex; justify-content: space-between; gap: 8px; min-width: 0; margin: 0; font-size: .625rem; font-weight: 850; line-height: 1.25; }
.rpg-result .domain-pole-labels span, .rpg-outcome .domain-pole-labels span { max-width: 48%; }
.rpg-result .domain-pole-labels span:last-child, .rpg-outcome .domain-pole-labels span:last-child { text-align: right; }
.rpg-result .domain-pole-track, .rpg-outcome .domain-pole-track { grid-column: 2; position: relative; height: 16px; margin: 0; border: 2px solid var(--modo-ink); background: white; overflow: hidden; }
.rpg-result .domain-pole-track::before, .rpg-outcome .domain-pole-track::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--domain-score); background: var(--modo-acid); }
.rpg-result .domain-pole-track::after, .rpg-outcome .domain-pole-track::after { content: ""; position: absolute; inset: 0; width: auto; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), color-mix(in srgb, var(--modo-ink) 42%, transparent) calc(10% - 1px) 10%); }
.rpg-result .domain-pole-range, .rpg-outcome .domain-pole-range { top: 2px; bottom: 2px; background: color-mix(in srgb, var(--modo-violet) 42%, transparent); }
.rpg-result .domain-pole-marker, .rpg-outcome .domain-pole-marker { top: 0; bottom: 0; width: 3px; height: auto; border: 0; border-radius: 0; background: var(--modo-violet); box-shadow: none; transform: translateX(-50%); }
.rpg-result .domain-pole-row.is-missing, .rpg-outcome .domain-pole-row.is-missing { grid-template-rows: auto; }
.rpg-result .domain-pole-missing, .rpg-outcome .domain-pole-missing { grid-column: 2 / 4; margin: 0; font-size: var(--modo-text-xs); }
.rpg-result .score-note { margin: 12px 0 0; }
.rpg-story-windows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.rpg-story-windows .rpg-window { padding: 20px 18px; box-shadow: 4px 4px 0 var(--modo-ink), inset 0 0 0 3px var(--modo-panel), inset 0 0 0 4px var(--modo-ink); }
.rpg-story-windows p { margin: 6px 0 0; font-size: var(--modo-text-s); line-height: 1.75; font-weight: 750; }
.rpg-story-windows .rpg-question-window { grid-column: 1 / -1; background: var(--modo-acid); box-shadow: var(--modo-shadow-m), inset 0 0 0 3px var(--modo-acid), inset 0 0 0 4px var(--modo-ink); }
.rpg-story-windows .rpg-question-window .rpg-kicker { color: var(--modo-ink); }
.rpg-story-windows .rpg-question-window p { font-size: var(--modo-text-m); font-weight: 900; }
.individual-share { padding: 8px 0 0; }
.individual-share .result-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.individual-share .share-status { margin: 14px 0 0; text-align: center; }
.individual-share .result-replies { display: block; margin: 12px auto 0; min-height: 44px; }
.character-provisional { margin: 16px 0 0; padding-top: 14px; border-top: 1px solid currentColor; color: var(--modo-violet-pale); font-size: .875rem; line-height: 1.7; }
.story-boundary { max-width: 65ch; margin: 10px auto 0; padding: 0 8px; color: var(--modo-ink-soft); font-size: 1rem; line-height: 1.8; }
.individual-neighbours > .button { margin-top: 24px; }
.result-reading-dock { position: fixed; z-index: 35; bottom: max(12px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); display: flex; width: min(440px, calc(100% - 24px)); gap: 8px; padding: 8px; border: 2px solid var(--modo-ink); border-radius: 10px; background: var(--modo-paper); box-shadow: 3px 3px 0 var(--modo-ink); }
.result-reading-dock[hidden] { display: none; }
.result-reading-dock a, .result-reading-dock button { display: flex; align-items: center; justify-content: center; min-height: 44px; flex: 1; padding: 8px; border: 0; border-radius: 6px; font: inherit; font-size: .875rem; font-weight: 800; text-align: center; text-decoration: none; color: var(--modo-ink); background: transparent; cursor: pointer; }
.result-reading-dock button { color: white; background: var(--modo-violet); }
.result-reading-dock ~ .result-retake { margin-bottom: 60px; }
.reply-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.reply-counts > div { display: grid; gap: 4px; padding: 12px 6px; border: 1px solid var(--modo-ink); background: var(--modo-panel); text-align: center; }
.reply-counts strong { font-size: 1.7rem; }
.reply-counts span { font-size: .875rem; }
.owned-referral-heading { flex-wrap: wrap; }
.owned-referral-list p { font-size: .875rem; font-weight: 500; }
.history-dialog-card { max-width: 720px; }
#result-history-list { display: grid; gap: 14px; margin-top: 24px; }
.history-entry { padding: 16px; border: 1px solid var(--modo-ink); background: var(--modo-paper); }
.history-entry summary { min-height: 44px; cursor: pointer; line-height: 1.6; }
.history-entry time { display: inline-block; margin-right: 12px; font-size: .875rem; }
.history-entry summary strong { display: block; font-size: 1.1rem; }
.history-entry-body { display: flex; align-items: start; gap: 16px; margin-top: 18px; }
.history-entry-body img { width: 80px; height: auto; }
.history-scores { flex: 1; margin: 0; }
.history-scores > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid var(--modo-muted); }
.history-scores dt { font-size: .875rem; }
.history-scores dd { margin: 0; font-weight: 800; font-variant-numeric: tabular-nums; }
.history-version { overflow-wrap: anywhere; font-size: .75rem; color: var(--modo-muted); }
.theme-preview, .commerce-restore { width: 100%; text-align: left; }
.theme-preview h2 { font-size: clamp(1.5rem, min(4vw, 19.2px), 2rem); }
.theme-preview p { line-height: 1.8; }
.theme-preview label, .commerce-restore label { display: block; margin: 18px 0 8px; font-weight: 700; }
.theme-preview select, .commerce-restore input { width: 100%; min-height: 48px; padding: 10px; border: 1px solid var(--modo-ink); background: var(--modo-panel); font: inherit; }
.theme-preview .button, .commerce-restore .button { margin-top: 16px; }
.theme-preview blockquote { margin: 24px 0 0; padding: 16px 20px; border-left: 4px solid var(--modo-violet); background: var(--modo-panel); font-size: 1.1rem; line-height: 1.85; }
.commerce-restore summary { cursor: pointer; min-height: 44px; font-weight: 800; }
.commerce-restore code { overflow-wrap: anywhere; }
.individual-longform-body { max-width: 70ch; margin-inline: auto; }
.individual-longform-body .longform-block p, .individual-longform-body .longform-list p, .individual-longform-shared > p:last-child { font-weight: 450; }
.individual-longform-body .longform-section { scroll-margin-top: 88px; }
.individual-longform-entry { scroll-margin-bottom: 100px; }
.individual-longform-entry { scroll-margin-top: 90px; }
.individual-introduction { max-width: 48em; font-size: var(--modo-text-m); line-height: 1.9; font-weight: 500; }
.reading-collapse { font-size: var(--modo-text-s); white-space: nowrap; }
.dex-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 22px; border-top: 2px solid var(--modo-ink); }
.dex-controls label { min-width: 0; display: grid; gap: 8px; font-size: var(--modo-text-xs); font-weight: 800; }
.dex-controls select { width: 100%; min-width: 0; min-height: 46px; padding: 10px 8px; border: 1px solid var(--modo-ink); border-radius: 4px; background: var(--modo-panel); color: var(--modo-ink); font: inherit; }
.dex-explorer-note { margin: 12px 0; color: var(--modo-ink-soft); font-size: var(--modo-text-xs); font-weight: 450; line-height: 1.75; }
.dex-visible-count { margin: 20px 0 12px; font-size: var(--modo-text-s); font-weight: 800; }
.dex-journal { margin: 24px 0 32px; padding: 20px 0; border-block: 1px solid var(--modo-ink); }
.dex-journal h2 { margin: 0; font-size: var(--modo-text-l); }
.dex-journal > p { margin: 8px 0 14px; font-size: var(--modo-text-xs); font-weight: 450; line-height: 1.7; }
.dex-journal-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.dex-journal-list button { min-width: 0; display: flex; gap: 10px; align-items: center; border: 1px solid var(--modo-ink); background: var(--modo-panel); padding: 10px; text-align: left; color: var(--modo-ink); cursor: pointer; }
.dex-journal-list img { flex: 0 0 54px; }
.dex-journal-list span { min-width: 0; display: grid; gap: 5px; }
.dex-journal-list time { font-size: var(--modo-text-xs); }
.dex-journal-list strong { font-size: var(--modo-text-s); overflow-wrap: anywhere; }
.dex-open { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: pointer; }
.dex-open::after { content: ""; position: absolute; inset: 0; }
.dex-cell:has(.dex-open:hover) { background: var(--modo-panel); }
.dex-cell:has(.dex-open:focus-visible) { outline: 3px solid var(--modo-violet); outline-offset: 2px; }
.dex-record-count, .dex-distance { margin-top: 5px; color: var(--modo-violet); font-size: var(--modo-text-2xs); font-weight: 650; line-height: 1.5; }
.dex-empty { grid-column: 1 / -1; padding: 28px 0; line-height: 1.8; }
.history-reading { margin-top: 18px; border-top: 1px solid var(--modo-ink); padding-top: 12px; }
.history-reading > summary { min-height: 44px; cursor: pointer; font-weight: 800; line-height: 1.7; }
.history-chapters { display: flex; gap: 8px; flex-wrap: wrap; margin: 16px 0 24px; }
.history-chapters button { min-height: 44px; padding: 8px 12px; border: 1px solid var(--modo-ink); border-radius: 4px; color: var(--modo-ink); background: var(--modo-panel); font: inherit; font-size: var(--modo-text-xs); cursor: pointer; }
.history-reading .longform-head h2 { font-size: clamp(1.35rem, min(5vw, 24px), 2rem); }
.history-reading .longform-section { scroll-margin-top: 24px; }
#result-history-dialog form { position: sticky; top: 0; z-index: 2; display: flex; justify-content: flex-end; margin: 0 0 12px; padding: 6px 0; background: var(--modo-panel); border-bottom: 1px solid var(--modo-ink); }
#result-history-dialog .dialog-close { position: static; min-height: 44px; }
#result-history-dialog .longform-section { scroll-margin-top: 74px; }
.dex-controls { grid-template-columns: 1fr; gap: 12px; }
.dex-journal-list { grid-template-columns: 1fr; }
.result-reading-dock { gap: 8px; padding-inline: 10px; }
.result-reading-dock a, .result-reading-dock button { font-size: .72rem; }
.history-dialog-card { padding-inline: 12px; }
.history-entry { padding: 12px; }
.individual-share .result-actions { grid-template-columns: 1fr 1fr; gap: 8px; }
.individual-share .button { min-width: 0; padding-inline: 10px; font-size: .875rem; }
.individual-tagline { white-space: normal; font-size: .875rem; }
.individual-neighbour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.history-entry-body { display: block; }
.history-entry-body img { float: right; width: 64px; margin: 0 0 8px 8px; }
.history-scores { clear: both; }
.result-retake { text-align: center; }
.result-retake button { min-height: 44px; padding: 0; border: 0; border-bottom: 1px solid currentColor; background: transparent; color: var(--modo-violet); font: inherit; font-size: var(--modo-text-s); font-weight: 900; cursor: pointer; }
.individual-result .disclaimer, .individual-unordered .disclaimer { margin: 6px 0 0; }
.result-calibration-window { margin-bottom: 18px; }
.result-calibration-window .result-threshold-note { max-width: none !important; margin: 0; color: var(--modo-ink-soft); opacity: 1; }
.result-calibration-window .result-threshold-note a { color: var(--modo-violet); }
.individual-unordered .rpg-dialog-window h1 { margin: 6px 0 0; font-size: clamp(2rem, min(6vw, 28.8px), 3.8rem); line-height: 1.15; letter-spacing: -.05em; }
.individual-unordered-copy { margin: 14px 0 0; color: var(--modo-ink-soft); font-size: var(--modo-text-m); line-height: 1.8; font-weight: 750; }
.individual-unordered .result-actions { justify-content: center; }
.rpg-outcome { width: min(800px, calc(100% - 36px)); min-height: 70svh; display: grid; align-content: start; gap: 24px; margin: 0 auto; padding: clamp(48px, min(8vw, 38.4px), 96px) 0; }
.rpg-outcome .rpg-dialog-window h1 { margin: 6px 0 12px; font-size: clamp(2.1rem, min(6vw, 28.8px), 4rem); line-height: 1.12; letter-spacing: -.05em; }
.rpg-outcome .rpg-dialog-window > p:last-child { margin: 0; color: var(--modo-ink-soft); line-height: 1.8; font-weight: 750; }
.rpg-outcome .outcome-domain-list { display: block; margin: 14px 0 0; }
.rpg-outcome > .disclaimer { margin: 0; }

.result-world-scene { height: 250px; }
.result-world-scene img { bottom: 14px; height: 78%; max-width: min(72vw, 345.6px); }
.rpg-result-body { gap: 20px; }
.individual-neighbour-grid { gap: 7px; }
.individual-neighbour { padding: 6px 3px; box-shadow: 3px 3px 0 var(--modo-ink); }
.individual-neighbour figcaption { font-size: .6875rem; }
.rpg-story-windows { grid-template-columns: 1fr; gap: 12px; }
.rpg-story-windows .rpg-question-window { grid-column: auto; }
.individual-share .result-actions { grid-template-columns: 1fr; }
.rpg-outcome .result-actions { display: grid; grid-template-columns: 1fr; }

@media (max-width: 350px) {
  .rpg-result .domain-pole-row, .rpg-outcome .domain-pole-row { grid-template-columns: minmax(132px, 146px) minmax(0, 1fr) 30px; gap-inline: 6px; padding-inline: 9px; }
  .rpg-result .domain-pole-heading h3, .rpg-outcome .domain-pole-heading h3 { font-size: var(--modo-text-2xs); }}

/* 「横にスクロールすると…」の行。8591fd7 の規則を復元（08a12e9 で行ごと消えていた） */
.home-world-more { position: relative; z-index: 5; margin: 0; padding: 10px max(18px, min(4vw, 19.2px)) 12px; text-align: right; color: var(--modo-world-soft); font-size: var(--modo-text-xs); font-weight: 850; }
.home-world-more a { min-height: 44px; display: inline-flex; align-items: center; color: inherit; }

.home-world-more { padding-block: 6px 8px; }

/* ---- A×RPG 検収での修正（2026-08-27・390px実測）----
   ステータス窓: 列1（ラベル146〜168px）が幅を取り、列2の左右の説明が1〜2文字ずつ縦に折れて読めなかった。
   狭い幅では 3段（見出し＋数値／左右の説明／ゲージ）に積む。 */
.rpg-result .domain-pole-row, .rpg-outcome .domain-pole-row {
  grid-template-columns: minmax(0, 1fr) 34px; grid-template-rows: auto auto 16px; gap: 6px 10px;
}
.rpg-result .domain-pole-heading h3, .rpg-outcome .domain-pole-heading h3 { grid-column: 1; grid-row: 1; white-space: nowrap; }
.rpg-result .domain-pole-heading strong, .rpg-outcome .domain-pole-heading strong { grid-column: 2; grid-row: 1; }
.rpg-result .domain-pole-labels, .rpg-outcome .domain-pole-labels { grid-column: 1 / -1; grid-row: 2; }
.rpg-result .domain-pole-labels span, .rpg-outcome .domain-pole-labels span { max-width: none; white-space: nowrap; }
.rpg-result .domain-pole-track, .rpg-outcome .domain-pole-track { grid-column: 1 / -1; grid-row: 3; }
.rpg-result .domain-pole-row.is-missing, .rpg-outcome .domain-pole-row.is-missing { grid-template-rows: auto auto; }
.rpg-result .domain-pole-missing, .rpg-outcome .domain-pole-missing { grid-column: 1 / -1; grid-row: 2; }
/* 紙一重の4体: 4列だと「すごろくま／す」と語中で折れる。狭い幅では2×2にし、名前は1行 */
.individual-neighbour-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.individual-neighbour figcaption > span { white-space: nowrap; }
.individual-share .result-actions { grid-template-columns: 1fr 1fr; }
.rpg-result .domain-pole-labels { font-size: .75rem; }
.rpg-result .domain-pole-labels span { white-space: normal; }

.individual-result .result-world-scene { height: clamp(210px, 32vh, 310px); }
.individual-encounter { padding-block: 24px; }
.legacy-facet-readings article { padding-block: 18px; border-top: 1px solid var(--modo-muted); }
.legacy-facet-readings p { line-height: 1.85; }
.share-link-label { display: block; margin: 18px 0 6px; font-size: .875rem; font-weight: 700; }
.share-link-value { width: 100%; min-height: 44px; padding: 10px; border: 1px solid var(--modo-muted); background: var(--modo-paper); color: var(--modo-ink); font: inherit; font-size: .875rem; }
.domain-pole-observation { grid-column: 1 / -1; margin: 2px 0 0; font-size: .75rem; color: var(--modo-muted); }

/* 回答の解説と、書き足していく私的な読書アルバム。 */
.personal-reading { margin-block: 30px; padding: clamp(20px, min(4vw, 19.2px), 36px); background: #fffdf7; border: 1px solid #cfc4dd; border-radius: 12px; }
.personal-reading h2 { margin: 8px 0 18px; font-size: clamp(1.35rem, min(3vw, 14.4px), 1.8rem); line-height: 1.5; }
.personal-reading p { line-height: 1.95; }
.personal-reading-intro, .personal-reading-footnote { color: #61586b; font-size: .875rem; }
.personal-reading-item { padding: 22px 0; border-top: 1px solid #e0d7e6; }
.personal-reading-item > div { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.personal-reading-item h3 { margin: 0; color: #503c68; font-size: 1.05rem; }
.personal-reading-item span { font-size: .75rem; color: #61586b; }
.personal-reading-item > p { margin: 14px 0 0; }
.personal-reading-item .personal-reading-prompt { margin-top: 12px; color: var(--modo-ink-soft); }
.personal-reading-prompt > span { display: block; margin-bottom: 2px; font-size: .75rem; letter-spacing: .06em; color: #61586b; }
.personal-reading-more summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-weight: 700; color: #503c68; }
.personal-reading-method summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-size: .8125rem; color: #61586b; }
.reading-album { margin: 28px 0 36px; padding: clamp(16px, min(3vw, 14.4px), 28px); border: 1px solid #bdaccb; border-radius: 14px; background: #fffdf7; }
.reading-album[hidden] { display: none; }
.album-heading { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.album-heading h2 { margin: 6px 0; color: #503c68; font-size: 1.65rem; }
.album-private, .album-status, .album-provenance, .album-source-missing { color: #61586b; font-size: .8125rem; line-height: 1.8; }
.album-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 20px 0 14px; }
.album-controls label, .album-dialog label { display: grid; gap: 7px; color: #503c68; font-size: .875rem; }
.album-controls select, .album-dialog select, .album-dialog input[type="date"], .album-dialog textarea { width: 100%; min-width: 0; max-width: 100%; min-height: 44px; box-sizing: border-box; border: 1px solid #b9acc5; border-radius: 6px; padding: 10px; background: white; color: #332a3d; font: inherit; }
.album-dialog textarea { resize: vertical; font-size: 16px; line-height: 1.8; }
.album-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.album-item { min-width: 0; padding: 18px; border: 1px solid #e0d7e6; border-radius: 9px; background: white; }
.album-item-heading { display: flex; align-items: center; gap: 12px; }
.album-item-heading img { width: 56px; height: 56px; object-fit: contain; flex: 0 0 auto; }
.album-item-heading p { margin: 0 0 3px; color: #61586b; font-size: .75rem; }
.album-item h3 { margin: 0; color: #503c68; font-size: 1rem; }
.album-item time { font-size: .75rem; color: #61586b; }
.album-item blockquote { margin: 18px 0; padding: 0 0 0 16px; border-left: 3px solid #b993da; line-height: 1.95; font-weight: 500; }
.album-item p { line-height: 1.85; overflow-wrap: anywhere; }
.album-note-text { white-space: pre-wrap; }
.album-item-actions { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; }
.album-item-actions .text-button { min-height: 44px; white-space: normal; }
.album-empty { padding: 28px 8px; text-align: center; line-height: 1.9; }
.album-empty strong { color: #503c68; }
.album-dialog { padding: 0; width: min(620px, calc(min(100vw, 480px) - 24px)); max-height: calc(100dvh - 24px); border: 1px solid #bdaccb; border-radius: 12px; color: #332a3d; background: #fffdf7; box-sizing: border-box; }
.album-dialog::backdrop { background: rgb(40 24 52 / 48%); }
.album-dialog-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 20px; position: sticky; top: 0; z-index: 2; background: #fffdf7; border-bottom: 1px solid #e0d7e6; }
.album-dialog-head h2 { margin: 0; font-size: 1.1rem; line-height: 1.5; }
.album-dialog-head button { min-height: 44px; flex-shrink: 0; padding: 10px; background: transparent; border: 0; font: inherit; color: #503c68; cursor: pointer; }
.album-dialog-body { padding: 20px; }
.session-save-notice { max-width: 960px; margin: 16px auto; padding: 18px 22px; border: 2px solid #986b35; background: #fff8e9; color: #4a321d; }
.session-save-notice[hidden] { display: none; }
.session-save-notice p { margin: 0 0 14px; line-height: 1.8; font-size: .9rem; }
.assessment-save-state { min-height: 1.7em; color: var(--modo-muted); font-size: .875rem; line-height: 1.7; margin: 8px 0 18px; }
.personal-evidence { margin: 14px 0 8px; border-top: 1px solid #e0d7e6; }
.personal-evidence summary { min-height: 44px; padding: 12px 0; color: #644a77; cursor: pointer; font-size: .875rem; }
.personal-evidence ol { padding-left: 1.4em; }
.personal-evidence li { margin: 14px 0; line-height: 1.9; font-size: .9rem; }
.personal-evidence li span { display: block; color: #644a77; }
.personal-evidence p { font-size: .875rem; line-height: 1.9; }
.session-save-notice { margin: 12px; padding: 16px; }
.session-save-notice .button { width: 100%; padding: 12px; }
.album-dialog-body > p, .album-dialog form > p { line-height: 1.8; }
.album-dialog form { display: grid; gap: 18px; }
.album-dialog form > p { margin: 0; }
.album-sentences { border: 0; padding: 0; margin: 24px 0; min-width: 0; }
.album-sentences legend { font-size: .875rem; color: #503c68; margin-bottom: 12px; }
.album-sentences label { display: flex; align-items: flex-start; gap: 10px; padding: 14px 12px; margin-bottom: 10px; background: white; border: 1px solid #cfc4dd; border-radius: 8px; cursor: pointer; line-height: 1.9; color: #332a3d; }
.album-sentences label:has(input:checked) { border-color: #795195; background: #f5eef9; }
.album-sentences input { flex: 0 0 auto; margin-top: 7px; accent-color: #795195; }
.album-dialog [role="status"] { line-height: 1.8; }
.album-dialog [hidden] { display: none !important; }
.language-availability { max-width: 1120px; margin: 16px auto; padding: 12px 20px; border-left: 3px solid #795195; color: #58456b; font-size: .875rem; line-height: 1.8; }
.language-availability[hidden] { display: none; }
.album-discard { padding: 14px; border: 1px solid #b993da; border-radius: 8px; background: #f5eef9; }
.album-discard[hidden] { display: none; }
.album-discard button { min-height: 44px; padding: 8px; font: inherit; font-size: .875rem; color: #503c68; background: white; border: 1px solid #b993da; margin: 4px; border-radius: 4px; }
.reading-album :focus-visible, .album-dialog :focus-visible, .personal-reading summary:focus-visible { outline: 3px solid #795195; outline-offset: 3px; }
.conversation-editor { display: grid; gap: 16px; margin-top: 24px; }
.conversation-editor textarea { box-sizing: border-box; width: 100%; padding: 18px; border: 1px solid #998ca9; border-radius: 8px; font: inherit; font-size: 1rem; line-height: 1.9; color: #332a3d; background: #fff; resize: vertical; }
.conversation-editor p, .conversation-editor li { line-height: 1.8; }
.conversation-editor .conversation-count { margin-top: -12px; font-size: .875rem; text-align: right; }
.conversation-benefit { min-width: 0; padding: 24px 0 0; border: 0; border-top: 1px solid #cfc4dd; }
.conversation-benefit legend { font-weight: 700; padding: 0; }
.conversation-benefit > div { display: flex; flex-wrap: wrap; gap: 8px; }
.conversation-benefit [aria-pressed="true"] { border-color: #795195; background: #f5eef9; }
.conversation-benefit p { font-size: .875rem; }
.owned-statement, .album-dialog [data-preview] { margin: 20px 0; padding: 12px 16px; border-left: 3px solid #795195; line-height: 1.9; overflow-wrap: anywhere; }
.album-list, .album-controls { grid-template-columns: 1fr; }
.album-item { padding: 14px; }
.album-dialog-body { padding: 16px; }
.album-dialog-head { padding: 10px 16px; }
.personal-reading { padding: 18px; }
.individual-result .result-world-scene { height: 200px; }
.individual-encounter { padding: 20px; }
.individual-encounter h1 { font-size: clamp(1.9rem, min(9vw, 43.2px), 2.6rem); }

/* 有料テーマの入口（結果画面・8 章の入口の直前。docs/theme-family-spec.md §4） */
.theme-entry { margin-top: 20px; padding: 0; }
.theme-entry-title { margin: 4px 0 0; font-size: 22px; line-height: 1.4; }
.theme-entry-lead { margin: 8px 0 16px; color: var(--modo-ink-soft); }
.theme-entry-heading { margin: 0 0 6px; font-size: 17px; line-height: 1.5; }
.theme-entry-sample { margin: 0; line-height: 1.95; }
.theme-entry-more { margin: 12px 0 0; color: var(--modo-muted); font-size: 14px; line-height: 1.7; }
.theme-entry .result-actions { margin-top: 12px; }
.theme-entry-terms { margin: 10px 0 0; color: var(--modo-muted); font-size: 13px; }
.theme-contents { margin: 12px 0 0; padding-left: 1.2em; color: var(--modo-ink-soft); }