/* ============================================================================
   jaycy.uk · Wanted Lab Montage (WDS) 디자인 시스템 적용
   - Pretendard Variable / Primary Blue #0066FF / Cool Neutral 회색 톤
   - 카드: 12px 라운드 + 1px inset 헤어라인 (호버 시 그림자)
   - 라이트 / 다크 모드 토큰 모두 정의
   ============================================================================ */

:root {
  /* ----- ATOMIC ----- */
  --atomic-blue-40: #0054D1;
  --atomic-blue-45: #005EEB;
  --atomic-blue-50: #0066FF;
  --atomic-blue-55: #1A75FF;
  --atomic-blue-60: #3385FF;
  --atomic-coolNeutral-10: #171719;
  --atomic-coolNeutral-15: #1B1C1E;
  --atomic-coolNeutral-22: #2E2F33;
  --atomic-coolNeutral-25: #37383C;
  --atomic-coolNeutral-96: #E1E2E4;
  --atomic-coolNeutral-97: #EAEBEC;
  --atomic-coolNeutral-98: #F4F4F5;
  --atomic-coolNeutral-99: #F7F7F8;
  --atomic-red-40: #E52222;
  --atomic-red-50: #FF4242;
  --atomic-orange-39: #D17600;
  --atomic-orange-50: #FF9200;
  --atomic-green-40: #009632;
  --atomic-green-50: #00BF40;
  --atomic-violet-45: #5B37ED;
  --atomic-pink-46: #E846CD;
  --atomic-cyan-40: #0098B2;

  /* ----- SEMANTIC (LIGHT) ----- */
  --semantic-primary-normal: var(--atomic-blue-50);
  --semantic-primary-strong: var(--atomic-blue-45);
  --semantic-primary-heavy: var(--atomic-blue-40);

  --semantic-label-normal: var(--atomic-coolNeutral-10);
  --semantic-label-strong: #000000;
  --semantic-label-neutral: rgba(46, 47, 51, 0.88);
  --semantic-label-alternative: rgba(55, 56, 60, 0.61);
  --semantic-label-assistive: rgba(55, 56, 60, 0.28);

  --semantic-background-normal-normal: #ffffff;
  --semantic-background-normal-alternative: var(--atomic-coolNeutral-99);
  --semantic-background-elevated-normal: #ffffff;

  --semantic-line-normal-normal: rgba(112, 115, 124, 0.22);
  --semantic-line-normal-neutral: rgba(112, 115, 124, 0.16);
  --semantic-line-normal-alternative: rgba(112, 115, 124, 0.08);
  --semantic-line-solid-normal: var(--atomic-coolNeutral-96);

  --semantic-status-positive: var(--atomic-green-50);
  --semantic-status-cautionary: var(--atomic-orange-50);
  --semantic-status-negative: var(--atomic-red-50);

  --semantic-fill-normal: rgba(112, 115, 124, 0.08);
  --semantic-fill-strong: rgba(112, 115, 124, 0.16);
  --semantic-fill-alternative: rgba(112, 115, 124, 0.05);

  --semantic-accent-fg-blue: var(--atomic-blue-45);
  --semantic-accent-fg-red: var(--atomic-red-40);
  --semantic-accent-fg-orange: var(--atomic-orange-39);
  --semantic-accent-fg-green: var(--atomic-green-40);
  --semantic-accent-fg-violet: var(--atomic-violet-45);
  --semantic-accent-fg-pink: var(--atomic-pink-46);
  --semantic-accent-fg-cyan: var(--atomic-cyan-40);

  /* ----- ELEVATION ----- */
  --shadow-xsmall: 0px 1px 2px -1px rgba(23, 23, 23, 0.10);
  --shadow-small: 0px 2px 4px -2px rgba(23, 23, 23, 0.06),
    0px 4px 6px -1px rgba(23, 23, 23, 0.06);
  --shadow-medium: 0px 4px 6px -2px rgba(23, 23, 23, 0.07),
    0px 10px 15px -3px rgba(23, 23, 23, 0.07);

  /* ----- RADIUS ----- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-pill: 9999px;

  /* ----- FONT ----- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system,
    BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Noto Sans KR",
    "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", sans-serif;
  --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
}

/* ----- DARK ----- */
[data-theme="dark"] {
  --semantic-primary-normal: var(--atomic-blue-60);
  --semantic-primary-strong: var(--atomic-blue-55);
  --semantic-label-normal: var(--atomic-coolNeutral-99);
  --semantic-label-strong: #ffffff;
  --semantic-label-neutral: rgba(194, 196, 200, 0.88);
  --semantic-label-alternative: rgba(174, 176, 182, 0.61);
  --semantic-background-normal-normal: var(--atomic-coolNeutral-15);
  --semantic-background-normal-alternative: #0F0F10;
  --semantic-background-elevated-normal: #212225;
  --semantic-line-normal-normal: rgba(112, 115, 124, 0.32);
  --semantic-line-normal-alternative: rgba(112, 115, 124, 0.22);
  --semantic-line-solid-normal: var(--atomic-coolNeutral-25);
  --semantic-fill-normal: rgba(112, 115, 124, 0.22);
  --semantic-fill-alternative: rgba(112, 115, 124, 0.12);
}

/* ============ RESET ============ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--semantic-background-normal-alternative);
  color: var(--semantic-label-normal);
  font-family: var(--font-sans);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
button { font-family: inherit; }
input, textarea, select { font-family: inherit; color: inherit; }
img { display: block; }
a { color: var(--semantic-primary-normal); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ============ HEADER ============ */
.header {
  position: sticky; top: 0; z-index: 50;
  background: var(--semantic-background-normal-normal);
  box-shadow: inset 0 -1px 0 var(--semantic-line-normal-alternative);
}
[data-theme="dark"] .header {
  background: rgba(28, 28, 30, 0.84);
  backdrop-filter: blur(32px);
  -webkit-backdrop-filter: blur(32px);
}
.header-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; align-items: center; gap: 16px;
  padding: 0 24px; height: 64px;
}
.brand {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; color: inherit; cursor: pointer; flex-shrink: 0;
}
.brand-mark {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--semantic-primary-normal);
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff;
  font: 700 1rem/1 var(--font-sans); letter-spacing: -0.02em;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.1; }
