/* 스포츠매치매치 (드림즈 지정 스포츠클럽). 디자인 토큰 (v1.17.0)
 * ===========================================================================
 *
 * **회원 앱(app.css)과 소개 홈페이지(home.css)가 같이 읽는 단 하나의 파일이다.**
 * 색·글씨 크기·여백·누름 크기를 바꿀 일이 생기면 여기 한 줄만 고친다. 두 화면이
 * 따로 놀지 않게 하는 것이 이 파일의 존재 이유이므로, 아래 값을 app.css 나 home.css
 * 안에 다시 적어 두지 말 것(그 순간 두 화면이 갈라진다).
 *
 * ---------------------------------------------------------------------------
 * 어디서 왔나: 대한체육회(sports.or.kr / sportsclub.sports.or.kr)
 * ---------------------------------------------------------------------------
 *
 * 고객이 "sports.or.kr 을 좀 따라가 달라" 고 했다. 그 사이트에서 **가져온 것**은
 * 공공기관 문서처럼 읽히게 만드는 성질들이다:
 *
 *   - 숯색(charcoal)과 회색만 쓰는 절제된 팔레트. 장식용 그라데이션이 없다.
 *   - 흰 바탕에 아주 진한 글씨(그쪽은 #181E25). 형식적이고 대비가 높다.
 *   - 구역이 선으로 또박또박 갈린다. 카드가 떠다니지 않는다.
 *   - 소속·유관기관 로고가 맨 아래 띠에 모여 있다.
 *
 * **가져오지 않은 것**(이쪽이 더 중요하다). 그 사이트는 마우스로 쓰는 데스크톱
 * 정보 포털이고, 우리 사용자는 **폰을 든 시골 군 단위 클럽의 어르신**이다.
 * 둘이 부딪히면 언제나 사용자가 이긴다:
 *
 *   - 12px 글씨, 여러 칸짜리 표 → 쓰지 않는다. 본문 17px 아래로 내려가지 않는다.
 *   - 4~12px 짜리 누름 자리 → 쓰지 않는다. 누르는 것은 전부 48px 이상이다.
 *   - 2단·3단 메뉴 → 쓰지 않는다. 하단 탭 다섯 칸이 전부다.
 *   - 대비가 낮은 회색 짝 → 쓰지 않는다. 그 사이트 푸터의 아이콘은 #28303A 바탕에
 *     #28303A 로 칠해져 있다(**대비 1:1**, 사실상 안 보인다). 이 실수를 절대 따라
 *     하지 않는다. 그래서 아래 --bar-ink 는 숯색 바탕에서 9.87:1 이다.
 *
 * ---------------------------------------------------------------------------
 * 넘지 말아야 하는 선 (scripts/ui-gate.js 가 실제 화면에서 재서 막는다)
 * ---------------------------------------------------------------------------
 *
 *   본문 17px 이상, 어떤 글씨도 14px 미만 금지.
 *   누르는 것은 48x48 CSS px 이상.
 *   글씨 대비 4.5:1 이상(큰 글씨·의미 있는 그림 요소는 3:1 이상).
 *   360px 과 390px 에서 가로 스크롤 없음.
 *
 * 이 값들은 목표가 아니라 **바닥**이다. 참고한 사이트의 값이 이 바닥을 못 넘으면
 * 바닥이 이기고 참고 사이트가 진다. 아래 색 옆의 숫자는 전부 실측값이다.
 */

