/* member 담당 전용 CSS — 클래스는 .member- 접두어만 씁니다. 색·간격은 base.css 토큰(var(--…))만. */

/* 공통 */
.member-page .page-head { margin-bottom: var(--sp-4); }
.member-page .steps { margin-bottom: var(--sp-5); }
.member-two { margin-top: var(--sp-2); }
.member-h { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); font-weight: 700; margin-bottom: var(--sp-3); }
.member-h .ic { color: var(--accent); flex: 0 0 auto; }
.member-lead { font-size: var(--fs-lg); color: var(--ink-2); }
.member-big { font-size: var(--fs-h3); font-weight: 800; margin-top: var(--sp-3); }
.member-sub { display: block; margin-top: 2px; }
.member-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2) var(--sp-3); margin-top: var(--sp-5); color: var(--ink-3); }
.member-demo { margin-top: var(--sp-4); padding: var(--sp-3) var(--sp-4); border-radius: var(--r-sm); background: var(--surface-2); color: var(--ink-2); }
.member-demo code { font-weight: 700; color: var(--ink); }
.member-actions { margin-top: var(--sp-2); }
.member-actions .grow { flex: 1 1 auto; }
.member-msg { margin-bottom: var(--sp-4); }
.member-msg .btn { margin-top: var(--sp-3); }
.member-eye { flex: 0 0 auto; min-width: var(--tap); min-height: var(--tap); border: 2px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); }
.member-inline .btn { flex: 0 0 auto; }
.member-date { max-width: 16rem; }
.member-ok { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); font-weight: 600; color: var(--ok); }
.member-ok .ic { width: 1.111rem; height: 1.111rem; }

.member-bullets { display: flex; flex-direction: column; gap: var(--sp-2); }
.member-bullets li { display: flex; gap: var(--sp-2); align-items: flex-start; line-height: 1.6; }
.member-bullets .ic { margin-top: 4px; color: var(--accent); flex: 0 0 auto; }
.member-linklist { display: flex; flex-direction: column; gap: var(--sp-1); }
.member-linklist a { display: inline-flex; align-items: center; min-height: 2.444rem; }

/* 단계 목록(가입 순서 등) */
.member-steps { counter-reset: mstep; display: flex; flex-direction: column; gap: var(--sp-3); }
.member-steps li { counter-increment: mstep; display: grid; grid-template-columns: 2rem 1fr; column-gap: var(--sp-3); }
.member-steps li::before { content: counter(mstep); grid-row: span 2; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); font-weight: 800; }
.member-steps b { font-weight: 700; }
.member-steps span { font-size: var(--fs-sm); color: var(--ink-3); }
.member-step-h { display: flex; align-items: center; gap: var(--sp-2); font-size: var(--fs-lg); font-weight: 700; }
.member-no { display: inline-flex; align-items: center; justify-content: center; width: 1.778rem; height: 1.778rem; border-radius: 50%; background: var(--accent); color: var(--surface); font-size: var(--fs-sm); font-weight: 800; }
.member-verify { padding-top: var(--sp-5); border-top: 1px dashed var(--line-strong); }
.member-locked { padding: var(--sp-4); border-radius: var(--r-sm); background: var(--muted-soft); color: var(--ink-3); }
.member-locked p { display: flex; align-items: center; gap: var(--sp-2); }

/* 인증번호 안내(데모) */
.member-code { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border-radius: var(--r-sm); background: var(--warm-soft); color: var(--warm-ink); }
.member-code p { display: flex; align-items: flex-start; gap: var(--sp-2); line-height: 1.6; }
.member-code .ic { flex: 0 0 auto; margin-top: 3px; }
.member-code-demo b { font-size: var(--fs-h4); letter-spacing: .08em; color: var(--ink); }
.member-code-time b { color: var(--ink); }
.member-code-time b.is-over { color: var(--danger); }

/* 결과(아이디 찾기) */
.member-result { display: flex; gap: var(--sp-4); align-items: flex-start; padding: var(--sp-5); border-radius: var(--r); background: var(--accent-soft); }
.member-result-id { font-size: var(--fs-h2); font-weight: 800; color: var(--accent-ink); letter-spacing: .02em; word-break: break-all; }

