@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital,wght@0,400;0,700;1,400;1,700&family=Cormorant+Garamond:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Noto+Serif+KR:wght@400;700&display=swap');
/* Reset & Variables */
:root {
    --primary-color: #000000;
    --text-main: #333333;
    --text-light: #777777;
    --bg-light: #f9f9f9;
    --header-height: 120px;
    --header-shrink: 100px;
    --transition-speed: 0.4s;
    --font-en: 'Montserrat', sans-serif;
    --font-ko: 'Noto Sans KR', sans-serif;
}

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

body {
    font-family: var(--font-ko);
    color: var(--text-main);
    line-height: 1.6;
    background-color: #ffffff;
    overflow-x: hidden; /* 가로 스크롤 시 화면 흔들림 방지 */
}

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

ul {
    list-style: none;
}

/* ==================================
   1. Header (상단 메뉴바)
================================== */
#main-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    transition: all var(--transition-speed) ease;
    background-color: transparent; /* 초기: 투명 */
    border-bottom: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff; /* 초기: 텍스트 흰색 */
}

/* 스크롤 시 변경되는 Sticky 헤더 스타일 (White 버전) */
#main-header.scrolled {
    background-color: #ffffff;
    color: #000000;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.05);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}

.header-inner {
    max-width: 1600px; /* 와이드 스크린 대응 */
    margin: 0 auto;
    padding: 0 40px;
    height: var(--header-height);
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: height var(--transition-speed) ease;
}

/* 스크롤 시 헤더 높이가 부드럽게 줄어듦 */
#main-header.scrolled .header-inner {
    height: var(--header-shrink);
}

/* 로고 스타일링 (이미지 로고용) */
.logo {
    display: flex;
    align-items: center;
}

.logo img {
    height: 80px; /* 헤더 비율에 맞춘 이미지 높이 (기존 2배 확대) */
    width: auto;
    /* 스크롤 시 부드러운 필터 전환을 위해 transition에 filter 속성 추가 */
    transition: height var(--transition-speed) ease, filter var(--transition-speed) ease;
}

#main-header.scrolled .logo img {
    height: 64px; /* 스크롤 시 부드럽게 축소 (기존 2배 확대) */
    filter: invert(1); /* 원본 로고의 디테일을 유지하며 색상만 반전 */
}

/* 우측 6대 메뉴 영역 */
.gnb ul {
    display: flex;
    gap: 2.5rem;
}

.gnb a {
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: opacity 0.3s ease;
    padding: 10px 0;
}

.gnb a:hover {
    opacity: 0.6;
}

/* 영문 대문자 메인 타이틀 (폰트 크기 조정) */
.gnb .en {
    font-family: 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', sans-serif;
    font-style: normal;
    font-size: 16px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 4px;
}

.gnb .ko {
    font-family: 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', sans-serif;
    font-size: 13px;
    font-weight: 500;
    opacity: 0.9;
    letter-spacing: 0px;
    white-space: nowrap;
    transition: color 0.3s ease;
}

/* 스크롤 시 밝은 배경에 맞춰 서브 텍스트 명도 조절 */
#main-header.scrolled .gnb .ko {
    color: var(--text-light);
}


/* ==================================
   2. Hero Section (메인 배너)
================================== */
.hero {
    position: relative;
    height: 100vh;
    width: 100%;
    background-color: #000; /* 영상 로드 전 Fallback */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    overflow: hidden; /* 비디오가 삐져나오지 않도록 차단 */
}

/* 백그라운드 영상 스타일 (화면 가득 채우기) */
.hero-video {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 0;
}

/* 상단 헤더 텍스트 가독성을 위한 최소한의 밝은 오버레이 (배경 화면 밝기 유지) */
.hero-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0) 25%);
    z-index: 1;
    pointer-events: none;
}


/* ==================================
   3. Content Sections & Animations
================================== */
.section {
    padding: 140px 40px;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.section.bg-white { background-color: #ffffff; }
.section.bg-light { background-color: var(--bg-light); }

.section-inner {
    max-width: 1200px;
    width: 100%;
    text-align: center;
}

.section-title {
    font-family: var(--font-en);
    font-size: 36px;
    font-weight: 300;
    letter-spacing: 4px;
    margin-bottom: 30px;
}

.section-desc {
    font-size: 16px;
    color: var(--text-light);
}

/* ==================================
   5. About Section (명코칭 소개)
================================== */
.about-content {
    display: flex;
    gap: 60px;
    margin-top: 60px;
    text-align: left;
}

.about-philosophy {
    flex: 1.2;
}

.about-profile {
    flex: 0.8;
    background-color: #fafafa;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid #eeeeee;
}

.about-subtitle {
    font-family: var(--font-ko);
    font-size: 22px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 25px;
    position: relative;
    padding-bottom: 15px;
}

.about-subtitle::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 35px;
    height: 2px;
    background-color: #c9a96e; /* 골드 포인트 */
}

.about-text {
    font-size: 16px;
    line-height: 1.8;
    color: #444444;
    margin-bottom: 35px;
}

.core-values {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.val-item {
    font-family: var(--font-en);
    font-size: 13px;
    background: #f4f4f4;
    padding: 8px 16px;
    border-radius: 30px;
    color: #555555;
    letter-spacing: 0.5px;
}

.val-item strong {
    color: #c9a96e;
    font-weight: 700;
    font-size: 14px;
}

.profile-list {
    list-style: none;
    padding: 0;
}

.profile-list li {
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 14px;
    color: #555555;
}

.profile-list li strong {
    display: inline-block;
    width: 50px;
    color: #111111;
    font-weight: 600;
}

/* 부드럽게 떠오르는 Fade-in Up 애니메이션 세팅 */
.fade-up {
    opacity: 0;
    transform: translateY(50px);
    transition: opacity 1s ease-out, transform 1s cubic-bezier(0.2, 0.8, 0.2, 1);
}

/* JavaScript 옵저버가 스크롤을 감지하여 추가하는 클래스 */
.fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ==================================
   6. Case & Insights Section
================================== */
.category-filter {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 40px;
    flex-wrap: wrap;
}

.filter-btn {
    padding: 10px 24px;
    background-color: #f4f4f4;
    color: #666666;
    border: 1px solid transparent;
    border-radius: 30px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: var(--font-ko);
}

.filter-btn:hover {
    background-color: #eeeeee;
}

.filter-btn.active {
    background-color: #1a233a;
    color: #ffffff;
    border-color: #1a233a;
    box-shadow: 0 4px 10px rgba(26, 35, 58, 0.2);
}

.case-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
    text-align: left;
}

.case-card {
    background-color: #ffffff;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 5px 20px rgba(0,0,0,0.04);
    transition: transform 0.4s ease, box-shadow 0.4s ease;
    cursor: pointer;
    border: 1px solid #f0f0f0;
}

.case-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}

.case-img {
    width: 100%;
    height: 220px;
    overflow: hidden;
}

.case-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

.case-card:hover .case-img img {
    transform: scale(1.08);
}

.case-info {
    padding: 30px 25px;
}

.case-tag {
    display: inline-block;
    font-size: 13px;
    color: #c9a96e;
    font-weight: 700;
    margin-bottom: 15px;
    letter-spacing: 0.5px;
}

.case-title {
    font-size: 18px;
    font-weight: 600;
    color: #1a233a;
    margin-bottom: 25px;
    line-height: 1.5;
    /* 두 줄 넘어가면 말줄임표 처리 */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.case-meta {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    color: #888888;
    border-top: 1px solid #eeeeee;
    padding-top: 15px;
}

.case-more {
    text-align: center;
}

.btn-more {
    display: inline-block;
    padding: 14px 45px;
    background-color: transparent;
    color: #1a233a;
    border: 1px solid #1a233a;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-more:hover {
    background-color: #1a233a;
    color: #ffffff;
}

/* ==================================
   7. Testimonials (고객 후기 무한 롤링)
================================== */
.marquee-container {
    width: 100vw; /* 전체 화면 너비 사용 */
    position: relative;
    left: 50%;
    transform: translateX(-50%);
    overflow: hidden;
    padding: 20px 0;
    /* 양쪽 끝이 자연스럽게 페이드아웃 되도록 마스크 적용 */
    mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
    -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent);
}

.marquee-track {
    display: flex;
    gap: 30px;
    width: max-content;
    /* 35초 동안 선형(linear)으로 무한(infinite) 반복 */
    animation: scroll-marquee 35s linear infinite;
}

.marquee-group {
    display: flex;
    gap: 30px;
}

/* 마우스 오버 시 일시 정지 (Hover Pause) */
.marquee-track:hover {
    animation-play-state: paused;
}

/* 핵심 애니메이션: 정확히 한 세트(group) + 여백만큼 이동 후 리셋 */
@keyframes scroll-marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(-50% - 15px)); }
}

/* 후기 카드 스타일링 */
.testimonial-card {
    background-color: #fafafa; /* 연한 그레이 (미니멀 럭셔리 무드) */
    border: 1px solid #eeeeee;
    border-radius: 6px; /* 아주 살짝 라운딩 */
    padding: 40px 30px;
    width: 380px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: left;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0,0,0,0.06);
}

.testimonial-card .quote {
    color: #1a233a; /* 짙은 네이비 */
    font-size: 15px;
    line-height: 1.7;
    margin-bottom: 30px;
    font-weight: 400;
}

.testimonial-card .reviewer {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.testimonial-card .stars {
    color: #c9a96e; /* 은은한 골드 */
    font-size: 14px;
    letter-spacing: 2px;
}

.testimonial-card .position {
    color: #1a233a;
    font-size: 13px;
    font-weight: 600;
}

/* ==================================
   4. Mobile Responsive (모바일 최적화)
================================== */
.mobile-menu-btn {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    width: 30px;
    height: 24px;
    position: relative;
    z-index: 1001; /* 오버레이보다 최상단 */
}

.mobile-menu-btn span {
    display: block;
    position: absolute;
    height: 2px;
    width: 100%;
    background-color: #ffffff; /* 투명 헤더일 때 기본 흰색 */
    transition: all 0.3s ease;
}

#main-header.scrolled .mobile-menu-btn span {
    background-color: #000000; /* 스크롤 시 검은색 */
}

/* 햄버거 버튼 3줄 간격 */
.mobile-menu-btn span:nth-child(1) { top: 0; }
.mobile-menu-btn span:nth-child(2) { top: 11px; }
.mobile-menu-btn span:nth-child(3) { top: 22px; }

/* 메뉴가 열렸을 때 햄버거 버튼 X 모양으로 변환 */
.mobile-menu-btn.active span:nth-child(1) {
    top: 11px;
    transform: rotate(45deg);
    background-color: #000000; /* 오버레이 위에서 검은색 */
}
.mobile-menu-btn.active span:nth-child(2) {
    opacity: 0;
}
.mobile-menu-btn.active span:nth-child(3) {
    top: 11px;
    transform: rotate(-45deg);
    background-color: #000000;
}

