/*
 * blog2ai 칼럼 레이아웃 (PHP 모듈)
 * 목록: thevuemedia.com/column 구성, 상세: blog2ai 워드프레스 플러그인(column.css) 구성을 따른다.
 * 색은 아직 정하지 않는다. 아래 변수를 .b2a-col 에 지정하면 그 색을 쓰고, 없으면 사이트 글자색을 상속한다.
 *   --b2a-text, --b2a-accent, --b2a-btn-bg, --b2a-btn-text, --b2a-input-bg, --b2a-input-text, --b2a-input-border,
 *   --b2a-head-font, --b2a-body-font, --b2a-radius
 * 구분선·보조 글자색은 글자색에서 투명도로 만든다.
 */
.b2a-col {
	--b2a-line: color-mix(in srgb, currentColor 14%, transparent);
	--b2a-muted: color-mix(in srgb, currentColor 62%, transparent);
	container-type: inline-size;
	color: var(--b2a-text, inherit);
	font-family: var(--b2a-body-font, inherit);
	text-align: left;
	word-break: keep-all;
	overflow-wrap: anywhere;
}
.b2a-col *,
.b2a-col *::before,
.b2a-col *::after { box-sizing: border-box; }
.b2a-col a { color: inherit; text-decoration: none; }
.b2a-col p,
.b2a-col h1,
.b2a-col h2 { margin: 0; }
.b2a-sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* 단독 페이지(그누보드·사이트 레이아웃 없이 띄울 때)의 기본 바탕 */
body.b2a-standalone {
	margin: 0;
	font: 16px/1.6 -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
}
.b2a-page { padding: 0 0 96px; }

/* ===== 목록 ===== */
.b2a-list__head {
	padding: 72px 0 56px;
	border-bottom: 1px solid var(--b2a-line);
}
/* 머리말은 1024px, 목록은 1152px 폭 안에서 가운데 정렬 (좌우 여백 24px) */
.b2a-list__head {
	padding-left: max(24px, calc((100% - 976px) / 2));
	padding-right: max(24px, calc((100% - 976px) / 2));
}
.b2a-list__inner {
	max-width: 1152px;
	margin: 0 auto;
	padding: 48px 24px 0;
}
.b2a-list__eyebrow {
	margin-bottom: 20px !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 11.5px;
	font-weight: 500;
	letter-spacing: .22em;
	text-transform: uppercase;
	color: var(--b2a-accent, var(--b2a-muted));
}
.b2a-list__title {
	font-family: var(--b2a-head-font, inherit);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: -.01em;
}
.b2a-list__lede {
	margin-top: 20px !important;
	font-size: 18px;
	line-height: 1.65;
	color: var(--b2a-muted);
}
@media (min-width: 768px) {
	.b2a-list__title { font-size: 36px; }
}
@media (min-width: 1024px) {
	.b2a-list__head { padding-top: 96px; padding-bottom: 64px; }
	.b2a-list__title { font-size: 48px; }
	.b2a-list__inner { padding-top: 64px; }
}

/* 검색 */
.b2a-col__search {
	display: flex;
	gap: 8px;
	max-width: 576px;
	margin: 0 0 40px;
}
.b2a-col .b2a-col__search input {
	flex: 1;
	min-width: 0;
	height: 48px;
	padding: 0 16px;
	border: 1px solid var(--b2a-input-border, var(--b2a-line));
	border-radius: min(var(--b2a-radius, 0px), 24px);
	background: var(--b2a-input-bg, transparent);
	color: var(--b2a-input-text, inherit);
	font: inherit;
	font-size: 14px;
	box-shadow: none;
}
.b2a-col .b2a-col__search input::placeholder { color: currentColor; opacity: .5; }
.b2a-col .b2a-col__search input:focus { outline: 2px solid var(--b2a-accent, currentColor); outline-offset: 1px; }
.b2a-col .b2a-col__search button {
	flex: none;
	height: 48px;
	padding: 0 20px;
	border: 0;
	border-radius: min(var(--b2a-radius, 0px), 24px);
	background: var(--b2a-btn-bg, var(--b2a-text, #222));
	color: var(--b2a-btn-text, #fff);
	font: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}
.b2a-col .b2a-col__search button:hover { opacity: .88; }

/* 개수 */
.b2a-col__count {
	margin: 0 0 24px !important;
	font-size: 14px;
	color: var(--b2a-muted);
}
.b2a-col__count strong { color: var(--b2a-text, currentColor); font-weight: 600; }
.b2a-col__count a { text-decoration: underline !important; text-underline-offset: 3px; }

/* 카드: 좁으면 1열(썸네일이 위로), 768px 이상 2열(썸네일 오른쪽 10.5rem) */
.b2a-col__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	column-gap: 32px;
}
.b2a-card {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 20px;
	padding: 28px 0;
	border-top: 1px solid var(--b2a-line);
}
.b2a-card:first-child { border-top-width: 2px; }
.b2a-card__body { min-width: 0; }
.b2a-card__date {
	margin-bottom: 12px !important;
	font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .05em;
	font-variant-numeric: tabular-nums;
	color: var(--b2a-accent, var(--b2a-muted));
}
.b2a-card__title {
	font-family: var(--b2a-head-font, inherit);
	font-size: 20px;
	font-weight: 600;
	line-height: 1.375;
	transition: color .2s ease;
}
.b2a-card:hover .b2a-card__title { color: var(--b2a-accent, inherit); }
.b2a-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 12px !important;
	font-size: 14px;
	line-height: 24px;
	color: var(--b2a-muted);
}
.b2a-card__more {
	display: inline-flex;
	margin-top: 20px;
	font-size: 14px;
	font-weight: 600;
	color: var(--b2a-accent, inherit);
	transition: transform .2s ease;
}
.b2a-card:hover .b2a-card__more { transform: translateX(4px); }
.b2a-card__thumb {
	order: -1;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: color-mix(in srgb, currentColor 7%, transparent);
}
.b2a-card__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}
.b2a-card:hover .b2a-card__thumb img { transform: scale(1.03); }
@media (min-width: 768px) {
	.b2a-col__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.b2a-card { grid-template-columns: minmax(0, 1fr) 10.5rem; }
	.b2a-card__thumb { order: 0; }
}