/* 비밀번호 규칙 체크 */
.member-rules { display: flex; flex-wrap: wrap; gap: var(--sp-1) var(--sp-4); margin-top: var(--sp-1); }
.member-rule { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-sm); color: var(--ink-3); }
.member-rule.is-ok { color: var(--ok); font-weight: 600; }
.member-rule.is-bad { color: var(--danger); font-weight: 700; }

/* 약관 동의 */
.member-terms { display: flex; flex-direction: column; gap: var(--sp-3); }
.member-all { font-size: var(--fs-lg); padding-bottom: var(--sp-3); }
.member-term { padding: var(--sp-3) var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-3); }
.member-term-title { font-weight: 700; padding: var(--sp-2) 0; }
.member-req { color: var(--warm-ink); font-weight: 800; }
.member-opt { color: var(--ink-3); font-weight: 700; }
.member-more summary { display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 var(--sp-2); cursor: pointer; color: var(--accent-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.member-more[open] summary { margin-bottom: var(--sp-2); }
.member-table th, .member-table td { font-size: var(--fs-sm); vertical-align: top; }
.member-channels { display: flex; flex-wrap: wrap; align-items: center; gap: 0 var(--sp-5); }
.member-kv { gap: .556rem 1.111rem; }
.member-kv dd { word-break: break-all; }

/* 가입 완료 */
.member-done { text-align: center; display: flex; flex-direction: column; align-items: center; gap: var(--sp-3); }
.member-done-ico { background: var(--accent-soft); color: var(--accent); }
.member-done h1 { font-size: var(--fs-h2); }
.member-done-kv { text-align: left; margin: var(--sp-3) auto; padding: var(--sp-4) var(--sp-5); border-radius: var(--r-sm); background: var(--surface-3); border: 1px solid var(--line); }

/* 마이페이지 */
.member-tabs { margin-bottom: var(--sp-5); }
.member-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--sp-4); align-items: stretch; }
.member-grid-2 { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); margin-top: var(--sp-6); }
.member-me { display: flex; flex-direction: column; gap: var(--sp-4); }
.member-me-top { display: flex; align-items: center; gap: var(--sp-3); }
.member-avatar { width: 3.333rem; height: 3.333rem; font-size: var(--fs-h4); }
.member-me-name { font-size: var(--fs-h4); font-weight: 800; }
.member-counts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.member-count { display: flex; flex-direction: column; gap: var(--sp-2); }
.member-count .ico-box { color: var(--accent); }
.member-count-label { color: var(--ink-2); font-weight: 600; }
.member-count b { font-size: var(--fs-h2); font-weight: 800; color: var(--ink); }
.member-sec { margin-top: var(--sp-6); }
.member-rsv { display: grid; grid-template-columns: 11rem minmax(0, 1fr) auto; gap: var(--sp-4); align-items: center; }
.member-rsv-date { font-size: var(--fs-lg); font-weight: 800; }
.member-rsv-main { display: flex; flex-direction: column; gap: var(--sp-1); min-width: 0; }
.member-rsv-act { justify-content: flex-end; }
.member-status-list { display: flex; flex-direction: column; }
.member-status-list li { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); }
.member-status-list li:last-child { border-bottom: 0; }
.member-dot { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--ink-3); white-space: nowrap; }
.member-dot-mark { width: .667rem; height: .667rem; border-radius: 50%; background: var(--line-strong); }
.member-dot.is-on { color: var(--ok); }
.member-dot.is-on .member-dot-mark { background: var(--ok); }
.member-out { padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.member-out-form { margin-top: var(--sp-4); border-color: var(--danger); }

/* 목록(예약·문진) */
.member-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); }
.member-filter .chips { flex-wrap: wrap; }
.member-period { display: flex; align-items: center; gap: var(--sp-2); }
.member-period label { font-weight: 700; white-space: nowrap; }
.member-period .select { min-width: 10rem; }
.member-total { margin: var(--sp-2) 0 var(--sp-3); color: var(--ink-2); }
.member-tablewrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); overflow-x: auto; }
.member-rtable { width: 100%; }
.member-rtable td { vertical-align: middle; }
.member-rtable td.num { text-align: left; }
.member-rtable small { font-size: var(--fs-xs); }

