/* ============================================================
   research_event — 학술행사 카드형 게시판 전용 CSS
   상속: common_thumb (common01-01.css + board.common.thumb.js)
   신규 정의: 카드 3열 그리드 + 상세 페이지 디자인
   ============================================================ */

/* ── 목록: 카드 3열 그리드 ──
   솔루션 img01-03.css 의 `.bn-list-img01.type03 > ul > li` (0,3,1) 가 float/width/padding 을
   고정하므로, listLayout 의 `bn-list-img01.type03.research-event-list` 컴파운드(0,3,1)+자기 셀렉터(0,4,2) 로
   specificity 를 이긴다. */
.bn-list-img01.type03.research-event-list > ul,
.research-event-list ul {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* ── 카드 (li) — 솔루션 float/width/padding override ── */
.bn-list-img01.type03.research-event-list > ul > li,
.research-event-list ul > li {
    float: none;
    width: auto;
    padding: 0;
    position: relative;
    border: 1px solid #e8e8e8;
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.2s ease;
    background: #fff;
}
.research-event-list ul > li:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}
.research-event-list ul > li > a {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* ── 관리자 체크박스 (카드 좌상단) ──
   솔루션 board.admin.js `makeControll()` 이 페이지 로드 시 `<input type="checkbox">` 를
   우리 빈 `<span class="article-chk">` 안에 자동 append. 따라서 시각 표시는 input 자체가 담당.
   우리 span 은 위치만 잡고 background/border/::after 없음 (이중 표시 방지). */
.bn-list-img01.type03.research-event-list .article-chk,
.research-event-list .article-chk {
    position: absolute !important;
    top: 8px !important;
    left: 8px !important;
    z-index: 5;
    display: block;
    width: auto;
    height: auto;
    background: transparent;
    border: 0;
    line-height: 0;
}
.research-event-list .article-chk input[type=checkbox] {
    width: 22px;
    height: 22px;
    margin: 0;
    cursor: pointer;
    accent-color: #1174ff;
}

/* ── 상단 "전체 선택/비선택" 체크박스 ── */
.research-event-list .b-top-info-wrap .adm-chk {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.research-event-list .b-top-info-wrap .chk-toggle {
    display: inline-block;
    line-height: 0;
    vertical-align: middle;
    background: transparent;
    border: 0;
    width: auto;
    height: auto;
}
.research-event-list .b-top-info-wrap .chk-toggle input[type=checkbox] {
    width: 18px;
    height: 18px;
    margin: 0;
    cursor: pointer;
    accent-color: #1174ff;
}
.research-event-list .b-top-info-wrap .adm-chk label {
    cursor: pointer;
    font-size: 14px;
    color: #333;
}

/* ── 썸네일 박스 (16:9) — 솔루션 height:251px override ── */
.bn-list-img01.type03.research-event-list .b-img-box,
.research-event-list .b-img-box {
    position: relative;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: #f0f0f0;
}
.research-event-list .b-img-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.3s ease;
}
.research-event-list ul > li:hover .b-img-box img {
    transform: scale(1.04);
}

/* ── PC/MO 썸네일 토글 (768px 기준) ── */
.research-event-list .b-img-box .mo-thumb { display: none; }
.research-event-list .b-img-box .pc-thumb { display: block; }

@media (max-width: 768px) {
	.bn-list-img01.type03.research-event-list > ul,
	.research-event-list ul{
		grid-template-columns: 1fr;
	}
	
    .research-event-list .b-img-box .pc-thumb { display: none; }
    .research-event-list .b-img-box .mo-thumb { display: block; }
}

/* ── 콘텐츠 박스 ── */
.research-event-list .b-con-box {
    padding: 14px 16px 16px;
}

/* ── 제목 (2줄 말줄임) ── */
.research-event-list .b-title {
    font-weight: 700;
    font-size: 15px;
    line-height: 1.5;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    color: #111;
    margin-bottom: 8px;
}

/* ── 메타 정보 (날짜 | 조회수) ── */
.research-event-list .b-i-box {
    display: flex;
    align-items: center;
    gap: 0;
    color: #888;
    font-size: 13px;
}
.research-event-list .b-i-box span + span::before {
    content: '|';
    margin: 0 8px;
    color: #ccc;
}

/* ── 미게시 (관리자 목록) ── */
.research-event-list ul > li.unpublished {
    opacity: 0.5;
}

/* ── 삭제됨 (deleteYn='Y') — thesis 패턴 따라 숨기지 않고 취소선/회색 표시.
   관리자 목록에서 삭제글이 보여야 복구가 가능하므로 display:none 금지. */
.research-event-list ul > li.deleted .b-title,
.research-event-list ul > li.deleted .b-title-box {
    text-decoration: line-through;
    color: #999;
}
.research-event-list ul > li.deleted .b-img-box {
    opacity: 0.5;
}

/* ── 빈 목록 ── */
.research-event-list ul > li.b-no-post {
    grid-column: 1 / -1;
    text-align: center;
    padding: 80px 0;
    color: #999;
    font-size: 15px;
    border: none;
    background: transparent;
}

/* ── 상단 관리자 체크박스 영역 ── */
.research-event-list .b-top-info-wrap {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
}

/* ── 모바일 1열 ── */
@media (max-width: 768px) {
    .research-event-list ul {
        grid-template-columns: 1fr;
    }
}

/* ============================================================
   상세 페이지
   ============================================================ */

/* ── 제목 ── */
.research-event-view .b-view-title {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.45;
    color: #111;
    padding-bottom: 16px;
    border-bottom: 2px solid #222;
    margin-bottom: 12px;
}
.research-event-view .b-view-title span {
    display: block;
}

/* ── 날짜 / 조회수 ── */
.research-event-view .b-view-info {
    display: flex;
    align-items: center;
    gap: 16px;
    color: #666;
    font-size: 14px;
    padding-bottom: 20px;
    border-bottom: 1px solid #e8e8e8;
    margin-bottom: 28px;
}

/* ── 본문 ── */
.research-event-view .b-view-content {
    padding-bottom: 40px;
    line-height: 1.8;
    font-size: 15px;
    color: #333;
}