/* 폰트 */


/* 프리텐다드 */

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Thin.woff2') format('woff2');
    font-weight: 100;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Light.woff2') format('woff2');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Regular.woff2') format('woff2');
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Medium.woff2') format('woff2');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Bold.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-display: swap;
}

@font-face {
    font-family: 'Pretendard';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/pretendard@1.0/Pretendard-Black.woff2') format('woff2');
    font-weight: 900;
    font-display: swap;
}

/* 마루부리 */

@font-face {
    font-family: 'MaruBuri';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.woff2);
    font-weight: 200;
    font-display: swap;
}

@font-face {
    font-family: 'MaruBuri';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.woff2);
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'MaruBuri';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Regular.woff2);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'MaruBuri';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'MaruBuri';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff2);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'MaruBuri';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Light.woff2);
    font-weight: 400;
    font-display: swap;
}
@font-face {
    font-family: 'MaruBuri';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-ExtraLight.woff2);
    font-weight: 400;
    font-display: swap;
}

@font-face {
    font-family: 'MaruBuri';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-SemiBold.woff2);
    font-weight: 600;
    font-display: swap;
}

@font-face {
    font-family: 'MaruBuri';
    src: url(https://hangeul.pstatic.net/hangeul_static/webfont/MaruBuri/MaruBuri-Bold.woff2);
    font-weight: 700;
    font-display: swap;
}


/* 학교안심 둥근미소*/

@font-face {
    font-family: 'SchoolSafetyRoundedSmile';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-R.woff2') format('woff2');
    font-weight: normal;
    font-display: swap;
}

@font-face {
    font-family: 'SchoolSafetyRoundedSmile';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/2408-5@1.0/HakgyoansimDunggeunmisoTTF-B.woff2') format('woff2');
    font-weight: 700;
    font-display: swap;
}


/* CSS Custom Properties - Color Tokens */
:root {
    /* Primary Colors */
    --primary-ink: #222;
    --primary-green: #2D8C6D;
    --primary-teal: #3AAFA9;
    --accent-yellow: #F3C433;
    --bg-ivory: #F7F5EF;
    --line-warm: #E7E2D9;
    
    /* Additional Colors */
    --white: #ffffff;
    --black: #000000;
    --gray-50: #fafafa;
    --gray-100: #f5f5f5;
    --gray-200: #e5e5e5;
    --gray-300: #d4d4d4;
    --gray-400: #a3a3a3;
    --gray-500: #737373;
    --gray-600: #525252;
    --gray-700: #404040;
    --gray-800: #262626;
    --gray-900: #171717;
    
    /* Status Colors */
    --success: #10b981;
    --warning: #f59e0b;
    --error: #ef4444;
    --info: #3b82f6;
    
    /* Typography */
    --font-primary: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-title: 'Nanum Myeongjo', serif;
    
    /* Spacing */
    --spacing-xs: 0.5rem;    /* 8px */
    --spacing-sm: 0.75rem;   /* 12px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-2xl: 2.5rem; /* 40px */
    --spacing-3xl: 3rem;     /* 48px */
    --spacing-4xl: 4rem;     /* 64px */
    
    /* Layout */
    --container-max-width: 1280px;
    --header-height: 80px;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    
    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
}

/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-family: 'Pretendard';
    scroll-behavior: smooth;
    font-size: 16px;
}

body {
    font-family: 'Pretendard';
    font-size: 1rem;
    line-height: 1.6;
    color: var(--primary-ink);
    background-color:#4ea3fa;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    overflow-x: hidden;
}

/* Typography */
/* h1, h2, h3, h4, h5, h6 { 
    font-weight: 700;
    line-height: 1.3;
    color: var(--primary-ink);
}

h1 {
    font-size: 2.5rem;
}

h2 {
    font-size: 2rem;
}

h3 {
    font-size: 1.5rem;
}

h4 {
    font-size: 1.25rem;
}

p {
    margin-bottom: var(--spacing-md);
} */

a {
    color: var(--primary-green);
    text-decoration: none;
    transition: var(--transition-fast);
}

a:hover {
    color: var(--primary-teal);
}

/* Layout Utilities */
.container {
    max-width: var(--container-max-width);
    margin: 100px auto;
    padding: 0 var(--spacing-xl);
}

.section-header {
    text-align: center;
    margin-bottom: var(--spacing-4xl);
}


.section-subtitle {
    font-size: 22px;
    color: #fff;
    margin-top: 20px;
}

/* Header */
.app-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header-height);
    background: var(--white);
    border-bottom: 1px solid var(--line-warm);
    z-index: 1000;
    backdrop-filter: blur(10px);
    background-color: rgba(255, 255, 255, 0.95);
}

