/* ═══════════════════════════════════════════════════════════════
   mobile.css — 手機版專用樣式
   所有規則都在 @media 裡面，100% 不影響桌面版
   ═══════════════════════════════════════════════════════════════ */

/* ────────────────────────────────────
   TABLET (≤ 768px)
   ──────────────────────────────────── */
@media (max-width: 768px) {

  /* ── Fix 1: 防止左右晃動（不破壞 sticky） ── */
  html {
    overflow-x: hidden;
    width: 100%;
  }
  body {
    overflow-x: clip;
    width: 100%;
  }

  /* ── 🔴 Fix 2: iPhone 瀏海 + 底部安全區域 ── */
  body {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .site-header {
    padding-top: env(safe-area-inset-top, 0);
  }
  .sticky-booking-bar {
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .mobile-nav {
    padding-top: env(safe-area-inset-top, 0);
    padding-bottom: env(safe-area-inset-bottom, 0);
  }

  /* ── Global: smoother scrolling & touch ── */
  html { -webkit-text-size-adjust: 100%; }
  * { -webkit-tap-highlight-color: transparent; }

  /* ── 🔴 Fix 3: 觸控手勢優化 ── */
  .focus-features,
  .featured-track,
  .showcase-grid,
  .unified-room-grid,
  .dynamic-room-grid-featured,
  .rooms-filter-tabs,
  .sc-grid,
  .forest-mood-track {
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Header: bigger on mobile for visibility ── */
  .nav-wrap { padding: 14px 0; }
  .site-header .logo { font-size: 1rem; }
  .brand-logo { height: 64px; }
  .nav-toggle-label { font-size: .92rem; font-weight: 700; }
  .nav-toggle-bars span { width: 22px; height: 2px; }

  /* ── 灣臥風格全螢幕選單 ── */
  .mobile-nav {
    position: fixed !important;
    inset: 0 !important;
    background: rgba(14, 22, 16, .97) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    z-index: 9999 !important;
    display: flex !important;
    opacity: 0;
    pointer-events: none;
    transition: opacity .4s cubic-bezier(.22, 1, .36, 1);
  }
  .mobile-nav.open {
    opacity: 1;
    pointer-events: all;
  }

  /* Close X button */
  .mobile-nav-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 44px;
    height: 44px;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: env(safe-area-inset-top, 0);
  }
  .mobile-nav-close span {
    position: absolute;
    width: 24px;
    height: 1.5px;
    background: rgba(255,255,255,.6);
    transition: background .3s;
  }
  .mobile-nav-close span:first-child { transform: rotate(45deg); }
  .mobile-nav-close span:last-child { transform: rotate(-45deg); }
  .mobile-nav-close:active span { background: #b8894a; }

  /* Inner layout */
  .mobile-nav-inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
    height: 100%;
    padding: 60px 24px;
    padding-top: calc(60px + env(safe-area-inset-top, 0));
    padding-bottom: calc(40px + env(safe-area-inset-bottom, 0));
    box-sizing: border-box;
    gap: 0 !important;
  }

  /* Logo */
  .mobile-nav-brand {
    margin-bottom: 36px;
    opacity: 0;
    transform: translateY(-12px);
    transition: opacity .5s ease .1s, transform .5s ease .1s;
  }
  .mobile-nav.open .mobile-nav-brand {
    opacity: 1;
    transform: translateY(0);
  }
  .mobile-nav-logo {
    height: 48px;
    filter: brightness(0) invert(1);
  }

  /* Nav links */
  .mobile-nav-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    margin-bottom: 40px;
  }
  .mobile-nav-links .mnl {
    font-family: 'Noto Serif TC', serif !important;
    font-size: 1.2rem !important;
    font-weight: 600 !important;
    color: rgba(255,255,255,.85) !important;
    text-decoration: none !important;
    letter-spacing: .12em !important;
    padding: 16px 24px !important;
    position: relative;
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .45s ease, transform .45s ease, color .25s ease;
    transition-delay: calc(var(--i) * .08s);
  }
  .mobile-nav.open .mnl {
    opacity: 1;
    transform: translateY(0);
  }
  .mnl::after {
    content: '';
    position: absolute;
    bottom: 8px;
    left: 50%;
    width: 0;
    height: 1px;
    background: #b8894a;
    transition: width .3s ease, left .3s ease;
  }
  .mnl:hover::after,
  .mnl:active::after {
    width: 60%;
    left: 20%;
  }
  .mnl:active { color: #b8894a !important; }

  /* Footer section */
  .mobile-nav-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .5s ease .5s, transform .5s ease .5s;
  }
  .mobile-nav.open .mobile-nav-footer {
    opacity: 1;
    transform: translateY(0);
  }

  .mobile-nav-footer-row {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .mobile-nav-line-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 999px;
    background: #06C755;
    color: #fff !important;
    font-size: .82rem !important;
    font-weight: 700;
    text-decoration: none !important;
    letter-spacing: .02em;
    transition: transform .2s;
  }
  .mobile-nav-line-btn:active {
    transform: scale(0.95);
  }
  .mobile-nav-line-btn svg { flex-shrink: 0; }

  .mobile-nav-phone {
    color: rgba(255,255,255,.5) !important;
    font-size: .84rem !important;
    text-decoration: none !important;
    letter-spacing: .04em;
    padding: 0 !important;
    transition: color .2s;
  }
  .mobile-nav-phone:active { color: #b8894a !important; }

  .mobile-nav-sub {
    margin-top: 2px;
  }
  .mobile-nav-sub a {
    color: rgba(255,255,255,.3) !important;
    font-size: .72rem !important;
    text-decoration: none !important;
    padding: 4px 8px !important;
  }
  .mobile-nav-sub a:active { color: rgba(255,255,255,.6) !important; }

  /* Hide old contact section if still present */
  .mobile-nav-contact { display: none !important; }

  /* ── 手機版取消垂直分頁吸附，改為流暢長頁面滾動 ── */
  html { scroll-snap-type: none; scroll-padding-top: 0; }
  .snap-container > section:not(.hero) { min-height: auto; scroll-snap-align: none; }
  .snap-container > .dark-divider { min-height: auto; scroll-snap-align: none; }
  .snap-container > .parallax-divider { scroll-snap-align: none; }
  .snap-container > .hero { scroll-snap-align: none; }
  .announcement-ticker { scroll-snap-align: none; }

  /* ── 跑馬燈跟隨標題列 ── */
  .announcement-ticker {
    top: 92px;
    transition: top .35s ease;
  }
  .announcement-ticker.ticker-top {
    top: 0 !important;
  }
  .nb-page { scroll-snap-align: none; min-height: auto; }

  /* ── Hero: 全部填滿手機螢幕 ── */
  .hero {
    min-height: 100vh !important;
    min-height: 100svh !important;
    padding: 72px 0 30px;
  }

  /* ── Page heroes: 全螢幕 + 圖片填滿 ── */
  .page-hero, .page-hero.compact-hero {
    padding: 90px 0 44px;
    min-height: 100vh !important;
    min-height: 100svh !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-sizing: border-box;
  }
  .hero-bg-wrap {
    position: absolute !important;
    inset: 0 !important;
    z-index: 0 !important;
    overflow: hidden !important;
  }
  .hero-bg-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
  }
  .hero-bg-overlay {
    position: absolute !important;
    inset: 0 !important;
  }
  /* 首頁影片也確保填滿 */
  .hero-video-wrap {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
  }
  .hero-video-wrap video {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }

  /* ── 關於頁面 Hero + CTA 填滿 ── */
  .ab-hero {
    min-height: 100vh !important;
    min-height: 100svh !important;
  }
  .ab-hero-video-wrap {
    position: absolute !important;
    inset: 0 !important;
    overflow: hidden !important;
  }
  .ab-hero-video-blur { display: none !important; }
  .ab-hero-video-main {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    position: absolute !important;
    inset: 0 !important;
  }
  .ab-cta {
    min-height: 100vh !important;
    min-height: 100svh !important;
    background-size: cover !important;
    background-position: center !important;
  }
  .ab-spa {
    min-height: auto !important;
    padding: 58px 0 64px !important;
  }
  .ab-spa-bg-ov {
    background: linear-gradient(180deg, rgba(14,22,16,.88) 0%, rgba(14,22,16,.8) 52%, rgba(14,22,16,.92) 100%) !important;
  }
  .ab-spa-inner {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
    padding: 0 20px !important;
    align-items: stretch !important;
  }
  .ab-spa-left {
    order: 1 !important;
    max-width: 560px !important;
    margin: 0 auto !important;
    text-align: left !important;
  }
  .ab-spa-left .ab-ey {
    margin-bottom: 12px !important;
    letter-spacing: .16em !important;
    line-height: 1.5 !important;
  }
  .ab-spa-left h2 {
    font-size: clamp(1.45rem, 7vw, 2rem) !important;
    line-height: 1.32 !important;
    margin-bottom: 8px !important;
  }
  .ab-spa-left .ab-line {
    margin: 16px 0 20px !important;
  }
  .ab-spa-left .ab-sl {
    font-size: .84rem !important;
    line-height: 1.7 !important;
    margin-bottom: 16px !important;
  }
  .ab-spa-left p {
    font-size: .88rem !important;
    line-height: 1.85 !important;
    margin-bottom: 12px !important;
  }
  .ab-spa-left .ab-gq {
    font-size: .96rem !important;
    line-height: 1.75 !important;
  }
  .ab-btn-spa {
    width: 100% !important;
    min-height: 46px !important;
    margin-top: 14px !important;
    padding: 12px 18px !important;
    text-align: center !important;
    box-sizing: border-box !important;
  }
  .ab-spa-right {
    order: 2 !important;
    width: 100% !important;
    max-width: 560px !important;
    margin: 0 auto !important;
  }
  .ab-spa-vid-main {
    aspect-ratio: 4 / 5 !important;
    max-height: 68vh !important;
    border-radius: 18px !important;
    box-shadow: 0 18px 46px rgba(0,0,0,.42) !important;
  }
  .ab-spa-vid-main video {
    object-fit: cover !important;
  }
  .hero-copy, .refined-copy, .immersive-copy {
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
  }
  .ab-bento-hiker-content .ab-ey {
    font-size: .62rem !important;
    letter-spacing: .14em !important;
    margin-bottom: 8px !important;
  }
  .ab-bento-hiker-title {
    font-size: clamp(1.25rem, 6vw, 1.65rem) !important;
    line-height: 1.25 !important;
    margin-bottom: 10px !important;
  }
  .ab-bento-hiker-copy {
    display: -webkit-box !important;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden !important;
    font-size: .78rem !important;
    line-height: 1.55 !important;
    margin-bottom: 14px !important;
  }
  .ab-bento-hiker-content .ab-btn {
    min-height: 40px !important;
    margin-top: 0 !important;
    padding: 10px 16px !important;
    font-size: .78rem !important;
  }
  .hero h1 { font-size: clamp(1.7rem, 7.2vw, 2.45rem); line-height: 1.22; margin-bottom: 8px; }
  .hero .lead { font-size: .84rem; max-width: 88%; line-height: 1.65; color: rgba(255,255,255,.85); margin-bottom: 8px; }
  .hero-divider { margin: 4px auto 10px; }
  .hero-badges, .room-badges, .immersive-badges {
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .hero-badges span { font-size: .66rem; padding: 4px 9px; }
  .actions, .refined-actions { justify-content: center; gap: 8px; flex-wrap: wrap; }
  .btn { padding: 11px 20px; font-size: .84rem; min-height: 44px; }
  .hero-sidecard, .luxury-sidecard, .immersive-sidecard { padding: 16px 16px 14px; margin-top: 12px; }
  .hero-sidecard h3, .luxury-sidecard h3, .immersive-sidecard h3 { font-size: 1rem; line-height: 1.45; margin-bottom: 8px; }
  .hero-sidecard ul, .luxury-sidecard ul, .immersive-sidecard ul { gap: 6px; }
  .hero-sidecard li, .luxury-sidecard li, .immersive-sidecard li { font-size: .8rem; line-height: 1.5; }

  /* Hero video: slightly darker on mobile for readability */
  .hero-overlay { background: linear-gradient(180deg, rgba(12,18,14,.3) 0%, rgba(12,18,14,.65) 100%); }

  .page-hero h1 { font-size: clamp(1.6rem, 7vw, 2.4rem); }
  .compact-hero { padding: 72px 0 36px; }

  /* ── Section spacing ── */
  .section { padding: 210px 0 !important; }
  .section-head { margin-bottom: 14px; }
  h2 { font-size: clamp(1.28rem, 5.2vw, 1.75rem); margin-bottom: 8px; line-height: 1.28; }
  h3 { font-size: .96rem; }
  .section-subtitle { font-size: .82rem; line-height: 1.55; }
  .eyebrow { font-size: .64rem; }

  /* ── 統一各區塊手機版間距（首頁專用） ── */
  .alt-section { padding: 210px 0 !important; }
  .final-cta-section { padding: 210px 0 !important; }
  .fm-section { padding: 210px 0 !important; }
  .seasonal-section { padding: 210px 0 !important; }

  /* ── 房型頁面：還原正常間距 ── */
  .room-intro-section { padding: 40px 0 !important; }
  .room-group-section { padding: 40px 0 !important; }
  .room-narrative-section { padding: 40px 0 !important; }
  .room-spotlight-section { padding: 40px 0 !important; }
  .room-editorial-section { padding: 40px 0 !important; }
  .rd-page .alt-section { padding: 40px 0 !important; }
  .room-group-section.alt-section { padding: 40px 0 !important; }

  /* ── Stay Focus: horizontal scroll cards ── */
  .signature-section,
  .refined-signature-section,
  .premium-focus-section {
    overflow-x: clip;
  }
  .focus-features {
    display: flex !important;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 12px;
    padding: 0 16px 4px;
    margin: 0 -16px;
    max-width: 100vw;
    box-sizing: border-box;
  }
  .focus-features::-webkit-scrollbar { display: none; }
  .focus-features .focus-link {
    min-width: 78%;
    max-width: 78%;
    flex-shrink: 0;
    scroll-snap-align: center;
  }
  .focus-features .stat-card,
  .focus-features .compact-stat-card {
    padding: 18px 16px;
    box-sizing: border-box;
    height: 100%;
  }
  .focus-features .stat-card h3,
  .focus-features .compact-stat-card h3 { font-size: .9rem; line-height: 1.4; margin-bottom: 6px; }
  .focus-features .stat-card p,
  .focus-features .compact-stat-card p { font-size: .8rem; line-height: 1.6; }
  .focus-features .stat-card .eyebrow,
  .focus-features .compact-stat-card .eyebrow { font-size: .6rem; }

  /* ── Atmosphere Grid: 2-column mosaic on mobile ── */
  .atmosphere-grid, .expanded-atmosphere-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto auto auto !important;
    gap: 8px !important;
  }
  .atmosphere-card-large {
    grid-column: 1 / -1 !important;
    min-height: 200px !important;
  }
  .atmosphere-card { min-height: 140px !important; border-radius: 14px !important; }
  .atmosphere-copy h3 { font-size: .92rem; }
  .atmosphere-copy .eyebrow { font-size: .62rem; }

  /* ── Homepage section compaction ── */
  .atmosphere-section .section-head,
  .featured-showcase .section-head,
  .seasonal-section .section-head { margin-bottom: 12px; }
  .forest-mood-shell { margin-top: 4px; margin-bottom: 0; }
  .forest-mood-card { flex: 0 0 88vw !important; height: 52vw !important; max-height: 300px !important; }

  /* ── Featured Rooms Carousel ── */
  .featured-carousel-shell { gap: 0; }
  .featured-head-row { flex-direction: column; align-items: flex-start; gap: 8px; }
  .featured-actions-wrap { width: 100%; }
  .featured-track, .showcase-grid {
    grid-auto-columns: 78% !important;
    gap: 12px !important;
    padding: 0 4% 6px !important;
  }
  .featured-slide { height: auto !important; }
  .room-showcase-card, .premium-showcase-card { height: auto !important; }
  .room-showcase-image { height: 168px; border-radius: 16px 16px 0 0; }
  .room-showcase-content { padding: 14px 14px 12px; }
  .room-showcase-content h3 { font-size: .94rem; line-height: 1.35; }
  .room-card-story { font-size: .8rem; line-height: 1.55; margin-bottom: 6px; }
  .feature-list { gap: 6px; margin-bottom: 10px; }
  .feature-list span, .tag, .vip-tag { font-size: .68rem; }
  .room-card-badge { padding: 4px 10px; font-size: .64rem; top: 10px; left: 10px; }
  .price-row { margin-top: 8px; }
  .dynamic-premium-section { padding-top: 210px !important; padding-bottom: 210px !important; }

  /* ── Rooms Page: Filter Tabs Mobile ── */
  .rooms-filter-nav { top: 92px; padding: 10px 0; }
  .rooms-filter-nav.ticker-top { top: 0; }

  /* 周邊景點 tab 也對齊 header 高度 */
  .nb-tabs-nav { top: 92px; }
  .nb-tabs-nav.ticker-top { top: 0 !important; }
  .rooms-filter-tabs {
    display: flex !important;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0 16px;
    flex-wrap: nowrap !important;
    justify-content: flex-start !important;
  }
  .rooms-filter-tabs::-webkit-scrollbar { display: none; }
  .rooms-filter-tab {
    flex-shrink: 0;
    padding: 10px 20px;
    font-size: .82rem;
    border-radius: 999px;
    white-space: nowrap;
    position: relative;
    overflow: hidden;
    transition: all .25s cubic-bezier(.4,0,.2,1);
  }
  .rooms-filter-tab.active {
    background: linear-gradient(135deg, #1b2b20, #2d4a35) !important;
    color: #fff !important;
    border-color: #1b2b20 !important;
    box-shadow: 0 4px 14px rgba(27,43,32,.25);
    transform: scale(1.05);
  }
  .rooms-filter-tab:not(.active):active {
    transform: scale(0.95);
    background: rgba(184,137,74,.08);
  }

  /* ── Rooms Page: Horizontal Swipe Cards ── */
  .unified-room-grid {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 16px !important;
    padding: 0 16px 16px !important;
    grid-template-columns: none !important;
  }
  .unified-room-grid::-webkit-scrollbar { display: none; }
  .unified-room-grid .room-card-enhanced {
    flex: 0 0 85%;
    scroll-snap-align: center;
    max-width: 85%;
  }
  .dynamic-room-grid-featured {
    display: flex !important;
    overflow-x: auto !important;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    gap: 16px !important;
    padding: 0 16px 16px !important;
    grid-template-columns: none !important;
  }
  .dynamic-room-grid-featured::-webkit-scrollbar { display: none; }
  .dynamic-room-grid-featured .room-card-enhanced {
    flex: 0 0 85%;
    scroll-snap-align: center;
    max-width: 85%;
  }
  .unified-room-grid::after,
  .dynamic-room-grid-featured::after {
    content: '';
    flex: 0 0 4px;
  }
  .room-card-enhanced {
    transition: transform .3s ease, box-shadow .3s ease;
  }
  .room-card-enhanced:active {
    transform: scale(0.98);
  }

  /* ── Dark Quote Divider ── */
  .dark-divider { padding: 210px 18px !important; }
  .dark-divider-quote { font-size: clamp(1.15rem, 4.6vw, 1.45rem); line-height: 1.48; }
  .dark-divider-eyebrow { font-size: .62rem; margin-bottom: 10px; }
  .dark-divider-sub { font-size: .74rem; }

  /* ── Dining + Pricing: stacked cards ── */
  .split-story, .refined-split-story {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .story-block.card.soft.tall { padding: 24px 20px; }
  .story-block h2 { font-size: 1.2rem; }
  .story-block p, .story-block li { font-size: .86rem; }
  .mini-price-list { margin: 16px 0; }
  .mini-price-list div { padding: 8px 0; }
  .mini-price-list strong { font-size: .86rem; }

  /* ── Seasonal: 2×2 grid ── */
  .season-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
    margin-top: 0 !important;
  }
  .season-card {
    padding: 18px 14px !important;
    border-radius: 16px !important;
  }
  .season-icon { font-size: 1.45rem !important; margin-bottom: 8px !important; }
  .season-label { font-size: .64rem !important; }
  .season-months { font-size: .74rem !important; margin-bottom: 8px !important; }
  .season-card h3 { font-size: .92rem !important; margin-bottom: 6px !important; }
  .season-card p { font-size: .78rem !important; line-height: 1.5 !important; margin-bottom: 10px !important; }
  .season-tags { gap: 4px !important; }
  .season-tags span { font-size: .64rem !important; padding: 3px 8px !important; }
  .seasonal-section { padding: 56px 0; }

  /* ── Parallax ── */
  .parallax-divider { height: 180px; background-attachment: scroll; }
  .parallax-divider-text { font-size: .68rem; bottom: 16px; letter-spacing: .08em; }

  /* ── YouTube ── */
  .yt-grid { grid-template-columns: 1fr !important; gap: 16px; }

  /* ── CTA Section ── */
  .final-cta { padding: 210px 20px !important; text-align: center; border-radius: 20px; }
  .final-cta h2 { font-size: 1.15rem; }
  .final-cta p { font-size: .86rem; }

  /* ── Room Cards (listing) ── */
  .refined-room-cards, .journey-grid,
  .compact-signature-cards, .unified-room-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .room-cover { height: 200px; border-radius: 16px 16px 0 0; }
  .room-cover-overlay, .room-cover-overlay-rich {
    left: 14px; right: 14px; bottom: 12px;
    padding: 10px 14px;
    border-radius: 12px;
  }
  .room-cover-overlay h2, .room-cover-overlay-rich h2 { font-size: 1.05rem; }
  .room-content, .refined-room-content { padding: 16px; }
  .room-summary { font-size: .84rem; line-height: 1.7; }
  .room-hover-summary { display: none; }

  /* ── Room Detail ── */
  .room-detail-hero { padding: 80px 0 36px; }
  .room-intro-grid, .room-spotlight-grid,
  .editorial-room-grid, .compact-room-narrative-grid,
  .room-narrative-grid { grid-template-columns: 1fr !important; }
  .room-spotlight-panel, .editorial-room-panel { position: static; border-radius: 16px; }
  .rg-main, .rg-main-slide img { min-height: 220px; border-radius: 16px; }
  .rg-thumbs { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .rg-thumb { border-radius: 8px; height: 56px; }
  .room-thumbnail-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .gallery-item img { height: 180px; border-radius: 12px; }
  .gallery-tabs { gap: 6px; flex-wrap: wrap; }
  .gallery-tab { padding: 8px 14px; font-size: .8rem; min-height: 36px; }

  /* Gallery magazine grid on mobile */
  .gallery-mag-grid {
    grid-template-columns: 1fr 1fr !important;
    grid-template-rows: auto !important;
    gap: 6px !important;
  }
  .gallery-mag-item-1 {
    grid-column: 1 / -1 !important;
    grid-row: auto !important;
    height: 200px !important;
  }
  .gallery-mag-item-2, .gallery-mag-item-3 { height: 150px !important; }
  .gallery-mag-item-4 { grid-column: 1 / -1 !important; height: 150px !important; }
  .gallery-bath-grid { grid-template-columns: 1fr 1fr !important; gap: 6px !important; }
  .gallery-bath-item { height: 150px !important; border-radius: 12px !important; }

  /* Amenity modal: full screen on mobile */
  .amenity-modal-box {
    width: 95vw !important;
    max-height: 85vh !important;
    border-radius: 16px !important;
    margin: auto;
  }
  .amenity-grid { grid-template-columns: 1fr !important; gap: 8px; }
  .amenity-modal-header { padding: 16px !important; }
  .amenity-modal-body { padding: 0 16px 16px !important; }

  /* Price row */
  .price-row, .room-price-row { flex-wrap: wrap; gap: 8px; }
  .room-rate-box { grid-template-columns: 1fr; }
  .feature-list { gap: 4px; flex-wrap: wrap; }
  .feature-list span { font-size: .74rem; padding: 4px 10px; }

  /* ── 🔴 Fix 4: Sticky booking bar + 安全區域 ── */
  .sticky-booking-inner {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    text-align: center;
    padding: 12px 16px !important;
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0)) !important;
  }
  .sticky-booking-info { justify-content: center; font-size: .84rem; }
  .sticky-booking-btn {
    width: 100%;
    text-align: center;
    justify-content: center;
    padding: 12px;
    font-size: .88rem;
    min-height: 44px;
  }

  /* ── Nearby Page ── */
  .attr-quick-nav { top: 52px; }
  .attr-quick-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .attr-quick-card { padding: 14px 8px; }
  .attr-quick-icon { font-size: 1.4rem; }
  .attr-quick-name { font-size: .78rem; }
  .attr-quick-dist { font-size: .68rem; }

  .attr-card, .attr-card-reverse {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
    direction: ltr !important;
  }
  .attr-gallery-main { aspect-ratio: 16/10; border-radius: 16px; }
  .attr-thumbs { gap: 6px; }
  .attr-distance-row { flex-direction: column; gap: 8px; }

  .nearby-dark-divider { padding: 48px 20px; }
  .nearby-dark-divider h2 { font-size: clamp(1.3rem, 5vw, 1.7rem); }
  .nearby-attraction-section { padding: 40px 0; }

  /* ── 🔴 Fix 5: Booking 表單全螢幕化 ── */
  .bk-quick { grid-template-columns: 1fr 1fr !important; gap: 8px; }
  .bk-quick a, .bk-quick button { padding: 14px 10px; font-size: .8rem; min-height: 44px; }

  /* 訂房 Modal: 全螢幕 App 體驗 */
  .bk-modal-box {
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    max-height: 100dvh !important;
    height: 100vh !important;
    height: 100dvh !important;
    border-radius: 0 !important;
    margin: 0 !important;
  }
  .bk-modal-head {
    padding: 16px !important;
    padding-top: calc(16px + env(safe-area-inset-top, 0)) !important;
    position: sticky;
    top: 0;
    z-index: 10;
    background: #fff;
    border-bottom: 1px solid #e8e4dc;
  }
  .bk-modal-body {
    padding: 0 16px 16px !important;
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0)) !important;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .bf-field label { font-size: .82rem; }
  .bf-field input, .bf-field select, .bf-field textarea {
    font-size: 16px;
    min-height: 44px;
  }
  .bf-row { grid-template-columns: 1fr !important; gap: 10px; }
  .bf-submit {
    min-height: 48px;
    font-size: .92rem;
    border-radius: 14px;
    position: sticky;
    bottom: 0;
    margin-top: 12px;
  }

  /* 確認彈窗 */
  .booking-confirm-card {
    width: 92vw;
    max-width: 420px;
    padding: 32px 24px;
    border-radius: 20px;
  }

  /* Calendar */
  .cal-layout { grid-template-columns: 1fr !important; gap: 16px; }
  .cal-box { border-radius: 16px; }
  .cal-nav { padding: 14px 16px; }
  .cal-month { font-size: .98rem; }
  .cal-nav-btn { width: 40px; height: 40px; min-height: 40px; }
  .cal-grid { padding: 0 8px 14px; gap: 3px; }
  .cal-day {
    padding: 6px 2px;
    min-height: 46px;
    font-size: .82rem;
    border-radius: 8px;
  }
  .cal-day:hover:not(.cal-empty):not(.cal-past) {
    transform: none;
    box-shadow: none;
  }
  .cal-weekdays { padding: 8px 8px 4px; }
  .cal-weekdays div { font-size: .68rem; }
  .cal-detail {
    border-radius: 16px;
    padding: 16px;
    min-height: auto;
  }
  .room-avail-item { padding: 10px; border-radius: 10px; font-size: .84rem; }
  .cal-legend { font-size: .7rem; }
  .cal-ldot { width: 7px; height: 7px; }

  /* Room picker cards in booking form */
  .room-pick-card {
    padding: 10px 12px !important;
    border-radius: 10px !important;
    font-size: .84rem !important;
  }

  /* Estimate box */
  #estimate-box { padding: 14px 16px; border-radius: 12px; font-size: .84rem; }

  /* Location section */
  .loc-map iframe { height: 260px !important; }
  .loc-dist-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  /* Contact */
  .contact-grid { grid-template-columns: 1fr !important; gap: 10px; }
  .contact-card { padding: 16px; border-radius: 14px; }

  /* ── Footer ── */
  .site-footer .container { flex-direction: column; gap: 12px; text-align: center; }

  /* ── Offers page ── */
  .offers-hero { min-height: 100vh !important; min-height: 100svh !important; padding: 80px 0 44px; }
  .offers-concept-grid,
  .offers-story-grid,
  .offers-story-grid-reverse { grid-template-columns: 1fr !important; gap: 20px; direction: ltr; }
  .offers-steps { flex-direction: column; align-items: center; }
  .offers-step-arrow { transform: rotate(90deg); margin: 0; }
  .offers-step { max-width: 100%; }

  /* ── Scroll-to-top button ── */
  .scroll-top-btn {
    width: 44px; height: 44px;
    border-radius: 50%;
    font-size: 1.1rem;
    box-shadow: 0 4px 16px rgba(0,0,0,.12);
    bottom: calc(16px + env(safe-area-inset-bottom, 0));
  }
}


