/* ══════════════════════════════════════════════════════════════════
   게시글 본문(#post-content) 공용 타이포그래피 — 블로그·자료실·도움말(blog 스킨)과 Q&A(tabler 스킨)가 같이 쓴다.
   원래 views/board/blog/css/style.css 안에 있던 것을 2026-09-29 떼어 냈다. 본문 모양을 바꿀 땐 여기 한 곳만 고친다.
   불러오는 곳: views/board/blog/post.php, views/board/tabler/post.php
   ══════════════════════════════════════════════════════════════════ */

/* 글 상세 화면: 메뉴와 글 카드 사이 여백 — 레이아웃 .page-body 의 Tabler 기본값(margin-top 24px + padding-top 20px ≈ 50px)이
   휴대폰에선 첫 화면을 많이 잡아먹는다. 이 파일은 글 상세(블로그·Q&A 스킨)에서만 불러오므로 다른 페이지엔 영향 없음 */
.page-body:has(.post-header) { margin-top: 0; padding-top: 28px; }
@media (max-width: 640px) {
	.page-body:has(.post-header) { padding-top: 10px; }
}

/* 글 상세 작성자 줄 — 한 줄로 컴팩트하게: [아바타] 관리자 · 09:26 · 👁 6 · 💬 0 ……… [🔗]
   (스킨 기본은 휴대폰에서 세로로 쌓여 3~4줄을 차지했다) */
