/* ==========================================================================
   Owl Property Details Widget Stylesheet
   Version: 1.3.0
   SSoT v13.2.0 Compliant

   [Architecture Log]
   - Grid System: 2-Column CSS Grid (1fr 1fr) for Desktop, 1-Column for Mobile.
   - Box-Tab Header: Introduced .owl-spec-tab-box aligned flush with the bottom border for true Tab UI.
   - Absolute Inset Divider: Replaced %-based width with absolute left/right inset (px) to guarantee pixel-perfect intersections.
   - Smart Sibling Logic: Identifies Basic Info (1st item full-width) vs Detail Info to perfectly draw center vertical lines using ~ and :nth-child.
   - Fluid Bullet: em-based responsive sizing with absolute Y-axis offset for perfect 1st-line alignment on multi-line texts.
   
   [Optimization Log - Turn 4]
   - Box-Tab Architecture Sync: Applied the exact linear-gradient and inset shadow SSoT standards to .owl-spec-tab-box fallback CSS.
   - 1em Fluid Engine: Implemented inline-flex and 0.4em gap on .spec-title for fluid scaling.
   - Icon Sharpness & Proportions: Removed fixed translation and added 1em sizing with flex-shrink:0 on icons to bind perfectly with text size.
   - Header Spacing: Removed !important from spec-header padding-bottom to unlock Elementor control.
   - Unit Toggle Alignment: Updated align-self to flex-end and margin-bottom to 8px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   [1] Base Wrapper & Variables
   -------------------------------------------------------------------------- */
.owl-pd-wrapper {
    /* [Fallbacks] PHP Elementor 컨트롤 부재 시 적용될 기본값 */
    --pd-section-gap: 40px;
    --pd-cell-padding: 14px 15px;
    --pd-label-width: 35%;
    
    /* Divider Variables (Absolute Inset 적용) */
    --pd-hline-color: #eeeeee;
    --pd-hline-inset: 15px; /* 양 끝단 절대 여백 픽셀 */
    --pd-hline-thickness: 1px;
    
    --pd-vline-color: #eeeeee;
    --pd-vline-height: 60%;
    --pd-vline-thickness: 1px;

    /* Bullet Variables */
    --pd-bullet-color: #C5A065;
    --pd-bullet-size: 0.35em;
    --pd-bullet-gap: 0.6em;
    --pd-bullet-offset-y: 0.7em;
    --pd-bullet-rotate: 45deg;
    --pd-bullet-radius: 0%;
    
    width: 100%;
    position: relative;
    box-sizing: border-box;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
    color: #111111;
    
    /* 테마 간섭 방어 및 렌더링 최적화 */
    isolation: isolate;
    transform: translateZ(0); 
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.owl-pd-wrapper * {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
}

.owl-pd-wrapper button {
    background: transparent;
    border: none;
    cursor: pointer;
    font-family: inherit;
    outline: none !important;
    box-shadow: none;
    appearance: none;
    -webkit-appearance: none;
    color: inherit;
}

/* --------------------------------------------------------------------------
   [2] Section & Header Styles (Box-Tab Architecture)
   -------------------------------------------------------------------------- */
.owl-pd-wrapper .owl-spec-section {
    margin-bottom: var(--pd-section-gap);
    position: relative;
    display: flex;
    flex-direction: column;
}

.owl-pd-wrapper .owl-spec-section:last-child {
    margin-bottom: 0;
}

.owl-pd-wrapper .spec-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end; /* 탭 박스가 하단선과 맞물리도록 정렬 */
    /* 🎯 [Turn 4] PHP 컨트롤러의 패딩 제어 권한 개방을 위해 하드코딩 패딩 삭제 */
    border-bottom: 1px solid #e0e0e0; /* Fallback for header_border_color */
}

