/* ============================================================================
   회원 원페이지 — 시안 proto/members.html <style> '회원 원페이지' 절을 옮긴 것(BRIEF_v1 6-4 · IMPL_PLAN_B B4).
   새 색·새 크기 0: 값은 tokens.css 변수 또는 components.css 에 이미 있는 수치다. 인라인 style 은 CSP 로 막혀 있어 시안의 style="…" 자리는
   클래스로, 동적 값(막대 채움·차림표 자리)은 CSS 변수·CSSOM 으로 받는다.
   배치: 1440 = 머리 전폭 → 카드 한 쌍 나란히 → 7/5 두 단 · 1024 = 같은 틀(격자 8칸 중 5/3) · 390 = 한 단, 단추 가로 스크롤, 카드 넘김 + 점.
   B 와 다른 점(시안 대비): 리포트 카드(D) · 다음 수업·[캘린더에서 보기](D) · [판매]·[수납]·[연장](B5) · [PT 재등록](F) 없음.
   ========================================================================== */

/* ── 맨 위 줄: 회원 목록으로 · 방금 갱신 · 새로 고침 ─────────────────────── */
.op-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: -4px 0 12px; }
.op-top .op-back { margin-left: -6px; }
.op-top .op-back .ico { width: 16px; height: 16px; }
.op-top .ph-acts { display: flex; align-items: center; gap: 8px; }

/* ── 머리 ──────────────────────────────────────────────────────────────── */
.op-head { padding: 24px 24px 20px; }
.op-head > .page-loader { padding: 32px 0; }
.op-id { display: grid; grid-template-columns: 64px minmax(0,1fr) auto; gap: 20px; align-items: start; }
/* 머리 오른쪽 사실 3칸(사이트 .spec 문법: 캡션 위 · 값 아래 · 칸 사이 1px) — 넓은 화면에서만 */
.op-facts { display: grid; grid-template-columns: repeat(3, auto); align-self: center; margin: 0; }
.op-facts > div { display: flex; flex-direction: column; gap: 4px; min-width: 128px; padding: 4px 24px; border-left: 1px solid var(--line); }
.op-facts dd { margin: 0; white-space: nowrap; }
@media (max-width: 1279px) { .op-id { grid-template-columns: 64px minmax(0,1fr); } .op-facts { display: none; } }
.op-id-main { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.op-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.op-name h1:focus { outline: none; }
.op-line { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; min-height: 32px; }
.op-line .vr { width: 1px; height: 16px; background: var(--line-input); flex: none; }
.op-line .op-tel { min-height: 32px; padding: 0; gap: 4px; font-size: var(--fs-15); font-weight: 700; }
.op-line .op-tel .ico { width: 16px; height: 16px; }
.op-why b { font-weight: 700; }
.op-acts { position: relative; display: flex; align-items: center; gap: 8px; margin-top: 20px; padding: 20px 4px 4px; margin-left: -4px; margin-right: -4px; margin-bottom: -4px; border-top: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }   /* 좌우·아래 4 = 포커스 고리가 스크롤 상자에 잘리지 않게 */
.op-acts::-webkit-scrollbar { display: none; }
.op-acts .btn { flex: none; }
.op-acts .sp { flex: 1 0 8px; }
.op-acts .op-more span:not(.drop-loader) { display: none; }
.op-head-err { padding: 4px 0; }
.op-band { margin-top: 12px; }
.op-band[hidden] { display: none; }
.op-sec { margin-top: var(--gap); }

/* ── 회원권 · 수강권 나란히 — 같은 머리 · 같은 막대 · 같은 접힘 줄(PassCard) ─── */
.pass-pair { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--gap); }
.pass-pair.is-single { grid-template-columns: minmax(0,1fr); }
.pair-slot { display: flex; min-width: 0; }
.pair-slot[hidden] { display: none; }
.pair-slot > .pass { flex: 1; }
.pass-hero { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: -4px 0 -4px; }
.pass-hero .stat-value { min-width: 0; }
.pass-hero > .t-sub { white-space: nowrap; }
/* 이어질 회원권 한 줄(연장 판매함) — 휴회 띠와 같은 자리·높이, 경고가 아니라 회색 바탕 */
.pass-next { display: flex; align-items: center; flex-wrap: wrap; gap: 4px 8px; min-height: 36px; margin: 0; padding: 8px 12px; border-radius: var(--r-input); background: var(--mute-bg); }
.pass-next .ico { flex: none; color: var(--muted); }
.pass-link { flex: none; gap: 2px; }
.pass-link .ico { width: 16px; height: 16px; }
.pass-when { flex: none; white-space: nowrap; }
.pass-empty { flex: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 4px; min-height: 216px; }
.pe-icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: 8px; border-radius: 50%; background: var(--sky-1); color: var(--action); }
.pass-empty .btn { margin-top: 12px; }
.pass-slot { flex: 1; display: flex; flex-direction: column; justify-content: center; min-height: 216px; }
.pair-dots { display: none; margin-top: 12px; }
.pair-dots[hidden] { display: none !important; }
.pair-dots i { cursor: pointer; }
.op-folds { display: flex; flex-direction: column; gap: 8px; }
.op-folds:not(:empty) { margin-top: 12px; }
.past { background: var(--surface); box-shadow: inset 0 0 0 1px var(--line); }
.past .fold-line { grid-template-columns: minmax(0,1fr); }
.fold-two { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; min-width: 0; }

