/* 첫 화면(index.html) 전용. 카드 295: 민경 시안 design/landing-home.html(카드 294 · A안)의 페이지 스타일을 그대로 옮김.
   다이얼 변화 5 · 움직임 3 · 밀도 3. 색·간격·글자는 tokens.css 변수만. 부품은 components/components.css.
   테라코타는 한 곳: 한 줄 의뢰 '의뢰 시작' 버튼. 짙은 숲색 면은 한 곳: 마지막 띠(.ad-band). */
*, *::before, *::after { box-sizing: border-box; }

/* 섹션 위 작은 표제: 모든 폭에서 13px 이상 */
.ad-page .ad-label { font-size: max(13px, var(--font-size-label)); }

/* 머리말 로그인: 테라코타 '의뢰 시작'이 있는 화면이라 채움 없이 테두리 알약(.ad-btn--secondary 무게) */
.ad-head .acct-login { background: transparent; color: var(--color-primary); border: var(--border-width) solid var(--color-primary); }
@media (hover: hover) { .ad-head .acct-login:hover { background: var(--color-primary-soft); } }
/* 머리말 '회원가입': 메뉴 글자와 같은 크기·색, 누르는 높이 48px */
.ad-head .acct-join { min-height: 48px; padding: 0 var(--space-2); font-size: var(--font-size-body); font-weight: var(--font-weight-medium); color: var(--color-text); }
.ad-head .acct-join:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (max-width: 420px) { .ad-head .acct-join { padding: 0 var(--space-1); } }

/* 휴대폰 메뉴(768px 미만): 스크립트 없이 열리는 details. 단추 48px */
.h-menu { position: relative; flex: none; }
.h-menu__btn { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: var(--radius-pill); color: var(--color-text); cursor: pointer; list-style: none; }
.h-menu__btn::-webkit-details-marker { display: none; }
.h-menu__btn:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
.h-menu[open] .h-menu__btn { background: var(--color-sage); }
.h-menu__bars { display: grid; gap: 4px; width: 20px; }
.h-menu__bars span { display: block; height: 2px; border-radius: 1px; background: currentColor; }
.h-menu__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.h-menu__panel { position: absolute; right: 0; top: calc(100% + var(--space-2)); z-index: 2; display: grid; min-width: 180px; padding: var(--space-2); border-radius: var(--radius-lg); background: var(--color-paper); box-shadow: var(--shadow-md); }
.h-menu__panel a { display: flex; align-items: center; min-height: 48px; padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--color-text); font-weight: var(--font-weight-semibold); text-decoration: none; }
.h-menu__panel a:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
@media (hover: hover) { .h-menu__panel a:hover { background: var(--color-sage); } }
@media (max-width: 767px) { .ad-head__row { gap: var(--space-2); } }
.ad-head .h-menu__join { display: none; } /* 회원가입은 머리말에 늘 보이므로 메뉴 안에는 두지 않는다(FIX40) */
@media (min-width: 768px) { .h-menu { display: none; } }

/* 바닥글 링크: 본문 크기, 누르는 높이 48px. 링크 사이 24px.
   base.css가 휴대폰에서 nav에 주는 좌우 16px를 바닥 메뉴에서만 0으로 → 'Aednoa'와 같은 시작선 */
.ad-foot__links { font-size: var(--font-size-body); gap: 0 var(--space-5); }
.ad-foot__links a { min-height: 48px; }
@media (max-width: 767px) {
  .ad-foot__links { flex-direction: column; align-items: flex-start; gap: 0; padding-inline: 0; }
}

/* ① 첫 화면: 제목 → 한 줄 의뢰 → 제작자 글자 링크 / 넓은 화면에서 오른쪽 큰 예시 영상 */
.h-hero { padding-block: var(--space-5) var(--space-7); }
.h-hero__grid { display: grid; gap: var(--space-6); }
.h-hero__text { display: grid; gap: var(--space-5); align-content: start; }
.h-hero .ad-ask { max-width: none; width: 100%; }
.h-hero__media { margin: 0; }
.h-hero__media .video-thumb { --radius: var(--radius-xl); }
.h-hero__media figcaption { margin-top: var(--space-3); font-size: var(--font-size-caption); color: var(--color-text-muted); }
/* 카페 사진 오른쪽 아래 AI 생성 표시를 잘라 냄 — 왼쪽 기준 1.16배 */
.h-hero__media .video-thumb > img, .h-hero__media .video-thumb > video { transform: scale(1.16); transform-origin: 0 50%; }
.h-hero__media .video-thumb:hover > img, .h-hero__media .video-thumb:focus-visible > img { transform: scale(1.19); }
.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; }

