/**
 * ZINPACK Grid System v6.2.0
 * CSS Grid 12컬럼 - Page Builder(GridStack) 완벽 연동
 *
 * GridStack 좌표 체계 (12컬럼):
 * - x: 0-11 (컬럼 위치)
 * - y: 0-N (행 위치)
 * - w: 1-12 (컬럼 span)
 * - h: 1-N (행 span)
 *
 * CSS Grid 변환:
 * - grid-column: (x+1) / (x+1+w)
 * - grid-row: (y+1) / (y+1+h)
 */

/* ========================================
   컨테이너: 12컬럼 그리드 (PC)
   ======================================== */
.zp-grid,
#main-grid,
.section-grid {
    display: grid !important;
    grid-template-columns: repeat(12, 1fr) !important;
    grid-auto-rows: minmax(72px, auto) !important;
    grid-auto-flow: row dense !important;  /* 위치 없는 위젯은 자동 배치 */
    gap: 15px !important;
    width: 100% !important;
    max-width: 1400px !important;
    margin: 0 auto !important;
    padding: 20px !important;
    box-sizing: border-box !important;
}

/* grid-sizer 숨김 (Masonry 잔재) */
.zp-grid .grid-sizer,
.zp-grid > .clearfix {
    display: none !important;
}

/* ========================================
   아이템 기본 스타일
   ======================================== */
.zp-widget {
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
    width: 100% !important;
    min-height: 0 !important;
}

/* ========================================
   모바일 (~767px): 1컬럼
   ======================================== */
@media (max-width: 767.98px) {
    .zp-grid,
    #main-grid {
        grid-template-columns: 1fr !important;
    }
    
    .zp-widget {
        grid-column: span 1 !important;
        grid-row: auto !important;  /* 모바일에서 행 span 무시 */
    }
}

/* ========================================
   태블릿 (768px ~ 991px): 2컬럼
   ======================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
    .zp-grid,
    #main-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    /* 3컬럼 → 2컬럼 조정 */
    .zp-widget.w-3,
    .zp-widget.w-4 {
        grid-column: span 1 !important;
    }
    
    .zp-widget.w-1,
    .zp-widget.w-2 {
        grid-column: span 2 !important;
    }
}

/* ========================================
   PC (992px+): 3컬럼 (기본)
   - 인라인 스타일이 우선 적용됨
   - 아래는 fallback 용도
   ======================================== */
@media (min-width: 992px) {
    /* 1/3 너비 */
    .zp-widget.w-3,
    .zp-widget.w-4 {
        grid-column: span 1;
    }
    
    /* 2/3 너비 */
    .zp-widget.w-2 {
        grid-column: span 2;
    }
    
    /* 전체 너비 */
    .zp-widget.w-1 {
        grid-column: span 3;
    }
}

/* ========================================
   디버그 모드
   ======================================== */
.zp-grid--debug .zp-widget,
.zp-widget--debug {
    outline: 2px dashed red;
    outline-offset: -2px;
}

.zp-grid--debug .zp-widget::before {
    content: attr(class);
    position: absolute;
    top: 0;
    left: 0;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    font-size: 10px;
    padding: 2px 4px;
    z-index: 9999;
    pointer-events: none;
}

/* ========================================
   위젯 기본 스타일 (v6.2.0)
   ======================================== */
