/* PONYCHIPS ponychips.css — デザインカンプ準拠 */
:root {
  --navy: #1B2450;
  --cream: #FFF6E8;
  --cream2: #FFF9EE;
  --surface: #F4EFFA;
  --ink2: #6A648A;
  --ink3: #9A94B8;
  --line: #EDE6F5;
  --yellow: #FFD23F;
  --green: #1F8A5B;
  --grade-S: #FF3B5C;
  --grade-A: #FF9F1C;
  --grade-B: #2FB8FF;
  --grade-C: #9AA3B5;
}
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #fff;
  color: var(--navy);
  font-family: 'Gen Interface JP', 'Noto Sans JP', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.num { font-family: 'Gen Interface JP', sans-serif; }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; }

/* ─ header ─ */
.header { display: flex; align-items: center; justify-content: space-between; padding: 16px 20px; position: relative; z-index: 6; }
.header .logo img { height: 44px; display: block; }
.header nav { display: flex; gap: 10px; align-items: center; }
.navbtn { font-weight: 800; font-size: 13px; padding: 8px 18px; border-radius: 999px; border: 2px solid var(--navy); color: var(--navy); }
.navbtn.active { background: var(--navy); color: var(--cream2); border-color: var(--navy); }

/* ─ hero ─ */
.hero { position: relative; overflow: hidden; padding: 28px 16px 0; text-align: center; }
.hero .tagline { width: min(560px, 88vw); display: block; margin: 0 auto; position: relative; z-index: 2; }
.legend { display: flex; align-items: flex-end; justify-content: center; gap: 22px; margin-top: 24px; position: relative; z-index: 2; flex-wrap: wrap; }
.legend .lg { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.legend .lg-head { display: flex; align-items: center; gap: 6px; }
.legend .lg-name { color: var(--ink2); font-weight: 800; font-size: 12px; }
.legend .lg-pct { font-weight: 800; font-size: 32px; line-height: 1; }
.hero .note { margin: 14px auto 0; color: var(--ink3); font-weight: 700; font-size: 11px; position: relative; z-index: 2; max-width: 90%; }
.hero .bag { display: block; margin: 18px auto -8px; width: min(240px, 56vw); transform: rotate(-6deg); filter: drop-shadow(0 30px 28px rgba(20,25,59,.25)); position: relative; z-index: 3; }

/* grade badge */
.gbadge { border-radius: 8px; background: var(--grade-C); color: var(--cream); font-weight: 800; display: grid; place-items: center; width: 24px; height: 24px; font-size: 13px; flex-shrink: 0; }
.gbadge.S { background: var(--grade-S); }
.gbadge.A { background: var(--grade-A); }
.gbadge.B { background: var(--grade-B); }
.gbadge.C { background: var(--grade-C); }
.gbadge.lg { width: 34px; height: 34px; border-radius: 10px; font-size: 17px; }


/* ─ lineup ─ */
.lineup { position: relative; padding: 36px 16px 56px; max-width: 920px; margin: 0 auto; }
.lineup-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; position: relative; z-index: 2; }
.lineup-head img { height: 46px; }
.lineup-head h2 { font-weight: 800; font-size: 22px; }
.lineup-date { color: var(--ink2); font-weight: 700; font-size: 12px; margin-bottom: 16px; position: relative; z-index: 2; }
.cards { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 2; }

