@charset "UTF-8";

/* ==========================================================================
   목록 화면 (munjung / spcont / trpj 공용 list.jsp) — 시안
     리스트 보기 : https://honam.figma.site/category-1
     간략 보기   : https://honam.figma.site/category-2
   --------------------------------------------------------------------------
   로드 : layout/head.jsp (snb.css 다음)
   마크업 : munjung/list.jsp — 전부 `.cl-page` 안, 클래스 cl- 접두.
     예전 클래스(.kl-page / .path / .tit__section / .wrap__list …)를 하나도 쓰지 않아
     기존 krds-list.css · content.css · krds.css 의 목록 규칙이 매칭되지 않는다.
     (서브 head.jsp 는 아직 기존 CSS 를 공용으로 싣고 있어 파일째 뺄 수는 없다)
   ★ 남는 간섭은 태그 단위 규칙뿐이다 : krds.css `input[type="text"]`(0,1,1),
     `select`, `table` 등. 그래서 모든 셀렉터를 `.cl-page .x` (0,2,0) 이상으로 쓴다.

   시안 실측 (1920, 콘텐츠 x 480 ~ 1769)
     제목 52/68 명조 → 24 → 브레드크럼 → 32 → 분류 칩(40) → 80 → 건수줄(40)
     → 20 → 도구줄(48) → 32 → 2px 검정 → 목록 → 2px 검정 → 32 → 페이지
   ========================================================================== */

.cl-page{
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 24px;
	color: #000;
	letter-spacing: normal;
}
.cl-page *{
	box-sizing: border-box;
}
.cl-page ul,
.cl-page ol{
	margin: 0;
	padding: 0;
	list-style: none;
}
.cl-page a{
	color: inherit;
	text-decoration: none;
}
.cl-blind{
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}


/* ==========================================================================
   [0] 자료유형 상단 배너 (2026-11-02 시트 67) — 시안 카테고리_디자인 수정본_20261030 · 폴더별 배너 20261102
   --------------------------------------------------------------------------
   마크업 : list.jsp #clHero — 처음엔 #content 안에서 그려지고 스크립트가 #container 앞(헤더 아래 전체 폭)으로 옮긴다.
            그래서 .cl-page 밖에 있다 → 셀렉터는 .cl-hero 기준.
   그림   : 어둡게 처리가 들어 있는 사진(덮개 없음). PC 2560x600 / 태블릿 1600x520 / 모바일 750x546 (@2x)
   시안 실측 : PC 높이 300, 위 60 브레드크럼(16/24) → 32 → 제목 52/68 명조 → 16 → 문구 두 줄
               태블릿 260, 위 40 / 모바일 273, 위 50 브레드크럼 14/20, 문구는 줄바꿈 없이 흘림(<br> 숨김, 시트 67-3)
   본문 위 여백 : 배너가 있으면 SNB · 본문 모두 60 (시안 칩·'카테고리' 줄 위치)
   ========================================================================== */
.cl-hero{
	box-sizing: border-box;
	height: 300px;
	background: #222 no-repeat center / cover;
	font-family: var(--f-sans);
	color: #fff;
	letter-spacing: normal;
}
.cl-hero *{
	box-sizing: border-box;
}
.cl-hero--gose{ background-image: url('../images/cat/hero-gose-pc.jpg'); }
.cl-hero--gomunseo{ background-image: url('../images/cat/hero-gomunseo-pc.jpg'); }
.cl-hero--munjip{ background-image: url('../images/cat/hero-munjip-pc.jpg'); }
.cl-hero--ilgi{ background-image: url('../images/cat/hero-ilgi-pc.jpg'); }
.cl-hero--seowon{ background-image: url('../images/cat/hero-seowon-pc.jpg'); }
.cl-hero--nujeong{ background-image: url('../images/cat/hero-nujeong-pc.jpg'); }
.cl-hero--hyangyak{ background-image: url('../images/cat/hero-hyangyak-pc.jpg'); }
.cl-hero--geumseok{ background-image: url('../images/cat/hero-geumseok-pc.jpg'); }
.cl-hero__in{
	padding: 60px var(--gutter) 0;
}
.cl-hero__path{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 16px;
	line-height: 24px;
}
.cl-hero__path li{
	display: flex;
	align-items: center;
}
.cl-hero__path li + li:before{
	content: '';
	display: block;
	width: 1px;
	height: 16px;
	margin: 0 20px;
	background: rgba(255,255,255,.8);
}
.cl-hero__path li:last-child{
	font-weight: 700;
}
.cl-hero__home{
	display: block;
	width: 16px;
	height: 19px;
	margin: 0 2px;
	background: url('../images/ico-home.svg') no-repeat center / 16px 19px;
	filter: brightness(0) invert(1);
}
.cl-hero__tit{
	margin: 32px 0 0;
	padding: 0;
	font-family: var(--f-serif);
	font-size: 52px;
	line-height: 68px;
	font-weight: 400;
	color: #fff;
	letter-spacing: normal;
}
.cl-hero__desc{
	margin: 16px 0 0;
	font-size: 18px;
	line-height: 24px;
	color: #fff;
	word-break: keep-all;
}
/* 배너가 있으면 본문 · SNB 위 여백 40 → 60, 세로선도 60 에서 시작 */
#container:has(.cl-page--hero){
	background-position-y: 60px;
}
#container:has(.cl-page--hero) .wrap__snb,
#container:has(.cl-page--hero) .content{
	padding-top: 60px;
}
.cl-page--hero > :first-child{
	margin-top: 0 !important;
}

