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

html,
body {
  height: 100%;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Microsoft YaHei", sans-serif;
  color: #333;
  background-color: #fafafa;
  display: flex;
  flex-direction: column;
}

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

button {
  border: none;
  cursor: pointer;
}

.site-header {
  width: 100%;
  box-sizing: border-box;
  padding: 20px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  background-color: #f5f5f5;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
}

.logo {
  font-size: 18px;
  letter-spacing: 2px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.logo::before {
  content: "";
  /* 建议根据你的 logo 图片比例调整宽高 */
  width: 32px; 
  height: 32px;
  
  /* 关键修改：替换路径 */
  background-image: url("../images/logo.png");
  
  /* 确保图片完整显示且不重复 */
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  
  /* 移除原来的灰色背景 */
  background-color: transparent; 
}

.main-nav {
  display: flex;
  gap: 40px;
  align-items: center;
}

.main-nav a,
.nav-item {
  position: relative;
  color: #555;
}

.main-nav a,
.nav-label {
  font-size: 16px;
  line-height: 1;
  display: inline-block;
  padding: 4px 0;
}

.main-nav a.active {
  color: #000;
  font-weight: 500;
}

.nav-item {
  cursor: pointer;
}

.nav-label {
}

.has-dropdown {
  position: relative;
}

.nav-dropdown {
  position: absolute;
  top: 40px;
  left: 50%;
  transform: translateX(-50%);
  min-width: 140px;
  background-color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  display: none;
  text-align: left;
  font-size: 13px;
  z-index: 10;
}

.nav-dropdown a {
  display: block;
  padding: 10px 20px;
  color: #555;
  white-space: nowrap;
  background-color: #ffffff;
}

.nav-dropdown a:hover {
  background-color: #f3f3f3;
}

.nav-dropdown a.active-item {
  background-color: #ffffff;
}

.nav-dropdown a.active-item:hover {
  background-color: #f3f3f3;
}

.has-dropdown.open .nav-dropdown {
  display: block;
}

.hero-banner {
  width: 100vw;
  max-width: none;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  background-color: transparent; /* 背景透明，由图片决定高度 */
}

.hero-banner-inner {
  position: relative;
  width: 100%;
  max-width: 1000px;        /* 控制横幅内容最大宽度，左右留白 */
  margin: 0 auto;
  overflow: hidden;
}

.hero-banner-slides {
  position: relative;
  width: 100%;
}

.hero-slide {
  width: 100%;
  max-width: 100%;
  height: auto;
  display: none;
}

.hero-slide.active {
  display: block;
}

.hero-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background-color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.hero-arrow::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-top: 2px solid #666;
  border-right: 2px solid #666;
}

.hero-arrow-left {
  left: 24px;
}

.hero-arrow-left::before {
  transform: rotate(-135deg);
  margin-left: 2px;
}

.hero-arrow-right {
  right: 24px;
}

.hero-arrow-right::before {
  transform: rotate(45deg);
  margin-right: 2px;
}

.hero-banner-inner.hovering .hero-arrow {
  opacity: 1;
}

.hero-dots {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
}

.hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background-color: transparent;
  padding: 0;
  cursor: pointer;
}

.hero-dot.active {
  background-color: rgba(255, 255, 255, 0.9);
}

main {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  flex: 1 0 auto;
}

/* 套系详情等详情页：整体横向放大 1.2 倍左右 */
main.detail-wrapper {
  max-width: 1100px;
  padding: 100px 60px 80px; /* 增加左右内边距（从 24px 增加到 60px） */
}

/* 首页横向拉宽 */
.home-page main {
  max-width: 1300px;
  padding: 0 40px;
  box-sizing: border-box;
}

.service-intro {
  padding: 60px 40px 40px;
}

.section-title {
  font-size: 20px;
  margin-bottom: 4px;
}

.section-subtitle {
  font-size: 12px;
  color: #b89c7b;
  margin-bottom: 40px;
}

.page-title {
  padding: 40px 40px 10px;
  text-align: center;
}

.service-list {
  display: flex;
  justify-content: space-between;
  gap: 30px;
  margin-bottom: 30px;
}

.service-card {
  flex: 1;
}

.card-thumb {
  width: 100%;
  padding-top: 120%; /* 保持 120% 的高度比例 */
  background-color: #dedede; /* 图片加载前的底色 */
  position: relative; /* 为内部图片定位 */
  overflow: hidden;   /* 隐藏超出容器的部分 */
}

.card-thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover; /* 核心：图片自动裁剪以填满容器，不拉伸 */
  display: block;
}
3. 同步 Logo 和 按钮 的更新

/* 首页服务介绍区放大（等比例：只放大宽度，高宽比不变） */
.home-page .service-list {
  justify-content: center;
  gap: 40px; /* 缩短四图之间间距 */
}

.home-page .service-card {
  flex: 0 0 220px; /* 宽度放大，比例不变 */
}

.card-title {
  margin-top: 16px;
  font-size: 14px;
  color: #666;
}

.primary-btn {
display: inline-block;
  margin-top: 10px;
  padding: 12px 50px; /* 稍微加宽，增加视觉分量 */
  font-size: 15px;
  background-color: #b89c7b; /* 品牌原色 */
  color: #fff;
  border-radius: 2px;
  text-decoration: none;
  transition: all 0.3s ease; /* 添加平滑过渡效果 */
  cursor: pointer;
}

.primary-btn:hover {
  background-color: #a68a68; /* 颜色稍微加深 */
  box-shadow: 0 4px 12px rgba(184, 156, 123, 0.3); /* 添加淡淡的品牌色阴影 */
  transform: translateY(-1px); /* 向上轻微浮动，增加“可点击”的反馈感 */
}


.primary-btn:active {
  transform: translateY(0); /* 点击时沉下去 */
  box-shadow: 0 2px 6px rgba(184, 156, 123, 0.2);
}

.package-section {
  padding: 20px 40px 60px;
}

.package-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 40px 40px;
}
 
.package-card {
  text-align: center;
}

.package-thumb {
  width: 100%;
  padding-top: 80%;
  background-color: #dedede;
}

/* 套系列表页：整体区域横向拉宽（3 列布局不变） */
.taoxi-page main {
  max-width: 1300px;
  padding: 0 40px;
  box-sizing: border-box;
}

/* 套系列表页卡片等比例放大：保持 3 列布局，只放大单卡尺寸 */
.taoxi-page .package-grid {
  grid-template-columns: repeat(3, 312px);
  justify-content: center;
  column-gap: 40px;
  row-gap: 40px;
}

.taoxi-page .package-card {
  margin: 0 auto;
}

.taoxi-page .package-thumb {
  width: 312px;  /* 260 * 1.2，宽度放大 1.2 倍 */
  height: 208px; /* 高度保持不变 */
  padding-top: 0;
  background-size: contain;        /* 等比例缩放，完整显示图片 */
  background-position: center;     /* 图片居中 */
  background-repeat: no-repeat;    /* 不平铺 */
}

.judgement-placeholder-text {
  font-size: 12px;
  color: #666;
  text-align: center;
  line-height: 1.6;
}

.package-name {
  margin-top: 16px;
  font-size: 14px;
  color: #333;
}

.package-desc {
  margin-top: 4px;
  font-size: 12px;
  color: #999;
}

.package-price {
  margin-top: 10px;
  font-size: 14px;
  color: #999;
}

/* About 页面 */
.about-intro {
  padding: 80px 40px 60px;
  text-align: center;
}

