@charset "utf-8";
/* ==========================================================================
   1. 학원소개 전용 서브 비주얼 (블러 배경 + 하얀 빛 무한 루프 모션)
   ========================================================================== */
:root {
    --brand-navy: #001a35;
    --brand-green: #004d40;
    --brand-emerald: #00796b;
    --brand-mint: #e0f2f1;
    --text-dark: #2d3748;
    --text-muted: #718096;
    --bg-light: #f8fafc;
}

/* 상단 배너 베이스 메인 컨테이너 */
.sub-visual.intro-visual {
    position: relative;
    overflow: hidden;
    background-color: var(--brand-navy); /* 이미지 로드 전 베이스 컬러 */
    min-height: 280px;
    display: flex;
    align-items: center;
}

/* [핵심] 글자는 놔두고 '배경 이미지와 블러'만 독립적으로 격리 구현 */
.sub-visual.intro-visual .visual-bg-layer {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    /* 방금 생성한 고해상도 학원 전경 인테리어 이미지 경로 매칭 */
    background-image: url('../images/intro02.jpg'); 
    background-size: cover;
    background-position: center;
    filter: blur(2px) brightness(0.6); /* 흐림 처리 + 글자가 잘 보이도록 어둡게 틴트 조절 */
    transform: scale(1.05); /* 블러 처리 시 가장자리가 하얗게 우는 현상 원천 차단 */
    z-index: 1;
}

/* [신의 한 수] 왼쪽에서 오른쪽으로 무한 이동하는 하얀색 그라데이션 빛줄기 레이어 */
.sub-visual.intro-visual::before {
    content: '';
    position: absolute;
    top: 0; width: 30%; height: 100%;
    /* 사선 모양의 투명->화이트->투명 빔 그라데이션 광선 설계 */
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg); /* 감각적인 사선 앵글 */
    z-index: 2;
    animation: movingShine 3.5s infinite ease-in-out; /* 3.5초 주기로 무한 반복 트래킹 */
}

/* 우측 하단 에메랄드 오로라 광원 레이어 (디자인 입체감 추가) */
.sub-visual.intro-visual::after {
    content: '';
    position: absolute;
    bottom: -30%; right: 5%;
    width: 450px; height: 150%;
    background: radial-gradient(circle, rgba(51, 238, 209, 0.15) 0%, transparent 70%) !important;
    pointer-events: none;
    z-index: 3;
}

/* 텍스트가 담긴 실제 컨텐츠 레이어를 최상위로 격상 (절대 블러 안 먹힘) */
.sub-visual.intro-visual .container {
    position: relative;
    z-index: 4;
}

/* 학원소개 메인 타이틀 가독성 마스터 튜닝 */
.sub-visual.intro-visual .oa-title {
    font-size: 2.8rem !important;
    font-weight: 850 !important;
    letter-spacing: -1px;
    text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6); /* 어두운 배경 위에서 폰트 완벽 강조 */
}

/* --------------------------------------------------------------------------
   빛 이동 모션 핵심 키프레임 애니메이션 정의
   -------------------------------------------------------------------------- */
@keyframes movingShine {
    0% {
        left: -150%; /* 화면 저 멀리 왼쪽 뒤편에서 대기 */
    }
    50% {
        left: 100%; /* 0초~1초 사이에 왼쪽에서 오른쪽으로 슥- 빠르게 통과 */
    }
    100% {
        left: 100%; /* 나머지 시간 동안은 등장하지 않고 여운(딜레이) 유지 */
    }
}
/* ==========================================================================
   2. [섹션 1] 하이엔드 브랜드 인트로 (원색 상자 UI 완전 제거 버전)
   ========================================================================== */

/* 둔탁한 상자 배경을 없애고, 탁 트인 오픈형 타이포그래피 공간으로 전환 */
.intro-header-banner {
    background: transparent; /* 파란 배경 완전 제거 */
    border: none; /* 테두리 제거 */
    padding: 40px 0 20px 0; /* 불필요한 내부 여백 축소 */
    margin-bottom: 60px;
    box-shadow: none; /* 그림자 제거로 미니멀함 극대화 */
    position: relative;
}

/* 하이엔드 브랜드 감성의 아주 얇고 감각적인 센터 포인트 라인 */
.intro-header-banner::after {
    content: '';
    display: block;
    width: 40px;
    height: 2px;
    background-color: #00796b; /* 정제된 고급 에메랄드 톤 */
    margin: 25px auto 0;
}

.briefing-tag {
    font-size: 1.15rem;
    color: #00796b; /* 눈이 편안하면서도 깊이 있는 에메랄드 컬러 */
    font-weight: 600;
    letter-spacing: 4px; /* 자간을 넓혀 명품 브랜드 로고 같은 가독성 부여 */
    display: inline-block;
    margin-bottom: 12px;
    text-shadow: none;
    text-transform: uppercase;
}

