@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 link cards are the web-board-links 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-links : ranked link directory (-> partials/list/{top,heading,grid,card}.php,
   partials/view/site.php, partials/write/{site,logo}.php).
   List page is full width with no theme title bar (_structure/header/page-layout.php).
   --wbk-accent = the board's 강조 색상 (스킨설정, inline style), else the site primary.
   Rank colors (medals, 4-10 discs, 1-3 name colors) are fixed: they mean "rank", not brand.
   ========================================================================== */
.web-board-links {
	--wbk-accent:var(--web-primary);
	--wbk-line:#e5e7eb; --wbk-muted:#868e96;
	--wbk-top1:#e03131; --wbk-top2:#f08c00; --wbk-top3:#2f9e44;
}
.wbk-page { padding-top:1rem; }
@media (min-width:576px) { .wbk-page { padding-top:1.5rem; } }

/* --- Heading: icon box + h1, tools on the right; lead text under it --- */
.wbk-head { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.75rem 1rem; margin:.5rem 0 1rem; }
.wbk-head-title { display:flex; align-items:center; gap:.65rem; min-width:0; }
.wbk-head-icon {
	flex:0 0 38px; width:38px; height:38px; border-radius:10px;
	display:flex; align-items:center; justify-content:center;
	background:color-mix(in srgb, var(--wbk-accent) 12%, #fff);
}
.wbk-head-icon img { width:26px; height:26px; object-fit:contain; }
.wbk-h1 { margin:0; color:var(--web-primary-foreground); font-size:24px; line-height:1.35; word-break:keep-all; }
.wbk-head-tools { display:flex; align-items:center; gap:.5rem; margin-left:auto; }
.wbk-filter {
	display:inline-flex; align-items:center; gap:.35rem; height:var(--web-ctl-h, 42px); padding:0 .95rem;
	border:1px solid var(--wbk-line); border-radius:8px; background:#fff;
	color:#495057; font-size:13px; font-weight:600; white-space:nowrap; cursor:pointer;
}
.wbk-filter:hover { border-color:#f5b301; color:#b07f00; }
.wbk-filter.active { border-color:#f5b301; background:#fff9db; color:#b07f00; }
.wbk-filter .fa { color:#f5b301; }

.wbk-lead { margin:0 0 1.5rem; color:#5c6670; font-size:15px; line-height:1.7; }
.wbk-search-note { margin:-.75rem 0 1.25rem; color:var(--wbk-muted); font-size:13px; }
.wbk-search-note a { margin-left:.5rem; color:var(--wbk-accent); font-weight:700; }

@media (max-width:575px) {
	.wbk-h1 { font-size:19px; }
	.wbk-head-icon { flex-basis:32px; width:32px; height:32px; }
	.wbk-head-icon img { width:22px; height:22px; }
	.wbk-lead { font-size:14px; margin-bottom:1.1rem; }
}

/* --- Grid --- */
.web-board-links .wbk-grid { padding:0 1rem; }
@media (min-width:576px) { .web-board-links .wbk-grid { padding:0; } }
.web-board-links .wbk-grid .wbl-empty { border:1px solid var(--wbl-line); border-radius:12px; background:#fff; }
.web-board-links .wbk-grid li[hidden] { display:none !important; }

/* --- Card --- */
.wbk-card {
	position:relative; height:100%;
	display:flex; flex-direction:column; align-items:stretch;
	padding:.75rem .9rem .85rem;
	background:#fff; border:1px solid var(--wbk-line); border-radius:12px;
	text-align:center;
	transition:box-shadow .15s ease, border-color .15s ease, transform .15s ease;
}
.wbk-card:hover { border-color:color-mix(in srgb, var(--wbk-accent) 40%, var(--wbk-line)); box-shadow:0 8px 20px rgba(0,0,0,.07); transform:translateY(-2px); }

/* Top row: number (left) · medal (center) · 찜하기 (right) */
.wbk-card-top { display:grid; grid-template-columns:1fr auto 1fr; align-items:center; min-height:30px; margin-bottom:.6rem; }
.wbk-num { justify-self:start; display:inline-flex; align-items:center; gap:.35rem; color:#495057; font-size:20px; font-weight:800; line-height:1; }
.wbk-chk { width:15px; height:15px; margin:0; }
.wbk-badge { justify-self:center; display:inline-flex; align-items:center; justify-content:center; min-width:22px; }
.wbk-medal { display:block; filter:drop-shadow(0 1px 1px rgba(0,0,0,.18)); }
.wbk-disc {
	display:inline-flex; align-items:center; justify-content:center;
	width:20px; height:20px; border-radius:50%;
	background:radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--wbk-disc) 55%, #fff) 0, var(--wbk-disc) 60%);
	box-shadow:inset 0 -1px 0 rgba(0,0,0,.15), 0 1px 2px rgba(0,0,0,.15);
	color:#fff; font-size:11px; font-weight:800; line-height:1;
}
.wbk-fav {
	justify-self:end; display:inline-flex; align-items:center; gap:.2rem;
	height:24px; padding:0 .5rem; border:0; border-radius:6px;
	background:#f1f3f5; color:#495057; font-size:11px; font-weight:600; white-space:nowrap; cursor:pointer;
}
.wbk-fav:hover { background:#e9ecef; }
.wbk-fav .fa { color:#868e96; }
.wbk-fav.is-on { background:#fff3bf; color:#8f6a00; }
.wbk-fav.is-on .fa { color:#f5b301; }

/* Logo box: tinted, logo at natural size (never upscaled) */
.wbk-link { display:flex; flex-direction:column; align-items:stretch; min-width:0; color:inherit; }
.wbk-link:hover { text-decoration:none; color:inherit; }
.web-board-links .wbk-logo {
	height:64px; margin-bottom:.65rem; padding:.35rem;
	display:flex; align-items:center; justify-content:center;
	border-radius:8px; overflow:hidden;
	background:color-mix(in srgb, var(--wbk-accent) 7%, #fff);
}
.web-board-links .wbk-logo img { max-width:100%; max-height:100%; width:auto; height:auto; object-fit:contain; }
.web-board-links .web-links-initial { color:color-mix(in srgb, var(--wbk-accent) 70%, #000); font-size:24px; font-weight:800; }
.web-board-links .wbk-logo-lg { width:88px; height:88px; margin:0; border-radius:16px; border:1px solid var(--wbk-line); }

/* Name: ranks 1-3 colored + shimmer sweep */
.wbk-name { display:block; max-width:100%; color:var(--web-primary-foreground); font-size:15px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.wbk-card.is-top1 { --wbk-name:var(--wbk-top1); }
.wbk-card.is-top2 { --wbk-name:var(--wbk-top2); }
.wbk-card.is-top3 { --wbk-name:var(--wbk-top3); }
.wbk-card.is-top .wbk-name {
	color:var(--wbk-name);
	background:linear-gradient(100deg, var(--wbk-name) 0 42%, color-mix(in srgb, var(--wbk-name) 25%, #fff) 50%, var(--wbk-name) 58% 100%);
	background-size:250% 100%; background-position:100% 0;
	-webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
	animation:wbk-shimmer 2.6s ease-in-out infinite;
}
@keyframes wbk-shimmer { 0% { background-position:100% 0; } 70%, 100% { background-position:-50% 0; } }
@media (prefers-reduced-motion:reduce) { .wbk-card.is-top .wbk-name { animation:none; -webkit-text-fill-color:currentColor; background:none; } }

/* Meta row: clicks · like · status */
.wbk-meta { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:.3rem .55rem; margin-top:auto; padding-top:.4rem; color:#5c6670; font-size:12px; }
.wbk-meta-item { display:inline-flex; align-items:center; gap:.25rem; white-space:nowrap; }
button.wbk-meta-item { padding:0; border:0; background:none; color:inherit; font:inherit; cursor:pointer; }
button.wbk-meta-item:hover, .wbk-like.is-on { color:#e64980; }

.web-board-links .wbk-status { display:inline-flex; align-items:center; gap:.2rem; padding:.1rem .45rem; border-radius:999px; font-size:11px; font-weight:700; white-space:nowrap; }
.web-board-links .wbk-status.is-ok { background:#ebfbee; color:#2b8a3e; }
.web-board-links .wbk-status.is-redirect { background:#e7f5ff; color:#1971c2; }
.web-board-links .wbk-status.is-check { background:#fff4e6; color:#d9480f; }

.wbk-edit { margin-top:.5rem; color:var(--wbk-muted); font-size:12px; }
.wbk-edit:hover { color:var(--web-primary-foreground); text-decoration:none; }

@media (max-width:575px) {
	.wbk-card { padding:.65rem .6rem .75rem; }
	.wbk-num { font-size:17px; }
	.wbk-fav { padding:0 .4rem; }
	.web-board-links .wbk-logo { height:56px; }
	.wbk-name { font-size:14px; }
}

/* --- View page: site card --- */
.web-board-view.web-board-links .wbk-site {
	margin-bottom:1.5rem; padding:1.5rem;
	background:#fff; border:1px solid var(--wbk-line); border-radius:12px;
	box-shadow:0 4px 14px rgba(0,0,0,.06);
}
.wbk-site-head { display:flex; align-items:center; gap:1rem; }
.wbk-site-title { min-width:0; display:flex; flex-direction:column; align-items:flex-start; gap:.4rem; }
.wbk-site-name { margin:0; color:var(--web-primary-foreground); font-size:22px; word-break:break-all; }
.wbk-site-desc { margin:1.1rem 0 0; color:#495057; font-size:15px; line-height:1.7; }
.wbk-site-stats { display:flex; flex-wrap:wrap; gap:.5rem 1.25rem; margin:1.1rem 0 0; padding:.75rem 0 0; border-top:1px solid var(--wbk-line); color:var(--wbk-muted); font-size:13px; }
.wbk-site-stats b { color:var(--web-primary-foreground); }
.wbk-site-actions { display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.25rem; }
.wbk-go {
	flex:1 1 220px; display:inline-flex; align-items:center; justify-content:center; gap:.4rem;
	height:48px; border-radius:10px; background:var(--wbk-accent); color:#fff; font-size:15px; font-weight:800;
}
.wbk-go:hover { background:color-mix(in srgb, var(--wbk-accent) 88%, #000); color:#fff; text-decoration:none; }
.wbk-site-like {
	flex:0 0 auto; height:48px; padding:0 1.25rem; border:1px solid var(--wbk-line); border-radius:10px;
	background:#fff; color:#495057; font-size:14px; font-weight:700; cursor:pointer;
}
.wbk-site-like:hover, .wbk-site-like.is-on { border-color:#e64980; color:#e64980; }
@media (max-width:575px) {
	.web-board-view.web-board-links .wbk-site { padding:1.1rem 1rem; }
	.wbk-site-name { font-size:19px; }
}

/* --- Write form: logo drop zone + description --- */
.web-board-write .wbk-desc-input { height:auto; min-height:84px; padding:.6rem .9rem; line-height:1.6; resize:vertical; }
.web-board-write .wbk-logo-drop {
	position:relative; display:flex; align-items:center; justify-content:center;
	min-height:120px; 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 .wbk-logo-drop.is-over { border-color:var(--web-primary); background:color-mix(in srgb, var(--web-primary) 6%, #fff); }
.web-board-write .wbk-logo-drop.has-image { padding:.75rem; border-style:solid; }
.web-board-write .wbk-logo-drop.has-image .wbk-logo-prompt { display:none; }
.web-board-write .wbk-logo-prompt .fa { display:block; margin-bottom:.35rem; font-size:26px; }
.web-board-write .wbk-logo-prompt em { font-style:normal; font-size:12px; }
.web-board-write .wbk-logo-drop img { display:block; max-width:160px; max-height:160px; border-radius:10px; }

/* --- 파싱 dialog (partials/list/parser.php; moved to <body>, so scoped to .wbk-parse) ---
   One view at a time (data-view): setup / running / result. Tile + tag colors carry meaning
   (new = green, update = blue, same = grey, fail = red), so they are fixed, not brand colors. */
.wbk-parse .modal-dialog { max-width:520px; }
.wbk-parse .modal-content { border:0; border-radius:16px; overflow:hidden; box-shadow:0 20px 50px rgba(0,0,0,.18); }
.wbk-parse .modal-header { align-items:center; padding:1.1rem 1.25rem; border-bottom:1px solid #f1f3f5; }
.wbk-parse .modal-body { padding:1.25rem; }
.wbk-parse .modal-footer { padding:.85rem 1.25rem; border-top:1px solid #f1f3f5; background:#fafbfc; }
.wbk-parse .modal-footer .btn { border-radius:10px; font-weight:700; font-size:14px; padding:.5rem 1rem; }
.wbk-parse .btn-primary { background:var(--web-primary); border-color:var(--web-primary); }
.wbk-parse .btn-primary:hover { background:var(--web-primary-hover); border-color:var(--web-primary-hover); }

.wbk-pz-hero { display:flex; align-items:center; gap:.8rem; min-width:0; }
.wbk-pz-hero-icon {
	flex:0 0 44px; width:44px; height:44px; border-radius:12px;
	display:flex; align-items:center; justify-content:center;
	background:color-mix(in srgb, var(--web-primary) 12%, #fff); color:var(--web-primary); font-size:20px;
}
.wbk-parse .modal-title { margin:0; font-size:18px; color:var(--web-primary-foreground); }
.wbk-pz-hero-sub { margin:.15rem 0 0; color:#868e96; font-size:13px; }

/* setup */
.wbk-pz-field { margin-bottom:1.1rem; }
.wbk-pz-label { display:block; margin-bottom:.45rem; color:var(--web-primary-foreground); font-size:13px; font-weight:700; }
.wbk-pz-input {
	display:flex; align-items:center; gap:.6rem; height:46px; padding:0 .9rem;
	border:1px solid #dee2e6; border-radius:12px; background:#fff;
	transition:border-color .15s ease, box-shadow .15s ease;
}
.wbk-pz-input:focus-within { border-color:var(--web-primary); box-shadow:0 0 0 3px color-mix(in srgb, var(--web-primary) 18%, transparent); }
.wbk-pz-input .fa { color:#adb5bd; }
.wbk-pz-input input { flex:1; min-width:0; border:0; outline:none; font-size:14px; color:#343a40; background:transparent; }
.wbk-pz-linkbtn { margin-top:.4rem; padding:0; border:0; background:none; color:var(--web-primary); font-size:12px; font-weight:600; cursor:pointer; }
.wbk-pz-linkbtn:hover { text-decoration:underline; }

.wbk-pz-option { margin-bottom:1.1rem; padding:.8rem .9rem .8rem 3.25rem; border:1px solid #e9ecef; border-radius:12px; background:#fafbfc; }
.wbk-pz-option .custom-control-label { cursor:pointer; }
.wbk-pz-option .custom-control-label::before { top:.15rem; }
.wbk-pz-option .custom-control-label::after { top:calc(.15rem + 2px); }
.wbk-pz-option .custom-control-input:checked ~ .custom-control-label::before { background:var(--web-primary); border-color:var(--web-primary); }
.wbk-pz-option b { display:block; color:var(--web-primary-foreground); font-size:14px; }
.wbk-pz-option span { display:block; margin-top:.1rem; color:#868e96; font-size:12px; }

.wbk-pz-tips { margin:0; display:grid; gap:.45rem; }
.wbk-pz-tips li { display:flex; align-items:flex-start; gap:.55rem; color:#5c6670; font-size:13px; line-height:1.5; }
.wbk-pz-tips .fa { flex:0 0 16px; margin-top:.15rem; color:var(--web-primary); text-align:center; }

/* running */
.wbk-pz-progress { display:flex; align-items:center; gap:1rem; margin-bottom:.75rem; }
.wbk-pz-pct { flex:0 0 auto; color:var(--web-primary); font-size:40px; font-weight:800; line-height:1; letter-spacing:-.02em; }
.wbk-pz-pct small { margin-left:.1rem; font-size:18px; }
.wbk-pz-progress-meta { display:flex; flex-direction:column; gap:.15rem; min-width:0; }
.wbk-pz-progress-meta b { color:var(--web-primary-foreground); font-size:14px; }
.wbk-pz-eta { color:#868e96; font-size:12px; }
.wbk-pz-bar { height:10px; border-radius:5px; background:#eef1f4; }
.wbk-pz-bar .progress-bar { background-color:var(--web-primary); border-radius:5px; transition:width .5s ease; }
.wbk-pz-current { display:flex; align-items:center; gap:.45rem; min-height:1.5em; margin:.7rem 0 0; color:#5c6670; font-size:13px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.wbk-pz-current .fa { color:var(--web-primary); }
.wbk-pz-note { margin:1rem 0 0; color:#868e96; font-size:12px; }

/* result banner */
.wbk-pz-banner { display:flex; align-items:center; gap:.8rem; padding:.9rem 1rem; border-radius:12px; background:#ebfbee; }
.wbk-pz-banner-icon {
	flex:0 0 36px; width:36px; height:36px; border-radius:50%;
	display:flex; align-items:center; justify-content:center; background:#2f9e44; color:#fff; font-size:16px;
}
.wbk-pz-banner b { display:block; color:#1b4332; font-size:15px; }
.wbk-pz-banner-sub { display:block; margin-top:.1rem; color:#5c6670; font-size:12px; }
.wbk-pz-banner.is-stopped { background:#fff4e6; }
.wbk-pz-banner.is-stopped .wbk-pz-banner-icon { background:#f08c00; }
.wbk-pz-banner.is-stopped b { color:#7c3e00; }
.wbk-pz-banner.is-error { background:#fff5f5; }
.wbk-pz-banner.is-error .wbk-pz-banner-icon { background:#e03131; }
.wbk-pz-banner.is-error b { color:#8a1c1c; }

/* count tiles (running + result) */
.wbk-pz-tiles { display:grid; grid-template-columns:repeat(4, 1fr); gap:.5rem; margin:1rem 0 0; }
.wbk-pz-tiles li { display:flex; flex-direction:column; align-items:center; gap:.1rem; padding:.7rem .25rem; border-radius:12px; background:#f8f9fa; text-align:center; }
.wbk-pz-tiles .fa { font-size:15px; }
.wbk-pz-tiles b { color:#212529; font-size:20px; font-weight:800; line-height:1.2; }
.wbk-pz-tiles span { color:#868e96; font-size:11px; font-weight:600; }
.wbk-pz-tiles .is-new { background:#ebfbee; } .wbk-pz-tiles .is-new .fa { color:#2f9e44; }
.wbk-pz-tiles .is-update { background:#e7f5ff; } .wbk-pz-tiles .is-update .fa { color:#1971c2; }
.wbk-pz-tiles .is-same .fa { color:#adb5bd; }
.wbk-pz-tiles .is-fail { background:#fff5f5; } .wbk-pz-tiles .is-fail .fa { color:#e03131; }
.wbk-pz-tiles .is-fail.is-zero { background:#f8f9fa; } .wbk-pz-tiles .is-fail.is-zero .fa { color:#adb5bd; }

/* result: filter chips + change list */
.wbk-pz-changes { margin-top:1rem; }
.wbk-pz-chips { display:flex; flex-wrap:wrap; gap:.4rem; margin-bottom:.6rem; }
.wbk-pz-chip { height:30px; padding:0 .75rem; border:1px solid #dee2e6; border-radius:999px; background:#fff; color:#495057; font-size:12px; font-weight:600; cursor:pointer; }
.wbk-pz-chip b { margin-left:.15rem; color:#868e96; }
.wbk-pz-chip.active { border-color:var(--web-primary); background:color-mix(in srgb, var(--web-primary) 10%, #fff); color:var(--web-primary-foreground); }
.wbk-pz-chip.active b { color:var(--web-primary); }
.wbk-pz-log { max-height:230px; overflow:auto; margin:0; border:1px solid #e9ecef; border-radius:12px; }
.wbk-pz-log li { display:flex; align-items:center; gap:.5rem; padding:.55rem .75rem; font-size:13px; }
.wbk-pz-log li + li { border-top:1px solid #f1f3f5; }
.wbk-pz-tag { flex:0 0 auto; padding:.05rem .45rem; border-radius:6px; font-size:11px; font-weight:700; }
.wbk-pz-log .is-new .wbk-pz-tag { background:#ebfbee; color:#2b8a3e; }
.wbk-pz-log .is-update .wbk-pz-tag { background:#e7f5ff; color:#1971c2; }
.wbk-pz-log .is-fail .wbk-pz-tag { background:#fff5f5; color:#e03131; }
.wbk-pz-rank { flex:0 0 2.6em; color:#adb5bd; font-size:12px; text-align:right; }
.wbk-pz-name { flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-weight:600; }
.wbk-pz-name a { color:#343a40; }
.wbk-pz-detail { flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:#868e96; font-size:12px; }
.wbk-pz-allgood { margin:0; padding:1rem; border-radius:12px; background:#f8f9fa; color:#5c6670; font-size:13px; text-align:center; }
.wbk-pz-allgood .fa { margin-right:.25rem; color:#2f9e44; }

@media (max-width:575px) {
	.wbk-parse .modal-body { padding:1rem; }
	.wbk-pz-tiles { grid-template-columns:repeat(2, 1fr); }
	.wbk-pz-pct { font-size:34px; }
}