@charset "UTF-8";


body {
	overflow: auto;
}

section {
	margin-bottom: 40px;
}

input::-ms-clear, input::-ms-reveal {
	position: absolute;
	overflow: hidden;
	top: 0;
	left: 0;
	width: 0 !important;
	height: 0 !important;
	font-size: 0 !important;
	line-height: 0 !important;
	display: none;
}

input::-webkit-search-decoration, input::-webkit-search-cancel-button, input::-webkit-search-results-button, input::-webkit-search-results-decoration {
	display: none;
}

footer {
	width: 100%;
	color: #fff;
	background: #0d2b43;
}

footer .ptg-footer {
	width: 1200px;
	padding: 40px 0px;
	margin: 0 auto;
	font-size: 12px;
}

footer .ptg-footer span {
	margin-right: 15px;
	line-height: 180%;
}

footer .ptg-footer span:last-child {
	margin: 0px;
}

nav.ptg-pagination {
	height: auto;
}

/* 헤더 */
.header-wrapper {
	padding: 16px 0 14px 0;
}

.header-wrapper .gnb {
	line-height: 13px;
	display: flex;
	align-items: center;
}

.header-wrapper .gnb a {
	padding: 0px 13px;
	border-right: 1px solid #b4b4b4;
}

.header-wrapper .gnb a:last-child {
	border-right: 0px;
}

.red-mj-top {
	width: 100%;
	height: 90px;
	position: relative;
	background: transparent linear-gradient(104deg, #72BE59 0%, #009E9A 48%, #004EA1 100%) 0% 0% no-repeat padding-box;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.red-mj-top .wrap {
	width: 1200px;
	margin: 0 auto;
}

.red-mj-top .wrap .logo {
	text-align: center;
	padding-top: 30px;
}

.red-mj-top .wrap .logo img {
	width: auto;
}

.red-mj-top .wrap .log {
	position: relative;
	top: -30px;
	font-size: 15px;
	color: #fff;
	text-align: right;
}

.red-mj-top .wrap .log span {
	margin: 0px 10px;
	cursor: pointer;
}

.red-mj-top .wrap .log span:last-child {
	margin-right: 0px;
}

.red-mj-top .wrap .log span:hover {
	text-decoration: underline;
}

.red-mj-top .wrap .log .member {
	margin-right: 20px;
	opacity: 50%;
	text-decoration: none;
}

/* 피타RED 템플릿1 */
.tmplat1-main {
	width: 100%;
	background-color: #0c1d3b;
	padding: 40px 0;
}

body.tmplat1 .ptg-w1200 {
	padding: 0 16px;
}

body.tmplat1 .tmplat1-main .search_box {
	width: 560px;
	max-width: 100%;
	display: flex;
	align-items: stretch;
	margin: 0 auto;
	padding-top: 10px;
	box-sizing: border-box;
	/* [clear 버튼] X 버튼을 입력창 우측에 절대 배치하기 위한 기준 컨테이너 */
	position: relative;
}
body.tmplat1 .tmplat1-main .search_box .search_field {
	flex: 1 1 auto;
	min-width: 0;
	height: 60px;
	padding: 16px;
	/* [clear 버튼] X 버튼과 입력 텍스트가 겹치지 않도록 우측 여백 확보 */
	padding-right: 44px;
	border: 0;
	font-size: 16px;
	color: #2b2b2b;
	box-sizing: border-box;
	outline: 0;
	border-radius: 10px 0 0 10px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}
body.tmplat1 .tmplat1-main .search_box .btn_search {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 60px;
	width: 60px;
	height: 60px;
	padding: 10px;
	border: 0;
	background-color: #004EA1;
	box-sizing: border-box;
	border-radius: 0 10px 10px 0;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
	cursor: pointer;
	transition: background 0.14s ease, transform 0.12s ease;
}
body.tmplat1 .tmplat1-main .search_box .btn_search:hover {
	background-color: #003a78;
}
body.tmplat1 .tmplat1-main .search_box .btn_search:active {
	transform: scale(0.96);
}

/* -------------------------------------------------------------------------
 * [clear 버튼] 검색어 지우기(X) 버튼
 * - .search_box(position:relative) 기준으로 입력창 우측, 검색 버튼(60px) 왼쪽에 절대 배치.
 * - 입력값이 있을 때만 .is-visible 부여(common.js) → display 토글.
 * - input[type=search] 의 브라우저 기본 X(::-webkit-search-cancel-button)는 숨겨 중복 방지.
 * ------------------------------------------------------------------------- */
body.tmplat1 .tmplat1-main .search_box .search_field::-webkit-search-cancel-button {
	-webkit-appearance: none;
	appearance: none;
}
body.tmplat1 .tmplat1-main .search_box .btn_clear {
	display: none;
	position: absolute;
	top: 12px;
	right: 60px; /* 검색 버튼 폭(60px) 만큼 안쪽 */
	width: 36px;
	height: 60px;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	color: #8a8a8a;
	font-size: 22px;
	line-height: 1;
	cursor: pointer;
	align-items: center;
	justify-content: center;
	transition: color 0.12s ease, transform 0.12s ease;
}
body.tmplat1 .tmplat1-main .search_box .btn_clear.is-visible {
	display: inline-flex;
}
body.tmplat1 .tmplat1-main .search_box .btn_clear:hover {
	color: #2b2b2b;
}
body.tmplat1 .tmplat1-main .search_box .btn_clear:active {
	transform: scale(0.9);
}

body.tmplat1 .tmplat1-main .check_label {
	width: 560px;
	max-width: 100%;
	margin: 8px auto 0;
	padding: 0;
	box-sizing: border-box;
	display: flex;
	justify-content: flex-start;
}
body.tmplat1 .tmplat1-main .check_label > label,
body.tmplat1 .tmplat1-main label.check_label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	position: relative;
}
body.tmplat1 .tmplat1-main .checkbox {
	/* display:none 대체 — 포커스/접근성 트리 유지(visually-hidden) */
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	border: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}
body.tmplat1 .tmplat1-main .checkbox-image {
	/* pill 트랙 */
	width: 40px;
	height: 22px;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.28);
	background-image: none;
	position: relative;
	top: 0;
	margin: 0;
	flex: 0 0 auto;
	transition: background 0.15s ease;
}
body.tmplat1 .tmplat1-main .checkbox-image::after {
	/* 슬라이딩 핸들 */
	content: "";
	position: absolute;
	top: 2px;
	left: 2px;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	background: #fff;
	transition: transform 0.15s ease;
}
body.tmplat1 .tmplat1-main .checkbox:checked + .checkbox-image {
	background: #2e7fff;
	background-image: none; /* 기존 L556 checked.svg 무력화 */
}
body.tmplat1 .tmplat1-main .checkbox:checked + .checkbox-image::after {
	transform: translateX(18px);
}
body.tmplat1 .tmplat1-main .checkbox:focus-visible + .checkbox-image {
	outline: 2px solid #fff;
	outline-offset: 2px;
}
body.tmplat1 .tmplat1-main .check_txt {
	color: #fff;
	font-size: 14px;
	cursor: pointer;
	-webkit-user-select: none;
	user-select: none;
}

/* 인기 검색어 */
.tmplat1-main .keyword {
	width: 100%;
	height: 50px;
	line-height: 50px;
	overflow: hidden;
	margin: 0 auto;
	font-weight: bold;
	color: #fff;
	margin-top: 10px;
	text-align: center;
}

