/* assets/css/about.css */

/* 공통 유틸리티 */
.eyebrow {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: #00A859;
    display: block;
}

.highlight-green {
    color: #00A859;
}

.text-dark {
    color: #444;
}

/* ---------------------------------
 * 1. Overview (High-end Editorial)
 * --------------------------------- */
.section--overview {
    position: relative;
    min-height: 100vh;
    /* 핀 고정을 위한 명시적 높이 확보 */
    padding: 0;
    /* 패딩 대신 내부 컨테이너 여백 활용 */
    margin: 0 !important;
    background: #ffffff;
    z-index: 2;
    display: flex;
    align-items: center;
    will-change: transform;
    /* 하드웨어 가속 유도 */
}


/* 거대한 배경 워터마크 텍스트 */
.overview-watermark {
    position: absolute;
    top: 50%;
    left: -5%;
    transform: translateY(-50%);
    font-size: 20vw;
    font-weight: 900;
    color: transparent;
    -webkit-text-stroke: 10px rgba(0, 26, 142, 0.03);
    /* 아주 옅은 외곽선만 */
    line-height: 1;
    white-space: nowrap;
    z-index: 0;
    pointer-events: none;
    text-transform: uppercase;
}

.overview-grid {
    position: relative;
    display: grid;
    grid-template-columns: 5fr 6fr;
    /* 5:6 비율의 비대칭 그리드로 세련미 강조 */
    gap: 80px;
    align-items: center;
    z-index: 10;
}

/* 텍스트 그라데이션 (브랜드 컬러 활용) */
.text-gradient {
    background: linear-gradient(90deg, #001A8E, #00A859);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
}

.text-gray {
    color: #666;
    line-height: 1.8;
}

/* 스탯(Stats) 영역 디자인 */
.overview-stats {
    display: flex;
    align-items: center;
    gap: 40px;
    padding-top: 40px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
}

.stat-item {
    display: flex;
    flex-direction: column;
}

.stat-num {
    font-size: 48px;
    font-weight: 800;
    color: #111;
    line-height: 1;
    margin-bottom: 8px;
    font-family: 'Inter', sans-serif;
}

.stat-num .plus {
    color: #00A859;
    font-size: 32px;
    vertical-align: super;
}

.stat-label {
    font-size: 14px;
    font-weight: 600;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-divider {
    width: 1px;
    height: 50px;
    background: rgba(0, 0, 0, 0.1);
}

/* ---------------------------------
 * ★ 혁신: 무중력 코팅 비눗방울 (Bubble Universe)
 * --------------------------------- */
.bubble-universe {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    /* 워터마크보단 위, 텍스트보단 아래 */
    pointer-events: none;
    /* 방울이 텍스트 선택을 방해하지 않도록 */
}

.m3-bubble {
    position: absolute;
    border-radius: 50%;
    /* 완벽한 구형 */
    overflow: hidden;
    box-shadow:
        0 30px 60px rgba(0, 0, 0, 0.15),
        inset 0 0 40px rgba(255, 255, 255, 0.6);
    /* 투명한 유리구슬 같은 이너 섀도우 */
    transform: translateZ(0);
    /* 렌더링 최적화 */
    animation: float-bubble 6s ease-in-out infinite alternate;
}

/* 방울들의 크기와 절대 위치 (텍스트를 절묘하게 빗겨감) */
.b-1 {
    width: 35vw;
    height: 35vw;
    max-width: 450px;
    max-height: 450px;
    top: 5%;
    right: 2%;
    animation-delay: 0s;
}

.b-2 {
    width: 18vw;
    height: 18vw;
    max-width: 250px;
    max-height: 250px;
    bottom: 10%;
    left: 8%;
    animation-delay: -2s;
}

.b-3 {
    width: 25vw;
    height: 25vw;
    max-width: 350px;
    max-height: 350px;
    bottom: 5%;
    right: 25%;
    animation-delay: -4s;
}

/* 떠다니는 애니메이션 (비눗방울의 무중력 느낌) */
@keyframes float-bubble {
    0% {
        transform: translateY(0) rotate(0deg);
    }

    100% {
        transform: translateY(-30px) rotate(3deg);
    }
}

.bubble-raw,
.bubble-coated {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    overflow: hidden;
}

.bubble-raw img,
.bubble-coated img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.1);
    /* 둥근 테두리에 이미지가 꽉 차 보이도록 살짝 확대 */
}

