/* ==========================================================================
   1. 全域變數定義區 (對應 LOGO 的商務科技配色方案)
   ========================================================================== */
:root {
    --logo-red: #cc1111;         /* 呼應 LOGO「崴拓」紅 - 重點強調色 */
    --logo-dark: #1a1a1a;        /* 呼應 LOGO 大樓黑 - 導覽列文字與主要字體色 */
    --logo-gray: #555555;        /* 呼應 LOGO 大樓灰 - 副標題與說明文字 */
    --bg-light: #f8f9fa;         /* 科技冷灰色底 - 能完美消化 LOGO 的白底倒影 */
    --card-bg: #ffffff;          /* 純白底色 - 保持商務簡潔與極高易讀性 */
}

/* ==========================================================================
   2. 基礎重設與文字設定
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "微軟正黑體", sans-serif;
}

body {
    background-color: var(--bg-light);
    color: var(--logo-dark);
    line-height: 1.7;
    padding-top: 90px; /* 為頂部固定導覽列預留空間 */
}

a {
    text-shadow: none;
    color: inherit;
    text-decoration: none;
}

/* 【修正】：確保全站圖片具備基礎響應式能力，防止在筆電版爆版 */
img {
    max-width: 100%;
    height: auto;
    display: block;
}

/* ==========================================================================
   3. 全站通用排版框線系統 (Layout Container)
   ========================================================================== */
.container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ==========================================================================
   4. 頂部固定式導覽列 RWD 頂級設定 (Main Header & Navigation)
   ========================================================================== */
.main-header {
    background-color: rgba(255, 255, 255, 0.96);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 90px;
    z-index: 1000;
    backdrop-filter: blur(5px);
}

.header-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

.logo img {
    height: 60px; /* LOGO 大小黃金比例 */
    width: auto;
    display: block;
}

/* 桌機與筆電橫向選單 */
.nav-menu ul {
    list-style: none;
    display: flex;
    gap: 35px; /* 項目間距增加，落落大方 */
}

/* 【修正】：針對小螢幕筆電優化選單間距，防止換行擠壓 */
@media (max-width: 1100px) {
    .nav-menu ul {
        gap: 20px;
    }
}

.nav-menu a {
    font-size: 16px;
    font-weight: 500;
    color: var(--logo-dark);
    padding: 10px 0;
    position: relative;
    transition: color 0.25s ease;
}

/* 科技紅滑動下底線動畫 */
.nav-menu a::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 3px;
    background-color: var(--logo-red);
    transition: width 0.25s ease;
}

.nav-menu a:hover,
.nav-menu a.active {
    color: var(--logo-red);
}

.nav-menu a:hover::after,
.nav-menu a.active::after {
    width: 100%;
}

/* 手機與平板漢堡按鈕 (預設隱藏) */
.menu-toggle {
    display: none;
    background: none;
    border: none;
    cursor: pointer;
    flex-direction: column;
    gap: 6px;
    padding: 10px;
}

.menu-toggle span {
    display: block;
    width: 26px;
    height: 3px;
    background-color: var(--logo-dark);
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* ==========================================================================
   5. 頁面標題與引言排版 (Page Title & Intro)
   ========================================================================== */
.content-wrapper {
    padding: 40px 0 60px 0;
}

.page-title {
    font-size: 32px;
    font-weight: 700;
    text-align: center;
    color: var(--logo-dark);
    margin-bottom: 15px;
    position: relative;
    letter-spacing: 2px;
}

/* 標題下方科技裝飾紅點 */
.page-title::after {
    content: '';
    display: block;
    width: 40px;
    height: 4px;
    background-color: var(--logo-red);
    margin: 12px auto 0 auto;
    border-radius: 2px;
}

.product-intro {
    text-align: center;
    margin-bottom: 25px;
    color: var(--logo-gray);
}

.product-intro p {
    font-size: 1.1rem;
    line-height: 1.8;
    max-width: 800px;
    margin: 0 auto;
    text-align: justify;
    text-align-last: left;
}

/* ==========================================================================
   5.1 各分頁主要內容區塊網格系統（如：首頁、關於我們、聯絡我們）
   ========================================================================== */
/* 【修正】：將原本混亂的直向堆疊統一使用穩定的 Grid 進行兩欄並排，並規範筆電與桌機 */
.intro-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;  /* 把原本的 40px 改成 20px（數值越小，間距越窄） */
    align-items: center;
    margin-top: 30px;
}