.tmplat1-main .keyword p {
	margin: 0px;
}

.tmplat1-main .keyword span {
	border: 1px solid #ccc;
	border-radius: 20px;
	padding: 4px 15px 3px 15px;
	margin-left: 10px;
	font-size: 15px;
	font-weight: normal;
	cursor: pointer;
}

.tmplat1-main .keyword span:first-child {
	margin-left: 15px;
}

/* 인도네시아 검색 결과 탭 버튼 */
.tab_group {
	border-bottom: 1px solid #B4B4B4;
	font-size: 0px;
}

.tab_btn, .relay_tab_btn {
	width: 200px;
	height: 50px;
	background-color: #fff;
	border: 1px solid #B4B4B4;
	border-radius: 10px 10px 0px 0px;
	color: #000;
	padding: 15px 32px;
	text-align: center;
	text-decoration: none;
	display: inline-block;
	font-size: 14px;
	margin: 0px -1px -1px 0;
	cursor: pointer;
}

.tab_btn:hover, .relay_tab_btn:hover {
	background-color: #F7F7F7;
}

.tab_btn.clicked, .relay_tab_btn.clicked {
	background-color: #F39702;
	color: #fff;
	border: 0px;
	position: relative;
	z-index: 1;
}

/* 카테고리 */
.tmplat1-main .category {
	margin-top: 30px;
}

.tmplat1-main .category ul {
	list-style: none;
	padding: 0;
	margin: 0;
}

/* 버튼 스타일 */
.tmplat1-main .category li {
	display: inline-block;
	width: 240px;
	height: 60px;
	line-height: 60px;
	text-align: center;
	color: #fff;
	cursor: pointer;
	border-right: 1px solid #ffffff2e;
	border-bottom: 1px solid #ffffff2e;
	box-sizing: border-box;
	font-size: 14px;
	background: #0062B2;
}

/* 클릭시 배경색 변경 */
.tmplat1-main .category li:hover, li:focus {
	background-color: #0254a7;
	color: #fff;
}

/* 선택된 버튼 스타일 */
.tmplat1-main .category li.selected {
	background-color: #004284;
	color: #fff;
}

/* 버튼을 가로로 4개 배치 */
.tmplat1-main .category .button-group {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	margin: 0 auto;
	max-width: 1200px;
	justify-content: flex-start;
}

/* 2줄 배치 */
.tmplat1-main .category .button-group>li:nth-child(5n+1) {
	border-left: 1px solid #ffffff2e;
}

.tmplat1-main .category .button-group>li:nth-child(-n+5) {
	border-top: 1px solid #ffffff2e;
}

.ptg-pagination .ptg-pagination-wrapper .ptg-pagination-number-selected {
	background-color: #004EA1;
	color: #fff;
}

.search-result .menu button {
	border: 0px;
	font-size: 14px;
	padding: 9px 15px 7px 15px;
	border-radius: 0.25rem;
	background: #90b2d7;
	color: #fff;
	margin-right: 5px;
	box-sizing: border-box;
	height: 36px;
}

.search-result .menu button:hover {
	background: #004EA1;
}

.search-result .menu button:last-child {
	margin-right: 0px;
}

.search-result .menu .on {
	background: #004EA1;
	cursor: default;
}

/* 중계 */
/* 중계검색 결과 리스트 메뉴 */
.bridge_list {
	display: flex;
	justify-content: space-between;
	align-items: center;
	overflow: hidden;
	background: #F39702;
	color: #fff;
	margin: 25px 0px 15px 0px;
}

.bridge_list ul {
	position: relative;
	width: 90%;
	height: 100%;
	z-index: 1;
	display: flex;
	flex-wrap: wrap;
	transition-property: transform;
	box-sizing: content-box;
	padding: 10px 0px 10px 15px;
	background: #0062B2;
	min-height: 45px;
}

.bridge_list li .on {
	background: #F39702;
	border: 1px solid #F39702;
}

.bridge_list .title {
	background-color: #00000000;
}

