body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #f0f2f5;
    color: #1c1e21;
    margin: 0;
    padding: 5px;
}

/* --- [MODIFIED] New Header Wrapper --- */
.site-header-main {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
    box-sizing: border-box;

    /* Sticky behavior for the entire bar */
    position: sticky;
    top: 0;
    z-index: 2000;
    background-color: var(--background-color, #f0f2f5);
    border-bottom: 2px solid #ccd0d5;
    transition: transform 0.1s ease-in-out;
    width: 100%;
}

/* --- [MODIFIED] Adjusted App Navigation --- */
.app-nav {
    display: flex;
    justify-content: center; /* This will center the .nav-links within its available space */
    flex-grow: 1; /* Allows the nav to take up the remaining space */
    /* REMOVED flex-wrap from here to prevent unwanted wrapping on desktop */
    /* Removed properties now handled by the parent .site-header-main */
    /* position, top, z-index, background-color, border-bottom, width, margin-bottom */
}

.main-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 25px; /* Added padding to create space below the sticky header */
}

.tab-button {
    padding: 12px 25px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: #606770;
    position: relative;
    transition: color 0.3s;
}

.tab-button::after {
    content: '';
    position: absolute;
    bottom: -2px;
    left: 0;
    width: 100%;
    height: 2px;
    background-color: #1877f2;
    transform: scaleX(0);
    transition: transform 0.1s ease;
}

.tab-button:hover {
    color: #1877f2;
}

/* 導覽列的 <a> 版分頁連結：外觀與 <button> 版一致 */
a.tab-button {
    display: inline-block;
    text-decoration: none;
    box-sizing: border-box;
}

.tab-button.active {
    color: #1877f2;
}

.tab-button.active::after {
    transform: scaleX(1);
}

/* 編號篩選器頁首的「搭配搜尋指令」提示 */
#id-selector-app .combo-tip {
    margin: 6px auto 0;
    max-width: 640px;
    font-size: 14px;
    color: #4a5568;
    background: #ebf8ff;
    border-radius: 8px;
    padding: 8px 12px;
}
#id-selector-app .combo-tip-link {
    /* 共用 .tab-button 的分頁切換邏輯，但外觀還原成一般文字連結 */
    display: inline;
    padding: 0;
    font-size: inherit;
    font-weight: 700;
    color: #1877f2;
    text-decoration: underline;
    background: none;
    border: none;
    position: static;
}
#id-selector-app .combo-tip-link::after { display: none; }
#id-selector-app .combo-tip code {
    background: #fff;
    padding: 1px 6px;
    border-radius: 4px;
    border: 1px solid #cbd5e0;
}

/* --- App 內容區 --- */
.app-content {
    display: none; /* 預設隱藏 */
}

.app-content.active {
    display: block; /* 顯示當前啟用的 App */
}

#docs-app .home-container {
    max-width: 1120px;
    margin: 20px auto;
    padding: 24px;
    background: linear-gradient(180deg, #ffffff 0%, #f8fbff 100%);
    border-radius: 20px;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.08);
}

#docs-app .home-intro {
    margin-bottom: 24px;
    padding: 4px 4px 0;
}

#docs-app .home-intro h1 {
    margin: 0 0 8px;
    color: #111827;
    border: none;
    padding: 0;
    font-size: clamp(1.6rem, 3vw, 2.4rem);
    line-height: 1.15;
}

#docs-app .home-intro p {
    margin: 0;
    color: #4b5563;
    line-height: 1.7;
    max-width: 60ch;
}

#docs-app .home-hero {
    display: grid;
    grid-template-columns: 1fr;
    gap: 20px;
    align-items: stretch;
    margin-bottom: 28px;
}

#docs-app .home-hero-copy,
#docs-app .home-hero-panel,
#docs-app .home-section,
#docs-app details {
    border: 1px solid #e5e7eb;
    border-radius: 18px;
    background: #fff;
}

#docs-app .home-hero-copy {
    padding: 28px;
    background: radial-gradient(circle at top left, rgba(24, 119, 242, 0.12), transparent 45%), #fff;
}

#docs-app .home-eyebrow {
    margin: 0 0 10px;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #1877f2;
}

#docs-app .home-hero h1,
#docs-app .home-section h2 {
    margin: 0;
    color: #111827;
    border: none;
    padding: 0;
}

#docs-app .home-hero h1 {
    font-size: clamp(2rem, 4vw, 3.4rem);
    line-height: 1.05;
    margin-bottom: 14px;
}

#docs-app .home-lead,
#docs-app .home-section-header p,
#docs-app .home-docs-copy {
    color: #4b5563;
    line-height: 1.75;
}

