/* ═══════════════════════════════════════════════════════════
   Gift & Co. — Self-hosted Fonts (한글 Pretendard + 영문 Playfair Display)
   ═══════════════════════════════════════════════════════════ */

/* Pretendard — 한글 + Latin (jsDelivr static woff2) */
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2/Pretendard-Regular.woff2') format('woff2');
    unicode-range: U+0020-007F, U+00A0-00FF, U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF, U+FF00-FFEF;
}
@font-face {
    font-family: 'Pretendard';
    font-style: normal;
    font-weight: 600;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/static/woff2/Pretendard-SemiBold.woff2') format('woff2');
    unicode-range: U+0020-007F, U+00A0-00FF, U+1100-11FF, U+3130-318F, U+A960-A97F, U+AC00-D7AF, U+D7B0-D7FF, U+FF00-FFEF;
}

/* Playfair Display — Latin only (영문 디스플레이 전용, @fontsource via jsDelivr) */
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 400;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/npm/@fontsource/playfair-display@5.0.20/files/playfair-display-latin-400-normal.woff2') format('woff2');
    unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: normal;
    font-weight: 500;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/npm/@fontsource/playfair-display@5.0.20/files/playfair-display-latin-500-normal.woff2') format('woff2');
    unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F;
}
@font-face {
    font-family: 'Playfair Display';
    font-style: italic;
    font-weight: 400;
    font-display: swap;
    src: url('https://cdn.jsdelivr.net/npm/@fontsource/playfair-display@5.0.20/files/playfair-display-latin-400-italic.woff2') format('woff2');
    unicode-range: U+0020-007F, U+00A0-00FF, U+0100-017F;
}

/* :root font-family stack (한글은 Pretendard, 영문 디스플레이는 Playfair) */
:root {
    --gc-font-body:    'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    --gc-font-display: 'Playfair Display', 'Pretendard', Georgia, serif;
    --gc-font-serif:   Georgia, 'Pretendard', 'Times New Roman', serif;
}

/* ──────────────────────────────────────────────────────────────────
   Gift & Co. — Luxury Dark Theme
   Pure Black (#000000) + Champagne Gold (#C9A961)
   Playfair Display Serif + Pretendard
   ────────────────────────────────────────────────────────────────── */


