/* laser.TLRB Layout Style - Dynamic Grid */ .layout-main-content { width: 100%; } /* 행(Row) 스타일 */ .layout-row { display: flex; flex-wrap: wrap; margin-bottom: 20px; /* 행 사이 간격 */ gap: 20px; /* 열 사이 간격 */ } .layout-row:last-child { margin-bottom: 0; } /* 열(Column) 스타일 */ .layout-col { flex: 1; /* 남은 공간을 균등하게 차지 */ min-width: 0; /* 내용물이 넘쳐도 레이아웃 깨짐 방지 */ } /* 💡 [추가] 메인 비주얼 섹션 스타일 */ .main-visual-section { position: relative; width: 100%; height: 500px; /* 비주얼 영역 높이 */ display: flex; align-items: center; justify-content: center; text-align: center; color: #fff; margin-bottom: 60px; /* 메인 콘텐츠와의 간격 */ } .main-visual-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url('https://images.unsplash.com/photo-1588854337236-6889d631f3e7?q=80&w=2070&auto=format&fit=crop'); /* 임시 배경 이미지 */ background-size: cover; background-position: center; filter: brightness(0.5); /* 배경을 어둡게 처리하여 텍스트 가독성 확보 */ z-index: 1; } .main-visual-content { position: relative; z-index: 2; padding: 20px; } .main-visual-title { font-size: 3rem; font-weight: 700; margin: 0 0 10px; line-height: 1.2; } .main-visual-subtitle { font-size: 1.2rem; margin: 0 0 30px; opacity: 0.9; } .main-visual-button { display: inline-block; padding: 12px 30px; background-color: #ff3061; /* 포인트 색상 */ color: #fff; text-decoration: none; font-weight: 700; border-radius: 4px; transition: background-color 0.3s ease; } .main-visual-button:hover { background-color: #e02051; /* 호버 시 약간 더 어둡게 */ } /* 모바일 반응형 */ @media (max-width: 1024px) { .layout-row { flex-direction: column; /* 모바일에서는 세로로 쌓임 */ gap: 20px; } .layout-col { width: 100%; } /* 💡 [추가] 모바일용 메인 비주얼 스타일 */ .main-visual-section { height: 400px; } .main-visual-title { font-size: 2.2rem; } .main-visual-subtitle { font-size: 1rem; } }