/* 모바일 전용 메뉴 오버레이 */
.mobile-nav-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.98);
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    align-items: center;
    justify-content: center;
}

.mobile-nav-overlay.active {
    opacity: 1;
    visibility: visible;
}

.mobile-gnb ul {
    display: flex;
    flex-direction: column;
    gap: 30px;
    text-align: center;
}

.mobile-gnb a {
    display: flex;
    flex-direction: column;
    align-items: center;
    color: #000000;
    transition: opacity 0.3s ease;
}

.mobile-gnb a:hover {
    opacity: 0.6;
}

.mobile-gnb .en {
    font-family: var(--font-en);
    font-size: 20px;
    font-weight: 600;
    letter-spacing: 2px;
    margin-bottom: 5px;
}

.mobile-gnb .ko {
    font-size: 14px;
    font-weight: 400;
    color: #666666;
}

/* ==================================
   8. Case & Insights Modal (팝업)
================================== */
.case-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
}

.case-modal.active {
    opacity: 1;
    visibility: visible;
}

.case-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(10, 15, 25, 0.7);
    backdrop-filter: blur(5px);
    z-index: 1;
}

.case-modal-content {
    background-color: #ffffff;
    width: 90%;
    max-width: 800px;
    max-height: 85vh;
    border-radius: 12px;
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.2);
    overflow: hidden;
}

.case-modal-close {
    position: absolute;
    top: 20px;
    right: 25px;
    background: transparent;
    border: none;
    font-size: 28px;
    color: #888;
    cursor: pointer;
    transition: color 0.3s ease;
    z-index: 3;
}

.case-modal-close:hover {
    color: #1a233a;
}

.case-modal-header {
    padding: 40px 40px 20px;
    border-bottom: 1px solid #eeeeee;
}

.case-modal-tag {
    display: inline-block;
    font-size: 14px;
    color: #c9a96e;
    font-weight: 700;
    margin-bottom: 15px;
}

.case-modal-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a233a;
    line-height: 1.4;
    margin-bottom: 20px;
}

.case-modal-meta {
    display: flex;
    gap: 20px;
    font-size: 14px;
    color: #888888;
}

.case-modal-body {
    padding: 30px 40px 40px;
    overflow-y: auto;
}

/* 커스텀 스크롤바 */
.case-modal-body::-webkit-scrollbar {
    width: 8px;
}
.case-modal-body::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
.case-modal-body::-webkit-scrollbar-thumb {
    background: #c1c1c1; 
    border-radius: 4px;
}
.case-modal-body::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8; 
}

.case-modal-img-wrapper {
    margin-bottom: 30px;
    border-radius: 8px;
    overflow: hidden;
}

.case-modal-img-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.case-modal-text {
    font-size: 16px;
    line-height: 1.8;
    color: #444444;
    white-space: normal; /* HTML 태그 구조를 자연스럽게 렌더링하기 위해 normal로 변경 */
}

/* 태블릿/모바일 반응형 구간 */
@media screen and (max-width: 768px) {
    :root {
        --header-height: 80px;
        --header-shrink: 60px;
    }

    .gnb {
        display: none; /* PC 메뉴 숨김 */
    }

    .mobile-menu-btn {
        display: block; /* 햄버거 버튼 활성화 */
    }
    
    .mobile-nav-overlay {
        display: flex; /* 레이아웃 준비 (기본 visibility: hidden) */
    }

    /* 로고 모바일 축소 (자연스럽게) */
    .logo img {
        height: 40px;
    }

    #main-header.scrolled .logo img {
        height: 32px;
    }

    .header-inner {
        padding: 0 20px;
    }
    
    .section-title {
        font-size: 28px;
    }
    
    .section {
        padding: 80px 20px;
    }

    /* About 섹션 모바일 대응 */
    .about-content {
        flex-direction: column;
        gap: 40px;
    }

    /* 포스트 상세 페이지 모바일 대응 */
    #postContainer {
        padding: 30px 20px !important;
    }
    #postTitle {
        font-size: 24px !important;
    }
}
/* ==================================
   ABOUT MCOACHING Section (New Layout)
================================== */
.about-container {
    display: flex;
    gap: 60px;
    margin-top: 50px;
    align-items: flex-start;
}

.about-left {
    flex: 0 0 35%;
}

.about-image-wrapper {
    position: relative;
}

.about-ceo-img {
    width: 100%;
    border-radius: 16px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
    display: block;
}

.about-badges {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-top: 20px;
}

.badge {
    background: #f8f9fb;
    padding: 15px 20px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid #eeeeee;
}

.badge-num {
    font-size: 24px;
    font-weight: 700;
    color: #1a233a;
    font-family: var(--font-en);
}

.badge-label {
    font-size: 13px;
    font-weight: 600;
    color: #666;
    text-transform: uppercase;
    font-family: var(--font-en);
    letter-spacing: 1px;
}

.about-right {
    flex: 1;
}

.about-slogan {
    font-size: 24px;
    font-weight: 700;
    color: #1a233a;
    line-height: 1.5;
    margin-bottom: 20px;
    word-break: keep-all;
}

.about-intro {
    font-size: 16px;
    color: #555;
    line-height: 1.8;
    margin-bottom: 50px;
    word-break: keep-all;
}

.about-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.grid-col {
    background: #ffffff;
    border-top: 3px solid #1a233a;
    padding-top: 20px;
}

.grid-title {
    font-size: 18px;
    font-weight: 700;
    color: #1a233a;
    margin-bottom: 15px;
    word-break: keep-all;
}

.grid-desc {
    font-size: 14px;
    color: #666;
    line-height: 1.7;
    word-break: keep-all;
}

@media screen and (max-width: 1024px) {
    .about-container {
        flex-direction: column;
    }
    .about-left {
        flex: 1;
        width: 100%;
    }
    .about-grid {
        grid-template-columns: 1fr;
    }
}

/* ==================================
   NEW ABOUT SECTION: PREMIUM MEDICAL STYLE
================================== */

/* 영역 1: 프리미엄 다크 스탯 배너 */
.dark-stat-banner {
    background-color: #001F3F; /* 딥 네이비 */
    padding: 7rem 0;
    color: #ffffff;
    text-align: center;
}

.banner-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
}

.banner-badge {
    display: inline-block;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 2px;
    margin-bottom: 25px;
    font-family: var(--font-en);
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 6px 18px;
    border-radius: 50px;
    background: rgba(255,255,255,0.05);
}

.banner-title {
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 30px;
    line-height: 1.4;
    word-break: keep-all;
}

.banner-desc {
    font-size: 17px;
    color: #e2e8f0; /* 연한 그레이 */
    line-height: 1.7;
    margin-bottom: 60px;
    word-break: keep-all;
    font-weight: 300;
}

.banner-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-bottom: 60px;
}

.stat-box {
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 30px 20px;
    background: rgba(255, 255, 255, 0.03);
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s ease, background 0.3s ease;
}

.stat-box:hover {
    transform: translateY(-5px);
    background: rgba(255, 255, 255, 0.08);
}

.stat-icon {
    font-size: 28px;
    margin-bottom: 15px;
}

.stat-label {
    font-size: 13px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
    letter-spacing: 1px;
    font-family: var(--font-en);
}

.stat-value {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
}

.banner-actions {
    display: flex;
    justify-content: center;
    gap: 20px;
}

.btn-solid-primary {
    background-color: #ffffff;
    color: #001F3F;
    padding: 16px 36px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-solid-primary:hover {
    background-color: #f1f1f1;
    box-shadow: 0 10px 20px rgba(0,0,0,0.2);
}

.btn-outline-light {
    background-color: transparent;
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
    padding: 16px 36px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50px;
    text-decoration: none;
    transition: all 0.3s ease;
}
.btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.1);
    border-color: #ffffff;
}

/* 영역 2: 하이엔드 3단 비주얼 카드 영역 */
.visual-cards-area {
    background-color: #ffffff;
    padding: 6rem 0;
}

.cards-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.v-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 480px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: transform 0.4s ease;
}

.v-card:hover {
    transform: translateY(-8px);
}

.v-card-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.85) 80%, rgba(0,0,0,0.95) 100%);
    z-index: 1;
}

.v-card-content {
    position: relative;
    z-index: 2;
    padding: 30px;
    color: #ffffff;
    width: 100%;
}

.v-card-title {
    font-size: 29px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.3;
}

.v-card-caption {
    font-size: 20px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    word-break: keep-all;
}

/* 영역 3: 브랜드 서사 영역 */
.brand-story-area {
    background-color: #f8f9fb;
    padding: 6rem 0 8rem;
}

.story-inner {
    max-width: 1000px;
    margin: 0 auto;
    padding: 0 20px;
    text-align: center;
}

.story-title {
    font-size: 28px;
    font-weight: 700;
    color: #001F3F; /* navy */
    margin-bottom: 30px;
}

.story-proposition {
    font-size: 20px;
    color: #333333;
    margin-bottom: 50px;
    word-break: keep-all;
}

.story-list {
    text-align: left;
    list-style: none;
    padding: 0;
    margin: 0;
}

.story-list li {
    font-size: 16px;
    color: #4b5563; /* 다크 그레이 */
    line-height: 1.9;
    margin-bottom: 20px;
    background: #ffffff;
    padding: 25px 35px;
    border-radius: 12px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.03);
    word-break: keep-all;
}

.story-list strong {
    color: #001F3F;
    font-size: 17px;
}

.story-divider {
    color: #cbd5e1;
    margin: 0 10px;
    font-weight: 300;
}

@media screen and (max-width: 1024px) {
    .banner-title { font-size: 28px; }
    .banner-stats-grid, .cards-grid { grid-template-columns: 1fr; }
    .banner-actions { flex-direction: column; }
    .v-card { height: 300px; }
}


/* ==================================
   NEW ABOUT SECTION: BACKGROUND VIDEO & TYPOGRAPHY
================================== */
.dark-stat-banner {
    background-color: transparent !important; /* 배경 비디오를 위해 기존 색상 제거 */
    padding: 7rem 0;
    color: #ffffff;
    text-align: center;
}

.about-bg-video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    transform: translateX(-50%) translateY(-50%);
    object-fit: cover;
    z-index: 1; /* 지시사항: z-index 1 */
}

.about-video-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: radial-gradient(circle at center, rgba(0, 15, 35, 0.88) 0%, rgba(0, 15, 35, 0.4) 100%);
    z-index: 2; /* 오버레이는 비디오 위 */
}

.dark-stat-banner .banner-title {
    font-size: 46px !important;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px !important;
    line-height: 1.3;
}

