/*
 * THRUU — application-wide base styles.
 * Design tokens live in tokens.css (loaded before this file via the manifest).
 * Propshaft serves each file individually; font imports below come from the CDN.
 */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");
@import url("https://fonts.googleapis.com/css2?family=Anton&family=Oswald:wght@500;700;900&family=JetBrains+Mono:wght@700&display=swap");

*, *::before, *::after { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  color: var(--ink-1);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
/* 데스크톱 프레임 — body(=.thruu-root) 좌우의 빈 공간. 모바일에선 안 보임. */
html { background: #e8e9ec; }

a { color: inherit; text-decoration: none; }

.thruu-root {
  min-height: 100dvh;
  /* Mobile-first 앱 — 데스크톱에서도 한 칸 모바일 폭. */
  max-width: 480px;
  margin: 0 auto;
  padding-bottom: calc(84px + env(safe-area-inset-bottom));
  background: var(--pitch-900);
  position: relative;
  overscroll-behavior-x: contain;
}
.thruu-root--no-tabs {
  padding-bottom: env(safe-area-inset-bottom);
}

.pb-safe { padding-bottom: env(safe-area-inset-bottom); }

/* ── Bottom tab bar ────────────────────────────────────────── */
.tab-bar {
  position: fixed;
  bottom: 0;
  /* 모바일 칸 (max-width 480px) 안에 가운데 정렬 — 데스크톱에서도 모바일 폭 안. */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  /* 높이에도 safe-area 를 더해야 아이콘 영역(54px)이 유지됨 — 고정 84px 이면
     홈 인디케이터 폰에서 하단 패딩(22+inset)이 아이콘을 짓눌러 위로 뜸. */
  height: calc(84px + env(safe-area-inset-bottom, 0px));
  padding: 8px 0 calc(22px + env(safe-area-inset-bottom, 0px));
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--pitch-700);
  display: flex;
  justify-content: space-around;
  align-items: center;
  z-index: 10;
}

.tab-bar__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  color: var(--ink-3);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.5px;
  min-width: 44px;
  transition: color 120ms ease;
}

.tab-bar__item.is-active {
  color: var(--gold-500);
  font-weight: 800;
}

.tab-bar__icon {
  width: 22px;
  height: 22px;
  stroke-width: 1.6;
}

.tab-bar__item.is-active .tab-bar__icon { stroke-width: 2; }

/* ── Home placeholder (to be replaced by Hero/FM/Ticker variants) ── */
.home {
  padding: 60px 20px 20px;
}
.home__kicker {
  font-size: 11px;
  color: var(--gold-500);
  font-weight: 700;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.home__title {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 900;
  line-height: 0.95;
  letter-spacing: -1.5px;
  color: var(--ink-1);
  margin: 0 0 14px;
}
.home__lede {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 28px;
}
.home__stub {
  padding: 20px;
  border: 1px dashed var(--pitch-600);
  border-radius: 14px;
  background: var(--pitch-900);
  color: var(--ink-2);
  font-size: 13px;
  line-height: 1.6;
}
.home__stub code {
  font-family: var(--font-mono);
  color: var(--gold-400);
  font-size: 12px;
}

/* ── Buttons ───────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -0.3px;
  border: none;
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease;
  font-family: inherit;
}
.btn:active { transform: scale(0.98); }

.btn--primary {
  background: var(--ink-1);
  color: var(--pitch-900);
}
.btn--ghost {
  background: transparent;
  color: var(--ink-1);
  border: 1.5px solid var(--ink-1);
}
.match-edit__danger {
  color: var(--ink-3);
  border-color: var(--pitch-600);
}
/* Kakao keeps brand yellow even in mono — follows Kakao brand guidelines */
.btn--kakao {
  background: #fee500;
  color: #1a1a1a;
  gap: 8px;
}

/* ── Flash messages ────────────────────────────────────────── */
.flash-stack {
  position: fixed;
  top: calc(env(safe-area-inset-top) + 12px);
  /* 모바일 칸 안에 가운데 정렬. */
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 456px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 100;
  pointer-events: none;
}
.flash {
  padding: 12px 16px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.2px;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  pointer-events: auto;
  background: var(--ink-1);
  color: var(--pitch-900);
  cursor: pointer;
  transition: opacity 240ms ease, transform 240ms ease;
}
.flash--alert {
  background: #2a2a2a;
}
.flash--leaving {
  opacity: 0;
  transform: translateY(-8px);
}

/* ── Auth card on home (temporary — will be absorbed by Hero) ─ */
.home__auth {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 24px;
}
.home__auth-name {
  font-size: 13px;
  color: var(--ink-2);
}
.home__auth-name strong {
  color: var(--ink-1);
  font-weight: 800;
}
.home__auth-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Onboarding (team create, invite) ──────────────────────── */
.onboarding {
  padding: 60px 24px 40px;
  position: relative;
  max-width: 480px;
  margin: 0 auto;
}
.onboarding__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 40px;
}
.onboarding__logo {
  width: 32px;
  height: 32px;
  background: var(--ink-0);
  color: var(--pitch-900);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
}
.onboarding__wordmark {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--ink-1);
}
.onboarding__kicker {
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 700;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.onboarding__title {
  font-size: 30px;
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: -0.8px;
  color: var(--ink-1);
  margin: 0 0 8px;
}
.onboarding__lede {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
  margin: 0 0 32px;
}
.onboarding__form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.onboarding__cta {
  margin-top: 18px;
}
.onboarding__cta .btn {
  width: 100%;
  height: 52px;
  font-size: 16px;
}
.onboarding__footer {
  margin-top: 14px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
}
.onboarding__footer a {
  color: var(--ink-0);
  font-weight: 700;
}

/* ── Form field ────────────────────────────────────────────── */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field__label {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 700;
  letter-spacing: 1px;
}
.field__label-helper {
  color: var(--ink-3);
  font-weight: 400;
  font-size: 10px;
  letter-spacing: 0;
  text-transform: none;
  margin-left: 6px;
  opacity: 0.7;
}
.field__hint {
  display: block;
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0;
}

.opponent-status {
  display: inline-block;
  margin-top: 6px;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  background: var(--pitch-800);
  color: var(--ink-2);
}
.opponent-status[data-kind="existing"] {
  background: var(--ink-1);
  color: var(--pitch-900);
}
.opponent-status[data-kind="new"] {
  background: transparent;
  color: var(--ink-1);
  border: 1px dashed var(--ink-2);
}
/* ── 폼 입력 표준 — 단일 사이즈 (44/14/1).
   풀 사이즈 (52) 폐지. modifier --compact 는 alias (legacy 호환). ── */
.field__input,
.field__select {
  height: 44px;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--pitch-850);
  border: 1px solid var(--pitch-600);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
  font-family: inherit;
  appearance: none;
  -webkit-appearance: none;
}
/* select 는 chevron + 다른 톤 배경 + cursor pointer 로 직접 입력 X 표시. */
.field__select {
  background-color: var(--pitch-800);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ink-2) 50%),
    linear-gradient(135deg, var(--ink-2) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 52%,
    calc(100% - 11px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
  cursor: pointer;
}
.field__select::-ms-expand { display: none; }
.field__input:focus,
.field__select:focus {
  outline: 2px solid var(--ink-0);
  outline-offset: 2px;
}
.field__input::placeholder {
  color: var(--ink-3);
  font-weight: 500;
}
/* --compact alias — 베이스와 동일. 점진 정리 위해 modifier 자체는 둠. */
.field__input--compact,
.field__select--compact {}

.field__input--textarea {
  height: auto;
  padding: 12px 14px;
  line-height: 1.4;
  resize: vertical;
}
.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
/* grid item 기본 min-width 가 콘텐츠 폭이라 긴 placeholder 가 셀 폭을 밀어 화면 오버플로.
   모든 자식에 min-width: 0 부여해 grid 분할이 1fr 을 그대로 따르게 함. */
.field-row > * { min-width: 0; }

.region-select {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: 8px;
}
.region-select > * { min-width: 0; }
.region-select__sigungu:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.field-row--age,
.field-row--quarters {
  grid-template-columns: 1fr auto 1fr auto;
  align-items: center;
}
.field-row__sep {
  font-size: 14px;
  color: var(--ink-3);
  user-select: none;
}

/* ── Radio stack (match type picker 등) ──────────────────── */
.radio-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.radio-stack__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--pitch-850);
  border: 1.5px solid var(--pitch-700);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 120ms;
}
.radio-stack__item:has(input:checked) {
  border-color: var(--ink-0);
  background: var(--pitch-800);
}
.radio-stack__item input[type="radio"] {
  margin: 0;
  accent-color: var(--ink-0);
}
.radio-stack__item.is-disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.radio-stack__label {
  display: flex;
  flex-direction: column;
  flex: 1;
}
.radio-stack__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-1);
}
.radio-stack__title small {
  color: var(--ink-3);
  font-weight: 700;
  margin-left: 4px;
}
.radio-stack__sub {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}

/* ── Onboarding footer link (plain text) ───────────────────── */
.onboarding__footer-link {
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Form error box ────────────────────────────────────────── */
.form-errors {
  background: rgba(0, 0, 0, 0.04);
  border-left: 3px solid var(--ink-0);
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.form-errors__title {
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 4px;
  color: var(--ink-1);
}
.form-errors ul {
  margin: 0;
  padding-left: 18px;
  font-size: 12px;
  color: var(--ink-2);
}

/* ── Chip (inline status/label) ───────────────────────────── */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  line-height: 1;
}
.chip--mute    { background: var(--pitch-800); color: var(--ink-2); border: 1px solid var(--pitch-700); }
.chip--outline { background: transparent;       color: var(--ink-1); border: 1px solid var(--ink-1); }
.chip--solid   { background: var(--ink-1);      color: var(--pitch-900); border: 1px solid var(--ink-1); }

/* ── Home guest / no-team states ───────────────────────────── */
.home--guest .btn,
.home--no-team .btn {
  margin-top: 4px;
}
.home__logout {
  margin-top: 6px;
}

/* ── Top team switcher + sport tabs ────────────────────────── */
.team-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 54px 16px 8px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  position: sticky;
  top: 0;
  z-index: 5;
}
.team-bar__left {
  display: flex;
  align-items: center;
  gap: 8px;
}
.team-bar__logo {
  width: 28px;
  height: 28px;
  background: var(--ink-0);
  color: var(--pitch-900);
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
}
.team-bar__name {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink-1);
}

/* 다중 팀 전환 드롭다운 (details/summary) */
.team-bar__switcher { position: relative; }
.team-bar__switcher summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  outline: none;
  background: transparent;
  border: 0;
  padding: 0;
}
.team-bar__switcher summary::-webkit-details-marker { display: none; }
.team-bar__switcher summary::marker { content: ""; }
.team-bar__menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin: 6px 0 0;
  padding: 6px;
  list-style: none;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(20px);
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  min-width: 220px;
  z-index: 20;
}
.team-bar__menu li { margin: 0; }
.team-bar__menu li form { margin: 0; }
.team-bar__menu-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}
.team-bar__menu-item:hover { background: var(--pitch-800); }
.team-bar__menu-logo {
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: var(--pitch-700);
  color: var(--ink-1);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  flex-shrink: 0;
}
.team-bar__menu-name {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-1);
}

/* 개인 모드 — 활성팀 nil. logo 만 톤 차별화 (회색). 메뉴 항목은 다른 팀과 동일. */
.team-bar__logo--solo,
.team-bar__menu-logo--solo {
  background: var(--pitch-700);
  color: var(--ink-1);
  overflow: hidden;
}
.team-bar__logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* 업로드된 팀 로고 — 로고 컨테이너(팀바·discover·공개페이지 등)를 꽉 채움 */
.team-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
/* 팀 설정 — 로고 업로드 필드 */
.team-logo-field {
  display: flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
}
.team-logo-field__preview {
  width: 64px;
  height: 64px;
  border-radius: 14px;
  background: var(--ink-0);
  color: var(--pitch-900);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 26px;
  overflow: hidden;
  flex: none;
}
.team-logo-field__cta {
  font-size: 14px;
  font-weight: 700;
  padding: 9px 16px;
  border: 1px solid var(--pitch-700);
  border-radius: 10px;
}
.team-logo-field__input { display: none; }
.team-bar__right {
  display: flex;
  gap: 6px;
  align-items: center;
}
.team-bar__bell {
  width: 30px;
  height: 30px;
  border-radius: 15px;
  border: 1px solid var(--pitch-700);
  background: transparent;
  color: var(--ink-2);
  display: grid;
  place-items: center;
  cursor: pointer;
}
.team-bar__bell--with-badge { position: relative; }
.team-bar__bell-dot {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--ink-1);
  color: var(--pitch-900);
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 900;
  line-height: 16px;
  text-align: center;
  letter-spacing: 0.3px;
}

/* ── Notifications page ─────────────────────────────────────── */
.notif-list { padding: 8px 16px 24px; }
.notif-list__empty {
  padding: 28px 16px;
  border: 1px dashed var(--pitch-700);
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
}
.notif-list ul { list-style: none; padding: 0; margin: 0; }
.notif-row { border-bottom: 1px solid var(--pitch-800); }
.notif-row:last-child { border-bottom: none; }
.notif-row__link {
  display: flex;
  gap: 12px;
  padding: 14px 4px;
  text-decoration: none;
  color: inherit;
}
.notif-row__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 18px;
  display: grid;
  place-items: center;
  background: var(--pitch-800);
  color: var(--ink-1);
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
}
.notif-row__icon--match_potm_awarded {
  background: var(--ink-1);
  color: var(--pitch-900);
}
.notif-row__icon--match_cancelled {
  background: var(--pitch-800);
  color: var(--ink-3);
}
.notif-row__body { flex: 1; min-width: 0; }
.notif-row__title {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-1);
  letter-spacing: -0.2px;
}
.notif-row__sub {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
}
.notif-row__time {
  margin-top: 4px;
  font-size: 11px;
  color: var(--ink-3);
}
.notif-row:not(.notif-row--unread) .notif-row__link { opacity: 0.5; }
.notif-row__unread-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  margin-left: 6px;
  border-radius: 50%;
  background: var(--ink-0);
  vertical-align: middle;
}

.sport-tabs {
  display: flex;
  padding: 0 16px;
  background: rgba(255, 255, 255, 0.98);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--pitch-700);
  position: sticky;
  top: 46px;
  z-index: 4;
}
.sport-tab {
  flex: 1;
  padding: 10px 4px 8px;
  text-align: center;
  border-bottom: 2px solid transparent;
  color: var(--ink-3);
  cursor: pointer;
}
.sport-tab.is-active {
  border-bottom-color: var(--ink-0);
  color: var(--ink-1);
}
.sport-tab__label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.sport-tab.is-active .sport-tab__label { font-weight: 900; }
.sport-tab__sub {
  font-size: 9px;
  color: var(--ink-3);
  margin-top: 2px;
  letter-spacing: 0.5px;
}

