/* ================================================================
   KoNa Tours — Design Tokens v2 (Luxury Safari Editorial)
   Korean-market focus: Noto Serif KR display, generous whitespace,
   refined amber, warm hairlines, KakaoTalk-first conversion.
   All v1 variable names preserved — components keep working.
   ================================================================ */
:root {
    /* Brand */
    --kn-amber: #B8702A;
    --kn-amber-light: #D4944A;
    --kn-amber-dark: #8B5520;
    --kn-amber-50: #FBF5ED;
    --kn-amber-100: #F5E6D0;
    --kn-navy: #1B2D4F;
    --kn-navy-light: #2A4270;
    --kn-navy-dark: #111D33;
    --kn-navy-50: #F0F3F8;

    /* Warm sand — surfaces & text */
    --kn-sand-900: #1A1612;
    --kn-sand-800: #2C2520;
    --kn-sand-700: #4A4035;
    --kn-sand-600: #6B6055;
    --kn-sand-500: #8C8275;
    --kn-sand-400: #ADA395;
    --kn-sand-300: #CDC5B8;
    --kn-sand-200: #E5DDD2;
    --kn-sand-100: #F0EBE4;
    --kn-sand-50: #FAF8F5;
    --kn-white: #FFFFFF;
    --kn-black: #0A0908;

    /* Editorial additions (v2) */
    --kn-ink: #16110C;              /* deep warm black for dark sections */
    --kn-ivory: #FBFAF7;            /* page background */
    --kn-line: rgba(26,22,18,0.10); /* hairline rules */
    --kn-line-dark: rgba(255,255,255,0.14);
    --kn-kakao: #FEE500;

    /* Accents (sparing) */
    --kn-sage: #7A9B6D;
    --kn-sky: #5B9EC4;
    --kn-terracotta: #C4654A;

    /* Type */
    --font-display: 'DM Serif Display', 'Noto Serif KR', Georgia, serif;
    --font-display-kr: 'Noto Serif KR', 'DM Serif Display', Georgia, serif;
    --font-body: 'DM Sans', 'Noto Sans KR', -apple-system, sans-serif;
    --font-kr: 'Noto Sans KR', 'DM Sans', sans-serif;

    /* Editorial type scale */
    --fs-hero: clamp(38px, 5.6vw, 68px);
    --fs-title: clamp(30px, 4vw, 46px);
    --fs-subtitle: clamp(22px, 2.6vw, 30px);
    --ls-kicker: 0.24em;

    /* Depth */
    --shadow-sm: 0 1px 3px rgba(26,22,18,0.06);
    --shadow-md: 0 4px 16px rgba(26,22,18,0.08);
    --shadow-lg: 0 12px 48px rgba(26,22,18,0.12);
    --shadow-xl: 0 24px 80px -12px rgba(26,22,18,0.18);

    /* Shape */
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 20px;
    --radius-full: 9999px;

    /* Motion */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --duration-fast: 200ms;
    --duration-base: 400ms;
    --duration-slow: 700ms;

    /* Rhythm */
    --section-y: clamp(72px, 10vw, 140px);
    --container: 1140px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}
body {
    font-family: var(--font-body);
    background: var(--kn-ivory);
    color: var(--kn-sand-800);
    line-height: 1.75;
    overflow-x: hidden;
    word-break: keep-all;
}
h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 400;
    line-height: 1.25;
    color: var(--kn-sand-900);
    letter-spacing: -0.005em;
}
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
::selection { background: var(--kn-amber-100); color: var(--kn-sand-900); }

/* ================================================================
   SHARED EDITORIAL PRIMITIVES (v2)
   ================================================================ */

/* Kicker — small caps line above titles */
.kn-kicker {
    display: inline-flex; align-items: center; gap: 14px;
    font-family: var(--font-body);
    font-size: 11px; font-weight: 600;
    letter-spacing: var(--ls-kicker); text-transform: uppercase;
    color: var(--kn-amber);
}
.kn-kicker::before {
    content: ''; width: 28px; height: 1px; background: var(--kn-amber);
    opacity: 0.6;
}
.kn-kicker.centered::after {
    content: ''; width: 28px; height: 1px; background: var(--kn-amber);
    opacity: 0.6;
}

/* Editorial link — text + long arrow, no box */
.kn-link {
    display: inline-flex; align-items: center; gap: 10px;
    font-family: var(--font-kr); font-size: 14px; font-weight: 600;
    color: var(--kn-sand-900); letter-spacing: 0.01em;
    padding-bottom: 4px; border-bottom: 1px solid var(--kn-sand-300);
    transition: all var(--duration-fast);
}
.kn-link::after { content: '→'; transition: transform var(--duration-base) var(--ease-out); }
.kn-link:hover { border-color: var(--kn-amber); color: var(--kn-amber); }
.kn-link:hover::after { transform: translateX(4px); }

/* Hairline rule */
.kn-rule { border: none; height: 1px; background: var(--kn-line); }

/* Floating KakaoTalk consult — Korean-market conversion anchor */
.kn-kakao-float {
    position: fixed; right: 22px; bottom: 22px; z-index: 900;
    display: flex; align-items: center; gap: 10px;
    padding: 13px 20px 13px 15px;
    background: var(--kn-ink); color: var(--kn-white);
    border-radius: var(--radius-full);
    font-family: var(--font-kr); font-size: 13px; font-weight: 600;
    letter-spacing: 0.02em;
    box-shadow: 0 8px 32px rgba(10,9,8,0.35);
    transition: transform var(--duration-base) var(--ease-out), box-shadow var(--duration-base) var(--ease-out);
}
.kn-kakao-float:hover { transform: translateY(-3px); box-shadow: 0 14px 40px rgba(10,9,8,0.4); }
.kn-kakao-float .bubble {
    width: 26px; height: 26px; border-radius: 50%;
    background: var(--kn-kakao);
    display: flex; align-items: center; justify-content: center;
    flex-shrink: 0;
}
.kn-kakao-float .bubble svg { width: 15px; height: 15px; color: #191919; }
@media (max-width: 768px) {
    .kn-kakao-float { right: 16px; bottom: 16px; padding: 12px; }
    .kn-kakao-float .label { display: none; }
}

/* Reveal (site-wide) */
.reveal {
    opacity: 0; transform: translateY(28px);
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
    transition-delay: var(--d, 0s);
}
.reveal.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
    .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
}