/* 날씨 테마: 비오는 밤 (Rainy Night) */
:root { --win-gray: #c0c0c0; --win-dark-gray: #808080; --win-light: #ffffff; --win-dark: #000000; --win-blue: #000080; --win-blue-light: #0000ff; }
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'MS Sans Serif', sans-serif; background: linear-gradient(180deg, #1a2a3a 0%, #0a1a2a 60%, #1a2a1a 60%, #1a2a1a 100%); height: 100vh; display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; }
body::before { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 40%; background: linear-gradient(to bottom, #1a2a1a 0%, #0a1a0a 100%); z-index: 0; }
.login-window { position: relative; z-index: 10; width: 400px; background-color: var(--win-gray); border-width: 2px; border-style: solid; border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light); box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.5); }
.title-bar { background: linear-gradient(to right, var(--win-blue) 0%, var(--win-blue-light) 100%); color: var(--win-light); padding: 3px 5px; font-size: 14px; font-weight: bold; display: flex; justify-content: space-between; align-items: center; }
.title-text { display: flex; align-items: center; gap: 5px; }
.title-icon { width: 16px; height: 16px; background: var(--win-gray); border: 1px solid var(--win-light); display: inline-block; }
.content { padding: 20px; }
.logo { text-align: center; margin-bottom: 20px; }
.logo h1 { font-size: 18px; margin-bottom: 5px; text-shadow: 2px 2px 0 rgba(0,0,0,0.1); }
.logo p { font-size: 11px; color: var(--win-dark-gray); }
.form-group { margin-bottom: 15px; }
label { display: block; margin-bottom: 5px; font-size: 12px; font-weight: bold; }
input[type="text"], input[type="password"] { width: 100%; padding: 4px; border-width: 2px; border-style: solid; border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark); background: var(--win-light); font-family: 'MS Sans Serif', sans-serif; font-size: 12px; }
input[type="text"]:focus, input[type="password"]:focus { outline: 1px dotted var(--win-dark); outline-offset: -4px; }
.btn { width: 100%; padding: 6px; border-width: 2px; border-style: solid; border-color: var(--win-light) var(--win-dark) var(--win-dark) var(--win-light); background-color: var(--win-gray); font-family: 'MS Sans Serif', sans-serif; font-size: 12px; font-weight: bold; cursor: pointer; text-align: center; }
.btn:active { border-color: var(--win-dark) var(--win-light) var(--win-light) var(--win-dark); padding: 7px 5px 5px 7px; }
.btn:hover { background-color: #d0d0d0; }
.error { background-color: #ff0000; color: var(--win-light); padding: 8px; margin-bottom: 15px; border: 2px solid var(--win-dark); font-size: 11px; font-weight: bold; text-align: center; }
.footer { text-align: center; margin-top: 20px; padding-top: 15px; border-top: 2px groove var(--win-dark-gray); font-size: 10px; color: var(--win-dark-gray); }
/* 빗방울 애니메이션 */
.rain {
    position: absolute;
    width: 2px;
    height: 30px;
    background: linear-gradient(to bottom, rgba(120,140,160,0.2), rgba(120,140,160,0.6));
    animation: fall infinite linear;
}

/* 빗방울 생성 (20개) - 랜덤 위치, 타이밍, 속도 */
.rain1 { left: 4%; animation-delay: 0s; animation-duration: 1.3s; }
.rain2 { left: 19%; animation-delay: 0.8s; animation-duration: 1.1s; }
.rain3 { left: 26%; animation-delay: 0.4s; animation-duration: 1.5s; }
.rain4 { left: 38%; animation-delay: 1.2s; animation-duration: 1s; }
.rain5 { left: 51%; animation-delay: 0.6s; animation-duration: 1.4s; }
.rain6 { left: 63%; animation-delay: 1s; animation-duration: 1.2s; }
.rain7 { left: 77%; animation-delay: 0.3s; animation-duration: 1.6s; }
.rain8 { left: 85%; animation-delay: 1.4s; animation-duration: 1.05s; }
.rain9 { left: 94%; animation-delay: 0.7s; animation-duration: 1.3s; }
.rain10 { left: 12%; animation-delay: 1.6s; animation-duration: 0.95s; }
.rain11 { left: 31%; animation-delay: 0.5s; animation-duration: 1.45s; }
.rain12 { left: 47%; animation-delay: 1.3s; animation-duration: 1.15s; }
.rain13 { left: 58%; animation-delay: 0.9s; animation-duration: 1.35s; }
.rain14 { left: 69%; animation-delay: 0.2s; animation-duration: 1.55s; }
.rain15 { left: 82%; animation-delay: 1.5s; animation-duration: 1.25s; }
.rain16 { left: 9%; animation-delay: 0.45s; animation-duration: 1.4s; }
.rain17 { left: 37%; animation-delay: 1.1s; animation-duration: 1.2s; }
.rain18 { left: 64%; animation-delay: 0.75s; animation-duration: 1.3s; }
.rain19 { left: 74%; animation-delay: 1.45s; animation-duration: 0.9s; }
.rain20 { left: 96%; animation-delay: 0.55s; animation-duration: 1.5s; }

@keyframes fall {
    0% {
        top: -50px;
        opacity: 1;
    }
    100% {
        top: 100%;
        opacity: 0.2;
    }
}

/* 이 테마에서 사용하지 않는 요소 숨기기 */
.cloud, .star, .moon, .snow, .airplane, .ufo {
    display: none !important;
}