/* ============ 故宫博物院 · 专题页样式 v2.0 ============ */
/* 故宫页面专属国风视觉体系（独立于全局主题，仅作用于 body.gugong-page） */

/* ========== 故宫页面专属强制国风 - 不影响全局主题 ========== */
body.gugong-page {
  /* 故宫红系 - 严格按规范色值 */
  --gg-red: #9B2226;
  --gg-red-light: #C7363B;
  --gg-red-soft: #E87075;
  --gg-red-deep: #7A1B1E;
  /* 琉璃金系 */
  --gg-gold: #D4AF37;
  --gg-gold-light: #F9E7B8;
  --gg-gold-deep: #A68728;
  /* 墨色文字系 */
  --gg-ink-deep: #1A1A1A;
  --gg-ink: #2D2D2D;
  --gg-ink-muted: #555555;
  /* 古风底色系 */
  --gg-jade-white: #F8F5F0;
  --gg-paper: #F3EBD8;
  --gg-brick-gray: #D9D2C4;
  /* 线条与阴影 */
  --gg-line-red: rgba(155,34,38,0.45);
  --gg-line-gold: rgba(212,175,55,0.45);
  --gg-shadow: 0 10px 30px rgba(0,0,0,0.1);
  --gg-shadow-red: 0 10px 30px rgba(155,34,38,0.2);
  --gg-shadow-gold: 0 10px 40px rgba(212,175,55,0.3);
  /* 字体栈 - 纯本地零外链 */
  --gg-font-title: "STKaiti", "华文行楷", "汉仪楷体", "KaiTi", serif;
  --gg-font-sub: "方正小标宋", "华文宋体", SimSun, serif;
  --gg-font-body: "思源宋体", SimSun, "宋体", serif;

  background:
    linear-gradient(180deg, #faf5f0 0%, #f7efe6 50%, #f3e8dc 100%);
  color: var(--gg-ink-deep);
  font-family: var(--gg-font-body);
}

/* 宣纸网格纹理全局叠加 - 静态淡红色 */
body.gugong-page::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-color: rgba(155, 34, 38, 0.015);
  background-image:
    linear-gradient(rgba(155, 34, 38, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 34, 38, 0.04) 1px, transparent 1px),
    linear-gradient(rgba(155, 34, 38, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(155, 34, 38, 0.02) 1px, transparent 1px);
  background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px;
  background-position: -1px -1px, -1px -1px, -1px -1px, -1px -1px;
}

/* 页面四角L形鎏金装饰 - 静态无动画 */
.gg-corner-decor {
  position: fixed;
  z-index: 9998;
  pointer-events: none;
  opacity: 0.7;
}

/* 故宫专题页四角像素龙纹显示 */
body.gugong-page .dragon-pattern {
  opacity: 0.25 !important;
  position: fixed;
  width: 120px;
  height: 120px;
  pointer-events: none;
  z-index: 90;
}

#dragon-pattern-tl { top: 20px; left: 20px; }
#dragon-pattern-tr { top: 20px; right: 20px; transform: scaleX(-1); }
#dragon-pattern-bl { bottom: 20px; left: 20px; transform: scaleY(-1); }
#dragon-pattern-br { bottom: 20px; right: 20px; transform: scale(-1, -1); }

body.gugong-page .dragon-pattern::before {
  content: "";
  position: absolute;
  width: 2px;
  height: 2px;
  background: transparent;
  top: 10px;
  left: 10px;
  box-shadow:
    16px 0 0 var(--gg-gold-deep), 18px 0 0 var(--gg-gold-deep), 20px 0 0 var(--gg-gold-deep),
    14px 2px 0 var(--gg-gold-deep), 16px 2px 0 var(--gg-red), 18px 2px 0 var(--gg-gold-deep), 20px 2px 0 var(--gg-red), 22px 2px 0 var(--gg-gold-deep),
    12px 4px 0 var(--gg-gold-deep), 14px 4px 0 var(--gg-red), 22px 4px 0 var(--gg-red), 24px 4px 0 var(--gg-gold-deep),
    10px 6px 0 var(--gg-gold-deep), 12px 6px 0 var(--gg-red), 14px 6px 0 var(--gg-gold-deep), 24px 6px 0 var(--gg-gold-deep),
    8px 8px 0 var(--gg-gold-deep), 10px 8px 0 var(--gg-red), 16px 8px 0 var(--gg-gold-deep), 18px 8px 0 var(--gg-gold-deep), 26px 8px 0 var(--gg-gold-deep),
    8px 10px 0 var(--gg-gold-deep), 10px 10px 0 var(--gg-gold-deep), 28px 10px 0 var(--gg-gold-deep),
    8px 12px 0 var(--gg-gold-deep), 10px 12px 0 var(--gg-gold-deep), 30px 12px 0 var(--gg-gold-deep),
    10px 14px 0 var(--gg-gold-deep), 12px 14px 0 var(--gg-gold-deep), 22px 14px 0 var(--gg-gold-deep), 32px 14px 0 var(--gg-gold-deep),
    12px 16px 0 var(--gg-gold-deep), 14px 16px 0 var(--gg-gold-deep), 20px 16px 0 var(--gg-gold-deep), 24px 16px 0 var(--gg-gold-deep), 34px 16px 0 var(--gg-gold-deep),
    14px 18px 0 var(--gg-gold-deep), 18px 18px 0 var(--gg-gold-deep), 22px 18px 0 var(--gg-gold-deep), 26px 18px 0 var(--gg-gold-deep), 34px 18px 0 var(--gg-gold-deep),
    16px 20px 0 var(--gg-gold-deep), 20px 20px 0 var(--gg-gold-deep), 24px 20px 0 var(--gg-gold-deep), 28px 20px 0 var(--gg-gold-deep), 32px 20px 0 var(--gg-gold-deep),
    18px 22px 0 var(--gg-gold-deep), 22px 22px 0 var(--gg-gold-deep), 26px 22px 0 var(--gg-gold-deep), 30px 22px 0 var(--gg-gold-deep),
    20px 24px 0 var(--gg-gold-deep), 24px 24px 0 var(--gg-gold-deep), 28px 24px 0 var(--gg-gold-deep),
    22px 26px 0 var(--gg-gold-deep), 26px 26px 0 var(--gg-gold-deep), 30px 26px 0 var(--gg-gold-deep),
    20px 28px 0 var(--gg-gold-deep), 24px 28px 0 var(--gg-gold-deep), 28px 28px 0 var(--gg-gold-deep), 32px 28px 0 var(--gg-gold-deep),
    18px 30px 0 var(--gg-gold-deep), 22px 30px 0 var(--gg-gold-deep), 26px 30px 0 var(--gg-gold-deep), 30px 30px 0 var(--gg-gold-deep), 34px 30px 0 var(--gg-gold-deep),
    16px 32px 0 var(--gg-gold-deep), 20px 32px 0 var(--gg-gold-deep), 24px 32px 0 var(--gg-gold-deep), 28px 32px 0 var(--gg-gold-deep), 32px 32px 0 var(--gg-gold-deep),
    14px 34px 0 var(--gg-gold-deep), 18px 34px 0 var(--gg-gold-deep), 22px 34px 0 var(--gg-gold-deep), 26px 34px 0 var(--gg-gold-deep), 30px 34px 0 var(--gg-gold-deep),
    12px 36px 0 var(--gg-gold-deep), 16px 36px 0 var(--gg-gold-deep), 20px 36px 0 var(--gg-gold-deep), 24px 36px 0 var(--gg-gold-deep),
    10px 38px 0 var(--gg-gold-deep), 14px 38px 0 var(--gg-gold-deep), 18px 38px 0 var(--gg-gold-deep),
    8px 40px 0 var(--gg-gold-deep), 12px 40px 0 var(--gg-gold-deep),
    6px 42px 0 var(--gg-gold-deep), 10px 42px 0 var(--gg-gold-deep),
    4px 44px 0 var(--gg-gold-deep), 8px 44px 0 var(--gg-gold-deep);
}

@media (max-width: 768px) {
  body.gugong-page .dragon-pattern {
    width: 80px;
    height: 80px;
  }
  #dragon-pattern-tl, #dragon-pattern-tr { top: 12px; }
  #dragon-pattern-bl, #dragon-pattern-br { bottom: 12px; }
  #dragon-pattern-tl, #dragon-pattern-bl { left: 12px; }
  #dragon-pattern-tr, #dragon-pattern-br { right: 12px; }
}

/* 卡片四角L形装饰 */
.gg-info-card, .gg-hall-card, .gg-relic-card, .gg-info-row {
  position: relative;
}
.gg-info-card::before, .gg-hall-card::before, .gg-relic-card::before, .gg-info-row::before,
.gg-info-card::after, .gg-hall-card::after, .gg-relic-card::after, .gg-info-row::after {
  content: '';
  position: absolute;
  width: 16px;
  height: 16px;
  border: 1px solid var(--gg-gold);
  opacity: 0.5;
}
.gg-info-card::before, .gg-hall-card::before, .gg-relic-card::before, .gg-info-row::before {
  top: 8px; left: 8px;
  border-right: none; border-bottom: none;
}
.gg-info-card::after, .gg-hall-card::after, .gg-relic-card::after, .gg-info-row::after {
  bottom: 8px; right: 8px;
  border-left: none; border-top: none;
}

/* 全局字体覆盖 */
body.gugong-page * { font-family: var(--gg-font-body); }
body.gugong-page h1, body.gugong-page h2, body.gugong-page h3 {
  font-family: var(--gg-font-title) !important;
}
body.gugong-page h4, body.gugong-page h5, body.gugong-page h6,
body.gugong-page .nav-link, body.gugong-page .btn, body.gugong-page button {
  font-family: var(--gg-font-sub) !important;
}

/* 导航栏故宫风 - 墨黑底色 + 鎏金底边 */
body.gugong-page .navbar {
  background: rgba(26,26,26,0.96) !important;
  border-bottom: 1px solid var(--gg-gold-deep) !important;
}
body.gugong-page .navbar .logo span {
  color: var(--gg-gold-light) !important;
  font-family: var(--gg-font-title) !important;
}
body.gugong-page .navbar .logo-icon {
  background: linear-gradient(135deg, var(--gg-red) 0%, var(--gg-red-light) 100%) !important;
  border: 1px solid var(--gg-gold) !important;
  color: var(--gg-gold-light) !important;
}
body.gugong-page .navbar .nav-link {
  color: var(--gg-jade-white) !important;
  letter-spacing: 2px;
}
body.gugong-page .navbar .nav-link:hover,
body.gugong-page .navbar .nav-link.active {
  color: var(--gg-gold-light) !important;
}
body.gugong-page .navbar .nav-link::after {
  background: var(--gg-red) !important;
}
body.gugong-page .nav-login-btn {
  background: linear-gradient(135deg, var(--gg-red) 0%, var(--gg-red-light) 100%) !important;
  color: var(--gg-jade-white) !important;
  border: 1px solid var(--gg-gold) !important;
}

html { scroll-behavior: smooth; }
body.gugong-page .main-content {
  background: transparent;
  position: relative;
  z-index: 1;
}

/* ============ Hero 顶部 - 故宫中轴线实景背景 ============ */
.gg-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
  color: var(--gg-jade-white);
  background-color: #1A1A1A;
}

