@charset "utf-8";
/**
 * KBoard Gallery Skin Style
 */

/* ============================================
   CSS Variables
   ============================================ */
:root {
	--kboard-primary:       #3B3B9B;
	--kboard-primary-hover: #2d2d80;
	--kboard-primary-rgb:   59, 59, 155;
	--kboard-text:          #1e293b;
	--kboard-text-muted:    #64748b;
	--kboard-text-light:    #94a3b8;
	--kboard-bg:            #ffffff;
	--kboard-bg-alt:        #f8fafc;
	--kboard-border:        #e2e8f0;
	--kboard-danger:        #ef4444;
	--kboard-success:       #10b981;

	--kboard-font-family:   "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", Roboto, "Noto Sans KR", sans-serif;
	--kboard-font-size:     15px;

	--kboard-radius-sm:     0.8rem;
	--kboard-radius-md:     1.6rem;
	--kboard-radius-lg:     3.2rem;

	--kboard-shadow-sm:     0 1px 3px rgba(0,0,0,0.06);
	--kboard-shadow-md:     0 4px 12px rgba(0,0,0,0.10);
	--kboard-shadow-hover:  0 8px 24px rgba(0,0,0,0.12);

	--kboard-card-gap-x:    2rem;
	--kboard-card-gap-y:    4rem;
	--kboard-img-height:    28rem;
}

/* ============================================
   Global Reset within KBoard containers
   ============================================ */
#kboard-thumbnail-list,
#kboard-thumbnail-document,
#kboard-thumbnail-editor,
#kboard-thumbnail-latest {
	font-family: var(--kboard-font-family);
	font-size: var(--kboard-font-size);
	color: var(--kboard-text);
	box-sizing: border-box;
	line-height: 1.6;
	margin: 20px 0;
}

#kboard-thumbnail-list *,
#kboard-thumbnail-document *,
#kboard-thumbnail-editor *,
#kboard-thumbnail-latest *,
#kboard-thumbnail-list *::before,
#kboard-thumbnail-document *::before,
#kboard-thumbnail-editor *::before,
#kboard-thumbnail-latest *::before,
#kboard-thumbnail-list *::after,
#kboard-thumbnail-document *::after,
#kboard-thumbnail-editor *::after,
#kboard-thumbnail-latest *::after {
	box-sizing: inherit;
}

#kboard-thumbnail-list a,
#kboard-thumbnail-document a,
#kboard-thumbnail-editor a,
#kboard-thumbnail-latest a {
	text-decoration: none;
	color: inherit;
}

#kboard-thumbnail-list img,
#kboard-thumbnail-document img,
#kboard-thumbnail-editor img,
#kboard-thumbnail-latest img {
	max-width: 100%;
	height: auto;
	vertical-align: middle;
}

/* 로그아웃 시: .right가 비어있으면 전체를 가운데 정렬 */
#kboard-thumbnail-document.kboard-skin-page .kboard-control:has(.right:empty) {
    justify-content: center;
}

/* .right가 아예 없는 경우도 대비 */
#kboard-thumbnail-document.kboard-skin-page .kboard-control:not(:has(.right)) {
    justify-content: center;
}

/* ============================================
   Buttons
   ============================================ */
a.kboard-thumbnail-button-small,
input.kboard-thumbnail-button-small,
button.kboard-thumbnail-button-small {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 3.8rem;
	padding: 0 1.8rem;
	font-size: 1.4rem;
	font-weight: 600;
	color: #fff !important;
	background-color: var(--kboard-text) !important;
	border: none;
	border-radius: var(--kboard-radius-sm);
	cursor: pointer;
	transition: background-color 0.2s, transform 0.15s, box-shadow 0.2s;
	box-shadow: var(--kboard-shadow-sm);
	text-shadow: none;
	line-height: 1;
}

a.kboard-thumbnail-button-small:hover,
button.kboard-thumbnail-button-small:hover {
	background-color: var(--kboard-primary) !important;
	transform: translateY(-1px);
	box-shadow: var(--kboard-shadow-md);
	opacity: 1 !important;
}

.kboard-button-delete {
	background-color: var(--kboard-danger) !important;
}

.kboard-button-submit {
	background-color: var(--kboard-primary) !important;
}

/* ============================================
   Icons
   ============================================ */
.kboard-icon-lock {
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	vertical-align: middle;
	margin-right: 0.4rem;
	background-color: var(--kboard-text-muted);
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z'/%3E%3C/svg%3E") no-repeat center/contain;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M400 224h-24v-72C376 68.2 307.8 0 224 0S72 68.2 72 152v72H48c-26.5 0-48 21.5-48 48v192c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V272c0-26.5-21.5-48-48-48zm-104 0H152v-72c0-39.7 32.3-72 72-72s72 32.3 72 72v72z'/%3E%3C/svg%3E") no-repeat center/contain;
}

.kboard-icon-reply {
	display: inline-block;
	width: 1.4rem;
	height: 1.4rem;
	vertical-align: middle;
	margin-right: 0.4rem;
	background-color: var(--kboard-text-muted);
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9l6 6z'/%3E%3C/svg%3E") no-repeat center/contain;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 15l-6 6-1.42-1.42L15.17 16H4V4h2v10h9.17l-3.59-3.58L13 9l6 6z'/%3E%3C/svg%3E") no-repeat center/contain;
}