.about-card {
  display: block;
  margin: 0 auto;
  max-width: 820px;
  padding: 60px 120px 60px;
  background-color: #f5f5f5;
  position: relative;
  text-align: center;
}

.about-title {
  margin-bottom:10px;
  font-size: 30px;
  color: #333;
}

.about-subtitle {
  margin-top: 4px;
  font-size: 18px;
  color: #b89c7b;
  margin-bottom:10px;
}

.about-text {
  font-size: 16px;
  color: #666;
  line-height: 1.6;
  max-width: none;
}

.about-address {
  padding: 60px 40px 120px;
  text-align: center;
}

.about-address-title {
  font-size: 30px;
  color: #333;
}

.about-address-subtitle {
  margin-top: 4px;
  font-size: 18px;
  color: #b89c7b;
}

.about-address-content {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 120px;
}

.about-contact {
  font-size: 16px;
  color: #666;
  text-align: left;
}

.about-contact p + p {
  margin-top: 8px;
}

.about-map-placeholder {
  /* 1. 宽度随父容器变化，例如占据右侧区域的 100% 或限制一个最大宽度 */
  width: 100%;
  max-width: 340px; /* 给它一个上限，防止在大屏幕上大得离谱 */
  
  /* 2. 核心：设定宽高比 (长宽比 13:8，接近你原来的 260:160) */
  aspect-ratio: 13 / 8; 

  /* 3. 背景图设置 */
  background-color: transparent;
  background-image: url("../images/address.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  /* 4. 如果是 About 页面的 Flex 布局，确保它不会被挤压 */
  flex-shrink: 0;
}

.service-process {
  padding: 40px 40px 80px;
  position: relative;
}

.process-list {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;
  margin: 40px 0 40px;
  padding-top: 10px;
}

/* 首页服务流程区：聚拢到中间、更紧凑 */
.home-page .process-list {
  max-width: 820px;
  margin: 40px auto 40px;
  gap: 24px;
}

.home-page .icon-wrap {
  width: 80px;
}

/* 让首页服务流程线条在节点之间连续不断 */
.home-page .process-item::after {
  left: -12px;
  right: -12px;
}

.home-page .process-item:first-child::after {
  left: calc(50% - 12px);
}

.home-page .process-item:last-child::after {
  right: calc(50% - 12px);
}

.process-item {
  flex: 1;
  position: relative;
}

/* 节点小方块 */
.process-item::before {
  content: "";
  position: absolute;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background-color: #b89c7b;
}

/* 贯穿节点中心的横线（由每个 item 的线段拼接） */
.process-item::after {
  content: "";
  position: absolute;
  top: 84px; /* 与小方块中心对齐 */
  left: 0;
  right: 0;
  height: 1px;
  background-color: #f0e8dd;
  z-index: -1;
}

/* 最左边：只画从中心到右侧的线段 */
.process-item:first-child::after {
  left: 50%;
}

/* 最右边：只画从左侧到中心的线段 */
.process-item:last-child::after {
  right: 50%;
}

.process-item:only-child::after {
  display: none;
}

.icon-wrap {
  width: 72px;
  height: 72px;
  margin: 0 auto 20px;
  border-radius: 0;
  border: 1px solid #f0e8dd;
  background-color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}

.icon-wrap img {
  max-width: 36px;
  max-height: 36px;
}

.process-text {
  margin-top: 22px;
  font-size: 12px;
  color: #666;
}

.site-footer {
  border-top: 1px solid #e5e5e5;
  padding: 16px 0 24px;
  text-align: center;
  font-size: 12px;
  color: #aaa;
}

.page-number {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: black;
  color: white;
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 14px;
  font-family: Arial, sans-serif;
  z-index: 1000;
}

/* 套系详情页 */
.detail-wrapper {
  padding: 40px 24px 80px;
  text-align: left;
}

.detail-back {
  font-size: 12px;
  color: #999;
  margin-bottom: 20px;
}

.detail-back a {
  color: #999;
}

.detail-main {
  display: flex;
  align-items: flex-start;
  gap: 60px;
}

.detail-photo-large {
  width: 360px;              /* 控制顶部大图宽度，避免过大 */
  background-color: #dedede;
  flex-shrink: 0;            /* 防止在横向布局时被挤压变形 */
}

/* 仅针对儿童写真页生效 */
#page-ertong .detail-photo-large {
  width: 500px; /* 您想要的宽度 */
}

.detail-photo-large img {
  width: 100%;
  height: auto;
  display: block;
}

.detail-info {
  flex: 1;
}

.detail-title {
  font-size: 32px;
  color: #333;
}

.detail-price {
  margin-top: 6px;
  font-size: 24px;
  color: #b89c7b;
}

/* 删除或覆盖原来的 .detail-meta 相关样式 */
.detail-meta {
  margin-top: 24px;   /* 增加与标题的间距 */
  font-size: 18px;     /* 稍微调大字号增强可读性 */
  color: #555;
  line-height: 2;      /* 增加行高，防止文字堆叠 */
  display: flex;       /* 开启 Flex 布局 */
  flex-direction: column; /* 纵向排列每一项 */
  gap: 12px;           /* 每一行说明之间的间距 */
  line-height: 2;
}

/* 如果你保留了 dt/dd 结构，使用以下样式： */
.detail-meta div {
  display: flex;
  align-items: flex-start;
}

.detail-meta dt {
  width: 80px;         /* 稍微加宽标签区域 */
  color: #999;
  flex-shrink: 0;      /* 防止标签被压缩 */
  float: none;         /* 清除浮动 */
}

.detail-meta dd {
  margin-left: 0;      /* 清除原有的 margin */
  flex: 1;             /* 自动填充剩余空间 */
}

.detail-cta {
  margin-top: 30px;
  text-align: left;
}

.detail-cta .primary-btn {
  padding: 12px 50px;
  font-size: 18px;
}

