/* /theme/basic/css/common.css */

/* 1. 아코디언 카드 공통 설정 및 0.5s cubic-bezier 트랜지션 */
.biz-card {
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    flex: 1 1 0% !important;
    min-width: 0 !important;
}

.biz-card-bg {
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    background-size: cover;
    background-position: center;
}

.biz-card img {
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.biz-card .arrow-icon {
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.biz-card .biz-title, .biz-card .biz-desc, .biz-card .biz-num {
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 2. 비활성 상태 (기본 상태 - 컴팩트하고 깔끔한 세로 카드 형태) */
.biz-card:not(.active) {
    flex: 1 1 0% !important;
    padding: 1.5rem 1.25rem !important;
    border: 1px solid rgba(18, 104, 213, 0.15) !important;
    box-shadow: 0 4px 20px rgba(18, 104, 213, 0.04) !important;
    background-color: transparent !important;
}

/* 비활성 카드 배경 이미지 필터 적용 */
.biz-card:not(.active) .biz-card-bg {
    filter: none !important;
    opacity: 1 !important;
}

/* 비활성 카드 오버레이 그래디언트 */
.biz-card:not(.active) .biz-card-overlay {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0.1) 40%,
      rgba(255, 255, 255, 0.7) 75%,
      rgba(255, 255, 255, 0.9) 100%
    ) !important;
    opacity: 1 !important;
}

/* 비활성 카드 텍스트 색상 및 구조 */
.biz-card:not(.active) .biz-num {
    color: #1268D5 !important;
    font-size: 1.25rem !important;
}
.biz-card:not(.active) .biz-title {
    color: #041f45 !important;
    font-size: 1.05rem !important;
    line-height: 1.3 !important;
    word-break: keep-all !important;
    letter-spacing: -0.02em !important;
}
/* 비활성 카드에서는 설명문 숨김으로 세로 깨짐 완전 방지 */
.biz-card:not(.active) .biz-desc {
    opacity: 0 !important;
    max-height: 0 !important;
    margin-top: 0 !important;
    overflow: hidden !important;
    pointer-events: none !important;
}

/* 3. 활성 상태 (선택된 카드가 넓게 펼쳐지며 상세 정보 노출) */
.biz-card.active {
    flex: 3 1 0% !important;
    padding: 2rem !important;
    border: 1px solid transparent !important;
    box-shadow: 0 20px 40px rgba(4, 31, 69, 0.18) !important;
}

/* 활성 카드 이미지 필터 해제 및 스케일 업 */
.biz-card.active .biz-card-bg {
    filter: none !important;
    transform: scale(1.05) !important;
    opacity: 1 !important;
}

/* 활성 카드 오버레이 그래디언트 */
.biz-card.active .biz-card-overlay {
    background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0) 0%,
      rgba(255, 255, 255, 0) 45%,
      rgba(255, 255, 255, 0.6) 75%,
      rgba(255, 255, 255, 0.85) 100%
    ) !important;
    opacity: 1 !important;
}

/* 활성 카드 텍스트 스타일 */
.biz-card.active .biz-num {
    color: #1268D5 !important;
    font-size: 1.5rem !important;
}
.biz-card.active .biz-title {
    color: #041f45 !important;
    font-size: 1.35rem !important;
    line-height: 1.25 !important;
    word-break: keep-all !important;
}
.biz-card.active .biz-desc {
    color: #2b3641 !important;
    font-weight: 600 !important;
    font-size: 0.8125rem !important;
    opacity: 1 !important;
    max-height: 120px !important;
    margin-top: 0.375rem !important;
    overflow: visible !important;
    word-break: keep-all !important;
}

/* 4. 모바일 및 태블릿 전용 아코디언 뷰 최적화 */
@media (max-width: 1023px) {
    /* 모바일에서는 Swiper 안에서 아코디언 대신 고정 비율과 상세보기를 쾌적하게 구성 */
    .business-swiper .swiper-slide {
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }
}

/* 5. 주요 수행실적 (Performance) 프로젝트 쇼케이스 프리미엄 카드 */
.perf-swiper .swiper-slide {
    width: 290px !important;
    height: 400px !important;
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    border-radius: 24px;
    overflow: hidden;
    background-color: #FFFFFF !important;
    border: 1px solid rgba(18, 104, 213, 0.08) !important;
    box-shadow: 0 8px 30px rgba(18, 104, 213, 0.04) !important;
}

