/* =====================================================================
   login.css — 로그인 페이지 (간편인증 / 공동·금융인증서 / 아이디 / 디지털원패스)
   ===================================================================== */

.login-wrap { padding: var(--sp-48) 0 var(--sp-80); background: var(--c-gray-5); }
.login-head { text-align: center; margin-bottom: var(--sp-32); }
.login-head h2 { font-size: var(--fs-heading-l); font-weight: 800; color: var(--c-gray-90); }
.login-head p { margin-top: var(--sp-8); color: var(--c-gray-60); font-size: var(--fs-body-s); }

.login-grid { display: grid; grid-template-columns: minmax(0,1fr) 32rem; gap: var(--sp-24); align-items: start; }
@media (max-width: 900px){ .login-grid { grid-template-columns: 1fr; } }

.login-card { background: #fff; border: 1px solid var(--c-gray-10); border-radius: var(--radius-l); box-shadow: var(--shadow-1); overflow: hidden; }

/* 탭 */
.login-tabs { display: grid; grid-template-columns: repeat(4, 1fr); background: var(--c-gray-5); border-bottom: 1px solid var(--c-gray-10); }
.login-tabs button {
  height: 6.0rem; border: 0; background: transparent; font-size: var(--fs-body-m); font-weight: 700;
  color: var(--c-gray-50); border-bottom: 3px solid transparent;
}
.login-tabs button[aria-selected="true"] { background: #fff; color: var(--c-accent); border-bottom-color: var(--c-accent); }
@media (max-width:600px){ .login-tabs { grid-template-columns: repeat(2,1fr); } .login-tabs button { height: 5.2rem; font-size: var(--fs-body-s);} }

.login-panel { padding: var(--sp-32); }
.login-panel[hidden] { display: none; }

/* 간편인증 제공자 그리드 */
.provider-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-12); margin-bottom: var(--sp-24); }
@media (max-width:600px){ .provider-grid { grid-template-columns: repeat(3,1fr);} }
.provider {
  display: flex; flex-direction: column; align-items: center; gap: var(--sp-8);
  border: 1px solid var(--c-gray-20); border-radius: var(--radius-m); padding: var(--sp-16) var(--sp-8);
  background: #fff; font-size: var(--fs-body-xs); color: var(--c-gray-70); font-weight: 600;
}
.provider:hover { border-color: var(--c-accent); box-shadow: var(--shadow-1); }
.provider__ico { width: 4.0rem; height: 4.0rem; border-radius: var(--radius-m); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.5rem; }

/* 입력 필드 */
.field { margin-bottom: var(--sp-16); }
.field label { display: block; font-size: var(--fs-body-s); font-weight: 600; color: var(--c-gray-70); margin-bottom: var(--sp-6); }
.field input[type=text], .field input[type=password] {
  width: 100%; height: 5.2rem; border: 1px solid var(--c-gray-30); border-radius: var(--radius-s);
  padding: 0 var(--sp-16); font-size: var(--fs-body-m); background: #fff;
}
.field input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-primary-10); }
.input-keypad { position: relative; }
.input-keypad .keypad-btn {
  position: absolute; right: var(--sp-8); top: 50%; transform: translateY(-50%);
  height: 3.6rem; padding: 0 var(--sp-12); border: 1px solid var(--c-gray-20); border-radius: var(--radius-s);
  background: var(--c-gray-5); font-size: var(--fs-body-xs); color: var(--c-gray-60);
}

.login-options { display: flex; align-items: center; justify-content: space-between; margin: var(--sp-12) 0 var(--sp-20); font-size: var(--fs-body-s); }
.login-options label { display: inline-flex; align-items: center; gap: var(--sp-6); color: var(--c-gray-60); }
.login-links { display: flex; gap: var(--sp-12); align-items: center; justify-content: center; margin-top: var(--sp-20); color: var(--c-gray-50); font-size: var(--fs-body-s); }
.login-links a { color: var(--c-gray-60); }
.login-links .sep { color: var(--c-gray-20); }

