/* ====================================================================
   #디자인 픽스: 버튼 규격 통일, 페이징 중앙정렬, 확실한 마진
   ==================================================================== */

body.is-tesla-page { overflow-x: hidden; background: #fff !important; }

/* ★ 1. 모든 버튼 통일 규격 (Unified Button) ★ */
.is-tesla-page .unified-btn, 
.is-tesla-page .j-search-wrap .btn {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    height: 40px !important; /* 높이 완벽 통일 */
    line-height: 1 !important;
    padding: 0 20px !important; /* 좌우 여백 통일 */
    font-size: 14px !important;
    font-weight: 600 !important;
    border-radius: 6px !important; /* 둥근 사각 통일 */
    box-sizing: border-box !important;
    transition: all 0.3s ease;
    cursor: pointer;
    text-decoration: none !important;
}

/* 2. 상단 컨트롤 패널 (마진 대폭 확장 및 인풋 규격 통일) */
.is-tesla-page .modern-control-panel {
    display: flex !important; justify-content: flex-end; align-items: center; 
    max-width: 1200px !important; 
    margin: 0 auto 50px auto !important; /* 갤러리와의 여백 50px로 확 늘림 */
    padding: 0 15px;
}
.is-tesla-page .j-search-wrap { margin: 0 !important; padding: 0 !important; }
.is-tesla-page .j-search-wrap form { display: flex; align-items: center; gap: 8px; margin:0; }

/* 검색창 인풋 규격을 버튼(40px)과 정확히 맞춤 */
.is-tesla-page .j-search-wrap select, 
.is-tesla-page .j-search-wrap input[type="text"] {
    height: 40px !important;
    box-sizing: border-box !important;
    border: 1px solid #ddd !important; 
    border-radius: 6px !important; 
    padding: 0 15px !important; 
    font-size: 14px !important; outline: none; background: #fff;
    transition: 0.3s;
}
.is-tesla-page .j-search-wrap input[type="text"]:focus { border-color: #00a2ff !important; box-shadow: 0 0 5px rgba(0,162,255,0.2) !important; }

/* 검색 버튼 디자인 */
.is-tesla-page .j-search-wrap .btn { background: #555 !important; color: #fff !important; border: none !important; }
.is-tesla-page .j-search-wrap .btn:hover { background: #333 !important; }
.is-tesla-page .j-search-wrap dl, .is-tesla-page .j-search-wrap dd { margin: 0 !important; padding: 0 !important; border:none !important; background: transparent !important; }

/* 토글(전체보기) 버튼 디자인 */
.is-tesla-page .toggle-btn { background: #fff !important; color: #00a2ff !important; border: 1px solid #00a2ff !important; margin-left: 8px; }
.is-tesla-page .toggle-btn:hover, .is-tesla-page .toggle-btn.active { background: #00a2ff !important; color: #fff !important; }

/* 3. 가로 슬라이더 모드 */
.is-tesla-page #j-gallery-wrap.gr-horizontal-mode {
    display: flex !important; overflow-x: auto !important; overflow-y: hidden !important; gap: 2vw !important; 
    width: 100vw !important; position: relative !important; left: 50% !important; right: 50% !important;
    margin-left: -50vw !important; margin-right: -50vw !important;
    padding: 10px 12.5vw 30px !important; 
    scroll-behavior: smooth; cursor: grab; 
    -ms-overflow-style: none; scrollbar-width: none; scroll-snap-type: x mandatory !important;
}
.is-tesla-page #j-gallery-wrap.gr-horizontal-mode.grabbing { cursor: grabbing; scroll-behavior: auto !important; scroll-snap-type: none !important; }
.is-tesla-page #j-gallery-wrap.gr-horizontal-mode::-webkit-scrollbar { display: none; }

/* 4. 갤러리 카드 */
.is-tesla-page .j-glist {
    position: relative; background: #f5f7fa !important; border-radius: 15px !important; 
    border: 1px solid rgba(0,0,0,0.05) !important; overflow: hidden; 
    box-shadow: 0 10px 20px rgba(0,0,0,0.05) !important; transition: transform 0.4s ease, box-shadow 0.4s ease;
    width: 100% !important; aspect-ratio: 16 / 9 !important;
}
.is-tesla-page #j-gallery-wrap.gr-horizontal-mode .j-glist {
    flex: 0 0 75vw !important; max-width: 1100px !important; margin: 0 !important; scroll-snap-align: center !important; 
    opacity: 0.5; transform: scale(0.95);
}
.is-tesla-page #j-gallery-wrap.gr-horizontal-mode .j-glist.focused {
    opacity: 1; transform: scale(1); box-shadow: 0 20px 40px rgba(0,0,0,0.1) !important;
}

/* 이미지 및 텍스트 */
.is-tesla-page .j-glt { width:100% !important; height:100% !important; margin:0 !important; }
.is-tesla-page .j-glt > a { display:block; width:100%; height:100%; position:relative; }
.is-tesla-page .j-glt > a > span { display: flex; align-items: center; justify-content: center; height:100%; overflow:hidden; border-radius: 15px; }

.is-tesla-page .j-glt > a > span > img { 
    width: 100% !important; height: 100% !important; max-width: none !important; 
    object-fit: cover !important; transition: transform 0.8s !important;
}
.is-tesla-page .j-glist:hover .j-glt > a > span > img { transform: scale(1.03) !important; }

/* 텍스트 그라데이션 */
.is-tesla-page .j-glt a strong {
    position: absolute !important; bottom: 0 !important; left: 0 !important; width: 100% !important;
    padding: 40px 20px 20px 20px !important; 
    background: linear-gradient(to top, rgba(0, 0, 0, 0.7) 0%, transparent 100%) !important; 
    color: #fff !important; font-size: 16px !important; font-weight: 600 !important; 
    line-height: 1.4 !important; z-index: 10 !important; word-break: keep-all !important; 
}


/* 5. 전체보기(Grid) 모드 */
@keyframes fadeUpGrid { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }

body.is-tesla-page.grid-active .container { max-width: 1200px !important; margin: 0 auto !important; padding: 0 !important; }

.is-tesla-page.grid-active #j-gallery-wrap.gr-grid-mode {
    display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; 
    padding: 0 !important; width: 100% !important; max-width: 1200px !important;
    margin: 0 auto !important; position: relative !important; left: auto !important; right: auto !important; transform: none !important;
}
.is-tesla-page.grid-active #j-gallery-wrap.gr-grid-mode .j-glist {
    opacity: 0; transform: scale(1); animation: fadeUpGrid 0.5s ease forwards;
}
.is-tesla-page.grid-active .j-glist:nth-child(n) { animation-delay: 0.1s; }


/* 6. 화살표 및 하단 컨트롤 버튼 */
.tesla-nav-btn {
    position: fixed; top: 50%; transform: translateY(-50%); width: 50px; height: 50px; 
    background: #fff !important; color: #00a2ff !important; border: 1px solid rgba(0, 162, 255, 0.2) !important; border-radius: 50%; font-size: 20px; cursor: pointer; z-index: 9999;
    display: flex; justify-content: center; align-items: center; box-shadow: 0 4px 10px rgba(0,0,0,0.1) !important; transition: 0.3s;
}
.tesla-nav-btn:hover { background: #00a2ff !important; color: #fff !important; }
.tesla-nav-left { left: 20px !important; } .tesla-nav-right { right: 20px !important; }

.tesla-indicators { 
    display: flex !important; justify-content: center; align-items: center; gap: 8px;
    margin: 10px auto 40px !important; padding: 10px 20px !important; background: rgba(245, 247, 250, 0.8) !important; border-radius: 30px !important; width: max-content;
}
.tesla-indicators .dot { width: 8px; height: 8px; border-radius: 50%; background: #ccc !important; transition: 0.3s; }
.tesla-indicators .dot.active { width: 25px; border-radius: 4px; background: #00a2ff !important; }
.is-tesla-page.grid-active .tesla-nav-btn, .is-tesla-page.grid-active .tesla-indicators { display: none !important; }


/* 7. 체크박스(관리자) 픽스 */
.is-tesla-page .j-gall-line, .is-tesla-page .tbl-no-data { display: none !important; }
.is-tesla-page #j-gallery-wrap.gr-horizontal-mode .admin-check-box { display: none !important; }
.is-tesla-page .j-gl-item:not(.admin-check-box) { display: none !important; }

.is-tesla-page.grid-active #j-gallery-wrap.gr-grid-mode .admin-check-box { 
    display: block !important; position: absolute; top: 15px; right: 15px; z-index: 20; 
}
.is-tesla-page.grid-active .admin-check-box dt, .is-tesla-page.grid-active .admin-check-box dd { 
    font-size: 0 !important; color: transparent !important; margin: 0; padding: 0; line-height: 0; 
}
.is-tesla-page.grid-active .admin-check-box input[type="checkbox"] {
    appearance: none; -webkit-appearance: none; position: relative; margin: 0;
    width: 26px; height: 26px; background: #fff; border: 2px solid #ccc; border-radius: 6px; 
    cursor: pointer; box-shadow: 0 2px 5px rgba(0,0,0,0.2); transition: 0.2s;
    display: flex !important; align-items: center !important; justify-content: center !important;
}
.is-tesla-page.grid-active .admin-check-box input[type="checkbox"]:checked { background: #00a2ff; border-color: #00a2ff; }
.is-tesla-page.grid-active .admin-check-box input[type="checkbox"]:checked::after {
    content: "✔"; color: #fff; font-size: 14px; font-weight: bold;
    display: block; line-height: 1; text-align: center; margin-top: 1px;
}

/* ★ 8. 페이징 시스템 통합 (Global Sync) ★ */

/* 슬라이더 모드일 때는 페이징을 숨깁니다 */
.is-tesla-page .gr-unified-paging-v2 { display: none !important; } 

/* 전체보기(Grid) 모드에서만 노출 */
.is-tesla-page.grid-active .gr-unified-paging-v2 { 
    display: flex !important; 
    justify-content: center !important;
}

/* 모바일 반응형 */
@media (max-width: 1024px) { 
    .is-tesla-page .modern-control-panel { justify-content: center; flex-wrap: wrap; gap: 10px; }
    .is-tesla-page.grid-active #j-gallery-wrap.gr-grid-mode { grid-template-columns: repeat(2, 1fr) !important; padding: 0 15px !important; } 
}
@media (max-width: 650px) { 
    .is-tesla-page.grid-active #j-gallery-wrap.gr-grid-mode { grid-template-columns: repeat(1, 1fr) !important; } 
}