<nav class="dc-st" aria-label="카테고리">
<ul class="dc-st__track">
<li><a class="dc-st__tab" href="#" aria-current="page">추천</a></li>
<li><a class="dc-st__tab" href="#">신상품</a></li>
<li><a class="dc-st__tab" href="#">인기순</a></li>
<li><a class="dc-st__tab" href="#">할인중</a></li>
<li><a class="dc-st__tab" href="#">리뷰 많은</a></li>
<li><a class="dc-st__tab" href="#">빠른 배송</a></li>
<li><a class="dc-st__tab" href="#">브랜드관</a></li>
</ul>
</nav>
.dc-st {
padding-top: var(--dc-safe-top);
background: var(--dc-surface);
border-bottom: 1px solid var(--dc-line);
font-family: var(--dc-font);
}
.dc-st__track {
display: flex; align-items: stretch; gap: var(--dc-1);
padding: 0 var(--dc-3);
overflow-x: auto; overflow-y: hidden;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
overscroll-behavior-x: contain;
}
.dc-st__track::-webkit-scrollbar { display: none; }
.dc-st__track > li { flex: 0 0 auto; display: flex; }
.dc-st__tab {
flex: 0 0 auto;
display: flex; align-items: center; gap: var(--dc-1);
min-height: 48px; padding: 0 var(--dc-3);
border-bottom: 2px solid transparent;
color: var(--dc-text-mute); text-decoration: none;
font-size: 15px; font-weight: 600; white-space: nowrap;
transition: color var(--dc-fast), border-color var(--dc-fast);
}
.dc-st__tab[aria-current="page"] {
color: var(--dc-text); font-weight: 800;
border-bottom-color: var(--dc-brand);
}
.dc-st__num {
min-width: 18px; padding: 0 5px;
border-radius: var(--dc-r-full);
background: var(--dc-sunken); color: var(--dc-text-sub);
font-size: 11px; font-weight: 700; line-height: 18px; text-align: center;
}
.dc-st__tab[aria-current="page"] .dc-st__num {
background: var(--dc-brand-soft); color: var(--dc-brand-text);
}
.dc-st--pill .dc-st__track { padding: var(--dc-2) var(--dc-3); gap: var(--dc-2); }
.dc-st--pill .dc-st__tab {
min-height: 44px; padding: 0 var(--dc-4);
border-bottom: 0; border-radius: var(--dc-r-full);
background: var(--dc-sunken);
}
.dc-st--pill .dc-st__tab[aria-current="page"] {
background: var(--dc-brand); color: var(--dc-text-on);
}