.card { background: #fff; border-radius: 20px; padding: 16px 18px; display: flex; align-items: center; gap: 14px; box-shadow: 0 12px 26px rgba(20,25,59,.10); border: 1.5px solid var(--line); transition: transform .12s; }
.card:hover { transform: translateY(-2px); }
.card .body { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; }
.card .meta { color: var(--ink2); font-weight: 800; font-size: 11px; }
.card .title { font-weight: 800; font-size: 16px; }
.card .pick { display: flex; align-items: center; gap: 7px; }
.card .pick .no { width: 22px; height: 22px; border-radius: 50%; background: var(--navy); color: var(--cream); font-weight: 800; font-size: 12px; display: grid; place-items: center; }
.card .pick .name { font-weight: 800; font-size: 13px; }
.card .win { display: flex; flex-direction: column; align-items: flex-end; flex-shrink: 0; }
.card .win .lbl { color: var(--ink2); font-weight: 800; font-size: 10px; }
.card .win .val { font-weight: 800; font-size: 22px; }

/* S強調カード */
.card.S-card { border: 2.5px solid var(--grade-S); background: linear-gradient(135deg, #FFF5F7, #fff); box-shadow: 0 18px 36px rgba(255,59,92,.18); }
.card.S-card .title { font-size: 18px; }
.card.S-card .win .val { font-size: 28px; color: var(--grade-S); }

/* 結果ステータス */
.status { font-weight: 800; font-size: 11px; padding: 4px 10px; border-radius: 999px; flex-shrink: 0; }
.status.hit { background: var(--green); color: #fff; }
.status.miss { background: var(--surface); color: var(--ink2); }

/* 0件日 */
.empty { text-align: center; padding: 44px 16px 60px; }
.empty img { width: min(220px, 55vw); }
.empty h2 { font-weight: 800; font-size: 24px; margin-top: 8px; }
.empty p { color: var(--ink2); font-weight: 700; font-size: 13px; margin-top: 8px; line-height: 1.9; }

/* ─ race detail ─ */
.race-wrap { max-width: 920px; margin: 0 auto; padding: 8px 16px 56px; display: flex; flex-direction: column; gap: 18px; }
.race-head { display: flex; flex-direction: column; gap: 6px; }
.race-head .back { color: var(--ink2); font-weight: 800; font-size: 12px; }
.race-head h1 { font-weight: 800; font-size: 24px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.race-head .meta { color: var(--ink2); font-weight: 700; font-size: 13px; }

.pick-grid { display: grid; grid-template-columns: 1fr; gap: 16px; }
@media (min-width: 860px) { .pick-grid { grid-template-columns: 1fr 1.2fr; } }

.ai-pick { background: var(--navy); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; align-items: center; gap: 10px; box-shadow: 0 24px 44px rgba(12,18,48,.28); }
.ai-pick .lbl { color: #B9C2E8; font-weight: 800; font-size: 13px; letter-spacing: .12em; }
.ai-pick .horse { display: flex; align-items: center; gap: 10px; }
.ai-pick .horse .no { width: 38px; height: 38px; border-radius: 50%; background: var(--cream); color: var(--navy); font-weight: 800; font-size: 19px; display: grid; place-items: center; }
.ai-pick .horse .name { color: var(--cream); font-weight: 800; font-size: 23px; }
.ai-pick .winbox { display: flex; flex-direction: column; align-items: center; background: rgba(255,246,232,.08); border-radius: 18px; padding: 12px 34px; }
.ai-pick .winbox .lbl2 { color: #B9C2E8; font-weight: 800; font-size: 12px; }
.ai-pick .winbox .pct { color: var(--yellow); font-weight: 800; font-size: 52px; line-height: 1; }
.ai-pick .winbox .pct small { font-size: 24px; }
.ai-pick .odds { color: #7A84B4; font-weight: 700; font-size: 12px; }

.buy { background: #fff; border-radius: 22px; padding: 20px 22px; display: flex; flex-direction: column; gap: 12px; box-shadow: 0 16px 30px rgba(20,25,59,.10); }
.buy .head { display: flex; align-items: center; justify-content: space-between; }
.buy h3 { font-weight: 800; font-size: 18px; }
.buy .total { background: var(--yellow); color: var(--navy); font-weight: 800; font-size: 13px; padding: 5px 14px; border-radius: 999px; }
.buy .ticket { border: 2px dashed #FF6FB5; border-radius: 16px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; }
.buy .row { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.buy .kind { color: var(--cream); font-weight: 800; font-size: 11px; padding: 4px 10px; border-radius: 8px; }
.buy .kind.tansho { background: var(--grade-S); }
.buy .kind.wide { background: var(--grade-B); }
.buy .sel { font-weight: 800; font-size: 15px; }
.buy .amt { font-weight: 800; font-size: 15px; flex-shrink: 0; }
.buy .divider { height: 1.5px; background: repeating-linear-gradient(90deg, #E4DCEF 0 8px, transparent 8px 16px); }
.buy .boxnums { display: flex; align-items: center; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.buy .boxnums .bn { width: 30px; height: 30px; border-radius: 50%; background: var(--surface); color: var(--navy); font-weight: 800; font-size: 14px; display: grid; place-items: center; }
.buy .boxnote { color: var(--ink2); font-weight: 800; font-size: 11px; }
.buy .def { color: var(--ink2); font-weight: 700; font-size: 11px; line-height: 1.8; }
.buy .row.hitline .sel { color: var(--green); }

/* 結果バナー */
.result-banner { border-radius: 22px; padding: 20px; text-align: center; }
.result-banner.hit { background: linear-gradient(135deg, #FFF8E5, #FFF); border: 2.5px solid var(--yellow); }
.result-banner.miss { background: var(--surface); }
.result-banner img { width: min(300px, 70vw); }
.result-banner .payout { font-weight: 800; font-size: 30px; margin-top: 4px; }
.result-banner .payout small { font-size: 15px; color: var(--ink2); }
.result-banner .sub { color: var(--ink2); font-weight: 700; font-size: 13px; margin-top: 4px; }

/* 上位馬テーブル */
.horses { background: #fff; border-radius: 22px; padding: 20px 22px; box-shadow: 0 16px 30px rgba(20,25,59,.10); overflow-x: auto; }
.horses h3 { font-weight: 800; font-size: 18px; margin-bottom: 10px; }
.horses table { border-collapse: collapse; width: 100%; min-width: 420px; }
.horses th { color: var(--ink2); font-weight: 800; font-size: 11px; text-align: right; padding: 6px 4px; }
.horses th:nth-child(-n+2) { text-align: left; }
.horses td { padding: 10px 4px; border-top: 1.5px solid var(--line); font-weight: 800; font-size: 14px; text-align: right; }
.horses td:nth-child(-n+2) { text-align: left; }
.horses .hn { width: 28px; height: 28px; border-radius: 50%; background: var(--surface); color: var(--navy); font-weight: 800; font-size: 13px; display: inline-grid; place-items: center; }
.horses tr.fav .hn { background: var(--navy); color: var(--cream); }
.horses .pct-strong { font-size: 16px; }

/* ─ results page ─ */
.results-wrap { max-width: 920px; margin: 0 auto; padding: 8px 16px 56px; display: flex; flex-direction: column; gap: 18px; position: relative; z-index: 2; }
.results-wrap h1 { font-weight: 800; font-size: 28px; }
.results-wrap .lead { color: var(--ink2); font-weight: 700; font-size: 13px; }
.summary { background: var(--navy); border-radius: 22px; padding: 26px 20px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; box-shadow: 0 24px 44px rgba(12,18,48,.28); }
@media (min-width: 720px) { .summary { grid-template-columns: repeat(4, 1fr); } }
.summary .st { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.summary .st .lbl { color: #B9C2E8; font-weight: 800; font-size: 12px; }
.summary .st .val { color: var(--yellow); font-weight: 800; font-size: 38px; line-height: 1; }
.summary .st .val small { font-size: 17px; color: #B9C2E8; }
.grade-rows { display: flex; flex-direction: column; gap: 12px; }
.grow { background: #fff; border-radius: 18px; padding: 16px 20px; display: grid; grid-template-columns: 1fr repeat(4, minmax(58px, auto)); gap: 10px; align-items: center; box-shadow: 0 12px 26px rgba(20,25,59,.08); }
.grow .gname { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; }
.grow .cell { text-align: right; }
.grow .cell .l { display: block; color: var(--ink3); font-weight: 800; font-size: 10px; }
.grow .cell .v { font-weight: 800; font-size: 16px; }
.definition { background: var(--surface); border-radius: 18px; padding: 16px 20px; color: var(--ink2); font-weight: 700; font-size: 12px; line-height: 1.9; }

/* ─ footer ─ */
.footer { position: relative; border-top: 1.5px solid #EEE9F4; padding: 22px 20px 28px; }
.footer .wordmark { font-family: 'Baloo 2', cursive; font-weight: 800; font-size: 17px; }
.footer p { color: var(--ink3); font-size: 11px; font-weight: 500; line-height: 1.9; margin-top: 6px; padding-right: 96px; }
.footer .pochi { position: absolute; right: 18px; bottom: 14px; width: 72px; filter: drop-shadow(0 18px 18px rgba(20,25,59,.2)); }

@media (min-width: 860px) {
  .header { padding: 22px 40px; }
  .header .logo img { height: 58px; }
  .legend { gap: 44px; }
  .legend .lg-pct { font-size: 44px; }
  .card { padding: 20px 24px; }
  .card .title { font-size: 18px; }
  .card .win .val { font-size: 26px; }
  .footer .pochi { width: 100px; }
  .footer p { padding-right: 132px; }
}

/* ═══ 浮遊素材(原典カンプ準拠) ═══ */
.float { position: absolute; pointer-events: none; background-size: contain; background-repeat: no-repeat; background-position: center; }
.float .inner { width: 100%; height: 100%; background-size: contain; background-repeat: no-repeat; background-position: center; animation: pcFloaty var(--dur, 5.6s) ease-in-out infinite; animation-delay: var(--delay, 0s); }
.float-pc { display: none; }
@media (min-width: 860px) { .float-pc { display: block; } .float-sp { display: none; } }
@media (prefers-reduced-motion: reduce) { .float .inner { animation: none; } }

/* ═══ ヒーロー修正: 袋全体表示+影の見切れ防止 ═══ */
.hero { overflow: visible; padding-bottom: 64px; }
.hero .bag { margin: 26px auto 0; width: min(340px, 62vw); }
.lineup { overflow: hidden; }

/* ═══ ローディング演出 ═══ */
#pc-loader[hidden] { display: none !important; }
#pc-loader { position: fixed; inset: 0; z-index: 999; background: #fff; display: grid; place-items: center; }
#pc-loader.done { animation: pcLoaderFade .7s ease forwards; pointer-events: none; }
#pc-loader .stage { position: relative; width: 380px; height: 540px; max-width: 96vw; }
#pc-loader .flash { position: absolute; left: 50%; top: 44%; width: 40px; height: 40px; border-radius: 50%;
  background: radial-gradient(circle, rgba(190,235,255,.95), rgba(47,184,255,.35) 60%, transparent 75%);
  opacity: 0; animation: pcFlash .55s ease-out 4.75s; }
#pc-loader .bagwrap { position: absolute; left: 50%; top: 50%; width: 260px; height: 349px;
  transform: translate(-50%, -46%);
  animation: pcBagIn .8s cubic-bezier(.34,1.56,.64,1) both, pcBagShake .5s ease-in-out .9s 1;
  filter: drop-shadow(0 40px 36px rgba(20,25,59,.28)); }
#pc-loader .bag-closed { position: absolute; left: 0; top: 0; width: 260px; animation: pcSwapOut .01s linear 3.75s forwards; }
#pc-loader .bag-open   { position: absolute; left: 0; top: 0; width: 260px; opacity: 0; animation: pcSwapIn .01s linear 3.74s forwards; }
#pc-loader .strip      { position: absolute; left: 0; top: 0; width: 260px; opacity: 0; animation: pcStripOff .6s cubic-bezier(.5,-.3,.7,1) 3.75s forwards; }
#pc-loader .pawwrap { position: absolute; left: 50%; top: 40px; width: 250px; height: 645px; margin-left: -125px;
  transform-origin: 50% 100%; opacity: 0;
  animation: pcPawIn .55s ease-out 2.2s forwards, pcPawSweep 1s cubic-bezier(.45,.05,.55,.95) 2.75s forwards, pcPawOut .4s ease-in 3.7s forwards; }
#pc-loader .pawwrap img { width: 100%; display: block; filter: drop-shadow(0 8px 12px rgba(20,25,59,.3)); }
#pc-loader .burst { position: absolute; left: 50%; top: 32%; background-size: contain; background-repeat: no-repeat; background-position: center;
  opacity: 0; animation: pcBurstV .75s cubic-bezier(.2,.9,.25,1.18) var(--d) forwards; filter: drop-shadow(0 18px 18px rgba(20,25,59,.25)); }
#pc-loader .confetti { position: absolute; left: 50%; top: 32%; opacity: 0; animation: pcBurstV .9s cubic-bezier(.2,.9,.25,1.18) var(--d) forwards; }
#pc-loader .skip { position: absolute; right: 20px; bottom: 20px; border: 2px solid var(--navy); background: #fff; color: var(--navy);
  font-weight: 800; font-size: 13px; padding: 8px 20px; border-radius: 999px; cursor: pointer; font-family: inherit; }
#pc-loader .skip:hover { background: var(--navy); color: var(--cream2); }

/* 原典キーフレーム */
@keyframes pcFloaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }
@keyframes pcPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }
@keyframes pcBagIn { from { transform: translate(-50%, -190%) scale(.5) rotate(-8deg); opacity: 0; } 55% { opacity: 1; } to { transform: translate(-50%, -46%) scale(1) rotate(0deg); opacity: 1; } }
@keyframes pcBagShake { 0%, 100% { transform: translate(-50%, -46%) rotate(0deg); } 25% { transform: translate(-52%, -47%) rotate(-4deg); } 75% { transform: translate(-48%, -45%) rotate(4deg); } }
@keyframes pcFlash { from { opacity: .9; transform: translate(-50%, -50%) scale(1); } to { opacity: 0; transform: translate(-50%, -50%) scale(10); } }
@keyframes pcLoaderFade { to { opacity: 0; visibility: hidden; } }
@keyframes pcPawIn { from { transform: translateY(320px) rotate(-13deg); opacity: 0; } 40% { opacity: 1; } to { transform: translateY(0) rotate(-13deg); opacity: 1; } }
@keyframes pcPawSweep { from { transform: translateY(0) rotate(-13deg); opacity: 1; } to { transform: translateY(0) rotate(13deg); opacity: 1; } }
@keyframes pcPawOut { from { transform: translateY(0) rotate(13deg); opacity: 1; } to { transform: translateY(340px) rotate(16deg); opacity: 0; } }
@keyframes pcSwapIn { to { opacity: 1; } }
@keyframes pcSwapOut { to { opacity: 0; } }
@keyframes pcStripOff { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 30% { transform: translate(6px, -12px) rotate(2deg); opacity: 1; } 85% { opacity: 1; } 100% { transform: translate(160px, -220px) rotate(24deg); opacity: 0; } }
@keyframes pcTextPulse { 0%, 100% { opacity: .45; } 50% { opacity: 1; } }
@keyframes pcBurstV { from { transform: translate(0, 0) scale(.2) rotate(0deg); opacity: 0; } 12% { opacity: 1; } to { transform: translate(var(--tx), var(--ty)) scale(1) rotate(var(--rot)); opacity: 1; } }

/* 実績ページ: 浮遊素材は背面のみ・本文は常に手前 */
.results-wrap > *:not(.float) { position: relative; z-index: 2; }
.results-wrap .float { position: absolute !important; z-index: 0 !important; }

/* 実績: 今月/累計トグル(原典6a準拠のピル) */
.period-toggle { display: flex; background: var(--surface); border-radius: 999px; padding: 4px; }
.period-toggle a { color: var(--ink2); font-weight: 800; font-size: 13px; padding: 7px 20px; border-radius: 999px; }
.period-toggle a.on { background: var(--navy); color: var(--cream2); }

/* 全レース指数(朝の暫定) */
.preview-note { color: var(--ink2); font-weight: 700; font-size: 12px; margin: 4px 0 14px; line-height: 1.8; }
.preview-list { display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: 0 12px 26px rgba(20,25,59,.08); }
.prow { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1.5px solid var(--line); font-size: 13px; }
.prow:last-child { border-bottom: none; }
.prow:hover { background: var(--cream2); }
.prow .pr-meta { color: var(--ink3); font-weight: 800; width: 44px; flex-shrink: 0; }
.prow .pr-name { font-weight: 800; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .pr-fav { color: var(--ink2); font-weight: 700; flex-shrink: 0; }
.prow .pr-proba { font-weight: 800; font-size: 15px; width: 56px; text-align: right; flex-shrink: 0; }
.prow .pr-badge { background: var(--navy); color: var(--cream2); font-weight: 800; font-size: 10px; padding: 3px 8px; border-radius: 999px; flex-shrink: 0; }
.preview-banner { background: var(--surface); border-radius: 16px; padding: 14px 18px; color: var(--ink2); font-weight: 700; font-size: 13px; line-height: 1.8; }
.preview-banner strong { color: var(--navy); }

/* 結果待ちバッジ */
.status.wait { background: var(--yellow); color: var(--navy); }
/* 競馬場タブ */
.venue-tabs { display: flex; gap: 6px; margin-bottom: 12px; flex-wrap: wrap; }
.venue-tabs .vt { border: 2px solid var(--line); background: #fff; color: var(--ink2); font-weight: 800; font-size: 13px; padding: 7px 18px; border-radius: 999px; cursor: pointer; font-family: inherit; }
.venue-tabs .vt.on { background: var(--navy); color: var(--cream2); border-color: var(--navy); }
/* 指数一覧の状態バッジ */
.prow .pr-badge.open { background: var(--navy); color: var(--cream2); }
.prow .pr-badge.hit { background: var(--green); color: #fff; }
.prow .pr-badge.miss { background: var(--surface); color: var(--ink2); }

/* SPヘッダー調整: ナビボタンの折返し防止 */
.header nav { flex-shrink: 0; }
.navbtn { white-space: nowrap; }
@media (max-width: 480px) {
  .header { padding: 12px 12px; gap: 8px; }
  .header .logo img { height: 36px; }
  .navbtn { font-size: 11px; padding: 7px 12px; }
}

/* ═══ インライン広告スロット ═══ */
.ad-slot[hidden] { display: none !important; }
.ad-slot { position: relative; background: #fff; border: 1.5px solid var(--line);
  border-radius: 20px; padding: 18px 16px 14px; margin: 22px 0;
  box-shadow: 0 12px 26px rgba(20,25,59,.08);
  display: flex; justify-content: center; }
.ad-slot .ad-pr { position: absolute; top: 8px; right: 12px;
  color: var(--ink3); font-weight: 800; font-size: 10px; letter-spacing: .08em; }
.ad-slot .ad-inner { display: flex; justify-content: center; align-items: center;
  width: 100%; overflow: hidden; }
.ad-slot .ad-inner img { max-width: 100%; height: auto; }

/* ═══ aboutページ ═══ */
.about-wrap { max-width: 760px; margin: 0 auto; padding: 8px 16px 56px; }
.about-wrap h1 { font-weight: 800; font-size: 28px; margin-bottom: 8px; }
.ab-sec { background: #fff; border: 1.5px solid var(--line); border-radius: 20px;
  padding: 22px 24px; margin-top: 18px; box-shadow: 0 12px 26px rgba(20,25,59,.06); }
.ab-sec h2 { font-weight: 800; font-size: 18px; margin-bottom: 10px; }
.ab-sec p { color: var(--ink2); font-weight: 600; font-size: 14px; line-height: 2.0; margin-top: 10px; }
.ab-sec p:first-of-type { margin-top: 0; }
.ab-sec strong { color: var(--navy); }
.ab-sec a { color: #2980b9; font-weight: 800; }
.ab-grades { display: flex; flex-direction: column; gap: 12px; margin: 14px 0; }
.ab-grade { display: flex; align-items: flex-start; gap: 12px;
  color: var(--ink2); font-weight: 600; font-size: 14px; line-height: 1.9; }
.ab-grade .gbadge { flex-shrink: 0; margin-top: 2px; }
.footer-nav { margin-top: 4px; font-size: 12px; font-weight: 700; }
.footer-nav a { color: var(--ink2); }
.footer-nav a:hover { color: var(--navy); }

.ab-pochi { display: flex; align-items: center; gap: 14px; margin-top: 16px;
  background: var(--cream2); border-radius: 16px; padding: 14px 18px;
  color: var(--ink2); font-weight: 600; font-size: 14px; line-height: 1.8; }
.ab-pochi img { width: 72px; flex-shrink: 0; }
.ab-pochi strong { color: var(--navy); }

/* ═══ aboutページ v2(サイト共通トークン準拠) ═══ */
.about2 { max-width: 920px; margin: 0 auto; padding: 8px 16px 56px; }
.ab2-hero { display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap; padding: 28px 4px 10px; }
.ab2-hero-text { flex: 1 1 420px; min-width: 280px; }
.ab2-eyebrow { color: var(--grade-A); font-weight: 800; font-size: 13px;
  letter-spacing: .14em; margin-bottom: 10px; }
.ab2-hero h1 { font-weight: 800; font-size: clamp(30px, 6vw, 48px);
  line-height: 1.25; margin-bottom: 14px; }
.ab2-lead { color: var(--ink2); font-weight: 600; font-size: 15px; line-height: 2.0; max-width: 34em; }
.ab2-hero-pochi { flex: 0 1 240px; width: min(240px, 55vw);
  filter: drop-shadow(0 24px 22px rgba(20,25,59,.18)); }
.ab2-sec { background: #fff; border: 1.5px solid var(--line); border-radius: 20px;
  padding: 24px 26px; margin-top: 18px; box-shadow: 0 12px 26px rgba(20,25,59,.06); }
.ab2-sec h2 { font-weight: 800; font-size: 19px; margin-bottom: 12px;
  display: flex; align-items: center; gap: 10px; }
.ab2-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--yellow); flex-shrink: 0; }
.ab2-sec p { color: var(--ink2); font-weight: 600; font-size: 14px; line-height: 2.05; margin-top: 12px; }
.ab2-sec h2 + p { margin-top: 0; }
.ab2-sec strong { color: var(--navy); }
.ab2-sec a { color: var(--grade-B); font-weight: 800; }
.ab2-grades { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 14px; margin: 16px 0; }
.ab2-grade { background: var(--cream2); border-radius: 16px; padding: 16px;
  display: flex; gap: 12px; align-items: flex-start; }
.ab2-grade .gbadge { flex-shrink: 0; margin-top: 2px; }
.ab2-gname { font-weight: 800; font-size: 16px; color: var(--navy) !important; margin: 0 !important; }
.ab2-gdesc { font-size: 13px !important; line-height: 1.85 !important; margin-top: 4px !important; }
.ab2-pochi { display: flex; align-items: center; gap: 16px; margin-top: 16px;
  background: var(--cream2); border-radius: 16px; padding: 16px 18px;
  color: var(--ink2); font-weight: 600; font-size: 14px; line-height: 1.9; }
.ab2-pochi img { width: 130px; flex-shrink: 0; }
.ab2-pochi strong { color: var(--navy); }

/* ═══ ポチ「上に戻る」歩行アニメーション ═══ */
.footer .pochi#pochi-trigger:hover { transform: scale(1.06); transform-origin: 50% 90%; transition: transform .15s; }
.pochi-walker { position: fixed; width: 96px; height: 142px; z-index: 950; pointer-events: none; }
.pochi-walker .pw-shadow { position: absolute; left: 12px; right: 12px; bottom: 2px; height: 16px;
  border-radius: 50%; background: rgba(96,66,24,.16); filter: blur(3px); }
.pochi-walker .pw-sway { position: absolute; inset: 0; transform-origin: 50% 85%;
  animation: pochiSway 0.64s ease-in-out infinite; }
.pochi-walker .pw-img { width: 100%; height: 100%; object-fit: contain;
  animation: pochiGait 0.64s step-end infinite; }
@keyframes pochiSway {
  0%, 100% { transform: rotate(3deg) translateY(0); }
  25%      { transform: rotate(1.5deg) translateY(-3px); }
  50%      { transform: rotate(-3deg) translateY(0); }
  75%      { transform: rotate(-1.5deg) translateY(-3px); }
}
@keyframes pochiGait {
  0%, 49.9% { transform: scaleX(1); }
  50%, 100% { transform: scaleX(-1); }
}
.pochi-print { position: fixed; z-index: 940; pointer-events: none;
  opacity: .6; transition: opacity 2.5s linear; }
@media (prefers-reduced-motion: reduce) {
  .pochi-walker .pw-sway, .pochi-walker .pw-img { animation: none; }
}

/* ═══ 2026-07-07 スマホ実機検証フィードバック対応 ═══ */

/* ① SPヒーロー: 凡例を2x2グリッド固定 */
@media (max-width: 859px) {
  .legend { display: grid; grid-template-columns: repeat(2, auto); justify-content: center;
    column-gap: 40px; row-gap: 16px; }
}

/* ② 結果カード: バッジを右上ステッカー化して3カラムに */
.card { position: relative; }
@media (max-width: 640px) {
  .card { padding-right: 14px; }
  .card .status { position: absolute; top: -9px; right: 12px; margin: 0;
    box-shadow: 0 4px 10px rgba(20,25,59,.16); }
  .card .win { padding-top: 4px; }
  .card .win .val { font-size: 19px; }
  .card .title { font-size: 15px; }
}

/* ③ 全レース指数: SPは2行グリッド(上=時刻+レース名+バッジ / 下=馬名+指数) */
@media (max-width: 640px) {
  .prow { display: grid; grid-template-columns: auto 1fr auto; align-items: center;
    grid-template-areas: "meta name badge" "fav fav proba"; row-gap: 4px; padding: 11px 14px; }
  .prow .pr-meta { grid-area: meta; width: auto; margin-right: 4px; }
  .prow .pr-name { grid-area: name; white-space: normal; overflow: visible;
    line-height: 1.4; }
  .prow .pr-badge { grid-area: badge; justify-self: end; }
  .prow .pr-fav { grid-area: fav; }
  .prow .pr-proba { grid-area: proba; justify-self: end; width: auto; }
}

/* ④ レース詳細: 戻るをボタン的あしらいに */
.backbtn { display: inline-flex; align-items: center; gap: 4px;
  font-size: 14px !important; font-weight: 800; padding: 8px 16px;
  border: 2px solid var(--line); border-radius: 999px; background: #fff;
  width: fit-content; box-shadow: 0 4px 12px rgba(20,25,59,.06); }
.backbtn:hover { border-color: var(--ink3); }

/* ⑤ 実績のグレード行: SPは2段組(上=バッジ+名前 / 下=4指標)。縦書き崩れ根治 */
.grow .gname { white-space: nowrap; }
@media (max-width: 719px) {
  .grow { display: flex; flex-wrap: wrap; gap: 8px 0; padding: 14px 16px; }
  .grow .gname { width: 100%; }
  .grow .cell { flex: 1 1 0; text-align: center; }
  .grow .cell .v { font-size: 15px; }
}

/* 見送りバッジ */
.pr-badge.skip { background: #B7B3C6; color: #fff; }