/* ═══════════════════════════════════════════════════════════
   F45 인계 랜딩 페이지
   ───────────────────────────────────────────────────────────
   생김새의 뿌리는 스튜디오 벽에 걸린 **스테이션 타이머**다.
   큰 숫자, 그리고 무엇보다 **운동 블록과 휴식 블록의 색이 다르다는 것.**

   그래서 색이 둘이고, 하는 일이 갈린다.
     파랑  우리가 누구이고, 무엇을 하시면 되는가
           — 시계 · 45분 · 막대 · 체크 · 로고 · **신청 버튼**
     주황  돈 이야기, 그리고 가장 뜨거운 지점
           — 체험 딱지 · 전액 차감 · −30,000원 · 12:00 본 운동

   시간 표시(00:00·45:00)는 「45분의 흐름」 한 곳에만 쓴다 — 그 대목만
   진짜로 시간 순서이기 때문이다. 나머지 자리에 같은 표시를 달면 뜻 없는
   장식이 된다.
   ═══════════════════════════════════════════════════════════ */

:root {
  /* ── 바탕 · 새벽의 찬 회색 ── */
  --ground: #ebeef3;
  --paper:  #ffffff;
  --ink:    #0d1420;   /* 검정에 남색이 섞인 먹 */
  --ink-2:  #545c6b;
  /*
   * 옅은 보조 글자. 원래 #868e9c 였는데 바탕에서 대비가 2.84밖에 안 나와,
   * 이걸 글자로 쓴 자리가 전부 안 읽혔다 — 타임라인 시각(00:00) · 「선택」
   * 딱지 · 후기 이름. 글자로 써도 안전한 값으로 내린다(5.19).
   *
   * --ink-2 와 값이 가까워졌지만 위계는 색이 아니라 **크기와 굵기**가 진다
   * (시각은 13px/800, 본문은 14.5px/400).
   */
  --ink-3:  #5e636d;
  --line:   #cfd5de;
  --line-2: #e1e6ec;

  /* 어두운 띠 안쪽 — 남색 계열로 맞춘다 */
  --dark-panel: #172033;
  --dark-line:  #27314a;
  --dark-ink-2: #9aa7bd;
  --dark-ink-3: #77839a;

  /*
   * ── 파랑 · 「우리가 누구이고, 무엇을 하시면 되는가」 ──
   *
   * 시계 · 45분 · 막대 · 체크 · 필수 딱지 · 로고, 그리고 **신청 버튼.**
   *
   * 페이지의 뼈대이자 하실 일이다. 이름과 연락처를 남기는 결정은 「믿을 만한
   * 곳인가」에서 나므로, 누르는 자리까지 같은 색으로 두어 말을 하나로 맞춘다.
   * 흰 글자로 대비 5.93이라 그대로 읽힌다.
   */
  --blue:      #1a56e8;   /* 칠하는 파랑 */
  --blue-ink:  #1342be;   /* 밝은 바탕 위에 **글자로** 놓는 파랑 */
  --blue-bg:   #eaf0ff;
  --blue-soft: #6ba3ff;   /* 어두운 띠 위에서 쓰는 파랑 */

  /*
   * ── 주황 · 「돈 이야기」 ──
   *
   * **네 군데에만 나온다.** 「체험 신청」 딱지 · 「등록하시면 전액 차감」 ·
   * 「−30,000원」 · 45분 중 「12:00 본 운동」.
   *
   * 버튼이 파랑으로 가면서 주황이 맡는 일이 또렷해졌다 — **오퍼가 얼마이고
   * 얼마를 돌려받는가.** 눈이 카드 위쪽 딱지에서 금액으로, 거기서 바로 아래
   * 파란 버튼으로 흐른다.
   *
   * 마지막 하나(12:00)만 뜻이 다른데, 장식이 아니다. 스테이션 타이머가 하는
   * 방식 그대로다 — 쉬는 블록은 차갑고, **운동 블록만 뜨겁다.**
   *
   *   --signal      #ff4a17  칠하는 주황
   *   --cta-ink     #0c0d10  그 위에 얹는 글자 (흰 글자는 대비가 3.36밖에
   *                          안 나온다. 먹으로 놓으면 5.78이고, 주황에 검정은
   *                          플레이트·안전 표식이 실제로 쓰는 짝이다)
   *   --signal-ink  #c3390d  밝은 바탕 위에 글자로 놓는 주황
   */
  --signal:     #ff4a17;
  --cta-ink:    #0c0d10;   /* 주황을 칠한 자리(딱지·3단계 번호) 위의 글자 */
  --signal-ink: #c3390d;   /* 새 바탕에서 4.47이던 것을 4.62로 (기준 4.5) */
  --signal-bg:  #fff1ec;
  --signal-soft: #ff8a5c;  /* 어두운 띠 위에서 쓰는 주황 */

  --bad:  #c0261b;

  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;

  --wrap: 1080px;
  --r: 14px;
  --shadow: 0 1px 2px rgb(13 20 32 / .06), 0 8px 28px -12px rgb(13 20 32 / .20);
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.75;
  font-feature-settings: "tnum" 0;
  /* 한글은 단어 중간에서 줄이 갈리면 안 읽힌다 */
  word-break: keep-all;
  overflow-wrap: break-word;
  /* 하단 고정 버튼에 마지막 줄이 가리지 않게 */
  padding-bottom: env(safe-area-inset-bottom);
}

/* h4 를 빼먹어 카드마다 브라우저 기본 여백 48px 이 들어가 있었다(2026-08-25) */
h1, h2, h3, h4, h5, h6 { margin: 0; line-height: 1.2; letter-spacing: -0.028em; text-wrap: balance; }
p  { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
b, strong { font-weight: 700; }
a { color: inherit; }
img { max-width: 100%; display: block; }

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }
.wrap.narrow { max-width: 720px; }

:where(a, button, input, select, textarea, summary, details):focus-visible {
  outline: 3px solid var(--signal);
  outline-offset: 2px;
  border-radius: 6px;
}

.skip {
  position: absolute; left: -9999px;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px; z-index: 99; border-radius: 0 0 10px 0;
}
.skip:focus { left: 0; top: 0; }

/* 아직 못 받은 자료 자리 ─ body.draft 일 때만 보인다 */
.slot-fill { display: none; }
body.draft [data-slot] {
  outline: 1.5px dashed var(--signal);
  outline-offset: 3px;
  border-radius: 4px;
}
body.draft .slot-fill {
  display: inline-block;
  margin-left: 8px;
  background: var(--signal); color: var(--cta-ink);
  font-size: 11px; font-weight: 700; line-height: 1.6;
  padding: 1px 7px; border-radius: 999px;
  letter-spacing: 0;
  vertical-align: middle;
}
body:not(.draft) .slot-note { display: none; }
.slot-note { color: var(--signal-ink); font-size: 13px; font-weight: 600; margin-bottom: 16px; }