/* 페이지 이동 */
.b2a-col__pager {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	margin-top: 48px;
	font-size: 14px;
	color: var(--b2a-muted);
}
.b2a-col__pager a {
	padding: 8px 16px;
	border: 1px solid var(--b2a-line);
	color: var(--b2a-text, currentColor);
}
.b2a-col__pager a:hover { border-color: var(--b2a-accent, currentColor); }

.b2a-col__empty {
	padding: 48px 0;
	text-align: center;
	color: var(--b2a-muted);
	border-top: 2px solid var(--b2a-line);
}

@media (prefers-reduced-motion: reduce) {
	.b2a-card__thumb img,
	.b2a-card__more,
	.b2a-card__title { transition: none; }
}

/* ===== 상세 (워드프레스 플러그인과 같은 구성) ===== */
.b2a-article,
.b2a-error {
	max-width: 1240px;
	margin: 0 auto;
	padding: 56px 24px 0;
}
.b2a-article__title {
	margin: 0 0 24px !important;
	font-family: var(--b2a-head-font, inherit);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: -.01em;
}
@media (min-width: 768px) {
	.b2a-article__title { font-size: 36px; }
}
.b2a-article__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 12px;
	margin: 0 0 32px !important;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--b2a-line);
	font-size: 14px;
	color: var(--b2a-muted);
}
.b2a-article__meta > * + *::before {
	content: "·";
	margin-right: 12px;
	color: var(--b2a-line);
}
.b2a-article__category {
	font-weight: 600;
	letter-spacing: .04em;
	color: var(--b2a-accent, inherit);
}

/*
 * 레이아웃 단계 (본문을 감싸는 폭 기준, container query)
 *   좁음        : 1열 (목차는 본문 위 접이식)
 *   960px 이상  : 본문 + 오른쪽 최신 칼럼 (2열)
 *   1040px 이상 : 왼쪽 목차 + 본문 + 오른쪽 최신 칼럼 (3열)
 */
.b2a-article__layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}
@container (min-width: 960px) {
	.b2a-article__layout:not(.b2a-article__layout--full) { grid-template-columns: minmax(0, 1fr) 280px; gap: 56px; }
}
@container (min-width: 1040px) {
	.b2a-article__layout.b2a-article__layout--toc { grid-template-columns: 220px minmax(0, 1fr) 280px; gap: 44px; }
	.b2a-article__layout--toc.b2a-article__layout--full { grid-template-columns: 220px minmax(0, 1fr); }
}
.b2a-article__aside,
.b2a-article__toc-side { align-self: start; }
@container (min-width: 960px) {
	.b2a-article__aside,
	.b2a-article__toc-side { position: sticky; top: calc(var(--b2a-sticky-top, 48px)); }
}
.b2a-article__layout--full:not(.b2a-article__layout--toc) .b2a-article__main { max-width: 820px; margin: 0 auto; }
.b2a-article__main { min-width: 0; max-width: 760px; }

