/*
 * Yoontas 서비스 사이트(yoontas.com) 첫 쪽(랜딩)의 스타일. index.html만 쓴다.
 * 약관, 처리방침, 지원, 404 쪽은 site.css를 쓴다. 두 파일은 서로 기대지 않는다.
 *
 * 대표가 고른 시안 A("밝은 카드")의 값을 그대로 옮겼다. 시안은 요소마다 style 속성으로 적혀 있었는데,
 * 이 사이트는 style 속성을 쓰지 않으므로(_headers의 CSP) 구역별 클래스로 풀어 적었다.
 * 글꼴은 /fonts/fonts.css(DM Sans, Noto Sans KR), 움직임을 돌리는 스크립트는 /landing.js다.
 *
 * 이 파일의 차례
 *   1부 모습: 시안 A 그대로다. 스크립트가 없거나 "움직임 줄이기"가 켜져 있으면 이 모습으로 멈춰 있다.
 *   2부 스크립트가 있을 때의 배치: "네 걸음"을 한 장씩 넘기는 틀. <html>에 js가 붙었을 때만 먹는다.
 *   3부 움직임: 전부 @media (prefers-reduced-motion: no-preference) 안에 있다. 통째로 지워도 쪽은 온전하다.
 * 밝은 화면만 있다(어두운 화면 값은 시안에 없다).
 */

/* [초안 표시 스위치] 바닥글의 초안 안내 한 줄(.draft-only)은 draft.css의 --draft로 켜고 끈다. site.css와 같은 스위치다. */
@import url('/draft.css');

/* ======================================================================
 * 1부. 모습 (시안 A 그대로)
 * ==================================================================== */

/* ---------- 바탕 ---------- */

/* 휴대폰을 눕혔을 때 브라우저가 글자를 제멋대로 키우지 않게 한다 */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: 'DM Sans', 'Noto Sans KR', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: #1a1d23;
  background: #ffffff;
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 쪽 전체를 싸는 틀. 화면 옆으로 삐져나온 것을 여기서 자른다(시안의 맨 바깥 틀과 같다). */
.page {
  overflow-x: hidden;
}

[hidden] {
  display: none !important;
}

/* 가운데 폭. 시안처럼 content-box라서 실제 폭은 1200px에 양옆 여백을 더한 값이다. */
.wrap {
  max-width: 1200px;
  margin: 0 auto;
  padding-left: clamp(20px, 5vw, 80px);
  padding-right: clamp(20px, 5vw, 80px);
}

/* 구역 안쪽의 위아래 여백 (네 걸음, 세 영역, 폰과 패드, 누가 만들었나, 자주 묻는 것) */
.section-in {
  padding-top: clamp(64px, 7.5vw, 108px);
  padding-bottom: clamp(64px, 7.5vw, 108px);
}

/* 건너뛰기 링크: 평소에는 화면 밖, 초점이 오면 맨 위에 나온다 (시안에는 없다) */
.skip {
  position: absolute;
  left: 20px;
  top: -80px;
  z-index: 10;
  display: flex;
  align-items: center;
  height: 44px;
  padding: 0 16px;
  border-radius: 12px;
  background: #1a1d23;
  color: #ffffff;
  font-weight: 700;
  text-decoration: none;
}

.skip:focus {
  top: 8px;
}

/* 초점 표시 (시안에는 없다. 평소 모습은 바뀌지 않는다) */
a:focus-visible,
button:focus-visible,
summary:focus-visible,
.steps-stage:focus-visible {
  outline: 3px solid #2e4bd1;
  outline-offset: 3px;
}

.steps-stage:focus-visible {
  outline-offset: -3px;
}

/* ---------- 구역 머리 (작은 머리말, 큰 제목, 받침 문장) ---------- */

.section-head {
  text-align: center;
}

.kicker {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
  color: #2e4bd1;
}

