/* ========================================
   BASE: 리셋, 변수, 공통 유틸리티, 버튼
   ✦ Pretendard 폰트 + 딥 네이비/블루 프리미엄
======================================== */

/* ───── Pretendard 웹폰트 ───── */
@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css');

/* ───── CSS Variables ───── */
:root {
    /* 포인트 컬러 (#553AE7 퍼플) */
    --point: #553AE7;
    --point-light: #7B64EE;
    --point-lighter: rgba(85,58,231,0.18);
    --point-bg: rgba(85,58,231,0.08);
    --point-dark: #4028C4;

    /* 다크 네이비 */
    --dark: #0a1628;
    --dark-2: #101e36;
    --dark-3: #1a2d4a;

    /* 브랜드 컬러 */
    --primary: #553AE7;
    --primary-light: #7B64EE;
    --primary-lighter: rgba(85,58,231,0.2);
    --primary-bg: rgba(85,58,231,0.08);
    --primary-dark: #4028C4;
    --accent: #6B52ED;
    --accent-light: #9D8DF5;
    --success: #059669;
    --success-bg: #ecfdf5;
    --warning: #d97706;
    --warning-bg: #fffbeb;
    --danger: #dc2626;
    --danger-bg: #fef2f2;

    /* 서피스 (밝고 깨끗한 톤) */
    --surface: #f7f8fc;
    --surface-2: #eef0f7;
    --surface-3: #dde1ed;

    /* 텍스트 */
    --text: #0a1628;
    --text-2: #1e2d45;
    --text-3: #8892a7;
    --text-inverse: #ffffff;

    /* 보더 */
    --border: #e2e5ef;
    --border-light: #eceef5;

    /* 섹션 교차 배경 */
    --section-alt: #f0f1f9;
    --glass-bg: rgba(255,255,255,.7);
    --glass-border: rgba(255,255,255,.5);

    /* 기타 */
    --radius: 16px;
    --radius-sm: 10px;
    --radius-xs: 8px;
    --shadow-xs: 0 2px 8px rgba(10,22,40,.06);
    --shadow-sm: 0 4px 16px rgba(10,22,40,.08);
    --shadow: 0 6px 24px rgba(10,22,40,.1);
    --shadow-md: 0 12px 36px rgba(10,22,40,.12);
    --shadow-lg: 0 20px 56px rgba(10,22,40,.14);
    --shadow-xl: 0 28px 72px rgba(10,22,40,.16);
    --shadow-primary: 0 10px 32px rgba(85,58,231,.28);
    --transition: .3s cubic-bezier(.4,0,.2,1);
    --font: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ───── Reset ───── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
body {
    font-family: var(--font);
    font-size: 17px;
    color: var(--text);
    line-height: 1.8;
    background: #ffffff;
    overflow-x: hidden;
    font-weight: 400;
    letter-spacing: -.01em;
}
a { text-decoration: none; color: inherit; transition: var(--transition); }
ul { list-style: none; }
img { max-width: 100%; display: block; }
button { font-family: var(--font); cursor: pointer; border: none; background: none; }

/* ───── Layout ───── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 24px; }
.section-pad { padding: 110px 0; }
.section-gray {
    background: var(--section-alt);
    position: relative;
}
.section-gray::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: radial-gradient(ellipse at 70% 20%, rgba(85,58,231,.03) 0%, transparent 60%),
                radial-gradient(ellipse at 20% 80%, rgba(85,58,231,.02) 0%, transparent 50%);
    pointer-events: none;
}

/* ───── Reveal Animation ───── */
.reveal {
    opacity: 0;
    transform: translateY(32px);
    transition: opacity .7s cubic-bezier(.16,1,.3,1), transform .7s cubic-bezier(.16,1,.3,1);
}
.reveal.visible { opacity: 1; transform: translateY(0); }

/* ───── Section Header (공통) ───── */
.section-head { text-align: center; margin-bottom: 64px; }
.section-label {
    display: inline-block;
    font-size: 17px; font-weight: 700; letter-spacing: 2.5px;
    color: var(--primary);
    padding: 7px 20px;
    border: none;
    border-radius: 30px;
    margin-bottom: 20px;
    text-transform: uppercase;
    background: var(--point-bg);
}
.section-title {
    font-size: 38px; font-weight: 800; color: var(--text);
    letter-spacing: -.03em; margin-bottom: 16px;
    line-height: 1.25;
}
.section-desc { font-size: 18px; color: var(--text-3); font-weight: 400; line-height: 1.7; max-width: 600px; margin-left: auto; margin-right: auto; }
.section-cta { text-align: center; margin-top: 52px; }

/* ───── Buttons ───── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 10px;
    padding: 16px 36px;
    border-radius: var(--radius-xs);
    font-size: 16px; font-weight: 600;
    border: none;
    transition: var(--transition);
    font-family: var(--font);
    cursor: pointer;
    position: relative;
    letter-spacing: -.01em;
}
.btn-glow {
    background: linear-gradient(135deg, var(--primary), var(--accent));
    color: #fff;
    box-shadow: var(--shadow-primary);
}
.btn-glow:hover {
    transform: translateY(-2px);
    box-shadow: 0 12px 32px rgba(85,58,231,.35);
    background: linear-gradient(135deg, var(--accent), var(--primary-light));
}
.btn-glass {
    background: rgba(255,255,255,.08);
    backdrop-filter: blur(12px);
    color: var(--text-inverse);
    border: 1px solid rgba(255,255,255,.15);
}
.btn-glass:hover { background: rgba(255,255,255,.15); }
.btn-glass-white {
    background: rgba(255,255,255,.1);
    backdrop-filter: blur(12px);
    color: var(--text-inverse);
    border: 1px solid rgba(255,255,255,.2);
}
.btn-glass-white:hover { background: rgba(255,255,255,.18); }
.btn-outline-dark {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}
.btn-outline-dark:hover {
    border-color: var(--primary);
    color: var(--primary);
    background: var(--primary-bg);
}
.btn-white-solid {
    background: #fff; color: var(--text);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
}
.btn-white-solid:hover { transform: translateY(-1px); box-shadow: var(--shadow); }
.btn-sm { padding: 10px 20px; font-size: 17px; border-radius: var(--radius-xs); }
.btn-lg { padding: 17px 40px; font-size: 16px; }
.btn-xl { padding: 19px 48px; font-size: 17px; border-radius: var(--radius-sm); }

/* ───── Stars Bar (공통) ───── */
.stars-bar {
    position: relative;
    width: 80px; height: 16px;
    font-size: 16px; line-height: 1;
}
.stars-bar::before { content: '★★★★★'; color: var(--border); letter-spacing: 2px; }
.stars-bar::after {
    content: '★★★★★';
    position: absolute; left: 0; top: 0;
    width: var(--rating); overflow: hidden;
    color: var(--primary); letter-spacing: 2px;
}

/* ───── Keyframes ───── */
@keyframes cardIn {
    from { opacity: 0; transform: translateY(16px) scale(.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}