/* SPOMOTIVE 공통 UI (2026-11-02, 0단계) — 색·글자·간격·모서리·그림자·층 토큰 + 공통 부품 규격.
   설계 근거: 저장소 SITE-UIUX-OVERHAUL-20261102.md 2장. 값은 상단바 v4 · 첫 페이지 개편 · 내 신청 v2 에서 가져왔다.
   - 모든 페이지 CSS 맨 뒤에 불러온다(index · court · shop · product-families).
   - 토큰은 --sp-* 이름만 쓴다. 기존 --ink · --muted 등은 건드리지 않는다(화면별로 옮길 때 바꾼다).
   - 부품은 .sp-* 새 클래스로만 그린다. 기존 .btn 등은 2단계에서 화면 하나씩 옮긴다.
   - 노랑(--sp-brand)은 글자색으로 쓰지 않는다(흰 바탕 대비 1.45:1). 바탕색으로만, 글자는 --sp-ink. */

:root {
  /* 글자·바탕 */
  --sp-ink: #0d1217;
  --sp-text: #0d1217;
  --sp-text-2: #38424c;
  --sp-text-3: #5f6970;           /* 흰 바탕 5.6:1 · 종이 바탕 5.0:1 — 이보다 옅은 글자색은 쓰지 않는다 */
  --sp-text-disabled: #89929a;    /* 비활성 표시 전용(읽어야 하는 글자에 쓰지 않음) */
  --sp-text-on-dark: #ffffff;
  --sp-text-on-dark-2: rgba(255, 255, 255, .72);
  --sp-page: #f3f2ed;             /* 단색 바탕(카드 밖 면). 공개 화면 큰 바탕의 그라데이션은 각 화면 것을 그대로 둔다 */
  --sp-surface: #ffffff;
  --sp-surface-2: #f8faf7;
  --sp-dark: #10171e;
  --sp-dark-2: #121b23;
  --sp-line: #e1e5e0;
  --sp-line-strong: #cfd6cf;       /* 장식 선 전용(흰 바탕 1.5:1) */
  --sp-line-control: #7b8990;      /* 입력창·보조 버튼 테두리(흰 바탕 3.6:1 — 경계는 3:1 이상) */
  --sp-line-on-dark: rgba(255, 255, 255, .14);

  /* 브랜드 */
  --sp-brand: #ffd21e;
  --sp-brand-hover: #ffdc4d;
  --sp-brand-ink: #0d1217;
  --sp-brand-soft: #fff4cf;
  --sp-link: #1467d6;

  /* 상태 (글자색 / 바탕색) — 모두 4.5:1 이상 */
  --sp-ok: #12704a;      --sp-ok-bg: #e2f0e7;
  --sp-wait: #36536f;    --sp-wait-bg: #e6ecf2;
  --sp-todo: #8a6400;    --sp-todo-bg: #fff4cf;
  --sp-danger: #a8322a;  --sp-danger-bg: #f7e7e4;
  --sp-neutral: #4a535b; --sp-neutral-bg: #e9ece8;

  /* 키보드 포커스 */
  --sp-focus: #1467d6;            /* 첫 페이지·내 신청과 같은 파란 3px 윤곽 */
  --sp-focus-on-dark: #ffd21e;

  /* 글자 크기 (모바일 본문 16, 보조 13.5, 최소 12) */
  --sp-font: Inter, Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --sp-fs-caption: 12px;          /* 배지·법적 고지 — 이보다 작게 쓰지 않음 */
  --sp-fs-meta: 13.5px;           /* 날짜·장소·도움말 */
  --sp-fs-small: 14.5px;          /* 작은 버튼·라벨 */
  --sp-fs-body-sm: 15px;
  --sp-fs-body: 16px;             /* 본문·휴대폰 입력창 */
  --sp-fs-title-sm: 18px;         /* 카드 제목 */
  --sp-fs-title: 20px;
  --sp-fs-h2: 24px;
  --sp-fs-h1: 28px;
  --sp-fs-display: 36px;
  --sp-fw-regular: 400;
  --sp-fw-medium: 600;
  --sp-fw-bold: 700;              /* 900·950 은 새로 쓰지 않음 */
  --sp-lh-tight: 1.15;
  --sp-lh: 1.5;

  /* 간격 (4의 배수) */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --sp-10: 40px;
  --sp-gutter: 8px;               /* 휴대폰 좌우 여백 8px 유지(11-01 결정) */
  --sp-gutter-wide: clamp(16px, 3.6vw, 40px);
  --sp-page-width: 1264px;

  /* 모서리 */
  --sp-r-sm: 10px;
  --sp-r-md: 12px;
  --sp-r-lg: 18px;
  --sp-r-xl: 24px;
  --sp-r-pill: 999px;

  /* 그림자 */
  --sp-shadow-0: 0 0 0 1px rgba(13, 18, 23, .06);
  --sp-shadow-1: 0 10px 30px rgba(17, 26, 34, .07);
  --sp-shadow-2: 0 24px 60px rgba(10, 18, 25, .12);
  --sp-shadow-overlay: 0 -12px 40px rgba(8, 13, 18, .18);   /* 아래에서 올라오는 시트 */

  /* 높이 */
  --sp-ctl-lg: 52px;
  --sp-ctl: 48px;
  --sp-ctl-sm: 40px;
  --sp-touch: 44px;

  /* 층 (z-index) — 새 고정 요소는 이 이름만 쓴다. 지금 화면들의 실제 순서(상단바 90 · 문의 110 · 모달 120~ · 시트 210)에 맞춤 */
  --sp-z-sticky: 40;
  --sp-z-header: 90;
  --sp-z-float: 110;      /* 1:1 문의 캐릭터 */
  --sp-z-modal: 180;      /* 가운데 창·아래 시트 공통 */
  --sp-z-modal-2: 210;    /* 창 위에 한 겹 더 여는 시트(참가자 명단 등) */
  --sp-z-toast: 230;

  /* 움직임 */
  --sp-fast: 120ms;
  --sp-base: 180ms;
  --sp-slow: 260ms;
  --sp-ease: cubic-bezier(.2, .7, .2, 1);
}

