/* 웨이트리스트 페이지 — Figma 'Waitlist' 프레임(파일 5Te41TIjSnqaptEueukYwD · 노드 511:30662 · 너비 1724px)을 그대로 옮김.
   토큰 이름 = 계열-단계(예: Gray-500 · Black-200): Gray·Blue·Beige = 명도 단계(숫자가 클수록 진함) · Black·White = 불투명도 단계(1000 = 100% · 200 = 20%).
   글꼴 = 영문·숫자 Geist + 한글 Pretendard(사용자 결정 2026-10-06 — Figma의 Apple SD Gothic Neo 자리도 Pretendard).
   제품 토큰(apps/web …/tokens.css)과 따로 선다 — waitlist spec 결정 8. */

@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/Geist-Variable.woff2') format('woff2');
}

/* Pretendard = /fonts/pretendard.css(동적 서브셋 — 쓰인 글자 조각만 받는다) */

:root {
  /* 색 */
  --white-1000: #ffffff;
  --white-800: rgb(255 255 255 / 0.8);
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-300: #ababab; /* Gray-500을 흰 바탕에 60%로 얹은 색(Figma rgba(115,115,115,0.6)) */
  --gray-400: #8f8f8f; /* Gray-500을 흰 바탕에 80%로 얹은 색(Figma rgba(115,115,115,0.8)) */
  --gray-500: #737373;
  --black-1000: #090b0c;
  --black-900: rgb(9 11 12 / 0.9); /* 신청 버튼 마우스 올림(shadcn primary/90) */
  --black-700: rgb(9 11 12 / 0.7);
  --black-600: rgb(9 11 12 / 0.6);
  --black-400: rgb(9 11 12 / 0.4); /* 입력 칸 포커스 테두리(shadcn ring) */
  --black-200: rgb(9 11 12 / 0.2);
  --black-100: rgb(9 11 12 / 0.1); /* 입력 칸 테두리(shadcn input · 흰 바탕에서 #e6e6e6) */
  --black-60: rgb(9 11 12 / 0.06);
  --blue-50: #dfebf7; /* 하늘 #9cc1e7을 흰 바탕에 32%로 얹은 색 */
  --blue-600: #0084d1;
  --beige-50: #f9f5f0; /* 베이지 #eddfd0을 흰 바탕에 32%로 얹은 색 */
  --red-600: #e7000b; /* 오류(shadcn destructive · Tailwind v4 red-600) */

  /* 글자 */
  --font-sans: 'Geist', 'Pretendard', sans-serif;
  --font-size-100: 11.4px;
  --font-size-200: 13.8px;
  --font-size-300: 14px;
  --font-size-400: 16px;
  --font-size-500: 18px;
  --font-size-600: 18.6px;
  --font-size-700: 28.2px;
  --font-size-800: 44.6px;
  --line-height-100: 16px;
  --line-height-200: 20px;
  --line-height-300: 24px;
  --line-height-400: 28px;
  --line-height-500: 36px;
  --line-height-600: 40px;
  --line-height-700: 52px;

  /* 모서리 · 그림자 */
  --radius-100: 11.2px;
  --radius-200: 16px;
  --radius-300: 16.8px;
  --radius-400: 24px; /* 신청 판(하늘→베이지) */
  --radius-full: 9999px;
  --shadow-50: 0 1px 2px 0 rgb(0 0 0 / 0.05); /* 신청 입력 칸 — 은은하게(사용자 2026-10-06 '투박하고 진해' · shadcn shadow-xs) */
  --shadow-100: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
  --shadow-300: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

  /* 움직임(인터랙션 — 디자인 밖 · 사용자 2026-10-06 '너무 정적이지 않게') · 끝난 모습 = Figma 그대로 */
  --duration-100: 150ms;
  --duration-200: 300ms;
  --duration-300: 700ms;
  --duration-400: 900ms;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);

  /* 배치 — 본문 칸 너비(쓰는 곳에서 cqw = body 폭으로 풀린다) */
  --content-width: min(1344px, 100cqw - 96px);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* 대응 폭 = 1280~1920px 화면(사용자 2026-10-06 — 모바일 ❌) · 1440px부터 Figma 값 그대로 · 그 아래는 본문 폭·여백만 줄고 글자·줄바꿈은 그대로.
   cqw = 본문 폭(창 스크롤바 뺀 폭) 1% · 최소 1240px = 1280px 화면의 스크롤바 몫 여유 — 더 좁으면 가로 스크롤 */
