/* =========================================================
   EDIE 체험단 신청 — PC (1920x1080 기준)
   모든 px 값은 1920x1080 디자인 기준이며, .stage 전체를
   JS 가 화면 크기에 맞춰 비율 그대로 scale 합니다.
   ========================================================= */

:root {
  --green: #97c737;
  --green-hover: #88b72c;
  --text: #676765;       /* 제목, 라벨, 입력값 */
  --text-sub: #939393;   /* 카드 설명 */
  --text-off: #a2a2a2;   /* 미선택 약관, 약관 본문 */
  --text-link: #a1a1a1;  /* 내용보기 */
  --text-close: #8b8b8b; /* 나가기, SNS 라벨 */
  --placeholder: #9d9d9d;
  --line: #d9d9d9;
  --btn-off: #b1b1b1;
  --card: rgba(255, 255, 255, 0.37);
  --error: #e5484d;
  --scale: 1;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  display: flow-root; /* .stage-box 의 margin-top 이 body 밖으로 새어 스크롤이 생기는 것 방지 */
  margin: 0;
  overflow-x: hidden;
  background: #fff; /* 인트로 시작 시 배경 영상이 투명할 때 보이는 바탕색 */
  color: var(--text);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

button, input, select { font: inherit; letter-spacing: inherit; color: inherit; }
button { cursor: pointer; }

/* ---------- 배경 ---------- */
.bg-video {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 29%;
}
.bg-overlay {
  position: fixed;
  inset: 0;
  background: url("../assets/images/backgroundImage.png") center / cover no-repeat;
  pointer-events: none;
}

/* ---------- 스테이지 ----------
   .stage 는 디자인 원본 크기(PC 1920x1080, 모바일 360x600)로 그리고 scale 로 맞춘다.
   .stage-box 는 축소/확대된 실제 크기를 차지하는 박스 (크기·여백은 JS 가 지정).
   평소엔 화면 안에 딱 들어가 스크롤이 없고, 모바일 키보드가 올라와 화면이
   줄어들 때만 페이지가 스크롤되어 입력칸을 볼 수 있다. */
.stage-box {
  position: relative;
  margin: 0 auto;
}
.stage {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1080px;
  transform: scale(var(--scale));
  transform-origin: 0 0;
}
.m-only, .br-m { display: none; }

.step {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}
.step.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.35s ease, visibility 0s;
}

