/* ==========================================================================
   관찰자들 - 홈 업그레이드 레이어 (home-enhance)
   - 후순위 오버라이드. home.css/sections.css/theme.css 뒤에 로드.
   ========================================================================== */

/* --- 0. 공용 토큰 (자식 색상 위에서만 동작) --- */
.home,
body.home {
    --obs-grad-primary: linear-gradient(135deg, #F82F72 0%, #FF7AAE 60%, #FFB6CB 100%);
    --obs-grad-soft:    linear-gradient(180deg, #FFF7FA 0%, #FFFFFF 70%);
    --obs-shadow-card:  0 18px 38px -18px rgba(122, 18, 62, 0.28), 0 6px 14px rgba(122, 18, 62, 0.06);
    --obs-shadow-card-hv: 0 28px 56px -22px rgba(248, 47, 114, 0.42), 0 10px 22px rgba(122, 18, 62, 0.10);
    --obs-shadow-ring:  0 0 0 1px rgba(248, 47, 114, 0.10);
}

/* prefers-reduced-motion 일 때는 모든 추가 모션 OFF */
@media (prefers-reduced-motion: reduce) {
    .dd-reveal { opacity: 1 !important; transform: none !important; }
    .observers-hero__banner-link,
    .observers-area-card,
    .category-hub__group,
    .urgency-card,
    .equipment-card,
    .fixture-tile,
    .region-tile,
    .cardnews-card {
        transition: none !important;
    }
}

/* ==========================================================================
   1. 히어로 - 그라데이션 헤일로 + 부드러운 인터랙션
   ========================================================================== */
.observers-hero {
    position: relative;
    background:
        radial-gradient(60% 70% at 88% 18%, rgba(255, 255, 255, 0.78), transparent 65%),
        radial-gradient(45% 60% at 12% 86%, rgba(24, 184, 196, 0.10), transparent 60%),
        linear-gradient(135deg, #FFF7FA 0%, #FFE3EE 60%, #FFD1E2 100%);
}

.observers-hero::before,
.observers-hero::after {
    content: '';
    position: absolute;
    z-index: 0;
    pointer-events: none;
    border-radius: 50%;
    filter: blur(48px);
    opacity: 0.55;
    will-change: transform;
}

.observers-hero::before {
    top: -90px;
    left: -90px;
    width: 280px;
    height: 280px;
    background: radial-gradient(circle, rgba(248, 47, 114, 0.32), transparent 70%);
    animation: obs-float-a 14s ease-in-out infinite alternate;
}

.observers-hero::after {
    right: -120px;
    bottom: -110px;
    width: 360px;
    height: 360px;
    background: radial-gradient(circle, rgba(24, 184, 196, 0.22), transparent 70%);
    animation: obs-float-b 18s ease-in-out infinite alternate;
}

@keyframes obs-float-a {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(40px, 30px, 0); }
}

@keyframes obs-float-b {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(-50px, -25px, 0); }
}

.observers-hero__banner-wrap {
    position: relative;
    z-index: 1;
}

.observers-hero__banner-link {
    position: relative;
    border-radius: 16px;
    border: 1px solid rgba(248, 47, 114, 0.18);
    box-shadow:
        0 30px 64px -28px rgba(122, 18, 62, 0.36),
        0 10px 24px -10px rgba(248, 47, 114, 0.18);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}

.observers-hero__banner-link::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: linear-gradient(180deg, transparent 65%, rgba(122, 18, 62, 0.10) 100%);
    opacity: 0;
    transition: opacity 0.28s ease;
    pointer-events: none;
}

.observers-hero__banner-link:hover,
.observers-hero__banner-link:focus-visible {
    transform: translateY(-3px);
    box-shadow:
        0 38px 72px -28px rgba(248, 47, 114, 0.42),
        0 14px 30px -12px rgba(122, 18, 62, 0.22);
}

.observers-hero__banner-link:hover::after,
.observers-hero__banner-link:focus-visible::after {
    opacity: 1;
}

/* 히어로 상단 긴급 배너와 시각적 연결: 살짝 안쪽으로 당김 */
.urgent-banner + .observers-hero--banner {
    padding-top: clamp(14px, 2.4vw, 28px);
}

/* ==========================================================================
   2. 긴급 배너 - 셰이드 + 미세 모션
   ========================================================================== */
.urgent-banner {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(60% 120% at 80% 50%, rgba(24, 184, 196, 0.30), transparent 45%),
        linear-gradient(90deg, #5C0F30, #7A123E 30%, #F82F72 70%, #FF7AAE);
    box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.12);
}

.urgent-banner::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(120deg, transparent 40%, rgba(255, 255, 255, 0.18) 50%, transparent 60%);
    transform: translateX(-100%);
    animation: obs-shimmer 6s ease-in-out infinite;
    pointer-events: none;
}

