/*
 * 本站补丁样式。**必须排在主题 CSS 之后**（见 layouts/Base.astro）。
 *
 * 第一段是从爬取产物的内联 <style> 里搬过来的手机端底部工具条样式。
 * 原站把它写在每一页的 <body> 里 —— 79 页各带一份 2.3 KB 的重复副本，
 * 而且改一处要改 79 处。搬到这里，浏览器还能缓存。
 * 唯一的改动是资源前缀 /suprome/ → /guanyunge/（CDN 目录已改名）。
 */

/*黑色样式*/

.phone-menu0 {
    height: 54px;
    border-top: 1px solid #1d1d1d;
    border-bottom: 1px solid #000;
    position: fixed !important;
    bottom: 0;
    left: 0;
    width: 100%;

    padding: 0;
    margin: 0;
    z-index: 9999;
    background-image: -webkit-gradient(linear, center top, center bottom, from(#474747), to(#2f2f2f));
    background-image: -webkit-linear-gradient(top, #474747, #2f2f2f);
    background-image: -moz-linear-gradient(top, #474747, #2f2f2f);
    background-image: -o-linear-gradient(top, #474747, #2f2f2f);
    background-image: -ms-linear-gradient(top, #474747, #2f2f2f);
    background-image: linear-gradient(to bottom, #474747, #2f2f2f);
    /*--兼容ie的背景色和圆角--*/
    background: #474747;
    background: -moz-linear-gradient(top, #474747 0%, #2f2f2f 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #474747), color-stop(100%, #2f2f2f));
    background: -webkit-linear-gradient(top, #474747 0%, #2f2f2f 100%);
    background: -o-linear-gradient(top, #474747 0%, #2f2f2f 100%);
    background: -ms-linear-gradient(top, #474747 0%, #2f2f2f 100%);
    background: linear-gradient(to bottom, #474747 0%, #2f2f2f 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#474747', endColorstr='#2f2f2f', GradientType=0);
}

.phone-menu0 li {
    width: 20%;
    text-align: center;
    float: left;
    list-style: none;
}

.phone-menu0 li:hover,
.phone-menu li.active {
    background-color: #333;
}

.phone-menu0 li a {
    color: #FFF;
    font-size: 12px;
    text-decoration: none;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.phone-menu0 li i {
    background: url(https://s.kenige.com/guanyunge/images/phone-menu0.png) no-repeat;
    background-size: 25px;
    margin: 6px auto 2px;
    display: block;
    width: 25px;
    height: 25px;
    float: none;
}

.phone-menu0 li i.icon1 { background-position: 0 0; }
.phone-menu0 li i.icon2 { background-position: 0 -25px; }
.phone-menu0 li i.icon3 { background-position: 0 -50px; }
.phone-menu0 li i.icon4 { background-position: 0 -75px; }
.phone-menu0 li i.icon5 { background-position: 0 -101px; }


/* ============================================================
 * 本站自己的样式。
 *
 * ★ 一律用 `wj-` 前缀，**不复用主题的类名**。
 *
 * 原因：主题给了两套互相冲突的定义 —— 首页加载 index.css、内页加载
 * style.css，同一个 .footer_nav / .index-ly / .pro_list 在两边完全不同
 * （页脚：写死 6 列 16% vs 只设 line-height；表单：280px vs 300px）。
 * 复用它们的类名，就等于同一份 HTML 在两种页面上长得不一样 ——
 * 2026-08-19 用户看到的「首页整齐、内页 /lianxi/ 混乱」正是这么来的。
 * 换成自己的前缀，主题规则选不中，两边必然一致。
 * ============================================================ */

/* ------------------------------------------------------------
 * 顶部导航：**五十七个页面统一一套**。
 *
 * 主题把首页和内页弄成了两样：
 *   index.css（首页）  .sina-nav { position:absolute; background:transparent; top:40px }
 *                       → 导航浮在 banner 上、透明底
 *   style.css（内页）  .sina-nav { background:#000 }，并把 .sina-brand 压到 90px
 *                       → 实心黑条、logo 正常
 * 而 sina-nav-n.css 的 `.sina-brand > img { height:100%; padding:50px 0 }`
 * 在没有 style.css 覆盖时会把 110px 的 logo 吃到只剩 10px ——
 * 用户 2026-08-19 看到的「首页导航和内部不一致」就是这两件事叠在一起。
 *
 * 这里把内页那套写成全站规则（site.css 排在主题之后，能盖住 index.css）。
 * 数值照抄 style.css 自己在各断点的定义，不另发明一套。
 * ------------------------------------------------------------ */
/* ------------------------------------------------------------
 * 版心宽度：**全站一个值**。
 *
 * 主题这块也是两套，而且源站自己就矛盾：
 *   index.css（首页）  .container { max-width: 98% !important }
 *   style.css（内页）  1280–1599 ⇒ 1200px；1600–1719 ⇒ 1680px；
 *                       1720–1919 ⇒ 1200px；1920+ ⇒ 1680px
 * 于是首页内容贴到距左边 21px、内页在 128px，
 * 而同一个页脚在两边宽度不同 —— 这也是「首页整齐、内页混乱」的一部分。
 *
 * 取一个固定值 1280px：比内页原来的 1200 略宽，又不至于像 98% 那样
 * 在宽屏上拉成一长条。导航单独放宽（它要装下 logo + 七项菜单）。
 * 写 !important 是因为 index.css 那条本身就是 !important。
 * ------------------------------------------------------------ */
.container {
    min-width: 0 !important;
    width: auto !important;
    max-width: 1280px !important;
    margin: 0 auto;
    padding-left: 16px;
    padding-right: 16px;
}
.header .container { max-width: 1600px !important; }

.sina-nav {
    position: relative !important;
    top: 0 !important;
    background: #000 !important;
    border: none;
}
.sina-nav .sina-brand { height: 60px; max-width: 200px; padding: 0; }
.sina-nav .sina-brand > img { height: 100%; width: auto; padding: 10px 0; }
.sina-nav .sina-menu > li > a { color: #fff; }
@media (min-width: 1280px) {
    .sina-nav .sina-brand { height: 90px; }
    .sina-nav .sina-brand > img { padding: 20px 0; }
}

:root {
    --wj-ink: #1b1d1e;
    --wj-mute: #9E9993;
    --wj-line: #e6e6e6;
    --wj-bg: #f7f7f7;
}

/* 视觉隐藏但读屏和爬虫可见。用于首页那个没有版面位置的 h1。
   不能用 display:none —— 那样读屏软件也读不到，等于没有 h1。 */
.wj-sr-only {
    position: absolute !important;
    width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0);
    white-space: nowrap; border: 0;
}

/* 列表页/单页的 h1。原站这个位置没有标题，所以压到与面包屑同一量级，
   不抢版面 —— 它的作用是给搜索引擎和 AI 一句「这页是讲什么的」。 */
.wj-page-title {
    font-size: 22px; font-weight: 600; letter-spacing: 2px;
    color: #000; line-height: 32px; margin: 0 0 24px; padding: 0;
}

/* 详情页标题。主题的 .news-txt-tile 只定义了 h3，我们用 h1（一页一个）。 */
.news-txt-tile h1 {
    font-size: 22px; font-weight: 600; color: #000;
    height: auto; line-height: 34px; margin: 0;
}

/* ------------------------------------------------------------
 * 正文里的图片：**必须限宽**。
 *
 * 富文本是从两代 CMS 搬过来的，很多 <img> 带着源站当年的行内
 * width="1080" 或 style="width:1200px"。容器只有约 950px，
 * 于是图片横向撑破版心、页面出现横向滚动条 —— 用户 2026-08-19 指出
 * /xinwen/416.html 与 /sheji/qingshe/421.html「图片宽度失控」。
 * 行内样式优先级高于普通规则，所以这里必须 !important。
 * ------------------------------------------------------------ */
.news-txt img,
.wj-rich img {
    max-width: 100% !important;
    width: auto !important;
    height: auto !important;
    display: block;
    margin: 12px auto;
}
.news-txt table,
.wj-rich table { max-width: 100% !important; }
/* 正文里被行内样式撑宽的容器（源站编辑器留下的 width:1200px 之类） */
.news-txt p, .news-txt div, .news-txt span,
.wj-rich p, .wj-rich div, .wj-rich span { max-width: 100% !important; }

/* ------------------------------------------------------------
 * 列表封面统一高度。
 *
 * 源图比例五花八门（600×400、1080×1440、正方形都有），不统一的话
 * 三列卡片高低参差；个别文章没有封面时那一格整块塌掉 —— 用户 2026-08-19
 * 指出「封面怎么都不统一高度？甚至还有空白封面无占位图」。
 * 统一 3:2 + object-fit:cover；没封面的用 .wj-ph 占位块保证网格不塌。
 * ------------------------------------------------------------ */
.news_list > a img,
.news_list > img,
.pro_img img,
.wj-news-card img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }

.wj-ph {
    width: 100%; aspect-ratio: 3 / 2;
    display: flex; align-items: center; justify-content: center;
    background: var(--wj-bg); color: var(--wj-mute);
    font-size: 13px; letter-spacing: 4px; border: 1px solid var(--wj-line);
    box-sizing: border-box;
}

/* ------------------------------------------------------------
 * 正文里的链接颜色。
 *
 * 主题的**全局**规则是 `a, a:link, a:visited, a:hover, a:active { color:#fff }`
 * —— 白底上的正文链接因此**完全看不见**。
 * 它能成立是因为源站的链接几乎全在黑底导航和深色遮罩里，
 * 一旦正文里出现链接就是一段空白：2026-08-19 在 /fuwu/huodong/
 * 的「想让自己小区开团，可先[在线预约]登记」上看到 ——
 * 链接文字消失，只剩一个空档。文章正文里的外链同理。
 *
 * 只给正文区域还原，不动导航、面包屑、卡片那几处 ——
 * 它们各自有颜色，一刀切反而会把黑底上的白字变成黑字。
 * ------------------------------------------------------------ */
.wj-lead a, .wj-rich a, .news-txt a,
.wj-act-sum a, .wj-contact a, .wj-steps a, .wj-page-title a {
    color: var(--wj-ink);
    text-decoration: underline;
    text-underline-offset: 3px;
}
.wj-lead a:hover, .wj-rich a:hover, .news-txt a:hover,
.wj-act-sum a:hover, .wj-contact a:hover, .wj-steps a:hover { color: #000; }

/* ------------------------------------------------------------ 页脚 */
.wj-foot { background: #ededed; padding: 48px 0 32px; margin-top: 80px; }
.wj-foot a { color: #333; }
.wj-foot a:hover { color: #000; text-decoration: underline; }
.wj-foot-grid { display: flex; flex-wrap: wrap; gap: 24px 32px; align-items: flex-start; }
.wj-foot-col { flex: 1 1 120px; min-width: 100px; }
.wj-foot-col h2 { font-size: 15px; font-weight: 600; letter-spacing: 1px; margin: 0 0 12px; }
.wj-foot-col h2 a { color: #000; }
.wj-foot-col ul { list-style: none; padding: 0; margin: 0; }
.wj-foot-col li { font-size: 13px; line-height: 26px; }
.wj-foot-col li a { color: #6c6c6c; }

.wj-foot-qr { flex: 0 0 auto; }
.wj-foot-qr ul { display: flex; gap: 12px; }
.wj-foot-qr img { width: 84px; height: 84px; display: block; background: #fff; }
.wj-foot-qr li { text-align: center; }
.wj-foot-qr span { display: block; font-size: 12px; color: #6c6c6c; line-height: 22px; }

.wj-foot-links {
    margin-top: 32px; padding-top: 20px; border-top: 1px solid #dcdcdc;
    font-size: 13px; color: #6c6c6c;
}
.wj-foot-links > span { font-weight: 600; color: #000; margin-right: 12px; }
.wj-foot-links a { margin-right: 16px; color: #6c6c6c; }

/* 版权条：备案号与版权同一行（用户 2026-08-19 指定）。 */
.wj-foot-bar { background: var(--wj-ink); padding: 18px 0; }
.wj-foot-bar p {
    margin: 0; text-align: center; color: #808080;
    font-size: 12px; line-height: 22px;
}
.wj-foot-bar a { color: #808080; }
.wj-foot-bar .sep { margin: 0 10px; color: #555; }

/* ------------------------------------------------------------ 预约表单 */
.wj-form { max-width: 460px; }
.wj-form h2 { font-size: 26px; font-weight: 600; letter-spacing: 2px; margin: 0 0 20px; }
.wj-form form { display: flex; flex-direction: column; gap: 12px; }
.wj-form input {
    width: 100%; height: 44px; box-sizing: border-box;
    border: 1px solid var(--wj-ink); background-color: #fff;
    background-repeat: no-repeat; background-position: 10px center; background-size: 20px 20px;
    padding: 8px 12px 8px 40px; outline: none; font-size: 14px;
}
.wj-form input:focus { border-color: #000; box-shadow: 0 0 0 2px rgba(0, 0, 0, .08); }
.wj-i-user  { background-image: url(https://s.kenige.com/guanyunge/image/user.png); }
.wj-i-city  { background-image: url(https://s.kenige.com/guanyunge/image/add.png); }
.wj-i-phone { background-image: url(https://s.kenige.com/guanyunge/image/phone.png); }
.wj-form button[type="submit"] {
    height: 44px; background: var(--wj-ink); color: #fff;
    border: 1px solid var(--wj-ink); font-size: 15px; letter-spacing: 4px;
    cursor: pointer; transition: opacity .2s;
}
.wj-form button[type="submit"]:hover { opacity: .85; }
.wj-form button[type="submit"]:disabled { opacity: .5; cursor: default; }
.wj-form-msg { min-height: 24px; font-size: 13px; line-height: 24px; margin: 8px 0 0; }
.wj-form-note { font-size: 13px; color: #6c6c6c; line-height: 24px; margin: 4px 0 0; }

/* ------------------------------------------------------------ 通用版块 */
.wj-block { padding: 40px 0; }
.wj-h2 { font-size: 24px; font-weight: 600; letter-spacing: 2px; margin: 0 0 24px; }
.wj-h2 .more { float: right; font-size: 14px; font-weight: 400; color: var(--wj-mute); }
.wj-lead { font-size: 15px; line-height: 30px; color: #444; margin-bottom: 28px; }

/* 首页设计风格入口 */
.wj-style-card { text-align: center; border: 1px solid var(--wj-line); margin-bottom: 20px; }
.wj-style-card h3 { font-size: 16px; font-weight: 600; letter-spacing: 2px; line-height: 64px; margin: 0; }
.wj-style-card a { color: #000; display: block; transition: background .3s, color .3s; }
.wj-style-card a:hover { background: var(--wj-ink); color: #fff; }

/* 首页资讯卡 */
.wj-news-card { margin-bottom: 30px; }
.wj-news-card h3 { font-size: 14px; font-weight: 600; line-height: 25px; height: 25px; overflow: hidden; margin: 12px 0 4px; }
.wj-news-card a { color: #000; }
.wj-news-card .date { font-size: 12px; color: #727171; font-style: normal; }

/* ------------------------------------------------------------ 预约页流程条 */
.wj-steps { list-style: none; counter-reset: s; padding: 0; margin: 0 0 32px; }
.wj-steps li {
    counter-increment: s; position: relative;
    padding: 0 0 20px 44px; line-height: 28px; font-size: 14px; color: #444;
    border-left: 1px solid var(--wj-line); margin-left: 14px;
}
.wj-steps li:last-child { border-left-color: transparent; padding-bottom: 0; }
.wj-steps li::before {
    content: counter(s); position: absolute; left: -14px; top: 0;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--wj-ink); color: #fff;
    font-size: 13px; line-height: 28px; text-align: center;
}
.wj-steps strong { color: #000; }

/* ------------------------------------------------------------ 联系方式行 */
.wj-contact { list-style: none; padding: 0; margin: 0; }
.wj-contact li {
    display: flex; align-items: flex-start; gap: 12px;
    padding: 14px 0; border-bottom: 1px solid var(--wj-line);
    font-size: 14px; line-height: 26px;
}
.wj-contact li:last-child { border-bottom: 0; }
.wj-contact .k { flex: 0 0 84px; color: var(--wj-mute); }
.wj-contact .v { flex: 1 1 auto; color: #000; word-break: break-all; }
.wj-contact a { color: #000; }

/* 联系页二维码 */
.wj-qr-row { display: flex; flex-wrap: wrap; gap: 24px; margin-top: 8px; }
.wj-qr-row figure { margin: 0; text-align: center; }
.wj-qr-row img { width: 132px; height: 132px; display: block; border: 1px solid var(--wj-line); }
.wj-qr-row figcaption { font-size: 13px; color: #6c6c6c; line-height: 28px; }

/* ------------------------------------------------------------ 门店卡 */
.wj-store { display: flex; flex-wrap: wrap; gap: 28px; padding: 28px 0; border-top: 1px solid var(--wj-line); }
.wj-store:first-of-type { border-top: 0; }
.wj-store-img { flex: 0 0 360px; max-width: 100%; }
.wj-store-img img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; }
.wj-store-body { flex: 1 1 320px; min-width: 260px; }
.wj-store-body h2 { font-size: 20px; font-weight: 600; letter-spacing: 1px; margin: 0 0 2px; }
.wj-store-body .en { font-size: 12px; color: var(--wj-mute); letter-spacing: 1px; margin: 0 0 14px; }
.wj-store-guide { font-size: 13px; line-height: 26px; color: #686765; margin-top: 12px; }
.wj-store-guide p { margin: 0 0 6px; }

/* ------------------------------------------------------------ 活动卡 */
.wj-act { display: flex; flex-wrap: wrap; gap: 24px; padding: 24px 0; border-top: 1px solid var(--wj-line); }
.wj-act:first-of-type { border-top: 0; }
.wj-act-img { flex: 0 0 300px; max-width: 100%; }
.wj-act-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; display: block; }
.wj-act-body { flex: 1 1 300px; min-width: 240px; }
.wj-act-body h2 { font-size: 18px; font-weight: 600; margin: 0 0 8px; }
.wj-act-meta { font-size: 13px; color: var(--wj-mute); line-height: 26px; }
.wj-act-sum { font-size: 14px; line-height: 26px; color: #444; margin-top: 8px; }
.wj-badge {
    display: inline-block; margin-left: 10px; padding: 0 10px;
    font-size: 12px; line-height: 22px; color: #fff; background: var(--wj-mute);
}
.wj-badge.on { background: #1a7f37; }

/* ------------------------------------------------------------
 * 首页三张产品卡。
 *
 * 源站这里是坏的：index.css 的 .pro_list ul li { width:100% } 让三张竖排，
 * 而图只有 600×400（img-fluid 是 max-width，不会放大），
 * .txt 遮罩却铺满约 1150px —— 图旁边跟着一大片对不齐的深色块。
 * style.css 里那组 .pro_list_s1/2/3 的左右 margin 明摆着是给三列准备的，
 * 只是首页不加载 style.css。按原意改成三列。
 * ------------------------------------------------------------ */
@media screen and (min-width: 768px) {
    .pro_list ul li { width: 32%; }
    .pro_list ul li .pro_list_s { margin: 0; }
    .pro_list ul li img { width: 100%; height: auto; display: block; }
}
