/* ─────────────────────────────────────────────────────────────
 * 모바일청첩장 페이지 리뉴얼 정본 CSS (2026-07-29 작성 / 2026-07-30 정본 승격)
 *   대상 : /?mod=gd&act=fmobile (PC) · /mobile/shop/Fmobile.php (모바일)
 *   ⚠️ 페이지에 인라인으로 넣지 말고 이 파일에만 작성할 것 (진수님 지시)
 * ───────────────────────────────────────────────────────────── */

/* ⚠️ 공통 원칙 (진수님 지시) — 이미지는 절대 원본보다 크게 늘리지 않는다. 늘리면 깨짐.
   화면이 원본보다 넓으면 확대하지 말고 가운데 정렬로 두고, 좁을 때만 축소한다.
   PC(1905px 원본) · 모바일(700px 원본) 동일 적용. */
.fmv_hero,.fmv_section{width:100%;margin:0 auto;text-align:center;}
.fmv_hero img,.fmv_section img{
  display:block;margin:0 auto;
  width:100%;max-width:1920px;      /* PC 배너는 1920 기준 */
  height:auto;
}

/* ── 목업 = 빈 폰 프레임(PNG, 안쪽 투명) + 그 아래 깔리는 동영상 ──────────
   [20260729] 사진이 박힌 fmockup_1.webp(5.3MB) 를 걷어내고 phone_mo.png + phone_m.mp4 로 교체.
   프레임 원본 430x640, 안쪽 화면 구멍은 알파 실측으로 left 97 / top 39 / 228x491 px.
   → 아래 % 는 전부 그 실측값을 430x640 으로 나눈 것이라 폭이 변해도 구멍에 정확히 맞는다.
   영상(224x486)과 구멍(228x491)의 비율 차이는 0.7% 라 cover 로 채워도 잘리는 게 없다시피 함. */
.fmv_mockup{width:100%;margin:0 auto;text-align:center;}
.fmv_phone{position:relative;display:inline-block;width:auto;max-width:100%;line-height:0;}
/* 프레임은 영상 위에 얹혀서 베젤·다이나믹아일랜드로 영상 가장자리를 덮는다 */
.fmv_mockup .fmv_phone_frame{display:block;width:100%;height:auto;position:relative;z-index:2;}
.fmv_mockup .fmv_phone_vid{
  position:absolute;z-index:1;
  left:22.5581%;    /*  97/430 */
  top:6.0938%;      /*  39/640 */
  width:53.0233%;   /* 228/430 */
  height:76.7188%;  /* 491/640 */
  object-fit:cover;
  /* 구멍 모서리 라운드 실측 30px → 가로 30/228, 세로 30/491 로 줘야 정원이 된다 */
  border-radius:13.16% / 6.11%;
  background:#000;
}

/* ── 히어로 + 그라데이션 CTA 위에 목업(폰)을 겹쳐 얹는 구조 ────────────────
   시안: 검은 히어로 하단에 폰 목업이 걸치고, 그 아래 그라데이션 배너 + 제작하기 버튼
   히어로 1905x480 / 그라데이션 1905x696 / 목업 430x640 (원본 픽셀)
   폭이 줄어도 비율이 유지되도록 목업 크기·위치를 vw 로 잡는다(1905 기준 환산). */
.fmv_top{position:relative;width:100%;}
.fmv_top .fmv_hero{position:relative;z-index:1;}
.fmv_top .fmv_mockup{
  position:absolute; left:0; right:0; z-index:3; text-align:center;
  top:19.5vw;                      /* 371/1905 ≒ 19.5vw — 히어로(25.2vw) 하단에 걸침 */
  pointer-events:none;             /* 아래 이미지맵(버튼) 클릭 방해 안 하도록 */
}
.fmv_top .fmv_phone{
  display:inline-block; width:30vw;      /* 원본(430px)까지 키움. 그 이상은 확대되면 뭉개져서 max-width 로 제한 */
  max-width:430px;
}


