/* ========================================
   場面7 ひとり社長は、いくら払うのか（48.6秒・12の字幕）
   ----------------------------------------
   この動画でいちばん重いところ。「負担が大きい」と言葉で言わず、金額で見せる。
   🚨 数字はすべて一次情報（script.json の sourceNote に出どころ）。勝手に丸めない。
   ----------------------------------------
     cue-1   厚生年金と健康保険を合わせて       → 料率を3つ並べる
     cue-2   報酬の、およそ30パーセント         → 合計を大きく
     cue-3   会社と本人で、半分ずつです         → ½ ＋ ½
     cue-4   でも、ひとり社長はどちらも自分     → 赤い札
     cue-5   役員報酬が月50万円なら             → 法人の行
     cue-6   社会保険料は年におよそ180万円      → 法人の棒が伸びる
     cue-7   個人事業主なら、国民年金が年21万円 → 個人の行と棒
     cue-8   これに国民健康保険が乗りますが     → ＋の注
     cue-10  税金が減っても、ここで戻ってきます → 戻る
     cue-11  ただし、厚生年金は将来の年金が増える → 公平に添える
   ======================================== */

.scene-hokenryo {
  padding: 18px 56px var(--caption-space);
  display: grid;
  align-content: center;
  gap: 12px;
}

.scene-hokenryo .head {
  display: grid;
  grid-auto-flow: column;
  justify-content: start;
  align-items: center;
  gap: 16px;
}
.scene-hokenryo .kicker { animation: rise 0.5s var(--ease-out) var(--cue-0) both; }
.scene-hokenryo .title {
  font-size: 34px;
  animation: slide-right 0.6s var(--ease-out) var(--cue-0) both;
}

/* ── 料率 3つ ＝ 約30% ───────────────────── */
.scene-hokenryo .rates {
  justify-self: center;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 14px;
}
.scene-hokenryo .rate-list {
  display: grid;
  grid-auto-flow: column;
  gap: 10px;
}
.scene-hokenryo .rt {
  display: grid;
  justify-items: center;
  gap: 1px;
  padding: 6px 14px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 10px;
}
.scene-hokenryo .rt-n { color: var(--ink-soft); font-size: 14px; font-weight: 700; }
.scene-hokenryo .rt-v {
  font-family: var(--font-en);
  font-size: 23px;
  font-weight: 900;
}
.scene-hokenryo .rt-v i { font-size: 15px; font-style: normal; }
.scene-hokenryo .rt1 { animation: rise 0.45s var(--ease-out) var(--cue-1) both; }
.scene-hokenryo .rt2 { animation: rise 0.45s var(--ease-out) calc(var(--cue-1) + 0.25s) both; }
.scene-hokenryo .rt3 { animation: rise 0.45s var(--ease-out) calc(var(--cue-1) + 0.5s) both; }

.scene-hokenryo .rate-eq {
  color: var(--ink-soft);
  font-size: 26px;
  font-weight: 900;
  animation: fade 0.4s ease var(--cue-2) both;
}
.scene-hokenryo .rate-sum {
  display: grid;
  justify-items: center;
  gap: 0;
  padding: 6px 22px;
  background: var(--warn);
  color: #fff;
  border-radius: 10px;
  animation: pop 0.55s var(--ease-pop) var(--cue-2) both;
}
.scene-hokenryo .sum-v { font-family: var(--font-en); font-size: 32px; font-weight: 900; line-height: 1.1em; }
.scene-hokenryo .sum-v i { font-size: 20px; font-style: normal; }
.scene-hokenryo .sum-n { font-size: 13px; font-weight: 700; opacity: 0.9; }