.zp-widget {
    /* background: #fff; */
    /* border-radius: 8px; */
    padding: 15px;
    /* box-shadow: 0 2px 4px rgba(0,0,0,0.1); */
    overflow: visible;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.zp-widget:hover {
    /* box-shadow: 0 4px 8px rgba(0,0,0,0.15); */
    /* transform: translateY(-2px); */
}


/* 위젯 내부 .box (vendor.css의 #ccc 배경 제거) */
.zp-widget .box {
    background-color: transparent;
}

/* 위젯 내부 컨텐츠 */
.zp-widget > * {
    max-width: 100%;
}

/* 반응형 개선 - 태블릿 (768-991px) */
@media (max-width: 991px) and (min-width: 768px) {
    .zp-grid {
        grid-template-columns: repeat(6, 1fr) !important;
        gap: 12px;
    }

    .zp-widget {
        /* 태블릿에서는 그리드 위치를 자동으로 조정 */
        grid-column: span 3 !important;
    }
}

/* 반응형 개선 - 모바일 (767px 이하) */
@media (max-width: 767px) {
    .zp-grid {
        grid-template-columns: 1fr !important;
        gap: 10px;
        padding: 10px;
    }

    .zp-widget {
        /* 모바일에서는 전체 너비로 표시 */
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
    }
}

/* 위젯 타입별 스타일 */
.zp-widget[data-widget-id] {
    position: relative;
}

/* 출판 위젯 특별 스타일 (31-42) */
.zp-widget[data-widget-id^="3"]:not([data-widget-id^="30"]),
.zp-widget[data-widget-id^="4"]:not([data-widget-id^="43"]) {
    /* background: #f8f9fa; */
    /* border: 1px solid #dee2e6; */
}

/* 확장 위젯 스타일 (43-999) */
.zp-widget[data-widget-id^="1"]:not([data-widget-id^="10"]),
.zp-widget[data-widget-id^="2"],
.zp-widget[data-widget-id^="5"],
.zp-widget[data-widget-id^="6"],
.zp-widget[data-widget-id^="7"],
.zp-widget[data-widget-id^="8"],
.zp-widget[data-widget-id^="9"] {
    /* background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%); */
}

/* Page Builder 위젯 스타일 (1000+) */
.zp-widget[data-widget-id^="10"],
.zp-widget[data-widget-id^="11"],
.zp-widget[data-widget-id^="12"] {
    /* border: 2px solid #e3e7ef; */
    /* background: #ffffff; */
}

/* ========================================
   동적 섹션 시스템 (v3.4.0)
   ======================================== */

/* 프론트 섹션 기본 스타일 */
.front-section {
    position: relative;
    width: 100%;
    box-sizing: border-box;
    grid-column: 1 / -1;  /* outer .zp-grid의 grid item일 때 full row 차지 (PC 깨짐 수정) */
}

/* 섹션 오버레이 (배경 이미지 위) */
.front-section .section-overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 0;
}

/* 섹션 그리드 컨테이너 */
.section-grid {
    position: relative;
    z-index: 1;
}

/* 섹션 내부 컨텐츠 */
.front-section .zp-grid {
    position: relative;
    z-index: 1;
}

/* 섹션 내 위젯 스타일 유지 */
.front-section .zp-widget {
    /* 기존 위젯 스타일 상속 */
}

