:root {
  color-scheme: light;
  font-family: Pretendard, "Noto Sans KR", system-ui, sans-serif;
  color: #172033;
  background: #eef2f7;
}

* { box-sizing: border-box; }
body { min-width: 320px; margin: 0; }
button, input { font: inherit; }
button:focus-visible, input:focus-visible { outline: 3px solid #76a9ff; outline-offset: 2px; }
.auth-shell { display: grid; min-height: 100vh; place-items: center; padding: 1rem; }
.auth-card { width: min(100%, 28rem); padding: 2rem; border: 1px solid #d7dee8; border-radius: 14px; background: white; box-shadow: 0 12px 30px #26364a20; }
.auth-card h1 { margin: .2rem 0 1.5rem; font-size: 1.7rem; }
.eyebrow { margin: 0; color: #1e63bd; font-size: .76rem; font-weight: 800; letter-spacing: .12em; }
form { display: grid; gap: 1rem; }
label { display: grid; gap: .35rem; color: #49566a; font-size: .86rem; font-weight: 750; }
input { min-height: 44px; padding: .6rem .75rem; border: 1px solid #aeb9c7; border-radius: 7px; }
button { min-height: 44px; padding: .6rem .9rem; border: 1px solid #1e63bd; border-radius: 7px; color: white; background: #1e63bd; cursor: pointer; font-weight: 800; }
button:disabled { cursor: wait; opacity: .55; }
.status { min-height: 1.5rem; margin: 1rem 0 0; color: #8c2525; white-space: pre-wrap; }

.admin-shell { max-width: 72rem; margin: auto; padding: 1.5rem; }
.admin-header, .toolbar, .dialog-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; }
.admin-header { margin-bottom: 1.25rem; }
.admin-header h1 { margin: 0; }
.panel { margin-bottom: 1rem; padding: 1.25rem; border: 1px solid #d7dee8; border-radius: 12px; background: white; }
.panel h2 { margin-top: 0; }
.toolbar { justify-content: start; }
.toolbar label { flex: 1 1 15rem; }
.toolbar button, .admin-header button, .user-actions button, .dialog-actions button { min-height: 38px; }
.secondary { border-color: #aeb9c7; color: #24344e; background: white; }
.danger { border-color: #b83838; background: #b83838; }
.table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: .7rem; border-bottom: 1px solid #dce3ec; text-align: left; }
.user-actions { display: flex; flex-wrap: wrap; gap: .4rem; }
dialog { width: min(28rem, calc(100vw - 2rem)); padding: 1.25rem; border: 1px solid #aeb9c7; border-radius: 12px; }
dialog::backdrop { background: #14213d88; }
dialog h2 { margin-top: 0; }
.dialog-actions { justify-content: end; }

@media (max-width: 600px) {
  .admin-shell { padding: .8rem; }
  th:nth-child(2), td:nth-child(2) { display: none; }
}