/* _content/AptSonpoom/Components/Layout/MainLayout.razor.rz.scp.css */
/* ============================================================================
   MainLayout — PC 기준선.
   site-main 은 sticky header 아래 + footer 위 콘텐츠 영역.
   페이지별 .container 유틸은 페이지가 직접 사용 (예: RealPriceDaily 안의 .page-container).
   ========================================================================== */

.site-main[b-qh86josmka] {
    min-height: calc(100vh - var(--header-h) - 200px);
    padding-block: 32px 64px;
}

#blazor-error-ui[b-qh86josmka] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-qh86josmka] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* _content/AptSonpoom/Components/Layout/SiteFooter.razor.rz.scp.css */
/* ============================================================================
   SiteFooter — PC 기준선.
   ========================================================================== */

.site-footer[b-e3s00dab2s] {
    /* 2026-05-26 chrome 톤업 — surface-alt → bg-warm (Home promises 섹션과 일치).
       2026-05-26 (2회차): 사용자 요청으로 padding/margin/line-height 한 단계 더 컴팩트화. */
    background: var(--color-bg-warm);
    border-top: 1px solid var(--color-border);
    padding: 14px 0 18px;
    margin-top: 24px;
}

.site-footer__inner[b-e3s00dab2s] {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
}

.site-footer__disclaimer[b-e3s00dab2s] {
    margin-bottom: 10px;
}

.site-footer__disclaimer-line[b-e3s00dab2s] {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    line-height: 1.55;
    margin: 0 0 2px 0;
}

    .site-footer__disclaimer-line:first-child[b-e3s00dab2s] {
        color: var(--color-text);
        font-weight: 600;
        margin-bottom: 6px;
    }

.site-footer__source[b-e3s00dab2s] {
    color: var(--color-text-muted);
    font-size: 0.8rem;
    line-height: 1.5;
    padding-top: 8px;
    /* 출처 라인 위 hairline — bg-warm 위에서 약간 어둡게 보이도록 보강 */
    border-top: 1px solid var(--color-border);
    margin: 0;
}

    /* 데이터 출처 / 가공 라벨 강조 — 양쪽 색 분리 (accent / accent-2) 로 시각 hint */
    .site-footer__source strong[b-e3s00dab2s] {
        color: var(--color-text);
        font-weight: 600;
    }

    /* 2026-05-26 Home 데이터 출처 섹션 통합 — footer 1줄 노출 룰. */
    .site-footer__source-label[b-e3s00dab2s] {
        color: var(--color-text);
        font-weight: 600;
        margin-right: 4px;
    }

        .site-footer__source-label[b-e3s00dab2s]::after {
            content: ":";
        }

    .site-footer__source-sep[b-e3s00dab2s] {
        margin: 0 2px;
        color: var(--color-border);
    }

    .site-footer__source-meta[b-e3s00dab2s] {
        /* PC 에서는 같은 줄 inline. 모바일에서 너무 길어지면 wrap. */
        white-space: nowrap;
    }

/* 정책·정보 페이지 링크 줄 (소개·이용약관·개인정보처리방침·문의) — 애드센스 필수 내비. */
.site-footer__links[b-e3s00dab2s] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 14px;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
}

    .site-footer__links a[b-e3s00dab2s] {
        color: var(--color-text-muted);
        font-size: 0.8rem;
        text-decoration: none;
    }

        .site-footer__links a:hover[b-e3s00dab2s] {
            color: var(--color-accent);
            text-decoration: underline;
        }

    .site-footer__links a.site-footer__links-strong[b-e3s00dab2s] {
        color: var(--color-text);
        font-weight: 600;
    }

.site-footer__copy[b-e3s00dab2s] {
    display: flex;
    align-items: center;
    gap: 8px;
    color: var(--color-text-muted);
    font-size: 0.75rem;
    line-height: 1.5;
    margin-top: 6px;
}

    /* 푸터 마크 — 카피라이트 줄 앞 작은 시그니처 (브랜드 정체성). */
    .site-footer__copy .brand-mark[b-e3s00dab2s] {
        flex-shrink: 0;
    }

/* ============================================================================
   모바일 케이스 — content-mobile-dev 추가
   - breakpoint 43.75em (≈ 700px). 면책 4~5문장은 그대로 유지, 폰트만 축소.
   - 2026-05-26 chrome 톤업 보강: 배경 bg-warm 전환 자체는 PC·모바일 공통.
     모바일 padding/font 룰은 종전 그대로 유효 — 추가 보강 0건 (확인만).
   - source strong (PC 강조 룰) 은 현재 razor 마크업에 <strong> 없음 → 모바일 영향 0.
   ========================================================================== */

@media (max-width: 43.75em) {

    .site-footer[b-e3s00dab2s] {
        padding: 12px 0 14px;
        margin-top: 18px;
    }

    .site-footer__inner[b-e3s00dab2s] {
        padding-inline: 16px;
    }

    .site-footer__disclaimer-line[b-e3s00dab2s] {
        font-size: 0.78rem;
        line-height: 1.5;
    }

    .site-footer__source[b-e3s00dab2s] {
        font-size: 0.76rem;
        line-height: 1.5;
        padding-top: 6px;
    }

    .site-footer__copy[b-e3s00dab2s] {
        font-size: 0.72rem;
        line-height: 1.45;
        margin-top: 4px;
    }
}
/* _content/AptSonpoom/Components/Layout/SiteHeader.razor.rz.scp.css */
/* ============================================================================
   SiteHeader — PC 기준선 (1280~1920)
   모바일 케이스는 content-mobile-dev 가 @media (max-width: 700px) 등으로 추가.
   ========================================================================== */

/* 2026-06-03 실거래 핸드오프 — nav 룩 이식. 반투명 흰 배경 + backdrop blur (콘텐츠 비침). */
.site-header[b-hhjhm981z6] {
    position: sticky;
    top: 0;
    z-index: 50;
    height: var(--header-h);
    background: rgba(255, 255, 255, 0.82);
    backdrop-filter: saturate(1.4) blur(14px);
    -webkit-backdrop-filter: saturate(1.4) blur(14px);
    border-bottom: 1px solid var(--color-border);
    transition: box-shadow 0.2s ease;
}

/* header-scroll.js 가 scroll 시 토글 */
.site-header.is-scrolled[b-hhjhm981z6] {
    box-shadow: var(--shadow-sm);
}

.site-header__inner[b-hhjhm981z6] {
    max-width: var(--container);
    height: 100%;
    margin-inline: auto;
    padding-inline: 24px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    column-gap: 32px;
}

/* === 좌측 로고 — 시그니처 마크 + 워드마크 락업 (핸드오프 가로 락업 값 그대로, 2026-06-09) ===
   구성: 마크(왼쪽) + [영문 APTSONPOOM 위 / 한글 아파트손품 아래] 2단 워드마크.
   색·트래킹·weight 는 핸드오프 명세 직접값 — 로고 한정 (글로벌 토큰 변경 0). */

.site-logo[b-hhjhm981z6] {
    display: inline-flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    color: var(--color-text);
    text-decoration: none;
    transition: color 0.15s ease;
    padding: 4px 0;
}

/* 마크 — 워드마크와 시각 중심 정렬 (살짝 위로). */
.site-logo .brand-mark[b-hhjhm981z6] {
    flex-shrink: 0;
    display: block;
}

.site-logo__wordmark[b-hhjhm981z6] {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
}

/* 핸드오프 영문 — 800/.22em 블루(#3f5fd6), 대문자. */
.site-logo__eyebrow[b-hhjhm981z6] {
    font-size: 10px;
    letter-spacing: 0.22em;
    color: #3f5fd6;
    text-transform: uppercase;
    font-weight: 800;
    line-height: 1;
}

/* 핸드오프 한글 — 800/-.035em 잉크(#2a2e38). */
.site-logo__main[b-hhjhm981z6] {
    font-size: 19px;
    font-weight: 800;
    letter-spacing: -0.035em;
    color: #2a2e38;
    line-height: 1.2;
    white-space: nowrap;
}

/* hover — 한글만 accent (마크·영문은 정체성 색 유지). */
.site-logo:hover .site-logo__main[b-hhjhm981z6] {
    color: var(--color-accent);
}

/* === 중앙 메뉴 === */

.site-nav[b-hhjhm981z6] {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-self: center;
}

/* 핸드오프 nav 링크 — pill 패딩 + radius, hover accent-soft, active 하단 밑줄 2.5px */
.site-nav__item[b-hhjhm981z6] {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: color 0.15s ease, background 0.15s ease;
}

    .site-nav__item:hover[b-hhjhm981z6] {
        background: var(--color-accent-soft);
        color: var(--color-accent-hover);
    }

    .site-nav__item.is-active[b-hhjhm981z6] {
        color: var(--color-accent);
        font-weight: 700;
    }

        .site-nav__item.is-active[b-hhjhm981z6]::after {
            content: "";
            position: absolute;
            left: 14px;
            right: 14px;
            bottom: -1px;
            height: 2.5px;
            border-radius: 2px;
            background: var(--color-accent);
        }

/* === 우측 (검색 + 햄버거) === */

.site-header__right[b-hhjhm981z6] {
    display: flex;
    align-items: center;
    gap: 12px;
    justify-self: end;
}

/* === 검색 박스 (M4 활성화) — PC 노출, 모바일은 mobile-dev 가 숨김 === */
.site-search[b-hhjhm981z6] {
    position: relative;
    display: inline-flex;
    align-items: center;
}

/* 핸드오프 검색 — 높이 42px, radius 12px, hover 시 accent border + shadow */
.site-search__inner[b-hhjhm981z6] {
    position: relative;
    display: inline-flex;
    align-items: center;
    width: 280px;
    height: 42px;
    padding: 0 12px 0 14px;
    gap: 5px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .site-search__inner:hover[b-hhjhm981z6] {
        border-color: color-mix(in oklch, var(--color-accent), transparent 55%);
        box-shadow: var(--shadow-card);
    }

    .site-search__inner:focus-within[b-hhjhm981z6] {
        border-color: var(--color-accent);
        box-shadow: 0 0 0 2px var(--color-accent-soft);
    }

/* handoff 이식 (2026-06-03) — 돋보기 accent 톤 라인 아이콘 (MudIcon 폐기). */
.site-search__icon[b-hhjhm981z6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent);
    margin-right: 4px;
    flex-shrink: 0;
}

/* 검색어 지우기(×) 버튼 — q 있을 때만 렌더 (razor 가드). */
.site-search__clear[b-hhjhm981z6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 2px;
    margin-left: 2px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background 120ms ease-out, color 120ms ease-out;
}
.site-search__clear:hover[b-hhjhm981z6] {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

.site-search__input[b-hhjhm981z6] {
    flex: 1;
    min-width: 0;
    height: 100%;
    padding: 0 4px;
    border: none;
    outline: none;
    background: transparent;
    color: var(--color-text);
    font-size: 0.9rem;
    font-family: inherit;
    line-height: 1.4;
}

    .site-search__input[b-hhjhm981z6]::placeholder {
        color: var(--color-text-muted);
        opacity: 1;
    }

    /* Edge / Chrome 검색 input 의 기본 clear 버튼 숨김 */
    .site-search__input[b-hhjhm981z6]::-webkit-search-cancel-button,
    .site-search__input[b-hhjhm981z6]::-webkit-search-decoration {
        -webkit-appearance: none;
        appearance: none;
    }

/* === Dropdown (raw HTML <ul role="listbox">) === */

.search-dropdown[b-hhjhm981z6] {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    right: 0;
    width: 100%;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    z-index: 60; /* 헤더 sticky (50) 보다 위, 모달 (200) 보다 낮음 */
    max-height: 400px;
    overflow-y: auto;
}

.search-dropdown__group-header[b-hhjhm981z6] {
    padding: 8px 16px 4px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.search-dropdown__group-separator[b-hhjhm981z6] {
    height: 0;
    margin: 4px 16px;
    border-top: 1px solid var(--color-border);
}

.search-dropdown__option[b-hhjhm981z6] {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-areas:
        "label arrow"
        "meta arrow";
    column-gap: 12px;
    row-gap: 2px;
    padding: 10px 16px;
    color: var(--color-text);
    font-size: 0.95rem;
    cursor: pointer;
    transition: background 0.15s ease;
    line-height: 1.4;
}

    .search-dropdown__option:hover[b-hhjhm981z6],
    .search-dropdown__option.is-active[b-hhjhm981z6] {
        background: var(--color-accent-soft);
    }

    .search-dropdown__option:focus-visible[b-hhjhm981z6] {
        outline: 2px solid var(--color-accent);
        outline-offset: -2px;
    }

.search-dropdown__option-label[b-hhjhm981z6] {
    grid-area: label;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 500;
}

/* 법정동 — 단지명 앞 옅은 칩 프리픽스 (어느 동인지 한눈에). */
.search-dropdown__option-dong[b-hhjhm981z6] {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    vertical-align: middle;
}

.search-dropdown__option-name[b-hhjhm981z6] {
    vertical-align: middle;
}

.search-dropdown__option-meta[b-hhjhm981z6] {
    grid-area: meta;
    font-size: 0.82rem;
    color: var(--color-text-muted);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-dropdown__option-arrow[b-hhjhm981z6] {
    grid-area: arrow;
    align-self: center;
    display: inline-flex;
    align-items: center;
    color: var(--color-text-muted);
    transition: color 0.15s ease, transform 0.15s ease;
}

.search-dropdown__option:hover .search-dropdown__option-arrow[b-hhjhm981z6],
.search-dropdown__option.is-active .search-dropdown__option-arrow[b-hhjhm981z6] {
    color: var(--color-accent);
    transform: translateX(2px);
}

/* 결과가 limit 으로 잘렸을 때 — "총 N곳 중 M곳 표시" 안내. 클릭 대상 아님 (presentation). */
.search-dropdown__more[b-hhjhm981z6] {
    padding: 8px 16px 4px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    border-top: 1px solid var(--color-border);
    margin-top: 4px;
}

.search-dropdown__empty[b-hhjhm981z6] {
    padding: 16px 24px;
    text-align: center;
}

.search-dropdown__empty-title[b-hhjhm981z6] {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 6px 0;
}

.search-dropdown__empty-body[b-hhjhm981z6] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.6;
}

/* === 햄버거 (PC: 숨김. mobile-dev 가 @media 에서 display: inline-flex) === */

.site-header__hamburger[b-hhjhm981z6] {
    display: none; /* PC 기본 숨김 */
    width: 44px;
    height: 44px;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    color: var(--color-text);
}

    .site-header__hamburger:hover[b-hhjhm981z6] {
        background: var(--color-surface-alt);
    }

.site-header__hamburger-icon[b-hhjhm981z6],
.site-header__hamburger-icon[b-hhjhm981z6]::before,
.site-header__hamburger-icon[b-hhjhm981z6]::after {
    display: block;
    width: 20px;
    height: 2px;
    background: currentColor;
    position: relative;
    transition: transform 0.2s ease;
}

.site-header__hamburger-icon[b-hhjhm981z6]::before,
.site-header__hamburger-icon[b-hhjhm981z6]::after {
    content: "";
    position: absolute;
    left: 0;
}

.site-header__hamburger-icon[b-hhjhm981z6]::before {
    top: -6px;
}

.site-header__hamburger-icon[b-hhjhm981z6]::after {
    top: 6px;
}

/* === 모바일 드로어 (PC 에선 햄버거가 숨겨져 있어 진입 X. mobile-dev 가 활성화) === */

[b-hhjhm981z6] .site-mobile-drawer {
    background: var(--color-surface);
}

.site-mobile-drawer__inner[b-hhjhm981z6] {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.site-mobile-drawer__header[b-hhjhm981z6] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid var(--color-border);
}

.site-mobile-drawer__close[b-hhjhm981z6] {
    width: 44px;
    height: 44px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
    font-size: 1.4rem;
    line-height: 1;
    color: var(--color-text);
}

.site-mobile-drawer__nav[b-hhjhm981z6] {
    display: flex;
    flex-direction: column;
    padding: 20px;
    gap: 4px;
}

.site-mobile-drawer__item[b-hhjhm981z6] {
    padding: 14px 16px;
    font-size: 1rem;
    color: var(--color-text);
    text-decoration: none;
    border-radius: var(--radius-md);
    transition: background 0.15s ease, color 0.15s ease;
}

    .site-mobile-drawer__item:hover[b-hhjhm981z6] {
        background: var(--color-surface-alt);
    }

    .site-mobile-drawer__item.is-active[b-hhjhm981z6] {
        color: var(--color-accent);
        background: var(--color-accent-soft);
    }

.site-logo--in-drawer[b-hhjhm981z6] {
    pointer-events: none; /* 드로어 안 로고는 표시 전용 */
}

/* === 포커스 === */

.site-logo:focus-visible[b-hhjhm981z6],
.site-nav__item:focus-visible[b-hhjhm981z6],
.site-header__hamburger:focus-visible[b-hhjhm981z6],
.site-mobile-drawer__close:focus-visible[b-hhjhm981z6],
.site-mobile-drawer__item:focus-visible[b-hhjhm981z6] {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

/* ============================================================================
   모바일 케이스 — content-mobile-dev 추가
   - PC 케이스 미디어 쿼리 밖 룰은 손대지 X. 좁은 viewport 에서만 오버라이드.
   - breakpoint 43.75em ≈ 700px (사용자 zoom 반영을 위한 em 단위 — 정본 §25).
   ========================================================================== */

@media (max-width: 43.75em) {

    /* 헤더 높이 모바일 축소 — 토큰 자체는 변경 X, scoped 룰에서만 오버라이드 */
    .site-header[b-hhjhm981z6] {
        height: 56px;
    }

    /* 좌·우 두 영역만 (로고 / 우측 햄버거). 중앙 메뉴는 hidden (드로어 안으로 이동) */
    .site-header__inner[b-hhjhm981z6] {
        grid-template-columns: 1fr auto;
        column-gap: 12px;
        padding-inline: 16px;
    }

    /* 중앙 메뉴 — 모바일 hidden, 드로어 안에서 노출 */
    .site-nav[b-hhjhm981z6] {
        display: none;
    }

    /* 모바일 — 마크 + 한글만 (영문 eyebrow 숨김). 마크 살짝 축소(56px 헤더). */
    .site-logo[b-hhjhm981z6] {
        gap: 8px;
        padding: 0;
    }

    .site-logo .brand-mark[b-hhjhm981z6] {
        width: 30px;
        height: 30px;
    }

    .site-logo__eyebrow[b-hhjhm981z6] {
        display: none;
    }

    .site-logo__main[b-hhjhm981z6] {
        font-size: 1.1rem;
    }

    /* 우측 영역 — gap 축소 */
    .site-header__right[b-hhjhm981z6] {
        gap: 8px;
    }

    /* 검색 박스 — 모바일 헤더 폭 잠식 차단 (정본 §5-5 — 햄버거 자리) */
    .site-search[b-hhjhm981z6] {
        display: none;
    }

    /* 햄버거 노출 (44×44px 터치 타겟 — PC 룰에서 이미 보장) */
    .site-header__hamburger[b-hhjhm981z6] {
        display: inline-flex;
    }
}
/* _content/AptSonpoom/Components/Pages/Admin/BackfillConfirmDialog.razor.rz.scp.css */
/* ============================================================================
   BackfillConfirmDialog — scoped CSS.
   기존 인라인 <style> 블록을 razor 안에서 분리 (Blazor scoped CSS 자동 격리).

   디자인 시스템 토큰만 사용 (CLAUDE.md §"디자인 시스템").
   ========================================================================== */

.bf-confirm[b-0dnp3xgwd4] {
    line-height: 1.6;
}

.bf-confirm__list[b-0dnp3xgwd4] {
    margin: 12px 0;
    padding-left: 20px;
}

.bf-confirm__list li[b-0dnp3xgwd4] {
    margin: 4px 0;
}

.bf-confirm__note[b-0dnp3xgwd4] {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    margin-top: 12px;
}
/* _content/AptSonpoom/Components/Pages/Admin/Data.razor.rz.scp.css */
/* ============================================================================
   어드민 데이터 콘솔 (/admin/data) — scoped CSS
   정본: .claude/docs/content/admin-data-console.md §"UI / 디자인 가이드"

   CLAUDE.md 디자인 시스템 + MudBlazor 톤 오버라이드 룰 준수:
   - 우리 토큰만 사용 (--color-bg / --color-surface / --color-border / --color-accent / --radius-md ...)
   - 새 토큰 정의 X. heatmap 5단 색은 토큰 + opacity 변형으로 표현 (hsl/opacity).
   - hairline 보더 (1px solid var(--color-border)). MudBlazor Material 그림자 X.
   - tabular-nums 일관.
   - 한국 컨벤션 신호색 (--color-up=빨강 / --color-down=파랑) 그대로. heatmap 은 accent 단일축.
   ========================================================================== */

/* ----- 전체 컨테이너 ----- */
.admin-data[b-7koq44z2rt] {
    max-width: var(--container);
    margin: 0 auto;
    padding: 32px 24px 80px;
    font-family: inherit;
}

.admin-data__head[b-7koq44z2rt] {
    margin-bottom: 16px;
}

.admin-data__title[b-7koq44z2rt] {
    font-size: clamp(1.6rem, 3vw, 2rem);
    margin: 0 0 8px;
    color: var(--color-text);
}

.admin-data__meta[b-7koq44z2rt] {
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

.admin-data__meta-status[b-7koq44z2rt] {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 0.8rem;
}

.admin-data__meta-status--ok[b-7koq44z2rt] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
}

.admin-data__meta-status--fail[b-7koq44z2rt] {
    background: #fdecea;
    color: var(--color-up);
}

/* ----- MudTabs 톤 오버라이드 ----- */
[b-7koq44z2rt] .admin-tabs {
    margin-top: 12px;
}

[b-7koq44z2rt] .admin-tabs .mud-tabs-tabbar {
    background: transparent;
    border-bottom: 1px solid var(--color-border);
    box-shadow: none;
    min-height: 36px;
}

[b-7koq44z2rt] .admin-tabs .mud-tab {
    color: var(--color-text-muted);
    text-transform: none;
    font-weight: 500;
    /* 탭 크기 축소 — 폰트·높이·좌우 패딩·아이콘 모두 작게 (2026-06-09 사용자 요청) */
    font-size: 0.78rem;
    min-height: 34px;
    min-width: 0;
    padding: 0 6px;
    gap: 3px;
}

[b-7koq44z2rt] .admin-tabs .mud-tab .mud-icon-root {
    font-size: 0.95rem;
    margin-right: 2px;
}

[b-7koq44z2rt] .admin-tabs .mud-tab.mud-tab-active {
    color: var(--color-accent);
    font-weight: 600;
}

[b-7koq44z2rt] .admin-tabs .mud-tab-slider {
    background: var(--color-accent);
}

/* ----- 섹션 ----- */
.admin-section[b-7koq44z2rt] {
    padding: 48px 0;
    border-bottom: 1px solid var(--color-border);
    scroll-margin-top: var(--header-h);
}

.admin-section:last-of-type[b-7koq44z2rt] {
    border-bottom: 0;
}

.admin-section__head[b-7koq44z2rt] {
    margin-bottom: 24px;
}

.admin-section__title[b-7koq44z2rt] {
    font-size: 1.3rem;
    margin: 4px 0 8px;
}

.admin-section__lead[b-7koq44z2rt] {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    max-width: 720px;
}

.section__eyebrow[b-7koq44z2rt] {
    display: block;
    font-size: 0.75rem;
    color: var(--color-accent);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 4px;
}

/* ----- 카드 그리드 — 섹션 ① -----
   PC 기본 3열 × 2행. 6열로 펼치면 카드당 가로 폭이 좁아져 거래일 범위·단지 카드 텍스트가 줄바꿈 깨짐.
   3열로 묶어 카드 가로 두 배 확보 + 카드 세로 padding 축소로 전체 높이 절감. */
.metric-grid[b-7koq44z2rt] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

@media (max-width: 900px) {
    .metric-grid[b-7koq44z2rt] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 700px) {
    .metric-grid[b-7koq44z2rt] {
        grid-template-columns: repeat(2, 1fr);
    }
}

.metric-card[b-7koq44z2rt] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    /* 세로 padding 14px 로 축소 — 가로로 긴 비례 확보 */
    padding: 14px 20px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.metric-card__label[b-7koq44z2rt] {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
    /* 라벨도 한 줄 강제 — "단지 인덱스 (apt_index)" 같은 긴 라벨 wrap 방지 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.metric-card__value[b-7koq44z2rt] {
    /* PC 폭 넓어진 만큼 폰트 살짝 키움 (clamp 상한 2 → 1.8rem 로 미세 축소해 한 줄 보장).
       단지 마스터의 "10,593 / 22,170 단지" 같은 14자 텍스트도 nowrap 안에서 1줄. */
    font-size: clamp(1.3rem, 1.9vw, 1.75rem);
    font-weight: 700;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    line-height: 1.2;
    /* 큰 수치 줄바꿈 방지 + 단위 단어 ("단지", "~") 가 다음 줄로 떨어지지 않게 */
    white-space: nowrap;
    word-break: keep-all;
}

.metric-card__value--sm[b-7koq44z2rt] {
    font-size: clamp(0.95rem, 1.2vw, 1.1rem);
}

.metric-card__meta[b-7koq44z2rt] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.metric-card__progress[b-7koq44z2rt] {
    margin: 4px 0;
}

.metric-card--mini[b-7koq44z2rt] {
    padding: 16px;
}

.metric-card--mini .metric-card__value[b-7koq44z2rt] {
    font-size: clamp(1.2rem, 1.8vw, 1.4rem);
}

/* ----- 오늘 요약 카드 4개 — 섹션 ④ ----- */
.today-summary[b-7koq44z2rt] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 24px;
}

@media (max-width: 700px) {
    .today-summary[b-7koq44z2rt] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ----- heatmap ----- */
.heatmap-section[b-7koq44z2rt] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
}

.heatmap-header[b-7koq44z2rt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 12px;
}

.heatmap-titlebar[b-7koq44z2rt] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.heatmap-title[b-7koq44z2rt] {
    font-size: 1rem;
    margin: 0;
}

/* 매매 / 전월세 전환 탭 — 옅은 트랙 + 활성 흰 칩 (2026-06-09 사용자 요청) */
.heatmap-tabs[b-7koq44z2rt] {
    display: inline-flex;
    gap: 2px;
    padding: 2px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.heatmap-tab[b-7koq44z2rt] {
    appearance: none;
    border: 0;
    background: transparent;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: calc(var(--radius-sm) - 2px);
    cursor: pointer;
    transition: background 0.12s ease, color 0.12s ease;
}

.heatmap-tab:hover[b-7koq44z2rt] {
    color: var(--color-text);
}

.heatmap-tab.is-active[b-7koq44z2rt] {
    background: var(--color-surface);
    color: var(--color-accent);
    box-shadow: var(--shadow-sm);
}

.heatmap-legend[b-7koq44z2rt] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    flex-wrap: wrap;
}

.heatmap-legend__label[b-7koq44z2rt] {
    margin-right: 4px;
}

.heatmap-scroll[b-7koq44z2rt] {
    overflow-x: auto;
}

/* <figure role="img"> 로 heatmap 전체를 감싸서 스크린리더가 단일 그래픽 객체로 인식.
   <table> 자체엔 role 미부여 → 표 시맨틱 (행/열) 살림. (Fix 5 — Low 접근성) */
figure.heatmap-figure[b-7koq44z2rt] {
    margin: 0;
    padding: 0;
}

.heatmap[b-7koq44z2rt] {
    border-collapse: separate;
    border-spacing: 2px;
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

.heatmap th[b-7koq44z2rt], .heatmap td[b-7koq44z2rt] {
    text-align: center;
    font-weight: 500;
    font-size: 0.7rem;
    color: var(--color-text-muted);
}

.heatmap-year-th[b-7koq44z2rt], .heatmap-year-label[b-7koq44z2rt] {
    min-width: 42px;
    text-align: right;
    padding-right: 6px;
    color: var(--color-text);
    font-weight: 600;
}

.heatmap-month-th[b-7koq44z2rt] {
    min-width: 20px;
}

.heatmap-cell[b-7koq44z2rt] {
    /* 히트맵 셀 축소 — 28 → 20px (2026-06-09 사용자 요청) */
    width: 20px;
    height: 20px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    transition: transform 0.1s ease;
    /* <td> 기본 display: table-cell 유지 — Safari/Firefox 셀 정렬 일관.
       이전엔 display: inline-block + vertical-align: middle 박혀 있었으나 셀 크기 어긋남 발생.
       (Fix 6 — Med-2 heatmap 셀 inline-block 충돌 수정) */
    cursor: default;
}

.heatmap-cell:hover[b-7koq44z2rt] {
    transform: scale(1.15);
    box-shadow: var(--shadow-sm);
}

/* heatmap 5단 색 — neutral gray-scale 베이스 + accent 점진 (admin-data-console.md §1-2).
   한국 컨벤션 (--color-up 빨강 / --color-down 파랑) 과 충돌 회피 — 어차피 데이터 양 분포라 의미 다름. */
.heatmap-cell[data-level="0"][b-7koq44z2rt] {
    background: var(--color-surface-alt);
    border-color: var(--color-border);
}

.heatmap-cell[data-level="1"][b-7koq44z2rt] {
    background: var(--color-accent-soft);
    border-color: var(--color-accent-soft);
}

.heatmap-cell[data-level="2"][b-7koq44z2rt] {
    background: rgba(37, 99, 235, 0.4);
    border-color: rgba(37, 99, 235, 0.4);
}

.heatmap-cell[data-level="3"][b-7koq44z2rt] {
    background: rgba(37, 99, 235, 0.7);
    border-color: rgba(37, 99, 235, 0.7);
}

.heatmap-cell[data-level="4"][b-7koq44z2rt] {
    background: var(--color-accent);
    border-color: var(--color-accent);
}

.heatmap-cell--legend[b-7koq44z2rt] {
    width: 16px;
    height: 16px;
    margin: 0 2px;
}

.heatmap-cell--legend:hover[b-7koq44z2rt] {
    transform: none;
    box-shadow: none;
}

.sr-only[b-7koq44z2rt] {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ----- 수집 — 섹션 ② ----- */
.backfill-grid[b-7koq44z2rt] {
    display: grid;
    grid-template-columns: 1fr 1fr 1.2fr;
    gap: 16px;
}

@media (max-width: 1200px) {
    .backfill-grid[b-7koq44z2rt] {
        grid-template-columns: 1fr;
    }
}

.panel[b-7koq44z2rt] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 20px;
}

.panel--dim[b-7koq44z2rt] {
    opacity: 0.7;
}

.panel__title[b-7koq44z2rt] {
    font-size: 0.95rem;
    margin: 0 0 12px;
    color: var(--color-text);
}

.backfill-row[b-7koq44z2rt] {
    margin-bottom: 12px;
}

.backfill-label[b-7koq44z2rt] {
    display: block;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.backfill-month-pair[b-7koq44z2rt] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.backfill-actions[b-7koq44z2rt] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
}

/* MudButton border-radius 우리 토큰으로 강제 — admin-data-console.md §"MudBlazor 톤 오버라이드 룰" §3 */
[b-7koq44z2rt] .backfill-actions .mud-button-root,
[b-7koq44z2rt] .log-filter .mud-button-root,
[b-7koq44z2rt] .log-pager .mud-button-root {
    border-radius: var(--radius-md);
    text-transform: none;
    font-weight: 500;
}

.estimate-list[b-7koq44z2rt] {
    display: grid;
    gap: 8px;
    margin: 0;
}

.estimate-row[b-7koq44z2rt] {
    display: grid;
    grid-template-columns: 140px 1fr;
    gap: 12px;
    align-items: baseline;
    font-size: 0.9rem;
}

.estimate-row dt[b-7koq44z2rt] {
    color: var(--color-text-muted);
}

.estimate-row dd[b-7koq44z2rt] {
    margin: 0;
    color: var(--color-text);
}

.estimate-row--emph dd[b-7koq44z2rt] {
    font-weight: 700;
    color: var(--color-accent);
}

.estimate-row--note dd[b-7koq44z2rt],
.estimate-row--err dd[b-7koq44z2rt] {
    font-size: 0.85rem;
}

/* 진행도 패널 */
.progress-row[b-7koq44z2rt] {
    display: grid;
    grid-template-columns: 100px 1fr 220px;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}

.progress-row__label[b-7koq44z2rt] {
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.progress-row__value[b-7koq44z2rt] {
    font-size: 0.85rem;
    text-align: right;
    color: var(--color-text);
}

[b-7koq44z2rt] .mud-progress-linear {
    height: 8px;
    border-radius: var(--radius-sm);
}

[b-7koq44z2rt] .mud-progress-linear-bar.mud-progress-linear-bar-1.mud-progress-linear-color-primary {
    background: var(--color-accent);
}

[b-7koq44z2rt] .mud-progress-linear-bar.mud-progress-linear-bar-1.mud-progress-linear-color-warning {
    background: var(--color-up);
}

.progress-meta[b-7koq44z2rt] {
    margin-top: 16px;
}

/* ----- 상태 pill — 색 + 텍스트 + 아이콘 다중 감각 ----- */
.status-pill[b-7koq44z2rt] {
    display: inline-flex;
    align-items: center;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    border: 1px solid transparent;
    white-space: nowrap;
}

.status-pill--ok[b-7koq44z2rt] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-color: var(--color-accent-soft);
}

.status-pill--fail[b-7koq44z2rt] {
    background: #fdecea;
    color: var(--color-up);
    border-color: #f5c6c1;
}

.status-pill--running[b-7koq44z2rt] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.status-pill--paused[b-7koq44z2rt] {
    background: var(--color-surface-alt);
    color: var(--color-text);
    border-color: var(--color-border);
}

.status-pill--limit[b-7koq44z2rt] {
    background: #fdecea;
    color: var(--color-up);
    border-color: var(--color-up);
}

.status-pill--idle[b-7koq44z2rt] {
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    border-color: var(--color-border);
}

/* ----- stage별 자동 사이클 토글 (각 패널 head 안) ----- */
.daily-panel__auto-toggle[b-7koq44z2rt] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 4px 0 8px 0;
    padding: 8px 10px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

/* 단계별 자동 적재 시각 줄 — "매일 KST [select]시 자동 실행" 인라인. */
.daily-panel__hour-line[b-7koq44z2rt] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

/* 시각 드롭다운 — 네이티브 select + 우리 토큰 (hairline + radius + surface + SVG 화살표). */
.daily-panel__hour-select[b-7koq44z2rt] {
    font: inherit;
    font-size: 0.72rem;
    padding: 1px 18px 1px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 4px center;
    background-size: 11px;
    font-variant-numeric: tabular-nums;
}

.daily-panel__hour-select:focus-visible[b-7koq44z2rt] {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

/* 토허제 전용 — 제외 시간대 칩 그리드 (정각 0~23, 클릭 = 그 시각 건너뜀). */
.daily-panel__excluded[b-7koq44z2rt] {
    margin-top: 6px;
}
.daily-panel__excluded-label[b-7koq44z2rt] {
    display: block;
    font-size: 0.7rem;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}
.daily-panel__hour-grid[b-7koq44z2rt] {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 3px;
    max-width: 360px;
}
.hour-chip[b-7koq44z2rt] {
    font: inherit;
    font-size: 0.66rem;
    font-variant-numeric: tabular-nums;
    padding: 2px 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    text-align: center;
    transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.hour-chip:hover[b-7koq44z2rt] { border-color: var(--color-accent); }
.hour-chip.is-off[b-7koq44z2rt] {
    background-color: var(--color-surface-alt);
    color: var(--color-text-muted);
    border-color: var(--color-border);
    text-decoration: line-through;
}
.hour-chip:focus-visible[b-7koq44z2rt] {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}
@media (max-width: 700px) {
    .daily-panel__hour-grid[b-7koq44z2rt] { grid-template-columns: repeat(8, 1fr); max-width: none; }
}

/* ----- 광고 설정 섹션 (admin) ----- */
.ad-settings-panel[b-7koq44z2rt] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 16px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.ad-settings-row[b-7koq44z2rt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* 위치별 광고 토글 묶음 — 전체 OFF 시 fieldset disabled 로 흐려짐. */
.ad-settings-slots[b-7koq44z2rt] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
}

.ad-settings-slots:disabled[b-7koq44z2rt] {
    opacity: 0.5;
}

.ad-settings-slots__legend[b-7koq44z2rt] {
    padding: 0 6px;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

.ad-settings-row__label[b-7koq44z2rt] {
    font-size: 0.85rem;
    color: var(--color-text);
}

.ad-settings-row__hint[b-7koq44z2rt] {
    font-size: 0.74rem;
}

.ad-settings-row__control[b-7koq44z2rt] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ad-settings-row__select[b-7koq44z2rt] {
    font: inherit;
    font-size: 0.85rem;
    padding: 5px 28px 5px 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background-color: var(--color-surface);
    color: var(--color-text);
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    width: max-content;
}

.ad-settings-row__select:disabled[b-7koq44z2rt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.ad-settings-row__select:focus-visible[b-7koq44z2rt] {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

/* ----- 섹션 ③ 3패널 ----- */
.daily-grid[b-7koq44z2rt] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 1100px) {
    .daily-grid[b-7koq44z2rt] {
        grid-template-columns: 1fr;
    }
}

.daily-panel[b-7koq44z2rt] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.daily-panel__head[b-7koq44z2rt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 8px;
    margin-bottom: 4px;
}

.daily-panel__head .panel__title[b-7koq44z2rt] {
    margin: 0;
}

/* stage 가 무슨 데이터인지 한 줄 설명 (2026-06-09 사용자 요청) */
.daily-panel__desc[b-7koq44z2rt] {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.5;
    color: var(--color-text-muted);
    word-break: keep-all;
}

.daily-cumulative[b-7koq44z2rt] {
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    padding: 12px;
    display: grid;
    gap: 6px;
}

.daily-cumulative__label[b-7koq44z2rt] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.daily-meta[b-7koq44z2rt] {
    display: grid;
    gap: 8px;
    margin: 0;
}

/* 섹션 ③ 수동 트리거 버튼 row — panel 안 dl 아래 hairline 분리. */
.daily-panel__actions[b-7koq44z2rt] {
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-border);
    display: flex;
    justify-content: flex-end;
}

[b-7koq44z2rt] .daily-panel__actions .mud-button-root {
    border-radius: var(--radius-md);
    text-transform: none;
    font-weight: 500;
}

/* ----- 섹션 ④ 로그 테이블 ----- */
.log-filter[b-7koq44z2rt] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}

.log-filter__select[b-7koq44z2rt] {
    min-width: 160px;
}

/* 날짜 범위 picker 는 두 날짜 표시라 폭 살짝 더 줌. */
.log-filter__daterange[b-7koq44z2rt] {
    min-width: 240px;
}

.log-table-wrap[b-7koq44z2rt] {
    overflow-x: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.log-table[b-7koq44z2rt] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
}

.log-table th[b-7koq44z2rt], .log-table td[b-7koq44z2rt] {
    padding: 8px 12px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
    vertical-align: middle;
}

.log-table th[b-7koq44z2rt] {
    background: var(--color-surface-alt);
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.log-table tbody tr[b-7koq44z2rt] {
    cursor: pointer;
    transition: background 0.1s ease;
}

.log-table tbody tr:hover[b-7koq44z2rt] {
    background: var(--color-surface-alt);
}

.log-table tbody tr:focus-visible[b-7koq44z2rt] {
    outline: 2px solid var(--color-accent);
    outline-offset: -2px;
}

.log-table .right[b-7koq44z2rt] { text-align: right; }
.log-table .center[b-7koq44z2rt] { text-align: center; }
.log-table .tabular[b-7koq44z2rt] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
.log-table .mono[b-7koq44z2rt] { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.85rem; }
.log-table .error-cell[b-7koq44z2rt] { max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cat-chip[b-7koq44z2rt] {
    display: inline-block;
    padding: 2px 8px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.78rem;
    color: var(--color-text);
}

.log-pager[b-7koq44z2rt] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
}

.log-pager__info[b-7koq44z2rt] {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.log-empty[b-7koq44z2rt] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 32px;
    text-align: center;
    color: var(--color-text-muted);
}

/* ----- 보조 ----- */
.muted[b-7koq44z2rt] {
    color: var(--color-text-muted);
}

.signal-up[b-7koq44z2rt] {
    color: var(--color-up);
}

.admin-skeleton[b-7koq44z2rt] {
    background: var(--color-surface-alt);
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    padding: 32px;
    text-align: center;
    color: var(--color-text-muted);
}

.admin-placeholder[b-7koq44z2rt] {
    padding: 48px 24px;
    text-align: center;
    color: var(--color-text-muted);
}

/* MudPaper / MudPaper Outlined 톤 — Elevation=0 강제 */
[b-7koq44z2rt] .mud-paper {
    box-shadow: none;
}

[b-7koq44z2rt] .mud-paper.mud-paper-outlined {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

/* MudSelect / MudNumericField — border-radius */
[b-7koq44z2rt] .mud-input-outlined-input {
    border-radius: var(--radius-md);
}

/* ============================================================================
   모바일 반응형 (~768px) — content-mobile-dev 추가 블록.
   PC 케이스 보존 + 모바일 한정 오버라이드만.

   PC 인계 4대 포인트 + 기획서 §"반응형 / 디바이스" + §"예외처리 > 반응형" 기반:
   - .metric-grid 6 → 2열 (이미 위 @media 700px 처리됨)
   - .backfill-grid 3 → 1열 (이미 위 @media 1200px 처리됨)
   - .daily-grid 3 → 1열 (이미 위 @media 1100px 처리됨)
   - .log-table 카테고리·대상·에러·소요·행수 일부 컬럼 숨김 + row 클릭 → LogDetailDialog 에서 전체 노출
   - heatmap cell 22x22 축소
   - MudSelect / MudNumericField / 수집 버튼 그룹 full-width + 터치 타겟 44px+
   - MudTabs 폰트 축소·가로 스크롤 native 유지
   - MudDialog 풀-블리드 (max-width 100vw / margin 0)
   - estimate-row · progress-row 그리드 풀어 1열 적층
   ========================================================================== */
@media (max-width: 768px) {

    /* ----- 컨테이너 좌우 padding 축소 ----- */
    .admin-data[b-7koq44z2rt] {
        padding: 20px 16px 56px;
    }

    .admin-data__title[b-7koq44z2rt] {
        font-size: clamp(1.4rem, 5vw, 1.7rem);
    }

    .admin-data__meta[b-7koq44z2rt] {
        font-size: 0.85rem;
        line-height: 1.5;
    }

    /* ----- 섹션 padding 축소 ----- */
    .admin-section[b-7koq44z2rt] {
        padding: 32px 0;
    }

    .admin-section__title[b-7koq44z2rt] {
        font-size: 1.15rem;
    }

    .admin-section__lead[b-7koq44z2rt] {
        font-size: 0.88rem;
        line-height: 1.55;
    }

    /* ----- MudTabs — 가로 스크롤 native 유지, 폰트만 축소 ----- */
    [b-7koq44z2rt] .admin-tabs .mud-tab {
        font-size: 0.74rem;
        min-width: auto;
        padding: 0 5px;
    }

    /* ----- 카드 padding 모바일 축소 ----- */
    .metric-card[b-7koq44z2rt] {
        padding: 14px 12px;
        gap: 4px;
    }

    .metric-card__label[b-7koq44z2rt] {
        font-size: 0.78rem;
    }

    .metric-card__value[b-7koq44z2rt] {
        /* PC clamp 가 모바일에서 너무 큼 — 축소 (큰 수치 자릿수 가독성 우선) */
        font-size: clamp(1.1rem, 4.5vw, 1.4rem);
    }

    .metric-card__value--sm[b-7koq44z2rt] {
        font-size: clamp(0.9rem, 3.5vw, 1.05rem);
    }

    .metric-card--mini[b-7koq44z2rt] {
        padding: 12px 10px;
    }

    .metric-card--mini .metric-card__value[b-7koq44z2rt] {
        font-size: clamp(1.05rem, 4vw, 1.25rem);
    }

    .metric-card__meta[b-7koq44z2rt] {
        font-size: 0.72rem;
        line-height: 1.4;
        /* 긴 한국어 단어 줄바꿈 — keep-all 로 단어 단위 wrap */
        word-break: keep-all;
    }

    /* ----- heatmap 모바일 cell 축소 + 가로 스크롤 보존 ----- */
    .heatmap-section[b-7koq44z2rt] {
        padding: 14px 12px;
    }

    .heatmap-header[b-7koq44z2rt] {
        gap: 8px;
        margin-bottom: 8px;
    }

    .heatmap-title[b-7koq44z2rt] {
        font-size: 0.92rem;
    }

    .heatmap-legend[b-7koq44z2rt] {
        font-size: 0.7rem;
        gap: 4px;
    }

    /* heatmap-scroll 좌우 가득 — 부모 padding 무시하고 모바일 viewport 가득 사용. */
    .heatmap-scroll[b-7koq44z2rt] {
        /* iOS 모멘텀 스크롤 보강 */
        -webkit-overflow-scrolling: touch;
    }

    .heatmap-cell[b-7koq44z2rt] {
        width: 18px;
        height: 18px;
    }

    .heatmap-year-th[b-7koq44z2rt],
    .heatmap-year-label[b-7koq44z2rt] {
        min-width: 40px;
        padding-right: 4px;
        font-size: 0.7rem;
        /* 첫 컬럼 (연도) sticky — 가로 스크롤 시 항상 보이게 (기획서 §"예외처리 > 반응형" 명시) */
        position: sticky;
        left: 0;
        background: var(--color-surface);
        z-index: 1;
    }

    .heatmap-month-th[b-7koq44z2rt] {
        min-width: 22px;
        font-size: 0.68rem;
    }

    /* ----- 수집 입력 패널 ----- */
    .panel[b-7koq44z2rt] {
        padding: 16px 14px;
    }

    .panel__title[b-7koq44z2rt] {
        font-size: 0.9rem;
        margin-bottom: 10px;
    }

    /* MudSelect / MudNumericField full-width — 모바일 가독성 + 터치 타겟 */
    [b-7koq44z2rt] .backfill-input .mud-input-control,
    [b-7koq44z2rt] .backfill-input .mud-select,
    [b-7koq44z2rt] .backfill-input .mud-input-outlined,
    [b-7koq44z2rt] .log-filter .mud-input-control,
    [b-7koq44z2rt] .log-filter .mud-select,
    [b-7koq44z2rt] .log-filter .mud-input-outlined {
        width: 100%;
    }

    .log-filter__select[b-7koq44z2rt] {
        min-width: 0;
        width: 100%;
    }

    /* 수집 버튼 그룹 — 세로 적층, 각 버튼 full-width + 터치 타겟 44px+ */
    .backfill-actions[b-7koq44z2rt] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    [b-7koq44z2rt] .backfill-actions .mud-button-root {
        width: 100%;
        min-height: 44px;
    }

    /* 로그 필터 — 세로 적층 + 버튼 그룹 가로 wrap 유지 (작은 액션이라 적층 X) */
    .log-filter[b-7koq44z2rt] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }

    /* ----- estimate-row 그리드 풀기 — 라벨 / 값 1줄 적층 ----- */
    .estimate-row[b-7koq44z2rt] {
        grid-template-columns: 1fr;
        gap: 2px;
        padding: 6px 0;
        border-bottom: 1px dashed var(--color-border);
    }

    .estimate-row:last-child[b-7koq44z2rt] {
        border-bottom: 0;
    }

    .estimate-row dt[b-7koq44z2rt] {
        font-size: 0.78rem;
    }

    .estimate-row dd[b-7koq44z2rt] {
        font-size: 0.92rem;
        word-break: keep-all;
    }

    /* ----- progress-row 그리드 풀기 — 라벨 / 바 / 값 3줄 적층 ----- */
    .progress-row[b-7koq44z2rt] {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .progress-row__value[b-7koq44z2rt] {
        text-align: left;
        font-size: 0.82rem;
    }

    /* ----- 일별 패널 ----- */
    .daily-panel__head[b-7koq44z2rt] {
        flex-wrap: wrap;
        gap: 6px;
    }

    .daily-cumulative[b-7koq44z2rt] {
        padding: 10px;
    }

    .daily-cumulative__label[b-7koq44z2rt] {
        font-size: 0.75rem;
    }

    /* ----- 로그 테이블 — 카테고리·대상·소요·에러 컬럼 숨김. 시각·결과·행수만 노출.
       row 클릭 시 LogDetailDialog 에서 전체 (razor 변경 없음 — 기존 onClick 유지). ----- */
    .log-table-wrap[b-7koq44z2rt] {
        /* 가로 스크롤 잔여 — 시각이 길어도 안전망 */
        -webkit-overflow-scrolling: touch;
    }

    .log-table[b-7koq44z2rt] {
        font-size: 0.82rem;
    }

    .log-table th[b-7koq44z2rt],
    .log-table td[b-7koq44z2rt] {
        padding: 10px 8px;
    }

    /* 시각(1), 카테고리(2), 대상(3), 결과(4), 행수(5), 소요(6), 에러(7) — 모바일에선 1·4·5 만 노출 */
    .log-table th:nth-child(2)[b-7koq44z2rt],
    .log-table td:nth-child(2)[b-7koq44z2rt],
    .log-table th:nth-child(3)[b-7koq44z2rt],
    .log-table td:nth-child(3)[b-7koq44z2rt],
    .log-table th:nth-child(6)[b-7koq44z2rt],
    .log-table td:nth-child(6)[b-7koq44z2rt],
    .log-table th:nth-child(7)[b-7koq44z2rt],
    .log-table td:nth-child(7)[b-7koq44z2rt] {
        display: none;
    }

    /* 행 클릭 affordance — 모바일에선 chevron 같은 시각 단서 강화 */
    .log-table tbody tr[b-7koq44z2rt] {
        min-height: 44px;
    }

    .log-table tbody tr td:first-child[b-7koq44z2rt]::after {
        content: " ›";
        color: var(--color-text-muted);
        font-weight: 600;
        margin-left: 4px;
    }

    .log-table .error-cell[b-7koq44z2rt] {
        max-width: none;
    }

    /* ----- 페이지네이션 — 가운데 정렬 + 줄바꿈 허용 ----- */
    .log-pager[b-7koq44z2rt] {
        flex-wrap: wrap;
        gap: 8px;
        padding: 12px 8px;
    }

    .log-pager__info[b-7koq44z2rt] {
        flex-basis: 100%;
        text-align: center;
        order: -1;
    }

    [b-7koq44z2rt] .log-pager .mud-button-root {
        min-height: 44px;
        min-width: 88px;
    }

    /* ----- status-pill — 모바일에서 살짝 축소 ----- */
    .status-pill[b-7koq44z2rt] {
        font-size: 0.74rem;
        padding: 2px 8px;
    }

    /* ----- MudDialog (BackfillConfirmDialog / LogDetailDialog) — 모바일 풀-블리드.
       razor 측 FullScreen 토글 없이 CSS only 로 처리. ----- */
    [b-7koq44z2rt] .mud-dialog-container .mud-dialog {
        max-width: calc(100vw - 16px);
        margin: 8px;
        width: calc(100vw - 16px);
    }

    [b-7koq44z2rt] .mud-dialog-container .mud-dialog .mud-dialog-content {
        padding: 16px;
        font-size: 0.9rem;
    }

    [b-7koq44z2rt] .mud-dialog-container .mud-dialog .mud-dialog-actions {
        padding: 12px 16px;
        flex-wrap: wrap;
        gap: 8px;
    }

    [b-7koq44z2rt] .mud-dialog-container .mud-dialog .mud-dialog-actions .mud-button-root {
        min-height: 44px;
    }

    /* ----- 빈 상태 / 스켈레톤 ----- */
    .admin-skeleton[b-7koq44z2rt],
    .log-empty[b-7koq44z2rt],
    .admin-placeholder[b-7koq44z2rt] {
        padding: 24px 16px;
        font-size: 0.88rem;
    }
}

/* ============================================================================
   초소형 viewport (~480px) — iPhone SE 1세대 / Galaxy Z Fold 외부 화면 보강.
   기본 700px / 768px 케이스 위에 정말 깨지는 부분만 추가 축소.
   ========================================================================== */
@media (max-width: 480px) {

    .admin-data[b-7koq44z2rt] {
        padding: 16px 12px 48px;
    }

    /* 요약 카드 — 2열 유지하되 padding 최소화 */
    .metric-grid[b-7koq44z2rt] {
        gap: 8px;
    }

    .metric-card[b-7koq44z2rt] {
        padding: 12px 10px;
    }

    .today-summary[b-7koq44z2rt] {
        gap: 8px;
    }

    /* heatmap cell 추가 축소 — 한 화면에 더 많은 칸 노출 */
    .heatmap-cell[b-7koq44z2rt] {
        width: 18px;
        height: 18px;
    }

    .heatmap-year-th[b-7koq44z2rt],
    .heatmap-year-label[b-7koq44z2rt] {
        min-width: 36px;
        font-size: 0.68rem;
    }

    .heatmap-month-th[b-7koq44z2rt] {
        min-width: 18px;
        font-size: 0.64rem;
    }

    /* heatmap 범례 — 좁은 화면에서 한 줄 wrap 자연스럽게 */
    .heatmap-legend[b-7koq44z2rt] {
        font-size: 0.66rem;
    }

    .heatmap-cell--legend[b-7koq44z2rt] {
        width: 12px;
        height: 12px;
    }

    /* 로그 테이블 — 시각도 짧게 (오늘은 HH:mm:ss 인데 좁으면 줄바꿈 위험) */
    .log-table th[b-7koq44z2rt],
    .log-table td[b-7koq44z2rt] {
        padding: 8px 6px;
        font-size: 0.78rem;
    }

    /* MudDialog 풀-스크린에 가깝게 */
    [b-7koq44z2rt] .mud-dialog-container .mud-dialog {
        max-width: 100vw;
        margin: 0;
        width: 100vw;
        min-height: 100vh;
        min-height: 100dvh;
        border-radius: 0;
    }
}

/* ============================================================
   M2-1.1 — 지도 좌표 매핑 section.
   panel 안 진척률 + 컨트롤 (한도·시각·자동) + 수동 트리거.
   ============================================================ */
.geocode-panel[b-7koq44z2rt] {
    padding: 18px 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.geocode-key-missing[b-7koq44z2rt] {
    padding: 10px 14px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    line-height: 1.5;
}

.geocode-key-missing code[b-7koq44z2rt] {
    background: var(--color-bg);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85em;
}

.geocode-summary[b-7koq44z2rt] {
    font-size: 0.9375rem;
    line-height: 1.6;
}

.geocode-summary b[b-7koq44z2rt] {
    color: var(--color-text);
    font-weight: 600;
}

.geocode-controls[b-7koq44z2rt] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 16px;
    padding: 14px 16px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.geocode-control[b-7koq44z2rt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.geocode-control__label[b-7koq44z2rt] {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-text);
}

.geocode-control__select[b-7koq44z2rt] {
    height: 36px;
    padding: 0 10px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: 0.9375rem;
    cursor: pointer;
}

.geocode-control__select:focus-visible[b-7koq44z2rt] {
    outline: 2px solid var(--color-accent);
    outline-offset: 1px;
}

.geocode-control__select:disabled[b-7koq44z2rt] {
    opacity: 0.5;
    cursor: not-allowed;
}

.geocode-control__hint[b-7koq44z2rt] {
    font-size: 0.78rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.geocode-trigger[b-7koq44z2rt] {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
}

.geocode-trigger__hint[b-7koq44z2rt] {
    font-size: 0.85rem;
}

/* M2-1.1 — 사이클 진행 게이지 (사이클 도는 동안만 표시). PollTickAsync 1초 polling 실시간 갱신. */
.geocode-progress[b-7koq44z2rt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

[b-7koq44z2rt] .geocode-progress__bar {
    height: 8px;
    border-radius: 4px;
}

.geocode-progress__line[b-7koq44z2rt] {
    font-size: 0.875rem;
    line-height: 1.5;
    color: var(--color-text);
}

.geocode-progress__line b[b-7koq44z2rt] {
    font-weight: 700;
    color: var(--color-accent);
}

/* ============================================================================
   방문자 통계 탭 (index 3, 2026-06-04) — 큰 숫자 hero 전폭 + 도넛 4 카드 2x2 grid + 선차트 전폭.
   각 도넛 카드 = 도넛 위 + 막대 row 아래 (동일 패턴). SVG 색은 ChartPalette inline, 레이아웃만 여기.
   기존 토큰만 사용 (--color-surface/-alt, --shadow-sm/md, --radius-sm/md/lg, --color-text/-muted, --color-accent/-soft, --color-border).
   ========================================================================== */

/* ===== 통계 grid — 2-col. hero 카드 + 선차트 카드 전폭. 도넛 4 카드 2x2 자연 배치. ===== */
.admin-stats-grid[b-7koq44z2rt] {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
    align-items: stretch;
}

.admin-stats-grid__hero[b-7koq44z2rt] {
    grid-column: 1 / -1;
}

.admin-stats-grid__trend[b-7koq44z2rt] {
    grid-column: 1 / -1;
}

/* ===== [1] 오늘 통계 종합 — 전폭. 좌측 큰 숫자 + 우측 보조 metric 가로 펼침. ===== */
.admin-card[b-7koq44z2rt] {
    width: 100%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    padding: 28px;
}

.admin-card--today[b-7koq44z2rt] {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ===== [1] 핵심 지표 4종 (PV / DAU / WAU / MAU) ===== */
.admin-kpi-caption[b-7koq44z2rt] {
    order: -1;
}

.admin-kpi-grid[b-7koq44z2rt] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
}

.admin-kpi[b-7koq44z2rt] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 18px 18px 16px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: help;
}

.admin-kpi__label[b-7koq44z2rt] {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--color-text);
}

.admin-kpi__label-ko[b-7koq44z2rt] {
    font-size: 11px;
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: 0;
}

.admin-kpi__value[b-7koq44z2rt] {
    display: flex;
    align-items: baseline;
    gap: 4px;
    font-size: 38px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    color: var(--color-accent);
    font-variant-numeric: tabular-nums;
}

.admin-kpi__unit[b-7koq44z2rt] {
    font-size: 15px;
    font-weight: 500;
    color: var(--color-text-muted);
}

.admin-kpi__delta[b-7koq44z2rt] {
    align-self: flex-start;
    font-size: 12px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--color-accent-soft);
}

.admin-kpi__delta--up[b-7koq44z2rt] {
    color: var(--color-accent);
}

.admin-kpi__delta--down[b-7koq44z2rt],
.admin-kpi__delta--same[b-7koq44z2rt] {
    color: var(--color-text-muted);
    background: var(--color-surface);
}

.admin-kpi__desc[b-7koq44z2rt] {
    margin-top: auto;
    font-size: 12px;
    line-height: 1.45;
    color: var(--color-text-muted);
}

.admin-card__primary[b-7koq44z2rt] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.admin-card__metrics[b-7koq44z2rt] {
    display: flex;
    gap: 32px;
    align-items: center;
    flex-wrap: wrap;
}

.admin-card__metric[b-7koq44z2rt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 90px;
    text-align: right;
}

.admin-card__metric-label[b-7koq44z2rt] {
    font-size: 12px;
    font-weight: 500;
    color: var(--color-text-muted);
    letter-spacing: 0.04em;
}

.admin-card__metric-value[b-7koq44z2rt] {
    font-size: 22px;
    font-weight: 600;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.admin-card__count-row[b-7koq44z2rt] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}

.admin-card__count[b-7koq44z2rt] {
    color: var(--color-accent);
    font-size: 56px;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}

.admin-card__count-suffix[b-7koq44z2rt] {
    color: var(--color-text-muted);
    font-size: 18px;
    font-weight: 500;
    margin-right: 8px;
}

.admin-card__delta[b-7koq44z2rt] {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    background: var(--color-accent-soft);
}

.admin-card__delta--up[b-7koq44z2rt] {
    color: var(--color-accent);
}

.admin-card__delta--down[b-7koq44z2rt],
.admin-card__delta--same[b-7koq44z2rt] {
    color: var(--color-text-muted);
}

.admin-card__caption[b-7koq44z2rt] {
    color: var(--color-text-muted);
    font-size: 14px;
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.admin-card__caption time[b-7koq44z2rt] {
    color: var(--color-text);
    font-weight: 500;
}

/* ===== [2~5] 도넛 카드 — 동일 패턴 (도넛 위 + 막대 row 아래). ===== */
.admin-stat-card[b-7koq44z2rt] {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    padding: 24px 22px;
}

.admin-stat-card__title[b-7koq44z2rt] {
    margin: 0 0 16px;
    font-size: 17px;
    font-weight: 600;
    color: var(--color-text);
}

/* 집계 기준 배지 — 방문 건수(유니크 아님) / 순 방문자 구분. */
.admin-stat-card__hint[b-7koq44z2rt] {
    display: inline-block;
    margin-left: 6px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0;
    vertical-align: middle;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    cursor: help;
}

.admin-stat-card__hint--unique[b-7koq44z2rt] {
    color: var(--color-accent);
    background: var(--color-accent-soft);
    border-color: transparent;
}

.admin-stat-card__empty[b-7koq44z2rt] {
    margin: 0;
    color: var(--color-text-muted);
    font-size: 14px;
    line-height: 1.6;
}

.admin-stat-card__split[b-7koq44z2rt] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.admin-stat-card__donut[b-7koq44z2rt] {
    width: 100%;
    overflow: visible;
}

.admin-stat-card__donut .donut-svg[b-7koq44z2rt] {
    width: 100%;
    height: auto;
    overflow: visible;
}

.admin-stat-card__bars[b-7koq44z2rt] {
    display: flex;
    flex-direction: column;
}

/* 막대 row — dot 8px + 라벨 (140px 고정, 길면 ellipsis) + 막대 (1fr) + 카운트 44px. */
.admin-stat-row[b-7koq44z2rt] {
    display: grid;
    grid-template-columns: 8px 140px 1fr 44px;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
    font-size: 13px;
}

.admin-stat-row:last-child[b-7koq44z2rt] {
    margin-bottom: 0;
}

.admin-stat-row__dot[b-7koq44z2rt] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.admin-stat-row__label[b-7koq44z2rt] {
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.admin-stat-row__bar[b-7koq44z2rt] {
    background: var(--color-accent-soft);
    border-radius: var(--radius-sm);
    height: 8px;
    overflow: hidden;
    width: 100%;
    min-width: 60px;
}

.admin-stat-row__bar-fill[b-7koq44z2rt] {
    display: block;
    background: var(--color-accent);
    height: 100%;
    min-width: 8px;
    border-radius: var(--radius-sm);
    transition: width 240ms ease;
}

.admin-stat-row__count[b-7koq44z2rt] {
    text-align: right;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
}

/* ===== [6] 선차트 카드 — 전폭 + legend. ===== */
.admin-stat-card--line[b-7koq44z2rt] {
    width: 100%;
}

.admin-stat-card__head[b-7koq44z2rt] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 16px;
}

.admin-stat-card__head .admin-stat-card__title[b-7koq44z2rt] {
    margin: 0;
}

.admin-legend[b-7koq44z2rt] {
    display: flex;
    gap: 16px;
    align-items: center;
    font-size: 13px;
    color: var(--color-text);
}

.admin-legend__item[b-7koq44z2rt] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.admin-legend__dot[b-7koq44z2rt] {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.admin-legend__dot--dashed[b-7koq44z2rt] {
    background: transparent !important;
    border: 1.5px dashed var(--color-text-muted);
}

.admin-stat-card--line .line-svg[b-7koq44z2rt] {
    width: 100%;
    height: auto;
    max-height: 240px;
}

/* ===== 모바일 ≤900px — 통계 grid 1열로. ===== */
@media (max-width: 900px) {
    .admin-stats-grid[b-7koq44z2rt] {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 700px) {
    .admin-card[b-7koq44z2rt] {
        padding: 22px 18px;
    }

    /* 모바일에서 4지표 → 2열 그리드. */
    .admin-card--today[b-7koq44z2rt] {
        gap: 14px;
    }

    .admin-kpi-grid[b-7koq44z2rt] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .admin-kpi[b-7koq44z2rt] {
        padding: 14px 14px 12px;
    }

    .admin-kpi__value[b-7koq44z2rt] {
        font-size: 30px;
    }

    .admin-card__caption[b-7koq44z2rt] {
        font-size: 13px;
    }

    .admin-stat-card[b-7koq44z2rt] {
        padding: 22px 18px;
    }

    .admin-stat-card__title[b-7koq44z2rt] {
        font-size: 15px;
        margin-bottom: 12px;
    }

    .admin-stat-card__donut .donut-svg[b-7koq44z2rt] {
        max-height: 240px;
    }

    .admin-stat-card--line .line-svg[b-7koq44z2rt] {
        max-height: 200px;
    }

    .admin-stat-row[b-7koq44z2rt] {
        grid-template-columns: 8px 100px 1fr 36px;
        gap: 10px;
        font-size: 12px;
    }

    .admin-legend[b-7koq44z2rt] {
        font-size: 12px;
        gap: 12px;
    }

    .admin-legend__dot[b-7koq44z2rt],
    .admin-legend__dot--dashed[b-7koq44z2rt] {
        width: 8px;
        height: 8px;
    }
}

/* ===== M-AI단지요약 — AI 요약 검수 탭 ===== */
.ai-admin__lead[b-7koq44z2rt] {
    margin: 0 0 16px;
    font-size: 0.85rem;
    line-height: 1.7;
    color: var(--color-text-muted);
}

.ai-admin__toggles[b-7koq44z2rt],
.ai-admin__stage[b-7koq44z2rt] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.ai-admin__stage-row[b-7koq44z2rt] {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-top: 8px;
    font-size: 0.85rem;
    color: var(--color-text);
}

.ai-admin__stage-row select[b-7koq44z2rt] {
    margin-left: 6px;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
}

.ai-admin__pending[b-7koq44z2rt] {
    margin: 4px 0 12px;
    font-size: 0.9rem;
    color: var(--color-text);
}

.ai-admin__empty[b-7koq44z2rt] {
    padding: 16px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    text-align: center;
}

.ai-review[b-7koq44z2rt] {
    padding: 12px 14px;
    margin-bottom: 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.ai-review--filtered[b-7koq44z2rt] {
    background: var(--color-surface-alt);
    border-style: dashed;
}

.ai-review__head[b-7koq44z2rt] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
    margin-bottom: 6px;
    flex-wrap: wrap;
}

.ai-review__name[b-7koq44z2rt] {
    font-weight: 700;
    font-size: 0.92rem;
    color: var(--color-text);
}

.ai-review__code[b-7koq44z2rt] {
    font-weight: 400;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.ai-review__meta[b-7koq44z2rt] {
    font-size: 0.74rem;
    color: var(--color-text-muted);
}

.ai-review__hit[b-7koq44z2rt] {
    margin: 0 0 6px;
    font-size: 0.78rem;
    color: var(--color-up);
}

.ai-review__text[b-7koq44z2rt] {
    margin: 0 0 10px;
    font-size: 0.88rem;
    line-height: 1.7;
    color: var(--color-text);
    white-space: pre-line;
}

.ai-review__actions[b-7koq44z2rt] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ai-review__filtered-note[b-7koq44z2rt] {
    font-size: 0.76rem;
    color: var(--color-text-muted);
}

.ai-admin__stage-row input[type="number"][b-7koq44z2rt] {
    width: 90px;
    margin-left: 6px;
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text);
}

.ai-admin__remain[b-7koq44z2rt] {
    margin: 8px 0 0;
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.ai-admin__progress[b-7koq44z2rt] {
    margin-top: 10px;
}

.ai-admin__progress-label[b-7koq44z2rt] {
    margin-bottom: 4px;
    font-size: 0.8rem;
    color: var(--color-text);
}

/* _content/AptSonpoom/Components/Pages/Admin/KaptCodeLinkTool.razor.rz.scp.css */
.klt[b-ax7uv9b9m0] {
    display: flex;
    flex-direction: column;
    gap: 28px;
}

.klt-section[b-ax7uv9b9m0] {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.klt-title[b-ax7uv9b9m0] {
    margin: 0;
    font-size: 1.02rem;
    font-weight: 800;
    color: var(--color-text);
    letter-spacing: -0.02em;
}

.klt-lead[b-ax7uv9b9m0] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.klt-searchbar[b-ax7uv9b9m0] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 4px 0;
}

.klt-search[b-ax7uv9b9m0] {
    flex: 1 1 auto;
    max-width: 360px;
    height: 38px;
    padding: 0 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    font-family: inherit;
    color: var(--color-text);
}

.klt-search:focus-visible[b-ax7uv9b9m0] {
    border-color: var(--color-accent);
    outline: none;
}

.klt-meta[b-ax7uv9b9m0] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
}

.klt-empty[b-ax7uv9b9m0] {
    font-size: 0.88rem;
    color: var(--color-text-muted);
    padding: 12px 0;
}

.klt-progress[b-ax7uv9b9m0] {
    margin: 8px 0;
}

.klt-table[b-ax7uv9b9m0] {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.klt-table .klt-row[b-ax7uv9b9m0] {
    display: grid;
    grid-template-columns: 2fr 1fr 0.6fr 0.7fr 1.5fr auto;
    gap: 10px;
    align-items: center;
    padding: 9px 12px;
    border-top: 1px solid var(--color-border);
    font-size: 0.85rem;
}

.klt-table .klt-row:first-child[b-ax7uv9b9m0] {
    border-top: none;
}

.klt-row--head[b-ax7uv9b9m0] {
    background: var(--color-surface-alt);
    font-weight: 700;
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.klt-cell[b-ax7uv9b9m0] {
    min-width: 0;
}

.klt-name[b-ax7uv9b9m0] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--color-text);
}

.klt-dates[b-ax7uv9b9m0] {
    color: var(--color-text-muted);
    font-size: 0.8rem;
}

.klt-action[b-ax7uv9b9m0] {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
    align-items: center;
    flex-wrap: wrap;
}

/* 뷰 세그먼트 — 연결 대상 / 수동 연결됨 / 연결 못함 */
.klt-viewtabs[b-ax7uv9b9m0] {
    display: flex;
    gap: 4px;
    border-bottom: 1px solid var(--color-border);
}

.klt-viewtab[b-ax7uv9b9m0] {
    padding: 8px 14px;
    background: none;
    border: none;
    border-bottom: 2px solid transparent;
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--color-text-muted);
    font-family: inherit;
    letter-spacing: -0.01em;
    cursor: pointer;
}

.klt-viewtab:hover[b-ax7uv9b9m0],
.klt-viewtab:focus-visible[b-ax7uv9b9m0] {
    color: var(--color-text);
    outline: none;
}

.klt-viewtab.is-active[b-ax7uv9b9m0] {
    color: var(--color-accent);
    border-bottom-color: var(--color-accent);
}

.klt-sub[b-ax7uv9b9m0] {
    display: block;
    font-size: 0.72rem;
    color: var(--color-text-muted);
    font-weight: 400;
}

.klt-expand[b-ax7uv9b9m0] {
    padding: 10px 12px;
    background: var(--color-surface-alt);
    border-top: 1px solid var(--color-border);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.klt-cand-row[b-ax7uv9b9m0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.klt-cand-select[b-ax7uv9b9m0] {
    flex: 1 1 auto;
    max-width: 480px;
    height: 36px;
    padding: 0 10px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-family: inherit;
    color: var(--color-text);
}

.klt-cand-hint[b-ax7uv9b9m0] {
    margin: 0;
    font-size: 0.75rem;
    color: var(--color-text-muted);
}

.klt-cand-loading[b-ax7uv9b9m0] {
    font-size: 0.83rem;
    color: var(--color-text-muted);
    margin-left: 6px;
}

.klt-cand-empty[b-ax7uv9b9m0] {
    font-size: 0.83rem;
    color: var(--color-text);
}

.klt-pager[b-ax7uv9b9m0] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 6px;
}

.klt-pager-info[b-ax7uv9b9m0] {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

/* 수동 연결 내역 표 — 4컬럼 (미연결 표 6컬럼 override) */
.klt-table--map .klt-row[b-ax7uv9b9m0] {
    grid-template-columns: 1.5fr 1.5fr 0.7fr auto;
}

/* 연결 못함 표 — 4컬럼 */
.klt-table--unlink .klt-row[b-ax7uv9b9m0] {
    grid-template-columns: 1.6fr 1.4fr 0.7fr auto;
}

@media (max-width: 700px) {
    .klt-table[b-ax7uv9b9m0] {
        overflow-x: auto;
    }
    .klt-table .klt-row[b-ax7uv9b9m0] {
        min-width: 560px;
    }
}
/* _content/AptSonpoom/Components/Pages/Admin/LogDetailDialog.razor.rz.scp.css */
/* ============================================================================
   LogDetailDialog — scoped CSS.
   기존 인라인 <style> 블록을 razor 안에서 분리 (Blazor scoped CSS 자동 격리).

   디자인 시스템 토큰만 사용 (CLAUDE.md §"디자인 시스템").
   ========================================================================== */

.log-detail[b-zan60fmqou] {
    display: grid;
    gap: 8px;
}

.log-detail__row[b-zan60fmqou] {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 12px;
    align-items: baseline;
}

.log-detail__row dt[b-zan60fmqou] {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

.log-detail__row dd[b-zan60fmqou] {
    margin: 0;
}

.mono[b-zan60fmqou] {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 0.85rem;
}

.muted[b-zan60fmqou] {
    color: var(--color-text-muted);
}
/* _content/AptSonpoom/Components/Pages/Admin/SaleGeocodeFixer.razor.rz.scp.css */
/* SaleGeocodeFixer — 어드민 분양 좌표 수동 보정. 어드민 톤(hairline + 절제) 유지. */
.sgf[b-ez9b18x85x] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sgf__title[b-ez9b18x85x] {
    margin: 0;
    font-size: 1rem;
    font-weight: 800;
    color: var(--color-text, #1a1a1a);
    letter-spacing: -0.02em;
}

.sgf__desc[b-ez9b18x85x] {
    margin: 0;
    font-size: 0.8rem;
    line-height: 1.55;
    color: var(--color-text-muted, #666);
}

/* 검색 */
.sgf__search[b-ez9b18x85x] {
    display: flex;
    gap: 8px;
}
.sgf__search input[b-ez9b18x85x] {
    flex: 1;
    min-width: 0;
    padding: 9px 12px;
    border: 1px solid var(--color-border, #ddd);
    border-radius: 8px;
    font-size: 0.88rem;
    background: var(--color-surface, #fff);
    color: var(--color-text, #1a1a1a);
}
.sgf__search input:focus[b-ez9b18x85x] {
    outline: none;
    border-color: var(--color-accent, #2563eb);
}
.sgf__search button[b-ez9b18x85x] {
    flex-shrink: 0;
    padding: 9px 16px;
    border: none;
    border-radius: 8px;
    background: var(--color-accent, #2563eb);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
.sgf__search button:disabled[b-ez9b18x85x] {
    opacity: 0.55;
    cursor: default;
}

/* 검색 결과 리스트 */
.sgf__list[b-ez9b18x85x] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 280px;
    overflow-y: auto;
}
.sgf__list li[b-ez9b18x85x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--color-border, #e3e3e3);
    border-radius: 10px;
    background: var(--color-surface, #fff);
}
.sgf__list li.is-sel[b-ez9b18x85x] {
    border-color: var(--color-accent, #2563eb);
    background: var(--color-accent-soft, #eff4ff);
}
.sgf__row-info[b-ez9b18x85x] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.sgf__row-main[b-ez9b18x85x] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.sgf__name[b-ez9b18x85x] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-text, #1a1a1a);
    word-break: keep-all;
}
.sgf__type[b-ez9b18x85x] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--color-text-muted, #777);
}
.sgf__row-sub[b-ez9b18x85x] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    font-size: 0.74rem;
    color: var(--color-text-muted, #777);
}
.sgf__src[b-ez9b18x85x] {
    padding: 1px 6px;
    border-radius: 5px;
    background: #f0f0f0;
    font-weight: 600;
}
.sgf__nocoord[b-ez9b18x85x] {
    color: #c0392b;
    font-weight: 700;
}
.sgf__addr[b-ez9b18x85x] {
    color: #999;
    word-break: keep-all;
}
.tabular[b-ez9b18x85x] {
    font-variant-numeric: tabular-nums;
}

.sgf__pick[b-ez9b18x85x] {
    flex-shrink: 0;
    padding: 7px 12px;
    border: 1px solid var(--color-accent, #2563eb);
    border-radius: 8px;
    background: var(--color-surface, #fff);
    color: var(--color-accent, #2563eb);
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}
.sgf__pick:hover[b-ez9b18x85x] {
    background: var(--color-accent-soft, #eff4ff);
}

.sgf__empty[b-ez9b18x85x] {
    margin: 0;
    font-size: 0.82rem;
    color: var(--color-text-muted, #888);
}

/* 점검 권장 (의심군) */
.sgf__suspect[b-ez9b18x85x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px;
    border: 1px solid #f0d9a8;
    border-radius: 12px;
    background: #fdf8ee;
}
.sgf__suspect-head[b-ez9b18x85x] {
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.5;
    color: #8a6d1a;
}
.sgf__list--suspect[b-ez9b18x85x] {
    max-height: 360px;
}

/* 지도 편집기 */
.sgf__editor[b-ez9b18x85x] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 12px;
    border: 1px solid var(--color-border, #e3e3e3);
    border-radius: 12px;
    background: var(--color-surface, #fff);
}
.sgf__editor-head[b-ez9b18x85x] {
    font-size: 0.82rem;
    color: var(--color-text, #1a1a1a);
    line-height: 1.5;
}
.sgf__map[b-ez9b18x85x] {
    width: 100%;
    height: 420px;
    border-radius: 10px;
    overflow: hidden;
    border: 1px solid var(--color-border, #ddd);
    background: #eef1f4;
}
.sgf__editor-foot[b-ez9b18x85x] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}
.sgf__picked[b-ez9b18x85x] {
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--color-text, #1a1a1a);
}
.sgf__picked--none[b-ez9b18x85x] {
    color: var(--color-text-muted, #999);
    font-weight: 600;
}
.sgf__save[b-ez9b18x85x] {
    padding: 9px 18px;
    border: none;
    border-radius: 8px;
    background: var(--color-accent, #2563eb);
    color: #fff;
    font-size: 0.85rem;
    font-weight: 700;
    cursor: pointer;
}
.sgf__save:disabled[b-ez9b18x85x] {
    opacity: 0.5;
    cursor: default;
}

.sgf__msg[b-ez9b18x85x] {
    margin: 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--color-accent-soft, #eff4ff);
    font-size: 0.82rem;
    line-height: 1.5;
    color: var(--color-text, #1a1a1a);
}

@media (max-width: 700px) {
    .sgf__map[b-ez9b18x85x] { height: 320px; }
    .sgf__list li[b-ez9b18x85x] { flex-direction: column; align-items: stretch; }
    .sgf__pick[b-ez9b18x85x] { align-self: flex-end; }
}
/* _content/AptSonpoom/Components/Pages/ChangeRate.razor.rz.scp.css */
/* ChangeRate.razor.css — 변동률 페이지 본문 (scoped).
   디자인 핸드오프(design_handoff_change_rate) "값 그대로" 이식 — nav·footer 는 사이트 셸이 담당, 본문만.
   토큰은 .cr-shell 컴포넌트 스코프 oklch 변수(글로벌 토큰·다른 페이지 영향 0 — /explore 패널 선례).
   상승=빨강(--up hue27) / 하락=파랑(--down hue256) — 한국 컨벤션 일치. */

.cr-shell[b-886xs7a653] {
    --ink: oklch(0.42 0.015 260);
    --head: oklch(0.21 0.02 258);
    --lab: oklch(0.5 0.012 260);
    --mut: oklch(0.6 0.01 250);
    --accent: oklch(0.55 0.17 256);
    --accent-deep: oklch(0.47 0.16 258);
    --accent-soft: oklch(0.95 0.035 256);
    --up: oklch(0.55 0.19 27);
    --down: oklch(0.52 0.16 256);
    --line: oklch(0.92 0.004 250);
    --card: #fff;
    --shadow-s: 0 2px 8px rgba(20, 30, 50, .06), 0 0 0 1px rgba(20, 30, 50, .05);
    --shadow-m: 0 10px 28px rgba(20, 30, 50, .10), 0 0 0 1px rgba(20, 30, 50, .05);

    max-width: var(--container);
    width: 100%;
    margin: 0 auto;
    /* 상단 패딩 0 — 토허제(.permit-shell) 와 동일. 첫 요소인 상단 광고의 자기 margin(24px)만 위 여백이
       되도록 해 광고 상하 여백을 토허제와 맞춤 (2026-06-07). 좌우·하단 패딩은 핸드오프 값 보존. */
    padding: 0 28px 56px;
    color: var(--ink);
    font-family: 'Pretendard', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}
.cr-shell :where(h1, h2, h3)[b-886xs7a653] { margin: 0; }

/* ---------- 페이지 헤더 ---------- */
.cr-head[b-886xs7a653] { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.lt-title[b-886xs7a653] { font-size: 30px; font-weight: 800; color: var(--head); letter-spacing: -.04em; }
.lt-title b[b-886xs7a653] { color: var(--accent); font-weight: 800; }
.lt-sub[b-886xs7a653] { margin-top: 10px; font-size: 14px; font-weight: 500; color: var(--mut); letter-spacing: -.02em; white-space: nowrap; }
.lt-latest[b-886xs7a653] { color: var(--accent-deep); font-weight: 800; }
.cr-head-right[b-886xs7a653] { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cr-legend[b-886xs7a653] { display: flex; align-items: center; gap: 9px; padding: 9px 13px; background: var(--card); border-radius: 12px; box-shadow: var(--shadow-s); }
.lg-lab[b-886xs7a653] { font-size: 12px; font-weight: 700; color: var(--lab); letter-spacing: -.02em; }
.lg-bar[b-886xs7a653] { display: flex; }
.lg-bar i[b-886xs7a653] { width: 22px; height: 13px; }
.lg-bar i:first-child[b-886xs7a653] { border-radius: 4px 0 0 4px; }
.lg-bar i:last-child[b-886xs7a653] { border-radius: 0 4px 4px 0; }

/* ---------- 데이터 의미 가드 ---------- */
.cr-meaning[b-886xs7a653] { margin-top: 14px; padding: 11px 15px; background: oklch(0.972 0.004 250); border: 1px solid var(--line);
    border-radius: 12px; font-size: 12.5px; font-weight: 500; color: var(--lab); letter-spacing: -.02em; line-height: 1.55; }
.cr-meaning b[b-886xs7a653] { font-weight: 800; color: var(--head); }

/* ---------- 통계 카드 ---------- */
.stats[b-886xs7a653] { display: grid; grid-template-columns: repeat(4, 1fr); margin-top: 18px; background: var(--card);
    border-radius: 16px; box-shadow: var(--shadow-s); overflow: hidden; }
.stat[b-886xs7a653] { padding: 18px 22px; }
.stat + .stat[b-886xs7a653] { border-left: 1px solid var(--line); }
.stat-lab[b-886xs7a653] { font-size: 13px; font-weight: 600; color: var(--mut); letter-spacing: -.02em; }
.stat-val[b-886xs7a653] { margin-top: 8px; display: flex; align-items: baseline; gap: 4px; }
.stat-num[b-886xs7a653] { font-size: 27px; font-weight: 800; color: var(--head); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.stat-num.up[b-886xs7a653] { color: var(--up); }
.stat-num.down[b-886xs7a653] { color: var(--down); }
.stat-num.zero[b-886xs7a653] { color: var(--mut); }
.stat-unit[b-886xs7a653] { font-size: 14px; font-weight: 700; color: var(--lab); }
.stat-note[b-886xs7a653] { margin-top: 9px; font-size: 12.5px; font-weight: 600; color: var(--lab); letter-spacing: -.02em; line-height: 1.45; }

/* ---------- 비규제지역 콜아웃 ---------- */
.nonreg[b-886xs7a653] { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-top: 16px; padding: 15px 18px;
    background: oklch(0.972 0.004 250); border: 1px solid var(--line); border-radius: 16px; }
.nr-tag[b-886xs7a653] { font-size: 12.5px; font-weight: 800; color: var(--head); letter-spacing: -.02em; padding: 5px 11px;
    background: #fff; border: 1px solid var(--line); border-radius: 999px; white-space: nowrap; }
.nr-chip[b-886xs7a653] { display: inline-flex; align-items: center; gap: 10px; height: 40px; padding: 0 8px 0 15px; border-radius: 999px; }
.nr-name[b-886xs7a653] { font-size: 14.5px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; }
.nr-v[b-886xs7a653] { display: inline-flex; align-items: center; gap: 4px; font-size: 15px; font-weight: 800; letter-spacing: -.01em;
    font-variant-numeric: tabular-nums; padding: 4px 11px 4px 9px; background: rgba(255, 255, 255, .32); border-radius: 999px; }
.nr-note[b-886xs7a653] { margin-left: auto; font-size: 12.5px; font-weight: 600; color: var(--mut); letter-spacing: -.02em; }

/* ---------- 지역 탭 ---------- */
.region-tabs[b-886xs7a653] { display: flex; gap: 6px; overflow-x: auto; margin-top: 26px; padding-bottom: 12px;
    border-bottom: 1px solid var(--line); scrollbar-width: thin; }
.region-tabs[b-886xs7a653]::-webkit-scrollbar { height: 6px; }
.region-tabs[b-886xs7a653]::-webkit-scrollbar-thumb { background: var(--line); border-radius: 3px; }
.gt[b-886xs7a653] { flex: 0 0 auto; height: 32px; padding: 0 13px; border: 1px solid var(--line); border-radius: 9px; background: #fff;
    white-space: nowrap; font-family: inherit; font-size: 13px; font-weight: 700; color: var(--lab); letter-spacing: -.02em;
    cursor: pointer; transition: border-color .14s, color .14s; }
.gt:hover[b-886xs7a653] { border-color: color-mix(in oklch, var(--accent), transparent 55%); color: var(--accent-deep); }
.gt.on[b-886xs7a653] { border-color: var(--accent); background: var(--accent); color: #fff; }
.gt.sudo:not(.on)[b-886xs7a653] { background: #fff; color: var(--accent-deep); border-color: color-mix(in oklch, var(--accent), transparent 62%); }

/* ---------- 필터 행 ---------- */
.cr-filter[b-886xs7a653] { display: flex; align-items: center; gap: 16px; margin-top: 16px; flex-wrap: wrap; }
.cr-right[b-886xs7a653] { margin-left: auto; display: inline-flex; gap: 10px; flex-wrap: wrap; }
.segsm[b-886xs7a653] { display: inline-flex; gap: 5px; padding: 4px; background: oklch(0.96 0.004 250); border-radius: 11px; }
.segsm.period[b-886xs7a653] { padding: 5px; background: oklch(0.95 0.006 250); }
.segsm-btn[b-886xs7a653] { height: 30px; padding: 0 13px; border: none; border-radius: 8px; background: transparent; font-family: inherit;
    font-size: 12.5px; font-weight: 700; color: var(--mut); cursor: pointer; transition: color .15s, box-shadow .15s; white-space: nowrap; }
.segsm.period .segsm-btn[b-886xs7a653] { height: 34px; padding: 0 18px; font-size: 14px; }
.segsm-btn:hover[b-886xs7a653] { color: var(--accent-deep); }
.segsm-btn.on[b-886xs7a653] { background: #fff; color: var(--accent-deep); box-shadow: var(--shadow-s); }
.segsm-btn:disabled[b-886xs7a653] { opacity: .4; cursor: not-allowed; }
.segsm-btn:disabled:hover[b-886xs7a653] { color: var(--mut); }

/* ---------- 순위 리스트 (다이버징 막대) ---------- */
.cr-rl[b-886xs7a653] { margin-top: 16px; background: var(--card); border-radius: 16px; box-shadow: var(--shadow-s); overflow: hidden; }
.rl-row[b-886xs7a653] { display: grid; grid-template-columns: 34px 150px 1fr 92px; align-items: center; gap: 16px; padding: 0 20px; height: 52px; transition: background .12s; }
.rl-row + .rl-row[b-886xs7a653] { border-top: 1px solid oklch(0.955 0.004 250); }
.rl-row:hover[b-886xs7a653] { background: oklch(0.985 0.004 250); }
.rl-rank[b-886xs7a653] { font-size: 13.5px; font-weight: 700; color: var(--mut); text-align: center; font-variant-numeric: tabular-nums; }
.rl-name[b-886xs7a653] { font-size: 15px; font-weight: 700; color: var(--head); letter-spacing: -.03em; display: flex; align-items: baseline; gap: 5px; white-space: nowrap; }
.rl-city[b-886xs7a653] { font-style: normal; font-size: 12px; font-weight: 600; color: var(--mut); }
.rl-est[b-886xs7a653] { color: var(--down); font-size: 11px; font-weight: 800; }
.rl-track[b-886xs7a653] { position: relative; height: 22px; }
.rl-zero[b-886xs7a653] { position: absolute; left: 50%; top: 2px; bottom: 2px; width: 1.5px; transform: translateX(-50%); background: oklch(0.86 0.006 250); border-radius: 1px; }
.rl-fill[b-886xs7a653] { position: absolute; top: 4px; bottom: 4px; border-radius: 4px; transition: width .5s cubic-bezier(.2, .7, .2, 1); }
.rl-fill.up[b-886xs7a653] { border-radius: 0 4px 4px 0; }
.rl-fill.down[b-886xs7a653] { border-radius: 4px 0 0 4px; }
.rl-val[b-886xs7a653] { justify-self: end; display: inline-flex; align-items: center; gap: 4px; height: 30px; padding: 0 12px; border-radius: 9px;
    font-size: 14px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rl-val .trend[b-886xs7a653] { margin-right: 1px; }

.cr-empty[b-886xs7a653] { margin-top: 16px; padding: 40px; text-align: center; font-size: 14px; color: var(--mut); background: var(--card);
    border-radius: 16px; box-shadow: var(--shadow-s); }

/* ---------- 히트맵 그리드 ---------- */
.hg[b-886xs7a653] { margin-top: 16px; display: flex; flex-direction: column; gap: 22px; }
.hg-glab[b-886xs7a653] { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 800; color: var(--head); letter-spacing: -.02em; margin-bottom: 11px; }
.hg-glab span[b-886xs7a653] { font-size: 11.5px; font-weight: 700; color: var(--mut); background: var(--card); border: 1px solid var(--line); border-radius: 999px; padding: 2px 9px; }
.hg-tiles[b-886xs7a653] { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 9px; }
.hg-tile[b-886xs7a653] { display: flex; flex-direction: column; gap: 6px; padding: 13px 14px; border-radius: 13px; min-height: 74px; }
.hg-gu[b-886xs7a653] { font-size: 13.5px; font-weight: 700; letter-spacing: -.03em; line-height: 1.2; }
.hg-v[b-886xs7a653] { font-size: 18px; font-weight: 800; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }

.trend.up[b-886xs7a653], .trend.down[b-886xs7a653], .trend.flat[b-886xs7a653] { color: inherit; }

/* ---------- 지도 (JS 동적 생성 — scoped 속성 미부여라 ::deep. 핸드오프 값 그대로) ---------- */
.cr-map-host[b-886xs7a653] { margin-top: 16px; }
.cr-map-host[b-886xs7a653]  .mapwrap { padding: 24px 20px 26px; background: var(--card); border-radius: 16px; box-shadow: var(--shadow-s); overflow-x: auto; }
.cr-map-host[b-886xs7a653]  .mapbox { position: relative; margin: 0 auto; }
.cr-map-host[b-886xs7a653]  .mzone { position: absolute; border: 1.5px dashed oklch(0.86 0.01 256); border-radius: 16px; background: oklch(0.975 0.006 256 / .5); z-index: 0; }
.cr-map-host[b-886xs7a653]  .mzlab { position: absolute; top: 9px; left: 12px; font-size: 11px; font-weight: 800; letter-spacing: .04em; color: var(--mut); z-index: 3; pointer-events: none; }
.cr-map-host[b-886xs7a653]  .mzlab.gg { top: 0; }
.cr-map-host[b-886xs7a653]  .mtile { position: absolute; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 3px; border-radius: 11px; transition: opacity .2s, filter .2s; cursor: default; }
.cr-map-host[b-886xs7a653]  .mtile:hover { z-index: 4; transform: scale(1.07); transition: transform .12s; }
.cr-map-host[b-886xs7a653]  .mt-n { font-size: 11.5px; font-weight: 700; letter-spacing: -.04em; line-height: 1; text-align: center; white-space: nowrap; }
.cr-map-host[b-886xs7a653]  .mt-v { font-size: 12px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 1; }
.cr-map-host[b-886xs7a653]  .mtile.dim { opacity: .2; filter: grayscale(.55); }
.cr-map-host[b-886xs7a653]  .mtile.sido { border-radius: 14px; gap: 5px; }
.cr-map-host[b-886xs7a653]  .mtile.sido .mt-n { font-size: 16px; font-weight: 800; }
.cr-map-host[b-886xs7a653]  .mtile.sido .mt-v { font-size: 17px; }
.cr-map-host[b-886xs7a653]  .mtile.click { cursor: pointer; transition: transform .1s; }
.cr-map-host[b-886xs7a653]  .mtile.click:hover { transform: scale(1.05); }

.cr-map-host[b-886xs7a653]  .mapwrap.geo { padding: 14px 16px 16px; }
.cr-map-host[b-886xs7a653]  .geo-bar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 0 2px 10px; }
.cr-map-host[b-886xs7a653]  .geo-info { display: flex; align-items: center; gap: 10px; min-height: 34px; flex: 1; min-width: 200px; }
.cr-map-host[b-886xs7a653]  .gi-name { font-size: 16px; font-weight: 800; color: var(--head); letter-spacing: -.03em; }
.cr-map-host[b-886xs7a653]  .gi-val { font-size: 14px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; padding: 4px 11px; border-radius: 9px; }
.cr-map-host[b-886xs7a653]  .gi-sub { font-size: 12px; font-weight: 700; color: var(--mut); }
.cr-map-host[b-886xs7a653]  .gi-demo { font-size: 11px; font-weight: 800; color: oklch(0.5 0.02 260); background: oklch(0.93 0.006 250); padding: 3px 8px; border-radius: 999px; letter-spacing: .02em; }
.cr-map-host[b-886xs7a653]  .gi-hint { font-size: 13px; font-weight: 500; color: var(--mut); letter-spacing: -.02em; }
.cr-map-host[b-886xs7a653]  .geo-ctrl { display: inline-flex; align-items: center; gap: 6px; }
.cr-map-host[b-886xs7a653]  .gc-btn { width: 32px; height: 32px; border: 1px solid var(--line); border-radius: 9px; background: #fff; font-family: inherit; font-size: 18px; font-weight: 600; color: var(--lab); cursor: pointer; line-height: 1; display: inline-flex; align-items: center; justify-content: center; transition: all .15s; }
.cr-map-host[b-886xs7a653]  .gc-btn:hover { border-color: var(--accent); color: var(--accent-deep); background: var(--accent-soft); }
.cr-map-host[b-886xs7a653]  .gc-btn.reset { font-size: 15px; }
.cr-map-host[b-886xs7a653]  .gc-zoom { min-width: 46px; text-align: center; font-size: 12.5px; font-weight: 700; color: var(--lab); font-variant-numeric: tabular-nums; }
.cr-map-host[b-886xs7a653]  .geo-main { display: flex; gap: 16px; align-items: stretch; height: 700px; }
.cr-map-host[b-886xs7a653]  .geo-stage { background: oklch(0.985 0.004 250); border-radius: 12px; overflow: hidden; box-shadow: inset 0 0 0 1px var(--line); }
.cr-map-host[b-886xs7a653]  .geo-stage.nat { flex: 1 1 auto; min-width: 0; height: 100%; background: linear-gradient(180deg, oklch(0.98 0.006 240), oklch(0.965 0.008 235)); }
.cr-map-host[b-886xs7a653]  .geo-svg { display: block; width: 100%; height: 100%; }
.cr-map-host[b-886xs7a653]  .geo-side { flex: 0 0 280px; display: flex; flex-direction: column; background: var(--card); border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; min-height: 0; }
.cr-map-host[b-886xs7a653]  .gs-head { display: flex; align-items: center; gap: 8px; padding: 13px 15px 11px; border-bottom: 1px solid var(--line); }
.cr-map-host[b-886xs7a653]  .gs-title { font-size: 14px; font-weight: 800; color: var(--head); letter-spacing: -.02em; white-space: nowrap; }
.cr-map-host[b-886xs7a653]  .gs-count { font-size: 11.5px; font-weight: 700; color: var(--mut); background: oklch(0.96 0.004 250); border-radius: 999px; padding: 2px 9px; }
.cr-map-host[b-886xs7a653]  .gs-list { flex: 1; overflow-y: auto; padding: 4px 0; min-height: 0; }
.cr-map-host[b-886xs7a653]  .gs-row { display: grid; grid-template-columns: 22px 1fr 70px 64px; align-items: center; gap: 8px; padding: 0 13px; height: 38px; cursor: pointer; transition: background .12s; }
.cr-map-host[b-886xs7a653]  .gs-row:hover, .cr-map-host[b-886xs7a653]  .gs-row.on { background: var(--accent-soft); }
.cr-map-host[b-886xs7a653]  .gs-row.focus { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--accent); }
.cr-map-host[b-886xs7a653]  .gs-row.dim { opacity: .32; }
.cr-map-host[b-886xs7a653]  .gs-rank { font-size: 11.5px; font-weight: 700; color: var(--mut); text-align: center; font-variant-numeric: tabular-nums; }
.cr-map-host[b-886xs7a653]  .gs-name { font-size: 13px; font-weight: 700; color: var(--head); letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; }
.cr-map-host[b-886xs7a653]  .gs-demo { font-style: normal; font-size: 9.5px; font-weight: 800; color: oklch(0.55 0.015 260); background: oklch(0.94 0.005 250); border-radius: 4px; padding: 1px 4px; }
.cr-map-host[b-886xs7a653]  .gs-bar { position: relative; height: 16px; }
.cr-map-host[b-886xs7a653]  .gs-zero { position: absolute; left: 50%; top: 1px; bottom: 1px; width: 1.5px; transform: translateX(-50%); background: oklch(0.88 0.006 250); }
.cr-map-host[b-886xs7a653]  .gs-fill { position: absolute; top: 3px; bottom: 3px; border-radius: 3px; }
.cr-map-host[b-886xs7a653]  .gs-val { justify-self: end; font-size: 12px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; text-align: center; padding: 3px 0; border-radius: 7px; width: 100%; }
.cr-map-host[b-886xs7a653]  .gs-foot { padding: 9px 14px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 600; color: var(--mut); letter-spacing: -.02em; }
.cr-map-host[b-886xs7a653]  .geo-foot { margin-top: 10px; }
.cr-map-host[b-886xs7a653]  .geo-note { font-size: 11.5px; font-weight: 600; color: var(--mut); letter-spacing: -.02em; line-height: 1.5; }
.cr-map-host[b-886xs7a653]  .geo-note b { color: var(--lab); font-weight: 800; }
.cr-map-host[b-886xs7a653]  .geo-note.warn { display: block; margin-bottom: 12px; padding: 9px 13px; border-radius: 10px; background: oklch(0.96 0.04 70); color: oklch(0.45 0.09 60); box-shadow: inset 0 0 0 1px oklch(0.88 0.06 70); }
.cr-map-host[b-886xs7a653]  .geo-loading { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; min-height: 480px; }
.cr-map-host[b-886xs7a653]  .geo-spin { width: 34px; height: 34px; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--accent); animation: crGeoSpin-b-886xs7a653 .8s linear infinite; }
.cr-map-host[b-886xs7a653]  .geo-lt { font-size: 14.5px; font-weight: 700; color: var(--head); letter-spacing: -.02em; }
.cr-map-host[b-886xs7a653]  .geo-ls { font-size: 12.5px; font-weight: 500; color: var(--mut); letter-spacing: -.02em; }
@keyframes crGeoSpin-b-886xs7a653 { to { transform: rotate(360deg); } }
/* 변동순위 클릭으로 이동한 지역 이름표 깜빡 — 어디인지 분간되게. */
@keyframes crFlash-b-886xs7a653 { 0%, 100% { opacity: 1; } 30%, 70% { opacity: 0.08; } }

/* ---------- 출처 ---------- */
.cr-src[b-886xs7a653] { margin-top: 22px; font-size: 12px; line-height: 1.6; color: var(--mut); letter-spacing: -.02em; }

/* ---------- 반응형 ---------- */
@media (max-width: 860px) {
    .stats[b-886xs7a653] { grid-template-columns: repeat(2, 1fr); }
    .stat:nth-child(3)[b-886xs7a653] { border-left: none; }
    .stat:nth-child(3)[b-886xs7a653], .stat:nth-child(4)[b-886xs7a653] { border-top: 1px solid var(--line); }
    .cr-right[b-886xs7a653] { margin-left: 0; width: 100%; }
    .cr-map-host[b-886xs7a653]  .geo-main { flex-direction: column; height: auto; }
    .cr-map-host[b-886xs7a653]  .geo-stage.nat { height: 460px; }
    .cr-map-host[b-886xs7a653]  .geo-side { flex: 0 0 auto; max-height: 320px; }
}
@media (max-width: 640px) {
    .cr-shell[b-886xs7a653] { padding: 0 16px 44px; }
    .lt-title[b-886xs7a653] { font-size: 23px; }
    .lt-sub[b-886xs7a653] { white-space: normal; }
    .nr-note[b-886xs7a653] { display: none; }
    .rl-row[b-886xs7a653] { grid-template-columns: 26px 1fr 86px; gap: 11px; }
    .rl-track[b-886xs7a653] { display: none; }
}
/* _content/AptSonpoom/Components/Pages/DanjiPage.razor.rz.scp.css */
/* ============================================================================
   Danji — /danji/{Id} PC 케이스 (1280~1920).
   모바일 케이스는 content-mobile-dev 가 @media 로 추가.
   정본: .claude/docs/content/danji-detail.md
   ========================================================================== */

.danji-page__container[b-nsw88tl7mc] {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
}

/* 역세권 섹션 anchor (#stations) — sticky 헤더 보정만 (보너스 X, content-pc-dev §5). */
#stations[b-nsw88tl7mc] {
    scroll-margin-top: var(--header-h);
}

/* === 빈 상태 — Soft 404 ============================================== */
/* 2026-05-26 chrome 톤업 — 카드 박스 (bg-warm + radius-lg) 안에 가운데 정렬. */

.danji-empty[b-nsw88tl7mc] {
    text-align: center;
    padding: 64px 24px;
    max-width: 720px;
    margin: 48px auto;
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.danji-empty__title[b-nsw88tl7mc] {
    font-size: clamp(1.5rem, 2.5vw, 2rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    margin: 0 0 24px 0;
    word-break: keep-all;
}

.danji-empty__body[b-nsw88tl7mc] {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0 0 8px 0;
}

.danji-empty__cta[b-nsw88tl7mc] {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

/* === 1. 페이지 헤더 ============================================== */
/* 2026-05-26 chrome 톤업 — 분리선 제거 + 박스 그라데이션 (Home Hero 일관). */

.danji-head[b-nsw88tl7mc] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 32px;
    padding: 32px 36px;
    margin: 24px 0 32px;
    background: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-surface) 60%, var(--color-bg-warm) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.danji-head__left[b-nsw88tl7mc] {
    min-width: 0;
}

.danji-head__eyebrow[b-nsw88tl7mc] {
    display: block;
    color: var(--color-accent);
    margin-bottom: 10px;
}

.danji-head__sublink[b-nsw88tl7mc] {
    display: inline-block;
    font-size: 0.9rem;
    color: var(--color-accent);
    text-decoration: none;
    margin-bottom: 8px;
    transition: color 0.15s ease, text-decoration-thickness 0.15s ease;
}

    .danji-head__sublink:hover[b-nsw88tl7mc] {
        color: var(--color-accent-hover);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .danji-head__sublink:focus-visible[b-nsw88tl7mc] {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
        border-radius: 2px;
    }

.danji-head__title[b-nsw88tl7mc] {
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.25;
    word-break: keep-all;
    margin: 0 0 12px 0;
}

.danji-head__lead[b-nsw88tl7mc] {
    font-size: 1.05rem;
    color: var(--color-text-muted);
    line-height: 1.6;
    max-width: 640px;
    margin: 0 0 12px 0;
}

/* M2-3.1 (2026-05-30) — 호갱노노식 단지 chip 정렬 줄.
   .danji-head__lead 와 .danji-head__source 사이에 박힘. flex wrap 으로 모바일 자동 줄바꿈. */
.danji-head__chips[b-nsw88tl7mc] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 8px;
    margin: 12px 0;
}

.danji-chip[b-nsw88tl7mc] {
    display: inline-flex;
    align-items: center;
    padding: 4px 10px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.8rem;
    color: var(--color-text);
    white-space: nowrap;
}

.danji-chip--accent[b-nsw88tl7mc] {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-accent);
    font-weight: 600;
}

.danji-head__source[b-nsw88tl7mc] {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.7;
}

.danji-head__right[b-nsw88tl7mc] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    max-width: 320px;
    text-align: right;
}

.danji-head__badge-group[b-nsw88tl7mc] {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
}

/* M4 — 관심 단지 토글 (큰 variant). 배지 stack 위에 위치 (정본 §8-4 A 안).
   M8 — CompareToggle 을 옆에 배치 (inline-flex + gap). */
.danji-head__favorite[b-nsw88tl7mc] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    justify-content: flex-end;
    margin-bottom: 4px;
}

[b-nsw88tl7mc] .danji-head__badge {
    height: auto;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.78rem;
}

[b-nsw88tl7mc] .danji-head__badge--sample.mud-chip-filled {
    background-color: var(--color-accent-soft);
    color: var(--color-accent);
    border: 1px solid var(--color-accent-soft);
}

[b-nsw88tl7mc] .danji-head__badge--muted.mud-chip-outlined {
    background-color: var(--color-surface-alt);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    font-variant-numeric: tabular-nums;
}

.danji-head__badge-hint[b-nsw88tl7mc] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.55;
    max-width: 280px;
}

/* === 카드 공통 (기본 정보 / 평형 / 실거래) ============================================== */

.danji-card[b-nsw88tl7mc] {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 24px;
    margin-block-end: 24px;
}

.danji-card__title[b-nsw88tl7mc] {
    font-size: clamp(1.2rem, 2vw, 1.5rem);
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.3;
    margin: 0 0 20px 0;
}

.danji-card__empty[b-nsw88tl7mc] {
    /* 2026-05-26 chrome 톤업 — 안내 카드 안의 빈 상태 인너 박스 */
    padding: 20px 22px;
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 0.95rem;
    line-height: 1.65;
    margin: 0;
}

.danji-card__notes[b-nsw88tl7mc] {
    padding: 16px 0 0;
    line-height: 1.7;
    margin-top: 12px;
    border-top: 1px solid var(--color-border);
}

    .danji-card__notes .source-line[b-nsw88tl7mc] {
        margin: 0 0 4px 0;
        font-size: 0.85rem;
        color: var(--color-text-muted);
    }

/* === 2. 기본 정보 그리드 ============================================== */

.danji-info-grid[b-nsw88tl7mc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
    margin: 0;
}

.danji-info-grid__row[b-nsw88tl7mc] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 12px 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

    .danji-info-grid__row:nth-last-child(-n+2)[b-nsw88tl7mc] {
        border-bottom: none;
    }

.danji-info-grid__label[b-nsw88tl7mc] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0;
}

.danji-info-grid__value[b-nsw88tl7mc] {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    margin: 0;
    word-break: keep-all;
}

/* === 3. 평형 정보 표 ============================================== */

.danji-unit-table[b-nsw88tl7mc] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.95rem;
}

    .danji-unit-table thead th[b-nsw88tl7mc] {
        background: var(--color-surface-alt);
        color: var(--color-text);
        font-weight: 600;
        font-size: 0.9rem;
        padding: 12px 16px;
        border-bottom: 1px solid var(--color-border);
    }

    .danji-unit-table tbody td[b-nsw88tl7mc] {
        padding: 12px 16px;
        border-bottom: 1px solid var(--color-border);
        color: var(--color-text);
        vertical-align: middle;
    }

    .danji-unit-table tbody tr:last-child td[b-nsw88tl7mc] {
        border-bottom: none;
    }

.danji-unit-table__th--left[b-nsw88tl7mc] {
    text-align: left;
}

.danji-unit-table__th--right[b-nsw88tl7mc] {
    text-align: right;
}

.danji-unit-table__td--left[b-nsw88tl7mc] {
    text-align: left;
}

.danji-unit-table__td--right[b-nsw88tl7mc] {
    text-align: right;
}

/* tabular-nums 강제 (CLAUDE.md 도메인 룰 §5) */
.tabular[b-nsw88tl7mc] {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* === 4. 실거래 DataGrid ============================================== */

.danji-tx__grid[b-nsw88tl7mc] {
    margin-bottom: 8px;
}

/* MudDataGrid 톤 강제 — Elevation 0 + hairline + tabular-nums (M1 패턴 일관) */
[b-nsw88tl7mc] .danji-tx__grid .mud-data-grid {
    box-shadow: none !important;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
}

[b-nsw88tl7mc] .danji-tx__grid .mud-table-head .mud-table-cell {
    background: var(--color-surface-alt);
    color: var(--color-text);
    font-weight: 600;
    font-size: 0.9rem;
    border-bottom: 1px solid var(--color-border);
    padding: 12px 16px;
}

[b-nsw88tl7mc] .danji-tx__grid .mud-table-cell {
    padding: 12px 16px;
    font-size: 0.95rem;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
    vertical-align: middle;
}

[b-nsw88tl7mc] .danji-tx__grid .mud-table-body .mud-table-row:hover {
    background: var(--color-surface-alt);
}

[b-nsw88tl7mc] .danji-tx__grid .tabular,
[b-nsw88tl7mc] .danji-tx__grid .mud-table-cell.tabular,
[b-nsw88tl7mc] .danji-tx__grid .mud-table-cell .tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

[b-nsw88tl7mc] .danji-tx__grid .danji-tx__cell--right {
    text-align: right;
}

[b-nsw88tl7mc] .danji-tx__grid .danji-tx__cell--amount {
    font-weight: 600;
}

/* M1.8 — 해제된 거래의 금액 셀: 취소선 + 회색 톤 + 가중치 normal (강조 해제). */
[b-nsw88tl7mc] .danji-tx__grid .danji-tx__amount--cancelled {
    color: var(--color-text-muted);
    font-weight: 500;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* "해제" 작은 회색 chip — 한국 컨벤션상 무효는 채도 낮은 회색. */
[b-nsw88tl7mc] .danji-tx__grid .danji-tx__cancelled-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 0 6px;
    height: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface-alt, #f4f4f5);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
}

/* === 전월세 이력 — 보증금·월세 금액 + 계약구분 배지 === */
/* 보증금/월세 = 가격이라 코랄레드 강조 (매매 거래금액과 동일 가격색). */
[b-nsw88tl7mc] .danji-tx__grid .danji-rent__amount {
    color: var(--color-price);
    font-weight: 700;
}

/* 계약구분 (신규/갱신) — 회색 알약 배지 (매수/매도 party chip 톤). */
[b-nsw88tl7mc] .danji-tx__grid .danji-rent__contract-badge {
    display: inline-flex;
    align-items: center;
    padding: 1px 8px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface-alt, #f4f4f5);
    color: var(--color-text-muted);
    font-size: 0.72rem;
    font-weight: 500;
    line-height: 1.4;
}

[b-nsw88tl7mc] .danji-tx__grid .danji-rent__contract-none {
    color: var(--color-text-muted);
}

/* 헤더 셀 — 컬럼명 + info tooltip 아이콘 inline (M1 패턴 일관) */
[b-nsw88tl7mc] .danji-tx__header {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

[b-nsw88tl7mc] .danji-tx__header-info {
    color: var(--color-text-muted);
    width: 16px;
    height: 16px;
    cursor: help;
}

    [b-nsw88tl7mc] .danji-tx__header-info:hover {
        color: var(--color-accent);
    }

/* 페이저 (M1 패턴 일관) */
[b-nsw88tl7mc] .danji-tx__grid .mud-table-pagination {
    border-top: 1px solid var(--color-border);
    background: var(--color-surface);
}

[b-nsw88tl7mc] .danji-tx__grid .mud-table-pagination-toolbar {
    color: var(--color-text-muted);
    font-size: 0.85rem;
}

[b-nsw88tl7mc] .danji-tx__grid .mud-table-page-number-information {
    font-variant-numeric: tabular-nums;
}

/* 빈 상태 (실거래 0건) */
.danji-tx__empty[b-nsw88tl7mc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    padding: 48px 24px;
    color: var(--color-text-muted);
    text-align: center;
}

.danji-tx__empty-title[b-nsw88tl7mc] {
    color: var(--color-text);
    font-weight: 600;
    margin: 0;
    font-size: 1rem;
}

.danji-tx__empty-list[b-nsw88tl7mc] {
    margin: 0;
    padding-left: 20px;
    line-height: 1.7;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    text-align: left;
    max-width: 480px;
}

/* === 4-bis. 시세 추이 (M3 — price-trend.md) ============================================== */
/* PC 케이스 (1280~1920). 모바일은 content-mobile-dev 가 후속. */

.danji-trend__header[b-nsw88tl7mc] {
    margin-bottom: 16px;
}

.danji-trend__lead[b-nsw88tl7mc] {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin: 0;
    max-width: 640px;
}

/* M2-3.3 (2026-05-30) — 호갱노노식 헤더 큰 평균가 hero.
   .danji-trend__hero = 헤더 안 박스 (range chip 위, lead 아래).
   .danji-trend__hero-price = clamp 큰 폰트 + tabular-nums (자릿수 정렬).
   .danji-trend__hero-variance = inline 변동률 + 다중 감각 (▲/▼ + 색 + 텍스트). */
.danji-trend__hero[b-nsw88tl7mc] {
    margin-top: 14px;
    padding: 12px 16px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    max-width: 480px;
}

.danji-trend__hero-meta[b-nsw88tl7mc] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.danji-trend__hero-row[b-nsw88tl7mc] {
    display: flex;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.danji-trend__hero-price[b-nsw88tl7mc] {
    font-size: clamp(1.6rem, 4vw, 2.2rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.1;
}

.danji-trend__hero-variance[b-nsw88tl7mc] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.95rem;
    font-weight: 600;
}

/* 상승·하락 색은 글로벌 토큰. signal-up / signal-down 클래스가 VarianceClass 헬퍼로 박힘. */
.danji-trend__hero-variance.signal-up[b-nsw88tl7mc] {
    color: var(--color-up);
}

.danji-trend__hero-variance.signal-down[b-nsw88tl7mc] {
    color: var(--color-down);
}

.danji-trend__hero-variance-icon[b-nsw88tl7mc] {
    font-size: 0.9rem;
}

.danji-trend__hero-variance-period[b-nsw88tl7mc] {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-text-muted);
    margin-left: 2px;
}

/* 지역 평당가 비교 카드의 막대 시각은 공용 컴포넌트로 이전됨 →
   Components/Shared/DanjiSections/RegionCompareBars.razor(.css). */
/* M2-3.6 (2026-05-31) — 거래 비용 안내 카드. 입력 + 결과 3행 + 면책.
   PC + 모바일 자연 처리 (input 폭은 자동). */
.cost-calc__input-row[b-nsw88tl7mc] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 16px 0;
}

.cost-calc__input-label[b-nsw88tl7mc] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.cost-calc__input-wrap[b-nsw88tl7mc] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 1;
    max-width: 280px;
}

.cost-calc__input-field[b-nsw88tl7mc] {
    flex: 1;
    padding: 8px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font: inherit;
    font-size: 1rem;
    color: var(--color-text);
    text-align: right;
}

.cost-calc__input-field:focus[b-nsw88tl7mc] {
    outline: 2px solid transparent;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.cost-calc__input-unit[b-nsw88tl7mc] {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.cost-calc__rows[b-nsw88tl7mc] {
    list-style: none;
    margin: 12px 0;
    padding: 0;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.cost-calc__row[b-nsw88tl7mc] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--color-surface);
    font-size: 0.9rem;
}

.cost-calc__row + .cost-calc__row[b-nsw88tl7mc] {
    border-top: 1px solid var(--color-border);
}

.cost-calc__row-label[b-nsw88tl7mc] {
    color: var(--color-text-muted);
}

.cost-calc__row-value[b-nsw88tl7mc] {
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.cost-calc__row--total[b-nsw88tl7mc] {
    background: var(--color-surface-alt);
}

.cost-calc__row--total .cost-calc__row-label[b-nsw88tl7mc],
.cost-calc__row--total .cost-calc__row-value[b-nsw88tl7mc] {
    color: var(--color-text);
    font-weight: 700;
    font-size: 1rem;
}

/* 모바일 — input wrap 폭 자동 + 행 폰트 축소. */
@media (max-width: 43.75em) {
    .cost-calc__input-row[b-nsw88tl7mc] {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
    }

    .cost-calc__input-wrap[b-nsw88tl7mc] {
        max-width: none;
    }

    .cost-calc__row[b-nsw88tl7mc] {
        font-size: 0.8125rem;
        padding: 10px 12px;
    }
}

/* 범위 칩셋 — 1년 / 3년 / 5년 / 전체 (호갱노노 톤, 차트 위 1차 컨트롤) */
[b-nsw88tl7mc] .danji-trend__range-chips {
    margin-block-start: 16px;
    margin-block-end: 8px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

[b-nsw88tl7mc] .danji-trend__range-chips .mud-chip {
    height: auto;
    border-radius: 999px;
    padding: 5px 14px;
    font-size: 0.875rem;
    font-weight: 500;
    background: var(--color-surface);
    color: var(--color-text-muted);
    border: 1px solid var(--color-border);
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

[b-nsw88tl7mc] .danji-trend__range-chips .mud-chip:hover {
    border-color: var(--color-accent);
    color: var(--color-text);
}

[b-nsw88tl7mc] .danji-trend__range-chips .mud-chip.mud-chip-selected,
[b-nsw88tl7mc] .danji-trend__range-chips .mud-chip[aria-pressed="true"] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
    font-weight: 600;
}

[b-nsw88tl7mc] .danji-trend__range-chips .mud-chip:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

[b-nsw88tl7mc] .danji-trend__chips {
    margin-block-start: 4px;
    margin-block-end: 16px;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* 비활성 / 활성 칩 톤 — 우리 토큰 강제 (CLAUDE.md MudBlazor 톤 오버라이드) */
[b-nsw88tl7mc] .danji-trend__chips .mud-chip {
    height: auto;
    border-radius: 999px;
    padding: 6px 14px;
    font-size: 0.9rem;
    font-weight: 500;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    transition: border-color 0.15s ease, background 0.15s ease;
}

[b-nsw88tl7mc] .danji-trend__chips .mud-chip:hover {
    border-color: var(--color-accent);
}

[b-nsw88tl7mc] .danji-trend__chips .mud-chip.mud-chip-selected,
[b-nsw88tl7mc] .danji-trend__chips .mud-chip[aria-pressed="true"] {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    color: var(--color-text);
    font-weight: 600;
}

[b-nsw88tl7mc] .danji-trend__chips .mud-chip:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
}

.danji-trend__loading[b-nsw88tl7mc] {
    margin-block: 24px;
}

.danji-trend__chart[b-nsw88tl7mc] {
    margin-block: 16px 12px;
    width: 100%;
    /* ApexChart 가 자체적으로 부모 폭 채움 + height 320 옵션 기반. CSS 강제 사이즈 X. */
}

/* ApexChart 톤 강제 — 라이브러리 기본 스타일 보정. */
[b-nsw88tl7mc] .danji-trend__chart .apexcharts-canvas {
    margin-inline: auto;
}

/* ApexChart 의 tooltip 톤 (호갱노노 매칭) — top 상단 고정(!important 가 inline top 덮음) → 박스는 위에 붙고
   left 는 ApexCharts 가 마우스 X 로 갱신 = 가로만 따라감. 2026-06-05 사용자 요청.
   ※ 박스 높이 축소는 점·글씨 정렬을 깨뜨려 제거 — 내부 레이아웃은 라이브러리 기본값 유지("안되면 높이 줄이지마"). */
[b-nsw88tl7mc] .danji-trend__chart .apexcharts-tooltip {
    top: 6px !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 9px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08) !important;
    color: var(--color-text) !important;
}

[b-nsw88tl7mc] .danji-trend__chart .apexcharts-tooltip-title {
    background: var(--color-bg-warm) !important;
    border-bottom: 1px solid var(--color-border) !important;
    font-weight: 600 !important;
}

.danji-trend__caption[b-nsw88tl7mc] {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    line-height: 1.7;
    margin-block-end: 24px;
}

    .danji-trend__caption p[b-nsw88tl7mc] {
        margin: 0;
    }

/* 변동률 카드 2개 — PC 가로 2컬럼 */
.danji-trend__variance[b-nsw88tl7mc] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-block: 8px 16px;
}

.danji-trend__var-card[b-nsw88tl7mc] {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 16px 20px;
    background: var(--color-surface-alt);
}

.danji-trend__var-label[b-nsw88tl7mc] {
    font-size: 0.875rem;
    color: var(--color-text-muted);
    margin-bottom: 6px;
}

.danji-trend__var-value[b-nsw88tl7mc] {
    font-size: clamp(1.4rem, 2.2vw, 1.75rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
}

    .danji-trend__var-value.signal-up[b-nsw88tl7mc] {
        color: var(--color-up);
    }

    .danji-trend__var-value.signal-down[b-nsw88tl7mc] {
        color: var(--color-down);
    }

.danji-trend__var-icon[b-nsw88tl7mc] {
    font-size: 0.85em;
    line-height: 1;
}

.danji-trend__var-sub[b-nsw88tl7mc] {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    margin-top: 6px;
    font-variant-numeric: tabular-nums;
}

/* 빈 상태 (12개월 거래 0건 또는 모든 월 표본 부족) */
.danji-trend__empty[b-nsw88tl7mc] {
    padding: 48px 24px;
    text-align: center;
    color: var(--color-text-muted);
    margin-block: 16px;
}

.danji-trend__empty-title[b-nsw88tl7mc] {
    color: var(--color-text);
    font-weight: 600;
    margin: 0 0 16px 0;
    font-size: 1rem;
}

.danji-trend__empty-list[b-nsw88tl7mc] {
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.8;
    text-align: left;
    max-width: 520px;
    margin-inline: auto;
}

    .danji-trend__empty-list li[b-nsw88tl7mc] {
        margin: 2px 0;
    }

/* === 4-ter. 배정 학교 (M5 — schools.md) ============================================== */
/* PC 케이스 (1280~1920). 모바일은 content-mobile-dev 가 후속. */

.danji-schools__header[b-nsw88tl7mc] {
    margin-bottom: 16px;
}

.danji-schools__lead[b-nsw88tl7mc] {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin: 0;
    max-width: 640px;
}

.danji-schools__group[b-nsw88tl7mc] {
    margin-block-end: 24px;
}

    .danji-schools__group:last-of-type[b-nsw88tl7mc] {
        margin-block-end: 0;
    }

.danji-schools__group-title[b-nsw88tl7mc] {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin: 0 0 12px 0;
    font-weight: 600;
}

.danji-schools__list[b-nsw88tl7mc] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.danji-schools__item[b-nsw88tl7mc] {
    padding: 12px 16px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.danji-schools__name-row[b-nsw88tl7mc] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.danji-schools__name[b-nsw88tl7mc] {
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 600;
    word-break: keep-all;
}

/* 종류 배지 — 단일 neutral (한국 컨벤션 색 의미 보존: 상승 빨강 / 하락 파랑 영역과 혼동 방지) */
.danji-schools__badge[b-nsw88tl7mc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 22px;
    padding: 0 6px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    flex-shrink: 0;
}

.danji-schools__address[b-nsw88tl7mc] {
    color: var(--color-text-muted);
    font-size: 0.875rem;
    margin: 0 0 4px 0;
    word-break: keep-all;
}

.danji-schools__metrics[b-nsw88tl7mc] {
    color: var(--color-text);
    font-size: 0.875rem;
    margin: 0;
    line-height: 1.6;
}

.danji-schools__note[b-nsw88tl7mc] {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    margin: 6px 0 0 0;
    line-height: 1.6;
    word-break: keep-all;
}

.danji-schools__empty[b-nsw88tl7mc] {
    color: var(--color-text-muted);
    padding: 16px 0;
    margin: 0;
    font-size: 0.95rem;
}

.danji-schools__source-link[b-nsw88tl7mc] {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.15s ease;
}

    .danji-schools__source-link:hover[b-nsw88tl7mc] {
        color: var(--color-accent-hover);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .danji-schools__source-link:focus-visible[b-nsw88tl7mc] {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
        border-radius: 2px;
    }

/* === 4-quater. 인근 호재 (M7 — news.md) ============================================== */
/* PC 케이스 (1280~1920). 모바일은 content-mobile-dev 가 후속.
   M5 학군 패턴 그대로 복제 + .danji-news__* 클래스명 + .__stage / .__source-link 추가. */

.danji-news__header[b-nsw88tl7mc] {
    margin-bottom: 16px;
}

.danji-news__lead[b-nsw88tl7mc] {
    color: var(--color-text-muted);
    font-size: 0.9375rem;
    line-height: 1.7;
    margin: 0;
    max-width: 640px;
}

.danji-news__group[b-nsw88tl7mc] {
    margin-block-end: 24px;
}

    .danji-news__group:last-of-type[b-nsw88tl7mc] {
        margin-block-end: 0;
    }

.danji-news__group-title[b-nsw88tl7mc] {
    font-size: 1rem;
    color: var(--color-text-muted);
    margin: 0 0 12px 0;
    font-weight: 600;
}

.danji-news__list[b-nsw88tl7mc] {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 12px;
}

.danji-news__item[b-nsw88tl7mc] {
    padding: 12px 16px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-border);
}

.danji-news__title-row[b-nsw88tl7mc] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.danji-news__title[b-nsw88tl7mc] {
    color: var(--color-text);
    font-size: 1rem;
    font-weight: 600;
    word-break: keep-all;
}

/* 분류 배지 — 단일 neutral (한국 컨벤션 색 의미 보존: 상승 빨강 / 하락 파랑 영역과 혼동 방지).
   M5 학군 배지와 동일 패턴 — 색 분리 X. 텍스트 라벨 (재건축 / 교통 / 개발) 로 다중 감각. */
.danji-news__badge[b-nsw88tl7mc] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    background: var(--color-surface);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    font-weight: 500;
    flex-shrink: 0;
    white-space: nowrap;
}

/* 단계 (재건축만) — muted 톤. accent 색 X (단정 위험 회피). */
.danji-news__stage[b-nsw88tl7mc] {
    color: var(--color-text-muted);
    font-size: 0.8125rem;
    margin: 0 0 4px 0;
    line-height: 1.6;
    word-break: keep-all;
}

.danji-news__desc[b-nsw88tl7mc] {
    color: var(--color-text);
    font-size: 0.875rem;
    margin: 0 0 6px 0;
    line-height: 1.65;
    word-break: keep-all;
}

.danji-news__meta[b-nsw88tl7mc] {
    color: var(--color-text);
    font-size: 0.875rem;
    margin: 0 0 6px 0;
    line-height: 1.6;
}

.danji-news__source[b-nsw88tl7mc] {
    margin: 0;
    font-size: 0.875rem;
    line-height: 1.6;
}

.danji-news__empty[b-nsw88tl7mc] {
    color: var(--color-text-muted);
    padding: 16px 0;
    margin: 0;
    font-size: 0.95rem;
}

.danji-news__source-link[b-nsw88tl7mc] {
    color: var(--color-accent);
    text-decoration: none;
    transition: color 0.15s ease;
}

    .danji-news__source-link:hover[b-nsw88tl7mc] {
        color: var(--color-accent-hover);
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .danji-news__source-link:focus-visible[b-nsw88tl7mc] {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
        border-radius: 2px;
    }

/* === M1.9 — 등기 완료 비율 카드 ===================================== */

.danji-registration__body[b-nsw88tl7mc] {
    margin: 12px 0 16px;
    padding: 20px 24px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.danji-registration__metric[b-nsw88tl7mc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.danji-registration__pct[b-nsw88tl7mc] {
    font-size: 2.4rem;
    line-height: 1.1;
    font-weight: 600;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

    .danji-registration__pct-unit[b-nsw88tl7mc] {
        margin-left: 4px;
        font-size: 1.4rem;
        font-weight: 500;
        color: var(--color-text-muted);
    }

.danji-registration__sub[b-nsw88tl7mc] {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    line-height: 1.55;
}

.danji-registration__empty[b-nsw88tl7mc] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    font-size: 0.95rem;
    color: var(--color-text-muted);
}

    .danji-registration__empty .muted[b-nsw88tl7mc] {
        font-size: 0.85rem;
    }

/* ============================================================================
   모바일 케이스 — content-mobile-dev 추가
   - breakpoint 43.75em (≈ 700px). PC 케이스 그대로 두고 좁은 viewport 만 오버라이드.
   - 평형 표 처리 결정: 가로 스크롤 (`overflow-x: auto` + `min-width`) — 4컬럼 모두
     의미 있는 데이터라 카테고리 컬럼 hidden 으로 정보 손실 방지.
   - 실거래 DataGrid: M1 패턴 차용 — 가로 스크롤 + sticky 좌측 1번째 (거래일).
     4컬럼이라 단일 sticky 면 충분 (M1 의 7컬럼은 2개 sticky).
   - 컨테이너 padding, 카드 padding/간격, 폰트, 빈 상태 CTA 풀폭 등 정돈.
   ========================================================================== */

@media (max-width: 43.75em) {

    .danji-page__container[b-nsw88tl7mc] {
        padding-inline: 16px;
    }

    /* === 빈 상태 — CTA 풀폭 ===
       2026-05-26 chrome 톤업: PC 가 bg-warm 카드 박스화 (radius-lg + padding 64px 24px).
       모바일에선 padding 축소 (48px 20px) — gradient 없이 단색 bg-warm 이라 비례 줄임 안전.
       margin auto 는 PC 룰 유지 (가운데 정렬). */

    .danji-empty[b-nsw88tl7mc] {
        padding: 48px 20px;
        margin: 32px auto;
    }

    .danji-empty__title[b-nsw88tl7mc] {
        margin-bottom: 20px;
    }

    .danji-empty__body[b-nsw88tl7mc] {
        font-size: 0.95rem;
    }

    .danji-empty__cta[b-nsw88tl7mc] {
        margin-top: 24px;
    }

        /* MudButton 외곽 div 안에서 버튼만 풀폭 (max-width 320 가드) */
        .danji-empty__cta[b-nsw88tl7mc]  .mud-button-root {
            width: 100%;
            max-width: 320px;
        }

    /* === 1. 페이지 헤더 — 1컬럼 적층 ===
       2026-05-26 chrome 톤업: PC 가 박스화 (gradient + radius-lg + padding 32px 36px) 됨.
       모바일에선 padding 축소 (24px 20px) 하되 좌우 padding 0 으로 떨어뜨리지 X
       — 그라데이션 + radius-lg 시각이 살아 있어야 함. margin 도 살짝 축소. */

    .danji-head[b-nsw88tl7mc] {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 24px 20px;
        margin: 16px 0 20px;
    }

    /* eyebrow — PC 와 동일 letter-spacing/size 유지 (글로벌 .eyebrow 룰 + accent 색 그대로).
       margin-bottom 만 살짝 축소해 title 과의 간격 조정. */
    .danji-head__eyebrow[b-nsw88tl7mc] {
        margin-bottom: 8px;
    }

    .danji-head__sublink[b-nsw88tl7mc] {
        font-size: 0.88rem;
        /* 터치 타겟 ≥ 44px — 라벨 짧아서 inline-block 인 채로 padding 으로 확보 */
        padding: 8px 4px 8px 0;
        margin-bottom: 4px;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .danji-head__title[b-nsw88tl7mc] {
        /* PC clamp(1.75rem, 3vw, 2.5rem) — 모바일 한정 약간 축소 */
        font-size: clamp(1.5rem, 5vw, 2rem);
        margin-bottom: 8px;
    }

    .danji-head__lead[b-nsw88tl7mc] {
        font-size: 0.95rem;
        line-height: 1.6;
        max-width: 100%;
    }

    .danji-head__source[b-nsw88tl7mc] {
        font-size: 0.82rem;
    }

    /* 우측 배지 블럭 — lead 아래 좌측 정렬 */
    .danji-head__right[b-nsw88tl7mc] {
        align-items: flex-start;
        max-width: 100%;
        text-align: left;
        gap: 10px;
    }

    .danji-head__badge-group[b-nsw88tl7mc] {
        align-items: flex-start;
        width: 100%;
    }

    .danji-head__badge-hint[b-nsw88tl7mc] {
        max-width: 100%;
        font-size: 0.75rem;
    }

    /* === 카드 공통 — padding/간격 축소 === */

    .danji-card[b-nsw88tl7mc] {
        padding: 16px 20px;
        margin-block-end: 16px;
    }

    .danji-card__title[b-nsw88tl7mc] {
        margin-bottom: 16px;
    }

    .danji-card__notes[b-nsw88tl7mc] {
        padding-top: 12px;
        margin-top: 12px;
    }

        .danji-card__notes .source-line[b-nsw88tl7mc] {
            font-size: 0.8125rem;
        }

    /* danji-card__empty (chrome 톤업 — bg-warm + left-border accent 인너 박스) — 모바일 padding 약간 축소.
       left-border 3px 는 PC 와 동일 유지 (정보 hint 시각 언어 일관). */
    .danji-card__empty[b-nsw88tl7mc] {
        padding: 16px 18px;
        font-size: 0.9rem;
        line-height: 1.6;
    }

    /* === 2. 기본 정보 그리드 — 1컬럼 + 라벨/값 적층 === */

    .danji-info-grid[b-nsw88tl7mc] {
        grid-template-columns: 1fr;
        gap: 0;
    }

    .danji-info-grid__row[b-nsw88tl7mc] {
        /* 라벨 위·값 아래 적층 */
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 0;
    }

        /* PC 는 마지막 2개 보더 X (2열 grid 의 마지막 행) — 모바일 1열에선
           마지막 1개만 보더 X 로 조정 */
        .danji-info-grid__row:nth-last-child(-n+2)[b-nsw88tl7mc] {
            border-bottom: 1px solid var(--color-border);
        }

        .danji-info-grid__row:last-child[b-nsw88tl7mc] {
            border-bottom: none;
        }

    .danji-info-grid__label[b-nsw88tl7mc] {
        font-size: 0.82rem;
    }

    .danji-info-grid__value[b-nsw88tl7mc] {
        font-size: 0.95rem;
    }

    /* === 3. 평형 정보 표 — 가로 스크롤 (카테고리 컬럼 보존) === */

    .danji-unit-table-wrap[b-nsw88tl7mc] {
        /* HTML 에 wrap 없으므로 table 자체에 overflow 박을 수 없음 —
           table 의 부모 (.danji-card) 가 overflow hidden 이라면 표가 잘림.
           .danji-card 모바일 padding 안에서 부모를 overflow-x 로 풀기. */
    }

    /* table 부모 .danji-card 를 가로 스크롤 컨테이너로 — table 만 별도 wrap 박지
       못하므로 모바일에서 .danji-card 의 우측 padding 보상 + table 자체 min-width */
    .danji-unit-table[b-nsw88tl7mc] {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: nowrap;
        font-size: 0.88rem;
    }

        .danji-unit-table thead[b-nsw88tl7mc],
        .danji-unit-table tbody[b-nsw88tl7mc] {
            display: table;
            width: 100%;
            min-width: 420px;
        }

        .danji-unit-table thead th[b-nsw88tl7mc],
        .danji-unit-table tbody td[b-nsw88tl7mc] {
            padding: 10px 12px;
        }

        .danji-unit-table thead th[b-nsw88tl7mc] {
            font-size: 0.85rem;
        }

    /* === 4. 실거래 DataGrid — 가로 스크롤 + sticky 좌측 (거래일) === */

    .danji-tx__grid[b-nsw88tl7mc] {
        /* PC 카드 padding 안쪽이지만 표가 풀폭 swipe 되도록 좌우 보상 */
        margin-inline: -20px;
    }

    /* MudDataGrid 외곽 — 카드 안에서 풀폭, 좌우 보더 라운드 reset */
    [b-nsw88tl7mc] .danji-tx__grid .mud-data-grid {
        border-left: none;
        border-right: none;
        border-radius: 0;
    }

    [b-nsw88tl7mc] .danji-tx__grid .mud-table-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* 셀 padding/폰트 축소 — 정보 밀도 우선 */
    [b-nsw88tl7mc] .danji-tx__grid .mud-table-head .mud-table-cell,
    [b-nsw88tl7mc] .danji-tx__grid .mud-table-cell {
        padding: 8px 10px;
        font-size: 0.88rem;
        white-space: nowrap;
    }

    /* sticky 좌측 1번째 (거래일) — 4컬럼이라 단일 sticky 충분 */
    [b-nsw88tl7mc] .danji-tx__grid .mud-table-head .mud-table-cell:nth-child(1),
    [b-nsw88tl7mc] .danji-tx__grid .mud-table-body .mud-table-cell:nth-child(1) {
        position: sticky;
        left: 0;
        z-index: 2;
        background: var(--color-surface);
        min-width: 100px;
        box-shadow: 1px 0 0 var(--color-border);
    }

    [b-nsw88tl7mc] .danji-tx__grid .mud-table-head .mud-table-cell:nth-child(1) {
        background: var(--color-surface-alt);
        z-index: 3;
    }

    /* hover 시에도 sticky 셀 배경 유지 */
    [b-nsw88tl7mc] .danji-tx__grid .mud-table-body .mud-table-row:hover .mud-table-cell:nth-child(1) {
        background: var(--color-surface-alt);
    }

    /* 전용면적 / 거래금액 / 층 — 최소 폭 보장 */
    [b-nsw88tl7mc] .danji-tx__grid .mud-table-cell:nth-child(2) {
        min-width: 110px;
    }

    [b-nsw88tl7mc] .danji-tx__grid .mud-table-cell:nth-child(3) {
        min-width: 130px;
    }

    [b-nsw88tl7mc] .danji-tx__grid .mud-table-cell:nth-child(4) {
        min-width: 56px;
    }

    /* === 전월세 그리드 (5컬럼) — 매매 4컬럼 룰 위에 5번째 컬럼 + 보증금/월세 폭 보강 ===
       전월세는 ③ 보증금/월세 셀이 "보증금 X / 월 Y" 두 줄 분량이라 매매 거래금액(130px)보다
       넉넉히, ⑤ 계약구분(신규/갱신 배지)은 매매엔 없는 5번째라 폭만 추가.
       sticky 좌측(① 계약일)·② 전용면적·④ 층 폭은 매매 룰 그대로 상속 (1번째 컬럼 동일).
       ③ 보증금/월세 셀은 전월세 전용 클래스(.danji-rent__amount)를 :has 로 한정해
       잡음 — 매매 거래금액 셀(같은 3번째)은 건드리지 않아 매매 한 줄 유지(사이드 이펙트 0). */
    [b-nsw88tl7mc] .danji-tx__grid .mud-table-cell:has(.danji-rent__amount) {
        min-width: 170px;
        white-space: normal;
    }

    [b-nsw88tl7mc] .danji-tx__grid .mud-table-cell:nth-child(5) {
        min-width: 72px;
    }

    /* 보증금/월세 금액 — 두 줄 자연 줄바꿈 허용 (위 :has 셀 white-space:normal 과 짝). */
    [b-nsw88tl7mc] .danji-tx__grid .danji-rent__amount {
        font-size: 0.86rem;
        line-height: 1.45;
    }

    /* 계약구분 배지 — 좁은 폭 맞춰 폰트 한 단계 축소. */
    [b-nsw88tl7mc] .danji-tx__grid .danji-rent__contract-badge {
        font-size: 0.68rem;
        padding: 1px 6px;
    }

    /* 헤더 info icon 터치 타겟 — width/height 살짝 키움 (16 → 20) */
    [b-nsw88tl7mc] .danji-tx__grid .danji-tx__header-info {
        width: 20px;
        height: 20px;
    }

    /* 페이저 두 줄 wrap 자연스럽게 */
    [b-nsw88tl7mc] .danji-tx__grid .mud-table-pagination-toolbar {
        flex-wrap: wrap;
        gap: 4px 8px;
        font-size: 0.78rem;
        min-height: auto;
        padding: 8px 12px;
    }

    /* === 빈 상태 (실거래 0건) — padding 축소 + CTA 풀폭 === */

    .danji-tx__empty[b-nsw88tl7mc] {
        padding: 32px 16px;
        gap: 12px;
    }

    .danji-tx__empty-list[b-nsw88tl7mc] {
        font-size: 0.85rem;
        max-width: 100%;
    }

        .danji-tx__empty[b-nsw88tl7mc]  .mud-button-root {
            width: 100%;
            max-width: 320px;
        }

    /* === 4-bis. 시세 추이 (M3) — 모바일 케이스 === */
    /* 정본: .claude/docs/content/price-trend.md §10-K
       - 변동률 카드 2개 세로 1컬럼 stack
       - 차트 max-height 240px + min-height 200px (layout shift 차단)
       - 칩 터치 타겟 44×44px (MudChipSet ::deep)
       - 빈 상태 padding 축소
       - hover 효과: 모바일은 touch ≠ hover 라 자연 미발생 → PC CSS 의 circle:hover
         그대로 두되 본 코멘트로 명시 (sticky 잔류 보고 시 §6-1 으로 즉시 무력화) */

    .danji-trend__lead[b-nsw88tl7mc] {
        font-size: 0.875rem;
        max-width: 100%;
    }

    /* 범위 칩셋 — 모바일 터치 타겟 (WCAG 2.5.5) */
    [b-nsw88tl7mc] .danji-trend__range-chips {
        margin-block-start: 12px;
        margin-block-end: 8px;
        gap: 6px;
    }

        [b-nsw88tl7mc] .danji-trend__range-chips .mud-chip {
            min-height: 40px;
            padding: 8px 16px;
            font-size: 0.875rem;
        }

    [b-nsw88tl7mc] .danji-trend__chips {
        margin-block-start: 4px;
        margin-block-end: 12px;
        gap: 8px;
    }

        /* 칩 터치 타겟 44×44px (WCAG 2.5.5 / 모바일 가이드 §6 — content-mobile-dev.md) */
        [b-nsw88tl7mc] .danji-trend__chips .mud-chip {
            min-height: 44px;
            padding: 10px 16px;
            font-size: 0.9rem;
        }

    .danji-trend__chart[b-nsw88tl7mc] {
        margin-block: 12px 8px;
    }

    /* 모바일 X축 — 폰트 키워서 잘 보이게 (호갱노노 톤). */
    [b-nsw88tl7mc] .danji-trend__chart .mud-charts-xaxis text {
        font-size: 0.78rem !important;
    }

    /* 모바일 격월 표시 — text 요소가 12개 다 있지만 짝수 위치 (1, 3, 5, ..., 11번째 — 0-indexed 의 odd) 만 hide.
       nth-child 는 1-indexed 라 nth-child(2n) 가 짝수번째 (2, 4, 6, ...) 를 hide → 1, 3, 5, ... 만 표시 (퐁당퐁당). */
    [b-nsw88tl7mc] .danji-trend__chart .mud-charts-xaxis text:nth-child(2n) {
        display: none;
    }

    [b-nsw88tl7mc] .danji-trend__chart .mud-charts-yaxis text {
        font-size: 0.75rem !important;
    }

    .danji-trend__caption[b-nsw88tl7mc] {
        font-size: 0.8125rem;
        line-height: 1.7;
        padding-inline: 4px;
        margin-block-end: 20px;
    }

    /* 변동률 카드 2개 — 모바일 세로 1컬럼 stack (PC 1fr 1fr → 1fr) */
    .danji-trend__variance[b-nsw88tl7mc] {
        grid-template-columns: 1fr;
        gap: 12px;
        margin-block: 8px 12px;
    }

    .danji-trend__var-card[b-nsw88tl7mc] {
        padding: 14px 16px;
    }

    .danji-trend__var-value[b-nsw88tl7mc] {
        /* clamp 하한 자동 적용 — 별도 폰트 조정 불필요 (price-trend.md §6-4 + §10-K) */
        line-height: 1.3;
    }

    .danji-trend__var-sub[b-nsw88tl7mc] {
        font-size: 0.8125rem;
    }

    /* 빈 상태 (12개월 거래 0건 또는 모든 월 표본 부족) — padding 축소 */
    .danji-trend__empty[b-nsw88tl7mc] {
        padding: 32px 16px;
        margin-block: 12px;
    }

    .danji-trend__empty-list[b-nsw88tl7mc] {
        font-size: 0.85rem;
        max-width: 100%;
    }

    /* === 4-ter. 배정 학교 (M5 — schools.md §10-K) ============================= */
    /* - 학교명 + 배지 wrap (긴 이름 안전) — flex-wrap + min-width:0
       - 메트릭 행 (`거리 · 도보 · 학생수`) 좁은 폭에서 자연 wrap — flex + gap
       - 카드 padding / 그룹 간격 축소
       - 출처 라인 (danji-card__notes .source-line) 은 모바일 카드 공통 룰에서 이미 0.8125rem */

    .danji-schools__lead[b-nsw88tl7mc] {
        font-size: 0.875rem;
    }

    .danji-schools__group[b-nsw88tl7mc] {
        margin-block-end: 18px;
    }

    .danji-schools__group-title[b-nsw88tl7mc] {
        font-size: 0.9375rem;
    }

    .danji-schools__list[b-nsw88tl7mc] {
        gap: 10px;
    }

    .danji-schools__item[b-nsw88tl7mc] {
        padding: 10px 12px;
    }

    /* 학교명 + 배지 — 긴 학교명 안전 wrap. 배지는 flex-shrink:0 (PC) 라 별도 줄로 떨어짐 */
    .danji-schools__name-row[b-nsw88tl7mc] {
        flex-wrap: wrap;
        gap: 6px;
    }

    .danji-schools__name[b-nsw88tl7mc] {
        font-size: 0.9375rem;
        min-width: 0;
    }

    .danji-schools__address[b-nsw88tl7mc] {
        font-size: 0.8125rem;
    }

    /* 메트릭 행 — PC 는 inline ` · ` 텍스트 노드. 좁은 폭에서 wrap 시 ` · ` 가 줄
       시작에 떨어지면 어색 → flex + gap 으로 시각 spacing 자연화. razor 마크업
       (` · ` 텍스트 노드) 변경 0건 — 텍스트는 그대로 두고 flex 컨테이너 안에서
       배치만 조정 (실 줄바꿈은 white-space 기본). */
    .danji-schools__metrics[b-nsw88tl7mc] {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 10px;
        font-size: 0.8125rem;
    }

    .danji-schools__note[b-nsw88tl7mc] {
        font-size: 0.75rem;
        margin-top: 4px;
    }

    .danji-schools__empty[b-nsw88tl7mc] {
        font-size: 0.875rem;
        padding: 12px 0;
    }

    /* === 4-quater. 인근 호재 (M7 — news.md §8·§13-K) ========================== */
    /* - 제목 + 분류 배지 wrap (긴 제목 안전) — flex-wrap + min-width:0 (M5 학군 패턴)
       - meta 행 (갱신일 · 거리) 좁은 폭 자연 wrap — flex + gap (M5 __metrics 패턴)
       - 카드 padding / 그룹 간격 축소 (M5 일관)
       - 출처 라인 (danji-card__notes .source-line) 은 모바일 카드 공통 룰에서 이미 0.8125rem
       - .danji-news__source-link 는 inline-flex 자연 흡수 (PC min-height 44 그대로) */

    .danji-news__lead[b-nsw88tl7mc] {
        font-size: 0.875rem;
    }

    .danji-news__group[b-nsw88tl7mc] {
        margin-block-end: 18px;
    }

    .danji-news__group-title[b-nsw88tl7mc] {
        font-size: 0.9375rem;
    }

    .danji-news__list[b-nsw88tl7mc] {
        gap: 10px;
    }

    .danji-news__item[b-nsw88tl7mc] {
        padding: 10px 12px;
    }

    /* 제목 + 분류 배지 — 긴 제목 안전 wrap. 배지는 flex-shrink:0 (PC) 라 별도 줄로 떨어짐 */
    .danji-news__title-row[b-nsw88tl7mc] {
        flex-wrap: wrap;
        gap: 6px;
    }

    .danji-news__title[b-nsw88tl7mc] {
        font-size: 0.9375rem;
        min-width: 0;
    }

    .danji-news__stage[b-nsw88tl7mc] {
        font-size: 0.8125rem;
    }

    .danji-news__desc[b-nsw88tl7mc] {
        font-size: 0.875rem;
    }

    /* meta 행 (갱신일 · 거리) — PC inline ` · ` 텍스트 노드. 좁은 폭에서 wrap 시
       ` · ` 가 줄 시작에 떨어지면 어색 → flex + gap 으로 시각 spacing 자연화.
       razor 마크업 (` · ` 텍스트 노드) 변경 0건. M5 학군 __metrics 패턴 그대로. */
    .danji-news__meta[b-nsw88tl7mc] {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 10px;
        font-size: 0.8125rem;
    }

    .danji-news__source[b-nsw88tl7mc] {
        font-size: 0.8125rem;
    }

    .danji-news__empty[b-nsw88tl7mc] {
        font-size: 0.875rem;
        padding: 12px 0;
    }

}

/* M3.7 — on-demand 적재 진행 안내 (동적 모드에서 K-apt fetch 중) */
.on-demand-fetching[b-nsw88tl7mc] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
}

.on-demand-fetching__text[b-nsw88tl7mc] {
    flex: 1;
}

.on-demand-fetching__title[b-nsw88tl7mc] {
    margin: 0 0 4px;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-text);
}

.on-demand-fetching__body[b-nsw88tl7mc] {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}
/* _content/AptSonpoom/Components/Pages/Explore.razor.rz.scp.css */
/* ============================================================
   M2-1.3 — /explore 지도 탐색 페이지 chrome (scoped CSS).
   .em-marker / .em-cluster 같은 카카오맵 CustomOverlay 내부 HTML 은
   글로벌 wwwroot/app.css 에 박음 (Blazor scoped CSS attribute selector
   가 CustomOverlay 의 DOM 을 못 잡음).
   ============================================================ */

/* ============================================================
   M2-2.2 — z-index 표준 (2026-05-30, BlankLayout 진입 이후 SiteHeader 부재 반영).
   /explore 한정 — 사이트 글로벌 z-index 영향 0.

   |  z-index | 영역                                              |
   |---------:|---------------------------------------------------|
   |     10   | 카카오맵 SDK (지도 컨테이너 · 마커 · 클러스터)         |
   |     20   | MapCenterBottom 광고 (지도 위 가운데 하단 floating)  |
   |     30   | 좌상단 모듈군 (SearchCard·HotDanjiCard·FilterRow)  |
   |          | + 좌하단 DisclosureChip — 동급                      |
   |     40   | SideRail (우측 세로 — 줌·현 위치·지도 종류)           |
   |     50   | ActionDock (우상단 4개 아이콘)                       |
   |    100   | DanjiPanel (단지 클릭 패널 — PC 우측 · 모바일 시트)    |
   |    200   | ActionDockSheet (☰ 더보기 시트) + 출처/도움말 모달    |

   SiteHeader (옛 z-index 50 가정) 부재로 패널을 50 위로 못 올린 제한 해소 — 패널 100 정상화.
   ActionDockSheet 와 모달은 동급 200 (focus trap 으로 한 번에 하나만 열림 보장).
   ============================================================ */

/* M2-2.5 (2026-05-30 사용자 명시) — 지도 가운데 하단 광고 wrapper.
   AdSlot 자체는 점선 박스 마크업. 위치만 wrapper 가 잡음. z-index 20 (M2-2.2 표준).
   AdSettings.ShouldShow 가드로 어드민 OFF 시 자식 AdSlot 미렌더 → wrapper 만 빈 채로 무관. */
.explore-ad-center-bottom[b-u0z0f6dryd] {
    position: absolute;
    left: 50%;
    bottom: -8px;  /* 32→16 — 가운데 하단 광고 살짝 더 내림 (2026-06-04 사용자 요청) */
    transform: translateX(-50%);
    z-index: 20;
    width: 728px;
    max-width: calc(100vw - 24px);
    /* AdSlot 자체 마진 0 — wrapper 가 위치만 책임. */
    pointer-events: none;
}

.explore-ad-center-bottom > *[b-u0z0f6dryd] {
    pointer-events: auto;
}

/* 모바일 — 가운데 하단 광고. 좌하단 카카오 축소 UI(50m 스케일바)를 가리지 않도록 바닥에서 살짝 띄움
   (2026-06-04 사용자 요청 — 광고가 스케일바를 덮던 문제). iOS 홈 인디케이터(safe-area-inset-bottom)
   디바이스에선 그만큼 더 띄워 홈바 회피. 풀폭 유지.
   AdSlot 내부 .ad-slot--banner 가 모바일에서 margin 16px 을 갖고 있어 실제 높이가 ~112px 로 부풀고
   그게 위에 올리는 칩들과 겹치게 만들었음 → wrapper 안에서 ad-slot 마진을 0 으로 죽여 광고 높이를
   예측 가능한 ~80px 로 고정 (wrapper 가 위치만 책임). */
@media (max-width: 43.75em) {
    .explore-ad-center-bottom[b-u0z0f6dryd] {
        bottom: max(2px, calc(env(safe-area-inset-bottom, 0px) + 4px));
        width: calc(100vw - 24px);
    }

    .explore-ad-center-bottom .ad-slot[b-u0z0f6dryd] {
        margin: 0;
    }
}

/* ============================================================
   M2-2.11 (2026-06-04) — 모바일 상단 "표준 헤더 밴드" 배경.
   사이트 다른 페이지의 상단 헤더 밴드(SiteHeader 모바일 케이스)와 위계 일치 —
   풀폭 56px(+safe-area) 흰 반투명 + backdrop blur + 하단 hairline.
   PC 는 display:none (이 element 자체가 모바일 전용 chrome). 지도 위 overlay 라 reflow 0.
   z-index 45 — SideRail(40) 위, ActionDock 햄버거(50)·검색창(110)·docked 띠(160) 아래
   (검색창·햄버거가 밴드 위에 떠 보이도록). 브랜드 글자 없음(사용자 명시).
   ============================================================ */
/* 2026-06-05 — handoff(design_handoff_popular) 적용으로 모바일 상단 헤더 밴드 폐기 (사용자 결정).
   M2-2.11 밴드(흰 반투명+blur 띠) → 핸드오프식 "지도 위 둥둥 뜬 검색 알약 + 햄버거"(둘 다 자체 그림자)로 전환.
   밴드 element(.explore-topbar-bg)는 razor 에 남아 있으나 항상 display:none (지도 reflow 0). */
.explore-topbar-bg[b-u0z0f6dryd] {
    display: none;
}

/* M2-2.4 (2026-05-30) — H1 visually-hidden. SEO/a11y 보존 (페이지 메인 헤딩 1개) + 시각 X. */
.explore-h1-sr[b-u0z0f6dryd] {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    border: 0;
    white-space: nowrap;
}

/* M2-2.1 — /explore 풀-블리드 wrapper (2026-05-30 BlankLayout 분리 이후).
   부모 = BlankLayout 의 .site-main.site-main--blank (height: 100dvh).
   .explore 는 그 100dvh 그대로 받아 자식 .explore-body 에 100% 넘김. */
.explore[b-u0z0f6dryd] {
    /* page-container 의 max-width 1280px 가드 안 받게 — 풀폭 지도 */
    max-width: none;
    padding: 0;
    margin: 0;
    height: 100%;
}

/* M2-2 — 필터 바 [B]. 지도 위 상단 floating 오버레이 (.explore-body 안 absolute).
   좌측 full-height 패널과 안 겹치게 상단 "우측" 정렬 (엣지케이스 — 필터는 항상 조작 가능).
   불투명 surface + 그림자 (반투명 X — 시세 숫자 가독성 우선). z-index 30 (좌상단 모듈군 — M2-2.2 표준). */
.explore-filterbar[b-u0z0f6dryd] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 30;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 14px;
    max-width: calc(100% - 24px);
    padding: 10px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
}

/* H1 "지도 탐색" — 페이지 정체성(SEO·a11y) 보존. 시각 위계상 작게 (지도가 주인공). */
.explore-filterbar__title[b-u0z0f6dryd] {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
    white-space: nowrap;
    /* 긴 줄바꿈 차단 — 필터 바 한 줄 유지 */
    overflow: hidden;
    text-overflow: ellipsis;
}

.explore-filterbar__eyebrow[b-u0z0f6dryd] {
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* 출처·정의 접이식 칩 — 긴 출처 한 줄을 필터 바 안에서 축약. */
.explore-srcchip[b-u0z0f6dryd] {
    position: relative;
}

.explore-srcchip__summary[b-u0z0f6dryd] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
    list-style: none;
    user-select: none;
}

.explore-srcchip__summary[b-u0z0f6dryd]::-webkit-details-marker {
    display: none;
}

.explore-srcchip__summary:hover[b-u0z0f6dryd],
.explore-srcchip[open] .explore-srcchip__summary[b-u0z0f6dryd] {
    color: var(--color-text);
    border-color: var(--color-text-muted);
}

.explore-srcchip__summary:focus-visible[b-u0z0f6dryd] {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* 펼친 패널 — 필터 바 아래로 absolute 드롭. surface + 그림자. */
.explore-srcchip__body[b-u0z0f6dryd] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    width: 320px;
    max-width: 80vw;
    padding: 12px 14px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.explore-srcchip__body .source-line[b-u0z0f6dryd] {
    margin: 0;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* M2-1.6 — 평형 chip 4개 (전체/24평/34평/44평). 호갱노노식 빈도 분포. */
.explore-pyeong[b-u0z0f6dryd] {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
}

.explore-pyeong__chip[b-u0z0f6dryd] {
    padding: 5px 12px;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    transition: background-color 120ms ease-out, color 120ms ease-out, border-color 120ms ease-out;
}

.explore-pyeong__chip:hover[b-u0z0f6dryd],
.explore-pyeong__chip:focus-visible[b-u0z0f6dryd] {
    background: var(--color-surface-alt);
    border-color: var(--color-text-muted);
    color: var(--color-text);
    outline: none;
}

.explore-pyeong__chip.is-active[b-u0z0f6dryd] {
    background: var(--color-accent);
    color: #fff;
    border-color: var(--color-accent);
    font-weight: 600;
}

.explore-pyeong__chip.is-active:hover[b-u0z0f6dryd] {
    background: var(--color-accent-hover);
    border-color: var(--color-accent-hover);
}

@media (prefers-reduced-motion: reduce) {
    .explore-pyeong__chip[b-u0z0f6dryd] {
        transition: none;
    }
}

/* M2-2 — 전체화면 무대. 헤더(64px) 바로 아래부터 viewport 끝까지 꽉 참.
   position: relative — 필터 바·좌측 패널·면책 칩이 이 안 absolute 오버레이로 떠 있음.
   높이를 calc(100vh - header) 로 고정 → 좌측 패널의 top:0;bottom:0 이 지도 높이에 정확히 묶임.
   overlay 방식이라 패널 토글 시 지도 가로폭 불변 → 카카오맵 relayout 호출 불필요. */
.explore-body[b-u0z0f6dryd] {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 지도 컨테이너 — 카카오맵 SDK 가 안에 직접 그림. 부모(.explore-body) 를 꽉 채움.

   touch-action: none — 모바일에서 손가락 위·아래 swipe 가 페이지 스크롤로 흡수되지 않게.
   카카오맵 SDK 가 자체 touch handler (drag·pinch·tap) 로 지도 이동·줌·마커 클릭 처리하므로
   브라우저 기본 제스처는 지도 영역 안에서 모두 차단해야 정상 동작.
   overscroll-behavior: contain — 지도 안 swipe 가 페이지 outer scroll 로 전파 차단. */
.explore-map[b-u0z0f6dryd] {
    width: 100%;
    height: 100%;
    background: var(--color-surface-alt);
    touch-action: none;
    overscroll-behavior: contain;
}

/* M2-2 — 단지 클릭 시 "좌측" full-height 패널 (PC, 호갱노노식). map 위 overlay.
   헤더 아래 지도 영역의 좌측 전체 높이를 꽉 채움 (top:0;bottom:0).
   모바일 (≤ 700px) 은 M2-1.5 바텀시트로 변형 (현행 유지 — 본 좌측 패널은 PC 전용). */
/* 인구 패널 (2026-06-09 핸드오프 design_handoff_region_population_panel — "값 그대로" 승인).
   패널 스코프 oklch 토큰(--pp-*) — 글로벌 토큰·다른 페이지 영향 0(handoff 승인 예외, /explore 패널 기존 예외와 동형).
   남자=블루(--pp-male)/여자=핑크(--pp-female) — 핸드오프 명시(여=그린 아님). 인구는 등락 신호 아니라 신호색 무관. */
.explore-panel--pop[b-u0z0f6dryd] {
    --pp-head: oklch(0.21 0.02 258);
    --pp-ink: oklch(0.42 0.015 260);
    --pp-lab: oklch(0.5 0.012 260);
    --pp-mut: oklch(0.6 0.01 250);
    --pp-faint: oklch(0.72 0.008 250);
    --pp-accent: oklch(0.55 0.17 256);
    --pp-accent-deep: oklch(0.47 0.16 258);
    --pp-accent-soft: oklch(0.95 0.035 256);
    --pp-accent-soft2: oklch(0.97 0.022 256);
    --pp-male: oklch(0.55 0.17 256);
    --pp-female: oklch(0.66 0.16 350);
    --pp-line: oklch(0.92 0.004 250);
    --pp-line-soft: oklch(0.95 0.003 250);
    --pp-bg: oklch(0.985 0.003 250);
    --pp-band: oklch(0.965 0.004 250);
    /* 상단 70px — 단지 패널과 동일. 패널 열리면 검색창이 패널 폭(400px)에 56px 띠로 도킹되는 자리 확보(헤더가 그 아래 시작). */
    padding: 70px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    color: var(--pp-ink);
}
/* close — 인구·인구이동 패널 공유. 단지 패널(.explore-panel__close)과 동일 규격(38×38·2.3rem·radius10·translateY-3). 헤더 안 인라인(이름 옆). */
.pop-panel__close[b-u0z0f6dryd] {
    display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box; flex-shrink: 0;
    width: 38px; height: 38px; padding: 0;
    border: none; background: transparent; border-radius: 10px;
    font-size: 2.3rem; line-height: 1; color: var(--color-text-muted); cursor: pointer;
    transform: translateY(-3px);
    transition: color 120ms ease-out, background-color 150ms ease-out;
}
.pop-panel__close:hover[b-u0z0f6dryd], .pop-panel__close:focus-visible[b-u0z0f6dryd] { background: oklch(0.96 0.004 250); color: var(--color-text); outline: none; }

.pop-panel__head[b-u0z0f6dryd] { position: relative; z-index: 3; background: #fff; padding: 17px 18px 15px; border-bottom: 1px solid var(--pp-line-soft); }
.pop-panel__crumb[b-u0z0f6dryd] { font-size: 11.5px; font-weight: 600; color: var(--pp-mut); letter-spacing: -.01em; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.pop-panel__sep[b-u0z0f6dryd] { color: var(--pp-faint); }
.pop-panel__cur[b-u0z0f6dryd] { color: var(--pp-accent-deep); font-weight: 700; }
.pop-panel__titlerow[b-u0z0f6dryd] { margin-top: 8px; display: flex; align-items: center; gap: 9px; }
.pop-panel__name[b-u0z0f6dryd] { font-size: 23px; font-weight: 800; color: var(--pp-head); letter-spacing: -.03em; margin: 0; }
.pop-panel__badge[b-u0z0f6dryd] { display: inline-flex; align-items: center; gap: 4px; height: 23px; padding: 0 9px; border-radius: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: -.02em; background: var(--pp-accent-soft); color: var(--pp-accent-deep); }
.pop-panel__bdot[b-u0z0f6dryd] { width: 6px; height: 6px; border-radius: 50%; background: var(--pp-accent); }
.pop-panel__grow[b-u0z0f6dryd] { flex: 1; }

.pop-panel__body[b-u0z0f6dryd] { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.pop-sec[b-u0z0f6dryd] { padding: 18px 20px 20px; }
.pop-sec + .pop-sec[b-u0z0f6dryd] { border-top: 9px solid var(--pp-band); }

/* hero — 총 인구 */
.pop-hero__cap[b-u0z0f6dryd] { font-size: 12px; font-weight: 700; color: var(--pp-lab); letter-spacing: -.02em; }
.pop-hero__row[b-u0z0f6dryd] { margin-top: 6px; display: flex; align-items: baseline; gap: 7px; }
.pop-hero__num[b-u0z0f6dryd] { font-size: 38px; font-weight: 800; color: var(--pp-head); letter-spacing: -.04em; }
.pop-hero__unit[b-u0z0f6dryd] { font-size: 17px; font-weight: 800; color: var(--pp-lab); }

/* 성별 분할 막대 */
.pop-gbar[b-u0z0f6dryd] { margin-top: 16px; height: 12px; border-radius: 99px; overflow: hidden; display: flex; box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .05); }
.pop-gbar__m[b-u0z0f6dryd] { background: var(--pp-male); }
.pop-gbar__f[b-u0z0f6dryd] { background: var(--pp-female); }
.pop-gcells[b-u0z0f6dryd] { margin-top: 11px; display: flex; gap: 12px; }
.pop-gcell[b-u0z0f6dryd] { flex: 1; display: flex; align-items: center; gap: 8px; padding: 10px 12px; border-radius: 12px; background: var(--pp-bg); }
.pop-gcell__dot[b-u0z0f6dryd] { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pop-gcell--m .pop-gcell__dot[b-u0z0f6dryd] { background: var(--pp-male); }
.pop-gcell--f .pop-gcell__dot[b-u0z0f6dryd] { background: var(--pp-female); }
.pop-gcell__k[b-u0z0f6dryd] { font-size: 12px; font-weight: 700; color: var(--pp-mut); }
.pop-gcell__v[b-u0z0f6dryd] { margin-left: auto; font-size: 14.5px; font-weight: 800; color: var(--pp-head); }
.pop-gcell__pct[b-u0z0f6dryd] { font-size: 12px; font-weight: 700; }
.pop-gcell--m .pop-gcell__pct[b-u0z0f6dryd] { color: var(--pp-accent-deep); }
.pop-gcell--f .pop-gcell__pct[b-u0z0f6dryd] { color: oklch(0.55 0.16 350); }

/* 보조 스탯 3개 */
.pop-stats[b-u0z0f6dryd] { margin-top: 14px; display: flex; gap: 8px; }
.pop-stat[b-u0z0f6dryd] { flex: 1; padding: 11px 13px; border-radius: 12px; background: var(--pp-bg); display: flex; flex-direction: column; gap: 3px; }
.pop-stat__k[b-u0z0f6dryd] { font-size: 11px; font-weight: 600; color: var(--pp-mut); letter-spacing: -.02em; }
.pop-stat__v[b-u0z0f6dryd] { font-size: 15px; font-weight: 800; color: var(--pp-head); letter-spacing: -.02em; }
.pop-stat__u[b-u0z0f6dryd] { font-size: 11px; font-weight: 700; color: var(--pp-mut); }

/* 피라미드 */
.pop-sec__head[b-u0z0f6dryd] { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.pop-sec__title[b-u0z0f6dryd] { font-size: 15.5px; font-weight: 800; color: var(--pp-head); letter-spacing: -.03em; }
.pop-seg[b-u0z0f6dryd] { margin-left: auto; display: inline-flex; background: var(--pp-band); border-radius: 10px; padding: 3px; }
.pop-seg__b[b-u0z0f6dryd] { height: 28px; padding: 0 13px; border: none; background: none; border-radius: 8px; cursor: pointer; font-size: 12px; font-weight: 700; color: oklch(0.46 0.012 255); letter-spacing: -.02em; transition: all .15s; }
.pop-seg__b.is-on[b-u0z0f6dryd] { background: #fff; color: var(--pp-accent); box-shadow: 0 1px 3px rgba(20, 30, 50, .12); }
.pop-legend[b-u0z0f6dryd] { display: flex; gap: 16px; margin-bottom: 10px; }
.pop-leg[b-u0z0f6dryd] { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: oklch(0.4 0.012 255); }
.pop-leg[b-u0z0f6dryd]::before { content: ""; width: 10px; height: 10px; border-radius: 50%; }
.pop-leg--m[b-u0z0f6dryd]::before { background: var(--pp-male); }
.pop-leg--f[b-u0z0f6dryd]::before { background: var(--pp-female); }
.pop-pyr[b-u0z0f6dryd] { display: flex; flex-direction: column; gap: 5px; }
.pop-pyr__row[b-u0z0f6dryd] { display: grid; grid-template-columns: 42px 1fr 42px 1fr 42px; align-items: center; column-gap: 7px; border-radius: 8px; padding: 2px; transition: background .12s; }
.pop-pyr__row:hover[b-u0z0f6dryd] { background: var(--pp-accent-soft2); }
.pop-pyr__val[b-u0z0f6dryd] { font-size: 11px; font-weight: 700; color: var(--pp-mut); letter-spacing: -.02em; }
.pop-pyr__val--m[b-u0z0f6dryd] { text-align: right; }
.pop-pyr__val--f[b-u0z0f6dryd] { text-align: left; }
.pop-pyr__row:hover .pop-pyr__val--m[b-u0z0f6dryd] { color: var(--pp-accent-deep); }
.pop-pyr__row:hover .pop-pyr__val--f[b-u0z0f6dryd] { color: oklch(0.5 0.16 350); }
.pop-pyr__age[b-u0z0f6dryd] { font-size: 11.5px; font-weight: 700; color: oklch(0.36 0.015 258); letter-spacing: -.03em; text-align: center; }
.pop-pyr__track[b-u0z0f6dryd] { height: 17px; display: flex; align-items: center; }
.pop-pyr__track--m[b-u0z0f6dryd] { justify-content: flex-end; }
.pop-pyr__track--f[b-u0z0f6dryd] { justify-content: flex-start; }
.pop-pyr__bar[b-u0z0f6dryd] { height: 100%; min-width: 2px; border-radius: 4px; transition: width .5s cubic-bezier(.2, .7, .3, 1); }
.pop-pyr__bar--m[b-u0z0f6dryd] { background: linear-gradient(90deg, color-mix(in oklch, var(--pp-male), white 14%), var(--pp-male)); border-top-right-radius: 2px; border-bottom-right-radius: 2px; }
.pop-pyr__bar--f[b-u0z0f6dryd] { background: linear-gradient(90deg, var(--pp-female), color-mix(in oklch, var(--pp-female), white 14%)); border-top-left-radius: 2px; border-bottom-left-radius: 2px; }
.pop-pyr__note[b-u0z0f6dryd] { margin-top: 13px; font-size: 11px; line-height: 1.55; color: var(--pp-faint); letter-spacing: -.01em; }
@media (prefers-reduced-motion: reduce) { .pop-pyr__bar[b-u0z0f6dryd] { transition: none; } }

/* 인구 이동 패널 (2026-06-09 핸드오프 재디자인) — crumb + 배지 + 요약 3지표(전입 빨강/전출 파랑/순이동 부호색, 축1)
   + 한 줄 요약 + 종합/전출/전입 탭 + 지역 순위 막대 리스트(전출 빨강▼/전입 파랑▲, 축2).
   두 축(지역 자체 순이동 / 성동구 기준 흐름방향)이 한 요소에 동시에 안 올라가 충돌 없음 (핸드오프 §색규칙). 변수명 --in/--out 은 리스트 방향(전입/전출)이고 색토큰 --mig-in 은 빨강·--mig-out 은 파랑 — 두 축 교차는 의도된 것(점검 시 "색 뒤바뀜" 오인 X).
   호갱노노 톤 승인 예외 — 인구이동 방향축이라 한국 신호색 의미와 별개. close 는 .pop-panel__close 재사용.
   패널 스코프 oklch 토큰(--mig-*) — 글로벌 토큰·다른 페이지 영향 0. 상단 70px = 검색창 도킹 자리(단지·인구 패널 동일). */
.explore-panel--mig[b-u0z0f6dryd] {
    --mig-in: oklch(0.6 0.2 25);          /* 빨강 = 유입 / 전출 방향 */
    --mig-in-deep: oklch(0.5 0.19 27);
    --mig-out: oklch(0.55 0.17 256);      /* 파랑 = 유출 / 전입 방향 */
    --mig-out-deep: oklch(0.47 0.16 258);
    --mig-head: oklch(0.21 0.02 258);
    --mig-lab: oklch(0.5 0.012 260);
    --mig-mut: oklch(0.6 0.01 250);
    --mig-faint: oklch(0.72 0.008 250);
    --mig-line: oklch(0.92 0.004 250);
    --mig-line-soft: oklch(0.95 0.003 250);
    --mig-band: oklch(0.965 0.004 250);
    --mig-bg: oklch(0.985 0.003 250);
    --mig-accent: oklch(0.55 0.17 256);
    --mig-accent-deep: oklch(0.47 0.16 258);
    --mig-accent-soft: oklch(0.95 0.035 256);
    --mig-accent-soft2: oklch(0.97 0.022 256);
    padding: 70px 0 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
/* 헤더 (고정) — 브레드크럼 + 제목·배지·닫기 */
.mig-head[b-u0z0f6dryd] { flex: none; padding: 16px 20px 14px; border-bottom: 1px solid var(--mig-line-soft); }
.mig-crumb[b-u0z0f6dryd] { display: flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 600; color: var(--mig-mut); }
.mig-crumb__sep[b-u0z0f6dryd] { color: var(--mig-faint); }
.mig-crumb__cur[b-u0z0f6dryd] { color: var(--mig-accent-deep); font-weight: 700; }
.mig-head__top[b-u0z0f6dryd] { margin-top: 8px; display: flex; align-items: center; gap: 9px; }
.mig-head__title[b-u0z0f6dryd] { font-size: 22px; font-weight: 800; color: var(--mig-head); letter-spacing: -.03em; }
.mig-badge[b-u0z0f6dryd] { display: inline-flex; align-items: center; gap: 4px; height: 23px; padding: 0 9px; border-radius: 7px; font-size: 11.5px; font-weight: 700; letter-spacing: -.02em; background: var(--mig-accent-soft); color: var(--mig-accent-deep); white-space: nowrap; }
.mig-badge__dot[b-u0z0f6dryd] { width: 6px; height: 6px; border-radius: 50%; background: var(--mig-accent); }
/* 바디 (스크롤) — 섹션 사이 9px 밴드 구분(핸드오프 시그니처). 좌우 패딩은 섹션이 가져 밴드가 full-width 로 뻗음. */
.mig-body[b-u0z0f6dryd] { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
.mig-sec[b-u0z0f6dryd] { padding: 16px 20px 18px; }
.mig-sec + .mig-sec[b-u0z0f6dryd] { border-top: 9px solid var(--mig-band); }
/* 요약 3지표 카드 — 좌측 3px 컬러 바 */
.mig-triple[b-u0z0f6dryd] { display: flex; gap: 8px; }
.mig-stat[b-u0z0f6dryd] { flex: 1; position: relative; overflow: hidden; padding: 11px 12px 12px; border-radius: 13px; background: var(--mig-bg); display: flex; flex-direction: column; gap: 5px; }
.mig-stat[b-u0z0f6dryd]::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--sc, var(--mig-mut)); }
.mig-stat__k[b-u0z0f6dryd] { font-size: 11px; font-weight: 700; color: var(--mig-mut); letter-spacing: -.02em; }
.mig-stat__v[b-u0z0f6dryd] { font-size: 19px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; color: var(--sc, var(--mig-head)); }
.mig-stat--in[b-u0z0f6dryd] { --sc: var(--mig-in-deep); }       /* 전입 빨강 (축1) */
.mig-stat--out[b-u0z0f6dryd] { --sc: var(--mig-out-deep); }     /* 전출 파랑 (축1) */
.mig-stat--netneg[b-u0z0f6dryd] { --sc: var(--mig-out-deep); }  /* 순유출(−) 파랑 */
.mig-stat--netpos[b-u0z0f6dryd] { --sc: var(--mig-in-deep); }   /* 순유입(+) 빨강 */
/* 한 줄 요약 */
.mig-netline[b-u0z0f6dryd] { margin: 12px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--mig-lab); letter-spacing: -.01em; }
.mig-netline b[b-u0z0f6dryd] { font-weight: 800; color: var(--mig-head); }
.mig-netline__n[b-u0z0f6dryd] { font-weight: 800; font-variant-numeric: tabular-nums; }
.mig-netline__n--neg[b-u0z0f6dryd] { color: var(--mig-out-deep); }   /* 순유출 파랑 */
.mig-netline__n--pos[b-u0z0f6dryd] { color: var(--mig-in-deep); }    /* 순유입 빨강 */
/* 탭 — 종합 / 전출·어디로 / 전입·어디서 */
.mig-tabs[b-u0z0f6dryd] { display: flex; gap: 7px; margin-top: 15px; }
.mig-tab[b-u0z0f6dryd] { flex: 1; height: 38px; border: 1px solid var(--mig-line); background: #fff; border-radius: 11px; cursor: pointer; font-size: 12.5px; font-weight: 700; color: var(--mig-lab); letter-spacing: -.03em; transition: background .15s, color .15s, border-color .15s; }
.mig-tab:hover[b-u0z0f6dryd] { color: var(--mig-head); }
.mig-tab.on[b-u0z0f6dryd] { background: var(--mig-accent); border-color: var(--mig-accent); color: #fff; box-shadow: 0 4px 11px color-mix(in oklch, var(--mig-accent), transparent 60%); }
/* 섹션 헤더 + 범례 */
.mig-sechead[b-u0z0f6dryd] { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.mig-sectitle[b-u0z0f6dryd] { font-size: 14px; font-weight: 800; color: var(--mig-head); letter-spacing: -.03em; }
.mig-legend[b-u0z0f6dryd] { display: flex; gap: 12px; margin-left: auto; }
.mig-leg[b-u0z0f6dryd] { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 700; color: var(--mig-lab); }
.mig-leg__dot[b-u0z0f6dryd] { width: 8px; height: 8px; border-radius: 50%; flex: none; }
.mig-leg__dot--out[b-u0z0f6dryd] { background: var(--mig-in); }   /* 전출/순유출 빨강 */
.mig-leg__dot--in[b-u0z0f6dryd] { background: var(--mig-out); }   /* 전입/순유입 파랑 */
/* 순위 리스트 — 92px 1fr auto, 막대 width 트랜지션 */
.mig-rank[b-u0z0f6dryd] { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 1px; }
.mig-rank__row[b-u0z0f6dryd] { display: grid; grid-template-columns: 92px 1fr auto; align-items: center; column-gap: 11px; padding: 7px 8px; border-radius: 10px; }
.mig-rank__row:hover[b-u0z0f6dryd] { background: var(--mig-accent-soft2); }
.mig-rank__name[b-u0z0f6dryd] { font-size: 12.5px; font-weight: 700; color: oklch(0.36 0.015 258); letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mig-rank__pre[b-u0z0f6dryd] { color: var(--mig-faint); font-weight: 600; margin-right: 4px; }
.mig-rank__track[b-u0z0f6dryd] { height: 18px; display: flex; align-items: center; }
.mig-rank__bar[b-u0z0f6dryd] { display: block; height: 9px; min-width: 4px; border-radius: 999px; transition: width .55s cubic-bezier(.2, .7, .3, 1); }
.mig-rank__bar--out[b-u0z0f6dryd] { background: linear-gradient(90deg, color-mix(in oklch, var(--mig-in), white 16%), var(--mig-in)); }   /* 전출 빨강 */
.mig-rank__bar--in[b-u0z0f6dryd] { background: linear-gradient(90deg, var(--mig-out), color-mix(in oklch, var(--mig-out), white 16%)); }   /* 전입 파랑 */
.mig-rank__cnt[b-u0z0f6dryd] { justify-self: end; display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 800; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.mig-rank__vtri[b-u0z0f6dryd] { font-size: 8px; }
.mig-rank__cnt--out[b-u0z0f6dryd] { color: var(--mig-in-deep); }   /* 전출/순유출 빨강 */
.mig-rank__cnt--in[b-u0z0f6dryd] { color: var(--mig-out-deep); }   /* 전입/순유입 파랑 */
.mig-note[b-u0z0f6dryd] { margin: 14px 4px 2px; font-size: 11px; line-height: 1.55; color: var(--mig-faint); letter-spacing: -.01em; }
.mig-panel__empty[b-u0z0f6dryd] { margin: 12px 0; font-size: 12.5px; color: var(--mig-mut); text-align: center; }

.explore-panel[b-u0z0f6dryd] {
    /* handoff DetailPanel 디자인 토큰 (사용자 명시 승인 2026-06-03 + 2026-06-07 단지패널 갱신 핸드오프 — "값 그대로 전면 적용").
       패널 스코프 한정 — 사이트 글로벌 토큰·다른 페이지 영향 0. oklch 256 ≈ 우리 --color-accent(#2563eb) 계열.
       역세권(NearbyStations) 색은 사용자 명시로 현재 노선색 배지 유지 → --metro 토큰 미도입.
       가격/신고가 레드는 핸드오프 --price 대신 우리 한국 컨벤션 --color-up(빨강)/--color-down(파랑) 그대로 사용. */
    --dk-accent: oklch(0.55 0.17 256);
    --dk-accent-deep: oklch(0.47 0.16 258);
    --dk-accent-soft: oklch(0.95 0.035 256);
    --dk-accent-soft2: oklch(0.97 0.022 256);
    --dk-line: oklch(0.92 0.004 250);
    --dk-line-soft: oklch(0.95 0.003 250);
    --dk-ink: oklch(0.21 0.02 258);
    --dk-ink-2: oklch(0.4 0.015 255);
    --dk-lab: oklch(0.5 0.012 260);
    --dk-muted: oklch(0.6 0.01 250);
    --dk-faint: oklch(0.72 0.008 250);
    --dk-chip-bg: oklch(0.96 0.004 250);
    /* 섹션 사이 두꺼운 구분 밴드(9px) + 행/필드 옅은 배경 — 핸드오프 시그니처 */
    --dk-band: oklch(0.965 0.004 250);
    --dk-bg: oklch(0.985 0.003 250);
    /* handoff 폰트 스택 그대로 — Pretendard 미설치 환경은 system-ui 로 자연 폴백 (웹폰트 별도 로드 X). */
    font-family: 'Pretendard', system-ui, sans-serif;
    letter-spacing: -0.01em;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 400px;
    max-width: calc(100% - 16px);
    /* handoff 카드 surface — 순백 */
    background: #fff;
    /* full-height 라 좌·상·하 경계는 화면 모서리 — 우측 경계선·그림자만 (지도 위로 떠 있는 느낌) */
    border-right: 1px solid var(--dk-line);
    /* 우측 모서리만 살짝 둥글게 (좌측은 화면 끝에 붙음) */
    border-radius: 0 18px 18px 0;
    /* handoff 카드 그림자 — 떠 있는 톤 */
    box-shadow: 0 12px 32px rgba(20, 30, 50, 0.16), 0 0 0 1px rgba(20, 30, 50, 0.05);
    overflow-y: auto;
    /* 스크롤 앵커링 차단 — "더보기"로 최근거래 리스트가 길어질 때 브라우저가 보던 위치 유지하려고
       스크롤을 즉시 점프시키는 기본 동작을 끔. 안 끄면 우리 rAF 스르륵 애니가 시작도 전에
       화면이 이미 점프해버림 (2026-06-04 더보기 스무스 스크롤 fix). */
    overflow-anchor: none;
    display: flex;
    flex-direction: column;
    /* 섹션 사이 9px 밴드(아래 .explore-panel__section)가 구분을 담당 → 컨테이너 자식 gap 0.
       좌우 패딩도 0 으로 빼고 각 직계 자식이 자체 좌우 패딩을 가져, 밴드가 패널 full-width 로 뻗음 (핸드오프 .sec 구조). */
    gap: 0;
    /* 상단 패딩 70px — 패널 열리면 검색박스가 패널 폭(400px)에 맞춰 top:0 에 56px 헤더 띠로 도킹됨.
       그 띠(56px) 아래 ~14px 여백을 두고 패널 콘텐츠(단지명·관심·닫기)가 시작 (호갱노노식 — 검색창 아래에 정렬).
       SearchCard.razor.css 의 .search-card--docked 높이(56px)와 정합 — 변경 시 함께 조정.
       모바일(바텀시트)은 아래 @media 가 padding 을 통째로 덮어써 영향 X.
       좌우 패딩은 0 — 직계 자식(.explore-panel > *)이 각자 좌우 20px 을 가짐 (9px 밴드 full-width). */
    padding: 70px 0 0;
    /* M2-2.2 z-index 표준 — DanjiPanel = 100 (좌상단 모듈군 30·SideRail 40·ActionDock 50 위).
       옛 40 (SiteHeader 50 아래 가정) 폐기 — BlankLayout 이후 SiteHeader 부재. */
    z-index: 100;
    /* 좌측에서 슬라이드 인 — translateX 부호 반전 (-12px → 0). 240ms 데이터 영역 톤 */
    animation: explorePanelSlide-b-u0z0f6dryd 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

/* 모든 직계 자식(hero·각 섹션·AI 요약·광고 슬롯)에 좌우 20px — 9px 밴드가 패널 끝까지 뻗게 컨테이너 좌우 패딩을 여기로 이관 (핸드오프 .sec 패딩 구조). */
.explore-panel > *[b-u0z0f6dryd] {
    padding-left: 20px;
    padding-right: 20px;
}

@keyframes explorePanelSlide-b-u0z0f6dryd {
    from { transform: translateX(-12px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

.explore-panel__head[b-u0z0f6dryd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.explore-panel__title-row[b-u0z0f6dryd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.explore-panel__head-actions[b-u0z0f6dryd] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
    /* PC — 상단에 검색박스(도킹 헤더 띠)가 있어 끌어올림 X (옛 -15px 는 검색박스 침범 → 단지명·닫기 가림 버그).
       단지명 행과 같은 높이에서 시작해 검색창 아래에 가지런히 정렬. 모바일은 아래 @media 가 -15px 복원. */
    margin-top: 0;
    margin-right: -10px;
}

/* M2-1.6 — 관심 단지 ♡ 토글. on 상태는 한국 부동산 상승 컨벤션 빨강. */
.explore-panel__fav[b-u0z0f6dryd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--dk-muted);
    font-size: 1.72rem;
    line-height: 1;
    cursor: pointer;
    /* 세로로 살짝 찌그러뜨림 (귀여운 톤, 사용자 요청 2026-06-03). ♥ 이모지가 baseline 아래로 처지는 만큼 1px 끌어올림. */
    transform: scale(0.92, 0.80) translateY(-1px);
    transition: color 120ms ease-out, background-color 150ms ease-out;
}

.explore-panel__fav:hover[b-u0z0f6dryd],
.explore-panel__fav:focus-visible[b-u0z0f6dryd] {
    background: var(--dk-chip-bg);
    color: var(--dk-ink-2);
    outline: none;
}

.explore-panel__fav.is-on[b-u0z0f6dryd] {
    color: oklch(0.6 0.21 25);
}

@media (prefers-reduced-motion: reduce) {
    .explore-panel__fav[b-u0z0f6dryd] {
        transition: none;
    }
}

.explore-panel__title[b-u0z0f6dryd] {
    margin: 0;
    font-size: 1.32rem;
    font-weight: 800;
    color: var(--dk-ink);
    line-height: 1.25;
    letter-spacing: -0.03em;
}

.explore-panel__close[b-u0z0f6dryd] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--dk-muted);
    /* 하트(채워진 빨강 이모지)가 시각 무게가 커서 ✕ 를 키워 균형 (사용자 요청 2026-06-03). ✕ 글리프가 em box 아래쪽에 앉아 위 여백이 떠 보이는 만큼 3px 끌어올림. */
    font-size: 2.3rem;
    line-height: 1;
    transform: translateY(-3px);
    cursor: pointer;
    transition: color 120ms ease-out, background-color 150ms ease-out;
}

.explore-panel__close:hover[b-u0z0f6dryd],
.explore-panel__close:focus-visible[b-u0z0f6dryd] {
    background: var(--dk-chip-bg);
    color: var(--dk-ink-2);
    outline: none;
}

.explore-panel__chips[b-u0z0f6dryd] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.explore-panel__addr[b-u0z0f6dryd] {
    margin: 0;
    font-size: 0.78rem;
    color: var(--dk-muted);
    line-height: 1.45;
    letter-spacing: -0.02em;
}

/* === handoff 스펙칩(dk-chip) — 패널 스코프 한정 info-chip 오버라이드 (전역 .info-chip 불변) === */
.explore-panel__chips .info-chip[b-u0z0f6dryd] {
    height: 27px;
    padding: 0 11px;
    border-radius: 8px;
    background: var(--dk-band);
    color: var(--dk-ink-2);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.02em;
    border: none;
}

/* 신축(★) — handoff 톤 위에서 accent 칩 유지 */
.explore-panel__chips .info-chip.info-chip--new[b-u0z0f6dryd] {
    background: var(--dk-accent-soft);
    color: var(--dk-accent);
}

.explore-panel__metric[b-u0z0f6dryd] {
    padding: 14px 16px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
}

.explore-panel__metric-label[b-u0z0f6dryd] {
    font-size: 0.75rem;
    color: var(--color-text-muted);
    margin-bottom: 4px;
}

.explore-panel__metric-value[b-u0z0f6dryd] {
    font-size: 1.4rem;
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.2;
}

.explore-panel__metric-value.muted[b-u0z0f6dryd] {
    color: var(--color-text-muted);
    font-weight: 500;
    font-size: 1.1rem;
}

.explore-panel__metric-sub[b-u0z0f6dryd] {
    margin-top: 4px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.explore-panel__section-title[b-u0z0f6dryd] {
    margin: 0 0 6px;
    font-size: 0.95rem;
    font-weight: 800;
    color: oklch(0.24 0.02 255);
    letter-spacing: -0.02em;
}

.explore-panel__recent-list[b-u0z0f6dryd] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.explore-panel__recent-item[b-u0z0f6dryd] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: 8px;
    padding: 11px 13px;
    background: var(--dk-bg);
    border-radius: 11px;
    font-size: 0.85rem;
    letter-spacing: -0.01em;
    transition: background-color 120ms ease-out;
}

.explore-panel__recent-item:hover[b-u0z0f6dryd] {
    background: var(--dk-accent-soft2);
}

.explore-panel__recent-date[b-u0z0f6dryd] {
    color: oklch(0.34 0.015 258);
    font-weight: 700;
    font-size: 0.82rem;
}

/* NEW 배지 — 오늘 공개된 거래(공개일=오늘). 빨강 칩 (사용자 명시 2026-06-02). */
.explore-panel__recent-new[b-u0z0f6dryd] {
    display: inline-block;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-up);
    color: #fff;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

/* B46 — 전월세 최근거래 전세/월세 구분 배지 (중립 회색 — 거래유형 구분이지 상승·하락 신호 아님). */
.explore-panel__recent-renttype[b-u0z0f6dryd] {
    display: inline-block;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface-alt, #f1f3f5);
    color: var(--color-text-muted);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.explore-panel__recent-area[b-u0z0f6dryd] {
    color: var(--color-text-muted);
    font-size: 0.78rem;
}

.explore-panel__recent-amount[b-u0z0f6dryd] {
    font-weight: 800;
    font-size: 0.94rem;
    color: var(--dk-ink);
}

.explore-panel__cta[b-u0z0f6dryd] {
    display: block;
    text-align: center;
    padding: 12px 14px;
    background: var(--dk-accent);
    color: #fff;
    border-radius: 10px;
    font-size: 0.94rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    text-decoration: none;
    transition: filter 120ms ease-out;
}

.explore-panel__cta:hover[b-u0z0f6dryd],
.explore-panel__cta:focus-visible[b-u0z0f6dryd] {
    filter: brightness(0.93);
    outline: none;
}

@media (prefers-reduced-motion: reduce) {
    .explore-panel[b-u0z0f6dryd] {
        animation: none;
    }
    .explore-panel__close[b-u0z0f6dryd],
    .explore-panel__cta[b-u0z0f6dryd] {
        transition: none;
    }
}

/* ============================================================
   M2-1.5 — 모바일 (≤ 700px) 바텀시트 변형.
   PC = absolute floating 우상단 (위 CSS), 모바일 = fixed bottom 슬라이드업.
   drag snap 은 후속 마일스톤 — 본 단계는 시트 토글만 (×버튼 / 다른 마커 클릭으로 갱신).
   ============================================================ */
@media (max-width: 700px) {
    /* M2-2 — 모바일도 전체화면. 지도는 부모(.site-main--blank = 100dvh)를 그대로 100% 채움.
       /explore 는 @layout BlankLayout 이라 상단 SiteHeader 가 없음 → 헤더 높이를 뺄 이유가 없음.
       (옛 calc(100dvh - --header-h) 는 없는 헤더 ~66px 만큼 지도 칸을 짧게 만들어 하단에 회색 빈 띠를 남기던 버그.)
       모바일 상단바(.explore-topbar-bg)는 absolute overlay 라 레이아웃 공간을 안 먹으므로 높이 차감 불필요.
       100vh fallback → 100dvh (지원 브라우저는 URL bar 펼침·접힘 실시간 추적). */
    .explore-body[b-u0z0f6dryd] {
        height: 100vh;
        height: 100dvh;
    }

    /* === [B] 필터 바 모바일 압축 ===
       PC: 상단 우측 floating 한 줄. 모바일: 지도 상단 가로 바 (전폭) — 좌우 8px 안쪽 + chip/토글 wrap.
       좁은 화면에서 평형 chip 4 + 옵션 토글 2 + 출처 칩이 한 박스에 빡빡하지 않게 줄바꿈 + 폰트 축소.
       PC 의 우상단 정렬이 모바일에서 화면 우측 1/3 만 차지하면 chip 이 줄줄이 wrap 되어 어색.
       모바일에선 좌·우 12px 양쪽 anchor 로 가로 바 변환. */
    .explore-filterbar[b-u0z0f6dryd] {
        top: 8px;
        left: 8px;
        right: 8px;
        max-width: none;
        padding: 8px 10px;
        gap: 6px 10px;
        /* 필터 바 자체 가로 스크롤 X — 내용물이 wrap 으로 자연 정리 */
        flex-wrap: wrap;
        align-items: center;
        /* 모바일 그림자 살짝 약하게 (지도 위 chrome 톤 절제) */
        box-shadow: var(--shadow-sm);
    }

    /* H1 "지도 탐색" — 모바일 폰트 축소 + eyebrow 숨김 (가로 공간 절약, DOM 보존 — SEO·a11y 무영향) */
    .explore-filterbar__title[b-u0z0f6dryd] {
        font-size: 0.92rem;
    }
    .explore-filterbar__eyebrow[b-u0z0f6dryd] {
        display: none;
    }

    /* 평형 chip — 모바일 hit area 44px 보장 (Apple HIG · WCAG 2.5.5 권장) */
    .explore-pyeong[b-u0z0f6dryd] {
        gap: 5px;
    }
    .explore-pyeong__chip[b-u0z0f6dryd] {
        min-height: 36px;
        padding: 7px 12px;
        font-size: 0.85rem;
    }

    /* 출처·정의 칩 — 모바일 hit area + 펼친 패널 풀폭 가까이 */
    .explore-srcchip__summary[b-u0z0f6dryd] {
        min-height: 36px;
        padding: 7px 12px;
        font-size: 0.82rem;
    }
    .explore-srcchip__body[b-u0z0f6dryd] {
        /* 모바일에서 펼친 카드를 풀폭에 가까이 — viewport 양쪽 8px 패딩 안쪽으로 */
        width: auto;
        max-width: calc(100vw - 24px);
        right: 0;
        left: auto;
    }

    /* M2-2.10 (2026-06-02) — 단지 패널 = 화면 전체를 덮는 풀스크린 (호갱노노식). 옛 바텀시트 3-snap 폐기.
       단지 클릭 시 아래에서 슬라이드업하며 viewport 전체를 채움. 내부 세로 스크롤로 정보 탐색.
       inset: 0 (top·right·bottom·left 0) → fixed 화면 가득. 모서리 라운딩·그림자 X (풀스크린이라 불필요). */
    .explore-panel[b-u0z0f6dryd] {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: 100%;
        max-height: none;
        border: none;
        border-radius: 0;
        box-shadow: none;
        animation: explorePanelSlideUp-b-u0z0f6dryd 280ms cubic-bezier(0.16, 1, 0.3, 1);
        /* z-index 150 — chrome 모듈(ActionDock 50·SideRail 40·밴드 45·검색창 110·햄버거 50 등) 위로 덮음 (풀스크린).
           ③ (2026-06-04) — 모바일 SearchCard docked 는 폐기(display:none)라 패널 위에 검색 띠 없음.
           필터 모달·ActionDock 시트(200)보다는 아래 — 패널 떠 있는 동안 그 시트는 안 열림. */
        z-index: 150;
        /* ③ (2026-06-04) — 상단 검색 띠 reserve 제거. 옛 padding-top 은 56px 검색 도킹 띠 자리를 비웠으나
           (SearchCard 모바일 .search-card--docked 폐기 → display:none), 이제 패널 콘텐츠(단지명·hero)가
           화면 최상단부터 시작. 노치(safe-area-inset-top)만 회피 + 14px 여백. 패널 우상단 닫기(×)·즐겨찾기는
           이 최상단 영역(head-actions)에 자리해 노치 패딩 안쪽에서 시작 → 안 가림.
           하단은 iOS 홈 인디케이터 회피 (safe-area-inset-bottom). */
        padding: calc(env(safe-area-inset-top, 0px) + 14px) 0 calc(24px + env(safe-area-inset-bottom, 0px));
        /* 섹션 사이 9px 밴드가 구분 담당 → 자식 gap 0 (PC 와 동일). 좌우 패딩은 아래 .explore-panel > * 가 18px 부여. */
        gap: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* 패널 내부는 세로 스크롤만 — 가로 swipe 가 뒤 지도로 전달 안 되게 (풀스크린이라 지도 안 보이지만 가드). */
        touch-action: pan-y;
        overscroll-behavior: contain;
    }

    /* 모바일 직계 자식 좌우 18px (PC 20px 보다 좁게) — 9px 밴드는 풀스크린 끝까지 뻗음. */
    .explore-panel > *[b-u0z0f6dryd] {
        padding-left: 18px;
        padding-right: 18px;
    }

    /* 인구 이동 패널 모바일 — 풀스크린은 .explore-panel 규칙 상속(pop 동형). 순위 리스트만 좁은 화면 대비 조정. */
    .mig-rank__row[b-u0z0f6dryd] { grid-template-columns: 70px 1fr auto; gap: 7px; }
    .mig-panel__segbtn[b-u0z0f6dryd] { padding: 10px 8px; }   /* 터치 hit area */
    .mig-rank__cnt[b-u0z0f6dryd] { font-size: 10.5px; }

    /* PC 의 translateX 슬라이드 인 → 모바일은 translateY (아래에서 위로) — keyframes 별도 이름 */
    @keyframes explorePanelSlideUp-b-u0z0f6dryd {
        from { transform: translateY(100%); opacity: 0.6; }
        to { transform: translateY(0); opacity: 1; }
    }

    /* 버튼 모바일에서 약간 크게 (터치 hit area 44px+ 권장) */
    .explore-panel__close[b-u0z0f6dryd] {
        width: 44px;
        height: 44px;
        font-size: 2.45rem;
    }

    .explore-panel__fav[b-u0z0f6dryd] {
        width: 44px;
        height: 44px;
        font-size: 1.85rem;
    }

    /* 모바일 단지명 — PC(1.32rem)와 비슷한 위계로 (사용자 요청 2026-06-04). 줄바꿈 허용은 유지(긴 단지명 짤림 방지). */
    .explore-panel__title[b-u0z0f6dryd] {
        font-size: 1.4rem;
        word-break: keep-all;
    }

    /* 최근 거래 grid — 모바일 좁은 화면에 맞춰 폰트 살짝 축소 */
    .explore-panel__recent-item[b-u0z0f6dryd] {
        font-size: 0.82rem;
        padding: 7px 9px;
    }

    /* 핵심 수치 박스 — 모바일 패딩 축소 */
    .explore-panel__metric[b-u0z0f6dryd] {
        padding: 12px 14px;
    }

    .explore-panel__metric-value[b-u0z0f6dryd] {
        font-size: 1.3rem;
    }

    /* SDK 키 미설정 안내 모바일 압축 */
    .explore-key-missing[b-u0z0f6dryd] {
        padding: 40px 16px;
    }
    .explore-key-missing__box[b-u0z0f6dryd] {
        padding: 20px 22px;
    }
    .explore-key-missing__box h2[b-u0z0f6dryd] {
        font-size: 1.05rem;
    }
    .explore-key-missing__box p[b-u0z0f6dryd] {
        font-size: 0.88rem;
    }

    /* ============================================================
       M2-1.8 — toolbar / panel hero·pyeong-bars·region·stability·cta 모바일 케이스 (2026-05-29).
       PC 케이스 (위 마크업) 보존 — 본 블록에서만 override.
       ============================================================ */

    /* 옵션 토글 (체크박스 2개) — 평형 chip 줄 다음 자연 wrap.
       border-left 분리선이 모바일 wrap 시 어색해 보여 제거 + 상단 hairline 으로 시각 구분.
       (content-mobile-dev 가 .explore-filterbar 모바일 압축 재작업 시 함께 조정.) */
    .explore-options[b-u0z0f6dryd] {
        gap: 12px;
        padding-left: 0;
        border-left: none;
        padding-top: 8px;
        border-top: 1px dashed var(--color-border);
        width: 100%;
    }
    .explore-option[b-u0z0f6dryd] {
        font-size: 0.8rem;
        min-height: 28px; /* 체크박스 hit area 보강 — 옆 텍스트 포함 줄 높이 28 */
    }
    .explore-option input[type="checkbox"][b-u0z0f6dryd] {
        width: 18px;
        height: 18px;
    }

    /* === panel hero 모바일 압축. 검색박스 도킹 띠가 패널 위에 떠 있고, hero(단지명·가격)는 패널 padding-top 아래 시작. === */
    .explore-panel__hero[b-u0z0f6dryd] {
        gap: 6px;
        padding-bottom: 14px;
    }
    /* hero 큰 가격 — PC 1.7rem 보다 축소 + tabular-nums 보존 */
    .explore-panel__hero-price[b-u0z0f6dryd] {
        font-size: 1.4rem;
    }
    .explore-panel__hero-price.muted[b-u0z0f6dryd] {
        font-size: 1.05rem;
    }
    .explore-panel__hero-meta[b-u0z0f6dryd] {
        font-size: 0.74rem;
        margin-top: 4px;
    }
    .explore-panel__hero-row[b-u0z0f6dryd] {
        gap: 8px;
    }
    .explore-panel__hero-sub[b-u0z0f6dryd] {
        font-size: 0.74rem;
    }

    /* ♛ 거래 활발 chip — 320px 화면에서 단지명 옆 wrap 자연. font 살짝 축소 */
    .explore-panel__crown-chip[b-u0z0f6dryd] {
        font-size: 0.72rem;
        padding: 2px 8px 2px 6px;
    }
    .explore-panel__crown-icon[b-u0z0f6dryd] {
        font-size: 0.88rem;
    }
    .explore-panel__title-group[b-u0z0f6dryd] {
        gap: 8px;
    }

    /* 변동 badge — 모바일 폰트 축소 + (12개월) 단어가 가격 옆 inline 길어지는 케이스 차단 */
    .explore-change[b-u0z0f6dryd] {
        font-size: 0.85rem;
        gap: 3px;
    }
    .explore-change__icon[b-u0z0f6dryd] {
        font-size: 0.72rem;
    }
    .explore-change__period[b-u0z0f6dryd] {
        font-size: 0.7rem;
    }

    /* === panel section 모바일 padding 압축 === */
    .explore-panel__section[b-u0z0f6dryd] {
        gap: 8px;
        padding-top: 14px;
    }
    .explore-panel__section-title[b-u0z0f6dryd] {
        font-size: 0.8rem;
    }

    /* === 단지상세 이식 요소 (변동률·등기·거래비용·더보기) 모바일 압축 + 터치 hit area === */
    .explore-var-card[b-u0z0f6dryd] {
        padding: 9px 11px;
    }
    .explore-var-card__value[b-u0z0f6dryd] {
        font-size: 0.98rem;
    }
    .explore-panel__reg-pct[b-u0z0f6dryd] {
        font-size: 1.4rem;
    }
    .explore-panel__cost-field input[b-u0z0f6dryd] {
        width: 112px;
        height: 40px; /* 터치 hit area */
    }
    .explore-panel__more[b-u0z0f6dryd] {
        height: 44px; /* 터치 hit area */
    }
    .explore-panel__kv-row[b-u0z0f6dryd] {
        grid-template-columns: 76px 1fr;
    }

    /* panel pyeong-bars 모바일 시각은 PyeongAvgBars.razor.css 로 이전됨. */

    /* panel region-compare 모바일 시각은 RegionCompareBars.razor.css 로 이전됨. */

    /* panel stability 모바일 시각은 StabilitySignals.razor.css 로 이전됨. */

    /* === panel cta row — PC 가로 2개 → 모바일 세로 stacked. 터치 hit area 44px+ 보장 === */
    .explore-panel__cta-row[b-u0z0f6dryd] {
        flex-direction: column;
        gap: 8px;
    }
    .explore-panel__cta[b-u0z0f6dryd] {
        padding: 12px 14px;
        min-height: 44px;
        font-size: 0.92rem;
        box-sizing: border-box;
    }
    .explore-panel__cta--ghost[b-u0z0f6dryd] {
        flex: 1 1 auto;
        padding: 12px 14px;
        min-height: 44px;
    }

    /* === info-chip --new 모바일 폰트 축소 (★ 신축 chip) === */
    .info-chip.info-chip--new[b-u0z0f6dryd] {
        font-size: 0.72rem;
    }

    /* === inline link 모바일 터치 hit area === */
    .explore-panel__inline-link[b-u0z0f6dryd] {
        font-size: 0.84rem;
        padding: 4px 0;
        min-height: 32px;
    }

    /* === [E] 면책·출처 접이식 칩 모바일 ===
       하단 우측 모서리 유지 (좌측 패널은 PC 만, 모바일은 바텀시트라 충돌 X — 바텀시트 열리면 시트 100 > 칩 30 으로 가림 OK).
       safe-area-inset-bottom — iOS 노치/홈 인디케이터 디바이스에서 칩이 홈바에 안 닿게.
       바텀시트가 닫혀 있을 때만 면책 칩이 보임 (시트 z-index 100 > 칩 z-index 30) — 의도된 시각 위계 (M2-2.2 표준). */
    /* [E] 출처칩 — 모바일 우하단 stack 의 "위 칸" (2026-06-04 사용자 요청 — 출처·가격대 위아래 swap).
       두 칩(출처·가격대) 모두 화면 우측에 위아래로 stack. 좌하단 카카오 스케일바와 안 겹침.
       출처 = 위 칸, 가격대(.price-legend) = 아래 칸 (옛 반대 순서에서 swap).
       기본(광고 OFF = .is-centerad 없음) = 가격대 아래칸(bottom 12) 위로 stack. 광고 ON(.is-centerad) = 광고 위로 더 올림.
       max-width 50% 제거 — 우측 stack 이라 좌우 분리 불필요(펼침 카드 본문 가독성 우선). */
    .explore-disclosure[b-u0z0f6dryd] {
        right: 12px;  /* 광고(가운데 정렬, 좌우 여백 12px)와 우측 가장자리 정렬 */
        left: auto;
        bottom: max(52px, calc(env(safe-area-inset-bottom, 0px) + 48px));
    }

    /* 시트 펼쳤을 때(open) 부모를 최상단으로 — 안 그러면 부모 z-index 30 이 stacking context 를 만들어
       자식 시트(.explore-disclosure__panel z1000)가 그 안에 갇혀 SideRail(40)·다른 chrome 아래로 깔림.
       fixed 자식의 z-index 는 가장 가까운 stacking context(부모) 기준이라 부모를 같이 올려야 함 (2026-06-04 fix). */
    .explore-disclosure[open][b-u0z0f6dryd] {
        z-index: 1000;
    }

    /* 광고 ON — 가격대 아래칸(bottom 110) 위로 + 간격 40 = 150 (위 칸, 광고 안 가리게 가격대 올린 만큼 따라 올림). */
    .is-centerad .explore-disclosure[b-u0z0f6dryd] {
        bottom: max(145px, calc(env(safe-area-inset-bottom, 0px) + 141px));
    }

    /* 칩 자체 — 모바일 hit area 36px (다른 칩과 일관). 폰트 살짝 축소 */
    .explore-disclosure__summary[b-u0z0f6dryd] {
        min-height: 36px;
        padding: 7px 12px;
        font-size: 0.78rem;
    }

    /* 출처 칩 라벨 축약은 이제 PC·모바일 공통 (마크업에서 __label-short 단일 유지) — 모바일 전용 토글 제거됨. */

    /* 펼친 카드 — 모바일에선 "하단 풀폭 바텀시트" (2026-06-04 사용자 요청 — 우측 작은 카드가 우측 레일과 겹쳐서).
       칩 기준 absolute 우측 카드 → 화면 하단 fixed 풀폭으로 덮어씀. 우측 SideRail(레일)·줌과 안 겹침.
       상단 모서리만 둥글게 + drag-handle 시각(::before) + 위로 슬라이드업. 내부 세로 스크롤(긴 면책·주석).
       z-index 1000 — /explore 모든 chrome(SideRail 40·광고 20·칩 30·패널 100·ActionDockSheet/모달 200) 위 최상단.
         (2026-06-04 — 가격대 시트와 동일 격상. 옛 120 은 ActionDockSheet·모달(200) 아래로 가려질 수 있어 1000 으로. 사용자 요청.)
       drag-to-close = exploreSheet.js 가 transform translateY 로 시트를 손가락 따라 내리고, 충분히 내리면 <details> open 해제. */
    /* selector 를 [open] 한 단계 올림(0,2,1) — PC 기본 규칙 `.explore-disclosure__panel`(0,1,0, 이 파일 line 1127)이
       소스 순서상 이 모바일 블록보다 "뒤"에 있어, 같은 specificity 면 cascade 로 PC(absolute)가 이겨버림.
       그러면 모바일에서 바텀시트(fixed) 가 작은 카드(absolute)로 덮여 가격대 시트와 다르게 뜸 → specificity 로 확정 우선.
       패널은 details[open] 일 때만 렌더되므로 [open] 추가해도 동작 동일. (가격대 시트는 PC→모바일 순서라 이 가드 불필요.) */
    .explore-disclosure[open] .explore-disclosure__panel[b-u0z0f6dryd] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: auto;
        max-width: none;
        /* 화면 70% 까지 + 내부 스크롤. dvh (URL bar 펼침·접힘 대응). 면책 5줄 텍스트 그대로 (법적 필수). */
        max-height: 70dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        /* 상단 모서리만 둥글게 (바닥은 화면 끝에 붙음). */
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        border-bottom: none;
        box-shadow: 0 -8px 28px rgba(20, 30, 50, 0.22);
        padding: 18px 18px max(16px, env(safe-area-inset-bottom, 0px));
        gap: 8px;
        z-index: 1000;
        touch-action: pan-y;  /* 시트 내부 세로 스크롤 허용, drag-닫기는 JS 가 처리 (가격대 시트와 동형) */
        /* drag-handle 막대 자리 — 위쪽에 16px 더 비워 ::before 막대가 콘텐츠 안 가림. */
        padding-top: 24px;
    }

    /* exploreSheet.js 가 드래그 시작 시 부여 — 진입 슬라이드업 애니 끄고(손가락이 transform 소유)
       손가락 따라 즉시 이동(transition 없음). 가격대 시트(.price-legend__panel)와 동형. */
    .explore-disclosure__panel.is-dragging[b-u0z0f6dryd] {
        animation: none;
        transition: none;
    }

    /* 손가락을 뗀 뒤 제자리 복귀 / 화면 밖 닫힘 미끄러질 때 부드럽게.
       (드래그 중엔 .is-dragging 이 우선해 transition 0.) */
    .explore-disclosure__panel.is-settling[b-u0z0f6dryd] {
        animation: none;
        transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* 시트 상단 드래그-닫기 손잡이 — 여기만 touch-action:none 이라 브라우저가 세로 제스처 안 가로챔
       (본문은 pan-y 스크롤 유지 → 본문에서 끌면 "움찔움찔" 취소되던 문제를 손잡이 한정 드래그로 해결).
       panel 이 모바일에서 position:fixed 라 grab absolute 의 기준이 됨. 막대는 ::before 로 시각만. */
    .explore-disclosure[open] .explore-disclosure__grab[b-u0z0f6dryd] {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 22px;
        touch-action: none;
        cursor: grab;
        z-index: 1;
    }
    .explore-disclosure[open] .explore-disclosure__grab[b-u0z0f6dryd]::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: var(--color-border);
    }

    /* 펼침 애니 — PC 의 위로 fade(exploreDisclosureOpen) 대신 아래에서 위로 슬라이드업. */
    .explore-disclosure[open] .explore-disclosure__panel[b-u0z0f6dryd] {
        animation: exploreDisclosureSheetUp-b-u0z0f6dryd 280ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    /* 모바일 한정 — 면책 카드 내부 블록 간 여백 압축 (텍스트 보존, 시각만 조밀하게). */
    .explore-disclosure__disclaimer[b-u0z0f6dryd] {
        gap: 4px;
        padding-bottom: 6px;
    }

    /* 면책 5줄 모바일 — 가독성 최소(0.72rem 이상) 지키며 한 단계 축소. 글자 삭제 X. */
    .explore-disclosure__line[b-u0z0f6dryd] {
        font-size: 0.72rem;
        line-height: 1.5;
    }

    /* 출처·주석도 같은 비율로 축소 (PC 0.78/0.74rem → 모바일 0.72/0.7rem). */
    .explore-disclosure__source[b-u0z0f6dryd] {
        font-size: 0.72rem;
        line-height: 1.45;
    }
    .explore-disclosure__note[b-u0z0f6dryd] {
        font-size: 0.7rem;
        line-height: 1.45;
    }
}

/* ============================================================
   M2-1.8 — 320px 이하 (iPhone SE 1세대 / Galaxy Z Fold 외부) 추가 안전 가드.
   region-diff 의 +12.3% 같은 텍스트가 narrow viewport 에서 짤리지 않도록 폰트 추가 축소.
   ============================================================ */
@media (max-width: 360px) {
    .explore-panel__hero-price[b-u0z0f6dryd] {
        font-size: 1.25rem;
    }
    /* pyeong-bars 320px 압축은 PyeongAvgBars.razor.css 로 이전됨. */
    .explore-panel[b-u0z0f6dryd] {
        padding: 16px 14px 22px;
    }
}

/* SDK 키 없을 때 안내 박스 — toolbar 자리 대체. */
.explore-key-missing[b-u0z0f6dryd] {
    padding: 60px 24px;
    display: flex;
    justify-content: center;
}

.explore-key-missing__box[b-u0z0f6dryd] {
    max-width: 560px;
    padding: 28px 32px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.explore-key-missing__box h2[b-u0z0f6dryd] {
    margin: 0 0 10px;
    font-size: 1.15rem;
    color: var(--color-text);
}

.explore-key-missing__box p[b-u0z0f6dryd] {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.explore-key-missing__box code[b-u0z0f6dryd] {
    background: var(--color-surface-alt);
    padding: 1px 6px;
    border-radius: 3px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.88em;
}

.explore-key-missing__box a[b-u0z0f6dryd] {
    color: var(--color-accent);
    text-decoration: underline;
}

/* ============================================================
   M2-2 — [E] 면책·출처 접이식 칩. 지도 위 "하단 우측" 모서리 (.explore-body 안 absolute).
   SiteFooter 가 전체화면에서 화면에 안 보이므로 법적 면책 5줄을 여기서 대체 노출.
   닫혀 있어도 라벨이 항상 보여 1클릭 도달 (「표시광고법」 명확 인식 위치 충족).
   좌측 패널과 안 겹치게 하단 "우측" 배치 (좌측 패널은 좌상~좌하). z-index 30 (좌상단 모듈군 동급 — M2-2.2 표준).
   ============================================================ */
/* PC 우하단 stack 의 "위 칸" — 가격대(.price-legend, bottom 12) 위. 모바일과 같은 순서(출처=위, 가격대=아래). */
.explore-disclosure[b-u0z0f6dryd] {
    position: absolute;
    right: 12px;
    bottom: 56px;
    z-index: 30;
    max-width: calc(100% - 24px);
}

/* 펼칠 때 SideRail(필터 등, z-index 40) 위로 올려 팝업이 안 가려지게 (모바일 동형). */
.explore-disclosure[open][b-u0z0f6dryd] {
    z-index: 1000;
}

/* 드래그-닫기 손잡이 — 모바일 바텀시트 전용 (모바일 @media 가 표시). PC 는 숨김. */
.explore-disclosure__grab[b-u0z0f6dryd] {
    display: none;
}

.explore-disclosure__summary[b-u0z0f6dryd] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 12px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    box-shadow: var(--shadow-sm);
    cursor: pointer;
    list-style: none;
    user-select: none;
    /* 펼침 버튼이 면책 패널 위에 떠야 — open 시 패널이 위로 펼쳐짐 */
    position: relative;
    z-index: 1;
}

.explore-disclosure__summary[b-u0z0f6dryd]::-webkit-details-marker {
    display: none;
}

.explore-disclosure__icon[b-u0z0f6dryd] {
    font-size: 0.92rem;
    line-height: 1;
}

/* 출처 칩 라벨 — PC·모바일 공통 축약("출처·안내", 2026-06-04 사용자 요청 — PC 도 모바일처럼 짧게).
   풀 라벨 span(__label-full) 자체를 마크업에서 제거 → display 토글 CSS 불필요. summary aria-label 이 풀 설명 보존(스크린리더). */

.explore-disclosure__summary:hover[b-u0z0f6dryd],
.explore-disclosure[open] .explore-disclosure__summary[b-u0z0f6dryd] {
    color: var(--color-text);
    border-color: var(--color-text-muted);
    box-shadow: var(--shadow-md);
}

.explore-disclosure__summary:focus-visible[b-u0z0f6dryd] {
    outline: 2px solid transparent;
    outline-offset: 2px;
    box-shadow: 0 0 0 3px var(--color-accent-soft);
}

/* 펼친 카드 — 칩 위로 펼쳐짐 (하단 모서리라 위 방향). 스크롤 가능. */
.explore-disclosure__panel[b-u0z0f6dryd] {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    width: 360px;
    max-width: 88vw;
    max-height: calc(100vh - var(--header-h, 64px) - 80px);
    overflow-y: auto;
    padding: 16px 18px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.explore-disclosure__disclaimer[b-u0z0f6dryd] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-border);
}

.explore-disclosure__line[b-u0z0f6dryd] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.55;
    color: var(--color-text-muted);
}

.explore-disclosure__source[b-u0z0f6dryd] {
    margin: 0;
    font-size: 0.78rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.explore-disclosure__source-label[b-u0z0f6dryd] {
    font-weight: 600;
    color: var(--color-text);
    margin-right: 4px;
}

.explore-disclosure__note[b-u0z0f6dryd] {
    margin: 0;
    font-size: 0.74rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

/* 펼침 fade/slide — reduced-motion 시 즉시 (아래 reduced-motion 블록에서 차단). */
.explore-disclosure[open] .explore-disclosure__panel[b-u0z0f6dryd] {
    animation: exploreDisclosureOpen-b-u0z0f6dryd 180ms ease-out;
}

@keyframes exploreDisclosureOpen-b-u0z0f6dryd {
    from { opacity: 0; transform: translateY(6px); }
    to { opacity: 1; transform: translateY(0); }
}

/* 모바일 바텀시트 슬라이드업 — 아래에서 위로 (PC fade 와 다름). 위 모바일 @media 가 이 keyframe 으로 교체. */
@keyframes exploreDisclosureSheetUp-b-u0z0f6dryd {
    from { transform: translateY(100%); opacity: 0.6; }
    to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    /* 셀렉터 동일 — PC fade·모바일 시트업 둘 다 즉시(animation:none). */
    .explore-disclosure[open] .explore-disclosure__panel[b-u0z0f6dryd] {
        animation: none;
    }
    /* 모바일 드래그-닫기 복귀/닫힘 transition 도 즉시 (가격대 시트 reduced-motion 과 동형). */
    .explore-disclosure__panel[b-u0z0f6dryd],
    .explore-disclosure__panel.is-settling[b-u0z0f6dryd] {
        animation: none;
        transition: none;
    }
}

/* ============================================================
   M2-1.8 — 풍부함 적극 안 (재선정 2026-05-29).
   toolbar 옵션 토글 / 패널 hero / 평형 bars / 지역 비교 / 회복률·sparkline / 변동 badge.
   신규 토큰 정의 0건 — 기존 --color-accent / --color-up / --color-down / --color-accent-2-soft 만.
   ============================================================ */

/* === 필터 바 안 옵션 토글 (랭킹 표시) ===
   평형 chip 다음에 border-left 분리선으로 시각 구분. */
.explore-options[b-u0z0f6dryd] {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    align-items: center;
    padding-left: 12px;
    border-left: 1px solid var(--color-border);
}

.explore-option[b-u0z0f6dryd] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
}

.explore-option input[type="checkbox"][b-u0z0f6dryd] {
    width: 16px;
    height: 16px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.explore-option:hover[b-u0z0f6dryd] {
    color: var(--color-text);
}

/* === panel hero — 단지 진입 5초 인지 === */
.explore-panel__hero[b-u0z0f6dryd] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    /* 좌우 패딩은 .explore-panel > * 가 부여. 하단 패딩 후 다음 섹션의 9px 밴드가 구분 (1px 보더 제거). */
    padding-bottom: 18px;
    border-bottom: none;
}

.explore-panel__title-group[b-u0z0f6dryd] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    flex: 1 1 auto;
    min-width: 0;
}

/* 거래 활발 chip — accent 파랑 톤 + ♛ 아이콘. tooltip 으로 정확 percent_rank 노출. */
.explore-panel__crown-chip[b-u0z0f6dryd] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 24px;
    padding: 0 9px;
    /* handoff StatusBadge active(거래 활발) — soft green. 상승·하락 신호색(빨강/파랑)과 분리된 상태 카테고리 색. */
    background: oklch(0.95 0.04 150);
    color: oklch(0.5 0.13 150);
    border-radius: 7px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.01em;
    white-space: nowrap;
    cursor: help;
}

.explore-panel__crown-icon[b-u0z0f6dryd] {
    font-size: 0.82rem;
    line-height: 1;
}

/* hero 큰 가격 + 변동 badge 한 줄. */
.explore-panel__hero-meta[b-u0z0f6dryd] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--dk-muted);
    letter-spacing: -0.01em;
    margin-top: 6px;
}

.explore-panel__hero-row[b-u0z0f6dryd] {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 2px;
}

.explore-panel__hero-price[b-u0z0f6dryd] {
    font-size: 1.92rem;
    font-weight: 800;
    color: var(--dk-ink);
    line-height: 1.1;
    letter-spacing: -0.03em;
}

.explore-panel__hero-price.muted[b-u0z0f6dryd] {
    color: var(--dk-muted);
    font-weight: 600;
    font-size: 1.2rem;
    letter-spacing: -0.02em;
}

.explore-panel__hero-sub[b-u0z0f6dryd] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
    line-height: 1.45;
}

.explore-panel__hero-sub.muted[b-u0z0f6dryd] {
    color: var(--color-text-muted);
}

/* === 변동 badge (상승·하락 다중 감각 — 색 + 아이콘 + 텍스트, WCAG 1.4.1) === */
.explore-change[b-u0z0f6dryd] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: 0.9rem;
    font-weight: 800;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.explore-change__icon[b-u0z0f6dryd] {
    font-size: 0.66rem;
    line-height: 1;
}

.explore-change__pct[b-u0z0f6dryd] {
    font-variant-numeric: tabular-nums;
}

.explore-change__period[b-u0z0f6dryd] {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--dk-faint);
}

.explore-change--up[b-u0z0f6dryd] {
    color: var(--color-up);
}

.explore-change--down[b-u0z0f6dryd] {
    color: var(--color-down);
}

/* === panel section 공통 — 섹션 사이 9px 밴드 구분 (핸드오프 시그니처).
   좌우 패딩은 .explore-panel > * 가 부여 → 밴드가 패널 full-width 로 뻗음. === */
.explore-panel__section[b-u0z0f6dryd] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding-top: 18px;
    padding-bottom: 20px;
    border-top: 9px solid var(--dk-band);
}

/* hero 다음 첫 섹션도 밴드로 구분 (hero 의 1px 보더 제거분 대체). 단 컨테이너 상단 70px 검색 도킹 자리는 유지. */
.explore-panel__section:last-of-type[b-u0z0f6dryd] {
    padding-bottom: 22px;
}

.explore-panel__note[b-u0z0f6dryd] {
    margin: 4px 0 0;
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.45;
    color: oklch(0.58 0.01 250);
    letter-spacing: -0.01em;
}

.explore-panel__inline-link[b-u0z0f6dryd] {
    display: inline-block;
    margin-top: 4px;
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--dk-accent);
    letter-spacing: -0.01em;
    text-decoration: none;
}

.explore-panel__inline-link:hover[b-u0z0f6dryd],
.explore-panel__inline-link:focus-visible[b-u0z0f6dryd] {
    text-decoration: underline;
    outline: none;
}

/* === 거래유형 세그먼트 + 평형 드롭다운 한 줄 (핸드오프 filter-row, 2026-06-07).
   옛 평형 선택칩(pill) → 드롭다운 전환 + 매매/전월세 세그먼트 신규 (전월세는 디자인만). === */
.explore-panel__filter-row[b-u0z0f6dryd] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0 2px;
}

/* 매매/전월세 세그먼트 — 추이 기간 세그먼트와 동일 언어(band 트랙 + 흰 알약). */
.explore-panel__type-seg[b-u0z0f6dryd] {
    flex: none;
    display: inline-flex;
    gap: 0;
    background: var(--dk-band);
    border-radius: 10px;
    padding: 3px;
}

.explore-type-seg__btn[b-u0z0f6dryd] {
    height: 32px;
    min-width: 64px;
    padding: 0 14px;
    background: none;
    border: none;
    border-radius: 8px;
    font-size: 0.81rem;
    font-weight: 600;
    color: oklch(0.46 0.012 255);
    font-family: inherit;
    letter-spacing: -0.02em;
    text-align: center;
    cursor: pointer;
    transition: background-color 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out;
}

.explore-type-seg__btn:hover[b-u0z0f6dryd],
.explore-type-seg__btn:focus-visible[b-u0z0f6dryd] {
    color: var(--dk-accent);
    outline: none;
}

.explore-type-seg__btn.is-active[b-u0z0f6dryd] {
    background: #fff;
    color: var(--dk-accent-deep);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(20, 30, 50, 0.12);
}

/* 평형 드롭다운 — pill 대비 단지별 가변 평형(2~8개) 정돈성↑. 우측 체브론은 라인아이콘 오버레이. */
.explore-panel__area-field[b-u0z0f6dryd] {
    margin-left: auto;
    position: relative;
    display: flex;
    align-items: center;
}

.explore-area-sel[b-u0z0f6dryd] {
    appearance: none;
    -webkit-appearance: none;
    height: 34px;
    padding: 0 31px 0 13px;
    border: 1px solid var(--dk-line);
    border-radius: 10px;
    background: #fff;
    font-family: inherit;
    font-size: 0.81rem;
    font-weight: 700;
    color: var(--dk-ink);
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.explore-area-sel:hover[b-u0z0f6dryd] {
    border-color: color-mix(in oklch, var(--dk-accent), transparent 55%);
}

.explore-area-sel:focus[b-u0z0f6dryd],
.explore-area-sel:focus-visible[b-u0z0f6dryd] {
    outline: none;
    border-color: var(--dk-accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--dk-accent), transparent 82%);
}

.explore-area-field__chev[b-u0z0f6dryd] {
    position: absolute;
    right: 10px;
    color: var(--dk-muted);
    pointer-events: none;
    display: flex;
}

@media (prefers-reduced-motion: reduce) {
    .explore-type-seg__btn[b-u0z0f6dryd],
    .explore-area-sel[b-u0z0f6dryd] {
        transition: none;
    }
}

/* === 패널 실거래가 추이 — 헤더(제목 + 기간칩) + 차트 === */
.explore-panel__trend-head[b-u0z0f6dryd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    flex-wrap: wrap;
}

/* 추이 차트 컨테이너 — 좌우 음수 마진 제거 (ApexCharts 가 마우스 X 좌표를 컨테이너 폭 기준으로 계산하는데
   음수 마진이 그 폭 인식과 어긋나 hover 세로선·점·tooltip 이 왼쪽에 붙어 안 움직이던 원인).
   가로 폭은 우측 Y축 라벨 제거(ShowYLabelsRight=false) + Grid.Padding 축소로 이미 확보됨. */
.explore-panel__trend .djtc-chart[b-u0z0f6dryd] {
    width: 100%;
}

/* 패널 추이 차트 tooltip — 호갱노노 톤(상세 .danji-trend__chart 와 동일).
   top 을 상단 고정(!important 가 ApexCharts inline top 을 덮음) → 박스는 위에 붙고, left 는 ApexCharts 가
   마우스 X 로 갱신 → 가로만 따라감(2026-06-05 사용자 요청).
   ※ 박스 높이 축소(패딩·줄높이·마커 크기)는 ApexCharts 기본 점·글씨 정렬을 깨뜨려 제거 — 기본 레이아웃 유지
     (사용자 지시 "안되면 높이 줄이지마"). 톤만 입히고 내부 정렬은 라이브러리 기본값 그대로. */
.explore-panel__trend[b-u0z0f6dryd]  .apexcharts-tooltip {
    top: 6px !important;
    background: var(--color-surface) !important;
    border: 1px solid var(--color-border) !important;
    border-radius: 9px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.1) !important;
    color: var(--color-text) !important;
}

.explore-panel__trend[b-u0z0f6dryd]  .apexcharts-tooltip-title {
    background: var(--color-bg-warm) !important;
    border-bottom: 1px solid var(--color-border) !important;
    font-weight: 600 !important;
}

/* handoff Segmented(dk-seg) — 그레이 트랙 + 활성 시 흰 칩이 떠오름 */
.explore-panel__trend-range[b-u0z0f6dryd] {
    display: inline-flex;
    gap: 0;
    background: var(--dk-chip-bg);
    border-radius: 11px;
    padding: 3px;
}

.explore-trend-range__chip[b-u0z0f6dryd] {
    height: 30px;
    padding: 0 13px;
    background: none;
    border: none;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    color: oklch(0.46 0.012 255);
    font-family: inherit;
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: background-color 150ms ease-out, color 150ms ease-out, box-shadow 150ms ease-out;
}

.explore-trend-range__chip:hover[b-u0z0f6dryd],
.explore-trend-range__chip:focus-visible[b-u0z0f6dryd] {
    color: var(--dk-accent);
    outline: none;
}

.explore-trend-range__chip.is-active[b-u0z0f6dryd] {
    background: #fff;
    color: var(--dk-accent);
    font-weight: 700;
    box-shadow: 0 1px 3px rgba(20, 30, 50, 0.12);
}

.explore-panel__trend-loading[b-u0z0f6dryd] {
    height: 270px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
}

@media (prefers-reduced-motion: reduce) {
    .explore-trend-range__chip[b-u0z0f6dryd] {
        transition: none;
    }
}

/* panel pyeong-bars 시각은 공용 컴포넌트로 이전됨 →
   Components/Shared/DanjiSections/PyeongAvgBars.razor(.css). */

.muted[b-u0z0f6dryd] {
    color: var(--color-text-muted);
}

/* panel region-compare 시각은 공용 컴포넌트로 이전됨 →
   Components/Shared/DanjiSections/RegionCompareBars.razor(.css). */

/* panel stability(회복률 gauge / sparkline / 등기·해제) 시각은 공용 컴포넌트로 이전됨 →
   Components/Shared/DanjiSections/StabilitySignals.razor(.css). */

/* === panel cta row — 단지 상세 + 비교 추가 (primary + ghost) === */
.explore-panel__cta-row[b-u0z0f6dryd] {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-top: 4px;
}

.explore-panel__cta--primary[b-u0z0f6dryd] {
    flex: 1 1 auto;
}

.explore-panel__cta--ghost[b-u0z0f6dryd] {
    flex: 0 0 auto;
    padding: 10px 14px;
    background: transparent;
    color: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    font-size: 0.92rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
    transition: background-color 120ms ease-out, color 120ms ease-out;
}

.explore-panel__cta--ghost:hover[b-u0z0f6dryd],
.explore-panel__cta--ghost:focus-visible[b-u0z0f6dryd] {
    background: var(--color-accent-soft);
    outline: none;
}

/* === info-chip --new (신축 ★) variant === */
.info-chip.info-chip--new[b-u0z0f6dryd] {
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: 600;
}

/* === reduced-motion — 모든 transition off === */
@media (prefers-reduced-motion: reduce) {
    /* pyeong-bars / gauge / sparkline 의 reduced-motion 은 각 공용 컴포넌트 css 가 보유. */
    .explore-panel__cta--ghost[b-u0z0f6dryd] {
        transition: none;
    }
}

/* ============================================================
   단지상세 이식 (2026-06-04) — 상세 접근 루트 제거 대비, 패널에 상세 항목 통합.
   변동률 카드 / 최근거래 더보기 / 연락처·행정 / 등기 완료 비율 / 거래 비용 안내.
   톤 = 기존 패널 --dk-* 스코프 변수 + section hairline 일관.
   ============================================================ */

/* === 변동률 카드 2개 (전년 동월 + 전월) — 추이 차트 밑 === */
.explore-panel__variance[b-u0z0f6dryd] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 2px;
}

.explore-var-card[b-u0z0f6dryd] {
    padding: 10px 12px;
    background: var(--dk-chip-bg);
    border-radius: 10px;
}

.explore-var-card__label[b-u0z0f6dryd] {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: -0.01em;
}

.explore-var-card__value[b-u0z0f6dryd] {
    margin-top: 3px;
    display: flex;
    align-items: baseline;
    gap: 3px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--dk-ink);
    letter-spacing: -0.02em;
}

.explore-var-card__icon[b-u0z0f6dryd] {
    font-size: 0.78rem;
}

/* 상승/하락 색 — 패널 hero 배지와 동일 토큰 (한국 컨벤션 빨강/파랑). */
.explore-var-card__value.explore-change--up[b-u0z0f6dryd] {
    color: var(--color-up);
}

.explore-var-card__value.explore-change--down[b-u0z0f6dryd] {
    color: var(--color-down);
}

/* === 최근거래 더보기/접기 버튼 === */
.explore-panel__more[b-u0z0f6dryd] {
    margin-top: 8px;
    /* 더보기 클릭 후 scrollIntoView(block:'end') 가 이 버튼을 패널 바닥에 맞출 때 확보할 아래 여백.
       버튼이 화면 바닥에 딱 붙지 않고 96px 위에서 멈춤 (사용자 요청 2026-06-04). */
    scroll-margin-bottom: 96px;
    width: 100%;
    height: 44px;
    background: #fff;
    border: 1px solid var(--dk-line);
    border-radius: 12px;
    font-size: 0.84rem;
    font-weight: 700;
    color: var(--dk-accent-deep);
    font-family: inherit;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: background-color 150ms ease-out, border-color 150ms ease-out;
}

.explore-panel__more:hover[b-u0z0f6dryd],
.explore-panel__more:focus-visible[b-u0z0f6dryd] {
    background: var(--dk-accent-soft);
    border-color: color-mix(in oklch, var(--dk-accent), transparent 60%);
    outline: none;
}

/* 해제 거래 — 회색 배지 + 금액 취소선 (M1.8 — 무효/취소 컨벤션, 신호색과 분리). */
.explore-panel__recent-cancel[b-u0z0f6dryd] {
    display: inline-block;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-up-soft, rgba(192, 57, 43, 0.1));
    color: var(--color-up);
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

/* 신고가 칩 — 평형별 역대 최고가 경신 (한국 컨벤션: 빨강 + ↑ 아이콘 + 텍스트, WCAG 1.4.1). */
.explore-panel__recent-high[b-u0z0f6dryd] {
    display: inline-flex;
    align-items: center;
    gap: 1px;
    margin-left: 5px;
    padding: 0 5px;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-up-soft, rgba(192, 57, 43, 0.1));
    color: var(--color-up);
    font-size: 0.6rem;
    font-weight: 800;
    letter-spacing: 0.02em;
    vertical-align: middle;
}

.explore-panel__recent-high-icon[b-u0z0f6dryd] {
    font-size: 0.66rem;
    line-height: 1;
}

/* 신고가 거래는 금액도 빨강 강조 (해제와 동시 적용 시 해제 취소선이 우선). */
.explore-panel__recent-amount.is-high[b-u0z0f6dryd] {
    color: var(--color-up);
}

.explore-panel__recent-amount.is-cancelled[b-u0z0f6dryd] {
    color: var(--color-text-muted);
    text-decoration: line-through;
    font-weight: 600;
}

/* === 연락처 — 아이콘 칩 + 전화 링크 (핸드오프 contact-row) === */
.explore-panel__contact-row[b-u0z0f6dryd] {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 13px 14px;
    border-radius: 12px;
    background: var(--dk-bg);
}

.explore-panel__contact-ico[b-u0z0f6dryd] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--dk-accent-soft);
    color: var(--dk-accent-deep);
}

.explore-panel__contact-k[b-u0z0f6dryd] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--dk-muted);
    letter-spacing: -0.02em;
}

.explore-panel__contact-v[b-u0z0f6dryd] {
    margin-left: auto;
    font-size: 0.94rem;
    font-weight: 800;
    color: var(--dk-ink);
    letter-spacing: -0.01em;
    text-decoration: none;
}

.explore-panel__contact-v:hover[b-u0z0f6dryd],
.explore-panel__contact-v:focus-visible[b-u0z0f6dryd] {
    text-decoration: underline;
    outline: none;
}

/* === 등기 완료 비율 — 큰 % + 분자/분모 === */
.explore-panel__reg[b-u0z0f6dryd] {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}

.explore-panel__reg-pct[b-u0z0f6dryd] {
    font-size: 2.25rem;
    font-weight: 800;
    color: var(--dk-ink);
    letter-spacing: -0.04em;
    line-height: 1;
}

.explore-panel__reg-unit[b-u0z0f6dryd] {
    margin-left: 1px;
    font-size: 1.05rem;
    font-weight: 800;
    color: var(--dk-lab);
}

.explore-panel__reg-sub[b-u0z0f6dryd] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--dk-muted);
}

.explore-panel__reg-sub b[b-u0z0f6dryd] {
    color: var(--dk-accent-deep);
    font-weight: 800;
}

/* 등기 완료율 프로그레스 바 (핸드오프 reg-bar/reg-fill) — accent→accent-deep 그라데이션 채움. */
.explore-panel__reg-bar[b-u0z0f6dryd] {
    margin-top: 4px;
    height: 8px;
    border-radius: 99px;
    background: var(--dk-band);
    overflow: hidden;
}

.explore-panel__reg-fill[b-u0z0f6dryd] {
    height: 100%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--dk-accent), var(--dk-accent-deep));
}

/* === 거래 비용 안내 — 매수가 입력 + 산식 행 === */
.explore-panel__cost-input[b-u0z0f6dryd] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.explore-panel__cost-input label[b-u0z0f6dryd] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--dk-ink-2);
}

.explore-panel__cost-field[b-u0z0f6dryd] {
    display: flex;
    align-items: center;
    gap: 6px;
}

.explore-panel__cost-field input[b-u0z0f6dryd] {
    width: 120px;
    height: 44px;
    padding: 0 13px;
    background: #fff;
    border: 1.5px solid var(--dk-line);
    border-radius: 11px;
    font-size: 0.94rem;
    font-weight: 700;
    color: var(--dk-ink);
    font-family: inherit;
    text-align: right;
    transition: border-color 150ms ease-out, box-shadow 150ms ease-out;
}

.explore-panel__cost-field input:focus[b-u0z0f6dryd],
.explore-panel__cost-field input:focus-visible[b-u0z0f6dryd] {
    border-color: var(--dk-accent);
    box-shadow: 0 0 0 3px color-mix(in oklch, var(--dk-accent), transparent 82%);
    outline: none;
}

.explore-panel__cost-field span[b-u0z0f6dryd] {
    font-size: 0.82rem;
    color: var(--color-text-muted);
}

.explore-panel__cost-rows[b-u0z0f6dryd] {
    list-style: none;
    margin: 4px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 행은 박스가 아니라 hairline 으로 구분 (핸드오프 cost-row). */
.explore-panel__cost-rows li[b-u0z0f6dryd] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    padding: 11px 2px;
    font-size: 0.85rem;
    color: var(--color-text);
    letter-spacing: -0.01em;
}

.explore-panel__cost-rows li + li[b-u0z0f6dryd] {
    border-top: 1px solid var(--dk-line-soft);
}

.explore-panel__cost-rows li span:last-child[b-u0z0f6dryd] {
    font-weight: 700;
    color: var(--dk-ink);
}

/* 농어촌특별세 — 체크박스 행 (전용 85㎡ 초과 시만 부과). */
.explore-panel__cost-rows li.explore-panel__cost-check label[b-u0z0f6dryd] {
    display: flex;
    align-items: center;
    gap: 7px;
    cursor: pointer;
    font-weight: inherit;
}

.explore-panel__cost-rows li.explore-panel__cost-check input[type="checkbox"][b-u0z0f6dryd] {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--dk-accent, var(--color-accent));
    cursor: pointer;
    flex: none;
}

/* 체크 해제 시 — 금액은 흐리게 + 취소선 (합계 미반영 신호). */
.explore-panel__cost-rows li.explore-panel__cost-check .is-off[b-u0z0f6dryd] {
    color: var(--color-text-muted);
    text-decoration: line-through;
}

.explore-panel__cost-rows li.is-subtotal[b-u0z0f6dryd] {
    margin-top: 2px;
    border-top: 1.5px solid var(--dk-line);
    font-weight: 800;
}

.explore-panel__cost-rows li.is-subtotal span:first-child[b-u0z0f6dryd] {
    font-weight: 800;
    color: var(--dk-ink);
}

.explore-panel__cost-rows li.is-subtotal span:last-child[b-u0z0f6dryd] {
    font-weight: 800;
}

/* 예상 합계 — 별도 큰 accent 박스 (핸드오프 cost-total). */
.explore-panel__cost-rows li.is-total[b-u0z0f6dryd] {
    margin-top: 9px;
    padding: 15px 16px;
    align-items: center;
    border-top: none;
    border-radius: 13px;
    background: var(--dk-accent-soft);
    box-shadow: inset 0 0 0 1px color-mix(in oklch, var(--dk-accent), transparent 72%);
    font-weight: 800;
}

.explore-panel__cost-rows li.is-total span:first-child[b-u0z0f6dryd] {
    font-size: 0.88rem;
    font-weight: 800;
    color: var(--dk-accent-deep);
}

.explore-panel__cost-rows li.is-total span:last-child[b-u0z0f6dryd] {
    font-size: 1.25rem;
    font-weight: 800;
    color: var(--dk-accent-deep);
    letter-spacing: -0.03em;
}

@media (prefers-reduced-motion: reduce) {
    .explore-panel__more[b-u0z0f6dryd],
    .explore-panel__recent-item[b-u0z0f6dryd],
    .explore-panel__cost-field input[b-u0z0f6dryd] {
        transition: none;
    }
}

/* ============================================================
   인구·인구이동 패널 = 모바일 하단 드래그 시트 (2026-06-10 사용자 요청 — 비교 패널과 동일 3단 시트).
   PC 는 기존 좌측 패널 그대로(이 @media 밖). 모바일은 .explore-panel 풀스크린(inset:0)을 하단 시트로 오버라이드.
   드래그·snap 은 범용 exploreSheet(JS) 가 data-bottom-sheet + data-sheet-grip 으로 처리.
   ============================================================ */
.pop-panel__grip[b-u0z0f6dryd] { display: none; } /* PC 숨김 — 모바일 @media 에서만 표시. */

@media (max-width: 700px) {
    .explore-panel--pop[b-u0z0f6dryd],
    .explore-panel--mig[b-u0z0f6dryd] {
        position: absolute;
        top: auto;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        /* full(위로 끝까지)일 때 화면 거의 꽉 — 상단 여유만(2026-06-10). */
        height: 94vh;
        max-height: 94vh;
        border: none;
        border-top: 1px solid var(--color-border);
        border-radius: 18px 18px 0 0;
        box-shadow: 0 -8px 28px rgba(20, 30, 50, 0.16);
        /* 3단 snap — 전체(0)/반(52)/헤더만(82). JS 가 --sheet-y 조절. 기본 반높이. */
        transform: translateY(var(--sheet-y, 52%));
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        animation: none;
        z-index: 130;
        touch-action: pan-y;
        /* 검색창 도킹용 상단 패딩 제거(시트라 불필요) — grip + 헤더가 시트 최상단부터. */
        padding: 0;
    }
    .explore-panel--pop.is-dragging[b-u0z0f6dryd],
    .explore-panel--mig.is-dragging[b-u0z0f6dryd] {
        transition: none;
    }

    /* 드래그 핸들 — 비교 시트와 동일(가로 full + 세로 ~44px hit). */
    .explore-panel--pop .pop-panel__grip[b-u0z0f6dryd],
    .explore-panel--mig .pop-panel__grip[b-u0z0f6dryd] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 44px;
        padding: 14px 0;
        cursor: grab;
        touch-action: none;
        flex: none;
    }
    .explore-panel--pop .pop-panel__grip:active[b-u0z0f6dryd],
    .explore-panel--mig .pop-panel__grip:active[b-u0z0f6dryd] { cursor: grabbing; }
    .explore-panel--pop .pop-panel__grip span[b-u0z0f6dryd],
    .explore-panel--mig .pop-panel__grip span[b-u0z0f6dryd] {
        width: 48px;
        height: 5px;
        border-radius: 3px;
        background: var(--color-border);
    }
}
/* _content/AptSonpoom/Components/Pages/ExploreParts/ActionDock.razor.rz.scp.css */
/* ============================================================
   ActionDock scoped CSS — /explore 우상단 사이트 메뉴 (홈·실거래·토허제·관심).
   2026-06-03 — 더보기(☰) 시트 폐기 + 라인 SVG 아이콘 적용 (디자인 핸드오프). z-index 50.
   2026-06-04 — 모바일(≤43.75em)만 햄버거(☰) 드롭다운으로 재구성 (호갱노노식).
                PC 는 4버튼 가로 dock 그대로 (햄버거 숨김 + 메뉴 항상 인라인 표시).
   ============================================================ */

.action-dock[b-95pv6eg7zu] {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 50;
    display: flex;
    gap: 4px;
    padding: 4px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.action-dock:hover[b-95pv6eg7zu] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* 햄버거 버튼 — PC 숨김 (모바일 @media 에서만 표시). */
.action-dock__hamburger[b-95pv6eg7zu] {
    display: none;
}

/* 메뉴 — PC 가로 인라인 4버튼 (현 룩 그대로, 항상 표시). */
.action-dock__menu[b-95pv6eg7zu] {
    display: flex;
    gap: 4px;
}

.action-dock__btn[b-95pv6eg7zu] {
    min-width: 48px;
    padding: 5px 6px;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    cursor: pointer;
    text-decoration: none;
    font: inherit;
    transition: background 120ms ease-out, border-color 120ms ease-out;
}

.action-dock__btn:hover[b-95pv6eg7zu],
.action-dock__btn:focus-visible[b-95pv6eg7zu] {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    outline: 0;
}

/* 라인 SVG 아이콘 — currentColor 상속(기본 text, hover accent). */
.action-dock__icon[b-95pv6eg7zu] {
    display: block;
    color: var(--color-text);
}

.action-dock__btn:hover .action-dock__icon[b-95pv6eg7zu],
.action-dock__btn:focus-visible .action-dock__icon[b-95pv6eg7zu] {
    color: var(--color-accent);
}

/* 아이콘 아래 한글 라벨. */
.action-dock__label[b-95pv6eg7zu] {
    font-size: 0.62rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.action-dock__btn:hover .action-dock__label[b-95pv6eg7zu],
.action-dock__btn:focus-visible .action-dock__label[b-95pv6eg7zu] {
    color: var(--color-accent);
}

/* ============================================================
   모바일 (≤ 700px) — 햄버거(☰) 드롭다운 (호갱노노식, 2026-06-04).
   ☰ 만 우상단에 남고, 탭하면 ☰ 아래 우측 정렬 드롭다운으로 4개 노출.
   검색창이 상단 폭을 넓게 차지하도록 dock 폭을 햄버거 1개로 축소.
   ============================================================ */
@media (max-width: 43.75em) {
    /* 2026-06-05 handoff — dock 컨테이너 = 위치 anchor 만 (드롭다운 absolute 기준). top 12 + safe-area 로 검색 알약과 같은 줄.
       자체 카드 룩 제거(햄버거 버튼 자체가 floating 카드 룩을 가짐). */
    .action-dock[b-95pv6eg7zu] {
        position: absolute;
        top: calc(12px + env(safe-area-inset-top, 0px));   /* 검색 알약(top 12)과 같은 줄 */
        right: 12px;
        padding: 0;
        gap: 0;
        background: transparent;
        border: none;
        box-shadow: none;
        /* PC 기본값(z 50)은 backdrop(58)보다 아래라, .action-dock 이 만드는 쌓임 영역 안에 갇힌
           메뉴(z 62)가 형제로 깔린 backdrop 에 클릭을 빼앗겨 항목 탭이 닫힘으로만 처리되던 버그.
           모바일에선 부모 쌓임 순서를 backdrop 위로 올려 메뉴 항목 클릭이 정상 동작하게 함
           (메뉴 z 62 는 부모 안에서 햄버거보다 위, backdrop 58 은 부모 60 영역 밖 → 메뉴 밖만 닫기). */
        z-index: 60;
    }

    .action-dock:hover[b-95pv6eg7zu] {
        box-shadow: none;
    }

    /* 햄버거 — handoff .m-burger: 46×46, 흰 배경, radius 13, 알약/버튼 그림자(검색 알약과 동일 룩, 값 그대로).
       3줄 아이콘은 SVG 가 그림. hover = 아이콘 accent. focus-visible = accent outline. */
    .action-dock__hamburger[b-95pv6eg7zu] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 46px;
        height: 46px;
        background: #fff;
        border: none;
        border-radius: 13px;
        box-shadow: 0 6px 18px rgba(20, 30, 50, .14), 0 0 0 1px rgba(20, 30, 50, .05);
        color: var(--color-text);
        cursor: pointer;
        font: inherit;
        transition: color 120ms ease-out;
    }

    .action-dock__hamburger:hover[b-95pv6eg7zu] {
        color: var(--color-accent);
    }

    .action-dock__hamburger:focus-visible[b-95pv6eg7zu] {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

    /* 메뉴 열린 상태 — 햄버거 강조 (그림자 위 accent ring 1겹 추가). */
    .action-dock.is-open .action-dock__hamburger[b-95pv6eg7zu] {
        box-shadow:
            0 6px 18px rgba(20, 30, 50, .14),
            0 0 0 1px rgba(20, 30, 50, .05),
            0 0 0 2px var(--color-accent);
    }

    .action-dock__hamburger-icon[b-95pv6eg7zu] {
        display: block;
        color: var(--color-text);
    }

    /* 표준 햄버거 룩 — plain hover 는 surface-alt 배경만(아이콘 text 유지). 열림/포커스 때만 아이콘 accent. */
    .action-dock__hamburger:focus-visible .action-dock__hamburger-icon[b-95pv6eg7zu],
    .action-dock.is-open .action-dock__hamburger-icon[b-95pv6eg7zu] {
        color: var(--color-accent);
    }

    /* 메뉴 = ☰ 아래 우측 정렬 드롭다운(흰 카드). _menuOpen(.is-open) 일 때만 표시. */
    .action-dock__menu[b-95pv6eg7zu] {
        display: none;
        position: absolute;
        top: calc(100% + 6px);
        right: 0;
        flex-direction: column;
        gap: 2px;
        min-width: 168px;
        padding: 6px;
        background: var(--color-surface);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-md);
        box-shadow: var(--shadow-lg);
        /* 단지 패널 docked 검색띠(z160)와 충돌 안 나게 60~70 대. backdrop(58)보다 위. */
        z-index: 62;
    }

    .action-dock.is-open .action-dock__menu[b-95pv6eg7zu] {
        display: flex;
    }

    /* 드롭다운 항목 — 아이콘 + 한글 라벨 가로 스택, 각 행 ≥44px 터치 타겟. */
    .action-dock__btn[b-95pv6eg7zu] {
        flex-direction: row;
        justify-content: flex-start;
        gap: 12px;
        min-width: 0;
        width: 100%;
        min-height: 44px;
        padding: 8px 12px;
        text-align: left;
    }

    .action-dock__label[b-95pv6eg7zu] {
        font-size: 0.9rem;
        color: var(--color-text);
    }
}

/* 모바일 드롭다운 외부 탭 닫기용 투명 backdrop — 드롭다운(62) 아래, 화면 전체.
   PC 는 _menuOpen 이 false 라 렌더 안 됨 + 만약을 위해 PC display:none. */
.action-dock__backdrop[b-95pv6eg7zu] {
    display: none;
}

@media (max-width: 43.75em) {
    .action-dock__backdrop[b-95pv6eg7zu] {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 58;
    }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .action-dock[b-95pv6eg7zu],
    .action-dock__btn[b-95pv6eg7zu],
    .action-dock__hamburger[b-95pv6eg7zu] {
        transition: none;
    }
}
/* _content/AptSonpoom/Components/Pages/ExploreParts/AiTestButton.razor.rz.scp.css */
.ai-testbtn[b-144jelqrf5] {
    margin: 0 0 16px;
}

.ai-testbtn__btn[b-144jelqrf5] {
    width: 100%;
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-accent);
    background: var(--color-accent-soft);
    border: 1px dashed var(--color-accent);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.ai-testbtn__btn:disabled[b-144jelqrf5] {
    opacity: 0.6;
    cursor: progress;
}

.ai-testbtn__del[b-144jelqrf5] {
    width: 100%;
    margin-top: 6px;
    padding: 8px 14px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-down);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    cursor: pointer;
}

.ai-testbtn__result[b-144jelqrf5] {
    margin-top: 10px;
    padding: 12px 14px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.ai-testbtn__status[b-144jelqrf5] {
    margin: 0 0 6px;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
}

.ai-testbtn__text[b-144jelqrf5] {
    margin: 0 0 6px;
    font-size: 0.86rem;
    line-height: 1.7;
    color: var(--color-text);
    white-space: pre-line;
}

.ai-testbtn__hint[b-144jelqrf5] {
    margin: 0;
    font-size: 0.72rem;
    color: var(--color-text-muted);
}
/* _content/AptSonpoom/Components/Pages/ExploreParts/ComparePanel.razor.rz.scp.css */
/*
   ComparePanel — 지도탐색 비교/분석 패널 (2026-06-10).
   PC = 우측 고정 패널 (단지 상세 좌측 패널과 대칭, 사용자 명시 "PC는 우측").
   모바일 = 하단 시트 (드래그 핸들로 peek↔full snap — JS exploreCompareSheet).
   데이터 영역이라 절제 톤(hairline + 글로벌 토큰). 라인 색만 단지 구분 팔레트(차트 내부).
*/

.compare-panel[b-yqwyhtr7kq] {
    font-family: 'Pretendard', system-ui, sans-serif;
    letter-spacing: -0.01em;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 400px;
    max-width: calc(100% - 16px);
    background: #fff;
    border-right: 1px solid var(--color-border);
    border-radius: 0 18px 18px 0;
    box-shadow: 0 12px 32px rgba(20, 30, 50, 0.16), 0 0 0 1px rgba(20, 30, 50, 0.05);
    overflow-y: auto;
    overflow-anchor: none;
    display: flex;
    flex-direction: column;
    /* M2-2.2 z-index 표준 — 단지 패널(100)과 동형 (둘은 배타라 동시 노출 안 됨). */
    z-index: 100;
    /* 좌측에서 슬라이드 인 (단지 상세 패널과 동일 위치·동작). */
    animation: comparePanelSlide-b-yqwyhtr7kq 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes comparePanelSlide-b-yqwyhtr7kq {
    from { opacity: 0; transform: translateX(-12px); }
    to { opacity: 1; transform: translateX(0); }
}

/* 모바일 드래그 핸들 — PC 숨김. */
.compare-panel__grip[b-yqwyhtr7kq] { display: none; }

.compare-panel__head[b-yqwyhtr7kq] {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #fff;
    padding: 16px 18px 12px;
    border-bottom: 1px solid var(--color-border);
}

.compare-panel__head-top[b-yqwyhtr7kq] { display: flex; align-items: center; gap: 8px; }
.compare-panel__title[b-yqwyhtr7kq] { margin: 0; font-size: 17px; font-weight: 800; color: var(--color-text); letter-spacing: -0.02em; }
.compare-panel__head-actions[b-yqwyhtr7kq] { margin-left: auto; display: flex; align-items: center; gap: 6px; }

.compare-panel__clear[b-yqwyhtr7kq] {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 12px;
    border-radius: 8px;
    padding: 5px 10px;
    cursor: pointer;
    transition: all 0.15s ease;
}
.compare-panel__clear:hover[b-yqwyhtr7kq],
.compare-panel__clear:focus-visible[b-yqwyhtr7kq] { color: var(--color-text); border-color: var(--color-accent); }

.compare-panel__close[b-yqwyhtr7kq] {
    width: 34px; height: 34px; padding: 0;
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    border-radius: 10px;
    font-size: 1.9rem; line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: all 0.15s ease;
}
.compare-panel__close:hover[b-yqwyhtr7kq],
.compare-panel__close:focus-visible[b-yqwyhtr7kq] { color: var(--color-text); border-color: var(--color-accent); }

/* 매매/전월세 세그먼트. */
.compare-panel__seg[b-yqwyhtr7kq] {
    margin-top: 12px;
    display: inline-flex;
    background: var(--color-surface-alt);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}
.compare-seg__btn[b-yqwyhtr7kq] {
    border: 0; background: transparent;
    font-size: 13px; font-weight: 600;
    color: var(--color-text-muted);
    padding: 6px 16px; border-radius: 8px; cursor: pointer;
    transition: all 0.15s ease;
}
.compare-seg__btn.is-active[b-yqwyhtr7kq] {
    background: #fff; color: var(--color-accent);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

/* 빈 상태. */
.compare-panel__empty[b-yqwyhtr7kq] {
    flex: 1;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    text-align: center; padding: 40px 24px; gap: 6px;
}
.compare-panel__empty-icon[b-yqwyhtr7kq] {
    width: 48px; height: 48px; border-radius: 50%;
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-size: 28px; line-height: 48px;
    margin-bottom: 6px;
}
.compare-panel__empty-title[b-yqwyhtr7kq] { margin: 0; font-size: 15px; font-weight: 700; color: var(--color-text); }
.compare-panel__empty-sub[b-yqwyhtr7kq] { margin: 0; font-size: 12.5px; }

/* 단지 리스트. */
.compare-panel__list[b-yqwyhtr7kq] { list-style: none; margin: 0; padding: 12px 14px 4px; display: flex; flex-direction: column; gap: 6px; }
.compare-panel__item[b-yqwyhtr7kq] {
    display: flex; align-items: center; gap: 9px;
    padding: 8px 10px;
    border: 1px solid var(--color-border);
    border-radius: 12px;
    background: var(--color-surface);
}
.compare-panel__dot[b-yqwyhtr7kq] { width: 11px; height: 11px; border-radius: 50%; flex: none; }
.compare-panel__item-main[b-yqwyhtr7kq] { min-width: 0; display: flex; flex-direction: column; gap: 1px; flex: 1; }
.compare-panel__item-name[b-yqwyhtr7kq] { font-size: 13.5px; font-weight: 700; color: var(--color-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.compare-panel__item-sub[b-yqwyhtr7kq] { font-size: 11px; }

.compare-panel__pyeong[b-yqwyhtr7kq] {
    flex: none;
    font-size: 12px;
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 4px 6px;
    background: #fff;
    color: var(--color-text);
    max-width: 120px;
    font-variant-numeric: tabular-nums;
}

.compare-panel__remove[b-yqwyhtr7kq] {
    flex: none;
    width: 24px; height: 24px; padding: 0;
    border: 0; background: transparent;
    color: var(--color-text-muted);
    font-size: 1.3rem; line-height: 1; cursor: pointer;
    border-radius: 6px;
}
.compare-panel__remove:hover[b-yqwyhtr7kq],
.compare-panel__remove:focus-visible[b-yqwyhtr7kq] { color: var(--color-up); background: var(--color-surface-alt); }

/* 기간 칩. */
.compare-panel__range[b-yqwyhtr7kq] { display: flex; gap: 6px; padding: 10px 14px 4px; }
.compare-range__chip[b-yqwyhtr7kq] {
    border: 1px solid var(--color-border);
    background: var(--color-surface);
    color: var(--color-text-muted);
    font-size: 12px; font-weight: 600;
    border-radius: 999px; padding: 5px 12px; cursor: pointer;
    transition: all 0.15s ease;
}
.compare-range__chip.is-active[b-yqwyhtr7kq] {
    background: var(--color-accent); color: #fff; border-color: var(--color-accent);
}

/* 차트. */
.compare-panel__chart[b-yqwyhtr7kq] { padding: 6px 12px 0; min-height: 200px; }
.compare-panel__chart-msg[b-yqwyhtr7kq] { padding: 56px 0; text-align: center; font-size: 13px; }

.compare-panel__note[b-yqwyhtr7kq] {
    padding: 12px 18px 20px;
    font-size: 11px; line-height: 1.6;
    color: var(--color-text-muted);
}

/* ===== 모바일 = 하단 시트 (드래그 peek↔full) ===== */
@media (max-width: 43.75em) {
    .compare-panel[b-yqwyhtr7kq] {
        top: auto;
        left: 0; right: 0;
        bottom: 0;
        width: 100%;
        max-width: none;
        /* full(위로 끝까지)일 때 화면을 거의 꽉 채우게 — 상단 노치/검색창 살짝 피한 여유만(2026-06-10). */
        height: 94vh;
        border-left: 0;
        border-top: 1px solid var(--color-border);
        border-radius: 18px 18px 0 0;
        /* 기본 peek(반쯤 내림). JS 가 --sheet-y 를 0(full)↔52%(peek) 로 snap. */
        transform: translateY(var(--sheet-y, 52%));
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
        animation: none;
        z-index: 130;
        touch-action: pan-y;
    }
    /* 드래그 중엔 transition 끔 (손가락 따라 즉시 이동). */
    .compare-panel.is-dragging[b-yqwyhtr7kq] { transition: none; }

    /* 드래그 hit 영역 — 핸들 바는 작아도 잡는 영역(padding)을 넉넉히(가로 full + 세로 ~44px) 키워 쉽게 잡히게. */
    .compare-panel__grip[b-yqwyhtr7kq] {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        min-height: 44px;
        padding: 14px 0;
        cursor: grab;
        touch-action: none;
    }
    .compare-panel__grip:active[b-yqwyhtr7kq] { cursor: grabbing; }
    .compare-panel__grip span[b-yqwyhtr7kq] {
        width: 48px; height: 5px; border-radius: 3px; background: var(--color-border);
    }
    .compare-panel__head[b-yqwyhtr7kq] { padding-top: 4px; }
}

@media (prefers-reduced-motion: reduce) {
    .compare-panel[b-yqwyhtr7kq] { animation: none; }
    .compare-panel[b-yqwyhtr7kq] { transition: none; }
}
/* _content/AptSonpoom/Components/Pages/ExploreParts/FilterRow.razor.rz.scp.css */
/* ============================================================
   M2-2.6 — FilterRow 필터 모달 scoped CSS (2026-06-01).
   옛 좌상단 항상 펼친 박스 → SideRail "필터" 버튼으로 띄우는 중앙 모달.
   backdrop z-index 199 / 모달 200 (ActionDock 시트 표준 동형).
   ============================================================ */

.filter-modal__backdrop[b-qzbndit3bh] {
    position: fixed;
    inset: 0;
    z-index: 199;
    background: rgba(0, 0, 0, 0.32);
}

.filter-modal[b-qzbndit3bh] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 200;
    display: flex;
    flex-direction: column;
    width: min(440px, calc(100vw - 32px));
    max-height: calc(100vh - 48px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.filter-modal__head[b-qzbndit3bh] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--color-border);
}

.filter-modal__title[b-qzbndit3bh] {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--color-text);
}

.filter-modal__close[b-qzbndit3bh] {
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: 1.3rem;
    line-height: 1;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 120ms ease-out, color 120ms ease-out;
}

.filter-modal__close:hover[b-qzbndit3bh],
.filter-modal__close:focus-visible[b-qzbndit3bh] {
    background: var(--color-surface-alt);
    color: var(--color-text);
    outline: 0;
}

.filter-modal__body[b-qzbndit3bh] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 16px;
    overflow-y: auto;
}

.filter-modal__group[b-qzbndit3bh] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-modal__group-head[b-qzbndit3bh] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}

.filter-modal__group-title[b-qzbndit3bh] {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* 범위 슬라이더 (평형·세대수·연식·가격대) 마크업·스타일은 공용 RangeSlider.razor(.css) 로 이관 (M2-2.8). */

.filter-modal__group-pending[b-qzbndit3bh] {
    margin-left: 4px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--color-text-muted);
    opacity: 0.8;
}

.filter-modal__foot[b-qzbndit3bh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-top: 1px solid var(--color-border);
}

.filter-modal__reset[b-qzbndit3bh] {
    padding: 8px 16px;
    background: transparent;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--color-text-muted);
    cursor: pointer;
    transition: background 120ms ease-out, color 120ms ease-out;
}

.filter-modal__reset:hover[b-qzbndit3bh],
.filter-modal__reset:focus-visible[b-qzbndit3bh] {
    background: var(--color-surface-alt);
    color: var(--color-text);
    outline: 0;
}

.filter-modal__apply[b-qzbndit3bh] {
    padding: 8px 20px;
    background: var(--color-accent);
    border: 1px solid var(--color-accent);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background 120ms ease-out;
}

.filter-modal__apply:hover[b-qzbndit3bh],
.filter-modal__apply:focus-visible[b-qzbndit3bh] {
    background: var(--color-accent-hover, var(--color-accent));
    outline: 0;
}

.filter-row__chips[b-qzbndit3bh] {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}

.filter-row__chips--placeholder[b-qzbndit3bh] {
    opacity: 0.7;
}

.filter-row__chip[b-qzbndit3bh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.78rem;
    color: var(--color-text);
    cursor: pointer;
    transition: background 120ms ease-out, border-color 120ms ease-out, color 120ms ease-out;
}

.filter-row__chip:hover[b-qzbndit3bh],
.filter-row__chip:focus-visible[b-qzbndit3bh] {
    background: var(--color-surface);
    border-color: var(--color-text-muted);
    outline: 0;
}

.filter-row__chip.is-active[b-qzbndit3bh] {
    background: var(--color-accent);
    border-color: var(--color-accent);
    color: #fff;
}

.filter-row__chip.is-active:hover[b-qzbndit3bh] {
    background: var(--color-accent-hover, var(--color-accent));
}

.filter-row__chip--placeholder[b-qzbndit3bh] {
    color: var(--color-text-muted);
    cursor: help;
    /* 후속 마일스톤 안내 — 점선 underline 으로 "준비중" 시각 신호. */
    text-decoration: underline dotted var(--color-text-muted) 1px;
    text-underline-offset: 2px;
}

.filter-row__chip-pending[b-qzbndit3bh] {
    color: var(--color-text-muted);
    font-weight: 700;
}

.filter-row__options[b-qzbndit3bh] {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    padding-left: 8px;
    border-left: 1px solid var(--color-border);
}

.filter-row__option[b-qzbndit3bh] {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    cursor: pointer;
    user-select: none;
}

.filter-row__option input[type="checkbox"][b-qzbndit3bh] {
    margin: 0;
    width: 14px;
    height: 14px;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.filter-row__option:hover[b-qzbndit3bh] {
    color: var(--color-text);
}

/* ============================================================
   모바일 (≤ 700px) — 모달은 fixed 중앙 + width min() 으로 자동 대응.
   bottom 시트가 아닌 중앙 모달 유지 (필터 항목 적어 화면 점유 작음).
   ============================================================ */
@media (max-width: 43.75em) {
    .filter-modal[b-qzbndit3bh] {
        width: calc(100vw - 24px);
    }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .filter-row__chip[b-qzbndit3bh] {
        transition: none;
    }
}
/* _content/AptSonpoom/Components/Pages/ExploreParts/HotDanjiCard.razor.rz.scp.css */
/* ============================================================
   HotDanjiCard scoped CSS — /explore 좌상단 "실시간 인기 단지".
   2026-06-05 — 외부 디자인 핸드오프(design_handoff_popular) "값 그대로" 적용 (사용자 명시).
   디자인 토큰 = 컴포넌트 스코프 oklch 변수 (글로벌 토큰·다른 페이지 영향 0).
   accent oklch(0.55 0.17 256) ≈ #2563eb = 사이트 --color-accent 와 같은 cool blue (톤 충돌 없음).

   상태 2종 (PC 전용 — 모바일은 SearchCard 안으로 흡수, 맨 아래 @media 가 display:none):
     - .hot-card--collapsed = 한 줄 가로 전광판 바(.pc-bar). 티커가 한 슬롯씩 위로 롤링(CSS @keyframes, 서버 왕복 0).
     - .hot-card--expanded = 전체 순위 패널(.pc-panel). 1~3위 순번 악센트 블루.
   ============================================================ */

.hot-card[b-ycxl5zixt9] {
    /* ── 핸드오프 스코프 토큰 (값 그대로) ── */
    --accent: oklch(0.55 0.17 256);
    --accent-deep: oklch(0.47 0.16 258);
    --accent-soft: oklch(0.95 0.035 256);
    --line: oklch(0.92 0.004 250);
    --ink: oklch(0.42 0.015 260);
    --head: oklch(0.21 0.02 258);
    --mut: oklch(0.6 0.01 250);
    --slotH: 26px;

    position: absolute;
    top: 76px;  /* SearchCard (64px) + gap 12 — 약 76px 위치 */
    left: 12px;
    z-index: 30;
    width: 320px;
    max-width: calc(100vw - 24px);
    /* 핸드오프 popcard — 흰 배경, radius 15, 데스크톱 카드 그림자(값 그대로). */
    background: #fff;
    border-radius: 15px;
    box-shadow: 0 10px 28px rgba(20, 30, 50, .16), 0 0 0 1px rgba(20, 30, 50, .06);
    font-family: 'Pretendard', system-ui, sans-serif;
}

/* ============================================================
   번개칩 (실시간 표식) — 펄스 애니메이션 (motion 선호 시).
   ============================================================ */
.pc-bolt[b-ycxl5zixt9] {
    width: 26px;
    height: 26px;
    flex: none;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--accent);
    background: var(--accent-soft);
}

@media (prefers-reduced-motion: no-preference) {
    .pc-bolt[b-ycxl5zixt9] {
        animation: pcpulse-b-ycxl5zixt9 2.4s ease-in-out infinite;
    }
}

@keyframes pcpulse-b-ycxl5zixt9 {
    0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--accent), transparent 70%); }
    50%      { box-shadow: 0 0 0 5px color-mix(in oklch, var(--accent), transparent 100%); }
}

/* ============================================================
   접힘 — 한 줄 전광판 바
   ============================================================ */
.pc-bar[b-ycxl5zixt9] {
    display: flex;
    align-items: center;
    gap: 11px;
    width: 100%;
    height: 52px;
    padding: 0 13px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    border-radius: 15px;
    transition: background .14s;
    font: inherit;
    color: inherit;
}

.pc-bar:hover[b-ycxl5zixt9],
.pc-bar:focus-visible[b-ycxl5zixt9] {
    background: oklch(0.985 0.003 250);
    outline: 0;
}

.pc-livelab[b-ycxl5zixt9] {
    flex: none;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: -.03em;
    color: var(--accent-deep);
    white-space: nowrap;
}

.pc-vbar[b-ycxl5zixt9] {
    flex: none;
    width: 1px;
    height: 18px;
    background: var(--line);
}

.pc-chev[b-ycxl5zixt9] {
    flex: none;
    color: var(--mut);
    display: flex;
    transition: color .14s, transform .14s;
}

.pc-bar:hover .pc-chev[b-ycxl5zixt9],
.pc-bar:focus-visible .pc-chev[b-ycxl5zixt9] {
    color: var(--accent);
    transform: translateY(1px);
}

/* 티커 윈도우 — 1슬롯 높이 + overflow hidden. */
.pc-ticker[b-ycxl5zixt9] {
    flex: 1;
    min-width: 0;
    height: var(--slotH);
    overflow: hidden;
}

.pc-track[b-ycxl5zixt9] {
    --row-h: var(--slotH);   /* 키프레임 translateY 단위 = 1슬롯(26px) */
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.pc-slot[b-ycxl5zixt9] {
    height: var(--slotH);
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 9px;
}

.pc-rk-chip[b-ycxl5zixt9] {
    flex: none;
    width: 19px;
    height: 19px;
    border-radius: 6px;
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-size: 11.5px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.pc-roll-name[b-ycxl5zixt9] {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: oklch(0.26 0.02 255);
    letter-spacing: -.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pc-roll-cnt[b-ycxl5zixt9] {
    flex: none;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--accent-deep);
    letter-spacing: -.02em;
}

.pc-roll-cnt i[b-ycxl5zixt9] {
    font-style: normal;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mut);
    margin-left: 1px;
}

/* ============================================================
   전광판 롤링 키프레임 — N(2~10)별 (MaxItems=10 상한).
   track 은 N 실슬롯 + 1위 복제. 한 슬롯당 ~2초(hold ~78% + slide ~22%). 총 duration = N * 2s.
   복제 1위 도달 후 처음(0)으로 — 끊김 없는 루프. translateY 단위 = 1슬롯(--row-h=26px).
   N=1 은 keyframe 미지정 = 정적 1슬롯.
   ============================================================ */
.pc-track[data-n="2"][b-ycxl5zixt9]  { animation: pc-ticker-2-b-ycxl5zixt9  4s  cubic-bezier(0.7,0,0.3,1) infinite; }
.pc-track[data-n="3"][b-ycxl5zixt9]  { animation: pc-ticker-3-b-ycxl5zixt9  6s  cubic-bezier(0.7,0,0.3,1) infinite; }
.pc-track[data-n="4"][b-ycxl5zixt9]  { animation: pc-ticker-4-b-ycxl5zixt9  8s  cubic-bezier(0.7,0,0.3,1) infinite; }
.pc-track[data-n="5"][b-ycxl5zixt9]  { animation: pc-ticker-5-b-ycxl5zixt9  10s cubic-bezier(0.7,0,0.3,1) infinite; }
.pc-track[data-n="6"][b-ycxl5zixt9]  { animation: pc-ticker-6-b-ycxl5zixt9  12s cubic-bezier(0.7,0,0.3,1) infinite; }
.pc-track[data-n="7"][b-ycxl5zixt9]  { animation: pc-ticker-7-b-ycxl5zixt9  14s cubic-bezier(0.7,0,0.3,1) infinite; }
.pc-track[data-n="8"][b-ycxl5zixt9]  { animation: pc-ticker-8-b-ycxl5zixt9  16s cubic-bezier(0.7,0,0.3,1) infinite; }
.pc-track[data-n="9"][b-ycxl5zixt9]  { animation: pc-ticker-9-b-ycxl5zixt9  18s cubic-bezier(0.7,0,0.3,1) infinite; }
.pc-track[data-n="10"][b-ycxl5zixt9] { animation: pc-ticker-10-b-ycxl5zixt9 20s cubic-bezier(0.7,0,0.3,1) infinite; }

@keyframes pc-ticker-2-b-ycxl5zixt9 {
    0%, 39%    { transform: translateY(0); }
    50%, 89%   { transform: translateY(calc(var(--row-h) * -1)); }
    100%       { transform: translateY(calc(var(--row-h) * -2)); }
}
@keyframes pc-ticker-3-b-ycxl5zixt9 {
    0%, 26%    { transform: translateY(0); }
    33%, 59%   { transform: translateY(calc(var(--row-h) * -1)); }
    66%, 100%  { transform: translateY(calc(var(--row-h) * -3)); }
}
@keyframes pc-ticker-4-b-ycxl5zixt9 {
    0%, 19%    { transform: translateY(0); }
    25%, 44%   { transform: translateY(calc(var(--row-h) * -1)); }
    50%, 69%   { transform: translateY(calc(var(--row-h) * -2)); }
    75%, 100%  { transform: translateY(calc(var(--row-h) * -4)); }
}
@keyframes pc-ticker-5-b-ycxl5zixt9 {
    0%, 15%    { transform: translateY(0); }
    20%, 35%   { transform: translateY(calc(var(--row-h) * -1)); }
    40%, 55%   { transform: translateY(calc(var(--row-h) * -2)); }
    60%, 75%   { transform: translateY(calc(var(--row-h) * -3)); }
    80%, 100%  { transform: translateY(calc(var(--row-h) * -5)); }
}
@keyframes pc-ticker-6-b-ycxl5zixt9 {
    0%, 12%    { transform: translateY(0); }
    16.6%, 29% { transform: translateY(calc(var(--row-h) * -1)); }
    33.3%, 45% { transform: translateY(calc(var(--row-h) * -2)); }
    50%, 62%   { transform: translateY(calc(var(--row-h) * -3)); }
    66.6%, 79% { transform: translateY(calc(var(--row-h) * -4)); }
    83.3%, 100%{ transform: translateY(calc(var(--row-h) * -6)); }
}
@keyframes pc-ticker-7-b-ycxl5zixt9 {
    0%, 10%      { transform: translateY(0); }
    14.2%, 24%   { transform: translateY(calc(var(--row-h) * -1)); }
    28.5%, 38%   { transform: translateY(calc(var(--row-h) * -2)); }
    42.8%, 53%   { transform: translateY(calc(var(--row-h) * -3)); }
    57.1%, 67%   { transform: translateY(calc(var(--row-h) * -4)); }
    71.4%, 81%   { transform: translateY(calc(var(--row-h) * -5)); }
    85.7%, 100%  { transform: translateY(calc(var(--row-h) * -7)); }
}
@keyframes pc-ticker-8-b-ycxl5zixt9 {
    0%, 9%       { transform: translateY(0); }
    12.5%, 21%   { transform: translateY(calc(var(--row-h) * -1)); }
    25%, 34%     { transform: translateY(calc(var(--row-h) * -2)); }
    37.5%, 46%   { transform: translateY(calc(var(--row-h) * -3)); }
    50%, 59%     { transform: translateY(calc(var(--row-h) * -4)); }
    62.5%, 71%   { transform: translateY(calc(var(--row-h) * -5)); }
    75%, 84%     { transform: translateY(calc(var(--row-h) * -6)); }
    87.5%, 100%  { transform: translateY(calc(var(--row-h) * -8)); }
}
@keyframes pc-ticker-9-b-ycxl5zixt9 {
    0%, 8%       { transform: translateY(0); }
    11.1%, 19%   { transform: translateY(calc(var(--row-h) * -1)); }
    22.2%, 30%   { transform: translateY(calc(var(--row-h) * -2)); }
    33.3%, 41%   { transform: translateY(calc(var(--row-h) * -3)); }
    44.4%, 52%   { transform: translateY(calc(var(--row-h) * -4)); }
    55.5%, 63%   { transform: translateY(calc(var(--row-h) * -5)); }
    66.6%, 74%   { transform: translateY(calc(var(--row-h) * -6)); }
    77.7%, 85%   { transform: translateY(calc(var(--row-h) * -7)); }
    88.8%, 100%  { transform: translateY(calc(var(--row-h) * -9)); }
}
@keyframes pc-ticker-10-b-ycxl5zixt9 {
    0%, 7%       { transform: translateY(0); }
    10%, 17%     { transform: translateY(calc(var(--row-h) * -1)); }
    20%, 27%     { transform: translateY(calc(var(--row-h) * -2)); }
    30%, 37%     { transform: translateY(calc(var(--row-h) * -3)); }
    40%, 47%     { transform: translateY(calc(var(--row-h) * -4)); }
    50%, 57%     { transform: translateY(calc(var(--row-h) * -5)); }
    60%, 67%     { transform: translateY(calc(var(--row-h) * -6)); }
    70%, 77%     { transform: translateY(calc(var(--row-h) * -7)); }
    80%, 87%     { transform: translateY(calc(var(--row-h) * -8)); }
    90%, 100%    { transform: translateY(calc(var(--row-h) * -10)); }
}

/* ============================================================
   펼침 — 전체 순위 패널
   ============================================================ */
.pc-panel[b-ycxl5zixt9] {
    display: flex;
    flex-direction: column;
}

.pc-head[b-ycxl5zixt9] {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 13px 13px 11px;
}

.pc-title[b-ycxl5zixt9] {
    font-size: 15px;
    font-weight: 800;
    color: var(--head);
    letter-spacing: -.03em;
    white-space: nowrap;
}

.pc-grow[b-ycxl5zixt9] {
    flex: 1;
}

.pc-i[b-ycxl5zixt9] {
    flex: none;
    display: flex;
    align-items: center;
    padding: 0;
    border: none;
    background: none;
    color: oklch(0.72 0.01 250);
    cursor: help;
    transition: color .14s;
}

.pc-i:hover[b-ycxl5zixt9] {
    color: var(--accent);
}

.pc-collapse[b-ycxl5zixt9] {
    flex: none;
    width: 30px;
    height: 30px;
    border: none;
    background: none;
    cursor: pointer;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mut);
    transition: background .14s, color .14s;
}

.pc-collapse:hover[b-ycxl5zixt9],
.pc-collapse:focus-visible[b-ycxl5zixt9] {
    background: oklch(0.96 0.004 250);
    color: var(--accent);
    outline: 0;
}

/* 유형 필터 — 전체/일반/분양 세그먼트. 옅은 트랙 + 활성 흰 칩 (핸드오프 세그먼트 톤). */
.pc-filter[b-ycxl5zixt9] {
    display: flex;
    gap: 3px;
    margin: 0 13px 8px;
    padding: 3px;
    background: oklch(0.965 0.004 250);
    border-radius: 10px;
}

.pc-fbtn[b-ycxl5zixt9] {
    flex: 1;
    padding: 6px 0;
    border: none;
    background: none;
    border-radius: 8px;
    font: inherit;
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -.02em;
    color: var(--mut);
    cursor: pointer;
    transition: background .12s, color .12s, box-shadow .12s;
}

.pc-fbtn:hover[b-ycxl5zixt9] { color: var(--accent-deep); }

.pc-fbtn.on[b-ycxl5zixt9] {
    background: #fff;
    color: var(--accent-deep);
    box-shadow: 0 1px 3px rgba(20, 30, 50, .12);
}

.pc-fbtn:focus-visible[b-ycxl5zixt9] { outline: 2px solid var(--accent); outline-offset: 1px; }

/* '분양' 배지 — 단지명 옆 작은 레드 알약 (지도 분양 마커 레드 헤더와 같은 의미색). */
.pc-sale-badge[b-ycxl5zixt9] {
    display: inline-block;
    margin-left: 5px;
    padding: 1px 6px;
    border-radius: 5px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: -.01em;
    color: #fff;
    background: oklch(0.585 0.215 27);
    vertical-align: middle;
}

/* 필터 결과 0건 안내. */
.pc-empty[b-ycxl5zixt9] {
    list-style: none;
    padding: 18px 9px;
    text-align: center;
    font-size: 12.5px;
    color: var(--mut);
    letter-spacing: -.02em;
}

.pc-list[b-ycxl5zixt9] {
    list-style: none;
    margin: 0;
    display: flex;
    flex-direction: column;
    padding: 0 5px;
    /* 10위까지 — 넘치면 카드 안 스크롤 (방어). hairline 톤 스크롤바. */
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: var(--line) transparent;
}

.pc-list[b-ycxl5zixt9]::-webkit-scrollbar { width: 8px; }
.pc-list[b-ycxl5zixt9]::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; }

.pc-li[b-ycxl5zixt9] {
    position: relative;
}

.pc-row[b-ycxl5zixt9] {
    display: flex;
    align-items: center;
    gap: 13px;
    width: 100%;
    padding: 11px 9px;
    border: none;
    background: none;
    cursor: pointer;
    text-align: left;
    border-radius: 11px;
    position: relative;
    transition: background .12s;
    font: inherit;
    color: inherit;
}

/* 행 사이 hairline 구분선 (좌우 9px 인셋). hover 시 해당/다음 구분선 투명. */
.pc-li + .pc-li .pc-row[b-ycxl5zixt9]::before {
    content: '';
    position: absolute;
    left: 9px;
    right: 9px;
    top: 0;
    height: 1px;
    background: var(--line);
}

.pc-row:hover[b-ycxl5zixt9],
.pc-row:focus-visible[b-ycxl5zixt9] {
    background: var(--accent-soft);
    outline: 0;
}

.pc-row:hover[b-ycxl5zixt9]::before,
.pc-li:hover + .pc-li .pc-row[b-ycxl5zixt9]::before {
    background: transparent;
}

.pc-rk[b-ycxl5zixt9] {
    flex: none;
    width: 18px;
    text-align: center;
    font-size: 15px;
    font-weight: 800;
    color: oklch(0.68 0.01 250);
    letter-spacing: -.02em;
}

.pc-row.top .pc-rk[b-ycxl5zixt9] {
    color: var(--accent);
}

.pc-main[b-ycxl5zixt9] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.pc-name[b-ycxl5zixt9] {
    font-size: 15px;
    font-weight: 700;
    color: oklch(0.24 0.02 255);
    letter-spacing: -.03em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pc-row:hover .pc-name[b-ycxl5zixt9],
.pc-row:focus-visible .pc-name[b-ycxl5zixt9] {
    color: var(--accent-deep);
}

.pc-gu[b-ycxl5zixt9] {
    font-size: 12px;
    color: var(--mut);
    letter-spacing: -.01em;
}

.pc-cnt[b-ycxl5zixt9] {
    flex: none;
    font-size: 14px;
    font-weight: 700;
    color: oklch(0.3 0.02 255);
    letter-spacing: -.02em;
}

.pc-cnt i[b-ycxl5zixt9] {
    font-style: normal;
    font-size: 12px;
    font-weight: 600;
    color: var(--mut);
    margin-left: 1px;
}

.pc-foot[b-ycxl5zixt9] {
    margin: 5px 13px 14px;
    padding-top: 11px;
    border-top: 1px solid var(--line);
    font-size: 11px;
    line-height: 1.55;
    color: var(--mut);
    letter-spacing: -.02em;
}

/* ============================================================
   모바일 (≤ 700px) — 인기단지는 SearchCard(검색창) 안으로 흡수(순환 오버레이 + 풀스크린 패널).
   별도 좌상단 위젯은 모바일 숨김 (중복 차단). PC 만 위 전광판/패널 유지.
   ============================================================ */
@media (max-width: 43.75em) {
    .hot-card[b-ycxl5zixt9] {
        display: none;
    }
}

/* ============================================================
   prefers-reduced-motion — 펄스/롤링 정지 (1위만 정적 노출). transition 즉시.
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .pc-bar[b-ycxl5zixt9],
    .pc-chev[b-ycxl5zixt9],
    .pc-row[b-ycxl5zixt9],
    .pc-collapse[b-ycxl5zixt9],
    .pc-i[b-ycxl5zixt9] {
        transition: none;
    }

    .pc-track[data-n][b-ycxl5zixt9] {
        animation: none !important;
        transform: translateY(0) !important;
    }
}
/* _content/AptSonpoom/Components/Pages/ExploreParts/PriceLegend.razor.rz.scp.css */
/* ============================================================
   M2-1.9 — PriceLegend scoped CSS (2026-05-31).
   /explore 우하단 가격대 색 범례 — 면책칩(bottom:12) 위 stack. z-index 30 (chrome 동급).
   CategoryDock 칩 톤 동형 (둥근 칩 + 펼침 패널 위로 absolute).
   ============================================================ */

/* PC 우하단 stack 의 "아래 칸" (bottom 12) — 출처칩(.explore-disclosure, bottom 56)이 위. 모바일과 같은 순서. */
.price-legend[b-s88ef13txl] {
    position: absolute;
    bottom: 12px;
    right: 12px;
    z-index: 30;
    max-width: calc(100vw - 24px);
}

/* 펼칠 때 SideRail(필터 등, z-index 40) 위로 올려 팝업이 안 가려지게 (모바일 동형). */
.price-legend[open][b-s88ef13txl] {
    z-index: 1000;
}

/* 드래그-닫기 손잡이 — 모바일 바텀시트 전용 (아래 @media 가 모바일에서만 표시). PC 는 숨김. */
.price-legend__grab[b-s88ef13txl] {
    display: none;
}

.price-legend__summary[b-s88ef13txl] {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 999px;
    font-size: 0.82rem;
    color: var(--color-text);
    cursor: pointer;
    list-style: none;
    user-select: none;
    box-shadow: var(--shadow-sm);
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.price-legend__summary[b-s88ef13txl]::-webkit-details-marker {
    display: none;
}

.price-legend__summary:hover[b-s88ef13txl],
.price-legend[open] .price-legend__summary[b-s88ef13txl] {
    border-color: var(--color-text-muted);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.price-legend__summary:focus-visible[b-s88ef13txl] {
    outline: 0;
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.18),
        0 0 0 3px rgba(77, 159, 255, 0.3);
}

.price-legend__summary-icon[b-s88ef13txl] {
    font-size: 0.9rem;
    line-height: 1;
}

.price-legend__summary-arrow[b-s88ef13txl] {
    font-size: 0.7rem;
    color: var(--color-text-muted);
    transition: transform 200ms ease-out;
}

.price-legend[open] .price-legend__summary-arrow[b-s88ef13txl] {
    transform: rotate(180deg);
}

/* ============================================================
   펼침 패널 — chip 위로 absolute 떠 있음.
   ============================================================ */

.price-legend__panel[b-s88ef13txl] {
    position: absolute;
    bottom: calc(100% + 8px);
    right: 0;
    width: 190px;
    max-width: calc(100vw - 24px);
    max-height: 60dvh;
    overflow-y: auto;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: 12px 14px;
}

.price-legend__head[b-s88ef13txl] {
    margin: 0 0 10px 0;
    font-size: 0.76rem;
    font-weight: 600;
    color: var(--color-text);
    line-height: 1.4;
}

.price-legend__list[b-s88ef13txl] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.price-legend__row[b-s88ef13txl] {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* swatch = 마커 상단 색 막대를 그대로 닮은 가로 막대 (배경색은 inline style 로 가격대 색). */
.price-legend__swatch[b-s88ef13txl] {
    flex-shrink: 0;
    width: 22px;
    height: 8px;
    border-radius: 3px;
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.08);
}

.price-legend__label[b-s88ef13txl] {
    font-size: 0.8rem;
    color: var(--color-text);
    font-variant-numeric: tabular-nums;
}

.price-legend__note[b-s88ef13txl] {
    margin: 10px 0 0;
    padding-top: 8px;
    border-top: 1px solid var(--color-border);
    font-size: 0.7rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

/* ============================================================
   모바일 (≤ 43.75em) — 우하단 stack (2026-06-04 사용자 요청 — 우측 정리).
   두 칩(출처칩 .explore-disclosure / 가격대 .price-legend)을 화면 우측에 위아래로 쌓음.
   가격대 = 출처칩 위 칸. 좌하단 카카오 스케일바(50m)와 안 겹침.

   2026-06-04 swap — 가격대 = 아래 칸, 출처칩(.explore-disclosure) = 위 칸 (사용자 요청, 옛 반대 순서에서 위아래 교체).
   광고(가운데 하단) ON/OFF 연동 — 조상 .is-centerad (Explore.razor 가 광고 ON 일 때만 .explore-body 에 부여):
   - 광고 OFF(.is-centerad 없음) = 화면 하단 아래 칸. bottom ~12. (그 위에 출처칩 bottom ~56.)
   - 광고 ON(.is-centerad) = 광고 위로 올림. bottom ~136. (그 위에 출처칩 bottom ~140.)
   ※ 조상 선택자 .is-centerad 는 scope attribute 없이 일반 매칭, 대상 .price-legend 만 scope 부착 →
     Blazor scoped CSS 에서 정상 작동 (조상은 scope 무관).
   ============================================================ */
@media (max-width: 43.75em) {
    .price-legend[b-s88ef13txl] {
        right: 12px;  /* 광고(가운데 정렬, 좌우 여백 12px)와 우측 가장자리 정렬 */
        bottom: max(12px, env(safe-area-inset-bottom, 0px));
    }

    /* 시트 펼쳤을 때(open) 부모를 최상단으로 — 부모 z-index 30 stacking context 에 자식 시트(z1000)가
       갇혀 SideRail(40)·다른 chrome 아래로 깔리는 것 방지. fixed 자식 z-index 는 부모 context 기준 (2026-06-04 fix). */
    .price-legend[open][b-s88ef13txl] {
        z-index: 1000;
    }

    /* 광고 ON — 광고 윗변(bottom 11 + 높이 ~80 = 91) 보다 확실히 위 + 여백 ~19 = 110 (아래 칸, 광고 안 가림). */
    .is-centerad .price-legend[b-s88ef13txl] {
        bottom: max(105px, calc(env(safe-area-inset-bottom, 0px) + 101px));
    }

    /* 펼친 가격대 패널 — 모바일에선 "하단 풀폭 바텀시트" (2026-06-04 사용자 요청 — 우측 작은 카드가 우측 레일과 겹쳐서).
       칩 기준 absolute 우측 카드 → 화면 하단 fixed 풀폭으로 덮어씀. 우측 SideRail(레일)·줌과 안 겹침.
       상단 모서리만 둥글게 + drag-handle 시각(::before) + 위로 슬라이드업. 내부 세로 스크롤.
       z-index 1000 — /explore 모든 chrome(SideRail 40·광고 20·칩 30·패널 100·ActionDockSheet/모달 200) 위 최상단.
         (2026-06-04 — 옛 120 은 ActionDockSheet·모달(200) 아래로 가려질 수 있어 1000 으로 격상. 사용자 요청.)
       drag-to-close = exploreSheet.js 가 transform translateY 로 시트를 손가락 따라 내리고, 충분히 내리면 <details> open 해제. */
    .price-legend__panel[b-s88ef13txl] {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        width: auto;
        max-width: none;
        max-height: 70dvh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        border-radius: var(--radius-md) var(--radius-md) 0 0;
        box-shadow: 0 -8px 28px rgba(20, 30, 50, 0.22);
        padding: 24px 16px max(16px, env(safe-area-inset-bottom, 0px));
        z-index: 1000;
        animation: priceLegendSheetUp-b-s88ef13txl 280ms cubic-bezier(0.16, 1, 0.3, 1);
        touch-action: pan-y;  /* 시트 내부 세로 스크롤 허용, 가로 제스처는 안 가로챔 (drag-닫기는 JS 가 처리) */
    }

    /* 시트 상단 드래그-닫기 손잡이 — 여기만 touch-action:none 이라 브라우저가 세로 제스처 안 가로챔
       (본문은 pan-y 스크롤 유지 → 본문에서 끌면 "움찔움찔" 취소되던 문제를 손잡이 한정 드래그로 해결).
       panel 이 모바일에서 position:fixed 라 grab absolute 의 기준이 됨. 막대는 ::before 로 시각만. */
    .price-legend[open] .price-legend__grab[b-s88ef13txl] {
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 22px;
        touch-action: none;
        cursor: grab;
        z-index: 1;
    }
    .price-legend[open] .price-legend__grab[b-s88ef13txl]::before {
        content: "";
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        border-radius: 999px;
        background: var(--color-border);
    }

    @keyframes priceLegendSheetUp-b-s88ef13txl {
        from { transform: translateY(100%); opacity: 0.6; }
        to { transform: translateY(0); opacity: 1; }
    }

    /* exploreSheet.js 가 드래그 시작 시 부여 — 진입 슬라이드업 애니 끄고(손가락이 transform 소유)
       손가락 따라 즉시 이동(transition 없음). */
    .price-legend__panel.is-dragging[b-s88ef13txl] {
        animation: none;
        transition: none;
    }

    /* 손가락을 뗀 뒤 제자리 복귀 / 화면 밖 닫힘 미끄러질 때 부드럽게.
       (드래그 중엔 .is-dragging 이 우선해 transition 0.) */
    .price-legend__panel.is-settling[b-s88ef13txl] {
        animation: none;
        transition: transform 240ms cubic-bezier(0.16, 1, 0.3, 1);
    }
}

/* 모바일 바텀시트 슬라이드업 reduced-motion — 즉시 (진입 애니 + 복귀/닫힘 transition 모두 끔). */
@media (prefers-reduced-motion: reduce) {
    .price-legend__panel[b-s88ef13txl],
    .price-legend__panel.is-settling[b-s88ef13txl] {
        animation: none;
        transition: none;
    }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .price-legend__summary[b-s88ef13txl],
    .price-legend__summary-arrow[b-s88ef13txl] {
        transition: none;
    }
}
/* _content/AptSonpoom/Components/Pages/ExploreParts/RangeSlider.razor.rz.scp.css */
/* ============================================================
   M2-2.8 — RangeSlider 공용 이중 손잡이 범위 슬라이더 scoped CSS (2026-06-01).
   컨테이너·track·fill·눈금·라벨. thumb(::-webkit-slider-thumb 등 pseudo)은 scoped 가 못 잡아
   글로벌 app.css 가 owns (메모리 reference_native_input_blazor_pitfalls).
   ============================================================ */

.range-slider__readout[b-yraa461mmc] {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--color-accent);
}

.range-slider[b-yraa461mmc] {
    position: relative;
    height: 32px;
    margin: 6px 9px 0;
}

/* 시각 track (얇은 회색 막대, 중앙). input track 은 투명 32px. */
.range-slider__track[b-yraa461mmc] {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 4px;
    transform: translateY(-50%);
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: 999px;
}

/* 선택 구간 fill — 인라인 --lo/--hi/--lo-min/--hi-max 로 좌우 % 계산. */
.range-slider__fill[b-yraa461mmc] {
    --range: calc(var(--hi-max) - var(--lo-min));
    position: absolute;
    top: -1px;
    bottom: -1px;
    left: calc((var(--lo) - var(--lo-min)) / var(--range) * 100%);
    right: calc((var(--hi-max) - var(--hi)) / var(--range) * 100%);
    background: var(--color-accent);
    border-radius: 999px;
}

/* 겹친 range input 2개 — track 은 클릭 무시(pointer-events:none), thumb 만 글로벌에서 auto. */
.range-slider__range[b-yraa461mmc] {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 32px;
    margin: 0;
    background: transparent;
    -webkit-appearance: none;
    appearance: none;
    pointer-events: none;
    outline: none;
}

.range-slider__scale[b-yraa461mmc] {
    display: flex;
    justify-content: space-between;
    margin: 3px 9px 0;
    font-size: 0.7rem;
    color: var(--color-text-muted);
}
/* _content/AptSonpoom/Components/Pages/ExploreParts/SalePanel.razor.rz.scp.css */
/* SalePanel — 분양/청약 마커 패널. 일반 단지 패널(.explore-panel handoff DetailPanel)과 동일 디자인 언어.
   별도 컴포넌트라 scoped 격리 → dk-* 토큰·레이아웃을 동형으로 자체 정의 (값 일치 = 톤 통일).
   상단 padding 70px = 패널 폭에 도킹되는 검색박스(56px 헤더 띠) 공간 — 검색창이 패널 위에 가지런히 올라옴. */

.sale-panel[b-1ruo6l7gqz] {
    /* handoff DetailPanel 토큰 — .explore-panel 과 동일 값 (패널 스코프, 글로벌 영향 0). */
    --dk-accent: oklch(0.55 0.17 256);
    --dk-accent-soft: oklch(0.95 0.035 256);
    --dk-line: oklch(0.92 0.004 250);
    --dk-ink: oklch(0.21 0.02 255);
    --dk-ink-2: oklch(0.4 0.015 255);
    --dk-muted: oklch(0.55 0.01 250);
    --dk-chip-bg: oklch(0.96 0.004 250);
    /* 분양 강조색 (마커 핀과 일관 — 주황). 신호색(상승/하락) 아님. */
    --sale-accent: #ea580c;

    font-family: 'Pretendard', system-ui, sans-serif;
    letter-spacing: -0.01em;
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 400px;
    max-width: calc(100% - 16px);
    background: #fff;
    border-right: 1px solid var(--dk-line);
    border-radius: 0 18px 18px 0;
    box-shadow: 0 12px 32px rgba(20, 30, 50, 0.16), 0 0 0 1px rgba(20, 30, 50, 0.05);
    overflow-y: auto;
    overflow-anchor: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
    /* 상단 70px — 검색박스 도킹 띠(56px) 아래로 패널 콘텐츠 시작 (일반 패널과 동일 정합). */
    padding: 70px 20px 18px;
    z-index: 100;
    color: var(--dk-ink);
    animation: salePanelSlide-b-1ruo6l7gqz 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes salePanelSlide-b-1ruo6l7gqz {
    from { transform: translateX(-12px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* === hero === */
.sale-panel__hero[b-1ruo6l7gqz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.sale-panel__title-row[b-1ruo6l7gqz] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
}

.sale-panel__title-group[b-1ruo6l7gqz] {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sale-panel__badge[b-1ruo6l7gqz] {
    align-self: flex-start;
    display: inline-block;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--sale-accent);
    background: oklch(0.96 0.04 50);
    padding: 3px 10px;
    border-radius: 9px;
    line-height: 1;
}

.sale-panel__title[b-1ruo6l7gqz] {
    margin: 0;
    font-size: 1.32rem;
    font-weight: 800;
    color: var(--dk-ink);
    line-height: 1.25;
    letter-spacing: -0.03em;
    word-break: keep-all;
}

.sale-panel__close[b-1ruo6l7gqz] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    padding: 0;
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--dk-muted);
    font-size: 2.3rem;
    line-height: 1;
    transform: translateY(-3px);
    margin-right: -10px;
    cursor: pointer;
    transition: color 120ms ease-out, background-color 150ms ease-out;
}
.sale-panel__close:hover[b-1ruo6l7gqz],
.sale-panel__close:focus-visible[b-1ruo6l7gqz] {
    background: var(--dk-chip-bg);
    color: var(--dk-ink-2);
    outline: none;
}

.sale-panel__type[b-1ruo6l7gqz] {
    margin: 0;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--dk-accent);
    letter-spacing: -0.02em;
}

.sale-panel__addr[b-1ruo6l7gqz] {
    margin: 0;
    font-size: 0.82rem;
    color: oklch(0.5 0.01 255);
    line-height: 1.45;
    letter-spacing: -0.02em;
    word-break: keep-all;
}

/* 위치 대략 안내 — 도시개발/택지 주소 미보정 (마커 점선과 짝). */
.sale-panel__approx[b-1ruo6l7gqz] {
    margin: 4px 0 0;
    padding: 7px 10px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.45;
    color: #8a6d1a;
    background: #fdf8ee;
    border-radius: 8px;
    letter-spacing: -0.01em;
    word-break: keep-all;
}

/* 단지 요약 메타 — 호갱노노식 "639세대 · 2029년 1월 입주예정" (단지명 아래 한 줄). */
.sale-panel__meta[b-1ruo6l7gqz] {
    margin: 2px 0 0;
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--dk-ink-2);
    letter-spacing: -0.02em;
}

/* 분양가 범위 — hero 안 강조 (일반 패널 hero-price 톤). */
.sale-panel__price[b-1ruo6l7gqz] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin-top: 4px;
    padding: 12px 14px;
    background: oklch(0.97 0.02 50);
    border-radius: 12px;
}
.sale-panel__price-label[b-1ruo6l7gqz] {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--dk-ink-2);
}
.sale-panel__price-value[b-1ruo6l7gqz] {
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--sale-accent);
    letter-spacing: -0.02em;
}

/* 여러 공고 통합 안내 (헤더) */
.sale-panel__multi[b-1ruo6l7gqz] {
    margin: 2px 0 0;
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--dk-muted);
    letter-spacing: -0.02em;
}

/* === 공고별 섹션 카드 (최초분양 + 무순위·잔여세대 등) === */
.sale-panel__notice[b-1ruo6l7gqz] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 14px;
    border: 1px solid var(--dk-line);
    border-radius: 14px;
}
/* 무순위·잔여세대 — 채도 낮춰 부가 정보임을 시각 구분 (한국 컨벤션 — 취소/부가 = 회색). */
.sale-panel__notice.is-remainder[b-1ruo6l7gqz] {
    background: var(--dk-chip-bg);
    border-style: dashed;
}
.sale-panel__notice-head[b-1ruo6l7gqz] {
    display: flex;
    align-items: center;
    gap: 8px;
}
.sale-panel__notice-type[b-1ruo6l7gqz] {
    font-size: 0.92rem;
    font-weight: 800;
    color: var(--dk-ink);
    letter-spacing: -0.02em;
    word-break: keep-all;
}
.sale-panel__notice-tag[b-1ruo6l7gqz] {
    flex-shrink: 0;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--dk-muted);
    background: oklch(0.93 0.005 250);
    padding: 2px 8px;
    border-radius: 7px;
    line-height: 1.5;
}

/* === 섹션 공통 === */
.sale-panel__section[b-1ruo6l7gqz] {
    padding: 0;
}
.sale-panel__section + .sale-panel__section[b-1ruo6l7gqz] {
    padding-top: 14px;
    border-top: 1px solid var(--dk-line);
}

.sale-panel__sectitle[b-1ruo6l7gqz] {
    font-size: 0.9rem;
    font-weight: 800;
    color: var(--dk-ink);
    margin: 0 0 10px;
    letter-spacing: -0.02em;
}

/* === 기본 정보 (공급세대수·청약일정 등) === */
.sale-panel__facts[b-1ruo6l7gqz] {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 9px 16px;
    margin: 0;
}
.sale-panel__facts dt[b-1ruo6l7gqz] {
    font-size: 0.8rem;
    color: var(--dk-muted);
    font-weight: 600;
}
.sale-panel__facts dd[b-1ruo6l7gqz] {
    margin: 0;
    font-size: 0.86rem;
    font-weight: 600;
    color: var(--dk-ink);
    text-align: right;
    word-break: keep-all;
}
.tabular[b-1ruo6l7gqz] {
    font-variant-numeric: tabular-nums;
}

/* === 평형별 분양가 표 (경쟁률·당첨가점 컬럼 추가 시 최대 6열) === */
.sale-panel__types[b-1ruo6l7gqz] {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.76rem;
}
.sale-panel__types th[b-1ruo6l7gqz] {
    text-align: left;
    font-weight: 600;
    color: var(--dk-muted);
    padding: 7px 4px;
    border-bottom: 1px solid var(--dk-line);
    white-space: nowrap;
}
.sale-panel__types td[b-1ruo6l7gqz] {
    padding: 8px 4px;
    border-bottom: 1px solid var(--dk-line);
    color: var(--dk-ink);
    word-break: keep-all;
    white-space: nowrap;
}
/* 첫 컬럼(주택형) 외 전부 우측 정렬. */
.sale-panel__types th:not(:first-child)[b-1ruo6l7gqz],
.sale-panel__types td:not(:first-child)[b-1ruo6l7gqz] {
    text-align: right;
}
/* 분양가(4번째 컬럼) 강조 — accent 코랄. */
.sale-panel__types td:nth-child(4)[b-1ruo6l7gqz] {
    font-weight: 700;
    color: var(--sale-accent);
}

.sale-panel__note[b-1ruo6l7gqz] {
    font-size: 0.7rem;
    line-height: 1.5;
    color: var(--dk-muted);
    margin: 8px 0 0;
}

/* === 링크 버튼 === */
.sale-panel__links[b-1ruo6l7gqz] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.sale-panel__link[b-1ruo6l7gqz] {
    display: block;
    text-align: center;
    padding: 11px 12px;
    border-radius: 11px;
    font-size: 0.86rem;
    font-weight: 700;
    text-decoration: none;
    border: 1px solid var(--dk-line);
    color: var(--dk-accent);
    background: #fff;
    transition: background-color 150ms ease-out;
}
.sale-panel__link:hover[b-1ruo6l7gqz] {
    background: var(--dk-accent-soft);
}
.sale-panel__link--primary[b-1ruo6l7gqz] {
    background: var(--dk-accent);
    color: #fff;
    border-color: var(--dk-accent);
}
.sale-panel__link--primary:hover[b-1ruo6l7gqz] {
    background: oklch(0.5 0.17 256);
    color: #fff;
}

.sale-panel__source[b-1ruo6l7gqz] {
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--dk-muted);
    margin: 0;
}

/* 모바일 — 일반 패널과 동일 풀스크린 슬라이드업. */
@media (max-width: 700px) {
    .sale-panel[b-1ruo6l7gqz] {
        position: fixed;
        inset: 0;
        width: 100%;
        max-width: 100%;
        border: none;
        border-radius: 0;
        box-shadow: none;
        padding: 18px 18px 24px;
        z-index: 150;
        animation: salePanelSlideUp-b-1ruo6l7gqz 280ms cubic-bezier(0.16, 1, 0.3, 1);
    }
    @keyframes salePanelSlideUp-b-1ruo6l7gqz {
        from { transform: translateY(100%); }
        to { transform: translateY(0); }
    }
}

@media (prefers-reduced-motion: reduce) {
    .sale-panel[b-1ruo6l7gqz] { animation: none; }
}
/* _content/AptSonpoom/Components/Pages/ExploreParts/SearchCard.razor.rz.scp.css */
/* ============================================================
   M2-2.3 — SearchCard scoped CSS (2026-05-30).
   /explore 좌상단 검색박스 + 자동완성 dropdown. 320px 너비.
   z-index 30 (좌상단 모듈군 — Explore.razor.css 표준).
   ============================================================ */

.search-card[b-rc74r044dc] {
    position: absolute;
    top: 12px;
    left: 12px;
    /* z-index 110 — 단지 패널(z-index 100) 위에 항상 떠 있게 (호갱노노식 — 패널 열려도 검색박스 그대로).
       패널이 좌측 full-height 라 그 아래면 가려짐. 패널은 padding-top 으로 콘텐츠를 검색박스 아래에서 시작. */
    z-index: 110;
    width: 320px;
    max-width: calc(100vw - 24px);
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    /* hover 시 그림자 깊이 — chrome 한정 직접 박기 (메모리 feedback-design-restrained-richness, hover 룰). */
    transition: all 1s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-card:hover[b-rc74r044dc] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

.search-card__inner[b-rc74r044dc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    /* 순환 오버레이(.search-card__hotticker) 절대배치 기준. */
    position: relative;
}

/* handoff 이식 (2026-06-03) — 돋보기는 accent 톤 라인 아이콘 (이모지 폐기). */
.search-card__icon[b-rc74r044dc] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    color: var(--color-accent);
    user-select: none;
}

/* 검색어 지우기(×) 버튼 — handoff clear. q 있을 때만 렌더 (razor 가드). */
.search-card__clear[b-rc74r044dc] {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    padding: 3px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    cursor: pointer;
    color: var(--color-text-muted);
    transition: background 120ms ease-out, color 120ms ease-out;
}
.search-card__clear:hover[b-rc74r044dc] {
    background: var(--color-surface-alt);
    color: var(--color-text);
}

/* 모바일 풀스크린 검색 닫기(✕) — PC 기본 숨김(모바일 풀스크린 상태에서만 @media 가 노출). PC 동작 불변. */
.search-card__mclose[b-rc74r044dc] {
    display: none;
}

.search-card__input[b-rc74r044dc] {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font: inherit;
    font-size: 0.95rem;
    color: var(--color-text);
    padding: 4px 0;
}

.search-card__input[b-rc74r044dc]::placeholder {
    color: var(--color-text-muted);
}

/* input type="search" 의 webkit 기본 clear(×) 버튼 숨김 — 우리 커스텀 .search-card__clear 와 중복(× 두 개) 차단. */
.search-card__input[b-rc74r044dc]::-webkit-search-cancel-button,
.search-card__input[b-rc74r044dc]::-webkit-search-decoration {
    -webkit-appearance: none;
    appearance: none;
}

.search-card__input:focus[b-rc74r044dc] {
    outline: 0;
}

/* 검색박스 focus 시 카드 외곽에 네온 블루 ring (바다 팔레트 chrome 한정, focus 시각 강조). */
.search-card:focus-within[b-rc74r044dc] {
    box-shadow:
        0 4px 12px rgba(0, 0, 0, 0.18),
        0 0 0 3px rgba(77, 159, 255, 0.3);
}

/* ============================================================
   도킹 (단지 패널 열림) — 호갱노노식: 검색박스가 패널 상단 헤더 띠로 편입.
   PC 한정 (모바일은 패널이 바텀시트라 도킹 X — 아래 @media (max-width) 가 별도 처리).
   패널(.explore-panel: top:0 left:0 width:400)과 같은 폭·같은 좌측 정렬로 flush.
   자체 그림자 제거 + 아래 hairline 경계선 + 위 모서리만 둥글게 → 패널과 한 덩어리.
   ============================================================ */
@media (min-width: 43.76em) {
    .search-card--docked[b-rc74r044dc] {
        top: 0;
        left: 0;
        width: 400px;
        max-width: calc(100% - 16px);
        /* 헤더 띠 높이 56px 고정 — 패널 padding-top(70px, Explore.razor.css)이 이 높이에 정확히 정합.
           폰트 렌더 편차로 패널 콘텐츠(단지명·닫기)를 덮는 사고 차단 (결정적 높이). */
        height: 56px;
        box-sizing: border-box;
        /* 박스 크기 유지하려 border 는 두되 위·좌·우 투명, 아래만 hairline (패널 콘텐츠와 구분선). */
        border-color: transparent;
        border-bottom-color: var(--color-border);
        /* 위 모서리만 둥글게 (좌측은 화면 끝, 아래는 패널 본문과 연속). 패널의 top-right 라운딩과 정합. */
        border-radius: 0 var(--radius-md) 0 0;
        box-shadow: none;
    }

    /* 도킹 시엔 hover 그림자 X (패널 본체가 이미 그림자 가짐 — 떠 있는 카드 톤 제거). */
    .search-card--docked:hover[b-rc74r044dc] {
        box-shadow: none;
    }

    /* 도킹 상태 focus ring 은 네온 블루만 (그림자 깊이 X — 헤더 띠라 평면 유지). */
    .search-card--docked:focus-within[b-rc74r044dc] {
        box-shadow: 0 0 0 3px rgba(77, 159, 255, 0.3);
    }

    /* 고정 높이(56px) 안에서 검색 입력 세로 중앙 정렬 (inner 는 이미 align-items:center). 좌우 패딩만 유지. */
    .search-card--docked .search-card__inner[b-rc74r044dc] {
        height: 56px;
        padding-top: 0;
        padding-bottom: 0;
    }
}

/* ============================================================
   Dropdown (검색 결과 listbox)
   ============================================================ */

.search-card__dropdown[b-rc74r044dc] {
    list-style: none;
    margin: 6px 0 0 0;
    padding: 6px 0;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    max-height: 360px;
    overflow-y: auto;
    /* dropdown 은 search-card 안에서 자연 흐름 (absolute X) — search-card 가 absolute 라
       자식 dropdown 이 정상 위치. 단 dropdown 이 카드 너비 초과 시 자체 max-width. */
}

.search-card__empty[b-rc74r044dc] {
    padding: 16px 14px;
    text-align: center;
}

.search-card__empty-title[b-rc74r044dc] {
    margin: 0 0 4px 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
}

.search-card__empty-body[b-rc74r044dc] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-text-muted);
    line-height: 1.5;
}

.search-card__group-header[b-rc74r044dc] {
    padding: 6px 14px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    background: var(--color-surface-alt);
}

.search-card__group-separator[b-rc74r044dc] {
    height: 1px;
    margin: 4px 0;
    background: var(--color-border);
}

/* 2026-06-03 — 검색 드롭다운 추천 광고 (ExploreSearch, 디폴트 OFF). 드롭다운 항목 톤에 맞춰 컴팩트.
   AdSlot 인피드 기본(min-height 120px / margin 16px)은 드롭다운에 과해 ::deep 로 축소. 좌우 14px = 항목과 정렬. */
.search-card__ad[b-rc74r044dc] {
    padding: 6px 14px 2px;
}

.search-card__ad[b-rc74r044dc]  .ad-slot--infeed {
    min-height: 60px;
    margin: 0;
}

.search-card__option[b-rc74r044dc] {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 4px 10px;
    padding: 10px 14px;
    cursor: pointer;
    border-left: 3px solid transparent;
    transition: background 120ms ease-out, border-color 120ms ease-out;
}

.search-card__option:hover[b-rc74r044dc],
.search-card__option.is-active[b-rc74r044dc] {
    background: var(--color-accent-soft);
    border-left-color: var(--color-accent);
}

.search-card__option-label[b-rc74r044dc] {
    grid-column: 1;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 법정동 — 단지명 앞 옅은 칩 프리픽스 (SiteHeader 검색과 동형). */
.search-card__option-dong[b-rc74r044dc] {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 6px;
    border-radius: var(--radius-sm);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    font-size: 0.74rem;
    font-weight: 500;
    vertical-align: middle;
}

.search-card__option-name[b-rc74r044dc] {
    vertical-align: middle;
}

/* 결과가 limit 으로 잘렸을 때 — "총 N곳 중 M곳 표시" 안내 (클릭 대상 아님). */
.search-card__more[b-rc74r044dc] {
    padding: 6px 14px 4px;
    font-size: 0.74rem;
    color: var(--color-text-muted);
    line-height: 1.5;
    border-top: 1px solid var(--color-border);
    margin-top: 4px;
}

.search-card__option-meta[b-rc74r044dc] {
    grid-column: 1 / -1;
    grid-row: 2;
    font-size: 0.78rem;
    color: var(--color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.search-card__option-arrow[b-rc74r044dc] {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    align-items: center;
    color: var(--color-text-muted);
    user-select: none;
    /* handoff — hover 시 → 가 살짝 오른쪽으로 (방향 단서). */
    transition: transform 140ms ease-out, color 140ms ease-out;
}

.search-card__option:hover .search-card__option-arrow[b-rc74r044dc],
.search-card__option.is-active .search-card__option-arrow[b-rc74r044dc] {
    color: var(--color-accent);
    transform: translateX(2px);
}

/* ============================================================
   순환 오버레이 + 드롭다운 인기 그룹 — PC 기본 숨김 (모바일 @media 에서만 표시).
   → PC 검색창 placeholder 그대로 + PC 빈칸 포커스 드롭다운엔 인기 그룹 안 뜸 (PC 동작 불변).
   ============================================================ */
.search-card__hotticker[b-rc74r044dc] {
    display: none;   /* PC 숨김 — 모바일 @media 에서 display:block */
}

.search-card__hotgroup[b-rc74r044dc] {
    display: none;   /* PC 숨김 — 인기 단지 그룹 헤더·행·주석. 모바일 @media 에서 노출 */
}

/* ============================================================
   모바일 (≤ 700px) — handoff(2026-06-05) "값 그대로": 둥둥 뜬 흰 검색 알약 + 우측 햄버거(ActionDock).
   옛 상단 헤더 밴드(M2-2.11) 폐기 → 지도 위 floating 알약(그림자). 햄버거는 우 12, 알약은 그 앞까지 폭 꽉.
   ============================================================ */
@media (max-width: 43.75em) {
    /* 검색 알약 — handoff .m-searchpill: 높이 46, radius 13, 흰 배경, 알약/버튼 그림자(값 그대로).
       top 12 + 노치 safe-area. 좌 12 ~ 햄버거(우 12 + 46 = 58) 앞 9px 간격 = right 67. */
    .search-card[b-rc74r044dc] {
        top: calc(12px + env(safe-area-inset-top, 0px));
        left: 12px;
        right: 67px;
        width: auto;
        height: 46px;
        box-sizing: border-box;
        background: #fff;
        border: none;
        border-radius: 13px;
        box-shadow: 0 6px 18px rgba(20, 30, 50, .14), 0 0 0 1px rgba(20, 30, 50, .05);
    }

    /* 46px 알약 안에서 input 세로 중앙 — inner 가 알약 높이를 꽉 채움. 좌우 패딩(14px) 유지. */
    .search-card__inner[b-rc74r044dc] {
        height: 100%;
        padding-top: 0;
        padding-bottom: 0;
    }

    /* hover 시 그림자 깊이 X (탭 디바이스라 hover 무의미) — handoff 그림자 유지. focus 시 네온 블루 ring 만. */
    .search-card:hover[b-rc74r044dc] {
        box-shadow: 0 6px 18px rgba(20, 30, 50, .14), 0 0 0 1px rgba(20, 30, 50, .05);
    }
    .search-card:focus-within[b-rc74r044dc] {
        box-shadow:
            0 6px 18px rgba(20, 30, 50, .14),
            0 0 0 1px rgba(20, 30, 50, .05),
            0 0 0 3px rgba(77, 159, 255, 0.3);
    }

    /* ============================================================
       ② 모바일 풀스크린 검색 (2026-06-04) — 검색창 탭(포커스/드롭다운 열림) 시 화면 전체를 덮는
       풀스크린 검색 오버레이로 전환. 단지 패널 모바일 풀스크린(.explore-panel: position:fixed; inset:0
       + slideUp + safe-area, Explore.razor.css)과 같은 시각 언어 — surface 배경·z 층·아래에서 슬라이드업.
       razor 가 _focused/_dropdownOpen + !PanelOpen 일 때 .search-card--mfull 부여 (서버 왕복은 포커스/탭 이벤트만).
       PC 는 이 @media 밖이라 무영향 → PC 좌상단 320px·키보드 네비 100% 불변. *@
       ============================================================ */
    .search-card--mfull[b-rc74r044dc] {
        position: fixed;
        inset: 0;
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        height: auto;
        max-width: none;
        /* handoff .m-panel — 상단 검색 행(자체 15px 패딩) + 그 아래 스크롤 영역이 화면을 flush 로 채움.
           바깥 패딩은 노치 회피용 top safe-area 만 (좌우/하단 패딩은 행·섹션이 자체 보유). */
        padding: env(safe-area-inset-top, 0px) 0 0 0;
        background: var(--color-surface);
        border: none;
        border-radius: 0;
        box-shadow: none;
        /* 패널(z 150)과 같은 풀스크린 층. 패널은 mfull 진입 시 razor 가 안 띄움(!PanelOpen 가드)이라 충돌 X.
           햄버거(z50)·밴드(z45) 위로 덮어 풀스크린. */
        z-index: 150;
        display: flex;
        flex-direction: column;
        /* 단지 패널 모바일 slideUp 과 동형(아래에서 위로). reduced-motion 은 아래 @media 가 즉시. */
        animation: searchCardSlideUp-b-rc74r044dc 280ms cubic-bezier(0.16, 1, 0.3, 1);
    }

    @keyframes searchCardSlideUp-b-rc74r044dc {
        from { transform: translateY(100%); opacity: 0.6; }
        to { transform: translateY(0); opacity: 1; }
    }

    /* 풀스크린에선 떠 있는 카드 톤(ring·그림자) 제거 — 화면 전체가 surface 라 외곽선 무의미. */
    .search-card--mfull:hover[b-rc74r044dc],
    .search-card--mfull:focus-within[b-rc74r044dc] {
        border: none;
        box-shadow: none;
    }

    /* 풀스크린 상단 검색 행 — handoff .m-searchrow: 돋보기 + input + ✕ 한 줄, 자체 15px 패딩 + 하단 hairline.
       알약 배경/테두리 없이 평면 (패널 한 덩어리). */
    .search-card--mfull .search-card__inner[b-rc74r044dc] {
        flex: 0 0 auto;
        gap: 11px;
        height: auto;
        padding: 15px;
        border: none;
        border-bottom: 1px solid var(--color-border);
        border-radius: 0;
        background: transparent;
    }

    /* 풀스크린 ✕(검색 닫기) 노출 — 입력 우측. 탭 타겟 44px+. 단지 패널 닫기 톤(투명 배경·muted→ink hover). */
    .search-card--mfull .search-card__mclose[b-rc74r044dc] {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 auto;
        width: 44px;
        height: 44px;
        margin-right: -8px;       /* inner 우패딩(12) 흡수해 시각상 우측 정렬 */
        padding: 0;
        border: 0;
        border-radius: var(--radius-sm);
        background: none;
        color: var(--color-text-muted);
        cursor: pointer;
        transition: color 120ms ease-out, background 120ms ease-out;
    }
    .search-card--mfull .search-card__mclose:hover[b-rc74r044dc] {
        background: var(--color-surface);
        color: var(--color-text);
    }

    /* 풀스크린 드롭다운 = 검색 행 아래 스크롤 영역(handoff .m-scroll)이 남은 화면을 채움. flush(패딩 0). */
    .search-card--mfull .search-card__dropdown[b-rc74r044dc] {
        flex: 1 1 auto;
        margin: 0;
        padding: 0;
        border: none;
        border-radius: 0;
        box-shadow: none;
        background: transparent;
        max-height: none;          /* 풀스크린이라 flex 로 남은 높이 다 차지 */
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }

    .search-card__dropdown[b-rc74r044dc] {
        max-height: 50dvh;
    }

    /* ③ (2026-06-04) — 단지 패널 열림 시 모바일 상단 docked 검색 띠를 띄우지 않음.
       옛 M2-2.10 은 패널 열림 시 풀폭 56px 검색 띠(z160)를 상단에 도킹했으나, 사용자 요청으로 폐기 —
       패널 콘텐츠(단지명·hero)가 화면 최상단부터 시작하게 함(Explore.razor.css .explore-panel 모바일 padding 에서
       56px 검색 띠 reserve 제거). 패널은 자체 닫기(×)·즐겨찾기 버튼이 상단에 있어 검색 띠 없이도 탐색 가능.
       PC docked(@media min-width 43.76em)는 그대로 — 이 숨김은 모바일 한정. */
    .search-card--docked[b-rc74r044dc] {
        display: none;
    }

    /* --- 검색창 안 순환 오버레이 (모바일 한정 표시) --- */
    /* 돋보기 아이콘 옆 placeholder 자리에 절대배치. 입력 위에 떠 1~10위를 한 줄씩 순환.
       aria-hidden + pointer-events:none → 탭은 밑의 <input> 으로 통과해 포커스 → 오버레이 사라짐. */
    /* 1행 높이 윈도우(height:1.4em + overflow:hidden) 안에서 track 이 롤링. 검증된 구조 —
       윈도우 자체를 1행으로 두고 overflow:hidden 으로 1줄만 노출 (flex 자식 클립이 높이 무시하던 버그 회피).
       돋보기와 세로정렬: 돋보기(21px)는 inner flex(align-items:center)로 46px 정중앙, 윈도우는 top:50%/translateY(-50%)로
       같은 정중앙 — 두 중심 동일. */
    .search-card__hotticker[b-rc74r044dc] {
        display: block;
        position: absolute;
        /* 돋보기 아이콘(21px) + inner gap(8) + 좌패딩(14) ≈ 43px 부터 시작. 우측은 입력 끝까지. */
        left: 43px;
        right: 14px;
        top: 50%;
        transform: translateY(-50%);
        height: 1.4em;               /* 1행 윈도우 */
        line-height: 1.4em;
        overflow: hidden;
        pointer-events: none;        /* 탭은 밑의 input 으로 통과 */
        /* 검색창 안 순위 표시 글씨 살짝 키움 (사용자 요청 2026-06-05 — 검색창 안에 보일 때만).
           윈도우 높이(1.4em)·롤링 단위(-1.4em)가 모두 em 비례라 1줄 윈도우·롤링 정합 유지. */
        font-size: 1.06rem;
        font-weight: 600;
    }

    /* 순환 오버레이가 떠 있을 때(빈칸+비포커스+인기데이터 — 그때만 DOM 에 존재) 입력 placeholder 숨김.
       :has() 로 오버레이 존재를 정확히 게이트 → "아파트·지역명으로 검색" 과 순위가 겹쳐 보이던 버그 차단. */
    .search-card__inner:has(.search-card__hotticker) .search-card__input[b-rc74r044dc]::placeholder {
        color: transparent;
    }

    .search-card__hotticker-track[b-rc74r044dc] {
        display: block;
        will-change: transform;
    }

    .search-card__hotticker-row[b-rc74r044dc] {
        display: flex;
        align-items: center;
        gap: 6px;
        height: 1.4em;
        line-height: 1.4em;
        overflow: hidden;
        white-space: nowrap;
    }

    .search-card__hotticker-rank[b-rc74r044dc] {
        flex: 0 0 auto;
        font-weight: 700;
        color: var(--color-accent);
    }

    .search-card__hotticker-name[b-rc74r044dc] {
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        color: var(--color-text-muted);   /* placeholder 톤 */
    }

    /* 순환 키프레임 — N(2~10)별. 1행 높이 = 1.4em. track 은 N 실항목 + 1위 복제(끊김 없는 루프).
       한 위당 2초 (hold 약 78% + slide 약 22%). HotDanjiCard 전광판 기법 차용. */
    .search-card__hotticker-track[data-n="2"][b-rc74r044dc]  { animation: search-ticker-2-b-rc74r044dc  4s  cubic-bezier(0.7,0,0.3,1) infinite; }
    .search-card__hotticker-track[data-n="3"][b-rc74r044dc]  { animation: search-ticker-3-b-rc74r044dc  6s  cubic-bezier(0.7,0,0.3,1) infinite; }
    .search-card__hotticker-track[data-n="4"][b-rc74r044dc]  { animation: search-ticker-4-b-rc74r044dc  8s  cubic-bezier(0.7,0,0.3,1) infinite; }
    .search-card__hotticker-track[data-n="5"][b-rc74r044dc]  { animation: search-ticker-5-b-rc74r044dc  10s cubic-bezier(0.7,0,0.3,1) infinite; }
    .search-card__hotticker-track[data-n="6"][b-rc74r044dc]  { animation: search-ticker-6-b-rc74r044dc  12s cubic-bezier(0.7,0,0.3,1) infinite; }
    .search-card__hotticker-track[data-n="7"][b-rc74r044dc]  { animation: search-ticker-7-b-rc74r044dc  14s cubic-bezier(0.7,0,0.3,1) infinite; }
    .search-card__hotticker-track[data-n="8"][b-rc74r044dc]  { animation: search-ticker-8-b-rc74r044dc  16s cubic-bezier(0.7,0,0.3,1) infinite; }
    .search-card__hotticker-track[data-n="9"][b-rc74r044dc]  { animation: search-ticker-9-b-rc74r044dc  18s cubic-bezier(0.7,0,0.3,1) infinite; }
    .search-card__hotticker-track[data-n="10"][b-rc74r044dc] { animation: search-ticker-10-b-rc74r044dc 20s cubic-bezier(0.7,0,0.3,1) infinite; }

    /* N=1 — 순환 의미 없음. 복제 없음 + keyframe 미지정 = 정적 1행. */

    @keyframes search-ticker-2-b-rc74r044dc {
        0%, 39%    { transform: translateY(0); }
        50%, 89%   { transform: translateY(-1.4em); }
        100%       { transform: translateY(-2.8em); }
    }
    @keyframes search-ticker-3-b-rc74r044dc {
        0%, 26%    { transform: translateY(0); }
        33%, 59%   { transform: translateY(-1.4em); }
        66%, 100%  { transform: translateY(-4.2em); }
    }
    @keyframes search-ticker-4-b-rc74r044dc {
        0%, 19%    { transform: translateY(0); }
        25%, 44%   { transform: translateY(-1.4em); }
        50%, 69%   { transform: translateY(-2.8em); }
        75%, 100%  { transform: translateY(-5.6em); }
    }
    @keyframes search-ticker-5-b-rc74r044dc {
        0%, 15%    { transform: translateY(0); }
        20%, 35%   { transform: translateY(-1.4em); }
        40%, 55%   { transform: translateY(-2.8em); }
        60%, 75%   { transform: translateY(-4.2em); }
        80%, 100%  { transform: translateY(-7em); }
    }
    @keyframes search-ticker-6-b-rc74r044dc {
        0%, 12%    { transform: translateY(0); }
        16.6%, 29% { transform: translateY(-1.4em); }
        33.3%, 45% { transform: translateY(-2.8em); }
        50%, 62%   { transform: translateY(-4.2em); }
        66.6%, 79% { transform: translateY(-5.6em); }
        83.3%, 100%{ transform: translateY(-8.4em); }
    }
    @keyframes search-ticker-7-b-rc74r044dc {
        0%, 10%      { transform: translateY(0); }
        14.2%, 24%   { transform: translateY(-1.4em); }
        28.5%, 38%   { transform: translateY(-2.8em); }
        42.8%, 53%   { transform: translateY(-4.2em); }
        57.1%, 67%   { transform: translateY(-5.6em); }
        71.4%, 81%   { transform: translateY(-7em); }
        85.7%, 100%  { transform: translateY(-9.8em); }
    }
    @keyframes search-ticker-8-b-rc74r044dc {
        0%, 9%       { transform: translateY(0); }
        12.5%, 21%   { transform: translateY(-1.4em); }
        25%, 34%     { transform: translateY(-2.8em); }
        37.5%, 46%   { transform: translateY(-4.2em); }
        50%, 59%     { transform: translateY(-5.6em); }
        62.5%, 71%   { transform: translateY(-7em); }
        75%, 84%     { transform: translateY(-8.4em); }
        87.5%, 100%  { transform: translateY(-11.2em); }
    }
    @keyframes search-ticker-9-b-rc74r044dc {
        0%, 8%       { transform: translateY(0); }
        11.1%, 19%   { transform: translateY(-1.4em); }
        22.2%, 30%   { transform: translateY(-2.8em); }
        33.3%, 41%   { transform: translateY(-4.2em); }
        44.4%, 52%   { transform: translateY(-5.6em); }
        55.5%, 63%   { transform: translateY(-7em); }
        66.6%, 74%   { transform: translateY(-8.4em); }
        77.7%, 85%   { transform: translateY(-9.8em); }
        88.8%, 100%  { transform: translateY(-12.6em); }
    }
    @keyframes search-ticker-10-b-rc74r044dc {
        0%, 7%       { transform: translateY(0); }
        10%, 17%     { transform: translateY(-1.4em); }
        20%, 27%     { transform: translateY(-2.8em); }
        30%, 37%     { transform: translateY(-4.2em); }
        40%, 47%     { transform: translateY(-5.6em); }
        50%, 57%     { transform: translateY(-7em); }
        60%, 67%     { transform: translateY(-8.4em); }
        70%, 77%     { transform: translateY(-9.8em); }
        80%, 87%     { transform: translateY(-11.2em); }
        90%, 100%    { transform: translateY(-14em); }
    }

    /* --- 풀스크린 패널 섹션 (모바일 한정 표시) — handoff .m-sechead/.m-list --- */
    /* PC 기본 display:none(.search-card__hotgroup)을 모바일에서만 풂. */
    .search-card__sechead-li.search-card__hotgroup[b-rc74r044dc],
    li.search-card__hotgroup.search-card__hot-note[b-rc74r044dc] {
        display: block;
    }

    .search-card__option.search-card__hotgroup[b-rc74r044dc] {
        display: grid;
    }

    /* 접이식 섹션 헤더 (handoff .m-sechead) — 회색 밴드. 번개칩 + 타이틀 + 미리보기 티커 + 셰브론. */
    .search-card__sechead[b-rc74r044dc] {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 10px 16px;
        border: none;
        background: oklch(0.965 0.004 250);
        cursor: pointer;
        text-align: left;
        font: inherit;
        transition: background 120ms ease-out;
    }
    .search-card__sechead:hover[b-rc74r044dc],
    .search-card__sechead:focus-visible[b-rc74r044dc] {
        background: oklch(0.95 0.006 256);
        outline: 0;
    }

    .search-card__sec-bolt[b-rc74r044dc] {
        width: 20px;
        height: 20px;
        flex: none;
        border-radius: 7px;
        display: flex;
        align-items: center;
        justify-content: center;
        color: var(--color-accent);
        background: var(--color-accent-soft);
    }

    .search-card__sectitle[b-rc74r044dc] {
        font-size: 12.5px;
        font-weight: 800;
        color: oklch(0.4 0.015 255);
        letter-spacing: -.02em;
        white-space: nowrap;
    }

    .search-card__sec-grow[b-rc74r044dc] {
        flex: 1;
    }

    .search-card__sec-chev[b-rc74r044dc] {
        flex: none;
        display: flex;
        color: var(--color-text-muted);
    }

    /* 헤더 미리보기 티커 — 접힘일 때만. 작은 1행 윈도우(handoff .m-headpeek, max 150px). 순환 트랙·키프레임은 오버레이와 공유. */
    .search-card__headpeek[b-rc74r044dc] {
        flex: none;
        max-width: 150px;
        min-width: 0;
        margin-right: 4px;
        height: 1.4em;
        overflow: hidden;
        font-size: 12.5px;
        line-height: 1.4em;
    }
    .search-card__headpeek .search-card__hotticker-name[b-rc74r044dc] {
        font-weight: 600;
        color: oklch(0.42 0.015 255);
    }

    /* "최근 본 단지"·"단지"·"지역" 그룹 헤더도 풀스크린에선 회색 섹션 밴드 (handoff .m-sechead.static). */
    .search-card__group-header[b-rc74r044dc] {
        padding: 10px 16px;
        background: oklch(0.965 0.004 250);
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: -.02em;
        text-transform: none;
        color: oklch(0.5 0.012 255);
    }

    /* 인기 행 순위 — handoff: 1~3위 accent, 4위↓ 그레이 (단지명 앞 프리픽스). */
    .search-card__hot-rank[b-rc74r044dc] {
        display: inline-block;
        min-width: 1.2em;
        margin-right: 6px;
        font-weight: 700;
        color: oklch(0.68 0.01 250);
        vertical-align: middle;
    }
    .search-card__option.is-top .search-card__hot-rank[b-rc74r044dc] {
        color: var(--color-accent);
    }

    .search-card__hot-count[b-rc74r044dc] {
        margin-left: 8px;
        font-weight: 600;
        color: var(--color-text);
    }

    /* 자체정의 단서 ※ 1줄 — 인기 그룹 하단 (handoff .m-foot). */
    .search-card__hot-note[b-rc74r044dc] {
        padding: 12px 16px;
        font-size: 0.72rem;
        color: var(--color-text-muted);
        line-height: 1.55;
        border-bottom: 1px solid var(--color-border);
    }

    /* 유형 필터 (전체/일반/분양) — 인기 섹션 안 세그먼트 (모바일 한정 표시). */
    .search-card__hotfilter-li.search-card__hotgroup[b-rc74r044dc] {
        display: block;
    }
    .search-card__hotfilter[b-rc74r044dc] {
        display: flex;
        gap: 3px;
        margin: 8px 16px;
        padding: 3px;
        background: oklch(0.95 0.006 256);
        border-radius: 10px;
    }
    .search-card__hotfbtn[b-rc74r044dc] {
        flex: 1;
        padding: 7px 0;
        border: none;
        background: none;
        border-radius: 8px;
        font: inherit;
        font-size: 12.5px;
        font-weight: 700;
        letter-spacing: -.02em;
        color: var(--color-text-muted);
        cursor: pointer;
        transition: background 120ms, color 120ms, box-shadow 120ms;
    }
    .search-card__hotfbtn.on[b-rc74r044dc] {
        background: #fff;
        color: var(--color-accent);
        box-shadow: 0 1px 3px rgba(20, 30, 50, .12);
    }

    /* '분양' 배지 — 인기 행 단지명 옆 작은 레드 알약 (지도 분양 마커 레드와 같은 의미색). */
    .search-card__sale-badge[b-rc74r044dc] {
        display: inline-block;
        margin-left: 5px;
        padding: 1px 6px;
        border-radius: 5px;
        font-size: 10px;
        font-weight: 800;
        letter-spacing: -.01em;
        color: #fff;
        background: oklch(0.585 0.215 27);
        vertical-align: middle;
    }
}

/* prefers-reduced-motion 사용자 (어지러움 호소) — transition 즉시 변경 + 순환 정지(1위 정적 노출). */
@media (prefers-reduced-motion: reduce) {
    .search-card[b-rc74r044dc],
    .search-card__option[b-rc74r044dc],
    .search-card__option-arrow[b-rc74r044dc],
    .search-card__clear[b-rc74r044dc] {
        transition: none;
    }
    .search-card__option:hover .search-card__option-arrow[b-rc74r044dc],
    .search-card__option.is-active .search-card__option-arrow[b-rc74r044dc] {
        transform: none;
    }
    /* 순환 멈춤 — track 을 0 위치 고정해 1위만 윈도우에 노출. */
    .search-card__hotticker-track[data-n][b-rc74r044dc] {
        animation: none !important;
        transform: translateY(0) !important;
    }
    /* ② 모바일 풀스크린 검색 슬라이드업 즉시(어지러움 회피). */
    .search-card--mfull[b-rc74r044dc] {
        animation: none !important;
    }
    .search-card--mfull .search-card__mclose[b-rc74r044dc] {
        transition: none;
    }
}
/* _content/AptSonpoom/Components/Pages/ExploreParts/SideRail.razor.rz.scp.css */
/* ============================================================
   M2-2.5 — SideRail scoped CSS (2026-05-30).
   /explore 우측 세로 지도 조작 사이드바. z-index 40 (M2-2.2 표준).
   ActionDock (top: 12px) 아래 — top: 72px.

   2026-06-03 (기대 디자인 핸드오프):
     · .side-rail = 투명 컨테이너. .side-rail__item = 카드 + 카드밖 라벨 묶음.
     · .side-rail__card = 흰 박스(아이콘 버튼만). .side-rail__cardlabel = 카드 바깥 아래 글씨.
     · 아이콘 20px 통일. 활성(is-on) 시 카드 전체 accent-soft 강조.
   ============================================================ */

.side-rail[b-eh3cjbbqpl] {
    position: absolute;
    top: 72px;
    right: 12px;
    z-index: 40;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

/* 카드 + 카드밖 라벨 세로 묶음. */
.side-rail__item[b-eh3cjbbqpl] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

/* 그룹 카드 — 흰 박스(독립). popover/hint 의 absolute 기준(position: relative). */
.side-rail__card[b-eh3cjbbqpl] {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 4px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    transition: box-shadow 1s cubic-bezier(0.16, 1, 0.3, 1), background 120ms ease-out, border-color 120ms ease-out;
}

.side-rail__card:hover[b-eh3cjbbqpl] {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.18);
}

/* 활성(is-on) 시 카드 전체 accent 강조 (필터·지도종류·거리·주변). */
.side-rail__card:has(.side-rail__btn.is-on)[b-eh3cjbbqpl] {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
}

/* 아이콘 버튼 — 정사각 통일 (라벨은 카드 밖). */
.side-rail__btn[b-eh3cjbbqpl] {
    width: 40px;
    height: 40px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    color: var(--color-text);
    cursor: pointer;
    font: inherit;
    transition: background 120ms ease-out, border-color 120ms ease-out;
}

.side-rail__btn:hover:not(:disabled)[b-eh3cjbbqpl],
.side-rail__btn:focus-visible:not(:disabled)[b-eh3cjbbqpl] {
    background: var(--color-accent-soft);
    border-color: var(--color-accent);
    outline: 0;
}

/* 활성 버튼 — 아이콘 색만 accent (배경은 카드가 처리). */
.side-rail__btn.is-on .side-rail__svg[b-eh3cjbbqpl] {
    color: var(--color-accent);
}

.side-rail__svg[b-eh3cjbbqpl] {
    display: block;
}

/* 카드 바깥 아래 라벨 (현위치·지도종류·주변·거리). */
.side-rail__cardlabel[b-eh3cjbbqpl] {
    font-size: 0.66rem;
    font-weight: 600;
    line-height: 1;
    color: var(--color-text-muted);
    white-space: nowrap;
    text-align: center;
}

/* 활성 카드의 라벨도 accent. */
.side-rail__item:has(.side-rail__btn.is-on) .side-rail__cardlabel[b-eh3cjbbqpl] {
    color: var(--color-accent);
}

/* ============================================================
   지도종류·주변 팝업 (popover) — 카드 좌측에 붙는 작은 옵션 박스.
   ============================================================ */
.side-rail__popover[b-eh3cjbbqpl] {
    position: absolute;
    top: 0;
    right: calc(100% + 6px);
    z-index: 41;
    min-width: 132px;
    padding: 10px 12px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    text-align: left;
}

.side-rail__popover-title[b-eh3cjbbqpl] {
    margin: 0 0 8px;
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--color-text);
}

.side-rail__opt[b-eh3cjbbqpl] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 0;
    font-size: 0.8rem;
    color: var(--color-text);
    cursor: pointer;
    white-space: nowrap;
}

.side-rail__opt input[b-eh3cjbbqpl] {
    accent-color: var(--color-accent);
    cursor: pointer;
}

.side-rail__popover-divider[b-eh3cjbbqpl] {
    height: 1px;
    margin: 8px 0;
    border: 0;
    background: var(--color-border);
}

.side-rail__popover-source[b-eh3cjbbqpl] {
    margin: 8px 0 0;
    font-size: 0.68rem;
    color: var(--color-text-muted);
}

/* 거리재기 활성 중 직선 거리 한계 안내 — 거리 카드 왼쪽에 뜨는 작은 칩 (absolute, 카드 폭 영향 0). */
.side-rail__hint[b-eh3cjbbqpl] {
    position: absolute;
    top: 0;
    right: calc(100% + 6px);
    z-index: 41;
    width: 168px;
    padding: 6px 9px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-md);
    font-size: 0.68rem;
    line-height: 1.4;
    color: var(--color-text-muted);
    word-break: keep-all;
    text-align: left;
}

/* 팝업 외부 클릭 닫기용 투명 backdrop — side-rail(40) 아래, 화면 전체. */
.side-rail__backdrop[b-eh3cjbbqpl] {
    position: fixed;
    inset: 0;
    z-index: 39;
}

/* 분석 통합 버튼 = 모바일 전용 (PC 숨김 — PC 는 인구·인구이동·비교 개별 버튼[멤버] 노출). */
.side-rail__item--analysis-trigger[b-eh3cjbbqpl] {
    display: none;
}

/* 분석 팝업 항목 버튼 — 지도종류 팝업과 톤 통일(왼쪽 정렬 리스트, 활성 accent). */
.side-rail__menuitem[b-eh3cjbbqpl] {
    display: block;
    width: 100%;
    text-align: left;
    border: 0;
    background: transparent;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 13px;
    color: var(--color-text);
    cursor: pointer;
    transition: background 0.12s ease;
}
.side-rail__menuitem:hover[b-eh3cjbbqpl],
.side-rail__menuitem:focus-visible[b-eh3cjbbqpl] {
    background: var(--color-surface-alt);
}
.side-rail__menuitem.is-on[b-eh3cjbbqpl] {
    color: var(--color-accent);
    font-weight: 700;
}

/* ============================================================
   모바일 (≤ 700px) — 우측 세로 일자 레일 (PC 동형, 전체 슬림 축소).
   2026-06-04 — ActionDock 이 햄버거(☰ top:12 + 높이 44 = ~56) 1버튼으로 접힘.
   새 상단바(검색창/햄버거)와 안 겹치게 top: 84px 로 조금 더 내림.
   카드·버튼·아이콘·라벨·gap 전체 축소로 슬림 세로 레일.
   ============================================================ */
@media (max-width: 43.75em) {
    .side-rail[b-eh3cjbbqpl] {
        top: 84px;
        bottom: auto;
        right: 12px;
        flex-direction: column;
        flex-wrap: nowrap;
        justify-content: flex-start;
        align-items: center;
        gap: 5px;
        max-width: none;
        /* 2026-06-04 — 레일 자체 스크롤(max-height + overflow-y:auto) 폐기. 사용자가 세로 스크롤바를 거슬려 함.
           아래 카드/버튼/라벨/gap 을 추가 슬림화해 세로 6항목이 스크롤 없이 화면에 다 들어가게 함.
           overflow-x 만 visible (popover·hint 가 카드 왼쪽으로 펼쳐져야 하므로 잘리면 안 됨). */
        overflow: visible;
        /* 슬림 축소 — 버튼/카드/라벨 폭 영향 없게 자식만 줄임. */
    }

    /* 카드 padding 축소 (4 → 2). 세로 높이 절약. */
    .side-rail__card[b-eh3cjbbqpl] {
        padding: 2px;
        gap: 1px;
    }

    /* 아이콘 버튼 축소 (40 → 32). 사용자 명시 "축소" — WCAG 44 미만, gap 으로 오터치 여유. */
    .side-rail__btn[b-eh3cjbbqpl] {
        width: 32px;
        height: 32px;
    }

    /* 카드 밖 라벨 축소 (0.66 → 0.56rem). */
    .side-rail__cardlabel[b-eh3cjbbqpl] {
        font-size: 0.56rem;
    }

    /* 카드+라벨 묶음 gap 축소 (4 → 2). 라벨이 카드에 바짝 붙어 세로 높이 절약. */
    .side-rail__item[b-eh3cjbbqpl] {
        gap: 2px;
    }

    /* popover — 세로 우측 레일이라 카드 "왼쪽"으로 펼침 (PC 동형). 화면 밖 안 나가게 클램프. */
    .side-rail__popover[b-eh3cjbbqpl] {
        top: 0;
        right: calc(100% + 6px);
        bottom: auto;
        max-width: calc(100vw - 24px);
    }

    .side-rail__opt[b-eh3cjbbqpl] {
        min-height: 38px;
        padding: 6px 0;
        font-size: 0.85rem;
    }

    .side-rail__opt input[b-eh3cjbbqpl] {
        width: 18px;
        height: 18px;
    }

    /* 거리재기 안내 칩 — 세로 레일이라 거리 카드 왼쪽으로 펼침 (PC 동형). 화면 밖 클램프. */
    .side-rail__hint[b-eh3cjbbqpl] {
        top: 0;
        right: calc(100% + 6px);
        bottom: auto;
        width: 168px;
        max-width: calc(100vw - 24px);
        text-align: left;
    }

    /* 모바일 — 인구·인구이동·비교 개별 버튼(멤버) 숨기고 "분석" 통합 버튼만 노출. */
    .side-rail__item--analysis-member[b-eh3cjbbqpl] {
        display: none;
    }
    .side-rail__item--analysis-trigger[b-eh3cjbbqpl] {
        display: flex;
    }
}

/* 짧은 세로 화면 (작은 폰 / 가로 모드 ≤ 560px) 추가 가드 (2026-06-04) —
   세로 6항목이 스크롤 없이 화면에 다 들어가게 한 단계 더 슬림화 (라벨·gap·top 압축).
   항목 누락 X — 전부 보이되 더 촘촘히. */
@media (max-width: 43.75em) and (max-height: 560px) {
    .side-rail[b-eh3cjbbqpl] {
        top: 72px;
        gap: 4px;
    }
    .side-rail__btn[b-eh3cjbbqpl] {
        width: 30px;
        height: 30px;
    }
    .side-rail__cardlabel[b-eh3cjbbqpl] {
        font-size: 0.52rem;
    }
    .side-rail__item[b-eh3cjbbqpl] {
        gap: 1px;
    }
}

/* prefers-reduced-motion */
@media (prefers-reduced-motion: reduce) {
    .side-rail__card[b-eh3cjbbqpl],
    .side-rail__btn[b-eh3cjbbqpl] {
        transition: none;
    }
}
/* _content/AptSonpoom/Components/Pages/Favorites.razor.rz.scp.css */
/* ============================================================================
   Favorites — /favorites PC 케이스 (1280~1920).
   정본: .claude/docs/content/favorites-search.md §5 / §7-5 / §7-6 / §8
   모바일 케이스는 content-mobile-dev 가 @media 로 추가 (그리드 1컬럼 등).
   ========================================================================== */

.favorites-page__container[b-w8zer9pp7v] {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
    padding-bottom: 64px;
}

/* === 1. 페이지 헤더 ============================================== */
/* 2026-05-26 chrome 톤업 — 박스 그라데이션 + eyebrow + lead 추가. */

.favorites-head[b-w8zer9pp7v] {
    padding: 32px 36px;
    margin: 24px 0 24px;
    background: linear-gradient(135deg, var(--color-accent-soft) 0%, var(--color-surface) 60%, var(--color-bg-warm) 100%);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.favorites-head__eyebrow[b-w8zer9pp7v] {
    display: block;
    color: var(--color-accent);
    margin-bottom: 10px;
}

.favorites-head__title[b-w8zer9pp7v] {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.25;
    margin: 0 0 12px 0;
}

.favorites-head__lead[b-w8zer9pp7v] {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    max-width: 640px;
    margin: 0;
}

/* === 2. 상단 안내 박스 (§7-6) ============================================== */
/* 2026-05-26 chrome 톤업 — bg-warm + left-border accent-2 (context 계열 hint, 관심 단지 ↔ Home features context). */

.favorites-notice[b-w8zer9pp7v] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 18px;
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent-2);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0 0 24px;
}

.favorites-notice__icon[b-w8zer9pp7v] {
    font-size: 1.1rem;
    line-height: 1;
    color: var(--color-accent-2-hover);
    flex-shrink: 0;
    margin-top: 2px;
}

.favorites-notice__text[b-w8zer9pp7v] {
    flex: 1;
}

/* === 3. 로딩 placeholder (prerender 단계) ============================================== */

.favorites-loading[b-w8zer9pp7v] {
    min-height: 200px;
}

/* === 4. 빈 상태 (§3-5) ============================================== */
/* 2026-05-26 chrome 톤업 — 카드 박스 (bg-warm + radius-lg) 안에 가운데 정렬. */

.favorites-empty[b-w8zer9pp7v] {
    text-align: center;
    padding: 64px 24px;
    max-width: 720px;
    margin: 32px auto 48px;
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.favorites-empty__title[b-w8zer9pp7v] {
    font-size: clamp(1.3rem, 2.2vw, 1.7rem);
    font-weight: 700;
    color: var(--color-text);
    line-height: 1.3;
    margin: 0 0 16px 0;
    word-break: keep-all;
}

.favorites-empty__body[b-w8zer9pp7v] {
    font-size: 1rem;
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0 0 8px 0;
}

.favorites-empty__cta[b-w8zer9pp7v] {
    margin-top: 32px;
    display: flex;
    justify-content: center;
}

/* === 5. 카드 그리드 (§8-1) ============================================== */

.favorites-list[b-w8zer9pp7v] {
    margin-bottom: 48px;
}

.favorites-grid[b-w8zer9pp7v] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}

@media (max-width: 1100px) {
    /* PC 중간 — 2컬럼 (모바일 영역 아님, PC 측 자연 반응) */
    .favorites-grid[b-w8zer9pp7v] {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* === 6. 카드 (§7-5) ============================================== */

.favorite-card[b-w8zer9pp7v] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 20px 24px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    transition: border-color 0.15s ease;
}

    .favorite-card:hover[b-w8zer9pp7v] {
        border-color: var(--color-accent);
    }

.favorite-card__header[b-w8zer9pp7v] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

.favorite-card__title-group[b-w8zer9pp7v] {
    min-width: 0;
    flex: 1;
}

.favorite-card__name[b-w8zer9pp7v] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 0 0 4px 0;
    line-height: 1.3;
    word-break: keep-all;
}

.favorite-card__sigungu[b-w8zer9pp7v] {
    font-size: 0.9rem;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.4;
}

.favorite-card__added[b-w8zer9pp7v] {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
    margin: 0;
}

.favorite-card__footer[b-w8zer9pp7v] {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.favorite-card__map-link[b-w8zer9pp7v] {
    color: var(--color-accent);
    font-size: 0.9rem;
    text-decoration: none;
    line-height: 1.4;
}

    .favorite-card__map-link:hover[b-w8zer9pp7v] {
        text-decoration: underline;
        text-underline-offset: 2px;
    }

    .favorite-card__map-link:focus-visible[b-w8zer9pp7v] {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
        border-radius: 2px;
    }

.favorite-card__remove[b-w8zer9pp7v] {
    background: transparent;
    border: none;
    color: var(--color-text-muted);
    font-size: 0.85rem;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    transition: color 0.15s ease, background 0.15s ease;
    line-height: 1.4;
    font-family: inherit;
    flex-shrink: 0;
}

    .favorite-card__remove:hover[b-w8zer9pp7v] {
        color: var(--color-text);
        background: var(--color-surface-alt);
    }

    .favorite-card__remove:focus-visible[b-w8zer9pp7v] {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

/* ============================================================================
   모바일 케이스 — content-mobile-dev 추가
   - breakpoint 43.75em (≈ 700px). PC 케이스 그대로, 좁은 viewport 만 오버라이드.
   - 카드 그리드 1컬럼 + padding·gap 축소.
   - 빈 상태 padding 축소 (96px → 56px).
   - 상단 안내 박스 padding·font 축소.
   - 페이지 헤더 / 카드 padding 정돈.
   ========================================================================== */

@media (max-width: 43.75em) {

    /* === 컨테이너 === */
    .favorites-page__container[b-w8zer9pp7v] {
        padding-inline: 16px;
        padding-bottom: 48px;
    }

    /* === 페이지 헤더 ===
       2026-05-26 chrome 톤업: PC 가 박스화 (gradient + radius-lg + padding 32px 36px) 됨.
       모바일에선 padding 축소 (24px 20px) 하되 좌우 padding 0 으로 떨어뜨리지 X
       — 그라데이션 + radius-lg 시각이 살아 있어야 함. margin 도 정돈. */
    .favorites-head[b-w8zer9pp7v] {
        padding: 24px 20px;
        margin: 16px 0 20px;
    }

    .favorites-head__eyebrow[b-w8zer9pp7v] {
        margin-bottom: 8px;
    }

    .favorites-head__title[b-w8zer9pp7v] {
        font-size: clamp(1.4rem, 5vw, 1.8rem);
        margin-bottom: 8px;
    }

    .favorites-head__lead[b-w8zer9pp7v] {
        font-size: 0.93rem;
        line-height: 1.65;
        max-width: 100%;
    }

    /* === 안내 박스 === */
    .favorites-notice[b-w8zer9pp7v] {
        gap: 10px;
        padding: 12px 14px;
        font-size: 0.85rem;
        line-height: 1.55;
        margin: 0 0 16px;
    }

    .favorites-notice__icon[b-w8zer9pp7v] {
        font-size: 1rem;
    }

    /* === 빈 상태 ===
       2026-05-26 chrome 톤업: PC bg-warm 카드 박스 (radius-lg + padding 64px 24px).
       모바일 padding 축소 (48px 20px) — gradient 없는 단색 bg-warm 이라 비례 줄임 안전.
       margin 도 정돈. */
    .favorites-empty[b-w8zer9pp7v] {
        padding: 48px 20px;
        margin: 24px auto 32px;
    }

    .favorites-empty__title[b-w8zer9pp7v] {
        margin-bottom: 12px;
    }

    .favorites-empty__body[b-w8zer9pp7v] {
        font-size: 0.93rem;
        line-height: 1.65;
    }

    .favorites-empty__cta[b-w8zer9pp7v] {
        margin-top: 24px;
    }

        /* CTA 버튼 — 풀폭 (max-width 320 가드, DanjiPage.razor.css 빈 상태와 일관) */
        .favorites-empty__cta[b-w8zer9pp7v]  .mud-button-root {
            width: 100%;
            max-width: 320px;
        }

    /* === 카드 그리드 1컬럼 === */
    .favorites-list[b-w8zer9pp7v] {
        margin-bottom: 32px;
    }

    .favorites-grid[b-w8zer9pp7v] {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    /* === 카드 — padding 축소 + 헤더 wrap 여유 === */
    .favorite-card[b-w8zer9pp7v] {
        padding: 16px 18px;
        gap: 6px;
    }

    .favorite-card__header[b-w8zer9pp7v] {
        gap: 8px;
    }

    .favorite-card__name[b-w8zer9pp7v] {
        font-size: 1.05rem;
    }

    .favorite-card__sigungu[b-w8zer9pp7v] {
        font-size: 0.87rem;
    }

    .favorite-card__added[b-w8zer9pp7v] {
        font-size: 0.78rem;
    }

    .favorite-card__footer[b-w8zer9pp7v] {
        margin-top: 6px;
    }

    .favorite-card__map-link[b-w8zer9pp7v] {
        font-size: 0.88rem;
        /* 터치 타겟 ≥ 44px — 라벨 짧아 padding 으로 확보 */
        padding: 8px 4px 8px 0;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .favorite-card__remove[b-w8zer9pp7v] {
        /* 터치 타겟 ≥ 44px (PC 4px 8px → 모바일 패딩 확대) */
        padding: 10px 12px;
        font-size: 0.85rem;
        min-height: 44px;
        min-width: 44px;
        display: inline-flex;
        align-items: center;
    }

}
/* _content/AptSonpoom/Components/Pages/Home.razor.rz.scp.css */
/* ============================================================================
   Home — 메인 홈 (클로드 디자인 핸드오프 이식, 2026-06-03 사용자 승인).
   적용 룰 (CLAUDE.md "/explore 패널 handoff 예외" + [[feedback_external_design_handoff_apply_asis]]):
     - 핸드오프 oklch 토큰을 .page-container.home-page 스코프에 한정 정의 → 글로벌
       토큰·다른 페이지 영향 0. accent oklch(0.55 0.17 256) ≈ #2563eb (사이트 cool 파랑).
     - Pretendard 폰트 스택 + 시스템 폴백, 웹폰트 별도 로드 X (explore 패널 선례 동형).
     - 가격대 무지개 색은 마커·도트 "상징" 한정 (가짜 데이터 X, up/down 신호색 아님).
   ========================================================================== */

/* === 페이지 컨테이너 — 핸드오프 토큰 스코프 + 폰트 ========================= */
.page-container.home-page[b-bjfgvrhpd7] {
    /* 핸드오프 토큰 — 이 컨테이너 안에서만. 글로벌 --color-* 토큰은 그대로. */
    --ink: oklch(0.42 0.015 260);
    --head: oklch(0.21 0.02 258);
    --lab: oklch(0.5 0.012 260);
    --mut: oklch(0.6 0.01 250);
    --accent: oklch(0.55 0.17 256);
    --accent-deep: oklch(0.47 0.16 258);
    --accent-soft: oklch(0.95 0.035 256);
    --line: oklch(0.92 0.004 250);
    --card: #fff;
    --shadow-s: 0 2px 8px rgba(20, 30, 50, .06), 0 0 0 1px rgba(20, 30, 50, .05);
    --shadow-m: 0 10px 28px rgba(20, 30, 50, .10), 0 0 0 1px rgba(20, 30, 50, .05);
    --shadow-l: 0 20px 48px rgba(20, 30, 50, .16), 0 0 0 1px rgba(20, 30, 50, .05);

    /* handoff 폰트 스택 — Pretendard 미설치 환경은 시스템 폰트 자연 폴백 (웹폰트 로드 X). */
    font-family: 'Pretendard', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 28px;
    padding-block: 0 8px;
    color: var(--ink);
}

/* CJK 글자 단위 줄바꿈 방지 — UI 라벨/칩/버튼 보호. */
.home-page .nav-search[b-bjfgvrhpd7],
.home-page .hs-go[b-bjfgvrhpd7],
.home-page .hs-chip[b-bjfgvrhpd7],
.home-page .hs-pop-lab[b-bjfgvrhpd7],
.home-page .hm-chrome-tl[b-bjfgvrhpd7],
.home-page .peek-cap[b-bjfgvrhpd7],
.home-page .entry-go[b-bjfgvrhpd7],
.home-page .entry-tt h3[b-bjfgvrhpd7] {
    white-space: nowrap;
}

/* === Hero — 2단 grid (좌 copy + 검색 / 우 지도 일러스트) ==================== */
.hero[b-bjfgvrhpd7] {
    display: grid;
    grid-template-columns: 1.02fr 1fr;
    gap: 48px;
    align-items: center;
    padding: 56px 0 48px;
    position: relative;
}

/* 검색 dropdown 열림 — hero 를 위로 올려 dropdown 이 진입 카드 위로. (평소 영향 0) */
.hero.is-searching[b-bjfgvrhpd7] {
    z-index: 100;
}

.hero-left[b-bjfgvrhpd7] {
    min-width: 0;
}

.hero-pill[b-bjfgvrhpd7] {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 32px;
    padding: 0 14px;
    border-radius: 999px;
    background: var(--accent-soft);
    color: var(--accent-deep);
    font-size: 12.5px;
    font-weight: 700;
    letter-spacing: -.01em;
}

.hero-pill__dot[b-bjfgvrhpd7] {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: oklch(0.62 0.16 150);
    box-shadow: 0 0 0 3px color-mix(in oklch, oklch(0.62 0.16 150), transparent 75%);
}

.hero-h1[b-bjfgvrhpd7] {
    margin: 20px 0 0;
    font-size: 50px;
    line-height: 1.12;
    font-weight: 800;
    letter-spacing: -.04em;
    color: var(--head);
    text-wrap: balance;
    word-break: keep-all;
}

.hero-h1 em[b-bjfgvrhpd7] {
    font-style: normal;
    color: var(--accent);
}

.hero-sub[b-bjfgvrhpd7] {
    margin: 18px 0 0;
    font-size: 16.5px;
    line-height: 1.6;
    color: var(--lab);
    letter-spacing: -.02em;
    max-width: 30em;
    word-break: keep-all;
}

/* === Hero 검색 박스 ======================================================== */
.hsearch-wrap[b-bjfgvrhpd7] {
    position: relative;
    margin-top: 28px;
    max-width: 560px;
}

.hsearch[b-bjfgvrhpd7] {
    display: flex;
    align-items: center;
    gap: 12px;
    height: 64px;
    padding: 0 8px 0 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: var(--shadow-m);
    transition: box-shadow .18s;
}

.hsearch:focus-within[b-bjfgvrhpd7] {
    box-shadow: 0 14px 34px rgba(20, 30, 50, .14), 0 0 0 2px var(--accent);
}

.hs-mag[b-bjfgvrhpd7] {
    color: var(--accent);
    display: flex;
    flex: none;
}

.hsearch__input[b-bjfgvrhpd7] {
    flex: 1;
    min-width: 0;
    border: none;
    outline: none;
    background: none;
    font-family: inherit;
    font-size: 17px;
    font-weight: 600;
    color: var(--head);
    letter-spacing: -.02em;
}

.hsearch__input[b-bjfgvrhpd7]::placeholder {
    color: oklch(0.68 0.01 250);
    font-weight: 500;
}

.hsearch__input[b-bjfgvrhpd7]::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
}

.hsearch__clear[b-bjfgvrhpd7] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 34px;
    height: 34px;
    border: 0;
    border-radius: 999px;
    background: none;
    cursor: pointer;
    color: var(--mut);
    transition: background .12s, color .12s;
}

.hsearch__clear:hover[b-bjfgvrhpd7] {
    background: oklch(0.96 0.004 250);
    color: var(--head);
}

.hs-go[b-bjfgvrhpd7] {
    display: flex;
    align-items: center;
    gap: 6px;
    height: 48px;
    padding: 0 20px;
    border: none;
    border-radius: 12px;
    background: var(--accent);
    color: #fff;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -.02em;
    cursor: pointer;
    flex: none;
    transition: background .15s, transform .12s;
}

.hs-go:hover[b-bjfgvrhpd7] {
    background: var(--accent-deep);
}

.hs-go:active[b-bjfgvrhpd7] {
    transform: scale(.97);
}

/* 인기 칩 */
.hs-pop[b-bjfgvrhpd7] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 16px;
    flex-wrap: wrap;
    max-width: 560px;
}

.hs-pop-lab[b-bjfgvrhpd7] {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--mut);
    letter-spacing: -.01em;
}

.hs-chip[b-bjfgvrhpd7] {
    height: 32px;
    padding: 0 13px;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--lab);
    letter-spacing: -.02em;
    cursor: pointer;
    transition: all .15s;
}

.hs-chip:hover[b-bjfgvrhpd7] {
    border-color: color-mix(in oklch, var(--accent), transparent 55%);
    color: var(--accent);
    background: var(--accent-soft);
}

/* === 검색 dropdown — .hsearch-wrap 아래 절대 위치 (실 검색 결과) =========== */
.home-hero__dropdown[b-bjfgvrhpd7] {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    z-index: 50;
    margin: 0;
    padding: 8px 0;
    list-style: none;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 14px;
    box-shadow: var(--shadow-l);
    max-height: 60vh;
    overflow-y: auto;
}

.home-hero__dropdown-header[b-bjfgvrhpd7] {
    padding: 8px 20px 4px;
    font-size: 12px;
    font-weight: 700;
    color: var(--mut);
    letter-spacing: .03em;
}

.home-hero__dropdown-item[b-bjfgvrhpd7] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 10px 20px;
    cursor: pointer;
    transition: background .1s ease;
}

.home-hero__dropdown-item:hover[b-bjfgvrhpd7] {
    background: oklch(0.97 0.004 250);
}

.home-hero__dropdown-name[b-bjfgvrhpd7] {
    font-size: 15px;
    font-weight: 600;
    color: var(--head);
}

.home-hero__dropdown-dong[b-bjfgvrhpd7] {
    display: inline-block;
    margin-right: 6px;
    padding: 1px 6px;
    border-radius: 6px;
    background: oklch(0.96 0.004 250);
    color: var(--mut);
    font-size: 12.5px;
    font-weight: 500;
    vertical-align: middle;
}

.home-hero__dropdown-meta[b-bjfgvrhpd7] {
    font-size: 13px;
    color: var(--mut);
}

.home-hero__dropdown-more[b-bjfgvrhpd7] {
    padding: 8px 20px 4px;
    font-size: 12.5px;
    color: var(--mut);
    line-height: 1.5;
    border-top: 1px solid var(--line);
    margin-top: 4px;
}

.home-hero__dropdown-empty[b-bjfgvrhpd7] {
    padding: 20px;
    text-align: center;
    color: var(--mut);
    font-size: 14px;
}

.home-hero__dropdown-empty p[b-bjfgvrhpd7] {
    margin: 0;
}

/* === Hero 지도 일러스트 (상징) ============================================= */
.hero-right[b-bjfgvrhpd7] {
    min-width: 0;
}

.heromap[b-bjfgvrhpd7] {
    position: relative;
    width: 100%;
    aspect-ratio: 5 / 4.4;
    border-radius: 22px;
    overflow: hidden;
    background: oklch(0.955 0.004 240);
    box-shadow: var(--shadow-l);
}

.hm-chrome-tl[b-bjfgvrhpd7] {
    position: absolute;
    top: 14px;
    left: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 14px 0 12px;
    background: #fff;
    border-radius: 11px;
    color: var(--ink);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -.02em;
    box-shadow: var(--shadow-s);
}

.hm-chrome-tl .hm-mag[b-bjfgvrhpd7] {
    color: var(--accent);
    display: flex;
}

.hm-chrome-tr[b-bjfgvrhpd7] {
    position: absolute;
    top: 14px;
    right: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hm-railb[b-bjfgvrhpd7] {
    width: 38px;
    height: 38px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    border-radius: 11px;
    color: var(--ink);
    box-shadow: var(--shadow-s);
}

.hm-railb.on[b-bjfgvrhpd7] {
    background: var(--accent-soft);
    color: var(--accent);
}

/* 단지 위치 핀 — 가격대 색만 (상징, 숫자 없음). drop-shadow 는 svg inline style. */
.hm-loc[b-bjfgvrhpd7] {
    position: absolute;
    transform: translate(-50%, -100%);
    z-index: 20;
}

/* 탐색 레이더 — 중앙에서 퍼지는 검색 반경 (상징). */
.hm-radar[b-bjfgvrhpd7] {
    position: absolute;
    left: 52%;
    top: 49%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    z-index: 30;
}

.hm-radar .rr[b-bjfgvrhpd7] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    border: 1.5px solid color-mix(in oklch, var(--accent), transparent 50%);
}

.hm-radar .rr.r1[b-bjfgvrhpd7] {
    width: 132px;
    height: 132px;
    opacity: .38;
}

.hm-radar .rr.r2[b-bjfgvrhpd7] {
    width: 86px;
    height: 86px;
    opacity: .58;
}

.hm-radar .rr.r3[b-bjfgvrhpd7] {
    width: 46px;
    height: 46px;
    opacity: .8;
}

@media (prefers-reduced-motion: no-preference) {
    .hm-radar .rr[b-bjfgvrhpd7] {
        animation: hmradar-b-bjfgvrhpd7 3.2s ease-out infinite;
    }

    .hm-radar .rr.r2[b-bjfgvrhpd7] {
        animation-delay: 1.05s;
    }

    .hm-radar .rr.r3[b-bjfgvrhpd7] {
        animation-delay: 2.1s;
    }
}

@keyframes hmradar-b-bjfgvrhpd7 {
    0% {
        width: 24px;
        height: 24px;
        opacity: .6;
    }

    80% {
        opacity: .06;
    }

    100% {
        width: 240px;
        height: 240px;
        opacity: 0;
    }
}

.hm-focus[b-bjfgvrhpd7] {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 5;
    box-shadow: 0 8px 18px color-mix(in oklch, var(--accent), transparent 55%), 0 0 0 1px rgba(20, 30, 50, .05);
}

/* === 진입 카드 4개 ========================================================= */
.entries[b-bjfgvrhpd7] {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    padding: 8px 0 48px;
}

.entry[b-bjfgvrhpd7] {
    display: flex;
    flex-direction: column;
    background: var(--card);
    border-radius: 18px;
    padding: 20px 20px 18px;
    box-shadow: var(--shadow-s);
    text-decoration: none;
    color: inherit;
    transition: transform .16s, box-shadow .16s;
}

.entry:hover[b-bjfgvrhpd7] {
    transform: translateY(-3px);
    box-shadow: var(--shadow-m);
}

.entry:focus-visible[b-bjfgvrhpd7] {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
}

.entry-head[b-bjfgvrhpd7] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.entry-ico[b-bjfgvrhpd7] {
    width: 42px;
    height: 42px;
    flex: none;
    border-radius: 12px;
    background: var(--accent-soft);
    color: var(--accent);
    display: flex;
    align-items: center;
    justify-content: center;
}

.entry-tt h3[b-bjfgvrhpd7] {
    margin: 0;
    font-size: 17px;
    font-weight: 800;
    color: var(--head);
    letter-spacing: -.03em;
}

.entry-tt p[b-bjfgvrhpd7] {
    margin: 5px 0 0;
    font-size: 12.5px;
    line-height: 1.45;
    color: var(--mut);
    letter-spacing: -.02em;
    word-break: keep-all;
}

.entry-peek[b-bjfgvrhpd7] {
    margin: 16px 0;
    flex: 1;
    min-height: 96px;
}

.peek-cap[b-bjfgvrhpd7] {
    display: block;
    margin-top: 12px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--mut);
    letter-spacing: -.02em;
}

.entry-go[b-bjfgvrhpd7] {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-top: auto;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--accent);
    letter-spacing: -.02em;
    transition: gap .15s, color .15s;
}

.entry:hover .entry-go[b-bjfgvrhpd7] {
    gap: 9px;
    color: var(--accent-deep);
}

/* peek: sparkline — accent 색은 svg color 로 상속 (currentColor). */
.entry-peek.spark[b-bjfgvrhpd7] {
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: var(--accent);
}

.entry-peek.spark svg[b-bjfgvrhpd7] {
    width: 100%;
    height: 48px;
    display: block;
}

/* peek: permit — 지정 허가구역 + 승인 도장 (상징). */
.entry-peek.permit[b-bjfgvrhpd7] {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.entry-peek.permit svg[b-bjfgvrhpd7] {
    width: 100%;
    height: 80px;
    display: block;
}

/* peek: mini map */
.entry-peek.mapmini[b-bjfgvrhpd7] {
    position: relative;
    border-radius: 13px;
    overflow: hidden;
    min-height: 110px;
    background: oklch(0.955 0.004 240);
    box-shadow: inset 0 0 0 1px var(--line);
}

.mm-dot[b-bjfgvrhpd7] {
    position: absolute;
    width: 13px;
    height: 13px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    box-shadow: 0 0 0 3px #fff, 0 2px 5px rgba(20, 30, 50, .25);
}

.mm-veil[b-bjfgvrhpd7] {
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 0 1px rgba(20, 30, 50, .05);
    border-radius: 13px;
}

/* peek: favs — 단지 실루엣 + 하트 태그 (상징). */
.entry-peek.favs[b-bjfgvrhpd7] {
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}

.entry-peek.favs svg[b-bjfgvrhpd7] {
    width: 100%;
    height: 86px;
    display: block;
}

/* === 반응형 — 핸드오프 breakpoint (980 / 720) ============================== */
@media (max-width: 980px) {
    .hero[b-bjfgvrhpd7] {
        grid-template-columns: 1fr;
        gap: 36px;
        padding: 40px 0 40px;
    }

    .hero-h1[b-bjfgvrhpd7] {
        font-size: 42px;
    }

    .heromap[b-bjfgvrhpd7] {
        aspect-ratio: 5 / 3.8;
    }

    .hsearch-wrap[b-bjfgvrhpd7],
    .hs-pop[b-bjfgvrhpd7] {
        max-width: none;
    }

    .entries[b-bjfgvrhpd7] {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 720px) {
    .page-container.home-page[b-bjfgvrhpd7] {
        padding-inline: 16px;
    }

    .hero[b-bjfgvrhpd7] {
        padding: 28px 0 32px;
        gap: 28px;
    }

    .hero-h1[b-bjfgvrhpd7] {
        font-size: 34px;
    }

    .hsearch[b-bjfgvrhpd7] {
        height: 58px;
        padding-left: 16px;
    }

    .hsearch__input[b-bjfgvrhpd7] {
        font-size: 16px;
    }

    .hs-go[b-bjfgvrhpd7] {
        height: 44px;
        padding: 0 16px;
    }

    .entries[b-bjfgvrhpd7] {
        grid-template-columns: 1fr;
    }
}
/* _content/AptSonpoom/Components/Pages/LandPermitDaily.razor.rz.scp.css */
/* 일별 토지거래허가 내역 (/deals/permit)
   2026-06-04 — Claude Design 핸드오프 (design_handoff_permits) "값 그대로" 적용 (사용자 승인).
     · 통계 = 흰 카드 1장 4분할(radius 16 + 부드러운 그림자) / 안내박스 = 옅은 카드.
     · 1차 토글(시·도·기간) = 솔리드 블루(활성) / 정렬 토글 = 작은 흰 칩 세그먼트.
     · 랭킹 = 카드(radius 14 + 그림자) 아코디언, 막대 = 블루(#5680de) 트랙(#e8edf6).
     · 허가구분 = 회색 알약 배지 / 단지명 링크 = 파란 accent.
   신호색(빨강/파랑) 미사용 유지 — 처리 건수는 가격 신호 아님. 막대 블루는 chrome 시각이지 상승 신호 아님.
   accent = --color-accent(oklch 0.55 0.17 256 ≈ #2563eb, 핸드오프 동일). 막대색만 핸드오프 hex 직접값.
   ========================================================================== */

.permit-shell[b-blj1jfczuj] {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
}

/* ===== 페이지 헤더 ===== */
.permit-head[b-blj1jfczuj] { margin: 8px 0 0; padding-top: 8px; }
.permit-head__title[b-blj1jfczuj] { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; color: var(--color-text); margin: 0; }
.permit-head__title b[b-blj1jfczuj] { color: var(--color-accent); font-weight: 800; }
.permit-head__lead[b-blj1jfczuj] { margin: 10px 0 0; font-size: 14px; font-weight: 500; letter-spacing: -0.02em; color: var(--color-text-muted); line-height: 1.6; }
.permit-head__updated[b-blj1jfczuj] { white-space: nowrap; }

/* ===== 통계 카드 — 흰 카드 1장 4분할 ===== */
.permit-metrics[b-blj1jfczuj] {
    display: grid; grid-template-columns: repeat(4, 1fr);
    margin-top: 22px; margin-bottom: 0;
    background: var(--color-surface); border-radius: 16px;
    box-shadow: var(--shadow-card); overflow: hidden;
}
.permit-metric[b-blj1jfczuj] { display: flex; flex-direction: column; padding: 20px 22px; background: var(--color-surface); }
.permit-metric + .permit-metric[b-blj1jfczuj] { border-left: 1px solid var(--color-border); }
.permit-metric--scope[b-blj1jfczuj] { background: var(--color-surface); justify-content: flex-start; }
.permit-metric__label[b-blj1jfczuj] { font-size: 13px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text-muted); }
.permit-metric__value[b-blj1jfczuj] { margin-top: 9px; display: flex; align-items: baseline; gap: 4px; font-size: 27px; font-weight: 800; letter-spacing: -0.03em; color: var(--color-text); line-height: 1.1; }
.permit-metric__unit[b-blj1jfczuj] { font-size: 14px; font-weight: 600; color: var(--color-text-muted); margin-left: 0; }
.permit-metric__value-sm[b-blj1jfczuj] { margin-top: 11px; font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text-muted); line-height: 1.45; }

/* ===== 제도 안내 박스 (핸드오프: 옅은 카드, 좌측 accent border 없음) ===== */
.permit-guide[b-blj1jfczuj] {
    margin-top: 16px; margin-bottom: 0;
    background: var(--color-surface-alt); border: 1px solid var(--color-border);
    border-radius: 16px; padding: 20px 24px;
}
.permit-guide__title[b-blj1jfczuj] { font-size: 15px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-text); margin: 0; }
.permit-guide__body[b-blj1jfczuj] { margin: 10px 0 0; font-size: 13.5px; line-height: 1.65; letter-spacing: -0.02em; color: var(--color-text-muted); }
.permit-guide__body strong[b-blj1jfczuj] { color: var(--color-text); font-weight: 700; }
.permit-guide__cross[b-blj1jfczuj] { margin: 12px 0 0; font-size: 13px; letter-spacing: -0.02em; color: var(--color-text-muted); }
.permit-guide__cross a[b-blj1jfczuj], .permit-guide__body a[b-blj1jfczuj] {
    color: var(--color-accent); font-weight: 700; text-decoration: underline;
    text-decoration-color: color-mix(in oklch, var(--color-accent), transparent 60%); text-underline-offset: 3px;
}

/* ===== 필터 행: 시·도/기간 토글(솔리드 블루) + 날짜 네비 ===== */
.permit-controls[b-blj1jfczuj] { display: flex; align-items: center; gap: 18px; margin-top: 26px; margin-bottom: 0; flex-wrap: wrap; }

/* 핸드오프 .seg — 래퍼 테두리 없이 알약 버튼 나열. 활성 = 솔리드 블루. */
.permit-seg[b-blj1jfczuj] { display: inline-flex; gap: 7px; border: none; border-radius: 0; overflow: visible; }
.permit-seg__btn[b-blj1jfczuj] {
    height: 40px; padding: 0 18px; border: 1px solid var(--color-border); border-radius: 11px;
    background: var(--color-surface); color: var(--color-text-muted);
    font-family: inherit; font-size: 14.5px; font-weight: 700; letter-spacing: -0.02em;
    cursor: pointer; transition: all 0.15s ease;
}
.permit-seg__btn:hover[b-blj1jfczuj] { border-color: color-mix(in oklch, var(--color-accent), transparent 55%); color: var(--color-accent-hover); }
.permit-seg__btn.is-on[b-blj1jfczuj] { border-color: var(--color-accent); background: var(--color-accent); color: #fff; }
.permit-seg__btn:focus-visible[b-blj1jfczuj] { outline: 2px solid var(--color-accent); outline-offset: 2px; }

.permit-daynav[b-blj1jfczuj] { display: inline-flex; align-items: center; gap: 8px; }
.permit-daynav__btn[b-blj1jfczuj] {
    width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
    border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface);
    color: var(--color-text-muted); cursor: pointer; font-size: 1rem; transition: all 0.15s ease;
}
.permit-daynav__btn:hover:not(:disabled)[b-blj1jfczuj] { border-color: color-mix(in oklch, var(--color-accent), transparent 55%); color: var(--color-accent); }
.permit-daynav__btn:disabled[b-blj1jfczuj] { opacity: 0.4; cursor: default; }
.permit-daynav__date[b-blj1jfczuj] {
    height: 40px; padding: 0 14px; border: 1px solid var(--color-border); border-radius: 11px;
    background: var(--color-surface); color: var(--color-text); font-family: inherit; font-size: 14.5px; font-weight: 600; cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.permit-daynav__date:focus[b-blj1jfczuj] { outline: none; border-color: var(--color-accent); box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent), transparent 80%); }
.permit-progress[b-blj1jfczuj] { margin-top: 14px; margin-bottom: 0; }

/* ===== 이번주 허가 상위 단지 칩 ===== */
.permit-top[b-blj1jfczuj] { margin-top: 30px; margin-bottom: 0; }
.permit-top__title[b-blj1jfczuj] { font-size: 16px; font-weight: 800; letter-spacing: -0.03em; color: var(--color-text); margin: 0 0 13px; }
.permit-top__list[b-blj1jfczuj] { display: flex; gap: 9px; flex-wrap: wrap; }
.permit-top__card[b-blj1jfczuj] {
    display: inline-flex; align-items: center; gap: 8px; height: 38px; padding: 0 15px; text-decoration: none;
    border: 1px solid var(--color-border); border-radius: 11px; background: var(--color-surface);
    transition: all 0.15s ease;
}
.permit-top__card:hover[b-blj1jfczuj] { border-color: color-mix(in oklch, var(--color-accent), transparent 50%); background: var(--color-accent-soft); }
.permit-top__name[b-blj1jfczuj] { font-size: 13.5px; color: var(--color-text); font-weight: 600; letter-spacing: -0.02em; }
.permit-top__n[b-blj1jfczuj] { font-size: 13.5px; color: var(--color-accent); font-weight: 800; }

/* ===== 자치구별 현황 ===== */
.permit-summary[b-blj1jfczuj] { margin-top: 34px; margin-bottom: 16px; }
.permit-summary__head[b-blj1jfczuj] { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }
.permit-summary__title[b-blj1jfczuj] { font-size: 16px; font-weight: 800; letter-spacing: -0.03em; color: var(--color-text); margin: 0; }
.permit-summary__sub[b-blj1jfczuj] { font-size: 13.5px; font-weight: 600; color: var(--color-text-muted); margin-left: 6px; letter-spacing: -0.02em; }

/* 정렬 세그먼트 — 핸드오프 .segsm: 옅은 트랙 + 흰 칩(활성). */
.permit-sort[b-blj1jfczuj] {
    margin-left: auto; display: inline-flex; gap: 5px; padding: 4px;
    background: var(--color-surface-alt); border: none; border-radius: 11px; overflow: visible;
}
.permit-sort__btn[b-blj1jfczuj] {
    height: 30px; padding: 0 13px; border: none; border-radius: 8px; background: transparent;
    color: var(--color-text-muted); font-family: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
    transition: all 0.15s ease;
}
.permit-sort__btn.is-on[b-blj1jfczuj] { background: var(--color-surface); color: var(--color-accent-hover); box-shadow: var(--shadow-card); }

/* 자치구 아코디언 — 카드(radius 14 + 그림자), 펼침 시 그림자 강조. */
.permit-acc-list[b-blj1jfczuj] { display: flex; flex-direction: column; gap: 10px; }
.permit-acc[b-blj1jfczuj] {
    background: var(--color-surface); border: none; border-radius: 14px;
    box-shadow: var(--shadow-card); overflow: hidden; transition: box-shadow 0.16s ease;
}
.permit-acc.is-open[b-blj1jfczuj] { box-shadow: var(--shadow-lg), 0 0 0 1px rgba(20, 30, 50, 0.05); }
.permit-acc__head[b-blj1jfczuj] {
    display: grid; grid-template-columns: 30px minmax(96px, auto) 1fr auto auto 22px; gap: 16px; align-items: center;
    width: 100%; padding: 0 20px; height: 64px; background: none; border: none;
    cursor: pointer; text-align: left; font-family: inherit; transition: background-color 0.15s ease;
}
.permit-acc__head:hover[b-blj1jfczuj] { background: var(--color-surface-alt); }
.permit-acc.is-open .permit-acc__head[b-blj1jfczuj] { background: var(--color-accent-soft); }
.permit-acc__rank[b-blj1jfczuj] { font-size: 14px; font-weight: 700; color: var(--color-text-muted); text-align: center; }
.permit-acc.is-open .permit-acc__rank[b-blj1jfczuj] { color: var(--color-accent-hover); }
.permit-acc__name[b-blj1jfczuj] { font-size: 16px; font-weight: 700; letter-spacing: -0.03em; color: var(--color-text); white-space: nowrap; }
/* 막대 — 핸드오프 트랙 #e8edf6 / 채움 #5680de (블루, 처리량 시각화 — 상승 신호 아님). 13px·radius 999. */
.permit-acc__track[b-blj1jfczuj] { display: block; position: relative; height: 13px; border-radius: 999px; background: #e8edf6; overflow: hidden; }
.permit-acc__bar[b-blj1jfczuj] { display: block; position: relative; z-index: 1; height: 13px; border-radius: 999px; background: #5680de; min-width: 10%; transition: width 0.5s cubic-bezier(0.2, 0.7, 0.2, 1); }
.permit-acc__count[b-blj1jfczuj] { font-size: 15.5px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-text); text-align: right; white-space: nowrap; }
.permit-acc__unit[b-blj1jfczuj] { font-size: 0.8em; font-weight: 800; color: var(--color-accent); margin-left: 1px; }
.permit-acc__date[b-blj1jfczuj] { font-size: 12px; font-weight: 600; color: var(--color-text-muted); white-space: nowrap; text-align: right; }
.permit-acc__chev[b-blj1jfczuj] { font-size: 1.15rem; line-height: 1; color: var(--color-text-muted); text-align: center; transition: transform 0.2s ease, color 0.2s ease; }
.permit-acc__chev.is-open[b-blj1jfczuj] { transform: rotate(90deg); color: var(--color-accent); }
.permit-acc__body[b-blj1jfczuj] { padding: 4px 20px 22px; border-top: 1px solid var(--color-border); background: var(--color-surface); }

/* 단지별 승인 요약 칩 */
.permit-danji-summary[b-blj1jfczuj] { display: flex; flex-wrap: wrap; gap: 8px; padding: 18px 0 4px; margin-bottom: 0; }
.permit-danji-chip[b-blj1jfczuj] {
    display: inline-flex; align-items: center; gap: 7px; height: 32px; padding: 0 12px;
    border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface);
    font-size: 13px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text);
}
.permit-danji-chip a[b-blj1jfczuj] { color: var(--color-text); text-decoration: none; }
.permit-danji-chip a:hover[b-blj1jfczuj] { color: var(--color-accent); text-decoration: underline; }
.permit-danji-chip--muted[b-blj1jfczuj] { background: var(--color-surface-alt); color: var(--color-text-muted); }
.permit-danji-chip__n[b-blj1jfczuj] { font-weight: 800; color: var(--color-accent); }
.permit-danji-chip--muted .permit-danji-chip__n[b-blj1jfczuj] { color: var(--color-text-muted); }

/* 처리일 블록 제목 (핸드오프 .rk-daysub) */
.permit-dayblock[b-blj1jfczuj] { margin-top: 16px; margin-bottom: 0; }
.permit-dayblock__title[b-blj1jfczuj] {
    display: flex; align-items: baseline; gap: 7px; margin: 0 0 12px;
    font-size: 14.5px; font-weight: 800; letter-spacing: -0.02em; color: var(--color-text);
}
.permit-dayblock__count[b-blj1jfczuj] { font-size: 12.5px; font-weight: 700; color: var(--color-text-muted); }

/* 허가 내역 표 (핸드오프 .ptable) — 좌측 정렬 5열. */
.permit-table[b-blj1jfczuj] { border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; }
.permit-table__head[b-blj1jfczuj] {
    display: grid; grid-template-columns: 1.5fr 1.5fr 0.7fr 0.9fr 0.8fr;
    background: var(--color-surface-alt); border-bottom: 1px solid var(--color-border);
}
.permit-th[b-blj1jfczuj] { padding: 12px 16px; font-size: 13px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text-muted); }
.permit-row[b-blj1jfczuj] {
    display: grid; grid-template-columns: 1.5fr 1.5fr 0.7fr 0.9fr 0.8fr; align-items: center;
    border-top: 1px solid var(--color-border); background: var(--color-surface);
}
.permit-cell[b-blj1jfczuj] { padding: 14px 16px; display: flex; align-items: center; font-size: 14px; letter-spacing: -0.02em; color: var(--color-text); }
.permit-danji-link[b-blj1jfczuj] { font-size: 14.5px; color: var(--color-accent); text-decoration: none; font-weight: 700; letter-spacing: -0.02em; }
.permit-danji-link:hover[b-blj1jfczuj] { color: var(--color-accent-hover); text-decoration: underline; text-underline-offset: 3px; }
.permit-cell--muted[b-blj1jfczuj] { color: var(--color-text-muted); font-weight: 600; }
.permit-cell__label[b-blj1jfczuj] { display: none; }
.permit-jobgbn[b-blj1jfczuj] {
    display: inline-flex; align-items: center; height: 25px; padding: 0 12px;
    border: 1px solid var(--color-border); border-radius: 999px; background: var(--color-surface-alt);
    font-size: 12.5px; font-weight: 700; letter-spacing: -0.02em; color: var(--color-text-muted);
}

/* ===== 빈 상태 / 별표 ===== */
.permit-empty[b-blj1jfczuj] {
    border: 1px dashed var(--color-border); border-radius: var(--radius-md); background: var(--color-surface);
    padding: 16px; font-size: 0.88rem; color: var(--color-text-muted); line-height: 1.6; margin: 0;
}
.permit-empty__btn[b-blj1jfczuj] {
    display: inline-block; margin-left: 8px; border: 1px solid var(--color-accent); background: var(--color-accent-soft);
    color: var(--color-accent); border-radius: var(--radius-sm); padding: 4px 12px; font-size: 0.82rem; cursor: pointer; font-family: inherit;
}
.permit-notes[b-blj1jfczuj] { margin-top: 16px; padding-top: 12px; border-top: 1px solid var(--color-border); }
.permit-notes .source-line[b-blj1jfczuj] { font-size: 0.78rem; color: var(--color-text-muted); line-height: 1.6; margin: 0 0 4px; }

/* ===== 통계 카드 — 920 이하 2열 (핸드오프) ===== */
@media (max-width: 57.5em) {
    .permit-metrics[b-blj1jfczuj] { grid-template-columns: 1fr 1fr; }
    .permit-metric:nth-child(3)[b-blj1jfczuj], .permit-metric:nth-child(4)[b-blj1jfczuj] { border-top: 1px solid var(--color-border); }
    .permit-metric:nth-child(3)[b-blj1jfczuj] { border-left: none; }
}

/* ===== 모바일 (≤760px) — 핸드오프: 막대 숨김, 표 1열 스택 ===== */
@media (max-width: 47.5em) {
    .permit-shell[b-blj1jfczuj] { padding-inline: 16px; }

    .permit-head__title[b-blj1jfczuj] { font-size: 24px; }

    .permit-controls[b-blj1jfczuj] { gap: 10px; }
    .permit-seg[b-blj1jfczuj] { flex: 1 1 auto; }
    .permit-seg__btn[b-blj1jfczuj] { flex: 1; padding: 0 10px; }

    /* 자치구 아코디언 헤더 — 순위·날짜·막대 숨겨 좁은 폭에서 이름·건수·화살표만. */
    .permit-acc__head[b-blj1jfczuj] { grid-template-columns: minmax(60px, auto) 1fr auto 16px; gap: 10px; padding: 0 14px; height: 60px; }
    .permit-acc__rank[b-blj1jfczuj], .permit-acc__date[b-blj1jfczuj], .permit-acc__track[b-blj1jfczuj] { display: none; }
    .permit-acc__body[b-blj1jfczuj] { padding: 4px 14px 14px; }

    /* 상세 표 — 카드 변환 (셀마다 라벨) */
    .permit-table__head[b-blj1jfczuj] { display: none; }
    .permit-row[b-blj1jfczuj] { grid-template-columns: 1fr; align-items: stretch; }
    .permit-row + .permit-row[b-blj1jfczuj] { border-top: 6px solid var(--color-bg); }
    .permit-cell[b-blj1jfczuj] { padding: 8px 14px; justify-content: space-between; gap: 12px; }
    .permit-cell:first-child[b-blj1jfczuj] { padding-top: 14px; }
    .permit-cell:last-child[b-blj1jfczuj] { padding-bottom: 14px; }
    .permit-cell__label[b-blj1jfczuj] { display: inline; font-size: 0.76rem; color: var(--color-text-muted); font-weight: 600; }
}
/* _content/AptSonpoom/Components/Pages/RealPriceDaily.razor.rz.scp.css */
/* ============================================================================
   RealPriceDaily — /deals/daily
   2026-06-03 — Claude Design 핸드오프 (design_handoff_deals) "값 그대로" 적용 (사용자 승인).
     · 표 = radius 16 카드 + 부드러운 그림자 (옛 hairline 테두리 폐기).
     · 단지명 = 파란 accent + 밑줄 / 계약일 = 차분한 진회색(빨강 아님) / 가격 = 코랄레드(--color-price).
     · 상승 신호 = 알약 칩 (--color-price-soft 배경) / (신) 배지 = 코랄레드.
     · 비교통계(최고가대비/타입최고/평형최고) = 라벨 muted + 값 진회색 (빨강 폐기 — 핸드오프 차분 톤).
   상승·하락 신호색은 한국 컨벤션 유지 — 코랄레드도 빨강 계열(상승). (신)·상승액에만 빨강.
   모바일은 사용자 기존 명시(2026-05-27 "카드 형태 싫어함, 폰에서도 3컬럼 유지")를 존중해
   1열 스택(핸드오프 모바일)으로 가지 않고 3컬럼 grid 유지 + 폰트/패딩만 압축.
   ========================================================================== */

.page-container[b-gi9cg4ob4s] {
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: 24px;
}

/* === 페이지 타이틀 (토허제·변동률 페이지와 동형) ====================== */
.deals-head[b-gi9cg4ob4s] { margin: 8px 0 0; padding-top: 8px; }
.deals-head__title[b-gi9cg4ob4s] { font-size: 30px; font-weight: 800; letter-spacing: -0.04em; color: var(--color-text); margin: 0; }
.deals-head__title b[b-gi9cg4ob4s] { color: var(--color-accent); font-weight: 800; }
.deals-head__lead[b-gi9cg4ob4s] { margin: 10px 0 0; font-size: 14px; font-weight: 500; letter-spacing: -0.02em; color: var(--color-text-muted); line-height: 1.6; }

/* === 요약 지표 바 — 오늘/어제/이번주 공개된 거래 (토허제 .permit-metrics 와 동형) === */
.deals-metrics[b-gi9cg4ob4s] {
    display: grid; grid-template-columns: repeat(4, 1fr);
    margin-top: 22px;
    background: var(--color-surface); border-radius: 16px;
    box-shadow: var(--shadow-card); overflow: hidden;
}
.deals-metric[b-gi9cg4ob4s] { display: flex; flex-direction: column; padding: 20px 22px; }
.deals-metric + .deals-metric[b-gi9cg4ob4s] { border-left: 1px solid var(--color-border); }
.deals-metric--scope[b-gi9cg4ob4s] { justify-content: flex-start; }
.deals-metric__label[b-gi9cg4ob4s] { font-size: 13px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text-muted); }
.deals-metric__value[b-gi9cg4ob4s] { margin-top: 9px; display: flex; align-items: baseline; gap: 4px; font-size: 27px; font-weight: 800; letter-spacing: -0.03em; color: var(--color-text); line-height: 1.1; }
.deals-metric__unit[b-gi9cg4ob4s] { font-size: 14px; font-weight: 600; color: var(--color-text-muted); }
.deals-metric__value-sm[b-gi9cg4ob4s] { margin-top: 11px; font-size: 13.5px; font-weight: 600; letter-spacing: -0.02em; color: var(--color-text-muted); line-height: 1.45; }

/* === fallback 안내 한 줄 ============================================== */
.deals-fallback-notice[b-gi9cg4ob4s] {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 18px;
    margin: 0 0 16px 0;
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.6;
}

.deals-fallback-notice__icon[b-gi9cg4ob4s] {
    color: var(--color-accent);
    font-weight: 700;
    flex-shrink: 0;
}

/* === 거래 종류 탭 (매매 / 전월세) ============================================== */
/* 모드 토글보다 한 단계 위 위계 — 탭 느낌으로 약간 큼직하게. */
.deals-type-tabs[b-gi9cg4ob4s] {
    padding: 26px 0 0;
}

.deals-typeseg[b-gi9cg4ob4s] {
    display: inline-flex;
    gap: 8px;
}

.deals-typeseg__btn[b-gi9cg4ob4s] {
    height: 40px;
    padding: 0 22px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--color-text-muted);
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .deals-typeseg__btn:hover[b-gi9cg4ob4s] {
        border-color: color-mix(in oklch, var(--color-accent), transparent 55%);
        color: var(--color-accent-hover);
    }

    .deals-typeseg__btn.is-on[b-gi9cg4ob4s] {
        border-color: var(--color-accent);
        background: var(--color-accent);
        color: #fff;
    }

    .deals-typeseg__btn:focus-visible[b-gi9cg4ob4s] {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

/* === 2. 필터 영역 ============================================== */

/* 모드 토글 — 공개일 / 계약일. 핸드오프 seg 알약 토글 위 라벨. */
.deals-mode-toggle[b-gi9cg4ob4s] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 0 0;
}

.deals-mode-toggle__label[b-gi9cg4ob4s] {
    font-size: 13px;
    color: var(--color-text-muted);
    font-weight: 600;
    letter-spacing: -0.02em;
}

/* 핸드오프 .seg / .seg-btn — 알약 버튼 2개 (공개일/계약일). */
.deals-seg[b-gi9cg4ob4s] {
    display: inline-flex;
    gap: 8px;
}

.deals-seg__btn[b-gi9cg4ob4s] {
    height: 36px;
    padding: 0 16px;
    border: 1px solid var(--color-border);
    border-radius: 999px;
    background: var(--color-surface);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .deals-seg__btn:hover[b-gi9cg4ob4s] {
        border-color: color-mix(in oklch, var(--color-accent), transparent 55%);
        color: var(--color-accent-hover);
    }

    .deals-seg__btn.is-on[b-gi9cg4ob4s] {
        border-color: var(--color-accent);
        background: var(--color-accent-soft);
        color: var(--color-accent-hover);
    }

    .deals-seg__btn:focus-visible[b-gi9cg4ob4s] {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

.deals-filter[b-gi9cg4ob4s] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
    padding: 16px 0 24px;
    margin-bottom: 16px;
}

.deals-filter__field[b-gi9cg4ob4s] {
    position: relative;
    min-width: 220px;
    display: flex;
    align-items: center;
}

.deals-filter__field--date[b-gi9cg4ob4s] {
    min-width: 210px;
}

/* 핸드오프 셀렉트 — 높이 52px, radius 14px, 보더 1.5px, 우측 chevron, focus 시 accent glow.
   regionCombo.js 연동 그대로 (네이티브 select). */
.deals-filter__select[b-gi9cg4ob4s] {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0 44px 0 18px;
    border: 1.5px solid var(--color-border);
    border-radius: 14px;
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.02em;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9.5 L12 15.5 L18 9.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .deals-filter__select:hover:not(:disabled)[b-gi9cg4ob4s] {
        border-color: color-mix(in oklch, var(--color-accent), transparent 50%);
    }

    .deals-filter__select:focus-visible[b-gi9cg4ob4s],
    .deals-filter__select:focus[b-gi9cg4ob4s] {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent), transparent 80%);
    }

    .deals-filter__select:disabled[b-gi9cg4ob4s] {
        background-color: var(--color-surface-alt);
        color: var(--color-text-muted);
        cursor: not-allowed;
        opacity: 0.7;
    }

/* 드롭다운 옵션 교대색 (zebra) — Windows Chrome/Edge 에서만 적용 (네이티브 목록 제약). */
.deals-filter__select option[b-gi9cg4ob4s] {
    background-color: var(--color-surface);
    color: var(--color-text);
}

    .deals-filter__select option:nth-child(even)[b-gi9cg4ob4s] {
        background-color: var(--color-surface-alt);
    }

/* 네이티브 input[type=date] — 셀렉트와 동일 톤 (52px, radius 14px, 보더 1.5px). */
.deals-filter__date[b-gi9cg4ob4s] {
    flex: 1;
    min-width: 0;
    height: 52px;
    padding: 0 16px;
    border: 1.5px solid var(--color-border);
    border-radius: 14px;
    background-color: var(--color-surface);
    color: var(--color-text);
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

    .deals-filter__date:hover[b-gi9cg4ob4s] {
        border-color: color-mix(in oklch, var(--color-accent), transparent 50%);
    }

    .deals-filter__date:focus-visible[b-gi9cg4ob4s],
    .deals-filter__date:focus[b-gi9cg4ob4s] {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px color-mix(in oklch, var(--color-accent), transparent 80%);
    }

    .deals-filter__date[b-gi9cg4ob4s]::-webkit-calendar-picker-indicator {
        opacity: 0.5;
        cursor: pointer;
    }

/* === 3. 거래 표 ============================================== */

.deals-grid[b-gi9cg4ob4s] {
    position: relative;
    margin-bottom: 12px;
}

.deals-grid__progress[b-gi9cg4ob4s] {
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    z-index: 2;
    height: 2px;
}

/* 핸드오프 표 카드 — radius 16 + 부드러운 그림자(hairline ring 포함). 컬럼 = 1.18fr 1fr 1fr. */
[b-gi9cg4ob4s] .deals-grid .deal-table {
    border-radius: 16px;
    background: var(--color-surface);
    box-shadow: var(--shadow-card);
    overflow: hidden;
}

/* 헤더 row */
[b-gi9cg4ob4s] .deals-grid .deal-table__head {
    display: grid;
    grid-template-columns: 1.18fr 1fr 1fr;
    background: var(--color-surface-alt);
    border-bottom: 1px solid var(--color-border);
}

/* 헤더 셀 — 컬럼명 + info 아이콘. 중앙정렬, 52px. */
[b-gi9cg4ob4s] .deals-grid .deal-th {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 52px;
    border-left: 1px solid var(--color-border);
    font-weight: 700;
    font-size: 15px;
    letter-spacing: -0.02em;
    color: var(--color-text);
}

    [b-gi9cg4ob4s] .deals-grid .deal-th:first-child {
        border-left: none;
    }

/* info 아이콘 (i) — 동그라미 */
[b-gi9cg4ob4s] .deals-grid .deal-th__info {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    color: var(--color-text-muted);
    font-size: 0.65rem;
    font-weight: 700;
    font-style: italic;
    cursor: help;
}

/* 본문 row — 헤더와 동일 grid */
[b-gi9cg4ob4s] .deals-grid .deal-row {
    display: grid;
    grid-template-columns: 1.18fr 1fr 1fr;
    border-top: 1px solid var(--color-border);
}

    [b-gi9cg4ob4s] .deals-grid .deal-row:hover {
        background: var(--color-surface-alt);
    }

[b-gi9cg4ob4s] .deals-grid .deal-cell {
    padding: 22px 18px;
    border-left: 1px solid var(--color-border);
    min-width: 0;
    color: var(--color-text);
    font-size: 0.95rem;
}

    [b-gi9cg4ob4s] .deals-grid .deal-cell:first-child {
        border-left: none;
    }

/* 큰 수치 자릿수 정렬 */
[b-gi9cg4ob4s] .deals-grid .tabular {
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
}

/* 모바일 카드 변환용 셀별 라벨 (현재 PC·모바일 모두 hidden — 3컬럼 유지) */
[b-gi9cg4ob4s] .deals-grid .cell-mobile-label {
    display: none;
}

/* === 셀 내 적층 ============================================== */

[b-gi9cg4ob4s] .deals-grid .cell-stack {
    display: flex;
    flex-direction: column;
    gap: 5px;
    line-height: 1.4;
    min-width: 0;
    align-items: center;
    text-align: center;
}

[b-gi9cg4ob4s] .deals-grid .cell-stack__main {
    color: var(--color-text);
    font-weight: 700;
}

[b-gi9cg4ob4s] .deals-grid .cell-stack__sub {
    color: var(--color-text-muted);
    font-size: 0.78rem;
    font-weight: 500;
    line-height: 1.45;
}

/* === 셀 A — 단지명 (핸드오프: 파란 accent 링크 + 밑줄) =========================== */
[b-gi9cg4ob4s] .deals-grid .cell-stack--apt {
    min-width: 0;
}

[b-gi9cg4ob4s] .deals-grid .cell-stack--apt .cell-stack__main {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    min-width: 0;
    justify-content: center;
}

[b-gi9cg4ob4s] .deals-grid .cell-stack--apt .danji-link {
    word-break: break-word;
    overflow-wrap: anywhere;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.03em;
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-color: color-mix(in oklch, var(--color-accent), transparent 60%);
    text-underline-offset: 3px;
    transition: color 0.15s ease;
}

    [b-gi9cg4ob4s] .deals-grid .cell-stack--apt .danji-link:hover {
        color: var(--color-accent-hover);
        text-decoration-color: var(--color-accent-hover);
    }

/* 단지명 옆 동 번호 "(15동)" */
[b-gi9cg4ob4s] .deals-grid .cell-stack--apt .cell-stack__dong {
    color: var(--color-text-muted);
    font-size: 0.85rem;
    font-weight: 500;
}

/* 단지명 셀 보조줄 (년차·세대수·주소) — 13px 톤. 주소만 한 단계 옅게(muted) + 약간 작게. */
[b-gi9cg4ob4s] .deals-grid .cell-stack--apt .cell-stack__sub:last-child {
    margin-top: 2px;
    font-size: 0.74rem;
    color: var(--color-text-muted);
}

/* === 셀 B — 계약일 (핸드오프: 빨강 아님, 차분한 진회색) ========================== */
[b-gi9cg4ob4s] .deals-grid .cell-stack--date .cell-stack__main {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-text);
}

[b-gi9cg4ob4s] .deals-grid .cell-stack--date .cell-stack__sub {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text-muted);
}

/* === 셀 C — 매매 실거래 (핸드오프: 코랄레드 강조) ========================== */
[b-gi9cg4ob4s] .deals-grid .cell-stack--amount {
    align-items: center;
}

[b-gi9cg4ob4s] .deals-grid .cell-stack--amount .cell-stack__main {
    font-size: 21px;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--color-price);
}

/* === 전월세 — 전세/월세 필터칩 + 보증금/월세 셀 ============================ */

/* 전세/월세 필터칩 — 옅은 트랙 + 활성 흰 칩 (모드 토글 정렬 칩과 동일 톤). */
.deals-filter__field--rent[b-gi9cg4ob4s] {
    min-width: auto;
}

.deals-rentseg[b-gi9cg4ob4s] {
    display: inline-flex;
    gap: 4px;
    padding: 4px;
    border-radius: 12px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
}

.deals-rentseg__btn[b-gi9cg4ob4s] {
    height: 42px;
    padding: 0 18px;
    border: none;
    border-radius: 9px;
    background: transparent;
    font-family: inherit;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--color-text-muted);
    letter-spacing: -0.02em;
    cursor: pointer;
    transition: all 0.15s ease;
}

    .deals-rentseg__btn:hover[b-gi9cg4ob4s] {
        color: var(--color-accent-hover);
    }

    .deals-rentseg__btn.is-on[b-gi9cg4ob4s] {
        background: var(--color-surface);
        color: var(--color-accent-hover);
        font-weight: 700;
        box-shadow: var(--shadow-sm);
    }

    .deals-rentseg__btn:focus-visible[b-gi9cg4ob4s] {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
    }

/* 월세 셀 — 보증금 + 월세 두 줄. 둘 다 코랄레드 가격색이나 월세는 한 단계 작게. */
[b-gi9cg4ob4s] .deals-grid .cell-stack__main--rent {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: center;
}

[b-gi9cg4ob4s] .deals-grid .cell-stack__main--rent .rent-deposit {
    font-size: 19px;
    line-height: 1.2;
}

[b-gi9cg4ob4s] .deals-grid .cell-stack__main--rent .rent-monthly {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

/* === 비교통계 (최고가대비/타입최고/평형최고) — 라벨 muted + 값 진회색(빨강 폐기) =========== */
[b-gi9cg4ob4s] .deals-grid .cell-stack__sub--peak {
    display: flex;
    align-items: baseline;
    gap: 6px;
    justify-content: center;
    font-size: 0.78rem;
    line-height: 1.4;
}

[b-gi9cg4ob4s] .deals-grid .cell-stack__sub-label {
    color: var(--color-text-muted);
    font-weight: 500;
}

[b-gi9cg4ob4s] .deals-grid .cell-stack__sub-value {
    color: var(--color-text);
    font-weight: 700;
}

/* === 신고가(신) 배지 + 직전 대비 상승액 (핸드오프: 코랄레드 + 상승 알약 칩) =========== */

/* 거래금액 옆 "(신)" — 코랄레드 텍스트. */
[b-gi9cg4ob4s] .deals-grid .deals-grid__new-high-badge {
    margin-left: 4px;
    color: var(--color-price);
    font-weight: 700;
    font-size: 0.85em;
}

/* ↑ 상승액 — 핸드오프 .d-up 알약 칩 (price-soft 배경). 색+아이콘+텍스트 3중 (WCAG). */
[b-gi9cg4ob4s] .deals-grid .cell-stack__sub--new-high {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    margin-top: 1px;
    padding: 2px 9px;
    border-radius: 999px;
    background: var(--color-price-soft);
    color: var(--color-price);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

[b-gi9cg4ob4s] .deals-grid .cell-stack__sub--new-high .deals-grid__up-icon {
    font-size: 0.95em;
    line-height: 1;
}

/* === 매수자/매도자 구분 시장 신호 chip ============================ */
[b-gi9cg4ob4s] .deals-grid .cell-stack__chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    justify-content: center;
}

[b-gi9cg4ob4s] .deals-grid .info-chip--party {
    background: var(--color-surface-alt);
    color: var(--color-text);
    border: 1px solid var(--color-border);
    font-size: 0.72rem;
    font-weight: 500;
    padding: 2px 8px;
    border-radius: 999px;
    line-height: 1.4;
    white-space: nowrap;
}

/* 관심 단지 chip — 핸드오프 .d-fav (accent-soft 알약). */
[b-gi9cg4ob4s] .deals-grid .info-chip--accent {
    display: inline-flex;
    align-items: center;
    height: 21px;
    padding: 0 8px;
    border-radius: 999px;
    background: var(--color-accent-soft);
    color: var(--color-accent-hover);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

/* === 동네(법정동)별 독립 표 ============================ */
.deal-dong[b-gi9cg4ob4s] {
    margin-bottom: 52px;
}

    .deal-dong:last-child[b-gi9cg4ob4s] {
        margin-bottom: 0;
    }

/* 동네 제목 — 가운데 정렬(1fr auto 1fr) + 건수 배지 accent. */
.deal-dong__title[b-gi9cg4ob4s] {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: baseline;
    margin: 0 0 16px;
    padding: 10px 0 0;
    font-size: 1.375rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    color: var(--color-text);
}

.deal-dong__name[b-gi9cg4ob4s] {
    grid-column: 2;
}

.deal-dong__count[b-gi9cg4ob4s] {
    grid-column: 3;
    justify-self: start;
    margin-left: 8px;
    white-space: nowrap;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--color-accent);
}

/* === 총건수 한 줄 ============================ */
.deal-summary[b-gi9cg4ob4s] {
    padding: 14px 4px 4px;
    font-size: 0.85rem;
    color: var(--color-text-muted);
}

.deal-summary--notice[b-gi9cg4ob4s] {
    margin: 8px 0 0;
    padding: 10px 14px;
    background: var(--color-bg-warm);
    border: 1px solid var(--color-border);
    border-left: 3px solid var(--color-accent);
    border-radius: var(--radius-md);
    line-height: 1.55;
}

/* 빈 상태 */
.deals-grid__empty[b-gi9cg4ob4s] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 48px 24px;
    color: var(--color-text-muted);
}

.deals-grid__empty-title[b-gi9cg4ob4s] {
    color: var(--color-text);
    font-weight: 600;
    margin: 0;
}

.deals-grid__empty-list[b-gi9cg4ob4s] {
    margin: 0;
    padding-left: 20px;
    line-height: 1.7;
    color: var(--color-text-muted);
    font-size: 0.9rem;
}

/* === 별표 라인 ============================================== */

.deals-grid__notes[b-gi9cg4ob4s] {
    padding: 16px 4px 0;
    line-height: 1.7;
}

    .deals-grid__notes .source-line[b-gi9cg4ob4s] {
        margin: 0 0 4px 0;
        font-size: 0.82rem;
        color: var(--color-text-muted);
    }

/* === 단지명 링크 focus ============================================== */
[b-gi9cg4ob4s] .deals-grid .danji-link:focus-visible {
    outline: 2px solid var(--color-accent);
    outline-offset: 2px;
    border-radius: 2px;
}

/* === 해제 거래 배지 + 거래금액 취소선 ============================================== */

/* "해제" 회색 chip — 한국 컨벤션상 무효·취소는 채도 낮은 회색 (코랄/파랑과 분리). */
[b-gi9cg4ob4s] .deals-grid .deals-grid__cancelled-badge {
    display: inline-flex;
    align-items: center;
    margin-left: 6px;
    padding: 0 6px;
    height: 18px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm, 4px);
    background: var(--color-surface-alt, #f4f4f5);
    color: var(--color-text-muted);
    font-size: 0.7rem;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.02em;
}

/* 해제된 거래 금액 — 무효 시각화 (취소선 + 회색). tabular 정렬 유지. */
[b-gi9cg4ob4s] .deals-grid .deals-grid__amount--cancelled {
    color: var(--color-text-muted) !important;
    text-decoration: line-through;
    text-decoration-thickness: 1px;
}

/* ============================================================================
   태블릿 / 중간 viewport — `@media (max-width: 67.5em)` (1080px)
   ========================================================================== */

@media (max-width: 67.5em) {

    .deals-filter[b-gi9cg4ob4s] {
        gap: 12px;
    }
}

/* ============================================================================
   모바일 — `@media (max-width: 43.75em)` (≈ 700px)
   사용자 명시(2026-05-27): 카드 변환 폐기, 폰에서도 3컬럼 grid 유지 + 폰트·패딩 압축.
   핸드오프의 1열 스택은 미적용 (기존 사용자 선호 존중). 색/카드 톤은 PC 상속.
   ========================================================================== */

@media (max-width: 43.75em) {

    .page-container[b-gi9cg4ob4s] {
        padding-inline: 16px;
    }

    .deals-head__title[b-gi9cg4ob4s] { font-size: 24px; }

    /* 지표 바 — 2×2 (토허제와 동형). */
    .deals-metrics[b-gi9cg4ob4s] { grid-template-columns: 1fr 1fr; margin-top: 16px; }
    .deals-metric[b-gi9cg4ob4s] { padding: 16px 18px; }
    .deals-metric:nth-child(3)[b-gi9cg4ob4s], .deals-metric:nth-child(4)[b-gi9cg4ob4s] { border-top: 1px solid var(--color-border); }
    .deals-metric:nth-child(3)[b-gi9cg4ob4s] { border-left: none; }
    .deals-metric__value[b-gi9cg4ob4s] { font-size: 23px; }

    .deals-fallback-notice[b-gi9cg4ob4s] {
        padding: 12px 14px;
        font-size: 0.85rem;
        line-height: 1.55;
        gap: 8px;
        margin-bottom: 12px;
    }

    /* 거래 종류 탭 (매매/전월세) — PC 40px/15px → 모바일 압축. */
    .deals-type-tabs[b-gi9cg4ob4s] {
        padding: 18px 0 0;
    }

    .deals-typeseg[b-gi9cg4ob4s] {
        gap: 6px;
    }

    .deals-typeseg__btn[b-gi9cg4ob4s] {
        height: 36px;
        padding: 0 18px;
        font-size: 0.84rem;
    }

    .deals-mode-toggle[b-gi9cg4ob4s] {
        flex-wrap: wrap;
        gap: 10px;
        padding: 12px 0 0;
    }

    .deals-mode-toggle__label[b-gi9cg4ob4s] {
        font-size: 0.8rem;
    }

    /* 전세/월세 필터칩 — 다른 필터 필드(min-width:100%)와 정렬 위해 풀폭 + 트랙도 풀폭.
       칩 3개(전체/전세/월세)는 트랙 안에서 flex:1 균등 분할 → 한 줄에 안정 배치. */
    .deals-filter__field--rent[b-gi9cg4ob4s] {
        min-width: 100%;
    }

    .deals-rentseg[b-gi9cg4ob4s] {
        display: flex;
        width: 100%;
    }

    .deals-rentseg__btn[b-gi9cg4ob4s] {
        flex: 1;
        height: 44px;
        padding: 0 10px;
        font-size: 0.86rem;
    }

    .deals-filter[b-gi9cg4ob4s] {
        gap: 12px;
        padding: 12px 0 16px;
        margin-bottom: 8px;
    }

    .deals-filter__field[b-gi9cg4ob4s],
    .deals-filter__field--date[b-gi9cg4ob4s] {
        min-width: 100%;
    }

    /* 셀렉트·날짜 — 모바일 높이 살짝 축소 (52 → 48). */
    .deals-filter__select[b-gi9cg4ob4s],
    .deals-filter__date[b-gi9cg4ob4s] {
        height: 48px;
        font-size: 14.5px;
    }

    /* 표 — 3컬럼 grid 유지. 헤더·셀 패딩·폰트만 압축. */
    .deals-grid[b-gi9cg4ob4s] {
        margin-inline: 0;
    }

    [b-gi9cg4ob4s] .deals-grid .deal-th {
        height: auto;
        padding: 9px 6px;
        font-size: 0.82rem;
        gap: 3px;
    }

    [b-gi9cg4ob4s] .deals-grid .deal-th__info {
        display: none;
    }

    [b-gi9cg4ob4s] .deals-grid .deal-cell {
        padding: 10px 6px;
        font-size: 0.85rem;
    }

    [b-gi9cg4ob4s] .deals-grid .cell-mobile-label {
        display: none;
    }

    [b-gi9cg4ob4s] .deals-grid .cell-stack {
        gap: 4px;
    }

    /* 단지명·계약일 main 통일(좁은 폭에서 크기 균형). */
    [b-gi9cg4ob4s] .deals-grid .cell-stack--apt .danji-link {
        font-size: 1rem;
    }

    [b-gi9cg4ob4s] .deals-grid .cell-stack--date .cell-stack__main {
        font-size: 1rem;
    }

    /* 가격은 강조 유지하되 한 단계 축소. */
    [b-gi9cg4ob4s] .deals-grid .cell-stack--amount .cell-stack__main {
        font-size: 1.1rem;
    }

    /* 월세 두 줄 (보증금 + 월) — PC 19px/15px → 모바일 좁은 폭 맞춰 축소.
       두 줄이라 매매 1줄보다 작게 잡아야 셀 높이·줄바꿈 안정. */
    [b-gi9cg4ob4s] .deals-grid .cell-stack__main--rent .rent-deposit {
        font-size: 1rem;
    }

    [b-gi9cg4ob4s] .deals-grid .cell-stack__main--rent .rent-monthly {
        font-size: 0.8rem;
    }

    [b-gi9cg4ob4s] .deals-grid .cell-stack__sub {
        font-size: 0.66rem;
        line-height: 1.4;
        overflow-wrap: anywhere;
        word-break: keep-all;
    }

    [b-gi9cg4ob4s] .deals-grid .cell-stack--apt .cell-stack__sub:last-child {
        font-size: 0.62rem;
    }

    [b-gi9cg4ob4s] .deals-grid .cell-stack--date .cell-stack__sub {
        font-size: 0.66rem;
    }

    [b-gi9cg4ob4s] .deals-grid .cell-stack__sub--peak {
        font-size: 0.66rem;
        gap: 3px;
        white-space: nowrap;
    }

    [b-gi9cg4ob4s] .deals-grid .cell-stack__sub--peak .cell-stack__sub-label,
    [b-gi9cg4ob4s] .deals-grid .cell-stack__sub--peak .cell-stack__sub-value {
        white-space: nowrap;
    }

    [b-gi9cg4ob4s] .deals-grid .cell-stack__sub--new-high {
        font-size: 0.72rem;
        padding: 2px 7px;
    }

    [b-gi9cg4ob4s] .deals-grid .cell-stack--apt .cell-stack__dong {
        font-size: 0.72rem;
    }

    [b-gi9cg4ob4s] .deals-grid .deals-grid__cancelled-badge {
        font-size: 0.62rem;
        height: 16px;
        padding: 0 4px;
        margin-left: 4px;
    }

    [b-gi9cg4ob4s] .deals-grid .info-chip--party {
        font-size: 0.64rem;
        padding: 1px 6px;
    }

    .deals-grid__notes[b-gi9cg4ob4s] {
        padding: 12px 16px 0;
    }

        .deals-grid__notes .source-line[b-gi9cg4ob4s] {
            font-size: 0.78rem;
            padding-left: 0;
        }

    .deal-dong[b-gi9cg4ob4s] {
        margin-bottom: 36px;
    }

    .deal-dong__title[b-gi9cg4ob4s] {
        font-size: 1.12rem;
        margin-bottom: 10px;
    }

    .deal-dong__count[b-gi9cg4ob4s] {
        font-size: 0.78rem;
    }

    .deal-summary[b-gi9cg4ob4s] {
        padding: 12px 4px 4px;
        font-size: 0.8rem;
    }

    .deals-grid__empty[b-gi9cg4ob4s] {
        padding: 32px 16px;
    }
}

/* ============================================================================
   더 좁은 폰 — `@media (max-width: 30em)` (≈ 480px)
   ========================================================================== */

@media (max-width: 30em) {

    .page-container[b-gi9cg4ob4s] {
        padding-inline: 10px;
    }

    [b-gi9cg4ob4s] .deals-grid .deal-th {
        padding: 7px 4px;
        font-size: 0.72rem;
    }

    [b-gi9cg4ob4s] .deals-grid .deal-cell {
        padding: 8px 4px;
    }

    [b-gi9cg4ob4s] .deals-grid .cell-stack {
        gap: 3px;
    }

    [b-gi9cg4ob4s] .deals-grid .cell-stack--apt .danji-link {
        font-size: 0.9rem;
    }

    [b-gi9cg4ob4s] .deals-grid .cell-stack--date .cell-stack__main {
        font-size: 0.9rem;
    }

    [b-gi9cg4ob4s] .deals-grid .cell-stack--amount .cell-stack__main {
        font-size: 1rem;
    }

    /* 월세 두 줄 — 가장 좁은 폰에서 한 단계 더 압축. */
    [b-gi9cg4ob4s] .deals-grid .cell-stack__main--rent .rent-deposit {
        font-size: 0.9rem;
    }

    [b-gi9cg4ob4s] .deals-grid .cell-stack__main--rent .rent-monthly {
        font-size: 0.72rem;
    }

    [b-gi9cg4ob4s] .deals-grid .cell-stack__sub {
        font-size: 0.6rem;
    }

    [b-gi9cg4ob4s] .deals-grid .cell-stack__sub--peak {
        font-size: 0.58rem;
        gap: 2px;
    }

    [b-gi9cg4ob4s] .deals-grid .cell-stack--apt .cell-stack__dong {
        font-size: 0.65rem;
    }

    [b-gi9cg4ob4s] .deals-grid .deals-grid__cancelled-badge {
        font-size: 0.56rem;
        padding: 0 3px;
        margin-left: 3px;
    }

    [b-gi9cg4ob4s] .deals-grid .info-chip--party {
        font-size: 0.58rem;
        padding: 1px 4px;
    }
}
/* _content/AptSonpoom/Components/Shared/AdSlot.razor.rz.scp.css */
/* AdSlot — 광고 자리 placeholder.
   실 애드센스 전환 시 .ad-slot 내부만 교체. 박스 자체 스타일 (여백·크기) 은 그대로 재사용. */

.ad-slot[b-n6q78p329m] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px dashed var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
    color: var(--color-text-muted);
    text-align: center;
}

/* 하단/상단 가로 배너 — leaderboard 계열 (반응형 높이). */
.ad-slot--banner[b-n6q78p329m] {
    width: 100%;
    min-height: 90px;
    margin: 24px 0;
}

/* 콘텐츠 사이 인피드 — 직사각형 계열. */
.ad-slot--infeed[b-n6q78p329m] {
    width: 100%;
    min-height: 120px;
    margin: 16px 0;
}

.ad-slot__tag[b-n6q78p329m] {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 6px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    color: var(--color-text-muted);
}

.ad-slot__label[b-n6q78p329m] {
    font-size: 0.78rem;
}

.ad-slot__sub[b-n6q78p329m] {
    opacity: 0.7;
}

@media (max-width: 700px) {
    .ad-slot--banner[b-n6q78p329m] {
        min-height: 80px;
        margin: 16px 0;
    }

    .ad-slot--infeed[b-n6q78p329m] {
        min-height: 100px;
        margin: 12px 0;
    }
}
/* _content/AptSonpoom/Components/Shared/DanjiSections/DanjiAiSummaryView.razor.rz.scp.css */
.djai[b-urx9snq7t4] {
    margin: 0 0 16px;
    padding: 14px 16px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.djai__title[b-urx9snq7t4] {
    margin: 0 0 8px;
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--color-text);
}

.djai__body[b-urx9snq7t4] {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.7;
    color: var(--color-text);
    white-space: pre-line;
}

.djai__note[b-urx9snq7t4] {
    margin: 10px 0 0;
    font-size: 0.72rem;
    line-height: 1.5;
    color: var(--color-text-muted);
}

.djai--compact[b-urx9snq7t4] {
    padding: 12px 14px;
}

.djai--compact .djai__title[b-urx9snq7t4] {
    font-size: 0.9rem;
}

.djai--compact .djai__body[b-urx9snq7t4] {
    font-size: 0.86rem;
}
/* _content/AptSonpoom/Components/Shared/DanjiSections/DanjiAreaHouseholdSection.razor.rz.scp.css */
/* DanjiAreaHouseholdSection — PyeongAvgBars 자매. 막대 = 세대수 비례. 신규 토큰 0 — 기존 --color-* 만. */

.djah-bars[b-j3o22ffmck] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.djah-row[b-j3o22ffmck] {
    display: grid;
    grid-template-columns: 36px auto 1fr auto;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-text);
}

.djah-label[b-j3o22ffmck] {
    font-weight: 600;
    color: var(--color-text-muted);
}

.djah-row.is-active .djah-label[b-j3o22ffmck] {
    color: var(--color-accent);
}

.djah-area[b-j3o22ffmck] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.djah-bar[b-j3o22ffmck] {
    position: relative;
    display: block;
    width: 100%;
    height: 6px;
    background: var(--color-surface-alt);
    border-radius: 3px;
    overflow: hidden;
}

.djah-fill[b-j3o22ffmck] {
    display: block;
    height: 100%;
    background: var(--color-accent-soft);
    border-radius: 3px;
    transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.djah-row.is-active .djah-fill[b-j3o22ffmck] {
    background: var(--color-accent);
}

.djah-count[b-j3o22ffmck] {
    font-weight: 600;
    font-size: 0.8rem;
    color: var(--color-text);
}

.djah-total[b-j3o22ffmck] {
    margin: 8px 0 0;
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

/* 모바일 — 4컬럼 압축. */
@media (max-width: 700px) {
    .djah-row[b-j3o22ffmck] {
        grid-template-columns: 30px auto 1fr auto;
        gap: 6px;
        font-size: 0.8rem;
    }
    .djah-area[b-j3o22ffmck] {
        font-size: 0.72rem;
    }
    .djah-count[b-j3o22ffmck] {
        font-size: 0.76rem;
    }
}

/* 320px 이하 — 면적 칸 숨김 (평형·세대수 보존). */
@media (max-width: 360px) {
    .djah-row[b-j3o22ffmck] {
        grid-template-columns: 28px 1fr auto;
        font-size: 0.76rem;
    }
    .djah-area[b-j3o22ffmck] {
        display: none;
    }
}
/* _content/AptSonpoom/Components/Shared/DanjiSections/DanjiPermitList.razor.rz.scp.css */
/* 단지 토지거래허가(토허제) 리스트 — 단지 패널/상세 공용 (2026-06-02).
   실거래(시세) 리스트와 시각 분리 — 가격 강조색 안 씀, 중립 hairline 톤. */

.dpl[b-6c4ebsvp8w] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.dpl__list[b-6c4ebsvp8w] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.dpl__item[b-6c4ebsvp8w] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.4rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.85rem;
    line-height: 1.35;
}

.dpl__item:last-child[b-6c4ebsvp8w] {
    border-bottom: none;
}

/* 허가 처리일 — 자릿수 정렬 (도메인 §5). */
.dpl__date[b-6c4ebsvp8w] {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* NEW 배지 — 오늘 새로 들어온 허가(공개일=오늘). 빨강 칩 (사용자 명시 2026-06-02). */
.dpl__new[b-6c4ebsvp8w] {
    flex: 0 0 auto;
    padding: 0 5px;
    border-radius: var(--radius-sm, 4px);
    background: var(--color-up);
    color: #fff;
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

/* 주소 + NEW 묶음 — 가변 폭으로 남은 공간 차지(이용목적·업무구분 배지를 오른쪽 끝으로). 내부는 주소 텍스트 바로 뒤에 NEW. */
.dpl__addrwrap[b-6c4ebsvp8w] {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
}

/* 법정동/지번 — 묶음 안에서 내용 폭만, 넘치면 말줄임. */
.dpl__addr[b-6c4ebsvp8w] {
    flex: 0 1 auto;
    min-width: 0;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 이용목적 — 보조 칩 톤. */
.dpl__purp[b-6c4ebsvp8w] {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 0.78rem;
    padding: 0.05rem 0.4rem;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    white-space: nowrap;
}

/* 업무구분 (허가/불허가) — 기본은 본문 톤, 불허가는 회색 (무효·부정 채도 낮춤). 상승·하락 신호색과 분리. */
.dpl__gbn[b-6c4ebsvp8w] {
    flex: 0 0 auto;
    color: var(--color-text);
    font-weight: 600;
    white-space: nowrap;
}

.dpl__gbn--denied[b-6c4ebsvp8w],
.dpl__item--denied .dpl__addr[b-6c4ebsvp8w] {
    color: var(--color-text-muted);
}

.dpl__item--denied[b-6c4ebsvp8w] {
    background: var(--color-surface-alt);
}

.dpl__note[b-6c4ebsvp8w] {
    font-size: 0.72rem;
    line-height: 1.45;
    margin: 0.25rem 0 0;
}

/* 모바일 (≤700px) — 단지 패널 풀스크린 전환. 좁은 폭에서 날짜+업무구분 한 줄, 주소·이용목적 다음 줄로 wrap. */
@media (max-width: 700px) {
    .dpl__item[b-6c4ebsvp8w] {
        flex-wrap: wrap;
        gap: 0.3rem 0.5rem;
    }
    .dpl__date[b-6c4ebsvp8w] { order: 1; }
    .dpl__gbn[b-6c4ebsvp8w] { order: 3; margin-left: auto; }
    .dpl__addrwrap[b-6c4ebsvp8w] {
        order: 4;
        flex: 1 0 100%;
    }
    .dpl__addr[b-6c4ebsvp8w] { white-space: normal; }
    .dpl__purp[b-6c4ebsvp8w] { order: 5; }
}
/* _content/AptSonpoom/Components/Shared/DanjiSections/DanjiSpecsGrid.razor.rz.scp.css */
/* DanjiSpecsGrid — 옛 DanjiPage.razor.css(.danji-info-grid__*) 시각 그대로 이전 (full 모드).
   is-compact = 패널 1열 stacked. 신규 토큰 0. */

.djsg-grid[b-rf9cruj5ju] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 32px;
    margin: 0;
}

/* ===== Compact=true (패널) — 2열 병렬 불릿 칩. 값 중심 한눈에 (호갱노노 톤). ===== */
.djsg-chips[b-rf9cruj5ju] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 7px 16px;
    font-variant-numeric: tabular-nums;
}

.djsg-chip[b-rf9cruj5ju] {
    position: relative;
    padding-left: 13px;
    font-size: 0.85rem;
    line-height: 1.4;
    color: var(--color-text);
    /* 값이 길면(예: 시공사명) 칸 너비에서 잘리고 …으로 표시 — hover 시 title 툴팁에 전체.
       grid track 안에서 줄어들려면 min-width:0 필수(기본 auto 면 안 줄어들고 레이아웃 밀림). */
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.djsg-chip[b-rf9cruj5ju]::before {
    content: "•";
    position: absolute;
    left: 2px;
    color: var(--color-text-muted);
}

/* ===== Compact=false (상세) — 2열 label:value dl ===== */
.djsg-row[b-rf9cruj5ju] {
    display: grid;
    grid-template-columns: 160px 1fr;
    gap: 12px 16px;
    padding: 12px 0;
    border-bottom: 1px solid var(--color-border);
}

/* full 2열 — 마지막 줄(하단 2개) border 제거. */
.djsg-row:nth-last-child(-n+2)[b-rf9cruj5ju] {
    border-bottom: none;
}

.djsg-label[b-rf9cruj5ju] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-text-muted);
    margin: 0;
}

.djsg-value[b-rf9cruj5ju] {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-text);
    margin: 0;
    word-break: keep-all;
}

/* 모바일 — 1열 stacked (label 위·값 아래). */
@media (max-width: 700px) {
    .djsg-grid[b-rf9cruj5ju] {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .djsg-row[b-rf9cruj5ju] {
        grid-template-columns: 1fr;
        gap: 4px;
        padding: 10px 0;
    }
    .djsg-row:nth-last-child(-n+2)[b-rf9cruj5ju] {
        border-bottom: 1px solid var(--color-border);
    }
    .djsg-row:last-child[b-rf9cruj5ju] {
        border-bottom: none;
    }
    .djsg-label[b-rf9cruj5ju] {
        font-size: 0.82rem;
    }
    .djsg-value[b-rf9cruj5ju] {
        font-size: 0.95rem;
    }
}
/* _content/AptSonpoom/Components/Shared/DanjiSections/NearbyStations.razor.rz.scp.css */
/* 역세권 (가까운 지하철역) — 단지 패널/상세 공용 (2026-06-03).
   데이터 영역 hairline 톤 (DanjiPermitList .dpl 동형). 노선 배지 색만 노선 고유색(사용자 승인 예외, 인라인 style).
   .ns- prefix — .dpl-* 와 selector 충돌 회피. flex 기반 — 좁은 패널/넓은 상세 양쪽 안 깨짐. */

.ns[b-sjbkyjafsy] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ns__list[b-sjbkyjafsy] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
}

.ns__item[b-sjbkyjafsy] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    padding: 0.45rem 0;
    border-bottom: 1px solid var(--color-border);
    font-size: 0.9rem;
    line-height: 1.35;
}

.ns__item:last-child[b-sjbkyjafsy] {
    border-bottom: none;
}

/* 노선 배지 묶음 — 환승역은 복수. 많아야 4~5개라 wrap 허용. */
.ns__badges[b-sjbkyjafsy] {
    flex: 0 0 auto;
    display: inline-flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    align-self: center;
}

/* 노선 배지 — 캡슐, 배경=노선 고유색(인라인 style), 텍스트=노선번호/약칭(색 독립성). */
.ns__badge[b-sjbkyjafsy] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.5em;
    padding: 0.1rem 0.4rem;
    border-radius: 999px;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}

/* 역명 — 가변 폭, 넘치면 말줄임. */
.ns__name[b-sjbkyjafsy] {
    flex: 1 1 auto;
    min-width: 0;
    color: var(--color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 도보·거리 메타 — 보조 톤 + 자릿수 정렬 (도메인 §5). 한 줄 보장. */
.ns__meta[b-sjbkyjafsy] {
    flex: 0 0 auto;
    color: var(--color-text-muted);
    font-size: 0.83rem;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.ns__dot[b-sjbkyjafsy] {
    margin: 0 0.25rem;
    color: var(--color-border);
}

.ns__note[b-sjbkyjafsy] {
    font-size: 0.72rem;
    line-height: 1.45;
    margin: 0.25rem 0 0;
}

/* 모바일 (≤700px) — 단지 패널 풀스크린(bottom 슬라이드업) 전환. DanjiPermitList 모바일 패턴 동형.
   좁은 폭: [배지묶음][역명] 한 줄 + [도보·거리] 다음 줄 wrap. 배지 4~5개(환승역)여도 역명 안 밀림. */
@media (max-width: 700px) {
    .ns__item[b-sjbkyjafsy] {
        flex-wrap: wrap;
        align-items: center;
        gap: 0.3rem 0.5rem;
    }
    /* 배지묶음 — 첫 줄 좌측, 환승 4~5개는 자체 wrap. */
    .ns__badges[b-sjbkyjafsy] {
        order: 1;
        align-self: center;
    }
    /* 역명 — 배지 옆 가변 폭, 넘치면 말줄임(좁은 패널 긴 역명 보호). */
    .ns__name[b-sjbkyjafsy] {
        order: 2;
        flex: 1 1 auto;
        min-width: 0;
    }
    /* 도보·거리 메타 — 다음 줄 전폭. 거리·분 tabular-nums 유지, 우측 정렬로 PC 시각 일관. */
    .ns__meta[b-sjbkyjafsy] {
        order: 3;
        flex: 1 0 100%;
        text-align: right;
    }
}
/* _content/AptSonpoom/Components/Shared/DanjiSections/PyeongAvgBars.razor.rz.scp.css */
/* PyeongAvgBars — 옛 Explore.razor.css(.explore-pyeong-bars__*) 시각 그대로 이전.
   신규 토큰 0 — 기존 --color-* 만. */

.djpb-bars[b-zb0027rexx] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.djpb-row[b-zb0027rexx] {
    display: grid;
    grid-template-columns: 36px 1fr auto auto auto;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--color-text);
}

.djpb-label[b-zb0027rexx] {
    font-weight: 600;
    color: var(--color-text-muted);
}

.djpb-row.is-active .djpb-label[b-zb0027rexx] {
    color: var(--color-accent);
}

.djpb-bar[b-zb0027rexx] {
    position: relative;
    display: block;
    width: 100%;
    height: 6px;
    background: var(--color-surface-alt);
    border-radius: 3px;
    overflow: hidden;
}

.djpb-fill[b-zb0027rexx] {
    display: block;
    height: 100%;
    background: var(--color-accent-soft);
    border-radius: 3px;
    /* 1s 룰(chrome) 대신 0.6s — 패널 안 데이터 영역 인지 가속 */
    transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.djpb-row.is-active .djpb-fill[b-zb0027rexx] {
    background: var(--color-accent);
}

.djpb-price[b-zb0027rexx] {
    font-weight: 600;
    color: var(--color-text);
}

.djpb-per[b-zb0027rexx] {
    font-size: 0.78rem;
    color: var(--color-text-muted);
}

.djpb-count[b-zb0027rexx] {
    font-size: 0.76rem;
    color: var(--color-text-muted);
}

/* 모바일 — 5컬럼 한 행 압축 (320px). */
@media (max-width: 700px) {
    .djpb-row[b-zb0027rexx] {
        grid-template-columns: 30px 1fr auto auto auto;
        gap: 6px;
        font-size: 0.8rem;
    }
    .djpb-price[b-zb0027rexx] {
        font-size: 0.82rem;
    }
    .djpb-per[b-zb0027rexx] {
        font-size: 0.72rem;
    }
    .djpb-count[b-zb0027rexx] {
        font-size: 0.7rem;
    }
}

/* 320px 이하 — 4컬럼 압축 + 거래수 칸 숨김 (평형·평당가 보존). */
@media (max-width: 360px) {
    .djpb-row[b-zb0027rexx] {
        grid-template-columns: 28px 1fr auto auto;
        font-size: 0.76rem;
    }
    .djpb-count[b-zb0027rexx] {
        display: none;
    }
}
/* _content/AptSonpoom/Components/Shared/DanjiSections/RegionCompareBars.razor.rz.scp.css */
/* RegionCompareBars — 공용 지역 비교. 옛 Explore.razor.css(.explore-region__*) +
   DanjiPage.razor.css(.region-compare__*) 에서 시각 그대로 이전 (외관 보존).
   신규 토큰 0 — 기존 --color-* 토큰만. 진단 색(up/down)은 컴포넌트 자체 보유(자기완결). */

/* ===== Compact=true — 탐색 패널: 가격(억) + 차이% 리스트 ===== */
.djsr-list[b-0z5wv7cg6n] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.djsr-row[b-0z5wv7cg6n] {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: baseline;
    gap: 10px;
    padding: 8px 10px;
    background: var(--color-surface-alt);
    border-radius: var(--radius-sm);
    font-size: 0.88rem;
}

.djsr-row--self[b-0z5wv7cg6n] {
    background: var(--color-accent-soft);
}

.djsr-row--self .djsr-label[b-0z5wv7cg6n] {
    font-weight: 700;
    color: var(--color-accent);
}

.djsr-label[b-0z5wv7cg6n] {
    color: var(--color-text);
}

.djsr-price[b-0z5wv7cg6n] {
    font-weight: 600;
    color: var(--color-text);
}

.djsr-diff[b-0z5wv7cg6n] {
    font-size: 0.82rem;
    font-weight: 600;
    min-width: 56px;
    text-align: right;
}

.djsr-diff--up[b-0z5wv7cg6n] {
    color: var(--color-up);
}

.djsr-diff--down[b-0z5wv7cg6n] {
    color: var(--color-down);
}

/* ===== Compact=false — 단지 상세: 만원/평 비례 막대 ===== */
.djsr-bars[b-0z5wv7cg6n] {
    list-style: none;
    margin: 16px 0 12px 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.djsr-barrow[b-0z5wv7cg6n] {
    display: grid;
    grid-template-columns: 110px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 0.875rem;
    color: var(--color-text);
}

.djsr-barrow--self[b-0z5wv7cg6n] {
    font-weight: 700;
}

.djsr-barlabel[b-0z5wv7cg6n] {
    color: var(--color-text-muted);
    white-space: nowrap;
}

.djsr-barrow--self .djsr-barlabel[b-0z5wv7cg6n] {
    color: var(--color-accent);
}

.djsr-bar[b-0z5wv7cg6n] {
    display: block;
    height: 10px;
    background: var(--color-surface-alt);
    border-radius: 999px;
    overflow: hidden;
    position: relative;
}

.djsr-fill[b-0z5wv7cg6n] {
    display: block;
    height: 100%;
    background: var(--color-text-muted);
    border-radius: 999px;
    transition: width 240ms cubic-bezier(0.16, 1, 0.3, 1);
}

.djsr-fill--self[b-0z5wv7cg6n] {
    background: var(--color-accent);
}

.djsr-value[b-0z5wv7cg6n] {
    font-weight: 600;
    color: var(--color-text);
    white-space: nowrap;
}

.djsr-value small[b-0z5wv7cg6n] {
    font-size: 0.7rem;
    font-weight: 400;
    color: var(--color-text-muted);
}

/* ===== 모바일 ===== */
@media (max-width: 700px) {
    /* 패널 리스트 — 3컬럼 → 1열 stacked (라벨/가격 + diff%). */
    .djsr-row[b-0z5wv7cg6n] {
        grid-template-columns: 1fr auto;
        grid-template-areas: "label diff" "price diff";
        column-gap: 8px;
        row-gap: 2px;
        font-size: 0.82rem;
        padding: 7px 10px;
    }
    .djsr-label[b-0z5wv7cg6n] {
        grid-area: label;
        font-size: 0.76rem;
        color: var(--color-text-muted);
    }
    .djsr-row--self .djsr-label[b-0z5wv7cg6n] {
        color: var(--color-accent);
    }
    .djsr-price[b-0z5wv7cg6n] {
        grid-area: price;
        font-size: 0.92rem;
    }
    .djsr-diff[b-0z5wv7cg6n] {
        grid-area: diff;
        align-self: center;
        font-size: 0.82rem;
        min-width: 50px;
    }

    /* 상세 막대 — label 폭 축소. */
    .djsr-barrow[b-0z5wv7cg6n] {
        grid-template-columns: 80px 1fr auto;
        gap: 8px;
        font-size: 0.8125rem;
    }
}

@media (max-width: 360px) {
    .djsr-row[b-0z5wv7cg6n] {
        font-size: 0.78rem;
    }
}
/* _content/AptSonpoom/Components/Shared/DanjiSections/StabilitySignals.razor.rz.scp.css */
/* StabilitySignals — 옛 Explore.razor.css(.explore-stability/gauge/sparkline) 시각 그대로 이전.
   신규 토큰 0. .djss-rowsub 색은 옛 .muted 유틸(scoped) 대체로 직접 박음. */

.djss-row[b-r4g8b9n5uz] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-bottom: 4px;
}

.djss-row + .djss-row[b-r4g8b9n5uz] {
    padding-top: 10px;
    border-top: 1px dashed var(--color-border);
}

.djss-rowhead[b-r4g8b9n5uz] {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.djss-rowlabel[b-r4g8b9n5uz] {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--color-text);
}

.djss-rowvalue[b-r4g8b9n5uz] {
    font-size: 0.92rem;
    font-weight: 700;
    color: var(--color-text);
}

.djss-rowsub[b-r4g8b9n5uz] {
    font-size: 0.76rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

/* 회복률 gauge — horizontal bar (accent 채움 / 100% 이상 = 한국 컨벤션 상승 빨강 옅게) */
.djss-gauge[b-r4g8b9n5uz] {
    display: block;
    width: 100%;
    height: 10px;
    background: var(--color-surface-alt);
    border-radius: 5px;
    overflow: hidden;
}

.djss-fill[b-r4g8b9n5uz],
.djss-fill--up[b-r4g8b9n5uz] {
    display: block;
    height: 100%;
    background: var(--color-accent);
    border-radius: 5px;
    transition: width 600ms cubic-bezier(0.16, 1, 0.3, 1);
}

.djss-fill--up[b-r4g8b9n5uz] {
    background: var(--color-up);
    opacity: 0.7;
}

.djss-list[b-r4g8b9n5uz] {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.djss-item[b-r4g8b9n5uz] {
    display: flex;
    justify-content: space-between;
    font-size: 0.82rem;
}

.djss-itemlabel[b-r4g8b9n5uz] {
    color: var(--color-text-muted);
}

.djss-itemvalue[b-r4g8b9n5uz] {
    color: var(--color-text);
    font-weight: 600;
}

/* 표본 부족 안내문 — 옛 .explore-panel__note 톤. */
.djss-note[b-r4g8b9n5uz] {
    margin: 4px 0 0;
    font-size: 0.74rem;
    line-height: 1.45;
    color: var(--color-text-muted);
}

/* 모바일 폰트 압축 */
@media (max-width: 700px) {
    .djss-rowlabel[b-r4g8b9n5uz] {
        font-size: 0.78rem;
    }
    .djss-rowvalue[b-r4g8b9n5uz] {
        font-size: 0.88rem;
    }
    .djss-rowsub[b-r4g8b9n5uz] {
        font-size: 0.72rem;
    }
    .djss-item[b-r4g8b9n5uz] {
        font-size: 0.78rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .djss-fill[b-r4g8b9n5uz],
    .djss-fill--up[b-r4g8b9n5uz] {
        transition: none;
    }
}
/* _content/AptSonpoom/Components/Shared/FavoriteToggle.razor.rz.scp.css */
/* ============================================================================
   FavoriteToggle — PC 기준선 (1280~1920).
   정본: .claude/docs/content/favorites-search.md §7-2
   모바일 케이스는 content-mobile-dev 가 @media 로 추가.

   active 색 = --color-accent. 한국 시세 컨벤션 --color-up (빨강) 사용 금지 —
   시세 신호색 전용으로 보존 (CLAUDE.md MudBlazor 톤 §2 일관).
   ========================================================================== */

.favorite-toggle[b-7f1sykhopj] {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-family: inherit;
    transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}

    .favorite-toggle:focus-visible[b-7f1sykhopj] {
        outline: 2px solid var(--color-accent);
        outline-offset: 2px;
        border-radius: var(--radius-sm);
    }

/* === Large variant (DanjiPage 헤더 — 큰 액션) === */

.favorite-toggle--large[b-7f1sykhopj] {
    gap: 6px;
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    font-weight: 500;
    line-height: 1.2;
    min-height: 36px;
}

.favorite-toggle--large.favorite-toggle--inactive[b-7f1sykhopj] {
    border: 1px solid var(--color-border);
    background: transparent;
    color: var(--color-text);
}

    .favorite-toggle--large.favorite-toggle--inactive:hover[b-7f1sykhopj] {
        border-color: var(--color-accent);
        color: var(--color-accent);
    }

.favorite-toggle--large.favorite-toggle--active[b-7f1sykhopj] {
    border: 1px solid var(--color-accent);
    background: var(--color-accent-soft);
    color: var(--color-accent);
    font-weight: 600;
}

    .favorite-toggle--large.favorite-toggle--active:hover[b-7f1sykhopj] {
        background: var(--color-accent);
        color: var(--color-surface);
    }

.favorite-toggle__icon[b-7f1sykhopj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    font-weight: 600;
}

.favorite-toggle__text[b-7f1sykhopj] {
    line-height: 1.2;
}

/* === Inline variant (RealPriceDaily DataGrid 단지명 셀 옆 — 부호만) === */

.favorite-toggle-inline[b-7f1sykhopj] {
    justify-content: center;
    width: 28px;
    height: 28px;
    margin-left: 6px;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: var(--radius-sm);
    font-size: 14px;
    line-height: 1;
    vertical-align: middle;
}

.favorite-toggle-inline.favorite-toggle-inline--inactive[b-7f1sykhopj] {
    color: var(--color-text-muted);
}

    .favorite-toggle-inline.favorite-toggle-inline--inactive:hover[b-7f1sykhopj] {
        background: var(--color-surface-alt);
        color: var(--color-accent);
    }

.favorite-toggle-inline.favorite-toggle-inline--active[b-7f1sykhopj] {
    color: var(--color-accent);
}

    .favorite-toggle-inline.favorite-toggle-inline--active:hover[b-7f1sykhopj] {
        background: var(--color-accent-soft);
    }

.favorite-toggle-inline__icon[b-7f1sykhopj] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
}

/* hover 효과는 hover/pointer:fine 디바이스에서만 활성 — 모바일 touch 의 sticky hover 차단. */
@media (hover: none) {
    .favorite-toggle--large.favorite-toggle--inactive:hover[b-7f1sykhopj] {
        border-color: var(--color-border);
        color: var(--color-text);
    }

    .favorite-toggle--large.favorite-toggle--active:hover[b-7f1sykhopj] {
        background: var(--color-accent-soft);
        color: var(--color-accent);
    }

    .favorite-toggle-inline.favorite-toggle-inline--inactive:hover[b-7f1sykhopj] {
        background: transparent;
        color: var(--color-text-muted);
    }

    .favorite-toggle-inline.favorite-toggle-inline--active:hover[b-7f1sykhopj] {
        background: transparent;
        color: var(--color-accent);
    }
}

/* ============================================================================
   모바일 케이스 — content-mobile-dev 추가
   - breakpoint 43.75em (≈ 700px). PC 케이스 그대로, 좁은 viewport 만 오버라이드.
   - Large variant — 터치 타겟 ≥ 44×44px 보장 (PC min-height 36 → 모바일 44).
     DanjiPage 헤더의 `.danji-head__right` 가 모바일에서 1컬럼 좌측 정렬 stack 이라
     큰 토글이 자연 좌측 inline-flex 정렬 — 풀폭 강제 X, 자연 폭 유지.
   - Inline variant — 28×28 그대로 (RealPriceDaily 측에서 모바일 hidden 처리,
     정본 §15-14 일관 — 정본 ↔ 본 보고서 §K 참조).
   ========================================================================== */

@media (max-width: 43.75em) {

    /* Large variant — 터치 타겟 + padding 약간 확대 */
    .favorite-toggle--large[b-7f1sykhopj] {
        min-height: 44px;
        padding: 10px 16px;
        font-size: 0.92rem;
    }

    .favorite-toggle__icon[b-7f1sykhopj] {
        font-size: 1.05rem;
    }
    /* Inline variant 28×28 — 모바일 hidden 처리는 RealPriceDaily.razor.css 측 책무
       (정본 §15-14 — 단지명 셀이 sticky + 라우팅 link, 모바일 토글 자체 hidden). */
}
/* _content/AptSonpoom/Components/Shared/LegalDoc.razor.rz.scp.css */
/* ============================================================================
   LegalDoc — 정책·안내 문서 공용 레이아웃 (PC 기준선).
   본문 가독성 우선의 좁은 컨테이너 + hairline 톤. 새 토큰 없음(기존 토큰만).
   ChildContent 본문은 호출 페이지 스코프라 ::deep 로 타이포 통일.
   ========================================================================== */

.legal-doc[b-5b44q725e5] {
    max-width: 820px;
    margin-inline: auto;
    padding: 28px 24px 44px;
}

.legal-doc__head[b-5b44q725e5] {
    margin-bottom: 24px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--color-border);
}

.legal-doc__eyebrow[b-5b44q725e5] {
    display: block;
    margin-bottom: 8px;
}

.legal-doc__title[b-5b44q725e5] {
    font-size: 1.7rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.legal-doc__lead[b-5b44q725e5] {
    color: var(--color-text-muted);
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0;
}

.legal-doc__updated[b-5b44q725e5] {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    margin: 12px 0 0;
    font-variant-numeric: tabular-nums;
}

/* ---- 본문 타이포 (::deep — ChildContent 호출 페이지 스코프) ---- */

.legal-doc__body[b-5b44q725e5]  h2 {
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--color-text);
    letter-spacing: -0.01em;
    margin: 30px 0 10px;
}

    .legal-doc__body[b-5b44q725e5]  h2:first-child {
        margin-top: 0;
    }

.legal-doc__body[b-5b44q725e5]  h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-text);
    margin: 18px 0 6px;
}

.legal-doc__body[b-5b44q725e5]  p {
    color: var(--color-text);
    font-size: 0.92rem;
    line-height: 1.75;
    margin: 0 0 10px;
}

.legal-doc__body[b-5b44q725e5]  ul,
.legal-doc__body[b-5b44q725e5]  ol {
    margin: 0 0 12px;
    padding-left: 20px;
}

.legal-doc__body[b-5b44q725e5]  li {
    color: var(--color-text);
    font-size: 0.92rem;
    line-height: 1.7;
    margin-bottom: 4px;
}

.legal-doc__body[b-5b44q725e5]  a {
    color: var(--color-accent);
    text-decoration: underline;
    word-break: break-all;
}

.legal-doc__body[b-5b44q725e5]  strong {
    font-weight: 600;
    color: var(--color-text);
}

/* 연락처·항목 박스 — 정의 목록(dl) */
.legal-doc__body[b-5b44q725e5]  dl {
    margin: 0 0 14px;
    padding: 14px 16px;
    background: var(--color-surface-alt);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
}

.legal-doc__body[b-5b44q725e5]  dt {
    font-weight: 600;
    color: var(--color-text);
    font-size: 0.86rem;
    margin-bottom: 2px;
}

.legal-doc__body[b-5b44q725e5]  dd {
    margin: 0 0 10px;
    color: var(--color-text);
    font-size: 0.9rem;
    line-height: 1.6;
}

    .legal-doc__body[b-5b44q725e5]  dd:last-child {
        margin-bottom: 0;
    }

/* 수집 항목·보유기간 등 표 */
.legal-doc__body[b-5b44q725e5]  table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
    font-size: 0.87rem;
}

.legal-doc__body[b-5b44q725e5]  th,
.legal-doc__body[b-5b44q725e5]  td {
    border: 1px solid var(--color-border);
    padding: 8px 10px;
    text-align: left;
    vertical-align: top;
    line-height: 1.55;
    color: var(--color-text);
}

.legal-doc__body[b-5b44q725e5]  th {
    background: var(--color-surface-alt);
    font-weight: 600;
}

/* 갱신 이력 등 작은 보조 메모 */
.legal-doc__body[b-5b44q725e5]  .legal-note {
    color: var(--color-text-muted);
    font-size: 0.82rem;
    line-height: 1.6;
    margin-top: 20px;
    padding-top: 14px;
    border-top: 1px solid var(--color-border);
}

/* ============================================================================
   모바일 — breakpoint 43.75em (≈ 700px). 폭·폰트만 압축.
   ========================================================================== */
@media (max-width: 43.75em) {

    .legal-doc[b-5b44q725e5] {
        padding: 18px 16px 30px;
    }

    .legal-doc__title[b-5b44q725e5] {
        font-size: 1.4rem;
    }

    .legal-doc__lead[b-5b44q725e5] {
        font-size: 0.9rem;
    }

    .legal-doc__body[b-5b44q725e5]  h2 {
        font-size: 1.06rem;
        margin: 24px 0 8px;
    }

    .legal-doc__body[b-5b44q725e5]  p,
    .legal-doc__body[b-5b44q725e5]  li {
        font-size: 0.9rem;
    }

    .legal-doc__body[b-5b44q725e5]  table {
        font-size: 0.82rem;
    }

    .legal-doc__body[b-5b44q725e5]  th,
    .legal-doc__body[b-5b44q725e5]  td {
        padding: 6px 8px;
    }
}