.banner-coach-line {
    font-size: 19px;
    color: #D4AF37; /* 골드 톤 */
    font-weight: 600;
    margin-bottom: 30px;
    letter-spacing: 0.5px;
}

.dark-stat-banner .banner-desc {
    font-size: 17px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    line-height: 1.8 !important;
    margin-bottom: 60px !important;
    font-weight: 300;
}

.dark-stat-banner .stat-box {
    background: rgba(0, 20, 40, 0.5) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
}

@media screen and (max-width: 1024px) {
    .dark-stat-banner .banner-title { font-size: 32px !important; }
    .banner-coach-line { font-size: 16px; }
}


/* 비디오 오버레이 가독성 극대화 */
.about-video-overlay {
    background: radial-gradient(circle at center, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.7) 100%) !important;
}

/* 통합된 카드 레이아웃 */
.about-integrated-cards {
    margin: 50px auto 50px auto;
}

.about-integrated-cards .v-card {
    height: 320px; /* 비디오 위에서 너무 크지 않게 살짝 조절 */
    align-items: center; /* 정중앙 정렬 */
    justify-content: center;
    text-align: center;
    border: 1px solid rgba(255,255,255,0.1);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}

.about-integrated-cards .v-card-overlay {
    background: rgba(0, 0, 0, 0.6) !important; /* 카드 내부도 살짝 어둡게 정돈 */
}

.about-integrated-cards .v-card-content {
    padding: 20px;
}

.about-integrated-cards .v-card-title {
    font-size: 20px;
    margin-bottom: 10px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.about-integrated-cards .v-card-caption {
    font-size: 14px;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
}

.dark-stat-banner .banner-desc {
    margin-top: 20px;
}


/* 1. 배경 영상 좌우 극단적 차광 (Linear Gradient) */
.about-video-overlay {
    background: linear-gradient(to right, #000000 0%, rgba(0,0,0,0.93) 25%, rgba(0,0,0,0.96) 50%, rgba(0,0,0,0.93) 75%, #000000 100%) !important;
}

/* 2. 비주얼 카드 사각형 틀 및 박스 완전 제거 */
.about-integrated-cards .v-card {
    height: auto !important; /* 높이 제한 해제 */
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 20px 10px;
}

.about-integrated-cards .v-card-content {
    padding: 0 !important;
}

.about-integrated-cards .v-card-title {
    font-size: 24px !important;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px !important;
    text-shadow: none !important; /* 투명 배경이므로 섀도우 최소화 */
}

.about-integrated-cards .v-card-caption {
    font-size: 16px !important;
    color: rgba(255, 255, 255, 0.85) !important;
    text-shadow: none !important;
    line-height: 1.6;
}


/* ==================================
   EXTRA DARK OVERLAY & RIGHT SIDE DARKENING
================================== */
.about-video-overlay {
    background: linear-gradient(to right, #000000 0%, rgba(0,0,0,0.85) 25%, rgba(0,0,0,0.65) 45%, rgba(0,0,0,0.6) 55%, rgba(0,0,0,0.8) 75%, rgba(0,0,0,0.95) 90%, #000000 100%) !important;
}

@media screen and (max-width: 1024px) {
    .banner-title span:first-child { font-size: 38px !important; }
    .banner-title span:last-child { font-size: 38px !important; }
}


/* ==================================
   HIGhend GLASSMORPHISM PILLARS
================================== */
.glass-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2.5rem;
}

.glass-pillar {
    background: rgba(0, 31, 63, 0.4); /* Deep Navy 베이스 */
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 520px;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.4);
    transition: transform 0.5s ease, border-color 0.5s ease, box-shadow 0.5s ease;
}

.glass-pillar:hover {
    transform: translateY(-15px);
    border-color: #50C878; /* Emerald Green 포인트 */
    box-shadow: 0 40px 80px rgba(0, 0, 0, 0.6);
}

.pillar-img {
    height: 260px;
    background-size: cover;
    background-position: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    transition: transform 0.8s ease;
}

.glass-pillar:hover .pillar-img {
    transform: scale(1.05);
}

.pillar-content {
    padding: 40px 30px;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: left;
    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0,0.3) 100%);
    position: relative;
    z-index: 2; /* scale 시 가려지지 않도록 */
}

.pillar-title {
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 20px;
    line-height: 1.4;
    word-break: keep-all;
    display: flex;
    align-items: flex-start;
}

.pillar-title span {
    color: #50C878; /* Emerald Green */
    margin-right: 10px;
    font-size: 32px;
}

.pillar-copy {
    font-size: 22px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
    word-break: keep-all;
}

@media screen and (max-width: 1024px) {
    .glass-pillars-grid {
        grid-template-columns: 1fr;
    }
    .glass-pillar {
        min-height: auto;
    }
}


/* ==================================
   RESTORED VISUAL CARDS AREA
================================== */
.visual-cards-area {
    background-color: #ffffff;
    padding: 6rem 0;
    scroll-margin-top: 120px;
}

.cards-grid-v {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    max-width: 1600px;
    margin: 0 auto;
    padding: 0 20px;
}

.v-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    height: 480px;
    background-size: cover;
    background-position: center;
    display: flex;
    align-items: flex-end;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    transition: transform 0.4s ease;
}

.v-card:hover {
    transform: translateY(-8px);
}

.v-card-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0) 60%, rgba(0,0,0,0.85) 80%, rgba(0,0,0,0.95) 100%);
    z-index: 1;
}

.v-card-content {
    position: relative;
    z-index: 2;
    padding: 30px;
    color: #ffffff;
    width: 100%;
    text-align: left;
}

.v-card-title {
    font-size: 29px !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-bottom: 12px !important;
    line-height: 1.3 !important;
}

.v-card-caption {
    font-size: 20px !important;
    color: rgba(255, 255, 255, 0.9) !important;
    line-height: 1.6 !important;
    word-break: keep-all;
}

@media screen and (max-width: 1024px) {
    .cards-grid-v { grid-template-columns: 1fr; }
    .v-card { height: 300px; }
}


/* ==================================
   EXTRA DARK OVERLAY & RIGHT SIDE DARKENING
================================== */
.about-video-overlay {
    background: linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 25%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.85) 75%, rgba(0,0,0,0.95) 100%) !important;
}

@media screen and (max-width: 1024px) {
    .banner-title span:first-child { font-size: 38px !important; }
    .banner-title span:last-child { font-size: 38px !important; }
}


/* ==================================
   EXTRA DARK OVERLAY & RIGHT SIDE DARKENING
================================== */
.about-video-overlay {
    background: linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.8) 35%, rgba(0,0,0,0.8) 75%, rgba(0,0,0,0.4) 100%) !important;
}

@media screen and (max-width: 1024px) {
    .banner-title span:first-child { font-size: 38px !important; }
    .banner-title span:last-child { font-size: 38px !important; }
}


/* ==================================
   EXTRA DARK OVERLAY & RIGHT SIDE DARKENING
================================== */
.about-video-overlay {
    background: linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 25%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.85) 75%, rgba(0,0,0,0.95) 100%) !important;
}

@media screen and (max-width: 1024px) {
    .banner-title span:first-child { font-size: 38px !important; }
    .banner-title span:last-child { font-size: 38px !important; }
}


/* ==================================
   EXTRA DARK OVERLAY & RIGHT SIDE DARKENING
================================== */
.about-video-overlay {
    background: linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 25%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.5) 75%, rgba(0,0,0,0.3) 100%) !important;
}

@media screen and (max-width: 1024px) {
    .banner-title span:first-child { font-size: 38px !important; }
    .banner-title span:last-child { font-size: 38px !important; }
}


/* ==================================
   EXTRA DARK OVERLAY & RIGHT SIDE DARKENING
================================== */
.about-video-overlay {
    background: linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 25%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0.4) 90%, rgba(0,0,0,0.95) 100%) !important;
}

@media screen and (max-width: 1024px) {
    .banner-title span:first-child { font-size: 38px !important; }
    .banner-title span:last-child { font-size: 38px !important; }
}


/* ==================================
   EXTRA DARK OVERLAY & RIGHT SIDE DARKENING
================================== */
.about-video-overlay {
    background: linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 25%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.8) 70%, rgba(0,0,0,0.95) 85%, #000000 100%) !important;
}

@media screen and (max-width: 1024px) {
    .banner-title span:first-child { font-size: 38px !important; }
    .banner-title span:last-child { font-size: 38px !important; }
}


/* ==================================
   EXTRA DARK OVERLAY & RIGHT SIDE DARKENING
================================== */
.about-video-overlay {
    background: linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 25%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.4) 75%, rgba(0,0,0,0.4) 85%, #000000 100%) !important;
}

@media screen and (max-width: 1024px) {
    .banner-title span:first-child { font-size: 38px !important; }
    .banner-title span:last-child { font-size: 38px !important; }
}


/* ==================================
   EXTRA DARK OVERLAY & RIGHT SIDE DARKENING
================================== */
.about-video-overlay {
    background: linear-gradient(to right, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.6) 25%, rgba(0,0,0,0.6) 50%, rgba(0,0,0,0.15) 75%, rgba(0,0,0,0.15) 80%, #000000 90%, #000000 100%) !important;
}

@media screen and (max-width: 1024px) {
    .banner-title span:first-child { font-size: 38px !important; }
    .banner-title span:last-child { font-size: 38px !important; }
}
\n
/* ==================================
   USER REQUESTED ENHANCEMENTS (2x Sizes, 2 Columns, Twinkle Stars, Card Backgrounds)
================================== */
.bright-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 40px !important;
}