/* 스킨 슬라이드 영역 — 폭 제한 없이 화면을 꽉 채운다 (배너의 1920 상한과 무관하게 끝까지) */
.fmv_skin{width:100%;max-width:none;margin:0 auto;overflow:hidden;}
.fmv_skin .skin_wrap{max-width:100%;}

/* ── PC 스킨 슬라이드: 카드 확대 + 왼쪽으로 자동 흐름(마퀴) ──────────────
   카드 200px → 250px. 원본 썸네일이 465x750 이라 250px 도 축소라서 화질 손해 없음.
   JS 가 카드를 한 벌 복제해 두므로 -50% 지점에서 원본과 정확히 겹쳐 이음매가 안 보인다.
   마우스를 올리면 멈춘다 — 안 멈추면 VIEW 를 누를 수가 없다. */
/* ⚠️ 셀렉터가 긴 이유 — 운영 CSS 가 `.wrap .content .skin_wrap .skin_over > li`(클래스 4개)로
   width:200px / float:left / overflow-x:auto / width:2470px 를 이미 박아놨다.
   짧게 쓰면 명시도에서 밀려 그대로 무시되므로 그 위를 넘도록 맞춘 것. !important 는 쓰지 않는다. */
@media screen and (min-width:768px){
  /* 운영 CSS 가 .skin_wrap 을 1500px 로 묶어놔서 넓은 화면에서 그 안에만 흘렀다. 폭 제한 해제 */
  .fmv_skin .content.Invitation_content .skin_wrap{
    overflow-x:hidden;overflow-y:hidden;height:auto;width:100%;max-width:none;
  }
  .fmv_skin .content.Invitation_content .skin_wrap ul.wedding_skin{
    display:flex;flex-wrap:nowrap;width:max-content;
    margin:0;padding:0;list-style:none;
  }
  .fmv_skin .content.Invitation_content .skin_wrap .skin_over > li{
    float:none;flex:0 0 auto;width:250px;margin-right:35px;
  }
  .fmv_skin .content.Invitation_content .skin_wrap .skin_over > li .invi_img img{
    display:block;width:100%;height:auto;
  }
  /* hover 시 덮이는 검은 박스도 운영 CSS 에 width:200px 가 박혀 있어서 카드만 키우면 폭이 어긋난다.
     카드 폭을 그대로 따라가도록 100% 로 (높이는 원래부터 100%). */
  .fmv_skin .content.Invitation_content .skin_wrap .skin_over > li > .hover_black{
    width:100%;left:0;right:auto;
  }
  /* 스킨명 + VIEW 를 박스 정중앙에.
     ⚠️ display 는 운영 JS/CSS 가 none ↔ block 으로 hover 를 토글하는 스위치라,
     평소에 flex 로 바꿔버리면 안 눌러도 검은 박스가 떠 있게 된다.
     그래서 :hover 일 때만 flex 로 올린다. */
  .fmv_skin .content.Invitation_content .skin_wrap .skin_over > li:hover > .hover_black{
    display:flex;flex-direction:column;align-items:center;justify-content:center;
  }
  .fmv_skin .content.Invitation_content .skin_wrap .skin_over > li > .hover_black > .skin_name,
  .fmv_skin .content.Invitation_content .skin_wrap .skin_over > li > .hover_black > .skin_view{
    position:static;margin:0;text-align:center;
  }
  /* VIEW 버튼 — 원래 85px 정사각에 가까워 답답했다. 가로로 길게 빼고 글씨는 한 단계 줄임 */
  .fmv_skin .content.Invitation_content .skin_wrap .skin_over > li > .hover_black > .skin_view{
    margin-top:16px;width:160px;font-size:11px;letter-spacing:1.5px;padding:10px 0;
  }

  /* 아래 배너(.fmv_section)와 너무 벌어져 보여서 운영 CSS 의 아래 여백(50+50+30=130px)을 걷어낸다.
     위쪽 30px 은 제목과 붙지 않도록 남겨둠. */
  .fmv_skin .content.Invitation_content{margin-bottom:0;}
  .fmv_skin .content.Invitation_content .skin_wrap{margin-bottom:0;padding-bottom:0;}

  /* 복제가 끝난 뒤에만 애니메이션 시작 — 복제 전에 흐르면 카드가 그냥 사라져 보인다 */
  .fmv_skin .content.Invitation_content .skin_wrap ul.wedding_skin.fmv_marquee{
    animation:fmv_marquee 70s linear infinite;   /* 40s → 70s (더 천천히) */
  }
  .fmv_skin .content.Invitation_content .skin_wrap:hover ul.wedding_skin.fmv_marquee{
    animation-play-state:paused;
  }
}
@keyframes fmv_marquee{
  from{transform:translateX(0);}
  to  {transform:translateX(-50%);}
}
/* 접근성 — 모션 최소화 설정을 켠 사용자에겐 흐르지 않게 */
@media (prefers-reduced-motion:reduce){
  .fmv_skin .wedding_skin.fmv_marquee{animation:none;}
}

