/* =========================
   Gallery Plus Scoped CSS
   반드시 list.html에 .ppg-board-scope wrapper가 있어야 함
========================= */


/* =========================
   Base
========================= */

.ppg-board-scope,
.ppg-board-scope * {
    box-sizing: border-box !important;
}

.ppg-board-scope a {
    text-decoration: none !important;
}


/* =========================
   Gallery Base
========================= */

.ppg-board-scope ul.webzine_h.pp_gallery {
    width: 100% !important;
    margin: 0 auto 30px !important;
    padding: 0 !important;
    list-style: none !important;
}

.ppg-board-scope ul.webzine_h.pp_gallery > li.webzine_h_style2,
.ppg-board-scope ul.webzine_h.pp_gallery > li.pp_gallery_item {
    position: relative !important;
    list-style: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    overflow: visible !important;
}

.ppg-board-scope ul.webzine_h.pp_gallery > li > a.doc_link {
    display: block !important;
    width: 100% !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: transparent !important;
    color: inherit !important;
}


/* =========================
   Image
========================= */

.ppg-board-scope ul.webzine_h.pp_gallery .image_area {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 10px !important;
    background: #f4f4f4 !important;
    border: 1px solid #f1f1f2 !important;
    font-size: 0 !important;
    margin: 0 !important;
}

.ppg-board-scope ul.webzine_h.pp_gallery .image_area::after {
    content: none !important;
    display: none !important;
    padding-bottom: 0 !important;
}

.ppg-board-scope ul.webzine_h.pp_gallery .image_area img.thumbnail {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}


/* =========================
   Text
========================= */

.ppg-board-scope ul.webzine_h.pp_gallery .webzine_h_content {
    display: block !important;
    width: 100% !important;
}

.ppg-board-scope ul.webzine_h.pp_gallery .title_area {
    display: block !important;
}

.ppg-board-scope ul.webzine_h.pp_gallery .doc_title {
    display: -webkit-box !important;
    -webkit-box-orient: vertical !important;
    -webkit-line-clamp: 1 !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: normal !important;

    font-size: 15px !important;
    line-height: 1.45 !important;
    font-weight: 700 !important;
    color: #111 !important;
}

.ppg-board-scope ul.webzine_h.pp_gallery .doc_info,
.ppg-board-scope ul.webzine_h.pp_gallery .extra_item {
    display: none !important;
}


/* =========================
   Checkbox / Bookmark
========================= */

.ppg-board-scope ul.webzine_h.pp_gallery input.document_checkbox {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    width: 18px !important;
    height: 18px !important;
    z-index: 10 !important;
    cursor: pointer !important;
}

.ppg-board-scope ul.webzine_h.pp_gallery .bookmark {
    position: absolute !important;
    right: 8px !important;
    bottom: 8px !important;
    z-index: 5 !important;
    width: 28px !important;
    height: 28px !important;
}

.ppg-board-scope ul.webzine_h.pp_gallery .bookmark_icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 24px !important;
    height: 24px !important;
    color: #fff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.35) !important;
}

.ppg-board-scope ul.webzine_h.pp_gallery .bookmark_icon.is-active {
    color: #0C318F !important;
}

.ppg-board-scope ul.webzine_h.pp_gallery .bookmark_svg {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    filter: drop-shadow(0 1px 3px rgba(0,0,0,0.25));
}


/* =========================
   Justified Gallery - PC
========================= */

.ppg-board-scope ul.webzine_h.pp_gallery.pp_justified_gallery {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    gap: 10px !important;
}

.ppg-board-scope ul.webzine_h.pp_gallery.pp_justified_gallery::after {
    content: "" !important;
    flex-grow: 999999 !important;
    min-width: 240px !important;
}

@media (min-width: 769px) {
    .ppg-board-scope ul.webzine_h.pp_gallery.pp_justified_gallery .image_area img.thumbnail {
        height: 100% !important;
        object-fit: cover !important;
    }
}


/* =========================
   Justified Gallery - Mobile
========================= */

@media (max-width: 768px) {
    .ppg-board-scope ul.webzine_h.pp_gallery.pp_justified_gallery {
        display: block !important;
        width: 100% !important;
        margin: 0 auto 30px !important;
        padding: 0 !important;
        gap: 0 !important;
    }

    .ppg-board-scope ul.webzine_h.pp_gallery.pp_justified_gallery::after {
        display: none !important;
        content: none !important;
    }

    .ppg-board-scope ul.webzine_h.pp_gallery.pp_justified_gallery > li.webzine_h_style2,
    .ppg-board-scope ul.webzine_h.pp_gallery.pp_justified_gallery > li.pp_gallery_item {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 10px 0 !important;
        padding: 0 !important;
        flex: none !important;
        flex-basis: auto !important;
        position: relative !important;
        left: auto !important;
        top: auto !important;
    }

    .ppg-board-scope ul.webzine_h.pp_gallery.pp_justified_gallery > li > a.doc_link {
        display: block !important;
        width: 100% !important;
    }

    .ppg-board-scope ul.webzine_h.pp_gallery.pp_justified_gallery .image_area {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: auto !important;
        overflow: hidden !important;
        border-radius: 10px !important;
    }

    .ppg-board-scope ul.webzine_h.pp_gallery.pp_justified_gallery .image_area img.thumbnail {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
        display: block !important;
        object-fit: contain !important;
    }
}


