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

/* --------------------------------------------------------------------------
   1. 소셜 로그인 버튼
   -------------------------------------------------------------------------- */
/* 아이디 로그인과 간편 로그인 사이의 가름선.
   위가 끝났다는 뜻이 아니라 "또 다른 길도 있다" 는 뜻이라,
   선을 가운데서 끊고 그 자리에 글자를 둔다. 통짜 선이면 여기서 끝난 줄 아신다. */
.auth-or {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-6);
}

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

.auth-or__text {
    flex: 0 0 auto;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text-muted);
}

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

/* 가름선이 이미 자리를 벌려 두었다. 버튼 묶음까지 또 벌리면 사이가 뜬다. */
.auth-or + .social-login {
    margin-top: var(--space-4);
}

.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;
}

/*
  네이버 버튼.

  ★ 공식 원색(#03C75A)에 흰 글자는 대비 2.25:1 로 WCAG AA 에 못 미친다.
    로그인 화면에서 가장 큰 버튼 둘 중 하나인데, 밖에서 보면 글자가 날아간다.
    색상은 그대로 두고 명도만 내린 토큰을 쓴다 — 근거는 site.css 의 --color-naver-bg 주석.
    하드코딩하지 마라. 두 파일이 갈라지면 한쪽만 AA 를 지키게 된다.
*/
.social-btn--naver {
    background: var(--color-naver-bg);
    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);
    /* 서리빛 바닥보다 한 단 어둡게. 예전 값(#f2f1ec)은 따뜻한 크림이라
       찬 바닥 위에서 혼자 노랗게 떴다. */
    background: #f3f4f6;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius);
    color: var(--color-text-muted);
    cursor: not-allowed;
    /* ★ padding 을 칸이 아니라 <링크>가 갖는다. 칸에 두면 그 여백은 링크 밖이라
       테두리 근처를 눌렀을 때 아무 일도 일어나지 않는다 — 누를 수 있어 보이는데 안 눌린다. */
    padding: 0;
}

/*
  칸 전체를 덮는 링크. 누를 수 있는 넓이가 곧 이 칸의 넓이다.
  ★ 안쪽 여백을 여기서 준다(위 ★ 참고). grid 로 두 줄을 쌓아 원래 배치를 그대로 지킨다.
*/
.member-menu__link {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    color: inherit;
    text-decoration: none;
    border-radius: inherit;
    /* ★ 칸이 2열 그리드('준비 중' 뱃지 자리)라, 그냥 두면 링크가 1열에만 들어가
       오른쪽 끝 12px(열 간격)이 링크 <밖>으로 남는다. 눌러도 안 눌리는 띠가 생긴다.
       두 열을 통째로 차지하게 해 칸을 끝까지 덮는다. */
    grid-column: 1 / -1;
}

/* ★ .card2 처럼 overflow:hidden 인 부모가 아니므로 아웃라인이 잘리지 않는다.
   그래도 안쪽으로 그려 칸 테두리와 겹쳐 보이게 한다. */
.member-menu__link:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: -2px;
}

/* '준비 중' 칸(링크 없음)은 여백을 스스로 가져야 한다. */
.member-menu__item:not(.member-menu__item--ready) {
    padding: var(--space-4);
}

/* 실제로 동작하는 항목. 나머지가 "준비 중" 회색이라 이것만 살아 있게 보여야 한다.
   점선·회색·not-allowed 를 전부 되돌린다 — 하나라도 남으면 눌러도 되는지 헷갈린다. */
.member-menu__item--ready {
    background: var(--color-surface);
    border-style: solid;
    border-color: var(--color-border);
    color: var(--color-text);
    cursor: default;
}

.member-menu__item--ready:hover {
    border-color: var(--color-primary);
}

.member-menu__item--ready .member-menu__label {
    color: var(--color-primary-dark);
    font-weight: 700;
    text-decoration: none;
}

/* ★ 선택자가 링크 <안의> 라벨로 바뀌었다. 예전에는 라벨 자체가 <a> 였다 —
   옛 선택자를 그대로 두면 아무것도 걸리지 않아 hover 표시가 조용히 사라진다.
   (상품 카드를 통째로 링크로 바꿨을 때 같은 자리에서 한 번 겪었다) */
