/* ===== css/layout.css =====
 * 共享内联布局样式（index.html + indexpro.html 共用）
 * 抽取自两个首页的 <style> 块中完全相同/高度相似的部分
 */

/* Reset & 基础 */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { overflow: hidden !important; height: 100% !important; overscroll-behavior-y: none !important; }
body { overflow: hidden; position: relative !important; background: #1f072a !important; height: 100% !important; }

/* 页面框架 */
.page-wrapper { position: relative; width: 100%; height: 100%; }
.stage {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100vh !important;
    height: 100dvh !important;
    overflow: hidden !important;
    z-index: 10 !important;
}
.stage.menu-open { box-shadow: -6px 0 40px rgba(0,0,0,0.6), -2px 0 20px rgba(0,0,0,0.3); }
.ui-overlay { position: relative !important; height: 100vh !important; height: 100dvh !important; top: auto !important; left: auto !important; width: 100% !important; overflow: hidden !important; }

/* 首页时 body 用 footer 颜色填充 */
body.home-page { background-color: #1f072a !important; }

/* 首页时 stage 内容可滚动，让用户能滑到底部看到 footer */
body.home-page .ui-overlay { overflow-y: auto !important; }
body.home-page.flow-active .ui-overlay,
body.home-page.flow-only .ui-overlay { overflow: hidden !important; }

/* index 首頁：footer 改為文檔流佈局，緊接 stage 下方，滾動自然出現 */
body.index-home { overflow-y: auto !important; -webkit-overflow-scrolling: touch; height: auto !important; }
body.index-home .page-wrapper { min-height: 100dvh; height: auto; display: flex; flex-direction: column; }
body.index-home .stage {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    height: 100vh !important;
}
/* stage 佔位符，讓 footer 在 stage 下方 */
body.index-home .stage-spacer { height: 100dvh; flex-shrink: 0; }
body.index-home .footer-drawer {
    position: relative !important;
    transform: none !important;
    transition: none !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    flex-shrink: 0;
}
body.index-home .footer-pull-hint,
body.index-home .footer-drawer-overlay { display: none !important; }

/* indexpro 首頁：同樣改為文檔流佈局 */
body.indexpro-home:not(.flow-only):not(.flow-active) { overflow-y: auto !important; -webkit-overflow-scrolling: touch; height: auto !important; }
body.indexpro-home:not(.flow-only):not(.flow-active) .page-wrapper { min-height: 100dvh; height: auto; display: flex; flex-direction: column; }
body.indexpro-home:not(.flow-only):not(.flow-active) .stage {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    height: 100vh !important;
}
body.indexpro-home:not(.flow-only):not(.flow-active) .ui-overlay { overflow: hidden !important; }
body.indexpro-home:not(.flow-only):not(.flow-active) .stage-spacer { height: 100dvh; flex-shrink: 0; }
body.indexpro-home:not(.flow-only):not(.flow-active) .footer-drawer {
    position: relative !important;
    transform: none !important;
    transition: none !important;
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
    flex-shrink: 0;
}
body.indexpro-home:not(.flow-only):not(.flow-active) .footer-pull-hint,
body.indexpro-home:not(.flow-only):not(.flow-active) .footer-drawer-overlay { display: none !important; }

/* 汉堡菜单 */
.hamburger-btn { position: fixed !important; z-index: 10000 !important; }
.hamburger-overlay.show { pointer-events: auto !important; z-index: 15 !important; }
body.scrollable { overflow-x: hidden !important; overflow-y: auto !important; }
body.hamburger-open { overflow: hidden !important; overflow-y: hidden !important; }
body.history-detail-open { overflow: hidden !important; overflow-y: hidden !important; }
/* 首页 flow-active 时，历史详情弹窗打开也要锁定 body 滚动 */
body.index-home.history-detail-open { overflow-y: hidden !important; }
body.index-home.history-detail-open.flow-active { overflow-y: hidden !important; }
body.flow-active { overflow: hidden !important; }
/* index 首頁即使 flow-active 也保持 body 可滾動（工具欄隱藏需要） */
body.index-home.flow-active { overflow-y: auto !important; }
/* 汉堡菜单 + footer 显示规则：
   - index 首页（body.home-page）：常驻显示（应付审核），即使 flow-active 也不隐藏
   - indexpro（无论直接打开还是 source=fast）：进入流程（flow-active）后隐藏
   - 不再用 display:none 隐藏 .hamburger-overlay，否则点击后侧边栏内容消失 */
body.flow-active .hamburger-btn { display: none !important; }
body.flow-active .footer-drawer,
body.flow-active .footer-drawer-overlay,
body.flow-active .footer-pull-hint { display: none !important; }
/* source=fast 跳转时提前隐藏（跳过 step1 直接进入流程） */
body.flow-only .hamburger-btn,
body.flow-only .footer-drawer,
body.flow-only .footer-drawer-overlay,
body.flow-only .footer-pull-hint { display: none !important; }
/* index 首页特例：漢堡選單與 footer 常駐顯示 */
body.index-home.flow-active .hamburger-btn,
body.index-home.flow-active .footer-drawer { display: block !important; }
body.index-home.flow-active .hamburger-btn { display: flex !important; }
/* index-home 的 pull-hint 和 overlay 始終隱藏 */
body.index-home.flow-active .footer-pull-hint,
body.index-home.flow-active .footer-drawer-overlay { display: none !important; }

/* 底部抽屉 */
.footer-drawer {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    z-index: 10001 !important;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    padding-bottom: calc(env(safe-area-inset-bottom, 0px) + 10px);
}
.footer-drawer.open { transform: translateY(0); }
.footer-drawer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px 4px;
}
.footer-drawer-close {
    background: rgba(255,255,255,0.1);
    border: 1px solid rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.7);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}
.footer-drawer-close:hover { background: rgba(255,255,255,0.2); color: #fff; }
.footer-drawer-handle { display: flex; justify-content: center; padding: 8px 0 4px; cursor: pointer; }
.footer-drawer-handle-bar { width: 36px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.25); transition: background 0.2s; }
.footer-drawer-handle:hover .footer-drawer-handle-bar { background: rgba(255,255,255,0.5); }
.footer-drawer-overlay {
    position: fixed !important;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: transparent;
    z-index: 10000 !important;
    pointer-events: none;
}
.footer-drawer-overlay.show { pointer-events: auto; }
body.footer-drawer-open { overflow: hidden !important; }

/* 底部拉手指示器 */
.footer-pull-hint {
    position: fixed !important;
    bottom: env(safe-area-inset-bottom, 0px) !important;
    left: 50% !important;
    transform: translateX(-50%);
    z-index: 10002 !important;
    padding: 6px 20px 8px;
    cursor: pointer;
    opacity: 0.5;
    transition: opacity 0.3s, transform 0.3s;
}
.footer-pull-hint:hover { opacity: 0.9; }
.footer-pull-hint.hidden { opacity: 0; pointer-events: none; }

/* PC 端：footer 常驻显示 */
@media (min-width: 1024px) {
    .footer-drawer { transform: translateY(0) !important; }
    .footer-drawer-overlay, .footer-pull-hint { display: none !important; }
    .stage { transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1) !important; }
}