:root {
  color-scheme: light;
  --ink: #1d2731;
  --muted: #61707a;
  --line: rgba(29, 39, 49, 0.13);
  --panel: rgba(255, 252, 247, 0.93);
  --accent: #d86135;
  --teal: #276b72;
  font-family: "Hiragino Sans", "Noto Sans JP", sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 10% 0%, #fff, transparent 30%), linear-gradient(145deg, #f7efe2, #dcecf0); }
.analysis-shell { width: min(1080px, 100%); margin: 0 auto; padding: 24px 16px 48px; display: grid; gap: 16px; }
.hero-card, .panel, .metric-card { background: var(--panel); border: 1px solid rgba(255,255,255,.7); border-radius: 24px; box-shadow: 0 22px 48px rgba(29,39,49,.11); }
.hero-card, .panel { padding: 22px; }
.topline, .section-heading { display: flex; justify-content: space-between; align-items: center; gap: 14px; }
.back-link { color: var(--teal); font-weight: 700; text-decoration: none; }
.download-button { border: 0; border-radius: 14px; padding: 11px 15px; background: var(--ink); color: white; cursor: pointer; font-weight: 700; }
.eyebrow { margin: 0; color: var(--accent); font-size: .76rem; letter-spacing: .13em; text-transform: uppercase; }
h1, h2 { margin: 6px 0 0; } h1 { font-size: clamp(2rem, 5vw, 3.6rem); } h2 { font-size: 1.35rem; }
.hero-copy { color: var(--muted); }
.metric-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.metric-card { padding: 18px; } .metric-card span { color: var(--muted); font-size: .88rem; } .metric-card strong { display: block; margin-top: 8px; font-size: 1.7rem; }
.official-note { color: var(--teal); font-size: .82rem; font-weight: 700; }
.rating-legend::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: #8a5a2b; }
.explanation, .source-note { color: var(--muted); line-height: 1.7; }
.calculator-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; align-items: end; }
.calculator-grid label { display: grid; gap: 7px; color: var(--muted); font-size: .85rem; font-weight: 700; }
.calculator-grid input { width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px; color: var(--ink); background: white; font: inherit; }
.calc-result { min-height: 76px; padding: 14px; border-radius: 16px; background: #eef5f3; } .calc-result span, .calc-result small { display: block; color: var(--muted); font-size: .78rem; } .calc-result strong { display: inline-block; margin-top: 5px; font-size: 1.7rem; } .calc-result small { display: inline-block; margin-left: 8px; color: var(--teal); font-weight: 700; }
.total-result { background: #f9e8ce; }
.legend { color: var(--muted); font-size: .85rem; } .rate-legend::before, .round-legend::before { content: ''; display: inline-block; width: 10px; height: 10px; margin-right: 6px; border-radius: 50%; background: var(--accent); } .round-legend::before { background: var(--teal); }
.chart-wrap { overflow-x: auto; margin-top: 14px; } svg { display: block; width: 100%; min-width: 620px; height: auto; } .grid-line { stroke: var(--line); stroke-width: 1; } .axis-label, .date-label { fill: var(--muted); font-size: 12px; } .trend-line { fill: none; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; } .data-point { fill: white; stroke: var(--accent); stroke-width: 3; } #round-chart .data-point { stroke: var(--teal); }
.table-scroll { overflow-x: auto; margin-top: 14px; } table { width: 100%; border-collapse: collapse; min-width: 620px; } th, td { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; } th:first-child, td:first-child { text-align: left; } th { color: var(--muted); font-size: .82rem; } .empty-state, .error-state { padding: 16px; color: var(--muted); } .is-hidden { display: none; }
@media (max-width: 820px) { .calculator-grid { grid-template-columns: repeat(2, 1fr); } .total-result { grid-column: span 2; } }
@media (max-width: 680px) { .analysis-shell { padding: 14px 12px 32px; } .hero-card, .panel { padding: 18px; border-radius: 20px; } .topline, .section-heading { align-items: flex-start; flex-direction: column; } .metric-grid { grid-template-columns: repeat(2, 1fr); } }