/* Jeus Login Design Styles */
.jld-modal {
    display: none;
    position: fixed;
    z-index: 99999;
    left: 0;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
    font-family: 'Nanum Gothic', ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    box-sizing: border-box;
}

.jld-modal *,
.jld-modal *::before,
.jld-modal *::after {
    box-sizing: border-box;
}

.jld-modal.open {
    display: flex;
}

.jld-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(17, 24, 39, 0.4);
    /* bg-gray-900/40 */
    backdrop-filter: blur(4px);
    /* backdrop-blur-sm */
    transition: opacity 0.2s;
}

.jld-modal.open .jld-modal-overlay {
    animation: jld-fade-in 0.3s ease-out forwards;
}

@keyframes jld-fade-in {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes jld-scale-in {
    0% {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }

    100% {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* Error Message */
.jld-error-message {
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    display: none;
}

.jld-error-message.error {
    background-color: #fce4e4;
    border: 1px solid #fcc2c3;
    color: #cc0033;
}

.jld-error-message.success {
    background-color: #e4fce4;
    border: 1px solid #c2fcc3;
    color: #00cc33;
}

/* Shake Animation */
.shake {
    animation: jld-shake 0.5s;
}

@keyframes jld-shake {
    0% {
        transform: translateX(0);
    }

    10%,
    90% {
        transform: translateX(-5px);
    }

    20%,
    80% {
        transform: translateX(5px);
    }

    30%,
    70% {
        transform: translateX(-5px);
    }

    40%,
    60% {
        transform: translateX(5px);
    }

    50% {
        transform: translateX(-5px);
    }

    100% {
        transform: translateX(0);
    }
}

.jld-submit-button {
    width: 100%;
    padding: 12px;
    background-color: #2563eb;
    color: white;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    margin-top: 10px;
    height: 48px;
    line-height: normal;
}

/* Error Message */
.jld-error-message {
    padding: 12px 14px;
    margin-bottom: 20px;
    border-radius: 12px;
    font-size: 14px;
    text-align: left;
    display: none;
    line-height: 1.5;
    word-break: keep-all;
    align-items: center;
    gap: 10px;
}

.jld-error-message.error {
    background-color: #FEF2F2;
    /* Red 50 */
    border: 1px solid #FEE2E2;
    /* Red 100 */
    color: #DC2626;
    /* Red 600 */
}

.jld-error-message.success {
    background-color: #ECFDF5;
    /* Green 50 */
    border: 1px solid #D1FAE5;
    /* Green 100 */
    color: #059669;
    /* Green 600 */
}

/* Shake Animation */
.shake {
    animation: jld-shake 0.4s cubic-bezier(.36, .07, .19, .97) both;
}

@keyframes jld-shake {

    10%,
    90% {
        transform: translate3d(-1px, 0, 0);
    }

    20%,
    80% {
        transform: translate3d(2px, 0, 0);
    }

    30%,
    50%,
    70% {
        transform: translate3d(-4px, 0, 0);
    }

    40%,
    60% {
        transform: translate3d(4px, 0, 0);
    }
}

.jld-modal-content {
    background: #fff;
    width: 100%;
    max-width: 400px;
    padding: 32px;
    border-radius: 20px;
    box-shadow: 0 10px 40px -10px rgba(0, 0, 0, 0.2);
    position: relative;
    z-index: 10;
    margin: 16px;
    border: none;
}

.jld-modal.open .jld-modal-content {
    animation: jld-scale-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.jld-close-modal {
    position: absolute;
    top: 16px;
    /* top-4 */
    right: 16px;
    /* right-4 */
    background: none;
    border: none;
    font-size: 20px;
    /* text-xl */
    cursor: pointer;
    color: #9ca3af;
    /* text-gray-400 */
    transition: color 0.2s;
}

.jld-close-modal:hover {
    color: #4b5563;
    /* hover:text-gray-600 */
}

/* Header Section */
.jld-header {
    text-align: center;
    margin-bottom: 32px;
    /* mb-8 */
}

.jld-header h2 {
    font-size: 24px !important;
    /* text-2xl */
    font-weight: 700 !important;
    /* font-bold */
    color: #1f2937 !important;
    /* text-gray-800 */
    letter-spacing: -0.025em !important;
    /* tracking-tight */
    margin: 0 !important;
    line-height: 1.33 !important;
}

.jld-header p {
    font-size: 14px !important;
    /* text-sm */
    color: #6b7280 !important;
    /* text-gray-500 */
    margin-top: 8px !important;
    /* mt-2 */
    margin-bottom: 0 !important;
}

.jld-login-logo img {
    max-width: 100%;
    height: auto;
}

/* Form Styles */
.jld-form-space>*+* {
    margin-top: 20px;
    /* space-y-5 */
}

.jld-input-group {
    margin-bottom: 0;
}

.jld-input-group label {
    display: block;
    font-size: 12px;
    /* text-xs */
    font-weight: 600;
    /* font-semibold */
    color: #4b5563;
    /* text-gray-600 */
    margin-bottom: 4px;
    /* mb-1 */
    margin-left: 4px;
    /* ml-1 */
}

.jld-input-wrapper {
    position: relative;
}

.jld-input-icon {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 40px;
    /* Based on pl-10 roughly */
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: none;
    color: #9ca3af;
    /* text-gray-400 */
    padding-left: 4px;
}

.jld-form-input {
    width: 100% !important;
    height: auto !important;
    padding: 12px 16px 12px 40px !important;
    /* py-3 pl-10 pr-4 */
    background-color: #f9fafb !important;
    /* bg-gray-50 */
    border: 1px solid #e5e7eb !important;
    /* border-gray-200 */
    border-radius: 12px !important;
    /* rounded-xl */
    font-size: 14px !important;
    /* text-sm */
    line-height: 1.5 !important;
    color: #374151 !important;
    /* text-gray-700 */
    transition: all 0.2s !important;
    outline: none !important;
    box-shadow: none !important;
    margin: 0 !important;
    appearance: none !important;
}

.jld-form-input::placeholder {
    color: #9ca3af !important;
    /* placeholder-gray-400 */
    opacity: 1;
}

.jld-form-input:focus {
    border-color: #6366f1 !important;
    /* focus:border-indigo-500 */
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important;
    /* focus:ring-2 focus:ring-indigo-500/20 */
    background-color: #fff !important;
}

/* Password Input Specific to accommodate toggle button */
#user_pass.jld-form-input {
    padding-right: 40px !important;
    /* pr-10 */
}

/* Password Toggle */
.jld-password-toggle {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    /* inset-y-0 */
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #9ca3af;
    /* text-gray-400 */
    cursor: pointer;
    padding: 0;
}

.jld-password-toggle:hover {
    color: #4b5563;
    /* hover:text-gray-600 */
}

/* Label Row (for password) */
.jld-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
    /* mb-1 */
    margin-left: 4px;
    /* ml-1 */
}

.jld-label-row label {
    margin-bottom: 0;
    margin-left: 0;
}

.jld-label-row a {
    font-size: 12px;
    /* text-xs */
    color: #4f46e5;
    /* text-indigo-600 */
    text-decoration: none;
    font-weight: 500;
    /* font-medium */
}

.jld-label-row a:hover {
    color: #3730a3;
    /* hover:text-indigo-800 */
}

/* Remember Me */
.jld-remember-row {
    display: flex;
    align-items: center;
}

.jld-remember-label {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #374151;
    cursor: pointer;
}

.jld-remember-label input {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    border: 1px solid #d1d5db;
    accent-color: #4f46e5;
    margin-top: 0;
}

/* Submit Button */
.jld-submit-button {
    width: 100%;
    background-color: #4f46e5 !important;
    /* bg-indigo-600 */
    color: white !important;
    font-weight: 600 !important;
    /* font-semibold */
    padding: 14px 24px !important;
    /* py-3.5 */
    border-radius: 12px !important;
    /* rounded-xl */
    border: none !important;
    box-shadow: 0 10px 15px -3px rgba(79, 70, 229, 0.3) !important;
    /* shadow-lg shadow-indigo-500/30 */
    transition: all 0.2s !important;
    cursor: pointer;
    font-size: 16px !important;
    display: block;
    line-height: normal !important;
    text-shadow: none !important;
    margin-top: 20px !important;
}

.jld-submit-button:hover {
    background-color: #4338ca !important;
    /* hover:bg-indigo-700 */
    transform: translateY(-1px);
    /* hover:-translate-y-0.5 is approx 2px visually */
    box-shadow: 0 20px 25px -5px rgba(79, 70, 229, 0.4) !important;
    /* hover:shadow-indigo-500/40 */
}

.jld-submit-button:active {
    transform: translateY(0);
}

/* Divider */
.jld-divider {
    position: relative;
    margin: 24px 0;
    /* my-6 */
    text-align: center;
}

.jld-divider-line {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    border-top: 1px solid #e5e7eb;
    /* border-gray-200 */
    height: 1px;
}

.jld-divider-text {
    position: relative;
    display: inline-block;
    background: #fff;
    padding: 0 8px;
    /* px-2 */
    font-size: 12px;
    /* text-xs */
    color: #9ca3af;
    /* text-gray-400 */
}

/* Social Buttons */
.jld-social-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    /* gap-3 */
}

.jld-social-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    /* py-2.5 */
    border: 1px solid #e5e7eb;
    /* border-gray-200 */
    border-radius: 12px;
    /* rounded-xl */
    background: #fff;
    cursor: pointer;
    transition: background-color 0.2s;
    width: 100%;
    padding: 12px;
    margin-bottom: 12px;
    border: 1px solid #e1e1e1;
    border-radius: 6px;
    background-color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none !important;
    /* Ensure no underline */
    box-sizing: border-box;
}

.jld-social-btn:hover {
    background-color: #f9f9f9;
    border-color: #d1d1d1;
}

.jld-social-btn img {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    object-fit: contain;
}

.jld-social-btn span {
    font-size: 14px;
    font-weight: 500;
    color: #4b5563;
    /* Dark gray text for all */
}

/* Specific adjustments if needed, but general style covers most */
.jld-social-btn.google-btn {
    /* Google button might already look like this, but ensuring consistency */
}

.jld-social-btn.kakao-btn {
    /* Kakao specific overrides removed */
}

.jld-social-btn.naver-btn {
    /* Naver specific overrides removed */
}

.jld-social-btn.instagram-btn {
    /* Instagram specific overrides removed */
}

/* Footer Links */
.jld-footer-links {
    margin-top: 32px;
    /* mt-8 */
    text-align: center;
    font-size: 14px;
    /* text-sm */
    color: #6b7280;
    /* text-gray-500 */
}

.jld-footer-links a {
    color: #4f46e5;
    /* text-indigo-600 */
    font-weight: 600;
    /* font-semibold */
    text-decoration: none;
    margin-left: 4px;
    /* ml-1 */
}

.jld-footer-links a:hover {
    color: #3730a3;
    /* hover:text-indigo-800 */
}