/* ── Home hero layout ──────────────────────────────────────── */
.home-hero {
  padding: 14px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.home-hero__greeting {
  font-size: 12px;
  color: var(--ink-3);
  font-weight: 700;
  letter-spacing: 1.2px;
}
.home-hero__greeting strong {
  color: var(--ink-1);
  font-weight: 800;
}

/* ── Hero match card ───────────────────────────────────────── */
.hero-match {
  border-radius: 20px;
  padding: 20px;
  border: 1px solid var(--pitch-700);
  background: var(--pitch-900);
}
.hero-match--empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.hero-match--empty .btn { margin-top: 10px; }

.hero-match__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 14px;
}
.hero-match__kicker {
  font-size: 10px;
  color: var(--ink-2);
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.hero-match__time {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 900;
  letter-spacing: -1px;
  line-height: 1;
  color: var(--ink-1);
  margin: 0;
}
.hero-match__venue {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.hero-match__rsvp {
  margin-top: 4px;
  padding: 12px 14px;
  background: var(--pitch-850);
  border-radius: 10px;
}
.hero-match__rsvp-head {
  display: flex;
  justify-content: space-between;
  margin-bottom: 8px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-2);
}
.hero-match__rsvp-head strong { color: var(--ink-0); font-weight: 800; }
.hero-match__progress {
  height: 6px;
  background: var(--pitch-800);
  border-radius: 3px;
  overflow: hidden;
  display: flex;
}
.hero-match__progress-bar { display: block; height: 100%; }
.hero-match__progress-bar--yes   { background: var(--ink-0); }
.hero-match__progress-bar--maybe { background: var(--ink-2); }
.hero-match__progress-bar--no    { background: var(--pitch-600); }

.hero-match__cta {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.hero-match__cta-primary {
  flex: 1;
  height: 42px;
  gap: 6px;
  font-size: 14px;
}
.hero-match__cta-icon {
  width: 42px;
  height: 42px;
  border: 1px solid var(--pitch-700);
  background: var(--pitch-850);
  color: var(--ink-2);
  border-radius: 10px;
  display: grid;
  place-items: center;
  cursor: pointer;
}

/* ── Balance card ──────────────────────────────────────────── */
.balance-card {
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 14px;
  overflow: hidden;
}
.balance-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px 10px;
}
.balance-card__label {
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 700;
  letter-spacing: 1px;
}
.balance-card__amount {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--ink-1);
  margin-top: 2px;
  font-variant-numeric: tabular-nums;
}
.balance-card__splits {
  display: flex;
  gap: 10px;
  padding: 0 16px 14px;
}
.balance-card__split {
  flex: 1;
  padding: 10px 12px;
  background: var(--pitch-850);
  border-radius: 8px;
  border-left: 3px solid var(--ink-3);
}
.balance-card__split--income  { border-left-color: var(--ink-0); }
.balance-card__split--expense { border-left-color: var(--ink-2); }
.balance-card__split--unpaid  { border-left-color: var(--pitch-600); }
.balance-card__split-label {
  font-size: 10px;
  color: var(--ink-3);
}
.balance-card__split-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}

/* ── RSVP widget (참석 투표 카드) ──────────────────────── */
.rsvp-widget {
  margin: 0 16px 14px;
  padding: 14px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.rsvp-widget__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.rsvp-widget__title {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ink-1);
}
.rsvp-widget__deadline {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.2px;
  text-align: right;
  white-space: nowrap;
}
/* 처음 투표 (PRISTINE) — 안내 한 줄 */
.rsvp-widget__prompt {
  margin: 0;
  font-size: 12px;
  color: var(--ink-3);
  letter-spacing: -0.1px;
}

/* 본인 투표 결과 hero (VOTED / CLOSED) — 라디오 selected chip 과 강조가
   겹치지 않도록 muted info row. 시각 weight 는 라디오 chip 이 가짐. */
.rsvp-widget__current {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 12px;
  border-radius: 8px;
  background: var(--pitch-850);
  border: 1px solid var(--pitch-700);
}
.rsvp-widget__current-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ink-3);
  letter-spacing: 0;
}
.rsvp-widget__current-value {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-1);
  letter-spacing: -0.2px;
}
.rsvp-widget__current-status {
  margin-left: auto;
  font-size: 10px;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 0.3px;
}
/* yes/maybe/no/missed — 톤만 약간 차이 (배경 단색 강조 X) */
.rsvp-widget__current--maybe .rsvp-widget__current-value { color: var(--ink-2); }
.rsvp-widget__current--no .rsvp-widget__current-value { color: var(--ink-3); }
.rsvp-widget__current--missed {
  background: transparent;
  border-style: dashed;
}
.rsvp-widget__current--missed .rsvp-widget__current-value { color: var(--ink-3); }

/* CLOSED 상태 — hero 살짝 muted (form 자체는 토글 컨트롤러가 안 그림) */
.rsvp-widget--closed .rsvp-widget__current { opacity: 0.9; }

.rsvp-widget__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.rsvp-widget__choices {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 6px;
}
.rsvp-widget__choice {
  position: relative;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 14px 8px;
  border-radius: 10px;
  background: var(--pitch-850);
  border: 1.5px solid transparent;
  color: var(--ink-2);
  user-select: none;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.rsvp-widget__choice input { position: absolute; opacity: 0; pointer-events: none; }
.rsvp-widget__choice-icon { color: inherit; }
.rsvp-widget__choice-label {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: -0.2px;
}
.rsvp-widget__choice:has(input:checked) {
  background: var(--ink-1);
  color: var(--pitch-900);
  border-color: var(--ink-0);
}
.rsvp-widget__choice:has(input[disabled]) { cursor: not-allowed; opacity: 0.55; }
.rsvp-widget__trigger,
.rsvp-widget__submit {
  width: 100%;
  height: 44px;
  border-radius: 10px;
  border: none;
  background: var(--ink-1);
  color: var(--pitch-900);
  font-weight: 800;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 120ms ease;
}
.rsvp-widget__trigger:active,
.rsvp-widget__submit:active { opacity: 0.85; }
.rsvp-widget__form:not(:has(input:checked)) .rsvp-widget__submit {
  opacity: 0.4;
  pointer-events: none;
}
.rsvp-widget__panel {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.rsvp-widget__panel-actions {
  display: flex;
  gap: 8px;
}
.rsvp-widget__panel-actions > .rsvp-widget__cancel,
.rsvp-widget__panel-actions > .rsvp-widget__submit { flex: 1; width: auto; }
.rsvp-widget__cancel {
  height: 44px;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-1);
  border: 1.5px solid var(--pitch-700);
  font-weight: 800;
  font-size: 14px;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 120ms ease, background 120ms ease;
}
.rsvp-widget__cancel:active { opacity: 0.7; }

/* ── RSVP results — 카톡 투표 식 참석 현황 명단 ───────── */
.rsvp-results {
  margin: 0 16px 14px;
  padding: 14px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
}
.rsvp-results__head {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ink-1);
}
.rsvp-results__group {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--pitch-800);
}
.rsvp-results__group:first-of-type { border-top: none; padding-top: 8px; }
.rsvp-results__label {
  flex-shrink: 0;
  width: 56px;
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding-top: 2px;
}
.rsvp-results__label-text {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-1);
  letter-spacing: -0.2px;
}
.rsvp-results__count {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  color: var(--ink-0);
  letter-spacing: -0.5px;
}
.rsvp-results__group--pending .rsvp-results__label-text,
.rsvp-results__group--pending .rsvp-results__count { color: var(--ink-3); }
.rsvp-results__chips {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.rsvp-results__chip {
  padding: 4px 10px;
  background: var(--pitch-850);
  color: var(--ink-1);
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.rsvp-results__chip--pending {
  background: transparent;
  color: var(--ink-3);
  border: 1px dashed var(--pitch-700);
}
.rsvp-results__empty {
  flex: 1;
  font-size: 11px;
  color: var(--ink-3);
  padding-top: 4px;
}
.rsvp-results__locked {
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
  padding: 14px 8px;
  background: var(--pitch-850);
  border-radius: 8px;
  line-height: 1.5;
}

/* ── Match detail ─────────────────────────────────────────── */
.match-hero {
  padding: 54px 20px 18px;
  margin-bottom: 14px;
  background: linear-gradient(180deg, var(--pitch-850), var(--pitch-900));
  border-bottom: 1px solid var(--pitch-700);
}
.match-hero__top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.match-hero__back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 13px;
  color: var(--ink-2);
  font-weight: 600;
}
.match-hero__admin-chip {
  background: var(--ink-0);
  color: var(--pitch-900);
  border-color: var(--ink-0);
}
.match-hero__date {
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 4px;
}
.match-hero__title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
  color: var(--ink-1);
  margin: 0;
}
.match-hero__vs {
  color: var(--ink-3);
  font-size: 20px;
  padding: 0 4px;
}
.match-hero__meta {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 6px;
}
.match-hero__cancelled {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  border: 1px dashed var(--pitch-600);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.02);
}
.match-hero__cancelled-tag {
  flex-shrink: 0;
  padding: 3px 8px;
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1.2px;
  color: var(--pitch-900);
  background: var(--ink-2);
}
.match-hero__cancelled-msg {
  flex: 1;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.4;
}
.match-hero__cancelled-btn {
  flex-shrink: 0;
  padding: 6px 12px;
  font-size: 12px;
}

.match-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 20px 0;
}
.match-tabs__item {
  flex: 1;
  padding: 8px 0;
  text-align: center;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.3px;
  background: var(--pitch-850);
  color: var(--ink-2);
  border: 1px solid var(--pitch-700);
  border-radius: 8px;
}
.match-tabs__item.is-active {
  background: var(--ink-0);
  color: var(--pitch-900);
  border-color: var(--ink-0);
}

.match-detail {
  padding: 14px 20px 100px;
}

.match-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-bottom: 12px;
}
.match-stats__pill {
  padding: 10px;
  background: var(--pitch-900);
  border-radius: 8px;
  border-top: 2px solid var(--pitch-700);
}
.match-stats__pill--attended { border-top-color: var(--ink-0); }
.match-stats__pill--late     { border-top-color: var(--ink-2); }
.match-stats__pill--no_show  { border-top-color: var(--pitch-600); }
.match-stats__pill--pending  { border-top-color: var(--ink-3); }
.match-stats__label {
  font-size: 9px;
  color: var(--ink-3);
  letter-spacing: 1px;
  font-weight: 700;
}
.match-stats__value {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
  margin-top: 2px;
}

.match-roster__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0 8px;
}
.match-roster__count {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-1);
}
.match-roster__sort {
  font-size: 10px;
  color: var(--ink-3);
}
.match-roster {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.roster-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-left: 3px solid var(--ink-3);
  border-radius: 10px;
}
.roster-row--attended { border-left-color: var(--ink-0); }
.roster-row--late     { border-left-color: var(--ink-2); }
.roster-row--no_show  { border-left-color: var(--pitch-600); }
.roster-row--excused_absence { border-left-color: var(--ink-3); opacity: 0.75; }
.roster-row__order {
  width: 32px;
  text-align: center;
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-3);
  flex-shrink: 0;
}
.roster-row__rsvp {
  display: inline-block;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 6px;
  letter-spacing: -0.2px;
}
.roster-row__rsvp--yes   { background: var(--ink-0); color: var(--pitch-900); }
.roster-row__rsvp--maybe { background: var(--pitch-800); color: var(--ink-2); }
.roster-row__rsvp--no    { background: var(--pitch-700); color: var(--ink-3); text-decoration: line-through; }
.roster-row__avatar {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pitch-800);
  color: var(--ink-0);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  flex-shrink: 0;
  border: 2px solid var(--pitch-850);
}
.roster-row__meta {
  flex: 1;
  min-width: 0;
}
.roster-row__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-1);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.roster-row__role {
  font-size: 9px;
  color: var(--ink-0);
  font-weight: 800;
}
.roster-row__self {
  font-size: 9px;
  background: var(--ink-0);
  color: var(--pitch-900);
  padding: 2px 5px;
  border-radius: 3px;
  font-weight: 800;
  letter-spacing: 0.5px;
}
.roster-row__sub {
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 1px;
}
.roster-row__chips {
  display: flex;
  gap: 3px;
  flex-shrink: 0;
}
.roster-row__chip {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  border: 1px solid var(--pitch-700);
  background: transparent;
  color: var(--ink-3);
  padding: 0;
  font-family: inherit;
}
button.roster-row__chip { cursor: pointer; }
span.roster-row__chip  { cursor: default; }
.roster-row__chip.is-active {
  background: var(--ink-0);
  color: var(--pitch-900);
  border-color: var(--ink-0);
}
.roster-row__chips form,
form.roster-row__chips {
  margin: 0;
  display: flex;
  gap: 3px;
}

/* ── Manager panel (매치 한정 매니저 지정, admin 전용) ───── */
.manager-panel {
  margin-top: 16px;
  padding: 14px 16px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 14px;
}
.manager-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 4px;
}
.manager-panel__title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-1);
  margin: 0;
}
.manager-panel__sub {
  font-size: 11px;
  color: var(--ink-3);
}
.manager-panel__lede {
  font-size: 11px;
  color: var(--ink-3);
  margin: 0 0 10px;
  line-height: 1.5;
}
.manager-panel__empty {
  text-align: center;
  padding: 14px;
  color: var(--ink-3);
  font-size: 12px;
  border: 1px dashed var(--pitch-600);
  border-radius: 8px;
  margin-bottom: 8px;
}
.manager-panel__list {
  list-style: none;
  padding: 0;
  margin: 0 0 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.manager-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--pitch-850);
  border: 1px solid var(--pitch-700);
  border-radius: 10px;
}
.manager-row__avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pitch-800);
  display: grid;
  place-items: center;
  color: var(--ink-1);
  font-size: 12px;
  font-weight: 800;
}
.manager-row__meta { flex: 1; min-width: 0; }
.manager-row__name {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-1);
}
.manager-row__sub {
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 1px;
}
.manager-row__btn {
  padding: 6px 10px;
  border: 1px solid var(--pitch-700);
  background: transparent;
  color: var(--ink-2);
  border-radius: 6px;
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.manager-panel__add { margin-top: 4px; }
.manager-panel__add summary {
  font-size: 12px;
  color: var(--ink-0);
  font-weight: 700;
  cursor: pointer;
  padding: 6px 0;
  list-style: none;
}
.manager-panel__add summary::-webkit-details-marker { display: none; }
.manager-panel__candidates {
  list-style: none;
  padding: 0;
  margin: 8px 0 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 280px;
  overflow-y: auto;
}
.manager-candidate {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  background: var(--pitch-850);
  border: 1px solid var(--pitch-700);
  border-radius: 8px;
}
.manager-candidate__avatar {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pitch-800);
  display: grid;
  place-items: center;
  color: var(--ink-1);
  font-size: 11px;
  font-weight: 800;
}
.manager-candidate__name {
  flex: 1;
  font-size: 12px;
  color: var(--ink-1);
  font-weight: 600;
}
.manager-candidate__position {
  color: var(--ink-3);
  font-weight: 600;
  margin-left: 4px;
}
.manager-candidate__btn {
  padding: 6px 12px;
  background: var(--ink-0);
  color: var(--pitch-900);
  border: none;
  border-radius: 6px;
  font-size: 11px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
}

.match-cta {
  display: flex;
  gap: 8px;
  margin-top: 16px;
}
.match-cta__secondary,
.match-cta__primary {
  flex: 1;
  height: 46px;
  font-size: 13px;
  gap: 6px;
}

/* FM week link wrapper */
.fm-week__link {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  color: inherit;
  text-decoration: none;
}

