:root {
  font-family: Pretendard, "Noto Sans KR", system-ui, sans-serif;
  color: #1f2430;
  background: #ece9e2;
}
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; padding: 24px; }
.phone { width: min(100%, 430px); min-height: 820px; background: #faf9f6; border-radius: 36px; padding: 32px 24px; box-shadow: 0 24px 70px rgba(31, 36, 48, .15); }
header { padding: 14px 4px 22px; }
.eyebrow { font-size: 12px; letter-spacing: .16em; font-weight: 800; }
h1 { font-size: 38px; line-height: 1.13; margin: 14px 0; }
header p, footer, small { color: #6a6e78; line-height: 1.65; }
.card { display: none; background: white; border: 1px solid #e9e5dc; border-radius: 24px; padding: 22px; }
.card.active { display: block; }
h2 { margin-top: 0; }
label { display: grid; gap: 7px; margin: 14px 0; font-size: 14px; font-weight: 700; }
input, select { width: 100%; border: 1px solid #d8d4cb; border-radius: 12px; padding: 13px 14px; font: inherit; background: #fff; }
button { width: 100%; margin-top: 14px; border: 0; border-radius: 14px; padding: 15px; background: #272d3b; color: white; font-weight: 800; font-size: 15px; cursor: pointer; }
button.secondary { background: #eeece6; color: #353945; }
.pill { display: inline-block; border-radius: 999px; background: #f3ede1; color: #675a43; padding: 7px 10px; font-size: 12px; font-weight: 700; }
.score { display: grid; justify-items: center; padding: 24px; margin: 18px 0; border-radius: 20px; background: #f5f3ee; }
.score strong { font-size: 58px; line-height: 1; }
.score span { margin-top: 8px; color: #6a6e78; }
.summary { line-height: 1.7; }
.grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.grid article { padding: 16px; border: 1px solid #ece9e1; border-radius: 16px; display: flex; justify-content: space-between; }
footer { font-size: 11px; text-align: center; padding: 24px 10px 0; }