/* ============================================================
   판매왕 공개 화면 최종값 (10단계): 랜딩·유형 선택·로그인·가입·비밀번호 찾기·약관·오류
   - 대시보드와 같은 카드·버튼·입력·헤더 모양을 쓴다. 값은 sm-ui.css 의 --sm-* 와 common.css 의 --tp-*.
   - 각 JSP 인라인 <style> 뒤(</head> 바로 앞)에서 불러온다. body.sm-ds-public 범위에만 적용한다.
   - JS 가 켜고 끄는 display(.show, .hidden, style.display)는 건드리지 않는다.
   ============================================================ */

/* ---------- 카드: 16px + 옅은 테두리 그림자 ---------- */
body.sm-ds-public .auth-card,
body.sm-ds-public .st-option,
body.sm-ds-public .ld-preview,
body.sm-ds-public .ld-flow-card,
body.sm-ds-public .ld-cta-band,
body.sm-ds-public.sm-info-page .terms-container {
    border: 0;
    border-radius: var(--tp-radius-xl);
    box-shadow: 0 0 0 1px var(--sm-card-ring), var(--tp-shadow-sm);
}
html.is-embedded body.sm-ds-public.sm-info-page .terms-container {
    border-radius: 0;
    box-shadow: none;
}

/* 누를 수 있는 카드(유형 선택): 대시보드 카드처럼 살짝 뜬다 */
body.sm-ds-public .st-option {
    transition: transform 200ms ease, box-shadow 200ms ease;
}
@media (hover: hover) {
    body.sm-ds-public .st-option:hover {
        transform: translateY(var(--sm-lift-y));
        box-shadow: 0 0 0 1px var(--tp-border-hover), var(--sm-shadow-lift);
    }
}
body.sm-ds-public .st-option:active { transform: none; }
body.sm-ds-public .st-option:focus-visible {
    outline: none;
    box-shadow: var(--sm-focus-ring), var(--tp-shadow-sm);
}

/* ---------- 주 버튼: 브랜드 그림자 ---------- */
body.sm-ds-public .auth-btn,
body.sm-ds-public .otp-send-btn,
body.sm-ds-public .otp-verify-btn,
body.sm-ds-public .pr-confirm-btn,
body.sm-ds-public .ld-btn--primary,
body.sm-ds-public.sm-info-page .btn-close,
body.sm-ds-public.sm-info-page .btn-back,
body.sm-ds-public.sm-info-page .error-container .btn {
    box-shadow: var(--sm-shadow-brand);
    transition: background-color 150ms ease, box-shadow 200ms ease;
}
body.sm-ds-public .auth-btn:hover:not(:disabled),
body.sm-ds-public .otp-send-btn:hover:not(:disabled),
body.sm-ds-public .otp-verify-btn:hover:not(:disabled),
body.sm-ds-public .pr-confirm-btn:hover:not(:disabled),
body.sm-ds-public .ld-btn--primary:hover,
body.sm-ds-public.sm-info-page .btn-close:hover,
body.sm-ds-public.sm-info-page .btn-back:hover,
body.sm-ds-public.sm-info-page .error-container .btn:hover {
    box-shadow: var(--sm-shadow-brand-hover);
}
body.sm-ds-public .auth-btn:disabled,
body.sm-ds-public .otp-send-btn:disabled,
body.sm-ds-public .otp-verify-btn:disabled,
body.sm-ds-public .pr-confirm-btn:disabled { box-shadow: none; }
/* 모바일 구직자 가입: 화면 아래 고정 버튼은 본문 위에 떠 있으므로 기존 띄움 그림자를 유지한다 */
@media (max-width: 480px) {
    body.sm-ds-public .sg-submit,
    body.sm-ds-public .sg-submit:hover:not(:disabled) {
        box-shadow: 0 8px 24px rgba(15, 23, 42, 0.18), 0 4px 12px var(--role-focus-ring, rgba(15, 118, 110, 0.25));
    }
}
/* 헤더의 작은 시작하기 버튼은 그림자 없이 */
body.sm-ds-public .ld-header-cta,
body.sm-ds-public .ld-header-cta:hover { box-shadow: none; }