body {
  container-type: inline-size;
  min-width: 1240px;
  margin: 0;
  background: var(--white-1000);
  color: var(--black-1000);
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1,
h2,
h3,
p,
ul,
dl,
dd {
  margin: 0;
  padding: 0;
}

ul {
  list-style: none;
}

img {
  display: block;
  max-width: none;
}

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

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  cursor: pointer;
}

/* 키보드로 옮겨 갈 때만 보이는 테두리(탭 글 묶음 = 키보드로 들르는 칸 — 탭 다음 차례) */
:where(a, button, [role='tabpanel']):focus-visible {
  outline: 2px solid var(--blue-600);
  outline-offset: 2px;
}

/* hidden 속성 = 늘 숨김(display를 주는 칸에도) */
[hidden] {
  display: none !important;
}

/* 화면에는 안 보이고 화면 낭독기만 읽는 글 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* 본문 칸 너비 — 1344px(프레임 1724px에서 좌우 190px) · 좁은 화면은 양옆 48px씩 남기고 줄어든다(1280px 화면 = 1184px) */
.wrap {
  width: var(--content-width);
  margin-inline: auto;
}

/* 첫 화면 — 하늘 그라데이션 · 구름 · 앱 화면 · 상단 줄 · 제목 · 높이 = 앱 화면 위끝 399px + 앱 화면 높이(1724px 폭에서 1105px) */
.hero {
  position: relative;
  z-index: 1; /* 아래 소개 절 위 21.5px를 덮고 그림자를 드리운다 */
  overflow: hidden;
  padding-top: 399px;
  background: var(--gray-100);
  box-shadow: var(--shadow-300);
}

.hero__sky {
  position: absolute;
  top: -0.99px;
  left: 0;
  width: 100%;
  height: 1137.51px;
}

.hero__cloud {
  position: absolute;
  top: 200px;
  width: 480px;
  height: 261px;
}

.hero__cloud--left {
  left: -280px;
}

.hero__cloud--right {
  right: -280px;
}

/* 앱 화면 아래 양옆의 옅은 그림자(Figma 타원 그라데이션 둘 + 좌우 가장자리 마스크) · 아래끝 = 첫 화면 아래 132px(첫 화면이 잘라 위쪽만 보임) */
.hero__glow {
  position: absolute;
  bottom: -132px;
  left: calc(50% - 5px);
  width: 1820px;
  height: 844.72px;
  transform: translateX(-50%);
  background-image:
    radial-gradient(873.6px 50.683px at 910px 743.35px, rgb(0 0 0 / 0.28), rgb(0 0 0 / 0.16) 42%, rgb(0 0 0 / 0)),
    radial-gradient(1019.2px 84.472px at 910px 777.14px, rgb(0 0 0 / 0.14), rgb(0 0 0 / 0.07) 48%, rgb(0 0 0 / 0));
  -webkit-mask: url('/assets/hero-glow-mask.svg') 0 0 / 100% 100% no-repeat;
  mask: url('/assets/hero-glow-mask.svg') 0 0 / 100% 100% no-repeat;
}

/* 앱 화면 틀(첫 화면 · 기능 절 공용) — 위 모서리 둥글게 · 바깥 테 + 그림자 · 안쪽 흰 테 */
.shot {
  overflow: hidden;
  border-radius: var(--radius-200) var(--radius-200) 0 0;
  box-shadow: 0 0 0 0.5px var(--black-200), var(--shadow-300);
}

.shot::after {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px var(--white-800);
  content: '';
}

/* 너비 = 본문 칸 − 2px(양옆 테두리 선 안쪽에 맞음 · 1724px 폭에서 1342px) · 비율 그대로 줄어든다 */
.hero__shot {
  position: relative;
  width: calc(var(--content-width) - 2px);
  aspect-ratio: 1342 / 706;
  margin-inline: auto;
}

