/* ============================================================
   hero.css - 히어로 슬라이더 스타일

   설명: 메인 페이지 상단의 큰 배너 슬라이더입니다.
         3~4개의 이미지가 자동으로 넘어가며,
         각 슬라이드에 제목, 설명, 버튼이 있습니다.
   ============================================================ */

/* 히어로 전체 컨테이너 */
.hero {
    position: relative;
    width: 100%;
    height: 600px;              /* 히어로 높이 */
    overflow: hidden;           /* 넘치는 슬라이드 숨김 */
}

/* 슬라이드를 가로로 나열하는 트랙 */
.hero__track {
    display: flex;
    width: 100%;
    height: 100%;
    transition: transform var(--transition-slow);
}

/* 개별 슬라이드 */
.hero__slide {
    min-width: 100%;            /* 각 슬라이드가 전체 너비 차지 */
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* 슬라이드 배경 이미지 */
.hero__bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;          /* 이미지를 영역에 맞춰 자르기 */
}

/* 배경 위 어두운 오버레이 (텍스트 가독성용) */
.hero__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, rgba(26,35,50,0.85), rgba(0,120,212,0.5));
}

/* 슬라이드 텍스트 콘텐츠 */
.hero__content {
    position: relative;
    z-index: 2;                 /* 오버레이 위에 표시 */
    text-align: center;
    color: var(--color-white);
    max-width: 700px;
    padding: 0 20px;
}

.hero__title {
    font-size: var(--font-size-hero);
    font-weight: var(--font-weight-bold);
    line-height: 1.2;
    margin-bottom: var(--space-md);
    text-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

.hero__description {
    font-size: var(--font-size-h4);
    font-weight: var(--font-weight-regular);
    opacity: 0.9;
    margin-bottom: var(--space-lg);
    line-height: 1.6;
}

/* 슬라이드 내 버튼 그룹 */
.hero__buttons {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
}

/* ──── 슬라이더 컨트롤 ──── */

/* 좌우 화살표 버튼 */
.hero__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    width: 50px;
    height: 50px;
    background-color: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: var(--color-white);
    cursor: pointer;
    transition: background-color var(--transition-fast);
}

.hero__arrow:hover {
    background-color: rgba(255,255,255,0.4);
}

.hero__arrow--prev {
    left: 20px;
}

.hero__arrow--next {
    right: 20px;
}

/* 하단 인디케이터 도트 */
.hero__dots {
    position: absolute;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
    display: flex;
    gap: 10px;
}

.hero__dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: rgba(255,255,255,0.5);
    cursor: pointer;
    transition: all var(--transition-fast);
}

/* 현재 활성 슬라이드 도트 */
.hero__dot.active {
    background-color: var(--color-white);
    transform: scale(1.2);
}