/* ==========================================================================
1. Common & Top Visual
========================================================================== */

/* 1-1. 공통 게시판 상단 검색바 */
.sub-common-top.sub4 {
    background: url("/static/kor/images/news/data-visual.jpg") no-repeat center/cover;
}

.sub-common-top.sub4-sns {
    background: url("/static/kor/images/news/sns-visual.jpg") no-repeat center/cover;
}

/* ==========================================================================
보도자료 페이지
========================================================================== */
.sec-news-list {
    padding: var(--mg-160) 0 var(--mg-200);
    background: #fff;
}

/* 1-2. 뉴스 그리드 및 카드 */
.news-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 4rem;
    margin-bottom: 8rem;
}

.news-card {
    display: block;
    width: 100%;
    overflow: hidden;
    text-decoration: none;
    transition: all 0.3s ease;
}

.news-card .card-img {
    height: 26rem;
    overflow: hidden;
    background: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #CBCCCA;
    border-bottom: 1px solid #E5E5E3;
    border-radius: 1.6rem 1.6rem 0 0;
}

.news-card .card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s;
}

.news-card:hover .card-img img {
    transform: scale(1.05);
}

/* 이미지 미세 줌 효과 UX 증가 */

.news-card .card-txt {
    position: relative;
    padding: 3.2rem 2.8rem;
    background: #fff;
    height: 24rem;
    transition: background-color 0.3s;
    border: 1px solid #CBCCCA;
    border-top: unset;
    border-radius: 0 0 1.6rem 1.6rem;
}

.news-card .title {
    margin-bottom: .8rem;
    font-size: var(--font-28);
    font-weight: 700;
    line-height: 1.4;
    transition: color 0.3s;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-all;
}

.news-card .desc {
    font-size: var(--font-18);
    font-weight: 300;
    color: #2F3133;
    line-height: 1.6;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    transition: opacity 0.3s, visibility 0.3s;
    word-break: break-all;
}

/* 하단 날짜, 조회수 */
.news-card .card-info {
    position: absolute;
    bottom: 3rem;
    left: 3rem;
    right: 3rem;
    display: flex;
    justify-content: space-between;
    padding-top: 3.2rem;
    font-size: var(--font-16);
    font-weight: 300;
    color: #5F6266;
    transition: color 0.3s, border-color 0.3s;
}

.news-card .card-info .view::before {
    margin-right: .475rem;
    content: "";
    display: inline-block;
    width: 17px;
    height: 12px;
    background: url(/static/kor/images/icon/visibility-icon-G.png) no-repeat;
    vertical-align: middle;
    transition: all 0.3s ease;
}

/* Hover 시 나타날 자세히 보기 버튼 (미리 숨겨둠) */
.news-card .btn-more {
    display: flex;
    align-items: center;
    gap: 10px;
    position: absolute;
    top: 13rem;
    right: 3rem;
    color: #fff;
    font-size: var(--font-16);
    font-weight: 600;
    opacity: 0;
    visibility: hidden;
    transform: translateX(-10px);
    transition: all 0.3s ease;
}

.news-card .btn-more::after {
    content: "";
    display: block;
    width: 8px;
    height: 13px;
    background: url(/static/kor/images/icon/view-more-W.png) no-repeat;
}

/* 🔥 핵심: 카드 Hover 효과 처리 */
.news-card:hover .card-txt {
    background-color: #0065BD;
    border-color: #0065BD;
}

.news-card:hover .card-img {
    border-bottom: 1px solid #0065BD;
}

/* 파란색으로 변함 */
.news-card:hover .title {
    color: #fff;
}

.news-card:hover .desc {
    opacity: 0;
    visibility: hidden;
}

