@charset "utf-8";
.menual-list {display:flex; flex-wrap:wrap; gap:24px;}
.menual-card {overflow:hidden; display:block; width:calc(100% / 3 - (24px * 2) / 3); border:1px solid var(--grayscale3); border-radius:8px; background-color:var(--color-white);}
.menual-card .thumb-wrap {overflow:hidden; width:100%; aspect-ratio:384 / 222; border-bottom:1px solid var(--grayscale3); background-color:var(--grayscale1);}
.menual-card .thumb-wrap img {display:block; width:100%; height:100%; object-fit:cover; object-position:center top; transition:transform .45s ease;}
.menual-card:hover .thumb-wrap img {transform:scale(1.05);}
.menual-card .info-wrap {padding:20px;}
.menual-card .card-tit {display:block; font-size:var(--fs-24); font-weight: 500; line-height:1.5; color:var(--grayscale9);}
.menual-card .card-txt {margin-top:6px; font-size:var(--fs-16); line-height:1.5; color:var(--grayscale8);}
.menual-card .date {display:block; margin-top: var(--fs-32); font-size:var(--fs-14); line-height:1.5; color:var(--grayscale7);}

/* 메뉴얼 뷰 */
.menual-toc {padding-bottom: 30px; border-bottom:1px solid var(--grayscale3);}
.menual-toc strong {display:block; margin-bottom: 24px; font-size:var(--fs-24); font-weight: 500; line-height: 1.5; color:var(--grayscale10);}
.menual-toc ol {display:flex; flex-direction:column; row-gap:12px;}
.menual-toc li a {font-size:var(--fs-18); line-height:1.5; color:var(--grayscale9);}

.menual-content {display:flex; flex-direction:column;}
.menual-step {padding-block: 30px; border-bottom:1px solid var(--grayscale3);}
.menual-step h3 {margin-bottom:24px; font-size:var(--fs-20); font-weight:500; line-height:1.5; color:var(--grayscale9);}
.menual-img {overflow:hidden; width:100%; max-width:800px; aspect-ratio: 800/450; margin-bottom: 24px; background-color:var(--grayscale2);}
.menual-img img {display:block; width:100%; height:100%; object-fit:cover; object-position:center top;}
.menual-desc p {word-break: keep-all; font-size:var(--fs-16); line-height:1.5; color:var(--grayscale9);}
.menual-desc ul {}
.menual-desc li {word-break: keep-all; position:relative; padding-left: 24px; font-size:var(--fs-16); line-height:1.5; color:var(--grayscale9);}
.menual-desc li::before {content:'·'; position:absolute; width: 24px; height: 100%; text-align: center; top:0; left:0; font-size:var(--fs-16); line-height:1.5; color:var(--grayscale9);}

.menual-view-nav {display:flex; align-items:center; justify-content:space-between; gap: var(--fs-24); margin-top: 80px;}
.menual-view-nav > a:not(.list-btn) {display:flex; flex-direction:column; row-gap: 20px; width:330px;}
.menual-view-nav .next {align-items:flex-end; text-align:right;}
.menual-view-nav span {font-size:var(--fs-16); font-weight: 600; line-height:1.5; color:var(--grayscale6); display: flex; align-items: center; column-gap: 4px;}
.menual-view-nav strong {font-size:var(--fs-18); line-height:1.5; color:var(--grayscale10); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; width: 100%;}
.menual-view-nav .list-btn {color:var(--grayscale8); background-color:var(--color-white);}

@media screen and (max-width: 1024px) {
    .menual-list {gap: 16px;}
    .menual-view-nav {margin-top: 60px;}
}

@media screen and (max-width: 768px) {
    .menual-card {width:calc(50% - 8px);}

    /* 메뉴얼 뷰 */
    .menual-toc,
    .menual-step {padding-block: 24px;}
    .menual-view-nav {align-items:stretch; flex-wrap:wrap;}
    .menual-view-nav > a:not(.list-btn) {width:calc(50% - 12px);}
    .menual-view-nav .list-btn {order:3; width:100%;}
}

@media screen and (max-width: 480px) {
    .menual-card {width:100%;}
    .menual-card .info-wrap {padding:18px;}
    .menual-img {aspect-ratio:335 / 210;}
    .menual-view-nav {margin-top: 40px;}
    /* .menual-view-nav > a:not(.list-btn) {width:100%;}
    .menual-view-nav .next {align-items:flex-start; text-align:left;} */
}