/* ── 공용 베이스 (design.md · Ably 라이트) ──
   index.html 의 인라인 토큰과 같은 값입니다. 단독 페이지(worldcup.html · venue.html)가 읽습니다. */
:root {
  --pink: #FA2E5F;
  --pink-press: #e02955;
  --pink-disabled: #FFC2D2;
  --pink-soft: #FFF0F4;
  --mint: #00C8B4;
  --canvas: #FFFFFF;
  --fg: #222222;
  --body: #333333;
  --secondary: #666666;
  --muted: #999999;
  --lightest: #BBBBBB;
  --fill: #F5F5F5;
  --subtle: #FAFAFA;
  --hairline: #EEEEEE;
  --border-subtle: #F0F0F0;
  --success: #00C896;
  --error: #F0124B;
  --r-sm: 4px;
  --r-md: 8px;
  --r-lg: 12px;
  --r-xl: 16px;
  --r-full: 9999px;
  --sh-subtle: 0px 1px 2px rgba(0, 0, 0, 0.04);
  --sh-standard: 0px 2px 8px rgba(0, 0, 0, 0.08);
  --sh-elevated: 0px 4px 16px rgba(0, 0, 0, 0.12);
  --font: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
  --maxw: 1080px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  font-family: var(--font);
  background: var(--canvas);
  color: var(--body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.5;
  word-break: keep-all;
}
body.is-locked { overflow: hidden; }
h1, h2, h3, h4, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }
button { font-family: inherit; }
a { color: inherit; }
img { max-width: 100%; display: block; }
svg { display: block; }

.icon {
  width: 24px; height: 24px;
  stroke: currentColor; stroke-width: 2; fill: none;
  stroke-linecap: round; stroke-linejoin: round;
  flex: 0 0 auto;
}
.icon-sm { width: 16px; height: 16px; }
.icon-xs { width: 14px; height: 14px; }

/* 버튼 — index.html 과 동일 */
.btn-primary, .btn-secondary {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  font-size: 16px; padding: 16px 22px;
  border-radius: var(--r-md); text-decoration: none; cursor: pointer;
  transition: background .15s, transform .12s, border-color .15s;
}
.btn-primary {
  background: var(--pink); color: #fff; font-weight: 700; border: none;
  box-shadow: 0 8px 22px rgba(250, 46, 95, 0.26);
}
.btn-primary:hover { background: var(--pink-press); }
.btn-primary:active { transform: scale(0.985); }
.btn-primary:disabled { background: var(--pink-disabled); box-shadow: none; cursor: default; }
.btn-secondary {
  background: var(--canvas); color: var(--fg); font-weight: 600; border: 1px solid #DDDDDD;
}
.btn-secondary:hover { background: var(--subtle); border-color: var(--muted); }
.btn-secondary:active { transform: scale(0.985); }
.btn-sm { font-size: 14px; padding: 11px 16px; }

/* 칩 */
.chip {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 12px; font-weight: 600; line-height: 1;
  padding: 6px 9px; border-radius: var(--r-sm);
  background: var(--fill); color: var(--secondary);
}
.chip-pink { background: var(--pink-soft); color: var(--pink); }
.chip-dark { background: #2B2B2B; color: #fff; }
.chip-light { background: #FFF7E6; color: #9A6B00; }

/* 상단 바 (단독 페이지) */
.topbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 0 14px;
  background: rgba(255, 255, 255, .92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--hairline);
}
.topbar .tb-back, .topbar .tb-x {
  width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
  border: none; background: transparent; color: var(--fg); border-radius: var(--r-md); cursor: pointer; text-decoration: none;
}
.topbar .tb-back:hover, .topbar .tb-x:hover { background: var(--fill); }
.topbar .tb-brand {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 700; color: var(--pink); text-decoration: none; letter-spacing: -0.01em;
}
.topbar .tb-title { flex: 1; text-align: center; font-size: 15px; font-weight: 700; color: var(--fg); }
.topbar .tb-spacer { width: 36px; }

/* 토스트 */
.ui-toast {
  position: fixed; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); z-index: 400;
  transform: translate(-50%, 12px); opacity: 0; pointer-events: none;
  max-width: calc(100% - 32px); padding: 12px 16px;
  background: rgba(34, 34, 34, .94); color: #fff; font-size: 13.5px; font-weight: 600;
  border-radius: var(--r-md); box-shadow: var(--sh-elevated);
  transition: transform .2s, opacity .2s;
}
.ui-toast.is-on { transform: translate(-50%, 0); opacity: 1; }

/* 스크린리더 전용 */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}