:root {
  --white: #ffffff;
  --cream: #f6f1e7;
  --sand: #f3efe7;
  --paper: #fbfaf6;
  --ink: #1d2b29;
  --body: #4f5e5b;
  --lead: #34423f;
  --sage: #6f8f82;
  --sage-text: #557366;
  --sage-light: #a9c4b8;
  --apricot-deep: #c07f55;
  --line: #e6e1d6;
  --cta: #173532;
  --cta-text: #f4f8f7;
  --gutter: 20px;
  --max: 1000px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body {
  margin: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background: var(--white);
  color: var(--ink);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", sans-serif;
  font-size: 17px;
  line-height: 1.68;
  letter-spacing: -0.01em;
  word-break: keep-all;
  overflow-wrap: break-word;
}
h1, h2, h3, h4, p, ol, ul, dl, dd { margin: 0; }
ol, ul { padding: 0; list-style: none; }
h1, h2 { font-weight: 700; letter-spacing: -0.03em; line-height: 1.32; }
img { display: block; max-width: 100%; }
em { font-style: normal; color: var(--sage); }
[hidden] { display: none !important; }
section[id], #faq { scroll-margin-top: 24px; }

.container { width: 100%; max-width: calc(var(--max) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
br.m { display: none; }

/* 공지 띠 · 헤더 */
.notice-bar {
  display: flex; align-items: center; justify-content: center;
  height: 36px; background: var(--ink); color: var(--cream);
  font-size: 13px; font-weight: 500;
}
.site-header { background: var(--white); box-shadow: inset 0 -1px 0 var(--line); }
.header-inner { max-width: 1240px; height: 72px; display: flex; align-items: center; justify-content: space-between; }
.logo { font-size: 26px; font-weight: 700; letter-spacing: -0.04em; line-height: 1.2; color: var(--ink); }
.nav { display: flex; gap: 32px; }
.nav a { font-size: 15px; font-weight: 500; color: var(--ink); text-decoration: none; }
.nav a:hover { color: var(--sage-text); }

/* 버튼 (피그마 CTA/Primary 7:3) */
.cta {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  height: 58px; padding: 0 26px 0 30px; border-radius: 999px;
  background: var(--cta); color: var(--cta-text);
  font-size: 16.5px; font-weight: 600; letter-spacing: -0.005em; text-decoration: none;
  box-shadow: 0 1px 1px rgba(10, 31, 28, .2), 0 10px 22px -12px rgba(23, 54, 51, .45),
    inset 0 1px 0 rgba(255, 255, 255, .14), inset 0 -1px 0 rgba(0, 0, 0, .22);
  transition: transform .2s, background .2s;
}
.cta::after {
  content: ""; width: 18px; height: 18px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='none' stroke='%23f4f8f7' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 9h11M10.5 5l4 4-4 4'/%3E%3C/svg%3E") center / contain no-repeat;
}
.cta:hover { background: #10302d; transform: translateY(-1px); }
.cta:focus-visible { outline: 3px solid var(--sage); outline-offset: 3px; }

/* 공통 섹션 머리 */
.section { padding: 128px 0; overflow-x: hidden; overflow-x: clip; }
.section--white { background: var(--white); }
.section--cream { background: var(--cream); }
.section--ink { background: var(--ink); }
.section-head { text-align: center; margin-bottom: 56px; }
.section-head .label { display: block; margin-bottom: 16px; font-size: 14px; font-weight: 600; letter-spacing: 0; line-height: 1.2; color: var(--sage-text); }
.section-head h2 { font-size: 42px; }
.section-head p { margin-top: 16px; color: var(--body); }
.section--ink .section-head .label { color: var(--sage-light); }
.section--ink .section-head h2 { color: var(--white); }
.section--ink .section-head h2 em { color: var(--sage-light); }
.section--ink .section-head p { color: #c9d3d0; }

.badge {
  display: inline-flex; align-items: center; gap: 8px; align-self: flex-start;
  padding: 8px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--white);
  font-size: 14px; font-weight: 600; line-height: 1.2;
}
.badge .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--sage); }
.tag {
  display: inline-flex; align-items: center; padding: 5px 12px; border: 1px solid var(--ink); border-radius: 8px;
  font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0;
}

/* 히어로 */
/* 첫 화면을 꽉 채운다: 화면 높이 − 공지 띠(36) − 헤더(72). 낮은 화면은 글이 들어갈 만큼은 지킨다. */
.hero { position: relative; height: calc(100vh - 108px); height: calc(100svh - 108px); min-height: 560px; background: var(--sand); overflow: hidden; }
.hero-bg, .hero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero-bg img { object-fit: cover; }
@media (min-width: 1600px) { .hero-bg img { object-position: 50% 25%; } }
.hero-inner { position: relative; max-width: 1240px; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding-top: 5px; }
.hero h1 { margin-top: 24px; font-size: 60px; }
.hero h1 em { color: var(--sage-text); }
.hero-title { display: block; }
.hero-title--meta, [data-ch="meta"] .hero-title:not(.hero-title--meta) { display: none; }
[data-ch="meta"] .hero-title--meta { display: block; }
.hero .lead { margin-top: 24px; font-size: 18px; color: var(--lead); }
.hero .cta { margin-top: 40px; }
/* 세로 화면(태블릿 세로 등)은 세로 사진. 물건이 모인 아래쪽을 살리고 글은 그 위 빈 자리에 둔다. */
@media (orientation: portrait) { .hero-bg img { object-position: 50% 100%; } }
@media (min-width: 768px) and (orientation: portrait) {
  .hero-inner { justify-content: flex-start; padding-top: clamp(56px, 7vh, 96px); }
}
.chips { display: flex; gap: 8px; margin-top: 16px; }
.chips li {
  padding: 6px 14px; border: 1px solid rgba(29, 43, 41, .2); border-radius: 999px; background: rgba(255, 255, 255, .72);
  font-size: 13px; font-weight: 500; line-height: 1.2;
}
.arrival-card {
  position: absolute; right: max(var(--gutter), calc(50% - 600px)); bottom: 132px; width: 300px;
  display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 16px; background: var(--white);
  box-shadow: 0 10px 28px rgba(29, 43, 41, .12);
}
.arrival-card img { width: 36px; height: 36px; object-fit: contain; }
.arrival-title { font-size: 15px; font-weight: 600; line-height: 1.2; }
.arrival-sub { margin-top: 2px; font-size: 13px; line-height: 1.2; color: var(--body); }

/* 공감 */
#empathy { padding: 144px 0; }
.scene-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.scene { overflow: hidden; border-radius: 20px; background: var(--cream); text-align: center; }
.scene img { width: 100%; height: 236px; object-fit: cover; }
.scene-line { padding: 24px 32px 0; font-size: 20px; font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; }
.scene-theme {
  display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 32px;
  font-size: 14px; font-weight: 500; line-height: 1.2; letter-spacing: 0; color: var(--body);
}
.scene-theme::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--sage); }
.scene-theme--stress::before { background: var(--apricot-deep); }
.scene-theme--anxiety::before { background: #9d97c9; }

/* 근거 숫자 */
#proof { padding: 120px 0; }
.proof-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.proof-card { padding: 40px 32px; border-radius: 20px; background: var(--white); text-align: center; }
.proof-card img { width: 72px; height: 72px; margin: 0 auto 24px; object-fit: contain; }
.proof-num { font-size: 40px; font-weight: 700; line-height: 1.32; letter-spacing: -0.03em; color: var(--apricot-deep); }
.proof-card h3 { margin-top: 8px; font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; }
.proof-card p:last-child { margin-top: 8px; font-size: 15px; color: var(--body); }

/* OWAA의 질문 */
#questions { padding: 152px 0; }
.note-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 8%; padding: 2% 2% 0; }
.note {
  aspect-ratio: 1111 / 1416; padding: 26% 12% 0 17.5%;
  background: url("assets/note-paper.webp") center / contain no-repeat;
  transform: rotate(-2deg);
}
.note--tilt { transform: rotate(1.5deg); }
.note { position: relative; left: 9px; }
.note--tilt { left: -7px; top: 6px; }
.note-num { display: block; font-size: 16px; font-weight: 600; line-height: 1.2; letter-spacing: .02em; color: var(--sage-text); }
.note-q { margin-top: 16px; font-size: clamp(24px, 3.2vw, 32px); font-weight: 700; line-height: 1.32; letter-spacing: -0.03em; }
.note-desc { margin-top: 16px; font-size: clamp(14px, 1.8vw, 18px); color: var(--body); }
.note-pencil { position: absolute; left: calc(50% - 70px); top: 377px; width: 190px; transform: rotate(-18deg); aspect-ratio: 1; object-fit: contain; pointer-events: none; }
.emphasis { max-width: 638px; margin: 75px auto 0; text-align: center; font-size: 24px; font-weight: 600; line-height: 1.5; letter-spacing: -0.03em; color: var(--white); }
.emphasis em { color: var(--sage-light); }
.example { max-width: 638px; margin: 32px auto 0; padding: 40px 44px; border-radius: 20px; background: var(--paper); }
.example-head { display: flex; align-items: center; gap: 12px; font-size: 15px; font-weight: 600; line-height: 1.2; color: var(--sage-text); }
.example-head .tag { color: var(--ink); }
.example-body { margin-top: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--line); font-size: 19px; line-height: 1.72; }
/* 줄 길이가 카드 안쪽 폭과 같아 소수점 차이로 줄이 꺾이지 않도록 6px 여유만 준다(더 넓은 글꼴이면 자연스럽게 줄바꿈). */
@media (min-width: 768px) { .example-body { margin-right: -6px; } }
.example-hint { margin-top: 20px; font-size: 15px; color: var(--body); }

