[bug] 오늘의 추천 좋아요수 에러 수정

staticfiles/css/main/main.css

@@ -4,6 +4,9 @@
     align-items: center;
     padding: 50px 20px;
     text-align: center;
+    width: 1020px;
+    margin-left: 200px;
+
 }
 
 .main-container h3 {
@@ -24,7 +27,7 @@
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
     text-align: center;
     max-width: 1050px;
-    width: 90%;
+    width: 900px;
 }
 
 .banner-content h2 {
@@ -144,6 +147,7 @@
     font-size: 1.2em;
     margin-bottom: 8px;
     font-weight: 600;
+    margin-top: 10px;
 }
 
 .search-info p {
@@ -156,7 +160,7 @@
 .product-preview {
     display: flex;
     align-items: center;
-    gap: 45px;
+    gap: 20px;
     margin-bottom: 20px;
     padding-left: 30px;
 }
@@ -191,7 +195,7 @@
     display: grid;
     grid-template-columns: repeat(2, 1fr);
     gap: 10px;
-    margin-bottom: 20px;
+    margin: 50px 0 30px 0;
 }
 
 .mood-option {
@@ -204,6 +208,7 @@
     font-weight: 500;
     cursor: pointer;
     transition: all 0.3s ease;
+    height: 80px;
 }
 
 .mood-option:hover {
@@ -224,8 +229,9 @@
 
 .mini-color-matrix {
     position: relative;
-    width: 500px;
-    height: 350px;
+
+    width: 300px;
+    height: 250px;
     border: 2px solid #ddd;
     border-radius: 10px;
     overflow: hidden;
@@ -345,7 +351,8 @@
 .voting-card {
     background: linear-gradient(135deg, #f0f8ff 0%, #fff 100%);
     position: relative;
-    grid-column: 1 / -1; /* 전체 너비 사용 */
+    grid-column: 1 / -1;
+    /* 전체 너비 사용 */
 }
 
 .voting-products {
@@ -497,6 +504,7 @@
         opacity: 0;
         transform: translateX(-50%) translateY(-20px);
     }
+
     to {
         opacity: 1;
         transform: translateX(-50%) translateY(0);
@@ -546,7 +554,7 @@
     background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.9));
     border-radius: 30px;
     box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
-    width: 1200px;
+    width: 1020px;
 }
 
 .ranking-section .section-header {
@@ -743,15 +751,15 @@
         grid-template-columns: 1fr;
         gap: 20px;
     }
-    
+
     .mood-options {
         grid-template-columns: repeat(2, 1fr);
     }
-    
+
     .color-grid {
         width: 100px;
     }
-    
+
     .color-cell {
         width: 30px;
         height: 30px;
@@ -781,4 +789,52 @@
         width: 100px;
         height: 100px;
     }
+}
+
+.moodico-splash-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: black;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
+    transition: opacity 0.5s ease-in-out;
+}
+
+.moodico-splash-container.hidden {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.moodico-banner h3,
+.moodico-banner p {
+    color: mediumpurple;
+    text-align: center;
+    opacity: 0;
+    animation: fadeIn 1s ease-in forwards;
+
+    background: linear-gradient(135deg, mediumpurple, #cf8bf3, #f6d2f3);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+}
+
+.moodico-banner h3 {
+    font-size: 3em;
+    margin-bottom: 10px;
+    animation-delay: 0.3s;
+}
+
+.moodico-banner p {
+    font-size: 1.5em;
+    animation-delay: 1s;
+}
+
+@keyframes fadeIn {
+    to {
+        opacity: 1;
+    }
 }

staticfiles/css/products/rating.css

@@ -132,7 +132,7 @@
   font-size: 1.2rem;
 }
 
-.ratings-list {
+#ratings-list {
   display: flex;
   flex-direction: column;
   gap: 15px;
@@ -143,6 +143,15 @@
   border: 1px solid #e9ecef;
   border-radius: 6px;
   background-color: #f8f9fa;
+  display: flex;
+  flex-direction: column;
+  gap: 15px;
+}
+
+.rating-comment,
+.rating-item-images {
+    width: 100%;
+    box-sizing: border-box; 
 }
 
 .rating-item-header {
@@ -213,7 +222,7 @@
     gap: 8px;
     margin-top: 10px;
     flex-wrap: wrap;
-    justify-content: start;
+    justify-content: center;
   }
 
   .image-box {
@@ -227,7 +236,7 @@
     position: relative;
     overflow: hidden;
     border-radius: 8px;
-    margin: 0 auto;
+    margin: 0;
   }
 
   .image-box img {
@@ -283,14 +292,6 @@
     background: rgba(0, 0, 0, 0.8);
   }
 
-  /*리뷰 이미지 부분*/
-  .rating-item-body {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 20px;
-    align-items: start;
-  }
-
   /* 리뷰 댓글 */
   .rating-item-comment {
     font-size: 0.95rem;
@@ -300,33 +301,18 @@
   }
 
   .rating-item-images {
-    display: grid;
-    gap: 5px;
-    grid-template-columns: repeat(4, 1fr);
-  }
-
-  /* 이미지가 1개일 때 */
-  .rating-item-images:has(img:first-child:last-child) {
-    grid-template-columns: 1fr;
-  }
-
-  /* 이미지가 2개일 때 */
-  .rating-item-images:has(img:nth-child(2):last-child) {
-    grid-template-columns: repeat(2, 1fr);
-  }
-
-  /* 이미지가 3개일 때 */
-  .rating-item-images:has(img:nth-child(3):last-child) {
-    grid-template-columns: repeat(3, 1fr);
+    display: flex;
+    gap: 10px;
+    flex-wrap: wrap;
+    justify-content: flex-start;
   }
-
-  .rating-image {
-    width: 100%;
-    aspect-ratio: 1 / 1;
+  .rating-item-images .rating-image {
+    width: 100px;
+    height: 100px;
     object-fit: cover;
     border-radius: 8px;
     cursor: pointer;
-    transition: transform 0.2s ease-in-out;
+    border: 1px solid #eee;
   }
 
   .image-modal {

staticfiles/css/style.css

@@ -28,7 +28,7 @@ header nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
-    max-width: 1200px;
+    max-width: 1020px;
     margin: 0 auto;
 }