@charset "UTF-8";

/* 홈 > 정책 설정 > 아이디 보안 > 클라우드 애플리케이션 > 연동 설정 */

/* sticky 작동을 위해 overflow 제거 */
.container:has(.zts-link-app_container) {
    overflow: visible !important;
}

.zts-link-app_section {
    display: flex;
    flex-direction: column;
    gap: 24px;
    background-color: #fff;
    box-shadow: none;
    padding: 0;
    box-sizing: border-box;
}
.zts-link-app_section_header {
    width: 100%;    
    display: flex;
    position: relative;
    flex-direction: row;
    gap: 18px;
    align-items: flex-start;
}

/* 기본 상태의 헤더 레이아웃 */
.zts-header-controls {
    display: flex;
    flex-direction: row;
    gap: 18px;
    flex: 1;
}

/* 수정 - input에 직접 적용 */
.zts-link-app_section .search_area {
    width: 277px;
}

.zts-link-app_section .search_area input.text_box_gray {
    box-shadow: 0px 1px 15px 0px rgba(197, 197, 197, 0.25);
}
.zts-link-app_section_header .zts-app_add_btn_default {
    margin-left: auto;
}

/* 디테일 뷰 상단 컨트롤 (앱 추가 + 필터 초기화) */
.zts-detail-top-controls {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
    margin-bottom: 8px;
}

/* 디테일 섹션이 열렸을 때의 헤더 레이아웃 */
.zts-link-app_section[style*="width: 318px"] .zts-link-app_section_header {
    flex-direction: column;
    gap: 12px;
}

.zts-link-app_section[style*="width: 318px"] .zts-app_add_btn_compact {
    display: block !important;
}

.zts-link-app_section[style*="width: 318px"] .zts-filter_reset_btn_compact {
    display: block;
}

.zts-link-app_section[style*="width: 318px"] .zts-app_add_btn_default {
    display: none !important;
}

.zts-link-app_section[style*="width: 318px"] .zts-filter_reset_btn_default {
    display: none !important;
}

.zts-link-app_section[style*="width: 318px"] .zts-header-controls {
    flex-direction: row;
    gap: 6px;
    width: 100%;
    align-items: center;
}

.zts-link-app_section[style*="width: 318px"] .search_area {
    flex: 1;
    max-width: 255px;
}

.zts-link-app_section[style*="width: 318px"] .zts-filter_btn {
    flex-shrink: 0;
}

/* 필터 버튼 인디케이터 (빨간 동그라미) */
.zts-filter {
    position: relative;
}

.zts-filter-indicator {
    position: absolute;
    bottom: 5px;
    right: 5px;
    display: inline-block;
    z-index: 1;
}

.zts-filter-indicator svg {
    display: block;
}

.zts-link-app_section_content_header {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.app_list_count {
    color: #AAA;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
}

.app_list_sort {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: 4px;
    color: #AAA;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    margin-left: auto;
    padding: 3px 8px;
    border-radius: 5px;
    transition: 0.3s;
}

.app_list_sort img {
    width: 13px;
    height: 12px;
}

.app_list_sort:hover {
    background-color: #EFEFEF;
}

/* 컨테이너 레이아웃 */
.zts-link-app_container {
    display: flex;
    width: 100%;
    gap: 20px;
    position: relative;
}

/* 앱 리스트 섹션 */
.zts-link-app_section {
    width: 100%;
    padding: 22px 28px;
    transition: width 0.4s ease, padding 0.4s ease, visibility 0.5s, opacity 0.1s;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 40px 0 rgba(197, 197, 197, 0.25);
    position: relative;
    align-self: flex-start;
}

/* 디테일 섹션이 열렸을 때 패딩 변경 */
.zts-link-app_section[style*="width: 318px"] {
    padding: 25px 17px;
}

/* 버튼 영역 - 섹션 내부에 있지만 컨테이너 기준으로 위치 지정 */
.zts-link-app_section .zts-left_content_slide_btn_area {
    position: absolute;
    right: -10px;
    top: 0;
    z-index: 10;
    pointer-events: auto;
    display: flex;
    align-items: flex-start;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease 0.1s, visibility 0s linear 0.1s;
}

/* 버튼이 표시될 때 */
.zts-link-app_section[style*="width: 318px"] .zts-left_content_slide_btn_area {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease 0.1s, visibility 0s linear 0s;
}

/* 섹션이 숨겨져도 버튼은 보이도록 (다른 policy_set_list와 동일한 동작) */
/* visibility: hidden이 부모에 적용되어도 자식이 보이도록 처리 */
.zts-link-app_section.left_content_hide .zts-left_content_slide_btn_area {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    /* 섹션이 숨겨질 때 버튼 위치 조정 (섹션이 1px이므로 왼쪽 끝에 위치) */
    right: auto;
    left: -10px;
}

/* 버튼이 컨테이너에 있을 때 (섹션이 숨겨진 상태) */
.zts-link-app_container > .zts-left_content_slide_btn_area {
    position: absolute;
    left: 0;
    top: 0;
    right: auto;
    z-index: 10;
    pointer-events: auto;
    opacity: 1;
    visibility: visible;
}

/* 숨기기 토글 버튼 영역 */
.zts-link-app_container {
    position: relative;
}

.zts-left_content_slide_btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-left: -20px;
    margin-top: 13px;
    position: relative;
    transition: left 0.4s;
}

