/* ══════════════════════════════════════════════════════════════
   member.css — 파크골프 회원(로그인·가입) 전용 스타일
   layout.css CSS 변수 활용 / 반응형 / 다크모드
   경로: /parkgolf/resource/css/member.css
   ══════════════════════════════════════════════════════════════ */

/* 제목 영역 컨테이너 */
.title-cts {
    position: relative;
    /* 화면 전체 너비를 활용하는 풀라인 배경 */
    width: 100%; 
    padding: 2rem; /* 상단 여백을 충분히 주어 겹침 방지 */
    margin-bottom: 3rem;
    text-align: center;
    background-color: var(--bg-muted); /* 연한 그레이 배경으로 입체감 부여 */
    border-bottom: 1px solid var(--border);
}

/* 제목 텍스트 스타일 */
.title-cts h2 {
    font-size: 2rem;
    font-weight: 800;
    color: var(--text);
    letter-spacing: -0.03em;
    margin: 0;
    position: relative;
    display: inline-block;
}

/* 제목 아래 포인트 바 (군위 파크골프 포인트 컬러) */
.title-cts h2::after {
    content: '';
    position: absolute;
    bottom: -12px;
    left: 50%;
    transform: translateX(-50%);
    width: 40px;
    height: 4px;
    background-color: var(--color-primary); /* 포인트 컬러: 초록색 */
    border-radius: 2px;
}

/* 다크모드 대응 */
[data-theme="dark"] .title-cts {
    background-color: rgba(255, 255, 255, 0.03);
    border-color: var(--border);
}

/* 모바일 대응 */
@media (max-width: 768px) {
    .title-cts {
        padding: 2.5rem 0 2rem;
        margin-bottom: 2rem;
    }
    .title-cts h2 {
        font-size: 1.5rem;
    }
}

/* ────────────────────────────────────────────────────
   공통 컨테이너
──────────────────────────────────────────────────── */
.member-box {
  max-width: 560px;
  margin: 2rem auto;
  padding: 2.5rem 2rem;
  background: var(--bg-white);
  border: 1px solid var(--border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
}
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }

