/* ============================================================
   refine.css — IPOgift 视觉精修层
   设计语言：墨 × 典藏金 × 宋体（源自敲钟金铃大图与足金产品图）
   加载顺序：必须位于 main.css / main_media.css 之后
   ============================================================ */

:root {
  --rg-ink: #17181c;          /* 墨黑：标题 / 深色底 */
  --rg-ink-soft: #2b2a26;     /* 墨灰：导航文字 */
  --rg-gold: #c9a24b;         /* 典藏金：强调色 */
  --rg-gold-deep: #9a7a2e;    /* 深金：hover / 激活 */
  --rg-gold-light: #e6cf94;   /* 浅金：渐变亮端 */
  --rg-ivory: #faf8f3;        /* 象牙白：浅色版块底 */
  --rg-muted: #6f6a60;        /* 暖灰：辅助文字 */
  --rg-line: #e8e1d3;         /* 暖发丝线：描边 */
  --rg-serif: "Source Han Serif SC", "Noto Serif SC", "STZhongsong", "SimSun", serif;
  --rg-shadow: 0 22px 44px -26px rgba(23, 24, 28, 0.38);
}

html body {
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: rgba(201, 162, 75, 0.28); }

/* ---------- 版块标题：宋体 + 收敛字号 + 字距 ---------- */
.title h5,
.box3_tit .left h5 {
  font-family: var(--rg-serif);
  font-size: 38px;
  letter-spacing: 0.05em;
  color: var(--rg-ink);
  font-weight: 700;
}
.title h6,
.box3_tit .left h6 {
  font-family: var(--rg-serif);
  font-size: 20px;
  letter-spacing: 0.12em;
  color: var(--rg-muted);
  font-weight: 400;
}

/* 标题下的黄色短横 → 金色渐变细线 */
.title hr,
.box3_tit .left hr {
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--rg-gold), var(--rg-gold-light));
}