.hero__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.nav {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 56px;
  padding: 0 24px;
}

.nav__logo {
  width: 75.6089px;
  height: 23.6px;
}

.nav__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 158px;
  height: 34px;
  margin-right: 1px;
  border-radius: var(--radius-100);
  background: var(--black-1000);
  color: var(--gray-50);
  font-size: var(--font-size-200);
  font-weight: 500;
  line-height: var(--line-height-200);
  white-space: nowrap;
}

.hero__intro {
  position: absolute;
  top: 56px;
  right: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 56px 0 65px;
}

.badge {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 118px;
  height: 24px;
  border: 1px solid var(--black-200);
  border-radius: var(--radius-full);
  color: var(--black-700);
  font-size: var(--font-size-100);
  font-weight: 400; /* Regular(사용자 2026-10-06 — 600 → 500 → 400 · 제목과 같은 굵기) */
  line-height: var(--line-height-100);
  letter-spacing: 0.1212px;
  white-space: nowrap;
}

/* Figma 그대로 — 6px 칸에 12px 아이콘(오른쪽으로 6px 넘침) */
.badge__icon {
  display: flex;
  flex: none;
  width: 6px;
  height: 12px;
}

.badge__icon img {
  flex: none;
  opacity: 0.5;
}

.hero__title {
  padding-bottom: 17px;
  font-size: var(--font-size-800);
  font-weight: 400;
  line-height: var(--line-height-700);
  letter-spacing: -0.48px;
  text-align: center;
  white-space: nowrap;
}

.cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 205px;
  height: 38px;
  padding: 0 10px 0 14px;
  border-radius: var(--radius-full);
  background: var(--black-1000);
  color: var(--gray-50);
  font-size: var(--font-size-400);
  font-weight: 500;
  line-height: var(--line-height-300);
  white-space: nowrap;
}

.cta img {
  transform: rotate(90deg);
}

/* 두 버튼 — 마우스를 올리면 색만 바뀐다(신청 카드 버튼과 같은 Black-900 · 자리·크기 그대로 — 사용자 2026-10-06 '플로팅 말고 색상만') */
.nav__cta:hover,
.cta:hover {
  background: var(--black-900);
}

/* 소개 */
.intro {
  margin-top: -21.5px;
  border-bottom: 1px solid var(--black-60);
}

/* 1440px 폭부터 여백 144px · 왼쪽 칸 256px(Figma) → 1240px 폭에서 64px · 136px로 같이 줄어 본문 글줄(줄바꿈 그대로)이 오른쪽 선 안에 남는다 */
.intro__inner {
  display: flex;
  gap: 64px;
  padding: 144px clamp(64px, 40cqw - 432px, 144px) 96px;
  border-inline: 1px solid var(--black-60);
}

.intro__label {
  display: flex;
  flex: none;
  align-items: center;
  align-self: flex-start;
  gap: 2px;
  width: clamp(136px, 60cqw - 608px, 256px);
  color: var(--blue-600);
  font-size: var(--font-size-400);
  font-weight: 500;
  line-height: var(--line-height-300);
}

.intro__copy {
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 32px;
  min-width: 734px;
  color: var(--gray-500);
  font-size: var(--font-size-600);
  line-height: var(--line-height-400);
  white-space: nowrap;
}

.intro__copy strong {
  color: var(--black-1000);
  font-weight: 500;
}

/* 기능 — 소개 절 바로 아래(간격 0) · 높이 594px(글 칸 593 + 아래 선 1) */
.feature {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  border: 1px solid var(--black-60);
  border-top: 0;
}

/* 글 칸은 Figma 너비 758px 고정(긴 제목은 칸을 넓히지 않고 넘친다) · 좁은 화면에서는 오른쪽 그림 창이 줄어든다 */
.feature__text {
  display: flex;
  flex: none;
  flex-direction: column;
  justify-content: space-between;
  width: 758px;
  height: 593px;
  padding: 76px 64px 60px;
}

.feature__heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 30px;
}

