<div class="dc-amt">
<label class="dc-amt__label" for="dc-amt-a">보낼 금액 (원)</label>
<div class="dc-amt__field">
<input class="dc-amt__input" id="dc-amt-a" type="text" inputmode="numeric" autocomplete="off" value="150,000" aria-describedby="dc-amt-a-b" />
<span class="dc-amt__unit" aria-hidden="true">원</span>
</div>
<p class="dc-amt__bal" id="dc-amt-a-b">출금 가능 2,480,000원</p>
<div class="dc-amt__quick">
<button class="dc-amt__chip" type="button">+1만</button>
<button class="dc-amt__chip" type="button">+5만</button>
<button class="dc-amt__chip" type="button">+10만</button>
<button class="dc-amt__chip" type="button" aria-pressed="false">전액</button>
</div>
</div>
.dc-amt { padding:var(--dc-4); background:var(--dc-bg); font-family:var(--dc-font); }
.dc-amt__label { display:block; margin-bottom:var(--dc-2); font-size:14px; font-weight:600; color:var(--dc-text-sub); }
.dc-amt__field { display:flex; align-items:baseline; gap:var(--dc-2); padding-bottom:var(--dc-2); border-bottom:2px solid var(--dc-line-field); }
.dc-amt__field:focus-within { border-bottom-color:var(--dc-brand); }
.dc-amt__input { flex:1; min-width:0; width:100%; padding:0; border:0; background:transparent; color:var(--dc-text); font-family:var(--dc-font); font-size:34px; font-weight:700; line-height:1.2; text-align:right; font-variant-numeric:tabular-nums; }
.dc-amt__input::placeholder { color:var(--dc-text-mute); }
.dc-amt__input:focus { outline:none; }
.dc-amt__unit { flex:none; font-size:20px; font-weight:600; color:var(--dc-text-sub); }
.dc-amt__bal { margin:var(--dc-2) 0 0; font-size:13px; color:var(--dc-text-mute); text-align:right; }
.dc-amt__err { margin:var(--dc-2) 0 0; font-size:13px; font-weight:600; color:var(--dc-danger); text-align:right; }
.dc-amt__field.is-error { border-bottom-color:var(--dc-danger); }
.dc-amt__field.is-error .dc-amt__input { color:var(--dc-danger); }
.dc-amt__quick { display:flex; gap:var(--dc-2); margin-top:var(--dc-4); }
.dc-amt__chip { flex:1; min-height:44px; padding:0 var(--dc-1); border:1px solid var(--dc-line-field); border-radius:var(--dc-r-full); background:var(--dc-surface); color:var(--dc-text); font-family:var(--dc-font); font-size:14px; font-weight:600; }
.dc-amt__chip:hover { background:var(--dc-sunken); }
.dc-amt__chip[aria-pressed="true"] { border-color:var(--dc-brand); background:var(--dc-brand-soft); color:var(--dc-brand-text); }
.dc-amt__pad { display:grid; grid-template-columns:repeat(3, 1fr); gap:var(--dc-2); margin-top:var(--dc-4); padding-bottom:var(--dc-safe-bottom); }
.dc-amt__key { min-height:52px; border:0; border-radius:var(--dc-r-md); background:var(--dc-sunken); color:var(--dc-text); font-family:var(--dc-font); font-size:22px; font-weight:600; }
.dc-amt__key:active { background:var(--dc-brand-soft); color:var(--dc-brand-text); }