@charset "utf-8";

/* =====================================================================
   impulsewave 디자인·가독성 보강 (2026-11)
   ---------------------------------------------------------------------
   · 불러오는 곳: thema/impulsewave/assets/thema.php (update.css 바로 다음, ?ver= 날짜 붙임)
   · 이 파일은 게시판 스킨 CSS(view.css, list.css)보다 먼저 읽히므로
     스킨 규칙보다 우선하도록 선택자 앞에 .wrapper 등을 붙였음
   · 관리자 추가 스크립트의 규칙(광고 칸, .post-intro-box, .post-table, 본문 이미지,
     숨김 규칙 .print-hide/.view-comment/.panel-heading/.list-details/.list-btn/.top-newsticker)은 건드리지 않음
   · 광고(ins.adsbygoogle, .google-auto-placed, iframe)와 그 내부, 다른 담당이 만드는
     .iw-toc / .iw-related / .iw-incontent-ad 와 그 내부는 :not(:where(...))로 모두 제외함
     (:where 안에 넣으면 제외만 하고 우선순위는 올리지 않음)
   · 글마다 직접 넣은 인라인 style(글별 디자인)은 그대로 두고, style이 없는 요소만 다듬음
   · 본문 안에 <style> 블록을 직접 넣어 디자인한 글은 :not(:has(style))로 꾸밈 규칙에서 제외함
     (그 글이 정한 소제목·목록·링크 모양을 덮어쓰지 않도록)
   · :where / :has 를 모르는 오래된 브라우저는 해당 규칙만 무시하고 원래 모습으로 보임
   · 문제가 생기면 thema.php에서 이 파일을 불러오는 한 줄만 지우면 즉시 원래대로 돌아감
   ===================================================================== */


/* ---------------------------------------------------------------------
   A. 모바일 첫 화면: 상단 영역 높이 축소 (메뉴는 숨기지 않고 높이만 줄임)
   --------------------------------------------------------------------- */
@media all and (max-width: 991px) {
	/* 맨 위 검은 줄(모바일 로고 자리): 44px → 36px */
	.responsive .m-header .header-icon,
	.responsive .m-header .header-logo { height: 36px; line-height: 36px; }

	/* 메인 메뉴 줄: 44px → 42px */
	.responsive .m-menu .m-icon,
	.responsive .m-menu .m-list { height: 42px; line-height: 42px; }

	/* 분류(하위 메뉴) 줄: 한 줄 가로 스크롤은 그대로, 높이 44px → 38px */
	.responsive .m-menu .m-sub { height: 38px; line-height: 37px; font-size: 14px; }

	/* 분류 줄 마지막 항목 오른쪽 여유: 가로 스크롤 스크립트가 글꼴이 바뀌기 전 폭으로 계산해
	   끝 항목이 몇 px 잘릴 수 있어 여유를 둠 */
	.responsive .m-menu .m-nav-sub ul li:last-child { padding-right: 26px; }

	/* 스크롤 시 메뉴가 화면 위에 고정되는 순간 본문이 메뉴 높이만큼 위로 튀던 현상 방지
	   (고정 메뉴 스크립트가 원래 자리를 비워 버려서 생김 → 메뉴 높이만큼 자리를 남겨 둠)
	   메뉴 줄 42px, 분류 줄이 있는 게시판은 42 + 38 = 80px */
	.responsive .sticky-wrapper { min-height: 42px; }
	.responsive .sticky-wrapper:has(.m-sub) { min-height: 80px; }
}

@media all and (max-width: 767px) {
	/* 게시판 이름 줄(.at-title): 50px → 40px */
	body.responsive .at-title { height: 40px; }
	body.responsive .at-title .page-title { font-size: 16px; bottom: 9px; }
}

/* 모바일·태블릿 화면 구성에서 글·목록 배경을 흰색으로
   (PC는 흰 상자 안에 글이 있지만 모바일은 테마 바탕 회색 #f2f2f2 위에 글이 바로 놓여 흐려 보였음) */