.feature__title {
  font-size: var(--font-size-700);
  font-weight: 500;
  line-height: var(--line-height-500);
  white-space: nowrap;
}

.feature__title-sub {
  display: block;
  color: var(--gray-300);
}

/* 탭 줄 — 칸 너비는 Figma 값(81 · 81 · 120px) · 흰 바탕 = 고른 칸(처음 = 첫 칸 · 위치·너비 = interactions.js가 --pill-x · --pill-width로) */
.tabs {
  position: relative;
  display: flex;
  align-items: center;
  height: 40px;
  padding: 4px;
  border-radius: var(--radius-300);
  background: var(--gray-100);
}

.tabs::before {
  position: absolute;
  top: 4px;
  left: 4px;
  width: var(--pill-width, 81px);
  height: 32px;
  border-radius: var(--radius-100);
  background: var(--white-1000);
  box-shadow: var(--shadow-100);
  transform: translateX(var(--pill-x, 0px));
  content: '';
}

.tab {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 81px;
  height: 32px;
  border-radius: var(--radius-100);
  color: var(--black-600);
  font-size: var(--font-size-300);
  font-weight: 500;
  line-height: var(--line-height-200);
  white-space: nowrap;
}

.tab--wide {
  width: 120px;
}

.tab:hover,
.tab[aria-selected='true'] {
  color: var(--black-1000);
}

/* 글 묶음 키보드 테두리 — 글에서 조금 띄우고 둥글게(테두리 색·굵기 = 위 공통 규칙) */
.feature__panel:focus-visible {
  border-radius: 4px;
  outline-offset: 8px;
}

.feature__list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  font-size: var(--font-size-400);
  line-height: var(--line-height-300);
}

.feature__item-title {
  font-weight: 500;
}

.feature__item-desc {
  color: var(--gray-500);
}

/* 너비 = 남은 자리(1344px 본문에서 560px · 1280px 화면에서 400px) · 높이 592px = 글 칸보다 1px 짧다(Figma 그대로 — 아래 선 위 1px은 흰 바탕) */
.feature__visual {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  height: 592px;
  overflow: hidden;
  background: linear-gradient(var(--blue-50), var(--beige-50));
}

/* 탭마다 앱 화면에서 보여 줄 곳 — 같은 그림을 옮김(인터랙션 · 디자인 밖 — Figma 탭 프레임 셋은 같은 그림 · 같은 자리 · 탭별 그림이 오면 바꾼다).
   처음 = 작업 관리 = Figma 그대로 · 고른 탭 = 기능 절 data-view(interactions.js) */
.feature__shot {
  position: absolute;
  top: 56px;
  left: 56px;
  width: 1441px; /* Figma 1440.728 → 1441(보이는 크기 = 1배·2배 그림과 1:1 — 차이 0.3px) */
  height: 758px;
  transform: translateX(var(--pan-x, 0px));
}

.feature[data-view='context'] .feature__shot {
  --pan-x: -233px; /* 가운데 대화 화면(메모리·검색 기록) */
}

.feature[data-view='dashboard'] .feature__shot {
  --pan-x: -838px; /* 오른쪽 할 일 보드 · 칸반 표 */
}

.feature__shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* 출시 혜택 신청 — 받는 칸은 제목 아래(사용자 UI가 오면) */
.signup {
  margin-bottom: 0.5px; /* Figma 그대로 — 이 절 아래끝(2855.5px) ↔ 바닥글 위끝(2856px) 0.5px */
  border-bottom: 1px solid var(--black-60);
}

.signup__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  min-height: 792px; /* Figma 792 · 오류 문구로 길어지면 늘어난다 */
  padding: 114px 144px 24px;
  border-inline: 1px solid var(--black-60);
  background: linear-gradient(var(--white-1000), var(--gray-50));
  text-align: center;
}

.signup__title {
  font-size: var(--font-size-700);
  font-weight: 500;
  line-height: var(--line-height-600);
  white-space: nowrap;
}

.signup__desc {
  height: 56px;
  color: var(--gray-500);
  font-size: var(--font-size-500);
  line-height: var(--line-height-400);
  white-space: nowrap;
}