/* 故宫中轴线背景图片 */
.gg-hero-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image: url('https://trae-api-cn.mchost.guru/api/ide/v1/text_to_image?prompt=Beijing%20Forbidden%20City%20central%20axis%20aerial%20view%2C%20traditional%20Chinese%20palace%20architecture%2C%20red%20walls%20golden%20roof%20tiles%2C%20symmetrical%20layout%2C%20majestic%20imperial%20palace%2C%20sunrise%20light%2C%20photorealistic%2C%20high%20quality%2C%208k&image_size=landscape_16_9');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 红黑渐变遮罩，保证文字可读性 */
.gg-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(26,26,26,0.75) 0%, rgba(155,34,38,0.55) 50%, rgba(26,26,26,0.85) 100%);
  pointer-events: none;
}

/* 鎏金淡色光晕（静态） */
.gg-hero-cloud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: 
    radial-gradient(ellipse 60% 30% at 20% 20%, rgba(212,175,55,0.08) 0%, transparent 70%),
    radial-gradient(ellipse 50% 25% at 80% 30%, rgba(212,175,55,0.06) 0%, transparent 70%),
    radial-gradient(ellipse 70% 35% at 50% 80%, rgba(249,231,184,0.04) 0%, transparent 70%);
}

/* 静态光线装饰 */
.gg-hero-rays {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background: 
    radial-gradient(circle at 50% 0%, rgba(212,175,55,0.08) 0%, transparent 50%);
}