/* 코팅 전: 도면/X-ray 흑백 톤 */
.bubble-raw {
    filter: grayscale(100%) contrast(120%) brightness(0.6);
}

/* 코팅 후: 컬러 톤 + clip-path 준비 */
.bubble-coated {
    clip-path: inset(0 100% 0 0);
    /* 초기 상태: 오른쪽이 다 잘려서 안 보임 */
    box-shadow: inset 0 0 50px rgba(0, 168, 89, 0.3);
    /* 코팅 후 초록색 광채 추가 */
}

/* UV 레이저 라인 (방울에 맞춰 휘어지지 않고 직선으로 스캔) */
.uv-laser {
    position: absolute;
    top: 0;
    right: 0;
    width: 3px;
    height: 100%;
    background: #00A859;
    box-shadow: 0 0 15px #00A859, 0 0 30px rgba(0, 168, 89, 0.8);
    z-index: 10;
}

/* 유리 광택 애니메이션 */
.bubble-shine {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(105deg,
            transparent 20%,
            rgba(255, 255, 255, 0.5) 25%,
            transparent 30%);
    background-size: 200% 100%;
    animation: shine-sweep 4s infinite linear 1s;
    pointer-events: none;
    border-radius: 50%;
}

/* 반응형 (모바일에서는 방울 크기와 위치 재조정) */
@media (max-width: 980px) {
    .b-1 {
        width: 60vw;
        height: 60vw;
        top: -5%;
        right: -10%;
        opacity: 0.6;
    }

    /* 텍스트 뒤로 희미하게 */
    .b-2 {
        width: 40vw;
        height: 40vw;
        bottom: -5%;
        left: -5%;
        opacity: 0.6;
    }

    .b-3 {
        width: 50vw;
        height: 50vw;
        bottom: 30%;
        right: -20%;
        opacity: 0.6;
    }
}

.img-mask {
    border-radius: 4px 100px 4px 4px;
    /* 우측 상단만 크게 둥글려 디자인 포인트 부여 */
    overflow: hidden;
    position: relative;
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.1);
    aspect-ratio: 4/5;
    /* 세로형으로 길게 뽑아 에디토리얼 느낌 강조 */
    transform: translateZ(0);
    /* 사파리 버그 방지 */
}

.img-mask img {
    width: 100%;
    height: 130%;
    /* 패럴랙스를 위해 높이를 더 크게 설정 */
    object-fit: cover;
    transform-origin: center;
}

/* 하이테크 글래스모피즘 뱃지 */
.floating-badge {
    position: absolute;
    bottom: 40px;
    left: -40px;
    /* 이미지 밖으로 살짝 튀어나오게 배치 */
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.8);
    padding: 24px 36px;
    border-radius: 20px;
    box-shadow: 0 20px 40px rgba(0, 26, 142, 0.15);
    display: flex;
    flex-direction: column;
    z-index: 20;
    overflow: hidden;
}

/* 뱃지 내부를 도는 빛나는 링 효과 */
.badge-ring {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background: conic-gradient(transparent, transparent, transparent, rgba(0, 168, 89, 0.2));
    animation: rotate-ring 4s linear infinite;
    z-index: 1;
}

.badge-content {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
}

.floating-badge .num {
    font-size: 28px;
    font-weight: 800;
    color: #001A8E;
    margin-bottom: 4px;
}

.floating-badge .txt {
    font-size: 13px;
    color: #555;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
}

@keyframes rotate-ring {
    100% {
        transform: rotate(360deg);
    }
}

/* 반응형 (모바일) */
@media (max-width: 980px) {
    .overview-grid {
        grid-template-columns: 1fr;
        gap: 50px;
    }

    .floating-badge {
        left: 20px;
        bottom: -20px;
        padding: 16px 24px;
    }

    .img-mask {
        border-radius: 4px 60px 4px 4px;
    }

    .overview-watermark {
        font-size: 30vw;
        top: 10%;
    }
}

.floating-card {
    position: absolute;
    bottom: -20px;
    left: -20px;
    background: #001A8E;
    color: #fff;
    padding: 20px 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 26, 142, 0.3);
    display: flex;
    flex-direction: column;
    z-index: 2;
}

.floating-card .num {
    font-size: 24px;
    font-weight: 800;
    margin-bottom: 4px;
}

