:root {
    --primary-dark-green: #1B4332;
    --forest-green-hover: #143326;
    --accent-warm-gold: #D4A373;
    --sand-light-yellow: #FBF7EE;
    --sand-card-bg: #F5EFE1;
    --sand-border: #E6DEC8;
    --text-dark: #1D2A20;
    --text-muted: #556556;
    --text-light: #FFFFFF;
    --badge-bg: #EAE3D2;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: 'Noto Sans KR', sans-serif;
    background-color: var(--sand-light-yellow);
    color: var(--text-dark);
    line-height: 1.6;
    font-weight: 400;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

a,
a:hover,
a:focus {
    text-decoration: none;
    transition: color 250ms ease-in-out, opacity 250ms ease-in-out;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    transition: all 250ms ease-in-out;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin-top: 0;
    margin-bottom: 0.5rem;
    font-weight: 700;
    line-height: 1.25;
}

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

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

:focus-visible {
    outline: 2px solid var(--accent-warm-gold);
    outline-offset: 2px;
}

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

    h2 {
        font-size: clamp(1.5rem, 4.5vw, 1.875rem);
    }

    h3 {
        font-size: clamp(1.25rem, 4vw, 1.5rem);
    }

    h4 {
        font-size: clamp(1.1rem, 3.5vw, 1.25rem);
    }

    h5 {
        font-size: clamp(1rem, 3vw, 1.1rem);
    }

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

/* ===== header ===== */
header#header {
    overflow: visible;
}

.js-mobile-dropdown.open {
    display: block;
}

/* ===== hero ===== */
#hero {
    overflow: hidden;
}

#hero h1,
#hero p,
#hero span {
    hyphens: auto;
}

/* ===== categories ===== */
#categories {
    overflow: hidden;
    hyphens: auto;
}

#categories .js-category-card {
    min-height: 100%;
    text-decoration: none;
}

#categories img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* ===== catalog ===== */
.catalog-section {
    word-break: keep-all;
    hyphens: auto;
}

.catalog-section select option {
    background-color: #F5EFE1;
    color: #1D2A20;
}

/* ===== adventure_types ===== */
#adventure-types {
    hyphens: auto
}

#adventure-types img {
    object-fit: cover
}

/* ===== gear_comparison ===== */
#gear-comparison {
    overflow: hidden;
}

#gear-comparison th,
#gear-comparison td {
    vertical-align: middle;
}

@media (max-width: 767px) {
    #gear-comparison .js-compare-col.is-hidden-mobile {
        display: none;
    }

    #gear-comparison .js-compare-col.is-active-mobile {
        display: table-cell;
    }
}

/* ===== checklist ===== */
#checklist .checklist-card {
    width: 100%;
    transition: background-color 0.25s ease, border-color 0.25s ease;
}

#checklist .is-completed {
    opacity: 0.65;
    border-color: var(--sand-border, #E6DEC8);
}

#checklist .is-completed .checklist-title {
    text-decoration: line-through;
    color: var(--text-muted, #556556);
}

#checklist input[type="checkbox"] {
    accent-color: var(--primary-dark-green, #1B4332);
}

/* ===== knowledge_hub ===== */
#knowledge-hub {
    hyphens: auto;
}

/* ===== why_choose ===== */
#why-choose {
    overflow: hidden;
    width: 100%;
}

#why-choose h2,
#why-choose h3 {
    hyphens: auto;
    word-break: keep-all;
}

/* ===== order_form ===== */
#order-form input::placeholder,
#order-form textarea::placeholder {
    color: #8A988B;
    opacity: 1;
}

#order-form input:focus,
#order-form select:focus,
#order-form textarea:focus {
    border-color: #1B4332;
    box-shadow: 0 0 0 1px #1B4332;
}

#order-form .break-keep {
    word-break: keep-all;
    hyphens: auto;
}

/* ===== footer ===== */
#footer {
    background-color: #1B4332;
    color: #FFFFFF;
    hyphens: auto;
}

#footer a {
    color: inherit;
}