/* assets/css/strength.css */

.section--strength-group {
    padding: 140px 0 160px;
    position: relative;
    z-index: 20;
    margin-top: -80px;
    /* 어두운 KV 위로 덮어씌움 */
    border-radius: 40px 40px 0 0;
    box-shadow: 0 -30px 60px rgba(0, 0, 0, 0.4);
    background: #f4f6f9;
    overflow: hidden !important;
}

/* =========================================================
   [2] 초고급 유체 오라(Aura) & 그리드 블렌딩
   ========================================================= */
.m3-liquid-aurora {
    position: absolute;
    inset: 0;
    z-index: 0;
    background: #e9ecef;
    /* 차분한 실버 베이스 */
    overflow: hidden;
    pointer-events: none;
}

/* 빛나는 코팅 용액(Orb) - 80px 블러로 완전히 액체처럼 퍼지게 만듦 */
.m3-liquid-aurora .orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    /* 💡 핵심: 형태를 무너뜨려 완벽한 유체 빛으로 만듦 */
    opacity: 0.7;
    animation: floatOrb 20s infinite alternate cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* M3TECH Navy Light */
.orb-1 {
    width: 60vw;
    height: 60vw;
    background: rgba(0, 26, 142, 0.25);
    top: -10%;
    left: -10%;
}

/* M3TECH Green Light */
.orb-2 {
    width: 50vw;
    height: 50vw;
    background: rgba(0, 168, 89, 0.2);
    bottom: -20%;
    right: -10%;
    animation-delay: -5s;
    animation-duration: 25s;
}

/* Tech Cyan Light */
.orb-3 {
    width: 40vw;
    height: 40vw;
    background: rgba(0, 195, 255, 0.15);
    top: 40%;
    left: 30%;
    animation-delay: -12s;
    animation-duration: 18s;
}

/* 💡 빛을 받아 반짝이는 홀로그램 그리드 (Mix-Blend-Mode 사용) */
.m3-liquid-aurora .grid-overlay {
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.8) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.8) 1px, transparent 1px);
    background-size: 60px 60px;
    mix-blend-mode: overlay;
    /* 빛이 지나갈 때만 선이 반짝거림 */
    opacity: 0.9;
    /* 외곽으로 갈수록 그리드가 스르륵 사라지는 마스크 */
    -webkit-mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
    mask-image: radial-gradient(ellipse at center, black 20%, transparent 80%);
}

/* 유기적인 흐름 애니메이션 */
@keyframes floatOrb {
    0% {
        transform: translate(0, 0) scale(1) rotate(0deg);
    }

    33% {
        transform: translate(15vw, 10vh) scale(1.1) rotate(10deg);
    }

    66% {
        transform: translate(-10vw, 20vh) scale(0.9) rotate(-5deg);
    }

    100% {
        transform: translate(5vw, -10vh) scale(1.2) rotate(15deg);
    }
}

/* 컨텐츠가 빛에 묻히지 않도록 보호 */
.section--strength-group .container {
    position: relative;
    z-index: 10;
}

.folder-wrapper {
    position: relative;
    width: 100%;
    max-width: 1000px;
    margin: 40px auto;
    perspective: 3000px;
}

.folder-scene {
    position: relative;
    width: 100%;
    height: 70vh;
    min-height: 600px;
    max-height: 800px;
    transform-style: preserve-3d;
    transform: rotateX(15deg) rotateY(-20deg);
    transform-origin: center center;
}

.folder-back {
    position: absolute;
    inset: 0;
    background: #cad0d9;
    /* 색상을 아주 살짝 더 눌러줌 */
    border-radius: 0 30px 20px 20px;
    box-shadow:
        inset 0 0 40px rgba(0, 0, 0, 0.05),
        20px 40px 80px rgba(0, 0, 0, 0.15);
    /* 바닥으로 떨어지는 그림자 강조 */
    transform: translateZ(-60px);
    border: 1px solid #b8bcc5;
}

.tab-button-group {
    position: absolute;
    top: -55px;
    left: 0;
    display: flex;
    gap: 4px;
    transform: translateZ(-59px);
    z-index: 100;
}

