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

body {
  font-family:
    "PMingLiU", "新細明體", "MingLiU", "Times New Roman", Times, serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: #1a1a1a;
  color: #7a7a7a;
  line-height: 4;
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

a {
  text-decoration: none;
  color: inherit;
}


/* 導航選單 */
.navigation {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  background-color: transparent;
  backdrop-filter: blur(10px);
  box-shadow: none;
  z-index: 10000;
  /* 確保在所有內容之上 */
  padding: 2rem 0;
  /* 減少上下 padding，讓導覽列更緊湊 */
  transition: transform 0.25s ease-out;
  transform: translateY(0);
}

/* 手機版與平板版：導覽列底色長方形寬度 */
@media (max-width: 1024px) {
  .navigation {
    width: 100% !important;
    left: 0 !important;
    right: 0 !important;
    margin-left: 0 !important;
    background-color: transparent;
  }
}

.nav-container {
  position: relative;
  width: 100%;
  padding: 0 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 2.5rem;
  /* 40px = 2.5rem */
  /* 固定高度，確保所有元素在同一行 */
}

/* 中間導覽連結容器（絕對居中） */
.nav-menu-center {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  /* 確保導覽連結在螢幕正中央，不受左右內容寬度影響 */
}

.logo {
  font-size: 1.5rem;
  font-family: "Playfair Display", serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  letter-spacing: 0.02em;
  color: #ffffff;
  transition:
    color 0.3s ease,
    text-shadow 0.3s ease;
  line-height: 2.5rem;
  /* 40px = 2.5rem */
  /* 與導覽列高度一致，確保在同一行 */
  display: flex;
  align-items: center;
  /* 確保 Logo 靠左，無額外 margin */
  margin-left: 0;
}

.logo:hover {
  color: #d1d1d1;
}

/* bio、書法、繪畫、展演頁面：logo改為深棕色 */
body.page-light .logo {
  color: #24190b;
}

body.page-light .logo:hover {
  color: #3d2f1a;
}

/* Logo 在首頁時的啟動狀態 (亮綠色) */
.logo.active {
  color: #8af2a8 !important;
  text-shadow: 0 0 10px rgba(138, 242, 168, 0.6);
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 0;
  align-items: center;
}

.nav-menu li {
  flex: 1;
  text-align: center;
  min-width: 0;
}

.nav-link {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 300;
  font-size: 0.833rem;
  font-family: "Times New Roman", Times, serif;
  text-transform: uppercase;
  /* 流動間距：1280px → 60px、1440px → 68px、≥1920px → 90px（上限） */
  padding: 0 clamp(20px, 4.7vw, 90px);
  /* 左右間距 */
  display: block;
  text-decoration: none;
  position: relative;
  height: 2.5rem;
  /* 40px = 2.5rem */
  /* 減少高度，讓導覽列更緊湊 */
  overflow: hidden;
  /* cursor: pointer; */
  /* 已刪除：與自訂鼠標衝突 */
  transition:
    color 0.3s ease,
    text-shadow 0.3s ease;
}

/* bio、書法、繪畫、展演頁面：導覽列改為深棕色 */
body.page-light .nav-link {
  color: rgba(36, 25, 11, 0.85);
}

body.page-light .nav-link:hover {
  color: #24190b;
}

/* 滾動文字容器 */
.roll-text {
  display: flex;
  flex-direction: column;
  transition: transform 1.5s cubic-bezier(0.19, 1, 0.22, 1);
  /* 從 0.5s 改為 1s */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 5rem;
  /* 80px = 5rem */
  /* 兩個文字的高度 (40px * 2) */
}

.roll-text span {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 2.5rem;
  /* 40px = 2.5rem */
  /* 與 .nav-link 高度一致 */
  flex-shrink: 0;
  letter-spacing: 3px;
  font-family: "Times New Roman", Times, serif;
}

/* Hover 動畫 - 向上滾動（只在桌面版和平板版） */
@media (min-width: 769px) {
  .nav-link:hover .roll-text {
    transform: translateY(-2.5rem);
    /* 40px = 2.5rem */
    /* 與單個文字高度一致 */
  }
}

.nav-link:hover {
  color: #ffffff;
}

/* 中英文切換顯示控制 */
.text-zh {
  display: none;
}

body.lang-zh .text-en {
  display: none;
}

body.lang-zh .text-zh {
  display: flex;
}

/* 中文微調：字體稍微縮小以匹配英文視覺重量 */
.text-zh span {
  font-size: 1rem;
  /* 從 1.3rem 縮小 8pt，約為 0.633rem */
  font-weight: 400;
  font-family: "Times New Roman", Times, serif;
}

.nav-link.active {
  color: #349147 !important;
  text-shadow: none;
  /* 移除光暈感 */
  opacity: 1;
}

/* 語言切換按鈕 */
.language-switcher {
  display: flex;
  /* 桌面版顯示；手機版由 max-width:1024px media query 覆蓋為 none !important */
  align-items: center;
  gap: 0.5rem;
  height: 2.5rem;
  /* 40px = 2.5rem */
  /* 與導覽列高度一致 */
  line-height: 2.5rem;
  transform: translateX(-20px);
  /* 確保語言切換器靠右，無額外 margin */
  margin-right: 0;
}

/* Gmail 圖示：桌面版導覽列（fb 左側） */
.gmail-icon {
  display: flex;
  align-items: center;
  margin-left: 1.5rem;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.gmail-icon:hover { opacity: 1; }
.gmail-icon img {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

/* Facebook 圖示：桌面版導覽列右側 */
.facebook-icon {
  display: flex;
  align-items: center;
  margin-left: 0.5rem;
  opacity: 0.85;
  transition: opacity 0.3s ease;
}
.facebook-icon:hover {
  opacity: 1;
}
.facebook-icon img {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

/* Facebook 圖示：每頁左下角（手機版） */
/* Gmail 圖示：每頁底部（手機版，fb 左側） */
.page-gmail-icon {
  position: absolute;
  bottom: 15px;
  left: 1.25rem;
  opacity: 0.85;
  transition: opacity 0.3s ease;
  z-index: 100;
  display: none;
}
.page-gmail-icon:hover { opacity: 1; }
.page-gmail-icon img {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

.page-facebook-icon {
  position: absolute;
  bottom: 15px;
  left: 1.25rem;
  opacity: 0.85;
  transition: opacity 0.3s ease;
  z-index: 100;
  display: none;
}
.page-facebook-icon:hover {
  opacity: 1;
}
.page-facebook-icon img {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

/* 手機版漢堡選單按鈕（桌面版隱藏） */
.mobile-menu-toggle {
  display: none;
}

/* 手機版漢堡選單遮罩（桌面版隱藏） */
.mobile-menu-overlay {
  display: none;
}

.lang-btn {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.4);
  /* 非活動語言：變暗 */
  font-family:
    "PMingLiU", "新細明體", "MingLiU", "Times New Roman", Times, serif;
  font-size: 1rem;
  font-weight: 400;
  /* cursor: pointer; */
  /* 已刪除：與自訂鼠標衝突 */
  padding: 0.25rem 0.5rem;
  transition: color 0.3s ease;
  opacity: 1;
}

/* 非活動語言 hover 效果 */
.lang-btn:hover:not(.active) {
  color: rgba(255, 255, 255, 1);
  /* hover 時變為完全白色，提供互動反饋 */
}

/* 活動語言（選中） */
.lang-btn.active {
  color: #ffffff;
  /* 亮白色，完全不透明 */
  font-weight: 500;
  /* 稍微加粗 */
  opacity: 1;
}

.lang-separator {
  color: rgba(255, 255, 255, 0.2);
  /* 保持低調，不與文字競爭 */
  opacity: 1;
}

/* bio、書法、繪畫、展演頁面：語言切換改為深棕色 */
body.page-light .lang-btn {
  color: #24190b66;
}

body.page-light .lang-btn:hover:not(.active) {
  color: #24190b;
}

body.page-light .lang-btn.active {
  color: #24190b;
}

body.page-light .lang-separator {
  color: rgba(36, 25, 11, 0.2);
}

/* 主內容區域 */
.main-content {
  padding-top: 0;
  /* 移除 padding-top，讓內容可以延伸到頂部，襯在 Navbar 下方 */
  background-color: #1a1a1a;
  position: relative;
}

/* bio、書法、篆刻、繪畫、展演頁面：米白底 */
#bio.page,
#calligraphy.page,
#sealcarving.page,
#painting.page,
#exhibition.page {
  background-color: #fffaf2;
}

#bio .page-container,
#calligraphy .page-container,
#sealcarving .page-container,
#painting .page-container,
#exhibition .page-container {
  background-color: #fffaf2;
}

/* bio、書法、繪畫、展演頁面：所有文字改為深棕色 */
body.page-light .page-title,
body.page-light .bio-text,
body.page-light .bio-text h2,
body.page-light .bio-text h3,
body.page-light .bio-text p,
body.page-light .bio-text ul,
body.page-light .bio-text li,
body.page-light .artwork-main-info,
body.page-light .artwork-main-info h2,
body.page-light .artwork-meta,
body.page-light .artwork-description,
body.page-light .work-caption,
body.page-light .year-title,
body.page-light .caption {
  color: #24190b;
}

/* 頁面切換 - 確保非活動頁面完全隱藏 */
.page {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  min-height: 0 !important;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

.page.active {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  min-height: 100vh !important;
  width: 100%;
  position: relative;
}

/* 確保非活動頁面完全隱藏 */
.page:not(.active) {
  display: none !important;
  visibility: hidden;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* 首頁專用樣式 */
#home.page {
  display: none !important;
  visibility: hidden !important;
  height: 100vh;
  position: relative;
  overflow: hidden;
  width: 100%;
  margin: 0;
  padding: 0;
}

#home.page.active {
  display: block !important;
  visibility: visible !important;
  height: 100vh;
  width: 100%;
  overflow: hidden;
  position: relative;
  margin: 0;
  padding: 0;
}

/* 首頁樣式 */
.hero {
  background: #1a1a1a;
  color: #e0e0e0;
  height: 100vh;
  width: 100%;
  position: relative;
  overflow: hidden;
  margin: 0;
  padding: 0;
}

.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: #1a1a1a;
  pointer-events: none;
}

/* 首頁全螢幕強制設定 */
#home,
.hero,
.hero-slideshow {
  width: 100vw !important;
  height: 100vh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden;
  position: relative;
}

/* 確保圖片填滿且不變形 */
.hero-slideshow img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 關鍵：裁切多餘部分，保持滿版 */
  object-position: center;
  /* Safari性能優化 */
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
}

.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-color: #1a1a1a;
  opacity: 0;
  transition: opacity 1s ease-in-out;
  filter: brightness(0.85);
  pointer-events: none;
  width: 100%;
  height: 100%;
  /* Safari性能優化：使用GPU加速 */
  will-change: opacity;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.hero-slide.active {
  opacity: 1;
}

/* hero-overlay 和 hero-content 已刪除 */

.hero .copyright {
  position: absolute;
  bottom: 37.8px;
  right: 1.25rem;
  /* 20px = 1.25rem */
  font-size: 0.833rem;
  /* 10pt = 0.833rem */
  color: #ffffff !important;
  z-index: 100;
  font-family:
    "PMingLiU", "新細明體", "MingLiU", "Times New Roman", Times, serif;
}

/* Hero底部列：fb圖示（手機）+ 版權說明的 flex 容器 */
.hero-credits {
  position: absolute;
  bottom: 37.8px;
  right: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

/* 桌面：社群圖示由導覽列負責，hero-credits 內的圖示隱藏 */
.hero-credits .page-gmail-icon {
  display: none;
}
.hero-credits .page-facebook-icon {
  display: none;
}

/* hero-credits 內的版權：解除 absolute，交由 flex 排列 */
.hero-credits .copyright {
  position: static !important;
  bottom: auto !important;
  right: auto !important;
  color: #ffffff !important;
}

/* 手機版與平板版：首頁版權說明字體大小與其他分頁一致 */
@media (max-width: 1024px) {
  /* hero-credits：版權左對齊 logo，Gmail/FB 固定右側 */
  .hero-credits {
    bottom: 0;
    left: 0;
    right: 0;
    padding: 0 1rem 15px calc(1rem + 7px);
    justify-content: flex-start;
    align-items: center;
    gap: 0;
  }

  .hero-credits .page-gmail-icon,
  .hero-credits .page-facebook-icon {
    flex-shrink: 0;
  }

  .hero-credits .page-gmail-icon {
    position: static !important;
    display: flex !important;
    align-items: center;
    bottom: auto !important;
    opacity: 0.85;
    margin: 0 0.675rem 0 0;
    order: 2;
  }

  .hero-credits .page-facebook-icon {
    position: static !important;
    display: flex !important;
    align-items: center;
    bottom: auto !important;
    opacity: 0.85;
    margin: 0;
    order: 3;
  }

  .hero-credits .copyright {
    font-size: 0.5rem;
    letter-spacing: 0;
    white-space: nowrap;
    margin: 0;
    padding: 0;
    order: 1;
    flex: 1;
  }
}

/* 頁面容器樣式 */
#bio .page-container,
#calligraphy .page-container,
#sealcarving .page-container,
#painting .page-container,
#exhibition .page-container,
.page-container {
  max-width: 75rem;
  /* 1200px = 75rem */
  margin: 0 auto;
  padding: 3rem 2rem 5rem 2rem;
  /* 底部增加空間給版權資訊 */
  background: transparent;
  min-height: calc(100vh - 5rem);
  /* 80px = 5rem */
  color: #e0e0e0;
  position: relative;
  padding-top: 20vh !important;
  /* 強制拉開導覽列與內容的距離 */
}

/* 展演頁：移除底部空白，讓版權緊貼內容 */
#exhibition .page-container {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  min-height: auto;
}

#exhibition .page-container .page-content {
  width: 100%;
  min-height: 0;
}

