@font-face {
  font-family: "Pretendard";
  src: url("./assets/fonts/Pretendard-Regular-subset.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("./assets/fonts/Pretendard-Medium-subset.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("./assets/fonts/Pretendard-SemiBold-subset.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("./assets/fonts/Pretendard-Bold-subset.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("./assets/fonts/Pretendard-ExtraBold-subset.woff2") format("woff2");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Pretendard";
  src: url("./assets/fonts/Pretendard-Black-subset.woff2") format("woff2");
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --blue: #3c5cff;
  --brand-blue: #2e8fff;
  --sky: #66bfff;
  --text: #2e3438;
  --black: #00000b;
  --muted: #5a6480;
  --line: #dee1e7;
  --panel: #f6f8fc;
  --tint: #fafbfe;
  /* 이전에는 CSS가 #273036이고 그 위를 steps-bg.svg(#2C3237)가 덮고 있어
     실제 렌더 색은 SVG 쪽이었습니다. SVG를 제거했으므로 그 값으로 맞춥니다. */
  --dark-section: #2c3237;
  --max: 1280px;

  /* 색 블록 섹션(이용방법 · CTA)의 모서리 반경입니다.
     이 두 섹션은 1280px 폭 안에 색 덩어리로 놓이므로 직각이면 각져 보입니다. */
  --block-radius: 40px;

  /* 모든 섹션이 공유하는 좌우 기준선입니다.
     헤딩, 카드 그리드, FAQ 목록이 같은 값을 쓰게 해서 좌측 정렬선을 하나로 맞춥니다.
     이전에는 섹션마다 114px / 95px / 22px이 섞여 있어 정렬선이 어긋나 있었습니다. */
  --gutter: 114px;

  /* 8px 배수 세로 리듬 스케일입니다.
     이전에는 144 / 123 / 108 / 88 / 86px처럼 공통 배수가 없어 섹션 전환마다 리듬이 끊겼습니다. */
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 40px;
  --space-6: 48px;
  --space-8: 64px;
  --space-9: 72px;
  --space-12: 96px;
  --space-14: 112px;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: #ffffff;
  color: var(--text);
  font-family: Pretendard, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  letter-spacing: -0.5px;
}

body.modal-open {
  overflow: hidden;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  border: 0;
  font: inherit;
  cursor: pointer;
}

.section-frame {
  width: min(100%, var(--max));
  margin: 0 auto;
  position: relative;
  overflow: hidden;
}

/* 마지막 CTA 블록이 문서 끝에 붙으면 그림자가 잘려 카드가 떠 보이지 않습니다.
   .cta에 margin-bottom을 주면 main을 통과해 body로 상쇄되어 문서 높이에 반영되지 않으므로,
   상쇄되지 않는 padding으로 아래 여백을 확보합니다. */
main {
  padding-bottom: var(--space-6);
}

/* 스크롤 중에도 앱 다운로드 버튼에 계속 닿을 수 있게 헤더를 고정합니다. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: #ffffff;
  border-bottom: 1px solid rgba(46, 143, 255, 0.16);
  transition: box-shadow 220ms ease, background-color 220ms ease;
}

/* 스크롤이 시작되면 헤더가 콘텐츠 위에 떠 있음을 그림자로 알립니다. */
.site-header.is-scrolled {
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(10px);
  box-shadow: 0 6px 24px rgba(46, 143, 255, 0.1);
}

/* 고정 헤더가 앵커 대상의 제목을 덮지 않도록 여유를 둡니다. */
#top,
#features,
#how-it-works,
#faq {
  scroll-margin-top: 100px;
}

.header-inner {
  width: min(100%, var(--max));
  height: 84px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 64px 14px 44px;
  gap: 40px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-width: 198px;
  color: var(--blue);
  font-size: 23px;
  font-weight: 800;
  line-height: 1;
}

.brand img {
  width: 38px;
  height: 38px;
}

.nav {
  display: flex;
  align-items: center;
  /* 110px은 Figma 좌표에서 온 값으로, 메뉴가 과도하게 흩어져 헤더가 비어 보였습니다. */
  gap: var(--space-6);
  color: var(--text);
  font-size: 20px;
  font-weight: 600;
  line-height: 30px;
  white-space: nowrap;
}

.nav a {
  transition: color 160ms ease;
}

.nav a:hover {
  color: var(--blue);
}

.header-download {
  width: 136px;
  height: 56px;
  border-radius: 12px;
  background: var(--brand-blue);
  color: #ffffff;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 10px 24px rgba(46, 143, 255, 0.18);
}

.hero {
  height: 600px;
}

.hero-bg {
  position: absolute;
  inset: -35% -17% -43%;
  width: 134%;
  height: 178%;
  object-fit: fill;
  pointer-events: none;
}

.hero-copy {
  position: absolute;
  left: var(--gutter);
  top: 96px;
  z-index: 2;
}

.eyebrow {
  margin: 0 0 10px;
  color: #0098ff;
  font-size: 18px;
  font-weight: 800;
  line-height: 28px;
  letter-spacing: 2.5px;
}

.hero-eyebrow {
  color: var(--black);
}

/* 배지와 eyebrow를 한 줄에 두어 히어로 높이를 늘리지 않고 출시 상태를 노출합니다. */
.hero-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.hero-meta .eyebrow {
  margin: 0;
}

.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgba(60, 92, 255, 0.24);
  border-radius: 999px;
  padding: 5px 12px;
  background: rgba(60, 92, 255, 0.08);
  color: var(--blue);
  font-size: 14px;
  font-weight: 800;
  line-height: 20px;
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.hero-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--blue);
}

