/*
 * 판매왕 공개 화면(랜딩·로그인·회원가입·유형 선택·비밀번호 찾기) 시리즈 디자인 오버라이드.
 * - body.sm-ds-public 범위 안에서만 적용한다.
 * - 강조색은 판매왕 틸 하나(구직자/구인자 공통). 근무왕 인디고는 근무왕 연동 안내에만 쓴다.
 * - JS가 켜고 끄는 display(.show, .hidden, style.display)는 건드리지 않는다.
 */

/* ── 역할 변수: 구직자·구인자 모두 판매왕 틸, 그라디언트 없음 ── */
body.sm-ds-public,
body.sm-ds-public[data-role] {
    --role-primary: var(--tp-color-accent);
    --role-primary-dark: var(--tp-color-accent-hover);
    --role-sub: var(--tp-status-success-fg);
    --role-sub-dark: var(--tp-status-success-fg);
    --role-accent: var(--tp-color-accent);
    --role-gradient: var(--tp-color-accent);
    --role-accent-bar: none;
    --role-logo-grad: none;
    --role-light: var(--tp-color-accent-subtle);
    --role-border: var(--tp-color-accent-border);
    --role-focus-ring: rgba(15, 118, 110, 0.18);
    --role-badge-bg: var(--tp-color-accent-subtle);
    --role-badge-text: var(--tp-color-accent);
    --role-badge-border: transparent;

    background: var(--tp-canvas);
    color: var(--tp-text-default);
    word-break: keep-all;
    overflow-wrap: break-word;
}

/* 배경 장식 제거 */
body.sm-ds-public .auth-blob,
body.sm-ds-public .st-blob { display: none; }

/* ── 카드 ── */
body.sm-ds-public .auth-card {
    border: 1px solid var(--tp-border-default);
    border-radius: var(--tp-radius-xl);
    box-shadow: var(--tp-shadow-xs);
    animation: none;
}
body.sm-ds-public .auth-card::before { content: none; }

/* ── 브랜드: 시리즈 마크 + 워드마크 ── */
body.sm-ds-public .auth-logo,
body.sm-ds-public .st-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: var(--tp-text-strong);
    background: none;
    -webkit-text-fill-color: currentColor;
    font-size: 20px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    animation: none;
}
body.sm-ds-public .auth-logo { margin-bottom: 14px; }
body.sm-ds-public .st-logo { margin-bottom: 20px; }

body.sm-ds-public .auth-role-badge {
    padding: 4px 10px;
    border: 0;
    font-size: 12px;
    letter-spacing: 0;
}

/* ── 제목 ── */
body.sm-ds-public .login-title,
body.sm-ds-public .pr-title,
body.sm-ds-public .sg-title,
body.sm-ds-public .em-title {
    color: var(--tp-text-strong);
    font-weight: 800;
    letter-spacing: -0.03em;
}
body.sm-ds-public .sg-sub,
body.sm-ds-public .em-sub,
body.sm-ds-public .pr-desc {
    color: var(--tp-text-muted);
}
body.sm-ds-public .pr-header-icon {
    background: var(--tp-color-accent-subtle);
    box-shadow: none;
}
body.sm-ds-public .pr-header-icon i,
body.sm-ds-public .pr-header-icon svg {
    color: var(--tp-color-accent);
}
body.sm-ds-public .sg-divider,
body.sm-ds-public .pr-divider {
    background: var(--tp-border-subtle);
}

/* ── 입력 ── */
body.sm-ds-public .auth-form-label,
body.sm-ds-public .pr-label {
    color: var(--tp-text-default);
    font-size: var(--tp-font-size-body);
    font-weight: 600;
}
body.sm-ds-public .auth-form-hint,
body.sm-ds-public .em-hint,
body.sm-ds-public .pr-helper {
    color: var(--tp-text-muted);
    font-size: var(--tp-font-size-micro);
}
body.sm-ds-public .auth-input {
    min-height: 48px;
    border-color: var(--tp-border-default);
    border-radius: var(--tp-radius-lg);
    color: var(--tp-text-strong);
}
body.sm-ds-public .auth-input::placeholder { color: var(--tp-text-subtle); }
body.sm-ds-public .auth-input:focus {
    border-color: var(--tp-color-accent);
    box-shadow: var(--tp-focus-ring);
}
body.sm-ds-public .auth-input.verified {
    border-color: var(--tp-status-success-fg);
    background: var(--tp-status-success-bg);
}
/* 체크박스: 근무왕과 같은 20px·둥근 모서리, 테두리는 배경 대비 3:1 이상 */
body.sm-ds-public input[type="checkbox"] {
    --cb-color: var(--tp-color-accent);
    -webkit-appearance: none;
    appearance: none;
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 1.5px solid var(--tp-border-strong);
    border-radius: var(--tp-radius-sm);
    background: var(--tp-surface) center / 14px 14px no-repeat;
    cursor: pointer;
    transition: background-color var(--tp-motion-fast), border-color var(--tp-motion-fast);
}
body.sm-ds-public input[type="checkbox"]:hover { border-color: var(--cb-color); }
body.sm-ds-public input[type="checkbox"]:checked {
    border-color: var(--cb-color);
    background-color: var(--cb-color);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
}
body.sm-ds-public input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: var(--tp-focus-ring);
}

