/* survey-report-engine HTML 報告書のレイアウト。色・フォント・余白は tokens.css の変数のみを使う（16 進の色を直書きしない） */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font-ja);
  font-size: var(--text-body-size);
  font-weight: var(--text-body-weight);
  line-height: var(--text-body-lh);
  letter-spacing: 0.08em;
  color: var(--color-text-primary);
  background: var(--color-base-cream);
  font-feature-settings: "palt";
  overflow-wrap: anywhere;
}
.num, .tabular, td, th { font-variant-numeric: var(--font-numeric-feature); }
a { color: var(--color-brand-bigquery-blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4 { margin: 0; letter-spacing: 0.03em; }
p { margin: 0 0 calc(var(--space-unit-px) * 3); }
ul, ol { margin: 0 0 calc(var(--space-unit-px) * 3); padding-left: 1.4em; }
li { margin-bottom: calc(var(--space-unit-px) * 1); }
img { max-width: 100%; height: auto; }

/* ---- ヘッダー */
.watermark {
  background: var(--color-functional-highlight-bg);
  color: var(--watermark-color);
  opacity: var(--watermark-opacity);
  font-size: var(--text-small-size);
  font-weight: 600;
  text-align: center;
  padding: calc(var(--space-unit-px) * 1.5) calc(var(--space-unit-px) * 4);
  border-bottom: var(--border-width) solid var(--border-color);
}
.site-header {
  background: var(--color-base-white);
  border-bottom: var(--border-width) solid var(--border-color);
}
.site-header .inner {
  max-width: 1240px; margin: 0 auto; padding: calc(var(--space-unit-px) * 3) calc(var(--space-unit-px) * 5);
  display: flex; align-items: center; gap: calc(var(--space-unit-px) * 4); flex-wrap: wrap;
}
.site-header .logo img { height: var(--logo-header-height); width: auto; display: block; }
.site-header .title { font-size: var(--text-h3-size); font-weight: var(--text-h3-weight); line-height: var(--text-h3-lh); flex: 1 1 320px; }
.site-header .title small { display: block; font-size: var(--text-caption-size); font-weight: var(--text-caption-weight); color: var(--color-text-secondary); }
.nav {
  background: var(--color-base-white);
  border-bottom: var(--border-width) solid var(--border-color);
  position: sticky; top: 0; z-index: 10;
}
.nav ol {
  list-style: none; margin: 0 auto; padding: 0 calc(var(--space-unit-px) * 3);
  max-width: 1240px; display: flex; flex-wrap: wrap; gap: 0;
}
.nav li a {
  display: block; padding: calc(var(--space-unit-px) * 2.5) calc(var(--space-unit-px) * 3);
  font-size: var(--text-small-size); color: var(--color-text-secondary); border-bottom: 2px solid transparent;
}
.nav li a.current { color: var(--color-text-primary); font-weight: 600; border-bottom-color: var(--color-brand-transform-orange); }
.nav li a:hover { text-decoration: none; color: var(--color-text-primary); }

/* ---- 章ナビ共通: 通番・アイコン・章名 */
.nav-toggle { display: none; }
.nav li a { display: flex; align-items: center; gap: 8px; }
.nav .nav-n { font-family: var(--font-latin); font-variant-numeric: tabular-nums; font-weight: 600; min-width: 1.4em; text-align: right; letter-spacing: 0; }
.nav .nav-ico { width: 1.15em; height: 1.15em; flex: 0 0 auto; color: var(--color-text-tertiary); }
.nav li a.current .nav-ico { color: var(--color-brand-transform-orange); }

/* ---- 広い画面（1024px 以上）: 上部バーを固定し、章の見出しタブを左に縦に並べる。閉じると通番とアイコンだけ残して細くなる */
@media (min-width: 1024px) {
  :root { --side-w: 236px; --header-h: 72px; }
  html.nav-collapsed { --side-w: 88px; }
  body { display: grid; grid-template-columns: var(--side-w) minmax(0, 1fr); grid-template-rows: auto auto 1fr auto; transition: grid-template-columns 0.18s ease; }
  .watermark, .site-header, .site-footer { grid-column: 1 / -1; }
  .site-header { position: sticky; top: 0; z-index: 20; }
  .site-header .inner { max-width: none; margin: 0; padding-left: calc(var(--space-unit-px) * 5); }
  .nav { grid-column: 1; grid-row: 3; position: sticky; top: var(--header-h); align-self: start; height: calc(100vh - var(--header-h)); overflow-y: auto; overflow-x: hidden; border-bottom: 0; border-right: var(--border-width) solid var(--border-color); background: var(--color-base-white); padding: calc(var(--space-unit-px) * 2) 0 calc(var(--space-unit-px) * 4); display: flex; flex-direction: column; }
  .nav-toggle { display: flex; align-items: center; justify-content: center; align-self: flex-end; width: 36px; height: 36px; margin: 0 calc(var(--space-unit-px) * 3) calc(var(--space-unit-px) * 2) 0; border: var(--border-width) solid var(--border-color); border-radius: var(--radius-md); background: var(--color-base-white); color: var(--color-text-secondary); cursor: pointer; padding: 0; }
  .nav-toggle:hover { color: var(--color-text-primary); border-color: var(--color-text-tertiary); }
  .nav-toggle svg { width: 18px; height: 18px; }
  .nav-toggle .tg-open { display: none; }
  html.nav-collapsed .nav-toggle .tg-close { display: none; }
  html.nav-collapsed .nav-toggle .tg-open { display: block; }
  html.nav-collapsed .nav-toggle { align-self: center; margin-right: 0; }
  .nav ol { display: block; max-width: none; padding: 0; }
  .nav li a { padding: calc(var(--space-unit-px) * 2.25) calc(var(--space-unit-px) * 4) calc(var(--space-unit-px) * 2.25) calc(var(--space-unit-px) * 4); border-bottom: 0; border-left: 3px solid transparent; line-height: 1.5; white-space: nowrap; }
  .nav li a.current { border-left-color: var(--color-brand-transform-orange); background: var(--color-functional-highlight-bg); }
  .nav li a:hover { background: var(--color-base-warm-gray); }
  html.nav-collapsed .nav li a { justify-content: center; gap: 8px; padding: calc(var(--space-unit-px) * 2.25) 0 calc(var(--space-unit-px) * 2.25) 0; }
  html.nav-collapsed .nav .nav-t { display: none; }
  html.nav-collapsed .nav .nav-n { min-width: 1.6em; text-align: right; }
  html.nav-collapsed .nav .nav-ico { width: 18px; height: 18px; }
  main { grid-column: 2; grid-row: 3; max-width: 1240px; width: 100%; margin: 0 auto; }
  .site-footer .inner { max-width: none; margin: 0; }
}

/* ---- LLM へ送るボタン */
.llm-row { display: flex; flex-wrap: wrap; gap: calc(var(--space-unit-px) * 2); margin: calc(var(--space-unit-px) * 2) 0 calc(var(--space-unit-px) * 1); }
.llm-btn { display: inline-flex; align-items: center; gap: 8px; }
.llm-ico { width: 18px; height: 18px; flex: 0 0 auto; }

/* ---- データ（ダウンロード） */
.dl-list { list-style: none; margin: 0; padding: 0; }
.dl { border-top: var(--border-width) solid var(--border-color); padding: calc(var(--space-unit-px) * 3) 0; }
.dl:last-child { border-bottom: var(--border-width) solid var(--border-color); }
.dl .dl-row { display: grid; grid-template-columns: 1.4em 1fr auto auto; gap: 12px; align-items: center; text-decoration: none; color: var(--color-text-primary); }
a.dl-row:hover .dl-l { color: var(--color-brand-transform-orange); }
.dl-ico { width: 1.2em; height: 1.2em; color: var(--color-text-secondary); }
.dl-l { font-weight: 600; }
.dl-f { font-family: var(--font-latin); font-size: var(--text-caption-size); color: var(--color-text-tertiary); letter-spacing: 0; }
.dl-s { font-family: var(--font-latin); font-size: var(--text-caption-size); font-variant-numeric: tabular-nums; color: var(--color-text-secondary); background: var(--color-functional-highlight-bg); padding: 2px 8px; border-radius: var(--radius-sm); letter-spacing: 0; }
.dl.missing .dl-row { color: var(--color-text-tertiary); }
.dl-n { font-size: var(--text-caption-size); color: var(--color-text-secondary); margin: 4px 0 0 calc(1.4em + 12px); }
@media (max-width: 720px) { .dl .dl-row { grid-template-columns: 1.4em 1fr auto; } .dl-f { display: none; } }

/* ---- 見出しのアイコン */
.page-title .nav-ico, .page-title .ico { width: 0.9em; height: 0.9em; margin-right: 0.35em; vertical-align: -0.08em; color: var(--color-brand-transform-orange); }
.q-ico { width: 1em; height: 1em; margin-right: 0.4em; vertical-align: -0.15em; color: var(--color-brand-transform-orange); flex: 0 0 auto; }
.qhead h4 { display: flex; align-items: center; }
.provenance { margin-top: 6px; font-family: var(--font-latin); letter-spacing: 0; }
.provenance .ok { color: var(--color-brand-pipeline-green); font-weight: 600; }
.integrity table td.ok { color: var(--color-brand-pipeline-green); font-weight: 600; }
.integrity table td.ng { color: var(--color-functional-error); font-weight: 600; }
.integrity .hash { font-family: var(--font-latin); font-size: var(--text-caption-size); color: var(--color-text-tertiary); letter-spacing: 0; }

/* ---- 本文 */
main { max-width: 1240px; margin: 0 auto; padding: calc(var(--space-unit-px) * 8) calc(var(--space-unit-px) * 5) calc(var(--space-unit-px) * 12); }
.page-title { font-size: var(--text-h1-size); font-weight: var(--text-h1-weight); line-height: var(--text-h1-lh); margin-bottom: calc(var(--space-unit-px) * 2); }
.page-lead { color: var(--color-text-secondary); margin-bottom: calc(var(--space-unit-px) * 8); }
.section { margin-bottom: var(--space-section-gap); }
.section > h2 {
  font-size: var(--text-h2-size); font-weight: var(--text-h2-weight); line-height: var(--text-h2-lh);
  padding-bottom: calc(var(--space-unit-px) * 2); margin-bottom: calc(var(--space-unit-px) * 5);
  border-bottom: 2px solid var(--color-brand-charcoal);
}
.section .intro { color: var(--color-text-secondary); margin-bottom: calc(var(--space-unit-px) * 5); }
.qblock { margin-bottom: calc(var(--space-unit-px) * 10); }
.qblock > h3 {
  font-size: var(--text-h3-size); font-weight: var(--text-h3-weight); line-height: var(--text-h3-lh);
  margin-bottom: calc(var(--space-unit-px) * 3); padding-left: calc(var(--space-unit-px) * 3);
  border-left: 4px solid var(--color-brand-bigquery-blue);
}
.qblock > h3 .qid { color: var(--color-text-secondary); font-family: var(--font-latin); font-weight: 600; margin-right: 0.5em; }
.qblock .qtext { color: var(--color-text-secondary); font-size: var(--text-small-size); margin-bottom: calc(var(--space-unit-px) * 4); }

/* ---- 目次 */
.toc { background: var(--color-base-white); border: var(--border-width) solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-card-padding); margin-bottom: var(--space-section-gap); }
.toc h2 { font-size: var(--text-h3-size); font-weight: var(--text-h3-weight); margin-bottom: calc(var(--space-unit-px) * 3); }
.toc ol { margin: 0; padding-left: 1.4em; columns: 2; column-gap: calc(var(--space-unit-px) * 8); }
.toc ol ol { columns: 1; margin-top: calc(var(--space-unit-px) * 1); }
.toc li { break-inside: avoid; font-size: var(--text-small-size); }
.toc-inline { font-size: var(--text-small-size); color: var(--color-text-secondary); margin-bottom: calc(var(--space-unit-px) * 6); }
.toc-inline a { margin-right: 1em; display: inline-block; }
.toc-inline .toc-lbl { font-weight: 600; margin-right: 1em; }

/* ---- Insight Card */
.card {
  background: var(--color-base-white);
  border: var(--border-width) solid var(--border-color);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  padding: var(--space-card-padding);
  margin-bottom: var(--space-element-gap);
}
.card .card-head { display: flex; gap: calc(var(--space-unit-px) * 2); align-items: center; flex-wrap: wrap; margin-bottom: calc(var(--space-unit-px) * 2); }
.tag {
  display: inline-block; font-size: var(--text-caption-size); font-weight: var(--text-caption-weight); line-height: 1;
  padding: calc(var(--space-unit-px) * 1.25) calc(var(--space-unit-px) * 2); border-radius: var(--radius-sm);
  border: var(--border-width) solid var(--border-color); color: var(--color-text-secondary); background: var(--color-base-warm-gray);
}
.tag.axis { color: var(--color-text-primary); }
.tag.ref { color: var(--color-functional-warning); border-color: var(--color-functional-warning); background: var(--color-base-white); }
.tag.sup { color: var(--color-text-primary); background: var(--color-functional-mask); border-color: var(--color-functional-mask); }
.swatch { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: 0; }
.card .headline { font-size: var(--text-h3-size); font-weight: var(--text-h3-weight); line-height: var(--text-h3-lh); margin-bottom: calc(var(--space-unit-px) * 2); }
.card .headline .num { background: var(--color-functional-highlight-bg); padding: 0 0.2em; border-radius: var(--radius-sm); }
.card .body { margin-bottom: calc(var(--space-unit-px) * 3); }
.card .fig { margin: 0 0 calc(var(--space-unit-px) * 3); overflow-x: auto; }
.card .fig svg { display: block; width: 100%; height: auto; min-width: 760px; }
.card .fig.narrow svg { min-width: 0; }
.card .meta { display: grid; grid-template-columns: max-content 1fr; gap: calc(var(--space-unit-px) * 1) calc(var(--space-unit-px) * 4); margin: 0 0 calc(var(--space-unit-px) * 3); font-size: var(--text-small-size); }
.card .meta dt { color: var(--color-text-secondary); font-weight: 500; }
.card .meta dd { margin: 0; }
.card .actions { display: flex; gap: calc(var(--space-unit-px) * 2); flex-wrap: wrap; align-items: center; }
.btn {
  display: inline-block; font-size: var(--text-small-size); font-weight: 600; line-height: 1;
  padding: calc(var(--space-unit-px) * 2.5) calc(var(--space-unit-px) * 4);
  border-radius: var(--radius-md); border: var(--border-width) solid var(--color-brand-charcoal); color: var(--color-brand-charcoal); background: var(--color-base-white);
}
.btn:hover { text-decoration: none; background: var(--color-base-warm-gray); }
details { font-size: var(--text-small-size); }
details summary { cursor: pointer; color: var(--color-text-secondary); font-weight: 500; padding: calc(var(--space-unit-px) * 2) 0; }
.tablewrap { overflow-x: auto; margin: calc(var(--space-unit-px) * 2) 0; }
table { border-collapse: collapse; width: 100%; font-size: var(--text-small-size); }
th, td { padding: calc(var(--space-unit-px) * 1.5) calc(var(--space-unit-px) * 2.5); text-align: left; border-bottom: var(--border-width) solid var(--border-color); vertical-align: top; white-space: nowrap; }
th { background: var(--color-base-warm-gray); font-weight: 600; }
td.r, th.r { text-align: right; }
tr.sup td { color: var(--color-text-secondary); }
tr.ref td { color: var(--color-text-secondary); }
tr.total td, tr.total th { font-weight: 600; }

/* ---- 表紙・まとめ */
.cover { background: var(--color-base-white); border: var(--border-width) solid var(--border-color); border-radius: var(--radius-lg); padding: calc(var(--space-unit-px) * 12) calc(var(--space-unit-px) * 10); margin-bottom: var(--space-section-gap); }
.cover.has-image { position: relative; overflow: hidden; background-size: cover; background-position: center; }
.cover.has-image::before { content: ""; position: absolute; inset: 0; background: var(--color-base-white); opacity: 0.72; }
.cover.has-image > * { position: relative; }
.cover.has-image.cover-light { min-height: 520px; display: flex; flex-direction: column; justify-content: flex-end; border: 0; background-position: center 35%; color: var(--color-text-on-dark); text-shadow: 0 1px 2px rgba(0,0,0,0.35); }
.cover.has-image.cover-light::before { background: linear-gradient(180deg, rgba(31,41,55,0.05) 0%, rgba(31,41,55,0.25) 40%, rgba(31,41,55,0.82) 100%); opacity: 1; }
.cover.has-image.cover-light .kicker { color: rgba(255,255,255,0.85); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 10px; margin-bottom: calc(var(--space-unit-px) * 3); }
.cover.has-image.cover-light .kicker::before { content: ""; width: 28px; height: 1px; background: var(--color-brand-transform-orange); }
.cover.has-image.cover-light h1 { font-size: clamp(32px, 4vw, 54px); font-weight: 700; letter-spacing: 0.01em; line-height: 1.25; max-width: 22em; margin-bottom: calc(var(--space-unit-px) * 7); }
.cover.has-image.cover-light .facts { display: flex; flex-wrap: wrap; gap: calc(var(--space-unit-px) * 2) 0; padding-top: calc(var(--space-unit-px) * 4); border-top: 1px solid rgba(255,255,255,0.25); }
.cover.has-image.cover-light .facts > div { display: flex; flex-direction: column; gap: 2px; padding-right: calc(var(--space-unit-px) * 4); margin-right: calc(var(--space-unit-px) * 4); border-right: 1px solid rgba(255,255,255,0.18); }
.cover.has-image.cover-light .facts > div:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.cover.has-image.cover-light .facts dt { color: rgba(255,255,255,0.65); font-size: 11px; letter-spacing: 0.08em; }
.cover.has-image.cover-light .facts dd { color: var(--color-text-on-dark); font-size: var(--text-small-size); font-weight: 500; }
.cover.has-image.cover-light .logo { position: absolute; top: calc(var(--space-unit-px) * 6); right: calc(var(--space-unit-px) * 8); margin: 0; background: rgba(255,255,255,0.92); padding: 8px 14px; border-radius: var(--radius-md); line-height: 0; }
.cover.has-image.cover-light .logo img { height: 30px; }
@media (max-width: 720px) {
  .cover.has-image.cover-light { min-height: 460px; }
  .cover.has-image.cover-light .facts > div { border-right: 0; margin-right: 0; padding-right: 0; flex-basis: 50%; }
  .cover.has-image.cover-light .logo { position: static; order: -1; align-self: flex-end; margin-bottom: auto; }
  .cover.has-image.cover-light .logo img { height: 24px; }
}
.cover .kicker { color: var(--color-text-secondary); font-size: var(--text-small-size); font-weight: 600; letter-spacing: 0.02em; margin-bottom: calc(var(--space-unit-px) * 3); }
.cover h1 { font-size: var(--text-display-size); font-weight: var(--text-display-weight); line-height: var(--text-display-lh); margin-bottom: calc(var(--space-unit-px) * 6); }
.cover .facts { display: grid; grid-template-columns: max-content 1fr; gap: calc(var(--space-unit-px) * 1) calc(var(--space-unit-px) * 6); font-size: var(--text-small-size); margin: 0; }
.cover .facts > div { display: contents; }
.cover .facts dt { color: var(--color-text-secondary); }
.cover .facts dd { margin: 0; }
.cover .logo { text-align: right; margin-top: calc(var(--space-unit-px) * 8); }
.cover .logo img { height: 40px; width: auto; }
.notice { background: var(--color-functional-highlight-bg); border: var(--border-width) solid var(--color-brand-transform-orange); border-radius: var(--radius-md); padding: calc(var(--space-unit-px) * 3) calc(var(--space-unit-px) * 4); font-size: var(--text-small-size); margin-bottom: var(--space-element-gap); }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: calc(var(--space-unit-px) * 3); margin-bottom: var(--space-element-gap); }
.tile { background: var(--color-base-white); border: var(--border-width) solid var(--border-color); border-radius: var(--radius-md); padding: calc(var(--space-unit-px) * 4); }
.tile .v { font-family: var(--font-latin); font-size: var(--text-h1-size); font-weight: var(--text-h1-weight); line-height: 1.2; }
.tile .l { font-size: var(--text-caption-size); color: var(--color-text-secondary); margin-top: calc(var(--space-unit-px) * 1); }
.findings { counter-reset: f; list-style: none; padding: 0; margin: 0; display: block; }
.findings li { counter-increment: f; background: none; border: none; border-bottom: var(--border-width) solid var(--border-color); border-radius: 0; padding: calc(var(--space-unit-px) * 3) 0 calc(var(--space-unit-px) * 3) 40px; position: relative; }
.findings li::before { content: counter(f); position: absolute; left: 0; top: calc(var(--space-unit-px) * 3); width: 26px; height: 26px; border-radius: 50%; background: var(--color-brand-charcoal); color: var(--color-text-on-dark); font-family: var(--font-latin); font-weight: 700; display: flex; align-items: center; justify-content: center; font-size: var(--text-small-size); }
.findings .f-title { font-weight: 600; margin-bottom: calc(var(--space-unit-px) * 1); }
.findings .f-sub { font-size: var(--text-small-size); color: var(--color-text-secondary); margin: 0; }
.findings .num { background: none; padding: 0; font-weight: 700; }
.two-col { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--space-element-gap); }
.plain { background: var(--color-base-white); border: var(--border-width) solid var(--border-color); border-radius: var(--radius-lg); padding: var(--space-card-padding); margin-bottom: var(--space-element-gap); }
.plain h3 { font-size: var(--text-h3-size); font-weight: var(--text-h3-weight); margin-bottom: calc(var(--space-unit-px) * 3); }
.quote { border-left: 3px solid var(--color-base-stone); padding-left: calc(var(--space-unit-px) * 3); color: var(--color-text-primary); margin: 0 0 calc(var(--space-unit-px) * 2); font-size: var(--text-small-size); }
.next-link { margin-top: var(--space-section-gap); font-size: var(--text-small-size); }