.gg-hero-inner {
  position: relative;
  z-index: 10;
  padding: 0 24px;
  max-width: 900px;
}

.gg-crumb {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: rgba(248, 245, 240, 0.7);
  margin-bottom: 40px;
  font-family: var(--gg-font-sub);
  letter-spacing: 1px;
}
.gg-crumb a { color: rgba(248, 245, 240, 0.7); transition: color 0.3s; }
.gg-crumb a:hover { color: var(--gg-gold-light); }
.gg-crumb .sep { opacity: 0.5; }
.gg-crumb .cur { color: var(--gg-gold-light); }

.gg-hero-rhyme {
  font-family: var(--gg-font-title);
  font-size: 22px;
  color: var(--gg-gold-light);
  letter-spacing: 6px;
  margin-bottom: 32px;
  opacity: 0.9;
  text-shadow: 0 0 10px rgba(212,175,55,0.3);
}

.gg-hero-title {
  margin: 0 0 24px;
  font-size: clamp(48px, 8vw, 72px);
  font-family: var(--gg-font-title);
  font-weight: normal;
  letter-spacing: 14px;
  line-height: 1.15;
}

.gg-title-3d {
  position: relative;
  display: inline-block;
  color: var(--gg-gold);
  text-shadow: 
    0 1px 0 var(--gg-gold-deep),
    0 2px 0 #8a7020,
    0 3px 0 #786018,
    0 4px 0 #685010,
    0 6px 1px rgba(0,0,0,0.1),
    0 0 30px rgba(212,175,55,0.4);
}