.floating-card .txt {
    font-size: 13px;
    opacity: 0.8;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* CEO MESSAGE 역대급 디자인 업그레이드 */
.section--ceo {
    position: relative;
    padding: 220px 0;
    /* 여백 대폭 확장 */
    background-color: #ffffff;
    overflow: hidden;
    z-index: 1;
}

/* 정밀 스캔 배경 효과 수정 */
.section--ceo::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image:
        linear-gradient(rgba(0, 168, 89, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 168, 89, 0.12) 1px, transparent 1px);
    background-size: 40px 40px;

    z-index: -1;
}

.ceo-scan-line {
    position: absolute;
    top: -10%;
    left: 0;
    width: 100%;
    height: 15vh;
    background: linear-gradient(to bottom,
            transparent,
            rgba(0, 168, 89, 0.2),
            transparent);
    border-bottom: 3px solid rgba(0, 168, 89, 0.7);
    z-index: 2;
    pointer-events: none;
}

.ceo-light-flare {
    position: absolute;
    top: 20%;
    left: 10%;
    width: 40vw;
    height: 40vw;
    background: radial-gradient(circle, rgba(0, 168, 89, 0.05) 0%, transparent 70%);
    z-index: 1;
}

.ceo-grid {
    display: grid;
    grid-template-columns: 5fr 6fr;
    gap: 100px;
    align-items: center;
    position: relative;
    z-index: 10;
}

/* 좌측 비주얼 영역 */
.ceo-portrait-frame {
    position: relative;
    padding: 30px;
}

.ceo-portrait-frame .frame-border {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 90%;
    border: 1px solid #001A8E;
    z-index: -1;
    opacity: 0.2;
}

.ceo-portrait-frame .img-wrap {
    border-radius: 4px;
    box-shadow: 50px 50px 100px rgba(0, 0, 0, 0.1);
    overflow: hidden;
}

.ceo-portrait-frame img {
    width: 100%;
    aspect-ratio: 4/5;
    object-fit: cover;
    filter: grayscale(10%) contrast(1.1);
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.ceo-signature-badge {
    position: absolute;
    bottom: -40px;
    right: -20px;
    background: #001A8E;
    color: #fff;
    padding: 30px;
    border-radius: 0;
    display: flex;
    flex-direction: column;
}

/* 포스트잇/메모지 카드 디자인 */
.ceo-message-card {
    position: relative;
    background: #ffffff;
    /* 순백색 종이 느낌 */
    padding: 60px 50px;
    border-radius: 2px;
    /* 아주 약간만 둥글게 */

    /* 1. 실제 종이 같은 미세한 그림자 (Glassmorphism보다 묵직한 느낌) */
    box-shadow:
        20px 20px 60px rgba(0, 0, 0, 0.05),
        10px 10px 20px rgba(0, 0, 0, 0.02);

    /* 2. 좌측 상단에 핀으로 고정한 듯한 포인트 (선택 사항) */
    border-left: 4px solid #001A8E;

    /* 3. 그리드 배경과 분리되는 확실한 레이어감 */
    z-index: 10;
    transform: rotate(-0.5deg);
    /* 아주 미세하게 틀어주면 더 포스트잇 같습니다 */
    transition: transform 0.5s ease;
    pointer-events: auto;
}

.ceo-message-card:hover {
    transform: rotate(0deg) translateY(-20px) scale(1.02);
    box-shadow: 50px 50px 100px rgba(0, 0, 0, 0.12);
}

/* 텍스트 가독성 보정 */
.ceo-message-card .ceo-headline {
    color: #111;
    word-break: keep-all;
}

.ceo-message-card .ceo-message-body {
    color: #444;
}

.ceo-signature-badge .year {
    font-size: 12px;
    opacity: 0.7;
    letter-spacing: 0.2em;
}

.ceo-signature-badge .text {
    font-size: 16px;
    font-weight: 700;
    margin-top: 5px;
}

/* 우측 텍스트 영역 */
.eyebrow-line {
    display: inline-block;
    width: 40px;
    height: 1px;
    background: #00A859;
    vertical-align: middle;
    margin-right: 15px;
}

.ceo-headline {
    line-height: 1.3;
    letter-spacing: -0.02em;
}

.text-highlight {
    color: #00A859;
    font-weight: 800;
}

.text-underline {
    background: linear-gradient(transparent 80%, rgba(0, 168, 89, 0.1) 0%);
    font-weight: 600;
}

.ceo-message-body .intro-text {
    font-size: 20px;
    color: #111;
    margin-bottom: 30px;
}

.ceo-message-body .main-text p {
    margin-bottom: 25px;
    color: #555;
    line-height: 1.8;
}

.ceo-footer {
    display: flex;
    justify-content: flex-end;
    position: relative;
}

.ceo-sign-box {
    text-align: right;
    position: relative;
}

.ceo-sign-box .pos {
    display: block;
    font-size: 14px;
    color: #888;
    margin-bottom: 8px;
}

.ceo-sign-box .name {
    font-size: 32px;
    font-weight: 700;
    color: #111;
    letter-spacing: 0.3em;
    position: relative;
    z-index: 2;
}

.sign-svg {
    position: absolute;
    bottom: -10px;
    right: -20px;
    width: 150px;
    z-index: 1;
}

/* 반응형 */
@media (max-width: 980px) {
    .ceo-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }

    .ceo-portrait-frame {
        padding: 0;
    }

    .ceo-signature-badge {
        right: 20px;
        padding: 20px;
    }
}

