@charset "UTF-8";
/* ==========================================================================
   회원 페이지 (로그인 / 마이페이지 / 주문조회) + 에러 페이지
   - 색상/간격은 site.css 의 토큰만 사용
   - 모바일 퍼스트, 가로 스크롤 유발 금지
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 소셜 로그인 버튼
   -------------------------------------------------------------------------- */
/* 소셜 버튼 묶음 */
.social-login {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

.social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 52px;
    padding: var(--space-2) var(--space-5);
    font-size: var(--font-size-md);
    font-weight: 700;
    border: 1px solid transparent;
    border-radius: var(--radius);
    transition: filter var(--transition), box-shadow var(--transition);
}

.social-btn:hover,
.social-btn:focus-visible {
    filter: brightness(.95);
    box-shadow: var(--shadow-sm);
}

.social-btn__icon {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
}

.social-btn__label {
    line-height: 1.2;
}

/* 카카오 공식 버튼 색 */
.social-btn--kakao {
    background: #FEE500;
    color: #191600;
}

.social-btn--kakao:hover,
.social-btn--kakao:focus-visible {
    color: #191600;
}

/* 네이버 공식 버튼 색 */
.social-btn--naver {
    background: #03C75A;
    color: #FFFFFF;
}

.social-btn--naver:hover,
.social-btn--naver:focus-visible {
    color: #FFFFFF;
}

/* --------------------------------------------------------------------------
   2. 추후 제공 메뉴 미리보기 (회색 처리) - 마이페이지 / 주문조회가 쓴다
   -------------------------------------------------------------------------- */
.member-menu {
    margin-top: var(--space-10);
}

.member-menu__note {
    margin-bottom: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.member-menu__list {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-3);
}

.member-menu__item {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: var(--space-1) var(--space-3);
    padding: var(--space-4);
    background: #f2f1ec;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    cursor: not-allowed;
}

.member-menu__label {
    grid-column: 1;
    font-size: var(--font-size-md);
    font-weight: 700;
    /* #f2f1ec 배경에서 4.5:1 이상. 비활성 느낌은 점선 보더/배경/"준비 중" 뱃지가 이미 전달한다 */
    color: var(--color-text-muted);
}

.member-menu__desc {
    grid-column: 1;
    font-size: var(--font-size-sm);
    line-height: 1.5;
}

.member-menu__badge {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    padding: 2px var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}

.member-help {
    margin-top: var(--space-6);
}

