/* ==========================================================
   duna_contents widget — minimal CSS
   레이아웃(style.css)의 service__*, owl__* 등을 그대로 활용하고
   위젯 고유 요소(board-header, list, webzine, meta, badge 등)만 정의합니다.
   ========================================================== */

   /* ----------------------------------------------------------
   dommon
   ---------------------------------------------------------- */
.dc__list--background {
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}
.dc__title--warp {
    display: flex;
    align-items: center;
}
/* ----------------------------------------------------------
   Board header
   ---------------------------------------------------------- */
.dc__board-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-bottom: 2rem;
    color: var(--duna-point1);
    text-transform: uppercase;
}
.dc__board-header__title {
    font-size: 1.5rem;
    margin: 0;
}
.dc__board-header__btn {
    flex-shrink: 0;
}
.dc__board-header .dc__cat-filter {
    margin-bottom: 0;
}
/* ----------------------------------------------------------
   New badge
   ---------------------------------------------------------- */
.dc__badge--new {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: var(--duna-color, #0d6efd);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    width: 1.25em;
    height: 1.25em;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: 0.25em;
    line-height: 1;
}

/* ----------------------------------------------------------
   Category label
   ---------------------------------------------------------- */
.dc__category {
    color: var(--duna-point1);
    text-transform: uppercase;
    font-size: .8rem;
    line-height: 1;
    flex-shrink: 0
}

.dc__category--boardr {
    border: 1px solid var(--duna-point1);
    border-radius: 5px;
    padding: .3rem;
}

/* ----------------------------------------------------------
   Meta (date, author, counts)
   ---------------------------------------------------------- */
.dc__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 0.75rem;
    margin-top: 0.6rem;
    font-size: 0.78rem;
    color: var(--duna-gray-500, #adb5bd);
}
.dc__meta .material-symbols-outlined {
    font-size: 0.9em;
    vertical-align: -0.1em;
    margin-right: 0.15em;
}

/* ----------------------------------------------------------
   Extra vars
   ---------------------------------------------------------- */
.dc__exvars {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem 0.75rem;
    margin-top: 0.5rem;
    font-size: 0.78rem;
}
.dc__exvar__label {
    color: var(--duna-gray-500);
}

/* ----------------------------------------------------------
   Gallery — service__* CSS is reused from layout.
   ---------------------------------------------------------- */
.service__image--empty {
    background: var(--duna-gray-100);
}

.dc__gallery .service__content {
    margin-top: 1rem;
}

.dc__gallery-col {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity .4s ease, transform .4s ease;
}
.dc__gallery-col.is-visible {
    opacity: 1;
    transform: none;
}

/* ----------------------------------------------------------
   List layout (dc__list)
   ---------------------------------------------------------- */
.dc__list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.dc__list-item {
    border-bottom: 1px dotted var(--duna-gray-200);
    transition: .5s;
}

.dc__list-item:hover {
    border-bottom: 1px dotted var(--duna-point1);
}

.dc__list-link {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
    color: inherit;
    text-decoration: none;
}
.dc__list-link--static {
    cursor: default;
}
.dc__list-thumb {
    flex-shrink: 0;
    width: 6rem;
    aspect-ratio: 16/9;
    border-radius: 0.375rem;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--duna-gray-100);
}
.dc__list-body {
    flex: 1;
    min-width: 0;
    max-width: 70rem;
}
.dc__list-date time {
    text-align: center;
    font-family: 'Montserrat', sans-serif;
    color: var(--duna-gray-300);
    transition:.5s
}

.dc__list-date {
    width: 5rem;
    display: inline-flex;
    justify-content: flex-start;
}

.dc__list-item:hover time{
    color: var(--duna-point1)
}

.dc__date-day {
    font-size: 2.5rem;
    line-height: 1.1;
}

.dc__list .dc__category{
    margin-right: .5rem;
}

.dc__list-title {
    display: flex;
    align-items: center;
}

.dc__title {
    font-size: 1.3rem;
}

.dc__list-more {
    width: 50px;
}

.dc__list-more .material-symbols-outlined {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border: 1px solid var(--duna-gray-300);
    border-radius: 50%;
    color: var(--duna-gray-200);
    transition:.5s;
}

