@charset "utf-8";

/* =============================================================
 * Under Basic Board — 보조 스타일 (board.css 이후 로드)
 * 테마 .responsive 호환 · 세부 튜닝
 * ============================================================= */

/* ─── 목록 / 제목 줄 세부 ─────────────────────────── */

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

/* 공지·열람 행 제목은 항상 진하게 */
.ub-board .ubr--notice .ubr__link {
	color: #3730a3;
	font-weight: 500;
}
.ub-board .ubr--current .ubr__link { color: #0f172a; font-weight: 600; }

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

/* ─── 게시글 보기 세부 ────────────────────────────── */

/* 본문 산문 스타일 */
.ub-board #bo_v_con .view-content {
	font-size: 1rem;
	line-height: 1.85;
	color: #1e293b;
	word-break: break-word;
}
.ub-board #bo_v_con .view-content p { margin: 0 0 1em; }
.ub-board #bo_v_con .view-content h2,
.ub-board #bo_v_con .view-content h3 { margin-top: 1.5em; font-weight: 700; }
.ub-board #bo_v_con .view-content blockquote {
	margin: 1.25em 0;
	padding: 0.75em 1.25em;
	border-left: 3px solid #4f46e5;
	background: #eef2ff;
	border-radius: 0 8px 8px 0;
	color: #334155;
}
.ub-board #bo_v_con .view-content a { color: #4f46e5; text-decoration: underline; }
.ub-board #bo_v_con .view-content pre,
.ub-board #bo_v_con .view-content code {
	background: #f1f5f9;
	border-radius: 6px;
	font-family: 'JetBrains Mono', 'Consolas', monospace;
	font-size: 0.875em;
}
.ub-board #bo_v_con .view-content pre { padding: 1em; overflow-x: auto; }
.ub-board #bo_v_con .view-content code { padding: 0.15em 0.4em; }

/* ─── 게시글 보기 하단 버튼 ──────────────────────── */
.ub-board .clearfix.ub-pt-2.ub-border-top {
	padding: 1rem 1.5rem;
	background: #f8fafc;
}

/* ─── 댓글 영역 간격 ─────────────────────────────── */
.ub-board #viewcomment {
	border-top: 1px solid #edf0f5;
	padding: 20px 0 0;
	margin-top: 0;
	background: #ffffff;
}
.ub-board #viewcomment > .ub-board {
	padding-left: 24px;
	padding-right: 24px;
}
.ub-board #bo_vc {
	padding: 0 24px;
}
.ub-board #bo_vc_w {
	padding: 0 24px 24px;
}

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

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

/* ─── 글쓰기 폼 헤더 ────────────────────────────── */
.ub-board #bo_w .ub-list-item:first-child {
	padding: 20px 28px;
	background: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
	border-radius: 12px 12px 0 0;
	border-bottom: 0;
}
.ub-board #bo_w .ub-list-item:first-child h5 {
	color: #fff;
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
	letter-spacing: -0.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); }
}

