/* ==========================================================================
   관찰자들 매거진/가이드 썸네일
   ========================================================================== */

.observers-thumb {
    --thumb-accent: #F82F72;
    --thumb-accent-2: #7A123E;
    position: relative;
    display: block;
    overflow: hidden;
    min-height: 172px;
    aspect-ratio: 16 / 9;
    isolation: isolate;
    background:
        linear-gradient(135deg, var(--thumb-accent), var(--thumb-accent-2)),
        var(--color-primary-light);
}

.guide-card__thumb.observers-thumb {
    min-height: 184px;
}

.single__thumbnail--observers .observers-thumb {
    border-radius: var(--radius-lg);
    min-height: 260px;
}

.observers-thumb img {
    position: absolute;
    inset: 0;
    z-index: -3;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: saturate(1.08) contrast(1.02);
}

.observers-thumb::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -2;
    background: linear-gradient(135deg, var(--thumb-accent), var(--thumb-accent-2));
    opacity: 0.5;
}

.observers-thumb::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(180deg, rgba(122, 18, 62, 0.02), rgba(122, 18, 62, 0.82)),
        linear-gradient(135deg, rgba(122, 18, 62, 0.84), rgba(248, 47, 114, 0.44) 58%, rgba(24, 184, 196, 0.2));
}

.observers-thumb--urgent,
.observers-thumb--season {
    --thumb-accent: #F82F72;
    --thumb-accent-2: #FF7AAE;
}

.observers-thumb--blocked,
.observers-thumb--pipe,
.observers-thumb--guide {
    --thumb-accent: #7A123E;
    --thumb-accent-2: #18B8C4;
}

.observers-thumb--commercial,
.observers-thumb--sink,
.observers-thumb--cleaning,
.observers-thumb--maintenance {
    --thumb-accent: #F82F72;
    --thumb-accent-2: #18B8C4;
}

.observers-thumb--diagnosis,
.observers-thumb--leak {
    --thumb-accent: #063B4A;
    --thumb-accent-2: #F82F72;
}

.observers-thumb--cost,
.observers-thumb--legal,
.observers-thumb--septic {
    --thumb-accent: #B5165A;
    --thumb-accent-2: #063B4A;
}

.observers-thumb--construction,
.observers-thumb--industrial,
.observers-thumb--winter {
    --thumb-accent: #063B4A;
    --thumb-accent-2: #FF7AAE;
}

.observers-thumb--safety {
    --thumb-accent: #15803D;
    --thumb-accent-2: #F82F72;
}

.observers-thumb__label {
    position: absolute;
    top: 16px;
    left: 16px;
    padding: 5px 9px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.92);
    color: var(--color-primary-dark);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-bold);
}

.observers-thumb__title,
.observers-thumb__sub {
    position: absolute;
    right: 18px;
    left: 18px;
    color: #ffffff;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.28);
}

.observers-thumb__title {
    display: -webkit-box;
    overflow: hidden;
    bottom: 42px;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 1.2rem;
    line-height: 1.24;
    font-weight: var(--font-weight-extrabold);
    word-break: keep-all;
    overflow-wrap: anywhere;
}

.observers-thumb__sub {
    bottom: 20px;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    opacity: 0.9;
}

/* 실제 썸네일(1:1 manifest) 있는 카드: 16:9 컨테이너 유지하면서 contain으로 잘림 제거.
   좌·우 letterbox는 매니페스트 이미지 자체 배경(파스텔 핑크 #FFE4E9→#FFC0CB)과
   동일 그라데이션으로 칠해 이미지와 자연스럽게 이어지게 함. */
.observers-thumb--with-image {
    background: linear-gradient(135deg, #FFE4E9, #FFC0CB);
}
.observers-thumb--with-image img {
    z-index: 0;
    filter: none;
    object-fit: contain;
    object-position: 50% 50%;
}
.observers-thumb--with-image::before,
.observers-thumb--with-image::after {
    display: none;
    content: none;
}

/* 단일 글 상단 1:1 매니페스트 썸네일: 4:3 컨테이너로 좌·우 letterbox 최소화 */
.single__thumbnail--observers .observers-thumb--with-image {
    aspect-ratio: 4 / 3;
}
@media (max-width: 600px) {
    .single__thumbnail--observers .observers-thumb--with-image {
        aspect-ratio: 1 / 1;
        min-height: 0;
    }
}

/* 부모 테마 .card__image — 모든 아카이브(taxonomy/CPT/태그/검색 등)와
   관련글 카드에서 manifest 1:1 썸네일이 잘리지 않도록 contain + 핑크 letterbox. */
body.archive .card__image,
body.search .card__image,
.related-card img.card__image,
.related-posts img.card__image {
    object-fit: contain;
    object-position: 50% 50%;
    background: linear-gradient(135deg, #FFE4E9, #FFC0CB);
}

/* 관련 콘텐츠와 다음 섹션(CTA 등) 간격 확보 */
.related-posts {
    margin-bottom: var(--spacing-3xl);
}

@media (max-width: 768px) {
    .observers-thumb {
        min-height: 156px;
    }

    .guide-card__thumb.observers-thumb {
        min-height: 166px;
    }

    .single__thumbnail--observers .observers-thumb {
        min-height: 190px;
    }

    .observers-thumb::before {
        opacity: 0.44;
    }

    .observers-thumb__label {
        top: 12px;
        left: 12px;
        padding: 4px 8px;
    }

    .observers-thumb__title,
    .observers-thumb__sub {
        right: 14px;
        left: 14px;
    }

    .observers-thumb__title {
        bottom: 20px;
        font-size: 1.06rem;
    }

    .observers-thumb__sub {
        display: none;
    }
}

@media (max-width: 420px) {
    .observers-thumb__title {
        bottom: 20px;
    }

    .observers-thumb__sub {
        display: none;
    }
}