/* 전체 페이지를 감싸는 컨테이너 */
#wrapper {
    width: 100%;
    margin: 0 auto;
    /*font-family: Arial, sans-serif;
    padding: 10px;*/
    box-sizing: border-box;
}

/* 메인 컨테이너 */
.main-container {
    width: 100%;
    margin: 0 auto;
}

.article-page {
    width: 100%;
    height: 100%;
    overflow: hidden;
    /*margin-top:10px;*/
}

/* 중앙 상단 광고 영역 */
.centerbar {
    text-align: center;
}

    .centerbar img {
        max-width: 100%;
        height: auto;
    }

/* 유튜브 동영상 영역 */
.article-video {
    text-align: center;
    background-color:#666;
}

    .article-video iframe {
        margin: 20px 0;
        aspect-ratio: 16 / 9;
        width: 100%;
        height: auto;
    }


/* 기사 제목 및 메타 정보 */
.article-header {
    position: relative;
    /*background-image: url('https://i.imgur.com/rgaSrJf.png');*/ /* 실제 이미지 경로로 변경 Script */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 200px;
    width: 100%;
    padding: 10px;
    background-color: #fff;
    color: #222;
    box-sizing: border-box;
    z-index: 1;
    border-bottom: 1px solid #e7e7e7;
}

    /* 배경 이미지가 있을 때 */
    .article-header.has-background {
        background-color: rgba(0, 0, 0, 0.5); /* 이미지 있을 때 어두운 배경 */
        color: #fff; /* 텍스트 흰색 */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

        /* .has-background 레이어 */
        .article-header.has-background::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5); /* 반투명한 검은색 레이어 */
            z-index: -1; /* 레이어를 배경 이미지 위에 */
            filter: brightness(0.3); /* 밝기를 낮춰서 검게 */
        }

        /* .has-background 텍스트 색상 변경 */
        .article-header.has-background .article-section-box a,
        .article-header.has-background .article-title,
        .article-header.has-background .article-subtitle,
        .article-header.has-background .article-meta {
            color: #fff;
        }



/* 텍스트와 레이아웃 설정 */
.article-header-wapper {
    position: relative; /* 레이아웃이 겹치지 않게 */
    max-width: 100%;
    padding: 20px;
    z-index: 2; /* 텍스트가 레이어 위에 */
    box-sizing: border-box;
}

.article-section-box a, .article-title, .article-subtitle, .article-meta {
    position: relative;
    z-index: 2; /* 텍스트가 레이어 위에  */
    color: #222;
}

/* 기사 제목 상단의 카테고리 */
.article-section-box {
    font-size: 14px;
    margin-bottom:15px;
}

.article-title {
    font-size: 25px;
    font-weight: bold;
    margin-bottom: 20px;
    line-height: 1.3em; /* 제목 줄 간격 조절 */
}

.article-subtitle {
    font-size: 14px;
    margin-bottom: 20px;
    line-height:1.6;
}

/* 정보 영역 (글쓴이, 날짜) */
.article-meta {
    display: flex;
    flex-wrap: wrap; /* 모바일에서 두 줄로 나누기 위해 wrap */
    justify-content: space-between; /* 작성자, 날짜 등을 양쪽 끝으로 배치 */
    font-size: 13px;
    align-items: flex-start; /* 콘텐츠를 왼쪽 정렬 */
    gap: 20px;
}

    .article-meta .author-name {
        flex: 1 1 50%; /* 50% 너비로 설정하여 한 줄에 배치 */
    }

    .article-meta .reply-count {
        flex: 1 1 30%;
    }

    .article-meta .publish-date {
        flex: 1 1 auto; /* 남은 공간을 차지하도록 설정 */
        text-align: right;
        opacity: 0.8;
    }

.reply-count {

}

    .reply-count:before {
        content: '';
        display: inline-block;
        width: 16px;
        height: 16px;
        background-image: url(/images/common/2024/title_reply_icon_grey_16X16.png);
        background-size: contain;
        background-repeat: no-repeat;
        margin-right: 5px;
        vertical-align: middle;
    }

/* SNS 공유 버튼 설정 */
.article-share {
    display: flex;
    justify-content: flex-end;
    padding: 5px;
    background-color: #fff;
    gap: 5px;
}

    .article-share img {
        width: 24px;
        height: 24px;
        margin-left: 5px;
        cursor: pointer;
    }

    .article-share a {
        display: inline-block;
    }


