@charset "utf-8";

/**
 * 1. 외부 라이브러리 로드
 * FontAwesome 4.7 아이콘 폰트를 불러옵니다.
 */
@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css');

/**
 * 2. 메타 정보(날짜, 댓글) 아이콘 및 텍스트 공통 설정
 * 스케치북 스킨 스타일(Tahoma)과 수직 정렬을 맞춥니다.
 */
.xet-content__webzine .item__date, 
.xet-content__webzine .cmt_count {
    display: inline-flex !important;
    align-items: center !important;
    /* 스케치북 스킨과 동일한 폰트 세팅 */
    font-family: Tahoma, AppleGothic, sans-serif !important;
    font-size: 12px !important; /* 폰트 크기 통일 */
    color: #999 !important;
    letter-spacing: -0.5px !important;
}

/* 아이콘 공통 속성 */
.xet-content__webzine .item__date::before,
.xet-content__webzine .cmt_count::before {
    font-family: 'FontAwesome' !important;
    display: inline-block !important;
    color: #ccc !important;
    line-height: 1 !important;
    position: relative !important;
    vertical-align: middle !important;
    transition: color 0.3s ease !important;
}

/* [날짜 아이콘] 시계 모양 및 위치 조절 */
.xet-content__webzine .item__date::before {
    content: '\f017' !important;
    margin-right: 6px !important;
    font-size: 13px !important; 
    top: 0px !important; /* Tahoma 폰트 높이에 맞게 조정 */
}

/* [댓글 아이콘] 말풍선 모양 및 위치 조절 */
.xet-content__webzine .cmt_count::before {
    content: '\f075' !important;
    margin-right: 6px !important;
    font-size: 11px !important;
    top: 1px !important; 
}

/**
 * 3. 마우스 오버 효과
 * 게시물에 마우스를 올리면 제목과 댓글 정보 색상이 변합니다.
 */
/* 제목 색상 변경 */
.xet-content__webzine > .item:hover .item__subject .subject {
    color: #2c3e50 !important;
}

/* 댓글 아이콘 및 숫자 동시 강조 (빨간색) */
.xet-content__webzine .item:hover .cmt_count,
.xet-content__webzine .item:hover .cmt_count::before {
    color: #e67e22 !important;
}

/**
 * 4. 게시물 레이아웃 (웹진형)
 */
.xet-content__webzine { 
    padding: 10px 40px !important; 
    font-family: "Pretendard", sans-serif;
}

/* 개별 게시물 아이템 박스 */
.xet-content__webzine > .item {
    position: relative;
    display: block !important; 
    padding: 20px !important;
    margin-bottom: 10px !important; 
    border: 1px solid transparent !important; 
    transition: all 0.3s ease !important; 
    border-radius: 5px; 
}

/* 아이템 호버 시 배경색 */
.xet-content__webzine > .item:hover {
    border-color: #2c3e50 !important; 
    background-color: #f9f9f9 !important; 
}

/* 제목 텍스트 스타일 */
.xet-content__webzine .item__subject {
    margin-bottom: 12px !important;
    display: flex !important;
    align-items: center !important;
}

.xet-content__webzine .item__subject .subject {
    font-size: 20px !important;
    font-weight: 700 !important; 
    color: #345678 !important; 
    text-decoration: none !important;
    line-height: 1.4 !important;
}

/* 본문 요약 및 썸네일 배치 (Flex) */
.xet-content__webzine .item__bottom_flex {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 30px !important; 
}

.xet-content__webzine .item__content_wrp {
    flex: 1 !important;
    min-width: 0 !important;
}

/* 본문 요약 글자 스타일 (2줄 제한) */
.xet-content__webzine .item__content {
    font-size: 15px !important;
    line-height: 1.6 !important; 
    color: #556677 !important; 
    margin-bottom: 10px !important;
    display: -webkit-box !important; 
    -webkit-line-clamp: 2 !important; 
    -webkit-box-orient: vertical !important; 
    overflow: hidden !important;
}