/* 설명 숨기기 */
.news-card:hover .btn-more {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

/* 버튼 우측에서 스르륵 등장 */
.news-card:hover .card-info {
    color: #fff;
    opacity: 0.8;
}

.news-card:hover .card-info .view::before {
    background: url(/static/kor/images/icon/visibility-icon-W.png) no-repeat;
}

/* ==========================================================================
보도자료 상세 페이지
========================================================================== */
.sec-news-detail {
    padding: var(--mg-200) 0 var(--mg-200);
    background: #fff;
}

.sec-news-detail .common-wrap {
    max-width: 134rem;
}

.detail-header {
    margin-bottom: 8rem;
    border-bottom: 1px solid #2F3133;
}

.detail-title {
    margin-bottom: 1.6rem;
    font-size: var(--font-40);
    font-weight: 700;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.detail-info {
    padding-bottom: 4rem;
    display: flex;
    gap: 4rem;
    font-size: var(--font-18);
    font-weight: 300;
    color: #5F6266;
}

.detail-info .view::before {
    margin-right: .475rem;
    content: "";
    display: inline-block;
    width: 17px;
    height: 12px;
    background: url(/static/kor/images/icon/visibility-icon-G.png) no-repeat;
    vertical-align: middle;
}

/* 🟥 CMS 에디터 전용 기본 CSS 세팅 🟥 */
.cms-content {
    min-height: 40rem;
    padding-bottom: 5rem;
    font-size: var(--font-16);
    color: #333;
    line-height: 1.8;
    word-break: keep-all;
}

/* 에디터에서 올라온 이미지 삐져나감 방지 */
.cms-content img {
    max-width: 100%;
    height: auto;
    display: block;
    margin: 0 auto 3rem;
}

.cms-content p {
    margin-bottom: 2rem;
    font-size: var(--font-18);
    font-weight: 300;
    color: #2F3133;
}

.cms-content p:last-child {
    margin-bottom: unset;
}

/* 첨부파일 영역 */
.detail-attachment {
    margin-bottom: 4rem;
    padding: 2.5rem 4.8rem;
    background: #F5F5F5;
    border-radius: 8px;
}

.detail-attachment dl {
    display: flex;
    align-items: flex-start;
    gap: 8px;
}

.detail-attachment dl dt {
    font-size: var(--font-18);
    font-weight: 500;
    flex-shrink: 0;
}

.detail-attachment dl dd {
    display: flex;
    flex-direction: column;
    row-gap: .8rem;
}

.detail-attachment dl dd a {
    display: flex;
    align-items: center;
    gap: 2.8rem;
    font-size: var(--font-16);
    font-weight: 300;
    color: #2F3133;
}

.detail-attachment dl dd a span {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.detail-attachment dl dd a::before {
    content: "";
    display: block;
    width: 16px;
    height: 16px;
    background: url(/static/kor/images/business/samjocelltech/download.png) no-repeat;
}

/* 이전/다음 글 네비게이션 */
.detail-nav {
    margin-bottom: 8rem;
    padding-top: 4rem;
    display: flex;
    border-top: 1px solid #CBCCCA;
}

.detail-nav li {
    flex: 1;
    height: 6rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    transition: background 0.2s;
}

.detail-nav .dir {
    width: 2.4rem;
    height: 2.4rem;
}

.detail-nav .prev .dir {
    background: url(/static/kor/images/icon/news-prev-on-icon.svg) no-repeat center/cover;
}

.detail-nav .next .dir {
    background: url(/static/kor/images/icon/news-next-on-icon.svg) no-repeat center/cover;
}

.detail-nav .next.none-cont .dir {
    background: url(/static/kor/images/icon/news-next-off-icon.svg) no-repeat center/cover;
}

.detail-nav .prev.none-cont .dir {
    background: url(/static/kor/images/icon/news-prev-off-icon.svg) no-repeat center/cover;
}

.detail-nav .nav-title {
    max-width: 27.6rem;
    width: 100%;
    font-size: var(--font-20);
    font-weight: 500;
    color: #17181A;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    word-break: break-all;
}

.detail-nav .next {
    justify-content: flex-end;
}

.detail-nav .next .nav-title {
    text-align: right;
    margin-right: 2.4rem;
}

.detail-nav .next.none-cont .nav-title,
.detail-nav .prev.none-cont .nav-title {
    color: #8F9294;
}

.detail-nav .prev {
    justify-content: flex-start;
    position: relative;
}

.detail-nav .prev::after {
    content: "";
    display: block;
    width: 1px;
    height: 4.8rem;
    background: #E5E5E3;
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.detail-nav .prev .nav-title {
    margin-left: 2.4rem;
}

.detail-nav .line {
    display: none;
}

/* 목록보기 버튼 */
.btn-wrap-center {
    text-align: center;
}

.btn-list-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #0065BD;
    width: 20rem;
    height: 5.6rem;
    color: #fff;
    font-size: var(--font-18);
    font-weight: 700;
    border-radius: 3rem;
    text-decoration: none;
    transition: background 0.3s;
}

/* ==========================================================================
SNS 페이지
========================================================================== */
.sec-sns-brands {
    padding: var(--mg-200) 0 var(--mg-200);
    background: #fff;
}

.sns-title {
    margin-bottom: 9.6rem;
    font-size: var(--font-56);
    font-weight: 800;
    font-family: var(--paybooc);
    text-align: center;
}

@media screen and (max-width: 1023px) {
    .news-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 2rem;
    }
}

@media screen and (max-width: 767px) {
    .sub-common-top.sub4 {
        background: url("/static/kor/images/news/data-visual-mob.jpg") no-repeat center/cover;
    }

    .sub-common-top.sub4-sns {
        background: url("/static/kor/images/news/sns-visual-mob.jpg") no-repeat center/cover;
    }

    .detail-attachment {
        padding: 2.5rem 2.8rem;
    }

    .detail-attachment dl dd a::before {
        width: 12px;
        height: 12px;
        background: url(/static/kor/images/business/samjocelltech/download.png) no-repeat center / cover;
    }

    .news-card .desc {
        font-size: 1.4rem;
    }

    .detail-nav {
        margin-bottom: 4rem;
        flex-direction: column;
        gap: 4px;
    }

    .detail-nav li {
        justify-content: space-between !important;
        height: 4.8rem;
        flex: unset;
    }

    .detail-nav .dir {
        order: 2;
        transform: rotate(90deg);
        width: 1.8rem;
        height: 1.8rem;
    }

    .detail-nav .prev .nav-title {
        margin-left: 0;
    }

    .detail-nav .next .nav-title {
        text-align: left;
        -webkit-line-clamp: 1;
    }

    .detail-nav .prev::after {
        display: none;
    }

    .detail-nav .line {
        display: block;
        height: 1px;
        background: #E5E5E3;
    }

    .btn-list-blue {
        width: 15.6rem;
        height: 4.8rem;
    }

    .sec-sns-brands .txt-area>span {
        display: none;
    }

    .news-card .card-img {
        border-radius: .8rem .8rem 0 0;
    }

    .news-card .card-txt {
        border-radius: 0 0 .8rem .8rem;
    }
}

@media screen and (max-width: 580px) {
    .news-grid {
        grid-template-columns: repeat(1, minmax(0, 1fr));
        margin-bottom: 2.4rem;
    }

    .news-card .card-img {
        height: 18.4rem;
    }

    .news-card .card-txt {
        padding: 1.6rem;
        height: 19rem;
    }

    .news-card .btn-more {
        top: 12rem;
        right: 1.6rem;
    }

    .news-card .card-info {
        left: 1.6rem;
        right: 1.6rem;
        bottom: 1.8rem;
        padding-top: 1.6rem;
    }

    .news-card .btn-more::after {
        width: 6px;
        height: 10px;
        background: url(/static/kor/images/icon/view-more-W.png) no-repeat center/cover;
    }

    .detail-attachment {
        padding: 2rem 1.8rem;
    }

    .detail-nav .prev .nav-title {
        margin-left: .4rem;
    }

    .detail-nav .next .nav-title {
        margin-right: .4rem;
    }
}