/* ===========================================
   회사소개 페이지 혁신적 디자인
   육각형 핵심가치 & 도로 타임라인
   =========================================== */

/* ===========================================
   Who We Are 페이지 중단점 체계
   
   1024px - 태블릿 대형
   - 육각형 연결선 → 배경 그라데이션 전환
   - gap 축소 (5rem → 1.5rem)
   
   768px - 태블릿 소형  
   - flexbox wrap으로 3열 유지
   - 육각형 크기 축소 (200px → 150px)
   - CEO 메시지 세로 배치
   
   550px - 모바일
   - 육각형 세로 배치
   - 세로 그라데이션
   - 환경 육각형 오른쪽 이동
   =========================================== */

/* 통합 회사개요 + 핵심가치 섹션 */
.about-overview {
    padding: 5rem 0;
    background: #ffffff;
    position: relative;
    overflow: visible;
}

.about-overview::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        radial-gradient(circle at 30% 20%, rgba(0, 51, 153, 0.03) 0%, transparent 40%),
        radial-gradient(circle at 70% 80%, rgba(0, 153, 68, 0.03) 0%, transparent 40%);
    pointer-events: none;
}

.core-values-section {
    position: relative;
    z-index: 1;
    text-align: center;
    padding-bottom: 60px;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* 메인 문구 타이포그래피 */
.main-statement {
    font-size: 2rem;
    font-weight: 650;
    line-height: 1.6;
    color: #555;
    text-align: center;
    margin-bottom: 0;
    letter-spacing: 0.03em;
    font-family: 'Noto Sans KR', sans-serif;
    width: 100%;
    max-width: 900px;
    word-break: keep-all; /* 단어 단위로 줄바꿈 */
    overflow-wrap: break-word; /* 긴 단어 처리 */
}

/* 문자별 애니메이션을 위한 span 스타일 */
.main-statement .char {
    display: inline-block;
    color: #999;
    animation: charHighlight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--char-delay);
}

/* 영어 단어 단위 애니메이션을 위한 스타일 */
.main-statement .char.word {
    display: inline; /* inline으로 변경하여 자연스러운 줄바꿈 */
    white-space: normal; /* 단어 내 줄바꿈 허용 */
    margin-right: 0.25em; /* 단어 간 자연스러운 간격 */
    animation: charHighlight 0.6s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    animation-delay: var(--char-delay);
}

@keyframes charHighlight {
    0% {
        color: #999;
        transform: scale(1);
    }
    50% {
        color: #222;
        transform: scale(1.05);
        text-shadow: 0 2px 4px rgba(0,0,0,0.1);
    }
    100% {
        color: #555;
        transform: scale(1);
        text-shadow: none;
    }
}

/* 공백 처리 */
.main-statement .space {
    display: inline-block;
    width: 0.25em;  /* 일반 공백과 유사한 크기로 조정 */
}

/* br 태그 처리 */
.main-statement br {
    display: block;
    height: 0.5em;
}

.hexagon-grid {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5rem;
    margin: 3rem auto 0;
    max-width: 900px;
    position: relative;
    z-index: 1;
}

.hexagon-wrapper {
    position: relative;
    width: 200px;
    height: 222px;
    margin: 0;
}

.hexagon-wrapper:nth-child(2) {
    transform: translateY(0);
}

.hexagon {
    width: 200px;
    height: 222px;
    position: relative;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* 육각형 호버 시 간단한 시각 피드백 */
.hexagon:hover {
    transform: translateY(-4px) scale(1.02);
    z-index: 10;
}

.hexagon:hover .hexagon-inner {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
}

.hexagon:hover .hexagon-inner::after {
    background: linear-gradient(135deg, #ffffff 0%, #f0f0f0 100%);
    box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.08),
                inset 0 -3px 5px rgba(0, 0, 0, 0.05),
                inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.hexagon-inner {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    background: var(--hex-border-color);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.04);
    transition: all 0.3s ease;
}


.hexagon-inner::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--hex-bg-color);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: 0;
}

/* 색상 오버레이 비활성화
.hexagon:hover .hexagon-inner::before {
    opacity: 1;
} */

/* 육각형 테두리 효과 */
.hexagon-inner::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: linear-gradient(135deg, #ffffff 0%, #f3f3f3 100%);
    box-shadow: inset 0 2px 5px rgba(0, 0, 0, 0.06),
                inset 0 -2px 4px rgba(0, 0, 0, 0.04),
                inset 0 1px 0 rgba(255, 255, 255, 0.8);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    z-index: 1;
}

.hexagon.technology {
    --hex-border-color: #d9e2f0;
    --hex-bg-color: #003399;
    --hex-icon-color: #003399;
}

.hexagon.environment {
    --hex-border-color: #d9f0e2;
    --hex-bg-color: #009944;
    --hex-icon-color: #009944;
}

.hexagon.future {
    --hex-border-color: #e8d9f0;
    --hex-bg-color: #6b1b9a;
    --hex-icon-color: #6b1b9a;
}

.hexagon-content {
    position: relative;
    text-align: center;
    z-index: 3;
    color: #333;
    padding: 2rem 1rem;
    transition: all 0.3s ease;
}

/* 호버 시 색상은 유지 */

.hexagon .value-icon {
    width: 70px;
    height: 70px;
    margin: 0 auto 1rem;
    background: linear-gradient(135deg, transparent 0%, rgba(255,255,255,0.3) 100%);
    border: 2px solid var(--hex-icon-color);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.hexagon:hover .value-icon {
    transform: scale(1.08);
    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.08);
}

.hexagon h3 {
    font-size: 1.3rem;
    font-weight: 600;
    margin: 0 0 0.5rem;
    letter-spacing: 0.3px;
    color: var(--hex-icon-color);
    transition: color 0.3s ease;
}

.hexagon .value-subtitle {
    font-size: 0.9rem;
    color: #666;
    opacity: 0.8;
    transition: all 0.3s ease;
}

