/* 參訪路線相簿（首頁 index.html 與國內頁 domestic/ 共用）
 * 每條路線多張照片：橫向 scroll-snap，手指可滑；有 JS 時加左右箭頭與「2 / 4」計數（js/tour-gallery.js）。
 * 位置預設：景點名稱左上、計數右上、照片來源右下；各頁可覆寫。 */
.tg { position: relative; width: 100%; height: 100%; }
.tg-track {
  display: flex; width: 100%; height: 100%;
  overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; scroll-behavior: smooth;
  overscroll-behavior-x: contain; scrollbar-width: none;
}
.tg-track::-webkit-scrollbar { display: none; }
.tg-track:focus-visible { outline: 2px solid #E3BE50; outline-offset: -2px; }
.tg-slide { position: relative; flex: 0 0 100%; height: 100%; scroll-snap-align: start; overflow: hidden; }
.tg-slide img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tg-cap {
  position: absolute; left: .6rem; top: .6rem; z-index: 2; max-width: calc(100% - 5.5rem);
  padding: .2rem .6rem; border-radius: 99px;
  background: rgba(15, 26, 20, .66); color: #F6F4EC;
  font-size: .72rem; line-height: 1.5; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.tg-credit {
  position: absolute; right: 0; bottom: 0; z-index: 2; max-width: 70%;
  padding: .25rem .6rem; border-top-left-radius: 6px;
  background: rgba(15, 26, 20, .62); color: rgba(246, 244, 236, .9);
  font-size: .6rem; line-height: 1.4; letter-spacing: .04em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.tg-credit a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.tg-count {
  position: absolute; right: .6rem; top: .6rem; z-index: 3;
  padding: .15rem .55rem; border-radius: 99px;
  background: rgba(15, 26, 20, .66); color: #F6F4EC;
  font-size: .68rem; font-variant-numeric: tabular-nums; letter-spacing: .04em;
  pointer-events: none;
}
.tg-nav {
  position: absolute; top: 50%; z-index: 3; width: 34px; height: 34px; margin-top: -17px;
  display: grid; place-items: center; padding: 0; border: 0; border-radius: 50%;
  background: rgba(246, 244, 236, .88); color: #0F1A14; cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .25);
  opacity: 0; transition: opacity .2s ease, transform .2s ease;
}
.tg-nav svg { width: 16px; height: 16px; }
.tg-prev { left: .5rem; }
.tg-next { right: .5rem; }
.tg:hover .tg-nav, .tg:focus-within .tg-nav { opacity: 1; }
.tg-nav:hover { transform: scale(1.08); }
.tg-nav:focus-visible { opacity: 1; outline: 2px solid #E3BE50; outline-offset: 2px; }
@media (hover: none) { .tg-nav { opacity: .9; width: 30px; height: 30px; margin-top: -15px; } }
.no-js .tg-nav, .no-js .tg-count { display: none; }
@media (prefers-reduced-motion: reduce) { .tg-track { scroll-behavior: auto; } }