@charset "utf-8";
/* [개발용] 공통 컴포넌트 가이드 - component 폴더와 함께 납품 전 제거 */
:root {
    --guide-nav-height: 61px; /* 상하 여백 12 × 2 + 링크 36 + 하단 선 1 */
}
.guide-nav {position: sticky; top: var(--header-height); z-index: 10; background-color: var(--color-bg); border-bottom: 1px solid var(--color-border1);}
.guide-nav .guide-nav-list {display: flex; gap: 8px; padding-block: var(--fs-12); overflow-x: auto; scrollbar-width: none;}
.guide-nav .guide-nav-list a {display: inline-flex; align-items: center; min-height: 36px; padding-inline: var(--fs-16); border: 1px solid var(--color-border1); border-radius: 999px; font-size: var(--fs-14); white-space: nowrap; transition: border-color 0.2s, color 0.2s;}

.guide-section {padding-block: var(--space-80); border-bottom: 1px solid var(--color-border1); scroll-margin-top: var(--guide-nav-height);} /* html 의 scroll-padding-top(헤더) + 가이드 탭 높이 */
.guide-section .guide-sub-tit {margin: var(--space-48) 0 var(--fs-16); font-size: var(--fs-16); font-weight: 600; color: var(--color-font3);}
.guide-section .guide-sub-tit:first-of-type {margin-top: 0;}
.guide-section .guide-demo {padding: var(--space-30); border: 1px solid var(--color-border1); background-color: var(--color-bg);}
.guide-section .guide-demo > * + * {margin-top: var(--space-24);}
.guide-section .guide-demo.dark {background-color: var(--color-static1);}
.guide-section .guide-demo.gray {background-color: var(--color-border1);}
.guide-section .guide-demo + .guide-code {margin-top: 8px;}
.guide-section .guide-code + .guide-demo,
.guide-section .guide-demo + .guide-demo {margin-top: var(--space-24);}
.guide-section .guide-code {padding: var(--fs-16) var(--fs-20); background-color: #1E1E1E; color: #E6E6E6; font-family: Consolas, 'Courier New', monospace; font-size: var(--fs-13); line-height: 1.6; overflow-x: auto; white-space: pre;}
.guide-section .guide-grid {display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-30);}

/* 타이포 목록 */
.guide-section .guide-typo-list li {display: flex; align-items: baseline; column-gap: var(--space-24); padding-block: var(--fs-16); border-bottom: 1px solid var(--color-border1);}
.guide-section .guide-typo-list .guide-typo-label {flex: none; width: 180px; font-size: var(--fs-13); color: var(--color-font3);}

/* 컬러 목록 */
.guide-section .guide-color-list {display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: var(--fs-16);}
.guide-section .guide-color-list li {font-size: var(--fs-13); color: var(--color-font3);}
.guide-section .guide-color-list .chip {display: block; height: 64px; margin-bottom: 8px; border: 1px solid var(--color-border1);}
.guide-section .guide-color-list .chip.static1 {background-color: var(--color-static1);}
.guide-section .guide-color-list .chip.static2 {background-color: var(--color-static2);}
.guide-section .guide-color-list .chip.static3 {background-color: var(--color-static3);}
.guide-section .guide-color-list .chip.static4 {background-color: var(--color-static4);}
.guide-section .guide-color-list .chip.border1 {background-color: var(--color-border1);}
.guide-section .guide-color-list .chip.border2 {background-color: var(--color-border2);}
.guide-section .guide-color-list .chip.border3 {background-color: var(--color-border3);}
.guide-section .guide-color-list .chip.font1 {background-color: var(--color-font1);}
.guide-section .guide-color-list .chip.font2 {background-color: var(--color-font2);}
.guide-section .guide-color-list .chip.font3 {background-color: var(--color-font3);}
.guide-section .guide-color-list .chip.font4 {background-color: var(--color-font4);}
.guide-section .guide-color-list .chip.font5 {background-color: var(--color-font5);}

/* 호버 - 마우스 환경에서만 적용 (터치 기기에서 탭 후 호버 상태가 남지 않게) */
@media (hover: hover) {
    .guide-nav .guide-nav-list a:hover {border-color: var(--color-static1); color: var(--color-static1);}
}

@media screen and (max-width: 768px) {
    .guide-section {padding-block: var(--space-48);}
    .guide-section .guide-demo {padding: var(--fs-20);}
    .guide-section .guide-grid {grid-template-columns: minmax(0, 1fr);}
    .guide-section .guide-typo-list li {flex-direction: column; row-gap: 4px;}
}