/* =========================
   Masonry Gallery
========================= */

.ppg-board-scope ul.webzine_h.pp_gallery.pp_masonry_gallery {
    position: relative !important;
    display: block !important;
    width: 100% !important;
    margin: 0 auto 30px !important;
    padding: 0 !important;
    list-style: none !important;
}

.ppg-board-scope ul.webzine_h.pp_gallery.pp_masonry_gallery > li.pp_gallery_item,
.ppg-board-scope ul.webzine_h.pp_gallery.pp_masonry_gallery > li.webzine_h_style2 {
    position: absolute !important;
    list-style: none !important;
    border: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-sizing: border-box !important;
}

.ppg-board-scope ul.webzine_h.pp_gallery.pp_masonry_gallery > li > a.doc_link {
    display: block !important;
    width: 100% !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    background: transparent !important;
}

.ppg-board-scope ul.webzine_h.pp_gallery.pp_masonry_gallery .image_area {
    width: 100% !important;
    height: auto !important;
    overflow: hidden !important;
    border-radius: 10px !important;
    background: #f4f4f4 !important;
    border: 1px solid #f1f1f2 !important;
}

.ppg-board-scope ul.webzine_h.pp_gallery.pp_masonry_gallery .image_area::after {
    content: none !important;
    display: none !important;
    padding-bottom: 0 !important;
}

.ppg-board-scope ul.webzine_h.pp_gallery.pp_masonry_gallery .image_area img.thumbnail {
    position: static !important;
    width: 100% !important;
    height: auto !important;
    display: block !important;
    object-fit: contain !important;
}

@media (max-width: 768px) {
    .ppg-board-scope ul.webzine_h.pp_gallery.pp_masonry_gallery {
        height: auto !important;
    }

    .ppg-board-scope ul.webzine_h.pp_gallery.pp_masonry_gallery > li.pp_gallery_item,
    .ppg-board-scope ul.webzine_h.pp_gallery.pp_masonry_gallery > li.webzine_h_style2 {
        position: relative !important;
        width: 100% !important;
        left: auto !important;
        top: auto !important;
        margin: 0 0 10px 0 !important;
    }
}

/* =========================
   PPG Board Search
   게시판 스킨 내부 검색창 전용
========================= */

.ppg-board-scope .ppg-search-box {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 16px !important;

    width: 100% !important;
    margin: 0 0 24px !important;
    padding: 12px 16px !important;

    background: #fafbfe !important;
    border: 1px solid #edf0f6 !important;
    border-radius: 12px !important;
    box-sizing: border-box !important;
}

.ppg-board-scope .ppg-search-info {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;

    color: #777 !important;
    font-size: 13px !important;
    white-space: nowrap !important;
}

.ppg-board-scope .ppg-search-info > div:first-child::after {
    content: "·";
    margin-left: 8px;
    color: #bbb;
}

.ppg-board-scope .ppg-search-count {
    color: #0C318F !important;
    font-weight: 700 !important;
}