/* ---- フッター */
.site-footer { border-top: var(--border-width) solid var(--border-color); background: var(--color-base-white); }
.site-footer .inner { max-width: 1240px; margin: 0 auto; padding: calc(var(--space-unit-px) * 5); display: flex; justify-content: space-between; align-items: center; gap: calc(var(--space-unit-px) * 4); flex-wrap: wrap; font-size: var(--text-caption-size); color: var(--color-text-secondary); }
.site-footer img { height: var(--logo-footer-height); width: auto; display: block; }

@media (max-width: 720px) {
  main { padding: calc(var(--space-unit-px) * 5) calc(var(--space-unit-px) * 3) calc(var(--space-unit-px) * 10); }
  .cover { padding: calc(var(--space-unit-px) * 6) calc(var(--space-unit-px) * 4); }
  .cover h1 { font-size: var(--text-h1-size); }
  .page-title { font-size: var(--text-h2-size); }
  .card { padding: calc(var(--space-unit-px) * 4); }
  .card .meta { grid-template-columns: 1fr; }
  .toc ol { columns: 1; }
  .findings { grid-template-columns: 1fr; }
  .tile .v { font-size: var(--text-h2-size); }
}
@media print {
  .nav, .btn, .watermark { display: none; }
  .card { break-inside: avoid; box-shadow: none; }
  body { background: var(--color-base-white); }
}

