@charset "UTF-8";

.ptg-album-list {
	display: flex;
	flex-wrap: wrap;
	padding: 0px;
}

.ptg-album-list .ptg-album-item {
	box-sizing: border-box;
}

.ptg-album-list .ptg-album-item:hover {
	outline: 2px solid #004EA1!important;
	outline-offset: -2px;
}

.ptg-album-list .ptg-album-item .item-title h2 {
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 10px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	cursor: pointer;
}

.ptg-album-list .ptg-album-item .item-title img {
	width: 185px;
	border: 1px solid #e7e7e7;
	margin-bottom: 10px;
	cursor: pointer;
}

.ptg-album-list .ptg-album-item .item-info {
	width: 100%;
}

/* 공통 red-graphList.css 의 .ptg-album-item .item-info img.ctgry { width:13px; height:13px } 는
 * .ctgry 클래스가 없는 새 구조에서 dead — 보존 무관. */

.ptg-album-list .ptg-album-item .item-info .view {
	display: flex;
	justify-content: flex-start;
	gap: 4px;
	white-space: nowrap;
}

.ptg-album-list .ptg-album-item .item-info .date {
	display: flex;
	justify-content: flex-start;
	gap: 4px;
	white-space: nowrap;
}

.ptg-album-list .ptg-album-item .item-info img {
	width: 13px;
	border: 0px;
	margin: 0px;
}

.ptg-carousel-item .graph-thumbnail-img {
	border: 1px solid #e7e7e7;
}

.ptg-carousel-item:hover .graph-thumbnail-img {
	border: 1px solid #206ae2;
}

.ptg-thumbnail .ptg-thumbnail-caption {
	word-break: keep-all;
}

.ptg-category-item.active .ptg-category-button {
	background-color: #0e4194;
}

.ptg-category-button:hover {
	background-color: #0e4194;
}

/* 검색 */
.search-result {
	margin-bottom: 20px;
}

/* 리스트(앨범형) — 5열 그리드 전용 오버라이드 */
.ptg-album-list .ptg-album-item:nth-of-type(5n) {
	margin-right: 0px;
}

.ptg-carousel-item:hover .graph-thumbnail-img {
	border: 1px solid #000;
}

/* 리스트(바둑판형) */
.ptg-thumail-list {
	margin-top: 30px;
	position: relative;
	border-top: 0px;
}

.ptg-thumail-list .list_type {
	display: flex;
	padding: 12px;
	border-top: 1px solid #d1d1d1;
}


body.tmplat1 .ptg-thumail-list .list_type .thumnail img:hover {
	box-shadow: none;
}

