/* 11/06 대표: 첫 화면처럼 모든 페이지 배경에 선·문양·움직임 (채팅 Claude).
   첫 화면(home.css)과 같은 말투: 숲색 한 가지를 아주 옅게, 물결·덩어리·그라데이션 없음, 움직임 줄이기면 모두 멈춤.
   ① 광고주·제작자 페이지(sides): 첫 화면 격자·꺾쇠 프레임·업종 흐름 띠·필름 띠·빗금 — home.css 의 .h-hero__frame·.deco-marquee·.ad-band·.h-steps 를 그대로 쓰고, 여기는 칸 이름표만.
   ② 회원 화면(.m-main): 위쪽에 콘티 격자(오른쪽 위에서 진하고 아래로 사라짐) + 왼쪽 아래 점 격자 + 제목 앞 작은 필름 칸. */
:root { --deco: 29, 59, 42; }

/* ---- ① sides ---- */
.s-hero, .deco-film, .deco-hatch { position: relative; isolation: isolate; }
.s-hero::before, .deco-film::before, .deco-hatch::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }
/* 첫 화면 격자(56px) — 영상·행동 쪽(오른쪽)에서 진하게 */
.s-hero::before {
  background-image: linear-gradient(rgba(var(--deco), .07) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--deco), .07) 1px, transparent 1px);
  background-size: 56px 56px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(120% 110% at 80% 35%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 110% at 80% 35%, #000 30%, transparent 75%);
}
/* 세로 영상 꺾쇠 프레임: home.css .h-hero__frame 그대로. 설명 줄은 꺾쇠 밖으로 */
.s-hero__media .h-hero__frame .video-thumb { --radius: var(--radius-xl); aspect-ratio: 9 / 16; }
.s-hero__media figcaption { margin-top: 24px; }
/* 필름 띠(첫 화면 예시 영상 칸과 같음): 위·아래 구멍 줄 + 옅은 세로 칸선 */
.deco-film::before { background-image: linear-gradient(90deg, rgba(var(--deco), .06) 1px, transparent 1px); background-size: 132px 100%; }
.deco-film::after { content: ''; position: absolute; left: 0; right: 0; top: 18px; bottom: 18px; z-index: -1; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(var(--deco), .12) 0 12px, transparent 12px 26px), linear-gradient(90deg, rgba(var(--deco), .12) 0 12px, transparent 12px 26px);
  background-size: 26px 12px, 26px 12px; background-repeat: repeat-x; background-position: 0 0, 0 100%;
  border-block: 1px solid rgba(var(--deco), .10); }
/* 45° 가는 빗금, 오른쪽만(첫 화면 고르는 단위와 같음) */
.deco-hatch::before { background-image: repeating-linear-gradient(135deg, rgba(var(--deco), .075) 0 1px, transparent 1px 14px);
  -webkit-mask-image: linear-gradient(90deg, transparent 35%, #000 85%); mask-image: linear-gradient(90deg, transparent 35%, #000 85%); }
/* 작품 카드·열린 의뢰 카드 둘레 꺾쇠(촬영 프레임 축소판) */
.s-work, .s-req { position: relative; }
.s-work::after, .s-req::after { content: ''; position: absolute; inset: -10px; pointer-events: none; --c: rgba(var(--deco), .38);
  background:
    linear-gradient(var(--c), var(--c)) left top / 20px 2px no-repeat, linear-gradient(var(--c), var(--c)) left top / 2px 20px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 20px 2px no-repeat, linear-gradient(var(--c), var(--c)) right bottom / 2px 20px no-repeat; }

/* ---- ② 회원 화면 ---- */
body:has(> .m-main), body:has(> main.m-main) { overflow-x: clip; }
.m-main { position: relative; isolation: isolate; }
.m-main::before, .m-main::after { content: ''; position: absolute; z-index: -1; pointer-events: none; left: calc(50% - 50vw); right: calc(50% - 50vw); }
.m-main::before { top: 0; height: 460px;
  background-image: linear-gradient(rgba(var(--deco), .065) 1px, transparent 1px), linear-gradient(90deg, rgba(var(--deco), .065) 1px, transparent 1px);
  background-size: 56px 56px; background-position: -1px -1px;
  -webkit-mask-image: radial-gradient(90% 120% at 82% 0%, #000 20%, transparent 70%); mask-image: radial-gradient(90% 120% at 82% 0%, #000 20%, transparent 70%); }
.m-main::after { bottom: 0; height: 360px;
  background-image: radial-gradient(rgba(var(--deco), .15) 1.2px, transparent 1.6px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(60% 90% at 8% 100%, #000 20%, transparent 70%); mask-image: radial-gradient(60% 90% at 8% 100%, #000 20%, transparent 70%); }
/* 맨 위 제목 앞 필름 칸 세 개(작은 장식) */
.m-main > h1:first-of-type::before, .m-main > :first-child h1:first-of-type::before { content: ''; display: block; width: 46px; height: 8px; margin-bottom: 12px;
  background: linear-gradient(90deg, rgba(var(--deco), .35) 0 10px, transparent 10px 18px) 0 0 / 18px 8px repeat-x; border-radius: 1px; }

/* ---- 움직임 ---- */
@media (prefers-reduced-motion: no-preference) {
  .s-hero::before, .m-main::before { animation: deco-grid 30s linear infinite; }
  .deco-film::after { animation: deco-film 6s linear infinite; }
  .deco-hatch::before { animation: deco-hatch 24s linear infinite; }
  @keyframes deco-hatch { to { background-position: 39.6px 0; } }
  .m-main > h1:first-of-type::before, .m-main > :first-child h1:first-of-type::before { animation: deco-perf 3s linear infinite; }
  @keyframes deco-perf { to { background-position: 18px 0; } }
  .s-work::after, .s-req::after { animation: deco-focus 1.2s cubic-bezier(.16,1,.3,1) both; }
  /* home.css 안 쓰는 회원 화면용 같은 이름 움직임 */
  @keyframes deco-grid { to { background-position: 55px 55px; } }
  @keyframes deco-film { to { background-position: 26px 0, 26px 100%; } }
  @keyframes deco-focus { from { transform: scale(1.08); opacity: 0; } }
}

/* 11/06 대표: 제작자 안내 첫 화면 카메라 영상이 오른쪽으로 치우쳐 보임 → 오른쪽 칸을 넓히고 칸 가운데로 */
@media (min-width: 900px) {
  .s-hero--creator .s-hero__grid { grid-template-columns: 6fr 5fr; }
  .s-hero--creator .s-hero__media { justify-self: center; }
}

/* 11/06 대표: 수수료 줄의 90%는 굵게 */
.h-plans__em { font-weight: var(--font-weight-bold, 700); color: var(--color-primary); }