#docs-app .home-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 22px;
}

#docs-app .home-primary-action,
#docs-app .home-secondary-action,
#docs-app .home-card {
    appearance: none;
    border: none;
    cursor: pointer;
}

#docs-app .home-primary-action,
#docs-app .home-secondary-action {
    padding: 14px 20px;
    border-radius: 999px;
    font-size: 1rem;
}

#docs-app .home-primary-action {
    background: linear-gradient(135deg, #1877f2, #0f5cc0);
    color: #fff;
}

#docs-app .home-secondary-action {
    background: #e8f1ff;
    color: #0f5cc0;
}

#docs-app .home-hero-panel {
    display: grid;
    gap: 12px;
    padding: 18px;
    background: linear-gradient(180deg, #0f172a, #1e293b);
    color: #fff;
}

#docs-app .home-stat {
    padding: 18px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

#docs-app .home-stat span {
    display: block;
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: 4px;
}

#docs-app .home-stat p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
}

#docs-app .home-section {
    padding: 22px;
    margin-bottom: 18px;
}

#docs-app .home-section-header {
    margin-bottom: 18px;
}

#docs-app .home-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 14px;
}

#docs-app .home-card {
    min-height: 170px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
    padding: 18px;
    border-radius: 18px;
    background: linear-gradient(180deg, #ffffff, #f8fafc);
    border: 1px solid #e5e7eb;
    text-align: left;
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

#docs-app .home-card::after {
    display: none;
}

#docs-app .home-card.active {
    color: inherit;
}

#docs-app .home-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 14px 28px rgba(15, 23, 42, 0.10);
    border-color: #b9d4ff;
}

#docs-app .home-card-icon {
    width: 44px;
    height: 44px;
    border-radius: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 22px;   /* emoji 圖示在 44px 框內的適當大小 */
    background: #e8f1ff;
    color: #0f5cc0;
}

#docs-app .home-card-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: #111827;
}

#docs-app .home-card-text {
    color: #4b5563;
    line-height: 1.6;
}

#docs-app .home-details details {
    padding: 18px 20px;
}

#docs-app .home-details summary {
    cursor: pointer;
    font-weight: 700;
    color: #111827;
}

#docs-app .home-docs-copy {
    margin-top: 14px;
}

#docs-app .home-docs-copy ul {
    margin: 0;
    padding-left: 20px;
}

@media (max-width: 1024px) {
    #docs-app .home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #docs-app .home-hero {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 640px) {
    #docs-app .home-container {
        padding: 14px;
        border-radius: 16px;
    }

    #docs-app .home-hero-copy,
    #docs-app .home-hero-panel,
    #docs-app .home-section {
        padding: 18px;
    }

    /* 手機：卡片精簡成兩欄、只留圖示＋名稱，一屏掃完全部功能 */
    #docs-app .home-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 10px;
    }

    #docs-app .home-card {
        min-height: 0;
        padding: 12px;
        gap: 6px;
    }

    #docs-app .home-card-icon {
        width: 34px;
        height: 34px;
        border-radius: 10px;
        font-size: 18px;
    }

    #docs-app .home-card-title {
        font-size: 0.95rem;
    }

    #docs-app .home-card-text {
        display: none;
    }
}

/* --- 響應式調整 (Responsive Adjustments) --- */
#research-app .reward-preview {
    flex-wrap: wrap;
    gap: 4px 0; /* 垂直間隔4px，水平間隔由既有樣式控制 */
    justify-content: flex-end; /* 讓圖示靠右對齊 */
}
@media (max-width: 768px) {
    #research-app #research-container {
        flex-direction: column;
    }
}
.app-nav--hidden {
    transform: translateY(-100%);
}