.detail-section-title {
  margin-top: 50px;
  font-size: 24px;
  color: #333;
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-section-title::before {
  content: "";
  width: 6px;
  height: 6px;
  background-color: #b89c7b;
}

.detail-gallery {
  margin-top: 24px;
  display: flex;
  gap: 30px;
}

.detail-gallery-item {
  flex: 1;
  position: relative;
}

.detail-gallery-thumb {
  width: 100%;
  background-color: #dedede;
}

.detail-gallery-thumb img {
  width: 100%;
  height: auto;
  display: block;
}

/* 套系详情页在窄屏下改为上下布局，防止文字被挤压 */
@media (max-width: 900px) {
  .detail-main {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .detail-photo-large {
    width: 100%;
    max-width: 480px;
  }

  .detail-info {
    width: 100%;
  }
}

.gallery-meta {
  position: absolute;
  right: 10px;
  bottom: 10px;
  padding: 4px 10px;
  background-color: #ffffff;
  font-size: 12px;
  color: #666;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.gallery-meta img {
  width: 14px;
  height: 14px;
}

/* 通用图片放大预览遮罩 */
.image-lightbox {
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.image-lightbox.visible {
  display: flex;
}

.image-lightbox-inner {
  /* 容器只负责居中，不限制尺寸，由图片自己按视口缩放 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.image-lightbox-img {
  /* 图片直接按视口宽高做最大缩放，确保完整展示不溢出 */
  max-width: 90vw;
  max-height: 90vh;
  display: block;
}

/* 我的 页面 */
.my-wrapper {
  padding: 40px 40px 80px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.my-card {
  width: 260px;
  height: 340px;
  border: 1px solid #e5e5e5;
  background-color: #ffffff;
}

.my-card-header {
  background-color: #b89c7b;
  color: #ffffff;
  text-align: center;
  font-size: 14px;
  padding: 10px 0;
}

.my-card-body {
  padding: 40px 30px 30px;
  text-align: center;
}

.my-qrcode {
  width: 200px; /* 根据你的设计调整尺寸 */
  height: 200px;
  margin: 0 auto;
  background-color: transparent; /* 去掉原来的灰色背景 */
  border: 1px solid #ddd; /* 可选：留个边框增加照相馆的精致感 */
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.my-qrcode img {
  max-width: 100%;
  height: auto;
}

.my-text {
  font-size: 12px;
  padding-top: 15px;
  color: #999;
}

/* 日记列表页整体布局 */
body.diary-page main.diary-main {
  max-width: 1400px;
  width: 95%;
  margin: 0 auto;
  padding: 100px 0 60px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 顶部工具栏：左搜索，右编辑按钮 */
.diary-toolbar {
  width: 100%;
  position: relative;
  display: flex;
  justify-content: center;
  margin-bottom: 40px;
  gap: 32px;
}

.diary-search-section {
  width: 100%;
  display: flex;
  justify-content: center;
}

.diary-edit-area {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  min-width: 150px;
  position: absolute;
  right: 0;
  top: 0;
}

.diary-edit-btn {
  padding: 0;
  font-size: 14px;
  background: none;
  border: none;
  border-radius: 0;
  box-shadow: none;
  color: #000;
  text-decoration: underline;
  cursor: pointer;
}

.diary-edit-status {
  margin-top: 6px;
  font-size: 12px;
  color: #999;
  min-height: 1.2em;
  text-align: right;
  opacity: 0;
  transition: opacity 0.2s ease;
}

/* 日记撕裂效果覆盖层 */
.diary-tearing-overlay {
  position: fixed;
  inset: 0;
  pointer-events: auto;
  display: none;
  background-color: #000;
  overflow: hidden;
  z-index: 999;
}

.diary-tearing-overlay.visible {
  display: block;
}

.diary-tear-stripe {
  position: absolute;
  top: -10%;
  bottom: -10%;
  background-color: #000;
}

@keyframes diary-tear-jitter {
  0% {
    transform: translateY(-4px);
  }
  50% {
    transform: translateY(3px);
  }
  100% {
    transform: translateY(-2px);
  }
}

.diary-search-box {
  display: flex;
  align-items: stretch;
  width: 100%;
  max-width: 700px;
  border: 1px solid #ddd;
  border-radius: 999px;
  overflow: hidden;
  background-color: #fff;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

/* 列表区域容器 */
.diary-list {
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
  border-top: 1px solid #eee;
  text-align: center;
}

.diary-item {
  padding: 40px 0; /* 增加上下间距，让大字号标题有呼吸感 */
  transition: background-color 0.2s ease;
}

.diary-item:hover {
  background-color: #fcfcfc;
}

/* 日记标题字号放大 */
.diary-title {
  font-size: 22px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.diary-title a {
  text-decoration: none;
  color: inherit;
  transition: color 0.2s ease;
}

.diary-title a:hover {
  color: #b89c7b;
}

/* 搜索组件细节补全 */
.diary-search-input {
  flex: 1;
  border: none;
  padding: 12px 24px;
  font-size: 15px;
  outline: none;
}

.diary-search-button {
  padding: 0 30px;
  font-size: 15px;
  background-color: #b89c7b;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.diary-list hr {
  border: none;
  border-top: 1px solid #f0f0f0;
  margin: 0;
  width: 100%;
}

/* 日记详情页 */
/* 日记详情页 - 强制扩大版 */
main.diary-detail-main {
  max-width: 1400px; /* 建议给一个确定的宽大数值，比如 1400px 或 95% */
  width: 60%;        /* 配合 width 使用 */
  margin: 0 auto;
  padding: 100px 0 40px;   /* 顶部留出固定导航栏高度 */
  text-align: left;
  flex: 1 0 auto;    /* 确保填满剩余空间 */
}

.diary-detail-card {
  background-color: #ffffff;
  border: 1px solid #e5e5e5;
  padding: 60px;     /* 卡片内部的留白可以根据感觉调整 */
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.06);
  width: 100%;       /* 确保卡片撑满父容器 */
  box-sizing: border-box; /* 保证 padding 不会额外撑开宽度 */
}

.diary-detail-title {
  font-size: 32px;
  margin-bottom: 30px;
}

.diary-detail-content {
  font-size: 16px;
  color: #555;
  line-height: 2;
  min-height: 260px;
}

/* 日记正文细节优化 */
.diary-detail-content {
  font-family: "PingFang SC", "Lantinghei SC", "Microsoft YaHei", "HanSans",
    sans-serif;
  font-size: 17px;
  color: #444;
  line-height: 1.85;
  letter-spacing: 0.5px;
  word-break: break-word;
}

.diary-detail-content p {
  margin-bottom: 1.6em;
  text-indent: 0;
}

.diary-detail-title {
  font-weight: 600;
  color: #222;
  border-bottom: 1px solid #f0f0f0;
  padding-bottom: 20px;
  margin-bottom: 30px;
}

/* 日记返回按钮 */
.diary-back-wrapper {
  margin-top: 32px;
  text-align: center;
  display: flex;
  align-items: center;    /* 垂直居中 */
  justify-content: center; /* 水平居中 */
  gap: 20px;              /* 按钮与图标的间距 */
}

.footer-pentagram {
  height: 70px;           /* 这里可以根据你的喜好调整高度 */
  width: auto;
  cursor: pointer;        /* 恢复手指手势 */
  
  /* 确保覆盖之前可能存在的缩放和强制手势 */
  transform: none !important;
  display: inline-block;
  transition: opacity 0.2s;
}

/* 增加悬停反馈（可选，增强交互感） */
.footer-pentagram:hover {
  opacity: 0.8;
}

.diary-back-btn {
  padding: 10px 40px;
  font-size: 14px;
}

/* Exposure 结局区域样式 */
.exposure-ending-block {
  margin: 40px auto 20px;
  text-align: center;
}

.exposure-ending-title {
  font-weight: 700;
  font-size: 32px;
  color: #06c6ec; 
  
  text-shadow: 
    0 0 8px rgba(0, 225, 255, 0.726),
    0 0 15px rgba(25, 221, 247, 0.863);

  margin-bottom: 16px;
  letter-spacing: 2px;
  
}

.exposure-subtitle {
  font-weight: 700;
  margin-bottom: 8px;
}

.exposure-meta {
  font-size: 14px;
  margin-bottom: 4px;
}

.exposure-icons {
  margin-top: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
}

.exposure-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.exposure-icon-frame {
  padding: 4px;
  border-radius: 18px;
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.15));
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
}

.exposure-icon-frame img {
  display: block;
  width: 240px;
  max-width: 100%;
  border-radius: 14px;
}

.exposure-icon-caption {
  margin-top: 6px;
  font-size: 12px;
  color: #666;
}

@media (max-width: 900px) {
  .service-list,
  .process-list {
    flex-direction: column;
  }

  .site-header {
    padding: 16px 20px;
  }

  .hero-banner {
    height: auto;
  }
}

/* ========== 汉堡菜单 / 移动端导航适配 ========== */

.hamburger-btn {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  z-index: 200;
  flex-shrink: 0;
}

.hamburger-btn span {
  display: block;
  width: 22px;
  height: 2px;
  background-color: #555;
  border-radius: 2px;
  transition: transform 0.3s ease, opacity 0.3s ease;
  transform-origin: center;
}

/* 汉堡按钮激活状态（X形） */
.hamburger-btn.active span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger-btn.active span:nth-child(2) {
  opacity: 0;
  transform: scaleX(0);
}
.hamburger-btn.active span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

@media (max-width: 1024px) {
  /* 防止页面横向滚动条 */
  body {
    overflow-x: hidden;
  }

  /* 显示汉堡按钮 */
  .hamburger-btn {
    display: flex;
  }

  /* header 布局调整 */
  .site-header {
    padding: 14px 20px;
    position: fixed; /* 移动端建议用 fixed 确保绝对置顶 */
        top: 0;
        left: 0;
        width: 100%;
        z-index: 1000;
    flex-wrap: wrap;
  }

  /* 隐藏桌面端导航 */
  .main-nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: 0;
    background-color: #f5f5f5;
    margin-top: 10px;
    padding: 8px 0;
    border-top: 1px solid #e5e5e5;
  }

  /* 展开时显示 */
  .main-nav.nav-open {
    display: flex;
  }

  /* 每个顶级链接和套系按钮 */
  .main-nav > a,
  .main-nav > .nav-item {
    width: 100%;
    padding: 12px 20px;
    font-size: 15px;
    color: #555;
    border-bottom: 1px solid #ebebeb;
    box-sizing: border-box;
  }

  .main-nav > a:last-child,
  .main-nav > .nav-item:last-child {
    border-bottom: none;
  }

  /* 套系下拉父项 */
  .nav-item.has-dropdown {
    position: relative;
    cursor: pointer;
  }

  .nav-label {
    display: block;
    width: 100%;
    font-size: 15px;
    color: #555;
    padding: 0;
  }

  /* 移动端下拉菜单：静态展开，不绝对定位，与父级菜单项风格一致 */
  .nav-dropdown {
    position: static;
    transform: none;
    min-width: unset;
    width: 100%;
    box-shadow: none;
    background-color: #f5f5f5;
    display: none;
    margin-top: 0;
    border-top: none;
  }

  .has-dropdown.open .nav-dropdown {
    display: block;
  }

  .nav-dropdown a {
    padding: 12px 20px 12px 36px;
    font-size: 14px;
    border-bottom: 1px solid #ebebeb;
    color: #555;
    background-color: #f5f5f5;
  }

  .nav-dropdown a:last-child {
    border-bottom: none;
  }

  .nav-dropdown a:hover {
    background-color: #f0f0f0;
  }

  /* 首页服务卡片改为 2×2 网格 */
  .home-page .service-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 40px;
    justify-items: center;
    padding: 0 40px;
  }

  .home-page .service-card {
    flex: unset;
    width: 100%;
  }

  .card-thumb {
    padding-top: 110%;
  }

  .card-title {
    font-size: clamp(13px, 2vw, 20px);
    margin-top: 12px;
  }

  /* 首页 main 顶部补偿固定导航栏高度 */
  .home-page main {
    padding-top: 70px;
  }

  /* 套系网格改为 2×3 布局 */
  .package-grid,
  .taoxi-page .package-grid {
    grid-template-columns: 1fr 1fr !important;
    justify-content: center;
    column-gap: 40px !important;
    row-gap: 60px !important;
  }

  .taoxi-page .package-thumb {
    width: 100% !important;
    height: 0 !important;
    padding-top: 66% !important;
    background-size: cover !important;
    background-position: center !important;
    position: relative;
  }

  .package-name {
    font-size: clamp(14px, 2.5vw, 22px);
    margin-top: 12px;
  }

  .package-desc {
    font-size: clamp(12px, 1.8vw, 16px);
  }

  .package-price {
    font-size: clamp(12px, 2vw, 18px);
  }

  /* 审判格占位文字垂直居中 */
  .taoxi-page .package-card-judgement .package-thumb {
    display: block !important;
  }

  .taoxi-page .package-card-judgement .judgement-placeholder-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 90%;
    text-align: center;
  }

  /* 详情页改为竖向布局，增加左右边距，顶部补偿导航栏 */
  main.detail-wrapper {
    padding: 80px 24px 60px;
  }

  /* ertong 大图宽度覆盖，防止溢出 */
  #page-ertong .detail-photo-large {
    width: 100%;
    max-width: 100%;
  }

  /* about 地址区改为竖向 */
  .about-address-content {
    flex-direction: column;
    gap: 30px;
    align-items: center;
  }

  .about-map-placeholder {
    max-width: 100%;
  }

  /* 审判页画廊改为单列 */
  .detail-gallery {
    grid-template-columns: 1fr !important;
  }

  /* 日记详情页宽度，顶部补偿导航栏 */
  main.diary-detail-main {
    width: 95%;
    padding: 80px 0 24px;
  }

  .diary-detail-card {
    padding: 28px 20px;
  }

  /* 工具栏 */
  .diary-toolbar {
    flex-direction: column;
    align-items: center;
    gap: 16px;
    position: static;
  }

  .diary-edit-area {
    position: static !important;
    align-items: center;
    min-width: unset;
    width: 100%;
    text-align: center;
  }

  /* exposure 图标竖排 */
  .exposure-icons {
    flex-direction: column;
    gap: 16px;
  }

  /* about 卡片内边距 */
  .about-card {
    padding: 40px 24px;
  }

  /* shen.html / zuiren.html 移动端修复 */
  #page-shen-special .diary-detail-main {
    padding-top: 80px;
    overflow-x: clip;
    background-attachment: scroll !important;
    background-size: cover !important;
    background-position: center center !important;
    width: 100vw !important;
    min-width: 0 !important;
  }

  /* 容器：移动端居中，去掉左右 padding 让藤蔓/镣铐自然贴边 */
  #page-shen-special .special-visual-container {
    padding: 0;
    gap: 24px;
    max-width: 100%;
    align-items: center;
  }

  /* 藤蔓（shen）：与 fetters 相同位置，纵向居中 */
  #page-shen-special .special-visual-container::before,
  #page-shen-special .special-visual-container::after {
    width: 180px;
    height: 36px;
    top: 50%;
  }

  #page-shen-special .special-visual-container::before {
    left: -75px;
    transform: translateY(-50%) rotate(90deg);
  }

  #page-shen-special .special-visual-container::after {
    right: -75px;
    transform: translateY(-50%) rotate(-90deg);
  }

  /* 镣铐（zuiren）：缩小后贴两侧，纵向居中 */
  #page-shen-special .special-visual-container.special-visual-container-zuiren::before,
  #page-shen-special .special-visual-container.special-visual-container-zuiren::after {
    width: 180px;
    height: 36px;
    top: 50%;
  }

  #page-shen-special .special-visual-container.special-visual-container-zuiren::before {
    left: -75px;
  }

  #page-shen-special .special-visual-container.special-visual-container-zuiren::after {
    right: -75px;
  }

  /* zuiren 文字区域：加左右内边距避开两侧镣铐 */
  #page-shen-special .zuiren-judgement-box,
  #page-shen-special .zuiren-judgement-link {
    position: relative;
    z-index: 10;
    margin-left: auto;
    margin-right: auto;
    width: 80%;
    box-sizing: border-box;
  }

  /* 主图等比缩放，居中 */
  #page-shen-special .constrained-img {
    width: 75%;
    max-width: 260px;
    display: block;
    margin: 0 auto;
  }

  /* GIF 等比缩放，强制居中 */
  #page-shen-special .constrained-gif {
    width: 75% !important;
    max-width: 260px !important;
    display: block !important;
    margin: 0 auto !important;
  }

  /* a 标签撑满容器宽度，内部居中 */
  #page-shen-special .special-visual-container a {
    width: 100%;
    display: flex;
    justify-content: center;
  }

  /* holy 图标缩小 */
  #page-shen-special .holy-icon {
    width: 85%;
    max-width: 300px;
  }

  /* Cross：恢复桌面端尺寸（150px） */
  .cross-trigger-img {
    width: 150px !important;
    max-width: 40%;
  }

  /* Prayer：适当放大 */
  .prayer-trigger-img {
    width: 150px !important;
    max-width: 40%;
  }

  /* 罪人页黑底文字框字号缩小 */
  #page-shen-special .zuiren-judgement-box {
    font-size: 16px;
    padding: 10px 16px;
  }

  #page-shen-special .zuiren-judgement-link {
    font-size: 16px;
  }

  /* 右下角/右上角装饰图：移动端改为页面顶端/底端居中显示，不透明不重叠 */
  .corner-decoration,
  .corner-decoration-br,
  .corner-decoration-tr {
    display: block;
    position: static !important;
    width: 120px;
    height: auto;
    margin: 16px auto;
    opacity: 1 !important;
    right: auto !important;
    bottom: auto !important;
    top: auto !important;
    pointer-events: none;
  }

  /* 首页服务流程：每项改为图片+文字左右横排 */
  .home-page .process-list {
    flex-direction: column;
    max-width: 100%;
    gap: 0;
    margin: 20px 0 20px;
    padding: 0 40px;
  }

  .home-page .process-item {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    flex: unset;
    width: 100%;
    padding: 28px 0;
    border-bottom: 1px solid #f0e8dd;
  }

  .home-page .process-item:last-child {
    border-bottom: none;
  }

  /* 隐藏桌面端的连接线和节点方块 */
  .home-page .process-item::before,
  .home-page .process-item::after {
    display: none;
  }

  .home-page .icon-wrap {
    width: clamp(52px, 8vw, 80px);
    height: clamp(52px, 8vw, 80px);
    margin: 0;
    flex-shrink: 0;
  }

  .home-page .process-text {
    flex: 1;
    text-align: right;
    margin-top: 0;
    font-size: clamp(14px, 2.5vw, 22px);
    color: #444;
  }
}

