<div class="dc-sp-stage">
<div class="dc-sp-stage__page" aria-hidden="true">
<div class="dc-sp-stage__bar dc-sp-stage__bar--w45"></div>
<div class="dc-sp-stage__bar"></div>
<div class="dc-sp-stage__bar dc-sp-stage__bar--w70"></div>
<div class="dc-sp-stage__bar"></div>
<div class="dc-sp-stage__bar dc-sp-stage__bar--w70"></div>
</div>
<div class="dc-sp" role="dialog" aria-modal="true" aria-labelledby="dc-sp-t">
<div class="dc-sp__head">
<h2 class="dc-sp__title" id="dc-sp-t">주문 걸러 보기</h2>
<button class="dc-sp__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-sp__body">
<fieldset class="dc-sp__group">
<legend class="dc-sp__legend">진행 상태</legend>
<label class="dc-sp__check" for="dc-sp-st-new"><input type="checkbox" id="dc-sp-st-new" checked> 접수</label>
<label class="dc-sp__check" for="dc-sp-st-pack"><input type="checkbox" id="dc-sp-st-pack" checked> 포장 중</label>
<label class="dc-sp__check" for="dc-sp-st-ship"><input type="checkbox" id="dc-sp-st-ship"> 배송 중</label>
<label class="dc-sp__check" for="dc-sp-st-done"><input type="checkbox" id="dc-sp-st-done"> 배송 완료</label>
</fieldset>
<fieldset class="dc-sp__group">
<legend class="dc-sp__legend">결제 방법</legend>
<label class="dc-sp__check" for="dc-sp-pay-card"><input type="checkbox" id="dc-sp-pay-card" checked> 카드</label>
<label class="dc-sp__check" for="dc-sp-pay-bank"><input type="checkbox" id="dc-sp-pay-bank"> 계좌 이체</label>
<label class="dc-sp__check" for="dc-sp-pay-cash"><input type="checkbox" id="dc-sp-pay-cash"> 현장 결제</label>
</fieldset>
</div>
<div class="dc-sp__foot">
<button class="dc-sp__btn" type="button">모두 지우기</button>
<button class="dc-sp__btn dc-sp__btn--primary" type="button">주문 128건 보기</button>
</div>
</div>
</div>
.dc-sp-stage {
position: relative; display: flex; justify-content: flex-end;
min-height: 420px; overflow: hidden;
border: 1px solid var(--dc-line); border-radius: var(--dc-r-md);
background: var(--dc-bg); font-family: var(--dc-font);
}
.dc-sp-stage--left { justify-content: flex-start; }
.dc-sp-stage__page { position: absolute; inset: 0; padding: var(--dc-5); }
.dc-sp-stage__page::after { content: ""; position: absolute; inset: 0; background: var(--dc-overlay); }
.dc-sp-stage__bar { height: 12px; margin-bottom: var(--dc-4); border-radius: var(--dc-r-xs); background: var(--dc-sunken); }
.dc-sp-stage__bar--w70 { width: 70%; }
.dc-sp-stage__bar--w45 { width: 45%; }
.dc-sp {
position: relative; display: flex; flex-direction: column;
width: 360px; max-width: 100%;
background: var(--dc-surface);
border-left: 1px solid var(--dc-line);
box-shadow: var(--dc-sh-3);
}
.dc-sp--left { border-left: 0; border-right: 1px solid var(--dc-line); }
.dc-sp__head {
display: flex; align-items: center; gap: var(--dc-3);
padding: var(--dc-4) var(--dc-5);
border-bottom: 1px solid var(--dc-line);
}
.dc-sp__title { flex: 1 1 auto; margin: 0; font-size: 16px; font-weight: 700; color: var(--dc-text); }
.dc-sp__x {
flex: none; display: grid; place-items: center; width: 36px; height: 36px;
margin-right: -6px; 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-sp__x svg { width: 16px; height: 16px; }
.dc-sp__x:hover { background: var(--dc-sunken); color: var(--dc-text); }
.dc-sp__body { flex: 1 1 auto; overflow-y: auto; padding: var(--dc-5); }
.dc-sp__group { margin: 0 0 var(--dc-5); padding: 0; border: 0; }
.dc-sp__legend { padding: 0; margin-bottom: var(--dc-1); font-size: 12px; font-weight: 700; color: var(--dc-text-mute); }
.dc-sp__check {
display: flex; align-items: center; gap: var(--dc-3);
min-height: 40px; font-size: 14px; color: var(--dc-text); cursor: pointer;
}
.dc-sp__check input { width: 18px; height: 18px; accent-color: var(--dc-brand); }
.dc-sp__foot {
display: flex; gap: var(--dc-2); padding: var(--dc-4) var(--dc-5);
border-top: 1px solid var(--dc-line); background: var(--dc-surface);
}
.dc-sp__btn {
flex: 1 1 auto; 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; font-weight: 600;
transition: background var(--dc-fast), border-color var(--dc-fast);
}
.dc-sp__btn:hover { background: var(--dc-sunken); }
.dc-sp__btn--primary { flex: 2 1 auto; border-color: var(--dc-brand); background: var(--dc-brand); color: var(--dc-text-on); }
.dc-sp__btn--primary:hover { background: var(--dc-brand-hi); border-color: var(--dc-brand-hi); }
.dc-sp__dl { margin: 0; }
.dc-sp__dt { margin-top: var(--dc-4); font-size: 12px; font-weight: 700; color: var(--dc-text-mute); }
.dc-sp__dd { margin: var(--dc-1) 0 0; font-size: 14px; line-height: 1.6; color: var(--dc-text); }
@media (max-width: 560px) {
.dc-sp { width: 100%; }
}