/* ---------- 포커스: 2px 브랜드 링 ---------- */
body.sm-ds-public .auth-btn:focus-visible,
body.sm-ds-public .auth-btn-ghost:focus-visible,
body.sm-ds-public .em-btn-back:focus-visible,
body.sm-ds-public .otp-send-btn:focus-visible,
body.sm-ds-public .otp-verify-btn:focus-visible,
body.sm-ds-public .pr-confirm-btn:focus-visible,
body.sm-ds-public .st-signup-pill:focus-visible,
body.sm-ds-public .ld-btn:focus-visible,
body.sm-ds-public .ld-text-btn:focus-visible,
body.sm-ds-public .ld-mode button:focus-visible,
body.sm-ds-public .role-select-btn:focus-visible,
body.sm-ds-public input[type="checkbox"]:focus-visible,
body.sm-ds-public.sm-info-page .btn-close:focus-visible,
body.sm-ds-public.sm-info-page .btn-back:focus-visible,
body.sm-ds-public.sm-info-page .error-container .btn:focus-visible,
body.sm-ds-public.sm-info-page .sm-info-head__brand:focus-visible {
    outline: none;
    box-shadow: var(--sm-focus-ring);
}

/* ---------- 입력: 회색 테두리 → 올리면 진하게 → 포커스 시 2px 브랜드 ---------- */
body.sm-ds-public .auth-input {
    transition: border-color 150ms ease, box-shadow 150ms ease;
}
body.sm-ds-public .auth-input:hover:not(:focus):not(:disabled) { border-color: var(--tp-border-hover); }
body.sm-ds-public .auth-input:focus {
    outline: none;
    border-color: var(--sm-brand-500);
    box-shadow: 0 0 0 1px var(--sm-brand-500);
}
body.sm-ds-public .auto-login-extra select:focus {
    border-color: var(--sm-brand-500);
    box-shadow: 0 0 0 1px var(--sm-brand-500);
}

/* ---------- 머리: 흰색 80% + 흐림 (대시보드 헤더와 같음) ---------- */
body.sm-ds-public .ld-header.is-scrolled,
body.sm-ds-public.sm-info-page .sm-info-head {
    background: rgba(255, 255, 255, 0.8);
    border-bottom-color: rgba(226, 232, 240, 0.8);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* ---------- 랜딩 구직자/구인자 전환: 대시보드 .sm-ui-seg 와 같은 모양 ---------- */
body.sm-ds-public .ld-mode {
    padding: 4px;
    border-radius: var(--tp-radius-lg);
    background: var(--tp-surface-muted);
}
body.sm-ds-public .ld-mode button {
    border-radius: var(--tp-radius-md);
    color: var(--tp-text-muted);
    transition: background-color 150ms ease, color 150ms ease, box-shadow 150ms ease;
}
body.sm-ds-public .ld-mode button:hover { color: var(--tp-text-default); }
body.sm-ds-public .ld-mode button[aria-pressed="true"] {
    background: var(--tp-surface);
    color: var(--tp-text-strong);
    box-shadow: var(--tp-shadow-sm);
}

/* ---------- 로그인 역할 선택 모달 (인라인 스타일이라 !important) ---------- */
body.sm-ds-public #roleSelectModal { background-color: var(--tp-overlay) !important; }
body.sm-ds-public #roleSelectModal > div {
    border: 0 !important;
    border-radius: var(--tp-radius-xl) !important;
    box-shadow: var(--sm-shadow-modal) !important;
}
body.sm-ds-public .role-select-btn {
    border-color: var(--tp-border-default) !important;
    border-radius: var(--tp-radius-lg) !important;
}
body.sm-ds-public .role-select-btn:hover:not(:disabled) {
    border-color: var(--tp-color-accent-border) !important;
    background: var(--tp-color-accent-subtle) !important;
}

@media (prefers-reduced-motion: reduce) {
    body.sm-ds-public .st-option,
    body.sm-ds-public .ld-mode button { transition: none; }
    body.sm-ds-public .st-option:hover { transform: none; }
}