/* =============================================================
    0. 글로벌 변수 선언 및 서체 시스템 (Typography & Color)
============================================================= */
/* ⚠️ 느려짐의 원인인 외부 구글 서버 연결선을 오프라인 작업 동안 임시로 끊어줍니다.
   인터넷 접속을 안 하기 때문에 새로고침 속도가 즉시 0초로 바뀝니다! */
/* @import url('https://googleapis.com'); */

:root {
    /* 🎨 1. 글로벌 색상 변수 */
    --primary-blue: #4169e1;       /* 메인 로열 블루 (메뉴 호버, 버튼 등) */
    --point-darkblue: #031B4E;     /* 히어로 배너 하단 다크블루 */
    --point-skyblue: #0084D6;      /* 히어로 배너 상단 블루 */
    --bg-light-gray: #e7f6ff;      /* 5대 과목 배경 연한 블루 */
    --card-yellow: #FFE352;        /* 핵심가치 시소 박스 노란색 */
    --text-blue: #0056C7;          /* 핵심가치 시소 박스 파란 글씨 */
     --color-gray-800: #51565f;     /* 푸터 글씨 */   

    
    /* ✍️ 2. 글로벌 폰트 크기 변수 (Typography Scale) */
    --font-h1: 3.5rem;             /* 대형 메인 타이틀 크기 */
    --font-h2: 2.7rem;             /* 섹션 대제목 크기 */
    --font-h3: 1.625rem;           /* 서브 타이틀 크기 */
    --font-h4: 1.25rem;            /* 카드 제목 및 슬로건 크기 */
    --font-body: 1.05rem;          /* 일반 본문 설명 텍스트 크기 */
    --font-menu: 1.125rem;         /* 질문자님이 지정하신 상단 메뉴 크기 */
    
    --text-body-6: .875rem; 
    
        
    /* 📏 3. 글로벌 폰트 굵기 및 속성 변수 */
    --weight-bold: 700;
    --weight-medium: 500;
    --weight-regular: 400;
    --base-line-height: 1.6;
    --base-letter-spacing: -0.02em; /* ◀ 전체적으로 깔끔한 자간 균형 부여 */
    
    
}

/* =============================================================
   0-1. 전역 태그 초기화 및 표준화 규칙 (Reset & Base Styles)
============================================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Pretendard', 'Montserrat', -apple-system, sans-serif;
    font-size: var(--font-body);
    font-weight: var(--weight-regular);
    line-height: var(--base-line-height);
    letter-spacing: var(--base-letter-spacing);
    color: #111111;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
}

/* 🎯 모든 헤딩(제목) 태그의 기본 가이드라인을 글로벌 변수로 일괄 통제 */
h1, h2, h3, h4, h5, h6 {
    font-weight: var(--weight-bold);
    color: #111111;
    line-height: 1.35;
    letter-spacing: var(--base-letter-spacing);
    white-space: normal !important;   /* 글자가 넘치면 아래로 흐르게 허용 */ 
    word-break: keep-all !important;  /* ◀ 이 속성이 있어야 <wbr> 자리에서만 이쁘게 꺾입니다 */    
}

/* 🎯 모든 본문(p) 태그의 기본 스타일 고정 */
p {
    font-size: var(--font-body);
    font-weight: var(--weight-regular);
    line-height: var(--base-line-height);
    color: #555555; /* 부드러운 다크 그레이로 가독성 확보 */
    white-space: normal !important;   /* 글자가 넘치면 아래로 흐르게 허용 */ 
    word-break: keep-all !important;  /* ◀ 이 속성이 있어야 <wbr> 자리에서만 이쁘게 꺾입니다 */
}

ul { list-style: none; }
a { text-decoration: none; color: inherit; }


/* =============================================================
   0-2. 공통 버튼 컴포넌트 스타일 (우선순위 완전 보정형)
============================================================= */
.btn {
    display: inline-block !important;
    font-family: 'Pretendard', 'Montserrat', sans-serif !important;
    font-size: 1.125rem !important; 
    font-weight: 700 !important;
    padding: 14px 40px !important; 
    border-radius: 50px !important; 
    text-align: center !important;
    white-space: nowrap !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    text-decoration: none !important;
    border: 1px solid transparent !important;
    transition: all 0.25s ease-in-out !important;
}

/* 🎯 [기본형 버튼 - 개정] 흰 바탕 등 어디서나 쓰이는 표준 알약 버튼
   - 배경: 글로벌 블루, 글씨: 흰색 */