.kboard-icon-thumbnail {
	display: block;
	width: 4rem;
	height: 4rem;
	margin: 0 auto;
	background-color: var(--kboard-border);
	-webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E") no-repeat center/contain;
	mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='1.5'%3E%3Crect x='3' y='3' width='18' height='18' rx='2'/%3E%3Ccircle cx='8.5' cy='8.5' r='1.5'/%3E%3Cpolyline points='21 15 16 10 5 21'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* ============================================
   Form Elements
   ============================================ */
#kboard-thumbnail-list input[type=text],
#kboard-thumbnail-document input[type=text],
#kboard-thumbnail-editor input[type=text],
#kboard-thumbnail-latest input[type=text],
#kboard-thumbnail-list input[type=email],
#kboard-thumbnail-document input[type=email],
#kboard-thumbnail-editor input[type=email],
#kboard-thumbnail-latest input[type=email],
#kboard-thumbnail-list input[type=password],
#kboard-thumbnail-document input[type=password],
#kboard-thumbnail-editor input[type=password],
#kboard-thumbnail-latest input[type=password],
#kboard-thumbnail-list input[type=number],
#kboard-thumbnail-document input[type=number],
#kboard-thumbnail-editor input[type=number],
#kboard-thumbnail-latest input[type=number],
#kboard-thumbnail-list input[type=date],
#kboard-thumbnail-document input[type=date],
#kboard-thumbnail-editor input[type=date],
#kboard-thumbnail-list select,
#kboard-thumbnail-document select,
#kboard-thumbnail-editor select,
#kboard-thumbnail-latest select,
#kboard-thumbnail-list textarea,
#kboard-thumbnail-document textarea,
#kboard-thumbnail-editor textarea {
	appearance: none;
	-webkit-appearance: none;
	background-color: #fff;
	border: 1px solid var(--kboard-border);
	border-radius: var(--kboard-radius-sm);
	padding: 0.8rem 1.2rem;
	font-size: 1.4rem;
	color: var(--kboard-text);
	outline: none;
	transition: border-color 0.2s, box-shadow 0.2s;
	min-height: 4rem;
	box-shadow: none;
	margin: 0;
	font-family: var(--kboard-font-family);
}

#kboard-thumbnail-list input:focus,
#kboard-thumbnail-document input:focus,
#kboard-thumbnail-editor input:focus,
#kboard-thumbnail-list select:focus,
#kboard-thumbnail-document select:focus,
#kboard-thumbnail-editor select:focus,
#kboard-thumbnail-list textarea:focus,
#kboard-thumbnail-document textarea:focus,
#kboard-thumbnail-editor textarea:focus {
	border-color: var(--kboard-primary);
	box-shadow: 0 0 0 3px rgba(var(--kboard-primary-rgb), 0.12);
}

#kboard-thumbnail-list select,
#kboard-thumbnail-document select,
#kboard-thumbnail-editor select {
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 1rem center;
	background-size: 1.6rem;
	padding-right: 3.2rem !important;
	cursor: pointer;
}

/* ============================================
   List — Header (total count + search)
   ============================================ */
#kboard-thumbnail-list {
	width: 100%;
	overflow: hidden;
}

#kboard-thumbnail-list .kboard-list-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-bottom: 1.6rem;
	border-bottom: 1px solid var(--kboard-border);
	/*  border-bottom: 1px solid var(--primary);  */
	flex-wrap: wrap;
	gap: 1.2rem;
}

/* 총 N개의 게시글 */
#kboard-thumbnail-list .kboard-total-count {
	font-size: 1.5rem;
	font-weight: 600;
	color: var(--kboard-text);
	display: flex;
	align-items: baseline;
	gap: 0.3rem;
}

#kboard-thumbnail-list .kboard-count-point {
	font-style: normal;
	color: var(--kboard-primary);
	font-weight: 700;
}

/* 헤더 오른쪽 (정렬 + 검색) */
#kboard-thumbnail-list .kboard-header-right {
	display: flex;
	align-items: center;
	gap: 1rem;
}

/* 정렬 select */
#kboard-thumbnail-list .kboard-sort select {
	height: 4rem;
	min-width: 10rem;
	font-size: 1.3rem;
	border-radius: var(--kboard-radius-sm);
}

/* 검색폼 인라인 */
#kboard-thumbnail-list .kboard-search-inline {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

#kboard-thumbnail-list .kboard-search-target {
	height: 4rem;
	min-width: 7rem;
	font-size: 1.3rem;
	border-radius: var(--kboard-radius-sm);
}

/* 라운드 검색 입력창 */
#kboard-thumbnail-list .kboard-search-input-wrap {
	display: flex;
	align-items: center;
	gap: 0.4rem;
	border: 1px solid var(--kboard-border);
	border-radius: 99rem;
	padding: 0 1.4rem 0 1rem;
	background: #fff;
	height: 4rem;
	min-width: 24rem;
	transition: border-color 0.2s, box-shadow 0.2s;
}

#kboard-thumbnail-list .kboard-search-input-wrap:focus-within {
	border-color: var(--kboard-primary);
	box-shadow: 0 0 0 3px rgba(var(--kboard-primary-rgb), 0.12);
}

#kboard-thumbnail-list .kboard-search-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
	color: var(--kboard-text-muted);
	flex-shrink: 0;
	transition: color 0.2s;
}

#kboard-thumbnail-list .kboard-search-btn:hover {
	color: var(--kboard-primary);
}

#kboard-thumbnail-list .kboard-search-btn svg {
	width: 1.7rem;
	height: 1.7rem;
}

#kboard-thumbnail-list .kboard-search-input-wrap input[type=text] {
	border: none !important;
	box-shadow: none !important;
	padding: 0 !important;
	min-height: unset;
	height: auto;
	flex: 1;
	font-size: 1.4rem;
	background: transparent;
	width: 100%;
}

#kboard-thumbnail-list .kboard-search-input-wrap input[type=text]:focus {
	border: none !important;
	box-shadow: none !important;
}