/* ────────────────────────────────────
   SMALL PHONE (≤ 480px)
   ──────────────────────────────────── */
@media (max-width: 480px) {

  .container { width: min(1200px, 92%); }

  /* Hero */
  .hero { min-height: 100vh !important; min-height: 100svh !important; padding: 70px 0 40px; }
  .hero h1 { font-size: clamp(1.6rem, 8vw, 2.2rem); }
  .hero .lead { font-size: .84rem; max-width: 95%; }
  .btn { padding: 11px 18px; font-size: .82rem; }
  .brand-logo { height: 52px; }

  /* Ticker follows shorter header */
  .announcement-ticker { top: 80px; }

  /* Stay Focus: fuller cards on small phones */
  .focus-features .focus-link {
    min-width: 82%;
    max-width: 82%;
  }
  .focus-features .stat-card,
  .focus-features .compact-stat-card {
    padding: 16px 14px;
  }
  .focus-features .stat-card h3,
  .focus-features .compact-stat-card h3 { font-size: .86rem; }
  .focus-features .stat-card p,
  .focus-features .compact-stat-card p { font-size: .76rem; }

  /* Atmosphere: single column on very small */
  .atmosphere-grid, .expanded-atmosphere-grid {
    grid-template-columns: 1fr !important;
  }
  .atmosphere-card { min-height: 160px !important; }
  .atmosphere-card-large { min-height: 180px !important; }

  /* Featured rooms: wider cards */
  .featured-track, .showcase-grid {
    grid-auto-columns: 88% !important;
    gap: 10px !important;
  }
  .room-showcase-image { height: 170px; }

  /* Seasonal: still 2×2 but tighter */
  .season-card { padding: 14px 12px; }
  .season-card h3 { font-size: .86rem; }
  .season-card p { font-size: .74rem; -webkit-line-clamp: 3; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; }
  .season-tags span { font-size: .62rem; }

  /* Dark quote */
  .dark-divider { padding: 210px 16px !important; }
  .dark-divider-quote { font-size: 1.15rem; }

  /* CTA */
  .final-cta { padding: 210px 16px !important; }
  .final-cta h2 { font-size: 1.05rem; }

  /* Room cards */
  .room-cover { height: 180px; }
  .room-cover-overlay h2, .room-cover-overlay-rich h2 { font-size: .95rem; }

  /* Room detail */
  .rg-main, .rg-main-slide img { min-height: 200px; }
  .rg-thumbs { grid-template-columns: repeat(4, 1fr); }
  .rg-thumb { height: 48px; }
  .gallery-mag-item-1 { height: 180px !important; }
  .gallery-mag-item-2, .gallery-mag-item-3,
  .gallery-mag-item-4 { height: 130px !important; }

  /* Nearby */
  .attr-quick-card { padding: 12px 6px; }
  .attr-quick-icon { font-size: 1.2rem; }
  .attr-quick-name { font-size: .72rem; }

  /* Calendar */
  .cal-day { min-height: 42px; font-size: .78rem; padding: 4px 1px; }
  .cal-dot { width: 5px !important; height: 5px !important; }
  .cal-lbl { font-size: .58rem !important; }

  /* Booking quick actions */
  .bk-quick { grid-template-columns: 1fr !important; }
  .bk-quick a, .bk-quick button { padding: 12px 8px; font-size: .78rem; }

  /* Booking form room picker */
  .room-pick-card { padding: 8px 10px !important; font-size: .8rem !important; }

  /* Location distance cards */
  .loc-dist-grid { gap: 6px !important; }

  /* Parallax */
  .parallax-divider { height: 140px; }
  .parallax-divider-text { font-size: .62rem; }

  /* Nearby CTA */
  .nearby-cta-card { padding: 28px 16px; border-radius: 16px; }
}


/* ────────────────────────────────────
   VERY SMALL (≤ 360px) — SE, old phones
   ──────────────────────────────────── */
@media (max-width: 360px) {
  .hero h1 { font-size: 1.5rem; }
  .hero .lead { font-size: .8rem; }
  .btn { padding: 10px 14px; font-size: .78rem; }
  h2 { font-size: 1.25rem; }
  .season-grid { grid-template-columns: 1fr !important; }
  .cal-day { min-height: 38px; font-size: .74rem; }
  .bk-modal-box { width: 100vw; }
}


/* ────────────────────────────────────
   ACCESSIBILITY: 減少動態
   ──────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}