/* 🎯 [Turn 4] 입체 탭(Tab) 아키텍처 및 SSoT Fallback 주입 */
.owl-pd-wrapper .owl-spec-tab-box {
    display: inline-flex;
    align-items: center;
    position: relative;
    bottom: -1px; /* 1px 내려서 부모의 border-bottom을 덮어 탭 형태를 완성 */
    z-index: 10;
    
    /* Box-Tab UI Fallback (헤더 위젯과 100% 동일한 기본값) */
    background: linear-gradient(to bottom, #ffffff, #f9fafb);
    border: 1px solid #eaecf0;
    border-bottom-color: transparent; 
    box-shadow: inset 0 3px 0 0 #C5A065, 0 -2px 5px rgba(0,0,0,0.03);
    border-radius: 6px 6px 0 0;
    padding: 12px 16px;
}

.owl-pd-wrapper .spec-title {
    /* 🎯 [Turn 4] 1em Fluid Engine */
    display: inline-flex;
    align-items: center;
    gap: 0.4em; /* px 대신 em 사용으로 폰트 크기 비례 팽창 */
    font-size: 18px;
    font-weight: 700;
    line-height: 1;
    color: #1A2B3C;
}

.owl-pd-wrapper .owl-spec-tab-text {
    line-height: 1;
    padding-top: 1px; /* 수직 시각적 영점 보정 */
}

/* 🎯 [Turn 4] 1em Fluid 아이콘 스케일링 엔진 */
.owl-pd-wrapper .spec-title i,
.owl-pd-wrapper .spec-title svg {
    display: block;
    width: 1em;
    height: 1em;
    font-size: inherit; /* 부모(텍스트) 폰트 크기에 완벽 동기화 */
    flex-shrink: 0;     /* 텍스트 래핑 시 찌그러짐 방지 */
    color: #C5A065;     /* Fallback for icon_color */
    fill: currentColor;
}

/* --------------------------------------------------------------------------
   [3] Unit Toggle Button
   -------------------------------------------------------------------------- */
.owl-pd-wrapper .btn-unit-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #ffffff;
    border: 1px solid #d1d1d1;
    border-radius: 4px;
    padding: 6px 10px;
    cursor: pointer;
    gap: 4px;
    transition: all 0.2s ease;
    text-decoration: none;
    font-size: 12px;
    font-weight: 500;
    color: #555555;
    line-height: 1;
    align-self: flex-end; /* 🎯 [Turn 4] 탭 박스 높이 변화에 무관하게 하단 정렬 */
    margin-bottom: 8px; /* 🎯 [Turn 4] 탭 라인 기준 안착 여백 */
    position: relative;
    z-index: 10;
}

.owl-pd-wrapper .btn-unit-toggle:hover {
    background-color: #f8f9fa;
}

.owl-pd-wrapper .unit-text {
    line-height: 1;
    padding-top: 1px;
}

.owl-pd-wrapper .unit-icon-box {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1em;
    transform: translateY(-1px);
}

/* --------------------------------------------------------------------------
   [4] Grid System & Spec Items
   -------------------------------------------------------------------------- */
.owl-pd-wrapper .spec-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    gap: 0; 
    /* 🎯 최상단 가로선(border-top) 철거 - 시안과 동일한 개방감 확보 */
    border-top: none;
    border-bottom: none;
}

.owl-pd-wrapper .spec-item {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--pd-cell-padding);
    position: relative;
    min-height: 48px;
    min-width: 0;
}

.owl-pd-wrapper .spec-item.full-width {
    grid-column: 1 / -1;
}

/* 더미 셀: 짝수 밸런스와 테두리 보존을 위해 존재하며 텍스트는 보이지 않음 */
.owl-pd-wrapper .spec-item.dummy-cell {
    pointer-events: none;
    visibility: hidden; 
}
.owl-pd-wrapper .spec-item.dummy-cell * {
    display: none;
}

/* --------------------------------------------------------------------------
   [5] Floating Border Engine (Absolute Inset 기하학적 렌더링)
   -------------------------------------------------------------------------- */

/* ----- 5-1. 세로 구분선 (Vertical Floating Divider) ----- */
.owl-pd-wrapper .spec-item::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: var(--pd-vline-height, 60%);
    width: var(--pd-vline-thickness, 1px);
    background-color: var(--pd-vline-color, #eeeeee);
    display: none; /* 동적 노출 */
    z-index: 1;
}

@media (min-width: 769px) {
    /* 기본: 왼쪽 칸(홀수)의 우측에 세로선 표시 */
    .owl-pd-wrapper .spec-item:nth-child(odd)::before {
        display: block;
    }
    
    /* full-width 자체는 우측 선 제거 */
    .owl-pd-wrapper .spec-item.full-width::before {
        display: none !important;
    }

    /* 🚨 Index Shifting Defense (인덱스 밀림 현상 방어) */
    .owl-pd-wrapper .spec-item.full-width ~ .spec-item:nth-child(even)::before {
        display: block;
    }
    .owl-pd-wrapper .spec-item.full-width ~ .spec-item:nth-child(odd)::before {
        display: none;
    }
}