/* ============================================
   Category
   ============================================ */
#kboard-thumbnail-list .kboard-category.category-mobile {
	display: none;
}

#kboard-thumbnail-list .kboard-category.category-pc {
	display: block;
	margin-top: 1.6rem;
}

#kboard-thumbnail-list .kboard-category.category-pc .kboard-category-list {
	list-style: none;
	padding: 0;
	margin: 0 0 0.8rem 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.8rem;
}

#kboard-thumbnail-list .kboard-category.category-pc .kboard-category-list:last-child {
	margin-bottom: 0;
}

#kboard-thumbnail-list .kboard-category.category-pc .kboard-category-list li {
	margin: 0;
	padding: 0;
}

#kboard-thumbnail-list .kboard-category.category-pc .kboard-category-list li a {
	display: block;
	padding: 0.5rem 1.4rem;
	font-size: 1.4rem;
	font-weight: 500;
	color: var(--kboard-text-muted);
	background-color: #fff;
	border: 1px solid var(--kboard-border);
	border-radius: 99rem;
	transition: all 0.2s;
}

#kboard-thumbnail-list .kboard-category.category-pc .kboard-category-list li a:hover {
	border-color: var(--kboard-primary);
	color: var(--kboard-primary);
}

#kboard-thumbnail-list .kboard-category.category-pc .kboard-category-list li.kboard-category-selected a {
	background-color: var(--kboard-primary);
	border-color: var(--kboard-primary);
	color: #fff;
}

/* Tree category select */
#kboard-thumbnail-list .kboard-tree-category-search {
	margin-top: 1.6rem;
}

#kboard-thumbnail-list .kboard-tree-category-search .kboard-tree-category-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	align-items: center;
}

#kboard-thumbnail-list .kboard-tree-category-search select {
	height: 3.8rem;
	padding: 0 3.2rem 0 1.4rem;
	border-radius: 99rem;
	font-size: 1.4rem;
	min-width: 12rem;
}

/* ============================================
   Card Grid
   ============================================ */
#kboard-thumbnail-list .kboard-list {
	padding-top: 2.4rem;
}

#kboard-thumbnail-list .kboard-cardset-wrap {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--kboard-card-gap-y) var(--kboard-card-gap-x);
}

/* ============================================
   Single Card
   ============================================ */
#kboard-thumbnail-list .kboard-card {
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	cursor: pointer;
	transition: transform 0.25s ease;
}

#kboard-thumbnail-list .kboard-card:hover {
	transform: translateY(-0.5rem);
}

/* 공지 카드 강조 */
#kboard-thumbnail-list .kboard-card.kboard-list-notice .kboard-card-figure {
	outline: 2px solid var(--kboard-primary);
	outline-offset: 2px;
}

/* 선택된 카드 (현재 보고 있는 글) */
#kboard-thumbnail-list .kboard-card.kboard-list-selected .kboard-card-figure {
	outline: 2px solid var(--kboard-primary);
	outline-offset: 2px;
}

/* 답글 카드 */
#kboard-thumbnail-list .kboard-card.kboard-card-reply .kboard-card-figure {
	opacity: 0.88;
}

/* ============================================
   Card Figure (thumbnail area)
   ============================================ */
#kboard-thumbnail-list.kboard-skin-youtube .kboard-card-figure {
	position: relative;
	height: var(--kboard-img-height);
	border-radius: var(--kboard-radius-lg);
	overflow: hidden;
	margin-bottom: 1.2rem;
	background-color: var(--kboard-bg-alt);
	flex-shrink: 0;
	aspect-ratio: 16 / 9;
    height: auto;
}

#kboard-thumbnail-list.kboard-skin-youtube .kboard-card-img {
	width: 100%;
	height: 100%;
	object-fit: contain;
    object-position: center;
	display: block;
	transition: transform 0.4s ease;
}

#kboard-thumbnail-list .kboard-card:hover .kboard-card-img {
	transform: scale(1.04);
}

/* 썸네일 없을 때 폴백 */
#kboard-thumbnail-list .kboard-card-img-fallback {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background-color: var(--kboard-bg-alt);
}

#kboard-thumbnail-list .kboard-card-img-fallback .kboard-icon-thumbnail {
	width: 6rem;
	height: 6rem;
	background-color: var(--kboard-border);
}

/* ============================================
   Card Body
   ============================================ */
#kboard-thumbnail-list .kboard-card-body {
	padding: 0.4rem 0.4rem 0;
	display: flex;
	flex-direction: column;
	flex: 1;
}

/* 배지 영역 */
#kboard-thumbnail-list .kboard-card-badges {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	margin-bottom: 0.6rem;
	min-height: 2rem;
}

/* 배지 공통 */
#kboard-thumbnail-list .kboard-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.2rem 0.7rem;
	border-radius: 99rem;
	font-size: 1.1rem;
	font-weight: 700;
	line-height: 1.6;
	letter-spacing: 0.02em;
}

#kboard-thumbnail-list .kboard-badge-notice {
	background-color: rgba(var(--kboard-primary-rgb), 0.1);
	color: var(--kboard-primary);
}

#kboard-thumbnail-list .kboard-badge-popular {
	background-color: rgba(239, 68, 68, 0.1);
	color: var(--kboard-danger);
}

#kboard-thumbnail-list .kboard-badge-new {
	background-color: var(--kboard-danger);
	color: #fff;
}

/* 제목 */
#kboard-thumbnail-list .kboard-card-tit {
	margin: 0 0 0.5rem 0;
	font-size: 1.7rem;
	font-weight: 700;
	color: var(--kboard-text);
	line-height: 1.4;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	transition: color 0.2s;
}