.intro-image img {
    width: 70%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.05);
}


/* 【修正】：新增首頁 Banner 及內頁網格基礎樣式 */
.hero-banner {
    background: linear-gradient(135deg, #2d3748 0%, #1a202c 100%);
    color: #ffffff;
    padding: 40px 40px;  /* 深灰色橫幅「變矮」，將前面的 80px 改小 */
    border-radius: 8px;
    margin-bottom: 40px;
    text-align: center;
}
.hero-content h1 { font-size: 2.2rem; margin-bottom: 15px; }

.services-grid, .contact-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    margin-bottom: 50px;
}
.contact-grid { grid-template-columns: 1fr 1fr; }

.service-card, .info-box {
    background: var(--card-bg);
    border: 1px solid #edf2f7;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    padding: 25px;
}
.service-card .card-image img { width: 100%; height: 200px; object-fit: cover; border-radius: 4px; }
.service-card h3 { margin: 15px 0 10px 0; }
.sub-links { list-style: none; padding-left: 0; }
.sub-links li { margin: 8px 0; }
.sub-links a { color: var(--logo-red); font-weight: 500; }
.sub-links a:hover { text-decoration: underline; }

/* ==========================================================================
   6. 4大特點網格排版樣式
   ========================================================================== */
.features-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    max-width: 1200px;
    margin: 0 auto 50px auto;
    padding: 0 10px;
}

.feature-item {
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    padding: 20px 15px;
    text-align: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.feature-item:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 15px rgba(0,0,0,0.06);
    border-color: #cbd5e0;
}

.feature-title {
    font-size: 1.15rem;
    color: #2d3748;
    margin: 0 0 10px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid #edf2f7;
}

.feature-content {
    font-size: 0.9rem;
    color: #555555;
    line-height: 1.6;
    margin: 0;
    text-align: justify;
}

/* ==========================================================================
   7. 核心：環狀/星體軌道排版架構 (同心圓雙環設計)
   ========================================================================== */
.ring-wrapper {
    position: relative;
    width: 100%;
    max-width: 900px;
    height: 900px;
    margin: 0 auto 60px auto;
    background: #fafafa;
    border-radius: 50%;
    box-shadow: inset 0 0 50px rgba(0,0,0,0.02);
    display: block;
}

/* 【修正】：針對桌機與中高階筆電介面 (1024px ~ 1200px) 的等比例縮放防護 */
@media (max-width: 1200px) and (min-width: 1025px) {
    .ring-wrapper {
        transform: scale(0.9);
        margin-top: -30px;
        margin-bottom: 30px;
    }
}

.center-core {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 140px;
    height: 140px;
    margin-top: -70px;
    margin-left: -70px;
    background: #2d3748;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
    border: 4px solid #ffffff;
    text-align: center;
}

.center-core h3 {
    margin: 0;
    font-size: 1.2rem;
    letter-spacing: 1px;
}

.center-core p {
    margin: 4px 0 0 0;
    font-size: 0.7rem;
    color: #cbd5e0;
}

.track-inner-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 400px;
    margin-top: -200px;
    margin-left: -200px;
    border: 3px dashed #a0aec0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.75;
}

.track-outer-line {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 720px;
    height: 720px;
    margin-top: -360px;
    margin-left: -360px;
    border: 3px dashed #cbd5e0;
    border-radius: 50%;
    pointer-events: none;
    z-index: 1;
    opacity: 0.85;
}

.ring-item {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 180px;
    height: 145px;
    margin-top: -72.5px;
    margin-left: -90px;
    background: #ffffff;
    border-radius: 8px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.06);
    overflow: hidden;
    cursor: pointer;
    z-index: 5;
    border: 1px solid #edf2f7;
    transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1), box-shadow 0.3s ease;
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform-style: preserve-3d;
}

.img-box {
    width: 100%;
    height: 95px;
    background: #e2e8f0;
    position: relative;
    overflow: hidden;
}

.img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.text-box {
    padding: 6px 10px;
    background: #ffffff;
    text-align: center;
}

