/* 通知表（js/report-card.js） */

/* ============================================================
   通知表（ホーム › 通知表）— js/report-card.js
   **濃紺のヒーロー1枚が総合点とレーダーを持ち、周りは静か**＝資産系タブ（.ahero）と
   同じ組み立て。色は意味の色（成功/危険）と、見直しの緑・自己ベストの金の2つだけを足す。
   ============================================================ */
.rc { display: grid; gap: var(--sp-5); }
.rc h2, .rc h3 { font-weight: var(--fw-bold); text-wrap: balance; }
.rc .up { color: var(--color-success-text); }
.rc .down { color: var(--color-danger-text); }
.rc-empty, .rc-muted { color: var(--color-text-subtle); font-size: var(--text-sm); }
.rc-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.rc-period { font-size: var(--text-xs); color: var(--color-text-muted); }
.rc-seg { min-width: 320px; }
.rc-seg .fxc-seg-btn { font-size: var(--text-xs); padding: 5px 10px; }
.rc-sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.rc-sec-head h2 { font-size: var(--text-md); }
.rc-sec-head p { font-size: var(--text-xs); color: var(--color-text-muted); }
.rc-panel {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); padding: var(--sp-4) var(--sp-5);
  min-width: 0;
}
.rc-def { font-size: var(--text-xs); color: var(--color-text-muted); margin-bottom: 10px; }

