/* PikoYou 前台：運動風（螢光黃綠＋深藍、斜切色塊、粗體大字） */
:root {
  --navy: #0B1B3F; --navy-2: #13295C; --lime: #D4FF3A; --lime-2: #B8E600; --orange: #FF6B2C;
  --ink: #0B1B3F; --muted: #5A6785; --bg: #FFFFFF; --soft: #F2F5FA; --line: #DCE3EF;
  --display: 'Barlow Condensed', 'Noto Sans TC', system-ui, sans-serif;
  --body: 'Noto Sans TC', system-ui, -apple-system, 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --r: 14px; --skew: -8deg;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body { margin: 0; font-family: var(--body); color: var(--ink); background: var(--bg); line-height: 1.75; font-size: 16px; overflow-x: hidden; }
img, svg { max-width: 100%; }
a { color: var(--navy-2); text-underline-offset: 3px; }
a:hover { color: var(--orange); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; font-weight: 900; letter-spacing: .01em; }
p { margin: 0 0 1em; }
.wrap { width: 100%; max-width: 1160px; margin: 0 auto; padding: 0 20px; }
.narrow { max-width: 800px; }
.muted { color: var(--muted); font-size: .92rem; }
.skip { position: absolute; left: -999px; top: 0; background: var(--lime); color: var(--navy); padding: 8px 14px; z-index: 99; font-weight: 700; }
.skip:focus { left: 8px; top: 8px; }
.preview-bar { background: var(--orange); color: #fff; text-align: center; font-size: .82rem; font-weight: 700; padding: 4px 12px; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.eyebrow { font-family: var(--display); font-style: italic; font-weight: 800; letter-spacing: .14em; color: var(--lime-2); margin: 0 0 .4em; font-size: .95rem; }

/* Header */
.top { position: sticky; top: 0; z-index: 50; background: var(--navy); color: #fff; box-shadow: 0 2px 0 var(--lime); }
.top-in { display: flex; align-items: center; gap: 16px; height: 64px; }
.brand { display: inline-flex; align-items: center; gap: 8px; text-decoration: none; color: #fff; }
.brand .ball { width: 34px; height: 34px; transform: rotate(-12deg); }
.wm { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.7rem; letter-spacing: .02em; line-height: 1; }
.wm b { color: var(--lime); font-weight: 800; }
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a { color: #fff; text-decoration: none; font-weight: 700; padding: 8px 14px; border-radius: 6px; font-size: .98rem; }
.nav a:hover, .nav a[aria-current] { background: var(--lime); color: var(--navy); }
.cart-link { position: relative; color: #fff; display: inline-flex; padding: 8px; border-radius: 6px; }
.cart-link:hover { color: var(--lime); }
.cart-n { position: absolute; top: 0; right: -2px; background: var(--orange); color: #fff; font-size: .72rem; font-weight: 900; min-width: 18px; height: 18px; border-radius: 9px; display: grid; place-items: center; padding: 0 4px; }
@media (max-width: 760px) {
  .top-in { flex-wrap: wrap; height: auto; padding-top: 10px; padding-bottom: 0; gap: 8px; }
  .nav { order: 3; width: calc(100% + 40px); margin: 0 -20px; padding: 6px 12px 8px; overflow-x: auto; background: var(--navy-2); }
  .nav a { white-space: nowrap; padding: 6px 12px; font-size: .92rem; }
  .cart-link { margin-left: auto; }
}

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 900; text-decoration: none; padding: 12px 24px; border-radius: 8px; border: 2px solid transparent; font-size: 1rem; cursor: pointer; font-family: inherit; transition: transform .12s, box-shadow .12s; line-height: 1.2; }
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }
.btn-lime { background: var(--lime); color: var(--navy); box-shadow: 4px 4px 0 var(--navy); }
.btn-lime:hover { color: var(--navy); box-shadow: 6px 6px 0 var(--navy); }
.band-navy .btn-lime, .hero .btn-lime, .empty-dark .btn-lime { box-shadow: 4px 4px 0 var(--orange); }
.btn-navy { background: var(--navy); color: #fff; box-shadow: 4px 4px 0 var(--lime-2); }
.btn-navy:hover { color: var(--lime); }
.btn-ghost { border-color: #fff; color: #fff; }
.btn-ghost:hover { background: #fff; color: var(--navy); }
.btn-ghost-dark { border-color: var(--navy); color: var(--navy); }
.btn-ghost-dark:hover { background: var(--navy); color: #fff; }
.btn:disabled { opacity: .5; cursor: wait; }

/* Hero */
.hero { position: relative; background: var(--navy); color: #fff; overflow: hidden; padding: 64px 0 96px; clip-path: polygon(0 0, 100% 0, 100% 88%, 0 100%); }
.hero::before { content: ''; position: absolute; right: -10%; top: -20%; width: 55%; height: 140%; background: var(--navy-2); transform: skewX(var(--skew)); }
.hero::after { content: ''; position: absolute; right: 34%; top: -20%; width: 28px; height: 140%; background: var(--lime); transform: skewX(var(--skew)); opacity: .9; }
.hero-in { position: relative; z-index: 1; display: grid; grid-template-columns: 1.3fr 1fr; gap: 32px; align-items: center; }
.hero h1 { font-size: clamp(2.4rem, 5.6vw, 4.4rem); word-break: keep-all; line-height: 1.08; font-weight: 900; margin-bottom: .35em; }
.hero h1 span { display: block; font-size: .36em; color: var(--lime); letter-spacing: .08em; margin-bottom: .4em; }
.lead { font-size: 1.12rem; color: inherit; opacity: .92; max-width: 40em; }
.hero-cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }
.hero-art { position: relative; justify-self: center; color: #fff; }
.court-art { width: min(240px, 60vw); transform: rotate(14deg); opacity: .9; display: block; }
.hero-ball { position: absolute; left: -18%; bottom: 8%; width: 42%; animation: bounce 2.4s cubic-bezier(.3,0,.5,1) infinite; }
.hero-ball .ball { width: 100%; height: auto; filter: drop-shadow(0 12px 18px rgba(0,0,0,.35)); }
@keyframes bounce { 0%,100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-36px) rotate(160deg); } }
@media (prefers-reduced-motion: reduce) { .hero-ball { animation: none; } .btn, .steps li { transition: none; } html { scroll-behavior: auto; } }
@media (max-width: 760px) {
  .hero { padding: 40px 0 72px; }
  .hero-in { grid-template-columns: 1fr; }
  .hero-art { display: none; }
  .hero::after { right: -4%; width: 18px; }
  .hero::before { right: -30%; }
}

/* Answer block + stats */
.answer { margin-top: -24px; position: relative; z-index: 2; background: #fff; border: 3px solid var(--navy); border-radius: var(--r); padding: 28px 28px 20px; box-shadow: 8px 8px 0 var(--lime); max-width: 1120px; }
.answer h2 { font-size: 1.5rem; }
.stats { list-style: none; padding: 0; margin: 12px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.stats li { background: var(--soft); border-radius: 10px; padding: 10px 12px; text-align: center; }
.stats b { display: block; font-family: var(--display); font-style: italic; font-weight: 800; font-size: 2rem; line-height: 1.1; color: var(--navy); }
.stats span { font-size: .85rem; color: var(--muted); font-weight: 700; }
@media (max-width: 760px) { .answer { margin: -20px 16px 0; width: auto; padding: 20px 18px 14px; } .stats { grid-template-columns: repeat(2, 1fr); } }

/* Tiles */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 56px; margin-bottom: 64px; }
.tile { position: relative; display: block; text-decoration: none; color: var(--ink); background: var(--soft); border-radius: var(--r); padding: 24px 22px 52px; border: 2px solid transparent; transition: transform .15s, border-color .15s, background .15s; overflow: hidden; }
.tile:hover { transform: translateY(-4px) rotate(-.6deg); border-color: var(--navy); background: var(--lime); color: var(--navy); }
.tile .no { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 3.2rem; line-height: 1; color: var(--navy); opacity: .14; position: absolute; right: 14px; top: 8px; }
.tile h2 { font-size: 1.35rem; }
.tile p { color: var(--muted); font-size: .95rem; margin: 0; }
.tile:hover p { color: var(--navy); }
.tile > svg { position: absolute; left: 22px; bottom: 18px; width: 24px; height: 24px; }
@media (max-width: 900px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tiles { grid-template-columns: 1fr; gap: 12px; margin-top: 40px; } .tile { padding: 18px 18px 46px; } }

/* Bands */
.band { padding: 72px 0; position: relative; }
.band-navy { background: var(--navy); color: #fff; clip-path: polygon(0 6%, 100% 0, 100% 94%, 0 100%); padding: 96px 0; }
.band-light { background: var(--soft); clip-path: polygon(0 0, 100% 5%, 100% 100%, 0 95%); padding: 88px 0; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.sec-head h2 { font-size: clamp(1.6rem, 4vw, 2.3rem); margin: 0; }
.sec-head h2::after { content: ''; display: block; width: 56px; height: 6px; background: var(--lime); transform: skewX(var(--skew)); margin-top: 8px; }
.sec-head a { font-weight: 900; text-decoration: none; display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.band-navy .sec-head a { color: var(--lime); }
.empty-dark { border: 2px dashed rgba(255,255,255,.35); border-radius: var(--r); padding: 32px; text-align: center; }

/* Game cards */
.game-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 14px; }
.game-card { display: grid; grid-template-columns: 64px 1fr auto; gap: 14px; align-items: center; text-decoration: none; color: #fff; background: var(--navy-2); border-radius: var(--r); padding: 14px 16px; border-left: 6px solid var(--lime); transition: transform .12s; }
.game-card:hover { transform: translateX(4px); color: #fff; }
.game-list.light .game-card { background: #fff; color: var(--ink); border: 2px solid var(--line); border-left: 6px solid var(--lime-2); }
.game-list.light .game-card:hover { border-color: var(--navy); color: var(--ink); }
.gc-date { text-align: center; font-family: var(--display); font-style: italic; line-height: 1; }
.gc-date b { display: block; font-size: 1.7rem; font-weight: 800; }
.gc-date span { font-size: .85rem; font-weight: 700; font-style: normal; font-family: var(--body); opacity: .8; }
.gc-body h3 { font-size: 1.05rem; margin: 0 0 4px; }
.gc-body p { margin: 0; font-size: .86rem; opacity: .9; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
.gc-body svg { vertical-align: -3px; margin-right: 2px; }
.gc-meta { margin-top: 6px !important; }
.lv { background: var(--lime); color: var(--navy); font-weight: 900; font-size: .75rem; padding: 1px 8px; border-radius: 4px; }
.lv-new { background: #7CF0C0; } .lv-adv { background: var(--orange); color: #fff; }
.gc-cta { background: var(--lime); color: var(--navy); font-weight: 900; padding: 6px 12px; border-radius: 6px; font-size: .88rem; }
.is-full { opacity: .6; } .is-full .gc-cta { background: #8A94AA; color: #fff; }
@media (max-width: 480px) { .game-list { grid-template-columns: 1fr; } .game-card { grid-template-columns: 52px 1fr; } .gc-cta { display: none; } }

/* Steps */
.steps { padding: 72px 20px 56px; }
.steps h2 { font-size: clamp(1.5rem, 4vw, 2.1rem); }
.steps ol { list-style: none; counter-reset: s; padding: 0; margin: 24px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.steps li { counter-increment: s; position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 22px 22px 22px 78px; border: 2px solid var(--navy); border-radius: var(--r); background: #fff; transition: transform .15s, box-shadow .15s; }
.steps li:hover { transform: translateY(-3px); box-shadow: 6px 6px 0 var(--lime); }
.steps li .btn { margin-top: 16px; padding: 10px 18px; font-size: .95rem; }
.steps li::before { content: counter(s); position: absolute; left: 18px; top: 16px; width: 44px; height: 44px; display: grid; place-items: center; background: var(--lime); color: var(--navy); font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.7rem; transform: skewX(var(--skew)); border-radius: 6px; }
.steps li b { font-size: 1.12rem; display: block; margin-bottom: 4px; }
.steps li p { margin: 0; color: var(--muted); font-size: .95rem; flex: 1; }
@media (max-width: 860px) { .steps ol { grid-template-columns: 1fr; } }

/* Products */
.prod-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 18px; }
.prod-card { display: flex; flex-direction: column; text-decoration: none; color: var(--ink); background: #fff; border-radius: var(--r); overflow: hidden; border: 2px solid var(--line); transition: transform .15s, border-color .15s, box-shadow .15s; }
.prod-card:hover { transform: translateY(-4px); border-color: var(--navy); box-shadow: 6px 6px 0 var(--lime); color: var(--ink); }
.pc-img, .pd-img { position: relative; aspect-ratio: 4/3; display: grid; place-items: center; background: linear-gradient(135deg, var(--navy) 0 55%, var(--navy-2) 55% 100%); }
.pc-img .ball { width: 38%; transform: rotate(-14deg); }
.pc-img.has-photo, .pd-img.has-photo { background: #fff; }
.has-photo > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.has-photo > .pc-tag { z-index: 1; }
.pd-thumbs { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.pd-thumbs button { padding: 0; border: 2px solid var(--line); border-radius: 8px; background: #fff; cursor: pointer; width: 72px; aspect-ratio: 4/3; overflow: hidden; }
.pd-thumbs img { width: 100%; height: 100%; object-fit: contain; }
.pc-ball, .pc-img.pc-ball { background: linear-gradient(135deg, var(--lime) 0 55%, var(--lime-2) 55% 100%); }
.pc-gear { background: linear-gradient(135deg, #1E3A7A 0 55%, var(--navy) 55% 100%); }
.pc-tag { position: absolute; left: 12px; top: 12px; background: var(--orange); color: #fff; font-weight: 900; font-size: .78rem; padding: 2px 10px; border-radius: 4px; transform: skewX(var(--skew)); }
.pc-body { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.pc-cat { font-size: .78rem; color: var(--muted); font-weight: 700; }
.pc-body h3 { font-size: 1.05rem; margin: 2px 0 6px; }
.pc-body p { font-size: .88rem; color: var(--muted); margin-bottom: 10px; flex: 1; }
.pc-price { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 1.5rem; }
.pc-pre { display: inline-block; font-size: .72rem; font-weight: 900; background: var(--soft); color: var(--navy); border: 1px solid var(--navy); border-radius: 4px; padding: 0 6px; margin-left: 6px; vertical-align: 4px; font-family: var(--body); font-style: normal; }
.shop-cat { margin-bottom: 40px; }
.shop-cat h2 { font-size: 1.5rem; }
.prod-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; padding-bottom: 64px; }
.pd-img { border-radius: var(--r); }
.pd-img .ball { width: 40%; transform: rotate(-14deg); }
.pd-info h1 { font-size: clamp(1.7rem, 4vw, 2.4rem); }
.pd-price { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 2.4rem; margin: 8px 0 16px; }
.qty-row { display: flex; gap: 12px; align-items: end; flex-wrap: wrap; margin-bottom: 8px; }
.qty-row input { width: 80px; }
.pd-body { margin: 16px 0; color: var(--muted); }
@media (max-width: 760px) { .prod-detail { grid-template-columns: 1fr; gap: 20px; } }

/* FAQ */
.faq { padding: 56px 0; }
.faq h2 { font-size: clamp(1.5rem, 4vw, 2rem); }
.faq details { border-bottom: 2px solid var(--line); padding: 4px 0; }
.faq summary { cursor: pointer; font-weight: 900; padding: 14px 32px 14px 0; position: relative; list-style: none; font-size: 1.05rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; position: absolute; right: 4px; top: 8px; font-size: 1.6rem; font-weight: 900; color: var(--lime-2); transition: transform .15s; }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { color: var(--muted); padding-bottom: 8px; }

/* CTA band */
.cta-band { background: var(--lime); clip-path: polygon(0 18%, 100% 0, 100% 100%, 0 100%); padding: 88px 0 64px; margin-top: 24px; }
.cta-in { display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; }
.cta-in h2 { font-size: clamp(1.7rem, 5vw, 2.8rem); margin: 0; color: var(--navy); }

/* Page head */
.page-head { background: var(--navy); color: #fff; padding: 28px 0 56px; clip-path: polygon(0 0, 100% 0, 100% 82%, 0 100%); margin-bottom: 32px; position: relative; overflow: hidden; }
.page-head::after { content: ''; position: absolute; right: 8%; top: -20%; width: 18px; height: 160%; background: var(--lime); transform: skewX(var(--skew)); opacity: .85; }
.page-head .wrap { position: relative; z-index: 1; }
.page-head h1 { font-size: clamp(1.9rem, 5vw, 3rem); }
.page-head .lead a { color: var(--lime); }
.page-head .btn { margin-top: 8px; }
.page-head .meta { opacity: .75; font-size: .9rem; margin: 0; }
.crumb ol { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-wrap: wrap; gap: 6px; font-size: .85rem; }
.crumb li + li::before { content: '/'; margin-right: 6px; opacity: .5; }
.crumb a { color: #fff; opacity: .8; }
.crumb li[aria-current] { opacity: .6; }

/* Learn */
.learn-list { display: grid; gap: 14px; padding-bottom: 64px; }
.learn-card { display: grid; grid-template-columns: 72px 1fr 28px; gap: 18px; align-items: center; text-decoration: none; color: var(--ink); border: 2px solid var(--line); border-radius: var(--r); padding: 20px 22px; transition: border-color .15s, transform .15s, box-shadow .15s; }
.learn-card:hover { border-color: var(--navy); transform: translateX(4px); box-shadow: -6px 0 0 var(--lime); color: var(--ink); }
.learn-card .no { font-family: var(--display); font-style: italic; font-weight: 800; font-size: 3rem; color: var(--lime-2); line-height: 1; }
.learn-card h2 { font-size: 1.2rem; margin-bottom: 4px; }
.learn-card p { margin: 0; color: var(--muted); font-size: .92rem; }
@media (max-width: 560px) { .learn-card { grid-template-columns: 1fr; gap: 6px; } .learn-card > svg { display: none; } .learn-card .no { font-size: 2rem; } }
.article { padding-bottom: 48px; }
.article section { margin-bottom: 28px; }
.article h2 { font-size: 1.45rem; padding-left: 14px; border-left: 6px solid var(--lime-2); }
.article ul { padding-left: 1.3em; }
.article li { margin-bottom: .4em; }
.answer-box { background: var(--soft); border-left: 6px solid var(--navy); border-radius: 0 var(--r) var(--r) 0; padding: 18px 22px; margin-bottom: 32px; }
.answer-box b { display: inline-block; background: var(--navy); color: var(--lime); font-size: .8rem; padding: 1px 10px; border-radius: 4px; margin-bottom: 8px; }
.answer-box p { margin: 0; font-size: 1.06rem; font-weight: 700; }
.vid { margin: 0 0 32px; }
.vid video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: var(--navy); border-radius: var(--r); }
.vid figcaption { font-size: .85rem; color: var(--muted); margin-top: 6px; }
.home-vid { margin-top: 40px; margin-bottom: 8px; }
.home-vid .vid { max-width: 860px; }
.spec { width: 100%; border-collapse: collapse; margin: 8px 0 16px; font-size: .96rem; }
.spec th, .spec td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--line); vertical-align: top; }
.spec th { width: 32%; color: var(--muted); font-weight: 700; background: var(--soft); }
.pn { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 24px; }
.pn a { display: block; border: 2px solid var(--navy); border-radius: var(--r); padding: 14px 18px; text-decoration: none; font-weight: 900; color: var(--navy); }
.pn a:hover { background: var(--lime); color: var(--navy); }
.pn small { display: block; font-weight: 700; color: var(--muted); font-size: .8rem; }
.pn .nx { text-align: right; }

/* Forms */
.form-card { background: #fff; border: 3px solid var(--navy); border-radius: var(--r); padding: 24px; box-shadow: 8px 8px 0 var(--lime); margin: 32px 0 64px; }
.form-card h2 { font-size: 1.4rem; }
form label { display: block; font-weight: 700; font-size: .92rem; margin-bottom: 14px; }
input, select, textarea { display: block; width: 100%; margin-top: 4px; font: inherit; font-weight: 400; padding: 10px 12px; border: 2px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(212,255,58,.6); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }
.grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 0 14px; }
@media (max-width: 560px) { .grid2, .grid3 { grid-template-columns: 1fr; } .form-card { padding: 18px; box-shadow: 5px 5px 0 var(--lime); } }
fieldset.radio { border: 0; padding: 0; margin: 0 0 14px; display: flex; gap: 20px; flex-wrap: wrap; }
fieldset.radio legend { font-weight: 700; font-size: .92rem; margin-bottom: 4px; padding: 0; }
fieldset.radio label { display: flex; align-items: center; gap: 6px; font-weight: 400; margin: 0; }
fieldset.radio input { width: auto; margin: 0; }
.form-msg { margin: 10px 0 0; font-weight: 700; min-height: 1.5em; }
.form-msg.ok { color: #0A7A3E; } .form-msg.err { color: #C62828; }
.filter { display: flex; flex-wrap: wrap; gap: 14px; align-items: end; margin-bottom: 20px; }
.filter label { margin: 0; font-weight: 700; font-size: .9rem; }
.filter select { min-width: 160px; }
.empty { text-align: center; padding: 40px 20px; border: 2px dashed var(--line); border-radius: var(--r); margin: 16px 0 32px; }
.empty h2 { font-size: 1.35rem; }
.notice { background: #FFF6E5; border-left: 6px solid var(--orange); padding: 12px 16px; border-radius: 0 10px 10px 0; margin: 0 0 20px; font-size: .94rem; }
.how { margin: 40px 0 64px; }
.how ol { padding-left: 1.3em; } .how li { margin-bottom: 8px; } .how li b { margin-right: 8px; }
.people { font-weight: 700; }

/* Courts */
.court-city { margin-bottom: 32px; }
.court-city h2 { font-size: 1.35rem; }
.court-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.court-card { display: block; text-decoration: none; color: var(--ink); border: 2px solid var(--line); border-radius: var(--r); padding: 16px 18px; border-top: 6px solid var(--navy); transition: border-color .15s, transform .15s; }
.court-card:hover { border-color: var(--navy); border-top-color: var(--lime-2); transform: translateY(-3px); color: var(--ink); }
.court-card h3 { font-size: 1.08rem; margin-bottom: 4px; }
.court-card p { margin: 0; font-size: .88rem; color: var(--muted); }
.court-card svg { vertical-align: -3px; }
.cc-meta { display: flex; gap: 8px; margin-top: 8px !important; flex-wrap: wrap; }
.cc-meta span { background: var(--soft); border-radius: 4px; padding: 0 8px; font-weight: 700; color: var(--navy); }
.cc-fee { margin-top: 6px !important; font-size: .84rem !important; }
.court-card[hidden], .court-city[hidden] { display: none; }
.court-map { height: 420px; border: 2px solid var(--line); border-radius: var(--r); margin-bottom: 20px; background: var(--soft); z-index: 0; }
.court-map .pin { background: var(--lime-2); border: 3px solid var(--navy); border-radius: 50%; }
.filter .chk { display: flex; gap: 6px; align-items: center; padding-bottom: 8px; }
.filter .chk input { width: auto; margin: 0; }
@media (max-width: 640px) { .court-map { height: 320px; } }

/* Cart */
.cart-table { width: 100%; border-collapse: collapse; margin-bottom: 12px; }
.cart-table td { padding: 12px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.cart-table input { width: 64px; display: inline-block; margin: 0; padding: 6px 8px; }
.cart-table button { background: none; border: 0; color: #C62828; cursor: pointer; font: inherit; font-size: .88rem; }
.cart-total { text-align: right; font-size: 1.2rem; font-weight: 900; }
.cart-total b { font-family: var(--display); font-style: italic; font-size: 1.8rem; }

/* Footer */
.foot { background: var(--navy); color: #C9D2E6; padding: 48px 0 24px; margin-top: 0; }
.cta-band + .foot, main:has(> .cta-band:last-child) + .foot { margin-top: 0; }
.foot-in { display: grid; grid-template-columns: 1.2fr 2fr; gap: 32px; }
.foot-brand p { margin-top: 10px; font-size: .9rem; }
.foot-nav { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.foot-nav h2 { font-size: .95rem; color: var(--lime); margin-bottom: 8px; }
.foot-nav a { display: block; color: #C9D2E6; text-decoration: none; font-size: .92rem; padding: 3px 0; }
.foot-nav a:hover { color: #fff; }
.foot-copy a { color: #C9D2E6; }
.foot-learn { margin-top: 32px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); }
.foot-learn h2 { font-size: .95rem; color: var(--lime); margin-bottom: 14px; display: flex; justify-content: space-between; align-items: baseline; }
.foot-learn h2 a { color: #C9D2E6; font-size: .85rem; font-weight: 700; text-decoration: none; }
.foot-learn h2 a:hover { color: var(--lime); }
.foot-learn-g { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.foot-learn h3 { font-size: .8rem; color: #8B97B3; letter-spacing: .08em; margin-bottom: 10px; }
.foot-learn p { display: flex; flex-wrap: wrap; gap: 8px; }
.foot-learn p a { color: #E3E8F3; text-decoration: none; font-size: .85rem; padding: 5px 12px; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; transition: background .15s, color .15s, border-color .15s; }
.foot-learn p a:hover { background: var(--lime); color: var(--navy); border-color: var(--lime); }
.foot-copy { border-top: 1px solid rgba(255,255,255,.12); margin-top: 32px; padding-top: 16px; font-size: .8rem; opacity: .7; }
@media (max-width: 760px) { .foot-in { grid-template-columns: 1fr; } .foot-nav { grid-template-columns: repeat(2, 1fr); } .foot-learn-g { grid-template-columns: repeat(2, 1fr); gap: 18px; } .foot-learn p { gap: 6px; } .foot-learn p a { font-size: .8rem; padding: 3px 9px; } }
:focus-visible { outline: 3px solid var(--orange); outline-offset: 2px; }
.article .qa { font-weight: 700; border-left: 4px solid var(--lime-2); padding-left: 12px; }
.sources ul { padding-left: 1.2em; font-size: .92rem; } .sources a { color: var(--navy-2); }
small.src { display: block; margin-top: 8px; font-size: .78rem; color: #5A6785; } small.src a { color: inherit; }
.faq summary h3 { display: inline; font: inherit; margin: 0; }
.pc-body { display: flex; flex-direction: column; }
.pc-pre { align-self: flex-start; margin-top: 6px; background: var(--orange); color: #fff; font-size: .75rem; font-weight: 900; padding: 2px 10px; border-radius: 4px; letter-spacing: .05em; border: 0; }
@media (max-width: 760px) { .page-head::after { right: -3%; width: 12px; } .page-head h1 { padding-right: 18px; } }
/* 球場照片（2026-11-01）：官網圖附出處，沒有就統一示意圖 */
.court-card.has-img { padding-top: 0; overflow: hidden; }
.cc-img { display: block; max-width: none; width: calc(100% + 36px); margin: 0 -18px 12px; aspect-ratio: 16 / 9; height: auto; object-fit: cover; background: var(--navy); }
.court-photos { margin: 0 0 16px; display: grid; gap: 8px; }
.court-photos.n2 { grid-template-columns: 1fr 1fr; }
.court-photos img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); background: var(--navy); }
.court-photos figcaption { grid-column: 1 / -1; font-size: .82rem; color: var(--muted); }
.court-photos.is-ph img { max-width: 360px; }
@media (max-width: 560px) { .court-photos.n2 { grid-template-columns: 1fr; } }

/* 會員中心 */
@media(max-width:760px){.top-in .me-link{margin-left:auto}.top-in .me-link+.cart-link{margin-left:0}}
.top-in .me-link+.cart-link{margin-left:-12px}
.me-auth{display:grid;gap:1.25rem}
@media(min-width:760px){.me-auth{grid-template-columns:1fr 1fr}}
.me-hi{display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;font-size:1.1rem}
.btn-s{padding:.35rem .9rem;font-size:.9rem}
.me-sec{margin:1.5rem 0}
.me-list{list-style:none;padding:0;margin:.5rem 0}
.me-list li{display:flex;flex-direction:column;gap:.15rem;padding:.7rem 0;border-bottom:1px solid rgba(11,27,63,.12)}
.me-list a{text-decoration:none}
details summary{cursor:pointer;font-weight:700;margin:.5rem 0}
.cart-n[hidden]{display:none}
/* 候補／取消報名 */
.linkish{align-self:flex-start;background:none;border:0;padding:0;color:#B4232A;font:inherit;font-size:.88rem;text-decoration:underline;cursor:pointer}
.code-box{font-size:1.05rem;background:#F1FFD6;border:2px dashed #0B1B3F;border-radius:10px;padding:.7rem 1rem;display:inline-block}
.code-box b{font-size:1.5rem;letter-spacing:.15em;margin-left:.4rem}
.cancel-card summary{cursor:pointer;font-weight:700}
.cancel-card[open] summary{margin-bottom:.5rem}
/* 循環賽程表產生器 */
.rr-form textarea{width:100%;font:inherit}
.rr-actions{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.2rem 0}
.rr-round h3{margin:1.2rem 0 .4rem}
.rr-table td.vs{color:#64748B;font-size:.85rem;text-align:center;width:2.5rem}
.rr-table td.score{min-width:4.5rem;border-bottom:1px solid #94A3B8}
.rr-stats{margin:1.2rem 0}
@media print{
  header.top,footer.foot,.page-head .crumbs,.rr-form,.rr-actions,.article,.faq,.muted a{display:none!important}
  .rr-round{break-inside:avoid}
  body{background:#fff}
}
/* 社團 */
.grid4{display:grid;grid-template-columns:1fr 1fr 1fr 2fr;gap:0 10px}
@media (max-width:560px){.grid4{grid-template-columns:1fr 1fr}.grid4 label:last-child{grid-column:1/-1}}
.sess-set{border:1px dashed rgba(11,27,63,.3);border-radius:10px;padding:.6rem .9rem;margin:0 0 1rem}
.sess-set legend{font-weight:700;padding:0 .3rem}
.club-box{margin:1.2rem 0}
.club-posts{list-style:none;padding:0}
.club-posts li{border-left:4px solid var(--lime,#D7FF3A);padding:.4rem 0 .4rem .9rem;margin:0 0 1rem}
.club-posts h3{margin:0}
.club-posts time{font-size:.85rem;color:#64748B}
.owner-panel details{margin:1rem 0}
.owner-panel summary{cursor:pointer;font-weight:700}
.filter .btn-s{margin-left:auto}
.lesson-row{display:block}.lesson-row details{margin:.3rem 0}.roster{margin:.3rem 0 .3rem 1.2rem;padding:0}.roster li{margin:.2rem 0}
[data-coach-panel] .form-card h3{margin-top:0}
.t-state{display:inline-block;font-weight:800;padding:.25rem .7rem;border-radius:99px;background:var(--lime);color:var(--navy);margin:0 0 .8rem}
.t-state.t-past,.t-state.t-closed{background:#e5e7eb;color:#475569}.t-state.t-cancel{background:#fee2e2;color:#991b1b}
.t-actions{display:flex;flex-wrap:wrap;gap:10px;margin:1rem 0}
.game-card.t-past,.game-card.t-cancel{opacity:.7}
details.past{margin:1.5rem 0}details.past summary{cursor:pointer;font-weight:700}
/* 程度自評、球友配對 */
.level-table td:nth-child(-n+2),.level-table th:nth-child(-n+2){white-space:nowrap;width:1%}
.lv-q{padding-left:1.4rem}.lv-q li{margin:0 0 1rem}.lv-q fieldset{border:0;padding:0;margin:0}.lv-q legend{font-weight:700;margin-bottom:.3rem}
.lv-opt{display:flex;gap:.5rem;align-items:flex-start;font-weight:400;margin:.25rem 0}.lv-opt input{width:auto;margin-top:.3rem}
.lv-result{margin-top:1.2rem;padding:1rem;border-radius:12px;background:rgba(190,230,60,.15)}.lv-score{font-size:1.3rem}.lv-score b{font-size:1.8rem}
.chip{display:inline-flex;gap:.35rem;align-items:center;font-weight:400;margin:.2rem .6rem .2rem 0}.chip input{width:auto}.chip.big{font-weight:700;margin-bottom:.6rem}
[data-card] fieldset{border:0;padding:0;margin:.6rem 0}[data-card] legend{font-weight:700}
.mt-list{list-style:none;padding:0}.mt-card{border:1px solid rgba(0,0,0,.12);border-radius:12px;padding:.8rem 1rem;margin:.6rem 0}.mt-card p{margin:.2rem 0}.mt-card .hit{font-weight:700;color:#1a7f37}
.article.hl { outline: 3px solid var(--lime); outline-offset: 10px; border-radius: 6px; }