@charset "utf-8";
/* 스타일 가이드 전용 - 서비스 페이지에서는 불러오지 않는다 */

/* style.css / member.css 의 페이지 배경 무시 */
body {
    background: #fff;
}

.guide {
    padding: 0 1rem 5rem;
    color: #010f3b;
}

/* 스크롤해도 상단에 고정 */
.guide__head {
    position: sticky;
    top: 0;
    z-index: 10;
    max-width: 90rem;
    margin: 0 auto;
    padding-block: 1.5rem 1rem;
    border-bottom: 2px solid #010f3b;
    background: #fff;
}

.guide__title {
    font-size: 1.875rem;
    font-weight: 800;
}

/* 바로가기 */
.guide__nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
    padding: 0;
    list-style: none;
}

.guide__nav-link {
    display: inline-flex;
    align-items: center;
    height: 2rem;
    padding: 0 0.875rem;
    border: 1px solid #d1d6db;
    border-radius: 1rem;
    font-size: 0.8125rem;
    color: #010f3b;
    text-decoration: none;
    white-space: nowrap;
}

.guide__nav-link:hover {
    border-color: #2b79ed;
    color: #2b79ed;
}

/* 좁은 화면에서는 한 줄로 가로 스크롤 - 고정 헤더가 화면을 가리지 않게 */
@media screen and (max-width: 820px) {
    .guide__nav-list {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 0.25rem;
    }
}

/* 좁은 화면에서 표만 가로 스크롤 */
.guide__scroll {
    max-width: 90rem;
    margin: 2rem auto 0;
    overflow-x: auto;
}

.guide__table {
    min-width: 64rem;
    table-layout: fixed;
    font-size: 0.875rem;
    line-height: 1.6;
}

.guide__col--cate {
    width: 9rem;
}

.guide__col--class {
    width: 17rem;
}

.guide__col--preview {
    width: 30%;
}

.guide__table th,
.guide__table td {
    padding: 1rem;
    border: 1px solid #e5e6e8;
    text-align: left;
    vertical-align: top;
}

.guide__table thead th {
    border-color: #010f3b;
    background: #010f3b;
    font-weight: 600;
    color: #fff;
    text-align: center;
}

.guide__table tbody th {
    background: #f5f6f8;
    font-weight: 600;
}

/* 바로가기로 이동한 행이 고정 헤더에 가려지지 않게 (--guide-head-h 는 style_guide.php 스크립트에서 계산) */
.guide__table > tbody > tr {
    scroll-margin-top: calc(var(--guide-head-h, 10rem) + 1rem);
}

/* 클래스명 목록 */
.guide__list {
    padding-left: 1rem;
}

.guide__list li + li {
    margin-top: 0.375rem;
}

.guide__name {
    font-family: Consolas, Monaco, monospace;
    font-weight: 600;
    color: #2b79ed;
    word-break: break-all;
}

.guide__note {
    margin-top: 0.75rem;
    font-size: 0.8125rem;
    color: #8b95a1;
}

.guide__code {
    margin: 0;
    padding: 1rem;
    border-radius: 0.5rem;
    background: #0d1528;
    font-family: Consolas, Monaco, monospace;
    font-size: 0.8125rem;
    line-height: 1.6;
    color: #e5e6e8;
    white-space: pre-wrap;
    word-break: break-all;
    tab-size: 4;
}

/* 선언 (속성: 값) */
.guide__decl {
    font-family: Consolas, Monaco, monospace;
    font-size: 0.75rem;
    color: #4e5968;
    word-break: break-all;
}

.guide__decl-label {
    display: block;
    color: #8b95a1;
}

/* 미리보기 */
.guide__demo {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.75rem;
}

.guide__demo--stack {
    flex-direction: column;
    align-items: stretch;
}

/* 툴팁이 보일 공간 확보 */
.guide__demo--tip {
    justify-content: center;
    gap: 2.5rem;
    padding-block: 2.5rem;
}

/* 정렬 미리보기용 박스 */
.guide__box {
    padding: 0.5rem 0.75rem;
    border: 1px dashed #c4c9d1;
    border-radius: 0.25rem;
}

.guide__box--tall {
    height: 3.5rem;
}

/* 툴팁 미리보기용 버튼 */
.guide__tip {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: #010f3b;
    font-size: 0.8125rem;
    font-weight: 700;
    color: #fff;
}

/* 클래스 이름 목록 */
.guide__class-list {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.75rem 1.5rem;
    padding: 0;
    list-style: none;
}

/* 버튼 카드 - 한 줄에 한 장 */
.guide__cards {
    display: grid;
    align-items: start;
    gap: 1rem;
}

.guide__card {
    overflow: hidden;
    border: 1px solid #e5e6e8;
    border-radius: 0.5rem;
    background: #fff;
}

.guide__card-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: #010f3b;
    font-size: 0.875rem;
    font-weight: 700;
    color: #fff;
}

.guide__card-count {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    min-width: 1.25rem;
    height: 1.25rem;
    padding: 0 0.375rem;
    border-radius: 0.625rem;
    background: #2b79ed;
    font-size: 0.6875rem;
    color: #fff;
}

.guide__card-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

.guide__card-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
}

.guide__card-item + .guide__card-item {
    border-top: 1px solid #e5e6e8;
}

.guide__card-demo {
    flex: 0 0 auto;
    min-width: 9rem;
}

.guide__card-class {
    min-width: 0;
    font-family: Consolas, Monaco, monospace;
    font-size: 0.75rem;
    color: #4e5968;
    word-break: break-all;
}

/* 컬러 토큰 - 표 위에 따로 배치 */
.guide__color {
    max-width: 90rem;
    margin: 2rem auto 0;
    padding: 1.5rem;
    border-radius: 0.5rem;
    background: #f5f6f8;
    scroll-margin-top: calc(var(--guide-head-h, 10rem) + 1rem);
}

.guide__swatch-list + .guide__color-title {
    margin-top: 2rem;
}

.guide__color-title {
    padding-bottom: 0.625rem;
    border-bottom: 2px solid #010f3b;
    font-size: 1rem;
    font-weight: 700;
}

.guide__swatch-list {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
    gap: 0.75rem;
    margin-top: 1rem;
    padding: 0;
    list-style: none;
}

.guide__swatch-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.625rem 0.75rem;
    border: 1px solid #e5e6e8;
    border-radius: 0.375rem;
    background: #fff;
}

.guide__swatch {
    flex: 0 0 auto;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 0.375rem;
}

.guide__swatch-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}

.guide__swatch-name {
    font-family: Consolas, Monaco, monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: #010f3b;
    word-break: break-all;
}

.guide__swatch-value {
    font-size: 0.6875rem;
    color: #8b95a1;
    word-break: break-all;
}

/* 표 안의 보조 표 */
.guide__sub {
    font-size: 0.8125rem;
}

.guide__table .guide__sub th,
.guide__table .guide__sub td {
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
}

.guide__table .guide__sub thead th {
    border-color: #e5e6e8;
    background: #f5f6f8;
    color: #010f3b;
    text-align: left;
}

.guide__table .guide__sub tbody th {
    background: none;
    font-weight: 400;
}

.guide__sample {
    font-size: 1.125rem;
}