@media (min-width: 768px) {
    .article-header{
        padding:20px;
    }

    .article-header-wapper {
        max-width: 1200px;
        margin: 0 auto;
    }

    .article-title {
        font-size: 42px;
    }

    .article-subtitle {
        font-size: 20px;
    }

    .article-meta {
        display: flex;
        flex-wrap: nowrap; /* PC 한 줄 */
        justify-content: space-between;
        align-items: baseline;
        font-size: 14px;
    }

        .article-meta .publish-date {
            text-align: left; /* 테블릿 이상에서는 한 줄 좌측정렬 */
        }

        .article-meta .author-name,
        .article-meta .reply-count,
        .reply-count {
            flex: 0 1 auto; /* 한 줄에 모든 요소가 배치 */
            margin-bottom: 0;
            font-size:16px;
        }

    .reply-count {
        font-size: 14px;
    }

    .article-share {
        justify-content: flex-end; /* PC SNS 아이콘 오른쪽 정렬 */
    }

        .article-share img {
            width: 24px;
            height: 24px;
        }
}


/* 본문 기사 영역 */
.article-layout {
    /*display: flex;
    flex-direction: column;*/
    margin-bottom: 20px;
}

/* 모바일 사이드바 숨김 */
.sidebar{
    display: none;
    padding:20px;
}

.article-layout .article-content {
    width: 100%;
    background-color: #fff;
    padding: 20px 15px;
    /*border: 1px solid #e7e7e7;*/
    margin-bottom: 20px;
    box-sizing: border-box;
    /*border-bottom: 0;*/
}

.article-body {
    margin-bottom: 30px;
    line-height: 1.6;
    margin-top: 0px;
    clear: both;
}

    .article-body .btn.img-delete {
        position: absolute;
    }

    .article-body figure.fg-ct {
        clear: both;
        padding-top: 15px;
    }


    .article-body .fg-ct .img-delete {
        display: none;
    }

    .article-body iframe {
        max-width: 100%;
    }

    .article-body #divtagImage {
        background: #ffffff !important;
        border: 0;
    }

    .article-body #divtagCaption {
        background: #ffffff !important;
        padding: 5px 10px !important;
        color: #999999;
        font-size: 14px;
        font-family: HelveticaNeue,AppleSDGothicNeo-Regular,Malgun Gothic,'맑은고딕','돋움',Dotum,sans-serif;
    }

    .article-body > p {
        word-break: break-all;
        word-wrap: break-word;
        line-height: 32px;
        font-size: 18px;
        padding: 12px 0;
        letter-spacing: -0.02em;
        text-align: justify;
        color: #111111;
    }

        .article-body > p:empty {
            visibility: hidden;
        }

/* 좋아요/싫어요 버튼 */
.vote-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 90px; /* 버튼 간의 간격 */
    margin: 30px 0;
}

.vote-button {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 16px;
    color: #333;
}

    .vote-button img {
        width: 24px; /* 이미지 크기 */
        height: 24px;
        margin-bottom: 5px; /* 이미지와 텍스트 사이 간격 */
    }

.vote-button-up img {
    /* 좋아요 아이콘 */
    filter: hue-rotate(100deg); /* 색상 필터(원하는 색상에 맞게 조절 가능) */
}

.vote-button-down img {
    /* 싫어요 아이콘 */
    filter: hue-rotate(0deg) brightness(0.7); /* 색상 조절 */
}

.vote-button:hover img {
    filter: brightness(1.2); /* 호버 시 이미지 밝기 */
}


/* 작성자 프로필 및 저작권 정보 */
.writer-info-container {
    padding: 15px;
    margin-bottom: 20px;
    border-top: 1px solid #dedede;
    border-bottom: 1px solid #dedede;
}

.writer-profile {
    margin-bottom: 20px; /* 프로필과 나머지 내용 사이 간격 */
}

    .writer-profile .profile-image {
        width: 65px;
        height: 65px;
        border-radius: 50%; /* 원형 이미지 */
        background-color: #eeeeee; /* 이미지가 없을 때 배경색 */
        margin-right: 20px; /* 프로필 사진과 프로필 문구 사이 간격 */
        object-fit:contain;
    }

    .writer-profile .writer-info {
        display: flex;
        flex-direction: row;
        margin-bottom: 15px;
    }

    .writer-profile .writer-quote {
        font-size: 14px;
        color: #555555;
    }

    .writer-profile .writer-details {
        display: flex;
        flex-direction: column; /* 아래로 배치되도록 조정 */
    }

    .writer-profile .writer-name {
        font-size: 15px;
        color: #111111;
        margin-bottom: 10px;
        float: left;
    }

    .writer-profile .author-email {
        font-size: 15px;
        color: #111111;
        text-decoration: none;
    }

    .writer-profile .more-articles {
        font-size: 12px;
        color: #666666;
        text-decoration: none;
        display: block;
        text-align: right; /* 우측 정렬 */
        float: right;
        margin-bottom: 10px;
    }

.writer-info-container .copyright-info {
    font-size: 12px;
    color: #666666;
    text-align: left; /* 중앙 정렬하지 않음 */
    clear: both;
}



/* 관련 기사 및 댓글 영역 */
.article-sub-contents {
}

.related-newsbox {
    margin-bottom: 30px;
}

.tit-big {
    font-size: 18px;
    font-weight: bold;
}

