/* ============================================================================
   江湖帖 · PC / 平板工作台层（第 6 轮：对标招聘站 PC 骨架）
   引入顺序：base → home → components → wish → profile → home-v2 → responsive → pc-v2
   —— 本文件在 responsive.css 之后，PC 断点规则写在这里必定生效。
   作用域：只写 >=768 的规则，<768 移动端完全不受影响。
   设计依据：实抓 51job（首页/列表页）、一品威客、猪八戒、58同城 的 PC 骨架
   ========================================================================== */

/* ── 默认（移动端 <768）：工作台相关元素一律不参与布局 ──
   注意：JS 只在首页把 #pc-hero 的 inline display 设为 ''/none，
   所以这里的基础 display:none 决定了 <768 与「非首页」两种情况 */
.pc-toolbar,.pc-hero,.pc-resultbar,.pc-pager{display:none}

@media (min-width:768px){

  /* 局部变量：正文灰提高对比度（原 --ink3 #8a7e6c 在白底上偏淡） */
  :root{--ink-desc:#6e6454}

  .pc-hero{display:block}
  .pc-resultbar{display:flex}
  .pc-pager{display:flex}

  /* ========================================================================
     1. 顶部工具条（招聘站第一层：细、灰、放次要入口）
     ======================================================================== */
  .pc-toolbar{display:none}

  /* ========================================================================
     2. 搜索工作台（对标一品威客：大搜索 + 双角色入口 + 热搜词）
     ======================================================================== */
  .pc-hero{background:linear-gradient(180deg,#fbf7ef,#f5f0e6);
    border-bottom:1px solid var(--border);padding:16px 16px 14px;flex-shrink:0}
  .ph-in{max-width:1248px;margin:0 auto;display:flex;flex-direction:column;gap:10px}
  .ph-row1{display:flex;gap:12px;align-items:stretch}

  .ph-sbox{flex:1;min-width:0;height:46px;background:#fff;border:2px solid var(--gold);
    border-radius:8px;display:flex;align-items:center;padding-left:14px;
    box-shadow:0 3px 12px rgba(154,126,46,.10)}
  .ph-sbox .ph-ico{color:var(--ink3);margin-right:8px;font-size:15px;line-height:1}
  .ph-sbox input{flex:1;min-width:0;height:100%;border:none;outline:none;background:transparent;
    font-family:var(--sans);font-size:14px;color:var(--ink)}
  .ph-sbox input::placeholder{color:#b3a894}
  .ph-sbox .ph-go{width:98px;height:100%;border:none;cursor:pointer;border-radius:0 5px 5px 0;
    background:linear-gradient(135deg,#c8a951,#9a7e2e);color:#fff;font-size:14.5px;
    font-weight:600;letter-spacing:2px;font-family:var(--sans)}
  .ph-sbox .ph-go:hover{filter:brightness(1.06)}

  /* 双角色入口（江湖帖＝双边平台，这是现在完全缺失的入口） */
  .ph-roles{display:flex;gap:10px;flex-shrink:0}
  .ph-role{width:158px;border:1px solid var(--border);border-radius:8px;background:#fff;
    padding:5px 12px;cursor:pointer;display:flex;flex-direction:column;justify-content:center;
    transition:.15s}
  .ph-role:hover{border-color:var(--gold);transform:translateY(-1px)}
  .ph-role b{font-size:13px;color:var(--ink);font-weight:600}
  .ph-role span{font-size:11px;color:var(--ink-desc)}
  .ph-role.hot{background:linear-gradient(135deg,#fdf7e8,#f7eed6);border-color:var(--gold-l)}

  .ph-hot{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--ink-desc);
    flex-wrap:wrap}
  .ph-hot .ph-hl{color:var(--ink3);flex-shrink:0}
  .ph-chip{background:#fff;border:1px solid var(--border);border-radius:12px;padding:1px 10px;
    color:var(--ink2);cursor:pointer;font-size:12px}
  .ph-chip:hover{border-color:var(--gold);color:var(--gold-d)}

  /* 平板：搜索框与角色卡上下堆叠，搜索框吃掉整行
     注意 flex:1 在竖向排列下会变成「高度收缩为 0」，必须改回 flex:none 保住 46px */
  @media (max-width:1023px){
    .ph-row1{flex-direction:column;gap:10px}
    .ph-sbox{flex:none}
    .ph-roles{width:100%}
    .ph-role{flex:1;width:auto}
  }

  /* ========================================================================
     3. 结果条（共 N 条 + 排序）
     ======================================================================== */
  .pc-resultbar{display:flex;align-items:center;gap:4px;padding:0 14px;height:44px;
    background:var(--card);border:1px solid var(--border);border-bottom:none;
    border-radius:6px 6px 0 0;font-size:12.5px;color:var(--ink-desc)}
  .pc-resultbar .prb-n{color:var(--red);font-size:14px;font-family:var(--serif);font-weight:700}
  .pc-resultbar .prb-gap{color:var(--ink3);margin:0 2px}
  .pc-resultbar .prb-clear{margin-left:10px;font-size:12px;color:var(--gold-d);cursor:pointer}
  .pc-resultbar .prb-clear:hover{text-decoration:underline}
  .pc-resultbar .prb-sort{margin-left:auto;display:flex;gap:1px}
  .pc-resultbar .prb-sort i{font-style:normal;font-size:12.5px;color:var(--ink2);
    padding:5px 12px;border-radius:4px;cursor:pointer;transition:.12s}
  .pc-resultbar .prb-sort i:hover{color:var(--gold-d);background:#faf6ee}
  .pc-resultbar .prb-sort i.on{background:var(--ink);color:#f0e6d2;font-weight:500}

  /* ========================================================================
     4. 密集列表行（一屏 6-7 条，替代移动端大卡片）
     ======================================================================== */
  #page-home .post-list{padding:0}
  #page-home .sec-title{display:none}
  #page-home .search-bar{display:none}          /* 搜索已上移到工作台 */
  .pc-list{background:var(--card);border:1px solid var(--border);border-top:none;
    border-radius:0 0 6px 6px;overflow:hidden}
  .pc-list:empty{display:none}

  .pc-row{display:flex;gap:12px;padding:13px 14px;border-bottom:1px solid #f0eade;
    cursor:pointer;transition:background .12s}
  .pc-row:last-child{border-bottom:none}
  .pc-row:hover{background:#fdfaf3}
  .pc-row:hover .pcr-title{color:var(--gold-d)}
  .pc-row.is-done{opacity:.62}

  .pcr-face{width:38px;height:38px;border-radius:6px;flex-shrink:0;display:flex;
    align-items:center;justify-content:center;font-family:var(--serif);font-size:16px;
    color:#fff;letter-spacing:0}
  .pcr-body{flex:1;min-width:0}
  .pcr-title{font-size:15px;font-weight:600;color:var(--ink);letter-spacing:.2px;
    display:flex;align-items:center;gap:8px}
  .pcr-title .pcr-fl{font-style:normal;font-size:11px;font-weight:600;color:#fff;
    background:var(--red);border-radius:3px;padding:1px 5px;letter-spacing:1px;flex-shrink:0}
  .pcr-title .pcr-fl.n{background:var(--orange)}
  .pcr-title .pcr-fl.o{background:var(--gold-d)}
  .pcr-desc{font-size:12.5px;color:var(--ink-desc);margin-top:4px;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap}
  .pcr-meta{margin-top:7px;display:flex;align-items:center;gap:8px;font-size:12px;
    color:var(--ink-desc);flex-wrap:wrap}
  .pcr-tag{font-size:11.5px;padding:1px 8px;border-radius:3px;background:#f4eee0;
    color:var(--ink2);border:1px solid #eae1cf}
  .pcr-who{display:flex;align-items:center;gap:5px}
  .pcr-who .pcr-av{width:16px;height:16px;border-radius:50%;background:#ece4d6;
    display:flex;align-items:center;justify-content:center;font-size:9px;color:var(--ink2)}
  /* .pcr-stars 已删（2026-09-21）：密集行不再显示星级小圆点（= 难度，重复） */

  .pcr-right{flex-shrink:0;width:128px;display:flex;flex-direction:column;
    align-items:flex-end;justify-content:space-between;text-align:right}
  .pcr-reward{font-family:var(--serif);font-size:21px;font-weight:700;color:var(--red);
    line-height:1}
  .pcr-reward small{font-family:var(--sans);font-size:11px;font-weight:400;
    color:var(--ink-desc);margin-left:2px}
  .pcr-dist{font-size:11.5px;color:var(--ink-desc);margin-top:4px}
  .pcr-go{margin-top:6px;font-size:12px;color:var(--gold-d);border:1px solid var(--gold-l);
    border-radius:13px;padding:2px 11px;background:#fffdf7;white-space:nowrap}
  .pc-row:hover .pcr-go{background:var(--gold);border-color:var(--gold);color:#fff}

  /* ========================================================================
     5. 分页器（PC 习惯，移动端仍保留无限滚动）
     ======================================================================== */
  .pc-pager{display:flex;justify-content:center;align-items:center;gap:6px;
    margin:16px 0 24px}
  .pc-pager:empty{display:none;margin:0}
  .pc-pager a{min-width:34px;height:34px;padding:0 10px;background:var(--card);
    border:1px solid var(--border);border-radius:5px;display:flex;align-items:center;
    justify-content:center;font-size:13px;color:var(--ink2);cursor:pointer;
    transition:.12s;user-select:none}
  .pc-pager a:hover{border-color:var(--gold);color:var(--gold-d)}
  .pc-pager a.on{background:var(--ink);border-color:var(--ink);color:#f0e6d2;
    font-weight:600;cursor:default}
  .pc-pager a.dis{color:#c9c0b0;cursor:default;background:#faf7f0}
  .pc-pager .pg-info{margin-left:8px;font-size:12px;color:var(--ink3)}

  /* ========================================================================
     6. 左栏筛选树（取代移动端横排胶囊）
     ======================================================================== */
  .pcf-group{background:var(--card);border:0.5px solid var(--border);border-radius:10px;
    overflow:hidden;margin-bottom:12px}
  .pcf-h{height:38px;display:flex;align-items:center;gap:6px;padding:0 12px;
    border-bottom:0.5px solid var(--border);background:#faf6ee;
    font-family:var(--serif);font-size:13px;font-weight:600;color:var(--ink)}
  .pcf-h .pcf-hr{margin-left:auto;font-size:11px;font-weight:400;color:var(--ink3);
    font-family:var(--sans);cursor:pointer}
  .pcf-h .pcf-hr:hover{color:var(--gold-d)}
  .pcf-item{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:13px;
    color:var(--ink2);cursor:pointer;border-left:3px solid transparent;transition:.12s}
  .pcf-item:hover{background:#faf6ee;color:var(--ink)}
  .pcf-item.on{background:#fdf8ec;border-left-color:var(--gold);color:var(--gold-d);
    font-weight:600}
  .pcf-item .pcf-dot{width:6px;height:6px;border-radius:50%;flex-shrink:0}
  .pcf-item .pcf-n{margin-left:auto;font-size:11.5px;color:var(--ink3);flex-shrink:0}
  .pcf-item.on .pcf-n{color:var(--gold-d)}
  .pcf-chips{padding:10px 12px;display:flex;flex-wrap:wrap;gap:6px}
  .pcf-chip{font-size:12px;padding:3px 10px;border:1px solid var(--border);border-radius:12px;
    color:var(--ink2);cursor:pointer;background:#fff;transition:.12s;user-select:none}
  .pcf-chip:hover{border-color:var(--gold);color:var(--gold-d)}
  .pcf-chip.on{background:#fdf8ec;border-color:var(--gold);color:var(--gold-d);font-weight:600}

  /* PC 空列表 */
  .pc-empty{padding:26px 14px;text-align:center;font-size:13px;color:var(--ink3)}
  .pc-empty .pce-act{margin-top:10px;font-size:12.5px;color:var(--gold-d);cursor:pointer}
  .pc-empty .pce-act:hover{text-decoration:underline}

  /* ========================================================================
     7. 平板（768–1023）：单列，无左右侧栏；分类/筛选仍走横排胶囊
     ======================================================================== */
  @media (max-width:1023px){
    .phone{max-width:900px}
    #pages{padding-top:0}
    #page-home .home-scroll{padding-bottom:16px}
    .pc-resultbar{margin:0 16px;border-radius:6px 6px 0 0}
    .pc-list{margin:0 16px}
    .pc-pager{margin-bottom:20px}
    .wish-ticker{margin:14px 16px 0}
  }
}

/* ============================================================================
   8. PC（>=1024）：四行栅格 —— 工具条 / 主导航 / 工作台 / 三栏
   ========================================================================== */
@media (min-width:1024px){
  .phone{
    max-width:1280px;
    grid-template-columns:196px minmax(0,1fr) 282px;
    grid-template-rows:30px 64px auto minmax(0,1fr);
    grid-template-areas:
      "tb   tb   tb"
      "navi navi navi"
      "hero hero hero"
      "left main right";
  }

  /* 工具条 */
  .pc-toolbar{grid-area:tb;display:flex;align-items:center;height:30px;
    background:#efe9dd;border-bottom:1px solid var(--border);
    font-size:12px;color:var(--ink3);padding:0 18px}
  .ptb-city{color:var(--ink2);cursor:pointer;display:flex;align-items:center;gap:4px}
  .ptb-city b{color:var(--ink);font-weight:500}
  .ptb-city:hover b{color:var(--gold-d)}
  .ptb-sp{flex:1}
  .ptb-links{display:flex;align-items:center;gap:13px}
  .ptb-links a{cursor:pointer}
  .ptb-links a:hover{color:var(--gold-d)}
  .ptb-links a .ptb-badge{color:var(--red);font-weight:600;margin-left:2px}
  .ptb-sep{width:1px;height:11px;background:var(--border)}

  /* 主导航：60 → 64px，加入工作台行后重新定位 */
  .tabbar{grid-area:navi;height:64px}

  /* 工作台 */
  .pc-hero{grid-area:hero}

  /* 主区 / 侧栏 */
  #pages{grid-area:main;padding-top:0}
  .pc-side-left{grid-area:left;padding:16px 12px 40px}
  .pc-side-right{grid-area:right;padding:16px 12px 40px}

  /* 主区内容左右留白统一到 16px */
  #page-home .wish-ticker{margin:16px 16px 0}
  /* 横排筛选胶囊由左栏筛选树接管（星级已补进左栏，功能不丢） */
  #page-home .filter-card{display:none}
  .pc-resultbar{margin:14px 16px 0}
  .pc-list{margin:0 16px}
  .pc-pager{margin:16px 16px 24px}

  /* 许愿墙画布：顶部多了一条 30px 工具条，且导航变 64px */
  .river-stage{height:calc(100dvh - 30px - 64px - 190px)}
}

/* ============================================================================
   9. 右栏：缩小版许愿墙（2026-09-10 第 5 轮新增）
   —— 只服务 >=1024（右栏 282px，卡片内宽 228px）。
      主画布 #river-stage 的背景是 414x800 竖构图，缩到 228px 宽只会剩山体，
      故这里另画一张 228x150 横构图水墨缩略图（落日 / 远山 / 水面 / 芦苇）；
      飞鸟直接复用 wish.js 的 BIRD_SVG（自带 class="bird-art"，
      .wing-l/.wing-r 由 wish.css 驱动拍翅），只用 CSS 缓漂，不跑 JS 逐帧。
   ========================================================================== */
@media (min-width:1024px){
  .mw-stage{position:relative;height:150px;margin-bottom:10px;border-radius:10px;
    overflow:hidden;cursor:pointer;border:0.5px solid var(--border);
    background:url('data:image/svg+xml;charset=utf-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 228 150" preserveAspectRatio="none"><defs><linearGradient id="msky" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="%23f4deb6"/><stop offset=".55" stop-color="%23e3cd9f"/><stop offset="1" stop-color="%23b8c6b0"/></linearGradient><radialGradient id="msun" cx="50%25" cy="50%25" r="50%25"><stop offset="0" stop-color="%23fff3d6"/><stop offset=".5" stop-color="%23ffc089" stop-opacity=".85"/><stop offset="1" stop-color="%23ff8a4a" stop-opacity="0"/></radialGradient><linearGradient id="mwater" x1="0" y1="0" x2="0" y2="1"><stop offset="0" stop-color="%23a4bfb0"/><stop offset=".45" stop-color="%236f9c86"/><stop offset="1" stop-color="%233f5a49"/></linearGradient></defs><rect width="228" height="150" fill="url(%23msky)"/><circle cx="188" cy="36" r="28" fill="url(%23msun)" opacity=".7"/><circle cx="188" cy="36" r="12" fill="%23fff0d0"/><g fill="none" stroke="%23383630" stroke-width="1.1" stroke-linecap="round" opacity=".42"><path d="M128 46 q3 -3 6 0 q3 -3 6 0"/><path d="M150 34 q2.5 -2.5 5 0 q2.5 -2.5 5 0"/><path d="M140 55 q2.5 -2.5 5 0 q2.5 -2.5 5 0"/></g><path d="M0 56 Q26 38 52 50 Q80 32 108 50 Q140 32 172 50 Q200 36 228 48 L228 150 L0 150 Z" fill="%23a8bcc6" opacity=".55"/><path d="M0 72 Q30 54 60 68 Q92 52 126 68 Q160 54 192 68 Q210 60 228 68 L228 150 L0 150 Z" fill="%238298a0" opacity=".72"/><path d="M0 84 Q40 76 88 82 Q140 74 190 82 Q210 78 228 82 L228 150 L0 150 Z" fill="url(%23mwater)"/><path d="M0 84 Q40 76 88 82 Q140 74 190 82 Q210 78 228 82 L228 92 Q190 88 140 94 Q88 100 0 92 Z" fill="%233d5a45" opacity=".5"/><g stroke="%23eaf4ec" stroke-width="1" fill="none" opacity=".3"><path d="M26 104 Q70 96 116 104"/><path d="M40 120 Q90 110 144 120"/><path d="M18 136 Q74 126 138 136"/></g><g stroke="%232f4a38" stroke-width="1.1" fill="none" opacity=".42"><path d="M14 88 q3 -8 8 -11"/><path d="M22 89 q4 -7 10 -9"/><path d="M204 86 q-3 -8 -8 -11"/></g></svg>') center/cover no-repeat}

  /* 暮色压暗层：只压背景（z-index 2 在鸟之下）。
     缩略图只有 228px 宽，白鸟直接压在浅暖天空上会「糊掉看不见」，
     把背景整体沉下去一档，白鸟的相对亮度就出来了。 */
  .mw-stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
    background:linear-gradient(180deg,rgba(96,76,44,.12) 0%,rgba(52,48,32,.26) 100%)}

  /* 边缘压暗：与主画布同一种「嵌进纸里」的观感（盖住鸟与气泡的边际，故 z-index 最高） */
  .mw-stage::after{content:"";position:absolute;inset:0;z-index:6;pointer-events:none;
    box-shadow:inset 0 0 32px rgba(25,40,28,.34)}

  /* 飞鸟：复用 BIRD_SVG，只做缓慢漂移（不跑 JS 逐帧） */
  .mw-bird{position:absolute;z-index:3;line-height:0;pointer-events:none;
    filter:drop-shadow(0 0 1px rgba(72,60,42,.72)) drop-shadow(0 1px 2px rgba(40,35,28,.42))}
  .mw-bird svg{display:block;width:100%;height:auto}
  /* 大小拉开形成纵深：b1 远景小鸟、b2 近景大鸟 */
  .mw-b1{width:38px;left:6px;top:30px;opacity:.92;animation:mwFloat1 8s ease-in-out infinite}
  .mw-b2{width:54px;left:86px;top:8px;animation:mwFloat2 10.5s ease-in-out infinite}
  @keyframes mwFloat1{0%,100%{transform:translate(0,0) rotate(-3deg)}50%{transform:translate(9px,-5px) rotate(2deg)}}
  @keyframes mwFloat2{0%,100%{transform:translate(0,0) rotate(2deg)}50%{transform:translate(-11px,4px) rotate(-2deg)}}

  /* 心愿气泡：定格版「飞鸟衔书」，点击直达该条心愿详情。
     刻意只留一行——气泡在 150px 高的缩略图里是「注脚」不是正文，
     两行会把画面压掉一半、抢掉水墨的戏份。 */
  .mw-wish{position:absolute;z-index:4;width:94px;padding:5px 7px;border-radius:10px;
    display:flex;flex-direction:column;gap:2px;cursor:pointer;
    background:linear-gradient(180deg,rgba(255,251,240,.97),rgba(248,238,214,.94));
    border:0.5px solid rgba(120,90,40,.35);box-shadow:0 3px 9px rgba(20,30,20,.3);
    transition:transform .15s}
  .mw-wish:hover{transform:translateY(-2px)}
  .mw-w1{left:8px;bottom:10px}
  .mw-w2{right:8px;bottom:10px}
  .mw-txt{font-family:var(--serif);font-size:10.5px;font-weight:600;line-height:1.5;
    color:#5a3a1c;letter-spacing:.2px;overflow:hidden;text-overflow:ellipsis;
    white-space:nowrap}
  .mw-bless{font-size:9px;color:rgba(140,105,60,.85);letter-spacing:.4px}
  .mw-empty{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:4;
    width:80%;text-align:center;font-size:11.5px;line-height:1.6;color:rgba(255,250,235,.9)}

  /* 底部：心愿总数 + 许个愿 */
  .mw-foot{display:flex;align-items:center;gap:8px}
  .mw-num{font-size:11px;color:var(--ink3)}
  .mw-num b{font-family:var(--serif);font-size:13px;color:var(--gold-d);margin:0 1px}
  .mw-cta{margin-left:auto;padding:7px 13px;border:0.5px solid var(--gold);border-radius:16px;
    font-family:var(--sans);font-size:12px;font-weight:600;color:var(--gold-d);cursor:pointer;
    background:linear-gradient(135deg,#f7eeda,#efe2c8);transition:transform .15s}
  .mw-cta:hover{transform:translateY(-1px)}
  .mw-cta:active{transform:scale(.97)}
}