/* 로그인·첫 설정·내 계정·사용자 관리 화면 공통 스타일.
   index.html 의 색과 맞춰 두었습니다. */
:root {
  --accent: #c0563c;
  --accent-dark: #a4472f;
  --accent-soft: #fff8ee;
  --accent-soft-border: #f2e2a4;
  --panel: #f4f0e9;
  --line: #e5e1da;
  --sub-light: #a39c92;
  --sub: #8a837a;
  --ink: #2e2b27;
  --danger: #a4472f;
  --danger-soft: #fbeeea;
  --danger-soft-border: #ecc9bc;
  --success: #3b8a5a;
  --success-soft: #f0f7f2;
  --success-soft-border: #cfe3d5;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body {
  margin: 0;
  background: #faf7f2;
  font-family: Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", -apple-system, sans-serif;
  color: var(--ink);
}

/* ───── 가운데 정렬 화면 (로그인 / 첫 설정) ───── */
body.centered {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 40px 20px;
}
.login-wrap { width: 100%; max-width: 380px; }
.brand { text-align: center; margin-bottom: 22px; }
.brand .mark {
  width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 14px;
  background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px;
}
.brand h1 { font-size: 17px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 6px; line-height: 1.4; }
.brand .sub { font-size: 12.5px; color: var(--sub); }

/* ───── 일반 화면 (내 계정 / 사용자 관리) ───── */
body.page { padding: 32px 16px 80px; }
.wrap { max-width: 860px; margin: 0 auto; }
.top-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 26px;
}
.top-row h1 { font-size: 20px; margin: 0; font-weight: 800; letter-spacing: -.02em; }
.top-actions { display: flex; align-items: center; gap: 10px; }
.back {
  display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 700;
  color: var(--sub); text-decoration: none; margin-bottom: 14px;
}
.back:hover { color: var(--ink); }
.page-sub { font-size: 13.5px; color: var(--sub); margin: 0 0 22px; }

/* ───── 카드 / 폼 ───── */
.card {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 26px; margin-bottom: 20px; box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}
.card h2 { font-size: 15px; margin: 0 0 16px; font-weight: 800; }
.card.narrow { max-width: 440px; }

.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12.5px; color: var(--sub); margin-bottom: 6px; font-weight: 600; }
.field input, .field select {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 8px;
  font-size: 14px; background: #fff; color: var(--ink); font-family: inherit;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--accent); }
.field input.err { border-color: var(--danger); }
.hint { font-size: 11.5px; color: var(--sub-light); margin: 5px 0 0; line-height: 1.5; }
.field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.field-row > .field { flex: 1 1 200px; }

/* ───── 버튼 ───── */
button.submit {
  width: 100%; font-size: 16px; font-weight: 700; border: none; border-radius: 11px;
  padding: 16px 24px; cursor: pointer; background: var(--accent); color: #fff;
  font-family: inherit; transition: background .15s, transform .1s;
  box-shadow: 0 2px 6px rgba(192, 86, 60, 0.28);
}
button.submit:hover { background: var(--accent-dark); transform: translateY(-1px); }
button.submit:disabled { background: var(--sub-light); cursor: not-allowed; box-shadow: none; transform: none; }
button.submit.inline { width: auto; font-size: 14px; padding: 11px 20px; }

.btn-small {
  font-size: 12.5px; font-weight: 700; padding: 8px 13px; border-radius: 7px;
  background: var(--panel); color: var(--ink); border: 1px solid var(--line); cursor: pointer;
  font-family: inherit; white-space: nowrap; text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 5px;
}
.btn-small:hover { background: var(--line); }
.btn-small.danger { color: var(--danger); }
.btn-small:disabled { opacity: .4; cursor: not-allowed; }

.spinner {
  display: none; width: 15px; height: 15px; border: 2.5px solid #fff;
  border-top-color: transparent; border-radius: 50%; margin-right: 8px;
  vertical-align: -3px; animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
button.submit.loading .spinner { display: inline-block; }

/* ───── 알림 ───── */
.login-msg, .msg {
  display: none; font-size: 12.5px; padding: 10px 12px; border-radius: 8px;
  margin-bottom: 14px; line-height: 1.5;
}
.login-msg.show, .msg.show { display: block; }
.login-msg.error, .msg.error {
  background: var(--danger-soft); color: var(--danger); border: 1px solid var(--danger-soft-border);
}
.msg.success {
  background: var(--success-soft); color: var(--success); border: 1px solid var(--success-soft-border);
}

/* ───── 표 ───── */
.table-wrap { overflow-x: auto; margin: 0 -26px; padding: 0 26px; }
table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
thead th {
  text-align: left; font-size: 12px; font-weight: 700; color: var(--sub); white-space: nowrap;
  background: var(--panel); padding: 11px 12px;
}
thead th:first-child { border-radius: 8px 0 0 8px; }
thead th:last-child { border-radius: 0 8px 8px 0; }
tbody td { padding: 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
tbody tr:last-child td { border-bottom: none; }
.badge {
  display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 700;
  border: 1px solid var(--line); background: #fff; white-space: nowrap;
}
.badge.admin { color: var(--accent-dark); background: var(--accent-soft); border-color: var(--accent-soft-border); }
.muted { color: var(--sub); }
.row-actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.pw-input { width: 150px; padding: 8px 10px; font-size: 13px; border: 1px solid var(--line); border-radius: 7px; font-family: inherit; }