@charset "UTF-8";
.label_wrap span{
	cursor: pointer;
}
/* 해시태그 기본 스타일 */
.label_wrap li {
    display: inline-block;      /* 옆으로 나열되도록 설정 */
    border: 1px solid #e3e3e3;     /* 회색 테두리 (네모박스) */
    padding: 5px 10px;          /* 박스 안쪽 여백 */
    margin: 0 5px 5px 0;        /* 태그 사이 간격 */
    cursor: pointer;            /* 마우스 올리면 손가락 모양 */
    list-style: none;           /* 리스트 앞의 점(bullet) 제거 */
    border-radius: 4px;         /* 모서리를 살짝 둥글게 (완전 사각형 원하면 제거) */
    background-color: #e3e3e3;     /* 배경색 흰색 */
    font-size: 13px;            /* 글자 크기 조정 */
    color: #000;
}

/* 마우스 올렸을 때 효과 (선택 사항) */
.label_wrap li:hover {
    background-color: #097c7c;
    color: #fff;
    border-color: #097c7c;
}

/* 선택된 태그 스타일 (이미 클래스 로직이 있으므로 스타일만 정의) */
.label_wrap li.tag_selected {
    background-color: #097c7c;  /* 선택 시 배경색 (파란색 예시) */
    color: #fff;                /* 선택 시 글자색 */
    border-color: #097c7c;
}

/* 전체 리스트 컨테이너 */
.case-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 20px; /* 카드 사이 간격 */
    max-width: 1200px;
    margin: 0 auto;
}

/* 개별 카드 스타일 */
.case-card {
    background: #fff;
    border: 1px solid #e0e0e0; /* 연한 테두리 */
    border-radius: 12px;       /* 둥근 모서리 */
    padding: 25px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03); /* 아주 살짝 그림자 */
    transition: all 0.2s ease;
}

.case-card:hover {
    box-shadow: 0 5px 15px rgba(0,0,0,0.08); /* 마우스 올리면 살짝 뜸 */
    border-color: #ccc;
}

/* [상단] 헤더 영역 */
.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

.badge-agency {
    display: inline-block;
    padding: 4px 10px;
    background-color: #f5f7fa; /* 연한 회색 배경 */
    color: #333;
    font-weight: 600;
    font-size: 14px;
    border: 1px solid #ddd;
    border-radius: 4px;
    margin-right: 8px;
}

.text-year {
    color: #888;
    font-size: 14px;
}

.card-stats .stat-item {
    font-size: 13px;
    color: #666;
    margin-left: 10px;
    /* 아이콘 이미지는 background-image나 i태그 등으로 처리 필요 */
}

/* [통계 영역] 숫자와 아이콘 정렬 */
.card-stats {
    display: flex;
    align-items: center;
}

.stat-item {
    display: flex;           /* 아이콘과 숫자를 가로로 배치 */
    align-items: center;     /* 세로 중앙 정렬 */
    font-size: 13px;
    color: #666;
    margin-left: 12px;       /* 아이템 간 간격 */
}

/* [공통] 아이콘 크기 및 속성 설정 */
.icon-view, .icon-like {
    display: inline-block;
    width: 18px;             /* 아이콘 너비 (조절 가능) */
    height: 18px;            /* 아이콘 높이 (조절 가능) */
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* 이미지가 박스 안에 꽉 차게 */
    margin-right: 4px;       /* 아이콘과 숫자 사이 간격 */
}

/* [개별] 이미지 경로 연결 (사용하시던 경로 그대로) */
.icon-view {
    background-image: url('/images/front/invCase/c-view.svg');
}

.icon-like {
    background-image: url('/images/front/invCase/c-like.svg');
}

/* [중단] 제목 */
.card-title {
    margin: 0 0 20px 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.4;
    color: #111;
}

.card-title a {
    text-decoration: none;
    color: inherit;
}

.card-title a:hover {
    text-decoration: underline;
    color: #0056b3; /* 포인트 컬러 */
}

/* [본문] 목적/방법/내용 (Grid 활용) */
.card-body {
    border-top: 1px solid #eee;
    padding-top: 15px;
    margin-bottom: 15px;
}

.info-row {
    display: flex;
    margin-bottom: 10px;
    font-size: 15px;
    line-height: 1.6;
}

.info-row dt {
    width: 60px;       /* 라벨 너비 고정 */
    font-weight: 700;  /* 굵게 */
    color: #333;
    flex-shrink: 0;    /* 줄어들지 않음 */
}

.info-row dd {
    margin: 0;
    color: #555;
    word-break: keep-all; /* 단어 단위 줄바꿈 */
}

/* [하단] 태그 */
.tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-pill {
    background-color: #f1f3f5;
    color: #495057;
    padding: 4px 12px;
    border-radius: 20px; /* 둥근 캡슐 모양 */
    font-size: 13px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.tag-pill:hover {
    background-color: #e9ecef;
}

/* 태그 선택되었을 때 (이전 대화 맥락 반영) */
.tag-pill.tag_selected {
    background-color: #0056b3; /* 선택색상 */
    color: #fff;
}

/* 데이터 없음 (.no-data) 스타일 */
.no-data {
    /* 박스 모양: 카드와 동일한 테두리 및 둥근 모서리 */
    width: 100%;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 12px;
    
    /* 배치 및 여백 */
    padding: 100px 0; /* 위아래 여백을 넉넉하게 주어 휑해 보이지 않게 함 */
    margin: 20px 0px;
    box-sizing: border-box;

    /* 내용 정렬 (Flexbox) */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 15px; /* 아이콘과 텍스트 사이 간격 */

    /* 텍스트 스타일 */
    color: #888;
    font-size: 16px;
    font-weight: 500;
}

/* [선택사항] 느낌표(!) 아이콘을 CSS로 그리기 */
.no-data::before {
    content: '!'; 
    display: flex;
    justify-content: center;
    align-items: center;
    
    width: 60px;
    height: 60px;
    background-color: #f5f7fa; /* 연한 회색 원 */
    color: #ccc;               /* 글자색 */
    
    border-radius: 50%;        /* 원형 만들기 */
    font-size: 24px;
    font-weight: bold;
    font-family: sans-serif;
    margin-bottom: 10px;
}