.hero h1 {
  margin: 0;
  color: var(--black);
  font-size: 56px;
  font-weight: 900;
  line-height: 69px;
  white-space: pre-line;
}

.hero h1 span {
  color: var(--blue);
}

.hero-description {
  margin: 24px 0 0;
  color: var(--black);
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
}

.hero-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 36px;
}

.btn {
  min-width: 184px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  padding: 0 24px;
  font-size: 16px;
  font-weight: 800;
  line-height: 24px;
  letter-spacing: -0.5px;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.btn:hover,
.header-download:hover,
.store-badge:hover {
  transform: translateY(-1px);
}

.btn-light {
  background: #ffffff;
  color: var(--black);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3), 0 2px 3px rgba(0, 0, 0, 0.15);
}

.btn-dark {
  background: var(--black);
  color: #ffffff;
  box-shadow: 0 4px 4px rgba(0, 0, 0, 0.15), 0 1px 1.5px rgba(0, 0, 0, 0.3);
}

.store-badges {
  position: absolute;
  right: 106px;
  bottom: 116px;
  z-index: 2;
  display: flex;
  gap: 10px;
}

.store-badge {
  position: relative;
  height: 40px;
  display: block;
  overflow: hidden;
  transition: transform 160ms ease;
}

.app-store-badge {
  width: 119.664px;
}

.google-play-badge {
  width: 135px;
}

.store-badge img {
  position: absolute;
  display: block;
  max-width: none;
}

.google-play-badge img,
.app-store-bg {
  inset: 0;
  width: 100%;
  height: 100%;
}

.app-store-icon {
  left: 8.33%;
  top: 21.8%;
  width: 14.81%;
  height: 54.44%;
}

.app-store-text-top {
  left: 29.81%;
  top: 21.09%;
  width: 57.78%;
  height: 15.9%;
}

.app-store-text-main {
  left: 28.77%;
  top: 44.68%;
  width: 62.73%;
  height: 39.05%;
}

.features {
  min-height: 1180px;
  background:
    radial-gradient(circle at 95% 7%, rgba(46, 143, 255, 0.2), transparent 24%),
    radial-gradient(circle at 88% 56%, rgba(46, 143, 255, 0.18), transparent 26%),
    #ffffff;
}

.section-heading {
  position: relative;
  z-index: 3;
  padding-left: var(--gutter);
}

.section-heading h2 {
  margin: 0;
  color: var(--text);
  font-size: 36px;
  font-weight: 900;
  line-height: 54px;
}

.features-heading {
  padding-top: var(--space-14);
}

/* 이전 위치(top 250px / 430px)에서는 오른쪽 기능 카드와 세로로 겹쳐
   지갑이 카드 뒤에 반쯤 잘린 채 보였습니다.
   카드 시작선(448px) 위쪽으로 올려 헤딩과 좌우 균형을 잡는 장식 요소로 씁니다. */
.wallet-visual {
  position: absolute;
  top: 120px;
  right: -40px;
  width: 320px;
  height: 320px;
  object-fit: contain;
}

