@charset "utf-8";
/* asset/css/givia-tab-widget.css */

/* -------------------------------------------------------------------------- */
/* 위젯 기본 및 에디터 관련 스타일                                               */
/* -------------------------------------------------------------------------- */
.givia-tab-widget {
    margin: 10px 0; /* 위젯 자체의 외부 여백 */
}

/* 엘리멘터 에디터 프리뷰에서 최소 높이 등 (선택적) */
.elementor-editor-active .givia-tab-widget .givia-tabs-container { /* 앱스크립트 HTML의 최상위 컨테이너 */
    min-height: 50px;
    /* border: 1px dashed #ccc; */ /* 필요에 따라 주석 해제 */
    /* padding: 10px; */ /* 필요에 따라 주석 해제 */
}

/* -------------------------------------------------------------------------- */
/* 탭 구조 스타일 (모든 레벨 공통 또는 최상위 레벨 기본)                   */
/* -------------------------------------------------------------------------- */

/* 탭 전체 컨테이너 (모든 레벨) */
.givia-tab-widget .givia-tabs-container {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* 최상위 탭 컨테이너([data-level="0"])에만 하단 여백 추가 */
.givia-tab-widget .givia-tabs-container[data-level="0"] {
    margin-bottom: 20px;
}

/* 탭 버튼 네비게이션 영역 (모든 레벨) */
.givia-tab-widget .givia-tabs-nav {
    display: flex;
    width: 100%;
    position: relative; /* 테두리 겹침 처리 등을 위해 */
    /* flex-wrap은 PHP에서 제어합니다. (기본 nowrap 또는 pc 개수 설정 시 wrap) */
}

/* 개별 탭 버튼 (모든 레벨 기본 스타일) */
.givia-tab-widget .givia-tab-button {
    padding: 10px 5px;
    border-style: solid;
    border-width: 1px; /* 모든 면에 테두리 적용 후, 인접한 버튼과 겹치는 부분 처리 */
    border-color: var(--givia-tab-border-color, #bbb); /* CSS 변수 또는 고정값 */
    margin: 0 0 -1px -1px; /* 테두리 겹침 방지: 위쪽, 왼쪽으로 -1px 이동 */
    position: relative; /* z-index를 위해 */
    z-index: 2; /* 탭 내용보다 위에 오도록 */

    color: var(--givia-tab-default-text-color-custom, var(--e-global-color-text, #333333));
    background-color: var(--givia-tab-default-bg-color-custom, var(--e-global-color-secondary, #f0f0f0));

    border-radius: 0; /* 컨트롤로 설정 가능 */
    cursor: pointer;
    font-size: 16px; /* 기본 폰트 크기 조정 */
    line-height: 1.5; /* 버튼 내 텍스트 세로 정렬 개선 */
    text-align: center;
    box-sizing: border-box;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
    word-break: keep-all;
    white-space: nowrap;
    outline: none; /* 클릭 시 브라우저 기본 아웃라인 제거 */
    /* flex 값은 PHP에서 제어합니다. (기본 flex: 1 1 auto; 또는 개수 설정 시 flex-basis) */
}
/* 첫번째 버튼은 왼쪽 margin 조정 불필요 */
.givia-tab-widget .givia-tabs-nav .givia-tab-button:first-child {
    margin-left: 0;
}


/* 활성화된 탭 버튼 (모든 레벨 공통) */
.givia-tab-widget .givia-tab-button.active {
    color: var(--givia-tab-active-text-color-custom, #FFFFFF);
    background-color: var(--givia-tab-active-bg-color-custom, var(--e-global-color-primary, #007cba));
    font-weight: bold;
    border-color: var(--givia-tab-active-bg-color-custom, var(--e-global-color-primary, #007cba));
    border-bottom-color: transparent; /* 활성 탭의 아래쪽 테두리 제거 (내용과 연결되는 효과) */
    z-index: 3; /* 다른 비활성 버튼보다 위에 오도록 */
}

/* 탭 내용 영역 (모든 레벨 공통) */
.givia-tab-widget .givia-tab-content {
    display: none;
    padding: 20px;
    border:1px solid #bbb;
    /*border: 1px solid var(--givia-tab-content-border-color, var(--givia-tab-active-bg-color-custom, var(--e-global-color-primary, #007cba)));*/
    /* margin-top: -1px; */ /* 버튼과 내용 테두리 겹침은 버튼 active 시 border-bottom-color: transparent로 처리 */
    backgroud-color:#fff;
    /*background: var(--givia-tab-content-bg-color, #FFFFFF);*/
    clear: both; /* 혹시 모를 float 요소 대비 */
}

.givia-tab-widget .givia-tab-content.active {
    display: block;
}

/* 이미지 스타일 (모든 레벨 공통) */
.givia-tab-widget .givia-tabs-container picture,
.givia-tab-widget .givia-tabs-container img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

/* -------------------------------------------------------------------------- */
/* 자식 탭 (Nested Tabs) 특정 스타일                                            */
/* -------------------------------------------------------------------------- */
/* 자식 탭들을 감싸는 컨테이너 (앱스크립트에서 .child-tabs-container 클래스 추가 가정) */
.givia-tab-widget .givia-tabs-container.child-tabs-container {
    margin-top: 20px; /* 부모 탭 내용 안에서 자식 탭 그룹의 위쪽 여백 */
    margin-bottom: 0;
    padding: 15px; /* 자식 탭 그룹 전체를 감싸는 패딩 (선택적) */
    background-color: var(--givia-child-tabs-bg, #f9f9f9); /* 자식 탭 영역 배경 (선택적) */
    border: 1px solid var(--givia-child-tabs-border-color, #e0e0e0); /* 자식 탭 영역 테두리 (선택적) */
    border-radius: 4px; /* 자식 탭 영역 모서리 (선택적) */
}

/* 자식 탭 네비게이션 (앱스크립트에서 .child-tabs-nav 클래스 추가 가정) */
.givia-tab-widget .givia-tabs-nav.child-tabs-nav {
    /* 필요한 경우 자식 탭 네비게이션 바에 대한 추가 스타일 */
    /* 예: border-bottom: 1px solid #ccc; */
}

/* 자식 탭 버튼 (앱스크립트에서 .child-tab-button 클래스 추가 가정) */
.givia-tab-widget .givia-tab-button.child-tab-button {
    font-size: 14px; /* 자식 탭 버튼 폰트 크기 */
    padding: 8px 10px; /* 자식 탭 버튼 패딩 */
    /* 자식 탭 버튼에 대한 다른 색상/배경색 변수 사용 가능 (PHP 컨트롤 추가 필요) */
    /* 예: background-color: var(--givia-child-tab-default-bg-custom, #e9e9e9); */
    /* PHP에서 자식탭 개수 설정을 따로 하지 않는다면, 기본 flex 값으로 한 줄에 나오도록 설정 */
    flex: 1 1 auto;
}
.givia-tab-widget .givia-tabs-nav.child-tabs-nav .givia-tab-button.child-tab-button:first-child {
    margin-left: 0; /* 자식 탭의 첫 버튼도 왼쪽 margin 0 */
}


.givia-tab-widget .givia-tab-button.child-tab-button.active {
    /* 자식 탭 활성 버튼에 대한 다른 색상/배경색 변수 사용 가능 */
    /* 예: background-color: var(--givia-child-tab-active-bg-custom, #5cb85c); */
    border-bottom-color: transparent; /* 동일한 효과 적용 */
}

/* 자식 탭 내용 (앱스크립트에서 .child-tab-content 클래스 추가 가정) */
.givia-tab-widget .givia-tab-content.child-tab-content {
    padding: 15px; /* 자식 탭 내용 패딩 */
    /* 자식 탭 내용 영역에 대한 다른 테두리/배경색 변수 사용 가능 */
    /* 예: border-color: var(--givia-child-tab-content-border-custom, #d0d0d0); */
}


/* -------------------------------------------------------------------------- */
/* 미디어 쿼리 (모바일 레이아웃)                                                */
/* -------------------------------------------------------------------------- */
@media (max-width: 960px) {
    /* 최상위 탭 버튼 */
    .givia-tab-widget .givia-tabs-container[data-level="0"] > .givia-tabs-nav .givia-tab-button {
        font-size: 14px; /* 모바일에서 최상위 탭 버튼 폰트 */
        /* PHP에서 생성된 flex-basis가 우선 적용됩니다 (최상위 탭에 대한 컨트롤 값). */
    }

    /* 자식 탭 버튼 */
    .givia-tab-widget .givia-tab-button.child-tab-button {
        font-size: 13px; /* 모바일에서 자식 탭 버튼 폰트 */
        /* 자식 탭은 기본적으로 한 줄에 여러 개 나오도록 하거나, 별도 모바일 개수 컨트롤 필요 */
        /* 여기서는 flex: 1 1 auto; 에 의해 너비가 자동 조절될 것임 (여러 줄로 넘어갈 수 있음) */
        /* 만약 자식 탭도 모바일에서 개수 제어를 하고 싶다면 PHP에서 인라인 스타일 추가 필요 */
    }

    .givia-tab-widget .givia-tab-content { /* 모든 레벨의 탭 내용 */
        padding: 10px;
    }
}

/* -------------------------------------------------------------------------- */
/* 엘리멘터 패널 내 버튼 스타일 (givia-tab-admin.js 관련)                        */
/* -------------------------------------------------------------------------- */
.givia-tab-buttons {
    margin-bottom: 10px;
}

.givia-img-url-btn {
    cursor: pointer;
    transition: background-color 0.3s ease;
}
.givia-img-url-btn:hover {
    background-color: #005a87 !important;
}

.media-modal .givia-copy-urls-btn {
    margin-left: 10px;
}
.media-modal h2.media-frame-actions-heading.screen-reader-text + .external-image-filters {
    display: none;
}