/* ══════════ 편집 화면에서 고를 수 있는 꾸미기 ══════════
   대표님이 /edit 에서 「주황·흐리게·크게·작게」를 누르면 이 이름이 붙는다.
   **어두운 띠 위에서는 색을 갈아 끼운다** — 밝은 바탕용 색을 그대로 쓰면
   검은 배경에서 안 읽힌다. 크기는 em 이라 그 자리 글자 크기에 맞춰 늘고 준다.
   ══════════════════════════════════════════════════════ */
.c-hot  { color: var(--signal-ink); }
.c-blue { color: var(--blue-ink); }
.c-dim  { color: var(--ink-3); }
.t-lg  { font-size: 1.18em; font-weight: 750; letter-spacing: -.02em; }
.t-sm  { font-size: .86em; }

/* 어두운 띠·오퍼 카드 안 */
.band-dark .c-hot,  .offer .c-hot,  .steps .c-hot  { color: var(--signal-soft); }
.band-dark .c-blue, .offer .c-blue, .steps .c-blue { color: var(--blue-soft); }
.band-dark .c-dim,  .offer .c-dim,  .steps .c-dim  { color: var(--dark-ink-2); }

/* ────────────────── 머리 ────────────────── */
.topbar {
  position: sticky; top: 0; z-index: 40;
  /* 왼쪽 글씨 · 가운데 로고 · 오른쪽 전화. 양옆 폭이 달라도 로고는 줄 한가운데에 선다 */
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px;
  padding: 9px 14px;
  /* 본사 브랜드 네이비. 흰 글씨 대비 16.4 — 어떤 화면에서도 또렷하다 */
  background: #211551;
  border-bottom: 1px solid #2f2168;
}
.mark { font-size: 17px; font-weight: 800; letter-spacing: -0.04em; }
/* 윗줄은 네이비 바탕이라 흰 글씨. 바닥글은 밝은 바탕이므로 여기서만 흰색이다 */
.topbar .mark, .topbar .mark b { justify-self: start; color: #fff; white-space: nowrap; }
/*
  로고는 **높이로만** 잡는다. 가로를 정해 두면 그림 비율이 바뀔 때 찌그러진다.
  파일이 없으면 app.js 가 걷어내고 글씨만 남으므로 빈 자리가 생기지 않는다.
*/
/*
  높이로만 잡는다 — 가로를 정하면 그림 비율이 바뀔 때 찌그러진다.
  44px 인 이유: 이 로고는 전체 높이의 17%만 INGYE 라, 26px 로 두면 INGYE 가
  4px 밖에 안 된다. 44px 에서 7.6px 이 되어 겨우 읽힌다.
*/
.mark-logo { display: block; justify-self: center; height: 44px; width: auto; }
.mark b { font-weight: 800; color: var(--blue-ink); }
.topbar-tel {
  justify-self: end;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13.5px; font-weight: 650; text-decoration: none;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 6px 13px; background: var(--paper);
}

/* ────────────────── 첫 화면 ────────────────── */
.hero { padding: 34px 0 6px; }
.hero-grid { display: grid; gap: 28px; }

.eyebrow {
  font-size: 12.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-2);
  margin-bottom: 14px;
}

/* 벽시계 숫자 — 45분이 이 사업의 이름이다 */
.clock {
  display: block;
  font-variant-numeric: tabular-nums;
  font-size: clamp(52px, 17vw, 92px);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -0.05em;
  color: var(--blue-ink);
  margin-bottom: 6px;
}
.clock-sep { opacity: .35; margin-inline: -.02em; }

h1 { font-size: clamp(31px, 8.4vw, 54px); font-weight: 800; line-height: 1.08; }
.h1-line { display: block; }
h1 em { font-style: normal; color: var(--blue-ink); }

/* 눈썹줄로 내려온 시계 — 뿌리는 남기되 큰 자리는 오퍼에 넘긴다 */
.clock-mini {
  font-variant-numeric: tabular-nums; font-weight: 800;
  color: var(--blue-ink); background: var(--blue-bg);
  border-radius: 5px; padding: 1px 7px; margin-right: 8px;
  letter-spacing: -.02em;
}

/* 첫 화면의 금액 — 이 페이지에서 가장 큰 숫자 */
.h1-price {
  display: block;
  /*
    이 페이지에서 **가장 큰 숫자**여야 한다. h1 기본 크기(31px)로 두면
    「일주일 체험권」과 같은 무게가 돼서, 3초 안에 눈에 꽂히는 것이 없어진다.
    예전 시계(45:00)가 쓰던 크기를 그대로 물려받는다.
  */
  font-size: clamp(46px, 13.5vw, 78px);
  line-height: 1.02;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  color: var(--blue-ink);
  letter-spacing: -.045em;
  margin-top: 2px;
}
h1 .h1-line { font-size: clamp(22px, 5.6vw, 34px); color: var(--ink-2); font-weight: 750; }

/* 혜택 한 줄 */
.hero-perks {
  margin-top: 16px;
  font-size: 14.5px; color: var(--ink-2); line-height: 1.7;
}
.hero-perks b { color: var(--ink); }

/* 45분이 채워지는 막대 — 한 번만 찬다 */
.bar { height: 5px; background: var(--line); border-radius: 999px; overflow: hidden; margin: 20px 0 18px; }
.bar i { display: block; height: 100%; width: 100%; background: var(--blue); border-radius: 999px;
         transform-origin: left; animation: fill 1.1s .15s cubic-bezier(.2,.7,.3,1) both; }
@keyframes fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .bar i { animation: none; } }

.lede { font-size: 16.5px; color: var(--ink-2); line-height: 1.78; }
.lede b { color: var(--ink); }

.trust {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin-top: 22px;
}
.trust li {
  flex: 1 1 92px;
  background: var(--paper); border: 1px solid var(--line-2); border-radius: 12px;
  padding: 11px 12px;
}
.trust b { display: block; font-size: 18px; font-weight: 800; letter-spacing: -.03em; }
.trust span { font-size: 12.5px; color: var(--ink-2); }

/* ────────────────── 신청 카드 ────────────────── */
.formcard {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
  scroll-margin-top: 70px;
}

/*
  신청 카드 머리 — **밝게 간다.**
  예전엔 검은 띠였는데, 칸을 둘로 줄이고 나니 카드 전체가 하나의 밝은 면일 때
  더 간결하게 읽힌다. 시선은 뱃지 → 금액 → 입력칸 순으로 흐른다.
*/
.offer { background: var(--paper); padding: 20px 20px 4px; }
.rev-badge {
  display: inline-flex; align-items: center; gap: 5px;
  background: var(--blue); color: #fff;
  font-size: 12px; font-weight: 750; letter-spacing: -.01em;
  padding: 5px 11px; border-radius: 999px; margin-bottom: 12px;
}
.rev-star { color: #ffe488; font-size: 13px; line-height: 1; }
.offer-head { font-size: 21px; font-weight: 800; letter-spacing: -.035em; line-height: 1.35; }
.offer-head em { font-style: normal; color: var(--blue-ink); font-variant-numeric: tabular-nums; }
.offer-sub { font-size: 13.5px; color: var(--ink-2); margin-top: 7px; line-height: 1.6; }
.offer-sub b { color: var(--ink); }

form { padding: 18px 20px 20px; }
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 13.5px; font-weight: 650; margin-bottom: 6px; }
.field label i {
  font-style: normal; font-size: 11px; font-weight: 700;
  color: var(--blue-ink); background: var(--blue-bg);
  padding: 1px 6px; border-radius: 4px; margin-left: 3px; vertical-align: 1px;
}
.field label i.opt { color: var(--ink-3); background: var(--line-2); }

