/* --- START OF FILE login.css --- */

/* --- Base Styles --- */
*, *::before, *::after {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
    height: 100%; /* Ensures body min-height 100vh works correctly in some browsers */
}

body {
    font-family: 'Noto Sans KR', sans-serif;
    margin: 0;
    color: #333; /* Default text color */
    font-size: 14px;
    line-height: 1.6;
    display: flex; /* Flexbox layout for vertical structuring */
    flex-direction: column; /* Children (container) stacked vertically */
    min-height: 100vh; /* Minimum height to fill the viewport */
}

.container {
    max-width: 1400px; /* Consistent max-width with other pages */
    margin: 0 auto; /* Horizontally center the container */
    padding: 0 20px; /* Horizontal padding managed by the container */
    width: 100%;
    flex-grow: 1; /* Allows container to take up available vertical space */
    display: flex;
    flex-direction: column; /* Children (header, main, footer) stacked vertically */
}

/* --- Header (Styles aligned with other pages) --- */
.app-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 0; /* Vertical padding; horizontal padding is from .container */
    margin-bottom: 30px; /* Space between header and main content */
    border-bottom: 1px solid #eee;
    flex-wrap: wrap; /* Allow wrapping for nav items if space is tight */
    width: 100%;
    background-color: #fff; /* White background consistent with other pages */
    flex-shrink: 0; /* Prevent header from shrinking if content is tall */
}

.app-header .logo {
    margin-right: 20px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.app-header .logo a {
    text-decoration: none;
    display: inline-block;
}

.app-header .logo img {
    height: 30px; /* Consistent logo height */
    width: auto;
    display: block;
}

.main-nav {
    display: flex;
    gap: 20px; /* Consistent nav gap */
    align-items: center;
    flex-wrap: wrap;
}

.main-nav a {
    text-decoration: none;
    color: #555; /* Consistent nav link color */
    font-size: 0.95em; /* Consistent nav font size */
    padding: 5px 0;
    transition: color 0.2s ease, border-bottom-color 0.2s ease;
    border-bottom: 2px solid transparent;
}

.main-nav a:hover,
.main-nav a.active {
    color: #007bff; /* Consistent nav active/hover color */
    font-weight: 500;
    border-bottom-color: #007bff;
}

/* --- Main Content (Login Page Specific Layout) --- */
.main-content {
    width: 100%;
    flex-grow: 1; /* Takes up remaining vertical space between header and footer */
    display: flex;
    justify-content: center; /* Horizontally centers the .login-container */
    align-items: center;    /* Vertically centers the .login-container */
    padding: 40px 0;        /* Vertical padding around the login section */
}

/* Login Container */
.login-container {
    background-color: #fff; /* White background for the form box */
    padding: 40px 50px;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    text-align: center;
    max-width: 480px; /* Max width of the login box */
    width: calc(100% - 40px); /* Ensures some padding on very small screens, overridden by max-width */
    /* margin: 0 20px; /* Redundant if .main-content handles centering and .container has padding */
    border: 1px solid #e0e0e0;
}

.login-container h3 {
    font-size: 1.6em;
    font-weight: 600;
    color: #333;
    margin-top: 0;
    margin-bottom: 15px;
}

.login-prompt {
    color: #555;
    margin-bottom: 30px;
    font-size: 1.05em;
}

/* Social Login Section */
.social-login {
    margin-bottom: 25px;
    display: flex;
    flex-direction: column;
    gap: 12px; /* Spacing between buttons */
    align-items: center; /* Centers buttons if they have a max-width less than container */
}

/* Default Social Button Styling */
.social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 20px;
    border-radius: 6px;
    text-decoration: none;
    font-size: 0.95em;
    font-weight: 500;
    transition: background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    border: 1px solid #ced4da;
    background-color: #fff;
    color: #333;
    cursor: pointer;
    width: 100%; /* Makes buttons take full width of .social-login (respecting its align-items) */
    max-width: 320px; /* Optional: Max width for social buttons */
    gap: 10px;
}

