/* ---------------------------------------------------------
   クルーズの研究ページ（research-cruise.html）だけで使う図。
   表・数字の帯・切り替えは fugen.css のものを使う。
   白黒と罫線で組み、赤（--brand）は「低い・外れる」ものと、地図の港だけに使う。
   スマホでは、名前と棒を上下に分け、地図・数値・順位を縦に並べる。
   --------------------------------------------------------- */

.rs-story__item > .cr-note { margin-top: 4px; }
.cr-note { font-size: 13px; line-height: 1.9; color: var(--muted); max-width: 760px; }
.fg-table .cr-num { font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- 式 ---------- */
.cr-formulas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 2px solid var(--ink); }
.cr-formula { display: flex; flex-direction: column; gap: 10px; padding: 18px 20px 4px 0; }
.cr-formula + .cr-formula { padding-left: 20px; border-left: 1px solid var(--line); }
.cr-formula__name { font-size: 13px; font-weight: 800; color: var(--ink); }
.cr-formula__eq { color: var(--ink); }
.cr-math[display="block"] { margin: 4px 0; font-size: 22px; }
.cr-formula__text math { font-size: 15px; }
.cr-formula__text { font-size: 12px; line-height: 1.8; color: var(--sub); }

/* ---------- 発散する横棒 ---------- */
.cr-diverge__head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  margin-left: calc(var(--cr-name) + 16px);
  font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted);
}
.cr-diverge__head span:last-child { text-align: right; }
.cr-diverge { --cr-name: 260px; }
.cr-bars { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.cr-bars li {
  display: grid; grid-template-columns: var(--cr-name) minmax(0, 1fr) 54px; align-items: center; gap: 16px;
  padding: 6px 0; font-size: 13px;
}
.cr-bars__name { font-weight: 700; line-height: 1.5; color: var(--ink); }
.cr-bars li b { font-size: 13px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.cr-bars li.is-neg b { color: var(--brand); }
/* 棒の置き場。真ん中が 0、両端が ±5 */
.cr-bars__bar {
  position: relative; height: 14px;
  background: linear-gradient(var(--line), var(--line)) center / 1px 100% no-repeat;
}
.cr-bars__bar::after {
  content: ''; position: absolute; top: 2px; bottom: 2px; left: 50%;
  width: calc(var(--v) / 5 * 50%); background: var(--ink);
  transform: scaleX(0); transform-origin: left;
  transition: transform .9s var(--ease);
}
.cr-bars li.is-neg .cr-bars__bar::after {
  left: auto; right: 50%; width: calc(var(--v) / -5 * 50%);
  background: var(--brand); transform-origin: right;
}
.cr-bars li:nth-child(n) .cr-bars__bar::after { transition-delay: calc(var(--i, 0) * 50ms); }
.is-on .cr-bars__bar::after { transform: none; }
.cr-bars li.is-gap { padding: 0; color: var(--dim); }
.cr-bars li.is-gap .cr-bars__name { font-weight: 400; }

/* ---------- 地図で巡る ---------- */
.cr-route__body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.cr-route__map { height: 460px; border: 1px solid var(--line); background: var(--bg-soft); z-index: 0; }
.cr-route__map .leaflet-tile-pane { filter: grayscale(1) contrast(.95) brightness(1.04); }
.cr-route__map .leaflet-control-attribution { font-size: 10px; }
.cr-route__side { display: flex; flex-direction: column; gap: 18px; }
.cr-route__read { display: flex; flex-direction: column; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--ink); }
.cr-route__combo { font-size: 16px; font-weight: 800; line-height: 1.6; min-height: 3.2em; }
.cr-route__time p { display: flex; align-items: baseline; gap: 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.cr-route__time p span { margin-right: auto; }
.cr-route__time b { font-size: 30px; font-weight: 800; letter-spacing: -.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.cr-route__meter { display: block; position: relative; height: 8px; margin-top: 6px; background: var(--bg-soft); }
.cr-route__meter > span { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--ink); transition: width .8s var(--ease); }
.cr-route__scores { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; }
.cr-route__scores > div { display: flex; flex-direction: column; gap: 2px; }
.cr-route__scores dt { font-size: 11px; font-weight: 700; line-height: 1.5; color: var(--muted); }
.cr-route__scores dd { margin: 0; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cr-route__scores .is-total dd { color: var(--brand); }

.cr-route__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.cr-route__list button {
  display: grid; grid-template-columns: 1.6em minmax(0, 1fr) auto; gap: 8px; align-items: baseline;
  width: 100%; padding: 9px 4px; border: 0; border-bottom: 1px solid var(--line); background: none;
  font: inherit; font-size: 13px; line-height: 1.5; text-align: left; color: var(--sub); cursor: pointer;
}
.cr-route__list button:hover { background: var(--bg-soft); }
.cr-route__list button[aria-pressed="true"] { color: var(--ink); font-weight: 800; background: var(--bg-soft); box-shadow: inset 3px 0 0 var(--ink); }
.cr-route__list .cr-rank { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.cr-route__list .cr-u { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--ink); }
.cr-route__list .cr-sub { grid-column: 1 / -1; font-size: 11px; font-weight: 800; letter-spacing: .06em; color: var(--muted); padding: 10px 4px 4px; border-bottom: 1px solid var(--line); }
.cr-route__ctrl { margin-bottom: 4px; }

/* 地図の上の線と点 */
.cr-line { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); animation: cr-draw 1.6s var(--ease) forwards; }
@keyframes cr-draw { to { stroke-dashoffset: 0; } }
.cr-label.leaflet-tooltip {
  padding: 2px 7px; border: 0; border-radius: 0; box-shadow: none;
  background: var(--ink); color: #fff; font-size: 12px; font-weight: 700;
}
.cr-label.leaflet-tooltip::before { display: none; }
.cr-label.is-port { background: var(--brand); }

/* ---------- クラス別の満足度（積み上げ） ---------- */
.cr-stack__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); }
.cr-stack__rows li { display: grid; grid-template-columns: 120px minmax(0, 1fr) 64px; gap: 16px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--line); }
.cr-stack__name { font-size: 14px; font-weight: 800; }
.cr-stack__rows b { font-size: 18px; font-weight: 800; text-align: right; font-variant-numeric: tabular-nums; }
.cr-stack__bar { display: flex; height: 18px; background: var(--bg-soft); }
.cr-stack__bar > span { width: calc(var(--v) * 1%); transform: scaleX(0); transform-origin: left; transition: transform .9s var(--ease); }
.cr-stack__bar > .is-a { background: var(--ink); }
.cr-stack__bar > .is-b { background: #9a9a9a; transition-delay: .5s; }
.is-on .cr-stack__bar > span { transform: none; }
.cr-stack__key { display: flex; align-items: center; gap: 6px 8px; font-size: 12px; font-weight: 700; color: var(--sub); }
.cr-stack__key span { width: 12px; height: 12px; }
.cr-stack__key span + span, .cr-stack__key span.is-b { margin-left: 12px; }
.cr-stack__key .is-a { background: var(--ink); }
.cr-stack__key .is-b { background: #9a9a9a; }

/* ---------- 狭い画面 ---------- */
@media (max-width: 1100px) {
  .cr-diverge { --cr-name: 200px; }
}
@media (max-width: 767px) {
  #cruise .rs-theme__grid { grid-template-columns: minmax(0, 1fr); }
  #cruise .rs-story, #cruise .rs-story__item, #cruise .rs-fig { min-width: 0; }

  .cr-formulas { grid-template-columns: 1fr; }
  .cr-formula, .cr-formula + .cr-formula { padding: 16px 0 12px; border-left: 0; }
  .cr-formula + .cr-formula { border-top: 1px solid var(--line); }
  .cr-math[display="block"] { font-size: 19px; }

  /* 名前を上、棒と値を下に */
  .cr-diverge__head { margin-left: 0; }
  .cr-bars li { grid-template-columns: minmax(0, 1fr) 48px; gap: 2px 10px; padding: 8px 0; }
  .cr-bars__name { grid-column: 1 / -1; font-size: 12px; }
  .cr-bars li b { font-size: 12px; }

  .cr-route__body { grid-template-columns: 1fr; gap: 16px; }
  .cr-route__map { height: 300px; }
  .cr-route__combo { min-height: 0; font-size: 15px; }
  .cr-route__ctrl .fg-seg button { flex: 1 1 45%; font-size: 12px; padding: 10px 4px; }
  .cr-route__scores dd { font-size: 18px; }
  .cr-route__list button { padding: 11px 4px; }

  .cr-stack__rows li { grid-template-columns: minmax(0, 1fr) 56px; gap: 6px 10px; }
  .cr-stack__name { grid-column: 1 / -1; font-size: 13px; }
  .cr-stack__rows b { font-size: 16px; }
}

@media (prefers-reduced-motion: reduce) {
  .cr-bars__bar::after, .cr-stack__bar > span, .cr-route__meter > span { transition: none; transform: none; }
  .cr-line { animation: none; stroke-dashoffset: 0; }
}