style: fix style utility class inconsistencies and correct CSS syntax

Clean up style-related code across all components:
- Replace deprecated color-* classes with text-[color]/text-white equivalents
- Remove redundant border-box declarations and fix broken empty box-sizing rule
- Correct invalid rounded corner class syntax
- Standardize line-height to leading-[value] utilities
- Uniform margin and padding notation to [xxpx] format

src/pages/home/components/ScenicImageCard/index.vue

@@ -4,16 +4,16 @@
     <img class="scenic-image-card__image block w-full" :src="data.image" mode="aspectFill" />
 
     <div
-      class="scenic-image-card__expand flex flex-items-center flex-justify-center rounded-full color-white font-size-18 font-900"
+      class="scenic-image-card__expand flex flex-items-center flex-justify-center rounded-full text-white font-size-18 font-900"
       @click.stop="handleAction">
       {{ action.icon }}
     </div>
 
     <div v-if="hasCaption" class="scenic-image-card__caption">
-      <div v-if="caption.title" class="scenic-image-card__title color-white font-size-18 font-900 ellipsis-1">
+      <div v-if="caption.title" class="scenic-image-card__title text-white font-size-18 font-900 ellipsis-1">
         {{ caption.title }}
       </div>
-      <div v-if="caption.subtitle" class="scenic-image-card__subtitle color-white text-[14px] font-900 ellipsis-1">
+      <div v-if="caption.subtitle" class="scenic-image-card__subtitle text-white text-[14px] font-900 ellipsis-1">
         {{ caption.subtitle }}
       </div>
     </div>