#exhibition .page-container .copyright {
  position: static;
  margin-top: 0;
  margin-bottom: 0;
  right: auto;
  bottom: auto;
  text-align: right;
  display: block;
  width: 100%;
}

.page-title {
  font-size: 3rem;
  margin-bottom: 3rem;
  text-align: center;
  color: #e0e0e0;
  font-weight: 700;
}

.page-content {
  width: 100%;
}

/* BIO 頁面樣式 */
.bio-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.bio-image-wrapper {
  width: 23.625rem;
  /* 378px = 23.625rem */
  height: 23.625rem;
  /* 378px = 23.625rem */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
}

.bio-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0 !important;
  /* 移除圓角 */
  display: block;
  /* 確保圖片顯示 */
  opacity: 1;
  /* 確保不透明 */
}

.bio-image-placeholder {
  width: 100%;
  aspect-ratio: 1;
  background: #000000;
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d0d0d0;
  font-size: 1.2rem;
}

.bio-text h2 {
  font-size: 2rem;
  margin-bottom: 1.5rem;
  color: #e0e0e0;
}

.bio-text h3 {
  font-size: 1.5rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  color: #e0e0e0;
}

.bio-text p {
  font-size: 1.1rem;
  line-height: 1.8;
  margin-bottom: 1.5rem;
  color: #d0d0d0;
}

.bio-text p[data-lang-zh] {
  font-size: 1.1rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  font-weight: normal;
}

.bio-text ul {
  margin-left: 2rem;
  font-size: 1.1rem;
  line-height: 2;
  color: #d0d0d0;
}

.bio-text li {
  margin-bottom: 0.5rem;
}

/* Bio 頁 email 超連結 */
.bio-email {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: opacity 0.3s ease;
}
.bio-email:hover {
  opacity: 0.8;
}
body.page-light .bio-email {
  color: #24190b;
}

/* Bio 內容樣式（桌面版原始樣式） */
.bio-content {
  font-size: 1rem;
}

/* 作品網格樣式 */
.artwork-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 2rem;
}

.artwork-item {
  background: #000000;
  border-radius: 15px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.artwork-item:hover {
  transform: translateY(-5px);
}

.artwork-image-placeholder {
  width: 100%;
  aspect-ratio: 4/3;
  background: #000000;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #d0d0d0;
  font-size: 1.2rem;
}

.artwork-info {
  padding: 1.5rem;
}

.artwork-info h3 {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: #e0e0e0;
}

.artwork-info p {
  color: #d0d0d0;
  font-size: 0.95rem;
  line-height: 1.6;
}

.artwork-list {
  display: flex;
  flex-direction: column;
  gap: 4rem;
  width: 100%;
}

.artwork-group {
  width: 100%;
}

.artwork-main {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.artwork-main-image {
  width: 100%;
}

.artwork-main-info {
  width: 100%;
}

.artwork-main-info h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
  color: #e0e0e0;
}

.artwork-meta {
  font-size: 1rem;
  color: #d0d0d0;
  margin-bottom: 1rem;
}

.artwork-description {
  font-size: 1rem;
  line-height: 1.8;
  color: #d0d0d0;
}

/* 書法頁面專用樣式 - 縮小16%並置中（放大20%後從70%變為84%） */
#calligraphy .artwork-list {
  align-items: center;
}

#calligraphy .artwork-group {
  width: 84%;
  transform: scale(0.84);
  transform-origin: center top;
  margin-bottom: -8%;
}

#calligraphy .artwork-main {
  align-items: center;
}

#calligraphy .artwork-main-info {
  text-align: center;
}

#calligraphy .artwork-main-info h2 {
  font-size: 1.512rem;
  /* 1.8rem * 0.84 */
}

#calligraphy .artwork-meta {
  font-size: 1.2rem;
}

#calligraphy .artwork-description {
  font-size: 1.2rem;
}

/* 圖片輪播樣式 */
.image-gallery {
  position: relative;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 25rem;
  /* 400px = 25rem */
  height: auto;
}

/* 繪畫頁面 - 水平滾動視窗 */
#painting .painting-viewport {
  width: 100%;
  height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  position: relative;
}

#painting .painting-track {
  display: flex;
  align-items: center;
  gap: 35vw;
  padding-left: 5vw;
  padding-right: 5vw;
  width: max-content;
  will-change: transform;
  transform: translate3d(0, 0, 0);
  /* Safari性能優化：強制GPU加速 */
  -webkit-transform: translate3d(0, 0, 0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  perspective: 1000px;
  -webkit-perspective: 1000px;
}

#painting .painting-item {
  position: relative;
  height: 60vh;
  width: auto;
  flex-shrink: 0;
}

/* 特定作品縮小版 */
#painting .painting-item.small-size {
  height: 36vh;
  /* 原本 60vh 的 60% */
  align-self: center;
}

#painting .image-wrapper {
  height: 100%;
  width: auto;
}

#painting .painting-item img {
  height: 100%;
  width: auto;
  display: block;
  border-radius: 0 !important;
  box-shadow: none;
  transition: transform 0.5s ease;
  /* Safari性能優化：使用GPU加速 */
  will-change: transform;
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

#painting .caption {
  position: absolute;
  bottom: -48px;
  /* 作品與作品說明間距 48px */
  right: 0;
  font-size: 1rem;
  /* 桌面版作品說明改成 1rem */
  letter-spacing: 0.05em;
  color: #24190b;
  text-shadow: none;
  white-space: nowrap;
}

#painting .painting-viewport::-webkit-scrollbar {
  display: none;
}

.gallery-container {
  position: relative;
  width: 100%;
  aspect-ratio: 4/3;
  overflow: hidden;
  min-height: 25rem;
  /* 400px = 25rem */
  height: auto;
  background: #1a1a1a;
}

