/* ================================================================
   指標（Shihyō）デザイントークン v2 — プロトタイプ準拠
   方針: 紙の質感 × 朱 × 深緑。新聞のような落ち着いた可読性。
   ================================================================ */

@import url("https://fonts.googleapis.com/css2?family=Shippori+Mincho+B1:wght@500;700;800&family=Zen+Kaku+Gothic+New:wght@400;500;700;900&display=swap");

:root {
  /* ---- 紙の色（基調） ---- */
  --c-paper:    #f3ede1;
  --c-paper-2:  #eae1cf;
  --c-surface:  #fffdf8;   /* カード地 */
  --c-line:     #d8cdb6;   /* 罫線 */

  /* ---- 墨 ---- */
  --c-ink:      #211c16;
  --c-ink-soft: #5c5346;
  --c-ink-mute: #8a8580;

  /* ---- アクセント ---- */
  --c-vermilion:   #c8482e;   /* 朱（負担・主アクセント） */
  --c-vermilion-d: #a3371f;
  --c-teal:        #2f6b62;   /* 深緑（受益・対比） */
  --c-teal-l:      #3f857a;
  --c-gold:        #b88a2c;

  /* セマンティック */
  --c-plus:   var(--c-teal);
  --c-minus:  var(--c-vermilion);
  --c-up:     var(--c-teal);
  --c-down:   var(--c-vermilion);
  --c-accent: var(--c-vermilion);

  --shadow:   rgba(33,28,22,.16);
  --shadow-md: 0 18px 40px -28px var(--shadow);

  /* ---- タイポ ---- */
  --f-serif: "Shippori Mincho B1", "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", serif;
  --f-sans:  "Zen Kaku Gothic New", "Hiragino Sans", "Yu Gothic", "Noto Sans JP", system-ui, sans-serif;
  --f-num:   "Zen Kaku Gothic New", "Inter", "Helvetica Neue", Arial, sans-serif;

  --t-xs:  clamp(.72rem, .70rem + .1vw, .78rem);
  --t-sm:  clamp(.82rem, .80rem + .15vw, .9rem);
  --t-md:  clamp(.96rem, .92rem + .25vw, 1.05rem);
  --t-lg:  clamp(1.18rem, 1.05rem + .55vw, 1.4rem);
  --t-xl:  clamp(1.6rem, 1.3rem + 1.2vw, 2.2rem);
  --t-2xl: clamp(2.2rem, 1.6rem + 2.4vw, 3.4rem);

  /* スペース・角・幅 */
  --s-1: 4px;  --s-2: 8px;  --s-3: 12px;  --s-4: 16px;
  --s-5: 22px; --s-6: 30px; --s-7: 44px;  --s-8: 64px;
  --r-sm: 6px; --r-md: 12px; --r-lg: 16px;

  --content-w: 880px;
}

/* ---- リセット ---- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--f-sans);
  font-size: var(--t-md);
  line-height: 1.75;
  font-feature-settings: "palt";
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle at 12% -5%, rgba(200,72,46,.06), transparent 40%),
    radial-gradient(circle at 95% 8%, rgba(47,107,98,.06), transparent 38%);
  background-attachment: fixed;
}

/* 紙の繊維テクスチャ（全ページ） */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}

main, header, footer, section { position: relative; z-index: 1; }

h1, h2, h3, h4 {
  font-family: var(--f-serif);
  font-weight: 700;
  letter-spacing: .04em;
}
h1 { font-size: var(--t-2xl); line-height: 1.15; margin: 0 0 var(--s-4); }
h2 { font-size: var(--t-xl);  line-height: 1.35; margin: var(--s-7) 0 var(--s-3); }
h3 { font-size: var(--t-lg);  line-height: 1.4;  margin: var(--s-5) 0 var(--s-2); }
p  { margin: 0 0 var(--s-4); }
a  { color: var(--c-vermilion-d); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--c-vermilion); }

/* ---- レイアウト ---- */
.shell-container {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--s-5);
}

/* ================================================================
   共通シェル（shell.js が注入）
   ================================================================ */
