/* ================================================================
 * Hi Car Match - 디자인 시스템 v1.0
 * 참고: AutoScout24 (깔끔한 정렬) + Autowini (한국적 친근함)
 * ================================================================ */

:root {
    /* ===== 컬러 팔레트 (Hi Car Match: Sticker Red + Ink + Warm Cream) ===== */
    /* Primary — 하이카매치 레드 (마스코트 스티커 레드) */
    --gab-primary-50:  #FDF1EF;
    --gab-primary-100: #FADEDA;
    --gab-primary-200: #F4BAB3;
    --gab-primary-300: #EC9186;
    --gab-primary-400: #E2665A;
    --gab-primary-500: #DC4A3E;
    --gab-primary-600: #D8342C;  /* 메인 — Hi Car Match 레드 */
    --gab-primary-700: #B02318;
    --gab-primary-800: #8C1812;
    --gab-primary-900: #66100C;

    /* 브랜드 그라데이션 — 스티커 레드 */
    --gab-grad-brand: linear-gradient(135deg, #E04A40 0%, #B02318 100%);
    --gab-grad-brand-soft: linear-gradient(135deg, #DC4A3E 0%, #D8342C 100%);
    --gab-glow-brand: 0 12px 32px -12px rgba(176, 35, 24, 0.38);

    /* Accent — 두바이 샌드/브론즈 (마스코트 야자수 모래톤) */
    --gab-bronze-300: #F0DCAE;
    --gab-bronze-400: #E5C07E;
    --gab-bronze-500: #D4A55C;  /* 메인 액센트 */
    --gab-bronze-600: #B48540;
    --gab-bronze-700: #8F6830;
    /* 하위호환: 기존 accent 참조 → 샌드로 자동 전환 */
    --gab-accent-400: #E5C07E;
    --gab-accent-500: #D4A55C;
    --gab-accent-600: #B48540;

    /* Navy/Ink — 스티커 잉크 (다크 서피스) */
    --gab-navy-950: #121110;
    --gab-navy-900: #1A1917;
    --gab-navy-800: #21201D;
    --gab-navy-700: #2A2824;
    --gab-navy-600: #37342E;

    /* Success / Warning / Danger */
    --gab-success: #2F8F4C;
    --gab-warning: #D4A55C;
    --gab-danger:  #C4453C;
    --gab-info:    #3E6FB4;  /* 부르즈할리파 블루 */

    /* Neutral — 클린 화이트 (박스는 화이트 + 로고컬러 포인트) */
    --gab-gray-50:  #FFFFFF;
    --gab-gray-100: #F6F5F2;
    --gab-gray-200: #E8E6E1;
    --gab-gray-300: #D2CFC8;
    --gab-gray-400: #A09C93;
    --gab-gray-500: #737067;
    --gab-gray-600: #56534C;
    --gab-gray-700: #3A3833;
    --gab-gray-800: #232220;
    --gab-gray-900: #161514;

    /* Hi Car Match 스티커 토큰 */
    --hicm-ink: #1A1A1A;
    --hicm-cream: #F8F7F4;
    --hicm-blue: #C9E0F4;      /* 부르즈할리파 라이트블루 */
    --hicm-blue-soft: #EAF4FC;
    --hicm-border: 2px solid var(--hicm-ink);
    --hicm-border-bold: 2.5px solid var(--hicm-ink);
    --hicm-shadow: 4px 5px 0 rgba(26, 26, 26, 0.12);
    --hicm-shadow-sm: 3px 3px 0 rgba(26, 26, 26, 0.12);

/* ===== 폰트 ===== */
    --gab-font-sans: 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', -apple-system, BlinkMacSystemFont,
                     'Segoe UI', Roboto, sans-serif;
    --gab-font-display: 'Jua', 'Pretendard Variable', 'Pretendard', 'Noto Sans KR', sans-serif;  /* 스티커 디스플레이 (한글/영문) */
    --gab-font-en: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --gab-font-ar: 'Noto Sans Arabic', 'Tajawal', sans-serif;
    --gab-font-mono: ui-monospace, 'SF Mono', Menlo, Monaco, Consolas, monospace;

    /* ===== 자간 (한글 가독성 최적화) ===== */
    --gab-tracking-tight: -0.025em;  /* 큰 제목 */
    --gab-tracking-snug:  -0.015em;  /* 소제목·본문 */
    --gab-tracking-normal: -0.01em;  /* 기본 */


    /* 폰트 크기 */
    --gab-text-xs:   12px;
    --gab-text-sm:   13px;
    --gab-text-base: 14px;
    --gab-text-md:   15px;
    --gab-text-lg:   17px;
    --gab-text-xl:   20px;
    --gab-text-2xl:  24px;
    --gab-text-3xl:  30px;
    --gab-text-4xl:  36px;
    --gab-text-5xl:  48px;
    --gab-text-hero: 56px;

    /* ===== 간격 ===== */
    --gab-space-1:  4px;
    --gab-space-2:  8px;
    --gab-space-3:  12px;
    --gab-space-4:  16px;
    --gab-space-5:  20px;
    --gab-space-6:  24px;
    --gab-space-8:  32px;
    --gab-space-10: 40px;
    --gab-space-12: 48px;
    --gab-space-16: 64px;
    --gab-space-20: 80px;
    --gab-space-24: 96px;
    --gab-space-32: 128px;
    --gab-space-40: 160px;
    --gab-space-20: 80px;

    /* ===== 모서리 둥글기 ===== */
    --gab-radius-sm:  6px;
    --gab-radius:     10px;
    --gab-radius-md:  12px;
    --gab-radius-lg:  14px;
    --gab-radius-xl:  18px;
    --gab-radius-2xl: 22px;
    --gab-radius-full: 9999px;

    /* ===== 그림자 ===== */
    --gab-shadow-sm:  2px 2px 0 rgba(26, 26, 26, 0.08);
    --gab-shadow:     2px 3px 0 rgba(26, 26, 26, 0.10);
    --gab-shadow-md:  3px 4px 0 rgba(26, 26, 26, 0.12);
    --gab-shadow-lg:  5px 6px 0 rgba(26, 26, 26, 0.13);
    --gab-shadow-xl:  7px 9px 0 rgba(26, 26, 26, 0.14);
    --gab-shadow-2xl: 10px 12px 0 rgba(26, 26, 26, 0.16);

    /* ===== 컨테이너 최대 너비 ===== */
    --gab-container-sm: 640px;
    --gab-container-md: 768px;
    --gab-container-lg: 1024px;
    --gab-container-xl: 1280px;
    --gab-container-2xl: 1440px;

    /* ===== 전환 ===== */
    --gab-transition-fast: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --gab-transition:      250ms cubic-bezier(0.4, 0, 0.2, 1);
    --gab-transition-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);

    /* ===== Z-Index ===== */
    --gab-z-dropdown: 100;
    --gab-z-sticky:   200;
    --gab-z-fixed:    300;
    --gab-z-modal-bg: 400;
    --gab-z-modal:    500;
    --gab-z-popover:  600;
    --gab-z-tooltip:  700;
}

/* ===== Reset & Base ===== */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--gab-font-sans);
    font-size: var(--gab-text-base);
    line-height: 1.6;
    letter-spacing: var(--gab-tracking-normal);
    color: var(--gab-gray-800);
    background: var(--gab-gray-50);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    word-break: keep-all;        /* 한글 단어 단위 줄바꿈 */
    overflow-wrap: break-word;
}

/* 다국어 RTL 자동 */
body[dir="rtl"] {
    font-family: var(--gab-font-ar);
    letter-spacing: 0;            /* 아랍어는 자간 0 */
}

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: var(--gab-tracking-tight);
    color: var(--gab-gray-900);
}
h4, h5, h6 { letter-spacing: var(--gab-tracking-snug); }

/* 숫자 정렬 (가격·통계 — 자릿수 고정폭) */
.gab-num, .gab-price, .gab-stat-val, .gab-astat-val {
    font-feature-settings: 'tnum' 1, 'ss01' 1;
    font-variant-numeric: tabular-nums;
}

p {
    margin: 0;
}

a {
    color: var(--gab-primary-600);
    text-decoration: none;
    transition: color var(--gab-transition-fast);
}

a:hover {
    color: var(--gab-primary-700);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

button {
    font-family: inherit;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
}

ul, ol {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* ===== 공통 유틸 ===== */
.gab-container {
    max-width: var(--gab-container-2xl);
    margin: 0 auto;
    padding: 0 clamp(20px, 4vw, 48px);
}

@media (max-width: 768px) {
    .gab-container { padding: 0 var(--gab-space-4); }
}

.gab-sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}