/* ============================================================
   DataSolid Lab – News 게시판 / 서브 비주얼 CSS
   version : v11  (2026-09-21)
   변경점  : (1) 목록 – 게시물 사이 세로 간격 조절 추가  → [1] Settings + [6]
   이전    : v10 – 상세 본문 모바일 글자 크기 / [2]·[5] 버그수정
   ============================================================ */


/* ===== LAYOUT OVERRIDE : 서브 비주얼 이미지 ===== */
.wrapper .container .area-visual {
	--visual-image: url(/_res/postech/datasolid/img/main_head3.png);
	;
}
/* ===== //LAYOUT OVERRIDE ===== */


@media only screen and (max-width: 1024px) {

  /* 높이 — 3개 값 통일 (min/max가 height를 덮어쓰므로) */
	.wrapper .container .area-visual {
	--visual-image: url(/_res/postech/datasolid/img/main_head_mobile.png);
	;
}

  .wrapper .container .area-visual {
    height:     26rem !important;   /* 120px */
    min-height: 26rem !important;
    max-height: 26rem !important;
  }

  /* 제목 "Research" 글자 크기 */
  .wrapper .container .area-visual h2 {
    font-size:   4.0rem !important;   /* 30px */
    line-height: 1.2    !important;
  }
}

/* ============================================================
   [1] Settings  ─ 여기 숫자만 바꾸면 됩니다
   ============================================================ */
.co-board.datasolid {

	/* --- 썸네일 크기 --- */
	--ds-thumb-w-pc: 26rem;
	--ds-thumb-h-pc: 18rem;
	--ds-thumb-w-mo: 100%;       /* 세로 배치용 전체 폭. 작게 쓰려면 12rem 등 */
	--ds-thumb-h-mo: 18rem;

	/* --- 목록 : PC 글자 크기 --- */
	--ds-title-pc:     2.2rem;   /* 제목 */
	--ds-title-lh-pc:  3.8rem;   /* 제목 줄간격 */
	--ds-text-pc:      1.6rem;   /* 본문 미리보기 */
	--ds-text-lh-pc:   2.6rem;   /* 본문 줄간격 */
	--ds-date-pc:      1.4rem;   /* 날짜 */

	/* --- 목록 : 모바일 글자 크기 --- */
	--ds-title-mo:     1.6rem;
	--ds-title-lh-mo:  2.2rem;
	--ds-text-mo:      1.2rem;
	--ds-text-lh-mo:   1.9rem;
	--ds-date-mo:      1.3rem;

	/* --- 목록 : 줄 수 (PC) --- */
	--ds-title-lines:    7;
	--ds-text-lines:     14;

	/* --- 목록 : 줄 수 (모바일) --- */
	--ds-title-lines-mo: 7;
	--ds-text-lines-mo:  7;

	/* --- 줄바꿈 규칙 ---
	   keep-all / normal / break-all */
	--ds-break: normal;

	/* --- 목록 : 여백 --- */
	--ds-gap-pc:       2.5rem;   /* PC : 썸네일 ↔ 글 가로 간격 */
	--ds-stack-gap-mo: 1.0rem;   /* 모바일 : 세로 요소 사이 간격 */
	--ds-item-pad-pc:  2.0rem;   /* ★ v11  PC : 게시물 위·아래 여백 (키우면 게시물 사이가 넓어짐) */
	--ds-item-pad-mo:  1.5rem;   /* ★ v11  모바일 : 위와 동일 ([6]에서 주석 해제해야 적용) */

	/* --- 상세 페이지 : 모바일 글자 크기 --- */
	--ds-view-title-mo:     1.7rem;
	--ds-view-title-lh-mo:  2.2rem;
	--ds-view-date-mo:      1.3rem;
	--ds-view-text-mo:      1.4rem;   /* ★ 본문 – 에디터 18pt 고정을 덮어씀 */
	--ds-view-text-lh-mo:   2.0rem;
}
/* ===== //Settings ===== */


/* ============================================================
   [2] 게시판 목록 – 공통 / PC   (썸네일 = 오른쪽, 가로 배치)
   ============================================================ */

/* 썸네일 크기 */
.co-board.datasolid .list_view_wrap {
	--el-img-width:  var(--ds-thumb-w-pc);
	--el-img-height: var(--ds-thumb-h-pc);
}

/* PC: 제목 (글자 크기 + 줄 수 고정) */
.co-board.datasolid .list_view_wrap .title {
	font-size:   var(--ds-title-pc) !important;
	line-height: var(--ds-title-lh-pc) !important;
	word-break:  var(--ds-break);
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: var(--ds-title-lines) !important;
	line-clamp: var(--ds-title-lines) !important;
	overflow: hidden !important;
	white-space: normal !important;
	max-height: calc(var(--ds-title-lh-pc) * var(--ds-title-lines)) !important;
	height: auto !important;
}