/* ── 버튼: 주 버튼 단색, 보조 버튼 흰 바탕 + 테두리 ── */
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 .sg-send-btn.ready,
body.sm-ds-public .em-send-btn.em-send-ready,
body.sm-ds-public .em-btn-back.em-addr-btn {
    min-height: 48px;
    background: var(--tp-color-accent);
    color: var(--tp-surface);
    border-color: transparent;
    border-radius: var(--tp-radius-lg);
    box-shadow: var(--tp-shadow-accent);
    filter: none;
    transform: none;
}
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 .sg-send-btn.ready:hover,
body.sm-ds-public .em-send-btn.em-send-ready:hover,
body.sm-ds-public .em-btn-back.em-addr-btn:hover {
    background: var(--tp-color-accent-hover);
    box-shadow: var(--tp-shadow-accent);
    opacity: 1;
    filter: none;
    transform: none;
}
body.sm-ds-public .otp-send-btn:disabled,
body.sm-ds-public .otp-verify-btn:disabled,
body.sm-ds-public .pr-confirm-btn:disabled,
body.sm-ds-public .auth-btn:disabled {
    opacity: 1;
    background: var(--tp-surface-muted);
    color: var(--tp-text-subtle);
    box-shadow: none;
}

body.sm-ds-public .auth-btn-ghost,
body.sm-ds-public .em-btn-back {
    min-height: 44px;
    background: var(--tp-surface);
    color: var(--tp-text-strong);
    border: 1px solid var(--tp-border-default);
    border-radius: var(--tp-radius-lg);
    font-weight: 600;
}
body.sm-ds-public .auth-btn-ghost:hover:not(:disabled),
body.sm-ds-public .em-btn-back:hover {
    background: var(--tp-color-accent-subtle);
    border-color: var(--tp-color-accent-border);
}
body.sm-ds-public .sg-send-btn:disabled,
body.sm-ds-public .sg-send-btn.ready:disabled,
body.sm-ds-public .sg-send-btn.ready:disabled:hover,
body.sm-ds-public .em-send-btn:disabled,
body.sm-ds-public .em-send-btn:disabled:hover {
    background: var(--tp-surface-muted);
    color: var(--tp-text-subtle);
    border-color: var(--tp-border-default);
}
body.sm-ds-public .sg-send-btn.ready:disabled,
body.sm-ds-public .sg-send-btn.ready:disabled:hover {
    box-shadow: none;
    cursor: not-allowed;
}
/* 인증요청(.ready)은 보조 버튼이기도 해서 위 .auth-btn-ghost:hover(연한 배경)가 덮어쓰면
   흰 글씨가 안 보인다. 모바일은 탭 후 hover 가 남으므로 우선순위를 올려 진한 배경을 유지한다. */
body.sm-ds-public .sg-send-btn.ready:hover:not(:disabled),
body.sm-ds-public .sg-send-btn.ready:focus:not(:disabled) {
    background: var(--tp-color-accent-hover);
    border-color: transparent;
    color: var(--tp-surface);
}

body.sm-ds-public .auth-link { color: var(--tp-color-accent); }
body.sm-ds-public .auth-back { color: var(--tp-text-default); }
body.sm-ds-public .auth-back:hover { color: var(--tp-color-accent); }

/* ── 상태 메시지 ── */
body.sm-ds-public .auth-alert-error,
body.sm-ds-public .sg-alert-error,
body.sm-ds-public .em-alert-error,
body.sm-ds-public .pr-status.err {
    border-radius: var(--tp-radius-lg);
}
body.sm-ds-public .pr-status.ok,
body.sm-ds-public .otp-success-badge {
    background: var(--tp-status-success-bg);
    color: var(--tp-status-success-fg);
    border-color: var(--tp-status-success-border);
}
body.sm-ds-public .otp-timer { color: var(--tp-color-accent); }

/* ── 로그인: 자동로그인 옵션 ── */
body.sm-ds-public .auto-login-extra {
    background: var(--tp-canvas);
    border-color: var(--tp-border-default);
    border-radius: var(--tp-radius-lg);
}
body.sm-ds-public .auto-login-extra select {
    border-width: 1px;
    border-color: var(--tp-border-default);
}
body.sm-ds-public .auto-login-extra select:focus {
    border-color: var(--tp-color-accent);
    box-shadow: var(--tp-focus-ring);
}

/* ── 회원가입 공통: 약관 박스 ── */
body.sm-ds-public .sg-terms,
body.sm-ds-public .em-terms {
    background: var(--tp-canvas);
    border-color: var(--tp-border-default);
    border-radius: var(--tp-radius-xl);
}
body.sm-ds-public .sg-terms-link,
body.sm-ds-public .em-terms-link { color: var(--tp-color-accent); }
body.sm-ds-public .sg-code-group {
    background: var(--tp-canvas);
    border-color: var(--tp-border-default);
}
body.sm-ds-public .sg-send-info {
    background: var(--tp-color-accent-subtle);
    border-color: var(--tp-color-accent-border);
    color: var(--tp-color-accent-hover);
}

