/* 날씨 테마: 흐린 밤 (Cloudy 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, #1a1a2a 0%, #2a2a3a 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); }
/* 흐린 밤의 입체적인 구름 */
.cloud {
    position: absolute;
    background: rgba(50,55,70,0.75);
    border-radius: 100px;
    animation: float infinite linear;
    z-index: 2;
}

/* 구름 입체감을 위한 추가 원형 */
.cloud::before {
    content: '';
    position: absolute;
    background: rgba(50,55,70,0.75);
    border-radius: 100px;
}

.cloud::after {
    content: '';
    position: absolute;
    background: rgba(50,55,70,0.75);
    border-radius: 100px;
}

/* 전경 구름 (3단 겹구름 - 크고 진한 구름) */
.cloud1 {
    width: 180px;
    height: 65px;
    top: 8%;
    left: -230px;
    animation-duration: 28s;
    background: rgba(45,50,65,0.85);
    z-index: 4;
}
.cloud1::before {
    width: 115px;
    height: 65px;
    top: -20px;
    left: 38px;
}
.cloud1::after {
    width: 90px;
    height: 60px;
    top: -13px;
    right: 28px;
}

.cloud2 {
    width: 200px;
    height: 70px;
    top: 25%;
    left: -250px;
    animation-duration: 32s;
    animation-delay: 10s;
    background: rgba(42,48,62,0.88);
    z-index: 4;
}
.cloud2::before {
    width: 130px;
    height: 70px;
    top: -22px;
    left: 40px;
}
.cloud2::after {
    width: 100px;
    height: 65px;
    top: -15px;
    right: 30px;
}

/* 중경 구름 (2단 겹구름) */
.cloud3 {
    width: 150px;
    height: 55px;
    top: 15%;
    left: -190px;
    animation-duration: 35s;
    animation-delay: 5s;
    background: rgba(48,53,68,0.78);
    z-index: 3;
}
.cloud3::before {
    width: 95px;
    height: 55px;
    top: -17px;
    left: 32px;
}

.cloud4 {
    width: 160px;
    height: 58px;
    top: 32%;
    left: -200px;
    animation-duration: 30s;
    animation-delay: 15s;
    background: rgba(46,51,66,0.80);
    z-index: 3;
}
.cloud4::before {
    width: 100px;
    height: 58px;
    top: -18px;
    left: 35px;
}

.cloud5 {
    width: 140px;
    height: 52px;
    top: 20%;
    left: -180px;
    animation-duration: 38s;
    animation-delay: 20s;
    background: rgba(50,55,70,0.77);
    z-index: 3;
}
.cloud5::before {
    width: 90px;
    height: 52px;
    top: -16px;
    left: 30px;
}

/* 배경 구름 (3단 겹구름 - 작은 크기) */
.cloud6 {
    width: 120px;
    height: 48px;
    top: 12%;
    left: -150px;
    animation-duration: 42s;
    animation-delay: 8s;
    background: rgba(52,57,72,0.72);
    z-index: 2;
}
.cloud6::before {
    width: 75px;
    height: 48px;
    top: -15px;
    left: 25px;
}
.cloud6::after {
    width: 60px;
    height: 43px;
    top: -10px;
    right: 20px;
}

.cloud7 {
    width: 135px;
    height: 50px;
    top: 28%;
    left: -170px;
    animation-duration: 40s;
    animation-delay: 25s;
    background: rgba(48,53,68,0.73);
    z-index: 2;
}
.cloud7::before {
    width: 85px;
    height: 50px;
    top: -15px;
    left: 28px;
}
.cloud7::after {
    width: 68px;
    height: 45px;
    top: -11px;
    right: 22px;
}

@keyframes float {
    0% { transform: translateX(0); }
    100% { transform: translateX(calc(100vw + 200px)); }
}

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