/* parkgolf tokens.css — (사)한국파크골프전문인협회 디자인 토큰.
   컬러·타이포의 정본은 docs/01-plan/brand-brief.md 4·5절이다. 여기 없는 색은 만들지 않는다.
   Layer 1(primitive) 직접 참조 금지 — 컴포넌트는 Layer 3, 없으면 Layer 2만 참조.
   다크 테마는 없다 — 브랜드 브리프에 다크 팔레트가 없고 시니어 타깃은 라이트 고대비가 기준이다.
   [data-theme="light"] 는 승계한 마크업 호환을 위해 셀렉터만 남긴다(:root 와 동일 값). */

/* ═══ 웹폰트 ═══════════════════════════════════════════════════
   Pretendard 서브셋. OFL Reserved Font Name 제약 때문에 패밀리명을 개명했다 —
   재생성 절차와 라이선스 근거는 assets/fonts/README.md.
   축을 400–700 으로 클램프해 브리프 5-2 가 금지한 300 이하 웨이트가 아예 없다.
   콘텐츠 글자가 바뀌면 python3 tools/build-fonts.py 를 다시 돌려야 한다.

   <link rel="preload"> 는 일부러 쓰지 않는다. 400kbps/CPU4x 실측에서 preload 가 폰트를
   High priority 로 올려 CSS 대역을 뺏고 FCP 를 약 1초 늦췄다(3244ms vs 2252ms, 각 3회).
   font-display: swap 이 폴백으로 텍스트를 먼저 그리므로 글이 늦게 보이지는 않는다. */