.header-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: 0 var(--spacing-xl);
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.campaign-logo {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-weight: 600;
    color: var(--primary-green);
}

.campaign-logo i {
    font-size: 1.5rem;
}

.header-nav {
    display: flex;
    align-items: center;
    gap: var(--spacing-2xl);
}

.nav-link {
    font-weight: 500;
    color: var(--gray-700);
    transition: var(--transition-fast);
}

.nav-link:hover {
    color: var(--primary-green);
}

.cta-button {
    background-color: transparent;
    color: var(--primary-green);
    border: 2px solid var(--primary-green);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 6px;
    font-weight: 600;
    transition: var(--transition-fast);
}

.cta-button:hover {
    background: var(--primary-green);
    color: var(--white);
}

/* Hero Section */
.hero-section {
    height: 100vh;
    display: flex;
    align-items: center;
    /* padding-top: var(--header-height); */
    position: relative;
    background:url(../img/main-bg.png);
    background-position: right;
    background-repeat: no-repeat;
    background-size: cover;
}

.hero-container {
    max-width: var(--container-max-width);
    margin: 0 auto;
    padding: var(--spacing-4xl) var(--spacing-xl);
    display: grid;
    grid-template-columns: 1fr 2fr;
    gap: 100px;
    align-items: end;
}

.book-cover-card {
    background: linear-gradient(135deg, var(--white) 0%, var(--bg-ivory) 100%);
    border-radius: 12px;
    padding: var(--spacing-3xl);
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
    border: 1px solid var(--line-warm);
}

.book-spine {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 40px;
    background: linear-gradient(90deg, var(--primary-green) 0%, var(--primary-teal) 100%);
    border-radius: 8px 0 0 8px;
}

.book-cover-content {
    margin-left: var(--spacing-lg);
}


.subtitle {
    font-size: 1.5rem;
    color: var(--gray-600);
    font-weight: 400;
}


.hero-content {
    margin-bottom: var(--spacing-3xl);
}

.hero-title {
    font-size: 3rem;
    margin-bottom: var(--spacing-lg);
    line-height: 1.2;
}

.hero-subtitle {
    font-size: 1.25rem;
    color: var(--primary-green);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.hero-description {
    font-size: 1rem;
    color: var(--gray-600);
    margin-bottom: var(--spacing-2xl);
}

.hero-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--primary-green);
    color: var(--white);
    padding: var(--spacing-lg) var(--spacing-2xl);
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.125rem;
    transition: var(--transition-fast);
    box-shadow: var(--shadow-md);
}

.hero-cta:hover {
    background: var(--primary-teal);
    color: var(--white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.stat-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 10px 30px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid var(--line-warm);
    box-shadow: var(--shadow-sm);
}

.stat-item {
    text-align: center;
}

.stat-number {
    display: block;
    font-size: 20px;
    font-weight: 600;
    line-height:1.3;
    color: #333; 
}

.stat-label {
    font-size: 0.875rem;
    color: var(--gray-600);
}

.vr {width:1px;height:30px;background:#ccc;}

/* .scroll-indicator {
    position: absolute;
    bottom: var(--spacing-xl);
    left: 50%;
    transform: translateX(-50%);
    color: var(--gray-400);
    font-size: 1.5rem;
    animation: bounce 2s infinite;
} 

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateX(-50%) translateY(0);
    }
    40% {
        transform: translateX(-50%) translateY(-10px);
    }
    60% {
        transform: translateX(-50%) translateY(-5px);
    }
}


*/

.scroll-indicator {
    margin-top:30px;
    color: #333;
    font-size: 18px;
    animation: bounce 2s infinite; 
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        transform: translateY(0);
    }
    40% {
        transform: translateY(-10px);
    }
    60% {
        transform: translateY(-5px);
    }
}


/* Example Card */
.example-card {
    background: var(--bg-ivory);
    padding: var(--spacing-xl);
    border-radius: 12px;
    border: 1px solid var(--line-warm);
    text-align: center;
}

.example-image {
    background: var(--gray-200);
    padding: var(--spacing-3xl);
    border-radius: 8px;
    margin-top: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    color: var(--gray-500);
}

.example-image i {
    font-size: 2rem;
}

/* Winner Announcement */
.winner-announcement {
    text-align: center;
}

.announcement-card {
    background: var(--white);
    padding: var(--spacing-2xl);
    border-radius: 12px;
    border: 1px solid var(--line-warm);
    max-width: 500px;
    margin: 0 auto;
}

.announcement-card i {
    font-size: 2.5rem;
    color: var(--accent-yellow);
    margin-bottom: var(--spacing-lg);
}

.announcement-card h4 {
    color: var(--primary-green);
    margin-bottom: var(--spacing-md);
}

.announcement-card p {
    margin-bottom: var(--spacing-sm);
    color: var(--gray-700);
}

.announcement-card p:last-child {
    margin-bottom: 0;
}

/* Report Info */
.report-info {
    display:flex;flex-direction: column; gap:10px; align-items: center;justify-content: center;
    background-color: #fff;
    padding: var(--spacing-xl);
    border-radius: 8px;
    margin-top: var(--spacing-xl); 
    font-size:20px;
}

.report-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background:#ff684e;
    color: #fff;
    padding: 10px 20px;
    border-radius: 50px;
    font-weight: 600; 
}