/* 3. Vision */
.section--vision {
    padding: 140px 0;
    background: #fff;
}

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

.vision-card {
    background: #f9f9fb;
    padding: 50px 40px;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.vision-card:hover {
    transform: translateY(-10px);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.06);
    background: #fff;
}

.v-icon {
    font-size: 40px;
    margin-bottom: 24px;
}

.v-tit {
    font-size: 24px;
    font-weight: 700;
    color: #111;
    margin: 0 0 16px 0;
}

.v-desc {
    font-size: 15px;
    color: #666;
    line-height: 1.6;
    word-break: keep-all;
}

.v-desc strong {
    color: #333;
    display: block;
    margin-bottom: 8px;
    font-size: 16px;
}

/* 4. History */
.section--history {
    padding: 140px 0;
    background-color: #f9f9fb;
    border-top: 1px solid rgba(0, 0, 0, 0.05);
}

.history-timeline {
    max-width: 800px;
    margin: 0 auto;
    position: relative;
    --progress: 0;
}

.history-timeline::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 160px;
    /* 기존 선과 동일한 위치 */
    width: 2px;
    background: linear-gradient(to bottom, #001A8E, #00A859);
    transform: scaleY(var(--progress));
    transform-origin: top;
    z-index: 1;
}

.history-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 160px;
    width: 1px;
    background: rgba(0, 0, 0, 0.1);
}

.history-block {
    display: flex;
    margin-bottom: 80px;
    position: relative;
}

.history-block .year {
    width: 160px;
    flex-shrink: 0;
    font-size: 36px;
    color: #001A8E;
    padding-right: 40px;
    text-align: right;
    position: relative;
    top: -10px;
}

.history-block .year::after {
    content: '';
    position: absolute;
    top: 20px;
    right: -6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #001A8E;
    box-shadow: 0 0 0 4px rgba(0, 26, 142, 0.1);
    z-index: 2;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.history-block:hover .year::after {
    background: #00A859;
    box-shadow: 0 0 0 6px rgba(0, 168, 89, 0.2), 0 0 15px rgba(0, 168, 89, 0.5);
    transform: scale(1.2);
}

@media (max-width: 980px) {
    .history-timeline::after {
        left: 20px;
    }
}

.event-list {
    flex-grow: 1;
    padding-left: 60px;
}

.event-list li {
    display: flex;
    margin-bottom: 30px;
}

.event-list .month {
    width: 80px;
    flex-shrink: 0;
    font-size: 16px;
    font-weight: 700;
    color: #111;
}

.event-list .event {
    font-size: 16px;
    color: #555;
    line-height: 1.5;
    word-break: keep-all;
}


/* ★ 5. Company Info Horizontal Scroll (신규) ★ */
.section--info-scroll {
    background-color: #050A1F;
    overflow: hidden;
    position: relative;
    z-index: 1;
}


.info-scroll-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 300vw;
    height: 100%;
    z-index: -1;
    will-change: transform;
}

.info-scroll-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.15;
    filter: grayscale(30%) contrast(120%);

}

.info-scroll-container {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 100px 0;
}

