<div class="dc-tipwrap">
<span class="dc-tip is-open">
<button class="dc-tip__btn" type="button" aria-describedby="dc-tip-1"><svg viewBox="0 0 20 20" aria-hidden="true" focusable="false"><path d="M4 3.5h12v13L10 12.6 4 16.5v-13Z" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/></svg><span class="dc-sr">보관함에 넣기</span></button>
<span class="dc-tip__bubble" role="tooltip" id="dc-tip-1">보관함에 넣기<span class="dc-tip__arrow" aria-hidden="true"></span></span>
</span>
</div>
.dc-tipwrap { display: flex; justify-content: center; padding: var(--dc-8) 0 var(--dc-5); font-family: var(--dc-font); }
.dc-tipwrap--low { padding: var(--dc-5) 0 var(--dc-8); }
.dc-tipwrap--text { display: block; padding: var(--dc-8) var(--dc-4) var(--dc-5); }
.dc-tip { position: relative; display: inline-flex; }
.dc-tip__btn {
display: grid; place-items: center; width: 44px; height: 44px;
border: 1px solid var(--dc-line-field); border-radius: var(--dc-r-sm);
background: var(--dc-surface); color: var(--dc-text);
transition: background var(--dc-fast);
}
.dc-tip__btn svg { width: 20px; height: 20px; }
.dc-tip__btn:hover { background: var(--dc-sunken); }
.dc-tip__bubble {
position: absolute; bottom: calc(100% + var(--dc-2)); left: 50%; z-index: 5;
width: max-content; max-width: 240px;
padding: var(--dc-2) var(--dc-3); border-radius: var(--dc-r-sm);
background: var(--dc-text); color: var(--dc-bg);
font-size: 12px; line-height: 1.5; text-align: left;
opacity: 0; visibility: hidden; pointer-events: none;
transform: translate(-50%, 4px);
transition: opacity var(--dc-fast), transform var(--dc-fast);
}
.dc-tip__arrow {
position: absolute; top: 100%; left: 50%; width: 0; height: 0; margin-left: -5px;
border: 5px solid transparent; border-top-color: var(--dc-text);
}
.dc-tip:hover .dc-tip__bubble,
.dc-tip:focus-within .dc-tip__bubble,
.dc-tip.is-open .dc-tip__bubble { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.dc-tip__bubble--below { top: calc(100% + var(--dc-2)); bottom: auto; transform: translate(-50%, -4px); }
.dc-tip__arrow--up { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--dc-text); }
.dc-tip__sentence { max-width: 420px; margin: 0 auto; font-size: 14px; line-height: 1.9; color: var(--dc-text); }
.dc-tip__term {
padding: 0; border: 0; background: transparent; color: var(--dc-text);
font: inherit; text-decoration: underline dotted; text-underline-offset: .2em;
}
.dc-tip__term:hover { color: var(--dc-brand); }