/* 로그인·회원가입 화면 — 레거시 join.php 인라인 CSS 에서 분리 */
/* 카드 사이 10px 간격 (Bootstrap 가터 오버라이드용) */
.join-row-gap{
  --bs-gutter-x: 10px;
  --bs-gutter-y: 10px;
}

.join-wrap { max-width: 980px; margin: 0 auto; }

.join-card {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
.join-card__body { padding: 26px; }
@media (min-width: 992px) { .join-card__body { padding: 34px; } }

.join-title { font-size: 18px; font-weight: 700; margin: 0; }

.join-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}

.join-link { color: #0d6efd; text-decoration: none; }
.join-link:hover { text-decoration: underline; }

.join-box {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 12px;
  background: #f8f9fa;
  padding: 14px;
  margin-bottom: 16px;
}

.join-details summary {
  cursor: pointer;
  color: #6c757d;
  user-select: none;
}
.join-details .join-details__content {
  margin-top: 8px;
  color: #6c757d;
  line-height: 1.5;
}

.join-form-label { font-weight: 600; margin-bottom: 6px; }
.join-help { margin-top: 6px; color: #6c757d; }

.join-msg { margin-top: 8px; font-size: 12px; }
.join-msg.ok { color: #198754; }
.join-msg.bad { color: #dc3545; }

.join-input {
  width: 100%;
  border: 1px solid rgba(0,0,0,.12);
  border-radius: 10px;
  padding: 10px 12px;
  outline: none;
  background: #fff;
}
.join-input:focus {
  border-color: rgba(13,110,253,.55);
  box-shadow: 0 0 0 3px rgba(13,110,253,.16);
}

.join-row { display: flex; gap: 10px; align-items: stretch; }

.join-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  padding: 10px 14px;
  border: 1px solid rgba(0,0,0,.12);
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
}
.join-btn:not(.join-btn-primary):hover { background: #f8fafc; }

.join-btn-primary{
  border: none;
  background: #0d6efd;
  color: #fff;
  width: 100%;
  padding: 12px 14px;
  font-weight: 700;
}
.join-btn-primary:hover{ background: #0b5ed7; color:#fff; }
.join-btn-primary:active{ background:#0a58ca; }
.join-btn-primary:disabled{
  opacity: .55;
  cursor: not-allowed;
}
.join-btn-primary:disabled:hover{
  background:#0d6efd;
  color:#fff;
}

.join-meter {
  height: 8px;
  border-radius: 999px;
  background: rgba(0,0,0,.08);
  overflow: hidden;
  margin-top: 10px;
}
.join-meter__bar {
  height: 100%;
  width: 0%;
  border-radius: 999px;
  background: rgba(13,110,253,.65);
  transition: width .15s ease-in-out;
}

.join-sns {
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
  margin-top: 0;
}
.join-sns__body { padding: 26px; }
@media (min-width: 992px) { .join-sns__body { padding: 34px; } }

.join-sns-title { font-size: 16px; font-weight: 700; margin: 0 0 10px; }
.join-sns-sub { color:#6c757d; margin: 0 0 14px; }

.join-sns-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border-radius: 10px;
  padding: 12px 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(0,0,0,.10);
}
.join-sns-btn--naver { background: #03C75A; color: #fff; border: none; }
.join-sns-btn--kakao { background: #FEE500; color: #1b1b1b; border: none; }

.join-sns-stack { display: grid; gap: 10px; }

.join-divider {
  height: 1px;
  background: rgba(0,0,0,.08);
  margin: 18px 0;
}

.join-alert {
  border-radius: 12px;
  padding: 14px;
  border: 1px solid rgba(0,0,0,.10);
  background: #fff;
}
.join-alert--danger { border-color: rgba(220,53,69,.25); background: rgba(220,53,69,.06); }
.join-alert--success { border-color: rgba(25,135,84,.25); background: rgba(25,135,84,.06); }
.join-alert b { font-weight: 700; }

/* ── 로그인 화면 전용 (레거시 login.php 인라인 CSS) ── */
/* ✅ login 전용(조인 톤 유지) */
.login-wrap{ max-width: 980px; margin:0 auto; }

/* Bootstrap g-2를 10px 느낌으로 보정 */
.login-wrap .row.g-2{
  --bs-gutter-x: 10px;
  --bs-gutter-y: 10px;
}

/* join.php에서 쓰던 스타일이 join.php 내부 style에만 있으면
   login에서도 동일하게 필요하니 여기서 최소셋을 포함 */
.join-card{
  border: 1px solid rgba(0,0,0,.08);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 8px 22px rgba(0,0,0,.06);
}
.join-card__body{ padding: 26px; }
@media (min-width: 992px){ .join-card__body{ padding: 34px; } }

.join-top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}
.join-title{ font-size:18px; font-weight:700; margin:0; }
.join-link{ color:#0d6efd; text-decoration:none; }
.join-link:hover{ text-decoration:underline; }

.join-form-label{ font-weight:600; margin-bottom:6px; }

.join-input{
  width:100%;
  border:1px solid rgba(0,0,0,.12);
  border-radius:10px;
  padding:10px 12px;
  outline:none;
  background:#fff;
}
.join-input:focus{
  border-color: rgba(13,110,253,.55);
  box-shadow: 0 0 0 3px rgba(13,110,253,.16);
}

.join-row{ display:flex; gap:10px; align-items:stretch; }

.join-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:10px;
  padding:10px 14px;
  border:1px solid rgba(0,0,0,.12);
  background:#fff;
  cursor:pointer;
  white-space:nowrap;
}
.join-btn:not(.join-btn-primary):hover{ background:#f8fafc; }

.join-btn-primary{
  border:none;
  background:#0d6efd;
  color:#fff;
  width:100%;
  padding:12px 14px;
  font-weight:700;
}
.join-btn-primary:hover{ background:#0b5ed7; color:#fff; }
.join-btn-primary:active{ background:#0a58ca; }

.join-alert{
  border-radius:12px;
  padding:14px;
  border:1px solid rgba(0,0,0,.10);
  background:#fff;
}
.join-alert--danger{ border-color: rgba(220,53,69,.25); background: rgba(220,53,69,.06); }
.join-alert--success{ border-color: rgba(25,135,84,.25); background: rgba(25,135,84,.06); }
.join-alert b{ font-weight:700; }

.join-sns{
  border:1px solid rgba(0,0,0,.08);
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 22px rgba(0,0,0,.06);
}
.join-sns__body{ padding:26px; }
@media (min-width: 992px){ .join-sns__body{ padding:34px; } }

.join-sns-title{ font-size:16px; font-weight:700; margin:0 0 10px; }
.join-sns-sub{ color:#6c757d; margin:0 0 14px; }

.join-sns-stack{ display:grid; gap:10px; }

.join-sns-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  width:100%;
  border-radius:10px;
  padding:12px 14px;
  font-weight:700;
  text-decoration:none;
  border:1px solid rgba(0,0,0,.10);
}
.join-sns-btn--naver{ background:#03C75A; color:#fff; border:none; }
.join-sns-btn--kakao{ background:#FEE500; color:#1b1b1b; border:none; }

.join-divider{
  height:1px;
  background: rgba(0,0,0,.08);
  margin:18px 0;
}

/* ── 비밀번호 강도 막대 색 (join.php 스크립트가 .ok / .weak 를 붙인다) ── */
.join-meter__bar.weak { background:#dc3545; }
.join-meter__bar.ok   { background:#198754; }

/* details 안쪽 약관 본문 — 길어지면 스크롤 */
.join-details .join-box { max-height: 220px; overflow-y: auto; }