/* responsive */
body ,html {
	font-size: 16px !important;
    font-weight: 400;
    line-height: 1.75;    
    letter-spacing: 0.5px;
}

/* 
    設計邏輯：
    Desktop 基準：H2 = 32px
    Mobile  基準：H2 = 26px (為了適應手機寬度，依比例縮小)
*/

/* --- 共用設定L --- */
h1, h2, h3, h4, h5, h6 {
    margin-top: 0;
    margin-bottom: 0.6em; /* 稍微增加一點標題下方的留白 */
    font-weight: 700;
    text-transform: capitalize;
}

/* 
    --- 手機版 (Mobile First) --- 
    這裡的數值比桌機小一號，確保手機閱讀舒適
*/

h1 { font-size: 2rem;       line-height: 1.2; }  /* 32px */
h2 { font-size: 1.625rem;   line-height: 1.25; } /* 26px */
h3 { font-size: 1.375rem;   line-height: 1.3; }  /* 22px */
h4 { font-size: 1.125rem;   line-height: 1.35; } /* 18px */
h5 { font-size: 1rem;       line-height: 1.4; }  /* 16px */
h6 { font-size: 0.875rem;   line-height: 1.4; }  /* 14px */

p {
    font-size: 0.9375rem;   /* 15px (手機版主流大小) */
    line-height: 2;      
    margin:0; 
}


/* --- 桌機以上 (Desktop - min-width: 1024px) --- */
/* 
    當螢幕大於 1024px 時，啟用你的指定基準：
    H2 = 32px
*/
@media (min-width: 1024px) {
    /* H1 比 H2 大一級，設定為 40px */
    h1 { font-size: 2.5rem; }    /* 40px */
    
    /* [重點] H2 鎖定為 32px */
    h2 { font-size: 2rem; }      /* 32px */
    
    /* H3 往下縮一級，設定為 24px */
    h3 { font-size: 1.5rem; }    /* 24px */
    
    /* H4 設定為 20px */
    h4 { font-size: 1.25rem; }   /* 20px */
    
    /* H5 設定為 18px */
    h5 { font-size: 1.125rem; }  /* 18px */
    
    /* H6 設定為 16px */
    h6 { font-size: 1rem; }      /* 16px */
    
    /* 內文回到標準 16px，閱讀最舒適 */
    p  { font-size: 1.125rem; }      /* 18px */
}
