/* Catalyst まとめ — 台帳。装飾は情報の下に沈める。 */

:root {
  --bg:        #ffffff;
  --bg-sub:    #f5f5f7;
  --pill:      #ffffff;
  --chip:      rgba(0,0,0,.055);
  --fg:        #1d1d1f;
  --fg-2:      #6e6e73;
  --fg-3:      #86868b;
  --hairline:  rgba(0,0,0,.10);
  --accent:    #0071e3;
  --focus:     rgba(0,113,227,.35);
  --shadow:    0 1px 3px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.05);
  --pill-shadow: 0 1px 2px rgba(0,0,0,.10), 0 3px 8px rgba(0,0,0,.06);
  --topbar-bg: rgba(255,255,255,.72);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg:        #000000;
    --bg-sub:    #1c1c1e;
    --pill:      #2c2c2e;
    --chip:      rgba(255,255,255,.10);
    --fg:        #f5f5f7;
    --fg-2:      #a1a1a6;
    --fg-3:      #6e6e73;
    --hairline:  rgba(255,255,255,.14);
    --accent:    #2997ff;
    --focus:     rgba(41,151,255,.45);
    --shadow:    none;
    --pill-shadow: none;
    --topbar-bg: rgba(0,0,0,.72);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
               "Hiragino Sans", "Yu Gothic UI", "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 24px; }

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
  border-radius: 6px;
}

/* ---------- top bar ---------- */

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: var(--topbar-bg);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--hairline);
}
.topbar-in { display: flex; align-items: center; gap: 12px; height: 48px; }
.mark { font-size: 14px; font-weight: 600; letter-spacing: -.01em; }
.mark-sub { font-size: 11px; color: var(--fg-3); letter-spacing: .16em; }

/* ---------- hero ---------- */

.hero { padding: 80px 0 64px; }

h1 {
  margin: 0 0 16px;
  font-size: 44px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.12;
}

.lede {
  margin: 0 0 56px;
  max-width: 42em;
  font-size: 17px;
  color: var(--fg-2);
}

.figures {
  display: grid;
  grid-template-columns: max-content max-content minmax(0, 1fr);
  gap: 24px 64px;
  align-items: baseline;
}

.fig-n {
  font-size: 40px;
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.05;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.fig-l {
  margin-top: 8px;
  font-size: 13px;
  color: var(--fg-2);
}
.fig-lead .fig-n { font-size: 68px; color: var(--fg); }
.fig-lead .fig-l { color: var(--fg); }
.fig-note {
  margin: 12px 0 0;
  max-width: 30em;
  font-size: 13px;
  line-height: 1.6;
  color: var(--fg-2);
}

.hero-foot {
  margin: 40px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--hairline);
  font-size: 12px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- legend ---------- */

.legend { background: var(--bg-sub); }
.legend-in { padding-top: 28px; padding-bottom: 28px; }
.legend-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 0;
}
.legend-t { font-size: 13px; color: var(--fg-2); }

/* ---------- badges ---------- */
/* 形だけで区別する。色相で優劣を付けない。
   実線 = 段階（記録上の位置） / 破線 = 保留（欄が空） /
   点線 = 転帰（段階とは別の軸） / 塗り = 未使用（記録された事実） */

.badge {
  display: inline-flex; align-items: center;
  height: 22px; padding: 0 9px;
  border-radius: 11px;
  font-size: 12px; line-height: 1;
  white-space: nowrap;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}
.badge.stage  { border: 1px solid var(--hairline); }
.badge.hold   { border: 1px dashed var(--hairline); }
.badge.oc     { border: 1px dotted var(--hairline); }
.badge.unused { background: var(--chip); color: var(--fg); }

.tag { font-size: 12px; color: var(--fg-3); white-space: nowrap; }

/* ---------- segmented control ---------- */

.seg {
  position: relative;
  display: flex;
  background: var(--bg-sub);
  border-radius: 12px;
  padding: 3px;
}
.seg-tabs { width: 260px; max-width: 100%; }
.seg-stage { width: 100%; max-width: 560px; }

.seg-pill {
  position: absolute; top: 3px; bottom: 3px; left: 3px;
  width: calc((100% - 6px) / var(--n));
  transform: translateX(calc(var(--i) * 100%));
  background: var(--pill);
  border-radius: 9px;
  box-shadow: var(--pill-shadow);
  transition: transform 200ms cubic-bezier(.4,0,.2,1);
}
.seg-btn {
  position: relative; z-index: 1;
  flex: 1 1 0; min-width: 0;
  height: 36px;
  border: 0; background: none;
  font: inherit; font-size: 13px; font-weight: 500;
  color: var(--fg-2);
  cursor: pointer;
  border-radius: 9px;
  padding: 0 6px;
  white-space: nowrap;
}
.seg-btn.on { color: var(--fg); }

/* ---------- tabs bar ---------- */

.tabsbar { padding: 32px 0 0; }

/* ---------- controls ---------- */

main { padding-bottom: 8px; }

.stagebar { padding: 24px 0 16px; }

.controls {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 0 0 20px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 24px;
}

select, input[type=search] {
  height: 36px;
  border: 0;
  background: var(--bg-sub);
  color: var(--fg);
  border-radius: 8px;
  padding: 0 12px;
  font: inherit; font-size: 13px;
  appearance: none; -webkit-appearance: none;
}
select { padding-right: 30px; }
input[type=search] { min-width: 220px; flex: 0 1 300px; }
select:focus, input[type=search]:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}

.check {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; color: var(--fg-2);
  min-height: 36px;
}
.check input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
.check.off { color: var(--fg-3); }
.check-note { font-size: 12px; color: var(--fg-3); }

.count {
  margin-left: auto;
  font-size: 13px; color: var(--fg-2);
  font-variant-numeric: tabular-nums;
}

.empty {
  margin: 0 0 24px;
  font-size: 15px;
  color: var(--fg-2);
}

/* ---------- proposal cards ---------- */

.proposals { list-style: none; margin: 0; padding: 0; }
.proposals li {
  position: relative;
  background: var(--bg-sub);
  border-radius: 18px;
  box-shadow: var(--shadow);
  padding: 20px 24px;
  margin-bottom: 12px;
}
/* ホバーは重ねた面の opacity で行う。トークン値そのものを遷移させると
   OS のカラースキーム切替時に古い色で固まるため。 */
.proposals li::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 18px;
  background: var(--chip);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms linear;
}
.proposals li:hover::after { opacity: 1; }
.proposals li > * { position: relative; z-index: 1; }

.badges {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 10px;
}
.p-title {
  display: block;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  line-height: 1.4;
  margin: 0 0 4px;
  overflow-wrap: anywhere;
}
.p-who {
  font-size: 13px; color: var(--fg-2);
  overflow-wrap: anywhere;
}
.p-raw {
  margin-top: 10px;
  font-size: 12px; color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.p-raw .sep { padding: 0 8px; opacity: .5; }
.p-src {
  margin-top: 10px;
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: 13px;
}

.more {
  position: relative;
  display: block;
  margin: 24px auto 0;
  min-height: 44px;
  padding: 0 28px;
  border: 0;
  border-radius: 12px;
  background: var(--bg-sub);
  color: var(--fg);
  font: inherit; font-size: 14px; font-weight: 500;
  cursor: pointer;
}
.more::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 12px;
  background: var(--chip);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms linear;
}
.more:hover::after { opacity: 1; }

/* ---------- profiles table ---------- */

.tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }

table { width: 100%; border-collapse: collapse; font-size: 15px; }
th, td {
  text-align: left;
  padding: 12px 16px 12px 0;
  border-bottom: 1px solid var(--hairline);
  white-space: nowrap;
}
th {
  font-size: 12px; font-weight: 400; color: var(--fg-3);
  position: sticky; top: 48px;
  background: var(--bg);
}
th.num, td.num { text-align: right; }
td.num { font-variant-numeric: tabular-nums; }
td.name { white-space: normal; overflow-wrap: anywhere; min-width: 180px; }
td.funds { font-size: 12px; color: var(--fg-3); white-space: normal; min-width: 200px; }
td.pattern { font-size: 13px; color: var(--fg-2); }
tbody tr:hover { background: var(--bg-sub); }

/* ---------- 記述子の定義（形の決め方） ---------- */
/* .defs は .wrap の子。padding ショートハンドは横の余白を潰すので使わない。 */
.defs {
  margin: 8px 0 32px;
  padding-top: 20px;
  padding-bottom: 20px;
  border-top: 1px solid var(--hairline);
  border-bottom: 1px solid var(--hairline);
}
.defs-h {
  margin: 0 0 8px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -.01em;
}
.defs-lead, .defs-note {
  margin: 0 0 12px;
  max-width: 52em;
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg-2);
}
.defs-note { margin: 12px 0 0; color: var(--fg-3); }
.defs-t { margin: 0; }

/* ---------- footer ---------- */

footer {
  margin-top: 80px;
  border-top: 1px solid var(--hairline);
  padding: 24px 0 64px;
}
footer p {
  margin: 0;
  max-width: 60em;
  font-size: 12px;
  line-height: 1.7;
  color: var(--fg-3);
}

/* ---------- responsive ---------- */

@media (max-width: 720px) {
  .wrap { padding: 0 20px; }
  .hero { padding: 48px 0 40px; }
  h1 { font-size: 32px; }
  .lede { margin-bottom: 40px; font-size: 16px; }
  .figures { grid-template-columns: 1fr; gap: 28px; }
  .fig-n { font-size: 40px; }
  .fig-lead .fig-n { font-size: 44px; }
  .seg-btn { height: 44px; font-size: 12px; }
  .seg-tabs { width: 100%; }
  .seg-stage { max-width: none; }
  select, input[type=search] { height: 44px; }
  input[type=search] { flex: 1 1 100%; min-width: 0; }
  .check { min-height: 44px; }
  .count { margin-left: 0; }
  .proposals li { padding: 18px 20px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0s !important;
    animation-duration: 0s !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
  }
}

/* ==========================================================================
   入口（index.html）— 何があるか、何が無いか。
   区別は線種で行う。実線＝接続済み／破線＝繋がっていない。色相は使わない。
   ========================================================================== */

.backlink { margin: 0 0 20px; font-size: 13px; }

.home-hero { padding: 96px 0 64px; }
.home-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 390px);
  gap: 64px;
  align-items: stretch;
}
.home-hero-copy { min-width: 0; }

/* 主役は文である。数字はその下に等しく three 並ぶ。 */
.statement {
  margin: 0 0 56px;
  max-width: 34em;
  font-size: 21px;
  line-height: 1.75;
  letter-spacing: -.01em;
  color: var(--fg);
}

