/* ============================================================
   KorJob 검색창 스타일 — 헤더 캡슐 + 전체화면 검색 패널
   ------------------------------------------------------------
   🔴 이 파일은 <head> 의 <link> 로 불러야 한다.
      예전에는 korjob-search.js 가 <style> 을 주입했는데, 그 스크립트가
      body 끝에 있어 **새로고침할 때마다 스타일 없는 검색창이 번쩍였다**
      (2026-09-11). 스타일은 문서보다 먼저 와야 한다.
   ⚠️ 짝이 되는 파일: korjob-search.js (패널 DOM·자동완성·롤링·음성 검색)
   ============================================================ */
/* ── 검색 캡슐 (프리미엄 미니멀 — 회색 필 + 딥블루 AI 버튼 · 2026-09-11 재설계)
   ⚠️ 그라데이션 테두리 + 그라데이션 텍스트 조합으로 되돌리지 말 것.
      앵커가 둘로 갈려 AI 버튼이 "눌러야 할 버튼"으로 읽히지 않았다.
      헤더의 시각 앵커는 딥블루 솔리드 버튼 하나뿐이다. ── */
.kj-pill{
  display:flex;align-items:center;flex:1;min-width:0;
  height:44px;                 /* 터치 타겟 44px */
  background:#F4F5F7;
  border:1.5px solid #D4DCE8;
  border-radius:22px;
  -webkit-tap-highlight-color:transparent;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease,margin .24s cubic-bezier(.22,.61,.36,1);
}
.kj-pill:active,.kj-pill.is-active{
  background:#fff;
  border-color:#0F52BA;
  box-shadow:0 0 0 3px rgba(15,82,186,.10);
}
.kj-pill-input{
  position:relative;
  flex:1;display:flex;align-items:center;gap:8px;
  height:100%;padding:0 6px 0 14px;
  cursor:text;min-width:0;
}
.kj-pill-input>svg{flex-shrink:0;pointer-events:none;color:#8A929E;}
/* 실제 입력 칸 — 평소엔 비어 있고 음성 인식 결과만 들어온다 */
.kj-pill-input input{
  flex:1;border:none;outline:none;background:transparent;
  font-family:'Noto Sans KR',sans-serif;font-size:12.5px;
  color:var(--t1);min-width:0;padding:0;
  cursor:text;pointer-events:none;caret-color:transparent;
}
/* 롤링 안내문 — input 위에 겹쳐 두고 페이드로 갈아 끼운다.
   input 의 placeholder 속성은 전환 애니메이션을 받지 못한다. */
.kj-pill-ph{
  position:absolute;left:36px;right:34px;
  font-family:'Noto Sans KR',sans-serif;
  font-size:12.5px;color:#8A929E;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  pointer-events:none;
  transition:opacity .3s ease,transform .3s ease;
}
.kj-pill-ph.is-out{opacity:0;transform:translateY(-5px);}
.kj-pill-ph.is-hidden{display:none;}
/* 마이크 버튼 */
.kj-pill-mic{
  width:30px;height:30px;flex-shrink:0;
  color:#8A929E;cursor:pointer;
  background:none;border:none;padding:0;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  -webkit-tap-highlight-color:transparent;
  transition:color .15s,background .15s;
}
.kj-pill-mic svg{width:16px;height:16px;}
.kj-pill-mic:active{color:#0F52BA;background:#EEF4FF;}
.kj-pill-mic.listening{color:#0F52BA;animation:mic-pulse .8s ease-in-out infinite;}
@keyframes mic-pulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.5;transform:scale(1.15);}
}
/* AI 검색 버튼 — 솔리드 딥블루. 헤더에서 유일한 시각 앵커다.
   ✦ 문자를 쓰지 말 것(사전값에도 넣지 말 것) → stroke SVG 만 [CLAUDE.md B] */
.kj-pill-btn{
  display:flex;align-items:center;gap:5px;
  height:34px;margin:0 5px 0 4px;padding:0 13px;
  background:#0F52BA;border:none;outline:none;border-radius:17px;
  cursor:pointer;flex-shrink:0;white-space:nowrap;
  box-shadow:0 1px 3px rgba(15,82,186,.26);
  -webkit-tap-highlight-color:transparent;
  transition:background .15s;
}
.kj-pill-btn:active{background:#0B3F91;}
.kj-pill-btn-ic{width:13px;height:13px;flex-shrink:0;color:#fff;}
.kj-pill-btn-txt{
  font-family:'Noto Sans KR',sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.1px;color:#fff;
}
/* 🔴 inset:0 과 left:50% 를 함께 쓰면 폭이 화면의 절반이 된다(right:0 기준).
      top/bottom 만 0 으로 두고 폭은 width 로 준다 — 2026-09-11 수정 */
.idx-sp-overlay{position:fixed;top:0;bottom:0;left:50%;transform:translateX(-50%);width:100%;max-width:430px;background:#fff;z-index:20000;display:none;flex-direction:column;visibility:hidden;}
.idx-sp-overlay.on{display:flex !important;visibility:visible !important;}
.idx-sp-top{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--border);}
.idx-sp-back{width:34px;height:34px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;-webkit-tap-highlight-color:transparent;}
.idx-sp-back svg{width:22px;height:22px;color:#333;}
.idx-sp-input-wrap{flex:1;display:flex;align-items:center;border:1.8px solid var(--B);border-radius:50px;padding:0 14px;height:42px;gap:8px;background:#fff;}
.idx-sp-input-wrap input{flex:1;border:none;outline:none;font-family:'Noto Sans KR',sans-serif;font-size:13.5px;color:var(--t1);background:transparent;}
.idx-sp-input-wrap svg{width:16px;height:16px;color:#bbb;flex-shrink:0;}
.idx-sp-clear{width:26px;height:26px;border:none;background:none;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;-webkit-tap-highlight-color:transparent;}
.idx-sp-clear svg{width:16px;height:16px;color:#999;}
.idx-sp-body{flex:1;overflow-y:auto;padding:18px 16px;}
.idx-sp-sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;}
.idx-sp-sec-ttl{font-size:13px;font-weight:700;color:var(--t1);}
.idx-sp-clear-all{font-size:11.5px;color:var(--t3);background:none;border:none;cursor:pointer;font-family:'Noto Sans KR',sans-serif;-webkit-tap-highlight-color:transparent;}
.idx-sp-recent-list{display:flex;flex-direction:column;gap:2px;margin-bottom:22px;}
.idx-sp-kw-row{display:flex;align-items:center;justify-content:space-between;padding:9px 4px;border-bottom:1px solid #f0f0f0;cursor:pointer;}
.idx-sp-kw-row:last-child{border-bottom:none;}
.idx-sp-kw-txt{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--t1);}
.idx-sp-kw-txt svg{width:14px;height:14px;color:#bbb;}
.idx-sp-kw-del{width:26px;height:26px;display:flex;align-items:center;justify-content:center;border:none;background:none;cursor:pointer;-webkit-tap-highlight-color:transparent;}
.idx-sp-kw-del svg{width:13px;height:13px;color:#bbb;}
.idx-sp-chips{display:flex;flex-wrap:wrap;gap:8px;}
.idx-sp-chip{display:inline-flex;align-items:center;padding:7px 14px;border-radius:50px;border:1.5px solid var(--border2);background:#fff;font-size:12.5px;font-weight:600;color:var(--t2);cursor:pointer;-webkit-tap-highlight-color:transparent;transition:all .12s;}
.idx-sp-chip:active{background:#f5f5f5;}
.idx-sp-no-recent{font-size:13px;color:var(--t3);text-align:center;padding:20px 0;}

/* ══ 검색 패널 재설계 (2026-09-11) — 자동완성 · 세그먼트 · 조합 제안 ══ */
/* 상단 입력 줄 */
.idx-sp-top{gap:6px;padding:10px 12px;}
.idx-sp-input-wrap{
  border:1.5px solid #D4DCE8;background:#F4F5F7;height:44px;border-radius:22px;
  transition:border-color .18s ease,background .18s ease,box-shadow .18s ease;
}
.idx-sp-input-wrap:focus-within{
  border-color:#0F52BA;background:#fff;
  box-shadow:0 0 0 3px rgba(15,82,186,.10);
}
.idx-sp-input-wrap svg{color:#8A929E;}
.idx-sp-input-wrap input{font-size:13.5px;}
/* 검색 실행 버튼 — 입력이 있을 때만 나온다 */
.idx-sp-go{
  display:none;align-items:center;justify-content:center;
  width:44px;height:44px;flex-shrink:0;
  background:#0F52BA;border:none;border-radius:50%;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .15s;
}
.idx-sp-go.on{display:flex;}
.idx-sp-go:active{background:#0B3F91;}
.idx-sp-go svg{width:18px;height:18px;color:#fff;}

/* ── 탐색 기준 세그먼트 (전체 · 비자 · 지역 · 조건) ── */
.idx-sp-seg{
  display:flex;gap:6px;padding:0 12px 10px;
  overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.idx-sp-seg::-webkit-scrollbar{display:none;}
.idx-sp-seg-btn{
  flex-shrink:0;padding:7px 14px;border-radius:50px;
  border:1.5px solid #E3E7EE;background:#fff;
  font-family:'Noto Sans KR',sans-serif;
  font-size:12.5px;font-weight:600;color:var(--t2);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:background .14s,color .14s,border-color .14s;
}
.idx-sp-seg-btn.on{
  background:#EEF4FF;border-color:rgba(15,82,186,.28);
  color:#0F52BA;font-weight:700;
}

/* ── AI 추천 모드 헤더 ── */
.idx-sp-ai{
  margin:0 0 16px;padding:14px 16px;
  background:#F4F5F7;border:1px solid #E3E7EE;border-radius:16px;
}
.idx-sp-ai-top{display:flex;align-items:center;gap:7px;margin-bottom:6px;}
.idx-sp-ai-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:4px 9px;border-radius:50px;
  background:#0F52BA;color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.2px;
}
.idx-sp-ai-badge svg{width:11px;height:11px;flex-shrink:0;}
.idx-sp-ai-desc{font-size:12.5px;color:var(--t2);line-height:1.5;word-break:keep-all;}
.idx-sp-ai-exs{display:flex;flex-direction:column;gap:6px;margin-top:11px;}
.idx-sp-ai-ex{
  display:flex;align-items:center;gap:8px;
  width:100%;padding:10px 12px;text-align:left;
  background:#fff;border:1px solid #E3E7EE;border-radius:12px;
  font-family:'Noto Sans KR',sans-serif;
  font-size:12.5px;font-weight:500;color:var(--t1);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color .14s,background .14s;
}
.idx-sp-ai-ex:active{background:#F7F8FA;border-color:#D4DCE8;}
.idx-sp-ai-ex svg{width:14px;height:14px;color:#C2C8D2;flex-shrink:0;}
.idx-sp-ai-ex span{flex:1;min-width:0;word-break:keep-all;}

/* ── 자동완성 결과 ── */
.idx-sp-grp{margin-bottom:18px;}
.idx-sp-grp-ttl{
  font-size:11.5px;font-weight:700;color:var(--t3);
  letter-spacing:.3px;margin-bottom:6px;padding:0 2px;
}
.idx-sp-row{
  display:flex;align-items:center;gap:9px;
  padding:10px 6px;border-radius:10px;cursor:pointer;
  -webkit-tap-highlight-color:transparent;transition:background .12s;
}
.idx-sp-row:active{background:#F4F5F7;}
.idx-sp-row>svg{width:15px;height:15px;color:#8A929E;flex-shrink:0;}
.idx-sp-row-txt{
  flex:1;min-width:0;font-size:13.5px;color:var(--t1);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.idx-sp-row-txt b{color:#0F52BA;font-weight:700;}
.idx-sp-row-tag{
  flex-shrink:0;padding:3px 8px;border-radius:6px;
  background:#F0F2F5;border:1px solid #D4DCE8;
  font-size:10.5px;font-weight:600;color:var(--t2);
}

/* ── 최근 검색어 (칩 형태로 압축) ── */
.idx-sp-rchips{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:22px;}
.idx-sp-rchip{
  display:inline-flex;align-items:center;gap:6px;
  padding:7px 9px 7px 12px;border-radius:50px;
  border:1.5px solid #E3E7EE;background:#fff;
  font-size:12.5px;font-weight:500;color:var(--t1);
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  max-width:100%;
}
.idx-sp-rchip:active{background:#F7F8FA;}
.idx-sp-rchip-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:150px;}
.idx-sp-rchip-x{
  width:16px;height:16px;flex-shrink:0;border:none;background:none;padding:0;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.idx-sp-rchip-x svg{width:11px;height:11px;color:#9AA3B0;}

/* ── 조합 제안 카드 ── */
.idx-sp-combos{display:flex;flex-direction:column;gap:8px;}
.idx-sp-combo{
  display:flex;align-items:center;gap:10px;
  width:100%;padding:12px 14px;text-align:left;
  background:#fff;border:1px solid #E3E7EE;border-radius:14px;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  transition:border-color .14s,background .14s;
  font-family:'Noto Sans KR',sans-serif;
}
.idx-sp-combo:active{background:#F7F8FA;border-color:#D4DCE8;}
.idx-sp-combo-ic{
  width:32px;height:32px;flex-shrink:0;border-radius:10px;
  background:#EEF4FF;display:flex;align-items:center;justify-content:center;
}
.idx-sp-combo-ic svg{width:16px;height:16px;color:#0F52BA;}
.idx-sp-combo-body{flex:1;min-width:0;}
.idx-sp-combo-ttl{
  font-size:13px;font-weight:700;color:var(--t1);
  margin-bottom:3px;word-break:keep-all;
}
.idx-sp-combo-sub{font-size:11.5px;color:var(--t3);word-break:keep-all;}
.idx-sp-combo>svg.idx-sp-combo-arr{width:14px;height:14px;color:#C2C8D2;flex-shrink:0;}

/* ── 빈 상태 (안내문 + CTA — 빈 화면 금지 [CLAUDE.md J]) ── */
.idx-sp-empty{text-align:center;padding:26px 12px 18px;}
.idx-sp-empty svg{width:32px;height:32px;color:#C2C8D2;margin-bottom:10px;}
.idx-sp-empty-ttl{font-size:13.5px;font-weight:700;color:var(--t1);margin-bottom:5px;word-break:keep-all;}
.idx-sp-empty-sub{font-size:12px;color:var(--t3);line-height:1.55;margin-bottom:14px;word-break:keep-all;}
.idx-sp-empty-cta{
  display:inline-flex;align-items:center;gap:5px;
  padding:10px 18px;border-radius:50px;
  background:#0F52BA;border:none;color:#fff;
  font-family:'Noto Sans KR',sans-serif;
  font-size:12.5px;font-weight:700;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.idx-sp-empty-cta:active{background:#0B3F91;}
.idx-sp-empty-cta svg{width:13px;height:13px;color:#fff;margin:0;}
/* 최근 검색어 자리의 빈 상태 — 한 줄 카드로 압축(첫 화면에서 인기 키워드를 밀지 않는다) */
.idx-sp-empty--slim{
  display:flex;align-items:center;gap:11px;
  width:100%;padding:12px 13px;text-align:left;
  background:#F4F5F7;border:1px solid #E3E7EE;border-radius:14px;
}
.idx-sp-empty--slim>svg{width:18px;height:18px;margin:0;flex-shrink:0;}
.idx-sp-empty--slim .idx-sp-empty-body{flex:1;min-width:0;}
.idx-sp-empty--slim .idx-sp-empty-ttl{font-size:12.5px;margin-bottom:2px;}
.idx-sp-empty--slim .idx-sp-empty-sub{font-size:11.5px;margin-bottom:0;line-height:1.45;}
.idx-sp-empty--slim .idx-sp-empty-cta{padding:9px 13px;font-size:11.5px;flex-shrink:0;}
/* 토스트 메시지 */
.kj-toast{
  position:fixed;
  bottom:calc(70px + env(safe-area-inset-bottom));
  left:50%;transform:translateX(-50%);
  background:rgba(30,30,30,.92);
  color:#fff;font-size:12.5px;font-weight:500;
  padding:10px 20px;border-radius:20px;
  font-family:'Noto Sans KR',sans-serif;
  white-space:nowrap;z-index:99999999;
  opacity:0;pointer-events:none;
  transition:opacity .2s ease;
  max-width:calc(430px - 40px);
}
.kj-toast.show{opacity:1;}
.kj-toast.blue{background:#0F52BA;}
/* 키보드 포커스에도 같은 링을 준다 */
.kj-pill:focus-within{
  background:#fff;
  border-color:#0F52BA;
  box-shadow:0 0 0 3px rgba(15,82,186,.10);
}
/* 결과 페이지(job-list)처럼 그 자리에서 바로 거르는 입력칸.
   index 는 탭하면 패널이 뜨므로 input 이 죽어 있고, 여기서는 살아 있어야 한다. */
.kj-pill--live .kj-pill-input{cursor:text;}
.kj-pill--live .kj-pill-input input{
  pointer-events:auto;caret-color:#0F52BA;color:#1a1a1a;
}