/* 신청 — Calli 결(사용자 2026-10-06 '더 Calli같아야'):
   판 = 기능 절 그림 창과 같은 하늘→베이지(Blue-50 → Beige-50) · 카드 = 앱 화면과 같은 틀(0.5px Black-200 테두리 + Shadow-300) ·
   입력 칸 = Calli 앱 대화 입력창 꼴(알약 · 흰 바탕 · Shadow-100 · 왼쪽 회색 원 아이콘) · 동의 = 탭과 같은 회색 바탕 두 줄(고르면 체크 칸만 바뀜) ·
   버튼 = 첫 화면과 같은 검은 알약 + 화살표. 상태 = form[data-state](보내는 중) · 칸[aria-invalid] · 카드[data-state](안내문 · 완료 — 같은 카드 안) · 동작 = signup.js */
.signup-panel {
  width: 512px;
  padding: 32px;
  border-radius: var(--radius-400);
  background: linear-gradient(var(--blue-50), var(--beige-50));
  text-align: left;
  word-break: keep-all; /* 한글은 낱말 단위로 줄 바꿈('주소 / 로' ❌) */
}

.signup-card {
  display: grid;
  padding: 24px;
  border-radius: var(--radius-200);
  background: var(--white-1000);
  box-shadow: 0 0 0 0.5px var(--black-200), var(--shadow-300);
}

/* 폼 · 안내문 · 완료를 같은 칸에 겹친다 — 폼이 아닌 화면(카드[data-state])일 때 폼은 자리만 남기고 숨어
   카드 높이 = 폼 높이 그대로(사용자 2026-10-06 완료 '고정값 · 가운데' · 안내문 '해당 박스가 정책 문서로') */
.signup-form,
.signup-policy,
.signup-done {
  grid-area: 1 / 1;
}

.signup-card[data-state] .signup-form {
  visibility: hidden;
}

.signup-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 이름표 — 앱 옆 목록의 묶음 이름(Pages · Chats)처럼 작고 옅게 */
.field__label {
  padding-left: 4px;
  color: var(--gray-500);
  font-size: var(--font-size-200);
  font-weight: 500;
  line-height: var(--line-height-200);
}

/* 입력 칸 — 앱 대화 입력창 꼴(아이콘은 누름을 통과시켜 칸으로) */
.composer {
  position: relative;
}

.composer__icon {
  position: absolute;
  top: 6px;
  left: 6px;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--gray-500);
  pointer-events: none;
}

.composer__icon svg {
  width: 16px;
  height: 16px;
}

.composer:has(.composer__input:focus-visible) .composer__icon {
  color: var(--black-1000);
}

.composer__input {
  width: 100%;
  height: 44px;
  padding: 0 16px 0 46px;
  border: 1px solid var(--black-100);
  border-radius: var(--radius-full);
  background: var(--white-1000);
  box-shadow: var(--shadow-50);
  color: var(--black-1000);
  font: inherit;
  font-size: var(--font-size-300); /* 16 → 14(사용자 2026-10-06 '한 단계 낮춰') */
  line-height: var(--line-height-300);
  outline: none;
}

.composer__input::placeholder {
  color: var(--gray-400);
}

.composer__input:hover {
  border-color: var(--black-200);
}

.composer__input:focus-visible {
  border-color: var(--black-400);
  box-shadow: var(--shadow-50), 0 0 0 3px var(--black-200);
}

/* 틀림 표시는 포커스 표시보다 뒤에 둬서 늘 앞선다(커서가 있어도 빨간 테두리) */
.composer__input[aria-invalid='true'] {
  border-color: var(--red-600);
  box-shadow: var(--shadow-50), 0 0 0 3px color-mix(in srgb, var(--red-600) 20%, transparent);
}

/* 칸 아래 오류 문구(shadcn FormMessage) · 비면 자리 없음 */
.field__message {
  padding-left: 4px;
  color: var(--red-600);
  font-size: var(--font-size-200);
  line-height: var(--line-height-200);
}

.field__message:empty {
  display: none;
}

