/* ============================================================
   style.css — 商务模特网公共样式（全站共享）
   含：变量 / reset / head / foot / mqq / backtop / 面包屑 / 分页
   ============================================================ */

:root{
  --ink:#111418;
  --ink-2:#1a1d24;
  --ink-3:#22262e;
  --gold:#c9a96a;
  --gold-2:#d4b87e;
  --gold-soft:rgba(201,169,106,.14);
  --line:rgba(201,169,106,.28);
  --line-soft:rgba(201,169,106,.12);
  --txt:#d8d4cc;
  --txt-mute:#8a857c;
  --txt-dim:#5e5a52;
  --bg:#0e1014;
  --serif:'Noto Serif SC',serif;
  --sans:'Noto Sans SC',sans-serif;
  --wrap:1200px;
}

/* reset */
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--bg);color:var(--txt);line-height:1.7;font-size:15px;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none;transition:color .25s}
a:hover{color:var(--gold)}
img{display:block;max-width:100%;height:auto}
ul,ol{list-style:none}
::selection{background:var(--gold);color:var(--ink)}
:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

/* ===== 吸顶单层 head ===== */
.site-head{position:sticky;top:0;z-index:100;background:rgba(14,16,20,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.head-inner{max-width:var(--wrap);margin:0 auto;padding:0 24px;height:68px;display:flex;align-items:center;gap:24px}
.head-logo{font-family:var(--serif);font-size:20px;font-weight:700;color:var(--gold);letter-spacing:2px;margin-right:auto}
.head-nav{display:flex;gap:28px}
.head-nav a{font-size:14px;color:var(--txt);position:relative;padding:4px 0;letter-spacing:1px}
.head-nav a.active,.head-nav a:hover{color:var(--gold)}
.head-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:-3px;height:2px;background:var(--gold)}
.head-btn{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:var(--ink);font-weight:600;font-size:13px;padding:9px 20px;border-radius:2px;letter-spacing:1px}
.head-btn:hover{color:var(--ink);opacity:.92}
.head-burger-check{display:none}
.head-burger{display:none;cursor:pointer;flex-direction:column;gap:5px;padding:6px}
.head-burger span{width:22px;height:2px;background:var(--gold);transition:.3s}

/* ===== 卡片式合规 foot ===== */
.ftk{background:linear-gradient(180deg,var(--ink),var(--bg));border-top:1px solid var(--line);margin-top:56px}
.ftk-in{max-width:var(--wrap);margin:0 auto;padding:44px 24px 0}
.ftk-bdrow{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-bottom:28px}
.ftk-bdg{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;color:var(--txt-mute);border:1px solid var(--line-soft);background:rgba(255,255,255,.02);padding:4px 15px;letter-spacing:1px}
.ftk-bdg::before{content:"◆";color:var(--gold);font-size:9px}
a.ftk-bdg{transition:border-color .3s,color .3s}
a.ftk-bdg:hover{border-color:var(--gold);color:var(--gold)}
.ftk-gd{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.ftk-cd{border:1px solid var(--line-soft);padding:19px 19px 15px;background:rgba(255,255,255,.015);transition:border-color .3s}
.ftk-cd:hover{border-color:var(--line)}
.ftk-cd h3{font-family:var(--serif);font-size:15px;color:var(--gold);letter-spacing:3px;margin-bottom:12px;display:flex;align-items:center;gap:10px;font-weight:600}
.ftk-cd h3::after{content:"";flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}
.ftk-cd ul li{margin-bottom:8px}
.ftk-cd ul li a{font-size:13px;color:var(--txt-mute)}
.ftk-cd ul li a:hover{color:var(--gold)}
.ftk-law{margin:30px 0 0;text-align:center}
.ftk-law p{font-size:12px;color:var(--txt-dim);letter-spacing:1px}
.ftk-law a{color:var(--txt-mute)}
.ftk-law a:hover{color:var(--gold)}
.ftk-cr{border-top:1px solid var(--line-soft);margin-top:22px;padding:16px 0 20px;text-align:center}
.ftk-nav{font-size:12.5px;color:var(--txt-mute)}
.ftk-nav a{color:var(--txt-mute)}
.ftk-nav a:hover{color:var(--gold)}
.ftk-nav span{color:var(--txt-dim);margin:0 10px}
.ftk-cp{font-size:12px;color:var(--txt-dim);letter-spacing:1px;margin-top:9px}

/* ===== 移动端 QQ CTA（仅移动显示） ===== */
.mqq-fixed{display:none}

/* ===== 回到顶部 ===== */
.back-top{position:fixed;right:24px;bottom:24px;width:44px;height:44px;background:var(--ink-2);border:1px solid var(--line);color:var(--gold);display:none;align-items:center;justify-content:center;cursor:pointer;z-index:90;font-size:18px;border-radius:2px;transition:border-color .3s}
.back-top:hover{border-color:var(--gold)}
.back-top.show{display:flex}

/* ===== 面包屑（公共） ===== */
.crumb-wrap{background:var(--ink);border-bottom:1px solid var(--line-soft);padding:18px 0}
.crumb{max-width:var(--wrap);margin:0 auto;padding:0 24px;font-size:13px;color:var(--txt-dim);letter-spacing:1px}
.crumb a{color:var(--txt-mute)}
.crumb a:hover{color:var(--gold)}
.crumb .sep{margin:0 8px}

/* ===== 分页（公共） ===== */
.pg-bar{display:flex;justify-content:center;align-items:center;gap:8px;margin-top:48px;flex-wrap:wrap}
.pg-bar a,.pg-bar span{display:inline-flex;align-items:center;justify-content:center;min-width:40px;height:40px;padding:0 14px;border:1px solid var(--line-soft);font-size:14px;color:var(--txt-mute);border-radius:2px}
.pg-bar a:hover{border-color:var(--gold);color:var(--gold)}
.pg-bar .current,.pg-bar .page-current{background:linear-gradient(135deg,var(--gold),var(--gold-2));color:var(--ink);border-color:var(--gold);font-weight:600}

/* ===== 页面通用标题（列表/详情页顶部 H1） ===== */
.page-h1{font-family:var(--serif);font-size:32px;font-weight:700;color:var(--gold);letter-spacing:4px;text-align:center;margin:48px 0 12px}
.page-sub{text-align:center;font-size:14px;color:var(--txt-mute);letter-spacing:2px;margin-bottom:48px}
.gold-line{width:60px;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);margin:16px auto 0}

/* ===== 公共响应式（head/foot/mqq/面包屑/分页） ===== */
@media(max-width:960px){
  .ftk-gd{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:860px){
  .head-burger{display:flex}
  .head-nav{display:none;position:absolute;top:68px;left:0;right:0;flex-direction:column;background:var(--ink-2);padding:14px 24px;gap:0;border-bottom:1px solid var(--line)}
  .head-nav a{padding:13px 0;border-bottom:1px solid var(--line-soft)}
  .head-nav a.active::after{display:none}
  .site-head:has(.head-burger-check:checked) .head-nav{display:flex}
  .head-btn{display:none}
  .mqq-fixed{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:200;background:rgba(14,16,20,.96);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border-top:1px solid var(--line);padding:10px 14px;gap:10px}
  .mqq-fixed a{flex:1;text-align:center;background:linear-gradient(135deg,var(--gold),var(--gold-2));color:var(--ink);font-weight:600;font-size:14px;padding:12px;border-radius:2px;letter-spacing:1px}
  .mqq-fixed a:hover{color:var(--ink);opacity:.92}
}
@media(max-width:640px){
  body{font-size:14px}
  .wrap,.head-inner,.ftk-in,.crumb{padding:0 16px}
  .ftk-gd{grid-template-columns:1fr}
  .page-h1{font-size:26px;letter-spacing:3px;margin:32px 0 10px}
  .page-sub{margin-bottom:32px}
  .pg-bar a,.pg-bar span{min-width:36px;height:36px;padding:0 10px;font-size:13px}
  .back-top{right:16px;bottom:70px}
}