.ppg-board-scope .ppg-search-controls {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.ppg-board-scope .ppg-search-form {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}


/* 정렬 select */

.ppg-board-scope .ppg-sort-select-wrap {
    position: relative !important;
    width: 132px !important;
    height: 38px !important;
    flex: 0 0 132px !important;
}

.ppg-board-scope .ppg-sort-select {
    width: 100% !important;
    height: 38px !important;

    padding: 0 34px 0 12px !important;
    border: 1px solid #dfe3ec !important;
    border-radius: 9px !important;
    background: #fff !important;

    color: #333 !important;
    font-size: 13px !important;
    line-height: 38px !important;
    box-sizing: border-box !important;

    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.ppg-board-scope .ppg-sort-select::-ms-expand {
    display: none;
}

.ppg-board-scope .ppg-sort-select-icon {
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    transform: translateY(-50%) !important;

    color: #111 !important;
    font-size: 11px !important;
    pointer-events: none !important;
}


/* 검색 대상 select */

.ppg-board-scope .ppg-target-select-wrap {
    position: relative !important;
    width: 116px !important;
    height: 38px !important;
    flex: 0 0 116px !important;
}

.ppg-board-scope .ppg-target-select {
    width: 100% !important;
    height: 38px !important;

    padding: 0 34px 0 12px !important;
    border: 1px solid #dfe3ec !important;
    border-radius: 9px !important;
    background: #fff !important;

    color: #333 !important;
    font-size: 13px !important;
    line-height: 38px !important;
    box-sizing: border-box !important;

    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.ppg-board-scope .ppg-target-select::-ms-expand {
    display: none;
}

.ppg-board-scope .ppg-target-select-icon {
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    transform: translateY(-50%) !important;

    color: #111 !important;
    font-size: 11px !important;
    pointer-events: none !important;
}


/* 검색 input */

.ppg-board-scope .ppg-search-input-wrap {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.ppg-board-scope .ppg-search-input {
    width: 260px !important;
    height: 38px !important;

    padding: 0 14px !important;
    border: 1px solid #dfe3ec !important;
    border-radius: 9px !important;
    background: #fff !important;

    color: #111 !important;
    font-size: 13px !important;
    line-height: 38px !important;
    box-sizing: border-box !important;
}

.ppg-board-scope .ppg-search-input::placeholder {
    color: #aaa !important;
}

.ppg-board-scope .ppg-search-button {
    width: 40px !important;
    height: 38px !important;
    min-width: 40px !important;

    padding: 0 !important;
    border: 0 !important;
    border-radius: 9px !important;
    background: #0C318F !important;

    color: #fff !important;
    cursor: pointer !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-sizing: border-box !important;
}

.ppg-board-scope .ppg-search-button i {
    color: #fff !important;
    font-size: 17px !important;
}

.ppg-board-scope .ppg-search-next {
    height: 38px !important;
    padding: 0 14px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid #dfe3ec !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #333 !important;

    font-size: 13px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}


/* 모바일 */

@media (max-width: 768px) {
    .ppg-board-scope .ppg-search-box {
        display: block !important;
        margin: 0 0 18px !important;
        padding: 12px !important;
        border-radius: 12px !important;
    }

    .ppg-board-scope .ppg-search-info {
        display: flex !important;
        justify-content: space-between !important;
        margin-bottom: 10px !important;
        font-size: 12px !important;
    }

    .ppg-board-scope .ppg-search-controls {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        width: 100% !important;
    }

    .ppg-board-scope .ppg-sort-select-wrap,
    .ppg-board-scope .ppg-target-select-wrap {
        width: calc(50% - 4px) !important;
        height: 38px !important;
        flex: 0 0 calc(50% - 4px) !important;
        margin: 0 !important;
    }

    .ppg-board-scope .ppg-search-form {
        display: contents !important;
    }

    .ppg-board-scope .ppg-search-input-wrap {
        display: flex !important;
        width: 100% !important;
        flex: 0 0 100% !important;
        gap: 8px !important;
    }

    .ppg-board-scope .ppg-search-input {
        width: calc(100% - 48px) !important;
        flex: 1 1 auto !important;
    }

    .ppg-board-scope .ppg-search-button {
        width: 40px !important;
        min-width: 40px !important;
        flex: 0 0 40px !important;
    }

    .ppg-board-scope .ppg-search-next {
        width: 100% !important;
        margin-top: 8px !important;
    }
}

/* Sort Select */

.ppg-board-scope .gallery-plus-sort-wrap {
    position: relative !important;
    width: 132px !important;
    height: 38px !important;
    flex: 0 0 132px !important;
}

.ppg-board-scope .gallery-plus-sort-select {
    width: 100% !important;
    height: 38px !important;
    padding: 0 34px 0 12px !important;
    border: 1px solid #dfe3ec !important;
    border-radius: 9px !important;
    background: #fff !important;
    color: #333 !important;
    font-size: 13px !important;
    line-height: 38px !important;
    box-sizing: border-box !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
}

.ppg-board-scope .gallery-plus-sort-select::-ms-expand {
    display: none;
}

.ppg-board-scope .gallery-plus-sort-icon {
    position: absolute !important;
    top: 50% !important;
    right: 14px !important;
    transform: translateY(-50%) !important;
    color: #111 !important;
    font-size: 11px !important;
    pointer-events: none !important;
}


/* =========================
   Masonry More Button
========================= */

.ppg-board-scope .pp_masonry_more_wrap {
    width: 100%;
    text-align: center;
    margin: 40px 0 60px;
}

.ppg-board-scope .pp_masonry_more_btn {
    min-width: 160px;
    height: 42px;
    padding: 0 28px;
    border: 0;
    border-radius: 999px;
    background: #f1f1f2;
    color: #333;
    font-size: 14px;
    font-weight: 800;
    cursor: pointer;
    transition: 0.2s ease;
}

.ppg-board-scope .pp_masonry_more_btn:disabled {
    opacity: 0.55;
    cursor: default;
    background: #f5f6fa;
    color: #777;
    border-color: #e0e0e0;
}


/* =========================
   Masonry End Message
========================= */

.ppg-board-scope .pp_masonry_end_message {
    display: none;
    width: 100%;
    text-align: center;
    margin: 36px 0 60px;
    color: #999;
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.02em;
}

.ppg-board-scope .pp_masonry_end_message.is-visible {
    display: block;
}


/* =========================
   Scroll Anchor Control
========================= */

.ppg-board-scope .pp_gallery,
.ppg-board-scope .pp_masonry_more_wrap,
.ppg-board-scope .pp_masonry_end_message {
    overflow-anchor: none;
}

.ppg-board-scope .pp_justified_row {
    width: 100% !important;
}

.ppg-board-scope .pp_justified_row:last-child {
    margin-bottom: 0 !important;
}