body.is-mobile .view-wrap.view-mobile,
body.is-mobile .board-list { background-color: #fff; }


/* ---------------------------------------------------------------------
   B. 글 제목 (h1)
   - PC에서 긴 제목이 한 줄로 잘려 '…'으로 끝나던 것을 여러 줄로 보이게 함
   --------------------------------------------------------------------- */
.wrapper .view-wrap h1[itemprop="headline"] {
	margin: 0;
	padding: 8px 15px 14px;
	font-size: 28px;
	line-height: 1.4;
	font-weight: 700;
	color: #111;
	letter-spacing: -0.02em;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	word-break: keep-all;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* 제목 아래 구분선과 본문 사이 간격 20px → 14px */
.wrapper .view-wrap .view-head {
	margin-bottom: 14px;
}

@media all and (max-width: 767px) {
	.wrapper .view-wrap h1[itemprop="headline"] {
		padding: 12px 15px 8px;
		font-size: 22px;
	}
}


/* ---------------------------------------------------------------------
   C. 본문 (.view-content) 가독성
   --------------------------------------------------------------------- */

/* 기본 글자: 17px, 줄간격 1.8 */
.wrapper .view-wrap .view-content {
	font-size: 17px;
	line-height: 1.8;
	color: #222;
}

/* 글에 'font-size: medium'(=16px, 편집기가 자동으로 붙인 기본값)으로 적힌 요소만 17px로 맞춤.
   글쓴이가 14px·18px 등 숫자로 지정한 크기는 건드리지 않음 */
.wrapper .view-wrap .view-content [style*="font-size: medium"]:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)),
.wrapper .view-wrap .view-content [style*="font-size:medium"]:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) {
	font-size: 17px !important;
}

/* 글에 Pretendard를 쓰라고 적혀 있지만(인라인 style) 이름이 달라 기기 글꼴로 나오던 문제 수정.
   불러오는 글꼴 이름은 'Pretendard Variable'이므로 그 이름을 앞에 둠 */
.wrapper .view-wrap .view-content [style*="Pretendard"]:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) {
	font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif !important;
}

/* 단어 단위 줄바꿈 (긴 영문·주소는 화면을 넘지 않게 중간에서 끊음) */
.wrapper .view-wrap .view-content p:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)),
.wrapper .view-wrap .view-content li:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)),
.wrapper .view-wrap .view-content blockquote:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)),
.wrapper .view-wrap .view-content figcaption:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) {
	word-break: keep-all;
	word-wrap: break-word;
	overflow-wrap: break-word;
	overflow-wrap: anywhere;
}

/* 문단 사이 간격 (원래는 0이라 문단이 붙어 보였음) */
.wrapper .view-wrap .view-content:not(:has(style)) p:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) {
	margin-bottom: 0.75em;
	line-height: 1.8;
}

/* 상자·목록·표·인용 안의 마지막 문단은 아래 간격 없앰 (원래 간격과 동일) */
.wrapper .view-wrap .view-content:not(:has(style)) div > p:last-child:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)),
.wrapper .view-wrap .view-content:not(:has(style)) li > p:last-child:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)),
.wrapper .view-wrap .view-content:not(:has(style)) td > p:last-child:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)),
.wrapper .view-wrap .view-content:not(:has(style)) th > p:last-child:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)),
.wrapper .view-wrap .view-content:not(:has(style)) blockquote > p:last-child:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) {
	margin-bottom: 0;
}

/* 글 안의 h1(요약문 등): PC에서 한 줄로 잘려 '…'으로 끝나던 문제 수정 */
.wrapper .view-wrap .view-content h1:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) {
	padding: 0;
	line-height: 1.45;
	letter-spacing: normal;
	white-space: normal;
	overflow: visible;
	text-overflow: clip;
	word-break: keep-all;
	word-wrap: break-word;
	overflow-wrap: break-word;
}

/* 소제목 공통: 굵게(테마가 굵기를 400으로 눌러 두었던 것을 되돌림), 단어 단위 줄바꿈.
   글에 굵기를 직접 적은 경우는 그 값이 우선함 */