.section-title {
  margin: 10px 0 0;
  font-size: clamp(30px, 3.4vw, 46px);
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.section-lead {
  margin: 16px auto 0;
  max-width: 720px;
  font-size: 18px;
  line-height: 1.7;
  color: #4a5160;
}

/* ---------- 맨 위 메뉴 ---------- */

.site-header {
  background: #ffffff;
  border-bottom: 1px solid #efebe2;
}

.header-in {
  padding-top: 14px;
  padding-bottom: 14px;
  display: flow-root;
}

.brand {
  float: left;
  display: flex;
  align-items: center;
  gap: 10px;
  height: 48px;
  color: #1a1d23;
  text-decoration: none;
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.brand svg {
  flex: none;
  width: 28px;
  height: 28px;
}

.header-cta {
  float: right;
  margin-left: 16px;
  display: flex;
  align-items: center;
  height: 48px;
  box-sizing: border-box;
  padding: 0 22px;
  border-radius: 14px;
  background: #1a1d23;
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
}

.header-nav {
  float: right;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.header-nav a {
  display: flex;
  align-items: center;
  height: 48px;
  padding: 0 clamp(7px, 1.1vw, 14px);
  color: #1a1d23;
  text-decoration: none;
  font-size: clamp(15px, 1.2vw, 16px);
  font-weight: 500;
}

/* 좁은 폰(440px 아래): 메뉴가 다섯 개라 15px 글자로는 한 줄에 들어가지 않는다(시안은 네 개였다. "요금제"를 더했다).
 * 글자를 14px로 줄이고 줄 전체에 고르게 펼쳐 한 줄을 지킨다. 320px에서는 시안처럼 두 줄이 된다. */
@media (max-width: 440px) {
  .header-nav {
    width: 100%;
    justify-content: space-between;
    gap: 0 6px;
  }

  .header-nav a {
    padding: 0;
    font-size: 14px;
  }
}

/* ---------- 1. 첫 화면 ---------- */

.hero {
  background: #ffffff;
}

.hero-in {
  padding-top: clamp(48px, 5.5vw, 76px);
  padding-bottom: clamp(64px, 7.5vw, 104px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 56px 48px;
}

.hero-copy {
  flex: 1 1 460px;
  max-width: 660px;
  min-width: 0;
}

.hero-kicker {
  margin: 0;
  font-size: 17px;
  font-weight: 700;
  color: #2a2f3a;
}

/* 큰 문구는 일곱 개 가운데 하나가 무작위로 나온다(hero-copy.js). 모두 두 줄이고, 두 줄 높이를 잡아 두어 어느 문구가 나와도 아래가 밀리지 않는다. */
.hero-title {
  margin: 18px 0 0;
  min-height: 2.4em;
  font-size: clamp(38px, 5.2vw, 68px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.035em;
}

/* 좁은 폰(380px 아래): 가장 긴 줄("막히지 않는 영어 공부")이 38px 글자로는 360px 폭에 들어가지 않아 낱말 하나가 다음 줄로 떨어진다.
 * 화면 폭에 맞춰 글자를 조금 줄인다(360px에서 36px, 320px에서 32px). 일곱 문구 모두 같은 크기다. */
@media (max-width: 380px) {
  .hero-title {
    font-size: clamp(32px, 10vw, 38px);
  }
}

/* 제목의 노란 형광 표시. 글자 아래쪽 0.55em을 칠한다. */
.hero-mark {
  padding: 0 0.06em;
  box-shadow: inset 0 -0.55em 0 #ffce00;
}

.hero-lead {
  margin: 24px 0 0;
  max-width: 560px;
  font-size: 19px;
  line-height: 1.7;
  color: #4a5160;
}

.hero-actions {
  margin-top: 36px;
  max-width: 500px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.hero-actions .btn {
  flex: 1 1 200px;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60px;
  box-sizing: border-box;
  padding: 0 24px;
  border-radius: 16px;
  text-decoration: none;
  font-size: 18px;
  font-weight: 700;
}

.btn-dark {
  background: #1a1d23;
  color: #ffffff;
}

.btn-light {
  background: #f1efe9;
  color: #1a1d23;
}

.hero-note {
  margin: 16px 0 0;
  font-size: 14px;
  color: #5b6270;
}

/* 겹친 카드 세 장 */
.hero-art {
  position: relative;
  flex: 1 1 340px;
  max-width: 500px;
  min-width: 0;
  padding: 8px 0;
}

.hero-card {
  box-sizing: border-box;
  border-radius: 20px;
  transform: rotate(var(--rot));
}

.card-label {
  display: flex;
  align-items: center;
  font-size: 13px;
  font-weight: 800;
}

.card-label svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 첫째 카드: 지문 */
.card-passage {
  --rot: -4deg;
  width: 82%;
  padding: 22px 24px 24px;
  background: #e3e9ff;
}

.card-passage .card-label {
  gap: 8px;
  color: #1f36a3;
}

.passage-text {
  margin: 10px 0 0;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 17px;
  line-height: 1.75;
  color: #1a1d23;
}

.pen-line {
  text-decoration: underline;
  text-decoration-color: #2e4bd1;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.marker {
  padding: 1px 3px;
  border-radius: 4px;
  background: #ffce00;
}

/* 둘째 카드: AI 튜터의 질문 */
.card-tutor {
  --rot: 3deg;
  position: relative;
  z-index: 2;
  width: 84%;
  margin: -18px 0 0 16%;
  padding: 20px 22px 16px;
  background: #fff0b0;
  box-shadow: 0 12px 28px rgba(26, 29, 35, 0.08);
}

.card-tutor .card-label {
  gap: 6px;
  color: #2e4bd1;
}

.tutor-q {
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border-radius: 14px;
  background: #ffffff;
}

.tutor-q-tag {
  flex: none;
  padding-top: 3px;
  font-size: 13px;
  font-weight: 800;
  color: #2e4bd1;
}

.tutor-q-text {
  font-size: 18px;
  line-height: 1.45;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.tutor-skip {
  margin-top: 10px;
  text-align: right;
  font-size: 13px;
  font-weight: 700;
  color: #4a5160;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* 셋째 카드: 진행 */
.card-progress {
  --rot: -2deg;
  position: relative;
  z-index: 1;
  width: 80%;
  margin: -14px 0 0 4%;
  padding: 22px 24px 24px;
  background: #2e4bd1;
  color: #ffffff;
}

.progress-head {
  display: flex;
  align-items: center;
  gap: 12px;
}

.progress-check {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffce00;
  color: #1a1d23;
}

.progress-check svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.progress-title {
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.01em;
}

.progress-bars {
  margin-top: 18px;
  display: flex;
  gap: 6px;
}

.progress-bars span {
  flex: 1 1 0;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.3);
}

.progress-bars span.is-full {
  background: #ffce00;
}

.progress-words {
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  color: #e4e9ff;
}

/* ---------- 스토어 배지 (첫 화면과 맨 아래 내려받기 구역. 시안의 글자 단추 자리에 대표 지시로 넣었다) ----------
 * 그림은 Apple과 Google이 배포한 파일 그대로다. 모양, 색, 비율을 바꾸지 않는다.
 * 두 배지의 보이는 높이를 --badge-h 하나로 맞춘다. Google 그림(646x250)은 위아래에 투명한 여백이 29px씩 들어 있어서,
 * 보이는 부분(646x192)만 드러나게 상자 크기를 잡고 여백을 잘라 보인다.
 * 둘레 여백은 배지 높이의 4분의 1 이상(두 회사 지침)이다. 배지에는 움직임을 넣지 않는다(Apple 지침).
 */
.store-badge {
  display: block;
  flex: none;
}

.store-badge img {
  display: block;
  height: var(--badge-h);
  width: auto;
}

.store-badge-google img {
  width: calc(var(--badge-h) * 646 / 192);
  object-fit: cover;
  object-position: center;
}

.store-badge[href]:hover {
  opacity: 0.9;
}

.hero-stores {
  --badge-h: 40px;
  margin-top: 20px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 20px;
}

/* ---------- 2. 한 문제, 네 걸음 ---------- */

.how {
  background: #fdf8ec;
}

.steps {
  margin-top: 56px;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid #ece5d3;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
}

/* 걸음 목록 */
.steps-list {
  flex: 1 1 340px;
  min-width: 0;
  background: #ffffff;
}

.step {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  min-height: 68px;
  padding: 20px 24px;
  border: 0;
  border-bottom: 1px solid #efebe2;
  background: #ffffff;
  box-shadow: inset 4px 0 0 transparent;
  text-align: left;
  font-family: inherit;
  color: #1a1d23;
  cursor: default;
}

.step-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-no {
  flex: none;
  padding: 3px 10px;
  border-radius: 999px;
  background: #ffce00;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 800;
}

.step-name {
  font-size: 18px;
  font-weight: 700;
}

.step-dot {
  flex: none;
  margin-left: auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #dcd7cc;
}

/* 걸음의 설명. 스크립트가 없으면 네 걸음 모두 펼쳐져 있다. */
.step-more,
.step-clip {
  display: block;
}

.step-desc {
  display: block;
  padding-top: 10px;
  font-size: 15px;
  line-height: 1.65;
  font-weight: 400;
  color: #4a5160;
}

/* 걸음이 저절로 넘어갈 때 차오르는 막대. 3부에서만 보인다. */
.step-bar {
  display: none;
}

/* 걸음마다의 실제 앱 화면. 스크립트가 없으면 네 장이 위아래로 놓인다. */
.steps-stage {
  flex: 5 1 480px;
  min-width: 0;
  min-height: clamp(320px, 45vw, 640px);
  box-sizing: border-box;
  padding: clamp(20px, 4vw, 48px);
  background: #e3e9ff;
  display: grid;
  align-content: center;
  gap: 40px;
}

.step-shot {
  width: 100%;
  max-width: 680px;
  margin: 0 auto;
}

.step-shot-narrow {
  max-width: 360px;
}

.step-shot img {
  width: 100%;
  height: auto;
  display: block;
  box-sizing: border-box;
  border: 1px solid #c9d2f5;
  border-radius: 16px;
}

.step-shot figcaption {
  margin-top: 16px;
  text-align: center;
  font-size: 15px;
  line-height: 1.6;
  color: #2a3350;
}

.how-note {
  margin: 36px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 20px;
  line-height: 1.6;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* ---------- 3. 세 가지 영역 ---------- */

.areas {
  background: #ffffff;
}

.areas-grid {
  margin-top: 56px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
}

.area {
  min-width: 0;
  border: 1px solid #e9e4d8;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
}

/* 카드 위쪽의 그림 칸 */
.area-art {
  position: relative;
  height: 232px;
  overflow: hidden;
}

.area-art-reading {
  background: #e3e9ff;
}

.area-art-reading img {
  width: 56%;
  height: auto;
  display: block;
  margin: 26px auto 0;
  box-sizing: border-box;
  border: 1px solid #c9d2f5;
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
}

.area-art-vocab,
.area-art-grammar {
  display: grid;
  place-items: center;
}

.area-art-vocab {
  background: #fff0b0;
}

.area-art-grammar {
  background: #dcf1e3;
}

/* 뒤에 비쳐 보이는 카드 */
.area-back {
  position: absolute;
  left: 20%;
  top: 36px;
  width: 60%;
  height: 160px;
  border-radius: 16px;
  background: #ffffff;
  opacity: 0.6;
  transform: rotate(6deg);
}

.area-back-far,
.area-back-near {
  top: 41px;
  height: 150px;
}

.area-back-far {
  opacity: 0.5;
  transform: rotate(8deg);
}

.area-back-near {
  opacity: 0.75;
  transform: rotate(4deg);
}

/* 단어 카드 (단어와 뜻은 예시) */
.vocab-card {
  position: relative;
  width: 60%;
  box-sizing: border-box;
  padding: 18px 20px 16px;
  border-radius: 16px;
  background: #ffffff;
  transform: rotate(-2deg);
}

.vocab-tag {
  font-size: 12px;
  line-height: 1.5;
  font-weight: 800;
  color: #2e4bd1;
}

.vocab-word {
  margin-top: 4px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 28px;
  line-height: 1.3;
}

.vocab-mean {
  margin-top: 2px;
  font-size: 15px;
  color: #4a5160;
}

.vocab-save {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #efebe2;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #2e4bd1;
}

.vocab-save svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 문법 카드 (카드 내용은 예시) */
.grammar-card {
  position: relative;
  width: 60%;
  box-sizing: border-box;
  padding: 18px 20px;
  border-radius: 16px;
  background: #ffffff;
}

.grammar-tag {
  font-size: 12px;
  line-height: 1.5;
  font-weight: 800;
  color: #1c5a3a;
}

.grammar-title {
  margin-top: 4px;
  font-size: 22px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.grammar-rule {
  margin-top: 8px;
  display: inline-block;
  padding: 4px 10px;
  border-radius: 8px;
  background: #eef6f0;
  font-size: 14px;
  font-weight: 700;
  color: #1a1d23;
}

.grammar-dots {
  margin-top: 14px;
  display: flex;
  gap: 6px;
}

.grammar-dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c9d6cd;
}

.grammar-dots span.is-on {
  width: 18px;
  border-radius: 999px;
  background: #1c5a3a;
}

/* 카드 아래쪽의 글 */
.area-body {
  padding: 26px 28px 30px;
}

.area-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 800;
}

.area-tag-reading {
  background: #e3e9ff;
  color: #1f36a3;
}

.area-tag-vocab {
  background: #fff0b0;
  color: #5c4600;
}

.area-tag-grammar {
  background: #dcf1e3;
  color: #1c5a3a;
}

.area-title {
  margin: 14px 0 0;
  font-size: 24px;
  line-height: 1.4;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.area-lead {
  margin: 8px 0 0;
  font-size: 16px;
  color: #4a5160;
}

.checks {
  list-style: none;
  margin: 20px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 16px;
}

.checks svg {
  flex: none;
  width: 20px;
  height: 20px;
  margin-top: 3px;
  fill: none;
  stroke: #2e4bd1;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 4. 폰에서 찍으면 패드에 ---------- */

.handoff {
  background: #fdf8ec;
}

/* 이 구역의 제목("어려운 지문은 폰으로 찍어서, 같이 공부해 봐요")은 쉼표 뒤에서만 줄이 바뀐다(index.html의 nb 두 덩이).
 * 앞 덩이는 30px 글자로 345px쯤이라(글자 크기의 11.5배) 400px보다 좁은 화면에서는 한 줄에 들어가지 않는다.
 * 그 폭에서는 앞 덩이가 한 줄에 들어가는 크기로 이 제목만 글자를 줄인다(390px에서 29px, 360px에서 27px쯤). 40px은 양옆 여백이다.
 * 제목을 바꾸면 이 규칙도 다시 잰다. 덩이가 칸보다 길면 줄이 바뀌지 않고 옆으로 넘친다. */
@media (max-width: 400px) {
  .handoff .section-title {
    font-size: min(30px, calc((100vw - 40px) / 12));
  }
}

.handoff-row {
  margin-top: 56px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 24px 28px;
}

.handoff-shot {
  min-width: 0;
  margin: 0;
}

.handoff-phone {
  flex: 0 1 300px;
}

.handoff-pad {
  flex: 1 1 420px;
  max-width: 700px;
}

.handoff-shot img {
  width: 100%;
  height: auto;
  display: block;
  box-sizing: border-box;
  border: 1px solid #e6dfcc;
  border-radius: 20px;
}

.handoff-shot figcaption {
  margin-top: 14px;
  text-align: center;
  font-size: 15px;
  font-weight: 700;
}

/* "같은 계정 →" 알약 */
.handoff-link {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 999px;
  background: #ffce00;
  font-size: 14px;
  font-weight: 800;
}

.handoff-link svg {
  flex: none;
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 5. 누가 만들었나 ---------- */

.about {
  background: #ffffff;
}

.about-in {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 40px 64px;
}

.about-copy {
  flex: 1 1 400px;
  min-width: 0;
}

.about-lead {
  margin: 20px 0 0;
  max-width: 520px;
  font-size: 18px;
  line-height: 1.7;
  color: #4a5160;
}

/* 이름의 뜻 */
.name-card {
  flex: 1 1 400px;
  min-width: 0;
  box-sizing: border-box;
  padding: clamp(24px, 3vw, 40px);
  border-radius: 20px;
  background: #fdf8ec;
  border: 1px solid #ece5d3;
}

.name-label {
  margin: 0;
  font-size: 14px;
  font-weight: 800;
  color: #5b6270;
}

.name-eq {
  margin-top: 8px;
  font-size: clamp(40px, 4.2vw, 60px);
  line-height: 1.15;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.name-plus {
  font-weight: 500;
  color: #767b86;
}

.name-tas {
  color: #2e4bd1;
}

.name-grid {
  margin-top: 24px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 12px;
}

.name-part {
  min-width: 0;
  padding: 18px 20px;
  border-radius: 16px;
  background: #ffffff;
}

.name-part-title {
  font-size: 18px;
  line-height: 1.5;
  font-weight: 800;
}

.name-part p {
  margin: 6px 0 0;
  font-size: 15px;
  line-height: 1.6;
  color: #4a5160;
}

/* ---------- 6. 요금제 (시안에는 없다. 2026-11-15 대표 지시로 넣었다) ----------
 * 카드 두 장(기본, 프리미엄)과 접어 둔 "이용 조건". 색과 모서리는 세 영역 카드와 "이름의 뜻" 카드의 값을 따랐다.
 * 금액은 아직 정하지 않아 p.plan-price에 "출시 때 안내"라고만 적었다.
 */

.pricing {
  background: #fdf8ec;
}

/* 좁으면 한 줄에 한 장. min(100%, 300px)은 화면이 300px보다 좁을 때 카드가 옆으로 넘치지 않게 한다. */
.plans {
  max-width: 920px;
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px;
}

.plan {
  min-width: 0;
  box-sizing: border-box;
  padding: clamp(24px, 3vw, 36px);
  border: 2px solid #ece5d3;
  border-radius: 20px;
  background: #ffffff;
}

/* 프리미엄은 둘레를 파랗게 */
.plan-premium {
  border-color: #2e4bd1;
}

.plan-tag {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.5;
  font-weight: 800;
}

.plan-tag-basic {
  background: #e3e9ff;
  color: #1f36a3;
}

.plan-tag-premium {
  background: #fff0b0;
  color: #5c4600;
}

.plan-name {
  margin: 14px 0 0;
  font-size: 28px;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.plan-lead {
  margin: 8px 0 0;
  font-size: 16px;
  color: #4a5160;
}

/* 금액 자리. 금액이 정해지면 이 칸에 넣는다. */
.plan-price {
  margin: 20px 0 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: #f1efe9;
  font-size: 15px;
  font-weight: 700;
  color: #4a5160;
}

/* 들어 있지 않은 것: 회색 글자에 가로줄 표시 */
.plan-list .is-off {
  color: #5b6270;
}

.plan-list .is-off svg {
  stroke: #767b86;
}

.plans-note {
  margin: 28px auto 0;
  max-width: 720px;
  text-align: center;
  font-size: 15px;
  color: #5b6270;
}

/* 이용 조건: 평소에는 접혀 있다. 줄 전체가 아니라 글자 둘레만 눌리게 inline-block으로 두었다. */
.plan-terms {
  max-width: 920px;
  margin: 8px auto 0;
  text-align: center;
}

.plan-terms-q {
  display: inline-block;
  padding: 12px 16px;
  border-radius: 12px;
  list-style: none;
  font-size: 16px;
  line-height: 1.5;
  font-weight: 700;
  color: #1f36a3;
  cursor: pointer;
}

.plan-terms-q::-webkit-details-marker {
  display: none;
}

.plan-terms-q svg {
  width: 20px;
  height: 20px;
  margin-left: 2px;
  vertical-align: -4px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.plan-terms[open] .plan-terms-q svg {
  transform: rotate(180deg);
}

.plan-terms-list {
  margin: 8px 0 0;
  padding: 22px 24px 22px 44px;
  border: 1px solid #ece5d3;
  border-radius: 16px;
  background: #ffffff;
  text-align: left;
  font-size: 15px;
  line-height: 1.7;
  color: #4a5160;
}

.plan-terms-list li + li {
  margin-top: 8px;
}

.plan-terms-list a {
  color: #2e4bd1;
}

.plan-terms-list a:hover {
  color: #1f36a3;
}

/* ---------- 7. 자주 묻는 것 ----------
 * 시안에서는 바탕이 크림색이었다. 바로 위에 요금제 구역(크림색)이 들어와 흰색으로 바꿨다(구역마다 바탕이 번갈아 나오게).
 */

.faq {
  background: #ffffff;
}

.faq-list {
  max-width: 820px;
  margin: 48px auto 0;
  display: grid;
  gap: 12px;
}

.faq-item {
  border: 1px solid #ece5d3;
  border-radius: 16px;
  overflow: hidden;
  background: #ffffff;
}

/* 질문 줄. 시안의 단추와 같은 모양이다(글자 줄 높이도 단추의 기본값인 normal).
 * 화살표는 오른쪽에 띄워 두었다. <summary>의 flex를 모르는 예전 Safari에서도 화살표가 제자리에 있게 하려는 것이다.
 * 오른쪽 여백 62px = 시안의 여백 24px + 화살표 22px + 사이 16px. */
.faq-q {
  position: relative;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 68px;
  padding: 18px 62px 18px 24px;
  list-style: none;
  font-size: 18px;
  line-height: normal;
  font-weight: 700;
  color: #1a1d23;
  cursor: pointer;
}

.faq-q::-webkit-details-marker {
  display: none;
}

.faq-q h3 {
  margin: 0;
  font: inherit;
}

.faq-q svg {
  position: absolute;
  right: 24px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.faq-item[open] .faq-q svg {
  transform: rotate(180deg);
}

.faq-a {
  margin: 0;
  padding: 0 24px 22px;
  font-size: 16px;
  line-height: 1.7;
  color: #4a5160;
}

.faq-a a {
  color: #2e4bd1;
}

.faq-a a:hover {
  color: #1f36a3;
}

/* ---------- 8. 앱 내려받기 ---------- */

.download {
  background: #2e4bd1;
  color: #ffffff;
}

.download-in {
  padding-top: clamp(64px, 7vw, 100px);
  padding-bottom: clamp(64px, 7vw, 100px);
  text-align: center;
}

.download-pill {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: #ffce00;
  color: #1a1d23;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 800;
}

.download-title {
  margin: 20px 0 0;
  font-size: clamp(32px, 4.2vw, 56px);
  line-height: 1.2;
  font-weight: 800;
  letter-spacing: -0.03em;
}

.download-lead {
  margin: 16px auto 0;
  max-width: 640px;
  font-size: 18px;
  line-height: 1.7;
  color: #eef1ff;
}

/* 배지 두 장과 그 아래의 "출시 준비 중". 휴대폰 폭에서도 두 장이 나란히 놓이게 높이를 44~56px 사이에서 잡는다. */
.stores {
  --badge-h: clamp(44px, 12.5vw, 56px);
  margin-top: 36px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 24px calc(var(--badge-h) / 2);
}

.store {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.store-state {
  margin-top: 14px;
  font-size: 13px;
  line-height: 1.5;
  font-weight: 700;
  color: #eef1ff;
}

.download a:focus-visible {
  outline-color: #ffffff;
}

/* ---------- 바닥글 ---------- */

.site-footer {
  background: #ffffff;
}

.footer-in {
  padding-top: 44px;
  padding-bottom: 56px;
}

.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 32px;
}

.footer-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  color: #1a1d23;
  text-decoration: none;
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.02em;
}

.footer-brand svg {
  flex: none;
  width: 24px;
  height: 24px;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 8px;
}

.footer-nav a {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 0 8px;
  color: #1a1d23;
  text-decoration: none;
  font-size: 15px;
  font-weight: 500;
}

.footer-nav a.is-strong {
  font-weight: 700;
}

/* 사업자 정보 */
.footer-biz {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid #efebe2;
  font-size: 14px;
  line-height: 1.9;
  color: #5b6270;
}

.footer-biz p {
  margin: 0;
}

.footer-biz p.footer-gap {
  margin-top: 12px;
}

.footer-biz a {
  color: inherit;
}

/* 줄이 바뀔 때 중간에서 끊기면 안 되는 묶음(등록번호, 전화번호 등) */
.nb {
  white-space: nowrap;
}

/* 초안 안내 한 줄. draft.css의 --draft로 켜고 끈다. */
.draft-only {
  display: var(--draft);
}

/* 상표 표기 (스토어 배지를 쓰는 동안 둔다) */
.footer-legal {
  max-width: 820px;
  font-size: 12px;
  line-height: 1.7;
}

/* ---------- 움직임을 멈추고 켜는 작은 단추 (첫 화면의 카드, 네 걸음의 자동 넘김) ----------
 * 저절로 움직이는 것이 있을 때만 landing.js가 보여 준다. 시안에는 없다.
 */
.motion-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px 0 10px;
  border: 1px solid #e3ded2;
  border-radius: 999px;
  background: #ffffff;
  color: #4a5160;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.motion-toggle:hover {
  border-color: #c9c3b4;
  color: #1a1d23;
}

.motion-toggle svg {
  flex: none;
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.motion-toggle .icon-play {
  display: none;
  fill: currentColor;
  stroke-width: 1.5;
}

.motion-toggle.is-off .icon-pause {
  display: none;
}

.motion-toggle.is-off .icon-play {
  display: block;
}

/* 첫 화면의 단추는 카드 아래 여백에 띄워 둔다. 자리를 차지하지 않으므로 배치가 밀리지 않는다. */
.hero-art > .motion-toggle {
  position: absolute;
  right: 0;
  bottom: -38px;
}

/* ======================================================================
 * 2부. 스크립트가 있을 때의 배치 (<html class="js">)
 * "네 걸음": 고른 걸음의 설명만 펼치고, 앱 화면은 한 장씩 옆으로 넘긴다.
 * ==================================================================== */

/* 큰 문구를 바꿔 넣기 전까지 제목을 가려 둔다(자리는 그대로 차지한다). hero-copy.js가 <html>에 붙였다가 바꾼 뒤에 뗀다.
 * 적힌 문구가 먼저 보였다가 다른 문구로 바뀌는 깜빡임을 막는다. 스크립트가 없으면 붙지 않는다. */
.hero-copy-wait .hero-title {
  visibility: hidden;
}

.js .step {
  cursor: pointer;
}

.js .step.is-active {
  background: #f3f5ff;
  box-shadow: inset 4px 0 0 #ffce00;
}

.js .step.is-active .step-dot {
  background: #1a1d23;
}

.js .step:not(.is-active):hover {
  background: #fafbff;
}

/* 설명은 고른 걸음만 보인다. 높이 0과 제 높이 사이를 오가게 하려고 한 줄짜리 격자에 넣었다. */
.js .step-more {
  display: grid;
  grid-template-rows: 0fr;
}

.js .step.is-active .step-more {
  grid-template-rows: 1fr;
}

.js .step-clip {
  min-height: 0;
  overflow: hidden;
}

/* 목록 맨 아래의 "자동 넘김" 단추 줄 */
.js .steps-list {
  display: flex;
  flex-direction: column;
}

.steps-auto {
  margin-top: auto;
  padding: 12px 20px;
}

/* 앱 화면 네 장을 옆으로 나란히 놓고 한 장씩 보인다. 손가락으로 옆으로 넘길 수 있다(scroll-snap).
 * 네 장의 높이가 같아져서, 걸음이 바뀌어도 아래쪽 배치가 밀리지 않는다. */
.js .steps-stage {
  padding: 0;
  display: flex;
  gap: 0;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.js .steps-stage::-webkit-scrollbar {
  display: none;
}

.js .step-slide {
  flex: 0 0 100%;
  box-sizing: border-box;
  padding: clamp(20px, 4vw, 48px);
  display: grid;
  align-content: center;
  scroll-snap-align: center;
  scroll-snap-stop: always;
}

/* ======================================================================
 * 3부. 움직임
 * 기기의 "움직임 줄이기"가 켜져 있으면 이 묶음 전체가 먹지 않는다.
 * <html class="js-motion">은 스크립트가 있고 움직임이 허용될 때 landing.js가 붙인다.
 * 5초 넘게 저절로 움직이는 것(카드의 둥실거림, 질문 바뀜, 걸음 자동 넘김)은 js-motion일 때만 돌고,
 * 그때는 멈추는 단추가 함께 보인다.
 * ==================================================================== */

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }

  /* ---------- 단추: 올리면 살짝 뜨고, 누르면 눌린다 ---------- */

  .btn {
    transition: transform 0.16s ease, box-shadow 0.16s ease;
  }

  .btn:active {
    transform: scale(0.97);
    box-shadow: none;
  }

  .step,
  .step-dot,
  .faq-q {
    transition: background-color 0.2s ease, box-shadow 0.2s ease;
  }

  .faq-q svg,
  .plan-terms-q svg {
    transition: transform 0.25s ease;
  }

  /* ---------- 첫 화면: 카드가 차례로 미끄러져 들어온다 (한 번, 스크립트 없이도 돈다) ---------- */

  .hero-card {
    animation: card-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) var(--in-delay) backwards;
  }

  .card-passage {
    --in-delay: 0.1s;
  }

  .card-tutor {
    --in-delay: 0.28s;
  }

  .card-progress {
    --in-delay: 0.46s;
  }

  @keyframes card-in {
    from {
      opacity: 0;
      transform: translate(48px, 18px) rotate(calc(var(--rot) + 5deg));
    }
  }

  /* 제목의 형광 표시가 왼쪽에서 오른쪽으로 그어진다 (한 번).
   * 안쪽 그림자는 폭을 바꿀 수 없어서, 같은 자리에 같은 색의 바탕 그림을 깔고 그 폭을 0에서 끝까지 늘린다. */
  .hero-mark {
    box-shadow: none;
    background: linear-gradient(#ffce00, #ffce00) no-repeat left bottom / 100% 0.55em;
    animation: mark-draw 0.9s cubic-bezier(0.3, 0.7, 0.2, 1) 0.45s backwards;
  }

  @keyframes mark-draw {
    from {
      background-size: 0% 0.55em;
    }
  }

  /* 지문 카드: 펜 밑줄과 형광펜이 차례로 그어진다 (한 번) */
  .marker {
    background: linear-gradient(#ffce00, #ffce00) no-repeat left center / 100% 100%;
    animation: marker-draw 0.6s ease-out 1.5s backwards;
  }

  @keyframes marker-draw {
    from {
      background-size: 0% 100%;
    }
  }

  .pen-line {
    animation: pen-draw 0.6s ease-out 1.05s backwards;
  }

  @keyframes pen-draw {
    from {
      text-decoration-color: transparent;
    }
  }

  /* ---------- 첫 화면: 들어온 뒤로는 아주 천천히 떠 있다 (멈추는 단추가 있을 때만) ---------- */

  .js-motion .hero-card {
    animation:
      card-in 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) var(--in-delay) backwards,
      card-float var(--float-time) ease-in-out calc(var(--in-delay) + 1s) infinite alternate;
  }

  .card-passage {
    --float-time: 5.6s;
    --float-y: -7px;
    --float-rot: 0.7deg;
  }

  .card-tutor {
    --float-time: 6.8s;
    --float-y: 6px;
    --float-rot: -0.6deg;
  }

  .card-progress {
    --float-time: 7.6s;
    --float-y: -5px;
    --float-rot: 0.5deg;
  }

  @keyframes card-float {
    from {
      transform: translateY(0) rotate(var(--rot));
    }

    to {
      transform: translateY(var(--float-y)) rotate(calc(var(--rot) + var(--float-rot)));
    }
  }

  .hero-art.is-paused .hero-card {
    animation-play-state: paused;
  }

  /* ---------- 첫 화면의 튜터 카드: 질문이 타자 치듯 나오고, 진행 카드가 한 칸씩 찬다 ----------
   * 질문과 진행 제목은 같은 칸에 겹쳐 두고 하나만 보인다. 가장 긴 것에 맞춰 칸이 잡혀서 바뀌어도 카드 크기가 그대로다.
   */
  .js-motion .tutor-q-text,
  .js-motion .progress-title {
    display: grid;
  }

  .js-motion .tutor-q-text > span,
  .js-motion .progress-title > span {
    grid-area: 1 / 1;
    visibility: hidden;
  }

  .js-motion .tutor-q-text > span.is-on {
    visibility: visible;
  }

  /* 아직 치지 않은 글자. 자리는 차지하므로 줄바꿈이 치는 도중에 바뀌지 않는다. */
  .js-motion .tutor-q-text .q-rest {
    visibility: hidden;
  }

  /* 글자 끝의 깜박이는 막대 */
  .js-motion .tutor-q-text .q-typed.is-typing {
    box-shadow: 2px 0 0 #2e4bd1;
    animation: caret 0.9s steps(1) infinite;
  }

  @keyframes caret {
    50% {
      box-shadow: 2px 0 0 transparent;
    }
  }

  .js-motion .progress-title > span {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s ease, transform 0.35s ease, visibility 0s linear 0.35s;
  }

  .js-motion .progress-title > span.is-on {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .js-motion .progress-title > span.is-out {
    transform: translateY(-8px);
  }

  /* 막대: 노란 속이 왼쪽부터 찬다 */
  .js-motion .progress-bars span {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.3);
  }

  .js-motion .progress-bars span::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: #ffce00;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.55s cubic-bezier(0.3, 0.7, 0.2, 1);
  }

  .js-motion .progress-bars span.is-full::after {
    transform: scaleX(1);
  }

  /* 낱말: 지나온 단계만 또렷하다 */
  .js-motion .progress-words span {
    opacity: 0.5;
    transition: opacity 0.4s ease;
  }

  .js-motion .progress-words span.is-on {
    opacity: 1;
  }

  /* 체크 동그라미: 한 칸 찰 때마다 톡 튄다. 아직 아무것도 안 찼을 때는 빈 막대와 같은 색이다. */
  .js-motion .progress-check {
    transition: background-color 0.3s ease, color 0.3s ease;
  }

  .js-motion .card-progress.is-zero .progress-check {
    background: rgba(255, 255, 255, 0.3);
    color: #ffffff;
  }

  .js-motion .progress-check.is-pop {
    animation: check-pop 0.5s cubic-bezier(0.3, 1.6, 0.5, 1);
  }

  @keyframes check-pop {
    40% {
      transform: scale(1.28);
    }
  }

  /* ---------- 네 걸음: 설명이 펼쳐지고, 저절로 넘어갈 때 막대가 찬다 ---------- */

  .js .step-more {
    transition: grid-template-rows 0.4s ease;
  }

  .js-motion .step-bar {
    display: block;
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 100%;
    height: 3px;
    background: #2e4bd1;
    transform: scaleX(0);
    transform-origin: left center;
  }

  /* 막대가 다 차면 landing.js가 다음 걸음으로 넘긴다. 그래서 막대를 멈추면 넘김도 멈춘다.
   * 멈추는 때: 마우스를 올렸을 때, 구역이 화면 밖일 때, 탭이 가려졌을 때(is-waiting), 키보드 초점이 걸음에 있을 때.
   * 멈춤 규칙은 위의 animation 줄보다 선택자가 길어야 먹는다(.step.is-active를 빼면 안 된다). */
  .js-motion .steps.is-auto .step.is-active .step-bar {
    animation: step-fill 5.5s linear forwards;
  }

  .js-motion .steps.is-auto.is-waiting .step.is-active .step-bar {
    animation-play-state: paused;
  }

  /* 마우스가 있는 기기에서만 올렸을 때 멈춘다(터치 화면에서는 한 번 누른 자리가 올린 것으로 남기 때문이다). */
  @media (hover: hover) {
    .js-motion .steps.is-auto:hover .step.is-active .step-bar {
      animation-play-state: paused;
    }
  }

  /* :has를 모르는 브라우저는 이 규칙만 건너뛴다. 그래서 위 규칙과 따로 적었다. */
  .js-motion .steps.is-auto:has(.step:focus-visible) .step.is-active .step-bar {
    animation-play-state: paused;
  }

  @keyframes step-fill {
    to {
      transform: scaleX(1);
    }
  }

  /* ---------- 스크롤: 구역이 화면에 들어올 때 아래에서 살짝 올라온다 ----------
   * landing.js가 처음에 화면 아래쪽에 있던 것에만 reveal-wait(숨김)를 붙였다가, 보이면 떼면서 reveal(움직이는 방법)을 붙인다.
   * 스토어 배지가 든 내려받기 구역에는 쓰지 않는다.
   */
  .reveal {
    transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .reveal[data-reveal='1'] {
    transition-delay: 0.12s;
  }

  .reveal[data-reveal='2'] {
    transition-delay: 0.24s;
  }

  .reveal-wait {
    opacity: 0;
    transform: translateY(28px);
  }

  /* 세 영역 카드: 뒤에 비친 카드가 펼쳐진다 */
  .reveal .area-back {
    transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s;
  }

  .reveal-wait .area-back {
    transform: rotate(0deg);
  }

  /* ---------- 폰에서 패드로: 폰, "같은 계정" 화살표, 패드가 차례로 (한 번) ---------- */

  .handoff-row.reveal-wait {
    opacity: 1;
    transform: none;
  }

  .handoff-row.reveal-wait .handoff-phone,
  .handoff-row.reveal-wait .handoff-pad {
    opacity: 0;
    transform: translateY(24px);
  }

  .handoff-row.reveal-wait .handoff-link {
    opacity: 0;
    transform: scale(0.6);
  }

  .handoff-row.reveal .handoff-phone {
    transition: opacity 0.6s ease, transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
  }

  .handoff-row.reveal .handoff-link {
    transition: opacity 0.3s ease 0.35s, transform 0.45s cubic-bezier(0.3, 1.5, 0.5, 1) 0.35s;
  }

  /* 화살표가 패드 쪽으로 세 번 흐른다 */
  .handoff-row.is-in .handoff-link svg {
    animation: arrow-flow 0.6s ease-in-out 0.7s 3;
  }

  @keyframes arrow-flow {
    50% {
      transform: translateX(6px);
    }
  }

  /* 패드가 톡 나타나고, 도착했다는 뜻으로 둘레가 한 번 번진다 */
  .handoff-row.reveal .handoff-pad {
    transition: opacity 0.4s ease 1.1s, transform 0.6s cubic-bezier(0.3, 1.4, 0.5, 1) 1.1s;
  }

  .handoff-row.is-in .handoff-pad img {
    animation: arrive 1s ease-out 1.7s;
  }

  @keyframes arrive {
    from {
      box-shadow: 0 0 0 0 rgba(46, 75, 209, 0.45);
    }

    to {
      box-shadow: 0 0 0 18px rgba(46, 75, 209, 0);
    }
  }

  /* ---------- 자주 묻는 것, 요금제의 이용 조건: 답이 스르르 나타난다 ---------- */

  .faq-item[open] .faq-a,
  .plan-terms[open] .plan-terms-list {
    animation: faq-in 0.3s ease;
  }

  @keyframes faq-in {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
  }
}

/* 인쇄할 때는 아직 나타나지 않은 구역도 모두 보이게 한다 */
@media print {
  .reveal-wait,
  .handoff-row.reveal-wait > * {
    opacity: 1 !important;
    transform: none !important;
  }

  /* 인쇄 직전에 펴는 요금제의 이용 조건과 열려 있는 답은 스르르 나타나지 않고 바로 보이게 한다 */
  .plan-terms-list,
  .faq-a {
    animation: none !important;
  }
}

/* 마우스가 있는 기기에서만: 단추에 올리면 살짝 뜬다 */
@media (prefers-reduced-motion: no-preference) and (hover: hover) {
  .btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(26, 29, 35, 0.18);
  }

  .btn:active {
    transform: scale(0.97);
    box-shadow: none;
  }
}