/* 230904_추가 */
.top_line {
	width: 100%;
	height: 25px;
	position: absolute;
	top: 0;
	left: 0;
	background: repeating-linear-gradient(90deg, #1B52A2, #1B52A2 25px, #FFE971 25px, #FFE971 50px);
}

/* 푸터 */
.red-mj-footer {
	width: 100%;
	height: 120px;
	margin-top: 130px;
	padding-top: 40px;
	display: block;
	box-sizing: border-box;
	font-size: 12px;
	text-align: center;
	background-color: #004EA1;
}

.red-mj-footer span {
	margin-left: 20px;
	position: relative;
	color: #fff;
	top: -14px;
	opacity: 50%;
}

.red-mj-footer img {
	opacity: 50%;
}

@media screen and (min-height: 800px) {
	.red-mj-footer {
		position: static;
	}
}

/* =========================================================================
 * template1 반응형 오버라이드 (body.tmplat1 스코프 한정)
 * -------------------------------------------------------------------------
 * 적용 범위: template1 레이아웃을 사용하는 모든 페이지 (graphList/graphDetail/
 *           relayGraphList/relayGraphDetail 등)
 * 주의: 공통 CSS(cmmn/common.css, cmmn/layout.css, red/red.css,
 *      red/red-graphList.css)는 수정하지 않는다.
 *      body.tmplat1 마커는 template1/layout.jsp의 body 태그에만 존재하므로,
 *      본 규칙들은 다른 템플릿/페이지에 영향을 주지 않는다.
 * 브레이크포인트:
 *   - 1200px 이하: 태블릿 (min-width 잠금 해제, 컨테이너 유동)
 *   - 768px  이하: 모바일 (주요 세로 스택)
 *   - 480px  이하: 소형 모바일 (입력/버튼 압축)
 * ========================================================================= */

/* 이미지 기본 반응형 — template1 범위 내 모든 img 에 적용 */
/* body.tmplat1 img {
	max-width: 100%;
} */

@media (max-width: 1200px) {
	html.tmplat1-html {
		/* min-width: 1250px (cmmn/layout.css L8) + min-width: 1200px
		 * (cmmn/common.css L27) 잠금 해제용 — !important 필요 */
		min-width: 0 !important;
		max-width: 100vw;
		overflow-x: hidden;
	}

	/* 공통 layout.css 의 .header-wrapper{width:1200px} 잠금 해제 */
	body.tmplat1 .header-wrapper {
		width: auto;
		max-width: 1200px;
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}


	body.tmplat1 .contents-wrapper {
		width: auto;
		max-width: 1200px;
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}

	/* body.tmplat1 .ptg-album-list {
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	} */

	/* red-mj-top (상단 그라디언트 바) 내부 wrap */
	body.tmplat1 .red-mj-top .wrap {
		width: auto;
		max-width: 1200px;
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}

	/* footer */
	body.tmplat1 footer .ptg-footer {
		width: auto;
		max-width: 1200px;
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}

	body.tmplat1 .tmplat1-main .category {
		/* padding-left: 16px;
		padding-right: 16px; */
		box-sizing: border-box;
	}
	body.tmplat1 .tmplat1-main .category .button-group {
		max-width: 100%;
		box-sizing: border-box;
	}

	/* 카테고리 li 폭: 1200/5 ≈ 240 → 화면 폭의 20%로 유동 */
	body.tmplat1 .tmplat1-main .category li {
		width: 20%;
	}
}

@media (min-width: 1201px) {
	/* body.tmplat1 .tmplat1-main .category {
		padding: 0 16px;
		box-sizing: border-box;
	} */
	body.tmplat1 .tmplat1-main .category .button-group {
		max-width: 100%;
		box-sizing: border-box;
	}
	body.tmplat1 .tmplat1-main .category li {
		width: 20%;
	}
}

@media (min-width: 1201px) {
	html.tmplat1-html {
		overflow-x: hidden;
	}
}


@media (min-width: 1201px) and (max-width: 1280px) {
	body.tmplat1 .header-wrapper,
	body.tmplat1 .contents-wrapper,
	body.tmplat1 .red-mj-top .wrap,
	body.tmplat1 footer .ptg-footer,
	body.tmplat1 .ptg-album-list {
		width: 100%;
		max-width: 1200px;
	}
	
	body.tmplat1 .header-wrapper {
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}

	body.tmplat1 .ptg-album-list {
		gap: 16px;
	}
	body.tmplat1 .ptg-album-list .ptg-album-item {
		width: calc((100% - 4 * 16px) / 5);
		margin: 0;
	}
	body.tmplat1 .ptg-album-list .ptg-album-item:nth-of-type(5n) { margin-right: 0; }
}

@media (max-width: 768px) {
	/* 헤더: 로고/GNB 세로 스택 */
	body.tmplat1 .header-wrapper {
		flex-direction: column;
		align-items: flex-start;
		gap: 10px;
	}
	body.tmplat1 .header-wrapper .gnb {
		flex-wrap: wrap;
	}
	body.tmplat1 .header-wrapper .gnb a {
		padding: 0 10px;
	}

	/* red-mj-top 높이 자동, 로고/로그인 세로 스택 */
	body.tmplat1 .red-mj-top {
		height: auto;
		padding: 16px 0;
	}
	body.tmplat1 .red-mj-top .wrap .logo {
		padding-top: 10px;
	}
	body.tmplat1 .red-mj-top .wrap .logo img {
		max-height: 40px;
	}
	body.tmplat1 .red-mj-top .wrap .log {
		position: static;
		margin-top: 10px;
		text-align: center;
	}

	/* -------------------------------------------------------------------
	 * 카테고리 영역 — 모바일 압축(P0)
	 * - 토글 체크박스 자체는 숨기고 label 만 버튼으로 노출
	 * - 기본 상태(체크 해제): 상위 5개 칩만 노출, 6번째부터 숨김(P2 요구)
	 *   "카테고리 ▼" 버튼은 상위 5개 아래 인라인으로 노출
	 * - 체크 시: 나머지 칩도 inline-flex 로 복귀 (칩 그리드 연결)
	 * ------------------------------------------------------------------- */
	body.tmplat1 .tmplat1-main .category {
		margin-top: 12px;
	}

	/* 체크박스 hack — 실제 입력은 접근성 유지를 위해 offscreen */
	body.tmplat1 .tmplat1-cat-toggle {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		border: 0;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	body.tmplat1 .tmplat1-cat-toggle-label {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: 6px;
		margin: 10px 16px 0;
		padding: 6px 14px;
		min-height: 32px;
		border: 1px solid rgba(255, 255, 255, 0.45);
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.10);
		color: #fff;
		font-size: 13px;
		font-weight: 500;
		cursor: pointer;
		box-sizing: border-box;
		user-select: none;
	}
	body.tmplat1 .tmplat1-cat-toggle-label:hover,
	body.tmplat1 .tmplat1-cat-toggle:focus-visible ~ .tmplat1-cat-toggle-label {
		background: rgba(255, 255, 255, 0.16);
	}
	body.tmplat1 .tmplat1-cat-toggle-icon {
		display: inline-block;
		width: 0;
		height: 0;
		border-left: 5px solid transparent;
		border-right: 5px solid transparent;
		border-top: 6px solid #fff;
		transition: transform 180ms ease;
	}
	body.tmplat1 .tmplat1-cat-toggle:checked ~ .tmplat1-cat-toggle-label .tmplat1-cat-toggle-icon {
		transform: rotate(180deg);
	}

	body.tmplat1 .tmplat1-cat-toggle ~ .category {
		display: block;
	}
	body.tmplat1 .tmplat1-cat-toggle ~ .category .button-group > li:nth-child(n+6) {
		display: none;
	}
	/* 체크 시: 6번째 이후 칩 복귀 (위 아래 규칙 모두 체크 상태에서 덮어써야 하므로
	 *          선택자 구체성 동등 → 뒤에 선언된 이 규칙이 승리) */
	body.tmplat1 .tmplat1-cat-toggle:checked ~ .category .button-group > li:nth-child(n+6) {
		display: inline-flex;
	}

	/* 칩 그리드 — 데스크톱 블록 스타일 완전 리셋 */
	body.tmplat1 .tmplat1-main .category .button-group {
		display: flex;
		flex-wrap: wrap;
		gap: 8px;
		padding: 12px 16px 0;
		max-width: 100%;
		justify-content: flex-start;
	}
	body.tmplat1 .tmplat1-main .category li {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: auto;
		height: auto;
		min-height: 32px;
		line-height: 1.3;
		padding: 6px 12px;
		border: 1px solid rgba(255, 255, 255, 0.35);
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.06);
		color: #fff;
		font-size: 13px;
		box-sizing: border-box;
	}

	body.tmplat1 .tmplat1-main .category li:hover,
	body.tmplat1 .tmplat1-main .category li:focus {
		background: rgba(255, 255, 255, 0.16);
		color: #fff;
	}
	/* 선택 상태만 강조 */
	body.tmplat1 .tmplat1-main .category li.selected {
		background: #004284;
		border-color: #fff;
		color: #fff;
	}


	/* footer */
	body.tmplat1 footer .ptg-footer {
		padding: 20px 16px;
	}
	body.tmplat1 footer .ptg-footer span {
		display: inline-block;
		margin-right: 8px;
	}

	body.tmplat1 .red-mj-footer {
		height: auto;
		margin-top: 60px;
		padding: 20px 16px;
	}
	body.tmplat1 .red-mj-footer span {
		display: block;
		margin: 6px 0;
		top: 0;
	}

	body.tmplat1 footer .footer-wrapper {
		flex-direction: column-reverse;                      /* JSP 순서(logo→address) 유지하되 시각 순서 역전 */
		align-items: center;                                 /* 가로 가운데 */
		justify-content: center;
		padding: 24px 16px 28px;                             /* 좌측 60px 편중 제거 */
		font-size: 11px;                                     /* 기본 0.9em → 11px 로 축소 */
		line-height: 1.5;                                    /* 기본 1.6 → 1.5 로 컴팩트 */
		color: rgba(255, 255, 255, 0.60);
		gap: 14px;                                           /* 텍스트 ↔ 로고 사이 여백 */
		text-align: center;
	}
	body.tmplat1 footer .footer-wrapper .footer-logo {
		width: auto;                                         /* 기본 25% 잠금 해제 */
		display: flex;
		justify-content: center;
	}
	body.tmplat1 footer .footer-wrapper .footer-logo img {
		width: 140px;                                        /* 기본 197px → 140px (모바일 적정) */
		height: auto;
		max-width: 100%;
		opacity: 1;                                          /* 워터마크 겹침 제거 */
	}
	body.tmplat1 footer .footer-wrapper .footer-address {
		width: 100%;                                         /* 기본 75% 잠금 해제 */
		max-width: 100%;
		text-align: center;
		word-break: keep-all;
	}
	body.tmplat1 footer .footer-wrapper .footer-a {
		color: rgba(255, 255, 255, 0.78);
	}

	body.tmplat1 .bridge_list {
		flex-direction: column;
		align-items: stretch;                                /* 자식 100% 폭 보장 */
	}
	body.tmplat1 .bridge_list .title {
		width: 100%;
		padding: 8px 12px;
		box-sizing: border-box;
		/* 시각 톤(font-size/color/background)은 데스크톱 base 그대로 유지 */
	}
	body.tmplat1 .bridge_list ul {
		width: 100%;
		box-sizing: border-box;
	}
	body.tmplat1 .bridge_list li .on {
		background-image: none;
		padding-left: 8px;
		padding-right: 8px;                                  /* 명시 — 좌우 대칭 보장 */
	}

	body.tmplat1 .bridge_list .title {
		display: flex;
		align-items: center;
		justify-content: center;
		line-height: 1.4;
	}
	body.tmplat1 .bridge_list li {
		flex: 0 0 auto;
	}
	body.tmplat1 .bridge_list li span {
		width: auto;
		white-space: nowrap;
		word-break: keep-all;
		border: 1px solid rgba(255, 255, 255, 0.35);
		border-radius: 25px;
		padding: 5px 12px;
	}
}