/* 왼쪽 목차 열: 1040px 이상에서만 */
.b2a-article__toc-side { display: none; }
@container (min-width: 1040px) {
	.b2a-article__layout--toc .b2a-article__toc-side { display: block; }
	.b2a-article__layout--toc .b2a-toc { display: none; }
}
.b2a-toc-side__title {
	margin: 0 0 12px !important;
	padding-top: 8px;
	font-family: var(--b2a-head-font, inherit);
	font-size: 16px;
	font-weight: 700;
	border-top: 2px solid var(--b2a-text, currentColor);
}
.b2a-article__toc-side ol { margin: 0; padding: 0; list-style: none; }
.b2a-article__toc-side .b2a-toc__item a {
	padding: 7px 0 7px 14px;
	font-size: 14px;
	line-height: 1.5;
}
.b2a-article__toc-side .b2a-toc__item--h3 a { padding-left: 26px; font-size: 13px; }

/* 접이식 목차 (위쪽 선은 작성 정보 줄의 아래 선을 같이 쓴다) */
.b2a-toc {
	margin: -32px 0 40px;
	border-bottom: 1px solid var(--b2a-line);
}
.b2a-toc summary {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 2px 16px;
	padding: 18px 0;
	cursor: pointer;
	list-style: none;
}
.b2a-toc summary::-webkit-details-marker { display: none; }
.b2a-toc summary::after {
	content: "";
	grid-row: 1 / 3;
	grid-column: 2;
	align-self: center;
	width: 8px;
	height: 8px;
	border-right: 1.5px solid var(--b2a-accent, currentColor);
	border-bottom: 1.5px solid var(--b2a-accent, currentColor);
	transform: rotate(45deg);
	transition: transform .2s ease;
}
.b2a-toc[open] summary::after { transform: rotate(-135deg); }
.b2a-toc__label {
	font-family: var(--b2a-head-font, inherit);
	font-size: 18px;
	font-weight: 700;
}
.b2a-toc__current {
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size: 13px;
	color: var(--b2a-accent, var(--b2a-muted));
}
.b2a-toc ol { margin: 0 0 18px; padding: 0; list-style: none; }
.b2a-toc__item a {
	display: block;
	padding: 8px 0 8px 14px;
	border-left: 2px solid var(--b2a-line);
	font-size: 14px;
	color: var(--b2a-muted) !important;
}
.b2a-toc__item--h3 a { padding-left: 28px; font-size: 13px; }
.b2a-toc__item a:hover,
.b2a-toc__item a.is-active {
	border-left-color: var(--b2a-accent, currentColor);
	color: var(--b2a-text, currentColor) !important;
}

/* 본문 타이포그래피 */
.b2a-article__body {
	font-size: 17px;
	line-height: 1.9;
}
.b2a-article__body > div > *,
.b2a-article__body > * { margin: 0 0 1.1em; }
.b2a-article__body h2,
.b2a-article__body h3,
.b2a-article__body h4 {
	margin: 2.2em 0 .8em;
	font-family: var(--b2a-head-font, inherit);
	font-weight: 700;
	line-height: 1.45;
	scroll-margin-top: calc(var(--b2a-sticky-top, 48px) + 16px);
}
.b2a-article__body h2 { font-size: 1.45em; }
.b2a-article__body h3 { font-size: 1.2em; }
.b2a-article__body h4 { font-size: 1.05em; }
.b2a-article__body ul,
.b2a-article__body ol { padding-left: 1.4em; }
.b2a-article__body ul li { list-style: disc; }
.b2a-article__body ol li { list-style: decimal; }
.b2a-article__body figure { margin: 1.6em 0; }
.b2a-article__body img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 4px;
}
.b2a-article__body figcaption {
	margin-top: 8px;
	font-size: 13px;
	text-align: center;
	color: var(--b2a-muted);
}
.b2a-article__body blockquote {
	margin: 1.6em 0;
	padding: 4px 0 4px 20px;
	border-left: 3px solid var(--b2a-accent, currentColor);
	font-family: var(--b2a-head-font, inherit);
	font-size: 1.1em;
	font-weight: 600;
	line-height: 1.6;
}
.b2a-article__body a { color: var(--b2a-accent, inherit); text-decoration: underline; text-underline-offset: 3px; }
.b2a-article__body hr { display: block; border: 0; border-top: 1px solid var(--b2a-line); margin: 2.4em 0; }