@media (max-width: 480px) {
  .logo {
    font-size: 15px;
  }

  .hero-banner {
    height: auto;
  }

  .home-page .service-list {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }

  .process-list {
    flex-direction: column;
    align-items: center;
    gap: 32px;
  }

  .home-page .process-list {
    flex-direction: column;
  }

  .process-item::after {
    display: none;
  }

  .process-item::before {
    display: none;
  }
}

/* 确保 Logo 链接不会变色 */
.logo {
  text-decoration: none;
  color: inherit; /* 继承原来的 #333 */
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 确保立即预约链接看起来像个按钮 */
.detail-cta .primary-btn {
  display: inline-block;
  text-align: center;
  text-decoration: none; /* 去掉链接下划线 */
  /* 之前的 padding 和 background 将自动生效 */
}


/* 只有 body 同时拥有这两个类时，水印才会生效 */
.diary-detail-page.show-watermark::after {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  pointer-events: none;
  opacity: 0.05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Ctext x='10' y='160' fill='black' font-size='14' transform='rotate(-30 50 100)'%3E已归档%3C/text%3E%3Ctext x='100' y='60' fill='black' font-size='14' transform='rotate(-30 150 50)'%3E蔓君的日记本%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
}

/* 闪现高强度“罪人”水印的样式 */
.diary-detail-page.flash-warning::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 10000; /* 层级高于原有水印 */
  pointer-events: none;
  opacity: 1; /* 颜色更深 */
  /* 密度通过 SVG 的宽高减半（200->100）实现 2 倍密度 */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Ctext x='20' y='70' fill='red' font-size='20' font-weight='bold' font-family='serif' transform='rotate(-30 50 50)'%3E罪人%3C/text%3E%3C/svg%3E");
  background-repeat: repeat;
  transition: opacity 0.5s ease; /* 消失时增加一点平滑感 */
}