/* ヒーロー */
.rc-hero {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 8px 28px;
  background: linear-gradient(135deg, #182338 0%, #1f3355 55%, #24406b 100%);
  border-radius: var(--radius-xl); padding: 22px 24px 18px;
  color: var(--color-text-on-accent); box-shadow: var(--shadow-md);
}
.rc-hero::after {
  content: ""; position: absolute; right: -110px; top: -150px; width: 380px; height: 380px;
  border-radius: var(--radius-circle); pointer-events: none;
  background: radial-gradient(circle, rgba(75,124,243,0.32) 0%, rgba(75,124,243,0) 70%);
}
.rc-hero > * { position: relative; z-index: 1; min-width: 0; }
.rc-hero-left { display: flex; flex-direction: column; gap: 10px; }
.rc-eyebrow { font-size: var(--text-2xs); letter-spacing: 0.08em; color: rgba(255,255,255,0.62); }
.rc-score-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.rc-score { font-size: 64px; font-weight: var(--fw-bold); line-height: 1; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; }
.rc-score small { font-size: var(--text-lg); color: rgba(255,255,255,0.6); margin-left: 4px; letter-spacing: 0; }
.rc-pill { font-size: var(--text-xs); font-weight: var(--fw-bold); padding: 3px 10px; border-radius: var(--radius-pill); font-variant-numeric: tabular-nums; }
.rc-pill.up { color: var(--color-success-on-dark); background: rgba(94,233,181,0.12); }
.rc-pill.down { color: var(--color-danger-on-dark); background: rgba(255,138,138,0.12); }
.rc-hero-note { font-size: var(--text-xs); color: rgba(255,255,255,0.72); max-width: 34em; }
.rc-rank { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.rc-rank > div { border: 1px solid rgba(255,255,255,0.14); border-radius: var(--radius-lg); padding: 9px 12px; }
.rc-rank .k, .rc-rank .s { font-size: var(--text-3xs); color: rgba(255,255,255,0.58); }
.rc-rank .v { font-size: var(--text-md); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.rc-badges { display: flex; gap: 6px; flex-wrap: wrap; margin-top: auto; }
.rc-badge { font-size: var(--text-2xs); border: 1px solid rgba(240,180,76,0.45); color: #f5cd84; border-radius: var(--radius-pill); padding: 1px 10px; }
.rc-radar-box { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.rc-radar { width: 100%; max-width: 440px; height: auto; display: block; overflow: visible; }
.rc-rd-grid { fill: rgba(255,255,255,0.34); font-size: 9.5px; }
.rc-rd-name { fill: #fff; font-size: 13px; font-weight: var(--fw-bold); }
.rc-rd-val { fill: rgba(255,255,255,0.62); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rc-rd-val .up { fill: var(--color-success-on-dark); }
.rc-rd-val .down { fill: var(--color-danger-on-dark); }
.rc-rd-axis { cursor: pointer; opacity: 0.85; }
.rc-rd-axis.sel { opacity: 1; }
.rc-rd-axis.sel .rc-rd-name { text-decoration: underline; text-underline-offset: 3px; }
.rc-legend { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; font-size: var(--text-2xs); color: rgba(255,255,255,0.65); }
.rc-legend i { display: inline-block; width: 18px; height: 0; vertical-align: 4px; margin-right: 6px; }
.rc-legend .now i { border-top: 2.5px solid #8fb0ff; }
.rc-legend .prev i { border-top: 2px dashed rgba(255,255,255,0.55); }
.rc-legend .best i { border-top: 2px dotted #f0b44c; }
.rc-legend .sim i { border-top: 2px dashed #5ee9b5; }
.rc-scrub { display: flex; align-items: center; gap: 10px; width: 100%; max-width: 440px; font-size: var(--text-2xs); color: #fff; font-variant-numeric: tabular-nums; }
.rc-scrub button {
  width: 30px; height: 30px; flex: none; border-radius: var(--radius-circle);
  border: 1px solid rgba(255,255,255,0.25); background: rgba(255,255,255,0.06); color: #fff; cursor: pointer; font-size: 11px;
}
.rc-scrub button:hover { background: rgba(255,255,255,0.14); }
.rc-scrub input { flex: 1; min-width: 0; accent-color: #8fb0ff; }

/* 観点のカード */
.rc-axes { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.rc-axis {
  display: grid; gap: 3px; text-align: left; cursor: pointer; font: inherit; color: var(--color-text);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  padding: 11px 12px 10px; transition: border-color .15s, box-shadow .15s;
}
.rc-axis:hover { border-color: var(--color-border-strong); }
.rc-axis.active { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--color-primary-light); }
.rc-axis-n { display: flex; justify-content: space-between; align-items: center; font-size: var(--text-xs); font-weight: var(--fw-semibold); }
.rc-grade { font-size: var(--text-3xs); font-weight: var(--fw-bold); color: #fff; border-radius: var(--radius-sm); padding: 0 6px; background: var(--color-primary); }
.rc-grade.g1, .rc-grade.g2 { background: var(--color-warning-text); }
.rc-axis-v { font-size: var(--text-lg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.rc-axis-d { font-size: var(--text-2xs); color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.rc-axis-bar { height: 4px; border-radius: 3px; background: var(--color-bg); overflow: hidden; margin-top: 3px; }
.rc-axis-bar i { display: block; height: 100%; background: var(--color-primary); }

.rc-drill { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 20px; margin-top: 10px; }
.rc-drill-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.rc-drill-head h3 { font-size: var(--text-md); }
.rc-drill-head span { font-size: var(--text-2xs); color: var(--color-text-muted); }
.rc-drill-left { display: flex; flex-direction: column; min-width: 0; }
/* 右の列の高さまで伸びる（最低 210px）。中の SVG は JS が枠の実寸で描く */
.rc-drill-plot { flex: 1; min-height: 210px; position: relative; }
.rc-drill-chart { position: absolute; inset: 0; display: block; overflow: visible; }
.rc-band { fill: rgba(75,124,243,0.05); }
.rc-ax-lbl { fill: var(--color-text-muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.rc-area { fill: rgba(75,124,243,0.14); }
.rc-line { fill: none; stroke: var(--color-primary); stroke-width: 2; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.rc-dot-now { fill: var(--color-primary); stroke: var(--color-surface); stroke-width: 2; }
.rc-dot-best { fill: #c98a1b; stroke: var(--color-surface); stroke-width: 2; }
.rc-dot-sim { fill: var(--color-surface); stroke: #0e9f6e; stroke-width: 2; }
.rc-sim-line { stroke: #0e9f6e; stroke-width: 2; stroke-dasharray: 4 3; vector-effect: non-scaling-stroke; }
.rc-hit { cursor: pointer; }
.rc-facts { list-style: none; display: grid; gap: 8px; }
.rc-facts li { display: grid; grid-template-columns: 1fr auto; gap: 0 10px; font-size: var(--text-sm); padding-bottom: 7px; border-bottom: 1px dashed var(--color-border); }
.rc-facts li b { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.rc-facts li .w { grid-column: 1 / -1; font-size: var(--text-2xs); color: var(--color-text-muted); }
.rc-ladder { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; margin-top: 12px; }
.rc-ladder div { font-size: var(--text-3xs); text-align: center; padding: 3px 0; border-radius: var(--radius-sm); background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.rc-ladder div small { display: block; font-size: 9.5px; opacity: 0.8; }
.rc-ladder div.on { background: var(--color-primary); color: #fff; border-color: var(--color-primary); font-weight: var(--fw-bold); }
.rc-bench { margin-top: 10px; font-size: var(--text-2xs); color: var(--color-text-muted); background: var(--color-bg); border-radius: var(--radius-md); padding: 8px 10px; }

/* お金の置き場所 */
.rc-place { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; }
.rc-place-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: var(--text-xs); color: var(--color-text-muted); }
.rc-place-head .fxc-seg { min-width: 220px; }
.rc-place-head .fxc-seg-btn { font-size: var(--text-xs); padding: 4px 10px; }
.rc-answer { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 14px; }
.rc-answer > div { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 10px 12px; background: var(--color-bg); }
.rc-answer .k, .rc-answer .s { font-size: var(--text-2xs); color: var(--color-text-muted); }
.rc-answer .v { font-size: var(--text-xl); font-weight: var(--fw-bold); line-height: 1.3; font-variant-numeric: tabular-nums; }
.rc-answer .v.ok { color: var(--color-success-text); }
.rc-answer .v.warn { color: var(--color-warning-text); }
.rc-stack { display: flex; gap: 2px; height: 32px; border-radius: var(--radius-md); overflow: hidden; }
.rc-stack > div { display: flex; align-items: center; padding: 0 8px; font-size: var(--text-2xs); color: #fff; white-space: nowrap; overflow: hidden; min-width: 0; }
.st-guard { background: #5b7bb8; }
.st-plan { background: #8a93a6; }
.st-free { background: var(--color-success); }
.st-short { background: repeating-linear-gradient(45deg, rgba(180,83,9,0.35) 0 4px, transparent 4px 8px); border: 1.5px solid var(--color-warning-text); color: var(--color-warning-text) !important; }
.rc-stack-lg { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; font-size: var(--text-xs); }
.rc-stack-lg i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 6px; vertical-align: -1px; }
.rc-stack-lg b { display: block; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.rc-stack-lg span { display: block; font-size: var(--text-3xs); color: var(--color-text-muted); }
.rc-flow { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--color-border); display: grid; gap: 5px; font-size: var(--text-sm); }
.rc-flow > div { display: flex; justify-content: space-between; gap: 8px; }
.rc-flow b { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.rc-try {
  justify-self: start; margin-top: 4px; font: inherit; font-size: var(--text-xs); font-weight: var(--fw-bold); cursor: pointer;
  color: var(--color-success-text); background: var(--color-success-light); border: 1px solid var(--color-success); border-radius: var(--radius-md); padding: 5px 12px;
}
.rc-alloc h3 { font-size: var(--text-base); margin-bottom: 2px; }
.rc-meter { position: relative; height: 12px; border-radius: 6px; background: var(--color-bg); border: 1px solid var(--color-border); margin: 26px 0 24px; }
.rc-meter .fill { position: absolute; inset: 0 auto 0 0; border-radius: 6px; background: var(--color-primary); }
.rc-meter .tick { position: absolute; top: -8px; bottom: -8px; width: 2px; background: #c98a1b; }
.rc-meter .tl { position: absolute; top: -24px; transform: translateX(-50%); white-space: nowrap; font-size: var(--text-3xs); font-weight: var(--fw-bold); color: #a8700f; }
.rc-meter .vl { position: absolute; bottom: -21px; transform: translateX(-50%); white-space: nowrap; font-size: var(--text-3xs); font-variant-numeric: tabular-nums; }
.rc-alloc-rows { display: grid; gap: 5px; font-size: var(--text-xs); }
.rc-alloc-rows > div { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 4px; border-bottom: 1px dashed var(--color-border); }
.rc-alloc-rows b { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.rc-alloc-note { font-size: var(--text-xs); margin-top: 10px; background: var(--color-bg); border-radius: var(--radius-md); padding: 8px 10px; }
.rc-src { font-size: var(--text-3xs); color: var(--color-text-muted); margin-top: 10px; }

/* 見直しシミュレーター */
.rc-sim { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 12px; }
.rc-levers { display: grid; gap: 14px; align-content: start; }
.rc-lever label { display: flex; justify-content: space-between; gap: 8px; font-size: var(--text-sm); font-weight: var(--fw-medium); }
.rc-lever label b { color: var(--color-success-text); font-variant-numeric: tabular-nums; }
.rc-lever input { width: 100%; accent-color: var(--color-success); }
.rc-lever .h { font-size: var(--text-2xs); color: var(--color-text-muted); }
.rc-sim-out { display: grid; grid-template-columns: auto 1fr; gap: 6px 14px; align-items: center; border-top: 1px solid var(--color-border); padding-top: 12px; }
.rc-sim-out .big { font-size: 40px; font-weight: var(--fw-bold); line-height: 1; font-variant-numeric: tabular-nums; }
.rc-sim-out .big small { font-size: var(--text-sm); color: var(--color-text-muted); }
.rc-sim-out .cap { font-size: var(--text-2xs); color: var(--color-text-muted); margin-bottom: 3px; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.rc-chip { font-size: var(--text-2xs); border: 1px solid var(--color-border); border-radius: var(--radius-pill); padding: 0 8px; background: var(--color-bg); }
.rc-chip b { font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.rc-reset { justify-self: start; font-size: var(--text-xs); padding: 4px 12px; }
.rc-fan-head { display: grid; grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr)); gap: 10px; margin-bottom: 8px; }
.rc-fan-head > div { border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 8px 10px; min-width: 0; }
.rc-fan-head .k, .rc-fan-head .s { font-size: var(--text-3xs); color: var(--color-text-muted); }
.rc-fan-head .v { font-size: var(--text-lg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.rc-fan { width: 100%; height: auto; display: block; overflow: visible; }
.rc-grid { stroke: var(--color-border); }
.rc-fan-band { fill: rgba(75,124,243,0.16); }
.rc-fan-band.alt { fill: rgba(16,185,129,0.16); }
.rc-fan-mid { fill: none; stroke: var(--color-primary); stroke-width: 2; }
.rc-fan-mid.alt { stroke: #0e9f6e; stroke-dasharray: 6 4; }
.rc-goal-line { stroke: #c98a1b; stroke-width: 1.5; stroke-dasharray: 5 4; }
.rc-goal-date { stroke: var(--color-border-strong); stroke-dasharray: 2 3; }
.rc-goal-lbl { fill: #a8700f; font-size: 11px; font-weight: var(--fw-bold); }
.rc-fan-lg { display: flex; gap: 6px 14px; flex-wrap: wrap; font-size: var(--text-3xs); color: var(--color-text-muted); margin-top: 4px; }
.rc-fan-lg i { display: inline-block; width: 16px; height: 8px; border-radius: 2px; margin-right: 5px; }
.rc-fan-lg i.base { background: rgba(75,124,243,0.25); }
.rc-fan-lg i.alt { background: rgba(16,185,129,0.25); border: 1px dashed #0e9f6e; }

/* 所見・行動の記録 */
.rc-lower { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 12px; align-items: start; }
.rc-letter { display: grid; gap: 8px; max-width: 42em; }
.rc-letter p { font-size: var(--text-base); line-height: 1.9; }
.rc-link { font: inherit; background: none; border: 0; color: var(--color-primary); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; padding: 0; }
.rc-conduct { width: 100%; border-collapse: collapse; font-size: var(--text-sm); table-layout: fixed; }
.rc-conduct td:first-child { white-space: normal; }
.rc-conduct td:last-child { width: 9.5em; }
.rc-conduct td { padding: 7px 0; border-bottom: 1px dashed var(--color-border); vertical-align: middle; }
.rc-conduct td:first-child { padding-right: 8px; }
.rc-conduct td:last-child { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.rc-mark { display: inline-grid; place-items: center; width: 22px; height: 22px; margin-left: 8px; border-radius: 50%; border: 1.5px solid currentColor; font-size: var(--text-2xs); font-weight: var(--fw-bold); }
.rc-mark.good { color: var(--color-success-text); }
.rc-mark.ok { color: var(--color-primary); }
.rc-mark.warn { color: var(--color-warning-text); }

.goal-cash-toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: var(--text-sm); }
.goal-cash-toggle small { display: block; font-size: var(--text-2xs); color: var(--color-text-muted); }

@media (max-width: 1100px) { .rc-axes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px) {
  .rc-hero, .rc-drill, .rc-place, .rc-sim, .rc-lower { grid-template-columns: minmax(0, 1fr); }
  .rc-score { font-size: 52px; }
}
@media (max-width: 560px) {
  .rc-axes { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rc-answer, .rc-stack-lg, .rc-fan-head, .rc-rank { grid-template-columns: minmax(0, 1fr); }
  .rc-seg, .rc-place-head .fxc-seg { min-width: 0; width: 100%; }
  .rc-hero { padding: 18px 16px; }
}
@media (prefers-reduced-motion: reduce) { .rc-axis { transition: none; } }
.rc-rank-low { cursor: pointer; }
.rc-rank-low:hover { background: rgba(255,255,255,0.06); }
.rc-note-period { font-size: var(--text-2xs); font-weight: var(--fw-normal); color: var(--color-text-muted); margin-left: 8px; }
.rc-note-past { font-size: var(--text-2xs); color: var(--color-warning-text); background: rgba(245,158,11,0.10); border-radius: var(--radius-md); padding: 5px 10px; margin-bottom: 8px; }
/* 通知表：いつの時点で見るか（期間の部品は他タブと共通）・再生のラベル・推移の範囲 */
.rc-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: var(--sp-4); }
.rc-bar-note { font-size: var(--text-2xs); color: var(--color-text-muted); }
.rc-scrub-lbl { font-size: var(--text-3xs); color: rgba(255,255,255,0.6); white-space: nowrap; }
.rc-drill-seg { min-width: 200px; }
.rc-drill-seg .fxc-seg-btn { font-size: var(--text-2xs); padding: 2px 10px; }
.rc-note-step { display: inline-flex; gap: 4px; }
.rc-note-step button {
  font: inherit; font-size: var(--text-2xs); cursor: pointer; color: var(--color-text-muted);
  background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 3px 9px;
}
.rc-note-step button:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.rc-note-step button:disabled { opacity: 0.4; cursor: default; }
@media (max-width: 560px) { .rc-scrub-lbl { display: none; } }
.rc-keys { font-style: normal; font-family: ui-monospace, Menlo, monospace; font-size: var(--text-3xs); border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); padding: 0 5px; margin: 0 4px 0 8px; color: var(--color-text-muted); background: var(--color-surface); }
@media (hover: none) { .rc-keys-hint { display: none; } }   /* キーボードの無い端末では案内しない */
/* 所見の「前の月／次の月」は**タッチ端末だけ**＝キーボードのある端末は ← → で送れるので、
   同じ操作を2か所に置かない。矢印キーが無い端末では、下を読みながら月を送る手段がこれしか無い */
@media (hover: hover) and (pointer: fine) { .rc-note-step { display: none; } }
/* ヒーロー左下の総合点の推移。左の列の空き（右のレーダーとの高さの差）いっぱいに伸ばす */
.rc-spark { flex: 1; display: flex; flex-direction: column; min-height: 96px; }
.rc-spark-head { display: flex; justify-content: space-between; font-size: var(--text-3xs); color: rgba(255,255,255,0.6); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.rc-spark-plot { flex: 1; position: relative; min-height: 64px; }
.rc-spark-plot svg { position: absolute; inset: 0; display: block; overflow: visible; }
.rc-spark-grid { stroke: rgba(255,255,255,0.12); stroke-dasharray: 2 3; }
.rc-spark-lbl { fill: rgba(255,255,255,0.4); font-size: 9.5px; font-variant-numeric: tabular-nums; }
.rc-spark-area { fill: rgba(143,176,255,0.16); }
.rc-spark-line { fill: none; stroke: #8fb0ff; stroke-width: 2; stroke-linejoin: round; }
.rc-spark-cur { stroke: rgba(255,255,255,0.28); }
.rc-spark-dot { fill: #fff; stroke: #1f3355; stroke-width: 2; }

/* いつもと違う動き。**直すもの（抜け・重複）を警告色で先頭に**、知っておくもの（臨時・終わった・
   始まった）は静かに。色は種類の見分けだけで、良い・悪いは言わない */
.rc-odd { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 16px; }
.rc-odd li { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--color-border); min-width: 0; }
.rc-odd li div { display: grid; gap: 1px; min-width: 0; }
.rc-odd li b { font-size: var(--text-sm); font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.rc-odd li div span { font-size: var(--text-2xs); color: var(--color-text-muted); }
.rc-odd-tag { flex: none; font-size: var(--text-3xs); font-weight: var(--fw-bold); border-radius: var(--radius-pill); padding: 1px 8px; margin-top: 2px; white-space: nowrap; background: var(--color-bg); color: var(--color-text-muted); border: 1px solid var(--color-border); }
.rc-odd-fix .rc-odd-tag { color: var(--color-warning-text); background: rgba(245,158,11,0.10); border-color: rgba(180,83,9,0.35); }
.rc-odd-one .rc-odd-tag { color: var(--color-primary); background: var(--color-primary-light); border-color: var(--color-primary-border); }
.rc-odd-sum { margin-top: 10px; font-size: var(--text-xs); color: var(--color-text-muted); }
.rc-odd-sum b { color: var(--color-text); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .rc-odd { grid-template-columns: minmax(0, 1fr); } }