.gg-hero-slogan {
  font-size: clamp(18px, 3vw, 24px);
  color: var(--gg-jade-white);
  letter-spacing: 4px;
  margin: 0 0 16px;
  opacity: 0.95;
  font-family: var(--gg-font-sub);
}

.gg-hero-sub {
  font-size: 16px;
  color: rgba(248, 245, 240, 0.7);
  letter-spacing: 3px;
  margin: 0 0 48px;
  font-family: var(--gg-font-body);
}

.gg-hero-meta {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  font-size: 15px;
  color: rgba(248, 245, 240, 0.85);
  font-family: var(--gg-font-sub);
  letter-spacing: 1px;
}
.gg-hero-meta span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.gg-rating { color: var(--gg-gold-light); }

.gg-scroll-hint {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: rgba(248, 245, 240, 0.7);
  font-family: var(--gg-font-sub);
  letter-spacing: 2px;
}

/* 金粉粒子飘落 */
.gg-hero-particles span {
  position: absolute;
  background: radial-gradient(circle, rgba(212,175,55,0.9) 0%, rgba(212,175,55,0) 70%);
  border-radius: 50%;
  pointer-events: none;
}

/* ============ 导航工具栏 - 墨黑底色 ============ */
.gg-toolbar {
  position: sticky;
  top: 66px;
  z-index: 100;
  background: rgba(26,26,26,0.96);
  border-bottom: 1px solid var(--gg-gold-deep);
  transition: box-shadow 0.3s;
}
.gg-toolbar.scrolled {
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
.gg-toolbar-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  height: 56px;
}
.gg-nav {
  display: flex;
  gap: 4px;
  overflow-x: auto;
}
.gg-nav-link {
  padding: 8px 20px;
  font-size: 15px;
  font-family: var(--gg-font-sub);
  letter-spacing: 2px;
  color: rgba(248,245,240,0.7);
  border-radius: 4px;
  white-space: nowrap;
  transition: all 0.3s;
}
.gg-nav-link:hover { color: var(--gg-gold-light); background: rgba(255,255,255,0.08); }
.gg-nav-link.active {
  color: var(--gg-jade-white);
  background: linear-gradient(135deg, var(--gg-red) 0%, var(--gg-red-light) 100%);
  font-weight: 500;
}
.gg-search {
  position: relative;
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
.gg-search svg { position: absolute; left: 12px; color: rgba(248,245,240,0.5); }
.gg-search input {
  width: 220px;
  padding: 8px 12px 8px 36px;
  border: 1px solid rgba(212,175,55,0.3);
  border-radius: 4px;
  background: rgba(255,255,255,0.95);
  font-size: 14px;
  color: var(--gg-ink-deep);
  outline: none;
  transition: all 0.3s;
  font-family: var(--gg-font-body);
}
.gg-search input:focus {
  border-color: var(--gg-gold);
  box-shadow: 0 0 0 3px rgba(212,175,55,0.15);
  width: 280px;
}
.gg-search input::placeholder { color: #999; }
.gg-search button {
  position: absolute;
  right: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  color: var(--gg-ink-muted);
  cursor: pointer;
  border-radius: 50%;
}
.gg-search button:hover { background: rgba(0,0,0,0.05); color: var(--gg-ink-deep); }
.gg-search-count {
  position: absolute;
  right: -8px;
  top: -8px;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--gg-red);
  color: white;
  font-size: 11px;
  line-height: 18px;
  text-align: center;
}

/* ============ 主体内容 ============ */
.gg-main {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 40px 80px;
}

.gg-section {
  padding: 80px 0;
}

/* 区块标题 - 礼制对称式布局 */
.gg-sec-head {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 60px;
  text-align: center;
}
.gg-sec-num {
  font-family: var(--gg-font-title);
  font-size: 18px;
  color: var(--gg-red);
  letter-spacing: 4px;
  padding: 6px 20px;
  border: 1px solid var(--gg-line-red);
  background: rgba(155,34,38,0.05);
  position: relative;
}
.gg-sec-num::before,
.gg-sec-num::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 60px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gg-gold), transparent);
}
.gg-sec-num::before { right: 100%; margin-right: 20px; }
.gg-sec-num::after { left: 100%; margin-left: 20px; }
.gg-sec-title {
  margin: 0;
  font-size: clamp(28px, 4vw, 42px);
  font-family: var(--gg-font-title);
  font-weight: normal;
  color: var(--gg-ink-deep);
  letter-spacing: 8px;
  position: relative;
}
.gg-sec-sub {
  margin: 0;
  font-size: 16px;
  color: var(--gg-ink-muted);
  letter-spacing: 2px;
  font-family: var(--gg-font-sub);
}