.member-menu__link:hover .member-menu__label,
.member-menu__link:focus-visible .member-menu__label {
    text-decoration: underline;
    text-underline-offset: 4px;
}

.member-menu__label {
    grid-column: 1;
    font-size: var(--font-size-md);
    font-weight: 700;
    /* #E3E6E1 배경에서 4.70: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 {
    /* 문장 속 링크지만 막힌 손님이 닿는 마지막 창구(카카오톡 채널 · 전화)다. 누르는 자리를 44px 로 —
       위아래 여백을 음수 여백으로 되돌려 줄 간격은 그대로 둔다. */
    display: inline-block;
    padding-block: 12px;
    margin-block: -12px;
    font-weight: 700;
    color: var(--color-primary);
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   2-1. 이메일 · 아이디 찾기 (휴대폰 인증) — member/find-account*.html
   -------------------------------------------------------------------------- */

/* 인증번호 칸은 여섯 자리를 크게, 글자 사이를 벌려 한 자리씩 읽히게 */
.field__input--code {
    font-size: var(--font-size-lg);
    font-weight: 700;
    letter-spacing: .3em;
    font-variant-numeric: tabular-nums;
}

.find-account__again {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

.find-account__again form {
    margin: 0;
}

.found-list {
    display: grid;
    gap: var(--space-4);
    margin: var(--space-5) 0 0;
    padding: 0;
    list-style: none;
}

.found-item {
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.found-item__rows {
    display: grid;
    gap: var(--space-2);
    margin: 0 0 var(--space-4);
}

.found-item__row {
    display: grid;
    grid-template-columns: 6.5em 1fr;
    gap: var(--space-3);
    align-items: baseline;
}

.found-item__row dt {
    color: var(--color-text-muted);
    font-weight: 700;
}

.found-item__row dd {
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;   /* 긴 이메일이 칸을 뚫지 않게 */
}

/* 손님이 찾으러 온 값 — 크고 굵게 */
.found-item__id,
.found-item__email {
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-text);
}

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

.find-account__reset {
    scroll-margin-top: calc(var(--header-stack) + var(--space-4));
}

.find-account__reset .found-item__id,
.find-account__reset .check-row__label {
    overflow-wrap: anywhere;
}

/* --------------------------------------------------------------------------
   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 는 배경 채움용 토큰이라 본문 배경에서 사실상 안 보인다.
      큰 텍스트 기준 3:1 을 넘도록 어둡게 조정한 값이다.

      ★ 바닥이 서리빛(#ECEFEA)으로 바뀌면서 예전 값(#6f9564)이 2.94:1 로 내려가
        기준을 밑돌았다. 토큰을 안 쓰고 박아 둔 색은 바닥이 움직일 때 같이 안 움직인다.
        지금 값은 서리빛 대비 3.73:1.
    */
    color: #5E8353;
    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-tint);
    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-tint);
}

.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: #fecaca;
    border-left-color: var(--color-primary);
}

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

.auth-alert--info {
    background: var(--color-tint);
    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);
}

/*
  ★ 46px 이었다. --tap-min 은 48 이다.
    이 사이트에서 손가락이 가장 오래 머무는 과녁이 여기다 — 이름·주소·전화번호를
    채우는 칸이고, 빗나가면 엉뚱한 칸에 글자가 들어간다. 2px 이 사소해 보이지만
    화면에 이런 칸이 열 개 넘게 이어지는 자리다.

  ★★ 회원가입·주문서는 .form-control 이 아니라 이 .field__input 을 쓴다.
    site.css 의 .form-control 만 고치고 여기를 빠뜨리면 <고쳤다고 믿는데
    정작 주문서는 그대로다>. 입력칸 계열이 둘이라는 것을 잊지 마라.
*/
.field__input,
select.field__input,
textarea.field__input {
    width: 100%;
    max-width: 100%;
    min-height: var(--tap-min);
    padding: var(--space-2) var(--space-3);
    background: var(--color-surface);
    border: 1px solid var(--color-border-strong);
    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);
}