/* 제작하기 버튼 (히어로 위에 겹쳐 놓는 경우 대비) */
.fmv_cta{width:100%;text-align:center;margin:0 auto;}
.fmv_cta a{
  display:inline-block;min-width:260px;padding:16px 34px;
  background:#222;color:#fff;border-radius:4px;
  font-family:'Pretendard','noto_r',sans-serif;font-size:16px;letter-spacing:-0.3px;
  text-decoration:none;transition:background .2s;
}
.fmv_cta a:hover{background:#000;}
.fmv_cta .fmv_cta_txt{margin-top:10px;font-size:13px;color:#888;line-height:1.6;}

/* 아직 파일이 없을 때 자리표시 — 파일 업로드되면 자동으로 사라짐 */
.fmv_section img[data-pending="1"]{min-height:120px;background:#f4f4f6;}

/* 모바일 폭 대응 */
@media screen and (max-width:767px){
  /* 모바일 이미지 원본은 700px — 그 이상 확대 금지 */
  .fmv_hero img,.fmv_section img{max-width:700px;}

  /* 모바일: 히어로 mfmobile_1.webp 700x700 (폭100% → 높이 100vw)
     목업이 히어로 문구를 가리지 않도록 히어로 하단 쪽으로 내리고, 그라데이션 위로 걸치게 한다.
     목업 폭 55vw → 높이 55*(640/430) ≒ 81.9vw. top 78vw 면 하단 ≒ 160vw 로
     그라데이션 안 버튼(≒172vw 지점)보다 위 → 버튼과 안 겹침 */
  .fmv_top .fmv_mockup{top:78vw;}
  .fmv_top .fmv_phone{width:55vw;max-width:430px;}

  /* PC 마퀴용 복제 카드는 모바일에선 숨긴다 (창을 줄였을 때 카드가 두 줄로 늘어지는 것 방지) */
  .fmv_skin .skin_wrap .skin_over > li[aria-hidden="true"]{display:none;}

  /* 스킨 슬라이드가 화면 왼쪽 끝에 딱 붙지 않도록 좌우 여백.
     가로 스크롤 컨테이너라 오른쪽 padding 이 무시되는 브라우저가 있어, 마지막 카드 뒤 여백은
     내부 목록의 padding-right 로 따로 준다. */
  .fmv_skin .skin_wrap{padding-left:16px;box-sizing:border-box;}
  .fmv_skin .skin_wrap .wedding_skin,
  .fmv_skin .skin_wrap .skin_over{padding-right:16px;}

  .fmv_cta a{min-width:0;width:86%;padding:14px 0;font-size:15px;}
  .fmv_cta .fmv_cta_txt{font-size:12px;padding:0 7%;}
}