/* A안 — 해가 떠 있는 동안의 디자인(js/theme.js). Expo 앱 디자인 시스템(mobile packages/ui — theme.ts · text-field.tsx · button.tsx)의 값 그대로다.
   그 값은 frontend packages/design_system 에서 옮긴 것이고, marketplace/site/app.css 와 이름 · 값이 같다.
   새 색을 만들지 않는다. */
:root {
  color-scheme: light;
  --white: #FFFFFF;
  --gray300: #C8C8C8;
  --gray400: #A6A6A6;
  --gray700: #555555;
  --gray900: #2A2A2A;
  --gray1000: #1A1A1A;
  --neutral50: #F7F8F9;
  --neutral100: #F1F2F4;
  --neutral200: #DCDFE4;
  --neutral300: #B3B9C4;
  --neutral400: #8590A2;
  --neutral600: #626F86;
  --blue50: #E2F3FF;
  --blue500: #0082FF;
  --blue600: #0069D0;
  --red500: #FF2B3A;

  --primary: var(--blue500);
  --primary-strong: var(--blue600);
  --primary-surface: var(--blue50);
  --text: var(--gray1000);
  --text-secondary: var(--neutral600);
  --label: var(--gray700);
  --placeholder: var(--gray300);
  --field: var(--neutral50);
  --field-border: var(--gray300);
  --danger: var(--red500);

  --r-button: 10px; --r-lg: 12px;
  --page: 16px;
  --shell: 560px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; background: var(--white); }
body {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', sans-serif;
  font-weight: 500; font-size: 16px; line-height: 24px; color: var(--text);
  -webkit-font-smoothing: antialiased; word-break: keep-all; overflow-wrap: anywhere;
}
button, input, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }

.shell { max-width: var(--shell); margin: 0 auto; padding: 40px var(--page) 56px; }
.head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 32px; }
.brand { display: none; }
.eyebrow { margin: 0; font-size: 14px; line-height: 20px; font-weight: 600; color: var(--primary); }
h1 { margin: 0; font-size: 24px; line-height: 32px; font-weight: 700; }
.lead { margin: 0; font-size: 14px; line-height: 20px; color: var(--text-secondary); }
.lead a { color: var(--primary-strong); font-weight: 600; text-decoration: none; white-space: nowrap; }

form { display: flex; flex-direction: column; gap: 28px; }
.field { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.field > label, legend { font-size: 14px; line-height: 16px; font-weight: 500; color: var(--label); padding: 0; }
legend { margin-bottom: 8px; }

/* 고르는 칸 — 앱의 TextField 와 같은 상자(52 · 12 · gray300 테 · neutral50 바탕), 고르면 파랑. */
.choices { display: flex; flex-direction: column; gap: 8px; }
.choices.grid { display: grid; grid-template-columns: 1fr 1fr; }
.choice {
  display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; cursor: pointer;
  border: 1px solid var(--field-border); border-radius: var(--r-lg); background: var(--field);
  font-size: 16px; color: var(--gray900);
}
.choice:has(input:checked) { border-color: var(--primary); background: var(--primary-surface); color: var(--primary-strong); font-weight: 600; }
.choice input, .agree input { accent-color: var(--primary); width: 18px; height: 18px; margin: 0; flex: none; }

textarea, input:not([type]), input[type="text"] {
  width: 100%; min-height: 52px; padding: 14px 16px; border: 1px solid var(--field-border); border-radius: var(--r-lg);
  background: var(--field); font-size: 16px; color: var(--gray900);
}
textarea { resize: vertical; }
textarea:focus, input:focus { outline: none; border-color: var(--primary-strong); }
::placeholder { color: var(--placeholder); }

.row { display: flex; justify-content: space-between; gap: 12px; }
.count { margin-left: auto; font-size: 12px; line-height: 16px; color: var(--neutral300); white-space: nowrap; }
.error { margin: 0; font-size: 12px; line-height: 16px; color: var(--danger); }

.field > .agree { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; font-size: 14px; line-height: 20px; color: var(--gray900); }
.agree input { margin-top: 1px; }

.trap { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* 앱의 Button large — 56 · 10 · blue500 · 18 bold. */
.submit {
  height: 56px; border: 0; border-radius: var(--r-button); cursor: pointer;
  background: var(--primary); color: var(--white); font-size: 18px; font-weight: 700;
}
.submit:disabled { background: var(--gray400); cursor: progress; }

.sent { padding: 24px 20px; border-radius: var(--r-lg); background: var(--primary-surface); }
.sent h2 { margin: 0 0 8px; font-size: 20px; line-height: 28px; font-weight: 700; }
.sent p { margin: 0; font-size: 16px; color: var(--gray900); }