/* 正文段落规范 - 古籍阅读节奏 */
.gg-overview-text p,
.gg-history-text p,
.gg-arch-text p,
.gg-treasures-text p,
.gg-guide-text p,
.gg-value-text p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--gg-ink);
  margin: 0 0 20px;
  text-indent: 2em;
  letter-spacing: 1px;
}
.gg-overview-text p:last-child,
.gg-history-text p:last-child,
.gg-arch-text p:last-child,
.gg-treasures-text p:last-child,
.gg-guide-text p:last-child,
.gg-value-text p:last-child { margin-bottom: 0; }

/* ============ 概述板块 ============ */
.gg-overview {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
  align-items: start;
}
.gg-overview-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.gg-info-card {
  position: relative;
  padding: 24px 20px;
  background: linear-gradient(180deg, var(--gg-jade-white) 0%, var(--gg-paper) 100%);
  border-radius: 4px;
  border: 1px solid rgba(212,175,55,0.3);
  box-shadow: var(--gg-shadow);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
/* 四角L形鎏金装饰 */
.gg-info-card::before,
.gg-hall-card::before,
.gg-relic-card::before,
.gg-info-row::before {
  content: '';
  position: absolute;
  top: 6px; left: 6px;
  width: 16px; height: 16px;
  border-top: 2px solid var(--gg-gold);
  border-left: 2px solid var(--gg-gold);
}
.gg-info-card::after,
.gg-hall-card::after,
.gg-relic-card::after,
.gg-info-row::after {
  content: '';
  position: absolute;
  bottom: 6px; right: 6px;
  width: 16px; height: 16px;
  border-bottom: 2px solid var(--gg-gold);
  border-right: 2px solid var(--gg-gold);
}
.gg-info-card:hover,
.gg-hall-card:hover,
.gg-relic-card:hover,
.gg-info-row:hover {
  transform: translateY(-4px);
  box-shadow: var(--gg-shadow-gold);
}
.gg-info-label {
  display: block;
  font-size: 13px;
  font-family: var(--gg-font-sub);
  color: var(--gg-ink-muted);
  margin-bottom: 8px;
  letter-spacing: 1px;
}
.gg-info-value {
  display: block;
  font-size: 18px;
  font-family: var(--gg-font-title);
  font-weight: 500;
  color: var(--gg-red);
  letter-spacing: 1px;
}

/* ============ 历史时间线 ============ */
.gg-timeline {
  position: relative;
  margin-top: 48px;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.gg-timeline::before { display: none; }
.gg-tl-item {
  position: relative;
  padding: 24px 20px;
  background: linear-gradient(180deg, var(--gg-jade-white) 0%, var(--gg-paper) 100%);
  border: 1px solid var(--gg-line-gold);
  border-radius: 4px;
  box-shadow: var(--gg-shadow);
  overflow: hidden;
}
.gg-tl-item::before,
.gg-tl-item::after {
  content: '';
  position: absolute;
  width: 16px; height: 16px;
  border-color: var(--gg-gold);
  border-style: solid;
}
.gg-tl-item::before {
  top: 6px; left: 6px;
  border-width: 2px 0 0 2px;
}
.gg-tl-item::after {
  bottom: 6px; right: 6px;
  border-width: 0 2px 2px 0;
}
.gg-tl-dot {
  display: none;
}
.gg-tl-year {
  font-family: var(--gg-font-title);
  font-size: 28px;
  color: var(--gg-red);
  font-weight: bold;
  margin-bottom: 12px;
  letter-spacing: 2px;
}
.gg-tl-body h4 {
  margin: 0 0 10px;
  font-size: 17px;
  font-family: var(--gg-font-sub);
  color: var(--gg-ink-deep);
  letter-spacing: 1px;
}
.gg-tl-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--gg-ink);
}