.btn.default {
    background-color: var(--primary-blue) !important;     /* ◀ 배경은 글로벌 블루 */
    color: #ffffff !important;                             /* ◀ 폰트 색상은 흰색 */
    box-shadow: 0 4px 14px rgba(65, 105, 225, 0.25) !important;
    border: 1px solid var(--primary-blue) !important;
}

/* 🎯 기본형 버튼 마우스 오버(호버) 시 연출
   - 배경: 살짝 짙어지는 블루, 글씨: 글로벌 옐로우로 찌릿하게 변신 */
.btn.default:hover {
    background-color: var(--primary-blue) !important;                  /* 마우스 오버 시 조금 짙은 파란색 */
    color: var(--card-yellow) !important;                  /* ◀ 폰트 색상은 글로벌 옐로우 변수(#FFE352) 반영! */
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(65, 105, 225, 0.4) !important;
}

/* 🎯 [강조형 버튼] (어두운배경에서 사용 hero) */
.btn.primary {
    background-color: #ffffff !important; 
    color: var(--primary-blue) !important;            
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; 
}

.btn.primary:hover {
    background-color: var(--primary-blue) !important; 
    color: var(--card-yellow) !important;                  /* 강조형 버튼도 호버 통일감 부여 */
    transform: translateY(-2px) !important; 
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.15) !important; 
}


/* 🎯 서브 버튼 스타일 (배경이 흰색이고 테두리가 파란 형태 - 백업용) */
.btn.secondary {
    background-color: #ffffff !important;
    color: var(--bg-light-gray) !important;
    border: 1px solid var(--bg-light-gray) !important;
}

.btn.secondary:hover {
    background-color: #f9fafc !important;
    transform: translateY(-2px) !important;
}



/* =============================================================
   0-3. 공통 버튼 컴포넌트 - 작은 버튼 확장 (Small Button)
============================================================= */
/* 기본 .btn primary 틀은 그대로 두고, 작은 버튼 전용 패딩과 글자 크기만 덮어쓰기 */
.btn.small {
    /* 🎯 큰 버튼(1.125rem / 16px 44px)보다 아기자기하고 콤팩트한 비율 실측 적용 */
    font-size: 0.95rem !important;     /* 글자 크기를 살짝 줄임 */
    padding: 10px 24px !important;     /* 위아래 10px, 좌우 24px로 여백을 축소 */
    border-radius: 30px !important;    /* 작은 크기에 어울리는 부드러운 라운딩 값 조율 */
}


/* 위험 버튼 전용 빨간색 배경만 덮어쓰기 */
.btn.danger {
    background-color: #dc3545 !important;
    color: #ffffff !important;
}



/* =============================================================
   0. 오리지널 웹폰트 불러오기 및 기본 스타일
============================================================= */
@import url('https://googleapis.com');

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

body {
    font-family: 'Montserrat', 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;
    line-height: 1.5;
    color: #111111;
    background-color: #ffffff;
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em; 
}

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

a {
    text-decoration: none;
    color: inherit;
}

/* =============================================================
   1. 지혜설계소 헤더 레이아웃 및 메뉴 스타일 정밀 매칭
============================================================= */
.site-header {
    background-color: #ffffff;
    border-bottom: 1px solid #f1f1f1;
    position: sticky;
    top: 0;
    z-index: 9999;
    box-shadow: 0 2px 10px rgba(0,0,0,0.02);
}

/* 🎯 고정 너비(1240px)를 없애고 전체 가로 사이즈를 100% 다 쓰도록 전면 수정 */
.header-container {
    width: 100%;             /* ◀ 화면 가로 전체를 채움 */
    max-width: none;         /* ◀ 기존의 가로 제한 벽을 파괴 */
    margin: 0;
    padding: 0 60px;         /* ◀ 양 끝에 로고와 메뉴가 너무 붙지 않도록 오리지널 여백 확보 */
    height: 90px; 
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    z-index: 3;
}


.header-left, .header-right {
    display: flex;
    align-items: center;
}

.header-left {
    gap: 48px; 
}

.header-right {
    gap: 30px; 
}

/* 로고 크기 고정 */
.site-branding .logo-link {
    display: inline-block;
    line-height: 1;
}

.site-branding .main-logo {
    display: block;
    width: 215px;  
    height: 65px;  
    object-fit: contain;
}