/* 当类名被移除时，这个叠加层会直接消失 */


/* 容器：建立坐标基准 */
.glitch-text-container {
  position: relative;
  line-height: 2.2; 
  font-size: 18px;
  margin: 30px 0;
  /* 必须使用等宽字体，否则汉字与符号永远无法完全对齐 */
  font-family: "Courier New", "Consolas", "PingFang SC", "Microsoft YaHei", monospace;
  letter-spacing: 0px; 
  word-break: break-all;
}

/* 符号层：放在底部 */
.overlay-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  color: #333;
  z-index: 1; /* 降到底层 */
  letter-spacing: 6px;
  pointer-events: none;
  user-select: none;
  white-space: pre-wrap; /* 保持空格和换行 */
}

/* 文字层：放在顶层，但平时完全透明 */
.hidden-reveal {
  position: relative;
  color: transparent; /* 平时完全透明，路出底下的符号 */
  z-index: 2; /* 升到顶层 */
  user-select: text;
  white-space: pre-wrap;
}

/* 核心：选中时的遮盖逻辑 */
.hidden-reveal::selection {
  background-color: #000; /* 选中背景为纯黑 */
  color: #ff4d4d;          /* 选中的文字变为红色 */
  /* 通过 text-shadow 消除锯齿，并强化遮盖力 */
  text-shadow: 0 0 0px #000; 
}

/* 兼容 Firefox */
.hidden-reveal::-moz-selection {
  background-color: #000;
  color: #ff4d4d;
}

/* --- 最终修正版：确保背景显示 & 藤蔓垂直 --- */

/* --- 最终修正：背景恢复 + 藤蔓旋转 90 度垂直放置 --- */

#page-shen-special .diary-detail-main {
  /* 确保背景显示，路径必须相对于 css 文件夹 */
  background-image: url("../images/background.jpeg") !important;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  
  max-width: none !important;
  width: 100%;
  min-height: 100vh;
  margin: 0;
  padding: 100px 0 80px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* --- 罪人页独立背景：使用 background02 --- */

#page-shen-special .diary-detail-main.diary-detail-main-zuiren {
  background-image: url("../images/background02.jpeg") !important;
}

/* 彻底隐藏白卡片 */
#page-shen-special .diary-detail-card {
  display: none !important;
}

/* 视觉容器：建立藤蔓的定位坐标 */
#page-shen-special .special-visual-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 1200px; /* 这里的宽度决定了藤蔓距离中间图片的远近 */
  padding: 0 60px;
}

/* --- 藤蔓旋转垂直布局 --- */

#page-shen-special .special-visual-container::before,
#page-shen-special .special-visual-container::after {
  content: "";
  position: absolute;
  top: 45%;
  width: 600px;      /* 这里设置藤蔓旋转后的显示高度 */
  height: 60px;      /* 这里设置藤蔓旋转后的显示宽度 */
  background-image: url("../images/vine.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* --- 罪人页专用镣铐边框（使用 fetters.png） --- */

#page-shen-special .special-visual-container.special-visual-container-zuiren::before,
#page-shen-special .special-visual-container.special-visual-container-zuiren::after {
  background-image: url("../images/fetters.png");
  width: 900px;      /* 加长镣铐，使其长度能到达 zuiren.jpg 顶端附近 */
}

