@charset "utf-8";
/* CSS Document */

.menubook .tms_title {
  padding: 3% 0;
}

/* 菜單書本輪播 */
.wrap_mu {
  width: min(88%, 1180px);
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

.wrap_book {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.wrap_book:not(.slick-initialized) {
  display: block;
}

/* JavaScript 會自動把每兩張菜單組成一個跨頁 */
.wrap_book .menu-spread {
  box-sizing: border-box;
  padding: 24px 52px 34px;
}

.menu-spread-inner {
  display: flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  max-width: 1060px;
  margin: 0 auto;
  filter: drop-shadow(0 14px 16px rgba(0, 0, 0, 0.18));
}

.menu-page {
  position: relative;
  width: 50%;
  min-width: 0;
  background: #fff;
  overflow: hidden;
  cursor: zoom-in;
}

.menu-page-left {
  border-radius: 10px 0 0 10px;
  transform-origin: right center;
}

.menu-page-right {
  border-radius: 0 10px 10px 0;
  transform-origin: left center;
}

.menu-page img {
  display: block;
  width: 100%;
  height: auto;
  cursor: zoom-in;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.menu-page:hover img {
  transform: scale(1.012);
  filter: brightness(1.025);
}

/* 中央書縫 */
.menu-page-left::after,
.menu-page-right::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 30px;
  z-index: 2;
  pointer-events: none;
}

.menu-page-left::after {
  right: 0;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0));
}

.menu-page-right::before {
  left: 0;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0));
}

/* 奇數張菜單時的空白右頁 */
.menu-page-placeholder {
  min-height: 300px;
  cursor: default;
  background: linear-gradient(90deg, #f4f1eb, #fff);
}

/* 左右切換按鈕，只限定菜單輪播，不影響網站其他 Slick */
.wrap_book .slick-prev,
.wrap_book .slick-next {
  width: 44px;
  height: 44px;
  z-index: 15;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
}

.wrap_book .slick-prev {
  left: 0;
}

.wrap_book .slick-next {
  right: 0;
}

.wrap_book .slick-prev::before,
.wrap_book .slick-next::before {
  font-size: 25px;
  color: #4b5567;
  opacity: 0.82;
}

/* 下方圓點與組數 */
.menu-pagination {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  min-height: 32px;
  margin: 4px auto 24px;
}

.menu-dots {
  display: flex;
  align-items: center;
}

.menu-pagination .slick-dots {
  position: static;
  display: flex !important;
  align-items: center;
  width: auto;
  margin: 0;
  padding: 0;
}

.menu-pagination .slick-dots li {
  width: 9px;
  height: 9px;
  margin: 0 5px;
  transition: width 0.25s ease;
}

.menu-pagination .slick-dots li button {
  width: 9px;
  height: 9px;
  padding: 0;
}

.menu-pagination .slick-dots li button::before {
  content: "";
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: rgba(80, 102, 143, 0.42);
  opacity: 1;
  transition: width 0.25s ease, background 0.25s ease;
}

.menu-pagination .slick-dots li.slick-active,
.menu-pagination .slick-dots li.slick-active button {
  width: 30px;
}

.menu-pagination .slick-dots li.slick-active button::before {
  width: 30px;
  background: #243f79;
}

.menu-count {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #667189;
  font-size: 15px;
  line-height: 1;
  letter-spacing: 0.04em;
  white-space: nowrap;
}

/* 繁星深色背景專用色 */
body.bg_star .menu-pagination .slick-dots li button::before {
  background: rgba(255, 255, 255, 0.48);
}

body.bg_star .menu-pagination .slick-dots li.slick-active button::before {
  background: #8d6e39;
}

body.bg_star .menu-count {
  color: rgba(255, 255, 255, 0.8);
}

/* Lightbox */
.lightbox {
  display: none;
  position: fixed;
  inset: 0;
  padding: 54px 72px;
  background: rgba(0, 0, 0, 0.88);
  z-index: 9999;
  align-items: center;
  justify-content: center;
}

.lightbox.is-open {
  display: flex;
}

.lightbox-content {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 94vw;
  max-height: 90vh;
}

.lightbox-content > #lightbox-img {
  display: block;
  max-width: 88vw;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  box-shadow: 0 8px 36px rgba(0, 0, 0, 0.35);
}

