@charset "utf-8";
/* TODO: 납품 전 제거 */
.guide-nav {position: sticky; top: var(--header-h); z-index: 50; margin: calc(var(--space-30) * -1) calc(var(--gutter) * -1) 0; border-bottom: 1px solid var(--color-border1); background-color: var(--color-section1);}
.guide-nav .guide-nav-list {display: flex; gap: var(--space-6); padding: var(--space-10) 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: var(--space-12); border: 1px solid var(--color-border2); border-radius: 999px; white-space: nowrap; transition: border-color 0.2s, color 0.2s;}

.guide-intro {margin-top: var(--space-20); color: var(--color-font3);}
.guide code {padding: 1px var(--space-4); border-radius: 3px; background-color: var(--color-section2); font-family: Consolas, 'Courier New', monospace;}

.guide .guide-section {margin-top: var(--space-20); scroll-margin-top: calc(var(--header-h) + 70px);}
.guide-section .guide-desc {margin-top: var(--space-6); color: var(--color-font3);}
.guide-section .guide-sub-tit {margin: var(--space-30) 0 var(--space-12); color: var(--color-font3);}
.guide-section .guide-tit + .guide-demo, .guide-section .guide-desc + .guide-demo, .guide-section .guide-desc + .guide-code, .guide-section .guide-desc + .guide-table-wrap {margin-top: var(--space-16);}

.guide-section .guide-demo {padding: var(--space-20); border: 1px dashed var(--color-border2); border-radius: var(--radius-small); background-color: var(--color-section1);}
.guide-section .guide-demo > * + * {margin-top: var(--space-16);}
.guide-section .guide-demo.gray {background-color: var(--color-bg);}
.guide-section .guide-demo + .guide-demo {margin-top: var(--space-12);}

.guide-section .guide-code-wrap {margin-top: var(--space-6);}
.guide-section .guide-code-wrap summary {display: inline-flex; align-items: center; min-height: 32px; color: var(--color-font3); cursor: pointer;}
.guide-section .guide-code {margin-top: var(--space-6); padding: 14px 16px; border-radius: var(--radius-small); background-color: var(--color-font1); color: var(--color-border1); font-family: Consolas, 'Courier New', monospace; white-space: pre; overflow-x: auto;}
.guide-section .guide-code code {padding: 0; background: none;}

/* 설명 표 */
.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 var(--space-8); border-bottom: 1px solid var(--color-border1); vertical-align: top;}
.guide-section .guide-table thead th {background-color: var(--color-section2);}
.guide-section .guide-table tbody th {white-space: nowrap; font-family: Consolas, monospace;}
.guide-section .guide-table td {color: var(--color-font2);}

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

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

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

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

@media screen and (max-width: 1024px) {
    .guide-nav {margin-top: calc(var(--space-20) * -1);}
}

/* 화면 미리보기 */
.guide-pv-search .guide-pv-search-form {display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-8) var(--space-16); padding: var(--space-12) var(--gutter);}
.guide-pv-search .search-field {width: 360px; max-width: 100%;}
.guide-pv-search .guide-pv-count {color: var(--color-font3);}
.preview-list {border: 1px solid var(--color-border1); border-radius: var(--radius);}
.preview-list > li:not([hidden]) ~ li:not([hidden]) {border-top: 1px solid var(--color-border1);}
.preview-list .preview-link {display: flex; align-items: center; column-gap: var(--space-12); min-height: 56px; padding-inline: var(--space-20); transition: background-color 0.2s;}
.preview-list .preview-link .body-large {transition: color 0.2s;}
.preview-list .preview-name {display: flex; flex: 1 1 auto; align-items: center; column-gap: var(--space-10); min-width: 0;}
.preview-list .badge {flex: none; justify-content: center; min-width: 48px;}
.preview-list .preview-path {flex: none; color: var(--color-font4);}
.preview-list .ico {color: var(--color-font4);}
.guide-section .guide-tit + .preview-list {margin-top: var(--space-16);}
.guide-pv-empty {margin-top: var(--space-20); padding: var(--space-40) var(--space-20); color: var(--color-font3); text-align: center;}

@media (hover: hover) {
    .preview-list .preview-link:hover {background-color: var(--color-section2);}
    .preview-list .preview-link:hover .body-large {color: var(--color-static2);}
}

@media screen and (max-width: 768px) {
    .preview-list .preview-path {display: none;}
}