style(responsive): finish responsive token migration

src/app/subscription/components/subscription-vip-offer-section.module.css

@@ -21,7 +21,7 @@
 .title {
   display: flex;
   align-items: baseline;
-  gap: 10px;
+  gap: clamp(8px, 1.852vw, 10px);
   margin: 0;
   line-height: 1.25;
 }
@@ -39,7 +39,7 @@
 }
 
 .subtitle {
-  margin: 8px 0 0;
+  margin: clamp(6px, 1.481vw, 8px) 0 0;
   color: rgba(255, 255, 255, 0.9);
   font-size: var(--responsive-body, 15px);
   font-weight: 700;
@@ -49,9 +49,9 @@
 .notch {
   position: absolute;
   left: 50%;
-  bottom: -12px;
-  width: 24px;
-  height: 24px;
+  bottom: calc(var(--subscription-section-notch-size, 24px) / -2);
+  width: var(--subscription-section-notch-size, 24px);
+  height: var(--subscription-section-notch-size, 24px);
   background: #ff61ad;
   transform: translateX(-50%) rotate(45deg);
 }
@@ -61,7 +61,7 @@
   z-index: 1;
   display: grid;
   grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: clamp(7px, 1.667vw, 9px);
+  gap: var(--subscription-plan-grid-gap, 9px);
   padding:
     var(--responsive-card-padding, 18px)
     clamp(8px, 1.852vw, 10px)
@@ -72,11 +72,14 @@
   position: relative;
   display: flex;
   min-width: 0;
-  min-height: clamp(116px, 23.704vw, 128px);
+  min-height: var(--subscription-plan-card-min-height, 128px);
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  padding: clamp(10px, 2.222vw, 12px) 6px clamp(9px, 2.037vw, 11px);
+  padding:
+    clamp(10px, 2.222vw, 12px)
+    clamp(5px, 1.111vw, 6px)
+    clamp(9px, 2.037vw, 11px);
   border: 1px solid rgba(246, 87, 160, 0.08);
   border-radius: var(--responsive-card-radius-sm, 20px);
   background: #ffffff;
@@ -110,10 +113,10 @@
 
 .offerBadge {
   position: absolute;
-  top: 8px;
+  top: clamp(6px, 1.481vw, 8px);
   left: 50%;
   max-width: calc(100% - 12px);
-  padding: 4px 8px;
+  padding: var(--subscription-offer-badge-padding, 4px 8px);
   border-radius: 999px;
   background: linear-gradient(135deg, #ff5fae 0%, #ff8a34 100%);
   color: #ffffff;
@@ -127,7 +130,7 @@
 
 .planTitle {
   margin-top: 20px;
-  font-size: clamp(16px, 3.519vw, 19px);
+  font-size: var(--subscription-plan-title-size, 19px);
   font-weight: 800;
   line-height: 1.15;
   white-space: nowrap;
@@ -137,12 +140,12 @@
   display: inline-flex;
   align-items: flex-end;
   justify-content: center;
-  margin-top: 4px;
+  margin-top: clamp(3px, 0.741vw, 4px);
   line-height: 1;
 }
 
 .price {
-  font-size: var(--font-responsive-number-lg, 30px);
+  font-size: var(--subscription-price-size-lg, 30px);
   font-weight: 500;
   letter-spacing: -0.8px;
 }
@@ -166,16 +169,7 @@
 
 @media (max-width: 360px) {
   .planGrid {
-    gap: 7px;
-    padding-right: 8px;
-    padding-left: 8px;
-  }
-
-  .planTitle {
-    font-size: 17px;
-  }
-
-  .price {
-    font-size: 27px;
+    padding-right: clamp(8px, 1.852vw, 10px);
+    padding-left: clamp(8px, 1.852vw, 10px);
   }
 }