/* -------------------------------------------------------------------------
 * 480px 이하: 소형 모바일
 * 카테고리는 위 768px 규칙의 칩 그리드를 그대로 상속 — 별도 1열 규칙 삭제.
 * ------------------------------------------------------------------------- */
@media (max-width: 480px) {
	body.tmplat1 .tmplat1-cat-toggle-label {
		font-size: 13px;
		padding: 8px 14px;
	}

	body.tmplat1 footer .footer-wrapper {
		padding: 20px 12px 22px;
		font-size: 10.5px;
		gap: 12px;
	}
	body.tmplat1 footer .footer-wrapper .footer-logo img {
		width: 120px;                                        /* 140 → 120 (세로폭 적정) */
	}
}

/* -------------------------------------------------------------------------
 * 769px 이상: PC — 토글 UI 숨김 + .category 강제 노출
 * label/checkbox 는 모바일 전용이므로 PC 에서는 완전히 감춘다.
 * ------------------------------------------------------------------------- */
@media (min-width: 769px) {
	body.tmplat1 .tmplat1-cat-toggle,
	body.tmplat1 .tmplat1-cat-toggle-label {
		display: none;
	}
	body.tmplat1 .tmplat1-cat-toggle ~ .category {
		display: block;
	}
}


/* ---------------------------------------------------------------------
 * T7. 포커스 링 — 데스크톱/모바일 공통, 접근성 키보드 네비게이션 강화
 * outline 속성만 사용 (border/layout 비영향)
 * --------------------------------------------------------------------- */
body.tmplat1 a:focus-visible,
body.tmplat1 button:focus-visible,
body.tmplat1 select:focus-visible,
body.tmplat1 input:focus-visible,
body.tmplat1 .tmplat1-main .category li:focus-visible,
body.tmplat1 .tmplat1-cat-toggle:focus-visible ~ .tmplat1-cat-toggle-label {
	outline: 2px solid #0066cc;
	outline-offset: 2px;
	border-radius: 6px; /* outline 가시성용 — 실제 배경 radius와 독립 */
}

@media (max-width: 768px) {
	html:has(body.tmplat1) {
		scroll-padding-top: 56px;  /* sticky 헤더(48) + 여유 */
	}
}

/* ---------------------------------------------------------------------
 * T7. prefers-reduced-motion — 애니메이션/트랜지션 최소화
 * transform/opacity 전환을 제거하고 즉시 적용.
 * --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	body.tmplat1 *,
	body.tmplat1 *::before,
	body.tmplat1 *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* ---------------------------------------------------------------------
 * 모바일 전용 트렌드 규칙 (768px 이하)
 * --------------------------------------------------------------------- */
@media (max-width: 768px) {

	/* -----------------------------------------------------------------
	 * T2. Sticky / Compact Header (frosted glass)
	 * - #header-contents 를 sticky 로 고정
	 * - backdrop-filter blur + 반투명 배경
	 * - 스크롤 시 로고 축소 효과는 CSS-only 로 완전 재현 불가 → 초기부터
	 *   컴팩트(로고 높이 36px, padding 축소)하게 고정. 기존 768px 규칙의
	 *   세로 스택을 가로 정렬로 되돌려 높이를 낮춘다.
	 * - backdrop-filter 미지원 시 fallback: rgba(255,255,255,.96) 단색
	 * ----------------------------------------------------------------- */
	body.tmplat1 #header-contents {
		position: sticky;
		top: 0;
		z-index: 50;
		background: rgba(255, 255, 255, 0.96);           /* fallback */
		-webkit-backdrop-filter: saturate(180%) blur(12px);
		backdrop-filter: saturate(180%) blur(12px);
		box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
	}
	/* backdrop-filter 지원 시에만 반투명 한 단계 더 — progressive enhancement */
	@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
		body.tmplat1 #header-contents {
			background: rgba(255, 255, 255, 0.82);
		}
	}

	/* 헤더 내부 컴팩트 — 768px 규칙의 flex-direction:column 을 되돌림 */
	body.tmplat1 .header-wrapper {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		gap: 10px;
		padding: 8px 16px;
		min-height: 48px;
	}
	body.tmplat1 .header-wrapper .logo img {
		max-height: 28px;
		width: auto;
	}
	body.tmplat1 .header-wrapper .gnb {
		flex-wrap: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;       /* Firefox */
	}
	body.tmplat1 .header-wrapper .gnb::-webkit-scrollbar {
		display: none;               /* Chrome/Safari */
	}
	body.tmplat1 .header-wrapper .gnb a {
		padding: 0 8px;
		font-size: 12px;
		white-space: nowrap;
		border-right: 1px solid #d8d8d8;
	}
	body.tmplat1 .header-wrapper .gnb a:last-child {
		border-right: 0;
	}

	/* -----------------------------------------------------------------
	 * T3. Hero / Glass 검색 — .tmplat1-main 내부 칩/토글 글래스모픽
	 * 인기검색어(.keyword span) + 카테고리 토글 라벨을 동일 스타일로 통일
	 * ----------------------------------------------------------------- */
	body.tmplat1 .tmplat1-main .keyword span {
		background: rgba(255, 255, 255, 0.08);
		border: 1px solid rgba(255, 255, 255, 0.28);
		color: #fff;
		backdrop-filter: blur(4px);
		-webkit-backdrop-filter: blur(4px);
		transition: background 140ms ease, transform 120ms ease;
	}
	body.tmplat1 .tmplat1-main .keyword span:active {
		background: rgba(255, 255, 255, 0.22);
		transform: scale(0.96);
	}

	/* 카테고리 토글 라벨 — 768px 기본 스타일에 이미 글래스 느낌 적용됨,
	 * 여기서는 터치 피드백만 추가 */
	body.tmplat1 .tmplat1-cat-toggle-label {
		transition: background 140ms ease, transform 120ms ease, box-shadow 140ms ease;
		backdrop-filter: blur(6px);
		-webkit-backdrop-filter: blur(6px);
	}
	body.tmplat1 .tmplat1-cat-toggle-label:active {
		transform: scale(0.98);
		background: rgba(255, 255, 255, 0.2);
	}

	/* -----------------------------------------------------------------
	 * T8. 카테고리 칩 가독성 개선 (다크 네이비 배경 위)
	 * - 기본 배경 대비 상향: .06 → .10
	 * - 테두리 대비 상향: .35 → .45
	 * - 선택 시 배경 흰색 + 텍스트 navy + 체크 아이콘 ::before
	 * ----------------------------------------------------------------- */
	body.tmplat1 .tmplat1-main .category li {
		background: rgba(255, 255, 255, 0.10);
		border-color: rgba(255, 255, 255, 0.45);
		transition: background 140ms ease, color 140ms ease, transform 120ms ease;
	}
	body.tmplat1 .tmplat1-main .category li:active {
		transform: scale(0.96);
		background: rgba(255, 255, 255, 0.22);
	}

	body.tmplat1 .tmplat1-main .category li.selected {
		position: relative;
		background: #ffffff;
		border-color: #ffffff;
		color: #0c1d3b;
		font-weight: 600;
	}
	body.tmplat1 .tmplat1-main .category li.selected::before {
		content: "";
		position: absolute;
		left: 8px;
		top: 50%;
		width: 8px;
		height: 4px;
		margin-top: -3px;
		border-left: 2px solid #0c1d3b;
		border-bottom: 2px solid #0c1d3b;
		transform: rotate(-45deg);
		display: none;
	}

	/* 칩 그리드 — 가로 스크롤 스냅 보조(필요 시) */
	body.tmplat1 .tmplat1-main .category .button-group {
		scroll-snap-type: x proximity;    /* 세로 wrap 이므로 proximity (선택적) */
	}

	body.tmplat1 .tmplat1-main {
		padding-top: 8px;
		position: relative;                 /* 자식들의 z-index 기준점 */
		z-index: 1;                          /* sticky 헤더(50) 아래이되 stacking context 분리 */
	}
	/* hero 내부 주요 요소: 명시적 flow 보장 */
	body.tmplat1 .tmplat1-main .search_box,
	body.tmplat1 .tmplat1-main .keyword,
	body.tmplat1 .tmplat1-cat-toggle-label,
	body.tmplat1 .tmplat1-main .category {
		position: relative;
		z-index: 1;
	}
}

