/* ==========================================================================
   관찰자들 - 반응형 보정
   ========================================================================== */

@media (max-width: 768px) {
    .single__header .section__title {
        max-width: 100%;
        font-size: 1.8rem;
        line-height: 1.28;
        white-space: normal;
        word-break: keep-all;
        overflow-wrap: anywhere;
    }

    .page-content,
    .category-content,
    .page-content p,
    .category-content p {
        max-width: 100% !important;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: anywhere !important;
    }

    .page-content p *,
    .category-content p * {
        max-width: 100% !important;
        white-space: normal !important;
        word-break: keep-all !important;
        overflow-wrap: anywhere !important;
    }

    .site-header__topbar,
    .site-nav,
    .header-cta {
        display: none;
    }

    .site-header__inner,
    .site-header__right {
        min-width: 0;
    }

    .site-header__right {
        flex: 0 0 auto;
        margin-left: auto;
        margin-right: 14px;
        padding-right: 0;
    }

    .site-header__toggle {
        flex: 0 0 44px;
    }

    .site-content {
        padding-bottom: calc(var(--cta-bar-height) + 24px + env(safe-area-inset-bottom));
    }

    .site-footer {
        padding-bottom: calc(var(--cta-bar-height) + 10px + env(safe-area-inset-bottom));
    }

    .cta-float {
        box-sizing: border-box;
        width: 100%;
        overflow: hidden;
        padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    }

    .cta-float__inner {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        width: 100%;
        max-width: 100%;
        gap: 8px;
    }

    .cta-float__btn {
        min-width: 0;
        width: 100%;
        min-height: 48px;
        padding: 0.62rem 0.5rem;
        border-radius: 8px;
        font-size: 0.92rem;
        line-height: 1.2;
        white-space: nowrap;
    }

    .cta-float__icon {
        width: 1.05rem;
        height: 1.05rem;
    }

    .site-header__logo-img {
        width: 160px;
        height: 40px;
    }

    .category-hub,
    .equipment-grid {
        grid-template-columns: 1fr;
    }

    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .grid > *,
    .card,
    .card__body {
        min-width: 0;
        max-width: 100%;
    }

    .hero--category {
        min-height: auto;
    }

    .hero--category .hero__content {
        width: 100%;
    }

    .hero--category .hero__desc,
    .category-card .card__text {
        line-height: 1.65;
    }

}

@media (min-width: 769px) and (max-width: 1280px) {
    .site-header__logo-img {
        width: 170px;
        height: 42px;
    }

    .site-header__inner {
        gap: 10px;
    }

    .site-nav__list a {
        padding-inline: 5px;
        font-size: 0.78rem;
    }

    .site-header__search {
        display: none;
    }

    .header-cta__phone {
        min-width: 112px;
        padding-inline: 12px;
    }

    .header-cta .btn--kakao {
        display: none;
    }
}

@media (min-width: 1025px) and (max-width: 1280px) {
    .site-nav {
        display: none;
    }

    .site-header__toggle {
        display: flex;
        flex: 0 0 44px;
    }

    .site-header__drawer {
        display: block !important;
    }

    .site-header__drawer-backdrop:not([hidden]) {
        display: block !important;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    .site-header__inner,
    .site-header__right {
        min-width: 0;
    }

    .site-header__right {
        flex: 0 0 auto;
        margin-left: auto;
        margin-right: 14px;
        padding-right: 0;
    }

    .site-nav,
    .site-header__search,
    .header-cta {
        display: none;
    }

    .site-header__toggle {
        display: flex;
        flex: 0 0 44px;
    }

    .site-header__drawer {
        display: block !important;
    }

    .site-header__drawer-backdrop:not([hidden]) {
        display: block !important;
    }

    .category-hub {
        grid-template-columns: repeat(2, 1fr);
    }

    .grid--2,
    .grid--3,
    .grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .grid > *,
    .card,
    .card__body {
        min-width: 0;
    }

    .observers-search-direct__grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .observers-internal-links__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .observers-contact__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .observers-benefits__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .equipment-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .urgency-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

}

/* --- 공통 가독성/안정성 보정 --- */
.observers-hero--banner,
.hero.observers-hero--banner {
    min-height: 0;
    display: block;
    align-items: stretch;
}

@media (max-width: 1024px) {
    .observers-search-results__grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* 작은 모바일(<= 480) — CTA 버튼 텍스트 줄임 방지 */
@media (max-width: 480px) {
    .cta-float__btn {
        font-size: 0.86rem;
        padding: 0.55rem 0.4rem;
    }

    .urgent-banner__text {
        font-size: 0.9rem;
    }

    .urgent-banner__phone {
        font-size: 1.3rem;
    }

    .observers-hero__banner-wrap {
        padding-right: 8px;
        padding-left: 8px;
    }

    .area-tags {
        gap: 6px;
    }

    .area-tag {
        font-size: var(--font-size-xs);
        padding: 4px 10px;
    }

    .observers-area-grid {
        grid-template-columns: 1fr;
        gap: var(--spacing-md);
    }

    .observers-area-card {
        padding: var(--spacing-md);
    }

    .observers-area-card__sido {
        font-size: var(--font-size-lg);
    }

    .observers-area-strip__heading {
        font-size: var(--font-size-xl);
    }

    .category-hub__group {
        padding-bottom: var(--spacing-lg);
    }

    .category-hub__title,
    .category-hub__desc,
    .category-hub__children,
    .category-hub__thumbs {
        padding-right: var(--spacing-lg);
        padding-left: var(--spacing-lg);
    }
}