/*
Theme Name: TheGem Elementor Child
Description: Multi-Purpose Wordpress Theme
Author: Codex Themes.
Template: thegem-elementor
Version: 1.0
License: GNU General Public License
*/

/* 기존 포트폴리오 썸네일 설정 유지 */
.portfolio-thumbnail {
  width: 500px;
  height: 750px;
  overflow: hidden;
}
.portfolio-thumbnail img {
  width: 100%;
  height: auto;
  object-fit: none;
  object-position: top;
}

/* ================================================== */
/* [최종] 그림자 완전 박멸 & 버튼 삭제 & 타이틀 확대 */
/* ================================================== */

/* 1. 그리드 박스 기본 설정 */
.multi-device-grid .product-inner,
.multi-device-grid .portfolio-item-inner {
    overflow: visible !important; 
    padding-bottom: 30px !important;
    box-shadow: none !important; /* 박스 자체 그림자 제거 */
}

/* 이미지를 감싸는 박스 */
.mockup-done {
    position: relative !important;
    display: block !important;
    min-height: 300px !important;
    z-index: 1;
    margin-bottom: 20px !important;
    box-shadow: none !important; /* 혹시 모를 그림자 제거 */
}

/* 작업 완료 시 원본 이미지 숨김 */
.mockup-done > img,
.mockup-done picture img {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* 2. 목업 디자인 (PC) - 그림자 강제 제거 */
.device-mockups {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none; z-index: 5;
    filter: none !important; /* 필터 그림자 제거 */
}
.mockup-screen {
    width: 100%; height: 100%;
    background-image: var(--pf-img-url);
    background-size: cover;
    background-position: top center;
    display: block;
    box-shadow: none !important;
}

/* PC 목업 스타일 */
.pc-mockup {
    position: absolute;
    width: 86%; height: 80%;
    top: 0; left: 50%; transform: translateX(-50%);
    background: #000; border-radius: 10px;
    padding: 1.5% 1.5% 4% 1.5%;
    
    /* ▼ [핵심] 그림자 관련 모든 속성 제거 */
    box-shadow: none !important; 
    -webkit-box-shadow: none !important;
    filter: none !important;
    
    border: 1px solid #ddd; 
}
.pc-mockup .mockup-screen { border-radius: 4px; background-color: #fff; }
.pc-mockup::before {
    content:''; position:absolute; top:5px; left:50%; transform:translateX(-50%);
    width:30px; height:3px; background:#333; border-radius:5px;
    box-shadow: none !important;
}

/* 3. 목업 디자인 (모바일) - 그림자 강제 제거 */
.mobile-mockup {
    position: absolute;
    width: 26%; height: 38%;
    bottom: 60px; right: 0px;
    background: #000; border-radius: 14px;
    padding: 1.2%; 
    
    /* ▼ [핵심] 그림자 관련 모든 속성 제거 */
    box-shadow: none !important;
    -webkit-box-shadow: none !important;
    filter: none !important;
    
    border: 1px solid #ddd;
    z-index: 10;
}
.mobile-mockup .mockup-screen { border-radius: 10px; background-color: #fff; }
.mobile-mockup::before { 
    content:''; position:absolute; top:4px; left:50%; transform:translateX(-50%);
    width:40%; height:3px; background:#333; border-radius:0 0 4px 4px;
    box-shadow: none !important;
}

/* 4. ★ [핵심] 포트폴리오 버튼 및 글자 완전 삭제 */
.multi-device-grid .gem-button-container,
.multi-device-grid .gem-button,
.multi-device-grid .portfolio-read-more,
.multi-device-grid .product-bottom,
.multi-device-grid a.button {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* 5. 타이틀 글자 디자인 (확대 & 위치 상향) */
.multi-device-grid .product-info, 
.multi-device-grid .caption {
    display: block !important; opacity: 1 !important;
    position: relative; z-index: 5;
    transform: translateY(-15px);
    text-align: center;
    margin-top: 0 !important;
    padding-top: 0 !important;
}

.multi-device-grid .product-title,
.multi-device-grid .product-title a, 
.multi-device-grid h4, .multi-device-grid h5 {
    font-size: 26.4px !important; /* 20% 확대 */
    font-weight: 800 !important;
    color: #111 !important; margin-top: 0 !important;
    line-height: 1.4 !important;
}

/* 상세 페이지용 추가 설정 (그림자 제거 포함) */
.single-product-mockup .mockup-done { min-height: 550px !important; }
.single-product-mockup .pc-mockup { 
    width: 94% !important; height: 85% !important;
    box-shadow: none !important; 
    filter: none !important;
}
.single-product-mockup .mobile-mockup { 
    width: 24% !important; height: 40% !important; bottom: 40px !important; 
    box-shadow: none !important;
    filter: none !important;
}
/* ================================================== */
/* [추가] Products Grid 우측 버튼 이미지 목업 방지 */
/* (클릭 불가능한 버튼들을 위한 강제 예외 처리) */
/* ================================================== */

/* 1. 홈페이지 보기 / 모바일 보기 버튼 이미지가 반응형 목업으로 변하는 것 방지 */
.multi-device-grid .gem-button-container img,
.multi-device-grid .gem-button img,
.multi-device-grid a.button img,
.multi-device-grid .product-bottom img {
    /* 목업 생성 방지턱과 동일한 효과를 줌 */
    pointer-events: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
    display: inline-block !important;
    box-shadow: none !important;
    border: none !important;
}

/* 2. (가장 중요) 자바스크립트가 이 이미지들을 건드리지 못하게 하는 '표식' 역할 */
/* 이 부분은 CSS만으로는 JS 동작을 막을 수 없으므로, 
   아래의 HTML 위젯 코드 수정을 통해 해결해야 합니다. */
   /* ================================================== */
/* [강력 적용] 버튼 이미지는 절대 목업화 금지 */
/* ================================================== */

/* 리스트 내부의 모든 링크(a태그) 안의 이미지 중, 
   제품 이미지가 아닌 것들은 강제로 초기화 */

.multi-device-grid a:not(.product-image):not(.portfolio-image) img,
.multi-device-grid .gem-button img,
.multi-device-grid .product-bottom img {
    /* 목업 스타일 강제 해제 */
    opacity: 1 !important;
    visibility: visible !important;
    width: auto !important;
    height: auto !important;
    position: static !important;
    display: inline-block !important;
    box-shadow: none !important;
    border: none !important;
    background: transparent !important;
    border-radius: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
}
/* ================================================
   마우스/터치 클릭 시 포커스 사각형 완전 차단
   - :focus:not(:focus-visible) = 마우스 클릭 포커스만 선택
   - 키보드 Tab 접근성은 자동 유지됨
   ================================================ */
*:focus:not(:focus-visible) {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
    -webkit-tap-highlight-color: transparent !important;
}

/* TheGem 테마 메뉴/슬라이더 명시적 추가 */
.sf-menu a:focus:not(:focus-visible),
.sf-menu li:focus:not(:focus-visible),
.thegem-menu-navigation a:focus:not(:focus-visible),
.swiper-slide:focus:not(:focus-visible),
.swiper-wrapper:focus:not(:focus-visible),
.slick-slide:focus:not(:focus-visible),
header a:focus:not(:focus-visible),
header button:focus:not(:focus-visible),
.custom-lang-container .lang-select:focus:not(:focus-visible) {
    outline: none !important;
    box-shadow: none !important;
}

/* ============================================================
   부모 테마 Highlight 검은 사각형 포커스 링 완전 재정의
   - 부모의 a:focus-visible / button:focus-visible 보다
     !important 를 사용해 강제로 덮어씀
   ============================================================ */
a:focus-visible,
a:focus,
button:focus-visible,
button:focus,
[tabindex]:focus-visible,
[tabindex]:focus {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

/* ── Elementor 4.x 전용: 컨테이너·위젯·슬라이더 포커스 링 제거 ── */
/* Elementor 4.x 는 .e-con, .elementor-section 등에 tabindex 를 자동 추가함 */
.elementor-section:focus,
.elementor-section:focus-visible,
.e-con:focus,
.e-con:focus-visible,
.e-con-inner:focus,
.e-con-inner:focus-visible,
.elementor-widget-wrap:focus,
.elementor-widget-wrap:focus-visible,
.elementor-widget-container:focus,
.elementor-widget-container:focus-visible,
.elementor-element:focus,
.elementor-element:focus-visible,
.elementor-widget:focus,
.elementor-widget:focus-visible,

/* Elementor 슬라이더 / 갤러리 / 이미지 캐러셀 */
.elementor-slides-wrapper:focus,
.swiper-container:focus,
.swiper-wrapper:focus,
.swiper-slide:focus,
.elementor-image-carousel-wrapper:focus,
.slick-slider:focus,
.slick-list:focus,
.slick-track:focus,
.slick-slide:focus,

/* Elementor 메뉴 (Nav Menu 위젯) */
.elementor-nav-menu:focus,
.elementor-nav-menu--main:focus,
.elementor-nav-menu--dropdown:focus,

/* TheGem + Elementor 헤더 */
#site-header:focus,
.header-main:focus,
.header-main *:focus:not(input):not(textarea):not(select),

/* 기타 포커스 가능 래퍼 */
[class*="elementor-"]:focus:not(input):not(textarea):not(select):not(button):not(a) {
    outline: none !important;
    outline-offset: 0 !important;
    box-shadow: none !important;
}

/* ── 키보드 Tab 사용 시에만 포커스 표시 (접근성 유지) ── */
/* JS 가 body.keyboard-user 클래스를 추가하면 파란 링 표시 */
body.keyboard-user a:focus,
body.keyboard-user button:focus,
body.keyboard-user [tabindex]:focus,
body.keyboard-user *:focus-visible {
    outline: 2px solid #1e8fff !important;
    outline-offset: 2px !important;
}