/* 원본 크기(862px)로는 섹션 하단이 잘려 다크 섹션에 폰이 절단된 채로 물렸습니다.
   0.88배로 줄여 섹션 안에 온전히 들어오게 하고, 오른쪽에 카드가 들어갈 폭을 만듭니다. */
.phone-mockup {
  position: absolute;
  left: var(--gutter);
  top: 337px;
  width: 423px;
  height: 862px;
  transform: scale(0.82);
  transform-origin: top left;
  filter: drop-shadow(0 28px 80px rgba(67, 91, 255, 0.24));
}

.phone-frame {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.phone-status {
  position: absolute;
  left: 5.67%;
  top: 2.78%;
  z-index: 3;
  width: 88.66%;
  height: 76px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 36px;
  color: #000000;
  font-size: 16px;
  font-weight: 800;
}

.phone-status i {
  width: 110px;
  height: 32px;
  border-radius: 999px;
  background: #000000;
}

.status-icons {
  font-size: 12px;
}

.phone-screen {
  position: absolute;
  left: 5.67%;
  top: 2.78%;
  z-index: 2;
  width: 88.66%;
  height: 94.2%;
  overflow: hidden;
  border-radius: 30px;
  padding: 123px 24px 0;
  background: linear-gradient(188deg, #ffffff 34%, rgba(198, 216, 255, 0.48));
}

.phone-screen h3 {
  margin: 0 0 18px;
  color: var(--text);
  font-size: 20px;
  font-weight: 900;
  line-height: 30px;
}

.phone-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 16px;
}

.phone-tabs span {
  padding: 7px 14px;
  border-radius: 999px;
  background: #eef3fb;
  color: #8592a3;
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
}

.phone-tabs .is-active {
  background: var(--blue);
  color: #ffffff;
}

.chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.chip-grid span {
  padding: 8px 15px;
  border: 1px solid #e3e6e8;
  border-radius: 52px;
  background: #ffffff;
  color: #74818b;
  font-size: 16px;
  line-height: 24px;
}

/* 화면 하단을 마무리하는 기본 버튼입니다. 실제 동작하는 버튼이 아니라 목업 요소입니다. */
.phone-cta {
  display: block;
  margin-top: 26px;
  border-radius: 14px;
  padding: 15px 0;
  background: var(--blue);
  box-shadow: 0 10px 24px rgba(60, 92, 255, 0.24);
  color: #ffffff;
  font-size: 17px;
  font-weight: 800;
  line-height: 24px;
  text-align: center;
}

/* 이전에는 left: 193px, bottom: 44px에 3열로 놓여 카드가 폰 화면을 덮고
   섹션 오른쪽 절반은 비어 있었습니다.
   축소된 폰의 오른쪽(114 + 423*0.88 = 486px) 바깥에 세로로 쌓아
   폰(좌) / 기능 목록(우) 2단 구성으로 바꿉니다. 겹침이 사라지고 빈 오른쪽이 채워집니다.
   top 448px은 폰 화면의 첫 문장이 시작되는 높이라 카드 첫 줄과 눈높이가 맞습니다. */
.feature-cards {
  position: absolute;
  left: calc(var(--gutter) + 395px);
  right: var(--gutter);
  top: 448px;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2);
}

.feature-card {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--space-4);
  border-radius: 20px;
  padding: var(--space-5);
  overflow: hidden;
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.feature-card:hover {
  transform: translateY(-4px);
}

.feature-card img {
  flex: none;
  width: 96px;
  height: 96px;
  object-fit: contain;
}

.feature-card-body {
  min-width: 0;
}

.feature-card-body p {
  margin: 6px 0 0;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
  opacity: 0.82;
}

.feature-card h3 {
  margin: 0;
  font-size: 20px;
  font-weight: 900;
  line-height: 30px;
}

.card-white {
  background: #ffffff;
  color: var(--text);
  box-shadow: 0 18px 60px rgba(67, 91, 255, 0.12);
}

/* 흰 카드에만 그림자가 있어 파란/하늘색 카드가 상대적으로 납작해 보였습니다.
   같은 계열의 그림자를 넣어 세 장이 같은 높이에 떠 있게 맞춥니다. */
.card-blue {
  background: #435bff;
  color: #ffffff;
  box-shadow: 0 18px 44px rgba(67, 91, 255, 0.24);
}

