@charset "utf-8";
/*
 * extdata-widget.css — 외부 데이터 연동 사용자 표출 위젯 스타일
 *
 * common/js/custom/extdata-widget.js 가 생성하는 DOM 전용. 모든 규칙을 .ext-widget
 * 컨테이너 하위로 한정해 www 스킨(site/www/css/sub.css)의 .table / .desc 등 기존
 * 클래스와 충돌하지 않게 한다. 위젯이 렌더 시점에 컨테이너에 .ext-widget 을 붙이므로
 * <div class="custom-data-container"> 형태든 <custom-data-container> 커스텀 엘리먼트
 * 형태든 동일하게 적용된다.
 */

/* 커스텀 엘리먼트는 기본 display 가 inline 이라 블록으로 승격시켜야 한다. */
.ext-widget {
	display: block;
	margin: 0 0 20px;
	font-size: 15px;
	line-height: 1.6;
	color: #333;
}

/* ---------------------------------------------------------------- 상태 표시 */

.ext-widget .ext-loading,
.ext-widget .ext-empty,
.ext-widget .ext-error {
	padding: 30px 16px;
	border: 1px solid #e0e0e0;
	background: #fafafa;
	border-radius: 4px;
	text-align: center;
	color: #666;
}

.ext-widget .ext-error {
	border-color: #e6c9c9;
	background: #fdf6f6;
	color: #b03636;
}

/* --------------------------------------------------------- 결과 건수 / 보기 전환 */
/* booking.com 검색 결과 상단("검색된 숙소 N개" + 목록형/격자형 토글)과 같은 배치. */

.ext-widget .ext-results-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-bottom: 14px;
}

.ext-widget .ext-results-count {
	font-size: 15px;
	font-weight: 600;
	color: #1a1a1a;
}

.ext-widget .ext-toggle {
	display: flex;
	gap: 8px;
}

.ext-widget .ext-toggle-btn {
	padding: 7px 18px;
	border: 1px solid transparent;
	border-radius: 20px;
	background: #eef0f2;
	color: #6b6b6b;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.ext-widget .ext-toggle-btn.is-active {
	border-color: #d0d0d0;
	background: #fff;
	color: #1a1a1a;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

/* ------------------------------------------------------------------ 결과 카드 */
/* booking.com류 검색 결과 카드 하나로 통일 — table은 쓰지 않는다. 격자/목록은
   같은 .ext-result 마크업에 부모 클래스(.ext-results-grid/.ext-results-list)만
   다르게 붙여 CSS로만 레이아웃을 바꾼다(재렌더 없이 토글). */

.ext-widget .ext-results-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 16px;
}

.ext-widget .ext-results-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.ext-widget .ext-result {
	display: flex;
	flex-direction: column;
	padding: 18px 20px;
	border: 1px solid #e6e6e6;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.15s ease, border-color 0.15s ease;
}