@media screen and (max-width: 1279px){
	.cl-hero{
		height: 260px;
	}
	.cl-hero--gose{ background-image: url('../images/cat/hero-gose-ta.jpg'); }
	.cl-hero--gomunseo{ background-image: url('../images/cat/hero-gomunseo-ta.jpg'); }
	.cl-hero--munjip{ background-image: url('../images/cat/hero-munjip-ta.jpg'); }
	.cl-hero--ilgi{ background-image: url('../images/cat/hero-ilgi-ta.jpg'); }
	.cl-hero--seowon{ background-image: url('../images/cat/hero-seowon-ta.jpg'); }
	.cl-hero--nujeong{ background-image: url('../images/cat/hero-nujeong-ta.jpg'); }
	.cl-hero--hyangyak{ background-image: url('../images/cat/hero-hyangyak-ta.jpg'); }
	.cl-hero--geumseok{ background-image: url('../images/cat/hero-geumseok-ta.jpg'); }
	.cl-hero__in{
		padding-top: 40px;
	}
	.cl-hero__tit{
		margin-top: 22px;
		font-size: 48px;
		line-height: 64px;
	}
	.cl-hero__desc{
		margin-top: 12px;
		font-size: 17px;
	}
}
@media screen and (max-width: 799px){
	.cl-hero{
		height: auto;
		min-height: 273px;
		padding-bottom: 40px;
	}
	.cl-hero--gose{ background-image: url('../images/cat/hero-gose-mo.jpg'); }
	.cl-hero--gomunseo{ background-image: url('../images/cat/hero-gomunseo-mo.jpg'); }
	.cl-hero--munjip{ background-image: url('../images/cat/hero-munjip-mo.jpg'); }
	.cl-hero--ilgi{ background-image: url('../images/cat/hero-ilgi-mo.jpg'); }
	.cl-hero--seowon{ background-image: url('../images/cat/hero-seowon-mo.jpg'); }
	.cl-hero--nujeong{ background-image: url('../images/cat/hero-nujeong-mo.jpg'); }
	.cl-hero--hyangyak{ background-image: url('../images/cat/hero-hyangyak-mo.jpg'); }
	.cl-hero--geumseok{ background-image: url('../images/cat/hero-geumseok-mo.jpg'); }
	.cl-hero__in{
		padding-top: 48px;
	}
	.cl-hero__path{
		font-size: 14px;
		line-height: 20px;
	}
	.cl-hero__path li + li:before{
		margin: 0 8px;
	}
	.cl-hero__tit{
		margin-top: 15px;
		font-size: 36px;
		line-height: 48px;
	}
	.cl-hero__desc{
		margin-top: 23px;
		font-size: 16px;
	}
	.cl-hero__br{
		display: none;
	}
}


/* ==========================================================================
   [1] 제목 / 브레드크럼
   ========================================================================== */
