<section class="dc-stg">
<h2 class="dc-stg__head">알림</h2>
<ul class="dc-stg__group">
<li class="dc-stg__row">
<span class="dc-stg__main">
<label class="dc-stg__label" for="dc-stg-assign">작업 배정 알림</label>
<span class="dc-stg__desc">새 배정이 생기면 바로 알려 줍니다</span>
</span>
<input class="dc-stg__switch" type="checkbox" role="switch" id="dc-stg-assign" checked>
</li>
<li class="dc-stg__row">
<span class="dc-stg__main">
<label class="dc-stg__label" for="dc-stg-night">야간 방해 금지</label>
<span class="dc-stg__desc">밤 10시부터 아침 7시까지 소리를 끕니다</span>
</span>
<input class="dc-stg__switch" type="checkbox" role="switch" id="dc-stg-night">
</li>
<li class="dc-stg__row dc-stg__row--link">
<a class="dc-stg__open" href="#">
<span class="dc-stg__label">알림 소리</span>
<span class="dc-stg__value">기본음</span>
<span class="dc-stg__arrow" aria-hidden="true">›</span>
</a>
</li>
</ul>
</section>
.dc-stg {
padding: var(--dc-4) 0 var(--dc-5);
background: var(--dc-bg);
font-family: var(--dc-font);
}
.dc-stg__head {
margin: 0 0 var(--dc-2); padding: 0 var(--dc-4);
font-size: 12px; font-weight: 700; letter-spacing: .02em;
color: var(--dc-text-mute);
}
.dc-stg__group {
margin: 0; padding: 0; list-style: none;
background: var(--dc-surface);
border-top: 1px solid var(--dc-line);
border-bottom: 1px solid var(--dc-line);
}
.dc-stg__row {
display: flex; align-items: center; gap: var(--dc-3);
min-height: 60px; padding: var(--dc-3) var(--dc-4);
}
.dc-stg__row + .dc-stg__row { border-top: 1px solid var(--dc-line); }
.dc-stg__row--link { padding: 0; }
.dc-stg__main {
flex: 1 1 auto; min-width: 0;
display: flex; flex-direction: column; gap: 2px;
}
.dc-stg__label { font-size: 15px; color: var(--dc-text); cursor: pointer; }
.dc-stg__desc { font-size: 12px; line-height: 1.5; color: var(--dc-text-mute); }
.dc-stg__switch {
position: relative; flex: 0 0 auto;
appearance: none; -webkit-appearance: none;
width: 52px; height: 32px; margin: 0; border: none;
border-radius: var(--dc-r-full);
background: var(--dc-line-field);
cursor: pointer;
transition: background var(--dc-fast);
}
.dc-stg__switch::before { content: ""; position: absolute; inset: -6px; }
.dc-stg__switch::after {
content: ""; position: absolute; top: 3px; left: 3px;
width: 26px; height: 26px; border-radius: var(--dc-r-full);
background: var(--dc-surface); box-shadow: var(--dc-sh-1);
transition: transform var(--dc-fast);
}
.dc-stg__switch:checked { background: var(--dc-brand); }
.dc-stg__switch:checked::after { transform: translateX(20px); }
.dc-stg__open {
flex: 1 1 auto; display: flex; align-items: center; gap: var(--dc-2);
min-height: 60px; padding: var(--dc-3) var(--dc-4);
color: inherit; text-decoration: none;
transition: background var(--dc-fast);
}
.dc-stg__open:active { background: var(--dc-sunken); }
.dc-stg__open .dc-stg__label { flex: 1 1 auto; }
.dc-stg__open--danger .dc-stg__label { color: var(--dc-danger); font-weight: 700; }
.dc-stg__value { font-size: 14px; color: var(--dc-text-mute); }
.dc-stg__arrow { font-size: 20px; line-height: 1; color: var(--dc-text-mute); }
.dc-stg__check { font-size: 16px; font-weight: 700; color: var(--dc-brand-text); }
.dc-stg__note {
margin: var(--dc-3) 0 0; padding: 0 var(--dc-4);
font-size: 12px; line-height: 1.6; color: var(--dc-text-mute);
}