.briefing-main-title {
    font-size: 3.2rem; /* 크기를 과감히 키워 웅장한 느낌 연출 */
    font-weight: 900; /* 초고두께 서체로 중심을 확실히 잡음 */
    color: #001a35; /* 학원 시그니처 다크 네이비 */
    letter-spacing: -2px;
    line-height: 1.2;
}

/* 우측 와이드 이미지 카드 - 투박한 테두리를 없애고 매끄러운 플로팅 효과 적용 */
.intro-mini-image-card {
    border-radius: 24px; /* 곡률을 더 고급스럽게 다듬음 */
    overflow: hidden;
    box-shadow: 0 30px 60px rgba(0, 26, 53, 0.08); /* 공중에 부드럽게 뜬 듯한 프리미엄 섀도우 */
    border: none; /* 회색 테두리 제거 */
    background-color: transparent;
    width: 100%;
}
.intro-mini-image-card img {
    transition: transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
    width: 100%;
    height: auto;
}
.intro-mini-image-card:hover img {
    transform: scale(1.05); /* 부드러운 스케일 모션 */
}

/* 본문 텍스트 - 글자 자체로 인테리어가 되는 타이포 가독성 */
.intro-text-wrap p {
    font-size: 1.15rem; 
    line-height: 2.1; /* 행간을 더 넓혀 외국의 트렌디한 잡지 같은 여백 구성 */
    color: #4a5568; /* 한 톤 부드러운 다크 그레이로 고급화 */
    text-align: justify;
    word-break: keep-all;
}
.intro-text-wrap p.highlight-text {
    font-size: 1.3rem; 
    color: #001a35; /* 첫 문단은 묵직한 다크 네이비로 시선 집중 */
    font-weight: 700;
    position: relative;
    padding-bottom: 5px;
}

/* ==========================================================================
   3. [섹션 2] 4분할 컬러 그리드 로드맵 (image_31cdcb 벤치마킹 스타일)
   ========================================================================== */
.roadmap-grid-wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    padding: 20px 0;
}
.roadmap-color-card {
    border-radius: 16px;
    padding: 32px 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    border: 1px solid transparent;
}
/* 파스텔 틴트 계단식 보더 스타일 정의 */
.roadmap-color-card.card-step1 { background-color: #f0fdf4; border-color: #dcfce7; }
.roadmap-color-card.card-step2 { background-color: #f0f9ff; border-color: #e0f2fe; }
.roadmap-color-card.card-step3 { background-color: #fdf2f8; border-color: #fce7f3; }
.roadmap-color-card.card-step4 { background-color: #fffbeb; border-color: #fef3c7; }

.roadmap-color-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 30px rgba(0,0,0,0.05);
}
.card-step-num {
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 1px;
    margin-bottom: 8px;
    display: block;
}
.card-step1 .card-step-num { color: #16a34a; }
.card-step2 .card-step-num { color: #0284c7; }
.card-step3 .card-step-num { color: #db2777; }
.card-step4 .card-step-num { color: #d97706; }

.card-step-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text-dark);
    margin-bottom: 16px;
}

/* ==========================================================================
   4. [섹션 3] 3 Deep Flow System 인프라 (image_31d116 트렌디 마스터 스타일)
   ========================================================================== */
.flow-system-card {
    background: #ffffff;
    border: 1px solid #edf2f7;
    border-radius: 20px;
    padding: 40px;
    transition: all 0.3s ease;
}
.flow-system-card:hover {
    box-shadow: 0 15px 35px rgba(0,0,0,0.04);
    border-color: var(--brand-emerald);
}
.flow-icon-box {
    width: 100px;
    height: 100px;
    background-color: #f0fcf9;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: var(--brand-emerald);
    border: 1px solid #e6f7f4;
}

/* 고용노동부 직업훈련교사 알림 팁 박스 */
.alert-premium-box {
    background-color: #fffbeb;
    border: 1px solid #fef3c7;
    border-radius: 16px;
}

/* 하단 서브 메뉴 강좌 태그 버튼 */
.course-tag {
    display: inline-block;
    background-color: #f1f5f9;
    color: #475569;
    padding: 8px 16px;
    border-radius: 30px;
    font-size: 0.95rem;
    font-weight: 500;
    margin: 6px;
    transition: all 0.2s;
}
.course-tag:hover {
    background-color: var(--brand-navy);
    color: #fff;
}

/* ==========================================================================
   5. 하단 와이드 고품격 가로형 폰콜 CTA 배너 세션
   ========================================================================== */
.horizontal-cta-banner {
    background: linear-gradient(135deg, var(--brand-navy) 0%, #022347 100%);
    border-radius: 24px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,26,53,0.15);
}
.cta-phone-number {
    font-size: 2.7rem;
    font-weight: 800;
    letter-spacing: -1px;
    color: #ffffff;
}

/* ==========================================================================
   6. 전 고사장 환경 최적화 반응형 미디어 쿼리
   ========================================================================== */
@media (max-width: 991px) {
    .roadmap-grid-wrapper { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575px) {
    .roadmap-grid-wrapper { grid-template-columns: 1fr; }
    .flow-system-card { padding: 25px; }
}