* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body { font-family: "Segoe UI", "Malgun Gothic", system-ui, sans-serif; color: #1f2937; background: #f3f6fb; }
button, input { font: inherit; }
.login-page { min-height: 100vh; padding: 14px; display: grid; place-items: center; }
.login-shell { width: min(1050px, 100%); min-height: min(700px, calc(100vh - 28px)); overflow: hidden; border: 1px solid #dbe3ef; border-radius: 18px; background: #fff; box-shadow: 0 20px 55px rgba(15,23,42,.10); display: flex; flex-direction: column; }
.login-header { min-height: 114px; padding: 22px 30px; border-bottom: 1px solid #e5eaf2; display: flex; flex-direction: column; justify-content: center; }
.brand { margin-bottom: 9px; display: flex; align-items: center; gap: 10px; color: #5f7088; font-size: 20px; font-weight: 800; letter-spacing: -.02em; }
.brand-mark { color: #ff5a1f; font-size: 17px; line-height: 1; }
.login-header p { margin: 0; color: #667085; font-size: 12px; }
.login-body { min-height: 0; flex: 1; display: grid; grid-template-columns: minmax(0,1.08fr) minmax(390px,.92fr); }
.login-intro { padding: 54px 64px; border-right: 1px solid #e5eaf2; background: linear-gradient(145deg,#f8faff 0%,#eef4ff 100%); display: flex; flex-direction: column; justify-content: center; gap: 40px; }
.intro-visual { position: relative; width: 250px; height: 190px; margin: 0 auto; }
.visual-card { position: absolute; width: 180px; height: 120px; border-radius: 16px; box-shadow: 0 18px 38px rgba(37,99,235,.16); }
.card-back { left: 10px; top: 8px; background: #dbe7ff; transform: rotate(-8deg); }
.card-front { left: 47px; top: 34px; padding: 30px 25px; border: 1px solid rgba(255,255,255,.8); background: #fff; transform: rotate(4deg); }
.card-front i { display: block; width: 105px; height: 9px; margin-bottom: 11px; border-radius: 10px; background: #d9e5fb; }
.card-front i:nth-child(2) { width: 78px; background: #a9c0f7; }
.card-front i:nth-child(3) { width: 95px; }
.visual-play { position: absolute; right: 3px; bottom: 10px; width: 64px; height: 64px; border: 8px solid #eef4ff; border-radius: 50%; display: grid; place-items: center; color: #fff; background: #ff6b35; box-shadow: 0 14px 28px rgba(255,90,31,.24); font-size: 20px; padding-left: 4px; }
.intro-eyebrow { color: #2563eb; font-size: 11px; font-weight: 800; letter-spacing: .14em; }
.login-intro h2 { margin: 12px 0 14px; color: #263b57; font-size: 29px; line-height: 1.35; letter-spacing: -.04em; }
.login-intro p { margin: 0; color: #64748b; font-size: 13px; line-height: 1.8; }
.login-panel { padding: 48px; display: grid; place-items: center; background: #fff; }
.login-panel-inner { width: min(340px,100%); }
.login-badge { display: inline-block; margin-bottom: 16px; color: #2563eb; font-size: 10px; font-weight: 800; letter-spacing: .13em; }
.login-panel h1 { margin: 0 0 10px; color: #1e293b; font-size: 30px; letter-spacing: -.04em; }
.login-description { margin: 0 0 34px; color: #64748b; font-size: 13px; line-height: 1.6; }
.login-notice { margin: -16px 0 24px; padding: 12px 13px; border: 1px solid #f5d6a5; border-radius: 8px; display: flex; align-items: flex-start; gap: 9px; color: #92400e; background: #fffaf0; font-size: 12px; line-height: 1.55; }
.login-notice-icon { width: 19px; height: 19px; flex: 0 0 19px; margin-top: 1px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: #f59e0b; font-size: 11px; font-weight: 800; }
.field-group { margin-bottom: 18px; }
.field-group label { display: block; margin-bottom: 8px; color: #475569; font-size: 12px; font-weight: 700; }
.login-input { width: 100%; height: 46px; padding: 0 14px; border: 1px solid #d8dde5; border-radius: 8px; outline: none; color: #1f2937; background: #fff; font-size: 13px; transition: border-color .16s,box-shadow .16s; }
.login-input::placeholder { color: #a1aab8; }
.login-input:focus { border-color: #8aaef8; box-shadow: 0 0 0 4px rgba(37,99,235,.09); }
.login-button { width: 100%; height: 46px; margin-top: 8px; border: 1px solid #1d4ed8; border-radius: 8px; color: #fff; background: #2563eb; box-shadow: 0 8px 18px rgba(37,99,235,.20); font-size: 14px; font-weight: 800; cursor: pointer; transition: background .16s,transform .08s; }
.login-button:hover { background: #1d4ed8; }
.login-button:active { transform: translateY(1px); }
.login-help { margin: 22px 0 0; color: #94a3b8; font-size: 11px; line-height: 1.6; text-align: center; }
@media (max-width: 760px) { .login-page { padding: 0; } .login-shell { min-height: 100vh; border: 0; border-radius: 0; } .login-header { min-height: 96px; padding: 20px 24px; } .login-body { display: block; } .login-intro { display: none; } .login-panel { min-height: calc(100vh - 96px); padding: 40px 24px; } }