/* --- [수정] 탭 버튼 호버 애니메이션 --- */
.tab-btn {
    padding: 16px 40px;
    background: #b0b4bd;
    border: none;
    border-radius: 12px 12px 0 0;
    font-weight: 800;
    font-size: 16px;
    color: #555;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: inset 0 -5px 10px rgba(0, 0, 0, 0.05);
    position: relative;
}

.tab-btn:not(.active):hover {
    background: #c0c4cc;
    color: #001A8E;
    transform: translateY(-8px);
}

.tab-btn.active {
    background: #d0d4dc;
    color: #001A8E;
    transform: translateY(-8px);
    box-shadow: none;
}

.paper-container {
    position: absolute;
    top: 20px;
    left: 20px;
    right: 20px;
    bottom: 30px;
    transform-style: preserve-3d;
}

/* =========================================================
   [1] 초고급 프리미엄 무광 종이 질감 (300g 두께감)
   ========================================================= */
.strength-panel {
    position: absolute;
    inset: 0;

    /* 1. 기본 종이 배경색 (이미지가 로딩되기 전이나 투명도가 있을 때 대비) */
    background-color: #f4f6f9;

    /* 2. 가져오신 종이 텍스처 이미지 적용 */
    background-image:
        /* 부드러운 조명 효과 (위에서 아래로 빛이 떨어지는 느낌 유지) */
        linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(240, 242, 246, 0.1) 100%),
        /* 👇 여기에 준비하신 종이 이미지 경로를 적어주세요 👇 */
        url("../media/paper-texture.jpg");

    /* 종이 이미지가 패턴형(심리스)이면 repeat, 통짜 큰 이미지면 cover를 씁니다 */
    background-size: cover;
    /* 또는 패턴일 경우 200px 200px 등 */
    background-position: center;
    background-blend-mode: normal, multiply;
    /* 조명과 종이 이미지를 자연스럽게 섞음 */

    /* 3. 두께감과 그림자 (기존의 고급스러운 입체감 유지) */
    border: 1px solid #d5d9e2;
    border-top: 1px solid #ffffff;
    border-radius: 8px;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.9),
        inset 0 -2px 4px rgba(0, 0, 0, 0.02),
        0 5px 20px rgba(0, 0, 0, 0.06);

    display: block;
    will-change: transform, opacity;
    pointer-events: none;
    transform-origin: center center;
    transition: clip-path 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease;
}

/* 💡 문서를 꺼내어 위로 떠올랐을 때의 앰비언트 그림자 */
.strength-panel.active {
    pointer-events: auto;
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.9),
        inset 0 -2px 4px rgba(0, 0, 0, 0.02),
        /* 배경의 네이비/그린 빛이 종이 아래로 스며든 듯한 오라 그림자 */
        0 40px 80px rgba(0, 26, 142, 0.15),
        0 15px 30px rgba(0, 0, 0, 0.08);
}

.strength-panel.active {
    pointer-events: auto;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.3);
}

/* 1. 패널의 clip-path (텍스트에 마우스를 올렸을 때만 발동) */
.strength-panel.active:has(.close-text:hover) {
    clip-path: polygon(-50% -50%, calc(100% - 80px) -50%, calc(100% - 80px) 0, 100% 80px, 150% 80px, 150% 150%, -50% 150%);
}

/* 2. 닫기 버튼 레이어 (넓은 호버 영역 제거) */
.paper-close-btn {
    position: absolute;
    top: 0;
    right: 0;
    width: auto;
    height: auto;
    background: transparent;
    border: none;
    cursor: pointer;
    z-index: 100;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    padding: 0;
    /* 버튼 자체는 마우스를 감지하지 못하게 하여 깜빡임 원인 차단 */
    pointer-events: none;
}

/* 3. 종이가 active일 때만 버튼 동작 */
.strength-panel:not(.active) .paper-close-btn {
    display: none;
}