.dc__list-item:hover .dc__list-more .material-symbols-outlined {
    width: 2.5rem;
    height: 2.5rem;
    border: 1px solid var(--duna-point1);
    color: var(--duna-point1);
}

.dc__summary {
    color: var(--duna-gray-600, #6c757d);
    font-size: 0.875rem;
    word-break: keep-all;
    margin-top: 0.35em;
}

@media (max-width:991.98px){
    .dc__title {font-size: 1.1rem;}
    .dc__date {font-size: .8rem; color: var(--duna-gray-500); margin-top: .5rem;}
    .dc__list-item .dc__category {margin-right: .5rem;}
    .dc__list-item:hover {border-bottom: 1px dotted var(--duna-gray-200);}
}

/* ----------------------------------------------------------
   Webzine layout (dc__webzine)
   ---------------------------------------------------------- */
.dc__webzine {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}
.dc__webzine-link {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    color: inherit;
    text-decoration: none;
}
.dc__webzine-link--static {
    cursor: default;
}
.dc__webzine-thumb {
    flex-shrink: 0;
    width: 20rem;
    aspect-ratio: 16/9;
    border-radius: 0.5rem;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: var(--duna-gray-100);
}
.dc__webzine-body {
    flex: 1;
    min-width: 0;
}
.dc__webzine .dc__category{
    margin-right: .5rem;
}

@media (max-width: 575.98px) {
    .dc__webzine-link {
        flex-direction: column;
    }
    .dc__webzine-thumb {
        width: 100%;
    }
}

/* ----------------------------------------------------------
   Carousel — owl__* CSS is reused from layout.
   Empty figure placeholder.
   ---------------------------------------------------------- */
.dc__carousel .owl-carousel .owl-stage-outer { overflow: visible; }
.owl__figure--empty {
    background: var(--duna-gray-100, #f8f9fa);
}

/* ----------------------------------------------------------
   FAQ accordion — Bootstrap 5 accordion is reused.
   Minor tweaks only.
   ---------------------------------------------------------- */
.dc__faq .accordion-button {
    font-weight: 600;
    word-break: keep-all;
    padding: 1rem;
}
.dc__faq-answer {
    word-break: keep-all;
}
.dc__faq-more-link {
    display: inline-flex;
    align-items: center;
    gap: 0.25em;
    font-size: 0.85rem;
    color: var(--duna-color, #0d6efd);
}
.dc__faq-more-link .material-symbols-outlined {
    font-size: 1em;
}

.dc__faq .accordion-item {
    border: unset;
    border-bottom: 1px solid var(--duna-gray-300);
}

.dc__faq .accordion-button:not(.collapsed) {
    background-color: var(--duna-gray-100);
    color: var(--duna-gray-900);
}

.accordion-button:focus {box-shadow: none;outline: none;}  

/* ----------------------------------------------------------
   Category filter buttons
   ---------------------------------------------------------- */
.dc__cat-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 2rem;
}
.dc__cat-btn {
    display: inline-flex;
    align-items: center;
    padding: 0.5rem 1rem;
    border: 1px solid var(--duna-gray-300);
    border-radius: 2rem;
    background: transparent;
    color: var(--duna-gray-600);
    font-size: 0.85rem;
    font-weight: 500;
    text-transform: uppercase;
    transition: .3s;
    line-height: 1.4;
}
.dc__cat-btn:hover {
    border-color: var(--duna-point1);
    color: var(--duna-point1)
}
.dc__cat-btn--active {
    background-color: var(--duna-point1);
    border-color: var(--duna-point1);
    color: var(--duna-gray-100);
}
.dc__cat-btn--active:hover {
    background-color: var(--duna-point1);
    border-color: var(--duna-point1);
    color: var(--duna-gray-100);
}

/* ----------------------------------------------------------
   Board footer (bottom link button)
   ---------------------------------------------------------- */
.dc__board-footer {
    display: flex;
    justify-content: center;
    margin-top: 2rem;
}

/* ----------------------------------------------------------
   Load more button area
   ---------------------------------------------------------- */
.dc__loadmore {
    display: flex;
    justify-content: center;
    align-items: center;
}