/* 통합 가치 문구 카드 */
.values-statement-card {
    margin-top: 3rem;
    background: white;
    border-radius: 20px;
    padding: 1rem;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    max-width: 700px;
    min-width: 400px; /* 데스크톱 최소 폭 */
    margin-left: auto;
    margin-right: auto;
    overflow: hidden;
    max-height: 80px; /* 텍스트가 잘리지 않도록 높이 증가 */
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.values-statement-card.expanded {
    max-height: 300px;
    padding: 1.5rem;
    box-shadow: 0 8px 40px rgba(0,0,0,0.12);
}

.statement-content {
    font-size: 1.3rem;
    font-weight: 600;
    color: #555;
    text-align: center;
    margin-bottom: 1.5rem;
    word-break: keep-all; /* 단어 단위로 줄바꿈 */
    overflow-wrap: break-word; /* 긴 단어 처리 */
    /* white-space와 text-overflow 제거하여 자연스러운 줄바꿈 허용 */
}

.value-text {
    display: inline-block;
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
    transition: all 0.3s ease;
    cursor: pointer;
}

.value-text.technology {
    color: #003399;
}

.value-text.environment {
    color: #009944;
}

.value-text.future {
    color: #6b1b9a;
}

/* 강조 상태 - 각 색상별로 분리 */
.value-text.technology.highlighted {
    background-color: rgba(0, 51, 153, 0.1);
    color: #003399 !important;
    transform: scale(1.05);
    padding: 0.3rem 0.7rem;
}

.value-text.environment.highlighted {
    background-color: rgba(0, 153, 68, 0.1);
    color: #009944 !important;
    transform: scale(1.05);
    padding: 0.3rem 0.7rem;
}

.value-text.future.highlighted {
    background-color: rgba(107, 27, 154, 0.1);
    color: #6b1b9a !important;
    transform: scale(1.05);
    padding: 0.3rem 0.7rem;
}

.statement-description {
    font-size: 1.1rem;
    line-height: 1.8;
    color: #666;
    min-height: 3.6em;
    transition: opacity 0.3s ease;
}

/* 타이핑 커서 효과 */
.typing-cursor {
    display: inline-block;
    width: 2px;
    height: 1.2em;
    background: #333;
    animation: blink 1s infinite;
    vertical-align: text-bottom;
    margin-left: 2px;
}

@keyframes blink {
    0%, 50% { opacity: 1; }
    51%, 100% { opacity: 0; }
}


/* 다른 육각형 흐림 효과 */
.hexagon-grid.has-active .hexagon:not(.active) {
    opacity: 0.6;
    filter: saturate(0.7);
}

/* 클릭된 육각형 강조 */
.hexagon.active {
    transform: translateY(-5px) scale(1.05);
    z-index: 10;
}

.hexagon.active .hexagon-inner {
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
}

/* 가로형 타임라인 */
.company-timeline {
    padding: 5rem 0;
    background: #f5f6f8;
    overflow: hidden;
    position: relative;
}

.company-timeline::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(0, 51, 153, 0.02) 0%, transparent 100%);
    pointer-events: none;
}

.horizontal-timeline {
    position: relative;
    padding: 2rem 0 4rem;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    /* 스크롤바 스타일링 */
    scrollbar-width: thin;
    scrollbar-color: #003399 #f0f0f0;
}

/* 고정된 좌우 라벨 */
.timeline-fixed-labels {
    position: sticky;
    left: 0;
    width: 100%;
    height: 0;
    z-index: 10;
    pointer-events: none;
}

.label-left,
.label-right {
    position: absolute;
    bottom: -50px;
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 1.4rem;
    font-weight: 600;
    color: #7a7a7a;
    text-shadow: 
        2px 2px 4px rgba(255, 255, 255, 0.8),
        -1px -1px 2px rgba(255, 255, 255, 0.5),
        0 0 8px rgba(255, 255, 255, 0.6);
    pointer-events: auto;
}

.label-left {
    left: 40px;
}

.label-right {
    right: 40px;
}

.label-left .arrow,
.label-right .arrow {
    font-size: 1.6rem;
    text-shadow: 
        2px 2px 4px rgba(255, 255, 255, 0.8),
        0 0 8px rgba(255, 255, 255, 0.6);
}


.horizontal-timeline::-webkit-scrollbar {
    height: 8px;
}

.horizontal-timeline::-webkit-scrollbar-track {
    background: #f0f0f0;
    border-radius: 4px;
}

.horizontal-timeline::-webkit-scrollbar-thumb {
    background: #003399;
    border-radius: 4px;
}

.horizontal-timeline::-webkit-scrollbar-thumb:hover {
    background: #002266;
}

.road-container {
    position: relative;
    width: 3200px;  /* 도로 길이 설정 */
    height: 600px;
    margin: 0;
}

/* 레이어별 z-index 설정 */
.signs-layer-below {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;
    pointer-events: none;
}

.road-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
    pointer-events: none; /* 클릭 이벤트 통과 */
}

.signs-layer-above {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 20;
    pointer-events: none;
}

/* 표지판 wrapper 스타일 */
.sign-wrapper {
    position: absolute;
    top: 0;
    left: calc(350px * var(--item-index) + 100px); /* 타임라인 아이템과 동일한 간격, 오른쪽으로 50px 이동 */
    width: 100px;
    height: 100%;
}

.sign-wrapper .sign-pole {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    background: linear-gradient(to bottom, 
        rgba(51, 51, 51, 0.8) 0%, 
        rgba(51, 51, 51, 0.95) 50%, 
        rgba(51, 51, 51, 0.8) 100%
    );
    border-radius: 3px;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.3),
        inset -1px 0 2px rgba(255, 255, 255, 0.1);
    z-index: 2;
}

/* 홀수 표지판 wrapper의 기둥 - 기존 값 사용 */
.signs-layer-above .sign-wrapper .sign-pole {
    bottom: 20px;
    height: 90px;
}

/* 짝수 표지판 wrapper의 기둥 - 기존 값 사용 */
.signs-layer-below .sign-wrapper .sign-pole {
    bottom: 140px;
    height: 90px;
}

.sign-wrapper .year-sign {
    position: absolute;
    bottom: 110px;
    left: 50%;
    transform: translateX(-50%);
    width: 100px;
    height: 40px;
    background: #003399;
    border: 3px solid white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2);
    background-image: linear-gradient(to bottom, #004499, #003399);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* 짝수 표지판의 위치 조정 */
.signs-layer-below .sign-wrapper .year-sign {
    bottom: 230px;
}

/* 하늘 효과 - 도로 위쪽 영역 */
.road-container::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 110px; /* 도로에 더 가깝게 */
    background: linear-gradient(
        to top,
        transparent 0%,
        rgba(135, 206, 235, 0.10) 15%,
        rgba(135, 206, 235, 0.20) 40%,
        rgba(135, 206, 235, 0.25) 70%,
        rgba(135, 206, 235, 0.30) 100%
    );
    animation: skyGradient 20s ease-in-out infinite;
    pointer-events: none;
}