/* 프로세스 헤더 역대급 디자인 */
.info-scroll-header {
    padding-left: max(5vw, calc((100vw - 1200px) / 2));
    margin-bottom: 80px;
    position: relative;
    z-index: 20;
}

.header-inner-wrap {
    display: flex;
    align-items: flex-end;
    gap: 40px;
}

/* 1. 진행 표시기 스타일 */
.process-stepper {
    font-family: 'Inter', sans-serif;
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-bottom: 10px;
}

.step-current {
    font-size: 42px;
    font-weight: 800;
    color: #00A859;
    line-height: 1;
}

.step-divider {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.2);
}

.step-total {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

/* 2. 타이틀 레이아웃 */
.title-content .eyebrow-wrap {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
}

.eyebrow-dot {
    width: 6px;
    height: 6px;
    background: #00A859;
    border-radius: 50%;
    box-shadow: 0 0 10px #00A859;
}

.title-main {
    display: block;
    color: #fff;
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
}

.title-sub {
    display: block;
    font-size: 14px;
    letter-spacing: 0.5em;
    color: rgba(255, 255, 255, 0.3);
    margin-top: 10px;
    font-weight: 300;
    text-transform: uppercase;
}

/* 3. 우측 데코레이션 */
.header-deco {
    margin-left: auto;
    padding-right: 5vw;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    margin-bottom: 15px;
}

.deco-line {
    width: 120px;
    height: 1px;
    background: linear-gradient(90deg, transparent, #00A859);
    margin-bottom: 10px;
}

.deco-text {
    font-size: 11px;
    color: #00A859;
    letter-spacing: 0.2em;
    font-weight: 600;
    opacity: 0.7;
}

@media (max-width: 980px) {
    .header-inner-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }

    .header-deco {
        display: none;
    }

    .title-main {
        font-size: 38px;
    }
}

.info-scroll-wrapper {
    display: flex;
    gap: 60px;
    padding-left: 40vw;
    padding-right: 40vw;
    width: max-content;
    will-change: transform;
}

/* 카드 크기 대폭 확대 */
.info-panel {
    width: 450px;
    flex-shrink: 0;
}

.info-panel .panel-inner {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 60px 50px;
    /* 내부 여백 확대 */
    height: 100%;
    backdrop-filter: blur(12px);
    position: relative;
    overflow: hidden;
    transition: transform 0.4s ease, border-color 0.4s ease, background 0.4s ease;
}

.info-panel .panel-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: linear-gradient(90deg, #001A8E, #00A859);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.info-panel:hover .panel-inner {
    transform: translateY(-10px);
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(0, 168, 89, 0.4);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.info-panel:hover .panel-inner::before {
    transform: scaleX(1);
}

/* 아이콘 및 텍스트 큼지막하게 수정 */
.info-panel .icon {
    font-size: 60px;
    font-weight: 800;
    color: rgba(255, 255, 255, 0.15);
    /* 기존 설정 */
    margin-bottom: 20px;
    display: inline-block;
    letter-spacing: -0.02em;
    font-style: italic;
    transition: all 0.4s ease;
}

.info-panel:hover .icon {
    color: #ffffff !important;
    /* 완전히 하얗게 변경 */
    opacity: 1;
    /* 하얀색 광채 효과 (선택 사항: 더 역대급으로 보이고 싶다면) */
    text-shadow: 0 0 20px rgba(255, 255, 255, 0.4);
    transform: scale(1.05);
    /* 살짝 커지면서 강조됨 */
}

/* 카드 내부 텍스트도 호버 시 더 선명하게 보정 */
.info-panel:hover p {
    color: #ffffff;
    /* 기존 #d1d5db에서 화이트로 변경 */
}

.info-panel h3 {
    font-size: 28px;
    /* 기존 22 -> 28 */
    font-weight: 700;
    color: #00A859;
    margin-bottom: 20px;
    letter-spacing: 0.02em;
}

.info-panel p {
    font-size: 17px;
    /* 기존 15 -> 17 */
    color: #d1d5db;
    line-height: 1.6;
    word-break: keep-all;
}

.info-panel p strong {
    color: #fff;
    display: block;
    margin-bottom: 12px;
    font-size: 19px;
    /* 기존 16 -> 19 */
}

/* 모바일 대응 (이 코드로 맨 아래 미디어 쿼리를 하나로 정리하세요) */
@media (max-width: 980px) {

    .section--overview .row,
    .section--ceo .row {
        flex-direction: column;
        gap: 40px;
    }

    .overview-text,
    .overview-visual,
    .ceo-visual,
    .ceo-text {
        width: 100%;
        margin: 0;
    }

    .floating-card {
        bottom: -10px;
        left: 10px;
    }

    .vision-grid {
        grid-template-columns: 1fr;
    }

    .history-timeline::before {
        left: 20px;
    }

    .history-block {
        flex-direction: column;
        margin-bottom: 50px;
    }

    .history-block .year {
        width: 100%;
        text-align: left;
        padding-left: 50px;
        margin-bottom: 20px;
        font-size: 32px;
    }

    .history-block .year::after {
        right: auto;
        left: 15px;
        top: 15px;
    }

    .event-list {
        padding-left: 50px;
    }

    .event-list li {
        flex-direction: column;
        gap: 5px;
        margin-bottom: 20px;
    }

    .event-list .month {
        color: #001A8E;
    }

    /* 수평 스크롤 모바일 대응 */
    .info-panel {
        width: 300px;
        /* 너무 작지 않게 300px로 통일 */
    }

    .info-panel .panel-inner {
        padding: 40px 30px;
    }
}

/* Vision 섹션 기본 설정 */
.section--vision {
    position: relative;
    overflow: hidden;
    /* 배경 이미지가 삐져나오지 않도록 필수 적용 */
    padding: 120px 0;
    /* 위아래 여백 (필요에 따라 조정) */
}

/* 배경 래퍼 */
.vision-bg-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* 배경 오버레이 (배경이 너무 밝아서 글씨가 안 보일 경우 대비) */
.vision-bg-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(255, 255, 255, 0.8);
    /* 흰색 반투명 덮개. 어두운 배경이면 rgba(0,0,0,0.6) 등으로 변경 */
    z-index: 1;
}

.vision-parallax-img {
    position: absolute;
    top: -80%;
    left: 0;
    width: 100%;
    height: 180%;
    object-fit: cover;
    z-index: 0;
    will-change: transform;
}

/* --- 3D Hero Section --- */
.hero-3d-wrapper {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #ffffff;
    display: flex;
    align-items: center;
    /* 3D 원근감 부여 */
    perspective: 1000px;
}

.hero-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    /* 텍스트 선택 방해 안함 */
}

