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

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

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

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

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

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

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

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

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

	/* 랭킹 단추 규격 */
	--t3b-ctl-h: 33px;
	--t3b-radius: 6px;
	--t3b-line-idle: var(--gp-border, #dfe3e8);
	--t3b-ink-idle: var(--gp-muted, #5a6b80);

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

/* 화면에 보이지 않지만 읽어 주는 이름표 */
.t3b-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 라운드, 표면색. 큰 패널로 만들지 않는다. */
.t3b-panel {
	min-width: 0;
	background: var(--t3-surface, var(--gp-surface, #ffffff));
	border: 1px solid var(--t3-border, var(--gp-border, #e2e6ea));
	border-radius: var(--t3b-radius);
	overflow: hidden;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.t3b-cat {
	display: inline-block; padding: 3px 10px; border-radius: var(--t3b-radius);
	background: var(--gp-border, #e2e6ea); color: var(--gp-text, #172033);
	font-size: 12px; font-weight: 700;
	max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.t3b-cat.is-soccer { background: var(--gp-accent, #2563eb); color: var(--gp-surface, #ffffff); }
.t3b-cat.is-nba { background: #a4501a; color: var(--gp-surface, #ffffff); }
.t3b-cat.is-mlb { background: var(--gp-hover, #1d4ed8); color: var(--gp-surface, #ffffff); }
.t3b-cat.is-general { background: #4c3a91; color: var(--gp-surface, #ffffff); }
.t3b-cat.is-official { background: var(--gp-text, #4a4f57); color: var(--gp-surface, #ffffff); }

/* 제목 (rev227).

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

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

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

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

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

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

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

.t3b-empty { margin: 0; padding: 56px 20px; text-align: center; color: var(--t3-text-2, var(--gp-muted, #6b7280)); }

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

.t3b-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 var(--t3b-pad) 14px; }
.t3b-tag {
	display: inline-block; padding: 3px 9px; font-size: 12px;
	border: 1px solid var(--t3-border, var(--gp-border, #e2e6ea)); border-radius: var(--t3b-radius);
	color: var(--t3-text-2, var(--gp-muted, #6b7280));
}
.t3b-tag:hover { border-color: var(--t3-green, var(--gp-accent, #2563eb)); color: var(--t3-green-text, var(--gp-accent, #2563eb)); }

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

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

/* ── 댓글 ────────────────────────────────────────────────── */
.t3b-cmt { padding: 0 0 18px; }
.t3b-cmt-title {
	margin: 0; padding: 16px var(--t3b-pad);
	font-size: 15px; font-weight: 700; color: var(--t3-text, var(--gp-text, #172033));
	border-bottom: 1px solid var(--t3-border, var(--gp-border, #e2e6ea));
}
.t3b-cmt-title em { font-style: normal; margin-left: 4px; color: var(--t3-green-text, var(--gp-accent, #2563eb)); }

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

/* 머리 줄 — 왼쪽 작성자, 오른쪽 작성일시 (Flex 한 줄, 절대 위치 없음) */
.t3b-cmt-meta {
	display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
	font-size: 12.5px; color: var(--t3-text-2, var(--gp-muted, #6b7280));
}
.t3b-cmt-meta .t3b-au-name { color: var(--t3-text, var(--gp-text, #172033)); }
.t3b-cmt-date { margin-left: auto; padding-left: 10px; white-space: nowrap; }
/* 답글 표시. **들여쓴 자리 안에** 서도록 자기 폭(13px)과 줄 간격(6px)만큼
   왼쪽으로 당긴다 — 그래야 닉네임과 본문의 시작점이 정확히 같다. */
.t3b-cmt-arrow {
	display: inline-flex; align-items: center;
	margin-left: -19px;
	color: var(--t3-text-3, var(--gp-muted, #a3adb8));
}
.t3b-cmt-body {
	margin-top: 6px; color: var(--t3-text, var(--gp-text, #172033));
	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` 로,
   우리 스킨에서는 `.t3b-cmt-body` 바로 아래 본문 상자가 그것이다.

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

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

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

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

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

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

/* 툴바 · 상태줄 */
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_top,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_bottom {
	background: var(--t3-surface-2, var(--gp-soft, #f4f6f8));
	border-color: var(--t3-border, var(--gp-border, #e2e6ea));
	color: var(--t3-text-2, var(--gp-muted, #6b7280));
	box-shadow: none;
}
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_button_label,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_path_item,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_path_empty,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_voice_label { color: var(--t3-text-2, var(--gp-muted, #6b7280)); }
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_toolgroup,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_combo_button {
	background: transparent; border-color: var(--t3-border, var(--gp-border, #e2e6ea)); box-shadow: none;
}
/* 도구 사이 구분선 */
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_toolbar_separator { background: var(--t3-border, var(--gp-border, #e2e6ea)); }
/* 손이 닿았을 때 · 눌린 상태 · 못 쓰는 단추 */
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_button:hover,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_button:focus,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_button__source:hover,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_combo:hover a.cke_combo_button,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_combo_on a.cke_combo_button {
	background: var(--t3-surface-3, var(--gp-soft, #eef1f5)); border-color: var(--t3-border, var(--gp-border, #e2e6ea));
}
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_button_on {
	background: var(--t3-surface-3, var(--gp-soft, #eef1f5));
	border-color: var(--t3-green, var(--gp-accent, #2563eb));
	box-shadow: none;
}
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_button_disabled .cke_button_icon { opacity: .35; }
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_button:focus,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_combo_button:focus { outline: 2px solid var(--t3-green, var(--gp-accent, #2563eb)); 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:var(--gp-text, #484848)}`
       한 줄이 정한다. 어두운 화면에서 이 값이 갈색처럼 보이던 자리다.
       아이콘(B · I · U 등)은 스프라이트라 여기서 손대지 않는다.

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

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

html[data-theme] .t3b-read .cke_chrome .cke_combo_text,
html[data-theme] .t3b-read .cke_chrome .cke_combo_label,
html[data-theme] .t3b-read .cke_chrome .cke_button__source .cke_button_label,
html[data-theme] .t3b-read .cke_chrome .cke_button__sourcedialog .cke_button_label {
	color: var(--t3b-cke-ink) !important;
}
html[data-theme] .t3b-read .cke_chrome .cke_combo_arrow {
	border-top-color: var(--t3b-cke-arrow) !important;
}
/* 손이 닿았을 때·펼쳤을 때·Source 를 켠 상태 — 한 단계 더 또렷해진다.
   초록은 쓰지 않는다(이 셋은 일반 도구지 강조 동작이 아니다). */
html[data-theme] .t3b-read .cke_chrome .cke_combo:hover .cke_combo_text,
html[data-theme] .t3b-read .cke_chrome .cke_combo_button:focus .cke_combo_text,
html[data-theme] .t3b-read .cke_chrome .cke_combo_on .cke_combo_text,
html[data-theme] .t3b-read .cke_chrome .cke_button__source:hover .cke_button_label,
html[data-theme] .t3b-read .cke_chrome .cke_button__source:focus .cke_button_label,
html[data-theme] .t3b-read .cke_chrome .cke_button__source.cke_button_on .cke_button_label {
	color: var(--t3b-cke-ink-strong) !important;
}
html[data-theme] .t3b-read .cke_chrome .cke_combo:hover .cke_combo_arrow,
html[data-theme] .t3b-read .cke_chrome .cke_combo_button:focus .cke_combo_arrow,
html[data-theme] .t3b-read .cke_chrome .cke_combo_on .cke_combo_arrow {
	border-top-color: var(--t3b-cke-ink-strong) !important;
}
/* 못 쓰는 상태 — 활성보다 흐리되 바탕에 묻히지는 않는다. */
html[data-theme] .t3b-read .cke_chrome .cke_combo_disabled .cke_combo_text,
html[data-theme] .t3b-read .cke_chrome .cke_button_disabled .cke_button_label {
	color: var(--t3b-cke-ink-soft) !important;
	opacity: 1;
}
html[data-theme] .t3b-read .cke_chrome .cke_combo_disabled .cke_combo_arrow {
	border-top-color: var(--t3b-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] .t3b-read .cke_chrome .cke_combo_disabled .cke_combo_open { opacity: .65; }

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


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

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

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

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

/* 어두운 화면 — 아이콘은 스프라이트라 색을 줄 수 없어 밝기로 다룬다. */
/* ⚠ `.cke_combo_open`(화살표를 담는 칸)은 여기서 뺐다 (rev194).
     그 안의 삼각형은 스프라이트가 아니라 CSS 테두리라, 뒤집기를 씌우면
     위에서 정한 색까지 함께 뒤집혀 다시 어두워진다. 색은 위에서 준다. */
html[data-theme="dark"] .t3b-read .t3b-editor.t3b-editor .cke_button_icon,
html[data-theme="dark"] .t3b-read .t3b-editor.t3b-editor .cke_resizer,
html[data-theme="dark"] .t3b-read .xefu-container .xi-icon { filter: invert(1) brightness(1.7) grayscale(.15); }
html[data-theme="dark"] .t3b-read .t3b-editor.t3b-editor .cke_source { color: var(--t3-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` 로는
   이길 수 없다. 그래서 색을 새로 정하지 않고 **뒤집기만 걷어낸다** —
   위에서 준 `--t3b-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] .t3b-read .t3b-editor.t3b-editor .cke_combo_button,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_button_label { filter: none; }

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

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

/* ── GoodPick365 에디터 네이비 테마 (rev254) ────────────────
   코어 CKEditor와 업로더 마크업은 그대로 두고 이 게시판의 `.t3b-read`
   안에서만 색·간격·상태를 정리한다. iframe 안에는 t3board.js가 아래
   전용 토큰을 복사하므로 visual/source 두 모드가 같은 팔레트를 쓴다. */
.t3b-read {
	--t3b-editor-canvas: var(--t3-surface, #ffffff);
	--t3b-editor-surface: var(--t3-surface-2, #f4f6f8);
	--t3b-editor-hover: var(--t3-surface-3, #eef1f5);
	--t3b-editor-line: var(--t3-border, #d9e0e8);
	--t3b-editor-text: var(--t3-text, #172033);
	--t3b-editor-muted: var(--t3-text-2, #6b7280);
	--t3b-editor-accent: var(--t3-green, #2563eb);
	--t3b-editor-selection: rgba(37, 99, 235, .22);
}
html[data-theme="dark"] .t3b-read {
	--t3b-editor-canvas: #071522;
	--t3b-editor-surface: #0a1c31;
	--t3b-editor-hover: #102e52;
	--t3b-editor-line: #1d4f7a;
	--t3b-editor-text: #e8f2ff;
	--t3b-editor-muted: #9db2c9;
	--t3b-editor-accent: #3195ff;
	--t3b-editor-selection: rgba(49, 149, 255, .32);
}
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_chrome {
	border-color: var(--t3b-editor-line);
	background: var(--t3b-editor-canvas);
	box-shadow: 0 0 0 1px color-mix(in srgb, var(--t3b-editor-accent) 8%, transparent);
}
html[data-theme="dark"] .t3b-read .t3b-editor.t3b-editor .cke,
html[data-theme="dark"] .t3b-read .t3b-editor.t3b-editor .cke_chrome {
	box-shadow: 0 12px 30px rgba(1, 8, 18, .22), 0 0 0 1px rgba(49, 149, 255, .08);
}
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_inner,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_contents { background: var(--t3b-editor-canvas); }
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_top,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_bottom {
	background: var(--t3b-editor-surface);
	border-color: var(--t3b-editor-line);
}
html[data-theme="dark"] .t3b-read .t3b-editor.t3b-editor .cke_top {
	background: linear-gradient(180deg, #0b213c 0%, var(--t3b-editor-surface) 100%);
}
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_top { padding: 8px 10px 5px; }
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_bottom { padding: 6px 10px; }
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_toolbar { margin: 0 7px 5px 0; }
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_toolgroup {
	margin: 0 5px 0 0;
	border: 1px solid transparent;
	border-radius: 5px;
	background: transparent;
}
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_button {
	border-radius: 4px;
	transition: background-color .14s ease, box-shadow .14s ease, opacity .14s ease;
}
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_button:hover,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_button:focus,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_button_on {
	background: var(--t3b-editor-hover);
	border-color: transparent;
}
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_button_on {
	box-shadow: inset 0 -2px 0 var(--t3b-editor-accent), inset 0 0 0 1px color-mix(in srgb, var(--t3b-editor-accent) 48%, transparent);
}
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_button:focus-visible,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_combo_button:focus-visible {
	outline: 2px solid var(--t3b-editor-accent);
	outline-offset: 1px;
}
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_button_disabled {
	opacity: .42;
	filter: saturate(.35);
}
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_toolbar_separator {
	width: 1px;
	background: var(--t3b-editor-line);
	opacity: .75;
}
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_combo_button {
	min-height: 26px;
	border: 1px solid var(--t3b-editor-line);
	border-radius: 5px;
	background: color-mix(in srgb, var(--t3b-editor-canvas) 78%, transparent);
}
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_combo:hover .cke_combo_button,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_combo_on .cke_combo_button {
	background: var(--t3b-editor-hover);
	border-color: var(--t3b-editor-accent);
}
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_combo_text,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_combo_label,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_button_label,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_path_item,
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_path_empty { color: var(--t3b-editor-text) !important; }
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_combo_arrow { border-top-color: var(--t3b-editor-muted) !important; }
html[data-theme="dark"] .t3b-read .t3b-editor.t3b-editor .cke_button_icon {
	opacity: .96;
	filter: invert(1) brightness(2.1) saturate(.55);
}
html[data-theme="dark"] .t3b-read .t3b-editor.t3b-editor .cke_button:hover .cke_button_icon,
html[data-theme="dark"] .t3b-read .t3b-editor.t3b-editor .cke_button_on .cke_button_icon {
	opacity: 1;
	filter: invert(1) brightness(2.5) saturate(.8);
}
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_source {
	padding: 18px;
	background: var(--t3b-editor-canvas);
	color: var(--t3b-editor-text);
	caret-color: var(--t3b-editor-accent);
	font: 14px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
	resize: none;
	outline: 0;
}
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_source::selection {
	background: var(--t3b-editor-selection);
	color: var(--t3b-editor-text);
}
html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_source:focus {
	box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--t3b-editor-accent) 54%, transparent);
}

/* 첨부 박스: 드래그 상태·목록·진행률도 툴바와 같은 네이비 계층을 쓴다. */
html[data-theme] .t3b-read .xefu-container {
	margin: 10px 0 0;
	border-color: var(--t3b-editor-line);
	border-radius: var(--t3b-radius);
	background: var(--t3b-editor-canvas);
	overflow: hidden;
}
html[data-theme] .t3b-read .xefu-container .xefu-dropzone {
	min-height: 58px;
	background: var(--t3b-editor-surface);
	border: 1px dashed transparent;
	color: var(--t3b-editor-muted);
}
html[data-theme] .t3b-read .xefu-container:hover .xefu-dropzone,
html[data-theme] .t3b-read .xefu-container.in .xefu-dropzone,
html[data-theme] .t3b-read .xefu-container.hover .xefu-dropzone {
	background: var(--t3b-editor-hover);
	border-color: var(--t3b-editor-accent);
}
html[data-theme] .t3b-read .xefu-container .xefu-btn {
	background: var(--t3b-editor-accent);
	border-color: var(--t3b-editor-accent);
	color: #ffffff;
}
html[data-theme] .t3b-read .xefu-container .xefu-btn:hover,
html[data-theme] .t3b-read .xefu-container .xefu-btn:active {
	background: color-mix(in srgb, var(--t3b-editor-accent) 80%, #ffffff);
	border-color: color-mix(in srgb, var(--t3b-editor-accent) 80%, #ffffff);
	color: #ffffff;
}
html[data-theme] .t3b-read .xefu-container .xefu-btn:focus-within,
html[data-theme] .t3b-read .xefu-container input.xefu-btn:focus-visible {
	outline: 2px solid var(--t3b-editor-accent);
	outline-offset: 2px;
}
html[data-theme] .t3b-read .xefu-container .xefu-controll,
html[data-theme] .t3b-read .xefu-container .xefu-list {
	background: var(--t3b-editor-canvas);
	color: var(--t3b-editor-muted);
	border-color: var(--t3b-editor-line);
}
html[data-theme] .t3b-read .xefu-container .xefu-list-images {
	border-bottom-color: var(--t3b-editor-line);
	scrollbar-color: var(--t3b-editor-accent) var(--t3b-editor-canvas);
}
html[data-theme] .t3b-read .xefu-container .xefu-list-files li { padding: 6px 8px; border-radius: 4px; }
html[data-theme] .t3b-read .xefu-container .xefu-list-files li.selected { background: var(--t3b-editor-hover); }
html[data-theme] .t3b-read .xefu-container .xefu-progressbar { border-bottom-color: var(--t3b-editor-line); }
html[data-theme] .t3b-read .xefu-container .xefu-progressbar div { background: var(--t3b-editor-accent); }

/* 패널의 iframe 내용은 JS가 칠하고, 여기서는 페이지에 붙는 껍데기만 정리한다. */
html.t3b-editor-page[data-theme] .cke_panel {
	border-color: var(--t3b-editor-line, var(--t3-border, #d9e0e8));
	border-radius: 6px;
	background: var(--t3b-editor-canvas, var(--t3-surface, #fff));
	box-shadow: 0 12px 28px rgba(1, 8, 18, .34);
	overflow: hidden;
}

/* 링크·이미지·표·특수문자 대화상자. 에디터 페이지 표식이 있을 때만 적용한다. */
html.t3b-editor-page[data-theme="dark"] .cke_dialog_background_cover { background: #020813 !important; opacity: .72 !important; }
html.t3b-editor-page[data-theme="dark"] .cke_dialog_body {
	background: #0a1c31;
	border: 1px solid #1d4f7a;
	border-radius: 8px;
	box-shadow: 0 22px 70px rgba(0, 0, 0, .58);
}
html.t3b-editor-page[data-theme="dark"] .cke_dialog_title,
html.t3b-editor-page[data-theme="dark"] .cke_dialog_footer {
	background: #0b213c;
	border-color: #1d4f7a;
	color: #e8f2ff;
}
html.t3b-editor-page[data-theme="dark"] .cke_dialog_contents,
html.t3b-editor-page[data-theme="dark"] .cke_dialog_tabs { background: #0a1c31; border-color: #1d4f7a; }
html.t3b-editor-page[data-theme="dark"] .cke_dialog_tab {
	background: #071522;
	border-color: #1d4f7a;
	color: #9db2c9;
}
html.t3b-editor-page[data-theme="dark"] .cke_dialog_tab:hover,
html.t3b-editor-page[data-theme="dark"] .cke_dialog_tab:focus,
html.t3b-editor-page[data-theme="dark"] .cke_dialog_tab_selected {
	background: #102e52;
	border-color: #3195ff;
	color: #e8f2ff;
}
html.t3b-editor-page[data-theme="dark"] .cke_dialog_ui_labeled_label,
html.t3b-editor-page[data-theme="dark"] .cke_dialog_ui_html,
html.t3b-editor-page[data-theme="dark"] .cke_dialog_ui_checkbox,
html.t3b-editor-page[data-theme="dark"] .cke_dialog_ui_radio { color: #e8f2ff; }
html.t3b-editor-page[data-theme="dark"] .cke_dialog_ui_input_text,
html.t3b-editor-page[data-theme="dark"] .cke_dialog_ui_input_textarea,
html.t3b-editor-page[data-theme="dark"] .cke_dialog_ui_input_select,
html.t3b-editor-page[data-theme="dark"] .cke_dialog_ui_input_file {
	background: #071522;
	border-color: #1d4f7a;
	color: #e8f2ff;
}
html.t3b-editor-page[data-theme="dark"] .cke_dialog_ui_input_text:focus,
html.t3b-editor-page[data-theme="dark"] .cke_dialog_ui_input_textarea:focus,
html.t3b-editor-page[data-theme="dark"] .cke_dialog_ui_input_select:focus {
	border-color: #3195ff;
	box-shadow: 0 0 0 2px rgba(49, 149, 255, .24);
}
html.t3b-editor-page[data-theme="dark"] .cke_dialog_ui_button {
	background: #102e52;
	border-color: #1d4f7a;
	color: #e8f2ff;
}
html.t3b-editor-page[data-theme="dark"] .cke_dialog_ui_button:hover,
html.t3b-editor-page[data-theme="dark"] .cke_dialog_ui_button:focus { background: #163c68; border-color: #3195ff; }
html.t3b-editor-page[data-theme="dark"] .cke_dialog_ui_button_ok { background: #247bd4; border-color: #3195ff; }
html.t3b-editor-page[data-theme="dark"] .cke_dialog_close_button { filter: invert(1) brightness(2); opacity: .9; }

@media (max-width: 640px) {
	html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_top { padding: 6px 6px 2px; }
	html[data-theme] .t3b-read .t3b-editor.t3b-editor .cke_toolbar { margin-right: 3px; }
	html[data-theme] .t3b-read .xefu-container .xefu-dropzone { align-items: flex-start; padding: 10px; }
	html[data-theme] .t3b-read .xefu-container p.xefu-dropzone-message { flex: 1 1 160px; }
	html[data-theme] .t3b-read .xefu-container .upload_info { flex: 1 1 100%; margin-left: 0; }
}
html.t3b-editor-page[data-theme="dark"] .cke_panel {
	background: #071522;
	border-color: #1d4f7a;
}