.member-help a {
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   3. 에러 페이지 (404 / 500)
   -------------------------------------------------------------------------- */
.error-page {
    max-width: 640px;
    margin-inline: auto;
    padding: var(--space-10) var(--space-4);
    text-align: center;
}

.error-page__code {
    font-size: 3.5rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: .04em;
    /* --color-primary-light 는 배경 채움용 토큰이라 본문 배경(#fbfaf6)에서 1.07:1 로 사실상 안 보인다.
       큰 텍스트 기준 3:1 을 넘도록 어둡게 조정 (#fbfaf6 대비 3.27:1) */
    color: #6f9564;
    text-shadow: 0 1px 0 var(--color-border);
}

.error-page__title {
    margin-top: var(--space-3);
    font-size: var(--font-size-2xl);
    color: var(--color-text);
}

.error-page__desc {
    margin-top: var(--space-3);
    font-size: var(--font-size-base);
    color: var(--color-text-muted);
}

.error-page__path {
    margin-top: var(--space-4);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.error-page__path-label {
    margin-right: var(--space-2);
}

.error-page__path code {
    display: inline-block;
    max-width: 100%;
    padding: 2px var(--space-2);
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    overflow-wrap: anywhere;
}

.error-page__actions {
    margin-top: var(--space-6);
}

.error-page__help {
    margin-top: var(--space-6);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.error-page__help a {
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   4. 태블릿 이상
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
    .member-menu__list {
        grid-template-columns: repeat(2, 1fr);
    }

    .error-page__code {
        font-size: 5rem;
    }
}

@media (min-width: 1024px) {
    .member-menu__list {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================================================
   2단계(회원 인증) 추가 스타일
   - 로그인 / 회원가입 / 이관회원 본인확인 폼, 마이페이지 프로필, 헤더 로그인 상태
   - 모바일 퍼스트. 375px 에서 전부 1열, 가로 스크롤 유발 금지
   ========================================================================== */

/* --------------------------------------------------------------------------
   5. 인증 화면 공통 셸
   -------------------------------------------------------------------------- */
.auth {
    max-width: 480px;
    margin-inline: auto;
}

/* 회원가입처럼 항목이 많은 폼 */
.auth--wide {
    max-width: 760px;
}

.auth__card {
    padding: var(--space-6) var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.auth__lead {
    font-size: var(--font-size-lg);
    font-weight: 700;
    color: var(--color-text);
}

.auth__sub {
    margin-top: var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.auth__section {
    margin-top: var(--space-6);
}

.auth__section-title {
    padding-bottom: var(--space-2);
    margin-bottom: var(--space-4);
    font-size: var(--font-size-md);
    border-bottom: 1px solid var(--color-border);
}

/* 상태 안내 배너 (?error, ?logout, ?joined, ?activated, ?migrated 등) */
.auth-alert {
    padding: var(--space-4);
    margin-bottom: var(--space-5);
    text-align: left;
    border: 1px solid var(--color-border);
    border-left: 4px solid var(--color-text-muted);
    border-radius: var(--radius);
    background: var(--color-cream);
}

.auth-alert__title {
    font-size: var(--font-size-base);
    font-weight: 700;
}

.auth-alert__desc {
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-text);
}

.auth-alert__actions {
    margin-top: var(--space-3);
}

.auth-alert--error {
    background: var(--color-accent-light);
    border-color: #f3d3d3;
    border-left-color: var(--color-accent);
}

.auth-alert--error .auth-alert__title {
    color: var(--color-accent);
}

.auth-alert--success {
    background: var(--color-primary-light);
    border-color: #cfe0cd;
    border-left-color: var(--color-primary);
}

.auth-alert--success .auth-alert__title {
    color: var(--color-primary-dark);
}

.auth-alert--info {
    background: var(--color-cream);
    border-color: var(--color-border);
    border-left-color: var(--color-warm);
}

.auth-alert--info .auth-alert__title {
    color: var(--color-warm-text);
}

/* --------------------------------------------------------------------------
   6. 폼 필드 (라벨 위 · 입력 아래 · 44px 이상 터치 타깃)
   -------------------------------------------------------------------------- */
.auth-form {
    display: block;
}

/* 기본 1열. 640px 이상에서 .form-grid--2 만 2열이 된다 */
.form-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 0 var(--space-4);
}

.field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin-bottom: var(--space-4);
    min-width: 0; /* grid 자식 blowout 방지 */
}

.field__label {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text);
}

.field__required {
    margin-left: 2px;
    color: var(--color-accent);
}

.field__input,
select.field__input,
textarea.field__input {
    width: 100%;
    max-width: 100%;
    min-height: 46px;
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    /* 16px 미만이면 iOS 사파리가 포커스 시 화면을 확대해 가로 스크롤이 생긴다 */
    font-size: var(--font-size-md);
    line-height: 1.4;
}

.field__input:focus {
    border-color: var(--color-primary);
}

.field__input::placeholder {
    color: #9b9b95;
}

.field__hint {
    font-size: var(--font-size-xs);
    line-height: 1.6;
    color: var(--color-text-muted);
}

/* 검증 실패 메시지 (th:errors) */
.field__error {
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-accent);
}

.field--invalid .field__label {
    color: var(--color-accent);
}

.field--invalid .field__input {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}

/* 비밀번호 규칙 상시 안내 */
.pw-rule {
    margin-top: var(--space-1);
    padding: var(--space-2) var(--space-3);
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-xs);
    line-height: 1.7;
    color: var(--color-text-muted);
}

.pw-rule li {
    position: relative;
    padding-left: var(--space-3);
}

.pw-rule li::before {
    content: "·";
    position: absolute;
    left: 3px;
}

/* 체크박스 행 (약관 동의 / 수신 동의) */
.check-row {
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    min-height: 44px;
    padding-block: var(--space-2);
}

.check-row__box {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin: 3px 0 0;
    accent-color: var(--color-primary);
}

.check-row__label {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-size-base);
    line-height: 1.5;
}

.check-row__link {
    display: inline-block;
    margin-left: var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: underline;
}

.check-group {
    padding: var(--space-2) var(--space-3);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.check-group--invalid {
    border-color: var(--color-accent);
    background: var(--color-accent-light);
}

.check-group + .check-group {
    margin-top: var(--space-3);
}

/* 카드 안 보조 문구 (소셜 준비 중 안내 등) */
.auth__note {
    margin-top: var(--space-3);
}

.auth-form__submit {
    margin-top: var(--space-5);
}

/* 폼 아래 보조 링크 */
.auth-links {
    margin-top: var(--space-6);
    padding-top: var(--space-5);
    border-top: 1px dashed var(--color-border);
}

.auth-links__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-1) var(--space-2);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-align: center;
}

.auth-links__row + .auth-links__row {
    margin-top: var(--space-2);
}

.auth-links__action {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding-inline: var(--space-1);
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: underline;
}

.auth-links__action:hover,
.auth-links__action:focus-visible {
    color: var(--color-primary-dark);
}

/* 구분선 ("또는") */
.auth-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-block: var(--space-6);
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
}

.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background: var(--color-border);
}

/* --------------------------------------------------------------------------
   7. 소셜 버튼 준비 중 상태
   -------------------------------------------------------------------------- */
.social-btn[disabled] {
    opacity: .55;
    cursor: not-allowed;
    filter: grayscale(.35);
}

.social-btn[disabled]:hover,
.social-btn[disabled]:focus-visible {
    filter: grayscale(.35);
    box-shadow: none;
}

