/* ==========================================================================
   G5Pro 회원 화면 — 로그인·비밀번호·프로필·포인트·스크랩·쪽지
   순정 skin/member/basic 의 mbskin / new_win 두 레이아웃을 대신한다.
   ========================================================================== */

/* ---------- 인증 카드 (로그인·비밀번호찾기 등 본문 페이지) ----------
   순정 .mbskin 자리. 화면 가운데 좁은 카드 하나만 둔다. */

.pro-auth {
    width: 100%;
    max-width: 26rem;
    margin-inline: auto;
    padding-block: var(--pro-sp-8);
}

/* 셸 없는 화면(비밀번호 재확인 등 순정 _head.sub 체인)에서는 카드가 맨몸 body 위에
   덜렁 놓인다. 그때는 뷰포트 정중앙에 앉힌다 — 셸 있는 화면에서는 .pro-auth 가
   .pro-container 안에 있어 이 직계 셀렉터에 걸리지 않는다. */
body.pro-body > .pro-auth {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex; flex-direction: column;
    padding-inline: var(--pro-sp-4);
}
/* 정중앙은 시선 기준선보다 낮아 보인다 — 위:아래 여백을 1:2 로 나눠 카드를 1/3 지점에 앉힌다 */
body.pro-body > .pro-auth::before { content: ""; flex: 1; }
body.pro-body > .pro-auth::after  { content: ""; flex: 2; }
body.pro-body > .pro-auth .pro-auth-card { width: 100%; }
.pro-auth-card {
    padding: var(--pro-sp-6);
    border: 1px solid hsl(var(--pro-border));
    border-radius: var(--pro-radius-lg);
    background: hsl(var(--pro-card));
}
.pro-auth-title { font-size: var(--pro-text-xl); font-weight: 700; letter-spacing: -0.01em; }
.pro-auth-desc  { margin-top: var(--pro-sp-2); font-size: var(--pro-text-sm); color: hsl(var(--pro-muted-foreground)); line-height: 1.6; }
.pro-auth-form  { display: flex; flex-direction: column; gap: var(--pro-sp-3); margin-top: var(--pro-sp-5); }
.pro-auth-foot  { display: flex; align-items: center; justify-content: space-between; gap: var(--pro-sp-3); flex-wrap: wrap; margin-top: var(--pro-sp-4); font-size: var(--pro-text-sm); }
.pro-auth-foot a { color: hsl(var(--pro-muted-foreground)); }
.pro-auth-foot a:hover { color: hsl(var(--pro-foreground)); }

/* 구분선 있는 소제목 — "본인인증으로 찾기" 처럼 대안 수단을 나눌 때 */
.pro-auth-sep {
    display: flex; align-items: center; gap: var(--pro-sp-3);
    margin-block: var(--pro-sp-6) var(--pro-sp-4);
    font-size: var(--pro-text-xs); color: hsl(var(--pro-muted-foreground));
}
.pro-auth-sep::before, .pro-auth-sep::after {
    content: ""; flex: 1; height: 1px; background: hsl(var(--pro-border));
}

/* ---------- 팝업 창 (프로필·포인트·스크랩·쪽지) ----------
   window.open 으로 뜨는 화면이다. 사이트 헤더/푸터 없이 head.sub.php 만 타므로
   여기서 자체 여백과 폭을 갖는다. */

.pro-popup { padding: var(--pro-sp-5); max-width: 46rem; margin-inline: auto; }
.pro-popup-title {
    font-size: var(--pro-text-lg); font-weight: 700;
    padding-bottom: var(--pro-sp-3); margin-bottom: var(--pro-sp-4);
    border-bottom: 1px solid hsl(var(--pro-border));
}
.pro-popup-foot { display: flex; justify-content: flex-end; gap: var(--pro-sp-2); margin-top: var(--pro-sp-5); }

/* ---------- 프로필 ---------- */

.pro-profile-head { display: flex; align-items: center; gap: var(--pro-sp-3); margin-bottom: var(--pro-sp-5); }
.pro-profile-head img { width: 3rem; height: 3rem; border-radius: 50%; object-fit: cover; }
.pro-profile-nick { font-size: var(--pro-text-lg); font-weight: 600; }

