/* ============================================================
   中文本地化覆盖样式（在原站样式之后加载，优先级最高）
   目的：把日文网页字体换成中文网站常用无衬线字体
   ============================================================ */
html, body,
h1, h2, h3, h4, h5, h6,
p, a, li, ul, ol, dl, dt, dd,
table, tr, th, td,
span, label, strong, em, small, b, i, div, section, article, header, footer, nav,
button, input, select, textarea, option {
  font-family: "PingFang SC", "Microsoft YaHei", "微软雅黑",
    "Hiragino Sans GB", "Source Han Sans SC", "Noto Sans CJK SC",
    "WenQuanYi Micro Hei", "Helvetica Neue", Arial, sans-serif !important;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 保留 Font Awesome 等图标字体，避免被上面的规则覆盖 */
.fa, .fas, .far, .fal, .fab, .fad,
[class^="fa-"], [class*=" fa-"],
.icon, [class^="icon-"], [class*=" icon-"] {
  font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands",
    "Font Awesome 5 Free", "Font Awesome 5 Brands", "FontAwesome" !important;
}

/* 正文行距/字重微调，中文观感更舒服 */
body { line-height: 1.7; letter-spacing: .01em; }

/* ---- 极简宠物检索 UI ---- */
.pet-filter{background:#f4fafc;border:1px solid #d9eef5;border-radius:12px;padding:10px 16px;margin-bottom:22px;max-width:1000px;}
.filter-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:9px 0;}
.filter-row + .filter-row{border-top:1px dashed #d9eef5;}
.filter-label{width:44px;color:#2a9bc0;font-weight:700;font-size:14px;flex:0 0 auto;}
.cat-btn{border:1px solid #cfe3ea;background:#fff;color:#456;border-radius:20px;padding:7px 18px;font-size:14px;cursor:pointer;transition:.15s;}
.cat-btn:hover{border-color:#4cc3e0;color:#2a9bc0;}
.cat-btn.active{background:#4cc3e0;border-color:#4cc3e0;color:#fff;font-weight:700;}
#f-breed{padding:8px 12px;border:1px solid #cfe3ea;border-radius:8px;font-size:14px;background:#fff;min-width:160px;}
#pet-results{max-width:1000px;}

/* ---- 首页主视觉 ---- */
body.home #mainvisual.bgimage02,
body.home #mainvisual{
  background-color:#e6ddcd;
  background-image:url("../images/hero.jpg");
  background-position:center;
  background-size:cover;
  background-repeat:no-repeat;
  min-height:250px;
  display:flex; align-items:center;
  position:relative;
}
body.home #mainvisual::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(255,250,240,.10) 0%, rgba(90,70,52,.28) 100%);
}
body.home #mainvisual .container{position:relative; z-index:2;}
body.home #mainvisual h2{
  color:#fff; font-size:34px; letter-spacing:2px; line-height:1.5;
  text-shadow:0 2px 10px rgba(70,52,38,.55);
}
/* 腐化 3 级起换成腐化态底片，文字转冷 */
html[data-dread="3"] body.home #mainvisual.bgimage02,
html[data-dread="4"] body.home #mainvisual.bgimage02,
html[data-dread="5"] body.home #mainvisual.bgimage02,
html[data-dread="6"] body.home #mainvisual.bgimage02,
html[data-dread="3"] body.home #mainvisual,
html[data-dread="4"] body.home #mainvisual,
html[data-dread="5"] body.home #mainvisual,
html[data-dread="6"] body.home #mainvisual{
  background-image:url("../images/hero_dream.jpg");
}
html[data-dread="3"] body.home #mainvisual h2,
html[data-dread="4"] body.home #mainvisual h2,
html[data-dread="5"] body.home #mainvisual h2,
html[data-dread="6"] body.home #mainvisual h2{
  color:#cfd6cf; text-shadow:0 2px 12px rgba(0,0,0,.8);
}
@media screen and (max-width:768px){
  body.home #mainvisual.bgimage02,
body.home #mainvisual{min-height:170px;}
  body.home #mainvisual h2{font-size:22px;}
}

/* ---- 移动端主导航（补镜像站缺失的汉堡菜单行为）---- */
@media screen and (max-width: 768px){
  .menu-icon{cursor:pointer;}
  body.nav-open #gnavi{
    display:block !important;
    position:absolute; left:0; right:0; z-index:9990;
    background:#4a5f58; box-shadow:0 8px 20px rgba(0,0,0,.28);
    /* 镜像站给 #gnavi 同时设了 top 和 bottom，绝对定位下高度被算成 8px；
       必须把 bottom 放开，高度才能由内容撑出来。 */
    top:100% !important; bottom:auto !important;
    width:auto !important; height:auto !important; max-height:80vh !important;
    overflow-y:auto !important; overflow-x:hidden !important;
    -webkit-overflow-scrolling:touch;
  }
  body.nav-open #gnavi .gnavi-inner{
    display:block !important; width:auto !important; margin:0; padding:4px 0;
  }
  body.nav-open #gnavi li{
    display:block !important; float:none !important; width:auto !important;
    border-bottom:1px solid rgba(255,255,255,.12);
  }
  body.nav-open #gnavi li:last-child{border-bottom:0;}
  body.nav-open #gnavi li a{
    display:block; padding:13px 20px; color:#f1f5f2; font-size:15px;
    text-decoration:none; letter-spacing:1px;
  }
  body.nav-open #gnavi li a:active{background:rgba(255,255,255,.10);}
}

