<div class="dc-tg">
<input type="checkbox" id="dc-tg-save" class="dc-tg__input dc-sr">
<label class="dc-tg__btn" for="dc-tg-save">
<svg class="dc-tg__icon" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" aria-hidden="true"><path d="M6 4h12v16l-6-4-6 4z"></path></svg>
저장
</label>
</div>
.dc-tg { display: inline-flex; }
.dc-tg__btn {
display: inline-flex; align-items: center; gap: var(--dc-2);
min-height: 44px; 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-family: var(--dc-font); font-size: 14px; font-weight: 600; line-height: 1;
white-space: nowrap; cursor: pointer; position: relative;
transition: background var(--dc-fast), color var(--dc-fast), border-color var(--dc-fast);
}
.dc-tg__btn:hover { background: var(--dc-sunken); }
.dc-tg__icon { width: 18px; height: 18px; flex: none; }
.dc-tg__input:checked + .dc-tg__btn {
background: var(--dc-brand-soft); border-color: var(--dc-brand); color: var(--dc-brand-text);
}
.dc-tg__input:checked + .dc-tg__btn .dc-tg__icon { fill: currentColor; }
/* 묶음 선택은 -1px 로 겹쳐 있다 — 올려 주지 않으면 초점 테두리가 옆 칸에 가린다 */
.dc-tg__input:focus-visible + .dc-tg__btn { outline: 2px solid var(--dc-brand); outline-offset: 2px; z-index: 1; }
.dc-tg__input:disabled + .dc-tg__btn {
background: var(--dc-sunken); color: var(--dc-text-mute);
border-color: var(--dc-line); cursor: not-allowed;
}
.dc-tg__set { margin: 0; padding: 0; border: 0; }
.dc-tg--seg .dc-tg__btn { border-radius: 0; }
.dc-tg--seg .dc-tg__input + .dc-tg__btn { margin-left: -1px; }
.dc-tg--seg .dc-tg__input:first-child + .dc-tg__btn { margin-left: 0; border-radius: var(--dc-r-sm) 0 0 var(--dc-r-sm); }
.dc-tg--seg .dc-tg__btn:last-child { border-radius: 0 var(--dc-r-sm) var(--dc-r-sm) 0; }