.hamburger-button {
    display: none;
}
    .nav-group .group-title {
    width: 100%;
    text-align: center;
    padding: 15px;
    font-size: 18px;
    font-weight: bold;
    border: none;
    background-color: #f0f2f5; /* 給標題一個淺灰色底 */
    cursor: pointer;
    color: #333; /* 標題文字顏色 */
    position: relative;
    border-bottom: 1px solid var(--border-color, #eee);
    border-top: 1px solid var(--border-color, #eee);
    margin-top: -1px; /* 避免雙重邊框 */
}

/* 用 ::after 偽元素製作一個箭頭圖示 */
.nav-group .group-title::after {
    content: '▼';
    position: absolute;
    right: 25px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 12px;
    color: #888;
}

/* 當群組展開時，讓箭頭旋轉 */
.nav-group.is-expanded .group-title::after {
    transform: translateY(-50%) rotate(180deg);
}

/* 子選單容器的初始狀態 (隱藏) */
.nav-group .sub-links {
    max-height: 0;
    overflow: hidden;
    /* 子選單內的項目不需要額外背景色，因為 tab-button 已有 */
}

/* 子選單內的按鈕樣式微調 */
.nav-group .sub-links .tab-button {
    font-size: 16px;
    font-weight: normal;
    color: #606770;
    background-color: #fff; /* 確保子項目是白色底 */
}

/* 當群組被加上 .is-expanded 時，展開子選單 */
.nav-group.is-expanded .sub-links {
    max-height: 600px; /* 設定一個足夠大的高度讓所有子項目顯示 */
}

/* --- [START] DESKTOP NAVIGATION FIX --- */
@media (min-width: 769px) {
    /* The main container for nav items */
    .nav-links {
        display: flex;
        align-items: center;
    }

    /* Convert nav groups into dropdown containers */
    .nav-group {
        position: relative;
    }

    /* Restyle group titles to look like regular nav buttons */
    .nav-group .group-title {
        width: auto;
        border: none;
        background-color: transparent;
        margin: 0;
        padding: 12px 25px;
        font-size: 18px;
        font-weight: bold;
        color: #606770;
        transition: color 0.3s;
    }

    /* Add a subtle dropdown arrow */
    .nav-group .group-title::after {
        content: ' ▼';
        font-size: 0.6em;
        vertical-align: middle;
        position: static;
        transform: none;
        color: inherit;
    }
    
    .nav-group .group-title:hover {
        color: #1877f2;
    }

    /* Style the dropdown menu itself
       用 visibility/opacity 切換（而非 display）：滑出後有 0.25s 寬限才真正關閉，
       斜向移入子選單時就算短暫滑出範圍也不會中途消失 */
    .nav-group .sub-links {
        visibility: hidden;
        opacity: 0;
        transition: opacity 0.15s ease, visibility 0s linear 0.25s;
        position: absolute;
        top: 100%;
        left: 50%;
        transform: translateX(-50%);
        background-color: white;
        border-radius: 8px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.15);
        min-width: 220px;
        padding: 8px 0;
        z-index: 2001;
        border: 1px solid #ddd;
        max-height: none; /* Override mobile style */
        overflow: visible; /* Override mobile style */
    }

    /* Show dropdown on hover */
    .nav-group:hover .sub-links,
    .nav-group:focus-within .sub-links {
        visibility: visible;
        opacity: 1;
        transition-delay: 0s;
    }

    /* 點選項目後暫時抑制選單（避免切完分頁選單還掛著），滑鼠離開後解除，見 main.js */
    .nav-group.menu-suppressed .sub-links {
        visibility: hidden !important;
        opacity: 0 !important;
    }

    /* Style individual items within the dropdown */
    .nav-group .sub-links .tab-button {
        width: 100%;
        box-sizing: border-box;
        text-align: left;
        padding: 10px 20px;
        border-bottom: none;
        font-size: 16px;
    }

    .nav-group .sub-links .tab-button:hover {
        background-color: #f0f2f5;
        color: #1877f2;
    }
    
    /* Hide the mobile hamburger on desktop */
    .hamburger-button {
        display: none;
    }
}
/* --- [END] DESKTOP NAVIGATION FIX --- */


/* --- [MODIFIED] Mobile Layout Adjustments --- */
@media (max-width: 768px) {
    .site-header-main {
        min-height: 50px;
        padding: 0; /* Remove padding to allow full-width elements */
    }

    .app-nav {
        justify-content: flex-end; /* Ensure hamburger is on the right */
        flex-grow: 0; /* Don't let it grow */
    }

    #auth-container {
       position: absolute; /* Position relative to .site-header-main */
       top: 50%;
       left: 15px;
       z-index: 15; /* Make sure it's above the nav links but below the hamburger */
    }

    .hamburger-button {
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        width: 30px;
        height: 30px;
        background: transparent;
        border: none;
        cursor: pointer;
        padding: 0;
        z-index: 20;
        margin-right: 15px;
    }

    .hamburger-button span {
        width: 30px;
        height: 3px;
        background: var(--text-primary, #333);
        border-radius: 5px;
        transition: all 0.1s linear;
        position: relative;
        transform-origin: 1px;
    }

    .hamburger-button.is-active span:nth-child(1) { transform: rotate(45deg); }
    .hamburger-button.is-active span:nth-child(2) { opacity: 0; transform: translateX(20px); }
    .hamburger-button.is-active span:nth-child(3) { transform: rotate(-45deg); }

    .nav-links {
        display: flex;
        flex-direction: column;
        align-items: center;
        background: var(--card-background, white);
        box-shadow: 0 8px 16px rgba(0,0,0,0.1);
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        max-height: 0;
        overflow: hidden;
        transition: max-height 0.1s ease-in-out;
    }
    
    .nav-links.is-open { 
        /* 將固定的 500px 改為動態計算的高度 */
        /* 100vh 是指螢幕總高度，減去 50px 是為了不遮擋頂部導覽列 */
        max-height: calc(100vh - 50px); 

        /* 當內容超出時，顯示垂直捲軸 */
        overflow-y: auto; 
    }

    .nav-links .tab-button {
        width: 100%;
        text-align: center;
        padding: 10px;
        border-bottom: 1px solid var(--border-color, #eee);
    }
    
    .nav-links .tab-button::after { display: none; }
    
    .nav-links .tab-button.active {
        background-color: var(--primary-color, #0075BE);
        color: white;
    }

}

#loading-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #1a1a1a;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: opacity 0.8s ease, visibility 0.8s ease;
    opacity: 1;
    visibility: visible;
    perspective: 800px; 
}

#loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

.pokeball-loader {
    position: relative;
    width: 150px;
    height: 150px;
    transform-style: preserve-3d; 
    animation: shake-and-pulse 1.5s ease-in-out forwards;
}

.pokeball-top, .pokeball-bottom {
    position: absolute;
    left: 0;
    width: 100%;
    height: 50%;
    border: 8px solid #222;
    box-sizing: border-box;
    z-index: 1;
    transition: transform 1s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}

.pokeball-top {
    top: 0;
    background: radial-gradient(circle at 50% 30%, #ff5c5c, #f00 70%);
    border-bottom: none;
    border-top-left-radius: 75px;
    border-top-right-radius: 75px;
    transform-origin: bottom center;
    box-shadow: inset 0 -8px 15px rgba(0,0,0,0.2);
}

.pokeball-bottom {
    bottom: 0;
    background: radial-gradient(circle at 50% 70%, #ffffff, #f0f0f0 80%);
    border-top: none;
    border-bottom-left-radius: 75px;
    border-bottom-right-radius: 75px;
    transform-origin: top center;
    box-shadow: inset 0 8px 15px rgba(0,0,0,0.15);
}

.pokeball-center-outer {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) translateZ(10px);
    width: 60px;
    height: 60px;
    background-color: #222;
    border-radius: 50%;
    z-index: 2;
    transition: transform 0.8s ease;
}

.pokeball-center-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: 4px solid #222;
    border-radius: 50%;
    z-index: 3;
    transition: transform 0.8s ease, box-shadow 0.2s ease;
}

@keyframes button-press-light {
    from { box-shadow: 0 0 15px 5px #fff; }
    to { box-shadow: 0 0 0 0 transparent; }
}

@keyframes shake-and-pulse {
    0%, 100% { transform: rotate(0deg) translateX(0) scale(1); }
    10% { transform: rotate(-5deg) translateX(-10px) scale(1.05); }
    20% { transform: rotate(5deg) translateX(10px) scale(1.05); }
    30% { transform: rotate(-5deg) translateX(-10px) scale(1.05); }
    40% { transform: rotate(5deg) translateX(10px) scale(1.05); }
    50% { transform: rotate(-3deg) translateX(-5px) scale(1.05); }
    60% { transform: rotate(3deg) translateX(5px) scale(1.05); }
    70% { transform: scale(1.05); }
    75% { transform: scale(0.95); }
    80% { transform: scale(1.1); }
    90% { transform: scale(1); }
}

.shaking .pokeball-center-inner {
    animation: button-press-light 0.5s ease-out 0.8s;
}

#loading-overlay.start-animation .pokeball-loader { animation: none; }
#loading-overlay.start-animation .pokeball-top { transform: scale(0); }
#loading-overlay.start-animation .pokeball-bottom { transform: scale(0); }
#loading-overlay.start-animation .pokeball-center-outer,
#loading-overlay.start-animation .pokeball-center-inner {
    transform: translate(-50%, -50%) scale(0);
}

.pokeball-light-flash {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 500px;
    height: 500px;
    background-color: white;
    border-radius: 50%;
    z-index: 0;
    opacity: 0;
}

#loading-overlay.start-animation .pokeball-light-flash {
    animation: flash-and-fade 0.8s ease-out 0.2s forwards;
}

@keyframes flash-and-fade {
    0% { transform: translate(-50%, -50%) scale(0); opacity: 0.8; }
    50% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    100% { transform: translate(-50%, -50%) scale(1.5); opacity: 0; }
}

.site-footer {
    text-align: center;
    margin-top: 40px;
    border-top: 1px solid #e0e0e0;
    background-color: #f8f9fa;
    color: #6c757d;
    font-size: 0.9em;
    width: 100%;
}

.site-footer p {
    margin: 0.5em 0;
}

/* --- [MODIFIED] Auth Container --- */
#auth-container {
    position: static; /* Removed fixed positioning for desktop */
    display: flex;
    align-items: center;
    gap: 15px;
    /* z-index is no longer needed here as it's in the flow */
}