input[type="text"], input[type="tel"], select, textarea {
  width: 100%;
  font: inherit; font-size: 16px;   /* 16px 미만이면 iOS가 화면을 확대한다 */
  color: var(--ink);
  background: var(--paper);
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 12px 13px;
  transition: border-color .12s, box-shadow .12s;
}
textarea { resize: vertical; line-height: 1.6; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%235b5e66' d='m7 10 5 5 5-5z'/%3E%3C/svg%3E");
         background-repeat: no-repeat; background-position: right 10px center; background-size: 20px; padding-right: 38px; }
::placeholder { color: #a3accb; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--ink);
  box-shadow: 0 0 0 3px rgb(12 13 16 / .08);
}
.field.bad input, .field.bad textarea { border-color: var(--bad); }
.err { font-size: 12.5px; color: var(--bad); font-weight: 600; margin-top: 5px; display: none; }
.err.on { display: block; }

/* 미끼 칸 — 화면 밖으로. 읽어 주는 기계에도 안 걸리게 aria-hidden 을 함께 쓴다 */
.trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* 법이 요구해서 남긴 줄 — 있되 흐름을 안 끊게 가장 작게 */
/*
  동의 칸은 **신청의 관문**이다. 여기서 손가락이 빗나가면 신청 자체가 안 된다.
  글자 크기는 그대로 두고 위아래 여백으로 누를 넓이를 44px 가까이 벌린다.
*/
.consent {
  display: flex; gap: 9px; align-items: center;
  font-size: 11.5px; color: var(--ink-3); line-height: 1.4;
  padding: 13px 0; margin-top: -8px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.consent input { width: 18px; height: 18px; margin: 0; accent-color: var(--blue); flex: none; }
/* 「보기」는 동의와 다른 동작이다 — 눌리는 넓이를 따로 준다 */
.consent a { padding: 8px 4px; margin: -8px 0; }
.consent b { color: var(--ink); }
.consent a { color: var(--ink-3); text-underline-offset: 3px; }

.cta {
  display: flex; align-items: center; justify-content: center; gap: 9px;
  width: 100%;
  font: inherit; font-size: 18px; font-weight: 800; letter-spacing: -.025em;
  color: #fff; background: var(--blue);
  border: none; border-radius: 11px;
  padding: 15px 18px;
  margin-top: 14px;
  cursor: pointer; text-decoration: none;
  box-shadow: 0 2px 0 var(--blue-ink);
  transition: transform .08s, box-shadow .08s, background-color .12s;
}
.cta:hover { background: #164ccc; }
.cta:active { transform: translateY(2px); box-shadow: 0 0 0 var(--blue-ink); }
.cta[disabled] { opacity: .6; cursor: progress; }
.cta-arrow { font-size: 18px; font-weight: 700; margin-left: 2px; }
.cta.busy .cta-arrow { display: none; }
.cta-spin { display: none; width: 15px; height: 15px; border: 2px solid rgb(255 255 255 / .4);
            border-top-color: #fff; border-radius: 50%; animation: spin .7s linear infinite; }
.cta.busy .cta-spin { display: block; }
@keyframes spin { to { transform: rotate(360deg); } }

.cta-ghost { background: var(--paper); color: var(--blue-ink); border: 1.5px solid var(--blue); box-shadow: none; }
.cta-ghost:hover { background: var(--blue-bg); }
.cta-line  { background: transparent; color: var(--ink-2); border: 1.5px solid var(--line); box-shadow: none; font-size: 15px; }
.cta-line:hover { background: var(--line-2); }
.cta-big { max-width: 380px; margin-inline: auto; }

.promise {
  display: flex; gap: 6px; align-items: flex-start;
  font-size: 12.5px; color: var(--ink-2); line-height: 1.6;
  margin-top: 12px;
}
.promise svg { flex: none; margin-top: 3px; color: var(--ink-3); }
.promise b { color: var(--ink); }
/*
  ── 신청 버튼 밑의 증거 두 줄 ──
  체험을 망설이는 진짜 이유가 「가면 붙잡을까 봐」인 경우가 많다.
  우리가 주장하는 대신 **회원이 남긴 태그**를 근거로 붙인다.
*/
.no-push {
  margin-top: 12px; padding: 10px 12px;
  background: var(--blue-bg); border-radius: 9px;
  font-size: 13px; font-weight: 650; color: var(--blue-ink); line-height: 1.55;
}
.no-push-src { margin-top: 5px; font-size: 11.5px; color: var(--ink-3); line-height: 1.5; }
.proof {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 10px; font-size: 12.5px; color: var(--ink-2);
}
.proof b { color: var(--ink); font-variant-numeric: tabular-nums; }
.proof .star { color: #a05f00; letter-spacing: .5px; font-size: 13px; }

/* 마지막 버튼은 한 줄짜리다 — 둘째 줄용 규칙은 두지 않는다 */

.frictionless {
  margin-top: 7px; font-size: 12px; color: var(--ink-3); line-height: 1.55;
}

.formerr { display: none; font-size: 13px; font-weight: 600; color: var(--bad);
           background: #fdecea; border-radius: 8px; padding: 10px 12px; margin-top: 12px; line-height: 1.6; }
.formerr.on { display: block; }

/* 접수 완료 */
.done { padding: 30px 22px 24px; text-align: center; }
.done-check {
  width: 52px; height: 52px; margin: 0 auto 14px;
  display: grid; place-items: center;
  background: var(--blue); color: #fff; border-radius: 50%;
}
.done h2 { font-size: 21px; font-weight: 800; }
.done-sub { font-size: 14.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.7; }
.done-next { margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line-2); }
/*
  아래 버튼을 소개하는 줄이라 **버튼만큼 눈에 들어와야** 한다.
  자간은 뺐다 — 작은 글씨에서 넓히면 또렷해지지만, 커지면 성기게 흩어진다.
*/
.done-next-head { font-size: 15.5px; font-weight: 750; letter-spacing: -.01em; color: var(--blue-ink); }

/* ── 접수 완료 화면이 차례로 나타난다 ──
   한꺼번에 툭 뜨는 대신 위에서 아래로 이어지게 해서, **눈이 마지막에
   닿는 곳이 예약 버튼**이 되게 한다. 장식이 아니라 길 안내다.

   **효과는 done-in 이 붙었을 때만 돈다.** 기본 상태는 「보이는 것」이라,
   무슨 일이 있어도 빈 상자가 남지 않는다 — 방금 이름과 번호를 맡긴 사람이
   「됐다」는 확인을 받는 자리다. app.js 가 2.2초 뒤에 그 class 를 뗀다. */
.done-in .done-check,
.done-in h2,
.done-in .done-sub,
.done-in .done-next-head,
.done-in #book-now,
.done-in #call-now {
  animation: 완료등장 .5s cubic-bezier(.2, .7, .3, 1) both;
}
/*
  **위 절반은 곧바로, 아래 절반은 한 박자 쉬고.**
  보낸 직후에는 화면이 완료 카드로 미끄러져 올라가고 휴대폰 자판도 닫힌다.
  그 소란 속에 효과를 다 태우면 아무도 못 본다. 그래서 「됐습니다」는 즉시
  보여 안심시키고, 예약으로 가는 아래쪽은 화면이 가라앉은 뒤에 나타나게 한다.
  다 읽었을 때쯤 다음 길이 열리는 셈이다.
*/
.done-in .done-check      { animation-delay: 0s; }
.done-in h2               { animation-delay: .06s; }
.done-in .done-sub        { animation-delay: .12s; }
.done-in .done-next-head  { animation-delay: .75s; }
.done-in #book-now        { animation-delay: .85s; }
.done-in #call-now        { animation-delay: .95s; }

@keyframes 완료등장 {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}

/*
  안내 줄만 **한 번 커졌다 돌아온다.** 다른 것들은 떠오르기만 하는데
  이 줄에서 눈이 한 번 멈춰야, 바로 아래 버튼으로 손이 간다.
*/
.done-in .done-next-head { animation: 완료등장 .5s cubic-bezier(.2,.7,.3,1) .75s both, 한번짚기 .7s ease-out 1.35s 1; }
@keyframes 한번짚기 {
  0%   { transform: none; }
  38%  { transform: scale(1.07); }
  100% { transform: none; }
}

/* ✓ 표시는 원 안에서 살짝 튀어 오른다 — 「됐습니다」의 몸짓이다 */
.done-in .done-check { animation: 완료체크 .55s cubic-bezier(.34, 1.56, .5, 1) both; }
@keyframes 완료체크 {
  from { opacity: 0; transform: scale(.4); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .done-in .done-check, .done-in h2, .done-in .done-sub,
  .done-in .done-next-head, .done-in #book-now, .done-in #call-now {
    animation: none;
  }
}

/* ────────────────── 구획 공통 ────────────────── */
.band { padding: 52px 0; }
.band-alt { background: var(--paper); border-block: 1px solid var(--line); }
.band-dark { background: var(--ink); color: var(--paper); }
.band-dark .sec-h, .band-dark h2, .band-dark h3 { color: var(--paper); }
.band-dark .lede, .band-dark .eyebrow { color: var(--dark-ink-2); }

.sec-h { font-size: clamp(22px, 5.4vw, 33px); font-weight: 800; }
.sec-sub { font-size: 15px; color: var(--ink-2); margin-top: 10px; }
/* 어두운 띠 위의 설명 줄 — 밝은 바탕용 색을 그대로 쓰면 안 읽힌다 */
.sec-sub-dark { color: var(--dark-ink-2); }
.sec-sub .dim { color: var(--ink-3); }
.band .sec-h + .steps, .band .sec-h + .tl, .band .sec-h + .cards,
.band .sec-h + .checks, .band .sec-h + .faq, .band .sec-h + .visit,
.band .sec-h + .quotes { margin-top: 26px; }
.sec-sub + .tl { margin-top: 26px; }

/* 1·2·3 — 진짜 순서라서 번호를 단다 */
.steps { display: grid; gap: 12px; }
.steps li {
  position: relative;
  background: var(--dark-panel); border: 1px solid var(--dark-line); border-radius: 12px;
  padding: 18px 18px 18px 56px;
}
.step-n {
  position: absolute; left: 16px; top: 17px;
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: #26314a; color: var(--dark-ink-2);
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums;
}
.steps h3 { font-size: 17px; font-weight: 750; }
.steps p { font-size: 14px; color: var(--dark-ink-2); margin-top: 6px; line-height: 1.7; }
/* 3단계만 주황 — 「등록하시면 −30,000원」이 이 구획의 결론이다 */
.step-hit { border-color: var(--signal); background: #26150c; }
.step-hit .step-n { background: var(--signal); color: var(--cta-ink); }
.steps h3 em { font-style: normal; color: var(--signal-soft); font-variant-numeric: tabular-nums; }

/* ── 전 세계가 선택하는 이유 · 3가지 ──
   어두운 띠 위에 얹는다. 번호는 큰 자리를 차지하되 옅게 — 세는 데 쓰지
   읽는 데 쓰지 않는다. 제목의 둘째 줄만 색을 줘서 핵심어가 걸리게 한다. */
/*
  숫자를 먼저 읽히게 한다. 상자에 담지 않고 **가는 줄로만** 칸을 나눈다 —
  테두리가 셋이면 눈이 상자를 먼저 보고, 없으면 숫자를 먼저 본다.
*/
.why3 { display: grid; gap: 0; margin-top: 30px; }
.w3 { padding: 26px 0 4px; border-top: 1px solid var(--dark-line); }
.w3:first-child { border-top: none; padding-top: 6px; }

/* 큰 숫자와 단위는 **밑선을 맞춰** 한 덩어리로 읽히게 붙인다 */
.w3-stat {
  display: flex; align-items: baseline; gap: 8px;
  padding-bottom: 16px; margin-bottom: 16px;
  border-bottom: 1px solid var(--dark-line);
}
/* 아래의 .w3 p b(본문 굵은 글씨=흰색)가 더 세서 파란 숫자를 덮었다 — 한 칸 더 세게 잡는다 */
.w3 .w3-stat b {
  font-size: clamp(52px, 15vw, 74px); font-weight: 800; line-height: .92;
  color: var(--blue-soft);
  font-variant-numeric: tabular-nums; letter-spacing: -.045em;
}
.w3-stat span {
  font-size: 12px; font-weight: 700; letter-spacing: .16em;
  color: var(--dark-ink-2);
}
.w3 h3 {
  font-size: 19px; font-weight: 800; letter-spacing: -.035em; line-height: 1.35;
  color: var(--paper);
}
.w3 p { font-size: 14.5px; color: var(--dark-ink-2); line-height: 1.72; margin-top: 9px; }
.w3 p b { color: var(--paper); }

/* 넓은 화면에서는 셋을 나란히 두고, 세로 줄로 가른다 */
@media (min-width: 720px) {
  .why3 { gap: 0 34px; }
  .w3 { padding: 6px 0 4px; border-top: none; }
  .w3 + .w3 { border-left: 1px solid var(--dark-line); padding-left: 34px; }
}

/* ── 요일별 세 루틴 ── */
.routines { margin-top: 30px; padding-top: 26px; border-top: 1px solid var(--line); }
.routines-h { font-size: 16px; color: var(--ink-2); margin-bottom: 14px; }
.routines-h b { color: var(--ink); font-weight: 750; }
.routine-cards { display: grid; gap: 12px; margin-top: 26px; }

.routine {
  border-radius: 12px; overflow: hidden;
  background: var(--dark-panel); color: var(--paper);
  border: 1px solid var(--dark-line);
}

/* 사진 위에 요일과 이름을 얹는다 — 카드 하나가 한 장면이 되게 */
.routine-shot { position: relative; }
.routine-shot::after {
  content: ""; position: absolute; inset: auto 0 0 0; height: 58%;
  background: linear-gradient(rgb(9 13 22 / 0), rgb(9 13 22 / .55) 55%, rgb(9 13 22 / .8));
  pointer-events: none;
}
.routine img {
  /*
    숨겨 두지 않는다. loading="lazy" 인 그림은 숨기면 브라우저가 안 불러온다.
    사진이 세로라 4:5 로 둔다 — 가로로 자르면 동작이 잘려 무슨 운동인지 안 보인다.
  */
  display: block; width: 100%; height: auto;
  /* 4:5 세로에서 정사각으로. 동작은 그대로 보이면서 카드가 100px 가까이 짧아진다 */
  aspect-ratio: 1 / 1; object-fit: cover; object-position: center 38%;
  background: var(--dark-line);
}
.routine-cap {
  position: absolute; left: 0; right: 0; bottom: 14px; z-index: 1;
  text-align: center;
}
.routine-day {
  font-size: 13px; font-weight: 700; letter-spacing: .12em;
  color: #fff; margin-bottom: 9px;
  text-shadow: 0 1px 6px rgb(9 13 22 / .7);
}
/*
  이름을 색 띠 위에 세운다. 가장자리를 흐리게 빼서 사진 위에 자연스럽게 얹힌다.
  띠 색은 **흰 글씨가 읽히는 짙기**로 내렸다 — 원본 주황에 흰 글씨는 대비 3.36 이다.
*/
.routine h4 {
  font-size: 25px; font-weight: 800; letter-spacing: -.03em; line-height: 1.5;
  color: #fff;
  background: linear-gradient(90deg, rgb(0 0 0 / 0), var(--band) 16%, var(--band) 84%, rgb(0 0 0 / 0));
}
.routine-desc {
  padding: 15px 16px 17px; text-align: center;
  font-size: 14.5px; color: var(--dark-ink-2); line-height: 1.65;
}
.routine-desc b { color: var(--paper); }

/* 셋이 서로 다른 것을 한다는 걸 색으로 가른다 */
.r-cardio   { --band: #c3390d; }
.r-strength { --band: #1342be; }
.r-hybrid   { --band: #0f7350; }

/* 세 장의 카드 */
.cards { display: grid; gap: 12px; }
.card { border: 1px solid var(--line); border-radius: 12px; padding: 20px; background: var(--ground); }
.card-tag { font-size: 12px; font-weight: 700; letter-spacing: .05em; color: var(--blue-ink); margin-bottom: 8px; }
.card h3 { font-size: 17.5px; font-weight: 750; }
.card p:last-child { font-size: 14.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.72; }

/* 체크 목록 */
/* ── 여기에 해당되시나요? — 왼쪽 글, 오른쪽 사진 ── */
.who-shots { margin-top: 26px; }
.who-shots img {
  display: block; width: 100%; height: auto;
  border-radius: 12px; object-fit: cover; background: var(--line-2);
}
.who-shots .wide { aspect-ratio: 2 / 1; margin-top: 10px; }

/*
  앨범 — 옆으로 넘겨 본다.
  칸을 88% 로 두는 것이 핵심이다. **다음 장이 살짝 걸쳐 보여야** 「더 있다」가
  눈에 보인다. 꽉 채우면 한 장짜리 사진으로 보여서 아무도 안 넘긴다.
*/
.album-wrap { position: relative; }
.album {
  display: grid; grid-auto-flow: column; grid-auto-columns: 88%;
  gap: 8px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  border-radius: 12px;
}
.album::-webkit-scrollbar { display: none; }
.album:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; }
/*
  넘김의 멈춤 지점이 되는 칸에는 **크기를 바꾸는 꾸밈을 걸지 않는다.**
  전에 후기 줄에서 그러다 띠가 저절로 밀렸다.
*/
.album figure { margin: 0; scroll-snap-align: start; }
.album img { aspect-ratio: 4 / 5; }

.album-count {
  margin-top: 9px; text-align: center;
  font-size: 12.5px; font-weight: 650; letter-spacing: .04em;
  color: var(--ink-3); font-variant-numeric: tabular-nums;
}
.album-count b { color: var(--ink); font-weight: 800; }

/* 좌우 단추 — 손가락으로 미는 화면에는 필요 없다. 마우스 쓰는 폭에서만 낸다 */
.a-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: 999px;
  background: rgba(255, 255, 255, .92); border: 1px solid var(--line); color: var(--ink);
  font-size: 19px; line-height: 1; padding: 0 0 3px;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2; box-shadow: 0 2px 10px rgba(13, 20, 32, .18);
}
.a-arrow:hover { background: #fff; }
.a-arrow:disabled { opacity: 0; pointer-events: none; }
.a-prev { left: 8px; } .a-next { right: 8px; }
@media (min-width: 760px) { .a-arrow { display: flex; } }

/*
  760px 부터 나란히 세운다. 위아래로 쌓이면 사진 세 장이 1,170px 을 차지해
  스크롤이 훅 길어진다 — 태블릿 폭이면 이미 옆에 세울 자리가 충분하다.
  사진 쪽을 조금 좁게 둬야 글이 편한 길이로 끊긴다.
*/
@media (min-width: 760px) {
  .who-grid { display: grid; grid-template-columns: 1fr .82fr; gap: 40px; align-items: start; }
  /*
    사진 칸이 넓어지는 만큼 세로로도 길어진다 — 폭이 넉넉한 화면에서 그대로
    두면 오른쪽만 혼자 훌쩍 길어져 왼쪽 글이 붕 뜬다. 원본이 700px 이라
    그 이상 키워 봐야 선명해지지도 않으니, 여기서 멈춘다.
  */
  .who-shots { margin-top: 6px; max-width: 400px; }
}

.checks { display: grid; gap: 9px; }
.checks li {
  position: relative; padding-left: 29px;
  font-size: 15.5px; line-height: 1.6;
}
.checks li::before {
  content: ""; position: absolute; left: 4px; top: 8px;
  width: 11px; height: 6px;
  border-left: 2.4px solid var(--blue); border-bottom: 2.4px solid var(--blue);
  transform: rotate(-45deg);
}
.checks.tight li { font-size: 14.5px; }
.checks-note { font-size: 14px; color: var(--ink-2); margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); line-height: 1.7; }
/* 목록의 각주가 아니라 **질문에 대한 답**이다 — 각주 크기로 두면 말이 죽는다 */
.checks-close {
  margin-top: 24px; padding-top: 22px; border-top: 2px solid var(--blue);
  font-size: 17px; line-height: 1.6; color: var(--ink); letter-spacing: -.02em;
  font-weight: 600;
}
/*
  첫 줄은 **목록 전체에 대한 답**이다. 목록(15.5px)과 비슷한 크기로 두면
  일곱 번째 항목처럼 읽힌다 — 한 단계가 아니라 두 단계를 키운다.
*/
.checks-close b {
  display: block; margin-bottom: 7px;
  font-size: clamp(21px, 5.4vw, 25px); font-weight: 800; line-height: 1.25;
  letter-spacing: -.04em; color: var(--blue-ink);
}

/* ── 프로모션 ──
   **먼저 정할수록 크다**는 것이 이 구획의 전부다. 그래서 1일차 칸만 주황으로
   세우고 2·3일차는 한 단계씩 조용해진다 — 순서가 곧 크기라, 눈으로 읽힌다. */
.event-eyebrow { color: var(--signal-ink); }
.ladder { display: grid; gap: 10px; margin-top: 22px; }
.rung {
  display: grid; gap: 2px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--ground); padding: 16px 18px;
}
.rung-day { font-size: 12.5px; font-weight: 650; color: var(--ink-2); }
.rung-day b { font-weight: 800; color: var(--ink); }
.rung-give { font-size: 17px; font-weight: 750; letter-spacing: -.03em; line-height: 1.35; margin-top: 4px; }
.rung-give em { font-style: normal; color: var(--signal-ink); font-variant-numeric: tabular-nums; }
.rung-note { font-size: 13px; color: var(--ink-2); margin-top: 4px; }

/* 첫 칸 — 가장 크게 받는 자리 */
.rung-best { border: 2px solid var(--signal); background: var(--signal-bg); }
.rung-best .rung-give { font-size: 19px; }

.ladder-foot {
  margin-top: 18px; padding: 14px 16px;
  background: var(--paper); border: 1px solid var(--line); border-radius: 11px;
  font-size: 14.5px; color: var(--ink-2); line-height: 1.7;
}
.ladder-foot b { color: var(--ink); }

@media (min-width: 720px) {
  .ladder { grid-template-columns: repeat(3, 1fr); align-items: start; }
}

/* 후기 */
/* 옆으로 넘겨 보는 후기 — 여러 개를 늘어놓되 세로 길이를 잡아먹지 않는다 */
.quotes-wrap { position: relative; }
.quotes {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(262px, 1fr);
  gap: 12px;
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.quotes:focus-visible { outline: 2px solid var(--blue); outline-offset: 3px; border-radius: 12px; }
/*
  바깥 상자는 **자리만 잡는 투명한 틀**이다. 눈에 보이는 카드는 안쪽(.q-in)이
  그린다 — 그래야 떠오르기 전에 빈 회색 네모가 남지 않고, 넘기는 줄의 멈춤
  지점(바깥 상자)은 한 번도 안 움직인다.
*/
.quotes blockquote {
  scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: none; border: 0; padding: 0;
}
.quotes .q-in {
  display: flex; flex-direction: column; flex: 1;
  background: var(--ground); border: 1px solid var(--line);
  border-radius: 12px; padding: 18px 20px;
}
.quotes blockquote p { font-size: 14.5px; }
.quotes cite { margin-top: auto; padding-top: 12px; }
.quotes .q-in > p { flex: 0 0 auto; }
.q-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 11px; }
.q-tag { font-size: 10.5px; font-weight: 750; letter-spacing: .09em; color: var(--ink-3); }
/* 후기 카드는 바탕이 회색이라 별이 한 단계 더 짙어야 글자로 읽힌다 */
.q-head .star { font-size: 12px; letter-spacing: 0; color: #8f5500; }

/* 좌우 단추 — 손가락으로 미는 화면에서는 필요 없으니 넓을 때만 내놓는다 */
.q-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 38px; height: 38px; border-radius: 999px;
  background: var(--paper); border: 1px solid var(--line); color: var(--ink);
  font-size: 20px; line-height: 1; padding: 0 0 3px;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; z-index: 2; box-shadow: 0 2px 10px rgba(13, 20, 32, .12);
}
.q-arrow:hover { background: var(--ground); }
.q-arrow:disabled { opacity: .32; cursor: default; box-shadow: none; }
.q-prev { left: -17px; } .q-next { right: -17px; }
@media (min-width: 880px) { .q-arrow { display: flex; } }

/* 원본까지 가고 싶은 사람을 위한 길 */
.quotes-more { text-align: center; margin-top: 18px; }
.quotes-more a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 4px 4px;
  font-size: 14px; font-weight: 700; letter-spacing: -.01em;
  color: var(--blue-ink); text-decoration: none;
  border-bottom: 1.5px solid var(--blue-soft); padding-bottom: 4px;
}
.quotes-more a:hover { border-bottom-color: var(--blue-ink); }
blockquote { margin: 0; background: var(--ground); border: 1px solid var(--line); border-radius: 12px; padding: 18px 20px; }
blockquote p { font-size: 15.5px; line-height: 1.75; }
blockquote cite { display: block; font-style: normal; font-size: 13px; color: var(--ink-3); margin-top: 10px; }

/* 후기 머리 — 별점 배지는 후기 자체보다 세다(본사 지침) */
.reviews-head { display: grid; gap: 10px; margin-bottom: 24px; }
.stars { display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
         font-size: 13.5px; color: var(--ink-2); }
.stars b { color: var(--ink); font-variant-numeric: tabular-nums; }
/*
  별은 주황(--signal)으로 뒀다가 바꿨다. 대비가 3.36밖에 안 나왔고,
  주황은 이 페이지에서 「지금 하실 일」을 뜻하는 색이라 별점에 쓰면 뜻이 흐려진다.
  별은 어디서나 노란 계열이 관습이고, 짙게 잡으면 대비도 확보된다.
*/
.star { color: #a05f00; letter-spacing: 1px; font-size: 15px; }

/* 본문 안에 끼워 넣는 후기 한 줄 */
.quote-inline {
  margin-top: 14px; padding: 14px 16px;
  border-left: 3px solid var(--blue); border-radius: 0 10px 10px 0;
  background: var(--paper);
}
.quote-inline p { font-size: 14px; line-height: 1.7; }
.quote-inline cite { display: block; font-style: normal; font-size: 12.5px;
                     color: var(--ink-3); margin-top: 8px; }

/* ── 오시는 길 ──
   사실만 남기고 크게 놓는다. 아이콘이 항목을 가르니 이름표를 작게 둬도
   무엇인지 바로 읽힌다. 마지막 줄은 「눌러서 길찾기」 하나. */
.loc-eyebrow { color: var(--blue-ink); margin-bottom: 8px; }
.loc-name {
  font-size: clamp(28px, 7vw, 42px); font-weight: 800;
  letter-spacing: -.04em; margin-bottom: 22px;
}

.loc { border-top: 1px solid var(--line); }
.loc-row {
  /*
    이름표 칸이 108px 이면 375px 화면에서 내용 칸이 219px 밖에 안 남아
    주소·주차가 어색하게 접혔다. 가장 긴 이름표가 「영업시간」(4자)이라
    82px 이면 충분하다.
  */
  display: grid; grid-template-columns: 82px 1fr; gap: 14px;
  padding: 15px 2px; border-bottom: 1px solid var(--line);
  align-items: start;
}
@media (min-width: 480px) { .loc-row { grid-template-columns: 108px 1fr; gap: 16px; } }
.loc-row dt {
  display: flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: var(--ink-3); padding-top: 2px;
}
.loc-row dt svg { color: var(--blue); flex: none; }
/*
  한글은 브라우저 기본값이 **글자 단위로** 끊는다 — 「1시간 30분 무」/「료」
  처럼 단어 한가운데서 넘어간다. keep-all 은 어절을 안 쪼개고 띄어쓰기에서만
  넘긴다. 한국어 페이지에서는 이게 맞는 값이다.
*/
.loc-row dd { font-size: 16px; line-height: 1.65; word-break: keep-all; }
.loc-row dd b { font-weight: 750; }
.loc-row dd a { text-underline-offset: 3px; }

/* ── 지도 ── */
.loc-map {
  position: relative; margin-top: 26px;
  border: 1px solid var(--line); border-radius: 13px; overflow: hidden;
  background: var(--line-2);
}
.loc-map iframe {
  display: block; width: 100%; height: 320px; border: 0;
}
/* 지도 위에 얹는 카드 — 누르면 네이버로 넘어간다 */
/* 네이버로 가는 길은 이 카드 하나뿐이다 — 파란 테두리로 「누르는 것」임을 알린다 */

/*
  지도 폭만큼 늘리지 않는다 — 글씨만 한 너비로 가운데 세우면 좌우로 지도가
  드러나, 누를 것과 볼 것이 서로를 안 잡아먹는다.
*/
.map-card {
  position: absolute; left: 50%; bottom: 12px;
  transform: translateX(-50%);
  max-width: calc(100% - 24px);
  display: flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--paper); border: 1.5px solid var(--blue); border-radius: 999px;
  padding: 12px 22px; text-decoration: none;
  box-shadow: 0 4px 16px -4px rgb(13 20 32 / .28);
  transition: transform .12s, background .12s;
}
.map-card:hover { transform: translateX(-50%) translateY(-2px); background: var(--blue-bg); }
/* 누르는 것이니 버튼만 한 글씨로 — 15px 은 지도 위에서 안내문처럼 읽혔다 */
.map-card-title { font-size: 18px; font-weight: 800; letter-spacing: -.03em; color: var(--ink); }
.map-card-arrow { font-size: 19px; color: var(--blue-ink); }

@media (min-width: 900px) {
  /* 왼쪽 정보, 오른쪽 지도 */
  .loc-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 48px; align-items: start; }
  .loc-map { margin-top: 0; }
  .loc-map iframe { height: 420px; }
}

/* 자주 묻는 질문 */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  list-style: none; cursor: pointer;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  font-size: 15.5px; font-weight: 650; line-height: 1.55;
  padding: 16px 0;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; margin-top: 7px;
  width: 9px; height: 9px;
  border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3);
  transform: rotate(45deg); transition: transform .18s;
}
.faq details[open] summary::after { transform: rotate(-135deg); }
.faq details p { font-size: 14.5px; color: var(--ink-2); line-height: 1.75; }
.faq details p + p { margin-top: 11px; }
/* 답의 아래 여백은 마지막 덩어리 하나가 책임진다 — 문단이 늘어도 간격이 벌어지지 않는다 */
.faq details > :last-child { padding-bottom: 18px; }

