@charset "utf-8";
/* insight 스킨 — 메인 INSIGHTS 카드와 같은 톤의 목록 · 글보기. 공용(_common/board.css)과 사이트 토큰(css/style.css :root) 위에 덧씌운다 */

/* ---------- 목록 ---------- */
/* 카드 사이 선은 카드의 테두리로 그린다 — 목록 배경색으로 틈을 칠하면 마지막 줄이 덜 찼을 때 빈 칸이 회색 덩어리로 보인다 */
.bo-insight-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
.bo-insight-list__item { min-width: 0; background: #fff; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.bo-insight-list__link { display: flex; flex-direction: column; height: 100%; transition: 0.25s; }
.bo-insight-list__link:hover { transform: translateY(-5px); box-shadow: 0 12px 30px rgba(10, 25, 47, 0.12); }
.bo-insight-list__thumb { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--navy); }
.bo-insight-list__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1); transition: filter 0.3s; }
.bo-insight-list__link:hover .bo-insight-list__thumb img { filter: none; }
.bo-insight-list__body { display: flex; flex: 1; flex-direction: column; padding: 24px 26px 22px; }
.bo-insight-list__label { color: #9c781d; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; }
.bo-insight-list__title { margin: 22px 0 10px; color: var(--ink); font: 500 21px/1.55 var(--serif); letter-spacing: -0.08em; }
.bo-insight-list__summary { color: #68747d; font-size: 13px; line-height: 1.8; }
.bo-insight-list__meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 20px; color: var(--muted); font-size: 11px; letter-spacing: 0.06em; }
.bo-insight-list__meta i { color: #a17c1f; font-size: 10px; font-style: normal; letter-spacing: 0.11em; }

/* ---------- 글보기 ----------
   머리말 · 대표 이미지 · 본문 · 이전/다음 글이 모두 본문 폭 전체를 쓴다 — 구분선 길이가 한 가지로 맞는다 */
.bo-insight-view { padding: 0; border: 0; }
.bo-insight-view__head { padding-bottom: 30px; border-bottom: 1px solid var(--line); }
.bo-insight-view__tag { display: inline-block; margin-bottom: 20px; padding: 5px 12px; border: 1px solid rgba(154, 120, 31, 0.45); color: #9a781f; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0.14em; text-transform: uppercase; }
.bo-insight-view__title { color: var(--navy); font: 500 clamp(30px, 3.4vw, 46px) / 1.4 var(--serif); letter-spacing: -0.08em; }
.bo-insight-view__summary { margin-top: 16px; color: var(--muted); font-size: 15px; line-height: 1.85; }
.bo-insight-view__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 18px; color: #9c781d; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; }
.bo-insight-view__image { margin: 34px 0 0; }
.bo-insight-view__image img { display: block; width: 100%; max-height: 520px; object-fit: cover; filter: grayscale(1); }
.bo-insight-view .bo-view__body { padding: 40px 0 0; border-bottom: 0; color: var(--ink); font-size: 16px; line-height: 1.95; }
.bo-insight-view .bo-view__body p { margin: 0 0 1.2em; }
.bo-insight-view + .bo-view__nav { margin-top: 48px; border-top: 1px solid var(--line); }

@media (max-width: 1000px) {
	.bo-insight-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
	.bo-insight-list { grid-template-columns: 1fr; }
	.bo-insight-list__body { padding: 20px 20px 18px; }
	.bo-insight-list__title { font-size: 19px; }
	.bo-insight-view .bo-view__body { padding-top: 28px; font-size: 15px; }
	.bo-insight-view + .bo-view__nav { margin-top: 36px; }
}