/* ============ 建筑格局 ============ */
.gg-halls {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.gg-hall-card {
  position: relative;
  padding: 28px 24px;
  background: linear-gradient(180deg, var(--gg-jade-white) 0%, var(--gg-paper) 100%);
  border-radius: 4px;
  border: 1px solid rgba(212,175,55,0.3);
  box-shadow: var(--gg-shadow);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.gg-hall-name {
  margin: 0 0 16px;
  font-size: 22px;
  font-family: var(--gg-font-title);
  color: var(--gg-red);
  letter-spacing: 3px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gg-line-gold);
}
.gg-hall-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--gg-ink);
  letter-spacing: 0.5px;
}

/* ============ 馆藏国宝 ============ */
.gg-relics {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-top: 48px;
}
.gg-relic-card {
  position: relative;
  padding: 28px 24px;
  background: linear-gradient(180deg, var(--gg-jade-white) 0%, var(--gg-paper) 100%);
  border-radius: 4px;
  box-shadow: var(--gg-shadow);
  border: 1px solid rgba(212,175,55,0.3);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.gg-relic-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--gg-line-gold);
}
.gg-relic-name {
  margin: 0;
  font-size: 20px;
  font-family: var(--gg-font-title);
  color: var(--gg-ink-deep);
  letter-spacing: 2px;
}
.gg-relic-era {
  font-size: 13px;
  font-family: var(--gg-font-sub);
  padding: 4px 12px;
  background: linear-gradient(135deg, var(--gg-red) 0%, var(--gg-red-light) 100%);
  color: var(--gg-gold-light);
  border-radius: 2px;
  letter-spacing: 1px;
}
.gg-relic-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: var(--gg-ink);
}

/* ============ 游玩攻略 ============ */
.gg-guide {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 48px;
}
.gg-guide-info {
  display: grid;
  gap: 12px;
  align-content: start;
}
.gg-info-row {
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: linear-gradient(180deg, var(--gg-jade-white) 0%, var(--gg-paper) 100%);
  border-radius: 4px;
  box-shadow: var(--gg-shadow);
  border: 1px solid rgba(212,175,55,0.3);
  overflow: hidden;
  transition: transform 0.3s, box-shadow 0.3s;
}
.gg-info-row .gg-info-label { margin: 0; min-width: 90px; }
.gg-info-row .gg-info-value {
  margin: 0;
  text-align: right;
  font-size: 15px;
  font-family: var(--gg-font-sub);
  color: var(--gg-ink);
  letter-spacing: 0.5px;
}