@media (min-width: 1024px) {
    .perf-swiper .swiper-slide {
        width: 340px !important;
        height: 480px !important;
    }
    
    /* 활성화(첫 번째 대표 카드)된 슬라이드는 전체의 40% 너비 수준으로 크게 팽창 */
    .perf-swiper .swiper-slide-active {
        width: 480px !important;
    }
}

/* 카드 호버 인터랙션 */
.perf-swiper .swiper-slide {
    transform: translateY(0);
}

.perf-swiper .swiper-slide:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(18, 104, 213, 0.1) !important;
    border-color: rgba(18, 104, 213, 0.2) !important;
}

.perf-card-bg {
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.perf-swiper .swiper-slide:hover .perf-card-bg {
    transform: scale(1.05) !important;
}

/* 호버 시 텍스트 및 번호 컬러 스위칭 */
.perf-swiper .swiper-slide:hover .perf-num {
    color: #FFD23F !important;
}

.perf-swiper .swiper-slide:hover .perf-arrow-btn {
    background-color: #FFD23F !important;
    border-color: transparent !important;
    color: #041f45 !important;
}

/* 모바일 전용 수치 */
@media (max-width: 767px) {
    .perf-swiper .swiper-slide {
        width: 100% !important;
        height: 380px !important;
    }
}

/* 6. 기술역량 (Technology) 선택형 쇼케이스 커스텀 스타일 */
.tech-tab-item {
    background-color: #FFFFFF !important;
    border-color: rgba(18, 104, 213, 0.08) !important;
    box-shadow: 0 4px 15px rgba(18, 104, 213, 0.02) !important;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    border-left: 4px solid transparent !important;
}

.tech-tab-item .tech-tab-num {
    color: #1268D5;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.tech-tab-item .tech-tab-title {
    color: #041f45;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

/* 탭 활성화 시 스타일 */
.tech-tab-item.active {
    border-color: transparent !important;
    border-left: 4px solid #1268D5 !important;
    box-shadow: 0 12px 30px rgba(18, 104, 213, 0.08) !important;
    background-color: #FFFFFF !important;
}

.tech-tab-item.active .tech-tab-num {
    color: #FFD23F !important;
}

.tech-tab-item.active .tech-tab-title {
    font-weight: 800 !important;
    color: #1268D5 !important;
}

/* 화살표 회전 */
.tech-tab-item .arrow-indicator {
    transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

.tech-tab-item.active .arrow-indicator {
    transform: rotate(180deg);
    color: #1268D5 !important;
}

/* 바디 펼침 (상세 프로세스 맵) */
.tech-tab-item.active .tech-tab-body {
    max-h: 220px !important;
    opacity: 1 !important;
}

/* 7. 회사소개서/브로슈어 무드 프리미엄 스타일 */
.bg-grid-pattern {
    background-image: radial-gradient(rgba(18, 104, 213, 0.08) 1.2px, transparent 1.2px);
    background-size: 24px 24px;
}

/* 사선 마스크 이미지 프레임 (clip-path 적용으로 비주얼 엣지 극대화) */
.diagonal-clip-left {
    clip-path: polygon(0 0, 100% 0, 88% 100%, 0 100%);
}

.diagonal-clip-right {
    clip-path: polygon(12% 0, 100% 0, 100% 100%, 0 100%);
}

/* 사선 패턴 데코 레이어 */
.deco-stripe {
    background: linear-gradient(135deg, #1268D5 0%, #79C9F5 100%);
    clip-path: polygon(0 0, 100% 0, 70% 100%, 0 100%);
}

/* 메인 히어로 배너용 특수 사선 레이아웃 마스크 */
.hero-split-left {
    clip-path: polygon(0 0, 65% 0, 48% 100%, 0 100%);
}
@media (max-width: 1023px) {
    .hero-split-left {
        clip-path: none;
    }
}

/* 8. 핵심인력 (Team Expert) 세로형 아코디언 */
.expert-accordion-item {
    border-color: rgba(18, 104, 213, 0.08) !important;
    border-left: 4px solid transparent !important;
    background-color: #FFFFFF !important;
    margin-bottom: 10px !important; /* 닫힌 카드 사이 간격 조절 (10px) */
    border-radius: 20px !important;
    height: auto !important; /* 활성/비활성 시 카드의 외부 높이 고정하지 않고 패널 높이로 자동 맞춤 */
}

.expert-accordion-item:hover {
    border-color: rgba(18, 104, 213, 0.15) !important;
    border-left-color: transparent !important; /* 호버 시에도 왼쪽 4px 선이 노출되지 않도록 투명 유지 */
    background-color: #F8FAFC !important;
}

/* 활성화 상태 */
.expert-accordion-item.active {
    border-left: 4px solid #1268D5 !important;
    box-shadow: 0 10px 25px rgba(18, 104, 213, 0.04) !important;
    border-color: transparent !important;
    background-color: #FFFFFF !important;
}

.expert-accordion-item.active .acc-num-badge {
    background-color: #FFD23F !important;
    color: #041f45 !important;
}

.expert-accordion-item.active .acc-name {
    color: #1268D5 !important;
}

.expert-accordion-item.active .acc-icon-btn {
    background-color: #1268D5 !important;
    color: #FFFFFF !important;
    border-color: transparent !important;
}

/* 패널 전이 및 높이 제어 */
.expert-accordion-panel {
    display: none;
    opacity: 0;
    overflow: hidden;
    pointer-events: none;
    transform: translateY(3px);
}

/* 활성 상태 패널 */
.expert-accordion-item.active .expert-accordion-panel {
    display: block !important;
    height: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) !important;
    transition: opacity 0.2s ease-out, transform 0.2s ease-out !important;
}

/* 9. 경쟁력(Competitiveness) 섹션 상세 패널 전환 */
.competitiveness-detail {
    position: relative;
    min-height: 400px; /* 가장 긴 상세 내용이 충분히 들어가는 높이 */
}

@media (min-width: 1024px) {
    .competitiveness-detail {
        min-height: 100%; /* PC에서는 flex/grid 구조에 맞춰 100% 핏 */
    }
}

.detail-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    visibility: hidden;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), visibility 0.4s !important;
}

.detail-panel.is-active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* 10. 회사소개 섹션 스크롤 스냅 높이 고정 해제 및 예외 처리 */
@media (min-width: 1024px) {
    #about {
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        overflow: visible !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: normal !important;
    }
}