/* ---------- 공통 버튼 ---------- */
.btn {
  border: 0;
  border-radius: 999px;
  background: var(--green);
  color: #fff;
  font-weight: 700;
  transition: background-color 0.2s, color 0.2s;
}
.btn:hover:not(:disabled) { background: var(--green-hover); }
.btn:disabled { background: #fff; color: var(--btn-off); cursor: default; }
.btn:focus-visible,
.btn-sub:focus-visible,
.link-more:focus-visible,
.terms-close:focus-visible { outline: 3px solid rgba(151, 199, 55, 0.5); outline-offset: 3px; }

/* ---------- 로고 (edieLogo 위에 흰 얼굴 edieLogoPart 를 겹침) ---------- */
.logo { display: block; }
.logo img { display: block; width: 100%; }
.logo .logo-part {
  position: absolute;
  left: 35.625%;   /* 285 / 800 */
  top: 24.53%;     /* 65 / 265 */
  width: 14.125%;  /* 113 / 800 */
}

/* ---------- ① 인트로 ---------- */
.intro-logo {
  position: absolute;
  top: 220px;
  left: 759px; /* (1920 - 402) / 2 — transform 은 등장 애니메이션에 사용 */
  width: 402px;
}
.intro-title {
  position: absolute;
  top: 398px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-weight: 700;
  line-height: 65px;
  letter-spacing: -0.02em;
}
.intro-title .s { font-size: 40px; }
.intro-title .l { font-size: 50px; }
.intro-sub {
  position: absolute;
  top: 712px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 24px;
  font-weight: 500;
}
.btn-intro {
  position: absolute;
  top: 773px;
  left: 823px; /* (1920 - 274) / 2 */
  width: 274px;
  height: 78px;
  font-size: 32px;
}

/* ---------- 인트로 등장 애니메이션 ----------
   0ms     로고(얼굴 제외) 가운데에 크게 fade-in (500ms)
   800ms   얼굴이 D 기둥 뒤에서 오른쪽으로 slide + -17° → 0° 회전 (500ms)
   1300ms  완성된 로고가 작아지며 제자리로 이동 + 배경 fade-in (500ms)
   1800ms  .intro-title slide-in (500ms)
   2300ms  .intro-sub, .btn-intro slide-in (500ms)
   JS(app.js)가 로고 이미지 준비 후 .step-intro 에 .play 를 붙이면 시작 */
.step-intro {
  /* 가운데 큰 로고 → 최종 위치: 폭 402→720(×1.791), 중심 y 286.6→540 */
  --logo-from: translateY(253.4px) scale(1.791);
  --slide: 40px;
}
/* 얼굴이 D 기둥(얼굴 왼쪽 끝) 뒤에서 나오도록, 그 왼쪽은 잘라서 숨김 */
.logo-part-clip {
  position: absolute;
  left: 35.625%;   /* 285 / 800 */
  top: 0;
  width: 64.375%;  /* (800 - 285) / 800 */
  height: 100%;
  overflow: hidden;
}
.logo .logo-part-clip .logo-part {
  left: 0;
  top: 24.53%;
  width: 21.942%;  /* 113 / 515 */
}

.step-intro:not(.play) :is(.intro-logo, .logo-part, .intro-title, .intro-sub, .btn-intro) {
  opacity: 0;
  visibility: hidden;
}
/* 실행 순서 (시작 시각 = animation-delay, 각 500ms)
   ① 0ms      로고 fade-in        .intro-logo   intro-fade
   (500~800ms 대기)
   ② 800ms    얼굴 slide + 회전    .logo-part    intro-part
   ③ 1300ms   로고 축소·이동       .intro-logo   intro-logo-move
              배경 fade-in         .bg-video, .bg-overlay  intro-fade
   ④ 1800ms   타이틀 slide-in      .intro-title  intro-rise
   ⑤ 2300ms   서브 문구·버튼 등장  .intro-sub, .btn-intro  intro-rise
   fill-mode both: 시작 전엔 첫 프레임(숨김) 상태로 대기, 끝나면 마지막 상태 유지 */

/* ① 0ms: 가운데에 크게 놓인 로고(얼굴 제외)가 투명 → 불투명
   ③ 1300ms: 완성된 로고가 가운데 큰 크기(--logo-from)에서 제자리 크기·위치로 이동 (천천히 시작·천천히 끝) */
.step-intro.play .intro-logo {
  animation:
    intro-fade 500ms ease-out both,
    intro-logo-move 500ms cubic-bezier(0.65, 0, 0.35, 1) 1300ms both;
}
/* ② 800ms: 얼굴이 D 기둥 뒤(.logo-part-clip 왼쪽 밖)에서 오른쪽으로 나오며 -17° → 0° 회전 (빠르게 나와 부드럽게 멈춤) */
.step-intro.play .logo-part {
  animation: intro-part 500ms cubic-bezier(0.22, 0.9, 0.3, 1) 800ms both;
}
/* ③ 1300ms: 로고 축소·이동과 함께 배경(영상 + 패턴)이 투명 → 불투명.
   배경은 .stage 밖(body 바로 아래)에 있어 :has 로 인트로 상태를 확인 */
body:has(.step-intro:not(.play)) :is(.bg-video, .bg-overlay) {
  opacity: 0;
}
body:has(.step-intro.play) :is(.bg-video, .bg-overlay) {
  animation: intro-fade 500ms cubic-bezier(0.65, 0, 0.35, 1) 1300ms both;
}
/* ④ 1800ms: 타이틀이 아래(--slide 만큼)에서 위로 올라오며 나타남 */
.step-intro.play .intro-title {
  animation: intro-rise 500ms cubic-bezier(0.22, 0.9, 0.3, 1) 1800ms both;
}
/* ⑤ 2300ms: 서브 문구와 "에디 입양하기" 버튼이 함께 올라오며 나타남 (나타나기 전엔 클릭 불가) */
.step-intro.play .intro-sub,
.step-intro.play .btn-intro {
  animation: intro-rise 500ms cubic-bezier(0.22, 0.9, 0.3, 1) 2300ms both;
}

@keyframes intro-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes intro-logo-move {
  from { transform: var(--logo-from); }
  to { transform: none; }
}
@keyframes intro-part {
  from { transform: translateX(-110%) rotate(-17deg); }
  to { transform: none; }
}
@keyframes intro-rise {
  from { opacity: 0; visibility: hidden; transform: translateY(var(--slide)); }
  to { opacity: 1; visibility: visible; transform: none; }
}

/* ---------- 폼 단계 공통 ---------- */
.logo-sm {
  position: absolute;
  top: 70px;
  left: 50%;
  width: 244px;
  transform: translateX(-50%);
}
.panel {
  position: absolute;
  top: 220px;
  left: 560px;
  width: 800px;
}
.card {
  padding: 38px 40px 40px;
  border-radius: 40px;
  background: var(--card);
}
.card-title {
  margin: 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 38px;
}
.card-desc {
  margin: 10px 0 0;
  font-size: 20px;
  font-weight: 500;
  color: var(--text-sub);
}

.field { margin-top: 28px; }
.field + .field { margin-top: 27px; }
.field.tight + .field { margin-top: 19px; }
.label {
  display: block;
  margin-bottom: 4px;
  font-size: 20px;
  font-weight: 700;
  line-height: 26px;
}

.input {
  display: block;
  height: 48px;
  padding: 0 17px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  font-size: 18px;
  color: var(--text);
  outline: none;
  box-shadow: inset 0 0 0 1.5px transparent;
  transition: box-shadow 0.15s;
}
.input::placeholder { color: var(--placeholder); opacity: 1; }
.input:focus { box-shadow: inset 0 0 0 1.5px var(--green); }
.input.is-invalid { box-shadow: inset 0 0 0 1.5px var(--error); }

.w-sm { width: 341px; }
.w-md { width: 403px; }
.w-full { width: 100%; }
.w-p1 { width: 63px; padding: 0; text-align: center; }
.w-p2 { width: 73px; padding: 0; text-align: center; }
.w-pet { width: 380px; }
.mt-8 { margin-top: 8px; }

.row { display: flex; align-items: center; gap: 24px; }
.row.phone { gap: 0; }
.dash {
  width: 23px;
  text-align: center;
  font-size: 20px;
  font-weight: 900;
}

input[readonly][data-address-search] { cursor: pointer; }

.btn-sub {
  height: 48px;
  width: 119px;
  border: 0;
  border-radius: 10px;
  background: #fff;
  font-size: 18px;
  font-weight: 500;
  color: var(--text);
  transition: background-color 0.15s;
}
.btn-sub:hover { background: #f4f9e8; }

/* select */
.select { position: relative; }
.select select {
  width: 100%;
  appearance: none;
  cursor: pointer;
  padding-right: 50px;
}
.select select:invalid { color: var(--placeholder); }
.select option { color: var(--text); }
.select::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 22px;
  width: 11px;
  height: 11px;
  margin-top: -9px;
  border-right: 2.5px solid #9d9d9d;
  border-bottom: 2.5px solid #9d9d9d;
  transform: rotate(45deg);
  pointer-events: none;
}

/* radio */
.radios {
  display: inline-flex;
  align-items: center;
  gap: 38px;
  height: 48px;
  padding: 0 20px;
  border-radius: 10px;
  background: #fff;
}
.radios.full { display: flex; width: 100%; }
.radios.vertical {
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  height: auto;
  padding: 6px 20px;
}
.radios.vertical .radio { height: 44px; }

.radio {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 18px;
  color: var(--placeholder);
  cursor: pointer;
  user-select: none;
}
.radio input {
  appearance: none;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  margin: 0;
  border: 3px solid var(--line);
  border-radius: 50%;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s, background-color 0.15s;
}
.radio input:checked {
  border-color: var(--green);
  background: var(--green);
  box-shadow: inset 0 0 0 1.5px #fff;
}
.radio input:focus-visible { outline: 2px solid rgba(151, 199, 55, 0.6); outline-offset: 2px; }
.radio:has(input:checked) { color: var(--text); font-weight: 500; }
.radios.is-invalid { box-shadow: inset 0 0 0 1.5px var(--error); }

.radio-etc { display: flex; align-items: center; gap: 16px; }
.input-inline {
  flex: 1;
  height: 34px;
  padding: 0 12px;
  border: 0;
  border-radius: 8px;
  background: #f5f5f3;
  font-size: 17px;
  color: var(--text);
  outline: none;
}
.input-inline::placeholder { color: var(--placeholder); }
.input-inline:focus { box-shadow: inset 0 0 0 1.5px var(--green); }
.input-inline.is-invalid { box-shadow: inset 0 0 0 1.5px var(--error); }

/* error */
.error {
  margin: 6px 0 0 4px;
  font-size: 15px;
  font-weight: 500;
  color: var(--error);
}
.error:empty { display: none; }
.form-error {
  position: absolute;
  right: 0;
  bottom: 83px; /* 버튼(69px) 바로 위 */
  margin: 0;
  font-size: 17px;
}

/* nav
   이전/다음 버튼은 기본적으로 y=911 에 고정되고, 카드가 길어지면
   (에러 문구 등) 카드 아래 28px 로 밀려나 겹치지 않음 */
.nav { display: flex; justify-content: flex-end; gap: 25px; }
.panel:has(> .nav-fixed) {
  display: flex;
  flex-direction: column;
  min-height: 760px; /* 911 + 69 - 220 */
}
.nav-fixed {
  margin-top: auto;
  padding-top: 28px;
}
.nav-inline { margin-top: 37px; }
.btn-nav { width: 142px; height: 69px; font-size: 24px; }
.btn-nav-lg { width: 176px; height: 69px; font-size: 24px; }

/* ---------- ② 약관 ---------- */
.agree {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  cursor: pointer;
  user-select: none;
}
.agree input { position: absolute; opacity: 0; pointer-events: none; }
.agree-box {
  position: relative;
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border: 2px solid var(--text-off);
  border-radius: 7px;
  transition: border-color 0.15s;
}
/* 체크 시: 초록 테두리 + 안쪽에 초록 에디 얼굴 (edieLogoPart 를 마스크로 사용) */
.agree-box::after {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 22px;
  height: 24px;
  background: var(--green);
  -webkit-mask: url("../assets/images/edieLogoPart.png") center / contain no-repeat;
  mask: url("../assets/images/edieLogoPart.png") center / contain no-repeat;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 0.15s, transform 0.15s;
}
.agree input:checked + .agree-box,
.agree-box.is-on { border-color: var(--green); }
.agree input:checked + .agree-box::after,
.agree-box.is-on::after { opacity: 1; transform: none; }
.agree input:focus-visible + .agree-box { outline: 3px solid rgba(151, 199, 55, 0.5); outline-offset: 2px; }
.agree-text {
  font-size: 19px;
  font-weight: 500;
  color: var(--text-off);
  transition: color 0.15s;
}
.agree input:checked ~ .agree-text { color: var(--text); }

.agree-all {
  display: flex;
  margin-top: 42px;
  padding-bottom: 14px;
  border-bottom: 1.5px solid #c9c9c7;
}
.agree-all .agree-text { font-size: 22px; font-weight: 700; }

.agree-item { margin-top: 36px; }
.agree-item + .agree-item { margin-top: 34px; }
.agree-item:last-child { margin-bottom: 44px; }
.link-more {
  display: block;
  margin: 6px 0 0 49px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 17px;
  color: var(--text-link);
}
.link-more:hover { color: var(--text); }
.agree.is-invalid .agree-box { border-color: var(--error); }

/* 약관 상세 */
.terms-detail { padding-bottom: 34px; }
.terms-head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
}
.terms-head h2 {
  flex: 1;
  margin: 0;
  font-size: 22px;
  font-weight: 700;
}
.terms-close {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 40px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 17px;
  color: var(--text-close);
}
.terms-close span { font-size: 26px; font-weight: 300; line-height: 1; }
.terms-close:hover { color: var(--text); }