/* 메뉴 리스트 구성 */
.menu-list {
    display: flex;
    gap: 28px; 
    align-items: center;
}

/* 🎯 주 내비게이션 스타일 수정 (font-size 및 마우스 오버 색상 반영) */
.primary-nav .menu-list a {
    font-size: 1.125rem; /* ◀ 요청하신 폰트 사이즈 반영 */
    font-weight: 600; 
    color: #000000;  
    text-transform: capitalize; 
    transition: color 0.15s ease;
}

/* 🎯 주 내비게이션 마우스 오버 색상 변경 */
.primary-nav .menu-list a:hover {
    color: var(--bg-light-gray); 
}

/* 여름 효 캠프 강조 스타일 (기본 마우스 오버와 별도로 강조 유지 원할 시) */
.primary-nav .menu-list a.highlight-camp {
    color: #e11d48; 
    font-weight: 700;
}
.primary-nav .menu-list a.highlight-camp:hover {
    color: var(--bg-light-gray); /* 캠프 메뉴도 마우스 오버 시 동일하게 변경 */
}

/* 🎯 보조 내비게이션 스타일 수정 (동일한 스펙 적용) */
.secondary-nav .menu-list a,
.secondary-nav .menu-list button {
    font-size: 1.125rem; /* ◀ 보조 메뉴도 글자 크기 통일 */
    color: #4b5563; 
    font-weight: 500;
    transition: color 0.15s ease;
}

.secondary-nav {
    display: block;
    margin: 0;
}

.secondary-nav .menu-list a {
    padding: 0;
    border-radius: 0;
}

.secondary-nav .menu-list button {
    padding: 0;
    border: 0;
    background: transparent;
    font-family: inherit;
    cursor: pointer;
}

/* 🎯 보조 내비게이션 마우스 오버 색상 변경 */
.secondary-nav .menu-list a:hover,
.secondary-nav .menu-list button:hover {
    color: var(--primary-blue); /* ◀ 보조 메뉴 마우스 오버 색상 반영 */
}

.mobile-menu-toggle,
.mobile-nav {
    display: none;
}

.mobile-menu-toggle {
    width: 46px;
    height: 46px;
    padding: 10px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    cursor: pointer;
}