/* ---------------------------------------------------------------------
 * 480px 이하 소형 모바일 — T2/T3/T8 미세 조정
 * --------------------------------------------------------------------- */
@media (max-width: 480px) {
	body.tmplat1 .header-wrapper {
		padding: 6px 12px;
		min-height: 44px;
	}
	body.tmplat1 .header-wrapper .logo img {
		max-height: 24px;
	}
	body.tmplat1 .header-wrapper .gnb a {
		padding: 0 6px;
		font-size: 11px;
	}
}


/* (가드 0) — 모바일 한정 안전한 box-sizing 정책
 * 데스크톱 PC(>1200px) 는 와일드카드를 적용하지 않아 기존 box-sizing 정책 유지 —
 * 컴포넌트별 명시적 box-sizing 선언을 의도치 않게 덮지 않음.
 * 모바일(≤1200px) 에서만 와일드카드 적용 — 카드/칩의 padding 을 폭에 포함시켜
 * calc((100% - gap)/N) 산식이 어떤 padding 값에서도 viewport 를 초과하지 않게 함.
 * 본 와일드카드 규칙은 더 높은 구체성의 명시적 box-sizing 선언을 덮지 못함 —
 * 안전. */
@media (max-width: 1200px) {
	body.tmplat1,
	body.tmplat1 *,
	body.tmplat1 *::before,
	body.tmplat1 *::after {
		box-sizing: border-box;
	}
}

@media (max-width: 1200px) {
	html:has(body.tmplat1) {
		max-width: 100%;
		overflow-x: hidden;
	}
	/* 공통 CSS의 html,body{min-width:1200~1250px} 잠금 해제.
	 * html 은 위 .tmplat1-html 마커로 처리, body 는 클래스로 풀 수 있음.
	 * (L509 블록을 본 위치로 병합 — 같은 @media (max-width:1200px) 조건 내 중복 정리,
	 * cascade 라스트-우선 결과 보존: min-width/width 는 본 위치에 흡수,
	 * overflow-x 는 hidden→clip progressive enhancement 패턴 유지) */
	body.tmplat1 {
		/* min-width: 1250px (cmmn/layout.css L8) 잠금 해제용 — !important 필요 */
		min-width: 0 !important;
		width: 100%;
		max-width: 100vw;
		overflow-x: hidden;
		overflow-x: clip;          /* clip 지원 시 sticky 부작용 회피 */
	}
}

@media (max-width: 1200px) {
	body.tmplat1 .red-mj-top,
	body.tmplat1 .tmplat1-main,
	body.tmplat1 .data-list,
	body.tmplat1 footer,
	body.tmplat1 .red-mj-footer {
		max-width: 100%;
		min-width: 0;              /* 공통 CSS min-width 잠금 잔재 방어 */
	}
	/* hero 만 별도로 overflow 보강 — 카테고리 칩이 어떤 자연 폭을 갖더라도
	 * hero 밖으로 새지 않도록. clip 지원 환경에서는 sticky/fixed 자손에도 안전. */
	body.tmplat1 .tmplat1-main {
		overflow-x: hidden;
		overflow-x: clip;
	}
}

/* (가드 3) — 모바일 768px 이하: 헤더 컨테이너 자체에서 가로 폭 잘라내기
 * (D) 원인 대응. GNB 가로 스크롤은 헤더 내부에만 한정. */
@media (max-width: 768px) {
	body.tmplat1 #header-contents {
		max-width: 100%;
		overflow-x: hidden;        /* sticky 자체는 vertical 만 사용하므로 안전 */
	}
	body.tmplat1 .header-wrapper {
		max-width: 100%;
		min-width: 0;
		/* 자식 GNB 가 자연 폭으로 펼쳐져도 wrapper 가 늘어나지 않도록 */
		overflow: hidden;
	}
	/* GNB 자체는 가로 스크롤 유지 (T2 정책) */
	body.tmplat1 .header-wrapper .gnb {
		max-width: 100%;
		min-width: 0;
	}
}

/* (가드 4) — 카테고리 칩 wrap 보장 (P0 핵심)
 * (A) 원인 대응. 768px 기존 규칙의 flex-wrap:wrap 이 일부 모바일 브라우저에서
 * 자식 min-width:auto 로 인해 우회되는 현상을 차단.
 * - .button-group: flex-wrap:wrap 강제, min-width:0, max-width:100%, padding 보존
 * - .button-group > li: min-width:0, flex-shrink:1
 *   (백업: 최대 폭을 viewport 의 1/2 수준으로 제한해 5칩 합산이 절대 viewport
 *    를 넘을 수 없도록 — "남북협력" 같은 짧은 라벨도 같이 wrap 됨)
 * !important 사용 사유: 동일/낮은 구체성으로 정의된 데스크톱 .button-group
 * 규칙이 일부 환경(custom CSS 캐시 잔재, 다운스트림 오버레이) 에서 모바일 규칙을
 * 우회할 수 있어 회귀 재발 차단을 위한 안전망. */
