/* ==========================================================================
   landing-v2 / preview-modal.css — 맥 브라우저창 모달 + iframe 샘플 미리보기
   실측: radius 24px / shadow 0 40px 120px rgba(0,0,0,.42) / bg #edf1f7 / iframe 1380×864

   ★ 왜 iframe인가: 샘플 스크린샷을 관리하는 대신 라이브 사이트를 그대로 띄운다.
     샘플이 바뀌면 모달도 자동 갱신 = 관리비용 0. 방문자는 페이지를 안 벗어난다.
   ========================================================================== */

.pv {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  padding: clamp(.75rem, 2.5vw, 2.5rem);
  background: rgba(6,6,10,.72);
  backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity .3s var(--ease), visibility .3s;
}
.pv.is-open { opacity: 1; visibility: visible; }

.pv__box {
  width: min(1382px, 100%);
  height: min(940px, 100%);
  display: flex; flex-direction: column;
  background: #edf1f7;
  border-radius: 24px;
  box-shadow: 0 40px 120px rgba(0,0,0,.42);
  overflow: hidden;
  transform: translateY(16px) scale(.985);
  transition: transform .34s var(--ease);
}
.pv.is-open .pv__box { transform: none; }

/* --- 헤더: 맥 신호등 + 타이틀 + 영업 CTA + 닫기 --- */
.pv__hd {
  flex: none; display: flex; align-items: center; gap: clamp(.6rem, 1.6vw, 1.1rem);
  padding: clamp(.7rem, 1.6vw, 1rem) clamp(.8rem, 2vw, 1.35rem);
  background: #fff; border-bottom: 1px solid rgba(20,20,26,.1);
}
.pv__dots { display: flex; gap: 6px; flex: none; }
.pv__dots i { width: 11px; height: 11px; border-radius: 50%; background: #ddd; }
.pv__dots i:nth-child(1) { background: #ff5f57; }
.pv__dots i:nth-child(2) { background: #febc2e; }
.pv__dots i:nth-child(3) { background: #28c840; }

.pv__ttl { min-width: 0; flex: 1; }
.pv__kick {
  font-size: .72rem; font-weight: 800; letter-spacing: .09em;
  color: var(--brand); margin-bottom: 1px;
}
.pv__name {
  font-size: clamp(.95rem, 1.7vw, 1.08rem); font-weight: 800;
  letter-spacing: -.035em; color: #14141a;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pv__desc {
  font-size: .76rem; color: rgba(20,20,26,.55); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (max-width: 700px) { .pv__desc { display: none; } }

/* ★ 영업 동선: 미리보기 → "이 샘플로 제작 절차 보기" → #process */
.pv__go {
  flex: none; font-size: .82rem; font-weight: 800;
  padding: .55rem .9rem; border-radius: var(--r-sm);
  background: rgba(41,68,243,.1); color: var(--brand);
  border: 1px solid rgba(41,68,243,.22);
  transition: background .22s var(--ease);
}
.pv__go:hover { background: rgba(41,68,243,.18); }
@media (max-width: 760px) { .pv__go { display: none; } }

.pv__x {
  flex: none; width: 38px; height: 38px; border: 0; border-radius: 50%;
  background: rgba(20,20,26,.06); color: #14141a;
  font-size: 1.15rem; line-height: 1; display: grid; place-items: center;
  transition: background .2s;
}
.pv__x:hover { background: rgba(20,20,26,.13); }

/* --- 고지바: 가짜 데이터 명시 = 신뢰 확보 --- */
.pv__note {
  flex: none; background: #24242c; color: rgba(255,255,255,.82);
  font-size: .74rem; text-align: center; padding: .45rem .8rem;
}

/* --- iframe: 실제 사이트 --- */
.pv__frame { flex: 1; min-height: 0; background: #fff; }
.pv__frame iframe { width: 100%; height: 100%; border: 0; display: block; }

body.pv-lock { overflow: hidden; }

/* --- 크로스도메인 폴백 (X-Frame-Options 차단 시 자동 노출) --- */
.pv__fb {
  height: 100%; display: grid; place-content: center; gap: .8rem;
  text-align: center; padding: 2rem; background: #fff;
}
.pv__fb-t { font-size: clamp(1.05rem,2.2vw,1.35rem); font-weight: 800;
            letter-spacing: -.035em; color: #14141a; }
.pv__fb-d { font-size: .92rem; color: rgba(20,20,26,.6); line-height: 1.7; max-width: 40ch; }
.pv__fb-b {
  justify-self: center; margin-top: .5rem;
  padding: .85rem 1.5rem; border-radius: var(--r-sm, 4px);
  background: var(--brand, #2944F3); color: #fff; font-weight: 800; font-size: .95rem;
}