/* --- 佈局通用類別 (Desktop First) --- */
        .container {
            width: 100%;
            max-width: 1280px;
            margin: 0 auto;
            padding: 0 1.5rem;
        }

        .flex { display: flex; flex-direction: row;  }
        .flex-col { flex-direction: column; }
        .items-center { align-items: center; }
        .justify-between { justify-content: space-between; }
        .justify-center { justify-content: center; }
        .gap-1 { gap: 0.25rem; }
        .gap-2 { gap: 0.5rem; }
        .gap-3 { gap: 0.75rem; }
        .gap-4 { gap: 1rem; }
        .gap-6 { gap: 1.5rem; }
        .gap-8 { gap: 2rem; }
        .gap-12 { gap: 3rem; }
        .gap-16 { gap: 4rem; }
        
        .relative { position: relative; }
        .absolute { position: absolute; }
        .fixed { position: fixed; }
        .inset-0 { top: 0; right: 0; bottom: 0; left: 0; }
        .z-0 { z-index: 0; }
        .z-10 { z-index: 10; }
        .z-20 { z-index: 20; }
        .z-50 { z-index: 50; }

        .w-full { width: 100%; }
        .h-full { height: 100%; }
        .object-cover { object-fit: cover; }

        .text-center { text-align: center; }
        .text-white { color: var(--white); }
        .text-primary { color: var(--primary); }
        
        .font-bold { font-weight: 700; }
        .font-medium { font-weight: 500; }

        .text-xs { font-size: 0.75rem; }
        .text-sm { font-size: 0.875rem; }
        .text-md { font-size: 1rem; }
        .text-lg { font-size: 1.125rem;  line-height: 1.4; }
        .text-xl { font-size: 1.25rem; }
        .text-2xl { font-size: 1.5rem; line-height: 1.4; }
        .text-3xl { font-size: 1.875rem; line-height: 1.4; }
        .text-4xl { font-size: 2.25rem; line-height: 1.1; }
        .text-5xl { font-size: 2.65rem; line-height: 1.5; }
        
        /* 響應式網格系統 (預設為電腦版) */
        .grid { display: grid; }
        .grid-2 { grid-template-columns: repeat(2, 1fr); }
        .grid-4 { grid-template-columns: repeat(4, 1fr); }
        .grid-3 { grid-template-columns: repeat(3, 1fr); }

        /* Margin top */
        .mt-1 { margin-top: 0.25rem; }
        .mt-2 { margin-top: 0.5rem; }
        .mt-4 { margin-top: 1rem; }
        .mt-6 { margin-top: 1.5rem; }
        .mt-8 { margin-top: 2rem; }
        .mt-12 { margin-top: 3rem; }

        /* Margin Bottom */
        .mb-1 { margin-bottom: 0.25rem; }
        .mb-2 { margin-bottom: 0.5rem; }
        .mb-4 { margin-bottom: 1rem; }
        .mb-6 { margin-bottom: 1.5rem; }
        .mb-8 { margin-bottom: 2rem; }
        .mb-12 { margin-bottom: 3rem; }

        /* flex排版 */
        .justify-items-center { justify-items: center; }

        /* 文字大小響應 */
        .hero-title-text { font-size: 3.75rem; } /* 電腦版 */

        /* 背景顏色 */
       .bg-white { background-color: white; }
       .bg-50 {background-color: var(--slate-50); }



        /* 手機版樣式覆蓋 (Max-width 768px) */
        @media (max-width: 768px) {
            .grid-2, .grid-4, .grid-3 { grid-template-columns: 1fr; /* 手機版全部變單欄 */ }
            .hero-title-text { font-size: 2.25rem; /* 手機版標題變小 */ }
            .md-only { display: none !important; /* 隱藏原本只在電腦顯示的區塊 */ }
            .text-md { font-size: 1.1rem; }
            .flex-md-col { flex-direction: column; }
           
            .gap-8 {gap: 0;}
            .gap-4 {gap: 0;}

  

            .text-2xl { font-size: 1.45rem; line-height: 1.4; }
            .text-3xl { font-size: 1.6rem; line-height: 1.4; }
        
        }