@charset "UTF-8";
/* CatBoard default skin
 *
 * 커스터마이즈: 이 파일을 테마의 catboard-skins/{스킨명}/style.css 로
 * 복사하면 플러그인 파일 대신 로드됩니다. @charset "UTF-8" 선언은
 * 한글 주석 깨짐 방지를 위해 첫 줄에 유지하세요.
 *
 * 모든 규칙은 .catboard-wrap 하위로 한정해 테마와의 충돌을 피합니다.
 * 버튼/링크 색상 규칙은 테마의 a { color: ... } 를 이기기 위해
 * 의도적으로 특이도를 높여 두었습니다 — 셀렉터를 단순화하면 테마에
 * 따라 글자색이 덮일 수 있습니다.
 */

html {
  /* 62.5% of 16px browser font size is 10px */
  /* 16px * 0.625 = 10px */
  font-size: 62.5%;
}
body {
  /* 1.6 * 10px = 16px */
  font-size: 1.6rem;
}

/* ------------------------------------------------------------------ */
/* 공통 래퍼 */
/* ------------------------------------------------------------------ */
.catboard-wrap {
	display: flex;
	flex-direction: column;
	gap: 5rem;
}
.catboard-wrap a {
	text-decoration: none;
}
/* ------------------------------------------------------------------ */
/* 입력 요소 공통 */
/* ------------------------------------------------------------------ */
.catboard-wrap input[type="text"],
.catboard-wrap input[type="number"],
.catboard-wrap input[type="password"],
.catboard-wrap input[type="datetime-local"],
.catboard-wrap select,
.catboard-wrap textarea {
	padding: 1rem 2rem;
	border-radius: 0.8rem;
	border: 1px solid #DDD;
	background: #FFF;
	color: #767676;
	font-size: 1.6rem;
	font-weight: 400;
}
.catboard-wrap select {
	appearance: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	padding-right: 5rem;
	background-image: url(img/carat-icon.svg);
	background-repeat: no-repeat;
	background-position: right 2rem center;
	background-size: 1.4rem;
}
.catboard-wrap button {
	cursor: pointer;
}
/* ------------------------------------------------------------------ */
/* 게시판 헤더 (총 건수 + 검색) */
/* ------------------------------------------------------------------ */
.catboard-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
}
.catboard-header .catboard-total {
	color: #767676;
	font-size: 1.6rem;
	font-weight: 400;
}
.catboard-search-form {
	position: relative;
}
.catboard-search-form input[name="cb_search"],
.catboard-search-form select {
	height: 5.6rem;
	box-sizing: border-box;
}
.catboard-search-form input[name="cb_search"] {
	width: 32rem;
}
.catboard-search-form button {
	position: absolute;
	top: 50%;
	right: 0.8rem;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	justify-content: center;
	width: 3.6rem;
	height: 3.6rem;
	padding: 0;
	border: 0;
	border-radius: 99rem;
	background: #2C2C2C;
	cursor: pointer;
	font-size: 0;
	color: transparent;
}
.catboard-search-form button::before {
	content: "";
	width: 2.2rem;
	height: 2.2rem;
	background: url(img/search-icon.svg) no-repeat center;
	background-size: contain;
}
/* ------------------------------------------------------------------ */
/* 리스트 목록 */
/* ------------------------------------------------------------------ */
/* 타이틀 */
.catboard-list {
	border-top: 1px solid #2C2C2C;
	border-bottom: 1px solid #DDD;
}
.catboard-list-header {
	display: flex;
	align-items: center;
	gap: 3rem;
	padding: 3rem;
	color: #181818;
	text-align: center;
	font-size: 1.8rem;
	font-weight: 600;
}
.catboard-list-header .catboard-list-num,
.catboard-list-item .catboard-list-num {
	width: 7rem;
	flex-shrink: 0;
}
.catboard-list-header .catboard-list-category,
.catboard-list-item .catboard-list-category {
	width: 12rem;
	flex-shrink: 0;
}
.catboard-list-header .catboard-list-title,
.catboard-list-item .catboard-list-title {
	flex: 1;
}
.catboard-list-header .catboard-list-author,
.catboard-list-item .catboard-list-author {
	width: 9.9rem;
	flex-shrink: 0;
}
.catboard-list-header .catboard-list-date,
.catboard-list-item .catboard-list-date {
	width: 8.4rem;
	flex-shrink: 0;
}
.catboard-list-header .catboard-list-views,
.catboard-list-item .catboard-list-views {
	width: 6rem;
	flex-shrink: 0;
}
/* 목록 */
.catboard-list-item {
	border-top: 1px solid #DDD;
	display: flex;
	align-items: center;
	gap: 3rem;
	padding: 3rem;
	color: #767676;
	text-align: center;
	font-size: 1.4rem;
	font-weight: 400;
}
.catboard-list-item.is-notice {
	background: #F8F8F8;
}
.catboard-list-item .catboard-list-num .catboard-notice-badge {
	padding: 0.5rem 2rem;
	border-radius: 0.8rem;
	background: #2C2C2C;
	color: #FFF;
	font-size: 1.6rem;
	font-weight: 400;
}
.catboard-list-item .catboard-list-category:not(.is-empty) {
	box-sizing: border-box;
	padding: 0.5rem 2rem;
	border-radius: 0.8rem;
	border: 1px solid #DDD;
	color: #767676;
	font-size: 1.6rem;
	font-weight: 400;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.catboard-list-item .catboard-post-title {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.catboard-list-item .catboard-list-title a {
	text-align: left;
	color: #181818;
	font-size: 1.8rem;
	font-weight: 400;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.catboard-list-item .catboard-post-title .catboard-file-icon,
.catboard-list-item .catboard-post-title .catboard-lock-icon {
    display: flex;
}
.catboard-list-item .catboard-list-title .catboard-comment-count {
	color: #FF2744;
	font-size: 1.6rem;
	font-weight: 400;
}
/* 페이지네이션 */
.catboard-footer {
	display: flex;
	justify-content: end;
	align-items: center;
	gap: 1rem;
}
.catboard-footer .catboard-pagination {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 3rem;
	margin: 0 auto;
}
.catboard-footer .catboard-pagination li,
.catboard-footer .catboard-pagination li a {
	list-style: none;
	color: #767676;
	font-size: 1.8rem;
	font-weight: 400;
	transition: 0.3s;
}
.catboard-footer .catboard-pagination li.active,
.catboard-footer .catboard-pagination li.active a {
	color: #005AED;
	font-size: 1.8rem;
	font-weight: 600;
}
.catboard-footer .catboard-write-btn a {
	display: block;
	border-radius: 0.8rem;
	background: #2C2C2C;
	padding: 1rem 3rem;
	color: #FFF;
	font-size: 1.6rem;
	font-weight: 400;
}
.catboard-pagination img {
    display: block;
	width: 0.9rem;
	height: 1.5rem;
}
.catboard-pagination li:last-child img {
	transform: rotate(180deg);
}
/* ------------------------------------------------------------------ */
/* 상세페이지 */
/* ------------------------------------------------------------------ */
.catboard-post {
	gap: 3rem;
}
.catboard-document-header {
	padding: 5rem 0;
	border-bottom: 1px solid #DDD;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 3rem;
}
.catboard-document-header .badge-wrap {
	display: flex;
	gap: 1rem;
}
.catboard-document-header .badge-wrap .catboard-notice-badge {
	padding: 0.5rem 2rem;
	border-radius: 0.8rem;
	background: #2C2C2C;
	color:#FFF;
	font-size: 1.6rem;
	font-weight: 400;
}
.catboard-document-header .badge-wrap .catboard-category-badge {
	padding: 0.5rem 2rem;
	border-radius: 0.8rem;
	border: 1px solid #DDD;
	color: #767676;
	font-size: 1.6rem;
	font-weight: 400;
}
.catboard-document-header .catboard-document-title {
	color: #181818;
	text-align: center;
	font-size: 2.4rem;
	font-weight: 600;
	margin: 0;
}
.catboard-document-header .catboard-document-meta {
	display: flex;
	gap: 3rem;
	align-items: center;
}
.catboard-document-header .catboard-document-meta span {
	position: relative;
    display: flex;
    align-items: center;
    gap: 3rem;
	color: #767676;
	font-size: 1.6rem;
	font-weight: 400;
}
.catboard-document-header .catboard-document-meta span:after {
    position: relative;
    content: '';
    display: block;
    width: 1px;
    height: 1.4rem;
    background-color: #DDD;
    background-size: 100%;
}
.catboard-document-header .catboard-document-meta span:last-of-type {
    gap: 0.5rem;
}
.catboard-document-header .catboard-document-meta span:last-of-type:after {
	width: 0;
}
.catboard-document-content {
	padding: 5rem;
	border-radius: 1.2rem;
	border: 1px solid #DDD;
}
.catboard-document-content table,
.catboard-editor-wrap table {
	border-collapse: collapse;
}
.catboard-document-content table tr,
.catboard-document-content table td,
.catboard-editor-wrap table tr,
.catboard-editor-wrap table td {
	border: 1px solid #DDD;
}
.catboard-document-content hr,
.catboard-editor-wrap hr {
	background-color: #DDD;
}
.catboard-document-content iframe,
.catboard-editor-wrap iframe {
	aspect-ratio: 16 / 9;
	width: 100%;
	max-width: 100%;
	height: 100%;
}
.catboard-attachments {
	padding: 5rem;
	border-radius: 1.2rem;
	background: #F8F8F8;
	display: flex;
	align-items: start;
	gap: 5rem;
}
.catboard-attachments .catboard-attachments-title {
	color:#181818;
	font-size: 1.8rem;
	font-weight: 600;
}
.catboard-attachments .catboard-attachment-wrap {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.catboard-attachments .catboard-attachment-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	color: #767676;
	font-size: 1.6rem;
	font-weight: 400;
}
.catboard-comments {
	padding: 5rem;
	border-radius: 1.2rem;
	border: 1px solid #DDD;
	display: flex;
	flex-direction: column;
	gap: 3rem;
}
.catboard-comments .catboard-comments-title {
	color: #444;
	font-size: 1.8rem;
	font-weight: 600;
}
.catboard-comments .catboard-comments-title span {
	color: #FF2744;
}
.catboard-comments > *:not(:last-child) {
	padding-bottom: 3rem;
	border-bottom: 1px solid #ddd;
}
.catboard-comment-item {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.catboard-comment-meta {
	display: flex;
	justify-content: space-between;
}
.catboard-comment-info {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.catboard-comment-info .catboard-comment-author {
	color: #444;
    font-size: 1.6rem;
    font-weight: 400;
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
}
.catboard-comment-info .catboard-comment-author:after {
    content: '';
    display: block;
    width: 1px;
    height: 1.4rem;
    background: #DDD;
}
.catboard-comment-info span {
	color: #767676;
	font-size: 1.4rem;
	font-weight: 400;
}
.catboard-comment-content {
	color: #181818;
	font-size: 1.6rem;
	font-weight: 400;
}
.catboard-comment-btn {
    display: flex;
    align-items: center;
	gap: 1rem;
}
.catboard-comment-btn > * {
    display: flex;
    align-items: center;
	gap: 1rem;
}
.catboard-comment-btn > *:not(:last-child)::after {
    content: '';
    width: 1px;
    height: 1.4rem;
    background: #DDD;
}
.catboard-comment-btn button {
	padding: 0;
	border: 0;
	background: unset;
	color: #767676;
	font-size: 1.6rem;
	font-weight: 400;
}
.catboard-comment-form form {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.catboard-comment-text {
    display: flex;
	align-items: stretch;
    gap: 1rem;
}
.catboard-comment-text textarea {
    flex: 1;
    min-width: 0;
	border-radius: 1.2rem;
	background: #F8F8F8;
	height: 10rem;
	box-sizing: border-box;
}
.catboard-comment-text button {
    flex-shrink: 0;
    width: 15rem;
    padding: 3rem;
    border-radius: 1.2rem;
    background: #2C2C2C;
    color: #FFF;
    font-size: 1.8rem;
    font-weight: 400;
    border: none;
	height: 10rem;
}
.catboard-adjacent {
	position: relative;
	padding: 5rem;
	border: 1px solid #DDD;
	border-radius: 1.2rem;
	display: flex;
	align-items: center;
}
.catboard-adjacent .catboard-adjacent-item {
	position: relative;
	flex: 1 1 50%;
	max-width: 50%;
	min-width: 0;
	display: flex;
	align-items: center;
	gap: 5rem;
}
.catboard-adjacent .catboard-adjacent-item.prev {
	padding-right: 1rem;
}
.catboard-adjacent .catboard-adjacent-item.next {
	padding-left: 1rem;
	margin-left: auto;
}
/* prev만 있을 때 */
.catboard-adjacent .catboard-adjacent-item.prev::after,
/* next만 있을 때 */
.catboard-adjacent .catboard-adjacent-item.next::before {
	content: '';
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 1px;
	height: 2.7rem;
	background: #DDD;
}
.catboard-adjacent .catboard-adjacent-item.prev::after {
	right: 0;
}
.catboard-adjacent .catboard-adjacent-item.next::before {
	left: 0;
}
/* 둘 다 있을 때는 구분선 하나만 표시 */
.catboard-adjacent .catboard-adjacent-item.prev + .catboard-adjacent-item.next::before {
	display: none;
}
.catboard-adjacent .catboard-adjacent-item.next,
.catboard-adjacent .catboard-adjacent-item.next .catboard-adjacent-label {
	flex-direction: row-reverse;
}
.catboard-adjacent .catboard-adjacent-label {
	flex-shrink: 0;
	display: flex;
	align-items: center;
	gap: 1rem;
	color: #444;
	font-size: 1.8rem;
	font-weight: 400;
}
.catboard-adjacent .catboard-adjacent-item.next .catboard-adjacent-label img {
	transform: rotate(180deg);
}
.catboard-adjacent .catboard-adjacent-title {
	color: #767676;
	font-size: 1.6rem;
	font-weight: 400;
	text-overflow: ellipsis;
	overflow: hidden;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
}
.catboard-document-actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 1rem;
}
.catboard-document-actions .catboard-document-edit {
	display: flex;
	align-items: center;
	gap: 1rem;
}
.catboard-document-actions .catboard-btn {
	padding: 2rem 5rem;
	border-radius: 1.2rem;
	border: 1px solid #DDD;
	background: #F8F8F8;
	color: #767676;
	font-size: 1.8rem;
	font-weight: 400;
}
.catboard-document-actions .catboard-btn-list {
	background: #2C2C2C;
	color: #FFF;
	border: 0;
}
.catboard-document-actions .catboard-btn-danger {
	background: #FF2744;
	color: #FFF;
	border: 0;
}
/* ------------------------------------------------------------------ */
/* 게시글 작성페이지 */
/* ------------------------------------------------------------------ */
.catboard-editor form,
.catboard-editor-wrap {
	display: flex;
	flex-direction: column;
	gap: 5rem;
}
.catboard-editor-section {
	display: flex;
	flex-direction: column;
	gap: 3rem;
}
.catboard-editor-row {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}
.catboard-editor-label {
	color: #181818;
	font-size: 1.6rem;
	font-weight: 400;
}
.catboard-editor-wrap input[type=file]::file-selector-button {
	padding: 1rem 3rem;
	border-radius: 0.8rem;
	background:#585858;
	color: #FFF;
	font-size: 1.4rem;
	font-weight: 400;
	border: 0;
}
.catboard-editor-row .catboard-file-field-row {
	display: flex;
	align-items: center;
	gap: 0.5rem;
}
.catboard-editor-row button {
	padding: 1rem 3rem;
    border-radius: 0.8rem;
    width: 14rem;
    border: 1px solid #DDD;
    background: #F8F8F8;
    color: #767676;
    font-size: 1.8rem;
    font-weight: 400;
    margin-top: 1rem;
}
.catboard-file-field-label {
	color: #767676;
	font-size: 1.4rem;
	font-weight: 400;
}
.catboard-editor-wrap .catboard-required {
	color: #005AED;
}
.catboard-file-fields {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}
.catboard-file-field-row,
.catboard-file-list-item {
	display: flex;
	align-items: center;
	gap: 1rem;
	flex-wrap: wrap;
}
.catboard-file-delete-btn,
.catboard-file-add-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 3.6rem;
	padding: 0.8rem 1.4rem;
	border: 1px solid #DDD;
	border-radius: 0.8rem;
	background: #F8F8F8;
	color: #2C2C2C;
	font-size: 1.4rem;
	line-height: 1.2;
}
.catboard-file-delete-btn {
	color: #FF2744;
}
.catboard-file-add-btn:disabled,
.catboard-file-delete-btn:disabled {
	opacity: 0.45;
	cursor: not-allowed;
}
.catboard-wrap .note-modal-footer {
	padding-top: 1.2rem;
	margin-bottom: 2.2rem;
}
.catboard-wrap .note-modal-footer .note-btn {
	margin-bottom: 0;
}
.catboard-wrap .note-link-protocol {
	display: none;
}
.catboard-editor-actions {
	display: flex;
	justify-content: center;
	gap: 1rem;
	margin-top: 5rem;
}
.catboard-editor-actions .catboard-btn {
	padding: 2rem 5rem;
	border-radius: 1.2rem;
	border: 1px solid #DDD;
	background: #F8F8F8;
	color: #767676;
	font-size: 1.8rem;
	font-weight: 400;
}
.catboard-editor-actions button.catboard-btn {
	border: 0;
	background: #2C2C2C;
	color: #FFF;
}

/* ------------------------------------------------------------------ */
/* 최신글 모아보기 */
/* ------------------------------------------------------------------ */
.catboard-latest-title {
	font-size: 16px;
	font-weight: 700;
	margin: 0 0 8px;
	padding-bottom: 8px;
	border-bottom: 2px solid #333;
}
.catboard-latest-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.catboard-latest-item {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 7px 2px;
	border-bottom: 1px solid #f0f0f0;
	font-size: 13px;
}
.catboard-latest-board {
	flex-shrink: 0;
	padding: 1px 6px;
	background: #f0f3f6;
	color: #456;
	font-size: 11px;
	border-radius: 2px;
}
.catboard-latest-link {
	flex: 1;
	min-width: 0;
}
.catboard-latest-link p {
	margin: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.catboard-latest-link:hover p {
	text-decoration: underline;
}
.catboard-latest-date {
	flex-shrink: 0;
	color: #999;
	font-size: 12px;
}
.catboard-latest-empty {
	padding: 24px 0;
	text-align: center;
	color: #aaa;
	font-size: 13px;
}

/* ------------------------------------------------------------------ */
/* 알림/오류 메시지 */
/* ------------------------------------------------------------------ */
.catboard-notice {
	padding: 10px 14px;
	margin-bottom: 12px;
	border-radius: 3px;
	font-size: 13px;
	border-left: 4px solid;
}
.catboard-notice-error   { background: #fde; border-color: #e74c3c; color: #a00; }
.catboard-notice-success { background: #efe; border-color: #27ae60; color: #070; }
.catboard-notice-info    { background: #eef; border-color: #2980b9; color: #025; }
/* ------------------------------------------------------------------ */
/* 비밀글 */
/* ------------------------------------------------------------------ */
.catboard-lock-icon {
	font-size: 12px;
	flex-shrink: 0;
}
.catboard-password-gate {
	border-top: 2px solid #333;
	padding: 48px 16px;
	text-align: center;
}
.catboard-password-gate-icon {
	font-size: 36px;
	margin-bottom: 8px;
}
.catboard-password-gate-msg {
	color: #555;
	font-size: 14px;
	margin: 0 0 16px;
}
.catboard-password-form {
	display: inline-flex;
	gap: 6px;
	margin-bottom: 12px;
}
.catboard-password-form input[type="password"] {
	padding: 7px 10px;
	border: 1px solid #d0d5dd;
	border-radius: 6px;
	font-size: 13px;
	width: 200px;
}
.catboard-password-gate .catboard-btn {
	display: inline-flex;
}