/* ----- 5-2. 가로 구분선 (Absolute Inset Divider) ----- */
.owl-pd-wrapper .spec-item::after {
    content: '';
    position: absolute;
    bottom: 0;
    
    /* 🎯 [Absolute Inset Engine] 비율(%)과 transform을 폐기하고 절대 이격 적용 */
    left: var(--pd-hline-inset, 15px);
    right: var(--pd-hline-inset, 15px);
    width: auto;
    transform: none; 
    
    height: var(--pd-hline-thickness, 1px);
    background-color: var(--pd-hline-color, #eeeeee);
    transition: left 0.3s ease, right 0.3s ease;
    z-index: 1;
}

/* ----- 5-3. 최하단 가로선 제거 로직 ----- */
@media (min-width: 769px) {
    /* PC 2열 기준 마지막 2개 아이템(좌/우) 하단선 제거 */
    .owl-pd-wrapper .spec-item:nth-last-child(1)::after,
    .owl-pd-wrapper .spec-item:nth-last-child(2)::after {
        display: none;
    }
    /* 만약 마지막 항목이 full-width 혼자라면 1개만 제거 */
    .owl-pd-wrapper .spec-item.full-width:last-child::after {
        display: none;
    }
}

/* --------------------------------------------------------------------------
   [6] Smart Bullet & Typography Engine
   -------------------------------------------------------------------------- */
/* 라벨 래퍼 (Label Wrap) - 너비 제어 */
.owl-pd-wrapper .label-wrap {
    flex: 0 0 var(--pd-label-width, 35%);
    width: var(--pd-label-width, 35%);
    position: relative;
    /* 불릿의 크기와 간격만큼 텍스트를 우측으로 밀어내어 공간 확보 */
    padding-left: calc(var(--pd-bullet-size, 0.35em) + var(--pd-bullet-gap, 0.6em));
    display: flex;
    align-items: flex-start;
}

/* 🎯 스마트 불릿 절대 정렬 엔진 (Fluid Typography) */
.owl-pd-wrapper .label-wrap::before {
    content: '';
    position: absolute;
    left: 0;
    /* 1번째 줄의 시각적 중앙을 타격하는 영점 조절 */
    top: var(--pd-bullet-offset-y, 0.7em); 
    transform: translateY(-50%) rotate(var(--pd-bullet-rotate, 45deg));
    width: var(--pd-bullet-size, 0.35em);
    height: var(--pd-bullet-size, 0.35em);
    background-color: var(--pd-bullet-color, #C5A065);
    border-radius: var(--pd-bullet-radius, 0%);
    flex-shrink: 0;
    transition: all 0.2s ease;
}

.owl-pd-wrapper .spec-item .label {
    font-size: 13px;
    font-weight: 500;
    color: #555555;
    line-height: 1.4;
    word-break: keep-all;
    width: 100%;
}

.owl-pd-wrapper .spec-item .label::before {
    display: none !important; /* 구버전 하드코딩 불릿 제거 방어코드 */
}

.owl-pd-wrapper .spec-item .value {
    flex: 1;
    min-width: 0;
    text-align: right;
    font-size: 14px;
    font-weight: 700;
    color: #1A2B3C;
    line-height: 1.4;
    word-break: keep-all;
    overflow-wrap: break-word;
    display: flex;
    justify-content: flex-end;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 4px;
}

/* 텍스트 뮤트 (면책 문구 및 마스킹) */
.owl-pd-wrapper .owl-mute-text {
    color: #999999;
    font-weight: 400;
    font-size: 0.95em;
    display: inline-block;
}

.owl-pd-wrapper .area-val {
    transition: opacity 0.2s ease;
    display: inline-block;
}

/* --------------------------------------------------------------------------
   [7] Mobile Responsive (Max 768px) - 강제 1열 전환 및 스마트 디펜스
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    .owl-pd-wrapper .spec-grid {
        grid-template-columns: 1fr; /* 1열로 강제 변환 */
    }

    .owl-pd-wrapper .spec-item {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    /* 모바일에서는 세로선 완벽 파기 */
    .owl-pd-wrapper .spec-item::before {
        display: none !important; 
    }

    /* 🎯 모바일 가로선: 관리자가 설정한 모바일용 --pd-hline-inset 변수를 그대로 따름 (100% 덮어쓰기 삭제) */
    .owl-pd-wrapper .spec-item::after {
        display: block !important; 
    }

    /* 1열이므로 맨 마지막 1개 아이템만 하단 선 제거 (PC 2열 로직 덮어쓰기) */
    .owl-pd-wrapper .spec-item:nth-last-child(2)::after {
        display: block !important; 
    }
    .owl-pd-wrapper .spec-item:last-child::after {
        display: none !important;
    }

    /* 모바일 1열에서는 짝수 보정용 더미 셀이 공간만 낭비하므로 완전 제거 */
    .owl-pd-wrapper .spec-item.dummy-cell {
        display: none !important;
    }

    /* 🚨 [차세대 방어코드] 마지막 요소가 숨겨진 더미 셀일 경우, 
       실제 시각적으로 마지막이 된 '앞 아이템'의 선을 :has()로 추적하여 완벽히 삭제 */
    .owl-pd-wrapper .spec-grid:has(> .dummy-cell:last-child) > .spec-item:nth-last-child(2)::after {
        display: none !important;
    }
}