/*UX/UI 가이드 라인*/

/*좌우 영역 넓이*/
#listPanel.is-collapsed { width: 0%; }
#listPanel:not(.is-collapsed) { width: 35%; } 


/*chip 스타일*/
.outputs-scope { display: flex; align-items: flex-start; gap: 6rem; }
.outputs-scope .attr-label { flex-shrink: 0; }

.outputs-scope .attr-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6rem;
}
.outputs-scope .attr-badge {
    display: inline-block;
    padding: 3rem 10rem;
    border-radius: 20rem;
    border: 0.5rem solid rgb(216, 219, 225);
    background: #fff;
    font-size: 12rem;
    line-height: 16rem;
    font-weight: 500;
    color: rgb(100 105 115);
    white-space: nowrap;
}



/**
 * @type page
 * @name page-datasvc, 자료서비스 간소화
 */
	
/* +++ 상단 +++ */
.datasvc-search-top .searchArea .button-display .btn,
.datasvc-search-top .searchArea .data-func .btn {
    padding: 0 12rem; 
    font-size: 13rem;
    white-space: nowrap;
}

/* 촬영기간, 촬영모드 영문일 경우 두줄로 나오게*/
.datasvc-search-top .form-name.lang-en {
	display: inline-block;
    max-width: 42rem;
    white-space: normal;
    word-break: keep-all;
    line-height: 1.3;
}

/* 검색구분(Search classification)만 폭을 더 넓게 */
.datasvc-search-top .form-name.lang-en.lang-en-wide {
    max-width: 85rem;
}

.datasvc-list-panel { transition: width 0.3s ease; }
.datasvc-detail-panel { transition: width 0.3s ease, flex 0.3s ease; }

/*+++ 좌측 +++*/
#listPanel {
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
#listPanel .list-panel-inner {
    display: flex;
    flex-direction: column;
    flex: 1;
    width: var(--list-inner-w, 100%);
    min-width: var(--list-inner-w, 100%);
}
#listPanel .datasvc-list.goods-display.module-a.style-b {
    display: flex;
    flex-direction: column;
    flex: 1;
}
#listPanel .datasvc-list .goods-list {
    flex: 1;
}

/*좌 목록 맨 마지막줄 제거*/	
#listPanel .goods-display.module-a.style-b .goods-list {
    border-bottom: none;
}

/*산출물 선택 활성화 배경*/
.page-data .datasvc-list .goods-item.active {
    background-color: #EAF1FE !important;
    border-color: #256EF4 !important;
}

/*산출물 선택 활성화 시 산출물명 색상*/
.page-data .datasvc-list .goods-item.active .goods-name {
    color: #256EF4 !important;
}

/*좌측 검색 필터*/

/*좌측 검색조건 - 상세검색*/
.output-finder .data-form { display: block !important; width: 100% !important; }

.output-finder .submit-form {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 1행: 산출물 + 상세검색 버튼 */
.output-finder .output-search-row {
    display: flex !important;
    align-items: center !important;
    gap: 8rem !important;
    width: 100% !important;
}
.output-finder .output-fav-item {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    margin: 0 !important;
}

/* 라벨 + 셀렉트 한 줄 */
.output-finder .form-wrap {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12rem !important;
    width: 100% !important;
}
.output-finder .form-head {
    flex: 0 0 auto !important;
    margin: 0 !important;
    white-space: nowrap !important;
    min-width: 48rem !important;
}
.output-finder .form-head .form-name {
    display: block !important;
    text-align: left !important;
    font-weight: 700;
}
.output-finder .form-body,
.output-finder .form-area,
.output-finder .form,
.output-finder select {
    flex: 1 1 auto !important;
    width: 100% !important;
    min-width: 0 !important;
}

/* 상세검색 버튼 */
.output-finder .adv-search-btn {
    all: unset;
    box-sizing: border-box !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 4rem !important;
    flex: 0 0 auto !important;
    height: 36rem !important;
    padding: 0 10rem !important;
    border: 1rem solid rgb(224, 224, 224) !important;
    border-radius: 4rem !important;
    background: #fff !important;
    color: rgb(100, 105, 115) !important;
    font-size: 13rem !important;
    line-height: 1 !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.output-finder .adv-search-btn:hover {
    background: rgb(244, 246, 249) !important;
    border-color: rgb(200, 204, 212) !important;
    color: rgb(70, 76, 88) !important;
}
.output-finder .adv-search-btn svg {
    width: 16rem;
    height: 16rem;
    flex-shrink: 0;
}
.output-finder .adv-search-btn .icon-close { display: none; }
.output-finder .adv-search-btn[aria-expanded="true"] .icon-open { display: none; }
.output-finder .adv-search-btn[aria-expanded="true"] .icon-close { display: block; }
.output-finder .adv-search-btn[aria-expanded="true"] {
    box-shadow: 0 0 0 1px #256EF4;
}

/* 포맷이 선택돼 있으면 아이콘 파란색 */
.output-finder .adv-search-btn.has-value svg { color: #256EF4; }

/* 상세검색 영역 */
.output-finder .adv-search-area {
    display: none;
    margin-top: 16rem;
    border-radius: 8rem;
}
.output-finder .adv-search-area.is-open {
    display: block;
}
.output-finder .adv-search-area .form-item {
    margin: 0 !important;
    width: 100% !important;
}
.output-finder .adv-search-area select {
    background-color: #fff !important;
}


/* 산출물 관련 링크(3가지) 툴팁 */
.output-link-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22rem;
    height: 22rem;
    flex-shrink: 0;
    border: none;
    background: none;
    color: rgb(160, 165, 175);
    cursor: pointer;
    padding: 0;
    transition: color 0.15s ease;
}
.output-link-btn:hover {
    color: #1a6fcf;
}

#outputLinkPopup {
    position: absolute;
    z-index: 1000;
    min-width: 150rem;
    background: #fff;
    border: 1rem solid rgb(224, 224, 224);
    border-radius: 4rem;
    box-shadow: 0 4rem 12rem rgba(0,0,0,0.15);
    padding: 6rem 0;
}
#outputLinkPopup::before {
    content: "";
    position: absolute;
    top: -6rem;
    right: 16rem;
    width: 10rem;
    height: 10rem;
    background: #fff;
    border-left: 1rem solid rgb(224, 224, 224);
    border-top: 1rem solid rgb(224, 224, 224);
    transform: rotate(45deg);
}
#outputLinkPopup ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#outputLinkPopup ul li a,
#outputLinkPopup ul li {
    display: block;
    padding: 3rem 8rem;
    font-size: 13rem;
    color: rgb(55, 59, 68);
    text-decoration: none;
    white-space: nowrap;
}
#outputLinkPopup ul li a:hover {
    background: rgb(249, 250, 252);
    color: #0b70d0;
}

