dnssash/theme/rd.laser/rb.custom/main_visual/module.css

/* --- STORY 섹션 레이아웃 --- */
.story-section {
    width: 100%;
    padding: 80px 0;
    background-color: #f8f9fa;
    overflow: hidden;
}

/* 📌 [분할] 내용과 미디어가 함께 있는 경우 (좌우 2단) */
.story-layout-split {
    display: flex;
    align-items: stretch;
    gap: 10px;
}
.story-layout-split .story-text {
    flex: 1;
    min-width: 0;
    text-align: left; /* 기본 좌측 정렬 */
    display: flex;
    flex-direction: column;
    justify-content: center;
}
/* 💡 [수정] 분할 레이아웃일 때 제목(h2)만 가운데 정렬 */
.story-layout-split .story-text h2 {
    text-align: center;
}
.story-layout-split .story-image {
    flex: 1;
    min-width: 0;
    display: block; /* 이미지 영역 보이기 */
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    /*aspect-ratio: 4 / 3;*/
}

/* 📌 [전체] 내용만 있는 경우 (텍스트가 중앙에 넓게 배치) */
.story-layout-full {
    display: flex;
    justify-content: center;
}
.story-layout-full .story-text {
    flex: none;
    width: 100%;
    max-width: 800px;
    margin: 0 auto;
    text-align: center; /* 모든 텍스트 가운데 정렬 */
}
.story-layout-full .story-image {
    display: none; /* 이미지/슬라이더 영역 숨김 */
}

/* 공통 텍스트 스타일 */
.story-text .subtitle {
    font-size: 16px;
    font-weight: 700;
    color: var(--accent-color);
    margin-bottom: 10px;
    display: block;
    text-align: center; /* 💡 추가: 텍스트 가운데 정렬 */
}
/* h2는 각 레이아웃 클래스에서 정렬을 제어하므로 여기서는 공통 스타일만 정의 */
.story-text h2 {
    font-size: 36px;
    font-weight: 900;
    color: var(--primary-color);
    margin-bottom: 20px;
    line-height: 1.4;
}
.story-text p {
    font-size: 16px;
    line-height: 1.8;
    color: var(--secondary-color);
}
.story-text img,
.story-text video {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 20px 0;
}

/* --- 슬라이더(Swiper) 스타일 --- */
.story-slider {
    width: 100%;
    height: 100%;
}
.story-slider .swiper-slide {
    width: 100%;
    height: 100%;
}
.story-slider img,
.story-slider video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.story-slider .swiper-pagination-bullet {
    background-color: rgba(0, 0, 0, 0.5);
    opacity: 1;
}
.story-slider .swiper-pagination-bullet-active {
    background-color: var(--accent-color);
}

/* 📌 [추가] DB에 게시물이 없을 때의 기본 레이아웃 (위아래 배치) */
.story-layout-static {
    display: flex;
    flex-direction: column; /* 💡 핵심: 아이템을 세로로 쌓습니다. */
    align-items: center;   /* 가운데 정렬 */
    gap: 40px;             /* 텍스트와 이미지 사이의 간격 */
    text-align: center;    /* 모든 텍스트 가운데 정렬 */
}

.story-layout-static .story-text {
    max-width: 800px; /* 텍스트 최대 너비 제한 */
}

.story-layout-static .story-image {
    width: 100%;
    max-width: 800px; /* 이미지 최대 너비 제한 */
}

.story-layout-static .story-image img {
    width: 100%;
    border-radius: 12px;
}
/* 반응형 스타일 */


/* --- 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;
    /* 💡 [수정] 고정된 max-width를 제거하여 이미지 크기에 맞춰 유연하게 변하도록 합니다. */
    width: auto; /* 너비를 자동으로 설정 */
    max-width: 100%; /* 화면 너비를 넘지 않도록 설정 */
    box-shadow: 0 5px 15px rgba(0,0,0,.5);
    animation: modal-slide-down 0.4s ease-out;
    /*overflow: hidden;*/
    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;
    /* 화면 너비의 90%를 넘지 않도록 설정 */
    max-width: 90vw;
    /* 화면 높이의 80%를 넘지 않도록 설정 (텍스트 공간 확보) */
    max-height: 80vh;
    /* 💡 [핵심] 이미지가 잘리지 않고, 비율을 유지하며 주어진 공간 안에 꽉 차게 표시됩니다. */
    object-fit: contain;
    /* 💡 [수정] width와 height를 auto로 설정하여 원본 비율을 따르도록 합니다. */
    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; /* 이미지 위에 표시되도록 z-index 추가 */
}

.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;

    /* 💡 [보완] keep-all을 보완: 매우 긴 영단어나 URL이 있을 경우
       강제로 줄바꿈하여 레이아웃이 깨지는 것을 방지합니다. */
    overflow-wrap: break-word;
}
/* --- 12. [개선] 카드 설명 텍스트 잘림 방지 및 높이 고정 --- */
.product-info-trend p,
.item-info p {
    /* 1. 텍스트가 여러 줄로 표시될 수 있도록 최소/최대 높이를 확보합니다. */
    /* (폰트 크기 0.95rem * 줄간격 1.6 * 2줄) */
    height: 3.04rem;

    /* 2. 웹킷 브라우저(크롬, 사파리 등)를 위한 멀티라인 생략(...) 처리 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;  /* 💡 최대 2줄까지만 표시합니다. */
    overflow: hidden;
    text-overflow: ellipsis;

    /* 3. 줄간격을 다시 한번 명확하게 지정합니다. */
    line-height: 1.6;
}


/* --- 13. [개선] 모달 스크롤바 스타일링 (보였다 사라지는 효과) --- */
/* Firefox 스크롤바 스타일 */
.image-modal {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.4) transparent;
}

/* Webkit 브라우저 (크롬, 사파리 등) 스크롤바 스타일 */
.image-modal::-webkit-scrollbar {
    width: 10px;
}

.image-modal::-webkit-scrollbar-track {
    background: transparent; /* 트랙은 항상 투명 */
}

/* 기본 상태에서는 스크롤바 막대를 투명하게 만듭니다. */
.image-modal::-webkit-scrollbar-thumb {
    background-color: transparent;
    border-radius: 10px;
    transition: background-color 0.3s ease;
}

/* 모달 위에 마우스를 올렸을 때만 스크롤바 막대가 보이도록 합니다. */
.image-modal:hover::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.4);
}