.wrapper .view-wrap .view-content h2:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)),
.wrapper .view-wrap .view-content h3:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)),
.wrapper .view-wrap .view-content h4:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) {
	font-weight: 700;
	word-break: keep-all;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.wrapper .view-wrap .view-content:not(:has(style)) h2:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)),
.wrapper .view-wrap .view-content:not(:has(style)) h3:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)),
.wrapper .view-wrap .view-content:not(:has(style)) h4:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) {
	line-height: 1.45;
}

/* 소제목 위계: 글쓴이가 스타일을 넣지 않은 소제목에만 적용 (스타일 넣은 소제목은 그대로) */
.wrapper .view-wrap .view-content:not(:has(style)) h2:not([style]):not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) {
	margin: 2.2em 0 0.8em;
	padding: 2px 0 2px 12px;
	border-left: 4px solid #2563eb;
	font-size: 21px;
	color: #111;
	letter-spacing: -0.02em;
}
.wrapper .view-wrap .view-content:not(:has(style)) h3:not([style]):not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) {
	margin: 1.8em 0 0.6em;
	font-size: 18px;
	color: #1a1a1a;
	letter-spacing: -0.01em;
}
.wrapper .view-wrap .view-content:not(:has(style)) h4:not([style]):not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) {
	margin: 1.5em 0 0.5em;
	font-size: 17px;
	color: #1a1a1a;
}

/* 목록: 스타일이 없는 목록만 들여쓰기·항목 간격 정리 */
.wrapper .view-wrap .view-content:not(:has(style)) ul:not([style]):not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)),
.wrapper .view-wrap .view-content:not(:has(style)) ol:not([style]):not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) {
	margin: 0 0 1em;
	padding-left: 1.4em;
}
.wrapper .view-wrap .view-content:not(:has(style)) ul:not([style]) > li:not([style]):not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)),
.wrapper .view-wrap .view-content:not(:has(style)) ol:not([style]) > li:not([style]):not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) {
	margin-bottom: 0.4em;
}

/* 인용: 테마 기본값(12px)이 너무 작아 본문 크기로. 스타일이 없는 인용만 상자 모양 */
.wrapper .view-wrap .view-content:not(:has(style)) blockquote:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) {
	font-size: inherit;
}
.wrapper .view-wrap .view-content:not(:has(style)) blockquote:not([style]):not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) {
	margin: 1.6em 0;
	padding: 14px 18px;
	border-left: 4px solid #cbd5e1;
	border-radius: 0 8px 8px 0;
	background: #f8fafc;
	color: #334155;
}

/* 표: 관리자 규칙(표 폭 100%·고정 배치)이 있어 표가 화면 밖으로 넘치지 않으므로 가로 스크롤은 넣지 않음.
   칸 안 글자만 단어 단위로 줄바꿈. 관리자 표(.post-table)는 제외 */
.wrapper .view-wrap .view-content table:not(.post-table) th:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)),
.wrapper .view-wrap .view-content table:not(.post-table) td:not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) {
	word-break: keep-all;
	word-wrap: break-word;
	overflow-wrap: break-word;
	overflow-wrap: anywhere;
}
/* 스타일이 전혀 없는 표 칸만 안쪽 여백 */
.wrapper .view-wrap .view-content:not(:has(style)) table:not(.post-table) th:not([style]):not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)),
.wrapper .view-wrap .view-content:not(:has(style)) table:not(.post-table) td:not([style]):not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) {
	padding: 8px 10px;
}

/* 본문 링크: 본문 글자와 같은 색이라 링크인지 알기 어려웠음 → 파란색 + 밑줄.
   스타일을 넣은 링크(카드형 버튼 등)와 사진 링크(.view_image)는 제외 */
.wrapper .view-wrap .view-content:not(:has(style)) p a:not([style]):not(.view_image):not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)),
.wrapper .view-wrap .view-content:not(:has(style)) li a:not([style]):not(.view_image):not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) {
	color: #1d4ed8;
	text-decoration: underline;
	text-underline-offset: 3px;
}
.wrapper .view-wrap .view-content:not(:has(style)) p a:not([style]):not(.view_image):not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)):hover,
.wrapper .view-wrap .view-content:not(:has(style)) li a:not([style]):not(.view_image):not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)):hover {
	color: #1e3a8a;
}