/* ── Variant switcher (Hero / FM / Ticker 토글) ───────────── */
.variant-switcher {
  display: flex;
  gap: 6px;
  padding: 10px 16px;
  background: rgba(255, 255, 255, 0.98);
  border-bottom: 1px solid var(--pitch-700);
}
.variant-switcher__btn {
  flex: 1;
  padding: 8px 0;
  border-radius: 8px;
  background: var(--pitch-850);
  border: 1px solid var(--pitch-700);
  color: var(--ink-3);
  font-family: inherit;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  transition: background 120ms, color 120ms;
}
.variant-switcher__btn:active { transform: scale(0.97); }
.variant-switcher__btn.is-active {
  background: var(--ink-0);
  color: var(--pitch-900);
  border-color: var(--ink-0);
}
.variant-switcher__label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.2px;
}
.variant-switcher__sub {
  font-size: 9px;
  opacity: 0.7;
  letter-spacing: 1px;
}

/* ── Home Ticker (감성/임팩트) ────────────────────────────── */
.home-ticker {
  padding: 14px 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.ticker-hero {
  position: relative;
}
.ticker-hero__date {
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 800;
  letter-spacing: 3px;
  margin-bottom: 4px;
}
.ticker-hero__title {
  font-family: var(--font-display);
  font-size: 72px;
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -3px;
  color: var(--ink-1);
  margin: 0 0 14px;
}
.ticker-hero__countdown { color: var(--ink-0); }
.ticker-hero__match {
  font-size: 14px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* ticker-vote — dark filled CTA card */
.ticker-vote {
  padding: 20px;
  background: var(--ink-0);
  color: #ffffff;
  border-radius: 18px;
}
.ticker-vote__kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  opacity: 0.7;
  margin-bottom: 2px;
}
.ticker-vote__title {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -1px;
}
.ticker-vote__buttons {
  display: flex;
  gap: 8px;
  margin-top: 14px;
}
.ticker-vote__yes {
  flex: 1;
  padding: 12px 0;
  text-align: center;
  background: #ffffff;
  color: var(--ink-0);
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: inherit;
  cursor: pointer;
}
.ticker-vote__maybe,
.ticker-vote__no {
  width: 48px;
  padding: 12px 0;
  background: rgba(255, 255, 255, 0.12);
  color: #ffffff;
  border: none;
  border-radius: 10px;
  font-weight: 800;
  font-size: 17px;
  cursor: pointer;
  font-family: inherit;
}

/* ticker-empty */
.ticker-empty {
  padding: 32px 20px;
  text-align: center;
  background: var(--pitch-900);
  border: 1px dashed var(--pitch-600);
  border-radius: 18px;
}
.ticker-empty__title {
  font-family: var(--font-display);
  font-size: 48px;
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -2px;
  color: var(--ink-1);
  margin-bottom: 12px;
}
.ticker-empty__desc {
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 18px;
}
.ticker-empty__cta {
  display: inline-flex;
  width: 100%;
  height: 48px;
}

/* ticker-metrics — 4 big rows */
.ticker-metrics {
  display: flex;
  flex-direction: column;
  margin-top: 4px;
}
.ticker-metric {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--pitch-700);
}
.ticker-metric:last-child { border-bottom: 0; }
.ticker-metric__label {
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 600;
  letter-spacing: -0.3px;
}
.ticker-metric__value {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--ink-1);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
}
.ticker-metric__unit {
  font-family: var(--font-ui);
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 700;
  margin-left: 3px;
}

/* ── Home FM 밀도 (Football Manager 스타일) ───────────────── */
.home-fm {
  padding: 14px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

/* fm-stats — 4 pill season summary */
.fm-stats {
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 14px;
  padding: 14px 16px;
}
.fm-stats__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.fm-stats__kicker {
  font-size: 10px;
  color: var(--ink-2);
  font-weight: 800;
  letter-spacing: 2px;
}
.fm-stats__sub {
  font-size: 11px;
  color: var(--ink-3);
}
.fm-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.fm-stats__pill {
  padding: 8px 10px;
  background: var(--pitch-850);
  border-radius: 8px;
  border: 1px solid var(--pitch-700);
}
.fm-stats__label {
  font-size: 9px;
  color: var(--ink-3);
  font-weight: 700;
  letter-spacing: 1px;
}
.fm-stats__value {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.5px;
  margin-top: 2px;
}
.fm-stats__value--muted { color: var(--ink-3); }
.fm-stats__note {
  margin-top: 10px;
  font-size: 11px;
  color: var(--ink-3);
}

/* fm-week — this week's matches list */
.fm-week {
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 14px;
  padding: 14px 16px;
}
.fm-week__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.fm-week__kicker {
  font-size: 10px;
  color: var(--ink-2);
  font-weight: 800;
  letter-spacing: 2px;
}
.fm-week__sub {
  font-size: 11px;
  color: var(--ink-3);
}
.fm-week__items {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.fm-week__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--pitch-850);
  border: 1px solid var(--pitch-700);
  border-left: 3px solid var(--ink-0);
  border-radius: 10px;
}
.fm-week__date {
  width: 48px;
  text-align: center;
  flex-shrink: 0;
}
.fm-week__dow {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  color: var(--ink-1);
  letter-spacing: 1px;
}
.fm-week__d {
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 1px;
}
.fm-week__divider {
  width: 1px;
  align-self: stretch;
  background: var(--pitch-700);
}
.fm-week__body {
  flex: 1;
  min-width: 0;
}
.fm-week__title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-1);
  letter-spacing: -0.3px;
}
.fm-week__meta {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}
.fm-week__tag {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-0);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.fm-week__empty {
  padding: 18px 14px;
  text-align: center;
  color: var(--ink-3);
  font-size: 13px;
  line-height: 2;
}
.fm-week__empty-cta {
  display: inline-block;
  color: var(--ink-0);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
  font-size: 12px;
}

/* fm-scorers — top scorer leaderboard */
.fm-scorers {
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 14px;
  padding: 14px 16px;
}
.fm-scorers__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.fm-scorers__kicker {
  font-size: 10px;
  color: var(--ink-2);
  font-weight: 800;
  letter-spacing: 2px;
}
.fm-scorers__sub {
  font-size: 11px;
  color: var(--ink-3);
}
.fm-scorers__empty {
  text-align: center;
  padding: 14px 8px 6px;
}
.fm-scorers__empty-icon {
  color: var(--ink-3);
  margin-bottom: 8px;
}
.fm-scorers__empty-title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-1);
  margin-bottom: 4px;
}
.fm-scorers__empty-desc {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.5;
  max-width: 260px;
  margin: 0 auto;
}
.fm-scorers__items {
  list-style: none;
  padding: 0;
  margin: 0;
}
.fm-scorers__item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  border-bottom: 1px solid var(--pitch-700);
}
.fm-scorers__item:last-child { border-bottom: 0; }
.fm-scorers__rank {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  color: var(--ink-0);
  width: 20px;
  text-align: center;
}
.fm-scorers__name {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-1);
}
.fm-scorers__goals {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-0);
}

/* ── Page head (단일 페이지 상단 타이틀 바) ───────────────── */
.page-head {
  padding: 54px 20px 14px;
  border-bottom: 1px solid var(--pitch-700);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
}
.page-head__kicker {
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 2px;
  flex-basis: 100%;
}
.page-head__title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--ink-1);
  margin: 0;
}
.page-head__sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--ink-3);
}
.page-head__meta { margin-left: auto; }

/* ── Onboarding back link (edit 페이지에서 위쪽 작은 돌아가기) ─ */
.onboarding__back {
  display: inline-block;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-3);
  text-decoration: none;
  margin-bottom: 24px;
}
.onboarding__back:hover { color: var(--ink-1); }

/* ── Match lifecycle (edit 페이지의 매치 관리 섹션) ────────── */
.match-lifecycle {
  margin-top: 32px;
  padding-top: 20px;
  border-top: 1px solid var(--pitch-700);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.match-lifecycle__title {
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: 1px;
  text-transform: uppercase;
  margin: 0 0 4px;
}
.match-lifecycle__danger {
  color: var(--ink-3);
  border-color: var(--pitch-600);
}

/* ── Ledger ───────────────────────────────────────────────── */
.ledger {
  padding: 14px 20px 100px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ledger-section__kicker {
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.ledger-section__kicker--warn {
  color: var(--ink-0);
}
.ledger-section__note {
  margin-top: 8px;
  font-size: 11px;
  color: var(--ink-3);
  text-align: center;
}

/* balance hero */
.ledger-balance {
  padding: 20px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--pitch-850), var(--pitch-900));
  border: 1px solid var(--pitch-700);
}
.ledger-balance__label {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 1px;
  font-weight: 700;
}
.ledger-balance__amount {
  font-family: var(--font-display);
  font-size: 40px;
  font-weight: 900;
  letter-spacing: -1.5px;
  line-height: 1;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.ledger-balance__splits {
  display: flex;
  gap: 16px;
  margin-top: 14px;
  font-size: 12px;
}
.ledger-balance__split-label {
  color: var(--ink-3);
  margin-right: 4px;
}
.ledger-balance__split-value {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.ledger-balance__split-value--income  { color: var(--ink-0); }
.ledger-balance__split-value--expense { color: var(--ink-2); }

.ledger-balance__sparkbar {
  margin-top: 14px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 36px;
}
.ledger-balance__bar {
  flex: 1;
  background: var(--pitch-700);
  border-radius: 2px;
  min-height: 2px;
}
.ledger-balance__bar--today {
  background: var(--ink-0);
}
.ledger-balance__sparkbar-label {
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 4px;
  text-align: right;
}

/* unpaid placeholder */
.unpaid-empty {
  padding: 16px 14px;
  background: var(--pitch-900);
  border: 1px dashed var(--pitch-600);
  border-radius: 10px;
  text-align: center;
}
.unpaid-empty__title {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-1);
  margin-bottom: 4px;
}
.unpaid-empty__desc {
  font-size: 11px;
  color: var(--ink-3);
  line-height: 1.5;
}

/* transaction feed */
.tx-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.tx-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 10px;
}
.tx-row__icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  background: var(--pitch-800);
  display: grid;
  place-items: center;
  color: var(--ink-1);
  flex-shrink: 0;
}
.tx-row--income .tx-row__icon  { color: var(--ink-0); }
.tx-row--expense .tx-row__icon { color: var(--ink-2); }
.tx-row__meta {
  flex: 1;
  min-width: 0;
}
.tx-row__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-1);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tx-row__sub {
  font-size: 10px;
  color: var(--ink-3);
  margin-top: 2px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tx-row__amount {
  font-size: 13px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.tx-row--income  .tx-row__amount { color: var(--ink-0); }
.tx-row--expense .tx-row__amount { color: var(--ink-2); }
.tx-list__empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--ink-3);
  font-size: 12px;
  border: 1px dashed var(--pitch-600);
  border-radius: 10px;
}

/* ── Welcome (미로그인 랜딩) ──────────────────────────────── */
.welcome {
  padding: 72px 24px 40px;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}
.welcome__brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 48px;
}
.welcome__logo {
  width: 36px;
  height: 36px;
  background: var(--ink-0);
  color: var(--pitch-900);
  border-radius: 8px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
}
.welcome__wordmark {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  letter-spacing: 3px;
  color: var(--ink-1);
}

.welcome__hero {
  margin-bottom: 36px;
}
.welcome__title {
  font-family: var(--font-display);
  font-size: 44px;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -1.5px;
  color: var(--ink-1);
  margin: 0 0 14px;
}
.welcome__tagline {
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}

.welcome__pillars {
  list-style: none;
  margin: 0 0 32px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.welcome__pillar {
  display: flex;
  gap: 14px;
  padding: 14px 16px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 14px;
  align-items: flex-start;
}
.welcome__pillar-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--ink-0);
  color: var(--pitch-900);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.welcome__pillar-body {
  flex: 1;
  min-width: 0;
}
.welcome__pillar-title {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.3px;
  color: var(--ink-1);
  margin-bottom: 3px;
}
.welcome__pillar-desc {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

.welcome__cta {
  margin-top: auto;
  padding-top: 8px;
}
.welcome__cta-primary {
  width: 100%;
  height: 54px;
  font-size: 16px;
  gap: 8px;
}
.welcome__cta-hint {
  text-align: center;
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}
.welcome__cta-secondary {
  width: 100%;
  height: 50px;
  margin-top: 8px;
}

.welcome__join {
  margin-top: 16px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
}
.welcome__join-link {
  color: var(--ink-0);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── Empty state (로그인 + 팀 없음) ────────────────────────── */
.empty-state {
  padding: 60px 24px 40px;
  max-width: 480px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  min-height: calc(100dvh - env(safe-area-inset-bottom));
}
.empty-state__header {
  margin-bottom: 24px;
}
.empty-state__greeting {
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 800;
  letter-spacing: 2px;
  margin-bottom: 8px;
}
.empty-state__title {
  font-family: var(--font-display);
  font-size: 42px;
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -1.5px;
  color: var(--ink-1);
  margin: 0 0 10px;
}
.empty-state__lede {
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 0;
}

/* onboarding 3-step preview */
.onboarding-steps {
  list-style: none;
  margin: 0 0 24px;
  padding: 18px 18px 14px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 14px;
}
.onboarding-steps__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 6px 0;
  position: relative;
}
.onboarding-steps__item:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 15px;
  top: 38px;
  width: 2px;
  height: calc(100% - 30px);
  background: var(--pitch-700);
}
.onboarding-steps__number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--ink-0);
  color: var(--pitch-900);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 900;
  flex-shrink: 0;
  z-index: 1;
}
.onboarding-steps__body {
  flex: 1;
  padding-top: 4px;
}
.onboarding-steps__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-1);
  letter-spacing: -0.3px;
}
.onboarding-steps__desc {
  font-size: 12px;
  color: var(--ink-2);
  margin-top: 2px;
}

.empty-state__cta-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: auto;
  margin-bottom: 16px;
}
.empty-state__primary,
.empty-state__secondary {
  width: 100%;
  height: 52px;
  font-size: 16px;
}
.empty-state__logout-form {
  text-align: center;
  margin: 0;
}
.empty-state__logout {
  background: transparent;
  border: none;
  color: var(--ink-3);
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
  padding: 8px;
}

/* ── Onboarding 02 · QR card ──────────────────────────────── */
.qr-card {
  position: relative;
  background: var(--pitch-850);
  border: 1px solid var(--pitch-700);
  border-radius: 22px;
  padding: 20px;
  margin-bottom: 16px;
}
.qr-card__corner {
  position: absolute;
  width: 16px;
  height: 16px;
  pointer-events: none;
}
.qr-card__corner--tl { top: 10px;    left: 10px;    border-top:    2px solid var(--ink-0); border-left:  2px solid var(--ink-0); }
.qr-card__corner--tr { top: 10px;    right: 10px;   border-top:    2px solid var(--ink-0); border-right: 2px solid var(--ink-0); }
.qr-card__corner--bl { bottom: 10px; left: 10px;    border-bottom: 2px solid var(--ink-0); border-left:  2px solid var(--ink-0); }
.qr-card__corner--br { bottom: 10px; right: 10px;   border-bottom: 2px solid var(--ink-0); border-right: 2px solid var(--ink-0); }

.qr-card__head {
  text-align: center;
  margin-bottom: 16px;
}
.qr-card__kicker {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-2);
  letter-spacing: 3px;
  margin-bottom: 4px;
}
.qr-card__team {
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--ink-1);
}