/* 左侧藤蔓：扭转90度 */
#page-shen-special .special-visual-container::before {
  left: -350px;      /* 调整这个值可以让藤蔓离图片更远或更近 */
  transform: translateY(-50%) rotate(90deg);
}

/* 右侧藤蔓：扭转90度 */
#page-shen-special .special-visual-container::after {
  right: -350px;     /* 对称放置 */
  transform: translateY(-50%) rotate(-90deg);
}

/* --- 图片尺寸上限 --- */

#page-shen-special .constrained-img {
  width: 350px;
  max-width: 90%;
  height: auto;
  z-index: 5;
}


/* 1. 核心修正：让 <a> 标签在 Flex 容器中保持居中，不产生偏移 */
#page-shen-special .special-visual-container a {
  display: block;      /* 强制设为块级 */
  width: fit-content;  /* 宽度仅包裹图片 */
  margin: 0 auto;      /* 水平居中 */
  line-height: 0;      /* 消除底部间隙 */
  text-align: center;  /* 内部图片居中 */
}

/* 2. 修正 GIF 样式：取消它的 display: block，让它乖乖待在 <a> 里面 */
#page-shen-special .constrained-gif {
  width: 350px !important;
  max-width: 95vw;
  height: auto;
  z-index: 5;
  margin: 0;           /* 清除外边距 */
  display: inline-block; /* 配合父级 a 标签 */
}

#page-shen-special .holy-icon {
  width: 550px;
  height: auto;
  margin-top: 30px;
  z-index: 5;
}

/* 罪人页：gif 与 holy 之间的黑底红字文案与链接 */

#page-shen-special .zuiren-judgement-box {
  margin-top: 24px;
  padding: 12px 20px;
  background-color: #000;
  color: #ff3333;
  max-width: 90vw;
  text-align: center;
  font-size: 24px; /* 放大 1.5 倍（原 16px） */
  line-height: 1.6;
}

#page-shen-special .zuiren-judgement-box p {
  margin: 0;
}

#page-shen-special .zuiren-judgement-link {
  margin-top: 12px;
  color: #0000ee;  /* 早期互联网风格的蓝色链接 */
  font-weight: bold;
  font-size: 24px; /* 放大 1.5 倍 */
  text-decoration: underline;
  cursor: pointer;
}

#page-shen-special .zuiren-judgement-link:hover {
  color: #551a8b; /* 经典访问/hover 紫色感 */
}

/* 返回按钮 */
#page-shen-special .diary-back-wrapper {
  margin-top: 60px;
  z-index: 10;
}

/* --- 隐藏交互图片统一样式 --- */

.prayer-trigger-img {
  width: 150px;           /* 直接设定一个具体宽度，例如 150px */
  max-width: 30%;         /* 同时限制最大比例，防止在小屏幕溢出 */
  height: auto;           /* 保持比例 */
  cursor: pointer;        /* 恢复手势 */
  
  transform: none !important; 
  
  margin: 0 auto;         /* 确保在 flex 容器中水平居中 */
  z-index: 10;            /* 确保在镣铐层级之上 */
}

.news20180208-pair {
  display: flex;
  justify-content: center;
  align-items: center;    /* 确保两张图片垂直中心对齐 */
  gap: 30px;              /* 设置左右两张图的间距 */
  width: 100%;
}

.news-main-img {
  max-width: 60%;         /* 根据需要调整主图占比 */
  height: auto;
}

/* 右侧 Shalom 图标：直接控制尺寸，不要用 transform: scale */
.shalom-img {
  width: 120px;           /* 设定具体的宽度，图标就不会乱跑了 */
  height: auto;
  cursor: default !important;
}

/* 移除父级容器可能存在的干扰 */
/* upper图片：1. 确保父级容器有定位基准 */
#page-shen-special .diary-detail-main {
  position: relative; /* 必须添加，否则图片会相对于整个 body 定位 */
}

/* 2. 设置右下角图片样式 */
.corner-decoration {
  position: absolute;
  right: 20px;         /* 距离右侧的距离 */
  bottom: 20px;        /* 距离 main 底部（即 footer 上方）的距离 */
  width: 150px;        /* 根据需要调整图片大小 */
  height: auto;
  z-index: 10;         /* 确保在背景之上 */
  pointer-events: none; /* 如果只是装饰，建议禁止鼠标事件防止干扰点击 */
}

/* 3. 响应式处理：在小屏幕上缩小或隐藏，避免遮挡返回按钮 */
@media (max-width: 900px) {
  .corner-decoration {
    width: 80px;
    right: 10px;
    bottom: 10px;
    opacity: 0.6; /* 手机端半透明防止遮挡内容 */
  }

  .corner-decoration-br,
  .corner-decoration-tr {
    width: 80px;
    right: 10px;
  }

  .corner-decoration-tr {
    top: 20px;
  }
}

/* 确保父容器具备定位基准 */
#page-shen-special .diary-detail-main {
  position: relative;
}

/* 统一装饰图的基础样式 */
.corner-decoration-br,
.corner-decoration-tr {
  position: absolute;
  width: 150px;         /* 建议宽度保持一致 */
  height: auto;
  z-index: 10;
  pointer-events: none; /* 防止遮挡交互 */
}

/* 右下角定位 (upper.jpg) */
.corner-decoration-br {
  right: 20px;
  bottom: 20px;
}

/* 右上角定位 (bottom.jpg) */
.corner-decoration-tr {
  right: 20px;
  top: 40px;            /* 距离顶部留出一些间距，避开导航栏 */
}

/* 移动端适配 */
@media (max-width: 900px) {
  .corner-decoration-br,
  .corner-decoration-tr {
    width: 80px;
    right: 10px;
    opacity: 0.5;
  }
  .corner-decoration-tr {
    top: 20px;
  }
}

/* --- 审判页 3列网格布局修复 --- */

/* 1. 恢复一行三张的网格布局 */
.detail-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr); /* 强制三列 */
  gap: 15px; /* 格子间距 */
  padding: 20px;
}

/* 2. 移除之前限制高度的干扰，确保图片比例正常 */
.detail-gallery-thumb {
  position: relative;
  width: 100%;
  height: auto !important; /* 覆盖旧代码中的 160px */
  background-color: #f0f0f0;
  cursor: pointer;
}

/* 3. 确保图片填满格子宽度，高度根据比例自适应 */
.detail-gallery-thumb img:not(.icon) {
  width: 100%;
  height: auto;
  display: block;
}

/* 4. 眼睛计数器样式（完全同步全家福 gallery-meta 名称） */
.gallery-meta {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 3px 8px;
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #666;
  z-index: 5;
  pointer-events: none;
}

.gallery-meta img.icon {
  width: 12px !important;
  height: auto !important;
}

.shenpan-caption {
  text-align: center;
  font-size: 11px;
  color: #888;
  margin-top: 5px;
}

