Update style.css

style.css

@@ -1,74 +1,109 @@
+/* 기본 스타일 및 폰트 설정 */
 body {
-    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-    background-color: #f4f4f4;
+    font-family: 'Noto Sans KR', sans-serif;
+    background: linear-gradient(135deg, #ece9e6, #ffffff);
     margin: 0;
     padding: 0;
+    min-height: 100vh;
+    display: flex;
+    align-items: center;
+    justify-content: center;
 }
 
 .container {
     width: 90%;
     max-width: 800px;
-    margin: 50px auto;
-    background: #fff;
-    padding: 30px;
-    box-shadow: 0 0 10px rgba(0,0,0,0.1);
-    border-radius: 8px;
+    margin: 40px auto;
+    background: #ffffff;
+    padding: 40px;
+    box-shadow: 0 8px 16px rgba(0,0,0,0.1);
+    border-radius: 12px;
+    animation: fadeIn 1s ease-in-out;
 }
 
 h1 {
     text-align: center;
-    color: #333;
+    color: #4A5568;
+    font-size: 2.5em;
     margin-bottom: 20px;
 }
 
 h2 {
-    color: #555;
-    margin-bottom: 15px;
+    color: #2D3748;
+    margin-bottom: 25px;
+    border-bottom: 2px solid #EDF2F7;
+    padding-bottom: 10px;
 }
 
 .question {
-    margin-bottom: 20px;
+    margin-bottom: 25px;
+    padding: 15px;
+    background-color: #F7FAFC;
+    border-radius: 8px;
+    transition: background-color 0.3s ease;
+}
+
+.question:hover {
+    background-color: #EDF2F7;
 }
 
 .question p {
-    font-size: 1.1em;
-    margin-bottom: 10px;
-    color: #333;
+    font-size: 1.2em;
+    margin-bottom: 12px;
+    color: #2D3748;
 }
 
 label {
     display: block;
-    margin-bottom: 8px;
+    margin-bottom: 10px;
     font-size: 1em;
-    color: #555;
+    color: #4A5568;
+    cursor: pointer;
+    transition: color 0.3s ease;
+}
+
+label:hover {
+    color: #2B6CB0;
 }
 
 input[type="radio"] {
-    margin-right: 10px;
+    margin-right: 12px;
+    accent-color: #2B6CB0;
+    transform: scale(1.2);
 }
 
 button {
-    padding: 10px 20px;
-    background-color: #5A67D8;
-    color: #fff;
+    padding: 12px 25px;
+    background-color: #2B6CB0;
+    color: #ffffff;
     border: none;
-    border-radius: 5px;
+    border-radius: 25px;
     cursor: pointer;
     font-size: 1em;
-    margin: 5px;
-    transition: background-color 0.3s ease;
+    transition: background-color 0.3s ease, transform 0.2s ease;
+    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
 }
 
 button:hover {
-    background-color: #434190;
+    background-color: #2C5282;
+    transform: translateY(-2px);
+}
+
+button:active {
+    transform: translateY(0);
+}
+
+.buttons {
+    display: flex;
+    justify-content: space-between;
+    margin-top: 20px;
 }
 
 .next-button, .submit-button {
-    float: right;
+    background-color: #2B6CB0;
 }
 
 .prev-button {
-    float: left;
     background-color: #A0AEC0;
 }
 
@@ -76,40 +111,95 @@ button:hover {
     background-color: #718096;
 }
 
+.submit-button {
+    background-color: #38A169;
+}
+
+.submit-button:hover {
+    background-color: #2F855A;
+}
+
 .clearfix::after {
     content: "";
     clear: both;
     display: table;
 }
 
+/* 결과 페이지 스타일 */
 #result-page {
     text-align: center;
+    animation: fadeIn 1s ease-in-out;
+}
+
+#result-page h1 {
+    color: #2D3748;
+    margin-bottom: 30px;
 }
 
 #result-text {
     text-align: left;
-    margin-bottom: 20px;
-    color: #333;
+    margin: 20px 0;
+    color: #4A5568;
+    line-height: 1.6;
+}
+
+#result-text h3 {
+    color: #2B6CB0;
+    margin-top: 20px;
 }
 
 #result-image {
-    max-width: 100%;
+    max-width: 200px;
     height: auto;
-    margin-bottom: 20px;
-    border-radius: 8px;
+    margin: 20px 0;
+    border-radius: 50%;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
 }
 
-@media (max-width: 600px) {
+#result-page button {
+    margin-top: 20px;
+    background-color: #2B6CB0;
+}
+
+#result-page button:hover {
+    background-color: #2C5282;
+}
+
+/* 애니메이션 */
+@keyframes fadeIn {
+    from { opacity: 0; transform: translateY(20px); }
+    to { opacity: 1; transform: translateY(0); }
+}
+
+/* 반응형 디자인 */
+@media (max-width: 768px) {
     .container {
-        padding: 20px;
+        padding: 30px;
+    }
+
+    h1 {
+        font-size: 2em;
+    }
+
+    h2 {
+        font-size: 1.8em;
+    }
+
+    .question p {
+        font-size: 1.1em;
     }
 
     button {
         width: 100%;
-        margin: 10px 0;
+        margin-bottom: 10px;
     }
 
-    .next-button, .submit-button, .prev-button {
-        float: none;
+    .buttons {
+        flex-direction: column;
+        align-items: stretch;
+    }
+
+    .next-button, .prev-button, .submit-button {
+        width: 100%;
     }
 }