@keyframes obs-shimmer {
    0%   { transform: translateX(-100%); }
    55%  { transform: translateX(100%); }
    100% { transform: translateX(100%); }
}

.urgent-banner > * { position: relative; z-index: 1; }

/* ==========================================================================
   3. 섹션 헤더 - eyebrow + 제목 언더라인 그라데이션
   ========================================================================== */
.section__header { position: relative; }

.section__subtitle {
    position: relative;
    padding-bottom: 6px;
}

.section__subtitle::after {
    content: '';
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 28px;
    height: 2px;
    border-radius: 2px;
    background: var(--obs-grad-primary);
    transform: translateX(-50%);
}

.section__header .section__title {
    position: relative;
    display: inline-block;
}

.section__header .section__title::after {
    content: '';
    display: block;
    width: 56px;
    height: 4px;
    margin: 14px auto 0;
    border-radius: 4px;
    background: var(--obs-grad-primary);
    opacity: 0.85;
}

.section__desc {
    color: var(--color-text-light, #64748b);
}

/* area-strip 섹션 헤더는 자체 디자인이라 일반 룰에서 제외 */
.observers-area-strip__heading::after { content: none; }

/* ==========================================================================
   4. 서비스 가능 지역 카드 - 깊이감, hover 상호작용
   ========================================================================== */
.observers-area-strip {
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(40% 50% at 0% 0%, rgba(248, 47, 114, 0.07), transparent 60%),
        radial-gradient(40% 50% at 100% 100%, rgba(24, 184, 196, 0.07), transparent 60%),
        linear-gradient(180deg, #fff6f9 0%, #ffffff 70%);
}

.observers-area-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: var(--obs-shadow-card);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.2s ease;
}

.observers-area-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 3px;
    width: 100%;
    background: var(--obs-grad-primary);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.observers-area-card:hover,
.observers-area-card:focus-within {
    transform: translateY(-4px);
    box-shadow: var(--obs-shadow-card-hv);
    border-color: rgba(248, 47, 114, 0.32);
}

.observers-area-card:hover::before,
.observers-area-card:focus-within::before {
    transform: scaleX(1);
}

.observers-area-card__head {
    transition: color 0.2s ease;
}

.observers-area-card__cta {
    transition: transform 0.2s ease;
}

.observers-area-card:hover .observers-area-card__cta {
    transform: translateX(2px);
}

.observers-area-chip {
    transition: background-color 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}

.observers-area-chip:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 14px -6px rgba(248, 47, 114, 0.5);
}

/* '전체 보기' 버튼 */
.observers-area-strip__all {
    background: linear-gradient(180deg, #ffffff 0%, #fff5f8 100%);
    box-shadow: 0 6px 16px -8px rgba(122, 18, 62, 0.18);
}

.observers-area-strip__all:hover {
    background: var(--obs-grad-primary);
    color: #fff;
    border-color: transparent;
    box-shadow: 0 12px 26px -10px rgba(248, 47, 114, 0.55);
}

/* ==========================================================================
   5. 카테고리 허브 카드 업그레이드
   ========================================================================== */
.category-hub {
    gap: clamp(20px, 2.4vw, 32px);
}

.category-hub__group {
    position: relative;
    overflow: hidden;
    border-radius: 18px;
    box-shadow: var(--obs-shadow-card);
    transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.32s cubic-bezier(0.22, 1, 0.36, 1),
                border-color 0.24s ease;
}

.category-hub__group:hover {
    transform: translateY(-5px);
    border-color: rgba(248, 47, 114, 0.28);
    box-shadow: var(--obs-shadow-card-hv);
}

.category-hub__banner {
    position: relative;
}

.category-hub__banner::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 55%, rgba(122, 18, 62, 0.22) 100%);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.category-hub__group:hover .category-hub__banner::after {
    opacity: 1;
}

.category-hub__group:hover .category-hub__banner img {
    transform: scale(1.06);
}

.category-hub__title a {
    position: relative;
    background-image: linear-gradient(var(--color-primary), var(--color-primary));
    background-position: 0 100%;
    background-repeat: no-repeat;
    background-size: 0% 2px;
    transition: background-size 0.3s ease, color 0.2s ease;
}

.category-hub__group:hover .category-hub__title a,
.category-hub__title a:hover,
.category-hub__title a:focus-visible {
    background-size: 100% 2px;
    color: var(--color-primary-dark);
}

.category-hub__link {
    transition: background-color 0.2s ease, color 0.2s ease,
                transform 0.18s ease, box-shadow 0.18s ease;
}

.category-hub__link:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 12px -6px rgba(248, 47, 114, 0.45);
}

/* ==========================================================================
   6. 긴급도 카드 - 상단 컬러바 + 깊이감
   ========================================================================== */
.urgency-card {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    background: linear-gradient(180deg, #ffffff 0%, #fff9fc 100%);
    box-shadow: var(--obs-shadow-card);
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.urgency-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--obs-shadow-card-hv);
}

