/* 共用基礎樣式 */
.menu-container summary {
    position: fixed; top: 20px; right: 15px; z-index: 1001;
    list-style: none; cursor: pointer;
}
.menu-container summary::-webkit-details-marker { display: none; }        
.menu-container .overlay {
    position: fixed; inset: 0; background: rgba(0,0,0,.3);
    display: none; z-index: 999;
}
.menu-container[open] .overlay { display: block; }
.side-menu {
    position: fixed;top: 0;right: 0;width: 220px;height: 100%;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.2);
    transform: translateX(100%);opacity: 0;
    transition: transform 0.32s cubic-bezier(.25,.8,.25,1), opacity 0.2s ease;will-change: transform;
    display: flex;flex-direction: column;z-index: 1000;pointer-events: none;
    background-color: inherit;
}
.menu-container[open] .side-menu { transform: translateX(0); opacity: 1; pointer-events: auto; }
.menu-scroll {
    flex: 1;overflow-y: auto;padding: 20px;cursor: grab;
    margin-top: 60px;
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;    /* ✅ 不要用 none */
}
.menu-scroll::-webkit-scrollbar {display: none; } 

/* ul style */
ul.menu {list-style: none;padding: 0;margin-top: 60px;}
ul.menu > li {background: transparent;margin-bottom: 10px;border-radius: 6px;cursor: pointer;position: relative;}
ul.sub-menu {list-style: none;padding-left: 15px;margin-top: 8px; display: block;}
ul.menu > li.open > ul.sub-menu {display: block;}
ul.sub-menu li {background: transparent;padding: 8px;margin-bottom: 6px;border-radius: 4px;font-size: 14px;color: #ffffff;border-bottom: 1px solid rgba(255, 255, 255, 0.1);}
ul.sub-menu li a{/*color: #ffffff;*/ text-decoration: none;display: block;font-weight: normal;}

/* switch button */
.switch-wrapper {display: flex;align-items: center;gap: 6px;}
.switch-text{/*color: #ffffff;*/font-weight: normal;} 
.switch-button {width: 72px;height: 29px;display: contents;background: none;border: none;cursor: pointer;}
.switch-button img{padding-left: 5px;}  


.menu-footer {
    padding: 15px 20px;
    background-color: transparent;
    text-align: left;
    list-style: none; /* 新增這行 */
    margin: 0;
    bottom: env(safe-area-inset-bottom, 10px);
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    flex-wrap: nowrap;
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.2); /* 添加分隔線 */
}
.menu-footer li a{
    /*color: #ffffff; */ 
    text-decoration: none;
    display: block;
    font-weight: normal;
}    
.ver{
    /* color: rgba(255, 255, 255, 0.6);  */
    font-weight: normal;
    text-decoration: none;
    display: block;
    right : auto;
}

/* 🟢 綠色主題 (index01 風格) */
.theme-green { 
    background-color: rgba(14, 196, 184, 0.9); 
    color: #033d39; 
}
/* 統一設定綠色主題下所有文字顏色 */
.theme-green .menu-link, 
.theme-green .sub-menu li a,  
.theme-green .switch-text{
    color: #ffffff;
} 

.theme-green .menu-footer li a { 
    color: #ffffff !important; 
}
.theme-green .menu-footer { 
    justify-content: space-between;
    border-top: 1px solid rgba(255, 255, 255, 0.2); 
}
.theme-green .ver { 
    position: unset;
    color: rgba(255, 255, 255, 0.6); 
}

/* ⚪ 白色主題 (index06 風格) */
.theme-white { 
    background-color: rgba(255, 255, 255, 0.9); 
    color: #033d39; 
    /* right: auto; */
}
/* 統一設定白色主題下所有文字顏色 */
.theme-white .menu-link, 
.theme-white .sub-menu li a,  
.theme-white .switch-text{
    color: #009f94;
} 
.theme-white .menu-footer li a { 
    color: #009f94 !important; 
}
.theme-white .menu-footer { 
    justify-content: center;
    border-top: 1px solid rgba(20, 196, 183, 0.2); 
}
.theme-white .ver { 
    position: fixed;
    color: rgba(0, 159, 148, 0.6); 
    font-size: 12px;
    right: 0;
}

/* 當前頁面紅字標示 */
.active-page { color: #EB4700 !important; font-weight: bolder; }

/* 其他微調 */
.menu-title { padding: 10px 0 5px 10px; font-weight: bold; pointer-events: none; }
.sub-menu { list-style: none; padding-left: 15px; }
.menu-link { padding: 12px 0; cursor: pointer; text-decoration: none; display: block; }