.hero-content {
    position: relative;
    z-index: 10;
    /* 텍스트 관통 시 부드러운 확대를 위한 렌더링 최적화 */
    will-change: transform, opacity;
    transform-style: preserve-3d;
}

/* 텍스트가 심연에서 올라오는 듯한 효과를 위한 마스크 */
.text-mask {
    display: inline-block;
    overflow: hidden;
    vertical-align: top;
    line-height: 1.1;
}

.text-mask span {
    display: inline-block;
    transform: translateY(100%);
}

.sub-kv__inner {
    will-change: transform, filter;
}

.hero-white-flash {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #ffffff;
    z-index: 5;
    opacity: 0;
    pointer-events: none;
}

.sub-kv__inner .headline-2-en {
    color: #111111;
    /* 아주 짙은 차콜/블랙 */
    font-size: clamp(40px, 5vw, 80px);
    margin: 20px 0;
    letter-spacing: -0.02em;
}

.sub-kv__inner .sub-desc {
    color: #555555;
    /* 부드러운 다크 그레이 */
    font-size: clamp(16px, 1.5vw, 20px);
}

.breadcrumb.js-hero-text {
    color: #001A8E;
    font-weight: 600;
}

/* ---------------------------------
 * ★ 3D Curtain Transition 공통 속성
 * --------------------------------- */
.m3-curtain {
    position: relative;
    /* 3D 깊이감 부여 */
    perspective: 1500px;
}

/* 섹션이 겹칠 때 투명하게 비치지 않도록 기본 배경색 보장 */
.section--overview.m3-curtain {
    background-color: #fff;
    z-index: 2;
}

.section--info-scroll {
    z-index: 3;
}

/* 가로 스크롤 섹션 레이어 순서 */
.section--ceo.m3-curtain {
    background-color: #f9f9fb;
    z-index: 4;
}

.section--vision.m3-curtain {
    background-color: #fff;
    z-index: 5;
}

.section--history.m3-curtain {
    background-color: #f9f9fb;
    z-index: 6;
}

