/* =========================================
   旅遊行程頁面核心樣式 (Ver 2.8 滿版智慧便當盒整合版)
   ========================================= */

@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+TC:wght@500;700&display=swap');

:root {
    --theme-primary: #5f7a76;    
    --theme-primary-hover: #4a615e;
    --theme-secondary: #e8eceb;  
    --theme-accent: #c4a77d;     
    --text-main: #334155;
    --text-muted: #64748b;
    --bg-body: #f8fafc;
    --bg-card: #ffffff;
    --border-color: #e2e8f0;
    --danger-color: #e11d48;
}

html { 
    scroll-behavior: smooth; 
    /* ❌ 刪除 overflow-x: hidden，解放 Sticky 跟隨屬性 */
}
body { 
    margin: 0; 
    width: 100%; 
    overflow-x: clip; /* 👑 改用 clip：完美防破版，且絕對不會破壞 Sticky！ */
    font-family: 'Helvetica Neue', Arial, 'PingFang TC', 'Microsoft JhengHei', sans-serif; 
    background-color: var(--bg-body); 
    color: var(--text-main); 
    line-height: 1.6; 
    -webkit-font-smoothing: antialiased; 
}
a { text-decoration: none; color: inherit; }
* { box-sizing: border-box; }

/* 頂部視覺 */
.hero-section { position: relative; width: 100%; height: 80vh; background-size: cover; background-position: center; display: flex; align-items: center; justify-content: center; text-align: center; }
.hero-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.4); }
.hero-content { position: relative; z-index: 10; color: #fff; padding: 0 20px; }
.hero-title {font-family: 'Noto Serif TC'; font-size: 3.5rem; font-weight: bold; margin-bottom: 15px; text-shadow: 0 2px 4px rgba(0,0,0,0.5); }
.hero-subtitle { font-size: 1.5rem; opacity: 0.9; }

/* ================== 左側懸浮導航 (自動隱藏收折版) ================== */
.fixed-left-nav {
    position: fixed; 
    top: 50%; 
    z-index: 50; display: flex; flex-direction: column; gap: 10px; 
    background: transparent; border: none; box-shadow: none; padding: 0; align-items: center;
    
    /* 👑 收折魔法：平常往左邊縮進去，並降低透明度 */
    left: 0px; 
    transform: translateY(-50%); 
    opacity: 0.4;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

/* 👑 終極防抖動感應區 (Invisible Hitbox) */
.fixed-left-nav::after {
    content: ''; 
    position: absolute; 
    top: -60px;     /* 向上擴大 60px 感應區 */
    bottom: -60px;  /* 向下擴大 60px 感應區 */
    right: -80px;   /* 往右大幅度延伸 80px，讓滑鼠滑動時絕對不會掉出範圍 */
    left: 0; 
    z-index: -2;    /* 放到底層，不干擾點選按鈕 */
    /* background: rgba(255, 0, 0, 0.2); 💡 開發小技巧：您可以把這行解除註解，就能看見紅色的感應區有多大！ */
}
/* 👑 當滑鼠靠近整個導航區塊時，自動往右滑出並恢復透明度 */
.fixed-left-nav:hover {
    left: 20px;
    opacity: 1;
}

.fixed-left-nav::before {
    content: ''; position: absolute; top: 10px; bottom: 10px; left: 50%; transform: translateX(-50%); width: 1px;
    background: var(--theme-accent); opacity: 0.4; z-index: -1;
}
/* ...下方的 .fixed-left-nav a 那些維持原本的不變... */
.fixed-left-nav a {
    display: flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; font-size: 1rem; color: var(--text-main);
    background: rgba(251, 252, 248, 0.65); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border: 1px solid rgba(251, 252, 248, 0.8); 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06); transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1); text-decoration: none;
}
.fixed-left-nav a:hover {
    background: var(--theme-primary); color: white; border-color: var(--theme-primary); transform: scale(1.15); box-shadow: 0 6px 16px rgba(63, 104, 92, 0.3); 
}
.fixed-left-nav a.active {
    background-color: var(--primary, #3f685c); 
    color: #ffffff !important;
    transform: scale(1.15); 
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    border: 2px solid #fff; 
}

/* 主內容佈局 */
.layout-container { display: flex; justify-content: center; max-width: 1800px; margin: 60px auto; padding: 0 40px; gap: 40px; align-items: flex-start; }
.left-spacer { flex-basis: 280px; flex-shrink: 5; max-width: 280px; }
.main-content { flex-basis: 1200px; flex-shrink: 1; max-width: 1200px; width: 100%; }
.content-section { margin-bottom: 60px; }
.section-header { text-align: center; margin-bottom: 40px; }
.section-title { font-size: 2rem; font-weight: bold; color: var(--text-main); margin: 0 0 15px 0; }
.title-divider { width: 60px; height: 4px; background: var(--theme-primary); margin: 0 auto; border-radius: 2px; }

/* 航班表格 */
.flight-table-wrapper { background: var(--bg-card); border-radius: 12px; overflow: hidden; border: 1px solid var(--border-color); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease; }
.flight-table-wrapper:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(0,0,0,0.08); }
.flight-table { width: 100%; border-collapse: collapse; text-align: center; }
.flight-table th { background: var(--theme-secondary); color: var(--theme-primary); padding: 14px; font-weight: bold; font-size: 0.95rem; }
.flight-table td { padding: 14px; border-bottom: 1px solid var(--border-color); color: var(--text-main); font-size: 0.95rem; }
.tag-go { background: #e0f2fe; color: #0369a1; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; }
.tag-back { background: #fef3c7; color: #b45309; padding: 4px 8px; border-radius: 4px; font-size: 0.8rem; font-weight: bold; }
.table-footer { background: #f8fafc; padding: 12px 20px; font-size: 0.85rem; color: var(--text-muted); border-top: 1px solid var(--border-color); }

/* 每日行程概覽 */
.day-details { margin-bottom: 25px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 8px rgba(0,0,0,0.02); }
.day-summary { padding: 25px; cursor: pointer; list-style: none; display: flex; flex-direction: column; gap: 15px; transition: background 0.3s; }
.day-summary:hover { background: #fdfdfd; }
.day-summary::-webkit-details-marker { display: none; }
.day-header { display: flex; justify-content: space-between; align-items: center; width: 100%; }
.day-title-group { display: flex; align-items: center; gap: 15px; }
.day-tag { background: var(--theme-primary); color: white; padding: 4px 12px; border-radius: 6px; font-size: 0.95rem; font-weight: bold; }
.day-title { font-size: 1.15rem; font-weight: bold; color: var(--text-main); }
.day-toggle-icon { color: var(--text-muted); transition: transform 0.3s; }
details[open] .day-toggle-icon { transform: rotate(180deg); }

/* 餐食與住宿切換邏輯 */
.day-info-rows { border-top: 1px dashed var(--border-color); padding-top: 15px; display: flex; flex-direction: column; gap: 10px; }
details[open] .summary-meals { display: none; }
.content-meals { background: var(--bg-card); margin: 25px -25px -25px -25px; padding: 20px 25px; border-top: 1px solid var(--border-color); border-radius: 0 0 12px 12px; transition: background 0.3s ease, box-shadow 0.3s ease; }
.content-meals:hover { background: #f8fafc; box-shadow: inset 0 4px 12px rgba(0,0,0,0.02); }
.info-row { display: flex; flex-wrap: wrap; gap: 20px; font-size: 0.95rem; color: var(--text-muted); align-items: center; }
.info-item { display: flex; align-items: center; gap: 8px; }
.badge-meal { border: 1px solid var(--theme-accent); color: #b48c59; background: #fffaf0; padding: 2px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; }
.badge-hotel { border: 1px solid var(--theme-primary); color: var(--theme-primary); background: #f0fdfa; padding: 2px 10px; border-radius: 20px; font-size: 0.8rem; font-weight: bold; }

/* 三欄式圖文網格 */
.day-content { padding: 25px; border-top: 1px solid var(--border-color); background: var(--bg-body); }
.day-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.spot-card { background: var(--bg-card); border-radius: 10px; overflow: hidden; border: 1px solid var(--border-color); text-align: center; padding-bottom: 15px; box-shadow: 0 2px 5px rgba(0,0,0,0.02); transition: 0.3s; }
.spot-card:hover { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.06); }
.spot-title { font-size: 1.05rem; font-weight: bold; color: var(--theme-primary); margin: 0 0 5px 0; padding: 0 10px; }
.spot-desc { font-size: 0.85rem; color: var(--text-muted); margin: 0; padding: 0 10px; }
/* =========================================
   🌟 嚴選餐食與景點圖片高度優化
   ========================================= */

/* 1. 電腦版 (三欄時的高度) */
.spot-img {
    width: 100%;
    height: 220px; /* 👈 您想要的高度，建議 200px ~ 240px */
    object-fit: cover;
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 15px;
    display: block;
}

/* 2. 平板版 (兩欄時的高度) */
@media (max-width: 1100px) {
    .spot-img {
        height: 260px; /* 👈 螢幕變窄、圖片變寬，高度要跟著拉高比例才好看 */
    }
}

/* 3. 手機版 (單欄滿版時的高度) */
@media (max-width: 768px) {
    .spot-img {
        height: 240px; /* 👈 手機版建議設定在 220px ~ 280px 之間 */
        margin-bottom: 10px;
    }
}

/* 注意事項區塊：固定高度與專屬優雅捲軸 */
.notes-list { 
    background: var(--bg-card); 
    padding: 30px; 
    border-radius: 12px; 
    border: 1px solid var(--border-color); 
    color: var(--text-muted); 
    line-height: 1.8; 
    font-size: 0.95rem; 
    max-height: 320px; 
    overflow-y: auto;
    box-shadow: inset 0 -20px 20px -20px rgba(0,0,0,0.1);
}
.notes-list::-webkit-scrollbar { width: 8px; }
.notes-list::-webkit-scrollbar-track { background: transparent; margin: 15px 0; }
.notes-list::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; border: 2px solid var(--bg-card); }
.notes-list::-webkit-scrollbar-thumb:hover { background: var(--theme-accent); }

/* 右側報價單 */

.booking-sidebar { flex: 0 0 280px; width: 280px; position: sticky; top: 40px; background: var(--bg-card); border-radius: 12px; overflow: hidden; box-shadow: 0 10px 25px rgba(0,0,0,0.06); border: 1px solid var(--border-color); }
.booking-header { background: #2a3541; color: white; padding: 25px 20px; text-align: center; position: relative; }
.status-badge { position: absolute; top: 12px; right: 12px; background: var(--danger-color); color: white; font-size: 0.75rem; padding: 3px 8px; border-radius: 4px; font-weight: bold; }
.booking-header h3 { margin: 0 0 8px 0; font-size: 1.05rem; color: #cbd5e1; }
.price-amount { font-size: 2rem; font-weight: bold; color: var(--theme-accent); margin: 0 0 5px 0; }
.price-unit { font-size: 0.9rem; font-weight: normal; color: #94a3b8; }
.booking-status { font-size: 0.85rem; color: #94a3b8; margin-bottom: 20px; }
.btn-primary { background: var(--theme-primary); color: white; border: none; padding: 12px 0; width: 100%; border-radius: 6px; font-size: 1rem; font-weight: bold; cursor: pointer; transition: 0.3s; }
.btn-primary:hover { background: var(--theme-primary-hover); transform: translateY(-2px); }
.booking-body { padding: 0 20px; }
.info-section { padding: 20px 0; border-bottom: 1px solid var(--border-color); }
.info-section:last-child { border-bottom: none; }
.info-section h4 { margin: 0 0 10px 0; font-size: 0.95rem; display: flex; align-items: center; gap: 8px; }
.info-section.include h4 { color: var(--theme-primary); }
.info-section.exclude h4 { color: var(--danger-color); }
.info-list { padding-left: 0; margin: 0; list-style: none; font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }
.info-list li::before { content: "•"; color: var(--theme-primary); font-weight: bold; display: inline-block; width: 12px; }
.info-section.exclude .info-list li::before { color: var(--danger-color); }

/* 底部區塊 */
.footer-section { background: #1e293b; color: white; text-align: center; padding: 40px 20px; margin-top: 60px; }
.mascot-box { display: flex; align-items: center; justify-content: center; gap: 20px; margin-bottom: 20px; }
.mascot-img { width: 80px; height: 80px; border-radius: 50%; border: 3px solid var(--theme-accent); object-fit: cover; background: #fff; }
.footer-slogan { margin: 0 0 5px 0; color: var(--theme-accent); font-size: 1.3rem; }
.footer-desc { margin: 0; color: #94a3b8; font-size: 0.9rem; }
.footer-copyright { font-size: 0.8rem; color: #64748b; margin-top: 25px; }

/* 沉浸式微動畫設定 */
.reveal {
    opacity: 0;
    transform: translateY(40px);
    transition: opacity 0.8s cubic-bezier(0.25, 1, 0.5, 1), transform 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal.active { opacity: 1; transform: translateY(0); }

/* 響應式佈局 */
@media (max-width: 1300px) { .left-spacer { display: none; } .layout-container { padding-left: 80px; } }
/* 👑 擴大到 1100px：完美覆蓋所有 iPad Pro, iPad Air 的直向螢幕 */
@media (max-width: 1100px) {
    .layout-container { flex-direction: column; padding: 0 40px 0 90px; align-items: center; } /* 預留 90px 給左側導航列 */
    .main-content { max-width: 100%; }
    .booking-sidebar { flex: none; height: auto; width: 100%; max-width: 600px; position: static; margin-bottom: 40px; }
    .day-grid { grid-template-columns: repeat(2, 1fr); }
	font-size: 0.95rem !important; /* 強制把原本的 1.05rem 縮小，讓文字更精緻 */
}
@media (max-width: 768px) {
    .fixed-left-nav { 
        top: auto; bottom: 0; left: 0; transform: none; width: 100%; flex-direction: row; gap: 15px; 
        background: rgba(250, 250, 250, 0.55); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(10px); 
        padding: 6px 20px; border-top: 1px solid var(--border-color); box-shadow: 0 -4px 20px rgba(0,0,0,0.06);
        overflow-x: auto; justify-content: flex-start; -webkit-overflow-scrolling: touch; z-index: 9999;
    }
    .fixed-left-nav::-webkit-scrollbar { display: none; }
    .fixed-left-nav::before { display: none; } 
	/* 👑 殺手級修復：關掉隱形感應區，徹底解決手機版向右破版！ */
    .fixed-left-nav::after { display: none; }
    .fixed-left-nav a { width: 42px; height: 42px; flex: 0 0 auto; }
    .layout-container { padding: 0 20px; margin: 40px auto 100px auto; }
    .day-grid { grid-template-columns: 1fr; }
    .info-row { flex-direction: column; align-items: flex-start; gap: 10px; }
    .hero-title { font-size: 2.2rem; margin-bottom: 10px; }
    .hero-subtitle { font-size: 1.1rem; }
	/* 👑 加上這兩行：讓打字機標題與標籤在手機上自動縮小 */
    .day-title { font-size: 0.95rem; } 
    .day-tag { font-size: 0.85rem; padding: 3px 8px; }
	/* 👑 新增：行程內容說明文字 (自動縮小字級與內邊距，增加呼吸空間) */
    .day-desc-text {
        font-size: 0.95rem !important; /* 強制把原本的 1.05rem 縮小，讓文字更精緻 */
        padding: 10px !important;      /* 原本是 20px，縮小一點讓左右邊界有更多空間 */
        line-height: 1.7 !important;   /* 微調行高，讓多行閱讀時眼睛不疲勞 */
    }
}

/* 右側抽屜與遮罩 */
.drawer-overlay {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(44, 49, 53, 0.6); backdrop-filter: blur(4px); 
    z-index: 998; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease;
}
.drawer-overlay.show { opacity: 1; visibility: visible; }
.right-drawer {
    position: fixed; top: 0; right: -850px; width: 100%; max-width: 800px; height: 100vh;
    background: var(--bg-card); z-index: 999;
    box-shadow: -5px 0 25px rgba(0,0,0,0.1); transition: right 0.4s cubic-bezier(0.25, 1, 0.5, 1);
    display: flex; flex-direction: column;
}
.right-drawer.show { right: 0; }
.drawer-close-tab {
    position: absolute; top: 50%; left: -28px; transform: translateY(-50%);
    width: 28px; height: 120px; background: var(--theme-primary); color: white;
    border: none; border-radius: 10px 0 0 10px; display: flex; align-items: center; justify-content: center;
    font-size: 1rem; cursor: pointer; box-shadow: -4px 0 15px rgba(63, 104, 92, 0.2); transition: all 0.3s cubic-bezier(0.25, 1, 0.5, 1); z-index: 1000;
}
.drawer-close-tab:hover { background: var(--theme-primary-hover); width: 36px; left: -36px; padding-right: 6px; }
.drawer-header { padding: 20px 25px; background: var(--bg-card); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; }
.drawer-title { margin: 0; font-size: 1.2rem; font-family: 'Noto Serif TC', serif; font-weight: 700; color: var(--theme-primary); }
.drawer-iframe { width: 100%; flex: 1; border: none; background: var(--bg-body); }

/* 每日行程：Unsplash 圖庫輪播與燈箱 */
.day-unsplash-gallery-wrapper { position: relative; margin: 25px 0 10px 0; display: flex; align-items: center; }
.day-unsplash-gallery { display: flex; gap: 15px; overflow-x: auto; scroll-behavior: smooth; -ms-overflow-style: none; scrollbar-width: none; flex: 1; scroll-snap-type: x mandatory; padding: 10px 5px; }
.day-unsplash-gallery::-webkit-scrollbar { display: none; }
.gallery-item { flex: 0 0 calc(25% - 11.25px); scroll-snap-align: start; border-radius: 8px; overflow: hidden; border: 1px solid var(--border-color); box-shadow: 0 2px 8px rgba(0,0,0,0.06); transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.4s ease; cursor: zoom-in; background: #fff; }
.gallery-item:hover { transform: translateY(-6px); box-shadow: 0 10px 25px rgba(0,0,0,0.12); }
.gallery-item img { width: 100%; height: 180px; object-fit: cover; display: block; transition: transform 0.8s ease; }
.gallery-item:hover img { transform: scale(1.08); }
.gallery-nav { background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(4px); border: 1px solid var(--border-color); color: var(--theme-primary); width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,0.1); position: absolute; z-index: 10; transition: all 0.3s; font-size: 1.2rem; }
.gallery-nav:hover { background: var(--theme-primary); color: #fff; border-color: var(--theme-primary); transform: scale(1.1); }
.gallery-nav.prev { left: -21px; }
.gallery-nav.next { right: -21px; }

@media (max-width: 991px) { .gallery-item { flex: 0 0 calc(33.333% - 10px); } }
@media (max-width: 768px) { .gallery-item { flex: 0 0 88%; } .gallery-item img { height: 220px; } .gallery-nav { display: none; } }

/* 全螢幕沉浸式圖片燈箱 (Lightbox) */
.lightbox-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(8px); z-index: 100000; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; }
.lightbox-overlay.show { opacity: 1; visibility: visible; }
.lightbox-img { max-width: 85vw; max-height: 85vh; border-radius: 8px; box-shadow: 0 20px 50px rgba(0,0,0,0.6); transition: opacity 0.3s ease; }
.lightbox-close { position: absolute; top: 25px; right: 35px; color: #fff; font-size: 2.5rem; cursor: pointer; transition: transform 0.3s; }
.lightbox-close:hover { transform: scale(1.2) rotate(90deg); }
.lightbox-nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.1); border: 2px solid rgba(255,255,255,0.3); color: #fff; width: 65px; height: 65px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 1.8rem; transition: all 0.3s; backdrop-filter: blur(4px); }
.lightbox-nav:hover { background: #fff; color: var(--text-main); transform: translateY(-50%) scale(1.1); }
.lightbox-nav.prev { left: 40px; }
.lightbox-nav.next { right: 40px; }
@media (max-width: 768px) { .lightbox-nav { display: none; } }
.lightbox-attribution { position: absolute; bottom: 25px; left: 40px; color: rgba(255, 255, 255, 0.7); font-size: 0.85rem; z-index: 100001; text-shadow: 0 1px 3px rgba(0,0,0,0.8); font-family: 'Montserrat', sans-serif; display: none; }
.lightbox-attribution a { color: #fff; text-decoration: underline; transition: color 0.3s; }
.lightbox-attribution a:hover { color: var(--theme-accent); }
@media (max-width: 768px) { .lightbox-attribution { left: 20px; bottom: 20px; font-size: 0.75rem; } }


/* =======================================================
   🌟 滿版便當盒 (Bento Grid) 行程精華區塊 - 整合版
======================================================= */
.bento-full-wrapper {
    /* 無視父層容器限制，強制 100% 貼齊螢幕左右邊緣 */
    width: 100vw;
    position: relative;
    left: 50%;
    right: 50%;
    margin-left: -50vw;
    margin-right: -50vw;
    background: #fff;
    padding: 40px 0 0 0; 
    overflow: hidden;
}

.bento-header {
    text-align: center;
    margin-bottom: 25px;
}

.bento-header h2 {
    font-size: 2rem;
    color: #333;
    letter-spacing: 2px;
    margin: 0 0 10px 0;
    font-weight: bold;
    font-family: 'Noto Serif TC', serif;
}

.bento-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: 480px; 
    gap: 0; /* 絕對無縫滿版 */
    width: 100%;
}

.bento-item {
    position: relative;
    overflow: hidden;
    cursor: pointer;
    background: #000;
}

.bento-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.7s ease;
    display: block;
}

.bento-item:hover img {
    transform: scale(1.08);
}

/* 基礎 Overlay：拿掉固定的置中對齊，讓底下的動態樣式來接管排版 */
.bento-overlay {
    position: absolute;
    inset: 0;
    /* 為了讓各種位置的文字都清晰，漸層稍微加深一點點 */
    background: linear-gradient(to top, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 50%, rgba(0,0,0,0.1) 100%);
    display: flex;
    flex-direction: column;
    padding: 30px;
    color: #fff;
    opacity: 0.9;
    transition: opacity 0.4s;
    box-sizing: border-box;
}

.bento-item:hover .bento-overlay {
    opacity: 1;
}

/* 為了讓「外框」效果能完美包覆文字，我們加一個內層包裝 */
.bento-text-wrap {
    display: flex;
    flex-direction: column;
    transition: all 0.3s ease;
}


/* 👑 隨機樣式 1：經典左下角 (左對齊) */
.layout-style-1 { 
    justify-content: flex-end; 
    align-items: flex-start; 
    text-align: left; 
    padding-left: 60px; /* 👑 電腦版：左側往內縮 100px，完美閃避玉石導航列 */
}

/* 確保手機版時恢復正常間距 (因為手機版導航列在畫面底部，左邊不會擋到) */
@media (max-width: 768px) {
    .layout-style-1 {
        padding-left: 20px;
    }
}
/* 👑 隨機樣式 2：正中央 + 典雅毛玻璃外框 (置中對齊) */
.layout-style-2 { justify-content: center; align-items: center; text-align: center; }
.layout-style-2 .bento-text-wrap { 
    border: 1px solid rgba(197, 163, 107, 0.6); /* 使用您的品牌金色做外框 */
    padding: 30px; 
    background: rgba(0,0,0,0.25); 
    backdrop-filter: blur(4px); 
    -webkit-backdrop-filter: blur(4px);
    width: 85%;
}

/* 👑 隨機樣式 3：經典置底 + 正中對齊 */
.layout-style-3 { justify-content: flex-end; align-items: center; text-align: center; }

/* 👑 隨機樣式 4：右下角 (右對齊) */
.layout-style-4 { 
    justify-content: flex-end; 
    align-items: flex-end; 
    text-align: right; 
    padding-right: 60px; /* 👑 電腦版：右側往內縮 100px，增加視覺呼吸空間 */
}

/* 確保手機版時恢復正常間距 */
@media (max-width: 768px) {
    .layout-style-4 {
        padding-right: 20px;
    }
}

/* 以下維持不變 */
.bento-tag {
    font-size: 0.8rem;
    color: #c5a36b;
    letter-spacing: 2px;
    margin-bottom: 8px;
    text-transform: uppercase;
    font-family: 'Outfit', sans-serif;
}

.bento-title {
    font-size: 1.6rem;
    font-weight: bold;
    margin: 0 0 8px 0;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    line-height: 1.3;
    font-family: 'Noto Serif TC', serif;
}

.bento-desc {
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
    color: #eee;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-family: 'Noto Sans TC', sans-serif;
}

/* =======================================================
   🌟 智慧動態 3 欄便當盒 (6-3-3 / 3-3-6 交錯美學)
======================================================= */
/* 第一列：左邊一大，右邊兩小 */
.bento-item:nth-child(6n+1) { grid-column: span 6; }
.bento-item:nth-child(6n+2) { grid-column: span 3; }
.bento-item:nth-child(6n+3) { grid-column: span 3; }

/* 第二列：左邊兩小，右邊一大 */
.bento-item:nth-child(6n+4) { grid-column: span 3; }
.bento-item:nth-child(6n+5) { grid-column: span 3; }
.bento-item:nth-child(6n+6) { grid-column: span 6; }

/* 👑 完美解決排版落單問題 (自動計算剩餘圖片) */
/* 情況 A：最後只剩 1 張圖 -> 霸氣跨滿整行 */
.bento-item:last-child:nth-child(3n+1) { 
    grid-column: span 12; 
}
/* 情況 B：最後剩 2 張圖 -> 左右各半 (6:6)，完美對稱 */
.bento-item:nth-last-child(2):nth-child(3n+1),
.bento-item:last-child:nth-child(3n+2) {
    grid-column: span 6;
}

/* 1. 骨牌側面滑入的初始狀態 (隱藏、往右偏移 100px) */
.reveal-side {
    opacity: 0;
    transform: translateX(100px); 
    transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1); /* 0.8秒的優雅滑入 */
}

/* 2. 進入畫面後的狀態 (顯示、歸位) */
.reveal-side.active {
    opacity: 1;
    transform: translateX(0);
}

/* 3. 打字機文字的初始狀態 (先留出高度，確保畫面不跳動) */
.typewriter-text {
    min-height: 3em; /* 根據您的字體大小預留空間 */
    color: #4A5259;
    line-height: 1.8;
}

/* 4. 閃爍的打字機游標特效 (讓說故事的感覺更強烈) */
.typewriter-text::after {
    content: '|';
    color: #c5a36b; /* 品牌金色游標 */
    animation: blink 1s step-end infinite;
}

/* 打完字後隱藏游標的 Class */
.typewriter-text.done::after {
    display: none;
}

@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}


/* ==========================================
   🌟 打字機特效游標 (行程天數標題)
========================================== */
.typewriter-title::after {
    content: '|';
    color: var(--theme-accent); /* 使用品牌金色作為游標 */
    animation: blink 1s step-end infinite;
    margin-left: 4px;
    font-weight: 300;
}

/* 打完字後，隱藏游標 */
.typewriter-title.done::after {
    display: none; 
}

/* 游標閃爍動畫 */
@keyframes blink {
    0%, 100% { opacity: 1; }
    50% { opacity: 0; }
}

/* Bento 手機版響應式 */
@media (max-width: 980px) {
    .bento-grid { 
        grid-template-columns: 1fr; 
        grid-auto-rows: 350px; 
        gap: 0; 
    }
    
    /* 👑 強制所有便當盒在手機版佔滿一整行 */
    .bento-item, 
    .bento-item:nth-child(n), 
    .bento-item:last-child:nth-child(n) { 
        grid-column: 1 / -1 !important; 
    }

    /* 🌟 新增：讓便當盒上方的「打字機標題」在手機版自動縮小並微調字距 */
    .bento-header h2 {
        font-size: 1.4rem; /* 從原本的 2rem 縮小到 1.4rem */
        letter-spacing: 1px; /* 稍微縮減字距，讓畫面更精緻 */
    }

    .bento-overlay { padding: 20px; }
    .bento-title { font-size: 1.3rem; }
    .bento-desc { font-size: 0.9rem; }
}