/* 11. 기술역량 섹션 스크롤 스냅 높이 고정 해제 및 이미지 최대높이 유동 설정 */
@media (min-width: 1024px) {
    #technology {
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        overflow: visible !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: normal !important;
    }
    
    .tech-capsule-card div:first-child {
        max-height: clamp(320px, 45vh, 480px) !important;
    }
}

/* 12. 인증 쇼케이스 섹션 스타일 및 반응형 */
@media (min-width: 1024px) {
    #certification {
        min-height: 100vh;
        height: 100vh;
        overflow: hidden;
    }
}

@media (max-width: 1023px) {
    #certification {
        height: auto !important;
        min-height: auto !important;
        overflow: visible !important;
    }
}

/* 13. 온라인 문의 섹션 스크롤 스냅 높이 및 푸터 가림 방지 */
@media (min-width: 1024px) {
    #inquiry {
        height: auto !important;
        min-height: 100vh !important;
        min-height: 100svh !important;
        overflow: visible !important;
        scroll-snap-align: start !important;
        scroll-snap-stop: normal !important;
    }
}

/* 14. MRO 수행역량 가독성 보조 텍스트 섀도우 */
.perf-shadow-text {
    text-shadow: 0 1.5px 3px rgba(0, 0, 0, 0.75);
}

/* 14. 기술역량 캡슐 카드 설명글 부드러운 전환 */
.tech-card-desc {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    margin-top: 0;
    transition: all 0.35s ease-out;
}
.tech-capsule-card.active .tech-card-desc {
    max-height: 120px !important;
    opacity: 1 !important;
    margin-top: 6px !important;
}

/* 15. 모바일 화면 본문 텍스트 최소 15px 보장 규칙 */
@media (max-width: 639px) {
    p.font-pretendard,
    .tab-content p,
    .biz-desc,
    .tech-card-desc,
    #history-timeline p,
    #expert-accordion p,
    .competitiveness-detail p,
    #main_footer p {
        font-size: 15px !important;
        line-height: 1.6 !important;
    }
}

/* 16. 모바일 비즈니스 Swiper 슬라이더 스타일 */
.business-swiper {
    width: 100% !important;
    padding-top: 10px !important;
    padding-bottom: 24px !important;
    overflow: hidden !important;
}
.business-swiper .swiper-wrapper {
    display: flex !important;
    align-items: stretch !important;
}
.business-swiper .swiper-slide {
    width: 82% !important;
    max-width: 340px !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    height: auto !important;
}
.business-swiper .biz-swiper-pagination .swiper-pagination-bullet {
    width: 8px;
    height: 8px;
    background: #CBD5E1;
    opacity: 1;
    transition: all 0.3s ease;
}
.business-swiper .biz-swiper-pagination .swiper-pagination-bullet-active {
    width: 24px;
    border-radius: 4px;
    background: #1268D5;
}