#kboard-thumbnail-list .kboard-card:hover .kboard-card-tit {
	color: var(--kboard-primary);
}

/* 본문 요약 */
#kboard-thumbnail-list.kboard-skin-youtube .kboard-card-desc {
	margin: 0 0 0.5rem 0;
	font-size: 1.3rem;
	color: var(--kboard-text-muted);
	line-height: 1.6;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	display: none !important;
}

/* 날짜 */
#kboard-thumbnail-list .kboard-card-subtit {
	margin-top: auto;
	padding-top: 0.6rem;
	font-size: 1.3rem;
	color: var(--kboard-text-light);
	display: block;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 댓글 수 */
.kboard-comments-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 1.1rem;
	color: var(--kboard-primary);
	font-weight: 700;
	margin-left: 0.5rem;
	background: rgba(var(--kboard-primary-rgb), 0.1);
	padding: 0.1rem 0.6rem;
	border-radius: 99rem;
	vertical-align: middle;
}

.kboard-comments-count:empty {
	display: none;
}

/* New 뱃지 (레거시 kboard-thumbnail-new-notify 호환) */
.kboard-thumbnail-new-notify {
	background-color: var(--kboard-danger);
	color: #fff;
	padding: 0.2rem 0.6rem;
	border-radius: 4px;
	font-size: 1rem;
	font-weight: 700;
	vertical-align: middle;
	margin-right: 0.4rem;
}

.kboard-thumbnail-cut-strings {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ============================================
   Pagination — circular
   ============================================ */
#kboard-thumbnail-list .kboard-pagination {
	margin-top: 8rem;
	text-align: center;
	float: none;
}

#kboard-thumbnail-list .kboard-pagination ul {
	display: inline-flex;
	padding: 0;
	list-style: none;
	gap: 0.4rem;
	flex-wrap: wrap;
	justify-content: center;
}

#kboard-thumbnail-list .kboard-pagination li {
	display: block;
	margin: 0;
}

#kboard-thumbnail-list .kboard-pagination li a {
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 4rem;
	height: 4rem;
	padding: 0 0.8rem;
	border-radius: 50%;
	background: #fff;
	border: 1px solid var(--kboard-border);
	font-size: 1.4rem;
	color: var(--kboard-text);
	font-weight: 500;
	transition: background-color 0.2s, color 0.2s, border-color 0.2s;
}

#kboard-thumbnail-list .kboard-pagination li a:hover {
	background: var(--kboard-bg-alt);
	border-color: var(--kboard-primary);
	color: var(--kboard-primary);
}

#kboard-thumbnail-list .kboard-pagination li.active a,
#kboard-thumbnail-list .kboard-pagination li a:focus {
	background: var(--kboard-primary);
	color: #fff;
	border-color: var(--kboard-primary);
}

/* ============================================
   Bottom Control (write button)
   ============================================ */
#kboard-thumbnail-list .kboard-control {
	display: flex;
	justify-content: flex-end;
	padding: 1.6rem 0;
}

/* ============================================
   Powered By
   ============================================ */
.kboard-thumbnail-poweredby {
	text-align: right;
	font-size: 1.2rem;
	color: var(--kboard-border);
	margin-top: 0.8rem;
	width: 100%;
}

/* ============================================
   Document View
   ============================================ */
#kboard-thumbnail-document .kboard-document-wrap {
	background: transparent;
	border: none;
	border-radius: 0;
	overflow: visible;
}

#kboard-thumbnail-document .kboard-title {
	border-bottom: none;
}

#kboard-thumbnail-document .kboard-title h1 {
	margin: 0 0 1.2rem 0;
	padding: 0;
	font-size: 3.2rem;
	font-weight: 700;
	color: var(--kboard-text);
	line-height: 1.4;
}

/* 메타 한 줄: 좌 작성자·날짜 / 우 조회수 */
#kboard-thumbnail-document .kboard-detail {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 1.2rem 0;
	font-size: 1.4rem;
	color: var(--kboard-text-muted);
	border-top: none;
	/* border-top: 1px solid var(--kboard-border); */
	border-bottom: 1px solid var(--kboard-border);
	/* border-bottom: 1px solid var(--primary); */
	gap: 1rem;
	flex-wrap: wrap;
	background: transparent;
}

#kboard-thumbnail-document .kboard-detail .detail-meta-left {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
}

#kboard-thumbnail-document .kboard-detail .detail-meta-right {
	white-space: nowrap;
}

#kboard-thumbnail-document .kboard-detail .detail-sep {
	margin: 0 0.6rem;
	color: var(--kboard-border);
}

#kboard-thumbnail-document .kboard-detail .detail-category {
	color: var(--kboard-primary);
	font-weight: 600;
}

/* 레거시 detail-attr 호환 */
#kboard-thumbnail-document .kboard-detail .detail-attr {
	display: flex;
	align-items: center;
	gap: 0.6rem;
}

#kboard-thumbnail-document .kboard-detail .detail-name {
	font-weight: 600;
	color: var(--kboard-text-muted);
}

#kboard-thumbnail-document .kboard-detail .detail-value {
	color: var(--kboard-text);
}

#kboard-thumbnail-document .kboard-content {
	padding: 3rem 0;
	min-height: 20rem;
}

#kboard-thumbnail-document .content-view {
	font-size: 1.6rem;
	line-height: 1.9;
	color: #334155;
	display: block;
    margin: 0 auto;
}

#kboard-thumbnail-document .kboard-document-action {
	padding: 1rem 0 1.6rem;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
	border-top: 1px solid var(--kboard-border);
}


.note-video-clip {
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
}

.note-video-clip-wrap,
p:has(> .note-video-clip) {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}