/* 4. 안내 문구 스타일링 (이 영역이 실제 클릭/호버 타겟이 됩니다) */
.close-text {
    font-family: 'Pretendard';
    font-weight: 700;
    font-size: 11px;
    color: #001A8E;
    letter-spacing: 0.05em;
    opacity: 0.4;
    transition: opacity 0.3s ease;
    /* 위치 이동(transform) 제거, 투명도만 변경 */
    white-space: nowrap;

    /* 텍스트에만 마우스 이벤트 활성화 */
    pointer-events: auto;

    /* 텍스트 주변으로 클릭/호버하기 편하게 패딩 여유 부여 */
    padding: 30px 20px;
    /* 접히는 회색 영역(80px)과 텍스트가 겹치지 않도록 강제로 우측 여백을 둠 */
    margin-right: 60px;
}

/* 텍스트에 마우스를 올렸을 때 텍스트가 선명해짐 */
.close-text:hover {
    opacity: 1;
}

/* 5. 접히는 뒷면 (위치 고정 및 이벤트 무시) */
.fold-corner {
    position: absolute;
    top: 0;
    right: 0;
    width: 80px;
    height: 80px;
    pointer-events: none;
    /* 모서리 부분은 마우스 이벤트를 무시 */
}

.fold-corner::after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0;
    border-color: transparent transparent #e6e8ed transparent;
    filter: drop-shadow(-2px 2px 3px rgba(0, 0, 0, 0.1));
    transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

.close-text:hover+.fold-corner::after {
    border-width: 0 80px 80px 0;
    border-color: transparent transparent #dce0e8 transparent;
}

.panel-content {
    padding: 50px 60px;
    /* 기존 60px 80px에서 여백을 줄여 텍스트/이미지 공간을 더 확보 */
    height: 100%;
    display: flex;
    align-items: center;
    /* 내용이 항상 세로 중앙에 오도록 정렬 */
}

.strength-panel .text-box {
    padding-right: 40px;
    /* 텍스트가 우측 이미지에 너무 바짝 붙지 않도록 숨통 트여주기 */
}

/* 3. 제목 폰트 크기 및 줄바꿈 (가장 중요한 부분) */
.strength-panel .text-box h3.headline-3-kr {
    font-size: 26px;
    line-height: 1.4;
    word-break: keep-all;
    letter-spacing: -0.02em;
    /* 완전한 검정(#000) 대신 고급스러운 다크 차콜 (잉크 질감) */
    color: #1a1d24;
    /* 빛을 받아 종이 안으로 살짝 눌린 듯한 미세한 음각 효과 */
    text-shadow: 0 1px 1px rgba(255, 255, 255, 0.8);
}

/* 4. 본문 설명 폰트 최적화 */
.strength-panel .text-box p.body1 {
    word-break: keep-all;
    line-height: 1.6;
    color: #3b414d;
    /* 본문도 차분한 먹색으로 변경 */
}

/* 5. 이미지(사진) 박스 고급스럽게 다듬기 */
.img-box,
.img-placeholder {
    border-radius: 12px;
    /* 모서리를 기존보다 조금 더 부드럽게 라운딩 */
    box-shadow: 0 15px 35px rgba(0, 26, 142, 0.08);
    /* M3TECH의 메인 네이비 컬러가 은은하게 도는 그림자 적용 */
    border: 1px solid #e2e5ec;
    /* 사진과 배경의 경계를 깔끔하게 분리 */
    aspect-ratio: 4/3;
    /* 사진 비율 고정 */
}

.doc-no {
    font-family: 'Pretendard';
    font-weight: 800;
    color: #001A8E;
    font-size: 15px;
    display: block;
}

