/* ============================================================
   kt초이스 — 공통 레이아웃 · 디자인 토큰 (common.css)
   모든 페이지에서 가장 먼저 1회 로드. header.css/footer.css 보다 먼저.
   ------------------------------------------------------------
   구성: [1] 디자인 시스템 토큰(2026)  [2] 타이포  [3] 레이아웃
        [4] 레거시 팔레트 별칭(호환)  [5] 리셋  [2b] 타이포 유틸 클래스
   ============================================================ */

:root {
  /* ============ [1] 디자인 시스템 토큰 (2026 리뉴얼) ============ */

  /* --- Primary (브랜드 메인) : #2563EB 유지 --- */
  --primary-normal:#2563EB;
  --primary-strong:#1D4ED8;
  --primary-heavy:#1E40AF;
  /* 스펙 대안(필요 시 교체): normal #0066FF / strong #005EEB / heavy #0054D1 */

  /* --- Label (텍스트) : 반투명은 8자리 hex(RRGGBBAA) --- */
  --label-normal:#171719;        /* 기본 텍스트 (대비 ~16:1) */
  --label-neutral:#2E2F33E0;     /* 88% (대비 ~8:1) */
  --label-alternative:#37383C9C; /* 61% (대비 ~3.3:1) — 큰 글씨/보조용 */
  --label-assistive:#37383C47;   /* ~28% (대비 ~1.5:1) — 장식/비활성 전용, 읽는 텍스트 금지 */
  --label-disable:#37383C28;     /* ~16% (대비 ~1.2:1) — 비활성 상태 전용 */
  /* 읽어야 하는 작은 텍스트(캡션·각주·유의사항)용 — WCAG AA(4.5:1↑) 충족 */
  --label-caption:#5B5C60;       /* white 대비 ~6.7:1 */
  /* ⚠ 접근성: alternative/assistive/disable 는 대비가 낮습니다.
     읽어야 하는 본문·캡션·각주에는 label-normal / neutral / caption 을 사용하세요.
     alternative/assistive/disable 은 큰 글씨·장식·비활성 상태에만 사용. */

  /* --- Background --- */
  --background-normal:#FFFFFF;
  --background-alternative:#F7F7F8;

  /* --- Line (구분선) --- */
  --line-solid:#E1E2E4;          /* 불투명 실선 */
  --line-normal:#70737C38;       /* ~22% 반투명 */

  /* --- Fill (면) --- */
  --fill-normal:#70737C14;       /* ~8% */
  --fill-strong:#70737C29;       /* ~16% */
  --fill-alternative:#70737C0D;  /* ~5% */

  /* --- Status --- */
  --status-positive:#00BF40;
  --status-cautionary:#FF9200;
  --status-negative:#FF4242;

  /* ============ [2] 타이포 (Pretendard) ============ */
  --font:'Pretendard','Pretendard JP',-apple-system,BlinkMacSystemFont,system-ui,sans-serif;

  /* size */
  --fs-display1:56px; --fs-display2:40px; --fs-display3:36px;
  --fs-title1:32px;   --fs-title2:28px;   --fs-title3:24px;
  --fs-heading1:22px; --fs-heading2:20px;
  --fs-headline1:18px;--fs-headline2:17px;
  --fs-body1:16px;    --fs-body2:15px;
  --fs-label1:14px;   --fs-label2:13px;
  --fs-caption1:12px; --fs-caption2:11px;

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

  /* letter-spacing : 큰 글씨 음수 → 작은 글씨 양수 */
  --ls-display:-0.022em; --ls-title:-0.018em; --ls-heading:-0.015em;
  --ls-headline:-0.012em; --ls-body:-0.01em; --ls-label:-0.005em; --ls-caption:0.01em;

  /* ============ [3] 레이아웃 ============ */
  --radius:20px;                 /* 기본 radius */
  --card-pad:8px 24px;           /* 카드 padding: 세로 8 / 가로 24 */
  --maxw:1280px;
  /* ※ 그리드는 기존 시스템 그대로 유지 (섹션별 기존 grid/flex 레이아웃 사용).
       새 그리드 토큰(2/3/12col, gutter/offset)은 적용하지 않음. */

  /* ============ [4] 레거시 팔레트 별칭 (기존 header/footer/페이지 호환 유지) ============ */
  --blue-50:#EFF6FF; --blue-100:#DBEAFE; --blue-200:#BFDBFE; --blue-300:#93C5FD;
  --blue-400:#60A5FA; --blue-500:#3B82F6; --blue-600:#2563EB; --blue-700:#1D4ED8;
  --blue-800:#1E40AF;
  --gold-600:#D4A017; --gold-700:#B7860C;
  --navy:#0F172A; --gray-900:#171719; --gray-800:#1F2937; --gray-700:#374151;
  --gray-600:#4B5563; --gray-500:#6B7280; --gray-400:#71767F; --gray-300:#D1D5DB;
  /* gray-900:#171719(기본 텍스트) · gray-400:#71767F(캡션 접근성 대비 4.6:1) — 2026 표준, v2와 동일 */
  --gray-200:#E5E7EB; --gray-100:#F3F4F6; --gray-50:#F9FAFB;
  --surface:#FFFFFF; --white:#FFFFFF; --accent:#2563EB;
  --font-en:var(--font); --font-kr:var(--font);
  --sp-4:4px; --sp-8:8px; --sp-12:12px; --sp-16:16px; --sp-20:20px; --sp-24:24px;
  --sp-32:32px; --sp-40:40px; --sp-48:48px; --sp-56:56px; --sp-64:64px;
  --r-6:6px; --r-8:8px; --r-10:10px; --r-12:12px; --r-16:16px; --r-20:20px; --r-full:9999px;
  --shadow-sm:0 1px 8px rgba(0,0,0,.06);
  --shadow-md:0 4px 16px rgba(0,0,0,.08);
  /* ※ 스펙의 그레이 2계열(neutral / cool neutral, 5~99) 정확한 hex는 별도 확인 필요.
       확정되면 위 --gray-* 를 해당 값으로 교체 권장. */
}