.b-title { font-size: 42px !important; font-weight: 700 !important; margin-bottom: 15px !important; }
.b-title-ko { font-size: 24px !important; font-weight: 500 !important; color: #94a3b8 !important; }
.b-highlight { font-size: 26px !important; margin-top: 30px !important; margin-bottom: 15px !important; }
.b-desc { font-size: 20px !important; line-height: 1.8 !important; margin-bottom: 15px !important; }
.b-icon { 
    font-size: 45px !important; 
    width: 80px !important; 
    height: 80px !important; 
    margin-bottom: 35px !important; 
}

/* Increase card padding to accommodate larger text */
.bright-card {
    position: relative;
    overflow: hidden;
    padding: 60px 50px !important;
    background-color: #1a233a !important; /* Base dark color for card */
    border-radius: 20px !important; /* Slightly more rounded for larger cards */
}

/* Twinkling star background for cards */
.bright-card::before {
    content: "";
    position: absolute;
    top: -50%; left: -50%; width: 200%; height: 200%;
    background-image: 
        radial-gradient(1.5px 1.5px at 20px 30px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1.5px 1.5px at 40px 70px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(1px 1px at 90px 40px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2px 2px at 160px 120px, #ffffff, rgba(0,0,0,0)),
        radial-gradient(2.5px 2.5px at 200px 180px, #ffffff, rgba(0,0,0,0));
    background-size: 250px 250px;
    animation: twinkle-stars 8s linear infinite;
    opacity: 0.25;
    z-index: 0;
}

@keyframes twinkle-stars {
    0% { transform: translateY(0); opacity: 0.1; }
    50% { opacity: 0.5; }
    100% { transform: translateY(-125px); opacity: 0.1; }
}

.b-icon, .b-content {
    position: relative;
    z-index: 1;
}

/* Background for Compare & Roadmap to improve readability and premium feel */
.bright-compare, .bright-roadmap {
    background: rgba(255, 255, 255, 0.05) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 24px !important;
    padding: 70px 60px !important;
    margin-top: 80px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(15px);
}

.compare-title, .roadmap-title {
    font-size: 40px !important;
    margin-bottom: 60px !important;
}

/* Mobile adjustments */
@media screen and (max-width: 768px) {
    .bright-grid { grid-template-columns: 1fr !important; }
    .b-title { font-size: 32px !important; }
    .b-title-ko { font-size: 20px !important; }
    .b-highlight { font-size: 22px !important; }
    .b-desc { font-size: 18px !important; }
    .bright-card { padding: 40px 30px !important; }
    
    .bright-compare, .bright-roadmap {
        padding: 40px 20px !important;
        margin-top: 50px !important;
    }
    .compare-title, .roadmap-title {
        font-size: 32px !important;
        margin-bottom: 40px !important;
    }
}


/* ==================================
   USER REQUESTED ENHANCEMENTS (Cobalt Blue Gradient, Block KO Title)
================================== */
.b-title-ko {
    display: block !important;
    margin-left: 0 !important;
    margin-top: 15px !important;
    font-size: 24px !important;
    color: #94a3b8 !important;
}

.bright-card {
    /* Cobalt Blue Transparent Gradient */
    background: linear-gradient(135deg, rgba(0, 71, 171, 0.8) 0%, rgba(0, 20, 60, 0.1) 100%) !important;
    backdrop-filter: blur(15px) !important;
    border: 1px solid rgba(0, 100, 255, 0.15) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3) !important;
}


/* ==================================
   USER REQUESTED ENHANCEMENTS (CORE VALUE 20x, Dark Gray Title, Darkening Cobalt Cards, Yellow Highlight, Adjusted Card Sizes, Dark Cobalt Bottom Cards)
================================== */

/* 1. CORE VALUE 20배 확대 */
/* 기존 12px~14px 기준 20배면 약 240px~280px. 디자인을 해치지 않게 거대한 배경 텍스트 형태로 승화 */
.bright-badge {
    font-size: 150px !important; 
    line-height: 1 !important;
    display: block !important;
    text-align: center;
    color: rgba(255, 255, 255, 0.03) !important; /* 거대한 워터마크 느낌 */
    letter-spacing: 5px !important;
    margin-bottom: -40px !important; /* 아래 타이틀과 겹치게 배치 */
    font-weight: 900 !important;
}

/* 2. 메인 타이틀 및 서브 타이틀 진한 회색 */
.bright-main-title {
    color: #6b7280 !important; /* 진한 회색 (가독성을 위해 완전 어둡지는 않게) */
    position: relative;
    z-index: 2;
}
.bright-sub-title {
    color: #4b5563 !important; /* 조금 더 진한 회색 */
    position: relative;
    z-index: 2;
}

/* 3. 카드 세로 크기 40% 축소, 가로 크기 10% 확장 */
.bright-inner {
    max-width: 1400px !important; /* 가로폭을 넓혀 카드가 가로로 커지도록 유도 */
    margin: 0 auto;
}
.bright-grid {
    gap: 20px !important; /* 간격을 줄여 카드의 가로 폭 추가 확보 */
}
.bright-card {
    padding: 30px 40px !important; /* 세로 패딩 대폭 축소 (원래 60px -> 30px) */
    border-radius: 16px !important;
}
/* 카드 내부 요소들의 상하 여백도 축소하여 세로 길이를 줄임 */
.b-icon {
    margin-bottom: 15px !important; /* 원래 35px -> 15px */
    width: 60px !important;
    height: 60px !important;
    font-size: 35px !important;
}
.b-title {
    margin-bottom: 5px !important;
    font-size: 36px !important; /* 높이를 줄이기 위해 폰트 사이즈 살짝 조정 */
}
.b-title-ko {
    margin-top: 5px !important;
    margin-bottom: 15px !important;
}
.b-highlight {
    margin-top: 15px !important; /* 원래 30px -> 15px */
    margin-bottom: 10px !important;
}
.b-desc {
    margin-bottom: 5px !important;
    line-height: 1.5 !important;
}

/* 4. 아래 카드로 갈수록 배경 진하게 (코발트 블루 베이스) */
.bright-card:nth-child(1) { background: linear-gradient(135deg, rgba(0, 71, 171, 0.8), rgba(0, 20, 60, 0.1)) !important; }
.bright-card:nth-child(2) { background: linear-gradient(135deg, rgba(0, 60, 150, 0.85), rgba(0, 20, 60, 0.2)) !important; }
.bright-card:nth-child(3) { background: linear-gradient(135deg, rgba(0, 50, 130, 0.9), rgba(0, 20, 60, 0.4)) !important; }
.bright-card:nth-child(4) { background: linear-gradient(135deg, rgba(0, 40, 110, 0.95), rgba(0, 20, 60, 0.6)) !important; }
.bright-card:nth-child(5) { background: linear-gradient(135deg, rgba(0, 30, 90, 1), rgba(0, 20, 60, 0.8)) !important; }
.bright-card:nth-child(6) { background: linear-gradient(135deg, rgba(0, 20, 70, 1), rgba(0, 20, 60, 1)) !important; }

/* 5. 카드 안 글자는 백색, 초록색 하이라이트는 밝은 노랑 */
.bright-card .b-title,
.bright-card .b-title-ko,
.bright-card .b-desc {
    color: #ffffff !important;
}
.bright-card .b-highlight {
    color: #ffdd00 !important; /* 밝은 노랑 (골드 옐로우) */
}
.bright-card .b-icon {
    color: #ffffff !important; /* 아이콘 색상도 흰색으로 통일할 수 있음. 원한다면 노랑으로: color: #ffdd00 !important; */
}

/* 6. 로드맵 카드 배경 진한 코발트블루 그라데이션 */
.bright-roadmap {
    background: linear-gradient(135deg, #002255 0%, #000a1a 100%) !important; /* 진한 코발트 블루 그라데이션 */
    border: 1px solid rgba(0, 100, 255, 0.2) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4) !important;
}

/* 추가: 모바일 최적화 (CORE VALUE 크기) */
@media screen and (max-width: 768px) {
    .bright-badge {
        font-size: 60px !important;
        margin-bottom: -20px !important;
    }
}

/* ==================================
   USER REQUESTED ENHANCEMENTS (Roadmap on Top, 2x Text Sizes)
================================== */
/* 로드맵 타이틀: 진한(완전한) 흰색 */
.roadmap-title {
    color: #ffffff !important;
    font-weight: 800 !important;
    font-size: 38px !important;
    margin-bottom: 50px !important;
}

/* 로드맵 마진: 원래 하단에 있던 것을 상단으로 올렸으므로 마진 재조정 */
.bright-roadmap {
    margin-bottom: 80px !important; /* 아래 The BRIGHT Journey 타이틀과의 간격 */
    margin-top: 20px !important;
}

/* 영문 알파벳(B,R,I,G,H,T) 아이콘 크기 2배 확대 */
.roadmap-step .step-icon {
    font-size: 40px !important;
    width: 80px !important;  
    height: 80px !important;
    line-height: 80px !important;
    border-width: 4px !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.4) !important;
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* 알파벳 아래 글자들 크기 2배 확대 */
.roadmap-step .step-label {
    font-size: 32px !important; 
    font-weight: 700 !important;
    color: #ffffff !important;
    margin-top: 20px !important;
    white-space: nowrap;
}

/* 연결 선과 점 크기 및 위치 조정 (커진 아이콘에 맞춤) */
.roadmap-step .dot {
    width: 20px !important;
    height: 20px !important;
    background-color: #ffdd00 !important; /* 점은 포인트 컬러 유지 */
}

.roadmap-line {
    height: 4px !important;
    top: 40px !important; /* 커진 아이콘의 절반 높이로 위치 */
    background-color: rgba(255, 255, 255, 0.2) !important;
}

/* 모바일 추가 최적화 */
@media screen and (max-width: 768px) {
    .roadmap-step .step-label { font-size: 22px !important; }
    .roadmap-step .step-icon { width: 60px !important; height: 60px !important; line-height: 60px !important; font-size: 28px !important; }
    .roadmap-title { font-size: 28px !important; }
}


/* ==================================
   USER REQUESTED ENHANCEMENTS (Core Value Badge)
================================== */
.core-value-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    color: #1e3a8a; /* 진한 코발트 블루 텍스트 */
    font-size: 26px;
    font-weight: 900;
    padding: 15px 50px;
    border-radius: 50px; /* 양끝이 둥근 캡슐형 동그라미 */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
    text-transform: uppercase;
    letter-spacing: 2px;
}

@media screen and (max-width: 768px) {
    .core-value-badge {
        font-size: 20px;
        padding: 12px 35px;
    }
}
/* Subtitle bold styling */
.bright-sub-title {
    font-weight: 900 !important;
    font-size: 26px !important;
    color: #1e40af !important; /* 진한 코발트 블루 */
    letter-spacing: 1px !important;
    /* 어두운 배경 대비 가독성을 위해 은은한 화이트 네온 그림자 추가 (사용자 요청은 아니지만 가독성 보완) */
    text-shadow: 0 0 10px rgba(255, 255, 255, 0.4) !important;
}



/* ==================================
   USER REQUESTED ENHANCEMENTS (Compare Section 2x Size)
================================== */
.compare-card p {
    font-size: 28px !important; /* 기존 15px~17px 대비 약 2배 확대 */
    line-height: 1.6 !important;
    font-weight: 700 !important;
    margin: 0 !important;
}

.compare-card {
    min-height: 140px !important; /* 커진 폰트를 담을 수 있도록 박스 최소 높이 상향 */
    padding: 35px 40px !important; /* 박스 내부 여백 확대 */
    border-radius: 16px !important; /* 박스가 커진 만큼 모서리 곡률도 살짝 조정 */
}

/* 화살표 크기도 텍스트 확대에 비례하여 조정 */
.compare-arrow {
    width: 60px !important;
    height: 60px !important;
}

.arrow-icon {
    font-size: 30px !important;
}

@media screen and (max-width: 768px) {
    .compare-card p {
        font-size: 20px !important;
    }
    .compare-card {
        min-height: 80px !important;
        padding: 20px 25px !important;
    }
    .compare-arrow {
        width: 40px !important;
        height: 40px !important;
    }
    .arrow-icon {
        font-size: 20px !important;
    }
}



/* ==================================
   USER REQUESTED ENHANCEMENTS (Compare Section No-Wrap)
================================== */
/* 변화의 실체 컨테이너를 가로로 대폭 확장하여 줄바꿈 방지 */
.compare-visual-wrap {
    max-width: 1400px !important; /* 기존 900px에서 대폭 확장 */
    width: 100%;
}

.compare-card {
    flex: 1 1 auto !important; /* 카드가 남는 공간을 충분히 차지하도록 허용 */
}

.compare-card p {
    white-space: nowrap !important; /* 강제 줄바꿈 방지 */
    /* 만약 컨테이너보다 글자가 너무 길면 살짝 줄이거나 넘치게 할지 결정, 보통 1400px이면 28px 한 줄 충분함 */
}

/* 모바일에서는 nowrap을 풀어서 화면 바깥으로 나가는 것을 방지 */
@media screen and (max-width: 1024px) {
    .compare-card p {
        white-space: normal !important;
        word-break: keep-all;
    }
}



/* ==================================
   USER REQUESTED ENHANCEMENTS (Tidy & Compact Compare Section)
================================== */
.compare-row {
    display: flex;
    align-items: stretch; /* 높이를 동일하게 맞춤 */
    justify-content: center;
    gap: 20px !important; /* 카드 간격 일정하게 유지 */
    margin-bottom: 15px !important; /* 행간 간격 축소 */
}

.compare-card {
    flex: 1 !important; /* 좌우 카드의 너비를 정확히 50:50으로 강제 통일 */
    min-height: 80px !important; /* 과도하게 컸던 세로 높이 축소 */
    padding: 20px 30px !important; /* 내부 여백 축소 */
    display: flex;
    align-items: center;
    justify-content: center; /* 텍스트를 중앙 정렬하여 시각적 안정감 부여 */
    text-align: center !important;
}

/* 화살표 위치 고정 및 크기 축소 */
.compare-arrow {
    width: 50px !important;
    height: auto !important; /* stretch에 맞춰 가운데 정렬되도록 조정 */
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.arrow-icon {
    font-size: 26px !important;
}

/* 텍스트 크기 유지하되 너무 크면 박스가 비대해지므로 살짝만 조정 */
.compare-card p {
    font-size: 24px !important; /* 28px은 박스를 너무 키우게 되므로 24px로 타협 (여전히 큼직함) */
    white-space: nowrap !important;
    margin: 0 !important;
}

@media screen and (max-width: 1024px) {
    .compare-row {
        flex-direction: column;
        gap: 10px !important;
    }
    .compare-card {
        width: 100% !important;
    }
    .compare-arrow {
        height: 40px !important;
    }
}



/* ==================================
   USER REQUESTED ENHANCEMENTS (Sophisticated Custom Arrow)
================================== */
/* 화살표 컨테이너 자체를 하나의 굵고 긴 선(Line)으로 변형 */
.compare-arrow {
    align-self: center !important; /* 부모의 stretch(높이 늘어남) 속성 무시하고 세로 정중앙 고정 */
    width: 120px !important; /* 화살표 길이를 크게 연장 -> 자연스럽게 양쪽 박스 가로 크기 축소됨 */
    height: 5px !important; /* 선 굵기를 2배 이상 두껍게 (5px) */
    background-color: #00d282 !important; /* 브랜드 그린 컬러 적용 */
    border: none !important; /* 기존 동그라미 테두리 삭제 */
    border-radius: 0 !important; /* 둥근 배경 삭제 */
    margin: 0 15px !important; /* 박스와 화살표 사이 여백 */
    position: relative; /* 화살촉 기준점 */
}

/* 기존에 텍스트(→)로 들어있던 기호는 숨김 처리 */
.arrow-icon {
    display: none !important; 
}

/* CSS를 활용하여 화살표 촉(Head)을 세련되게 직접 디자인 */
.compare-arrow::after {
    content: '';
    position: absolute;
    right: -1px; /* 화살촉 위치를 끝에 맞춤 */
    top: 50%;
    transform: translateY(-50%);
    border-left: 20px solid #00d282; /* 화살촉의 길이를 길고 샤프하게 */
    border-top: 12px solid transparent; /* 위아래 투명하게 깎아서 삼각형 생성 */
    border-bottom: 12px solid transparent;
}

/* 모바일 화면 최적화 (화살표가 아래를 향하도록 수직으로 변형) */
@media screen and (max-width: 1024px) {
    .compare-arrow {
        width: 5px !important; /* 모바일에서는 세로선이므로 너비가 굵기 */
        height: 60px !important; /* 세로선 길이 */
        margin: 20px auto !important; /* 상하 여백 */
    }
    .compare-arrow::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: -1px; /* 촉이 아래를 향하도록 배치 */
        transform: translateX(-50%);
        border-left: 12px solid transparent;
        border-right: 12px solid transparent;
        border-top: 20px solid #00d282; /* 아래를 향하는 삼각형 */
        border-bottom: none;
    }
}

/* ==================================
   About Hero Manifesto (Stacked Layout)
================================== */
.about-hero-manifesto {
    background-color: #FFFFFF;
    padding: 100px;
    max-width: 1400px;
    margin: 0 auto;
}

.manifesto-header {
    margin-bottom: 50px;
}

.manifesto-content-split {
    display: flex;
    align-items: center; /* Vertically center content, allowing natural image aspect ratios */
}

.manifesto-content-split.reverse {
    flex-direction: row-reverse;
}

.manifesto-content-split.reverse .manifesto-left {
    padding-right: 0;
    padding-left: 60px;
}

.manifesto-left {
    width: 65%;
    padding-right: 60px;
    text-align: left;
}

.manifesto-label, .context-label {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-style: italic;
    font-size: 26pt; /* ~30% reduced from 38pt */
    font-weight: 700; /* Bold */
    letter-spacing: -1px; /* Tighter letter spacing */
    margin-bottom: 24px;
    text-transform: uppercase;
    text-align: left;
    display: inline-block;
    position: relative;
    padding-left: 32px; /* Space for the left-attached bar */
}

.sub-topic-label {
    font-family: 'Cormorant Garamond', 'Georgia', serif;
    font-style: italic;
    font-size: 18pt;
    font-weight: 800; /* Thicker weight as requested */
    color: #FFFFFF; /* White for perfect readability against dark blue */
    letter-spacing: 1px;
    margin-bottom: 24px;
    display: inline-block;
    padding: 8px 30px;
    background: linear-gradient(135deg, #002266 0%, #0047AB 100%); /* Vivid Cobalt Blue Gradient */
    border-radius: 50px; /* Pill-shaped box */
    box-shadow: 0 6px 20px rgba(0, 71, 171, 0.2); /* Elegant blue glow */
}

.reverse-header {
    text-align: right;
}

.reverse-header .manifesto-label, .reverse-header .context-label {
    text-align: right;
    padding-left: 0;
    padding-right: 32px; /* Space for the right-attached bar */
}

.gradient-title {
    background: linear-gradient(135deg, #002266 0%, #3388FF 40%, #0047AB 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(1px 2px 3px rgba(0, 0, 0, 0.15)); /* 3D effect */
}

.manifesto-label::before, .context-label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 12px; /* Thicker bar */
    height: 50px;
    background-color: #0047AB; /* Vivid Cobalt Blue */
}

.reverse-header .manifesto-label::before, .reverse-header .context-label::before {
    left: auto;
    right: 0;
}

.manifesto-divider {
    height: 1px;
    background-color: #E2E8F0;
    width: 100%;
    margin: 32px 0;
    border: none;
}

.manifesto-kr, .context-kr {
    font-size: 18pt; /* Slightly larger than 15pt English */
    color: #071E3D;
    font-weight: 700;
    line-height: 1.45;
    margin-bottom: 24px;
    word-break: keep-all;
    text-align: left;
}

.manifesto-en, .context-en {
    font-size: 15pt;
    color: #475569;
    font-style: italic;
    line-height: 1.6;
    margin-bottom: 0;
    text-align: left;
}

.manifesto-body, .context-body {
    font-size: 14pt;
    color: #334155;
    line-height: 1.8;
    word-break: keep-all;
    text-align: left;
}

.manifesto-indicator {
    display: inline-block;
    background-color: #FFFFFF;
    padding: 14px 32px;
    border-radius: 50px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    font-size: 13pt;
    color: #071E3D;
    font-weight: 600;
    margin-top: 0;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
}

.manifesto-indicator:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
    color: #0047AB; /* Vivid Cobalt Blue on hover */
}

.manifesto-right {
    width: 35%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.manifesto-img {
    width: 100%;
    aspect-ratio: 16 / 11; /* Force identical size for all images (landscape) */
    object-fit: cover; /* Gracefully crop any outlier like G image */
    border-radius: 24px;
    display: block;
}

.hero-img {
    height: 480px !important; /* Force identical vertical size for top two sections */
    object-fit: cover;
}

@media (max-width: 1024px) {
    .about-hero-manifesto {
        flex-direction: column;
        padding: 100px 20px 60px;
    }
    .manifesto-left {
        width: 100%;
        padding-right: 0;
        margin-bottom: 40px;
    }
    .manifesto-right {
        width: 100%;
    }
    .manifesto-label, .context-label {
        font-size: 20pt;
    }
    .manifesto-kr {
        font-size: 20pt;
    }
    .context-kr {
        font-size: 24pt;
    }
    .manifesto-en, .context-en {
        font-size: 15pt;
    }
    .context-body {
        font-size: 14pt;
    }
    .manifesto-img {
        height: 350px;
    }
}

/* ==================================
   Premium Compare Section (BRIGHT Journey)
================================== */
.premium-compare-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.premium-compare-row {
    display: flex;
    align-items: stretch;
    justify-content: center;
    gap: 30px;
}
.premium-before-card, .premium-after-card {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 30px 40px;
    border-radius: 16px;
    text-align: center;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.premium-before-card:hover, .premium-after-card:hover {
    transform: translateY(-5px);
}
.premium-before-card {
    background-color: #F8FAFC; /* Extremely soft premium gray */
    border: 1px solid #E2E8F0;
    color: #64748B; /* Muted Oxford Blue */
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02); /* Very subtle float */
}
.premium-before-card p {
    font-size: 20px;
    font-weight: 500;
    margin: 0;
}
.premium-after-card {
    background: linear-gradient(135deg, #002266 0%, #0047AB 100%);
    border: none;
    color: #FFFFFF;
    box-shadow: 0 10px 30px rgba(0, 71, 171, 0.15);
}
.premium-after-card p {
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}
.premium-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 40px;
    color: #0047AB;
    font-family: 'Playfair Display', 'Cormorant Garamond', serif;
    font-style: italic;
    width: 60px;
    flex-shrink: 0;
}

@media screen and (max-width: 1024px) {
    .premium-compare-row {
        flex-direction: column;
        gap: 15px;
    }
    .premium-arrow {
        transform: rotate(90deg);
        height: 40px;
        width: 100%;
    }
}

/* --- Navigation Dropdown CSS --- */
.has-dropdown {
    position: relative;
}

.dropdown-menu {
    display: block !important;
    position: absolute;
    top: 100%;
    left: 0;
    transform: translateY(10px);
    background: #ffffff;
    border: 1px solid #eaeaea;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    border-radius: 4px;
    padding: 10px 0;
    min-width: 180px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    z-index: 100;
    list-style: none;
    margin: 0;
    text-align: left;
}

.has-dropdown:hover .dropdown-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dropdown-menu li {
    display: block;
    margin: 0;
}

.dropdown-menu li a {
    display: block;
    padding: 10px 20px;
    color: #333 !important;
    font-size: 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s, color 0.2s;
    font-weight: normal;
}

.dropdown-menu li a:hover {
    background: #f8f9fa;
    color: #00d282 !important;
}

/* Arrow indicator for dropdown parent */
.has-dropdown > a::after {
    content: '';
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    border-top: 4px solid currentColor;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
    transition: transform 0.3s;
    opacity: 0.7;
}

.has-dropdown:hover > a::after {
    transform: rotate(180deg);
}

/* ==========================================================================
   SCF (Self-Care Facilitator) Section - Dark Glassmorphism Theme
   ========================================================================== */

.scf-section {
    position: relative;
    background: linear-gradient(135deg, #050f24 0%, #001a4d 50%, #03122f 100%);
    color: #ffffff;
    padding: 100px 0;
    overflow: hidden;
    font-family: 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}

/* Background Glowing Orbs */
.scf-section::before,
.scf-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    z-index: 0;
    pointer-events: none;
}
.scf-section::before {
    width: 600px;
    height: 600px;
    background: rgba(30, 80, 255, 0.2);
    top: -200px;
    left: -200px;
}
.scf-section::after {
    width: 500px;
    height: 500px;
    background: rgba(0, 162, 255, 0.15);
    bottom: -150px;
    right: -100px;
}

.scf-container {
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Glassmorphism Cards */
.scf-glass-card {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 40px 30px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.scf-glass-card:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

/* Typographic Elements */
.scf-badge {
    display: inline-block;
    padding: 6px 16px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 30px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 1px;
    margin-bottom: 20px;
    color: #8bb3ff;
}
.scf-title {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 20px;
    line-height: 1.3;
    word-break: keep-all;
    background: linear-gradient(to right, #ffffff, #a3c2ff);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
.scf-subtitle {
    font-size: 18px;
    color: #a0aec0;
    font-weight: 400;
    line-height: 1.6;
    margin-bottom: 60px;
    max-width: 800px;
    word-break: keep-all;
}

/* 3 Core Values Grid */
.scf-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 320px));
    justify-content: center;
    gap: 30px;
    margin-bottom: 80px;
}
.scf-card-number {
    font-size: 60px;
    font-weight: 900;
    color: rgba(255, 255, 255, 0.1);
    line-height: 1;
    margin-bottom: 10px;
}
.scf-card-title {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
    word-break: keep-all;
}
.scf-card-desc {
    font-size: 15.5px;
    color: #cbd5e1;
    line-height: 1.7;
    font-weight: 400;
    word-break: keep-all;
}

/* REACH Timeline / Mechanism */
.scf-reach-container {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 24px;
    padding: 50px;
    margin-bottom: 80px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}
.scf-reach-title {
    text-align: center;
    font-size: 28px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 40px;
}
.scf-reach-steps {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.scf-reach-step {
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    padding: 20px 30px;
    transition: background 0.3s ease;
}
.scf-reach-step:hover {
    background: rgba(255, 255, 255, 0.08);
}
.scf-reach-letter {
    font-size: 36px;
    font-weight: 900;
    color: #4a90e2;
    width: 60px;
    flex-shrink: 0;
}
.scf-reach-name {
    font-size: 20px;
    font-weight: 700;
    color: #fff;
    width: 180px;
    flex-shrink: 0;
}
.scf-reach-desc {
    font-size: 16px;
    color: #cbd5e1;
    font-weight: 400;
}

/* Curriculum Grid */
.scf-curriculum-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 350px));
    justify-content: center;
    gap: 20px;
}
.scf-curriculum-day {
    background: rgba(0, 34, 102, 0.4);
    border-top: 4px solid #4a90e2;
    padding: 30px;
    border-radius: 0 0 16px 16px;
}
.scf-day-title {
    font-size: 20px;
    font-weight: 800;
    color: #fff;
    margin-bottom: 10px;
}
.scf-day-subtitle {
    font-size: 15px;
    color: #8bb3ff;
    margin-bottom: 20px;
    font-weight: 600;
}
.scf-day-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.scf-day-list li {
    font-size: 14px;
    color: #cbd5e1;
    line-height: 1.6;
    margin-bottom: 10px;
    padding-left: 15px;
    position: relative;
}
.scf-day-list li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: #4a90e2;
}

@media (max-width: 991px) {
    .scf-grid { grid-template-columns: 1fr; }
    .scf-curriculum-grid { grid-template-columns: 1fr; }
    .scf-reach-step { flex-direction: column; align-items: flex-start; gap: 10px; padding: 25px; }
    .scf-reach-name { width: auto; }
}

/* ==========================================================================
   SCF Expanded Elements
   ========================================================================== */

/* Mastery Grid (3 Core Competencies) */
.scf-mastery-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 320px));
    justify-content: center;
    gap: 30px;
    margin-bottom: 40px;
}
.scf-mastery-card {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    overflow: hidden;
}
.scf-mastery-header {
    background: #002266;
    padding: 15px;
    text-align: center;
    font-size: 18px;
    font-weight: 800;
    color: #fff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.scf-mastery-body {
    padding: 25px;
    font-size: 15px;
    line-height: 1.6;
    color: #cbd5e1;
    text-align: center;
    word-break: keep-all;
}