.card-sky {
  background: var(--sky);
  color: #ffffff;
  box-shadow: 0 18px 44px rgba(102, 191, 255, 0.28);
}

/* 이전에는 height: 560px 고정이라 콘텐츠가 432px에서 끝나고
   하단 128px이 빈 공간으로 남아 섹션이 미완성처럼 보였습니다.
   높이를 콘텐츠에 맡기고 위아래 여백만 리듬에 맞춥니다.

   모서리를 둥글게 하고 미세한 그라데이션을 넣어 평평한 사각 덩어리로 보이지 않게 합니다.
   기준색은 그대로 두고 위아래로만 아주 약하게 흔듭니다. */
.steps {
  border-radius: var(--block-radius);
  background:
    radial-gradient(circle at 86% 6%, rgba(102, 191, 255, 0.16), transparent 40%),
    linear-gradient(168deg, #333b42 0%, var(--dark-section) 52%, #262c31 100%);
}

.steps-content {
  position: relative;
  z-index: 2;
  padding: var(--space-14) var(--gutter);
}

.steps .eyebrow {
  color: #88d6ff;
}

.steps h2 {
  margin: 0;
  color: #ffffff;
  font-size: 36px;
  font-weight: 900;
  line-height: 54px;
}

/* 173px / 221px / 200px는 Figma에서 텍스트 길이에 맞춰 뜬 값이라
   열 폭이 서로 달라 정렬이 어긋나 보였습니다. 균등 3열로 바꿉니다. */
.step-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-6);
  margin-top: var(--space-8);
}

.step-list article {
  padding-top: var(--space-3);
  border-top: 2px solid rgba(136, 214, 255, 0.28);
}

/* 48px 글자에 line-height 84px이 걸려 번호와 제목 사이가 과하게 벌어져 있었습니다. */
.step-list strong {
  display: block;
  margin-bottom: var(--space-2);
  color: var(--sky);
  font-size: 48px;
  font-weight: 900;
  line-height: 1.1;
}

.step-list h3 {
  margin: 0 0 8px;
  color: #ffffff;
  font-size: 20px;
  font-weight: 900;
  line-height: 30px;
}

.step-list p {
  margin: 0;
  color: #a2c6ff;
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}

/* 흰색 섹션이 연달아 이어져 features / why / faq 경계가 사라져 있었습니다.
   이 섹션만 아주 옅게 톤을 넣어 흰색 -> 톤 -> 다크 -> 톤 -> 흰색 -> 블루로 리듬을 만듭니다. */
.why {
  padding: var(--space-14) 0;
  background:
    radial-gradient(circle at 100% 38%, rgba(46, 143, 255, 0.18), transparent 32%),
    var(--tint);
}

.star-visual {
  position: absolute;
  top: 68px;
  right: 22px;
  width: 330px;
  height: 330px;
  object-fit: contain;
}

/* width: calc(100% - 190px)는 좌측 여백이 95px로 계산되어
   padding-left: 114px인 섹션 헤딩과 19px 어긋나 있었습니다.
   같은 gutter 토큰을 써서 헤딩과 카드의 좌측 정렬선을 일치시킵니다. */
.why-grid {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  width: calc(100% - var(--gutter) * 2);
  margin: var(--space-9) auto 0;
}

/* 이전에는 padding 86px + min-height 255px이라 텍스트가 위로 몰리고
   카드 바닥에 87px 공백이 남아 "내용 없는 상자"로 보였습니다.
   여백을 내용에 맞추고, 톤 배경 위에 흰 카드를 올려 카드가 떠 보이게 합니다. */
.why-grid article {
  padding: var(--space-5) var(--space-4);
  border: 1px solid rgba(60, 92, 255, 0.1);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 10px 30px rgba(67, 91, 255, 0.06);
  transition: transform 200ms ease, box-shadow 200ms ease;
}

.why-grid article:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(67, 91, 255, 0.12);
}

/* 제목 위 작은 강조 바입니다. 아이콘 없이도 카드에 시작점을 만들어 줍니다. */
.why-grid article::before {
  content: "";
  display: block;
  width: 32px;
  height: 4px;
  margin-bottom: var(--space-3);
  border-radius: 999px;
  background: var(--blue);
}

.why-grid h3 {
  margin: 0 0 12px;
  color: var(--text);
  font-size: 20px;
  font-weight: 900;
  line-height: 30px;
}