.pro-deflist { display: grid; grid-template-columns: auto 1fr; gap: var(--pro-sp-2) var(--pro-sp-4); font-size: var(--pro-text-sm); }
@media (min-width: 480px) { .pro-deflist { grid-template-columns: auto 1fr auto 1fr; } }
.pro-deflist dt { color: hsl(var(--pro-muted-foreground)); font-size: var(--pro-text-xs); white-space: nowrap; }
.pro-deflist dd { margin: 0; font-weight: 500; min-width: 0; overflow-wrap: anywhere; }

.pro-profile-intro { margin-top: var(--pro-sp-5); padding-top: var(--pro-sp-4); border-top: 1px solid hsl(var(--pro-border)); }
.pro-profile-intro h2 { font-size: var(--pro-text-sm); color: hsl(var(--pro-muted-foreground)); margin-bottom: var(--pro-sp-2); }
.pro-profile-intro p { font-size: var(--pro-text-sm); line-height: 1.7; overflow-wrap: anywhere; }

/* ---------- 포인트 내역 ---------- */

.pro-point-sum {
    display: flex; align-items: baseline; justify-content: space-between;
    padding: var(--pro-sp-4);
    border: 1px solid hsl(var(--pro-border)); border-radius: var(--pro-radius-lg);
    background: hsl(var(--pro-muted) / .4);
    margin-bottom: var(--pro-sp-4);
}
.pro-point-sum-label { font-size: var(--pro-text-sm); color: hsl(var(--pro-muted-foreground)); }
.pro-point-sum-value { font-size: var(--pro-text-2xl); font-weight: 700; }

.pro-point-row {
    display: flex; align-items: baseline; gap: var(--pro-sp-3); flex-wrap: wrap;
    padding-block: var(--pro-sp-3);
    border-bottom: 1px solid hsl(var(--pro-border));
    font-size: var(--pro-text-sm);
}
.pro-point-desc { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; }
.pro-point-when { font-size: var(--pro-text-xs); color: hsl(var(--pro-muted-foreground)); white-space: nowrap; }
.pro-point-amt  { font-weight: 700; white-space: nowrap; margin-inline-start: auto; }
.pro-point-amt.is-plus  { color: hsl(var(--pro-success)); }
.pro-point-amt.is-minus { color: hsl(var(--pro-destructive)); }
.pro-point-expired { text-decoration: line-through; opacity: .55; }
.pro-point-total {
    display: flex; justify-content: flex-end; gap: var(--pro-sp-4);
    padding-block: var(--pro-sp-3); font-size: var(--pro-text-sm); font-weight: 600;
}

/* ---------- 스크랩 ---------- */

.pro-scrap-row {
    display: flex; align-items: baseline; gap: var(--pro-sp-3); flex-wrap: wrap;
    padding-block: var(--pro-sp-3);
    border-bottom: 1px solid hsl(var(--pro-border));
    font-size: var(--pro-text-sm);
}
.pro-scrap-subject { flex: 1 1 14rem; min-width: 0; font-weight: 500; overflow-wrap: anywhere; }
.pro-scrap-board { font-size: var(--pro-text-xs); color: hsl(var(--pro-muted-foreground)); white-space: nowrap; }
.pro-scrap-when  { font-size: var(--pro-text-xs); color: hsl(var(--pro-muted-foreground)); white-space: nowrap; }
.pro-scrap-del   { color: hsl(var(--pro-muted-foreground)); }
.pro-scrap-del:hover { color: hsl(var(--pro-destructive)); }

/* ---------- 넓은 인증 카드 (약관 동의·가입 폼) ---------- */

.pro-auth-wide { max-width: 44rem; }
.pro-auth-center { text-align: center; }
.pro-auth-center .pro-deflist,
.pro-auth-center .pro-alert { text-align: start; }
.pro-auth-center .pro-write-actions { justify-content: center; }
/* 회원 화면의 버튼 행은 맨몸 form 의 직계라 스스로 여백을 가져야 한다.
   (게시판 글쓰기는 부모 .pro-write 의 gap 이 띄워 주는 것과 대비.)
   약관 화면의 .pro-terms-all margin-bottom 과는 형제 마진 병합으로 한 번만 적용된다. */
.pro-auth .pro-write-actions { margin-top: var(--pro-sp-5); }

/* ---------- 비밀번호 재확인 ---------- */