.mobile-menu-toggle span {
    display: block;
    width: 24px;
    height: 2px;
    margin: 5px auto;
    border-radius: 2px;
    background: #172033;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

.mobile-menu-toggle.is-open span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.mobile-menu-toggle.is-open span:nth-child(2) {
    opacity: 0;
}

.mobile-menu-toggle.is-open span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* 2. 장바구니 및 유틸리티 아이콘 스타일 */
.header-cart .cart-link {
    display: flex;
    align-items: center;
    gap: 6px;
    color: #1f2937;
}

.header-cart .cart-total {
    font-size: 14px;
    font-weight: 600;
}

.header-cart .cart-icon {
    color: #1f2937;
    display: flex;
    align-items: center;
}

/* 사용자 계정 아바타 */
.header-account .user-avatar {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    object-fit: cover;
    border: 1px solid #e5e7eb;
    display: block;
    transition: transform 0.2s;
}

.header-account .user-avatar:hover {
    transform: scale(1.05);
}

/* 3. 반응형 분기점 */
@media (max-width: 1180px) {
    .primary-nav, .secondary-nav {
        display: none; 
    }

    .header-container {
        padding: 0 24px;
    }

    .mobile-menu-toggle {
        display: inline-block;
        position: relative;
        z-index: 4;
    }

    .mobile-menu-toggle:focus-visible {
        outline: 3px solid rgba(65, 105, 225, 0.35);
        outline-offset: 2px;
    }

    .mobile-nav {
        display: block;
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        overflow-x: hidden;
        overflow-y: auto;
        margin: 0;
        padding: 0;
        border: 0;
        border-radius: 0;
        background:
            radial-gradient(circle at 88% 12%, rgba(87, 142, 230, 0.18), transparent 34%),
            radial-gradient(circle at 5% 92%, rgba(226, 172, 107, 0.18), transparent 31%),
            #ffffff;
        box-shadow: none;
        z-index: 10000;
        animation: mobile-menu-reveal 0.24s ease-out both;
    }

    .mobile-nav-topbar {
        position: absolute;
        inset: 0 0 auto;
        height: 90px;
        padding: 0 24px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        z-index: 3;
    }

    .mobile-nav-brand {
        display: inline-flex;
        align-items: center;
    }

    .mobile-nav-brand img {
        display: block;
        width: 215px;
        height: 65px;
        object-fit: contain;
    }

    .mobile-menu-close {
        display: inline-block;
        background: rgba(255, 255, 255, 0.72);
        box-shadow: 0 0 0 1px rgba(71, 119, 198, 0.16);
    }

    .mobile-nav-content {
        width: min(100%, 760px);
        min-height: 100%;
        margin: 0 auto;
        padding: 132px clamp(24px, 7vw, 72px) max(36px, env(safe-area-inset-bottom));
        display: flex;
        flex-direction: column;
    }

    .mobile-nav-eyebrow {
        margin: 0 0 24px;
        color: #4777c6;
        font-size: 0.78rem;
        font-weight: 800;
        letter-spacing: 0.16em;
    }

    .mobile-nav .menu-list {
        display: flex;
        flex-direction: column;
        gap: 3px;
        align-items: stretch;
    }

    .mobile-nav .menu-list li {
        opacity: 0;
        transform: translateY(12px);
        animation: mobile-menu-item-in 0.3s ease-out forwards;
        animation-delay: calc(0.04s + (var(--menu-index) * 0.045s));
    }

    .mobile-nav .menu-list a,
    .mobile-nav .menu-list button {
        display: flex;
        width: 100%;
        min-height: 68px;
        align-items: center;
        justify-content: space-between;
        padding: 0;
        border: 0;
        border-bottom: 1px solid rgba(29, 51, 85, 0.1);
        border-radius: 0;
        background: transparent;
        color: #172033;
        font-family: inherit;
        font-size: 4vw;
        font-weight: 600;
        letter-spacing: -0.04em;
        cursor: pointer;
    }

    .mobile-nav .menu-list a::after {
        content: "→";
        color: #8aa9d8;
        font-size: 0.9em;
        font-weight: 400;
    }

    .mobile-nav .menu-list button::after {
        content: "↗";
        color: #c59667;
        font-size: 0.75em;
        font-weight: 400;
    }

    .mobile-nav .menu-list a:hover,
    .mobile-nav .menu-list a:focus-visible,
    .mobile-nav .menu-list button:hover,
    .mobile-nav .menu-list button:focus-visible {
        background: transparent;
        color: var(--primary-blue);
        outline: none;
    }

    .mobile-nav-signature {
        display: grid;
        gap: 5px;
        margin-top: auto;
        padding-top: 46px;
        color: #172033;
    }

    .mobile-nav-signature strong {
        font-size: 0.95rem;
    }

    .mobile-nav-signature span {
        color: #788296;
        font-size: 0.78rem;
    }

    @keyframes mobile-menu-reveal {
        from { opacity: 0; }
        to { opacity: 1; }
    }

    @keyframes mobile-menu-item-in {
        to { opacity: 1; transform: translateY(0); }
    }
}

@media (max-width: 480px) {
    .header-container {
        height: 80px;
        padding: 0 16px;
    }

    .site-branding .main-logo {
        width: 180px;
        height: 56px;
    }

    .mobile-nav-topbar {
        height: 80px;
        padding: 0 16px;
    }

    .mobile-nav-brand img {
        width: 180px;
        height: 56px;
    }

    .mobile-nav-content {
        padding-top: 112px;
    }
}





/* =============================================================
   2. 메인 히어로 배너 영역 스타일 (오리지널 그라데이션 완벽 동기화)
============================================================= */
.hero-section {
    /* 🎯 그라데이션 레이어와 원본 나뭇잎 배경 이미지를 완벽하게 결합합니다 */
    background-image: linear-gradient(180deg, rgba(0, 132, 214, 0.45) -50%, rgba(3, 27, 78, 0.85) 100%), 
                      url('images/bg_img01.png');
    
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    
    padding: 160px 0 140px 0;
    text-align: center;
    overflow: hidden;
}
.hero-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

/* 어두운 배경에 맞춰 타이틀을 선명한 흰색으로 보정 */
.hero-title {
    font-size: var(--font-h1); /* ◀ 3rem에서 3.5rem으로 크기를 키워 시원하게 배치 */
    font-weight: 700;   /* ◀ 800(너무 두꺼움)에서 700(원본 실측 굵기)으로 조절 */
    color: #ffffff; 
    line-height: 1.35;
    margin-bottom: 28px;
    letter-spacing: -0.01em; /* ◀ 자간을 너무 조이지 않도록 조정 */
    text-shadow: 0 2px 10px rgba(0,0,0,0.2);
}

/* 배경 위에서 가장 잘 보이고 돋보이는 포인트 옐로우/골드 계열 또는 밝은 스카이블루 처리 */
.hero-title .word-group {
    color: #ffe600; /* 원본의 강조 밸런스에 맞춘 밝은 포인트 컬러 */
}

/* 서브 타이틀 흰색 레이어 보정 */
.hero-subtitle {
    font-size: 1.625rem; /* ◀ 시각적 균형에 맞춰 크기 미세 조정 */
    font-weight: 400;    /* ◀ 기본 굵기를 부드럽게 완화 */
    color: #f1f5f9; 
    line-height: 1.5;
    margin-bottom: 48px;
    letter-spacing: -0.01em;
    text-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

/* 서브 타이틀 내 강조 텍스트 */
.hero-subtitle .word-group {
    font-weight: 600; /* ◀ 과하게 두껍지 않도록 700에서 600으로 보정 */
    color: #ffffff;
}

.hero-button-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-top: 40px;    
}

.hero-mobile-login {
    display: none;
}

.hero-btn {
    display: inline-block;
    background-color: #ffffff; /* 어두운 배경 대비를 위해 흰색 버튼으로 변경 */
    color: #0084D6; /* 버튼 글씨는 메인 테마 컬러 */
    font-family: 'Montserrat', sans-serif;
    font-size: 1.125rem;
    font-weight: 700;
    padding: 16px 44px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.25s ease-in-out;
}

.hero-btn:hover {
    background-color: #e6f4fe; /* 마우스 올렸을 때 연한 하늘빛 연출 */
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(0, 0, 0, 0.3);
}

/* =============================================================
   🎯 엘리멘터 오리지널 모션 구현 (CSS 애니메이션 키프레임 엔진)
============================================================= */

/* 위에서 아래로 떨어지며 나타나는 효과 */
.animate-fade-in-down {
    opacity: 0;
    animation: fadeInDown 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.3s forwards;
}

/* 아래에서 위로 올라오며 나타나는 효과 */
.animate-fade-in-up {
    opacity: 0;
    animation: fadeInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.5s forwards;
}

/* 스르륵 나타나는 효과 */
.animate-fade-in {
    opacity: 0;
    animation: fadeIn 1s ease 0.8s forwards;
}

/* 애니메이션 핵심 메커니즘 선언 */
@keyframes fadeInDown {
    from {
        opacity: 0;
        transform: translate3d(0, -30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 30px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* 반응형 처리 */
@media (max-width: 768px) {
    .hero-section { padding: 90px 10px 70px 10px; }  

    .hero-mobile-login {
        display: inline-flex;
        margin-top: 16px;
        padding: 6px 12px;
        color: #ffffff;
        font-size: 1rem;
        font-weight: 700;
        line-height: 1.5;
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 5px;
    }

    .hero-mobile-login:focus-visible {
        outline: 2px solid #ffffff;
        outline-offset: 3px;
        border-radius: 6px;
    }

}






/* =============================================================
   3. 바른분별력 소개 및 3단 이미지 영역 스타일 (정밀 세팅)
============================================================= */
.discernment-section {
    background-color: #ffffff;
    padding: 100px 0;
    text-align: center;
    overflow: hidden;
}

.section-container {
    max-width: 1140px;
    margin: 0 auto;
    padding: 0 20px;
}

.discernment-header {
    margin-bottom: 60px;
}

/* 메인 타이틀 자간 및 폰트 크기 튜닝 */
.discernment-title {
    font-size: var(--font-h2) !important;
    font-weight: 700 !important;
    color: #111111 !important; /* ◀ 흰색으로 덮인 글씨를 선명한 다크 블랙으로 강제 환원 */
    line-height: 1.4 !important;
    margin-bottom: 20px !important;
    letter-spacing: -0.02em !important;
}



/* 🎯 [완전 교정] 배경색에 묻히지 않고 무조건 블루 그라데이션이 채워지도록 필터 결합 */
.discernment-title .gradient-text {
    position: relative;
    background: linear-gradient(90deg, #677bff, #01d2ff, #677bff, #01d2ff);
    -webkit-background-clip: text;
    color: transparent;
    background-size: 300% 100%;
    border-image: linear-gradient(to right, #677bff 0%, #01d2ff 100%);
    z-index: 2;
    animation: gradientflow 3s linear infinite;
}

/* 서브 타이틀 슬로건 */
.discernment-subtitle {
    font-size: var(--font-h4);
    font-weight: 500;
    color: #555555;
    letter-spacing: -0.01em;
}

/* 🎯 3단 균등 정렬 이미지 그리드 시스템 */
.discernment-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 1:1:1 비율 가로 정렬 */
    gap: 30px; /* 카드 사이 간격 */
    justify-content: center;
}

.discernment-card {
    width: 100%;
    border-radius: 12px;
    overflow: hidden;
    /* 부드러운 엘리멘터 풍의 그림자 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06); 
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* 마우스 올렸을 때 살짝 뜨는 인터랙션 효과 */
.discernment-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

.discernment-card .card-img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* =============================================================
   🎯 세 번째 영역 오리지널 애니메이션 키프레임 구현
============================================================= */

/* 1. 통통 튀며 나타나는 bounceIn 효과 */
.animate-bounce-in {
    opacity: 0;
    animation: bounceIn 0.9s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0.2s forwards;
}

/* 2. 서브타이틀 지연 등장 효과 */
.animate-fade-in-up-delayed {
    opacity: 0;
    animation: fadeInUp 0.8s ease 0.6s forwards;
}

/* 3. 3단 카드 이미지 시차(Delay) 상승 효과 */
.animate-slide-in-up-1 {
    opacity: 0;
    animation: slideInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.8s forwards;
}
.animate-slide-in-up-2 {
    opacity: 0;
    animation: slideInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.9s forwards;
}
.animate-slide-in-up-3 {
    opacity: 0;
    animation: slideInUp 0.8s cubic-bezier(0.25, 1, 0.5, 1) 1.0s forwards;
}

/* 애니메이션 동작 설계 */
@keyframes bounceIn {
    0% { opacity: 0; transform: scale3d(0.3, 0.3, 0.3); }
    20% { transform: scale3d(1.1, 1.1, 1.1); }
    40% { transform: scale3d(0.9, 0.9, 0.9); }
    60% { opacity: 1; transform: scale3d(1.03, 1.03, 1.03); }
    80% { transform: scale3d(0.97, 0.97, 0.97); }
    100% { opacity: 1; transform: scale3d(1, 1, 1); }
}

@keyframes slideInUp {
    from {
        opacity: 0;
        transform: translate3d(0, 50px, 0);
    }
    to {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

/* 모바일/태블릿 반응형 대응 (3열 -> 1열 세로 정렬) */
@media (max-width: 900px) {
    .discernment-title { font-size: 2rem; }
    .discernment-grid {
        grid-template-columns: 1fr; /* 가로 한 줄에 1개씩 꽉 차게 배치 */
        max-width: 400px;
        margin: 0 auto;
    }
}


/* 🎯 모바일 전용 줄바꿈 엔진 */
.mo-br {
    display: none !important; /* 평소(PC 화면)에는 줄바꿈을 숨겨서 한 줄로 나오게 함 */
}

@media (max-width: 768px) {
    .mo-br {
        display: block !important; /* 768px 이하 모바일 화면이 되면 강제로 줄바꿈 가동 */
    }
}



/* =============================================================
   4. s2wisdom 핵심가치 영역 스타일 (오리지널 시소 메커니즘 100% 복원)
============================================================= */
@import url('https://jsdelivr.net');

.values-section {
    background-color: #fcfdfe; 
    padding: 100px 0;
    overflow: hidden;
}

.values-header {
    text-align: center;
    margin-bottom: 60px;
}

.values-header h2 {
    font-size: var(--font-h2);
    font-weight: 700;
    color: #111111;
    letter-spacing: -0.02em;
}

/* 2단 분할 레이아웃 시스템 */
.values-content-wrapper {
    display: grid;
    grid-template-columns: 1.1fr 0.9fr;
    gap: 50px;
    align-items: center;
}

/* 좌측 설명 카드 스타일 */
.values-left-cards {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.value-info-card {
    background-color: #ffffff;
    padding: 30px;
    border-radius: 12px;
    border: 1px solid #f0f4f8;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0);
    transition: all 0.3s ease;
}

.value-info-card:hover {
    transform: translateX(5px);
    box-shadow: 0 10px 25px rgba(65, 105, 225, 0.08);
    border-color: var(--bg-light-gray);
}

.value-info-card .card-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--primary-blue); 
    margin-bottom: 12px;
    letter-spacing: -0.01em;
}

.value-info-card .card-desc {
    font-size: 1.05rem;
    color: #4b5563;
    line-height: 1.6;
}

/* 우측 정렬 래퍼 균형 잡기 */
.values-right-graphic {
    width: 100%;
    display: flex;
    justify-content: center;
}

/* 🎯 [보내주신 오리지널 국한 스타일 구조 그대로 이식] */
.s2wisdom-section {
    width: 100%;
    background-color: transparent; /* 외부 배경 조화를 위해 투명화 처리 */
    box-sizing: border-box;
    text-align: center;
    padding: 0;
    margin: 0;
}

/* 텍스트 박스 기본 설정 (박스 간격을 좁히기 위해 마진/패딩 제거) */
.text-center-box {
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    z-index: 2;
}

/* 두 번째, 세 번째 박스를 위로 강하게 끌어당겨 깊게 겹치도록 설정 */
/* 포개어지는 맛을 살리기 위해 음수 마진 적용 */
.text-center-box + .text-center-box {
    margin-top: 3px !important; /* ◀ 2em 글자 크기에 맞게 겹침 강도를 부드럽게 매칭 */
}

/* p 태그 기본 여백 초기화 */
.text-center-box p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

/* 텍스트 디자인 공통 스타일 */
.rotate_txt {
    display: inline-block;
    font-size: 2em;
    line-height: 1;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #0056C7;
    background: #FFE352;
    padding: 17px 40px;
    border-radius: 1000px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.08);
}

/* 🎯 [보내주신 오리지널 시소 애니메이션 물리 엔진 완벽 작동] */
.rotate_txt.rotate1 {
    animation: seesaw1 4s ease infinite;
}
@keyframes seesaw1 {
    0% { transform: rotate(-8deg); }
    50% { transform: rotate(10deg); }
    100% { transform: rotate(-8deg); }
}

.rotate_txt.rotate2 {
    animation: seesaw2 4s ease infinite;
}
@keyframes seesaw2 {
    0% { transform: rotate(8deg); }
    50% { transform: rotate(-12deg); }
    100% { transform: rotate(8deg); }
}

.rotate_txt.rotate3 {
    animation: seesaw3 4s ease infinite;
}
@keyframes seesaw3 {
    0% { transform: rotate(-8deg); }
    50% { transform: rotate(10deg); }
    100% { transform: rotate(-8deg); }
}

/* 🎯 겹쳐진 텍스트 아래로 자연스러운 간격을 확보하며 깔리는 이미지 구역 */
.image-container {
    padding: 30px 15px -1px 15px; /* 텍스트 박스와 이미지 사이의 오리지널 여백 확보 */
    display: flex;
    justify-content: center;
    align-items: center;
}

/* 🎯 보내주신 가로 149px, 세로 124px 원본 규격을 100% 매칭하면서 선명하게 렌더링 */
.image-container img {
    width: 149px !important;
    height: 124px !important;
    display: block;
    margin: 0 auto;
    object-fit: contain;
    image-rendering: -webkit-optimize-contrast; /* 오프라인 브라우저에서도 깨짐 방지 */
}


/* 기본 왼쪽 설명 카드 스르륵 애니메이션 효과 */
.animate-fade-in-left-1 { opacity: 0; animation: fadeInLeft 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.4s forwards; }
.animate-fade-in-left-2 { opacity: 0; animation: fadeInLeft 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.5s forwards; }
.animate-fade-in-left-3 { opacity: 0; animation: fadeInLeft 0.8s cubic-bezier(0.25, 1, 0.5, 1) 0.6s forwards; }

@keyframes fadeInLeft {
    from { opacity: 0; transform: translate3d(-40px, 0, 0); }
    to { opacity: 1; transform: translate3d(0, 0, 0); }
}

@media (max-width: 900px) {
    .values-content-wrapper { grid-template-columns: 1fr; gap: 50px; }
}






/* =============================================================
   5. 5대 과목 융합 커리큘럼 영역 스타일 (나만의 PNG 이미지 커스텀)
============================================================= */
.curriculum-section {
    background-color: var(--bg-light-gray); 
    padding: 100px 0;
}
.curriculum-header { text-align: center; margin-bottom: 60px; }
.curriculum-header h2 { font-size: var(--font-h2); font-weight: 700; color: #111111; margin-bottom: 12px; }
.curriculum-header h4 { font-size: var(--font-h4); font-weight: 500; color: #555555; margin-bottom: 20px; }
.curriculum-divider { width: 100px; height: 3px; background-color: var(--primary-blue); margin: 0 auto; border-radius: 2px; }


/* 5열 가로 배치 그리드 */
.curriculum-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    align-items: stretch;
}
.curriculum-card {
    background-color: #ffffff;
    padding: 35px 20px;
    border-radius: 12px;
    border: 1px solid #eef2f6;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0);
    text-align: center;
    transition: all 0.3s ease;
}
.curriculum-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(65, 105, 225, 0.1);
    border-color: var(--bg-light-gray);
}

/* 아이콘을 담는 동그라미 상자 */
.card-icon-box {
    position: relative !important;
    width: 130px !important;
    height: 130px !important;
    background-color: #f0f4ff;
    border-radius: 50% !important;
    margin: 0 auto 24px auto !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    transition: all 0.3s ease;
}

/* 마우스 올렸을 때 동그라미 배경색 변화 */
.curriculum-card:hover .card-icon-box {
    background-color: var(--bg-light-gray);
}

/* 🎯 [핵심] 투명 PNG 이미지 찌러짐 전면 방어 및 정중앙 배치 */
.curriculum-custom-img {
    display: block !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    /* 투명 이미지 크기를 동그라미 상자에 맞춰 예쁘게 제어 (원하는 대로 크기 조절 가능) */
    width: 120px !important;  
    height: 120px !important;
    
    /* 강제 비율 유지 안전장치 */
    aspect-ratio: 1 / 1 !important;
    object-fit: contain !important;
    
    transition: filter 0.3s ease;
}

/* 💡 검은색 계열 이미지라면, 호버 시 아이콘을 흰색으로 자동 반전시켜 주는 꿀팁 효과 */
.curriculum-card:hover .curriculum-custom-img {
    filter: none !important;  
}

.curriculum-card .card-title { font-size: var(--font-h4); font-weight: 700; color: #111111; line-height: 1.4; margin-bottom: 16px; }
.curriculum-card .card-title .sub-title { font-size: 0.95rem; font-weight: 500; color: var(--primary-blue); }
.curriculum-card .card-desc { font-size: 0.9rem; color: #666666; line-height: 1.6; word-break: keep-all; }

@media (max-width: 1100px) { .curriculum-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .curriculum-grid { grid-template-columns: 1fr; } }





/* =============================================================
   6. 최하단 푸터 카피라이트 영역 스타일 (완벽 마감)
============================================================= */
.site-footer {
    /* 🎯 원본의 클래식 다크 분위기와 고급 서체 밸런스를 위한 배경색 배정 */
    background-color: #1a1e29;     /* 묵직하고 은은한 다크 딥블루 그레이 색상 */
    color: var(--color-gray-800);  
    padding: 30px 0;               /* 상하단 깔끔하고 안정적인 여백 */
    border-top: 1px solid #2e3545;  /* 상단 경계선 레이어 추가 */
    font-family: 'Pretendard', sans-serif;
}

.footer-container {
    max-width: 1240px;             /* 헤더 영역 너비와 균형을 맞춘 확장 공간 */
    margin: 0 auto;
    padding: 0 24px;
    display: flex;
    justify-content: space-between; /* 🎯 좌측 정보와 우측 정보를 양 끝으로 50:50 정렬 */
    align-items: center;
}


/* 폰트 디테일 튜닝 */
.footer-left span, 
.footer-right span {
    font-size: 0.95rem;            /* 너무 크지 않고 단정한 푸터 전용 글자 크기 */
    font-weight: var(--weight-medium); /* 우리가 지정해둔 500 중감 두께 연결 */
    letter-spacing: var(--base-letter-spacing);
}


.text-body-6 {
    font-size: var(--text-body-6);
    font-weight: var(--text-body-6--font-weight);
    line-height: var(--text-body-6--line-height);
}

/* 🎯 [반응형 처리] 스마트폰이나 태블릿처럼 폭이 좁아질 때 정렬 변환 */
@media (max-width: 768px) {
    .footer-container {
        flex-direction: column;    /* 가로 배열을 세로 배열로 안전하게 전환 */
        gap: 12px;                 /* 세로로 정렬될 때 위아래 글자 사이 여백 */
        text-align: center;        /* 원본 설정 그대로 모바일 에선 중앙 정렬 */
    }
    
    .footer-left span, 
    .footer-right span {
        font-size: 0.9rem;         /* 모바일에 맞게 글자 배율 살짝 최적화 */
    }
}