/* ===== 導入所有 CSS 模組 ===== */

/* Base */
@import url('base/variables.css');
@import url('base/reset.css');
@import url('base/typography.css');

/* Components */
@import url('components/header.css');
@import url('components/buttons.css');
@import url('components/sections.css');

/* Layouts */
@import url('layouts/home.css');
@import url('layouts/about.css');
@import url('layouts/contact.css');
@import url('layouts/responsive.css'); /* 新增響應式設計 */

/* ===== 通用佈局類 ===== */

.container {
    max-width: min(1200px, 100%);
    margin: 0 auto;
    padding: 0 1.2rem;

}

.grid {
    display: grid;
}

/* 基礎 body 樣式 */
body {
    padding-top: calc(4rem + env(safe-area-inset-top));
    font-family: var(--body-font);
    font-size: var(--normal-font-size);
    background: var(--body-color);
    color: var(--text-color);
    line-height: 1.6;
    min-height: 100vh;
}
/* 手機空白間距 */
.mobile-spacer {
    display: none;
}

@media screen and (max-width: 767px) {
    .mobile-spacer {
        display: block;
        height: 80px;
        width: 100%;
    }
}

@media screen and (max-width: 575px) {
    .mobile-spacer {
        height: 100px;
    }
}

@media screen and (max-width: 374px) {
    .mobile-spacer {
        height: 120px;
    }
}