/* 3D 애니메이션 타겟이 될 내부 컨테이너 */
.m3-curtain .container {
    transform-origin: center top;
    will-change: transform, opacity;
}

/* ---------------------------------
 * ★ Hero 버튼 스타일 (글래스모피즘 + 하이엔드 모션)
 * --------------------------------- */
.btn-warp {
    position: relative;
    background: rgba(255, 255, 255, 0.7);
    /* 반투명 흰색 배경으로 가시성 확보 */
    backdrop-filter: blur(12px);
    /* 뒤쪽 3D 파도를 뭉개서 텍스트 돋보이게 함 */
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.5);
    /* 빛을 받는 듯한 은은한 테두리 */
    color: #001A8E;
    padding: 16px 40px;
    /* 클릭 영역을 넉넉하게 확장 */
    border-radius: 40px;
    /* 유려한 알약(Pill) 형태 */
    font-size: 14px;
    font-weight: 700;
    /* 폰트 두께를 올려 또렷하게 */
    letter-spacing: 0.1em;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 10px 30px rgba(0, 26, 142, 0.15);
    /* 공간에 떠 있는 듯한 입체감 */
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    z-index: 20;
}

/* 호버 시 역동적인 변화 */
.btn-warp:hover {
    background: #001A8E;
    color: #ffffff;
    border-color: #001A8E;
    box-shadow: 0 15px 40px rgba(0, 26, 142, 0.3);
    transform: translateY(-4px);
    /* 마우스를 올리면 살짝 떠오름 */
}

.btn-warp .icon {
    display: inline-block;
    transition: transform 0.4s ease;
    animation: bounce-arrow 2s infinite;
    /* 시선을 끄는 숨쉬기 애니메이션 */
}

/* 호버 시에는 화살표 애니메이션을 멈추고 확실한 방향성 제시 */
.btn-warp:hover .icon {
    animation: none;
    transform: translateY(4px);
}

/* 화살표 바운스 애니메이션 키프레임 */
@keyframes bounce-arrow {

    0%,
    20%,
    50%,
    80%,
    100% {
        transform: translateY(0);
    }

    40% {
        transform: translateY(5px);
    }

    60% {
        transform: translateY(3px);
    }
}

/* 1. 버튼을 화면 하단 중앙에 절대 위치로 고정 */
.hero-btn-bottom {
    position: absolute;
    bottom: 80px;
    /* 바닥에서 80px 띄움 */
    left: 50%;
    transform: translateX(-50%);
    z-index: 30;
    /* 배경 3D보다 위로 */
}

/* 2. 타이틀과 설명 사이의 답답한 간격 해소 */
.sub-kv__inner .sub-desc {
    margin-top: 40px !important;
    /* 문구 사이 여백 확보 */
    line-height: 1.8;
}

/* 3. 흰 배경 전용 버튼 스타일 (확실히 보게 함) */
.btn-ios.is-dark {
    background: rgba(0, 0, 0, 0.08) !important;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    backdrop-filter: blur(10px);
}

.btn-ios.is-dark .btn-ios__label {
    color: #111 !important;
}

/* 1. 상단 레이아웃: 숫자와 사진을 양옆으로 배치 */
.panel-header-wrap {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 30px;
}

/* 2. 공정 사진 박스 (135x100 고정) */
.process-img-box {
    width: 135px;
    height: 100px;
    border-radius: 12px;
    overflow: hidden;
    position: relative;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.4);
    background: #000;
    /* 이미지 로딩 전 배경색 */
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.5s ease;
}

.process-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* 사진이 영역에 꽉 차게 조절 */
    opacity: 0.8;
    /* 기본 상태에서 약간 차분하게 */
    transition: opacity 0.5s ease, scale 0.8s ease;
}

/* 3. 호버/활성화 시 사진 강조 연출 */
.info-panel:hover .process-img-box,
.info-panel.is-active .process-img-box {
    border-color: rgba(0, 168, 89, 0.6);
    transform: translateY(-5px) scale(1.05);
}

.info-panel:hover .process-img-box img,
.info-panel.is-active .process-img-box img {
    opacity: 1;
    scale: 1.1;
}

/* 4. 기존 아이콘(숫자) 위치 미세 조정 */
.info-panel .icon {
    margin-bottom: 0;
    /* 헤더 래퍼에서 간격을 조절하므로 제거 */
    line-height: 1;
}