/* PC: 본문 미리보기 (글자 크기 + 줄 수 고정) */
.co-board.datasolid .list_view_wrap .con_txt {
	font-size:   var(--ds-text-pc) !important;
	line-height: var(--ds-text-lh-pc) !important;
	word-break:  var(--ds-break);
	display: -webkit-box !important;
	-webkit-box-orient: vertical !important;
	-webkit-line-clamp: var(--ds-text-lines) !important;
	line-clamp: var(--ds-text-lines) !important;
	overflow: hidden !important;
	white-space: normal !important;
	max-height: calc(var(--ds-text-lh-pc) * var(--ds-text-lines)) !important;
	height: auto !important;
}

/* PC: 날짜 */
.co-board.datasolid .list_view_wrap .board_status {
	font-size: var(--ds-date-pc) !important;
}

/* 조회수 + 구분선 숨기기 (PC + 모바일 전체) */
.co-board.datasolid .list_view_wrap .board_status .view,
.co-board.datasolid .board_status .view {
	display: none !important;
}
.co-board.datasolid .board_status .view:before {
	display: none !important;
	content: '' !important;
}


/* ===== LAYOUT OVERRIDE : PC 가로 배치 (썸네일 = 오른쪽) ===== */
.co-board.datasolid .list_view_wrap a {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center;
}
.co-board.datasolid .list_view_wrap .thumb_wrap {
	order: 1 !important;         /* 썸네일 = 맨 뒤(오른쪽) */
	flex-shrink: 0;
}
.co-board.datasolid .list_view_wrap .text_wrap {
	order: 0 !important;
	flex: 1 1 auto;
	min-width: 0;
	padding-left:  0 !important;                 /* v10 : 값 누락 버그 수정 */
	padding-right: var(--ds-gap-pc) !important;
}
/* ===== //LAYOUT OVERRIDE ===== */


/* ============================================================
   [3] 게시판 목록 – 모바일 (max-width: 1024px)
       세로 배치 :  제목 → 사진 → 본문 → 날짜
   ============================================================ */
@media only screen and (max-width: 1024px) {

	/* ===== LAYOUT OVERRIDE : 모바일 세로 스택 ===== */

	/* 1) <a> 를 세로 방향 flex 로 */
	.co-board.datasolid .list_view_wrap a {
		flex-direction: column !important;
		align-items: stretch !important;
	}

	/* 2) .text_wrap 껍데기 해제 → 제목·본문·날짜가 <a> 의 직계 항목이 됨 */
	.co-board.datasolid .list_view_wrap .text_wrap {
		display: contents !important;
	}

	/* 3) 순서 지정 */
	.co-board.datasolid .list_view_wrap .title        { order: 1 !important; }
	.co-board.datasolid .list_view_wrap .thumb_wrap   { order: 2 !important; }
	.co-board.datasolid .list_view_wrap .con_txt      { order: 3 !important; }
	.co-board.datasolid .list_view_wrap .board_status { order: 4 !important; }

	/* 4) 세로 간격 */
	.co-board.datasolid .list_view_wrap .title,
	.co-board.datasolid .list_view_wrap .thumb_wrap,
	.co-board.datasolid .list_view_wrap .con_txt {
		margin-bottom: var(--ds-stack-gap-mo) !important;
	}

	/* 5) 썸네일 크기 */
	.co-board.datasolid .list_view_wrap .thumb_wrap {
		width:  var(--ds-thumb-w-mo) !important;
		height: var(--ds-thumb-h-mo) !important;
		flex-shrink: 0;
	}
	/* ===== //LAYOUT OVERRIDE ===== */

	/* 모바일: 제목 */
	.co-board.datasolid .list_view_wrap .title {
		font-size:   var(--ds-title-mo) !important;
		line-height: var(--ds-title-lh-mo) !important;
		-webkit-line-clamp: var(--ds-title-lines-mo) !important;
		line-clamp: var(--ds-title-lines-mo) !important;
		max-height: calc(var(--ds-title-lh-mo) * var(--ds-title-lines-mo)) !important;
	}

	/* 모바일: 본문 미리보기 */
	.co-board.datasolid .list_view_wrap .con_txt {
		font-size:   var(--ds-text-mo) !important;
		line-height: var(--ds-text-lh-mo) !important;
		-webkit-line-clamp: var(--ds-text-lines-mo) !important;
		line-clamp: var(--ds-text-lines-mo) !important;
		max-height:  calc(var(--ds-text-lh-mo) * var(--ds-text-lines-mo)) !important;
	}

	/* 모바일: 날짜 */
	.co-board.datasolid .list_view_wrap .board_status {
		font-size: var(--ds-date-mo) !important;
	}
}


