:root{
  --bg:#f6f7fb; --card:#fff; --txt:#111; --muted:#666;
  --pri:#1565c0; --danger:#b00020; --line:#e6e8ef;
}
*{box-sizing:border-box}
body{
  margin:0; font-family:system-ui,-apple-system,"Malgun Gothic",sans-serif;
  background:var(--bg); color:var(--txt);
}
.wrap{max-width:920px; margin:0 auto; padding:16px}
.card{
  background:var(--card); border:1px solid var(--line);
  border-radius:14px; padding:16px; box-shadow:0 10px 24px rgba(0,0,0,.05);
}
.row{display:flex; gap:10px; flex-wrap:wrap; align-items:center}
.row > *{flex:1}
label{font-size:13px; color:var(--muted)}
input,select,textarea,button{
  width:100%; padding:12px 12px; border-radius:12px;
  border:1px solid var(--line); font-size:16px;
}
button{
  background:var(--pri); color:#fff; border:none; cursor:pointer;
  font-weight:700;
}
button.secondary{background:#fff; color:var(--pri); border:1px solid var(--pri)}
button.danger{background:var(--danger)}
small{color:var(--muted)}
hr{border:none; border-top:1px solid var(--line); margin:14px 0}
h1{margin:0 0 10px 0; font-size:20px}
h2{margin:0; font-size:16px}
.err{color:var(--danger); font-weight:700; margin-top:10px}
.topbar{
  display:flex; justify-content:space-between; align-items:center; gap:10px;
  margin-bottom:12px;
}
.badge{
  display:inline-block; padding:6px 10px; border-radius:999px;
  background:#eef3ff; color:var(--pri); font-weight:700; font-size:13px;
}

/* 테이블 */
table{width:100%; border-collapse:collapse; margin-top:10px}
th,td{border-bottom:1px solid var(--line); padding:10px 8px; text-align:left}
th{font-size:13px; color:var(--muted); font-weight:800}
td{font-size:15px}
.statePresent{color:#2e7d32; font-weight:800}
.stateAbsent{color:#b00020; font-weight:800}

/* ✅ 폰에서 이름 줄바꿈 방지 */
.nameCell{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width: 1px; /* table ellipsis 트릭 */
}

/* 모바일 */
@media (max-width:520px){
  .wrap{padding:12px}
  th:nth-child(1), td:nth-child(1){width:44px}
}