<div class="dc-chipwrap">
<div class="dc-chips" role="group" aria-label="공종으로 걸러보기">
<button class="dc-chip" type="button" aria-pressed="true">전체</button>
<button class="dc-chip" type="button" aria-pressed="false">철근</button>
<button class="dc-chip" type="button" aria-pressed="false">용접</button>
<button class="dc-chip" type="button" aria-pressed="false">도장</button>
<button class="dc-chip" type="button" aria-pressed="false">전기</button>
</div>
<p class="dc-chipwrap__note">지금 걸려 있는 조건이 줄 맨 앞에 보이도록 둡니다.</p>
</div>
.dc-chipwrap {
padding: var(--dc-4) 0;
background: var(--dc-bg);
font-family: var(--dc-font);
}
.dc-chips {
display: flex;
gap: var(--dc-2);
padding: 0 var(--dc-4);
overflow-x: auto;
scrollbar-width: none;
}
.dc-chips::-webkit-scrollbar { display: none; }
.dc-chip {
display: inline-flex;
flex: none;
align-items: center;
gap: var(--dc-1);
min-height: 44px;
padding: 0 var(--dc-4);
border: 1px solid var(--dc-line-bold);
border-radius: var(--dc-r-full);
background: var(--dc-surface);
color: var(--dc-text-sub);
font-family: var(--dc-font);
font-size: 14px;
font-weight: 600;
white-space: nowrap;
cursor: pointer;
transition: background var(--dc-fast), border-color var(--dc-fast), color var(--dc-fast);
}
button.dc-chip:hover { background: var(--dc-sunken); }
.dc-chip[aria-pressed="true"] {
border-color: var(--dc-brand);
background: var(--dc-brand-soft);
color: var(--dc-brand-text);
}
.dc-chip__ico {
width: 16px;
height: 16px;
fill: none;
stroke: currentColor;
stroke-width: 2;
stroke-linecap: round;
}
.dc-chip--tag {
padding-right: 0;
border-style: dashed;
cursor: default;
}
.dc-chip__x {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
align-self: stretch;
margin-left: var(--dc-1);
border: 0;
border-radius: 0 var(--dc-r-full) var(--dc-r-full) 0;
background: none;
color: inherit;
cursor: pointer;
}
.dc-chip__x:hover { background: var(--dc-sunken); }
.dc-chipwrap__note {
margin: var(--dc-3) 0 0;
padding: 0 var(--dc-4);
font-size: 12px;
line-height: 1.6;
color: var(--dc-text-mute);
}