.kboard-button-action {
	border: 1px solid var(--kboard-border);
	background: #fff;
	padding: 0.6rem 1.4rem;
	border-radius: var(--kboard-radius-sm);
	font-size: 1.3rem;
	cursor: pointer;
	margin-right: 0.5rem;
	font-weight: 500;
	transition: background 0.15s;
	font-family: var(--kboard-font-family);
}

.kboard-button-action:hover {
	background: var(--kboard-bg-alt);
}

.kboard-button-like { color: var(--kboard-danger); }
.kboard-button-unlike { color: var(--kboard-primary); }

.kboard-attach {
	border-top: 1px dashed var(--kboard-border);
	padding: 1.5rem 2.4rem;
	background: var(--kboard-bg-alt);
}

/* 댓글 영역 */
.kboard-comments-area {
	width: 100%;
	margin-top: 2rem;
}

/* 이전/다음 글: 원형 버튼 + 레이블 */
.kboard-document-navi {
	display: flex;
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-top: 0;
	padding: 1.4rem 0;
	border-top: 1px solid var(--kboard-border);
	/* border-bottom: 1px solid var(--kboard-border); */
}

#kboard-thumbnail-document .kboard-document-navi .kboard-prev-document,
#kboard-thumbnail-document .kboard-document-navi .kboard-next-document {
	width: auto;
}

.kboard-document-navi .navi-link {
	display: inline-flex;
	align-items: center;
	gap: 1rem;
	color: var(--kboard-text);
	text-decoration: none;
	font-size: 1.4rem;
	font-weight: 500;
	cursor: pointer;
}

.kboard-document-navi .navi-link:hover .navi-circ-btn {
	background: var(--kboard-primary);
	border-color: var(--kboard-primary);
	color: #fff;
}

.kboard-document-navi .navi-disabled {
	opacity: 0.35;
	pointer-events: none;
}

.kboard-document-navi .navi-circ-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 4rem;
	height: 4rem;
	border-radius: 50%;
	border: 1px solid var(--kboard-border);
	background: #fff;
	font-size: 2rem;
	line-height: 1;
	color: var(--kboard-text);
	transition: background 0.2s, border-color 0.2s, color 0.2s;
	flex-shrink: 0;
}

.kboard-document-navi .navi-label {
	color: var(--kboard-text-muted);
	font-size: 1.4rem;
}

#kboard-thumbnail-document .kboard-control {
	display: flex;
	justify-content: space-between;
	padding: 2rem 0;
	gap: 1rem;
}

#kboard-thumbnail-document .kboard-control .left,
#kboard-thumbnail-document .kboard-control .right {
	display: flex;
	gap: 0.8rem;
	flex-wrap: nowrap;
}

/* Added options (필드 그룹) */
.kboard-document-options-group {
	margin-bottom: 3rem;
	border: none;
	background: transparent;
	padding: 0;
}

.kboard-document-add-option-value-wrap {
	background: #fff;
	border: 1px solid var(--kboard-border);
	border-radius: var(--kboard-radius-sm);
	overflow: hidden;
	margin-bottom: 1rem;
}

.kboard-document-add-option-value-wrap:last-child {
	margin-bottom: 0;
}

.kboard-document-add-option-value {
	display: flex;
	align-items: stretch;
	min-height: 4.8rem;
}

.kboard-document-add-option-value .option-name {
	width: 16rem;
	background: var(--kboard-bg-alt);
	border-right: 1px solid var(--kboard-border);
	font-weight: 600;
	font-size: 1.4rem;
	color: var(--kboard-text);
	padding: 1.4rem 2rem;
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.kboard-document-add-option-value .option-separator {
	display: none;
}

.kboard-document-add-option-value .option-value {
	padding: 1.4rem 2rem;
	display: flex;
	align-items: center;
	flex: 1;
	font-size: 1.4rem;
	color: var(--kboard-text);
	word-break: break-word;
}

.kboard-document-add-option-value-wrap hr {
	display: none;
}

/* ============================================
   Editor
   ============================================ */
#kboard-thumbnail-editor .kboard-attr-row {
	display: flex;
	flex-direction: column;
	margin-bottom: 1.6rem;
	padding: 0;
	background: transparent;
}

#kboard-thumbnail-editor .attr-name {
	font-weight: 600;
	margin-bottom: 0.6rem;
	font-size: 1.4rem;
	width: 100% !important;
	float: none !important;
	text-align: left;
	padding: 0 !important;
	color: var(--kboard-text);
}

.attr-required-text {
	color: var(--kboard-danger);
	margin-left: 0.2rem;
}

#kboard-thumbnail-editor input[type=file] {
	margin: 0;
	padding: 0.8rem 0;
	width: 100%;
}

#kboard-thumbnail-editor .attr-value {
	margin: 0 !important;
	width: 100%;
	padding: 0;
}

#kboard-thumbnail-editor .attr-value .attr-value-option {
	display: inline-flex;
	align-items: center;
	margin-right: 1.6rem;
	cursor: pointer;
	font-size: 1.4rem;
	color: var(--kboard-text);
	gap: 0.6rem;
}

#kboard-thumbnail-editor .attr-value .attr-value-option input[type=checkbox] {
	appearance: none;
	-webkit-appearance: none;
	width: 1.8rem !important;
	height: 1.8rem !important;
	border: 1px solid var(--kboard-border);
	border-radius: 4px;
	background: #fff;
	cursor: pointer;
	position: relative;
	outline: none;
	margin: 0;
	flex-shrink: 0;
}