/* ---- 页脚社交区（替换日文原站的 Instagram/LINE/Facebook 死链）---- */
.f-social-cn{list-style:none;margin:8px 0 0;padding:0;}
.f-social-cn li{margin:0 0 6px;font-size:13px;line-height:1.9;color:#5a5f58;}
.f-social-cn .tag{display:inline-block;min-width:74px;color:#6e736a;font-size:12px;}
.f-social-cn b{color:#3f5b57;font-weight:700;letter-spacing:.5px;}
/* 页脚：尚未开放的服务项目，显示为文字而不是死链 */
.f-soon{color:#7a746a;cursor:default;}
.f-soon em{font-style:normal;font-size:11px;color:#8e887c;margin-left:5px;
  border:1px solid #d8d2c6;border-radius:2px;padding:0 4px;}
@media screen and (max-width:768px){
  .idx-gallery{grid-template-columns:repeat(2,1fr) !important;}
}

/* 侧栏新闻条：原站用 #998675，在腐化后的米灰底上只有 2.45:1 */
#navi .news-list li,
.nav-box02 .news-list li{ color:#6b5c4d; }
/* 相册/文章的小字说明：保持"次要"但不至于读不清 */
.more, .cm > p:last-child{ color:#6f6a62 !important; }

/* ---- 键盘焦点可见（原站多处 outline:none）---- */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="button"]:focus-visible,
.menu-icon:focus-visible,
.cat-btn:focus-visible{
  outline:2px solid #2a9bc0 !important;
  outline-offset:2px !important;
  border-radius:3px;
}
/* 腐化后焦点环转成暖红，仍然清晰 */
html.d-on a:focus-visible,
html.d-on button:focus-visible,
html.d-on input:focus-visible,
html.d-on select:focus-visible,
html.d-on textarea:focus-visible,
html.d-on [role="button"]:focus-visible,
html.d-on .cat-btn:focus-visible{
  outline-color:#b05a48 !important;
}

/* 底部快捷条：原站在 320px 下写死 334px，会横向溢出 14px */
@media screen and (max-width:420px){
  /* 用 left/right 定位代替百分比宽度，绕开包含块解析（html 上有 filter 时
     fixed 元素的包含块不再是视口，百分比会算错） */
  #btmnavi{left:0 !important; right:0 !important; width:auto !important; max-width:100vw !important;
           box-sizing:border-box; overflow:hidden;}
  #btmnavi .btmn_tel{width:60% !important; padding-right:14px !important; box-sizing:border-box;}
  #btmnavi .btmn_line{width:40% !important; box-sizing:border-box;}
  /* 窄屏下标签换行放在值上方，避免整行撑宽 */
  .f-social-cn li{display:block;}
  .f-social-cn .tag{display:block;min-width:0;margin-bottom:1px;}
}


/* 页头收藏星标（替换 Font Awesome —— 原先为了这一个图标要载 80KB CSS + 700KB 字体） */
.star-ico{display:inline-block;font-style:normal;line-height:1;font-size:1.05em;}

/* ---- 「后仓」自动回复的录像回放 ---- */
.tape{background:#0e1011;border:1px solid #2a2f31;border-radius:6px;overflow:hidden;
  font:12.5px/1.85 Consolas,"Courier New",monospace;box-shadow:0 6px 18px rgba(0,0,0,.28);}
.tape-hd{display:flex;justify-content:space-between;align-items:center;gap:10px;
  background:#171a1c;border-bottom:1px solid #2a2f31;padding:7px 12px;color:#8a938c;font-size:11.5px;letter-spacing:1px;}
.tape-hd .rec{color:#b6564a;}
.tape-hd .rec{animation:tape-blink 1.6s steps(1) infinite;}
@keyframes tape-blink{0%,55%{opacity:1}56%,100%{opacity:.25}}
.tape-hd .tc{color:#c2cac4;}
.tape-scr{position:relative;max-height:232px;overflow-y:auto;padding:12px 14px;
  background:
    repeating-linear-gradient(0deg,rgba(255,255,255,.022) 0 1px,transparent 1px 3px),
    #0a0c0d;
  color:#93a099;}
.tape-scr .tl{margin:0 0 5px;}
.tape-scr .tl b{display:inline-block;min-width:78px;color:#5d6a63;font-weight:400;}
.tape-scr .tl.warn{color:#c9887c;}
.tape-scr .tl.sys{color:#5d6a63;}
.tape-scr .tl.sig{color:#b18d85;margin-top:10px;}
.tape-ft{border-top:1px solid #2a2f31;padding:7px 12px;color:#59635d;font-size:11px;background:#131617;}
@media(max-width:520px){ .tape-scr .tl b{min-width:62px;} }

/* 虚构声明 —— 全站唯一不随腐化变化的文案。它的职责是说实话。 */
.f-fiction{color:#9a958c;font-size:11.5px;line-height:1.8;margin:6px 0 0;letter-spacing:.3px;}

/* 只在打印件上出现的内容。
   隐藏规则必须写在**常规**样式表里 —— print.css 是 media="print" 挂的，
   屏幕上整个不生效，在那边写 display:none 等于没写。 */
.print-only{display:none;}

/* ── 顶栏在窄屏上不许把词从中间断开 ──
   ------------------------------------------------------------------
   九个内页共用 `.topbar`（各自在页面 <style> 里定义），
   而它是 `display:flex` + 固定 gap。375px 下四项挤不下，
   于是每一项都从中间折行：「暖光宠/物」「返回首/页」「找宠/物」「收藏 13/件」。

   布局检查看不见这个：不溢出、不破图、不塌缩 —— 各项指标全绿，
   而它看起来就是**坏的**。是截了张手机图用眼睛看出来的。

   规则写在共用样式表里，一处改九页；
   写进各页的 <style> 就等于抄九份，而抄来的东西会各自过期。

   为什么挤在**一行**里：
   最初写成三条（flex-wrap / white-space / 430px 媒体查询），
   逐行真删测下来发现**任意一条单独存在都能修好它** ——
   于是反向验证清单（按行做 find/replace）没法用一个条目同时废掉三条，
   而一条打不中破坏点的反向验证等于没验。

   顺带一个教训：一开始我是用 `add_style_tag` 叠 `!important` 去"模拟拆掉修复"的，
   三种组合一个都没复现出 bug；把整块**真删**掉却立刻复现。
   **叠加覆盖 ≠ 那段规则不存在。** 要验"没有它会怎样"，就真的把它拿掉。 */
.topbar{flex-wrap:wrap;row-gap:4px;} .topbar > *{white-space:nowrap;} .topbar .h-star{margin-left:auto;}

/* 「您最近浏览过」那一行：没有上一只可报的时候（第一次进详情页），
   seen.js 会把它清空。空的 <p> 还占着外边距，会在图和推荐之间留一道
   莫名其妙的缝 —— 缝本身不吓人，只是让人觉得页面没做完。 */
#seen-line:empty,#seen-deny:empty{display:none;}