*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Malgun Gothic', '맑은 고딕', sans-serif; background: #f8f9fa; display: flex; align-items: center; justify-content: center; height: 100vh; margin: 0; color: #333; }

.login-container { width: 100%; max-width: 400px; padding: 20px; }
.card { background: #fff; width: 100%; padding: 40px 30px; border-radius: 8px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); text-align: center; border: 1px solid #e0e0e0; }

.logo-title { font-size: 26px; font-weight: bold; color: #0066cc; margin: 0 0 10px 0; display: flex; align-items: center; justify-content: center; gap: 10px; }
.subtitle { font-size: 15px; color: #888; margin-bottom: 30px; }

input { width: 100%; padding: 15px; border: 1px solid #ccc; border-radius: 6px; font-size: 15px; outline: none; margin-bottom: 15px; text-align: center; }
input:focus { border-color: #0066cc; }
input::placeholder { color: #999; }

.btn-primary { width: 100%; padding: 16px; border: none; border-radius: 6px; background: #0066cc; color: #fff; font-weight: bold; cursor: pointer; font-size: 16px; transition: 0.2s; margin-top: 5px; display: flex; align-items: center; justify-content: center; gap: 8px; }
.btn-primary:hover { background: #0055b3; }

.btn-outline { width: 100%; padding: 15px; border: 2px solid #0066cc; border-radius: 6px; background: #fff; color: #0066cc; font-weight: bold; cursor: pointer; font-size: 16px; margin-bottom: 10px; transition: 0.2s; }
.btn-outline:hover { background: #f0f8ff; }

.hidden { display: none !important; }