/* ── 구인자 가입: 단계 표시와 보조 영역 ── */
body.sm-ds-public .auth-step.active .auth-step-circle {
    background: var(--tp-color-accent);
    box-shadow: none;
}
body.sm-ds-public .em-step-title {
    color: var(--tp-text-strong);
    border-bottom: 1px solid var(--tp-border-subtle);
}
body.sm-ds-public .em-step-title i,
body.sm-ds-public .em-step-title svg { color: var(--tp-color-accent); }
body.sm-ds-public .em-mini-name { color: var(--tp-text-strong); }

body.sm-ds-public .em-file-area {
    border: 1px dashed var(--tp-color-accent-border);
    background: var(--tp-canvas);
}
body.sm-ds-public .em-file-area:hover {
    border-color: var(--tp-color-accent);
    background: var(--tp-color-accent-subtle);
}
body.sm-ds-public .em-file-cam-btn {
    border-color: var(--tp-color-accent-border);
    background: var(--tp-surface);
    color: var(--tp-color-accent);
}
body.sm-ds-public .em-file-cam-btn:hover { background: var(--tp-color-accent-subtle); }
body.sm-ds-public .em-file-card__btn:hover {
    background: var(--tp-color-accent-subtle);
    color: var(--tp-color-accent);
    border-color: var(--tp-color-accent-border);
}
body.sm-ds-public .em-info-box {
    background: var(--tp-color-accent-subtle);
    border-color: var(--tp-color-accent-border);
}
body.sm-ds-public .em-info-box .em-info-title { color: var(--tp-color-accent-hover); }
body.sm-ds-public .em-info-box p { color: var(--tp-text-default); }

/* 근무왕(PRMS) 연동 동의: 시리즈 연동 안내라 근무왕 인디고를 쓴다 */
body.sm-ds-public .em-prms-consent-box {
    border: 1px solid var(--tp-color-sibling-worker-border);
    background: var(--tp-color-sibling-worker-subtle);
}
body.sm-ds-public .em-prms-consent-icon,
body.sm-ds-public .em-prms-consent-title { color: var(--tp-color-sibling-worker); }
body.sm-ds-public .em-prms-consent-box input[type="checkbox"] { --cb-color: var(--tp-color-sibling-worker); }

@media (max-width: 600px) {
    body.sm-ds-public .em-btn-group {
        background: var(--tp-surface);
        backdrop-filter: none;
        box-shadow: none;
    }
}

/* ── 유형 선택 ── */
body.sm-ds-public .st-title {
    color: var(--tp-text-strong);
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.03em;
    animation: none;
}
body.sm-ds-public .st-sub {
    color: var(--tp-text-muted);
    font-size: 16px;
    animation: none;
}
body.sm-ds-public .st-options,
body.sm-ds-public .st-signup-hint,
body.sm-ds-public .st-back { animation: none; }
body.sm-ds-public .st-option {
    border: 1px solid var(--tp-border-default);
    border-radius: var(--tp-radius-xl);
    box-shadow: var(--tp-shadow-xs);
    transition: border-color var(--tp-motion-fast), box-shadow var(--tp-motion-fast);
}
body.sm-ds-public .st-option::before { content: none; }
body.sm-ds-public .st-option:hover,
body.sm-ds-public .st-option:active {
    transform: none;
    border-color: var(--tp-color-accent-border);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08);
}
body.sm-ds-public .st-option:focus-visible {
    outline: none;
    border-color: var(--tp-color-accent);
    box-shadow: var(--tp-focus-ring);
}
body.sm-ds-public .st-option .st-icon-wrap {
    background: var(--tp-color-accent-subtle);
    border-radius: var(--tp-radius-lg);
    box-shadow: none;
    transform: none;
}
body.sm-ds-public .st-option .st-icon-wrap i,
body.sm-ds-public .st-option .st-icon-wrap svg { color: var(--tp-color-accent); }
body.sm-ds-public .st-name { color: var(--tp-text-strong); }
body.sm-ds-public .st-desc { color: var(--tp-text-muted); }
body.sm-ds-public .st-option .st-cta { color: var(--tp-color-accent); }
body.sm-ds-public .st-option:hover .st-arrow {
    color: var(--tp-color-accent);
    background: var(--tp-color-accent-subtle);
}
body.sm-ds-public .st-signup-hint { color: var(--tp-text-default); }
body.sm-ds-public .st-signup-pill {
    min-height: 44px;
    padding: 0 16px;
    color: var(--tp-text-strong);
    background: var(--tp-surface);
    border: 1px solid var(--tp-border-default);
    border-radius: var(--tp-radius-lg);
    font-weight: 600;
}
body.sm-ds-public .st-signup-pill:hover {
    transform: none;
    background: var(--tp-color-accent-subtle);
    border-color: var(--tp-color-accent-border);
    box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
    body.sm-ds-public .st-option,
    body.sm-ds-public .auth-input { transition: none; }
}