@charset "utf-8";
/* ==========================================================================
   사례·후기 > 컬럼 (/column/index, /column/read)
   - 히어로 밴드(.sl-subhero)·토큰·헤더/푸터는 site_layout.css
   - 이 파일의 선택자는 모두 .sl-col 접두사로 스코프 한정 (publish.md 3.4)
   - 칩·검색·페이징 규격은 치료사례(case.css) 와 동일하게 맞춘다
   ========================================================================== */

/* 서브히어로 배경 위치 조율 (치료사례와 같은 이미지) */
.sl-subhero .sl-subhero__bg {
	object-fit: contain;
	object-position: right center;
}

/* --------------------------------------------------------------------------
   1. 분류 칩
   -------------------------------------------------------------------------- */
.sl-col-filter {
	background: #fff;
	padding: 120px 20px 80px;
	box-sizing: border-box;
}
.sl-col-filter__inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 8px;
	max-width: var(--sl-container);
	margin: 0 auto;
}
.sl-col-chip {
	flex: 0 1 auto;
	display: inline-block;
	text-align: center;
	text-decoration: none;
	padding: 16px 32px;
	border-radius: 100px;
	background: var(--sl-cream);
	color: rgba(43, 43, 40, .55);
	font-size: var(--sl-text);
	line-height: 1;
	white-space: nowrap;
	transition: background .2s ease, color .2s ease;
}
.sl-col-chip:hover { color: var(--sl-dark); }
.sl-col-chip.is-on {
	background: var(--sl-orange);
	color: #fff;
}
.sl-col-chip.is-on:hover { color: #fff; }
.sl-col-chip:focus-visible { outline: 2px solid var(--sl-orange); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   2. 건수 + 검색
   -------------------------------------------------------------------------- */
.sl-col-util {
	background: #fff;
	padding: 0 20px;
	box-sizing: border-box;
}
/* 분류 칩이 없으면 히어로 바로 아래에 오므로 위 간격을 준다 */
.sl-col-util.is-top { padding-top: 120px; }
.sl-col-util__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	max-width: var(--sl-container);
	margin: 0 auto;
	padding-bottom: 24px;
	border-bottom: 1px solid rgba(43, 43, 40, .1);
}
.sl-col-util__count {
	margin: 0;
	font-size: var(--sl-text);
	color: rgba(43, 43, 40, .7);
}
.sl-col-util__count b {
	font-weight: 700;
	color: var(--sl-dark);
}
.sl-col-util__search {
	position: relative;
	flex: 0 1 320px;
}
.sl-col-util__srlabel {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.sl-col-util__search input {
	width: 100%;
	height: 48px;
	padding: 0 48px 0 21px;
	border: 1px solid rgba(43, 43, 40, .15);
	border-radius: 999px;
	background: #fff;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 15px;
	color: var(--sl-dark);
}
.sl-col-util__search input::placeholder { color: rgba(43, 43, 40, .4); }
.sl-col-util__search input:focus {
	outline: none;
	border-color: var(--sl-orange);
}
.sl-col-util__btn {
	position: absolute;
	top: 50%;
	right: 16px;
	transform: translateY(-50%);
	width: 24px;
	height: 24px;
	padding: 0;
	border: 0;
	background: none;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	-webkit-appearance: none;
	appearance: none;
}
/* 돋보기는 원 + 손잡이로 직접 그린다 (치료사례와 동일) */
.sl-col-util__btn i {
	position: relative;
	display: block;
	width: 13px;
	height: 13px;
	border: 1.6px solid rgba(43, 43, 40, .55);
	border-radius: 50%;
	transition: border-color .2s ease;
}
.sl-col-util__btn i::after {
	content: '';
	position: absolute;
	right: -5px;
	bottom: -3px;
	width: 7px;
	height: 1.6px;
	background: rgba(43, 43, 40, .55);
	transform: rotate(45deg);
	transition: background .2s ease;
}
.sl-col-util__btn:hover i { border-color: var(--sl-orange); }
.sl-col-util__btn:hover i::after { background: var(--sl-orange); }

/* --------------------------------------------------------------------------
   3. 블로그형 카드 목록
   -------------------------------------------------------------------------- */
.sl-col-list {
	background: #fff;
	padding: 60px 20px 140px;
	box-sizing: border-box;
}
.sl-col-list__inner {
	max-width: var(--sl-container);
	margin: 0 auto;
}
.sl-col-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 56px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sl-col-card { min-width: 0; }
.sl-col-card__link,
.sl-col-card__link:link,
.sl-col-card__link:visited {
	display: flex;
	flex-direction: column;
	height: 100%;
	text-decoration: none;
	color: inherit;
}

/* 3-1. 썸네일 (16:10 고정, 이미지 없으면 크림 배경 + Smile Line 표기) */
.sl-col-card__thumb {
	position: relative;
	display: block;
	aspect-ratio: 16 / 10;
	border-radius: 12px;
	overflow: hidden;
	background: var(--sl-cream);
}
.sl-col-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	color: transparent;
	transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
.sl-col-card__link:hover .sl-col-card__thumb img { transform: scale(1.04); }
.sl-col-card__thumb.is-empty {
	display: flex;
	align-items: center;
	justify-content: center;
}
.sl-col-card__thumb.is-empty em {
	font-family: 'Noto Serif KR', serif;
	font-style: normal;
	font-size: 24px;
	letter-spacing: 2px;
	color: rgba(184, 74, 30, .35);
}

/* 3-2. 본문 (분류 · 제목 · 요약 · 태그 · 날짜/조회수) */
.sl-col-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding-top: 22px;
}
.sl-col-card__cate {
	margin-bottom: 10px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sl-orange);
}
.sl-col-card__title {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--sl-dark);
	word-break: keep-all;
	transition: color .2s ease;
}
.sl-col-card__link:hover .sl-col-card__title { color: var(--sl-orange-dark); }
.sl-col-card__summary {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.65;
	color: rgba(43, 43, 40, .6);
	word-break: keep-all;
}
.sl-col-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 10px;
	margin-top: 14px;
}
.sl-col-card__tags span {
	font-size: 14px;
	color: var(--sl-orange-dark);
}
/* 날짜·조회수는 카드 맨 아래에 붙여 행마다 기준선을 맞춘다 */
.sl-col-card__meta {
	display: flex;
	gap: 14px;
	margin-top: auto;
	padding-top: 18px;
	font-size: 14px;
	color: rgba(43, 43, 40, .45);
}