/* 동의 둘 — 탭과 같은 회색 바탕(모서리 16.8) 위 두 줄 · 고르면 체크 칸만 바뀐다(줄은 그대로 — 사용자 2026-10-06 '위계가 강해') · 체크 칸 = shadcn Checkbox ·
   줄 간격 = 30px(앞 36 + 4 — 사용자 2026-10-06 '두 줄이 너무 떨어져') · 글줄 사이 10 · 판 가장자리 11 */
.consents {
  display: flex;
  flex-direction: column;
  padding: 6px 4px;
  border-radius: var(--radius-300);
  background: var(--gray-100);
}

.consent {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  padding: 0 12px;
  border-radius: var(--radius-100);
  color: var(--gray-500);
  font-size: var(--font-size-300);
  line-height: var(--line-height-200);
}

.checkbox {
  display: grid;
  flex: none;
  place-content: center;
  width: 16px;
  height: 16px;
  margin: 0;
  border: 1px solid var(--black-200);
  border-radius: 4px;
  background: var(--white-1000);
  box-shadow: var(--shadow-100);
  cursor: pointer;
  appearance: none;
}

.checkbox:checked {
  border-color: var(--black-1000);
  background: var(--black-1000);
}

.checkbox:checked::before {
  width: 12px;
  height: 12px;
  background: var(--gray-50);
  content: '';
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E")
    center / contain no-repeat;
}

.checkbox:focus-visible {
  border-color: var(--black-400);
  outline: none;
  box-shadow: var(--shadow-100), 0 0 0 3px var(--black-200);
}

.checkbox[aria-invalid='true'] {
  border-color: var(--red-600);
  box-shadow: var(--shadow-100), 0 0 0 3px color-mix(in srgb, var(--red-600) 20%, transparent);
}

/* 동의 문구 = 안내문 여는 단추 · 마우스 올리면 밑줄(사용자 2026-10-06 — '내용 보기' 대신) */
.consent__text {
  border-radius: 4px; /* 키보드 테두리도 둥글게(체크 칸과 같은 모서리) */
  color: inherit;
  text-align: left;
  text-underline-offset: 3px;
}

.consent__text:hover {
  text-decoration: underline;
}

/* 보내기 버튼 — 첫 화면 '출시 할인 혜택 신청하기'와 같은 검은 알약(카드 폭 가득) + 같은 화살표 · 보내는 중 = 화살표 자리에 도는 표시 */
.signup-card__button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  height: 44px;
  border-radius: var(--radius-full);
  background: var(--black-1000);
  color: var(--gray-50);
  font-size: var(--font-size-400);
  font-weight: 500;
  line-height: var(--line-height-300);
}

.signup-card__button:hover {
  background: var(--black-900);
}

.signup-card__button:disabled {
  cursor: progress;
}

.signup-card__arrow {
  flex: none;
}

.spinner {
  display: none;
  flex: none;
  width: 16px;
  height: 16px;
  animation: spin 0.8s linear infinite;
}

.signup-form[data-state='submitting'] .spinner {
  display: block;
}

.signup-form[data-state='submitting'] .signup-card__arrow {
  display: none;
}

/* 동의 안내문 — 카드가 통째로 이 화면으로 바뀐다 · 머리 = 회색 원 뒤로(입력 칸 아이콘과 같은 꼴) + 제목 ·
   본문 = 항목 | 내용 표(줄 사이 가는 선 — 안내 한 줄은 지움 · 사용자 2026-10-06) · 길면 본문만 스크롤(카드 높이 = 폼 높이 그대로) */
.signup-policy {
  display: flex;
  flex-direction: column;
  gap: 16px;
  outline: none;
  contain: size; /* 안내문 길이가 카드 높이를 바꾸지 않게 — 높이는 같은 칸의 폼이 정하고 이 화면은 그 칸을 채운다 */
}

.signup-policy__header {
  display: flex;
  align-items: center;
  gap: 12px;
}

.signup-policy__back {
  display: grid;
  flex: none;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--gray-100);
  color: var(--gray-500);
}