/* 아이디 값이 라벨과 같은 줄머리에 맨글자로 놓이면 어느 쪽이 값인지 안 읽힌다.
   아래 비밀번호 입력칸과 같은 자리(패딩)에 읽기 전용 칸 모양으로 앉혀 짝을 맞춘다. */
#mb_confirm_id {
    padding: var(--pro-sp-2) var(--pro-sp-3);
    border: 1px solid hsl(var(--pro-border)); border-radius: var(--pro-radius-md);
    background: hsl(var(--pro-muted) / .5);
    font-weight: 500;
    overflow-wrap: anywhere;
}

/* ---------- 가입 완료 ---------- */

/* 환영 화면은 읽을 문장이 전부라 다른 회원 화면보다 한 단계씩 크게 보여준다. */
#reg_result .pro-auth-title { font-size: var(--pro-text-2xl); }
#reg_result .pro-auth-desc  { font-size: var(--pro-text-base); }
#reg_result .pro-help       { font-size: var(--pro-text-sm); line-height: 1.7; }

.pro-req { color: hsl(var(--pro-destructive)); }

.pro-fieldset { border: 0; padding: 0; margin-block: var(--pro-sp-6) 0; display: flex; flex-direction: column; gap: var(--pro-sp-4); }
.pro-fieldset > legend {
    padding: 0; margin-bottom: var(--pro-sp-3);
    font-size: var(--pro-text-sm); font-weight: 600;
    display: flex; align-items: center; gap: var(--pro-sp-2);
}

/* 우편번호 + 검색버튼처럼 한 줄에 붙이는 묶음 */
.pro-row-inline { display: flex; gap: var(--pro-sp-2); align-items: center; flex-wrap: wrap; }
.pro-row-inline .pro-input { flex: 1 1 8rem; min-width: 0; }
.pro-input-zip { max-width: 9rem; flex: 0 0 auto; }

/* ---------- 약관 ---------- */

.pro-terms { margin-block: var(--pro-sp-5); }
.pro-terms-title { font-size: var(--pro-text-sm); font-weight: 600; margin-bottom: var(--pro-sp-2); display: flex; align-items: center; gap: var(--pro-sp-2); }
.pro-terms-body {
    max-height: 12rem; overflow-y: auto;
    padding: var(--pro-sp-3);
    border: 1px solid hsl(var(--pro-border)); border-radius: var(--pro-radius-md);
    background: hsl(var(--pro-muted) / .35);
    font-size: var(--pro-text-xs); line-height: 1.7;
    white-space: pre-wrap; overflow-wrap: anywhere;
    margin-bottom: var(--pro-sp-2);
}
/* 표가 들어간 약관은 pre-wrap 이 마크업을 망가뜨리지 않게 되돌린다 */
.pro-terms-body:has(table) { white-space: normal; }
.pro-terms-all {
    padding: var(--pro-sp-3);
    border: 1px solid hsl(var(--pro-border)); border-radius: var(--pro-radius-md);
    background: hsl(var(--pro-muted) / .5);
    /* 약관 화면의 버튼 행(.pro-write-actions)이 바로 뒤에 온다. 글쓰기 화면은 부모
       .pro-write 의 gap 이 띄워 주지만 여기는 맨몸 form 이라 직접 띄워야 한다. */
    margin-bottom: var(--pro-sp-5);
}

/* ---------- 쪽지 ---------- */

.pro-memo-row {
    display: flex; align-items: flex-start; gap: var(--pro-sp-3);
    padding-block: var(--pro-sp-3);
    border-bottom: 1px solid hsl(var(--pro-border));
}
.pro-memo-row.is-unread { background: hsl(var(--pro-muted) / .4); }
.pro-memo-avatar img { width: 2rem; height: 2rem; border-radius: 50%; object-fit: cover; }
.pro-memo-body { flex: 1 1 auto; min-width: 0; }
.pro-memo-head { display: flex; align-items: center; gap: var(--pro-sp-2); flex-wrap: wrap; font-size: var(--pro-text-sm); }
.pro-memo-when { font-size: var(--pro-text-xs); color: hsl(var(--pro-muted-foreground)); white-space: nowrap; }
.pro-memo-preview { display: block; margin-top: var(--pro-sp-1); font-size: var(--pro-text-sm); color: hsl(var(--pro-muted-foreground)); overflow-wrap: anywhere; }
.pro-memo-preview:hover { color: hsl(var(--pro-foreground)); }