:root {
  color-scheme: light;
  font-family: Pretendard, "Noto Sans KR", system-ui, sans-serif;
  color: #1b2430;
  background: #eef4ff;
}

* { box-sizing: border-box; }

body { margin: 0; min-width: 320px; }

.app-shell {
  display: grid;
  min-height: 100vh;
  place-items: center;
  padding: 24px;
  background: radial-gradient(circle at top right, #d9ecff, transparent 38%), #f7f9fc;
}

.card {
  width: min(100%, 600px);
  padding: clamp(28px, 6vw, 48px);
  background: #fff;
  border: 1px solid #dce5f1;
  border-radius: 20px;
  box-shadow: 0 16px 40px rgb(49 73 108 / 12%);
}

.eyebrow { margin: 0; color: #2563eb; font-size: .8rem; font-weight: 800; letter-spacing: .12em; }
h1 { margin: 10px 0; font-size: clamp(2rem, 7vw, 3rem); }
.intro { margin: 0 0 32px; color: #526275; line-height: 1.65; }
label { display: block; margin-bottom: 8px; font-weight: 700; }
.input-row { display: flex; gap: 10px; }
input, button { min-height: 50px; border-radius: 10px; font: inherit; }
input { width: 100%; padding: 0 14px; border: 1px solid #b8c6d9; }
input:focus { outline: 3px solid #bfdbfe; border-color: #2563eb; }
button { flex: 0 0 auto; padding: 0 20px; border: 0; background: #2563eb; color: #fff; cursor: pointer; font-weight: 800; }
button:hover { background: #1d4ed8; }
.input-help { margin: 8px 0 0; color: #718096; font-size: .9rem; }
.result { margin-top: 24px; padding: 16px; border-radius: 10px; font-weight: 700; line-height: 1.5; }
.success { color: #166534; background: #dcfce7; }
.warning { color: #92400e; background: #fef3c7; }
.error { color: #b42318; background: #fee4e2; }
details { margin-top: 30px; border-top: 1px solid #e2e8f0; padding-top: 20px; }
summary { cursor: pointer; color: #1d4ed8; font-weight: 700; }
details p { color: #526275; line-height: 1.6; }
pre { overflow-x: auto; padding: 16px; border-radius: 10px; background: #172033; color: #e5edf9; font-size: .84rem; }
@media (max-width: 460px) { .input-row { flex-direction: column; } button { width: 100%; } }