:root{--ua:#315f88;--ru:#9a4e4e;--ink:#172033;--muted:#64748b;--line:#d9e1ea;--bg:#f5f7fa}.ruua21{max-width:1180px;margin:auto;color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Noto Sans JP",sans-serif}.ruua21 *{box-sizing:border-box}.ruua21 .hero{padding:clamp(24px,5vw,50px);border:1px solid var(--line);border-radius:18px;background:linear-gradient(135deg,rgba(49,95,136,.1),transparent 42%),linear-gradient(315deg,rgba(154,78,78,.08),transparent 36%),#fff}.ruua21 .kicker{margin:0 0 8px;font-size:.74rem;font-weight:800;letter-spacing:.16em;color:var(--muted)}.ruua21 h1{margin:0 0 14px;font-size:clamp(1.8rem,4vw,2.8rem)}.ruua21 .hero>p:not(.kicker){max-width:860px;color:#475569;line-height:1.8}.ruua21 .meta{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}.ruua21 .meta span{padding:6px 10px;border-radius:999px;background:#eef2f6;font-size:.78rem;font-weight:700}.ruua21 .series{display:inline-block;margin-top:15px;font-weight:700}.ruua21 .jump{position:sticky;top:8px;z-index:5;display:flex;gap:8px;overflow:auto;margin:18px 0;padding:10px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.95)}.ruua21 .jump a{white-space:nowrap;padding:7px 10px;text-decoration:none;font-weight:700;color:#334155}.ruua21 section{margin:26px 0;padding:clamp(18px,4vw,32px);border:1px solid var(--line);border-radius:18px;background:var(--bg)}.ruua21 .heading{display:flex;gap:14px;margin-bottom:18px}.ruua21 .heading>span{font-size:.75rem;font-weight:900;color:var(--muted)}.ruua21 .heading h2{margin:0 0 4px}.ruua21 .heading p{margin:0;color:var(--muted)}.ruua21 .metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.ruua21 .metric{position:relative;overflow:hidden;padding:16px;border:1px solid var(--line);border-radius:13px;background:#fff}.ruua21 .metric:before{content:"";position:absolute;inset:0 auto 0 0;width:4px}.ruua21 .metric.ua:before{background:var(--ua)}.ruua21 .metric.ru:before{background:var(--ru)}.ruua21 .metric small{display:block;color:var(--muted);font-weight:700}.ruua21 .metric strong{display:block;margin-top:8px;font-size:clamp(1.2rem,2.5vw,1.8rem);overflow-wrap:anywhere}
/* V2.2: charts are deliberately single-column and wide. */
.ruua21 .charts,.ruua21 .charts.one{display:grid;grid-template-columns:1fr;gap:20px;margin-top:18px}.ruua21 figure{margin:0;padding:clamp(16px,2.5vw,24px);border:1px solid var(--line);border-radius:14px;background:#fff;min-width:0}.ruua21 figcaption{max-width:900px}.ruua21 figcaption h3{margin:0 0 4px;font-size:clamp(1.1rem,2vw,1.35rem)}.ruua21 figcaption p{margin:0;color:var(--muted);font-size:.9rem;line-height:1.65}.ruua21 .chart-box{position:relative;height:430px;margin-top:14px}.ruua21 .chart-box-large{height:470px}.ruua21 .chart-key{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:12px;padding:9px 12px;border-radius:10px;background:#f8fafc;color:#475569;font-size:.82rem;font-weight:700}.ruua21 .chart-key>span{display:inline-flex;align-items:center;gap:6px}.ruua21 .chart-key .key-note{flex-basis:100%;font-weight:500;color:var(--muted)}.ruua21 .dot{display:inline-block;width:10px;height:10px;border-radius:50%}.ruua21 .dot.ua{background:var(--ua)}.ruua21 .dot.ru{background:var(--ru)}.ruua21 .solid-line,.ruua21 .estimate-line{display:inline-block;width:24px;height:0;border-top:3px solid currentColor}.ruua21 .solid-line.ua,.ruua21 .estimate-line.ua{color:var(--ua)}.ruua21 .solid-line.ru,.ruua21 .estimate-line.ru{color:var(--ru)}.ruua21 .estimate-line{border-top-style:dashed}.ruua21 .chart-empty{display:none;margin:18px 0 0;padding:18px;border:1px dashed var(--line);border-radius:12px;background:#f8fafc;color:#475569;line-height:1.7}.ruua21 .chart-panel.is-empty .chart-box,.ruua21 .chart-panel.is-empty .chart-key{display:none}.ruua21 .chart-panel.is-empty .chart-empty{display:block}.ruua21 .eqgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.ruua21 .eqcard{position:relative;overflow:hidden;padding:18px;border:1px solid var(--line);border-radius:14px;background:#fff}.ruua21 .eqcard:before{content:"";position:absolute;inset:0 auto 0 0;width:4px}.ruua21 .eqcard.ua:before{background:var(--ua)}.ruua21 .eqcard.ru:before{background:var(--ru)}.ruua21 .eqcard>strong{font-size:clamp(1.4rem,3vw,2rem)}.ruua21 .eqcard dl div{display:flex;justify-content:space-between;padding:9px 0;border-top:1px solid var(--line)}.ruua21 .eqcard dd{margin:0;font-weight:700}.ruua21 .timeline{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.ruua21 .timeline article,.ruua21 .sourcegrid article{padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff}.ruua21 .timeline time{display:block;color:var(--muted);font-size:.8rem;font-weight:700}.ruua21 .sourcegrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.ruua21 aside{margin-top:14px;padding:17px;border:1px solid #ead9aa;border-left:5px solid #8a6528;border-radius:12px;background:#fff8e8}.ruua21 aside p{margin:6px 0 0}
@media(max-width:900px){.ruua21 .metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.ruua21 .timeline{grid-template-columns:repeat(2,minmax(0,1fr))}.ruua21 .chart-box,.ruua21 .chart-box-large{height:390px}}
@media(max-width:720px){.ruua21 .eqgrid,.ruua21 .sourcegrid{grid-template-columns:1fr}.ruua21 section{padding:17px 13px}.ruua21 figure{padding:15px 10px}.ruua21 .chart-box,.ruua21 .chart-box-large{height:330px}.ruua21 .chart-key{gap:7px 11px;font-size:.77rem;padding:8px}.ruua21 .chart-key.military>span:not(.key-note){flex-basis:calc(50% - 8px)}.ruua21 .jump{top:4px}}
@media(max-width:480px){.ruua21 .metrics,.ruua21 .timeline{grid-template-columns:1fr}.ruua21 .chart-box,.ruua21 .chart-box-large{height:300px}.ruua21 .chart-key.military>span:not(.key-note){flex-basis:100%}.ruua21 figcaption p{font-size:.84rem}}

.event-key{margin:8px 0 2px;color:#64748b;font-size:.78rem;font-weight:700;letter-spacing:.02em}
.timeline article{position:relative;padding-left:48px}
.timeline .event-no{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border:1px solid #cbd5e1;border-radius:999px;background:#fff;color:#334155;font-size:.78rem;font-weight:800}
@media(max-width:600px){.event-key{font-size:.72rem}.timeline article{padding-left:44px}}


/* V2.4: 軍人統計の出典・系列区分 */
.chart-key .official-line{
  display:inline-block;
  width:28px;
  height:0;
  border-top:2px dotted currentColor;
  vertical-align:middle;
  margin-right:7px;
}
.chart-key .official-line.ua{color:#315f88}
.chart-key .official-line.ru{color:#9a4e4e}

.source-note{
  margin:14px 0 18px;
  padding:15px 17px;
  border:1px solid var(--line,#d9e1ea);
  border-radius:12px;
  background:#fff;
  color:#475569;
  line-height:1.75;
}
.source-note strong{display:block;color:#172033;margin-bottom:4px}
.source-note p{margin:0}
.warning-note{
  border-left:4px solid #8a6528;
  background:#fffaf0;
}
.source-type{
  display:inline-block;
  margin:0 0 8px;
  padding:4px 8px;
  border-radius:999px;
  background:#eef2f6;
  color:#475569;
  font-size:.78rem;
  font-weight:700;
}
.source-method{
  margin-top:16px;
  padding:18px;
  border:1px solid #d9e1ea;
  border-radius:13px;
  background:#fff;
}
.source-method h3{margin:0 0 10px}
.source-method dl{margin:0}
.source-method dl div{
  display:grid;
  grid-template-columns:150px 1fr;
  gap:14px;
  padding:10px 0;
  border-top:1px solid #e5e7eb;
}
.source-method dl div:first-child{border-top:0}
.source-method dt{font-weight:700}
.source-method dd{margin:0;color:#475569;line-height:1.65}
@media(max-width:650px){
  .source-method dl div{grid-template-columns:1fr;gap:3px}
  .chart-key.military{font-size:.84rem}
}


/* V2.5 readability */
.compact-hero{padding-top:25px;padding-bottom:25px}
.compact-hero .kicker{margin-bottom:10px}
.hero-intro{max-width:900px!important;line-height:1.8}
.global-event-note{
  margin:10px 2px 22px;padding:9px 12px;border-left:3px solid #94a3b8;
  color:#526277;background:#f8fafc;font-size:.9rem
}
.civilian-metrics{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.compact-missing-note{
  margin:12px 0 18px;padding:11px 13px;border:1px solid #d9e1ea;border-left:4px solid #94a3b8;
  border-radius:9px;background:#fff;color:#64748b;font-size:.88rem;line-height:1.65
}

/* Military: 3-category guide */
.military-type-guide{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:0 0 18px
}
.type-item{
  display:grid;grid-template-columns:auto 1fr;grid-template-areas:"symbol title" "symbol desc";
  column-gap:10px;padding:12px 13px;border:1px solid #d9e1ea;border-radius:11px;background:#fff
}
.type-item .type-symbol{grid-area:symbol;align-self:center;width:18px;height:18px}
.type-item strong{grid-area:title;font-size:.92rem}
.type-item small{grid-area:desc;color:#64748b;line-height:1.45}
.type-item.official .type-symbol{border:3px solid #475569;border-radius:50%;background:#fff}
.type-item.confirmed .type-symbol{border-radius:50%;background:#475569}
.type-item.estimate .type-symbol{width:20px;height:10px;border-top:3px dashed #475569;margin-top:5px}

.simplified-key{gap:10px 18px!important}
.country-chip{display:inline-block;width:11px;height:11px;border-radius:50%;margin-right:6px}
.country-chip.ua{background:#315f88}
.country-chip.ru{background:#9a4e4e}
.official-sample,.estimate-sample{display:inline-block;width:28px;height:0;margin-right:7px;vertical-align:middle}
.official-sample{border-top:3px solid #475569}
.estimate-sample{border-top:3px dashed #475569}

/* Sources */
.source-desc{margin:10px 0 0;color:#64748b;font-size:.86rem;line-height:1.65}
.source-caveats{
  margin-top:16px;padding:18px;border:1px solid #d9e1ea;border-radius:13px;background:#fff
}
.source-caveats h3{margin:0 0 8px}
.source-caveats ul{margin:0;padding-left:1.15rem}
.source-caveats li{margin:7px 0;line-height:1.65}
.method-dot{display:inline-block;width:11px;height:11px;margin-right:7px;vertical-align:middle}
.method-dot.official{border:2px solid #475569;border-radius:50%;background:#fff}
.method-dot.confirmed{border-radius:50%;background:#475569}
.method-dot.estimate{width:18px;height:7px;border-top:2px dashed #475569}

/* Events */
.event-card{display:flex!important;align-items:flex-start;gap:10px}
.event-card .event-no{flex:0 0 28px}
.event-body{min-width:0}
.event-body time{display:block;margin-bottom:4px;color:#64748b;font-size:.78rem;font-weight:700}
.event-body a,.event-body strong{line-height:1.45}

@media(max-width:700px){
  .military-type-guide{grid-template-columns:1fr}
  .simplified-key{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px!important}
  .civilian-metrics{grid-template-columns:1fr!important}
}