/* ============================================
   Theme: Deep Forest & Sophisticated Minimal
   ============================================ */
:root {
    /* Color Palette */
    --color-bg-cream: #F3F2ED;
    /* Light Cream (Main Background) */
    --color-bg-forest: #1B3B36;
    /* Deep Forest (Contrast Blocks) */
    --color-bg-dark: #0A1F1C;
    /* Darker Forest (Footer/Overlay) */

    --color-text-main: #1B3B36;
    /* Deep Forest (Main Text) */
    --color-text-light: #F3F2ED;
    /* Cream (Text on Dark) */
    --color-accent: #D45D5D;
    /* Muted Red/Terra (Accents) */

    --color-line-dark: rgba(27, 59, 54, 0.15);
    --color-line-light: rgba(243, 242, 237, 0.2);

    /* Typography */
    --font-serif: 'Playfair Display', serif;
    --font-sans: 'Inter', sans-serif;
    --font-mono: 'JetBrains Mono', monospace;
    --font-kr: 'Noto Serif KR', serif;

    /* Spacing & Layout */
    --padding-x: 4vw;
    --section-spacing: 120px;

    /* Animation */
    --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
    --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
}

/* Base Settings */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html,
body {
    width: 100%;
    overflow-x: hidden;
    background-color: var(--color-bg-cream);
    color: var(--color-text-main);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

/* Typography Utilities */
.serif-display {
    font-family: var(--font-serif);
    font-weight: 400;
}

.serif-italic {
    font-family: var(--font-serif);
    font-style: italic;
}

.mono-label {
    font-family: var(--font-mono);
    text-transform: uppercase;
    font-size: 0.8rem;
    letter-spacing: 0.05em;
    display: inline-block;
    margin-bottom: 20px;
}

/* Grid & Layout Utilities */
.container {
    padding: 0 var(--padding-x);
}

.full-block {
    width: 100%;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    padding: var(--section-spacing) var(--padding-x);
}