.ptg-thumail-list .list_type .data_info h1 {
	font-size: 24px;
	cursor: pointer;
	width: 680px;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ptg-thumail-list .list_type .data_info .none_discription {
	-webkit-line-clamp: inherit;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ptg-thumail-list .list_type .data_info p .category img {
	width: 13px;
}

.ptg-thumail-list .list_type .data_info button {
	position: absolute;
	top: 0px;
	right: 0px;
	background: #004EA1;
	border-radius: 20px;
	padding: 6px 23px 5px 23px;
	font-size: 15px;
	color: #fff;
}

.graph-carousel {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	height: 0;
	padding: 0px 10px;
	background-color: #f5f5f5;
	overflow: hidden;
	transition: height 600ms cubic-bezier(0.2, 0, 0.2, 1) 0ms;
	box-sizing: border-box;
	border-top: 0px;
}

.graph-carousel .ptg-carousel-list .ptg-carousel-item .graph-thumbnail-img:hover {
	border: 2px solid #004EA1;
}


@media (min-width: 769px) {
	body.tmplat1 .search-result {
		justify-content: space-between;
	}
	body.tmplat1 .search-result .box_01,
	body.tmplat1 .search-result .box_02 {
		width: auto;
		flex-basis: auto;
	}
	body.tmplat1 .search-result .box_01 {
		flex-grow: 0;
	}
	body.tmplat1 .search-result .box_02 {
		gap: 6px;
	}
	body.tmplat1 .search-result .box_02 > select {
		margin-right: 0;
	}
	body.tmplat1 .search-result .box_02 > select:last-of-type {
		margin-right: 5px;
	}
	body.tmplat1 .search-result .menu > button {
		margin-right: 0;
	}

	/* ---------------------------------------------------------------------
	 * 769px+ 데이터 중계 칩: 모바일과 동일한 알약 보더 + 체크 마크 미표시.
	 * red-graphList.css L1188 의 span 기본 padding/색상 위에 흰 보더 + 라운드만 덮어쓰고,
	 * .on 활성 칩의 좌측 체크 SVG(L1205 background-image)를 제거하여 모바일 톤과 통일.
	 * 모바일(<=768) layout-custom.css L843/L858 규칙과 시각 톤 일치.
	 * ------------------------------------------------------------------- */
	body.tmplat1 .bridge_list li span {
		border: 1px solid rgba(255, 255, 255, 0.35);
		border-radius: 25px;
		padding: 5px 12px;
	}
	body.tmplat1 .bridge_list li .on {
		background-image: none;
		padding-left: 12px;
		padding-right: 12px;
	}
}

body.tmplat1 .ptg-thumail-list .list_type .graph-carousel .ptg-carousel-list {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	width: 100%;
}
body.tmplat1 .ptg-thumail-list .list_type .graph-carousel .ptg-carousel-list > .ptg-carousel-item,
body.tmplat1 .ptg-thumail-list .list_type .graph-carousel .ptg-carousel-list > li {
	flex: 1 1 0;
	min-width: 0;
}

body.tmplat1 .ptg-thumail-list .list_type {
	flex-wrap: wrap;
}
body.tmplat1 .ptg-thumail-list .list_type > .graph-carousel {
	flex-basis: 100%;
	min-width: 0;
	order: 999;  /* thumnail/data_info(order:0) 보다 뒤 — 항상 맨 아래 */
}

body.tmplat1 .ptg-thumail-list .list_type > .list_type_body {
	display: flex;
	align-items: flex-start;
	width: 100%;
	min-width: 0;        /* 자식 .data_info min-width:0 이 부모 통해 작동하도록 */
	box-sizing: border-box;
	/* 공통 CSS 의 .data_info p { position:absolute; bottom:-15px } 가 .data_info 박스
	 * 바깥 아래로 떠있는 분량을 wrapper 가 명시적으로 차지하도록 padding-bottom 추가.
	 * 그 결과 형제 .graph-carousel 의 y 시작점이 메타 아래로 내려가 겹침 제거. */
	padding-bottom: 24px;
}

body.tmplat1 .ptg-thumail-list .list_type .graph-carousel .ptg-carousel-list .ul-carousel {
	display: flex;
	flex-wrap: nowrap;
	gap: 6px;
	width: 100%;
	margin: 0;
	padding: 0;
	list-style: none;
}
body.tmplat1 .ptg-thumail-list .list_type .graph-carousel .ptg-carousel-list .ul-carousel > .ptg-carousel-item {
	display: block !important;     /* 공통 L1273 inline-block 무력화 — flex item 동작 보장 */
	flex: 1 1 0 !important;
	min-width: 0 !important;
	width: auto !important;        /* 공통 L1275 width:210px 무력화 */
	max-width: none !important;
	margin: 0 !important;
}

/* -------------------------------------------------------------------------
 * 1200px 이하: 태블릿
 * 화면폭이 좁아지면 .ptg-album-item { width:225px; margin-right:18.6px }
 * 고정 배치가 마지막 열을 오른쪽으로 흘려 빈 공간을 남긴다. flex 가변 폭으로 전환.
 * ------------------------------------------------------------------------- */
@media (max-width: 1200px) {
	body.tmplat1 .tmplat1-main .search_box .search_field {
		flex: 1 1 auto;
		width: auto;
	}

	body.tmplat1 .tmplat1-main .check_label {
		/* display: block; */
		text-align: left;
		padding: 0;
	}

	body.tmplat1 .search-result {
		flex-wrap: nowrap;
		gap: 10px;
		align-items: center;
	}
	body.tmplat1 .search-result .box_01 {
		flex: 1 1 auto;
		min-width: 0;
	}
	body.tmplat1 .search-result .box_02 {
		flex: 0 1 auto;
		flex-wrap: nowrap;
		justify-content: flex-end;
		align-items: center;
		gap: 6px;
		min-width: 0;
	}
	body.tmplat1 .search-result .box_02 > select {
		min-width: 0;                           /* 좁은 폭에서 select 가 축소될 수 있도록 */
		flex: 0 1 auto;                         /* shrink 허용, grow 차단 */
		white-space: nowrap;                    /* select 텍스트 줄바꿈 방지(폴백) */
	}
	body.tmplat1 .search-result .box_02 .menu {
		flex: 0 0 auto;                         /* .menu 는 축소되지 않음(버튼 폭 보장) */
		white-space: nowrap;
		display: flex;                          /* 내부 button 2개도 가로 배치 보장 */
		flex-wrap: nowrap;
		gap: 5px;
	}


	body.tmplat1 .ptg-thumail-list .list_type {
		padding: 12px;
	}
	body.tmplat1 .ptg-thumail-list .list_type .data_info h1 {
		width: auto;
		max-width: 100%;
	}

	/* 페이지네이션 wrap 허용 */
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper {
		flex-wrap: wrap;
		gap: 4px;
	}
}

@media (min-width: 769px) and (max-width: 1024px) {
	body.tmplat1 .ptg-album-list {
		width: 100%;
		display: grid;
		grid-template-columns: repeat(auto-fit, 225px);
		gap: 16px;
		justify-content: center;
	}
	body.tmplat1 .ptg-album-list .ptg-album-item {
		width: auto;
	}
	body.tmplat1 .ptg-album-list .ptg-album-item .item-title img {
		width: 100%;
		max-width: 185px;
	}
}

@media (min-width: 1025px) and (max-width: 1200px) {
	body.tmplat1 .ptg-album-list {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		gap: 16px;
	}
	body.tmplat1 .ptg-album-list .ptg-album-item {
		width: calc((100% - 64px) / 5);
		margin: 0;
	}
	body.tmplat1 .ptg-album-list .ptg-album-item:nth-of-type(5n) {
		margin-right: 0;
	}
	body.tmplat1 .ptg-album-list .ptg-album-item .item-title img {
		width: 100%;
		max-width: 185px;
	}
}

body.tmplat1 .ptg-album-list .ptg-album-item .item-title {
	text-align: center;
}
body.tmplat1 .ptg-album-list .ptg-album-item .item-title img {
	width: 100%;
	margin-left: auto;
	margin-right: auto;
}
body.tmplat1 .ptg-album-list .ptg-album-item .item-title h2 {
	text-align: left;
}

/* -------------------------------------------------------------------------
 * 768px 이하: 모바일
 * 카드 2열, 검색폼 세로 스택, 목록형 썸네일/텍스트 스택
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	body.tmplat1 .tmplat1-main .search_box .search_field {
		height: 50px;
		font-size: 15px;
		min-width: 0;
	}
	body.tmplat1 .tmplat1-main .search_box .btn_search {
		width: 50px;
		height: 50px;
		flex: 0 0 50px;
	}
	/* [clear 버튼] 검색 버튼(50px)·입력창 높이(50px) 축소에 맞춰 위치/크기 보정 */
	body.tmplat1 .tmplat1-main .search_box .btn_clear {
		right: 50px;
		height: 50px;
		width: 32px;
		font-size: 20px;
	}

	/* 인기검색어 — 세로 여유 확보, 줄바꿈 허용 */
	body.tmplat1 .tmplat1-main .keyword {
		height: auto;
		line-height: 1.6;
		padding: 8px 16px;
	}
	body.tmplat1 .tmplat1-main .keyword p {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 6px;
	}
	body.tmplat1 .tmplat1-main .keyword span {
		margin-left: 0;
		padding: 6px 12px; /* 터치 타겟 */
		min-height: 32px;
		box-sizing: border-box;
	}
	body.tmplat1 .tmplat1-main .keyword span:first-child {
		margin-left: 0;
	}

	body.tmplat1 .search-result .box_01,
	body.tmplat1 .search-result .box_02 {
		width: 100%;
		flex: 0 0 100%;
	}
	body.tmplat1 .search-result .box_01 {
		flex-direction: column;
		align-items: flex-start;
		gap: 6px;
	}
	body.tmplat1 .search-result .box_01 span {
		margin-right: 8px;
		font-size: 15px;
	}
	body.tmplat1 .search-result .box_01 select,
	body.tmplat1 .search-result .box_02 select {
		width: 100%;
		min-width: 0;
		height: 44px;
		font-size: 15px;
		margin-right: 0;
		margin-bottom: 8px;
	}
	body.tmplat1 .search-result .box_02 {
		flex-wrap: wrap;
		gap: 8px;
		justify-content: flex-start;
	}
	body.tmplat1 .search-result .box_02 > select {
		flex: 1 1 calc(50% - 4px);
	}
	body.tmplat1 .search-result .menu {
		margin: 0;
		display: flex;
		gap: 6px;
	}
	body.tmplat1 .search-result .menu button {
		min-width: 44px;
		min-height: 44px;
		height: 44px;
		padding: 8px 12px;
	}
	body.tmplat1 .search-result .menu button:last-child {
		margin-right: 0;
	}

	body.tmplat1 .bridge_list ul {
		flex-wrap: wrap;
		overflow-x: visible;
		width: 100%;
	}

	body.tmplat1 .ptg-album-list .ptg-album-item {
		/* 2열: (100% - 1 * 16px gap) / 2 */
		width: calc((100% - 16px) / 2);
		height: auto;
		min-height: 0;
		padding: 12px;
	}
	body.tmplat1 .ptg-album-list .ptg-album-item .item-title img {
		width: 100%;
		max-width: 100%;
		height: auto;                /* P1: 실제 썸네일 비율 유지, letterbox 방지 */
	}
	body.tmplat1 .ptg-album-list .ptg-album-item .item-title h2 {
		font-size: 16px;
		-webkit-line-clamp: 2;
	}
	body.tmplat1 .ptg-album-list .ptg-album-item .item-info {
		position: static;
		width: 100%;
		margin-top: 8px;
		flex-wrap: wrap;
		gap: 4px 8px;
	}

	body.tmplat1 .ptg-thumail-list .list_type {
		padding: 12px;
		gap: 12px;
		align-items: flex-start;
	}
	body.tmplat1 .ptg-thumail-list .list_type .thumnail {
		flex: 0 0 auto;
	}
	body.tmplat1 .ptg-thumail-list .list_type .thumnail img {
		width: 120px;
		max-width: 120px;
		height: auto;
	}
	body.tmplat1 .ptg-thumail-list .list_type .data_info {
		position: relative;
		flex: 1 1 auto;
		min-width: 0;
	}
	body.tmplat1 .ptg-thumail-list .list_type .data_info h1 {
		font-size: 18px;
		-webkit-line-clamp: 2;
		padding-right: 84px;               /* 우상단 "유사데이터" 버튼 공간 */
	}
	/* 유사데이터 버튼 — 우상단 절대배치 유지(공통 규칙 그대로), 모바일 사이즈만 축소 */
	body.tmplat1 .ptg-thumail-list .list_type .data_info button {
		min-height: 32px;
		padding: 4px 12px;
		font-size: 12px;
	}
	/* 메타정보 p — 공통 CSS 의 position:absolute; bottom:-15px 을 모바일에서 정상 흐름으로 복귀.
	 * 좁은 폭에서 span 들은 자연 줄바꿈. */
	body.tmplat1 .ptg-thumail-list .list_type .data_info p {
		position: static;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-start;
		gap: 6px 12px;
		margin-top: 8px;
		font-size: 13px;
	}
	/* 공통 CSS 의 .data_info .graph-description { height:80px } 이 좁은 폭에서 과다 공백 유발
	 * → 높이 자동, 3줄로 축소 */
	body.tmplat1 .ptg-thumail-list .list_type .data_info .graph-description {
		height: auto;
		-webkit-line-clamp: 3;
		margin-top: 6px;
	}
	/* 공통 CSS 의 .data_info { height:155px } 도 모바일에서는 내용 기반 자동 */
	body.tmplat1 .ptg-thumail-list .list_type .data_info {
		height: auto;
	}

	/* 페이지네이션 — 가로 스크롤 방지, wrap */
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper {
		flex-wrap: wrap;
		row-gap: 6px;
	}
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-number,
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-first,
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-prev,
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-next,
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-last {
		min-width: 36px;
		min-height: 36px;
	}

	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-number,
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-number-selected,
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-first,
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-prev,
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-next,
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-last {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		padding: 0;                                           /* 7px/6px 상단 편중 제거 */
		line-height: 1;                                       /* 폰트 metric 편차 제거 */
		text-align: center;                                   /* 폴백(구형 브라우저) */
	}
	/* 화살표 <img> 자식도 baseline 영향을 받지 않도록 block 처리 */
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-first img,
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-prev img,
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-next img,
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-last img {
		display: block;                                       /* inline baseline 제거 */
	}
}

@media (max-width: 480px) {
	/* 검색 입력 — 상단 여백 축소(P2) */
	body.tmplat1 .tmplat1-main .search_box .search_field {
		height: 44px;
		font-size: 14px;
		padding: 12px;
		/* [clear 버튼] padding 단축 선언이 베이스 padding-right 를 덮으므로 재확보 */
		padding-right: 38px;
		min-width: 0;
	}
	body.tmplat1 .tmplat1-main .search_box .btn_search {
		width: 44px;
		height: 44px;
		flex: 0 0 44px;
	}
	/* [clear 버튼] 검색 버튼(44px)·입력창 높이(44px) 축소에 맞춰 위치/크기 보정 */
	body.tmplat1 .tmplat1-main .search_box .btn_clear {
		right: 44px;
		height: 44px;
		width: 28px;
		font-size: 18px;
	}

	/* 인기검색어 — 여백 축소(P2) */
	body.tmplat1 .tmplat1-main .keyword {
		margin-top: 20px;
		padding: 0 12px;
	}
	body.tmplat1 .tmplat1-main .keyword p {
		gap: 4px;
	}
	body.tmplat1 .tmplat1-main .keyword span {
		padding: 4px 10px;
		min-height: 28px;
		font-size: 13px;
	}

	/* 검색 결과 바 — wrap 간격 축소(P2) */
	body.tmplat1 .search-result {
		margin-top: 30px;
		margin-bottom: 12px;
		gap: 6px;
	}
	body.tmplat1 .search-result .box_01 select,
	body.tmplat1 .search-result .box_02 select {
		height: 40px;
		margin-bottom: 6px;
	}
	/* search-result box_02 select 1열 */
	body.tmplat1 .search-result .box_02 > select {
		flex: 1 1 100%;
	}
	body.tmplat1 .search-result .menu button {
		min-width: 40px;
		min-height: 40px;
		height: 40px;
	}

	body.tmplat1 .ptg-album-list .ptg-album-item {
		width: calc((100% - 10px) / 2);
		height: auto;
		min-height: 0;
		padding: 10px;
		border-radius: 10px;
	}
	body.tmplat1 .ptg-album-list .ptg-album-item .item-title h2 {
		font-size: 14px;
		-webkit-line-clamp: 2;
		margin-bottom: 6px;
		line-height: 1.35;
	}
	body.tmplat1 .ptg-album-list .ptg-album-item .item-info {
		position: static;
		width: 100%;
		margin-top: 4px;
		font-size: 11px;
		gap: 2px 6px;
	}
	body.tmplat1 .ptg-album-list .ptg-album-item .item-info .view {
		width: auto;
		max-width: 100%;
	}

	/* 페이지네이션 번호 축소 */
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-number {
		min-width: 32px;
		min-height: 32px;
		margin: 2px;
	}
}

@media (max-width: 768px) {
	body.tmplat1 .ptg-album-list .ptg-album-item .item-title img {
		max-height: 180px;
		object-fit: contain;         /* max-height 도달 시에만 내부 축소 — 일반 상태는 height:auto */
	}
	body.tmplat1 .ptg-thumail-list .list_type .thumnail img {
		max-height: 200px;
		object-fit: contain;
	}
}


@media (max-width: 768px) {

	body.tmplat1 .ptg-album-list .ptg-album-item {
		border: 1px solid #e5e7eb;
		border-radius: 12px;
		background: #fff;
		box-shadow:
			0 1px 2px rgba(0, 0, 0, 0.05),
			0 2px 6px rgba(0, 0, 0, 0.08);
		transition: transform 120ms ease, box-shadow 140ms ease, border-color 140ms ease;
		-webkit-tap-highlight-color: transparent;
	}
	body.tmplat1 .ptg-album-list .ptg-album-item:hover {
		outline: 0 !important;                              /* 공통 hover outline 제거 */
		border-color: #d0d5dd;
		box-shadow:
			0 2px 4px rgba(0, 0, 0, 0.06),
			0 6px 14px rgba(0, 0, 0, 0.09);
	}
	body.tmplat1 .ptg-album-list .ptg-album-item:active {
		transform: scale(0.98);
		box-shadow:
			0 1px 2px rgba(0, 0, 0, 0.06),
			0 2px 6px rgba(0, 0, 0, 0.08);
	}

	/* 목록형 카드도 동일한 elevation 언어로 통일 */
	body.tmplat1 .ptg-thumail-list .list_type {
		border-top: 0;                                      /* 상단 구분선 제거 */
		border-radius: 14px;
		background: #fff;
		margin-bottom: 10px;
		box-shadow:
			0 1px 2px rgba(0, 0, 0, 0.04),
			0 4px 12px rgba(0, 0, 0, 0.06);
		transition: transform 120ms ease, box-shadow 140ms ease;
	}
	body.tmplat1 .ptg-thumail-list .list_type:hover {
		background: transparent !important;             /* 공통 CSS L1048 #f1f7ff 무력화 */
		box-shadow:                                      /* base(L1107~1109) elevation 유지(hover 강화 없음) */
			0 1px 2px rgba(0, 0, 0, 0.04),
			0 4px 12px rgba(0, 0, 0, 0.06);
		outline: none;
		transform: none;
		border-color: inherit;
	}
	body.tmplat1 .ptg-thumail-list .list_type:active {
		transform: scale(0.995);                            /* 목록은 약하게 */
	}

	/* -----------------------------------------------------------------
	 * T5. Card Visual 개선
	 * - 차트 썸네일 배경: 옅은 tinted gradient (흰색보다 차트 포커스 UP)
	 * - overflow hidden + :active 썸네일 scale(1.03) 마이크로 인터랙션
	 * - 타이틀 폰트 굵기/letter-spacing 현대화
	 * ----------------------------------------------------------------- */
	body.tmplat1 .ptg-album-list .ptg-album-item .item-title img {
		width: 100%;
		border: 0;                                          /* 공통 border 제거 */
		border-radius: 10px;
		transition: transform 220ms cubic-bezier(0.2, 0, 0.2, 1);
	}
	body.tmplat1 .ptg-album-list .ptg-album-item:active .item-title img {
		transform: scale(1.03);
	}
	body.tmplat1 .ptg-album-list .ptg-album-item .item-title h2 {
		font-weight: 600;
		letter-spacing: -0.01em;
		color: #111827;
	}
	body.tmplat1 .ptg-thumail-list .list_type .thumnail img {
		border-radius: 10px;
	}
	body.tmplat1 .ptg-thumail-list .list_type .data_info h1 {
		font-weight: 600;
		letter-spacing: -0.01em;
		color: #111827;
	}

	body.tmplat1 .search-result .box_01 {
		gap: 2px;
	}
	body.tmplat1 .search-result .box_01 span.total {
		font-size: 12px;
		color: #6b7280;                                      /* muted */
		font-weight: 500;
		letter-spacing: 0.01em;
	}
	/* box_02 한 줄: select 2개 + 메뉴 버튼 그룹 */
	body.tmplat1 .search-result .box_02 {
		display: flex;
		flex-wrap: nowrap;                                   /* 한 줄 강제 */
		align-items: center;
		gap: 6px;
	}
	body.tmplat1 .search-result .box_02 > select {
		flex: 1 1 0;
		min-width: 0;                                        /* 축소 가능 */
		height: 42px;
		margin-bottom: 0;                                    /* 한 줄이므로 하단 여백 제거 */
		border-radius: 10px;                                 /* T1 radius 정책 */
		border: 1px solid #e5e7eb;
		background-color: #fff;
		padding: 0 10px;
		font-size: 14px;
		color: #111827;
	}
	body.tmplat1 .search-result .box_02 .menu {
		flex: 0 0 auto;
		margin-left: auto;                                   /* 오른쪽 끝 고정 */
	}
	body.tmplat1 .search-result .box_02 .menu button {
		min-width: 40px;
		min-height: 40px;
		height: 40px;
		padding: 8px 10px;
		border-radius: 10px;
		transition: transform 120ms ease, background 140ms ease;
		margin: 0;
	}
	body.tmplat1 .search-result .box_02 .menu button:active {
		transform: scale(0.94);
	}

	/* -----------------------------------------------------------------
	 * T6. Pagination 모바일 압축 — 현재/끝 버튼과 prev/next 만 노출
	 * 중간 번호들은 hidden, 현재 페이지(selected) 만 보임
	 * ≤480px 추가 압축은 하단 블록에서 처리
	 * ----------------------------------------------------------------- */
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper {
		flex-wrap: nowrap;                                    /* 한 줄 강제 */
		justify-content: center;
		gap: 4px;
	}
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-first,
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-prev,
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-next,
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-last {
		min-width: 40px;
		min-height: 40px;
		border-radius: 10px;
	}
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-number-selected {
		min-width: 40px;
		min-height: 40px;
		border-radius: 10px;
	}

	/* -----------------------------------------------------------------
	 * T7. 마이크로 인터랙션 / 접근성 보강
	 * search-result 영역 포커스 링은 layout-custom 의 전역 규칙으로 처리됨
	 * ----------------------------------------------------------------- */
	body.tmplat1 .ptg-album-list .ptg-album-item,
	body.tmplat1 .ptg-thumail-list .list_type {
		-webkit-tap-highlight-color: transparent;
	}
}

@media (max-width: 480px) {
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-number:not(.ptg-pagination-number-selected) {
		display: none;
	}
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-first,
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-last,
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-prev,
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-next {
		display: none;                                        /* 블록 단위 화살표 모두 숨김 — 단일 이동은 별도 nav 사용 */
	}
	body.tmplat1 .ptg-pagination .ptg-pagination-wrapper .ptg-pagination-number-selected {
		min-width: 44px;
		min-height: 40px;
		padding: 0 12px;
		font-weight: 600;
	}

	/* T4. 초소형에서도 필터 바는 한 줄 유지 — select 폰트 축소로 공간 확보 */
	body.tmplat1 .search-result .box_02 > select {
		height: 40px;
		font-size: 13px;
		padding: 0 8px;
	}
	body.tmplat1 .search-result .box_02 .menu button {
		min-width: 36px;
		min-height: 36px;
		height: 36px;
		padding: 6px 8px;
		margin: 0;
	}

	body.tmplat1 .ptg-album-list .ptg-album-item {
		border-radius: 10px;
	}
	body.tmplat1 .ptg-album-list .ptg-album-item .item-title img {
		border-radius: 8px;
	}
}


@media (max-width: 768px) {
	/* 카드 컨테이너 — viewport 폭 절대 초과 금지 */
	body.tmplat1 .ptg-album-list {
		max-width: 100%;
		min-width: 0;
		overflow-x: hidden;                  /* 라이브러리 부작용 잔재 클립 */
		padding: 0;
		margin: 0;
	}
	/* 카드 item — calc 산식 정확성 보장 */
	body.tmplat1 .ptg-album-list .ptg-album-item {
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}

	/* 목록형 컨테이너 동일 */
	body.tmplat1 .ptg-thumail-list {
		max-width: 100%;
		min-width: 0;
	}
	body.tmplat1 .ptg-thumail-list .list_type {
		max-width: 100%;
		min-width: 0;
		box-sizing: border-box;
	}
	body.tmplat1 .ptg-thumail-list .list_type .data_info {
		max-width: 100%;
		min-width: 0;
	}
	body.tmplat1 .ptg-thumail-list .list_type .data_info h1 {
		max-width: 100%;
		min-width: 0;
		word-break: break-word;              /* 긴 그래프명이 줄바꿈 없이 폭을 늘리는 케이스 방어 */
	}

	body.tmplat1 .search-result {
		margin-top: 20px;
		flex-wrap: wrap;
		max-width: 100%;
		min-width: 0;
	}
	body.tmplat1 .search-result .box_01,
	body.tmplat1 .search-result .box_02 {
		max-width: 100%;
		min-width: 0;
	}
}


/* 기본(데스크톱 + 태블릿): 항상 숨김 */
body.tmplat1 .tmplat1-pagination-mobile {
	display: none;
}

@media (max-width: 480px) {
	/* 모바일: 페이지네이션 본체 위/옆이 아닌 같은 행처럼 보이도록 음수 마진으로 본체와 합성.
	   margin-top: -nn 으로 페이지네이션 본체와 같은 줄에 겹쳐 ‹ N › 표시 — 좌측에 prev, 우측에 next */
	body.tmplat1 .tmplat1-pagination-mobile {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		max-width: 220px;                                    /* 가운데 selected 번호 양옆에 위치하도록 폭 제한 */
		margin: -44px auto 0;                                /* 페이지네이션(40px+여유) 위로 끌어올려 같은 행 합성 */
		padding: 0 8px;
		pointer-events: none;                                /* 컨테이너는 클릭 통과, 버튼만 활성 */
		position: relative;
		z-index: 1;
	}
	body.tmplat1 .tmplat1-pagination-mobile .tmplat1-pagination-mobile-btn {
		pointer-events: auto;
		min-width: 40px;
		min-height: 40px;
		width: 40px;
		height: 40px;
		padding: 0;
		border: 1px solid #d0d5dd;
		border-radius: 10px;
		background: #fff;
		color: #333;
		font-size: 18px;
		line-height: 1;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		transition: background-color .12s ease, border-color .12s ease, color .12s ease;
	}
	body.tmplat1 .tmplat1-pagination-mobile .tmplat1-pagination-mobile-btn:hover,
	body.tmplat1 .tmplat1-pagination-mobile .tmplat1-pagination-mobile-btn:focus-visible {
		background: #f5f7fb;
		border-color: #0e4194;
		color: #0e4194;
	}
	body.tmplat1 .tmplat1-pagination-mobile .tmplat1-pagination-mobile-btn:active {
		background: #e9eef7;
	}
	body.tmplat1 .tmplat1-pagination-mobile .tmplat1-pagination-mobile-btn[disabled] {
		opacity: 0.35;
		cursor: not-allowed;
		pointer-events: none;                                /* 비활성 버튼 클릭 차단 */
	}
}


@media (max-width: 768px) {
	/* A. .item-info 래퍼 — 좌우 분할(view:좌 / date:우) 고정.
	 *    공통 CSS .ptg-album-item .item-info { display:flex; justify-content:space-between;
	 *                                          align-items:baseline } 를 모바일에서 보강.
	 *    align-items 를 center 로 바꾸어 아이콘-텍스트 수직 중앙 정렬. */
	body.tmplat1 .ptg-album-list .ptg-album-item .item-info {
		display: flex;
		flex-wrap: nowrap;                                    /* 한 줄 유지(좌우 분할 고정) */
		align-items: center;                                  /* baseline → center (아이콘 정렬) */
		justify-content: space-between;                       /* view:좌 / date:우 */
		gap: 8px;
		width: 100%;
		box-sizing: border-box;
	}

	/* A. 메타 블록(view, date) — inline-flex 로 아이콘·텍스트 수직 중앙 + 간격.
	 *    새 DOM 은 <div class="view"><img>...텍스트노드...</div> 구조.
	 *    공통 CSS 의 .view (float:left / width:80px / overflow:hidden / color:#999) 잠금 해제.
	 *    공통 CSS 의 .date (float:right / display:flex / justify-content:space-between) 잠금 해제. */
	body.tmplat1 .ptg-album-list .ptg-album-item .item-info .view,
	body.tmplat1 .ptg-album-list .ptg-album-item .item-info .date {
		display: inline-flex;
		align-items: center;                                  /* 아이콘(img:block)-텍스트노드 중앙 정렬 */
		justify-content: flex-start;
		gap: 4px;                                             /* 아이콘-텍스트 간격 */
		flex: 0 0 auto;                                       /* 자연 폭 유지 */
		float: none;                                          /* 공통 float 해제 */
		width: auto;                                          /* 공통 .view 의 80px 잠금 해제 */
		max-width: 50%;                                       /* 극단 케이스에서도 상대 블록 공간 보장 */
		overflow: visible;                                    /* 공통 .view 의 hidden 해제 */
		text-overflow: clip;
		margin: 0;                                            /* 공통 margin-bottom:5px 제거(gap 으로 대체) */
		font-size: 12px;
		line-height: 1;
		color: #6b7280;                                       /* T5 톤과 통일(무채색) */
		white-space: nowrap;                                  /* 숫자/날짜 줄바꿈 방지 */
	}

	/* A. 핵심 — .item-info 내부 <img> 아이콘 크기 고정.
	 *    .item-title img 썸네일 규칙과 타겟이 분리되었으므로 대부분의 간섭은 원천 차단되었지만,
	 *    포괄 규칙이나 다운스트림 회귀 방어용으로 명시적 13px 잠금 유지.
	 *    display:block 으로 baseline 무관화하여 flex 부모의 align-items:center 만 적용. */
	body.tmplat1 .ptg-album-list .ptg-album-item .item-info img {
		width: 13px;
		height: 13px;
		max-width: 13px;
		max-height: 13px;
		min-width: 0;
		min-height: 0;
		display: block;                                       /* baseline 무관화 */
		border: 0;
		border-radius: 0;
		object-fit: initial;
		margin: 0;
		padding: 0;
		vertical-align: middle;
		transform: none;                                      /* :active scale(1.03) 등 인터랙션 차단 */
		transition: none;
	}
}

/* -------------------------------------------------------------------------
 * 480px 이하: 카드 폭이 더 좁으므로 폰트/간격 미세 축소.
 * ------------------------------------------------------------------------- */
@media (max-width: 480px) {
	body.tmplat1 .ptg-album-list .ptg-album-item .item-info {
		gap: 6px;
		margin-top: 6px;
	}
	body.tmplat1 .ptg-album-list .ptg-album-item .item-info .view,
	body.tmplat1 .ptg-album-list .ptg-album-item .item-info .date {
		font-size: 11.5px;
		gap: 3px;
	}
}

body.tmplat1 .ptg-thumail-list .list_type .graph-carousel {
	padding: 0 6px;
	gap: 6px;
}


body.tmplat1 .ptg-thumail-list .list_type .graph-carousel .ptg-carousel-list:not(:has(.ul-carousel)) {
	justify-content: center;
	text-align: center;
}


@media (max-width: 768px) {
	body.tmplat1 .search-result .box_02 .menu {
		display: none;
	}
}

@media (max-width: 768px) {

  /* 1. .ptg-thumail-list 외곽 — 2열 그리드 (갤러리 .ptg-album-list 패턴 복제) */
  body.tmplat1 .ptg-thumail-list {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    margin: 0;
    overflow-x: hidden;
  }

  body.tmplat1 .ptg-thumail-list .list_type {
    width: calc((100% - 16px) / 2);   /* 갤러리와 동일 산식 */
    flex-direction: column;
    flex-wrap: wrap;
    align-items: stretch;
    padding: 12px;                     /* 갤러리 768px padding 동일 */
    gap: 8px;                          /* 카드 내부 행 간격 */
    margin: 0;
    box-sizing: border-box;
    min-width: 0;
    max-width: calc((100% - 16px) / 2);
  }

  /* 3. .list_type_body — column stack (썸네일 → 제목 → 메타) */
  body.tmplat1 .ptg-thumail-list .list_type > .list_type_body {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    padding-bottom: 0;
    box-sizing: border-box;
  }

  /* 4. 썸네일 — 카드 폭 100% (갤러리 .item-title img 패턴) */
  body.tmplat1 .ptg-thumail-list .list_type .thumnail {
    flex: initial;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  body.tmplat1 .ptg-thumail-list .list_type .thumnail img {
    width: 100%;
    max-width: 100%;
    height: auto;                      /* 비율 유지 */
    max-height: 200px;                 /* 갤러리(180px)보다 약간 여유, list 카드 폭 약간 더 큼 */
    object-fit: contain;               /* memory publishing feedback 3·4 */
    border-radius: 10px;
    cursor: pointer;
  }

  /* 5. .data_info — 카드 내 자연 흐름 */
  body.tmplat1 .ptg-thumail-list .list_type .data_info {
    flex: initial;
    position: relative;
    width: 100%;
    height: auto;                      /* 공통 155px override */
    padding: 0;
    min-width: 0;
    max-width: 100%;
  }

  /* 6. h1 (제목) — 갤러리 h2 와 동일 톤 */
  body.tmplat1 .ptg-thumail-list .list_type .data_info h1 {
    font-size: 16px;
    font-weight: bold;
    -webkit-line-clamp: 2;
    padding-right: 0;
    word-break: break-word;
    line-height: 1.35;
    margin: 0;
  }

  /* 7. 그래프 설명 / 유사데이터 버튼 — 숨김 (사용자 결정) */
  body.tmplat1 .ptg-thumail-list .list_type .data_info .graph-description,
  body.tmplat1 .ptg-thumail-list .list_type .data_info button {
    display: none;
  }

  /* 8. 메타 영역 p — static + 좌우 분할 (날짜 좌, 조회수 우) */
  body.tmplat1 .ptg-thumail-list .list_type .data_info p {
    position: static;
    display: flex;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    margin: 0;
    font-size: 12px;                   /* 갤러리 .item-info 동일 */
    color: #6b7280;                    /* 갤러리 톤 동일 */
    line-height: 1;
  }

  /* 9. 메타 span 공통 — inline-flex 정렬, 갤러리 .view / .date 동일 룩 */
  body.tmplat1 .ptg-thumail-list .list_type .data_info p span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex: 0 0 auto;
    width: auto;
    max-width: 50%;
    padding: 0;
    overflow: visible;
    white-space: nowrap;
  }

  /* 10. 메타 아이콘 (갤러리 .item-info img 정책 동일) */
  body.tmplat1 .ptg-thumail-list .list_type .data_info p span img {
    width: 13px;
    height: 13px;
    max-width: 13px;
    max-height: 13px;
    display: block;
    border: 0;
    margin: 0;
    padding: 0;
    transform: none;
    transition: none;
  }

  /* 11. 메타 숨김 — 카테고리·등록자·좋아요·데이터원천(relay)·pbcDivNm */
  body.tmplat1 .ptg-thumail-list .list_type .data_info p .category,
  body.tmplat1 .ptg-thumail-list .list_type .data_info p span:has(img[alt="등록자"]),
  body.tmplat1 .ptg-thumail-list .list_type .data_info p span:has(img[alt="좋아요"]),
  body.tmplat1 .ptg-thumail-list .list_type .data_info p span:has(img[alt="데이터 원천"]),
  body.tmplat1 .ptg-thumail-list .list_type .data_info p span:not(:has(img)) {
    display: none !important;
  }

  /* 12. 형제 .graph-carousel — 모바일 숨김 (사용자 결정) */
  body.tmplat1 .ptg-thumail-list .list_type > .graph-carousel {
    display: none;
  }
}

@media (max-width: 480px) {

  /* 1'. 외곽 — 1열 카드 간 수직 간격 (사용자 결정: 480px 이하 1열 전환) */
  body.tmplat1 .ptg-thumail-list {
    gap: 12px;
  }

  /* 2'. 카드 폭 100% (1열) — 가독성·터치 타겟 우선, 갤러리는 2열 유지 분기 */
  body.tmplat1 .ptg-thumail-list .list_type {
    width: 100%;
    max-width: 100%;
    padding: 12px;                     /* 1열 시인성, 768과 동일 */
    border-radius: 12px;
    gap: 8px;
  }

  /* 3'. .list_type_body 내부 gap — 768과 동일 유지 */
  body.tmplat1 .ptg-thumail-list .list_type > .list_type_body {
    gap: 8px;
  }

  /* 4'. 썸네일 — 1열 카드 폭 활용, letterbox 방지 max-height 상향 */
  body.tmplat1 .ptg-thumail-list .list_type .thumnail img {
    max-width: 100%;
    height: auto;
    max-height: 220px;                 /* 1열 폭 활용, 768의 200 → 220 */
    margin: 0;
  }

  /* 5'. h1 — 1열에서 16px 유지(가독성), 좁은 폭 이슈 없음 */
  body.tmplat1 .ptg-thumail-list .list_type .data_info h1 {
    font-size: 16px;
    line-height: 1.35;
  }

  /* 6'. 메타 — 12px 유지, gap 약간 여유 */
  body.tmplat1 .ptg-thumail-list .list_type .data_info p {
    font-size: 12px;
    gap: 8px;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  body.tmplat1 .ptg-album-list { gap: 16px; justify-content: flex-start; }
  body.tmplat1 .ptg-album-list .ptg-album-item { margin: 0; }
}

@media (max-width: 480px) {


  body.tmplat1 .ptg-album-list .ptg-album-item {
    width: 100%;
    max-width: 100%;
    border-radius: 12px;
    border: 1px solid #ccc;
  }
}

@media (max-width: 480px) {

  body.tmplat1 .ptg-album-list {
    justify-content: flex-start;
    gap: 16px;
  }

  /* 글로벌 margin(0 15 15 0)·height:350 제거 → 내용 높이 자연 흐름,
   * column flow 상단 정렬로 제목 상단 붙임 (하단 공백 해소, P0) */
  body.tmplat1 .ptg-album-list .ptg-album-item {
    margin: 0;
    height: auto;
    justify-content: flex-start;
  }

  /* 메타(.item-info) 글로벌 position:absolute;bottom:20px 해제 →
   * 정상 흐름 배치로 바닥 분리 제거 (하단 공백 해소, P0) */
  body.tmplat1 .ptg-album-list .ptg-album-item .item-info {
    position: static;
  }

  body.tmplat1 .ptg-album-list .ptg-album-item .item-title img {
    width: 100%;
    max-width: 100%;
    height: auto;
    margin-bottom: 6px;
    max-height: 220px;
  }
}

/* 중계검색 안내 문구 — 상단 .bridge_list 진청색 박스 톤과 정합 */
body.tmplat1 .tmplat1-main p.info {
    color: #fff;
    text-align: center;
}