@charset "UTF-8";
/*
 * 회원 화면(가입·로그인·마이페이지·약관) 전용.
 * 색·글꼴은 css/default.css 의 :root 토큰을 그대로 쓴다 — 회원 화면만
 * 다른 파랑을 쓰면 사이트가 두 벌로 보인다.
 */

/* 헤더가 position:fixed 라 그 높이(PC 100px · 모바일 80px)만큼 위를 비운다.
   서브페이지들은 layout/subtop.php 가 그 자리를 채우는데, 회원 화면은
   subtop 을 쓰지 않아 여기서 직접 확보한다. 없으면 첫 줄이 헤더에 가린다. */
.member { padding: calc(100px + 60px) 20px 120px; background: var(--brand-bg); }
.member-card {
  max-width: 720px; margin: 0 auto; padding: 48px 40px;
  background: var(--white); border: 1px solid var(--brand-200);
}

.member-topline { text-align: right; font-size: 14px; color: var(--gray-mid-2); margin-bottom: 28px; }
.member-topline a { color: var(--brand-deep); font-weight: 700; text-decoration: none; }
.member-topline a:hover { text-decoration: underline; }

.member-title { text-align: center; font-size: 34px; font-weight: 800; color: var(--brand-navy); }
.member-lead  { text-align: center; font-size: 15px; color: var(--gray-mid-3); margin: 12px 0 32px; }

/* ── 회원 유형 탭 ── */
.member-tabs { display: flex; gap: 12px; justify-content: center; margin-bottom: 36px; }
.member-tab {
  flex: 1; max-width: 240px; padding: 14px 10px;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: inherit; font-size: 16px; font-weight: 700;
  border: 1px solid var(--brand-deep); background: var(--white); color: var(--brand-deep);
  cursor: pointer; transition: .2s;
}
.member-tab img { width: 18px; height: 18px; }
.member-tab.is-active { background: var(--brand-deep-2); border-color: var(--brand-deep-2); color: var(--white); }
.member-tab.is-active img { filter: brightness(0) invert(1); }
.member-tab.is-disabled { border-color: var(--gray-mid); color: var(--gray-mid); cursor: not-allowed; }
.member-tab-note { font-size: 12px; font-weight: 400; }

/* ── 스텝퍼 ── */
.member-steps { display: flex; justify-content: space-between; margin: 0 0 36px; padding: 0; position: relative; list-style: none; }
.member-steps::before {
  content: ''; position: absolute; top: 18px; left: 12%; right: 12%; height: 1px; background: var(--brand-200);
}
.member-step { position: relative; z-index: 1; flex: 1; text-align: center; font-size: 13px; color: var(--gray-mid-4); }
.member-step-no {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin: 0 auto 8px; border-radius: 50%;
  background: var(--white); border: 1px solid var(--brand-200); font-weight: 700;
}
.member-step-label { display: block; }
.member-step.is-current { color: var(--brand-deep-2); font-weight: 700; }
.member-step.is-current .member-step-no { border-color: var(--brand-deep-2); background: var(--brand-deep-2); color: var(--white); }
.member-step.is-done .member-step-no { border-color: var(--brand-deep-2); color: var(--brand-deep-2); font-size: 0; }
.member-step.is-done .member-step-no::after { content: '✓'; font-size: 16px; }

/* ── 패널 ──
 * 기본은 **전부 펼친다.** JS 가 없으면 단계 전환을 할 수 없으므로, 그때는
 * 한 화면에 늘어놓고 그냥 제출하게 둔다 — 서버(join_execute.php)가 어차피
 * 전부 재검증한다. 예전에는 여기서 display:none 이라 JS 를 끈 사람은
 * 1단계에서 막혀 가입 자체가 불가능했다.
 *
 * JS 가 붙으면 member-join.js 가 폼에 .js-steps 를 달고, 그때부터 현재
 * 단계만 보인다. */
.member-panel { display: block; }
.js-steps .member-panel { display: none; }
.js-steps .member-panel.is-current { display: block; }

/* 단계 이동 버튼과 3단계의 읽기전용 복사본은 JS 가 있을 때만 뜻이 있다. */
.js-only { display: none; }
.js-steps .js-only { display: block; }