/* ── 블록 공통 ─────────────────────────────────────────────────────────── */
.op-loading { display: flex; align-items: center; gap: 12px; padding: 16px 0; }
.op-empty { padding: 16px 0 8px; }
.op-more-row { display: flex; justify-content: center; margin-top: 8px; }
.op-more-row:empty { display: none; }

/* 출입 기록 — 14일 점 띠(방문한 날 = 하늘 점) + 최근 5건 */
.vstrip { display: grid; grid-template-columns: repeat(14, minmax(0,1fr)); gap: 2px; padding: 4px 0 16px; }
.vday { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.vday i { width: 14px; height: 14px; border-radius: 50%; background: var(--bar-track); box-shadow: inset 0 0 0 1px var(--line-input); }
.vday.is-on i { background: var(--drop); box-shadow: none; }
.vday.is-today i { outline: 2px solid var(--ink); outline-offset: 2px; }
.vday .t-caption { font-variant-numeric: tabular-nums; }
.vday.is-today .t-caption { color: var(--ink); }
.vlist > li { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 2px 12px; min-height: 56px; padding: 8px 0; border-top: 1px solid var(--line); }
.vl-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.vl-meta { display: inline-flex; align-items: center; gap: 4px; }
.vl-meta .ico { width: 14px; height: 14px; stroke-width: 2; flex: none; }
.vl-now { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; color: var(--ink); }
.vlist > li.is-voided .t-value { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-input); }
.op-voided { color: var(--stop); font-weight: 600; }