#kboard-thumbnail-editor .attr-value .attr-value-option input[type=checkbox]:checked {
	background-color: var(--kboard-primary);
	border-color: var(--kboard-primary);
	background-image: url("data:image/svg+xml,%3csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3e%3cpath d='M12.207 4.793a1 1 0 010 1.414l-5 5a1 1 0 01-1.414 0l-2-2a1 1 0 011.414-1.414L6.5 9.086l4.293-4.293a1 1 0 011.414 0z'/%3e%3c/svg%3e");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 100%;
}

#kboard-thumbnail-editor input[type=text],
#kboard-thumbnail-editor input[type=email],
#kboard-thumbnail-editor input[type=password],
#kboard-thumbnail-editor select {
	width: 100% !important;
}

#kboard-thumbnail-editor .kboard-content {
	border: none;
	padding: 0;
	margin: 0;
	background: transparent;
}

#kboard-thumbnail-editor textarea {
	width: 100% !important;
	min-height: 40rem;
	border: 1px solid var(--kboard-border);
	box-sizing: border-box;
	border-radius: var(--kboard-radius-sm);
}

#kboard-thumbnail-editor .kboard-control {
	display: flex;
	justify-content: space-between;
	padding: 2rem 0;
}

#kboard-thumbnail-editor .kboard-control .left,
#kboard-thumbnail-editor .kboard-control .right {
	display: flex;
	gap: 0.8rem;
}

/* Tree category in editor */
#kboard-thumbnail-editor .kboard-tree-category-wrap {
	display: flex;
	flex-wrap: wrap;
	gap: 1rem;
	width: 100%;
	margin-bottom: 1.6rem;
}

#kboard-thumbnail-editor .kboard-tree-category-wrap select {
	flex: 1;
	min-width: 12rem;
	width: auto;
}

/* Address field */
#kboard-thumbnail-editor .kboard-row-postcode {
	display: flex;
	align-items: center;
	gap: 0.8rem;
	margin-bottom: 0.8rem;
}

#kboard-thumbnail-editor .kboard-row-postcode input[type=text] {
	width: 15rem !important;
	flex: 0 0 auto;
}

#kboard-thumbnail-editor .kboard-row-postcode button {
	height: 4rem;
	flex-shrink: 0;
	white-space: nowrap;
	margin: 0 !important;
}

#kboard-thumbnail-editor .kboard-row-address-1,
#kboard-thumbnail-editor .kboard-row-address-2 {
	display: block;
	width: 100%;
	margin-bottom: 0.8rem;
}

#kboard-thumbnail-editor .kboard-row-address-2 { margin-bottom: 0; }

#kboard-thumbnail-editor .kboard-row-address-1 input[type=text],
#kboard-thumbnail-editor .kboard-row-address-2 input[type=text] {
	width: 100% !important;
}

/* ============================================
   Confirm (password page)
   ============================================ */
#kboard-thumbnail-editor.confirm {
	max-width: 40rem;
	margin: 6rem auto;
	padding: 3rem;
	border: 1px solid var(--kboard-border);
	border-radius: var(--kboard-radius-md);
	background: #fff;
	box-shadow: var(--kboard-shadow-md);
}

#kboard-thumbnail-editor.confirm .kboard-confirm-row {
	margin-bottom: 2.4rem;
}

#kboard-thumbnail-editor.confirm .attr-name {
	margin-bottom: 1rem;
}

#kboard-thumbnail-editor.confirm .description {
	color: var(--kboard-danger);
	font-size: 1.3rem;
	margin-top: 0.8rem;
	font-weight: 500;
}

#kboard-thumbnail-editor.confirm input[type=password] {
	width: 100%;
}

#kboard-thumbnail-editor.confirm .kboard-control {
	justify-content: center;
	flex-direction: column-reverse;
	gap: 1rem;
}

#kboard-thumbnail-editor.confirm .kboard-control .left,
#kboard-thumbnail-editor.confirm .kboard-control .right {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	width: 100%;
}

#kboard-thumbnail-editor.confirm .kboard-control button {
	width: 100%;
	height: 4rem;
	font-size: 1.5rem;
}

#kboard-thumbnail-editor.confirm .kboard-control a {
	width: 100%;
	height: 4rem;
	background: #fff !important;
	color: var(--kboard-text-muted) !important;
	border: 1px solid var(--kboard-border);
	box-shadow: none;
}

#kboard-thumbnail-editor.confirm .kboard-control a:hover {
	background: var(--kboard-bg-alt) !important;
	color: var(--kboard-text) !important;
}

/* ============================================
   Latest Widget
   ============================================ */
#kboard-thumbnail-latest {
	width: 100%;
	background: #fff;
	border: 1px solid var(--kboard-border);
	border-radius: var(--kboard-radius-sm);
	overflow: hidden;
}

#kboard-thumbnail-latest table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	border: 0;
}

#kboard-thumbnail-latest thead th {
	padding: 1rem;
	background: var(--kboard-bg-alt);
	border-bottom: 1px solid var(--kboard-border);
	font-size: 1.3rem;
	color: var(--kboard-text-muted);
	font-weight: 600;
	text-align: center;
	border-top: 0;
	border-left: 0;
	border-right: 0;
}

#kboard-thumbnail-latest tbody tr {
	border-bottom: 1px solid var(--kboard-border);
	background: #fff;
	transition: background 0.15s;
}

#kboard-thumbnail-latest tbody tr:last-child { border-bottom: none; }

#kboard-thumbnail-latest tbody tr:hover { background: var(--kboard-bg-alt); }

#kboard-thumbnail-latest td {
	padding: 1.2rem 1.6rem;
	vertical-align: middle;
	font-size: 1.4rem;
	border: 0;
}

#kboard-thumbnail-latest .kboard-latest-title { text-align: left; }