/* 입력칸 + 버튼을 한 줄에 놓는다(우편번호 + 주소 검색).
   버튼은 줄어들지 않게 고정하고 입력칸이 남는 폭을 먹는다.
   375px 에서도 "주소 검색" 다섯 글자가 접히지 않는 최소 폭을 준다. */
.field__row {
    display: flex;
    gap: var(--space-2);
    align-items: stretch;
}

.field__row .field__input {
    flex: 1 1 auto;
    min-width: 0;
}

.field__row-btn {
    flex: 0 0 auto;
    /* 옆 입력칸과 같은 높이로 선다. 둘이 다르면 줄이 어긋나 보인다. */
    min-height: var(--tap-min);
    white-space: nowrap;
}

.field__row-btn[disabled] {
    opacity: .6;
    cursor: progress;
}

/* 주소 검색 레이어.
   daum.Postcode 의 기본 .open() 은 새 창이라 팝업 차단에 걸리고 모바일에서 특히 나쁘다.
   그래서 .embed() 로 이 레이어 안에 띄운다(site.js 의 openPostcodeModal). */
.postcode-modal {
    position: fixed;
    inset: 0;
    /*
      ★ 모든 창 위다(2026-09-24 올림 — 농원주 요청: "주소입력창이뜨면 z-index가 낮아서 클릭이안돼").
        60 이었을 때는 상품 상세의 주문서 창(260) · 결제수단 창(280) 뒤에 깔려 눌리지 않았다.
        층 순서: 머리 40 · 상담 독 50 · 구매바 60 · 모바일 메뉴 130 · 주문서 창 260 · 결제수단 창 280
                · 알림 300 · <주소 검색 400>. 토스 · 카카오페이 결제창은 이보다 훨씬 위다.
    */
    z-index: 400;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-4);
    background: rgb(12 10 9 / .5);
}

.postcode-modal__panel {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 500px;
    max-height: 90vh;
    overflow: hidden;
    background: #fff;
    border-radius: var(--radius);
    box-shadow: 0 20px 25px -5px rgb(12 10 9 / .3);
}

.postcode-modal__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
}

.postcode-modal__title {
    font-weight: 700;
}

.postcode-modal__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    font-size: 1rem;
    color: var(--color-text-muted);
    background: none;
    border: 0;
    border-radius: 50%;
    cursor: pointer;
}

.postcode-modal__close:hover,
.postcode-modal__close:focus-visible {
    color: var(--color-text);
    background: var(--color-primary-light);
}

/* 임베드된 검색 UI 가 들어오는 칸. 높이는 onresize 콜백이 갱신한다. */
.postcode-modal__body {
    height: 460px;
    overflow: auto;
}

/* 검증 실패 메시지 (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-tint);
    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;
}

/* 체크박스 행 (약관 동의 / 수신 동의) */
/* 44px → --tap-min 으로 올렸다 (2026-09-20). 약관 동의 체크 줄. 빗나가면 동의가 안 되고, 왜 다음으로 못 가는지 화면에 안 드러난다. */
.check-row {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--tap-min);
    padding-block: var(--space-2);
}

/*
  ★ 20px 이었다. 동의 체크는 <빗나가면 다음으로 못 가는> 칸인데,
    왜 못 가는지는 화면에 드러나지 않는다 — 어르신은 여기서 전화를 거신다.
    네모를 24px 로 키운다. 이보다 더 키우면 OS 기본 체크 모양이 흐려진다.
*/
.check-row__box {
    flex: 0 0 auto;
    width: 24px;
    height: 24px;
    margin: 0;
    accent-color: var(--color-primary);
}

/*
  ★ 줄은 48px 인데 라벨이 26px 이었다 — 줄 위아래 22px 은 눌러도 아무 일이 없었다.
    라벨에 for= 가 걸려 있으므로 라벨이 곧 과녁이다. 줄 높이만큼 채운다.

  ★★ 안쪽 <a>(약관 보기)는 눌러도 체크가 토글되지 않는다. 브라우저가
    label 안의 상호작용 요소에는 전달을 막는다 — 실제로 눌러 확인했다.
    그러니 링크를 라벨 밖으로 빼낼 이유는 없다.
*/
.check-row__label {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    min-height: var(--tap-min);
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--font-size-base);
    line-height: 1.5;
    cursor: pointer;
}