.related-newsbox-list {
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: #fff;
    border: 0;
}

    .related-newsbox-list li {
        display: block;
        position: relative;
        padding: 18px 10px;
        font-size: 15px;
        font-weight: bold;
    }

        .related-newsbox-list li a {
            padding: 0;
            font-size: 15px;
        }

            .related-newsbox-list li a:before {
                display: none;
            }

        .related-newsbox-list li ~ li {
            border-top: 1px solid #dedede;
        }

/* 댓글 영역 */
.reply-area {
    margin-bottom: 50px;
}

.section-replay {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 !important;
}

    .section-replay span {
        position: initial;
        color: #9a9a9a;
    }

.reply-cont {
    margin-bottom: 20px;
}

.reply-cont-box {
    margin-bottom: 10px;
}

    .reply-cont-box:nth-last-child(1) {
        border-bottom: 1px solid #e6e6e6;
    }

    .reply-cont-box .line-txt {
        padding-top: 5px;
        margin: 0;
    }

.reply-txt p {
    color: #555555;
    font-size: 14px;
}

.replay-warning-txt {
    margin-bottom: 10px;
    color: #9a9a9a;
}

.reply-input-section {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

    .reply-input-section textarea {
        width: calc(100% - 90px);
        height: 90px;
        border: 1px solid #e5e5e5;
        padding: 10px;
        font-size: 14px;
        color: #9a9a9a;
        resize: none;
        box-sizing: border-box;
    }

    .reply-input-section .btn {
        width: 90px;
        height: 90px;
        background-color: #818181;
        border: 1px solid #818181;
        color: #fefefe;
        font-size: 14px;
        border-radius: 0;
    }

#divReplyContainer #divReplyWriteContainer .reply-input-section span#counter {
    padding: 0 .5em;
    border: 0;
    margin-left: 4px;
    border-radius: 8px;
    font-size: 12px;
    color: #9a9a9a;
}

.captcha-area span.counter {
    float: left;
}

/* 페이징 */
#divCaptchaContainer {
    margin-top: 0 !important;
    float: right;
}

.paging_container {
    text-align: center;
    box-sizing: border-box;
    padding: 20px 0 !important;
}

    /* 버튼 */
    .paging_container span.paging {
        display: inline-block;
        vertical-align: top;
        width: 32px;
        height: 32px;
        line-height: 32px;
        font-size: 14px;
        color: #111;
        padding: 0;
        border: 0;
        background-color: transparent;
        font-weight: normal;
    }

        .paging_container span.paging.active {
            background-color: #02a37f;
            color: #fff;
        }

    .paging_container a.paging {
        border: 0;
        display: inline-block;
        vertical-align: top;
        width: 24px;
        height: 24px;
        margin: 4px 0 0 4px;
        background-size: contain;
        padding: 0;
        border: 0;
        line-height: 1.6;
    }

        .paging_container a.paging img {
            display: none;
        }

    .paging_container .paging:nth-child(1), .paging:nth-last-child(1) {
        display: inline-block;
    }

    .paging_container .paging:nth-child(1) {
        background: url(../images/common/2024/icon-paging-start-24-x-24.svg) no-repeat center;
    }

    .paging_container .paging:nth-child(2) {
        background: url(../images/common/2024/icon-paging-prev-24-x-24.svg) no-repeat center;
    }


    .paging_container .paging:nth-last-child(1) {
        background: url(../images/common/2024/icon-paging-end-24-x-24.svg) no-repeat center;
    }

    .paging_container .paging:nth-last-child(2) {
        background: url(../images/common/2024/icon-paging-next-24-x-24.svg) no-repeat center;
    }


/* 테블릿 */
@media (min-width: 768px) {
    .sidebar-far-right {
        right: -355px;
    }

    .sidebar-left {
        left: -355px;
    }

    .article-section-box {
        font-size: 20px;
    }


    .sidebar-right {
        display: block;
        width: calc(100% - 820px);
        box-sizing: border-box;
        background-color: #fff;
        float: right;
        /*padding: 0 20px;*/
    }

    .article-video iframe {
        /*width: 560px;
        height: 315px;*/
    }
}


/* PC */
@media (min-width: 1180px) {
    .article-layout {
        /*flex-direction: row;*/
        width: 1180px;
        position: relative;
        margin: 0 auto;
    }

    .sidebar {
        margin-top: 20px;
    }

    .sidebar-left, .sidebar-far-right {
        display: block;
        position: absolute;
        width: 305px;
    }


    .article-layout .article-content {
        width: 820px;
        float: left;
    }
    .article-video iframe {
        width: 1080px;
    }
}



/* 250210 추가 모바일에서는 이미지,캡션 중앙정렬되게 */
@media (max-width: 768px) {
    .article-body figure.fg-ct{
        float:none !important;
    }

    .article-body #divtagCaption {
        text-align: center !important;
    }
}