/* =========================================
   1. 全域設定
   ========================================= */
body {
    font-family: 'Noto Sans TC', sans-serif;
    background-color: #f6f6f6; /* 全站背景 */
    overflow-x: hidden;
    color: #333;
}

html {
    scroll-behavior: smooth;
}

.font-oswald {
    font-family: 'Oswald', sans-serif;
}

.z-index-content {
    position: relative;
    z-index: 2;
}
.about-font{font-size: 1.2em; line-height: 30px;}
.about-title{font-size: 2.3em; line-height: 46px;}
.service-font{font-size: 1.1em; line-height: 26px;}
.shop-view-font{font-size: 1.2em; line-height: 30px;}
.shop-view-title{font-size: 2.3em; line-height: 46px; margin-top: 80px;}
/* =========================================
   2. 紅色圓弧裝飾圖設定
   ========================================= */
.red-arc-img {
    position: absolute;
    z-index: 1; 
    pointer-events: none;
    width: 30vw;
    max-width: 400px;
    min-width: 200px;
    height: auto;
}


.position-bottom-right { bottom: 0; right: 0; }
.position-top-left { top: 0; left: 0; }

/* 防重疊間距 (PC) */
.container-spacer-top {
    padding-top: 150px; /* 避開左上角圓弧 */
    padding-bottom: 50px;
}
.container-spacer-bottom {
    padding-top: 80px;
    padding-bottom: 150px; /* 避開右下角圓弧 */
}

/* HTML 編輯區 (模擬框線) */
.editor-content-area {
    border: 1px solid #dee2e6; /* 淡淡的邊框 */
    background-color: #fff;
    line-height: 1.8;
    color: #333;
}

/* 電腦版 (螢幕大於 768px) 設定 */
@media (min-width: 768px) {
    .filter-buttons .btn {
        width: auto; /* 電腦版：寬度自動 */
        padding: 8px 30px;
        min-width: 160px;
        margin: 0 10px;
    }
}

.shop-card {
    border: 1px solid #eee;
    border-radius: 10px;
    overflow: hidden;
    transition: transform 0.3s;
    height: 100%;
    background: #fff;
}

.shop-card:hover {
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
    transform: translateY(-5px);
}

.shop-img {
    height: 200px;
    object-fit: cover;
    width: 100%;
}

.shop-body {
    padding: 20px;
}

.shop-title {
    font-weight: bold;
    font-size: 1.1rem;
    margin-bottom: 10px; line-height: 26px;
}

.shop-desc {
    font-size: 0.85rem;
    color: var(--text-gray);
    margin-bottom: 20px;
    min-height: 60px;
}

.btn-detail {
    background-color:#d60036;;
    color: white;
    border-radius: 20px;
    padding: 5px 20px;
    font-size: 0.9rem;
    text-decoration: none;
    display: inline-block;
}

.btn-detail:hover {
    background-color: #d60036;
    color: white;
}


/* 防重疊間距 (Mobile) */
@media (max-width: 768px) {
    .red-arc-img { width: 50vw; }
    .container-spacer-top { padding-top: 120px; padding-bottom: 50px; }
    .container-spacer-bottom { padding-top: 50px; padding-bottom: 120px; }
}


/* =========================================
   3. Hero Section (商家聯絡)
   ========================================= */
#contact-hero {
    background-image: url('../images/hero-bg.png'); 
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    width: 100%;
}

#contact-hero::before {
    content: '';
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.5); z-index: 1;
}

.hero-content { position: relative; z-index: 2; }

@media (min-width: 769px) {
    #contact-hero { height: 100vh; min-height: 600px; }
}
@media (max-width: 768px) {
    #contact-hero { height: auto; aspect-ratio: 3 / 4; }
    .display-4 { font-size: 2.5rem; }
    .display-3 { font-size: 2rem; }
}

/* Social Icons */
.social-link {
    display: flex; justify-content: center; align-items: center;
    width: 50px; height: 50px; border-radius: 50%;
    color: white; font-size: 1.5rem; text-decoration: none;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.map-icon { background-color: #ea4335; }
.line-icon { background-color: #00c300; }
.ig-icon { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%); }
.fb-icon { background-color: #1877f2; }
.social-link:hover { transform: translateY(-10px); box-shadow: 0 10px 20px rgba(0,0,0,0.3); color: white; }

/* =========================================
   4. Nav & Others
   ========================================= */

.nav-link:hover { color: #dc3545 !important; }
.letter-spacing-2 { letter-spacing: 2px; }

/* 服務特色 Parallax */
.bg-parallax {
    background-image: url('../images/features-bg.png');
    background-attachment: fixed;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
.bg-overlay {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.75); z-index: 1;
}
.shop-icon{ width:115px;}
.feature-card:hover { transform: translateY(-5px); transition: 0.3s; }

/* =========================================
   Feature Card 設定
   ========================================= */
.feature-card {
    /* 增加圓弧邊 */
    border-radius: 30px; 
    /* 確保內容不會超出圓角 */
    overflow: hidden; 
    /* 設定動態轉場效果 */
    transition: transform 0.3s ease; 
}

.feature-card:hover { 
    /* 滑鼠移過去只需上浮，圓角保持一致 */
    transform: translateY(-5px); 
}

/* =========================================
   Nav Link 字體大小響應式設定
   ========================================= */

/* 1. 手機版預設 (Mobile) */
.nav-link { 
    font-size: 14px; /* 手機版建議 14px 或 15px，避免四個按鈕橫排時超出螢幕 */
    transition: all 0.3s ease; /* 增加滑鼠移入時的平滑效果 */
}

/* 2. 電腦版設定 (PC - 螢幕寬度大於 768px) */
@media (min-width: 768px) {
    .nav-link { 
        font-size: 18px; /* 電腦版建議 18px - 20px，視覺上更舒適大方 */
    }
}