:root {
  color-scheme: light;
  font-family: Pretendard, Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: #161513;
  background: #f2eee7;
}

* { box-sizing: border-box; }

body { margin: 0; }

.auth-shell {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background:
    radial-gradient(circle at 15% 15%, rgb(205 48 40 / 13%), transparent 32%),
    linear-gradient(145deg, #f8f5ef, #ebe4da);
}

.auth-card {
  width: min(100%, 470px);
  padding: clamp(32px, 7vw, 56px);
  border: 1px solid rgb(58 49 40 / 12%);
  border-radius: 30px;
  background: rgb(255 255 255 / 88%);
  box-shadow: 0 28px 80px rgb(48 38 29 / 12%);
  backdrop-filter: blur(18px);
}

.auth-brand {
  color: #cb3129;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .17em;
  text-decoration: none;
}

.auth-eyebrow {
  margin: 40px 0 10px;
  color: #8a8177;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .16em;
}

h1 { margin: 0; font-size: clamp(36px, 8vw, 54px); letter-spacing: -.055em; }
.auth-copy { margin: 14px 0 32px; color: #716961; line-height: 1.65; }
.auth-error { padding: 13px 15px; border-radius: 12px; color: #9d211b; background: #fff0ee; font-size: 14px; }
.auth-form { display: grid; gap: 18px; }
.auth-form label { display: grid; gap: 8px; font-size: 13px; font-weight: 700; }
.auth-form input:not([type="hidden"]) { width: 100%; min-height: 50px; padding: 0 15px; border: 1px solid #d8d0c6; border-radius: 12px; background: #fff; font: inherit; }
.auth-form input:focus { outline: 3px solid rgb(203 49 41 / 15%); border-color: #cb3129; }
.auth-form button { min-height: 52px; border: 0; border-radius: 13px; color: #fff; background: #191715; font: inherit; font-weight: 800; cursor: pointer; }
.auth-form button:hover { background: #cb3129; }
.auth-form button.secondary { margin-top: 14px; color: #191715; background: #e9e3da; }
.role-list { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 10px; padding: 0; list-style: none; }
.role-list li { padding: 7px 10px; border-radius: 999px; color: #8f241f; background: #fff0ee; font-size: 12px; font-weight: 750; }
.account-actions { margin: 22px 0 4px; }
.account-actions a { display:flex; justify-content:space-between; align-items:center; min-height:50px; padding:0 16px; border:1px solid #d8d0c6; border-radius:13px; color:#191715; background:#fff; font-size:14px; font-weight:800; text-decoration:none; }
.account-actions a:hover { border-color:#cb3129; color:#cb3129; }
.auth-divider { display: flex; align-items: center; gap: 12px; margin: 26px 0 16px; color: #a39a8f; font-size: 12px; font-weight: 700; }
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: #e4dccf; }
.auth-social { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.auth-social a { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 48px; border-radius: 12px; font-size: 13px; font-weight: 800; text-decoration: none; }
.auth-social a svg { width: 16px; height: 16px; flex-shrink: 0; }
.auth-social a.google { border: 1px solid #d8d0c6; color: #191715; background: #fff; }
.auth-social a.google:hover { background: #f7f4ee; }
.auth-social a.naver { color: #fff; background: #03c75a; }
.auth-social a.naver:hover { filter: brightness(.95); }
.auth-social a.kakao { color: #191919; background: #fee500; }
.auth-social a.kakao:hover { filter: brightness(.95); }