/* ==========================================================================
   bf.member — 회원 스킨 (로그인 · 회원가입 · 비밀번호 찾기 · 본인 확인)

   이 스킨만의 스타일이다. 스킨을 빼면 스타일도 같이 빠지도록 전역 CSS 에서
   떼어 왔다. 각 *.skin.php 가 add_stylesheet() 로 직접 싣는다.
   order 8 — 푸터(7) 뒤, 테마 마감(9) 앞. 게시판 스킨과 같은 자리다.

   ※ 공용 폼은 여기 없다
     .form-box · .form-row · .form-field · .form-tit · .step-nav 등은 1:1 문의 ·
     콘텐츠샵 주문서도 함께 쓰므로 전역 sub.css 16절에 남겼다. 이 파일은 그
     위에 회원 화면만의 것을 얹는다.

   ※ 목업에만 있는 것
     .chk-group · .terms-item-simple 은 목업 join.html 에만 있고 지금 마크업은
     쓰지 않는다. 회원 화면의 것이라 버리지 않고 함께 옮겼다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   가입 폼 보조 · 약관 — sub.css 16절(공용 폼)에서 회원 것만
   -------------------------------------------------------------------------- */
.form-tit-mt { margin-top: 34px; }
.form-help { font-size: 12.5px; line-height: 1.6; color: var(--ink-400); }
.form-help a { color: var(--sky-t2); text-decoration: underline; }
.field-with-btn { display: flex; gap: 6px; }
.field-with-btn input { flex: 1 1 auto; min-width: 0; }
.field-with-btn .bf-btn { flex: none; height: 48px; padding: 0 18px; white-space: nowrap; }
.chk-group { display: flex; flex-wrap: wrap; gap: 8px 18px; padding-top: 12px; }
/* 약관 */
.chk-all {
  display: flex; align-items: center;
  padding: 16px 18px; margin: 18px 0 14px;
  background: var(--sky-50);
  border: 1px solid var(--sky-b1);
  border-radius: var(--r-md);
  font-size: 15.5px; font-weight: 700; color: var(--ink-900);
}
.terms-item { margin-bottom: 14px; }
.terms-item .chk { margin-bottom: 8px; font-size: 14.5px; font-weight: 600; color: var(--ink-700); }
.terms-item-simple { padding-left: 2px; }
.terms-box {
  max-height: 170px; overflow-y: auto;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: #FBFDFF;
}
/* 흰색에 가까운 상자는 다크에서 바닥보다 '밝게' 떠야 같은 역할을 한다.
   그대로 두면 밝은 글자가 흰 상자에 묻힌다(목업 theme.css 3절) */
:root[data-theme="dark"] .terms-box { background: #1B2733; }
.terms-box pre {
  margin: 0;
  font-family: inherit;
  font-size: 13px; line-height: 1.75; color: var(--ink-500);
  white-space: pre-wrap; word-break: keep-all;
}

/* --------------------------------------------------------------------------
   로그인 · 회원가입 — sub.css 17절 전부
   -------------------------------------------------------------------------- */
.auth-wrap {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
  gap: 24px; max-width: 900px; margin: 0 auto;
  align-items: stretch;
}
.auth-box {
  padding: 34px 36px 32px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-sm);
}
.auth-tit { font-size: 24px; font-weight: 700; color: var(--ink-900); }
.auth-desc { margin-top: 8px; font-size: 14.5px; color: var(--ink-500); }
.auth-field { display: grid; gap: 8px; margin-top: 22px; }
.auth-field input {
  width: 100%; height: 50px; padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--sky-50);
  font-size: 15px;
  transition: all .2s;
}
.auth-field input::placeholder { color: var(--ink-400); }
.auth-field input:focus {
  background: var(--surface); border-color: var(--sky-b3);
  box-shadow: 0 0 0 3px rgba(62,159,222,.13);
}
.auth-opt {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 12px; font-size: 13px;
}
.auth-find a { color: var(--ink-500); }
.auth-find a:hover { color: var(--sky-t2); text-decoration: underline; }
.auth-submit {
  width: 100%; height: 52px; margin-top: 16px;
  font-size: 16px; font-weight: 700;
}
.auth-sns { margin-top: 26px; }
.auth-or {
  position: relative; text-align: center;
  margin-bottom: 14px;
}
.auth-or::before {
  content: ''; position: absolute; left: 0; right: 0; top: 50%;
  height: 1px; background: var(--line);
}
.auth-or span {
  position: relative; padding: 0 12px;
  background: var(--surface);
  font-size: 12.5px; color: var(--ink-400);
}
.auth-sns ul { display: grid; gap: 7px; }
.auth-sns .sns {
  flex-direction: row; justify-content: flex-start; gap: 10px;
  height: 48px; padding: 0 16px;
}
.auth-sns .sns span { font-size: 14px; color: var(--ink-700); }
.auth-join {
  margin-top: 22px; padding-top: 18px;
  border-top: 1px solid var(--line-soft);
  text-align: center;
  font-size: 14px; color: var(--ink-500);
}
.auth-join a { font-weight: 700; color: var(--sky-t2); text-decoration: underline; }
.auth-side {
  display: flex; flex-direction: column;
  padding: 34px 30px;
  border-radius: var(--r-lg);
  background: linear-gradient(140deg, var(--sky-600) 0%, var(--sky-700) 100%);
  color: #fff;
  box-shadow: var(--sh-md);
}
.auth-side-label { font-size: 11px; font-weight: 700; letter-spacing: 1.8px; color: rgba(255,255,255,.75); }
.auth-side strong {
  margin-top: 12px;
  font-size: 24px; font-weight: 700; line-height: 1.38; letter-spacing: -.7px;
}
.auth-side ul { margin-top: 22px; }
.auth-side li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 0;
  font-size: 14.5px; color: rgba(255,255,255,.92);
}
.auth-side .ico { flex: none; width: 18px; height: 18px; color: rgba(255,255,255,.7); }
.auth-side .bf-btn { margin-top: auto; height: 48px; }