.home-hero .figures {
  grid-template-columns: repeat(3, max-content);
  gap: 28px 72px;
}
.home-hero .fig-n { color: var(--fg); font-size: 34px; }
.home-hero .fig-l { color: var(--fg-2); }

.map-neo {
  position: relative;
  display: flex;
  min-height: 330px;
  padding: 28px;
  overflow: hidden;
  flex-direction: column;
  justify-content: flex-end;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px;
  background:
    linear-gradient(160deg, rgba(61, 123, 255, .16), transparent 46%),
    radial-gradient(circle at 84% 18%, rgba(139, 108, 255, .22), transparent 42%),
    #080b12;
  box-shadow: 0 40px 90px -50px rgba(0, 0, 0, .95), 0 0 0 1px rgba(61, 123, 255, .07);
  color: #f2f4f8;
  text-decoration: none;
  isolation: isolate;
  transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s cubic-bezier(.16,1,.3,1), border-color .3s cubic-bezier(.16,1,.3,1);
}
.map-neo::before,
.map-neo::after {
  position: absolute;
  z-index: -1;
  content: "";
  pointer-events: none;
}
/* 方眼。地図と同じ空気にする。 */
.map-neo::before {
  inset: 0;
  background-image:
    linear-gradient(rgba(126, 178, 255, .06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(126, 178, 255, .06) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(120% 110% at 50% 40%, #000 45%, transparent 100%);
}
/* 経緯線の球。ティザーのヒーローと同じ形を小さく置く。 */
.map-neo::after {
  width: 250px;
  height: 250px;
  top: -84px;
  right: -60px;
  border: 1px solid rgba(126, 178, 255, .38);
  border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(126, 178, 255, .10),
    0 0 0 30px rgba(61, 123, 255, .045),
    0 0 0 62px rgba(61, 123, 255, .022);
}
.map-neo:hover, .map-neo:focus-visible {
  border-color: rgba(61, 123, 255, .5);
  box-shadow: 0 40px 90px -46px rgba(0, 0, 0, .95), 0 0 46px -12px rgba(61, 123, 255, .45);
  outline: none;
  transform: translateY(-3px);
}
.map-neo-glow {
  position: absolute;
  top: 44px;
  right: 62px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #cbe8ff;
  box-shadow: 0 0 10px 4px rgba(88, 150, 255, .7), 0 0 36px 12px rgba(61, 123, 255, .3);
  animation: neo-pulse 3.6s ease-in-out infinite;
}
.map-neo-kicker {
  margin-bottom: auto;
  color: #565f73;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .24em;
  text-transform: uppercase;
}
.map-neo-title {
  font-size: clamp(30px, 3.6vw, 44px);
  font-weight: 700;
  letter-spacing: -.04em;
  line-height: .98;
}
.map-neo-title em {
  font-style: normal;
  background: linear-gradient(96deg, #3d7bff, #8b6cff 86%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.map-neo-copy { margin-top: 16px; color: #8a92a6; font-size: 14px; line-height: 1.7; }
.map-neo-copy strong { color: #f2f4f8; font-weight: 700; }
.map-neo-detail { margin-top: 8px; color: #565f73; font-size: 11px; }
.map-neo-go {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: #6ea6ff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .16em;
}
@keyframes neo-pulse { 50% { opacity: .55; transform: scale(.72); } }

.layer-jp { font-size: 13px; color: var(--fg-2); }

/* ---------- 入口（四つの扉） ---------- */
/* 扉は同格。大きさ・枠・並び順で優劣を作らない。 */

.home-main { padding-top: 8px; padding-bottom: 8px; }

.doors {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

.door {
  position: relative;
  background: var(--bg-sub);
  border: 1px solid var(--hairline);
  border-radius: 18px;
}
.door::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: 18px;
  background: var(--chip);
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms linear;
}
.door:hover::after { opacity: 1; }

/* 扉全体が一つのリンク。押せる範囲と見えている範囲を一致させる。 */
.door-a {
  position: relative; z-index: 1;
  display: block;
  color: inherit;
  padding: 32px 30px 30px;
  border-radius: 18px;
}
.door-a:hover { text-decoration: none; }

.door-h {
  display: block;
  font-size: 26px; font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.3;
  color: var(--fg);
}
.door-sub {
  display: block;
  margin-top: 8px;
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--fg-3);
}
.door-d {
  display: block;
  margin: 18px 0 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}

/* ---------- 現在地 ---------- */

.status {
  margin-top: 72px;
  padding-top: 40px;
  border-top: 1px solid var(--hairline);
}

.status-note {
  margin: 16px 0 0;
  max-width: 46em;
  font-size: 13px;
  color: var(--fg-3);
}

/* ---------- 計器 ---------- */

.insts { list-style: none; margin: 0; padding: 0; }

.inst {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) max-content;
  align-items: center;
  gap: 16px;
  background: var(--bg);
  border-radius: 14px;
  padding: 16px 18px;
  margin-bottom: 10px;
}
.inst:last-child { margin-bottom: 0; }
.inst-on  { border: 1px solid var(--hairline); }

.inst-k {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 26px; padding: 0 8px;
  border-radius: 8px;
  background: var(--chip);
  font-size: 12px;
  color: var(--fg-2);
}

.inst-b { min-width: 0; }
.inst-t {
  display: block;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  overflow-wrap: anywhere;
}
.inst-d {
  margin: 4px 0 0;
  font-size: 13px;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}
.inst-st { flex: none; }
/* 本体 / 外部サイト の別。状態ではなく置き場所なので線も色も足さない。 */
.inst-where {
  font-size: 12px;
  color: var(--fg-3);
  white-space: nowrap;
}

/* ---------- 原則 ---------- */

.rules { margin-top: 64px; background: var(--bg-sub); }
.rules-in { padding-top: 32px; padding-bottom: 32px; }
.rules ul { margin: 0; padding: 0; list-style: none; }
.rules li {
  margin: 0;
  padding: 6px 0;
  max-width: 46em;
  font-size: 14px;
  color: var(--fg-2);
}

.rules + footer { margin-top: 0; }
footer p + p { margin-top: 8px; }

@media (max-width: 720px) {
  .home-hero { padding: 48px 0 40px; }
  .home-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .map-neo { min-height: 250px; padding: 24px; }
  .home-hero .figures { grid-template-columns: 1fr; gap: 24px; }
  .home-hero .fig-n { font-size: 32px; }
  .statement { margin-bottom: 40px; font-size: 18px; }
  .doors { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .door-a { padding: 24px 22px 22px; }
  .door-h { font-size: 22px; }
  .status { margin-top: 48px; padding-top: 32px; }
  .inst { grid-template-columns: max-content minmax(0, 1fr); }
  .inst-st { grid-column: 2; }
}

/* ==========================================================================
   MAP（map.html）— 読み方の層。
   区別は線種で行う。実線＝起きたこと（記録）／破線＝まだ起きていないこと／
   点線＝計測ではないもの。色相で優劣を作らない。
   ========================================================================== */

.map-main { padding-top: 8px; }

.map-sec {
  padding: 40px 0 8px;
  border-top: 1px solid var(--hairline);
}
.map-sec:first-child { border-top: 0; padding-top: 8px; }

.map-h {
  display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap;
  margin-bottom: 20px;
}
.map-h h2 {
  margin: 0;
  font-size: 22px; font-weight: 600;
  letter-spacing: .02em;
}

.map-h3 {
  margin: 40px 0 14px;
  font-size: 15px; font-weight: 600;
  color: var(--fg);
}

.map-lead {
  margin: 0 0 16px;
  max-width: 46em;
  font-size: 15px;
  color: var(--fg-2);
}
.map-lead strong { color: var(--fg); font-weight: 600; }

.map-rules { margin: 0 0 32px; padding: 0; list-style: none; }
.map-rules li {
  padding: 4px 0;
  max-width: 46em;
  font-size: 13px;
  color: var(--fg-3);
}

/* ---------- TIDE の系列 ---------- */

.tide-s {
  background: var(--bg-sub);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 24px 24px 20px;
  margin-bottom: 16px;
}

.tide-n {
  margin: 0;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
}
.tide-note {
  margin: 4px 0 18px;
  font-size: 13px;
  color: var(--fg-3);
  overflow-wrap: anywhere;
}

.tide-l { list-style: none; margin: 0; padding: 0; }

.tide-e {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr);
  gap: 4px 20px;
  padding: 14px 0;
  border-top: 1px solid var(--hairline);
}
.tide-e:first-child { border-top: 0; padding-top: 0; }

.tide-d {
  font-size: 13px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tide-b { min-width: 0; }
.tide-w {
  margin: 0;
  font-size: 15px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}
.tide-src {
  margin: 8px 0 0;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.tide-src .sep { padding: 0 8px; opacity: .5; color: var(--fg-3); }

/* まだ起きていないこと — 破線。欄が埋まっていないことを形で示す。 */
.tide-state {
  margin-top: 18px;
  border: 1px dashed var(--hairline);
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--bg);
}
.tide-state-h {
  margin: 0 0 8px;
  font-size: 13px; font-weight: 600;
  color: var(--fg);
}
.tide-state-l { margin: 0; padding: 0; list-style: none; }
.tide-state-l li {
  padding: 3px 0;
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}

.map-pair {
  margin: 20px 0 0;
  max-width: 46em;
  font-size: 14px;
  line-height: 1.8;
  color: var(--fg);
}

/* ---------- 交点 ---------- */

.map-flow {
  margin: 0 0 20px;
  padding: 20px;
  background: var(--bg-sub);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  font: inherit;
  font-size: 13px;
  line-height: 1.9;
  color: var(--fg-2);
  white-space: pre;
  font-variant-numeric: tabular-nums;
}

.map-go { margin: 20px 0 8px; font-size: 15px; }

/* ---------- 六燃料 ---------- */

.fuels { list-style: none; margin: 0; padding: 0; }

.fuel-i {
  display: grid;
  grid-template-columns: 8em minmax(0, 1fr) max-content;
  gap: 4px 20px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.fuel-k { font-size: 14px; font-weight: 600; }
.fuel-b { font-size: 14px; color: var(--fg-2); overflow-wrap: anywhere; }
.fuel-w { font-size: 12px; color: var(--fg-3); white-space: nowrap; }

/* ---------- 横並びの表 ---------- */

table.matrix { font-size: 14px; }
table.matrix th, table.matrix td { padding: 10px 14px 10px 0; }
table.matrix th.mk, table.matrix td.mk { text-align: center; padding-right: 0; min-width: 4.5em; }
table.matrix th.chain, table.matrix td.chain {
  font-size: 14px; font-weight: 600; color: var(--fg); white-space: nowrap;
}
table.matrix td.mk { font-size: 15px; color: var(--fg); }
table.matrix td.num { color: var(--fg-2); white-space: nowrap; }

.map-legend { list-style: none; margin: 14px 0 0; padding: 0; }
.map-legend li {
  padding: 4px 0;
  max-width: 46em;
  font-size: 13px;
  color: var(--fg-2);
}
.map-legend strong { color: var(--fg); font-weight: 600; }
.mk { display: inline-block; min-width: 1.4em; text-align: center; color: var(--fg); }

/* 計測ではないもの — 点線。段階や記録とは軸が違うことを形で示す。 */
.map-caveat {
  margin: 24px 0 0;
  border: 1px dotted var(--hairline);
  border-radius: 14px;
  padding: 16px 18px;
  background: var(--bg-sub);
}
.map-caveat p {
  margin: 0;
  max-width: 46em;
  font-size: 13px;
  line-height: 1.8;
  color: var(--fg-2);
}
.map-caveat p + p { margin-top: 8px; }

/* ---------- 視野の分布 ---------- */

.spread { list-style: none; margin: 0; padding: 0; }
.spread-i {
  display: grid;
  grid-template-columns: 8em minmax(0, 1fr);
  gap: 4px 20px;
  align-items: baseline;
  padding: 10px 0;
  border-bottom: 1px solid var(--hairline);
}
.spread-n { font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.spread-t { font-size: 14px; color: var(--fg-2); }

.hero-foot .sep { padding: 0 8px; opacity: .5; }

@media (max-width: 720px) {
  .map-sec { padding-top: 32px; }
  .map-h h2 { font-size: 20px; }
  .tide-s { padding: 20px 18px 18px; }
  .tide-e { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .fuel-i { grid-template-columns: minmax(0, 1fr); gap: 2px; }
  .fuel-w { white-space: normal; }
  .spread-i { grid-template-columns: minmax(0, 1fr); gap: 2px; }
}

/* ==========================================================================
   YOU（you.html）— 入口の層。
   区別は線種で行う。実線＝このサイトに材料がある／破線＝今このサイトには無い／
   点線＝このサイトでは扱わない。色相で優劣を作らない。
   「無い」欄も、あるものと同じ大きさ・同じ濃さで書く。無いことも情報である。
   ========================================================================== */

/* ---------- 六属性 ---------- */
/* 六つとも同じ枠・同じ文字サイズ。順番による強弱を付けない。 */

.types {
  list-style: none;
  margin: 0 0 8px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.type {
  background: var(--bg-sub);
  border: 1px solid var(--hairline);
  border-radius: 18px;
  padding: 20px 22px;
}
.type-n {
  margin: 0 0 10px;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  color: var(--fg);
}
.type-f {
  margin: 0 0 6px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.type-w {
  margin: 0;
  font-size: 13px;
  line-height: 1.7;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}

/* ---------- あるもの／無いもの ---------- */

.have-l { list-style: none; margin: 0; padding: 0; }

.have {
  display: grid;
  grid-template-columns: 7em minmax(0, 1fr);
  gap: 4px 24px;
  background: var(--bg-sub);
  border-radius: 18px;
  padding: 22px 24px;
  margin-bottom: 12px;
}
.have:last-child { margin-bottom: 0; }

.have-yes   { border: 1px solid var(--hairline); }
.have-no    { border: 1px dashed var(--hairline); }
.have-never { border: 1px dotted var(--hairline); }

.have-n {
  margin: 0;
  font-size: 17px; font-weight: 600; letter-spacing: -.01em;
  color: var(--fg);
  white-space: nowrap;
}
.have-b { min-width: 0; }
.have-k {
  margin: 0 0 2px;
  font-size: 12px;
  color: var(--fg-3);
}
.have-v {
  margin: 0 0 14px;
  max-width: 46em;
  font-size: 15px;
  line-height: 1.75;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.have-v:last-child { margin-bottom: 0; }
.have-v strong { font-weight: 600; color: var(--fg); }

/* ---------- DRep の材料対応表 ---------- */

.mats { list-style: none; margin: 0; padding: 0; }

.mat {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, .9fr) max-content;
  gap: 4px 20px;
  align-items: baseline;
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 10px;
  background: var(--bg-sub);
}
.mat:last-child { margin-bottom: 0; }
.mat-on  { border: 1px solid var(--hairline); }
.mat-off { border: 1px dashed var(--hairline); }

.mat-q {
  margin: 0;
  font-size: 15px;
  color: var(--fg);
  overflow-wrap: anywhere;
}
.mat-s {
  margin: 0;
  font-size: 13px;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}
.mat-a {
  margin: 0;
  font-size: 14px;
  color: var(--fg);
  white-space: nowrap;
  overflow-wrap: anywhere;
}

@media (max-width: 720px) {
  .types { grid-template-columns: minmax(0, 1fr); }
  .type { padding: 18px 20px; }
  .have { grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 20px; }
  .have-n { white-space: normal; }
  .mat { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .mat-a { white-space: normal; }
}

/* 文章を入れる表は折り返す（横スクロールの幅を短くするため）。 */
table.matrix.wrapcells td, table.matrix.wrapcells th { white-space: normal; }
table.matrix.wrapcells td.chain { min-width: 8em; }
table.matrix.wrapcells td:last-child { min-width: 16em; }

/* 固定ヘッダ（48px）の下にアンカー先が隠れないようにする。 */
#tide, #fuel { scroll-margin-top: 64px; }

/* ==========================================================================
   地域（region.html）— 地域の層。
   このページだけ、地図の塗りに青の色階を使う（量の表現であり、優劣ではない）。
   国を押すと左の一覧が絞り込まれる。基本は縮小埋め込み、全画面に切り替えられる。
   ========================================================================== */

/* 地図パネルはテーマに追従させない。海と大地はこの一枚の絵として固定する。
   量は土地の色で表す。公式マップは土地が無地でピンだけが数字を持つが、
   ここでは土地そのものが記録の量で発光する。 */
/* 暗い計器の世界。ティーザーサイト（catalyst-map）の配色に合わせる。
   海は深い夜、大地は光をわずかに受けた面、記録は単一の青が濃くなるほど増える。
   選択と操作はティール一色。アクセントで優劣は作らない。 */
:root {
  /* 記録の無い大地。沈めて、記録のある国が浮くようにする。 */
  --land:     rgba(96, 122, 168, .10);
  --land-ln:  rgba(126, 168, 224, .22);
  /* 量のランプ。深い藍から青へ、そして淡い水色へ。
     明るさが一方向に増えるので順序が読める。色相は一本道で、優劣は作らない。 */
  --m1: #1c2450;
  --m2: #26409a;
  --m3: #2f6fe0;
  --m4: #59a0ff;
  --m5: #b9e2ff;
  --pick:     #21d4c2;
  --pin:      #21d4c2;
  --st-done:  #3ecf79;
  --st-act:   #5b9cf2;
  --st-cancel:#e0a458;
  --st-etc:   #8a92a6;
}

/* 計器の切り替え。地図の左上に浮かべる。全画面でも押せる。 */
.rg-metric {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
}
.rg-metric .seg {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .35);
}
.seg-metric { width: 300px; }
.seg-metric .seg-btn { height: 36px; font-size: 12px; }

/* ---------- 枠（左バー + 地図） ---------- */

.rg-frame {
  display: grid;
  grid-template-columns: 440px minmax(0, 1fr);
  height: min(72vh, 720px);
  border: 1px solid var(--hairline);
  border-radius: 16px;
  overflow: hidden;
  background: #06070a;
}

/* 全画面。基本は縮小埋め込みで、押したときだけ画面いっぱいに切り替える。 */
.rg-frame.rg-full {
  position: fixed;
  inset: 0;
  z-index: 50;
  height: 100dvh;
  border-radius: 0;
  border: 0;
}
body.rg-noscroll { overflow: hidden; }

/* ---------- 左バー ---------- */

.rg-side {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 0;
  border-right: 1px solid var(--hairline);
  background: var(--bg);
}

.rg-shead {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--hairline);
  display: grid;
  gap: 10px;
}

.rg-place {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}
.rg-place-n { font-size: 18px; font-weight: 600; letter-spacing: -.01em; overflow-wrap: anywhere; }
.rg-place-c { font-size: 12px; color: var(--fg-3); font-variant-numeric: tabular-nums; }

.rg-back {
  height: 28px;
  padding: 0 10px;
  border: 1px solid var(--hairline);
  border-radius: 14px;
  background: transparent;
  color: var(--accent);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.rg-back:hover { background: var(--chip); }

.rg-shead input[type=search] {
  width: 100%;
  height: 36px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--bg-sub);
  color: var(--fg);
  font-size: 13px;
  font-family: inherit;
}
.rg-shead input[type=search]:focus { outline: 2px solid var(--focus); }

.rg-controls { display: flex; gap: 8px; }
.rg-controls select {
  flex: 1 1 0;
  min-width: 0;
  height: 34px;
  padding: 0 8px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: var(--bg-sub);
  color: var(--fg);
  font-size: 12px;
  font-family: inherit;
}

.rg-cur { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rg-curb {
  height: 26px;
  padding: 0 12px;
  border: 1px solid var(--hairline);
  border-radius: 13px;
  background: transparent;
  color: var(--fg-2);
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
}
.rg-curb.on { background: var(--fg); color: var(--bg); border-color: var(--fg); }
.rg-cur-note { flex-basis: 100%; font-size: 11px; color: var(--fg-3); }

.rg-summary { display: grid; gap: 2px; font-size: 12px; color: var(--fg-2); }

/* 一覧 */
.rg-plist {
  list-style: none;
  margin: 0;
  padding: 6px 8px;
  overflow-y: auto;
  flex: 1 1 0;
  min-height: 0;
  overscroll-behavior: contain;
}
.rg-pi {
  display: grid;
  grid-template-columns: 10px minmax(0, 1fr) max-content;
  gap: 2px 8px;
  align-items: baseline;
  padding: 9px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.rg-pi:hover, .rg-pi:focus-visible { background: var(--bg-sub); outline: none; }
.rg-pi.on { background: var(--chip); }
.rg-pi-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--st-etc);
  align-self: center;
}
.rg-pi-dot.st-Completed { background: var(--st-done); }
.rg-pi-dot.st-Active { background: var(--st-act); }
.rg-pi-dot.st-Cancelled { background: var(--st-cancel); }
.rg-pi-n { font-size: 13px; line-height: 1.45; overflow-wrap: anywhere; }
/* 原題。メタ行（Fund・分野・人）と見分けが付くよう、1行に省略して字面を変える。
   全文は title 属性で読める。 */
.rg-original {
  display: block;
  margin-top: 3px;
  color: var(--sd-fg2);
  font-size: 10.5px;
  font-weight: 400;
  font-style: italic;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.35;
}
.rg-pv-n .rg-original { margin-top: 5px; font-size: 11px; }
.rg-pi-a {
  font-size: 12px;
  color: var(--fg-2);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rg-pi-s {
  grid-column: 2 / -1;
  font-size: 11px;
  color: var(--fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.rg-person { display: grid; grid-template-columns: 30px minmax(0, 1fr) max-content; gap: 2px 8px; align-items: baseline; padding: 9px 10px; border-radius: 10px; cursor: pointer; }
.rg-person:hover, .rg-person:focus-visible { background: var(--bg-sub); outline: none; }
.rg-person-n { font-size: 13px; line-height: 1.45; font-weight: 600; overflow-wrap: anywhere; }
.rg-person .rg-pi-s { grid-column: 2 / -1; }
.rg-rank { color: var(--fg-3); font-size: 11px; font-variant-numeric: tabular-nums; text-align: right; }
.rg-all-ranking { margin: 4px 2px 8px; }
.rg-all-ranking-btn {
  width: 100%;
  min-height: 52px;
  padding: 9px 12px;
  border: 1px solid rgba(61, 123, 255, .30);
  border-radius: 10px;
  background: rgba(61, 123, 255, .08);
  color: var(--sd-fg, var(--fg));
  text-align: left;
  font-family: inherit;
  cursor: pointer;
}
.rg-all-ranking-btn:hover, .rg-all-ranking-btn:focus-visible {
  background: rgba(61, 123, 255, .16);
  outline: none;
}
.rg-all-ranking-n { display: block; font-size: 13px; font-weight: 700; }
.rg-all-ranking-s { display: block; margin-top: 3px; color: var(--sd-link, var(--accent)); font-size: 11px; }
.rg-ci-actions {
  grid-column: 2 / -1;
  display: flex;
  gap: 6px;
  margin-top: 5px;
}
.rg-ci-action {
  min-height: 28px;
  padding: 0 10px;
  border: 1px solid var(--sd-line, var(--hairline));
  border-radius: 8px;
  background: transparent;
  color: var(--sd-link, var(--accent));
  font: 11px inherit;
  cursor: pointer;
}
.rg-ci-action:hover, .rg-ci-action:focus-visible {
  background: var(--sd-card, var(--chip));
  outline: none;
}
.rg-person-note { margin-top: 3px; color: var(--fg-3); }

/* 数え方の断り書き。順位表の前に置き、読み違えを防ぐ。 */
.rg-caution {
  margin: 4px 10px 10px;
  padding: 9px 11px;
  border-left: 3px solid var(--pin);
  border-radius: 0 8px 8px 0;
  background: var(--sd-card);
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--sd-fg2);
  list-style: none;
}
.rg-caution strong { color: var(--sd-fg); font-weight: 600; }

.rg-pempty { margin: 16px; font-size: 13px; color: var(--fg-3); }
.rg-pmore {
  margin: 6px 14px 14px;
  height: 36px;
  border: 1px solid var(--hairline);
  border-radius: 10px;
  background: transparent;
  color: var(--accent);
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
}
.rg-pmore:hover { background: var(--chip); }

/* プロジェクト詳細 — 一覧を消さず、左バーの右に二枚目のパネルとして出す。
   地図はその右で生きたまま。Google マップの詳細カードと同じ文法。 */
.rg-pview {
  position: absolute;
  left: 100%;
  top: 0;
  bottom: 0;
  width: min(400px, 60vw);
  z-index: 5;
  background: var(--bg);
  border-right: 1px solid var(--hairline);
  box-shadow: 12px 0 32px rgba(0, 10, 60, .18);
  padding: 14px 18px 20px;
  overflow-y: auto;
  overscroll-behavior: contain;
  animation: rg-slidein 240ms cubic-bezier(.2,.7,.3,1);
}
@keyframes rg-slidein {
  from { transform: translateX(-14px); opacity: 0; }
  to   { transform: translateX(0);     opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .rg-pview { animation: none; }
}
.rg-pv-n { margin: 12px 0 4px; font-size: 17px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.rg-pv-sub { margin: 0 0 14px; font-size: 12px; color: var(--fg-3); }
.rg-pv-grid { display: grid; gap: 8px; }
.rg-pv-row {
  display: grid;
  grid-template-columns: 6em minmax(0, 1fr);
  gap: 12px;
  align-items: baseline;
  border-bottom: 1px solid var(--hairline);
  padding-bottom: 8px;
}
.rg-pv-k { font-size: 12px; color: var(--fg-2); }
.rg-pv-v { font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.rg-pview > .rg-pv-k { margin: 16px 0 6px; display: block; }
.rg-pv-whos { display: flex; flex-wrap: wrap; gap: 6px; }
.rg-pv-who {
  padding: 4px 10px;
  border: 1px solid var(--hairline);
  border-radius: 12px;
  font-size: 12px;
  background: var(--bg-sub);
}
.rg-pv-miss { margin: 16px 0 0; font-size: 12px; color: var(--fg-3); }
.rg-pv-tags { margin: 12px 0 0; }
.rg-pv-links { margin: 16px 0 0; display: grid; gap: 6px; font-size: 13px; }

/* ---------- 地図側 ---------- */

.rg-mappane {
  position: relative;
  min-width: 0;
  background:
    radial-gradient(120% 150% at 30% 12%, #0b0e15 0%, #07090f 55%, #05060a 100%);
  touch-action: none;
}
.rg-mappane svg {
  display: block;
  width: 100%;
  height: 100%;
  cursor: grab;
}
.rg-mappane svg:active { cursor: grabbing; }

#map { --k: 1; }

.rg-sh {
  fill: var(--land);
  stroke: var(--land-ln);
  stroke-width: calc(0.6px * var(--k));
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
  transition: fill 140ms linear;
}
.rg-sh[data-bin="1"] { fill: var(--m1); }
.rg-sh[data-bin="2"] { fill: var(--m2); }
.rg-sh[data-bin="3"] { fill: var(--m3); }
.rg-sh[data-bin="4"] { fill: var(--m4); }
.rg-sh[data-bin="5"] { fill: var(--m5); }

.rg-nodata { fill: var(--land); }

.rg-sh:not(.rg-nodata) { cursor: pointer; }
.rg-sh:not(.rg-nodata):hover {
  stroke: var(--pick);
  stroke-width: 1.8px;
  filter: drop-shadow(0 0 5px rgba(33, 212, 194, .5));
}
.rg-sh.on {
  stroke: var(--pick);
  stroke-width: 2.4px;
  filter: drop-shadow(0 0 7px rgba(33, 212, 194, .6));
}
/* クリックで乗るフォーカスの四角い枠は消す。キーボード操作のときだけ白ふちで示す。 */
.rg-sh:focus { outline: none; }
.rg-mappane svg:focus { outline: none; }
.rg-sh:focus-visible { outline: none; stroke: var(--pick); stroke-width: 2.4px; }

.rg-dot {
  r: calc(3px * var(--k));
  fill: none;
  stroke: var(--pin);
  stroke-width: calc(1.2px * var(--k));
  pointer-events: none;
}

.rg-zoom {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 6px;
}
.rg-zoom button {
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  border: 0;
  border-radius: 8px;
  background: rgba(18, 22, 30, .92);
  color: #f2f4f8;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 12px rgba(0, 0, 0, .35);
}
.rg-zoom button:hover { background: rgba(30, 35, 46, .96); }

.rg-jump {
  position: absolute;
  left: 10px;
  bottom: 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: calc(100% - 20px);
}
.rg-jb {
  height: 30px;
  padding: 0 12px;
  border: 0;
  border-radius: 15px;
  background: rgba(18, 22, 30, .92);
  color: #f2f4f8;
  font-size: 12px;
  font-family: inherit;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .45);
}
.rg-jb:hover { background: rgba(30, 35, 46, .98); }

.rg-tip {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  display: grid;
  grid-template-columns: max-content max-content;
  gap: 2px 14px;
  max-width: 22em;
  padding: 10px 12px;
  border: 0;
  border-radius: 10px;
  background: rgba(16, 19, 26, .96);
  color: #f2f4f8;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5), 0 8px 24px rgba(0, 0, 0, .35);
  font-size: 12px;
  line-height: 1.5;
}
.rg-tip .rg-tk { color: #a7afc2; }
.rg-tn2 { grid-column: 1 / -1; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
.rg-tk { color: #a7afc2; }
.rg-tv2 { text-align: right; font-variant-numeric: tabular-nums; }
.rg-tf { grid-column: 1 / -1; margin-top: 4px; color: #8a92a6; overflow-wrap: anywhere; }

/* 配分額の円グラフ。円の面積＝申請額、色の付いた扇＝そのうち配分済みの割合。
   操作は下の国に通す。 */
.rg-bub-base {
  fill: rgba(255, 255, 255, .12);
  stroke: rgba(255, 255, 255, .55);
  stroke-width: 1;
  pointer-events: none;
}
.rg-bub-fill {
  fill: rgba(33, 212, 194, .60);
  stroke: rgba(255, 255, 255, .55);
  stroke-width: .6;
  pointer-events: none;
}

.rg-swc {
  display: inline-block;
  width: 14px;
  height: 14px;
  margin-right: 10px;
  vertical-align: -2px;
  border-radius: 50%;
  background: rgba(33, 212, 194, .60);
  border: 1px solid rgba(33, 212, 194, .9);
}
.rg-swc-base {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .4);
}

/* 国ごとの数字ピン。寄ったときだけ出る。押すとその国を選ぶ。 */
.rg-kb { cursor: pointer; }
.rg-kb circle {
  fill: rgba(255, 255, 255, .95);
  stroke: var(--pin);
  stroke-width: 1.5;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .45));
}
.rg-kb:hover circle { fill: #eafcf9; }
.rg-kb .rg-kb-count {
  fill: #0a3a34;
  font-size: 10px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: inherit;
  pointer-events: none;
}

/* 大陸のカウントピン。世界表示のときだけ出す。押すとその大陸へ寄る。 */
.rg-cb { cursor: pointer; }
.rg-cb circle {
  fill: var(--pin);
  stroke: #ffffff;
  stroke-width: 1.5;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, .45));
}
.rg-cb:hover circle { fill: #4ce0d1; }
.rg-cb .rg-cb-count {
  fill: #ffffff;
  font-size: 13px;
  font-weight: 700;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: inherit;
  pointer-events: none;
}
.rg-cb .rg-cb-namebg { fill: rgba(6, 8, 12, .85); }
.rg-cb .rg-cb-name {
  fill: #ffffff;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: .08em;
  text-anchor: middle;
  dominant-baseline: central;
  font-family: inherit;
  pointer-events: none;
}

/* ---------- 左バーの配色 ----------
   枠の中はテーマに追従させず、海と同じ紺の世界で統一する。
   明るいページに埋まっていても、ここだけ一枚の道具として完結させる。 */

.rg-frame {
  --sd-fg:   #f2f4f8;
  --sd-fg2:  #8a92a6;
  --sd-fg3:  #565f73;
  --sd-line: rgba(255, 255, 255, .085);
  --sd-card: rgba(255, 255, 255, .028);
  --sd-card2:rgba(255, 255, 255, .06);
  --sd-link: #3d7bff;
  border-color: rgba(255, 255, 255, .16);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .35), 0 16px 48px rgba(0, 0, 0, .45);
}

.rg-side {
  background: linear-gradient(180deg, #0a0d13 0%, #07090f 60%, #06070a 100%);
  border-right: 1px solid var(--sd-line);
  color: var(--sd-fg);
}
.rg-shead { border-bottom: 1px solid var(--sd-line); }
.rg-place-n { color: var(--sd-fg); }
.rg-place-c { color: var(--sd-fg3); }

.rg-back {
  border-color: var(--sd-line);
  color: var(--sd-link);
  background: transparent;
}
.rg-back:hover { background: var(--sd-card); }

.rg-shead input[type=search] {
  border: 1px solid var(--sd-line);
  background: var(--sd-card);
  color: var(--sd-fg);
}
.rg-shead input[type=search]::placeholder { color: var(--sd-fg3); }
.rg-controls select {
  border: 1px solid var(--sd-line);
  background: var(--sd-card);
  color: var(--sd-fg);
}
.rg-controls select option { background: #0b0e15; color: var(--sd-fg); }

.rg-curb { border-color: var(--sd-line); color: var(--sd-fg2); }
.rg-curb.on { background: #3d7bff; color: #ffffff; border-color: #3d7bff; }
.rg-cur-note { color: var(--sd-fg3); }
.rg-summary { color: var(--sd-fg2); }

.rg-pi:hover, .rg-pi:focus-visible { background: var(--sd-card); }
.rg-pi.on { background: var(--sd-card2); }
.rg-pi-n { color: var(--sd-fg); }
.rg-pi-a { color: var(--sd-fg2); }
.rg-pi-s { color: var(--sd-fg3); }
.rg-person:hover, .rg-person:focus-visible { background: var(--sd-card); }
.rg-person-n { color: var(--sd-fg); }
.rg-person-note { color: var(--sd-fg3); }
.rg-pempty { color: var(--sd-fg3); }

/* ---------- 状態フラグと完了報告 ---------- */
/* 旗は色で優劣を作らない。線種と字形で区別し、数字を添える。 */

.rg-flags { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 0; }
.rg-flag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid var(--sd-line);
  border-radius: 12px;
  background: var(--sd-card);
  font-size: 11px;
  color: var(--sd-fg2);
  white-space: nowrap;
  cursor: help;
}
.rg-flag-m { font-size: 12px; color: var(--pin); line-height: 1; }
.rg-pv-facts {
  margin: 8px 0 0;
  font-size: 12px;
  color: var(--sd-fg2);
  font-variant-numeric: tabular-nums;
}

/* 一覧の行に添える印。名前は出さず絵柄だけ。 */
.rg-mini {
  display: inline-block;
  margin-left: 5px;
  font-size: 10px;
  color: var(--sd-fg3);
  cursor: help;
}
.rg-mini-v { color: var(--pin); }

/* 完了報告の動画。枠は 16:9 で固定する。 */
.rg-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  margin: 8px 0 12px;
  border-radius: 10px;
  overflow: hidden;
  background: #000;
  border: 1px solid var(--sd-line);
}
.rg-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ---------- 地球儀 ---------- */
/* 同じ国境データを正射図法で描く。裏側は描かない。見えないものを想像で埋めない。 */

.rg-ocean {
  fill: #080b11;
  stroke: rgba(255, 255, 255, .16);
  stroke-width: 1;
}
.rg-is-globe .rg-sh { stroke-width: .5px; }
.rg-is-globe svg { cursor: grab; }
.rg-is-globe svg:active { cursor: grabbing; }

#g-toggle { font-weight: 600; }
#g-toggle[aria-pressed="true"] { background: #3d7bff; color: #fff; }

/* 経緯線。球であることを示すためだけの線。データではないので、うんと薄く。 */
.rg-grid {
  fill: none;
  stroke: rgba(150, 180, 230, .18);
  stroke-width: .6;
  pointer-events: none;
}
.rg-equator {
  fill: none;
  stroke: rgba(150, 180, 230, .32);
  stroke-width: .9;
  pointer-events: none;
}

/* 陰影。球の左上から光が当たっているように見せる。国の上に薄くかぶせる。 */
.rg-shade { fill: url(#globeShade); pointer-events: none; }

/* 宇宙。地球儀のときだけ、枠の中が夜になる。 */
.rg-is-globe {
  background:
    radial-gradient(120% 120% at 50% 40%, #16213e 0%, #0d1425 55%, #070b16 100%);
}
.rg-star { fill: #ffffff; pointer-events: none; }
.rg-halo { fill: url(#globeHalo); pointer-events: none; }

/* 夜空の上では、球の海を夜の色に沈め、線をわずかに明るくする。 */
.rg-is-globe .rg-ocean { fill: #0d1425; stroke: rgba(160, 200, 230, .35); }
.rg-is-globe .rg-grid { stroke: rgba(150, 180, 230, .16); }
.rg-is-globe .rg-equator { stroke: rgba(150, 180, 230, .30); }

/* 操作の帯は夜空でも読めるように、影を濃くする。 */
.rg-is-globe .rg-zoom button,
.rg-is-globe .rg-jb {
  box-shadow: 0 1px 3px rgba(0, 0, 0, .5), 0 4px 14px rgba(0, 0, 0, .35);
}

/* ---------- 約束と報告 ---------- */
/* 提案で何をやろうとしていたのかと、完了報告で何が報告されたのかを、そろえて並べる。
   優劣を色で作らない。左右を同じ重さで置き、読む人が自分で比べる。 */

.rg-ev-note {
  margin: 0 0 10px;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--sd-fg2);
}
.rg-ev-note strong { color: var(--sd-fg); font-weight: 600; }
.rg-ev-load { margin: 8px 0; font-size: 12px; color: var(--sd-fg3); }

.rg-evs { list-style: none; margin: 0; padding: 0; }
.rg-ev {
  margin: 0 0 10px;
  padding: 10px 12px;
  border: 1px solid var(--sd-line);
  border-radius: 10px;
  background: var(--sd-card);
}
.rg-ev-h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 10px;
  margin-bottom: 8px;
}
.rg-ev-no {
  font-size: 12px;
  font-weight: 600;
  color: var(--sd-fg);
  font-variant-numeric: tabular-nums;
}
.rg-ev-marks { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px; }
.rg-ev-kind {
  padding: 1px 7px;
  border: 1px solid var(--sd-line);
  border-radius: 9px;
  background: var(--sd-card2);
  font-size: 10px;
  color: var(--sd-fg2);
  white-space: nowrap;
}
.rg-ev-links { font-size: 10px; color: var(--sd-fg3); white-space: nowrap; }

/* 左右にそろえる。狭いときは縦に積む。 */
.rg-ev-pair {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
}
.rg-ev-col { min-width: 0; }
.rg-ev-k {
  display: block;
  font-size: 10.5px;
  font-weight: 600;
  color: var(--sd-fg2);
  margin-bottom: 3px;
}
.rg-ev-k2 { margin-top: 8px; }
.rg-ev-t {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--sd-fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.rg-ev-cut {
  margin: 8px 0 0;
  font-size: 10.5px;
  color: var(--sd-fg3);
}

/* 原文。訳の下にたたんで置く。訳が原文を置き換えることはない。 */
.rg-ev-src { margin-top: 5px; }
.rg-ev-src summary {
  font-size: 10.5px;
  color: var(--sd-fg3);
  cursor: pointer;
  list-style: none;
}
.rg-ev-src summary::-webkit-details-marker { display: none; }
.rg-ev-src summary::before { content: "▸ "; }
.rg-ev-src[open] summary::before { content: "▾ "; }
.rg-ev-src summary:hover { color: var(--sd-fg2); }
.rg-ev-en {
  margin-top: 4px;
  padding-left: 8px;
  border-left: 2px solid var(--sd-line);
  color: var(--sd-fg2);
  font-size: 11px;
}

/* ---------- 質問する ---------- */
/* こちらからは何も指示しない。何を聞くかは読む人が決める。
   答えは記録ではないので、記録の欄と見た目を分ける。 */

.rg-ask { margin-top: 10px; }
.rg-ask > summary {
  font-size: 11px;
  color: var(--sd-link);
  cursor: pointer;
  list-style: none;
  padding: 3px 0;
}
.rg-ask > summary::-webkit-details-marker { display: none; }
.rg-ask > summary::before { content: "▸ "; }
.rg-ask[open] > summary::before { content: "▾ "; }

.rg-ask-body {
  margin-top: 8px;
  padding: 10px 11px;
  border: 1px dashed var(--sd-line);
  border-radius: 9px;
}
.rg-ask-note {
  margin: 0 0 8px;
  font-size: 10.5px;
  line-height: 1.7;
  color: var(--sd-fg2);
}
.rg-ask-note strong { color: var(--sd-fg); font-weight: 600; }
.rg-ask-q {
  width: 100%;
  padding: 7px 9px;
  border: 1px solid var(--sd-line);
  border-radius: 7px;
  background: var(--sd-card);
  color: var(--sd-fg);
  font-family: inherit;
  font-size: 12px;
  resize: vertical;
}
.rg-ask-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-top: 7px;
}
.rg-ask-row button,
.rg-ask-key button {
  height: 28px;
  padding: 0 12px;
  border: 1px solid var(--sd-line);
  border-radius: 14px;
  background: transparent;
  color: var(--sd-fg);
  font-family: inherit;
  font-size: 11px;
  cursor: pointer;
}
.rg-ask-send { background: #3d7bff !important; color: #fff !important; border-color: #3d7bff !important; }
.rg-ask-row button:disabled { opacity: .5; cursor: default; }
.rg-ask-who { font-size: 10.5px; color: var(--sd-fg3); }
.rg-ask-forget { margin-left: auto; color: var(--sd-fg3) !important; }

.rg-ask-key { margin-top: 4px; }
.rg-ask-p, .rg-ask-i {
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--sd-line);
  border-radius: 7px;
  background: var(--sd-card);
  color: var(--sd-fg);
  font-family: inherit;
  font-size: 11px;
}
.rg-ask-i { flex: 1 1 140px; min-width: 0; }
.rg-ask-hint { margin: 6px 0 0; font-size: 10.5px; color: var(--sd-fg3); }
.rg-ask-hint a { color: var(--sd-link); }

.rg-ask-wait, .rg-ask-err { margin: 8px 0 0; font-size: 11px; color: var(--sd-fg3); }
.rg-ask-err { color: #ff6f59; }

/* 答え。記録ではないので、点線で囲って区別する。 */
.rg-ask-a {
  margin-top: 8px;
  padding: 9px 10px;
  border: 1px dotted var(--sd-line);
  border-radius: 8px;
  background: var(--sd-card);
}
.rg-ask-t {
  margin: 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--sd-fg);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

@media (max-width: 900px) {
  .rg-ev-pair { grid-template-columns: 1fr; }
}

/* 世界ビューの国の行 */
.rg-ci {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) max-content;
  gap: 2px 8px;
  align-items: baseline;
  padding: 10px 10px;
  border-radius: 10px;
  cursor: pointer;
}
.rg-ci:hover, .rg-ci:focus-visible { background: var(--sd-card); outline: none; }
.rg-ci-n { font-size: 14px; font-weight: 600; color: var(--sd-fg); overflow-wrap: anywhere; }
.rg-ci .rg-pi-s { grid-column: 2 / -1; }

/* 国名の表示切り替え */
.rg-lang { margin-left: auto; display: inline-flex; gap: 4px; }
.rg-langb {
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--sd-line);
  border-radius: 12px;
  background: transparent;
  color: var(--sd-fg2);
  font-size: 11px;
  font-family: inherit;
  cursor: pointer;
}
.rg-langb.on { background: var(--sd-fg); color: #06070a; border-color: var(--sd-fg); }
.rg-pmore { border-color: var(--sd-line); color: var(--sd-link); }
.rg-pmore:hover { background: var(--sd-card); }

.rg-pview {
  background: linear-gradient(180deg, #0a0d13 0%, #07090f 70%, #06070a 100%);
  border-right: 1px solid var(--sd-line);
  color: var(--sd-fg);
}
.rg-pview a { color: var(--sd-link); }
.rg-pv-sub, .rg-pv-k { color: var(--sd-fg2); }
.rg-pv-row { border-bottom-color: var(--sd-line); }
.rg-pv-miss, .rg-pview .tag { color: var(--sd-fg3); }
.rg-pv-who { border-color: var(--sd-line); background: var(--sd-card); color: var(--sd-fg); }

/* ---------- 凡例・注記 ---------- */

.rg-sw {
  display: inline-block;
  width: 22px;
  height: 12px;
  margin-right: 10px;
  vertical-align: -1px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 3px;
  background: var(--m1);
}
.rg-sw[data-bin="2"] { background: var(--m2); }
.rg-sw[data-bin="3"] { background: var(--m3); }
.rg-sw[data-bin="4"] { background: var(--m4); }
.rg-sw[data-bin="5"] { background: var(--m5); }
.rg-sw-none { background: var(--land); }

/* 額は二本立て。関わったすべて（共著を含む）と、単独提案だけ。 */
/* 額は二段。主は桁を丸めて比べやすく、副は正確な値。 */
.rg-pi-a2 { display: grid; justify-items: end; gap: 1px; }
.rg-amt-main {
  font-size: 13px;
  font-weight: 600;
  color: var(--sd-fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.rg-amt-sub {
  font-size: 10px;
  color: var(--sd-fg3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  cursor: help;
}

/* 並べ替えの基準を切り替える。 */
.rg-solo-sw { display: flex; gap: 4px; margin-top: 7px; }
.rg-solo-b {
  height: 24px;
  padding: 0 10px;
  border: 1px solid var(--sd-line);
  border-radius: 12px;
  background: transparent;
  color: var(--sd-fg2);
  font-family: inherit;
  font-size: 10.5px;
  cursor: pointer;
}
.rg-solo-b.on { background: #3d7bff; color: #fff; border-color: #3d7bff; }

/* 資金が重なっている印。共同提案の額は人物別に各人へ計上される。 */
.rg-dup {
  margin-left: 4px;
  font-size: 10px;
  color: var(--pin);
  cursor: help;
  font-variant-numeric: tabular-nums;
}
.rg-dup-note {
  display: block;
  margin-top: 2px;
  font-size: 10px;
  font-weight: 400;
  color: var(--sd-fg3);
}

/* ---------- Fund の時系列 ---------- */
/* 6年ぶんを同じ物差しに並べる。段階は形で分け、色相で優劣を作らない。
   手動記録で補った日は薄くして、公式の日と見分けられるようにする。 */

.tl-wrap { margin: 8px 0 0; }

.tl-scale {
  position: relative;
  height: 18px;
  margin-left: 44px;
  margin-right: 190px;
  border-bottom: 1px solid var(--hairline);
}
.tl-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 10px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
}

.tl-rows { list-style: none; margin: 0; padding: 0; }
.tl-row {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 190px;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  border-bottom: 1px solid var(--hairline);
}
.tl-row.tl-active { background: var(--chip); }
.tl-name {
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--fg);
}

.tl-track { position: relative; height: 18px; }

/* 期間は帯。段階ごとに高さを変えて重なりを読めるようにする。 */
.tl-span {
  position: absolute;
  top: 7px;
  height: 4px;
  border-radius: 2px;
  background: var(--fg-2);
}
.tl-span.tl-submit { background: var(--fg-3); }
.tl-span.tl-review { background: var(--fg-2); top: 5px; height: 8px; opacity: .35; }
.tl-span.tl-vote { background: var(--fg); }

/* 時点は印。 */
.tl-dot {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  font-size: 11px;
  line-height: 18px;
  color: var(--fg);
}
.tl-dot.tl-onboard { color: var(--fg-2); }

/* 手動記録で補った日は薄く。公式の日と混ぜない。 */
.tl-manual { opacity: .45; }

.tl-nums {
  display: grid;
  gap: 1px;
  justify-items: end;
  text-align: right;
}
.tl-amt {
  font-size: 11px;
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.tl-cnt {
  font-size: 10px;
  color: var(--fg-3);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tl-key {
  display: inline-block;
  width: 16px;
  text-align: center;
  margin-right: 8px;
  color: var(--fg);
}
.tl-manual-key {
  width: 22px;
  height: 4px;
  border-radius: 2px;
  background: var(--fg-2);
  opacity: .45;
  vertical-align: 3px;
}

@media (max-width: 720px) {
  .tl-scale { margin-right: 0; }
  .tl-row { grid-template-columns: 34px minmax(0, 1fr); }
  .tl-nums { grid-column: 1 / -1; justify-items: start; text-align: left; }
}

/* 価値の差。上がったか下がったかは線種で分ける。色相で善悪を作らない。 */
.rg-val-d { font-weight: 600; font-variant-numeric: tabular-nums; }
.rg-val-d[data-up="true"] { color: var(--fg); }
.rg-val-d[data-up="false"] { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; }
.rg-val-total th, .rg-val-total td {
  border-top: 2px solid var(--hairline);
  font-weight: 600;
}

/* 事前スコア。中央値が並ぶことに意味があるので、その列だけ強める。 */
.rg-score-mid { color: var(--fg); font-weight: 600; }

.rg-score-note {
  display: grid;
  gap: 6px;
  margin: 14px 0 0;
  max-width: 62em;
  font-size: 13px;
  line-height: 1.8;
  color: var(--fg-2);
}
.rg-score-note strong { color: var(--fg); font-weight: 600; }
.rg-score-caveat {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--hairline);
  color: var(--fg-3);
  font-size: 12px;
}

.rg-offmap {
  margin: 16px 0 0;
  max-width: 60em;
  font-size: 13px;
  line-height: 1.8;
  color: var(--fg-2);
  overflow-wrap: anywhere;
}

/* ---------- 数が合わない ---------- */

td.rg-big {
  font-size: 22px;
  font-weight: 600;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 4行しかない表で見出しを固定すると、先頭行が隠れる。ここでは固定しない。 */
#gap th { position: static; }

.rg-defects { list-style: none; margin: 0; padding: 0; }
.rg-defect {
  display: grid;
  gap: 4px;
  padding: 12px 0;
  border-bottom: 1px solid var(--hairline);
}
.rg-dh { font-size: 14px; font-weight: 600; }
.rg-dd { font-size: 13px; line-height: 1.7; color: var(--fg-2); overflow-wrap: anywhere; }

td.rg-marks { white-space: normal; min-width: 12em; }
td.rg-marks .badge { margin: 2px 6px 2px 0; }

/* ---------- responsive ---------- */

@media (max-width: 900px) {
  /* 狭い画面では二枚目のパネルを出す場所が無いので、一覧の上に重ねる。 */
  .rg-pview { left: 0; width: auto; right: 0; border-right: 0; box-shadow: none; animation: none; }

  .rg-frame {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 46% minmax(0, 1fr);
    height: 82vh;
  }
  .rg-mappane { order: -1; border-bottom: 1px solid var(--hairline); }
  .rg-side { border-right: 0; }
  .rg-jump { display: none; }
}

/* ==========================================================================
   青いネオンと、押せることの明示
   海を黒で終わらせず、青の残光と方眼を敷く。量の多い国は発光する。
   押せるものには縁と手応えを与える。色相は増やさない（青一色＋選択のティール）。
   ========================================================================== */

/* ---------- 海 ---------- */

.rg-mappane {
  background:
    radial-gradient(120% 150% at 30% 12%, #0d1524 0%, #080d17 55%, #05070d 100%);
}
.rg-mappane::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(58% 58% at 50% 46%, rgba(61,123,255,.13), transparent 72%),
    repeating-linear-gradient(0deg,  rgba(126,178,255,.055) 0 1px, transparent 1px 52px),
    repeating-linear-gradient(90deg, rgba(126,178,255,.055) 0 1px, transparent 1px 52px);
  mask-image: radial-gradient(105% 105% at 50% 50%, #000 55%, transparent 100%);
}
.rg-mappane::after {                       /* 縁を落として画面を締める */
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(120% 120% at 50% 50%, transparent 58%, rgba(3,5,9,.62) 100%);
}
.rg-mappane svg { position: relative; z-index: 1; }

/* ---------- 大地 ---------- */

.rg-sh { transition: fill 160ms linear, stroke 160ms linear, filter 160ms linear; }
.rg-sh[data-bin="3"] { filter: drop-shadow(0 0 3px rgba(47,111,224,.45)); }
.rg-sh[data-bin="4"] { filter: drop-shadow(0 0 6px rgba(90,149,255,.60)); }
.rg-sh[data-bin="5"] { filter: drop-shadow(0 0 11px rgba(169,214,255,.72)); }

.rg-sh:not(.rg-nodata):hover {
  stroke: #7fe9dd;
  stroke-width: 1.8px;
  filter: drop-shadow(0 0 9px rgba(33,212,194,.75));
}
.rg-sh.on {
  stroke: #7fe9dd;
  stroke-width: 2.4px;
  filter: drop-shadow(0 0 14px rgba(33,212,194,.9));
}

/* 経緯線を少しだけ立たせる */
.rg-grid { stroke: rgba(126, 178, 255, .26); }

/* ---------- ピンとバッジ ---------- */

.rg-dot { filter: drop-shadow(0 0 6px rgba(33,212,194,.85)); }

.rg-cb circle { filter: drop-shadow(0 0 9px rgba(33,212,194,.6)); }
.rg-cb:hover circle { filter: drop-shadow(0 0 16px rgba(33,212,194,.95)); }

.rg-bub-fill { filter: drop-shadow(0 0 7px rgba(90,149,255,.6)); }

/* ---------- 左バー。少し持ち上げて、押せるものを押せると見せる ---------- */

.rg-frame {
  --sd-fg:   #eef2f8;
  --sd-fg2:  #a3adc0;
  --sd-fg3:  #6f7a8d;
  --sd-line: rgba(255,255,255,.12);
  --sd-card: rgba(255,255,255,.045);
  --sd-card2:rgba(255,255,255,.10);
  --sd-link: #6ea6ff;
  border-color: rgba(126,178,255,.18);
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.95);
}
.rg-side {
  background: linear-gradient(180deg, #0d1220 0%, #0a0e19 58%, #080b13 100%);
}

/* 入力とセレクト。面と縁を与え、触ると青が灯る。 */
.rg-shead input[type=search],
.rg-controls select {
  background: rgba(255,255,255,.055);
  border: 1px solid rgba(255,255,255,.14);
  color: var(--sd-fg);
  transition: border-color 160ms ease, background 160ms ease, box-shadow 160ms ease;
}
.rg-shead input[type=search]:hover,
.rg-controls select:hover { border-color: rgba(126,178,255,.45); background: rgba(255,255,255,.08); }
.rg-shead input[type=search]:focus,
.rg-controls select:focus {
  outline: none;
  border-color: #3d7bff;
  background: rgba(61,123,255,.10);
  box-shadow: 0 0 0 3px rgba(61,123,255,.22);
}
.rg-controls select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 26px;
  background-image: linear-gradient(45deg, transparent 50%, #8fb4ee 50%),
                    linear-gradient(135deg, #8fb4ee 50%, transparent 50%);
  background-position: calc(100% - 14px) 15px, calc(100% - 9px) 15px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
}
.rg-controls select:hover, .rg-controls select:focus { background-repeat: no-repeat; }

/* ボタン群。縁で押せることを示し、当たると青が回り込む。 */
.rg-back, .rg-ci-action, .rg-jb, .rg-curb, .rg-langb {
  border: 1px solid rgba(255,255,255,.14);
  transition: border-color 160ms ease, background 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.rg-back:hover, .rg-ci-action:hover, .rg-jb:hover, .rg-curb:hover, .rg-langb:hover,
.rg-back:focus-visible, .rg-ci-action:focus-visible, .rg-jb:focus-visible, .rg-curb:focus-visible {
  border-color: rgba(126,178,255,.62);
  background: rgba(61,123,255,.14);
  color: #eaf2ff;
  box-shadow: 0 0 14px -2px rgba(61,123,255,.5);
}
.rg-langb.on, .rg-curb.on {
  background: #3d7bff;
  border-color: #3d7bff;
  color: #fff;
  box-shadow: 0 0 16px -3px rgba(61,123,255,.85);
}

/* 一覧の行。押せる行だとひと目で分かるように、当たると左に光の線が立つ。 */
.rg-pi, .rg-person {
  position: relative;
  border-radius: 10px;
  transition: background 160ms ease, box-shadow 160ms ease;
}
.rg-pi::before, .rg-person::before {
  content: "";
  position: absolute;
  left: 0; top: 8px; bottom: 8px;
  width: 2px;
  border-radius: 2px;
  background: #3d7bff;
  opacity: 0;
  transition: opacity 160ms ease;
}
.rg-pi:hover, .rg-person:hover,
.rg-pi:focus-visible, .rg-person:focus-visible {
  background: rgba(126,178,255,.09);
  box-shadow: inset 0 0 0 1px rgba(126,178,255,.18);
}
.rg-pi:hover::before, .rg-person:hover::before,
.rg-pi:focus-visible::before, .rg-person:focus-visible::before { opacity: 1; }
.rg-pi.on { background: rgba(61,123,255,.16); box-shadow: inset 0 0 0 1px rgba(61,123,255,.4); }
.rg-pi.on::before { opacity: 1; }

/* 計器の切り替えと拡大縮小も同じ手触りに */
.rg-metric .seg:hover { color: #eaf2ff; }
.rg-zoom button:hover, .rg-zoom button:focus-visible {
  border-color: rgba(126,178,255,.62);
  background: rgba(61,123,255,.14);
  box-shadow: 0 0 14px -2px rgba(61,123,255,.5);
}

/* 凡例の見本も発光させ、地図と同じ読み方にする */
.rg-sw[data-bin="4"] { box-shadow: 0 0 8px rgba(90,149,255,.55); }
.rg-sw[data-bin="5"] { box-shadow: 0 0 12px rgba(169,214,255,.65); }

@media (prefers-reduced-motion: reduce) {
  .rg-sh, .rg-pi, .rg-person, .rg-back, .rg-ci-action, .rg-jb, .rg-curb, .rg-langb { transition: none; }
}

/* ---------- スクロールバー ---------- */
/* 白い帯が地図の暗さから浮くので、面と同じ世界に沈める。 */

.rg-frame, .rg-side, .rg-plist, .rg-pview, .rg-mappane {
  scrollbar-width: thin;
  scrollbar-color: rgba(126,178,255,.28) transparent;
}
.rg-frame ::-webkit-scrollbar,
.rg-frame::-webkit-scrollbar { width: 10px; height: 10px; }
.rg-frame ::-webkit-scrollbar-track,
.rg-frame::-webkit-scrollbar-track { background: transparent; }
.rg-frame ::-webkit-scrollbar-thumb,
.rg-frame::-webkit-scrollbar-thumb {
  background: rgba(126,178,255,.22);
  border: 3px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}
.rg-frame ::-webkit-scrollbar-thumb:hover,
.rg-frame::-webkit-scrollbar-thumb:hover { background: rgba(126,178,255,.42); background-clip: padding-box; }
.rg-frame ::-webkit-scrollbar-corner,
.rg-frame::-webkit-scrollbar-corner { background: transparent; }

/* ---------- 開いた瞬間 ---------- */
/* 地図は一度に出さない。海が沈み、光が横切り、大地が量の順に立ち上がる。
   データの多い国ほど遅れて、強く灯る。順番そのものが凡例になる。 */

@keyframes rg-land-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes rg-sweep {
  from { background-position: -120% 0, 0 0; }
  to   { background-position:  220% 0, 0 0; }
}
@keyframes rg-breathe {
  0%, 100% { filter: drop-shadow(0 0 11px rgba(169,214,255,.62)); }
  50%      { filter: drop-shadow(0 0 18px rgba(169,214,255,.95)); }
}

.rg-sh { animation: rg-land-in 700ms cubic-bezier(.16,1,.3,1) both; }
.rg-sh[data-bin="1"] { animation-delay: 80ms; }
.rg-sh[data-bin="2"] { animation-delay: 200ms; }
.rg-sh[data-bin="3"] { animation-delay: 320ms; }
.rg-sh[data-bin="4"] { animation-delay: 440ms; }
.rg-sh[data-bin="5"] {
  animation: rg-land-in 700ms cubic-bezier(.16,1,.3,1) 560ms both,
             rg-breathe 6s ease-in-out 1.3s infinite;
}

/* 光が一度だけ横切る。要素は足さず、縁を落とすレイヤーに重ねて走らせる。 */
.rg-mappane::after {
  background:
    linear-gradient(100deg,
      transparent 0%, rgba(126,178,255,.10) 8%,
      rgba(169,214,255,.22) 12%, rgba(126,178,255,.10) 16%, transparent 24%)
      no-repeat,
    radial-gradient(120% 120% at 50% 50%, transparent 58%, rgba(3,5,9,.62) 100%);
  background-size: 300% 100%, 100% 100%;
  background-position: -120% 0, 0 0;
  animation: rg-sweep 1700ms cubic-bezier(.4,0,.2,1) 150ms both;
}

.rg-cb { animation: rg-land-in 600ms cubic-bezier(.16,1,.3,1) 780ms both; }
.rg-dot { animation: rg-land-in 600ms cubic-bezier(.16,1,.3,1) 700ms both; }

@media (prefers-reduced-motion: reduce) {
  .rg-sh, .rg-cb, .rg-dot { animation: none; }
  .rg-mappane::after { animation: none; background-position: -120% 0, 0 0; }
}

/* ---------- バッジ ---------- */
/* 輪は閉じる。欠けた輪は「読み込み中」の記号になり、安く見える。
   代わりに光のほうを外周に回す。輪は静かなまま、明かりだけが巡る。
   要素を足せないので、drop-shadow の位置を円に沿って動かして光源にする。 */

/* 回すのをやめ、穏やかに息をするだけにする。
   位置を動かさないので明るさのむらが出ない。動きは足すより引くほうが静かになる。 */
@keyframes rg-lamp {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(150,205,255,.42)) drop-shadow(0 0 13px rgba(61,123,255,.20)); }
  50%      { filter: drop-shadow(0 0 8px rgba(170,220,255,.78)) drop-shadow(0 0 24px rgba(61,123,255,.38)); }
}
@keyframes rg-lamp-sm {
  0%, 100% { filter: drop-shadow(0 0 3px rgba(150,205,255,.40)) drop-shadow(0 0 9px rgba(61,123,255,.20)); }
  50%      { filter: drop-shadow(0 0 6px rgba(170,220,255,.72)) drop-shadow(0 0 17px rgba(61,123,255,.34)); }
}

.rg-cb circle,
.rg-kb circle {
  fill: rgba(9, 20, 41, .88);
  stroke: rgba(186, 222, 255, .62);
  stroke-dasharray: none;
  transition: fill 260ms ease, stroke 260ms ease;
}
.rg-cb circle { stroke-width: 1.25; animation: rg-lamp 5.5s ease-in-out infinite; }
.rg-kb circle { stroke-width: 1;    animation: rg-lamp-sm 5s ease-in-out infinite; }

/* 同じ位相で回ると機械じみる。少しずつずらす。 */
.rg-cb:nth-of-type(2n) circle, .rg-kb:nth-of-type(2n) circle { animation-delay: -1.4s; }
.rg-cb:nth-of-type(3n) circle, .rg-kb:nth-of-type(3n) circle { animation-delay: -2.8s; }
.rg-cb:nth-of-type(5n) circle, .rg-kb:nth-of-type(5n) circle { animation-delay: -4.2s; }
.rg-cb:nth-of-type(7n) circle, .rg-kb:nth-of-type(7n) circle { animation-delay: -5.6s; }

.rg-cb:hover circle, .rg-kb:hover circle {
  fill: rgba(21, 51, 98, .94);
  stroke: rgba(255, 255, 255, .92);
  animation-duration: 1.8s;
}

.rg-cb .rg-cb-count,
.rg-kb .rg-kb-count {
  fill: #f2f8ff;
  font-weight: 600;
  letter-spacing: .01em;
  paint-order: stroke;
  stroke: rgba(6, 12, 24, .6);
  stroke-width: 1.6px;
  stroke-linejoin: round;
}
.rg-cb .rg-cb-count { font-size: 12.5px; }
.rg-kb .rg-kb-count { font-size: 10px; }
.rg-cb:hover .rg-cb-count, .rg-kb:hover .rg-kb-count { fill: #ffffff; }

.rg-cb .rg-cb-namebg { fill: rgba(5, 9, 17, .66); }
.rg-cb .rg-cb-name {
  fill: #a8c0dc;
  font-size: 8.5px;
  letter-spacing: .18em;
}
.rg-cb:hover .rg-cb-name { fill: #eaf5ff; }

@media (prefers-reduced-motion: reduce) {
  .rg-cb circle, .rg-kb circle {
    animation: none;
    filter: drop-shadow(0 0 8px rgba(61,123,255,.4));
  }
}

/* ---------- 地図の空気 ---------- */
/* 海を一色で終わらせない。赤道あたりに淡い光、外周に紫の残りを置く。
   国境は髪の毛ほどの線で、光を拾う。 */

.rg-mappane {
  background:
    radial-gradient(140% 100% at 50% 120%, rgba(139,108,255,.10), transparent 58%),
    radial-gradient(120% 150% at 30% 12%, #0e1728 0%, #090e1a 55%, #05070d 100%);
}
.rg-mappane::before {
  background:
    radial-gradient(52% 40% at 50% 50%, rgba(61,123,255,.16), transparent 74%),
    radial-gradient(90% 60% at 50% 100%, rgba(139,108,255,.09), transparent 70%),
    repeating-linear-gradient(0deg,  rgba(126,178,255,.05) 0 1px, transparent 1px 54px),
    repeating-linear-gradient(90deg, rgba(126,178,255,.05) 0 1px, transparent 1px 54px);
  mask-image: radial-gradient(108% 108% at 50% 50%, #000 52%, transparent 100%);
}

/* 記録の無い国は線だけ残して沈める */
.rg-nodata { stroke: rgba(126, 168, 224, .17); }

/* 記録のある国は縁が光を拾う */
.rg-sh:not(.rg-nodata) { stroke: rgba(175, 214, 255, .38); }
.rg-sh[data-bin="5"] { stroke: rgba(226, 243, 255, .68); }

/* 上位の発光をランプに合わせ直す */
.rg-sh[data-bin="3"] { filter: drop-shadow(0 0 4px rgba(47,111,224,.5)); }
.rg-sh[data-bin="4"] { filter: drop-shadow(0 0 8px rgba(89,160,255,.62)); }
.rg-sh[data-bin="5"] { filter: drop-shadow(0 0 14px rgba(185,226,255,.78)); }

/* 凡例も同じ光り方に */
.rg-sw[data-bin="4"] { box-shadow: 0 0 8px rgba(89,160,255,.55); }
.rg-sw[data-bin="5"] { box-shadow: 0 0 13px rgba(185,226,255,.7); }

/* ---------- まとめてコピー ---------- */
/* 外の AI に自分で貼るための道具。要約せず、原文のまま項目に分けて渡す。 */

.rg-ev-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
}
.rg-ev-head .rg-pv-k { margin: 0; }

.rg-copyall {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  padding: .62em 1.2em;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  background: rgba(255,255,255,.05);
  color: var(--sd-fg);
  font-family: inherit;
  font-size: 11.5px;
  line-height: 1.5;
  cursor: pointer;
  transition: border-color 180ms ease, background 180ms ease, color 180ms ease, box-shadow 180ms ease;
}
.rg-copyall::before { content: "⧉"; opacity: .75; }
.rg-copyall:hover, .rg-copyall:focus-visible {
  border-color: rgba(126,178,255,.62);
  background: rgba(61,123,255,.14);
  color: #eaf2ff;
  box-shadow: 0 0 14px -2px rgba(61,123,255,.5);
}
.rg-copyall.on {
  border-color: #3d7bff;
  background: #3d7bff;
  color: #fff;
  box-shadow: 0 0 18px -3px rgba(61,123,255,.85);
}
.rg-copyall.on::before { content: "✓"; opacity: 1; }

/* ==========================================================================
   スマホ
   親指で触る前提に直す。押すものは大きく、並ぶものは縦に、はみ出すものは横に流す。
   ========================================================================== */

@media (max-width: 720px) {
  /* 全画面の地図。上が地図、下が一覧。地図は小さめにして一覧を読ませる。 */
  .rg-frame.rg-full { grid-template-rows: 34% minmax(0, 1fr); }
  .rg-frame { grid-template-rows: 38% minmax(0, 1fr); height: 78vh; }

  /* 計器の切り替え。4つを横一列に収める。 */
  .rg-metric { top: 8px; left: 8px; right: 8px; }
  .rg-metric .seg { width: 100%; }
  .rg-metric .seg-btn { padding: 0 6px; font-size: 11px; letter-spacing: 0; }

  /* 拡大縮小。計器の帯の下、地図の右上へ。指で押せる大きさにする。 */
  .rg-zoom {
    top: 52px;
    bottom: auto;
    right: 8px;
    left: auto;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
    max-width: 62%;
  }
  .rg-zoom button {
    min-width: 40px;
    min-height: 36px;
    font-size: 11px;
    padding: 0 8px;
    background: rgba(6, 10, 18, .82);
    backdrop-filter: blur(8px);
    border-color: rgba(126, 178, 255, .30);
    color: #dceaff;
  }

  /* 大陸タブは折り返さず、横一列で指で送る。 */
  .rg-jump {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    gap: 6px;
    padding: 6px 8px;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .rg-jump::-webkit-scrollbar { display: none; }
  .rg-jb { flex: 0 0 auto; min-height: 36px; white-space: nowrap; }

  /* 左バー。余白を詰めて、触るものを大きくする。 */
  .rg-shead { padding: 12px 12px 10px; }
  .rg-controls { flex-direction: column; gap: 8px; }
  .rg-controls select { width: 100%; height: 40px; font-size: 13px; }
  .rg-shead input[type=search] { height: 40px; font-size: 16px; }  /* 16px 未満だと iOS が拡大する */
  .rg-back, .rg-langb, .rg-curb { min-height: 36px; }
  .rg-ci-action { min-height: 36px; padding: 0 12px; }

  /* 一覧の行。指で押せる高さを確保する。 */
  .rg-pi, .rg-person { padding: 12px 10px; }

  /* 約束と報告。左右に並べる幅が無いので縦に積む。 */
  .rg-ev-pair { grid-template-columns: 1fr; }
  .rg-ev-head { flex-direction: column; align-items: flex-start; }
  .rg-copyall { width: 100%; justify-content: center; padding: .9em 1em; font-size: 12px; }

  /* 詳細パネルの中の表組みは横に流す。 */
  .rg-pv-grid { grid-template-columns: 1fr; }

  /* バッジの名前は狭いと重なるので、大陸だけ残して国のものは消す。 */
  .rg-kb .rg-kb-count { font-size: 11px; }
}

@media (max-width: 420px) {
  .rg-metric .seg-btn { font-size: 10px; }
  .rg-cb .rg-cb-name { display: none; }   /* 重なって読めなくなるので落とす */
}

/* 指で操作する端末では、当たったときだけ光る演出は効かない。
   触れた瞬間に応えるようにする。 */
@media (hover: none) {
  .rg-pi:active, .rg-person:active { background: rgba(126,178,255,.14); }
  .rg-back:active, .rg-ci-action:active, .rg-jb:active, .rg-curb:active,
  .rg-langb:active, .rg-zoom button:active, .rg-copyall:active {
    border-color: rgba(126,178,255,.62);
    background: rgba(61,123,255,.18);
  }
}

/* ---------- 断りと選択肢 ---------- */
/* 断りは畳めるようにし、選択肢を先に置く。広い画面では開いたまま出す。 */

.rg-why > summary {
  cursor: pointer;
  list-style: none;
  color: var(--sd-fg);
}
.rg-why > summary::-webkit-details-marker { display: none; }
.rg-why[open] > summary { margin-bottom: 6px; }
.rg-why:not([open]) > summary::after {
  content: "　なぜか ▾";
  color: var(--sd-fg3);
  font-weight: 400;
  font-size: .92em;
}
.rg-why-b { color: var(--sd-fg2); }

@media (max-width: 720px) {
  /* 地図の下は「選ぶ場所」にする。説明は小さく、畳んで、後ろに置く。 */
  .rg-caution { display: flex; flex-direction: column; gap: 10px; padding: 12px 10px; }
  .rg-caution .rg-solo-sw { order: -1; display: flex; gap: 8px; }
  .rg-caution .rg-solo-b { flex: 1 1 0; min-height: 40px; font-size: 12.5px; }
  .rg-why { font-size: 11.5px; line-height: 1.7; }

  /* 通貨の断りと要約。読めるが、場所は取らせない。 */
  .rg-cur-note { font-size: 10.5px; line-height: 1.6; }
  .rg-summary { font-size: 10.5px; line-height: 1.65; gap: 2px; }
  .rg-summary span { display: block; }

  /* 見出しまわりも詰める */
  .rg-place-n { font-size: 17px; }
  .rg-place-c { font-size: 11px; }
}

/* ---------- 内訳の畳み ---------- */

.rg-sum > summary { display: none; }          /* 広い画面では畳む口を出さない */
.rg-sum[open] > .rg-summary { display: flex; }

@media (max-width: 720px) {
  .rg-sum > summary {
    display: block;
    cursor: pointer;
    list-style: none;
    padding: 6px 0;
    color: var(--sd-fg3);
    font-size: 10.5px;
    letter-spacing: .06em;
  }
  .rg-sum > summary::-webkit-details-marker { display: none; }
  .rg-sum > summary::after { content: " ▾"; }
  .rg-sum[open] > summary::after { content: " ▴"; }

  /* 並ぶものは横に戻す。縦に積むと二段ぶん場所を食う。 */
  .rg-controls { flex-direction: row; gap: 8px; }
  .rg-controls select { height: 38px; font-size: 12px; }

  /* 見出し部の余白を詰めて、一覧に高さを返す。 */
  .rg-shead { padding: 10px 10px 8px; gap: 8px; }
  .rg-cur { gap: 6px; }
  .rg-cur-note { font-size: 10px; }
}