/* 콘텐츠클리닉 3차 · p-svc-sns-ad.css — SNS 광고 영상 "만드는 모습"(넘기던 손이 멈추는 3초)만 (담당 F2)
   공통 틀은 p-service.css. 여기서는 가짜 피드 휴대폰·광고 두 칸·세팅 체크리스트 모양만 정한다.
   글자 크기·굵기는 쓰지 않는다(공통 .t-* 클래스). 기본(JS 없음·움직임 끔)은 피드가 멈춘 모습 + 광고 칸 포스터. */

/* ---------------- 배치: PC = 휴대폰 양옆에 칸 둘 · 모바일 = 휴대폰 아래 칸 둘 ---------------- */
.ad-stage { display: grid; gap: var(--cc-s6); justify-items: center; align-items: center; }
.ad-phone { --phone-w: 260px; order: -1; }
.ad-type { width: 100%; max-width: 440px; }
@media (min-width: 600px) {
  .ad-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--cc-s6) var(--cc-s5); align-items: stretch; }
  .ad-phone { grid-column: 1 / -1; --phone-w: 280px; align-self: center; }
  .ad-type--l { justify-self: end; }
  .ad-type--r { justify-self: start; }
}
@media (min-width: 1024px) {
  .ad-stage { grid-template-columns: minmax(0, 1fr) 300px minmax(0, 1fr); gap: var(--cc-s7); align-items: center; }   /* 휴대폰 틀은 폭을 스스로 못 정하므로 칸 폭을 직접 줌 */
  .ad-phone { grid-column: auto; order: 0; --phone-w: 300px; }
  .ad-type { max-width: 340px; }
  .ad-type--l { justify-self: end; }
  .ad-type--r { justify-self: start; }
}

/* ---------------- 가짜 피드 휴대폰 ----------------
   .ad-screen 안의 길이는 모두 화면 폭 기준(cqi). 한 칸(post) 높이 128 = 머리 14 + 정사각 그림 98 + 아래줄 14 + 구분 2.
   광고 칸은 화면 한 장(9:16 = 폭 × 1.7778). 맨 위 막대(--bar)는 휴대폰 눈금 아래 자리. */
.ad-screen {
  --bar: 14cqi; --post-h: 128cqi; --k: 3;   /* 기본(JS 없음·움직임 끔·화면 밖)은 k=3 = 광고 칸에서 멈춘 모습: 광고 포스터가 화면에 꽉 참 */
  position: relative; aspect-ratio: 9 / 16; border-radius: inherit; overflow: hidden;
  container-type: inline-size; background: var(--cc-white);
}
.ad-view { position: absolute; inset: 0; transition: opacity 260ms var(--cc-ease); }
.ad-screen.is-fading .ad-view { opacity: 0; }

/* 트랙: --k(0~3) 칸만큼 위로. k=3이면 막대 높이까지 더해 올라가 광고 칸이 화면 맨 위부터 꽉 참 */
.ad-track { transform: translateY(calc(-1 * var(--k) * (var(--post-h) + var(--bar) / 3))); padding-top: var(--bar); }
.ad-screen.is-live .ad-track { transition: transform 600ms cubic-bezier(0.22, 0.8, 0.3, 1), filter 200ms var(--cc-ease); will-change: transform; }
.ad-screen.is-flick .ad-track { filter: blur(1.4px); }   /* 넘길 때만 움직임 흐림 */

.ad-bar {
  position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: var(--bar);
  display: flex; align-items: flex-end; gap: 3cqi; background: var(--cc-white);
  opacity: 0; transition: opacity 240ms var(--cc-ease);   /* 광고 칸이 꽉 찬 기본 모습에서는 숨김 */
}
.ad-screen.is-live:not(.is-stopped) .ad-bar { opacity: 1; }
.ad-bar > i { margin-bottom: 2.6cqi; }
.ad-bar-logo { flex: none; width: 26cqi; height: 4.6cqi; margin-left: 5cqi; margin-right: auto; border-radius: 2cqi; background: var(--cc-navy); }
.ad-bar-dot { width: 6cqi; height: 6cqi; border-radius: 50%; background: var(--cc-navy-soft); }
.ad-bar-dot:last-child { margin-right: 5cqi; }

