/* 크리에이터 랜딩(/creator) 전용 — 토큰·헤더·히어로·폰 프레임·카드·푸터는 site.css 것을 그대로 쓰고,
   여기에는 이 페이지에만 있는 것(버튼·작은 폰 프레임·화면 3단계·정산 조건 표·모바일 고정 버튼)만 둔다. */

.wrap.center { text-align: center; }

/* ── 버튼 — 탭 타깃 44px 이상 ── */
.btn-primary, .btn-ghost {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 52px; padding: 0 28px; border-radius: 14px;
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
}
/* 흰 글자(#fff) 위 --brand(#FF6F0F)는 대비 2.9:1 이라 큰 굵은 글자(17px/700)에서만 쓴다.
   작은 글자 링크는 site.css 의 --brand-strong 을 쓴다. */
.btn-primary { background: var(--brand); color: #fff; box-shadow: 0 8px 20px rgba(255, 111, 15, 0.28); }
.btn-primary:hover { text-decoration: none; filter: brightness(0.96); }
.btn-ghost { background: var(--elevated); color: var(--text); border: 1px solid var(--line); }
.btn-ghost:hover { text-decoration: none; background: var(--surface); }
.btn-primary:focus-visible, .btn-ghost:focus-visible,
.store-badges a:focus-visible { outline: 3px solid var(--brand-strong); outline-offset: 3px; }

/* 폰 속 스크린샷에 width/height 속성을 줬다(자리를 미리 잡아 CLS 를 없앤다). site.css 의 img 규칙은
   max-width 만 있어 height 속성이 그대로 먹으면 세로로 늘어난다 — 비율을 따르게 푼다. */
.creator-page .phone .screen img { width: 100%; height: auto; }

/* ── 첫 화면의 시작 조건 세 가지 — 한 줄에 하나씩, 왼쪽 정렬이라 체크 표시가 세로로 한 줄에 선다(창주님 0921).
   모바일은 히어로가 가운데 정렬이지만 이 목록만은 왼쪽에 붙인다. ── */
.facts { list-style: none; margin-top: 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; text-align: left; font-size: 15px; font-weight: 600; color: var(--text-sub); }
.facts li { display: flex; align-items: center; gap: 8px; }
.facts li::before { content: '✓'; flex: none; width: 16px; color: var(--brand); font-weight: 800; }

/* ── 작은 폰 프레임 — 세 장·두 장을 나란히 놓을 때. 비율은 site.css .phone 을 그대로 줄인 값이다 ── */
.phone.sm { width: min(240px, 64vw); border-radius: 34px; padding: 8px; box-shadow: 0 16px 40px rgba(15, 23, 42, 0.22); }
.phone.sm .screen { border-radius: 27px; }

/* ── 후원이 도착하는 3단계 (화면 + 설명) ── */
.shots { list-style: none; margin-top: 52px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.shots.two { grid-template-columns: repeat(2, minmax(0, 340px)); justify-content: center; gap: 56px; }
@media (max-width: 860px) { .shots, .shots.two { grid-template-columns: 1fr; gap: 56px; } }
.shots h3 { margin-top: 26px; font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 10px; }
.shots .num {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: var(--brand-tint); color: var(--brand-strong); font-weight: 800; font-size: 14px;
}
.shots p { margin: 8px auto 0; max-width: 320px; color: var(--text-sub); font-size: 15px; }

/* ── 수익 확인 · 정산 신청 두 장 ── */
.section p.desc.narrow { max-width: 620px; margin-left: auto; margin-right: auto; }
.pair { margin-top: 44px; display: flex; justify-content: center; gap: 36px; flex-wrap: wrap; }
.pair figcaption { margin-top: 16px; font-size: 15px; font-weight: 700; color: var(--text-sub); }

/* ── 사진 공개 범위 세 단계 ── */
.tiers { list-style: none; margin: 44px auto 0; max-width: 760px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; text-align: left; }
@media (max-width: 860px) { .tiers { grid-template-columns: 1fr; } }
.tiers li { background: var(--elevated); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px; }
.tiers strong { display: block; font-size: 16px; }
.tiers span { display: block; margin-top: 6px; font-size: 14px; color: var(--text-sub); line-height: 1.55; }

/* ── 정산 조건 표 — 숫자마다 근거·조건을 작은 글씨로 붙인다 ── */
.terms-table {
  margin: 52px auto 0; max-width: 760px; text-align: left;
  background: var(--elevated); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.terms-table > div { display: grid; grid-template-columns: 150px 1fr; gap: 16px; padding: 18px 24px; border-top: 1px solid var(--line); }
.terms-table > div:first-child { border-top: 0; }
.terms-table dt { font-weight: 700; font-size: 15px; color: var(--text-sub); }
.terms-table dd { font-size: 16px; }
.terms-table dd strong { color: var(--brand-strong); }
.terms-table dd small { display: block; margin-top: 4px; font-size: 13.5px; color: var(--text-faint); line-height: 1.55; }
@media (max-width: 640px) { .terms-table > div { grid-template-columns: 1fr; gap: 4px; padding: 16px 18px; } }
.terms-note { margin-top: 18px; font-size: 13.5px; color: var(--text-faint); }

/* ── 시작 방법 ── */
.start-steps {
  /* 세로로 쌓고 왼쪽 정렬 — 번호가 한 줄에 선다(창주님 0921). 덩어리 자체는 가운데에 둔다. */
  list-style: none; counter-reset: step; margin: 32px auto 0;
  display: inline-flex; flex-direction: column; align-items: flex-start; gap: 12px; text-align: left;
  font-size: 16.5px; font-weight: 600;
}
.start-steps li { counter-increment: step; display: flex; align-items: center; gap: 12px; }
.start-steps li::before {
  content: counter(step); display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--brand); color: #fff; font-size: 13.5px; font-weight: 800;
}
.center-badges { justify-content: center; margin-top: 36px; }
.start-note { margin-top: 18px; color: var(--text-faint); font-size: 13.5px; }

/* ── 모바일 고정 시작 버튼 ── */
.sticky-cta { display: none; }
@media (max-width: 860px) {
  .sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(10px);
    border-top: 1px solid var(--line);
  }
  .sticky-cta .btn-primary { display: flex; width: 100%; }
  .sticky-cta { transition: transform 0.2s ease; }
  .sticky-cta.is-hidden { transform: translateY(110%); visibility: hidden; }
  /* 고정 바(52 + 24 + 안전영역)만큼 문서 끝을 띄워 푸터 마지막 줄이 가려지지 않게 한다 */
  .creator-page { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* 첫 화면의 버튼은 세로로 쌓아 360px 에서도 잘리지 않게 한다 */
  .creator-page .hero .cta-row { flex-direction: column; align-items: stretch; }
  .creator-page .hero { padding-top: 56px; }
  .creator-page .section { padding: 72px 0; }
}
/* 앵커 이동 시 제목이 고정 헤더 밑으로 숨지 않게 한다 */
.creator-page section[id] { scroll-margin-top: 72px; }

/* 마지막 줄에 한두 단어만 떨어지는 것을 줄인다(지원 브라우저만 — 미지원이면 종전대로 흐른다) */
.creator-page h1, .creator-page h2, .creator-page .lead,
.creator-page .desc, .creator-page .start-note, .creator-page .shots p,
.creator-page .terms-note, .creator-page .site-footer .note { text-wrap: balance; }

/* 첫 화면 제목은 어느 폭에서도 두 줄이다(창주님 0921) — 둘째 줄 "좋아요에서 끝내지 마세요."가 약 10em 이라
   site.css 의 기본 크기(최소 34px)로는 360px 폰에서 세 줄이 된다. 폭에 비례해 줄인다. */
.creator-page .hero h1 { font-size: clamp(30px, 4.4vw, 54px); }
@media (max-width: 860px) { .creator-page .hero h1 { font-size: clamp(24px, 7.6vw, 48px); } }