/* ─────────────────────────────────────────────────────────────────────
   ranktipster 게시판 목록 (rev178)

   전부 `.rtb` 안으로 한정한다. 이 스킨을 쓰지 않는 화면·레이아웃·다른
   모듈에 규칙이 새어 나가면, 게시판 하나를 고칠 때마다 사이트 전체를
   확인해야 한다.

   ─────────────────────────────────────────────────────────────────────
   색은 **사이트 토큰**을 그대로 쓴다
   ─────────────────────────────────────────────────────────────────────
   레이아웃(`layouts/portal_ever/css/userCSS/userCSS.html`)이 `:root` 와
   `html[data-theme="dark"]` 에 색 한 벌을 정의하고, 머리의 초기화
   스크립트가 언제나 `data-theme` 을 붙인다. 랭킹 화면(`prediction.css`)도
   같은 값을 쓴다.

       --rt-bg  --rt-surface  --rt-surface-2  --rt-surface-3
       --rt-border  --rt-border-soft
       --rt-text  --rt-text-2  --rt-text-3
       --rt-green  --rt-green-text  --rt-danger  --rt-danger-bg  --rt-danger-line

   그래서 이 파일에는 **테마별 배경·글자색을 따로 적지 않는다.** 토큰을
   읽기만 하면 테마 전환이 그대로 따라온다(새로고침도, JS 도 필요 없다).

   ⚠ 예전에는 여기서 `--rt-bg` · `--rt-text` 같은 **같은 이름을 다시 정의**해
     레이아웃 값을 가리고 있었다 — 그래서 화이트 모드에서도 게시판만 남색
     상자로 남았다. 그 그림자를 걷어내고, 이 스킨만의 값은 `--rtb-` 로 쓴다.

   토큰이 없는 곳(다른 레이아웃)에서도 무너지지 않도록 `var(--x, 기본값)`
   형태로 라이트 기준 대체값을 함께 적는다.

   ─────────────────────────────────────────────────────────────────────
   단추·쪽 넘김은 랭킹 화면의 규격을 따른다
   ─────────────────────────────────────────────────────────────────────
   비활성  높이 33 · 라운드 6 · 테두리 #dfe3e8 · 바탕 #fff · 글자 #5a6b80
           hover 에서 테두리·글자가 초록(#0f7a35)
   활성    바탕·테두리 #0f7a35 · 흰 글자
   (`prediction.css` 의 `.pd-rank-tab a` · `.pd-rank-tab.is-active a`
    · `.pd-rank-btn` 값 그대로다. 저 파일은 건드리지 않는다.)
   ───────────────────────────────────────────────────────────────────── */
