/* =========================================================
   Company Proof Mobile Fix
   ---------------------------------------------------------
   연결 위치:
   <link rel="stylesheet" href="css/main-company-proof.css">
   바로 아래에 이 파일을 추가하세요.

   목적:
   - 모바일에서 #companyProof 내부 가로 스냅을 끄고 세로 스택으로 전환
   - .company-proof 하나만 실제 세로 스크롤 컨테이너로 사용
   - 부모 메인 Swiper 터치와 내부 아티클 스크롤 충돌 완화
   - 메인 Swiper와 동일한 --app-viewport-height 기준 사용

   !important 원칙:
   - 원본 main-company-proof.css의 테마 규칙 자체가 !important인 항목
   - JS 진행값으로 적용되는 transform/transition을 모바일에서 끊어야 하는 항목
     에만 제한적으로 유지합니다.
   ========================================================= */

@media (max-width: 786px) {
    .swiper.company-proof-mobile-locked {
        /* none으로 두면 edge 탈출용 제스처까지 막힐 수 있어서 pan-y만 허용 */
        touch-action: pan-y;
    }

    .swiper .swiper-wrapper > .swiper-slide.company-proof-slide,
    .swiper .swiper-slide.company-proof-slide,
    .company-proof-slide {
        height: 100%;
        min-height: 0;
        overflow: hidden;
        padding-top: 0;
        background:
            radial-gradient(circle at 24% 12%, rgba(72, 207, 236, 0.18), transparent 42%),
            linear-gradient(135deg, #091426, #111933) !important;
    }

    .company-proof-slide .company-proof {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        min-height: 0;
        overflow-x: hidden;
        overflow-y: auto;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
        touch-action: pan-y;
    }

    .company-proof-slide .company-proof__header {
        position: sticky;
        top: 0;
        left: 0;
        right: auto;
        z-index: 30;
        width: 100%;
        transform: none;
        grid-template-columns: 1fr auto;
        gap: 12px;
        padding: 76px 20px 14px;
        background: linear-gradient(to bottom, rgba(8, 16, 31, 0.96), rgba(8, 16, 31, 0.72), transparent);
        backdrop-filter: blur(10px);
        pointer-events: none;
    }

    .company-proof-slide .company-proof__progress {
        grid-column: 1 / -1;
        order: 3;
    }

    .company-proof-slide .company-proof__viewport {
        display: block;
        width: 100%;
        height: auto;
        min-height: 0;
        overflow: visible;
        scroll-snap-type: none;
        scroll-behavior: auto;
        overscroll-behavior: contain;
        touch-action: pan-y;
    }

    .company-proof-slide .company-proof__track {
        display: flex;
        flex-direction: column;
        width: 100%;
        max-width: none;
        height: auto;
        transform: none !important;
        transition: none !important;
        will-change: auto;
    }

    .company-proof-slide .company-proof__panel {
        flex: 0 0 auto;
        width: 100%;
        max-width: none;
        height: auto;
        min-height: var(--app-viewport-height, 100vh);
        overflow: visible;
        scroll-snap-align: none;
    }

    .company-proof-slide .company-proof__panel-inner {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        gap: clamp(28px, 6vw, 48px) !important;
        width: calc(100% - 40px) !important;
        height: auto;
        min-height: calc(var(--app-viewport-height, 100vh) - 92px);
        padding: 56px 0 86px !important;
    }

    .company-proof-slide .company-proof__panel:first-child .company-proof__panel-inner {
        padding-top: 42px !important;
    }

    .company-proof-slide .company-proof__text-block {
        max-width: 100% !important;
    }

    .company-proof-slide .company-proof__title {
        font-size: clamp(2.1rem, 10.5vw, 3.6rem) !important;
        line-height: 1.08 !important;
    }

    .company-proof-slide .company-proof__desc {
        font-size: 0.98rem !important;
        line-height: 1.68 !important;
    }

    .company-proof-slide .company-proof__link {
        margin-top: 28px;
    }

    .company-proof-slide .company-proof__link span {
        width: 46px;
        height: 46px;
    }

    .company-proof-slide .company-proof__vision-visual {
        width: 100% !important;
        min-height: min(52vh, 540px) !important;
        margin-top: 8px;
    }

    .company-proof-slide .company-proof__vision-visual::before {
        inset: 10% 0;
        background-size: 110% auto;
        opacity: 0.2;
    }

    .company-proof-slide .company-proof__orbit {
        width: min(72vw, 340px);
        opacity: 0.78;
    }

    .company-proof-slide .company-proof__vision-card {
        width: min(76vw, 300px);
        padding: 17px 18px;
        border-radius: 20px;
    }

    .company-proof-slide .company-proof__cert-showcase {
        width: 100% !important;
        overflow: visible;
    }

    .company-proof-slide .company-proof__cert-window {
        width: 100%;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        overscroll-behavior-y: none;
        -webkit-mask-image: none;
        mask-image: none;
        touch-action: pan-x;
    }

    .company-proof-slide .company-proof__cert-window::-webkit-scrollbar {
        display: none;
    }

    .company-proof-slide .company-proof__cert-track {
        transform: none !important;
        width: max-content;
    }

    .company-proof-slide .company-proof__cert-card {
        flex: 0 0 min(76vw, 280px);
        height: auto;
        scroll-snap-align: center;
    }

    .company-proof-slide .company-proof__cert-hint {
        right: auto;
        left: 0;
        bottom: 16px;
    }

    .company-proof-slide .company-proof__history-stage {
        display: block;
        width: 100% !important;
        min-height: auto !important;
        margin-top: 0;
    }

    .company-proof-slide .company-proof__history-axis,
    .company-proof-slide .company-proof__history-year-nav {
        display: none;
    }

    .company-proof-slide .company-proof__history-window {
        height: auto;
        max-height: none;
        overflow: visible;
    }

    .company-proof-slide .company-proof__history-window::before,
    .company-proof-slide .company-proof__history-window::after {
        display: none;
    }

    .company-proof-slide .company-proof__history-rail {
        transform: none !important;
        padding: 18px;
    }

    .company-proof-slide .company-proof__history-card {
        opacity: 1;
        transform: none;
    }

    .company-proof-slide .company-proof__summary-content {
        grid-template-columns: 1fr;
        gap: 14px;
    }

    .company-proof-slide .company-proof__summary-card {
        min-height: auto;
    }

    .company-proof-slide .company-proof__next-guide {
        display: grid;
        justify-items: center;
    }
}

@media (max-width: 480px) {
    .company-proof-slide .company-proof__header {
        padding: 68px 16px 16px;
    }

    .company-proof-slide .company-proof__panel-inner {
        width: calc(100% - 32px) !important;
    }
}

@media (max-width: 786px) {
    html,
    body {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    html::-webkit-scrollbar,
    body::-webkit-scrollbar {
        display: none;
    }

    .company-proof,
    .company-proof__viewport,
    .company-proof__history-window,
    [data-cert-scroll-window],
    .logos.partners-logo-marquee {
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .company-proof::-webkit-scrollbar,
    .company-proof__viewport::-webkit-scrollbar,
    .company-proof__history-window::-webkit-scrollbar,
    [data-cert-scroll-window]::-webkit-scrollbar,
    .logos.partners-logo-marquee::-webkit-scrollbar {
        display: none;
    }
}