/* 날짜/댓글 정렬 컨테이너 */
.xet-content__webzine .item__meta {
    margin-top: 10px !important;
    display: flex !important;
    align-items: center !important;
    gap: 15px !important;
}

/* 썸네일 이미지 박스 */
.xet-content__webzine .item__thumbnail {
    flex-shrink: 0 !important;
    width: 130px !important;
    height: 85px !important;
    overflow: hidden !important;
    border: 1px solid #ddd !important;
    border-radius: 4px;
}

.xet-content__webzine .item__thumbnail img {
    width: 100% !important; 
    height: 100% !important; 
    object-fit: cover !important; 
    transition: transform 0.4s ease-out !important;
}

/* 호버 시 썸네일 확대 효과 */
.xet-content__webzine > .item:hover .item__thumbnail img {
    transform: scale(1.1) !important;
}

/* 아이템 전체 영역 클릭 가능하게 설정 */
.xet-content__webzine > .item > .link {
    z-index: 5;
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
}

/**
 * 5. 모바일 최적화 (화면 너비 768px 이하)
 */
@media (max-width: 768px) {
    .xet-content__webzine { padding: 0 !important; margin: 0 !important; }
    .xet-content__webzine > .item {
        padding: 15px 5px !important; 
        border: 0 !important; 
        border-bottom: 1px solid #eee !important; 
        background-color: transparent !important; 
        margin-bottom: 0 !important;
    }
    .xet-content__webzine .item__subject .subject { font-size: 17px !important; }
    .xet-content__webzine .item__thumbnail { width: 80px !important; height: 55px !important; }
}

/**
 * 6. 검색창 디자인 (PC 전용)
 */
 
 
@media screen and (min-width: 1024px) {
    /* 검색창 컨테이너 */
    .daerew-search-container.pc-only { 
        margin: 10px 40px 30px 40px; 
    }
	

    /* 검색창 내부 박스 */
    .daerew-search-inner {
        display: flex; 
        align-items: center; 
        justify-content: space-between; /* 양 끝으로 밀어내기 추가 */
        background: #fff; 
        padding: 18px 25px;
        border: 1px solid #ddd !important; 
        border-radius: 8px;
        transition: all 0.3s ease;
    }

    /* 검색창 호버 효과 (오렌지 테두리) */
    .daerew-search-inner:hover, 
    .daerew-search-inner:focus-within {
        border-color: #e67e22 !important; 
        background-color: #fffaf5 !important;
    }

    /* ⭐ 누락되었던 래퍼 설정 복구 (입력창과 돋보기를 묶어서 남은 공간 차지) */
    .search-input-wrapper {
        flex: 1; /* 남는 빈 공간을 모두 차지하게 해서 버튼을 우측으로 밉니다 */
        display: flex;
        align-items: center;
    }

    /* 돋보기 아이콘 */
    .icon-search { color: #e67e22; font-size: 18px; margin-right: 15px; }

    /* 입력창 스타일 */
    .daerew-input { 
        width: 100%; 
        border: none !important; 
        background: transparent !important;
        font-size: 17px !important; 
        color: #345678 !important; 
        outline: none; 
    }

    /* 클릭 시 placeholder 글자 투명하게 */
    .daerew-input:focus::placeholder {
        color: transparent;
    }

    /* 검색 버튼 스타일 */
    .daerew-submit-btn {
        flex-shrink: 0; /* 글자가 많아져도 버튼이 찌그러지지 않게 방어 */
        background: #e67e22 !important; 
        color: #fff !important; 
        padding: 10px 25px !important;
        border: none !important;
        border-radius: 5px; 
        font-weight: bold; 
        cursor: pointer;
        transition: background 0.3s ease;
        margin-left: 15px; /* 입력창과의 최소 간격 보장 */
    }
    
    .daerew-submit-btn:hover {
        background: #d35400 !important;
    }
}

/**
 * 모바일 및 태블릿(1024px 미만)에서 PC 전용 검색창 숨기기
 */
@media screen and (max-width: 1023px) {
    .daerew-search-container.pc-only {
        display: none !important;
    }
}