@charset "utf-8";

/* ============================================================================
   page/member.css — 회원 — 가입 · 로그인 · 서약서 · 마이페이지
   ----------------------------------------------------------------------------
   이 화면에서만 쓰인다: /member/*, /mypage/*
   
   전 페이지가 지고 다니던 것을 화면별로 갈랐다 (옛 additional.css).
   ============================================================================ */

/* ── 로그인 · 설문 표 (survey_table_wrapper) ─────────────────────────────────── */
/* ── 로그인/설문 표 (survey_table_wrapper) ─────────────────────────── */

/* 축은 마크업이 정한다 — 이 줄에 .accent-zone 이 얹혀 있다 (계약서 I5).
   예전에는 여기서 --accent 를 직접 박고, 바로 아래 고르기 목록에만 .accent-zone 을
   따로 얹어서 «같은 보라» 를 두 곳이 서로 모르게 정하고 있었다 */
.survey-table-wrapper th {
    color:var(--zone);
}
/* 설문 갈래는 ui.css 의 «고르기 목록»(.option-list)이 그린다 — 팝업의 설문과 같은 것이다.
   여기 남긴 것은 이 표 안에서의 자리(테 두른 옅은 판)와 보라 축뿐이다.
   예전에는 float 라디오 한 벌을 여기서 다시 그렸고, 그 벌은 input 을 지워
   키보드로 고를 수 없었다. */
.survey-table-wrapper .option-list {
    box-sizing:border-box;
    padding:1.5rem;
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    background:var(--paper-warm);
}
.survey-table-wrapper .option-box {
    background:var(--paper);
}

/* ── 회원가입 · 로그인 (member · mypage) ──────────────────────────────────────── */
/* ============================================================================
   회원가입 & 로그인 (Member & Signup - sign.php, statement.php, join.php, login.php)
   ----------------------------------------------------------------------------
   · 단계 인디케이터 (member_step_indicator)
   · 회원가입/서약서 모던 카드 (member_card, statement_card)
   · 인터랙티브 라디오 선택 칩 (choice_radio_box)
   · 스플릿 로그인 & 비회원 주문조회 카드 (login_grid)
   ========================================================================== */

.member-page-wrap {
    padding-top:var(--sp-4);
    padding-bottom:var(--sp-8);
}

.member-container {
    max-width:720px;
    margin:0 auto;
}

.login-container {
    max-width:960px;
}

/* 🏷️ 1. 단계 인디케이터 */
.member-step-indicator {
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    margin-bottom:36px;
    flex-wrap:wrap;
}
.step-item {
    display:flex;
    align-items:center;
    gap:7px;
    color:var(--muted);
    font-size:var(--fs-sm);
    font-weight:700;
}
.step-num {
    width:26px;
    height:26px;
    border-radius:50%;
    background:var(--paper-warm);
    border:1px solid var(--line);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    font-size:var(--fs-2xs);
    font-weight:700;
    color:var(--muted);
}
.step-item.active {
    color:var(--ink);
}
.step-item.active .step-num {
    background:var(--zone);
    border-color:var(--zone);
    color:var(--paper);
    box-shadow:var(--zone-shadow);
}
.step-item.completed .step-num {
    background:var(--zone-soft);
    border-color:var(--zone-line);
    color:var(--zone-deep);
}
.step-divider {
    width:24px;
    height:1px;
    background:var(--line);
}
.step-divider.active {
    background:var(--zone);
}

/* 📜 2. 회원 카드 & 서약서 카드 */
.member-card {
    background:var(--paper);
    border:1px solid var(--line);
    border-radius:var(--r-xl);
    padding:36px 40px;
    box-shadow:var(--sh-card);
    margin-bottom:28px;
    box-sizing:border-box;
}
.member-card-badge {
    display:inline-block;
    font-size:var(--fs-2xs);
    font-weight:700;
    letter-spacing:.08em;
    color:var(--zone-deep);
    background:var(--zone-soft);
    padding:3px 10px;
    border-radius:var(--r-pill);
    margin-bottom:14px;
    text-transform:uppercase;
}
.member-card-title {
    font-size:var(--fs-xl);
    font-weight:700;
    color:var(--ink);
    margin:0 0 12px;
    line-height:var(--lh-tight);
    letter-spacing:-.02em;
}
.member-card-desc {
    font-size:var(--fs-base);
    line-height:var(--lh-loose);
    color:var(--copy);
    margin:0 0 12px;
}
.member-card-action {
    margin:18px 0 24px;
}

/* 🔘 3. 인터랙티브 라디오 선택 칩 */
.choice-card-wrap {
    margin-top:24px;
    padding-top:20px;
    border-top:1px solid var(--line);
}
.choice-title {
    display:block;
    font-size:var(--fs-base);
    font-weight:700;
    color:var(--ink);
    margin-bottom:14px;
}
.choice-radio-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:12px;
}
.choice-radio-stack {
    display:flex;
    flex-direction:column;
    gap:10px;
}
.choice-radio-item {
    position:relative;
    display:block;
    cursor:pointer;
    user-select:none;
}
/* 라디오는 눈에서만 지운다. display:none 은 키보드에서 그 항목을 통째로 없앤다 —
   가입 1단계의 «회원 유형 고르기» 가 탭으로 닿지 않던 자리다 (계약서 I7).
   포커스 링은 실제로 보이는 상자가 대신 받는다 */