.zts-left_content_slide_btn .tooltip_type04 {
    position: absolute;
    top: 35px;
    left: 50%;
    transform: translateX(-50%);
    display: none;
    white-space: nowrap;
}

.zts-left_content_slide_btn:hover .tooltip_type04 {
    display: block;
}

.zts-left_content_slide_btn img {
    width: 100%;
    height: 100%;
    transition: transform 0.3s;
}

.zts-left_content_slide_btn.left_content_hide {
    margin-left: -24px;
}

.zts-left_content_slide_btn.left_content_hide img {
    transform: rotate(180deg);
}

.zts-left_content_slide_btn.left_content_hide::after {
    position: absolute;
    top: -10px;
    left: 10px;
    content: '';
    display: block;
    width: 1px;
    height: calc(100vh - 310px);
    background-color: #EAEAEA;
    z-index: -1;
}

/* zts-link-app_section 숨김 상태 */
.zts-link-app_section.left_content_hide {
    width: 1px !important;
    visibility: hidden;
    opacity: 0;
    transition: visibility 0.5s, width 0.5s, opacity 0.1s;
    padding: 0;
    overflow: hidden;
}

/* zts-link-app_section이 숨겨졌을 때 detail_section 확장 */
.zts-link-app_container:has(.zts-link-app_section.left_content_hide) .zts-link-app_detail_section {
    width: 100% !important;
}

/* 앱 카드 그리드 레이아웃 - 기본 상태 (100% 너비) */
.zts-link-app_section_content_body {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 16px;
}

/* 앱 카드 스타일 */
.zts-link-app_section_content_body .zts-item {
    background: #fff;
    border: 1px solid #EDEDEB;
    border-radius: 8px;
    padding: 13px;
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
    height: 130px;
    box-sizing: border-box;
}

/* 디테일 섹션이 열렸을 때 (318px 너비) */
.zts-link-app_section[style*="width: 318px"] .zts-link-app_section_content_body {
    grid-template-columns: 1fr;
}

.zts-link-app_section[style*="width: 318px"] .zts-link-app_section_content_body .zts-item {
    max-width: 100%;
}

.zts-link-app_section_content_body .zts-item:hover {
    background: #f7f7f7;
}


.zts-link-app_section_content_body .zts-item.checked {
    border: 1px solid transparent;
    background: #F2F9FE;
}

/* 상태 배지 */
.zts-status-badge {
    display: inline-block;
    padding: 3px 9px;
    font-size: 11px;
    font-style: normal;
    font-weight: 600;
    line-height: 17px;
    border-radius: 5px;
    height: 22px;
    width: fit-content;
}

.zts-status-badge.on {
    background: rgba(33, 150, 243, 0.1);
    color: #2196F3;
}

.zts-status-badge.off {
    background: rgba(158, 158, 158, 0.1);
    color: #9E9E9E;
}

.zts-app_card_category {
    display: inline-block;
    color: #5C656E;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: 150%;
    letter-spacing: -0.03em;
}

/* 상단 row - 배지/카테고리와 삭제 버튼 */
.zts-top-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

.zts-badge-category-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
}

.zts-app_delete_btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    transition: background-color 0.2s ease;
}

