@charset "utf-8";

/* 모바일 목록 */
@media all and (max-width:767px) {
	.responsive #bo_list .float-left.float-md-none {
		margin-right:1.0rem;
	}
	.responsive #bo_list .na-title {
		margin-bottom:0.14rem;
	}
}

/* 게시판 읽기 */
#bo_v_title {
	font-size:23px;
	font-weight:bold;
	line-height:1.4;
	letter-spacing:-1px;
}
#bo_v_con {
	min-height:200px; 
	word-break:break-all;
	overflow:hidden
}
@media all and (max-width:575px) {
	.responsive #bo_v_title {
		font-size:20px;
		line-height:1.5;
	}
	.responsive #bo_v_con { 
		min-height:140px; 
	}
}

#bo_v_con img {
	max-width:100%;
	height:auto
}
#bo_v_img {
	width:100%;
	text-align:center;
	overflow:hidden;
	zoom:1;
}
#bo_v_img:after {
	display:block;
	visibility:hidden;
	clear:both;
	content:"";
}
#bo_v_img a.view_image {
	display:block;
}
#bo_v_img img {
	margin-bottom:1.0rem;
}

/* 게시판 읽기 : SNS 공유 */
#bo_v_sns_icon { 
	margin:-5px auto; 
}
#bo_v_sns_icon img { 
	width:40px; 
	border-radius:50%; 
	margin:5px;
}

/* 게시판 댓글 : list + form → see the web-board-comments section at the end */

/* 게시판 댓글 : SNS 등록 */
#bo_vc_opt ol {	
	margin:0;
	padding:0;
	list-style:none;
	zoom:1; 
	background:#ccc;
	border-radius:3px;
}
#bo_vc_opt ol:after { 
	display:block;
	visibility:hidden;
	clear:both;
	content:""; 
}
#bo_vc_opt ol li { 
	float:left;
	margin:0; 
}
#bo_vc_send_sns ul { 
	margin:0;
	padding:0;
	list-style:none;
	zoom:1; 
}
#bo_vc_send_sns ul:after { 
	display:block;
	visibility:hidden;
	clear:both;
	content:""; 
}
#bo_vc_send_sns ul li {	
	float:left;
	margin:0 1.0rem 0 0;
}
#bo_vc_send_sns input {	
	margin:0 0 0 0.5rem;
}

/* 게시판 쓰기 → see the web-board-write section at the end */
/* ==========================================================================
   web-board-list : shared toolbar / pills / search / paging (copied from Web-Basic-List;
   its table rules are unused here — the card grid is the web-board-gallery section at the end).
   Markup: list.skin.php → partials/list/*.php
   ========================================================================== */
