@charset "utf-8";
/* 웹앱 컴포넌트 가이드 (납품 전 제거)
   - 글자 크기는 마크업의 타이포 클래스로 지정 (코드 블록 monospace 만 예외) */
.guide-nav {position: sticky; top: var(--header-h); z-index: 50; border-bottom: 1px solid var(--color-border); background-color: var(--color-bg1);}
.guide-nav .guide-nav-list {display: flex; gap: 6px; padding: 10px var(--gutter); overflow-x: auto; scrollbar-width: none;}
.guide-nav .guide-nav-list::-webkit-scrollbar {display: none;}
.guide-nav .guide-nav-list a {display: inline-flex; align-items: center; min-height: 34px; padding-inline: 12px; border: 1px solid var(--color-gray4); border-radius: 999px; white-space: nowrap;}

.guide-intro {padding: var(--space-20) var(--gutter) 0; color: var(--color-gray6);}
.guide code {padding: 1px 4px; border-radius: 3px; background-color: var(--color-gray2); font-family: Consolas, 'Courier New', monospace;}

.guide-section {padding: var(--space-40) var(--gutter); border-bottom: 8px solid var(--color-gray2); scroll-margin-top: calc(var(--header-h) + 56px);}
.guide-section .guide-desc {margin-top: 6px; color: var(--color-gray6);}
.guide-section .guide-sub-tit {margin: var(--space-32) 0 var(--space-12); color: var(--color-gray6);}
.guide-section .guide-tit + .guide-demo, .guide-section .guide-desc + .guide-demo,
.guide-section .guide-desc + .guide-code, .guide-section .guide-desc + .guide-box {margin-top: var(--space-16);}

.guide-section .guide-demo {padding: var(--space-20); border: 1px dashed var(--color-gray4); border-radius: var(--radius-small); background-color: var(--color-bg1);}
.guide-section .guide-demo > * + * {margin-top: var(--space-16);}
.guide-section .guide-demo.clip {overflow: hidden;}
.guide-section .guide-demo.gray {background-color: var(--color-bg2);}
.guide-section .guide-demo + .guide-demo {margin-top: var(--space-12);}

.guide-section .guide-code-wrap {margin-top: 6px;}
.guide-section .guide-code-wrap summary {display: inline-flex; align-items: center; min-height: 32px; color: var(--color-gray6); cursor: pointer;}
.guide-section .guide-code {margin-top: 6px; padding: 14px 16px; border-radius: var(--radius-small); background-color: var(--color-gray10); color: var(--color-gray3); font-family: Consolas, 'Courier New', monospace; font-size: 12px; line-height: 1.6; white-space: pre; overflow-x: auto; /* 코드 블록 예외 */}
.guide-section .guide-code code {padding: 0; background: none;}

.guide-section .guide-box {padding-inline: var(--space-16); border: 1px solid var(--color-border); border-radius: var(--radius-small);}

/* 표 */
.guide-section .guide-table-wrap {overflow-x: auto;}
.guide-section .guide-table {text-align: left;}
.guide-section .guide-table th, .guide-section .guide-table td {padding: 10px 8px; border-bottom: 1px solid var(--color-border); vertical-align: top;}
.guide-section .guide-table thead th {background-color: var(--color-gray2);}
.guide-section .guide-table tbody th {white-space: nowrap; font-family: Consolas, monospace;}
.guide-section .guide-table td {color: var(--color-gray8);}

/* 타이포 */
.guide-typo-list li {display: flex; align-items: baseline; column-gap: var(--space-16); padding-block: 12px; border-bottom: 1px solid var(--color-border);}
.guide-typo-list li:first-child {padding-top: 0;}
.guide-typo-list .guide-label {flex: none; width: 128px; color: var(--color-gray6);}
.guide-typo-list .guide-label b {display: block; font-weight: 600; color: var(--color-gray9);}
.guide-typo-list p {min-width: 0;}

/* 컬러 */
.guide-color-list {display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 12px;}
.guide-color-list li {color: var(--color-gray6); word-break: break-all; font-variant-ligatures: none;}
.guide-color-list .chip {display: block; height: 48px; margin-bottom: 6px; border: 1px solid var(--color-border); border-radius: var(--radius-small); background-color: var(--chip);}
.guide-color-tit {margin: var(--space-20) 0 var(--space-8);}
.guide-color-tit:first-child {margin-top: 0;}

/* 아이콘 */
.guide-icon-list {display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px;}
.guide-icon-list li {display: flex; flex-direction: column; align-items: center; row-gap: 6px; padding: 12px 4px; border-radius: var(--radius-small); background-color: var(--color-gray2); color: var(--color-gray8); text-align: center;}

@media (hover: hover) {
    .guide-nav .guide-nav-list a:hover {border-color: var(--color-static2);}
}