/*+++ < 버튼 +++*/
.content-panel-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 0;
    min-height: calc(100vh - 400px);
}

.panel-divider {
    flex: 0 0 1px;
    width: 1px;
    background-color: rgb(227 228 230);
    z-index: 10;
}

.panel-toggle-btn {
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}

.panel-toggle-btn:hover { background: #f0f6ff; border-color: #1a56db; }

/*====사용할꺼면 주석해제====*/
/* #toggleLeft {
    position: sticky;
    top: 8px;
    margin-left: -28px;
    flex-shrink: 0;
    pointer-events: auto;
} */

/*====사용할꺼면 주석====*/
/*====>표시====*/
#toggleLeft {
    display: none;
}

/*< 표시*/
#toggleRight {
    position: sticky;
    top: 8px;
    margin-left: -12px;  /* 8px → -12px, 버튼 너비(24px)의 절반만큼 왼쪽으로 당겨서 선 위에 중앙 정렬 */
    flex-shrink: 0;
    pointer-events: auto;
}

/*산출물 정보 - 카드형 레이아웃*/
.outputDetail {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
}
.outputDetail .output-name {
    margin: 0;
    font-size: 20rem;
    font-weight: 700;
    color: rgb(25, 29, 38);
}
.outputDetail .output-dc {
    margin: 8rem 0 0 0;
    font-size: 14rem;
    line-height: 23rem;
    color: rgb(80, 85, 95);
}

/*++우측 ++*/

#tabContent-files .section-body {
    display: flex;
    flex-direction: column;
    flex: 1;
}
#tabContent-files .goods-display.module-a.style-b {
    display: flex;
    flex-direction: column;
    flex: 1;
}
#tabContent-files .file-pagination-wrap {
    margin-top: auto;
}

/* 우측 상세 패널도 좌측과 동일하게 flex 세로 체인 연결 */
.datasvc-detail-panel {
    display: flex;
    flex-direction: column;
}
.datasvc-detail-panel #tabContent-files {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.datasvc-detail-panel #tabContent-files .section {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}
.datasvc-detail-panel #tabContent-files .section-wrap {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* 탭(tab)형식 */
.detail-tab-wrap {
    border-bottom: none;
}
.detail-tab-btn {
    display: inline-flex;
    align-items: center;
    gap: 6rem;
    padding: 10rem 20rem;
    border: 1rem solid rgb(227 228 230);
    border-left: none;
    border-top-left-radius: 4rem;
    border-top-right-radius: 4rem;
    border-bottom: none;
    background: rgb(249, 250, 252);
    cursor: pointer;
    font-size: 14rem;
    color: rgb(88 97 106);
    margin-bottom: -1rem;
}
.detail-tab-btn:first-child {
    border-left: 1rem solid rgb(227 228 230);
}
.detail-tab-btn svg {
    fill: currentColor;
    flex-shrink: 0;
}
.detail-tab-btn.active {
    background: #fff;
    color: rgb(38 110 246);
    font-weight: 700;
    border-bottom: 1rem solid #fff;
}

/* 링크들 */
.detail-tab-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1rem solid rgb(224, 224, 224);
}

