/* Auth surfaces */

.lg-shell {
    position: relative;
    min-height: calc(100vh - 200px);
    padding: clamp(28px, 4vw, 52px) 0 clamp(40px, 6vw, 72px);
    overflow: hidden;
    background: var(--color-bg-secondary);
    /* 전역 토큰에 매핑되는 로컬 별칭 — 로그인 카드 표면 제어용 */
    --lg-surface: var(--color-bg-primary);
    --lg-surface-secondary: var(--color-bg-secondary);
    --lg-surface-border: var(--color-border);
    /* 로컬 전용: 인증 카드 elevation (design-system의 shadow-lg보다 깊게) */
    --lg-shadow: var(--shadow-lg);
    --lg-action: var(--color-action);
    --lg-action-hover: var(--color-action-hover);
    --lg-action-text: var(--color-action-text);
}

.lg-shell::before,
.lg-shell::after {
    display: none;
}

/* 다크모드 — 로컬 별칭은 전역 토큰을 따라가므로 별도 재정의 불필요. */
/* 필요 시 surface만 로그인 페이지 전용 톤으로 미세 조정 */
html[data-theme="dark"] .lg-shell {
    background: var(--color-bg-secondary);
}

.lg-wrap {
    position: relative;
    z-index: 1;
    width: min(100%, 960px);
    margin: 0 auto;
    padding: 0 var(--space-4);
    display: flex;
    justify-content: center;
}

.lg-card {
    width: min(100%, 440px);
    padding: 32px;
    background: var(--lg-surface);
    border: 1px solid var(--lg-surface-border);
    border-radius: 24px;
    box-shadow: var(--lg-shadow);
}

.lg-card--wide {
    width: min(100%, 720px);
}

.lg-card-header {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 24px;
}

.lg-card-header--center {
    align-items: center;
    text-align: center;
}

.lg-logo {
    margin: 0;
}

.lg-brand {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: fit-content;
    text-decoration: none;
}

.lg-logo-img {
    height: 28px;
}

[data-theme="dark"] .lg-logo-img {
    filter: brightness(0) invert(1);
}

.lg-eyebrow {
    display: none;
}

.lg-card-title {
    margin: 0;
    font-size: clamp(28px, 3vw, 32px);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    letter-spacing: -0.04em;
    line-height: 1.12;
}