.rtb {
	/* 목록 격자. 머리글과 줄이 이 값 하나를 본다.

	   칸 다섯 (rev227) — No. · Topic · Author · Date · Views.
	   판 폭이 1280 일 때 대략 5% · 53% · 19% · 11% · 7% 다. 제목이 남는
	   폭을 전부 받으므로(1fr) 좁아질수록 먼저 줄어드는 것은 제목이 아니라
	   **없다** — 옆 칸들은 고정이고 제목만 늘고 준다.
	   Author 는 레벨 아이콘과 닉네임이 함께 들어갈 만큼 둔다. */
	--rtb-col: 62px minmax(0, 1fr) 224px 128px 88px;
	--rtb-gap: 16px;
	--rtb-pad: 20px;

	/* 랭킹 단추 규격 */
	--rtb-ctl-h: 33px;
	--rtb-radius: 6px;
	--rtb-line-idle: #dfe3e8;
	--rtb-ink-idle: #5a6b80;

	box-sizing: border-box;
	max-width: 1280px;
	margin: 0 auto;
	/* 바깥 배경은 두지 않는다 — 레이아웃 배경이 그대로 비친다. */
	padding: 0 0 28px;
	background: transparent;
	color: var(--rt-text, #2b3440);
	font-size: 14px;
	line-height: 1.5;
}
.rtb *, .rtb *::before, .rtb *::after { box-sizing: inherit; }
/* ⚠ 여기에 `color: inherit` 을 두면 안 된다. `.rtb a` 는 클래스+타입이라
   `.rtb-btn` · `.rtb-pg` 같은 한 클래스 규칙보다 세서, 초록 단추의 흰 글자가
   본문 색으로 되돌아간다(라이트에서 New Post 글자가 검게 나왔다).
   색은 각 부품이 스스로 정한다 — 클래스 없는 링크는 이 화면에 없다. */
.rtb a { text-decoration: none; }
.rtb ul, .rtb ol { margin: 0; padding: 0; list-style: none; }

/* 화면에 보이지 않지만 읽어 주는 이름표 */
.rtb-sr {
	position: absolute; width: 1px; height: 1px; padding: 0;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* 목록 상자. 랭킹의 `.pd-rank-card` 와 같은 수준이다 —
   얇은 테두리 하나와 6px 라운드, 표면색. 큰 패널로 만들지 않는다. */
.rtb-panel {
	min-width: 0;
	background: var(--rt-surface, #ffffff);
	border: 1px solid var(--rt-border, #e2e6ea);
	border-radius: var(--rtb-radius);
	overflow: hidden;
}

/* ── 상단 — 관리자용 아이콘 한 칸 (rev233) ────────────────
   탭이 사라진 뒤로 이 줄에 남은 것은 렌치 단추 하나뿐이다. 그래서
   `justify-content: flex-end` 로 **판 오른쪽 끝**에 붙이고(화면 오른쪽이
   아니라 게시판 판의 오른쪽이다 — 좌우 여백이 아래 표와 같은
   `--rtb-pad` 라 표의 오른쪽 모서리와 세로선이 맞는다), 위아래 여백은
   6px 만 준다. 아이콘 하나 때문에 머리글 위에 빈 띠가 생기지 않게 한다. */
.rtb-bar {
	display: flex; align-items: center; justify-content: flex-end; gap: 10px;
	padding: 6px var(--rtb-pad);
	border-bottom: 1px solid var(--rt-border, #e2e6ea);
}
/* 탭이 남는 자리를 전부 받는다 → 오른쪽 관리자 단추는 자연히 끝에 선다.
   큰 여백으로 밀지 않는다. 단추가 없는 화면에서는 이 규칙만으로 배치가
   예전과 같다. */
.rtb-tabs { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; }
/* 관리자 단추 자리. 탭 높이(약 47px)보다 낮아 줄 높이를 키우지 않는다. */
.rtb-bar-admin { flex: 0 0 auto; display: flex; align-items: center; }
/* 글자가 없는 정사각형 단추 (rev235).

   ⚠ 아이콘이 보이지 않던 이유가 여기 있었다. 이 규칙은 파일에서
     `.rtb-btn`(166행)보다 **먼저** 나오는데 특이도가 (0,1,0) 으로 같다.
     같으면 나중에 적힌 쪽이 이기므로 `.rtb-btn { padding: 0 14px }` 가
     여기 `padding: 0` 을 덮었다. `box-sizing: border-box` 인 32px 상자에
     좌우 14px 씩 들어가면 안쪽에 남는 폭은 **4px** 이고, SVG 에는
     `flex-shrink` 를 막아 둔 것이 없어 그 4px 로 눌려 사실상 사라졌다.
     선이 지워진 것도, 색이 같아진 것도 아니었다 — 자리가 없었다.

   `!important` 로 덮지 않고 이름을 하나 더 붙여 (0,2,0) 으로 올린다.
   아이콘에는 줄어들지 말라고 못을 박아 둔다(같은 일이 다시 나면 바로
   드러나도록 크기를 스스로 지키게 한다). */
.rtb-bar-admin .rtb-btn-admin {
	gap: 0;
	width: 32px; height: 32px; padding: 0;
	justify-content: center;
}
.rtb-btn-admin svg { flex: 0 0 auto; width: 16px; height: 16px; }
.rtb-tab {
	padding: 14px 16px;
	color: var(--rt-text-2, #7b8794);
	font-weight: 600;
	white-space: nowrap;
	border-bottom: 2px solid transparent;
}
.rtb-tab:hover { color: var(--rt-text, #2b3440); }
.rtb-tab:focus-visible { outline: 2px solid var(--rt-green, #0f7a35); outline-offset: -2px; border-radius: 4px; }
.rtb-tab.is-on { color: var(--rt-green-text, #0f7a35); border-bottom-color: var(--rt-green, #0f7a35); }

/* ── 검색폼 (rev177 유지) ─────────────────────────────────────
   랭킹 검색폼과 같은 수치다(입력 33 · 라운드 6 · 테두리 #dfe3e8,
   단추 33 높이 · 좌우 14 · #0f7a35, 사이 간격 6). 색만 토큰을 따른다. */
.rtb-search { display: flex; align-items: center; gap: 6px; margin: 0;
              width: 250px; max-width: 100%; min-width: 0; }
.rtb-input {
	box-sizing: border-box; flex: 1 1 auto; width: auto; min-width: 0;
	height: var(--rtb-ctl-h); padding: 0 11px;
	border: 1px solid var(--rtb-line-idle); border-radius: var(--rtb-radius);
	background: #ffffff; color: #2b3440;
	font-size: 13px; font-family: inherit;
}
.rtb-input::placeholder { color: var(--rt-text-3, #a3adb8); }
.rtb-input:hover { border-color: #c9d1da; }
.rtb-input:focus { border-color: var(--rt-green, #0f7a35); outline: none; }
.rtb-search-btn {
	box-sizing: border-box; flex: 0 0 auto;
	height: var(--rtb-ctl-h); padding: 0 14px;
	border: 1px solid var(--rt-green, #0f7a35); border-radius: var(--rtb-radius);
	background: var(--rt-green, #0f7a35);
	color: #ffffff; font-size: 13px; font-weight: 600; line-height: 1;
	font-family: inherit; cursor: pointer;
}
.rtb-search-btn:hover { background: #0c6a2d; border-color: #0c6a2d; }
.rtb-search-btn:focus-visible { outline: 2px solid var(--rt-green, #0f7a35); outline-offset: 1px; }

/* 분류 선택 — 랭킹의 비활성 단추와 같은 옷 */
.rtb-select {
	box-sizing: border-box;
	height: var(--rtb-ctl-h); max-width: 100%; min-width: 0; padding: 0 11px;
	border: 1px solid var(--rtb-line-idle); border-radius: var(--rtb-radius);
	background: #ffffff; color: var(--rtb-ink-idle);
	font-size: 13px; font-weight: 600; font-family: inherit;
}
.rtb-select:hover { border-color: var(--rt-green, #0f7a35); color: var(--rt-green-text, #0f7a35); }
.rtb-select:focus { outline: none; border-color: var(--rt-green, #0f7a35); }

/* ── 단추 — 랭킹 규격 ─────────────────────────────────────── */
.rtb-btn {
	box-sizing: border-box;
	display: inline-flex; align-items: center; gap: 7px;
	height: var(--rtb-ctl-h); padding: 0 14px;
	border: 1px solid var(--rtb-line-idle); border-radius: var(--rtb-radius);
	background: #ffffff; color: var(--rtb-ink-idle);
	font-size: 13px; font-weight: 600; line-height: 1; font-family: inherit;
	cursor: pointer; white-space: nowrap;
}
.rtb-btn:hover { border-color: var(--rt-green, #0f7a35); color: var(--rt-green-text, #0f7a35); }
.rtb-btn:focus-visible { outline: 2px solid var(--rt-green, #0f7a35); outline-offset: 1px; }
/* New Post — 랭킹의 활성 단추(초록 채움)와 같은 자리다. */
.rtb-btn-primary {
	background: var(--rt-green, #0f7a35);
	border-color: var(--rt-green, #0f7a35);
	color: #ffffff;
}
.rtb-btn-primary:hover { background: #0c6a2d; border-color: #0c6a2d; color: #ffffff; }
/* 지우기 단추 (rev193) — 초록 단추와 **같은 틀**에 색만 다르다.
   초록은 실행·성공, 빨강은 지움이다. 채움 값은 라이트·다크가 같다
   (뜻이 있는 색이라 밝기를 바꾸지 않는다. 흰 글자 대비 6.5:1).
   ⚠ 본문 아래의 글자형 `Delete`(`.rtb-btn-delete`)는 그대로 둔다 —
     그 화면은 이번 범위가 아니다. */
.rtb-btn-danger {
	background: #b42318; border-color: #b42318; color: #ffffff;
	-webkit-appearance: none; appearance: none;
}
.rtb-btn-danger:hover { background: #8f1c13; border-color: #8f1c13; color: #ffffff; }
.rtb-btn-danger:active { background: #7a1710; border-color: #7a1710; }
.rtb-btn-danger:focus-visible { outline: 2px solid #b42318; outline-offset: 2px; }

/* ── 목록 격자 ────────────────────────────────────────────
   머리글과 줄이 **같은 변수**(--rtb-col)를 쓴다. 줄에는 왼쪽에 3px 의
   투명한 선이 있고 공지만 그 색을 채우므로, 안쪽 여백은 모든 줄이 같다. */
.rtb-thead, .rtb-row {
	display: grid;
	grid-template-columns: var(--rtb-col);
	gap: var(--rtb-gap);
	align-items: center;
	padding: 0 var(--rtb-pad);
	border-left: 3px solid transparent;
}
.rtb-thead {
	padding-top: 11px; padding-bottom: 11px;
	background: var(--rt-surface-2, #f4f6f8);
	color: var(--rt-text-2, #7b8794);
	font-size: 12px; font-weight: 600;
	border-bottom: 1px solid var(--rt-border, #e2e6ea);
}
.rtb-th { text-align: center; }
.rtb-th-topic, .rtb-th-au { text-align: left; }

/* ── 선택 칸 (rev184) ────────────────────────────────────
   관리 권한이 있을 때만 줄 맨 앞에 한 칸이 붙는다. 열 정의를 **패널에서**
   덮으므로 머리글과 줄이 같은 격자를 그대로 쓰고, 권한이 없는 화면에서는
   이 칸도 이 규칙도 걸리지 않아 빈 자리가 남지 않는다. */
.rtb-panel.is-manage { --rtb-col: 34px 62px minmax(0, 1fr) 224px 128px 88px; }
.rtb-th-check { text-align: center; }
.rtb-check-cell { display: flex; align-items: center; justify-content: center; }
.rtb-check-cell input,
.rtb-th-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--rt-green, #0f7a35); cursor: pointer; }

/* 줄 높이 (rev227). 카드가 아니라 게시판이므로 한 화면에 글이 많이
   들어가야 한다. 위아래 13 → 9 로 줄여 줄 높이가 약 40px 이 된다 —
   손가락이 아니라 마우스로 누르는 화면이라 이 정도면 넉넉하고, 이보다
   더 줄이면 제목 사이 간격이 글자 크기보다 좁아진다. */
.rtb-row { padding-top: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--rt-border-soft, #eef0f3); }
.rtb-row:last-child { border-bottom: 0; }
.rtb-row:hover, .rtb-row:focus-within { background: var(--rt-surface-2, #f4f6f8); }
/* 공지 row 배경 강조 (rev241) — 예전엔 `.rtb-thead`(칸 머리글)와 같은
   회색(--rt-surface-2)을 썼다. 머리글과 같은 색이라 "이 줄만 특별하다"는
   느낌이 약했다. 그래서 사이트 초록 accent(--rt-green: #0f7a35)를 낮은
   불투명도로 깔아 은은한 청록 tint 를 낸다 — 왼쪽 굵은 선(border-left)은
   그대로 두고, 행 전체에는 아주 옅게만 얹는다. 라이트·다크 어느 배경
   위에서도 자연스럽게 섞이도록 고정 색상 대신 낮은 알파를 쓴다. */
.rtb-row.is-notice { background: rgba(15, 122, 53, 0.08); border-left-color: var(--rt-green, #0f7a35); }
.rtb-row.is-notice:hover { background: rgba(15, 122, 53, 0.13); }

.rtb-topic { min-width: 0; display: flex; align-items: center; }
.rtb-main { min-width: 0; width: 100%; display: flex; align-items: center; }
/* 제목 · 배지 · 댓글 수가 **한 줄에** 선다 (rev227).

   예전에는 `flex-wrap: wrap` 이라 제목이 길면 배지와 댓글 수가 다음 줄로
   내려가 그 줄만 두 배로 높아졌다 — 줄 높이가 들쭉날쭉하면 게시판이 아니라
   목록 카드처럼 보인다. 지금은 줄을 접지 않고, 넘치는 것은 제목이 말줄임으로
   받는다(`.rtb-subject`). 배지·댓글 수는 줄지 않는다(`flex: 0 0 auto`).
   표가 옆으로 넘치지 않는 것은 칸마다 `min-width: 0` 이 있기 때문이다. */
.rtb-line { display: flex; flex-wrap: nowrap; align-items: center; gap: 7px; min-width: 0; width: 100%; }
.rtb-line > .rtb-cat, .rtb-line > .rtb-badge { flex: 0 0 auto; }
/* 댓글 수 (rev229).

   `[4]` — 대괄호에 파랑이다. 회색 `(4)` 였을 때는 제목 끝에 묻어서 댓글이
   붙은 글과 없는 글이 목록에서 구분되지 않았고, 초록으로 줬더니 이번에는
   사이트 강조색과 같아져 단추·링크와 뜻이 섞였다. 초록은 이 사이트에서
   "실행·활성"이 맡고 있으므로 목록의 정보 표시에는 쓰지 않는다.

   값은 새로 만들지 않고 이 파일이 이미 쓰는 파랑을 그대로 가져온다
   (`.rtb-badge.is-pinned` · `.rtb-cat.is-mlb`). 라이트 6.7:1 · 다크 6.5:1.

   ⚠ 이 이름은 PC 목록에만 있다. 모바일은 `.rtbm-stat` 으로 따로 그린다. */
.rtb-reply-n {
	flex: 0 0 auto;
	color: #1d4ed8;
	font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums;
}

/* 상태 배지 — 뜻이 있는 색이라 테마별로 값을 따로 둔다(아래 어두운 화면). */
.rtb-badge {
	display: inline-block; padding: 2px 7px;
	border: 1px solid transparent; border-radius: 5px;
	font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
.rtb-badge.is-pinned { color: #1d4ed8; border-color: #c7d6f5; background: #eef3fd; }
.rtb-badge.is-hot { color: var(--rt-danger, #b42318); border-color: var(--rt-danger-line, #f3c6c6);
                    background: var(--rt-danger-bg, #fdf3f3); }
.rtb-badge.is-new { color: var(--rt-green-text, #0f7a35); border-color: #bfe0cb; background: #e9f5ee; }
.rtb-badge.is-official { color: #6b21a8; border-color: #e0cdf3; background: #f6eefc; }

/* ── NEW 배지 — PC 목록 전용 (rev229) ──────────────────────
   테두리형 연한 상자에서 **채움 소형 라벨**로 바꾼다. 연한 상자는 제목과
   비슷한 무게라 줄마다 네모가 하나씩 더 있는 것처럼 보였고, 행 높이를 9px
   로 줄인 뒤에는 배지가 줄 높이를 혼자 밀어 올리고 있었다. 채우면 면적이
   작아도 눈에 띄므로 크기를 절반 가까이 줄일 수 있다.

   색은 **주황**이다. 초록은 이 사이트에서 New Post·검색 단추·활성 쪽번호가
   쓰는 실행색이라, 같은 초록을 목록 배지에 얹으면 누를 수 있는 것처럼
   보인다. 빨강은 바로 옆 `HOT` 배지가 이미 갖고 있어 둘이 섞인다.
   남는 자리가 주황이고, "새로 올라온 글"이라는 뜻과도 맞다.

   양 테마에 같은 값을 쓴다 — 아래 `.rtb-btn-danger` 와 같은 이유다.
   뜻이 있는 색이라 밝기를 바꾸지 않는다(흰 글자 대비 5.2:1).

   ⚠ 반드시 `.rtb-line >` 안에서만 바꾼다. `.rtb-badge.is-new` 는 모바일
     스킨(`m.skins/ranktipster/list.html`)도 쓰는 이름이고 그 스킨이 이
     파일을 함께 읽는다 — 이름만 놓고 고치면 모바일 목록까지 바뀐다.
     `.rtb-line` 은 PC 목록 줄에만 있다(모바일은 `.rtbm-head`). */
/* rev233 — `NEW` 글자 배지를 **한 글자짜리 `N` 아이콘**으로 바꾼다.

   채움 배지는 글자가 세 자라 제목 옆에서 여전히 덩어리로 보였다. 지금은
   14px 정사각형 하나이고, 안이 비어 있어 제목 줄을 밀지 않는다 —
   `line-height: 1` 에 고정 높이라 줄 높이(40px)가 그대로다.

   색은 사이트 초록 토큰을 **글자와 테두리에만** 쓴다. 바탕은 비운다
   (`transparent`) — 초록으로 칠하면 예전에 지적받은 "큰 녹색 덩어리"로
   돌아간다. 새 색을 하드코딩하지 않으므로 라이트·다크가 함께 따라온다. */
/* ⚠ 모바일 목록(`.rtbm-head`)도 rev234 부터 **같은 `N` 아이콘**을 쓴다.
   같은 규칙에 선택자만 더한다 — 모바일용 사본을 따로 만들면 두 곳이
   갈린다. PC(`.rtb-line`)의 결과는 이 줄로 달라지지 않는다. */
/* rev245 — 인기글도 **같은 아이콘**이 된다. `HOT` 세 글자 배지가 `N` 옆에서
   혼자 덩어리로 보였다. 모양(14px 정사각형 · 빈 바탕 · 1px 테두리)은 한 벌로
   두고 **색만 나눈다** — 인기 = 골드(#F59E0B), 새 글 = 빨강.
   골드는 이 스킨의 다른 뜻과 겹치지 않는 자리다(초록 = 실행, 파랑 = 댓글).
   목록 줄 안(`.rtb-line` · `.rtbm-head`)으로만 한정한다 — 읽기 화면 등
   다른 자리의 `.rtb-badge.is-hot` 은 예전 모양 그대로다. */
.rtb-line > .rtb-badge.is-new,
.rtbm-head > .rtb-badge.is-new,
.rtb-line > .rtb-badge.is-hot,
.rtbm-head > .rtb-badge.is-hot {
	display: inline-flex; align-items: center; justify-content: center;
	width: 14px; height: 14px; padding: 0;
	border: 1px solid var(--rt-danger, #b42318);
	border-radius: 3px;
	background: transparent;
	color: var(--rt-danger, #b42318);
	font-size: 9.5px; font-weight: 800; line-height: 1; letter-spacing: 0;
}
/* 인기글만 색을 갈아 끼운다. 뜻이 있는 색이라 두 테마에 같은 값을 쓴다
   (`N` 과 같은 원칙). 어두운 화면에서도 대비가 남는 밝기다. */
.rtb-line > .rtb-badge.is-hot,
.rtbm-head > .rtb-badge.is-hot {
	border-color: #F59E0B;
	color: #F59E0B;
}

.rtb-cat {
	display: inline-block; padding: 3px 10px; border-radius: var(--rtb-radius);
	background: #e2e6ea; color: #2b3440;
	font-size: 12px; font-weight: 700;
	max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rtb-cat.is-soccer { background: #17683f; color: #ffffff; }
.rtb-cat.is-nba { background: #a4501a; color: #ffffff; }
.rtb-cat.is-mlb { background: #1d4ed8; color: #ffffff; }
.rtb-cat.is-general { background: #4c3a91; color: #ffffff; }
.rtb-cat.is-official { background: #4a4f57; color: #ffffff; }

/* 제목 (rev227).

   이 화면에서 가장 진하지만, 랭킹·픽의 큰 제목처럼 키우지는 않는다 —
   15.5/700 은 카드 제목의 크기였다. 일반 게시판 제목 수준(14.5/600)으로
   낮추면 작성자·날짜·조회수보다 한 단계 위라는 것은 그대로면서 줄 높이가
   내려간다.

   긴 제목은 칸 안에서 말줄임으로 끝난다 — 전체는 눌러서 본다. */
.rtb-subject {
	flex: 0 1 auto; min-width: 0;
	font-size: 14.5px; font-weight: 600; line-height: 1.4;
	color: var(--rt-text, #2b3440);
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rtb-subject:hover { color: var(--rt-green-text, #0f7a35); }
.rtb-subject:focus-visible { outline: 2px solid var(--rt-green, #0f7a35); outline-offset: 2px; border-radius: 4px; }
.rtb-lock { margin-right: 4px; font-size: 12px; }

/* 작성자 칸 — 레벨 아이콘과 닉네임. 한 줄로 자르고 전체는 `title` 로 본다.
   가운데가 아니라 **왼쪽**에 세운다 (rev227) — 닉네임 길이가 제각각이라
   가운데 정렬하면 아이콘 시작점이 줄마다 흔들린다. */
.rtb-au { min-width: 0; text-align: left; }
.rtb-au-name {
	display: inline-block; max-width: 100%;
	overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
	color: var(--rt-text-2, #7b8794); font-size: 13px; font-weight: 600;
}
.rtb-au-name:hover { color: var(--rt-text, #2b3440); }
/* 경험치 레벨 아이콘 (rev179).
   `experience_level_icon` 애드온이 `member_{srl}` 인 요소 **안쪽 맨 앞**에
   `<img class="xe_experience_level_icon">` 을 끼운다(랭킹·픽 화면과 같은
   방식이다). 레벨이 없거나 아이콘 파일이 없으면 애드온이 아무것도 넣지
   않으므로 깨진 이미지가 생기지 않는다. 여기서는 자리만 다듬는다.
   아바타·프로필 사진은 쓰지 않는다. */
.rtb .xe_experience_level_icon {
	margin: 0 5px 0 0; max-height: 16px; width: auto;
	vertical-align: middle; display: inline-block;
}

/* 번호 칸 (rev227). 보조 정보라 제목보다 흐리다 — 숫자가 눈에 먼저 들어오면
   목록을 읽는 순서가 뒤집힌다. 자릿수가 늘어도 열이 흔들리지 않게
   고정폭 숫자를 쓴다. */
/* 명도는 한 단계만 올렸다 (rev233) — `--rt-text-3`(가장 흐림)에서
   `--rt-text-2` 로. 어두운 바탕에서 번호가 거의 안 보인다는 지적이 있었다.
   Date 와 같은 단계이고, 굵기·크기는 그대로라 제목보다 세지 않는다. */
.rtb-no {
	text-align: center; color: var(--rt-text-2, #7b8794);
	font-size: 12.5px; font-variant-numeric: tabular-nums;
}
.rtb-no-dash { opacity: .7; }

/* 수치 칸 — 머리글과 같은 열, 같은 가운데 정렬.
   조회수는 읽기만 하는 값이라 제목보다 한 단계 흐리다 (rev227). */
.rtb-num { text-align: center; color: var(--rt-text-2, #7b8794); font-size: 13px;
           font-weight: 600; font-variant-numeric: tabular-nums; }
.rtb-num-label { display: none; }

/* 작성일 (rev227). `YYYY-MM-DD` 는 열 폭이 항상 같으므로 줄바꿈을 막고
   고정폭 숫자로 세운다. 상대시간(`… ago`)은 이 화면에서 쓰지 않는다. */
.rtb-date {
	min-width: 0; text-align: center; color: var(--rt-text-2, #7b8794);
	font-size: 12.5px; font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* 본문·댓글 머리에서 쓰는 시각 글자. 목록에는 더 이상 없다. */
.rtb-time { color: var(--rt-text-3, #a3adb8); }

.rtb-empty { margin: 0; padding: 56px 20px; text-align: center; color: var(--rt-text-2, #7b8794); }

/* ── 목록 아래 줄 ─────────────────────────────────────────
   `1fr auto 1fr` 세 칸이라 **가운데 칸이 언제나 판 한가운데**에 선다.
   양옆이 여백이었다면 검색어 길이·단추 문구에 따라 중심이 움직인다. */
/* rev233 — `Showing …` 줄이 사라져 **한 줄**만 남는다. 격자에서 `count`
   칸을 빼고 세 칸 한 줄로 줄였다. 위아래 여백도 한 줄에 맞춰 14px 로
   같게 준다(예전에는 아래 문구 자리를 감안해 16/18 이었다).
   `align-items: center` 가 검색·쪽 넘김·단추의 세로 중심을 맞춘다. */
.rtb-foot {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	grid-template-areas: 'left page right';
	align-items: center; gap: 12px;
	padding: 14px var(--rtb-pad);
	border-top: 1px solid var(--rt-border, #e2e6ea);
	text-align: center;
}
.rtb-foot-left { grid-area: left; display: flex; align-items: center; gap: 8px; justify-self: start; min-width: 0; max-width: 100%; }
.rtb-foot-right { grid-area: right; display: flex; align-items: center; gap: 8px; justify-self: end; }
/* 쪽 넘김은 가운데 칸에서 위아래 여백 없이 선다 — 세 칸의 중심선이
   어긋나지 않게 한다(`.rtb-page` 는 원래 여백이 없다). */
.rtb-foot .rtb-page { margin: 0; }

/* 쪽 넘김 — 랭킹의 비활성/활성 단추와 같은 옷이다. */
.rtb-page { grid-area: page; display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rtb-pg {
	box-sizing: border-box;
	display: inline-flex; align-items: center; justify-content: center;
	min-width: var(--rtb-ctl-h); height: var(--rtb-ctl-h); padding: 0 11px;
	border: 1px solid var(--rtb-line-idle); border-radius: var(--rtb-radius);
	background: #ffffff; color: var(--rtb-ink-idle);
	font-size: 13px; font-weight: 600; line-height: 1;
}
.rtb-pg:hover { border-color: var(--rt-green, #0f7a35); color: var(--rt-green-text, #0f7a35); }
.rtb-pg:focus-visible { outline: 2px solid var(--rt-green, #0f7a35); outline-offset: 1px; }
.rtb-pg.is-on { background: var(--rt-green, #0f7a35); border-color: var(--rt-green, #0f7a35);
                color: #ffffff; font-weight: 700; }
/* `.rtb-count`(Showing … 문구) 규칙은 지웠다 (rev233) — 마크업이 없어져
   쓰이지 않는 CSS 가 된다. 모바일 스킨의 문구는 `.rtbm-count` 로 따로
   있으므로 이 삭제에 영향받지 않는다. */

/* ── 어두운 화면 ──────────────────────────────────────────
   랭킹(`prediction.css`)이 쓰는 것과 **같은 선택자·같은 토큰**이다.
   여기서는 토큰만으로 해결되지 않는 것(흰 바탕을 쓰는 입력·단추, 뜻이
   있는 배지 색)만 다시 적는다. */
html[data-theme="dark"] .rtb-input,
html[data-theme="dark"] .rtb-select,
html[data-theme="dark"] .rtb-btn,
html[data-theme="dark"] .rtb-pg {
	background: var(--rt-surface-2, #212c39);
	border-color: var(--rt-border, #33414f);
	color: var(--rt-text-2, #9aa7b6);
}
html[data-theme="dark"] .rtb-input { color: var(--rt-text, #e4e8ee); }
html[data-theme="dark"] .rtb-btn-primary,
html[data-theme="dark"] .rtb-pg.is-on {
	background: var(--rt-green, #0f7a35);
	border-color: var(--rt-green, #0f7a35);
	color: #ffffff;
}
/* 지우기 단추는 어두운 화면에서도 같은 빨강이다 (rev193).
   위의 중립 단추 규칙(`.rtb-btn`)이 이름 수로 앞서므로 여기서 되살린다 —
   초록 단추가 바로 위에서 같은 이유로 되살아나는 것과 같은 자리다. */
html[data-theme="dark"] .rtb-btn-danger {
	background: #b42318; border-color: #b42318; color: #ffffff;
}
html[data-theme="dark"] .rtb-btn-danger:hover { background: #8f1c13; border-color: #8f1c13; }
/* 글 고치기 단추 — 글쓰기 화면의 제출 단추와 **같은 밝기**로 (rev260).

   어두운 화면에서 이 둘은 바탕(`--rt-surface-2`)도 테두리(`--rt-border`)도
   이미 같고, 다른 것은 글자색 하나뿐이었다. 제출 단추는 레이아웃의 `input`
   규칙에 걸려 본문색(`--rt-text`)으로 밝게 나오는데, 이쪽은 위 중립 단추
   규칙의 보조색(`--rt-text-2`)에 머물러 눌러도 되는 자리처럼 보이지 않았다.

   그래서 바탕을 새로 칠하지 않고 **글자만** 같은 값으로 올린다. 라이트는
   이미 흰 단추에 또렷한 글자라 손대지 않는다. */
html[data-theme="dark"] .rtb-doc-tools .rtb-btn-edit { color: var(--rt-text, #e4e8ee); }
/* 글 지우기 단추 — 어두운 화면에서도 **빨강을 지킨다** (rev260).

   `.rtb-btn-delete` 는 이미 `--rt-danger` 를 쓰고 있었지만, 위 중립 단추
   규칙(`html[data-theme="dark"] .rtb-btn`)이 이름 수로 앞서 색을 덮어써
   어두운 화면에서만 고치기 단추와 똑같은 회색으로 나왔다. 지우기가 색으로
   구분되지 않으면 실수로 누르기 쉽다.

   값을 새로 만들지 않는다 — 토큰이 이미 어두운 화면용 빨강(`#f87171`)과
   그 옅은 바탕(`#2a1a1c`)을 갖고 있다. 단추 바탕 대비 5.12:1 로 읽힌다.
   손이 얹혔을 때도 같은 이유로 되살린다. */
html[data-theme="dark"] .rtb-doc-tools .rtb-btn-delete { color: var(--rt-danger, #f87171); }
html[data-theme="dark"] .rtb-doc-tools .rtb-btn-delete:hover {
	color: var(--rt-danger, #f87171);
	border-color: var(--rt-danger, #f87171);
	background: var(--rt-danger-bg, #2a1a1c);
}
html[data-theme="dark"] .rtb-badge.is-pinned { color: #7db0ff; border-color: #24446f; background: #12233d; }
html[data-theme="dark"] .rtb-badge.is-new { color: #57d38c; border-color: #1f5a3a; background: #10281d; }
/* PC 목록의 채움 배지 — 어두운 화면에서도 **같은 주황**이다. 흰 글자가
   이미 5.2:1 이라 밝힐 이유가 없고, 밝히면 흰 글자가 도리어 흐려진다.
   ⚠ 이 줄이 필요한 이유는 색이 달라서가 아니라, 바로 위 모바일용 규칙이
     이름 수로 앞서기 때문이다(그 규칙을 지우면 모바일 배지가 바뀐다). */
/* `N` 아이콘은 토큰(`--rt-green-text`)만 쓰므로 다크에서 값을 다시 적을
   필요가 없다. 다만 바로 위 모바일용 규칙(연초록 상자)이 이름 수로
   앞서므로, 바탕과 테두리를 여기서 되돌린다. */
html[data-theme="dark"] .rtb-line > .rtb-badge.is-new,
html[data-theme="dark"] .rtbm-head > .rtb-badge.is-new {
	background: transparent;
	border-color: var(--rt-danger, #f87171);
	color: var(--rt-danger, #f87171);
}
/* 댓글 수 — 어두운 바탕에서는 파랑을 한 단계 밝힌다. 값은 바로 위
   `is-pinned` 의 다크 글자색과 같다(대비 6.5:1). */
html[data-theme="dark"] .rtb-reply-n { color: #7db0ff; }
html[data-theme="dark"] .rtb-badge.is-official { color: #c39bff; border-color: #48307a; background: #1e1636; }
html[data-theme="dark"] .rtb-cat { background: var(--rt-surface-3, #27333f); color: var(--rt-text, #e4e8ee); }

/* ── 태블릿 — 열은 그대로 두고 폭만 줄인다 ────────────────── */
@media (max-width: 900px) {
	.rtb { --rtb-col: 46px minmax(0, 1fr) 132px 96px 62px; --rtb-gap: 10px; --rtb-pad: 14px; }
	/* ⚠ 관리자 화면은 이름이 둘(`.rtb-panel.is-manage`)이라 위의 `.rtb` 한
	     줄로는 덮이지 않는다. 같은 폭을 여기서 한 번 더 적어 준다. */
	.rtb-panel.is-manage { --rtb-col: 30px 46px minmax(0, 1fr) 132px 96px 62px; }
}

/* ── 좁은 화면 — 같은 디자인을 다시 배치한다 ───────────────
     탭 한 줄 · 검색 한 줄 · 쪽 넘김 · New Post,
     줄은 제목이 먼저 오고 그 아래 보조 정보가 흐른다. */
@media (max-width: 640px) {
	.rtb { --rtb-pad: 12px; --rtb-ctl-h: 31px; padding-bottom: 20px; font-size: 14px; }

	/* 좁은 화면 — 탭이 잘리지 않게 한 줄을 통째로 쓰고, 관리자 단추는
	   다음 줄 오른쪽에 선다. 단추가 없는 일반·비로그인 화면에서는 탭 한
	   줄뿐이라 예전 배치와 같다. */
	.rtb-bar { padding: 0 10px; flex-wrap: wrap; }
	.rtb-tabs { flex: 1 1 100%; -webkit-overflow-scrolling: touch; }
	.rtb-tab { padding: 11px 12px; }
	.rtb-bar-admin { flex: 1 1 100%; justify-content: flex-end; padding-bottom: 8px; }

	/* 아래 줄은 세 칸을 한 줄씩 쌓는다 — 검색 · 쪽 넘김 · 글쓰기 순. */
	.rtb-foot {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas: 'left' 'page' 'right';
		gap: 10px;
		padding: 14px 12px 16px;
	}
	.rtb-foot-left { flex-wrap: wrap; justify-self: stretch; }
	.rtb-foot-right { justify-self: stretch; }
	.rtb-foot-right .rtb-btn { width: 100%; justify-content: center; }
	.rtb-catform { flex: 1 1 100%; }
	.rtb-catform .rtb-select { width: 100%; }
	.rtb-search { width: 100%; }
	.rtb-input, .rtb-search-btn, .rtb-btn, .rtb-pg, .rtb-select { font-size: 12px; }
	.rtb-search-btn, .rtb-btn { padding: 0 12px; }

	/* 머리글은 감춘다 — 값 옆에 이름표가 따로 붙는다. */
	.rtb-thead { display: none; }

	/* 좁은 화면에서는 격자를 풀고 **한 줄로 흐르게** 둔다. 칸을 고정하면
	   값이 길어졌을 때 서로 붙거나(조회수와 시각) 0 폭으로 눌린다. */
	.rtb-row {
		display: flex; flex-wrap: wrap; align-items: baseline;
		gap: 6px 12px;
		padding-top: 12px; padding-bottom: 12px;
	}
	/* 선택 칸은 배지·제목과 겹치지 않게 첫 줄 맨 앞에 선다. */
	.rtb-check-cell { flex: 0 0 auto; order: -1; }
	.rtb-flags { flex: 1 1 auto; }
	.rtb-flags:empty { display: none; }
	.rtb-topic { flex: 1 1 100%; display: flex; align-items: flex-start; }
	.rtb-main { width: 100%; }
	/* 좁은 화면에서는 제목이 줄 하나를 통째로 쓰므로 접히게 둔다 — 넓은
	   화면의 말줄임은 옆 칸이 같은 줄에 있을 때만 필요하다. */
	.rtb-line { flex-wrap: wrap; }
	.rtb-subject { flex: 0 1 auto; font-size: 15px; white-space: normal; overflow: visible; overflow-wrap: anywhere; }

	.rtb-num, .rtb-au, .rtb-no, .rtb-date {
		display: inline-flex; align-items: baseline; gap: 4px; min-width: 0;
		text-align: left; font-size: 12px; font-weight: 600; color: var(--rt-text-2, #7b8794);
	}
	.rtb-num-label { display: inline; color: var(--rt-text-3, #a3adb8); font-weight: 500; }
	.rtb-au, .rtb-c, .rtb-v, .rtb-no { flex: 0 0 auto; }
	.rtb-au-name { font-size: 12px; max-width: 34vw; }
	/* 번호는 제목 앞줄에 선다 — 격자가 풀린 줄에서도 맨 앞이다. */
	.rtb-no { order: -1; }
	/* 작성일은 줄 끝에 붙인다. 남는 폭을 받아 오른쪽으로 밀린다. */
	.rtb-date { flex: 1 1 auto; justify-content: flex-end; text-align: right; white-space: nowrap; }
}

/* ═════════════════════════════════════════════════════════════════════
   게시글 열람 · 댓글 (rev179)

   목록과 같은 토큰·같은 부품을 쓴다. 색을 여기서 정하지 않는다 —
   `--rt-*` 는 레이아웃이 두 테마에 맞춰 갈아 끼운다.
   전부 `.rtb-read` · `.rtb-doc` · `.rtb-cmt` 안으로 한정한다. 다른 모듈의
   에디터·본문에는 한 줄도 닿지 않는다.
   ═════════════════════════════════════════════════════════════════════ */
.rtb-read { display: flex; flex-direction: column; gap: 16px; padding-bottom: 8px; }
.rtb-read .rtb-panel { padding: 0; }
/* ── 지우기·비밀번호 확인 판 (rev193) ────────────────────
   글 지우기 · 댓글 지우기 · 비밀번호 확인이 **한 벌**을 쓴다.
   색은 하나도 새로 만들지 않는다 — 본문·댓글 판이 쓰는 사이트 토큰
   그대로라 라이트·다크가 함께 따라온다(테마 전환에 JS 없음). */
/* ⚠ 안쪽 여백은 `.rtb-read .rtb-panel { padding:0 }` 보다 이름이 하나 더
     있어야 이긴다 — 그래서 `.rtb-read` 를 붙여 적는다. */
.rtb-read .rtb-confirm { display: block; padding: 20px var(--rtb-pad); }
.rtb-confirm-target {
	padding-bottom: 14px; margin-bottom: 14px;
	border-bottom: 1px solid var(--rt-border-soft, #eef0f3);
}
.rtb-confirm-title {
	margin: 0 0 6px; font-size: 18px; line-height: 1.4; font-weight: 700;
	color: var(--rt-text, #2b3440); overflow-wrap: anywhere;
}
.rtb-confirm-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
	margin: 0; font-size: 12.5px; color: var(--rt-text-2, #7b8794);
}
.rtb-confirm-meta .rtb-au-name { color: var(--rt-text, #2b3440); font-weight: 600; }
/* 지울 댓글 내용. 길어도 판 밖으로 나가지 않는다. */
.rtb-confirm-body {
	margin-top: 10px; color: var(--rt-text, #2b3440);
	font-size: 14px; line-height: 1.7; overflow-wrap: anywhere;
}
.rtb-confirm-body > *:first-child { margin-top: 0; }
.rtb-confirm-body > *:last-child { margin-bottom: 0; }
.rtb-confirm-body img { max-width: 100%; height: auto; }
.rtb-confirm-body table { max-width: 100%; }
/* 확인 문구. 큰 빨간 상자를 만들지 않는다 — 아이콘 하나와 글자뿐이다. */
.rtb-confirm-msg {
	display: flex; align-items: flex-start; gap: 8px; margin: 0;
	font-size: 14.5px; line-height: 1.6; color: var(--rt-text, #2b3440);
}
.rtb-confirm-icon { flex: 0 0 auto; margin-top: 2px; color: var(--rt-danger, #b42318); }
.rtb-confirm-field { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.rtb-confirm-label { font-size: 13px; color: var(--rt-text-2, #7b8794); }
.rtb-confirm-field .rtb-input { flex: 0 1 220px; }
/* 단추는 판 안쪽 오른쪽 아래. float 도 절대 위치도 쓰지 않는다. */
.rtb-confirm-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 20px; }
@media (max-width: 640px) {
	.rtb-read .rtb-confirm { padding: 16px var(--rtb-pad); }
	.rtb-confirm-title { font-size: 16.5px; }
	.rtb-confirm-field { flex-wrap: wrap; }
	.rtb-confirm-field .rtb-input { flex: 1 1 100%; }
}

/* ── 글 쓰기·고치기 판 (rev196) ──────────────────────────
   댓글폼과 같은 판을 쓴다 — 테두리·바탕·안쪽 여백이 같고, 색은 사이트
   토큰이라 라이트·다크가 함께 따라온다. 새 색은 만들지 않는다.
   제목칸·에디터·첨부 줄의 **왼쪽 시작점이 같다**(모두 판의 안쪽 여백 기준). */
.rtb-read .rtb-write { display: block; padding: 20px var(--rtb-pad) 22px; }
.rtb-write-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-bottom: 12px; }
.rtb-write-head .rtb-select { max-width: 100%; }
.rtb-write-check { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--rt-text-2, #7b8794); }
.rtb-write-check input { width: 15px; height: 15px; margin: 0; accent-color: var(--rt-green, #0f7a35); }
/* 제목 — 남는 폭을 다 쓴다. 이름·검증은 코어 그대로다. */
.rtb-write-title {
	display: block; width: 100%; flex: none;
	height: 42px; padding: 0 13px; margin-bottom: 12px;
	font-size: 15px; font-weight: 600;
}
.rtb-write .rtb-editor { margin: 0; }
.rtb-write-extra { margin-top: 14px; overflow-x: auto; }
.rtb-write-extra table { width: 100%; border-collapse: collapse; font-size: 13px; }
.rtb-write-extra caption { padding-bottom: 6px; text-align: left; font-size: 12px; color: var(--rt-text-2, #7b8794); }
.rtb-write-extra th, .rtb-write-extra td {
	padding: 8px 10px; border: 1px solid var(--rt-border, #e2e6ea);
	color: var(--rt-text, #2b3440); text-align: left;
}
.rtb-write-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; font-size: 13px; }
.rtb-write-captcha { margin-top: 14px; }
/* 아래 오른쪽 두 단추. float 도 절대 위치도 큰 여백도 쓰지 않는다. */
.rtb-write-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; margin-top: 18px; }
.rtb-write-acts .rtb-btn-primary { -webkit-appearance: none; appearance: none; }
@media (max-width: 640px) {
	.rtb-read .rtb-write { padding: 16px var(--rtb-pad) 18px; }
	.rtb-write-title { height: 40px; font-size: 14.5px; }
	.rtb-write-head .rtb-select { flex: 1 1 100%; }
}

/* 답글·고치기처럼 판 하나만 뜨는 화면 (rev192).
   글 아래 댓글폼과 같은 판·같은 여백을 쓰고, 아래 여백만 조금 더 둔다 —
   레이아웃 footer 에 단추가 붙어 보이지 않게 하려는 것뿐이다.
   새 제목도, 안내 판도 넣지 않는다. */
.rtb-form-page { padding: 4px 0 24px; }

/* ── 글 머리 ─────────────────────────────────────────────── */
.rtb-doc-head { padding: 20px var(--rtb-pad) 16px; border-bottom: 1px solid var(--rt-border, #e2e6ea); }
.rtb-doc-title {
	margin: 0; font-size: 22px; line-height: 1.35; font-weight: 700;
	color: var(--rt-text, #2b3440); overflow-wrap: anywhere;
}
.rtb-doc-title .rtb-cat { vertical-align: 3px; margin-right: 8px; }
.rtb-doc-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 7px;
	margin-top: 10px; font-size: 12.5px; color: var(--rt-text-2, #7b8794);
}
.rtb-doc-meta .rtb-au-name { color: var(--rt-text, #2b3440); }

/* ── 확장 변수 ───────────────────────────────────────────── */
.rtb-doc-extra { padding: 12px var(--rtb-pad); border-bottom: 1px solid var(--rt-border-soft, #eef0f3); font-size: 13px; }
.rtb-doc-extra dl { display: flex; gap: 10px; margin: 0 0 6px; }
.rtb-doc-extra dl:last-child { margin-bottom: 0; }
.rtb-doc-extra dt { min-width: 120px; color: var(--rt-text-2, #7b8794); font-weight: 600; }
.rtb-doc-extra dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ── 본문 ────────────────────────────────────────────────
   글자색은 테마를 따르되, 회원이 편집기에서 **직접 고른 색은 덮지
   않는다** — 그래서 색을 상자에 걸고, 안쪽 요소에는 강제하지 않는다. */
.rtb-doc-body { padding: 22px var(--rtb-pad); }
.rtb-doc-content {
	min-height: 60px;
	color: var(--rt-text, #2b3440);
	font-size: 15px; line-height: 1.75;
	overflow-wrap: anywhere;
}
.rtb-doc-content a { color: var(--rt-green-text, #0f7a35); text-decoration: underline; }
.rtb-doc-content img,
.rtb-doc-content video,
.rtb-doc-content iframe { max-width: 100%; height: auto; }
.rtb-doc-content table { max-width: 100%; border-collapse: collapse; }
.rtb-doc-content pre,
.rtb-doc-content blockquote { max-width: 100%; overflow-x: auto; }
.rtb-doc-content blockquote {
	margin: 12px 0; padding: 8px 14px;
	border-left: 3px solid var(--rt-border, #e2e6ea); color: var(--rt-text-2, #7b8794);
}
.rtb-doc-content pre { padding: 12px; background: var(--rt-surface-2, #f4f6f8); border-radius: var(--rtb-radius); }
.rtb-doc-content hr { border: 0; border-top: 1px solid var(--rt-border-soft, #eef0f3); }

/* 비밀글 암호 입력 */
.rtb-secret { margin: 0; font-size: 13px; color: var(--rt-text-2, #7b8794); }
.rtb-secret p { margin: 0 0 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.rtb-secret .rtb-input { width: 180px; flex: 0 0 auto; }

/* ── 첨부 · 태그 · 서명 ──────────────────────────────────── */
.rtb-files { padding: 14px var(--rtb-pad); border-top: 1px solid var(--rt-border-soft, #eef0f3); font-size: 13px; }
.rtb-files.is-cmt { padding: 8px 0 0; border-top: 0; }
.rtb-files-title { margin: 0 0 6px; font-size: 13px; font-weight: 700; color: var(--rt-text-2, #7b8794); }
.rtb-files-title em { font-style: normal; color: var(--rt-green-text, #0f7a35); }
.rtb-files ul { display: flex; flex-direction: column; gap: 4px; }
.rtb-files a { color: var(--rt-text, #2b3440); text-decoration: underline; overflow-wrap: anywhere; }
.rtb-files a:hover { color: var(--rt-green-text, #0f7a35); }

.rtb-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--rtb-pad) 14px; }
.rtb-tag {
	display: inline-block; padding: 3px 9px; font-size: 12px;
	border: 1px solid var(--rt-border, #e2e6ea); border-radius: var(--rtb-radius);
	color: var(--rt-text-2, #7b8794);
}
.rtb-tag:hover { border-color: var(--rt-green, #0f7a35); color: var(--rt-green-text, #0f7a35); }

.rtb-sign { padding: 0 var(--rtb-pad) 14px; font-size: 12px; color: var(--rt-text-3, #a3adb8); }

/* ── 글 고치기·지우기 (rev185) ────────────────────────────
   본문 아래, 판의 오른쪽 아래에 선다. 권한이 없으면 이 상자 자체가
   만들어지지 않으므로 빈 자리도 남지 않는다.
   두 단추는 높이·라운드·글자가 같고, 지우기만 글자·테두리로 구분한다 —
   기본 상태에서 빨간 판을 깔지 않는다. */
.rtb-doc-tools { display: flex; justify-content: flex-end; gap: 8px; padding: 0 var(--rtb-pad) 18px; }
.rtb-btn-delete { color: var(--rt-danger, #b42318); }
.rtb-btn-delete:hover {
	color: var(--rt-danger, #b42318);
	border-color: var(--rt-danger, #b42318);
	background: var(--rt-danger-bg, #fdf3f3);
}
.rtb-btn-delete:focus-visible { outline: 2px solid var(--rt-danger, #b42318); outline-offset: 1px; }

/* ── 댓글 ────────────────────────────────────────────────── */
.rtb-cmt { padding: 0 0 18px; }
.rtb-cmt-title {
	margin: 0; padding: 16px var(--rtb-pad);
	font-size: 15px; font-weight: 700; color: var(--rt-text, #2b3440);
	border-bottom: 1px solid var(--rt-border, #e2e6ea);
}
.rtb-cmt-title em { font-style: normal; margin-left: 4px; color: var(--rt-green-text, #0f7a35); }

/* ── 댓글 한 줄 (rev188) ─────────────────────────────────
   카드나 굵은 테두리를 두지 않는다. 부모 댓글과 그 대댓글은 **한 덩이**로
   보이고, 다음 최상위 댓글이 시작되는 자리에만 얇은 선을 둔다. */
/* 세로 간격 (rev190).
   위아래 여백은 이 한 줄에서만 나온다 — 고정 높이도 `min-height` 도
   쓰지 않는다(원래도 없었다). 칸 높이는 내용이 정한다.
   대댓글은 위 여백을 0 으로 두어 **부모의 아래 여백 하나**만 사이에 남긴다.
   그래야 부모와 답글이 한 덩이로 붙고, 다음 최상위 댓글과의 사이만
   벌어진다. */
.rtb-cmt-item { padding: 14px var(--rtb-pad) 12px; }
.rtb-cmt-list > .rtb-cmt-item:not(.is-reply) + .rtb-cmt-item:not(.is-reply),
.rtb-cmt-list > .rtb-cmt-item.is-reply + .rtb-cmt-item:not(.is-reply) {
	border-top: 1px solid var(--rt-border-soft, #eef0f3);
}
/* 대댓글은 **들여쓰기와 답글 표시**로만 계층을 보인다. 왼쪽 굵은 선도,
   따로 깔린 배경도 없다. 깊이가 깊어져도 끝없이 좁아지지 않게 상한을 둔다
   (2단부터는 같은 자리에 선다). */
.rtb-cmt-item.is-reply { margin-left: 40px; padding-top: 0; padding-bottom: 8px; }
.rtb-cmt-item.is-depth2 { margin-left: 72px; }
.rtb-cmt-item.is-depth3,
.rtb-cmt-item.is-depth4,
.rtb-cmt-item.is-depth5 { margin-left: 96px; }

/* 머리 줄 — 왼쪽 작성자, 오른쪽 작성일시 (Flex 한 줄, 절대 위치 없음) */
.rtb-cmt-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	font-size: 12.5px; color: var(--rt-text-2, #7b8794);
}
.rtb-cmt-meta .rtb-au-name { color: var(--rt-text, #2b3440); }
.rtb-cmt-date { margin-left: auto; padding-left: 10px; white-space: nowrap; }
/* 답글 표시. **들여쓴 자리 안에** 서도록 자기 폭(13px)과 줄 간격(6px)만큼
   왼쪽으로 당긴다 — 그래야 닉네임과 본문의 시작점이 정확히 같다. */
.rtb-cmt-arrow {
	display: inline-flex; align-items: center;
	margin-left: -19px;
	color: var(--rt-text-3, #a3adb8);
}
.rtb-cmt-body {
	margin-top: 6px; color: var(--rt-text, #2b3440);
	font-size: 14px; line-height: 1.7; overflow-wrap: anywhere;
}
/* ── 등록 직후 노란 깜빡임 끄기 (rev238) ──────────────────
   댓글·답글을 올리면 코어가 `#comment_{번호}` 로 돌아온다. 그때
   **ncenterlite 모듈**(`modules/ncenterlite/tpl/js/ncenterlite.js`)의
   `ncenterlite_highlight()` 가 주소의 그 번호로 요소를 찾아

       y(this, [255,255,60], [255,255,255], 750, c);

   즉 `rgb(255,255,60)`(노랑)에서 흰색으로 750ms 동안 **인라인
   `style.backgroundColor` 를 30ms 간격으로 갈아 끼운다.** 그래서 방금 쓴
   댓글만 잠깐 노랗게 번졌다 사라졌다. CSS 에는 그런 규칙이 없다 — 그
   색은 자바스크립트가 요소에 직접 쓰는 값이다.

   찾는 대상은 `class="comment_{댓글번호}_{회원번호}"` 인 `.xe_content` 로,
   우리 스킨에서는 `.rtb-cmt-body` 바로 아래 본문 상자가 그것이다.

   그 모듈의 자바스크립트는 **건드리지 않는다**(알림 기능이 함께 들어 있다).
   여기서는 이 게시판 댓글 본문의 배경만 못 박아 색이 보이지 않게 한다 —
   원래도 배경이 없는 상자라 평소 모습은 그대로이고, 등록 뒤 그 자리로
   이동하는 동작(`#comment_…`)도 그대로다.

   ⚠ `!important` 를 쓴 이유는 상대가 **인라인 스타일**이기 때문이다.
     인라인은 특이도로 이길 수 없다. 범위는 이 스킨의 읽기 화면 안,
     댓글 본문 바로 아래 한 겹으로 좁혀 두었다. */
.rtb-read .rtb-cmt-body > .xe_content { background-color: transparent !important; }
/* 본문 안쪽 첫·마지막 덩이의 바깥 여백을 죽인다 (rev190).
   ⚠ 여기가 "댓글이 멀어 보이던" 진짜 원인이다. 편집기가 남긴 `<p>` 는
     위아래 14px 여백을 갖는데, 이 상자에 테두리도 안쪽 여백도 없어 그
     여백이 **상자 밖으로 새어 나와**(margin collapsing) 위 6px · 아래 8px
     로 잡아 둔 값을 각각 14px 로 밀어 올리고 있었다. 문단 사이 여백은
     그대로 두고 첫·마지막만 없앤다. */
.rtb-cmt-body > *:first-child { margin-top: 0; }
.rtb-cmt-body > *:last-child { margin-bottom: 0; }
.rtb-cmt-body.is-deleted { color: var(--rt-text-3, #a3adb8); font-style: italic; }
.rtb-cmt-body a { color: var(--rt-green-text, #0f7a35); text-decoration: underline; }
.rtb-cmt-body img { max-width: 100%; height: auto; }
/* ── 댓글 액션 (rev186) ──────────────────────────────────
   댓글 본문 **아래 오른쪽**에 선다. float 도 절대 위치도 큰 여백도 쓰지
   않는다 — flex 한 줄에 `justify-content: flex-end` 뿐이다. 추천 수는
   있을 때만 나오고 자동 여백으로 왼쪽에 남는다.
   배경 없는 작은 텍스트 액션이고, 손이 닿을 자리를 주려고 안쪽 여백만
   조금 둔다. */
.rtb-cmt-acts {
	display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end;
	gap: 2px 6px; margin: 10px 0 0; font-size: 12px;
}
.rtb-cmt-vote { margin-right: auto; }
.rtb-cmt-act {
	display: inline-flex; align-items: center; gap: 5px;
	padding: 4px 6px; border-radius: 5px;
	color: var(--rt-text-2, #7b8794); font-weight: 600; line-height: 1;
}
.rtb-cmt-act svg { flex: 0 0 auto; }
.rtb-cmt-act:hover { color: var(--rt-green-text, #0f7a35); background: var(--rt-surface-2, #f4f6f8); }
.rtb-cmt-act:focus-visible { outline: 2px solid var(--rt-green, #0f7a35); outline-offset: 1px; color: var(--rt-green-text, #0f7a35); }
.rtb-cmt-act.is-delete:hover { color: var(--rt-danger, #b42318); background: var(--rt-danger-bg, #fdf3f3); }
.rtb-cmt-act.is-delete:focus-visible { outline-color: var(--rt-danger, #b42318); color: var(--rt-danger, #b42318); }
.rtb-cmt-page { justify-content: center; padding: 14px var(--rtb-pad) 0; }
.rtb-cmt-quote { padding-bottom: 14px; }
.rtb-cmt-quote .rtb-cmt-meta { padding: 14px var(--rtb-pad) 0; }
.rtb-cmt-quote .rhymix_content,
.rtb-cmt-quote .xe_content { padding: 6px var(--rtb-pad) 0; color: var(--rt-text-2, #7b8794); font-size: 14px; }

/* ── 댓글 쓰기 ───────────────────────────────────────────── */
.rtb-cmt-form { padding: 16px var(--rtb-pad) 0; }
.rtb-cmt-fields { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; font-size: 13px; }
.rtb-field { display: inline-flex; align-items: center; gap: 6px; color: var(--rt-text-2, #7b8794); }
.rtb-field .rtb-input { width: 150px; }
.rtb-check { display: inline-flex; align-items: center; gap: 5px; color: var(--rt-text-2, #7b8794); }
.rtb-captcha { margin-top: 12px; }
/* 등록 단추는 **댓글폼 오른쪽 끝**이다 (rev182). float 도 큰 여백도 쓰지
   않는다 — 폼 안쪽 폭을 기준으로 flex 가 밀어 준다. 좁은 화면에서도
   전체 폭으로 늘리지 않는다(문구만큼만). */
/* 등록·취소 단추 자리 (rev237).

   예전에는 JS 가 이 단추들을 첨부 줄로 옮겼다. 그 이동이 첫 누름을 삼켜
   답글이 두 번 눌러야 등록됐으므로 이동을 없앴다(`js/rtboard.js` 참고).
   단추는 템플릿이 놓아 준 이 자리에 그대로 있고, **보이는 배치만** 여기서
   맡는다 — 마크업 순서가 이미 `본문 → 첨부 → 등록·취소` 라 오른쪽으로
   정렬하면 옮겼을 때와 같은 모양이 된다.
   `gap` 은 예전에 `.rtb-cmt-cancel { margin-left: 8px }` 가 하던 몫이다. */
.rtb-cmt-submit { display: flex; justify-content: flex-end; align-items: center; gap: 8px; margin-top: 14px; }
/* 로그인 회원은 이 줄에 남는 것이 없을 수 있다. 빈 줄이 여백만 만들지
   않게 접는다(`Notification` 을 걷어낸 뒤 생긴 자리다). */
.rtb-cmt-fields:empty { display: none; margin: 0; }

/* ── CKEditor · 첨부 영역 (rev183) ──────────────────────────
   ─────────────────────────────────────────────────────────────────
   왜 특이도를 한 단계 올렸나
   ─────────────────────────────────────────────────────────────────
   이 게시판이 쓰는 에디터 스킨은 **moono-lisa** 이고, 그 위에 Rhymix 의
   `ckeditor.scss` 가 `.color_scheme_dark.cke_auto_dark_mode …` 로 자기
   다크를 덧칠한다(클래스 넷짜리 선택자다). 그 색 구성은 **사이트 테마와
   별개**로 정해져서, 화면은 밝은데 툴바·상태줄·첨부만 짙은 회색으로 남는
   일이 생긴다.

   그래서 여기서는 `html[data-theme]` 를 앞에 두고 `.rtb-editor` 를 두 번
   적어(같은 클래스를 겹쳐 적는 것은 특이도를 올리는 정식 방법이다) 저
   규칙들보다 확실히 뒤에 서게 한다. 값은 전부 사이트 토큰이라 라이트·
   다크가 한 벌로 따라온다. 범위는 `.rtb-read` 안이므로 다른 모듈의
   에디터에는 닿지 않는다.
   ───────────────────────────────────────────────────────────────── */
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke,
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_chrome {
	border-color: var(--rt-border, #e2e6ea);
	border-radius: var(--rtb-radius);
	overflow: hidden;
	box-shadow: none;
}
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_inner,
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_contents { background: var(--rt-surface, #ffffff); }

/* 툴바 · 상태줄 */
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_top,
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_bottom {
	background: var(--rt-surface-2, #f4f6f8);
	border-color: var(--rt-border, #e2e6ea);
	color: var(--rt-text-2, #7b8794);
	box-shadow: none;
}
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_button_label,
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_path_item,
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_path_empty,
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_voice_label { color: var(--rt-text-2, #7b8794); }
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_toolgroup,
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_combo_button {
	background: transparent; border-color: var(--rt-border, #e2e6ea); box-shadow: none;
}
/* 도구 사이 구분선 */
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_toolbar_separator { background: var(--rt-border, #e2e6ea); }
/* 손이 닿았을 때 · 눌린 상태 · 못 쓰는 단추 */
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_button:hover,
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_button:focus,
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_button__source:hover,
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_combo:hover a.cke_combo_button,
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_combo_on a.cke_combo_button {
	background: var(--rt-surface-3, #eef1f5); border-color: var(--rt-border, #e2e6ea);
}
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_button_on {
	background: var(--rt-surface-3, #eef1f5);
	border-color: var(--rt-green, #0f7a35);
	box-shadow: none;
}
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_button_disabled .cke_button_icon { opacity: .35; }
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_button:focus,
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_combo_button:focus { outline: 2px solid var(--rt-green, #0f7a35); outline-offset: -2px; }
/* ── 툴바의 글자 항목: Font · Size · Source (rev195) ────────
   실제 DOM 을 재어 보고 적는다(추측한 이름은 쓰지 않는다).

     · `Font` · `Size` — 보이는 것은 `.cke_combo_text` 다.
       같은 칸의 `.cke_combo_label` 은 moono-lisa 가 `display:none` 으로
       감춰 두므로 화면에 나오지 않는다(둘 다 적어 두면 어느 설정에서
       라벨이 보이더라도 같은 색이 된다).
     · 화살표 `.cke_combo_arrow` 는 글자가 아니라 **CSS 삼각형**이다
       (moono-lisa: `border-top:3px solid`, 색 선언 없음 → 상속색).
       그래서 `border-top-color` 로 적는다.
     · `Source` — moono-lisa 는 단추 글자(`.cke_button_label`)를 감추지만
       Source 단추만 보이게 두고, 색은 `.cke_button_label{color:#484848}`
       한 줄이 정한다. 어두운 화면에서 이 값이 갈색처럼 보이던 자리다.
       아이콘(B · I · U 등)은 스프라이트라 여기서 손대지 않는다.

   범위는 **이 게시판 안의 에디터 뼈대**(`.rtb-read .cke_chrome`)다.
   글 아래 댓글폼 · 그 자리에서 여는 답글·고치기 판 · 따로 뜨는 답글·
   고치기 화면이 모두 `.rtb-read` 안이라 여섯 화면이 한 규칙을 쓰고,
   다른 스킨·다른 모듈의 에디터에는 닿지 않는다.

   `!important` 는 **이 다섯 줄의 색에만** 쓴다. CKEditor 는 자기 스킨
   CSS(`editor.css`)를 실행 시간에 `<head>` 맨 뒤로 넣고, 화면에 따라
   `.cke_reset_all` 계열 규칙이 더 늦게 얹히는 경우가 있어 순서로는 이길
   수 없다. 배경·테두리·아이콘에는 쓰지 않는다. */
.rtb-read .cke_chrome,
.rtb-cke {
	--rtb-cke-ink: var(--rt-text, #2b3440);          /* 평상시 글자 */
	--rtb-cke-ink-strong: #111827;                   /* 손이 닿았을 때 */
	--rtb-cke-ink-soft: #94a3b8;                     /* 못 쓰는 상태(두 테마 공통) */
	--rtb-cke-arrow: var(--rt-text-2, #7b8794);
}
html[data-theme="dark"] .rtb-read .cke_chrome,
html[data-theme="dark"] .rtb-cke { --rtb-cke-ink-strong: #ffffff; }

html[data-theme] .rtb-read .cke_chrome .cke_combo_text,
html[data-theme] .rtb-read .cke_chrome .cke_combo_label,
html[data-theme] .rtb-read .cke_chrome .cke_button__source .cke_button_label,
html[data-theme] .rtb-read .cke_chrome .cke_button__sourcedialog .cke_button_label {
	color: var(--rtb-cke-ink) !important;
}
html[data-theme] .rtb-read .cke_chrome .cke_combo_arrow {
	border-top-color: var(--rtb-cke-arrow) !important;
}
/* 손이 닿았을 때·펼쳤을 때·Source 를 켠 상태 — 한 단계 더 또렷해진다.
   초록은 쓰지 않는다(이 셋은 일반 도구지 강조 동작이 아니다). */
html[data-theme] .rtb-read .cke_chrome .cke_combo:hover .cke_combo_text,
html[data-theme] .rtb-read .cke_chrome .cke_combo_button:focus .cke_combo_text,
html[data-theme] .rtb-read .cke_chrome .cke_combo_on .cke_combo_text,
html[data-theme] .rtb-read .cke_chrome .cke_button__source:hover .cke_button_label,
html[data-theme] .rtb-read .cke_chrome .cke_button__source:focus .cke_button_label,
html[data-theme] .rtb-read .cke_chrome .cke_button__source.cke_button_on .cke_button_label {
	color: var(--rtb-cke-ink-strong) !important;
}
html[data-theme] .rtb-read .cke_chrome .cke_combo:hover .cke_combo_arrow,
html[data-theme] .rtb-read .cke_chrome .cke_combo_button:focus .cke_combo_arrow,
html[data-theme] .rtb-read .cke_chrome .cke_combo_on .cke_combo_arrow {
	border-top-color: var(--rtb-cke-ink-strong) !important;
}
/* 못 쓰는 상태 — 활성보다 흐리되 바탕에 묻히지는 않는다. */
html[data-theme] .rtb-read .cke_chrome .cke_combo_disabled .cke_combo_text,
html[data-theme] .rtb-read .cke_chrome .cke_button_disabled .cke_button_label {
	color: var(--rtb-cke-ink-soft) !important;
	opacity: 1;
}
html[data-theme] .rtb-read .cke_chrome .cke_combo_disabled .cke_combo_arrow {
	border-top-color: var(--rtb-cke-ink-soft) !important;
}
/* moono-lisa 는 못 쓰는 고르개의 글자·화살표를 `opacity:.3` 으로 지운다
   (`.cke_combo_disabled .cke_combo_inlinelabel,.cke_combo_disabled
   .cke_combo_open{opacity:.3}`). 어두운 바탕에서는 그 값이 곧 "안 보임"
   이라, 흐리되 읽히는 정도로만 되돌린다. */
html[data-theme] .rtb-read .cke_chrome .cke_combo_disabled .cke_combo_open { opacity: .65; }

/* ── 같은 규칙을 **에디터 뼈대 표식**에도 건다 (rev197) ──────
   위 규칙은 바깥 상자(`.rtb-read`)를 전제로 한다. 화면에 따라 그 상자가
   없거나(따로 뜨는 화면) 스타일시트가 늦게 실리는 경우까지 확실히 잡으려고,
   `rtboard.js` 가 **우리 에디터의 뼈대에만** 붙이는 `rtb-cke` 표식으로도
   같은 색을 건다. 값은 위와 한 벌이라 두 곳을 따로 고칠 일이 없다.
   다른 모듈·기본 스킨의 에디터에는 이 표식이 붙지 않는다. */
.rtb-cke .cke_combo_text,
.rtb-cke .cke_combo_label,
.rtb-cke .cke_button__source .cke_button_label,
.rtb-cke .cke_button__sourcedialog .cke_button_label {
	color: var(--rtb-cke-ink) !important;
}
.rtb-cke .cke_combo_arrow { border-top-color: var(--rtb-cke-arrow) !important; }
.rtb-cke .cke_combo:hover .cke_combo_text,
.rtb-cke .cke_combo_button:focus .cke_combo_text,
.rtb-cke .cke_combo_on .cke_combo_text,
.rtb-cke .cke_button__source:hover .cke_button_label,
.rtb-cke .cke_button__source:focus .cke_button_label,
.rtb-cke .cke_button__source.cke_button_on .cke_button_label {
	color: var(--rtb-cke-ink-strong) !important;
}
.rtb-cke .cke_combo:hover .cke_combo_arrow,
.rtb-cke .cke_combo_button:focus .cke_combo_arrow,
.rtb-cke .cke_combo_on .cke_combo_arrow {
	border-top-color: var(--rtb-cke-ink-strong) !important;
}
.rtb-cke .cke_combo_disabled .cke_combo_text,
.rtb-cke .cke_button_disabled .cke_button_label {
	color: var(--rtb-cke-ink-soft) !important;
	opacity: 1;
}
.rtb-cke .cke_combo_disabled .cke_combo_arrow { border-top-color: var(--rtb-cke-ink-soft) !important; }
.rtb-cke .cke_combo_disabled .cke_combo_open { opacity: .65; }


/* 크기 조절 손잡이 — 배경에 묻히지 않게 */
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_resizer { opacity: .6; }
/* 소스 모드 — iframe 이 아니라 여기서 칠한다. */
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_source {
	background: var(--rt-surface, #ffffff); color: var(--rt-text, #2b3440);
	border: 0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* 첨부 영역(코어 파일 업로드 컴포넌트) */
html[data-theme] .rtb-read .xefu-container,
html[data-theme] .rtb-read .xefu-container .xefu-dropzone,
html[data-theme] .rtb-read .xefu-container .xefu-list,
html[data-theme] .rtb-read .xefu-container .xefu-list-files,
html[data-theme] .rtb-read .xefu-container .xefu-list-images {
	background: var(--rt-surface, #ffffff);
	border-color: var(--rt-border, #e2e6ea);
	color: var(--rt-text-2, #7b8794);
}
html[data-theme] .rtb-read .xefu-container .xefu-dropzone-message,
html[data-theme] .rtb-read .xefu-container .xefu-progress-status,
html[data-theme] .rtb-read .xefu-container p { color: var(--rt-text-2, #7b8794); }
/* ── 첨부 단추 · 등록 단추 한 줄 (rev187) ──────────────────
   첨부 단추는 `Add Comment` 와 **같은 초록 단추**다(랭킹 계열). 코어
   업로더 CSS 가 높이·여백을 `!important` 로 못 박아 두어서, 그 두 가지만
   같은 방식으로 되돌린다 — 다른 속성에는 쓰지 않는다.
   마크업은 그대로 두고 클래스에만 옷을 입힌다(파일 input 과의 연결·클릭·
   드래그 동작을 건드리지 않는다). */
html[data-theme] .rtb-read .xefu-container .xefu-btn {
	display: inline-flex; align-items: center; justify-content: center;
	height: var(--rtb-ctl-h) !important;
	padding: 0 14px !important;
	border: 1px solid var(--rt-green, #0f7a35);
	border-radius: var(--rtb-radius);
	background: var(--rt-green, #0f7a35);
	background-image: none;
	color: #ffffff;
	font-size: 13px; font-weight: 600; line-height: 1;
	white-space: nowrap; box-shadow: none; text-shadow: none;
}
html[data-theme] .rtb-read .xefu-container .xefu-btn:hover,
html[data-theme] .rtb-read .xefu-container .xefu-btn:active {
	background: #0c6a2d; background-image: none; border-color: #0c6a2d; color: #ffffff;
}
html[data-theme] .rtb-read .xefu-container .xefu-btn:focus-within { outline: 2px solid var(--rt-green, #0f7a35); outline-offset: 1px; }
/* 코어가 안쪽 span 에 음수 여백을 준다 — 문구를 가운데 두려면 풀어야 한다. */
html[data-theme] .rtb-read .xefu-container .xefu-btn > span {
	display: inline-flex; align-items: center; justify-content: center;
	margin: 0 !important; padding: 0 !important;
	height: auto; line-height: 1;
	background: none; border: 0; color: inherit;
	font-size: 13px; font-weight: 600; white-space: nowrap;
}
/* 왼쪽 파일 아이콘은 두지 않는다(문구를 정확히 가운데 두기 위해서다). */
html[data-theme] .rtb-read .xefu-container .xefu-btn .xi-icon { display: none; }

/* 첨부 줄 — 왼쪽 [단추][안내], 오른쪽 [Add Comment]. 위아래 여백은 줄인다. */
html[data-theme] .rtb-read .xefu-container .xefu-dropzone {
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
	padding: 10px 12px;
}
html[data-theme] .rtb-read .xefu-container p.xefu-dropzone-message {
	margin: 0 !important; line-height: 1.4; font-size: 12.5px;
}
/* 옮겨 온 등록 단추는 이 줄의 오른쪽 끝에 선다(자동 여백만 쓴다). */
/* `.rtb-cmt-send` · 첨부 줄 안의 단추 규칙은 지웠다 (rev237) — 단추를
   그 줄로 옮기지 않으므로 어떤 요소에도 붙지 않는 규칙이 된다. */
/* 옮겨 온 취소 단추는 등록 단추 바로 오른쪽에 붙는다. */
/* 단추가 옮겨 가면 원래 줄은 비므로 접는다. */
.rtb-cmt-submit:empty { display: none; margin: 0; }

/* ── 그 자리에서 여는 답글·고치기 판 (rev194) ──────────────
   글 아래 댓글폼과 **같은 판**이다 — 테두리·바탕·안쪽 여백이 같고,
   색은 사이트 토큰이라 테마를 따라간다. 답글용은 대댓글과 같은 만큼
   들여쓴다(좁은 화면에서는 대댓글과 같은 값으로 줄인다). */
.rtb-cmt-inline {
	margin-top: 12px;
	border: 1px solid var(--rt-border, #e2e6ea);
	border-radius: var(--rtb-radius);
	background: var(--rt-surface, #ffffff);
	overflow: hidden;
}
.rtb-cmt-inline.is-reply-form { margin-left: 40px; }
.rtb-cmt-inline .rtb-cmt-form { padding: 14px var(--rtb-pad); }
.rtb-cmt-inline .rtb-cmt-form > .rtb-editor { min-width: 0; }
@media (max-width: 640px) {
	.rtb-cmt-inline.is-reply-form { margin-left: 22px; }
	.rtb-cmt-inline .rtb-cmt-form { padding: 12px var(--rtb-pad); }
}

/* 어두운 화면 — 아이콘은 스프라이트라 색을 줄 수 없어 밝기로 다룬다. */
/* ⚠ `.cke_combo_open`(화살표를 담는 칸)은 여기서 뺐다 (rev194).
     그 안의 삼각형은 스프라이트가 아니라 CSS 테두리라, 뒤집기를 씌우면
     위에서 정한 색까지 함께 뒤집혀 다시 어두워진다. 색은 위에서 준다. */
html[data-theme="dark"] .rtb-read .rtb-editor.rtb-editor .cke_button_icon,
html[data-theme="dark"] .rtb-read .rtb-editor.rtb-editor .cke_resizer,
html[data-theme="dark"] .rtb-read .xefu-container .xi-icon { filter: invert(1) brightness(1.7) grayscale(.15); }
html[data-theme="dark"] .rtb-read .rtb-editor.rtb-editor .cke_source { color: var(--rt-text, #e4e8ee); }

/* ── 툴바 글자에 걸린 뒤집기를 걷어낸다 (rev238) ─────────────
   `Styles` · `Format` · `Font` · `Size` · `Source` 다섯 글자만 테마를
   따라오지 않던 자리다. **색은 이미 맞다** — 위(rev195)에서 준 값이
   그대로 계산된다. 그 뒤에 픽셀이 뒤집힌다.

   Rhymix 의 `modules/editor/skins/ckeditor/css/ckeditor.scss` 는
   `body` 에 `color_scheme_dark cke_auto_dark_mode` 가 붙으면 툴바 안의
   네 가지에 `filter: invert(1)` 을 건다 —
   `.cke_button_icon` · `.cke_combo_button` · `.cke_button_arrow` ·
   `.cke_button_label`. 아이콘은 스프라이트라 그 뒤집기가 필요해서 바로
   위에서 우리 값으로 다시 적어 두었지만, 나머지 둘은 손대지 않아
   그대로 남아 있었다.

     · `.cke_combo_button` — `Styles` · `Format` · `Font` · `Size` 글자
       (`.cke_combo_text`)를 **담고 있는 칸**이다. 칸이 뒤집히면 그 안의
       글자도 함께 뒤집힌다.
     · `.cke_button_label` — `Source` 글자 **그 자신**이다.

   `filter` 는 계단(cascade)이 끝난 뒤 그려진 픽셀에 걸리므로 `color` 로는
   이길 수 없다. 그래서 색을 새로 정하지 않고 **뒤집기만 걷어낸다** —
   위에서 준 `--rtb-cke-ink` 가 그대로 화면에 나온다.

   ⚠ `[data-theme="dark"]` 로 좁히지 않는다. 뒤집기를 켜는 것은 사이트
     테마가 아니라 **브라우저·운영체제의 `prefers-color-scheme`**
     (`body.color_scheme_dark`)이라, 화면이 라이트여도 걸릴 수 있다.
     저 규칙은 클래스 다섯(0,5,0)이므로 아이콘 줄과 같은 사슬(0,5,1)이면
     `!important` 없이 이긴다.
     아이콘·펼친 고르개(Dropdown)에는 닿지 않는다 — 아이콘은 바로 위
     규칙이 이미 자기 값을 갖고 있고, 고르개 목록은 `.cke_top` 바깥의
     iframe 이라 이 뒤집기 자체가 걸리지 않는다. */
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_combo_button,
html[data-theme] .rtb-read .rtb-editor.rtb-editor .cke_button_label { filter: none; }

/* ── 좁은 화면 ───────────────────────────────────────────── */
@media (max-width: 640px) {
	.rtb-doc-title { font-size: 19px; }
	.rtb-doc-body { padding: 16px var(--rtb-pad); }
	.rtb-doc-content { font-size: 14.5px; }
	/* 좁은 화면 — 세로 여백을 한 단계 더 줄인다 (rev190).
	   손가락이 닿을 자리는 액션 단추의 안쪽 여백이 갖고 있으므로
	   줄이는 것은 칸의 위아래 여백뿐이다. */
	.rtb-cmt-item { padding-top: 12px; padding-bottom: 10px; }
	.rtb-cmt-acts { margin-top: 8px; }
	/* 좁은 화면 — 들여쓰기를 줄여 본문 폭을 남긴다(상한도 함께 낮춘다). */
	.rtb-cmt-item.is-reply { margin-left: 22px; padding-top: 0; padding-bottom: 8px; }
	.rtb-cmt-item.is-depth2 { margin-left: 36px; }
	.rtb-cmt-item.is-depth3,
	.rtb-cmt-item.is-depth4,
	.rtb-cmt-item.is-depth5 { margin-left: 44px; }
	/* 날짜는 자리가 없으면 작성자 줄 아래 오른쪽으로 내려간다. */
	.rtb-cmt-date { padding-left: 0; }
	/* 액션 세 개가 좁은 화면에서도 한 줄에 남도록 글자와 간격만 줄인다. */
	.rtb-cmt-acts { gap: 2px 2px; font-size: 11.5px; }
	.rtb-cmt-act { gap: 4px; padding: 4px 4px; }
	.rtb-field { flex: 1 1 100%; }
	.rtb-field .rtb-input { flex: 1 1 auto; width: auto; min-width: 0; }

	/* 첨부 줄 — 좁으면 안내 문구를 접고, 등록 단추는 오른쪽에 남는다.
	   첨부 단추와 업로드 기능은 그대로 둔다. */
	html[data-theme] .rtb-read .xefu-container p.xefu-dropzone-message { display: none; }
	html[data-theme] .rtb-read .xefu-container .xefu-dropzone { gap: 8px; padding: 8px 10px; }
}