/* 콘텐츠클리닉 3차 · p-svc-brand-film.css — 브랜드 필름 "만드는 모습"(콘티가 장면이 되기까지)만 (담당 F1)
   공통 틀은 p-service.css(E). 여기서는 3칸 작업물(장면 후보 · 콘티 · 콘티→장면 전환)과 가로판·세로판 한 쌍만 정한다.
   글자 크기·굵기는 새로 만들지 않는다(HTML의 .t-* 클래스만). 모든 길이는 노트북 틀 폭 기준 cqi. */

.bf-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.bf-laptop { max-width: 640px; margin-inline: auto; }

/* 노트북 화면 안 공통 판(16:10, 종이 색) */
.bf-board {
  position: relative; display: grid; align-content: center; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: inherit; background: #F4EFE4;
}

/* ---------------- 01 장면 고르기: 한 영상에서 뽑은 장면 후보, 큰 장면이 골라짐(모두 가로 16:9 그대로) ---------------- */
.bf-pick { grid-template-columns: minmax(0, 2.19fr) minmax(0, 1fr); grid-template-rows: auto auto; gap: 2.5cqi; padding: var(--cc-s5); align-items: start; }
.bf-cell {
  position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 1cqi; background: var(--cc-line);
  box-shadow: 0 0.6cqi 1.6cqi rgba(20, 33, 61, 0.16);
  transition: opacity 400ms var(--cc-ease), box-shadow 300ms var(--cc-ease);
}
.bf-cell > img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; object-view-box: var(--v, none); }
.bf-cell--pick { grid-row: 1 / span 2; align-self: center; box-shadow: 0 0 0 0.8cqi var(--svc-color), 0 0.6cqi 1.6cqi rgba(20, 33, 61, 0.16); }
.bf-check {
  position: absolute; right: 1.6cqi; top: 1.6cqi; width: 6cqi; height: 6cqi; border-radius: 50%;
  background: var(--svc-color) center / 62% no-repeat; box-shadow: 0 0 0 0.6cqi #fff;
  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");
  transition: transform 400ms var(--cc-ease), opacity 400ms var(--cc-ease);
}
.is-live .svc-step.is-on .bf-cell:not(.bf-cell--pick) { opacity: 0.5; }
.is-live .svc-step:not(.is-on) .bf-cell--pick { box-shadow: 0 0.6cqi 1.6cqi rgba(20, 33, 61, 0.16); }
.is-live .svc-step:not(.is-on) .bf-check { transform: scale(0.4); opacity: 0; }

/* ---------------- 연필 스케치 처리(02 콘티 · 03 전환 공통) ----------------
   같은 영상 포스터에 윤곽선만 남기는 필터(#bf-pencil, HTML 맨 위 svg)를 걸고 종이 색을 곱해 연필 스케치처럼 */
.bf-sk { display: block; width: 100%; height: 100%; object-fit: cover; filter: url(#bf-pencil); }
.bf-art::after, .bf-sketch::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; mix-blend-mode: multiply;
  background: #F1E8D4;
}

/* ---------------- 02 콘티: 스케치 여섯 장면 + 장면마다 자막 줄 ---------------- */
.bf-conti { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3.6cqi 3.4cqi; padding: var(--cc-s5); }
@media (max-width: 599px) { .bf-pick, .bf-conti { padding: var(--cc-s3); } }
.bf-panel { position: relative; display: grid; gap: 1.8cqi; align-content: start; }
.bf-panel:not(:nth-child(3n + 1))::before {            /* 같은 줄 장면 사이 화살표 */
  content: ""; position: absolute; z-index: 1; top: 5.8cqi; left: -2.4cqi; width: 1.6cqi; height: 1.6cqi;
  border-top: 0.5cqi solid #6B6253; border-right: 0.5cqi solid #6B6253; transform: translateX(0.3cqi) rotate(45deg);
}
.bf-art { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; box-shadow: 0 0 0 0.5cqi #6B6253; background: #fff; }
.bf-art > .bf-sk { object-view-box: var(--v, none); }   /* 확대 자르기: 원본을 이 상자만큼 잘라 칸에 채움(--v = inset) */
.bf-lines { display: grid; gap: 1.2cqi; }
.bf-lines > i { display: block; height: 1.2cqi; border-radius: 1cqi; background: #BDB3A0; }
.bf-lines > i:last-child { width: 62%; }

/* ---------------- 03 완성: 스크롤에 따라 콘티 → 실제 장면 → 재생 ----------------
   --p: 0(콘티) → 1(실제 장면). 기본값 1(JS가 없거나 움직임을 끄면 장면이 그대로 보임). JS가 스크롤에 맞춰 바꿈 */
.bf-stage { --p: 1; position: relative; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; background: var(--cc-navy-deep); }
.bf-live { display: block; width: 100%; height: 100%; object-fit: cover; }
.bf-sketch {
  position: absolute; inset: 0; overflow: hidden; background: #F4EFE4;
  clip-path: inset(0 0 0 calc(var(--p) * 100%));
}
.bf-sketch > .bf-sk { position: absolute; inset: 0; }
.bf-scan {
  position: absolute; top: 0; bottom: 0; left: calc(var(--p) * 100%); width: 0.7cqi; margin-left: -0.35cqi;
  background: var(--svc-color); opacity: 0; transition: opacity 200ms var(--cc-ease); pointer-events: none;
}
.bf-stage.is-wiping .bf-scan { opacity: 1; }

/* ---------------- 가로판 · 세로판 한 쌍 ---------------- */
.bf-pair-title { margin-top: var(--cc-s8); }
.bf-pair {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.352fr); gap: var(--cc-s6);
  max-width: 1040px; margin: var(--cc-s6) auto 0; align-items: start;
}
.bf-item { display: grid; justify-items: center; align-content: start; gap: var(--cc-s3); min-width: 0; }
.bf-item > figure { width: 100%; }
.bf-pair .frame-phone { --phone-w: 100%; }
@media (max-width: 767px) {
  .bf-pair { grid-template-columns: minmax(0, 1fr); gap: var(--cc-s7); }
  .bf-pair .frame-phone { --phone-w: 220px; }
}

/* ---------------- 콘텐츠클리닉 자체 브랜드 필름(누르면 재생) ---------------- */
.bf-pair-sub { margin-top: var(--cc-s2); }
.bf-pair--lead { margin-bottom: var(--cc-s2); }
.bf-own { position: relative; }
.frame-phone .bf-own > video { display: block; width: 100%; height: 100%; object-fit: cover; }
.bf-play {
  position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; padding: 0;
  display: grid; place-items: center; border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(255, 255, 255, 0.92); color: var(--cc-navy-deep); box-shadow: 0 4px 16px rgba(20, 33, 61, 0.28);
}
.bf-play svg { width: 26px; height: 26px; margin-left: 3px; }
.bf-own.is-played .bf-play { display: none; }