/* 은은한 하늘 애니메이션 */
@keyframes skyGradient {
    0%, 100% {
        opacity: 0.6;
        background: linear-gradient(
            to top,
            transparent 0%,
            rgba(135, 206, 235, 0.10) 15%,
            rgba(135, 206, 235, 0.20) 40%,
            rgba(135, 206, 235, 0.25) 70%,
            rgba(135, 206, 235, 0.30) 100%
        );
    }
    50% {
        opacity: 0.8;
        background: linear-gradient(
            to top,
            transparent 0%,
            rgba(176, 224, 230, 0.15) 20%,
            rgba(176, 224, 230, 0.25) 45%,
            rgba(176, 224, 230, 0.30) 75%,
            rgba(176, 224, 230, 0.35) 100%
        );
    }
}

/* 단일 도로 컨테이너 */
.road-single {
    position: absolute;
    bottom: 20px;
    left: 0;
    width: 100%;
    height: 120px;
    background: #7a7a7a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    pointer-events: auto; /* 도로만 클릭 가능 */
}


/* 도로 가장자리 흰색 라인 */
.road-single::before,
.road-single::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 3px;
    background: rgba(255, 255, 255, 0.8);
}

.road-single::before {
    top: 0;
}

.road-single::after {
    bottom: 0;
}

/* 중앙선 - 노란색 점선 */
.road-centerline {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    transform: translateY(-50%);
    background-image: repeating-linear-gradient(
        to right,
        rgba(255, 204, 0, 0.7) 0px,
        rgba(255, 204, 0, 0.7) 30px,
        transparent 30px,
        transparent 60px
    );
}

/* 도로 끝의 자동차 */
.road-car {
    position: absolute;
    left: var(--end-position, 400px);  /* 초기 위치 - CSS 변수 사용, 기본값 400px */
    bottom: 60px;  /* 도로 위에 위치하도록 조정 */
    width: 120px;
    height: 45px;  /* 차체 높이에 맞춤 */
    z-index: 15;  /* 짝수 표지판(1)보다 높고 홀수 표지판(20)보다 낮음 */
    animation: carDriveToCenter var(--car-animation-duration, 1s) ease-out forwards;  /* 중앙으로 이동하는 애니메이션, 동적 시간 */
    transition: left 0.05s linear;  /* 스크롤 시 부드러운 이동 */
}

/* Sticky 효과가 적용된 자동차 */
.road-car.sticky-enabled {
    animation: none;
    transform: none;
    transition: left 0.05s linear;  /* 더 부드러운 스크롤 추적 */
}