/* 書法頁面：作品兩側背景改為米白色 */
#calligraphy .gallery-container {
  background: #fffaf2;
}

/* 篆刻頁面：作品兩側背景改為米白色 */
#sealcarving .gallery-container {
  background: #fffaf2;
}

.gallery-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: 0;
  display: block;
  visibility: visible;
  transition: opacity 0.5s ease-in-out;
  background: #1a1a1a;
}

/* 書法頁面：圖片背景改為米白色 */
#calligraphy .gallery-image {
  background: #fffaf2;
  clip-path: inset(0 0 100% 0);
  will-change: clip-path, opacity;
  border-radius: 2%;
  /* Safari性能優化：使用GPU加速 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 篆刻頁面：圖片背景改為米白色 */
#sealcarving .gallery-image {
  background: #fffaf2;
  clip-path: inset(0 0 100% 0);
  will-change: clip-path, opacity;
  border-radius: 2%;
  /* Safari性能優化：使用GPU加速 */
  transform: translateZ(0);
  -webkit-transform: translateZ(0);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

/* 確保圖片有圓角 */
img {
  border-radius: 12px !important;
  /* 約 2% */
}

.gallery-image.active {
  opacity: 1 !important;
  z-index: 1;
  display: block !important;
  visibility: visible !important;
}

/* 確保 painting 頁面的圖片正確顯示 */
#painting .gallery-container {
  min-height: 31.25rem;
  /* 500px = 31.25rem */
  height: auto;
  background: #1a1a1a;
}

#painting .gallery-image {
  display: block !important;
  visibility: visible !important;
  opacity: 0;
}

#painting .gallery-image.active {
  opacity: 1 !important;
  display: block !important;
  visibility: visible !important;
  z-index: 1;
}

.gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  color: #e0e0e0;
  border: none;
  width: 4.0625rem;
  /* 65px = 4.0625rem */
  height: 4.0625rem;
  /* 65px = 4.0625rem */
  font-size: calc(2rem + 11px);
  /* cursor: pointer; */
  /* 已刪除：與自訂鼠標衝突 */
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  border-radius: 0;
}

/* 書法頁面：箭頭顏色改為深棕色 */
#calligraphy .gallery-nav {
  color: #24190b;
}

#calligraphy .gallery-nav:hover {
  color: #24190b;
  opacity: 0.8;
}

/* 篆刻頁面：箭頭顏色改為深棕色 */
#sealcarving .gallery-nav {
  color: #24190b;
}

#sealcarving .gallery-nav:hover {
  color: #24190b;
  opacity: 0.8;
}

.gallery-prev {
  left: 1.25rem;
  /* 20px = 1.25rem */
}

.gallery-next {
  right: 1.25rem;
  /* 20px = 1.25rem */
}

.gallery-nav:hover {
  background: transparent;
  color: #ffffff;
  transform: translateY(-50%) scale(1.1);
}

.gallery-nav:active {
  transform: translateY(-50%) scale(0.95);
}

/* 響應式設計 - 手機版與平板版 */
@media (max-width: 1024px) {
  /* =========================================
       書法頁面專屬手機版排版修復 (精準隔離)
       只在 .calligraphy-scope-wrapper 下生效
       ========================================= */

  /* 1. 強制重置定位 (Reset Position) */
  .calligraphy-scope-wrapper .page-container,
  .calligraphy-scope-wrapper .page-content,
  .calligraphy-scope-wrapper .artwork-list,
  .calligraphy-scope-wrapper .artwork-group,
  .calligraphy-scope-wrapper .artwork-main,
  .calligraphy-scope-wrapper .artwork-main-image,
  .calligraphy-scope-wrapper .artwork-main-info,
  .calligraphy-scope-wrapper .copyright {
    position: static !important;
    width: 100% !important;
    transform: none !important;
  }

  /* 2. 重建垂直堆疊 (Vertical Stack) */
  .calligraphy-scope-wrapper {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    padding-top: 5rem;
    /* 80px = 5rem */
    /* 避開 Navbar */
    padding-bottom: 0 !important;
    /* 移除底部空白 */
    height: auto !important;
    min-height: auto !important;
  }

  .calligraphy-scope-wrapper .page-container {
    position: static !important;
    width: 100% !important;
    padding: 0 1rem !important;
    padding-top: 0 !important;
    padding-bottom: 2rem !important;
    min-height: auto !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .calligraphy-scope-wrapper .page-content {
    width: 100% !important;
    position: static !important;
  }

  .calligraphy-scope-wrapper .artwork-list {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    align-items: center !important;
  }

  /* 3. 設定間距 (Spacing) */
  .calligraphy-scope-wrapper .artwork-group {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    margin-bottom: 0 !important;
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
  }

  .calligraphy-scope-wrapper .artwork-group:not(:last-child) {
    margin-bottom: 6rem !important;
  }

  .calligraphy-scope-wrapper .artwork-group:last-child {
    margin-bottom: 4rem !important;
  }

  .calligraphy-scope-wrapper .artwork-main {
    width: 100% !important;
    gap: 2rem !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    position: static !important;
  }

  .calligraphy-scope-wrapper .artwork-main-image {
    width: 100% !important;
    margin-bottom: 0 !important;
    position: static !important;
  }

  .calligraphy-scope-wrapper .image-gallery {
    position: relative !important;
    width: 100% !important;
    padding: 0 1.96rem !important;
    /* 31.36px = 1.96rem */
    margin-bottom: 0 !important;
  }

  .calligraphy-scope-wrapper .gallery-container {
    position: relative !important;
    width: 100% !important;
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    background-color: transparent !important;
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    border: none !important;
    outline: none !important;
    border-radius: 0 !important;
  }

  .calligraphy-scope-wrapper .gallery-image {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    transform: scale(1.01) !important;
    border-radius: 0 !important;
    transition: opacity 1s ease-in-out !important;
    border: none !important;
    outline: none !important;
  }

  .calligraphy-scope-wrapper .gallery-nav {
    width: 2.875rem !important;
    /* 46px = 2.875rem */
    height: 2.875rem !important;
    /* 46px = 2.875rem */
    font-size: calc(1.5rem + 6px) !important;
    position: absolute !important;
    z-index: 20 !important;
    color: #24190b !important;
  }

  .calligraphy-scope-wrapper .gallery-nav:hover {
    color: #24190b !important;
    opacity: 0.8 !important;
  }

  .calligraphy-scope-wrapper .gallery-prev {
    left: -1.68rem !important;
    /* 26.88px = 1.68rem */
  }

  .calligraphy-scope-wrapper .gallery-next {
    right: -1.68rem !important;
    /* 26.88px = 1.68rem */
  }

  .calligraphy-scope-wrapper .artwork-main-info {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.75rem !important;
    margin-bottom: 0 !important;
    padding: 0 1.25rem !important;
    /* 20px = 1.25rem */
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    position: static !important;
  }

  .calligraphy-scope-wrapper .artwork-main-info h2 {
    font-size: calc(0.8rem + 2px) !important;
    /* 放大 2px */
    margin-bottom: 0 !important;
    width: 100% !important;
  }

  .calligraphy-scope-wrapper .artwork-main-info p,
  .calligraphy-scope-wrapper .artwork-meta {
    font-size: calc(0.504rem + 2.4px) !important;
    /* calc(0.42rem + 2px) × 1.2 */
    margin-bottom: 0 !important;
    line-height: 1.8 !important;
    width: 100% !important;
  }

  .calligraphy-scope-wrapper .artwork-description,
  .calligraphy-scope-wrapper .artwork-main-info .artwork-description {
    font-size: 0.96rem !important;
    /* 0.8rem × 1.2 */
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
    margin-top: 1rem !important;
    display: block !important;
    position: relative !important;
    height: auto !important;
    opacity: 1 !important;
    width: 100% !important;
  }

  /* calligraphy copyright 在 credits-row 之外（直接在 page-container 內）時的舊規則 */
  .calligraphy-scope-wrapper .page-container .copyright {
    position: relative !important;
    margin-top: 3rem !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    bottom: auto !important;
    right: auto !important;
    display: block !important;
    clear: both !important;
    text-align: right !important;
    line-height: 1.8 !important;
    height: auto !important;
    opacity: 1 !important;
    width: 100% !important;
    padding-right: 1.25rem !important;
  }

  /* ── 關鍵：credits-row 內的 copyright 使用更高特異性規則解除衝突 ──
     .calligraphy-scope-wrapper .page-container .credits-row .copyright (4類 = 0,4,0)
     > .calligraphy-scope-wrapper .page-container .copyright (3類 = 0,3,0)
     確保 flex 橫排的版權不受舊 width:100% / margin-top:3rem 污染。 */
  .calligraphy-scope-wrapper .page-container .credits-row .copyright {
    position: static !important;
    width: auto !important;
    margin-top: 0 !important;
    padding-right: 0 !important;
    clear: none !important;
    text-align: left !important;
    flex: 1;
  }

  /* calligraphy credits-row：與其他頁一致，以 100vw 錨定視窗寬度
     （flex column 置中的父容器內，align-self: flex-start + 負 margin 對齊視窗左緣）*/
  .calligraphy-scope-wrapper .page-container .credits-row {
    width: 100vw !important;
    align-self: flex-start;
    margin-left: calc(50% - 50vw);
  }

  /* 其他頁面的瀏覽鍵保持原樣 */
  .gallery-nav {
    width: 2.875rem;
    /* 46px = 2.875rem */
    height: 2.875rem;
    /* 46px = 2.875rem */
    font-size: calc(1.5rem + 6px);
  }

  .gallery-prev {
    left: 10px;
  }

  .gallery-next {
    right: 10px;
  }
}

/* 版權資訊 */
.copyright {
  position: absolute;
  bottom: 37.8px;
  /* 1cm = 37.8px */
  right: 1.25rem;
  /* 20px = 1.25rem */
  font-size: 0.833rem;
  /* 10pt = 0.833rem */
  color: #d0d0d0;
  z-index: 100;
  font-family:
    "PMingLiU", "新細明體", "MingLiU", "Times New Roman", Times, serif;
  text-align: right;
}

/* 首頁版權保持白色 */
.hero .copyright {
  color: #ffffff;
}

/* 其他頁面版權改為深棕色 */
#bio .copyright,
#calligraphy .copyright,
#sealcarving .copyright,
#painting .copyright,
#exhibition .copyright {
  color: #24190b;
}