/*
  ★ 23px 이었다. 본문 흐름 속 인라인 링크라 site.css 가 적어 둔 예외에 가깝지만,
    이건 <법적 문서를 여는 링크> 다. 안쪽 여백으로 과녁만 넓히고
    같은 크기의 음수 여백으로 줄 높이를 되돌린다 — 보이는 모양은 그대로다.
*/
.check-row__link {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    margin-block: calc((var(--tap-min) - 1.5em) / -2);
    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);
}

/* 44px → --tap-min 으로 올렸다 (2026-09-20). 회원가입 · 비밀번호 설정으로 가는 링크. */
.auth-links__action {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap-min);
    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-tint);
    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: #fecaca;
    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-social {
    margin-bottom: var(--space-6);
    padding: var(--space-4);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
}

.profile-social__title {
    margin: 0 0 var(--space-1);
    font-size: var(--font-size-md);
    font-weight: 700;
    color: var(--color-text);
}

.profile-social__desc {
    margin: 0 0 var(--space-3);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.profile-social__alert {
    margin: 0 0 var(--space-3);
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
    border: 1px solid var(--color-border);
}

.profile-social__alert--ok {
    border-color: #b7dcc4;
    background: #eef8f1;
    color: var(--color-primary-dark);
}

.profile-social__alert--error {
    border-color: #e8bcb9;
    background: #fdeeed;
    color: var(--color-accent-dark);
}

.profile-social__list {
    display: grid;
    gap: var(--space-2);
    margin: 0;
    padding: 0;
    list-style: none;
}

/* 제공자 이름은 왼쪽에 고정하고, 상태(연결됨/버튼)를 오른쪽 끝에 맞춘다.
   줄이 여럿일 때 버튼 세로줄이 어긋나지 않아 훑기 쉽다. */
.profile-social__item {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-2) 0;
    border-top: 1px solid var(--color-border);
}

.profile-social__item:first-child {
    border-top: 0;
}

.profile-social__name {
    flex: 1 1 auto;
    font-weight: 700;
    color: var(--color-text);
}

.profile-social__item form {
    margin: 0;
    flex: 0 0 auto;
}

/* 적립금 / 포인트 요약 */
.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 #fecaca;
    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);
    }
}

/* --------------------------------------------------------------------------
   간편가입 동의(수집항목)
   소셜 버튼 바로 위에 붙는다. 버튼과 떨어져 있으면 "무엇에 동의하고 누르는지" 가 흐려진다.
   -------------------------------------------------------------------------- */
.social-login-form {
    margin-top: var(--space-4);
}

.consent {
    margin: 0 0 var(--space-4);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    background: var(--color-surface);
}

.consent__legend {
    padding: 0 var(--space-2);
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-primary-dark);
}

.consent .check-row + .check-row {
    margin-top: var(--space-2);
}

.consent .field__hint {
    margin-top: var(--space-3);
    padding-top: var(--space-3);
    border-top: 1px dashed var(--color-border);
}

/* --------------------------------------------------------------------------
   컴팩트 동의 상자 (로그인 화면의 간편가입 동의)

   로그인 폼 바로 아래에 놓이는 자리라 세로로 길면 소셜 버튼이 화면 밖으로 밀린다.
   줄 사이 여백과 바깥 여백만 줄이고, <각 줄의 높이(44px)는 건드리지 않는다> —
   손가락으로 누르는 체크박스라 여기서 아끼면 안 된다. 라벨이 줄 전체를 덮으므로
   실제로 누를 수 있는 넓이는 줄 하나 전체다.
   -------------------------------------------------------------------------- */
.consent--compact {
    padding: var(--space-2) var(--space-3) var(--space-3);
}

/* 줄마다 붙던 간격을 없애고 구분선으로 나눈다. 여백보다 선이 자리를 덜 먹는다. */
.consent--compact .check-row + .check-row {
    margin-top: 0;
    border-top: 1px solid var(--color-border);
}