/* ② 두 갈래 입구 카드(카드 299): 첫 화면 바로 아래, 크림 바탕 그대로. 부품 .ad-doors 모양은 components.css */
.h-doors-sec { padding-block: 0 var(--space-7); }
.h-doors-sec .ad-door { min-width: 0; min-height: 0; padding-block: var(--space-6); }
/* 카드 제목은 가이드의 작은 제목(명조 600, 22px): 섹션 제목(26~36px)보다 한 단계 아래 */
.h-doors-sec .ad-door__title { font-family: var(--font-heading); font-size: 1.375rem; font-weight: var(--font-weight-semibold); line-height: 1.3; }
/* 넓은 화면은 첫 화면 영상 설명 줄이 아래로 떠 있어 카드 위에 48px를 따로 둔다 */
@media (min-width: 900px) { .h-doors-sec { padding-top: var(--space-7); } }
.h-doors-sec .ad-door:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* 숲색 면은 한 화면 한 곳(맨 아래 띠)만: 광고주 카드는 종이색, 제작자 카드는 세이지.
   테라코타 '의뢰 시작'과 같은 화면이라 두 버튼 모두 채움 없는 테두리 알약 */
.h-doors-sec .ad-door--adv { background: var(--color-paper); color: var(--color-text); }
.h-doors-sec .ad-door--adv .ad-door__desc { color: var(--color-text-muted); }
.h-doors-sec .ad-door__go,
.h-doors-sec .ad-door--adv .ad-door__go,
.h-doors-sec .ad-door--creator .ad-door__go { background: transparent; color: var(--color-primary); border: var(--border-width) solid var(--color-primary); }
@media (hover: hover) {
  .h-doors-sec .ad-door--adv:hover { background: var(--color-primary-soft); }
}
@media (min-width: 1200px) { .h-doors-sec { padding-bottom: var(--space-8); } }

/* ③ 예시 영상 띠: 세이지, 베젤 없는 9:16 썸네일 틀 2개(240 : 170). 업종은 왼쪽 아래, 길이는 오른쪽 아래 */
.h-reel__grid { display: grid; gap: var(--space-6); }
.h-reel__grid .ad-sechead { margin-bottom: 0; }
/* 썸네일 줄 기본값(폭별 정렬은 아래 미디어 쿼리) */
.h-reel .ad-reel { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: auto; justify-content: start; align-items: end; gap: var(--space-4); padding: 0; }
.h-reel__item { --radius: var(--radius-lg); aspect-ratio: 9 / 16; scroll-snap-align: start; }
.h-reel__item:first-child { width: 240px; }
.h-reel__item + .h-reel__item { width: 170px; }
/* 둘째 장면 오른쪽 아래 AI 생성 표시를 위 기준 1.16배로 잘라 냄 */
.h-reel .h-reel__item:nth-child(2) > img { transform: scale(1.16); transform-origin: 50% 0; }
.h-reel__more { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-primary); font-weight: var(--font-weight-semibold); }
/* 휴대폰: 가로로 넘겨 보기. 한 장을 넓게(칸 폭 62%), 둘째 장은 반쯤 보여 넘길 수 있음을 알림 */
@media (max-width: 599px) {
  .h-reel .ad-reel { grid-auto-flow: column; grid-template-columns: none; grid-auto-columns: 62%; align-items: start; overflow-x: auto; overscroll-behavior-x: contain; margin-inline: 0; padding: 0; scroll-snap-type: x mandatory; gap: var(--space-3); }
  .h-reel__item:first-child, .h-reel__item + .h-reel__item { width: 100%; }
  .h-reel .ad-reel:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
}
/* 600px 이상: 두 장의 윗선 기준, 작은 장은 96px 아래에서 시작 */
@media (min-width: 600px) {
  .h-reel .ad-reel { align-items: start; }
  .h-reel__item + .h-reel__item { margin-top: var(--space-9); }
}