.qr-card__qr {
  display: flex;
  justify-content: center;
  margin-bottom: 16px;
}
.qr-card__qr-inner {
  width: 180px;
  height: 180px;
  padding: 12px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.qr-card__qr-inner svg {
  width: 100%;
  height: 100%;
  display: block;
}

.qr-card__code {
  text-align: center;
  padding: 10px 12px;
  background: var(--pitch-800);
  border: 1px dashed var(--pitch-600);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 6px;
  color: var(--ink-1);
}
.qr-card__meta {
  text-align: center;
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 8px;
}

/* ── Invite share buttons ─────────────────────────────────── */
.invite-share {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 24px;
}
.invite-share__btn {
  height: 48px;
  border: none;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 120ms;
}
.invite-share__btn:active { transform: scale(0.98); }
.invite-share__btn--kakao {
  background: #fee500;
  color: #1a1a1a;
}
.invite-share__btn--copy {
  background: var(--pitch-850);
  color: var(--ink-1);
  border: 1px solid var(--pitch-700);
}

/* ── Invite participant list ──────────────────────────────── */
.invite-list {
  margin-bottom: 20px;
}
.invite-list__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.invite-list__count {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-1);
}
.invite-list__count strong {
  color: var(--ink-0);
}
.invite-list__count-total {
  color: var(--ink-3);
  font-weight: 700;
}
.invite-list__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.invite-list__item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--pitch-850);
  border: 1px solid var(--pitch-700);
  border-radius: 10px;
}
.invite-list__item--empty {
  background: transparent;
  border-style: dashed;
  opacity: 0.6;
}
.invite-list__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--pitch-800);
  color: var(--ink-0);
  display: grid;
  place-items: center;
  font-size: 14px;
  font-weight: 800;
  border: 2px solid var(--pitch-850);
}
.invite-list__avatar--empty {
  background: transparent;
  border: 1.5px dashed var(--ink-3);
}
.invite-list__name {
  flex: 1;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-1);
}
.invite-list__name--empty {
  color: var(--ink-3);
}

/* ── Onboarding footer CTA row (2 buttons) ────────────────── */
.onboarding__footer-cta {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  margin-top: 20px;
}
.onboarding__footer-cta .btn {
  width: 100%;
  height: 50px;
}

/* ════════════════════════════════════════════════════════════
   Profile · Season Card (와이어프레임 07)
   ──────────────────────────────────────────────────────────── */

.profile-head {
  position: sticky;
  top: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: calc(env(safe-area-inset-top) + 14px) 16px 10px;
  background: var(--pitch-900);
  z-index: 5;
}
.profile-head__back {
  width: 34px; height: 34px;
  display: grid; place-items: center;
  color: var(--ink-2);
  margin-left: -6px;
}
.profile-head__actions {
  display: flex; gap: 8px; align-items: center;
}

.profile {
  padding: 20px 20px 40px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 공유 트리거 버튼 — 모달 (share-dialog) 으로 share-preview 띄움 */
.profile__share { display: flex; }
.profile__share-trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 38px;
  padding: 0 14px;
  border-radius: 10px;
  background: transparent;
  color: var(--ink-1);
  border: 1.5px solid var(--ink-1);
  font-weight: 800;
  font-size: 13px;
  font-family: inherit;
  cursor: pointer;
  transition: opacity 120ms ease;
}
.profile__share-trigger:active { opacity: 0.7; }

.share-dialog {
  border: none;
  padding: 0;
  border-radius: 16px;
  background: var(--pitch-900);
  width: min(420px, 92vw);
  max-height: 92vh;
  overflow: auto;
  position: relative;
}
.share-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.share-dialog__close {
  position: absolute;
  top: 6px;
  right: 8px;
  z-index: 2;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--ink-2);
  font-size: 22px;
  font-family: inherit;
  cursor: pointer;
  line-height: 1;
}
.share-dialog__close:active { opacity: 0.6; }
.share-dialog .share-preview { box-shadow: none; border-radius: 16px; }
/* X 닫기 버튼(우상단 absolute)과 비율 토글이 겹치지 않게 헤더에 여유. */
.share-dialog .share-preview__head { padding-right: 36px; }

/* ── Season Card (핵심 히어로) ────────────────────────────────── */
.season-card {
  --card-w: 232px;
  --card-h: 348px;
  position: relative;
  width: var(--card-w);
  min-height: var(--card-h);
  margin: 0 auto;
  padding: 22px 22px 18px;
  border-radius: 18px;
  background: var(--pitch-900);
  border: 1.5px solid var(--ink-0);
  color: var(--ink-1);
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: var(--gold-glow);
  overflow: hidden;
  isolation: isolate;
}
.season-card--bronze { background: #f1ede8; border-color: #6b5a48; }
.season-card--silver { background: #f4f4f4; border-color: #3a3a3a; }
.season-card--gold   { background: #fff; border-color: var(--ink-0); }
.season-card--platinum   { background: var(--ink-0); color: #fafafa; border-color: var(--ink-0); }

.season-card--mini {
  --card-w: 150px;
  --card-h: 222px;
  padding: 14px 12px 10px;
  border-radius: 12px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
}

.season-card__top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  align-self: stretch;
  gap: 2px;
}
.season-card__ovr {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 0.85;
  font-weight: 900;
  letter-spacing: -2px;
}
.season-card--mini .season-card__ovr { font-size: 36px; letter-spacing: -1.2px; }
.season-card__pos {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 800;
  letter-spacing: 2px;
  margin-left: 2px;
}
.season-card--mini .season-card__pos { font-size: 11px; letter-spacing: 1.3px; }

.season-card__portrait {
  position: relative;
  margin-top: 6px;
  width: 86px; height: 86px;
  border-radius: 50%;
  background: var(--pitch-850);
  border: 1px solid var(--pitch-700);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.season-card__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.season-card__jersey--badge {
  position: absolute;
  bottom: -2px;
  right: -2px;
  background: var(--ink-1);
  color: var(--pitch-900);
  font-size: 11px;
  letter-spacing: 0;
  padding: 2px 6px;
  border-radius: 8px;
  border: 2px solid var(--pitch-900);
}
.season-card--mini .season-card__jersey--badge { font-size: 9px; padding: 1px 4px; }
.season-card--platinum .season-card__portrait {
  background: #1a1a1a; border-color: #2a2a2a;
}
.season-card--mini .season-card__portrait { width: 58px; height: 58px; margin-top: 2px; }
.season-card__jersey {
  font-family: var(--font-display);
  font-size: 34px;
  font-weight: 900;
  color: var(--ink-1);
  letter-spacing: -1px;
}
.season-card--platinum .season-card__jersey { color: #fafafa; }
.season-card--mini .season-card__jersey { font-size: 22px; }

.season-card__name {
  margin-top: 10px;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  text-align: center;
}
.season-card--mini .season-card__name {
  font-size: 14px;
  letter-spacing: 0.8px;
  margin-top: 6px;
}

.season-card__stats {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid currentColor;
  border-top-color: color-mix(in srgb, currentColor 25%, transparent);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-self: stretch;
}
.season-card--mini .season-card__stats { margin-top: 8px; padding-top: 6px; gap: 3px; }

.season-card__stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
}
.season-card__stat {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 4px;
  font-variant-numeric: tabular-nums;
}
.season-card__stat-val {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.5px;
}
.season-card--mini .season-card__stat-val { font-size: 12px; }
.season-card__stat-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  opacity: 0.65;
}
.season-card--mini .season-card__stat-label { font-size: 7px; letter-spacing: 0.5px; }

.season-card__foil {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(135deg,
      transparent 45%,
      rgba(255,255,255,0.08) 50%,
      transparent 55%);
  mix-blend-mode: overlay;
}

/* ── 프로필 identity · pills · rank ───────────────────────── */
.profile__identity { text-align: center; }
.profile__name {
  margin: 0;
  font-size: 24px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--ink-1);
}
.profile__meta {
  margin-top: 4px;
  font-size: 12px;
  color: var(--ink-3);
}

.profile-pills {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.profile-pill {
  padding: 10px 6px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.profile-pill__val {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -0.5px;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
}
.profile-pill__label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ink-3);
}

.profile-rank {
  padding: 12px 14px;
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
  background: var(--pitch-900);
  font-size: 12px;
  color: var(--ink-2);
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
}
.profile-rank strong {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink-0);
  letter-spacing: -0.5px;
}
.profile-rank__total { color: var(--ink-3); }
.profile-rank__hint {
  margin-left: auto;
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 700;
  letter-spacing: 0.5px;
}

/* ── Share preview ───────────────────────────────────────── */
.share-preview {
  border: 1px solid var(--pitch-700);
  border-radius: 14px;
  background: var(--pitch-900);
  padding: 14px;
}
.share-preview__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.share-preview__title {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-1);
  letter-spacing: -0.3px;
}
.share-preview__ratios {
  display: flex;
  gap: 4px;
}
.share-preview__ratio {
  padding: 4px 10px;
  background: var(--pitch-800);
  color: var(--ink-2);
  border: 1px solid var(--pitch-700);
  border-radius: 14px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.3px;
  cursor: pointer;
  font-family: inherit;
}
.share-preview__ratio.is-active {
  background: var(--ink-0);
  color: var(--pitch-900);
  border-color: var(--ink-0);
}

.share-preview__body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
.share-preview__canvas {
  width: 100%;
  border: 1px dashed var(--pitch-700);
  border-radius: 10px;
  background: var(--pitch-850);
  padding: 14px 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}
.share-preview__canvas--916 { aspect-ratio: 9 / 16; }
.share-preview__canvas--11  { aspect-ratio: 1 / 1; }
.share-preview__canvas.is-hidden { display: none; }

.share-preview__kicker {
  align-self: flex-start;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--ink-2);
}
.share-preview__card-wrap {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.share-preview__foot {
  align-self: stretch;
  display: flex;
  justify-content: space-between;
  font-size: 10px;
  color: var(--ink-3);
}
.share-preview__foot--11 {
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}
.share-preview__foot--11 strong { color: var(--ink-1); font-weight: 800; }
.share-preview__brand {
  font-family: var(--font-display);
  letter-spacing: 2px;
  color: var(--ink-0);
  font-weight: 900;
}

.share-preview__actions {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  width: 100%;
}
.share-preview__btn {
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--pitch-700);
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink-1);
  background: var(--pitch-800);
}
.share-preview__btn--kakao { background: #fee500; color: #1a1a1a; border-color: #fee500; }
.share-preview__btn--insta { background: var(--ink-0); color: #fff; border-color: var(--ink-0); }

/* ── 최근 5경기 리스트 ──────────────────────────────────── */
.recent-matches__title {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--ink-3);
  text-transform: uppercase;
}
.recent-matches__empty {
  padding: 18px 14px;
  border: 1px dashed var(--pitch-700);
  border-radius: 12px;
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.6;
}
.recent-matches__list {
  list-style: none;
  margin: 0; padding: 0;
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
  overflow: hidden;
  background: var(--pitch-900);
}
.recent-matches__row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--pitch-700);
}
.recent-matches__row:last-child { border-bottom: none; }

.recent-matches__badge {
  width: 26px; height: 26px;
  border-radius: 13px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  background: var(--pitch-800);
  color: var(--ink-2);
}
.recent-matches__badge--attended        { background: var(--ink-0); color: var(--pitch-900); }
.recent-matches__badge--late            { background: var(--pitch-700); color: var(--ink-1); }
.recent-matches__badge--no_show         { background: var(--pitch-850); color: var(--ink-3); border: 1px dashed var(--pitch-600); }
.recent-matches__badge--excused_absence { background: transparent; border: 1px solid var(--pitch-600); color: var(--ink-3); }
.recent-matches__badge--pending         { background: transparent; color: var(--ink-2); }

.recent-matches__body { flex: 1; min-width: 0; }
.recent-matches__when {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.recent-matches__status {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}

/* ════════════════════════════════════════════════════════════
   Tactics · 전술판 (와이어프레임 06)
   ──────────────────────────────────────────────────────────── */

.tactic-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: calc(env(safe-area-inset-top) + 20px) 16px 8px;
  gap: 12px;
}
.tactic-head__back {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--ink-2);
  margin-left: -6px;
  margin-bottom: 4px;
  flex-shrink: 0;
}
.tactic-head__meta { flex: 1; min-width: 0; }
.tactic-head__kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--ink-2);
}
.tactic-head__title {
  margin: 2px 0 0;
  font-size: 18px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: var(--ink-1);
}

/* 전술 탭 — 매치 종류 인라인 토글 (admin) */
.match-config {
  margin: 0 16px 8px;
  border: 1px solid var(--pitch-700);
  border-radius: 10px;
  background: var(--pitch-900);
  overflow: hidden;
}
.match-config__summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  font-size: 12px;
}
.match-config__summary::-webkit-details-marker { display: none; }
.match-config__current { font-weight: 700; color: var(--ink-1); }
.match-config__edit {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 700;
  letter-spacing: 0.3px;
}
.match-config[open] .match-config__summary {
  border-bottom: 1px solid var(--pitch-700);
}
.match-config__form {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.match-config__row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.match-config__label {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 800;
  letter-spacing: 0.3px;
  margin-right: 4px;
}
.match-config__pill {
  position: relative;
  cursor: pointer;
}
.match-config__pill input { position: absolute; opacity: 0; pointer-events: none; }
.match-config__pill > span {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 16px;
  border: 1px solid var(--pitch-700);
  background: var(--pitch-850);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 800;
}
.match-config__pill input:checked + span {
  background: var(--ink-0);
  color: var(--pitch-900);
  border-color: var(--ink-0);
}
.match-config__pill--small > span { padding: 4px 10px; font-size: 11px; }
.match-config__input {
  flex: 1;
  min-width: 0;
  padding: 6px 10px;
  border: 1px solid var(--pitch-700);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  color: var(--ink-1);
  background: var(--pitch-850);
}
.match-config__apply {
  align-self: flex-end;
  padding: 8px 16px;
  border-radius: 8px;
  background: var(--ink-0);
  color: var(--pitch-900);
  border: none;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  font-family: inherit;
}

/* radio-pill — matches new form 의 측 분할 라디오 */
.radio-pill {
  position: relative;
  cursor: pointer;
}
.radio-pill input { position: absolute; opacity: 0; pointer-events: none; }
.radio-pill > span {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  border-radius: 18px;
  border: 1px solid var(--pitch-700);
  background: var(--pitch-850);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 800;
}
.radio-pill input:checked + span {
  background: var(--ink-0);
  color: var(--pitch-900);
  border-color: var(--ink-0);
}
.radio-pill--compact > span { padding: 6px 12px; font-size: 12px; }

.field__sport-group {
  margin-top: 6px;
}
.field__sport-label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ink-3);
  text-transform: uppercase;
  display: block;
  margin-bottom: 4px;
}

/* 자체전 A/B 팀 선택 */
.side-picker {
  display: flex;
  gap: 6px;
  padding: 0 16px 8px;
}
.side-picker__item {
  flex: 1;
  padding: 8px 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  background: var(--pitch-850);
  color: var(--ink-2);
  border: 1px solid var(--pitch-700);
  border-radius: 8px;
}
.side-picker__item.is-active {
  background: var(--ink-0);
  color: var(--pitch-900);
  border-color: var(--ink-0);
}

