<div class="dc-fabstage">
<ul class="dc-fabstage__list">
<li class="dc-fabstage__row">현장 점검 일지</li>
<li class="dc-fabstage__row">자재 입고 확인</li>
<li class="dc-fabstage__row">안전 교육 기록</li>
</ul>
<button class="dc-fab" type="button">
<svg class="dc-fab__ico" viewBox="0 0 24 24" aria-hidden="true"><path d="M12 5v14M5 12h14" /></svg>
<span class="dc-sr">새 기록 쓰기</span>
</button>
</div>
.dc-fabstage {
position: relative;
min-height: 360px;
background: var(--dc-bg);
font-family: var(--dc-font);
overflow: hidden;
}
.dc-fabstage__list {
margin: 0;
padding: 0;
list-style: none;
}
.dc-fabstage__row {
padding: var(--dc-4);
border-bottom: 1px solid var(--dc-line);
background: var(--dc-surface);
font-size: 15px;
color: var(--dc-text);
}
.dc-fab {
position: absolute;
right: var(--dc-4);
bottom: calc(var(--dc-4) + var(--dc-safe-bottom));
display: inline-flex;
align-items: center;
justify-content: center;
width: 56px;
height: 56px;
border: 0;
border-radius: var(--dc-r-full);
background: var(--dc-brand);
color: var(--dc-text-on);
box-shadow: var(--dc-sh-3);
cursor: pointer;
transition: background var(--dc-fast), transform var(--dc-fast);
}
.dc-fab:hover { background: var(--dc-brand-hi); }
.dc-fab:active { transform: scale(.96); }
.dc-fab__ico {
width: 24px;
height: 24px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
.dc-fab--wide {
width: auto;
min-width: 56px;
padding: 0 var(--dc-5);
gap: var(--dc-2);
border-radius: var(--dc-r-full);
}
.dc-fab__label {
font-family: var(--dc-font);
font-size: 15px;
font-weight: 600;
white-space: nowrap;
}
.dc-fab--above {
bottom: calc(64px + var(--dc-4) + var(--dc-safe-bottom));
}
.dc-fabstage__bar {
position: absolute;
left: 0;
right: 0;
bottom: 0;
display: flex;
padding-bottom: var(--dc-safe-bottom);
background: var(--dc-surface);
border-top: 1px solid var(--dc-line);
}
.dc-fabstage__tab {
flex: 1;
min-height: 56px;
border: 0;
background: none;
color: var(--dc-text-sub);
font-family: var(--dc-font);
font-size: 12px;
cursor: pointer;
}
.dc-fabstage__tab[aria-current="page"] {
color: var(--dc-brand-text);
font-weight: 600;
}