/* Professional Values */
.scf-values-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 480px));
    justify-content: center;
    gap: 40px;
    margin-bottom: 80px;
}
.scf-value-box {
    background: rgba(4, 21, 56, 0.6);
    border: 1px solid rgba(74, 144, 226, 0.3);
    border-radius: 16px;
    padding: 30px;
}
.scf-value-title {
    font-size: 20px;
    font-weight: 800;
    color: #4a90e2;
    margin-bottom: 15px;
}
.scf-value-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.scf-value-list li {
    font-size: 15px;
    color: #cbd5e1;
    margin-bottom: 8px;
    padding-left: 15px;
    position: relative;
}
.scf-value-list li::before {
    content: '✓';
    position: absolute;
    left: 0;
    color: #4a90e2;
}

/* Detailed Curriculum Time Blocks */
.scf-time-block {
    margin-bottom: 25px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 12px;
    padding: 20px;
}
.scf-time-header {
    font-size: 15px;
    font-weight: 800;
    color: #8bb3ff;
    margin-bottom: 10px;
    border-bottom: 1px solid rgba(139, 179, 255, 0.2);
    padding-bottom: 8px;
}
.scf-time-title {
    font-size: 17px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 15px;
}

/* Course Info Bar */
.scf-course-info {
    background: linear-gradient(90deg, rgba(74,144,226,0.1) 0%, rgba(0,34,102,0.4) 100%);
    border: 1px solid rgba(74, 144, 226, 0.2);
    border-radius: 24px;
    padding: 40px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 30px;
    margin-bottom: 60px;
}
.scf-info-item {
    flex: 1;
    min-width: 250px;
}
.scf-info-label {
    font-size: 14px;
    color: #8bb3ff;
    font-weight: 600;
    margin-bottom: 5px;
}
.scf-info-value {
    font-size: 18px;
    color: #fff;
    font-weight: 700;
}

