:root { --blue:#1769d1; --blue-dark:#0f4385; --line:#d8e2ef; --bg:#f5f8fc; --text:#152033; --muted:#667085; --green:#126b45; --green-bg:#e9f8ef; --yellow:#fffae6; --yellow-line:#f3d36b; }

* { box-sizing: border-box; }

body { margin:0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Meiryo", sans-serif; color:var(--text); background:var(--bg); font-size:16px; }

a { color:var(--blue); }

.site-header { position:sticky; top:0; z-index:20; background:#fff; border-bottom:1px solid var(--line); padding:10px 14px; display:flex; gap:12px; align-items:center; min-height:58px; }

.brand { font-weight:800; color:var(--blue-dark); display:inline-flex; align-items:center; gap:8px; min-width:0; }

.brand span { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

.brand-logo { width:32px; height:32px; object-fit:contain; flex:0 0 auto; }

.back-link { display:inline-flex; align-items:center; justify-content:center; min-height:38px; padding:7px 12px; border:1px solid var(--blue); border-radius:8px; text-decoration:none; font-size:15px; font-weight:800; background:#f7fbff; color:var(--blue-dark); }

main { width:min(1120px, 100%); margin:0 auto; padding:16px; }

.hero { margin:8px 0 16px; }

.hero p { line-height:1.65; overflow-wrap:anywhere; word-break:break-all; }

h1 { font-size:26px; line-height:1.25; margin:10px 0; letter-spacing:0; }

h2 { font-size:19px; margin:0 0 10px; letter-spacing:0; }

h3.trend-segment { margin:12px 14px 8px; font-size:16px; color:var(--blue-dark); letter-spacing:0; }

.condition-card, .content-section, .race-card { background:#fff; border:1px solid var(--line); border-radius:8px; padding:14px; box-shadow:0 1px 2px rgba(16,24,40,.04); }

.condition-grid { display:grid; grid-template-columns:max-content 1fr; gap:6px 12px; margin:10px 0 0; }

.condition-grid dt { color:var(--muted); }

.condition-grid dd { margin:0; font-weight:600; }

.condition-text { margin:0 0 8px; font-weight:700; line-height:1.5; overflow-wrap:anywhere; }

.card-grid { display:grid; gap:12px; }

.race-card h2 { margin-bottom:6px; }

.race-card .meta { color:var(--muted); margin:6px 0 12px; }

.button-link, .seg { display:inline-flex; min-height:38px; align-items:center; justify-content:center; border:1px solid var(--blue); border-radius:7px; padding:8px 13px; text-decoration:none; background:#fff; color:var(--blue-dark); font-weight:700; }

.button-link { background:var(--blue); color:#fff; }

.content-section { margin:14px 0; }

.section-note { color:var(--muted); margin:0 0 10px; }

.warning { color:#b42318; background:#fff4f2; border:1px solid #fecdca; padding:10px; border-radius:6px; }

.trend-legend { display:inline-flex; align-items:center; gap:6px; color:var(--muted); margin:0 0 10px; font-size:14px; }

.legend-chip { width:1.1em; height:1.1em; border-radius:4px; background:var(--yellow); border:1px solid var(--yellow-line); display:inline-block; }

.control-panel { display:grid; gap:8px; margin:8px 0 12px; }

.control-block { display:flex; gap:6px; align-items:center; overflow-x:auto; padding-bottom:2px; }

.control-title { white-space:nowrap; font-weight:700; color:var(--muted); margin-right:4px; }

.seg { white-space:nowrap; min-width:max-content; cursor:pointer; }

.seg.active { background:var(--blue); color:#fff; }

.table-scroll { overflow:auto; max-width:100%; border:1px solid var(--line); border-radius:8px; background:#fff; }

.data-table { border-collapse:separate; border-spacing:0; width:max-content; min-width:100%; font-size:14px; }

.data-table th, .data-table td { border-right:1px solid var(--line); border-bottom:1px solid var(--line); padding:8px 9px; text-align:left; white-space:nowrap; background:#fff; }

.data-table th { position:sticky; top:0; z-index:5; background:#eaf2ff; color:#0f4385; font-weight:700; }

.data-table tr:nth-child(even) td { background:#fbfdff; }

.horse-table tr.year-band-0 td { background:#fff; }

.horse-table tr.year-band-1 td { background:#f4f8ff; }

.horse-table tr.year-break td { border-top:2px solid #bfd0e8; }

.horse-table tr:hover td { background:#eef6ff; }

.data-table td.above-average { background:var(--yellow); border-bottom-color:var(--yellow-line); font-weight:800; color:#5f4300; }

.sticky { position:sticky; z-index:8 !important; box-shadow:1px 0 0 var(--line); }

.data-table th.sticky { z-index:12 !important; }

.horse-table .sticky-year { left:0; width:2.6rem; min-width:2.6rem; max-width:2.6rem; text-align:center; padding-left:5px; padding-right:5px; }

.horse-table .sticky-finish { left:2.6rem; width:2.2rem; min-width:2.2rem; max-width:2.2rem; text-align:center; padding-left:5px; padding-right:5px; }

.horse-table .sticky-name { left:4.8rem; width:9.2rem; min-width:9.2rem; max-width:9.2rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap !important; }

.horse-name { font-weight:700; }

.previous-race-cell { max-width:9.5rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.trend-cut { margin:8px 0; background:#fff; border:1px solid var(--line); border-radius:8px; overflow:hidden; }

.trend-cut summary { cursor:pointer; padding:12px 14px; font-weight:800; background:#f7faff; }

.trend-cut summary span { color:var(--muted); font-weight:500; }

.trend-cut .table-scroll { margin:0 14px 14px; }

.col-hidden { display:none !important; }

.empty-message { background:#fff; border:1px dashed var(--line); padding:18px; border-radius:8px; color:var(--muted); }

@media (max-width: 640px) {

  .site-header { padding:9px 10px; gap:8px; }

  .brand-logo { width:28px; height:28px; }

  .brand span { font-size:14px; }

  .back-link { min-height:40px; padding:8px 10px; }

  main { padding:12px; }

  h1 { font-size:22px; }

  .condition-card, .content-section, .race-card { padding:12px; }

  .data-table { font-size:13px; }

  .data-table th, .data-table td { padding:7px 8px; }

  .horse-table .sticky-year { width:2.25rem; min-width:2.25rem; max-width:2.25rem; padding-left:4px; padding-right:4px; }

  .horse-table .sticky-finish { left:2.25rem; width:2.05rem; min-width:2.05rem; max-width:2.05rem; padding-left:4px; padding-right:4px; }

  .horse-table .sticky-name { left:4.3rem; width:7.8rem; min-width:7.8rem; max-width:7.8rem; }

  .previous-race-cell { max-width:7.6rem; }

  .trend-cut .table-scroll { margin:0 10px 12px; }

}