@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@700;800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nanum+Myeongjo:wght@700&display=swap');

@font-face {
    font-family: 'IBMPlexSansKR';
    src: url('../fonts/IBMPlexSansKR-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal;
}
@font-face {
    font-family: 'IBMPlexSansKR';
    src: url('../fonts/IBMPlexSansKR-SemiBold.woff2') format('woff2');
    font-weight: 600; font-style: normal;
}

html, body {
    overflow-x: hidden !important; 
    width: 100% !important;
    -ms-overflow-style: none !important; 
    scrollbar-width: none !important; 
}
body::-webkit-scrollbar { 
    display: none !important; 
    width: 0 !important;
    background: transparent !important;
}

body, div, p, h1, h2, h3, h4, h5, span, a, button, li {
    font-family: 'IBMPlexSansKR', 'Pretendard', sans-serif !important;
    word-break: keep-all; 
    word-wrap: break-word;
    color: #333;
    line-height: 1.6;
}

br.mo-only { display: none; }

#tnb, #gnb, #hd_wrapper, #aside, #aside .menu_list, #aside .hd_login_footer, 
#aside .hd_login_content + ul, #aside .shop_cate { display: none !important; }
#container { width: 100% !important; max-width: 100% !important; padding: 0 !important; }

.main-wrapper { width: 100%; overflow-x: hidden; background-color: #fff; }
.inner-con { max-width: 1200px; margin: 0 auto; padding: 100px 20px; position: relative; }

@keyframes float {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-15px); }
    100% { transform: translateY(0px); }
}
@keyframes shake {
    0% { transform: translateX(0); }
    25% { transform: translateX(-3px) rotate(-2deg); color: #d9534f; }
    50% { transform: translateX(3px) rotate(2deg); }
    75% { transform: translateX(-3px); }
    100% { transform: translateX(0); opacity: 0.4; text-decoration: line-through; }
}

.hero-section { background: #fff; padding: 50px 0 80px; }
.hero-grid { display: flex; align-items: center; justify-content: center; gap: 40px; }
.hero-txt { flex: 1.2; padding-left: 20px; }
.hero-img { flex: 0.8; text-align: center; }

.hero-label { color: #4a6b46; font-weight: 700; letter-spacing: 1px; margin-bottom: 20px; font-size: 18px; display: block; }
.hero-txt h2 { font-size: 50px; font-weight: 700; color: #111; line-height: 1.3; margin-bottom: 30px; }
.hero-txt p { font-size: 19px; color: #555; font-weight: 400; }
.floating-char { max-width: 380px; width: 100%; animation: float 3.5s ease-in-out infinite; }

.hero-btn-group { margin-top: 35px; }
.btn-3d {
    display: inline-block;
    padding: 16px 40px;
    font-size: 18px;
    font-weight: 700;
    background-color: #ffffff;
    color: #65a66a;
    border: 2px solid #65a66a;
    border-radius: 12px; 
    box-shadow: none;
    transition: all 0.2s;
    text-decoration: none;
    line-height: 1;
}

.btn-3d:hover {
    background-color: #65a66a;
    color: #ffffff;
}

.mission-section { background: #f5f4f0; text-align: center; } 
.mission-title { font-size: 44px; font-weight: 800; margin-bottom: 60px; color: #111; letter-spacing: -0.5px; }

.wrong-answers { display: flex; justify-content: center; gap: 20px; margin-bottom: 50px; flex-wrap: wrap; }
.wrong-item {
    font-size: 20px; color: #999; padding: 12px 25px;
    background: #fff; border: 1px solid #ddd; border-radius: 50px;
    animation: shake 2.5s ease-in-out infinite;
}
.wrong-item:nth-child(1) { animation-delay: 0s; }
.wrong-item:nth-child(2) { animation-delay: 0.8s; }
.wrong-item:nth-child(3) { animation-delay: 1.6s; }

.mission-answer-area { margin-top: 20px; }
.mission-core-box { 
    display: inline-block;
    background-color: #fff;
    border: 2px solid #4a6b46;
    color: #4a6b46;
    font-size: 32px; font-weight: 700; 
    padding: 15px 40px; 
    border-radius: 20px;
    margin-bottom: 30px; 
    box-shadow: 0 5px 15px rgba(74, 107, 70, 0.15);
}
.check-icon { margin-right: 8px; font-size: 28px; }
.mission-desc { font-size: 20px; color: #444; line-height: 1.8; font-weight: 500; }

.philo-section { background: #fff; }
.philo-con { max-width: 1000px; margin: 0 auto; text-align: left; }
.philo-txt h3 { font-size: 46px; font-weight: 800; margin-bottom: 40px; line-height: 1.3; color: #111; letter-spacing: -1px; }
.philo-txt p { font-size: 17px; color: #666; margin-bottom: 25px; line-height: 1.75; font-weight: 400; }
.philo-mid-text { 
    font-size: 26px; font-weight: 700; color: #2f4f2f; 
    margin: 60px 0 0; display: block; 
    text-align: center; border-top: 1px solid #eee; padding-top: 60px;
}

.oecd-section { background: #2e2c29; color: #fff !important; text-align: center; } 
.oecd-label { color: #a3b18a; font-weight: 700; letter-spacing: 2px; display: block; margin-bottom: 15px; }
.oecd-title { font-size: 44px; font-weight: 800; margin-bottom: 10px; color: #ffffff !important; }
.oecd-subtitle { color: #bbb !important; font-size: 16px; margin-bottom: 60px; display: block; }

.oecd-grid { display: flex; flex-wrap: wrap; gap: 30px; justify-content: center; }
.oecd-card {
    flex: 1; min-width: 300px;
    background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08);
    padding: 40px 30px; border-radius: 20px; text-align: left; transition: 0.3s;
}
.oecd-card:hover { border-color: #a3b18a; background: rgba(255,255,255,0.07); }
.oecd-card h4 { font-size: 20px; font-weight: 700; margin-bottom: 10px; color: #fff !important; }
.oecd-card .en-sub { display: block; font-size: 13px; color: #a3b18a; margin-bottom: 20px; font-weight: 400; text-transform: uppercase; }
.oecd-card p { font-size: 15px; color: #ccc !important; line-height: 1.7; margin: 0; }

.char-section { 
    background: #fff; text-align: center; 
    padding-top: 100px; padding-bottom: 0 !important;
}
.char-main-msg { font-size: 40px; font-weight: 700; color: #2f4f2f; margin-bottom: 30px; line-height: 1.3; }
.char-sub-msg { font-size: 20px; color: #555; max-width: 800px; margin: 0 auto 60px; line-height: 1.7; font-weight: 500; }

.name-origin-wrapper {
    position: relative;
    width: 100%; height: 120px;
    display: flex; justify-content: center; align-items: center;
    margin-bottom: 40px;
}

.origin-box-container {
    display: flex; gap: 20px;
    position: absolute;
    z-index: 2;
    opacity: 1; transform: scale(1);
}
.origin-box {
    background: #fff; padding: 15px 30px; border-radius: 15px;
    font-size: 22px; font-weight: 700; color: #555; 
    box-shadow: 0 5px 20px rgba(0,0,0,0.1); 
    border: 1px solid #eaeaea;
    text-align: center; line-height: 1.2;
}
.origin-box span { font-size: 14px; color: #999; font-weight: 400; display: block; margin-top: 5px; }

.final-name {
    font-size: 70px; font-weight: 900; 
    color: #1a3c1a; letter-spacing: -2px;
    opacity: 0; transform: scale(0.9);
    z-index: 1;
}

.start-anim .origin-box-container {
    animation: cycleBoxes 6s infinite ease-in-out;
}
.start-anim .final-name {
    animation: cycleName 6s infinite ease-in-out;
}

@keyframes cycleBoxes {
    0%, 40% { opacity: 1; transform: scale(1); visibility: visible; }
    45%, 95% { opacity: 0; transform: scale(0.9); visibility: hidden; }
    100% { opacity: 1; transform: scale(1); visibility: visible; }
}

@keyframes cycleName {
    0%, 40% { opacity: 0; transform: scale(0.9); visibility: hidden; }
    45%, 95% { opacity: 1; transform: scale(1); visibility: visible; }
    100% { opacity: 0; transform: scale(0.9); visibility: hidden; }
}

.char-img-box { text-align: center; line-height: 0; }
.char-img-box img { max-width: 450px; margin-top: 30px; cursor: pointer; }

.emoji-particle {
    position: fixed; pointer-events: none; z-index: 9999;
    font-size: 80px; 
    animation: particleFade 1.2s forwards;
}
@keyframes particleFade {
    0% { opacity: 1; transform: translate(0, 0) scale(1); }
    100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.5); }
}

@media (max-width: 900px) {
    br.mo-only { display: block; }
    .inner-con { padding: 60px 20px; }
    .hero-grid { flex-direction: column; text-align: center; gap: 30px; }
    .hero-txt { padding-left: 0; } .hero-img { margin-top: 10px; }
    .hero-txt h2 { font-size: 28px; line-height: 1.4; } .hero-txt p { font-size: 16px; margin-top: 15px; }
    
    .hero-btn-group { justify-content: center; display: flex; }
    .btn-3d { 
        font-size: 18px; 
        padding: 16px 36px; 
    }

    .mission-title { font-size: 28px; margin-bottom: 30px; }
    .mission-core-box { font-size: 22px; padding: 12px 30px; } .mission-desc { font-size: 16px; }
    .philo-txt h3 { font-size: 28px; } .philo-txt p { font-size: 15px; }
    .philo-mid-text { font-size: 20px; margin-top: 40px; padding-top: 40px; }
    .oecd-title { font-size: 28px; }
    .char-main-msg { font-size: 26px; line-height: 1.4; }
    .char-sub-msg { font-size: 15px; padding: 0 10px; }
    .name-origin-wrapper { height: 100px; }
    .origin-box { padding: 10px 15px; font-size: 16px; } .origin-box span { font-size: 11px; }
    .final-name { font-size: 45px; }
    .char-img-box img { max-width: 280px; width: 100%; }
    .oecd-card { min-width: 100%; }
}