:root { color-scheme: light; --line: #e5e7eb; --c: #0e7490 }
* { box-sizing: border-box }
body { margin: 0; background: #f3f6f8; color: #1f2430; font: 16px/1.5 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif }
main { max-width: 640px; margin: 0 auto; padding: 20px 16px 60px }
h1 { font-size: 24px; margin: 8px 0 16px }
h2 { font-size: 18px; margin: 0 0 12px }
.card { background: #fff; border-radius: 16px; padding: 18px; margin: 12px 0; box-shadow: 0 1px 3px rgba(16,24,40,.08) }
.row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap }
.f { display: grid; gap: 6px; margin: 0 0 12px; font-size: 14px; color: #6b7280 }
input { font: inherit; padding: 10px 12px; border: 1.5px solid var(--line); border-radius: 10px; min-width: 0; flex: 1 }
button { font: inherit; font-weight: 650; padding: 10px 18px; border: 0; border-radius: 10px; background: var(--c); color: #fff; cursor: pointer }
button.ghost { background: transparent; color: var(--c); box-shadow: inset 0 0 0 1.5px var(--line) }
button:disabled { opacity: .5 }
.hint, .muted { color: #6b7280; font-size: 13px }
.warn { color: #b45309; background: #fff7e6; padding: 10px 12px; border-radius: 10px }
#toast { position: fixed; left: 50%; bottom: 24px; transform: translate(-50%, 20px); opacity: 0; transition: .2s; background: #1f2430; color: #fff;
  padding: 10px 16px; border-radius: 12px; pointer-events: none }
#toast.on { opacity: 1; transform: translate(-50%, 0) }