.brand-name {
  font: 700 1.0625rem/1.25rem var(--font-sans); letter-spacing: -0.02em;
}
.brand-sub {
  font: 500 0.6875rem/0.875rem var(--font-sans); letter-spacing: 0.0311em;
  color: var(--semantic-label-alternative); text-transform: uppercase;
}
.nav { display: flex; align-items: center; gap: 2px; margin-left: 8px; }
.nav a {
  padding: 8px 14px; border-radius: 8px;
  text-decoration: none; cursor: pointer;
  color: var(--semantic-label-neutral);
  font: 500 0.9375rem/1.375rem var(--font-sans); letter-spacing: 0.0096em;
  transition: background .2s ease, color .2s ease;
}
.nav a:hover {
  background: var(--semantic-fill-alternative);
  color: var(--semantic-label-normal);
}
.nav a.active {
  color: var(--semantic-primary-normal);
  background: rgba(0, 102, 255, 0.06);
  font-weight: 600;
}
[data-theme="dark"] .nav a.active { background: rgba(51, 133, 255, 0.12); }
.header-right {
  margin-left: auto; display: flex; align-items: center; gap: 6px;
}
.icon-btn {
  width: 38px; height: 38px; border-radius: 10px; border: none;
  background: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--semantic-label-neutral); cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.icon-btn:hover {
  background: var(--semantic-fill-alternative);
  color: var(--semantic-label-normal);
}

/* ============ PAGE ============ */
.page {
  max-width: 1280px; width: 100%; margin: 0 auto;
  padding: 32px 24px 80px;
}
@media (max-width: 640px) { .page { padding: 20px 16px 64px; } }

.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; margin-bottom: 28px; flex-wrap: wrap;
}
.page-head h1 {
  margin: 0;
  font: 700 2rem/2.75rem var(--font-sans); letter-spacing: -0.0253em;
}
.page-head .crumb {
  margin-bottom: 6px;
  display: flex; align-items: center; gap: 6px;
  font: 500 0.8125rem/1.125rem var(--font-sans); letter-spacing: 0.0194em;
  color: var(--semantic-label-alternative);
}
.page-head .sub {
  margin-top: 6px;
  color: var(--semantic-label-neutral);
  font: 400 0.9375rem/1.5rem var(--font-sans); letter-spacing: 0.0096em;
}

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 12px; margin: 0 0 16px;
}
.section-head h2 {
  margin: 0;
  font: 700 1.375rem/1.875rem var(--font-sans); letter-spacing: -0.0194em;
}

