@charset "utf-8";
/* =====================================================================
   ipno_dark.css — ipno_xedition 게시판 다크 테마 (B-SIDE 레이아웃 매칭)
   - board.default.css(흰 바탕용) 위에 덮어쓰는 파일입니다.
   - 🎹 트래커(.ipt) 내부는 건드리지 않습니다 (ipno_tracker.css 담당).
   - 색은 B-SIDE 레이아웃 토큰(--bs-*)을 따라가고, 없으면 아래 기본값 사용.
   ===================================================================== */

.board {
	--bd-bg: var(--bs-bg, #111122);
	--bd-card: var(--bs-surface, #17172c);
	--bd-raised: var(--bs-raised, #1f1f3a);
	--bd-line: var(--bs-line, rgba(255, 255, 255, .08));
	--bd-line-2: var(--bs-line-2, rgba(255, 255, 255, .14));
	--bd-tx: var(--bs-tx, #ececf7);
	--bd-tx-2: var(--bs-tx-2, #a6a6c4);
	--bd-tx-3: var(--bs-tx-3, #6d6d8f);
	--bd-acc: var(--bs-acc, #818cf8);
	--bd-acc-2: var(--bs-acc-2, #38bdf8);
	--bd-rec: var(--bs-rec, #f43f5e);
	--bd-grad: var(--bs-grad, linear-gradient(90deg, #818cf8 0%, #38bdf8 100%));
	--bd-f: var(--bs-f-ko, "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif);
	--bd-f-en: var(--bs-f-en, "Space Grotesk", "Pretendard Variable", Pretendard, sans-serif);
	--bd-f-mono: var(--bs-f-mono, "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace);
	color: var(--bd-tx);
}
.board,
.board label,
.board table,
.board input,
.board button,
.board textarea,
.board select {
	font-family: var(--bd-f);
	font-size: 13px;
}
.board a { color: inherit; }

/* ---------- 공통 입력창 (트래커 밖) ---------- */
.board .iText,
.board .write_header select,
.board .list_footer select,
.board .exForm input[type=text],
.board .exForm input[type=email],
.board .exForm input[type=tel],
.board .exForm input[type=url],
.board .exForm input[type=password],
.board .exForm select,
.board .exForm textarea,
.board .write_comment textarea,
.board .secretForm .iText {
	box-sizing: border-box;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--bd-line-2);
	border-radius: 12px;
	background: var(--bd-card);
	color: var(--bd-tx);
	line-height: normal;
	color-scheme: dark;
	transition: border-color .15s, box-shadow .15s, background-color .15s;
}
.board .exForm textarea,
.board .write_comment textarea {
	height: auto;
	min-height: 80px;
	padding: 10px 14px;
}
.board .iText::placeholder,
.board textarea::placeholder { color: var(--bd-tx-3); }
.board .iText:focus,
.board select:focus,
.board .exForm input:focus,
.board .exForm textarea:focus,
.board .write_comment textarea:focus {
	outline: 0;
	border-color: var(--bd-acc);
	box-shadow: 0 0 0 4px rgba(129, 140, 248, .18);
}
.board .iCheck,
.board input[type=radio] {
	width: 16px;
	height: 16px;
	accent-color: var(--bd-acc);
}
.board .iLabel { color: var(--bd-tx-3); }

/* ---------- 공통 버튼 ---------- */
.board .btn {
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	height: 40px !important;
	padding: 0 18px !important;
	border: 1px solid var(--bd-line-2);
	border-radius: 999px;
	background: var(--bd-card);
	color: var(--bd-tx-2);
	font-size: 13px;
	font-weight: 600;
	line-height: 1 !important;
	box-sizing: border-box;
}
.board .btn:hover,
.board .btn:focus,
.board .btn:active,
.board .btn[disabled] {
	border-color: var(--bd-acc);
	background: rgba(129, 140, 248, .14);
	color: #fff;
}
.board .btn i {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	border-radius: 0;
	font-size: 15px;
	line-height: 1;
}
.board .btn_insert {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	width: auto;
	min-width: 140px;
	height: 46px;
	padding: 0 24px;
	border: 0;
	border-radius: 999px;
	background: var(--bd-grad);
	color: #111122;
	font-size: 15px;
	font-weight: 700;
	box-shadow: 0 10px 26px rgba(129, 140, 248, .3);
	transition: transform .15s, box-shadow .2s;
}
.board .btn_insert:hover,
.board .btn_insert:focus {
	background: var(--bd-grad);
	transform: translateY(-1px);
	box-shadow: 0 14px 32px rgba(56, 189, 248, .28);
}

/* =====================================================================
   카테고리 탭 → 알약 칩
   ===================================================================== */
.board .cTab {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 18px;
}
.board .cTab:after { display: none; }
.board .cTab li {
	float: none;
	margin: 0;
	border: 0;
}
.board .cTab li a {
	float: none;
	display: inline-block;
	height: 36px;
	padding: 0 16px;
	border: 1px solid var(--bd-line-2);
	border-radius: 999px;
	background: transparent;
	font-family: var(--bd-f);
	font-size: 13px;
	font-weight: 600;
	line-height: 34px;
	color: var(--bd-tx-2);
}
.board .cTab li:hover a { border-color: var(--bd-acc); color: #fff; }
.board .cTab li.on > a {
	border-color: transparent;
	background: var(--bd-grad);
	color: #111122;
}
.board .cTab ul { top: 44px; }
.board .cTab li.on ul li { border-right: 1px solid var(--bd-line-2); }
.board .cTab li.on ul li a {
	height: auto;
	padding: 0;
	border: 0;
	background: none;
	line-height: 1.6;
	color: var(--bd-tx-2);
}
.board .cTab li.on ul li.on_ a { color: var(--bd-acc-2); }

/* =====================================================================
   목록 (list.html) — 한 줄 = 한 장의 트랙 카드
   ===================================================================== */
.board .board_list table {
	border: 0;
	border-collapse: separate;
	border-spacing: 0 8px;
	color: var(--bd-tx);
	table-layout: auto;
}
.board .board_list a { color: inherit; }
.board .board_list a:hover,
.board .board_list a:focus { text-decoration: none; }

/* 머리줄: 작은 모노 라벨 */
.board .board_list th {
	padding: 4px 0 2px;
	height: auto;
	border: 0;
	background: transparent;
	font-family: var(--bd-f-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--bd-tx-3);
}
.board .board_list th span {
	height: auto;
	padding: 0 16px;
	font-weight: 600;
}
.board .board_list th.title { text-align: left; }
.board .board_list th a:hover { color: var(--bd-acc-2); }

/* 카드 행 */
.board .board_list td {
	padding: 0 16px;
	height: 56px;
	border: 1px solid var(--bd-line);
	border-width: 1px 0;
	background: var(--bd-card);
	vertical-align: middle;
	transition: background-color .15s, border-color .15s;
}
.board .board_list tr:last-child td { border: 1px solid var(--bd-line); border-width: 1px 0; }
.board .board_list td:first-child {
	border-left-width: 1px;
	border-radius: 14px 0 0 14px;
}
.board .board_list td:last-child {
	border-right-width: 1px;
	border-radius: 0 14px 14px 0;
}
.board .board_list tbody tr:hover td {
	background: var(--bd-raised);
	border-color: rgba(129, 140, 248, .35);
}
.board .board_list tbody tr:hover td:first-child {
	box-shadow: inset 3px 0 0 var(--bd-acc);
}

/* 칸별 */
.board .board_list td.no {
	text-align: center;
	font-family: var(--bd-f-mono);
	font-size: 11px;
	color: var(--bd-tx-3);
}
.board .board_list td.title {
	font-size: 15px;
	font-weight: 500;
	letter-spacing: -0.01em;
	line-height: 1.4;
}
.board .board_list td.title > a:first-child { color: var(--bd-tx); }
.board .board_list tbody tr:hover td.title > a:first-child { color: #fff; }
.board .board_list td.title img { vertical-align: middle; margin-left: 4px; opacity: .85; }
.board .board_list .replyNum,
.board .board_list .trackbackNum {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 8px;
	border-radius: 999px;
	background: rgba(56, 189, 248, .12);
	font-family: var(--bd-f-mono);
	font-size: 11px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--bd-acc-2) !important;
	vertical-align: 2px;
}
.board .board_list .replyNum:before { margin-right: 4px; content: '💬'; font-size: 10px; }

/* 🏷 제목 옆 칩 (list.html 의 printExtraImages 대체) */
.board .ipno-chip {
	display: inline-block;
	margin-left: 6px;
	padding: 2px 7px;
	border: 1px solid var(--bd-line-2);
	border-radius: 6px;
	font-family: var(--bd-f-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.4;
	color: var(--bd-tx-2);
	vertical-align: 2px;
}
.board .ipno-chip-file {
	border-color: rgba(56, 189, 248, .45);
	background: rgba(56, 189, 248, .1);
	color: var(--bd-acc-2);
}
.board .ipno-chip-file:before { margin-right: 3px; content: '♪'; }
.board .ipno-chip-new {
	border-color: transparent;
	background: var(--bd-rec);
	color: #fff;
}
.board .ipno-chip-update {
	border-color: rgba(129, 140, 248, .45);
	background: rgba(129, 140, 248, .12);
	color: var(--bd-acc);
}
.board .ipno-chip-secret { border-color: transparent; padding: 0 2px; }

.board .board_list td.author,
.board .board_list td.module_title {
	font-size: 13px;
	color: var(--bd-tx-2);
	white-space: nowrap;
}
.board .board_list td.author a:hover { color: #fff; }
.board .board_list td.time,
.board .board_list td.readNum,
.board .board_list td.voteNum,
.board .board_list td.lastReply,
.board .board_list td.lastReply a {
	text-align: center;
	font-family: var(--bd-f-mono);
	font-size: 12px;
	color: var(--bd-tx-3);
}
.board .board_list td.lastReply sub { font: inherit; font-size: 10px; }
.board .board_list td.check { text-align: center; }

/* 공지 행: 바이올렛 틴트 + 공지 칩 */
.board .board_list tr.notice { background: transparent; }
.board .board_list tr.notice td {
	background: #1b1c42;
	border-color: rgba(129, 140, 248, .3);
}
.board .board_list tr.notice td.notice {
	text-align: center;
	font-size: 0;
}
.board .board_list tr.notice td.notice:before {
	display: inline-block;
	padding: 4px 10px;
	border-radius: 999px;
	background: var(--bd-acc);
	font-family: var(--bd-f-mono);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .1em;
	color: #fff;
	content: 'NOTICE';
}
.board .board_list tr.notice td.title a { font-weight: 700; }

/* 빈 목록 */
.board .board_list tr.no_article { height: auto; }
.board .board_list tr.no_article td {
	height: 200px;
	border: 1px dashed var(--bd-line-2);
	border-radius: 18px;
	background: transparent;
	color: var(--bd-tx-2);
	font-size: 15px;
}
.board .board_list tr.no_article td p:before {
	display: block;
	margin-bottom: 10px;
	font-size: 34px;
	content: '🎹';
}

/* ---------- 목록 아래: 검색 · 버튼 · 페이지 ---------- */
.board .list_footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin: 18px 0 30px;
}
.board .list_footer:after { display: none; }
.board .list_footer .board_search {
	order: 1;
	float: none;
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 4px;
	border: 1px solid var(--bd-line-2);
	border-radius: 999px;
	background: var(--bd-card);
}
.board .list_footer .board_search * { vertical-align: middle; }
.board .list_footer .board_search select {
	height: 36px;
	min-width: 0;
	padding: 0 10px 0 14px;
	border: 0;
	border-radius: 999px;
	background: var(--bd-raised);
	font-size: 12px;
	font-weight: 600;
	color: var(--bd-tx-2);
}
.board .list_footer .board_search .search_input { position: relative; }
.board .list_footer .board_search .xi-magnifier {
	top: 50%;
	left: 10px;
	margin-top: -8px;
	font-size: 16px;
	color: var(--bd-tx-3);
}
.board .list_footer .board_search .iText {
	width: 180px;
	height: 36px;
	padding: 0 12px 0 32px;
	border: 0;
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
}
.board .list_footer .board_search .iText:focus,
.board .list_footer .board_search .iText.active { width: 220px; box-shadow: none; }
.board .list_footer .board_search .btn {
	position: static;
	height: 36px !important;
	border: 0;
	border-radius: 999px;
	background: var(--bd-raised);
	color: var(--bd-tx);
}
.board .list_footer .board_search .btn:hover { background: var(--bd-acc); color: #fff; }
.board .list_footer .board_search:focus-within { border-color: var(--bd-acc); }

.board .list_footer .btnArea {
	order: 2;
	float: none;
	display: flex;
	gap: 8px;
	margin: 0 0 0 auto;
}
/* ✏️ 쓰기 = 메인 CTA */
.board .list_footer .btnArea .btn:first-child {
	border-color: transparent;
	background: var(--bd-grad);
	color: #111122;
	font-weight: 700;
	box-shadow: 0 8px 22px rgba(129, 140, 248, .3);
}
.board .list_footer .btnArea .btn:first-child:hover {
	transform: translateY(-1px);
	box-shadow: 0 12px 28px rgba(56, 189, 248, .28);
}
.board .list_footer .pagination { order: 3; width: 100%; }

/* ---------- 페이지 번호 ---------- */
.board .pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px;
	padding: 10px 0;
}
.board .pagination a,
.board .pagination strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 10px;
	box-sizing: border-box;
	border: 1px solid var(--bd-line);
	border-radius: 12px;
	background: var(--bd-card);
	font-family: var(--bd-f-mono);
	font-size: 12px;
	font-weight: 600;
	line-height: 1;
	color: var(--bd-tx-2);
}
.board .pagination a:hover,
.board .pagination a:focus {
	border-color: var(--bd-acc);
	background: var(--bd-raised);
	color: #fff;
}
.board .pagination strong {
	border-color: transparent;
	background: var(--bd-grad);
	color: #111122;
	font-size: 13px;
}
.board .pagination .direction {
	gap: 4px;
	border-color: transparent;
	background: transparent;
	font-family: var(--bd-f);
	font-weight: 500;
	color: var(--bd-tx-3);
}
.board .pagination .direction:hover,
.board .pagination .direction:focus {
	border-color: transparent;
	background: transparent;
	color: #fff;
}
.board .pagination .direction span { display: none; }

/* =====================================================================
   글 읽기 (_read.html)
   ===================================================================== */
.board .read_header { margin-bottom: 4px; }
.board .read_header h1 {
	width: 100%;
	font-family: var(--bd-f);
	font-size: 24px;
	font-weight: 700;
	letter-spacing: -0.03em;
	line-height: 1.35;
	white-space: normal;
	color: #fff;
}
.board .read_header h1 a { color: #fff; }
.board .read_header h1 .category {
	display: inline-block;
	margin: 0 10px 0 0;
	padding: 4px 12px;
	border: 1px solid rgba(129, 140, 248, .4);
	border-radius: 999px;
	background: rgba(129, 140, 248, .12);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--bd-acc);
	vertical-align: 5px;
}
.board .read_header .meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	padding: 6px 0 12px;
	border-bottom: 1px solid var(--bd-line);
	font-size: 13px;
	color: var(--bd-tx-3);
}
.board .read_header .meta > span { margin: 0; }
.board .read_header .meta i { color: var(--bd-tx-3); }
.board .read_header .meta .author,
.board .read_header .meta .author a { color: var(--bd-tx-2); font-weight: 600; }
.board .read_header .meta .time { font-family: var(--bd-f-mono); font-size: 12px; }

.board .read_body { padding: 10px 2px; }
.board .read_body .xe_content,
.board .read_body .rhymix_content {
	font-size: 15px;
	line-height: 1.75;
	color: var(--bd-tx);
}
.board .read_body .xe_content a { color: var(--bd-acc-2); }

.board .exOut,
.board .exForm {
	margin: 10px 0;
	padding: 6px 18px;
	border: 1px solid var(--bd-line);
	border-radius: 16px;
	background: var(--bd-card);
}
.board .exOut th, .board .exOut td,
.board .exForm th, .board .exForm td {
	border-color: var(--bd-line);
	background: transparent;
}
.board .exOut tr:last-child th, .board .exOut tr:last-child td { border-bottom: 0; }
.board .exForm tr:first-child th, .board .exForm tr:first-child td { border-top: 0; }
.board .exOut th, .board .exForm th { color: var(--bd-tx-2); font-weight: 600; }
.board .exOut td, .board .exForm td { color: var(--bd-tx); }
.board .exForm caption { color: var(--bd-tx-3); }
.board .exForm em { color: var(--bd-rec); }

/* 추천 · SNS */
.board .read_footer .sns { margin-top: 36px; }
.board .read_footer .sns a,
.board .read_footer .vote a {
	border: 1px solid var(--bd-line-2);
	border-radius: 50%;
	background: var(--bd-card);
}
.board .read_footer .sns a { width: 40px; height: 40px; }
.board .read_footer .sns i { font-size: 18px; line-height: 40px; color: var(--bd-tx-2); }
.board .read_footer .vote { margin-top: 24px; }
.board .read_footer .vote a {
	width: 76px;
	height: 76px;
	margin: 0 4px;
	box-sizing: border-box;
	padding-top: 12px;
	border-radius: 22px;
	font-size: 12px;
	font-weight: 600;
	color: var(--bd-tx-2);
}
.board .read_footer .vote i { line-height: 30px; color: var(--bd-tx-2); }
.board .read_footer .sns a:hover,
.board .read_footer .vote a:hover {
	border-color: var(--bd-acc);
	background: rgba(129, 140, 248, .16);
	color: #fff;
}
.board .read_footer .sns a:hover i,
.board .read_footer .vote a:hover i { color: #fff; }

/* 첨부 · 태그 */
.board .read_footer .toggleFile,
.board .feedback .toggleFile {
	padding: 8px 14px;
	border: 1px solid var(--bd-line-2);
	border-radius: 999px;
	background: var(--bd-card);
	font-size: 12px;
	font-weight: 600;
	color: var(--bd-tx-2);
}
.board .read_footer .toggleFile strong,
.board .feedback .toggleFile strong { color: var(--bd-acc-2); }
.board .read_footer .files li,
.board .feedback .files li {
	margin-bottom: 6px;
	padding: 0;
	background: none;
}
.board .read_footer .files a,
.board .feedback .files a { color: var(--bd-tx-2); }
.board .read_footer .files a:before,
.board .feedback .files a:before { margin-right: 6px; content: '📎'; }
.board .read_footer .files a:hover,
.board .feedback .files a:hover { color: #fff; }
.board .read_footer .files a .fileSize,
.board .feedback .files a .fileSize {
	margin-left: 8px;
	padding: 3px 8px;
	border: 1px solid var(--bd-line-2);
	border-radius: 8px;
	background: var(--bd-raised);
	font-family: var(--bd-f-mono);
	font-size: 10px;
	color: var(--bd-tx-2);
}
.board .read_footer .tags { padding-left: 0; color: var(--bd-tx-3); }
.board .read_footer .tags a.tag {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	background: rgba(56, 189, 248, .1);
	color: var(--bd-acc-2);
}
.board .read_footer .tags a.tag + span { display: none; }
.board .read_footer .action { color: var(--bd-tx-3); }
.board .read_footer .action:hover { color: #fff; }

.board .read_footer .sign {
	margin-top: 10px;
	border: 1px solid var(--bd-line);
	border-radius: 16px;
	background: var(--bd-card);
}
.board .read_footer .sign .pf { border-radius: 50%; }
.board .read_footer .sign .tx { border-left-color: var(--bd-line-2); color: var(--bd-tx-2); }
.board .read_footer .btnArea {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	padding: 12px 0;
	border-top: 1px solid var(--bd-line);
	margin-top: 8px;
}
.board .read_footer .btnArea .btn_more { color: var(--bd-tx-3); }
.board .read_footer .vote:not(:has(li)) { display: none; }
.board .read_footer .btnArea .etc { margin-left: 8px; }

/* =====================================================================
   댓글 (_comment.html · comment_form.html)
   ===================================================================== */
.board .feedback { color: var(--bd-tx); }
.board .feedback .fbHeader {
	height: auto;
	padding: 22px 2px 10px;
	border-top: 1px solid var(--bd-line);
	line-height: 1.4;
}
.board .feedback .fbHeader h2 {
	font-size: 17px;
	font-weight: 700;
	color: #fff;
}
.board .feedback .fbHeader h2 i { color: var(--bd-acc); }
.board .feedback .fbHeader h2 em {
	display: inline-block;
	margin-left: 4px;
	padding: 1px 9px;
	border-radius: 999px;
	background: rgba(56, 189, 248, .12);
	font-family: var(--bd-f-mono);
	font-size: 12px;
	color: var(--bd-acc-2);
	vertical-align: 2px;
}
.board .feedback .fbList { display: flex; flex-direction: column; gap: 10px; }
.board .feedback .fbItem,
.board .feedback .fbItem:last-child {
	margin: 0;
	padding: 18px 18px 14px;
	border: 1px solid var(--bd-line);
	border-radius: 16px;
	background: var(--bd-card);
}
.board .feedback .indent {
	position: relative;
	background-image: none;
	background-color: rgba(23, 23, 44, .6);
}
.board .feedback .indent:before {
	position: absolute;
	top: 22px;
	left: 0;
	margin-left: -14px;
	font-family: var(--bd-f-mono);
	color: var(--bd-tx-3);
	content: '↳';
}
.board .feedback .indent1 { margin-left: 22px; padding-left: 18px; }
.board .feedback .indent2 { margin-left: 44px; padding-left: 18px; }
.board .feedback .indent3 { margin-left: 66px; padding-left: 18px; }
.board .feedback .indent4,
.board .feedback .indent5,
.board .feedback .indent6,
.board .feedback .indent7,
.board .feedback .indent8,
.board .feedback .indent9,
.board .feedback .indent10,
.board .feedback .indent11,
.board .feedback .indent12 { margin-left: 88px; padding-left: 18px; }
.board .feedback .fbMeta { width: 180px; padding: 0; }
.board .feedback .fbMeta .profile {
	width: 36px;
	height: 36px;
	border: 2px solid transparent;
	background: var(--bd-grad) border-box;
	box-sizing: border-box;
	object-fit: cover;
}
.board .feedback .fbMeta span.profile {
	background: url(profile.gif) center / cover no-repeat, var(--bd-raised);
	border-color: var(--bd-line-2);
}
.board .feedback .author a,
.board .feedback .author strong {
	font-size: 13px;
	font-weight: 600;
	color: var(--bd-tx);
}
.board .feedback .time {
	margin-top: 2px;
	font-family: var(--bd-f-mono);
	font-size: 11px;
	color: var(--bd-tx-3);
}
.board .feedback .xe_content,
.board .feedback .rhymix_content {
	margin-left: 196px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--bd-tx);
}
.board .feedback .xe_content.is_deleted,
.board .feedback .xe_content.is_secret,
.board .feedback .xe_content.deleted { color: var(--bd-tx-3); font-style: italic; }
.board .feedback .fileList { margin-left: 196px; }
.board .feedback .action { padding-top: 10px; }
.board .feedback .action a,
.board .feedback .action .vote {
	margin-left: 4px;
	padding: 4px 10px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 500;
	color: var(--bd-tx-3);
	transition: all .15s;
}
.board .feedback .action a:hover {
	background: var(--bd-raised);
	color: #fff;
}
.board .feedback .action a.this { text-decoration: none; }
.board #trackback .xe_content { color: var(--bd-tx-2); }

/* 댓글 쓰기 */
.board .write_comment {
	margin: 18px 0 60px;
	padding: 16px;
	border: 1px solid var(--bd-line);
	border-radius: 18px;
	background: var(--bd-card);
}
.board .write_comment textarea { width: 100%; }
.board .write_author { color: var(--bd-tx-2); }
.board .write_author label { color: var(--bd-tx-2); }
.board .write_comment .write_author { padding: 10px 0 0; }
.board .write_comment .iText.userName,
.board .write_comment .iText.userPw { width: 120px; }
.board .write_comment .iText.homePage { width: 180px; }

/* =====================================================================
   글쓰기 (write_form.html) — 트래커 주변만
   ===================================================================== */
.board .write_header { padding: 0 0 10px; gap: 8px; }
.board .write_header .iText { height: 46px; font-size: 16px; font-weight: 600; background: var(--bd-card); }
.board .write_header select { height: 46px; width: auto; min-width: 120px; }
.board .write_option { color: var(--bd-tx-2); }
.board .write_option label { color: var(--bd-tx-2); margin-left: 4px; }

/* =====================================================================
   확인 · 삭제 · 비밀글 · 태그 화면
   ===================================================================== */
.board .context_data {
	padding: 18px 20px;
	border: 1px solid var(--bd-line);
	border-top: 3px solid var(--bd-acc);
	border-radius: 16px;
	background: var(--bd-card);
	color: var(--bd-tx-2);
}
.board .context_data h3.author,
.board .context_data h3.title { color: #fff; }
.board .context_data .xe_content { color: var(--bd-tx); }
.board .context_message {
	padding: 30px 20px;
	border: 1px solid var(--bd-line);
	border-top: 3px solid var(--bd-acc);
	border-radius: 18px;
	background: var(--bd-card);
}
.board .context_message h1 { font-size: 18px; color: #fff; }
.board .context_message .btnArea { display: flex; justify-content: center; gap: 8px; }
.board .secretForm label { color: var(--bd-tx-2); }
.board .secretForm p { display: flex; align-items: center; gap: 6px; }
.board .secretForm .btn { border-radius: 999px; }

.board .tagList {
	padding: 28px;
	border: 1px solid var(--bd-line);
	border-radius: 18px;
	background: var(--bd-card);
	line-height: 2.4;
	text-align: left;
}
.board .tagList a {
	display: inline-block;
	margin: 0 4px 6px 0;
	padding: 2px 14px;
	border-radius: 999px;
	line-height: 1.8;
	color: var(--bd-tx);
}
.board .tagList a.rank1 { background: var(--bd-grad); color: #111122; font-weight: 700; }
.board .tagList a.rank2 { background: rgba(129, 140, 248, .3); }
.board .tagList a.rank3 { background: rgba(129, 140, 248, .18); }
.board .tagList a.rank4 { background: var(--bd-raised); color: var(--bd-tx-2); }
.board .tagList a.rank5 { background: transparent; border: 1px solid var(--bd-line-2); color: var(--bd-tx-3); text-decoration: none; }
.board .tagList a:hover { filter: brightness(1.15); }

.board .update-log { border-bottom-color: var(--bd-line); }

.vote-list {
	background: #17172c;
	color: #ececf7;
	border-radius: 16px;
}
.votelog { background: var(--bs-acc, #818cf8); }

/* 접근성: 움직임 줄이기 */
@media (prefers-reduced-motion: reduce) {
	.board .btn_insert, .board .list_footer .btnArea .btn:first-child { transition: none; }
}

/* ---------- 🔎 목록 위 도구 줄 (검색 · 쓰기 · 설정 · 게시물 관리) ---------- */
.board .list_toolbar { margin: 6px 0 14px; }
.board .list_bottom { margin-top: 14px; }
.board .list_bottom .pagination { margin: 0; }
@media (max-width: 640px) {
	.board .list_toolbar .btnArea { order: 1; width: 100%; margin: 0; }
	.board .list_toolbar .btnArea .btn:first-child { flex: 1; justify-content: center; }
	.board .list_toolbar .board_search { order: 2; width: 100%; }
	.board .list_toolbar .board_search .search_input { flex: 1; }
	.board .list_toolbar .board_search .iText, .board .list_toolbar .board_search .iText:focus { width: 100%; }
}

/* =====================================================================
   v0.7 📱 모바일 반응 — 목록 · 읽기 · 댓글 · 글쓰기
   ===================================================================== */
/* 🎬 유튜브 썸네일 칸 (sync/ips-list.js 가 본문 설정 줄에서 영상 ID를 찾아 넣음) */
.board .board_list th.ips-lthumb-th { width: 92px; }
.board .board_list td.ips-lthumb-td { width: 92px; padding: 6px 0 6px 10px; }
.board .ips-lthumb { position: relative; display: block; width: 80px; aspect-ratio: 16 / 9; border-radius: 9px; overflow: hidden; background: linear-gradient(135deg, rgba(129,140,248,.35), rgba(56,189,248,.18)), var(--bd-raised); }
.board .ips-lthumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .25s; }
.board .ips-lthumb i { position: absolute; inset: 0; display: grid; place-items: center; font-style: normal; font-size: 12px; color: #fff; text-shadow: 0 1px 6px rgba(0,0,0,.7); }
.board .ips-lthumb:not(.none) i:before { content: ''; position: absolute; width: 26px; height: 26px; border-radius: 50%; background: rgba(17,17,34,.55); backdrop-filter: blur(2px); }
.board .ips-lthumb:not(.none) i { z-index: 1; }
.board .ips-lthumb.none i { font-size: 18px; }
.board .board_list tbody tr:hover .ips-lthumb img { transform: scale(1.06); }

/* 어떤 본문·댓글에 넣은 유튜브 영상도 화면 폭에 맞춰 16:9 */
.board .xe_content iframe[src*="youtube"], .board .rhymix_content iframe[src*="youtube"],
.board .xe_content iframe[src*="youtu.be"], .board .rhymix_content iframe[src*="youtu.be"] { display: block; width: 100% !important; max-width: 100%; height: auto !important; aspect-ratio: 16 / 9; border: 0; border-radius: 14px; }
.board .xe_content img, .board .rhymix_content img, .board .xe_content video { max-width: 100%; height: auto; }

@media (max-width: 640px) {
	/* ---------- 목록: 표 → 카드 (썸네일 왼쪽 · 제목 2줄 · 아래 작은 정보) ---------- */
	.board .board_list { overflow: visible; }
	.board .board_list table, .board .board_list tbody { display: block; width: 100%; border: 0; }
	.board .board_list thead { display: none; }
	.board .board_list tbody { display: grid; gap: 8px; }
	.board .board_list tbody tr { position: relative; display: flex; flex-wrap: wrap; align-content: center; align-items: center; gap: 3px 10px; min-height: 80px; padding: 10px 40px 10px 124px; border: 1px solid var(--bd-line); border-radius: 16px; background: var(--bd-card); -webkit-tap-highlight-color: transparent; }
	.board .board_list tbody tr:active { background: var(--bd-raised); }
	.board .board_list tbody tr:not(.ips-lrow) { padding-left: 14px; min-height: 0; }
	.board .board_list td, .board .board_list tr:last-child td, .board .board_list td:first-child, .board .board_list td:last-child { display: block; height: auto; padding: 0; border: 0; border-radius: 0; background: transparent !important; box-shadow: none !important; text-align: left; }
	.board .board_list tbody tr td.no { display: none; }
	.board .board_list td.ips-lthumb-td { position: absolute; left: 10px; top: 50%; width: 104px; padding: 0; transform: translateY(-50%); }
	.board .board_list .ips-lthumb { width: 104px; border-radius: 10px; }
	.board .board_list td.title { flex: 1 1 100%; min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.38; }
	.board .board_list td.title > a:first-child { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; overflow-wrap: anywhere; }
	.board .board_list td.title .replyNum, .board .board_list td.title .ipno-chip { margin: 4px 4px 0 0; }
	.board .board_list td.author, .board .board_list td.time, .board .board_list td.readNum, .board .board_list td.voteNum, .board .board_list td.lastReply, .board .board_list td.module_title { font-size: 11.5px; line-height: 1.3; color: var(--bd-tx-3); }
	.board .board_list td.author a { color: var(--bd-tx-2); }
	.board .board_list td.readNum:before { content: '👁 '; font-size: 10px; }
	.board .board_list td.voteNum:before { content: '♥ '; }
	.board .board_list td.lastReply { display: none; }
	.board .board_list td.check { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
	.board .board_list tr.notice { border-color: rgba(129,140,248,.35); background: #1b1c42; }
	.board .board_list tr.notice td.notice { order: -1; font-size: 0; }
	.board .board_list tr.notice td.notice:before { padding: 2px 8px; font-size: 9.5px; }
	.board .board_list tr.notice td.title { flex: 1 1 180px; min-width: 0; }
	.board .board_list tr.no_article { padding: 0; border: 0; background: none; }
	.board .board_list tr.no_article td { width: 100%; height: 160px; display: grid; place-items: center; border: 1px dashed var(--bd-line-2); border-radius: 18px; }
	.board .cTab { display: flex; flex-wrap: nowrap; overflow-x: auto; gap: 6px; padding-bottom: 4px; scrollbar-width: none; -webkit-mask-image: linear-gradient(90deg, #000 90%, transparent); mask-image: linear-gradient(90deg, #000 90%, transparent); }
	.board .cTab::-webkit-scrollbar { display: none; }
	.board .cTab > li { flex: none; float: none; }
	.board .list_toolbar .board_search select { max-width: 104px; }
	.board .list_toolbar .board_search .iText { font-size: 16px; }
	.board .pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
	.board .pagination .direction { font-size: 0; }
	.board .pagination .direction i { font-size: 16px; }

	/* ---------- 읽기 ---------- */
	.board .read_header h1 { font-size: 20px; line-height: 1.35; word-break: keep-all; overflow-wrap: anywhere; }
	.board .read_header h1 .category { margin-bottom: 6px; }
	.board .read_header .meta { flex-wrap: wrap; gap: 4px 12px; font-size: 12px; }
	.board .read_footer .btnArea { display: flex; flex-wrap: wrap; gap: 6px; justify-content: stretch; }
	.board .read_footer .btnArea > .btn, .board .read_footer .btnArea .etc { flex: 1 1 auto; margin: 0; }
	.board .read_footer .btnArea .btn { white-space: nowrap; }
	.board .read_footer .btnArea .etc .btn { width: 100%; }
	.board .read_footer .btnArea .btn { justify-content: center; text-align: center; padding-left: 8px; padding-right: 8px; }

	/* ---------- 댓글: 이름 줄 위 · 내용 아래 (옆으로 밀리지 않게) ---------- */
	.board .feedback .fbItem, .board .feedback .fbItem:last-child { padding: 12px 12px 8px; border-radius: 14px; }
	.board .feedback .fbMeta { float: none; width: auto; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
	.board .feedback .fbMeta .profile { position: static; float: none; width: 30px; height: 30px; margin: 0; flex: none; }
	.board .feedback .fbMeta .author { margin: 0; padding: 0; }
	.board .feedback .fbMeta .time { margin: 0 0 0 auto; padding: 0; }
	.board .feedback .xe_content, .board .feedback .rhymix_content, .board .feedback .fileList { margin-left: 0; }
	.board .feedback .action { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 2px; padding-top: 6px; }
	.board .feedback .action a { margin: 0; }
	.board .feedback .indent1, .board .feedback .indent2, .board .feedback .indent3, .board .feedback .indent4, .board .feedback .indent5, .board .feedback .indent6, .board .feedback .indent7, .board .feedback .indent8, .board .feedback .indent9, .board .feedback .indent10, .board .feedback .indent11, .board .feedback .indent12 { margin-left: 14px; padding-left: 12px; }
	.board .feedback .indent:before { margin-left: -12px; }

	/* ---------- 글쓰기 ---------- */
	.board .write_header { display: flex; flex-wrap: wrap; gap: 8px; }
	.board .write_header select { flex: 1 1 40%; margin: 0; }
	.board .write_header .iText { flex: 1 1 100%; width: 100% !important; margin: 0; font-size: 16px; }
	.board .write_footer .write_option { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 4px; }
	.board .write_footer .write_option label { margin-right: 10px; }
	.board .write_footer .write_author { display: flex; flex-wrap: wrap; gap: 8px; }
	.board .write_footer .write_author .item { display: flex; flex-direction: column; flex: 1 1 30%; min-width: 0; margin: 0; }
	.board .write_footer .write_author .item:nth-last-child(-n+2) { flex-basis: 100%; }
	.board .write_footer .write_author .iText { width: 100% !important; font-size: 16px; }
	.board .write_footer .write_author .iLabel { position: static; display: block; margin-bottom: 4px; font-size: 12px; color: var(--bd-tx-3); }
	.board .write_footer .write_option, .board .write_footer .write_author { float: none; width: 100%; }
	.board .write_footer > div[style*="float"] { float: none !important; clear: both; width: 100%; display: flex; gap: 6px; margin-top: 12px; }
	.board .write_footer > div[style*="float"] .btn { flex: 0 0 auto; }
	.board .write_footer .btn_insert { flex: 1 1 auto; justify-content: center; }
	.board input.iText, .board textarea, .board select { max-width: 100%; }
}
@media (max-width: 360px) {
	.board .board_list tbody tr { padding-left: 106px; min-height: 72px; }
	.board .board_list td.ips-lthumb-td, .board .board_list .ips-lthumb { width: 88px; }
	.board .board_list td.title { font-size: 14px; }
}