@font-face {
  font-family: "KPGSA Sans";
  src: url("../fonts/kpgsa-sans.woff2") format("woff2-variations"),
       url("../fonts/kpgsa-sans.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ═══ Layer 1 — Primitive ══════════════════════════════════════ */
:root {
  /* 브랜드 팔레트 — brand-brief 4-1 토큰표 그대로 */
  --pg-green-700:  #1B5E36;   /* Primary */
  --pg-green-900:  #14532D;   /* Primary Dark */
  --pg-slate-blue: #2F5E7A;   /* Secondary */
  --pg-amber-700:  #B85C14;   /* Accent — 흰 글씨 전용 */
  --pg-amber-400:  #E08A2B;   /* Accent Light — 어두운 글씨 전용 */
  --pg-ink:        #1C1F1A;   /* 본문 */
  --pg-ink-muted:  #5A6159;   /* 보조 텍스트 */
  --pg-bg:         #FAF9F5;   /* 페이지 배경 */
  --pg-surface:    #F2F4EE;   /* 카드·섹션 배경 */
  --pg-border:     #8B9184;   /* 입력 필드 테두리 */
  --pg-divider:    #DCDDD6;   /* 장식용 구분선 전용 */
  --pg-white:      #FFFFFF;

  /* 브리프 표 밖 — 오류 상태는 브랜드 녹색·앰버와 반드시 구분돼야 해서 따로 둔다.
     #FAF9F5 위 7.08:1 / 흰 글씨 7.46:1 (tools/contrast-check.py 로 검증). */
  --pg-danger:     #A3231B;

  /* 중성 램프 — 승계한 변수명을 유지하고 값만 브랜드 중성색으로 재조정한다.
     단계 수가 브랜드 중성색보다 많으므로 인접 단계가 같은 값을 공유한다. */
  --ink-950: var(--pg-ink);
  --ink-900: var(--pg-ink);
  --ink-850: var(--pg-ink);
  --ink-800: var(--pg-ink);
  --ink-700: var(--pg-ink-muted);
  --ink-650: var(--pg-ink-muted);
  --ink-600: var(--pg-ink-muted);
  --ink-500: var(--pg-ink-muted);
  --ink-450: var(--pg-ink-muted);
  --ink-400: var(--pg-border);
  --ink-350: var(--pg-border);
  --ink-300: var(--pg-border);
  --ink-200: var(--pg-divider);
  --ink-100: var(--pg-surface);
  --ink-050: var(--pg-bg);
  --ink-000: var(--pg-white);

  --alpha-ink-90:    rgba(28, 31, 26, 0.90);
  --alpha-ink-06:    rgba(28, 31, 26, 0.06);
  --alpha-white-24:  rgba(255, 255, 255, 0.24);
  --alpha-white-08:  rgba(255, 255, 255, 0.08);
  --alpha-white-04:  rgba(255, 255, 255, 0.04);
}

/* ═══ Layer 2 — Semantic ═══════════════════════════════════════ */
:root,
[data-theme="light"] {
  color-scheme: light;

  --color-bg-base:        var(--pg-bg);
  --color-bg-sunken:      var(--pg-white);   /* 입력 필드 바닥 — 테두리 3:1 확보용 */
  --color-surface:        var(--pg-white);
  --color-surface-raised: var(--pg-surface);
  --color-surface-glass:  var(--alpha-ink-06);

  --color-text-primary:     var(--pg-ink);
  --color-text-secondary:   var(--pg-ink-muted);
  --color-text-placeholder: var(--pg-ink-muted);
  --color-text-disabled:    var(--pg-border);
  --color-text-on-brand:    var(--pg-white);
  --color-text-on-accent:   var(--pg-white);   /* accent = amber-700 → 흰 글씨 (4-3) */
  --color-text-link:        var(--pg-green-700);
  --color-text-link-hover:  var(--pg-green-900);
  /* 앰버를 본문 크기 글씨로 쓰지 않는다 — #B85C14 on #FAF9F5 는 4.35:1 로 AA 본문 미달.
     앰버는 면(버튼 배경)·포커스 링·큰 글씨(3:1) 전용이고, 작은 강조 텍스트는 녹색을 쓴다. */
  --color-text-accent:      var(--pg-green-700);

  --color-brand:        var(--pg-green-700);
  --color-brand-hover:  var(--pg-green-900);
  --color-brand-active: var(--pg-green-900);
  /* accent 는 밝게가 아니라 어둡게 반응한다 — amber-400 으로 밝히면 흰 글씨가 2.68:1 로 깨진다 */
  --color-accent:        var(--pg-amber-700);
  --color-accent-hover:  var(--pg-green-900);
  --color-accent-active: var(--pg-green-900);

  --color-border-subtle:      var(--pg-divider);   /* 장식 구분선 — 폼 테두리로 쓰지 말 것 */
  --color-border-interactive: var(--pg-border);    /* 입력 필드·컨트롤 테두리 */
  --color-border-strong:      var(--pg-ink-muted);
  --color-border-brand:       var(--pg-green-700);

  --color-success: var(--pg-green-700);
  --color-warning: var(--pg-amber-700);   /* amber-400 은 흰 글씨 불가 → 배지 배경은 700 */
  --color-danger:  var(--pg-danger);
  --color-text-on-status: var(--pg-white);

  --color-focus-ring: var(--pg-amber-700);

  --gradient-brand: linear-gradient(112deg, var(--pg-green-700) 0%, var(--pg-amber-700) 100%);
  /* 텍스트가 올라가는 브랜드 서피스 전용 — 전 구간 흰 글씨 7.78:1 이상 */
  --gradient-brand-deep: linear-gradient(112deg, var(--pg-green-900) 0%, var(--pg-green-700) 100%);
  --gradient-fade-bottom: linear-gradient(180deg, rgba(28,31,26,0) 0%, var(--pg-ink) 88%);
}

/* ═══ Layer 3 — Component ═══════════════════════════════════════ */
:root,
[data-theme="light"] {
  /* 터치 타깃 — brand-brief 5-2: 최소 48×48px */
  --btn-height-lg: 3.5rem;
  --btn-height-md: 3rem;
  --btn-height-sm: 2.75rem;
  --btn-padding-x-lg: var(--space-7);
  --btn-padding-x-md: var(--space-6);
  --btn-padding-x-sm: var(--space-4);
  --btn-radius: var(--radius-md);
  --btn-font-weight: 600;

  --card-bg:            var(--color-surface);
  --card-bg-hover:      var(--color-surface-raised);
  --card-border:        1px solid var(--color-border-subtle);
  --card-radius:        var(--radius-lg);
  --card-padding:       var(--space-7);
  --card-padding-compact: var(--space-5);
  --card-shadow:        var(--shadow-sm);
  --card-shadow-hover:  var(--shadow-lg);
  --card-lift:          -4px;

  --field-height:       var(--btn-height-md);
  --field-bg:           var(--color-bg-sunken);
  --field-border:       1px solid var(--color-border-interactive);
  --field-border-focus: 1px solid var(--color-border-brand);
  --field-radius:       var(--radius-sm);
  --field-padding-x:    var(--space-4);

  --gnb-height:         4.5rem;
  --gnb-height-mobile:  3.5rem;
  --gnb-bg-solid:       var(--alpha-ink-90);
  --gnb-blur:           12px;
  --gnb-border:         1px solid var(--color-border-subtle);

  /* 포커스 링 — brand-brief 4-4: 앰버 3px + 2px 오프셋.
     오프셋이 있어야 링이 녹색 버튼 면이 아니라 페이지 배경(4.35:1)에 접한다. */
  --focus-width:  3px;
  --focus-offset: 2px;

  /* 8pt 그리드에 없는 확정 수치 — 리터럴 px 금지 때문에 토큰으로 승격 */
  --grid-gap-md:   1.25rem;  /* 20px — IA 태블릿 거터 */
  --scroll-offset: 5.5rem;   /* 88px — sticky 헤더 회피 (WCAG 2.4.11) */
  --hit-expand:    -2px;     /* 44px 컨트롤의 ::after 히트영역을 48px 로 확장 */
  --util-height:   2.25rem;  /* 36px — GNB 유틸바 (데스크톱 전용) */
}

/* ═══ 타이포그래피 — brand-brief 5절 ════════════════════════════
   시니어(60~70대) 기준: 본문 18px 하한, 행간 1.7~1.8, 캡션 16px 하한,
   본문 웨이트 400 이상, 자간 0(음수 자간 금지). */
:root {
  /* 브리프 5-1 결정에 따른 Pretendard 로컬 서브셋(개명본). 서브셋이라 글자가 빠지면
     다음 폴백으로 넘어간다 — 사용자가 입력한 값이나 새 카피가 즉시 두부로 깨지지 않게 하려는 것. */
  --font-sans: "KPGSA Sans", "Pretendard Variable", Pretendard, -apple-system,
               BlinkMacSystemFont, "Apple SD Gothic Neo", "Segoe UI",
               "Noto Sans KR", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular,
               "SF Mono", Menlo, Consolas, monospace;

  --text-h1:      clamp(2.25rem, 1.75rem + 2.20vw, 2.75rem);   /* 36 → 44px */
  --text-h2:      clamp(1.75rem, 1.50rem + 1.10vw, 2.00rem);   /* 28 → 32px */
  --text-h3:      clamp(1.375rem, 1.25rem + 0.55vw, 1.50rem);  /* 22 → 24px */
  --text-h4:      clamp(1.125rem, 1.05rem + 0.35vw, 1.25rem);  /* 18 → 20px */
  --text-lead:    clamp(1.25rem, 1.19rem + 0.28vw, 1.375rem);  /* 20 → 22px */
  --text-body:    clamp(1.125rem, 1.08rem + 0.22vw, 1.25rem);  /* 18 → 20px */
  --text-sm:      1.0625rem;  /* 17px — 보조 텍스트 */
  --text-xs:      1rem;       /* 16px — 캡션 하한. 이보다 작은 값을 만들지 않는다 */
  --text-counter: clamp(2.75rem, 1.63rem + 5.00vw, 5.50rem);

  --leading-tight:  1.15;
  --leading-snug:   1.28;
  --leading-normal: 1.7;   /* 본문 */

  --tracking-normal: 0;       /* 본문·헤드라인 전부 0 — 음수 자간 금지 */
  --tracking-wide:   0.06em;  /* 라틴 대문자 eyebrow 전용 */

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

  --measure-base: 34em;   /* 한글 30~35자 — 시선 복귀 실패 방지 */
  --measure-wide: 48em;
}

/* ═══ 스페이싱 · 레이아웃 ═══════════════════════════════════════ */
:root {
  --space-0:  0;
  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.5rem;
  --space-6:  2rem;
  --space-7:  2.5rem;
  --space-8:  3rem;
  --space-9:  4rem;
  --space-10: 5rem;
  --space-11: 6rem;
  --space-12: 8rem;

  --section-py:      clamp(4rem, 2.5rem + 6.5vw, 8rem);
  --section-py-hero: clamp(6rem, 3.0rem + 12vw, 11rem);
  --section-gap:     clamp(2rem, 1.4rem + 2.6vw, 4rem);

  --container-max:   75rem;
  --container-wide:  87.5rem;
  --container-text:  45rem;
  --gutter:          clamp(1.25rem, 0.75rem + 2.2vw, 2.5rem);
  --grid-columns:    12;
  --grid-columns-md: 8;
  --grid-columns-sm: 4;

  /* 브레이크포인트 — 참조용(미디어쿼리는 리터럴 값 사용, CSS 사양 제약) */
  --bp-sm: 480px;
  --bp-md: 768px;
  --bp-lg: 1024px;
  --bp-xl: 1280px;
  --bp-2xl: 1536px;
}

/* ═══ 반경 · 그림자 · z-index ═══════════════════════════════════ */
:root {
  --radius-xs:   4px;
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   24px;
  --radius-2xl:  32px;
  --radius-full: 999px;

  --shadow-sm: 0 1px 2px rgba(28, 31, 26, 0.06);
  --shadow-md: 0 4px 12px rgba(28, 31, 26, 0.09);
  --shadow-lg: 0 12px 32px rgba(28, 31, 26, 0.12);
  --shadow-xl: 0 24px 64px rgba(28, 31, 26, 0.16);
  --shadow-none: none;

  --z-below:    -1;
  --z-base:      0;
  --z-raised:    10;
  --z-sticky:    100;
  --z-gnb:       200;
  --z-dropdown:  300;
  --z-overlay:   800;
  --z-modal:     900;
  --z-toast:     1000;
  --z-skiplink:  1100;
}

/* ═══ 모션 토큰 ═════════════════════════════════════════════════ */
:root {
  --duration-instant: 80ms;
  --duration-fast:    140ms;
  --duration-base:    220ms;
  --duration-slow:    360ms;
  --duration-slower:  560ms;
  --duration-cinema:  900ms;

  --ease-linear:   linear;
  --ease-standard: cubic-bezier(0.20, 0.00, 0.00, 1.00);
  --ease-out:      cubic-bezier(0.16, 1.00, 0.30, 1.00);
  --ease-in:       cubic-bezier(0.70, 0.00, 0.84, 0.00);
  --ease-inout:    cubic-bezier(0.65, 0.00, 0.35, 1.00);
  --ease-spring:   cubic-bezier(0.34, 1.56, 0.64, 1.00);

  --stagger-tight:  40ms;
  --stagger-base:   70ms;
  --stagger-loose: 110ms;

  --shift-xs:  4px;
  --shift-sm:  8px;
  --shift-md: 16px;
  --shift-lg: 32px;
  --shift-xl: 64px;
}

/* 전역 감쇠 — OS 설정 또는 사이트 모션 토글(html[data-motion="reduced"]) */
@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-instant: 1ms; --duration-fast: 1ms; --duration-base: 1ms;
    --duration-slow: 1ms; --duration-slower: 1ms; --duration-cinema: 1ms;
    --stagger-tight: 0ms; --stagger-base: 0ms; --stagger-loose: 0ms;
    --shift-xs: 0; --shift-sm: 0; --shift-md: 0; --shift-lg: 0; --shift-xl: 0;
  }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}

html[data-motion="reduced"] {
  --duration-instant: 1ms; --duration-fast: 1ms; --duration-base: 1ms;
  --duration-slow: 1ms; --duration-slower: 1ms; --duration-cinema: 1ms;
  --stagger-tight: 0ms; --stagger-base: 0ms; --stagger-loose: 0ms;
  --shift-xs: 0; --shift-sm: 0; --shift-md: 0; --shift-lg: 0; --shift-xl: 0;
}
html[data-motion="reduced"] *,
html[data-motion="reduced"] *::before,
html[data-motion="reduced"] *::after {
  animation-duration: 1ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: 1ms !important;
  scroll-behavior: auto !important;
}