.formation-picker {
  display: flex;
  gap: 12px;
  padding: 0 16px 10px;
}
.formation-picker__group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.formation-picker__group-label {
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ink-3);
  text-transform: uppercase;
  padding-left: 2px;
}
.formation-picker__sizes {
  display: flex;
  gap: 4px;
}
.formation-picker__item {
  flex: 1;
  padding: 6px 0;
  text-align: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.3px;
  background: var(--pitch-850);
  color: var(--ink-2);
  border: 1px solid var(--pitch-700);
  border-radius: 6px;
  min-width: 0;
}
.formation-picker__item.is-active {
  background: var(--ink-0);
  color: var(--pitch-900);
  border-color: var(--ink-0);
}

/* ── Pitch ────────────────────────────────────────────────── */
.pitch {
  position: relative;
  margin: 0 16px;
  aspect-ratio: 350 / 500;
  border-radius: 12px;
  overflow: hidden;
  background: var(--pitch-850);
  border: 1px solid var(--pitch-700);
}
.pitch__svg {
  width: 100%;
  height: 100%;
  display: block;
}
.pitch__line { fill: none; stroke: var(--ink-0); stroke-width: 1.2; opacity: 0.5; }
.pitch__dot  { fill: var(--ink-0); opacity: 0.55; }

/* 슬롯 좌표 (y=94 GK 등) 기준으로 카드 절반이 피치 가장자리 밖으로
   삐져나오던 문제 → 위 6% / 아래 8% 여백을 inset 으로 잡아서 카드가
   안전하게 들어옴. */
.pitch__slots { position: absolute; inset: 6% 2% 8% 2%; }
.pitch__slot {
  position: absolute;
  transform: translate(-50%, -50%);
  /* 빈 그리드 슬롯도 드롭 타겟 — 적당한 hit area 제공. */
  min-width: 36px;
  min-height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}
/* 빈 그리드 위치 = 작은 동그라미. 카드 사이즈로 하면 28 포지션이 서로
   겹쳐서 답답하니 점·라벨 미니멀로. 평소엔 숨김, 드래그 중에만 노출. */
.pitch-slot-pin {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--pitch-850);
  border: 1.5px dashed var(--pitch-600);
  color: var(--ink-3);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.3px;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 120ms ease, transform 120ms ease;
}
.pitch-slot-pin--preset {
  color: var(--ink-1);
  border-color: var(--ink-1);
  border-style: solid;
}
.is-dragging .pitch-slot-pin {
  opacity: 0.6;
}
.is-dragging .pitch-slot-pin--preset {
  opacity: 0.9;
}
/* 드롭 타겟 호버 시 — 살짝 커지면서 fill */
.is-dragging .pitch__slot.is-drop-target .pitch-slot-pin {
  opacity: 1;
  background: var(--ink-0);
  color: var(--pitch-900);
  border-color: var(--ink-0);
  border-style: solid;
  transform: scale(1.2);
}

/* ════════════════════════════════════════════════════════════
   Bold Ticker 홈 대시보드
   ──────────────────────────────────────────────────────────── */

.ticker {
  padding: 24px 24px 32px;
}
.ticker__date {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 3px;
  color: var(--ink-2);
  margin-bottom: 6px;
  text-transform: uppercase;
}
.ticker__hero {
  margin: 0 0 6px;
  font-family: var(--font-display);
  font-size: 64px;
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -2.5px;
  color: var(--ink-1);
  text-transform: uppercase;
}
.ticker__hero-accent {
  color: var(--ink-0);
  display: inline-block;
}
.ticker__match {
  display: block;
  font-size: 13px;
  color: var(--ink-2);
  line-height: 1.5;
  margin-bottom: 20px;
}

/* 큰 RSVP 카드 — Ticker 톤 (홈 dashboard) */
.rsvp-widget--ticker {
  margin: 14px 0 28px;
  padding: 20px;
  background: var(--ink-0);
  color: var(--pitch-900);
  border-radius: 18px;
  border: none;
}
.rsvp-widget--ticker .rsvp-widget__title {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.8px;
  color: var(--pitch-900);
}
.rsvp-widget--ticker .rsvp-widget__deadline {
  color: rgba(255,255,255,0.55);
}
.rsvp-widget--ticker .rsvp-widget__choice {
  background: rgba(255,255,255,0.10);
  color: rgba(255,255,255,0.7);
  border-color: transparent;
  padding: 16px 8px;
}
.rsvp-widget--ticker .rsvp-widget__choice:has(input:checked) {
  background: var(--pitch-900);
  color: var(--ink-0);
  border-color: var(--pitch-900);
}
.rsvp-widget--ticker .rsvp-widget__choice-label { font-size: 14px; }
.rsvp-widget--ticker .rsvp-widget__trigger,
.rsvp-widget--ticker .rsvp-widget__submit {
  background: var(--pitch-900);
  color: var(--ink-0);
  height: 48px;
  font-size: 15px;
}
.rsvp-widget--ticker .rsvp-widget__cancel {
  height: 48px;
  font-size: 15px;
  color: var(--pitch-900);
  border-color: rgba(255, 255, 255, 0.3);
}
/* ticker variant — prompt / 본인 투표 hero 색깔 반전 (검정 카드 위 흰 톤) */
.rsvp-widget--ticker .rsvp-widget__prompt {
  color: rgba(255,255,255,0.6);
}
.rsvp-widget--ticker .rsvp-widget__current {
  background: rgba(255,255,255,0.08);
  border-color: rgba(255,255,255,0.15);
}
.rsvp-widget--ticker .rsvp-widget__current-label { color: rgba(255,255,255,0.55); }
.rsvp-widget--ticker .rsvp-widget__current-value { color: var(--pitch-900); }
.rsvp-widget--ticker .rsvp-widget__current-status { color: rgba(255,255,255,0.5); }
.rsvp-widget--ticker .rsvp-widget__current--maybe .rsvp-widget__current-value,
.rsvp-widget--ticker .rsvp-widget__current--no .rsvp-widget__current-value,
.rsvp-widget--ticker .rsvp-widget__current--missed .rsvp-widget__current-value {
  color: rgba(255,255,255,0.7);
}
.rsvp-widget--ticker .rsvp-widget__current--missed {
  border-style: dashed;
  background: transparent;
}

/* 키 스탯 — 큰 숫자 행 */
.ticker-stats {
  list-style: none;
  margin: 0;
  padding: 0;
}
.ticker-stat {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  padding: 14px 0;
  border-bottom: 1px solid var(--pitch-700);
}
.ticker-stat:last-child { border-bottom: none; }
.ticker-stat__label {
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 600;
  letter-spacing: -0.3px;
}
.ticker-stat__val {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--ink-1);
  letter-spacing: -0.5px;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
  margin-right: 4px;
}
.ticker-stat__val--accent { color: var(--ink-0); }
.ticker-stat__unit {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 700;
}

/* 운영진 패널 — 페이지 하단 */
.admin-panel {
  margin: 8px 16px 0;
  padding: 18px 16px 16px;
  background: var(--pitch-850);
  border-radius: 16px;
  border-top: 2px solid var(--ink-0);
}
.admin-panel__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 14px;
}
.admin-panel__kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--ink-0);
  text-transform: uppercase;
}
.admin-panel__hint {
  font-size: 11px;
  color: var(--ink-3);
}
.admin-panel__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 14px;
}
.admin-panel__tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
  color: var(--ink-1);
}
.admin-panel__tile--alert {
  border-color: var(--ink-0);
  background: var(--ink-0);
  color: var(--pitch-900);
}
.admin-panel__tile-label {
  font-size: 13px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-top: 4px;
}
.admin-panel__tile-sub {
  font-size: 11px;
  opacity: 0.7;
}

/* ── home 운영진 알림 — 즉시 처리 필요한 상태만 (액션 hub 는 팀관리 탭) ── */
.admin-alerts {
  margin: 8px 16px 0;
  padding: 14px 14px 12px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
}
.admin-alerts__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 10px;
}
.admin-alerts__head .admin-alerts__kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 2px;
  color: var(--ink-0);
  text-transform: uppercase;
}
.admin-alerts__hub {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  text-decoration: none;
}
.admin-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--pitch-850);
  border-radius: 10px;
  color: var(--ink-1);
  text-decoration: none;
  margin-top: 6px;
}
.admin-alert__label {
  flex: 1;
  font-size: 13px;
  font-weight: 700;
}
.admin-alert__count {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-0);
  background: var(--pitch-900);
  padding: 2px 8px;
  border-radius: 6px;
}

/* ── 팀관리 hub 페이지 ── */
.manage-summary {
  margin: 14px 16px 14px;
  padding: 14px 16px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
}
.manage-summary__row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.manage-summary__label {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.manage-summary__value {
  font-size: 18px;
  font-weight: 800;
  color: var(--ink-1);
  letter-spacing: -0.3px;
}
.manage-alerts {
  margin: 0 16px 14px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.manage-alert {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--ink-0);
  color: var(--pitch-900);
  border-radius: 10px;
  text-decoration: none;
}
.manage-alert__label {
  flex: 1;
  font-size: 13px;
  font-weight: 800;
}
.manage-alert__count {
  font-size: 13px;
  font-weight: 800;
}
.manage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 0 16px 14px;
}
.manage-tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
  color: var(--ink-1);
  text-decoration: none;
  min-height: 88px;
}
.manage-tile__label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-top: 6px;
}
.manage-tile__sub {
  font-size: 11px;
  color: var(--ink-3);
}

/* 시즌카드 OVR 자리 가림 처리 */
.season-card__ovr--blank,
.pitch-card__ovr--blank {
  opacity: 0.3;
  letter-spacing: 0;
  /* Anton 에 "·" 글리프가 없어 회색 사각형(tofu)으로 렌더되던 것 — UI 폰트로. */
  font-family: var(--font-ui);
}

/* 팀 정책 설정 페이지 */
.team-settings {
  padding: 16px 16px 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.team-settings__group {
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
  padding: 14px 14px 8px;
  background: var(--pitch-900);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.team-settings__legend {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ink-1);
  padding: 0 4px;
}
.team-settings__hint {
  font-size: 11px;
  color: var(--ink-3);
  margin: 0 0 4px;
  line-height: 1.5;
}
.team-settings__footer {
  margin-top: 8px;
}
.team-settings__footer .btn { height: 50px; }

/* 멤버 관리 페이지 */
.members-list {
  padding: 0 16px 100px;
}
.members-list__hint {
  margin: 12px 0 14px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}
.members-list__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.members-row {
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
  padding: 12px 14px;
}
.members-row--left { opacity: 0.55; }
.members-row__head {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 8px;
}
.members-row__name {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-1);
}
.members-row__meta {
  font-size: 11px;
  color: var(--ink-3);
}
.members-row__form {
  display: grid;
  grid-template-columns: 1fr 1fr 60px;
  gap: 8px 8px;
  align-items: end;
}
.members-row__field {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.members-row__field span {
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 800;
  letter-spacing: 0.3px;
}
.members-row__select,
.members-row__input {
  padding: 8px 10px;
  border: 1px solid var(--pitch-700);
  border-radius: 8px;
  font-size: 13px;
  font-family: inherit;
  background: var(--pitch-850);
  color: var(--ink-1);
  width: 100%;
}
.members-row__input--number {
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.members-row__actions {
  grid-column: 1 / -1;
  display: flex;
  gap: 6px;
  margin-top: 4px;
}
.members-row__btn {
  height: 36px;
  padding: 0 14px;
  font-size: 12px;
}
.members-row__btn--danger {
  color: #b00020;
  border-color: rgba(176, 0, 32, 0.35);
}

/* 자체전 분배 표시 */
.sides-breakdown {
  margin: 0 16px 14px;
  padding: 14px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
}
.sides-breakdown__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.sides-breakdown__title {
  margin: 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ink-1);
}
.sides-breakdown__rebalance {
  font-size: 11px;
  font-weight: 800;
  padding: 6px 10px;
  border-radius: 14px;
  background: var(--pitch-800);
  color: var(--ink-1);
  border: 1px solid var(--pitch-700);
  cursor: pointer;
  font-family: inherit;
}
.sides-breakdown__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.sides-breakdown__col {
  background: var(--pitch-850);
  border-radius: 10px;
  padding: 10px;
}
.sides-breakdown__col-head {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 10px;
  color: var(--ink-3);
}
.sides-breakdown__label {
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--ink-0);
}
.sides-breakdown__count { font-weight: 700; }
.sides-breakdown__avg { margin-left: auto; }
.sides-breakdown__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.sides-breakdown__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  color: var(--ink-1);
}
.sides-breakdown__row--empty { color: var(--ink-3); font-style: italic; }
.sides-breakdown__ovr {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-2);
  font-variant-numeric: tabular-nums;
}

