<div class="dc-modal-stage">
<div class="dc-modal" role="dialog" aria-modal="true" aria-labelledby="dc-modal-t" aria-describedby="dc-modal-d">
<div class="dc-modal__head">
<h2 class="dc-modal__title" id="dc-modal-t">배송지 추가</h2>
<button class="dc-modal__x" type="button"><svg viewBox="0 0 16 16" aria-hidden="true" focusable="false"><path d="M4 4l8 8M12 4l-8 8" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round"/></svg><span class="dc-sr">창 닫기</span></button>
</div>
<div class="dc-modal__body">
<p class="dc-modal__desc" id="dc-modal-d">저장하면 주문할 때 이 주소를 바로 고를 수 있습니다.</p>
<div class="dc-modal__field">
<label class="dc-modal__label" for="dc-modal-name">받는 사람</label>
<input class="dc-modal__input" id="dc-modal-name" type="text" value="김민수">
</div>
<div class="dc-modal__field">
<label class="dc-modal__label" for="dc-modal-addr">도로명 주소</label>
<input class="dc-modal__input" id="dc-modal-addr" type="text" placeholder="예) 서울 강남구 테헤란로 123">
</div>
</div>
<div class="dc-modal__foot">
<button class="dc-modal__btn" type="button">취소</button>
<button class="dc-modal__btn dc-modal__btn--primary" type="button">배송지 저장</button>
</div>
</div>
</div>
.dc-modal-stage {
position: relative; display: flex; align-items: center; justify-content: center;
min-height: 360px; padding: var(--dc-5);
background: var(--dc-overlay); border-radius: var(--dc-r-md);
font-family: var(--dc-font);
}
.dc-modal {
display: flex; flex-direction: column;
width: 100%; max-width: 420px; max-height: 100%;
background: var(--dc-surface);
border: 1px solid var(--dc-line); border-radius: var(--dc-r-lg);
box-shadow: var(--dc-sh-3);
overflow: hidden;
}
.dc-modal__head {
display: flex; align-items: flex-start; gap: var(--dc-3);
padding: var(--dc-5) var(--dc-5) var(--dc-3);
}
.dc-modal__title { flex: 1 1 auto; margin: 0; font-size: 17px; font-weight: 700; line-height: 1.4; color: var(--dc-text); }
.dc-modal__x {
flex: none; display: grid; place-items: center; width: 32px; height: 32px;
margin: -4px -6px 0 0; padding: 0; border: 0; border-radius: var(--dc-r-sm);
background: transparent; color: var(--dc-text-mute);
transition: background var(--dc-fast), color var(--dc-fast);
}
.dc-modal__x svg { width: 16px; height: 16px; }
.dc-modal__x:hover { background: var(--dc-sunken); color: var(--dc-text); }
.dc-modal__body { padding: 0 var(--dc-5) var(--dc-5); overflow-y: auto; }
.dc-modal__desc { margin: 0 0 var(--dc-4); font-size: 13px; line-height: 1.65; color: var(--dc-text-sub); }
.dc-modal__field + .dc-modal__field { margin-top: var(--dc-4); }
.dc-modal__label { display: block; margin-bottom: var(--dc-2); font-size: 13px; font-weight: 600; color: var(--dc-text); }
.dc-modal__input {
width: 100%; min-height: 44px; padding: 0 var(--dc-3);
border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-sm);
background: var(--dc-surface); color: var(--dc-text); font-size: 14px;
}
.dc-modal__input::placeholder { color: var(--dc-text-mute); }
.dc-modal__foot {
display: flex; justify-content: flex-end; gap: var(--dc-2);
padding: var(--dc-3) var(--dc-5) var(--dc-4);
border-top: 1px solid var(--dc-line); background: var(--dc-surface);
}
.dc-modal__btn {
min-height: 44px; padding: 0 var(--dc-5);
border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-sm);
background: var(--dc-surface); color: var(--dc-text);
font-size: 14px; font-weight: 600;
transition: background var(--dc-fast), border-color var(--dc-fast);
}
.dc-modal__btn:hover { background: var(--dc-sunken); }
.dc-modal__btn--primary { border-color: var(--dc-brand); background: var(--dc-brand); color: var(--dc-text-on); }
.dc-modal__btn--primary:hover { background: var(--dc-brand-hi); border-color: var(--dc-brand-hi); }
.dc-modal--wide { max-width: 620px; }
.dc-modal__grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dc-4); }
.dc-modal__scroll { max-height: 170px; }
.dc-modal__long { margin: 0 0 var(--dc-3); font-size: 13px; line-height: 1.75; color: var(--dc-text-sub); }
@media (max-width: 520px) {
.dc-modal-stage { align-items: flex-end; padding: var(--dc-3) 0 0; }
.dc-modal { max-width: none; border-radius: var(--dc-r-lg) var(--dc-r-lg) 0 0; }
.dc-modal__grid { grid-template-columns: 1fr; }
.dc-modal__foot { flex-direction: column-reverse; }
.dc-modal__btn { width: 100%; }
}