/* ============ [2c] 반응형 타이포 (모바일 ≤768px) ============
   큰 타이포는 모바일에서 한 단계 축소. body/label/caption은 유지.
   기존 사이트 분기점(768px)과 동일. (대안: clamp() 유동형도 가능) */
@media (max-width:768px){
  :root{
    --fs-display1:40px; --fs-display2:32px; --fs-display3:28px;
    --fs-title1:26px;   --fs-title2:24px;   --fs-title3:22px;
    --fs-heading1:20px; --fs-heading2:19px;
    --fs-headline1:17px;--fs-headline2:16px;
    /* body1 16 / body2 15 / label 14·13 / caption 12·11 은 모바일에서도 유지 */
  }
}

/* ============ [5] 리셋 ============ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:var(--font); background:var(--background-normal); color:var(--label-normal); line-height:1.65; letter-spacing:-0.025em; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { font-family:inherit; cursor:pointer; border:none; background:none; }
ul { list-style:none; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 24px; }
/* 반응형 좌우 패딩 — 홈 기준으로 전 페이지 통일(헤더·푸터·본문 공통 .wrap).
   기존엔 home.css 에만 있어 홈 외 페이지 여백이 달라졌음 → 공통(common)으로 이동 */
@media (max-width:1199px){ .wrap { padding-left:32px; padding-right:32px; } }
@media (max-width:768px){ .wrap { padding-left:16px; padding-right:16px; } }
.scroll-x { overflow-x:auto; scrollbar-width:none; }
.scroll-x::-webkit-scrollbar { display:none; }

/* ============ [2b] 타이포 유틸리티 클래스 (선택) ============
   예) <h2 class="ty-title1">제목</h2>  <p class="ty-body1">본문</p> */
.ty-display1{font-size:var(--fs-display1);line-height:1.28;letter-spacing:var(--ls-display);font-weight:var(--fw-bold);}
.ty-display2{font-size:var(--fs-display2);line-height:1.3;letter-spacing:var(--ls-display);font-weight:var(--fw-bold);}
.ty-display3{font-size:var(--fs-display3);line-height:1.3;letter-spacing:var(--ls-display);font-weight:var(--fw-bold);}
.ty-title1{font-size:var(--fs-title1);line-height:1.34;letter-spacing:var(--ls-title);font-weight:var(--fw-semibold);}
.ty-title2{font-size:var(--fs-title2);line-height:1.36;letter-spacing:var(--ls-title);font-weight:var(--fw-semibold);}
.ty-title3{font-size:var(--fs-title3);line-height:1.4;letter-spacing:var(--ls-title);font-weight:var(--fw-semibold);}
.ty-heading1{font-size:var(--fs-heading1);line-height:1.42;letter-spacing:var(--ls-heading);font-weight:var(--fw-semibold);}
.ty-heading2{font-size:var(--fs-heading2);line-height:1.45;letter-spacing:var(--ls-heading);font-weight:var(--fw-semibold);}
.ty-headline1{font-size:var(--fs-headline1);line-height:1.45;letter-spacing:var(--ls-headline);font-weight:var(--fw-semibold);}
.ty-headline2{font-size:var(--fs-headline2);line-height:1.47;letter-spacing:var(--ls-headline);font-weight:var(--fw-semibold);}
.ty-body1{font-size:var(--fs-body1);line-height:1.6;letter-spacing:var(--ls-body);font-weight:var(--fw-regular);}
.ty-body2{font-size:var(--fs-body2);line-height:1.6;letter-spacing:var(--ls-body);font-weight:var(--fw-regular);}
.ty-label1{font-size:var(--fs-label1);line-height:1.45;letter-spacing:var(--ls-label);font-weight:var(--fw-medium);}
.ty-label2{font-size:var(--fs-label2);line-height:1.45;letter-spacing:var(--ls-label);font-weight:var(--fw-medium);}
.ty-caption1{font-size:var(--fs-caption1);line-height:1.35;letter-spacing:var(--ls-caption);font-weight:var(--fw-regular);}
.ty-caption2{font-size:var(--fs-caption2);line-height:1.35;letter-spacing:var(--ls-caption);font-weight:var(--fw-regular);}