/* 首页 H1（SEO）与标语区同款式样 */
.title h1 {
  font-family: var(--rg-serif);
  text-transform: uppercase;
  text-align: center;
  font-size: 38px;
  line-height: 120%;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--rg-ink);
}
.box2 .title h1 { color: #fff; }

/* ---------- 页头导航：黄色块 hover → 金色文字 + 金色底线 ---------- */
.pchea { box-shadow: 0 1px 0 rgba(23, 24, 28, 0.06), 0 10px 28px -22px rgba(23, 24, 28, 0.5); }
.pchea ul li a { color: var(--rg-ink-soft); letter-spacing: 0.06em; }
.pchea ul li:hover a,
.pchea ul li.li_act a {
  background-color: transparent;
  color: var(--rg-gold-deep);
  box-shadow: inset 0 -2px 0 var(--rg-gold);
}

/* 轮播指示点 */
.banner .swiper-pagination-bullet-active { background-color: var(--rg-gold); }

/* ---------- 案例鉴赏（case-list）卡片精修 ---------- */
.case-list > li .img-box {
  border: 1px solid var(--rg-line);
  border-radius: 2px;
  box-shadow: 0 1px 0 rgba(23, 24, 28, 0.03);
  transition: box-shadow 0.5s ease, transform 0.5s ease;
}
.case-list > li:hover .img-box {
  box-shadow: var(--rg-shadow);
  transform: translateY(-4px);
}
/* 覆盖模板内联的 1.1 倍粗暴放大 */
.case-list > li .img-box:hover img { transform: scale(1.05); }
.case-list > li .words h5 {
  font-size: 17px;
  line-height: 1.7;
  color: var(--rg-ink);
  font-weight: 600;
  letter-spacing: 0.02em;
}
.case-list > li .words p { color: var(--rg-muted); line-height: 1.8; }
.case-list > li .words h6 {
  font-family: var(--rg-serif);
  letter-spacing: 0.3em;
  text-indent: 0.3em; /* 视觉居中补偿 */
  color: var(--rg-gold-deep);
}

/* ---------- 推荐定制（box3） ---------- */
.box3_warp { background-color: var(--rg-ivory); }
.box3_cont > div.words h5,
.box3_cont > div.words h6 {
  font-family: var(--rg-serif);
  letter-spacing: 0.06em;
}
.box3_cont > div.words h6 { color: var(--rg-muted); }
.box3_cont > div.words h4 {
  border: 1px solid var(--rg-gold);
  border-radius: 35px;
  color: var(--rg-ink-soft);
  letter-spacing: 0.1em;
}
.box3_cont > div.words h4 i { color: var(--rg-gold); }
.box3_cont > div.words h4:hover {
  border-color: var(--rg-gold);
  background: linear-gradient(135deg, var(--rg-gold), var(--rg-gold-deep));
  color: #fff;
}
.box3_cont > div.words h4:hover i { color: #fff; }
.box3_swiper .swiper-prev:hover,
.box3_swiper .swiper-next:hover { color: var(--rg-gold-light); }

/* ---------- 品类六宫格（box2，深色敲钟大图上） ---------- */
.box2 .box2ul li:hover {
  background-color: rgba(23, 24, 28, 0.72);
  border-left: 1px solid rgba(201, 162, 75, 0.85);
  border-right: 1px solid rgba(201, 162, 75, 0.85);
}
.box2 .box2ul li h5 { letter-spacing: 0.08em; }
.box2 .box2ul li h6 { font-family: var(--rg-serif); letter-spacing: 0.1em; }
.box2 .box2ul li p {
  color: var(--rg-gold-light);
  border-bottom: 1px solid var(--rg-gold-light);
}
/* 金色圆环替代生硬的图片圆 */
.box2 .box2ul li .picwarp { border-radius: 50%; box-shadow: 0 0 0 1px rgba(201, 162, 75, 0.45); }

/* ---------- 案例鉴赏版块（box6，浅色纹理上） ---------- */
.box6 { padding: 80px 0; }
.box6 dl { margin: 36px auto 44px; }
.box6 dl dd {
  border: 1px solid var(--rg-line);
  border-radius: 2px;
  color: var(--rg-ink-soft);
  letter-spacing: 0.08em;
  transition: 0.35s;
}
.box6 dl dd:hover {
  border-color: transparent;
  background: linear-gradient(135deg, var(--rg-gold), var(--rg-gold-deep));
  color: #fff;
}
.box6 ul li .words {
  border: 1px solid var(--rg-line);
  border-top: none;
  border-radius: 0 0 2px 2px;
}
.box6 ul li .pic { border-radius: 2px 2px 0 0; overflow: hidden; }
.box6 ul li .words h5 { color: var(--rg-ink); font-weight: 600; }
.box6 ul li .words p { color: var(--rg-muted); }
.box6 ul li .words h6 {
  font-family: var(--rg-serif);
  font-weight: 400;
  border: 1px solid var(--rg-gold);
  border-radius: 2px;
  color: var(--rg-gold-deep);
  letter-spacing: 0.3em;
  text-indent: 0.3em;
}
.box6 ul li .words h6:hover {
  border-color: transparent;
  background: linear-gradient(135deg, var(--rg-gold), var(--rg-gold-deep));
  color: #fff;
}

/* ---------- 面包屑（snav） ---------- */
.snav { background-color: var(--rg-ivory); }

/* ---------- 移动端抽屉导航 ---------- */
.meun-btn span { background: var(--rg-gold); }
.second_nav form { background: var(--rg-ink); }
.second_nav form input { border-bottom-color: var(--rg-gold); }
.second_nav .li_act p { color: var(--rg-gold-deep); }
.second_nav .li_act p::before { border-color: var(--rg-gold); background: var(--rg-gold); }

/* ---------- 页脚：暖墨色 + 金色细节 ---------- */
footer { background-color: var(--rg-ink); }
.footop ul li { color: #b9b2a4; }
.footop ul li:hover { color: var(--rg-gold-light); }
.foobot { border-top: 1px solid rgba(201, 162, 75, 0.28); }
.foobot p { color: #9d968a; }

/* ---------- 表单 / 弹窗 / 悬浮件 ---------- */
.form-btn {
  background: linear-gradient(135deg, var(--rg-gold), var(--rg-gold-deep));
  border-radius: 2px;
  letter-spacing: 0.2em;
}
.tanchuang-content { border: 1px solid var(--rg-line); border-radius: 2px; }
.tanchuang-content h6 { color: var(--rg-gold); }
.fix_list li { background-color: var(--rg-ink); }
.fix_list li:hover { background-color: var(--rg-gold-deep); }

/* ---------- 页脚标签：白底方块 → 墨底金线幽灵标签 ---------- */
.footop .ui-box .ui-btn {
  background: transparent;
  border: 1px solid rgba(201, 162, 75, 0.38);
  border-radius: 2px;
  color: #b9b2a4;
  line-height: 34px;
  padding: 0 18px;
  font-size: 14px;
  letter-spacing: 0.04em;
  transition: 0.3s;
}
.footop .ui-box .ui-btn:hover {
  color: #fff;
  border-color: transparent;
  background: linear-gradient(135deg, var(--rg-gold), var(--rg-gold-deep));
  box-shadow: none;
}

/* ---------- 分页条：拼块 → 独立暖色块 + 金色渐变激活 ---------- */
.ui-page ul { gap: 8px; margin-left: 0; }
.ui-page ul li {
  border: 1px solid var(--rg-line);
  border-radius: 2px;
  margin-left: 0;
  background: #fff;
  font-size: 14px;
  color: var(--rg-muted);
  transition: 0.25s;
}
.ui-page ul li a {
  font-size: 14px;
  color: var(--rg-ink-soft);
  line-height: 36px;
  padding: 0 14px;
  letter-spacing: 0.02em;
}
.ui-page ul li:hover a { background: var(--rg-ivory); }
.ui-page ul li.active,
.ui-page-yellow ul li.active,
.ui-page-red ul li.active,
.ui-page-blue ul li.active,
.ui-page-green ul li.active,
.ui-page-info ul li.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--rg-gold), var(--rg-gold-deep));
}
.ui-page ul li.active a,
.ui-page-yellow ul li.active a,
.ui-page-red ul li.active a,
.ui-page-blue ul li.active a,
.ui-page-green ul li.active a,
.ui-page-info ul li.active a {
  background: transparent;
  color: #fff;
}
.ui-page ul li.active a:hover,
.ui-page-yellow ul li.active a:hover,
.ui-page-red ul li.active a:hover,
.ui-page-blue ul li.active a:hover,
.ui-page-green ul li.active a:hover,
.ui-page-info ul li.active a:hover {
  background: transparent;
  color: #fff;
}

/* ---------- 动效克律：尊重系统减少动态偏好 ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition: none !important;
    animation: none !important;
  }
}

/* ---------- 移动端字阶（main_media.css 在本文件之前加载，需在此重申） ---------- */
@media screen and (max-width: 767px) {
  .title h5,
  .box3_tit .left h5,
  .title h1 { font-size: 28px; }
  .title h6,
  .box3_tit .left h6 { font-size: 16px; letter-spacing: 0.08em; }
  .box6 { padding: 48px 0; }
}