.board .post-meta {
	flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start;
	gap: 0.75rem; padding: 0.75rem 1.75rem;
}
.board .post-author-info { gap: 0.5rem; min-width: 0; }
.board .author-avatar { width: 30px; height: 30px; font-size: 0.95rem; }
.board .author-details { flex-direction: row; align-items: center; gap: 0.5rem; min-width: 0; white-space: nowrap; }
.board .author-name { font-size: 0.875rem; }
.board .post-date { font-size: 0.8125rem; }
.board .post-date::before, .board .post-stats::before { content: '·'; color: var(--board-text-4, #94a3b8); margin-right: 0.5rem; }
.board .post-date i { display: none; }
.board .post-stats { gap: 0.75rem; flex-wrap: nowrap; white-space: nowrap; }
.board .post-stats::before { margin-right: 0; }
.board .post-actions { margin-left: auto; flex-wrap: nowrap; }
@media (max-width: 640px) {
	.board .post-meta { padding: 0.625rem 1rem; gap: 0.5rem; }
	.board .author-avatar { width: 26px; height: 26px; font-size: 0.85rem; }
	.board .author-name { font-size: 0.8125rem; }
	.board .post-date, .board .post-stats { font-size: 0.75rem; }
	.board .post-stats { gap: 0.5rem; }
	.board .stat-label, .board .post-actions .btn-label { display: none; }   /* 휴대폰: 아이콘+숫자만, 링크는 아이콘 버튼 */
	.board .post-actions .action-btn { padding: 0.375rem 0.5rem; }
}

/* 작성자 줄과 본문 첫 요소 사이 — 본문 영역 padding-top + 첫 이미지(.eb-figure) margin-top 26px 이 겹쳐 46~54px 였다.
   첫 요소의 위 여백을 없애고 영역 padding 으로만 간격을 정한다 (이미지로 시작하든 글로 시작하든 같은 간격) */
#post-content > :first-child,
#post-content > .eb-post > :first-child { margin-top: 0; }
/* 첨부 이미지 자리는 비어 있어도 margin-bottom 16px 을 차지했다 — 첨부 이미지가 없으면 숨긴다 */
.board .post-content-images:not(:has(*)) { display: none; }
.board .post-content-wrapper { padding-top: 27px; }
@media (max-width: 768px) {
	.board .post-content-wrapper { padding-top: 23px; }
}

/* 레이아웃 공통 `.container-xl h3`(18px + 회색 밑줄 + width 100%)가 본문 소제목에도 걸려 밑줄이 생긴다 — 본문 제목은 여기서 정한다 */
#post-content h2,
#post-content h3,
#post-content h4 {
	border: 0;
	padding-bottom: 0;
	width: auto;
}

/* ══════════════════════════════════════════════════════════════════
   블로그 본문 타이포그래피 — 밋밋한 마크다운 본문을 블로그답게
   발행 스크립트가 본문을 .eb-post.eb-cat-<slug> 로 감싼다.
   넓은 #post-content 규칙은 기존 글에도 적용, 리드문단·카테고리 액센트는 래퍼 글에만.
   ══════════════════════════════════════════════════════════════════ */

/* ── 본문 색 팔레트 ──
   원칙: 면(배경·채움)은 낮은 채도, 글자와 선은 대비를 지킨다.
   전부 파스텔로 가면 정답·오답률 같은 신호가 죽어서 읽을 곳을 잃는다.
   그라디언트는 쓰지 않는다 — 촌스러움의 실제 원인이었다.
   카테고리 3색은 채도를 맞춘 한 가족. --blog-accent 미정의(래퍼 없는 구 글)일 때를
   대비해 var() 폴백도 같은 값으로 맞춰 둔다. */
#post-content {
	--blog-ink:     #1f2933;   /* 본문 글자 */
	--blog-ink-2:   #2b3440;   /* 제목·강조 글자 */
	--blog-mut:     #6b7480;   /* 보조 설명 */
	--blog-mut-2:   #9aa2ac;   /* 출처·캡션 */
	--blog-bd:      #e4e6ea;   /* 테두리·구분선 */
	--blog-surf:    #f7f8fa;   /* 옅은 면 */
	--blog-surf-2:  #eef0f3;   /* 트랙·칩 바탕 */
	--blog-mut-fill:#c3c8cf;   /* 무채색 막대 — 트랙보다 확실히 진해야 보인다 */
	--blog-pos:     #3d7a5c;   /* 정답·긍정 */
	--blog-pos-bg:  #e9f0ec;
	--blog-sec:     #5b8a80;   /* 보조 계열(듣기·길이 등) */
	--blog-neg:     #9e5040;   /* 경고·오답률 */
	--blog-neg-bg:  #efe4e0;
	--blog-neg-tx:  #87422f;
	--blog-tint:    rgba(61, 90, 128, .09);  /* 액센트 옅은 면 */
}
#post-content .eb-post                   { --blog-accent: #4a7c6f; --blog-accent-2: #5e9186; }
#post-content .eb-post.eb-cat-learn      { --blog-accent: #4a7c6f; --blog-accent-2: #5e9186; } /* 학습콘텐츠 — 세이지 */
#post-content .eb-post.eb-cat-admission  { --blog-accent: #3d5a80; --blog-accent-2: #52739d; } /* 입시정보 — 청람 */
#post-content .eb-post.eb-cat-notice     { --blog-accent: #5d5a54; --blog-accent-2: #767269; } /* 서비스·공지 — 웜슬레이트 */

/* 본문 기본 */
#post-content {
	font-size: 1.02rem;
	line-height: 1.85;
	color: var(--blog-ink);
}
/* 리드 문단 (첫 문단 강조) */
#post-content .eb-post > p:first-of-type {
	font-size: 1.12rem;
	line-height: 1.8;
	color: var(--blog-ink);
	margin-bottom: 1.4rem;
}
/* 대제목 — 왼쪽 그라디언트 액센트 바 */
#post-content h2 {
	position: relative;
	margin: 3rem 0 1.1rem;
	padding-left: 0.9rem;
	font-size: 1.45rem;
	font-weight: 800;
	line-height: 1.35;
	color: var(--blog-ink-2);
	letter-spacing: -0.01em;
}
#post-content h2::before {
	content: '';
	position: absolute;
	left: 0; top: 0.18em; bottom: 0.18em;
	width: 5px;
	border-radius: 3px;
	background: var(--blog-accent, #4a7c6f);
}
/* 소제목 */
#post-content h3 {
	margin: 2rem 0 0.7rem;
	font-size: 1.12rem;
	font-weight: 700;
	color: var(--blog-accent, #4a7c6f);
}
#post-content p { margin: 0 0 1.15rem; }