.why-grid p {
  margin: 0;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}

.faq {
  padding: var(--space-14) 0;
  background: #ffffff;
}

.faq .section-heading {
  padding-top: 0;
}

.faq-list {
  width: calc(100% - var(--gutter) * 2);
  margin: var(--space-9) auto 0;
  border-top: 1px solid var(--line);
}

/* 20px/30px 제목에 위아래 18px은 좁아 항목이 서로 붙어 보였습니다. */
.faq-list details {
  border-bottom: 1px solid var(--line);
  padding: var(--space-3) 0;
}

.faq-list summary {
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-4);
  color: var(--black);
  font-size: 20px;
  font-weight: 900;
  line-height: 30px;
  cursor: pointer;
  transition: color 160ms ease;
}

.faq-list summary:hover {
  color: var(--blue);
}

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

.faq-list summary::after {
  content: "+";
  flex: none;
  color: var(--blue);
  font-size: 26px;
  font-weight: 600;
  line-height: 1;
}

.faq-list details[open] summary::after {
  content: "−";
}

/* 제목 20px 대비 본문 13px은 낙차가 너무 커서 답변이 주석처럼 보였습니다. */
.faq-list p {
  margin: var(--space-2) 0 0;
  padding-right: var(--space-6);
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 26px;
}

/* 단색 파란 사각형이라 넓은 면이 그대로 각져 보였습니다.
   모서리를 둥글게 하고, 로고 뒤쪽 상단에 옅은 발광과 대각 그라데이션을 넣어 깊이를 줍니다.
   아래쪽 그림자는 블록이 흰 배경 위에 떠 있는 것처럼 보이게 합니다. */
.cta {
  height: 460px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: var(--block-radius);
  background:
    radial-gradient(ellipse 70% 60% at 50% -8%, rgba(255, 255, 255, 0.18), transparent 60%),
    radial-gradient(circle at 8% 108%, rgba(46, 143, 255, 0.55), transparent 46%),
    linear-gradient(162deg, #4a67ff 0%, var(--blue) 46%, #2f47ee 100%);
  box-shadow: 0 30px 80px rgba(60, 92, 255, 0.22);
  color: #ffffff;
  text-align: center;
}

.cta-logo {
  position: relative;
  z-index: 2;
  width: 68px;
  height: 68px;
  margin-bottom: 46px;
}

.cta h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  font-size: 36px;
  font-weight: 900;
  line-height: 54px;
}

.cta-button {
  position: relative;
  z-index: 2;
  min-width: 233px;
  margin-top: 54px;
}

.store-modal[hidden] {
  display: none;
}

.store-modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
}

.store-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 11, 0.42);
  backdrop-filter: blur(6px);
}

.store-modal-panel {
  position: relative;
  z-index: 1;
  width: min(100%, 420px);
  padding: 34px 30px 30px;
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 28px 80px rgba(0, 0, 11, 0.24);
  outline: none;
  text-align: left;
}

.store-modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #f3f6fb;
  color: var(--muted);
  font-size: 24px;
  line-height: 1;
}

.store-modal-eyebrow {
  margin: 0 0 10px;
  color: #0098ff;
  font-size: 13px;
  font-weight: 900;
  line-height: 20px;
  letter-spacing: 2px;
}

.store-modal h2 {
  margin: 0;
  color: var(--black);
  font-size: 26px;
  font-weight: 900;
  line-height: 36px;
}

.store-modal p:not(.store-modal-eyebrow) {
  margin: 14px 0 26px;
  color: var(--muted);
  font-size: 15px;
  font-weight: 500;
  line-height: 24px;
}

.store-modal-action {
  width: 100%;
}

/* ============================================
   모션
   ============================================
   원칙 세 가지입니다.

   1. opacity와 translate만 씁니다. 레이아웃을 다시 계산하지 않아 스크롤이 끊기지 않습니다.
   2. 숨김 초기 상태는 html.js에만 적용합니다. JS가 없거나 실패하면 전부 그대로 보입니다.
   3. prefers-reduced-motion에서는 모든 모션을 끕니다.

   transform 대신 독립 translate 속성을 쓰는 이유가 있습니다.
   .phone-mockup은 transform: scale(0.82)를, 카드 hover는 transform: translateY(-4px)를 씁니다.
   진입 애니메이션을 transform으로 만들면 이 값들을 덮어써서 폰 크기와 hover가 깨집니다.
   translate는 transform과 별도 속성이라 서로 합성되므로 충돌하지 않습니다. */