/* 문답 안에 세우는 실제 후기 — 우리가 하는 말과 회원이 한 말을 눈으로 갈라 준다 */
.faq-quote {
  margin-top: 13px;
  padding: 13px 15px;
  background: var(--blue-bg);
  border-radius: 10px;
  border-left: 3px solid var(--blue);
}
.faq-quote p { font-size: 14px; color: var(--ink); padding-bottom: 0; }
.faq-quote p + p { margin-top: 0; }
.faq-quote cite {
  display: block; margin-top: 8px;
  font-style: normal; font-size: 12.5px; font-weight: 650; color: var(--blue-ink);
}
/* 파란 바탕 위에서는 기본 금색이 옅어 글자로서 안 읽힌다 — 이 자리에서만 낮춘다 */
.faq-quote .star { font-size: 12px; letter-spacing: .5px; color: #8f5500; }

/* 마지막 부름 */
.last-call { text-align: center; }
.last-call h2 { font-size: clamp(23px, 5.8vw, 35px); font-weight: 800; margin-bottom: 14px; }
.last-call .lede { margin-bottom: 6px; }

/* 바닥 */
.foot { padding: 30px 0 96px; border-top: 1px solid var(--line); }
.foot .mark { margin-bottom: 10px; }
/*
  바닥글은 --ink-3(옅은 회색)이었는데 바탕과 대비가 2.84밖에 안 나왔다.
  사업자 정보와 개인정보 안내 링크가 있는 줄이라 반드시 읽혀야 한다.
*/
.foot-line { font-size: 12.5px; color: var(--ink-2); line-height: 1.8; }
.foot-line a { text-underline-offset: 3px; }

/* 하단 고정 버튼 — 모바일에서만 */
.dock {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 45;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--ground) 92%, transparent);
  backdrop-filter: blur(10px);
  border-top: 1px solid var(--line);
  animation: rise .2s ease-out both;
}
.dock .cta { margin-top: 0; }
@keyframes rise { from { transform: translateY(100%); } to { transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .dock { animation: none; } }

/* ────────────────── 넓은 화면 ────────────────── */
@media (min-width: 720px) {
  /* .quotes 는 여기서 뺐다 — 이제 3칸 표가 아니라 옆으로 넘기는 줄이다 */
  .steps, .why3, .routine-cards { grid-template-columns: repeat(3, 1fr); }
  .tt { display: grid; grid-template-columns: repeat(3, 1fr); }
  .tt-row { grid-template-columns: 1fr; gap: 4px; border-bottom: none;
            border-right: 1px solid var(--dark-line); padding: 14px 18px; }
  .tt-row:last-child { border-right: none; }
  /*
    카드가 넷이 됐다(하이록스 추가). 3단으로 두면 3+1로 갈려 마지막 한 장이
    외따로 남는다. 2×2가 균형이 맞고, 한 장당 폭이 넓어 설명도 읽힌다.
  */
  .cards { grid-template-columns: repeat(3, 1fr); }
  .trust li { flex: 0 1 130px; }
  .band { padding: 68px 0; }
}

@media (min-width: 940px) {
  .hero { padding: 56px 0 20px; }
  .hero-grid { grid-template-columns: 1fr 400px; gap: 48px; align-items: start; }
  .dock { display: none; }
  .foot { padding-bottom: 40px; }
}

/*
 * 폼 카드를 따라다니게 붙이는 것은 **화면이 카드보다 클 때만.**
 *
 * 카드는 760px쯤 된다. 노트북처럼 세로 720px인 화면에서 붙여 두면 카드가
 * 위에 붙박이로 서고, 아래쪽 「체험 신청하기」 버튼이 화면 밖에 걸린 채
 * 아무리 굴려도 안 올라온다 — 신청을 아예 못 하게 된다.
 */
@media (min-width: 940px) and (min-height: 880px) {
  .formcard { position: sticky; top: 76px; }
}

/* ── 화면에 들어오면 떠오른다 ──
   숨기는 일은 **html.js 아래에서만** 한다. 그 class 가 없으면(자바스크립트가
   막혔거나 못 떴으면) 아무것도 숨지 않는다 — 글이 사라진 페이지보다는
   효과가 없는 페이지가 낫다. */
:root.js .reveal {
  opacity: 0;
  transform: translateY(28px) scale(.945);
  will-change: opacity, transform;
}
:root.js .reveal.in {
  opacity: 1;
  transform: none;
  transition: opacity .9s cubic-bezier(.2,.7,.3,1) var(--rd, 0s),
              transform .9s cubic-bezier(.2,.7,.3,1) var(--rd, 0s);
  will-change: auto;
}
/* 셋이 나란한 곳은 조금씩 늦게 떠오르게 — 한꺼번에 튀어나오면 어수선하다.
   움직임이 느긋해진 만큼 사이 간격도 같이 벌린다 */
:root.js .reveal:nth-child(2) { --rd: .12s; }
:root.js .reveal:nth-child(3) { --rd: .24s; }

/*
  후기 카드는 **줄어든 상태에서 커지며** 떠오른다. 밀면(translate) 화면이 흔들린다 —
  이 카드들은 옆으로 넘기는 줄 안에 들어 있어서, 안에서 무엇이 움직이면
  브라우저가 「넘길 수 있는 범위」를 다시 재면서 **줄을 저절로 몇십 px 옮긴다.**
  (실제로 0 → 7 → 40px 로 혼자 움직였다. 2026-08-26)
  다만 **줄이는 것(scale)은 안전하다** — 작아진 그림은 범위를 넓힐 수가 없다.
  그래서 「커지면서 나타나는」 느낌은 그대로 두고, 미는 것만 뺐다.
*/
/*
  **겉은 가만두고 속만 움직인다.** 이 카드는 넘기는 줄의 멈춤 지점이라,
  카드 자체를 움직이면 그 지점이 흔들려 브라우저가 줄을 다시 잡는다.
  그게 화면 흔들림이었다(밀었을 때 40px, 줄였을 때 10px 어긋남).
*/
:root.js #quotes .reveal { transform: none; opacity: 1; }
/* 작은 글상자라 7% 로는 티가 안 난다 — 사진 카드보다 더 줄여 둔다 */
:root.js #quotes .reveal .q-in { opacity: 0; transform: scale(.78); }
/*
  **전환이 아니라 애니메이션으로 돌린다.**
  전환은 「값이 바뀌는 순간」에만 걸리는데, 그 순간 브라우저가 화면을 안 그리고
  있으면(휴대폰에서 흔하다) 값만 바뀌고 움직임은 통째로 건너뛴다.
  애니메이션은 붙는 순간부터 처음부터 끝까지 도는 것이 보장된다.
*/
:root.js #quotes .reveal.in .q-in {
  animation: 후기등장 .8s cubic-bezier(.2, .7, .3, 1) var(--rd, 0s) both;
}
@keyframes 후기등장 {
  from { opacity: 0; transform: scale(.78); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  :root.js #quotes .reveal .q-in,
  :root.js #quotes .reveal.in .q-in {
    opacity: 1; transform: none; transition: none; animation: none;
  }
}

