/* 광고주 전용(advertiser.html)·제작자 전용(creator.html) 페이지. 카드 296(짝 디자인 카드 #1994a2).
   styles/home.css(머리말 로그인 테두리 알약·휴대폰 메뉴·바닥글·01→03+데모·포함 내용 줄 목록)를 먼저 불러오고, 여기는 두 페이지에만 있는 배치만.
   다이얼 변화 4 · 움직임 2 · 밀도 3. 색·간격·글자는 tokens.css 변수만. 부품은 components/components.css 그대로.
   테라코타: 광고주 페이지 한 줄 의뢰 '의뢰 시작' 한 곳. 제작자 페이지는 테라코타 없음(주 버튼 숲색 하나). 짙은 숲색 면은 마지막 띠 한 곳(가격표 추천 칸은 부품 그대로). */

/* 맨 위 반대쪽 바꿔 가기 줄: 누르는 높이 44px */
.ad-head__switch { margin: 0; }
.ad-head__switch a { min-height: 44px; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* 머리말 링크(#예시 영상·#가격표)로 갈 때 붙박이 머리말에 제목이 가리지 않게 */
.ad-page h2[id] { scroll-margin-top: calc(var(--header-height, 64px) + var(--space-5)); }

/* ① 첫 화면: 휴대폰은 한 줄로 쌓고, 900px 이상에서 왼쪽 제목 · 오른쪽 설명+행동(광고주) / 왼쪽 글 · 오른쪽 세로 예시(제작자) */
.s-hero { padding-block: var(--space-5) var(--space-7); }
.s-hero__grid { display: grid; gap: var(--space-5); }
.s-hero__text, .s-hero__act { display: grid; gap: var(--space-5); align-content: start; }
.s-hero .ad-ask { max-width: none; width: 100%; }
.s-hero__hint { margin: 0; font-size: var(--font-size-small); color: var(--color-text-muted); }
.s-hero__media { margin: 0; justify-self: center; width: min(64%, 240px); }
.s-hero__media .video-thumb { --radius: var(--radius-xl); aspect-ratio: 9 / 16; }
.s-hero__media figcaption { margin-top: var(--space-3); font-size: var(--font-size-caption); color: var(--color-text-muted); }

/* 글자 링크(보조 행동): 밑줄, 44px */
.s-link { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; color: var(--color-primary); font-weight: var(--font-weight-semibold); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 5px; }
.s-link span[aria-hidden] { transition: transform var(--duration-fast) var(--ease-out); }
@media (hover: hover) { .s-link:hover span[aria-hidden] { transform: translateX(3px); } }

/* 사진 위 업종·길이 글자 받침(첫 화면과 같음) */
.video-thumb__meta span { padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--color-scrim); color: var(--color-on-primary); text-shadow: none; }

/* ② 광고주: 업종별 예시 영상 벤토(실제 예시 3장만, 빈 칸 없음). 휴대폰은 위 가로 한 칸 + 아래 세로 두 칸 */
.s-bento { grid-auto-rows: 200px; }
.s-bento .ad-bento__cell:first-child { grid-row: auto; }
/* AI 생성 표시 잘라 내기(첫 화면과 같은 값): 카페는 왼쪽 기준, 꽃집 포장은 위 기준 1.16배 */
.s-bento .s-crop-left > img, .s-bento .s-crop-left > video { transform: scale(1.16); transform-origin: 0 50%; }
.s-bento .s-crop-top > img, .s-bento .s-crop-top > video { transform: scale(1.16); transform-origin: 50% 0; }
/* 11/07 누르면 그 자리에서 재생(처음엔 멈춤). 칸 전체가 재생 단추, → 단추만 포트폴리오로 */
.s-play__btn { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: inherit; background: transparent; cursor: pointer; }
.s-play__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.s-play__icon { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: rgba(17, 41, 44, .62); box-shadow: 0 0 0 1px rgba(238, 241, 241, .35); backdrop-filter: blur(2px); transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s; }
.s-play__icon::before { content: ''; position: absolute; left: 25px; top: 20px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent #eef1f1; }
.s-play__btn:hover .s-play__icon { transform: scale(1.08); }
.s-play.is-playing .s-play__icon { opacity: 0; transform: scale(.85); }
.s-play.is-playing:hover .s-play__icon { opacity: 1; transform: none; }
.s-play.is-playing .s-play__icon::before { left: 23px; top: 22px; width: 6px; height: 20px; border: 0; background: #eef1f1; box-shadow: 12px 0 0 #eef1f1; }
.s-play.is-loading .s-play__icon { animation: s-play-pulse 1s ease-in-out infinite; }
@keyframes s-play-pulse { 50% { opacity: .55; } }
.s-play > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.s-play .ad-bento__text, .s-play .ad-bento__go { z-index: 2; }
.s-play .ad-bento__text { pointer-events: none; transition: opacity .3s; }
.s-play.is-playing .ad-bento__text { opacity: 0; }
.s-play .ad-bento__go { text-decoration: none; }
@media (prefers-reduced-motion: reduce) { .s-play__icon { transition: none; } .s-play.is-loading .s-play__icon { animation: none; } }
.s-bento .ad-bento__cell:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.s-bento__more { margin: var(--space-5) 0 0; }
/* 휴대폰 두 칸(약 158px 폭)에서 업종 글자와 → 단추가 겹치지 않게 단추를 위 오른쪽으로 */
@media (max-width: 899px) { .s-bento .ad-bento__go { top: var(--space-3); bottom: auto; } }

/* ④ 가격표 아래 한 줄 */
.s-price-note { margin: var(--space-6) auto 0; text-align: center; color: var(--color-text); }

/* ② 제작자: 포트폴리오 올리기(왼쪽 글 · 오른쪽 작품 카드 미리 보기) */
.s-split { display: grid; gap: var(--space-6); align-items: center; }
.s-split .ad-sechead { margin-bottom: 0; }
.s-work { margin: 0; padding: var(--space-4); border-radius: var(--radius-xl); background: var(--color-paper); }
.s-work .video-thumb { --radius: var(--radius-lg); }
.s-work .video-thumb > img { transform: scale(1.16); transform-origin: 0 50%; }
.s-fields { margin: var(--space-4) 0 0; display: grid; }
.s-fields div { display: grid; grid-template-columns: 5.5rem 1fr; align-items: baseline; gap: var(--space-3); padding-block: var(--space-3); border-top: var(--border-width) solid var(--color-line); }
.s-fields dt { font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
.s-fields dd { margin: 0; color: var(--color-text); }
.s-fields div:first-child dd { font-family: var(--font-heading); font-weight: var(--font-weight-semibold); color: var(--color-primary); }

/* ③ 제작자: 열린 의뢰 한 장(실제 화면 creator-requests.html과 같은 세 칸) */
.s-req { margin: 0; padding: var(--space-6) var(--space-5); border-radius: var(--radius-xl); background: var(--color-cream); }
.s-req__kicker { margin: 0; font-size: var(--font-size-label); font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.s-req .s-fields { margin-top: var(--space-3); }
.s-req .s-fields div:last-child { border-bottom: var(--border-width) solid var(--color-line); }
.s-req__send { display: inline-flex; align-items: center; justify-content: center; margin-top: var(--space-5); min-height: 40px; padding: 0 var(--space-5); border-radius: var(--radius-pill); border: var(--border-width) solid var(--color-primary); color: var(--color-primary); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); }
.s-req figcaption { margin-top: var(--space-4); font-size: var(--font-size-caption); color: var(--color-text-muted); }
.s-steps__links { margin: var(--space-6) 0 0; display: flex; flex-wrap: wrap; gap: 0 var(--space-5); }

@media (min-width: 768px) {
  .s-split { grid-template-columns: 1fr 1fr; gap: var(--space-7); }
}
@media (min-width: 900px) {
  .s-hero { padding-block: var(--space-7) var(--space-8); }
  .s-hero__grid { grid-template-columns: 6fr 5fr; gap: var(--space-8); align-items: end; }
  .s-hero--creator .s-hero__grid { grid-template-columns: 7fr 4fr; align-items: center; }
  .s-hero__media { justify-self: end; width: 280px; }
  /* 벤토: 가로 예시 넓게 · 세로 예시 둘을 같은 높이로 */
  .s-bento { grid-template-columns: 2fr 1fr 1fr; grid-auto-rows: 400px; }
  .s-bento .ad-bento__cell:first-child { grid-column: auto; }
  .s-split { grid-template-columns: 5fr 6fr; gap: var(--space-8); }
}
@media (min-width: 1200px) {
  .s-hero__media { width: 300px; }
}

/* 11/06 대표: 광고주 가격표 — 세로 한 편 3만 원부터 · 세트(세로+가로 총 2편) 7만 원 · 가로 한 편 5만 원 (채팅 Claude)
   덤: 화면 모양 그림(세로 9:16 / 둘 다 / 가로 16:9, 천천히 숨쉬기), 화면에 들어오면 금액이 0에서 올라감(scripts/home-deco.js),
   세트 칸 "따로 맡기면 8만 원" 줄, 마우스 올리면 카드가 살짝 떠오름. 움직임 줄이기면 그림·숫자 모두 멈춘 최종 모습 */
.s-pricing .ad-plan { position: relative; transition: transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s; }
.s-pricing .ad-plan__price { white-space: nowrap; }
.s-pricing .s-unit { font-size: .55em; margin-left: 2px; }
.s-pricing .s-from { margin-left: 6px; font-family: var(--font-sans); font-size: .9rem; font-weight: var(--font-weight-semibold); color: var(--color-primary); vertical-align: .55em; }
.s-shape { display: flex; justify-content: center; align-items: flex-end; gap: 6px; height: 46px; }
.s-shape i { display: block; border: 2px solid rgba(27, 58, 61, .55); border-radius: 6px; background: rgba(27, 58, 61, .06); }
.s-shape--v i, .s-shape--vh i:first-child { width: 26px; height: 46px; }
.s-shape--h i, .s-shape--vh i:last-child { width: 58px; height: 33px; }
.ad-plan--featured .s-shape i { border-color: rgba(238, 241, 241, .7); background: rgba(238, 241, 241, .1); }
.s-save { margin: calc(var(--space-2) * -1) 0 0; font-size: var(--font-size-caption); color: var(--color-on-primary-muted, #bad6d9); }
.s-save s { opacity: .75; }
.s-save b { color: var(--color-cream, #eef1f1); }
@media (hover: hover) {
  .s-pricing .ad-plan:hover { transform: translateY(-4px); box-shadow: 0 18px 36px -22px rgba(17, 41, 44, .45); }
}
@media (prefers-reduced-motion: no-preference) {
  .s-shape i { animation: s-breathe 4s ease-in-out infinite; transform-origin: bottom; }
  .s-shape--vh i:last-child { animation-delay: 1s; }
  .s-shape--h i { animation-delay: 2s; }
  @keyframes s-breathe { 50% { transform: scale(1.06); } }
}
.s-price-note .s-nowrap { white-space: nowrap; }
.ad-plan--featured .s-from { color: var(--color-cream, #eef1f1); }
@media (max-width: 899px) { .s-play__icon { top: 40%; width: 48px; height: 48px; margin: -24px 0 0 -24px; } .s-play__icon::before { left: 19px; top: 15px; border-width: 9px 0 9px 14px; } .s-play.is-playing .s-play__icon::before { left: 17px; top: 16px; width: 5px; height: 16px; box-shadow: 9px 0 0 #eef1f1; } }
/* 음소거 단추: 재생 단추·글자보다 위, 처음 누르기 전엔 없음 */
.s-play .s-play__sound { z-index: 3; }