/* ── 입력 ── */
.member-field { margin-bottom: 20px; }
.member-field label { display: block; font-size: 14px; font-weight: 700; margin-bottom: 6px; color: var(--gray-mid-1); }
.member-required { color: #d33; }
.member-field input {
  width: 100%; padding: 13px 14px; font-family: inherit; font-size: 15px; box-sizing: border-box;
  border: 1px solid var(--brand-200); background: var(--white); color: var(--black);
}
.member-field input::placeholder { color: var(--gray-mid); }
.member-field input:focus { outline: none; border-color: var(--brand-deep); }
.member-field input[readonly] { background: #f1f4f6; color: var(--gray-mid-3); }

/* 검증 표시 — 통과하면 초록, 걸리면 빨강 */
.member-field.is-ok  input { border-color: #1f9d55; }
.member-field.is-bad input { border-color: #d33; }
.member-hint { min-height: 18px; margin: 6px 0 0; font-size: 13px; color: var(--gray-mid-4); }
.member-field.is-ok  .member-hint { color: #1f9d55; }
.member-field.is-bad .member-hint { color: #d33; }

.member-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* ── 약관 ── */
.member-agree-all {
  display: block; padding: 16px 0; font-size: 17px; font-weight: 700; color: var(--brand-navy);
  border-bottom: 1px solid var(--brand-200); margin-bottom: 16px; cursor: pointer;
}
.member-agree-list { list-style: none; padding: 0; margin: 0 0 28px; }
.member-agree-list li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 9px 0; font-size: 15px;
}
.member-agree-list label { cursor: pointer; }
.member-agree-list b { color: var(--brand-deep); }
.member-agree-list a { font-size: 13px; color: var(--brand-deep); text-decoration: underline; white-space: nowrap; }
.member-agree-optional-title { font-size: 13px; color: var(--gray-mid-3); margin: 0 0 10px; }
.member-agree-optional { display: flex; gap: 12px; flex-wrap: wrap; }
.member-agree-optional label {
  padding: 11px 15px; border: 1px solid var(--brand-200); font-size: 14px; cursor: pointer;
}
.member-agree-list input[type=checkbox],
.member-agree-optional input[type=checkbox],
.member-agree-all input[type=checkbox] { margin-right: 7px; accent-color: var(--brand-deep-2); }

/* ── 본인확인 박스 ── */
.member-verify { border: 1px solid var(--brand-200); padding: 32px 28px; text-align: center; }
.member-verify-title { font-size: 17px; font-weight: 700; margin: 0 0 10px; color: var(--brand-navy); }
.member-verify-desc { font-size: 14px; color: var(--brand-deep); line-height: 1.7; margin: 0 0 26px; }
.member-verify .member-field { text-align: left; }
.member-verify .member-btn { width: 100%; margin-top: 8px; }

/* ── 버튼 ── */
.member-actions { display: flex; gap: 10px; margin-top: 30px; }
.member-btn {
  flex: 1; padding: 15px; font-family: inherit; font-size: 16px; font-weight: 700;
  cursor: pointer; transition: .2s;
  border: 1px solid var(--brand-200); background: var(--white); color: var(--gray-mid-2);
  text-align: center; text-decoration: none; line-height: 1.4;
}
.member-btn:hover { border-color: var(--brand-deep); color: var(--brand-deep); }
.member-btn-primary { background: var(--brand-deep-2); border-color: var(--brand-deep-2); color: var(--white); }
.member-btn-primary:hover { background: var(--brand-navy); border-color: var(--brand-navy); color: var(--white); }
.member-btn:disabled { background: #e9edf1; border-color: #e9edf1; color: var(--gray-mid); cursor: not-allowed; }
.member-btn:disabled:hover { background: #e9edf1; border-color: #e9edf1; color: var(--gray-mid); }

.member-subtitle { font-size: 18px; font-weight: 800; margin: 0 0 20px; color: var(--brand-navy); }

/* ── 서버가 되돌려준 오류 ── */
.member-errors { list-style: none; padding: 14px 16px; margin: 0 0 24px; background: #fdecec; color: #c00; font-size: 14px; }
.member-errors li + li { margin-top: 6px; }
.member-notice { padding: 14px 16px; margin: 0 0 24px; background: #eaf6ec; color: #1f7a3d; font-size: 14px; }

/* ── 법적 고지 ── */
.member-legal { margin-top: 44px; padding: 22px; background: var(--brand-300); font-size: 13px; color: var(--brand-navy); line-height: 1.75; }
.member-legal-title { font-weight: 700; margin: 0 0 8px; }
.member-legal p:last-child { margin: 0; }

/* ── 약관·개인정보 처리방침 전문 ── */
.member-doc { max-width: 900px; }
.member-doc section { margin-bottom: 30px; }
.member-doc h3 { font-size: 17px; font-weight: 700; margin: 0 0 10px; color: var(--brand-navy); }
.member-doc p, .member-doc li { font-size: 15px; line-height: 1.85; color: var(--gray-mid-2); }
.member-doc ol, .member-doc ul { padding-left: 20px; margin: 0; }
.member-doc .member-doc-intro { margin-bottom: 32px; }

/* ── 내 정보 ── */
.member-info { margin-bottom: 28px; }
.member-info dl { display: grid; grid-template-columns: 140px 1fr; margin: 0; border-top: 1px solid var(--brand-200); }
.member-info dt, .member-info dd {
  padding: 15px 16px; margin: 0; font-size: 15px; border-bottom: 1px solid var(--brand-200);
}
.member-info dt { font-weight: 700; background: var(--brand-bg); color: var(--gray-mid-1); }
.member-info dd { color: var(--gray-mid-2); }
.member-withdraw-link { margin-top: 32px; text-align: right; font-size: 13px; }
.member-withdraw-link a { color: var(--gray-mid-4); text-decoration: underline; }

@media (max-width: 767px) {
  .member { padding: calc(80px + 30px) 16px 70px; }
  .member-card { padding: 28px 20px; }
  .member-title { font-size: 26px; }
  .member-grid { grid-template-columns: 1fr; }
  .member-tabs { gap: 8px; }
  .member-tab { font-size: 14px; padding: 12px 6px; }
  .member-step-label { font-size: 11px; }
  .member-agree-list li { flex-direction: column; align-items: flex-start; gap: 4px; }
  .member-info dl { grid-template-columns: 100px 1fr; }
}

/* 되돌릴 수 없는 동작(탈퇴) 버튼. 색으로 구분한다. */
.member-btn-danger { background: #d33; border-color: #d33; color: var(--white); }
.member-btn-danger:hover { background: #b32020; border-color: #b32020; color: var(--white); }

/* 약관 조항 번호. reset.css 가 list-style 을 없애서 그대로 두면 "1. 2. 3."
   이 사라진다 — 법적 문서라 조항 번호가 보여야 인용·참조가 된다. */
.member-doc ol { list-style: decimal; }
.member-doc ul { list-style: disc; }
.member-doc li { margin-bottom: 4px; }