/* =========================================================
   라공에디션 (lagong) 그누보드5 게시판 스킨
   - 미니멀 / 클린 화이트 톤
   - 반응형 (모바일 대응)
   ========================================================= */

:root{
	--lg-bg:#ffffff;
	--lg-surface:#fafafa;
	--lg-card-bg:#ffffff;
	--lg-border:#e9e9ec;
	--lg-text:#1c1c1e;
	--lg-text-sub:#8a8a92;
	--lg-accent:#2b6df2;
	--lg-accent-soft:#eef3ff;
	--lg-danger:#e5484d;
	--lg-radius:10px;
	--lg-radius-sm:6px;
	--lg-shadow:0 1px 2px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.03);
	--lg-max-width:960px;
}

#bo_list_total,
#bo_view_total,
#bo_write_total{
	box-sizing:border-box;
}
#bo_list_total *,
#bo_view_total *,
#bo_write_total *{
	box-sizing:border-box;
}

.lg_wrap{
	max-width:var(--lg-max-width);
	margin:0 auto;
	padding:24px 16px 60px;
	color:var(--lg-text);
	font-family:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
	line-height:1.6;
}
/* 글보기 화면은 비주얼노벨 플레이어가 더 크게 보이도록 폭을 조금 더 넓게 잡는다(비율은 그대로 유지) */
#bo_view_total.lg_wrap{
	max-width:1160px;
}

/* ---------- 헤더 ---------- */
.lg_head{ margin-bottom:20px; }
.lg_title{
	font-size:22px;
	font-weight:700;
	letter-spacing:-.02em;
	margin:0 0 4px;
}
.lg_notice_box{ margin-top:10px; }
.lg_notice_item{
	display:block;
	padding:8px 12px;
	border-radius:var(--lg-radius-sm);
	background:var(--lg-accent-soft);
	color:var(--lg-text);
	text-decoration:none;
	font-size:14px;
	margin-bottom:6px;
}
.lg_notice_item:hover{ text-decoration:underline; }

