:root {
    --bg: #FDFDFC;
    --surface: #F9F8F6;
    --surface-alt: #F5F3EB;
    --text: #231F15;
    --text-muted: #726B5A;
    --border: #E4E0D8;
    --primary: #FCC52E;
    --primary-hover: #FBBA06;
    --on-primary: #111111;
    --primary-text: #29261E;
    --accent: #29261E;
    --on-accent: #FFFFFF;
    --accent-text: #29261E;
    --dark-band: #19150E;
    --on-dark: #FFFFFF;
    --on-dark-muted: #C3BFB6;
    --brand-btn-bg: #111111;
    --brand-btn-text: #FCC52E;
    --section-alt-bg: #F5F3EB;
    --dark-band-bg: #19150E;
    --brand-band-bg: #FCC52E;
    --hero-bg: #19150E;
    --on-hero: #FFFFFF;
    --footer-bg: #19150E;
    --on-footer: #FFFFFF;
    --on-footer-muted: #C3BFB6;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

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

body {
    font-family: 'Gowun Dodum', sans-serif;
    background-color: var(--bg);
    color: var(--text);
    margin: 0;
    padding: 0;
    line-height: 1.6;
    font-weight: 400;
    font-style: normal;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: 'Gowun Dodum', sans-serif;
    font-weight: 400;
    font-style: normal;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 0.75rem;
}

p,
span,
a,
button,
label,
input,
textarea,
select {
    font-family: 'Gowun Dodum', sans-serif;
    font-style: normal;
}

a,
a:hover,
a:focus {
    text-decoration: none;
}

a {
    color: inherit;
    transition: color 0.3s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

button {
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    font: inherit;
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.3s cubic-bezier(0.16, 1, 0.3, 1), color 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

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

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

:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
}

#cookieConsentBanner {
    display: none;
}

@media (max-width: 768px) {
    h1 {
        font-size: clamp(1.75rem, 5vw, 2.25rem);
    }

    h2 {
        font-size: clamp(1.4rem, 4vw, 1.85rem);
    }

    h3 {
        font-size: clamp(1.2rem, 3.5vw, 1.5rem);
    }

    h4,
    h5,
    h6 {
        font-size: 1.1rem;
    }

    a,
    p,
    span {
        word-break: keep-all;
        overflow-wrap: break-word;
    }
}

/* ===== header_nav ===== */
.mobile-menu-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .3s cubic-bezier(0.4, 0, 0.2, 1);
}

.mobile-menu-panel.open {
    max-height: 360px;
}

/* ===== hero_section ===== */
#hero .hero-marquee-wrapper:hover .hero-marquee-track {
    animation-play-state: paused;
}

.hero-marquee-track {
    animation: heroMarqueeScroll 28s linear infinite;
}

@keyframes heroMarqueeScroll {
    0% {
        transform: translateX(0%);
    }

    100% {
        transform: translateX(-100%);
    }
}

/* ===== collection_catalog ===== */
#collection .js-product-card {
    width: 100%;
}

/* ===== magazine_section ===== */
#magazine {
    overflow: hidden
}

#magazine .js-toast.show {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto
}

/* ===== color_palette_interactive ===== */
#palette {
    hyphens: auto;
}

.palette-container {
    width: 100%;
}

/* ===== space_exposition ===== */
#exposition {
    overflow: hidden;
}

#exposition article {
    hyphens: auto;
}

/* ===== moodboard_builder ===== */
#moodboard {
    overflow: hidden;
}

.js-canvas-stage {
    touch-action: none;
}

/* ===== faq_guide ===== */
#faq .js-faq-content {
    will-change: max-height;
}

#faq .js-faq-trigger[aria-expanded="true"] .js-faq-icon {
    transform: rotate(180deg);
}

/* ===== inquiry_form ===== */
#inquiry {
    overflow: hidden;
}

#inquiry input:focus,
#inquiry select:focus,
#inquiry textarea:focus {
    background-color: #FFFFFF;
}

/* ===== footer_section ===== */
#footer {
    overflow: hidden;
}

#footer a {
    transition: color 0.2s ease-in-out;
}
/* Active tabs keep their contrast even while the pointer is over them. */
#collection .js-filter-btn.bg-\[\#19150E\],
#collection .js-filter-btn.bg-\[\#19150E\]:hover,
#palette .js-palette-tab[aria-selected="true"],
#palette .js-palette-tab[aria-selected="true"]:hover {
    background-color: #231F15;
    color: #FFFFFF;
    border-color: #231F15;
}

/* A single policy surface with a short gap below the site header. */
.legal-content-card > .legal-document {
    padding: 0;
    min-height: 0;
    background: transparent;
    color: var(--text-muted);
}
.legal-document-container { width: 100%; }

/* Consent is a viewport banner, independent of the footer layout. */
.cookie-banner[hidden], #cookie-preferences[hidden] { display: none; }
.cookie-banner {
    position: fixed;
    z-index: 100;
    left: 20px;
    right: 20px;
    bottom: 20px;
    max-width: 1180px;
    margin: 0 auto;
    padding: 20px 24px;
    border: 1px solid var(--border);
    border-radius: 16px;
    background: #FDFDFC;
    color: #231F15;
    box-shadow: 0 8px 36px #231F1529;
    max-height: calc(100dvh - 40px);
    overflow-y: auto;
}
.cookie-summary { display: flex; align-items: center; gap: 24px; justify-content: space-between; }
.cookie-banner h2, .cookie-banner h3 { font-size: 16px; font-weight: 700; margin: 0 0 8px; }
.cookie-banner p { font-size: 13px; line-height: 1.6; margin: 0; }
.cookie-banner a { text-decoration: underline; white-space: nowrap; }
.cookie-actions { display: flex; flex-wrap: wrap; gap: 8px; flex-shrink: 0; }
.cookie-banner button { padding: 10px 14px; border: 1px solid #D8D3C9; border-radius: 8px; background: #F5F3EB; color: #231F15; font-size: 12px; font-weight: 600; }
.cookie-banner button:hover { background: #EAE6DC; }
.cookie-banner .cookie-primary { background: #FCC52E; border-color: #FCC52E; }
.cookie-banner .cookie-primary:hover { background: #FBBA06; }
#cookie-preferences { border-top: 1px solid var(--border); padding-top: 16px; margin-top: 16px; }
#cookie-preferences label { display: flex; align-items: center; gap: 8px; font-size: 13px; margin: 12px 0; }
#cookie-preferences input { accent-color: #231F15; width: 16px; height: 16px; }
.cookie-reopen-wrap { max-width: 1280px; margin: 0 auto; padding: 0 32px 24px; }
.js-cookie-reopen { color: #C3BFB6; font-size: 12px; text-decoration: underline; }
@media (max-width: 767px) {
    .cookie-banner { left: 12px; right: 12px; bottom: 12px; padding: 16px; max-height: calc(100dvh - 24px); }
    .cookie-summary { flex-direction: column; align-items: stretch; gap: 12px; }
    .cookie-actions { gap: 6px; }
    .cookie-banner button { padding: 10px 12px; }
}