/* 每個頁面容器內的版權資訊 */
.page-container .copyright {
  position: absolute;
  bottom: 37.8px;
  /* 1cm = 37.8px */
  right: 1.25rem;
  /* 20px = 1.25rem */
  text-align: right;
}

/* Bio 頁面：版權資訊向右偏移 20% (page-container內的 copyright，桌面版) */
#bio .page-container .copyright {
  padding-right: 20%;
}

/* ══════════════════════════════════════════════════════════
   通用 credits-row：fb圖示（手機）+ 版權說明，所有分頁共用
   桌面版：credits-row 為透明 flex 包裝器，copyright 仍 absolute；
   手機版：credits-row 變身為完整 flex 橫排，兩元素 static 對齊。
   ══════════════════════════════════════════════════════════ */
.credits-row {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  width: 100%;
}

/* 桌面：社群圖示由導覽列負責，此處隱藏 */
.credits-row .page-gmail-icon {
  position: static !important;
  display: none;
  bottom: auto !important;
  left: auto !important;
  flex-shrink: 0;
}
.credits-row .page-facebook-icon {
  position: static !important;
  display: none;
  bottom: auto !important;
  left: auto !important;
  flex-shrink: 0;
}

/* Bio 頁面底部列（credits-row）— 桌面版：右對齊，fb圖示隱藏 */
#bio .credits-row {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.5rem 1.25rem 1rem;
}

#bio .credits-row .copyright {
  position: static;
  bottom: auto;
  right: auto;
  font-size: 0.833rem;
  color: #24190b;
  letter-spacing: 0.1em;
}

/* 響應式設計 - 手機與平板（max-width: 1024px） */
@media screen and (max-width: 1024px) {
  /* Bio 內容響應式樣式 */
  .bio-content {
    width: 70%;
    font-size: 0.84rem;
    /* 0.7rem × 1.2 */
  }

  /* 同時支援 .bio-text（向後兼容，如果 HTML 中使用 .bio-text） */
  .bio-text {
    width: 70%;
    font-size: 0.84rem;
    /* 0.7rem × 1.2 */
  }
}

/* =========================================
   中間過渡層級 (Tablet/Laptop Breakpoint)
   解決導覽列文字重疊問題 (1025px - 1200px)
   注意：769px - 1024px 使用漢堡選單（見下方）
   ========================================= */
@media (max-width: 1200px) and (min-width: 1025px) {
  /* 平板版：導覽列換行佈局 */
  .nav-container {
    flex-wrap: wrap !important;
    /* 允許換行 */
    padding: 0.75rem 1.5rem !important;
    /* 增加上下 padding，為兩行佈局留出空間 */
    height: auto !important;
    /* 自動高度，適應兩行佈局 */
    min-height: 2.5rem;
    /* 最小高度保持原樣 */
    align-items: center;
  }

  /* Logo 在第一行左側 */
  .logo {
    font-size: 1.2rem;
    /* 稍微縮小 Logo 字體 */
    order: 1;
    /* 確保在第一行 */
    margin-bottom: 0;
    width: auto;
  }

  /* 中間導覽連結容器：換到第二行，靠左 */
  .nav-menu-center {
    position: static !important;
    /* 移除絕對定位 */
    transform: none !important;
    /* 移除居中變換 */
    order: 2;
    /* 確保在第二行 */
    flex: 1;
    /* 佔用剩餘空間 */
    min-width: 0;
    /* 允許縮小 */
    margin-right: 1rem;
    /* 與語言切換器保持間距 */
  }

  /* 導覽選單：水平排列，允許換行 */
  .nav-menu {
    justify-content: flex-start;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* 增加間距，避免重疊 */
  }

  /* 減少導覽連結的左右間距 */
  .nav-link {
    padding: 0 15px;
    /* 從 90px 減少到 15px，為平板留出更多空間 */
    font-size: 0.75rem;
    /* 稍微縮小字體 */
  }

  /* 語言切換器：在第二行右側 */
  .language-switcher {
    display: flex !important;
    /* 顯示語言切換器 */
    order: 3;
    /* 確保在第二行右側 */
    flex-shrink: 0;
    /* 防止被壓縮 */
  }

  /* 隱藏手機版元素 */
  .mobile-language-switcher,
  .mobile-menu-toggle {
    display: none !important;
  }
}

/* =========================================
   小平板範圍 (769px - 900px)
   進一步調整間距和字體
   ========================================= */
@media (max-width: 900px) and (min-width: 769px) {
  /* 進一步減少導覽連結間距 */
  .nav-link {
    padding: 0 15px;
    /* 進一步減少間距 */
    font-size: 0.7rem;
    /* 進一步縮小字體 */
  }

  /* Logo 字體再縮小 */
  .logo {
    font-size: 1.1rem;
  }

  /* 導覽選單間距 */
  .nav-menu {
    gap: 0.3rem;
  }
}