/* 비순서 목록 — 커스텀 도트 + 행 구분선 */
#post-content ul {
	list-style: none;
	padding: 0;
	margin: 0 0 1.4rem;
}
#post-content ul li {
	position: relative;
	padding: 0.6rem 0 0.6rem 1.6rem;
	border-bottom: 1px solid var(--blog-surf-2);
	line-height: 1.7;
}
#post-content ul li:last-child { border-bottom: 0; }
#post-content ul li::before {
	content: '';
	position: absolute;
	left: 0.2rem; top: 1.1rem;
	width: 7px; height: 7px;
	border-radius: 50%;
	background: var(--blog-accent, #4a7c6f);
}
/* 순서 목록 (풀이 단계 등) */
#post-content ol {
	padding-left: 1.5rem;
	margin: 0 0 1.4rem;
}
#post-content ol li { padding: 0.35rem 0; line-height: 1.75; list-style: decimal; } /* 전역 li{list-style:none} 가 번호를 지워서 복원 */
#post-content ol li::marker { color: var(--blog-accent, #4a7c6f); font-weight: 800; }

/* 강조 */
#post-content strong { font-weight: 700; color: var(--blog-ink-2); }
#post-content li strong { color: var(--blog-accent, #4a7c6f); }

/* 인용 — 예문 박스 (영어 지문 각색 예시 등) */
#post-content blockquote {
	margin: 1.6rem 0;
	padding: 1.1rem 1.35rem;
	background: var(--blog-surf);
	border-left: 4px solid var(--blog-accent, #4a7c6f);
	border-radius: 0 10px 10px 0;
	color: #334155;
	font-size: 0.99rem;
	line-height: 1.75;
}
#post-content blockquote p:last-child { margin-bottom: 0; }

/* 본문 이미지 (대표/인포그래픽) */
#post-content .eb-figure { margin: 26px 0 40px; text-align: center; }
#post-content .eb-figure img,
#post-content .eb-post img {
	display: block;
	max-width: 100%;
	height: auto;
	margin: 0 auto;
	border-radius: 14px;
	box-shadow: 0 8px 24px rgba(31, 41, 51, .08);
}

/* 본문 표 (eb-table figure 또는 일반 table) */
#post-content .eb-table { margin: 26px 0; overflow-x: auto; }
#post-content .eb-table table,
#post-content .eb-post table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95rem;
	background: #fff;
	border-radius: 12px;
	overflow: hidden;
	box-shadow: 0 4px 16px rgba(31, 41, 51, .06);
}
#post-content .eb-post table thead th {
	background: var(--blog-accent, #4a7c6f);
	color: #fff;
	font-weight: 700;
	text-align: left;
	padding: 12px 14px;
	white-space: nowrap;
}
#post-content .eb-post table tbody td {
	padding: 11px 14px;
	border-top: 1px solid var(--blog-bd);
	vertical-align: top;
	line-height: 1.6;
}
#post-content .eb-post table tbody tr:nth-child(even) td { background: var(--blog-surf); }

/* 표 가로 스크롤 — assets/js/eb-post-content.js 가 .eb-table 밖의 표를 감싼다.
   본문 폭을 넘는 표는 이 틀 안에서만 가로로 스크롤되고 페이지는 움직이지 않는다 */
