/* ── 소개 페이지 — v6 문법 위에 얹는 몇 가지 ── */

.ahero { padding: 8.5rem var(--pad) clamp(2.5rem, 6vh, 4rem); max-width: var(--wide); margin: 0 auto; }
.ahero h1 {
  margin-top: 1rem; font-weight: 400; color: var(--joy);
  font-size: clamp(1.75rem, 4.6vw, 3rem); line-height: 1.34; letter-spacing: 0.005em;
}
.ahero h1 b { font-weight: 700; }
.ahero__sub {
  margin-top: 1.4rem; max-width: 40rem; font-weight: 300;
  font-size: clamp(0.98rem, 2.2vw, 1.08rem); line-height: 2; color: var(--ink-soft);
}

/* 세 가지 표현의 언어 */
.langs { padding: clamp(3.5rem, 9vh, 5.5rem) var(--pad); max-width: var(--wide); margin: 0 auto; }
.langs__grid {
  margin-top: 2.2rem; display: grid;
  grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 2.2vw, 24px);
}
@media (max-width: 720px) { .langs__grid { grid-template-columns: 1fr; } }
.lang {
  background: var(--card); border-radius: 4px; box-shadow: var(--shadow);
  padding: clamp(1.5rem, 3vw, 2rem);
}
.lang svg { width: 46px; height: 46px; display: block; }
.lang b { display: block; margin-top: 1rem; font-weight: 700; font-size: 1.12rem; }
.lang p { margin-top: 0.5rem; font-weight: 300; font-size: 0.94rem; line-height: 1.85; color: var(--ink-soft); }

/* 90분 안에서 일어나는 네 가지 — 이름표는 붙이지 않는다 */
.steps { background: var(--butter-soft); padding: clamp(3.6rem, 9vh, 5.8rem) var(--pad); }
.steps__in { max-width: calc(var(--wide) - 2 * var(--pad)); margin: 0 auto; }
.steps__grid {
  margin-top: 2.2rem; display: grid;
  grid-template-columns: repeat(4, 1fr); gap: clamp(14px, 2vw, 22px);
}
@media (max-width: 900px) { .steps__grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .steps__grid { grid-template-columns: 1fr; } }
.step { background: var(--card); border-radius: 4px; box-shadow: var(--shadow); padding: clamp(1.3rem, 2.6vw, 1.7rem); }
.step span { display: block; width: 34px; height: 34px; border-radius: 50%; }
.step b { display: block; margin-top: 0.9rem; font-weight: 700; font-size: 1.06rem; }
.step i { display: block; margin-top: 0.2rem; font-style: normal; font-weight: 400; font-size: 0.7rem; letter-spacing: 0.2em; color: var(--ink-faint); }
.step p { margin-top: 0.7rem; font-weight: 300; font-size: 0.9rem; line-height: 1.85; color: var(--ink-soft); }
.steps__note { margin-top: 1.9rem; max-width: 44rem; font-weight: 300; font-size: 0.96rem; line-height: 2; color: var(--ink-soft); }
.steps__note b { font-weight: 400; color: var(--ink); }

/* 자주 묻는 질문 */
.faq { padding: clamp(3.5rem, 9vh, 5.5rem) var(--pad); max-width: var(--wide); margin: 0 auto; }
.faq__list { margin-top: 1.8rem; max-width: 46rem; }
.faq details { border-top: 1px solid rgba(43,42,38,0.12); }
.faq details:last-child { border-bottom: 1px solid rgba(43,42,38,0.12); }
.faq summary {
  list-style: none; cursor: pointer; padding: 1.15rem 2rem 1.15rem 0; position: relative;
  font-weight: 400; font-size: clamp(0.98rem, 2.2vw, 1.06rem); color: var(--ink);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-weight: 300; font-size: 1.3rem; color: var(--ink-faint); transition: transform 0.3s var(--ease);
}
.faq details[open] summary::after { transform: translateY(-50%) rotate(45deg); }
.faq details p { padding: 0 0 1.35rem; font-weight: 300; font-size: 0.96rem; line-height: 2; color: var(--ink-soft); }