/* 결제 · 미납 */
.op-pay-table { padding: 0; }
.pay-list > li { display: grid; grid-template-columns: minmax(0,1fr) auto; align-items: center; gap: 2px 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.pay-list .cell-two { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pay-list .pl-amt { text-align: right; display: flex; flex-direction: column; gap: 2px; font-variant-numeric: tabular-nums; }

/* 메모 · 수업 */
.memo-form { display: flex; flex-direction: column; gap: 8px; }
.memo-form textarea.input { min-height: 72px; }
.memo-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.memo-foot .counter { margin-left: 0; }
.memo-list { margin-top: 8px; }
.memo-list > li { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); }
.memo-list .t-value { overflow-wrap: anywhere; }
.memo-list > li.is-new .t-value { font-weight: 600; }
.op-ad { margin-top: 12px; }
.les-list > li { display: grid; grid-template-columns: 36px minmax(0,1fr) auto; align-items: center; gap: 10px; min-height: 48px; border-top: 1px solid var(--line); }
.les-list > li:first-child { border-top: 0; }
.les-main { display: flex; align-items: center; gap: 6px; min-width: 0; }
.les-main .t-value { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 더보기 차림표(화면 고정 자리 — ui/menu.js 가 left·top 을 넣는다) */
.menu { position: fixed; z-index: 85; min-width: 220px; }
.menu .pop-item { min-height: 44px; padding: 8px 16px; font-size: var(--fs-14); font-weight: 600; }
.menu .pop-item.is-danger { color: var(--stop); }
.menu hr { margin: 4px 0; border: 0; border-top: 1px solid var(--line); }

/* ── 시트 안 ───────────────────────────────────────────────────────────── */
.op-sheet { display: flex; flex-direction: column; gap: 24px; }
.op-fields { display: contents; margin: 0; padding: 0; border: 0; min-width: 0; }
.op-fields:disabled .input { background: var(--mute-bg); color: var(--muted); }
.op-sheet-err:empty { display: none; }
.sheet-kv { display: grid; grid-template-columns: 96px minmax(0,1fr); gap: 8px 12px; margin: 0; }
.sheet-kv > div { display: contents; }
.sheet-kv dt { color: var(--muted); align-self: baseline; }
.sheet-kv dd { margin: 0; overflow-wrap: anywhere; }
.sheet-result { padding: 12px 14px; border-radius: var(--r-input); background: var(--mute-bg); font-size: var(--fs-13); line-height: var(--lh-13); }
.sheet-result b { font-weight: 700; font-variant-numeric: tabular-nums; }
.notice-line.is-warn { color: var(--ink); box-shadow: inset 3px 0 0 var(--stop); }
.sheet-done { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; padding: 8px 0; }
.sheet-done .t-name { font-size: var(--fs-16); line-height: var(--lh-16); font-weight: 700; }
.sheet-done .t-name:focus { outline: none; }
.sd-mark { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 4px; border-radius: 50%; background: var(--go-bg); color: var(--go); }
.sd-mark .ico { width: 22px; height: 22px; stroke-width: 2.4; }
.op-pick { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.op-pick .choice { min-height: 64px; }
.op-pick .choice:disabled { opacity: .55; cursor: not-allowed; }
.lk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 6px; }
.lk-cell { height: 44px; border-radius: var(--r-input); background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-input); font-family: var(--font-num); font-size: var(--fs-14); font-weight: 800; font-variant-numeric: tabular-nums; transition: box-shadow var(--t-micro) var(--ease-micro); }
.lk-cell:hover { box-shadow: inset 0 0 0 1px var(--ink); }
.lk-cell[aria-pressed="true"] { background: var(--ink); color: var(--on-ink); box-shadow: none; }
.op-list { display: flex; flex-direction: column; }
.op-row { display: flex; flex-direction: column; gap: 4px; padding: 12px 0; border-top: 1px solid var(--line); min-width: 0; }
.op-row:first-child { border-top: 0; }
.op-row-top { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; min-width: 0; }
.op-row-top .tnum { margin-left: auto; }
.op-row.is-voided .t-name { color: var(--muted); text-decoration: line-through; text-decoration-color: var(--line-input); }
.op-date { margin-top: 12px; color: var(--ink); }
.op-date:first-child { margin-top: 0; }
.op-rows > li { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; border-top: 1px solid var(--line); }
.consent-now { display: flex; flex-direction: column; }
.consent-now > li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); }
.consent-now > li:first-child { border-top: 0; }
.cs-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

/* ── 폰 ────────────────────────────────────────────────────────────────── */
@media (max-width: 767px) {
  .op-top { margin: -4px 0 8px; }
  .op-head { padding: 20px; }
  .op-id { gap: 16px; }
  .op-line .vr { display: none; }
  .op-acts { margin: 16px -20px -4px; padding: 16px 20px 4px; }
  .op-acts .sp { display: none; }
  .op-acts::after { content: ""; flex: 0 0 4px; }
  /* 폰: 피그마처럼 카드 넘김 + 점 2개 */
  .pass-pair { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gut); margin: 0 calc(var(--gut) * -1); padding: 0 var(--gut); scrollbar-width: none; }
  .pass-pair::-webkit-scrollbar { display: none; }
  .pass-pair::after { content: ""; flex: 0 0 8px; }
  .pass-pair > .pair-slot { flex: 0 0 100%; scroll-snap-align: start; }
  .pair-dots { display: flex; }
  .op-col { display: contents; }
  .o-rpt { order: 1; } .o-visit { order: 2; } .o-pay { order: 3; } .o-memo { order: 4; } .o-les { order: 5; }
  .op-pick { grid-template-columns: 1fr 1fr; }
  .sheet-kv { grid-template-columns: 84px minmax(0,1fr); }
}