.cl-page .cl-title{
	margin: 40px 0 0;
	padding: 0;
	font-family: var(--f-serif);
	font-size: 52px;
	line-height: 68px;
	font-weight: 400;
	color: #000;
	letter-spacing: normal;
	word-break: keep-all;
}
.cl-page .cl-path{
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	margin-top: 24px;
	font-size: 16px;
	line-height: 24px;
	color: #222;
}
.cl-page .cl-path li{
	display: flex;
	align-items: center;
}
.cl-page .cl-path li + li:before{
	content: '';
	display: block;
	width: 1px;
	height: 16px;
	margin: 0 20px;
	background: #ddd;
}
.cl-page .cl-path__home{
	display: block;
	width: 16px;
	height: 19px;
	margin: 0 2px;
	background: url('../images/ico-home.svg') no-repeat center / 16px 19px;
}
.cl-page .cl-path li:last-child{
	font-weight: 700;
}


/* ==========================================================================
   [2] 분류 칩 (하위 분류 체크 필터) — 40px 알약, 사이 8
   활성(체크) = 검정 바탕 흰 글자 Bold / 기본 = 흰 바탕 #ddd 테두리
   ========================================================================== */
.cl-page .cl-chips{
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin-top: 32px;
}
.cl-page .cl-chip{
	position: relative;
	display: block;
	margin: 0;
	cursor: pointer;
}
.cl-page .cl-chip input{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}
.cl-page .cl-chip span{
	display: block;
	height: 40px;
	padding: 7px 20px;
	border: 1px solid #ddd;
	border-radius: 100px;
	background: #fff;
	font-size: 16px;
	line-height: 24px;
	color: #000;
	white-space: nowrap;
	transition: border-color .15s ease, background .15s ease;
}
.cl-page .cl-chip:hover span{
	border-color: #000;
}
.cl-page .cl-chip input:checked + span{
	display: flex;
	align-items: center;
	gap: 4px;
	border-color: #d86200;
	background: #fffcf7;
	font-weight: 700;
	color: #d86200;
}
/* 선택 = 주황 테두리 · 연주황 바탕 · 체크 아이콘 (2026-11-02 시트 67 시안, 예전 검정 채움 대체) */
.cl-page .cl-chip input:checked + span:before{
	content: '';
	flex: none;
	width: 16px;
	height: 16px;
	background: url('../images/ico-chip-check.svg') no-repeat center / 16px 16px;
}
.cl-page .cl-chip input:focus-visible + span{
	outline: 2px solid #e98813;
	outline-offset: 2px;
}
.cl-page .cl-chip.is-disabled{
	cursor: default;
}
.cl-page .cl-chip.is-disabled input{
	cursor: default;
}
.cl-page .cl-chip.is-disabled span{
	border-color: #eee;
	color: #bbb;
}


/* ==========================================================================
   [3] 건수줄 / 도구줄
   ========================================================================== */
.cl-page .cl-count{
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 40px;
	margin-top: 80px;
}
.cl-page .cl-chips + .cl-count{
	margin-top: 80px;
}
.cl-page .cl-path + .cl-count{
	margin-top: 56px;
}
.cl-page .cl-count__txt{
	margin: 0;
	font-size: 20px;
	line-height: 24px;
}
.cl-page .cl-count__txt strong{
	font-weight: 700;
}
.cl-page .cl-btn-line{
	display: inline-flex;
	align-items: center;
	height: 40px;
	padding: 0 20px;
	border: 1px solid #000;
	border-radius: 8px;
	background: #fff;
	font-family: var(--f-sans);
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	color: #000;
	cursor: pointer;
}
.cl-page .cl-btn-line:hover{
	background: #f5f5f5;
}

.cl-page .cl-tools{
	display: flex;
	align-items: center;
	gap: 8px;
	margin-top: 20px;
}
.cl-page .cl-select{
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	width: 160px;
	height: 48px;
	margin: 0;
	padding: 0 40px 0 20px;
	border: 1px solid #000;
	border-radius: 8px;
	background: #fff url('../images/ico-select-down.svg') no-repeat right 20px center / 16px 16px;
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 24px;
	color: #000;
	box-shadow: none;
	cursor: pointer;
}
.cl-page .cl-select::-ms-expand{
	display: none;
}
.cl-page .cl-btn-view{
	height: 48px;
	margin: 0;
	padding: 0 24px;
	border: 0;
	border-radius: 8px;
	background: #666;
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #fff;
	cursor: pointer;
	transition: background .15s ease;
}
.cl-page .cl-btn-view:hover{
	background: #444;
}
.cl-page .cl-btn-view.is-on{
	background: #000;
}


