/**
 * 글 본문 코드 칸 = 어두운 창 — 2026-10-29 운영자 「geshi-highlight 껐습니다. 현재 커뮤니티 댓글에 쓰고 있는 코드 스타일을 그대로 적용합니다. vba, java script, 함수 등」.
 * 커뮤니티 글 보기 코드 창(css/pcf-community.css 6절 · 휴대폰 = 플러그인 assets/css/community-mobile.css ⑤)과 값을 같게 둔다 — 한쪽을 바꾸면 같이 바꾼다.
 * 싣는 곳 = inc/code-highlight.php oppadu_codewin_page()(글 · 레슨 · 쇼츠 단일 화면 → body.ocw-on) · 칸 표시(data-ocw) = 같은 파일 · 창 머리(점 셋 · 이름표 · [복사]) = js/code-window.js.
 * 틀과 상관없는 본문 부품이라 body.pcf-on 아래에 두지 않는다 — PC · 폰 같은 창이고, 새 틀을 꺼도 남는다(서버가 옛 GeSHi 칠을 더는 하지 않는다).
 * 감싸기 전 첫 그림도 같은 창 — 머리 자리(36)를 위 테두리로 칠해 두어 감싸도 높이가 같다(밑이 안 밀린다).
 * 특이도: body.ocw-on 을 앞에 붙여 전역 pre(style.css · 부모 테마) · pre.excel-fx · .lec-body pre · .shorts-note pre.excel-fx 를 이긴다(!important 없이).
 * 함수 · 연산자 색 = 전역 style.css pre.excel-fx .fx · .operator 그대로(js 가 칸에 excel-fx 를 단다) + 문자열 · 토막 사이 여백 없이(편집기처럼).
 * 규칙 밖(창 점 세 색 · 어두운 칸) = .claude/rules/css.md 「코드 창은 어두운 창」 예외 줄.
 */
body.ocw-on {
	--ocw-bg: #1e1e1e;
	--ocw-bar: #2b2b2b;
}

body.ocw-on pre[data-ocw] {
	max-height: 420px;
	margin: 14px 0;
	padding: 14px 18px 16px;
	overflow: auto;
	border: 0;
	border-top: 36px solid var(--ocw-bar);
	border-radius: 8px;
	background: var(--ocw-bg);
	color: var(--gray-200);
	font-family: ui-monospace, "SFMono-Regular", "Cascadia Code", Consolas, "D2Coding", "Malgun Gothic", monospace;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	word-break: normal;
}

body.ocw-on pre[data-ocw] .token {
	margin: 0;
}

body.ocw-on pre[data-ocw] .token.str {
	color: #ce9178;
}

body.ocw-on .ocw {
	margin: 14px 0;
	overflow: hidden;
	border-radius: 8px;
	background: var(--ocw-bg);
}

body.ocw-on .ocw > pre[data-ocw] {
	margin: 0;
	border-top: 0;
	border-radius: 0;
}

/* 사이트 공용 [코드 복사](js/my-custom-js.js addCopyButtons — 칸 안에 넣는다) — 창 머리 [복사]를 쓴다 */
body.ocw-on .ocw .copy-btn-toolbar {
	display: none;
}

body.ocw-on .ocw-bar {
	display: flex;
	align-items: center;
	gap: 12px;
	height: 36px;
	padding: 0 8px 0 14px;
	background: var(--ocw-bar);
}

body.ocw-on .ocw-dots {
	display: inline-flex;
	gap: 7px;
}

body.ocw-on .ocw-dots i {
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background: #ff5f57;
}

body.ocw-on .ocw-dots i:nth-child(2) {
	background: #febc2e;
}

body.ocw-on .ocw-dots i:nth-child(3) {
	background: #28c840;
}

body.ocw-on .ocw-label {
	flex: 1;
	min-width: 0;
	color: var(--gray-400);
	font-size: 12px;
	font-weight: 500;
	letter-spacing: .02em;
}

/* ⚠️ transition: none — 테마 base.css 「a,button,input{transition: background-color .1s}」 때문에 스크립트가 새로 붙인 단추가 처음에 기본 단추색으로 한 번 번쩍인다 */
body.ocw-on .ocw .ocw-copy {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 26px;
	padding: 0 8px;
	border: 0;
	border-radius: 6px;
	background-color: transparent;
	color: var(--gray-300);
	font: inherit;
	font-size: 12px;
	font-weight: 500;
	line-height: 1;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
	transition: none;
}

body.ocw-on .ocw .ocw-copy:hover {
	background-color: rgba(255, 255, 255, .1);
	color: var(--surface-white);
}

/* 휴대폰 · 태블릿 — 누르는 높이 = 머리 줄 36 전부(커뮤니티 휴대폰 창과 같다) */
@media (max-width: 1024px) {
	body.ocw-on .ocw-bar {
		padding-right: 4px;
	}

	body.ocw-on .ocw .ocw-copy {
		height: 36px;
		padding: 0 10px;
	}
}