/* 오른쪽 최신 칼럼 */
.b2a-article__aside {
	padding-top: 20px;
	border-top: 2px solid var(--b2a-text, currentColor);
}
.b2a-article__aside-title {
	margin: 0 0 8px !important;
	font-family: var(--b2a-head-font, inherit);
	font-size: 17px;
	font-weight: 700;
}
.b2a-article__aside ul { margin: 0; padding: 0; list-style: none; }
.b2a-article__aside li { padding: 14px 0; border-bottom: 1px solid var(--b2a-line); list-style: none; }
.b2a-article__aside time {
	display: block;
	margin-bottom: 4px;
	font-size: 12px;
	font-weight: 600;
	color: var(--b2a-accent, var(--b2a-muted));
}
.b2a-article__aside li a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 15px;
	font-weight: 500;
	line-height: 1.5;
}
.b2a-article__aside li a:hover { color: var(--b2a-accent, inherit); }
.b2a-article__all {
	display: inline-block;
	margin-top: 18px;
	font-size: 14px;
	font-weight: 600;
	color: var(--b2a-accent, inherit) !important;
}

/* 하단 안내 */
.b2a-article__cta {
	margin-top: 72px;
	padding: 40px 24px;
	border-top: 1px solid var(--b2a-line);
	border-bottom: 1px solid var(--b2a-line);
	background: color-mix(in srgb, var(--b2a-accent, currentColor) 6%, transparent);
	text-align: center;
}
.b2a-article__cta p {
	margin: 0 0 16px !important;
	font-family: var(--b2a-head-font, inherit);
	font-size: 19px;
	font-weight: 600;
}
.b2a-button {
	display: inline-flex;
	align-items: center;
	height: 48px;
	padding: 0 28px;
	border-radius: min(var(--b2a-radius, 4px), 24px);
	background: var(--b2a-btn-bg, var(--b2a-text, #222));
	color: var(--b2a-btn-text, #fff) !important;
	font-size: 15px;
	font-weight: 500;
}
.b2a-button:hover { opacity: .88; }
.b2a-error__back { text-align: center; margin-top: 8px !important; }

/* 작성자 정보 (본문 위 오른쪽): 사진 + 소개. 값은 config.php 의 author_photo·author_line */
.b2a-article__author {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
	margin: 0 0 20px;
	line-height: 1.4;
}
.b2a-article__author-photo {
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	object-fit: cover;
	margin: 0;
}
.b2a-article__author-text { display: flex; flex-direction: column; min-width: 0; }
.b2a-article__author-line { font-size: 15px; font-weight: 500; }

/* 사이트 머리·꼬리 안에 넣을 때: 사이트 공통 CSS(float 배치, 자간·줄간격 초기화)의 영향을 막는다 */
.b2a-page { clear: both; display: flow-root; width: 100%; }
.b2a-col { font-size: 16px; line-height: 1.6; letter-spacing: normal; }
.b2a-col p,
.b2a-col li,
.b2a-col dd { letter-spacing: inherit; }

/*
 * 사이트 머리·꼬리의 <h1>을 칼럼 페이지에서만 <div class="b2a-h1">로 바꾸므로(b2a_demote_h1),
 * 사이트 CSS(layout.css)의 h1 규칙을 같은 순서·같은 화면 폭 조건으로 옮겨 모양을 유지한다.
 * layout.css 의 로고 규칙이 바뀌면 여기도 맞춰야 한다.
 */
.b2a-h1 { font-weight: bold; }
.b2a-h1.logo { position:absolute;left:40px;top:25px; z-index:160; }
.b2a-h1.logo a { display:inline-block; width:280px; height:50px; line-height:0; vertical-align:top;  background:url("/images/common/logo_w.png?v=2") no-repeat left center; text-indent:-9999px; }
.hopen .b2a-h1 a { background:url("/images/common/logo.png?v=2") no-repeat left center; }
@media all and (max-width:1280px) {
	.b2a-h1.logo { top: 14px; }
	.hmob .b2a-h1 { position:static;left:auto;top:auto;height:100px; padding-left:30px; padding-top:27px; }
	.hmob .b2a-h1 a { background:url("/images/common/logo.png") no-repeat left center; }
}
@media all and (max-width:767px) {
	body.open #wrapper .b2a-h1 a { height:30px; line-height:0; background-size:auto 100%; }
	.b2a-h1.logo { top:20px; left:10px; height:30px; }
	.b2a-h1.logo a { height:25px; line-height:0;  background-size: auto 100%; text-indent:-9999px }
	.hopen .b2a-h1 { top:20px; padding:0; }
	.hopen .b2a-h1 a { background-size:auto 100%; }
	.hmob .b2a-h1 { height:70px; padding-top:20px; }
	.hmob .b2a-h1 a { height:30px; background-size:auto 100%; padding:0; }
}
#footer .b2a-h1 { margin-bottom:30px; }
@media all and (max-width:400px) {
	#footer .b2a-h1 img { width:180px; }
}