/* ⑤ 01→02→03 + 거래 흐름 데모 */
.h-steps__grid { display: grid; gap: var(--space-7); align-items: start; }
.h-steps .ad-steps { grid-template-columns: 1fr; gap: var(--space-6); }
.h-steps .ad-sechead { margin-bottom: var(--space-6); }
/* 01·02·03은 작은 표기 단계(14px, 숲색, 본문 글꼴): 단계 제목이 먼저 읽히게 */
.h-steps .ad-steps > li::before { font-family: var(--font-sans); font-size: var(--font-size-caption); font-weight: var(--font-weight-semibold); line-height: 1.4; color: var(--color-primary); }
.h-steps .ad-steps h3 { margin-top: 0; }
/* 세이지 패널 없이 종이 카드를 크림 바탕에 바로(카드 안 카드 금지). 카드는 오른쪽 칸 폭을 다 채우고 윗선은 '01'과 맞춤 */
.h-steps .ad-flow { max-width: none; aspect-ratio: auto; min-height: 0; border-radius: var(--radius-lg); background: transparent; align-self: start; }
.h-steps .ad-flow__scene { padding: 0; place-items: start stretch; align-content: start; justify-content: stretch; }
.h-steps .ad-flow__scene--a { position: relative; }
.h-steps .ad-flow__card { width: 100%; box-shadow: none; }
.h-steps .ad-flow__scene--c { place-items: center; }
/* 의뢰서 예시: 누르는 단추 없이 세 칸(제목·예산·납기)만 보인다 */
/* 안쪽 칸 바탕 없이(카드 안 카드 금지) '필요한 만큼 골라요' 표처럼 위아래 1px 선으로만 나눔 */
.h-flow__fields { margin: 0; display: grid; }
.h-flow__fields div { display: grid; grid-template-columns: 80px 1fr; align-items: baseline; gap: var(--space-3); padding-block: var(--space-3); border-top: var(--border-width) solid var(--color-line); }
.h-flow__fields div:last-child { border-bottom: var(--border-width) solid var(--color-line); }
.h-flow__fields dt { font-size: 13px; font-weight: var(--font-weight-semibold); color: var(--color-text-muted); }
.h-flow__fields dd { margin: 0; font-size: 15px; color: var(--color-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h-flow__fields div:first-child dd { font-family: var(--font-heading); font-weight: var(--font-weight-semibold); color: var(--color-primary); }
/* 영상 받기 화면: 세이지 화면 위 숲색 확인 표시만 */
.h-steps .ad-flow__screen { background: var(--color-sage); }
.h-steps .ad-flow__check { background: var(--color-primary); box-shadow: none; }
.h-steps .ad-flow__check::after { border-color: var(--color-on-primary); }

/* ⑥ 포함 내용 비교 한 줄(가격 확정 전, 금액 칸 없음) */
.h-plans__row { display: grid; gap: var(--space-6); align-items: start; }
.h-plans__row .ad-sechead { margin-bottom: 0; }
.h-plans__list { margin: 0; padding: 0; list-style: none; display: grid; }
.h-plans__list li { display: grid; grid-template-columns: 80px 1fr; align-items: baseline; gap: var(--space-3); padding-block: var(--space-3); border-top: var(--border-width) solid var(--color-line); }
.h-plans__list li:last-child { border-bottom: var(--border-width) solid var(--color-line); }
.h-plans__list strong { font-family: var(--font-heading); font-size: 1.125rem; font-weight: var(--font-weight-semibold); color: var(--color-primary); }
.h-plans__list span { color: var(--color-text); }
/* 휴대폰: 설명이 오른쪽 여백 가까이 붙지 않게 두 줄로(keep-all, ' · '에서 끊김) */
@media (max-width: 599px) { .h-plans__list span { max-width: 15em; } }

/* ⑦ 띠 안의 제작자 글자 링크 */
.h-band__alt { margin: var(--space-4) 0 0; color: var(--color-on-primary-muted); font-size: var(--font-size-small); }
.h-band__alt a { display: inline-flex; align-items: center; min-height: 44px; color: var(--color-on-primary); font-weight: var(--font-weight-semibold); }

@media (min-width: 600px) {
  .h-reel .ad-reel { overflow: visible; padding-inline: 0; scroll-snap-type: none; gap: var(--space-6); }
}
@media (min-width: 1200px) {
  .h-reel__item:first-child { width: 260px; }
  .h-reel__item + .h-reel__item { width: 190px; }
}
@media (min-width: 900px) {
  /* 썸네일 아랫선 = 한 줄 의뢰 안내 줄. 설명 글은 썸네일 아래로 띄워 줄 맞춤에서 뺌 */
  .h-hero__grid { grid-template-columns: 7fr 5fr; gap: var(--space-7); align-items: end; }
  .h-hero__media { position: relative; }
  .h-hero__media figcaption { position: absolute; top: 100%; left: 0; right: 0; }
  /* 11/06 대표: 영상 아래 끝을 검색 칸 아래 끝과 같은 높이로(위아래로만 — 안내 한 줄 + 간격만큼 올림) */
  .h-hero__media { margin-bottom: calc(var(--font-size-caption) * 1.7 + var(--space-2) + 14px); } /* 11/06 B: 아래 꺾쇠 끝(영상 + 14px)을 검색 칸 아래 끝에 */
  .h-hero .ad-ask__hint { line-height: 1.7; }
  /* 글 묶음은 세로 썸네일 두 장의 가운데에 맞춤(위쪽에만 붙어 아래가 비지 않게). 제목은 다른 섹션과 같은 36px.
     내용이 적은 두 섹션(세로 예시·고르는 단위)은 위아래 80px */
  .h-reel__grid { grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-8); align-items: center; }
  .h-reel.ad-section, .h-plans.ad-section { padding-block: calc(var(--space-8) + var(--space-4)); }
  .h-reel .ad-title { font-size: var(--font-size-h2); }
  .h-steps__grid { grid-template-columns: 5fr 7fr; }
  .h-plans__row { grid-template-columns: 5fr 7fr; gap: var(--space-8); }
  /* 목록 첫 줄 = 라벨 '고르는 단위' 높이(첫 칸 위 선·위 여백 없앰) */
  .h-plans__list li:first-child { border-top: 0; padding-top: 0; }
}
@media (min-width: 1200px) {
  .h-hero { padding-block: var(--space-6) var(--space-8); }
  .h-hero__grid { grid-template-columns: 6fr 5fr; gap: var(--space-8); }
  /* 모든 폭 16:9(가로 20초 영상) */
  .h-hero__media .video-thumb { aspect-ratio: 16 / 9; height: auto; }
}

/* 11/06 대표: 첫 화면 "제안 3개 도착" — 아래 제안부터 차례로(역방향). components.css는 디자인 탭이 덮어쓰므로 여기서 */
.h-steps .ad-flow__offer:nth-of-type(1) { animation-name: ad-flow-offer3; }
.h-steps .ad-flow__offer:nth-of-type(3) { animation-name: ad-flow-offer1; }
/* 11/06 세로 예시 영상(화장품·꽃집): 영상이라 재생 표시 대신 소리 단추(오른쪽 위) */
.h-reel__item > video { background: var(--color-forest); }
/* 11/06 대표: 진행 순서 "영상 받기" 휴대폰이 아래가 잘려 보이던 것 — 그림 칸 높이 안에 휴대폰·글자가 다 들어가게 */
.h-steps .ad-flow__scene--c .ad-flow__phone { width: 100px; }
.h-steps .ad-flow { min-height: 300px; } /* 11/06: 제안 3개 카드가 아래 잘리지 않게(전엔 236) */
/* 11/06 대표 확정(채팅 Claude 시안): 배경 문양·선 (바탕색이 바뀌는 곳마다 다르게) — 숲색 한 가지를 아주 옅게, 물결·덩어리·그라데이션 없음 */
:root { --deco: 29, 59, 42; }
.h-hero, .h-doors-sec, .h-reel, .h-steps, .h-plans, .ad-band { position: relative; isolation: isolate; }
.h-hero::before, .h-doors-sec::before, .h-reel::before, .h-steps::before, .h-plans::before, .ad-band::before { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none; }

/* ① 크림(첫 화면+두 갈래): 콘티 격자 — 56px 가는 선, 오른쪽 위(영상 쪽)에서 진하고 아래로 사라짐 */
.h-hero::before, .h-doors-sec::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;
}
.h-hero::before { -webkit-mask-image: radial-gradient(120% 110% at 78% 30%, #000 30%, transparent 75%); mask-image: radial-gradient(120% 110% at 78% 30%, #000 30%, transparent 75%); }
.h-doors-sec::before { -webkit-mask-image: linear-gradient(#000, transparent 70%); mask-image: linear-gradient(#000, transparent 70%); opacity: .55; }
/* 영상 둘레 촬영 프레임(모서리 꺾쇠 4개, 영상 바깥 12px) */
/* 11/06: 꺾쇠를 영상 칸(.h-hero__frame)에 딱 맞춤 — 전에는 그림 설명 줄까지 쳐서 아래가 영상 안으로 들어갔음 */
.h-hero__frame { position: relative; }
.h-hero__media figcaption { margin-top: 24px; }
.h-hero__frame::before { content: ''; position: absolute; inset: -14px; z-index: 1; pointer-events: none; --c: rgba(var(--deco), .5);
  background:
    linear-gradient(var(--c), var(--c)) left top / 28px 2px no-repeat, linear-gradient(var(--c), var(--c)) left top / 2px 28px no-repeat,
    linear-gradient(var(--c), var(--c)) right top / 28px 2px no-repeat, linear-gradient(var(--c), var(--c)) right top / 2px 28px no-repeat,
    linear-gradient(var(--c), var(--c)) left bottom / 28px 2px no-repeat, linear-gradient(var(--c), var(--c)) left bottom / 2px 28px no-repeat,
    linear-gradient(var(--c), var(--c)) right bottom / 28px 2px no-repeat, linear-gradient(var(--c), var(--c)) right bottom / 2px 28px no-repeat; }
/* 업종 흐름 띠(움직임: 왼쪽으로 천천히 흐름) */
.deco-marquee { overflow: hidden; border-block: 1px solid rgba(var(--deco), .14); padding: 14px 0; white-space: nowrap; }
.deco-marquee > span { display: inline-block; font-family: var(--font-serif, serif); font-size: 22px; letter-spacing: .02em; color: rgba(var(--deco), .55); }
.deco-marquee > span i { font-style: normal; display: inline-block; margin: 0 22px; width: 6px; height: 6px; border-radius: 50%; background: rgba(var(--deco), .35); vertical-align: middle; }

/* ② 세이지(세로 예시 영상): 필름 띠 — 위·아래 가장자리 구멍 줄 + 아주 옅은 세로 칸선 (움직임: 구멍 줄이 옆으로 흐름) */
.h-reel::before {
  background-image:
    radial-gradient(circle, transparent 0, transparent 0),
    linear-gradient(90deg, rgba(var(--deco), .06) 1px, transparent 1px);
  background-size: auto, 132px 100%;
}
.h-reel::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); }

/* ③ 크림(진행 순서): 점 격자 + 01→02→03을 잇는 세로 줄 (움직임: 내려가며 줄이 그려짐) */
.h-steps::before {
  background-image: radial-gradient(rgba(var(--deco), .16) 1.2px, transparent 1.6px); background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(80% 90% at 85% 55%, #000 25%, transparent 70%); mask-image: radial-gradient(80% 90% at 85% 55%, #000 25%, transparent 70%);
}
.h-steps .ad-steps { position: relative; }
.h-steps .ad-steps > li { position: relative; padding-left: 36px; }
.h-steps .ad-steps::before { content: ''; position: absolute; left: 6px; top: 10px; bottom: 40px; width: 2px; background: linear-gradient(rgba(var(--deco), .5), rgba(var(--deco), .15)); border-radius: 2px; }
.h-steps .ad-steps > li::after { content: ''; position: absolute; left: 0; top: 4px; width: 14px; height: 14px; border-radius: 50%; background: var(--color-bg, #eef1f1); border: 2px solid rgba(var(--deco), .7); box-sizing: border-box; }

/* ④ 세이지(고르는 단위): 45° 가는 빗금, 오른쪽만 */
.h-plans::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%);
}

/* ⑤ 짙은 초록(마지막 띠): 버튼 뒤에서 퍼지는 가는 동심원 (움직임: 천천히 밖으로 퍼지며 사라짐) */
.ad-band { overflow: hidden; }
.ad-band::before {
  background-image: repeating-radial-gradient(circle at 63% 50%, rgba(238, 241, 241, .09) 0 1px, transparent 1px 46px);
  -webkit-mask-image: radial-gradient(60% 120% at 63% 50%, #000 20%, transparent 70%); mask-image: radial-gradient(60% 120% at 63% 50%, #000 20%, transparent 70%);
}

/* ---- 움직임(움직임 줄이기 설정이면 모두 멈춤) ---- */
@media (prefers-reduced-motion: no-preference) {
  /* 업종 흐름 띠: 40초에 한 바퀴 왼쪽으로 */
  .deco-marquee > span { animation: deco-marquee 40s linear infinite; }
  @keyframes deco-marquee { to { transform: translateX(-50%); } }
  /* 첫 화면 격자: 아주 천천히 비스듬히 흐름 */
  .h-hero::before { animation: deco-grid 30s linear infinite; }
  @keyframes deco-grid { to { background-position: 55px 55px; } }
  /* 촬영 프레임: 처음에 바깥에서 영상 쪽으로 맞춰 들어옴(초점 맞추듯), 그다음 숨쉬기 */
  .h-hero__frame::before { animation: deco-focus 1.2s cubic-bezier(.16,1,.3,1) both, deco-breathe 4s 1.2s ease-in-out infinite; }
  @keyframes deco-focus { from { transform: scale(1.08); opacity: 0; } }
  @keyframes deco-breathe { 50% { transform: scale(1.015); } }
  /* 필름 띠: 구멍 줄이 옆으로 흐름 */
  .h-reel::after { animation: deco-film 6s linear infinite; }
  @keyframes deco-film { to { background-position: 26px 0, 26px 100%; } }
  /* 진행 순서: 줄이 위에서 아래로 그려지고 점이 차례로 채워짐 */
  .h-steps .ad-steps::before { transform-origin: top; transform: scaleY(0); }
  .h-steps.is-in .ad-steps::before { transform: none; animation: deco-draw 2.4s cubic-bezier(.16,1,.3,1) both; }
  @keyframes deco-draw { from { transform: scaleY(0); } }
  .h-steps.is-in .ad-steps > li::after { animation: deco-dot 2.4s both; }
  .h-steps.is-in .ad-steps > li:nth-child(1)::after { animation-delay: .2s; }
  .h-steps.is-in .ad-steps > li:nth-child(2)::after { animation-delay: .9s; }
  .h-steps.is-in .ad-steps > li:nth-child(3)::after { animation-delay: 1.6s; }
  @keyframes deco-dot { 0% { background: var(--color-bg, #eef1f1); } 20%, 100% { background: rgba(var(--deco), .9); } }
  /* 마지막 띠: 동심원이 버튼에서 밖으로 천천히 퍼짐 */
  .ad-band::before { inset: -46px; transform-origin: 63% 50%; animation: deco-ring 4s linear infinite; }
  @keyframes deco-ring { from { transform: scale(1); } to { transform: scale(1.07); } }
}

@media (prefers-reduced-motion: reduce) { .h-steps .ad-steps > li::after { background: rgba(var(--deco), .9); } }
/* 폰: 업종 띠 글자 조금 작게 */
@media (max-width: 640px) { .deco-marquee { padding: 10px 0; } .deco-marquee > span { font-size: 17px; } .deco-marquee > span i { margin: 0 14px; } }

/* 11/06 대표: 세로 예시 영상 회전목마(가운데 크게 재생 → 끝나면 다음이 가운데로). 위치는 data-pos(0 가운데 · 1 다음 · 2 그다음) */
.h-carousel { position: relative; width: min(100%, 560px); margin-inline: auto; }
.h-carousel__stage { position: relative; height: 520px; perspective: 1400px; touch-action: pan-y; }
.h-carousel__item { position: absolute; left: 50%; top: 0; width: 280px; aspect-ratio: 9 / 16; margin: 0 0 0 -140px; border-radius: var(--radius-lg); overflow: hidden; background: var(--color-forest);
  box-shadow: 0 18px 40px rgba(17, 41, 44, .22); transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .9s, filter .9s; cursor: pointer; }
.h-carousel__item > video { width: 100%; height: 100%; object-fit: cover; display: block; }
.h-carousel__item[data-pos="0"] { transform: none; z-index: 3; cursor: default; }
.h-carousel__item[data-pos="1"] { transform: translateX(195px) translateZ(-160px) rotateY(-14deg) scale(.74); z-index: 2; opacity: .8; filter: saturate(.85); }
.h-carousel__item[data-pos="2"] { transform: translateX(-195px) translateZ(-160px) rotateY(14deg) scale(.74); z-index: 1; opacity: .8; filter: saturate(.85); }
.h-carousel__item:not([data-pos="0"]) .ad-sound, .h-carousel__item:not([data-pos="0"]) .ad-play, .h-carousel__item:not([data-pos="0"]) .h-carousel__bar { display: none; }
.h-carousel__item:not([data-pos="0"]):hover { opacity: .95; }
.h-carousel__meta { position: absolute; left: 12px; bottom: 14px; padding: 2px var(--space-2); border-radius: var(--radius-pill); background: var(--color-scrim); color: var(--color-on-primary); font-size: 13px; }
.h-carousel__bar { position: absolute; left: 12px; right: 12px; bottom: 6px; height: 3px; border-radius: 2px; background: rgba(238, 241, 241, .35); overflow: hidden; }
.h-carousel__bar > i { display: block; height: 100%; width: 100%; background: var(--color-on-primary); transform-origin: left center; transform: scaleX(var(--p, 0)); }
.h-carousel__dots { display: flex; justify-content: center; gap: 2px; margin-top: var(--space-4); }
.h-carousel__dot { width: 32px; height: 32px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.h-carousel__dot::before { content: ''; width: 8px; height: 8px; border-radius: 4px; background: rgba(27, 58, 61, .28); transition: width .4s, background .4s; }
.h-carousel__dot[aria-current="true"]::before { width: 26px; background: var(--color-primary); }
.h-carousel__dot:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; border-radius: 8px; }
@media (max-width: 640px) {
  .h-carousel__stage { height: 420px; }
  .h-carousel__item { width: 226px; margin-left: -113px; }
  .h-carousel__item[data-pos="1"] { transform: translateX(112px) translateZ(-160px) rotateY(-14deg) scale(.7); }
  .h-carousel__item[data-pos="2"] { transform: translateX(-112px) translateZ(-160px) rotateY(14deg) scale(.7); }
}
@media (prefers-reduced-motion: reduce) { .h-carousel__item { transition: none; } }
@media (min-width: 900px) { .h-reel__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 560px); } .h-carousel { width: 100%; } }
.h-reel { overflow-x: clip; }
/* 11/06 대표 B안: 가운데 영상에 숲색 테두리 + 은은한 크림빛(돌아가면 새 가운데로 함께 옮겨 감) */
.h-carousel__item { transition: transform .9s cubic-bezier(.16, 1, .3, 1), opacity .9s, filter .9s, box-shadow .9s; }
.h-carousel__item[data-pos="0"] { box-shadow: 0 0 0 3px var(--color-forest), 0 0 0 9px rgba(27, 58, 61, .12), 0 0 46px 6px rgba(238, 241, 241, .9), 0 22px 48px rgba(17, 41, 44, .3); }
@media (prefers-reduced-motion: reduce) { .h-carousel__item { transition: none; } }

/* 11/06 대표 B1-나: 가운데 영상은 얇은 숲색 선만(빛·연한 띠 없앰) */
.h-carousel__item[data-pos="0"] { box-shadow: 0 0 0 3px var(--color-forest), 0 22px 48px rgba(17, 41, 44, .3); }

/* 11/06 대표: 진행 순서 왼쪽 세로 줄을 오른쪽 그림(14초: 의뢰서 → 제안 3개 도착 → 영상 받기)과 같은 박자로.
   두 애니메이션 모두 14초·페이지 열릴 때 시작, 화면 밖이면 함께 멈춤(.ad-flow.is-paused) → 늘 같은 때.
   줄 길이·2번 점 위치는 scripts/home-deco.js가 재서 --len·--f2로 넣음 */
.h-steps.h-steps .ad-steps::before { transform: none; animation: none; height: var(--len, auto); bottom: auto; top: 11px; background: rgba(27, 58, 61, .14); }
.h-steps .ad-steps::after { content: ''; position: absolute; left: 6px; top: 11px; width: 2px; height: var(--len, 0); border-radius: 2px; background: var(--color-forest); transform-origin: top; transform: scaleY(0); }
.h-steps.h-steps .ad-steps > li::after { animation: none; background: var(--color-bg, #eef1f1); transition: background .3s; }
.h-steps .ad-steps > li > * { transition: opacity .4s; }
@media (prefers-reduced-motion: no-preference) {
  .h-steps .ad-steps::after { animation: steps-fill 14s linear infinite both; }
  .h-steps.h-steps .ad-steps > li:nth-child(1)::after { animation: steps-dot1 14s linear infinite both; }
  .h-steps.h-steps .ad-steps > li:nth-child(2)::after { animation: steps-dot2 14s linear infinite both; }
  .h-steps.h-steps .ad-steps > li:nth-child(3)::after { animation: steps-dot3 14s linear infinite both; }
  .h-steps .ad-steps > li:nth-child(1) > * { animation: steps-on1 14s linear infinite both; }
  .h-steps .ad-steps > li:nth-child(2) > * { animation: steps-on2 14s linear infinite both; }
  .h-steps .ad-steps > li:nth-child(3) > * { animation: steps-on3 14s linear infinite both; }
  .h-steps__grid:has(.ad-flow.is-paused) .ad-steps::after,
  .h-steps__grid:has(.ad-flow.is-paused) .ad-steps > li::after,
  .h-steps__grid:has(.ad-flow.is-paused) .ad-steps > li > * { animation-play-state: paused; }
}
@media (prefers-reduced-motion: reduce) {
  .h-steps .ad-steps::after { transform: none; }
  .h-steps.h-steps .ad-steps > li::after { background: var(--color-forest); }
}
/* 줄: 의뢰서(0~28%) 동안 2번 점까지, 제안(31~61%) 동안 3번 점까지, 영상 받기(64~94%) 동안 그대로, 끝에 사라짐 */
@keyframes steps-fill { 0%, 2% { transform: scaleY(0); opacity: 1; } 30% { transform: scaleY(var(--f2, .5)); } 63% { transform: scaleY(1); } 94% { transform: scaleY(1); opacity: 1; } 98%, 100% { transform: scaleY(1); opacity: 0; } }
@keyframes steps-dot1 { 0%, 96% { background: var(--color-forest); } 98%, 100% { background: var(--color-bg, #eef1f1); } }
@keyframes steps-dot2 { 0%, 29% { background: var(--color-bg, #eef1f1); } 31%, 96% { background: var(--color-forest); } 98%, 100% { background: var(--color-bg, #eef1f1); } }
@keyframes steps-dot3 { 0%, 62% { background: var(--color-bg, #eef1f1); } 64%, 96% { background: var(--color-forest); } 98%, 100% { background: var(--color-bg, #eef1f1); } }
/* 지금 단계 글자만 또렷하게(나머지는 옅게) */
@keyframes steps-on1 { 0%, 29% { opacity: 1; } 31%, 96% { opacity: .42; } 99%, 100% { opacity: 1; } }
@keyframes steps-on2 { 0%, 29% { opacity: .42; } 31%, 62% { opacity: 1; } 64%, 100% { opacity: .42; } }
@keyframes steps-on3 { 0%, 62% { opacity: .42; } 64%, 96% { opacity: 1; } 99%, 100% { opacity: .42; } }

/* 11/06 덤: 두 갈래 입구 카드는 마우스를 올리면 살짝 떠오르고 화살표가 옆으로(마우스 있는 기기만) */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .h-doors-sec .ad-door { transition: transform .35s cubic-bezier(.16, 1, .3, 1), box-shadow .35s; }
  .h-doors-sec .ad-door:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(17, 41, 44, .14); }
  .h-doors-sec .ad-door__go > span { display: inline-block; transition: transform .35s cubic-bezier(.16, 1, .3, 1); }
  .h-doors-sec .ad-door:hover .ad-door__go > span { transform: translateX(4px); }
  /* 덤: 업종 흐름 띠는 마우스를 올리면 잠깐 멈춤(읽기 쉽게) */
  .deco-marquee:hover > span { animation-play-state: paused; }
}

/* 11/06 대표: 첫 화면 고르는 단위에 가격(광고주 페이지와 같음) — 이름 · 내용 · 금액 세 칸, 금액은 화면에 들어오면 올라감(home-deco.js) */
.h-plans__list--price li { grid-template-columns: 96px 1fr auto; }
.h-plans__won { font-family: var(--font-heading); font-size: 1.375rem; font-weight: var(--font-weight-semibold); color: var(--color-primary); white-space: nowrap; font-variant-numeric: tabular-nums; text-align: right; }
.h-plans__won small { margin-left: 4px; font-family: var(--font-sans); font-size: .8rem; font-weight: var(--font-weight-semibold); }
.h-plans__more { margin: var(--space-4) 0 0; display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); align-items: center; font-size: var(--font-size-small); color: var(--color-text-muted); }
.h-plans__more a { display: inline-flex; align-items: center; min-height: 44px; gap: 6px; color: var(--color-primary); font-weight: var(--font-weight-semibold); text-decoration: underline; text-underline-offset: 5px; }
@media (max-width: 599px) {
  .h-plans__list--price li { grid-template-columns: 1fr auto; row-gap: 2px; }
  .h-plans__list--price li > span { grid-column: 1 / -1; grid-row: 2; max-width: none; }
}

/* 11/07 첫 화면 실제 거래 후기(후기가 있을 때만 보임) — 따옴표 문양 + 카드 */
.h-revs[hidden] { display: none; }
.h-revs { position: relative; isolation: isolate; }
.h-revs::before { content: '“'; position: absolute; right: 6%; top: 10px; z-index: -1; font-family: var(--font-heading); font-size: 260px; line-height: 1; color: rgba(27, 58, 61, .06); pointer-events: none; }
.h-revs__list { margin: 0; padding: 0; list-style: none; display: grid; gap: var(--space-4); }
.h-revs__i { padding: var(--space-5); border-radius: var(--radius-xl); background: var(--color-cream); border: 1px solid rgba(27, 58, 61, .12); }
.h-revs__stars { margin: 0 0 var(--space-2); color: var(--color-forest); letter-spacing: 2px; font-size: 14px; }
.h-revs__line { margin: 0 0 var(--space-3); font-family: var(--font-heading); font-size: 1.125rem; line-height: 1.6; }
.h-revs__who { margin: 0; font-size: var(--font-size-small); color: var(--color-text-muted); }
.h-revs__who a { color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.h-revs__note { margin: var(--space-4) 0 0; font-size: var(--font-size-caption); color: var(--color-text-muted); }
@media (min-width: 768px) { .h-revs__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* 11/07 대표: 첫 화면 아래 '30초 사용법' 칸 — 가운데 큰 영상. 영상 바탕이 크림이라 반투명 초록 띠·둥근 모서리로 페이지와 구분 */
.h-intro__head { display: grid; gap: var(--space-3); justify-items: center; text-align: center; margin-bottom: var(--space-6); }
.h-intro__lead { margin: 0; max-width: 40em; color: var(--color-text-muted); line-height: 1.7; word-break: keep-all; }
.h-intro__media { margin: 0 auto; max-width: 960px; }
.h-intro__media .video-thumb { aspect-ratio: 16 / 9; border: 7px solid rgba(27, 58, 61, .45); background: #ebefef; background-clip: padding-box; border-radius: 28px; box-shadow: 0 14px 36px rgba(17, 41, 44, .09); }
.h-intro__media .video-thumb > video { border-radius: 21px; }
@media (max-width: 599px) { .h-intro__media .video-thumb { border-width: 4px; border-radius: 18px; } .h-intro__media .video-thumb > video { border-radius: 14px; } }

/* 11/07 대표: '고르는 단위' 목록 아래 세트 설명 영상 — 사용법 칸과 같은 반투명 초록 띠·둥근 모서리, 작게 */
.h-plans__set { margin: var(--space-5) 0 0; }
.h-plans__set .video-thumb { aspect-ratio: 16 / 9; border: 5px solid rgba(27, 58, 61, .4); background: #ebefef; background-clip: padding-box; border-radius: 22px; box-shadow: 0 10px 28px rgba(17, 41, 44, .08); }
.h-plans__set .video-thumb > video { border-radius: 17px; }
.h-plans__set figcaption { margin-top: var(--space-2); font-size: var(--font-size-caption); color: var(--color-text-muted); }
.h-plans__set figcaption strong { color: var(--color-forest); }
.h-revs__ph { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: 14px; margin: 10px 0 4px; } /* 11/09 후기 사진 */