#kboard-thumbnail-latest .kboard-latest-title a {
	display: block;
	color: var(--kboard-text);
}

#kboard-thumbnail-latest .kboard-latest-title a:hover { color: var(--kboard-primary); }

#kboard-thumbnail-latest .kboard-thumbnail-cut-strings {
	display: block;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

#kboard-thumbnail-latest .kboard-latest-date,
#kboard-thumbnail-latest .kboard-latest-author {
	color: var(--kboard-text-muted);
	font-size: 1.3rem;
	text-align: center;
	width: 9rem;
}

/* ============================================
   Editor.js (KBoard editor area)
   ============================================ */
#kboard-editor-root,
.kboard-editor-root-editorjs,
.kboard-editor-scaffold {
	--kboard-editorjs-left-gutter: 44px;
	position: relative;
	margin: 8px 0 0;
	padding: 12px;
	min-height: 280px;
	background-color: #fff;
	border: 1px solid var(--kboard-border);
	border-radius: var(--kboard-radius-sm);
	overflow: visible;
}

#kboard-editor-root:focus-within,
.kboard-editor-root-editorjs:focus-within,
.kboard-editor-scaffold:focus-within {
	border-color: var(--kboard-primary);
	box-shadow: 0 0 0 3px rgba(var(--kboard-primary-rgb), 0.12);
}

#kboard-editor-root .codex-editor,
.kboard-editor-root-editorjs .codex-editor,
.kboard-editor-scaffold .codex-editor {
	position: relative;
	z-index: 1;
	overflow: visible;
}

#kboard-editor-root .codex-editor__redactor,
.kboard-editor-root-editorjs .codex-editor__redactor,
.kboard-editor-scaffold .codex-editor__redactor { overflow: visible; }

#kboard-editor-root .ce-block,
.kboard-editor-root-editorjs .ce-block,
.kboard-editor-scaffold .ce-block {
	padding: 2px 0;
	margin-bottom: 8px;
}

#kboard-editor-root .ce-block__content,
#kboard-editor-root .ce-toolbar__content,
.kboard-editor-root-editorjs .ce-block__content,
.kboard-editor-root-editorjs .ce-toolbar__content,
.kboard-editor-scaffold .ce-block__content,
.kboard-editor-scaffold .ce-toolbar__content {
	max-width: calc(100% - var(--kboard-editorjs-left-gutter));
	margin-left: var(--kboard-editorjs-left-gutter);
	margin-right: 0;
}

#kboard-editor-root .ce-paragraph,
#kboard-editor-root .ce-header,
#kboard-editor-root .cdx-list,
.kboard-editor-root-editorjs .ce-paragraph,
.kboard-editor-root-editorjs .ce-header,
.kboard-editor-root-editorjs .cdx-list,
.kboard-editor-scaffold .ce-paragraph,
.kboard-editor-scaffold .ce-header,
.kboard-editor-scaffold .cdx-list {
	color: var(--kboard-text);
	line-height: 1.7;
}

#kboard-editor-root .ce-toolbar__plus,
#kboard-editor-root .ce-toolbar__settings-btn,
.kboard-editor-root-editorjs .ce-toolbar__plus,
.kboard-editor-root-editorjs .ce-toolbar__settings-btn,
.kboard-editor-scaffold .ce-toolbar__plus,
.kboard-editor-scaffold .ce-toolbar__settings-btn {
	visibility: visible;
	opacity: 1;
	color: var(--kboard-text);
	background-color: #fff;
	border: 1px solid var(--kboard-border);
	border-radius: 999px;
	box-shadow: var(--kboard-shadow-sm);
}

#kboard-editor-root .ce-toolbar__plus:hover,
#kboard-editor-root .ce-toolbar__settings-btn:hover,
.kboard-editor-root-editorjs .ce-toolbar__plus:hover,
.kboard-editor-root-editorjs .ce-toolbar__settings-btn:hover,
.kboard-editor-scaffold .ce-toolbar__plus:hover,
.kboard-editor-scaffold .ce-toolbar__settings-btn:hover {
	color: var(--kboard-primary);
	border-color: var(--kboard-primary);
}

#kboard-editor-root .ce-popover,
#kboard-editor-root .ce-conversion-toolbar,
.kboard-editor-root-editorjs .ce-popover,
.kboard-editor-root-editorjs .ce-conversion-toolbar,
.kboard-editor-scaffold .ce-popover,
.kboard-editor-scaffold .ce-conversion-toolbar {
	border: 1px solid var(--kboard-border);
	box-shadow: var(--kboard-shadow-sm);
}

/* Content area — typography */
.kboard-content hr,
.kboard-content .kboard-editorjs-delimiter,
.kboard-document-content hr {
	margin: 1.8rem 0;
	border: 0;
	height: 0;
	border-top: 1px solid var(--kboard-border);
}

.kboard-content pre,
.kboard-content .kboard-editorjs-code,
.kboard-document-content pre {
	margin: 1.6rem 0;
	padding: 1.2rem;
	overflow: auto;
	background: var(--kboard-bg-alt);
	border: 1px solid var(--kboard-border);
	border-radius: var(--kboard-radius-sm);
	font-size: 1.3rem;
	line-height: 1.6;
}

.kboard-content table,
.kboard-document-content table {
	width: 100%;
	margin: 1.6rem 0;
	border-collapse: collapse;
	border: 1px solid var(--kboard-border);
	font-size: 1.4rem;
}

.kboard-content table th,
.kboard-content table td,
.kboard-document-content table th,
.kboard-document-content table td {
	padding: 1rem;
	border: 1px solid var(--kboard-border);
	vertical-align: top;
}

