/* =========================================================
   LETSRUN PLAY — Design Tokens
   Phase 1 데모 · Figma 「04 · 최종 기본」 기준
   폰트: Pretendard (동적 서브셋 CDN)
   ========================================================= */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

:root {
  /* ---------- Font ---------- */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo",
    "Noto Sans KR", "Malgun Gothic", sans-serif;

  /* ---------- PLAY Color System ----------
     행사·축제·대회 = Play Yellow
     시즌·계절감   = Look Coral
     체험·참여     = Activity Ground
     시설·공간     = Yard Green
     원칙: MAIN(500) 우선 사용 · 텍스트/아이콘은 700 ·
           넓은 배경은 100~200 · 한 콘텐츠에는 한 가지 MAIN */
  --yellow-100:#FFFDF2; --yellow-200:#FFF9DB; --yellow-300:#FFF4B8;
  --yellow-400:#FFF08E; --yellow-500:#FFEC58; --yellow-600:#D8C83F;
  --yellow-700:#A2941D; --yellow-800:#827821; --yellow-900:#595113;

  --coral-100:#FFF4F0; --coral-200:#FFE3DA; --coral-300:#FFC2AF;
  --coral-400:#FF9C78; --coral-500:#FF7E56; --coral-600:#E7633D;
  --coral-700:#C14A28; --coral-800:#93341A; --coral-900:#64210F;

  --ground-100:#FFF7EE; --ground-200:#FCE8CF; --ground-300:#F8D19F;
  --ground-400:#F4BE79; --ground-500:#F0B365; --ground-600:#D79745;
  --ground-700:#AE7126; --ground-800:#80531A; --ground-900:#573712;

  --green-100:#F3FDF1; --green-200:#DDF9D8; --green-300:#B9F2B0;
  --green-400:#99EC8C; --green-500:#89EA7A; --green-600:#67C85A;
  --green-700:#438F39; --green-800:#2F6529; --green-900:#1F431B;

  /* 시맨틱 별칭 — 마크업에서는 이쪽 사용 권장 */
  --c-event:   var(--yellow-500);  --c-event-deep:   var(--yellow-700);  --c-event-bg:   var(--yellow-100);
  --c-season:  var(--coral-500);   --c-season-deep:  var(--coral-700);   --c-season-bg:  var(--coral-100);
  --c-exp:     var(--ground-500);  --c-exp-deep:     var(--ground-700);  --c-exp-bg:     var(--ground-100);
  --c-fac:     var(--green-500);   --c-fac-deep:     var(--green-700);   --c-fac-bg:     var(--green-100);

  /* ---------- Neutrals ---------- */
  --ink:  #1D1D1F;   /* 본문·제목 */
  --grey: #6B6B70;   /* 보조 텍스트 */
  /* --soft는 아이콘·플레이스홀더 등 "장식" 전용이다(260806). 흰 배경 대비 2.80:1로 본문 텍스트
     기준(WCAG AA 4.5:1)에 못 미치므로 사용자가 읽는 문구에는 쓰지 않는다 — 보조 텍스트는 --grey(5.30:1).
     회색 위계가 ink→grey 2단계인 이유이며, 더 옅은 3단계를 만들면 AA를 통과할 수 없다. */
  --soft: #9A9AA0;   /* 주석·플레이스홀더 */
  --line: #E5E5E7;   /* 구분선·테두리 */
  --bg:   #F6F6F4;   /* 옅은 배경 블록 */
  --white:#FFFFFF;
  --neut-thumb:#D9D1BF;  /* NEUT · 썸네일 기본 (Figma Paint Style) */
  --icon-bg:#F2F2F7;     /* 방문 정보 아이콘 원형 배경 */
  --cta-green:#97FC85;   /* 처음방문 CTA (말마 배너) */

  /* ---------- Typography scale ---------- */
  --fs-display: 80px;  /* 히어로 대형 타이틀 (데스크톱) */
  --fs-card-lg: 26px;
  --fs-hero-meta: 24px; /* .nav-hero__title, .visit__title 전용 — 아래 --fs-h1과 데스크톱 값은 같지만
                            모바일 값(13.5px)이 본문보다 작아져 헤딩용으로는 재사용하지 않는다 */
  --fs-h1:      24px;  /* Section Heading(.section__head h1/h2) 전용 */
  --fs-h2:      22px;  /* 카드/모달 부제목급 타이틀(PLAY NOW!, 코스 미리보기 모달, Wide Banner Card 등) */
  --fs-h3:      18px;  /* 일반 카드 제목(.card__title) */
  --fs-card:    17px;
  --fs-body-lg: 16px;
  --fs-body:    15px;
  --fs-body-sm: 14px;
  --fs-label:   13px;
  --fs-caption: 12px;
  --fs-badge:   11px;

  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;

  --lh-tight: 1.15;  /* 대형 타이틀 */
  --lh-base:  1.5;
  --lh-body:  1.6;

  /* ---------- Spacing ---------- */
  --sp-4: 16px; --sp-6: 24px; /* 실사용 2단계만 유지(detail.css) — 나머지 10단계는 참조하는 곳이 없어 정리했다 */

  --container: 1280px;      /* 데스크톱 콘텐츠 폭 (1440 - 80*2) */
  /* 데스크톱 좌우 여백(260806 — 고정 80px → 유동).
     기준 폭 1440에서는 5.556vw = 80.0px이라 clamp 상한에 걸려 **기존과 정확히 동일**하다(콘텐츠 1280 유지).
     998~1200 구간에서만 줄어든다 — 이 구간에서 좌우 160px이 그대로 유지돼 뷰포트의 약 16%가 여백이 되고
     콘텐츠가 838px까지 좁아지던 문제를 완화한다(1024 기준 여백 80→57, 콘텐츠 864→910).
     ⚠ .container뿐 아니라 GNB(.gnb__inner)·풀블리드 레일(.rail--bleed)·코스 캐러셀(.courses-viewport)이
     같은 토큰을 참조하므로, 컨테이너만 따로 바꾸지 말고 반드시 이 토큰을 바꿔야 정렬이 함께 움직인다.
     모바일(≤997)은 아래 미디어쿼리에서 16px로 덮어쓰므로 이 값의 영향을 받지 않는다. */
  --pad-page: clamp(20px, 5.556vw, 80px);
  --gap-section: 72px;      /* 섹션 간격 */
  --gap-card: 32px;         /* 카드 간격 */
  --hero-ratio-desk: 876/680; /* 데스크톱(≥998) 히어로 배너 고정 비율(Figma 정본) — 폭이 변해도 모양·라운딩 동일 */

  /* ---------- Card ---------- */
  --content-card-media-ratio: 420/280; /* 일반 콘텐츠 카드(.card--wide) 공통 이미지 비율 — 랭킹·영상 등 확장형 전부 재사용 */

  /* ---------- Radius ----------
     260813 Visual 정돈: 면(surface) 라운드를 한 단계씩 낮춰 과하게 둥근 SaaS 느낌을 줄인다.
     ⚠ --r-full(pill)은 그대로 둔다 — Chip·Badge의 알약 형태는 이 프로젝트의 의미 체계
     (조작=Chip / 표시=Badge)를 읽게 하는 브랜드 요소라 각지게 바꾸지 않는다.
     즉 "면은 덜 둥글게, 알약은 그대로"가 이번 방향이다. */
  --r-sm: 6px;   /* 서울 글라스 칩 (8→6) */
  --r-md: 8px;   /* 정방형 썸네일·화살표 버튼·기본 .btn (10→8) */
  --r-card: 10px; /* (14→10) */
  --r-media: 14px; /* 콘텐츠 카드 이미지(HOME .card__media 실사용 값) — 상세 갤러리·모달 박스와 공통 (24→14) */
  --r-lg: 12px;  /* 카드 이미지·드롭다운 패널 (16→12) */
  --r-xl: 14px;  /* 방문정보·모바일 히어로·캘린더 카드 (20→14) */
  --r-hero: 16px; /* (24→16) */
  --r-full: 999px; /* 버튼·필·배지 — 유지 */

  /* ---------- Effect ----------
     260813: 그림자를 띄우는 대신 얇은 border로 면을 구분하는 방향으로 정돈했다.
     공용 컴포넌트의 box-shadow는 home.css에서 대부분 제거했고, FAB만 "떠 있는 버튼"이라는
     성격상 최소한으로 남긴다(기존 대비 확산·농도 축소). */
  --shadow-fab: 0 4px 12px rgba(0,0,0,.14);
  --overlay-hero: linear-gradient(180deg, rgba(0,0,0,.05) 0%, rgba(0,0,0,.66) 100%);
  --glass: rgba(255,255,255,.20);
  --glass-active: rgba(255,255,255,.36);
  --glass-chip: rgba(255,255,255,.13);
}

/* ---------- Mobile overrides (≤997px) ---------- */
@media (max-width:997px) {
  :root {
    --fs-display: 36px;
    --fs-h1: 20px;
    --fs-h2: 19px;
    --fs-h3: 16px;
    --fs-card-lg: 20px;
    --fs-hero-meta: 13.5px;
    --pad-page: 16px;      /* 모바일 공통 gutter — 기존 토큰 재사용(신규 변수 추가 안 함) */
    --gap-section: 40px;
    --gap-card: 12px;
    --r-hero: 12px;   /* 데스크톱 16에 맞춰 한 단계 축소(16→12) */
  }
}