.consent--compact .check-row__label {
    font-size: var(--font-size-sm);
}

/* 전체 동의는 나머지를 대표하는 줄이다. 조금 더 굵게 두고 아래를 진한 선으로 끊는다. */
.check-row--all {
    border-bottom: 2px solid var(--color-border);
}

.check-row--all .check-row__label {
    font-size: var(--font-size-base);
}

.check-row__sub {
    margin-left: var(--space-2);
    font-size: var(--font-size-xs);
    font-weight: 400;
    color: var(--color-text-muted);
}

.consent--compact .field__hint {
    margin-top: var(--space-2);
    padding-top: var(--space-2);
    font-size: var(--font-size-xs);
    line-height: 1.6;
}

/* --------------------------------------------------------------------------
   동의 화면에서 로그인으로 돌아가는 길

   ★ 로그인 화면은 2026-09-20 부터 한 장이다. 아이디 → 네이버 → 카카오가
     한 화면에 서므로 .auth-social__* / .auth-id* 는 쓰일 곳이 없어 걷어냈다.
     .auth-switch 만 남는다 — social-consent.html 이 아직 쓴다.
   -------------------------------------------------------------------------- */

.auth-switch {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-4);
    margin-top: var(--space-4);
}

.auth-switch__link {
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
    text-decoration: underline;
}

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

/* --------------------------------------------------------------------------
   간편가입 동의를 한 줄로 좁힌다

   ★ 문제: 제목과 카카오 버튼 사이에 체크박스 다섯 줄이 벽처럼 서 있었다.
     어르신 눈에는 "읽어야 할 글" 이 다섯 덩어리로 보이고, 거기서 멈춘다.

   ★ 왜 <details> 로 접지 않는가
     아래 필수 항목 셋은 required 다. 숨겨진 required 가 있으면 브라우저가
     "not focusable" 로 제출을 <조용히> 거부한다 — 버튼을 눌러도 아무 일이
     일어나지 않고, 원인이 화면에 전혀 드러나지 않는다.

   ★ 왜 서버 검증만 믿고 required 를 떼지 않는가
     떼면 동의 없이 카카오까지 갔다가 되돌아온다. 첫 방문자에게 왕복 한 번을
     통째로 버리게 하는 셈이라 지금보다 나쁘다.

   그래서 <전체 동의>를 버튼만큼 키우고, 나머지 넷은 작게 눌러 둔다.
   site.js 의 initConsentAll 이 전체 동의 하나로 넷을 다 켜 주므로 실제 동작은 한 번 누르기다.
   -------------------------------------------------------------------------- */
.consent--compact .check-row--all {
    min-height: 52px;
    margin-bottom: var(--space-2);
    padding: 0 var(--space-3);
    background: var(--color-primary-light);
    border-radius: var(--radius-sm);
}

.consent--compact .check-row--all .check-row__box {
    width: 22px;
    height: 22px;
}

.consent--compact .check-row--all .check-row__label {
    font-size: var(--font-size-md);
}

/* 세부 항목은 "확인용" 이지 "읽고 판단할 것" 이 아니다.
   법적으로 보여야 하므로 지우지 않되, 시선의 무게를 낮춘다. */
.consent--compact .consent__items {
    padding-left: var(--space-2);
    border-left: 2px solid var(--color-border);
}

/* 32px 이었다. 좁게 보이는 동의 목록이라도 누르는 줄은 --tap-min 을 지킨다. */
.consent--compact .consent__items .check-row {
    min-height: var(--tap-min);
}