/* ── 会社 ½ ＋ 本人 ½ → どちらも自分 ───────── */
.scene-hokenryo .split {
  justify-self: center;
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  gap: 10px;
}
.scene-hokenryo .sp {
  padding: 4px 18px;
  font-size: 19px;
  font-weight: 800;
  border-radius: 999px;
}
.scene-hokenryo .sp-co {
  background: var(--hojin-soft);
  color: var(--hojin);
  animation: slide-left 0.5s var(--ease-out) var(--cue-3) both;
}
.scene-hokenryo .sp-me {
  background: var(--key-soft);
  color: var(--key);
  animation: slide-right 0.5s var(--ease-out) var(--cue-3) both;
}
.scene-hokenryo .sp-note {
  padding: 4px 18px;
  background: var(--warn);
  color: #fff;
  font-size: 19px;
  font-weight: 800;
  border-radius: 999px;
  animation: pop 0.5s var(--ease-pop) var(--cue-4) both;
}

/* ── 棒で比べる ─────────────────────────── */
.scene-hokenryo .bars {
  justify-self: center;
  width: min(100%, 880px);
  display: grid;
  gap: 8px;
}
.scene-hokenryo .bar-row {
  display: grid;
  grid-template-columns: 200px 1fr 168px;
  align-items: center;
  gap: 14px;
}
.scene-hokenryo .br-n { font-size: 19px; font-weight: 800; }
.scene-hokenryo .br-n em {
  display: block;
  color: var(--ink-soft);
  font-size: 14px;
  font-style: normal;
  font-weight: 700;
}
.scene-hokenryo .br-track {
  height: 26px;
  background: var(--paper-deep);
  border-radius: 13px;
  overflow: hidden;
}
.scene-hokenryo .br-fill {
  display: block;
  height: 100%;
  border-radius: 13px;
  transform-origin: left center;
  scale: 0 1;
}
.scene-hokenryo .br-v { font-size: 15px; font-weight: 700; text-align: right; }
.scene-hokenryo .br-v b { font-family: var(--font-en); font-size: 26px; font-weight: 900; }

/* 180万 : 21万 ＝ おおよそ 100% : 12%。棒の長さで差を見せる */
.scene-hokenryo .br-hojin .br-fill {
  width: 100%;
  background: var(--warn);
  animation: draw-x 1.1s var(--ease-out) var(--cue-6) both;
}
.scene-hokenryo .br-hojin .br-v b { color: var(--warn); }

.scene-hokenryo .br-kojin { animation: rise 0.5s var(--ease-out) var(--cue-7) both; }
.scene-hokenryo .br-kojin .br-fill {
  width: 12%;
  background: var(--kojin);
  animation: draw-x 0.6s var(--ease-out) calc(var(--cue-7) + 0.3s) both;
}
.scene-hokenryo .br-kojin .br-v b { color: var(--kojin); }

/* cue-9「それでも、差はかなり大きくなります」
   🚨 倍率は書かない。個人側には国民健康保険が乗るので「◯倍」は言い過ぎになる。
   長い棒を持ち上げて、差そのものを目で見せる */
.scene-hokenryo .br-hojin {
  animation: rise 0.5s var(--ease-out) var(--cue-5) both,
             lift 0.6s var(--ease-out) var(--cue-9) both;
}

.scene-hokenryo .br-plus {
  justify-self: center;
  color: var(--ink-soft);
  font-size: 15px;
  font-weight: 700;
  animation: fade 0.5s ease var(--cue-8) both;
}

/* ── 締め：戻る ／ ただし年金は増える ───────── */
.scene-hokenryo .tail {
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 4px;
}
.scene-hokenryo .modori {
  font-size: 23px;
  font-weight: 800;
  animation: rise 0.5s var(--ease-pop) var(--cue-10) both;
}
.scene-hokenryo .warnline {
  display: inline-block;
  padding: 1px 10px;
  background: var(--warn);
  color: #fff;
  font-style: normal;
  border-radius: 6px;
}
/* 🚨 片側だけ見せると不公平になる。掛け捨てではないことを必ず添える */
.scene-hokenryo .fair {
  color: var(--ink-soft);
  font-size: 18px;
  font-weight: 700;
  animation: fade 0.6s ease var(--cue-11) both;
}
.scene-hokenryo .fair em {
  margin-right: 6px;
  padding: 1px 10px;
  background: var(--key);
  color: #fff;
  font-style: normal;
  font-weight: 800;
  border-radius: 5px;
}