@charset "utf-8";

/* ============================================================
   NobleWeb · 회원 로그인 / 회원가입 약관 / 회원가입 폼 전용 스타일
   - login.skin.php / register.skin.php / register_form.skin.php 전용
   - style.css / dark.css / nobleweb.css 와 클래스명이 겹치지 않도록
     모든 선택자를 .nw-auth- 네임스페이스로 작성 (캐스케이딩 충돌 방지)
   ============================================================ */

.nw-auth-wrap {
  min-height: calc(100vh - 64px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  margin-top: 64px;
  background: #0B0F19;
}

.nw-auth-card {
  width: 100%;
  max-width: 440px;
  background: linear-gradient(180deg, rgba(20,26,43,.9) 0%, rgba(11,15,25,.9) 100%);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 36px 32px;
  color: #E5E7EB;
}
.nw-auth-card.nw-auth-card-wide {
  max-width: 640px;
}

.nw-auth-title {
  margin: 0 0 20px;
  font-size: 20px;
  font-weight: 800;
  color: #fff;
  text-align: center;
}

/* ── 탭 (회원 로그인 / 회원가입) ── */
.nw-auth-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 24px;
}
.nw-auth-tab {
  flex: 1;
  text-align: center;
  padding: 12px 0;
  border-radius: 12px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.08);
  color: #94A3B8;
  background: rgba(255,255,255,.02);
  transition: all .15s ease;
}
.nw-auth-tab.is-active {
  color: #fff;
  background: linear-gradient(95deg, rgba(168,85,247,.25), rgba(59,130,246,.18));
  border-color: rgba(168,85,247,.4);
}
.nw-auth-tab:not(.is-active):hover {
  color: #fff;
  border-color: rgba(168,85,247,.35);
}

/* ── 입력 필드 ── */
.nw-field {
  margin: 0 0 16px;
}
.nw-field:last-child {
  margin-bottom: 0;
}
.nw-label {
  display: block;
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.nw-req-star {
  color: #F87171;
}
.nw-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px 16px;
  background: rgba(7,9,18,.6);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 12px;
  color: #E5E7EB;
  font-size: 14px;
  font-family: inherit;
  transition: border-color .18s ease, box-shadow .18s ease, background .18s ease;
}
.nw-input:focus {
  outline: none;
  border-color: rgba(168,85,247,.6);
  box-shadow: 0 0 0 4px rgba(168,85,247,.12);
  background: rgba(7,9,18,.85);
}
.nw-input::placeholder {
  color: rgba(229,231,235,.35);
}
.nw-desc-txt {
  font-size: 12px;
  color: #94A3B8;
  line-height: 1.5;
  margin: 6px 0 0;
}
.nw-req-desc {
  font-size: 13px;
  color: #94A3B8;
  margin: 0 0 16px;
}

/* ── 버튼 ── */
.nw-btn {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding: 14px;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-size: 15px;
  font-weight: 700;
  font-family: inherit;
  text-align: center;
  text-decoration: none;
  transition: filter .15s ease, transform .15s ease;
}
.nw-btn-primary {
  color: #fff;
  background: linear-gradient(95deg, #6D28D9 0%, #3B82F6 100%);
}
.nw-btn-primary:hover {
  filter: brightness(1.1);
}
.nw-btn-ghost {
  color: #CBD5E1;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.1);
}
.nw-btn-ghost:hover {
  border-color: rgba(168,85,247,.5);
  color: #fff;
}
.nw-btn-row {
  display: flex;
  gap: 12px;
  margin-top: 32px;
}
.nw-btn-row .nw-btn {
  flex: 1;
}

/* ── 로그인 메타 (자동로그인 / ID,PW찾기) ── */
.nw-auth-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 14px;
  font-size: 13px;
}
.nw-auth-meta label {
  color: #94A3B8;
  cursor: pointer;
}
.nw-auth-meta a {
  color: #94A3B8;
  text-decoration: none;
}
.nw-auth-meta a:hover {
  color: #C4B5FD;
}

/* ── 약관동의 체크박스 ── */
.nw-checkbox-line {
  margin: 0 0 16px;
}
.nw-checkbox-line:last-child {
  margin-bottom: 0;
}
.nw-checkbox {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #E5E7EB;
  cursor: pointer;
}
.nw-checkbox input[type="checkbox"] {
  width: 18px;
  height: 18px;
  flex: none;
  accent-color: #A855F7;
  cursor: pointer;
}
.nw-checkbox-all {
  padding: 14px 16px;
  margin-bottom: 20px;
  background: rgba(168,85,247,.06);
  border: 1px solid rgba(168,85,247,.2);
  border-radius: 12px;
}
.nw-checkbox-all .nw-checkbox {
  font-weight: 700;
  color: #fff;
}

/* ── 약관 섹션 ── */
.nw-terms-section {
  margin: 0 0 20px;
}
.nw-terms-section-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0 0 10px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
}
.nw-terms-section-title a {
  font-size: 12px;
  font-weight: 400;
  color: #94A3B8;
  text-decoration: none;
}
.nw-terms-section-title a:hover {
  color: #C4B5FD;
}
.nw-terms-box {
  width: 100%;
  box-sizing: border-box;
  height: 140px;
  resize: vertical;
  padding: 14px 16px;
  margin: 0 0 12px;
  background: rgba(7,9,18,.6);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  color: #94A3B8;
  font-size: 12.5px;
  line-height: 1.6;
  font-family: inherit;
  white-space: pre-wrap;
}
.nw-terms-table {
  width: 100%;
  border-collapse: collapse;
  margin: 0 0 12px;
  font-size: 12.5px;
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 12px;
  overflow: hidden;
}
.nw-terms-table th, .nw-terms-table td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  text-align: left;
  color: #CBD5E1;
}
.nw-terms-table th {
  background: rgba(255,255,255,.04);
  color: #fff;
  font-weight: 700;
}
.nw-terms-table tr:last-child td {
  border-bottom: none;
}

/* ── 회원가입 폼 섹션 ── */
.nw-section {
  margin: 0 0 28px;
}
.nw-section:last-of-type {
  margin-bottom: 0;
}
.nw-section-title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

/* ── 자동등록방지(캡차) ── */
.nw-captcha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.nw-captcha legend {
  display: none;
}
.nw-captcha img#captcha_img {
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
  vertical-align: middle;
}
.nw-captcha input#captcha_key {
  width: 120px;
  flex: none;
}
.nw-captcha button {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(168,85,247,.35);
  color: #C4B5FD;
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}
.nw-captcha button:hover {
  border-color: rgba(168,85,247,.7);
  background: rgba(168,85,247,.08);
}
.nw-captcha #captcha_info {
  flex-basis: 100%;
  font-size: 12px;
  color: #94A3B8;
}

/* ── 비회원 주문조회 / 소셜로그인 영역 (있을 경우 최소 스타일) ── */
.nw-auth-extra {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.06);
}
.nw-auth-extra h2 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.nw-auth-extra p {
  margin: 10px 0 0;
  font-size: 12px;
  color: #94A3B8;
  line-height: 1.6;
}

/* ── 접근성 ── */
.nw-sound-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}