.social-btn img {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.social-btn:hover {
    background-color: #f8f9fa;
    border-color: #adb5bd;
}

.social-btn:active {
    background-color: #e9ecef;
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Specific button styles */
.social-btn.kakao-btn { background-color: #FEE500; border-color: #FEE500; color: #191919;}
.social-btn.kakao-btn:hover { background-color: #f7d900; border-color: #f7d900;}
.social-btn.naver-btn { background-color: #03C75A; border-color: #03C75A; color: white;}
.social-btn.naver-btn:hover { background-color: #02b351; border-color: #02b351;}
.social-btn.github-btn { background-color: #333; border-color: #333; color: white;}
.social-btn.github-btn:hover { background-color: #222; border-color: #222;}

/* --- Custom Google Sign-In Button --- */
.custom-google-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center; /* Center content within the button */
    background-color: white;
    color: #444;
    border-radius: 5px;
    border: thin solid #888; /* Equivalent to 1px solid #888 */
    box-shadow: 1px 1px 1px grey;
    text-decoration: none;
    font-family: 'Roboto', sans-serif; /* Google's recommended font */
    height: 42px;
    padding: 0 10px; /* Symmetrical padding for icon and text */
    overflow: hidden;
    cursor: pointer;
    white-space: nowrap; /* Prevent text wrapping */
    transition: background-color 0.2s ease, border-color 0.2s ease;
    width: 100%; /* Takes full width of its parent, like other social buttons */
    max-width: 320px; /* Consistent max-width */
    gap: 10px; /* Space between SVG icon and text */
}

.custom-google-btn:hover {
    background-color: #f5f5f5;
    border-color: #7b7b7b;
}

.custom-google-btn svg {
    /* width and height are set inline in the HTML */
    /* fill: currentColor; /* Can be used if SVG paths don't have their own fill */
    flex-shrink: 0;
}

.custom-google-btn-text {
    font-size: 14px;
    font-weight: bold;
    color: #444; /* Consistent text color */
}

/* Terms Text */
.login-terms {
    font-size: 0.85em;
    color: #6c757d;
    margin-top: 20px; /* Space above terms text */
}

.login-terms a {
    color: #007bff;
    text-decoration: none;
}

.login-terms a:hover {
    text-decoration: underline;
}

/* --- Footer (Styles aligned with other pages) --- */
.app-footer {
    margin-top: auto; /* Pushes footer to the bottom of the flex container (.container) */
    padding: 25px 0; /* Vertical padding; horizontal is from .container */
    text-align: center;
    border-top: 1px solid #eee;
    font-size: 0.9em;
    color: #6c757d;
    width: 100%;
    background-color: #fff; /* Consistent white background */
    flex-shrink: 0; /* Prevent footer from shrinking */
}

.app-footer nav {
    margin-bottom: 10px;
}

.app-footer nav a {
    color: #6c757d;
    text-decoration: none;
    margin: 0 8px;
    transition: color 0.2s ease;
}

.app-footer nav a:hover {
    color: #333;
    text-decoration: underline;
}

.app-footer p {
    margin: 0;
    margin-top: 5px;
}

.app-footer .disclaimer {
    font-size: 0.85em;
    color: #888;
    margin-top: 15px;
    margin-bottom: 10px;
    max-width: 800px; /* Limit width of disclaimer text */
    margin-left: auto;
    margin-right: auto;
    line-height: 1.5;
}

/* --- Responsive Adjustments --- */
@media (max-width: 1400px) { /* When screen is narrower than max-width */
    .container {
        padding: 0 15px; /* Reduce container padding */
    }
}

@media (max-width: 992px) {
    body { font-size: 13px; }
    .container { max-width: none; padding: 0 15px; } /* Mobile: full width container */
}

@media (max-width: 768px) {
    /* Header Responsive */
    .app-header .logo { margin-bottom: 15px; }
    .app-header .logo img { height: 26px; }
    .app-header { flex-direction: column; align-items: flex-start; padding-top:15px; padding-bottom:15px; margin-bottom: 20px;}
    .main-nav { width: 100%; margin-top: 0; gap: 10px 15px; }
    .main-nav a { font-size: 0.9em; }

    /* Main Content Responsive */
    .main-content { padding: 30px 0; }

    /* Login Container Responsive */
    .login-container {
        padding: 30px;
        width: calc(100% - 30px); /* Adjust width to account for reduced container padding */
    }
    .login-container h3 { font-size: 1.4em; }
    .login-prompt { font-size: 1em; }

    .social-btn, .custom-google-btn {
        font-size: 0.9em;
        max-width: 280px;
    }
    .custom-google-btn { height: 40px; padding: 0 8px;}
    /* SVG size in HTML, so no CSS change needed unless overriding */
    .custom-google-btn-text { font-size: 13px; }

    /* Footer Responsive */
    .app-footer nav { font-size: 0.9em; }
    .app-footer nav a { margin: 0 5px;}
    .app-footer .disclaimer { font-size: 0.8em; }
}

@media (max-width: 480px) {
    /* Header Responsive */
    .app-header .logo img { height: 24px; }
    .main-nav a { font-size: 0.85em; }

    /* Main Content Responsive */
    .main-content { padding: 20px 0; }

    /* Login Container Responsive */
    .login-container {
        padding: 25px 20px;
        width: calc(100% - 20px); /* Adjust width for even smaller container padding */
    }
    .login-container h3 { font-size: 1.3em; }
    .login-prompt { font-size: 0.95em; margin-bottom: 25px; }

    .social-btn, .custom-google-btn {
        max-width: 100%; /* Allow full width on small screens */
        height: 40px; /* Consistent height for all buttons */
    }
    .custom-google-btn { height: 40px; padding: 0 6px; } /* Keep consistent or adjust */
    /* SVG size in HTML */
    .custom-google-btn-text { font-size: 13px; } /* Ensure text fits */


    .login-terms { font-size: 0.8em; }

    /* Footer Responsive */
    .app-footer { font-size: 0.8em; padding: 15px 0;}
    .app-footer nav a { margin: 0 4px; }
    .app-footer .disclaimer { font-size: 0.75em; }
}

/* --- END OF FILE login.css --- */