.text-box h4 {
    margin: 0;
    font-size: 0.85rem;
    color: #2d3748;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.text-box p {
    margin: 2px 0 0 0;
    font-size: 0.7rem;
    color: #718096;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 雙環靜態節點定位 */
.node-1 { transform: rotate(0deg) translateY(-200px) rotate(0deg); }
.node-2 { transform: rotate(120deg) translateY(-200px) rotate(-120deg); }
.node-3 { transform: rotate(240deg) translateY(-200px) rotate(240deg); }
.node-4 { transform: rotate(30deg) translateY(-360px) rotate(-30deg); }
.node-5 { transform: rotate(90deg) translateY(-360px) rotate(-90deg); }
.node-6 { transform: rotate(150deg) translateY(-360px) rotate(-150deg); }
.node-7 { transform: rotate(210deg) translateY(-360px) rotate(-210deg); }
.node-8 { transform: rotate(270deg) translateY(-360px) rotate(-270deg); }
.node-9 { transform: rotate(330deg) translateY(-360px) rotate(-330deg); }

/* Hover 放大定位控制 */
.node-1:hover { transform: rotate(0deg) translateY(-200px) rotate(0deg) scale(1.1) !important; z-index: 20; box-shadow: 0 12px 30px rgba(0,0,0,0.18); }
.node-2:hover { transform: rotate(120deg) translateY(-200px) rotate(-120deg) scale(1.1) !important; z-index: 20; box-shadow: 0 12px 30px rgba(0,0,0,0.18); }
.node-3:hover { transform: rotate(240deg) translateY(-200px) rotate(240deg) scale(1.1) !important; z-index: 20; box-shadow: 0 12px 30px rgba(0,0,0,0.18); }
.node-4:hover { transform: rotate(30deg) translateY(-360px) rotate(-30deg) scale(1.1) !important; z-index: 20; box-shadow: 0 12px 30px rgba(0,0,0,0.18); }
.node-5:hover { transform: rotate(90deg) translateY(-360px) rotate(-90deg) scale(1.1) !important; z-index: 20; box-shadow: 0 12px 30px rgba(0,0,0,0.18); }
.node-6:hover { transform: rotate(150deg) translateY(-360px) rotate(-150deg) scale(1.1) !important; z-index: 20; box-shadow: 0 12px 30px rgba(0,0,0,0.18); }
.node-7:hover { transform: rotate(210deg) translateY(-360px) rotate(-210deg) scale(1.1) !important; z-index: 20; box-shadow: 0 12px 30px rgba(0,0,0,0.18); }
.node-8:hover { transform: rotate(270deg) translateY(-360px) rotate(-270deg) scale(1.1) !important; z-index: 20; box-shadow: 0 12px 30px rgba(0,0,0,0.18); }
.node-9:hover { transform: rotate(330deg) translateY(-360px) rotate(-330deg) scale(1.1) !important; z-index: 20; box-shadow: 0 12px 30px rgba(0,0,0,0.18); }

.node-2 .img-box { height: 65% !important; }
.node-2 .img-box img { transform: none !important; object-fit: cover; width: 100%; height: 100%; }

/* ==========================================================================
   8. 商業聯絡導引區塊 (Contact Prompt)
   ========================================================================== */
.contact-prompt {
    background-color: var(--card-bg);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    clear: both;
}

.contact-prompt .highlight {
    font-size: 18px;
    font-weight: 600;
    color: var(--logo-dark);
    margin-bottom: 20px;
}

.btn-contact {
    display: inline-block;
    background-color: var(--logo-red);
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
    padding: 12px 40px;
    border-radius: 4px;
    box-shadow: 0 4px 12px rgba(204, 17, 17, 0.25);
    transition: all 0.25s ease;
}

.btn-contact:hover {
    background-color: #aa0e0e;
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(204, 17, 17, 0.35);
}

/* ==========================================================================
   9. 全站網頁頁尾區樣式 (Main Footer)
   ========================================================================== */
.main-footer {
    background-color: #1a1a1a;
    color: #888888;
    text-align: center;
    padding: 25px 20px;
    font-size: 14px;
    border-top: 3px solid var(--logo-red);
}

/* ==========================================================================
   10. 點擊放大燈箱特效樣式 (Lightbox / Image Modal)
   ========================================================================== */
.image-modal {
    display: none; 
    position: fixed;
    z-index: 9999; 
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.88); 
    justify-content: center;
    align-items: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.image-modal.active { display: flex; opacity: 1; }
.modal-content { max-width: 85%; max-height: 80%; border-radius: 4px; box-shadow: 0 4px 25px rgba(0,0,0,0.5); transform: scale(0.9); transition: transform 0.3s ease; }
.image-modal.active .modal-content { transform: scale(1); }
.modal-close { position: absolute; top: 20px; right: 30px; color: #fff; font-size: 40px; font-weight: bold; cursor: pointer; transition: color 0.2s; }
.modal-close:hover { color: #cbd5e0; }
.modal-caption { position: absolute; bottom: 30px; color: #fff; font-size: 1.15rem; text-align: center; background: rgba(0,0,0,0.75); padding: 10px 25px; border-radius: 20px; max-width: 80%; line-height: 1.4; border: 1px solid #4a5568; }

/* ==========================================================================
   11. 智慧行動裝置響應式 RWD 斷點設定
   ========================================================================== */

/* 【修正】：將原本危險的 850px 斷點調升至 1024px，全方面保護筆電、iPad 橫屏不跑位 */
@media (max-width: 1024px) {
    .main-header { height: 80px; }
    body { padding-top: 80px; }
    
    .menu-toggle { display: flex; }
    
    .nav-menu {
        position: absolute;
        top: 80px;
        left: 0;
        width: 100%;
        background-color: #ffffff;
        box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.35s ease-in-out;
    }
    
    /* 修正手機版導覽列展開樣式：確保高度自動調配避免文字溢出 */
    .nav-menu.open { max-height: 400px; }
    
    .nav-menu ul {
        flex-direction: column;
        gap: 0;
        padding: 10px 0;
    }
    
    .nav-menu a {
        display: block;
        padding: 15px 25px;
        border-bottom: 1px solid #f1f1f1;
    }
    
    .nav-menu a::after { display: none; }

    /* 【修正】：各分頁內容改為兩欄或單欄，防止直式崩壞 */
    .intro-section, .contact-grid {
        grid-template-columns: 1fr;
        gap: 15px;  /* 💡 把原本的 25px 改成 15px，手機版的上下間距就會變窄 */
    }
    .services-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .features-grid {
        grid-template-columns: repeat(2, 1fr);
        margin-bottom: 40px;
    }

    /* 環狀排版降級為平舖 Grid */
    .ring-wrapper {
        height: auto;
        background: transparent;
        border-radius: 0;
        box-shadow: none;
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .center-core, .track-inner-line, .track-outer-line {
        display: none !important;
    }

    .ring-item {
        position: relative;
        top: 0 !important; left: 0 !important;
        width: 100% !important; height: auto !important;
        margin: 0 !important;
        transform: none !important;
    }

    .img-box, .node-2 .img-box {
        height: 140px !important;
    }

    .ring-item:hover {
        transform: translateY(-5px) !important;
    }
}

/* 針對小螢幕平板或大螢幕手機 (768px 以下) */
@media (max-width: 768px) {
    .services-grid {
        grid-template-columns: 1fr;
    }
}

/* 針對手機極窄螢幕 (480px 以下) */
@media (max-width: 480px) {
    .features-grid { grid-template-columns: 1fr; }
    .ring-wrapper { grid-template-columns: repeat(1, 1fr); }
    .hero-content h1 { font-size: 1.6rem; }
    .page-title { font-size: 26px; }
}

/* ==========================================================================
   12. 聯絡我們頁面 - LINE 專屬樣式
   ========================================================================== */
.contact-details { margin-top: 20px; }
.line-contact-box { text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.line-subtitle { font-size: 14px; color: var(--logo-gray); margin-bottom: 20px; }
.qrcode-wrapper { width: 180px; height: 180px; background-color: #ffffff; padding: 10px; border-radius: 8px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.05); margin-bottom: 15px; }
.qrcode-wrapper img { width: 100%; height: 100%; object-fit: contain; }
.qrcode-tip { font-size: 13px; color: #888888; margin-bottom: 25px; }
.btn-line { background-color: #06C755; color: white; padding: 10px 20px; border-radius: 4px; display: inline-flex; align-items: center; gap: 8px; font-weight: bold; }
.btn-line:hover { background-color: #05b04b; }