/* ==========================================================================
   Owl Helpbar Widget Stylesheet
   Version: 1.9.1 (Phase 19.1: FOUC Seamless Handover & CSSOM Armor Edition)
   SSoT v14.0.0 Compliant

   [Architecture Log]
   - Theme Bleeding Lock: .owl-helpbar-widget-wrapper 내부 요소 강제 초기화 및 isolation 적용.
   - CSS Variable SSoT: 컨트롤러가 주입한 --hb-* 변수들에 100% 통제권을 양도하여 라이브 프리뷰 최적화.
   - Pointer Events Tunneling: wrapper 자체는 none으로 하여 빈 공간 클릭을 투과시키고 내부 요소만 auto 처리.
   
   🚨 [Optimization 1.9.1 - Phase 19.1 SSoT Patch: FOUC Seamless Handover]
   - [Smooth Unlock] PHP에서 주입된 0ms FOUC 방어막(opacity: 0)이 JS 런타임의 `.owl-ready` 클래스 부여로 
     해제되는 시점에, 레이아웃이 튕기는 현상을 막고 부드럽게 시야에 들어오도록 `opacity` 트랜지션을 결속했습니다.

   🚨 [Optimization 1.8.0 - Native Sticky CSSOM Purge]
   - [CSSOM Decoupling] 엘리멘터 네이티브 스티키에 제어권을 100% 이양하기 위해, 위젯 자체적으로 탑재하고 있던 `.is-sticky-mode` 
     선택자와 관련된 `position: sticky`, `z-index` 하드코딩, `transform: translateZ(0)` 강제 하드웨어 가속 락을 영구 소각(Purge)했습니다.
     이로써 브라우저 렌더링 파이프라인이 정화되고 스크롤 쟁크(Jank) 발생 리스크가 0%로 소멸되었습니다.

   🚨 [Optimization 1.7.0 - Legacy Patch]
   - Inline Grid Liberty: 모바일 네비게이션 탭(`nav.m-row-2`)에 하드코딩되어 반응형 정렬을 방해하던 `grid-template-columns` 인라인 족쇄를 완전히 적출하여, CSS Flexbox가 100% 통제권을 발휘하도록 해방시켰습니다.
   - Fluid Baseline Sync: 모바일 상단 1행(`.m-row-1`)의 매물번호, 조회수 아이콘, 상태 텍스트의 폰트 사이즈가 달라도 수직/수평 칼각이 유지되도록 1em 기반의 영점 조절 클래스를 SSoT로 통합 결속했습니다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   [0] Global Scroll Mutex Lock Utility
   -------------------------------------------------------------------------- */
/* 🚨 JS 스크롤 애니메이션과 네이티브 테마(CSS) 스무스 스크롤 간의 데드락 방어막 */
html.owl-scroll-behavior-auto,
body.owl-scroll-behavior-auto {
    scroll-behavior: auto !important;
}

/* --------------------------------------------------------------------------
   [1] Base Wrapper & Isolation Reset
   -------------------------------------------------------------------------- */
.owl-helpbar-widget-wrapper {
    width: 100%;
    position: relative;
    box-sizing: border-box;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    
    /* 🎯 테마 간섭 방어 및 렌더링 최적화 스태킹 컨텍스트 생성 */
    isolation: isolate;
    
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    
    /* 클릭 시 텍스트 선택 등 방해 요소 제거 */
    -webkit-tap-highlight-color: transparent;
    
    /* 🚨 스티키 영역 밖 빈 공간에서 유저의 클릭을 방해하지 않도록 터널링 */
    pointer-events: none; 
}

/* 🚨 Editor Lockout Shield 
   에디터 환경에서는 편집이 가능하도록 투명 터널링을 차단하고 100% 마우스 조작을 허용합니다. */
body.elementor-editor-active .owl-helpbar-widget-wrapper {
    pointer-events: auto !important;
}

/* 외부 테마의 마진/패딩 침범 원천 차단 */
.owl-helpbar-widget-wrapper * {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
    pointer-events: auto; /* 자식(실제 UI)들은 클릭 가능하도록 복구 */
}

.owl-helpbar-widget-wrapper a {
    text-decoration: none !important;
    outline: none !important;
    color: inherit;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent;
}

/* --------------------------------------------------------------------------
   [2] Animation Engine (Dynamic Ripple / Pulse)
   -------------------------------------------------------------------------- */
@keyframes owlHbRipple {
    0% { transform: scale(1); opacity: 0.8; }
    /* 🎯 PHP 컨트롤러 변수에 다이렉트 맵핑 (극한의 자유도) */
    100% { transform: scale(var(--hb-pulse-scale, 3.5)); opacity: 0; }
}

.owl-helpbar-widget-wrapper .status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    
    /* 🚨 Stacking Context Lock: 맥박 레이어 침강 방지 */
    position: relative;
    z-index: 1;
    
    flex-shrink: 0;
    /* 상태 컬러 변수는 부모에서 주입 */
    background-color: var(--hb-status-color, #198754);
}

