/* ============================================================
   회원가입 · 로그인 (www/signup.php)
   base.css · front.css 다음에 읽힌다.

   세 단계를 한 화면에 쌓는다. 페이지를 나누지 않는 이유는 2단계에서
   **이미 회원인 사람이 그대로 로그인되기** 때문이다 — 나누면 "가입 화면에
   들어왔는데 로그인이 됐다" 가 된다.
   ============================================================ */
.page--signup { overflow-y: auto; }

.su-top {
  display: flex; align-items: center; gap: 10px;
  padding: 14px var(--pad); border-bottom: 1px solid var(--line-soft);
}
.su-back {
  display: grid; place-items: center; width: 32px; height: 32px; margin-left: -6px;
  border-radius: 999px; color: var(--text-dim); text-decoration: none;
}
.su-back svg { width: 20px; height: 20px; }
.su-back:active { background: var(--surface-2); }
.su-logo { height: 18px; display: block; }

.su { padding: 26px var(--pad) 40px; }
.su__h { margin: 0 0 8px; font-size: 21px; font-weight: 800; letter-spacing: -0.5px; }
.su__sub { margin: 0 0 24px; font-size: 13px; line-height: 1.7; color: var(--text-dim); }

.su-step { margin-bottom: 18px; }
.su-step[hidden] { display: none; }

.su-label { display: block; margin-bottom: 6px; font-size: 12.5px; font-weight: 600; color: var(--text-dim); }
.su-row { display: flex; gap: 8px; }

.su-input {
  flex: 1; min-width: 0; font: inherit; font-size: 15px;
  padding: 12px 13px; border-radius: var(--radius);
  background: var(--surface); border: 1px solid var(--line); color: var(--text);
}
.su-input--wide { width: 100%; }
.su-input:focus { outline: none; border-color: var(--yellow); }
/* 잠긴 칸은 '못 고친다' 가 보여야 한다. 번호를 바꾸려 눌렀다가 아무 일도
   안 일어나면 고장으로 읽힌다. */
.su-input:disabled { background: var(--surface-2); color: var(--text-mute); }

.su-mini {
  flex-shrink: 0; cursor: pointer; font: inherit; font-size: 13px; font-weight: 700;
  padding: 0 14px; min-width: 86px; border-radius: var(--radius);
  background: var(--text); border: 1px solid var(--text); color: #fff;
}
.su-mini:disabled { background: var(--surface-2); border-color: var(--line); color: var(--text-mute); cursor: default; }

.su-msg { margin: 7px 2px 0; min-height: 17px; font-size: 12px; color: var(--text-dim); }
.su-msg.is-bad { color: #D64545; font-weight: 600; }

/* ===== 동의 ===== */
.su-agree {
  margin: 16px 0 18px; padding: 12px 14px;
  border: 1px solid var(--line-soft); border-radius: var(--radius); background: var(--surface-2);
}
.su-chk { display: flex; align-items: flex-start; gap: 9px; padding: 7px 0; font-size: 13px; cursor: pointer; }
.su-chk input { margin: 2px 0 0; width: 17px; height: 17px; accent-color: var(--yellow); flex-shrink: 0; }
.su-chk span { line-height: 1.55; }
/* 광고성 수신동의만 두 줄이다 — 전송 매체를 밝혀야 해서 한 줄에 안 들어간다.
   b 는 동의 제목, small 은 무엇을 어디로 보내는지. */
.su-chk b { font-weight: 700; }
.su-chk small { display: block; margin-top: 3px; font-size: 11.5px; line-height: 1.55; color: var(--text-mute); }
.su-chk a { color: var(--text); font-weight: 700; }
/* 전체 동의는 나머지와 한 묶음이 아니라 그 위의 스위치다. 선으로 끊어 둔다. */
.su-chk--all { padding-bottom: 11px; margin-bottom: 4px; border-bottom: 1px solid var(--line); font-size: 14px; }

.su-submit {
  width: 100%; cursor: pointer; font: inherit; font-size: 15px; font-weight: 800;
  padding: 14px; border-radius: var(--radius);
  background: var(--yellow); border: 0; color: #fff;
}
.su-submit:active { background: var(--yellow-press); }
.su-submit:disabled { background: var(--surface-2); color: var(--text-mute); cursor: default; }

/* ===== 카카오로 가는 길 ===== */
.su-or {
  display: flex; align-items: center; gap: 10px;
  margin: 24px 0 14px; color: var(--text-mute); font-size: 12px;
}
.su-or::before, .su-or::after { content: ''; flex: 1; height: 1px; background: var(--line-soft); }

.su-foot {
  margin: 18px 0 0; font-size: 12px; line-height: 1.75; color: var(--text-mute);
}
.su-foot b { color: var(--text-dim); }

/* ---------- 선택 정보 ----------
   필수 칸과 동의 사이에 둔다. 테두리로 묶어서 '여기는 안 적어도 된다' 가
   한눈에 읽히게 한다 — 묶지 않으면 이름 칸과 같은 무게로 보인다. */
.su-opt {
  margin: 18px 0 4px; padding: 14px;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: var(--surface-2);
}
.su-opt__t {
  margin: 0 0 12px; font-size: 13px; font-weight: 700; color: var(--text);
  display: flex; align-items: baseline; gap: 8px;
}
.su-opt__t span { font-size: 11.5px; font-weight: 600; color: var(--text-mute); }

/* 생년월일과 성별은 한 줄에. 둘 다 짧아서 한 칸씩 쓰면 화면만 길어진다. */
.su-opt__row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.su-opt .su-label { margin-top: 12px; }
/* 제목 바로 밑의 첫 칸까지 띄우면 묶음이 벌어져 보인다. */
.su-opt > .su-label { margin-top: 0; }
.su-opt .su-input { background: var(--surface); }
/* 사파리는 date 칸 높이를 글자에 맞춰 줄여 버린다. 옆 칸과 어긋나 보인다. */
.su-opt input[type="date"] { min-height: 46px; -webkit-appearance: none; appearance: none; }

/* 미리보기 띠 — 관리자가 화면을 볼 때만 뜬다(app/front/preview.php).
   캡처에 섞여 들어가도 '이건 미리보기' 가 읽혀야 한다. */
.su-preview {
  margin: 0 0 16px; padding: 10px 12px; border-radius: var(--radius);
  background: #FBF0DC; color: #7A4F0C; border: 1px solid #EBD8AE;
  font-size: 12px; font-weight: 600; line-height: 1.6;
}