/* 반응형 섹션 패딩 */
@media (max-width: 768px) {
    .front-section {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* 모바일에서 섹션 여백 축소 */
    .front-section[style*="padding-top"] {
        padding-top: calc(var(--padding-top, 80px) * 0.5) !important;
    }

    .front-section[style*="padding-bottom"] {
        padding-bottom: calc(var(--padding-bottom, 80px) * 0.5) !important;
    }
}

/* 태블릿 */
@media (min-width: 769px) and (max-width: 1024px) {
    .front-section {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    /* 태블릿에서 섹션 여백 75% */
    .front-section[style*="padding-top"] {
        padding-top: calc(var(--padding-top, 80px) * 0.75) !important;
    }

    .front-section[style*="padding-bottom"] {
        padding-bottom: calc(var(--padding-bottom, 80px) * 0.75) !important;
    }
}

/* 데스크톱 */
@media (min-width: 1025px) {
    .front-section {
        /* 데스크톱에서는 인라인 스타일 그대로 사용 */
    }
}

/* 섹션 배경 이미지 최적화 */
.front-section[style*="background-image"] {
    background-attachment: scroll; /* 모바일 성능 */
}

@media (min-width: 1025px) {
    .front-section[style*="background-image"] {
        background-attachment: fixed; /* 데스크톱 페럴랙스 효과 */
    }
}

/* 섹션 전환 애니메이션 (선택적) */
.front-section {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
}

.front-section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* 즉시 표시 (JS 없을 때 대비) */
.no-js .front-section {
    opacity: 1;
    transform: translateY(0);
}

/* 섹션 디버그 모드 (개발용) */
body.debug-sections .front-section {
    outline: 2px dashed rgba(255, 0, 0, 0.3);
    outline-offset: -2px;
}

body.debug-sections .front-section::before {
    content: attr(data-section-key);
    position: absolute;
    top: 10px;
    left: 10px;
    background: rgba(255, 0, 0, 0.8);
    color: white;
    padding: 4px 8px;
    font-size: 12px;
    font-weight: bold;
    z-index: 9999;
    border-radius: 4px;
}

/* ========================================
   list/scrap 위젯(.masonry-item.w-N) → grid 셀 폭 채움
   - .zp-widget { width:100% !important }과 동일 취지: span 셀을 꽉 채움
   - .zp-grid 하위 한정 → .zp-grid 밖(.masonry 컨테이너 등)의 .masonry-item 무영향
   ======================================== */
.zp-grid .masonry-item {
    width: 100% !important;
    min-width: 0;
    justify-self: stretch;
}

/* ========================================
   list/scrap 위젯(.masonry-item.w-N) → grid-column span 매핑
   - .zp-grid 하위 한정: .zp-grid 밖(.masonry 컨테이너 등)의 .masonry-item에는 무영향
   - main 좌표 위젯(.zp-widget)은 인라인 grid-column / zp-legacy-reset이 처리하므로 여기서는 list/scrap의 .masonry-item만 보강
   ======================================== */

/* PC (992px+): 12컬럼 기준 w-N → span N (기존 zp-widget 데스크톱 fallback과 동일하게 !important 미사용) */
@media (min-width: 992px) {
    .zp-grid .masonry-item.w-1  { grid-column: span 1; }
    .zp-grid .masonry-item.w-2  { grid-column: span 2; }
    .zp-grid .masonry-item.w-3  { grid-column: span 3; }
    .zp-grid .masonry-item.w-4  { grid-column: span 4; }
    .zp-grid .masonry-item.w-5  { grid-column: span 5; }
    .zp-grid .masonry-item.w-6  { grid-column: span 6; }
    .zp-grid .masonry-item.w-7  { grid-column: span 7; }
    .zp-grid .masonry-item.w-8  { grid-column: span 8; }
    .zp-grid .masonry-item.w-9  { grid-column: span 9; }
    .zp-grid .masonry-item.w-10 { grid-column: span 10; }
    .zp-grid .masonry-item.w-11 { grid-column: span 11; }
    .zp-grid .masonry-item.w-12 { grid-column: span 12; }
    .zp-grid .masonry-item.w-full { grid-column: span 12; }
}

/* 태블릿 (768~991.98px, 6컬럼): 12컬럼 span의 절반(비율 유지). 기존 태블릿 규칙과 동일하게 !important 사용 */
@media (min-width: 768px) and (max-width: 991.98px) {
    .zp-grid .masonry-item.w-1  { grid-column: span 1 !important; }
    .zp-grid .masonry-item.w-2  { grid-column: span 1 !important; }
    .zp-grid .masonry-item.w-3  { grid-column: span 2 !important; }
    .zp-grid .masonry-item.w-4  { grid-column: span 2 !important; }
    .zp-grid .masonry-item.w-5  { grid-column: span 3 !important; }
    .zp-grid .masonry-item.w-6  { grid-column: span 3 !important; }
    .zp-grid .masonry-item.w-7  { grid-column: span 4 !important; }
    .zp-grid .masonry-item.w-8  { grid-column: span 4 !important; }
    .zp-grid .masonry-item.w-9  { grid-column: span 5 !important; }
    .zp-grid .masonry-item.w-10 { grid-column: span 5 !important; }
    .zp-grid .masonry-item.w-11 { grid-column: span 6 !important; }
    .zp-grid .masonry-item.w-12 { grid-column: span 6 !important; }
    .zp-grid .masonry-item.w-full { grid-column: span 6 !important; }
}
/* 모바일(≤767px)은 .zp-grid가 1컬럼(grid-template-columns:1fr)이라 .masonry-item이 자동 전폭 → 별도 규칙 불필요 */