:root {
    --gc-black:       #000000;
    --gc-black-soft:  #0A0A0A;
    --gc-surface:     #1A1A1A;
    --gc-border-dark: #2A2A2A;
    --gc-gold:        #C9A961;
    --gc-gold-light:  #E8D5A8;
    --gc-gold-dark:   #9C7E3F;
    --gc-ivory:       #F5F5F4;
    --gc-ivory-soft:  #FAFAF9;
    --gc-text-muted:  #888888;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
    background: var(--gc-ivory-soft);
    color: #111;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a { color: inherit; text-decoration: none; transition: color 0.3s ease; }

/* ───────── Display Headlines ───────── */
.gc-display {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 400;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.gc-display-italic {
    font-family: 'Playfair Display', Georgia, serif;
    font-style: italic;
    font-weight: 400;
    font-size: clamp(2.5rem, 6vw, 5rem);
    line-height: 1.1;
    letter-spacing: -0.01em;
}
.gc-headline {
    font-family: 'Playfair Display', Georgia, serif;
    font-weight: 500;
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    line-height: 1.2;
    letter-spacing: -0.005em;
}

/* ───────── Labels (UPPER, tracking) ───────── */
.gc-label {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.3em;
    color: var(--gc-gold);
}
.gc-label-sm {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    color: var(--gc-text-muted);
}

/* ───────── Pricing ───────── */
.gc-price {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 500;
    color: #111;
}
.gc-price-display {
    font-family: Georgia, 'Times New Roman', serif;
    font-weight: 500;
    font-size: 1.125rem;
    color: var(--gc-gold);
    letter-spacing: 0.01em;
}
.gc-price-original {
    font-family: Georgia, 'Times New Roman', serif;
    color: var(--gc-text-muted);
    text-decoration: line-through;
    font-size: 0.875rem;
}

/* ───────── Cards ───────── */
.gc-card-dark {
    background: var(--gc-black);
    color: var(--gc-ivory);
    border: 1px solid var(--gc-border-dark);
    transition: border-color 0.3s ease, transform 0.3s ease;
}
.gc-card-dark:hover {
    border-color: var(--gc-gold);
}
.gc-card-light {
    background: #fff;
    border: 1px solid #EAE8E5;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.gc-card-light:hover {
    border-color: var(--gc-gold);
    box-shadow: 0 10px 30px rgba(201,169,97,0.10);
}

/* ───────── Buttons ───────── */
.gc-btn-outline {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.85rem 1.75rem;
    border: 1px solid var(--gc-gold);
    color: var(--gc-gold);
    background: transparent;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    cursor: pointer;
    transition: all 0.3s ease;
}
.gc-btn-outline:hover {
    background: var(--gc-gold);
    color: var(--gc-black);
}
.gc-btn-solid {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.85rem 1.75rem;
    background: var(--gc-gold);
    color: var(--gc-black);
    border: 1px solid var(--gc-gold);
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    cursor: pointer;
    transition: all 0.3s ease;
}
.gc-btn-solid:hover {
    background: var(--gc-gold-light);
    border-color: var(--gc-gold-light);
}
.gc-btn-dark {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5em;
    padding: 0.85rem 1.75rem;
    background: var(--gc-black);
    color: var(--gc-gold);
    border: 1px solid var(--gc-black);
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.25em;
    cursor: pointer;
    transition: all 0.3s ease;
}
.gc-btn-dark:hover {
    background: var(--gc-black-soft);
    color: var(--gc-gold-light);
}

/* ───────── Badges ───────── */
.gc-badge {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--gc-gold);
    color: var(--gc-gold);
    background: transparent;
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}
.gc-badge-filled {
    display: inline-block;
    padding: 0.3rem 0.7rem;
    background: var(--gc-gold);
    color: var(--gc-black);
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;
    font-size: 0.625rem;
    text-transform: uppercase;
    letter-spacing: 0.2em;
}

/* ───────── Dividers ───────── */
.gc-divider {
    display: block;
    width: 60px;
    height: 1px;
    background: var(--gc-gold);
    margin: 1.5rem 0;
}
.gc-divider-long {
    display: block;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, var(--gc-gold), transparent);
    margin: 2rem 0;
}

/* ───────── Inputs ───────── */
.gc-input {
    width: 100%;
    padding: 0.9rem 1rem;
    background: var(--gc-black-soft);
    border: 1px solid var(--gc-border-dark);
    color: var(--gc-ivory);
    font-family: 'Pretendard', sans-serif;
    font-size: 0.95rem;
    transition: border-color 0.3s ease;
}
.gc-input:focus {
    outline: none;
    border-color: var(--gc-gold);
}
.gc-input::placeholder { color: var(--gc-text-muted); }
.gc-input-light {
    width: 100%;
    padding: 0.9rem 1rem;
    background: #fff;
    border: 1px solid #DDD;
    color: #111;
    font-family: 'Pretendard', sans-serif;
    font-size: 0.95rem;
    transition: border-color 0.3s ease;
}
.gc-input-light:focus {
    outline: none;
    border-color: var(--gc-gold);
}

/* ───────── Links ───────── */
.gc-link {
    position: relative;
    color: inherit;
    transition: color 0.3s ease;
}
.gc-link:hover {
    color: var(--gc-gold);
}
.gc-link::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: var(--gc-gold);
    transition: width 0.3s ease;
}
.gc-link:hover::after { width: 100%; }

/* ───────── Layout ───────── */
.gc-section { padding: clamp(60px, 8vw, 80px) 0; }
.gc-container {
    max-width: 1280px;
    margin: 0 auto;
    padding-left: 1.5rem;
    padding-right: 1.5rem;
}

/* ───────── Misc ───────── */
.gc-serif { font-family: 'Playfair Display', Georgia, serif; }
.gc-cormorant { font-family: 'Cormorant Garamond', Georgia, serif; }
.gc-italic { font-style: italic; }
.gc-text-gold { color: var(--gc-gold); }
.gc-text-ivory { color: var(--gc-ivory); }
.gc-bg-black { background-color: var(--gc-black); }
.gc-bg-ivory-soft { background-color: var(--gc-ivory-soft); }
.gc-border-gold { border-color: var(--gc-gold); }

