/* 数据分析师职位行情看板 —— 静态站样式 */

:root{
  --bg:#f6f7f9;
  --panel:#ffffff;
  --line:#e5e8ee;
  --line2:#f0f2f5;
  --ink:#151920;
  --ink2:#59616f;
  --ink3:#8b95a4;
  --brand:#2563eb;
  --brand-dk:#1d4fd7;
  --brand-soft:#eef4ff;
  --hot:#e0453b;
  --gold:#e8930c;
  --teal:#0d9f96;
  --violet:#6d4bd8;
  --r:12px;
  --shadow:0 1px 2px rgba(16,24,40,.04), 0 4px 16px rgba(16,24,40,.045);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:64px}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font:15px/1.6 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
h1,h2,h3{margin:0;letter-spacing:-.02em}
.wrap,.sec,.hero-in,.nav-in,.foot-in{max-width:1180px;margin:0 auto;padding:0 22px}

/* ---------------- nav ---------------- */
.nav{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(12px);border-bottom:1px solid transparent;transition:border-color .2s,box-shadow .2s}
.nav.on{border-bottom-color:var(--line);box-shadow:0 1px 12px rgba(16,24,40,.05)}
.nav-in{display:flex;align-items:center;justify-content:space-between;height:58px}
.brand{font-weight:650;font-size:15.5px;display:flex;align-items:center;gap:9px;letter-spacing:-.01em}
.logo{width:22px;height:22px;border-radius:6px;background:var(--brand);
  background-image:linear-gradient(135deg,var(--brand),#5b8df7);position:relative;flex-shrink:0}
.logo::after{content:"";position:absolute;left:5px;bottom:5px;width:12px;height:9px;
  background:linear-gradient(to top,#fff 3px,transparent 3px) 0 100%/3px 9px no-repeat,
             linear-gradient(to top,#fff 3px,transparent 3px) 5px 100%/3px 9px no-repeat,
             linear-gradient(to top,#fff 3px,transparent 3px) 10px 100%/3px 9px no-repeat}
.nav-links{display:flex;gap:4px;flex-wrap:wrap}
.nav-links a{font-size:13.5px;color:var(--ink2);padding:6px 11px;border-radius:8px;transition:.15s}
.nav-links a:hover{background:var(--brand-soft);color:var(--brand)}

/* ---------------- hero ---------------- */
.hero{background:linear-gradient(135deg,#0f1729 0%,#1b2f6b 48%,#1e40af 100%);color:#fff;position:relative;overflow:hidden}
.hero::after{content:"";position:absolute;inset:0;
  background:radial-gradient(900px 380px at 88% -8%,rgba(96,165,250,.28),transparent 62%),
             radial-gradient(620px 300px at 6% 110%,rgba(37,99,235,.22),transparent 65%)}
.hero-in{position:relative;z-index:1;display:grid;grid-template-columns:1.25fr .95fr;gap:38px;
  align-items:center;padding-top:52px;padding-bottom:52px}
.tag{display:inline-block;font-size:12px;letter-spacing:.04em;color:#a9c4ff;background:rgba(255,255,255,.11);
  border:1px solid rgba(255,255,255,.16);padding:4px 11px;border-radius:20px;margin-bottom:16px}
.hero h1{font-size:38px;line-height:1.18;font-weight:700}
.lede{margin:14px 0 0;color:#c3d2ef;font-size:14.5px;max-width:46em;line-height:1.75}
.hero-meta{margin-top:20px;display:flex;gap:8px;flex-wrap:wrap}
.hero-meta span{font-size:12.5px;color:#9db2da;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.1);padding:4px 10px;border-radius:7px}
.hero-nums{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.hn{background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.13);
  border-radius:14px;padding:15px 16px;backdrop-filter:blur(6px)}
.hn .k{font-size:12px;color:#9db2da}
.hn .v{font-size:27px;font-weight:680;margin-top:3px;letter-spacing:-.03em}
.hn .v small{font-size:14px;font-weight:500;color:#c3d2ef;margin-left:2px}
.hn .d{font-size:11.5px;color:#7f95c2;margin-top:2px}

/* ---------------- sections ---------------- */
.sec{padding:46px 22px}
.sec-head{margin-bottom:18px}
.sec-head h2{font-size:23px;font-weight:660}
.sec-head p{margin:5px 0 0;color:var(--ink3);font-size:13.5px}

/* ---------------- findings ---------------- */
.findings{display:grid;grid-template-columns:repeat(auto-fit,minmax(285px,1fr));gap:12px}
.finding{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:17px 18px;box-shadow:var(--shadow);position:relative;overflow:hidden}
.finding::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--brand)}
.finding.hi::before{background:var(--hot)}
.finding.go::before{background:var(--gold)}
.finding.te::before{background:var(--teal)}
.finding .ft{font-size:12.5px;color:var(--ink3);letter-spacing:.02em}
.finding .fb{margin-top:7px;font-size:15.5px;line-height:1.62;color:var(--ink);word-break:normal;overflow-wrap:anywhere}
.finding .fb b{font-weight:660;color:var(--brand)}
.finding.hi .fb b{color:var(--hot)}
.finding.go .fb b{color:#b87708}
.finding.te .fb b{color:var(--teal)}
.finding .fs{margin-top:8px;font-size:12.5px;color:var(--ink3);line-height:1.55}

/* ---------------- filters ---------------- */
.filters{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:6px 16px 10px;box-shadow:var(--shadow);margin-bottom:14px}
.frow{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-start;padding:9px 0;border-bottom:1px dashed var(--line2)}
.frow:last-child{border-bottom:none}
.flab{font-size:12px;color:var(--ink3);min-width:60px;padding-top:6px;flex-shrink:0}
.chips{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.fbtn{display:flex;gap:6px;flex-shrink:0}
.chip{background:#f2f4f7;border:1px solid transparent;color:var(--ink2);
  padding:4px 10px;border-radius:20px;font-size:12.5px;cursor:pointer;user-select:none;
  transition:background .13s,color .13s;white-space:nowrap;
  font-family:inherit;line-height:1.5}
.chip:hover{background:#e7ebf0}
.chip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
.chip.on{background:var(--brand);color:#fff}
.chip .n{opacity:.55;font-size:11px;margin-left:3px}
.chip.more{background:none;border:1px dashed var(--line);color:var(--brand)}
input[type=text],select,.search{border:1px solid var(--line);background:#fff;border-radius:8px;
  padding:6px 11px;font:inherit;font-size:13px;color:var(--ink);outline:none}
.search{flex:1;min-width:220px}
.search:focus{border-color:var(--brand);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
input[type=range]{width:150px;vertical-align:middle;accent-color:var(--brand)}
.rangebox{display:flex;align-items:center;gap:9px;flex:1;min-width:270px;flex-wrap:wrap}
.rv{font-variant-numeric:tabular-nums;font-size:12.5px;color:var(--ink2);min-width:76px}
.ckbox{font-size:12.5px;color:var(--ink2);display:flex;align-items:center;gap:5px;cursor:pointer}
.ckbox input{accent-color:var(--brand)}
button.act{background:var(--brand);color:#fff;border:none;border-radius:8px;padding:6px 15px;
  font:inherit;font-size:13px;cursor:pointer;transition:background .15s}
button.act.ghost{background:#fff;color:var(--ink2);border:1px solid var(--line)}
button.act:hover{background:var(--brand-dk)}
button.act.ghost:hover{background:#f5f7fa;color:var(--ink)}

/* ---------------- kpi ---------------- */
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:11px;margin-bottom:14px}
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:13px 15px;box-shadow:var(--shadow)}
.kpi .k{font-size:11.5px;color:var(--ink3)}
.kpi .v{font-size:24px;font-weight:660;margin-top:3px;letter-spacing:-.03em}
.kpi .v small{font-size:13px;font-weight:500;color:var(--ink2);margin-left:2px}
.kpi .d{font-size:11.5px;color:var(--ink3);margin-top:2px}

/* ---------------- charts ---------------- */
.charts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 17px 17px;box-shadow:var(--shadow);min-width:0}
.card h3{font-size:14px;font-weight:620}
/* 全宽卡：.charts 是两列网格，span2 让卡片横跨两列。
   （此前只在移动端的媒体查询里写过 .card.span2，基础列跨度这条漏了 ——
   结果是所有「全宽卡」实际一直是半宽，宽图被压到 526px 还得横向滚动。） */
.card.span2{grid-column:span 2}
.card .hint{font-size:12px;color:var(--ink3);margin:3px 0 11px}
.bar{display:flex;align-items:center;gap:9px;margin:6px 0;font-size:12.5px;border-radius:5px}
.bar[role=button]:hover{background:#fafbfc}
.bar[role=button]:focus-visible,.donutline[role=button]:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px}
.bar .nm{width:82px;flex-shrink:0;color:var(--ink2);text-align:right;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bar .tr{flex:1;background:var(--line2);border-radius:4px;height:16px;position:relative;overflow:hidden;min-width:0}
.bar .fl{height:100%;border-radius:4px;background:var(--brand);transition:width .3s}
.bar .vl{width:96px;flex-shrink:0;color:var(--ink2);font-variant-numeric:tabular-nums;font-size:12px;text-align:right}
.hist{display:flex;align-items:flex-end;gap:3px;height:132px;padding-top:8px}
.hist .col{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;gap:3px;min-width:0}
.hist .b{width:100%;background:var(--brand);border-radius:3px 3px 0 0;min-height:2px;transition:height .3s}
.hist .c{font-size:10px;color:var(--ink2);font-variant-numeric:tabular-nums}
.hist .x{font-size:10px;color:var(--ink3);white-space:nowrap;margin-top:2px}
.wcloud{display:flex;flex-wrap:wrap;gap:7px;align-items:baseline}
.wcloud span{background:var(--brand-soft);border-radius:7px;padding:4px 8px;color:#17409a}
.wcloud span b{font-weight:640;color:var(--brand);margin-left:2px}
.donutline{display:flex;align-items:center;gap:9px;margin:6px 0;font-size:12.5px}
.donutline .nm{width:82px;text-align:right;color:var(--ink2);flex-shrink:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.donutline .tr{flex:1;background:var(--line2);border-radius:4px;height:16px;overflow:hidden;min-width:0}
.donutline .fl{height:100%;border-radius:4px}
.donutline .vl{width:78px;font-variant-numeric:tabular-nums;color:var(--ink2);font-size:12px;text-align:right;flex-shrink:0}
.empty{padding:26px;text-align:center;color:var(--ink3);font-size:13px}

/* 城市对比表：中位数点 + P25-P75 跨度条 */
.ctab{width:100%;border-collapse:collapse;font-size:12.8px}
.ctab th{text-align:left;font-weight:600;color:var(--ink3);font-size:11.5px;padding:0 8px 7px;
  border-bottom:1px solid var(--line);white-space:nowrap}
.ctab td{padding:7px 8px;border-bottom:1px solid var(--line2);vertical-align:middle}
.ctab td.r,.ctab th.r{text-align:right}
.ctab .cnm{font-weight:560;white-space:nowrap}
.range{position:relative;height:16px;min-width:140px}
.range .base{position:absolute;top:6px;left:0;right:0;height:4px;background:var(--line2);border-radius:3px}
.range .band{position:absolute;top:6px;height:4px;background:#a9c4ff;border-radius:3px}
.range .dot{position:absolute;top:1px;width:10px;height:14px;margin-left:-5px;border-radius:3px;background:var(--brand)}
.rax{position:relative;height:14px}
.rax .t{position:absolute;top:0;font-size:9.5px;color:var(--ink3);transform:translateX(-50%)}

/* 头部岗位画像 */
.jobcard{display:flex;gap:11px;align-items:flex-start;padding:9px 0;border-bottom:1px solid var(--line2)}
.jobcard:last-child{border-bottom:none}
.jobcard .rk{width:24px;height:24px;border-radius:7px;background:var(--brand-soft);color:var(--brand);
  font-size:12px;font-weight:650;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.jobcard .rk.t1{background:#fff0ef;color:var(--hot)}
.jobcard .rk.t2{background:#fff5e6;color:var(--gold)}
.jobcard .rk.t3{background:#eef4ff;color:var(--brand)}
.jobcard .bd{min-width:0;flex:1}
.jobcard .tt{font-size:13.5px;font-weight:560;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.jobcard .sub{font-size:12px;color:var(--ink3);margin-top:1px}
.jobcard .sk{font-size:11.5px;color:var(--ink2);margin-top:3px}
.jobcard .pay{font-size:15px;font-weight:660;color:var(--hot);white-space:nowrap;font-variant-numeric:tabular-nums}

/* ---------------- 分析思路（story） ---------------- */
.story{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:12px}
.step{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px 16px 62px;box-shadow:var(--shadow);position:relative}
.step .no{position:absolute;left:17px;top:16px;width:31px;height:31px;border-radius:9px;
  background:var(--brand-soft);color:var(--brand);font-weight:700;font-size:12.5px;
  display:flex;align-items:center;justify-content:center;letter-spacing:0}
.step h4{margin:0 0 7px;font-size:14.5px;font-weight:640;line-height:1.4}
.step .b{font-size:13.5px;color:var(--ink);line-height:1.72}
.step .b b{color:var(--brand);font-weight:660}
.step ul{margin:9px 0 0;padding-left:17px;font-size:12.8px;color:var(--ink2);line-height:1.72}
.step li{margin:4px 0}
.step li b{color:var(--ink);font-weight:620}
.step code{background:var(--brand-soft);color:#17409a;padding:1px 5px;border-radius:4px;font-size:12px}

/* ---------------- 技术难点（hard） ---------------- */
.hard{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:12px}
.hcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 18px;box-shadow:var(--shadow);display:flex;flex-direction:column;min-width:0}
.hcard h4{margin:0 0 11px;font-size:14px;font-weight:640;line-height:1.45;color:var(--ink)}
.hcard .row{display:flex;gap:9px;margin-bottom:9px;font-size:12.8px;line-height:1.7;align-items:flex-start}
.hcard .row .tag{flex-shrink:0;font-size:10.5px;padding:2px 7px;border-radius:5px;
  font-weight:640;letter-spacing:.02em;white-space:nowrap;margin-top:1px}
.hcard .row.pain .tag{background:#fff0ef;color:#b3261e}
.hcard .row.fix .tag{background:#e7f6f0;color:#0b7a58}
.hcard .row .tx{color:var(--ink2);min-width:0}
.hcard .row.fix .tx{color:var(--ink)}
.hcard .row.fix .tx b{color:var(--brand);font-weight:650}
.hcard code{background:var(--brand-soft);color:#17409a;padding:1px 5px;border-radius:4px;font-size:11.5px}
.hcard .code{margin-top:auto;padding-top:10px;border-top:1px dashed var(--line2);
  font-size:11.5px;color:var(--ink3);font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  line-height:1.6;word-break:break-word}

/* ---------------- 图表图例（viz.js 输出） ---------------- */
.viz-legend{display:flex;flex-wrap:wrap;gap:5px 16px;align-items:center;
  margin-top:10px;font-size:11.5px;color:var(--ink3);line-height:1.65}
.viz-legend i{display:inline-block;width:14px;height:11px;border-radius:2.5px;
  vertical-align:-1px;margin:0 1.5px}
.viz-legend b{color:var(--ink2);font-weight:640}
.viz-legend .lgsize i{border-radius:50%;background:#c3cbd8;display:inline-block;margin:0 3px}
.viz-legend .lgbox{background:linear-gradient(90deg,#a9c4ff,#2563eb);width:18px;height:11px}
.viz-legend .lgnote{flex:1;min-width:230px;color:var(--ink3)}
.viz-legend .lgnote b{color:var(--ink2)}

/* 雷达图图例与城市池 */
.radar-legend{gap:7px 10px}
.radar-legend .rl{display:inline-flex;align-items:center;gap:6px;color:var(--ink2);
  background:#f8fafc;border:1px solid var(--line);border-radius:8px;padding:4px 10px;font-size:11.5px}
.radar-legend .rl i{width:9px;height:9px;border-radius:3px;background:var(--c);margin:0}
.radar-legend .rl b{color:var(--ink);font-weight:650}
.radar-pool{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-top:11px;
  padding-top:11px;border-top:1px dashed var(--line2)}
.radar-pool .rplab{font-size:11.5px;color:var(--ink3);margin-right:3px}
/* 对比城市选择器：视觉接近筛选 chip，但语义独立（不参与「重置」） */
.rchip{background:#f2f4f7;border:1px solid transparent;color:var(--ink2);
  padding:4px 10px;border-radius:20px;font-size:12.5px;cursor:pointer;user-select:none;
  font-family:inherit;line-height:1.5;white-space:nowrap;transition:background .13s,color .13s}
.rchip:hover{background:#e7ebf0}
.rchip.on{background:var(--brand);color:#fff}
.rchip .n{opacity:.55;font-size:11px;margin-left:3px}
.rchip:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* 图表容器：窄屏下允许横向滚动，避免 SVG 被压到看不清 */
#c-geo,#c-box,#c-scatter,#c-radar{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
#c-geo svg,#c-box svg,#c-scatter svg{min-width:660px}
/* 地图信息密度最高（省界 + 62 个城市点位 + 标注），单独放开更大的最小宽度：
   手机上宁可横向平移，也不要把 10px 的标注等比压成 4px 的糊字 */
#c-geo svg{min-width:840px}
#c-radar svg{min-width:520px}

/* 小节标题（口径段后半部分） */
.sec-head.sub2{margin-top:30px;padding-top:24px;border-top:1px solid var(--line)}
.sec-head.sub2 h3{font-size:17px;font-weight:640;letter-spacing:-.02em}
.sec-head.sub2 p{margin:5px 0 0;color:var(--ink3);font-size:13px}

#focus-note{margin-top:12px}
/* 深圳专题的技能/行业标签名较长（「数据分析/挖掘经验」），默认 82px 会被截成
   「数据分析/挖…」，这里放宽到 132px */
#focus-skill .bar .nm,#focus-ind .bar .nm{width:132px}

/* ---------------- table ---------------- */
.tbar{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:8px;flex-wrap:wrap}
.tbar .cnt{font-size:12.5px;color:var(--ink3)}
.tscroll{overflow:auto;max-height:600px}
table{width:100%;border-collapse:collapse;font-size:13px}
th{text-align:left;font-weight:600;color:var(--ink2);font-size:12px;padding:8px;
  border-bottom:1px solid var(--line);white-space:nowrap;cursor:pointer;user-select:none;
  background:var(--panel);position:sticky;top:0;z-index:2}
th.nos{cursor:default}
th:hover:not(.nos){color:var(--brand)}
th .ar{opacity:.4;font-size:10px}
td{padding:8px;border-bottom:1px solid var(--line2);vertical-align:top}
tbody tr:hover{background:#fafbfc}
td.t{max-width:300px}
td.t .ttl{color:var(--ink);font-weight:520}
td.t .ttl:hover{color:var(--brand)}
td.t .sk{color:var(--ink3);font-size:11.5px;margin-top:2px}
td.pay{font-variant-numeric:tabular-nums;white-space:nowrap;font-weight:620}
td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.co{color:var(--ink2);max-width:160px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pager{display:flex;gap:6px;justify-content:center;align-items:center;margin-top:13px;flex-wrap:wrap}
.pager button{border:1px solid var(--line);background:#fff;border-radius:7px;padding:4px 11px;
  font:inherit;font-size:12.5px;cursor:pointer;color:var(--ink2)}
.pager button:disabled{opacity:.4;cursor:default}
.pager button.on{background:var(--brand);color:#fff;border-color:var(--brand)}
.pager button:focus-visible,button.act:focus-visible,.search:focus-visible,
input[type=range]:focus-visible,select:focus-visible,
th[data-s]:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
th[data-s]{tab-size:4}
.pager .gap{color:var(--ink3)}

/* ---------------- method ---------------- */
.method{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:12px}
.mcard{background:var(--panel);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow)}
.mcard h4{margin:0 0 8px;font-size:13.5px;font-weight:620}
.mcard ul{margin:0;padding-left:17px;color:var(--ink2);font-size:13px;line-height:1.72}
.mcard li{margin:3px 0}
.mcard code{background:var(--brand-soft);color:#17409a;padding:1px 5px;border-radius:4px;font-size:12px}

footer{background:#0f1729;color:#93a3c0;margin-top:20px}
.foot-in{padding:26px 22px;font-size:12.5px;line-height:1.85}
.foot-in b{color:#dbe5f7;font-weight:560}

@media (max-width:980px){
  .hero-in{grid-template-columns:1fr;gap:26px;padding-top:40px;padding-bottom:40px}
  .hero h1{font-size:31px}
  .charts{grid-template-columns:1fr}
  .card.span2{grid-column:span 1}
  .nav-links{display:none}
}
@media (max-width:640px){
  .sec{padding:34px 16px}
  .hero-nums{grid-template-columns:1fr 1fr;gap:9px}
  .hn .v{font-size:22px}
  .bar .nm{width:62px}.bar .vl{width:70px}
  .donutline .nm{width:62px}.donutline .vl{width:62px}
  .finding{padding:14px 15px}
  .flab{min-width:auto}
}
@media print{
  .nav,.filters,.pager{display:none}
  body{background:#fff}
  .card,.finding,.mcard{box-shadow:none;break-inside:avoid}
}