/* 響應式設計 - 手機版與平板版（max-width: 1024px，包含 iPad 直立模式） */
@media (max-width: 1024px) {
  /* 網站標題 */
  .logo {
    font-size: 1.17rem;
    /* 0.9rem × 1.3 */
    height: 3.125rem;
    /* 與 nav-container、語言鍵、漢堡選單統一高度，確保同一水平軸 */
    line-height: 1;
    /* 與語言鍵、漢堡選單統一：行盒高度 = 字體大小，消除 Playfair Display 英文上偏問題 */
    margin-left: 7px;
    white-space: nowrap;
    overflow: visible;
    text-overflow: clip;
    max-width: none;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    /* 與語言鍵、漢堡選單相同的垂直置中方式 */
  }

  /* --- 手機版導覽列：漢堡選單模式 --- */
  .nav-container {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    width: 100% !important;
    padding: 0 1rem !important;
    height: 3.125rem !important;
    /* 50px = 3.125rem */
    position: relative !important;
  }

  /* 隱藏原有的導覽選單和語言切換器 */
  .nav-menu-center,
  .language-switcher {
    display: none !important;
    /* 手機版隱藏桌面版語言切換器 */
  }

  /* 手機版：隱藏桌面版社群圖示，顯示頁面內的圖示 */
  .gmail-icon {
    display: none !important;
  }
  .facebook-icon {
    display: none !important;
  }
  .page-gmail-icon {
    display: block !important;
    bottom: 15px !important;
    transform: none !important;
  }
  .page-facebook-icon {
    display: block !important;
    bottom: 15px !important;
    transform: none !important;
  }

  /* 手機版：Logo 靠左對齊 */
  .logo {
    flex-shrink: 0;
    /* 防止被壓縮 */
    margin-right: auto;
    /* 自動右邊距，確保靠左對齊 */
    display: flex;
    align-items: center;
    /* 確保與其他元素垂直對齊 */
  }

  /* 手機版：語言切換器（MENU 左側） - 確保與 Logo 和 MENU 在同一水平軸線 */
  .mobile-language-switcher {
    display: flex !important;
    align-items: center;
    gap: 0.4rem;
    margin-right: 4px;
    margin-left: 0;
    flex-shrink: 0;
    height: 3.125rem;
    line-height: 1;
    /* 不以 line-height 置中，交由 flex align-items: center 統一控制 */
  }

  /* 漢堡選單按鈕 */
  .mobile-menu-toggle {
    display: flex !important;
    align-items: center;
    justify-content: flex-end;
    background: transparent;
    border: none;
    color: #533c1d;
    font-family: "Times New Roman", Times, serif;
    font-size: 0.878rem;
    /* 0.675rem × 1.3 */
    letter-spacing: 0.1em;
    padding: 0;
    /* 移除垂直 padding，避免與 line-height 衝突造成文字上飄 */
    cursor: pointer;
    z-index: 10001;
    position: relative !important;
    margin-right: 0;
    margin-left: 0;
    width: auto;
    flex-shrink: 0;
    height: 3.125rem;
    line-height: 1;
    /* 不以 line-height 置中，交由 flex align-items: center 統一控制 */
  }

  /* 手機版 MENU/CLOSE 按鈕顏色 */
  .mobile-menu-toggle {
    color: #523b1d !important;
  }

  /* 首頁的 menu 固定是白色 */
  body:not(.page-light) .mobile-menu-toggle {
    color: #ffffff !important;
  }

  /* 選單打開時，CLOSE 按鈕顏色（從首頁點擊時轉為深棕色） */
  .mobile-menu-overlay.active ~ .nav-container .mobile-menu-toggle,
  .mobile-menu-overlay.active + * .mobile-menu-toggle {
    color: #24190b !important;
  }

  /* 更精確的選擇器：當選單打開時，CLOSE 按鈕變為深棕色 */
  body .mobile-menu-overlay.active ~ * .mobile-menu-toggle,
  .nav-container:has(~ .mobile-menu-overlay.active) .mobile-menu-toggle {
    color: #24190b !important;
  }

  /* 手機版漢堡選單遮罩（手機版顯示） */
  .mobile-menu-overlay {
    display: block !important;
  }

  .menu-text {
    display: block;
  }

  /* 漢堡選單遮罩 */
  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: #fffaf2;
    z-index: 10000;
    opacity: 0;
    visibility: hidden;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;
    overflow-y: hidden;
    /* 固定一頁式，禁止滾動 */
    -webkit-overflow-scrolling: touch;
  }

  /* 手機版漢堡選單 favicon 圖示：與 CLOSE 按鈕垂直對齊，水平排列 */
  img.mobile-menu-favicon,
  .mobile-menu-favicon {
    position: fixed !important;
    /* 計算位置：navigation padding-top 2rem (32px) + nav-container 高度 3.125rem (50px) / 2 = 3.5625rem (57px) */
    /* favicon 使用 translateY(-50%) 垂直居中，所以 top 設為 3.5625rem */
    top: 3.5625rem !important;
    /* 57px = 3.5625rem，與 CLOSE 按鈕垂直中心對齊 */
    left: 1rem !important;
    /* 從左側 1rem，與 nav-container 的 padding-left 一致 */
    bottom: auto !important;
    /* 移除 bottom，改用 top */
    right: auto !important;
    /* 移除 right */

    margin: 0 !important;
    padding: 0 !important;
    transform: translateY(-50%) !important;
    /* 垂直居中對齊，確保與 CLOSE 按鈕在同一水平線 */

    width: 20px !important;
    height: 20px !important;
    /* 圖示大小 20px × 20px */
    z-index: 10002 !important;
    /* 在遮罩與內容之上 */

    display: block !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition:
      opacity 0.3s ease,
      visibility 0.3s ease;

    pointer-events: none;
    object-fit: contain !important;
    background: transparent !important;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;

    /* 移除點擊時的淺藍色底色 */
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    outline: none !important;
    -webkit-touch-callout: none !important;
  }

  /* 確保圖示在選單打開時可見 - 使用最高優先級 */
  #mobile-menu-overlay.active .mobile-menu-favicon,
  #mobile-menu-overlay.active img.mobile-menu-favicon,
  .mobile-menu-overlay.active .mobile-menu-favicon,
  .mobile-menu-overlay.active img.mobile-menu-favicon {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    position: fixed !important;
    top: 3.5625rem !important;
    /* 57px = 3.5625rem，與 CLOSE 按鈕垂直中心對齊 */
    left: 1rem !important;
    /* 從左側 1rem */
    bottom: auto !important;
    right: auto !important;
    transform: translateY(-50%) !important;
    /* 垂直居中對齊，確保與 CLOSE 按鈕在同一水平線 */
    margin: 0 !important;
    padding: 0 !important;
    width: 20px !important;
    height: 20px !important;
    z-index: 10002 !important;
    pointer-events: auto !important;
    /* 選單打開時啟用點擊事件，讓 favicon 可以點擊 */
    cursor: pointer !important;
    /* 添加 pointer 樣式提示可點擊 */

    /* 移除點擊時的淺藍色底色 */
    -webkit-tap-highlight-color: transparent !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -webkit-user-drag: none !important;
    outline: none !important;
    -webkit-touch-callout: none !important;
  }

  .mobile-menu-overlay.active {
    opacity: 1;
    visibility: visible;
  }

  /* 確保選單打開時，圖示也能顯示 */
  .mobile-menu-overlay.active .mobile-menu-favicon {
    opacity: 1 !important;
    visibility: visible !important;
  }

  /* 漢堡選單內容 */
  .mobile-menu-content {
    width: 100%;
    height: 100vh;
    /* 固定一頁式，高度為視窗高度 */
    max-height: 100vh;
    /* 確保不超出視窗 */
    padding: 2rem;
    /* 簡化 padding，使用 justify-content: center 來置中 */
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    /* 改為 center，讓五個分頁在 667px 高度上置中 */
    position: relative;
    overflow: hidden;
    /* 固定一頁式，禁止內容溢出 */
  }

  /* 確保 CLOSE 按鈕與 MENU 按鈕位置相同（xy 軸一致） */
  .mobile-menu-toggle.menu-open {
    position: relative !important;
    /* 保持相對定位，與 MENU 按鈕在同一水平軸上 */
    z-index: 10001;
    width: auto;
    padding-right: 0;
    justify-content: flex-end;
    /* 確保文字靠右 */
    margin-bottom: 0;
    /* 確保沒有額外的 margin */
  }

  /* 選單打開時，CLOSE 按鈕顏色為深棕色 */
  .mobile-menu-toggle.menu-open {
    color: #24190b !important;
  }

  .mobile-nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    /* 間距由 mobile-menu-content 的 padding-top 控制 */
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0;
  }

  .mobile-nav-menu li {
    width: 100%;
    opacity: 0;
    transform: translateX(1.25rem);
    /* 20px = 1.25rem */
    transition:
      opacity 0.3s ease,
      transform 0.3s ease;
  }

  .mobile-menu-overlay:not(.active) .mobile-nav-menu li {
    opacity: 0;
    transform: translateX(1.25rem);
    /* 20px = 1.25rem */
  }

  .mobile-menu-overlay.active .mobile-nav-menu li {
    animation: slideInFromRight 1s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  }

  .mobile-menu-overlay.active .mobile-nav-menu li:nth-child(1) {
    animation-delay: 0.1s;
  }

  .mobile-menu-overlay.active .mobile-nav-menu li:nth-child(2) {
    animation-delay: 0.2s;
  }

  .mobile-menu-overlay.active .mobile-nav-menu li:nth-child(3) {
    animation-delay: 0.3s;
  }

  .mobile-menu-overlay.active .mobile-nav-menu li:nth-child(4) {
    animation-delay: 0.4s;
  }

  .mobile-menu-overlay.active .mobile-nav-menu li:nth-child(5) {
    animation-delay: 0.5s;
  }

  @keyframes slideInFromRight {
    from {
      opacity: 0;
      transform: translateX(1.25rem);
      /* 20px = 1.25rem */
    }

    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  .mobile-nav-link {
    display: block;
    padding: 1.8rem 0;
    /* 增加20%間距：1.5rem * 1.2 = 1.8rem */
    color: #c4b5a0;
    /* 預設為淺灰色，與深棕色 #523b1d 形成對比 */
    font-family: "Times New Roman", Times, serif;
    font-size: 1rem;
    text-decoration: none;
    text-align: right;
    width: 100%;
    position: relative;
    overflow: visible;
    /* 改為 visible，確保沒有隱藏的文字 */
    transition: color 0.3s ease;
    padding-right: 0;
    /* 確保與 CLOSE 按鈕對齊 */
    -webkit-tap-highlight-color: transparent;
    outline: none;
  }

  /* 當前分頁顯示為深棕色 */
  .mobile-nav-link.active {
    color: #523b1d !important;
    /* 深棕色，與淺灰色 #c4b5a0 形成明顯對比 */
  }

  .mobile-nav-link .roll-text {
    height: 2.5rem;
    /* 40px = 2.5rem */
    text-align: right;
    transition: none !important;
    /* 移除手機版的滾動效果 */
    transform: none !important;
    /* 強制移除任何 transform */
    overflow: visible;
    /* 確保沒有隱藏的文字 */
  }

  .mobile-nav-link .roll-text span {
    height: 2.5rem;
    /* 40px = 2.5rem */
    font-size: 0.8rem;
    /* 手機版縮小20%：1rem * 0.8 = 0.8rem */
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-align: right;
    width: 100%;
  }

  /* 手機版：只顯示第一個 span，隱藏第二個 span */
  .mobile-nav-link .roll-text span:nth-child(2) {
    display: none !important;
  }

  /* 手機版移除 hover 滾動效果 */
  .mobile-nav-link:hover .roll-text {
    transform: none !important;
  }

  .mobile-nav-link:active .roll-text {
    transform: none !important;
  }

  /* 點擊時的深色狀態 */
  .mobile-nav-link.clicking {
    color: #24190b !important;
    transition: color 0.2s ease;
  }

  /* 點擊時的深色狀態 - 文字內容 */
  .mobile-nav-link.clicking .roll-text span {
    color: #24190b !important;
  }

  /* 其他分頁變淡色 */
  .mobile-nav-link.fading {
    color: #a9a9a9 !important;
    transition: color 0.2s ease;
  }

  /* 其他分頁變淡色 - 文字內容 */
  .mobile-nav-link.fading .roll-text span {
    color: #a9a9a9 !important;
  }

  .mobile-nav-link .roll-text.text-zh span {
    font-size: 0.95rem;
  }

  .roll-text span {
    font-size: 0.525rem;
    /* 縮小30%以匹配導覽列 */
  }

  /* 調整滾動文字容器高度以匹配縮小後的導覽列 */
  .roll-text {
    height: 4rem;
    /* 64px = 4rem */
    /* 從 80px 縮小到 64px (兩個 32px 的高度) */
  }

  .roll-text span {
    height: 2rem;
    /* 32px = 2rem */
    /* 從 40px 縮小到 32px */
  }

  /* 手機版移除原有的導覽選單滾動效果（因為已經隱藏） */
  /* .nav-link:hover .roll-text 已移除，因為手機版使用漢堡選單 */

  /* 語言切換按鈕縮小到跟導覽列大小一樣 */
  .language-switcher {
    height: 32px;
    /* 與導覽列高度一致 */
    line-height: 32px;
    gap: 0.4rem;
    /* 從 0.5rem 縮小到 0.4rem */
    margin-right: 0;
    /* 手機版不需要 margin */
  }

  /* 手機版導覽列中的語言切換按鈕（MENU 左側） */
  .mobile-language-switcher .lang-btn {
    font-size: 0.676rem;
    /* 0.52rem × 1.3 */
    color: #523b1d;
    /* 與其他選單項目顏色一致 */
    padding: 0.2rem 0.4rem;
    height: auto;
    line-height: 1.2;
    display: flex;
    align-items: center;
    /* 確保文字垂直居中 */
  }

  .mobile-language-switcher .lang-btn.active {
    color: #24190b;
    /* 活動狀態：深棕色 */
  }

  .mobile-language-switcher .lang-separator {
    font-size: 0.676rem;
    /* 0.52rem × 1.3，與按鈕字型一致 */
    color: #523b1d;
    /* 與其他選單項目顏色一致 */
    display: flex;
    align-items: center;
    /* 確保分隔符號垂直居中 */
    line-height: 1.2;
  }

  /* 首頁的語言切換按鈕顏色 */
  body:not(.page-light) .mobile-language-switcher .lang-btn {
    color: #ffffff !important;
  }

  body:not(.page-light) .mobile-language-switcher .lang-btn.active {
    color: #ffffff !important;
  }

  body:not(.page-light) .mobile-language-switcher .lang-separator {
    color: rgba(255, 255, 255, 0.4) !important;
  }

  /* 手機版：版權資訊樣式調整 */
  .copyright {
    font-size: 0.583rem;
    /* 7pt = 0.583rem */
    bottom: 15px;
    right: 15px;
    /* 調整位置 */
  }

  .page-container .copyright {
    bottom: 15px;
    right: 15px;
    font-size: 0.583rem;
    /* 7pt = 0.583rem */
  }

  /* 手機版：credits-row — 版權左對齊 logo，Gmail/FB 右對齊 MENU，Gmail-FB 間距縮小 10%
     以 100vw 錨定視窗寬度，不受各頁父容器 padding 差異影響，
     左右內距與首頁 hero-credits 一致（左 1rem+7px 對齊 logo，右 1rem 對齊 MENU） */
  .credits-row {
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    width: 100vw !important;
    margin-left: calc(50% - 50vw);
    margin-top: 20px;
    padding: 0 1rem 20px calc(1rem + 7px);
  }

  .credits-row .page-gmail-icon,
  .credits-row .page-facebook-icon {
    flex-shrink: 0;
  }

  .credits-row .page-gmail-icon {
    margin: 0 0.675rem 0 0;
    /* 0.75rem × 0.9，Gmail-FB 間距縮小 10% */
    position: static !important;
    display: flex !important;
    align-items: center;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    opacity: 0.85;
    order: 2;
  }

  .credits-row .page-facebook-icon {
    position: static !important;
    display: flex !important;
    align-items: center;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    opacity: 0.85;
    margin: 0;
    order: 3;
  }

  .credits-row .copyright {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    width: auto !important;
    margin: 0 0.75rem 0 0 !important;
    padding: 0 !important;
    font-size: 0.5rem !important;
    letter-spacing: 0 !important;
    color: #24190b;
    text-align: left !important;
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
    min-width: 0;
    order: 1;
  }

  /* Bio 頁面：版權左對齊 logo，Gmail/FB 右對齊 MENU，Gmail-FB 間距縮小 10% */
  #bio .credits-row {
    display: flex !important;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    margin-top: 20px;
    padding: 0 1rem 20px calc(1rem + 7px);
  }

  #bio .credits-row .page-gmail-icon {
    position: static !important;
    transform: none !important;
    display: flex !important;
    align-items: center;
    opacity: 0.85;
    margin-right: 0.675rem;
    order: 2;
  }

  #bio .credits-row .page-facebook-icon {
    position: static !important;
    transform: none !important;
    display: flex !important;
    align-items: center;
    opacity: 0.85;
    margin: 0;
    order: 3;
  }

  #bio .credits-row .copyright {
    position: static !important;
    bottom: auto !important;
    right: auto !important;
    margin: 0 0.75rem 0 0 !important;
    padding: 0 !important;
    font-size: 0.5rem !important;
    letter-spacing: 0 !important;
    color: #24190b;
    text-align: left !important;
    white-space: nowrap;
    overflow: hidden;
    flex: 1;
    min-width: 0;
    order: 1;
  }

  .lang-btn {
    font-size: 0.683rem;
    /* 0.525rem × 1.3 */
    padding: 0.2rem 0.4rem;
    height: 41.6px;
    /* 32px × 1.3 */
    line-height: 41.6px;
  }

  /* 繪畫頁面：照片放大30%（整個容器） */
  #painting .painting-item {
    height: 43.68vh;
    /* 放大30%: 33.6vh * 1.3 = 43.68vh */
  }

  #painting .painting-item.small-size {
    height: 26.208vh;
    /* 放大30%: 20.16vh * 1.3 = 26.208vh */
  }

  #painting .caption {
    font-size: 0.54rem;
    /* 手機版調整為 0.54rem */
    bottom: -35px;
    /* 確保照片與文字距離保持一致 */
  }

  .main-content {
    padding-top: 0;
    /* 移除 padding-top，讓內容可以延伸到頂部，襯在 Navbar 下方 */
  }

  .page-container {
    padding: 2rem 1rem;
    padding-top: 6.25rem;
    /* 100px = 6.25rem */
    /* 手機版增加頂部間距，避免被導覽列遮擋 */
  }

  .page-title {
    font-size: 2rem;
    margin-bottom: 2rem;
  }

  .page-content {
    width: 100%;
    /* 確保手機版內容寬度100% */
  }

  /* Bio 頁面：照片置中，圖文縮小30% */
  .bio-section {
    grid-template-columns: 1fr;
    gap: 2rem;
    align-items: center;
    justify-content: center;
    margin-top: 9.375rem;
    /* 150px = 9.375rem */
    /* 往下移動 150px，避免被導覽列遮擋 */
  }

  #bio .bio-image-wrapper {
    width: 17.199rem;
    /* 13.23rem × 1.3 */
    height: 17.199rem;
    /* 13.23rem × 1.3 */
    margin: 0 auto;
    /* 置中 */
  }

  #bio .bio-text {
    width: 91%;
    margin: 0 auto;
    font-size: 0.924rem;
    margin-bottom: 2.8rem;
  }

  #bio .bio-text p {
    font-size: 0.924rem;
    /* 0.77rem × 1.2 */
    line-height: 1.8;
  }

  #bio .bio-text ul {
    font-size: 0.924rem;
    /* 0.77rem × 1.2 */
  }

  .bio-image-placeholder {
    max-width: 17.063rem;
    /* 13.125rem × 1.3 */
    margin: 0 auto;
  }

  .artwork-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .copyright {
    font-size: 0.583rem;
    /* 7pt = 0.583rem */
    bottom: 15px;
    right: 15px;
  }
}