/* ── PitchCard (미니 시즌) ────────────────────────────────── */
.pitch-card {
  width: 58px;
  min-height: 82px;
  padding: 6px 4px 18px;
  border-radius: 7px;
  background: var(--pitch-900);
  border: 1px solid var(--ink-0);
  color: var(--ink-1);
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  box-shadow: 0 6px 14px rgba(0,0,0,0.12);
  overflow: hidden;
  font-family: var(--font-display);
  text-align: center;
  isolation: isolate;
  /* 카드 자체는 드래그 앤 드롭의 픽업 대상 — 텍스트 선택이 끼면
     long-press / 드래그가 selection 으로 가로채임. 카드 안 텍스트는
     모두 비선택 + native 이미지 드래그 비활성. */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.pitch-card * {
  user-select: none;
  -webkit-user-select: none;
}
.pitch-card--bronze { background: #f1ede8; border-color: #6b5a48; }
.pitch-card--silver { background: #f4f4f4; border-color: var(--pitch-600); }
.pitch-card--gold   { background: #fff;    border-color: var(--ink-0); }
.pitch-card--platinum   { background: var(--ink-0); color: var(--pitch-900); border-color: var(--ink-0); }

.pitch-card--mismatched {
  border-style: dashed;
  box-shadow: 0 0 0 1px var(--pitch-700) inset, 0 6px 14px rgba(0,0,0,0.12);
}

.pitch-card__head {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  line-height: 0.9;
}
.pitch-card__ovr {
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: 900;
  letter-spacing: -1px;
}
.pitch-card__pos {
  font-family: var(--font-display);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 1px;
  margin-top: 1px;
  opacity: 0.85;
}
.pitch-card__name {
  position: absolute;
  bottom: 4px;
  left: 2px; right: 2px;
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-align: center;
}
.pitch-card__jersey {
  position: absolute;
  top: 4px;
  right: 4px;
  font-family: var(--font-ui);
  font-size: 9px;
  font-weight: 800;
  opacity: 0.55;
}

.pitch-card--empty {
  border: 1.5px dashed var(--pitch-600);
  background: transparent;
  box-shadow: none;
  color: var(--ink-3);
  justify-content: center;
  padding: 0;
}
.pitch-card--empty .pitch-card__empty-label {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 1px;
}

/* ── Bench 가로 스크롤 ──────────────────────────────────── */
.tactic-bench { padding: 16px 0 8px; }
.tactic-bench__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px 8px;
}
.tactic-bench__title {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 1.5px;
  font-weight: 800;
  text-transform: uppercase;
}
.tactic-bench__hint {
  font-size: 10px;
  color: var(--ink-3);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.tactic-bench__empty {
  padding: 14px 16px;
  margin: 0 16px;
  border: 1px dashed var(--pitch-700);
  border-radius: 10px;
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
}
.tactic-bench__list {
  list-style: none;
  margin: 0;
  padding: 0 16px;
  display: flex;
  gap: 6px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tactic-bench__list::-webkit-scrollbar { display: none; }
.tactic-bench__slot { flex-shrink: 0; }
.pitch-card--bench { width: 54px; min-height: 76px; box-shadow: 0 2px 6px rgba(0,0,0,0.08); }
.pitch-card--bench .pitch-card__ovr { font-size: 17px; }
.pitch-card--bench .pitch-card__name { font-size: 9px; bottom: 3px; }

/* ── 드래그 에디터 상태 ──────────────────────────────────── */
.pitch-card--draggable {
  cursor: grab;
}
.pitch-card--draggable:active {
  cursor: grabbing;
  transform: scale(0.96);
  transition: transform 80ms ease;
}
.pitch-card.is-dragging-source {
  opacity: 0.2;
  transition: opacity 140ms ease;
}
.pitch-card--ghost {
  box-shadow: 0 18px 40px rgba(0,0,0,0.28), 0 4px 12px rgba(0,0,0,0.18);
  cursor: grabbing;
  /* transform-origin 을 가운데로 — translate3d + scale + rotate 가 카드 중심 기준. */
  transform-origin: center center;
  /* opacity 만 트랜지션, transform 은 매 프레임 직접 set 하니 instant. */
  transition: opacity 120ms ease;
}
.pitch__slot.is-drop-target {
  outline: 2px dashed var(--ink-0);
  outline-offset: 2px;
  border-radius: 8px;
  transition: outline-color 120ms ease, background 120ms ease;
}
[data-lineup-editor-target="bench"].is-drop-target {
  outline: 2px dashed var(--ink-0);
  outline-offset: 4px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.04);
  transition: outline-color 120ms ease, background 120ms ease;
}
/* 카드가 새 슬롯에 도착하면 살짝 pop. drop 직후 트리거. */
@keyframes pitch-card-pop {
  0%   { transform: scale(0.92); }
  60%  { transform: scale(1.04); }
  100% { transform: scale(1); }
}
.pitch-card--just-dropped {
  animation: pitch-card-pop 220ms ease-out;
}
.lineup-editor-form { display: none; }

.tactic-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 16px;
}
.tactic-actions__btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  position: relative;
}
.tactic-actions__p1 {
  font-size: 9px;
  font-weight: 900;
  letter-spacing: 1px;
  margin-left: 6px;
  padding: 1px 5px;
  background: var(--pitch-800);
  color: var(--ink-3);
  border-radius: 4px;
}

/* ════════════════════════════════════════════════════════════
   Chat · 매치 전술 채팅 (와이어프레임 08)
   ──────────────────────────────────────────────────────────── */

.chat-head {
  position: sticky;
  top: 0;
  display: flex;
  gap: 10px;
  align-items: center;
  padding: calc(env(safe-area-inset-top) + 12px) 14px 10px;
  background: var(--pitch-900);
  border-bottom: 1px solid var(--pitch-700);
  z-index: 5;
}
.chat-head__back {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--ink-2);
  margin-left: -6px;
}
.chat-head__meta { flex: 1; min-width: 0; }
.chat-head__kicker {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ink-2);
  text-transform: uppercase;
}
.chat-head__pulse {
  width: 6px; height: 6px;
  border-radius: 3px;
  background: var(--ink-0);
  animation: chat-pulse 1.5s ease-in-out infinite;
}
@keyframes chat-pulse {
  0%, 100% { opacity: 0.35; }
  50%      { opacity: 1; }
}
.chat-head__title {
  margin-top: 2px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: -0.3px;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.chat-head__participants { display: flex; }
.chat-head__avatar {
  width: 26px; height: 26px;
  margin-left: -6px;
  border-radius: 13px;
  background: var(--pitch-800);
  color: var(--ink-1);
  border: 2px solid var(--pitch-900);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
}
.chat-head__avatar--more {
  background: var(--ink-0);
  color: var(--pitch-900);
  font-size: 10px;
}

/* ── Message stream ────────────────────────────────────────── */
.chat-stream {
  min-height: calc(100dvh - 84px - 72px - 60px); /* head + composer */
  padding: 16px 14px 100px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.chat-messages {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
/* 자동 스크롤 시 fixed 컴포저(64px)+탭바(84px)에 마지막 메시지가 가리지 않게. */
.chat-messages > * { scroll-margin-bottom: 160px; }
.chat-messages__empty {
  align-self: center;
  max-width: 260px;
  padding: 14px 16px;
  margin-top: 40px;
  border: 1px dashed var(--pitch-700);
  border-radius: 12px;
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
  line-height: 1.6;
}

.chat-msg {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 100%;
}
.chat-msg--in { justify-content: flex-start; }
.chat-msg--out { justify-content: flex-end; }
.chat-msg--system {
  align-self: center;
  padding: 5px 11px;
  background: var(--pitch-850);
  color: var(--ink-2);
  border: 1px dashed var(--pitch-600);
  border-radius: 14px;
  font-size: 11px;
}

.chat-msg__avatar {
  width: 26px; height: 26px;
  flex-shrink: 0;
  border-radius: 13px;
  background: var(--pitch-800);
  color: var(--ink-1);
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
}
.chat-msg__body {
  max-width: 78%;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.chat-msg__who {
  font-size: 10px;
  color: var(--ink-3);
  margin-left: 3px;
}
.chat-msg__role { font-weight: 800; color: var(--ink-1); }
.chat-msg__bubble {
  padding: 10px 12px;
  border-radius: 14px 14px 14px 4px;
  background: var(--pitch-850);
  color: var(--ink-1);
  font-size: 13px;
  line-height: 1.4;
  word-break: break-word;
  white-space: pre-wrap;
}
.chat-msg--out .chat-msg__bubble {
  background: var(--ink-0);
  color: var(--pitch-900);
  border-radius: 14px 14px 4px 14px;
  font-weight: 600;
}
.chat-msg__time {
  font-size: 9px;
  color: var(--ink-3);
  align-self: flex-end;
  margin: 2px 4px 0;
}
.chat-msg--out .chat-msg__time { align-self: flex-end; }

/* ── Composer ─────────────────────────────────────────────── */
.chat-composer {
  position: fixed;
  /* 모바일 칸 안에 가운데 정렬 — 데스크톱에서도 모바일 폭 안. */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  bottom: calc(84px + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: var(--pitch-900);
  border-top: 1px solid var(--pitch-700);
  z-index: 4;
}
.chat-composer__attach,
.chat-composer__send {
  width: 36px; height: 36px;
  border-radius: 18px;
  display: grid; place-items: center;
  cursor: pointer;
  border: 1px solid var(--pitch-700);
  background: var(--pitch-850);
  color: var(--ink-1);
  font-family: inherit;
}
.chat-composer__attach[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}
.chat-composer__send {
  background: var(--ink-0);
  color: var(--pitch-900);
  border-color: var(--ink-0);
}
.chat-composer__input {
  flex: 1;
  height: 36px;
  padding: 0 14px;
  border-radius: 18px;
  border: 1px solid var(--pitch-700);
  background: var(--pitch-850);
  color: var(--ink-1);
  font-size: 13px;
  font-family: inherit;
}
.chat-composer__input::placeholder { color: var(--ink-3); }
.chat-composer__input:focus {
  outline: none;
  border-color: var(--ink-0);
}
.chat-composer__error {
  color: #b00020;
  font-size: 11px;
  padding: 4px 14px 0;
}

/* ── Chat quick actions (admin: N빵 / 전술 공유) ───────── */
.chat-quick-actions {
  position: fixed;
  /* 모바일 칸 안에 가운데 정렬. */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  bottom: calc(84px + 56px + env(safe-area-inset-bottom));
  display: flex;
  gap: 8px;
  padding: 6px 14px 4px;
  background: linear-gradient(to top, var(--pitch-900) 70%, transparent);
  z-index: 3;
}
.chat-quick-actions__btn {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 34px;
  padding: 0 10px;
  background: var(--pitch-850);
  border: 1px solid var(--pitch-700);
  border-radius: 17px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-1);
  cursor: pointer;
  font-family: inherit;
}
.chat-quick-actions form { flex: 1; display: flex; }
.chat-quick-actions form .chat-quick-actions__btn--button { width: 100%; }

/* ── Settlement card (chat) ──────────────────────────── */
.settle-card {
  align-self: stretch;
  position: relative;
  padding: 14px 14px 12px;
  background: var(--pitch-850);
  border: 1px solid var(--pitch-700);
  border-left: 3px solid var(--ink-0);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settle-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.settle-card__kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--ink-0);
  text-transform: uppercase;
}
.settle-card__by {
  font-size: 10px;
  color: var(--ink-3);
}
.settle-card__amount {
  font-family: var(--font-display);
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-top: 4px;
}
.settle-card__per {
  font-size: 26px;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--ink-0);
}
.settle-card__count {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-3);
}
.settle-card__label {
  font-size: 13px;
  color: var(--ink-1);
  font-weight: 700;
}
.settle-card__total {
  font-size: 11px;
  color: var(--ink-3);
}
.settle-card__total strong {
  color: var(--ink-1);
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.settle-card__pay {
  margin-top: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  background: var(--ink-0);
  color: var(--pitch-900);
  font-size: 12px;
  font-weight: 800;
  border: none;
  cursor: pointer;
  font-family: inherit;
}
.settle-card__pay--disabled {
  background: var(--pitch-800);
  color: var(--ink-3);
  cursor: not-allowed;
}
.settle-card__time {
  align-self: flex-end;
  font-size: 9px;
  color: var(--ink-3);
}

/* ── Tactic share card (chat) ─────────────────────────── */
.tactic-card {
  align-self: stretch;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 10px;
  overflow: hidden;
  position: relative;
}
.tactic-card__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 10px 14px 8px;
  border-bottom: 1px solid var(--pitch-700);
  gap: 8px;
}
.tactic-card__kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--ink-0);
  text-transform: uppercase;
}
.tactic-card__title {
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tactic-card__pitch {
  position: relative;
  width: 100%;
  aspect-ratio: 220 / 200;
  background: var(--pitch-850);
}
.tactic-card__svg {
  width: 100%;
  height: 100%;
  display: block;
}
.tactic-card__token {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 38px;
  padding: 4px 2px;
  border-radius: 5px;
  background: var(--pitch-900);
  border: 1px solid var(--ink-0);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-family: var(--font-display);
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
  text-align: center;
}
.tactic-card__token--bronze   { background: #f1ede8; border-color: #6b5a48; }
.tactic-card__token--silver   { background: #f4f4f4; border-color: var(--pitch-600); }
.tactic-card__token--gold     { background: #fff;    border-color: var(--ink-0); }
.tactic-card__token--platinum { background: var(--ink-0); color: var(--pitch-900); border-color: var(--ink-0); }
.tactic-card__ovr {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1;
}
.tactic-card__name {
  font-family: var(--font-ui);
  font-size: 7px;
  font-weight: 800;
  letter-spacing: -0.2px;
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}
.tactic-card__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-1);
  border-top: 1px solid var(--pitch-700);
}
.tactic-card__time {
  position: absolute;
  top: 10px; right: 14px;
  font-size: 9px;
  color: var(--ink-3);
}

/* ── Settlement form ─────────────────────────────────────── */
.settle-form {
  padding: 0 16px 100px;
}
.settle-form__hint {
  margin: 8px 0 16px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}
.settle-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.settle-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.settle-form__row .settle-form__field { margin-bottom: 0; }
.settle-form__label {
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 800;
  letter-spacing: -0.2px;
}
.settle-form__input {
  padding: 12px 14px;
  border: 1px solid var(--pitch-700);
  border-radius: 10px;
  font-size: 14px;
  color: var(--ink-1);
  background: var(--pitch-900);
  font-family: inherit;
  font-variant-numeric: tabular-nums;
}
.settle-form__input:focus {
  outline: none;
  border-color: var(--ink-0);
}
.settle-form__hint-sm {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}
.settle-form__footer {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 10px;
  margin-top: 20px;
}
.settle-form__footer .btn { height: 48px; width: 100%; }

/* ════════════════════════════════════════════════════════════
   Match results entry — admin only, completed match
   ──────────────────────────────────────────────────────────── */

.page-head--with-back {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start; /* .page-head 의 space-between 해제 — 뒤로가기+제목 좌측 정렬 */
  gap: 8px;
  padding: calc(env(safe-area-inset-top) + 18px) 16px 8px;
}
.page-head__back {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  color: var(--ink-2);
  margin-left: -6px;
  margin-bottom: 4px;
}

/* onboarding 페이지 (매치 등록/수정, 팀 초대, 거래 등록 등) 의
   뒤로가기 — page-head 없이 .onboarding 컨테이너 위쪽 절대 배치. */
.onboarding > .page-head__back {
  position: absolute;
  top: calc(env(safe-area-inset-top) + 18px);
  left: 16px;
  margin: 0;
  z-index: 1;
}

.results-form {
  padding: 0 16px 100px;
}
.results-form__hint {
  margin: 8px 0 16px;
  font-size: 12px;
  color: var(--ink-2);
  line-height: 1.5;
}
.results-form__group-title {
  margin: 18px 0 8px;
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--ink-3);
  text-transform: uppercase;
}
.results-form__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
  background: var(--pitch-900);
  overflow: hidden;
}
.results-form__list + .results-form__list { margin-top: 12px; }
.results-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--pitch-700);
}
.results-row:last-child { border-bottom: none; }

.results-row__id {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.results-row__name {
  font-size: 13px;
  font-weight: 800;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.results-row__meta {
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}

.results-row__inputs {
  display: flex;
  gap: 6px;
  align-items: center;
}
.results-input {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--pitch-850);
  border: 1px solid var(--pitch-700);
  border-radius: 8px;
  padding: 4px 8px;
}
.results-input__label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  color: var(--ink-3);
  letter-spacing: 0.5px;
}
.results-input__field {
  width: 30px;
  border: none;
  background: transparent;
  text-align: center;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
}
.results-input__field::-webkit-outer-spin-button,
.results-input__field::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.results-input__field:focus { outline: none; }

.results-row__potm {
  display: grid;
  place-items: center;
  width: 36px; height: 30px;
  border: 1px solid var(--pitch-700);
  border-radius: 8px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: var(--ink-3);
  cursor: pointer;
  background: var(--pitch-850);
  transition: all 120ms ease;
}
.results-row__potm input { display: none; }
.results-row__potm.is-active,
.results-row__potm:has(input:checked) {
  background: var(--ink-0);
  color: var(--pitch-900);
  border-color: var(--ink-0);
}

.results-form__potm-clear {
  margin-top: 12px;
  font-size: 12px;
  color: var(--ink-3);
}
.results-form__potm-clear label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.results-form__footer {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 8px;
  margin-top: 20px;
}
.results-form__footer .btn { height: 48px; width: 100%; }

/* ── 프로필 최근경기 G/A/MOM chip ────────────────────────── */
.recent-matches__perf {
  display: flex;
  gap: 4px;
  margin-left: 6px;
  flex-shrink: 0;
}
.recent-matches__chip {
  padding: 2px 6px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.3px;
  background: var(--pitch-800);
  color: var(--ink-1);
}
.recent-matches__chip--g    { background: var(--ink-0); color: var(--pitch-900); }
.recent-matches__chip--a    { background: var(--pitch-700); color: var(--ink-1); }
.recent-matches__chip--potm { background: transparent; color: var(--ink-0); border: 1px solid var(--ink-0); }

