/*
 * GJN Premium Cover Skin (MyListing)
 * - Scoped by .gjn-premium-cover-skin (put this class on the Listing Feed section/widget wrapper)
 * - Applies ONLY to featured(_featured)/promoted cards
 * - Shows cover image on top + info panel below (logo overlaps)
 */

.gjn-premium-cover-skin{
  --gjn-radius: 18px;
  --gjn-shadow: 0 10px 30px rgba(0,0,0,.10);
  --gjn-shadow-hover: 0 14px 40px rgba(0,0,0,.14);

  --gjn-cover-h: 170px;
  --gjn-pad: 14px;

  /* 커버 하단 그라디언트 */
  --gjn-cover-gradient: linear-gradient(
    180deg,
    rgba(0,0,0,0) 30%,
    rgba(0,0,0,.55) 100%
  );
}

/* =========================================================
   0) 프리미엄 카드 스코프(Featured/Promoted) 공통 셀렉터
========================================================= */
.gjn-premium-cover-skin .lf-item-container.job_position_featured .lf-item.lf-item-list-view.gjn-cover-ready,
.gjn-premium-cover-skin .lf-item-container.level-promoted      .lf-item.lf-item-list-view.gjn-cover-ready{
  position: relative !important;
  overflow: hidden !important;
  border-radius: var(--gjn-radius) !important;
  box-shadow: var(--gjn-shadow) !important;
  background: #fff !important;
}

.gjn-premium-cover-skin .lf-item-container.job_position_featured .lf-item.lf-item-list-view.gjn-cover-ready:hover,
.gjn-premium-cover-skin .lf-item-container.level-promoted      .lf-item.lf-item-list-view.gjn-cover-ready:hover{
  box-shadow: var(--gjn-shadow-hover) !important;
}

/* =========================================================
   1) 커버: absolute + 배경이미지 + 그라디언트
   - cover는 z-index:1
========================================================= */
.gjn-premium-cover-skin .lf-item-container.job_position_featured .lf-item.lf-item-list-view.gjn-cover-ready .gjn-cover-media,
.gjn-premium-cover-skin .lf-item-container.level-promoted      .lf-item.lf-item-list-view.gjn-cover-ready .gjn-cover-media{
  position: absolute !important;
  top: 0; left: 0;
  width: 100%;
  height: var(--gjn-cover-h) !important;

  background-image: var(--gjn-cover-url, none) !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  z-index: 1 !important;
}

.gjn-premium-cover-skin .lf-item-container.job_position_featured .lf-item.lf-item-list-view.gjn-cover-ready .gjn-cover-media::after,
.gjn-premium-cover-skin .lf-item-container.level-promoted      .lf-item.lf-item-list-view.gjn-cover-ready .gjn-cover-media::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 75%;
  background: var(--gjn-cover-gradient);
  pointer-events: none;
  z-index: 2; /* 커버 위 */
}

/* =========================================================
   2) 레이어 꼬임(Will-change/transform) 해결 핵심
   - MyListing이 lf-item-info에 will-change/transform 걸면
     z-index가 먹어도 커버에 “묻히는” 케이스가 있음
========================================================= */
.gjn-premium-cover-skin .lf-item-container.job_position_featured .lf-item.lf-item-list-view.gjn-cover-ready .lf-item-info,
.gjn-premium-cover-skin .lf-item-container.level-promoted      .lf-item.lf-item-list-view.gjn-cover-ready .lf-item-info{
  will-change: auto !important;
  transform: none !important;
}

/* =========================================================
   3) Info 패널: 커버 아래로 자연스럽게 배치
   - top으로 억지로 내리는 대신 margin-top으로 안정화
========================================================= */
.gjn-premium-cover-skin .lf-item-container.job_position_featured .lf-item.lf-item-list-view.gjn-cover-ready .lf-item-info,
.gjn-premium-cover-skin .lf-item-container.level-promoted      .lf-item.lf-item-list-view.gjn-cover-ready .lf-item-info{
  position: relative !important;
  z-index: 5 !important;

  /* 커버 아래로 내려오게 */
  margin-top: calc(var(--gjn-cover-h) - 20px) !important;

  /* 기존 absolute/bottom/left/right 잡아먹는거 방지 */
  left: auto !important;
  right: auto !important;
  bottom: auto !important;

  /* 로고가 위로 겹칠 때 잘리지 않게 */
  overflow: visible !important;

  min-height: 125px;
  padding: 0 var(--gjn-pad) var(--gjn-pad) !important;
}

/* =========================================================
   4) Logo/Avatar: 커버 위로 확실히 
========================================================= */
.gjn-premium-cover-skin .lf-item-container.job_position_featured .lf-item.lf-item-list-view.gjn-cover-ready .lf-avatar,
.gjn-premium-cover-skin .lf-item-container.level-promoted      .lf-item.lf-item-list-view.gjn-cover-ready .lf-avatar{
  position: absolute !important;
  left: var(--gjn-pad) !important;
  top: -32px !important;

  padding: 30px !important; /* 네가 수정한 값 */
  box-shadow: 0 8px 16px rgba(0,0,0,.18) !important;
  border: 3px solid rgba(255,255,255,.95) !important;

  border-radius: 14px !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;

  z-index: 10 !important; /* 커버/그라디언트보다 위 */
}

/* =========================================================
   5) 제목/상세 리스트 (프리미엄만)
   - 여기서 top으로 내리는 방식은 최소화
========================================================= */
.gjn-premium-cover-skin .lf-item-container.job_position_featured .lf-item.lf-item-list-view.gjn-cover-ready .listing-preview-title,
.gjn-premium-cover-skin .lf-item-container.level-promoted      .lf-item.lf-item-list-view.gjn-cover-ready .listing-preview-title{
  margin-top: -28px !important;
  color: #ffffff;
  left: 75px;
  top: 0px;
}

/* ul/li: 프리미엄만 */
.gjn-premium-cover-skin .lf-item-container.job_position_featured .lf-item.lf-item-list-view.gjn-cover-ready .lf-item-info > ul,
.gjn-premium-cover-skin .lf-item-container.level-promoted      .lf-item.lf-item-list-view.gjn-cover-ready .lf-item-info > ul{
  padding-top: 10px;
  list-style: none !important;
}

.gjn-premium-cover-skin .lf-item-container.job_position_featured .lf-item.lf-item-list-view.gjn-cover-ready .lf-item-info > ul li,
.gjn-premium-cover-skin .lf-item-container.level-promoted      .lf-item.lf-item-list-view.gjn-cover-ready .lf-item-info > ul li{
  color: #252525;
  margin-left: 40px;
}