#post-content .eb-table-scroll {
	position: relative;
	margin: 26px 0;
	border: 1px solid var(--blog-bd, #e4e6ea);   /* 바깥 테두리는 틀이 그린다 (표 가장자리 선은 아래에서 지움) */
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(31, 41, 51, .06);
	overflow: hidden;              /* 둥근 모서리 */
}
/* 표 바로 뒤 캡션(.eb-src)은 표에 붙이고, 캡션 아래로 간격 */
#post-content .eb-table-scroll.has-caption { margin-bottom: 8px; }
#post-content .eb-table-scroll.has-caption + .eb-src { margin-top: 0; margin-bottom: 1.6rem; padding: 0 4px; }
#post-content .eb-table-scroll-in > table { border: 0; }
/* Tabler .table-bordered 의 테두리 색(진한 남색)이 따라와 본문 세로선·맨 아래 선이 진하게 보였다 — 옅은 회색으로 */
#post-content .eb-table-scroll-in > table tbody td,
#post-content .eb-table-scroll-in > table tbody th { border-color: var(--blog-bd, #e4e6ea); }
/* Tabler 는 행(tr)에도 아래 선을 긋고 색이 글자색을 따라간다 — 행 선도 옅게, 마지막 행 아래 선은 틀 테두리와 겹치니 없앤다 */
#post-content .eb-table-scroll-in > table tbody tr { border-color: var(--blog-bd, #e4e6ea); }
#post-content .eb-table-scroll-in > table tbody tr:last-child { border-bottom-width: 0; }
#post-content .eb-table-scroll-in > table .eb-edge-l { border-left: 0; }
#post-content .eb-table-scroll-in > table .eb-edge-r { border-right: 0; }
#post-content .eb-table-scroll-in > table .eb-edge-t { border-top: 0; }
#post-content .eb-table-scroll-in > table .eb-edge-b { border-bottom: 0; }
/* 머리글: 가운데 + 진한 바탕에서도 보이는 구분선 */
#post-content .eb-table-scroll-in > table thead th {
	text-align: center;
	vertical-align: middle;
	border-color: rgba(255, 255, 255, .22);
}
/* 본문 칸 정렬 — 스크립트가 열 내용을 보고 붙인다 (숫자·짧은 값 = 가운데, 긴 문장 = 왼쪽) */
#post-content .eb-table-scroll-in > table td.eb-c { text-align: center; }
#post-content .eb-table-scroll-in > table td.eb-l { text-align: left; }
#post-content .eb-table-scroll-in { overflow-x: auto; -webkit-overflow-scrolling: touch; }
#post-content .eb-table-scroll .eb-table-scroll-in > table {   /* 다른 본문 규칙의 margin 16px 0 보다 우선 — 틀 안 흰 띠 방지 */
	width: 100%;
	margin: 0;
	border-radius: 0;
	box-shadow: none;
}
/* 오른쪽에 더 있다는 표시 — 끝까지 밀면 사라진다 */
#post-content .eb-table-scroll::after {
	content: '';
	position: absolute; top: 0; right: 0; bottom: 0; width: 28px;
	pointer-events: none;
	background: linear-gradient(90deg, rgba(255,255,255,0), rgba(31,41,51,.12));
	opacity: 0; transition: opacity .2s ease;
}
#post-content .eb-table-scroll.has-more::after { opacity: 1; }
@media (max-width: 640px) {
	/* 열 4개 이상 표는 칸을 억지로 좁히지 않는다 (예: "1 (90점 이상)" 이 두 줄로 쪼개짐) */
	#post-content .eb-table-scroll.is-wide table { min-width: 560px; }
	#post-content .eb-table-scroll table { font-size: 0.875rem; }
}

/* 제품 유입 CTA 카드 (선택 — 마무리에 사용 가능) */
#post-content .eb-cta {
	margin: 44px 0 8px;
	padding: 32px 26px;
	border-radius: 18px;
	background: var(--blog-accent, #4a7c6f);
	text-align: center;
	color: #fff;
	box-shadow: 0 14px 40px rgba(31, 41, 51, .16);
}
#post-content .eb-cta-title { font-size: 22px; font-weight: 800; line-height: 1.3; margin-bottom: 10px; color: #fff; }
#post-content .eb-cta-desc  { font-size: 14.5px; opacity: 0.93; margin-bottom: 22px; }
#post-content .eb-cta-btn {
	display: inline-flex; align-items: center; gap: 8px;
	background: #fff; color: var(--blog-accent, #4a7c6f);
	font-size: 16px; font-weight: 800;
	padding: 14px 32px; border-radius: 12px; text-decoration: none;
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#post-content .eb-cta-btn:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22); }

@media (max-width: 640px) {
	#post-content { font-size: 1rem; }
	#post-content h2 { font-size: 1.28rem; margin-top: 2.4rem; }
	#post-content .eb-cta { padding: 26px 18px; border-radius: 14px; }
	#post-content .eb-cta-title { font-size: 19px; }
	#post-content .eb-cta-btn { width: 100%; justify-content: center; }
}