/* =========================================
   展演頁面樣式 (Exhibition Page Styles)
   ========================================= */
#main-content.exhibition-locked {
  opacity: 0;
  transform: translateY(50px);
}

/* The Unfurling Scroll Styles */
.timeline-container {
  position: relative;
  min-height: 0;
  padding: 6.25rem 0 0;
  /* 100px = 6.25rem */
  background: transparent;
  overflow: visible;
}

/* REMOVED: Static central spine - 刪除靜態中軸線 */
/* REMOVED: Guiding line divs - 刪除引導線div */

/* The Origin Dot - 時間軸起點 (SVG Circle) */
#timeline-origin-dot {
  fill: #a32424;
  filter: drop-shadow(0 0 6px rgba(163, 36, 36, 0.45));
  transform: translateZ(0);
  will-change: transform;
  z-index: 2;
}

/* The Vertical Line - 垂直敘事線條 (SVG) */
#hero-path {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  /* Line BELOW dot - 線條在圓點下方 */
  will-change: transform;
  transform: translateZ(0);
}

#hero-path path {
  fill: none;
  stroke: #a32424;
  stroke-width: 1.26;
  /* 變細10%: 1.4px * 0.9 = 1.26px */
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.7;
  /* 隱約視覺效果 */
  filter: drop-shadow(0 0 4px rgba(163, 36, 36, 0.3));
  will-change: transform, stroke-dashoffset;
  transform: translateZ(0);
}

#hero-path .timeline-branch {
  stroke-width: 0.665;
  /* 變細5%: 0.7px * 0.95 = 0.665px */
  opacity: 0;
  will-change: transform, stroke-dashoffset;
  transform: translateZ(0);
}

/* Exhibition Section Styling */
.exhibition-section {
  position: relative;
  margin: 18.75rem 0;
  /* 300px = 18.75rem */
  opacity: 1;
}

.exhibition-section:last-child {
  margin-bottom: 0;
}

.exhibition-section.hidden {
  opacity: 0;
}

.timeline-year {
  position: relative;
  padding: 12.5rem 0;
  /* 200px = 12.5rem */
  max-width: 75rem;
  /* 1200px = 75rem */
  margin: 0 auto;
  z-index: 2;
}

.year-title {
  position: absolute;
  left: calc(50% - 9.375rem);
  /* 150px = 9.375rem */
  top: 9.375rem;
  /* 150px = 9.375rem */
  transform: translateX(-50%);
  font-size: 1.644rem;
  /* 1.37rem × 1.2 */
  color: rgba(180, 180, 180, 0.9);
  font-family: "Playfair Display", serif;
  font-weight: 600;
  letter-spacing: 0.1em;
  opacity: 0;
  background: transparent;
  padding: 0;
  border-radius: 0;
  z-index: 3;
}

.timeline-works {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.375rem;
  /* 70px = 4.375rem */
  padding: 0 3.125rem;
  /* 50px = 3.125rem */
  margin-top: 6.25rem;
  /* 100px = 6.25rem */
}

.works-left,
.works-right {
  display: flex;
  flex-direction: column;
  gap: 3.5rem;
  /* 56px = 3.5rem */
  flex: 1;
  /* 確保左右均分空間 */
  min-width: 0;
  /* 防止 flex 子元素溢出 */
}

.works-left {
  align-items: flex-end;
  padding-right: 3.125rem;
  /* 50px = 3.125rem */
}

.works-right {
  align-items: flex-start;
  padding-left: 3.125rem;
  /* 50px = 3.125rem */
}

.work-item {
  max-width: 40rem;
  /* 640px = 40rem */
  width: 40rem;
  /* 640px = 40rem */
  /* 強制固定寬度確保對稱 */
  opacity: 0;
  clip-path: inset(0 0 100% 0);
  /* 修正：從上往下展開 */
  position: relative;
  will-change: clip-path, transform, opacity;
  transform: translateZ(0);
}

