html { scroll-behavior: smooth; scroll-padding-top: 130px; /* 重要：這能取代 JS 計算，自動避開導覽列 */}
/* ============================================================
   1. 原始 style.css 基礎設定
   ============================================================ */
/* --- 基礎設定 --- */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { /* 這裡將字體優先級設為您的新字體，後方保留系統預設字體作為備援 */font-family:'Noto Serif TC', sans-serif; background-color: #f6f5f0; color: #2c2c2c; line-height: 1.6; }
html { scroll-behavior: smooth; }
/* 修正跳轉偏移：主導覽(80px) + 子導覽 + 緩衝 */
[id] { scroll-margin-top: 130px; }
#map-section { scroll-margin-top: 200px !important; }

/* --- 導覽列一致化 --- */
.navbar { position: fixed; top: 0; width: 100%; height: 80px; display: flex; justify-content: space-between; align-items: center; padding: 0 60px; z-index: 3000; transition: 0.5s; background: transparent; }
.navbar.scrolled, .destination-nav { background: #f6f5f0 !important; box-shadow: 0 2px 10px rgba(0,0,0,0.05); border-bottom: 1px solid #e0ddd5; }

/* --- 最上方Logo電腦版、手機版修正版：正確對應顯示邏輯 --- */
.logo { 
    flex: 1; 
    display: flex; 
    justify-content: center; 
    align-items: center;
    height: 80px;      
    overflow: hidden;  
}

.logo a { 
    display: flex; 
    align-items: center; 
    justify-content: center;
    height: 80px;      
    width: 100%;
}

/* 電腦版 Logo (顯示完整版：ABURA · 游山) */
.logo-desktop { 
    display: block;   /* 電腦版預設顯示 */
    width: 480px;     
    height: 160px;     /* 高度建議設為 80px 對齊容器 */
    object-fit: contain; 
}

/* 手機版 Logo (顯示簡潔版：ABURA) */
.logo-mobile { 
    display: none;    /* 手機版預設隱藏 */
    width: 200px;     
    height: 150px; 
    object-fit: contain; 
}

/* 當螢幕寬度小於 768px 時切換 */
@media (max-width: 768px) {
    .logo-desktop { display: none; }  /* 手機版隱藏完整版 */
    .logo-mobile { display: block; }   /* 手機版顯示簡潔版 */
}
/* ---------------------------------- */

.bar { width: 28px; height: 1px; background: #333; display: block; margin: 8px 0; }
.btn-reserve { text-decoration: none; color: #333; border: 1px solid #333; padding: 10px 25px; font-size: 0.8rem; letter-spacing: 2px; }
/* --- 漢堡選單文字格式 --- */
.full-menu { position: fixed; inset: 0; background: #f6f5f0; z-index: 10000; display: flex; flex-direction: column;  align-items: center; text-align: center; opacity: 0; visibility: hidden; transition: 0.6s ease;overflow-y: auto; -webkit-overflow-scrolling: touch; justify-content: flex-start; padding-top: 100px; padding-bottom: 60px;}
.full-menu.active { opacity: 1; visibility: visible; }
/* [新增] 當選單開啟時，禁止底層網頁捲動 */
body.menu-open {overflow: hidden;height: 100%;}
.full-menu.active { opacity: 1; visibility: visible; }
.menu-close { position: absolute; top: 40px; left: 60px; font-size: 2.5rem; cursor: pointer; }
.menu-items { list-style: none; }
.menu-items li { margin-bottom: 25px; }
.menu-items a { text-decoration: none; color: #333; font-size: 1.8rem; letter-spacing: 2px; font-family: 'Noto Serif TC', serif; }
.menu-items small { display: block; font-size: 0.7rem; color: #999; text-transform: uppercase; margin-top: 5px; }
.submenu { display: none; list-style: none; padding-top: 20px; }
.submenu.active { display: block; }
.submenu li { margin-bottom: 15px; }
.submenu a { font-size: 1.4rem !important; color: #666 !important; }
.submenu-icon { font-size: 0.8rem; margin-left: 10px; transition: 0.3s; }

/* --- 目的地：新增客房連結並排樣式 (位置上移精確版) --- */
.submenu-row {position: relative;display: flex;justify-content: center; align-items: flex-start;width: 100%;}
.submenu-row > a:first-child {display: flex;flex-direction: column;align-items: center;text-align: center;line-height: 1; }
.room-link {position: absolute;left: calc(50% + 140px); top: 0.75px; display: flex;flex-direction: column; align-items: center;text-wrap: nowrap;font-size: 0.85rem !important; color: #8d7b70 !important;   text-decoration: none;font-family: 'Noto Serif TC', serif;transition: all 0.3s ease;line-height: 1;}
.room-link::before {content: "\f105"; font-family: "Font Awesome 6 Free";font-weight: 900;position: absolute;left: -25px; font-size: 0.75rem;transform: translateY(8px); }
.submenu-row small, .room-link small {font-size: 0.6rem !important;color: #bbb !important;display: block;letter-spacing: 1.5px;text-transform: uppercase;}
.submenu-row small { margin-top: 18px !important; }
.room-link small {margin-top: 15px !important; text-align: center;padding-left: 0;width: 100%;}
.menu-items a:hover, .submenu a:hover, .room-link:hover { color: #bd9974 !important; }

/* --- 手機版 RWD：向下箭頭定位優化與連結簡化 --- */
@media (max-width: 768px) {
    .submenu-row { position: relative; display: flex; flex-direction: column; align-items: center; }
    .submenu-row::after {
        content: "\f107"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute;
        left: calc(50% + 100px); top: 3px; font-size: 1rem; color: #8d7b70; transition: transform 0.3s ease; cursor: pointer; z-index: 5;
    }
    .submenu-row.show-room::after { transform: rotate(180deg); }
    .room-link { position: relative !important; left: 0 !important; top: 0 !important; display: none; flex-direction: column; align-items: center; margin-top: 15px; padding: 10px 0; width: 100%; text-align: center; }
    .room-link::before { display: none !important; }
    .submenu-row.show-room .room-link { display: flex; animation: fadeInDown 0.4s ease forwards; }
    .room-link small { margin-top: 8px !important; font-size: 0.65rem !important; text-align: center; letter-spacing: 2px; padding-left: 0 !important; }
}

@keyframes fadeInDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } }

/* --- 分頁專屬：子導覽列 (貼合主導覽) --- */
.sub-nav { position: sticky; top: 80px; background: #f6f5f0; padding: 15px 0; border-bottom: 1px solid #e0ddd5; text-align: center; z-index: 2000; }
.sub-nav ul { list-style: none; display: flex; justify-content: center; gap: 25px; }
.sub-nav a { text-decoration: none; color: #888; font-size: 0.85rem; letter-spacing: 1px; white-space: nowrap; }

/* --- 內容排版標準 --- */
.tag { font-size: 0.85rem; color: #888; letter-spacing: 2px; margin-bottom: 15px; display: block; text-transform: uppercase; }
.section-title { font-size: 1.8rem; font-weight: 300; margin-bottom: 20px; color: #333; letter-spacing: 2px; font-family: 'Playfair Display', 'Noto Serif TC', serif; }
.section-desc { font-size: 0.95rem; line-height: 1.8; color: #555; margin-bottom: 25px; max-width: 850px; }
.detail-content { padding: 80px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; }
.content-wrap { max-width: 850px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }

.grid-wrapper { width: 80%; margin: 0 auto 120px auto; }
.grid-container { display: grid; grid-template-columns: 1.8fr 1.2fr; gap: 40px; }
.item-info { padding-top: 30px; text-align: left; }

.gallery-slider { width: 80%; margin: 0 auto; overflow: hidden; position: relative; }
.gallery-container { display: flex; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); }
.gallery-item { flex: 0 0 100%; }
.gallery-item img { width: 100%; height: 65vh; object-fit: cover; display: block; }

.room-display-grid { width: 90%; margin: 0 auto 40px auto; display: grid; gap: 40px; }
.room-card { background: #fff; border: 1px solid #eee; padding-bottom: 30px; }
.photo-track { display: flex; transition: 0.5s ease; height: 100%; }
.photo-track img { width: 100%; height: 100%; object-fit: cover; flex-shrink: 0; }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.4); color: white; border: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer; z-index: 10; opacity: 0; transition: 0.3s; }
.room-card:hover .slider-btn { opacity: 1; }

.main-footer { padding: 80px 40px; background: #f6f5f0; border-top: 1px solid #e0ddd5; }
.footer-center-content { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 35px; }
.footer-logo { font-size: 1.4rem; letter-spacing: 20px; font-weight: 400; color: #2c2c2c; font-family: 'Playfair Display', serif; padding-left: 20px; }
.footer-social { display: flex; gap: 40px; position: relative; z-index: 9000; }
.footer-social a { color: #2c2c2c; font-size: 1.8rem; }
.footer-contact-info { display: flex; flex-direction: column; gap: 12px; font-size: 0.9rem; color: #555; }
.contact-row { display: flex; justify-content: center; align-items: center; gap: 20px; }
.contact-divider { margin: 0 10px; color: #ccc; }

/* --- 關於我們專用排版 --- */
.about-row { display: flex; align-items: center; gap: 60px; margin-bottom: 120px; text-align: left; }
.about-row.reverse { flex-direction: row-reverse; }
.about-image-box, .about-text-box { flex: 1; }
.about-image-box img { width: 100%; aspect-ratio: 4/3; object-fit: cover; }
.img-shadow-right { box-shadow: 15px 15px 0px #8d7b70; }
.img-shadow-left { box-shadow: -15px 15px 0px #8d7b70; }

/* --- RWD 響應式佈局修正 --- */
@media (max-width: 1024px) { .navbar { padding: 0 30px; } .grid-wrapper { width: 90%; } .room-grid-three { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px) {
    .navbar { height: 70px; padding: 0 20px; } .logo { font-size: 1.2rem; letter-spacing: 0.3rem; } .btn-reserve { padding: 8px 15px; font-size: 0.75rem; } .menu-close { left: 20px; top: 25px; }
    header h1 { font-size: 2.2rem !important; letter-spacing: 5px !important; }
    .detail-content { padding: 60px 20px; } .section-title { font-size: 1.6rem; }
    .grid-container, .room-grid-three, .room-grid-two, #dining-section div[style*="grid"], #facility-section div[style*="grid"] { grid-template-columns: 1fr !important; gap: 30px; }
    .grid-wrapper { width: 100%; padding: 0 20px; } .item-info { padding-top: 15px; } .item-info img { height: 400px !important; }
    .gallery-item img { height: 45vh; } .gallery-slider { width: 100%; }
    .about-row { flex-direction: column !important; text-align: center; gap: 30px; margin-bottom: 60px !important; }
    .about-row.reverse { flex-direction: column-reverse !important; }
    .about-row div[style*="flex: 1"] { width: 100%; } .about-row img { box-shadow: none !important; }
    .sub-nav { top: 70px; overflow-x: auto; -webkit-overflow-scrolling: touch; padding: 12px 0; display: block; white-space: nowrap; }
    .sub-nav ul { display: inline-flex; justify-content: center; min-width: 100%; padding: 0 20px; gap: 20px; }
    .sub-nav::-webkit-scrollbar { display: none; }
    .contact-row { flex-direction: column; gap: 5px; } .contact-divider { display: none; }
}
@media (max-width: 480px) { .section-title { font-size: 1.4rem; } .tag { font-size: 0.75rem; } .room-photo-slider { aspect-ratio: 1 / 1; } }

/* --- ABURA 品牌故事專屬樣式 --- */
.abura-story-section { padding: 100px 20px; background-color: #f6f5f0; text-align: center; }
.abura-container { max-width: 850px; margin: 0 auto; }
.abura-title { font-size: 2rem; letter-spacing: 0.4rem; font-weight: 500; margin-bottom: 10px; font-family: 'Playfair Display', 'Noto Serif TC', serif; }
.abura-title .jp-sub { font-size: 1.1rem; color: #8d7b70; font-weight: normal; display: block; margin-top: 5px; letter-spacing: 0.2rem; }
.abura-slogan { font-size: 1.2rem; color: #555; margin: 25px 0 40px 0; font-weight: 300; letter-spacing: 3px; }
.abura-divider { width: 40px; height: 1px; background-color: #ccc; margin: 0 auto 40px auto; border: none; }
.abura-desc-zh { text-align: justify; margin-bottom: 50px; }
.abura-desc-zh p { margin-bottom: 20px; line-height: 2; }
.abura-desc-zh strong { color: #2c2c2c; border-bottom: 1px solid #8d7b70; padding-bottom: 2px; }
.abura-desc-en { text-align: justify; font-size: 0.9rem; color: #777; border-top: 1px solid #e0ddd5; padding-top: 40px; font-style: italic; line-height: 1.8; }
.abura-highlight { color: #8d7b70; font-weight: 600; }
@media (max-width: 768px) { .abura-story-section { padding: 60px 20px; } .abura-title { font-size: 1.6rem; } .abura-slogan { font-size: 1rem; } .abura-desc-zh, .abura-desc-en { text-align: center; } }

/* --- 頁尾調整：縮短距離 + 淺色英文副標 --- */
.footer-logo { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 1.5rem; letter-spacing: 0.5rem; font-weight: 500; color: #2c2c2c; font-family: 'Noto Serif TC', serif; margin-bottom: 12px; text-align: center; }
.footer-logo-en { font-size: 0.8rem; letter-spacing: 0.8rem; font-family: 'Playfair Display', serif; color: #bbb; text-transform: uppercase; padding-left: 0.8rem; }
.footer-contact-info { display: flex; flex-direction: column; gap: 6px; font-size: 0.85rem; color: #666; margin-bottom: 15px; }
.footer-social { display: flex; gap: 40px; justify-content: center; margin-top: 5px; }

/* --- 游山丸水大圖上方：橫線 + 文字設計 --- */
.wander-image-section { position: relative; display: block; padding-top: 205px; padding-bottom: 20px; background-color: #f6f5f0; text-align: center; }
.wander-image-section::before { content: ""; display: block; width: 100%; height: 1px; background-color: #8d7b70; position: absolute; top: 0px; left: 0; }
.wander-image-section::after {
    content: "文旅度假"; display: block; position: absolute; top: 75px; left: 50%; transform: translateX(-50%);
    font-family: 'Noto Serif TC', serif; font-size: 2.2rem; font-weight: 300; color: #333333; letter-spacing: 0.5rem; margin-right: -0.5rem;
    white-space: nowrap; line-height: 1;
}

/* 文旅度假 區塊樣式 */
.culture-retreat-section { background-color: #f5f4f0; padding: 0; text-align: center; }
.line-container { width: 80%; margin: 0 auto; }
.full-line { border: 0; border-top: 1px solid #a89a8e; margin: 0; }
.text-container { margin-top: 45px; margin-bottom: 45px; }
.retreat-title { font-family: 'Noto Serif TC', serif; font-size: 2.2rem; font-weight: 300; letter-spacing: 1.2rem; color: #333; margin-right: -1.2rem; line-height: 1; }
@media (max-width: 768px) { .culture-retreat-section { padding: 60px 0; } .retreat-title { font-size: 1.6rem; letter-spacing: 0.6rem; } }

.photo-grid-80 { background-color: #f5f4f0; padding: 0 0 100px 0; width: 100%; }
.grid-inner-wrapper { width: 80%; margin: 0 auto; display: flex; gap: 30px; }
.photo-column { flex: 1; }
.aspect-box { width: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.aspect-box img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s ease; }
.aspect-box img:hover { transform: scale(1.03); }

@media (max-width: 768px) {
    .culture-retreat-section { padding: 0 !important; }
    .culture-retreat-section .text-container { margin-top: 35px !important; margin-bottom: 35px !important; }
    .retreat-title { font-size: 1.6rem !important; letter-spacing: 0.6rem !important; margin-right: -0.6rem !important; line-height: 1.2 !important; }
    .photo-grid-80 { padding: 0 0 60px 0 !important; }
    .grid-inner-wrapper { width: 90% !important; flex-direction: column !important; gap: 20px !important; margin: 0 auto !important; }
    .photo-column { width: 100% !important; flex: none !important; }
    .aspect-box { width: 100% !important; aspect-ratio: 4 / 3 !important; }
    .line-container { width: 90% !important; }
}

.explore-more-container { width: 100%; text-align: center; background-color: #f5f4f0; margin-top: -25px; padding-bottom: 60px; }
.explore-btn-standard { text-decoration: none; color: #333; font-size: 1.2rem; border-bottom: 1px solid #333; padding-bottom: 6px; letter-spacing: 1px; font-family: 'Noto Serif TC', serif; transition: all 0.3s ease; display: inline-block; }
.explore-btn-standard:hover { color: #8d7b70; border-bottom-color: #8d7b70; }
@media (max-width: 768px) { .explore-more-container { margin-top: 20px !important; padding-bottom: 50px !important; } }


/* ============================================================
   2. 各頁面 HTML 提取 CSS 分類
   ============================================================ */

/* --- 2-1. Index.html 提取內容 --- */
.detail-content a, .item-info a { transition: all 0.4s ease; color: #333; border-bottom: 1px solid #333; }
.detail-content a:hover, .item-info a:hover { color: #8d7b70 !important; border-bottom-color: #8d7b70 !important; }
.photo-column .aspect-box { position: relative; overflow: hidden; border-radius: 4px; }
.photo-column .aspect-box img { width: 100%; height: 100%; display: block; object-fit: cover; transition: transform 2s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
.embedded-white-btn {
    position: absolute; left: 50%; transform: translateX(-50%); bottom: 25px; background-color: rgba(255, 255, 255, 0.45); 
    backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.35);
    color: #1a1a1a; width: fit-content; padding: 10px 25px; font-family: 'Noto Serif TC', serif; font-size: 0.95rem; font-weight: 500;
    letter-spacing: 4px; text-align: center; text-decoration: none; cursor: pointer; transition: all 0.5s ease; z-index: 5;
    box-sizing: border-box; border-radius: 2px; white-space: nowrap;
}
.embedded-white-btn:hover { background-color: rgba(255, 255, 255, 0.8) !important; color: #8d7b70 !important; letter-spacing: 5px; box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3); }
.explore-btn-standard { transition: all 0.4s ease; }
.explore-btn-standard:hover { color: #8d7b70 !important; border-color: #8d7b70 !important; }
.photo-column .aspect-box:hover img { transform: scale(1.05); }
@media (max-width: 768px) { .embedded-white-btn { padding: 8px 18px; font-size: 0.85rem; letter-spacing: 3px; bottom: 20px; } }

/* --- 2-2. Wander.html 提取內容 --- */
#room-section { padding-bottom: 20px !important; }
#room-section .section-title { margin-bottom: 5px !important; }
#room-section .section-desc { margin-bottom: 5px !important; }
#dining-section .section-title, #facility-section .section-title { margin-bottom: 5px !important; }
#dining-section .section-desc, #facility-section .section-desc { margin-bottom: 10px !important; }
#dining-section .room-display-grid, #dining-section div[style*="grid"], #facility-section div[style*="grid"] { margin-top: 30px !important; }
#notice-section .section-title { margin-bottom: 5px !important; }
#notice-section p.section-desc { margin-bottom: 5px !important; padding-bottom: 10px !important; }
#notice-section p.section-desc + img { margin-top: 10px !important; display: block !important; }
#map-section { margin-top: 100px !important; display: block !important; clear: both; }
#map-section .section-title { margin-bottom: 5px !important; }
#map-section .section-desc { margin-bottom: 15px !important; }
#map-section iframe { margin-top: 10px !important; }
.detail-content .tag { margin-bottom: 5px !important; }

/* --- 2-3. Rooms-list.html 提取內容 --- */
.rooms-header-section { min-height: 45vh; background-color: #8d7b70; display: flex; flex-direction: column; justify-content: center; padding: 120px 0 60px 0; color: #f6f5f0; }
.added-title { font-size: 2.2rem; font-weight: 300; margin-top: 60px; margin-bottom: 40px; color: #2c2c2c; letter-spacing: 2px; scroll-margin-top: 150px; }
.room-display-grid { width: 90%; margin: 0 auto 40px auto; display: grid; gap: 15px; }
@media (min-width: 769px) { .room-grid-three { grid-template-columns: repeat(3, 1fr); } .room-grid-two { grid-template-columns: repeat(2, 1fr); margin-bottom: 100px; } }
.room-card { background: #fff; border: 1px solid #eee; padding-bottom: 35px; text-align: left; }
.room-photo-slider { position: relative; width: 100%; aspect-ratio: 3.5 / 4; overflow: hidden; margin-bottom: 25px; background: #eee; }
.photo-track { display: flex; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); height: 100%; width: 100%; }
.photo-track img { width: 100%; height: 100%; object-fit: cover; flex-shrink: 0; }
.slider-btn { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(0,0,0,0.3); color: white; border: none; width: 45px; height: 45px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 10; opacity: 0; transition: 0.3s; }
/* 修改原本的設定，增加 .is-focused 觸發條件 */
.room-card:hover .slider-btn,
.room-card.is-focused .slider-btn { opacity: 1; background: rgba(0,0,0,0.6); pointer-events: auto; /* 確保顯示時可以點擊 */}
/* 針對行動裝置的額外優化 */
@media (max-width: 1024px) {
    .slider-btn {
        opacity: 0;
        transition: opacity 0.4s ease; /* 讓箭頭出現時有淡入感 */
        pointer-events: none; /* 隱藏時防止誤觸 */
    }
}
.prev-btn { left: 15px; } .next-btn { right: 15px; }
.room-card h3 { padding: 0 25px; font-size: 1.5rem; font-weight: 400; margin-bottom: 15px; color: #333; }
.room-amenities { list-style: none; padding: 0 25px; margin: 0; }
.room-amenities-title { font-weight: 500; margin-bottom: 10px; color: #888; font-size: 0.9rem; border-bottom: 1px solid #eee; padding-bottom: 5px; }
.room-amenities li { font-size: 0.9rem; color: #666; margin-bottom: 5px; position: relative; padding-left: 15px; }
.room-amenities li::before { content: "•"; position: absolute; left: 0; color: #aaa; }
.gallery-slider { width: 90%; margin: 0 auto; overflow: hidden; position: relative; aspect-ratio: 16 / 9; }
.gallery-container { display: flex; transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1); height: 100%; }
.gallery-item { flex: 0 0 100%; height: 100%; }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 768px) { .gallery-slider { width: 100%; aspect-ratio: 4 / 3; } }

/* --- 2-4. Gulu.html 提取內容 --- */
.navbar { position: fixed; display: flex; justify-content: center; align-items: center; }
.logo { position: absolute !important; left: 50% !important; transform: translateX(-50%) !important; margin: 0 !important; }
.menu-toggle { position: absolute; left: 60px; }
.gulu-future-section { padding: 80px 20px; background-color: #ffffff; font-family: 'Noto Serif TC', serif !important; }
.da-container { max-width: 1200px; margin: 0 auto; }
.da-header { text-align: center; margin-bottom: 60px; }
.da-label { display: block; font-size: 0.75rem; color: #8d7b70; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 10px; font-family: 'Noto Serif TC', serif; }
.da-main-title { font-size: 2rem; font-weight: 500; color: #1a1a1a; margin-bottom: 20px; font-family: 'Noto Serif TC', serif; }
.da-divider { width: 40px; height: 1px; background-color: #8d7b70; margin: 0 auto; }
.da-facility-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px; }
.da-card { border: 1px solid #eeeeee; padding: 40px; background-color: #fff; display: flex; flex-direction: column; justify-content: space-between; transition: all 0.3s ease; min-height: 300px; }
.da-card:hover { box-shadow: 0 15px 40px rgba(0, 0, 0, 0.05); border-color: #8d7b70; transform: translateY(-5px); }
.da-tag { font-size: 0.7rem; background-color: #f8f8f8; color: #888; padding: 3px 10px; letter-spacing: 1px; margin-bottom: 20px; display: inline-block; font-family: 'Noto Serif TC', serif; }
.da-item-name { font-size: 1.4rem; font-weight: 500; margin-bottom: 15px; color: #222; font-family: 'Noto Serif TC', serif; }
.da-description { font-size: 0.95rem; color: #666; line-height: 1.8; text-align: justify; font-family: 'Noto Serif TC', serif; }
.coming-soon-wrapper { width: 80%; margin: 80px auto 0 auto; padding: 100px 0; border-top: 1px solid #eee; text-align: center; }
.coming-soon-text { font-family: 'Playfair Display', serif; font-style: italic; color: #214b21; opacity: 0.8; font-size: clamp(2.5rem, 6vw, 5.5rem); letter-spacing: clamp(4px, 1.5vw, 15px); white-space: nowrap; }
@media (max-width: 768px) { .menu-toggle { left: 20px; } .coming-soon-wrapper { width: 90%; padding: 60px 0; } .da-description { text-align: center; } }

/* --- 2-5. Hione.html 提取內容 --- */
.dongao-future-section { padding: 80px 20px; background-color: #ffffff; font-family: 'Noto Serif TC', serif !important; }
.hione-da-label { display: block; font-size: 0.75rem; color: #bfa37e; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 10px; font-family: 'Noto Serif TC', serif; }
.hione-da-divider { width: 40px; height: 1px; background-color: #bfa37e; margin: 0 auto; }
.hione-da-card:hover { border-color: #bfa37e; }
.hione-coming-soon-text { font-family: 'Playfair Display', serif; font-style: italic; color: #13406e!important; opacity: 0.8; font-size: clamp(2.5rem, 6vw, 5.5rem); letter-spacing: clamp(4px, 1.5vw, 15px); white-space: nowrap; }


/* --- 2-6. Hiring.html 提取內容 --- */
.hiring-hero-section { padding: 60px 0; background-color: #f6f5f0; text-align: center; }
.hiring-container { width: 75%; margin: 0 auto; position: relative; }
.hiring-image-wrapper { position: relative; width: 100%; aspect-ratio: 7 / 3; overflow: hidden; }
.hiring-image-wrapper img { width: 100%; height: 100%; display: block; object-fit: cover; }
.hiring-overlay-text { position: absolute; top: 50%; left: 12%; transform: translateY(-50%); color: #fff; text-shadow: 0 2px 15px rgba(0,0,0,0.4); font-family: 'Noto Serif TC', serif; font-size: clamp(1.8rem, 5vw, 3.5rem); letter-spacing: 0.8rem; font-weight: 500; pointer-events: none; line-height: 1.2; }
.philosophy-section { padding: 160px 0 60px 0; background-color: #f6f5f0; text-align: center; }
.philosophy-content { max-width: 850px; margin: 0 auto; }
.philosophy-tag { font-size: 0.8rem; letter-spacing: 0.3rem; color: #8d7b70; display: block; margin-bottom: 20px; font-family: 'Playfair Display', serif; }
.philosophy-title { font-family: 'Noto Serif TC', serif; font-size: 2.2rem; font-weight: 500; letter-spacing: 0.5rem; color: #2c2c2c; margin-bottom: 40px; }
.philosophy-desc { font-size: 1.1rem; line-height: 2.2; color: #555; text-align: justify; margin-bottom: 0; padding: 0 20px; }
.philosophy-desc strong { color: #8d7b70; font-weight: 500; }
.recruitment-section { padding: 40px 0 120px 0; background-color: #f6f5f0; }
.recruitment-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; text-align: left; }
.dept-title { font-family: 'Noto Serif TC', serif; font-size: 2rem; font-weight: 500; margin-bottom: 40px; color: #2c2c2c; }
.job-item { border-bottom: 1px solid #e0ddd5; margin-bottom: 5px; }
.job-toggle { display: none; }
.job-label { display: flex; align-items: center; padding: 20px 0; cursor: pointer; font-size: 1.2rem; font-weight: 500; color: #333; transition: color 0.3s; }
.job-label:hover { color: #8d7b70; }
.job-arrow { margin-right: 15px; font-size: 0.9rem; color: #24929c; display: inline-block; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); transform: scaleX(1); }
.job-arrow::before { content: "❯"; }

/* 優化後的絲滑動畫邏輯 */
.job-content { max-height: 0; overflow: hidden; 
    /* 縮短時間至 0.3s，使用自定義貝茲曲線讓收回起始動作更快 */
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1); }
.content-inner { padding: 0 0 30px 35px; font-size: 0.95rem; line-height: 1.8; color: #666; }

/* 當 radio 被選中時 (展開) */
.job-toggle:checked ~ .job-content {/* 數值設得接近內容高度會讓收回更即時絲滑 */max-height: 1200px; 
    transition: max-height 0.5s cubic-bezier(0.4, 0, 0.2, 1);}
.job-toggle:checked + .job-label .job-arrow {transform: rotate(90deg);}
.job-toggle:checked ~ .job-label .job-arrow::before { content: "—"; }

@media (max-width: 1024px) { .hiring-container { width: 85%; } .recruitment-grid { gap: 40px; } }
@media (max-width: 768px) {
    .hiring-container { width: 90%; } .philosophy-section { padding-top: 100px; } .philosophy-title { font-size: 1.6rem; }
    .hiring-overlay-text { left: 8%; letter-spacing: 0.4rem; } .hiring-image-wrapper { aspect-ratio: 7 / 3; }
    .recruitment-grid { grid-template-columns: 1fr; gap: 60px; } .dept-title { font-size: 1.6rem; } .job-label { font-size: 1.1rem; }
}
.contact-join-section { padding: 80px 0 120px 0; background-color: #f6f5f0; }
.contact-content-align-left { width: 100%; text-align: left; }
.contact-title { font-family: 'Noto Serif TC', serif; font-size: 2.3rem; font-weight: 500; color: #2c2c2c; margin-bottom: 40px; letter-spacing: 2px; }
.contact-message { font-family: 'Noto Serif TC', serif; font-size: 1.15rem; line-height: 2; color: #333; margin-bottom: 50px; }
.contact-methods { display: flex; flex-direction: column; gap: 25px; }
.contact-method-item { display: flex; align-items: center; gap: 20px; }
.method-icon { font-size: 1.3rem; color: #24929c; width: 30px; text-align: center; }
.method-text a { text-decoration: none; font-size: 1.25rem; color: #2c2c2c; font-weight: 500; transition: color 0.3s ease; }
.method-text a:hover { color: #8d7b70; }
@media (max-width: 768px) {
    .contact-join-section { padding: 60px 0 100px 0; } .contact-title { font-size: 1.8rem; }
    .contact-message { font-size: 1rem; br { display: none; } } .method-text a { font-size: 1.1rem; }
}
.hiring-image-wrapper img { opacity: 0; transform: scale(0.95); transition: transform 1.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 1.5s ease; }
.hiring-image-wrapper img.active { opacity: 1; transform: scale(1.05); }
@media (hover: hover) { .hiring-image-wrapper:hover img.active { transform: scale(1.1); transition: transform 0.8s ease; } }

/* 福利區塊樣式 */
.abura-benefits {font-family: "Noto Serif TC", serif; background-color: #f6f5f0; padding: 60px 0; color: #444; max-width: 65%; margin: 0 auto; }
.page-title {font-size: 36px; letter-spacing: 4px; margin-bottom: 60px; font-weight: 400;}
.benefit-item {display: flex; align-items: center; padding: 25px 0; border-bottom: 1px solid #eaeaea; transition: background-color 0.3s ease; cursor: pointer; }
.symbol {color: #d1d1d1; font-size: 16px; font-weight: 300; margin-right: 25px; transition: color 0.3s ease;}
.content {font-size: 18px; letter-spacing: 0.5px; line-height: 1.5;}
.benefit-item:hover {background-color: rgba(0, 0, 0, 0.015); }
.benefit-item:hover .symbol {color: #455a64; }

@media (max-width: 768px) {
    .abura-benefits {max-width: 90%; padding: 40px 0;}
    .page-title {font-size: 28px; margin-bottom: 30px;}
    .content {font-size: 16px;}
    .symbol {margin-right: 15px; font-size: 14px;}
}
@media (max-width: 375px) { .content {font-size: 15px;} }

/* --- 2-7. About.html 提取內容 (含聯絡資訊 CSS) --- */
.footer-split-content { display: flex; justify-content: space-between; align-items: flex-start; max-width: 1100px; width: 90%; margin: 0 auto !important; text-align: left; padding-bottom: 40px; flex-wrap: wrap; gap: 30px; }
.footer-left-info { flex: 1; min-width: 280px; }
.footer-left-info .footer-logo { text-align: left !important; margin: 0 !important; padding: 0 !important; display: block; }
.footer-contact-info-vertical { margin: 20px 0; display: flex; flex-direction: column; gap: 12px; }
.contact-item { font-size: 0.95rem; letter-spacing: 1px; color: #555; word-break: break-all; }
.footer-right-join { flex: 1; text-align: right; min-width: 200px; font-family: 'Noto Serif TC', serif; }
.join-title { font-size: 1.6rem; font-weight: 500; margin-bottom: 15px; color: #2c2c2c; letter-spacing: 3px; }
.join-item { font-size: 1.0rem; line-height: 2; color: #555; display: block; letter-spacing: 1px; text-decoration: none; transition: color 0.3s ease; }
.join-item:hover { color: #8d7b70; }
.footer-copyright-wrap { max-width: 1100px; width: 90%; margin: 0 auto !important; border-top: 1px solid #e0ddd5; padding-top: 25px; text-align: left; }
.footer-copyright { color: #999; font-size: 0.8rem; letter-spacing: 1px; }
@media (max-width: 1024px) { .footer-split-content, .footer-copyright-wrap { margin: 0 auto; width: 90%; } }
@media (max-width: 768px) {
    .footer-split-content { flex-direction: column; text-align: left; gap: 50px; }
    .footer-right-join { text-align: left; padding-bottom: 20px; }
    .footer-contact-info-vertical { align-items: flex-start; }
    .footer-social { justify-content: flex-start !important; }
}

/* --- 修正主導覽預訂文字置右 --- */
.navbar {display: flex !important;justify-content: space-between !important;align-items: center !important;}
.reserve-link {margin-left: auto !important;}

/* 針對有特殊 Logo 置中處理的頁面，確保預訂按鈕依然在右側 */
.destination-nav .reserve-link,
.scrolled .reserve-link {position: absolute !important;right: 60px !important;}

@media (max-width: 768px) {
    .destination-nav .reserve-link,
    .scrolled .reserve-link {right: 20px !important;}}



/* ============================================================
   3. 法律條款頁面與頁尾連結整合 (與 About.html 同步)
   ============================================================ */

/* 法律內容容器佈局：同步 About.html 寬度與偏移量 */
.legal-content-wrap { max-width: 1100px; width: 90%; margin: 0 auto 0 5%; text-align: left; }

/* 法律章節樣式：與 About.html 字體與顏色一致 */
.legal-section { margin-bottom: 80px; }
.legal-section h2 { font-size: 1.8rem; color: #2c2c2c; margin-bottom: 30px; border-bottom: 1px solid #e0ddd5; padding-bottom: 15px; font-weight: 300; letter-spacing: 2px; font-family: 'Playfair Display', 'Noto Serif TC', serif; }
.legal-section h3 { font-size: 1.1rem; color: #2c2c2c; margin: 40px 0 15px 0; font-weight: 500; letter-spacing: 1px; }
.legal-section p, .legal-section li { color: #555; line-height: 2.2; font-size: 0.95rem; margin-bottom: 15px; }

/* 列表樣式：使用品牌深褐色 */
.legal-section ul { padding-left: 20px; list-style-type: none; }
.legal-section ul li::before { content: "•"; color: #8d7b70; display: inline-block; width: 1em; margin-left: -1em; font-weight: bold; }

/* 頁內連結樣式 */
.legal-section a { color: #24929c; text-decoration: none; border-bottom: 1px solid rgba(36, 146, 156, 0.3); transition: 0.3s; }
.legal-section a:hover { border-bottom: 1px solid #0f7983; }

/* 日期樣式 */
.last-update { font-size: 0.85rem; color: #888; text-align: left; margin-bottom: 50px; letter-spacing: 1px; }

/* 頁尾法律連結顏色：與 About.html 版權灰色統一 */
.footer-legal-link { color: #999; text-decoration: none; margin-left: 8px; transition: color 0.3s ease;white-space: nowrap; }
.footer-legal-link:hover { color: #8d7b70; }
.footer-divider { color: #e0ddd5; margin-left: 8px; }

/* --- 修改/新增 RWD：處理手機版換行與邊距對齊 --- */
@media (max-width: 1024px) { 
    .legal-content-wrap, .footer-copyright-wrap { width: 90%; margin: 0 auto 0 5% !important; } /* 強制維持 5% 靠左偏移 */
}
@media (max-width: 768px) {
    .footer-copyright { justify-content: flex-start; }
    .footer-center-content .footer-copyright { justify-content: center; }
}
@media (max-width: 480px) {
    .footer-divider { display: none; } /* 極窄螢幕隱藏分隔線，讓連結整塊掉到下一行 */
    .footer-legal-link { margin-left: 0; width: 100%; } 
}

/* 移除自動電話連結樣式並同步規格 */
a[href^="tel"] { color: inherit !important; text-decoration: none !important; font-size: inherit !important; font-family: inherit !important; letter-spacing: inherit !important; }


/* --- 僅針對首頁的新增三欄排版 --- */
.home-page .footer-new-columns {display: flex;gap: 60px; justify-content: flex-end; /* 桌機版依然保持靠右 */flex-wrap: wrap;}
/* 每個區塊的預設設定 (桌機版) */
.home-page .footer-column-item {text-align: right;min-width: fit-content;flex-shrink: 0;}
.home-page .footer-column-item .join-title {font-size: 1.6rem;font-family: 'Noto Serif TC', serif;font-weight: 500;margin-bottom: 15px;color: #2c2c2c;letter-spacing: 3px;white-space: nowrap; }
.home-page .footer-column-item .join-item {font-size: 1.0rem;line-height: 2;color: #555;display: block;letter-spacing: 1px;text-decoration: none;white-space: nowrap; }
/* --- 修正全螢幕左右邊距對稱 --- */
.home-page .footer-split-content,
.home-page .footer-copyright-wrap {max-width: 1200px; /* 這裡的數值可依需求微調，建議與你網頁主體寬度一致 */width: 90%;margin: 0 auto !important; /* 關鍵：強制水平置中，抵銷原本的 margin-left: 5% */padding-left: 0;padding-right: 0;}
/* --- 隱藏首頁原本重複的右側區塊 --- */
.home-page .footer-right-join {display: none !important;}
/* ============================================================
   關鍵修改：當畫面縮小向下排版時 (對標附圖排版)
   ============================================================ */
@media (max-width: 1024px) {
    .home-page .footer-new-columns {
        flex-direction: column;    /* 強制改為垂直排列 */
        gap: 30px;                 /* 區塊與區塊之間的間距 */
        justify-content: flex-start;
        width: 100%;
        margin-top: 40px;          /* 增加與上方 Logo 區塊的距離 */
    }

    .home-page .footer-column-item {
        text-align: left;          /* 關鍵：改為靠左對齊，如附圖 */
        width: 100%;
    }

    .home-page .footer-column-item .join-title {
        text-align: left;          /* 標題靠左 */
        margin-bottom: 20px;
    }

    .home-page .footer-column-item .join-item {
        text-align: left;          /* 內容小字靠左 */
    }
}



/* 假設你的左右箭頭類別分別為 .prev-btn 和 .next-btn */
/* 以及照片容器類別為 .room-photo-container */

@media (max-width: 1024px) {
    /* 1. 預設隱藏箭頭（透明度 0） */
    .prev-btn, .next-btn {
        opacity: 0;
        transition: opacity 0.3s ease; /* 增加淡入動畫 */
        pointer-events: none; /* 隱藏時不可點擊 */
    }

    /* 2. 當 JavaScript 偵測到容器進入視窗，加上 .is-focused 類別後顯示 */
    .room-photo-container.is-focused .prev-btn,
    .room-photo-container.is-focused .next-btn {
        opacity: 1;
        pointer-events: auto; /* 顯示後恢復點擊功能 */
    }
}