/* 후기는 여덟 장이라 따로 잡는다. 화면 밖의 다섯째부터는 다 같은 간격으로 —
   어차피 안 보이는 자리에서 기다리게 할 이유가 없다 */
:root.js #quotes .reveal:nth-child(1) { --rd: 0s; }
:root.js #quotes .reveal:nth-child(2) { --rd: .1s; }
:root.js #quotes .reveal:nth-child(3) { --rd: .2s; }
:root.js #quotes .reveal:nth-child(4) { --rd: .3s; }
:root.js #quotes .reveal:nth-child(n+5) { --rd: .36s; }

/* 움직임을 줄여 달라고 해 두신 분에게는 아무 일도 하지 않는다 */
@media (prefers-reduced-motion: reduce) {
  :root.js .reveal, :root.js .reveal.in {
    opacity: 1; transform: none; transition: none;
  }
}


/* ── 버튼 아래 안심 문구 ──
   노션 3편: 「클릭하세요」가 아니라 「결제 없음 · 1분이면 끝」.
   누르기 직전의 망설임(FUD)을 없애는 자리라, 버튼에 **붙어 있어야** 한다. */
.cta-note {
  margin-top: 9px; text-align: center;
  font-size: 12.5px; font-weight: 650; letter-spacing: -.01em;
  color: var(--ink-3);
}

