:root {
    --bg-primary: #F7F0E4;
    --bg-surface: #FFFDF7;
    --accent-primary: #E97851;
    --accent-contrast: #263B50;
    --accent-secondary: #E8CA78;
    --text-main: #302F2B;
    --text-muted: #6C685F;
    --border-soft: #E4D9C7;
    --font-primary: 'Noto Sans KR', sans-serif;
    --font-editorial: 'Noto Serif KR', serif;
}

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

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--font-primary);
    background-color: var(--bg-primary);
    color: var(--text-main);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    font-family: var(--font-editorial);
    font-weight: 700;
    line-height: 1.25;
}

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

a {
    color: inherit;
    transition: color 0.2s ease;
}

button {
    cursor: pointer;
    border: none;
    background: none;
    font-family: inherit;
    padding: 0;
}

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

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

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

/* Keep each book at its own height when another book's details expand. */
#catalog-grid {
    align-items: start;
}

#catalog-grid > .js-book-card {
    height: auto;
}

html.modal-open {
    overflow: hidden;
    overscroll-behavior: none;
}

#catalog-order-modal {
    z-index: 1000;
    overscroll-behavior: contain;
}

#catalog-order-modal .modal-panel {
    animation: catalogFadeIn 0.2s ease-out;
    overscroll-behavior: contain;
    max-height: calc(100dvh - 2rem);
}

.policy-page > main {
    padding: 0 0 3rem;
}

.policy-page > main > :first-child {
    padding-top: 2rem;
    padding-bottom: 3rem;
}

@media (min-width: 768px) {
    .policy-page > main > :first-child {
        padding-top: 3rem;
    }
}

#cookieConsentBanner {
    position: fixed;
    inset: auto 1rem 1rem;
    z-index: 900;
    max-width: 76rem;
    margin: 0 auto;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    border: 1px solid var(--border-soft);
    border-radius: 1rem;
    background: var(--bg-surface);
    color: var(--text-main);
    box-shadow: 0 8px 36px #263b5026;
    max-height: calc(100dvh - 2rem);
    overflow-y: auto;
}

#cookieConsentBanner[hidden] {
    display: none;
}

.cookie-copy {
    flex: 1;
    font-size: .875rem;
}

.cookie-copy h2 {
    margin-bottom: .4rem;
    font-size: 1.125rem;
    color: var(--accent-contrast);
}

.cookie-copy a {
    color: var(--accent-contrast);
    text-decoration: underline;
}

.cookie-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .625rem;
}

.cookie-actions button {
    padding: .65rem 1rem;
    border: 1px solid var(--accent-contrast);
    border-radius: .5rem;
    font-size: .8125rem;
    font-weight: 600;
    background: var(--bg-surface);
    color: var(--accent-contrast);
}

.cookie-actions [data-cookie-choice="all"] {
    background: var(--accent-contrast);
    color: var(--bg-surface);
}

@media (max-width: 640px) {
    #cookieConsentBanner {
        inset: auto .75rem .75rem;
        padding: 1rem;
        flex-direction: column;
        align-items: stretch;
        gap: 1rem;
    }

    .cookie-actions button {
        flex: 1;
    }
}

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

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

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

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

    h5,
    h6 {
        font-size: 1rem;
    }

    a[href^="mailto:"],
    a[href^="tel:"],
    .break-all-mobile {
        word-break: break-all;
        font-size: clamp(0.8125rem, 3vw, 0.9375rem);
    }
}

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

#header .js-mobile-menu.open {
    display: block;
}

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

#hero .js-hero-cta {
    text-decoration: none;
}

/* ===== catalog ===== */
#catalog {
    width: 100%;
    hyphens: auto;
}

#catalog input::placeholder,
#catalog textarea::placeholder {
    color: var(--text-muted);
    opacity: 0.7;
}

#catalog .modal-panel {
    animation: catalogFadeIn 0.2s ease-out;
}

@keyframes catalogFadeIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ===== reading_mood ===== */
#reading-mood {
    overflow: hidden;
    hyphens: auto;
}

#reading-mood .js-mood-btn.active {
    background-color: var(--accent-contrast, #263B50);
    color: #FFFDF7;
}

#reading-mood .js-mood-btn.active i {
    color: var(--accent-secondary, #E8CA78);
}

#reading-mood .js-mood-btn.active span {
    color: #FFFDF7;
}

/* ===== editors_shelf ===== */
#editors-shelf {
    word-break: keep-all;
    hyphens: auto;
}

#editors-shelf .js-shelf-item.is-selected {
    border-color: var(--accent-primary) !important;
    box-shadow: 0 10px 25px -5px rgba(233, 120, 81, 0.25);
    transform: translateY(-4px);
}

/* ===== book_preview ===== */
#book-preview {
    hyphens: auto;
    word-break: keep-all;
}

#book-preview .js-book-spread {
    width: 100%;
}

/* ===== about_service ===== */
#about-service {
    overflow: hidden;
}

#about-service h2,
#about-service h3,
#about-service p {
    hyphens: auto;
}

/* ===== contact_form ===== */
#contact-form input::placeholder,
#contact-form textarea::placeholder {
    color: #6C685F;
    opacity: 0.8;
}

#contact-form select {
    background-color: #FFFDF7;
}

#contact-form {
    hyphens: auto;
}

/* ===== footer ===== */
#footer {
    hyphens: auto;
}

#footer a {
    transition: color 0.2s ease-in-out;
}