@media (max-width: 768px) {
	body.tmplat1 .tmplat1-main .category .button-group {
		display: flex !important;
		flex-wrap: wrap !important;
		max-width: 100%;
		min-width: 0;
		padding: 12px 16px 0;                /* 768px 기존 규칙과 동일 */
		margin: 0;
	}
	body.tmplat1 .tmplat1-main .category .button-group > li {
		min-width: 0;                        /* flex 자식의 자연 min-width 해제 — wrap 계산 정상화 */
		flex: 0 1 auto;                      /* shrink 허용으로 5칩이 viewport 초과 시 자연 wrap */
		max-width: 100%;
	}
}

/* (가드 5) — 480px 이하: 칩 폭 상한을 더 보수적으로
 * 두 줄 wrap 이 자연스럽게 이루어지도록 칩 하나의 max-width 제한. */
@media (max-width: 480px) {
	body.tmplat1 .tmplat1-main .category .button-group > li {
		max-width: 100%;          /* gap 8px 감안한 2칩/행 보장 */
	}
}

@media (max-width: 768px) {
	body.tmplat1 .ptg-album-list {
		max-width: 100%;
		min-width: 0;
		padding-left: 0;
		padding-right: 0;
	}
}

/* (가드 7) — search_box 등 hero 내부 폼 요소도 viewport 가드
 * 1200px 규칙에서 max-width:560px 이 적용됨. 모바일에서 자식 input/button 의
 * width 자연 합계가 부모를 늘리지 않도록 명시적 잠금. */
@media (max-width: 768px) {
	body.tmplat1 .tmplat1-main .keyword,
	body.tmplat1 .tmplat1-main .keyword p {
		max-width: 100%;
		min-width: 0;
	}
}


/* -------------------------------------------------------------------------
 * 작업 2) PC 헤더 로고 컴팩트화 — 769px 이상
 * -------------------------------------------------------------------------
 * cmmn/layout.css L66-72 의 .header-wrapper { width:1200px; padding:16px 0
 * 10px } + L61-63 .logo img { max-width:176px } 위에 height 잠금을 더해
 * 헤더 영역이 60~70px 안쪽으로 유지되도록 보장. 로고 옆 gnb (한글|English/
 * 로그인 등) 와 수직 가운데 정렬을 align-items:center 로 명시.
 * ------------------------------------------------------------------------- */
@media (min-width: 769px) {
	/* 헤더 컨테이너 — flex 정렬 명시 + 패딩 미세 조정.
	 * cmmn/layout.css 는 padding: 16px 0 10px (총 26px) + 로고 높이 ≈ 60~70px
	 * 였음. 패딩을 12px / 10px 로 살짝 줄이고 align-items:center 로 GNB 와
	 * 수직 정렬 일치. */
	body.tmplat1 .header-wrapper {
		align-items: center;
		padding-top: 12px;
		padding-bottom: 10px;
	}
	/* 로고 컨테이너 — flex-shrink 차단 (헤더 폭이 변해도 로고 영역 보장).
	 * .logo 자체 width 는 명시 안 함 → 자식 img 의 자연 폭만 차지. */
	body.tmplat1 .header-wrapper .logo {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
	}
	/* 로고 이미지 — height 명시로 시각 크기 안정화.
	 * 원본 528×126 비율(≈4.19:1) → height 40px 시 자연 폭 168px (max-width 176
	 * 안쪽). cmmn/layout.css 의 max-width:176 도 그대로 유지. */
	body.tmplat1 .header-wrapper .logo img {
		display: block;
		height: 40px;
		width: auto;
		max-width: 176px;       /* cmmn/layout.css L62 와 동일치 명시 — 안전망 */
		max-height: 40px;       /* 헤더 영역이 어떤 외부 영향에서도 40px 안쪽 */
	}
	/* GNB — 로고에 양보. min-width:0 으로 flex 자연 압축 허용. */
	body.tmplat1 .header-wrapper .gnb {
		min-width: 0;
		flex-shrink: 1;
	}
}

@media (max-width: 768px) {
	/* (가드 3 보정) — 양축 hidden → 가로만 hidden 으로 분리.
	 * 세로 잘림 위험 제거. GNB 가로 스크롤은 헤더 내부 한정 정책 유지. */
	body.tmplat1 .header-wrapper {
		overflow-x: hidden;
		overflow-y: visible;
	}

	body.tmplat1 .header-wrapper .logo {
		flex-shrink: 0;
		display: inline-flex;
		align-items: center;
		min-width: 0;            /* 부모 overflow-x 와 결합해 자연 폭 보장 */
	}
	body.tmplat1 .header-wrapper .logo a {
		display: inline-flex;
		align-items: center;
	}
	body.tmplat1 .header-wrapper .logo img {
		display: block;
		height: 28px;
		width: auto;
		max-height: 28px;
	}

	body.tmplat1 .header-wrapper .gnb {
		min-width: 0;
		flex-shrink: 1;
	}
}

@media (max-width: 480px) {
	body.tmplat1 .header-wrapper .logo img {
		height: 24px;
		max-height: 24px;
	}
}


@media (max-width: 768px) {
	body.tmplat1 .header-wrapper {
		overflow-x: hidden !important;       /* 가로 가드 유지 */
		overflow-y: visible !important;      /* 세로 가시성 보장 — 자식 로고/GNB 잘림 차단 */
	}
}

@media (max-width: 768px) {
	body.tmplat1 #header-contents {
		display: block;
		visibility: visible;
		opacity: 1;
		min-height: 48px;
		transform: translateZ(0);
	}
}
@media (max-width: 480px) {
	body.tmplat1 #header-contents {
		min-height: 44px;
	}
}

@media (max-width: 768px) {
	body.tmplat1 .header-wrapper,
	body.tmplat1 .header-wrapper .logo,
	body.tmplat1 .header-wrapper .logo a,
	body.tmplat1 .header-wrapper .logo img,
	body.tmplat1 .header-wrapper .gnb,
	body.tmplat1 .header-wrapper .gnb a {
		visibility: visible;
		opacity: 1;
	}
	/* display 만은 각 요소 타입별로 분리해서 부여 — 일괄 inline-flex 는 부적절 */
	body.tmplat1 .header-wrapper .logo,
	body.tmplat1 .header-wrapper .logo a {
		display: inline-flex;
		align-items: center;
	}
	body.tmplat1 .header-wrapper .logo img {
		display: block;
	}
	body.tmplat1 .header-wrapper .gnb {
		display: flex;
	}
	body.tmplat1 .header-wrapper .gnb a {
		display: inline-block;
	}
}

@media (max-width: 768px) {
	body.tmplat1 .tmplat1-main {
		padding-top: 60px;       /* 헤더 48 + 여유 12 */
	}
}
/* 주: 동일 @media (max-width:480px) 블록의 `body.tmplat1 .tmplat1-main { padding-top:56px }`
 * 는 같은 조건 하단(L1558)의 `padding:30px 0` shorthand 에 의해 reset 되어 무력화돼 있었음.
 * cascade 결과 보존을 위해 본 블록을 제거하여 하단 단일 출현으로 정리. */

