@charset "utf-8";

/* =============================================================
 * Under Basic Board — 보조 스타일 v2 (board.css 이후 로드)
 * REDESIGNED — widget_new.css 디자인 시스템 통합
 * ============================================================= */

/* ─── 목록 / 제목 줄 ──────────────────────────────── */

/* 읽은 글 */
.ub-board .ubr__link:visited { color: #0d0c1e; }

/* 공지 강조 */
.ub-board .ubr--notice .ubr__link {
	color: #3730a3;
	font-weight: 600;
}
.ub-board .ubr--current .ubr__link { color: #0f172a; font-weight: 700; }

/* 데스크탑 제목 말줄임 */
@media (min-width: 768px) {
	.ub-board .ubr__link {
		max-width: 540px;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
}

/* ─── 게시글 보기 헤더 ────────────────────────────── */

/* 제목 */
.ub-board #bo_v_title {
	font-size: 1.25rem !important;
	font-weight: 500;
	color: #0f172a;
	line-height: 1.4;
	letter-spacing: -.02em;
	margin: 0 0 4px;
}

/* 메타 행 */
.ub-board .uv-meta-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 13px 28px;
	border-bottom: 1px solid rgba(99,102,241,.07);
	gap: 8px;
	flex-wrap: wrap;
}
.ub-board .uv-meta-left  { display: flex; align-items: center; gap: 6px; }
.ub-board .uv-meta-right { display: flex; align-items: center; gap: 6px; }
.ub-board .uv-date {
	font-size: .8rem;
	color: #64748b;
	font-weight: 500;
}
.ub-board .uv-sep { color: #cbd5e1; font-size: .75rem; }
.ub-board .uv-ip  { font-size: .78rem; color: #94a3b8; }

/* 통계 행 */
.ub-board .uv-stat-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 10px 28px;
	gap: 8px;
	flex-wrap: wrap;
}
.ub-board .uv-stat-left  { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ub-board .uv-stat-right { display: flex; align-items: center; gap: 6px; }
.ub-board .uv-stat-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: .8rem;
	color: #64748b;
	font-weight: 500;
}
.ub-board .uv-stat-item i { color: #94a3b8; font-size: .85em; }

/* ─── 게시글 본문 ──────────────────────────────────── */
.ub-board #bo_v_con .view-content {
	font-size: 1rem;
	line-height: 1.88;
	color: #1e293b;
	word-break: break-word;
}
.ub-board #bo_v_con .view-content p { margin: 0 0 1.1em; }
.ub-board #bo_v_con .view-content h2,
.ub-board #bo_v_con .view-content h3 {
	margin-top: 1.6em;
	font-weight: 800;
	color: #0f172a;
	letter-spacing: -.02em;
}
.ub-board #bo_v_con .view-content blockquote {
	margin: 1.4em 0;
	padding: 0.9em 1.4em;
	border-left: 3px solid #6366f1;
	background: #eef2ff;
	border-radius: 0 10px 10px 0;
	color: #334155;
	font-style: italic;
}
.ub-board #bo_v_con .view-content a {
	color: #4f46e5;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.ub-board #bo_v_con .view-content pre,
.ub-board #bo_v_con .view-content code {
	background: #f1f5f9;
	border-radius: 7px;
	font-family: 'JetBrains Mono','Consolas',monospace;
	font-size: 0.875em;
}
.ub-board #bo_v_con .view-content pre  { padding: 1.1em; overflow-x: auto; }
.ub-board #bo_v_con .view-content code { padding: 0.15em 0.45em; }

/* ─── 이전/다음 글 네비게이션 ──────────────────────── */
.ub-board .uv-nav-row { transition: background 150ms ease; }
.ub-board .uv-nav-row:hover { background: #fafaff; }
.ub-board .uv-nav-label {
	font-size: .72rem;
	font-weight: 700;
	color: #94a3b8;
	padding: 12px 14px;
	white-space: nowrap;
	letter-spacing: .04em;
}
.ub-board .uv-nav-label--prev i { color: #6366f1; }
.ub-board .uv-nav-label--next i { color: #f03055; }
.ub-board .uv-nav-cell   { padding: 10px 16px; }
.ub-board .uv-nav-inner  { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ub-board .uv-nav-link {
	font-size: .875rem;
	font-weight: 600;
	color: #1e2040;
	text-decoration: none;
	display: flex;
	align-items: center;
	gap: 6px;
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	transition: color 150ms ease;
}
.ub-board .uv-nav-link:hover { color: #4f46e5; }
.ub-board .uv-nav-icon { color: #c4c6e0; font-size: .85em; flex-shrink: 0; }
.ub-board .uv-nav-date { font-size: .75rem; color: #94a3b8; flex-shrink: 0; white-space: nowrap; }

/* ─── 태그 ── */
.ub-board .uv-tag-area {
	padding: 10px 0 4px;
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
}

/* ─── 추천/비추천 버튼 영역 ── */
#bo_v_btn_group .ub-btn-group {
	gap: 8px;
}
#bo_v_btn_group .ub-btn--basic {
	border-radius: 999px !important;
	padding: 8px 20px !important;
	font-weight: 700 !important;
	font-size: .82rem !important;
	transition: transform 180ms ease, box-shadow 180ms ease !important;
}
#bo_v_btn_group .ub-btn--basic:hover {
	transform: translateY(-2px) !important;
}
#bo_v_btn_group .ub-btn--basic .ub-accent {
	color: #f03055;
	font-weight: 800;
}

/* ─── 댓글 영역 ─────────────────────────────────────── */
.ub-board #viewcomment {
	border-top: 1px solid rgba(99,102,241,.08);
	padding: 20px 0 0;
	margin-top: 0;
	background: #ffffff;
}
.ub-board #bo_vc  { padding: 0 24px; }
.ub-board #bo_vc_w{ padding: 0 24px 24px; }

/* 댓글 작성자 */
.ub-board .cmt-wrap header a    { font-weight: 700; color: #0f172a; }
.ub-board .cmt-wrap header time { color: #94a3b8; font-size: 0.8rem; }

/* 대댓글 들여쓰기 */
.ub-board article[id^="c_"] .cmt-reply {
	top: 14px; left: -14px;
	width: 18px; height: 18px;
	opacity: .45;
}

/* ─── 글쓰기 폼 헤더 ─────────────────────────────── */
.ub-board #bo_w .ub-list-item:first-child {
	padding: 22px 28px;
	background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
	border-radius: 14px 14px 0 0;
	border-bottom: 0;
}
.ub-board #bo_w .ub-list-item:first-child h5 {
	color: #fff;
	font-size: 1rem;
	font-weight: 800;
	margin: 0;
	letter-spacing: -.02em;
}

/* ─── 페이징 ──────────────────────────────────────── */
.ub-board #bo_list_wrap > .ub-font-normal {
	padding: 0.25rem 0 0;
}

/* ─── 글쓰기 제출 버튼 반응형 ──────────────────────── */
@media (max-width: 575px) {
	.ub-board #bo_w .uw-submit-bar { padding: 14px 16px; gap: 8px; }
	.ub-board #bo_w .uw-submit-bar .ub-btn { height: 44px; font-size: 0.875rem; }
}

/* ─── .responsive 호환 ───────────────────────────── */
@media (max-width: 575px) {
	.responsive .ub-cmt-box          { border-radius: var(--r-md); }
	.responsive #bo_vc_w .ub-cmt-box { border-radius: var(--r-md); }
}