/* 旅家雅舍 — 共用外殼樣式(導覽列、公告列、輪播、頁尾) */
* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  background: #ffffff;
  font-family: "Noto Serif TC", "Noto Sans TC", serif;
  color: #3a342c;
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; }

/* ---- 導覽列 ---- */
.nav {
  position: sticky; top: 0; z-index: 20;
  background: rgba(255, 255, 255, 0.96);
  border-bottom: 1px solid #eee7d9;
  backdrop-filter: blur(6px);
}
.nav-inner {
  max-width: 1560px; margin: 0 auto; padding: 10px 28px;
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
}
.nav-brand {
  display: flex; align-items: center; gap: 11px;
  text-decoration: none;
}
.nav-brand img { width: 50px; height: 50px; border-radius: 50%; }
.nav-brand .zh {
  font-family: "Noto Serif TC", serif; font-weight: 500;
  font-size: 23px; letter-spacing: 5px; color: #3a342c;
}
.nav-brand .en {
  font-family: "Cormorant Garamond", serif; font-style: italic; font-weight: 600;
  font-size: 21px; letter-spacing: 2px; color: #a08a63;
}
.nav-menu { margin-left: auto; position: relative; }
.nav-menu-btn {
  display: flex; align-items: center; gap: 8px;
  background: none; border: 1px solid #d8cfbc; border-radius: 4px;
  padding: 8px 16px; cursor: pointer;
  font-family: inherit; font-size: 15px; letter-spacing: 1px; color: #5b5346;
}
.nav-menu-btn:hover { background: #faf8f3; color: #3a342c; }
.nav-menu-btn .bars { font-size: 17px; line-height: 1; }
.nav-links {
  display: none; position: absolute; right: 0; top: calc(100% + 8px);
  min-width: 190px; flex-direction: column; padding: 6px;
  background: #fff; border: 1px solid #eee7d9; border-radius: 6px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.12);
}
.nav-menu.open .nav-links { display: flex; }
.nav-links a {
  text-decoration: none; font-size: 15px; letter-spacing: 1px;
  padding: 10px 14px; border-radius: 4px; color: #5b5346;
}
.nav-links a:hover { background: #faf8f3; color: #3a342c; }
.nav-links a.active { color: #a08a63; font-weight: 700; }

/* ---- 公告列 ---- */
.announce {
  background: #faf3e3; border-bottom: 1px solid #eee0bd;
  text-align: center; padding: 10px 16px;
  font-family: "Noto Sans TC", sans-serif; font-size: 14px; color: #6b5326;
}
.announce b { color: #b25b00; }

/* ---- 頁面容器 ---- */
.page { max-width: 1560px; margin: 0 auto; padding: 0 28px; }

/* ---- Sites 式 hero ---- */
.site-hero { text-align: center; padding: 56px 22px 34px; }
.site-hero img.hero-logo { width: 130px; margin: 0 auto 18px; }
.site-hero h1 { font-weight: 700; font-size: 40px; letter-spacing: 6px; line-height: 1.4; }
.site-hero .sub { font-weight: 300; font-size: 19px; letter-spacing: 5px; color: #6b6354; margin-top: 10px; }
.site-hero .cta {
  display: inline-block; margin-top: 26px; font-size: 15px; letter-spacing: 3px;
  color: #3a342c; text-decoration: none; padding: 12px 34px;
  border: 1px solid #3a342c; border-radius: 2px; transition: all .25s ease;
}
.site-hero .cta:hover { background: #3a342c; color: #fff; }

/* ---- 嵌入 iframe ---- */
.embed-frame { width: 100%; border: 0; display: block; }

/* ---- 相簿網格 + 燈箱 ---- */
.gallery { padding: 34px 0 8px; text-align: center; }
.gallery h2 { font-weight: 700; font-size: 24px; letter-spacing: 4px; margin-bottom: 20px; }
.pgrid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px; max-width: 1160px; margin: 0 auto;
}
.pgrid img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 6px; cursor: zoom-in; transition: opacity .2s ease;
}
.pgrid img:hover { opacity: .85; }
.pgrid.row3 { grid-template-columns: repeat(3, 1fr); max-width: 880px; }
.loc img.loc-map, .transit img { cursor: zoom-in; }

.lightbox {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 200;
  background: rgba(30, 26, 20, 0.93);
  display: flex; align-items: center; justify-content: center;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 92vw; max-height: 84vh; object-fit: contain;
  border-radius: 4px;
}
.lb-cap {
  position: absolute; bottom: 22px; left: 0; right: 0;
  text-align: center; color: #d8cfbc;
  font-weight: 300; font-size: 14px; letter-spacing: 2px;
}
.lb-close, .lb-prev, .lb-next {
  position: absolute; z-index: 5; border: none; cursor: pointer;
  background: rgba(255, 255, 255, 0.12); color: #f5efe2;
  width: 44px; height: 44px; border-radius: 50%;
  font-size: 24px; line-height: 1; transition: background .2s ease;
}
.lb-close:hover, .lb-prev:hover, .lb-next:hover { background: rgba(255, 255, 255, 0.28); }
.lb-close { top: 18px; right: 18px; }
.lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.lb-next { right: 14px; top: 50%; transform: translateY(-50%); }

/* ---- 交通 / 說明區 ---- */
.transit { text-align: center; padding: 44px 0 10px; }
.transit p.lead {
  max-width: 960px; margin: 0 auto 26px;
  font-weight: 500; font-size: 20px; line-height: 2; letter-spacing: 1px;
}
.transit img { max-width: 860px; width: 100%; margin: 0 auto; border-radius: 6px; }

/* ---- checkin 引導 ---- */
.guide { text-align: center; padding: 40px 0 10px; }
.guide h1 {
  max-width: 780px; margin: 0 auto 30px;
  font-weight: 500; font-size: 22px; line-height: 2; letter-spacing: 1px;
}
.guide-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 26px; }
.guide-step img { border-radius: 6px; margin: 0 auto; max-height: 520px; object-fit: contain; }
.guide-step h2 { font-size: 20px; letter-spacing: 3px; margin-top: 14px; font-weight: 700; }
.guide-step .en { font-family: "Cormorant Garamond", serif; font-style: italic; color: #a08a63; font-size: 16px; }
.guide-step .step-note { margin-top: 10px; font-size: 14px; line-height: 1.7; font-weight: 500; color: #b25b00; }
.fireplan-link { display: block; text-decoration: none; }
.fireplan { margin: 40px auto 0; width: 100%; max-width: 860px; }
.fireplan-hint {
  display: block; margin-top: 10px;
  font-family: "Cormorant Garamond", serif; font-style: italic;
  color: #a08a63; font-size: 15px; letter-spacing: 1px;
}

/* ---- 12 樓入住提醒(上樓後左轉,勿進隔壁辦公室) ---- */
.f12 {
  max-width: 1040px; margin: 46px auto 0;
  background: #faf8f3; border: 1px solid #e6e0d4; border-radius: 8px;
  padding: 32px 28px;
}
.f12-head { text-align: center; }
.f12-head h2 { font-size: 22px; letter-spacing: 3px; font-weight: 700; }
.f12-head .sub { font-family: "Cormorant Garamond", serif; font-style: italic; color: #a08a63; font-size: 17px; }
.f12-lead {
  max-width: 780px; margin: 16px auto 26px; text-align: center;
  font-weight: 500; font-size: 17px; line-height: 2; color: #5b5346;
}
.f12-lead b { color: #b25b00; }
.f12-en {
  display: block; margin-top: 10px;
  font-family: "Cormorant Garamond", serif; font-style: italic;
  color: #a08a63; font-size: 15.5px; line-height: 1.85;
}
.f12-photos { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 22px; }
.f12-photo { margin: 0; }
.f12-photo img { border-radius: 6px; margin: 0 auto; max-height: 620px; object-fit: contain; }
.f12-cap {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  margin-top: 13px; font-size: 16px; font-weight: 700; letter-spacing: 1px;
}
.f12-badge {
  display: inline-flex; width: 26px; height: 26px; border-radius: 50%;
  align-items: center; justify-content: center; color: #fff; font-size: 15px;
}
.f12-photo.ok .f12-cap { color: #2e7d52; }
.f12-photo.ok .f12-badge { background: #2e7d52; }
.f12-photo.no .f12-cap { color: #c0392b; }
.f12-photo.no .f12-badge { background: #c0392b; }

/* ---- 頁尾 ---- */
.footer {
  margin-top: 72px; background: #faf8f3; border-top: 1px solid #eee7d9;
  padding: 56px 28px 28px;
  font-weight: 300; font-size: 15.5px; color: #5b5346;
}
.footer .f-inner {
  max-width: 920px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 64px; align-items: start; text-align: left;
}
.footer .f-head {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 16px; letter-spacing: 2px; color: #a08a63; margin-bottom: 8px;
}
.footer .f-info { margin-top: 30px; }
.footer .f-info .f-head:not(:first-child) { margin-top: 20px; }
.footer .f-name { font-weight: 700; font-size: 22px; letter-spacing: 4px; color: #3a342c; }
.footer .f-name span {
  display: block; font-family: "Cormorant Garamond", serif; font-style: italic;
  font-weight: 400; font-size: 15px; letter-spacing: 2px; color: #a08a63; margin-top: 4px;
}
.footer .f-tag { margin-top: 14px; font-size: 14px; letter-spacing: 2px; color: #8c8272; }
.footer .f-info p { line-height: 2; }
.footer .f-line { text-align: left; }
.footer .f-book-title {
  font-weight: 500; font-size: 17px; letter-spacing: 2px; color: #3a342c;
  margin: 0 0 2px;
}
.footer .f-book-off {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 15px; letter-spacing: 1px; color: #a08a63; margin-bottom: 16px;
}
.footer .f-book-info { font-size: 14.5px; font-weight: 300; line-height: 2; color: #5b5346; }
.footer .f-book-info b { font-weight: 700; color: #3a342c; }
.footer .f-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 22px; }
.footer .f-line-btn {
  display: inline-block; text-decoration: none; text-align: center;
  font-size: 13.5px; letter-spacing: 2px; color: #8c7b5c;
  padding: 11px 30px; border: 1px solid #bca87f; border-radius: 2px;
  transition: all .25s ease;
}
.footer .f-line-btn:hover { background: #a08a63; border-color: #a08a63; color: #fff; }
.footer .f-copy {
  max-width: 1020px; margin: 44px auto 0; padding-top: 18px;
  border-top: 1px solid #eee7d9; text-align: center;
  font-size: 12.5px; letter-spacing: 2px; color: #a39a89;
}
.footer a { color: #5b5346; }

/* ---- 首頁內文區段(原 iframe 內容,改為直接排版) ---- */
.eyebrow { font-family: "Cormorant Garamond", serif; font-style: italic; color: #a08a63; letter-spacing: 2px; }
.rule { width: 48px; height: 1px; background: #bca87f; margin: 22px auto; }

.sec { text-align: center; padding: 40px 0 10px; }
.sec > .eyebrow { font-size: 17px; }
.sec h2 { font-weight: 700; font-size: 28px; letter-spacing: 5px; margin-top: 6px; }
.about p { max-width: 860px; margin: 0 auto; font-weight: 300; font-size: 17.5px; line-height: 2.1; color: #5b5346; }

.feats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 6px; }
.feat { text-align: center; padding: 10px; }
.feat .ic { font-family: "Cormorant Garamond", serif; font-size: 30px; color: #bca87f; letter-spacing: 2px; }
.feat h3 { font-weight: 500; font-size: 19px; letter-spacing: 2px; margin: 12px 0 8px; }
.feat p { font-weight: 300; font-size: 15px; line-height: 1.9; color: #6b6354; }

.loc { background: #faf8f3; border-radius: 6px; padding: 46px 30px 40px; text-align: center; margin: 36px 0 10px; }
.loc h2 { font-weight: 700; font-size: 26px; letter-spacing: 5px; }
.loc .addr { font-weight: 300; font-size: 17px; color: #5b5346; margin: 18px 0 6px; }
.loc ul { list-style: none; font-weight: 300; font-size: 16px; color: #6b6354; line-height: 2.2; margin-top: 10px; }
.loc .loc-lead {
  max-width: 900px; margin: 26px auto 26px;
  font-weight: 300; font-size: 16.5px; line-height: 2; letter-spacing: 1px; color: #5b5346;
}
.loc img.loc-map { max-width: 800px; width: 100%; margin: 0 auto; border-radius: 6px; }

.end { text-align: center; padding: 56px 22px 8px; }
.end h2 { font-weight: 300; font-size: 24px; letter-spacing: 3px; line-height: 1.8; }
.end h2 b { font-weight: 700; }
.cta-quiet {
  display: inline-block; margin-top: 26px; font-size: 15px; letter-spacing: 3px;
  color: #3a342c; text-decoration: none; padding: 12px 34px;
  border: 1px solid #3a342c; border-radius: 2px; transition: all .25s ease;
}
.cta-quiet:hover { background: #3a342c; color: #fff; }

/* ---- 直訂九折 彈窗 ---- */
.promo-modal {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 20px; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
.promo-modal[hidden] { display: none; }
.promo-backdrop {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  background: rgba(30, 26, 20, 0.55);
}
.promo-box {
  position: relative; margin: auto;
  width: 100%; max-width: 430px;
  text-align: center; color: #3a342c;
  background: #fbf9f3;
  border-radius: 4px; padding: 44px 34px 36px;
  box-shadow: 0 24px 64px rgba(30, 26, 20, 0.3);
  font-family: "Noto Serif TC", serif;
  animation: promo-pop .35s ease;
}
.promo-box::before {
  content: ""; position: absolute; top: 10px; right: 10px; bottom: 10px; left: 10px;
  border: 1px solid #d8cbaa; border-radius: 2px; pointer-events: none;
}
@keyframes promo-pop {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .promo-box { animation: none; }
}
.promo-close {
  position: absolute; top: 14px; right: 16px; z-index: 2;
  width: 34px; height: 34px; border: none; cursor: pointer;
  background: none; color: #a39a89;
  border-radius: 50%; font-size: 24px; line-height: 1;
}
.promo-close:hover { color: #3a342c; background: rgba(160, 138, 99, 0.12); }
.promo-box .p-eyebrow {
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 17px; letter-spacing: 3px; color: #a08a63;
}
.promo-box h2 { font-size: 22px; font-weight: 700; letter-spacing: 3px; line-height: 1.6; margin: 10px 0 2px; }
.promo-box h2 em {
  font-style: normal; display: block; margin-top: 6px;
  font-size: 17px; font-weight: 500; letter-spacing: 2px; color: #a08a63;
}
.promo-box .p-rule { width: 44px; height: 1px; background: #bca87f; margin: 16px auto; }
.promo-box .en { font-family: "Cormorant Garamond", serif; font-style: italic; font-size: 16px; color: #8c8272; margin-bottom: 16px; }
.promo-box .info { font-size: 14.5px; line-height: 2; font-weight: 300; color: #5b5346; }
.promo-box .info b { font-weight: 700; color: #3a342c; }
.promo-box .note { font-size: 12.5px; color: #a39a89; margin: 6px 0 22px; }
.promo-box .btns { display: flex; flex-direction: column; gap: 10px; align-items: center; }
.promo-box .btn {
  width: 100%; max-width: 280px; text-decoration: none;
  font-family: "Noto Serif TC", serif; font-weight: 500; font-size: 14.5px; letter-spacing: 2px;
  padding: 12px 0; border-radius: 2px;
  border: 1px solid #3a342c; color: #3a342c; background: transparent;
  transition: all .25s ease;
}
.promo-box .btn:hover { background: #3a342c; color: #fbf9f3; }
.promo-box .line:hover { background: #06c755; border-color: #06c755; color: #fff; }
.promo-box .wa:hover { background: #25d366; border-color: #25d366; color: #fff; }

@media (max-width: 600px) {
  .site-hero h1 { font-size: 28px; letter-spacing: 4px; }
  .site-hero .sub { font-size: 16px; letter-spacing: 3px; }
  .gallery h2 { font-size: 20px; letter-spacing: 3px; }
  .pgrid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .transit p.lead, .guide h1 { font-size: 17px; }
  .nav-brand { gap: 8px; }
  .nav-brand img { width: 40px; height: 40px; }
  .nav-brand .zh { font-size: 17px; letter-spacing: 2px; }
  .nav-brand .en { font-size: 15px; letter-spacing: 1px; }
  .footer .f-inner { grid-template-columns: 1fr; gap: 30px; text-align: center; }
  .footer .f-line { text-align: center; }
  .footer .f-btns { justify-content: center; }
  .sec h2, .loc h2 { font-size: 22px; letter-spacing: 3px; }
  .feats { grid-template-columns: 1fr; gap: 24px; }
  .end h2 { font-size: 20px; letter-spacing: 2px; }
  .f12 { padding: 24px 16px; }
  .promo-box { padding: 30px 20px 26px; }
  .promo-box h2 { font-size: 19px; }
  .page { padding: 0 16px; }
  .nav-inner { padding: 10px 16px; gap: 10px; }
  .nav-menu-btn { padding: 7px 12px; font-size: 14px; letter-spacing: 0; }
  .guide { padding: 28px 0 10px; }
  .guide-steps { gap: 20px; }
  .f12-cap { font-size: 15px; }
}

@media (max-width: 430px) {
  .nav-brand .en { display: none; }
}