.signup-policy__back svg {
  width: 16px;
  height: 16px;
  scale: -1 1; /* 첫 화면 꺾쇠(→)를 뒤집어 ← */
}

.signup-policy__back:hover {
  background: var(--black-100);
  color: var(--black-1000);
}

.signup-policy__title {
  font-size: var(--font-size-400);
  font-weight: 500;
  line-height: var(--line-height-300);
}

.signup-policy__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  color: var(--gray-500);
  font-size: var(--font-size-200);
  line-height: var(--line-height-200);
}

.signup-policy__body dl > div {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  padding: 12px 4px;
  border-top: 1px solid var(--black-60);
}

.signup-policy__body dl > div:last-child {
  border-bottom: 1px solid var(--black-60);
}

.signup-policy__body dt {
  font-weight: 500;
}

.signup-policy__body dd {
  color: var(--black-1000);
  font-size: var(--font-size-300);
}

/* 완료 — 같은 카드 안 · 폼 자리 한가운데(가로·세로) */
.signup-done {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  outline: none;
}

.signup-done svg {
  width: 32px;
  height: 32px;
  margin-bottom: 4px;
  color: var(--blue-600);
}

.signup-done__title {
  font-size: var(--font-size-500);
  font-weight: 600;
  line-height: var(--line-height-400);
}

.signup-done__note {
  color: var(--gray-500);
  font-size: var(--font-size-300);
  line-height: var(--line-height-300);
  text-wrap: balance; /* 문장마다 한 줄(<br>) · 긴 주소로 넘칠 때도 줄 길이를 고르게 */
}

.signup-done__note strong {
  color: var(--black-1000);
  font-weight: 500;
}

/* 바닥글 */
.footer {
  padding: 96px 0;
}

.footer__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.footer__brand {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 130px;
}

.footer__logo {
  flex: none;
  width: 67.2791px;
  height: 21.0005px;
}

.footer__copy {
  color: var(--gray-400);
  font-size: var(--font-size-300);
  line-height: var(--line-height-200);
  white-space: nowrap;
}