.choice-radio-item input {
    position:absolute;
    width:1px;
    height:1px;
    clip-path:inset(50%);
    overflow:hidden;
    white-space:nowrap;
}
.choice-radio-item input:focus-visible + .choice-radio-box {
    outline:2px solid var(--zone);
    outline-offset:2px;
}
.choice-radio-box {
    display:flex;
    align-items:center;
    gap:12px;
    padding:16px 20px;
    background:var(--paper-warm);
    border:1.5px solid var(--line);
    border-radius:var(--r-lg);
    transition:background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
    box-sizing:border-box;
}
.choice-radio-item:hover .choice-radio-box {
    border-color:var(--zone-line);
    background:var(--zone-wash);
}
.choice-radio-item input:checked + .choice-radio-box {
    background:var(--zone-wash);
    border-color:var(--zone);
    box-shadow:var(--sh-soft);
}
.radio-circle {
    width:20px;
    height:20px;
    border-radius:50%;
    border:2px solid var(--line-input);
    background:var(--paper);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    flex-shrink:0;
    transition:background-color var(--t-fast), border-color var(--t-fast), color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast), opacity var(--t-fast);
}
.choice-radio-item input:checked + .choice-radio-box .radio-circle {
    border-color:var(--zone);
    background:var(--zone);
}
.choice-radio-item input:checked + .choice-radio-box .radio-circle::after {
    content:'';
    width:6px;
    height:6px;
    border-radius:50%;
    background:var(--paper);
    display:block;
}
.radio-label,
.radio-main-text {
    font-size:var(--fs-base);
    font-weight:700;
    color:var(--ink);
    line-height:var(--lh-tight);
    transition:color var(--t-fast);
}
.choice-radio-item input:checked + .choice-radio-box .radio-label,
.choice-radio-item input:checked + .choice-radio-box .radio-main-text {
    color:var(--zone-deep);
}

/* 📖 4. 서약서 (statement_card) */
.statement-header {
    margin-bottom:20px;
    padding-bottom:14px;
    border-bottom:1px solid var(--line);
}
.statement-title {
    font-size:var(--fs-xl);
    font-weight:700;
    color:var(--ink);
    margin:0;
    letter-spacing:-.02em;
}
.statement-sub-title {
    font-size:var(--fs-lg);
    font-weight:700;
    color:var(--zone-deep);
    margin:20px 0 10px;
}
.statement-desc {
    font-size:var(--fs-md);
    line-height:var(--lh-loose);
    color:var(--copy);
    margin:0 0 14px;
}
.statement-callout {
    background:var(--paper-warm);
    border:1px solid var(--zone-line);
    border-radius:var(--r-lg);
    padding:22px 24px;
    margin:24px 0;
}
.callout-heading {
    font-size:var(--fs-md);
    font-weight:700;
    color:var(--zone-deep);
    margin:0 0 10px;
}
.statement-callout p {
    font-size:var(--fs-base);
    line-height:var(--lh-loose);
    color:var(--copy);
    margin:0 0 10px;
}
.statement-callout p:last-child {
    margin-bottom:0;
}

/* 🔘 5. 액션 버튼 공통 */
.member-action-center {
    display:flex;
    justify-content:center;
    margin-top:36px;
}
.member-action-split {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    margin-top:36px;
}
/* 단추는 ui.css 한 벌이 갖는다 — 여기 있던 btn-member-primary/outline/back/
   secondary 네 벌은 역할 이름(.btn-primary·.btn-secondary·.btn-outline) +
   수식어(.btn-pill·.btn-lg·.btn-block)로 돌아갔다. 계약서 §2.2 의 «알약형 단추는
   컴포넌트 요청이지 화면의 새 그림이 아니다» 가 이 자리를 가리키고 있었다. */

/* 🎉 6. 회원가입 완료 카드 (member_complete_card) */
.member-complete-card {
    text-align:center;
    padding:56px 40px;
}
.complete-icon-wrap {
    width:72px;
    height:72px;
    border-radius:50%;
    background:var(--zone-soft);
    color:var(--zone-deep);
    display:inline-flex;
    align-items:center;
    justify-content:center;
    margin-bottom:20px;
    box-shadow:var(--sh-soft);
}
.complete-title {
    font-size:var(--fs-2xl);
    font-weight:700;
    color:var(--ink);
    margin:0 0 16px;
    letter-spacing:-.02em;
}
.complete-msg-box {
    background:var(--paper-warm);
    border:1px solid var(--zone-line);
    border-radius:var(--r-lg);
    padding:24px 28px;
    margin:20px 0 28px;
    display:inline-block;
    text-align:center;
}
.complete-main-msg {
    font-size:var(--fs-md);
    line-height:var(--lh-loose);
    color:var(--copy);
    margin:0;
}

