*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg-base:     #f6f0e2;
      --bg-card:     #faf6ee;
      --bg-dark:     #3a3530;
      --text-main:   #2e2a24;
      --text-mid:    #7a7060;
      --text-muted:  #a89e8a;
      --border-soft: rgba(100,80,50,0.12);
      --border-mid:  rgba(100,80,50,0.22);
      --accent:      #8c7355;
      --accent-light:#c4aa88;
      --radius: 10px;
    }

    html { scroll-behavior: smooth; }
    body { font-family: 'Noto Sans TC', sans-serif; background: var(--bg-base); color: var(--text-main); line-height: 1.7; top: 0 !important; }
    a { color: inherit; text-decoration: none; }

    /* ── Google Translate 橫幅補救 ── */
    body.translated-ltr, body.translated-rtl { margin-top: 0 !important; }
    .goog-te-banner-frame.skiptranslate { position: relative !important; }

    /* 讓 nav sticky 永遠在 Google 橫幅下方 */
    .s-nav { top: 0; transition: top 0.3s; }
    /* 當偵測到 Google 橫幅推擠 body 時，讓導覽列跟著往下移，避免蓋到內容 */
    body.has-gt-banner .s-nav { top: 40px; }

    /* ── Google Translate Widget 樣式 ── */
    #google_translate_element,
    #google_translate_element_mobile { display: inline-block; }

    .goog-te-gadget { font-size: 0 !important; }
    .goog-te-gadget .goog-te-combo {
      font-family: 'Noto Sans TC', sans-serif !important;
      font-size: 11px !important;
      color: var(--text-main) !important;
      background: transparent !important;
      border: 0.5px solid var(--border-mid) !important;
      border-radius: 2px !important;
      padding: 5px 6px !important;
      cursor: pointer; outline: none;
      letter-spacing: 0.04em;
      max-width: 115px;
    }
    .goog-te-gadget .goog-te-combo:hover { border-color: var(--accent) !important; }
    .goog-te-gadget > span > a, .goog-logo-link { display: none !important; }
    .goog-te-spinner-pos { display: none !important; }
   

    /* ── Nav ── */
    .s-nav {
      background: var(--bg-card);
      border-bottom: 0.5px solid var(--border-soft);
      position: sticky;
      z-index: 100;
    }
    .s-nav-inner {
      display: flex; align-items: center; justify-content: space-between;
      padding: 16px 40px;
    }
    .s-logo { font-family: 'Noto Serif TC', serif; font-size: 17px; font-weight: 600; letter-spacing: 0.1em; }
    .s-logo small { display: block; font-size: 9px; font-weight: 300; letter-spacing: 0.18em; color: var(--text-muted); font-family: 'Noto Sans TC', sans-serif; margin-top: 3px; }

    .s-links { display: flex; gap: 20px; align-items: center; }
    .s-links a { font-size: 12px; color: var(--text-mid); letter-spacing: 0.06em; transition: color 0.2s; }
    .s-links a:hover { color: var(--text-main); }

   

    .btn-main {
      background: var(--bg-dark); color: var(--bg-base);
      font-size: 11px; padding: 10px 20px; border-radius: 2px; border: none;
      cursor: pointer; letter-spacing: 0.12em; font-family: 'Noto Sans TC', sans-serif;
      transition: background 0.2s; white-space: nowrap; border: 1px solid #6a5e50;
    }
    .btn-main:hover { background: #4e4840; }

    /* Hamburger */
    .nav-toggle {
      display: none; flex-direction: column; justify-content: center;
      gap: 5px; width: 36px; height: 36px;
      background: none; border: none; cursor: pointer; padding: 4px; border-radius: 4px;
    }
    .nav-toggle span {
      display: block; width: 22px; height: 1.5px; background: var(--text-main);
      border-radius: 2px; transition: transform 0.28s ease, opacity 0.2s ease; transform-origin: center;
    }
    .nav-toggle.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
    .nav-toggle.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
    .nav-toggle.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

    .s-mobile-menu {
      display: none; flex-direction: column;
      background: var(--bg-card); border-top: 0.5px solid var(--border-soft);
      overflow: hidden; max-height: 0; transition: max-height 0.35s ease;
    }
    .s-mobile-menu.open { max-height: 480px; }
    .s-mobile-menu a {
      display: block; font-size: 13px; color: var(--text-mid);
      letter-spacing: 0.06em; padding: 15px 24px;
      border-bottom: 0.5px solid var(--border-soft); transition: background 0.15s;
    }
    .s-mobile-menu a:hover { background: rgba(100,80,50,0.05); color: var(--text-main); }
    .mobile-lang-row {
      display: flex; align-items: center; gap: 8px;
      padding: 14px 24px; border-bottom: 0.5px solid var(--border-soft);
    }
    .mobile-lang-row i { font-size: 14px; color: var(--accent-light); }
    .mobile-lang-row .goog-te-combo { max-width: 160px !important; font-size: 12px !important; }
    .s-mobile-menu .m-reserve {
      margin: 14px 24px 18px; text-align: center;
      background: var(--bg-dark); color: var(--bg-base);
      padding: 12px; border-radius: 2px; font-size: 12px;
      letter-spacing: 0.14em; border-bottom: none;
    }
    .s-mobile-menu .m-reserve:hover { background: #4e4840; }

    /* ── Hero ── */
    .s-hero { display: grid; grid-template-columns: 1fr 1fr; min-height: 540px; }

    .hero-l {
      position: relative; overflow: hidden;
      display: flex; flex-direction: column; justify-content: flex-end;
      padding: 56px 48px; min-height: 540px;
    }
    .hero-bg-slide {
      position: absolute; inset: 0;
      background-size: cover; background-position: center;
      opacity: 0; transition: opacity 1.4s ease; z-index: 0;
    }
    .hero-bg-slide.active { opacity: 1; }
    .hero-overlay {
      position: absolute; inset: 0;
      background: rgba(20,14,8,0.52); z-index: 1;
    }
    .hero-overlay-grad {
      position: absolute; inset: 0;
      background: linear-gradient(to bottom, transparent 40%, rgba(20,14,8,0.45) 100%);
      z-index: 1;
    }
    .hero-l-content { position: relative; z-index: 2; }

    .eyebrow { font-size: 9px; letter-spacing: 0.28em; color: rgba(246,240,226,0.62); text-transform: uppercase; margin-bottom: 20px; }
    .hero-title { font-family: 'Noto Serif TC', serif; font-size: 34px; font-weight: 300; line-height: 1.6; color: #f6f0e2; margin-bottom: 18px; text-shadow: 0 2px 24px rgba(0,0,0,0.3); }
    .hero-title strong { font-weight: 600; }
    .washi-line { width: 28px; height: 1px; background: var(--accent-light); margin: 18px 0; }
    .hero-desc { font-size: 13px; color: rgba(246,240,226,0.78); line-height: 2.1; max-width: 300px; margin-bottom: 32px; }

    .hero-dots { position: absolute; bottom: 24px; right: 28px; display: flex; gap: 7px; z-index: 2; }
    .hero-dot {
      width: 5px; height: 5px; border-radius: 50%;
      background: rgba(246,240,226,0.3); border: none; cursor: pointer; padding: 0;
      transition: background 0.3s, transform 0.3s;
    }
    .hero-dot.active { background: rgba(246,240,226,0.9); transform: scale(1.3); }

    .btn-outline {
      background: transparent; color: #f6f0e2; font-size: 11px; padding: 10px 22px;
      border-radius: 2px; border: 0.5px solid rgba(246,240,226,0.45); cursor: pointer;
      letter-spacing: 0.14em; font-family: 'Noto Sans TC', sans-serif; transition: background 0.2s, border-color 0.2s;
    }
    .btn-outline:hover { background: rgba(246,240,226,0.12); border-color: rgba(246,240,226,0.8); }

    .hero-r { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; background: var(--border-soft); overflow: hidden; }
    .h-img { overflow: hidden; position: relative; background: #d9cdb8; }
    .h-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.88; display: block; transition: transform 0.4s ease; }
    .h-img:hover img { transform: scale(1.05); }
    .h-img .lbl { position: absolute; bottom: 10px; left: 12px; font-size: 8px; letter-spacing: 0.2em; color: rgba(255,255,255,0.82); text-transform: uppercase; }

    /* ── Sections ── */
    .s-sec     { padding: 72px 40px; background: var(--bg-base); }
    .s-sec-alt { padding: 72px 40px; background: var(--bg-card); }
    .s-lbl { font-size: 9px; letter-spacing: 0.28em; color: var(--text-muted); text-transform: uppercase; margin-bottom: 10px; }
    .s-h2 { font-family: 'Noto Serif TC', serif; font-size: 24px; font-weight: 300; color: var(--text-main); line-height: 1.65; margin-bottom: 6px; }
    .s-body { font-size: 13px; color: var(--text-mid); line-height: 2.1; max-width: 560px; }

    /* Experience */
    .exp-grid {
      display: grid; grid-template-columns: repeat(3,1fr); gap: 1px;
      background: var(--border-soft); border: 0.5px solid var(--border-soft);
      border-radius: var(--radius); overflow: hidden; margin-top: 40px;
    }
    .exp-c { background: var(--bg-card); padding: 32px 26px; }
    .exp-c .eicon { font-size: 22px; color: var(--accent-light); margin-bottom: 16px; }
    .exp-c .etag { font-size: 8px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 10px; }
    .exp-c .etitle { font-family: 'Noto Serif TC', serif; font-size: 17px; color: var(--text-main); margin-bottom: 10px; }
    .exp-c .edesc { font-size: 12px; color: var(--text-mid); line-height: 2; }

    /* Rooms */
    .rooms-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 36px; }
    .r-card { background: var(--bg-card); border: 0.5px solid var(--border-soft); border-radius: var(--radius); overflow: hidden; cursor: pointer; transition: border-color 0.2s, transform 0.2s; }
    .r-card:hover { border-color: var(--border-mid); transform: translateY(-2px); }
    .r-img { height: 200px; background: #d9cdb8; position: relative; overflow: hidden; }
    .r-img img { width: 100%; height: 100%; object-fit: cover; opacity: 0.85; display: block; transition: transform 0.4s ease; }
    .r-card:hover .r-img img { transform: scale(1.04); }
    .r-badge { position: absolute; top: 10px; left: 10px; font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; background: rgba(246,240,226,0.88); color: var(--accent); padding: 3px 9px; border-radius: 2px; }
    .r-body { padding: 16px 18px; }
    .r-body h3 { font-size: 14px; font-weight: 500; margin-bottom: 6px; }
    .r-body p  { font-size: 12px; color: var(--text-mid); line-height: 1.85; }
    .r-meta { display: flex; gap: 12px; margin-top: 12px; padding-top: 12px; border-top: 0.5px solid var(--border-soft); }
    .r-meta span { font-size: 11px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }

    /* Lounge */
    .lounge-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 36px; }
    .l-card { background: var(--bg-base); border: 0.5px solid var(--border-soft); border-radius: var(--radius); padding: 26px; transition: border-color 0.2s; }
    .l-card:hover { border-color: var(--border-mid); }
    .l-icon { font-size: 22px; color: var(--accent-light); margin-bottom: 14px; }
    .l-card .ctag { font-size: 8px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 8px; }
    .l-card h3 { font-size: 15px; font-weight: 500; margin-bottom: 8px; }
    .l-card p  { font-size: 12px; color: var(--text-mid); line-height: 1.9; }

    /* News */
    .news-list { margin-top: 12px; }
    .news-item { display: flex; align-items: flex-start; gap: 16px; padding: 18px 0; border-bottom: 0.5px solid var(--border-soft); cursor: pointer; transition: opacity 0.15s; }
    .news-item:hover { opacity: 0.72; }
    .n-date  { font-size: 11px; color: var(--text-muted); letter-spacing: 0.06em; flex-shrink: 0; padding-top: 1px; }
    .n-badge { font-size: 8px; letter-spacing: 0.1em; padding: 3px 8px; border-radius: 2px; flex-shrink: 0; text-transform: uppercase; background: rgba(100,80,50,0.08); color: var(--text-mid); }
    .n-title { font-size: 13px; color: var(--text-main); line-height: 1.75; }

    /* Access */
    .access-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-top: 36px; }
    .a-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 0.5px solid var(--border-soft); }
    .a-row:last-child { border-bottom: none; }
    .a-row i { font-size: 16px; color: var(--accent-light); margin-top: 1px; flex-shrink: 0; }
    .a-row-c { font-size: 13px; color: var(--text-mid); line-height: 1.85; }
    .a-row-c strong { display: block; font-size: 9px; font-weight: 500; color: var(--text-muted); letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 3px; }
    .map-box { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 280px; border: 0.5px solid var(--border-soft); }
    .map-box iframe { width: 100%; height: 100%; min-height: 280px; border: none; display: block; }
    .map-box-link {
      position: absolute; bottom: 12px; right: 12px;
      background: var(--bg-dark); color: var(--bg-base);
      font-size: 11px; padding: 7px 14px; border-radius: 2px;
      letter-spacing: 0.1em; text-decoration: none; transition: background 0.2s;
    }
    .map-box-link:hover { background: #4e4840; }

    /* ── Footer ── */
    .s-footer { padding: 48px 40px; background: var(--bg-dark); display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: end; }
    .f-logo { font-family: 'Noto Serif TC', serif; font-size: 16px; font-weight: 600; color: var(--bg-base); letter-spacing: 0.1em; }
    .f-sub  { font-size: 9px; color: #a09080; letter-spacing: 0.12em; margin-top: 4px; }
    .f-links { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 16px; }
    .f-links a { font-size: 11px; color: #a09080; letter-spacing: 0.06em; transition: color 0.2s; }
    .f-links a:hover { color: #c4b89e; }
    .f-copy { font-size: 10px; color: #6a5e50; margin-top: 12px; }
    .f-right { text-align: right; }
    .social-row { display: flex; gap: 14px; margin-top: 14px; justify-content: flex-end; }
    .social-row a { font-size: 11px; color: #a09080; transition: color 0.2s; display: flex; align-items: center; gap: 5px; }
    .social-row a:hover { color: #c4b89e; }
    .f-license { font-size: 10px; color: #6a5e50; margin-top: 8px; }
    .f-license a { color: #a09080; border-bottom: 0.5px solid #6a5e50; }

    /* ── Sticky CTA 浮動按鈕 ── */
    .sticky-cta {
      position: fixed;
      right: 20px;
      bottom: 128px;
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 999;
    }

    .cta-btn {
      width: 52px; height: 52px;
      border-radius: 50%;
      display: flex; align-items: center; justify-content: center;
      text-decoration: none;
      box-shadow: 0 4px 16px rgba(0,0,0,0.18);
      transition: transform 0.2s, box-shadow 0.2s;
      position: relative;
    }
    .cta-btn:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.22); }
    .cta-btn i { font-size: 22px; }

    /* LINE */
    .cta-line { background: #06C755; color: #fff; }

    /* 電話 */
    .cta-phone { background: var(--bg-dark); color: #f6f0e2; }

    /* 回頂端 */
    .cta-top {
      background: var(--bg-base);
      color: var(--text-main);
      border: 0.5px solid var(--border-mid);
      opacity: 0;
      pointer-events: none;
      transition: transform 0.2s, box-shadow 0.2s, opacity 0.3s;
    }
    .cta-top.visible { opacity: 1; pointer-events: auto; }

    /* Tooltip label */
    .cta-btn::before {
      content: attr(data-tip);
      position: absolute;
      right: 60px;
      background: var(--bg-dark);
      color: var(--bg-base);
      font-size: 11px;
      padding: 5px 10px;
      border-radius: 4px;
      white-space: nowrap;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.2s;
      letter-spacing: 0.05em;
    }
    .cta-btn:hover::before { opacity: 1; }

    /* ── Responsive ── */
    @media (max-width: 768px) {
      .s-nav-inner { padding: 14px 20px; }
      .s-links { display: none; }
      .nav-toggle { display: flex; }
      .s-mobile-menu { display: flex; }
      .s-hero { grid-template-columns: 1fr; }
      .hero-l { min-height: 420px; padding: 40px 24px 56px; }
      .hero-r { min-height: 260px; grid-template-rows: 130px 130px; }
      .hero-title { font-size: 28px; }
      .exp-grid { grid-template-columns: 1fr; }
      .rooms-grid { grid-template-columns: 1fr 1fr; }
      .lounge-grid { grid-template-columns: 1fr; }
      .access-grid { grid-template-columns: 1fr; }
      .s-sec, .s-sec-alt { padding: 52px 24px; }
      .s-footer { grid-template-columns: 1fr; }
      .f-right { text-align: left; }
      .social-row { justify-content: flex-start; }
      .sticky-cta { right: 14px; bottom: 20px; gap: 8px; }
      .cta-btn { width: 46px; height: 46px; }
      .cta-btn i { font-size: 20px; }
      .cta-btn::before { display: none; }
    }
    @media (max-width: 480px) {
       .translate-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    width: 100%; padding: .5em .5em .5em;
}
      .rooms-grid { grid-template-columns: 1fr; }
    }
    
    .translate-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    width: 100%; padding: .5em 1.5em .5em;
}
    .translate-wrap i { font-size: 13px; color: var(--accent-light); }

     .translate-wrap{width: 100%; background-image: linear-gradient(60deg, #3a3530 0%, #3a3530 100%); color: #c4b89e;}
    .translate-wrap i{ padding-left: 1em; color: #6a5e50;}
    @media (max-width: 480px) {
       .translate-wrap {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 5px;
    width: 100%; padding: .5em .5em .5em;
}
.translate-wrap i{ padding-left: .2em; color: #6a5e50;}
      }
    .translate-wrap .top_travel{ font-size: 80% !important;}

    .f-license { font-size: 10px; color: #6a5e50; margin-top: 8px; }
    .f-license a { color: #a09080; border-bottom: 0.5px solid #6a5e50; }