/* ── 중간 행동 버튼 ── */
.mid-cta { margin-top: 26px; }
.mid-cta .cta { max-width: 420px; margin-left: auto; margin-right: auto; }

/* ── 첫 화면을 좁혀 신청 버튼을 끌어올린다 ──
   글은 하나도 안 지웠다. 열네 군데 간격을 조금씩 좁혀 120px 남짓을 벌었다.
   손가락으로 보는 화면에서만 적용한다 — 넓은 화면은 원래 여유가 있다. */
@media (max-width: 719px) {
  .hero { padding: 13px 0 6px; }
  .hero-grid { gap: 12px; }
  .eyebrow { font-size: 11.5px; margin-bottom: 6px; }
  h1 { line-height: 1.02; }
  .bar { margin: 10px 0 8px; }
  .hero .lede { font-size: 15.5px; line-height: 1.58; }
  .hero-perks { margin-top: 10px; line-height: 1.6; }

  .offer { padding: 12px 18px 2px; }
  .rev-badge { margin-bottom: 7px; }
  .offer-sub { margin-top: 5px; line-height: 1.5; }
  form { padding: 13px 16px 16px; }
  .field { margin-bottom: 8px; }
  .field label { margin-bottom: 4px; }
  .consent { margin-top: 8px; }
  .cta-note { margin-top: 6px; }
  .cta { padding: 14px 18px; }
}