/* ────────────────────────────────────────────────────
   소개 문구
──────────────────────────────────────────────────── */
.member-intro {
  text-align: center;
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.member-intro strong { display:block; font-size:1.05rem; color:var(--color-primary); margin-bottom:.5rem; }
.member-intro p { font-size:.9rem; color:var(--text-muted); line-height:1.7; margin:0; }

/* ────────────────────────────────────────────────────
   메시지 박스
──────────────────────────────────────────────────── */
.form-msg {
  padding:.75rem 1rem;
  border-radius:var(--radius);
  font-size:.9rem;
  margin-bottom:1rem;
}
.form-msg--error { background:#fff1f2; border-left:4px solid var(--color-danger); color:var(--color-danger); }
.form-msg--ok    { background:var(--color-primary-light); border-left:4px solid var(--color-primary); color:var(--color-primary); }
[data-theme="dark"] .form-msg--error { background:rgba(225,29,72,.12); }
[data-theme="dark"] .form-msg--ok    { background:rgba(27,94,32,.18); }

/* ────────────────────────────────────────────────────
   입력 공통
──────────────────────────────────────────────────── */
.input-wrap { position:relative; display:flex; align-items:center; }
.input-ico  { position:absolute; left:.85rem; display:flex; align-items:center; color:var(--text-muted); pointer-events:none; }
.input-ico i {font-style: normal !important; }

.ico-user::before    { content:'👤'; font-size:1rem; }
.ico-lock::before    { content:'🔒'; font-size:1rem; }
.ico-eye::before     { content:'👁'; font-size:.95rem; }
.ico-eye-off::before { content:'🙈'; font-size:.95rem; }

.login_form .inputLogin,
.login_form .form-control {
  width:100%;
  height:var(--input-height);
  padding-left: 2.8rem !important;
  border:1px solid var(--border);
  border-radius:var(--radius);
  background:var(--bg);
  color:var(--text);
  font-size:.95rem;
  font-family:var(--font);
  transition:border-color var(--transition),box-shadow var(--transition);
  box-sizing:border-box;
}

.form-control { padding-left:.85rem; }
.inputLogin:focus, .form-control:focus {
  outline:none;
  border-color:var(--color-primary);
  box-shadow:0 0 0 3px rgba(27,94,32,.15);
}
[data-theme="dark"] .inputLogin,
[data-theme="dark"] .form-control { background:var(--bg-muted); color:var(--text); border-color:var(--border); }

.form-select { padding-left:.75rem; cursor:pointer; }

.pwd-toggle { position:absolute; right:.75rem; background:none; border:none; cursor:pointer; padding:.25rem; color:var(--text-muted); line-height:1; }

/* ────────────────────────────────────────────────────
   체크박스·라디오
──────────────────────────────────────────────────── */
.chk-label, .radio-label { display:inline-flex; align-items:center; gap:.4rem; cursor:pointer; font-size:.9rem; color:var(--text); }
.chk-label input[type=checkbox], .radio-label input[type=radio] { accent-color:var(--color-primary); width:16px; height:16px; cursor:pointer; }
.radio-label input[type="radio"] + span {margin-left: 6px; cursor: pointer; }
.radio-group { display:flex; gap:1.5rem; flex-wrap:wrap; }

/* ────────────────────────────────────────────────────
   로그인 폼
──────────────────────────────────────────────────── */
.login-fields { list-style:none; padding:0; margin:0 0 .75rem; }
.login-fields li+li { margin-top:.75rem; }
.login-option { margin:.5rem 0 1.2rem; }

.loginBtn { margin-top:1.2rem; }
.loginBtn button, .btn-join-next {
  display: flex; 
  align-items: center;    
  justify-content: center;
  width:100%; height:48px;
  background:var(--color-primary); color:#fff;
  font-size:1rem; font-weight:700;
  border:none; border-radius:var(--radius);
  cursor:pointer; transition:background var(--transition);
  font-family:var(--font); letter-spacing:.03em;
}
.loginBtn button:hover, .btn-join-next:hover { background:var(--color-primary-hover); }
.loginBtn button:disabled, .btn-join-next:disabled { opacity:.6; cursor:not-allowed; }

/* ────────────────────────────────────────────────────
   아이디찾기/비번찾기/회원가입 링크 영역
──────────────────────────────────────────────────── */
.login_link, .join_link {
  text-align:center; margin-top:1.5rem; padding-top:1.25rem;
  border-top:1px solid var(--border);
  font-size:.88rem; color:var(--text-muted); line-height:1.7;
}
.btn_area { display:flex; gap:.5rem; justify-content:center; flex-wrap:wrap; margin-top:.75rem; }
.bt_st {
  display:inline-flex; align-items:center; justify-content:center;
  padding:.45rem 1.2rem; border-radius:var(--radius);
  font-size:.875rem; font-weight:600; text-decoration:none;
  cursor:pointer; transition:all var(--transition);
  border:1px solid transparent; font-family:var(--font);
  background:none;
}
.bt_black { background:var(--bg); border-color:var(--border-dark); color:var(--text); }
.bt_black:hover { background:var(--color-primary); border-color:var(--color-primary); color:#fff; }

/* ────────────────────────────────────────────────────
   슬라이드 모달 보완
──────────────────────────────────────────────────── */
.modal-desc { font-size:.9rem; color:var(--text-muted); margin-bottom:1.5rem; line-height:1.65; }

.btn-modal-cancel { padding:.55rem 1.4rem; border:1px solid var(--border-dark); border-radius:var(--radius); background:var(--bg); color:var(--text); font-weight:600; cursor:pointer; font-size:.9rem; font-family:var(--font); transition:all var(--transition); }
.btn-modal-cancel:hover { background:var(--bg-muted); }
.btn-modal-ok { padding:.55rem 1.4rem; border:none; border-radius:var(--radius); background:var(--color-primary); color:#fff; font-weight:700; cursor:pointer; font-size:.9rem; font-family:var(--font); transition:background var(--transition); }
.btn-modal-ok:hover { background:var(--color-primary-hover); }

.find-result { padding:1rem; border-radius:var(--radius); font-size:.9rem; margin-top:.5rem; line-height:1.6; }
.find-result--ok  { background:var(--color-primary-light); border:1px solid #a7f3d0; color:var(--color-primary); }
.find-result--err { background:#fff1f2; border:1px solid #fecdd3; color:var(--color-danger); }
[data-theme="dark"] .find-result--ok  { background:rgba(27,94,32,.18); border-color:rgba(27,94,32,.35); }
[data-theme="dark"] .find-result--err { background:rgba(225,29,72,.12); border-color:rgba(225,29,72,.3); }

/* ────────────────────────────────────────────────────
   단계 표시
──────────────────────────────────────────────────── */
.join-steps { display:flex; align-items:center; justify-content:center; margin-bottom:2rem; }
.step { display:flex; flex-direction:column; align-items:center; gap:.3rem; min-width:64px; }
.step-num { width:36px; height:36px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.9rem; font-weight:700; background:var(--bg-muted); color:var(--text-muted); border:2px solid var(--border); transition:all .3s; }
.step.active .step-num { background:var(--color-primary); color:#fff; border-color:var(--color-primary); }
.step.done   .step-num { background:var(--color-success); color:#fff; border-color:var(--color-success); }
.step-label { font-size:.75rem; color:var(--text-muted); font-weight:500; }
.step.active .step-label { color:var(--color-primary); font-weight:700; }
.step.done   .step-label { color:var(--color-success); }
.step-bar { flex:1; height:2px; background:var(--border); min-width:40px; margin-bottom:1.2rem; transition:background .3s; }
.step-bar.active { background:var(--color-success); }

/* ────────────────────────────────────────────────────
   회원 유형 카드
──────────────────────────────────────────────────── */
.section-title-sm { text-align:center; margin-bottom:1rem; font-size:.95rem; color:var(--text-muted); }
.member-type-wrap { display:flex; gap:1rem; margin-bottom:2rem; justify-content:center; }
.member-type-card { flex:1; max-width:220px; border:2px solid var(--border); border-radius:var(--radius-lg); padding:1.25rem 1rem; cursor:pointer; transition:all var(--transition); text-align:center; }
.member-type-card input[type=radio] { display:none; }
.member-type-card:hover { border-color:var(--color-primary-mid); }
.member-type-card.selected { border-color:var(--color-primary); background:var(--color-primary-light); }
[data-theme="dark"] .member-type-card.selected { background:rgba(27,94,32,.18); }
.type-card-inner .type-icon { font-size:2rem; display:block; margin-bottom:.5rem; }
.type-card-inner strong { display:block; font-size:1rem; color:var(--text); margin-bottom:.35rem; }
.type-card-inner p  { font-size:.8rem; color:var(--text-muted); line-height:1.5; margin:0; }

/* 레벨 뱃지 */
.level-badge { display:inline-block; font-size:.7rem; font-weight:700; background:var(--color-primary); color:#fff; border-radius:10px; padding:.1rem .45rem; margin-left:.3rem; font-style:normal; vertical-align:middle; }

/* ────────────────────────────────────────────────────
   약관
──────────────────────────────────────────────────── */
.terms-section { border:1px solid var(--border); border-radius:var(--radius-lg); overflow:hidden; margin-bottom:1.5rem; }
.terms-all { padding:.9rem 1rem; background:var(--color-primary-light); border-bottom:1px solid var(--border); }
[data-theme="dark"] .terms-all { background:rgba(27,94,32,.15); }
.chk-all span { font-weight:700; font-size:.95rem; }
.terms-item+.terms-item { border-top:1px solid var(--border); }
.terms-head { display:flex; align-items:center; justify-content:space-between; padding:.8rem 1rem; }
.terms-toggle { background:none; border:none; font-size:.8rem; color:var(--text-muted); cursor:pointer; padding:.2rem .5rem; border-radius:var(--radius); transition:background var(--transition); white-space:nowrap; }
.terms-toggle:hover { background:var(--bg-muted); }
.terms-body { max-height:0; overflow:hidden; transition:max-height .3s ease; background:var(--bg-muted); }
.terms-body.open { max-height:280px; overflow-y:auto; }
.terms-body pre { padding:1rem; margin:0; font-size:.8rem; color:var(--text-muted); white-space:pre-wrap; word-break:keep-all; font-family:var(--font); line-height:1.7; }

/* ────────────────────────────────────────────────────
   폼 그룹 (가입폼)
──────────────────────────────────────────────────── */
.form-group { margin-bottom:1.2rem; }
.form-label { display:block; font-size:.88rem; font-weight:600; color:var(--text); margin-bottom:.4rem; }
.form-label span.req { color:var(--color-danger); margin-left:.15rem; }
.form-hint { font-size:.78rem; color:var(--text-light); font-weight:400; margin-left:.4rem; }
.form-hint-block { font-size:.8rem; color:var(--text-light); margin-top:.35rem; }

.input-btn-wrap { display:flex; gap:.5rem; }
.input-btn-wrap .form-control { flex:1; }
.btn-check { white-space:nowrap; padding:0 1rem; height:var(--input-height); border:1px solid var(--color-primary); border-radius:var(--radius); background:#fff; color:var(--color-primary); font-weight:600; font-size:.875rem; cursor:pointer; transition:all var(--transition); font-family:var(--font); }
.btn-check:hover { background:var(--color-primary); color:#fff; }
[data-theme="dark"] .btn-check { background:var(--bg-muted); }

.field-msg { font-size:.8rem; margin-top:.3rem; min-height:1.1em; }
.field-msg--ok  { color:var(--color-success); }
.field-msg--err { color:var(--color-danger); }

.pwd-strength-bar { height:4px; background:var(--border); border-radius:2px; margin-top:.4rem; overflow:hidden; }
.pwd-strength-bar div { height:100%; width:0; border-radius:2px; transition:width .3s,background .3s; }

/* ────────────────────────────────────────────────────
   회원유형 뱃지
──────────────────────────────────────────────────── */
.member-type-badge { display:inline-flex; align-items:center; gap:.4rem; padding:.4rem 1rem; border-radius:20px; background:var(--color-primary-light); color:var(--color-primary); font-size:.875rem; font-weight:600; margin-bottom:1.5rem; }
[data-theme="dark"] .member-type-badge { background:rgba(27,94,32,.2); }

/* ────────────────────────────────────────────────────
   버튼 영역
──────────────────────────────────────────────────── */
.join-btn-wrap { display:flex; gap:.75rem; margin-top:1.5rem; }
.btn-join-cancel { flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; padding:0 1.5rem; height:48px; border:1px solid var(--border-dark); border-radius:var(--radius); background:var(--bg); color:var(--text); font-weight:600; font-size:.9rem; cursor:pointer; text-decoration:none; transition:all var(--transition); font-family:var(--font); }
.btn-join-cancel:hover { background:var(--bg-muted); }
.btn-join-next { flex:1; }

/* ────────────────────────────────────────────────────
   가입 완료
──────────────────────────────────────────────────── */
.join-done-wrap { text-align:center; padding:2rem 0; }
.join-done-icon { font-size:4rem; margin-bottom:1rem; }
.join-done-wrap h3 { font-size:1.3rem; color:var(--color-primary); margin-bottom:.75rem; }
.join-done-wrap p { font-size:.95rem; color:var(--text-muted); line-height:1.7; margin-bottom:2rem; }
.join-done-btns { display:flex; gap:.75rem; justify-content:center; }
.join-done-btns .btn-join-next { flex:0 0 auto; min-width:140px; width:auto; }

/* ────────────────────────────────────────────────────
   반응형
──────────────────────────────────────────────────── */
@media (max-width: 600px) {
  .member-box { padding: 1.5rem 1rem; margin: .75rem; }
  .member-type-wrap { flex-direction: column; align-items: center; }
  .member-type-card { max-width: 100%; width: 100%; }
  .join-steps { gap: 0; }
  .step-bar { min-width: 18px; }
  .step { min-width: 46px; }
  .step-num { width: 30px; height: 30px; font-size: .8rem; }
  .step-label { font-size: .7rem; }
  
  /* 입력창과 버튼이 세로로 배치될 때 간격 추가 */
  .input-btn-wrap { flex-direction: column; gap: 8px; } 
  .btn-check { width: 100%; height: 42px; }

  /* 버튼 높이 강제 고정 */
  .loginBtn button, 
  .btn-join-next,
  .btn-join-cancel { 
    display: flex; /* 내부 텍스트 중앙 정렬 유지 */
    align-items: center;
    justify-content: center;
    height: 48px !important; 
    min-height: 48px; 
    width: 100%; 
    margin-top: 0; /* 필요시 버튼 간 간격 조절 */
  }

  .join-btn-wrap { flex-direction: column; gap: 0.75rem; } /* 버튼 사이 간격을 조금 더 줌 */
  .btn-join-cancel { text-align: center; }
  
  .join-done-btns { flex-direction: column; gap: 10px; }
  .join-done-btns .btn-join-next { min-width: unset; width: 100%; }
  
  .btn_area { flex-direction: column; align-items: center; gap: 8px; }
  .bt_st { width: 100%; }
}