/* ── Match results summary card ─────────────────────────── */
.results-summary {
  margin: 0 16px 14px;
  padding: 14px 16px;
  background: var(--pitch-900);
  border: 1.5px solid var(--ink-0);
  border-radius: 14px;
}
.results-summary__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}
.results-summary__kicker {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--ink-2);
}
.results-summary__total {
  font-size: 12px;
  color: var(--ink-2);
}
.results-summary__total strong {
  font-family: var(--font-display);
  font-size: 18px;
  color: var(--ink-0);
  letter-spacing: -0.5px;
  margin-right: 2px;
  font-variant-numeric: tabular-nums;
}

.results-summary__potm {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin-bottom: 10px;
  background: var(--ink-0);
  color: var(--pitch-900);
  border-radius: 10px;
}
.results-summary__potm-label {
  font-family: var(--font-display);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 1.5px;
  padding: 3px 8px;
  border-radius: 6px;
  background: var(--pitch-900);
  color: var(--ink-0);
}
.results-summary__potm-name {
  flex: 1;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: -0.3px;
}
.results-summary__potm-stats {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: 0.3px;
  font-variant-numeric: tabular-nums;
}

.results-summary__top {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.results-summary__row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 4px;
  font-size: 13px;
}
.results-summary__rank {
  font-family: var(--font-display);
  font-size: 12px;
  font-weight: 900;
  color: var(--ink-3);
  width: 22px;
  letter-spacing: 0.5px;
}
.results-summary__name {
  flex: 1;
  font-weight: 700;
  color: var(--ink-1);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.results-summary__chips {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.results-summary__chip {
  padding: 2px 6px;
  border-radius: 6px;
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.3px;
  background: var(--pitch-800);
  color: var(--ink-1);
}
.results-summary__chip--g    { background: var(--ink-0); color: var(--pitch-900); }
.results-summary__chip--a    { background: var(--pitch-700); color: var(--ink-1); }
.results-summary__chip--potm { background: transparent; color: var(--ink-0); border: 1px solid var(--ink-0); }

/* ════════════════════════════════════════════════════════════
   Matches index — 탭바 매치 진입점
   ──────────────────────────────────────────────────────────── */

.page-head__cta {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 14px;
  background: var(--ink-0);
  color: var(--pitch-900);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.2px;
  flex-shrink: 0;
  align-self: center;
}

.match-section { padding: 8px 16px 4px; }
.match-section--cancelled { opacity: 0.7; }
.match-section__title {
  margin: 12px 0 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.match-section__count {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 8px;
  background: var(--pitch-700);
  color: var(--ink-2);
  font-size: 10px;
  letter-spacing: 0.5px;
}
.match-section__pulse {
  width: 6px; height: 6px;
  border-radius: 3px;
  background: var(--ink-0);
  animation: chat-pulse 1.5s ease-in-out infinite;
}
.match-section__empty {
  padding: 18px 14px;
  border: 1px dashed var(--pitch-700);
  border-radius: 12px;
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
}

.match-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.match-row {
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
  overflow: hidden;
}
.match-row--live { border-color: var(--ink-0); border-width: 1.5px; }
.match-row__link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  color: inherit;
}
.match-row__date {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 44px;
  flex-shrink: 0;
  padding: 4px 0;
  border-right: 1px solid var(--pitch-700);
}
.match-row__day {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--ink-0);
  letter-spacing: -1px;
  line-height: 1;
}
.match-row__month {
  font-family: var(--font-display);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.5px;
  color: var(--ink-3);
  margin-top: 2px;
}

.match-row__body {
  flex: 1;
  min-width: 0;
}
.match-row__title {
  font-size: 14px;
  font-weight: 800;
  color: var(--ink-1);
  letter-spacing: -0.3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.match-row__meta {
  font-size: 11px;
  color: var(--ink-3);
  margin-top: 2px;
}
.match-row__chev {
  color: var(--ink-3);
  flex-shrink: 0;
}

.match-row__badge {
  flex-shrink: 0;
  padding: 4px 9px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  font-family: var(--font-display);
}
.match-row__badge--live {
  background: var(--ink-0);
  color: var(--pitch-900);
}
.match-row__badge--done {
  background: var(--pitch-800);
  color: var(--ink-1);
  border: 1px solid var(--pitch-700);
}
.match-row__badge--pending {
  background: transparent;
  color: var(--ink-3);
  border: 1px dashed var(--pitch-600);
  letter-spacing: 0.3px;
}
.match-row__badge--cancelled {
  background: transparent;
  color: var(--ink-3);
  border: 1px dashed var(--pitch-600);
  letter-spacing: 0.3px;
}
.match-row--cancelled .match-row__title,
.match-row--cancelled .match-row__meta {
  text-decoration: line-through;
  text-decoration-color: var(--pitch-600);
  color: var(--ink-3);
}
.match-row__score {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  letter-spacing: 0.5px;
  color: var(--ink-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* 결과 요약 카드 헤더 스코어 강조 */
.results-summary__score {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--ink-0);
  font-variant-numeric: tabular-nums;
}

/* 결과 입력 폼 — 외부매치 스코어 입력 */
.results-score {
  margin: 4px 0 14px;
  padding: 14px;
  background: var(--pitch-900);
  border: 1.5px solid var(--ink-0);
  border-radius: 12px;
}
.results-score__label {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--ink-2);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.results-score__inputs {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
}
.results-score__side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.results-score__name {
  font-size: 11px;
  color: var(--ink-2);
  font-weight: 800;
}
.results-score__derived,
.results-score__input {
  font-family: var(--font-display);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: -1px;
  color: var(--ink-0);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.results-score__derived { line-height: 1; }
.results-score__input {
  width: 80px;
  padding: 4px 0;
  border: 1px solid var(--pitch-700);
  border-radius: 8px;
  background: var(--pitch-850);
  -moz-appearance: textfield;
}
.results-score__input::-webkit-outer-spin-button,
.results-score__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.results-score__sep {
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink-3);
  letter-spacing: 1px;
}
.results-score__hint {
  font-size: 10px;
  color: var(--ink-3);
  text-align: center;
  margin-top: 8px;
}

/* ── Sport radio (segmented) ───────────────────────────── */
.sport-radios {
  display: flex;
  gap: 6px;
  background: var(--pitch-800);
  border-radius: 12px;
  padding: 4px;
}
.sport-radio {
  flex: 1;
  position: relative;
  cursor: pointer;
}
.sport-radio input { position: absolute; opacity: 0; pointer-events: none; }
.sport-radio span {
  display: block;
  padding: 10px 12px;
  border-radius: 9px;
  text-align: center;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-2);
  transition: background 120ms ease, color 120ms ease;
}
.sport-radio input:checked + span {
  background: var(--ink-1);
  color: var(--pitch-900);
}

/* ── Discover (Phase 2a/2b) ─────────────────────────────── */
.discover-modes {
  display: flex;
  gap: 6px;
  padding: 10px 16px 4px;
}
.discover-mode {
  flex: 1;
  padding: 10px 12px;
  text-align: center;
  border-radius: 10px;
  background: var(--pitch-800);
  color: var(--ink-2);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.discover-mode.is-active {
  background: var(--ink-1);
  color: var(--pitch-900);
}

.skill-guide {
  margin: 0 0 8px;
  padding: 8px 12px;
  background: var(--pitch-800);
  border-radius: 8px;
  font-size: 12px;
}
.skill-guide__summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--ink-2);
  list-style: none;
  user-select: none;
}
.skill-guide__summary::-webkit-details-marker { display: none; }
.skill-guide__summary::before {
  content: "▸ ";
  display: inline-block;
  width: 1em;
  transition: transform 120ms ease;
}
.skill-guide[open] .skill-guide__summary::before {
  transform: rotate(90deg);
}
.skill-guide__list {
  margin: 8px 0 0;
  display: grid;
  grid-template-columns: 48px 1fr;
  gap: 4px 12px;
}
.skill-guide__label {
  font-weight: 800;
  color: var(--ink-1);
  text-align: left;
}
.skill-guide__desc {
  color: var(--ink-3);
  margin: 0;
  line-height: 1.4;
}

.discover-subs {
  display: flex;
  gap: 6px;
  padding: 6px 16px 4px;
}
.discover-sub {
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--pitch-800);
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
  transition: background 120ms ease, color 120ms ease;
}
.discover-sub.is-active {
  background: var(--ink-1);
  color: var(--pitch-900);
}

.discover-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 16px 0;
  border-bottom: 1px solid var(--pitch-800);
}
.discover-tab {
  flex: 1;
  padding: 10px 0;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-3);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease, border-color 120ms ease;
}
.discover-tab.is-active {
  color: var(--ink-1);
  border-bottom-color: var(--ink-1);
}
.discover-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 8px 16px 12px;
  align-items: stretch;
}
.discover-filter .field__input,
.discover-filter .field__select { flex: 1 0 100%; min-width: 0; }
.discover-filter .region-select { flex: 1 0 100%; }
.discover-filter .skill-guide { flex: 1 0 100%; }
.discover-filter__btn {
  flex: 1 0 100%;
  height: 44px;
  padding: 0 14px;
  font-size: 13px;
}
.discover__empty {
  margin: 16px 16px 24px;
  padding: 28px 16px;
  border: 1px dashed var(--pitch-700);
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-3);
  line-height: 1.5;
}
.discover-list {
  list-style: none;
  margin: 0;
  padding: 0 16px 24px;
}
.discover-card {
  margin-bottom: 12px;
  border: 1px solid var(--pitch-700);
  border-radius: 14px;
  background: var(--pitch-900);
  overflow: hidden;
}
.discover-card__link {
  display: block;
  padding: 14px;
  color: inherit;
  text-decoration: none;
}
.discover-card__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.discover-card__logo {
  width: 36px;
  height: 36px;
  border-radius: 18px;
  background: var(--pitch-800);
  color: var(--ink-1);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-weight: 900;
}
.discover-card__id { flex: 1; min-width: 0; }
.discover-card__name {
  font-size: 16px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ink-1);
}
.discover-card__meta {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-3);
}
.discover-card__blurb {
  margin: 10px 0 0;
  padding: 10px 12px;
  background: var(--pitch-800);
  border-radius: 10px;
  font-size: 13px;
  color: var(--ink-1);
  line-height: 1.45;
}
.discover-card__foot {
  margin-top: 10px;
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-3);
  gap: 10px;
}
.discover-card__venue { text-align: right; }

/* ── Team public show (Phase 2a) ──────────────────────────── */
.team-public { padding: 0 16px 24px; }
.team-public__head {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
}
.team-public__logo {
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background: var(--pitch-800);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--ink-1);
}
.team-public__meta {
  font-size: 13px;
  color: var(--ink-3);
}
.team-public__skill {
  font-weight: 800;
  color: var(--ink-1);
}
.team-public__skill-desc {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-3);
}
.team-public__age {
  margin-top: 2px;
  font-size: 12px;
  color: var(--ink-3);
}
.team-public__count {
  margin-top: 2px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-1);
}
.team-public__blurb {
  margin: 6px 0 14px;
  padding: 12px 14px;
  background: var(--pitch-800);
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-1);
}
.team-public__facts {
  margin: 0 0 16px;
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 6px 12px;
  font-size: 13px;
}
.team-public__facts dt { color: var(--ink-3); font-weight: 700; }
.team-public__facts dd { margin: 0; color: var(--ink-1); }

/* ── Player public show — 팀 public 헤더와 같은 패턴 ─────── */
.player-public { padding: 0 16px 24px; }
.player-public__head {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 12px 0;
}
.player-public__logo {
  width: 56px;
  height: 56px;
  border-radius: 28px;
  background: var(--pitch-800);
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  color: var(--ink-1);
}
.player-public__name {
  font-size: 16px;
  font-weight: 900;
  color: var(--ink-1);
}
.player-public__meta {
  margin-top: 2px;
  font-size: 13px;
  color: var(--ink-3);
}

.team-public__cta { margin: 12px 0 24px; }
.team-public__apply {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.team-public__status {
  padding: 14px;
  border: 1px dashed var(--pitch-600);
  border-radius: 12px;
  text-align: center;
  font-size: 13px;
  color: var(--ink-2);
  margin-bottom: 8px;
}
.team-public__section-title {
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 800;
  color: var(--ink-3);
  text-transform: uppercase;
  margin: 18px 0 8px;
}
.team-public__recent .match-list { padding: 0; list-style: none; margin: 0; }

/* ── Join applications admin page (Phase 2a) ─────────────── */
.apps-section { padding: 4px 16px 16px; }
.apps-section--muted { opacity: 0.7; }
.apps-section__title {
  margin: 12px 0 8px;
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 800;
  color: var(--ink-3);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  gap: 6px;
}
.apps-section__empty {
  padding: 18px 14px;
  border: 1px dashed var(--pitch-700);
  border-radius: 12px;
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
}
.apps-list { list-style: none; margin: 0; padding: 0; }
.app-row {
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--pitch-900);
}
.app-row__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.app-row__name {
  font-size: 15px;
  font-weight: 800;
  color: var(--ink-1);
  letter-spacing: -0.2px;
}
.app-row__meta {
  font-size: 12px;
  color: var(--ink-3);
}
.app-row__status {
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 700;
  letter-spacing: 0.5px;
}
.app-row__msg {
  margin: 8px 0 0;
  padding: 8px 10px;
  background: var(--pitch-800);
  border-radius: 8px;
  font-size: 13px;
  color: var(--ink-1);
  line-height: 1.4;
}
.app-row__time {
  margin-top: 6px;
  font-size: 11px;
  color: var(--ink-3);
}
.app-row__actions {
  margin-top: 10px;
  display: flex;
  gap: 8px;
}
.app-row__actions > form { flex: 1; display: flex; }
.app-row__btn {
  width: 100%;
  height: 38px;
  padding: 0 14px;
  font-size: 13px;
  border-radius: 10px;
}
.app-row--rejected, .app-row--withdrawn {
  opacity: 0.6;
}

/* ── Mercenary card (discover) ──────────────────────────── */
.discover-card--match .discover-card__head { align-items: center; }
.discover-card--match .merc-card__date { align-self: stretch; }
.discover-card--match .discover-card__head .chip { flex-shrink: 0; }
.merc-card__date {
  flex-shrink: 0;
  width: 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: var(--pitch-800);
  border-radius: 10px;
  padding: 6px 0;
}
.merc-card__day {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 900;
  line-height: 1;
  color: var(--ink-1);
}
.merc-card__month {
  margin-top: 2px;
  font-size: 10px;
  color: var(--ink-3);
  letter-spacing: 0.3px;
}
.merc-card__vs {
  margin-left: 4px;
  font-size: 13px;
  color: var(--ink-3);
  font-weight: 600;
}

/* ── Mercenary apply (외부 사용자 매치 상세) ──────────────── */
.merc-apply {
  margin: 16px;
  padding: 16px;
  border: 1px solid var(--pitch-700);
  border-radius: 14px;
  background: var(--pitch-900);
}
.merc-apply__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}
.merc-apply__label {
  font-family: var(--font-display);
  font-size: 12px;
  letter-spacing: 1.5px;
  font-weight: 800;
  color: var(--ink-3);
  text-transform: uppercase;
}
.merc-apply__count {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 900;
  color: var(--ink-1);
}
.merc-apply__blurb {
  margin: 0 0 12px;
  padding: 10px 12px;
  background: var(--pitch-800);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink-1);
}
.merc-apply__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