.report-badge i {
    font-size: 18px;
}

/* Footer */
.public-footer {
    background:#333;
    color: var(--white);
    padding: 1px 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
}

.footer-info p {
    margin-bottom: var(--spacing-sm);
    color: var(--gray-300);
}

.footer-info p:last-child {
    margin-bottom: 0;
}

.footer-badge {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    background: var(--accent-yellow);
    color: var(--primary-ink);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: 20px;
    font-weight: 600;
}

.footer-badge i {
    font-size: 1.25rem;
}

/* Toast Notifications */
.toast-container {
    position: fixed;
    top: 100px;
    right: var(--spacing-xl);
    z-index: 2000;
    max-width: 400px;
}

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-normal);
    z-index: 3000;
}

.modal-overlay.open {
    opacity: 1;
    pointer-events: auto;
}

.modal-content {
    position: relative;
    width: min(520px, 100%);
    background: var(--white);
    border-radius: 12px;
    box-shadow: var(--shadow-xl);
    padding: var(--spacing-2xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xl);
}

.modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-green);
    text-align: center;
}

.modal-body {
    color: var(--gray-700);
    line-height: 1.6;
}

.modal-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    font-size: 1rem;
}

.modal-list li {
    word-break: keep-all;
}

.modal-list strong {
    display: inline-block;
    min-width: 120px;
    color: var(--primary-ink);
}

.modal-footer {
    display: flex;
    justify-content: center;
}

.modal-confirm-btn {
    background: var(--primary-green);
    color: var(--white);
    border: none;
    border-radius: 999px;
    padding: var(--spacing-sm) var(--spacing-xl);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: var(--transition-fast);
}

.modal-confirm-btn:hover {
    background: var(--primary-teal);
}

.modal-close-btn {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    background: transparent;
    border: none;
    color: var(--gray-500);
    font-size: 1.5rem;
    cursor: pointer;
    transition: color var(--transition-fast);
}

.modal-close-btn:hover {
    color: var(--primary-ink);
}

body.modal-open {
    overflow: hidden;
}

.toast {
    background: var(--white);
    border: 1px solid var(--line-warm);
    border-radius: 8px;
    padding: var(--spacing-lg);
    margin-bottom: var(--spacing-md);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    animation: slideIn 0.3s ease;
}

.toast.leaving {
    opacity: 0;
    transition: opacity 0.2s ease;
}

.toast.error {
    border-left: 4px solid var(--error);
}

.toast.success {
    border-left: 4px solid var(--success);
}

.toast.warning {
    border-left: 4px solid var(--warning);
}

.toast.info {
    border-left: 4px solid var(--info);
}