/* ───────────── 공통 부품 (새 클래스) ───────────── */

/* 부품 안 크기 계산은 테두리 포함(페이지마다 기본값이 달라도 같은 크기) */
:where(.sp-btn, .sp-badge, .sp-card, .sp-input, .sp-select, .sp-textarea, .sp-tabs, .sp-tab, .sp-sheet, .sp-sheet *, .sp-close, .sp-empty, .sp-alert, .sp-toast, .sp-skeleton) { box-sizing: border-box; }

/* 버튼 4종: 주요(검정) · 강조(노랑, 화면에 하나 — 결제·신청·로그인처럼 '지금 할 일') · 보조 · 글자 링크 + 위험 */
.sp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--sp-ctl);
  padding: 0 18px;
  border: 1px solid transparent;
  border-radius: var(--sp-r-md);
  background: var(--sp-ink);
  color: #fff;
  font: var(--sp-fw-medium) var(--sp-fs-body)/1.2 var(--sp-font);
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--sp-fast) var(--sp-ease), border-color var(--sp-fast) var(--sp-ease), color var(--sp-fast) var(--sp-ease);
}
.sp-btn:hover:not(:disabled):not([aria-disabled="true"]) { background: #24303a; }
.sp-btn--brand { background: var(--sp-brand); color: var(--sp-brand-ink); }
.sp-btn--brand:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--sp-brand-hover); }
.sp-btn--secondary { background: var(--sp-surface); color: var(--sp-ink); border-color: var(--sp-line-control); }
.sp-btn--secondary:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--sp-surface-2); border-color: var(--sp-ink); }
.sp-btn--quiet { background: var(--sp-neutral-bg); color: var(--sp-ink); }
.sp-btn--quiet:hover:not(:disabled):not([aria-disabled="true"]) { background: #dfe3de; }
.sp-btn--danger { background: var(--sp-surface); color: var(--sp-danger); border-color: currentColor; }
.sp-btn--danger:hover:not(:disabled):not([aria-disabled="true"]) { background: var(--sp-danger-bg); }
.sp-btn--link { min-height: var(--sp-touch); padding: 0 4px; background: transparent; color: var(--sp-link); text-decoration: underline; text-underline-offset: 3px; }
.sp-btn--link:hover:not(:disabled) { background: transparent; color: #0d4fa8; }
.sp-btn--sm { min-height: var(--sp-ctl-sm); padding: 0 14px; border-radius: var(--sp-r-sm); font-size: var(--sp-fs-small); }
.sp-btn--lg { min-height: var(--sp-ctl-lg); padding: 0 22px; font-size: var(--sp-fs-title-sm); }
.sp-btn--block { display: flex; width: 100%; }
.sp-btn:disabled,
.sp-btn[aria-disabled="true"] { background: var(--sp-neutral-bg); color: var(--sp-text-disabled); border-color: transparent; cursor: not-allowed; }

/* 상태 배지 5색 + 모양(색만으로 구분하지 않기): ● 끝남·정상 / ▲ 내가 할 일·곧 확인 / ◆ 바로 봐야 함 / ■ 진행 중·기다림 / 회색 참고·취소 */
.sp-badge {
  display: inline-flex;
  justify-self: start;
  align-self: start;
  align-items: center;
  gap: 5px;
  min-height: 24px;
  padding: 2px 9px;
  border-radius: var(--sp-r-pill);
  background: var(--sp-neutral-bg);
  color: var(--sp-neutral);
  font: var(--sp-fw-bold) var(--sp-fs-meta)/1.2 var(--sp-font);
  white-space: nowrap;
}
.sp-badge::before { font-size: .72em; line-height: 1; }
.sp-badge--ok { background: var(--sp-ok-bg); color: var(--sp-ok); }
.sp-badge--ok::before { content: "●"; }
.sp-badge--todo { background: var(--sp-todo-bg); color: var(--sp-todo); }
.sp-badge--todo::before { content: "▲"; }
.sp-badge--danger { background: var(--sp-danger-bg); color: var(--sp-danger); }
.sp-badge--danger::before { content: "◆"; }
.sp-badge--wait { background: var(--sp-wait-bg); color: var(--sp-wait); }
.sp-badge--wait::before { content: "■"; }

/* 카드: 제목 → 속성 → 가격·상태 → 버튼 순서 */
.sp-card {
  display: grid;
  gap: var(--sp-3);
  padding: var(--sp-4);
  border-radius: var(--sp-r-lg);
  background: var(--sp-surface);
  box-shadow: var(--sp-shadow-0);
  color: var(--sp-text);
}
.sp-card--raised { box-shadow: var(--sp-shadow-0), var(--sp-shadow-1); }
.sp-card--dark { background: var(--sp-dark); color: var(--sp-text-on-dark); box-shadow: none; }
.sp-card__title { margin: 0; font-size: var(--sp-fs-title-sm); line-height: var(--sp-lh-tight); font-weight: 700; letter-spacing: -0.015em; }
.sp-card__meta { margin: 0; font-size: var(--sp-fs-meta); line-height: 1.45; color: var(--sp-text-3); }

/* 입력: 휴대폰 16px(확대 방지) · 높이 48 · 라벨은 위, 도움말·오류는 아래 */
.sp-field { display: grid; gap: 6px; }
.sp-label { font: var(--sp-fw-bold) var(--sp-fs-small)/1.3 var(--sp-font); color: var(--sp-text-2); }
.sp-input,
.sp-select,
.sp-textarea {
  width: 100%;
  min-height: var(--sp-ctl);
  padding: 0 14px;
  border: 1px solid var(--sp-line-control);
  border-radius: var(--sp-r-md);
  background: var(--sp-surface);
  color: var(--sp-text);
  font: var(--sp-fw-regular) var(--sp-fs-body)/1.4 var(--sp-font);
}
.sp-textarea { min-height: 112px; padding: 12px 14px; resize: vertical; }
.sp-input:hover,
.sp-select:hover,
.sp-textarea:hover { border-color: var(--sp-ink); }
.sp-input[aria-invalid="true"],
.sp-select[aria-invalid="true"],
.sp-textarea[aria-invalid="true"] { border-color: var(--sp-danger); }
.sp-help { margin: 0; font-size: var(--sp-fs-meta); color: var(--sp-text-3); }
.sp-error { margin: 0; font-size: var(--sp-fs-meta); font-weight: 600; color: var(--sp-danger); }

/* 탭(같은 화면 안 보기 전환) — 가로로 넘치면 탭 줄만 밀린다 */
.sp-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  overflow-x: auto;
  border-radius: var(--sp-r-pill);
  background: var(--sp-neutral-bg);
  scrollbar-width: none;
}
.sp-tabs::-webkit-scrollbar { display: none; }
.sp-tab {
  flex: 0 0 auto;
  min-height: var(--sp-touch);
  padding: 0 16px;
  border: 0;
  border-radius: var(--sp-r-pill);
  background: transparent;
  color: var(--sp-text-2);
  font: 600 15px/1 var(--sp-font);
  cursor: pointer;
}
.sp-tab[aria-selected="true"],
.sp-tab.is-active { background: var(--sp-surface); color: var(--sp-ink); box-shadow: 0 2px 8px rgba(13, 18, 23, .1); }

/* 시트·모달 골격: 머리(제목+닫기) / 본문(이 안에서만 스크롤) / 바닥(버튼 고정) */
.sp-backdrop { position: fixed; inset: 0; z-index: calc(var(--sp-z-modal) - 1); background: rgba(8, 13, 18, .52); }
.sp-sheet {
  position: fixed;
  z-index: var(--sp-z-modal);
  left: 50%;
  bottom: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  width: min(560px, 100%);
  max-height: min(88dvh, 860px);
  transform: translateX(-50%);
  border-radius: var(--sp-r-xl) var(--sp-r-xl) 0 0;
  background: var(--sp-surface);
  box-shadow: var(--sp-shadow-overlay);
}
@media (min-width: 721px) {
  .sp-sheet { top: 50%; bottom: auto; transform: translate(-50%, -50%); border-radius: var(--sp-r-xl); box-shadow: var(--sp-shadow-2); }
}
.sp-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 12px 12px 20px; border-bottom: 1px solid var(--sp-line); }
.sp-sheet__title { margin: 0; font-size: var(--sp-fs-title-sm); font-weight: 700; }
.sp-sheet__body { overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px; }
.sp-sheet__foot { display: flex; gap: 8px; padding: 12px 20px calc(12px + env(safe-area-inset-bottom)); border-top: 1px solid var(--sp-line); background: var(--sp-surface); }
.sp-sheet__foot > .sp-btn { flex: 1; }
.sp-close {
  display: inline-grid;
  place-items: center;
  width: var(--sp-touch);
  height: var(--sp-touch);
  border: 0;
  border-radius: var(--sp-r-pill);
  background: transparent;
  color: var(--sp-ink);
  font-size: 22px;
  cursor: pointer;
}
.sp-close:hover { background: var(--sp-neutral-bg); }