@media (max-width: 768px) {
	body.tmplat1 #header-contents {
		background-color: rgba(255, 255, 255, 0.96);
	}
}
/* backdrop-filter 미지원 환경에서는 단색 강제 (sticky 시 hero 가 비치지 않음) */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	@media (max-width: 768px) {
		body.tmplat1 #header-contents {
			background-color: #ffffff;
		}
	}
}


/* -------------------------------------------------------------------------
 * 14-A. 인기검색어 — 한 줄 + 마퀴 롤링
 * -------------------------------------------------------------------------
 * JSP:   <div class="keyword" id="ui-tmplat1-keyword" data-keyword-overflow="auto">
 *           <p>라벨 <span>#tag1</span> <span>#tag2</span> ...</p>
 *        </div>
 * JS:    scrollWidth > clientWidth 감지 → .keyword 에 `is-rolling` 클래스 부여
 * CSS:
 *   - 정적 상태: .keyword { overflow: hidden } + .keyword p { inline-flex; nowrap }
 *   - 마퀴 상태: .keyword.is-rolling p { animation: tmplat1-kw-marquee ... }
 *   - hover/focus-within: animation-play-state: paused
 *   - prefers-reduced-motion: 롤링 비활성 + overflow-x:auto fallback
 * ------------------------------------------------------------------------- */
@media (max-width: 768px) {
	body.tmplat1 .tmplat1-main .keyword {
		position: relative;
		height: auto;
		min-height: 36px;
		line-height: 1.4;
		padding: 6px 12px;
		margin-top: 8px;
		overflow: hidden;                    /* 정적/롤링 공통 — 트랙이 넘쳐도 컨테이너 밖으로 안 새게 */
		white-space: nowrap;
		text-align: left;
	}
	body.tmplat1 .tmplat1-main .keyword p {
		display: inline-flex;
		flex-wrap: nowrap;                   /* 줄바꿈 없음 — 한 줄 고정 */
		align-items: center;
		gap: 6px;
		margin: 0;
		padding: 0;
		white-space: nowrap;
		/* 기본 상태: animation 없음(정적). is-rolling 클래스가 붙어야 활성 */
	}
	body.tmplat1 .tmplat1-main .keyword.is-rolling p {
		will-change: transform;
	}
	body.tmplat1 .tmplat1-main .keyword span {
		margin-left: 0;
		padding: 4px 12px;
		min-height: 28px;
		font-size: 13px;
		box-sizing: border-box;
		flex: 0 0 auto;                      /* 자연 폭 유지 */
		white-space: nowrap;
	}
	body.tmplat1 .tmplat1-main .keyword span:first-child {
		margin-left: 0;
	}

	/* 롤링 활성 — 트랙이 왼쪽으로 이동, 끝 도달 시 오른쪽에서 재등장 */
	body.tmplat1 .tmplat1-main .keyword.is-rolling p {
		/* 복제 트랙 없이 단일 트랙 왕복형.
		 * translateX(0) → translateX(calc(-1 * (scrollWidth - clientWidth))) 를 직접 계산할 수는
		 * 없으므로 간접: 트랙 전체를 viewport 폭만큼 오른쪽 → 자연 왼쪽 이동.
		 * 좀 더 자연스러운 "끝까지 갔다가 처음으로 점프" 마퀴 — translateX(100%) → -100% 을 linear 반복.
		 * duration 은 25s (트랙 길이 무관, 일정 속도 감각). */
		animation: tmplat1-kw-marquee 25s linear infinite;
	}
	/* hover / keyboard focus-within 시 일시정지 (접근성 + UX) */
	body.tmplat1 .tmplat1-main .keyword.is-rolling:hover p,
	body.tmplat1 .tmplat1-main .keyword.is-rolling:focus-within p {
		animation-play-state: paused;
	}

	@keyframes tmplat1-kw-marquee {
		from { transform: translateX(5%); }
		to   { transform: translateX(-100%); }
	}

	/* prefers-reduced-motion fallback — 롤링 해제 + 사용자가 직접 가로 스크롤
	 * (스크롤바 숨김 관련 `-webkit-overflow-scrolling` / `scrollbar-width` 는 최신 엔진에서
	 *  기본 동작이 충분히 부드럽고 IDE 호환성 경고가 있어 생략. 가로 스크롤은 네이티브
	 *  overflow-x:auto 만으로 모바일 터치 스크롤이 정상 동작함.) */
	@media (prefers-reduced-motion: reduce) {
		body.tmplat1 .tmplat1-main .keyword {
			overflow-x: auto;
		}
		body.tmplat1 .tmplat1-main .keyword.is-rolling p,
		body.tmplat1 .tmplat1-main .keyword p {
			animation: none;
			transform: none;
		}
	}
}

@media (max-width: 768px) {
	/* 그리드 3열 — 모든 칩 균등 폭 */
	body.tmplat1 .tmplat1-main .category .button-group {
		display: grid;
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 6px;
		padding: 10px 12px 0;                  /* 14-D 패딩 축소와 호흡 맞춤 */
		margin: 0;
		max-width: 100%;
	}
	body.tmplat1 .tmplat1-main .category li {
		display: flex;
		align-items: center;
		justify-content: center;
		width: auto;
		min-width: 0;
		max-width: 100%;
		height: auto;
		min-height: 34px;
		line-height: 1.35;
		padding: 7px 10px;
		border: 1px solid rgba(255, 255, 255, 0.35);
		border-radius: 16px;
		background: rgba(255, 255, 255, 0.06);
		color: #fff;
		font-size: 13px;
		text-align: center;
		/* 글자수 차이 무관 균등 폭 유지 — 긴 라벨 ellipsis */
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		box-sizing: border-box;
	}

	/* 조건부 표시 — limited 모드 기본 (JS 가 data-visible/data-selection 갱신) */
	/* (1) limited + all: 처음 3개만 표시 (3열 1줄). 4번째부터 숨김. */
	body.tmplat1 .tmplat1-main .category[data-visible="limited"][data-selection="all"] .button-group > li:nth-child(n+4) {
		display: none;
	}
	body.tmplat1 .tmplat1-main .category[data-visible="limited"][data-selection="specific"] .button-group > li {
		display: none;
	}
	body.tmplat1 .tmplat1-main .category[data-visible="limited"][data-selection="specific"] .button-group > li#ui-ctgry-cat00,
	body.tmplat1 .tmplat1-main .category[data-visible="limited"][data-selection="specific"] .button-group > li.selected {
		display: flex;
	}
	/* (3) full: 모든 칩 표시 — grid 자동 */

	body.tmplat1 .tmplat1-main .category[data-visible="full"] .button-group > li {
		display: flex;
	}


}

@media (max-width: 480px) {
	body.tmplat1 .tmplat1-main .category li {
		min-height: 34px;
		font-size: 13px;
		padding: 6px 6px;
		display: flex;                              /* 14-B 에서 이미 flex 지만 명시 재선언 */
		align-items: center;
		justify-content: center;
		white-space: normal;                        /* 14-B nowrap 해제 */
		overflow: visible;                          /* 14-B hidden 해제 */
		text-overflow: clip;                        /* 14-B ellipsis 해제 */
		word-break: keep-all;                       /* 한글 단어 경계 유지 */
		overflow-wrap: break-word;                  /* 극단 긴 단어는 강제 줄바꿈 허용 */
		line-height: 1.35;
		text-align: center;
	}
}

