/* =========================================================
   HWASEON – Admin (register.css)
   - CRISP 톤 + Topbar
   - 중복 제거 / 정리본
   ========================================================= */

/* ============ 0) 토큰 ============ */
:root{
  /* 색상 */
  --bg:#f6f8fb;

  --panel:#ffffff;
  --ink:#0f172a;
  --ink-2:#334155;
  --muted:#64748b;
  --line:#e6eaf2;
  --brand:#111827;
  --accent:#2563eb;
  --danger:#ef4444;

  /* 효과/라운드 */
  --shadow:0 10px 30px rgba(15,23,42,.06);
  --radius:14px;
  --radius-sm:10px;

  /* 레이아웃 */
  --container-max:760px;
}

/* ============ 1) 베이스 ============ */
*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0; color:var(--ink); background:var(--bg);
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
.hidden{ display:none!important; }

/* 페이지 컨테이너 */
.container{ max-width:var(--container-max); margin:0 auto; padding:0 20px; }
.section{ padding-top:64px; }
.page-title{ margin:0 0 6px; color:var(--brand); font-size:28px; font-weight:800; line-height:1.25; }
.page-subtitle{ margin:0 0 14px; color:var(--muted); font-size:14px; }

/* ============ 2) Topbar ============ */
.site-header{
  position:sticky; top:0; z-index:10;
  background:#fff; border-bottom:1px solid var(--line);
  backdrop-filter:saturate(180%) blur(6px);
}
.site-header__inner{
  display:flex; align-items:center; justify-content:space-between; height:64px;
}
.brand__logo{ display:block; width:auto; height:28px; object-fit:contain; }
.site-nav a{ margin-left:22px; color:var(--ink-2); font-weight:600; text-decoration:none; }
.site-nav a:hover{ color:var(--brand); }
.nav-id{ margin-left:20px; color:#03bd9b; font-weight:700; letter-spacing:.2px; }

/* ============ 3) 페이지 레이아웃 ============ */
.admin-container{
  max-width:var(--container-max);
  margin:clamp(56px,10vh,96px) auto 48px;
  padding:0 18px;
}

/* “새 사용자 등록” 카드만 좁게 중앙 */ 
.admin-container .form-container:first-of-type{
  max-width:310px;
  margin:30px auto 24px;
}

/* ============ 4) 카드/버튼/폼 ============ */
.form-container{
  margin:30px 0; padding:16px 18px;
  background:var(--panel); border:1px solid var(--line);
  border-radius:var(--radius); box-shadow:var(--shadow);
}
.form-container h2{
  margin-top:20px; font-size:18px; font-weight:800; color:var(--brand); text-align:center;
}

/* 폼 그룹 */
.form-group1{ padding-top:17px; position:relative; }
.form-group2{ margin:10px 0 28px; position:relative; }
.form-group1 input,
.form-group2 input{
  width:100%; height:44px; padding:0 12px; font-size:14px;
  background:#fff; border:1px solid var(--line); border-radius:8px;
}
.form-group1 input:focus,
.form-group2 input:focus{
  outline:none; border-color:#d4def3; box-shadow:0 0 0 3px rgba(37,99,235,.08);
}

/* 버튼 */
.btn{
  height:36px; padding:0 12px;
  border:1px solid var(--line); border-radius:8px;
  background:#f4f6fb; color:#111827; font-weight:700; cursor:pointer;
}
.btn:hover{ background:#eef2f7; }
.btn--dark{ background:#111827; color:#fff; border-color:#111827; }
.btn--dark:hover{ background:#0c1220; }

/* 제출 버튼 */
.submit-btn{
  width:100%; height:40px; margin:6px 0 10px;
  background:#111827; color:#fff; font-weight:800; cursor:pointer;
  border:1px solid #111827; border-radius:8px;
}
.submit-btn:hover{ background:#0c1220; }

/* 메시지 */
#createUserMessage{ margin-top:10px; }
.success-message,.error-message{
  padding:9px 10px; border-radius:8px; font-weight:800; text-align:center;
}
.success-message{ background:#e7f6ee; color:#0f766e; border:1px solid #c4eadc; }
.error-message{ background:#fef2f2; color:#b91c1c; border:1px solid #f9d2d2; }

/* ============ 5) 사용자 표 래퍼 ============ */
.users-table-wrap{
  margin-top:3px; background:var(--panel);
  border:1px solid #ecf0f6;             /* 톤 미세 보정 */
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.users-table-scroll{
  max-height:250px; overflow:auto;      /* 헤더 + 5행 기준 */
}
.users-table-scroll::-webkit-scrollbar{ width:1px; height:1px; }
.users-table-scroll::-webkit-scrollbar-thumb{ background:#d9deea; border-radius:8px; }
.users-table-scroll::-webkit-scrollbar-track{ background:transparent; }

/* ============ 6) 사용자 표 (CRISP 톤) ============ */
.users-table{
  width:100%; table-layout:fixed;        /* 말줄임 안전 */
  border-collapse:separate; border-spacing:0;
  font-size:14px;
}

/* 헤더 */
.users-table thead th{
  position:sticky; top:0; z-index:1;
  background:#f6f8ff; color:#1f2b4d;
  font-weight:800; letter-spacing:.01em;
  padding:12px 14px;
  border-bottom:1px solid #e9eef7;
  white-space:nowrap; text-align:left;
}

/* 바디 셀 */
.users-table tbody td{
  padding:12px 14px;
  border-bottom:1px solid #eef2f7;
  vertical-align:middle; color:var(--ink);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* 행 상태 */
.users-table tbody tr:nth-child(even) td{ background:#fbfdff; }
.users-table tbody tr:hover td{ background:#f5f8ff; }

/* 좌우 가장자리 패딩 살짝 강화 */
.users-table th:first-child,
.users-table td:first-child{ padding-left:16px; }
.users-table th:last-child,
.users-table td:last-child{  padding-right:16px; }

/* 열 폭(아이디/비번/권한/관리) */
.users-table thead th:nth-child(1),
.users-table tbody td:nth-child(1){ width:120px; }
.users-table thead th:nth-child(2),
.users-table tbody td:nth-child(2){ width:110px; }
.users-table thead th:nth-child(3),
.users-table tbody td:nth-child(3){ width:90px; text-align:center; }
.users-table thead th:nth-child(4),
.users-table tbody td:nth-child(4){ width:80px; text-align:center; }

/* 권한 배지 */
.role-badge{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 10px; border-radius:999px;
  font-size:12px; font-weight:800;
  color:#0f172a; background:#f3f6fc; border:1px solid #e4eaf6;
}
.role-badge--admin{ color:#0b1220; background:#ecf2ff; border-color:#d7e4ff; }

/* 삭제 버튼(표 전용) – outline → hover 채움 */
.users-table .delete-btn{
  height:28px; padding:0 12px; border-radius:999px;
  font-weight:800; line-height:28px; cursor:pointer;
  background:#fff; color:var(--danger); border:1px solid #f6c9c9;
  transition:background .15s ease, color .15s ease, border-color .15s ease, filter .15s ease;
}
.users-table .delete-btn:hover{ background:#fff5f5; border-color:#f3b1b1; }

/* ============ 7) “사용자 표 컴팩트” 옵션 ============ */
/* 카드 폭 축소 + 내부 패딩 조정 */
.users-compact{ max-width:520px; margin:0 auto; padding:14px 16px; }

/* 폰트/패딩만 덴스 */
.users-compact .users-table{ font-size:13px; }
.users-compact .users-table thead th,
.users-compact .users-table tbody td{ padding:8px 10px; }

/* 1~2열 말줄임만 유지 */
.users-compact .users-table th:nth-child(1),
.users-compact .users-table td:nth-child(1),
.users-compact .users-table th:nth-child(2),
.users-compact .users-table td:nth-child(2){
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 권한/관리 컬럼은 자연 폭 */
.users-compact .users-table th:nth-child(3),
.users-compact .users-table td:nth-child(3),
.users-compact .users-table th:nth-child(4),
.users-compact .users-table td:nth-child(4){
  white-space:normal; overflow:visible; text-overflow:clip;
}
/* 컴팩트 배지/버튼 살짝 더 작게 */
.users-compact .role-badge{ padding:2px 8px; font-size:12px; }
.users-compact .delete-btn{ height:28px; padding:0 10px; font-size:12px; border-radius:8px; }

/* ============ 8) 보조 텍스트 ============ */
.muted{ color:#9aa3b2; }