.close {
  position: absolute;
  top: -42px;
  right: 0;
  width: 36px;
  height: 36px;
  padding: 3px;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 3;
}

.close img {
  width: 30px;
  height: 30px;
}

.prev,
.next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 9px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.56);
  cursor: pointer;
  opacity: 0.9;
}

.prev img,
.next img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.prev {
  left: -62px;
}

.next {
  right: -62px;
}

body.menu-lightbox-open {
  overflow: hidden;
}

@media (max-width: 820px) {
  .menubook .tms_title {
    padding: 10% 0 5%;
  }

  .wrap_mu {
    width: 96%;
  }

  .wrap_book .menu-spread {
    padding: 14px 34px 24px;
  }

  .menu-page-left::after,
  .menu-page-right::before {
    width: 18px;
  }

  .wrap_book .slick-prev,
  .wrap_book .slick-next {
    width: 36px;
    height: 36px;
  }

  .lightbox {
    padding: 48px 18px 24px;
  }

  .lightbox-content > #lightbox-img {
    max-width: 94vw;
    max-height: 84vh;
  }

  .prev {
    left: 8px;
  }

  .next {
    right: 8px;
  }

  .close {
    top: -40px;
    right: 4px;
  }
}

@media (max-width: 500px) {
  /* 手機仍保留雙頁攤開樣子，點擊後看單頁大圖 */
  .wrap_book .menu-spread {
    padding: 10px 28px 18px;
  }

  .menu-spread-inner {
    filter: drop-shadow(0 7px 10px rgba(0, 0, 0, 0.16));
  }

  .menu-page-left {
    border-radius: 5px 0 0 5px;
  }

  .menu-page-right {
    border-radius: 0 5px 5px 0;
  }

  .menu-page-left::after,
  .menu-page-right::before {
    width: 12px;
  }

  .wrap_book .slick-prev,
  .wrap_book .slick-next {
    width: 30px;
    height: 30px;
  }

  .menu-pagination {
    gap: 10px;
    margin-bottom: 18px;
  }

  .menu-pagination .slick-dots li {
    margin: 0 4px;
  }

  .menu-count {
    font-size: 13px;
  }
}

/* =========================================================
   菜單專用雙頁切換（不使用 Slick，避免與其他輪播衝突）
   ========================================================= */
.wrap_mu {
  overflow: visible;
}

.wrap_book.menu-book-ready {
  position: relative;
  overflow: hidden;
}

.wrap_book.menu-book-ready .menu-spread {
  display: none;
  width: 100%;
  margin: 0;
  opacity: 0;
  transform: translateX(28px);
}

.wrap_book.menu-book-ready .menu-spread.is-active {
  display: block;
  opacity: 1;
  transform: translateX(0);
  animation: menuSpreadIn 0.38s ease both;
}

@keyframes menuSpreadIn {
  from {
    opacity: 0;
    transform: translateX(28px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.menu-page {
  padding: 0;
  border: 0;
  appearance: none;
  -webkit-appearance: none;
  text-align: left;
}

.menu-book-arrow {
  position: absolute;
  top: 50%;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.94);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
  transform: translateY(-50%);
  z-index: 30;
  cursor: pointer;
}

.menu-book-prev {
  left: 4px;
}

.menu-book-next {
  right: 4px;
}

.menu-book-arrow::before {
  content: "";
  position: absolute;
  top: 50%;
  width: 12px;
  height: 12px;
  border-top: 3px solid #4b5567;
  border-right: 3px solid #4b5567;
}

.menu-book-prev::before {
  left: 18px;
  transform: translateY(-50%) rotate(-135deg);
}

.menu-book-next::before {
  right: 18px;
  transform: translateY(-50%) rotate(45deg);
}

.menu-book-arrow:hover {
  background: #fff;
}

.menu-dots {
  gap: 10px;
}

.menu-dot {
  display: block;
  width: 9px;
  height: 9px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(80, 102, 143, 0.42);
  cursor: pointer;
  transition: width 0.25s ease, background 0.25s ease;
}

.menu-dot.is-active {
  width: 30px;
  background: #4994C4;
}

.bg_star .menu-dot {
  background: rgba(255, 255, 255, 0.48);
}

.bg_star .menu-dot.is-active {
  background: #8d6e39;
}

@media (max-width: 767px) {
  .menu-book-arrow {
    width: 38px;
    height: 38px;
  }

  .menu-book-prev {
    left: -2px;
  }

  .menu-book-next {
    right: -2px;
  }

  .menu-book-prev::before {
    left: 15px;
  }

  .menu-book-next::before {
    right: 15px;
  }
}

/* 放大燈箱：單頁頁碼，例如 1 / 6 */
.lightbox-counter {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 5;
  padding: 7px 13px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.58);
  color: #fff;
  font-size: 14px;
  line-height: 1;
  letter-spacing: 0.08em;
  pointer-events: none;
}

@media (max-width: 767px) {
  .lightbox-counter {
    bottom: 12px;
    font-size: 13px;
  }
}

/* =========================================================
   菜單圖片放大提示與進階燈箱縮放
   ========================================================= */
.menu-page .menu-zoom-hint {
  position: absolute;
  right: 14px;
  bottom: 14px;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.62);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.24);
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 6;
  pointer-events: none;
}