@media (max-width: 768px) {
    .scf-mastery-grid { grid-template-columns: 1fr; }
    .scf-values-grid { grid-template-columns: 1fr; }
}

/* REACH SYSTEM Hero Section */
.reach-hero-section {
    background-color: #F8FAFC; /* Soft White */
    width: 100%;
    padding: 100px 5%; /* Left/Right padding to prevent full stretch */
}

.reach-hero-container {
    display: grid;
    grid-template-columns: 1fr 1fr; /* Equal 50:50 size */
    gap: 40px; /* Gap between videos */
    width: 100%;
    max-width: 1540px; /* Increased max-width by 10% to make the whole section proportionally larger */
    margin: 0 auto;
    /* Removed forced height to allow aspect-ratio to dictate height proportionally */
}

.reach-hero-left, .reach-hero-right {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 30px; /* Fully rounded elegant corners */
    aspect-ratio: 16 / 9; /* Restore exact video ratio to prevent colored letterboxing */
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

.reach-hero-left:hover, .reach-hero-right:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(0,0,0,0.1);
}

.reach-hero-left:active, .reach-hero-right:active {
    transform: scale(0.95);
    transition: transform 0.1s ease;
}

.reach-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Fill perfectly to avoid any colored gaps */
    z-index: 1;
    border-radius: 30px; /* Ensure the video itself has rounded corners */
}

.reach-hero-right .reach-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 44, 95, 0.15); /* 15% Deep Navy filter */
    z-index: 2;
    border-radius: 30px; /* Match video border radius */
}

.reach-hero-right .reach-content {
    position: relative;
    z-index: 3;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 2rem;
}

.reach-top-title {
    font-size: 20px;
    color: #C5A059; /* Accent Gold */
    font-weight: 500;
    letter-spacing: 0.15em;
    margin-bottom: 24px;
}

.reach-main-title {
    font-size: 48px;
    font-weight: 700;
    color: #FFFFFF;
    letter-spacing: 0.1em;
    margin-bottom: 24px;
}

.reach-sub-text {
    font-size: 22px;
    color: #FFFFFF;
    font-family: 'Playfair Display', 'Cormorant Garamond', 'Noto Serif KR', serif; /* Thin Serif */
    font-weight: 300;
    letter-spacing: 0.08em;
    margin: 0;
}

@media (max-width: 992px) {
    .reach-hero-container {
        grid-template-columns: 1fr;
        height: auto;
    }
    .reach-hero-left, .reach-hero-right {
        height: 60vh;
    }
}

/* ==================================
   REACH SYSTEM: SUB-BLOCKS 2, 3, 4
================================== */
.reach-details-section {
    background-color: #F8FAFC; /* Soft White */
    padding: 120px 5%;
    color: #002C5F; /* Deep Navy Default */
}

