/* ==========================================
universal.css - 佈局與通用類別 (Desktop-First 延伸)
========================================== */
         * { 
      box-sizing: border-box; 
    }
    body {
      font-family: var(--font-sans);
      background-color: var(--contrast-100);
      color: var(--slate-800);
      overflow-x: hidden;
      line-height: 1.6;
      -webkit-font-smoothing: antialiased;
      margin: 0;
    }
    html { 
      scroll-behavior: smooth; 
    }
    
    .container {
      width: 100%;
      max-width: 1380px;
      margin: 0 auto;
      padding: 0 2rem;
    }

    /* Flexbox 排版工具 */
    .flex { display: flex; flex-direction: row; }
    .flex-col { flex-direction: column; }
    .flex-wrap { flex-wrap: wrap; }
    .items-center { align-items: center; }
    .items-start { align-items: flex-start; }
    .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-10 { z-index: 10; }
    .z-40 { z-index: 40; }
    .z-50 { z-index: 50; }

    /* 寬高與文字對齊 */
    .w-full { width: 100%; }
    .h-full { height: 100%; }
    .text-center { text-align: center; }
    .text-left { text-align: left; }
    .text-right { text-align: right; }
    .text-white { color: var(--white); }
    .text-primary { color: var(--primary); }
    .text-secondary { color: var(--secondary) !important; }
    .text-muted { color: var(--text-500) !important; }
    
    /* 字型權重 */
    .font-bold { font-weight: 700; }
    .font-extrabold { font-weight: 800; }
    .font-medium { font-weight: 500; }
    .font-semibold { font-weight: 600; }
    .font-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace; }

    /* 文字大小階層 */
    .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.6; }
    .text-xl { font-size: 1.25rem; }
    .text-2xl { font-size: 1.5rem ; line-height: 1.6; }
    .text-3xl { font-size: 1.875rem; line-height: 1.4; }
    .text-4xl { font-size: 2.25rem; line-height: 1.3; }
    .text-5xl { font-size: 3rem; line-height: 1.4; }
    .text-6xl { font-size: 3.25rem; line-height: 1.3; }
    
    /* Grid 網格排版工具 */
    .grid { display: grid; }
    .grid-2 { grid-template-columns: repeat(2, 1fr); }
    .grid-3 { grid-template-columns: repeat(3, 1fr); }
    .grid-4 { grid-template-columns: repeat(4, 1fr); }
    .grid-12 { grid-template-columns: repeat(12, 1fr); }

    /* 間距調整工具 (Utility Margins) */
    .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; }
    .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; }
    .mb-16 { margin-bottom: 4rem; }




    .col-2 { grid-column: span 2 / span 2 !important; }
    .col-3 { grid-column: span 3 / span 3 !important; }
    .col-4 { grid-column: span 4 / span 4 !important; }
    .col-5 { grid-column: span 5 / span 5 !important; }
    .col-6 { grid-column: span 6 / span 6 !important; }
    .col-7 { grid-column: span 7 / span 7 !important; }
    .col-8 { grid-column: span 8 / span 8 !important; }
    .col-12 { grid-column: span 12 / span 12 !important; }








    @media (max-width: 1024px) {
        .grid-12 { grid-template-columns: 1fr; }
        .hero-right-col { margin-top: 3rem; }
        .hero-stats { grid-template-columns: repeat(2, 1fr); }
    }










    @media (max-width: 768px) {
            /* 手機版全部變單欄 */
        .grid-2, .grid-4, .grid-3 ,.grid-12 { grid-template-columns: 1fr ; } 
        .grid-12 {
            display: grid !important;
            grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
          }
        /* 手機版標題與內文縮放 */
        .hero-title-text { font-size: 2.25rem; }
        .text-5xl { font-size: 2.25rem; }
        .text-4xl { font-size: 1.75rem; }
        .text-3xl { font-size: 1.5rem; }
        .text-2xl { font-size: 1.25rem; }
        .text-md { font-size: 1.1rem; }
        
        /* 隱藏原本只在電腦顯示的區塊 */
        .md-only { display: none !important; }
        
        /* 行動版 flex 排版轉向 */
        .flex-md-col { flex-direction: column !important; }
        .align-items-md-start { align-items: flex-start !important; }
        
        /* 移除多餘邊距或微調 */
        .gap-8 { gap: 1rem; }


       
         
        .col-4 { grid-column: 1 / -1 !important; }
        .col-6 { grid-column: 1 / -1 !important; 
                width: 100% !important;    
                max-width: 100% !important;}
        .col-8 { grid-column: 1 / -1 !important; }
        
    }