/* 맥박(Pulse) 효과용 가상 레이어 */
.owl-helpbar-widget-wrapper .status-dot:not(.static-dot)::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: inherit; /* 부모 색상 상속 */
    /* 🎯 진행 속도 제어권 CSS 변수 양도 */
    animation: owlHbRipple var(--hb-pulse-duration, 2s) cubic-bezier(0.215, 0.61, 0.355, 1) infinite;
    z-index: -1;
}

/* 🚨 상태별 변수 맵핑 (안전망 Fallback 추가 결속 완료) */
.owl-helpbar-widget-wrapper .is-active { --hb-status-color: var(--hb-pulse-active, #198754); }
.owl-helpbar-widget-wrapper .is-sold { --hb-status-color: var(--hb-pulse-sold, #dc3545); }
.owl-helpbar-widget-wrapper .is-hold { --hb-status-color: #888888; } 
.owl-helpbar-widget-wrapper .is-contract { --hb-status-color: #f0ad4e; } 

/* 정적 닷 */
.owl-helpbar-widget-wrapper .static-dot::after {
    animation: none !important;
    display: none !important;
}

/* --------------------------------------------------------------------------
   [3] Desktop (PC) Island Layout
   -------------------------------------------------------------------------- */
.owl-helpbar-pc {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    max-width: var(--hb-pc-max-width, 1000px);
    margin: 0 auto;
    
    background-color: var(--hb-pc-bg, #ffffff);
    /* border 및 box-shadow는 Elementor 제어기에서 주입 */
    border-radius: var(--hb-pc-radius, 500px); 
    padding: 8px;
    
    /* 🚨 [Phase 19.1] Handover Transition Lock */
    opacity: 1; 
    transition: opacity 0.4s ease, transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
}

@media (hover: hover) {
    .owl-helpbar-pc:hover {
        transform: translateY(-2px);
    }
}

.pid-badge-pc {
    background-color: var(--hb-pid-bg, #C5A065);
    color: var(--hb-pid-text, #ffffff);
    height: 44px;
    padding: 0 24px;
    border-radius: var(--hb-pc-radius, 500px);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: -0.02em;
    flex-shrink: 0;
    font-family: 'Roboto Mono', 'Pretendard', sans-serif;
    line-height: 1;
    box-shadow: inset 0 -2px 0 rgba(0,0,0,0.1);
}

.hb-nav-pc {
    flex-grow: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.hb-nav-pc::-webkit-scrollbar { display: none; }

.nav-link-pc {
    font-size: 14px;
    font-weight: 600;
    color: var(--hb-nav-color, #666666);
    padding: 12px 18px;
    transition: all 0.2s ease;
    position: relative;
    cursor: pointer;
    white-space: nowrap;
    display: flex;
    align-items: center;
    border-radius: 50px;
    line-height: 1;
    flex-shrink: 0; /* 압축 방지 */
}

.nav-link-pc:hover {
    color: var(--hb-nav-active-text, #1A2B3C);
    background-color: rgba(0,0,0,0.03);
}

.nav-link-pc.active {
    color: var(--hb-nav-active-text, #1A2B3C);
    font-weight: 800;
}

/* CSS Var 매핑을 통한 Indicator 제어 */
.nav-link-pc::after {
    content: '';
    position: absolute;
    bottom: 4px;
    left: 50%;
    transform: translateX(-50%) scaleX(0);
    
    /* 🎯 Elementor Slider Control 수신 바인딩 */
    width: var(--hb-nav-indicator-width, 20px);
    height: var(--hb-nav-indicator-height, 3px);
    border-radius: var(--hb-nav-indicator-radius, 2px);
    background-color: var(--hb-nav-indicator, #C5A065);
    
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform-origin: center;
}

.nav-link-pc.active::after {
    transform: translateX(-50%) scaleX(1);
}

.consult-status-pc {
    padding-right: 20px;
    padding-left: 10px;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

/* 1em Fluid Baseline Flexbox 락(Lock) 체결 (PC) */
.hb-views-pc {
    display: flex;
    align-items: center;
    gap: 4px; /* SVG 인라인 마진 대체 */
    color: var(--hb-views-icon, #888888);
    font-size: 14px;
    line-height: 1; 
}
.hb-views-pc .views-text {
    color: var(--hb-views-text, #1A2B3C);
    font-weight: 700;
    font-family: 'Roboto Mono', 'Pretendard', sans-serif;
    line-height: 1;
    padding-top: 1px; /* 폰트 고유 베이스라인 영점 보정 */
}

/* SVG Deep Shield: 떡짐 방지 및 정밀 라인아트(stroke) 100% 복원 락 체결 */
.hb-views-icon {
    width: 1.1em;
    height: 1.1em;
    display: block;
    flex-shrink: 0;
}

/* 외부 테마가 svg 내부의 자식 태그까지 침투하여 색을 칠하는 최악의 상황 원천 방어 */
.hb-views-icon path,
.hb-views-icon circle {
    fill: none !important; /* 하위 태그 떡짐 완전 차단 */
    stroke: currentColor !important; /* 정밀 라인아트 수호 */
}

.hb-divider-pc {
    width: 1px;
    height: 14px;
    background-color: #e0e0e0;
}

.hb-status-wrap-pc {
    display: flex;
    align-items: center;
    gap: 8px;
    line-height: 1;
}
.hb-status-wrap-pc .status-text {
    font-weight: 800;
    font-size: 13px;
    color: var(--hb-status-text, #1A2B3C);
    white-space: nowrap;
    line-height: 1;
    padding-top: 1px;
}

/* --------------------------------------------------------------------------
   [4] Mobile (Tablet/Phone) 2-Row Layout
   -------------------------------------------------------------------------- */
.owl-helpbar-mobile {
    display: none; 
    width: 100%;
    max-width: var(--hb-mo-max-width, 450px);
    margin: 0 auto;
    background-color: var(--hb-mo-bg, #ffffff);
    border-radius: var(--hb-mo-radius, 24px);
    overflow: hidden; 
    
    /* 🚨 [Phase 19.1] Handover Transition Lock */
    opacity: 1;
    transition: opacity 0.4s ease;
}

.m-row-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 20px;
    background-color: var(--hb-mo-info-bg, #fafafa);
    border-bottom: 1px solid var(--hb-mo-divider, #f0f0f0);
}

.m-info-left {
    flex: 1;
    min-width: 0; 
    display: flex;
    align-items: center;
}

.pid-text-m {
    font-size: 11px;
    font-weight: 800;
    color: #888888;
    letter-spacing: 0.05em;
    font-family: 'Roboto Mono', 'Pretendard', sans-serif;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1;
}
.pid-number-m {
    color: var(--hb-pid-mo-text, #1A2B3C);
    margin-left: 4px;
}

.m-info-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

/* 1em Fluid Baseline Flexbox 락(Lock) 체결 (Mobile) */
.hb-views-m {
    display: flex;
    align-items: center;
    gap: 4px; /* SVG 인라인 마진 대체 */
    color: var(--hb-views-icon, #888888);
    font-size: 13px;
    line-height: 1;
}
.hb-views-m .views-text {
    color: var(--hb-views-text, #1A2B3C);
    font-weight: 700;
    font-family: 'Roboto Mono', 'Pretendard', sans-serif;
    line-height: 1;
    padding-top: 1px;
}

.hb-divider-m {
    width: 1px;
    height: 12px;
    background-color: #d1d1d1;
}

.hb-status-wrap-m {
    display: flex;
    align-items: center;
    gap: 6px;
    line-height: 1;
}
.hb-status-wrap-m .status-text {
    font-size: 12px;
    font-weight: 800;
    color: var(--hb-status-text, #1A2B3C);
    line-height: 1;
    padding-top: 1px;
}

/* Extreme Flexibility: Flexbox Scroll-X Engine */
.m-row-2 {
    display: flex !important; /* PHP 인라인 Grid 속성 강제 무력화 */
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch; /* iOS 스크롤 관성 최적화 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
    padding: 10px 8px;
    gap: 8px !important;
}
.m-row-2::-webkit-scrollbar {
    display: none; /* Chrome, Safari */
}

.nav-item-m {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 4px;
    border-radius: 12px;
    transition: background-color 0.2s ease;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    
    /* 탭 찌그러짐 원천 방어 (극한의 자유도 수용) */
    flex: 0 0 auto;
    min-width: 65px; /* 터치 영역 최소치 보장 */
}

.nav-item-m:active {
    background-color: rgba(0,0,0,0.05);
}

/* 1em Fluid Icon 스케일링 엔진 */
.nav-icon-m {
    width: 36px;
    height: 36px;
    background-color: var(--hb-nav-icon-bg, #f8f9fa);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--hb-nav-color, #666666);
    border: 1px solid transparent;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 아이콘 비율 수호 방어막 */
.nav-icon-m svg, 
.nav-icon-m i, 
.nav-icon-m .hb-fallback-icon {
    width: 1.1em !important;
    height: 1.1em !important;
    display: block;
    fill: currentColor;
    flex-shrink: 0;
}

.nav-text-m {
    font-size: 11px;
    font-weight: 600;
    color: var(--hb-nav-color, #666666);
    transition: color 0.2s ease, font-weight 0.2s ease;
    text-align: center;
    white-space: nowrap;
    line-height: 1;
}

/* 모바일 Active 상태 (ScrollSpy) */
.nav-item-m.active .nav-icon-m {
    background-color: var(--hb-nav-active-icon-bg, #1A2B3C);
    color: var(--hb-nav-active-icon, #ffffff);
    border-color: var(--hb-nav-active-icon-bg, #1A2B3C);
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.15);
}

.nav-item-m.active .nav-text-m {
    color: var(--hb-nav-active-text, #1A2B3C);
    font-weight: 800;
}

/* --------------------------------------------------------------------------
   [5] Responsive Switching Logic (Media Query)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .owl-helpbar-pc {
        display: none !important;
    }
    .owl-helpbar-mobile {
        display: block !important;
    }
}