/* ---------- 뱃지 ---------- */
.lg_badge{
	display:inline-block;
	font-size:11px;
	font-weight:600;
	padding:2px 6px;
	border-radius:4px;
	line-height:1.4;
	vertical-align:middle;
}
.lg_badge_notice{ background:var(--lg-accent); color:#fff; }
.lg_badge_new{ background:#ff5a5f; color:#fff; margin-left:4px; }
.lg_badge_category{ background:var(--lg-accent-soft); color:var(--lg-accent); border:1px solid var(--lg-accent); font-weight:600; }

/* ---------- 카테고리 ---------- */
.lg_category ul{
	display:flex;
	flex-wrap:wrap;
	gap:6px;
	list-style:none;
	padding:0;
	margin:0 0 18px;
}
.lg_category a{
	display:inline-block;
	padding:6px 14px;
	border-radius:999px;
	background:var(--lg-surface);
	border:1px solid var(--lg-border);
	color:var(--lg-text-sub);
	text-decoration:none;
	font-size:13px;
}
.lg_category a#bo_cate_on,
.lg_category a:hover{
	background:var(--lg-accent);
	border-color:var(--lg-accent);
	color:#fff;
}

/* ---------- 툴바(카운트+검색) ---------- */
.lg_toolbar{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	justify-content:space-between;
	gap:12px;
	margin-bottom:14px;
}
.lg_count{
	font-size:13px;
	color:var(--lg-text-sub);
}
.lg_count strong{ color:var(--lg-text); }
.lg_cat_now{ margin-left:8px; }
.lg_cat_now strong{ color:var(--lg-accent); }
.lg_page_now{ margin-left:10px; }

.lg_search_form{
	display:flex;
	gap:6px;
}

/* ---------- 폼 요소 공통 ---------- */
.lg_input,
.lg_select,
.lg_textarea{
	border:1px solid var(--lg-border);
	border-radius:var(--lg-radius-sm);
	padding:8px 12px;
	font-size:14px;
	background:var(--lg-card-bg);
	color:var(--lg-text);
	outline:none;
	transition:border-color .15s ease;
}
.lg_input:focus,
.lg_select:focus,
.lg_textarea:focus{
	border-color:var(--lg-accent);
}
.lg_textarea{
	width:100%;
	resize:vertical;
	font-family:inherit;
}

.lg_btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:9px 16px;
	border-radius:var(--lg-radius-sm);
	border:1px solid var(--lg-border);
	background:var(--lg-card-bg);
	color:var(--lg-text);
	font-size:14px;
	font-weight:500;
	text-decoration:none;
	cursor:pointer;
	white-space:nowrap;
	flex-shrink:0;
	transition:background .15s ease,border-color .15s ease;
}
.lg_btn:hover{ background:var(--lg-surface); }
.lg_btn_primary{
	background:var(--lg-accent);
	border-color:var(--lg-accent);
	color:#fff;
}
.lg_btn_primary:hover{ background:#1e5adf; }
.lg_btn_ghost{ background:var(--lg-card-bg); }
.lg_btn_danger{ color:var(--lg-danger); border-color:#f6c9ca; }
.lg_btn_danger:hover{ background:#fff2f2; }

.lg_btn_search{
	background:var(--lg-text);
	color:#fff;
	border-color:var(--lg-text);
}

.lg_btn_group{
	display:flex;
	gap:8px;
	flex-wrap:wrap;
}
.lg_btn_group_end{ justify-content:flex-end; }

/* ---------- 목록 테이블 ---------- */
/* ---------- 카드형 목록 ---------- */
.lg_card_grid{
	display:grid;
	grid-template-columns:repeat(auto-fill, minmax(230px, 1fr));
	gap:18px;
	margin-bottom:8px;
}
.lg_card{
	display:flex;
	flex-direction:column;
	border:1px solid var(--lg-border);
	border-radius:var(--lg-radius);
	overflow:hidden;
	background:var(--lg-card-bg);
	box-shadow:var(--lg-shadow);
	text-decoration:none;
	color:inherit;
	transition:transform .15s ease, box-shadow .15s ease;
}
.lg_card:hover{
	transform:translateY(-3px);
	box-shadow:0 6px 18px rgba(0,0,0,.1);
}
.lg_card_notice{
	border-color:var(--lg-accent);
	background:var(--lg-accent-soft);
}
.lg_card_body{
	padding:20px 20px 18px;
	display:flex;
	flex-direction:column;
	gap:8px;
	flex:1;
}
.lg_card_badges{
	display:flex;
	gap:4px;
	flex-wrap:wrap;
	min-height:18px;
}
.lg_card_title{
	font-size:20px;
	font-weight:800;
	margin:0;
	line-height:1.4;
	letter-spacing:-.01em;
	color:var(--lg-text);
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.lg_card_subtitle{
	font-size:12.5px;
	color:var(--lg-text-sub);
	margin:0;
	line-height:1.5;
	display:-webkit-box;
	-webkit-line-clamp:1;
	-webkit-box-orient:vertical;
	overflow:hidden;
}
.lg_card_meta{
	margin-top:auto;
	padding-top:8px;
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	font-size:11.5px;
	color:var(--lg-text-sub);
}
.lg_card_meta span:not(:last-child)::after{
	content:"·";
	margin-left:8px;
	color:var(--lg-border);
}
.lg_empty{
	grid-column:1 / -1;
	text-align:center;
	padding:60px 10px;
	color:var(--lg-text-sub);
}

/* ---------- 하단 바 ---------- */
.lg_bottom_bar{
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:16px;
	margin-top:20px;
}
.lg_paging{ text-align:center; }
.lg_paging a,
.lg_paging strong,
.lg_paging span{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	min-width:32px;
	height:32px;
	margin:0 2px;
	border-radius:6px;
	text-decoration:none;
	color:var(--lg-text-sub);
	font-size:13px;
}
.lg_paging strong{
	background:var(--lg-accent);
	color:#fff;
}
.lg_paging a:hover{ background:var(--lg-surface); }

/* ---------- 폼(쓰기) ---------- */
.lg_form{
	background:var(--lg-card-bg);
	border:1px solid var(--lg-border);
	border-radius:var(--lg-radius);
	padding:24px;
	box-shadow:var(--lg-shadow);
}
.lg_form_row{ margin-bottom:16px; }
.lg_form_row_split{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:12px;
}
.lg_form_row_opts{
	display:flex;
	gap:16px;
}
.lg_label{
	display:block;
	font-size:13px;
	font-weight:600;
	margin-bottom:6px;
	color:var(--lg-text-sub);
}
.lg_required{ color:var(--lg-danger); }
.lg_optional{ color:var(--lg-text-sub); font-weight:400; font-size:12px; }
.lg_vn_slot_type{
	font-size:11px;
	font-weight:600;
	color:var(--lg-accent);
	background:var(--lg-accent-soft);
	padding:2px 8px;
	border-radius:10px;
	vertical-align:middle;
}
.lg_vn_current_file{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:12.5px;
	color:var(--lg-accent);
	background:var(--lg-accent-soft);
	border:1px solid var(--lg-accent);
	border-radius:999px;
	padding:4px 12px;
	margin-bottom:8px;
}
.lg_vn_current_file strong{
	font-weight:600;
	max-width:220px;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}
.lg_vn_current_file_new{
	color:#1f7a3f;
	background:rgba(31,122,63,.1);
	border-color:#1f7a3f;
}
.lg_file_box{
	display:block;
	width:100%;
	font-size:14px;
	color:var(--lg-text);
	background:var(--lg-card-bg);
	border:1px solid var(--lg-border);
	border-radius:var(--lg-radius-sm);
	padding:10px 12px;
}
.lg_vn_url_input{
	margin-top:8px;
	font-size:13px;
}
.lg_vn_manual_box{
	border:1px dashed var(--lg-border);
	border-radius:var(--lg-radius-sm);
	padding:16px;
}
.lg_vn_manual_chars{ margin:10px 0 16px; }
.lg_vn_manual_char_list{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
	margin-bottom:10px;
	min-height:0;
}
.lg_vn_char_chip{
	display:inline-flex;
	align-items:center;
	gap:6px;
	border:1.5px solid var(--lg-border);
	border-radius:999px;
	padding:5px 10px 5px 8px;
	font-size:13px;
	background:var(--lg-card-bg);
}
.lg_vn_char_dot{
	width:14px;height:14px;border-radius:50%;flex-shrink:0;
	padding:0;border:none;cursor:pointer;
	-webkit-appearance:none;appearance:none;
	overflow:hidden;
}
.lg_vn_char_dot::-webkit-color-swatch-wrapper{ padding:0; }
.lg_vn_char_dot::-webkit-color-swatch{ border:none; border-radius:50%; }
.lg_vn_char_dot::-moz-color-swatch{ border:none; border-radius:50%; }
.lg_vn_char_remove{
	border:none;background:none;color:var(--lg-text-sub);
	cursor:pointer;font-size:14px;line-height:1;padding:0 2px;
}
.lg_vn_char_remove:hover{ color:var(--lg-danger); }
.lg_vn_manual_char_add{
	display:flex;
	gap:8px;
}
.lg_vn_manual_char_add .lg_input{ flex:1; }
.lg_vn_color_input{
	width:40px;
	height:38px;
	padding:2px;
	border:1px solid var(--lg-border);
	border-radius:var(--lg-radius-sm);
	background:var(--lg-card-bg);
	cursor:pointer;
	flex-shrink:0;
}
.lg_vn_manual_lines{
	display:flex;
	flex-direction:column;
	gap:6px;
	margin-bottom:12px;
}
.lg_vn_line_row{
	display:flex;
	align-items:center;
	gap:8px;
	padding:8px 10px;
	border:1px solid var(--lg-border);
	border-radius:var(--lg-radius-sm);
	background:var(--lg-surface);
	font-size:13px;
}
.lg_vn_line_name{ font-weight:700; flex-shrink:0; }
.lg_vn_line_text{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lg_vn_line_btn{
	flex-shrink:0;
	font-size:11.5px;
	background:var(--lg-card-bg);
	border:1px solid var(--lg-border);
	border-radius:6px;
	padding:4px 8px;
	cursor:pointer;
	color:var(--lg-text-sub);
}
.lg_vn_line_btn:hover{ color:var(--lg-text); border-color:var(--lg-accent); }
.lg_vn_line_btn:disabled{ opacity:.35; cursor:default; }
.lg_vn_line_btn:disabled:hover{ color:var(--lg-text-sub); border-color:var(--lg-border); }
.lg_vn_manual_line_add{
	display:flex;
	gap:8px;
	flex-wrap:wrap;
}
.lg_vn_manual_line_add .lg_select{ flex:0 0 140px; }
.lg_vn_manual_line_add .lg_input{ flex:1; min-width:160px; }

.lg_vn_preview_row{
	display:flex;
	align-items:center;
	gap:10px;
	flex-wrap:wrap;
}
.lg_vn_preview_status{
	font-size:12.5px;
	color:var(--lg-text-sub);
}
#lgvnEditorMount:empty{ display:none; }
#lgvnEditorMount{ margin-top:14px; }
.lg_input,
.lg_select{ width:100%; }
.lg_check{
	display:inline-flex;
	align-items:center;
	gap:6px;
	font-size:13px;
	color:var(--lg-text-sub);
}
.lg_hint{
	font-size:12px;
	color:var(--lg-text-sub);
}
.lg_file{ display:block; margin-bottom:6px; font-size:13px; }

/* ---------- 보기(view) ---------- */
.lg_view{
	padding:0;
}
.lg_view_head{
	padding-bottom:8px;
	margin-bottom:16px;
}
.lg_view_subject{
	font-size:21px;
	font-weight:700;
	margin:0 0 10px;
	letter-spacing:-.02em;
}
.lg_view_subtitle{
	font-size:14px;
	color:var(--lg-text-sub);
	margin:-4px 0 12px;
}
.lg_vn_missing{
	background:rgba(229,72,77,.08);
	border:1px solid rgba(229,72,77,.3);
	color:var(--lg-danger);
	border-radius:var(--lg-radius-sm);
	padding:12px 16px;
	font-size:13.5px;
	margin-bottom:16px;
}
.lgvn-embed{
	margin:4px 0 24px;
}

.lg_view_links{
	display:flex;
	gap:10px;
	margin-bottom:20px;
}
.lg_view_links a{
	font-size:13px;
	color:var(--lg-accent);
}

.lg_view_actions{ justify-content:flex-end; margin-top:22px; }

/* =========================================================
   반응형 (모바일)
   ========================================================= */
@media (max-width:768px){
	.lg_wrap{ padding:16px 12px 48px; }
	.lg_title{ font-size:19px; }
	.lg_toolbar{ flex-direction:column; align-items:stretch; }
	.lg_search_form{ width:100%; }
	.lg_search_form .lg_input{ flex:1; min-width:0; }
	.lg_card_grid{ grid-template-columns:1fr; gap:14px; }

	.lg_form{ padding:18px; border-radius:8px; }
	.lg_form_row_split{ grid-template-columns:1fr; }
	.lg_view_subject{ font-size:18px; }
	.lg_view_actions{ justify-content:flex-start; }
	.lg_btn{ flex:1; }
	.lg_view_actions .lg_btn{ flex:none; }
}

@media (max-width:420px){
	.lg_btn_group .lg_btn{ font-size:13px; padding:8px 12px; }
}