html.js [data-reveal] {
  opacity: 0;
  translate: 0 18px;
}

html.js [data-reveal].is-visible {
  opacity: 1;
  translate: none;
  transition: opacity 620ms ease-out, translate 620ms cubic-bezier(0.22, 0.68, 0.24, 1);
}

/* 히어로는 첫 화면이라 스크롤을 기다리지 않고 로드 직후 순서대로 올라옵니다. */
html.js [data-hero-in] {
  opacity: 0;
  translate: 0 20px;
}

html.js.is-ready [data-hero-in] {
  opacity: 1;
  translate: none;
  transition: opacity 700ms ease-out, translate 700ms cubic-bezier(0.22, 0.68, 0.24, 1);
}

html.js.is-ready [data-hero-in="1"] {
  transition-delay: 40ms;
}

html.js.is-ready [data-hero-in="2"] {
  transition-delay: 140ms;
}

html.js.is-ready [data-hero-in="3"] {
  transition-delay: 260ms;
}

html.js.is-ready [data-hero-in="4"] {
  transition-delay: 360ms;
}

html.js.is-ready [data-hero-in="5"] {
  transition-delay: 460ms;
}

/* 폰 목업 시연: 탭이 바뀌면 해당 카테고리 칩만 남고 다시 나타납니다. */
.phone-tabs span {
  transition: background-color 240ms ease, color 240ms ease;
}

.chip-grid span[hidden] {
  display: none;
}

.chip-grid span.is-in {
  animation: chip-in 260ms ease-out both;
}

@keyframes chip-in {
  from {
    opacity: 0;
    translate: 0 6px;
  }
  to {
    opacity: 1;
    translate: none;
  }
}

/* FAQ 답변은 열릴 때 부드럽게 들어옵니다. */
html.js .faq-list details[open] p {
  animation: faq-answer-in 300ms ease-out both;
}

@keyframes faq-answer-in {
  from {
    opacity: 0;
    translate: 0 -4px;
  }
  to {
    opacity: 1;
    translate: none;
  }
}

/* 누를 때 살짝 눌리는 감각을 줍니다. */
.btn:active,
.header-download:active {
  transform: translateY(0) scale(0.98);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  html.js [data-reveal],
  html.js [data-hero-in] {
    opacity: 1;
    translate: none;
    transition: none;
  }

  .chip-grid span.is-in,
  html.js .faq-list details[open] p {
    animation: none;
  }

  .btn,
  .header-download,
  .store-badge,
  .feature-card,
  .why-grid article,
  .phone-tabs span,
  .site-header,
  .nav a,
  .faq-list summary {
    transition: none;
  }

  .btn:hover,
  .header-download:hover,
  .store-badge:hover,
  .feature-card:hover,
  .why-grid article:hover,
  .btn:active,
  .header-download:active {
    transform: none;
  }
}

@media (max-width: 1024px) {
  /* gutter 토큰 하나만 바꾸면 섹션 헤딩, WHY 카드, FAQ 목록의 좌측 정렬선이
     함께 움직입니다. 브레이크포인트마다 선택자별 padding을 나열할 필요가 없습니다. */
  :root {
    --gutter: 64px;
    /* 1280px 미만에서는 색 블록이 화면 폭을 꽉 채우므로,
       모서리가 화면 끝에 닿습니다. 반경을 줄여 자연스럽게 만듭니다. */
    --block-radius: 28px;
  }

  .header-inner {
    padding: 14px 28px;
  }

  .nav {
    gap: var(--space-5);
  }

  .store-badges {
    right: 60px;
  }

  .features {
    min-height: 1072px;
  }

  .phone-mockup {
    transform: scale(0.72);
  }

  /* 폰이 더 작아지므로 카드 시작점도 폰 오른쪽 끝(64 + 423*0.72 = 369px)에 맞춰 옮깁니다. */
  .feature-cards {
    left: calc(var(--gutter) + 345px);
    top: 400px;
  }

  .wallet-visual {
    top: 108px;
    right: -70px;
    width: 260px;
    height: 260px;
  }
}