.consent--compact .consent__items .check-row__label {
    font-size: var(--font-size-sm);
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* 링크는 무채색으로 죽이지 않는다 — 실제로 눌러서 읽어야 하는 곳이다. */
.consent--compact .consent__items .check-row__link {
    color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   내 쿠폰함

   ★ 못 쓰는 쿠폰을 목록에서 빼지 않고 흐리게 둔다. 사라지면 손님은 "쿠폰이 없어졌다"
     고 전화하는데, 그 전화를 받는 사람은 농원주다.
   ★★ 흐리게 하되 글자는 읽히게 둔다(opacity 로 통째로 죽이지 않는다) —
     흐린 회색 글자는 이 사이트의 주 사용자층에게 안 보이는 것과 같다.
   -------------------------------------------------------------------------- */
.coupon-list {
    list-style: none;
    margin: var(--space-6) 0 0;
    padding: 0;
    display: grid;
    gap: var(--space-4);
}

.coupon-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    padding: var(--space-5);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.coupon-card--dim {
    background: var(--color-tint);
}

.coupon-card__amount strong {
    display: block;
    font-size: var(--font-size-xl);
    font-weight: 700;
    color: var(--color-accent);          /* 익은 사과 레드 — 돈이 움직이는 값이다 */
    letter-spacing: -0.02em;
}

.coupon-card--dim .coupon-card__amount strong {
    color: var(--color-text);            /* 못 쓰는 쿠폰에 '돈 색'을 쓰지 않는다 */
}

.coupon-card__cond {
    display: block;
    margin-top: var(--space-1);
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.coupon-card__name {
    margin: 0;
    font-size: var(--font-size-base);
    font-weight: 700;
}

.coupon-card__until {
    margin: var(--space-1) 0 0;
    font-size: var(--font-size-sm);
    color: var(--color-text-muted);
}

.coupon-card__state {
    margin: 0;
    font-size: var(--font-size-sm);
    font-weight: 700;
    color: var(--color-text);
}

.coupon-card__state--ok {
    color: var(--color-primary);
}

@media (min-width: 640px) {
    .coupon-card {
        grid-template-columns: 12rem 1fr auto;
        align-items: center;
        gap: var(--space-5);
    }
}

/* 비밀번호 재설정 안내. ★ 본문 크기 그대로 둔다 — 이 글이 필요한 분은 대개 화면이 잘 안 보이는 분이다. */
.auth-form__help {
    margin: var(--space-4) 0 0;
    text-align: center;
    font-size: var(--font-size-md);
    line-height: var(--line-height-base);
}
.auth-form__help a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* ==========================================================================
   회원(로그인 · 가입 · 마이페이지 · 주문내역) — 목업 테마 (2026-09-24)

   목업 310~358 행 로그인/가입 창: 흰 둥근 카드 위쪽에 탭 두 개(지금 화면은 빨강 밑줄).
   목업 360~388 · 1045~1064 행 마이페이지: 회색 프로필 상자, 주문마다 흰 카드(날짜 · 상태 알약 · 품목 · 빨강 금액).
   ========================================================================== */

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

.auth-tabs {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin-bottom: var(--space-6);
    border-bottom: 1px solid var(--color-border);
}

.auth-tabs__link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: var(--tap-min);
    margin-bottom: -1px;
    border-bottom: 3px solid transparent;
    color: var(--color-text-muted);
    font-size: var(--font-size-md);
    font-weight: 700;
    text-decoration: none;
    transition: color var(--transition), border-color var(--transition);
}

.auth-tabs__link:hover,
.auth-tabs__link:focus-visible {
    color: var(--color-text);
}

.auth-tabs__link.is-active {
    border-bottom-color: var(--color-primary);
    color: var(--color-primary-dark);
}

.auth-form__submit {
    min-height: 56px;
    font-size: var(--font-size-md);
    box-shadow: var(--shadow);
}

/* 마이페이지 프로필: 회색 상자 */
.profile {
    padding: var(--space-5);
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.profile-summary__item {
    background: var(--color-surface);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

.profile-summary__value {
    color: var(--color-primary);
}

.member-menu__link {
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: box-shadow var(--transition), border-color var(--transition);
}

.member-menu__link:hover,
.member-menu__link:focus-visible {
    border-color: var(--color-primary);
    box-shadow: var(--shadow);
}

/* 주문내역: 주문마다 흰 카드 */
.order-card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.order-card__head {
    border-bottom: 1px solid var(--color-border);
}

.order-card__foot strong,
.order-card__amount {
    color: var(--color-primary);
}

@media (min-width: 1024px) {
    .member-menu__list {
        gap: 24px;
    }
}