/* Main page section 7 (Patents & Certificates) */

.main-patents {
    padding: 6rem 0 !important;
    /* 배경 유실 방지를 위해 배경색을 명시하고 하드웨어 가속 추가 */
    background: #0a1128 url("../../img/en/v2/main/main_07.png") no-repeat right center / cover;
    min-height: 600px;
    /* display: flex; */
    /* align-items: left; */
    /* justify-content: center; */
    position: relative;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.patents-container {
    display: block !important;
    max-width: 1200px !important; /* 핵심: 너비를 1200px로 제한 */
    width: 100% !important;
    margin: 0 auto !important; /* 핵심: 중앙 정렬 */
    padding: 0px  !important; /* 핵심: 좌우 여백을 20px로 통일 */
    
    /* 기존의 이상한 마진/패딩 초기화 */
    position: relative !important;
    left: -100px !important;
    right: auto !important;
}

/* [NEW] 타이틀과 버튼을 감싸는 영역 */
/* Flex를 쓰지 않고 block으로 두어야 폰트 크기가 보존됩니다 */
.header-wrapper {
    position: relative; /* 버튼의 기준점(Anchor) 역할 */
    width: 100%;
    display: block;
    margin-bottom: 4rem; /* 슬라이더와의 간격 */
}

/* [NEW] 버튼 스타일 - 절대 위치로 우측 고정 */
.patents-view-btn {
    background-size: contain;
    background-repeat: no-repeat;
    background-color: transparent;
    border: none;
    width: 211px;
    height: 68px;
    padding: 0;
    cursor: pointer;

    /* 핵심: 텍스트 흐름에서 빼내어 우측 하단에 강제 고정 */
    position: absolute;
    right: 0;
    bottom: 10px; /* 타이틀 베이스라인에 맞춰 미세 조정 */
    z-index: 10;
}

.patents-label {
    font-size: 1.75rem;
    font-weight: 600;
    color: white;
    margin: 0 0 1rem 0;
    letter-spacing: 0.15rem;
}

.patents-title {
    font-size: 7.5rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1;
    font-family: "Pretendard", "Apple SD Gothic Neo", Arial, sans-serif;
    letter-spacing: -0.06rem;
    /* 폰트가 잘리지 않게 하려면 아래 속성 추가 가능 */
    white-space: nowrap; 
}

.patents-carousel {
    position: relative;
    width: 100%;
    padding-bottom: 6rem;
    overflow: visible !important;
}

/* iOS 사파리 슬라이드 깜빡임 방지 */
.swiper-slide {
    -webkit-flex-shrink: 0;
    flex-shrink: 0;
    height: auto;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
}

.patent-item {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.patent-image {
    width: 100%;
    height: 18.75rem;
    overflow: hidden;
    background: #f3f4f6;
    display: flex;
    align-items: center;
    justify-content: center;
}

.patent-image img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.patent-description {
    font-size: 1.125rem;
    font-weight: 500;
    color: #fff;
    margin: 1.5rem 0 1rem 0;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.patent-date {
    font-size: 1rem;
    font-weight: 400;
    color: #a0c8e0;
    margin: 0;
}

/* Swiper Buttons & Scrollbar */
.swiper-button-next,
.swiper-button-prev {
    position: absolute !important;
    width: 3.5rem;
    height: 3.5rem;
    background: #00a8e8 !important;
    border-radius: 50%;
    color: #fff !important;
    z-index: 20;
    top: auto !important;
    bottom: 0 !important;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.swiper-button-next { right: 4.5rem !important; }
.swiper-button-prev { right: 10rem !important; }

.patents-carousel .swiper-scrollbar {
    bottom: 2rem;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
    height: 4px;
}

.patents-carousel .swiper-scrollbar-drag {
    background: #00a8e8;
    border-radius: 10px;
}

@media (max-width: 1024px) {
    .patents-container {
        /* [핵심] PC에서 설정한 강제 이동(-120px)을 0으로 초기화 */
        left: 0 !important; 
        right: auto !important;
        
        /* 화면 꽉 차지 않게 양옆 여백 줌 */
        padding: 0 40px !important; 
        margin: 0 auto !important;
        width: 100% !important;
    }

    .patents-title { 
        font-size: 5rem; 
    }
    
    .patent-image { 
        height: 14rem; 
    }
    
    .swiper-button-next { right: 3rem !important; }
    .swiper-button-prev { right: 7rem !important; }
}




/* 반응형: 모바일 (768px 이하) */
@media (max-width: 768px) {
    .main-patents {
        /* padding: 4rem 0 !important; */
        height: auto;
        background: #0a1128 url("../../img/en/v2/main/main_07_m.png") no-repeat center center / cover;
    }

    .patents-container {
        /* [중요] 모바일 중앙 정렬 복구 */
        left: 0 !important;
        padding: 0 20px !important;
        width: 100% !important;
        
    }

    /* 헤더 영역 (버튼의 기준점) */
    .header-wrapper {
        position: relative !important; /* 버튼 절대 위치 기준 */
        display: block !important;
        margin-bottom: 4rem !important; /* 슬라이더와 간격 */
    }
    
    /* 제목 ("Certificate") */
    .patents-title {
        font-size: 2.8rem !important; /* 폰트 사이즈 살짝 조정 */
        line-height: 1.2;
        /* 버튼이 들어갈 공간 확보를 위해 제목 너비 제한 (겹침 방지) */
        max-width: 60%; 
        white-space: normal !important; /* 필요하면 줄바꿈 허용 */
    }

    /* [핵심 수정] 버튼을 우측 하단에 고정 */
    .patents-view-btn {
        position: absolute !important; /* 절대 위치 사용 (흐름에서 뺌) */
        
        right: 0 !important;  /* 오른쪽 끝에 붙임 */
        bottom: 5px !important; /* 바닥에 붙임 (제목 베이스라인 맞춤) */
        
        top: auto !important;
        margin: 0 !important;
        
        /* 모바일에 맞게 버튼 크기 축소 */
        width: 110px !important; 
        height: 45px !important;
        background-size: contain !important;
        z-index: 10;
    }

    /* 슬라이더 이미지 */
    /* [수정] 모바일 특허증 이미지 스타일 개선 */
    .patent-image {
        /* 1. 흰색/회색 박스 배경 제거 (투명하게) */
        background: transparent !important; 
        
        /* 2. 높이 확보: 세로로 긴 특허증이 잘 보이도록 높이를 늘려줌 */
        /* 기존 5rem(80px)은 너무 작아서 14rem(약 220px) 이상 추천 */
        height: 16rem !important; 
        
        /* 3. 이미지 정렬 */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important; /* 중앙 정렬 */
        
        /* 불필요한 마진 제거 */
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
    }

    /* 4. 이미지 태그 자체 설정 */
    .patent-image img {
        width: auto !important; /* 가로를 강제로 늘리지 않고 비율 유지 */
        height: 100% !important; /* 높이를 박스에 맞춤 */
        max-width: 100% !important; /* 화면 밖으로 나가지 않게 제한 */
        
        /* 비율 유지하며 꽉 채우기 */
        object-fit: contain !important; 
        
        /* 배경이 투명해졌으므로 깔끔하게 보이도록 그림자 효과 추가 (선택사항) */
        /* box-shadow: 0 4px 6px rgba(0,0,0,0.1); */
    }
    .main-patents .swiper-slide {
        /* 모바일에서는 간격 축소 -- test */
        margin-right: 5px !important; 
    }
    
    /* .patent-image img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    } */

    .patent-description { font-size: 0.95rem; }
    
    /* 화살표 위치 */
    .swiper-button-next { right: 1rem !important; }
    .swiper-button-prev { right: 4.5rem !important; }
}