.cert-list { border: 1px solid var(--c-gray-20); border-radius: var(--radius-s); max-height: 18rem; overflow:auto; background:#fff; margin-bottom: var(--sp-16); }
.cert-loc-tabs { display:flex; gap: var(--sp-4); margin-bottom: var(--sp-12); flex-wrap:wrap; }
.cert-loc { border:1px solid var(--c-gray-20); background:#fff; border-radius: var(--radius-s); padding: var(--sp-8) var(--sp-12); font-size: var(--fs-body-xs); color: var(--c-gray-60); }
.cert-loc.is-active { border-color: var(--c-accent); color: var(--c-accent); font-weight:700; }
.cert-item { display:flex; align-items:center; gap: var(--sp-10); padding: var(--sp-12) var(--sp-16); border-bottom:1px solid var(--c-gray-10); cursor:pointer; }
.cert-item:last-child { border-bottom:0; }
.cert-item:hover { background: var(--c-gray-5); }
.cert-item .cn { display:flex; flex-direction:column; font-size: var(--fs-body-s); }
.cert-item .cn small { color: var(--c-gray-50); font-size: var(--fs-body-xs); margin-top:2px; }

/* 보안 가상키패드 */
.vkeypad-back { position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:300; display:flex; align-items:center; justify-content:center; }
.vkeypad { background:#2a2d33; border-radius: var(--radius-l); padding: var(--sp-12); box-shadow: var(--shadow-3); width:30rem; }
.vkeypad__head { color:#fff; font-size: var(--fs-body-s); font-weight:700; display:flex; justify-content:space-between; align-items:center; margin-bottom: var(--sp-8); }
.vkeypad__head button { background:none; border:0; color:#cdd1d5; font-size: var(--fs-body-m); }
.vkeypad__grid { display:grid; grid-template-columns:repeat(4,1fr); gap: var(--sp-6); }
.vkeypad__grid button { background:#4a4e55; color:#fff; border:0; border-radius: var(--radius-s); height:4.4rem; font-size: var(--fs-body-l); font-weight:700; }
.vkeypad__grid button:hover { background:#5a606a; }
.vkeypad__grid button.fn { background:#33363d; color:#b1b8be; font-size: var(--fs-body-s); }

.login-notice { display:flex; gap: var(--sp-8); align-items:flex-start; background: var(--c-primary-5); border: 1px solid var(--c-primary-20); color: var(--c-primary-70); border-radius: var(--radius-s); padding: var(--sp-12) var(--sp-16); font-size: var(--fs-body-s); margin-bottom: var(--sp-20); }

/* 사이드: SSO/안내 */
.login-side { display: flex; flex-direction: column; gap: var(--sp-16); }
.side-box { background:#fff; border:1px solid var(--c-gray-10); border-radius: var(--radius-l); padding: var(--sp-24); }
.side-box h3 { font-size: var(--fs-heading-xs); font-weight: 800; margin-bottom: var(--sp-12); color: var(--c-gray-90); }
.side-box p { font-size: var(--fs-body-s); color: var(--c-gray-60); line-height: 1.6; }
.sso-badge { display:inline-flex; align-items:center; gap: var(--sp-6); font-size: var(--fs-body-xs); font-weight:700; color: var(--c-accent-strong); background: var(--c-primary-5); border:1px solid var(--c-primary-20); border-radius: var(--radius-max); padding: var(--sp-4) var(--sp-12); margin-bottom: var(--sp-12); }
.side-links li { border-top: 1px solid var(--c-gray-10); }
.side-links li:first-child { border-top: 0; }
.side-links a { display:flex; justify-content: space-between; align-items:center; padding: var(--sp-12) 0; font-size: var(--fs-body-s); color: var(--c-gray-70); }
.side-links a:hover { color: var(--c-accent); text-decoration:none; }

.terms-all { display:flex; align-items:center; gap: var(--sp-8); padding: var(--sp-12) var(--sp-16); border:1px solid var(--c-gray-20); border-radius: var(--radius-s); font-weight:700; font-size: var(--fs-body-s); margin-bottom: var(--sp-16); }

/* 간편인증 진행 단계 */
.provider.is-selected { border-color: var(--c-accent); box-shadow: 0 0 0 2px var(--c-primary-10); }
.auth-waiting { text-align:center; padding: var(--sp-32) var(--sp-8); }
.auth-waiting .spinner { width:5.6rem; height:5.6rem; border:5px solid var(--c-primary-10); border-top-color: var(--c-accent); border-radius:50%; margin: var(--sp-16) auto; animation: govspin .9s linear infinite; }
@keyframes govspin { to { transform: rotate(360deg); } }
.auth-waiting h3 { font-size: var(--fs-heading-xs); margin-bottom: var(--sp-8); color: var(--c-gray-90); }
.auth-waiting p { color: var(--c-gray-60); font-size: var(--fs-body-s); }
.auth-waiting .countdown { font-size: var(--fs-heading-m); font-weight:800; color: var(--c-accent); margin: var(--sp-12) 0; font-variant-numeric: tabular-nums; }
.auth-step-hint { font-size: var(--fs-body-xs); color: var(--c-gray-50); margin-bottom: var(--sp-12); }