@charset "utf-8";

/* 컴포넌트 가이드 (개발용 - 납품 전 제거) */
.guide-section {padding-block: var(--space-80);}
.guide-section + .guide-section {border-top: 1px solid var(--color-border1);}
.guide-section .guide-tit {margin-bottom: var(--space-30);}
.guide-section .guide-sub-tit {margin: var(--space-40) 0 var(--space-16); color: var(--color-font3);}
.guide-section .guide-box {padding: var(--space-30); border: 1px dashed var(--color-border2); border-radius: var(--radius);}
.guide-section .guide-box.bg-dark {background-color: var(--color-static1);}
.guide-section .guide-btn-list {margin-top: var(--space-40);}
.guide-section .guide-code {display: block; margin-top: 8px; font-family: ui-monospace, Menlo, Consolas, monospace; font-size: var(--fs-12); color: var(--color-font3);}

/* 컬러칩 */
.guide-section .color-list {display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--space-20);}
.guide-section .color-chip {aspect-ratio: 1; border: 1px solid var(--color-border1); border-radius: var(--radius);}

/* 타이포그래피 */
.guide-section .type-list > li {display: grid; grid-template-columns: 240px 1fr; align-items: baseline; column-gap: var(--space-24); padding-block: var(--space-16); border-bottom: 1px solid var(--color-border1);}

/* 폼 */
.guide-section .guide-form {max-width: 680px;}
.guide-section .guide-form .square-btn {margin-top: var(--space-30);}
.guide-section .paypal-btn {max-width: 368px; min-height: var(--size-48);}

@media screen and (max-width: 768px) {
    .guide-section .type-list > li {grid-template-columns: 1fr; row-gap: 4px;}
}