From 7b5ba462cb680c56ff2ad7f64b2bf9af4ded1962 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EC=BB=A8=ED=8A=B8=EB=A1=A4DELTA?= <controld3785@gmail.com>
Date: Wed, 1 Apr 2026 13:08:14 +0900
Subject: [PATCH] Improve UI Structure Consistency

---
 src/app/pages/known-issues/known-issues.scss | 10 ++++++++
 src/app/pages/main/main.html                 | 10 ++++----
 src/app/pages/main/main.scss                 | 24 ++++++++++++++++++++
 src/styles.scss                              | 22 +++++++++++++-----
 4 files changed, 54 insertions(+), 12 deletions(-)

diff --git a/src/app/pages/known-issues/known-issues.scss b/src/app/pages/known-issues/known-issues.scss
index bfec015..0ddb029 100644
--- a/src/app/pages/known-issues/known-issues.scss
+++ b/src/app/pages/known-issues/known-issues.scss
@@ -1,3 +1,11 @@
+:host > .container {
+  display: flex;
+  width: 600px;
+
+  flex-direction: column;
+  gap: 40px;
+}
+
 section {
   p {
     line-height: 1.4;
@@ -12,6 +20,8 @@ section {
     font-weight: bold;
     text-transform: uppercase;
 
+    width: fit-content;
+
     &.reported {
       background-color: oklch(0.786 0.1379 18.69);
     }
diff --git a/src/app/pages/main/main.html b/src/app/pages/main/main.html
index bc74d93..13a45b9 100644
--- a/src/app/pages/main/main.html
+++ b/src/app/pages/main/main.html
@@ -5,17 +5,15 @@
 
   <section id="switch-test" class="feature-block">
     <h2>Switch Component</h2>
-    <div style="display: flex; flex-direction: column; gap: 40px; align-items: flex-start;">
-      <div class="test-container">
-        <switch [(isActive)]="isToggled" (toggle)="handleToggle($event)"></switch>
-        <p>Switch is: {{ isToggled() ? 'ON' : 'OFF' }}</p>
-      </div>
+    <div class="test-container">
+      <switch [(isActive)]="isToggled" (toggle)="handleToggle($event)"></switch>
+      <p>Switch is: {{ isToggled() ? 'ON' : 'OFF' }}</p>
     </div>
   </section>
 
   <section id="dropdown-test" class="feature-block">
     <h2>Dropdown Component</h2>
-    <div style="display: flex; flex-direction: column; gap: 40px; align-items: flex-start;">
+    <div class="test-group">
       <div class="test-container">
         <h3>Object Options</h3>
         <dropdown
diff --git a/src/app/pages/main/main.scss b/src/app/pages/main/main.scss
index 7ee9ec7..da436b0 100644
--- a/src/app/pages/main/main.scss
+++ b/src/app/pages/main/main.scss
@@ -1,11 +1,35 @@
+:host > .container {
+  display: flex;
+  width: 600px;
+
+  flex-direction: column;
+  gap: 40px;
+}
+
 section#dropdown-test {
   dropdown {
     width: 324px;
   }
 }
 
+div.test-group {
+  display: flex;
+  flex-direction: column;
+  gap: 36px;
+
+  padding-top: 24px;
+}
+
 div.test-container {
   max-width: 100%;
+
+  h3 {
+    margin-bottom: 6px;
+  }
+
+  p {
+    margin-top: 6px;
+  }
 }
 
 brand-accent {
diff --git a/src/styles.scss b/src/styles.scss
index d250271..f011f97 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -29,21 +29,28 @@ strong {
   font-weight: 900;
 }
 
+h1, h2, h3 {
+  margin: 0;
+}
+
 h1 {
-  margin-bottom: 40px;
+  font-size: 48px;
   text-align: center;
 }
 
 h2 {
-  margin-top: 0;
-  margin-bottom: 20px;
-  font-size: 1.2rem;
+  font-size: 24px;
   color: oklch(0.5103 0 0); // #666
 }
 
+h3 {
+  font-size: 18px;
+}
+
 p {
-  margin-top: 15px;
+  margin-top: 0; margin-bottom: 0;
   font-weight: 500;
+  font-size: 16px;
 }
 
 .container {
@@ -65,7 +72,10 @@ p {
 }
 
 section.feature-block {
-  margin-bottom: 40px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+
   padding: 20px;
   border: 2px solid oklch(0 0 0 / 20%); // rgba(0, 0, 0, 0.2)
   border-radius: 8px;