[deploy] load static

Author: ZinYan

staticfiles/css/main/main.css

@@ -497,6 +497,7 @@
 .vote-message-info {
     background: linear-gradient(135deg, #2196f3, #1976d2);
     color: white;
+    white-space: pre-wrap;
 }
 
 @keyframes slideDown {
@@ -745,6 +746,108 @@
     margin: 0;
 }
 
+/* 투표 결과 부분 css */
+.prev-result {
+  display: flex;
+  align-items: center;
+  gap: 20px;
+  height: 100px;
+  padding: 15px;
+  background-color: #f7f9fc;
+  border: 1px solid #e9ecef;
+  border-radius: 16px;
+  box-sizing: border-box;
+  overflow: hidden;
+  margin: 20px 0 0 0;
+}
+
+/* 왼쪽: 우승자 정보 */
+.prev-result__winner {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  text-decoration: none;
+  color: inherit;
+}
+
+.winner__image {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  object-fit: cover;
+  margin-right: 12px;
+  border: 2px solid #fff;
+  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+.winner__info {
+  display: flex;
+  flex-direction: column;
+}
+
+.winner__label {
+  font-size: 12px;
+  color: #868e96;
+}
+
+.winner__name {
+  font-size: 16px;
+  font-weight: bold;
+  color: #212529;
+}
+
+/* 오른쪽: 상세 득표율 */
+.prev-result__details {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+
+a.details__bar {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  font-size: 13px;
+  text-decoration: none;
+  color: inherit;
+}
+
+a.details__bar:hover {
+  background-color: rgba(0, 0, 0, 0.03);
+}
+
+.bar__label {
+  width: 100px; /* 라벨 너비를 고정해 정렬 */
+  color: #495057;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.bar__progress {
+  flex-grow: 1; /* 남은 공간을 모두 차지 */
+  height: 10px;
+  background-color: #e9ecef;
+  border-radius: 5px;
+  overflow: hidden; /* fill이 삐져나가지 않도록 */
+}
+
+.bar__fill {
+  height: 100%;
+  background-color: #4C6EF5;
+  border-radius: 5px;
+  transition: width 0.5s ease-in-out;
+}
+
+.bar__percentage {
+  width: 35px;
+  font-weight: bold;
+  color: #343a40;
+  text-align: right;
+  flex-shrink: 0;
+}
+
 /* 반응형 디자인 */
 @media (max-width: 768px) {
     .main-features {
@@ -989,7 +1092,7 @@
 
   .pc-btn { display:inline-flex; align-items:center; gap:8px; padding:10px 14px; border-radius:12px; font-weight:800; font-size:14px; border:1px solid transparent; cursor:pointer; text-decoration:none; }
   .pc-btn.primary { background: var(--pc-brand); color:#fff; box-shadow:0 8px 18px rgba(111,76,255,.28); }
-  .pc-btn.primary:hover { background: var(--pc-brand-600); }
+  .pc-btn.primary:hover { background: var(--pc-brand-600); text-decoration: none;}
   .pc-btn.ghost { background:#fff; border-color:var(--pc-line); color:#111; }
   .pc-btn.ghost:hover { background:#fbfaff; border-color:#d9d3ff; }
 

staticfiles/css/moodtest/mood_result.css

@@ -1,218 +1,3 @@
-/*
-이전 css인데 혹시몰라서 저장해놓음
-.mood-result-container {
-    padding: 50px 20px;
-    max-width: 900px;
-    margin: 0 auto;
-    display: flex;
-    flex-wrap: wrap;
-    flex-direction: column;
-    gap: 40px;
-    justify-content: center;
-}
-
-.mood-summary-section {
-    flex: 1 1 350px;
-    background-color: #fff;
-    padding: 30px;
-    border-radius: 10px;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
-    text-align: center;
-}
-
-.mood-summary-section .icon {
-    font-size: 2.5em;
-    margin-bottom: 15px;
-    color: darkslategray;
-}
-
-.mood-summary-section h2 {
-    font-size: 1.8em;
-    color: #333;
-    margin-bottom: 10px;
-}
-
-.mood-summary-section p {
-    color: #666;
-    font-size: 1.1em;
-    margin-bottom: 25px;
-    line-height: 1.5;
-}
-
-.color-palette {
-    display: flex;
-    justify-content: center;
-    gap: 15px;
-    margin-bottom: 25px;
-}
-
-.color-box {
-    width: 50px;
-    height: 50px;
-    border-radius: 50%;
-    border: 1px solid rgba(0, 0, 0, 0.1);
-}
-
-.tag-list {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    gap: 10px;
-    margin-bottom: 30px;
-    font-weight: bold;
-
-}
-
-.tag {
-    background-color: #f0f0f0;
-    color: #555;
-    padding: 8px 15px;
-    border-radius: 20px;
-    font-size: 0.9em;
-}
-
-.mood-category-selector {
-    display: flex;
-    justify-content: center;
-    gap: 15px;
-    margin-bottom: 30px;
-}
-
-.mood-category-selector button {
-    background-color: #f7f7f7;
-    color: #555;
-    border: 1px solid #ddd;
-    padding: 10px 20px;
-    border-radius: 25px;
-    cursor: pointer;
-    font-size: 1em;
-    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
-}
-
-.mood-category-selector button.active {
-    background-color: darkslategray;
-    color: white;
-    border-color: darkslategray;
-}
-
-.mood-category-selector button:hover:not(.active) {
-    background-color: #ffeef2;
-    border-color: #ffb3c1;
-}
-
-.recommendation-section {
-    flex: 2 1 600px;
-    min-width: 600px;
-    background-color: #fff;
-    padding: 30px;
-    border-radius: 10px;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
-}
-
-.recommendation-section h3 {
-    font-size: 1.5em;
-    color: #333;
-    margin-bottom: 25px;
-    text-align: center;
-}
-
-.recommended-product-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-    gap: 25px;
-}
-
-.recommended-product-card {
-    border: 1px solid #eee;
-    border-radius: 10px;
-    overflow: hidden;
-    text-align: center;
-    padding: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    transition: box-shadow 0.3s ease;
-    position: relative;
-}
-
-.recommended-product-card:hover {
-    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-    text-decoration: none;
-}
-
-.recommended-product-card .product-type-label {
-    background-color: #ffeef2;
-    color: darkslategray;
-    padding: 5px 10px;
-    border-radius: 15px;
-    font-size: 0.8em;
-    font-weight: bold;
-    margin-bottom: 15px;
-}
-
-.recommended-product-card img {
-    width: 120px;
-    height: 120px;
-    object-fit: contain;
-    margin-bottom: 15px;
-}
-
-.recommended-product-card .brand-name {
-    font-size: 0.9em;
-    color: #888;
-    margin-bottom: 5px;
-}
-
-.recommended-product-card .product-name {
-    font-weight: bold;
-    color: #333;
-    margin-bottom: 10px;
-    min-height: 40px;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}
-
-.recommended-product-card .price {
-    font-size: 1em;
-    color: #ff6699;
-    font-weight: bold;
-    margin-bottom: 15px;
-}
-
-.product-rating {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 0.9em;
-    color: #888;
-    margin-bottom: 10px;
-}
-
-.product-rating .star-icon {
-    color: gold;
-    margin-right: 5px;
-}
-
-.purchase-button {
-    background-color: darkslategray;
-    color: white;
-    border: none;
-    padding: 10px 20px;
-    border-radius: 20px;
-    cursor: pointer;
-    font-size: 0.9em;
-    transition: background-color 0.3s ease;
-    width: 100%;
-    max-width: 150px;
-}
-
-.purchase-button:hover {
-    background-color: darkgray;
-}
-*/
-
 .mood-result-container {
     max-width: 1200px;
     margin: 0 auto;