/* ─── 회원 검색 (글쓰기) ─────────────────────────── */
.penalty-member-select { margin-top: 4px; }
.penalty-member-display {
	display: flex; align-items: center; flex-wrap: wrap;
	gap: 8px; padding: 10px 14px;
	background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px;
}
.penalty-member-display__nick { font-weight: 500; color: #166534; }
.penalty-member-display__id   { font-size: 0.8125rem; color: #64748b; }
.penalty-member-search-wrap   { margin-top: 8px; }
.penalty-member-results {
	margin-top: 10px; max-height: 220px; overflow-y: auto;
	border: 1px solid #e2e8f0; border-radius: 8px; background: #fff;
}
.penalty-member-list { list-style: none; margin: 0; padding: 6px; }
.penalty-member-item {
	display: block; width: 100%; padding: 10px 12px;
	text-align: left; border: none; border-radius: 6px;
	background: none; cursor: pointer; font-size: 0.9375rem;
	transition: background 0.15s;
}
.penalty-member-item:hover { background: #f1f5f9; }
.ub-board .ub-toolbar-actions .ub-btn svg { flex-shrink: 0; vertical-align: middle; }
.ub-board .ub-toolbar-actions .ub-btn    { display: inline-flex; align-items: center; gap: 6px; }
.ublist-empty__icon { display: block; margin: 0 auto 12px; color: #94a3b8; font-size: 2.5rem; }


/* ═══════════════════════════════════════════════════════════
   ■ under-gi-penalty 패널티 게시판 전용 — PREMIUM UX v2
   ─ 기존 pv-* 클래스명 100% 유지 · 스타일 전면 업그레이드
   ═══════════════════════════════════════════════════════════ */

/* ── CSS 변수 (패널티 카드 스코프) ── */
.pv-wrap, .pv-card {
	--pv-p:      #4f46e5;
	--pv-p2:     #6366f1;
	--pv-p3:     #3730a3;
	--pv-p-bg:   #eef2ff;
	--pv-p-bd:   #c7d2fe;
	--pv-red:    #dc2626;
	--pv-red-bg: #fef2f2;
	--pv-red-bd: #fecaca;
	--pv-amber:  #d97706;
	--pv-green:  #15803d;
	--pv-bg:     #f8fafc;
	--pv-sur:    #ffffff;
	--pv-bd:     #e2e8f0;
	--pv-bd2:    #f1f5f9;
	--pv-t1:     #0f172a;
	--pv-t3:     #334155;
	--pv-t4:     #475569;
	--pv-t5:     #64748b;
	--pv-t6:     #94a3b8;
	--pv-r-sm:   6px;
	--pv-r-md:   10px;
	--pv-r-lg:   14px;
	--pv-r-xl:   18px;
}

/* ── penalty-badge (목록·뷰 공용) ── */
.penalty-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.2em 0.65em;
	font-size: 0.75rem;
	font-weight: 500;
	border-radius: 20px;
	white-space: nowrap;
	border: 1px solid transparent;
}
.penalty-badge.penalty--warn   { background: #fef3c7; color: #b45309; border-color: #fde68a; }
.penalty-badge.penalty--7d     { background: #dbeafe; color: #1d4ed8; border-color: #bfdbfe; }
.penalty-badge.penalty--30d    { background: #e0e7ff; color: #4338ca; border-color: #c7d2fe; }
.penalty-badge.penalty--perm   { background: #fee2e2; color: #b91c1c; border-color: #fecaca; }
.penalty-badge.penalty--point  { background: #fef9c3; color: #a16207; border-color: #fde68a; }
.penalty-badge.penalty--revoke { background: #fce7f3; color: #9d174d; border-color: #fbcfe8; }

/* ── penalty-status (목록·뷰 공용) ── */
.penalty-status {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 0.2em 0.6em;
	font-size: 0.75rem;
	font-weight: 500;
	border-radius: 20px;
	border: 1px solid transparent;
}
.penalty-status--on  { background: #dcfce7; color: #15803d; border-color: #bbf7d0; }
.penalty-status--off { background: #f1f5f9; color: #64748b; border-color: #e2e8f0; }

/* 적용중 라이브 도트 */
.penalty-status--on::before {
	content: '';
	width: 5px; height: 5px;
	border-radius: 50%;
	background: #22c55e;
	box-shadow: 0 0 5px rgba(34, 197, 94, .7);
	animation: pvPulse 2s ease-in-out infinite;
	flex-shrink: 0;
}
@keyframes pvPulse {
	0%, 100% { opacity: 1; transform: scale(1); }
	50%       { opacity: .55; transform: scale(.8); }
}

/* ══ pv-wrap / pv-card ══ */
.pv-wrap {
	padding: 0 0 2.5rem;
	width: 100%;
	max-width: 100%;
}
.pv-card {
	background: var(--pv-sur);
	border-radius: var(--pv-r-xl);
	box-shadow: 0 0 40px 0 rgba(94, 92, 154, 0.06);
	border: 1px solid rgba(226, 232, 240, .8);
	overflow: hidden;
}

/* ══ pv-hero — 프리미엄 다크 그라디언트 헤더 ══ */
.pv-hero {
	position: relative;
	overflow: hidden;
	padding: 2.125rem 2rem 1.875rem;
	/* !important — board.css의 header 스타일 충돌 방지 */
	background:
		radial-gradient(ellipse 70% 90% at -8% 50%, rgba(79, 70, 229, .30) 0%, transparent 55%),
		radial-gradient(ellipse 55% 55% at 108% 15%, rgba(99, 102, 241, .14) 0%, transparent 50%),
		linear-gradient(152deg, #090d1a 0%, #131929 42%, #1c2640 72%, #192136 100%) !important;
	color: #e2e8f0;
}
/* 그리드 텍스처 오버레이 — z-index 0 으로 콘텐츠 뒤에 */
.pv-hero::after {
	content: '';
	position: absolute; inset: 0;
	z-index: 0;
	background-image:
		linear-gradient(rgba(148, 163, 184, .030) 1px, transparent 1px),
		linear-gradient(90deg, rgba(148, 163, 184, .030) 1px, transparent 1px);
	background-size: 28px 28px;
	pointer-events: none;
}

/* 히어로 안 뱃지 행 */
.pv-hero__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 7px;
	margin-bottom: 1.1rem;
	position: relative;
	z-index: 2;
}

/* 히어로 내 뱃지 — 다크 배경 전용 재정의 */
.pv-hero__badges .penalty-badge {
	padding: 4px 11px 4px 8px;
	font-size: 11px; font-weight: 700;
	border-radius: 20px;
}
.pv-hero__badges .penalty-badge::before {
	content: ''; width: 5px; height: 5px;
	border-radius: 50%; flex-shrink: 0;
}
.pv-hero__badges .penalty-badge.penalty--warn   { background: rgba(245,158,11,.14); color: #fbbf24; border-color: rgba(245,158,11,.28); }
.pv-hero__badges .penalty-badge.penalty--warn::before   { background: #fbbf24; }
.pv-hero__badges .penalty-badge.penalty--7d     { background: rgba(59,130,246,.14); color: #60a5fa; border-color: rgba(59,130,246,.28); }
.pv-hero__badges .penalty-badge.penalty--7d::before     { background: #60a5fa; }
.pv-hero__badges .penalty-badge.penalty--30d    { background: rgba(99,102,241,.14); color: #a5b4fc; border-color: rgba(99,102,241,.28); }
.pv-hero__badges .penalty-badge.penalty--30d::before    { background: #a5b4fc; }
.pv-hero__badges .penalty-badge.penalty--perm   { background: rgba(220,38,38,.14); color: #fca5a5; border-color: rgba(220,38,38,.28); }
.pv-hero__badges .penalty-badge.penalty--perm::before   { background: #fca5a5; }
.pv-hero__badges .penalty-badge.penalty--point  { background: rgba(217,119,6,.14); color: #fcd34d; border-color: rgba(217,119,6,.28); }
.pv-hero__badges .penalty-badge.penalty--point::before  { background: #fcd34d; }
.pv-hero__badges .penalty-badge.penalty--revoke { background: rgba(157,23,77,.14); color: #f9a8d4; border-color: rgba(157,23,77,.28); }
.pv-hero__badges .penalty-badge.penalty--revoke::before { background: #f9a8d4; }

/* 히어로 안 상태 뱃지 */
.pv-hero__badges .penalty-status {
	padding: 4px 10px;
	font-size: 11px; font-weight: 500;
}
.pv-hero__badges .penalty-status--on  {
	background: rgba(34,197,94,.12); color: #4ade80;
	border-color: rgba(34,197,94,.25);
}
.pv-hero__badges .penalty-status--on::before {
	background: #4ade80;
	box-shadow: 0 0 7px rgba(74, 222, 128, .7);
}
.pv-hero__badges .penalty-status--off {
	background: rgba(148,163,184,.10); color: #94a3b8;
	border-color: rgba(148,163,184,.20);
}
.pv-hero__badges .penalty-status--off::before {
	background: #64748b;
	box-shadow: none;
	animation: none;
}

/* 닉네임 타이틀 */
.pv-hero__title {
	margin: 0 0 0.625rem;
	font-size: 1.625rem;
	font-weight: 500;
	color: #f8fafc;
	letter-spacing: -.04em;
	line-height: 1.2;
	position: relative;
	z-index: 2;
}

/* 메타 라인 */
.pv-hero__meta {
	margin: 0;
	font-size: 0.875rem;
	color: #94a3b8;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.375rem 0.75rem;
	position: relative;
	z-index: 2;
}
.pv-hero__summary { color: #cbd5e1; font-weight: 500; }
.pv-hero__point   { color: #fcd34d; font-weight: 500; }
.pv-hero__sep     { opacity: .38; user-select: none; }
.pv-hero__date    { color: #64748b; font-size: .8125rem; }

/* ══ pv-summary — 2열 정보 그리드 ══ */
/* 기존 dl/dt/dd 구조를 그리드 셀로 업그레이드 */
.pv-summary {
	display: grid !important;
	grid-template-columns: 1fr 1fr;
	border-top: 1px solid var(--pv-bd);
}

/* ─ 기존 pv-dl 방식 하위 호환 ─ */
.pv-summary .pv-dl {
	display: contents;
}
.pv-summary .pv-dl dt {
	margin: 0;
	padding: 1.2rem 1.75rem 0;
	font-size: 9.5px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--pv-t6);
	background: var(--pv-bg);
}
.pv-summary .pv-dl dd {
	margin: 0;
	padding: 5px 1.75rem 1.2rem;
	font-size: .9375rem;
	font-weight: 500;
	color: var(--pv-t1);
	line-height: 1.55;
	background: var(--pv-bg);
}
.pv-summary .pv-dl dd + dt {
	border-left: 1px solid var(--pv-bd);
}
.pv-summary .pv-dl dd + dt + dd {
	border-left: 1px solid var(--pv-bd);
}

/* ─ pv-summary__cell 방식 (view_skin.php 현재 구조) ─ */
.pv-summary__cell {
	padding: 1.25rem 1.75rem !important;
	background: #f8fafc !important;
}
.pv-summary__cell + .pv-summary__cell {
	border-left: 1px solid #e2e8f0 !important;
}
.pv-summary__label {
	font-size: 9.5px !important;
	font-weight: 500 !important;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: #94a3b8 !important;
	margin-bottom: 5px;
	display: block;
}
.pv-summary__value {
	font-size: .9375rem !important;
	font-weight: 500 !important;
	color: #0f172a !important;
	line-height: 1.55;
	display: block;
}
.pv-summary__value--accent { color: #4f46e5 !important; }
.pv-summary__value--warn   { color: #d97706 !important; }
.pv-summary__value--red    { color: #dc2626 !important; }
.pv-summary__value--green  { color: #15803d !important; }
.pv-summary__value--muted  { color: #64748b !important; }

@media (max-width: 520px) {
	.pv-summary { grid-template-columns: 1fr; }
	.pv-summary__cell + .pv-summary__cell { border-left: none !important; border-top: 1px solid #e2e8f0 !important; }
	.pv-summary .pv-dl dd + dt,
	.pv-summary .pv-dl dd + dt + dd { border-left: none; border-top: 1px solid var(--pv-bd); }
}

/* ══ pv-detail — 상세 사유 ══ */
.pv-detail {
	padding: 1.5rem 1.75rem 1.625rem;
	border-top: 1px solid var(--pv-bd);
}

/* 기존 pv-detail__title 업그레이드 */
.pv-detail__title {
	display: flex;
	align-items: center;
	gap: 7px;
	margin: 0 0 0.875rem;
	font-size: 9.5px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: .1em;
	color: var(--pv-t6);
}
.pv-detail__title::before {
	content: '';
	width: 2.5px; height: 13px;
	border-radius: 2px;
	background: var(--pv-p);
	flex-shrink: 0;
}

/* 사유 박스 */
.pv-detail__body {
	background: var(--pv-bg);
	border: 1px solid var(--pv-bd2);
	border-radius: var(--pv-r-lg);
	padding: 1.25rem 1.375rem;
	position: relative;
	overflow: hidden;
	transition: border-color .2s;
}
.pv-detail__body:hover { border-color: rgba(79, 70, 229, .2); }
/* 좌측 인디고 액센트 라인 */
.pv-detail__body::before {
	content: '';
	position: absolute; left: 0; top: 0; bottom: 0;
	width: 3px;
	background: linear-gradient(180deg, var(--pv-p) 0%, rgba(79, 70, 229, .18) 100%);
}

/* view-content (pv-detail 안) */
.pv-detail__body .view-content {
	font-size: .9375rem;
	line-height: 1.85;
	color: var(--pv-t3);
	word-break: break-word;
}
.pv-detail__body .view-content p { margin: 0 0 .75em; }
.pv-detail__body .view-content p:last-child { margin-bottom: 0; }
.pv-detail__body .view-content h2,
.pv-detail__body .view-content h3 { margin-top: 1.5em; font-weight: 700; }
.pv-detail__body .view-content blockquote {
	margin: 1.25em 0; padding: .75em 1.25em;
	border-left: 3px solid var(--pv-p);
	background: var(--pv-p-bg);
	border-radius: 0 8px 8px 0;
	color: var(--pv-t4);
}
.pv-detail__body .view-content a { color: var(--pv-p); text-decoration: underline; }
.pv-detail__body .view-content pre,
.pv-detail__body .view-content code {
	font-family: 'JetBrains Mono', 'Consolas', monospace;
	font-size: .8125em;
	background: var(--pv-bd2);
	border-radius: var(--pv-r-sm);
}
.pv-detail__body .view-content pre  { padding: 1em; overflow-x: auto; }
.pv-detail__body .view-content code { padding: .15em .4em; }

/* 빈 상태 */
.pv-detail__body--empty {
	min-height: 88px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.pv-detail__empty {
	margin: 0;
	font-size: .875rem;
	color: var(--pv-t6);
}

/* ══ pv-files — 첨부파일 ══ */
.pv-files { padding: 0 1.75rem 1.375rem; }
.pv-files__title {
	margin: 0 0 .5rem;
	font-size: 9.5px; font-weight: 500;
	text-transform: uppercase; letter-spacing: .1em;
	color: var(--pv-t6);
}
.pv-files__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 4px; }
.pv-files__link {
	display: inline-flex; align-items: center; gap: 6px;
	font-size: .875rem;
	color: var(--pv-p);
	text-decoration: none;
	padding: 6px 10px;
	border-radius: var(--pv-r-sm);
	border: 1px solid var(--pv-p-bd);
	background: var(--pv-p-bg);
	transition: all .15s;
	width: fit-content;
}
.pv-files__link:hover { background: var(--pv-p); color: #fff; border-color: var(--pv-p); }

/* ══ pv-actions / pv-btn — 액션 버튼 바 ══ */
.pv-actions {
	padding: 1.125rem 1.75rem;
	display: block;
	text-align: right;
	gap: 8px;
	background: var(--pv-bg);
	border-top: 1px solid var(--pv-bd);
}

.pv-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 40px !important;
	padding: 0 1.25rem !important;
	font-size: .875rem;
	font-weight: 500;
	border-radius: var(--pv-r-md);
	text-decoration: none !important;
	cursor: pointer;
	border: none;
	letter-spacing: -.01em;
	white-space: nowrap;
	transition: all .18s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 목록 */
.pv-btn--secondary {
	background: #ffffff !important;
	color: #475569 !important;
	border: 1.5px solid #e2e8f0 !important;
}
.pv-btn--secondary:hover {
	background: #f8fafc !important;
	color: #0f172a !important;
	border-color: #c7d0de !important;
	transform: translateY(-1px);
	box-shadow: 0 3px 10px rgba(15, 23, 42, .09);
}

/* 수정 */
.pv-btn--primary {
	background: #4f46e5 !important;
	color: #fff !important;
	box-shadow: 0 2px 10px rgba(79, 70, 229, .28);
	border: none !important;
}
.pv-btn--primary:hover {
	background: #3730a3 !important;
	box-shadow: 0 4px 18px rgba(79, 70, 229, .42);
	transform: translateY(-1px);
	color: #fff !important;
}

/* 삭제 → hover 시 위험 색상 */
.pv-btn--ghost {
	background: transparent !important;
	color: #64748b !important;
	border: 1.5px solid #e2e8f0 !important;
}
.pv-btn--ghost:hover {
	background: #fef2f2 !important;
	color: #dc2626 !important;
	border-color: #fecaca !important;
	transform: translateY(-1px);
}

/* ── 반응형 ── */
@media (max-width: 575px) {
	.pv-wrap  { padding: 0 0 1.5rem; }
	.pv-hero  { padding: 1.75rem 1.25rem 1.5rem; }
	.pv-hero__title { font-size: 1.375rem; }
	.pv-summary .pv-dl dt,
	.pv-summary .pv-dl dd { padding-left: 1.25rem; padding-right: 1.25rem; }
	.pv-detail  { padding: 1.25rem 1.25rem 1.375rem; }
	.pv-files   { padding: 0 1.25rem 1.25rem; }
	.pv-actions { padding: 1rem 1.25rem; flex-wrap: wrap; }
	.pv-btn     { flex: 1; height: 46px; font-size: .9375rem; }
}