/* ---------- v0.2: 設問1つ＝1カード ---------- */
.card.v2 .qhead { display: flex; align-items: baseline; gap: calc(var(--space-unit-px) * 3); margin-bottom: calc(var(--space-unit-px) * 1); }
.card.v2 .qhead .qid { font-size: var(--text-caption-size); color: var(--color-text-tertiary); font-family: var(--font-latin); }
.card.v2 .qhead h4 { font-size: var(--text-h2-size); font-weight: var(--text-h2-weight); line-height: var(--text-h2-lh); }
.card.v2 .qtext { font-size: var(--text-small-size); color: var(--color-text-secondary); margin-bottom: calc(var(--space-unit-px) * 3); }
.card.v2 .lead { font-size: var(--text-h3-size); line-height: 1.7; margin: 0 0 calc(var(--space-unit-px) * 4); }
.card.v2 .lead .big { font-size: 1.45em; font-weight: 700; font-family: var(--font-latin); font-variant-numeric: tabular-nums; color: var(--color-text-primary); }
.card.v2 .lead .num { background: var(--color-functional-highlight-bg); padding: 0 0.25em; border-radius: var(--radius-sm); }
.card.v2 .lead .auto { font-size: var(--text-caption-size); color: var(--color-text-tertiary); margin-left: 0.5em; }
.card.v2 .fig.small { width: 100%; max-width: none; margin: 0 0 calc(var(--space-unit-px) * 4); }
.card.v2 .fig svg { width: 100%; height: auto; }
.card.v2 .foot { font-size: var(--text-caption-size); color: var(--color-text-secondary); margin-top: calc(var(--space-unit-px) * 2); }
.card.v2 details { margin-top: calc(var(--space-unit-px) * 2); }

