:root{
  --bg:#F1F8E9; --text:#111827; --muted:#6B7280;
  --border:#4CAF50; --field:#ffffff;
  --cta:#F4B942; --cta-pressed:#d89f36;
  --btn:#2E7D32; --btn-hover:#388E3C;
  --divider:#E5E7EB; --space:8px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Helvetica, Arial, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  display:flex; align-items:center; justify-content:center;
}
.phone{width:375px; max-width:100%; height:812px; max-height:100vh; position:relative; padding:calc(var(--space)*3) calc(var(--space)*2) calc(var(--space)*3)}
.back{position:absolute; left:calc(var(--space)*2); top:calc(var(--space)*2); width:40px; height:40px; border-radius:9999px; background:#fff; border:1px solid #ececec; display:grid; place-items:center; cursor:pointer}
.back svg{width:18px; height:18px}
.wrap{margin-top:calc(var(--space)*7); max-width:340px; margin-inline:auto; display:grid; gap:calc(var(--space)*3)}
.title{font-size:22px; font-weight:800; text-align:center}
.group{display:grid; gap:calc(var(--space)*1)}
.label{font-size:14px; font-weight:700}
.row{
  display:grid;
  grid-template-columns: minmax(0,1fr) 88px;  /* ← 핵심! */
  gap: calc(var(--space)*2);
}
.row .input{ flex:1 1 0; min-width:0; }  /* ← 핵심! */
.row .check{ flex:0 0 88px; width:88px; }

.input{width:100%; background:var(--field); border:2px solid var(--border); border-radius:12px; height:52px; padding:0 14px; font-size:16px; outline:none; transition:border-color .15s ease}
.input:focus{border-color:#2E7D32}
.check{height:44px; border-radius:10px; border:none; background:var(--btn); color:#fff; font-weight:700; font-size:14px; cursor:pointer; align-self:center}
.check:hover{background:var(--btn-hover)}
.help{font-size:12px; color:var(--muted)}
.cta{margin-top:calc(var(--space)*3)}
.submit{width:100%; height:56px; border:none; border-radius:12px; background:var(--cta); color:#fff; font-weight:800; font-size:16px; cursor:pointer}
.submit:active{background:var(--cta-pressed); transform:translateY(1px)}
.spacer{height:calc(var(--space)*2)}
.tos {
  margin-top:12px;
  font-size:12px;
  color:var(--muted);
  text-align:center;
  line-height:1.4;
}
.tos a {
  color:var(--green-700);
  text-decoration:none;
  font-weight:600;
}
.tos a:hover {
  text-decoration:underline;
}
.group > span,
#emailMsg,#nicknameMsg,#verifyMsg,#errorMsg{
  display:block;
  margin-top:4px;
  line-height:1.35;
  white-space:normal !important;
  overflow-wrap:anywhere;
  word-break:break-word;
  max-width:100%;
  color: #e53935;       /* 에러일 때 빨간색 */
  font-size: 0.9rem;
  margin-top: 6px;
  text-align: left;
}
.phone{ overflow-x:hidden; } /* 최후 방어 */
.phone{
  width:800px;                 /* 핵심: 800px */
  max-width:95vw;              /* 작은 화면에서 살짝 줄어듦 */
  height:auto;                 /* 고정 높이 해제 */
  max-height:none;
  padding:0;                   /* 프레임형으로 보이게 패딩 제거 */
  background:var(--soft, #f9fbe7);
  border:1px solid var(--divider);
  border-radius:20px;
  overflow:hidden;             /* 테두리 안으로 내용 클립 */
  box-shadow:0 8px 32px rgba(0,0,0,.08);
  position:relative;
}

/* 헤더 버튼은 고정이 아니라 상단 바 안 아이콘처럼 */
.back{
  position:static;
  margin:18px 20px;
  border-color:var(--divider);
}

/* 상단 영역(간단 헤더 느낌) */
.phone::before{
  content:"";
  display:block;
  height:1px;
  background:var(--divider);
  opacity:.7;
}
.head-lite{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:18px 20px 0 20px;
}

/* 내부 컨텐츠 폭 정리 */
.wrap{
  margin:0 auto;
  max-width:760px;             /* 800 - 좌우 20px 패딩 기준 */
  padding:20px;                /* 내부 여백 부여 */
  gap:calc(var(--space)*3);
}

/* 행 너비 여유(모바일값 유지해도 되지만 800px에 맞춰 살짝 키움) */
.row{
  grid-template-columns:minmax(0,1fr) 112px;
}

/* 버튼/폼 요소 살짝 상향 */
.submit{
  box-shadow:0 4px 16px rgba(244,185,66,.25);
}
.submit:hover{ transform:translateY(-1px); }
.submit:active{ transform:translateY(0); }

/* 모바일(<=480px)에서는 기존처럼 꽉 채우기 */
@media (max-width: 480px){
  body{ align-items:center; padding:0; }
  .phone{
    width:100vw; height:100vh;
    border-radius:0; border:none; box-shadow:none;
  }
  .wrap{ max-width:100%; padding:16px; }
  .row{ grid-template-columns:minmax(0,1fr) 88px; }
}