/* 자동차 몸체 */
.car-body {
    position: relative;
    width: 100%;
    height: 40px;
    background: linear-gradient(to right, #003399, #0044aa);
    border-radius: 15px 25px 5px 10px;
    box-shadow: 
        0 5px 15px rgba(0, 0, 0, 0.3),
        inset 0 -2px 5px rgba(0, 0, 0, 0.2);
}

/* 자동차 지붕 */
.car-roof {
    position: absolute;
    top: -20px;
    left: 25%;
    width: 50%;
    height: 25px;
    background: linear-gradient(to right, #002266, #003399);
    border-radius: 50% 50% 0 0;
    box-shadow: inset 0 2px 5px rgba(255, 255, 255, 0.2);
}

/* 창문들 */
.car-windows {
    position: absolute;
    top: -15px;
    left: 30%;
    width: 45%;
    height: 18px;
}

.window-front,
.window-back {
    position: absolute;
    height: 100%;
    background: linear-gradient(to bottom, 
        rgba(135, 206, 235, 0.6),
        rgba(135, 206, 235, 0.3)
    );
    border: 2px solid #002266;
}

.window-front {
    right: 0;
    width: 45%;
    border-radius: 5px 15px 0 0;
}

.window-back {
    left: 0;
    width: 45%;
    border-radius: 10px 5px 0 0;
}

/* 라이트 */
.headlight {
    position: absolute;
    right: -5px;
    top: 10px;
    width: 15px;
    height: 15px;
    background: radial-gradient(circle, #ffffcc, #ffff99);
    border-radius: 50% 70% 70% 50%;
    box-shadow: 0 0 20px rgba(255, 255, 200, 0.8);
}

.taillight {
    position: absolute;
    left: -3px;
    top: 10px;
    width: 10px;
    height: 12px;
    background: #ff3333;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(255, 0, 0, 0.5);
}

/* 바퀴 컨테이너 - 차체 내부 기준 */
.car-wheels {
    position: absolute;
    bottom: -10px;  /* 차체 바닥에서 아래로 */
    left: 0;
    width: 100%;
    height: 24px;
    z-index: 1;
}

/* 바퀴 */
.wheel {
    position: absolute;
    width: 24px;
    height: 24px;
    background: #222;
    border-radius: 50%;
    /* animation: wheelRotate 1s linear infinite; */  /* 회전 애니메이션 제거 */
}

/* 휠 디자인 - 작은 회색 원 */
.wheel::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 12px;  /* 바퀴(24px)의 절반 크기 */
    height: 12px;
    border-radius: 50%;
    background: #888;  /* 회색 */
    transform: translate(-50%, -50%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.3);  /* 약간의 깊이감 */
}

/* 바퀴 위치 */
.wheel-front {
    right: 20px;
}

.wheel-back {
    left: 20px;
}

/* 바퀴 스포크 효과 제거 - 작은 회색 원으로 대체됨 */

/* 중앙으로 이동하는 자동차 애니메이션 */
@keyframes carDriveToCenter {
    0% {
        left: -150px;  /* 화면 밖에서 시작 */
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        left: var(--end-position, 400px);  /* CSS 변수로 설정된 중앙 위치 */
    }
}

/* 바퀴 회전 애니메이션 제거
@keyframes wheelRotate {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} */


.company-timeline .timeline-items {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.company-timeline .timeline-item {
    position: absolute;
    top: 0;
    left: calc(350px * var(--item-index)); /* 구름카드 위치: 0px, 350px, 700px... */
    width: 350px; /* 구름 카드 폭 */
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.6s ease forwards;
    animation-delay: calc(var(--item-index) * 0.1s);
    animation-fill-mode: forwards; /* 애니메이션 완료 후 최종 상태 유지 */
}

/* 애니메이션 완료 후 스타일 */
.company-timeline .timeline-item.visible {
    opacity: 1;
    transform: none;
    animation: none;
}

/* 연도 표지판 - 도로 표지판 디자인 */
.year-sign {
    position: absolute;
    bottom: 110px;
    width: 100px;
    height: 40px;
    background: #003399;
    border: 3px solid white;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 700;
    font-size: 1.2rem;
    box-shadow: 
        0 4px 8px rgba(0, 0, 0, 0.3),
        inset 0 -2px 0 rgba(0, 0, 0, 0.2);
    z-index: 3;
    /* 도로 표지판 급의 디자인 */
    background-image: linear-gradient(to bottom, #004499, #003399);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3);
}

/* 짝수 아이템의 표지판은 도로 폭만큼 위로 */
.company-timeline .timeline-item:nth-child(even) .year-sign {
    bottom: 230px;
}

/* 기존 타임라인 아이템의 표지판 숨기기 */
.company-timeline .timeline-item .year-sign,
.company-timeline .timeline-item .sign-pole {
    display: none;
}

/* 연결 기둥 - 더 두껍게 */
.sign-pole {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 6px;
    background: linear-gradient(to bottom, 
        rgba(51, 51, 51, 0.8) 0%, 
        rgba(51, 51, 51, 0.95) 50%, 
        rgba(51, 51, 51, 0.8) 100%
    );
    z-index: 2;
    border-radius: 3px;
    box-shadow: 
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

/* 홀수 아이템 기둥 - 도로 아래쪽에서 시작 */
.company-timeline .timeline-item:nth-child(odd) .sign-pole {
    bottom: 20px;
    height: 90px;
}

/* 짝수 아이템 기둥 - 도로 위쪽에서 시작 (120px 도로 폭만큼 위로) */
.company-timeline .timeline-item:nth-child(even) .sign-pole {
    bottom: 140px;
    height: 90px;
}


/* 구름 wrapper */
.milestone-wrapper {
    position: relative;
    width: 350px;
    /* 초기 상태 - 아래쪽에서 시작하고 투명 */
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.8s ease-out;
    z-index: 30; /* 클릭 가능하도록 최상위 레이어 */
}

/* 구름 꼬리 컨테이너 */
.cloud-tail {
    position: absolute;
    width: 100%;
    height: 100px;
    bottom: 0; /* wrapper 하단에 붙임 */
    left: 0;
    transform: translateY(50%); /* 아래로 반만 내림 */
    z-index: 1;
    pointer-events: none;
    /* 초기 상태 - 꼬리도 애니메이션 */
    opacity: 0;
    transition: all 0.8s ease-out 0.2s; /* 0.2초 딜레이 */
}

/* 큰 꼬리 원 */
.tail-large {
    position: absolute;
    background: linear-gradient(to bottom, #ffffff 0%, #fcfcfc 100%);
    width: 80px;
    height: 80px;
    border-radius: 50%;
    bottom: 22px; /* 작은 원보다 22px 위로 */
    left: 20%;
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.8),    /* 상단 하이라이트 */
        inset 0 -2px 3px rgba(0, 0, 0, 0.03),        /* 연한 하단 그림자 */
        inset 1px 0 2px rgba(0, 0, 0, 0.015),        /* 매우 연한 측면 */
        inset -1px 0 2px rgba(0, 0, 0, 0.015);       /* 매우 연한 측면 */
    display: block;
    z-index: 2;  /* 큰 원이 앞에 */
}

/* 작은 꼬리 원 */
.tail-small {
    position: absolute;
    background: linear-gradient(to bottom, #ffffff 0%, #fcfcfc 100%);
    width: 50px;
    height: 50px;
    border-radius: 50%;
    bottom: 0; /* 원래 위치로 */
    left: 35%;
    box-shadow: 
        inset 0 2px 3px rgba(255, 255, 255, 0.8),    /* 상단 하이라이트 */
        inset 0 -2px 3px rgba(0, 0, 0, 0.03),        /* 연한 하단 그림자 */
        inset 1px 0 2px rgba(0, 0, 0, 0.015),        /* 매우 연한 측면 */
        inset -1px 0 2px rgba(0, 0, 0, 0.015);       /* 매우 연한 측면 */
    display: block;
    z-index: 1;  /* 작은 원이 뒤에 */
}

/* 구름 모양 콘텐츠 */
.milestone-content {
    position: relative;
    background: linear-gradient(to bottom, #ffffff 0%, #fcfcfc 100%);
    padding: 2rem 2.5rem;
    width: 100%;
    text-align: center;
    transition: all 0.3s ease;
    /* 구름 모양 */
    border-radius: 100px;
    box-shadow: 
        inset 0 2px 4px rgba(255, 255, 255, 0.9),    /* 상단 하이라이트 */
        inset 0 -2px 3px rgba(0, 0, 0, 0.04),        /* 연한 하단 그림자 */
        inset 1px 0 2px rgba(0, 0, 0, 0.02),         /* 매우 연한 측면 */
        inset -1px 0 2px rgba(0, 0, 0, 0.02);        /* 매우 연한 측면 */
    z-index: 2; /* 꼬리보다 위에 */
    margin-bottom: 30px; /* 큰 원에 더 가깝게 */
}

/* 홀수 아이템 - 표지판(110px) 기준으로 위치 설정 */
.company-timeline .timeline-item:nth-child(odd) .milestone-wrapper {
    position: absolute;
    bottom: calc(110px + 40px + 60px); /* 표지판 위치 + 표지판 높이 + 여백 = 210px */
    left: 50%;
    transform: translateX(-50%) translateY(30px);
}

/* 짝수 아이템 - 표지판(230px) 기준으로 위치 설정 */
.company-timeline .timeline-item:nth-child(even) .milestone-wrapper {
    position: absolute;
    bottom: calc(230px + 40px + 60px); /* 표지판 위치 + 표지판 높이 + 여백 = 330px */
    left: 50%;
    transform: translateX(-50%) translateY(30px);
}

.company-timeline .milestone-content:hover {
    transform: translateY(-10px) scale(1.02);  /* -5px → -10px로 더 위로 올라가도록 */
    box-shadow: 
        inset 0 3px 6px rgba(255, 255, 255, 0.95),   /* 강화된 상단 하이라이트 */
        inset 0 -4px 8px rgba(0, 0, 0, 0.1),         /* 강화된 하단 그림자 */
        inset 3px 0 6px rgba(0, 0, 0, 0.04),         /* 강화된 측면 깊이 */
        inset -3px 0 6px rgba(0, 0, 0, 0.04);        /* 강화된 반대 측면 */
}

/* 홀수 아이템 hover */
.company-timeline .timeline-item:nth-child(odd) .milestone-wrapper:hover {
    transform: translateX(-50%) translateY(-5px); /* 위로 5px 올라감 */
}

/* 짝수 아이템 hover */
.company-timeline .timeline-item:nth-child(even) .milestone-wrapper:hover {
    transform: translateX(-50%) translateY(-5px); /* 위로 5px 올라감 */
}

.company-timeline .milestone-wrapper:hover .tail-large,
.company-timeline .milestone-wrapper:hover .tail-small {
    transform: scale(1.05);
    box-shadow: 
        inset 0 3px 5px rgba(255, 255, 255, 0.9),
        inset 0 -3px 6px rgba(0, 0, 0, 0.08),
        inset 2px 0 4px rgba(0, 0, 0, 0.04),
        inset -2px 0 4px rgba(0, 0, 0, 0.04);
}

.milestone-content h3 {
    color: var(--primary-color);
    margin-bottom: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    line-height: 1.3;
}

.milestone-content p {
    margin: 0;
    color: #666;
    line-height: 1.5;
    font-size: 0.9rem;
}

/* 타임라인 애니메이션 */
@keyframes fadeInUp {
    0% {
        opacity: 0;
        transform: translateY(20px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* 드래그 중 스타일 */
.road-container {
    cursor: grab;
}

.horizontal-timeline.active .road-container {
    cursor: grabbing;
}

.horizontal-timeline * {
    user-select: none;
}

/* 타임라인 아이템이 보일 때 애니메이션 */
.company-timeline .timeline-item.visible .milestone-wrapper {
    opacity: 1;
    transform: translateX(-50%) translateY(0); /* 중앙 정렬 유지하면서 Y축만 0으로 */
}

.company-timeline .timeline-item.visible .cloud-tail {
    opacity: 1;
    transform: translateY(50%); /* 원래 위치 유지 */
}

/* 순차적 애니메이션을 위한 딜레이 (선택사항) */
.company-timeline .timeline-item:nth-child(1).visible .milestone-wrapper { transition-delay: 0s; }
.company-timeline .timeline-item:nth-child(2).visible .milestone-wrapper { transition-delay: 0.1s; }
.company-timeline .timeline-item:nth-child(3).visible .milestone-wrapper { transition-delay: 0.2s; }
.company-timeline .timeline-item:nth-child(4).visible .milestone-wrapper { transition-delay: 0.3s; }
.company-timeline .timeline-item:nth-child(5).visible .milestone-wrapper { transition-delay: 0.4s; }
.company-timeline .timeline-item:nth-child(6).visible .milestone-wrapper { transition-delay: 0.5s; }
.company-timeline .timeline-item:nth-child(7).visible .milestone-wrapper { transition-delay: 0.6s; }

/* 꼬리 애니메이션 딜레이 조정 */
.company-timeline .timeline-item:nth-child(1).visible .cloud-tail { transition-delay: 0.2s; }
.company-timeline .timeline-item:nth-child(2).visible .cloud-tail { transition-delay: 0.3s; }
.company-timeline .timeline-item:nth-child(3).visible .cloud-tail { transition-delay: 0.4s; }
.company-timeline .timeline-item:nth-child(4).visible .cloud-tail { transition-delay: 0.5s; }
.company-timeline .timeline-item:nth-child(5).visible .cloud-tail { transition-delay: 0.6s; }
.company-timeline .timeline-item:nth-child(6).visible .cloud-tail { transition-delay: 0.7s; }
.company-timeline .timeline-item:nth-child(7).visible .cloud-tail { transition-delay: 0.8s; }

/* 네비게이션 인디케이터 제거됨 */
/* .timeline-navigation {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 2rem;
    gap: 2rem;
} */

/* .timeline-dots {
    display: flex;
    gap: 0.5rem;
    align-items: center;
} */

/* .timeline-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #e0e0e0;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
} */

/* .timeline-dot:hover {
    background: #b0b0b0;
    transform: scale(1.2);
} */

/* .timeline-dot.active {
    background: var(--primary-color);
    width: 24px;
    border-radius: 12px;
} */

/* .timeline-dot::after {
    content: attr(data-year);
    position: absolute;
    bottom: -20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.7rem;
    color: #666;
    opacity: 0;
    transition: opacity 0.3s ease;
    white-space: nowrap;
} */

/* .timeline-dot:hover::after {
    opacity: 1;
} */

/* 네비게이션 화살표 제거됨 */
/* .timeline-nav-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: white;
    border: 2px solid #e0e0e0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: #666;
} */

/* .timeline-nav-arrow:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: scale(1.1);
} */

/* .timeline-nav-arrow.disabled {
    opacity: 0.5;
    cursor: not-allowed;
} */

/* .timeline-nav-arrow.disabled:hover {
    background: white;
    border-color: #e0e0e0;
    color: #666;
    transform: scale(1);
} */

/* .timeline-nav-arrow svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
} */

/* 타임라인 애니메이션 제거 */
.car-animation {
    display: none;
}

/* CEO 메시지 가로형 레이아웃 */
.ceo-message-horizontal {
    background: #ffffff;
    padding: 5rem 0;
    position: relative;
    overflow: hidden;
}

.ceo-message-horizontal::before {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 40%;
    height: 100%;
    background: linear-gradient(135deg, transparent 0%, rgba(0, 51, 153, 0.03) 100%);
    pointer-events: none;
}

.message-layout {
    display: flex;
    align-items: center;
    position: relative;
    gap: 5rem;  /* 4rem → 5rem으로 늘려서 원호와 텍스트 사이 공간 확보 */
}

.message-text-area {
    flex: 1;
    padding-left: 0;
    position: relative;
}

.message-text-area h2 {
    color: #001133;  /* 본문 강조 텍스트와 동일한 톤 */
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
}

.message-quote {
    position: relative;
    margin: 0 0 2.5rem;
    padding: 0;
    font-size: 1.15rem;
    line-height: 1.6;
    color: #555;
    font-style: normal;  /* 기울임체 제거 */
}

.message-quote strong {
    font-weight: 600;
    color: #001133;  /* 거의 검정에 가까운 짙은 파란색 */
    font-style: normal;
}

/* 따옴표 제거 */

.ceo-visual .ceo-signature {
    margin-top: 1.5rem;
    text-align: center;
    padding: 0.8rem 1.5rem;
    background: transparent;  /* 배경색 제거 */
    border: none;
    /* border-radius: 8px; */  /* 둥근 모서리 제거 */
    display: inline-block;
}

.ceo-visual .signature-name {
    font-size: 1.1rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.3rem;
    display: block;
}

.ceo-visual .signature-title {
    font-size: 0.9rem;
    color: #666;
    font-weight: 400;
    display: block;
}

.ceo-visual {
    position: relative;
    text-align: center;
    flex: 0 0 25%;
    padding-right: 2rem;  /* 4rem → 2rem으로 줄여서 공간 절약 */
}

/* 오른쪽으로 볼록한 원호 구분선 */
.ceo-visual::after {
    content: '';
    position: absolute;
    right: -2rem;  /* -4rem → -2rem으로 이동하여 visual에 더 가깝게 */
    top: 50%;
    transform: translateY(-50%);
    width: 80px;  /* 40px → 80px로 늘려서 곡률 완화 */
    height: 350px;
    border-right: 2px solid #e0e0e0;  /* 밝은 회색으로 변경, 굵기 3px → 2px */
    border-radius: 50%;
    background: transparent;
    opacity: 0.8;  /* 투명도 조정으로 더 부드럽게 */
    z-index: 1;
}

.image-container {
    position: relative;
    width: 200px;
    height: 200px;
    margin: 0 auto;
}

.image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 50%;
    /* 아래쪽에만 그림자 적용 - 더 아래쪽으로 집중 */
    box-shadow: 0 20px 25px -15px rgba(0, 0, 0, 0.25);
}

.visual-accent {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 220px;
    height: 220px;
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
    border-radius: 50%;
    opacity: 0.02;
    z-index: -1;
}

/* 반응형 디자인 */
@media (max-width: 1024px) {
    .hexagon-grid {
        gap: 1.5rem;
    }
    
    /* 태블릿에서 연결선 제거하고 배경 그라데이션 적용 */
    .hexagon-wrapper:not(:last-child)::after {
        display: none; /* 연결선 제거 */
    }
    
    /* 배경 그라데이션으로 연결성 표현 */
    .hexagon-grid {
        background: linear-gradient(90deg, 
            rgba(0, 51, 153, 0.03) 0%,    /* 매우 연한 파랑 */
            rgba(0, 153, 68, 0.03) 50%,    /* 매우 연한 초록 */
            rgba(123, 63, 242, 0.03) 100%  /* 매우 연한 보라 */
        );
        padding: 2rem 1.5rem;
        border-radius: 25px;
        box-shadow: 0 2px 15px rgba(0, 0, 0, 0.04);
    }
    
    .hexagon-wrapper {
        width: 200px;
        height: 222px;
        margin: 0;
    }
    
    .hexagon {
        width: 200px;
        height: 222px;
    }
    
    /* 768px에서 아이콘 크기 조정 */
    .hexagon .value-icon {
        width: 60px;
        height: 60px;
    }
    
    .hexagon .value-icon svg {
        width: 30px;
        height: 30px;
    }
    
    .hexagon h3 {
        font-size: 1.1rem;
    }
    
    .hexagon-hover p {
        font-size: 0.9rem;
    }
    
    
    /* 태블릿에서 네비게이션 조정 */
    .timeline-navigation {
        gap: 1rem;
    }
    
    .timeline-nav-arrow {
        width: 36px;
        height: 36px;
    }
    
    .timeline-nav-arrow svg {
        width: 18px;
        height: 18px;
    }
    
    /* 타임라인 라벨 크기 조정 */
    .label-left,
    .label-right {
        font-size: 1.2rem;
        gap: 10px;
    }
    
    .label-left .arrow,
    .label-right .arrow {
        font-size: 1.4rem;
    }
    
    .message-layout {
        flex-direction: column;
        gap: 2rem;
    }
    
    .ceo-visual::after {
        display: none;
    }
    
    .message-text-area {
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }
    
    /* Message quote styles inherited from parent */
    
    /* CEO signature styles already defined in parent selector */
    
    .ceo-visual {
        order: -1;
        max-width: 400px;
        margin: 0 auto;
        flex: none;
        padding-right: 0;
    }
}

@media (max-width: 768px) {
    .about-overview {
        padding: 3rem 0;
    }
    
    .core-values-section {
        align-items: stretch; /* 전체 너비 사용 */
    }
    
    .main-statement {
        font-size: 1.5rem;
        margin-bottom: 3rem;
    }
    
    .main-statement .char {
        animation-duration: 0.5s;
    }
    
    .values-statement-card {
        padding: 0.75rem;
        margin-left: 1rem;
        margin-right: 1rem;
        min-width: unset;
        max-width: none; /* 최대 폭 제한 제거 */
        width: auto; /* 자동 너비 */
    }
    
    .values-statement-card.expanded {
        padding: 1.25rem;
        max-width: 900px; /* 태블릿에서도 hexagon-grid와 동일한 최대 폭 유지 */
    }
    
    .statement-content {
        font-size: 1.1rem;
        white-space: normal; /* 필요시 줄바꿈 허용 */
    }
    
    .value-text {
        display: inline-block; /* 한 줄로 유지 */
        margin: 0 0.2rem;
    }
    
    /* 모바일에서 하단 설명 문구 표시 */
    .values-statement-card {
        min-width: unset;
        max-width: calc(100% - 30px); /* 양쪽 15px 여백 */
        width: auto;
        margin: 2rem 15px 0;
        padding: 1rem;
    }
    
    .values-statement-card.expanded {
        padding: 1.25rem;
    }
    
    .values-statement-card .statement-content {
        font-size: 0.95rem;
        line-height: 1.6;
        white-space: normal; /* 모바일에서는 필요시 줄바꿈 허용 */
    }
    
    /* 모바일에서 '를 핵심가치로 삼고 있습니다' 앞에서 줄바꿈 */
    .statement-suffix::before {
        content: "\A"; /* 줄바꿈 문자 */
        white-space: pre;
    }
    
    .values-statement-card .statement-description {
        font-size: 0.85rem;
        margin-top: 0.75rem;
    }
    
    /* 768px 이하에서도 기본 flexbox 유지 */
    .hexagon-grid {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 1rem;
        max-width: 100%;
        margin: 2rem auto 0;
    }
    
    /* 768px 이하에서도 연결선 제거 */
    .hexagon-wrapper:not(:last-child)::after {
        display: none;
    }
    
    /* 768px에서도 배경 그라데이션 유지 */
    .hexagon-grid {
        background: linear-gradient(90deg, 
            rgba(0, 51, 153, 0.03) 0%,
            rgba(0, 153, 68, 0.03) 50%,
            rgba(123, 63, 242, 0.03) 100%
        );
        padding: 1.5rem 1rem;
        border-radius: 20px;
    }
    
    .hexagon-wrapper {
        flex: 0 0 calc(33.333% - 1rem);
        max-width: 150px;
        min-width: 120px;
        height: 167px;
        margin: 0;
    }
    
    .hexagon {
        width: 100%;
        height: 100%;
    }
    
    /* Current Stories 섹션 - 패딩만 조정 */
    .current-stories {
        padding: 60px 0;
    }
    
    .story-item {
        padding: 1.2rem 1.5rem;
    }
}

/* 550px 이하에서만 새로운 레이아웃 */
@media (max-width: 550px) {
    /* container 패딩 오버라이드 */
    .about-overview .container {
        padding: 0 10px; /* 5% → 10px로 축소 */
    }
    
    /* main-statement 뷰포트 반응형 폰트 크기 */
    .main-statement {
        font-size: clamp(1.2rem, 5vw, 1.5rem); /* 최소 1.2rem, 뷰포트의 5%, 최대 1.5rem */
        margin-bottom: 2rem;
    }
    
    .hexagon-grid {
        display: flex;
        flex-direction: column;
        gap: 0; /* flexbox에서 음수 gap은 작동하지 않음 */
        max-width: 100%;
        margin: 2rem auto;
        /* 세로 배치에 맞는 세로 그라데이션과 패딩 */
        padding: 2rem 1rem; /* 좌우 패딩 */
        background: linear-gradient(180deg, 
            rgba(0, 51, 153, 0.03) 0%,    /* 위: 연한 파랑 (기술) */
            rgba(0, 153, 68, 0.03) 50%,    /* 중간: 연한 초록 (환경) */
            rgba(123, 63, 242, 0.03) 100%  /* 아래: 연한 보라 (미래) */
        );
        border-radius: 20px;
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    }
    
    /* 각 육각형 래퍼 */
    .hexagon-wrapper {
        display: flex;
        align-items: center;
        /* gap 제거 - 불필요 */
        width: auto; /* 100% → auto로 변경 */
        margin: 0;
        flex: unset;
        max-width: 100%;
        min-width: unset;
        height: auto;
    }
    
    /* 기술과 미래 육각형은 왼쪽으로 이동 */
    .hexagon-wrapper:not(.center) {
        margin-left: -80px;
    }
    
    /* 환경 육각형은 오른쪽으로 이동 */
    .hexagon-wrapper.center {
        margin-left: 80px;
    }
    
    /* 두 번째, 세 번째 육각형을 위로 당겨서 겹치게 함 */
    .hexagon-wrapper:not(:first-child) {
        margin-top: -30px;
    }
    
    /* 육각형 크기 - 768px와 동일하게 유지 후 축소 */
    .hexagon {
        flex-shrink: 0;
        width: 150px;  /* 768px에서의 크기 */
        height: 167px; /* 비율 유지 */
    }
    
    /* 육각형 내부 조정 */
    .hexagon-inner {
        transform: scale(1);
    }
    
    .hexagon .value-icon {
        width: 50px;  /* 40px → 50px */
        height: 50px;
    }
    
    .hexagon .value-icon svg {
        width: 25px;  /* 20px → 25px */
        height: 25px;
    }
    
    .hexagon h3 {
        font-size: 1rem;  /* 0.9rem → 1rem */
        margin-top: 0.3rem;
    }
    
    
    .ceo-message-horizontal {
        padding: 3rem 0;
    }
    
    .message-text-area h2 {
        font-size: 1.5rem;
    }
    
    .message-quote {
        font-size: 1rem;
        margin-bottom: 2rem;
    }
    
    .image-container {
        max-width: 300px;
    }
    
    .company-timeline .timeline-item {
        flex-direction: column !important;
        text-align: center !important;
    }
    
    .milestone-content {
        margin: 2rem 0 !important;
    }
    
    .road-path {
        width: 80px;
    }
    
    /* 모바일에서 타임라인 네비게이션 */
    .timeline-navigation {
        gap: 0.5rem;
        margin-top: 1.5rem;
    }
    
    .timeline-nav-arrow {
        width: 32px;
        height: 32px;
    }
    
    .timeline-nav-arrow svg {
        width: 16px;
        height: 16px;
    }
    
    /* 타임라인 라벨 크기 조정 */
    .label-left,
    .label-right {
        font-size: 1.1rem;
        gap: 8px;
    }
    
    .label-left .arrow,
    .label-right .arrow {
        font-size: 1.2rem;
    }
    
    .label-left {
        left: 20px;
    }
    
    .label-right {
        right: 20px;
    }
    
    /* 550px 이하에서 더 작은 라벨 */
    .label-left,
    .label-right {
        font-size: 1rem;
        gap: 6px;
    }
    
    .label-left .arrow,
    .label-right .arrow {
        font-size: 1.1rem;
    }
    
    .label-left {
        left: 10px;
    }
    
    .label-right {
        right: 10px;
    }
    
    .timeline-dots {
        gap: 0.3rem;
    }
    
    .timeline-dot {
        width: 8px;
        height: 8px;
    }
    
    .timeline-dot.active {
        width: 20px;
    }
    
    .timeline-dot::after {
        display: none; /* 모바일에서는 연도 표시 숨김 */
    }
    
    /* 타임라인 아이템 크기 조정 */
    .company-timeline .timeline-item {
        flex: 0 0 250px;
    }
    
    /* 구름 카드 너비 반응형 설정 */
    .milestone-wrapper {
        width: calc(100vw - 100px); /* 화면 너비에서 양쪽 여백 제외 */
        max-width: 300px; /* 최대 너비 제한 */
    }
    
    /* 반응형에서도 표지판 기준 위치 유지 - 살짝 더 아래로 */
    .company-timeline .timeline-item:nth-child(odd) .milestone-wrapper {
        bottom: calc(110px + 50px + 40px); /* 표지판 + 작은표지판높이 + 작은여백 = 200px (기존 210px) */
    }
    
    .company-timeline .timeline-item:nth-child(even) .milestone-wrapper {
        bottom: calc(230px + 50px + 40px); /* = 320px (기존 330px) */
    }
    
    .milestone-content {
        padding: 1rem 1.2rem; /* 여유있게 조정 */
        margin-bottom: 30px; /* 작은 화면에서는 여백도 줄임 */
    }
    
    /* 텍스트 크기 뷰포트 반응형 설정 */
    .milestone-content h3 {
        font-size: clamp(0.9rem, 4vw, 1rem); /* 뷰포트에 따라 조정 */
        white-space: nowrap; /* 줄바꿈 방지 */
        overflow: hidden;
        text-overflow: ellipsis; /* 필요시 말줄임표 */
    }
    
    .milestone-content p {
        font-size: clamp(0.75rem, 3.5vw, 0.85rem);
    }
    
    .year-sign {
        width: 50px;
        height: 50px;
        font-size: 0.9rem;
    }
    
    /* 구름 꼬리 크기 조정 */
    .tail-large {
        width: 60px; /* 80px → 60px */
        height: 60px;
        bottom: 45px; /* 더 높게 위치시켜 표지판과 안 겹치게 */
    }
    
    .tail-small {
        width: 40px; /* 50px → 40px */
        height: 40px;
        bottom: 25px; /* 더 높게 위치시켜 표지판과 안 겹치게 */
    }
    
    /* 지금의 이야기 섹션 - 550px 이하 패딩만 조정 */
    .current-stories {
        padding: 50px 0;
    }
    
    .story-item {
        padding: 1rem 1.2rem;
    }
}


/* 컨테이너 */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
}

/* 타임라인 제목 스타일 */
.timeline-title {
    color: #333;
    font-size: 1.8rem;
    font-weight: 600;
    margin-bottom: 1.5rem;
    text-align: center;
}

/* 육각형 SVG 아이콘 스타일 */
.hexagon .value-icon svg {
    width: 35px;
    height: 35px;
    fill: var(--hex-icon-color);
    transition: all 0.3s ease;
}

.hexagon:hover .value-icon svg {
    transform: scale(1.05);
}

/* 타임라인 미세 조정 */
.company-timeline .timeline-item {
    margin-bottom: 100px;
}

.company-timeline .timeline-item:last-child {
    margin-bottom: 0;
}

/* 연결선 스타일 */
.hexagon-wrapper:not(:last-child)::after {
    content: '';
    position: absolute;
    width: 4.5rem; /* gap의 90% */
    height: 2px;
    background: linear-gradient(to right, #e6ecf5 0%, #e6f5ec 50%, #f0e6f5 100%);
    top: 50%;
    right: -4.75rem; /* 중앙 정렬을 위해 조정 */
    transform: translateY(-50%);
    transition: width 0.3s ease, right 0.3s ease;
    z-index: -1; /* 육각형 뒤로 보내기 */
}

/* 육각형 애니메이션 개선 */
@keyframes hexagonFloat {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-5px);
    }
}

.hexagon-wrapper:nth-child(1) {
    animation: hexagonFloat 4s ease-in-out infinite;
}

.hexagon-wrapper:nth-child(2) {
    animation: hexagonFloat 4s ease-in-out 1.3s infinite;
}

.hexagon-wrapper:nth-child(3) {
    animation: hexagonFloat 4s ease-in-out 2.6s infinite;
}

/* 메시지 섹션 텍스트 스타일 개선 - 따옴표 제거 */

/* 지금의 이야기 섹션 */
.current-stories {
    padding: 80px 0;
    background: linear-gradient(135deg, #f5f7fa 0%, #e9ecef 100%);
    position: relative;
}

.current-stories::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 20% 50%, rgba(0, 51, 153, 0.05) 0%, transparent 50%),
                radial-gradient(circle at 80% 50%, rgba(0, 153, 68, 0.05) 0%, transparent 50%);
    pointer-events: none;
}

.current-stories .section-title {
    font-size: clamp(1.5rem, 4vw + 0.5rem, 2.5rem);
    color: var(--primary-color);
    text-align: center;
    margin-bottom: 0.5rem;
}

.current-stories .section-subtitle {
    font-size: clamp(0.9rem, 2vw + 0.3rem, 1.1rem);
    color: #666;
    text-align: center;
    margin-bottom: 3rem;
}

.stories-preview {
    max-width: 1000px;
    margin: 0 auto 3rem;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.story-item {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 1.5rem 2rem;
    border-radius: 15px;
    box-shadow: 0 2px 20px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.3);
    position: relative;
    overflow: hidden;
}

.story-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, 
        rgba(255, 255, 255, 0.1) 0%, 
        rgba(255, 255, 255, 0) 50%,
        rgba(255, 255, 255, 0.1) 100%);
    pointer-events: none;
}

.story-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 30px rgba(0, 51, 153, 0.15);
    border-color: rgba(0, 51, 153, 0.3);
    background: rgba(255, 255, 255, 0.85);
}

.story-date {
    font-size: clamp(0.75rem, 1.5vw + 0.2rem, 0.9rem);
    color: #888;
    margin-right: 1rem;
}

.story-tag {
    display: inline-block;
    font-size: clamp(0.75rem, 1.5vw + 0.15rem, 0.85rem);
    color: var(--secondary-color);
    font-weight: 500;
    margin-right: 1rem;
}

.story-title {
    font-size: clamp(0.95rem, 2.5vw + 0.3rem, 1.2rem);
    color: #333;
    margin: 0.5rem 0 0;
    font-weight: 500;
    line-height: 1.6;
}

.stories-cta {
    text-align: center;
}

.btn-view-all {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 1rem 2rem;
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    color: white;
    text-decoration: none;
    border-radius: 30px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.btn-view-all:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 51, 153, 0.3);
}

.btn-view-all svg {
    transition: transform 0.3s ease;
}

.btn-view-all:hover svg {
    transform: translateX(3px);
}


/* ===========================================
   테스트용 컨테이너 스타일
   =========================================== */

/* 테스트 클래스들의 기본 위치 설정 */
.test-road-only,
.test-odd-items,
.test-even-items {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* 도로만 있는 컨테이너 */
.test-road-only {
    /* z-index: 20;  나중에 주석 해제 */
}

/* 홀수 아이템 컨테이너 */
.test-odd-items {
    /* z-index: 30;  나중에 주석 해제 */
}

/* 짝수 아이템 컨테이너 */
.test-even-items {
    /* z-index: 10;  나중에 주석 해제 */
}

/* 테스트 모드 표시 */
.test-road-only::before {
    content: "도로 전용 레이어 (z-index: 20)";
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 100;
}

.test-odd-items::before {
    content: "홀수 아이템 레이어 (z-index: 30)";
    position: absolute;
    top: 10px;
    left: 200px;
    background: rgba(0, 255, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 100;
}

.test-even-items::before {
    content: "짝수 아이템 레이어 (z-index: 10)";
    position: absolute;
    top: 10px;
    left: 400px;
    background: rgba(0, 0, 255, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 100;
}