/* ============ BUTTONS ============ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: none; cursor: pointer;
  font-family: var(--font-sans);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
  white-space: nowrap; text-decoration: none;
}
.btn:disabled { cursor: not-allowed; opacity: .5; }
.btn.size-sm {
  padding: 7px 12px; border-radius: 8px;
  font: 600 0.875rem/1.25rem var(--font-sans); letter-spacing: 0.0145em;
}
.btn.size-md {
  padding: 10px 16px; border-radius: 10px;
  font: 600 0.9375rem/1.375rem var(--font-sans); letter-spacing: 0.0096em;
}
.btn.size-lg {
  padding: 13px 22px; border-radius: 12px;
  font: 600 1rem/1.5rem var(--font-sans); letter-spacing: 0.0057em;
}
.btn.primary { background: var(--semantic-primary-normal); color: #fff; }
.btn.primary:hover { background: var(--semantic-primary-strong); text-decoration: none; }
.btn.secondary {
  background: var(--semantic-fill-alternative);
  color: var(--semantic-label-normal);
}
.btn.secondary:hover { background: var(--semantic-fill-normal); text-decoration: none; }
.btn.outlined {
  background: transparent; color: var(--semantic-label-normal);
  box-shadow: inset 0 0 0 1px var(--semantic-line-normal-normal);
}
.btn.outlined:hover { background: var(--semantic-fill-alternative); text-decoration: none; }
.btn.ghost { background: transparent; color: var(--semantic-label-neutral); }
.btn.ghost:hover {
  background: var(--semantic-fill-alternative);
  color: var(--semantic-label-normal);
  text-decoration: none;
}

/* ============ CHIPS ============ */
.chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: 8px; border: none; cursor: pointer;
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--semantic-line-normal-neutral);
  color: var(--semantic-label-normal);
  font: 500 0.875rem/1.25rem var(--font-sans); letter-spacing: 0.0145em;
  transition: background .25s ease, color .25s ease, box-shadow .25s ease;
  text-decoration: none;
}
.chip:hover {
  background: var(--semantic-fill-alternative);
  text-decoration: none;
}
.chip.on {
  color: var(--semantic-primary-normal);
  background: rgba(0, 102, 255, 0.05);
  box-shadow: inset 0 0 0 1px rgba(0, 102, 255, 0.43);
}
[data-theme="dark"] .chip.on { background: rgba(51, 133, 255, 0.12); }

/* solid chips for category/status badges */
.chip.solid {
  box-shadow: none;
  background: var(--semantic-fill-alternative);
  color: var(--semantic-label-neutral);
  cursor: default;
  padding: 3px 8px; border-radius: 6px;
  font: 600 0.75rem/1rem var(--font-sans); letter-spacing: 0.0252em;
}
.chip.solid.blue { background: rgba(0, 102, 255, 0.08); color: var(--semantic-accent-fg-blue); }
.chip.solid.red { background: rgba(255, 66, 66, 0.10); color: var(--semantic-accent-fg-red); }
.chip.solid.orange { background: rgba(255, 146, 0, 0.12); color: var(--semantic-accent-fg-orange); }
.chip.solid.green { background: rgba(0, 191, 64, 0.10); color: var(--semantic-accent-fg-green); }
.chip.solid.violet { background: rgba(101, 65, 242, 0.10); color: var(--semantic-accent-fg-violet); }
.chip.solid.pink { background: rgba(245, 83, 218, 0.10); color: var(--semantic-accent-fg-pink); }
.chip.solid.gray {
  background: var(--semantic-fill-alternative); color: var(--semantic-label-neutral);
}

/* ============ CARDS ============ */
.card {
  background: var(--semantic-background-normal-normal);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--semantic-line-normal-alternative);
}
.card.padded { padding: 24px; }
@media (max-width: 640px) { .card.padded { padding: 18px; } }