.lg-card-desc,
.lg-subtitle {
    margin: 0;
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.lg-card-body {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.lg-card-section {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.lg-grid-2 {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-3);
}

.lg-field {
    margin: 0;
}

.lg-label {
    display: block;
    margin-bottom: 7px;
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
    letter-spacing: 0.01em;
}

.lg-label-hint {
    display: inline-block;
    margin-left: 4px;
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    color: var(--color-text-tertiary);
}

.lg-input {
    width: 100%;
    min-height: 52px;
    padding: 14px 16px;
    font-size: var(--text-base);
    line-height: 1.4;
    color: var(--color-text-primary);
    background: var(--lg-surface-secondary);
    border: 1px solid var(--lg-surface-border);
    border-radius: 14px;
    outline: none;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast), background-color var(--transition-fast);
    box-sizing: border-box;
}

.lg-input::placeholder {
    color: var(--color-text-tertiary);
}

.lg-input:focus {
    border-color: var(--lg-action);
    box-shadow: 0 0 0 4px color-mix(in srgb, var(--color-primary) 15%, transparent);
    background: var(--lg-surface);
}

/* 다크모드 focus 강조 — color-mix가 --color-primary를 따라가므로 개별 재정의 삭제 */

html[data-theme="dark"] .lg-input {
    background: var(--lg-surface-secondary) !important;
    border-color: var(--lg-surface-border) !important;
    color: var(--color-text-primary) !important;
}

html[data-theme="dark"] .lg-input::placeholder {
    color: var(--color-text-tertiary) !important;
}

.lg-error {
    margin-top: 6px;
    min-height: 16px;
    font-size: var(--text-xs);
    color: var(--color-negative);
}

.lg-btn-primary,
.lg-btn-outline,
.lg-btn-social {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    width: 100%;
    min-height: 52px;
    padding: 0 var(--space-4);
    font-size: var(--text-base);
    font-weight: var(--font-semibold);
    line-height: 1.2;
    border-radius: 14px;
    text-decoration: none;
    cursor: pointer;
    transition: var(--transition-fast);
    appearance: none;
    -webkit-appearance: none;
}

.lg-btn-primary {
    color: var(--lg-action-text) !important;
    -webkit-text-fill-color: var(--lg-action-text);
    background: var(--lg-action);
    border: 1px solid var(--lg-action);
    box-shadow: none;
}

.lg-btn-primary:hover {
    color: var(--lg-action-text) !important;
    -webkit-text-fill-color: var(--lg-action-text);
    background: var(--lg-action-hover);
    border-color: var(--lg-action-hover);
    box-shadow: none;
}

.lg-btn-outline {
    color: var(--color-text-primary) !important;
    background: var(--lg-surface-secondary);
    border: 1px solid var(--lg-surface-border);
}

.lg-btn-outline:hover {
    background: var(--lg-surface);
    border-color: var(--color-text-secondary);
    color: var(--color-text-primary);
}

.lg-social-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.lg-btn-google {
    color: var(--color-text-primary) !important;
    background: var(--lg-surface);
    border: 1px solid var(--lg-surface-border);
}

.lg-btn-google:hover {
    background: var(--lg-surface-secondary);
    border-color: var(--color-text-tertiary);
}

[data-theme="dark"] .lg-btn-google {
    color: var(--color-text-primary) !important;
    background: var(--lg-surface-secondary);
    border-color: var(--lg-surface-border);
}

/* Naver 소셜 로그인 — 제3자 브랜드 톤 유지 (라이트/다크 별도 톤) */
.lg-btn-naver {
    color: #166534 !important;       /* Naver green deep */
    background: #ffffff;
    border: 1px solid #d1fae5;
}

.lg-btn-naver:hover {
    background: #f0fdf4;
    border-color: #86efac;
}

[data-theme="dark"] .lg-btn-naver {
    color: #bbf7d0 !important;
    background: rgba(22, 101, 52, 0.14);
    border-color: rgba(134, 239, 172, 0.2);
}

.lg-btn-naver svg {
    width: 18px;
    height: 18px;
}

.lg-btn-google svg {
    width: 20px;
    height: 20px;
}

.lg-links {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    margin-top: var(--space-1);
}

.lg-links a {
    font-size: var(--text-base);
    color: var(--color-text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.lg-links a:hover {
    color: var(--color-text-primary);
}

.lg-link-sep {
    color: var(--color-border);
}

.lg-divider {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 24px 0 20px;
}

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

.lg-divider span {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
    white-space: nowrap;
}

.lg-social-block {
    margin-top: var(--space-2);
}

.lg-message-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: var(--space-3);
}

.lg-message-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 52px;
    height: 52px;
    border-radius: 16px;
    background: var(--lg-surface-secondary);
    color: var(--lg-action);
}

.lg-message-icon svg {
    width: 28px;
    height: 28px;
}

.lg-message-text {
    font-size: 18px;
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
    line-height: 1.45;
}

.lg-message-sub {
    margin: 0;
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    line-height: 1.6;
}

.lg-message-actions {
    display: flex;
    gap: var(--space-2);
    width: 100%;
}

.lg-message-actions > * {
    flex: 1;
}

.lg-spinner {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    border: 2px solid color-mix(in srgb, var(--color-text-tertiary) 35%, transparent);
    border-top-color: var(--lg-action);
    animation: lg-spin 0.9s linear infinite;
}

@keyframes lg-spin {
    to {
        transform: rotate(360deg);
    }
}

.lg-agreement-wrap {
    width: 100%;
}

.lg-agreement-section {
    margin-bottom: 24px;
}

.lg-agreement-title {
    margin-bottom: 10px;
    font-size: 15px;
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.lg-agreement-box {
    max-height: 200px;
    overflow-y: auto;
    border: 1px solid var(--lg-surface-border);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    font-size: 13px;
    color: var(--color-text-secondary);
    background: var(--lg-surface-secondary);
    line-height: 1.65;
}

.lg-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    font-size: 13px;
    color: var(--color-text-primary);
}

.lg-checkbox {
    width: 16px;
    height: 16px;
    margin-top: 2px;
    accent-color: var(--lg-action);
    cursor: pointer;
    flex-shrink: 0;
}

.lg-checkbox-row label {
    cursor: pointer;
    line-height: 1.6;
}

.lg-checkbox-required {
    color: var(--color-accent);
    font-weight: var(--font-semibold);
}

.lg-checkbox-optional {
    color: var(--color-text-tertiary);
}

.lg-info-banner {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    margin-bottom: var(--space-4);
    background: var(--color-bg-secondary);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
}

.lg-info-banner-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    color: var(--color-accent);
    margin-top: 1px;
}

.lg-info-banner-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    line-height: 1.55;
}

.lg-info-banner-title {
    font-size: var(--text-sm);
    font-weight: var(--font-semibold);
    color: var(--color-text-primary);
}

.lg-info-banner-desc {
    font-size: var(--text-xs);
    color: var(--color-text-tertiary);
}

.lg-agree-all {
    padding: 16px;
    border: 1px solid var(--lg-surface-border);
    border-radius: 16px;
    background: var(--lg-surface-secondary);
    margin-bottom: 24px;
}

.lg-agree-all .lg-checkbox-row {
    font-size: 14px;
    font-weight: var(--font-semibold);
}

.lg-agree-all-desc {
    margin-top: 6px;
    padding-left: 28px;
    font-size: 12px;
    color: var(--color-text-tertiary);
    line-height: 1.6;
}

.lg-link {
    color: var(--color-accent);
    text-decoration: none;
}

.lg-link:hover {
    text-decoration: underline;
}

.lg-hr {
    border: none;
    border-top: 1px solid var(--color-border);
    margin: var(--space-5) 0;
}

@media (max-width: 767px) {
    .lg-shell {
        padding: 20px 0 var(--space-8);
    }

    .lg-wrap {
        padding: 0 var(--space-3);
    }

    .lg-card {
        padding: 24px 20px;
        border-radius: 20px;
    }

    .lg-grid-2,
    .lg-message-actions {
        grid-template-columns: 1fr;
        display: grid;
    }

    .lg-card-title {
        font-size: 22px;
        line-height: 1.2;
    }

    .lg-card--wide {
        width: 100%;
    }
}