/* ---------- Login Page Specific Theme ---------- */
/* Login page uses its own dark theme, separate from dashboard.css */
:root {
    --login-accent: #00b6ffa3;
    --login-card-bg: #222;
    --login-input-bg: #333;
    --login-text: #e9e9e9;
    --login-muted: #a3a3a3;
    --login-shadow: 0 20px 40px rgba(0,0,0,.45);
    --login-glass-bg: rgba(67,67,67,.36);
    --login-glass-blur: 18px;
    --login-glass-sat: 140%;
    --login-glass-stroke: rgba(255,255,255,.18);
    --login-glass-highlight: rgba(255,255,255,.35);
    --login-glass-shadow: rgba(0,0,0,.35);
}

/* 페이지 중앙 정렬 컨테이너 */
/* Login page specific styles - scoped to avoid conflicts */
html, body { height: 100%; }
.login-page body {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, "Noto Sans KR", sans-serif;
    color: var(--login-text);
    background: #000;
    overflow: hidden;
}

.page{
    position:relative;           /* 배경 위에 올라오도록 */
    z-index:1;                   /* 배경보다 위 */
    min-height:100vh;
    display:grid;
    place-items:center;
}

/* ---------- 동적 펄스 그라데이션 배경 ---------- */
.gradient-background{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    background-color:#b2c1ff;
    overflow:hidden;
    z-index:0;                   /* 카드보다 아래 */
}

/* 노이즈 질감 */
.gradient-background::after{
    content:'';
    position:absolute; inset:0;
    background-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 800"><filter id="noise"><feTurbulence type="fractalNoise" baseFrequency="0.65" numOctaves="3" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23noise)"/></svg>');
    opacity:.08;
    z-index:0;
    pointer-events:none;
}

/* 블롭 공통 */
.blob{
    position:absolute;
    border-radius:50%;
    filter:blur(12vmax);
    opacity:.6;
}

/* 각 블롭 */
.blob-1{ width:50vmax;height:50vmax; left:-10vmax; top:-10vmax; background:#ff7e5f; animation:pulse 18s infinite alternate; }
.blob-2{ width:45vmax;height:45vmax; right:-15vmax; top:-5vmax;  background:#feb47b; animation:pulse 22s infinite alternate; animation-delay:-5s; }
.blob-3{ width:40vmax;height:40vmax; left:10vmax; bottom:-20vmax; background:#00c6ff; animation:pulse 25s infinite alternate; animation-delay:-10s; }
.blob-4{ width:35vmax;height:35vmax; right:-15vmax; bottom:-15vmax;background:#97abff; animation:pulse 15s infinite alternate; animation-delay:-2s; }

@keyframes pulse{
    from{ transform:scale(1); opacity:.6; }
    50% { transform:scale(1.2); opacity:1; }
    to  { transform:scale(1); opacity:.6; }
}

/* ---------- 카드/폼 ---------- */
.login-card {
    position: relative;
    z-index: 2;
    width: min(92vw, 420px);
    padding: 32px 28px 26px;

    /* 유리 효과 핵심 */
    background: var(--login-glass-bg);
    border: 1px solid var(--login-glass-stroke);
    backdrop-filter: blur(var(--login-glass-blur)) saturate(var(--login-glass-sat));
    -webkit-backdrop-filter: blur(var(--login-glass-blur)) saturate(var(--login-glass-sat));

    border-radius: 20px;
    box-shadow:
            0 20px 40px var(--login-glass-shadow),
            inset 0 1px 0 var(--login-glass-highlight);
    min-height: 300px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* 지원하지 않는 브라우저용 폴백 */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    .login-card {
        background: rgba(20,20,22,.88);
    }
}

/* 브랜드 */
.brand{ display:flex; align-items:center; justify-content:center; gap:10px; margin-bottom:30px; flex-direction: column; }
.brand-logo{ width:auto; height:36px; object-fit:contain; }
.brand-name{ font-size:25px; font-weight:600; color:white; }

/* 탭 */
.login-tabs { display: flex; justify-content: center; gap: 28px; margin: 10px 0 22px; }
.login-tab { position: relative; text-decoration: none; color: var(--login-muted); padding-bottom: 6px; font-weight: 600; letter-spacing: .3px; }
.login-tab.active { color: #fff; }
.login-tab.active::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--login-accent); border-radius: 2px; }

/* 에러 */
.login-error { margin: 0 0 8px; color: #ff6b6b; font-size: .95rem; }

/* 폼 */
.login-form-group { margin-bottom: 12px; }
.login-input {
    width: 100%;
    padding: 14px 16px;
    border: none;
    outline: none;
    border-radius: 999px;
    background: #39588029;
    color: #fff;
    font-size: 15px;
    box-sizing: border-box;
}
.login-input::placeholder { color: #cfcfcf; }

.login-checkbox { display: inline-flex; align-items: center; gap: 8px; color: var(--login-muted); font-size: .92rem; margin: 6px 2px 16px; }
.login-checkbox input { accent-color: var(--login-accent); }

.login-button {
    width: 100%;
    padding: 14px 18px;
    border: none;
    border-radius: 999px;
    background: var(--login-accent);
    color: #fff;
    font-weight: 800;
    letter-spacing: .3px;
    cursor: pointer;
    transform: translateY(0);
    transition: transform .05s ease, filter .2s ease;
    box-shadow: 0 6px 0 rgba(0,0,0,.18);
}
.login-button:hover { filter: brightness(1.03); }
.login-button:active { transform: translateY(1px); }

.login-foot { text-align: center; margin-top: 12px; color: var(--login-muted); font-size: .95rem; }
.login-foot a { color: var(--login-muted); text-decoration: none; }
.login-foot a:hover { text-decoration: underline; }

@media (max-width: 360px) {
    .login-card { padding: 28px 22px 22px; }
}