.img-box {
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
    aspect-ratio: 4/3;
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.img-placeholder {
    background: #f8f9fb;
    height: 100%;
    min-height: 300px;
    border-radius: 8px;
    border: 2px dashed #dce0e8;
}

.folder-front {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 35%;
    background: linear-gradient(to top, #d0d4dc 85%, #c4c8d0 100%);
    border-radius: 0 0 20px 20px;
    transform: translateZ(40px);
    pointer-events: none;
}

/* 첫 번째 탭 (가장 크게) */
.tab-btn:nth-child(1) {
    padding: 18px 46px;
    font-size: 17px;
}

/* 두 번째 탭 (기본 크기) */
.tab-btn:nth-child(2) {
    padding: 16px 40px;
    font-size: 16px;
}

/* 세 번째 탭 (가장 작게) */
.tab-btn:nth-child(3) {
    padding: 14px 34px;
    font-size: 15px;
}

/* 탭 버튼들의 바닥선 맞추기 */
.tab-button-group {
    align-items: flex-end;
}

/* 모바일 및 태블릿 (980px 이하) - 카드 스와이프 레이아웃 */
@media (max-width: 980px) {

    /* 1. 불필요한 폴더 그래픽, 탭 버튼, 닫기 버튼 모두 숨김 */
    .folder-back,
    .folder-front,
    .tab-button-group,
    .paper-close-btn,
    .fold-corner {
        display: none !important;
    }

    /* 2. 3D 효과 해제 및 높이/여백 초기화 */
    .folder-wrapper,
    .folder-scene {
        perspective: none !important;
        transform: none !important;
        height: auto !important;
        min-height: auto !important;
        margin: 0 !important;
    }

    /* 3. 종이 컨테이너를 가로 스와이프(스크롤) 영역으로 변경 */
    .paper-container {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        display: flex !important;
        gap: 16px;
        overflow-x: auto;
        padding: 20px 20px 40px 20px;
        /* 양옆 및 하단 그림자 여백 */
        scroll-snap-type: x mandatory;
        /* 카드가 자석처럼 화면 중앙에 딱 붙는 효과 */
        -webkit-overflow-scrolling: touch;
        /* 아이폰(iOS) 부드러운 스크롤 */
    }

    /* 스크롤바 숨기기 */
    .paper-container::-webkit-scrollbar {
        display: none;
    }

    .paper-container {
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    /* 4. 개별 종이(패널)를 스와이프 카드로 변경 (GSAP 애니메이션 강제 무시) */
    .strength-panel {
        position: relative !important;
        inset: auto !important;
        flex: 0 0 85% !important;
        /* 모바일 화면의 85% 너비 차지 (옆 카드가 살짝 보이게 유도) */
        transform: none !important;
        opacity: 1 !important;
        pointer-events: auto !important;
        clip-path: none !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 30px rgba(0, 26, 142, 0.08) !important;
        scroll-snap-align: center;
        /* 스크롤 시 카드가 가운데 정렬되도록 */
    }

    /* 5. 카드 내부 레이아웃 (위아래 세로 배치) */
    .strength-panel .row {
        flex-direction: column;
        margin: 0;
        height: auto;
    }

    .strength-panel .col-6 {
        width: 100% !important;
        max-width: 100% !important;
        flex: 0 0 100% !important;
    }

    .panel-content {
        padding: 32px 24px !important;
        height: auto !important;
        display: block !important;
    }

    /* 6. 텍스트 및 이미지 여백 정렬 */
    .strength-panel .text-box {
        padding-right: 0 !important;
        padding-bottom: 24px;
        text-align: center;
    }

    .strength-panel .text-box h3.headline-3-kr {
        font-size: 22px !important;
        margin-bottom: 12px !important;
    }

    .img-box,
    .img-placeholder {
        aspect-ratio: 16 / 9;
        /* 세로 공간을 많이 차지하지 않도록 납작한 비율 적용 */
        min-height: auto;
        width: 100%;
    }
}

/* 상단 서브 KV 영역 설정 */
.section--sub-kv {
    position: relative;
    overflow: hidden;
    /* 이미지가 밖으로 삐져나가지 않게 자르기 */
    padding: 150px 0;
    background-color: #111;
    /* 이미지 로딩 전 보일 바탕색 */
}

/* 배경 컨테이너 */
.sub-kv-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

/* 💡 직접 넣은 이미지 스타일 (엘리베이터 효과를 위해 부모보다 140% 크게 만듭니다) */
.parallax-img {
    position: absolute;
    top: -20%;
    /* 위로 살짝 끌어올려 둠 */
    left: 0;
    width: 100%;
    height: 140%;
    object-fit: cover;
    /* 이미지가 찌그러지지 않고 꽉 차게 맞춤 */
    will-change: transform;
}

/* 글자 가독성을 위한 네이비빛 어두운 오버레이 */
.bg-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(rgba(0, 26, 142, 0.4), rgba(0, 0, 0, 0.7));
    z-index: 1;
}

/* js-fade-up 초기 상태 설정 */
.js-fade-up {
    opacity: 0;
    transform: translateY(40px);
    will-change: transform, opacity;
}