first commit 2
This commit is contained in:
hmw1001
@@ -0,0 +1,294 @@
|
||||
/* --- 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);
|
||||
}
|
||||
Reference in New Issue
Block a user