.reach-details-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 160px; /* Huge vertical padding between sub-blocks for anti-box feel */
}

/* SUB-BLOCK 2: Diagnosis */
.signal-diagnosis {
    display: grid;
    grid-template-columns: 4.5fr 5.5fr; /* Asymmetric */
    gap: 80px;
    align-items: center;
}

.signal-title {
    font-size: 42px;
    font-weight: 800;
    color: #002C5F;
    line-height: 1.4;
    margin-bottom: 24px;
    word-break: keep-all;
}

.signal-desc {
    font-size: 20px;
    color: #4A5568;
    line-height: 1.7;
    word-break: keep-all;
}

.signal-right {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.signal-item {
    display: flex;
    gap: 30px;
    align-items: flex-start;
}

.signal-num {
    font-size: 24px;
    font-weight: 700;
    color: #C5A059; /* Accent Gold */
    font-family: 'Montserrat', sans-serif;
    margin-top: 4px;
}

.signal-item-title {
    font-size: 22px;
    font-weight: 700;
    color: #002C5F;
    margin-bottom: 10px;
}

.signal-item-desc {
    font-size: 16px;
    color: #4A5568;
    line-height: 1.6;
}

/* SUB-BLOCK 3: Pathway */
.mechanism-pathway {
    position: relative;
    padding: 60px 0;
}

.pathway-line {
    position: absolute;
    top: 100px; /* Center of the letter */
    left: 0;
    width: 100%;
    height: 1px;
    background-color: rgba(0, 44, 95, 0.15); /* Minimal horizontal line */
    z-index: 1;
}

.pathway-steps {
    display: flex;
    justify-content: space-between;
    position: relative;
    z-index: 2;
    gap: 40px;
}

.pathway-step {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.step-letter {
    font-size: 80px;
    font-weight: 300;
    font-family: 'Playfair Display', 'Cormorant Garamond', serif;
    color: #002C5F;
    background-color: #F8FAFC; /* Overlap line to hide it */
    padding: 0 20px;
    margin-bottom: 30px;
    line-height: 1;
}

.step-title {
    font-size: 22px;
    font-weight: 700;
    color: #C5A059;
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.step-ko {
    font-size: 16px;
    font-weight: 500;
    color: #002C5F;
}

.step-desc {
    font-size: 15px;
    color: #4A5568;
    line-height: 1.7;
    word-break: keep-all;
}

/* SUB-BLOCK 4: Data Proof */
.data-proof {
    text-align: center;
}

.data-proof-main-title {
    font-size: 32px;
    font-weight: 700;
    color: #002C5F;
    margin-bottom: 80px;
}

.data-proof-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 60px;
}

.data-item {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.data-number {
    font-size: 120px; /* Huge numerical data */
    font-weight: 300;
    font-family: 'Montserrat', sans-serif;
    color: #002C5F;
    line-height: 1;
    margin-bottom: 24px;
    letter-spacing: -2px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.data-unit {
    font-size: 24px;
    font-weight: 500;
    color: #C5A059;
    margin-left: 10px;
    font-family: 'Noto Sans KR', sans-serif;
    letter-spacing: 0;
    margin-bottom: 15px; /* Adjust baseline manually for flex-end */
}

.data-title {
    font-size: 22px;
    font-weight: 700;
    color: #002C5F;
    margin-bottom: 16px;
}

.data-desc {
    font-size: 15px;
    color: #718096; /* Subtle text for official scale */
    line-height: 1.6;
    word-break: keep-all;
}

/* Responsive */
@media (max-width: 1024px) {
    .signal-diagnosis {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .pathway-steps {
        flex-direction: column;
        gap: 60px;
    }
    .pathway-line {
        display: none; /* Hide line on mobile */
    }
    .step-letter {
        margin-bottom: 15px;
    }
    .data-proof-grid {
        grid-template-columns: 1fr;
    }
    .data-number {
        font-size: 90px;
    }
    .data-unit {
        font-size: 20px;
        margin-bottom: 10px;
    }
}

/* =========================================================================
   SCF NEW SECTION & MODAL (Anti-Box, Soft White, Deep Navy, Accent Gold)
   ========================================================================= */

/* Main Section */
.scf-new-section {
    position: relative;
    background: linear-gradient(135deg, #050f24 0%, #001a4d 50%, #03122f 100%);
    color: #ffffff;
    padding: 180px 5% 150px 5%;
    overflow: hidden;
    font-family: 'Malgun Gothic', 'Noto Sans KR', sans-serif;
}

/* Background Glowing Orbs for new section */
.scf-new-section::before,
.scf-new-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
    z-index: 0;
    pointer-events: none;
}
.scf-new-section::before {
    width: 600px;
    height: 600px;
    background: rgba(30, 80, 255, 0.2);
    top: -200px;
    left: -200px;
}
.scf-new-section::after {
    width: 500px;
    height: 500px;
    background: rgba(0, 162, 255, 0.15);
    bottom: -150px;
    right: -100px;
}

.scf-new-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 150px;
}

/* Sub-block 1: Identity */
.scf-identity {
    text-align: center;
    max-width: 900px;
    margin: 0 auto;
}

.scf-badge-new {
    display: inline-block;
    font-size: 16px;
    color: #8bb3ff;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 24px;
}

.scf-main-heading {
    font-size: 36px;
    font-weight: 400;
    color: #ffffff;
    line-height: 1.4;
    margin-bottom: 30px;
    word-break: keep-all;
}

.scf-main-title {
    font-size: 45px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 40px;
    letter-spacing: -0.5px;
}

.scf-main-desc {
    font-size: 18px;
    color: #a0aec0;
    line-height: 1.8;
    opacity: 0.85;
    word-break: keep-all;
}

/* Sub-block 2: Core Competency */
.scf-competency {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 320px));
    justify-content: center;
    gap: 40px;
}

.competency-col {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    padding: 40px 30px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    text-align: center;
    align-items: center;
    transition: transform 0.3s ease, border-color 0.3s ease;
}
.competency-col:hover {
    transform: translateY(-10px);
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.05);
}

.competency-title {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
}

.competency-desc {
    font-size: 15px;
    color: #cbd5e1;
    line-height: 1.7;
    opacity: 0.8;
    word-break: keep-all;
}

/* Buttons */
.scf-buttons {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: -30px;
}

.btn-scf-modal {
    background-color: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    color: #ffffff;
    padding: 18px 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 40px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.btn-scf-modal:hover {
    background-color: #ffffff;
    color: #002C5F;
    border-color: #ffffff;
}

.btn-scf-contact {
    background-color: #4a90e2;
    color: #fff;
    padding: 18px 40px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 40px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid #4a90e2;
}

.btn-scf-contact:hover {
    background-color: #357abd;
    border-color: #357abd;
}

/* =========================================================================
   SCF MODAL BODY (Sub-block 3 & 4)
   ========================================================================= */
.scf-new-modal-body {
    display: flex;
    flex-direction: column;
    gap: 100px;
    padding: 60px 40px !important;
}

/* Sub-block 3: Curriculum Timeline */
.scf-curriculum-essence {
    max-width: 800px;
    margin: 0 auto;
    width: 100%;
}

.curriculum-timeline {
    position: relative;
    padding-left: 50px;
    border-left: 1px solid rgba(0, 44, 95, 0.2);
    display: flex;
    flex-direction: column;
    gap: 60px;
}

.timeline-item {
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -55px; /* Half of padding plus border */
    top: 0;
    width: 11px;
    height: 11px;
    background-color: #C5A059;
    border-radius: 50%;
}

.timeline-day {
    font-size: 14px;
    font-weight: 700;
    color: #C5A059;
    margin-bottom: 10px;
    letter-spacing: 2px;
}

.timeline-content {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.timeline-title {
    font-size: 24px;
    font-weight: 700;
    color: #002C5F;
}

.timeline-desc {
    font-size: 16px;
    color: #002C5F;
    line-height: 1.7;
    opacity: 0.8;
    word-break: keep-all;
}

/* Sub-block 4: Professional Value */
.scf-professional-value {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: flex-start;
}

.value-left {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.value-main-msg {
    font-size: 32px;
    font-weight: 700;
    color: #002C5F;
    line-height: 1.4;
    word-break: keep-all;
}

.value-sub-msg {
    font-size: 18px;
    color: #002C5F;
    opacity: 0.8;
    line-height: 1.6;
    word-break: keep-all;
}

.value-right {
    display: flex;
    flex-direction: column;
    gap: 30px;
}

.value-item {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(0, 44, 95, 0.1);
}

.value-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.value-badge {
    font-size: 13px;
    font-weight: 700;
    color: #C5A059;
    letter-spacing: 1px;
}

.value-desc {
    font-size: 16px;
    font-weight: 600;
    color: #002C5F;
    line-height: 1.5;
    word-break: keep-all;
}

/* Responsive */
@media (max-width: 1024px) {
    .scf-competency {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    
    .scf-professional-value {
        grid-template-columns: 1fr;
        gap: 50px;
    }
}

@media (max-width: 768px) {
    .scf-new-section {
        padding: 100px 5%;
    }
    .scf-main-heading { font-size: 28px; }
    .scf-main-title { font-size: 32px; }
    .scf-new-modal-body { padding: 40px 20px !important; }
}

/* ==========================================
   9. 인라인 확장 인터랙션 (정서적 시그널 & 데이터 증명)
   ========================================== */

/* 인라인 유도창 1: 정서적 시그널 진단 (3단 레이아웃) */
.reach-sub-block.signal-diagnosis {
    display: flex;
    flex-direction: row;
    gap: 40px;
    align-items: stretch;
}
.signal-left {
    flex: 1;
    min-width: 250px;
}
.signal-col-center {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.signal-col-right {
    flex: 1.5;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F8FAFC;
    border-radius: 12px;
    padding: 40px 30px;
}
.btn-signal-check {
    background: none;
    border: none;
    color: #C9A96E;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 15px;
    padding: 0;
    text-align: left;
    transition: opacity 0.3s ease;
}
.btn-signal-check:hover {
    opacity: 0.8;
}
.signal-item {
    cursor: pointer;
    transition: transform 0.3s ease;
    padding-bottom: 25px;
    border-bottom: 1px solid rgba(0, 44, 95, 0.1);
}
.signal-item:last-child {
    border-bottom: none;
    padding-bottom: 0;
}
.signal-item.active {
    transform: translateX(5px);
}
.signal-item.active .btn-signal-check {
    opacity: 0.5;
}
.signal-detail-placeholder {
    display: none;
    font-size: 15px;
    color: #002C5F;
    text-align: center;
    opacity: 0.7;
    font-weight: 500;
    line-height: 1.6;
}
.signal-detail-placeholder.active {
    display: block;
}
.signal-detail-content {
    display: none;
    flex-direction: column;
    align-items: flex-start;
    animation: fadeInRight 0.5s ease forwards;
}
.signal-detail-content.active {
    display: flex;
}
@keyframes fadeInRight {
    from { opacity: 0; transform: translateX(15px); }
    to { opacity: 1; transform: translateX(0); }
}
.detail-title {
    font-size: 20px;
    font-weight: 700;
    color: #002C5F;
    margin-bottom: 25px;
    letter-spacing: -0.5px;
}
.detail-checklist {
    list-style: none;
    padding: 0;
    margin: 0 0 35px 0;
}
.detail-checklist li {
    font-size: 15px;
    color: #002C5F;
    margin-bottom: 15px;
    position: relative;
    padding-left: 20px;
    font-weight: 500;
    line-height: 1.6;
    letter-spacing: -0.3px;
}
.detail-checklist li::before {
    content: '';
    position: absolute;
    left: 0; top: 9px;
    width: 5px; height: 5px;
    background-color: #002C5F;
    border-radius: 50%;
}
.detail-action-btn {
    display: inline-block;
    font-size: 16px;
    color: #C9A96E;
    font-weight: 700;
    text-decoration: none;
    transition: opacity 0.3s ease;
}
.detail-action-btn:hover {
    opacity: 0.8;
}

@media (max-width: 1024px) {
    .reach-sub-block.signal-diagnosis {
        flex-direction: column;
    }
    .signal-left, .signal-col-center, .signal-col-right {
        width: 100%;
    }
}

/* 인라인 유도창 2: 데이터 증명 (툴팁) */
.data-item {
    position: relative;
}
.inline-tooltip-layer {
    position: absolute;
    bottom: 110%; /* 문구 바로 위로 피어오름 */
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    background-color: #F8FAFC; /* Soft White */
    padding: 20px;
    border-radius: 8px;
    width: 320px;
    box-shadow: 0 10px 30px rgba(0, 44, 95, 0.08); /* 미니멀한 그림자, 테두리 없음 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
    z-index: 100;
    pointer-events: none;
}
.inline-tooltip-layer.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.inline-tooltip-title {
    font-size: 16px;
    color: #002C5F;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
    text-align: left;
}
.inline-tooltip-desc {
    font-size: 14px;
    color: #002C5F;
    line-height: 1.6;
    font-weight: 500;
    text-align: left;
    word-break: keep-all;
}


/* ==================================
   Premium Deep Blue Button
================================== */
.premium-btn-deepblue {
    display: inline-block;
    background-color: #002C5F; /* Deep Blue */
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    padding: 20px 50px;
    border-radius: 12px;
    letter-spacing: -0.5px;
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    box-shadow: 0 10px 30px rgba(0, 44, 95, 0.2);
}

.premium-btn-deepblue:hover {
    transform: scale(1.05);
    box-shadow: 0 15px 40px rgba(0, 44, 95, 0.3);
    color: #ffffff;
}
\n
/* ==========================================================================
   SELF-CARE EMOTIONAL HEALING PAGE CSS
   ========================================================================== */

/* Global Settings */
.sc-section {
    padding: 180px 0;
    font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
    line-height: 1.6;
    letter-spacing: -0.02em;
}

.sc-container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 40px;
}

.sc-grid {
    display: grid;
    gap: 80px;
    align-items: center;
}

.sc-grid-4-6 {
    grid-template-columns: 4fr 6fr;
}

.sc-grid-5-5 {
    grid-template-columns: 1fr 1fr;
}

.sc-grid-45-55 {
    grid-template-columns: 45fr 55fr;
}

.sc-headline {
    font-size: 42px;
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 40px;
    word-break: keep-all;
}

.sc-text-white { color: #ffffff; }
.sc-text-navy { color: #0A192F; }
.sc-text-center { text-align: center; }

/* SESSION 1 */
.sc-session1 {
    background-color: #0A192F;
    color: #ffffff;
    padding-top: 180px; /* Account for header */
    padding-bottom: 90px !important;
}

.sc-s1-proof-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 60px;
}

.sc-proof-item {
    border-left: 2px solid rgba(255,255,255,0.2);
    padding-left: 20px;
}

.sc-proof-num {
    font-family: 'Montserrat', sans-serif;
    font-size: 36px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 10px;
    letter-spacing: -0.03em;
}

.sc-proof-desc {
    font-size: 16px;
    color: #a0aec0;
    line-height: 1.7;
    word-break: keep-all;
}

.sc-s1-target-list {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.sc-target-item {
    background: rgba(255,255,255,0.03);
    padding: 30px;
    border-radius: 8px;
}

.sc-target-title {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    margin-bottom: 12px;
}

.sc-target-desc {
    font-size: 14px;
    color: #cbd5e1; /* Light Gray */
    line-height: 1.8;
    font-weight: 300;
    word-break: keep-all;
}

.sc-s1-graphic {
    margin-top: 60px;
    display: flex;
    justify-content: flex-end;
}

.sc-line-graph {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    height: 60px;
}

.sc-line {
    width: 2px;
    background-color: rgba(255,255,255,0.3);
}

.sc-line-1 { height: 30%; }
.sc-line-2 { height: 60%; }
.sc-line-3 { height: 100%; background-color: #0047AB; }

/* SESSION 2 */
.sc-session2 {
    background-color: #F8FAFC; /* Off-white */
    padding-top: 120px !important;
    padding-bottom: 120px !important;
}

.sc-s2-timeline-wrapper {
    position: relative;
    margin-top: 80px;
    padding-top: 40px;
}

.sc-timeline-line {
    position: absolute;
    top: 40px;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #e2e8f0;
    z-index: 1;
}

.sc-timeline-steps {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    position: relative;
    z-index: 2;
}

.sc-step-card {
    background: transparent;
    padding: 20px 10px;
    text-align: left;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sc-step-letter {
    font-family: 'Montserrat', sans-serif;
    font-size: 48px;
    font-weight: 800;
    color: #cbd5e1;
    margin-bottom: 20px;
    transition: color 0.3s ease;
    line-height: 1;
}

.sc-step-title {
    font-size: 18pt; /* 24px */
    font-weight: 700;
    color: #0A192F;
    margin-bottom: 15px;
}

.sc-step-desc {
    font-size: 13pt; /* 17px */
    color: #475569;
    line-height: 1.6;
    word-break: keep-all;
}

.sc-step-card:hover {
    transform: translateY(-4px);
}

.sc-step-card:hover .sc-step-letter {
    color: #0047AB; /* Mcoaching Deep Blue */
}

/* SESSION 3 */
.sc-session3 {
    background-color: #f1f5f9; /* 라이트 슬레이트 그레이 (매우 투명한 느낌의 밝은 그레이) */
    padding-top: 120px !important;
}

.sc-s3-visual {
    position: relative;
    width: 100%;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0,0,0,0.08);
}

.sc-s3-visual img {
    width: 100%;
    height: auto;
    display: block;
    aspect-ratio: 4/3;
    object-fit: cover;
}

.sc-s3-visual-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0) 100%);
}

.sc-s3-guide-list {
    display: flex;
    flex-direction: column;
    gap: 40px;
    margin-top: 50px;
}

.sc-guide-item {
    position: relative;
    padding-left: 24px;
}

.sc-guide-item::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    bottom: -6px;
    width: 2px;
    background-color: #0047AB; /* Deep Blue Vertical Line */
}

.sc-guide-title {
    font-size: 18px;
    font-weight: 700;
    color: #0A192F;
    margin-bottom: 10px;
}

.sc-guide-desc {
    font-size: 14pt; /* ~18.6px */
    color: #334155; /* Dark Gray */
    line-height: 1.8;
    word-break: keep-all;
}

/* SESSION 4 */
.sc-session4 {
    background-color: #F8FAFC;
    padding-top: 10% !important;
}

.sc-book-wrapper {
    position: relative;
    padding: 20px;
}

.sc-book-img {
    width: 100%;
    max-width: 450px;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 30px 40px rgba(0, 0, 0, 0.15)); /* 입체적인 내추럴 섀도우 */
}

.sc-subtitle {
    font-size: 20px;
    font-weight: 600;
    color: #64748B;
    margin-bottom: 30px;
}

.sc-body-paragraphs {
    font-size: 16px;
    color: #475569;
    line-height: 1.8;
    margin-bottom: 40px;
}

.sc-body-paragraphs p {
    margin-bottom: 15px;
}

.sc-book-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14pt;
    font-weight: 700;
    color: #ffffff;
    background-color: #0047AB; /* Cobalt Blue */
    text-decoration: none;
    padding: 20px 50px;
    margin-top: 20px;
    margin-bottom: 60px;
    border-radius: 50px; /* 완전한 반원형 둥근 모서리 */
    box-shadow: 0 10px 30px rgba(0, 71, 171, 0.15);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.sc-book-link:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(10, 25, 47, 0.25);
    background-color: #0A192F; /* Hover 시 다크 네이비로 변환 */
}

.sc-modality-cards {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sc-modality-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.04);
    padding: 35px 40px;
    border-radius: 0; /* Boxy editorial feel */
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
}

.sc-modality-title {
    font-size: 22px;
    font-weight: 700;
    color: #0A192F;
    margin-bottom: 12px;
}

.sc-modality-desc {
    font-size: 18px;
    color: #64748B;
    line-height: 1.6;
}

.sc-cta-wrapper {
    text-align: center;
    margin-top: 100px;
}

.sc-cta-btn {
    display: inline-block;
    background-color: #0047AB;
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    text-decoration: none;
    padding: 24px 60px;
    /* 직사각형 테두리 배제, 면 분할 하이엔드 방식 */
    border-radius: 0;
    box-shadow: 0 15px 30px rgba(0, 71, 171, 0.2);
    transition: all 0.4s ease;
    letter-spacing: 0.02em;
}

.sc-cta-btn:hover {
    background-color: #002266; /* 채도 변화 */
    box-shadow: 0 20px 40px rgba(0, 34, 102, 0.3);
    transform: translateY(-2px);
}

/* Animations */
.fade-in-bottom {
    animation: fadeInBottom 1.5s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeInBottom {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Overrides */
@media (max-width: 1024px) {
    .sc-grid { grid-template-columns: 1fr !important; gap: 50px; }
    .sc-s2-timeline-wrapper { padding-top: 20px; }
    .sc-timeline-line { display: none; }
    .sc-timeline-steps { grid-template-columns: 1fr; gap: 30px; }
    .sc-step-card { text-align: center; background: #fff; padding: 30px; border-radius: 8px; box-shadow: 0 10px 20px rgba(0,0,0,0.03); }
    .sc-guide-item::before { left: 0; }
    .sc-section { padding: 80px 0; }
}

.clean-popup-overlay { display: none; }
.clean-popup-overlay.active { display: flex; }