.elementor-12914 .elementor-element.elementor-element-7c742ab0{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:24px 24px;--row-gap:24px;--column-gap:24px;--margin-top:0px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12914 .elementor-element.elementor-element-899cd8c{--display:flex;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12914 .elementor-element.elementor-element-899cd8c.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-12914 .elementor-element.elementor-element-fbab311 .jet-listing-dynamic-image{justify-content:flex-start;}.elementor-12914 .elementor-element.elementor-element-fbab311 .jet-listing-dynamic-image__figure{align-items:flex-start;}.elementor-12914 .elementor-element.elementor-element-fbab311 .jet-listing-dynamic-image a{display:flex;justify-content:flex-start;}.elementor-12914 .elementor-element.elementor-element-fbab311 .jet-listing-dynamic-image__caption{text-align:left;}.elementor-12914 .elementor-element.elementor-element-1d2f2711{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--gap:12px 12px;--row-gap:12px;--column-gap:12px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12914 .elementor-element.elementor-element-88dd109 .elementor-heading-title{font-size:20px;font-weight:700;line-height:1.4em;}.elementor-12914 .elementor-element.elementor-element-632f9a94{--display:flex;--flex-direction:row;--container-widget-width:calc( ( 1 - var( --container-widget-flex-grow ) ) * 100% );--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--align-items:center;--gap:8px 8px;--row-gap:8px;--column-gap:8px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-12914 .elementor-element.elementor-element-3c4ca7ef{font-family:"Noto Serif KR", Sans-serif;font-size:14px;color:#3A4BFF;}.elementor-12914 .elementor-element.elementor-element-3b0d8fa8 .elementor-heading-title{font-size:14px;color:#D0D0D0;}@media(min-width:768px){.elementor-12914 .elementor-element.elementor-element-899cd8c{--width:10.822%;}}@media(max-width:1024px){.elementor-12914 .elementor-element.elementor-element-7c742ab0{--gap:16px 16px;--row-gap:16px;--column-gap:16px;--padding-top:0px;--padding-bottom:24px;--padding-left:0px;--padding-right:0px;}}@media(max-width:767px){.elementor-12914 .elementor-element.elementor-element-7c742ab0{--gap:12px 12px;--row-gap:12px;--column-gap:12px;}.elementor-12914 .elementor-element.elementor-element-88dd109 .elementor-heading-title{font-size:16px;}}/* Start custom CSS for container, class: .elementor-element-7c742ab0 *//**
 * DODN Article Loop Template Styles
 * JetEngine Listing Template용 CSS (완성본)
 * 출처: article_list_strict/styles.css
 * ===============================================
 */

/* ============================================= */
/* 1. CSS 변수 (Variables)                        */
/* ============================================= */
:root {
    /* Colors */
    --dodn-color-primary: #333333;
    --dodn-color-secondary: #666666;
    --dodn-color-muted: #999999;
    --dodn-color-white: #FFFFFF;
    --dodn-color-stroke: #D0D0D0;
    --dodn-color-bg-light: #FAFAF8;
    --dodn-color-point-blue: #3A4BFF;

    /* Typography */
    --dodn-font-serif: 'Noto Serif KR', serif;

    /* Sizes - Desktop */
    --dodn-thumbnail-width: 222px;
    --dodn-thumbnail-height: 148px;
    --dodn-title-size: 20px;
    --dodn-meta-size: 14px;

    /* Spacing */
    --dodn-item-gap: 24px;
    --dodn-item-padding-bottom: 32px;
    --dodn-meta-gap: 12px;
}


/* ============================================= */
/* 2. Listing Grid 컨테이너                        */
/* ============================================= */
.jet-listing-grid {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.jet-listing-grid__items {
    display: flex;
    flex-direction: column;
    gap: 0;
}


/* ============================================= */
/* 3. 개별 아이템 (Article Item)                   */
/* ============================================= */
.article-item,
.jet-listing-grid__item {
    display: flex !important;
    flex-direction: row !important;
    gap: var(--dodn-item-gap) !important;
    align-items: center !important;
    padding-bottom: var(--dodn-item-padding-bottom);
    transition: all 0.3s ease;
}


/* ============================================= */
/* 4. 썸네일 컨테이너                               */
/* ============================================= */
.article-thumbnail-con {
    flex-shrink: 0 !important;
    width: var(--dodn-thumbnail-width) !important;
    min-width: var(--dodn-thumbnail-width) !important;
}

.article-thumbnail,
.jet-listing-dynamic-image {
    width: 100%;
}

.article-thumbnail img,
.jet-listing-dynamic-image img,
.jet-listing-dynamic-image__img {
    width: var(--dodn-thumbnail-width) !important;
    height: var(--dodn-thumbnail-height) !important;
    object-fit: cover !important;
    background-color: #eee;
    border-radius: 0;
}


/* ============================================= */
/* 5. 정보 컨테이너                                 */
/* ============================================= */
.article-info-con {
    flex: 1 !important;
    display: flex;
    flex-direction: column;
    gap: var(--dodn-meta-gap);
}


/* ============================================= */
/* 6. 제목 스타일                                   */
/* ============================================= */
.article-title,
.article-title .jet-listing-dynamic-field__content,
.jet-listing-grid__item h2 {
    font-family: var(--dodn-font-serif);
    font-size: var(--dodn-title-size) !important;
    font-weight: 700;
    line-height: 1.4;
    color: var(--dodn-color-primary);
    margin: 0;
}

.article-title a,
.article-title .jet-listing-dynamic-field__content a,
.jet-listing-grid__item h2 a {
    color: var(--dodn-color-primary);
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.article-title a:hover,
.article-title .jet-listing-dynamic-field__content a:hover,
.jet-listing-grid__item h2 a:hover {
    opacity: 0.7;
}


/* ============================================= */
/* 7. 메타 정보 (카테고리 + 작성자)                  */
/* ============================================= */
.article-category,
.article-category p,
.article-category a,
.jet-listing-dynamic-terms {
    font-family: var(--dodn-font-serif);
    font-size: var(--dodn-meta-size) !important;
    font-weight: 700 !important;
    color: var(--dodn-color-point-blue) !important;
    text-decoration: none;
}

.article-author,
.article-author .jet-listing-dynamic-field__content,
.jet-listing-grid__item .post-author {
    font-family: var(--dodn-font-serif);
    font-size: var(--dodn-meta-size) !important;
    font-weight: 400;
    color: var(--dodn-color-muted) !important;
}


/* ============================================= */
/* 8. 페이지네이션                                  */
/* ============================================= */
.jet-filters-pagination,
.jet-listing-grid__pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 64px 0;
}

.jet-filters-pagination__item,
.jet-listing-grid__pagination-item {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    cursor: pointer;
    font-size: 16px;
    color: var(--dodn-color-muted);
    transition: all 0.2s ease;
}

.jet-filters-pagination__item.jet-filters-pagination__item--active,
.jet-listing-grid__pagination-item.active {
    background-color: #F0F0F0;
    color: var(--dodn-color-primary);
    font-weight: 700;
}

.jet-filters-pagination__item:hover:not(.jet-filters-pagination__item--active),
.jet-listing-grid__pagination-item:hover:not(.active) {
    background-color: #FAFAFA;
}


/* ============================================= */
/* 9. 반응형 - 태블릿 (768px 이하)                  */
/* ============================================= */
@media (max-width: 768px) {
    :root {
        --dodn-item-gap: 16px;
        --dodn-item-padding-bottom: 24px;
        --dodn-title-size: 18px;
        --dodn-thumbnail-width: 140px;
        --dodn-thumbnail-height: 93px;
    }

    /* 가로 배치 유지 */
    .article-item,
    .jet-listing-grid__item {
        flex-direction: row !important;
        align-items: center !important;
    }

/* 썸네일 컨테이너 80px */
.article-thumbnail-con,
.jet-listing-dynamic-image {
    width: 80px !important;
    min-width: 80px !important;
    flex-shrink: 0 !important;
}
/* 썸네일 이미지 80x80 정사각형 */
.article-thumbnail img,
.jet-listing-dynamic-image img,
.jet-listing-dynamic-image__img {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    aspect-ratio: 1 / 1;
}
/* e-con-inner 패딩/갭 제거 */
.jet-listing-grid__item .e-con-inner,
.article-item .e-con-inner {
    padding: 0 !important;
    gap: 12px !important;
}
    
}



/* ============================================= */
/* 10. 반응형 - 모바일 (480px 이하)                 */
/* ============================================= */
@media (max-width: 480px) {
    :root {
        --dodn-title-size: 16px;
        --dodn-meta-size: 12px;
        --dodn-item-gap: 12px;
        --dodn-thumbnail-width: 100px;
        --dodn-thumbnail-height: 67px;
    }

    /* 가로 배치 유지 */
    .article-item,
    .jet-listing-grid__item {
        flex-direction: row !important;
        align-items: center !important;
    }

/* 썸네일 컨테이너 80px */
.article-thumbnail-con,
.jet-listing-dynamic-image {
    width: 80px !important;
    min-width: 80px !important;
    flex-shrink: 0 !important;
}
/* 썸네일 이미지 80x80 정사각형 */
.article-thumbnail img,
.jet-listing-dynamic-image img,
.jet-listing-dynamic-image__img {
    width: 80px !important;
    height: 80px !important;
    min-width: 80px !important;
    aspect-ratio: 1 / 1;
}

    .jet-filters-pagination,
    .jet-listing-grid__pagination {
        padding: 40px 0;
    }
    /* e-con-inner 패딩/갭 제거 */
.jet-listing-grid__item .e-con-inner,
.article-item .e-con-inner {
    padding: 0 !important;
    gap: 12px !important;
}
}/* End custom CSS */