/* Toolbar controls share the theme control height (theme.css --web-ctl-h) with 관리 / 글쓰기. */
.web-board-list { --wbl-h:var(--web-ctl-h, 42px); }
.web-board-list { --wbl-accent:var(--web-primary); --wbl-accent-bg:color-mix(in srgb, var(--web-primary) 10%, #fff); --wbl-line:#e5e7eb; --wbl-text:var(--web-primary-foreground); --wbl-muted:#868e96; }

/* Toolbar: sort pills (left) + search (right) */
.web-board-list .wbl-toolbar { display:flex; align-items:center; flex-wrap:wrap; gap:.75rem; margin-bottom:1rem; }
.web-board-list .wbl-sorts { display:flex; flex-wrap:wrap; gap:.5rem; margin-right:auto; }
.web-board-list .wbl-pill {
	display:inline-flex; align-items:center; height:var(--wbl-h); padding:0 1rem;
	border:1px solid var(--wbl-line); border-radius:8px; background:#fff;
	color:#495057; font-size:13px; font-weight:600; line-height:1.3; white-space:nowrap;
	transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.web-board-list .wbl-pill:hover { border-color:var(--wbl-accent); color:var(--wbl-accent); text-decoration:none; }
.web-board-list .wbl-pill.active { border-color:var(--wbl-accent); color:var(--wbl-accent); background:var(--wbl-accent-bg); }

.web-board-list .wbl-search { display:flex; height:var(--wbl-h); border:1px solid var(--wbl-line); border-radius:8px; overflow:hidden; background:#fff; }
.web-board-list .wbl-search-sfl {
	border:0; border-right:1px solid var(--wbl-line); background:#f8f9fa;
	padding:0 .6rem; font-size:13px; color:#495057; outline:none;
}
.web-board-list .wbl-search-input { border:0; padding:0 .8rem; font-size:14px; width:220px; outline:none; }
.web-board-list .wbl-search-btn {
	border:0; background:var(--web-primary-foreground); color:#fff; font-weight:700; font-size:13px;
	padding:0 1.1rem; white-space:nowrap; cursor:pointer;
}
.web-board-list .wbl-search-btn:hover { background:color-mix(in srgb, var(--web-primary-foreground) 85%, #fff); }

/* Table card */
.web-board-list .wbl-table { border:1px solid var(--wbl-line); border-radius:12px; overflow:hidden; background:#fff; }
.web-board-list .wbl-thead,
.web-board-list .wbl-row { display:flex; align-items:center; }
.web-board-list .wbl-thead { background:var(--web-primary-foreground); border-bottom:1px solid var(--web-primary-foreground); color:rgba(255,255,255,.85); font-size:13px; font-weight:600; }   /* dark header row (color file's foreground) */
.web-board-list .wbl-thead > div { padding:.8rem .5rem; color:inherit; }   /* column classes color the rows; header labels all use the light header color */
.web-board-list .wbl-tbody { list-style:none; margin:0; padding:0; }
.web-board-list .wbl-row { border-bottom:1px solid #eef0f2; font-size:14px; transition:background .12s ease; }
.web-board-list .wbl-row:last-child { border-bottom:0; }
.web-board-list .wbl-row:hover { background:#fafbfc; }
.web-board-list .wbl-row > div { padding:.8rem .5rem; }

/* Columns */
.web-board-list .wbl-c-num  { flex:0 0 72px; text-align:center; color:var(--wbl-muted); font-size:13px; }
.web-board-list .wbl-c-subj { flex:1 1 auto; min-width:0; display:flex; align-items:center; gap:.4rem; }
.web-board-list .wbl-thead .wbl-c-subj { display:block; }
.web-board-list .wbl-c-name { flex:0 0 140px; color:#495057; font-size:13px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.web-board-list .wbl-c-date { flex:0 0 80px; text-align:center; color:var(--wbl-muted); font-size:13px; }
.web-board-list .wbl-c-hit  { flex:0 0 64px; text-align:center; color:var(--wbl-muted); font-size:13px; }

/* Subject cell */
.web-board-list .wbl-subject { color:var(--wbl-text); overflow:hidden; white-space:nowrap; text-overflow:ellipsis; min-width:0; }
.web-board-list .wbl-subject:hover { color:var(--wbl-accent); text-decoration:none; }
.web-board-list .wbl-cate { color:var(--wbl-accent); font-weight:600; margin-right:.35rem; }
.web-board-list .wbl-cate:after { content:"|"; color:#ced4da; margin-left:.35rem; font-weight:400; }
.web-board-list .wbl-lock, .web-board-list .wbl-reply, .web-board-list .wbl-file { color:#adb5bd; font-size:12px; margin-right:.2rem; }
.web-board-list .wbl-cmt { color:var(--wbl-accent); font-size:12px; font-weight:700; flex:0 0 auto; }
.web-board-list .wbl-chk { margin-right:.35rem; }

/* Badges */
.web-board-list .wbl-badge-new {
	flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center;
	width:16px; height:16px; border-radius:4px;
	background:#ff4d5e; color:#fff; font-size:10px; font-weight:800; line-height:1;
}
.web-board-list .wbl-badge-notice {
	display:inline-block; padding:.15rem .5rem; border-radius:4px;
	background:#ffd43b; color:var(--web-primary-foreground); font-size:12px; font-weight:700;
}
.web-board-list .wbl-now { color:var(--wbl-accent); font-weight:700; }

/* Row states */
.web-board-list .wbl-row.is-notice .wbl-subject { font-weight:700; }
.web-board-list .wbl-row.is-current { background:var(--wbl-accent-bg); }
.web-board-list .wbl-row.is-current .wbl-subject { color:var(--wbl-accent); font-weight:700; }

.web-board-list .wbl-empty { padding:3.5rem 1rem; text-align:center; color:var(--wbl-muted); font-size:14px; }

/* Tablet/phone: hide the head + number column, stack subject over a meta line */
@media all and (max-width:767px) {
	.web-board-list .wbl-table { border-radius:0; border-left:0; border-right:0; }
	.web-board-list .wbl-thead { display:none; }
	.web-board-list .wbl-row { flex-wrap:wrap; padding:.75rem 1rem; }
	.web-board-list .wbl-row > div { padding:0; }
	.web-board-list .wbl-row .wbl-c-num { display:none; }
	.web-board-list .wbl-row.is-notice .wbl-c-num { display:block; flex:0 0 auto; margin-right:.5rem; }
	.web-board-list .wbl-c-subj { flex:1 0 100%; margin-bottom:.35rem; }          /* meta wraps to its own line */
	.web-board-list .wbl-row.is-notice .wbl-c-subj { flex-basis:calc(100% - 3.5rem); } /* leave room for the 공지 badge */
	.web-board-list .wbl-c-name, .web-board-list .wbl-c-date, .web-board-list .wbl-c-hit {
		flex:0 0 auto; text-align:left; font-size:12px; margin-right:.9rem;
	}
	.web-board-list .wbl-c-name { max-width:45%; }
}
@media all and (min-width:576px) and (max-width:767px) {
	.web-board-list .wbl-table { border-radius:12px; border:1px solid var(--wbl-line); }
}
@media all and (max-width:575px) {
	.web-board-list .wbl-search { width:100%; }
	.web-board-list .wbl-search-input { flex:1 1 auto; width:auto; min-width:0; }
}

/* ==========================================================================
   web-board-view : post view (-> view.skin.php → partials/view/*.php)
   Breadcrumb replaces the theme title bar; white header card; body on the page;
   reaction buttons; prev/next card; 목록 / 글쓰기 (theme.css .web-actions).
   ========================================================================== */
body:has(.web-board-view) #nt_title { display:none; } /* the crumb + header card act as the page header */

.web-board-view { --wbv-line:#e5e7eb; --wbv-muted:#868e96; }

/* Breadcrumb (lifted to the top of the page container by breadcrumb.php) */
.wbv-crumb { display:flex; align-items:center; min-width:0; padding-top:1.1rem; padding-bottom:1rem; color:#868e96; white-space:nowrap; }
@media all and (max-width:575px) { .responsive .wbv-crumb { padding-top:.9rem; } }
.wbv-crumb a { color:#868e96; }
.wbv-crumb a:hover { color:var(--web-primary-foreground); text-decoration:none; }
.wbv-crumb .wbv-crumb-sep { margin:0 .4rem; color:#c3c8d1; }
.wbv-crumb .wbv-crumb-cur { min-width:0; overflow:hidden; text-overflow:ellipsis; color:var(--web-primary-foreground); font-weight:700; }

/* Header card */
.web-board-view .wbv-head {
	background:#fff; border:1px solid var(--wbv-line); border-radius:12px;
	box-shadow:0 4px 14px rgba(0,0,0,.06);
	padding:1.4rem 1.5rem; margin-bottom:1.5rem;
}
.web-board-view .wbv-head-top { display:flex; align-items:flex-start; gap:1rem; }
.web-board-view .wbv-head-main { flex:1 1 auto; min-width:0; }
.web-board-view .wbv-cate {
	display:inline-block; margin-bottom:.5rem; padding:.2rem .6rem; border-radius:6px;
	background:color-mix(in srgb, var(--web-primary) 12%, #fff); color:var(--web-primary-hover);
	font-size:12px; font-weight:700;
}
.web-board-view .wbv-title { margin:0 0 1rem; font-size:24px; line-height:1.35; letter-spacing:-.5px; color:var(--web-primary-foreground); word-break:keep-all; overflow-wrap:anywhere; }
.web-board-view .wbv-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.35rem 1rem; color:var(--wbv-muted); font-size:13px; }
.web-board-view .wbv-author { display:inline-flex; align-items:center; gap:.5rem; color:var(--web-primary-foreground); font-weight:700; }
.web-board-view .wbv-avatar {
	display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
	width:28px; height:28px; border-radius:50%;
	background:var(--web-primary-foreground); color:var(--web-primary); font-size:13px; font-weight:800;
}
.web-board-view .wbv-name a, .web-board-view .wbv-name { color:var(--web-primary-foreground); }
.web-board-view .wbv-lv {
	padding:.05rem .4rem; border:1px solid color-mix(in srgb, var(--web-primary) 60%, #fff); border-radius:5px;
	background:color-mix(in srgb, var(--web-primary) 12%, #fff); color:var(--web-primary-hover);
	font-size:11px; font-weight:800; line-height:1.4;
}

/* Body */
.web-board-view #bo_v_con { min-height:120px; margin-bottom:1.5rem; color:#343a40; font-size:14px !important; line-height:1.8; } /* !important: the theme font css forces #bo_v_con to 18px */
.web-board-view .view-content a { color:var(--web-primary-hover); text-decoration:underline; }
/* Images span the full content width (attached images + images in the post body).
   Emoticons (nariya /skin/emo/) keep their small inline size. */
.web-board-view #bo_v_img img,
.web-board-view .view-content img:not([src*="/skin/emo/"]) {
	display:block; width:100% !important; max-width:100%; height:auto !important;
	margin:0 0 1rem; border-radius:10px;
}
.web-board-view #bo_v_img a.view_image { display:block; }
.web-board-view .wbv-tags { margin-top:1rem; }

/* Links / attachments / signature */
.web-board-view .wbv-data { list-style:none; margin:0 0 1.5rem; padding:0; border:1px solid var(--wbv-line); border-radius:12px; background:#fff; overflow:hidden; }
.web-board-view .wbv-data li { display:flex; align-items:center; gap:1rem; padding:.75rem 1.25rem; font-size:14px; }
.web-board-view .wbv-data li + li { border-top:1px solid var(--wbv-line); }
.web-board-view .wbv-data-label { flex:0 0 40px; color:var(--wbv-muted); font-size:13px; font-weight:700; }
.web-board-view .wbv-data-val { flex:1 1 auto; min-width:0; color:var(--web-primary-foreground); word-break:break-all; }
.web-board-view a.wbv-data-val:hover { color:var(--web-primary-hover); text-decoration:none; }
.web-board-view .wbv-data-cnt { margin-left:.35rem; color:var(--wbv-muted); font-size:12px; }

/* Reactions */
.web-board-view .wbv-react { display:flex; flex-wrap:wrap; justify-content:center; gap:.6rem; margin:0 0 2rem; padding:0 1rem; }
.web-board-view .wbv-react-btn {
	display:inline-flex; align-items:center; gap:.4rem; height:var(--web-ctl-h, 42px); padding:0 1.2rem;
	background:#fff; border:1px solid var(--wbv-line); border-radius:10px;
	color:#495057; font-size:14px; font-weight:700; cursor:pointer;
	transition:border-color .15s ease, color .15s ease;
}
.web-board-view .wbv-react-btn:hover { border-color:var(--web-primary-foreground); color:var(--web-primary-foreground); }
.web-board-view .wbv-react-btn:focus { outline:none; }
.web-board-view .wbv-react-cnt { color:var(--web-primary-hover); }
.web-board-view .wbv-react-danger { color:#e03131; border-color:color-mix(in srgb, #e03131 45%, #fff); }
.web-board-view .wbv-react-danger:hover { color:#fff; background:#e03131; border-color:#e03131; }

/* Prev / next + buttons */
.web-board-view .wbv-nav { margin-bottom:2rem; }
.web-board-view .wbv-nav-card { background:#fff; border:1px solid var(--wbv-line); border-radius:12px; overflow:hidden; margin-bottom:1rem; }
.web-board-view .wbv-nav-row { display:flex; align-items:center; gap:1rem; padding:.85rem 1.25rem; text-decoration:none; }
.web-board-view .wbv-nav-row + .wbv-nav-row { border-top:1px solid var(--wbv-line); }
.web-board-view .wbv-nav-row:hover { background:#f8f9fa; text-decoration:none; }
.web-board-view .wbv-nav-label { flex:0 0 auto; width:48px; color:var(--wbv-muted); font-size:13px; font-weight:700; }
.web-board-view .wbv-nav-title { flex:1 1 auto; min-width:0; color:var(--web-primary-foreground); font-size:14px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.web-board-view .wbv-nav-row:hover .wbv-nav-title { color:var(--web-primary-hover); }
.web-board-view .wbv-nav-date { flex:0 0 auto; color:var(--wbv-muted); font-size:12px; }

@media all and (max-width:575px) {
	/* Phones: the view keeps a 1rem side gutter (same as the sidebar cards), so cards stay inset and rounded */
	.responsive .web-board-view { padding-left:1rem; padding-right:1rem; }
	.web-board-view .wbv-head { padding:1.1rem 1rem; }
	.web-board-view .wbv-title { font-size:20px; }
	.web-board-view .wbv-nav-date { display:none; }
}

/* ==========================================================================
   web-board-comments : comment card (-> view_comment.skin.php)
   One white card: "댓글 N" head, items (avatar · name · LV · time · actions,
   content, 답글), replies as indented boxes, then the write form.
   ========================================================================== */
.web-board-comments {
	--wbc-line:#e5e7eb; --wbc-muted:#868e96;
	background:#fff; border:1px solid var(--wbc-line); border-radius:12px;
	box-shadow:0 4px 14px rgba(0,0,0,.06);
	padding:1.25rem 1.5rem 1.5rem; margin-bottom:1.5rem;
}
.web-board-comments .wbc-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem; }
.web-board-comments .wbc-title { margin:0; font-size:17px; color:var(--web-primary-foreground); }
.web-board-comments .wbc-title b { color:var(--web-primary); font-weight:inherit; }
.web-board-comments .wbc-page { margin-left:.35rem; font-size:13px; color:var(--wbc-muted); }
.web-board-comments .wbc-sort > a { color:var(--wbc-muted); font-size:13px; }
.web-board-comments .wbc-sort .dropdown-menu { padding:0; border:1px solid var(--wbc-line); border-radius:10px; overflow:hidden; box-shadow:0 8px 24px rgba(0,0,0,.08); }
.web-board-comments .wbc-sort .dropdown-item { padding:.55rem 1rem; font-size:13px; }

/* Item */
.web-board-comments .wbc-item { display:flex; gap:.75rem; padding:1rem 0; border-bottom:1px dashed var(--wbc-line); }
.web-board-comments .wbc-avatar {
	display:inline-flex; align-items:center; justify-content:center; flex:0 0 auto;
	width:34px; height:34px; border-radius:50%;
	background:var(--web-primary-foreground); color:var(--web-primary); font-size:14px; font-weight:800;
}
.web-board-comments .wbc-main { flex:1 1 auto; min-width:0; }
.web-board-comments .wbc-meta { display:flex; flex-wrap:wrap; align-items:center; gap:.25rem .55rem; font-size:13px; }
.web-board-comments .wbc-name, .web-board-comments .wbc-name a { color:var(--web-primary-foreground); font-weight:700; }
.web-board-comments .wbc-lv {
	padding:0 .35rem; border:1px solid color-mix(in srgb, var(--web-primary) 60%, #fff); border-radius:5px;
	background:color-mix(in srgb, var(--web-primary) 12%, #fff); color:var(--web-primary-hover);
	font-size:11px; font-weight:800; line-height:1.5;
}
.web-board-comments .wbc-writer { padding:0 .35rem; border-radius:5px; background:var(--web-primary-foreground); color:var(--web-primary); font-size:11px; font-weight:700; line-height:1.5; }
.web-board-comments .wbc-time { color:var(--wbc-muted); font-size:12px; }
.web-board-comments .wbc-act { color:var(--wbc-muted); font-size:12px; font-weight:600; }
.web-board-comments .wbc-act:hover { color:var(--web-primary-hover); text-decoration:none; }
.web-board-comments .wbc-content { margin-top:.35rem; color:#343a40; font-size:14px; line-height:1.65; word-break:break-all; overflow:hidden; }
.web-board-comments .wbc-content img { max-width:100%; height:auto; }
.web-board-comments .wbc-lucky { margin-top:.35rem; color:var(--wbc-muted); font-size:12px; }
.web-board-comments .wbc-lucky b { color:var(--web-primary-hover); }
.web-board-comments .wbc-foot { display:flex; gap:.9rem; margin-top:.45rem; }
.web-board-comments .wbc-slot:empty { display:none; }

/* Replies: indented, boxed */
.web-board-comments .wbc-item.is-reply {
	margin:.6rem 0 .6rem 2.75rem; padding:.85rem 1rem;
	border:1px solid var(--wbc-line); border-radius:10px; background:#fafbfc;
}
.web-board-comments .wbc-item.is-reply + .wbc-item:not(.is-reply) { border-top:1px dashed var(--wbc-line); }

.web-board-comments .wbc-empty { padding:1.5rem 0; color:var(--wbc-muted); font-size:14px; text-align:center; border-bottom:1px dashed var(--wbc-line); }
.web-board-comments .wbc-paging { display:flex; flex-direction:column; align-items:center; gap:.75rem; padding:1rem 0; border-bottom:1px dashed var(--wbc-line); }

/* Write form (also moved under a comment for 답글 / 수정 by comment_box()) */
.web-board-comments #bo_vc_w { margin-top:1rem; }
.web-board-comments .wbc-slot #fviewcomment { margin-top:.75rem; }
.web-board-comments .wbc-guest { display:flex; gap:.5rem; margin-bottom:.5rem; }
.web-board-comments .wbc-input,
.web-board-comments .wbc-textarea {
	width:100%; min-width:0; border:1px solid var(--wbc-line); border-radius:10px; background:#fff;
	padding:.6rem .85rem; font-size:14px; color:#343a40; outline:none;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.web-board-comments .wbc-textarea { display:block; min-height:110px; resize:vertical; line-height:1.6; }
.web-board-comments .wbc-input:focus,
.web-board-comments .wbc-textarea:focus { border-color:var(--web-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--web-primary) 18%, transparent); }
.web-board-comments .wbc-count { margin-bottom:.4rem; color:var(--wbc-muted); font-size:12px; }
.web-board-comments .wbc-count b { color:var(--web-primary-hover); }
.web-board-comments .wbc-captcha { margin-top:.75rem; text-align:center; font-size:13px; }
.web-board-comments .wbc-captcha #captcha { justify-content:center; } /* center the controls under the centered hint (write form captcha stays left) */
.web-board-comments .wbc-form-foot { display:flex; align-items:center; justify-content:space-between; gap:.75rem; margin-top:.75rem; }
.web-board-comments .wbc-opts { display:flex; align-items:center; flex-wrap:wrap; gap:.25rem .75rem; color:var(--wbc-muted); font-size:13px; }
/* Checkboxes / radios in our comment + write forms: 16px box centered on the label text
   (the theme's default box is taller than the row and hangs low). */
.web-board-comments .wbc-opts .custom-control,
.web-board-write .custom-control { display:flex; align-items:center; min-height:0; padding-left:0; margin-right:.25rem; }
.web-board-comments .wbc-opts .custom-control-label,
.web-board-write .custom-control-label { display:inline-flex; align-items:center; gap:.4rem; position:relative; line-height:24px; cursor:pointer; }
.web-board-comments .wbc-opts .custom-control-label::before,
.web-board-comments .wbc-opts .custom-control-label::after,
.web-board-write .custom-control-label::before,
.web-board-write .custom-control-label::after { position:static; flex:0 0 auto; order:-1; width:16px; height:16px; margin:0; }
.web-board-comments .wbc-opts .custom-checkbox .custom-control-label::before,
.web-board-write .custom-checkbox .custom-control-label::before { border-radius:4px; border-color:#ced4da; }
.web-board-write .custom-radio .custom-control-label::before { border-radius:50%; border-color:#ced4da; }
.web-board-comments .wbc-opts .custom-control-label::after,
.web-board-write .custom-control-label::after { position:absolute; left:0; top:50%; transform:translateY(-50%); background-size:10px 10px; }
.web-board-comments .wbc-opts .btn-group { display:inline-flex; align-items:center; height:24px; }
.web-board-comments .wbc-opts .btn-group .btn { display:inline-flex; align-items:center; line-height:1; }
.web-board-comments .wbc-submit { padding:0 1.6rem; }
.web-board-comments .wbc-login { margin-top:1rem; padding:1.25rem; border:1px dashed var(--wbc-line); border-radius:10px; text-align:center; font-size:14px; color:var(--wbc-muted); }
.web-board-comments .wbc-login a { color:var(--web-primary-hover); font-weight:700; }

@media all and (max-width:575px) {
	.web-board-comments { padding:1.1rem 1rem 1.25rem; }
	.web-board-comments .wbc-item.is-reply { margin-left:1.25rem; }
}

/* View: 목록 button — accent outline + accent text (fills on hover) */
.web-board-view .wbv-list-btn { border-color:var(--web-primary); color:var(--web-primary-hover); }
.web-board-view .wbv-list-btn:hover { background:var(--web-primary); border-color:var(--web-primary); color:#fff; }

/* ==========================================================================
   web-board-write : write / edit form (-> write.skin.php → partials/write/*.php)
   One white card: labelled fields, framed editor, drop zone, links, footer buttons.
   ========================================================================== */
.web-board-write { --wbw-line:#e5e7eb; --wbw-muted:#868e96; }
.web-board-write .wbw-card {
	background:#fff; border:1px solid var(--wbw-line); border-radius:12px;
	box-shadow:0 4px 14px rgba(0,0,0,.06);
	padding:1.5rem 1.5rem 1.25rem;
}
.web-board-write .wbw-field { margin-bottom:1.25rem; }
.web-board-write .wbw-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 1rem; }
.web-board-write .wbw-label { display:block; margin-bottom:.45rem; color:var(--web-primary-foreground); font-size:13px; font-weight:700; }
.web-board-write .wbw-help { margin:0 0 .45rem; color:var(--wbw-muted); font-size:12px; }
.web-board-write .wbw-help strong, .web-board-write #char_count { color:var(--web-primary-hover); }
.web-board-write .wbw-help-inline { color:var(--wbw-muted); font-size:12px; }

/* Inputs */
.web-board-write .wbw-input,
.web-board-write .wbw-editor textarea#wr_content {
	display:block; width:100%; min-width:0; height:var(--web-ctl-h, 42px);
	border:1px solid var(--wbw-line); border-radius:10px; background:#fff;
	padding:0 .9rem; font-size:14px; color:#343a40; outline:none;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.web-board-write .wbw-select { padding-right:2rem; appearance:auto; }
.web-board-write .wbw-input:focus,
.web-board-write .wbw-editor textarea#wr_content:focus {
	border-color:var(--web-primary);
	box-shadow:0 0 0 3px color-mix(in srgb, var(--web-primary) 18%, transparent);
}
.web-board-write .wbw-input::placeholder, .web-board-write textarea::placeholder { color:#adb5bd; }

/* Editor frame: plain textarea or SmartEditor/CHEditor iframe */
.web-board-write .wbw-editor { border:1px solid var(--wbw-line); border-radius:10px; overflow:hidden; background:#fff; }
.web-board-write .wbw-editor textarea#wr_content {
	height:auto; min-height:300px; border:0; border-radius:0; padding:.9rem; line-height:1.7; resize:vertical;
	margin:0 !important; box-shadow:none;
}
.web-board-write .wbw-editor:focus-within { border-color:var(--web-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--web-primary) 18%, transparent); }
.web-board-write .wbw-editor.is-dhtml iframe { display:block; }
.web-board-write .wbw-editor.is-dhtml textarea#wr_content { display:none !important; } /* the editor syncs into this hidden field */
.web-board-write .wbw-editor .cke_sc { padding:.5rem .6rem; } /* "단축키 일람" bar above SmartEditor */
.web-board-write .wbw-clip { display:flex; justify-content:flex-start; padding:.4rem .6rem; border-top:1px solid var(--wbw-line); background:#fafbfc; }
.web-board-write .wbw-clip .btn-group { gap:.25rem; }
.web-board-write .wbw-clip .btn { padding:.3rem .55rem; border:0; border-radius:6px !important; background:transparent; color:#6b7280; font-size:14px; }
.web-board-write .wbw-clip .btn:hover { background:#eef0f2; color:var(--web-primary-foreground); }

/* Options (공지 / 비밀글 …) and radio rows */
.web-board-write .wbw-options { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem 1.25rem; margin-top:.6rem; font-size:13px; color:#495057; }
.web-board-write .wbw-options .custom-control-label { cursor:pointer; }

/* 옵션 toggles (공지 / 비밀글 / HTML …): pill buttons like the list filters; the checkbox is
   visually hidden and its checked state styles the pill. */
.web-board-write .wbw-toggles { display:flex; flex-wrap:wrap; gap:.5rem; }
.web-board-write .wbw-toggle { position:relative; margin:0; cursor:pointer; }
.web-board-write .wbw-toggle input { position:absolute; opacity:0; width:1px; height:1px; pointer-events:none; }
.web-board-write .wbw-toggle span {
	display:inline-flex; align-items:center; height:var(--web-ctl-h, 42px); padding:0 1rem;
	border:1px solid var(--wbw-line); border-radius:8px; background:#fff;
	color:#495057; font-size:13px; font-weight:600; white-space:nowrap; user-select:none;
	transition:border-color .15s ease, color .15s ease, background .15s ease;
}
.web-board-write .wbw-toggle:hover span { border-color:var(--web-primary); color:var(--web-primary); }
.web-board-write .wbw-toggle input:checked + span { border-color:var(--web-primary); color:var(--web-primary); background:color-mix(in srgb, var(--web-primary) 10%, #fff); }
.web-board-write .wbw-toggle input:focus-visible + span { box-shadow:0 0 0 3px color-mix(in srgb, var(--web-primary) 25%, transparent); }

/* Drop zone + file chips */
.web-board-write .wbw-drop {
	display:flex; align-items:center; justify-content:center; gap:.6rem; flex-wrap:wrap;
	min-height:74px; margin:0; padding:1rem;
	border:1.5px dashed #cfd4da; border-radius:10px; background:#fafbfc;
	color:#6b7280; font-size:13px; text-align:center; cursor:pointer;
	transition:border-color .15s ease, background .15s ease, color .15s ease;
}
.web-board-write .wbw-drop .fa { font-size:20px; color:#adb5bd; }
.web-board-write .wbw-drop em { font-style:normal; color:#9aa0aa; }
.web-board-write .wbw-drop:hover,
.web-board-write .wbw-drop.is-over { border-color:var(--web-primary); background:color-mix(in srgb, var(--web-primary) 6%, #fff); color:var(--web-primary-foreground); }
.web-board-write .wbw-drop:hover .fa,
.web-board-write .wbw-drop.is-over .fa { color:var(--web-primary); }
.web-board-write .wbw-files { list-style:none; margin:0; padding:0; }
.web-board-write .wbw-files:empty { display:none; }
.web-board-write .wbw-files + .wbw-drop, .web-board-write .wbw-drop + input + .wbw-files { margin-top:.5rem; }
.web-board-write .wbw-file {
	display:flex; align-items:center; gap:.6rem; padding:.55rem .85rem; margin-bottom:.4rem;
	border:1px solid var(--wbw-line); border-radius:8px; background:#fff; font-size:13px;
}
.web-board-write .wbw-file .fa { color:var(--wbw-muted); }
.web-board-write .wbw-file-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--web-primary-foreground); }
.web-board-write .wbw-file-size { flex:0 0 auto; color:var(--wbw-muted); font-size:12px; }
.web-board-write .wbw-file-x { flex:0 0 auto; border:0; background:transparent; color:var(--wbw-muted); font-size:18px; line-height:1; cursor:pointer; }
.web-board-write .wbw-file-x:hover { color:#e03131; }
.web-board-write .wbw-imgpos { margin-top:.75rem; }

.web-board-write .wbw-captcha { font-size:13px; }

/* Footer */
.web-board-write .wbw-foot { justify-content:flex-end; margin-top:1.5rem; padding-top:1.25rem; border-top:1px solid var(--wbw-line); }
.web-board-write .wbw-submit { padding:0 1.75rem; }

@media all and (max-width:575px) {
	.responsive .web-board-write { padding-left:1rem; padding-right:1rem; }   /* 1rem side gutter, cards stay inset */
	.web-board-write .wbw-card { padding:1.1rem 1rem; }
	.web-board-write .wbw-grid { grid-template-columns:1fr; }
	.web-board-write .wbw-editor textarea#wr_content { min-height:220px; }
}

/* ==========================================================================
   web-board-gallery : Web-Basic-Gallery card grid (-> partials/list/gallery.php, card.php).
   Same card look as Web-Basic-Slots: rounded 16:9 thumbnail with zoom on hover,
   badge top-left, admin checkbox top-right, then title and date · 조회.
   Toolbar / pills / search / paging above reuse the web-board-list rules.
   ========================================================================== */
.web-board-gallery .wbg-grid { padding:0 1rem; }
@media (min-width:576px) { .web-board-gallery .wbg-grid { padding:0; } }

.web-board-gallery .wbg-card { position:relative; }

/* Thumbnail box — ratio from padding-bottom (skin setting 썸네일 크기) */
.web-board-gallery .wbg-img {
	position:relative; height:0; overflow:hidden;
	border-radius:12px;
	background:#f1f3f5;
}
.web-board-gallery .wbg-img > a { position:absolute; inset:0; display:block; }
.web-board-gallery .wbg-img img {
	width:100%; height:100%; object-fit:cover;
	transition:transform .25s ease;
}
.web-board-gallery .wbg-card:hover .wbg-img img { transform:scale(1.06); }
.web-board-gallery .wbg-noimg {
	position:absolute; inset:0;
	display:flex; align-items:center; justify-content:center;
	color:#ced4da; font-size:28px;
}

/* Badges (top-left) */
.web-board-gallery .wbg-badge {
	position:absolute; top:8px; left:8px; z-index:2;
	padding:.1rem .5rem; border-radius:5px;
	font-size:11px; font-weight:800; line-height:1.5;
	box-shadow:0 2px 6px rgba(0,0,0,.2);
}
.web-board-gallery .wbg-badge-new { background:var(--web-primary); color:var(--web-primary-foreground); letter-spacing:.03em; }
.web-board-gallery .wbg-badge-notice { background:#ffd43b; color:var(--web-primary-foreground); }
.web-board-gallery .wbg-badge-now { background:var(--web-primary-foreground); color:var(--web-primary); }

/* Admin checkbox (top-right) */
.web-board-gallery .wbg-chk {
	position:absolute; top:8px; right:8px; z-index:2;
	padding:2px; border-radius:4px; line-height:0;
	background:rgba(255,255,255,.9);
}
.web-board-gallery .wbg-chk input { margin:0; width:16px; height:16px; }

/* Title (+ comment count) */
.web-board-gallery .wbg-title { display:flex; align-items:center; gap:.3rem; min-width:0; margin-top:.6rem; }
.web-board-gallery .wbg-subject {
	min-width:0; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
	color:var(--wbl-text); font-size:15px; font-weight:700; line-height:1.35;
}
.web-board-gallery .wbg-subject:hover { color:var(--wbl-accent); text-decoration:none; }
.web-board-gallery .is-current .wbg-subject { color:var(--wbl-accent); }

/* Date (left) · 조회 (right) */
.web-board-gallery .wbg-meta {
	display:flex; justify-content:space-between; align-items:center; gap:.5rem;
	margin-top:.2rem;
	color:var(--wbl-muted); font-size:12px;
}

.web-board-gallery .wbl-empty { border:1px solid var(--wbl-line); border-radius:12px; background:#fff; }

/* ==========================================================================
   web-board-dialog : Web-Basic-Gallery-Dialog (partner cards + detail dialog).
   List  : .wgd-notice (보증 시스템 box), .wgd-card (banner · name · 보증업체 바로가기)
           -> partials/list/notice.php, card.php
   Detail: .wgd-detail — rendered by wgd_render_detail() (_lib.php) into the Bootstrap modal
           (.wgd-modal, moved to <body>) and the view page (.wgd-view-card).
           Scoped to .wgd-* only (the modal lives outside .web-board-list), colors from --web-*.
           --wgd-accent = the partner's 대표 색상 (inline style), else the site primary.
   Write : .wgd-color, .wgd-banner-drop, .wgd-rep (repeatable rows) -> partials/write/*.php
   ========================================================================== */

/* --- Notice box (보증 시스템) — tinted with the site accent (--web-primary) --- */
.wgd-notice {
	margin:0 1rem 1.25rem; padding:.9rem 1.1rem;
	border:1px solid color-mix(in srgb, var(--web-primary) 40%, transparent); border-radius:12px;
	background:color-mix(in srgb, var(--web-primary) 8%, #fff);
}
@media (min-width:576px) { .wgd-notice { margin:0 0 1.25rem; } }
.wgd-notice-title { display:block; margin-bottom:.3rem; color:color-mix(in srgb, var(--web-primary) 80%, #000); font-size:14px; }
.wgd-notice-text { margin:0; color:#495057; font-size:13px; line-height:1.7; }

/* --- Partner card --- */
.web-board-dialog .wgd-card {
	position:relative; isolation:isolate; /* badge / checkbox z-index stays inside the card */
	display:flex; flex-direction:column; height:100%;
	padding:0 0 .9rem; /* banner runs edge to edge; name / buttons get side padding below */
	border:1px solid var(--wbl-line); border-radius:14px; background:#fff;
	overflow:hidden; /* clips the banner to the card's rounded top corners */
	transition:border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.web-board-dialog .wgd-card:hover { border-color:var(--web-primary); box-shadow:0 8px 20px rgba(0,0,0,.08); transform:translateY(-2px); }
.web-board-dialog .wgd-card:hover .wbg-img img { transform:scale(1.04); }
.web-board-dialog .wgd-card .wgd-img { border-radius:0; } /* square: the card's overflow rounds the top */
.web-board-dialog .wgd-card-name {
	display:block; margin:.8rem .9rem .7rem;
	overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
	color:var(--wbl-text); font-size:15px; font-weight:700; line-height:1.35;
}
.web-board-dialog .wgd-card-name:hover { color:var(--wbl-accent); text-decoration:none; }
.web-board-dialog .wgd-card-name .fa-lock { margin-right:.2rem; color:var(--wbl-muted); }
.web-board-dialog .wgd-card-cta,
.wgd-cta {
	display:flex; align-items:center; justify-content:center;
	border-radius:10px;
	background:linear-gradient(135deg, var(--web-primary), var(--web-primary-hover));
	color:var(--web-primary-foreground); font-weight:700; text-align:center;
	transition:filter .15s ease;
}
.web-board-dialog .wgd-card-cta { margin:auto .9rem 0; height:42px; padding:0 .5rem; font-size:14px; }
.web-board-dialog .wgd-card-edit {
	display:flex; align-items:center; justify-content:center; gap:.3rem;
	height:34px; margin:.4rem .9rem 0;
	border:1px solid var(--wbl-line); border-radius:10px; background:#fff;
	color:var(--wbl-muted); font-size:13px; font-weight:700;
}
.web-board-dialog .wgd-card-edit:hover { border-color:var(--wbl-accent); color:var(--wbl-accent); text-decoration:none; }
.web-board-dialog .wgd-card-cta:hover,
.wgd-cta:hover { filter:brightness(1.06); color:var(--web-primary-foreground); text-decoration:none; }

/* --- Detail dialog --- */
.wgd-modal .modal-dialog { max-width:460px; }
.wgd-modal .modal-content { border:0; border-radius:16px; overflow:hidden; }
.wgd-modal-close {
	position:absolute; top:10px; right:10px; z-index:2;
	width:34px; height:34px; padding:0;
	border:0; border-radius:50%;
	background:rgba(0,0,0,.55); color:#fff; font-size:22px; line-height:34px;
}
.wgd-modal-close:hover { background:rgba(0,0,0,.75); }
body.wgd-open .modal-backdrop.show { opacity:.65; }
/* No banner: the close button sits over the name card — keep the text clear of it */
.wgd-modal .wgd-detail:not(:has(.wgd-detail-banner)) .wgd-namecard { padding-right:3.25rem; }

/* --- Detail card (dialog + view page) --- */
.wgd-detail {
	--wgd-accent:var(--web-primary);
	--wgd-accent-text:color-mix(in srgb, var(--wgd-accent) 82%, #000); /* readable on light boxes */
	background:#fff; color:#212529;
}
.wgd-detail-banner img { display:block; width:100%; height:auto; }
.wgd-detail-body { padding:1rem 1rem 1.25rem; }

.wgd-namecard {
	padding:1rem 1.1rem; border-radius:12px;
	background:linear-gradient(rgba(0,0,0,.12), rgba(0,0,0,.12)), var(--wgd-accent); /* slightly darker for white text */
	color:#fff;
}
.wgd-name { display:block; font-size:18px; line-height:1.35; }
.wgd-tagline { display:block; margin-top:.2rem; font-size:13px; opacity:.9; }

.wgd-sec-title { margin:1.1rem 0 .5rem; color:var(--wgd-accent-text); font-size:13px; font-weight:700; }

.wgd-events { display:grid; grid-template-columns:1fr 1fr; gap:.5rem; margin:0; padding:0; list-style:none; }
.wgd-event { padding:.65rem .8rem; border:1px solid #e9ecef; border-radius:10px; background:#f8f9fa; }
.wgd-event-label { display:block; color:#868e96; font-size:12px; }
.wgd-event-value { display:block; margin-top:.15rem; color:var(--wgd-accent-text); font-size:15px; }

.wgd-features { display:flex; flex-wrap:wrap; gap:.4rem; margin:0; padding:0; list-style:none; }
.wgd-features li {
	padding:.2rem .7rem; border:1px solid var(--wgd-accent); border-radius:50rem;
	background:color-mix(in srgb, var(--wgd-accent) 8%, #fff);
	color:var(--wgd-accent-text); font-size:12px; font-weight:700;
}

.wgd-info {
	width:100%; margin-top:1rem;
	border:1px solid #e9ecef; border-radius:10px; border-collapse:separate; border-spacing:0; overflow:hidden;
	font-size:13px;
}
.wgd-info th { width:6.5rem; padding:.6rem .8rem; background:#f8f9fa; color:#212529; font-weight:700; white-space:nowrap; }
.wgd-info td { padding:.6rem .8rem; color:#495057; }
.wgd-info tr + tr th,
.wgd-info tr + tr td { border-top:1px solid #e9ecef; }

.wgd-guarantee { display:flex; flex-wrap:wrap; align-items:center; gap:.5rem; margin:1rem 0 0; color:#868e96; font-size:12px; }
.wgd-guarantee-badge { padding:.15rem .5rem; border-radius:4px; background:#ffd43b; color:#212529; font-weight:700; }

.wgd-cta { height:48px; margin-top:1rem; font-size:15px; }

/* View page: the same card, centered (side gutter on phones) */
@media (min-width:576px) { .wgd-view-card { margin:0 auto 1.5rem !important; } }
.wgd-view-card { max-width:520px; margin:0 1rem 1.5rem; border:1px solid #e9ecef; border-radius:16px; overflow:hidden; background:#fff; }

/* --- Write form --- */
.web-board-write .wgd-color { display:flex; align-items:center; gap:.5rem; }
.web-board-write .wgd-color input[type="color"] {
	flex:0 0 46px; width:46px; height:var(--web-ctl-h, 42px); padding:3px;
	border:1px solid var(--wbw-line); border-radius:8px; background:#fff; cursor:pointer;
}
.web-board-write .wgd-color .wbw-input { flex:1; min-width:0; }

.web-board-write .wgd-banner-drop {
	position:relative; display:flex; align-items:center; justify-content:center;
	min-height:140px; margin:0; padding:1rem;
	border:2px dashed #dee2e6; border-radius:12px; background:#f8f9fa;
	color:var(--wbw-muted); font-size:13px; text-align:center; cursor:pointer; overflow:hidden;
}
.web-board-write .wgd-banner-drop.is-over { border-color:var(--web-primary); background:color-mix(in srgb, var(--web-primary) 6%, #fff); }
.web-board-write .wgd-banner-drop.has-image { padding:.5rem; border-style:solid; }
.web-board-write .wgd-banner-drop.has-image .wgd-banner-prompt { display:none; }
.web-board-write .wgd-banner-prompt .fa { display:block; margin-bottom:.35rem; font-size:26px; }
.web-board-write .wgd-banner-prompt em { font-style:normal; font-size:12px; }
.web-board-write .wgd-banner-drop img { display:block; max-width:100%; max-height:320px; border-radius:8px; }

.web-board-write .wgd-rep-row { display:flex; gap:.5rem; margin-bottom:.5rem; }
.web-board-write .wgd-rep-row .wbw-input { flex:1; min-width:0; }
.web-board-write .wgd-rep.is-pair .wgd-rep-row .wbw-input:first-child { flex:0 0 38%; }
.web-board-write .wgd-rep-del {
	flex:0 0 42px; height:var(--web-ctl-h, 42px);
	border:1px solid var(--wbw-line); border-radius:8px; background:#fff; color:#adb5bd;
}
.web-board-write .wgd-rep-del:hover { border-color:#fa5252; color:#fa5252; }
.web-board-write .wgd-rep-add {
	width:100%; height:40px;
	border:1px dashed color-mix(in srgb, var(--web-primary) 60%, transparent); border-radius:8px;
	background:color-mix(in srgb, var(--web-primary) 6%, #fff);
	color:var(--web-primary-foreground); font-size:13px; font-weight:700;
}
.web-board-write .wgd-rep-add:hover { background:color-mix(in srgb, var(--web-primary) 12%, #fff); }