.detail-tab-header .section-link ul {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
}

.detail-tab-header .section-link ul li {
    margin-right: 15rem;
    padding-right: 15rem;
    border-right: 1rem solid rgb(200, 200, 200);
}

.detail-tab-header .section-link ul li.no-divider {
    margin-right: 0;
    padding-right: 0;
    border-right: none;
}

.detail-tab-header .section-link ul li a {
    position: relative;
    text-decoration: none;
    color: rgb(55,59,68);
    font-size: 14rem;
    line-height: 20rem;
    transition: color .2s ease, transform .1s ease;
}
.detail-tab-header .section-link ul li a:hover {
    color: #0b70d0;
    text-decoration: underline;
    transform: translateY(-1rem);
}
.detail-tab-header .section-link ul li a:active {
    transform: translateY(1rem);
}

/* == 산출물 정보 == */

/* 섹션 구분선 */
.outputDetail .data-item {
    padding: 0rem 9rem;
}

.outputDetail .data-item + .data-item,
.outputDetail .output-summary-grid + .data-item {
    padding-top: 16rem;
    border-top: 1rem solid rgb(236, 239, 245);
}
.outputDetail .data-subject {
    margin: 0 0 10rem 0;
    font-size: 15rem;
    font-weight: 700;
    color: rgb(130, 136, 148);
}

/* 산출물명 + 설명 박스 */
.outputDetail .output-header-box {
    background: rgb(244 245 246);
    border-radius: 10rem;
    padding: 32rem 38rem;
}
.outputDetail .output-header-box .output-dc {
    margin-top: 16px;
}

/* 포맷 (속성정보와 동일한 라벨-값 패턴) */
.outputDetail .frmat-wrap .output-frmat {
    margin: 0;
}

/*포맷 뱃지*/
.format-badge {
	  display: inline-flex;
	  align-items: center;
	  gap: 10rem;
	  background: #fff;
	  color: rgb(55, 59, 68);
	  font-weight: 700;
	  font-size: 15rem;
	  padding: 10rem;

  	.data-icon {
    	width: 32rem;
    	height: 32rem;
    	display: inline-flex;
    	align-items: center;
    	justify-content: center;
    	border-radius: 6rem;
    	background: rgb(232, 240, 253);
  	}
  	.data-icon svg {
    	width: 16rem;
    	height: 16rem;
    	fill: currentColor; 
  	}
  	.data-icon.data svg {
  		fill: #0184d0; 
  	}
  	.data-icon.img svg {
      	fill: #e77015;
  	}
}


/* 속성정보 칩 */
.outputDetail .tag-wrap {
    display: flex;
    flex-wrap: wrap;
    gap: 8rem;
    margin: 0;
}
.outputDetail .tag-wrap span {
    display: inline-block;
    font-size: 13.5rem;
    font-weight: 700;
    padding: 7rem 14rem;
    border-radius: 999rem;
    border: 1rem solid rgb(224, 224, 224);
    background: #fff;
    color: rgb(75, 82, 92);
    white-space: nowrap;
}

.data-subject-sub{
    display: flex;
    align-items: center;
    gap: 6rem;
    font-weight: 700;
    color: rgb(130, 136, 148);
    font-size: 13.3rem;
}
/*속성 정보 하위값 앞의 |*/
.data-subject-sub::before{
    content: "";
    width: 3rem;
    height: 12rem;
    border-radius: 2rem;
    background: rgb(0 123 194);
}

/*버전*/
.ver-accordion {
    display: flex;
    flex-direction: column;
    row-gap: 24px;
}
.ver-accordion .ver-item {
    border: 1rem solid rgb(224, 224, 224);
    border-radius: 10rem;
    overflow: hidden;
}

.ver-accordion .ver-row {
    display: flex;
    align-items: center;
    padding: 16rem 32rem;
    cursor: pointer;
}

.ver-accordion .ver-badge {
    font-size: 16rem;
    font-weight: 700;
    color: rgb(55, 59, 68);
}
.ver-accordion .ver-item.open .ver-badge {
    color: rgb(38 110 246); 
}

.ver-accordion .ver-chevron {
    margin-left: auto;
    width: 16rem;
    height: 16rem;
    color: rgb(150, 150, 150);
    transition: transform 0.15s ease;
    display: inline-flex;
}
.ver-accordion .ver-chevron svg {
    width: 100%;
    height: 100%;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.ver-accordion .ver-item.open .ver-chevron {
    transform: rotate(180deg);
    color: rgb(26, 111, 207);
}

.ver-desc {
    white-space: pre-wrap;
    font-size: 13.3rem;
}

.ver-accordion .ver-desc {
    display: none;
    padding: 0 32rem 16rem 32rem;
    line-height: 22rem;
    color: rgb(100, 105, 115);
}
.ver-accordion .ver-item.open .ver-desc {
    display: block;
}

.ver-period {
  margin-top: 8px;
  color: #000;
  font-size: 13px;
}