/* --------------------------------------------------------------------------
   반응형 — sub.css 24절에서 회원 것만
   -------------------------------------------------------------------------- */
@media (max-width: 1080px) {
  .auth-wrap { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .auth-side { order: -1; padding: 24px 26px; }
  .auth-side .bf-btn { margin-top: 20px; }
}
@media (max-width: 900px) {
  .field-with-btn { flex-wrap: wrap; }
  .field-with-btn input { flex: 1 1 100%; }
  .field-with-btn .bf-btn { flex: 1 1 0; }
  .chk-all { padding: 13px 15px; font-size: 14.5px; }
  .terms-box { max-height: 140px; padding: 12px 14px; }
  .terms-box pre { font-size: 12.5px; }
  /* ----- 로그인 · 가입 ----- */
  .auth-box { padding: 24px 20px 22px; }
  .auth-tit { font-size: 21px; }
  .auth-side strong { font-size: 20px; }
}

/* --------------------------------------------------------------------------
   그누보드 회원 화면 보정 — theme.css 에서
   (한 칸 화면 · 폼 보조 문구 · 가입 완료 · 비밀번호 확인)
   -------------------------------------------------------------------------- */
.sub-body > .result-box { max-width: 1000px; margin-left: auto; margin-right: auto; }
/* 로그인·비밀번호 찾기처럼 한 칸짜리 화면 */
.auth-wrap-solo { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin: 0 auto; }
/* 회원 폼 보조 문구 */
.form-msg { display: block; margin-top: 6px; font-size: 13px; color: var(--point); }
.form-msg.is-ok { color: var(--mint); }
.form-thumb img { max-height: 60px; margin: 6px 8px 0 0; border-radius: var(--r-xs); vertical-align: middle; }
.cert-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.chk-sub { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 6px 0 0 24px; }
/* 가입 완료 화면 */
.result-box { text-align: center; padding: 48px 24px; }
.result-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--sky-100); color: var(--sky-t2);
}
.result-ico .ico { width: 30px; height: 30px; }
.result-tit { margin-top: 16px; font-size: 22px; font-weight: 800; color: var(--ink-900); }
.result-tit b { color: var(--sky-t2); }
.result-desc { margin-top: 10px; font-size: 15px; line-height: 1.7; color: var(--ink-600); }
.result-info {
  display: inline-block; margin: 20px auto 0; padding: 16px 22px;
  background: var(--sky-50); border-radius: var(--r-md); text-align: left;
}
.result-info div { display: flex; gap: 12px; }
.result-info div + div { margin-top: 6px; }
.result-info dt { min-width: 64px; font-size: 13.5px; color: var(--ink-500); }
.result-info dd { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--ink-800); }
/* 비밀번호 확인 화면의 '회원아이디' 줄 */
.auth-who {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px; padding: 12px 16px;
  background: var(--sky-50); border-radius: var(--r-sm);
  font-size: 14px;
}
.auth-who span { color: var(--ink-500); }
.auth-who b { color: var(--ink-900); font-weight: 700; }
.auth-sub { margin-bottom: 4px; font-size: 15px; font-weight: 700; color: var(--ink-800); }
.auth-captcha { margin-bottom: 12px; }
.auth-field + .auth-captcha { margin-top: 12px; }   /* 비밀번호 찾기 — 이메일 칸에 캡차가 딱 붙어 있었다 */
.auth-guest { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); }
.auth-guest .terms-box { margin: 10px 0; max-height: 120px; }