/*============================================================*/
/* 레이아웃 */
/*============================================================*/
html {font-size: 62.5%; /* 16px */}
body {background: #fff; color: #101010; font-family: 'Pretendard', sans-serif; font-size: 1.6rem; font-weight: 400; line-height: 1.25;}
@media (min-width: 1921px) {
    html {font-size: 70.4%; /* 18px */}
}
@media (max-width: 992px) {
    html {font-size: 58.6%; /* 15px */}
}



/*============================================================*/
/* 포트폴리오 - 상세페이지 (공통) */
/*============================================================*/
.portfolioPage {display: flex; align-items: flex-start; width: 100%; height: 100dvh; background: #101010; color: #fff; overflow: hidden;}

aside {flex: 0 0 20%; padding: 11rem 4.3rem;}
aside h1 {width: 28rem; max-width: 100%; aspect-ratio: 281/69; background: url("/img/logo/horiz_wt.png") left center/contain no-repeat;}
aside h1 a {display: block; width: 100%; height: 100%;}
aside .depth-list {margin-top: 8.5rem;}
aside .depth-list h2 {font-size: 3.2rem; font-weight: 700}
aside .depth-list h3 {margin-top: 1rem; font-size: 1.6rem; font-weight: 400;}
aside .btn-back {position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 0.2rem; text-align: center; height: auto; padding: 0.6rem 1rem; border: 1px solid #fff; border-radius: 0.4rem; font-size: 14px; font-weight: 400; margin-top: 4rem;}

article {width: 80%; height: 100dvh; padding-bottom: 4rem; overflow-x: hidden; overflow-y: scroll;}
article::-webkit-scrollbar {width: 14px; height: 14px;}
article::-webkit-scrollbar-thumb {background-color: #999; border-radius: 10px; border: 4px solid #101010; cursor: pointer;}
article::-webkit-scrollbar-track {background-color: rgba(0,0,0,0);}

.btm-btn {margin-top: 3rem; padding: 0 2rem; text-align: center;}
.btm-btn .btn-back {position: relative; display: inline-flex; justify-content: center; align-items: center; gap: 0.2rem; text-align: center; min-width: 16rem; height: 5rem; padding: 0 1rem; border: 1px solid #fff; border-radius: 0.4rem; font-size: 1.6rem; font-weight: 500;}

@media (max-width: 1200px) {
    aside {flex: 0 0 10%; padding: 11rem 2rem;}
    article {width: 90%;}
}
@media (max-width: 992px) {
    .portfolioPage {flex-direction: column; height: auto; overflow: hidden auto;}
    aside {display: grid; grid-template-columns: repeat(2, auto); justify-content: space-between; align-items: center; gap: 2rem 1rem; width: 100%; padding: 3rem 2rem;}
    aside h1 {grid-column: 1/3;}
    aside .depth-list {display: flex; align-items: center; gap: 2rem; margin-top: 0;}
    aside .btn-back {margin-top: 0;}
    article {width: 100%; height: auto; overflow: hidden auto;}
}



/*============================================================*/
/* 포트폴리오 - 상세페이지 (목록) */
/*============================================================*/
.portfolio-list {display: grid; grid-template-columns: repeat(4, 1fr); width: 100%;}
.portfolio-item {transition: all 300ms;}
.portfolio-item .thumb {position: relative; width: 100%; aspect-ratio: 1; margin: 0 auto; overflow: hidden;}
.portfolio-item .thumb img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; transition: var(--trans-25); object-fit: cover; transition: all 300ms ease-in-out;}
.portfolio-item .txt-wrap {display: flex; flex-direction: column; text-align: left; gap: .8rem; padding: 2rem 4rem;}
.portfolio-item .txt-wrap .name {font-size: 1.8rem; font-weight: 400; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; word-break: break-all; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.portfolio-item .txt-wrap .category {color: #999; font-size: 1.6rem; font-weight: 400; display: -webkit-box; text-overflow: ellipsis; overflow: hidden; word-break: break-all; line-clamp: 1; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

@media (hover: hover) and (pointer: fine) {
    .portfolio-item:hover .thumb img {transform: translate(-50%, -50%) scale(1.05);}
}
@media (max-width: 1440px) {
    .portfolio-list {grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 1200px) {
    .portfolio-item .txt-wrap {padding: 2rem;}
}
@media (max-width: 992px) {
    .portfolio-list {grid-template-columns: repeat(3, 1fr);}
}
@media (max-width: 768px) {
    .portfolio-list {grid-template-columns: repeat(2, 1fr);}
}
@media (max-width: 576px) {
    .portfolio-list {grid-template-columns: repeat(1, 1fr);}
}

.portfolio-more-wrap {
    margin-top: 40px;
    text-align: center;
}

.portfolio-more-btn {
    min-width: 140px;
    height: 46px;
    padding: 0 24px;
    border: 1px solid #fff;
    background: transparent;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 1px;
    cursor: pointer;
}

.portfolio-more-btn:hover {
    background: #fff;
    color: #111;
}

#portfolioLoading {
    margin-top: 24px;
    text-align: center;
    color: #999;
    font-size: 14px;
}


/*============================================================*/
/* 포트폴리오 - 상세페이지 (상세) */
/*============================================================*/
.portfolio-view {text-align: center;}