/* ============================================================
 * toss 스킨 — 로그인/계정 (auth.css 뒤에 로드되어 덮어쓴다)
 * 색·둥글기·시간·그림자는 공유 토큰(/assets/css/toss-tokens.css)만 가리킨다. 이 파일에는 리터럴을 쓰지 않는다.
 * ============================================================ */
:root {
    --auth-radius: var(--tb-radius-2xl);
    --auth-radius-sm: var(--tb-radius);
    --auth-control-pad-y: 13px;
    --auth-control-pad-x: 16px;
    --auth-bg: var(--tb-background);
    --auth-card: var(--tb-card);
    --auth-card-shadow: var(--tb-shadow-md);
    --auth-fg: var(--tb-foreground);
    --auth-muted-fg: var(--tb-muted-foreground);
    --auth-border: var(--tb-border);
    --auth-input: transparent;            /* 채운 입력창: 테두리 없음 */
    --auth-input-bg: var(--tb-muted);
    --auth-ring: var(--auth-primary);
    --auth-primary: var(--brand-primary, var(--tb-primary));
    --auth-primary-fg: var(--tb-primary-foreground);
    --auth-primary-hover: color-mix(in srgb, var(--auth-primary) 88%, var(--tb-foreground));
    --auth-primary-disabled: color-mix(in srgb, var(--auth-primary) 40%, var(--tb-card));
    --auth-danger-bg: var(--tb-state-danger-bg); --auth-danger-fg: var(--tb-state-danger-fg); --auth-danger-border: var(--tb-state-danger-border); --auth-success-bg: var(--tb-state-success-bg); --auth-success-fg: var(--tb-state-success-fg); --auth-success-border: var(--tb-state-success-border); --auth-info-bg: var(--tb-state-info-bg); --auth-info-fg: var(--tb-state-info-fg); --auth-info-border: var(--tb-state-info-border);
}

/* 제목·브랜드 */
.auth-brand__name { font-weight: 800; letter-spacing: -0.035em; }
.auth-card__title { font-size: 1.625rem; font-weight: 800; letter-spacing: -0.035em; }
.auth-card__desc { line-height: 1.6; }
.auth-shell { font-family: "Pretendard Variable", Pretendard, "Noto Sans KR", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif; letter-spacing: -0.01em; word-break: keep-all; }
/* 카드는 테두리 대신 그림자와 넉넉한 안쪽 여백 */
.login-card, .find-account-wrapper, .reset-pw-wrapper, .expired-wrapper,
.member-agree-wrapper, .member-register-wrapper, .member-complete-wrapper { border-color: transparent; }
@media (max-width: 480px) {
    .auth-card__title { font-size: 1.4375rem; }
}

/* ============================================================
 * 효과 (transform / opacity 만 사용 — 레이아웃을 흔들지 않는다)
 * 동작 줄이기(prefers-reduced-motion) 설정이면 아래 마지막 블록이 전부 끈다.
 * ============================================================ */
@keyframes tb-fx-rise   { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes tb-fx-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes tb-fx-pop    { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes tb-fx-bounce { 0% { transform: scale(1); } 40% { transform: scale(1.5) rotate(-12deg); } 70% { transform: scale(.94) rotate(4deg); } 100% { transform: scale(1.22) rotate(-8deg); } }
@keyframes tb-fx-ring   { from { box-shadow: 0 0 0 0 color-mix(in srgb, var(--reaction-color, var(--primary)) 45%, transparent); } to { box-shadow: 0 0 0 12px transparent; } }
@keyframes tb-fx-shake  { 10%, 90% { transform: translateX(-1px); } 20%, 80% { transform: translateX(2px); } 30%, 50%, 70% { transform: translateX(-4px); } 40%, 60% { transform: translateX(4px); } }
@keyframes tb-fx-swing  { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(16deg); } 40% { transform: rotate(-13deg); } 60% { transform: rotate(8deg); } 80% { transform: rotate(-4deg); } }
@keyframes tb-fx-badge  { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.3); } }
@keyframes tb-fx-line   { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* ---------- 효과 ---------- */
.auth-brand { animation: tb-fx-rise var(--tb-dur-slow) var(--tb-ease) backwards; }
.login-card, .find-account-wrapper, .reset-pw-wrapper, .expired-wrapper,
.member-agree-wrapper, .member-register-wrapper, .member-complete-wrapper { animation: tb-fx-rise var(--tb-dur-slow) var(--tb-ease) var(--tb-delay-short) backwards; }
.auth-terms { animation: tb-fx-fade var(--tb-dur-slow) ease var(--tb-delay-long) backwards; }
.alert { animation: tb-fx-pop var(--tb-dur-base) var(--tb-ease) backwards; }
.step-indicator__item.is-current .step-indicator__num { animation: tb-fx-pop var(--tb-dur-slow) var(--tb-ease) var(--tb-delay-long) backwards; }

/* 입력창: 포커스를 받으면 흰 바탕 + 파란 링으로 부드럽게 바뀐다 */
.auth-shell input:not([type="checkbox"]):not([type="radio"]),
.auth-shell select,
.auth-shell textarea { transition: background-color var(--tb-dur-base), box-shadow var(--tb-dur-base), border-color var(--tb-dur-base); }
.auth-shell input:not([type="checkbox"]):not([type="radio"]):focus,
.auth-shell select:focus,
.auth-shell textarea:focus { background-color: var(--auth-card); box-shadow: 0 0 0 2px var(--auth-ring); }

/* 버튼: 누르면 눌리고, 위에 올리면 살짝 진해진다 */
.auth-shell .btn, .auth-shell button[type="submit"] { font-weight: 700; transition: background-color var(--tb-dur-fast), color var(--tb-dur-fast), transform var(--tb-dur-fast) var(--tb-ease), box-shadow var(--tb-dur-base); }
.auth-shell .btn:active, .auth-shell button[type="submit"]:active { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .001ms !important;
        animation-delay: var(--tb-delay-short) !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }
}