/* ── Mercenary section (멤버 시각, 매치 상세) ────────────── */
.merc-section {
  margin: 18px 16px 0;
  padding: 14px;
  border: 1px solid var(--pitch-700);
  border-radius: 14px;
  background: var(--pitch-900);
}
.merc-section__head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.merc-section__label {
  flex-shrink: 0;
  font-family: var(--font-display);
  font-size: 11px;
  letter-spacing: 1.5px;
  font-weight: 800;
  color: var(--ink-3);
  text-transform: uppercase;
}
.merc-section__count {
  flex: 1;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  color: var(--ink-1);
}
.merc-section__list {
  list-style: none;
  margin: 10px 0 0;
  padding: 0;
}
.merc-row {
  display: flex;
  gap: 8px;
  align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed var(--pitch-800);
}
.merc-row:last-child { border-bottom: none; }
.merc-row__name {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-1);
}
.merc-row__side, .merc-row__pos {
  font-size: 11px;
  color: var(--ink-3);
}
.merc-section__empty {
  margin-top: 8px;
  padding: 12px;
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
  border: 1px dashed var(--pitch-700);
  border-radius: 10px;
}

.app-row--accepted .app-row__name { color: var(--ink-1); }
.app-row__accept-form {
  flex: 1;
  display: flex;
  gap: 6px;
}
.app-row__accept-form .field__select { flex-shrink: 0; min-width: 80px; }
.app-row__accept-form .btn { flex: 1; }

/* ── Community (Phase 3a) ─────────────────────────────── */
.post-list { list-style: none; margin: 0; padding: 0 16px 24px; }
.post-row { border-bottom: 1px solid var(--pitch-800); }
.post-row:last-child { border-bottom: none; }
.post-row__link {
  display: block;
  padding: 14px 4px;
  color: inherit;
  text-decoration: none;
}
.post-row__head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}
.post-row__board {
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 1px;
  color: var(--ink-3);
  text-transform: uppercase;
}
.post-row__time {
  font-size: 11px;
  color: var(--ink-3);
}
.post-row__title {
  margin: 0 0 4px;
  font-size: 15px;
  font-weight: 800;
  color: var(--ink-1);
  letter-spacing: -0.2px;
  line-height: 1.3;
}
.post-row__meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--ink-3);
}
.post-row__stats { font-size: 12px; }

.post-show {
  padding: 0 16px 16px;
  border-bottom: 1px solid var(--pitch-800);
}
.post-show__title {
  margin: 12px 0 6px;
  font-size: 22px;
  font-weight: 900;
  letter-spacing: -0.5px;
  line-height: 1.25;
  color: var(--ink-1);
}
.post-show__meta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: var(--ink-3);
  margin-bottom: 16px;
}
.post-show__body {
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-1);
}
.post-show__body p { margin: 0 0 10px; }
.post-show__actions {
  margin-top: 16px;
  display: flex;
  gap: 8px;
}
.post-show__actions .btn { flex: 1; padding: 10px 14px; font-size: 13px; }
.post-show__like {
  margin-top: 16px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.post-show__like-count {
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 800;
}
.post-show__tags {
  margin-top: 14px;
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.post-show__images {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 6px;
  margin: 12px 0 16px;
}
.post-show__image {
  width: 100%;
  height: 200px;
  object-fit: cover;
  border-radius: 10px;
  cursor: zoom-in;
}
.post-form__attached {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 8px;
  align-items: center;
}
.post-form__thumb {
  width: 60px;
  height: 60px;
  object-fit: cover;
  border-radius: 8px;
}

/* Profile edit avatar */
/* profile-edit form 컨테이너 — team-settings 와 동일 layout (padding/gap). */
.profile-edit {
  padding: 16px 16px 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 생년월일 — date_select 3 칸 (년/월/일). 일반 select 보다 살짝 컴팩트. */
.date-select {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 8px;
}
.date-select > select {
  min-width: 0;
  height: 40px;
  font-size: 13px;
  padding-right: 30px;
  background-position:
    calc(100% - 12px) 52%,
    calc(100% - 8px) 52%;
}

/* 선호 포지션 다중 선택 — 종목별 아코디언 + 전술판 피치 위 슬롯 */
.position-accordion {
  border: 1px solid var(--pitch-600);
  border-radius: 10px;
  background: var(--pitch-850);
  overflow: hidden;
}
.position-accordion + .position-accordion { margin-top: 8px; }
.position-accordion__summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  font-size: 13px;
  font-weight: 700;
  color: var(--ink-1);
}
.position-accordion__summary::-webkit-details-marker { display: none; }
.position-accordion__sport { font-weight: 800; }
.position-accordion__count {
  flex: 1;
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
}
.position-accordion[open] .position-accordion__summary { border-bottom: 1px solid var(--pitch-700); }

/* 기존 전술판 (.pitch) 동일 톤 + SVG 라인 (하프라인·박스·중앙원) 재사용. */
.position-pitch {
  position: relative;
  width: 100%;
  max-width: 320px;
  margin: 14px auto;
  aspect-ratio: 350 / 500;
  background: var(--pitch-850);
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
  overflow: hidden;
}
.position-pitch .pitch__svg { width: 100%; height: 100%; display: block; }
.position-pitch__slots { position: absolute; inset: 6% 2% 8% 2%; }
.position-pitch__slot {
  position: absolute;
  transform: translate(-50%, -50%);
  width: 36px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 6px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-600);
  font-size: 10px;
  font-weight: 800;
  color: var(--ink-1);
  cursor: pointer;
  user-select: none;
}
.position-pitch__slot input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.position-pitch__label { line-height: 1; }
.position-pitch__slot:has(input:checked) {
  background: var(--ink-0);
  color: var(--pitch-900);
  border-color: var(--ink-0);
}

/* 개인 모드 dashboard (home/_solo_dashboard) — 활성팀 nil + 멤버십 N. */
.solo-dashboard {
  padding: 14px 16px 100px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.solo-dashboard__hero {
  padding: 16px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
}
.solo-dashboard__title {
  margin: 0 0 6px;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.4px;
  color: var(--ink-1);
}
.solo-dashboard__lede {
  margin: 0;
  font-size: 12px;
  color: var(--ink-3);
  line-height: 1.5;
}
.solo-dashboard__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.solo-dashboard__tile {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 14px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
  color: var(--ink-1);
  text-decoration: none;
  min-height: 88px;
}
.solo-dashboard__tile-label {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.3px;
  margin-top: 6px;
}
.solo-dashboard__tile-sub {
  font-size: 11px;
  color: var(--ink-3);
}
.solo-dashboard__teams {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.solo-dashboard__section-title {
  margin: 4px 4px 0;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ink-2);
}
.solo-dashboard__teams-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.solo-dashboard__teams-list li form { margin: 0; }
.solo-dashboard__team {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--ink-1);
}
.solo-dashboard__team-logo {
  width: 32px;
  height: 32px;
  background: var(--ink-0);
  color: var(--pitch-900);
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-size: 14px;
  font-weight: 900;
  flex-shrink: 0;
}
.solo-dashboard__team-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.solo-dashboard__team-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.3px;
}
.solo-dashboard__team-role {
  font-size: 11px;
  color: var(--ink-3);
}
.solo-dashboard__team-arrow {
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-2);
  flex-shrink: 0;
}

/* 솔로 프로필 페이지 — 시즌카드 없는 사용자 (멤버십 0 또는 솔로 모드) */
.solo-profile {
  padding: 16px 16px 100px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.solo-profile__head {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 16px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
}
.solo-profile__avatar {
  width: 64px;
  height: 64px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--pitch-800);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.solo-profile__avatar-img { width: 100%; height: 100%; object-fit: cover; }
.solo-profile__avatar-fallback {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 900;
  color: var(--ink-1);
}
.solo-profile__id { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.solo-profile__meta { font-size: 13px; color: var(--ink-2); }
.solo-profile__personal,
.solo-profile__bio {
  margin: 0;
  padding: 12px 14px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-1);
}
.solo-profile__positions {
  padding: 12px 14px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.solo-profile__positions-label {
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.solo-profile__positions-list { display: flex; flex-wrap: wrap; gap: 6px; }
.solo-profile__teams { display: flex; flex-direction: column; gap: 8px; }
.solo-profile__teams-title {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -0.2px;
  color: var(--ink-2);
  margin: 6px 4px 0;
}
.solo-profile__teams-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.solo-profile__teams-list li form { margin: 0; }
.solo-profile__team {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  color: var(--ink-1);
}
.solo-profile__team-logo {
  width: 28px; height: 28px;
  background: var(--ink-0);
  color: var(--pitch-900);
  border-radius: 6px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 13px;
  font-weight: 900;
  flex-shrink: 0;
}
.solo-profile__team-name { flex: 1; font-size: 13px; font-weight: 700; }
.solo-profile__team-arrow { color: var(--ink-3); }
.solo-profile__cta {
  padding: 16px;
  background: var(--pitch-900);
  border: 1px dashed var(--pitch-600);
  border-radius: 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.solo-profile__cta-hint { margin: 0; font-size: 13px; color: var(--ink-3); }

.profile-edit__avatar-row {
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.profile-edit__avatar-preview {
  position: relative;
  flex-shrink: 0;
  width: 96px;
  height: 96px;
  border-radius: 16px;
  background: var(--pitch-800);
  display: grid;
  place-items: center;
  overflow: hidden;
  cursor: pointer;
  border: 1px dashed var(--pitch-600);
}
.profile-edit__avatar-preview:hover { background: var(--pitch-700); }
.profile-edit__avatar-camera {
  position: absolute;
  right: -2px;
  bottom: -2px;
  width: 26px;
  height: 26px;
  background: var(--ink-0);
  color: var(--pitch-900);
  border-radius: 13px;
  display: grid;
  place-items: center;
  border: 2px solid var(--pitch-900);
}
.profile-edit__avatar-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.profile-edit__avatar-fallback {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 900;
  color: var(--ink-1);
}
.profile-edit__avatar-toggle,
.profile-edit__inline-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--ink-2);
  cursor: pointer;
}
.profile-edit__inline-toggle { margin-top: 6px; }
.profile-edit__file-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* Report form (post show) */
.post-show__report {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--pitch-800);
  font-size: 12px;
  color: var(--ink-3);
}
.post-show__report summary {
  cursor: pointer;
  list-style: none;
}
.post-show__report-form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

/* Markdown rendered body */
.markdown h1, .markdown h2, .markdown h3 {
  margin: 18px 0 8px;
  font-weight: 800;
  letter-spacing: -0.3px;
}
.markdown h1 { font-size: 20px; }
.markdown h2 { font-size: 17px; }
.markdown h3 { font-size: 15px; }
.markdown p { margin: 0 0 12px; }
.markdown ul, .markdown ol { margin: 0 0 12px 18px; padding: 0; }
.markdown li { margin-bottom: 4px; }
.markdown code {
  background: var(--pitch-800);
  padding: 1px 5px;
  border-radius: 4px;
  font-family: var(--font-mono, monospace);
  font-size: 13px;
}
.markdown pre {
  background: var(--pitch-800);
  padding: 12px;
  border-radius: 8px;
  overflow-x: auto;
  margin: 12px 0;
}
.markdown pre code { background: transparent; padding: 0; }
.markdown blockquote {
  margin: 12px 0;
  padding: 8px 12px;
  border-left: 3px solid var(--pitch-600);
  color: var(--ink-2);
  font-style: italic;
}
.markdown a { color: var(--ink-1); text-decoration: underline; }
.markdown hr { border: none; border-top: 1px solid var(--pitch-700); margin: 14px 0; }

.post-form { padding: 0 16px 24px; display: flex; flex-direction: column; gap: 12px; }

/* Comments */
.comments { padding: 16px; }
.comments__title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.5px;
  color: var(--ink-3);
  text-transform: uppercase;
  margin: 0 0 12px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.comments__empty {
  padding: 18px;
  text-align: center;
  font-size: 12px;
  color: var(--ink-3);
  border: 1px dashed var(--pitch-700);
  border-radius: 12px;
  margin-bottom: 16px;
}
.comments__signin {
  margin: 12px 0;
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
}
.comment-list { list-style: none; margin: 0 0 14px; padding: 0; }
.comment-list--replies {
  margin: 8px 0 0 18px;
  padding-left: 12px;
  border-left: 2px solid var(--pitch-800);
}
.comment {
  padding: 10px 0;
  border-bottom: 1px dashed var(--pitch-800);
}
.comment:last-child { border-bottom: none; }
.comment--reply { border-bottom: none; padding: 8px 0; }
.comment__head {
  display: flex;
  justify-content: space-between;
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 4px;
}
.comment__author { color: var(--ink-1); font-weight: 700; font-size: 13px; }
.comment__body {
  margin: 0;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-1);
}
.comment__delete {
  margin-top: 4px;
  background: transparent;
  border: none;
  color: var(--ink-3);
  font-size: 11px;
  padding: 0;
  cursor: pointer;
}
.comments__form {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 16px;
}

/* ── Empty state hint ─────────────────────────────────────── */
.empty-state__hint {
  margin: 12px 16px 0;
  padding: 12px 14px;
  border-top: 1px solid var(--pitch-800);
  font-size: 12px;
  color: var(--ink-3);
  text-align: center;
}
.empty-state__hint a {
  color: var(--ink-1);
  font-weight: 700;
  text-decoration: underline;
}

/* ── 구독 (subscription) ─────────────────────────────────── */
.sub { padding: 0 16px 24px; }
.sub-status {
  margin: 4px 0 14px;
  padding: 18px 16px;
  border-radius: 14px;
  background: var(--ink-0);
  color: var(--pitch-900);
}
.sub-status--past_due, .sub-status--canceled { background: var(--ink-0); }
.sub-status__badge {
  display: inline-block;
  font-size: 11px; font-weight: 800; letter-spacing: 0.06em;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(255,255,255,0.16); color: var(--pitch-900);
  margin-bottom: 10px;
}
.sub-status__badge--warn { background: var(--pitch-900); color: var(--ink-0); }
.sub-status__headline {
  font-family: var(--font-display);
  font-size: 26px; line-height: 1.1; margin-bottom: 6px;
}
.sub-status__note { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.75); }

.sub-plan {
  margin: 0 0 14px; padding: 16px 16px 14px;
  background: var(--pitch-900);
  border: 1px solid var(--pitch-700);
  border-radius: 12px;
}
.sub-plan__name { font-size: 13px; font-weight: 700; color: var(--ink-3); }
.sub-plan__price { font-family: var(--font-display); font-size: 34px; line-height: 1.1; margin: 2px 0 12px; }
.sub-plan__price strong { font-weight: 400; }
.sub-plan__price span { font-family: var(--font-ui); font-size: 15px; font-weight: 700; color: var(--ink-3); }
.sub-plan__perks { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.sub-plan__perks li {
  position: relative; padding-left: 20px;
  font-size: 14px; color: var(--ink-1);
}
.sub-plan__perks li::before {
  content: "✓"; position: absolute; left: 0; font-weight: 800; color: var(--ink-0);
}

.sub-card-info {
  margin: 0 0 14px; padding: 14px 16px;
  background: var(--pitch-800); border-radius: 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.sub-card-info__label { font-size: 13px; color: var(--ink-3); }
.sub-card-info__value { font-size: 14px; font-weight: 700; color: var(--ink-1); }

.sub-actions { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }
.sub-actions__hint { font-size: 12px; color: var(--ink-3); text-align: center; margin-top: 2px; }