.user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    vertical-align: middle;
    border: 2px solid #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
    cursor: pointer;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.user-avatar:hover {
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    transform: scale(1.05);
}

#user-info {
    position: relative; 
    line-height: 1;
}

.user-menu-dropdown {
    display: none;
    position: absolute;
    top: 120%;
    left: 0;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    min-width: 140px;
    z-index: 2002;
    overflow: hidden;
    border: 1px solid #ddd;
    padding: 5px 0;
}

.user-menu-dropdown a {
    display: block;
    padding: 10px 20px;
    color: #333;
    text-decoration: none;
    font-size: 15px;
    transition: background-color 0.1s ease;
}

.user-menu-dropdown a:hover {
    background-color: #f0f2f5;
    color: #1877f2;
}

.user-menu-dropdown.show { display: block; }

#auth-button {
    padding: 8px 16px;
    font-size: 14px;
    font-weight: bold;
    border: none;
    background-color: #1877f2;
    color: white;
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

#auth-button:hover {
    background-color: var(--primary-color, #0075BE);
    color: white;
}

/* 登入說明「?」按鈕 */
.auth-help {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    margin-left: -6px;
    border-radius: 50%;
    background-color: #e4e6eb;
    color: #555;
    font-size: 14px;
    font-weight: bold;
    cursor: help;
    user-select: none;
    outline: none;
}
.auth-help:hover,
.auth-help:focus { background-color: #d0d3d9; }

/* 說明浮動框：因為位在右上角，往下、往左展開避免超出畫面 */
.auth-help-tip {
    display: none;
    position: absolute;
    top: 140%;
    left: 0;
    width: 280px;
    max-width: 78vw;
    background: #fff;
    color: #333;
    text-align: left;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.18);
    padding: 14px 16px;
    font-size: 13px;
    line-height: 1.6;
    font-weight: normal;
    z-index: 3000;
    cursor: default;
}
.auth-help:hover .auth-help-tip,
.auth-help:focus .auth-help-tip,
.auth-help:focus-within .auth-help-tip { display: block; }

