/* 사용자 참고 포스터의 크림·네이비·레드와 복고 야구 인쇄물 분위기.
   게임 진행/기록/XP는 변경하지 않는 시각 레이어입니다. */
:root {
  --color-background:#fff8e4; --color-surface:#fffcf1; --color-surface-alt:#f6edcf;
  --color-text:#203052; --color-muted:#71684f; --color-border:#dccda7;
  --color-primary:#ce2035; --color-primary-hover:#ad1428; --field:#203052;
  --radius:14px; --panel-radius:14px; --control-radius:999px;
}
[data-theme="dark"] {
  --color-background:#17233e; --color-surface:#223453; --color-surface-alt:#2d4160;
  --color-text:#fff6df; --color-muted:#c7c0af; --color-border:#56627a;
  --color-primary:#ff7b85; --color-primary-hover:#ff9ba2; --field:#14213b;
}
body { background-image:url('../assets/patterns/festival-stars.svg'); background-size:360px; }
main,.site-footer { width:min(1180px,calc(100% - 64px)); }
.site-header { width:100%; padding-inline:max(32px,calc((100vw - 1180px)/2)); margin:0; height:108px; position:relative; background:#203052; color:#fff8e4; border:0; }
.site-header:after,.site-footer:before { content:''; position:absolute; left:0; right:0; height:15px; background:linear-gradient(#ce2035 0 5px,#fff8e4 5px 8px,#203052 8px 11px,#fff8e4 11px 13px,#ce2035 13px); }
.site-header:after { bottom:0; }
.wordmark { font-size:32px; color:#ce2035; text-shadow:2px 2px 0 #fff8e4,-1px -1px 0 #fff8e4,1px -1px 0 #fff8e4,-1px 1px 0 #fff8e4; transform:rotate(-4deg); letter-spacing:-1px; }
.site-header .logo-base { background:#fff8e4; }
.navigation a { color:#e6decd; font-size:12px; }
.navigation a[aria-current] { color:#fff8e4; }
.navigation a[aria-current]:after { background:#ef5463; bottom:15px; height:3px; }
.theme-toggle { background:#fff8e4; color:#203052; border:2px solid #fff8e4; }
.theme-toggle:hover { background:#f2dfab; }
.theme-toggle .ui-icon { filter:none; }
.hero { gap:36px; padding:50px 0 34px; align-items:center; }
.hero-copy { padding:14px 0; }
.hero .eyebrow { display:inline-flex; align-items:center; padding:7px 13px; border-radius:999px; background:var(--color-primary); color:var(--color-background); font-size:10px; font-weight:900; letter-spacing:1px; transform:rotate(-3deg); }
.hero .eyebrow>i { background:currentColor; }
.hero h1 { font-size:clamp(45px,5.5vw,76px); line-height:1.15; margin:24px 0 22px; color:var(--color-text); letter-spacing:-3px; font-weight:950; }
.hero h1 em { color:var(--color-primary); text-shadow:2px 2px 0 var(--color-background),4px 4px 0 #d9ba76; }
.title-spark { margin-left:20px; }
.hero-copy>p { color:var(--color-muted); font-size:16px; line-height:1.9; }
.hero-note { font-size:11px; }
.stadium { border:3px solid #203052; border-radius:20px; box-shadow:7px 7px 0 #d9b366; background:#203052; transform:rotate(2deg); isolation:isolate; }
.stadium:after { content:''; position:absolute; inset:0; z-index:-1; background:url('../assets/patterns/festival-stars.svg'); opacity:.9; }
.stadium-top,.stadium-bottom { color:#fff8e4; letter-spacing:1px; }
.stadium-top { font-size:9px; }
.stadium-bottom { font-size:8px; }
.floating-ball { filter:none; transform:rotate(-12deg); }
.floating-ball img { filter:drop-shadow(4px 5px 0 #080f2455); }
.ready-stamp { color:#fff8e4; border:2px solid #fff8e4; border-radius:999px; padding:15px 18px; background:#ce2035; transform:rotate(12deg); }
.ready-stamp strong { font-size:30px; }
.primary-button,.secondary-button { min-height:50px; border:2px solid #203052; border-radius:999px; font-weight:900; box-shadow:3px 3px 0 #203052; letter-spacing:.2px; padding-inline:24px; }
.primary-button { background:#ce2035; color:#fff8e4; }
.secondary-button { background:var(--color-surface); color:var(--color-text); border-color:var(--color-text); box-shadow:3px 3px 0 var(--color-text); }
.primary-button .ui-icon { width:19px; height:19px; }
[data-theme="dark"] .primary-button { background:#ce2035; border-color:#fff0d1; box-shadow:3px 3px 0 #fff0d1; }
[data-theme="dark"] .primary-button:hover { background:#ad1428; }
.text-link,.text-button { color:var(--color-muted); font-weight:700; }
.today-strip { background:var(--color-surface); border:2px solid var(--color-text); border-radius:12px; box-shadow:4px 4px 0 #d9b366; margin-top:12px; }
.today-label>b { color:var(--color-primary); }
.digital,.level { color:var(--color-text); }
.section-heading { padding-top:26px; position:relative; margin-bottom:24px; }
.section-heading:before { content:''; position:absolute; height:12px; left:0; right:0; top:0; background:linear-gradient(#ce2035 0 4px,var(--color-background) 4px 7px,#203052 7px 10px,var(--color-background) 10px); }
.section-heading h2 { font-size:30px; line-height:1.4; letter-spacing:-1.2px; }
.section-heading .eyebrow,.page-heading>.eyebrow,.games-intro>.eyebrow { display:inline-block; color:var(--color-primary); font-size:10px; font-weight:900; }
.game-grid { grid-template-columns:repeat(3,minmax(0,1fr)); gap:22px; }
.game-card { border:2px solid var(--color-text); border-radius:14px; background:var(--color-surface); min-height:330px; padding:22px; box-shadow:4px 4px 0 #d9b366; transform:none; }
.game-card:has(.available-badge) { border-color:var(--color-text); }
.game-card .card-top { color:var(--color-muted); font-family:var(--font); font-size:10px; }
.card-top>span:first-child { display:inline-flex; padding:5px 10px; color:#fff8e4; background:#ce2035; border-radius:999px; font-size:10px; font-weight:900; transform:rotate(-4deg); }
.coming-badge.available-badge { border:0; color:var(--color-primary); font-size:10px; padding:5px 0; }
.card-art { height:126px; margin:12px 0 18px; position:relative; }
.card-art:before { content:''; position:absolute; width:108px; height:108px; background:#efd891; opacity:.65; clip-path:polygon(50% 0,58% 28%,79% 10%,75% 37%,100% 36%,79% 54%,97% 74%,69% 71%,72% 99%,51% 80%,32% 100%,33% 72%,6% 77%,24% 54%,0 38%,29% 36%,22% 10%,44% 27%); transform:rotate(14deg); }
.card-art .game-art-image { width:128px; height:112px; position:relative; z-index:1; transform:rotate(-6deg); }
.art-caption { z-index:2; color:var(--color-muted); font-size:8px; letter-spacing:1px; }
.card-content h3 { font-size:23px; font-weight:950; color:var(--color-text); letter-spacing:-1px; margin-top:9px; }
.card-content p { font-size:14px; line-height:1.8; }
.game-category { font-size:11px; color:var(--color-primary); font-weight:800; }
.card-arrow { background:var(--color-text); color:var(--color-background); border-radius:50%; width:29px; height:29px; display:grid; place-items:center; right:16px; bottom:16px; }
.card-arrow .ui-icon { filter:brightness(0) invert(1); }
.random-card { grid-column:1/-1; min-height:180px; border:2px solid #203052; background:#203052; color:#fff8e4; display:grid; grid-template-columns:110px minmax(0,1fr) auto; column-gap:24px; align-items:center; padding:25px 32px; border-radius:14px; box-shadow:4px 4px 0 #d9b366; }
.random-top { grid-column:2; grid-row:1; justify-content:flex-start; gap:20px; }
.random-top .eyebrow { font-size:9px; color:#eadbb7; }
.random-top>.ui-icon { display:none; }
.random-card .dice { grid-column:1; grid-row:1/4; margin:0; width:90px; }
.random-card .dice .ui-icon { width:90px; height:90px; }
.random-card h3 { grid-column:2; grid-row:2; font-size:36px; line-height:1.2; color:#fff8e4; }
.random-card>p { grid-column:3; grid-row:1/3; font-size:14px; line-height:1.8; opacity:1; color:#e6d9ba; margin:0; }
.random-bottom { grid-column:2/4; grid-row:3; color:#e6d9ba; padding:10px 0 0; margin:8px 0 0; border-color:#b9aa8755; font-size:11px; }
.page-heading,.games-intro { padding-top:42px; }
.page-heading h1,.games-intro h1 { color:var(--color-text); }
.page-heading p,.games-intro p { font-size:15px; line-height:1.9; }
.balance-heading { border-bottom:3px double var(--color-text); }
.balance-heading .eyebrow { display:inline-flex; background:#ce2035; color:#fff8e4; border-radius:999px; padding:5px 10px; font-size:9px; transform:rotate(-2deg); }
.balance-heading h1 { font-weight:950; }
.match-scoreboard,.fortune-power,.manager-board { background:#203052; color:#fff8e4; border-color:#203052; }
.balance-option,.guess-question,.manager-option,.career-action,.draft-profile,.draft-candidate,.fortune-ticket,.fortune-ready,.result-ticket,.guess-result,.manager-result,.career-records,.draft-result,.balance-record,.xp-profile,.xp-section { border:2px solid var(--color-text); box-shadow:4px 4px 0 #d9b366; }
.balance-option.option-b { background:var(--color-surface-alt); }
.match-vs { background:#ce2035; border-color:var(--color-background); }
.option-label { color:var(--color-primary); font-weight:900; }
.balance-option.is-picked { background:#ce2035; color:#fff8e4; }
.guess-difficulty { border:2px solid var(--color-text); box-shadow:4px 4px 0 #d9b366; }
.guess-difficulty>.eyebrow { display:inline-block; padding:5px 9px; border-radius:999px; background:#ce2035; color:#fff8e4; }
.guess-hints li,.draft-potential { background:var(--color-surface-alt); }
.manager-rules,.draft-rules,.career-create-layout { border:2px solid var(--color-text); border-radius:14px; overflow:hidden; }
.career-player-card { border:2px solid var(--color-text); box-shadow:4px 4px 0 #d9b366; }
.career-player-identity,.career-create-art,.draft-picks>div { background:#203052; color:#fff8e4; }
.career-form input,.career-form select,.guess-input-row input,.draft-filters select { border:2px solid var(--color-border); background:var(--color-surface); }
.draft-confirm { border:2px dashed var(--color-primary); border-radius:12px; }
.draft-compare { border:2px dashed var(--color-text); }
.xp-profile { border-top:6px solid #ce2035; }
.xp-level { background:var(--color-surface-alt); border:2px solid var(--color-text); border-radius:12px; transform:rotate(3deg); }
.xp-achievement { border:2px dashed var(--color-border); }
.xp-achievement.is-unlocked { border:2px solid var(--color-primary); background:var(--color-surface); }
.xp-notification { border:2px solid var(--color-text); border-left:6px solid #ce2035; box-shadow:4px 4px 0 #d9b366; }
.site-footer { position:relative; padding-top:38px; margin-top:30px; border:0; }
.site-footer:before { top:0; }
.site-footer .wordmark { font-size:24px; }
.end-line { border-color:var(--color-border); }
@media(hover:hover) and (pointer:fine) {
  .game-card:hover { transform:translateY(-4px) rotate(-.5deg); border-color:var(--color-primary); box-shadow:5px 8px 0 #d9b366; }
  .primary-button:not(:disabled):hover,.secondary-button:not(:disabled):hover { transform:translateY(-2px); box-shadow:4px 5px 0 var(--color-text); }
}
@media(max-width:900px) {
  .game-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; }
  .card-content h3 { font-size:22px; }
  .hero h1 { font-size:52px; }
}
@media(max-width:600px) {
  main,.site-footer { width:calc(100% - 36px); }
  .site-header { height:86px; padding-inline:18px; }
  .site-header .wordmark { font-size:29px; }
  .site-header:after { height:12px; }
  .navigation { background:var(--color-surface); border-top:3px solid #ce2035; padding-top:5px; }
  .navigation a { color:var(--color-muted); font-size:9px; }
  .navigation a[aria-current] { color:var(--color-primary); }
  .navigation a[aria-current]:after { top:-8px; bottom:auto; background:var(--color-text); }
  .navigation .nav-icon .ui-icon { filter:none; }
  [data-theme="dark"] .navigation .nav-icon .ui-icon { filter:brightness(0) invert(1); }
  .hero { gap:24px; padding:26px 0 25px; }
  .hero-copy { padding:0; }
  .hero .eyebrow { font-size:8px; padding:6px 10px; }
  .hero h1 { font-size:45px; line-height:1.2; margin:20px 0 16px; letter-spacing:-2px; }
  .hero-copy>p { font-size:13px; line-height:1.8; max-width:50%; }
  .hero-copy .play-button { min-width:0; padding-inline:15px; font-size:11px; margin:0; gap:10px; }
  .hero-note { margin-top:17px; font-size:10px; }
  .stadium { height:245px; box-shadow:4px 4px 0 #d9b366; border-radius:16px; }
  .ready-stamp { padding:11px 13px; }
  .ready-stamp strong { font-size:23px; }
  .today-strip { margin-top:8px; padding:16px 12px; }
  .today-stats { gap:8px; }
  .today-stats>span+span { padding-left:10px; }
  .section-heading { padding-top:24px; margin-bottom:22px; }
  .section-heading h2 { font-size:24px; }
  .game-grid { grid-template-columns:minmax(0,1fr); gap:18px; }
  .game-card { min-height:205px; display:grid; grid-template-columns:minmax(0,1fr) 87px; grid-template-rows:auto 1fr; padding:17px 17px 21px; column-gap:10px; }
  .game-card .card-top { grid-column:1/-1; margin-bottom:17px; }
  .game-card .card-art { grid-column:2; grid-row:2; margin:0; height:115px; align-self:center; }
  .card-art:before { width:87px; height:87px; }
  .card-art .game-art-image { width:88px; height:98px; }
  .art-caption { display:none; }
  .game-card .card-content { grid-column:1; grid-row:2; align-self:center; }
  .card-content h3 { font-size:21px; line-height:1.45; margin:8px 0; }
  .card-content p { font-size:12px; line-height:1.8; padding-right:0; }
  .game-category { font-size:10px; }
  .card-arrow { width:25px; height:25px; right:13px; bottom:13px; }
  .card-arrow .ui-icon { width:14px; height:14px; }
  .random-card { min-height:225px; grid-template-columns:62px minmax(0,1fr); column-gap:18px; padding:22px; }
  .random-card .dice { grid-column:1; grid-row:1/3; width:60px; }
  .random-card .dice .ui-icon { width:60px; height:60px; }
  .random-top { grid-column:2; grid-row:1; }
  .random-top .eyebrow { font-size:7px; }
  .random-card h3 { grid-column:2; grid-row:2; font-size:25px; }
  .random-card>p { grid-column:1/-1; grid-row:3; margin-top:14px; font-size:13px; }
  .random-card>p>br { display:none; }
  .random-bottom { grid-column:1/-1; grid-row:4; font-size:10px; }
  .primary-button,.secondary-button { min-height:48px; padding-inline:17px; font-size:13px; }
  .page-heading,.games-intro { padding-top:28px; }
  .balance-heading .eyebrow { font-size:8px; }
  .balance-heading h1,.career-page .balance-heading h1 { font-size:25px; }
  .balance-option { padding:20px 18px; }
  .balance-record,.xp-section,.xp-profile { box-shadow:3px 3px 0 #d9b366; }
  .xp-heading h2 { font-size:20px; }
  .xp-level { padding:8px; }
  .xp-stats dd { font-size:23px; }
}
@media(prefers-reduced-motion:reduce) {
  .game-card:hover,.primary-button:hover,.secondary-button:hover { transform:none; }
  .game-card,.primary-button,.secondary-button { transition:none; }
}
@font-face { font-family:'PlayBall Text'; src:url('../assets/fonts/PretendardVariable.woff2') format('woff2'); font-weight:45 920; font-style:normal; font-display:swap; }
@font-face { font-family:'PlayBall Poster'; src:url('../assets/fonts/KBO-Dia-Gothic-Bold.woff') format('woff'); font-weight:700; font-style:normal; font-display:swap; }
:root { --font:'PlayBall Text','Apple SD Gothic Neo','Malgun Gothic',sans-serif; }
body { font-family:var(--font); }
.hero h1,.balance-heading h1,.career-page .balance-heading h1,.section-heading h2,.games-intro h1,.page-heading h1,.card-content h3,.guess-intro h2,.manager-intro h2,.career-intro h2,.draft-intro h2,.fortune-ready h2,.result-ticket h2,.guess-result h2,.manager-result h2,.career-final h2,.draft-result h2 { font-family:'PlayBall Poster',var(--font); font-weight:700; font-style:oblique 12deg; font-synthesis:style; letter-spacing:-.025em; }
.hero h1 { line-height:1.15; }
.card-content h3 { font-size:24px; line-height:1.5; }
@media(max-width:600px) { .hero h1 { font-size:42px; }.card-content h3 { font-size:22px; }.balance-heading h1,.career-page .balance-heading h1 { font-size:26px; } }
/* 모바일 hero는 원래의 세로 흐름을 유지해 버튼 겹침/구장 폭 축소를 방지합니다. */
.primary-button,.secondary-button { border-radius:10px; box-shadow:2px 2px 0 var(--color-text); }
@media(max-width:600px) {
  .hero { align-items:stretch; }
  .hero-copy { width:100%; }
  .hero-copy>p { max-width:none; font-size:14px; }
  .hero-copy .play-button { position:static; width:100%; min-width:0; margin-top:20px; justify-content:center; padding:12px 20px; font-size:14px; gap:16px; }
  .hero-note { margin-top:12px; }
  .stadium { width:100%; min-width:0; height:220px; transform:none; }
  .stadium .floating-ball { top:24px; width:125px; height:125px; left:calc(50% - 62.5px); }
  .stadium .diamond { top:105px; width:95px; height:95px; }
  .stadium .ready-stamp { right:15px; bottom:30px; }
}
/* 첫 화면의 구장 장식을 제거하고 실제 플레이 라인업을 앞쪽에 배치합니다. */
.hero { display:block; padding:36px 0 28px; }
.hero-copy { padding:0; }
.hero-copy .play-button { position:static; margin-top:22px; min-width:180px; }
.hero-note { margin-top:12px; }
@media(min-width:601px) { .hero h1>br { display:none; }.hero h1 em { margin-left:12px; } }
@media(max-width:600px) { .hero { padding:28px 0 24px; }.hero-copy .play-button { min-width:0; margin-top:18px; } }

.hero h1 em { text-shadow:none; }
.end-line>span:last-child { font-size:11px; line-height:1.8; }
/* 이동은 텍스트 레이블로 표시하며 장식 화살표/빈 원형 배지를 쓰지 않습니다. */
.primary-button,.secondary-button { justify-content:center; }
.card-arrow { display:none; }
.today-stats a { display:inline-flex; align-items:center; min-height:44px; font-size:11px; white-space:nowrap; }