.menu-page .menu-zoom-hint::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 10px;
  width: 13px;
  height: 13px;
  border: 2px solid #fff;
  border-radius: 50%;
}

.menu-page .menu-zoom-hint::after {
  content: "";
  position: absolute;
  left: 25px;
  top: 24px;
  width: 10px;
  height: 2px;
  background: #fff;
  border-radius: 2px;
  transform: rotate(45deg);
  transform-origin: left center;
}

.menu-page:hover .menu-zoom-hint,
.menu-page:focus-visible .menu-zoom-hint {
  opacity: 1;
  transform: translateY(0);
}

.lightbox-content {
  width: min(94vw, 1500px);
  height: min(90vh, 980px);
}

.lightbox-stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  touch-action: none;
  cursor: zoom-in;
}

.lightbox-stage.is-dragging {
  cursor: grabbing;
}

.lightbox-stage > #lightbox-img {
  max-width: 88vw;
  max-height: 82vh;
  width: auto;
  height: auto;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.16s ease;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
}

.lightbox-stage > #lightbox-img.is-zoomed {
  cursor: grab;
  transition: none;
}

.lightbox-toolbar {
  position: absolute;
  left: 50%;
  top: -46px;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 8;
  padding: 5px 7px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.62);
  backdrop-filter: blur(6px);
}

.lightbox-toolbar button {
  min-width: 34px;
  height: 30px;
  padding: 0 9px;
  border: 0;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
  font-size: 17px;
  line-height: 30px;
  cursor: pointer;
}

.lightbox-toolbar button:hover {
  background: rgba(255, 255, 255, 0.26);
}

.lightbox-toolbar .zoom-reset {
  font-size: 13px;
}

.lightbox-toolbar .zoom-value {
  min-width: 52px;
  color: #fff;
  font-size: 13px;
  text-align: center;
}

@media (max-width: 820px) {
  .menu-page .menu-zoom-hint {
    right: 8px;
    bottom: 8px;
    width: 34px;
    height: 34px;
    opacity: 0.9;
    transform: none;
  }

  .menu-page .menu-zoom-hint::before {
    left: 10px;
    top: 8px;
    width: 10px;
    height: 10px;
  }

  .menu-page .menu-zoom-hint::after {
    left: 20px;
    top: 19px;
    width: 8px;
  }

  .lightbox-content {
    width: 96vw;
    height: 84vh;
  }

  .lightbox-stage > #lightbox-img {
    max-width: 94vw;
    max-height: 78vh;
  }

  .lightbox-toolbar {
    top: -42px;
  }
}


/* ===== 2026-07-17 Lightbox 左右箭頭固定修正 ===== */
.lightbox .prev,
.lightbox .next {
  z-index: 30;
}

@media (max-width: 1024px) {
  .lightbox .prev,
  .lightbox .next {
    position: fixed;
    top: 52%;
    transform: translateY(-50%);
    width: 52px;
    height: 52px;
    padding: 11px;
    background: rgba(0, 0, 0, 0.52);
    opacity: 0.96;
    z-index: 10020;
  }

  .lightbox .prev {
    left: max(10px, env(safe-area-inset-left));
    right: auto;
  }

  .lightbox .next {
    right: max(10px, env(safe-area-inset-right));
    left: auto;
  }
}