/* 리포트 미리보기 */
#preview { padding: 152px 0; }
.mail-wrap { position: relative; padding-top: 70px; }
.mail-envelope { position: absolute; top: -20px; left: 65.5%; width: 280px; aspect-ratio: 1; object-fit: contain; transform: rotate(-8deg); }
.mail {
  position: relative; max-width: 640px; margin: 0 auto; overflow: hidden;
  border: 1px solid var(--line); border-radius: 24px; background: var(--white);
  box-shadow: 0 24px 48px -16px rgba(28, 43, 41, .1);
}
.mail-meta { display: grid; gap: 8px; padding: 24px 48px; background: var(--paper); border-bottom: 1px solid var(--line); }
.mail-meta div { display: flex; align-items: baseline; gap: 16px; }
.mail-meta dt { font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--body); }
.mail-meta dd { font-size: 14px; font-weight: 600; line-height: 1.2; }
.mail-meta .mail-subject { font-size: 17px; line-height: 1.4; letter-spacing: -0.02em; }
.mail-body { display: grid; gap: 24px; padding: 40px 48px; }
.mail-top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 24px; border-bottom: 1px solid var(--line); }
.mail-title { font-size: 20px; font-weight: 700; line-height: 1.4; }
.mail-part h4, .mail-fade h4 { font-size: 16px; font-weight: 700; line-height: 1.4; }
.mail-part p, .mail-part li, .mail-fade li { margin-top: 8px; max-width: 470px; font-size: 16px; color: var(--body); }
.mail-part ul, .mail-fade ul { display: grid; gap: 6px; margin-top: 8px; }
.mail-part li, .mail-fade li { margin-top: 0; }
.mail-fade li { max-width: none; }
.mail-part li::before, .mail-fade li::before { content: "• "; }
.mail-part b, .mail-fade b { font-weight: 600; color: var(--ink); }
.mail-fade { position: relative; height: 160px; overflow: hidden; }
.mail-fade ul + h4 { margin-top: 24px; }
.mail-fade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(255, 255, 255, 0.45), #fff 85%); }
.caption { margin-top: 50px; text-align: center; font-size: 15px; color: var(--body); }

