@import url("../css/column.css");

.sideBar {
    width: 360px;
    height: 85vh;
}
.sideBar .backBtn {
    margin-bottom: 156px;
}
.sideBar .sideTitle {
    font-size: 25px;
    line-height: 2.14;
    margin-bottom: 30px;
}
.sideBar .category {
    height: initial;
}
.sideBar .category .categoryList li {
    margin-right: 0;
    padding-bottom: 32.5px;
    margin-bottom: 23.5px;
}
.sideBar .category .categoryList li a .linkHover {
    font-size: 20px;
    line-height: 1.45;
}
.sideBar .category .categoryList li a span {
    display: block;
    font-size: 14px;
    line-height: 1;
    letter-spacing: 1.2px;
    margin-bottom: 2px;
}
.columnDetail {
    max-width: 1220px;
    width: 100%;
    padding-right: 78px;
    padding-top: 0;
    margin-left: 50px;
}
.columnDetail .date {
    font-size: 14px;
    line-height: 0.8;
    letter-spacing: 0.4px;
    margin-bottom: 44px;
}
.columnDetail .title {
    font-weight: 400;
    font-size: 30px;
    letter-spacing: 1.2px;
    margin-bottom: 92px;
}
.columnDetail .img {
    max-width: 1142px;
    width: 100%;
    margin-bottom: 91px;
}
.columnDetail .img img {
    width: 100%;
    aspect-ratio: 1142 / 669;
    object-fit: cover;
}
.columnDetail .text {
    font-size: 18px;
    letter-spacing: 0.7px;
    line-height: 1.944;
    margin-bottom: 30px;
}
.columnDetail .btnWrap {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 115px;
}
.columnDetail .btnWrap li {
    overflow: hidden;
}
.sideBar .sideBarScroll {
    padding-right: 20px;
}

.columnDetail .btnWrap a {
    font-size: 25px;
    letter-spacing: 0.9px;
    position: relative;
}
/* .columnDetail .btnWrap a .linkHover{
    overflow: hidden;
    text-shadow: 0 -1.5em 0 #000, 0 0 0 #000;
    transition: text-shadow 0.3s;
    color: transparent;
} */
.pagination {
    display: flex;
    justify-content: space-between;
    width: 100%;
}
.ftPhoto {
    margin-top: 195px;
}

@media (min-width: 769px) {
    .columnDetail .btnWrap  a:hover .linkHover{
        /* text-shadow: 0 0 0 #000, 0 1.5em 0 #000; */
        text-decoration: underline 1px;
        text-underline-offset: 3px;
        opacity: 1;
    }
    .columnDetail .btnWrap .pagination li:has(.next) {
        margin-left: 0;
    }
    .columnDetail .btnWrap .pagination li:has(.prev) {
        margin-left: auto;
    }
}
@media (max-width: 1440px) {
    .columnDetail {
        padding-right: 0;
    }
}
@media (max-width: 1200px) and (min-width: 769px) {
    .columnDetail .btnWrap a {
        font-size: 20px;
    }
}
@media (max-width: 768px) {
    #content .inner {
        padding:  0 10.8%;
    }
    .columnDetail {
        margin-top: 10px;
        margin-left: 0;
    }
    .columnDetail .date {
        font-size: 14px;
        margin-bottom: clamp(7px,3.9vw,16px);
    }
    .columnDetail .title {
        font-size: clamp(20px,3.9vw,30px);
        margin-bottom: clamp(20px,3.6vw,40px);
        letter-spacing: 0.7px;
    }
    .columnDetail .img {
        margin-bottom: clamp(33px,7.2vw,55px);
    }
    .columnDetail .img img {
        aspect-ratio: 309 / 174;
    }
    .columnDetail .text {
        font-size: clamp(14px,2.5vw,18px);
    }
    .sideBar {
        margin-top: 60px;
        width: 100%;
    }
    .sideBar .backBtn {
        margin-bottom: 40px;
    }
    .backBtn {
        padding: 0;
        margin: 0;
        order: initial;
    }
    .columnDetail .btnWrap a .linkHover{
        padding: 0;
        /* overflow: initial;
        text-shadow: initial; */
        color: #000;
        display: block;
        font-size: clamp(12px,2.2vw,14px);
    }
    .columnDetail .btnWrap {
        margin-top: 108px;
        justify-content: start;
    }
    .columnDetail .btnWrap li {
        line-height: 1;
        margin-left: auto;
        margin-right: 0;
    }
    .columnDetail .btnWrap .pagination li:not(:first-child) {
        margin-left: 5vw;
    }
    
    .sideBar .sideTitle {
        font-size: clamp(18px,3.4vw,25px);
    }
    .sideBar .category .categoryList {
        font-size: clamp(16px,2.5vw,18px);
    }
    .sideBar .category .categoryList li {
        padding-bottom: 25px;
        margin-bottom: 20px;
    }

    .sideBar .category .categoryList li a span {
        font-size: 14px;
        margin-bottom: 5px;
    }
    .columnDetail .btnWrap a {
        font-size: clamp(12px,2.2vw,14px);
    }
    .ftPhoto {
        margin-top: clamp(58px, 10.4vw, 80px);
    }
    .columnDetail .btnWrap {
        justify-content: space-between;
    }
    .pagination {
        width: auto;
    }
}