/* KorJob 공고 카드 — 추천 근거 · 신선도 · 진입 모션  (2026-09-13 신설)
   ────────────────────────────────────────────────────────────────
   index · job-list · visa-match · matched-jobs 가 함께 쓴다.
   🔴 기존 .jc-* 규칙은 각 페이지에 그대로 둔다 — 여기로 옮기면 네 화면이
      한꺼번에 회귀할 위험이 있다. **새로 생긴 것만** 여기에 둔다.
   🔴 <head> 의 <link> 로 싣는다. JS 로 <style> 을 주입하면 스타일 없는
      카드가 먼저 그려져 새로고침마다 번쩍인다 (2026-09-11 korjob-search 선례).
   🎨 [D] 준수 — #EEF4FF 는 칩·버튼의 **선택 상태** 색이다. 여기서는 쓰지 않는다.
      근거 줄은 배경 없이 **타이포와 hairline 으로만** 구분한다. */

/* ══════════════════════════════════════════════════
   AI 추천 근거 줄 — 카드 맨 아래
   "왜 이 공고가 당신에게 보이는가" 한 줄. 배지를 더 얹지 않는다.
   ══════════════════════════════════════════════════ */
.jr-row{
  display:flex;align-items:center;flex-wrap:wrap;gap:4px;
  margin-top:8px;padding-top:7px;
  border-top:1px solid #F0F2F5;
  line-height:1.35;
}
.jr-row .jr-ico{
  width:12px;height:12px;flex-shrink:0;
  color:#0F52BA;opacity:.85;
}
.jr-lead{
  font-size:10.5px;font-weight:800;color:#0F52BA;
  letter-spacing:.2px;white-space:nowrap;flex-shrink:0;
}
.jr-chip{
  font-size:11px;font-weight:600;color:#667085;
  letter-spacing:-.1px;
  min-width:0;overflow-wrap:anywhere;word-break:break-word;
}
/* 비자 근거만 한 톤 진하게 — 취업 가능 여부를 실제로 가르는 유일한 축 */
.jr-chip.jr-visa{color:#0F52BA;font-weight:700;}
.jr-sep{color:#D0D5DD;font-size:11px;line-height:1;flex-shrink:0;}

/* ══════════════════════════════════════════════════
   신선도 — 48시간 이내만. 점 하나 + 짧은 글자
   ══════════════════════════════════════════════════ */
.jc-fresh{
  display:inline-flex;align-items:center;gap:3px;
  font-size:10px;font-weight:700;color:#0F52BA;
  letter-spacing:-.1px;white-space:nowrap;flex-shrink:0;
}
.jc-fresh-dot{
  width:4px;height:4px;border-radius:50%;
  background:#0F52BA;flex-shrink:0;
}
/* '방금' 일 때만 숨을 쉰다 — 그 외에는 조용한 점 */
.jc-fresh-now .jc-fresh-dot{animation:jrPulse 2.4s ease-in-out infinite;}
@keyframes jrPulse{
  0%,100%{opacity:1;transform:scale(1);}
  50%{opacity:.45;transform:scale(.78);}
}
.jc-fresh-day,.jc-fresh-hour{color:#667085;}
.jc-fresh-day .jc-fresh-dot,.jc-fresh-hour .jc-fresh-dot{background:#98A2B3;}

/* ══════════════════════════════════════════════════
   근거를 만들 재료가 없을 때 — 목록 맨 위에 **한 번만**
   빈 화면을 두지 않는다 [J]. 카드마다 붙이면 그건 광고다.
   ══════════════════════════════════════════════════ */
/* 🔴 처음엔 둥근 카드로 그렸다. 그런데 목록(#fullJobList)이 **풀블리드**라
   좌우 라운드가 화면 밖에서 잘려 어색했다(브라우저로 직접 보고 잡았다).
   → 공고 카드와 같은 폭·같은 좌우 여백으로 맞추고, 배경만 한 톤 낮춰 구분한다.
   ⚠️ 딥블루 배경(#EEF4FF)은 쓰지 않는다 — 상태 색이지 장식 색이 아니다 [D] */
.jr-cta{
  display:flex;align-items:center;gap:9px;
  margin:0 0 8px;padding:13px 18px;
  background:#FAFBFC;border-bottom:1px solid #EAEDF2;
  text-decoration:none;cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  transition:background .15s;
}
.jr-cta:active{background:#F2F4F7;}
.jr-cta .jr-ico{width:17px;height:17px;color:#0F52BA;opacity:1;flex-shrink:0;}
.jr-cta-txt{
  flex:1;min-width:0;
  font-size:12.5px;font-weight:600;color:#333;
  letter-spacing:-.3px;line-height:1.4;
  overflow-wrap:anywhere;word-break:break-word;
}
.jr-cta-btn{
  display:inline-flex;align-items:center;gap:1px;
  font-size:11.5px;font-weight:700;color:#0F52BA;
  white-space:nowrap;flex-shrink:0;
}
.jr-cta-btn svg{width:13px;height:13px;}

/* ══════════════════════════════════════════════════
   진입 모션 — 목록이 **한 번** 생성되는 느낌만.
   🔴 반복하지 않는다. 반복하면 그건 장식이고 노이즈다 (play.html 리본과 같은 원칙)
   ══════════════════════════════════════════════════ */
@keyframes jrRise{
  from{opacity:0;transform:translateY(7px);}
  to{opacity:1;transform:none;}
}
.jr-in{animation:jrRise .34s cubic-bezier(.22,.9,.3,1) both;}
.jr-in:nth-child(1){animation-delay:0ms;}
.jr-in:nth-child(2){animation-delay:45ms;}
.jr-in:nth-child(3){animation-delay:90ms;}
.jr-in:nth-child(4){animation-delay:130ms;}
.jr-in:nth-child(5){animation-delay:165ms;}
.jr-in:nth-child(n+6){animation-delay:195ms;}

/* 스크랩 하트 — 누른 순간에만 한 번 뛴다 */
@keyframes jrHeart{
  0%{transform:scale(1);}
  38%{transform:scale(.82);}
  68%{transform:scale(1.16);}
  100%{transform:scale(1);}
}
.scrap-btn.jr-pop svg{animation:jrHeart .34s cubic-bezier(.3,.9,.35,1) 1;}

/* 🔴 움직임을 줄이도록 설정한 사용자에게는 전부 끈다 */
@media (prefers-reduced-motion: reduce){
  .jr-in,.scrap-btn.jr-pop svg,.jc-fresh-now .jc-fresh-dot{animation:none !important;}
  .jr-in{opacity:1;transform:none;}
}

/* ══════════════════════════════════════════════════
   웹 (≥700px) — 430px 컬럼은 그대로. 여백·글자만 키운다 [G]
   ══════════════════════════════════════════════════ */
@media (min-width:700px){
  .jr-row{margin-top:9px;padding-top:8px;gap:5px;}
  .jr-lead{font-size:11px;}
  .jr-chip{font-size:11.5px;}
  .jc-fresh{font-size:10.5px;}
  .jr-cta{padding:15px 22px;}
  .jr-cta-txt{font-size:13px;}
}
@media (hover:hover) and (pointer:fine){
  .jr-cta:hover{background:#F4F6F9;}
}