.terms-body {
  margin-top: 22px;
  padding-right: 40px;
  word-break: keep-all;
  font-size: 20px;
  font-weight: 500;
  line-height: 40px;
  color: var(--text-off);
}
.terms-body p { margin: 0; }
.terms-body .t-h:not(:first-child) { margin-top: 40px; }
.terms-body ul { margin: 0; padding-left: 30px; }
.terms-body li::marker { font-size: 14px; }
.terms-body ul.spaced { padding-left: 25px; }
.terms-body ul.spaced li + li { margin-top: 40px; }
.terms-body ul.spaced .t-h { margin-top: 0; }

/* ---------- ⑦ 완료 ---------- */
.done-logo {
  position: absolute;
  top: 389px;
  left: 50%;
  width: 422px;
  transform: translateX(-50%);
}
.done-title {
  position: absolute;
  top: 551px;
  left: 0;
  right: 0;
  margin: 0;
  text-align: center;
  font-size: 50px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.sns {
  position: absolute;
  top: 659px;
  left: 50%;
  display: flex;
  gap: 25px;
  margin: 0;
  padding: 0;
  list-style: none;
  transform: translateX(-50%);
}
.sns a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 80px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-close);
  text-decoration: none;
}
.sns-icon {
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: rgba(46, 46, 46, 0.29);
  transition: background-color 0.2s;
}
.sns a:hover .sns-icon { background: rgba(46, 46, 46, 0.42); }
/* ---------- 허니팟 ---------- */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .step, .step.is-active { transition: none; }
  /* 움직임 줄이기 설정 사용자는 인트로 애니메이션 없이 완성된 화면을 바로 표시 */
  .step-intro.play *,
  body:has(.step-intro.play) :is(.bg-video, .bg-overlay) { animation: none !important; }
}

