fix(styles): adjust padding and font sizes for improved layout consistency

src/app/sidebar/components/sidebar-screen.module.css

@@ -7,7 +7,7 @@
   background: var(--color-page-background, #ffffff);
   color: var(--color-auth-text-primary, #333333);
   min-height: 100dvh;
-  padding: 0 var(--spacing-lg, 16px) var(--spacing-xxl, 24px);
+  padding: 0 28px var(--spacing-xxl, 24px);
   box-sizing: border-box;
 }
 

src/app/sidebar/components/vip-benefits-card.module.css

@@ -31,7 +31,7 @@
 
 .title {
   margin: 0;
-  font-size: 18px;
+  font-size: var(--font-size-xxl);
   font-weight: 700;
   color: #f657a0;
   line-height: 1.3;
@@ -63,7 +63,7 @@
   align-items: flex-start;
   gap: 0;
   padding: 0;
-  font-size: 14px;
+  font-size: var(--font-size-lg);
   color: #1e1e1e;
   line-height: normal;
 }
@@ -91,7 +91,7 @@
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
+  padding: var(--spacing-xs) var(--spacing-md);
   border-radius: 22px;
   background-image:
     linear-gradient(
@@ -104,7 +104,7 @@
     linear-gradient(#fb5e9d, #fb5e9d);
   background-blend-mode: normal, normal;
   color: var(--color-text-primary, #ffffff);
-  font-size: var(--font-size-md, 14px);
+  font-size: var(--font-size-lg);
   font-weight: 600;
   border: 0;
   cursor: pointer;

src/app/sidebar/components/voice-package-card.module.css

@@ -15,24 +15,36 @@
   border: solid 1px #fbbcb6;
   border-radius: 21px;
   width: 100%;
+  padding: 28px 12px 28px 28px;
   box-sizing: border-box;
   overflow: hidden;
 }
 
-.header {
+.content {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   justify-content: space-between;
   gap: var(--spacing-md, 12px);
-  padding: var(--spacing-lg, 16px) var(--spacing-lg, 16px) var(--spacing-sm, 8px);
+}
+
+.copy {
+  display: flex;
+  flex: 1 1 auto;
+  min-width: 0;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--spacing-sm, 8px);
+}
+
+.header {
+  padding: 0;
 }
 
 .title {
   margin: 0;
-  font-size: var(--font-size-lg, 16px);
+  font-size: var(--font-size-xxl);
   font-weight: 700;
   color: var(--color-accent, #f84d96);
-  line-height: 1.3;
 }
 
 .micIcon {
@@ -52,39 +64,60 @@
 }
 
 .usage {
+  display: inline-flex;
+  align-items: baseline;
+  flex-wrap: wrap;
   margin: 0;
-  padding: 0 var(--spacing-lg, 16px);
+  padding: 0;
   font-size: var(--font-size-md, 14px);
   color: var(--color-text-secondary, #9e9e9e);
   line-height: 1.4;
 }
 
-.usageNumber {
-  color: var(--color-accent, #f84d96);
+.usedNumber {
+  display: inline-flex;
+  color: #fa438b;
+  font-size: 20px;
   font-weight: 700;
+  line-height: 1;
+}
+
+.totalNumber {
+  display: inline-flex;
+  color: #000000;
+  font-size: 20px;
+  font-weight: 700;
+  line-height: 1;
+}
+
+.usageUnit {
+  color: var(--color-text-secondary, #9e9e9e);
+  display: inline-flex;
+  font: 400 var(--font-size-xl, 18px) / 1 var(--font-sans);
 }
 
 .usageText {
-  color: var(--color-text-secondary, #9e9e9e);
+  color: #adabab;
+  font-size: 18px;
   font-weight: 400;
 }
 
 .footer {
-  padding: var(--spacing-md, 12px) var(--spacing-lg, 16px) var(--spacing-lg, 16px);
+  padding: 0;
 }
 
 .buyBtn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  padding: var(--spacing-md, 12px) var(--spacing-lg, 16px);
+  padding: var(--spacing-xs) var(--spacing-lg, 16px);
   border-radius: 22px;
   background-image:
     linear-gradient(91deg, #f67382 0%, #f66690 44%, #f657a0 100%),
     linear-gradient(#f69757, #f69757);
   background-blend-mode: normal, normal;
   color: var(--color-text-primary, #ffffff);
-  font-size: var(--font-size-md, 14px);
+  font-size: var(--font-size-lg);
   font-weight: 600;
   border: 0;
   cursor: pointer;

src/app/sidebar/components/voice-package-card.tsx

@@ -29,24 +29,18 @@ export function VoicePackageCard({
 }: VoicePackageCardProps) {
   return (
     <section className={styles.card}>
+      <div className={styles.content}>
+        <div className={styles.copy}>
           <header className={styles.header}>
             <h2 className={styles.title}>Voice Message Package</h2>
-        <div className={styles.micIcon} aria-hidden="true">
-          <Image
-            src="/images/sidebar/ic_user_voicemessage.png"
-            alt=""
-            width={100}
-            height={100}
-            className={styles.micImage}
-          />
-        </div>
           </header>
 
           <p className={styles.usage}>
-        <span className={styles.usageNumber}>
-          {usedMinutes}min/{totalMinutes}min
-        </span>
-        <span className={styles.usageText}> used/remaining</span>
+            <span className={styles.usedNumber}>{usedMinutes}</span>
+            <span className={styles.usageUnit}>min/</span>
+            <span className={styles.totalNumber}>{totalMinutes}</span>
+            <span className={styles.usageUnit}>min</span>
+            <span className={styles.usageText}>{"\u00a0\u00a0"}used/remaining</span>
           </p>
 
           <div className={styles.footer}>
@@ -59,6 +53,18 @@ export function VoicePackageCard({
               Buy Package
             </button>
           </div>
+        </div>
+
+        <div className={styles.micIcon} aria-hidden="true">
+          <Image
+            src="/images/sidebar/ic_user_voicemessage.png"
+            alt=""
+            width={100}
+            height={100}
+            className={styles.micImage}
+          />
+        </div>
+      </div>
     </section>
   );
 }

src/app/subscription/components/subscription-benefits-card.module.css

@@ -2,6 +2,7 @@
   background-color: #ffffff;
   border-radius: 21px;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
+  padding: 28px 28px 0;
   overflow: hidden;
   border: solid 1px rgba(0, 0, 0, 0.14);
 }
@@ -9,7 +10,7 @@
 .header {
   background-color: #fce4ec;
   border-radius: 5px;
-  padding: var(--spacing-md);
+  padding: 0;
   text-align: center;
 }
 
@@ -23,8 +24,8 @@
 
 .list {
   list-style: none;
-  margin: 18px 0;
-  padding: 0 0 0 20px;
+  margin: 0;
+  padding: 0;
 }
 
 .item {