/* ============ 操作按钮 - 按规范宫廷制式 ============ */
.gg-actions {
  display: flex;
  justify-content: center;
  gap: 24px;
  padding: 60px 0;
}
.gg-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 36px;
  border-radius: 4px;
  font-size: 16px;
  font-family: var(--gg-font-sub);
  font-weight: 500;
  letter-spacing: 3px;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.3s;
}
.gg-btn-red {
  background: linear-gradient(135deg, var(--gg-red) 0%, var(--gg-red-light) 100%);
  color: var(--gg-gold-light);
  border: 1px solid var(--gg-gold-deep);
  box-shadow: var(--gg-shadow-red);
}
.gg-btn-red:hover {
  background: linear-gradient(135deg, var(--gg-red-deep) 0%, var(--gg-red) 100%);
  transform: translateY(-3px);
  box-shadow: 0 12px 24px rgba(155,34,38,0.35);
}
.gg-btn-outline {
  background: transparent;
  color: var(--gg-red);
  border: 2px solid var(--gg-red);
}
.gg-btn-outline:hover {
  background: var(--gg-red);
  color: var(--gg-gold-light);
  transform: translateY(-3px);
  box-shadow: var(--gg-shadow-red);
}

/* ============ Footer - 墨黑宫廷风 ============ */
.gg-footer {
  text-align: center;
  padding: 48px 24px;
  background: linear-gradient(180deg, var(--gg-ink-deep) 0%, #0d0d0d 100%);
  color: rgba(248, 245, 240, 0.6);
  border-top: 2px solid var(--gg-gold-deep);
  position: relative;
  z-index: 1;
}
.gg-footer-slogan {
  font-family: var(--gg-font-title);
  font-size: 24px;
  color: var(--gg-gold);
  margin: 0 0 12px;
  letter-spacing: 6px;
}
.gg-footer-sub { margin: 0; font-size: 14px; letter-spacing: 2px; font-family: var(--gg-font-sub); }

/* ============ Toast 提示 ============ */
.gg-toast {
  position: fixed;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  padding: 14px 32px;
  background: linear-gradient(135deg, var(--gg-red) 0%, var(--gg-red-light) 100%);
  color: var(--gg-gold-light);
  border-radius: 4px;
  font-size: 15px;
  font-family: var(--gg-font-sub);
  letter-spacing: 1px;
  border: 1px solid var(--gg-gold-deep);
  opacity: 0;
  pointer-events: none;
  transition: all 0.3s;
  z-index: 9999;
  box-shadow: var(--gg-shadow-red);
}
.gg-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* 搜索高亮 */
.gg-searchable mark {
  background: rgba(212, 175, 55, 0.35);
  color: var(--gg-red);
  padding: 0 2px;
  border-radius: 2px;
}

/* 滚动入场动画 - 舒缓国风 */
.scroll-animate {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.scroll-animate.visible {
  opacity: 1;
  transform: translateY(0);
}

/* ============ 响应式适配 ============ */
@media (max-width: 1080px) {
  .gg-toolbar-inner { padding: 0 20px; }
  .gg-main { padding: 0 20px 60px; }
  .gg-halls { grid-template-columns: repeat(2, 1fr); }
  .gg-timeline { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .gg-hero { min-height: 90vh; }
  .gg-hero-meta { gap: 20px; font-size: 14px; }
  .gg-toolbar-inner { padding: 0 16px; gap: 12px; flex-direction: column; height: auto; padding: 12px 16px; }
  .gg-search input { width: 100%; }
  .gg-search input:focus { width: 100%; }
  .gg-main { padding: 0 16px 40px; }
  .gg-section { padding: 60px 0; }
  .gg-overview, .gg-guide { grid-template-columns: 1fr; gap: 32px; }
  .gg-sec-head { margin-bottom: 40px; }
  .gg-sec-num::before, .gg-sec-num::after { width: 30px; }
  .gg-sec-num::before { margin-right: 12px; }
  .gg-sec-num::after { margin-left: 12px; }
  .gg-overview-cards { grid-template-columns: 1fr; }
  .gg-halls, .gg-relics, .gg-timeline { grid-template-columns: 1fr; }
  .gg-nav-link { padding: 8px 12px; font-size: 14px; letter-spacing: 1px; }
  .gg-actions { flex-direction: column; align-items: center; padding: 40px 0; }
  .gg-btn { width: 100%; max-width: 280px; justify-content: center; }
  .gg-hero-title { letter-spacing: 8px; }
}