@charset "utf-8";

/* 내용관리 */
/*#ctt {margin:10px 0;padding:20px;background:#fff}*/
.ctt_admin {text-align:right; display: none;}
#ctt header h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}
#ctt_con {padding:10px 0;line-height:1.6em}
#ctt_con img{max-width:100%;height:auto}
.ctt_img {text-align:center}

/* 활용사례 섹션 - 어플리케이션 필터 */
.caseSectionHeader {display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-bottom: 24px;}
.caseSectionHeader h3 {margin-bottom: 0;}
.appFilterList {display: flex; flex-wrap: wrap; gap: 8px 3px; list-style: none; margin: 0; padding: 0;}
.appFilterList li {display: inline-block;}
.appFilterList li a {display: block; padding: 7px 12px; font-size: 14px; font-weight: 500; color: #222; background-color: #F0F0F0; border-radius: 4px; transition: background-color ease-out .1s; text-decoration: none;}
.appFilterList li a:hover {background-color: #D8D8D8;}
.appFilterList li a.active {background-color: #333; color: #fff; font-weight: 600;}

/* 활용사례 - 이미지 영역에만 hover 오버레이 (색상탭 hover 시 오버레이 비표시) */
.examCaseItem .examImage::after { display: none !important; }
.examCaseItem .examImageInner { position: relative; display: block; overflow: hidden; }
/* 썸네일 이미지 하단 라운드 - 색상버튼 유무 관계없이 통일 */
.examCaseItem .examImageInner,
.examCaseItem .examImageInner img { border-radius: 0 0 15px 15px; }
.examCaseItem .examImageInner::after { content: ''; display: block; opacity: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.5); position: absolute; left: 0; top: 0; transition: opacity ease-out .1s; background-image: url('../../../img/cmf_icon_more.svg'); background-position: center; background-repeat: no-repeat; pointer-events: none; }
.examCaseItem .examImageInner:hover::after { opacity: 1; }

/* 활용사례 타이틀 - 이미지와 간격, 글씨 잘림 방지 (overflow 영역에서 여유 확보) */
.examCaseItem .examImage > p { margin: 12px 0 0; padding: 0 6px 8px 6px; line-height: 1.5; overflow: visible; min-height: 1.5em; }

/* 활용사례 색상 스와치 (Patagonia 스타일 - 썸네일 밑 색상 클릭 시 이미지 전환) */
.caseColorSwatches {position: relative; z-index: 2; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px 8px; margin-top: 10px; padding: 10px 10px 8px 10px; border-top: 1px solid #eee; background: #fff; border-radius: 0 0 15px 15px;}
.caseColorSwatch {padding: 6px 12px; font-size: 12px; font-weight: 500; color: #333; background: #f0f0f0; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; transition: background .15s, border-color .15s;}
.caseColorSwatch:hover {background: #e0e0e0; border-color: #ccc;}
.caseColorSwatch.active {background: #333; color: #fff; border-color: #333;}
.caseColorSwatches .caseColorSwatch:first-child,
.caseColorSwatches .caseColorSwatch.active {border-radius: 4px !important;}