/* 참여 방법 */
.how-grid { display: flex; align-items: center; justify-content: center; gap: 64px; }
.steps { display: grid; gap: 16px; width: 640px; max-width: 100%; }
.steps li { display: grid; grid-template-columns: auto 1fr; column-gap: 24px; align-items: center; padding: 32px; border-radius: 20px; background: var(--white); }
.step-num { grid-row: 1 / 3; }
.steps h3, .steps p { grid-column: 2; }
.step-num { flex: none; width: 56px; font-size: 40px; font-weight: 700; line-height: 1.32; letter-spacing: -0.03em; color: var(--sage); }
.steps h3 { font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; }
.steps p { margin-top: 8px; font-size: 15px; color: var(--body); }
.phone {
  flex: none; width: 240px; height: 480px; padding: 24px 16px; pointer-events: none;
  border: 6px solid var(--ink); border-radius: 32px; background: var(--white);
}
.phone-screen { display: flex; flex-direction: column; gap: 16px; }
.phone-screen::before { content: ""; width: 56px; height: 6px; border-radius: 3px; background: var(--ink); margin-bottom: 24px; }
.phone-step { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--sage-text); }
.phone-title { margin-bottom: 24px; font-size: 17px; font-weight: 600; line-height: 24px; letter-spacing: -0.02em; }
.phone-option {
  display: flex; align-items: center; gap: 8px; height: 42px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--paper);
  font-size: 13px; font-weight: 500; line-height: 1.2; color: var(--body);
}
.phone-option::before { content: ""; width: 12px; height: 12px; border: 1.5px solid #c9c4b8; border-radius: 50%; background: var(--white); }
.phone-option.is-selected { height: 43px; border: 1.5px solid var(--sage); background: #e3ece7; font-weight: 600; color: #3f5d51; }
.phone-option.is-selected::before { border-color: var(--sage); background: var(--sage); }
.phone-next {
  display: flex; align-items: center; justify-content: center; height: 40px; margin-top: 24px;
  border-radius: 10px; background: #dcdfdb; font-size: 14px; font-weight: 600; line-height: 1.2;
}
.benefit {
  display: flex; align-items: center; justify-content: center; gap: 40px;
  margin-top: 56px; padding: 32px 56px; border-radius: 24px; background: var(--white);
}
.benefit img { width: 180px; height: 180px; object-fit: contain; }
.benefit .label { display: block; font-size: 14px; font-weight: 600; line-height: 1.2; letter-spacing: 0; color: var(--sage-text); }
.benefit-title { margin-top: 8px; font-size: 28px; font-weight: 700; line-height: 1.32; letter-spacing: -0.03em; }
.pill {
  display: inline-flex; margin-top: 8px; padding: 6px 14px; border: 1px solid #e4dccf; border-radius: 999px; background: var(--white);
  font-size: 13px; font-weight: 600; line-height: 1.2; letter-spacing: 0; color: var(--apricot-deep);
}
.benefit-sub { margin-top: 8px; font-size: 15px; color: var(--body); }

/* 안심 안내 · FAQ */
.notice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.notice-card { padding: 32px; border-radius: 20px; background: var(--cream); }
.notice-card h3 { font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -0.02em; }
.notice-card p { margin-top: 8px; font-size: 15px; color: var(--body); }
.faq { max-width: 800px; margin: 152px auto 0; }
.faq-title { margin-bottom: 56px; text-align: center; font-size: 30px; font-weight: 700; line-height: 1.32; letter-spacing: -0.03em; }
.faq details { padding: 24px 0; border-bottom: 1px solid var(--line); }
.faq-title + details { border-top: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; cursor: pointer; list-style: none;
  font-size: 18px; font-weight: 600; line-height: 1.4; letter-spacing: -0.02em;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; flex: none; width: 20px; height: 20px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%231d2b29' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M4 10h12M10 4v12'/%3E%3C/svg%3E") center / contain no-repeat;
}
.faq details[open] summary::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' fill='none' stroke='%231d2b29' stroke-width='1.25' stroke-linecap='round'%3E%3Cpath d='M4 10h12'/%3E%3C/svg%3E");
}
.faq details p { margin-top: 16px; font-size: 16px; color: var(--body); }
.faq details p a { color: inherit; text-underline-offset: 2px; }

/* 마지막 */
.final { position: relative; height: 620px; overflow: clip; background: var(--sand); }
.final-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.final::after { content: ""; position: absolute; inset: 0; background: rgba(251, 250, 246, .3); }
.final-inner { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; padding-top: 143px; text-align: center; }
.final .badge { align-self: center; padding: 6px 14px; font-size: 13px; }
.final h2 { margin-top: 16px; font-size: 44px; }
.final .lead { margin-top: 16px; font-size: 18px; font-weight: 500; line-height: 1.2; }
.final .cta { margin-top: 40px; }
.final-note { margin-top: 16px; font-size: 13px; line-height: 1.6; color: var(--lead); }

/* 푸터 */
.site-footer { padding: 56px 0 48px; background: var(--cream); font-size: 14px; color: var(--body); }
.footer-inner { display: flex; justify-content: space-between; align-items: flex-start; }
.footer-brand p { line-height: 1.2; }
.footer-brand p:first-child { display: flex; align-items: center; gap: 16px; }
.footer-brand p + p { margin-top: 8px; }
.footer-brand .logo { font-size: 22px; }
.footer-links { line-height: 1.2; font-weight: 500; color: var(--ink); }
.footer-links a { color: inherit; text-decoration: none; }
.footer-links a:hover { text-decoration: underline; }
.copyright { margin-top: 24px; padding-top: 24px; border-top: 1px solid #e2dacb; font-size: 13px; line-height: 1.2; letter-spacing: 0; }
.site-footer .copyright { max-width: calc(var(--max)); padding-left: 0; padding-right: 0; }

/* 모바일 하단 고정 버튼 */
.sticky-cta { display: none; }

@media (max-width: 1080px) {
  .site-footer .copyright { max-width: calc(100% - var(--gutter) * 2); }
}

@media (max-width: 900px) {
  .how-grid { flex-direction: column; gap: 32px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .scene-grid, .proof-grid { grid-template-columns: 1fr; max-width: 560px; margin-left: auto; margin-right: auto; }
  .note-pencil { left: 42.5%; top: auto; bottom: 3.5%; width: 19%; }
  .benefit, .notice-grid, .faq { max-width: 640px; margin-left: auto; margin-right: auto; }
  .notice-card br { display: none; }
  .benefit-title br.d { display: none; }
  .benefit-title br.m { display: inline; }
  .notice-card h3 { text-wrap: balance; }
  .mail-envelope { left: auto; right: -24px; width: 220px; }
}

@media (max-width: 767px) {
  br.d { display: none; }
  br.m { display: inline; }
  .section-head { margin-bottom: 32px; }
  .section-head .label { font-size: 13px; }
  .section-head h2 { font-size: 27px; }
  .section-head p { font-size: 16px; }

  .header-inner { height: 64px; }
  .logo { font-size: 22px; }
  .nav { display: none; }

  .hero { height: calc(100vh - 100px); height: calc(100svh - 100px); min-height: 540px; }
  /* 메타 광고 문구는 기본 문구보다 한 줄(36px × 1.32) 길다. 키 작은 화면에서 도착 카드와 겹치지 않게 그만큼 더 확보한다. */
  [data-ch="meta"] .hero { min-height: 588px; }
  .hero-inner { justify-content: flex-start; padding: 40px 24px 0; }
  .hero h1 { margin-top: 16px; font-size: 36px; }
  .hero .lead { margin-top: 16px; font-size: 16px; }
  .hero .cta { width: min(350px, calc(100vw - 40px)); margin-top: 32px; }
  .arrival-card { right: 20px; bottom: 32px; width: min(300px, calc(100% - 40px)); }

  #empathy { padding: 80px 0; }
  .scene-grid, .proof-grid { grid-template-columns: 1fr; gap: 16px; }
  .scene { border-radius: 18px; }
  .scene img { height: 210px; }
  .scene-line { padding: 24px 24px 0; font-size: 18px; }
  .scene-theme { margin: 8px 0 24px; }

  #proof { padding: 72px 0; }
  .proof-card { padding: 32px 24px; border-radius: 18px; }
  .proof-card img { width: 64px; height: 64px; margin-bottom: 16px; }
  .proof-num { font-size: 34px; }
  .proof-card h3 { font-size: 17px; }

  #questions { padding: 96px 0; }
  .note-grid { grid-template-columns: 1fr; gap: 16px; padding: 6px 0 0; }
  .note { width: 91.5%; margin-left: 2.8%; transform: rotate(-1deg); }
  .note--tilt { margin-left: 1.6%; margin-top: 0; transform: rotate(1deg); }
  .note { left: 6px; }
  .note--tilt { left: 6px; top: 6px; }
  .note-num { font-size: 13px; }
  .note-q { margin-top: 8px; font-size: 24px; }
  .note-desc { margin-top: 8px; font-size: 14px; }
  .note-pencil { left: auto; right: calc(-2% - 15px); top: calc(38% - 8px); bottom: auto; width: 120px; }
  .emphasis { margin-top: 46px; font-size: 19px; }
  .example { margin-top: 24px; padding: 28px 24px; }
  .example-head { font-size: 14px; }
  .example-body { margin-top: 16px; padding-bottom: 16px; font-size: 16px; line-height: 1.75; }
  .example-hint { margin-top: 16px; }

  #preview { padding: 96px 0; }
  .mail-wrap { padding-top: 56px; }
  .mail-envelope { top: -10px; left: auto; right: -25px; width: 150px; }
  .mail { border-radius: 20px; }
  .mail-meta { padding: 16px 24px; }
  .mail-meta .mail-subject { font-size: 15px; }
  .mail-body { gap: 16px; padding: 24px; }
  .mail-top { padding-bottom: 16px; }
  .mail-title { font-size: 17px; }
  .mail-part h4, .mail-fade h4 { font-size: 15px; }
  /* 피그마는 15px × 168% 를 25px 줄로 그린다. 다섯 줄 문단에서 소수점 차이가 쌓이지 않게 맞춘다. */
  .mail-part p, .mail-part li, .mail-fade li { max-width: none; font-size: 15px; line-height: 25px; }
  .mail-fade { height: 134px; }
  .mail-fade ul + h4 { margin-top: 24px; }
  .caption { margin-top: 16px; font-size: 14px; }

  #how { padding: 80px 0; }
  .steps li { column-gap: 24px; padding: 24px; border-radius: 18px; }
  .step-num { width: auto; min-width: 36px; font-size: 32px; }
  .steps h3 { font-size: 17px; line-height: 24px; }
  .steps p { line-height: 1.6; }
  .benefit { flex-direction: column; gap: 8px; margin-top: 32px; padding: 24px 24px 32px; border-radius: 20px; text-align: center; }
  .benefit img { width: 150px; height: 150px; }
  .benefit .label { font-size: 13px; line-height: 16px; }
  .benefit-title { font-size: 22px; line-height: 31px; }

  #notice { padding: 80px 0 72px; }
  .notice-grid { grid-template-columns: 1fr; gap: 8px; }
  .notice-card { padding: 24px; border-radius: 16px; }
  .notice-card h3 { font-size: 17px; line-height: 24px; }
  .notice-card p { line-height: 1.6; }
  #notice .section-head h2 { line-height: 1.4; }
  .faq { margin-top: 88px; }
  .faq-title { margin-bottom: 32px; font-size: 23px; line-height: 1.4; }
  .faq details { padding: 18px 0; }
  .faq details:first-of-type { padding: 16px 0; }
  .faq summary { font-size: 16px; line-height: 19px; }
  .faq summary { padding: 12.5px 0; margin: -12.5px 0; }
  .footer-links a { padding: 14px 0; }
  .faq summary::after { width: 18px; height: 18px; }
  .faq details p { margin-top: 8px; font-size: 14px; line-height: 1.6; }
  .faq details:first-of-type p { line-height: 17px; }

  .final { height: 480px; }
  .final-inner { padding-top: 89px; }
  .final h2 { font-size: 30px; }
  .final .lead { font-size: 16px; line-height: 19px; }
  .final .cta { width: 100%; margin-top: 32px; }

  .site-footer { padding: 40px 0 120px; }
  .footer-inner { flex-direction: column; gap: 16px; }
  .footer-brand p:first-child { gap: 8px; font-size: 13px; }
  .footer-brand p + p { margin-top: 16px; }
  .footer-brand .logo { font-size: 20px; }
  .copyright { margin-top: 40px; padding-top: 16px; }

  .sticky-cta {
    display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    padding: 12px 20px calc(28px + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, .96);
    translate: 0 100%; visibility: hidden;
  }
  /* 히어로 버튼이 위로 지나가면 올라오고, 마지막 섹션 버튼이 보이면 내려간다(js/main.js) */
  .sticky-cta.is-shown { translate: none; visibility: visible; }
  .sticky-cta .cta { width: 100%; }
}

/* ---------- 움직임 ----------
   transform 대신 translate·scale 속성을 써서 노트·봉투의 기존 회전(transform)과 겹치지 않게 한다.
   레이아웃을 건드리지 않는 값만 움직이므로 CLS 가 생기지 않는다. */
@media screen and (prefers-reduced-motion: no-preference) {
  @keyframes rise { from { opacity: 0; translate: 0 24px; } }
  @keyframes arrive { from { opacity: 0; translate: 0 20px; scale: .96; } }

  .hero-inner > * { animation: rise .6s cubic-bezier(.2, .7, .2, 1) both; }
  .hero-inner > :nth-child(2) { animation-delay: .08s; }
  .hero-inner > :nth-child(3) { animation-delay: .16s; }
  .hero-inner > :nth-child(4) { animation-delay: .24s; }
  .hero-inner > :nth-child(5) { animation-delay: .32s; }
  /* 본문을 다 읽을 즈음 알림처럼 도착한다 */
  .sticky-cta { transition: translate .25s, visibility .25s; }
  .arrival-card { animation: arrive .7s cubic-bezier(.3, 1.3, .5, 1) .9s both; }

  /* 스크롤 등장: 지원하지 않는 인앱 브라우저에서는 그냥 보인다 */
  @supports (animation-timeline: view()) {
    .section-head, .scene, .proof-card, .note, .example, .mail, .steps li, .phone,
    .benefit, .notice-card, .faq, .final-inner {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    .scene:nth-child(2), .proof-card:nth-child(2), .note--tilt, .steps li:nth-child(2), .notice-card:nth-child(even) {
      animation-range: entry 10% entry 80%;
    }
    .scene:nth-child(3), .proof-card:nth-child(3), .steps li:nth-child(3) { animation-range: entry 20% entry 90%; }
    .mail, .faq { animation-range: entry 0 entry 240px; }
  }

  @media (hover: hover) {
    .cta::after { transition: translate .2s; }
    .cta:hover::after { translate: 3px 0; }
  }
}

/* 개인정보처리방침 */
a.logo { text-decoration: none; }
.policy { max-width: calc(760px + var(--gutter) * 2); padding-top: 48px; padding-bottom: 96px; }
.policy-back { font-size: 15px; font-weight: 500; color: var(--sage-text); }
.policy h1 { margin-top: 24px; font-size: 36px; }
.policy-lead { margin-top: 16px; font-size: 16px; line-height: 1.7; color: var(--body); }
.policy section { margin-top: 40px; }
.policy h2 { font-size: 20px; line-height: 1.4; }
.policy p, .policy li { margin-top: 12px; font-size: 15px; line-height: 1.7; color: var(--body); }
.policy ul { padding-left: 20px; list-style: disc; }
.policy li { margin-top: 8px; }
@media (max-width: 767px) {
  .policy h1 { font-size: 28px; }
  .policy h2 { font-size: 18px; }
}

@media print {
  .hero { height: auto; min-height: 0; padding: 48px 0; }
  .arrival-card, .sticky-cta { display: none; }
}