/* GAP 方式クロス表 */
.gap { margin: 0 0 calc(var(--space-unit-px) * 2); }
.gap .legend { display: flex; flex-wrap: wrap; gap: calc(var(--space-unit-px) * 3); align-items: center; font-size: var(--text-caption-size); color: var(--color-text-secondary); margin-bottom: calc(var(--space-unit-px) * 2); }
.gap .legend .sw { display: inline-block; width: 14px; height: 14px; border: 1px solid var(--color-functional-border); vertical-align: -2px; margin-right: 4px; }
.gap table { width: auto; min-width: 100%; border: 1px solid var(--color-functional-border); font-size: var(--text-small-size); }
.gap th, .gap td { border: 1px solid var(--color-functional-border); padding: calc(var(--space-unit-px) * 1.25) calc(var(--space-unit-px) * 2); white-space: normal; vertical-align: middle; }
.gap thead th { background: var(--color-base-warm-gray); font-weight: 600; text-align: center; line-height: 1.3; }
.gap thead th.opt { min-width: 5.5em; max-width: 9em; }
.gap th.grp { background: var(--color-base-warm-gray); font-weight: 600; text-align: left; writing-mode: horizontal-tb; width: 6em; }
.gap th.cat { text-align: left; font-weight: 400; background: var(--color-base-white); min-width: 9em; }
.gap td { text-align: right; font-family: var(--font-latin); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gap td.n, .gap th.grp, .gap th.cat, .gap thead th:nth-child(3) { white-space: nowrap; }
.gap td.n { color: var(--color-text-secondary); }
.gap tr.total th, .gap tr.total td { font-weight: 700; background: var(--color-base-cream); }
.gap td.hi1 { background: var(--color-chart-heat-diff-hi1); }
.gap td.hi2 { background: var(--color-chart-heat-diff-hi2); }
.gap td.lo1 { background: var(--color-chart-heat-diff-lo1); }
.gap td.lo2 { background: var(--color-chart-heat-diff-lo2); }
.gap td.ref { color: var(--color-text-secondary); font-style: italic; }
.gap td.sup { color: var(--color-text-tertiary); text-align: center; }
.gap tr.axis-first th, .gap tr.axis-first td { border-top: 2px solid var(--color-base-stone); }
.gap .note { font-size: var(--text-caption-size); color: var(--color-text-secondary); margin-top: calc(var(--space-unit-px) * 1.5); }

/* 四象限の意味パネル・2列 */
.quad-legend { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: calc(var(--space-unit-px) * 2); margin: 0 0 calc(var(--space-unit-px) * 4); }
.quad-legend .box { padding: calc(var(--space-unit-px) * 2) calc(var(--space-unit-px) * 3); border: 1px solid var(--color-functional-border); font-size: var(--text-small-size); line-height: 1.5; }
.card.v2 .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--space-unit-px) * 4); }
@media (max-width: 900px) { .quad-legend { grid-template-columns: 1fr 1fr; } .card.v2 .two-col { grid-template-columns: 1fr; } }
.gap td.b { font-weight: 700; }
.card.v2 .two-col .fig svg { min-width: 0; }
.card.v2 .two-col figcaption { font-size: var(--text-small-size); font-weight: 600; margin-bottom: 4px; }