/* 구분선(스타일 없는 것만) */
.wrapper .view-wrap .view-content:not(:has(style)) hr:not([style]):not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) {
	margin: 2em 0;
	border: 0;
	border-top: 1px solid #e5e7eb;
}

/* PC·태블릿: 소제목 조금 크게 */
@media all and (min-width: 768px) {
	.wrapper .view-wrap .view-content:not(:has(style)) h2:not([style]):not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) { font-size: 24px; }
	.wrapper .view-wrap .view-content:not(:has(style)) h3:not([style]):not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) { font-size: 20px; }
	.wrapper .view-wrap .view-content:not(:has(style)) h4:not([style]):not(:where(.iw-toc, .iw-toc *, .iw-related, .iw-related *, .iw-incontent-ad, .iw-incontent-ad *, ins, ins *, .google-auto-placed, .google-auto-placed *, iframe)) { font-size: 18px; }
}


/* ---------------------------------------------------------------------
   D. PC·태블릿: 글 영역 최대 폭 (본문 약 760px, 가운데 정렬)
   --------------------------------------------------------------------- */
@media all and (min-width: 768px) {
	/* PC: 글 영역 790px = 본문 760px + 좌우 여백(.view-padding) 15px씩 */
	.wrapper .view-wrap > section {
		max-width: 790px;
		margin-left: auto;
		margin-right: auto;
	}
	/* 태블릿(모바일 화면 구성): 좌우 여백이 없어 글자가 화면 끝에 붙던 것 보완 */
	.wrapper .view-wrap.view-mobile > section {
		max-width: 800px;
		padding-left: 20px;
		padding-right: 20px;
	}
	.wrapper .view-wrap.view-mobile h1[itemprop="headline"] {
		padding-left: 0;
		padding-right: 0;
	}
}


/* ---------------------------------------------------------------------
   E. 글 목록(웹진형): 썸네일 비율·제목 2줄 말줄임
   --------------------------------------------------------------------- */
.wrapper .list-webzine .list-item {
	display: flex;
	align-items: center;
	padding-bottom: 14px;
	margin-bottom: 14px;
	border-bottom: 1px solid #eef0f3;
}
.wrapper .list-webzine .list-item > .img {
	flex: 0 0 auto;
	margin-right: 14px;
}
.wrapper .list-webzine .list-item > .media-body {
	flex: 1 1 auto;
	min-width: 0;
}
/* 썸네일: 모서리 둥글게, 비율이 다른 사진도 칸을 꽉 채우게(잘라서 맞춤) */
.wrapper .list-webzine .list-item .img-wrap {
	border-radius: 8px;
	background: #f3f4f6;
}
.wrapper .list-webzine .list-item .img-wrap .img-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* 제목: 최대 2줄, 넘치면 … */
.wrapper .list-webzine .list-item h2.media-heading {
	display: block;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	margin: 0;
	padding: 0;
	font-size: 16px;
	line-height: 1.45;
	word-break: keep-all;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.wrapper .list-webzine .list-item h2.media-heading a {
	font-weight: 600;
	color: #111;
}
.wrapper .list-webzine .list-item h2.media-heading a:hover,
.wrapper .list-webzine .list-item h2.media-heading a:focus {
	color: #2563eb;
}

/* 모바일: 썸네일 80px → 100px, 목록 좌우 여백 15px (화면 끝에 붙어 있던 것) */
@media all and (max-width: 767px) {
	.wrapper .list-webzine {
		padding-left: 15px;
		padding-right: 15px;
	}
	.wrapper .list-webzine .list-item > .img {
		width: 100px;
	}
}

/* PC·태블릿: 썸네일 폭은 게시판 설정값 그대로, 제목만 조금 크게 */
@media all and (min-width: 768px) {
	.wrapper .list-webzine .list-item > .img {
		margin-right: 18px;
	}
	.wrapper .list-webzine .list-item h2.media-heading {
		font-size: 18px;
	}
}