/* 🔐 7. 로그인 & 주문조회 (login_grid) */
.login-grid {
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(360px, 1fr));
    gap:32px;
    margin-bottom:28px;
}
.login-card-title {
    font-size:var(--fs-xl);
    font-weight:700;
    color:var(--ink);
    margin:0 0 20px;
    letter-spacing:-.02em;
}
.login-input-group {
    display:flex;
    flex-direction:column;
    gap:14px;
}
.input-field-box {
    display:flex;
    flex-direction:column;
    gap:6px;
    text-align:left;
}
.input-field-box label {
    font-size:var(--fs-sm);
    font-weight:700;
    color:var(--ink);
}
.input-field-box input {
    width:100%;
    padding:13px 16px;
    border:1px solid var(--line-input);
    border-radius:var(--r-md);
    background:var(--paper);
    font-size:var(--fs-base);
    color:var(--ink);
    box-sizing:border-box;
    transition:border-color var(--t-fast), box-shadow var(--t-fast);
}
.input-field-box input:focus {
    border-color:var(--zone);
    box-shadow:0 0 0 3px var(--zone-soft);
    outline:none;
}
/* 브라우저가 채워 준 칸 — 크롬은 제 파란 면(#e8f0fe)을 칠한다. 저장된 아이디로
   들어오는 사람에게는 그 파랑이 이 화면의 첫인상이 된다. background 는 사용자
   스타일시트라 못 이기므로, 안쪽 그림자로 종이색을 덮는 통상의 수를 쓴다. */
.input-field-box input:-webkit-autofill,
.input-field-box input:-webkit-autofill:hover,
.input-field-box input:-webkit-autofill:focus {
    -webkit-text-fill-color:var(--ink);
    -webkit-box-shadow:0 0 0 1000px var(--paper) inset;
    box-shadow:0 0 0 1000px var(--paper) inset;
    caret-color:var(--ink);
}
.input-field-box input:-webkit-autofill:focus {
    -webkit-box-shadow:0 0 0 1000px var(--paper) inset, 0 0 0 3px var(--zone-soft);
    box-shadow:0 0 0 1000px var(--paper) inset, 0 0 0 3px var(--zone-soft);
}
.btn-login-submit {
    margin-top:6px;   /* 폭은 .btn-block 이 갖는다 */
}
.login-signup-prompt {
    margin-top:28px;
    padding-top:24px;
    border-top:1px solid var(--line);
    text-align:center;
}
.signup-lead-text {
    font-size:var(--fs-base);
    line-height:1.7;
    color:var(--muted);
    margin:0 0 14px;
}
/* 문장 속에서 단추 이름을 가리키는 자리. 번역문 27개가 이 강조를
   «color:#565cde;font-size:23px;font-weight:900» 인라인 style 로 들고 있어서,
   안내 한 줄이 제 단추보다 크고 게다가 이 화면 어디에도 없는 남보라였다.
   문안은 문안만 갖게 하고(lang.php 의 <em> 은 이제 맨몸이다) 강조는 여기서 준다 —
   크기는 그대로, 무게와 영역 색으로만 도드라진다. */
.signup-lead-text em {
    font-style:normal;
    font-weight:700;
    color:var(--zone-deep);
}
.name-split-grid {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:10px;
}
.login-help-bar {
    text-align:center;
    padding:18px 24px;
    background:var(--paper-warm);
    border:1px solid var(--line);
    border-radius:var(--r-lg);
    margin-top:16px;
}
.login-help-bar p {
    display:inline-flex;
    align-items:center;
    gap:8px;
    font-size:var(--fs-sm);
    color:var(--muted);
    margin:0;
    flex-wrap:wrap;
    justify-content:center;
}
.login-help-bar a {
    color:var(--zone-deep);
    font-weight:700;
    text-decoration:underline;
}

/* 📱 회원/로그인 반응형 */
@media (max-width:767px) {
    .member-page-wrap {
        padding-top:var(--sp-2);
        padding-bottom:var(--sp-6);
    }
    .member-card {
        padding:24px 20px;
        border-radius:var(--r-lg);
    }
    .choice-radio-grid {
        grid-template-columns:1fr;
    }
    .login-grid {
        grid-template-columns:1fr;
        gap:20px;
    }
    /* 좁은 화면에서는 흐름 단추가 줄을 통째로 갖는다 */
    .member-action-center > .btn-primary,
    .member-action-center > .btn-secondary,
    .member-action-center > .btn-outline,
    .member-action-split > .btn-primary,
    .member-action-split > .btn-secondary,
    .member-action-split > .btn-outline {
        width:100%;
    }
    .member-action-split {
        flex-direction:column-reverse;
    }
}