/* Carousel Container - Sharp Corners + Fixed Aspect Ratio */
.work-carousel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  /* 固定寬高比 4:3 */
  overflow: hidden;
  border-radius: 0 !important;
  /* Sharp edges only - 強制 */
  box-shadow: none;
  will-change: transform;
  transform: translateZ(0);
}

.carousel-track {
  position: relative;
  width: 100%;
  height: 100%;
}

.carousel-slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.8s ease;
  will-change: opacity, transform;
  transform: translateZ(0);
}

.carousel-slide.active {
  opacity: 1;
}

.carousel-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 填滿框架，裁切溢出部分 */
  border-radius: 0 !important;
  /* Sharp edges only - 強制 */
  transform: translateZ(0);
  will-change: transform;
}

.work-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* 填滿框架，裁切溢出部分 */
  border-radius: 0 !important;
  /* Sharp edges only - 強制 */
  box-shadow: none;
  transform: translateZ(0);
  will-change: transform;
}

.work-caption {
  margin-top: 15px;
  /* 小間距保持 px */
  font-size: 0.99rem;
  /* 0.9rem × 1.1 */
  color: rgba(180, 180, 180, 0.8);
  text-align: center;
  font-family: "Times New Roman", serif;
  letter-spacing: 0.05em;
}

/* Carousel indicators */
.carousel-indicators {
  position: absolute;
  bottom: -30px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(180, 180, 180, 0.3);
  transition: background 0.3s ease;
}

.carousel-dot.active {
  background: rgba(180, 180, 180, 0.8);
}

@media (max-width: 1024px) {
  /* 展演頁面：紅圓點與紅線縮小20%，往右邊移動貼齊照片的右側邊緣 */
  #hero-path path {
    stroke-width: 1.08;
    /* 變細10%: 1.2px * 0.9 = 1.08px */
  }

  #timeline-origin-dot {
    r: 2.88;
    /* 縮小20%: 3.6px * 0.8 = 2.88px */
  }

  .timeline-works {
    grid-template-columns: 1fr;
    gap: 1.4rem;
    /* 22.4px = 1.4rem */
    padding: 0 1.25rem;
    /* 20px = 1.25rem */
  }

  .works-left,
  .works-right {
    align-items: center;
    padding: 0;
    gap: 1.4rem;
    /* 22.4px = 1.4rem */
  }

  /* 展演照片縮小30%，變成長方形 */
  #exhibition .work-item {
    max-width: 28rem;
    /* 448px = 28rem */
    width: 28rem;
    /* 448px = 28rem */
  }

  #exhibition .work-carousel {
    aspect-ratio: 3 / 2;
    /* 變成長方形 (從 4:3 改為 3:2) */
  }

  .year-title {
    font-size: 1.151rem;
    /* 0.959rem × 1.2 */
    left: calc(50% - 5rem);
    /* 80px = 5rem */
  }

  /* 展演頁面：每個年代之間的距離 */
  .exhibition-section {
    margin: 8.5rem 0;
    /* 136px = 8.5rem */
  }

  .timeline-year {
    padding: 6rem 0;
    /* 96px = 6rem */
  }
}

/* =========================================
   篆刻頁面：3D 立方體樣式
   ========================================= */

/* --- 3D Cube 場景設定 --- */
.scene-container {
  width: 100%;
  height: 70vh;
  /* 展示區高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 1200px;
  /* 透視感，數字越小越誇張，1200是標準 */
  -webkit-perspective: 1200px;
  /* Safari 3D 透視支持 */
  perspective-origin: center center;
  /* 確保透視原點在中心 */
  position: relative;
  z-index: 10;
  /* 確保骰子在頁面 xy 軸正中央 */
  margin: 0 auto;
  transform-style: preserve-3d;
  /* 確保 3D 空間保留 */
}

/* Click 文字 */
.cube-click-text {
  position: absolute;
  top: 5rem;
  /* 80px = 5rem */
  /* 從 scene-container 頂部往下 80px */
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.75rem;
  /* 12px = 0.75rem */
  font-family: "Times New Roman", Times, serif;
  color: #868687;
  z-index: 1;
  /* 低於骰子的 z-index，不擋到骰子 */
  pointer-events: none;
  /* 不阻擋點擊事件 */
  white-space: nowrap;
}

/* 立方體本體 */
.cube {
  width: 11.25rem;
  /* 180px = 11.25rem */
  height: 11.25rem;
  /* 180px = 11.25rem */
  position: relative;
  transform-style: preserve-3d;
  /* 關鍵：保留 3D 空間 */
  transform: rotateX(-20deg) rotateY(-20deg) translateZ(0);
  /* 初始角度 + 硬體加速 */
  cursor: grab;
  /* 提示可拖曳 */
  /* 允許 GSAP 覆蓋 transform */
  will-change: transform;
  /* 確保骰子在頁面正中央 */
  margin: 0 auto;
  z-index: 2;
  /* 確保骰子在文字上方 */

  /* 性能優化 */
  -webkit-transform-style: preserve-3d;
  /* Safari 3D 支持 */
}

.cube:active {
  cursor: grabbing;
}

/* 每一面的通用樣式 - 修改版 */
.cube-face {
  position: absolute;
  width: 11.25rem;
  /* 180px = 11.25rem */
  height: 11.25rem;
  /* 180px = 11.25rem */
  background-color: #fffaf2;
  /* 米白色背景 */
  /* border: 1px solid #eee; <-- 移除這個舊邊框，讓光影來定義邊界 */
  border-radius: 3px;
  /* 圓角 */
  background-size: 90%;
  /* 照片顯示為 90% 大小 */
  background-position: center;
  background-repeat: no-repeat;
  background-blend-mode: normal;
  /* 確保背景色和圖片正常混合 */
  /* opacity: 0.95; <-- 移除這個整體透明度，改用疊加層控制 */
  /* box-shadow: inset... <-- 移除舊的內陰影 */

  /* 關鍵：確保子元素(疊加層)不會超出範圍，且能維持 3D 效果 */
  transform-style: preserve-3d;
  backface-visibility: visible;
  /* 改為 visible，確保所有面都能看到 */
  -webkit-backface-visibility: visible;
  /* Safari 優化 */

  /* 性能優化 */
  will-change: transform;
  /* 提示瀏覽器優化 transform */
}

/* --- 3D 建構邏輯 (Transform) --- */
/* TranslateZ 的數值必須是寬度的一半 (180px / 2 = 90px) */
.face-front {
  transform: rotateY(0deg) translateZ(5.625rem);
  /* 90px = 5.625rem */
  background-image: url("images/seal carving/seal carving_01.webp");
  /* 性能優化：使用 fetchpriority 提示 */
}

.face-back {
  transform: rotateY(180deg) translateZ(5.625rem);
  /* 90px = 5.625rem */
  background-image: url("images/seal carving/seal carving_02.webp");
}

.face-right {
  transform: rotateY(90deg) translateZ(5.625rem);
  /* 90px = 5.625rem */
  background-image: url("images/seal carving/seal carving_03.webp");
}

.face-left {
  transform: rotateY(-90deg) translateZ(5.625rem);
  /* 90px = 5.625rem */
  background-image: url("images/seal carving/seal carving_04.webp");
}

.face-top {
  transform: rotateX(90deg) translateZ(5.625rem);
  /* 90px = 5.625rem */
  background-image: url("images/seal carving/seal carving_05.webp");
}

.face-bottom {
  transform: rotateX(-90deg) translateZ(5.625rem);
  /* 90px = 5.625rem */
  background-image: url("images/seal carving/seal carving_06.webp");
}

/* --- 動態光影系統 (Dynamic Lighting System) --- */

/* 所有面的通用疊加層 */
.cube-face::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  /* 讓點擊穿透 */
  z-index: 2;
  border-radius: 3px;
  /* 繼承父元素的圓角 */

  /* 核心修改：背景色改用黑色，透明度由 JS 計算的變數控制 */
  background-color: #000;
  opacity: var(--shade, 0);
  /* 預設為 0 (全亮) */

  /* 讓光影變化跟隨動畫一樣絲滑，稍快於骰子轉動 */
  transition: opacity 0.1s linear;
}

/* 移除原本個別面的固定光影設定 */
/* 我們將完全依賴 JS 計算 */

/* 翻轉時的光澤效果 - 溫柔的光澤（合併到 .cube-face 基礎樣式中） */

/* 光澤效果將由疊加層控制，這裡先移除舊的 hover 效果 */

/* 陰影 */
.cube-shadow {
  width: 12.5rem;
  /* 200px = 12.5rem */
  height: 2.5rem;
  /* 40px = 2.5rem */
  background: #bbbdbf;
  border-radius: 50%;
  filter: blur(20px);
  position: absolute;
  bottom: 15%;
  /* 在立方體下方 */
  left: 50%;
  transform: translateX(-50%);
  opacity: 0.5;
  z-index: 1;
  animation: breathe 4s ease-in-out infinite;
}

/* 呼吸動畫 */
@keyframes breathe {
  0%,
  100% {
    transform: translateX(-50%) scale(1);
    opacity: 0.5;
  }

  50% {
    transform: translateX(-50%) scale(0.85);
    opacity: 0.3;
  }
}

/* Lightbox 樣式 */
#lightbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 99999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s;
}

#lightbox.hidden {
  display: none;
}

#lightbox.active {
  opacity: 1;
  pointer-events: auto;
}

#lightbox .lightbox-overlay {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.95);
}

#lightbox-img {
  max-width: 80%;
  max-height: 80%;
  z-index: 2;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2);
}

#close-lightbox {
  position: absolute;
  top: 1.875rem;
  /* 30px = 1.875rem */
  right: 1.875rem;
  /* 30px = 1.875rem */
  font-size: 2rem;
  border: none;
  background: none;
  cursor: pointer;
  z-index: 3;
  color: #333;
}

