:root {
  --primary-900: #312108;
  --primary-800: #62420f;
  --primary-700: #926317;
  --primary-600: #c3841e;
  --primary-500: #f4a526;
  --primary-400: #f6b751;
  --primary-300: #f8c97d;
  --primary-200: #fbdba8;
  --primary-100: #fdedd4;
  --primary-50: #fef6e9;
  --primary: #ffffff;
  --secondary-900: #002328;
  --secondary-800: #004650;
  --secondary-700: #006877;
  --secondary-600: #008b9f;
  --secondary-500: #00aec7;
  --secondary-400: #30bed2;
  --secondary-300: #60cedd;
  --secondary-200: #90dde9;
  --secondary-100: #c0edf4;
  --secondary-50: #d8f5f9;
  --secondary: #f0fdff;
  --tertiary-900: #49340d;
  --tertiary-800: #92671b;
  --tertiary-700: #d89a2c;
  --tertiary-600: #e6bd75;
  --tertiary-500: #f3e0be;
  --tertiary-400: #f5e6cb;
  --tertiary-300: #f8ecd8;
  --tertiary-200: #faf3e5;
  --tertiary-100: #fdf9f2;
  --tertiary-50: #fdf9f2;
  --tertiary: #f3e0be;
  --error: #d90000;
  --t-100: #3e3a39;
  --t-200: #969392;
  --t-300: #b4b0af;
  --t-white: #ffffff;
  --bg: #fffcfa00;
}

body {
  font-family: "Noto Sans TC", "Noto Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #fffcfa;
  color: var(--t-100);
}

::selection { background-color: #fbdba8; }

.layout {
  max-width: 1368px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 20px;
  padding-right: 20px;
}

@media (min-width: 1025px) {
  .layout {
    padding-left: 24px;
    padding-right: 24px;
  }
}

.vertical {
  writing-mode: vertical-rl;
}

.video-vertical {
  writing-mode: vertical-lr;
}

.color-switch::before,
.color-switch::after {
  content: "";
  display: block;
  position: absolute;
  left: 0;
}

@media (max-width: 1025px) {
	
	.video-vertical {
	  writing-mode: lr;
	}
}
.color-switch::before { top: 0; width: 100%; height: 100%; background: #fffcfa; }

.color-switch::after {
  bottom: 0;
  width: 100%;
  height: 24px;
  background: #fff;
}

#Banner .swiper-pagination-bullet {
  width: 23px;
  height: 0;
  border: 2px solid #b4b0af;
  border-radius: 32px;
  opacity: 1;
}

#Banner .swiper-pagination-bullet-active {
  border-color: #f6b751;
  background: #f6b751;
  height: 4px;
}

#Feature .swiper-pagination-bullet,
#Future .swiper-pagination-bullet {
  width: 23px;
  height: 0;
  border: 2px solid #b4b0af;
  border-radius: 32px;
  opacity: 1;
}

#Feature .swiper-pagination-bullet-active,
#Future .swiper-pagination-bullet-active {
  border-color: #f6b751;
}

.modal-mask {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(2px);
  overflow-y: auto;
  z-index: 50;
  display: none;
}

.modal-mask.show {
  display: flex;
}

.card-shadow {
  box-shadow: 0 4px 10px 0 #fff0ce;
}

.floating-btn {
  box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1);
}

.faq-item + .faq-item {
  border-top: 1px solid #f6b751;
  padding-top: 16px;
}

#UpLayout {
  display: none;
}

#UpLayout.show {
  display: block;
}

.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 60;
}

.lightbox.show {
  display: flex;
}

.lightbox video {
  max-width: 90vw;
  max-height: 80vh;
  border: 6px solid var(--primary-500);
  border-radius: 16px;
  background: #000;
}

.map-dot {
  border-radius: 9999px;
  transition: opacity 0.2s ease;
}

@media (min-width: 1025px) {
  .rtl { direction: rtl; }
  .ltr { direction: ltr; }
}

/* Typography utilities (對齊官網字級) */
.display-xl { font-size: 3rem; line-height: 1; font-weight: 600; letter-spacing: 0.1em; }
.display-large { font-size: 2.25rem; line-height: 1.25; font-weight: 600; letter-spacing: 0.1em; }
.display-medium { font-size: 2rem; line-height: 1; font-weight: 600; letter-spacing: 0.1em; }
.display-small { font-size: 1.75rem; line-height: 1.25; font-weight: 600; letter-spacing: 0.1em; }
.h1 { font-size: 2.5rem; line-height: 1.5; font-weight: 600; letter-spacing: 0.1em; }
.h2 { font-size: 2rem; line-height: 1.5; font-weight: 600; letter-spacing: 0.1em; }
.h3 { font-size: 1.75rem; line-height: 1.5; font-weight: 600; letter-spacing: 0.1em; }
.body-xl { font-size: 1.5rem; line-height: 1.5; font-weight: 400; letter-spacing: 0.1em; }
.body-large { font-size: 1.25rem; line-height: 1.5; font-weight: 400; letter-spacing: 0.1em; }
.body-regular { font-size: 1rem; line-height: 1.5; font-weight: 400; letter-spacing: 0.1em; }
.foot-note { font-size: 0.875rem; line-height: 1.5; font-weight: 400; letter-spacing: 0.1em; }
.label-large { font-size: 1.5rem; line-height: 1.5; font-weight: 600; letter-spacing: 0.1em; }
.label-medium { font-size: 1.25rem; line-height: 1.5; font-weight: 600; letter-spacing: 0.1em; }
.label-small { font-size: 1rem; line-height: 1.5; font-weight: 600; letter-spacing: 0.1em; }