복사
<div class="dc-pw">
<label class="dc-pw__label" for="dc-pw-a">비밀번호</label>
<div class="dc-pw__box">
<input class="dc-pw__input" id="dc-pw-a" type="password" value="hyunjang2026" autocomplete="current-password" aria-describedby="dc-pw-a-hint" />
<button class="dc-pw__eye" type="button" aria-pressed="false" aria-controls="dc-pw-a" data-dc-pw="dc-pw-a">
<span class="dc-pw__eyeicon" aria-hidden="true">◉</span>
<span class="dc-sr">비밀번호 보기</span>
</button>
</div>
<p class="dc-pw__hint" id="dc-pw-a-hint">대소문자를 구분합니다</p>
</div>
복사
.dc-pw { max-width:400px; font-family:var(--dc-font); }
.dc-pw__label { display:block; margin-bottom:var(--dc-2); font-size:13px; font-weight:600; color:var(--dc-text); }
.dc-pw__box { display:flex; align-items:center; border:1px solid var(--dc-line-field); border-radius:var(--dc-r-sm); background:var(--dc-surface); }
.dc-pw__box:focus-within { border-color:var(--dc-brand); box-shadow:0 0 0 3px var(--dc-brand-soft); }
.dc-pw__box.is-error { border-color:var(--dc-danger); }
.dc-pw__input { flex:1 1 auto; min-width:0; min-height:44px; padding:var(--dc-2) var(--dc-3); border:0; border-radius:var(--dc-r-sm); background:transparent; color:var(--dc-text); font:inherit; font-size:15px; letter-spacing:.04em; }
.dc-pw__input:focus { outline:none; }
.dc-pw__eye { display:flex; align-items:center; justify-content:center; flex:0 0 auto; width:44px; height:44px; border:0; border-radius:var(--dc-r-sm); background:transparent; color:var(--dc-text-sub); }
.dc-pw__eye:hover { background:var(--dc-sunken); color:var(--dc-brand-text); }
.dc-pw__eye[aria-pressed="true"] { color:var(--dc-brand-text); }
.dc-pw__eyeicon { font-size:16px; line-height:1; }
.dc-pw__hint { margin:var(--dc-2) 0 0; font-size:12px; color:var(--dc-text-mute); }
.dc-pw__error { margin:var(--dc-2) 0 0; font-size:12px; font-weight:600; color:var(--dc-danger); }
.dc-pw__meter { display:flex; gap:var(--dc-1); margin-top:var(--dc-2); }
.dc-pw__seg { flex:1 1 0; height:5px; border-radius:var(--dc-r-full); background:var(--dc-sunken); }
.dc-pw__seg.is-on { background:var(--dc-ok); }
.dc-pw__level { margin:var(--dc-1) 0 0; font-size:12px; font-weight:600; color:var(--dc-ok); }
복사
document.querySelectorAll('[data-dc-pw]').forEach(function (btn) {
btn.addEventListener('click', function () {
var input = document.getElementById(btn.getAttribute('data-dc-pw'));
if (!input) return;
var show = input.type === 'password';
input.type = show ? 'text' : 'password';
btn.setAttribute('aria-pressed', show ? 'true' : 'false');
var name = btn.querySelector('.dc-sr');
if (name) name.textContent = show ? '비밀번호 숨기기' : '비밀번호 보기';
input.focus();
});
});