@media (max-width: 500px) {
  .lightbox .prev,
  .lightbox .next {
    top: 54%;
    width: 48px;
    height: 48px;
    padding: 10px;
  }

  .lightbox .prev {
    left: max(8px, env(safe-area-inset-left));
  }

  .lightbox .next {
    right: max(8px, env(safe-area-inset-right));
  }
}

/* ===== 2026-07-17 行動裝置燈箱安全區與完整顯示修正 ===== */
@media (max-width: 1024px) {
  .lightbox {
    box-sizing: border-box;
    padding:
      calc(env(safe-area-inset-top, 0px) + 74px)
      calc(env(safe-area-inset-right, 0px) + 12px)
      calc(env(safe-area-inset-bottom, 0px) + 54px)
      calc(env(safe-area-inset-left, 0px) + 12px);
    align-items: center;
  }

  .lightbox-content {
    width: 100%;
    height: calc(
      100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 128px
    );
    max-width: none;
    max-height: none;
  }

  .lightbox-stage {
    width: 100%;
    height: 100%;
  }

  .lightbox-stage > #lightbox-img {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    object-fit: contain;
  }

  /* 工具列固定在瀏覽器安全區下方，不再使用負 top。 */
  .lightbox-toolbar {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: 50%;
    transform: translateX(-50%);
    gap: 5px;
    z-index: 10030;
    max-width: calc(100vw - 110px);
    padding: 5px 7px;
    white-space: nowrap;
  }

  .lightbox-toolbar button {
    flex: 0 0 auto;
    min-width: 32px;
    height: 32px;
    padding: 0 9px;
    line-height: 32px;
  }

  .lightbox-toolbar .zoom-reset {
    min-width: 54px;
    font-size: 13px;
    white-space: nowrap;
  }

  .lightbox-toolbar .zoom-value {
    flex: 0 0 auto;
    min-width: 48px;
    white-space: nowrap;
  }

  /* 關閉鈕獨立固定右上，不與縮放工具列重疊。 */
  .lightbox .close {
    position: fixed;
    top: calc(env(safe-area-inset-top, 0px) + 9px);
    right: calc(env(safe-area-inset-right, 0px) + 10px);
    width: 40px;
    height: 40px;
    z-index: 10040;
  }

  .lightbox .close img {
    width: 34px;
    height: 34px;
  }

  /* 頁碼固定在瀏覽器底部安全區上方。 */
  .lightbox-counter {
    position: fixed;
    bottom: calc(env(safe-area-inset-bottom, 0px) + 12px);
    z-index: 10030;
  }
}

@media (max-width: 500px) {
  .lightbox {
    padding:
      calc(env(safe-area-inset-top, 0px) + 66px)
      calc(env(safe-area-inset-right, 0px) + 8px)
      calc(env(safe-area-inset-bottom, 0px) + 48px)
      calc(env(safe-area-inset-left, 0px) + 8px);
  }

  .lightbox-content {
    height: calc(
      100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 114px
    );
  }

  .lightbox-toolbar {
    top: calc(env(safe-area-inset-top, 0px) + 8px);
    max-width: calc(100vw - 92px);
    gap: 3px;
    padding: 4px 5px;
  }

  .lightbox-toolbar button {
    min-width: 29px;
    height: 30px;
    padding: 0 7px;
    font-size: 16px;
    line-height: 30px;
  }

  .lightbox-toolbar .zoom-value {
    min-width: 44px;
    font-size: 12px;
  }

  .lightbox-toolbar .zoom-reset {
    min-width: 48px;
    padding: 0 8px;
    font-size: 12px;
  }

  .lightbox .close {
    top: calc(env(safe-area-inset-top, 0px) + 7px);
    right: calc(env(safe-area-inset-right, 0px) + 7px);
    width: 38px;
    height: 38px;
  }

  .lightbox .close img {
    width: 31px;
    height: 31px;
  }

  .lightbox .prev,
  .lightbox .next {
    top: 52%;
    width: 46px;
    height: 46px;
  }
}