/* Aednoa 부품 모음 v2(FIX42, 서버가 둔다 — 고치지 말고 클래스만 쓴다). tokens.css → base.css → components.css 순서로 불러온다.
   견본: components/index.html. 모든 부품: 360·768·1440, 키보드 초점, 누르는 곳 44px 이상, keep-all.
   피하는 것(Impeccable·Taste): 그라데이션, 쉬는 카드 그림자, 한쪽 굵은 선, 카드 안 카드, 저절로 흐르는 띠, 튕기는 이징. */

/* ---------- 바탕·틀 ---------- */
.ad-page { margin: 0; background: var(--color-bg, #f6f2e9); color: var(--color-text, #1b1f1c); font-family: var(--font-sans, var(--font-base, sans-serif)); font-size: var(--font-size-body, 1.0625rem); line-height: var(--line-height-body, 1.7); }
.ad-wrap { width: min(100% - 2 * var(--page-gutter, 16px), var(--content-width, 1120px)); margin-inline: auto; }
.ad-section { padding-block: var(--section-gap, 48px); }
.ad-section--sage { background: var(--color-sage, #dfe7d5); }
.ad-section--paper { background: var(--color-paper, #fcfaf5); }
@media (min-width: 768px) { .ad-section { padding-block: var(--section-gap-tablet, 64px); } }
@media (min-width: 1200px) { .ad-section { padding-block: var(--section-gap-wide, 96px); } }
.ad-page :where(h1, h2, h3, p, li, a, button, label) { word-break: keep-all; overflow-wrap: break-word; }
.ad-page :where(h1, h2, h3) { text-wrap: balance; }
.ad-page :where(p) { text-wrap: pretty; }

/* ---------- 알약 버튼(주·보조), 눌림 ---------- */
.ad-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2, 8px);
  min-height: 48px; padding: 0 var(--space-6, 32px); border-radius: var(--radius-pill, 999px);
  font: inherit; font-weight: var(--font-weight-semibold, 600); font-size: 1rem; line-height: 1.2; text-decoration: none; white-space: nowrap;
  border: var(--border-width-strong, 2px) solid transparent; cursor: pointer;
  transition: transform var(--duration-press, 120ms) var(--ease-out, ease-out), background-color var(--duration-fast, 160ms) ease, color var(--duration-fast, 160ms) ease, border-color var(--duration-fast, 160ms) ease;
}
.ad-btn:active { transform: scale(var(--press-scale, 0.97)); }
.ad-btn--primary { background: var(--color-primary, #1d3b2a); color: var(--color-on-primary, #f6f2e9); }
.ad-btn--secondary { background: transparent; color: var(--color-primary, #1d3b2a); border-color: var(--color-primary, #1d3b2a); }
.ad-btn--on-dark { background: var(--color-cream, #f6f2e9); color: var(--color-forest, #1d3b2a); }
@media (hover: hover) {
  .ad-btn--primary:hover { background: var(--color-primary-dark, #132a1d); }
  .ad-btn--secondary:hover { background: var(--color-primary-soft, #e3ebe0); }
  .ad-btn--on-dark:hover { background: var(--color-sage, #dfe7d5); }
}
.ad-btn__arrow { display: inline-block; transition: transform var(--duration-fast, 160ms) var(--ease-out, ease-out); }
@media (hover: hover) { .ad-btn:hover .ad-btn__arrow { transform: translateX(3px); } }
.ad-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3, 12px); }

/* ---------- 머리말(FIX40 로그인/마이페이지 단추 [data-acct]는 member.js가 채운다. 자리만 둔다) ---------- */
.ad-head { position: sticky; top: 0; z-index: var(--z-header, 10); background: var(--color-bg, #f6f2e9); }
.ad-head__row { display: flex; align-items: center; gap: var(--space-5, 24px); min-height: var(--header-height, 64px); }
.ad-head__brand { font-family: var(--font-serif, 'Noto Serif KR Sub', 'Gowun Batang', serif); font-size: 1.375rem; font-weight: var(--font-weight-bold, 700); letter-spacing: -0.01em; color: var(--color-text, #1b1f1c); text-decoration: none; display: inline-flex; align-items: center; min-height: 44px; }
.ad-head__nav { display: none; gap: var(--space-5, 24px); }
.ad-head__nav a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-text, #1b1f1c); text-decoration: none; font-weight: var(--font-weight-medium, 500); }
.ad-head__nav a[aria-current="page"] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 6px; }
@media (hover: hover) { .ad-head__nav a:hover { color: var(--color-primary, #1d3b2a); } }
@media (min-width: 768px) { .ad-head__nav { display: flex; } }
.ad-head .acct { margin-left: auto; }
.ad-head .acct-login { border-radius: var(--radius-pill, 999px); }
.ad-head__switch { display: block; padding: var(--space-2, 8px) 0; font-size: var(--font-size-caption, 0.875rem); color: var(--color-text-muted, #4a524b); text-align: center; background: var(--color-sage, #dfe7d5); }
.ad-head__switch a { color: var(--color-primary, #1d3b2a); font-weight: var(--font-weight-semibold, 600); display: inline-flex; align-items: center; min-height: 32px; }

/* ---------- 섹션 머리말: 작은 라벨 + 큰 세리프 제목(한 단어 강조) ---------- */
.ad-sechead { display: grid; gap: var(--space-3, 12px); max-width: 44rem; margin-bottom: var(--space-7, 48px); }
.ad-sechead--center { margin-inline: auto; text-align: center; }
.ad-label { margin: 0; font-size: var(--font-size-label, 0.8125rem); font-weight: var(--font-weight-semibold, 600); color: var(--color-primary, #1d3b2a); }
.ad-title { margin: 0; font-family: var(--font-heading, var(--font-serif, 'Noto Serif KR Sub', 'Gowun Batang', serif)); font-size: var(--font-size-h2, 2rem); font-weight: var(--font-weight-semibold, 600); line-height: var(--line-height-title, 1.22); letter-spacing: var(--letter-spacing-title, -0.02em); color: var(--color-text, #1b1f1c); }
.ad-title--display { font-size: var(--font-size-display, 3.5rem); line-height: 1.12; }
.ad-accent { font-style: normal; font-weight: var(--font-weight-heavy, 800); color: var(--color-primary, #1d3b2a); }
.ad-lead { margin: 0; max-width: var(--measure, 40em); font-size: var(--font-size-lead, 1.125rem); color: var(--color-text-muted, #4a524b); }

/* ---------- 두 갈래 입구(광고주 / 제작자) ---------- */
.ad-doors { display: grid; gap: var(--space-4, 16px); }
@media (min-width: 768px) { .ad-doors { grid-template-columns: 1fr 1fr; gap: var(--space-5, 24px); } }
.ad-door {
  position: relative; display: grid; align-content: space-between; gap: var(--space-6, 32px); min-height: 220px;
  padding: var(--space-6, 32px); border-radius: var(--radius-xl, 24px); text-decoration: none;
  transition: transform var(--duration-base, 240ms) var(--ease-out, ease-out), background-color var(--duration-fast, 160ms) ease;
}
.ad-door--adv { background: var(--color-forest, #1d3b2a); color: var(--color-on-primary, #f6f2e9); }
.ad-door--creator { background: var(--color-sage, #dfe7d5); color: var(--color-text, #1b1f1c); }
.ad-door__who { margin: 0; font-size: var(--font-size-label, 0.8125rem); font-weight: var(--font-weight-semibold, 600); opacity: 0.85; }
.ad-door__title { margin: var(--space-2, 8px) 0 0; font-family: var(--font-serif, 'Noto Serif KR Sub', 'Gowun Batang', serif); font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.125rem); font-weight: var(--font-weight-semibold, 600); line-height: 1.25; }
.ad-door__desc { margin: var(--space-3, 12px) 0 0; max-width: 26em; font-size: 1rem; line-height: 1.65; }
.ad-door--adv .ad-door__desc { color: var(--color-on-primary-muted, #c9d7bc); }
.ad-door--creator .ad-door__desc { color: var(--color-text-muted, #4a524b); }
.ad-door__go { display: inline-flex; align-items: center; gap: var(--space-2, 8px); justify-self: start; min-height: 44px; padding: 0 var(--space-5, 24px); border-radius: var(--radius-pill, 999px); font-weight: var(--font-weight-semibold, 600); }
.ad-door--adv .ad-door__go { background: var(--color-cream, #f6f2e9); color: var(--color-forest, #1d3b2a); }
.ad-door--creator .ad-door__go { background: var(--color-forest, #1d3b2a); color: var(--color-on-primary, #f6f2e9); }
.ad-door:active { transform: scale(0.99); }
@media (hover: hover) {
  .ad-door:hover { transform: translateY(-2px); }
  .ad-door--creator:hover { background: var(--color-sage-deep, #c9d7bc); }
}

/* ---------- 한 줄 의뢰 입력(살아 있는 것 하나): 스크립트 없이도 request.html?q=… 로 간다 ---------- */
.ad-ask { display: grid; gap: var(--space-2, 8px); max-width: 640px; }
.ad-ask__label { font-size: var(--font-size-caption, 0.875rem); font-weight: var(--font-weight-semibold, 600); color: var(--color-text, #1b1f1c); }
.ad-ask__row { display: flex; align-items: center; gap: var(--space-2, 8px); padding: 6px; border-radius: var(--radius-pill, 999px); background: var(--color-paper, #fcfaf5); border: var(--border-width, 1px) solid var(--color-line, #d8d2c4); transition: border-color var(--duration-fast, 160ms) ease; }
.ad-ask__row:focus-within { border-color: var(--color-primary, #1d3b2a); }
.ad-ask__input { flex: 1; min-width: 0; min-height: 44px; padding: 0 var(--space-4, 16px); border: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--color-text, #1b1f1c); }
.ad-ask__input:focus { outline: none; }
.ad-ask__input::placeholder { color: #6b7169; }
.ad-ask__hint { margin: 0; font-size: var(--font-size-caption, 0.875rem); color: var(--color-text-muted, #4a524b); }
@media (max-width: 479px) {
  .ad-ask__row { flex-direction: column; align-items: stretch; border-radius: var(--radius-lg, 16px); padding: var(--space-2, 8px); }
  .ad-ask__row .ad-btn { width: 100%; }
}

/* ---------- 휴대폰 틀 세로 영상 띠(저절로 흐르지 않음: 가로로 밀어 보기) ---------- */
.ad-reel { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(152px, 196px); align-items: end; gap: var(--space-5, 24px); overflow-x: auto; padding: var(--space-2, 8px) var(--space-4, 16px) var(--space-4, 16px); scroll-padding-inline: var(--space-4, 16px); scroll-snap-type: x mandatory; scrollbar-width: thin; }
.ad-reel:focus-visible { outline: var(--focus-ring, 2px solid #1d3b2a); outline-offset: 4px; }
.ad-phone { margin: 0; scroll-snap-align: start; }
.ad-phone:first-child { width: clamp(184px, 22vw, 248px); }
.ad-phone__frame { position: relative; aspect-ratio: 9 / 19; padding: 8px; border-radius: 32px; background: var(--color-ink, #1b1f1c); }
.ad-phone__screen { position: relative; height: 100%; overflow: hidden; border-radius: 24px; background: var(--color-forest, #1d3b2a); }
.ad-phone__screen > img, .ad-phone__screen > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-phone__empty { position: absolute; inset: 0; display: grid; place-content: center; gap: var(--space-2, 8px); padding: var(--space-4, 16px); text-align: center; color: var(--color-on-primary, #f6f2e9); }
.ad-phone__empty strong { font-family: var(--font-serif, 'Noto Serif KR Sub', 'Gowun Batang', serif); font-size: 1.25rem; font-weight: var(--font-weight-semibold, 600); }
.ad-phone__tag { position: absolute; right: 10px; top: 10px; padding: 2px 8px; border-radius: var(--radius-pill, 999px); font-size: 12px; background: rgba(19, 42, 29, 0.72); color: #f6f2e9; }
.ad-phone__cap { display: flex; justify-content: space-between; gap: var(--space-2, 8px); margin-top: var(--space-3, 12px); font-size: var(--font-size-caption, 0.875rem); color: var(--color-text-muted, #4a524b); }
.ad-phone__cap strong { color: var(--color-text, #1b1f1c); font-weight: var(--font-weight-semibold, 600); }

/* ---------- 숫자·약속 카드(근거 없는 숫자 금지: 숫자 칸은 CONTENT_TODO에서 정해질 때까지 약속 문장) ---------- */
.ad-stats { display: grid; gap: var(--space-4, 16px); }
@media (min-width: 768px) { .ad-stats { grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-5, 24px); } }
.ad-stat { padding: var(--space-6, 32px) var(--space-5, 24px); border-radius: var(--radius-lg, 16px); background: var(--color-cream, #f6f2e9); }
.ad-stat:first-child { background: var(--color-forest, #1d3b2a); color: var(--color-on-primary, #f6f2e9); }
.ad-stat__num { margin: 0; font-family: var(--font-serif, 'Noto Serif KR Sub', 'Gowun Batang', serif); font-size: clamp(2rem, 1.4rem + 2vw, 2.75rem); font-weight: var(--font-weight-semibold, 600); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ad-stat__label { margin: var(--space-3, 12px) 0 0; font-size: 1rem; color: var(--color-text-muted, #4a524b); }
.ad-stat:first-child .ad-stat__label { color: var(--color-on-primary-muted, #c9d7bc); }
.ad-stat__num[data-todo]:empty { display: none; }

/* ---------- 가격표 3단(가운데 추천만 짙은 초록) ---------- */
.ad-pricing { display: grid; gap: var(--space-4, 16px); align-items: stretch; }
@media (min-width: 900px) { .ad-pricing { grid-template-columns: 1fr 1.08fr 1fr; gap: var(--space-5, 24px); align-items: center; } }
.ad-plan { display: grid; gap: var(--space-4, 16px); padding: var(--space-7, 48px) var(--space-6, 32px); border-radius: var(--radius-xl, 24px); background: var(--color-paper, #fcfaf5); text-align: center; }
.ad-plan--featured { background: var(--color-forest, #1d3b2a); color: var(--color-on-primary, #f6f2e9); }
@media (min-width: 900px) { .ad-plan--featured { padding-block: calc(var(--space-7, 48px) + var(--space-5, 24px)); } }
.ad-plan__name { margin: 0; font-size: 1.125rem; font-weight: var(--font-weight-semibold, 600); }
.ad-plan__price { margin: 0; font-family: var(--font-serif, 'Noto Serif KR Sub', 'Gowun Batang', serif); font-size: clamp(2.25rem, 1.6rem + 2vw, 3rem); font-weight: var(--font-weight-semibold, 600); line-height: 1.1; font-variant-numeric: tabular-nums; }
.ad-plan__price small { display: block; margin-top: var(--space-2, 8px); font-family: var(--font-sans, sans-serif); font-size: var(--font-size-caption, 0.875rem); font-weight: var(--font-weight-regular, 400); color: var(--color-text-muted, #4a524b); }
.ad-plan--featured .ad-plan__price small, .ad-plan--featured .ad-plan__list { color: var(--color-on-primary-muted, #c9d7bc); }
.ad-plan__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-2, 8px); font-size: 1rem; color: var(--color-text-muted, #4a524b); }
.ad-plan__pick { margin: 0; font-size: var(--font-size-label, 0.8125rem); font-weight: var(--font-weight-semibold, 600); color: var(--color-on-primary-muted, #c9d7bc); }
.ad-plan .ad-btn { justify-self: center; min-width: 200px; }
.ad-plan--featured .ad-btn--primary { background: var(--color-cream, #f6f2e9); color: var(--color-forest, #1d3b2a); }

/* ---------- 01 → 02 → 03 단계(진짜 순서 목록, 번호는 CSS가 붙임) ---------- */
.ad-steps { counter-reset: ad-step; margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-6, 32px); }
@media (min-width: 768px) { .ad-steps { grid-template-columns: repeat(3, 1fr); gap: var(--space-7, 48px); } }
.ad-steps > li { counter-increment: ad-step; display: grid; gap: var(--space-2, 8px); align-content: start; }
.ad-steps > li::before { content: counter(ad-step, decimal-leading-zero); font-family: var(--font-serif, 'Noto Serif KR Sub', 'Gowun Batang', serif); font-size: 1.75rem; line-height: 1; color: var(--color-primary, #1d3b2a); font-variant-numeric: tabular-nums; }
.ad-steps h3 { margin: var(--space-2, 8px) 0 0; font-size: 1.25rem; font-weight: var(--font-weight-semibold, 600); }
.ad-steps p { margin: 0; color: var(--color-text-muted, #4a524b); max-width: 22em; }

/* ---------- 후기 한 줄(실제 후기가 없으면 data-empty로 자리만 두고 보이지 않음) ---------- */
.ad-quote { margin: 0; max-width: 36em; }
.ad-quote[data-empty] { display: none; }
.ad-quote p { margin: 0; font-family: var(--font-serif, 'Noto Serif KR Sub', 'Gowun Batang', serif); font-size: clamp(1.25rem, 1rem + 1vw, 1.625rem); line-height: 1.5; }
.ad-quote footer { margin-top: var(--space-3, 12px); font-size: var(--font-size-caption, 0.875rem); color: var(--color-text-muted, #4a524b); }

/* ---------- 마지막 짙은 띠 CTA ---------- */
.ad-band { background: var(--color-forest, #1d3b2a); color: var(--color-on-primary, #f6f2e9); padding-block: var(--space-8, 64px); }
@media (min-width: 1200px) { .ad-band { padding-block: var(--space-9, 96px); } }
.ad-band__row { display: grid; gap: var(--space-6, 32px); align-items: center; }
@media (min-width: 900px) { .ad-band__row { grid-template-columns: 1.4fr 1fr; } }
.ad-band__title { margin: 0; font-family: var(--font-serif, 'Noto Serif KR Sub', 'Gowun Batang', serif); font-size: var(--font-size-h1, 2.5rem); font-weight: var(--font-weight-semibold, 600); line-height: 1.2; letter-spacing: -0.02em; }
.ad-band__text { margin: 0 0 var(--space-5, 24px); color: var(--color-on-primary-muted, #c9d7bc); }

/* ---------- 바닥글: 이름이 크게 다시 ---------- */
.ad-foot { padding-block: var(--space-8, 64px) var(--space-6, 32px); background: var(--color-bg, #f6f2e9); }
.ad-foot__name { margin: 0; font-family: var(--font-serif, 'Noto Serif KR Sub', 'Gowun Batang', serif); font-size: clamp(2.5rem, 1.5rem + 5vw, 5.5rem); font-weight: var(--font-weight-semibold, 600); line-height: 1; letter-spacing: -0.02em; color: var(--color-forest, #1d3b2a); }
.ad-foot__links { display: flex; flex-wrap: wrap; gap: var(--space-2, 8px) var(--space-5, 24px); margin-top: var(--space-5, 24px); font-size: var(--font-size-caption, 0.875rem); }
.ad-foot__links a { color: var(--color-text-muted, #4a524b); display: inline-flex; align-items: center; min-height: 44px; }

/* ---------- 거래 흐름 루프 데모(Stageshow 7단계: 720×340, 14초, 진짜 글자 5개, 나머지 회색 줄) ----------
   장면 A 의뢰 등록(0~4.3초) → B 제안 3개 도착(4.3~8.9초) → C 영상 받기(8.9~13.6초) → A로 맞물림.
   되돌림(줄 길이·제안 줄 위치)은 그 장면이 보이지 않을 때만 일어난다(한 프레임 튐 없음). 움직임 줄이기면 결과 장면(C) 정지. */
.ad-flow { position: relative; width: 100%; max-width: 720px; aspect-ratio: 720 / 340; min-height: 300px; overflow: hidden; border-radius: var(--radius-xl, 24px); background: var(--color-sage, #dfe7d5); container-type: inline-size; }
.ad-flow__scene { position: absolute; inset: 0; display: grid; place-items: center; padding: var(--space-5, 24px); animation: 14s linear infinite both; }
.ad-flow__scene--a { animation-name: ad-flow-a; }
.ad-flow__scene--b { animation-name: ad-flow-b; opacity: 0; }
.ad-flow__scene--c { animation-name: ad-flow-c; opacity: 0; }
.ad-flow__card { width: min(100%, 340px); padding: var(--space-5, 24px); border-radius: var(--radius-lg, 16px); background: var(--color-paper, #fcfaf5); box-shadow: var(--shadow-md, 0 12px 32px rgba(27, 31, 28, 0.12)); }
.ad-flow__kicker { margin: 0 0 var(--space-3, 12px); font-size: 13px; font-weight: var(--font-weight-semibold, 600); color: var(--color-primary, #1d3b2a); }
.ad-flow__title { margin: 0 0 var(--space-4, 16px); font-family: var(--font-serif, 'Noto Serif KR Sub', 'Gowun Batang', serif); font-size: 1.25rem; font-weight: var(--font-weight-semibold, 600); }
.ad-flow__line { display: block; height: 10px; margin-top: 10px; border-radius: 5px; background: var(--color-sage-deep, #c9d7bc); transform-origin: left center; }
.ad-flow__line--fill { animation: ad-flow-fill 14s var(--ease-out, ease-out) infinite both; }
.ad-flow__line--fill:nth-of-type(2) { width: 82%; animation-delay: 0.35s; }
.ad-flow__line--fill:nth-of-type(3) { width: 60%; animation-delay: 0.7s; }
.ad-flow__send { display: inline-flex; align-items: center; justify-content: center; margin-top: var(--space-4, 16px); min-height: 36px; padding: 0 var(--space-5, 24px); border-radius: var(--radius-pill, 999px); background: var(--color-forest, #1d3b2a); color: var(--color-on-primary, #f6f2e9); font-size: 14px; font-weight: var(--font-weight-semibold, 600); animation: ad-flow-press 14s linear infinite both; }
.ad-flow__offer { display: flex; align-items: center; gap: var(--space-3, 12px); margin-top: var(--space-3, 12px); padding: var(--space-3, 12px); border-radius: var(--radius-md, 12px); background: var(--color-cream, #f6f2e9); animation: 14s var(--ease-out, ease-out) infinite both; }
.ad-flow__offer:nth-of-type(1) { animation-name: ad-flow-offer1; }
.ad-flow__offer:nth-of-type(2) { animation-name: ad-flow-offer2; }
.ad-flow__offer:nth-of-type(3) { animation-name: ad-flow-offer3; }
.ad-flow__ava { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--color-sage-deep, #c9d7bc); }
.ad-flow__offer:nth-of-type(1) .ad-flow__ava { background: var(--color-forest, #1d3b2a); }
.ad-flow__offer .ad-flow__line { flex: 1; margin: 0; }
.ad-flow__phone { width: 132px; aspect-ratio: 9 / 16; padding: 6px; border-radius: 22px; background: var(--color-ink, #1b1f1c); animation: ad-flow-rise 14s var(--ease-out, ease-out) infinite both; }
.ad-flow__screen { position: relative; height: 100%; border-radius: 16px; overflow: hidden; background: var(--color-forest, #1d3b2a); display: grid; place-items: center; }
.ad-flow__screen > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad-flow__check { position: relative; width: 44px; height: 44px; border-radius: 50%; background: var(--color-cream, #f6f2e9); animation: ad-flow-check 14s var(--ease-out, ease-out) infinite both; }
.ad-flow__check::after { content: ''; position: absolute; left: 16px; top: 11px; width: 9px; height: 17px; border: solid var(--color-forest, #1d3b2a); border-width: 0 3px 3px 0; transform: rotate(45deg); }
.ad-flow__result { display: grid; justify-items: center; gap: var(--space-3, 12px); }
.ad-flow__caption { margin: 0; font-size: 14px; font-weight: var(--font-weight-semibold, 600); color: var(--color-text, #1b1f1c); }
.ad-flow__steps { position: absolute; left: var(--space-5, 24px); bottom: var(--space-4, 16px); display: flex; gap: 6px; }
.ad-flow__dot { width: 24px; height: 4px; border-radius: 2px; background: rgba(29, 59, 42, 0.2); }
.ad-flow__dot::after { content: ''; display: block; height: 100%; border-radius: 2px; background: var(--color-forest, #1d3b2a); transform-origin: left center; animation: 14s linear infinite both; }
.ad-flow__dot:nth-child(1)::after { animation-name: ad-flow-dot1; }
.ad-flow__dot:nth-child(2)::after { animation-name: ad-flow-dot2; }
.ad-flow__dot:nth-child(3)::after { animation-name: ad-flow-dot3; }
@keyframes ad-flow-a { 0%, 28% { opacity: 1; } 31%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes ad-flow-b { 0%, 28% { opacity: 0; } 31%, 61% { opacity: 1; } 64%, 100% { opacity: 0; } }
@keyframes ad-flow-c { 0%, 61% { opacity: 0; } 64%, 94% { opacity: 1; } 97%, 100% { opacity: 0; } }
@keyframes ad-flow-fill { 0%, 3% { transform: scaleX(0.06); } 16%, 33% { transform: scaleX(1); } 34%, 100% { transform: scaleX(0.06); } }
@keyframes ad-flow-press { 0%, 19% { transform: scale(1); } 20% { transform: scale(0.95); } 22%, 100% { transform: scale(1); } }
@keyframes ad-flow-offer1 { 0%, 31% { opacity: 0; transform: translateY(8px); } 34%, 64% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes ad-flow-offer2 { 0%, 34% { opacity: 0; transform: translateY(8px); } 37%, 64% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes ad-flow-offer3 { 0%, 37% { opacity: 0; transform: translateY(8px); } 40%, 64% { opacity: 1; transform: none; } 66%, 100% { opacity: 0; transform: translateY(8px); } }
@keyframes ad-flow-rise { 0%, 62% { transform: translateY(14px); } 68%, 97% { transform: none; } 98%, 100% { transform: translateY(14px); } }
@keyframes ad-flow-check { 0%, 72% { opacity: 0; transform: scale(0.9); } 76%, 97% { opacity: 1; transform: none; } 98%, 100% { opacity: 0; transform: scale(0.9); } }
@keyframes ad-flow-dot1 { 0% { transform: scaleX(0); } 31%, 96% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes ad-flow-dot2 { 0%, 31% { transform: scaleX(0); } 64%, 96% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes ad-flow-dot3 { 0%, 64% { transform: scaleX(0); } 96% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.ad-flow.is-paused *, .ad-flow.is-paused { animation-play-state: paused !important; }
@container (max-width: 420px) { .ad-flow__card { padding: var(--space-4, 16px); } .ad-flow__phone { width: 112px; } }
@media (prefers-reduced-motion: reduce) {
  .ad-flow *, .ad-flow { animation: none !important; }
  .ad-flow__scene--a, .ad-flow__scene--b { opacity: 0; }
  .ad-flow__scene--c { opacity: 1; }
  .ad-flow__dot::after { transform: scaleX(1); }
}

/* 휴대폰: 영상 띠는 옆으로 밀지 않고 두 칸 격자(가장자리에서 잘리는 카드 없음, Impeccable edge-flush-cards) */
@media (max-width: 599px) {
  .ad-reel { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; padding-inline: 0; scroll-snap-type: none; }
  .ad-phone:first-child { width: auto; grid-column: span 2; max-width: 240px; justify-self: center; }
}

/* ---------- 테라코타 포인트 버튼(선택, 한 화면에 하나: 주 버튼을 이것으로 바꿀 때만) ---------- */
.ad-btn--accent { background: var(--color-terracotta, #a64b2a); color: var(--color-on-primary, #f6f2e9); }
@media (hover: hover) { .ad-btn--accent:hover { background: var(--color-terracotta-deep, #8a3c20); } }

/* ---------- 조건 막대(첫 화면 아래에 붙음, 대표 참고 ref-03): 업종 · 영상 길이 · 예산 · 받을 날짜 + 의뢰 시작. 스크립트 없이 request.html?…로 간다 ---------- */
.ad-filter { display: grid; gap: var(--space-2, 8px); padding: var(--space-3, 12px); border-radius: var(--radius-xl, 24px); background: var(--color-paper, #fcfaf5); border: var(--border-width, 1px) solid var(--color-line, #d8d2c4); }
@media (min-width: 900px) { .ad-filter { grid-template-columns: repeat(4, minmax(0, 1fr)) auto; align-items: stretch; gap: 0; padding: var(--space-2, 8px); border-radius: var(--radius-pill, 999px); } }
.ad-filter__field { display: grid; gap: 2px; padding: var(--space-2, 8px) var(--space-4, 16px); border-radius: var(--radius-md, 12px); }
@media (min-width: 900px) { .ad-filter__field + .ad-filter__field { border-left: var(--border-width, 1px) solid var(--color-line, #d8d2c4); border-radius: 0; } }
.ad-filter__label { font-size: var(--font-size-label, 0.8125rem); font-weight: var(--font-weight-semibold, 600); color: var(--color-text, #1b1f1c); }
.ad-filter__input { min-height: 44px; border: 0; padding: 0; background: transparent; font: inherit; font-size: 1rem; color: var(--color-text-muted, #4a524b); }
.ad-filter__input:focus { outline: none; }
.ad-filter__input::placeholder { color: #6b7169; }
.ad-filter__field:focus-within { background: var(--color-primary-soft, #e3ebe0); }
.ad-filter .ad-btn { align-self: center; margin: var(--space-1, 4px); }

/* ---------- 벤토 격자(업종별 예시 영상을 크기 다르게 엮음, 대표 참고 ref-07). 칸마다 → 둥근 단추 ---------- */
.ad-bento { display: grid; gap: var(--space-3, 12px); grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 160px; }
@media (min-width: 900px) { .ad-bento { grid-template-columns: repeat(4, minmax(0, 1fr)); grid-auto-rows: 200px; gap: var(--space-4, 16px); } .ad-bento__cell--tall { grid-row: span 2; } .ad-bento__cell--wide { grid-column: span 2; } }
.ad-bento__cell { position: relative; overflow: hidden; border-radius: var(--radius-lg, 16px); background: var(--color-forest, #1d3b2a); color: var(--color-on-primary, #f6f2e9); text-decoration: none; display: block; }
.ad-bento__cell:first-child { grid-column: span 2; }
.ad-bento__cell > img, .ad-bento__cell > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ad-bento__cell:nth-child(even):not(:has(img)) { background: var(--color-sage-deep, #c9d7bc); color: var(--color-text, #1b1f1c); }
.ad-bento__text { position: absolute; left: var(--space-4, 16px); right: 64px; bottom: var(--space-4, 16px); display: grid; gap: 2px; }
.ad-bento__text strong { font-family: var(--font-serif, 'Noto Serif KR Sub', 'Gowun Batang', serif); font-size: 1.125rem; font-weight: var(--font-weight-semibold, 600); }
.ad-bento__text span { font-size: var(--font-size-caption, 0.875rem); opacity: 0.9; }
.ad-bento__cell:has(img) .ad-bento__text { padding: var(--space-2, 8px) var(--space-3, 12px); border-radius: var(--radius-md, 12px); background: rgba(19, 42, 29, 0.72); right: auto; }
.ad-bento__go { position: absolute; right: var(--space-3, 12px); bottom: var(--space-3, 12px); display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--color-cream, #f6f2e9); color: var(--color-forest, #1d3b2a); transition: transform var(--duration-fast, 160ms) var(--ease-out, ease-out); }
@media (hover: hover) { .ad-bento__cell:hover .ad-bento__go { transform: translateX(2px); } }

/* ---------- 예시 영상 "소리 켜기" 단추(FIX43, components.js가 [data-sound] 영상마다 하나 붙임) ---------- */
/* 11/06 영상 단추: 동그란 그림 단추 두 개(음소거·재생) — 소리는 data-pos 모서리, 재생은 그 옆 */
.ad-sound, .ad-play { position: absolute; left: 10px; bottom: 10px; z-index: 2; display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: rgba(19, 42, 29, 0.78); color: #f6f2e9; cursor: pointer; }
.ad-play { left: 60px; }
.ad-sound:hover, .ad-play:hover { background: rgba(19, 42, 29, 0.92); }
.ad-sound:focus-visible, .ad-play:focus-visible { outline: var(--focus-ring, 2px solid #f6f2e9); outline-offset: 2px; }

/* FIX45 캔버스(자유 배치) 부품: 판은 비율대로 커지고 작아지고, 요소는 판 기준 %. 글자는 판 폭 비례(cqw) + 최소 14px.
   휴대폰(≤480)은 기본 자동 쌓기(큰 제목·핵심 그림·버튼 우선, 위→아래, 좌우 16px), 대표가 손본 휴대폰 판이 있으면 그 판. */
.ad-canvas { position: relative; padding: 0; }
.ad-canvas__board { position: relative; width: 100%; max-width: 1440px; margin: 0 auto; overflow: hidden; container-type: inline-size; }
.ad-canvas__item { position: absolute; box-sizing: border-box; margin: 0; overflow: hidden; font-size: max(14px, calc(var(--cv-fs, 1.6) * 1cqw)); line-height: 1.25; overflow-wrap: anywhere; word-break: keep-all; }
.ad-canvas__item--text { overflow: visible; text-wrap: balance; }
.ad-canvas__item--button { display: flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 1.2em; text-decoration: none; font-weight: 700; }
.ad-canvas__item--image img, .ad-canvas__item--video video, .ad-canvas__item--logo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ad-canvas__item--icon svg { width: 100%; height: 100%; }
.ad-canvas__item[data-shape="circle"] { border-radius: 50%; }
.ad-canvas__item[data-shape="line"] { height: 2px !important; background: currentColor; }
.ad-canvas__empty { display: grid; place-items: center; width: 100%; height: 100%; border: 2px dashed #9aa79c; border-radius: inherit; color: #4a524b; font-size: 14px; text-align: center; padding: 8px; box-sizing: border-box; background: rgba(255,255,255,.5); }
@media (max-width: 480px) {
  .ad-canvas:not(.ad-canvas--manual-mobile) .ad-canvas__board { aspect-ratio: auto !important; display: flex; flex-direction: column; gap: 12px; padding: 24px 16px; }
  .ad-canvas:not(.ad-canvas--manual-mobile) .ad-canvas__item { position: static; width: auto !important; height: auto !important; transform: none !important; order: var(--cv-mo, 99); }
  .ad-canvas:not(.ad-canvas--manual-mobile) .ad-canvas__item--bg { position: absolute; inset: 0; width: 100% !important; height: 100% !important; z-index: 0 !important; }
  .ad-canvas:not(.ad-canvas--manual-mobile) .ad-canvas__item:not(.ad-canvas__item--bg) { position: relative; z-index: 1 !important; }
  .ad-canvas:not(.ad-canvas--manual-mobile) .ad-canvas__item--video, .ad-canvas:not(.ad-canvas--manual-mobile) .ad-canvas__item--image { aspect-ratio: 9 / 16; max-height: 70vh; width: 70% !important; align-self: center; }
  .ad-canvas:not(.ad-canvas--manual-mobile) .ad-canvas__item--text { font-size: max(16px, calc(var(--cv-fs, 1.6) * 2.2cqw)); }
  .ad-canvas:not(.ad-canvas--manual-mobile) .ad-canvas__item--button { min-height: 48px; }
  .ad-canvas__item--icon, .ad-canvas__item[data-shape]:not(.ad-canvas__item--bg) { display: none; }
}
@media (min-width: 481px) and (max-width: 1023px) { .ad-canvas__item { font-size: max(14px, calc(var(--cv-fs, 1.6) * 1cqw)); } }

/* 짙은 띠(.ad-band) 위 강조 글자·테두리 단추: 기본은 숲 초록이라 띠와 같은 색이 되어 안 보였다(11/06) */
.ad-band .ad-accent { color: var(--color-sage-deep, #c9d7bc); }
.ad-band .ad-btn--secondary { color: var(--color-cream, #f6f2e9); border-color: var(--color-cream, #f6f2e9); }
@media (hover: hover) { .ad-band .ad-btn--secondary:hover { background: rgba(246, 242, 233, 0.12); } }
/* FIX50 A "소리 켜기" 단추 자리(영상의 data-sound-pos: br·tl·tr, off면 단추 없음). 큰 영상(히어로) 기본은 오른쪽 위 */
.ad-sound[data-pos="br"] { left: auto; right: 10px; }
.ad-sound[data-pos="tl"] { bottom: auto; top: 10px; }
.ad-sound[data-pos="tr"] { left: auto; right: 10px; bottom: auto; top: 10px; }
.ad-play[data-pos="br"] { left: auto; right: 60px; }
.ad-play[data-pos="tl"] { bottom: auto; top: 10px; }
.ad-play[data-pos="tr"] { left: auto; right: 60px; bottom: auto; top: 10px; }