:root {
    --bg-main: #f8fafc;
    --surface-main: #ffffff;
    --surface-muted: #f1f5f9;
    --border-main: #e2e8f0;
    --text-primary: #0f172a;
    --text-secondary: #475569;
    --text-muted: #64748b;
    --brand-primary: #2563eb;
    --brand-primary-hover: #1d4ed8;
    --brand-accent: #dc2626;
    --brand-accent-hover: #b91c1c;
    --bg-dark: #090d16;
}

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

html {
    font-family: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background-color: var(--bg-main);
    color: var(--text-primary);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

body {
    min-height: 100vh;
    line-height: 1.65;
    background-color: var(--bg-main);
    color: var(--text-primary);
    font-size: 1rem;
    overflow-x: hidden;
    max-width: 100vw;
}

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

button {
    cursor: pointer;
    border: none;
    background: none;
    font: inherit;
    color: inherit;
}

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

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

h1,
h2,
h3,
h4,
h5,
h6 {
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: inherit;
}

input,
textarea,
select,
button {
    font-family: inherit;
    font-size: inherit;
}

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

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

    h2 {
        font-size: clamp(1.35rem, 4vw, 1.75rem);
        line-height: 1.3;
    }

    h3 {
        font-size: clamp(1.15rem, 3.5vw, 1.35rem);
        line-height: 1.35;
    }

    h4,
    h5,
    h6 {
        font-size: 1rem;
        line-height: 1.4;
    }

    input,
    textarea,
    .email-display,
    .url-display {
        font-size: 0.9375rem;
        word-break: break-all;
    }
}

@media (max-width: 640px) {
    body {
        font-size: 0.9375rem;
    }

    h1 {
        font-size: 1.625rem;
    }

    h2 {
        font-size: 1.25rem;
    }
}

/* ===== header_nav_block ===== */
#header-section {
    overflow: visible;
}

/* ===== hero_main_block ===== */
#hero-section {
    overflow: hidden;
    hyphens: auto;
}

#hero-section a {
    text-decoration: none;
}

/* ===== main_editorial_block ===== */
#main-editorial {
    overflow: hidden;
}

#main-editorial img {
    object-fit: cover;
}

/* ===== comparison_block ===== */
#learning-comparison {
    overflow: hidden;
    hyphens: auto
}

#learning-comparison .ri-scales-3-line,
#learning-comparison .ri-building-line,
#learning-comparison .ri-sparkling-line,
#learning-comparison .ri-close-circle-line,
#learning-comparison .ri-checkbox-circle-line {
    vertical-align: middle;
    display: inline-block
}

/* ===== ecosystem_block ===== */
#digital-ecosystem {
    hyphens: auto;
    word-break: keep-all;
}

/* ===== daily_timeline_block ===== */
#daily-routine {
    hyphens: auto;
}

#daily-routine .js-timeline-item {
    transition: transform 0.2s ease-in-out;
}

/* ===== multimedia_block ===== */
#multimedia-environment {
    position: relative;
    background-color: var(--bg-main, #f8fafc);
    color: var(--text-primary, #0f172a);
    hyphens: auto;
}

#multimedia-environment img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

#multimedia-environment ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ===== format_cards_block ===== */
#format-breakdown {
    position: relative;
    background-color: #f8fafc;
    color: #0f172a
}

#format-breakdown .js-modal-overlay {
    animation: modalFadeIn 0.2s ease-out forwards
}

@keyframes modalFadeIn {
    from {
        opacity: 0.8
    }

    to {
        opacity: 1
    }
}

/* ===== dual_analysis_block ===== */
#convenience-analysis {
    hyphens: auto;
}

#convenience-analysis h2,
#convenience-analysis h3,
#convenience-analysis h4 {
    line-height: 1.25;
}

/* ===== teacher_role_block ===== */
#teacher-transformation {
    overflow: hidden;
    hyphens: auto;
}

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

/* ===== tech_trends_block ===== */
#tech-perspectives {
    overflow: hidden;
}

#tech-perspectives h2,
#tech-perspectives h3 {
    word-break: keep-all;
}

/* ===== newsletter_block ===== */
#newsletter-section input::placeholder {
    color: #64748b;
    opacity: 1;
}

#newsletter-section input:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* ===== additional_articles_block ===== */
#additional-materials {
    word-break: keep-all;
    hyphens: auto;
}

#additional-materials .line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ===== footer_block ===== */
#footer-section {
    background-color: #090d16;
    color: #f8fafc;
    overflow: hidden;
    width: 100%;
}

#footer-section a {
    text-decoration: none;
}

#footer-section button {
    cursor: pointer;
}