/* 88케어 v3 공통 모양. 뉴88케어 디자인 시스템 토큰을 따른다. */
:root {
  --cw-bg: #f4f5f7;
  --cw-paper: #ffffff;
  --cw-text: #232c38;
  --cw-muted: #657080;
  --cw-main: #d5ecfb;
  --cw-soft: #e9f3fb;
  --cw-purple: #286180;
  --cw-green: #207854;
  --cw-orange: #8b5d17;
  --cw-line: #edf0f3;
  --cw-danger: #a33a32;
  --radius-box: 14px;
  --radius-input: 10px;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--cw-bg);
  color: var(--cw-text);
  font: 400 14px/1.5 "Pretendard Variable", Pretendard, "Malgun Gothic", "Apple SD Gothic Neo", system-ui, sans-serif;
}
.page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.card {
  width: 100%; max-width: 380px; background: var(--cw-paper);
  border-radius: var(--radius-box); padding: 28px 24px; box-shadow: 0 1px 2px rgba(35, 44, 56, .06);
}
h1 { font-size: 21px; font-weight: 700; margin: 0 0 4px; }
.sub { color: var(--cw-muted); font-size: 12px; margin: 0 0 20px; }
label { display: block; font-size: 14px; line-height: 20px; color: var(--cw-muted); margin: 0 0 6px; font-weight: 500; }
.field { margin-bottom: 12px; }
input {
  width: 100%; height: 40px; border: 1px solid var(--cw-line); border-radius: var(--radius-input);
  padding: 0 12px; font: inherit; font-size: 16px; line-height: 24px; color: var(--cw-text); background: var(--cw-paper);
}
input:focus { outline: 2px solid var(--cw-main); border-color: var(--cw-purple); }
button, .button {
  display: inline-flex; align-items: center; justify-content: center; width: 100%; height: 40px; margin-top: 8px;
  border: 0; border-radius: var(--radius-input); background: var(--cw-purple); color: #fff;
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
button.secondary, .button.secondary { background: var(--cw-soft); color: var(--cw-purple); }
button[disabled] { opacity: .6; cursor: progress; }
.message { display: none; margin-top: 16px; padding: 12px; border-radius: var(--radius-input); background: var(--cw-soft); font-size: 14px; }
.message.show { display: block; }
.message.error { background: #fbeceb; color: var(--cw-danger); }
.message dt { font-weight: 600; float: left; clear: left; width: 64px; }
.message dd { margin: 0 0 4px 64px; }