.pt .val, .numbers .total .t-v, .numbers .fval, .axis-bar .lg-p, .pt .delta .dv, .tile .v { letter-spacing: 0; }
p, .sent, .intro, .page-lead, .qtext, .note, li { line-height: 1.95; }

/* 回答者の内訳（ファネル＋100%積み上げバー。枠で囲まず罫線と余白で区切る） */
.ico { width: 1.1em; height: 1.1em; vertical-align: -0.2em; margin-right: 0.4em; color: var(--color-text-secondary); flex: 0 0 auto; }
.numbers .sub-h { display: flex; align-items: center; font-size: var(--text-small-size); font-weight: 600; color: var(--color-text-primary); margin-bottom: calc(var(--space-unit-px) * 3); }
.numbers-top { display: grid; grid-template-columns: 240px 1fr; gap: calc(var(--space-unit-px) * 10); padding-bottom: calc(var(--space-unit-px) * 6); margin-bottom: calc(var(--space-unit-px) * 6); border-bottom: var(--border-width) solid var(--border-color); }
.numbers .total .t-l { display: flex; align-items: center; font-size: var(--text-small-size); font-weight: 600; color: var(--color-text-primary); }
.numbers .total .t-v { font-family: var(--font-latin); font-variant-numeric: tabular-nums; font-size: 56px; font-weight: 700; line-height: 1.1; margin: 10px 0 6px; letter-spacing: -0.02em; }
.numbers .total .t-v small { font-family: var(--font-ja); font-size: 15px; font-weight: 500; margin-left: 6px; color: var(--color-text-secondary); }
.numbers .total .t-s { font-size: var(--text-caption-size); color: var(--color-text-secondary); line-height: 1.5; }
.numbers .frow { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: calc(var(--space-unit-px) * 3); padding: 9px 0; border-top: var(--border-width) solid var(--border-color); }
.numbers .frow:last-child { border-bottom: var(--border-width) solid var(--border-color); }
.numbers .flabel { display: flex; align-items: center; font-size: var(--text-small-size); color: var(--color-text-primary); }
.numbers .fbar-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 14em; align-items: center; gap: 12px; min-width: 0; }
.numbers .ftrack { min-width: 0; }
.numbers .fbar { height: 10px; border-radius: 2px; background: var(--color-functional-mask); }
.numbers .fbar.last { background: var(--color-brand-transform-orange); }
.numbers .frow:last-child .fval { background: var(--color-functional-highlight-bg); padding: 2px 8px; border-radius: var(--radius-sm); display: inline-block; }
.numbers .fval { font-family: var(--font-latin); font-variant-numeric: tabular-nums; font-weight: 600; font-size: 15px; white-space: nowrap; }
.numbers .fval small { font-family: var(--font-ja); font-size: 12px; font-weight: 400; color: var(--color-text-secondary); margin-left: 2px; }
.numbers .fval .step { font-family: var(--font-ja); font-size: var(--text-caption-size); font-weight: 400; color: var(--color-text-tertiary); margin-left: 10px; }
.axis-bars { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: calc(var(--space-unit-px) * 8) calc(var(--space-unit-px) * 10); }
.axis-bar { min-width: 0; }
.axis-bar .stack { display: flex; height: 10px; border-radius: 2px; overflow: hidden; margin-bottom: calc(var(--space-unit-px) * 3); }
.axis-bar .seg { flex: 0 0 auto; min-width: 0; }
.axis-bar .seg + .seg { border-left: 2px solid var(--color-base-cream); }
.axis-bar .legend { display: grid; }
.axis-bar .lg { display: grid; grid-template-columns: 8px 1.3em 1fr auto auto; gap: 8px; align-items: center; font-size: var(--text-small-size); padding: 6px 0; border-top: var(--border-width) solid var(--border-color); }
.axis-bar .lg:last-child { border-bottom: var(--border-width) solid var(--border-color); }
.axis-bar .lg i { width: 8px; height: 8px; border-radius: 2px; display: block; }
.axis-bar .lg-ico { display: flex; align-items: center; }
.axis-bar .lg-ico .ico { margin-right: 0; }
.axis-bar .lg-n { color: var(--color-text-secondary); font-variant-numeric: tabular-nums; }
.axis-bar .lg-n small { font-size: 11px; margin-left: 1px; }
.axis-bar .lg-p { font-family: var(--font-latin); font-variant-numeric: tabular-nums; font-weight: 600; min-width: 3.5em; text-align: right; background: var(--color-functional-highlight-bg); padding: 0 6px; border-radius: var(--radius-sm); }
.numbers .note { margin-top: calc(var(--space-unit-px) * 4); }
.numbers-table { margin-top: calc(var(--space-unit-px) * 2); }
.numbers-table summary { cursor: pointer; font-size: var(--text-small-size); font-weight: 600; color: var(--color-text-secondary); margin-bottom: calc(var(--space-unit-px) * 2); }
@media (max-width: 1100px) { .axis-bars { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) { .numbers-top { grid-template-columns: 1fr; gap: calc(var(--space-unit-px) * 5); } .numbers .frow { grid-template-columns: 1fr; gap: 4px; } .numbers .fbar-wrap { grid-template-columns: minmax(0, 1fr) auto; } }
@media (max-width: 720px) { .axis-bars { grid-template-columns: 1fr; } }

/* 調査結果のポイント（京都市観光協会データ月報の型。罫線区切り・枠なし） */
.points { display: block; }
.pt { display: grid; grid-template-columns: 260px 1fr; gap: calc(var(--space-unit-px) * 10); padding: calc(var(--space-unit-px) * 6) 0; align-items: start; border-top: var(--border-width) solid var(--border-color); }
.points > .pt:last-of-type { border-bottom: var(--border-width) solid var(--border-color); }
.pt .pt-l { display: flex; flex-direction: column; gap: 6px; }
.pt .lbl { font-size: var(--text-small-size); font-weight: 600; color: var(--color-text-primary); margin-bottom: 2px; }
.pt .val { font-family: var(--font-latin); font-variant-numeric: tabular-nums; font-size: 44px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; color: var(--color-text-primary); }
.pt .val .num { background: none; padding: 0; }
.pt .val .unit { font-family: var(--font-ja); font-size: 15px; font-weight: 500; margin-left: 4px; color: var(--color-text-secondary); }
.pt .sub { font-size: var(--text-small-size); color: var(--color-text-secondary); line-height: 1.6; }
.pt .delta { margin-top: 6px; display: flex; flex-direction: column; gap: 2px; }
.pt .delta .dv { font-family: var(--font-latin); font-variant-numeric: tabular-nums; font-weight: 700; font-size: 16px; }
.pt .delta.up .dv { color: var(--color-brand-pipeline-green); }
.pt .delta.down .dv { color: var(--color-functional-error); }
.pt .delta .basis { font-size: var(--text-caption-size); color: var(--color-text-tertiary); line-height: 1.5; }
.pt .pt-r { display: flex; flex-direction: column; gap: calc(var(--space-unit-px) * 2); }
.pt .sent { font-size: 17px; font-weight: 600; line-height: 1.8; margin: 0; color: var(--color-text-primary); }
.pt .sent .sent-sub { display: block; margin-top: 4px; font-size: 15px; font-weight: 400; color: var(--color-text-secondary); }
.pt .sent .sent-sub .num { background: none; padding: 0; font-weight: 600; }
.pt .sent .big { font-size: 1em; font-weight: 700; }
.pt .sent .num { background: var(--color-functional-highlight-bg); padding: 0 0.25em; border-radius: var(--radius-sm); }
.pt .sent .auto { font-size: var(--text-caption-size); color: var(--color-text-tertiary); font-weight: 400; margin-left: 0.5em; }
.pt .more { margin: 0; font-size: var(--text-small-size); }
.pt .more a { color: var(--color-text-secondary); text-decoration: none; border-bottom: 1px solid var(--border-color); }
.pt .more a:hover { color: var(--color-brand-transform-orange); border-color: var(--color-brand-transform-orange); }
.card.v2 .pt { border: none; padding: 0; }
@media (max-width: 900px) { .pt { grid-template-columns: 1fr; gap: calc(var(--space-unit-px) * 3); padding: calc(var(--space-unit-px) * 5) 0; } }
.more-points { margin-top: calc(var(--space-unit-px) * 4); }
.more-points summary { cursor: pointer; font-weight: 600; margin-bottom: calc(var(--space-unit-px) * 3); }
.gap td .cell-n { font-size: 11px; color: var(--color-text-secondary); margin-left: 2px; font-weight: 400; }