/* ==========================================================================
   [4] 리스트 보기 — 썸네일 120 + 40 + 본문 / 구분선 1px #ddd / 위아래 2px 검정
   ========================================================================== */
.cl-page .cl-list{
	margin-top: 32px;
	padding-bottom: 20px;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
}
.cl-page .cl-item{
	display: flex;
	gap: 40px;
	padding: 24px 0;
	border-bottom: 1px solid #ddd;
}
.cl-page .cl-item:first-child{
	padding-top: 20px;
}
.cl-page .cl-item__thumb{
	flex: none;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	height: 120px;
	padding: 20px;
	background: #f5f5f5;
	overflow: hidden;
}
.cl-page .cl-item__thumb a{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.cl-page .cl-item__thumb img{
	display: block;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}
.cl-page .cl-item__body{
	flex: 1;
	min-width: 0;
}
.cl-page .cl-item__head{
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}
.cl-page .cl-item__title{
	margin-right: 8px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 700;
	color: #000;
}
.cl-page .cl-item__title:hover{
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cl-page .cl-item__meta{
	margin: 12px 0 0;
	font-size: 16px;
	line-height: 24px;
	color: #666;
}
.cl-page .cl-item__meta .cl-sep{
	margin: 0 1px;
}
.cl-page .cl-item__desc{
	margin: 4px 0 0;
	font-size: 16px;
	line-height: 24px;
	color: #000;
}
/* 금석문 해설 · 누정 인문학적 특징 (2026-10-20) : 한 줄 + 말줄임 */
.cl-page .cl-item__desc--line{
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
}

/* 배지 (해제/원문/국역/이미지) : 24px, 1px #ddd, radius 4, 14px #666
   2026-11-02 시트 67 시안 : 앞에 14 아이콘(간격 2) + 있으면 유형색 채움 · 흰 글자 (해제 #bc6520 / 원문 #8e3a47 / 국역 #3f5e59 / 이미지 #2b4c7f).
   리스트 보기도 간략 보기처럼 4개 항상 (없는 것 = 회색 테두리, 링크 아님).
   아이콘은 mask 라 글자색(currentColor)을 따라간다 — style/images/ico-badge-*.svg */
.cl-page .cl-badge{
	display: inline-flex;
	align-items: center;
	justify-content: center; /* 2x2 칸에서 늘어난 배지도 글자 가운데 (2026-10-21 수정요청 21번 B) */
	gap: 2px;
	height: 24px;
	padding: 0 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	background: #fff;
	font-size: 14px;
	line-height: 20px;
	color: #666;
	white-space: nowrap;
}
a.cl-badge:hover{
	border-color: #666;
	color: #000;
}
.cl-page .cl-badge:before{
	content: '';
	flex: none;
	width: 14px;
	height: 14px;
	background: currentColor;
	-webkit-mask: no-repeat center / 14px 14px;
	mask: no-repeat center / 14px 14px;
}
.cl-page .cl-badge--heje:before{ -webkit-mask-image: url('../images/ico-badge-heje.svg'); mask-image: url('../images/ico-badge-heje.svg'); }
.cl-page .cl-badge--org:before{ -webkit-mask-image: url('../images/ico-badge-org.svg'); mask-image: url('../images/ico-badge-org.svg'); }
.cl-page .cl-badge--trans:before{ -webkit-mask-image: url('../images/ico-badge-trans.svg'); mask-image: url('../images/ico-badge-trans.svg'); }
.cl-page .cl-badge--img:before{ -webkit-mask-image: url('../images/ico-badge-img.svg'); mask-image: url('../images/ico-badge-img.svg'); }
/* 있는 항목 = 유형색 채움 · 흰 글자 */
.cl-page .cl-badge.is-on{
	border-color: var(--bd-c);
	background: var(--bd-c);
	color: #fff;
}
.cl-page .cl-badge--heje{ --bd-c: #bc6520; }
.cl-page .cl-badge--org{ --bd-c: #8e3a47; }
.cl-page .cl-badge--trans{ --bd-c: #3f5e59; }
.cl-page .cl-badge--img{ --bd-c: #2b4c7f; }
.cl-page a.cl-badge.is-on:hover{
	border-color: var(--bd-c);
	background: var(--bd-c);
	color: #fff;
	filter: brightness(.88);
}

/* 빈 목록 */
.cl-page .cl-empty{
	padding: 108px 0;
	border-bottom: 1px solid #ddd;
	font-size: 16px;
	line-height: 24px;
	color: #000;
	text-align: center;
}
.cl-page .cl-list .cl-empty{
	margin-bottom: -20px;
}


/* ==========================================================================
   [5] 간략 보기 (표) — 머리 #f5f5f5 40px / 행 위 20, 아래 구분선 / 위아래 2px 검정
   ========================================================================== */
.cl-page .cl-table-wrap{
	margin-top: 32px;
	padding-bottom: 20px;
	border-top: 2px solid #000;
	border-bottom: 2px solid #000;
}
.cl-page .cl-table{
	width: 100%;
	margin: 0;
	border: 0;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 16px;
	line-height: 24px;
}
.cl-page .cl-table caption{
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}
.cl-page .cl-table th{
	height: 40px;
	padding: 8px 12px 8px 0;
	border: 0;
	background: #f5f5f5;
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: #000;
	text-align: left;
	vertical-align: middle;
}
.cl-page .cl-table th:first-child{
	padding-left: 20px;
}
.cl-page .cl-table td{
	height: auto;
	padding: 20px 12px 24px 0;
	border: 0;
	border-bottom: 1px solid #ddd;
	background: none;
	font-size: 16px;
	line-height: 24px;
	color: #000;
	text-align: left;
	vertical-align: top;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.cl-page .cl-table td:last-child,
.cl-page .cl-table th:last-child{
	padding-right: 0;
}
.cl-page .cl-table .cl-table__title{
	font-weight: 700;
}
.cl-page .cl-table .cl-table__title a:hover{
	text-decoration: underline;
	text-underline-offset: 3px;
}
.cl-page .cl-svc{
	display: grid;
	grid-template-columns: repeat(2, max-content);
	gap: 4px;
}
.cl-page .cl-table .cl-empty{
	padding: 108px 0;
	text-align: center;
}


/* ==========================================================================
   [6] 페이지 이동 — 오른쪽 정렬 : ← 20 [입력 100x48] 8 / 총 20 →
   ========================================================================== */
.cl-page .cl-pager{
	display: flex;
	align-items: center;
	justify-content: flex-end;
	margin-top: 32px;
}
.cl-page .cl-pager__arrow{
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 48px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
}
.cl-page .cl-pager__arrow img{
	display: block;
	width: 15px;
	height: 13px;
}
.cl-page .cl-pager__arrow[disabled]{
	opacity: .25;
	cursor: default;
}
.cl-page .cl-pager__prev{
	margin-right: 16px;
}
.cl-page .cl-pager__next{
	margin-left: 16px;
}
.cl-page input.cl-pager__input{
	width: 100px;
	height: 48px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid #000;
	border-radius: 8px;
	background: #fff;
	font-family: var(--f-sans);
	font-size: 16px;
	line-height: 24px;
	font-weight: 400;
	color: #000;
	box-shadow: none;
}
.cl-page .cl-pager__total{
	margin-left: 8px;
	font-size: 16px;
	line-height: 24px;
}
.cl-page .cl-pager__total span{
	font-size: 18px;
}
.cl-page .cl-pager__total strong{
	font-weight: 700;
}


/* ==========================================================================
   [7] 반응형 — 태블릿 800~1279 / 모바일 ~799 (시안 category-1 · category-2 의 1024 · 390 폭)
   --------------------------------------------------------------------------
   좌우 여백은 셸(snb.css [4] `#container .content`)이 준다 → 여기서는 주지 않는다.
   시안 실측
     · 제목 : 태블릿 32/68 · 모바일 24/68, 헤더 아래 40 (= .content 위 여백 → 제목 margin 0)
     · 브레드크럼 14/20, 칸막이 좌우 8 / 제목 → 24(태블릿) · 20(모바일)
     · 칩 : 브레드크럼 → 32 · 20 / 건수줄 : 칩 → 60 · 40, 건수 20px · 18px
     · "카테고리 보기" : 태블릿은 건수줄 오른쪽 그대로 / 모바일은 건수 아래 12, 가로 꽉
     · 도구줄 : 태블릿 셀렉트 160 그대로 / 모바일 셀렉트 2개 반반 + 보기 버튼 2개 반반 (사이 8)
     · 간략보기 표 → 카드 : 행마다 "머리글(#666) 8 값" 묶음을 흘린다. 머리글은 td 의
       data-label (list.jsp) 을 :before 로 찍는다. 묶음 사이 20, 행 위아래 20 · 24.
       태블릿은 가로로 흘러 줄바꿈 / 모바일은 한 줄에 하나. 제공형태 배지는 한 줄 4개.
   ========================================================================== */
@media screen and (max-width: 1279px){
	.cl-page .cl-title{
		margin-top: 0;
		font-size: 32px;
		line-height: 68px;
	}
	.cl-page .cl-path{
		margin-top: 24px;
		font-size: 14px;
		line-height: 20px;
	}
	.cl-page .cl-path li + li:before{
		margin: 0 8px;
	}
	.cl-page .cl-chips{
		margin-top: 32px;
	}
	.cl-page .cl-count,
	.cl-page .cl-chips + .cl-count{
		margin-top: 60px;
	}
	.cl-page .cl-path + .cl-count{
		margin-top: 40px;
	}

	/* 간략보기 표 → 카드 */
	.cl-page .cl-table-wrap{
		padding-bottom: 0;
	}
	.cl-page .cl-table,
	.cl-page .cl-table tbody,
	.cl-page .cl-table tr,
	.cl-page .cl-table td{
		display: block;
		width: auto;
	}
	.cl-page .cl-table colgroup,
	.cl-page .cl-table thead{
		display: none;
	}
	.cl-page .cl-table tr{
		display: flex;
		flex-wrap: wrap;
		gap: 20px 40px;
		padding: 20px 0 24px;
		border-bottom: 1px solid #ddd;
	}
	.cl-page .cl-table tr:last-child{
		border-bottom: 0;
	}
	.cl-page .cl-table td,
	.cl-page .cl-table td:last-child{
		flex: 0 1 auto;
		min-width: 100px;
		height: auto;
		padding: 0;
		border: 0;
	}
	.cl-page .cl-table td[data-label]:before{
		content: attr(data-label);
		display: block;
		margin-bottom: 8px;
		font-weight: 400;
		color: #666;
	}
	.cl-page .cl-table .cl-table__title{
		flex: 1 1 60%;
	}	.cl-page .cl-svc{
		display: flex;
		flex-wrap: wrap;
	}
	.cl-page .cl-table .cl-empty{
		flex: 1 1 100%;
		padding: 108px 0;
	}
}

@media screen and (max-width: 799px){
	.cl-page .cl-title{
		font-size: 24px;
	}
	.cl-page .cl-path{
		margin-top: 20px;
	}
	.cl-page .cl-chips{
		margin-top: 20px;
	}
	.cl-page .cl-count,
	.cl-page .cl-chips + .cl-count{
		margin-top: 40px;
	}
	.cl-page .cl-count{
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		min-height: 0;
	}
	.cl-page .cl-count__txt{
		font-size: 18px;
		line-height: 20px;
	}
	.cl-page .cl-btn-line{
		justify-content: center;
		width: 100%;
	}

	.cl-page .cl-tools{
		flex-wrap: wrap;
	}
	.cl-page .cl-select,
	.cl-page .cl-btn-view{
		flex: 1 1 calc(50% - 4px);
		min-width: 0;
		width: auto;
	}
	.cl-page .cl-btn-view{
		padding: 0 12px;
	}

	/* 카드 : 한 줄에 하나 */
	.cl-page .cl-table td,
	.cl-page .cl-table td:last-child,
	.cl-page .cl-table .cl-table__title{
		flex: 1 1 100%;
	}

	.cl-page .cl-empty,
	.cl-page .cl-table .cl-empty{
		padding: 80px 0;
	}
}


/* ==========================================================================
   [8] 지도 보기 (누정 전용, vmode=map) — 시안 _category-4 (2026-10-15)
     2px 검정 → 40 → 부제 16 #333 → 8 → 제목 명조 40/52 → 40 → 지도(#5c471a 바탕)
     → 36 → 9곳 (번호 원 32 검정 · 명조 숫자 | 12 | 이름 20 굵게 / 설명 16 #666), 사이 24
     태블릿 제목 32 · 지도 원래 비율 / 모바일 제목 24 · 사이 4 · 설명 한 줄 말줄임
     도구줄 : 버튼 3개(cl-tools--map) — 모바일은 셀렉트 2 / 버튼 3 줄
   ========================================================================== */
.cl-page .cl-map{
	margin-top: 32px;
	padding: 40px 0 0;
	border-top: 2px solid #000;
	text-align: center;
}
.cl-page .cl-map__sub{
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: #333;
}
.cl-page .cl-map__tit{
	margin: 8px 0 0;
	font-family: var(--f-serif);
	font-size: 40px;
	line-height: 52px;
	font-weight: 400;
	color: #333;
}
.cl-page .cl-map__img{
	position: relative;
	margin-top: 40px;
	aspect-ratio: 68 / 58;
	background: #5c471a;
	overflow: hidden;
	/* 이미지(2334/1880)가 상자(68/58)보다 넓어 cover 로 좌우가 잘린다 → 그림 폭 = 상자 폭 x 1.0589 */
	--map-k: 1.0589;
}
.cl-page .cl-map__img img{
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 지도 위 누정 클릭 영역 (2026-10-21 수정요청 24번). --x/--y/--w/--h = 원본 이미지 기준 %, 가로는 cover 로 잘린 만큼 보정 */
.cl-page .cl-map__spot{
	position: absolute;
	left: calc(50% + (var(--x) - 50%) * var(--map-k));
	top: var(--y);
	width: calc(var(--w) * var(--map-k));
	height: var(--h);
	border-radius: 8px;
}
/* 선택(호버·포커스) 라인 = 1px · #DBC49C (2026-10-22 수정요청 24번 TO-BE) */
.cl-page .cl-map__spot:hover,
.cl-page .cl-map__spot:focus-visible{
	background: rgba(255,255,255,.25);
	outline: 1px solid #dbc49c;
}
.cl-page .cl-map__list{
	margin: 36px 0 0;
	padding: 0;
	list-style: none;
	text-align: left;
}
.cl-page .cl-map__list li{
	position: relative;
	min-height: 60px;
	padding-left: 44px;
}
.cl-page .cl-map__list li + li{
	margin-top: 24px;
}
.cl-page .cl-map__no{
	position: absolute;
	left: 0;
	top: 6px;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	background: #222;
	font-family: var(--f-serif);
	font-size: 15px;
	line-height: 32px;
	color: #fff;
	text-align: center;
}
.cl-page .cl-map__list strong{
	display: block;
	font-size: 20px;
	line-height: 32px;
	font-weight: 700;
	color: #000;
}
/* 누정명 링크 (2026-10-20) : 모양은 그대로, 마우스를 올리면 밑줄 */
.cl-page .cl-map__list strong a{
	color: inherit;
	text-decoration: none;
}
.cl-page .cl-map__list strong a:hover,
.cl-page .cl-map__list strong a:focus-visible{
	text-decoration: underline;
	text-underline-offset: 4px;
}
.cl-page .cl-map__list p{
	margin: 4px 0 0;
	font-size: 16px;
	line-height: 24px;
	color: #666;
}

/* 도구줄 5칸 : 콘텐츠 680 안에 들도록 셀렉트가 줄고 버튼 글자는 줄바꿈하지 않는다 (시안 160 160 104 120 104) */
.cl-page .cl-tools--map .cl-select{
	flex: 0 1 160px;
	min-width: 0;
}
.cl-page .cl-tools--map .cl-btn-view{
	flex: none;
	padding: 0 20px;
	white-space: nowrap;
}

@media screen and (max-width: 1279px){
	.cl-page .cl-map__tit{
		font-size: 32px;
		line-height: 40px;
	}
	.cl-page .cl-map__img{
		aspect-ratio: auto;
		--map-k: 1; /* 이미지가 상자 폭 그대로 (잘림 없음) */
	}
	.cl-page .cl-map__img img{
		height: auto;
	}
}

@media screen and (max-width: 799px){
	.cl-page .cl-tools--map .cl-select{
		flex: 1 1 calc(50% - 4px);
	}
	.cl-page .cl-tools--map .cl-btn-view{
		flex: 1 1 calc(33.333% - 6px);
		padding: 0 8px;
	}
	.cl-page .cl-map__tit{
		margin-top: 4px;
		font-size: 24px;
		line-height: 32px;
	}
	.cl-page .cl-map__list p{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
}