.sl-col-empty {
	margin: 40px 0 0;
	text-align: center;
	font-size: var(--sl-text);
	color: rgba(43, 43, 40, .5);
}

/* --------------------------------------------------------------------------
   4. 페이지 번호
   -------------------------------------------------------------------------- */
.sl-col-paging {
	display: flex;
	justify-content: center;
	margin-top: 64px;
}

/* --------------------------------------------------------------------------
   5. 상세 (/column/read)
   -------------------------------------------------------------------------- */
.sl-colview {
	padding: 80px 20px 120px;
	background: #fff;
}
/* 읽기 페이지는 긴 글이므로 본문 폭을 좁혀 가독성을 확보한다 */
.sl-colview__inner {
	max-width: 960px;
	margin: 0 auto;
}
.sl-colview__head {
	padding-bottom: 28px;
	border-bottom: 1px solid rgba(43, 43, 40, .12);
}
.sl-colview__cate {
	margin: 0 0 12px;
	color: var(--sl-orange);
	font-size: var(--sl-text);
	font-weight: 600;
}
.sl-colview__title {
	margin: 0 0 14px;
	color: var(--sl-dark);
	font-size: 32px;
	font-weight: 700;
	line-height: 1.4;
	word-break: keep-all;
}
.sl-colview__meta {
	display: flex;
	gap: 20px;
	margin: 0;
	color: rgba(43, 43, 40, .5);
	font-size: var(--sl-text);
}
.sl-colview__cover {
	margin: 40px 0 0;
	border-radius: 12px;
	overflow: hidden;
	background: var(--sl-cream);
}
.sl-colview__cover img {
	display: block;
	width: 100%;
	height: auto;
}
.sl-colview__body {
	margin: 40px 0 0;
	color: var(--sl-dark);
	font-size: 17px;
	line-height: 1.85;
	word-break: keep-all;
}
.sl-colview__body img { max-width: 100%; height: auto; }
.sl-colview__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 48px 0 0;
}
.sl-colview__tags span {
	padding: 7px 14px;
	border-radius: 999px;
	background: var(--sl-cream);
	font-size: 14px;
	color: var(--sl-orange-dark);
}
.sl-colview__foot {
	display: flex;
	justify-content: center;
	margin: 64px 0 0;
	padding-top: 48px;
	border-top: 1px solid rgba(43, 43, 40, .12);
}
.sl-colview__list,
.sl-colview__list:link,
.sl-colview__list:visited {
	display: inline-block;
	padding: 16px 56px;
	border-radius: 100px;
	background: var(--sl-dark);
	color: #fff;
	font-size: var(--sl-text);
	text-decoration: none;
	transition: background .2s ease;
}
.sl-colview__list:hover { background: var(--sl-orange); color: #fff; }

/* --------------------------------------------------------------------------
   6. 반응형 (히어로 밴드의 반응형은 site_layout.css 가 담당)
   -------------------------------------------------------------------------- */
@media (max-width: 1024px) {
	/* 가로로 긴 히어로 사진이 얇은 띠로 줄지 않게 cover 로 되돌린다 (case.css 와 동일) */
	.sl-subhero .sl-subhero__bg {
		object-fit: cover;
		object-position: 90% center;
	}
	.sl-col-filter { padding: 64px 20px 28px; }
	.sl-col-chip { padding: 14px 26px; font-size: 15px; }
	.sl-col-util.is-top { padding-top: 64px; }
	.sl-col-list { padding: 36px 20px 80px; }
	.sl-col-grid { grid-template-columns: repeat(2, 1fr); gap: 44px 20px; }
	.sl-col-card__title { font-size: 18px; }
	.sl-col-paging { margin-top: 44px; }
	/* board.css 가 1024 이하에서 숨기는 페이지 번호를 이 페이지에서만 되살린다 (case.css 와 동일) */
	.sl-col-paging .prd_page_nav_wrapper {
		display: flex !important;
		margin-top: 0;
		gap: 8px;
	}
	.sl-col-paging .prd_page_nav_num_box { gap: 8px; }
	.sl-col-paging a.prd_page_nav_num { width: 40px; font-size: 16px; }
	.sl-col-paging .prd_page_nav_arw img { width: 20px; height: 20px; }
}
@media (max-width: 768px) {
	.sl-colview { padding: 48px 20px 80px; }
	.sl-colview__title { font-size: 22px; }
	.sl-colview__cover,
	.sl-colview__body { margin-top: 28px; }
	.sl-colview__body { font-size: 16px; }
	.sl-colview__list { padding: 14px 40px; }
}
@media (max-width: 640px) {
	.sl-col-filter { padding: 48px 16px 24px; }
	.sl-col-chip { padding: 12px 20px; font-size: 14px; }
	.sl-col-util { padding: 0 16px; }
	.sl-col-util.is-top { padding-top: 48px; }
	.sl-col-util__inner {
		flex-direction: column;
		align-items: stretch;
		gap: 12px;
		padding-bottom: 20px;
	}
	.sl-col-util__search { flex: 0 0 auto; }
	.sl-col-list { padding: 28px 16px 64px; }
	.sl-col-grid { grid-template-columns: 1fr; gap: 44px; }
	.sl-col-paging { margin-top: 36px; }
	.sl-col-paging .prd_page_nav_wrapper { gap: 6px; }
	.sl-col-paging .prd_page_nav_num_box { gap: 6px; }
	.sl-col-paging a.prd_page_nav_num { width: 36px; font-size: 15px; }
	.sl-col-paging .prd_page_nav_arw img { width: 18px; height: 18px; }
}