/* ─────────────────────────────────────────────
   home.css — 첫 페이지 섹션(2026-11-04 재설계): 첫 화면 · 하는 일 · 실제로 한 일 · 가격 · 진행 · 질문 · 문의
   연출 없음 — 첫 화면은 HTML 그대로 바로 보인다.
   ───────────────────────────────────────────── */

/* ── 첫 화면 ── */
.hero { padding: clamp(40px, 6vw, 80px) 0 clamp(32px, 4vw, 56px); }
.hero__grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: clamp(32px, 5vw, 64px); align-items: center;
}
.hero__eyebrow { margin-bottom: 14px; }
.hero__title {
  font-size: clamp(32px, 4.6vw, 48px); font-weight: 800;
  line-height: 1.18; letter-spacing: -.035em; text-wrap: balance;
}
.hero__lead { margin-top: 18px; font-size: clamp(16px, 1.4vw, 18px); color: var(--text-2); max-width: 540px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 26px; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 6px 0; margin-top: 22px; font-size: 14px; color: var(--text-3); }
.hero__trust li + li::before { content: "·"; margin: 0 8px; }
.hero__trust b { font-weight: 600; color: var(--text-2); }

.shot img { width: 100%; border-radius: 14px; border: 1px solid var(--line); box-shadow: var(--shadow); }
.shot figcaption { margin-top: 10px; font-size: 13.5px; color: var(--text-3); }

@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__cta .btn { flex: 1 1 200px; }
}

/* ── 하는 일 · 시작 가격 ── */
.offer-list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 40px; border-top: 2px solid var(--ink); }
.offer-list a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 13px 0; border-bottom: 1px solid var(--line);
}
.offer-list span { font-size: 15.5px; font-weight: 500; }
.offer-list b { font-size: 15.5px; font-weight: 700; white-space: nowrap; }
.offer-list a:hover span { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.offer-list li.is-hit a { background: var(--accent-soft); margin: 0 -10px; padding-left: 10px; padding-right: 10px; border-radius: 8px; }
@media (max-width: 900px) { .offer-list { grid-template-columns: 1fr 1fr; gap: 0 24px; } }
@media (max-width: 480px) { .offer-list { grid-template-columns: 1fr; } }

/* ── 실제로 한 일 ── */
.case + .case { margin-top: 56px; padding-top: 56px; border-top: 1px solid var(--line); }
.case__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.case__meta { margin: 6px 0 14px; font-size: 14px; color: var(--text-3); }
.case__lead { color: var(--text-2); margin-bottom: 18px; }
.case__figs { display: grid; gap: 16px; }
@media (max-width: 900px) { .case__grid { grid-template-columns: 1fr; gap: 24px; } }

/* ── 가격과 조건 ── */
.terms { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 32px; margin-top: 28px; font-size: 15px; color: var(--text-2); }
.terms li { position: relative; padding-left: 22px; }
.terms li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 12px; height: 12px; border-radius: 50%;
  background: var(--accent-soft); box-shadow: inset 0 0 0 4px #fff, 0 0 0 1px var(--accent);
}
.terms b { color: var(--text); font-weight: 600; }
.examples { margin-top: 32px; }
.examples__head { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
@media (max-width: 700px) { .terms { grid-template-columns: 1fr; } }

/* ── 진행 순서 ── */
.steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.step { padding-top: 14px; border-top: 2px solid var(--ink); }
.step__no { display: block; font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 8px; }
.step h3 { font-size: 17px; font-weight: 700; letter-spacing: -.02em; margin-bottom: 8px; }
.step p { font-size: 15px; color: var(--text-2); }
@media (max-width: 900px) { .steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .steps { grid-template-columns: 1fr; gap: 20px; } }

/* ── 자주 묻는 질문 ── */
.faq__list { max-width: 760px; border-top: 1px solid var(--line); }

/* ── 문의 ── */
.contact__grid {
  display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: clamp(32px, 5vw, 64px); align-items: start;
}
.contact__btns { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.channels { display: grid; gap: 6px; margin-top: 24px; font-size: 14.5px; color: var(--text-2); }
.channels span { display: inline-block; min-width: 72px; color: var(--text-3); }
.channels a { color: var(--accent); font-weight: 600; }
.channels a:hover { text-decoration: underline; }
.contact__form { padding: 28px; border: 1px solid var(--line); border-radius: 16px; background: #fff; }
@media (max-width: 900px) {
  .contact__grid { grid-template-columns: 1fr; }
  .contact__form { padding: 20px; }
}