.social-btn__badge {
    flex: 0 0 auto;
    padding: 1px var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 700;
    white-space: nowrap;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}

/* --------------------------------------------------------------------------
   8. 본인확인 진행 표시 (1/2 -> 2/2)
   -------------------------------------------------------------------------- */
.auth-steps {
    display: flex;
    align-items: stretch;
    gap: var(--space-2);
    margin-bottom: var(--space-5);
}

.auth-step {
    flex: 1 1 0;
    min-width: 0;
    padding: var(--space-2) var(--space-2);
    text-align: center;
    font-size: var(--font-size-xs);
    line-height: 1.5;
    color: var(--color-text-muted);
    background: var(--color-cream);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
}

.auth-step__no {
    display: block;
    font-weight: 700;
}

.auth-step--current {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #fff;
}

.auth-step--done {
    background: var(--color-primary-light);
    border-color: #cfe0cd;
    color: var(--color-primary-dark);
}

/* 주문내역 빈 상태 안의 버튼 묶음 */
.empty-state__actions {
    margin-top: var(--space-2);
}

/* --------------------------------------------------------------------------
   9. 마이페이지 프로필
   -------------------------------------------------------------------------- */
.profile__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-bottom: var(--space-4);
}

.profile__greeting {
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-text);
}

.profile__badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

/* 적립금 / 포인트 요약 */
.profile-summary {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-3);
    margin-bottom: var(--space-6);
}

.profile-summary__item {
    padding: var(--space-4) var(--space-3);
    text-align: center;
    background: var(--color-primary-light);
    border: 1px solid #cfe0cd;
    border-radius: var(--radius);
}

.profile-summary__label {
    font-size: var(--font-size-sm);
    color: var(--color-primary-dark);
}

.profile-summary__value {
    margin-top: var(--space-1);
    font-size: var(--font-size-xl);
    font-weight: 800;
    color: var(--color-primary-dark);
    letter-spacing: -0.02em;
}

.profile-summary__unit {
    margin-left: 2px;
    font-size: var(--font-size-sm);
    font-weight: 700;
}

/* 회원정보 표: 375px 에서 라벨 열이 너무 넓어지지 않게 조정 */
.profile-table th {
    width: 34%;
}

.profile-table td {
    overflow-wrap: anywhere;
}

.profile-table .is-empty {
    color: var(--color-text-muted);
}

/* --------------------------------------------------------------------------
   10. 헤더 로그인 상태 (util-nav / mobile-nav 확장)
   - 마크업은 fragments/header.html, 기본형은 site.css 에 있다. 여기서는 추가 상태만 정의한다.
   -------------------------------------------------------------------------- */
/* 로그인 상태에서는 유틸 항목이 4개(이름/마이페이지/로그아웃/고객센터)가 된다.
   375px 에서 긴 이름이 오면 딱 맞아떨어지는 수준이라, 넘칠 때는 줄바꿈으로 흡수한다.
   (site.css 의 .util-nav 는 nowrap 이므로 여기서 보강한다)

   전역 .util-nav 를 그대로 재정의하면 site.css(foundation-view 소유)의 동작을 이 파일이 조용히
   바꿔 버린다 — base.html 이 member.css 를 마지막에 링크하므로 전 페이지에 적용된다.
   그래서 헤더 컨테이너에 붙는 전용 수식 클래스(.util-nav--auth, fragments/header.html)로만 좁힌다. */
.util-nav--auth {
    flex-wrap: wrap;
}

.util-nav__user {
    font-size: var(--font-size-xs);
    font-weight: 700;
    color: var(--color-primary-dark);
    max-width: 10em;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.util-nav__form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

/* 로그아웃은 POST 폼 버튼이지만 다른 유틸 링크와 같은 모양이어야 한다 */
.util-nav__link--button {
    font: inherit;
    font-size: var(--font-size-xs);
    color: var(--color-text-muted);
    background: none;
    border: 0;
    cursor: pointer;
}

.mobile-nav__util-user {
    width: 100%;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-primary-dark);
}

.mobile-nav__util-form {
    display: inline-flex;
    align-items: center;
    margin: 0;
}

.mobile-nav__util-link--button {
    font: inherit;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    background: none;
    border: 0;
    cursor: pointer;
}

.mobile-nav__util-link--button:hover,
.mobile-nav__util-link--button:focus-visible {
    color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   11. 태블릿 이상 (640px+) — 여기서만 일부 필드가 2열이 된다
   -------------------------------------------------------------------------- */
@media (min-width: 640px) {
    .auth__card {
        padding: var(--space-8) var(--space-8);
    }

    .form-grid--2 {
        grid-template-columns: repeat(2, 1fr);
    }

    /* 주소·약관처럼 넓게 써야 하는 항목 */
    .form-grid--2 .field--full {
        grid-column: 1 / -1;
    }

    .profile-summary {
        grid-template-columns: repeat(2, 1fr);
    }

    .profile-table th {
        width: 26%;
    }

    .auth-step {
        font-size: var(--font-size-sm);
        padding-inline: var(--space-4);
    }
}