/* poketeam 디자인 토큰 (current)
   색·글꼴·간격 값만 유효. 화면 구성·배치는 screens/*.html이 정본.
   색 규칙: action=누를 것, urgent=시간·준비 중, danger=해산만. */

@import url("https://fonts.googleapis.com/css2?family=Black+Han+Sans&family=Gothic+A1:wght@400;500;700;800&family=Chakra+Petch:wght@600;700&display=swap");

:root {
  color-scheme: dark;

  /* ── 배경·면 ───────────────────────── */
  --color-bg: #0B1020;          /* 페이지 배경 */
  --color-surface: #151C33;     /* 카드·시트·하단 독·입력·주최자 카드·내 행 */
  --color-surface-2: #1E2742;   /* 구분선·비활성 버튼·스테퍼 버튼·결과 버튼 */
  --color-line: #2C3656;        /* 입력/보조 버튼 테두리·말풍선·시트 핸들 */
  --color-scrim: rgba(5, 8, 18, 0.72);

  /* ── 글자 ─────────────────────────── */
  --color-text: #F2F4FA;
  --color-text-2: #A7B0C8;      /* 보조 (surface 위 7.8:1) */
  --color-text-3: #7F89A6;      /* 메타·캡션 (bg 5.4:1, surface 4.8:1) */
  --color-text-disabled: #4A5578;

  /* ── 의미 색 ──────────────────────── */
  --color-action: #3DD5F3;      /* 주 버튼·체크·링크·선택 */
  --color-on-action: #06212A;   /* 9.5:1 */
  --color-urgent: #FFB547;      /* 타이머 숫자·"준비 중"·패스 세이브 아이콘 */
  --color-urgent-bg: #3A2A12;   /* "준비 중" 태그 배경 */
  --color-danger: #D1363C;      /* "해산하기" 버튼 (흰 글자 4.9:1) */
  --color-danger-text: #FF8A80; /* "파티 해산" 텍스트 버튼 */
  --color-kakao: #FEE500;
  --color-on-kakao: #191600;

  /* ── 팀 점 (트레이너 앞 점 = 팀) ───── */
  --color-team-blue: #4C8DF6;
  --color-team-red: #F0524F;
  --color-team-yellow: #F5C542;
  --color-team-none: #7F89A6;
  --color-seat-empty: #4A5578;

  /* ── 글꼴 ─────────────────────────── */
  --font-display: "Black Han Sans", "Gothic A1", sans-serif;  /* 화면당 하나 */
  --font-number: "Chakra Petch", "Gothic A1", monospace;      /* 숫자만 */
  --font-body: "Gothic A1", "Apple SD Gothic Neo", sans-serif;

  --text-display: 400 28px/1.25 var(--font-display);  /* 결과·종료 헤드라인 (v1 32 → 28) */
  --text-title: 400 26px/1.2 var(--font-display);     /* 레이드명 (v1 28 → 26) */
  --text-forced: 400 32px/1.2 var(--font-display);    /* 강제 펼침 독 제목 (P3·P5) */
  --text-sheet: 400 24px/1.25 var(--font-display);
  --text-logo: 400 20px/1 var(--font-display);
  --text-section: 800 15px/1.4 var(--font-body);
  --text-body: 400 15px/1.5 var(--font-body);
  --text-sub: 400 13px/1.6 var(--font-body);
  --text-meta: 400 12px/1.5 var(--font-body);
  --text-legal: 400 11px/1.4 var(--font-body);
  --text-code: 700 30px/1.2 var(--font-number);
  --text-timer: 700 20px/1 var(--font-number);        /* 독 타이머 */
  --text-timer-lg: 700 30px/1 var(--font-number);     /* 강제 펼침 타이머 */

  /* ── 뷰포트·레이아웃 ───────────── */
  --topbar-h: 48px;
  --page-gutter: 24px;
  --gap-group: 28px;            /* 폼 섹션 사이 */
  --gap-block: 16px;            /* 헤더 → 카드 → 리스트 */
  --gap-label: 8px;             /* 라벨 → 입력 */
  --dock-pad-top: 14px;
  --dock-pad-bottom: 12px;      /* + env(safe-area-inset-bottom) */
  --dock-gap: 12px;
  --dock-h: 128px;              /* 기본값. app.js가 실제 독 높이로 덮어씀 → 본문 아래 여백 */

  /* ── 간격·모서리·크기 ─────────────── */
  --space-1: 4px;  --space-2: 8px;  --space-3: 12px; --space-4: 16px;
  --space-5: 20px; --space-6: 24px; --space-7: 28px; --space-8: 32px;

  --radius-sm: 10px;
  --radius-chip: 12px;
  --radius-input: 14px;
  --radius-btn: 16px;
  --radius-card: 16px;
  --radius-sheet: 24px;

  --size-btn: 52px;             /* 독·폼 주 버튼 (v1 56 → 52) */
  --size-btn-forced: 56px;      /* 강제 펼침 독 주 버튼 */
  --size-chip: 44px;
  --size-touch: 44px;
  --size-row: 48px;             /* 리스트 1열 (5명 이하) */
  --size-row-compact: 44px;     /* 리스트 2열 (6명 이상) */
  --size-dot: 10px;
  --size-dot-compact: 8px;
  --size-seat: 28px;
  --size-seat-compact: 22px;

  --shadow-dock: 0 -8px 24px rgba(0, 0, 0, 0.35);
  --shadow-pop: 0 12px 32px rgba(0, 0, 0, 0.45);
}