/* 상세 */
.member-notify { display: flex; flex-direction: column; }
.member-notify li { padding: var(--sp-3) 0; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 4px; }
.member-notify li:last-child { border-bottom: 0; }
.member-notify-top { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); flex-wrap: wrap; }
.member-fail { display: flex; gap: 4px; align-items: flex-start; color: var(--danger); font-weight: 600; }
.member-fail .ic { margin-top: 3px; flex: 0 0 auto; }
.member-history { display: flex; flex-direction: column; gap: var(--sp-2); }
.member-danger-link { color: var(--danger); }
.member-qa { display: flex; flex-direction: column; }
.member-qa > div { display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: var(--sp-4); padding: var(--sp-4) 0; border-bottom: 1px solid var(--line); }
.member-qa > div:last-child { border-bottom: 0; }
.member-qa dt { color: var(--ink-3); font-weight: 600; }
.member-qa dd { line-height: 1.7; word-break: break-word; }
.member-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.member-tags li { padding: 2px var(--sp-3); border-radius: var(--r-pill); background: var(--warm-soft); color: var(--warm-ink); font-weight: 600; font-size: var(--fs-sm); }

/* 알림 설정 */
.member-set { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-4); border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface-3); }
.member-set-title { display: flex; align-items: center; gap: var(--sp-2); font-weight: 700; font-size: var(--fs-lg); padding: 0 var(--sp-1); }
.member-set-title .ic { color: var(--accent); }
.member-set-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); cursor: pointer; }
.member-set-label { font-weight: 700; }
.member-set .switch { flex: 0 0 auto; }
.member-sw-on, .member-sw-off { font-weight: 700; min-width: 3.5rem; }
.member-sw-on { display: none; color: var(--ok); }
.member-sw-off { color: var(--ink-3); }
.switch input:checked ~ .member-sw-on { display: inline; }
.switch input:checked ~ .member-sw-off { display: none; }
.member-warn-text { display: flex; gap: 4px; align-items: flex-start; color: var(--warn); font-weight: 600; }
.member-warn-text .ic { margin-top: 3px; flex: 0 0 auto; }

@media (max-width: 980px) {
  .member-grid, .member-grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .member-counts { grid-template-columns: 1fr; }
  .member-count { flex-direction: row; align-items: center; }
  .member-count b { margin-left: auto; font-size: var(--fs-h3); }
  .member-rsv { grid-template-columns: 1fr; gap: var(--sp-3); }
  .member-rsv-act { justify-content: stretch; }
  .member-rsv-act .btn { flex: 1 1 auto; }
  .member-inline { flex-wrap: wrap; }
  .member-inline .btn { flex: 1 1 100%; }
  .member-actions { flex-direction: column-reverse; }
  .member-actions .btn { width: 100%; }
  .member-qa > div { grid-template-columns: 1fr; gap: var(--sp-1); }
  .member-set-row { flex-wrap: wrap; }
  .member-period { width: 100%; }
  .member-period .select { flex: 1 1 auto; }
  .member-result { flex-direction: column; }
  /* 표 → 카드 */
  .member-tablewrap { background: transparent; border: 0; overflow: visible; }
  .member-rtable thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .member-rtable.table { min-width: 0; }
  .member-rtable, .member-rtable tbody, .member-rtable tr, .member-rtable td { display: block; width: auto; box-sizing: border-box; }
  .member-rtable td.num { text-align: left; }
  .member-rtable tr { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }
  .member-rtable td { border: 0; padding: 4px 0; display: flex; gap: var(--sp-3); align-items: center; }
  .member-rtable td[data-label]::before { content: attr(data-label); flex: 0 0 5.5rem; color: var(--ink-3); font-size: var(--fs-sm); font-weight: 600; }
  .member-rtable td.member-hide-m { display: none; }
  .member-rtable td.right { justify-content: stretch; padding-top: var(--sp-2); }
  .member-rtable td.right .btn { width: 100%; }
}