/* --- 首页 index.html 移动端图片极致放大方案 (合并版) --- */
@media (max-width: 768px) {
  
  /* 1. 缩减首页主容器左右边距，释放基础空间 */
  body.home-page main {
    padding-left: 5px !important;
    padding-right: 5px !important;
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden; /* 防止溢出 */
  }

  /* 2. 让服务介绍区紧贴边缘，缩减上下内边距 */
  body.home-page .service-intro {
    padding: 30px 0 !important;
    margin: 0 !important;
    width: 100% !important;
  }

  /* 3. 重构网格布局：强制双列并吃满宽度 */
  body.home-page .service-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important; /* 严格平分 */
    gap: 8px !important;       /* 图片之间的间隙，可根据喜好微调 */
    padding: 0 5px !important;  /* 整体保留极小侧边，避免视觉贴死 */
    width: 100% !important;
    justify-content: space-between !important;
  }

  /* 4. 彻底粉碎 220px 等宽度硬限制 */
  body.home-page .service-card {
    flex: 1 1 auto !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* 5. 确保图片容器比例与宽度同步放大 */
  body.home-page .card-thumb {
    width: 100% !important;
    padding-top: 120% !important; /* 保持纵横比 */
  }
}

/* --- 仅针对首页 (index.html) 的手机端适配 --- */
@media (max-width: 768px) {

  /* 1. 首页图片极致放大（保持之前满意的效果） */
  body.home-page main { padding: 0 10px !important; }
  body.home-page .service-intro { padding: 30px 0 !important; }
  body.home-page .service-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  body.home-page .service-card { width: 100% !important; max-width: none !important; }

  /* 2. 服务流程区域：缩短间距并整体居中 */
  body.home-page .process-list {
    display: flex !important;
    flex-direction: column !important; /* 纵向排列每一行流程 */
    align-items: center !important;    /* 核心：确保每一行在屏幕居中 */
    gap: 12px !important;
  }

  body.home-page .process-item {
    display: flex !important;
    flex-direction: row !important;    /* 图标和文字横向排 */
    align-items: center !important;   /* 垂直居中 */
    justify-content: center !important; /* 核心：图标+文字这个整体居中 */
    gap: 8px !important;              /* 核心：缩短左侧图标和右侧文字的间距 */
    width: auto !important;           /* 宽度自适应内容，方便居中 */
    margin: 0 auto !important;
  }

  body.home-page .icon-wrap {
    flex: 0 0 40px !important;         /* 缩小图标容器 */
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;              /* 移除多余边距 */
  }

  body.home-page .process-text {
    margin: 0 !important;
    padding: 0 !important;
    font-size: 14px !important;
    text-align: left !important;       /* 文字本身左对齐，但在容器内是居中的 */
  }
}

/* --- 针对套系页 (taoxi.html) 移动端全屏放大方案 (极致压榨空间) --- */

/* 1. PC端修复：只给 taoxi 页加顶部间距 */
body.taoxi-page main {
  padding-top: 100px !important; 
}

@media (max-width: 768px) {
  /* 2. 手机端：彻底取消 main 的所有左右边距 */
  body.taoxi-page main {
    padding-top: 80px !important;
    padding-left: 15 !important;   /* 彻底归零 */
    padding-right: 15 !important;  /* 彻底归零 */
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: hidden;           /* 防止出现横向滚动条 */
  }

  /* 3. 彻底取消中间容器的边距 */
  body.taoxi-page .package-section {
    padding: 0 !important;
    margin: 0 !important;
  }

  /* 4. 网格容器：让图片紧贴屏幕边缘 */
  body.taoxi-page .package-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 4px !important;           /* 图片之间的缝隙进一步缩小 */
    padding: 0 4px !important;     /* 仅在最外侧留 4px 呼吸感，如果想彻底贴边可改为 0 */
    width: 100% !important;
  }

  /* 5. 图片卡片：确保宽度 100% */
  body.taoxi-page .package-card {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }

  /* 6. 图片比例：维持横长并稍微增加高度使面积更大 */
  body.taoxi-page .package-thumb {
    width: 100% !important;
    aspect-ratio: 3 / 2 !important; /* 如果觉得 16/9 太细长，3/2 会在视觉上显得图片更大 */
    background-size: cover !important;
    background-position: center !important;
    height: auto !important;
  }

  /* 7. 文字微调：因为图片贴边了，文字也需要微调位置 */
  body.taoxi-page .package-name,
  body.taoxi-page .package-desc,
  body.taoxi-page .package-price {
    padding-left: 6px !important; /* 让文字不要死贴着屏幕边缘 */
    margin-right: 4px !important;
  }
}


/* --- 全局页面修复：解决内容被固定导航栏遮挡的问题 --- */

/* --- 全站顶部重叠修复方案 --- */

/* 1. 全局设置：除首页外，所有页面默认向下位移 100px 避开导航栏 */
main {
  padding-top: 100px;
}

/* 2. 首页排除：如果首页顶部多了一截，将首页的间距重置为 0 */
/* 或者是你首页原本需要的数值 */
.home-page main {
  padding-top: 0 !important;
}

/* --- 移动端极致适配 (max-width: 768px) --- */
@media (max-width: 768px) {
  
  /* 手机端全站通用间距与边距缩减 */
  main {
    padding-top: 80px !important; /* 手机端导航栏稍矮，用 80px */
    padding-left: 20px !important;  /* 极致压榨左右空间 */
    padding-right: 20px !important;
    width: 100% !important;
  }

  /* 首页特殊处理：如果首页手机端也不需要顶部 padding，这里也设为 0 */
  .home-page main {
    padding-top: 0 !important;
  }

  /* 图片列表强制双列放大 (涵盖首页和服务页) */
  .package-grid, .service-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    width: 100% !important;
    padding: 10px 0 !important;
  }

  /* 统一卡片与图片容器：保持横长比例且放大 */
  .package-card, .service-card {
    width: 100% !important;
    max-width: none !important;
  }

  .package-thumb, .card-thumb {
    width: 100% !important;
    aspect-ratio: 3 / 2 !important; /* 锁定 3:2 横长比例 */
    background-size: cover !important;
    background-position: center !important;
    height: auto !important;
  }

  .detail-cta {
    text-align: center !important;
  }
}

/* --- 移动端：极致还原电脑端视觉冲击力 --- */
@media (max-width: 768px) {

  /* 1. 强制装饰物保持巨型尺寸（不随屏幕缩小） */
  .special-visual-container-zuiren::before,
  .special-visual-container-zuiren::after,
  #page-shen-special .special-visual-container::before,
  #page-shen-special .special-visual-container::after {
    width: 600px !important;  /* 维持和电脑端一样的宽度 */
    height: 100px !important; /* 维持厚度 */
    position: absolute !important;
    top: 50% !important;
    z-index: 5 !important;
  }

  /* 2. 左侧装饰：从左侧极深处刺入，只露出一部分 */
  .special-visual-container-zuiren::before,
  #page-shen-special .special-visual-container::before {
    left: -280px !important;  /* 调整这个负值来控制刺入的深度 */
    transform: translateY(-50%) rotate(90deg) !important;
  }

  /* 3. 右侧装饰：从右侧极深处刺入 */
  .special-visual-container-zuiren::after,
  #page-shen-special .special-visual-container::after {
    right: -280px !important; /* 调整这个负值来控制刺入的深度 */
    transform: translateY(-50%) rotate(-90deg) !important;
  }

  /* 4. 关键：防止巨型装饰导致手机页面左右晃动 */
  .special-visual-container,
  .special-visual-container-zuiren,
  #page-shen-special main {
    overflow: hidden !important; 
    position: relative !important;
    width: 100vw !important;
  }

  /* 5. 网页1 (zuiren.html) 底部文字重叠修复 */
  .diary-detail-main-zuiren .zuiren-judgement-link {
    display: block !important;
    position: relative !important;
    width: 85% !important;
    margin: 50px auto !important; /* 增加上下间距，避免挤压 */
    height: auto !important;
    line-height: 1.5 !important;
    font-size: 24px !important;
    white-space: normal !important; /* 允许换行 */
    text-align: center !important;
    z-index: 10;
  }
}