/* ============================================================
   [4] 상세 페이지 (글 보기)
   ============================================================ */

/* Back to List ↔ 제목 사이 틈 */
.co-board.datasolid .board_view .head {
	margin-top: 2.5rem;
}

@media only screen and (max-width: 1024px) {

	/* 글 제목 : 템플릿의 h1~h6 { font-size:100% } 를 덮어써야 하므로 !important */
	.co-board.datasolid .board_view .head .left h4,
	.co-board.datasolid .board_view .head h4 {
		font-size:   var(--ds-view-title-mo) !important;
		line-height: var(--ds-view-title-lh-mo) !important;
		word-break:  var(--ds-break);
	}

	/* 날짜 */
	.co-board.datasolid .board_view .head .board_status {
		font-size: var(--ds-view-date-mo) !important;
	}

	/* ----- 본문 : 에디터에서 고정한 크기(18pt 등) 덮어쓰기  ★ v10 -----
	   에디터가 <p style="font-size:18pt"> / <span style="..."> 형태로
	   각 요소에 직접 크기를 박기 때문에, .cont 에만 지정하면 적용되지 않음.
	   → 자식 요소까지 !important 로 지정 (외부 CSS의 !important 는 인라인보다 우선) */
	.co-board.datasolid .board_view .cont,
	.co-board.datasolid .board_view .cont p,
	.co-board.datasolid .board_view .cont span,
	.co-board.datasolid .board_view .cont div,
	.co-board.datasolid .board_view .cont li,
	.co-board.datasolid .board_view .cont td,
	.co-board.datasolid .board_view .cont font {
		font-size:   var(--ds-view-text-mo) !important;
		line-height: var(--ds-view-text-lh-mo) !important;
		word-break:  var(--ds-break);
	}

	/* 본문 안 이미지 넘침 방지 (에디터가 width 를 px 로 박는 경우 대비) */
	.co-board.datasolid .board_view .cont img {
		max-width: 100% !important;
		height: auto !important;
	}
}


/* ============================================================
   [5] 썸네일 없는 글 : 썸네일 영역 숨기기
       ─ 이미지 미업로드 시 CMS 가 자동 삽입하는 대체이미지
         /_res/postech/_share/img/board/none-img.jpg 를 조건으로 사용
       ─ 대체이미지를 다시 보이게 하려면 이 [5] 섹션 전체를 주석 처리
   ============================================================ */

/* (1) 대체이미지 / 빈 이미지인 경우 썸네일 박스 숨김 */
.co-board.datasolid .list_view_wrap .thumb_wrap:has(img[src*="none-img"]),
.co-board.datasolid .list_view_wrap .thumb_wrap:has(img[src=""]),
.co-board.datasolid .list_view_wrap .thumb_wrap:has(img:not([src])),
.co-board.datasolid .list_view_wrap .thumb_wrap:not(:has(img)) {
	display: none !important;
}

/* (2) 썸네일이 사라진 글 : 글 영역 좌·우 여백 모두 제거  ★ v10 수정 */
.co-board.datasolid .list_view_wrap a:has(.thumb_wrap img[src*="none-img"]) .text_wrap,
.co-board.datasolid .list_view_wrap a:has(.thumb_wrap img[src=""]) .text_wrap,
.co-board.datasolid .list_view_wrap a:has(.thumb_wrap img:not([src])) .text_wrap,
.co-board.datasolid .list_view_wrap a:not(:has(.thumb_wrap img)) .text_wrap {
	padding-left:  0 !important;
	padding-right: 0 !important;
}


/* ============================================================
   [6] 게시물 사이 간격  ★ v11
       ─ 구분선은 그대로 두고, 각 게시물 <a> 의 위·아래 안쪽 여백만 키움
       ─ 좌·우 여백은 건드리지 않음 (padding-top / bottom 만 지정)
       ─ 숫자는 [1] Settings 의 --ds-item-pad-pc / --ds-item-pad-mo
   ============================================================ */

/* PC */
@media only screen and (min-width: 1025px) {
	.co-board.datasolid .list_view_wrap a {
		padding-top:    var(--ds-item-pad-pc) !important;
		padding-bottom: var(--ds-item-pad-pc) !important;
	}
}

/* 모바일 : 필요하면 아래 주석을 풀어서 사용
@media only screen and (max-width: 1024px) {
	.co-board.datasolid .list_view_wrap a {
		padding-top:    var(--ds-item-pad-mo) !important;
		padding-bottom: var(--ds-item-pad-mo) !important;
	}
}
*/