/* ─────────────────────────────────────────────────────────────
 * partner.feelcard.co.kr 메인 리뉴얼 CSS (2026-07-30 정본 승격)
 *   대상 : 정본 /index.php?h=…   (기존 /css/n_index.css 뒤에 로드되는 덮개 레이어)
 *   ⚠️ 페이지에 인라인으로 넣지 말고 이 파일에만 작성할 것 (진수님 지시)
 *   ⚠️ 헤더(.top_inr .header) · 안내사항(.notice) · 푸터(footer) 는
 *      n_common.css 의 기존 규칙을 그대로 쓰므로 여기서 건드리지 않는다.
 *   신규 섹션은 전부 `pa-` 프리픽스 → 기존 n_index.css 와 선택자 충돌 없음
 * ───────────────────────────────────────────────────────────── */

.pa-renew { background-color: #ffffff; }

/* 리뉴얼에서 뺀 기존 섹션이 혹시 남아 렌더되지 않도록 (정본 마크업엔 이미 없음) */
.pa-renew .review_slider,
.pa-renew .main_slider,
.pa-renew .electronic { display: none; }

/* 헤더 아래 여백만 조정 — 기존 .top_inr 의 margin-bottom 60px 유지하되 히어로와 붙게 */
.pa-renew .top_inr { margin-bottom: 0; align-items: flex-start; }

/* ===== 01 히어로 =====
   pa_top.jpg = 1920x420. 영상자리 실측(문구 bottom 119 / 캡션 top 344 / 좌측정렬 x 1130)
     video : left 1130 / top 136 / w 341 / h 192  → 16:9, 아래 캡션까지 16px 여유
     % 환산 : left 58.8542% · top 32.3810% · width 17.7604% · height 45.7143%
   ⚠️ px 고정 금지 — 이미지가 폭에 따라 스케일되므로 % 여야 항상 물린다 */
.pa-hero { width: 100%; background-color: #eceae8; }
.pa-hero__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  line-height: 0;
}
.pa-hero__bg {
  display: block;
  width: 100%;
  height: auto;
}
.pa-hero__bg--mo { display: none; }
.pa-hero__vid {
  position: absolute;
  left: 58.8542%;
  top: 32.3810%;
  width: 17.7604%;
  height: 45.7143%;
  object-fit: cover;
  background-color: #000000;
  display: block;
  border-radius: 10px;
}

/* ===== 02 네이버 로그인 ===== */
.pa-login { width: 100%; background-color: #ffffff; }
.pa-login__inr {
  max-width: 1280px;
  width: 100%;
  margin: 0 auto;
  padding: 40px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}
.pa-login__desc {
  font-size: 15px;
  line-height: 1.6;
  color: #555555;
}
.pa-login__desc strong { font-family: 'Pretendard-Bold'; color: #333333; }
.pa-nbtn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-width: 175px;
  height: 46px;
  padding: 0 22px;
  border-radius: 6px;
  background-color: #03c75a;
  color: #ffffff;
}
.pa-nbtn:hover { background-color: #02b350; }
.pa-nbtn__ico {
  font-family: 'Pretendard-Bold';
  font-size: 17px;
  color: #ffffff;
  line-height: 1;
}
.pa-nbtn__txt {
  font-family: 'Pretendard-Bold';
  font-size: 15px;
  color: #ffffff;
}
.pa-nbtn--my { background-color: #333333; }
.pa-nbtn--my:hover { background-color: #1f1f1f; }

/* ===== 03 스킨 마퀴 슬라이드 ===== */
.pa-skin {
  width: 100%;
  background-color: #eaf7f7;
  padding: 60px 0;
  overflow: hidden;
}
.pa-skin__track {
  display: flex;
  width: max-content;
  align-items: flex-start;
  gap: 63px;              /* 원본 slide margin-right 63px 과 동일 */
  padding: 20px 0 20px 40px;   /* 원본 .card_box padding-left 30~40px 과 동일 */
  /* 좌 → 우로 흐름 (JS 가 카드를 복제해 이음매를 없앤다) */
  animation: pa-marquee 70s linear infinite;
  will-change: transform;
}
.pa-skin:hover .pa-skin__track { animation-play-state: paused; }
@keyframes pa-marquee {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
/* 카드 안쪽은 정본과 동일한 .card_item 구조 → 스타일은 n_index.css 의 원본 규칙이 담당.
   여기서는 마퀴 아이템의 "폭"만 준다. 원본 slide 폭 실측값과 동일(PC 338 / 1280↓ 350 / 767↓ 200).
   ⚠️ .card_item > .txt(필기체 스킨명)가 left:-34px 로 카드 밖으로 나가므로
      트랙 좌측 padding·카드 간격을 원본(.card_box padding / slide margin)만큼 확보해야 안 잘린다.
   ⚠️ 새로 스타일을 짜지 말 것 — 원본과 달라진다. */
.pa-card {
  flex: 0 0 auto;
  width: 338px;
}

/* ===== 04 기능안내 =====
   PC pa_function.jpg 1920x990 / 모바일 pa_function_m.jpg 700x1669
   [20260730] 18종 기능 팝업(ⓘ)은 진수님 지시로 폐기 */
.pa-func { width: 100%; background-color: #ffffff; }
.pa-func__stage {
  position: relative;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  line-height: 0;
  overflow: hidden;   /* 모바일에서 소재 상단 여백을 음수마진으로 걷어내기 위함 */
}
/* 모바일 기능안내 제목 (소재의 빈 제목자리를 대신 채움 — PC 이미지 제목과 동일 문구/구성)
   PC 는 제목이 이미지에 박혀 있으므로 이 블록은 모바일에서만 노출 */
.pa-func__motit { display: none; }

.pa-func__img { display: block; width: 100%; height: auto; }
.pa-func__img--mo { display: none; }

/* ===== 샘플보기 팝업 ===== */
#pa_sample_pop { display: none; position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 9999; }
#pa_sample_pop.on { display: block; }
.pa-pop__dim { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.75); }
.pa-pop__box {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  max-width: 92vw;
  height: 86vh;
  background-color: #ffffff;
  border-radius: 6px;
  overflow: hidden;
}
.pa-pop__box iframe { width: 100%; height: 100%; border: 0; display: block; }
.pa-pop__close {
  position: absolute;
  right: 8px; top: 8px;
  z-index: 2;
  width: 34px; height: 34px;
  border-radius: 50%;
  background-color: rgba(0,0,0,0.55);
  color: #ffffff;
  font-size: 16px;
  cursor: pointer;
}

/* ===== 반응형 ===== */
@media screen and (max-width: 1280px) {
  /* [20260730] 1280 이하에서 .top_inr 이 세로로 쌓이면 안내사항(.rg_box) 위/아래 간격이
     위 60px / 아래 0px 로 어긋난다(n_common.css 의 rg_box padding-top 25 + notice margin-top 40,
     그리고 히어로가 바로 붙음). → 위아래 똑같이 30px 로 맞춤. */
  .pa-renew .top_inr { margin-bottom: 30px; }
  .pa-renew .top_inr .rg_box { padding-top: 0; }
  .pa-renew .notice { margin: 0px 0 0 0; }
  .pa-card { width: 350px; }   /* 원본 1280↓ slide 폭 */

  .pa-login__inr { padding: 30px 20px; }
}
@media screen and (max-width: 767px) {
  /* 모바일 히어로 = 전용 소재 pa_top_m.jpg (700x1200)
     검정 영상박스 실측 : left 131 / top 831 / w 440 / h 248 (채움률 100%, 비율 1.7742)
     % 환산 : left 18.7143% · top 69.2500% · width 62.8571% · height 20.6667% */
  .pa-hero__bg--pc { display: none; }
  .pa-hero__bg--mo { display: block; }
  .pa-hero__vid {
    left: 18.7143%;
    top: 69.2500%;
    width: 62.8571%;
    height: 20.6667%;
  }

  /* 모바일은 기능안내 전용 이미지로 교체 (700x1669) */
  .pa-func__img--pc { display: none; }
  .pa-func__img--mo { display: block; }
  /* 이미지 배경(#f3f3f3)과 이어 붙게 + 이미지 상단 빈 100px 가 제목 아래 여백이 됨 */
  .pa-func { background-color: #f3f3f3; }
  .pa-func__motit {
    display: block;
    padding: 46px 5.7143% 0;
    font-size: 17px;
    line-height: 1.4;
    color: #333333;
    background-color: #f3f3f3;
  }
  .pa-func__motit strong { font-family: 'Pretendard-Bold'; font-size: 19px; }
  /* [20260730] 소재(pa_function_m.jpg) 상단 100px 이 빈 제목자리여서 제목과 구분선 사이가
     화면 55.7px 로 너무 벌어짐 → 60.5px(이미지 기준) 만큼 위로 당겨 화면 22px 로 맞춤.
     계산 : 화면스케일 390/700=0.5571 · (55.7-22)/0.5571=60.5px · 60.5/700=8.6447%
     ⚠️ % 라서 폭이 변해도 비율 유지 (부모 .pa-func__stage 에 overflow:hidden 필요) */
  .pa-func__img--mo { margin-top: -8.6447%; }
  .pa-login__inr { flex-direction: column; align-items: flex-start; gap: 18px; }
  .pa-nbtn { width: 100%; }
  /* [20260730] 모바일 스킨 (진수님 지시)
     ① 자동 슬라이드(마퀴) 없음 → 손가락 좌우 스와이프
     ② 카드는 정본과 완전히 동일 (원본 실측 : card_item 200x240 / 버튼바 170x36 / 이름 30px)
     → 폭·간격만 원본 값(slide 200px, margin 45px, card_box padding 40px)으로 맞춘다 */
  .pa-skin { padding: 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .pa-skin__track {
    animation: none;
    gap: 45px;
    padding: 40px;
  }
  .pa-card { width: 200px; }
}

/* ===== 톡톡 상담 버튼 =====
   원본 규칙은 css/index.css 에 있는데 이 페이지는 그 파일을 로드하지 않으므로 그대로 이식 */
.talk_wrap {
  position: fixed;
  right: 10px;
  bottom: 40px;
  width: 70px;
  height: 70px;
  border-radius: 100%;
  overflow: hidden;
  background-color: #00c63b;
  line-height: 123px;
  text-align: center;
  z-index: 9998;
}
.talk_wrap a img { width: 90%; }
@media screen and (max-width: 767px) {
  .talk_wrap { bottom: 20px; width: 50px; height: 50px; line-height: 85px; z-index: 9999; }
  .talk_wrap a img { width: 90%; }
}