메인 모션캡쳐 존(전경)
@@ -342,20 +342,64 @@
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
diff --git a/styles.css b/styles.css
index 4763f98..41fedc1 100644
--- a/styles.css
+++ b/styles.css
@@ -603,6 +603,68 @@ section {
color: #cbd5e1;
}
+/* 갤러리 그리드 */
+.gallery-grid {
+ display: grid;
+ grid-template-columns: repeat(3, 1fr);
+ gap: 2rem;
+}
+
+/* 라이트박스 화살표 버튼 스타일 */
+.lightbox-arrow {
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ background: rgba(255,255,255,0.85);
+ border: none;
+ width: 54px;
+ height: 54px;
+ border-radius: 50%;
+ font-size: 2.2rem;
+ color: #ff8800;
+ box-shadow: 0 4px 24px rgba(0,0,0,0.18);
+ cursor: pointer;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ z-index: 10001;
+ transition: background 0.18s, color 0.18s, box-shadow 0.18s;
+ outline: none;
+}
+.lightbox-arrow:hover, .lightbox-arrow:focus {
+ background: #ff8800;
+ color: #fff;
+ box-shadow: 0 8px 32px rgba(255,136,0,0.18);
+}
+.lightbox-prev {
+ left: 3vw;
+}
+.lightbox-next {
+ right: 3vw;
+}
+
+.lightbox-caption {
+ margin-top: 1.2rem;
+ color: #222;
+ background: rgba(255,255,255,0.92);
+ border-radius: 10px;
+ padding: 0.7rem 1.5rem;
+ font-size: 1.13rem;
+ font-weight: 600;
+ text-align: center;
+ max-width: 90vw;
+ box-shadow: 0 2px 12px rgba(0,0,0,0.06);
+ position: relative;
+ z-index: 10002;
+}
+
+.lightbox-img-wrap {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+}
+
/* 반응형 디자인 */
@media (max-width: 768px) {
.hamburger {
@@ -657,6 +719,10 @@ section {
.portfolio-grid {
grid-template-columns: 1fr;
}
+
+ .gallery-grid {
+ grid-template-columns: repeat(2, 1fr);
+ }
}
@media (max-width: 480px) {
@@ -672,4 +738,8 @@ section {
padding: 0.8rem 1.5rem;
font-size: 0.9rem;
}
+
+ .gallery-grid {
+ grid-template-columns: 1fr;
+ }
}
\ No newline at end of file