:root{
--panel-w: 420px;
--blue: #0b5ea8;
--line: #d9d9d9;
--muted: #777;
--soft: #f3f3f3;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }
body{
margin: 0;
font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", Arial, sans-serif;
background: #111;
}

.page{
min-height: 100vh;
display: grid;
grid-template-columns: 1fr var(--panel-w);
background: #000;
}

.hero{
position: relative;
min-height: 100vh;
background-image: url("<?=htmlspecialchars($BG_IMAGE, ENT_QUOTES, "UTF-8")?>");
background-size: cover;
background-position: center;
}
.hero::after{
content: "";
position: absolute;
inset: 0;
background: rgba(0,0,0,.10);
}

.panel{
background: #fff;
min-height: 100vh;
display: flex;
align-items: stretch;
justify-content: center;
}
.panel-inner{
width: 100%;
padding: 64px 48px 40px;
display: flex;
flex-direction: column;
align-items: center;
}

.brand{
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
margin-bottom: 26px;
}
.brand-title{
color: var(--blue);
font-style: italic;
font-weight: 700;
letter-spacing: .2px;
font-size: 28px;
line-height: 1;
}
.brand svg{
width: 120px;
height: 74px;
display: block;
}

.card{
width: 100%;
max-width: 320px;
border: 1px solid var(--line);
border-radius: 10px;
padding: 16px;
box-shadow: 0 1px 0 rgba(0,0,0,.03);
}

.input{
width: 100%;
height: 34px;
border: 1px solid #e6e6e6;
background: #f7f7f7;
border-radius: 16px;
padding: 0 12px;
font-size: 13px;
outline: none;
margin-bottom: 10px;
}
.input:focus{
border-color: #b8d4ef;
box-shadow: 0 0 0 3px rgba(11,94,168,.12);
background: #fff;
}

.actions{
display: grid;
grid-template-columns: 1fr auto;
gap: 8px 10px;
align-items: center;
margin-top: 2px;
}

.actions-left{
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: 11px;
color: #444;
}
.remember{
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.remember input{ transform: translateY(1px); }

.links{
display: inline-flex;
align-items: center;
gap: 6px;
white-space: nowrap;
}
.links a{
color: #444;
text-decoration: none;
}
.links a:hover{ text-decoration: underline; }
.sep{ color: #bbb; }

.btn-login{
height: 24px;
padding: 0 10px;
border: 1px solid #cfcfcf;
background: #efefef;
border-radius: 6px;
font-size: 11px;
cursor: pointer;
}
.btn-login:hover{ background: #e7e7e7; }

.social{
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 8px;
margin-top: 12px;
}
.social a{
height: 28px;
border-radius: 6px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 800;
font-size: 12px;
text-decoration: none;
border: 1px solid rgba(0,0,0,.08);
}
.s-g{ background: #ea4335; color: #fff; }
.s-f{ background: #1877f2; color: #fff; }
.s-k{ background: #fee500; color: #1b1b1b; }
.s-n{ background: #03c75a; color: #fff; }

.notice{
width: 100%;
max-width: 320px;
margin-top: 34px;
color: #d70000;
font-size: 11px;
line-height: 1.45;
text-align: center;
font-weight: 700;
}
.footer{
width: 100%;
max-width: 320px;
margin-top: auto;
padding-top: 26px;
color: #666;
font-size: 10px;
line-height: 1.45;
text-align: left;
}

@media (max-width: 980px){
.page{
grid-template-columns: 1fr;
grid-template-rows: 44vh auto;
}
.hero{ min-height: 44vh; }
.panel{ min-height: auto; }
.panel-inner{ padding: 34px 18px 26px; }
.card, .notice, .footer{ max-width: 360px; }
}