/* 빈 화면: 무엇이 없는지 + 다음 할 일 한 가지 */
.sp-empty { display: grid; justify-items: center; gap: 8px; padding: 32px 20px; text-align: center; color: var(--sp-text-2); }
.sp-empty__title { margin: 0; font-size: var(--sp-fs-body); font-weight: 700; color: var(--sp-ink); }
.sp-empty__text { margin: 0; font-size: var(--sp-fs-meta); color: var(--sp-text-3); }

/* 알림 상자: 정보 · 확인 필요 · 오류 — 오류는 '무엇이 안 됐는지 + 이미 된 것 + 다음 행동' */
.sp-alert { display: grid; gap: 4px; padding: 12px 14px; border-radius: var(--sp-r-md); background: var(--sp-wait-bg); color: var(--sp-wait); font-size: var(--sp-fs-body-sm); line-height: 1.5; }
.sp-alert--todo { background: var(--sp-todo-bg); color: #5c4300; }
.sp-alert--danger { background: var(--sp-danger-bg); color: var(--sp-danger); }
.sp-alert--ok { background: var(--sp-ok-bg); color: var(--sp-ok); }

/* 불러오는 중: 최종 모양과 같은 크기의 회색 틀 */
.sp-skeleton { display: block; border-radius: var(--sp-r-sm); background: linear-gradient(90deg, #e9ece8 0%, #f3f4f1 50%, #e9ece8 100%); background-size: 200% 100%; animation: sp-shimmer 1.2s linear infinite; }
@keyframes sp-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* 알림 토스트: 화면 아래 가운데, 4초, 스크린리더는 role="status" */
.sp-toast { position: fixed; z-index: var(--sp-z-toast); left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%); max-width: min(480px, calc(100vw - 24px)); padding: 12px 16px; border-radius: var(--sp-r-md); background: var(--sp-dark); color: #fff; font-size: var(--sp-fs-body-sm); box-shadow: var(--sp-shadow-2); }

/* 화면 읽기 프로그램에만 읽히는 글자 */
.sp-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 새 부품 공통 포커스 */
:where(.sp-btn, .sp-tab, .sp-close, .sp-input, .sp-select, .sp-textarea):focus-visible {
  outline: 3px solid var(--sp-focus);
  outline-offset: 2px;
}
:where(.sp-card--dark, .sp-toast) :focus-visible { outline-color: var(--sp-focus-on-dark); }

/* ═════════════ 1단계 공통 수정 (기존 화면에 바로 적용 — 동작은 그대로, 크기·색·겹침만) ═════════════ */

/* 기기에서 '동작 줄이기'를 켠 사람에게는 움직임을 끈다(자동 넘김·반짝임·슬라이드 포함). */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* 1:1 문의 캐릭터: 모양은 그대로 두고 크기만 줄여 제목·카드 버튼을 덜 가리게 한다(PC 170×156 → 120×110, 휴대폰 132×120 → 88×84).
   페이지 맨 아래 바닥글에는 캐릭터 높이만큼 여백을 더해 마지막 글자·버튼이 캐릭터 위로 올라오게 한다. */
.support-widget .support-toggle {
  width: 120px;
  height: 110px;
}
.support-widget .support-mascot {
  height: calc(100% - 22px);
}
.support-widget .support-callout {
  min-width: 70px;
  min-height: 30px;
  padding: 6px 11px;
  font-size: 12.5px;
}
body:has(#supportToggle) .site-footer {
  padding-bottom: calc(34px + 110px);
}
@media (max-width: 520px) {
  .support-widget .support-toggle {
    width: 88px;
    height: 84px;
    min-width: 0;
    min-height: 0;
  }
  .support-widget .support-mascot {
    height: calc(100% - 18px);
  }
  .support-widget .support-callout {
    min-width: 60px;
    min-height: 26px;
    padding: 4px 9px;
    font-size: 12px;
    border-radius: 14px;
  }
  body:has(#supportToggle) .site-footer {
    padding-bottom: calc(28px + 92px + env(safe-area-inset-bottom));
  }
}

/* 1:1 문의 캐릭터의 누름 영역을 '보이는 그림과 말풍선'으로만 줄인다.
   (전에는 투명한 네모 전체가 버튼이라 PC 프로그램 카드 '상세보기'를 95%까지 덮었다 — 11-02 점검 G1) */
.support-widget .support-toggle {
  pointer-events: none;
}
.support-widget .support-mascot,
.support-widget .support-callout {
  pointer-events: auto;
}
.support-widget .support-mascot {
  left: auto;
  right: 0;
  width: auto;
  max-width: 100%;
}

/* 회원정보: '계정 삭제'는 저장보다 눈에 띄지 않게 빨간 테두리 버튼으로(누르면 지금처럼 확인 창). */
#accountDeletionPanel {
  margin-bottom: 12px;
}
#accountDeletionPanel .btn {
  border: 1px solid #a9362d;
  background: #fff;
  color: #a9362d;
}

/* 코트 결제 완료: 화면 읽기용으로 제목에 옮긴 포커스가 손가락·마우스 사용자에게 네모로 보이지 않게. */
#payment-success-title:focus:not(:focus-visible) {
  outline: none;
}