.ext-widget .ext-result:hover {
	border-color: #b0c8e8;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

/* 목록 모드는 booking.com처럼 좌측 본문 + 우측 상세 버튼을 한 줄에 배치한다. */
.ext-widget .ext-results-list .ext-result {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
}

.ext-widget .ext-result-body {
	flex: 1 1 auto;
	min-width: 0;
}

.ext-widget .ext-result-title {
	margin: 0 0 10px;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.4;
	color: #003b95;
	word-break: break-word;
}

/* booking.com의 "더블룸 - 도시 전망" 옵션 박스처럼, 필드들을 옅은 배경 박스로 묶는다. */
.ext-widget .ext-result-fields {
	display: flex;
	flex-direction: column;
	padding: 10px 12px;
	border-radius: 4px;
	background: #f7f8fa;
}

/* 목록 모드는 정보를 한 줄에 나열(뱃지처럼), 격자 모드는 세로로 쌓는다. */
.ext-widget .ext-results-list .ext-result-fields {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 4px 24px;
}

.ext-widget .ext-field {
	display: flex;
	gap: 8px;
	padding: 3px 0;
}

.ext-widget .ext-results-grid .ext-field {
	flex-direction: column;
	gap: 2px;
	padding: 0 0 8px;
}

.ext-widget .ext-results-grid .ext-field:last-child {
	padding-bottom: 0;
}

.ext-widget .ext-label {
	flex: 0 0 auto;
	color: #6b6b6b;
	font-size: 13px;
}

.ext-widget .ext-results-list .ext-label {
	max-width: 140px;
}

.ext-widget .ext-value {
	flex: 1 1 auto;
	min-width: 0;
	font-weight: 600;
	word-break: break-word;
}

.ext-widget .ext-result-action {
	flex: 0 0 auto;
	margin-top: 14px;
}

.ext-widget .ext-results-list .ext-result-action {
	margin-top: 0;
}

/* ------------------------------------------------------- 메타 / 상세 링크 */

.ext-widget .ext-meta {
	margin-top: 12px;
	padding-top: 10px;
	border-top: 1px dashed #e5e5e5;
	font-size: 13px;
	color: #777;
}

.ext-widget .ext-meta span + span:before {
	content: "·";
	margin: 0 6px;
	color: #bbb;
}

/* 목록 모드에서는 결과 우측의 주 행동 버튼이라 booking.com "예약 가능 옵션 보기 ›" 식으로
   채워진 파란 버튼으로 강조한다. */
.ext-widget .ext-detail-link {
	display: inline-block;
	padding: 10px 22px;
	border: 1px solid #0071c2;
	border-radius: 4px;
	background: #0071c2;
	color: #fff;
	font-size: 14px;
	font-weight: 600;
	text-decoration: none;
	white-space: nowrap;
}

.ext-widget .ext-detail-link:hover,
.ext-widget .ext-detail-link:focus {
	background: #003b95;
	border-color: #003b95;
}

/* --------------------------------------------------------------- 기준시각 */

.ext-widget .ext-generated-at {
	margin-top: 10px;
	font-size: 13px;
	color: #888;
	text-align: right;
}

.ext-widget .ext-pagination {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin: 24px 0 8px;
}

.ext-widget .ext-pagination-btn {
	min-width: 32px;
	height: 32px;
	padding: 0 8px;
	border: 1px solid #d9dee8;
	border-radius: 4px;
	background: #fff;
	color: #4b5563;
	cursor: pointer;
}

.ext-widget .ext-pagination-btn.is-active {
	border-color: #2563eb;
	background: #2563eb;
	color: #fff;
	font-weight: 700;
}

/* ----------------------------------------------------------------- 모바일 */

@media screen and (max-width: 767px) {
	.ext-widget {
		font-size: 14px;
	}

	.ext-widget .ext-results-header {
		flex-wrap: wrap;
	}

	.ext-widget .ext-results-grid {
		grid-template-columns: 1fr;
	}

	/* 좁은 화면에서는 목록 모드도 격자와 같은 세로 카드로 접는다 — 본문 옆에 버튼을
	   나란히 둘 가로 폭이 없다. */
	.ext-widget .ext-results-list .ext-result {
		flex-direction: column;
		align-items: stretch;
	}

	.ext-widget .ext-results-list .ext-result-fields {
		flex-direction: column;
	}

	.ext-widget .ext-label {
		display: block;
		max-width: none;
		font-size: 13px;
	}

	.ext-widget .ext-result-action,
	.ext-widget .ext-results-list .ext-result-action {
		margin-top: 14px;
	}

	.ext-widget .ext-result-action .ext-detail-link {
		display: block;
		text-align: center;
	}
}

/* ------------------------------------------------------- 시설·데이터종류 검색 폼 */
/* extDataDisplay.jsp가 그리는 정적 마크업 — 기관만 조회했을 때만 나온다. 위젯이
   생성하는 .ext-widget 트리와는 별개라 이 이름공간 밖에 둔다. */

.extdata_filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 12px;
	margin: 0 0 20px;
	padding: 14px 16px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	background: #fafafa;
}

.extdata_shortcuts {
	margin: 0 0 16px;
	padding: 14px 16px;
	border: 1px solid #e0e0e0;
	border-radius: 4px;
	background: #fff;
}

.extdata_shortcut_group + .extdata_shortcut_group {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #f0f0f0;
}

.extdata_shortcut_title {
	display: inline-block;
	min-width: 118px;
	margin-right: 8px;
	font-size: 13px;
	color: #555;
}

.extdata_shortcut_link {
	display: inline-block;
	margin: 2px 6px 2px 0;
	padding: 5px 11px;
	border: 1px solid #d8dfe8;
	border-radius: 16px;
	background: #f8fafc;
	color: #315d92;
	font-size: 13px;
	text-decoration: none;
}

.extdata_shortcut_link:hover,
.extdata_shortcut_link:focus,
.extdata_shortcut_link.is-active {
	border-color: #1f68ad;
	background: #eaf3fc;
	color: #064f91;
}

.extdata_filter_label {
	display: flex;
	flex-direction: column;
	gap: 4px;
	font-size: 13px;
	color: #555;
}

.extdata_filter_label select {
	min-width: 160px;
	padding: 6px 8px;
	font-size: 14px;
}

.extdata_filter_submit {
	padding: 7px 18px;
	font-size: 14px;
	border: 1px solid #999;
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
}

.extdata_filter_reset {
	padding: 7px 12px;
	font-size: 14px;
	color: #555;
	text-decoration: underline;
}

@media (max-width: 767px) {
	.extdata_shortcut_title {
		display: block;
		margin-bottom: 4px;
	}

	.extdata_filter {
		flex-direction: column;
		align-items: stretch;
	}

	.extdata_filter_label select {
		min-width: 0;
		width: 100%;
	}
}