:root{
  --f-body:"Noto Sans KR",Pretendard,"Malgun Gothic","Apple SD Gothic Neo",system-ui,-apple-system,"Segoe UI",sans-serif;
  --f-mono:"IBM Plex Mono",Consolas,"Courier New",monospace;
  --bg:#EDEFF1; --surface:#FFFFFF; --field-bg:#FFFFFF;
  --ink:#171C21; --ink2:#4B555E; --ink3:#7C868F; --line:#D3D8DD;
  --accent:#B7952A; --accent-ink:#7A6114; --accent-soft:#F4EFDF;
  --btn-bg:#1F262C; --btn-ink:#FFFFFF;
  --ok:#2E7D4F; --caution:#C98A1E; --ng:#B8352C;
  --okBg:#EAF6EF; --ngBg:#FDEDEC;
  --focus:0 0 0 3px rgba(183,149,42,.28);
  --shadow:0 1px 0 rgba(23,28,33,.06), 0 12px 28px rgba(23,28,33,.10);
  --r-card:4px; --r-field:3px; --r-btn:3px; --r-chip:3px;
}
@media (prefers-color-scheme:dark){
  html:not([data-mode="light"]){
    --bg:#0F1317; --surface:#171C21; --field-bg:#0F1317;
    --ink:#EDF0F2; --ink2:#B2BAC2; --ink3:#7F8993; --line:#2A3238;
    --accent:#C9A227; --accent-ink:#D9B44A; --accent-soft:#242A2F;
    --btn-bg:#C9A227; --btn-ink:#171C21;
    --ok:#3ECF8E; --caution:#F5B923; --ng:#FF6B5E;
    --okBg:rgba(62,207,142,.14); --ngBg:rgba(255,107,94,.13);
    --focus:0 0 0 3px rgba(201,162,39,.40);
    --shadow:0 20px 50px rgba(0,0,0,.5);
  }
}
html[data-mode="dark"]{
  --bg:#0F1317; --surface:#171C21; --field-bg:#0F1317;
  --ink:#EDF0F2; --ink2:#B2BAC2; --ink3:#7F8993; --line:#2A3238;
  --accent:#C9A227; --accent-ink:#D9B44A; --accent-soft:#242A2F;
  --btn-bg:#C9A227; --btn-ink:#171C21;
  --ok:#3ECF8E; --caution:#F5B923; --ng:#FF6B5E;
  --okBg:rgba(62,207,142,.14); --ngBg:rgba(255,107,94,.13);
  --focus:0 0 0 3px rgba(201,162,39,.40);
  --shadow:0 20px 50px rgba(0,0,0,.5);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{min-height:100%;overflow-x:hidden}
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--f-body); font-size:16px; line-height:1.5;
  -webkit-text-size-adjust:100%;
}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
.hide{display:none !important}
.wrap{max-width:420px;margin:0 auto;min-height:100dvh;display:flex;flex-direction:column}
.top{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 20px;border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:12px}
.brand .mark{display:block;color:var(--ink)}
.wordmark{font-weight:800;font-size:22px;letter-spacing:-.02em;line-height:1;color:var(--ink);display:inline-flex;gap:.18em;align-items:baseline}
.wordmark b{font-weight:900}
.wordmark i{font-style:normal;color:var(--accent-ink);font-weight:800}
.tbtn{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:var(--r-chip);color:var(--ink3);border:1px solid transparent}
.tbtn:hover{color:var(--accent-ink);border-color:var(--line)}
.tbtn:focus-visible{outline:none;box-shadow:var(--focus)}
.tbtn .i{display:none}
html[data-mode="auto"] .i-auto, html[data-mode="light"] .i-sun, html[data-mode="dark"] .i-moon{display:block}
.main{padding:20px 16px 32px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);box-shadow:var(--shadow);padding:22px 18px 24px}
.eyebrow{display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.14em;color:var(--accent-ink);margin-bottom:10px;font-family:var(--f-mono);text-transform:uppercase}
h1{font-size:22px;font-weight:900;letter-spacing:-.02em;line-height:1.28;word-break:keep-all}
.lead{margin-top:8px;margin-bottom:18px;font-size:14px;color:var(--ink2);word-break:keep-all}
.field{margin:0 0 14px}
.field label, .field .lab{
  display:block;margin:0 0 6px;
  font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--ink2)
}
.field input, .field textarea{
  width:100%; max-width:100%;
  height:56px; padding:0 14px;
  border-radius:var(--r-field); border:1px solid var(--line);
  background:var(--field-bg); color:var(--ink);
  font-size:16px; font-family:inherit;
}
.field textarea{height:auto;min-height:112px;padding:12px 14px;resize:vertical;line-height:1.45}
.field input:focus, .field textarea:focus{outline:none;border-color:var(--accent);box-shadow:var(--focus)}
.hint{margin:6px 0 0;font-size:13px;color:var(--ink2);line-height:1.4}
.err{margin:6px 0 0;font-size:13px;font-weight:700;color:var(--ng);min-height:0}
.err:not(:empty){background:var(--ngBg);border:1px solid var(--ng);border-radius:var(--r-field);padding:8px 10px}
.btn{
  display:block;width:100%;min-height:56px;margin-top:8px;
  border-radius:var(--r-btn); border:1px solid transparent;
  background:var(--btn-bg); color:var(--btn-ink);
  font-size:16px;font-weight:700
}
.btn:focus-visible{outline:none;box-shadow:var(--focus)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.app-name{margin:0 0 12px;padding:10px 12px;border-radius:var(--r-field);background:var(--accent-soft);color:var(--accent-ink);font-weight:800}
.readonly{min-height:56px;display:flex;align-items:center;padding:0 14px;border:1px dashed var(--line);border-radius:var(--r-field);color:var(--ink);font-weight:700}
.agree{display:flex;align-items:flex-start;gap:10px;margin:8px 0 10px;font-size:14px;color:var(--ink2);line-height:1.45}
.agree input{width:22px;height:22px;margin-top:2px;flex:0 0 22px}
.alt{margin:14px 0 0;text-align:center}
.linkbtn{color:var(--accent-ink);font-weight:700;font-size:14px;border-bottom:1px solid currentColor;padding:4px 0}
.locked{opacity:.48;pointer-events:none}
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.receipt-big{margin:12px 0 8px;font-size:28px;font-weight:900;letter-spacing:.04em;word-break:break-all;color:var(--ink)}
.status-box{margin-top:22px;padding-top:18px;border-top:1px solid var(--line)}
.status-box h2{font-size:16px;font-weight:800;margin:0 0 12px}
.status-view{margin-top:14px}
.status-card{padding:12px 14px;border-radius:var(--r-card);border:1px solid var(--line);background:var(--bg)}
.status-card.wait{border-color:var(--caution)}
.status-card.ok{border-color:var(--ok);background:var(--okBg)}
.status-card.ng{border-color:var(--ng);background:var(--ngBg)}
.status-card b{display:block;margin-bottom:6px}
.status-card .login-btn{
  display:inline-flex;align-items:center;justify-content:center;
  margin-top:10px;min-height:48px;padding:0 16px;border-radius:var(--r-btn);
  background:var(--btn-bg);color:var(--btn-ink);font-weight:700;font-size:15px
}
@media (min-width:900px){
  .wrap{max-width:480px}
  .main{padding:28px 20px 40px}
}
@media (prefers-reduced-motion:reduce){ *{transition:none !important} }