:root{
  --primary:#0b57d0; --primary-700:#0a46a8;
  --bg:#0b1220;
  --card:#ffffff;
  --muted:#6b7280;
  --danger:#dc3545;
  --radius:14px;
  --shadow:0 12px 30px rgba(0,0,0,.14);
  --header-h: var(--hy-header-h, 72px);
}
body { margin: 0 !important; }

.auth2-viewport{
  margin:0; padding:0;
  min-height: calc(100vh - var(--header-h));
  display:block;
}

.auth2-grid{
  height: calc(110vh - var(--header-h));
  display:grid;
  grid-template-columns: 1.1fr 1fr;
  gap:0;
}

/* 좌측 사이드(그라디언트 + 패턴) */
.auth2-side{
  background:
    radial-gradient(1200px 400px at -10% -20%, rgba(59,130,246,.25), transparent 60%),
    radial-gradient(800px 600px at 110% 120%, rgba(14,165,233,.25), transparent 60%),
    linear-gradient(135deg, #0a1428 0%, #0b2447 60%, #091a31 100%);
  display:flex; align-items:center; justify-content:center;
}
.auth2-side-inner{
  color:#e5ecff; text-align:left; max-width: 520px; padding: 40px;
}
.brand{ font: 800 38px/1.2 'Pretendard',system-ui; margin:0 0 12px; letter-spacing:.2px; }
.tagline{ font-size:16px; color:#c6d2ff; opacity:.95; margin:0; }

/* 우측 카드 */
.auth2-formwrap{
  background:#ffffff;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding: 40px 30px;
}
.auth2-hd{ width:min(420px, 86%); margin: 0 0 14px; }
.title{ margin:0; font: 800 28px/1.2 'Pretendard',system-ui; color:#0f172a; }
.sub{ margin:4px 0 0; color:var(--muted); }

form{ width:min(420px, 86%); margin:0; }
.field{ margin:0 0 14px; }
label{ display:block; font-weight:700; margin:0 0 8px; color:#111827; }

.control{ position:relative; }
.input{
  width:92%; border:1px solid #e5e7eb; border-radius:12px;
  padding:12px 14px; font-size:16px; background:#fff; color:#111827;
  transition: border-color .15s, box-shadow .15s;
  outline:none;
}
.input:focus{ border-color:#9bbcff; box-shadow:0 0 0 3px rgba(11,87,208,.12); }

/* 비번 토글 */
.has-toggle .toggle{
  position:absolute; right:10px; top:50%; transform:translateY(-50%);
  width:38px; height:38px; border:none; background:transparent; cursor:pointer;
}
.has-toggle .toggle::before{
  content:'👁️'; font-size:18px; opacity:.6;
}
.has-toggle .toggle.on::before{ content:'🙈'; }

.btn-primary{
  width:100%; padding:13px 16px; border:none; border-radius:12px; cursor:pointer;
  background:var(--primary); color:#fff; font-weight:800; font-size:16px;
  box-shadow: 0 8px 20px rgba(11,87,208,.25); transition: transform .05s, background .15s;
}
.btn-primary:hover{ background:var(--primary-700); }
.btn-primary:active{ transform: translateY(1px); }

.auth2-alert{
  width:min(420px, 86%); margin:0 0 12px; padding:12px 14px; border-radius:12px; font-size:14px;
}
.auth2-alert.danger{ background:rgba(220,53,69,.085); color:#b4232a; border-left:4px solid #dc3545; }
.auth2-alert.info{ background:rgba(2,132,199,.1); color:#075985; border-left:4px solid #0284c7; }

.auth2-ft{
  width:min(420px, 86%); margin-top:14px; font-size:14px; color:#475569;
  display:flex; gap:8px; align-items:center;
}
.link{ color:var(--primary); font-weight:800; text-decoration:none; }
.link:hover{ text-decoration:underline; }

/* 모바일 최적화 */
@media (max-width: 1200px){
  /* 글씨는 살짝만 키움 */
  body { font-size: 17px; }
  .title { font-size: 24px; }
  label { font-size: 15px; }

  /* 입력창 & 버튼 크기 조정 (width 100% 유지) */
  .input, 
  .btn-primary, 
  .btn-secondary {
    font-size: 16px;
    padding: 12px 14px;
    width: 100%;
    box-sizing: border-box;
  }

  /* 폼 폭 */
  form,
  .auth2-hd,
  .auth2-alert,
  .auth2-ft {
    width: 100%;
    max-width: 420px;
  }

  /* 내부 여백 */
  .auth2-formwrap {
    padding: 24px 16px;
  }

  /* 텍스트 줄바꿈 방지 / 강제 */
  .btn-primary, .btn-secondary {
    white-space: normal;
    word-break: keep-all;
  }
}

/* 2열 그리드 강제 1열로 변경 */
@media (max-width: 1200px){
  .auth2-grid {
    grid-template-columns: 1fr !important; /* 좌측 패널 제거 */
  }
  .auth2-side {
    display: none !important;
  }
  .grid-2 {
    grid-template-columns: 1fr !important; /* 내부 2열도 1열로 */
  }

  /* 글씨 크게 */
  body { font-size: 18px; }
  .title { font-size: 26px; line-height: 1.3; }
  label { font-size: 18px; }
  .help { font-size: 14px; }

  /* 입력창, 버튼 크게 */
  .input, 
  .btn-primary, 
  .btn-secondary {
    font-size: 18px;
    padding: 14px 16px;
    width: 100%;
    box-sizing: border-box;
  }

  /* 폼 전체 폭 넓게 */
  form,
  .auth2-hd,
  .auth2-alert,
  .auth2-ft {
    width: 100% !important;
    max-width: none !important;
  }

  /* 내부 여백 넉넉하게 */
  .auth2-formwrap {
    padding: 30px 20px;
  }
}

/* 도움말 텍스트 */
.help{ font-size:12px; margin-top:6px; }
.help.muted{ color:#64748b; }

/* 보조 버튼 */
.btn-secondary{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; border-radius:12px;
  border:1px solid #e5e7eb; background:#f8fafc; color:#0f172a;
  font-weight:700; cursor:pointer; transition:background .15s, border-color .15s;
}
.btn-secondary:hover{ background:#eef2f7; border-color:#d9dee5; }

.actions{ margin-top:8px; }

/* 약관 박스 */
.terms-box{
  margin:10px 0 14px; padding:12px;
  border:1px solid #e5e7eb; border-radius:12px; background:#fafafa;
}
.check-row{
  display:flex; align-items:center; gap:8px; margin:6px 0;
}
.terms-box .link{ color:var(--primary); text-decoration:none; font-weight:700; }
.terms-box .link:hover{ text-decoration:underline; }

/* 입력 검증 상태 표시 */
.input.is-invalid{ border-color:#dc3545; box-shadow:0 0 0 3px rgba(220,53,69,.12); }
.input.is-valid{ border-color:#16a34a; box-shadow:0 0 0 3px rgba(22,163,74,.12); }

/* select 스타일 */
select.input{
  -webkit-appearance:none; appearance:none;
  background-image: linear-gradient(45deg, transparent 50%, #94a3b8 50%),
                    linear-gradient(135deg, #94a3b8 50%, transparent 50%);
  background-position: calc(100% - 18px) calc(50% - 3px), calc(100% - 12px) calc(50% - 3px);
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  padding-right: 40px;
}