@media (max-width: 760px) {
  :root {
    --gutter: 22px;
    --block-radius: 20px;
  }

  .header-inner {
    height: auto;
    flex-wrap: wrap;
    gap: 18px;
    padding: 18px 20px;
  }

  .brand {
    min-width: auto;
  }

  .nav {
    order: 3;
    width: 100%;
    justify-content: space-between;
    gap: 18px;
    font-size: 16px;
  }

  .header-download {
    width: 122px;
    height: 48px;
    font-size: 14px;
  }

  .hero {
    height: auto;
    min-height: 720px;
    padding: 70px 22px 250px;
  }

  .hero-bg {
    inset: 0;
    width: 140%;
    height: 100%;
    transform: translateX(-18%);
    object-fit: cover;
  }

  .hero-copy {
    position: relative;
    left: auto;
    top: auto;
  }

  .hero h1 {
    font-size: 42px;
    line-height: 52px;
  }

  .hero-description br {
    display: none;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .store-badges {
    left: 22px;
    right: auto;
    bottom: 62px;
  }

  /* 모바일에서는 폰 아래에 카드 3장을 세로로 쌓으므로 그만큼 섹션이 길어집니다. */
  .features {
    min-height: 1412px;
  }

  .features-heading {
    padding-top: 84px;
  }

  .section-heading h2,
  .steps h2,
  .cta h2 {
    font-size: 30px;
    line-height: 42px;
  }

  /* 폰 목업(top 300px)과 겹쳐 지갑이 조각처럼 걸쳐 보였습니다.
     폰 시작선 위로 올려 헤딩 오른쪽 장식으로만 쓰게 합니다. */
  .wallet-visual {
    top: 118px;
    right: -55px;
    width: 180px;
    height: 180px;
    opacity: 0.9;
  }

  .phone-mockup {
    top: 300px;
    width: 330px;
    height: 630px;
    transform: none;
  }

  .phone-status {
    height: 58px;
    padding: 0 20px;
  }

  .phone-status i {
    width: 84px;
    height: 26px;
  }

  .chip-grid span {
    font-size: 12px;
    line-height: 18px;
    padding: 6px 10px;
  }

  .phone-screen {
    border-radius: 24px;
    padding: 92px 18px 0;
  }

  /* 좁은 화면에서 3열로 두면 카드 폭이 110px 남짓이라 설명 문장이 들어가지 않습니다.
     폰 아래에 세로로 쌓아 아이콘 + 제목 + 설명이 한 줄로 읽히게 합니다. */
  .feature-cards {
    left: var(--gutter);
    right: var(--gutter);
    top: auto;
    bottom: var(--space-9);
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .feature-card {
    gap: var(--space-3);
    border-radius: 16px;
    padding: 20px;
  }

  .feature-card img {
    width: 64px;
    height: 64px;
  }

  .feature-card h3 {
    font-size: 17px;
    line-height: 26px;
  }

  .feature-card-body p {
    font-size: 14px;
    line-height: 22px;
  }

  /* 데스크톱에서 고정 높이를 없앴으므로 모바일에서도 min-height를 두지 않습니다.
     남겨두면 콘텐츠가 짧아진 만큼 하단이 다시 빈 공간이 됩니다. */
  .steps-content {
    padding-top: 72px;
  }

  .step-list {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 42px;
  }

  .step-list strong {
    font-size: 42px;
    line-height: 56px;
  }

  .why {
    padding-top: 84px;
    padding-bottom: 70px;
  }

  .star-visual {
    top: 42px;
    right: -72px;
    width: 210px;
    height: 210px;
  }

  .why-grid {
    width: calc(100% - var(--gutter) * 2);
    grid-template-columns: 1fr;
    margin-top: 46px;
  }

  .why-grid article {
    min-height: auto;
    padding: 34px 24px;
  }

  .faq {
    min-height: auto;
    padding: 72px 0;
  }

  .faq-list {
    width: calc(100% - var(--gutter) * 2);
    margin-top: 44px;
  }

  .faq-list summary {
    font-size: 17px;
    line-height: 26px;
  }

  .cta {
    height: 420px;
    padding: 0 22px;
  }

  .store-modal {
    padding: 18px;
  }

  .store-modal-panel {
    padding: 32px 22px 24px;
    border-radius: 16px;
  }

  .store-modal h2 {
    font-size: 22px;
    line-height: 31px;
  }
}