/* 产品详情页（view_article_shequ / view_article_gaoceng）内联样式外联
   原模板 body 内 <style> 块，层叠顺序位于 head 所有样式之后，
   因此本文件 link 必须放在 head 中其它样式之后 */
#secondPage img {
width: 100%;
height: auto; /* 更好地处理图片比例 */
}

/* relatedArea 上方的 #firstball 是 float:left，紧跟其后的 .relatedArea 的 margin-top
   会被边距折叠吃掉（实测间隙为 0）。改为给浮动容器加 margin-bottom（浮动元素下边距不折叠） */
#firstball {
margin-bottom: var(--space-8);
}

/* === 同城相关区域内链（relatedArea）===
 * 详情页之间横向互链，形成站内链接网络，帮助搜索引擎发现深层页面并在站内流转权重。
 * 内容由 {eyou:arclist} 按当前分站过滤后输出，随城市自动变化。
 *
 * 视觉约定：模板把 .relatedArea 放在 #firstball 之外、.content 内页面底部，
 * 直接落在页面灰底上 —— 故采用与 .seoIntro / .listIntro / .sonTypename 一致的
 * 「白底 + 圆角 + 卡片阴影」视觉，成为页面收尾的独立卡片。
 * 列表项前加 "›" 主色引导符；hover 时文字转主色 + 平滑过渡。
 * 颜色 / 间距 / 字号 / 圆角 / 阴影一律取设计变量，断点遵循 991 / 767。 */
.relatedArea {
clear: both;
margin: 0;
padding: var(--space-6) var(--space-7);
background: var(--color-white);
border-radius: var(--radius-card);
box-shadow: 0 0 14px rgba(0, 0, 0, .15);
box-sizing: border-box;
}
.relatedArea h2 {
margin: 0 0 var(--space-4);
padding-left: var(--space-4);
border-left: 4px solid var(--color-primary);
font-size: var(--font-lg);
font-weight: 700;
line-height: var(--leading-tight);
color: var(--color-text);
}
.relatedArea-tip {
margin: 0 0 var(--space-5);
font-size: var(--font-sm);
line-height: var(--leading-loose);
color: var(--color-text-secondary);
}
.relatedArea-list {
margin: 0;
padding: var(--space-4) 0 0;
list-style: none;
overflow: hidden;
border-top: 1px dashed var(--color-border-dark);
}
.relatedArea-list li {
float: left;
width: 33.333%;
padding: var(--space-2) var(--space-4) var(--space-2) 0;
margin: 0;
box-sizing: border-box;
font-size: var(--font-sm);
line-height: var(--leading-loose);
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.relatedArea-list li::before {
content: "›";
color: var(--color-primary);
font-weight: 700;
margin-right: 6px;
display: inline-block;
}
.relatedArea-list li a {
color: var(--color-text-secondary);
transition: color .2s ease;
}
.relatedArea-list li a:hover {
color: var(--color-primary);
}
@media (max-width: 991px) {
.relatedArea {
margin: 0;
padding: var(--space-5);
}
.relatedArea h2 {
font-size: var(--font-base);
}
.relatedArea-list li {
width: 50%;
}
}
@media (max-width: 767px) {
.relatedArea-list li {
width: 100%;
padding-right: 0;
}
}