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 {
+.usedNumber {
-  color: var(--color-accent, #f84d96);
+  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,8 +29,32 @@ export function VoicePackageCard({
 }: VoicePackageCardProps) {
   return (
     <section className={styles.card}>
-      <header className={styles.header}>
+      <div className={styles.content}>
-        <h2 className={styles.title}>Voice Message Package</h2>
+        <div className={styles.copy}>
+          <header className={styles.header}>
+            <h2 className={styles.title}>Voice Message Package</h2>
+          </header>
+
+          <p className={styles.usage}>
+            <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}>
+            <button
+              type="button"
+              className={styles.buyBtn}
+              onClick={onBuyPackage}
+              aria-label="Buy Package"
+            >
+              Buy Package
+            </button>
+          </div>
+        </div>
+
         <div className={styles.micIcon} aria-hidden="true">
           <Image
             src="/images/sidebar/ic_user_voicemessage.png"
@@ -40,24 +64,6 @@ export function VoicePackageCard({
             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>
-      </p>
-
-      <div className={styles.footer}>
-        <button
-          type="button"
-          className={styles.buyBtn}
-          onClick={onBuyPackage}
-          aria-label="Buy Package"
-        >
-          Buy Package
-        </button>
       </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;
+  margin: 0;
-  padding: 0 0 0 20px;
+  padding: 0;
 }
 
 .item {