:root{
  --bg:#ffffff;
  --card:#ffffff;
  --text:#111111;
  --muted:#666666;
  --border:#e5e5e5;
  --shadow: 0 8px 24px rgba(0,0,0,.06);
  --radius:16px;
  --gap:12px;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
}

.wrap{
  max-width: 920px;
  margin: 0 auto;
  padding: 20px;
}

h1{
  margin: 0 0 14px;
  font-size: clamp(18px, 2.4vw, 24px);
  letter-spacing: -0.2px;
}

.card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

/* ===== 폼 ===== */
.form-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  align-items:end;
}

.field label{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

input, select, button, textarea{
  width:100%;
  font-size: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  background:#fff;
}

input:focus, select:focus, textarea:focus{
  border-color:#bdbdbd;
  box-shadow: 0 0 0 4px rgba(0,0,0,.06);
}

/* ===== 버튼 ===== */
.btns{
  display:grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--gap);
  margin-top: 12px;
}

button{
  cursor:pointer;
  font-weight:600;
  border:1px solid var(--border);
  background:#f6f6f6;
  min-height:44px;
}

button.primary{
  background:#111;
  color:#fff;
  border-color:#111;
}

button:disabled{
  opacity:.5;
  cursor:not-allowed;
}

/* ===== 결과 ===== */
.result{
  margin-top:14px;
  display:grid;
  gap:10px;
}

textarea{
  min-height:320px;
  resize:vertical;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
}

.hint{
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}

.status{
  font-size:12px;
  color:var(--muted);
}

/* ===== 반응형 ===== */
@media (max-width: 820px){
  .form-grid{ grid-template-columns: repeat(2, 1fr); }
  .btns{ grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 520px){
  .wrap{ padding:14px; }
  .form-grid{ grid-template-columns: 1fr; }
  .btns{ grid-template-columns: 1fr; }
  textarea{ min-height:260px; }
}