/* Hello English 학사관리 — 청사진과 동일한 톤(네이비/골드/페이퍼)을 그대로 사용 */
:root{
  --paper:#F6F3EC; --surface:#FFFFFF; --surface-2:#FBF9F3;
  --ink:#22262B; --ink-soft:#5B6068; --ink-faint:#8B909A;
  --line:#E1DCCC; --line-strong:#CBC4AC;
  --navy:#1F3A5F; --navy-soft:#E7EDF4;
  --gold:#93641F; --gold-soft:#F3E7D2;
  --ok:#2A7A4C; --warn:#B0630F; --danger:#B0281F;
  --shadow:0 1px 2px rgba(30,26,16,.06), 0 8px 24px -12px rgba(30,26,16,.12);
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--paper); color:var(--ink);
  font-family:'Noto Sans KR','Noto Sans',-apple-system,sans-serif; line-height:1.6;
}
a{color:var(--navy); text-decoration:none;}
a:hover{text-decoration:underline;}

header.topbar{
  background:var(--surface); border-bottom:1px solid var(--line);
  padding:16px 24px; display:flex; align-items:center; justify-content:space-between;
  position:sticky; top:0; z-index:5;
}
header.topbar .brand{font-weight:700; color:var(--navy); font-size:1.1rem;}
header.topbar .env-badge{
  font-size:.72rem; padding:3px 9px; border-radius:999px; background:var(--gold-soft); color:var(--gold);
  font-family:monospace; margin-left:10px;
}
header.topbar nav{display:flex; align-items:center; gap:16px;}
header.topbar .user-chip{font-size:.85rem; color:var(--ink-soft);}

main{max-width:1080px; margin:0 auto; padding:24px;}

.stat-row{display:flex; gap:12px; flex-wrap:wrap; margin-bottom:20px;}
.stat-card{
  background:var(--surface); border:1px solid var(--line); border-radius:12px;
  padding:14px 18px; box-shadow:var(--shadow); min-width:110px;
}
.stat-card .num{font-size:1.5rem; font-weight:700; color:var(--navy); font-family:monospace;}
.stat-card .label{font-size:.78rem; color:var(--ink-faint);}

.toolbar{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom:16px;
}
.toolbar input[type=text], .toolbar select{
  padding:9px 12px; border:1px solid var(--line-strong); border-radius:8px;
  font-size:.9rem; background:var(--surface); color:var(--ink);
}
.toolbar button{
  padding:9px 16px; border-radius:8px; border:1px solid var(--navy);
  background:var(--navy); color:#fff; font-size:.9rem; cursor:pointer;
}
.toolbar button:hover{opacity:.9;}

table.roster{
  width:100%; border-collapse:collapse; background:var(--surface);
  border:1px solid var(--line); border-radius:12px; overflow:hidden; box-shadow:var(--shadow);
}
table.roster th, table.roster td{
  text-align:left; padding:11px 14px; border-bottom:1px solid var(--line); font-size:.88rem;
}
table.roster thead th{
  background:var(--surface-2); font-size:.72rem; text-transform:uppercase; letter-spacing:.04em;
  color:var(--ink-faint);
}
table.roster tbody tr:hover{background:var(--surface-2);}
table.roster tbody tr:last-child td{border-bottom:none;}

.avatar{
  width:34px; height:34px; border-radius:50%; background:var(--navy-soft); color:var(--navy);
  display:inline-flex; align-items:center; justify-content:center; font-size:.8rem; font-weight:700;
  vertical-align:middle; margin-right:8px; overflow:hidden;
}
.avatar img{width:100%; height:100%; object-fit:cover;}

.badge{display:inline-flex; align-items:center; gap:5px; font-size:.78rem; padding:2px 9px; border-radius:999px;}
.badge.status-재원{background:#E4F3EA; color:var(--ok);}
.badge.status-휴회{background:var(--gold-soft); color:var(--gold);}
.badge.status-퇴회, .badge.status-강제퇴회{background:#F6E5E3; color:var(--danger);}
.badge.course-영검{background:var(--navy-soft); color:var(--navy);}
.badge.course-영회화{background:#EEE7F6; color:#5B3E96;}
.badge.invoice-발행대기{background:var(--gold-soft); color:var(--gold);}
.badge.invoice-발행완료{background:var(--navy-soft); color:var(--navy);}
.badge.invoice-입금완료{background:#E4F3EA; color:var(--ok);}

table.roster tfoot td{border-bottom:none; background:var(--surface-2); font-size:.88rem;}

.card{background:var(--surface); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); padding:20px 24px; margin-bottom:16px;}
.card h3{margin:0 0 12px; font-size:1rem; color:var(--navy);}
.field-grid{display:grid; grid-template-columns:140px 1fr; gap:8px 16px; font-size:.9rem;}
.field-grid dt{color:var(--ink-faint);}
.field-grid dd{margin:0;}

.back-link{display:inline-block; margin-bottom:14px; font-size:.88rem;}
.empty{color:var(--ink-faint); text-align:center; padding:40px 0;}

.flash-success{
  background:#E4F3EA; color:var(--ok); border:1px solid #BFE3CC; border-radius:8px;
  padding:10px 16px; margin-bottom:16px; font-size:.88rem;
}
.form-error{
  background:#F6E5E3; color:var(--danger); border:1px solid #E9BEB8; border-radius:8px;
  padding:10px 16px; margin-bottom:16px; font-size:.88rem;
}
.form-grid{display:flex; flex-direction:column; gap:16px; max-width:640px;}
.form-row{display:flex; flex-direction:column; gap:6px;}
.form-row label{font-size:.84rem; font-weight:600; color:var(--ink-soft);}
.form-row label .req{color:var(--danger);}
.form-row input[type=text], .form-row input[type=date], .form-row input[type=email],
.form-row input[type=file], .form-row select, .form-row textarea{
  padding:9px 12px; border:1px solid var(--line-strong); border-radius:8px;
  font-size:.9rem; background:var(--surface); color:var(--ink); font-family:inherit;
}
.form-row textarea{resize:vertical;}
.form-row-2{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
.form-actions{display:flex; gap:10px; justify-content:flex-end; margin-top:4px;}

.btn-primary, .btn-secondary, .btn-danger{
  display:inline-flex; align-items:center; padding:9px 16px; border-radius:8px;
  font-size:.9rem; cursor:pointer; text-decoration:none; border:1px solid transparent;
}
.btn-primary{background:var(--navy); color:#fff; border-color:var(--navy);}
.btn-primary:hover{opacity:.9; text-decoration:none;}
.btn-secondary{background:var(--surface); color:var(--ink); border-color:var(--line-strong);}
.btn-secondary:hover{background:var(--surface-2); text-decoration:none;}
.btn-danger{background:#fff; color:var(--danger); border-color:#E9BEB8; margin-right:auto;}
.btn-danger:hover{background:#F6E5E3; text-decoration:none;}
.btn-sm{padding:5px 12px; font-size:.8rem;}

@media (max-width:640px){
  .form-row-2{grid-template-columns:1fr;}
}

@media (max-width:640px){
  main{padding:14px;}
  table.roster thead{display:none;}
  table.roster, table.roster tbody, table.roster tr, table.roster td{display:block; width:100%;}
  table.roster tr{border-bottom:1px solid var(--line); padding:10px 14px;}
  table.roster td{border:none; padding:3px 0;}
  .field-grid{grid-template-columns:1fr;}
}