/* 篆刻頁面：關閉按鈕 hover 效果 */
#close-lightbox:hover {
  color: #24190b;
  opacity: 0.8;
}

/* =========================================
   篆刻頁面：新頁面樣式（從右邊滑入）
   ========================================= */
.seal-detail-view {
  width: 100%;
  min-height: 70vh;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: 7.5rem 0 8rem 0;
  /* 120px = 7.5rem */
  position: relative;
  overflow: visible;
  will-change: transform, opacity;
  margin-bottom: 0;
}

.seal-detail-view.hidden {
  display: none !important;
}

.seal-detail-container {
  max-width: 75rem;
  /* 1200px = 75rem */
  width: 100%;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6rem;
  align-items: start;
  /* 確保照片和文字從頂部對齊 */
  padding: 0 2rem 3rem 2rem;
  overflow: visible;
  margin-bottom: 2rem;
}

.seal-detail-image-wrapper {
  width: 100%;
  aspect-ratio: 1;
  overflow: visible;
  background: transparent;
  display: flex;
  align-items: flex-start;
  /* 從頂部對齊 */
  justify-content: center;
  transform: scale(1.8);
  transform-origin: top center;
  /* 從頂部中心點縮放，確保與文字頂部對齊 */
  position: relative;
  z-index: 1;
  align-self: start;
  /* 確保 grid 項目從頂部對齊 */
  margin-top: 0;
  padding-top: 0;
}

.seal-detail-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
  transform: scale(1);
  transform-origin: center;
}

.seal-detail-info {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  color: #24190b;
  position: relative;
  z-index: 2;
  align-self: start;
  /* 確保與照片頂部對齊 */
  margin-top: 0;
  padding-top: 0;
}

.seal-detail-title {
  font-size: 1.2rem;
  font-weight: 600;
  margin: 0;
  padding: 0;
  line-height: 1.2;
  /* 減少 line-height，確保與圖片頂部對齊 */
  color: #24190b;
  font-family: "Times New Roman", Times, serif;
}

.seal-detail-meta {
  font-size: 0.88rem;
  color: #24190b;
  opacity: 0.8;
  margin: 0;
  font-family: "Times New Roman", Times, serif;
}

.seal-detail-description {
  font-size: 0.88rem;
  line-height: 1.8;
  color: #24190b;
  margin: 0;
  font-family: "Times New Roman", Times, serif;
}

.seal-detail-description p {
  margin: 0 0 3em 0;
  font-size: 0.88rem;
  line-height: 1.8;
  color: #24190b;
  font-family: "Times New Roman", Times, serif;
}

.seal-detail-description p:last-child {
  margin-bottom: 0;
}


/* =========================================
   篆刻作品頁：13 吋筆電範圍 (1025px - 1440px)
   原始 scale(1.8) 在此範圍視覺溢出 220px 覆蓋文字欄，
   降低為 scale(1.5) 並拉大 gap 確保呼吸空間。
   ========================================= */
@media (max-width: 1440px) and (min-width: 1025px) {
  .seal-detail-container {
    gap: 10rem;
    /* 160px：大於圖片視覺溢出量（≈130px），確保不重疊 */
  }

  .seal-detail-image-wrapper {
    transform: scale(1.5);
    /* 降低放大倍率：1.8 → 1.5，視覺溢出從 220px 降至 130px */
    transform-origin: top center;
  }
}

/* 響應式設計：手機版與平板版調整 */
@media (max-width: 1024px) {
  .scene-container {
    height: 60vh;
    /* 手機版稍微降低高度 */
    perspective: 800px;
    /* 手機版調整透視感 */
  }

  .cube-click-text {
    top: 6.25rem;
    /* 100px = 6.25rem */
    /* 從導覽列往下 100px（相對於 scene-container） */
    font-size: 0.81rem;
    /* 0.9rem × 0.9 */
  }

  .cube {
    width: 7.8rem;
    /* 6.5rem × 1.2 */
    height: 7.8rem;
    /* 6.5rem × 1.2 */
    margin-top: 8.75rem;
    /* 140px = 8.75rem */
  }

  .cube-face {
    width: 7.8rem;
    /* 6.5rem × 1.2 */
    height: 7.8rem;
    /* 6.5rem × 1.2 */
    border-radius: 3px;
    background-size: 90%;
    background-color: #fffaf2;
  }

  /* 調整立方體各面的 translateZ 值 (寬度的一半) */
  .face-front {
    transform: rotateY(0deg) translateZ(3.9rem);
    /* 7.8rem ÷ 2 */
  }

  .face-back {
    transform: rotateY(180deg) translateZ(3.9rem);
  }

  .face-right {
    transform: rotateY(90deg) translateZ(3.9rem);
  }

  .face-left {
    transform: rotateY(-90deg) translateZ(3.9rem);
  }

  .face-top {
    transform: rotateX(90deg) translateZ(3.9rem);
  }

  .face-bottom {
    transform: rotateX(-90deg) translateZ(3.9rem);
  }

  .cube-shadow {
    width: 7.5rem;
    /* 6.25rem × 1.2 */
    height: 1.25rem;
    /* 20px = 1.25rem */
    bottom: 10%;
  }

  #close-lightbox {
    top: 15px;
    right: 15px;
    font-size: 1.5rem;
    /* 保持 rem */
  }

  /* 手機版：新頁面改為垂直堆疊 */
  .seal-detail-view {
    padding: 3.75rem 0 2.6rem 0;
    /* 60px = 3.75rem */
  }

  .seal-detail-container {
    grid-template-columns: 1fr;
    gap: calc(3rem + 1.875rem);
    /* 30px = 1.875rem */
    padding: 0 1rem 2rem 1rem;
    margin-bottom: 1.5rem;
  }

  /* 手機版：作品說明往下移動，避免與照片重疊 */
  .seal-detail-info {
    margin-top: 100vw;
  }

  .seal-detail-image-wrapper {
    aspect-ratio: 1;
    transform: scale(2.34) !important;
    /* 手機版放大：桌面版 1.8 * 1.3 = 2.34（在桌面版基礎上再放大30%），使用 !important 確保覆蓋桌面版 */
    transform-origin: top center !important;
    /* 從頂部中心點縮放，確保與文字頂部對齊 */
  }

  .seal-detail-title {
    font-size: 0.936rem;
    /* 1.17rem × 0.8 */
  }

  .seal-detail-meta {
    font-size: 0.845rem;
    /* 0.65rem × 1.3 */
  }

  .seal-detail-description {
    font-size: 0.8rem;
  }

  .seal-detail-description p {
    font-size: 0.8rem;
    margin: 0 0 3em 0;
    /* 保持間距不變，確保照片與文字距離與版權說明保持一致 */
  }

  /* 手機版：書法作品照片淡入（1秒） */
  #calligraphy .image-gallery {
    opacity: 0;
    transition: opacity 1s ease;
  }

  #calligraphy .image-gallery.calligraphy-visible {
    opacity: 1;
  }

  #calligraphy .gallery-image {
    clip-path: inset(0 0 0% 0);
    transition: opacity 1s ease;
  }

  /* 手機版：書法作品說明文字（釋文） */
  #calligraphy .artwork-description,
  #calligraphy .artwork-main-info .artwork-description,
  .calligraphy-scope-wrapper .artwork-description,
  .calligraphy-scope-wrapper .artwork-main-info .artwork-description {
    font-size: 0.96rem !important;
    /* 0.8rem × 1.2 */
    line-height: 1.6 !important;
    margin-bottom: 0 !important;
    margin-top: 1rem !important;
    /* 確保間距保持一致 */
    display: block !important;
    position: relative !important;
    height: auto !important;
    opacity: 1 !important;
    width: 100% !important;
  }

  /* 確保所有頁面的版權資訊在手機版都有適當的樣式 */
  #bio .page-container .copyright,
  #calligraphy .page-container .copyright,
  #sealcarving .page-container .copyright,
  #painting .page-container .copyright,
  #exhibition .page-container .copyright {
    font-size: 0.583rem;
    /* 7pt = 0.583rem */
    bottom: 15px;
    right: 15px;
  }

  /* 確保首頁在手機版正常顯示 */
  .hero,
  .hero-slideshow {
    width: 100vw !important;
    height: 100vh !important;
  }

  /* 確保所有頁面容器在手機版都有適當的間距和寬度 */
  #bio .page-container,
  #calligraphy .page-container,
  #sealcarving .page-container,
  #painting .page-container,
  #exhibition .page-container {
    padding: 2rem 1rem;
    padding-top: 100px;
    /* 手機版統一增加頂部間距 */
    max-width: 100%;
    /* 確保不會超出螢幕寬度 */
  }

  /* 手機版：篆刻頁面骰子與版權說明之間的距離增加50px */
  #sealcarving .scene-container {
    margin-bottom: calc(3rem + 100px);
    /* 原本3rem + 50px，再增加50px = 3rem + 100px */
  }

  /* 確保繪畫頁面在手機版正常顯示 */
  #painting .painting-viewport {
    height: 100vh;
    /* 保持全螢幕高度 */
  }

  #painting .painting-track {
    gap: 28vw;
    /* 手機版增加40%間距：20vw * 1.4 = 28vw */
    padding-left: 8vw;
    /* 手機版左右留白改成 8vw */
    padding-right: 8vw;
    /* 手機版左右留白改成 8vw */
  }

  /* 確保所有圖片在手機版都能正常顯示 */
  img {
    max-width: 100%;
    height: auto;
    /* 響應式圖片 */
  }

  /* 確保所有按鈕和連結在手機版都有適當的觸控區域 */
  button,
  a,
  .gallery-nav {
    min-height: 2.75rem;
    /* 44px = 2.75rem */
    min-width: 2.75rem;
    /* 44px = 2.75rem */
  }
}