@charset "utf-8";

/* 컴포넌트 가이드 공통 */
.component-section {padding-block: var(--space-80);}
.component-section + .component-section {border-top: 1px solid var(--color-border);}
.component-section .component-tit {margin-bottom: var(--space-40); font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-font3);}
.component-section code {font-family: Consolas, Menlo, monospace;}

/* 타이포그래피 - li.typo-item > .typo-info + p.{타이포 클래스} */
.component-section .typo-list {border-top: 1px solid var(--color-border);}
.component-section .typo-list .typo-item {display: grid; grid-template-columns: 280px minmax(0, 1fr); align-items: center; column-gap: var(--space-40); padding-block: var(--space-30); border-bottom: 1px solid var(--color-border);}
.component-section .typo-list .typo-info {display: flex; flex-direction: column; row-gap: 2px; color: var(--color-font3);}
.component-section .typo-list .typo-info strong {font-weight: 600; color: var(--color-font1);}

/* 컬러 - .color-group > .color-list > li.color-item(.color-chip + 토큰 + HEX) */
.component-section .color-group-list {display: flex; flex-wrap: wrap; gap: var(--space-50) var(--space-80);}
.component-section .color-group .color-group-tit {margin-bottom: var(--space-16); font-weight: 600;}
.component-section .color-group .color-list {display: flex; flex-wrap: wrap; gap: var(--space-16);}
.component-section .color-group .color-item {display: flex; flex-direction: column; row-gap: 2px; width: 120px; color: var(--color-font2);}
.component-section .color-group .color-chip {display: block; height: 80px; margin-bottom: 8px; border: 1px solid var(--color-border);}

@media screen and (max-width: 768px) {
    .component-section .typo-list .typo-item {grid-template-columns: minmax(0, 1fr); row-gap: var(--space-12);}
    .component-section .color-group {width: 100%;}
    .component-section .color-group .color-item {width: calc((100% - var(--space-16)) / 2);}
}