<div class="dc-pop">
<details class="dc-pop__root" open>
<summary class="dc-pop__trigger">
<span class="dc-pop__qmark" aria-hidden="true">?</span>
<span>예상 수령액이란</span>
</summary>
<div class="dc-pop__panel" role="group" aria-label="예상 수령액 설명">
<span class="dc-pop__arrow" aria-hidden="true"></span>
<p class="dc-pop__title">예상 수령액</p>
<p class="dc-pop__text">주문 금액에서 수수료 3.3% 와 배송비를 뺀 금액입니다. 실제 입금액은 정산일의 환율에 따라 조금 달라질 수 있습니다.</p>
<a class="dc-pop__link" href="#">정산 규정 보기</a>
</div>
</details>
</div>
.dc-pop { position: relative; min-height: 230px; font-family: var(--dc-font); }
.dc-pop--end { display: flex; align-items: flex-end; }
.dc-pop__root { position: relative; display: inline-block; }
.dc-pop__trigger {
display: inline-flex; align-items: center; gap: var(--dc-2);
min-height: 40px; 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; list-style: none; cursor: pointer;
transition: background var(--dc-fast);
}
.dc-pop__trigger::-webkit-details-marker { display: none; }
.dc-pop__trigger:hover { background: var(--dc-sunken); }
.dc-pop__qmark {
display: grid; place-items: center; width: 18px; height: 18px;
border-radius: var(--dc-r-full);
background: var(--dc-brand-soft); color: var(--dc-brand-text);
font-size: 12px; font-weight: 800;
}
.dc-pop__panel {
position: absolute; top: calc(100% + var(--dc-3)); left: 0; z-index: 5;
width: 300px; padding: var(--dc-4);
background: var(--dc-surface);
border: 1px solid var(--dc-line); border-radius: var(--dc-r-md);
box-shadow: var(--dc-sh-2);
}
.dc-pop__arrow {
position: absolute; top: -6px; left: 18px; width: 11px; height: 11px;
background: var(--dc-surface);
border-left: 1px solid var(--dc-line); border-top: 1px solid var(--dc-line);
transform: rotate(45deg);
}
.dc-pop__title { margin: 0 0 var(--dc-2); font-size: 14px; font-weight: 700; color: var(--dc-text); }
.dc-pop__text { margin: 0; font-size: 13px; line-height: 1.7; color: var(--dc-text-sub); }
.dc-pop__link { display: inline-block; margin-top: var(--dc-3); font-size: 13px; font-weight: 600; color: var(--dc-brand); }
.dc-pop__panel--above { top: auto; bottom: calc(100% + var(--dc-3)); }
.dc-pop__arrow--down {
top: auto; bottom: -6px;
border-left: 0; border-top: 0;
border-right: 1px solid var(--dc-line); border-bottom: 1px solid var(--dc-line);
}
.dc-pop__panel--wide { width: 330px; }
.dc-pop__field { margin-bottom: var(--dc-3); }
.dc-pop__label { display: block; margin-bottom: var(--dc-1); font-size: 12px; font-weight: 600; color: var(--dc-text); }
.dc-pop__input {
width: 100%; min-height: 40px; 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-pop__acts { display: flex; justify-content: flex-end; gap: var(--dc-2); margin-top: var(--dc-4); }
.dc-pop__btn {
min-height: 40px; padding: 0 var(--dc-4);
border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-sm);
background: var(--dc-surface); color: var(--dc-text);
font-size: 13px; font-weight: 600;
}
.dc-pop__btn:hover { background: var(--dc-sunken); }
.dc-pop__btn--primary { border-color: var(--dc-brand); background: var(--dc-brand); color: var(--dc-text-on); }
.dc-pop__btn--primary:hover { background: var(--dc-brand-hi); border-color: var(--dc-brand-hi); }
@media (max-width: 420px) {
.dc-pop__panel { width: min(300px, calc(100vw - var(--dc-8))); }
.dc-pop__panel--wide { width: min(330px, calc(100vw - var(--dc-8))); }
}