.zts-app_delete_btn img {
    width: 16px;
    height: 16px;
}

.zts-app_delete_btn:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.zts-application-memo {
    color: #AAA;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    line-height: 150%; /* 18px */
    margin: 0;
    max-width: 230px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 사용자 연동 수 (우측 하단) */
.zts-user-count {
    position: absolute;
    bottom: 13px;
    right: 13px;
    display: flex;
    align-items: center;
    gap: 4px;
    color: #5C656E;
    font-size: 12px;
    text-decoration: none;
    pointer-events: none;
    cursor: default;
}

.zts-user-count .icon {
    width: 12px;
    height: 12px;
}

.zts-user-count .num {
    font-weight: 500;
}

/* 로고와 제목 영역 */
.zts-logo-nam-flex {
    display: flex;
    align-items: center;
    gap: 8px;
}

.zts-logo {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
}

.zts-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}


.zts-logo {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  border: 1px solid #e5e5e5;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.zts-logo img {
  width: 100%;
}
.zts-app-title-area {
    flex: 1;
    min-width: 0;
}

.zts-app-title {
    color: #222;
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 앱이 없을 때 메시지 */
.zts-no_apps_message {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 200px;
    color: #999;
    font-size: 14px;
    background: #F9F9F9;
    border-radius: 10px;
    border: 1px dashed #AAA;
    text-align: center;
    padding: 20px;
    opacity: 0.8;
}

.zts-no_apps_message_content {
    padding-top: 16px;
    color: #555;
    text-align: center;
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
    line-height: 28px;
}
/* 앱 상세 섹션 */
.zts-link-app_detail_section {
    width: 70%;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 40px 0 rgba(197, 197, 197, 0.25);
    padding: 24px;
    transition: all 0.3s ease;
    align-self: flex-start;
    position: relative;
    /* top: 20px; */
}

.zts-link-app_detail_header {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #E0E0E0;
    position: relative;
}

/* 헤더 상단 - 로고, 타이틀, 카테고리를 가로 배치 */
.zts-detail_header_top {
    display: flex;
    align-items: center;
    gap: 12px;
}

.zts-detail_logo {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.zts-detail_logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.zts-detail_text_wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.zts-detail_title {
    color: #222;
    font-family: Pretendard;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%; /* 33px */
    margin: 0;
}

.zts-detail_category {
    color: #AAA;
    font-size: 13px;
    font-weight: 400;
}

.zts-detail_memo {
    padding: 0;
}

.zts-detail_memo p {
    color: #666;
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.zts-detail_status_domain {
    display: flex;
    align-items: center;
    gap: 12px;
}

.zts-detail_domain {
    color: #666;
    font-size: 13px;
    font-weight: 400;
    word-wrap: break-word;
    overflow-wrap: break-word;
    min-width: 0;
    flex: 1;
}

.zts-detail_footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.zts-detail_date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #666;
}

.zts-detail_date .label {
    font-weight: 500;
}

.zts-detail_date .value {
    color: #999;
}

.zts-detail_close_btn_wrapper {
    position: absolute;
    top: -45px;
    right: -38px;
}

.zts-detail_close_btn {
    background: none;
    border: none;
    font-size: 18px;
    color: #999;
    cursor: pointer;
    padding: 8px;
    border-radius: 4px;
    transition: all 0.4s ease;
}
.zts-close_btn {
    width: 25px;
}

/* SSO 개발 중 메시지 스타일 */
.zts-link-app_detail_sso_developing {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 300px;
    padding: 40px 20px;
}

.zts-link-app_detail_sso_developing p {
    font-size: 16px;
    color: #999;
    text-align: center;
}

/* 팝업 스타일 */
/* 팝업 기본 */
/* popup_app_filter 팝업 전용 스타일 */
.config_popup[name="popup_app_filter"] {
    width: 400px;
    height: auto;
    background: #fff;
    border-radius: 8px;
    box-shadow: 0 0 25px rgba(0, 0, 0, 0.1);
}

/* 타이틀 전용 */
.config_popup[name="popup_app_filter"] .popup_title {
    color: #878787;
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
    line-height: 150%;
    padding: 14px;
    margin: 0;
    text-align: left;
}

.config_popup[name="popup_app_filter"] .popup_divider {
    width: 100%;
    height: 1px;
    background: #EDEDEB;
    }

.config_popup[name="popup_app_filter"] .popup_content {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 14px 0px 14px;
}

.config_popup[name="popup_app_filter"] .popup_content_linked_status {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.config_popup[name="popup_app_filter"] .popup_content_header_title {
    color: #222;
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 600;
}

/* 카테고리 체크박스 영역 */
.config_popup[name="popup_app_filter"] .popup_content_category_status {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.config_popup[name="popup_app_filter"] .category_checkbox_all {
    color: #878787;
    font-family: Pretendard;
    font-size: 12px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%; /* 18px */
}

.config_popup[name="popup_app_filter"] .category_checkbox_label {
    color: #878787;
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 500;
    line-height: normal; /* 21px */
    word-break: break-word;
    overflow-wrap: break-word;
    display: block;
}

.config_popup[name="popup_app_filter"] .popup_content_category_header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.config_popup[name="popup_app_filter"] .popup_content_category_list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    padding-bottom: 20px;
}

.config_popup[name="popup_app_filter"] .category_checkbox_column {
    display: flex;
    flex-direction: column;
    gap: 13px;
}

.config_popup[name="popup_app_filter"] .category_checkbox_column > div {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.config_popup[name="popup_app_filter"] .category_checkbox_item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

.config_popup[name="popup_app_filter"] .category_checkbox_item input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
}

.config_popup[name="popup_app_filter"] .category_checkbox_item label {
    display: flex;
    align-items: flex-start;
    flex: 1;
    min-width: 0;
    cursor: pointer;
}

.config_popup[name="popup_zts_add_application_cloud"] {
    width: 500px;
}
.config_popup[name="popup_zts_add_application_cloud"] .table_wrap, .config_popup[name="popup_zts_add_application_cloud"] .item_table, .config_popup[name="popup_zts_add_application_cloud"] .outer_table {
    min-width: 100%;
}

.config_popup[name="popup_zts_add_application_cloud"] .app_info_cell {
    display: flex;
    gap: 6px;
}


.config_popup[name="popup_zts_add_application_cloud"] .zts-logo {
    width: 25px;
    height: 25px;
}


.config_popup[name="popup_zts_add_application_cloud"] .item_table .outer_table > tbody > tr > td:nth-child(1) {
    padding-left: 10px !important;
}


.config_popup[name="popup_inhouse_application"] .list_select > ul {
    margin-top: 35px;
}

.config_popup[name="popup_zts_add_application_cloud"] .popup_contents_title {
    margin-bottom: 0px;
}

.config_popup[name="popup_zts_add_application_cloud"] .popup_contents_search {
    margin: 15px 0px 5px 0px !important;
}

.config_popup[name="popup_zts_add_application_cloud"] .empty_data {
    text-align: center !important;
}
  



/* IP 예외 추가 옵션 아이템 */
.config_popup[name="popup_excluding_ips_add_option"] .ip-exception-option-item,
.config_popup[name="popup_zts_add_application"] .ip-exception-option-item {
    border: 1px solid #DDDDDD;
    border-radius: 8px;
    padding: 10px 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
  }
  
  .config_popup[name="popup_excluding_ips_add_option"] .ip-exception-option-item:hover,
  .config_popup[name="popup_zts_add_application"] .ip-exception-option-item:hover {
    background-color: #F8F8F8;
    border-color: #CCCCCC;
  }
  
/* 옵션 텍스트 영역 */
.config_popup[name="popup_excluding_ips_add_option"] .ip-exception-option-item .option-content,
.config_popup[name="popup_zts_add_application"] .ip-exception-option-item .option-content {
  flex: 1;
}

/* 옵션 제목 */
.config_popup[name="popup_excluding_ips_add_option"] .ip-exception-option-item .option-title,
.config_popup[name="popup_zts_add_application"] .ip-exception-option-item .option-title {
  font-weight: normal;
  font-size: 16px;
  color: #222222;
}

/* 옵션 설명 */
.config_popup[name="popup_excluding_ips_add_option"] .ip-exception-option-item .option-description,
.config_popup[name="popup_zts_add_application"] .ip-exception-option-item .option-description {
  font-weight: 300;
  font-size: 14px;
  color: #555555;
}

.option-arrow {
    width: 20px;
}

/* 프로그레스바 */
.progress-user_status {
    appearance: none;
    height: 35px;
  }
  
.progress-user_status::-webkit-progress-bar {
    border: 1px solid #DDD;
    background: #FAFAFA;
    border-radius: 5px;
    height: 35px;
    overflow: hidden;
}

.progress-user_status::-webkit-progress-value {
    background: #2196F3;
    height: 35px;
    transition: width 1s ease; /* 너비에 대한 애니메이션 효과 */
}
.user_link_status {
    position: relative;
}
.user_link_status .search_area  {
    position: relative;
    top: 0;
    right: 0;
    margin-left: auto;
}
.user_link_status .detail_search {
    position: relative !important;
    top: 0 !important;
    right: 0 !important;
} 
.user_link_status .title-sub_wrap {
    display: none;
}

.user_link_status .area_selectbar {
    margin-bottom: 18px;
}

.user_link_status .area_selectbar .between {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
}

.user_link_status .area_selectbar .form_select {
    display: flex;
    align-items: center;
    gap: 12px;
    flex: 0 0 auto;
    padding-right: 0;
}

.user_link_status .area_selectbar .form_select .selectlist {
    flex: 0 0 auto;
}

/* table1.php에서 렌더링되는 검색창 숨기기 */
.user_link_status .area_head .board_search_area {
    display: none !important;
}

.user_link_status .area_head .board_search_area .search_area {
    display: none !important;
}

/* setbox1의 between 내 검색창 우측 배치 */
.user_link_status .area_selectbar .between .search_area {
    margin-left: auto;
    margin-right: 0;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.user_link_status .progress_wrap {
    margin: 20px 0;
    font-size: 14px;
  }

.user_link_progress_container {
    display: flex;
    align-items: center;
    gap: 60px;
}

.user_link_progress_bar {
    flex: 1;
    margin-bottom: 0;
}

.user_link_progress_bar progress {
    width: 100%;
}

.user_link_legend {
    display: flex;
    align-items: center;
    flex-direction: column;
    width: 200px;
    margin-right: 20px;
}

.user_link_legend_item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

.user_link_legend_label {
    display: flex;
    align-items: center;
    gap: 5px;
    }

.user_link_legend_dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.user_link_legend_dot.active {
    background-color: #2196F3;
}

.user_link_legend_dot.available {
    background-color: #FAFAFA;
    border: 1px solid #DDD;
}

.zts-loding_box {
    height: 200px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.zts-link-app_detail_content_sdk pre[class*="language-"]:focus {
    outline: none !important;
}

/* 보안 설정 팝업 */
.config_popup[name="popup_id_operating_option"] .popup_device_title_wrapper {
    margin-bottom: 10px;
}

.config_popup[name="popup_id_operating_option"] .popup_device_title {
    margin-left: 5px;
    color: #333;
    text-align: left;
    font-family: Pretendard;
    font-size: 15px;
    font-style: normal;
    font-weight: 600;
}

.config_popup[name="popup_id_operating_option"] .popup_device_description {
    margin-left: 5px;
    color: #5C656E;
    font-family: Pretendard;
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

.config_popup[name="popup_ip_option"] .item_table {
    overflow-x: visible !important;
}

.config_popup[name="popup_ip_option"] .item_table th:first-child {
    padding-left: 20px !important;
}

.ul-appList,
th[name='app_type'] .menu_list ul {
    max-height: 300px;
    overflow-y: auto;
}

/* 반응형 디자인 */
@media (max-width: 1200px) {
    .zts-link-app_section_content_body {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
    
    .zts-link-app_detail_section {
        width: 45%;
    }
}

/* 하위 애플리케이션 오버레이 (Jira 등) */
.zts-sub-app-overlay {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 153px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.70);
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
}

.zts-sub-app-overlay-message {
    color: #fff;
    font-family: Pretendard;
    font-size: 16px;
    font-style: normal;
    font-weight: 500;
    line-height: 1.6;
    text-align: center;
    padding: 20px 40px;
    max-width: 80%;
}

@media (max-width: 768px) {
    .zts-link-app_container {
        flex-direction: column;
    }
    
    .zts-link-app_section_content_body {
        grid-template-columns: 1fr;
    }
    
    .zts-link-app_detail_section {
        width: 100%;
    }
    
    .zts-link-app_section {
        width: 100% !important;
    }
}