/* 피드 한 칸: 머리(동그라미 + 진한 막대 2줄) · 정사각 사진 · 아래 줄 */
.ad-post { height: var(--post-h); display: grid; grid-template-rows: 14cqi 98cqi 14cqi 2cqi; background: var(--cc-white); }
.ad-post::after { content: ""; grid-row: 4; background: var(--cc-paper); }
.ad-post-head { display: flex; align-items: center; gap: 3cqi; padding: 0 4cqi; }
.ad-av { flex: none; width: 8cqi; height: 8cqi; border-radius: 50%; background: var(--cc-navy-soft); }
.ad-post-head > span { display: grid; gap: 1.4cqi; }
.ad-post-head > span > i { display: block; height: 2.4cqi; border-radius: 2cqi; background: var(--cc-navy); }
.ad-post-head > span > i:first-child { width: 22cqi; }
.ad-post-head > span > i:last-child { width: 13cqi; background: var(--cc-navy-soft); }
.ad-post-img { grid-row: 2; overflow: hidden; background: var(--cc-paper); }
.ad-post-img > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-post-foot { display: flex; align-items: center; gap: 3cqi; padding: 0 4cqi; }
.ad-post-foot > i { width: 5.4cqi; height: 5.4cqi; border-radius: 50%; background: var(--cc-navy-soft); }
.ad-post-foot > b { display: block; margin-left: auto; width: 20cqi; height: 2.4cqi; border-radius: 2cqi; background: var(--cc-navy); }

/* 광고 칸: 화면 한 장. 멈추면 이 칸의 영상이 재생됨 */
.ad-slot { position: relative; aspect-ratio: 9 / 16; background: var(--cc-navy-deep); }
.ad-slot > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-slot::after {                      /* 멈춘 순간 한 번 반짝이는 테두리 */
  content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1.4cqi var(--cc-rose); opacity: 0; pointer-events: none;
}
.ad-screen.is-stopped .ad-slot::after { animation: ad-ring 900ms var(--cc-ease) 1 both; }
@keyframes ad-ring { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
.ad-screen.is-stopped .ad-bar { opacity: 0; }

/* 손가락: 위로 넘기다 광고에서 멈춤 */
.ad-touch {
  position: absolute; z-index: 3; left: 62%; top: 78%; width: 13cqi; height: 13cqi; margin: -6.5cqi 0 0 -6.5cqi; border-radius: 50%;
  background: rgba(20, 33, 61, 0.22); box-shadow: 0 0 0 2cqi rgba(20, 33, 61, 0.1); opacity: 0; pointer-events: none;
}
.ad-screen.is-flick .ad-touch { animation: ad-swipe 650ms var(--cc-ease) 1 both; }
@keyframes ad-swipe { 0% { opacity: 0; transform: translateY(14cqi) scale(1); } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-12cqi) scale(0.9); } }
.ad-screen.is-stopped:not(.is-playing) .ad-touch { animation: ad-hold 900ms var(--cc-ease) 1 both; }
@keyframes ad-hold { 0% { opacity: 0; transform: scale(0.8); } 30% { opacity: 1; transform: scale(1); } 70% { opacity: 1; transform: scale(1.18); } 100% { opacity: 0; transform: scale(1.5); } }

/* ---------------- 광고 세팅 체크리스트: 흰 면 문서형(머리 가운데 · 줄 왼쪽) ---------------- */
.ad-check { width: 100%; max-width: 440px; margin: var(--cc-s8) auto 0; padding: var(--cc-s5) var(--cc-s6) var(--cc-s6); }
.ad-check > h3 { padding-bottom: var(--cc-s4); border-bottom: 1px dashed var(--cc-line); text-align: center; }
.ad-check-list { display: grid; gap: var(--cc-s3); margin: 0; padding: var(--cc-s4) 0 0; text-align: left; list-style: none; }
.ad-check-list > li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--cc-s3); align-items: start; }
.ad-check-list > li::before {
  content: ""; width: 24px; height: 24px; margin-top: 2px; border-radius: 50%; background: var(--cc-navy) center / 14px 14px no-repeat;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 6.2 5 8.6 9.6 3.6' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* ---------------- 레퍼런스 구역: 큰 휴대폰 1개(공통 틀이 채움) + 같은 광고 릴의 장면 3컷 한 줄 ----------------
   휴대폰 틀은 폭을 스스로 못 정해서 칸 폭을 직접 준다 */
.ad-refs { display: grid; justify-items: center; align-items: center; gap: var(--cc-s6); }
.ad-refs > .svc-refs { width: 100%; max-width: 240px; }
.ad-scenes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--cc-s3); width: 100%; max-width: 480px; }
.ad-scene { --phone-w: 160px; }
@media (min-width: 1024px) {
  .ad-refs { grid-template-columns: 240px 648px; justify-content: center; gap: var(--cc-s7); align-items: start; }
  .ad-scenes { gap: var(--cc-s5); max-width: none; align-items: start; }
  .ad-scene { --phone-w: 200px; }
}