.auth-help-tip b { color: #1877f2; }
.auth-help-tip p { margin: 8px 0 0; }
.auth-help-tip ul { margin: 8px 0 0; padding-left: 20px; }
.auth-help-tip li { margin: 3px 0; }
.auth-help-tip .auth-help-note {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #eee;
    color: #777;
    font-size: 12px;
}
/* ===== 合併式「功能選單」大選單 ===== */
/* 桌面：下拉展開成兩欄，各有分類標題 */
@media (min-width: 769px) {
    .nav-group .sub-links.mega-menu {
        display: flex;
        gap: 8px;
        /* 往左側展開：右緣對齊按鈕右緣，避免平板上 480px 寬超出視窗右緣被裁掉 */
        left: auto;
        right: 0;
        transform: none;
        min-width: 480px;
        max-width: calc(100vw - 24px);
        padding: 14px 8px;
    }
    .mega-col { flex: 1; min-width: 0; }
    .mega-col + .mega-col { border-left: 1px solid #eee; padding-left: 8px; }
    .mega-heading {
        font-size: 12px; font-weight: 800; letter-spacing: .1em;
        color: #98a2b3; padding: 2px 20px 8px;
    }
}

/* 手機：分區堆疊，分類標題當小節標 */
@media (max-width: 768px) {
    .nav-group.is-expanded .sub-links.mega-menu { max-height: 1600px; }
    .mega-heading {
        padding: 12px 15px 6px; font-size: 13px; font-weight: 800;
        color: #98a2b3; letter-spacing: .06em;
        background: #fafbfc; border-top: 1px solid var(--border-color, #eee);
    }
}

/* --- iOS Safari 聚焦輸入框自動放大整頁的修正 ---
   Safari 只要輸入框字級 < 16px，聚焦時就會自動放大整個畫面。
   在手機上把可輸入的表單控件字級提升到 16px 即可避免（不需停用雙指縮放）。
   用 !important 是因為多數輸入框以 #id 選擇器指定較小字級，需要蓋過其優先度。 */
@media (max-width: 768px) {
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
    select,
    textarea {
        font-size: 16px !important;
    }
}