.kboard-content .kboard-warning,
.kboard-document-content .kboard-warning {
	margin: 1.6rem 0;
	padding: 1.2rem 1.4rem;
	background: var(--kboard-bg-alt);
	border: 1px solid var(--kboard-border);
	border-left: 3px solid var(--kboard-primary);
	border-radius: var(--kboard-radius-sm);
	line-height: 1.7;
}

/* ============================================
   Responsive — Tablet (≤ 992px) : 2 columns
   ============================================ */
@media screen and (max-width: 992px) {
	#kboard-thumbnail-list .kboard-cardset-wrap {
		grid-template-columns: repeat(2, 1fr);
		gap: 3rem var(--kboard-card-gap-x);
	}

	#kboard-thumbnail-list .kboard-card-figure {
		height: 20rem;
		border-radius: 2.4rem;
	}

	#kboard-thumbnail-list .kboard-list-header {
		flex-direction: row;
		align-items: center;
	}

	#kboard-thumbnail-list .kboard-header-right {
		width: 100%;
		flex-wrap: nowrap;
		gap: 0.6rem;
	}

	#kboard-thumbnail-list .kboard-search-input-wrap {
		min-width: unset;
		flex: 1;
	}

	#kboard-thumbnail-list .kboard-search-inline {
		flex: 1;
		flex-wrap: nowrap;
	}

	#kboard-thumbnail-list .kboard-search-target {
		min-width: 6rem;
		width: auto !important;
	}
}

/* ============================================
   Responsive — Mobile (≤ 600px) : 1 column
   ============================================ */
@media screen and (max-width: 600px) {
	:root {
		--kboard-img-height: 18rem;
	}

	#kboard-thumbnail-list .kboard-cardset-wrap {
		grid-template-columns: 1fr;
		gap: 2.4rem 0;
	}

	#kboard-thumbnail-list .kboard-card-figure {
		height: 18rem;
		border-radius: 2rem;
	}
	#kboard-thumbnail-list .kboard-list-header {
		flex-direction: row;
		align-items: center;
	}
	#kboard-thumbnail-list .kboard-header-right {
		flex-direction: row;
		align-items: center;
	}

	#kboard-thumbnail-list .kboard-search-inline {
		flex-direction: row;
		flex: 1;
	}

	#kboard-thumbnail-list .kboard-search-target {
    width: 7rem !important;
    flex-shrink: 0;
	}

	#kboard-thumbnail-list .kboard-search-input-wrap {
		flex: 1;
		min-width: 0;
	}



	#kboard-thumbnail-list .kboard-sort select {
		width: 100%;
	}

	#kboard-thumbnail-list .kboard-pagination {
		margin-top: 4rem;
	}

	/* Category mobile select */
	#kboard-thumbnail-list .kboard-category.category-pc {
		display: none;
	}

	#kboard-thumbnail-list .kboard-category.category-mobile {
		display: block;
		margin-top: 1.2rem;
	}

	#kboard-thumbnail-list .kboard-category.category-mobile form {
		display: flex;
		flex-wrap: wrap;
		gap: 0.8rem;
	}

	#kboard-thumbnail-list .kboard-category.category-mobile select {
		flex: 1;
		min-width: 14rem;
	}

	/* Document */
	#kboard-thumbnail-document .kboard-title h1 {
		font-size: 2.8rem;
	}

	#kboard-thumbnail-document .kboard-detail {
		padding: 1rem 0;
	}

	#kboard-thumbnail-document .kboard-content {
		padding: 2rem 0;
	}

	#kboard-thumbnail-document .kboard-control {
		flex-direction: column;
	}

	#kboard-thumbnail-document .kboard-control .left,
	#kboard-thumbnail-document .kboard-control .right {
		width: 100%;
		justify-content: center;
		flex-wrap: wrap;
	}

	.kboard-document-add-option-value {
		flex-direction: column;
	}

	.kboard-document-add-option-value .option-name {
		width: 100%;
		border-right: none;
		border-bottom: 1px solid var(--kboard-border);
		padding: 1.2rem 1.6rem;
	}

	.kboard-document-add-option-value .option-value {
		padding: 1.2rem 1.6rem;
	}

	/* Editor */
	#kboard-thumbnail-editor .kboard-control {
		flex-direction: column;
		gap: 1rem;
	}

	#kboard-thumbnail-editor .kboard-control .left,
	#kboard-thumbnail-editor .kboard-control .right {
		width: 100%;
		flex-direction: column;
		gap: 0.8rem;
	}

	/* Latest */
	#kboard-thumbnail-latest thead,
	#kboard-thumbnail-latest .kboard-latest-author {
		display: none;
	}

	#kboard-thumbnail-latest tbody tr {
		display: flex;
		flex-direction: column;
	}

	#kboard-thumbnail-latest td.kboard-latest-title {
		display: block;
		width: 100%;
		padding-bottom: 0.4rem;
		border: none;
	}

	#kboard-thumbnail-latest td.kboard-latest-date {
		display: block;
		width: 100%;
		text-align: left;
		font-size: 1.2rem;
		padding-top: 0;
		padding-bottom: 0.8rem;
		border: none;
	}

	#kboard-thumbnail-document .kboard-control {
		flex-direction: row;
	}

	/* Pagination */
	#kboard-thumbnail-list .kboard-pagination ul {
		gap: 0.3rem;
	}

	#kboard-thumbnail-list .kboard-pagination li a {
		min-width: 3.4rem;
		height: 3.4rem;
		font-size: 1.3rem;
	}

	/* Editor.js */
	#kboard-editor-root,
	.kboard-editor-root-editorjs,
	.kboard-editor-scaffold {
		--kboard-editorjs-left-gutter: 36px;
	}
}