@media (max-width: 768px) {
	body.tmplat1 .tmplat1-main {
		padding: 30px 0;
	}
	/* 카테고리 영역 상단 여백 축소 */
	body.tmplat1 .tmplat1-main .category {
		margin-top: 20px;
	}
	/* 토글 라벨 상단 여백 축소 */
	body.tmplat1 .tmplat1-cat-toggle-label {
		margin: 6px 12px 0;
	}
}
@media (max-width: 480px) {
	body.tmplat1 .tmplat1-main {
		padding: 30px 0;
	}
}


@media (max-width: 768px) {
	body.tmplat1 .tmplat1-main .category .button-group {
		display: grid !important;                                    /* 가드 4 flex !important 해제 */
		grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
	}
	/* 가드 4 의 li { flex: 0 1 auto } 는 grid 내부에서 무시되므로 별도 해제 불요.
	 * 단, 가드 5 (480px li { max-width: calc(50% - 4px) }) 는 grid 에서 불필요 → 해제. */
}
@media (max-width: 480px) {
	body.tmplat1 .tmplat1-main .category .button-group {
		grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
		align-items: stretch;
	}
}

/* -------------------------------------------------------------------------
 * 14-G. 데스크톱(≥769px) 영향 0 보장
 * -------------------------------------------------------------------------
 * 전 규칙이 @media (max-width: 768px|480px) 스코프 안. 769px+ 블록은 없음 → 영향 0.
 * JSP 의 data-* 속성은 @media 밖 셀렉터에서 사용되지 않으므로 데스크톱 카스케이드에 참여 X.
 * ------------------------------------------------------------------------- */


/* 공통 (데스크톱 + 모바일) */
body.tmplat1 .tmplat1-main .tmplat1-hero-slogan {
	margin-bottom: 20px;                 /* 상 0 (hero padding-top 이 흡수) / 하 20 (검색 박스 위 숨) */
	padding: 0;
	text-align: center;
	color: rgba(255, 255, 255, 0.92);   /* 네이비 배경 대비, 부드러운 톤 */
	font-size: 25px;
	font-weight: 400;                    /* 가벼운 세리프 느낌의 산세리프 기본 */
	line-height: 1.4;
	letter-spacing: 0.5px;               /* 브랜드 슬로건 느낌 소폭 추가 */
	/* 라틴 전용 슬로건이므로 영문 우선 폰트 스택 명시 (다국어 섞이지 않음) */
	font-family: "Apple SD Gothic Neo", "Helvetica Neue", Arial, sans-serif;
	/* 긴 문장이 아니지만 극단 좁은 폭에서 자동 단어 단위 줄바꿈 허용 */
	word-break: keep-all;
	overflow-wrap: break-word;
}

/* 모바일 — 기본 폰트 조정 */
@media (max-width: 768px) {
	body.tmplat1 .tmplat1-main .tmplat1-hero-slogan {
		font-size: 20px;
		margin: 0 0 14px 0;              /* 검색 박스와의 간격 축소 — 모바일 scroll economy */
		letter-spacing: 0.3px;
	}
}

/* 480px 이하 — 한 번 더 축소 (매우 좁은 단말에서 한 줄 유지) */
@media (max-width: 480px) {
	body.tmplat1 .tmplat1-main .tmplat1-hero-slogan {
		font-size: 20px;
		margin-bottom: 20px;
		letter-spacing: 0.2px;
	}
}



@media (max-width: 768px) {
	/* all 모드 — 4번째 칩까지 노출, 5번째부터 hide (.selected 제외) */
	body.tmplat1 .tmplat1-main .category[data-visible="limited"][data-selection="all"] .button-group > li:nth-child(n+5):not(.selected) {
		display: none;
	}
	body.tmplat1 .tmplat1-main .category[data-visible="limited"][data-selection="all"] .button-group > li:nth-child(-n+4) {
		display: flex;                              /* 14-B L1848 n+4 hide 를 덮어 4번째까지 복원 */
	}


	body.tmplat1 .tmplat1-cat-toggle-label {
		/* 레이아웃 — block-level 중앙 정렬 */
		display: flex;
		width: auto;
		min-width: 140px;
		max-width: 220px;
		margin: 12px auto 0;

		/* 내부 정렬 */
		align-items: center;
		justify-content: center;
		gap: 6px;

		/* 크기 — 터치 타겟 + 패딩 */
		padding: 8px 22px;
		min-height: 38px;

		/* 시각 (옵션 F — solid pill) */
		background: rgba(255, 255, 255, 0.12);
		border: 0;
		border-radius: 100px;
		color: rgba(255, 255, 255, 0.95);
		font-size: 13px;
		font-weight: 500;
		letter-spacing: 0.3px;

		cursor: pointer;
		box-sizing: border-box;
		-webkit-user-select: none;
		user-select: none;

		/* 인터랙션 */
		transition: background-color 180ms ease, transform 120ms ease, color 180ms ease;
	}

	/* hover / focus — solid pill 배경 톤만 변화 (테두리 조작 없음) */
	body.tmplat1 .tmplat1-cat-toggle-label:hover,
	body.tmplat1 .tmplat1-cat-toggle:focus-visible ~ .tmplat1-cat-toggle-label {
		background: rgba(255, 255, 255, 0.18);
		color: #fff;
	}

	/* active — 마이크로 인터랙션 (탭 압력 피드백) */
	body.tmplat1 .tmplat1-cat-toggle-label:active {
		transform: scale(0.98);
	}

	body.tmplat1 .tmplat1-cat-toggle:checked ~ .tmplat1-cat-toggle-label {
		background: rgba(255, 255, 255, 0.22);
		border: 0;
		color: #fff;
	}
}

@media (max-width: 480px) {
	/* all 모드 — 3번째까지 노출, 4번째부터 hide (최소 3 보장) */
	body.tmplat1 .tmplat1-main .category[data-visible="limited"][data-selection="all"] .button-group > li:nth-child(-n+3) {
		display: flex;
	}
	body.tmplat1 .tmplat1-main .category[data-visible="limited"][data-selection="all"] .button-group > li:nth-child(n+4):not(.selected) {
		display: none;
	}
}

@media (max-width: 768px) {
	body.tmplat1 .ptg-w1200 {
		width: auto;
		max-width: 100%;
		min-width: 0;              /* 공통 CSS min-width 잠금 잔재 방어 */
		box-sizing: border-box;
	}
}

@media (min-width: 769px) and (max-width: 1200px) {
	body.tmplat1 .ptg-w1200 {
		min-width: 100%;
	}
}

@media (min-width: 1281px) {
	body.tmplat1 .header-wrapper,
	body.tmplat1 .contents-wrapper,
	body.tmplat1 .red-mj-top .wrap,
	body.tmplat1 footer .ptg-footer,
	body.tmplat1 .ptg-album-list {
		width: 100%;
		max-width: 1200px;
	}
	
	body.tmplat1 .header-wrapper {
		padding-left: 16px;
		padding-right: 16px;
		box-sizing: border-box;
	}

	/* 5열 동적 보정 — 가용폭 1168 안에서 5열 재정렬 */
	body.tmplat1 .ptg-album-list {
		gap: 16px;
	}
	body.tmplat1 .ptg-album-list .ptg-album-item {
		width: calc((100% - 4 * 16px) / 5);
		margin: 0;
	}
	body.tmplat1 .ptg-album-list .ptg-album-item:nth-of-type(5n) { margin-right: 0; }
}