/* =========================================================
   모바일 · 태블릿 (360x600 기준 시안)
   - 가로 1279px 이하 또는 세로 화면(portrait) → 이 레이아웃
   - 그 외(가로 1280px 이상 & 가로 화면) → 위의 PC 레이아웃
   JS(app.js 의 LAYOUT_QUERY)와 같은 조건을 써야 함
   ========================================================= */
@media (max-width: 1279px), (orientation: portrait) {
  .stage { width: 360px; height: 600px; }
  .m-only { display: block; }
  .br-m { display: inline; }

  /* 영상 맨 윗줄(원본 1px)이 검은색이라, 위에 맞추면 검은 줄이 보인다.
     8px 위로 올려 가린다 (원본 1px 은 화면에서 최대 약 4px 로 확대됨) */
  .bg-video { top: -8px; height: calc(100% + 8px); object-position: 50% 0%; }
  .bg-overlay { display: none; }

  /* ① 인트로 */
  .step-intro {
    /* 폭 197→280(×1.421), 중심 y 147.6→300 */
    --logo-from: translateY(152.4px) scale(1.421);
    --slide: 20px;
  }
  .intro-logo { top: 115px; left: 81.5px; width: 197px; }
  .intro-title { top: 199px; line-height: 30px; letter-spacing: -0.03em; }
  .intro-title .s { font-size: 18.5px; }
  .intro-title .l { font-size: 23px; }
  .intro-sub { top: 397px; font-size: 15px; }
  .btn-intro { top: 432px; left: 89px; width: 182px; height: 53px; font-size: 20px; }

  /* 폼 단계 공통 */
  .logo-sm { top: 40px; width: 130px; }
  .panel { top: 116px; left: 30px; width: 300px; }
  .card { padding: 17px 25px 25px; border-radius: 20px; }
  .card-title { font-size: 18px; line-height: 22px; }
  .card-desc { margin-top: 7px; font-size: 13px; }

  .field { margin-top: 30px; }
  .field + .field { margin-top: 13px; }
  .field.tight + .field { margin-top: 13px; }
  .label { margin-bottom: 5px; font-size: 12px; line-height: 16px; word-break: keep-all; }

  .input {
    height: 36px;
    padding: 0 12.5px;
    border-radius: 7px;
    font-size: 12px;
    letter-spacing: -0.02em;
  }
  .input::placeholder { color: #c9c9c9; }
  .select select:invalid { color: #c9c9c9; }
  .input:focus, .input.is-invalid { box-shadow: inset 0 0 0 1px var(--green); }
  .input.is-invalid { box-shadow: inset 0 0 0 1px var(--error); }

  .w-sm, .w-full, .select.w-sm { width: 100%; }
  .w-md { width: 151px; }
  .w-p1 { width: 47px; padding: 0; }
  .w-p2 { width: 54px; padding: 0; }
  .mt-8 { margin-top: 6px; width: 100%; }
  .row { gap: 15px; }
  .dash { width: 17px; font-size: 13px; }
  .btn-sub { width: 84px; height: 36px; border-radius: 7px; font-size: 12px; }

  .select::after { right: 18px; width: 7px; height: 7px; margin-top: -6px; border-width: 0 1.5px 1.5px 0; }
  .select select { padding-right: 36px; }

  /* 라디오 (반려동물) */
  .radios { gap: 26px; height: 36px; padding: 0 14.5px; border-radius: 7px; }
  .radio { gap: 7px; font-size: 12px; }
  .radio input { width: 9.5px; height: 9.5px; border-width: 2.2px; }
  .radio input:checked { box-shadow: inset 0 0 0 1px #fff; }
  #apply-form [data-step=daily] .row { flex-wrap: wrap; gap: 6px; }
  .w-pet { width: 100%; }

  /* 로봇과의 경험·기타: 라디오 대신 드롭다운 */
  .radios.has-select { display: none; }
  .radios.vertical.has-select { display: block; height: auto; padding: 0; background: none; }
  .radios.vertical.has-select .radio { display: none; }
  .radios.vertical.has-select .input-inline {
    display: block;
    width: 100%;
    height: 36px;
    margin-top: 6px;
    padding: 0 12.5px;
    border-radius: 7px;
    background: #fff;
    font-size: 12px;
  }
  .radios.vertical.has-select .input-inline[hidden] { display: none; }
  .select.m-only.is-invalid select, .select.m-only select.is-invalid { box-shadow: inset 0 0 0 1px var(--error); }

  /* 기타 단계: 2줄 라벨이라 간격을 좁게 */
  [data-step=etc] .field { margin-top: 20px; }
  [data-step=etc] .field + .field { margin-top: 8px; }
  [data-step=etc] .field.tight + .field { margin-top: 13px; }

  /* 에러 문구는 라벨 줄 오른쪽에 겹쳐 표시 → 높이가 늘지 않아 스크롤이 생기지 않음 */
  .field { position: relative; }
  .error {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: -0.02em;
  }
  /* 로봇과의 경험: 질문이 길어 라벨 줄과 겹침 → 카드에 여유가 있으니 아래에 표시 */
  [data-step=robot] .error { position: static; margin: 3px 0 0 2px; line-height: 14px; }
  /* 기타: 2줄 라벨과 겹침 → 비어 있는 입력칸 안쪽 오른쪽에 표시 */
  [data-step=etc] .error { top: auto; bottom: 0; right: 12.5px; line-height: 36px; pointer-events: none; }
  [data-step=etc] .error[data-for=share_channel] { right: 36px; }
  /* 상세주소 칸이 열리면 간격을 줄여 한 화면에 유지 */
  [data-step=basic] .card:has(#address_detail:not([hidden])) .field + .field { margin-top: 7px; }
  [data-step=basic] .card:has(#address_detail:not([hidden])) { padding-bottom: 18px; }
  .form-error { bottom: 52px; font-size: 11px; left: 0; text-align: center; }

  /* 이전/다음: 카드 높이 381 고정, 버튼은 카드 아래 28px */
  .panel:has(> .nav-fixed) { min-height: 454.5px; }
  .panel:has(> .nav-fixed) .card { min-height: 381px; }
  .nav { justify-content: center; gap: 16.5px; }
  .nav-fixed { padding-top: 28px; }
  .nav-inline { margin-top: 15px; }
  .btn-nav { width: 94.3px; height: 45.5px; font-size: 16px; }
  .btn-nav-lg { width: 140px; height: 45.5px; font-size: 16px; }

  /* ② 약관 */
  #terms-list { padding-top: 26px; padding-bottom: 45px; }
  .agree { gap: 9.5px; }
  .agree-box { width: 19px; height: 19px; border-width: 1.5px; border-radius: 4.5px; }
  .agree-box::after { left: 1px; top: 0.5px; width: 13.5px; height: 15px; }
  .agree-text { font-size: 12px; }
  .agree-all { margin-top: 53px; padding-bottom: 8px; border-bottom-width: 1px; }
  .agree-all .agree-text { font-size: 14px; }
  .agree-item { margin-top: 23px; }
  .agree-item + .agree-item { margin-top: 23px; }
  .agree-item:last-child { margin-bottom: 0; }
  .link-more { margin: 5px 0 0 31px; font-size: 11px; }

  .terms-detail { padding: 25px 25px 26px; }
  .terms-head { gap: 9px; margin-top: 0; }
  .terms-head h2 { font-size: 13px; }
  .terms-close { margin-right: 0; }
  .terms-close-label { display: none; }
  .terms-close span { font-size: 20px; }
  .terms-body {
    margin-top: 40px;
    padding-right: 0;
    font-size: 12px;
    line-height: 15px;
  }
  .terms-body .t-h:not(:first-child) { margin-top: 15px; }
  .terms-body ul { padding-left: 18px; }
  .terms-body li::marker { font-size: 9px; }
  .terms-body ul.spaced { padding-left: 18px; }
  .terms-body ul.spaced li + li { margin-top: 15px; }

  /* ⑦ 완료 */
  .done-logo { top: 205px; width: 184px; }
  .done-title { top: 283px; font-size: 18px; }
  .sns { top: 342px; gap: 10px; }
  .sns a { width: 78px; gap: 6px; font-size: 12px; }
  .sns-icon { width: 46.6px; height: 46.6px; border-radius: 10px; background: rgba(46, 46, 46, 0.18); }
  .sns-icon svg { width: 30px; height: 30px; }
  .sns-icon img { width: 26px; height: auto; }
}