/* ============ ROW LIST (게시글 목록) ============ */
.row-list {
  display: flex; flex-direction: column;
  background: var(--semantic-background-normal-normal);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--semantic-line-normal-alternative);
  overflow: hidden;
}
.row {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 20px; cursor: pointer;
  text-decoration: none; color: inherit;
  transition: background .2s ease;
  position: relative;
}
.row:not(:last-child) {
  box-shadow: inset 0 -1px 0 var(--semantic-line-normal-alternative);
}
.row:hover { background: var(--semantic-fill-alternative); text-decoration: none; }
.row .thumb {
  width: 44px; height: 44px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #0066FF 0%, #001536 100%);
  font: 700 0.9375rem/1 var(--font-sans);
}
.row .thumb.violet { background: linear-gradient(135deg, #6541F2 0%, #001536 100%); }
.row .thumb.cyan { background: linear-gradient(135deg, #00BDDE 0%, #003E9C 100%); }
.row .thumb.orange { background: linear-gradient(135deg, #FF5E00 0%, #C94A00 100%); }
.row .thumb.green { background: linear-gradient(135deg, #00BF40 0%, #003E9C 100%); }
.row .thumb.pink { background: linear-gradient(135deg, #F553DA 0%, #4F29E5 100%); }
.row .thumb.gray { background: linear-gradient(135deg, #46474C 0%, #1B1C1E 100%); }
.row .body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.row .ti {
  font: 600 1rem/1.5rem var(--font-sans); letter-spacing: 0.0057em;
  color: var(--semantic-label-normal);
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; overflow: hidden;
}
.row .summary {
  font: 400 0.875rem/1.25rem var(--font-sans); letter-spacing: 0.0145em;
  color: var(--semantic-label-neutral);
  display: -webkit-box; -webkit-box-orient: vertical;
  -webkit-line-clamp: 1; overflow: hidden;
}
.row .meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font: 500 0.8125rem/1.125rem var(--font-sans); letter-spacing: 0.0194em;
  color: var(--semantic-label-alternative);
}
.row .meta .sep {
  width: 2px; height: 2px; border-radius: 9999px;
  background: currentColor; opacity: .6;
}
.row .right {
  display: flex; align-items: center; gap: 10px; flex-shrink: 0;
}
.row .date {
  font: 500 0.8125rem/1.125rem var(--font-sans); letter-spacing: 0.0194em;
  color: var(--semantic-label-alternative);
}

/* ============ TOOLBAR / SEARCH / FILTERS ============ */
.list-toolbar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 18px;
}
.search-input {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 14px; border-radius: 10px;
  background: var(--semantic-background-normal-normal);
  box-shadow: inset 0 0 0 1px var(--semantic-line-normal-neutral);
  flex: 1; min-width: 200px; max-width: 400px;
}
.search-input input {
  flex: 1; border: none; outline: none; background: transparent;
  font: 400 0.9375rem/1.375rem var(--font-sans); letter-spacing: 0.0096em;
  color: var(--semantic-label-normal);
}
.search-input input::placeholder { color: var(--semantic-label-alternative); }
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* form-style filter (select-based) */
.filter-form {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.filter-form select {
  padding: 8px 14px;
  background: var(--semantic-background-normal-normal);
  box-shadow: inset 0 0 0 1px var(--semantic-line-normal-neutral);
  border: none; border-radius: 10px;
  color: var(--semantic-label-normal);
  font: 500 0.875rem/1.25rem var(--font-sans); letter-spacing: 0.0145em;
  cursor: pointer; outline: none;
}
.filter-form select:focus {
  box-shadow: inset 0 0 0 2px rgba(0, 102, 255, 0.43);
}

/* ============ FORM (글 작성) ============ */
.form-grid { display: flex; flex-direction: column; gap: 18px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label {
  font: 600 0.875rem/1.25rem var(--font-sans); letter-spacing: 0.0145em;
  color: var(--semantic-label-normal);
}
.form-row .help {
  font: 400 0.8125rem/1.125rem var(--font-sans); letter-spacing: 0.0194em;
  color: var(--semantic-label-alternative);
}
.form-row input[type="text"],
.form-row textarea,
.form-row select {
  width: 100%; padding: 11px 14px;
  background: var(--semantic-background-normal-normal);
  border: none; border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--semantic-line-solid-normal);
  color: var(--semantic-label-normal);
  font: 400 0.9375rem/1.375rem var(--font-sans); letter-spacing: 0.0096em;
  outline: none; transition: box-shadow .2s ease;
}
.form-row textarea { min-height: 160px; resize: vertical; line-height: 1.6; }
.form-row input:focus,
.form-row textarea:focus,
.form-row select:focus {
  box-shadow: inset 0 0 0 2px rgba(0, 102, 255, 0.43);
}
.form-row .row2 {
  display: grid; grid-template-columns: 1fr 1fr; gap: 12px;
}
@media (max-width: 540px) { .form-row .row2 { grid-template-columns: 1fr; } }

.form-actions {
  display: flex; justify-content: flex-end; gap: 8px; margin-top: 8px;
}

.required { color: var(--semantic-status-negative); margin-left: 2px; }

/* ============ ESPORTS FEATURE (대회 대진표 히어로) ============ */
.esp-feature {
  position: relative;
  border-radius: 16px; overflow: hidden;
  background: linear-gradient(135deg, #001536 0%, #002966 50%, #0066FF 100%);
  color: #fff;
  padding: 32px;
  display: grid; grid-template-columns: 1.5fr 1fr; gap: 24px;
  margin-bottom: 32px;
}
@media (max-width: 880px) {
  .esp-feature { grid-template-columns: 1fr; padding: 22px; }
}
.esp-feature .grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}
.esp-feature .body {
  position: relative; display: flex; flex-direction: column; gap: 14px;
}
.esp-feature .live {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 10px; border-radius: 9999px;
  background: rgba(255, 66, 66, 0.18);
  width: fit-content;
  font: 700 0.75rem/1rem var(--font-sans); letter-spacing: 0.0252em;
  text-transform: uppercase;
  color: #fff;
}
.esp-feature .live .pulse {
  width: 7px; height: 7px; border-radius: 9999px; background: #FF6363;
  animation: pulse 1.4s ease-in-out infinite;
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .4; }
}
.esp-feature h2 {
  margin: 0;
  font: 700 2rem/2.5rem var(--font-sans); letter-spacing: -0.0253em;
  color: #fff;
}
.esp-feature p {
  margin: 0; color: rgba(255,255,255,.78);
  font: 400 0.9375rem/1.5rem var(--font-sans); letter-spacing: 0.0096em;
  max-width: 480px;
}
.esp-feature .meta-row {
  display: flex; flex-wrap: wrap; gap: 16px; margin-top: 6px;
  font: 500 0.8125rem/1.125rem var(--font-sans); letter-spacing: 0.0194em;
  color: rgba(255,255,255,.7);
}
.esp-feature .meta-row .item {
  display: flex; align-items: center; gap: 6px;
}
.esp-feature .cta-row {
  display: flex; gap: 8px; margin-top: 8px;
}
.esp-feature .cta-row .btn.outlined {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.3);
  color: #fff;
}
.esp-feature .cta-row .btn.outlined:hover {
  background: rgba(255,255,255,.08);
}
.esp-feature .bracket {
  position: relative;
  background: rgba(0,0,0,.22);
  border-radius: 12px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  font: 500 0.8125rem/1.125rem var(--font-sans); letter-spacing: 0.0194em;
}
.esp-feature .bracket .ti {
  font: 600 0.75rem/1rem var(--font-sans); letter-spacing: 0.0252em;
  color: rgba(255,255,255,.6);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.match {
  display: flex; align-items: center; justify-content: space-between;
  padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,.06);
  font: 500 0.875rem/1.25rem var(--font-sans); letter-spacing: 0.0145em;
  gap: 8px;
}
.match.live { box-shadow: inset 0 0 0 1px rgba(255,99,99,.4); }
.match .team {
  display: flex; align-items: center; gap: 8px;
  flex: 1; min-width: 0;
}
.match .team .lg {
  width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0;
}
.match .team.win { font-weight: 700; }
.match .team.lose { opacity: .55; }
.match .score {
  font: 700 0.875rem/1.25rem var(--font-sans); letter-spacing: 0;
  display: flex; align-items: center; gap: 4px;
  color: rgba(255,255,255,.9);
}
.match .vs {
  font: 600 0.75rem/1rem var(--font-sans); letter-spacing: 0.0252em;
  color: rgba(255,255,255,.5);
  padding: 0 6px;
}

/* ============ TOURNAMENT CARDS ============ */
.tourn-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;
}
@media (max-width: 980px) { .tourn-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .tourn-grid { grid-template-columns: 1fr; } }

.tourn-card {
  background: var(--semantic-background-normal-normal);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--semantic-line-normal-alternative);
  overflow: hidden;
  cursor: pointer;
  text-decoration: none; color: inherit;
  transition: transform .2s ease, box-shadow .2s ease;
  display: flex; flex-direction: column;
}
.tourn-card:hover {
  box-shadow: var(--shadow-small),
    inset 0 0 0 1px var(--semantic-line-normal-normal);
  transform: translateY(-1px);
  text-decoration: none;
}
.tourn-banner {
  position: relative; aspect-ratio: 16/9;
  display: flex; align-items: flex-end; padding: 14px;
  overflow: hidden;
}
.tourn-banner.game-lol  { background: linear-gradient(135deg, #C28F2C 0%, #001536 100%); }
.tourn-banner.game-val  { background: linear-gradient(135deg, #FF4655 0%, #1B1C1E 100%); }
.tourn-banner.game-pubg { background: linear-gradient(135deg, #F5A623 0%, #1B1C1E 100%); }
.tourn-banner.game-fc   { background: linear-gradient(135deg, #00BF40 0%, #003E9C 100%); }
.tourn-banner.game-tkn  { background: linear-gradient(135deg, #9b1c1c 0%, #ec4899 100%); }
.tourn-banner.game-tft  { background: linear-gradient(135deg, #6541F2 0%, #001536 100%); }
.tourn-banner.game-ow   { background: linear-gradient(135deg, #FF9200 0%, #4F29E5 100%); }
.tourn-banner.game-기타 { background: linear-gradient(135deg, #46474C 0%, #1B1C1E 100%); }
.tourn-banner::after {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size: 24px 24px;
  mask-image: radial-gradient(ellipse at top right, #000 20%, transparent 70%);
  pointer-events: none;
}
.tourn-banner .game-tag {
  position: absolute; top: 14px; left: 14px;
  background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(8px);
  color: #fff; border-radius: 6px; padding: 4px 8px;
  font: 700 0.6875rem/0.875rem var(--font-sans); letter-spacing: 0.0311em;
  text-transform: uppercase; z-index: 1;
}
.tourn-banner .status-tag {
  position: absolute; top: 14px; right: 14px;
  border-radius: 9999px; padding: 3px 10px;
  font: 700 0.6875rem/0.875rem var(--font-sans); letter-spacing: 0.0311em;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 5px;
  z-index: 1;
}
.tourn-banner .status-tag.live { background: #FF4242; color: #fff; }
.tourn-banner .status-tag.live .pulse {
  width: 6px; height: 6px; border-radius: 9999px; background: #fff;
  animation: pulse 1.4s ease-in-out infinite;
}
.tourn-banner .status-tag.upcoming {
  background: rgba(255, 255, 255, 0.92); color: #171719;
}
.tourn-banner .status-tag.ended {
  background: rgba(255, 255, 255, 0.18); color: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(8px);
}
.tourn-banner .ti {
  position: relative; z-index: 1;
  color: #fff;
  font: 700 1.125rem/1.5rem var(--font-sans); letter-spacing: -0.012em;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
}
.tourn-body {
  padding: 16px; display: flex; flex-direction: column; gap: 8px;
}
.tourn-body .row1 {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.tourn-body .prize {
  font: 600 0.875rem/1.25rem var(--font-sans); letter-spacing: 0.0145em;
  color: var(--semantic-label-normal);
}
.tourn-body .meta {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font: 500 0.8125rem/1.125rem var(--font-sans); letter-spacing: 0.0194em;
  color: var(--semantic-label-alternative);
}
.tourn-body .meta .sep {
  width: 2px; height: 2px; border-radius: 9999px;
  background: currentColor; opacity: .6;
}

/* ============ COIN TOSS ============ */
.hint-keys {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font: 500 0.8125rem/1.125rem var(--font-sans); letter-spacing: 0.0194em;
  color: var(--semantic-label-alternative);
}
.kbd {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--semantic-fill-alternative);
  box-shadow: inset 0 0 0 1px var(--semantic-line-normal-alternative);
  font: 600 0.75rem/1rem var(--font-mono);
  color: var(--semantic-label-normal);
  margin-right: 4px;
}

.ct-grid {
  display: grid;
  grid-template-columns: 1fr 1.4fr 1fr;
  gap: 16px;
  align-items: stretch;
}
.ct-grid > .ct-history { grid-column: 1 / -1; }
@media (max-width: 980px) {
  .ct-grid {
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "blue red"
      "stage stage"
      "history history";
  }
  .ct-grid > .ct-blue { grid-area: blue; }
  .ct-grid > .ct-red { grid-area: red; }
  .ct-grid > .ct-stage { grid-area: stage; }
  .ct-grid > .ct-history { grid-area: history; }
}
@media (max-width: 640px) {
  .ct-grid {
    grid-template-columns: 1fr;
    grid-template-areas:
      "stage"
      "blue"
      "red"
      "history";
  }
}

/* Team cards */
.ct-team {
  display: flex; flex-direction: column; gap: 12px;
  position: relative;
}
.ct-team::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0;
  width: 4px; border-radius: 12px 0 0 12px;
}
.ct-blue::before { background: #0066FF; }
.ct-red::before  { background: #FF4242; }

.ct-team-label {
  font: 700 0.75rem/1rem var(--font-sans); letter-spacing: 0.0311em;
  text-transform: uppercase;
}
.ct-blue .ct-team-label { color: #0066FF; }
.ct-red  .ct-team-label { color: #FF4242; }

.ct-team-input {
  width: 100%; padding: 10px 14px;
  background: var(--semantic-background-normal-normal);
  border: none; border-radius: 10px;
  box-shadow: inset 0 0 0 1px var(--semantic-line-solid-normal);
  color: var(--semantic-label-normal);
  font: 700 1.125rem/1.625rem var(--font-sans); letter-spacing: -0.002em;
  outline: none; transition: box-shadow .2s ease;
}
.ct-team-input:focus {
  box-shadow: inset 0 0 0 2px rgba(0, 102, 255, 0.43);
}

.ct-pick-row {
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px;
}
.ct-pick {
  padding: 10px 12px;
  border: none; border-radius: 10px; cursor: pointer;
  background: var(--semantic-fill-alternative);
  color: var(--semantic-label-normal);
  font: 600 0.875rem/1.25rem var(--font-sans); letter-spacing: 0.0145em;
  font-family: var(--font-sans);
  transition: background .2s ease, color .2s ease, box-shadow .2s ease;
}
.ct-pick:hover:not(:disabled) {
  background: var(--semantic-fill-normal);
}
.ct-pick.active {
  color: #fff;
}
.ct-blue .ct-pick.active { background: #0066FF; }
.ct-red  .ct-pick.active { background: #FF4242; }
.ct-pick:disabled { cursor: not-allowed; }

.ct-banner {
  margin-top: auto;
  padding: 12px 14px;
  border-radius: 10px;
  background: var(--semantic-fill-alternative);
  color: var(--semantic-label-neutral);
  font: 600 0.9375rem/1.375rem var(--font-sans); letter-spacing: 0.0096em;
  text-align: center;
  transition: background .3s ease, color .3s ease;
}
.ct-banner.win {
  color: #fff;
  font-weight: 700;
}
.ct-blue .ct-banner.win { background: #0066FF; }
.ct-red  .ct-banner.win { background: #FF4242; }

/* Stage */
.ct-stage {
  display: flex; flex-direction: column; gap: 16px;
  align-items: stretch; justify-content: space-between;
  background: linear-gradient(180deg,
    var(--semantic-background-normal-normal) 0%,
    var(--semantic-background-normal-alternative) 100%);
}
.ct-scene {
  position: relative;
  height: 280px;
  display: flex; align-items: center; justify-content: center;
  perspective: 1200px;
}
.ct-coin {
  width: 140px; height: 140px;
  position: relative;
  transform-style: preserve-3d;
  transform-origin: center;
  will-change: transform;
}
.ct-face {
  position: absolute; inset: 0;
  border-radius: 9999px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  font-family: var(--font-sans);
  color: #1A1A1A;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  box-shadow:
    inset 0 6px 14px rgba(255,255,255,0.55),
    inset 0 -6px 14px rgba(0,0,0,0.18),
    0 12px 28px rgba(23,23,23,0.22);
}
.ct-face.heads {
  background: radial-gradient(circle at 30% 25%, #FFE596 0%, #F5C451 45%, #C28F2C 100%);
}
.ct-face.tails {
  background: radial-gradient(circle at 30% 25%, #FFE596 0%, #F5C451 45%, #C28F2C 100%);
  transform: rotateX(180deg);
}
.ct-glyph {
  font: 800 3.5rem/1 var(--font-sans);
  letter-spacing: -0.03em;
  color: #6E4A12;
  text-shadow: 0 1px 0 rgba(255,255,255,0.5);
}
.ct-glyph-small {
  font: 700 0.6875rem/0.875rem var(--font-sans);
  letter-spacing: 0.12em;
  color: #6E4A12;
  margin-top: 4px;
}
.ct-edge {
  position: absolute; inset: 0;
  border-radius: 9999px;
  border: 4px solid rgba(0,0,0,0.18);
  pointer-events: none;
  transform: translateZ(-2px);
}
.ct-coin-shadow {
  position: absolute; left: 50%; bottom: 18px;
  transform: translateX(-50%);
  width: 120px; height: 14px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(0,0,0,0.28) 0%, transparent 70%);
  filter: blur(2px);
}

.ct-result {
  text-align: center;
  font: 500 0.9375rem/1.5rem var(--font-sans); letter-spacing: 0.0096em;
  color: var(--semantic-label-neutral);
  padding: 8px 0;
}
.ct-result strong {
  color: var(--semantic-primary-normal);
  font-weight: 700;
}
.ct-stage.win .ct-result strong { color: var(--semantic-status-positive); }

.ct-controls {
  display: flex; flex-direction: column; align-items: center; gap: 10px;
}
.ct-secondary {
  display: flex; gap: 6px;
}

/* History */
.ct-history-list {
  display: flex; flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--semantic-line-normal-alternative);
}
.ct-history-empty {
  padding: 24px; text-align: center;
  color: var(--semantic-label-alternative);
  font: 400 0.875rem/1.25rem var(--font-sans); letter-spacing: 0.0145em;
  font-style: italic;
}
.ct-history-item {
  display: grid;
  grid-template-columns: 56px 38px 1fr auto auto;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  font: 500 0.875rem/1.25rem var(--font-sans); letter-spacing: 0.0145em;
}
.ct-history-item:not(:last-child) {
  box-shadow: inset 0 -1px 0 var(--semantic-line-normal-alternative);
}
.ct-h-idx {
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--semantic-label-alternative);
}
.ct-h-result {
  width: 32px; height: 32px; border-radius: 9999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FFE596 0%, #C28F2C 100%);
  color: #6E4A12;
  font: 800 0.875rem/1 var(--font-sans);
}
.ct-h-winner { font-weight: 700; }
.ct-side-blue .ct-h-winner { color: #0066FF; }
.ct-side-red  .ct-h-winner { color: #FF4242; }
.ct-h-vs {
  color: var(--semantic-label-alternative);
  font-size: 0.8125rem;
}
.ct-h-time {
  font-family: var(--font-mono); font-size: 0.75rem;
  color: var(--semantic-label-alternative);
}
@media (max-width: 640px) {
  .ct-history-item {
    grid-template-columns: 38px 1fr;
    grid-template-rows: auto auto;
    gap: 4px 12px;
  }
  .ct-h-idx { display: none; }
  .ct-h-vs { grid-column: 2; font-size: 0.75rem; }
  .ct-h-time { grid-column: 2; font-size: 0.6875rem; }
}

/* ============ FULLSCREEN MODE ============ */
.is-fullscreen .header,
.is-fullscreen .footer { display: none; }

.is-fullscreen,
.is-fullscreen body { background: var(--semantic-background-normal-alternative); }

.is-fullscreen .page {
  max-width: none;
  height: 100vh;
  min-height: 100vh;
  padding: 20px 24px;
  overflow: auto;
}

.is-fullscreen .page-head {
  margin-bottom: 16px;
}
.is-fullscreen .page-head h1 {
  font: 700 1.5rem/2rem var(--font-sans);
  letter-spacing: -0.023em;
}
.is-fullscreen .page-head .crumb { display: none; }
.is-fullscreen .page-head .sub { font-size: 0.875rem; line-height: 1.25rem; }

/* 코인토스 풀스크린: 코인을 더 크게, 그리드를 화면 가득 */
.is-fullscreen .ct-grid {
  height: calc(100vh - 100px);
  grid-template-rows: minmax(0, 1fr) auto;
  grid-template-areas:
    "blue stage red"
    "history history history";
  grid-template-columns: 1fr 1.6fr 1fr;
}
.is-fullscreen .ct-grid > .ct-blue { grid-area: blue; }
.is-fullscreen .ct-grid > .ct-stage { grid-area: stage; }
.is-fullscreen .ct-grid > .ct-red { grid-area: red; }
.is-fullscreen .ct-grid > .ct-history { grid-area: history; max-height: 200px; overflow: auto; }
.is-fullscreen .ct-scene { height: 320px; }
.is-fullscreen .ct-coin { width: 180px; height: 180px; }
.is-fullscreen .ct-glyph { font-size: 4.5rem; }

/* 대진표 풀스크린: 카드 그리드 4열 */
@media (min-width: 1100px) {
  .is-fullscreen .tourn-grid { grid-template-columns: repeat(4, 1fr); }
}

/* ============ ROTATE HINT (가로 회전 안내 오버레이) ============ */
/* 풀스크린 진입했지만 세로(portrait)이고, 터치 기기일 때만 안내 표시.
   PC는 회전 자체가 무의미하므로 표시하지 않음. */
.rotate-hint { display: none; }

@media (hover: none) and (pointer: coarse) and (orientation: portrait) {
  .is-fullscreen .rotate-hint {
    display: flex;
    position: fixed; inset: 0; z-index: 9999;
    background: var(--semantic-background-normal-normal);
    align-items: center; justify-content: center;
    flex-direction: column; gap: 18px;
    padding: 32px;
    text-align: center;
  }
  .rotate-hint .rotate-icon {
    width: 88px; height: 88px;
    border-radius: 16px;
    background: var(--semantic-primary-normal);
    color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-size: 48px;
    animation: rotate-anim 2.4s ease-in-out infinite;
    box-shadow: var(--shadow-medium);
  }
  @keyframes rotate-anim {
    0%, 20% { transform: rotate(0deg); }
    50%, 70% { transform: rotate(-90deg); }
    100% { transform: rotate(0deg); }
  }
  .rotate-hint .ti {
    margin: 0;
    font: 700 1.25rem/1.75rem var(--font-sans);
    letter-spacing: -0.012em;
    color: var(--semantic-label-normal);
  }
  .rotate-hint .sub {
    margin: 0;
    font: 400 0.9375rem/1.5rem var(--font-sans);
    color: var(--semantic-label-neutral);
    max-width: 320px;
  }
  .rotate-hint .exit-fs {
    margin-top: 6px;
  }
}

/* ============ EMPTY ============ */
.empty {
  padding: 64px 24px; text-align: center;
  background: var(--semantic-background-normal-normal);
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px var(--semantic-line-normal-alternative);
}
.empty .ti {
  margin: 0 0 8px;
  font: 600 1.0625rem/1.5rem var(--font-sans); letter-spacing: -0.002em;
  color: var(--semantic-label-normal);
}
.empty .sub {
  margin: 0 0 18px;
  color: var(--semantic-label-neutral);
  font: 400 0.875rem/1.25rem var(--font-sans); letter-spacing: 0.0145em;
}

/* ============ FOOTER ============ */
.footer {
  border-top: 1px solid var(--semantic-line-normal-alternative);
  padding: 32px 24px;
  background: var(--semantic-background-normal-normal);
}
.footer-inner {
  max-width: 1280px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center;
  gap: 16px; flex-wrap: wrap;
  font: 400 0.8125rem/1.125rem var(--font-sans); letter-spacing: 0.0194em;
  color: var(--semantic-label-alternative);
}
.footer-inner .meta { font-family: var(--font-mono); font-size: 0.75rem; }

/* ============ MOBILE HEADER ============ */
@media (max-width: 880px) {
  .nav { display: none; }
}
@media (max-width: 540px) {
  .header-inner { padding: 0 16px; height: 56px; }
  .brand-mark { width: 28px; height: 28px; }
  .brand-name { font-size: 1rem; }
  .brand-sub { display: none; }
}

/* ============ UTILITIES ============ */
.subtle { color: var(--semantic-label-alternative); }
.neutral { color: var(--semantic-label-neutral); }