.shell-header {
  background: transparent;
  border-bottom: 1px solid var(--c-line);
}
.shell-header__inner {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: var(--s-5) var(--s-5);
  max-width: var(--content-w);
  margin: 0 auto;
  flex-wrap: wrap;
  gap: var(--s-4);
}
.shell-brand {
  display: flex;
  align-items: baseline;
  gap: var(--s-3);
  text-decoration: none;
  color: var(--c-ink);
}
.shell-brand__name {
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  font-weight: 800;
  letter-spacing: .18em;
}
.shell-brand__tagline {
  font-size: var(--t-xs);
  color: var(--c-ink-soft);
  letter-spacing: .15em;
}
.shell-nav {
  display: flex;
  gap: var(--s-5);
  font-size: var(--t-sm);
}
.shell-nav a {
  text-decoration: none;
  color: var(--c-ink-soft);
}
.shell-nav a:hover,
.shell-nav a[aria-current="page"] { color: var(--c-vermilion-d); }

.shell-footer {
  border-top: 3px double var(--c-ink);
  background: transparent;
  margin-top: var(--s-8);
  padding: var(--s-5) 0;
  font-size: var(--t-xs);
  color: var(--c-ink-soft);
  letter-spacing: .04em;
}
.shell-footer__inner {
  max-width: var(--content-w);
  margin: 0 auto;
  padding: 0 var(--s-5);
  display: grid;
  gap: var(--s-3);
}

/* ================================================================
   コーナーページ専用「新聞風マストヘッド」
   ================================================================ */
.masthead {
  border-bottom: 3px double var(--c-ink);
  padding: var(--s-6) 0 var(--s-3);
  margin-bottom: var(--s-6);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4);
  flex-wrap: wrap;
}
.masthead .brand {
  font-family: var(--f-serif);
}
.masthead .brand .kicker {
  font-size: .72rem;
  letter-spacing: .42em;
  color: var(--c-vermilion-d);
  font-weight: 700;
  margin-bottom: 4px;
  font-family: var(--f-sans);
}
.masthead .brand h1 {
  font-size: var(--t-2xl);
  font-weight: 800;
  letter-spacing: .04em;
  line-height: 1.05;
  margin: 0;
}
.masthead .brand h1 .sub {
  display: block;
  font-size: .92rem;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--c-ink-soft);
  margin-top: 6px;
}
.masthead .meta {
  font-size: .7rem;
  text-align: right;
  color: var(--c-ink-soft);
  letter-spacing: .08em;
  line-height: 1.9;
}
.masthead .meta b { color: var(--c-ink); }

/* ---- リード文 ---- */
.lede {
  font-family: var(--f-serif);
  font-size: 1.18rem;
  line-height: 1.95;
  margin-bottom: var(--s-2);
  font-weight: 500;
}
.lede em {
  font-style: normal;
  background: linear-gradient(transparent 62%, rgba(200,72,46,.28) 62%);
  font-weight: 700;
}
.stance {
  font-size: .82rem;
  color: var(--c-ink-soft);
  border-left: 3px solid var(--c-vermilion);
  padding-left: var(--s-3);
  margin: var(--s-4) 0 var(--s-7);
}

/* ================================================================
   操作パネル（スライダー・セグメント）
   ================================================================ */
.panel {
  background: linear-gradient(180deg, #fffdf8, #f6f0e3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-md);
  padding: var(--s-6) var(--s-6) var(--s-6);
  margin-bottom: var(--s-3);
}
.panel h2 {
  font-family: var(--f-serif);
  font-size: 1.15rem;
  letter-spacing: .06em;
  margin: 0 0 4px;
}
.panel .hint {
  font-size: .78rem;
  color: var(--c-ink-soft);
  margin-bottom: var(--s-5);
}

.field { margin-bottom: var(--s-5); }
.field-label {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .05em;
  margin-bottom: 10px;
}
.yearout {
  font-family: var(--f-serif);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--c-vermilion-d);
  font-feature-settings: "tnum";
}
.yearout small {
  font-size: .78rem;
  color: var(--c-ink-soft);
  font-family: var(--f-sans);
  font-weight: 500;
  margin-left: 4px;
}