/* 알림(토스트)은 잠깐 떠 있는 동안에도 뒤의 버튼을 누를 수 있게 한다(상단바·결제 버튼을 2.6초 막던 문제, A11Y-07). */
#toast {
  pointer-events: none;
}

/* 본문 바로가기(키보드 사용자가 상단 메뉴 10여 개를 건너뜀). 평소에는 숨고, Tab 으로 처음 닿으면 보인다. */
.sp-skip-link {
  position: fixed;
  z-index: var(--sp-z-toast);
  top: calc(8px + env(safe-area-inset-top));
  left: 8px;
  padding: 10px 14px;
  border-radius: var(--sp-r-sm);
  background: var(--sp-ink);
  color: #fff;
  font: var(--sp-fw-bold) var(--sp-fs-body-sm)/1.2 var(--sp-font);
  text-decoration: none;
  transform: translateY(-160%);
}
.sp-skip-link:focus { transform: none; outline: 3px solid var(--sp-focus-on-dark); outline-offset: 2px; }

/* 글자 대비 4.5:1 미만이던 곳(점검 A11Y-08~11) — 색만 진하게, 크기·배치는 그대로. */
.calendar-day-weekday {
  opacity: 1;
  color: var(--sp-text-3);
}
.public-session-day-track .session-fact-label {
  color: var(--sp-text-3);
}
.journey-step {
  color: var(--sp-text-3);
}
#requests {
  --ma-faint: #6b747c;
}