/* ═══════════════════════════════════════════════════════════
   GOLD UPGRADE & SHIMMER ANIMATIONS
   ═══════════════════════════════════════════════════════════ */

:root {
    --gc-gold-bright:   #F5D77C;
    --gc-gold-rich:     #D4AF6A;
    --gc-gold-deep:     #B8893E;
    --gc-gold-shimmer-gradient: linear-gradient(
        90deg,
        #C9A961 0%,
        #C9A961 30%,
        #F5D77C 45%,
        #FFE9A8 50%,
        #F5D77C 55%,
        #C9A961 70%,
        #C9A961 100%
    );
}

@keyframes gc-shimmer-once {
    0%   { background-position: -150% center; }
    100% { background-position: 150% center; }
}

@keyframes gc-shimmer-loop {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* "Premium Gifting." — 페이지 진입 시 1회 빛 흐름 → 골드로 고정 */
.gc-shimmer-text-slow {
    background: var(--gc-gold-shimmer-gradient);
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gc-shimmer-once 2.5s ease-out 0.3s 1 forwards;
    display: inline-block;
}

/* "a moment." — 스크롤로 진입 시에만 재생 (.is-visible 클래스 부여 시) */
.gc-shimmer-on-view {
    background: linear-gradient(
        90deg,
        #C9A961 0%,
        #C9A961 100%
    );
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.gc-shimmer-on-view.is-visible {
    background: var(--gc-gold-shimmer-gradient);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: gc-shimmer-once 2.5s ease-out 1 forwards;
}

/* 디바이더 — 은은하게 계속 빛 흐름 */
.gc-divider {
    width: 60px;
    height: 1px;
    margin: 16px auto;
    background: linear-gradient(
        90deg,
        rgba(201, 169, 97, 0.3) 0%,
        rgba(245, 215, 124, 0.9) 50%,
        rgba(201, 169, 97, 0.3) 100%
    );
    background-size: 200% auto;
    animation: gc-shimmer-loop 5s ease-in-out infinite;
}

.gc-divider-long {
    height: 1px;
    margin: 24px 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(201, 169, 97, 0.4) 25%,
        rgba(245, 215, 124, 0.7) 50%,
        rgba(201, 169, 97, 0.4) 75%,
        transparent 100%
    );
    background-size: 200% auto;
    animation: gc-shimmer-loop 6s ease-in-out infinite;
}

/* 골드 텍스트 살짝 빛 */
.gc-gold {
    color: var(--gc-gold);
    text-shadow: 0 0 1px rgba(245, 215, 124, 0.15);
}

/* 호버 시 카드 보더 빛 */
.gc-card-dark:hover {
    border-color: var(--gc-gold);
    box-shadow: 0 0 12px rgba(201, 169, 97, 0.15);
}

/* 호버 시 버튼 빛 */
.gc-btn-solid:hover,
.gc-btn-outline:hover {
    box-shadow:
        0 0 0 1px var(--gc-gold-bright),
        0 0 16px rgba(245, 215, 124, 0.25);
}

/* 접근성 — 모션 줄이기 설정 존중 */
@media (prefers-reduced-motion: reduce) {
    .gc-shimmer-text-slow,
    .gc-shimmer-on-view.is-visible,
    .gc-divider,
    .gc-divider-long {
        animation: none;
        background: var(--gc-gold);
        -webkit-text-fill-color: var(--gc-gold);
        color: var(--gc-gold);
    }
    .gc-divider, .gc-divider-long {
        background: var(--gc-gold);
    }
}

/* ═══════════════════════════════════════════════════════════
   SHIMMER ANIMATION v2 — 더 천천히, 더 빛나게
   ═══════════════════════════════════════════════════════════ */

:root {
    --gc-gold-glow: #FFE9A8;
}

@keyframes gc-shimmer-once-slow {
    0%   { background-position: -150% center; }
    15%  { background-position: -150% center; }
    85%  { background-position: 150% center; }
    100% { background-position: 150% center; }
}

@keyframes gc-shimmer-loop-slow {
    0%   { background-position: -200% center; }
    50%  { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* "Premium Gifting." — 5초간 천천히 흐름, 한 번만 */
.gc-shimmer-text-slow {
    background: linear-gradient(
        100deg,
        #B8893E 0%,
        #C9A961 25%,
        #E8D5A8 40%,
        #FFE9A8 48%,
        #FFFFFF 50%,
        #FFE9A8 52%,
        #E8D5A8 60%,
        #C9A961 75%,
        #B8893E 100%
    );
    background-size: 300% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: gc-shimmer-once-slow 5s cubic-bezier(0.4, 0, 0.2, 1) 0.5s 1 forwards;
    display: inline-block;
    filter: drop-shadow(0 0 8px rgba(245, 215, 124, 0.3));
}

/* "a moment." — 스크롤 진입 시 한 번만 재생 */
.gc-shimmer-on-view {
    background: linear-gradient(
        90deg,
        #C9A961 0%,
        #C9A961 100%
    );
    background-size: 200% auto;
    background-clip: text;
    -webkit-background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.gc-shimmer-on-view.is-visible {
    background: linear-gradient(
        100deg,
        #B8893E 0%,
        #C9A961 25%,
        #E8D5A8 40%,
        #FFE9A8 48%,
        #FFFFFF 50%,
        #FFE9A8 52%,
        #E8D5A8 60%,
        #C9A961 75%,
        #B8893E 100%
    );
    background-size: 300% auto;
    -webkit-background-clip: text;
    background-clip: text;
    animation: gc-shimmer-once-slow 5s cubic-bezier(0.4, 0, 0.2, 1) 1 forwards;
    filter: drop-shadow(0 0 8px rgba(245, 215, 124, 0.3));
}

/* 디바이더 — 10초간 매우 우아하게 계속 (왕복) */
.gc-divider {
    width: 60px;
    height: 1px;
    margin: 16px auto;
    background: linear-gradient(
        90deg,
        rgba(201, 169, 97, 0.2) 0%,
        rgba(245, 215, 124, 0.9) 45%,
        rgba(255, 255, 255, 0.6) 50%,
        rgba(245, 215, 124, 0.9) 55%,
        rgba(201, 169, 97, 0.2) 100%
    );
    background-size: 300% auto;
    animation: gc-shimmer-loop-slow 10s ease-in-out infinite;
}

.gc-divider-long {
    height: 1px;
    margin: 24px 0;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(201, 169, 97, 0.3) 20%,
        rgba(245, 215, 124, 0.8) 48%,
        rgba(255, 255, 255, 0.5) 50%,
        rgba(245, 215, 124, 0.8) 52%,
        rgba(201, 169, 97, 0.3) 80%,
        transparent 100%
    );
    background-size: 300% auto;
    animation: gc-shimmer-loop-slow 12s ease-in-out infinite;
}

/* 호버 글로우 강화 */
.gc-card-dark:hover {
    border-color: var(--gc-gold);
    box-shadow: 0 0 16px rgba(201, 169, 97, 0.15);
}

.gc-btn-solid:hover {
    box-shadow:
        0 0 0 1px var(--gc-gold-bright),
        0 0 20px rgba(245, 215, 124, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    .gc-shimmer-text-slow,
    .gc-shimmer-on-view.is-visible,
    .gc-divider,
    .gc-divider-long {
        animation: none;
        background: var(--gc-gold);
        -webkit-text-fill-color: var(--gc-gold);
        color: var(--gc-gold);
        filter: none;
    }
}


/* ═══════════════════════════════════════════════════════════
   FORCE FONT STACK — 모든 한글 본문은 Pretendard, 디스플레이는 Playfair
   ═══════════════════════════════════════════════════════════ */
body,
input, button, select, textarea {
    font-family: var(--gc-font-body) !important;
}

.gc-display,
.gc-display-italic,
.gc-headline,
.gc-serif {
    font-family: var(--gc-font-display) !important;
}

.gc-price,
.gc-price-display,
.gc-price-original {
    font-family: var(--gc-font-serif) !important;
}

.gc-cormorant {
    font-family: 'Playfair Display', 'Pretendard', Georgia, serif !important;
}