/* --- 移动端：放大 Prayer.png ( vine.png ) 方案一 --- */
@media (max-width: 768px) {
  /* 针对网页2 (shen.html) 的 Prayer/Vine 图片 */
  #page-shen-special .special-visual-container .prayer-trigger-img {
    width: 60% !important;      /* 从原来的 30% 放大到 60% */
    max-width: 300px !important; /* 设置一个最大上限，防止在宽屏手机上过大 */
    height: auto !important;     /* 保持比例 */
    margin: 0 auto !important;   /* 确保水平居中 */
    display: block !important;   /* 强制作为块级元素居中 */
    z-index: 15 !important;      /* 确保在其他装饰物之上 */
  }
}

/* --- 平板端 (768px - 1024px)：完全还原电脑端视觉效果 --- */
@media (min-width: 768px) and (max-width: 1024px) {

  /* 1. 装饰物（锁链/藤蔓）直接使用电脑端的巨型尺寸 */
  .special-visual-container-zuiren::before,
  .special-visual-container-zuiren::after,
  #page-shen-special .special-visual-container::before,
  #page-shen-special .special-visual-container::after {
    width: 600px !important;  /* 还原电脑端宽度 */
    height: 120px !important; /* 增加厚度，增强存在感 */
    position: absolute !important;
    top: 50% !important;
    z-index: 5 !important;
  }

  /* 左侧：像电脑端一样从深处刺入 */
  .special-visual-container-zuiren::before,
  #page-shen-special .special-visual-container::before {
    left: -220px !important;  /* 针对平板宽度优化的刺入深度 */
    transform: translateY(-50%) rotate(90deg) !important;
  }

  /* 右侧：像电脑端一样从深处刺入 */
  .special-visual-container-zuiren::after,
  #page-shen-special .special-visual-container::after {
    right: -220px !important;
    transform: translateY(-50%) rotate(-90deg) !important;
  }

  /* 2. 核心图片 Prayer.png / Vine.png 显著放大 */
  #page-shen-special .special-visual-container .prayer-trigger-img {
    width: 400px !important;   /* 固定大尺寸，不再随比例缩小 */
    height: auto !important;
    margin: 0 auto !important;
    display: block !important;
    z-index: 15 !important;
  }

  /* 3. 网页1 底部文本：还原电脑端的单行张力 */
  .diary-detail-main-zuiren .zuiren-judgement-link {
    display: block !important;
    width: 100% !important;
    max-width: 800px;
    margin: 80px auto !important; /* 上下留出像电脑端一样的巨大空白 */
    font-size: 26px !important;    /* 增大字号 */
    letter-spacing: 5px !important; /* 增加字间距，提升高级感 */
    white-space: nowrap !important; /* 平板宽度足够，强制单行不换行 */
    text-align: center !important;
  }

  /* 4. 容器处理：切掉溢出部分，增加上下呼吸感 */
  .special-visual-container,
  .special-visual-container-zuiren {
    overflow: hidden !important;
    padding: 120px 0 !important; /* 增加上下间距，模拟电脑端的布局高度 */
    min-height: 800px !important;
  }
}

/* --- 修复平板端首页：服务介绍与 Banner 重叠问题 --- */
@media (min-width: 768px) and (max-width: 1024px) {
  .home-page .hero-banner {
    height: auto !important;
  }
}

/* 针对平板端（768px-1024px）的最终修正方案 */
@media (min-width: 768px) and (max-width: 1024px) {

  /* 1. 服务介绍区域：暴力放大，左右留 20px 缝隙 */
  .home-page main {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 20px !important; 
    margin: 0 auto !important;
  }

  .service-intro {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .home-page .service-list {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 15px !important;
  }

  /* 2. 服务流程区域：图文紧贴且整体居中 */
  .process-list {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important; /* 确保所有步骤项在页面中心排成一列 */
    width: 100% !important;
    padding: 0 !important;
  }

  .process-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important; /* 改为起点对齐，靠下面的 margin 控制整体位置 */
    
    /* 核心修改：限制宽度，让图文缩成一团，这样外层的 align-items:center 才能让它们整体居中 */
    width: fit-content !important; 
    min-width: 200px; /* 根据文字长度微调，保证对齐 */
    
    margin-bottom: 25px !important;
  }

  .process-item .icon-wrap {
    margin: 0 10px 0 0 !important; /* 图标右侧给 10px 间距贴近文字 */
    width: 50px !important;         /* 缩小图标尺寸，更符合你的截图 */
    flex-shrink: 0 !important;
  }

  .process-item .icon-wrap img {
    width: 100% !important;
    height: auto !important;
  }

  .process-text {
    margin: 0 !important;
    padding: 0 !important;
    text-align: left !important;
    font-size: 22px !important;
    font-weight: 500 !important;
    white-space: nowrap !important; /* 强制不换行 */
  }
}

/* 针对平板端（taoxi.html）的套系页面暴力放大 */
@media (min-width: 768px) and (max-width: 1024px) {

  /* 1. 容器撑开，保持 20px 左右间隙 */
  .taoxi-page main {
    max-width: 100% !important;
    width: 100% !important;
    padding: 0 20px !important;
    margin: 80px auto 40px !important; /* 顶部留出 header 空间 */
  }

  /* 2. 强制卡片列表为单列布局 */
  .package-list {
    display: flex !important;
    flex-direction: column !important; /* 强制单列垂直排列 */
    align-items: center !important;
    gap: 30px !important;            /* 卡片之间的上下间距 */
    width: 100% !important;
  }

  /* 3. 卡片暴力放大至 100% 宽度 */
  .package-card {
    width: 100% !important;         /* 占满父容器宽度 */
    max-width: none !important;
    margin: 0 !important;
  }

  /* 4. 模拟手机端的大图高度 */
  .package-thumb {
    width: 100% !important;
    height: auto !important;
    padding-top: 66% !important;    /* 调整这个百分比可以控制大图的纵横比 */
    border-radius: 8px !important;  /* 如果需要圆角可以保留 */
  }

  /* 5. 文字信息放大，居左或居中（根据你截图的效果） */
  .package-name {
    font-size: 26px !important;     /* 显著加大标题 */
    margin-top: 15px !important;
    text-align: left !important;
  }

  .package-desc, .package-price {
    font-size: 18px !important;     /* 加大描述和价格 */
    text-align: left !important;
    margin-top: 8px !important;
  }
}

/* 修复第六张图片显示问题，确保铺满灰色占位格 */
.package-card-judgement .package-thumb {
  background-size: cover !important;    /* 核心：强制图片缩放以完全覆盖容器 */
  background-position: center !important; /* 确保图片居中显示 */
  background-repeat: no-repeat !important; /* 防止图片重复 */
  background-color: transparent !important; /* 隐藏背后的灰色 */
}

/* 如果第六张图内部有特殊的占位文字层，也需要确保它不遮挡背景 */
.judgement-placeholder-text {
  background: rgba(0, 0, 0, 0.3); /* 给文字加一个半透明深色底，确保在背景图上清晰 */
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}