.footer__links {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 아이콘 = 기본(회색) 그림 위에 hover 그림(인스타그램 그라데이션 · 스레드 검정)을 겹쳐 두고 마우스를 올리면 바꾼다(Figma 'Component 12' hover 변형) */
.footer__link {
  display: grid;
}

.footer__link img {
  grid-area: 1 / 1;
}

.footer__link-hover,
.footer__link:hover img:first-child {
  opacity: 0;
}

.footer__link:hover .footer__link-hover {
  opacity: 1;
}

/* 움직임 — '움직임 줄이기' 설정이면 전부 꺼진다(그때 화면 = Figma 그대로 · 탭은 즉시 바뀜).
   등장 이동은 translate 속성(버튼·탭·앱 화면의 transform과 겹치지 않게) · 끝난 모습 = 움직임 없는 화면과 같다 */
@media (prefers-reduced-motion: no-preference) {
  /* 첫 화면 — 상단 줄 · 배지 · 제목 · 버튼 · 앱 화면이 차례로 떠오른다 */
  .nav,
  .badge,
  .hero__title,
  .cta {
    animation: rise var(--duration-400) var(--ease-out) backwards;
  }

  .badge {
    animation-delay: 100ms;
  }

  .hero__title {
    animation-delay: 200ms;
  }

  .cta {
    animation-delay: 300ms;
  }

  .hero__shot {
    animation: rise-far 1100ms var(--ease-out) 400ms backwards;
  }

  /* 두 버튼 — 색만 부드럽게 바뀐다(움직임 없음) */
  .nav__cta,
  .cta {
    transition: background-color var(--duration-100) var(--ease-out);
  }

  /* 탭 — 흰 바탕이 미끄러지고 글자색이 바뀌고 앱 화면이 옮겨 가고 글 묶음이 바뀐다 */
  .tabs::before {
    transition:
      transform var(--duration-200) var(--ease-out),
      width var(--duration-200) var(--ease-out);
  }

  .tab {
    transition: color var(--duration-200) var(--ease-out);
  }

  .feature__shot {
    transition: transform var(--duration-300) var(--ease-out);
  }

  /* 탭 글 묶음 — 고른 탭의 글이 앱 화면이 옮겨 가는 동안 떠오른다(처음 화면 = data-view 없음 = 그대로) */
  .feature[data-view] .feature__panel:not([hidden]) {
    animation: rise var(--duration-300) var(--ease-out) backwards;
  }

  /* 스크롤 등장 — interactions.js가 처음 화면 아래에 있던 [data-reveal]에만 .reveal을 붙이고, 화면에 들어오면 .is-revealed */
  .reveal {
    opacity: 0;
    translate: 0 var(--reveal-distance, 24px);
    transition:
      opacity var(--duration-300) var(--ease-out) var(--reveal-delay, 0ms),
      translate var(--duration-300) var(--ease-out) var(--reveal-delay, 0ms);
  }

  .reveal.is-revealed {
    opacity: 1;
    translate: none;
  }

  /* 기능 절 앱 화면 — 그림 창 안에서 더 멀리서 떠오른다(탭 이동 transform 전환은 그대로 둔다) */
  .feature__shot.reveal {
    --reveal-distance: 64px;

    transition:
      opacity var(--duration-400) var(--ease-out) var(--reveal-delay, 0ms),
      translate var(--duration-400) var(--ease-out) var(--reveal-delay, 0ms),
      transform var(--duration-300) var(--ease-out);
  }

  /* 바닥글 아이콘 — 기본 ↔ hover 그림이 부드럽게 바뀐다 */
  .footer__link img {
    transition: opacity var(--duration-100) var(--ease-out);
  }

  /* 신청 — 칸 테두리·링 · 버튼 색·눌림 · 화살표(→ 2px) · 완료·오류 문구 등장 · 안내문 오가기 */
  .composer__input,
  .checkbox {
    transition:
      border-color var(--duration-100) var(--ease-out),
      box-shadow var(--duration-100) var(--ease-out);
  }

  .composer__icon {
    transition: color var(--duration-100) var(--ease-out);
  }

  .signup-policy__back {
    transition:
      background-color var(--duration-100) var(--ease-out),
      color var(--duration-100) var(--ease-out);
  }

  .signup-policy__back svg {
    transition: translate var(--duration-200) var(--ease-out);
  }

  .signup-policy__back:hover svg {
    translate: -2px 0;
  }

  .signup-card__button {
    transition:
      background-color var(--duration-100) var(--ease-out),
      transform var(--duration-100) var(--ease-out);
  }

  .signup-card__button:active {
    transform: scale(0.98);
  }

  .signup-card__arrow {
    transition: translate var(--duration-200) var(--ease-out);
  }

  .signup-card__button:hover .signup-card__arrow {
    translate: 2px 0;
  }

  .signup-done:not([hidden]) {
    animation: rise var(--duration-300) var(--ease-out) backwards;
  }

  .field__message:not(:empty) {
    animation: appear var(--duration-200) var(--ease-out) backwards;
  }

  /* 동의 안내문 — 오른쪽에서 들어오고 · 뒤로 하면 폼이 왼쪽에서 돌아온다(숨는 동안 폼은 왼쪽으로 비켜 있다) */
  .signup-policy:not([hidden]) {
    animation: from-right var(--duration-200) var(--ease-out) backwards;
  }

  .signup-form {
    transition:
      opacity var(--duration-200) var(--ease-out),
      translate var(--duration-200) var(--ease-out);
  }

  .signup-card[data-state='policy'] .signup-form {
    opacity: 0;
    translate: -16px 0;
  }
}

@keyframes rise {
  from {
    opacity: 0;
    translate: 0 16px;
  }
}

@keyframes rise-far {
  from {
    opacity: 0;
    translate: 0 48px;
  }
}

@keyframes appear {
  from {
    opacity: 0;
    translate: 0 -4px;
  }
}

@keyframes from-right {
  from {
    opacity: 0;
    translate: 16px 0;
  }
}

/* 보내는 중 표시 — 움직임 줄이기 설정에서도 돈다(진행 중임을 알리는 표시라서) */
@keyframes spin {
  to {
    rotate: 360deg;
  }
}