input[type=range] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 6px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--c-teal), #cdbfa3 50%, var(--c-vermilion));
  outline: none;
  cursor: pointer;
}
input[type=range]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 3px solid var(--c-ink);
  box-shadow: 0 3px 8px var(--shadow);
  cursor: grab;
}
input[type=range]::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--c-surface);
  border: 3px solid var(--c-ink);
  cursor: grab;
}
.scale {
  display: flex;
  justify-content: space-between;
  font-size: .66rem;
  color: var(--c-ink-soft);
  margin-top: 6px;
  letter-spacing: .04em;
  font-feature-settings: "tnum";
}

input[type="number"], select {
  font-family: var(--f-sans);
  font-size: var(--t-md);
  padding: 10px var(--s-3);
  border: 1px solid var(--c-line);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-ink);
}

/* ---- セグメント ---- */
.segs {
  display: flex;
  gap: var(--s-2);
  flex-wrap: wrap;
}
.seg {
  flex: 1;
  min-width: 110px;
  border: 1px solid var(--c-line);
  background: var(--c-surface);
  border-radius: 10px;
  padding: 12px 10px;
  text-align: center;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  font-size: .85rem;
  font-weight: 500;
  color: var(--c-ink);
}
.seg small {
  display: block;
  font-size: .66rem;
  color: var(--c-ink-soft);
  margin-top: 2px;
}
.seg.on {
  background: var(--c-ink);
  color: var(--c-paper);
  border-color: var(--c-ink);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px -10px var(--shadow);
}
.seg.on small { color: #d8cdb6; }

/* ================================================================
   結果ブロック（主役の数字）
   ================================================================ */
.result {
  margin: var(--s-6) 0 var(--s-3);
  text-align: center;
  padding: var(--s-6) var(--s-5) var(--s-6);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  background: radial-gradient(circle at 50% 0%, #fffdf8, #f1e9d8);
  box-shadow: var(--shadow-md);
  position: relative;
  overflow: hidden;
}
.result .tag {
  font-size: .74rem;
  letter-spacing: .28em;
  color: var(--c-ink-soft);
  font-weight: 700;
}
.verdict {
  font-family: var(--f-serif);
  font-size: 1.4rem;
  font-weight: 700;
  margin: 8px 0 4px;
}
.bignum {
  font-family: var(--f-serif);
  font-weight: 800;
  line-height: 1;
  font-size: clamp(3rem, 13vw, 5.2rem);
  letter-spacing: -.01em;
  font-feature-settings: "tnum";
}
.bignum .unit {
  font-size: .34em;
  font-weight: 700;
  margin-left: 6px;
  letter-spacing: .04em;
}
.bignum.plus  { color: var(--c-plus); }
.bignum.minus { color: var(--c-minus); }

/* ％と金額を同サイズで横並びにするペア（実質賃金メーター用） */
.bignum-pair {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}
.bignum-pair .bignum {
  /* .bignum 既定のフォントサイズより1段控えめ（横並びで2つ載るため） */
  font-size: clamp(2.4rem, 9vw, 4.2rem);
}
.bignum-eq {
  font-family: var(--f-serif);
  font-weight: 800;
  color: var(--c-ink-soft);
  font-size: clamp(1.4rem, 4vw, 2.4rem);
  line-height: 1;
}
@media (max-width: 520px) {
  .bignum-pair { gap: 6px; }
  .bignum-eq { font-size: 1.4rem; }
}
.result .cap {
  font-size: .82rem;
  color: var(--c-ink-soft);
  margin-top: var(--s-3);
  max-width: 460px;
  margin-inline: auto;
}

/* ================================================================
   棒グラフ（世代別・年代別）
   ================================================================ */
.chart-sec { margin: var(--s-7) 0 var(--s-3); }
.sec-head {
  font-family: var(--f-serif);
  font-size: 1.2rem;
  letter-spacing: .05em;
  border-bottom: 1px solid var(--c-line);
  padding-bottom: 8px;
  margin-bottom: 6px;
}
.sec-sub {
  font-size: .82rem;
  color: var(--c-ink-soft);
  margin-bottom: var(--s-5);
}
.bars {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 230px;
  padding: 0 2px;
}
.barcol {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  position: relative;
  height: 100%;
}
.barwrap {
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: visible;
}
.zero-line {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  border-top: 1.5px dashed var(--c-ink-soft);
  opacity: .5;
}
.bar {
  width: 74%;
  border-radius: 5px 5px 0 0;
  transition: height .9s cubic-bezier(.2,.8,.2,1);
  position: relative;
}
.bar.pos {
  background: linear-gradient(180deg, var(--c-teal-l), var(--c-teal));
  align-self: flex-end;
  border-radius: 5px 5px 0 0;
}
.bar.neg {
  background: linear-gradient(180deg, #d8624a, var(--c-vermilion));
  align-self: flex-start;
  border-radius: 0 0 5px 5px;
}
.barcol .lab {
  font-size: .62rem;
  color: var(--c-ink-soft);
  margin-top: 8px;
  letter-spacing: .02em;
  white-space: nowrap;
}
.barcol .val {
  position: absolute;
  font-size: .62rem;
  font-weight: 700;
  font-feature-settings: "tnum";
}
.barcol.me .bar {
  outline: 3px solid var(--c-ink);
  outline-offset: 1px;
  box-shadow: 0 0 0 6px rgba(33,28,22,.06);
}
.barcol.me .lab {
  color: var(--c-ink);
  font-weight: 900;
}
.barcol.me::after {
  content: "あなた";
  position: absolute;
  top: -6px;
  font-size: .6rem;
  font-weight: 900;
  color: #fff;
  background: var(--c-ink);
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: .05em;
}

/* ================================================================
   事実カード
   ================================================================ */
.facts { margin: var(--s-7) 0 var(--s-3); }
.fact-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 8px;
}
.fact {
  border: 1px solid var(--c-line);
  border-radius: 12px;
  background: var(--c-surface);
  padding: 20px 22px;
}
.fact h4 {
  font-family: var(--f-serif);
  font-size: 1.05rem;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 12px;
}
.fact h4 .pin {
  font-size: .62rem;
  background: var(--c-vermilion);
  color: #fff;
  padding: 3px 9px;
  border-radius: 20px;
  letter-spacing: .08em;
  font-family: var(--f-sans);
  font-weight: 700;
}
.ftable {
  width: 100%;
  border-collapse: collapse;
  font-size: .84rem;
  font-feature-settings: "tnum";
}
.ftable td {
  padding: 7px 4px;
  border-bottom: 1px dashed var(--c-line);
}
.ftable td:last-child {
  text-align: right;
  font-weight: 700;
  white-space: nowrap;
}
.ftable tr:last-child td { border-bottom: none; }
.fact .note {
  font-size: .76rem;
  color: var(--c-ink-soft);
  margin-top: 12px;
}
.fact .myth {
  font-size: .78rem;
  background: var(--c-paper-2);
  border-radius: 8px;
  padding: 10px 12px;
  margin-top: 12px;
}
.fact .myth b { color: var(--c-vermilion-d); }
.fact .src {
  font-size: .72rem;
  color: var(--c-ink-soft);
  margin-top: 10px;
}
.fact .src a { color: var(--c-ink-soft); }

@media (min-width: 620px) {
  .fact-grid { grid-template-columns: 1fr 1fr; }
  .fact.wide { grid-column: 1 / -1; }
}

/* ================================================================
   シェアカード（canvas + ボタン）
   ================================================================ */
.share-sec {
  margin: var(--s-7) 0 var(--s-3);
  text-align: center;
}
.share-sec .sec-head { text-align: left; }
.share-sec .sec-sub  { text-align: left; }
.share-canvas {
  width: 100%;
  max-width: 560px;
  height: auto;
  border-radius: 12px;
  border: 1px solid var(--c-line);
  box-shadow: 0 22px 50px -28px var(--shadow);
  display: block;
  margin: 14px auto 22px;
  background: var(--c-paper);
}
.btns {
  display: flex;
  gap: 12px;
  justify-content: center;
  flex-wrap: wrap;
}
.btn {
  border: none;
  cursor: pointer;
  font-family: var(--f-sans);
  font-weight: 700;
  font-size: .9rem;
  padding: 13px 26px;
  border-radius: 30px;
  letter-spacing: .04em;
  transition: transform .15s ease, box-shadow .15s ease;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--c-surface);
  color: var(--c-ink);
}
.btn.x  { background: var(--c-ink); color: var(--c-paper); }
.btn.dl { background: var(--c-vermilion); color: #fff; }
.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 22px -10px var(--shadow);
}
.build-note {
  font-size: .72rem;
  color: var(--c-ink-soft);
  margin-top: 18px;
  max-width: 520px;
  margin-inline: auto;
}
.build-note code {
  background: var(--c-paper-2);
  padding: 1px 6px;
  border-radius: 5px;
  font-size: .92em;
}

/* ================================================================
   免責・出典フッタ
   ================================================================ */
.disclaim {
  margin: var(--s-7) 0 0;
  border: 1px dashed var(--c-vermilion);
  background: rgba(200,72,46,.05);
  border-radius: 12px;
  padding: 18px 20px;
  font-size: .82rem;
  color: var(--c-ink-soft);
  line-height: 1.85;
}
.disclaim b { color: var(--c-ink); }

.sources {
  margin-top: var(--s-6);
  padding-top: var(--s-4);
  border-top: 3px double var(--c-ink);
  font-size: .76rem;
  color: var(--c-ink-soft);
  line-height: 2;
}
.sources h5 {
  font-family: var(--f-serif);
  font-size: .92rem;
  color: var(--c-ink);
  letter-spacing: .1em;
  margin: 0 0 8px;
}
.sources .updated {
  margin-top: 14px;
  font-size: .7rem;
  letter-spacing: .1em;
  display: block;
}

/* ================================================================
   トップページ用カードグリッド（コーナー一覧）
   - PC/モバイル問わず 1 カラム
   - 上下余白は通常 section の半分
   ================================================================ */
.corner-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-4);
  margin: var(--s-3) 0;
}
.corner-card {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "title   example"
    "tagline example"
    "sources example";
  align-items: center;
  gap: var(--s-2) var(--s-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--r-md);
  padding: var(--s-5) var(--s-6);
  text-decoration: none;
  color: var(--c-ink);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.corner-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  border-color: var(--c-ink-soft);
}
.corner-card__title {
  grid-area: title;
  font-family: var(--f-serif);
  font-size: var(--t-lg);
  margin: 0;
  font-weight: 800;
  letter-spacing: .04em;
}
.corner-card__tagline {
  grid-area: tagline;
  color: var(--c-ink-soft);
  margin: 0;
}
.corner-card__sources {
  grid-area: sources;
  font-size: var(--t-xs);
  color: var(--c-ink-mute);
  margin: 0;
}
.corner-card__example {
  grid-area: example;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  border-left: 1px solid var(--c-line);
  padding-left: var(--s-5);
  min-width: 220px;
}
.corner-card__example-label {
  font-size: var(--t-xs);
  color: var(--c-ink-soft);
  letter-spacing: .06em;
  margin-bottom: 4px;
  line-height: 1.4;
}
.corner-card__example-value {
  font-family: var(--f-serif);
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--c-ink);
  font-feature-settings: "tnum";
  line-height: 1.1;
}
.corner-card__example[data-trend="minus"] .corner-card__example-value { color: var(--c-vermilion-d); }
.corner-card__example[data-trend="plus"]  .corner-card__example-value { color: var(--c-teal); }

@media (max-width: 560px) {
  .corner-card {
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "tagline"
      "example"
      "sources";
  }
  .corner-card__example {
    align-items: flex-start;
    text-align: left;
    border-left: none;
    border-top: 1px solid var(--c-line);
    padding-left: 0;
    padding-top: var(--s-3);
    min-width: 0;
  }
}

/* ---- ユーティリティ ---- */
.num    { font-family: var(--f-num); font-variant-numeric: tabular-nums; }
.muted  { color: var(--c-ink-mute); }
.section { padding: var(--s-7) 0; }
.lead    { font-size: var(--t-md); color: var(--c-ink-soft); max-width: 56ch; }
.up      { color: var(--c-plus); }
.down    { color: var(--c-minus); }

@media (max-width: 480px) {
  .masthead .brand h1 { font-size: 1.9rem; }
  .barcol .lab { font-size: .54rem; }
  .barcol .val { font-size: .52rem; }
}