.toast i {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.toast.error i {
    color: var(--error);
}

.toast.success i {
    color: var(--success);
}

.toast.warning i {
    color: var(--warning);
}

.toast.info i {
    color: var(--info);
}

.toast-content {
    flex: 1;
}

.toast-title {
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
}

.toast-message {
    font-size: 0.875rem;
    color: var(--gray-600);
    margin-bottom: 0;
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}





/* Book */

.book {
    display: flex; flex-direction: column;justify-content: space-between;align-items: center;
    height:80vh; padding:60px;
    background:#fcfcfc;
    font-family: 'Maruburi';
    box-shadow: 5px 5px 15px #0267da33; 
    border-radius:5px;
    position:relative;
}

.book::before {
    display: block;content: "";
    width:8px;height:97%;
    position:absolute;
    top:50%;left:20px;transform: translateY(-50%);
    box-shadow: -8px 0 8px #00000015;
}

.book h3 {font-size:18px;text-align: center;}

.book-tt {
    border-top:3px solid #2fa9ff;
    text-align: center;
    width:480px;
    margin:0 auto;
}

.book-title {
    display: flex; gap:20px; justify-content: center;align-items: center;
    padding: 20px 0;
}

.book-title span {
    font-weight:600;font-size: 20px;line-height:1.1;letter-spacing: 0.2em;
    padding:15px 8px;
    background:#999; color:#fff;
    border-radius: 100px;
    writing-mode: vertical-lr;
}

.book-title h2 {
    font-size:80px; font-weight: 900;
}

.book-title h2 em {
    font-size:60px;
}

.book-tt div p {
    width: 100%; padding:3px;
    background:#2fa9ff;color:#fff;
    font-size:30px; font-weight:600;
}

.book-written {
    font-family: 'Pretendard';
    font-weight: 600; font-size:18px; line-height:1.3;
    word-break: keep-all;
    color:#555;
    padding:20px 0;
}

.book-written em {
    font-size:16px;
}

.book-bt {
    font-size:20px; font-weight: 700;
}



.book-right {
    display: flex;
    flex-direction: column;
    gap:20px;
    margin-bottom:50px;
    position:relative;
}


.book-right h3 {
    font-family: 'NanumSquareRound';
    font-size:36px;line-height:1.3;
    color:#fff;
}


.book-right h3 em {
    font-size:28px;
    color:#fff27d;
}

@font-face {
    font-family: 'NanumSquareRound';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}


.book-right span {
    font-size:22px;
    font-family: 'NanumSquareRoundB';
    background:#0876e4; color:#fff;
    width:fit-content;
    padding:5px 10px;
}


.main-child {
    position:absolute;
    transform: translate(-50%,-50%);
}

.main-student {
    width:60%;
    top:-30px;left:280px;
}

.main-child1 {
    top:-80px; right:-30px;
    animation: updown 2.5s infinite;
    animation-delay: 0.5s;
}

.main-child2 {
    top:-200px; left:100px;
    animation: updown 2.5s infinite;
}


/* @keyframes updown {
    0% {
        transform: translateX(-50%) translateY(-50%);
    }
    50% {
        transform: translateX(-50%) translateY(-60%);
    }
    100% {
        transform: translateX(-50%) translateY(-50%);
    }
} */




/* 하위메뉴 */

/* 공통 제목 */

@font-face {
    font-family: 'Cafe24Surround';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/Cafe24Ssurround.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

.section-title {
    font-family:'Cafe24Surround';
    font-size:50px;
    color:#fff;
    position: relative;
    width:fit-content;
    margin:0 auto;
    line-height:1.2;
    padding:0 10px;
    border-bottom:3px solid #fff068;
}

.section-title em {
    color:#fff068;
}

.section-title::after {
    display: block;content: "";
    width:60px;aspect-ratio: 1/1;
    background: url(../img/pencil.png);
    background-size: contain;
    position: absolute;
    bottom:0;right:-60px;
}


/* 캠페인 안내 */

/* Campaign Info Section */
.campaign-info { 
    background-color: #4ea3fa;
}

.info-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap:15px;
}

.info-card {
    background-color: #fff;
    padding: 40px;
    border-radius: 15px; 
    text-align: center;
}

.info-card figure {width:35%;margin:0 auto 10px;}
.info-card figure img {width:100%;height:100%;object-fit: cover;}

.info-card:nth-child(4) {background:#d4efff;}

.info-card h3 {
    font-size:30px;
    font-weight:700; 
    color:#333;
    font-family:'cafe24surround';
    margin-bottom:10px;
}

.info-card p {
    font-size:20px;
    line-height:1.3;
    font-weight:500;
}

.info-card small {
    font-size:16px;
    color:#999;
    word-break: keep-all;
}

.info-card a {
    display: flex;align-items: center;
    width:fit-content;margin:40px auto 0;
    font-size:22px;font-weight:700;
    background:#2fa9ff; color:#fff;
    padding:10px 30px;
    border-radius: 100px;
}

div.toast.info {align-items: center;}


/* 참여방법 */

.stepper-container {
    display: grid;grid-template-columns: 1fr 1fr;gap:15px;
}

.step-card {
    background:#fff;
    padding:40px;
    border-radius:15px;
}
.step-card:last-child {
    background:#def3ff;
}

.step-tt {
    display: flex;
    gap:10px;
    align-items: center;
    margin-bottom:10px;
}

.step-tt figure {width:30px;}
.step-tt h4 {
    font-size: 30px;
    color:#fff;
    font-family:'cafe24surround';
    position: relative;
    z-index:2;
    line-height: 65px;
}
.step-tt h4::after {
    display: block;content: "";
    position: absolute;
    top:0;left:-45px;
    width:200px; height:60px;
    background:#0876e4;
    z-index: -1;
} 

.step-content span {
    font-size:20px;
    font-weight:500;
}

.step-content p {
    font-size:18px; 
    word-break: keep-all;line-height:1.3;
}


/* 퀴즈 */


/* Quiz Section */
.quiz-section {
    /* background: linear-gradient(to bottom, #4ea3fa, #2c6de7 ); */
    background:#4ea3fa;
    padding-bottom:1px;
}

.quiz-card {
    background:#fff;
    border-radius:10px;
    box-shadow: 0 0 15px #00000033;
    
}

.quiz-container {
    display: flex;flex-direction: column;
    gap:20px;
}

.quiz-card-t {
    position:relative;
    z-index:6;
    padding:60px 60px 90px;
}
.quiz-card-b {
    position: relative;
    z-index:5;
    padding:90px 60px 60px;
}

.quiz-card-t::before {
    display: block;
    content: "";
    width:250px;
    height:80px;
    background:url(../img/spring.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position:absolute;
    left:50px;
    bottom:-10px;
    transform: translateY(50%);
    z-index: 10;
}

.quiz-card-t::after {
    display: block;
    content: "";
    width:250px;
    height:80px;
    background:url(../img/spring.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    position:absolute;
    right:50px;
    bottom:-10px;
    transform: translateY(50%);
    z-index: 10;
}

.quiz-tt {margin-bottom:30px;}
.quiz-tt h4 {
    font-size:20px;
    padding:3px 20px;width:fit-content;
    background:#2fa9ff; color:#fff;
    border-radius: 100px;
    margin-bottom:5px;
}

.quiz-tt p {font-size:26px;font-weight:500;word-break: keep-all;}
.quiz-tt p em {background:#fff89d;padding:2px;}

.quiz-q {
    border:1px solid #ccc;
    border-radius:15px;
    padding:40px;
}

.quiz-q figure {border-radius: 10px;overflow: hidden;}
#quiz3 .quiz-q {padding:0;border:0;}

.quiz-q p {
    font-size:20px;
    font-weight:400;
    word-break: keep-all;
}

.quiz-q p strong {
    font-weight:600;
}


.quiz-header {
    text-align: center;
    margin-bottom: var(--spacing-xl);
}

.quiz-number {
    display: inline-block;
    background: var(--primary-green);
    color: var(--white);
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
}

.quiz-title {
    margin-bottom: var(--spacing-xl);
    line-height: 1.5;
}

.quiz-passage {
    background: var(--bg-ivory);
    padding: var(--spacing-xl);
    border-radius: 8px;
    margin-bottom: var(--spacing-xl);
    border: 1px solid var(--line-warm);
}

.quiz-passage p {
    margin-bottom: var(--spacing-md);
}

.quiz-passage p:last-child {
    margin-bottom: 0;
}

.quiz-options {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-xl);
}

.radio-option {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: 20px 25px;
    background: #fffddd;
    border: 2px solid #ffd988;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.1s;
    position: relative;
}

.radio-option:hover {
    border-color: #ffc954;
    background-color: #fff1c3;
    transition:0.1s
}

.radio-option input[type="radio"] {
    position: absolute;
    opacity: 0;
}

.radio-custom {
    width: 25px;
    height: 25px;
    /* border: 2px solid #666; */
    border-radius: 50%;
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
    transition: var(--transition-fast);
    position:absolute;
    transform: translateY(-5px);
}

.radio-option input[type="radio"]:checked + .radio-custom  {
    background:url(../img/check.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* .radio-option input[type="radio"]:checked + .radio-custom {
    border-color: #ffc163;
    background-color: #ffc163;
}

.radio-option input[type="radio"]:checked + .radio-custom::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 8px;
    height: 8px;
    background: var(--white);
    border-radius: 50%;
} */


.radio-option input[type="radio"]:checked ~ .option-text { 
    font-weight: 700;
    color:#333
}

.radio-option.is-correct {
    border-color: #22c55e;
    background-color: rgba(34, 197, 94, 0.15);
}

.radio-option.is-wrong {
    border-color: #ef4444;
    background-color: rgba(239, 68, 68, 0.12);
}

.option-text {
    flex: 1;
    line-height: 1.4;
    font-size:20px;
    font-weight:500;
    color:#333;
    word-break: keep-all;
    display: flex;align-items: center;gap:5px;
}

.check-answer-btn {
    background: #ddd;
    color: #888; 
    padding:20px 30px;
    border-radius: 100px;
    font-weight: 600;
    font-size:20px;
    cursor: not-allowed;
    transition: var(--transition-fast);
    width: 100%;
    max-width: 200px;
    display: block;
    margin: 0 auto;
}

.check-answer-btn.is-correct {
    background: #2fa9ff;
    color: #fff;
    cursor: default;
}

.check-answer-btn.is-ready {
    background:#2fa9ff;
    color: var(--white);
    cursor: pointer;
}

.check-answer-btn.is-ready:hover {
    background-color:#0e90ec;
}

/* Explanation Drawer */
.explanation-drawer {
    max-height: 0;
    overflow: hidden;
    transition: max-height var(--transition-slow);
    margin-top:0;
}

.explanation-drawer.open {
    max-height: 1000px;
    margin-top: var(--spacing-xl);
}

.explanation-content {
    background:#f6f6f6;
    padding: var(--spacing-xl);
    border-radius: 8px;
    border: 1px solid var(--line-warm);
}

.explanation-content h4 {
    font-size:20px;
    color:#333;
    margin-bottom:20px;
}

.explanation-text {
    margin-bottom: 20px;
}

.explanation-text p {
    margin-bottom: var(--spacing-md);
    font-size:18px;
}

.source {
    color: #bbb;
    font-size: 14px; 
}

.next-quiz-btn, .entry-cta {
    display: flex;
    align-items: center;
    line-height:1;
    background-color: #2fa9ff;
    color: #fff; 
    padding: 15px 20px;
    border-radius: 5px;
    font-weight: 500;
    cursor: pointer;
    font-size:16px;
    transition: var(--transition-fast);
    margin-top: 20px;
    gap:5px;
}

.next-quiz-btn i, .entry-cta i {
    font-size:18px;
}

.next-quiz-btn:hover, .entry-cta:hover {
    background:#0e90ec;
}

.quiz-underline em {border-bottom:1px solid #666}

.section-title2::after {
    display: block;
    content: "";
    width: 60px;
    aspect-ratio: 1 / 1;
    background: url(../img/pencil2.png);
    background-size: contain;
    position: absolute;
    bottom: 0;
    right: -60px;
}

.section-title2 {
    border-bottom:3px solid #157fff;
}


/* Entry Section */
.entry-section {
    padding: 1px 0;
    background:#5b74d1;
}

.consent-form {
    max-width: 600px;
    margin: 0 auto;
}

.consent-section {
    margin-bottom: var(--spacing-xl);
}

.checkbox-option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
    padding: var(--spacing-lg);
    background: #fff; 
    border-radius: 8px;
    cursor: pointer;
    transition: var(--transition-fast);
}


.checkbox-option input[type="checkbox"] {
    position: absolute;
    opacity: 0;
}

.checkbox-custom {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gray-400);
    border-radius: 4px;
    position: relative;
    flex-shrink: 0;
    margin-top: 2px;
    transition: var(--transition-fast);
}

.checkbox-option input[type="checkbox"]:checked + .checkbox-custom {
    border-color: #0876e4;
    background:#0876e4;
}

.checkbox-option input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: var(--white);
    font-weight: bold;
    font-size: 12px;
}

.consent-text {
    flex: 1;
    line-height: 1.5;
    position: relative;
}

.consent-detail {
    background: none;
    border: none;
    color: #0876e4;
    text-decoration: underline;
    cursor: pointer;
    font-size: inherit;
    padding: 0;
    margin-left: var(--spacing-xs);
}

.form-fields {
    margin-bottom: var(--spacing-xl);
}

.form-group {
    margin-bottom: var(--spacing-lg);
}

.form-group label {
    display: block;
    font-weight: 600;
    margin-bottom: 10px;
    color: #fff;
    font-size:18px;
}

.form-group input {
    width: 100%;
    padding: var(--spacing-lg);
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    transition: var(--transition-fast);
    background: var(--white);
}


.form-group input::placeholder {
    color: var(--gray-400);
}

.submit-btn {
    width: 100%;
    background: #3e5bc8;
    color: var(--white);
    border: none;
    padding: var(--spacing-lg);
    border-radius: 8px;
    font-weight: 600;
    font-size: 1.125rem;
    cursor: pointer;
    transition: var(--transition-fast);
}

.submit-btn:not(:disabled):hover {
    background: #344fb3;
}

.submit-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}



/* Partners Section */
.partners-section {
    padding: 1px 0;
    background:#fa8b54;
}

.partners-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr ;
    gap: 15px; 
}

.partner-card {
    display: flex; 
    justify-content: space-between;
    align-items: center;
    background: var(--white);
    padding: 25px 30px;
    border-radius: 10px; 
    transition: var(--transition-normal);
}

.partner-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.partner-logo {
    width: 150px;height:25px;
    display: flex;
    align-items: center;
    justify-content: center;  
}

.partner-card h4 {
    font-size:20px;
    font-weight:500;
    color:#666;
}

.partner-link {
    display: flex;
    align-items: center;
    gap:5px;
    background: #feb821;
    color: #fff;
    padding: 8px 20px;
    border-radius: 6px;
    font-size: 16px;
    font-weight: 600;
    transition: var(--transition-fast);
}

.partner-link:hover {
    background: #fea321; 
    color:#fff;
}

#explanation3 .explanation-text p {margin-bottom:10px;}
.exp-box {padding:10px 15px; border:1px solid #ccc; background:#fff;font-size:16px;display:inline-block;border-radius: 5px;color:#555;margin-bottom:15px;;}




@media (max-width:1300px) {

    .hero-container {grid-template-columns: 1fr 1fr;}
    .main-student {width:250px;left:230px;}
    .book-tt {width:380px;}
    .book-title h2 {font-size:60px;}
    .book-title h2 em {font-size:45px;}
    .book-title span {font-size:18px;}
    .book-tt div p {font-size:24px;}
    .book-right span {font-size:20px;}
    .book-right h3 em {font-size:24px;}
    .hero-container {gap:50px;}
    .book-written {font-size:16px;}
    .book-right h3 {font-size:30px;}
    .partner-logo {width:120px;}
    .partner-link {font-size:14px;}
    .partner-card {padding:18px 22px;}
    .info-card {padding:40px 30px;}
    .section-title {font-size:46px;}
    


}

@media (max-width:1024px) {


    .hero-container {grid-template-columns: 1fr;}
    .book {height:fit-content;padding:50px;gap:50px;}
    .book-bt {font-size:18px;}
    .book-title {flex-direction: column;gap:15px;}
    .book-title h2 {font-size:50px;line-height: 1;}
    .book-title h2 em {font-size:35px;}
    .book-title span {font-size:16px;writing-mode: unset;letter-spacing: unset;padding:6px 15px 5px;}
    .book-tt div p {font-size:22px;}
    .book-tt {width:340px;}
    .book-right h3 {text-align: center;}
    .book-right span {margin: 0 auto;}
    .main-student {top:-70px;}

    .section-header {margin-bottom:50px;}
    .container {margin:80px auto;}
    
    .section-title {font-size:40px;}
    .section-title::after {width:46px;right:-46px;}
    .info-card h3 {font-size:24px;margin-bottom:5px;}
    .info-card p {font-size:18px;}
    .info-card small {font-size:14px;line-height: 1.3;}
    .info-card {padding: 30px 20px;}
    .info-grid {grid-template-columns: 1fr 1fr;}
    .info-card:nth-child(4) {grid-column: unset;}
    .info-card a {font-size:16px; padding:8px 20px;margin: 15px auto 0;}

    .step-card {padding:30px;}
    .step-tt h4 {font-size:22px;line-height: 50px;}
    .step-tt h4::after {width:140px; height:45px;left:-35px;}
    .step-content span {font-size: 18px;}
    .step-content p {font-size: 16px;}

    .quiz-container {margin: 50px auto;}
    .quiz-card-t {padding: 40px 40px 60px;}
    .quiz-card-b {padding: 60px 40px 40px;}
    .quiz-card-t::before, .quiz-card-t::after {height:65px;}
    .quiz-tt h4 {font-size:18px;}
    .quiz-tt p {font-size:20px;}
    .quiz-tt {margin-bottom:25px;}
    .quiz-q {padding:25px 40px;}
    .quiz-q p {font-size: 18px;}

    .radio-option {padding: 10px 20px;}
    .option-text {font-size:18px;}
    .radio-custom {width:16px; height:16px;}
    .check-answer-btn {font-size:16px; padding:10px 25px; width:fit-content}
    .quiz-options {gap:10px; margin-bottom:25px;}

    .explanation-content h4 {font-size:18px;}
    .explanation-text p {font-size:16px;}
    
    .next-quiz-btn, .entry-cta {padding: 10px 15px;}
    .report-info {font-size: 16px;padding:30px;margin-top:30px;}
    .report-badge {padding:8px 15px;}
    .report-badge i {font-size:16px;}

    .section-subtitle {font-size:18px;}
    .checkbox-option,.form-group input, .submit-btn {padding:20px;}
    .form-group,.consent-section  {margin-bottom:20px;}
    .form-group label {margin-bottom:5px;font-size:16px;}

    .partners-grid {grid-template-columns: 1fr 1fr;gap:10px;}
    .partner-card {padding:15px 20px;}
    .partner-link {gap:3px; padding:5px 15px;}

    .stat-bar {padding:5px 20px 8px; gap:15px;}
    .stat-number {line-height:1;font-size: 18px;} 
    .footer-info p {font-size: 14px;margin-bottom:0px;}

}


 

/* Responsive Design */
@media (max-width: 768px) { 
    
    .hero-container {
        grid-template-columns: 1fr;
        justify-items: center;
        gap: var(--spacing-2xl);
        padding: var(--spacing-2xl) var(--spacing-md);
    }
    
    /* .hero-section {
        height: unset;}
     */
    .info-grid {
        grid-template-columns: 1fr;
    }
    
    .quiz-card-t::after {display: none;}
    .quiz-card-t::before {left:50%;transform:translate(-50%,50%)}

    .stepper-container {
        grid-template-columns: 1fr;
    }
    
    .partners-grid {grid-template-columns: 1fr }
    .partner-logo {width:130px; height:35px;}

    .footer-content {
        flex-direction: column;
        text-align: center;
    }
    
    .toast-container {
        left: var(--spacing-md);
        right: var(--spacing-md);
        max-width: none;
    }

    .book {width:70vw;}
    .book-tt {width:55vw;}
    .book-written {font-size:12px;}
    .book-written em {font-size:12px;}
    .main-child {display: none;}
    .book {height:unset;aspect-ratio: 5/6;}

    .exp-box {font-size:14px;}


}




@media (max-width: 600px) { 

    .book-title h2 {font-size:40px;}
    .book-tt div p {font-size:20px;}
    .book-right h3 {font-size:24px;}
    .book-right span {font-size:16px;}

    .quiz-card-t {padding:25px 25px 50px}
    .quiz-card-b {padding: 50px 25px 25px;}
    .quiz-q {padding:20px;}
    .section-title {font-size:30px;}
    .section-title::after {width:38px; right:-38px;}
    .section-header {margin-bottom:40px;}
    .info-card {padding:20px 15px;}
    .info-card h3 {font-size:20px;}
    .info-card p {font-size:16px;}
    .info-card a {font-size: 14px;padding:6px 20px;}
    .step-tt h4 {font-size:20px;}

    .quiz-tt p {font-size: 18px;}
    .quiz-q p {font-size: 16px;}
    .option-text {font-size: 16px;}
    .check-answer-btn {font-size: 14px;padding:8px 20px;}
    .next-quiz-btn, .entry-cta {font-size:14px;padding:8px 12px;}
    .report-info {font-size:14px;padding:20px}
    .explanation-content {padding:20px;}

    .section-subtitle {font-size: 16px;}
    .consent-text {font-size:14px;}
    .checkbox-option, .form-group input, .submit-btn {padding:15px;}
    .submit-btn {font-size:16px;}
    .radio-option {gap:10px;}


    .container {padding: 0 15px;}

    /* .book-written {display: none;} */
    /* .book-written {word-break: unset;} */

}







@media (max-width: 480px) {


    .quiz-tt h4 {font-size: 16px;}
    .section-title {font-size: 28px;}
    .section-title::after {width: 32px;right: -32px;}
    .book-right h3 {font-size:22px;}
    .book {width:80vw;padding:40px}
    .book-tt {width:60vw;}
    .book-tt div p {font-size: 18px;}
    .book-bt {font-size: 14px;}

    .modal-content {
        padding: var(--spacing-xl);
    }

    .modal-list {
        gap: var(--spacing-sm);
        font-size: 0.95rem;
    }

    .modal-list strong {
        min-width: unset;
        display: block;
        margin-bottom: 2px;
    }

}

/* Focus styles for accessibility */
/* *:focus {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
}

button:focus,
input:focus,
select:focus,
textarea:focus,
a:focus {
    outline: 2px solid var(--primary-green);
    outline-offset: 2px;
} */

/* Skip to main content link for screen readers */
.skip-link {
    position: absolute;
    top: -40px;
    left: 6px;
    background: var(--primary-green);
    color: var(--white);
    padding: 8px;
    text-decoration: none;
    border-radius: 4px;
    z-index: 1000;
}

.skip-link:focus {
    top: 6px;
}

/* Print styles */
@media print {
    .app-header,
    .scroll-indicator,
    .toast-container {
        display: none;
    }
    
    body {
        background: var(--white);
        color: var(--black);
    }
    
    .container {
        max-width: none;
        padding: 0;
    }
}