.urgency-card__icon svg {
    transition: transform 0.3s ease;
}

.urgency-card:hover .urgency-card__icon svg {
    transform: scale(1.08) rotate(-4deg);
}

.urgency-card__tag {
    transition: transform 0.18s ease;
}

.urgency-card:hover .urgency-card__tag {
    transform: translateY(-1px);
}

/* ==========================================================================
   7. 장비 카드 - 미디어 줌인
   ========================================================================== */
.equipment-card {
    border-radius: 16px;
    box-shadow: var(--obs-shadow-card);
}

.equipment-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--obs-shadow-card-hv);
    border-color: rgba(248, 47, 114, 0.28);
}

.equipment-card__image img {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.equipment-card:hover .equipment-card__image img {
    transform: scale(1.05);
}

/* ==========================================================================
   8. fixture / region / cardnews 타일 통합 마감
   ========================================================================== */
.fixture-tile,
.region-tile,
.cardnews-card {
    border-radius: 16px;
}

.fixture-tile,
.region-tile {
    box-shadow: var(--obs-shadow-card);
}

.fixture-tile:hover,
.region-tile:hover {
    box-shadow: var(--obs-shadow-card-hv);
}

.cardnews-card {
    transition: transform 0.28s cubic-bezier(0.22, 1, 0.36, 1),
                box-shadow 0.28s cubic-bezier(0.22, 1, 0.36, 1);
}

.cardnews-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--obs-shadow-card-hv);
}

.cardnews-card__media img {
    transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.cardnews-card:hover .cardnews-card__media img {
    transform: scale(1.04);
}

/* ==========================================================================
   9. 검색 입력 - 포커스 강조
   ========================================================================== */
.observers-home-search__form input[type="search"] {
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.observers-home-search__form input[type="search"]:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(248, 47, 114, 0.15);
}

.observers-home-search__terms a {
    transition: background-color 0.18s ease, border-color 0.18s ease,
                color 0.18s ease, transform 0.18s ease;
}

.observers-home-search__terms a:hover {
    background: #FFF0F6;
    border-color: rgba(248, 47, 114, 0.45);
    transform: translateY(-1px);
}

/* ==========================================================================
   10. 섹션 간 시각적 리듬 - section--alt 부드러운 도트 패턴
   ========================================================================== */
.section--alt {
    position: relative;
    background:
        radial-gradient(rgba(248, 47, 114, 0.05) 1px, transparent 1px) 0 0 / 22px 22px,
        var(--color-bg-alt, #FFF7FA);
}

/* ==========================================================================
   11. 스크롤 리빌 모션 (home-enhance.js와 페어)
   ========================================================================== */
.dd-reveal {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.dd-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

/* 스태거: 자식 인덱스 기반 지연 */
.dd-reveal-stagger > * {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.dd-reveal-stagger.is-visible > *:nth-child(1) { transition-delay: 0.00s; }
.dd-reveal-stagger.is-visible > *:nth-child(2) { transition-delay: 0.06s; }
.dd-reveal-stagger.is-visible > *:nth-child(3) { transition-delay: 0.12s; }
.dd-reveal-stagger.is-visible > *:nth-child(4) { transition-delay: 0.18s; }
.dd-reveal-stagger.is-visible > *:nth-child(5) { transition-delay: 0.24s; }
.dd-reveal-stagger.is-visible > *:nth-child(6) { transition-delay: 0.30s; }
.dd-reveal-stagger.is-visible > *:nth-child(7) { transition-delay: 0.34s; }
.dd-reveal-stagger.is-visible > *:nth-child(8) { transition-delay: 0.38s; }
.dd-reveal-stagger.is-visible > *:nth-child(n+9) { transition-delay: 0.42s; }

.dd-reveal-stagger.is-visible > * {
    opacity: 1;
    transform: translateY(0);
}

/* ==========================================================================
   12. 모바일 다듬기
   ========================================================================== */
@media (max-width: 768px) {
    .observers-hero::before { width: 180px; height: 180px; top: -60px; left: -60px; }
    .observers-hero::after  { width: 220px; height: 220px; right: -90px; bottom: -80px; }

    .observers-hero__banner-link { border-radius: 12px; }

    .section__header .section__title::after { width: 44px; height: 3px; margin-top: 10px; }

    .observers-area-card { border-radius: 14px; }
    .observers-area-chip { padding: 6px 12px; min-height: 32px; }

    .category-hub__group { border-radius: 14px; }
    .urgency-card        { border-radius: 14px; }
    .equipment-card      { border-radius: 14px; }

    /* 첫 화면 호흡 더 짧게 */
    .urgent-banner__phone { letter-spacing: 0; }
}

@media (max-width: 480px) {
    .observers-area-strip__heading { font-size: 1.25rem; }
    .observers-area-card__sido     { font-size: 1.1rem; }
}