/*
 * ==========================================================================
 *   💡 tech_section 모듈 전용 스타일시트
 * ==========================================================================
 */

/* --- 1. 섹션 기본 스타일 --- */
.products-trend-section {
    width: 100%;
    padding: 80px 0;
    background-color: #ffffff; /* 또는 원하는 배경색 */
}

/* --- 2. 섹션 헤더 (제목, 부제) --- */
.section-header {
    text-align: center;
    margin-bottom: 50px;
}

.section-header .subtitle {
    font-size: 16px;
    font-weight: 700;
    color: #0056b3; /* 포인트 색상 */
    margin-bottom: 10px;
    display: block;
}

.section-header h2 {
    font-size: 36px;
    font-weight: 900;
    color: #25282B; /* 기본 텍스트 색상 */
    margin-bottom: 15px;
    line-height: 1.4;
}

.section-header p {
    font-size: 16px;
    line-height: 1.7;
    color: #666;
    max-width: 600px;
    margin: 0 auto;
}

/* --- 3. 제품 카드 그리드 --- */
.product-grid {
    display: grid;
    /* 💡 화면 크기에 따라 1~3개의 컬럼으로 자동 조정됩니다. */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 30px;
}

/* --- 4. 개별 제품 카드 --- */
.product-card-trend {
    background-color: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

.product-card-trend:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}

/* --- 5. 카드 내부 요소 --- */
.product-image-trend {
    width: 100%;
    /* 💡 이미지 비율을 4:3으로 유지합니다. */
    aspect-ratio: 4 / 3;
    overflow: hidden;
}

.product-image-trend.is-patent {
    padding: 20px;
    background-color: #f0f0f0;
}

.product-image-trend img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 잘리지 않고 꽉 차도록 설정 */
    transition: transform 0.4s ease;
}

.product-card-trend:hover .product-image-trend img {
    transform: scale(1.05);
}

.product-info-trend {
    padding: 25px;
}

.product-info-trend h3 {
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 10px;
    color: #333;
}

.product-info-trend p {
    font-size: 0.95rem;
    color: #666;
    line-height: 1.6;
}

/* --- 9. 스크롤 애니메이션 (style_prestige_1.css에서 가져옴) --- */
.reveal-up, .reveal-fade {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.reveal-up { transform: translateY(40px); }
.reveal-fade { transform: scale(0.95); }
.reveal-up.is-revealed, .reveal-fade.is-revealed {
    opacity: 1;
    transform: none;
}
/* --- 10. [모듈 전용] 이미지 팝업 모달 스타일 (개선) --- */
.image-modal {
    display: none; /* 기본적으로 숨김 */
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto; /* 내용이 클 경우 스크롤 */
    background-color: rgba(0, 0, 0, 0.85);
    justify-content: center;
    align-items: center;
    padding: 40px 20px; /* 화면 가장자리와 여백 */
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-modal.is-active {
    display: flex;
    opacity: 1;
}

.modal-content {
    position: relative;
    background-color: #fff;
    margin: auto;
    padding: 0;
    border-radius: 8px;
    width: auto; /* 너비를 자동으로 설정 */
    max-width: 100%; /* 화면 너비를 넘지 않도록 설정 */
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    animation: modal-slide-down 0.4s ease-out;
    display: flex; /* 내부 요소 정렬을 위해 flex 사용 */
    flex-direction: column; /* 이미지와 텍스트를 세로로 쌓음 */
}

@keyframes modal-slide-down {
    from {
        transform: translateY(-50px);
        opacity: 0;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

.modal-content .modal-image {
    display: block;
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    width: auto;
    height: auto;
}

.modal-info {
    padding: 20px 25px;
    max-width: 800px; /* 텍스트 영역의 최대 너비는 제한 */
    width: 100%;
}

.modal-info .modal-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: #333;
    margin: 0 0 10px 0;
}

.modal-info .modal-desc {
    font-size: 1rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}

.close-btn {
    color: #fff;
    position: absolute;
    top: 15px;
    right: 25px;
    font-size: 35px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    z-index: 10;
}

.close-btn:hover,
.close-btn:focus {
    color: #ccc;
    text-decoration: none;
}
/* --- 11. [개선] 가독성 향상을 위한 줄바꿈 처리 --- */
.section-header h2,
.section-header p,
.product-info-trend h3,
.product-info-trend p,
.item-info h3,
.item-info p {
    word-break: keep-all;
    overflow-wrap: break-word;
}
/* --- 12. [개선] 카드 설명 텍스트 잘림 방지 및 높이 고정 --- */
.product-info-trend p,
.item-info p {
    height: 3.04rem;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.6;
}
/* -------------------------------------------------- */
/* 💡 [최종 수정] 모달 스크롤바 완전 숨김 처리 */
/* -------------------------------------------------- */

/* 1. 기본 상태: 스크롤바를 완전히 투명하게 만듭니다. */
.rb-modal-overlay,
.rb-modal-body {
    /* Firefox: 스크롤바 색상을 양쪽 모두 투명하게 설정 */
    scrollbar-color: transparent transparent;
    scrollbar-width: thin;
    transition: scrollbar-color 0.3s ease; /* 부드러운 효과를 위해 추가 */
}

.rb-modal-overlay::-webkit-scrollbar,
.rb-modal-body::-webkit-scrollbar {
    width: 10px;
}

.rb-modal-overlay::-webkit-scrollbar-track,
.rb-modal-body::-webkit-scrollbar-track {
    background: transparent;
}

.rb-modal-overlay::-webkit-scrollbar-thumb,
.rb-modal-body::-webkit-scrollbar-thumb {
    /* Webkit: 스크롤바 막대를 투명하게 */
    background-color: transparent;
    border-radius: 10px;
    border: 3px solid transparent;
    background-clip: padding-box;
    transition: background-color 0.3s ease;
}

/* 2. :hover 상태: 마우스를 올리면 스크롤바가 나타납니다. */
.rb-modal-overlay:hover,
.rb-modal-body:hover {
    /* Firefox: 스크롤바 색상을 보이게 변경 */
    scrollbar-color: rgba(0, 0, 0, 0.4) transparent;
}

.rb-modal-overlay:hover::-webkit-scrollbar-thumb,
.rb-modal-body:hover::-webkit-scrollbar-thumb {
    /* Webkit: 스크롤바 막대 색상을 보이게 변경 */
    background-color: rgba(0, 0, 0, 0.4);
}