:root {
  /* ---------------------------------------------------------------- 바탕과 글씨
   * 초록기가 도는 회색(#f4f6f5 / #15201c)에서 **중립 숯색**으로 옮겼다.
   * 초록은 이제 "누르는 것" 에만 남는다. 바탕이 조용해야 초록이 동작으로 읽힌다. */
  --bg: #f2f3f5;
  --card: #ffffff;
  --card-2: #f7f8f9;

  --ink: #14181d;    /* 흰 바탕 대비 17.82:1 */
  --ink-2: #454b53;  /* 흰 바탕 대비  8.81:1 */
  --ink-3: #5c636c;  /* 흰 바탕 대비  6.08:1 · --bg 대비 5.47:1
                      * 예전 값 #8b9a93 은 **2.94:1** 로 본문 기준(4.5:1)을 크게 밑돌았다.
                      * 이 화면의 "작은 회색 글씨" 가 전부 그 색이었다. 되돌리지 말 것. */

  --line: #d5d9de;
  --line-2: #e7e9ec;

  /* ---------------------------------------------------------------- 숯색 띠
   * 상단 머리띠와 하단 기관 띠에 쓴다. sports.or.kr 푸터(#28303A)와 같은 계열이되
   * 흰 글씨가 15.61:1 이 되도록 한 단계 더 진하게 잡았다.
   * 머리띠를 초록에서 숯색으로 바꾼 것이 이번 변경에서 제일 큰 한 수다.
   * 초록 머리띠 + 초록 버튼이면 "지금 눌러야 할 것" 이 바탕에 묻힌다. */
  --bar: #1f242b;
  --bar-2: #2f3640;      /* 머리띠 안에 들어가는 버튼 바탕 */
  --bar-line: #3c444f;
  --bar-ink: #c9ced6;    /* 숯색 바탕 대비 9.87:1. 흐린 회색으로 낮추지 말 것 */

  /* ---------------------------------------------------------------- 동작 초록
   * 잔디 초록. 신청·저장·확인 **한 가지 뜻**으로만 쓴다.
   * 예전 #0d7a4f 는 흰 글씨 대비 5.37:1 이었다. 운동장 햇빛 아래 폰 화면을 기준으로
   * 7.61:1 까지 올렸다. 밝게 되돌리지 말 것. */
  --turf: #0a6040;       /* 위에 흰 글씨 7.61:1 */
  --turf-dark: #075437;  /* 흰 바탕에 글씨로 9.00:1 */
  --turf-bg: #e6f2ec;
  --turf-line: #b8d6c6;

  /* 경고 · 취소 */
  --warn: #a52f18;       /* 흰 바탕 6.95:1 · --warn-bg 위 6.15:1 */
  --warn-bg: #fdeee9;
  --warn-line: #eec6b8;

  /* 대기 · 보류 */
  --hold: #7a4f05;       /* 흰 바탕 7.12:1 · --hold-bg 위 6.47:1 */
  --hold-bg: #fdf3e0;
  --hold-line: #e8d3a8;

  /* 모의(dryrun) 표시. 보라. 절대 초록이나 회색으로 바꾸지 말 것.
     "진짜 나간 것" 과 구별되지 않으면 이 표시는 아무 의미가 없다. */
  --sim: #5b34a0;        /* 흰 바탕 8.59:1 */
  --sim-bg: #f1ecfb;
  --sim-line: #d5c7f0;

  /* ---------------------------------------------------------------- 종목색
   * 종목은 **글자를 읽기 전에 색으로 먼저** 구분된다. 색상(hue)은 예전 그대로 두고
   * 명도만 낮춰서 흰 바탕에서 전부 6.7:1 이상이 되게 했다. 예전 값 중 야구는
   * 연한 배지 바탕 위에서 4.44:1 로 본문 기준을 아슬하게 못 넘고 있었다.
   *
   * 필드파크골프(초록)와 스크린파크골프(남보라)는 목록에서 늘 나란히 붙어 나오는
   * 유일한 한 쌍이라 이 둘의 대비가 제일 중요하다. 초록의 다른 명도로 두지 말 것. */
  --sp-parkgolf: #23662a;    /* 6.99:1 */
  --sp-baseball: #96430f;    /* 6.76:1 */
  --sp-soccer: #17509b;      /* 7.90:1 */
  --sp-futsal: #166534;      /* 7.13:1 (v1.69.1: green, was magenta #7d2569) */
  --sp-badminton: #0b5d64;   /* 7.60:1 */
  --sp-screenpark: #413397;  /* 9.79:1 */

  /* 종목 배지의 연한 바탕. 위 글자색이 전부 4.5:1 을 넘는 값으로 골랐다. */
  --sp-parkgolf-bg: #e9f1e9;
  --sp-baseball-bg: #f8ece4;
  --sp-soccer-bg: #e8eefa;
  --sp-futsal-bg: #ecf8f0;
  --sp-badminton-bg: #e4f0f1;
  --sp-screenpark-bg: #ebe9f8;

  /* ---------------------------------------------------------------- 종목 구분색 (v1.69.0)
   * 대표님이 정한 네 색: 파크골프 보라, 야구 파랑, 축구 빨강, 풋살 초록. 그 밖은 클럽 초록.
   * v1.69.1 (2026-09-25) 대표님 「풋살도 초록색」: 풋살을 분홍에서 밝은 초록으로 바꿨다.
   * 풋살 초록(#16a34a)은 클럽 초록(--turf #0a6040, 그 밖 종목)보다 한참 밝게 두어
   * 점 하나로도 구분되게 했다(두 색 대비 2.31:1). 선택 칸 바탕 -ink #15803d 는 흰 글자 5.02:1.
   * 위 --sp-* 는 글자 대비용으로 그대로 두고, 띠 · 점 · 칠한 칸은 이 --sc-* 를 쓴다.
   * -ink 는 연한 바탕 위 글자용(4.5:1 이상), -bg 는 배지 바탕. */
  --sc-parkgolf: #8b5cf6;
  --sc-parkgolf-ink: #6d28d9;
  --sc-parkgolf-bg: #f1ecfe;
  --sc-baseball: #2563eb;
  --sc-baseball-ink: #1d4ed8;
  --sc-baseball-bg: #e8effd;
  --sc-soccer: #dc2626;
  --sc-soccer-ink: #b91c1c;
  --sc-soccer-bg: #fdecec;
  --sc-futsal: #16a34a;
  --sc-futsal-ink: #15803d;
  --sc-futsal-bg: #ecf8f0;
  --sc-etc: var(--turf);
  --sc-etc-ink: var(--turf-dark);
  --sc-etc-bg: var(--turf-bg);

  /* ---------------------------------------------------------------- 글씨 크기
   * **--fs-xs(14px) 가 이 제품의 절대 바닥이다.** 그보다 작은 값을 새로 만들지 말 것.
   * 본문은 --fs-base(17px). 젊은 사용자는 큰 글씨를 불편해하지 않지만 그 반대는
   * 성립하지 않으므로, 전 화면을 어르신 기준에 맞춘다. */
  --fs-xs: 14px;     /* 표 머리·숫자 뱃지 같은 보조 표시에만 */
  --fs-sm: 15px;     /* 부가 설명 한 줄 */
  --fs-base: 17px;   /* 본문 */
  --fs-md: 18px;     /* 목록 제목, 카드 소제목 */
  --fs-control: 19px;/* 버튼·입력칸 글씨 (iOS 확대 방지선 16px 보다 넉넉히 위) */
  --fs-lg: 20px;     /* 구역 제목 */
  --fs-xl: 24px;     /* 화면 제목 */
  --fs-2xl: 28px;    /* 숫자 강조 */
  --fs-3xl: 34px;    /* 소개 홈페이지 첫 제목 */

  --lh-body: 1.6;
  --lh-tight: 1.35;

  /* ---------------------------------------------------------------- 여백 (4px 기준) */
  --s1: 4px;
  --s2: 8px;
  --s3: 12px;
  --s4: 16px;
  --s5: 20px;
  --s6: 24px;
  --s7: 32px;
  --s8: 40px;
  /* 본문 좌우 여백. `.wrap` 이 쓰고, 화면 폭을 꽉 채우는 푸터가 **정확히 이만큼** 되민다.
     두 곳에 다른 값을 적으면 그 차이만큼 화면이 가로로 밀린다(360px 에서 실제로 2px
     밀려서 가로 스크롤이 생겼다). 한 곳에서만 정한다. */
  --wrap-pad: 14px;

  /* ---------------------------------------------------------------- 누름 크기
   * --tap 이 절대 최소값이다. 손가락 하나가 닿는 자리는 어떤 화면에서도 이 아래로
   * 내려가지 않는다(장갑 낀 손, 운동장 햇빛, 떨리는 손가락이 기준이다). */
  --tap: 48px;
  --ctl-h: 56px;   /* 보조 동작 */
  --btn-h: 60px;   /* 기본 버튼 · 입력칸 */
  --hero-h: 78px;  /* 한 화면에 하나뿐인 주 동작 */
  --tab-h: 72px;   /* 하단 탭 */
  --bar-h: 62px;   /* 상단 머리띠 */

  /* ---------------------------------------------------------------- 모양
   * 공공기관 화면답게 각을 살린다. 전부 둥글려 떠 있는 카드 더미로 만들지 않는다.
   * 카드는 **그림자 대신 실선 한 겹**으로 구분한다(--shadow 는 화면에 고정되어
   * 본문 위에 겹치는 띠 두 개에만 남겨 두었다). */
  --r: 10px;
  --r-sm: 8px;
  --r-lg: 12px;
  --shadow: 0 -1px 0 rgba(20, 24, 29, 0.06);

  --font: "Pretendard KO", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
    "Malgun Gothic", "맑은 고딕", "Noto Sans KR", sans-serif;
  --mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
}