/**
 * HappyPaws — wp-kr KBoard skin
 */

@import url("https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800&display=swap");

.kboard {
	width: 100%;
	max-width: none;
}

.kboard .hp-home-panel,
.kboard .hp-kboard-panel {
	width: 100%;
	max-width: none;
	box-sizing: border-box;
	padding: clamp(var(--hp-space-4, 1rem), 2vw, var(--hp-space-5, 1.5rem));
	font-family: var(--hp-font-family, "Nunito", system-ui, sans-serif);
	color: var(--hp-color-text, #4a3f47);
	background: var(--hp-color-surface, #fff);
	border: 1px solid var(--hp-color-border, #ffe4ec);
	border-radius: var(--hp-radius-2xl, 1.25rem);
	box-shadow: var(--hp-shadow-card, 0 4px 24px rgba(232, 145, 168, 0.08));
}

.hp-kboard-panel__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hp-space-3, 0.75rem);
	margin-bottom: var(--hp-space-4, 1rem);
}

.hp-kboard-panel__head .hp-home-panel__title {
	margin: 0;
	font-size: var(--hp-font-size-lg, 1.125rem);
	font-weight: var(--hp-font-weight-extrabold, 800);
}

.hp-kboard-panel__title-link {
	color: inherit;
	text-decoration: none;
	transition: color var(--hp-transition-fast, 0.15s ease);
}

.hp-kboard-panel__title-link:hover,
.hp-kboard-panel__title-link:focus-visible {
	color: var(--hp-color-accent, #e891a8);
}

.hp-kboard-panel__write,
.hp-kboard-toolbar__write {
	flex-shrink: 0;
}

/* Category tabs */
#kboard-avatar-list .kboard-category.hp-board-tabs {
	margin-bottom: var(--hp-space-4, 1rem);
}

#kboard-avatar-list .kboard-category-list {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hp-space-2, 0.5rem);
	margin: 0;
	padding: 0;
	list-style: none;
	border: 0;
	background: transparent;
}

#kboard-avatar-list .kboard-category-list li {
	display: inline-block;
	padding: 0;
	border: 0;
}

#kboard-avatar-list .kboard-category-list li::before,
#kboard-avatar-list .kboard-category-list li::after {
	display: none;
}

#kboard-avatar-list .hp-board-tabs__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.75rem;
	padding: var(--hp-space-2, 0.5rem) var(--hp-space-4, 1rem);
	font-family: inherit;
	font-size: var(--hp-font-size-xs, 0.75rem);
	font-weight: var(--hp-font-weight-semibold, 600);
	color: var(--hp-color-text-muted, #8a7b82);
	background: var(--hp-color-bg-subtle, #fff8f0);
	border: 1px solid transparent;
	border-radius: var(--hp-radius-full, 999px);
	text-decoration: none;
}

#kboard-avatar-list .hp-board-tabs__btn.is-active,
#kboard-avatar-list .kboard-category-selected .hp-board-tabs__btn {
	color: var(--hp-color-accent, #e891a8);
	background: var(--hp-pink-50, #fff5f8);
	border-color: var(--hp-pink-200, #ffd0de);
}

#kboard-avatar-list .kboard-category.category-mobile select {
	width: 100%;
	min-height: 2.75rem;
	padding: var(--hp-space-2, 0.5rem) var(--hp-space-3, 0.75rem);
	font-family: inherit;
	border: 1px solid var(--hp-color-border, #ffe4ec);
	border-radius: var(--hp-radius-full, 999px);
	background: var(--hp-color-bg-subtle, #fff8f0);
}

#kboard-avatar-list .kboard-category.category-mobile {
	display: none;
}

/* Toolbar / search + write */
.hp-kboard-toolbar {
	margin-bottom: var(--hp-space-4, 1rem);
}

.hp-kboard-toolbar__form {
	display: flex;
	flex-wrap: nowrap;
	gap: var(--hp-space-2, 0.5rem);
	align-items: stretch;
	width: 100%;
}

.hp-kboard-toolbar__select,
.hp-kboard-toolbar__input,
.hp-kboard-toolbar__btn,
.hp-kboard-toolbar__write {
	box-sizing: border-box;
	min-height: 2.75rem;
	height: 2.75rem;
	padding: 0 var(--hp-space-3, 0.75rem);
	font-family: inherit;
	font-size: var(--hp-font-size-sm, 0.875rem);
	line-height: 2.75rem;
}

.hp-kboard-toolbar__select,
.hp-kboard-toolbar__input {
	border: 1px solid var(--hp-color-border, #ffe4ec);
	border-radius: var(--hp-radius-full, 999px);
	background: var(--hp-color-bg-subtle, #fff8f0);
}

.hp-kboard-toolbar__select {
	flex: 0 0 auto;
	min-width: 5.5rem;
	padding-right: 1.75rem;
	line-height: normal;
}

.hp-kboard-toolbar__input {
	flex: 1 1 auto;
	min-width: 0;
	line-height: normal;
}

.hp-kboard-toolbar__btn,
.hp-kboard-toolbar__write {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	white-space: nowrap;
}

/* Table list */
.hp-kboard-table-wrap {
	overflow-x: auto;
}

.hp-kboard-table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
}

.hp-kboard-table thead th {
	padding: var(--hp-space-3, 0.75rem) var(--hp-space-2, 0.5rem);
	font-size: var(--hp-font-size-sm, 0.875rem);
	font-weight: var(--hp-font-weight-semibold, 600);
	color: var(--hp-color-text-muted, #8a7b82);
	text-align: center;
	border-top: 1px solid var(--hp-color-border, #ffe4ec);
	border-bottom: 1px solid var(--hp-color-border, #ffe4ec);
	background: var(--hp-color-bg-subtle, #fff8f0);
}

.hp-kboard-table tbody td {
	padding: var(--hp-space-3, 0.75rem) var(--hp-space-2, 0.5rem);
	font-size: var(--hp-font-size-sm, 0.875rem);
	color: var(--hp-color-text, #4a3f47);
	text-align: center;
	vertical-align: middle;
	border-bottom: 1px solid var(--hp-color-border, #ffe4ec);
}

.hp-kboard-table .kboard-list-title {
	width: auto;
	text-align: left;
}

.hp-kboard-table .kboard-list-title a {
	display: block;
	color: inherit;
	text-decoration: none;
}

.hp-kboard-table .kboard-list-title a:hover .hp-kboard-table__title-text {
	color: var(--hp-color-accent, #e891a8);
}

.hp-kboard-table__title-text {
	display: inline;
	font-weight: var(--hp-font-weight-semibold, 600);
	line-height: 1.4;
	word-break: break-word;
}

.hp-kboard-table .kboard-list-uid {
	width: 4.5rem;
}

.hp-kboard-table .kboard-list-user {
	width: 8rem;
	word-break: break-word;
}

.hp-kboard-table .kboard-list-user img,
.hp-kboard-table .kboard-mobile-contents img {
	display: none !important;
}

.hp-kboard-table .kboard-list-date {
	width: 6.5rem;
}

.hp-kboard-table .kboard-list-view,
.hp-kboard-table .kboard-list-vote {
	width: 3.5rem;
}

.hp-kboard-table__row--notice .kboard-list-uid {
	color: var(--hp-color-accent, #e891a8);
	font-weight: var(--hp-font-weight-bold, 700);
}

.hp-kboard-table__row--popular .kboard-list-uid {
	color: var(--hp-pink-600, #d67a94);
	font-weight: var(--hp-font-weight-bold, 700);
}

.hp-kboard-table__row.kboard-list-selected {
	background: var(--hp-pink-50, #fff5f8);
}

.hp-kboard-table .kboard-comments-count {
	margin-left: 4px;
	font-size: var(--hp-font-size-xs, 0.75rem);
	font-weight: var(--hp-font-weight-semibold, 600);
	color: var(--hp-color-accent, #e891a8);
}

.hp-kboard-table .kboard-mobile-contents {
	display: none;
	margin-top: var(--hp-space-1, 0.25rem);
	font-size: var(--hp-font-size-xs, 0.75rem);
	color: var(--hp-color-text-muted, #8a7b82);
}

.hp-kboard-table .kboard-icon-reply {
	display: inline-block;
	width: 12px;
	height: 12px;
	margin-right: 4px;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e891a8'%3E%3Cpath d='M10 9V5l-7 7 7 7v-4.1c5 0 8.5 1.6 11 5.1-1-5-4-10-11-11z'/%3E%3C/svg%3E") center/contain no-repeat;
	vertical-align: middle;
}

/* Editor + list stack */
.hp-kboard-editor-list {
	margin-top: var(--hp-space-6, 2rem);
}

.hp-kboard-editor-list #kboard-avatar-list {
	margin-top: 0;
}

/* Legacy list (latest widget) */
.hp-kboard-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--hp-color-border, #ffe4ec);
}

.hp-kboard-list__item {
	border-bottom: 1px solid var(--hp-color-border, #ffe4ec);
}

.hp-kboard-list__item--notice .hp-kboard-list__title::before {
	content: "공지";
	display: inline-block;
	margin-right: var(--hp-space-2, 0.5rem);
	padding: 0.1rem 0.45rem;
	font-size: 0.65rem;
	font-weight: 700;
	color: #fff;
	background: var(--hp-pink-500, #e891a8);
	border-radius: var(--hp-radius-sm, 0.25rem);
}

.hp-kboard-list__link {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-1, 0.25rem);
	padding: var(--hp-space-4, 1rem) 0;
	color: inherit;
	text-decoration: none;
}

.hp-kboard-list__link:hover .hp-kboard-list__title {
	color: var(--hp-color-accent, #e891a8);
}

.hp-kboard-list__title {
	font-size: var(--hp-font-size-base, 1rem);
	font-weight: var(--hp-font-weight-semibold, 600);
	line-height: var(--hp-line-height-tight, 1.25);
	color: var(--hp-color-text, #4a3f47);
}

.hp-kboard-list__new {
	display: inline-block;
	margin-right: var(--hp-space-1, 0.25rem);
	padding: 0 0.35rem;
	font-size: 0.65rem;
	font-weight: 700;
	color: #fff;
	background: var(--hp-pink-500, #e891a8);
	border-radius: var(--hp-radius-sm, 0.25rem);
	vertical-align: middle;
}

.hp-kboard-list__meta,
.hp-kboard-list__stats {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hp-space-2, 0.5rem) var(--hp-space-3, 0.75rem);
	font-size: var(--hp-font-size-sm, 0.875rem);
	color: var(--hp-color-text-muted, #8a7b82);
}

.hp-kboard-list__stats {
	font-size: var(--hp-font-size-xs, 0.75rem);
}

/* Pagination */
#kboard-avatar-list .kboard-pagination {
	padding: var(--hp-space-5, 1.5rem) 0 var(--hp-space-2, 0.5rem);
}

#kboard-avatar-list .kboard-pagination-pages {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--hp-space-1, 0.25rem);
	margin: 0;
	padding: 0;
	list-style: none;
}

#kboard-avatar-list .kboard-pagination-pages li a,
#kboard-avatar-list .kboard-pagination-pages li span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2.75rem;
	min-height: 2.75rem;
	padding: 0 var(--hp-space-2, 0.5rem);
	font-size: var(--hp-font-size-sm, 0.875rem);
	color: var(--hp-color-text-muted, #8a7b82);
	background: var(--hp-color-bg-subtle, #fff8f0);
	border: 1px solid var(--hp-color-border, #ffe4ec);
	border-radius: var(--hp-radius-full, 999px);
	text-decoration: none;
}

#kboard-avatar-list .kboard-pagination-pages li.active a {
	color: var(--hp-color-accent, #e891a8);
	background: var(--hp-pink-50, #fff5f8);
	border-color: var(--hp-pink-200, #ffd0de);
	font-weight: var(--hp-font-weight-semibold, 600);
}

/* Document */
.hp-kboard-document__head {
	margin-bottom: var(--hp-space-5, 1.5rem);
	padding-bottom: var(--hp-space-4, 1rem);
	border-bottom: 1px solid var(--hp-color-border, #ffe4ec);
}

.hp-kboard-document__title {
	margin: 0 0 var(--hp-space-3, 0.75rem);
	font-size: var(--hp-font-size-2xl, 1.5rem);
	font-weight: var(--hp-font-weight-extrabold, 800);
	line-height: var(--hp-line-height-tight, 1.25);
}

.hp-kboard-document__title-link {
	color: inherit;
	text-decoration: none;
	transition: color var(--hp-transition-fast, 0.15s ease);
}

.hp-kboard-document__title-link:hover,
.hp-kboard-document__title-link:focus-visible {
	color: var(--hp-color-accent, #e891a8);
}

.hp-kboard-document__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hp-space-2, 0.5rem) var(--hp-space-4, 1rem);
	font-size: var(--hp-font-size-sm, 0.875rem);
	color: var(--hp-color-text-muted, #8a7b82);
}

.hp-kboard-document__images {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-4, 1rem);
	margin-bottom: var(--hp-space-5, 1.5rem);
}

.hp-kboard-document__figure {
	margin: 0;
	overflow: hidden;
	border-radius: var(--hp-radius-xl, 1rem);
	border: 1px solid var(--hp-color-border, #ffe4ec);
}

.hp-kboard-document__figure img {
	width: 100%;
	height: auto;
}

.hp-kboard-document__body .content-view {
	font-size: var(--hp-font-size-base, 1rem);
	line-height: 1.75;
}

.hp-kboard-document__body .content-view img {
	max-width: 100%;
	height: auto;
	border-radius: var(--hp-radius-lg, 0.75rem);
}

.hp-kboard-document__actions,
.hp-kboard-document__control,
.hp-kboard-editor__control {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hp-space-2, 0.5rem);
	align-items: center;
	justify-content: space-between;
	margin-top: var(--hp-space-5, 1.5rem);
	padding-top: var(--hp-space-4, 1rem);
	border-top: 1px solid var(--hp-color-border, #ffe4ec);
}

.hp-kboard-document__actions {
	justify-content: center;
	width: 100%;
}

.hp-kboard-document__control .left,
.hp-kboard-document__control .right,
.hp-kboard-editor__control .left,
.hp-kboard-editor__control .right {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hp-space-2, 0.5rem);
}

.hp-kboard-document__nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--hp-space-3, 0.75rem);
	margin-top: var(--hp-space-5, 1.5rem);
	padding-top: var(--hp-space-4, 1rem);
	border-top: 1px solid var(--hp-color-border, #ffe4ec);
}

.hp-kboard-document__nav a {
	display: flex;
	flex-direction: column;
	gap: var(--hp-space-1, 0.25rem);
	padding: var(--hp-space-3, 0.75rem);
	font-size: var(--hp-font-size-sm, 0.875rem);
	color: var(--hp-color-text, #4a3f47);
	background: var(--hp-color-bg-subtle, #fff8f0);
	border: 1px solid var(--hp-color-border, #ffe4ec);
	border-radius: var(--hp-radius-lg, 0.75rem);
	text-decoration: none;
}

.hp-kboard-document__nav .kboard-next-document a {
	text-align: right;
}

.hp-kboard-document__nav .navi-label {
	font-size: var(--hp-font-size-xs, 0.75rem);
	font-weight: var(--hp-font-weight-semibold, 600);
	color: var(--hp-color-text-muted, #8a7b82);
}

/* Editor */
.hp-kboard-editor .kboard-attr-row {
	padding: var(--hp-space-3, 0.75rem) 0;
	border-bottom: 1px solid var(--hp-color-border, #ffe4ec);
}

.hp-kboard-editor .attr-name {
	display: block;
	margin-bottom: var(--hp-space-2, 0.5rem);
	font-size: var(--hp-font-size-sm, 0.875rem);
	font-weight: var(--hp-font-weight-semibold, 600);
}

.hp-kboard-editor input[type="text"],
.hp-kboard-editor input[type="password"],
.hp-kboard-editor input[type="email"],
.hp-kboard-editor select,
.hp-kboard-editor textarea,
.hp-kboard-editor .editor-textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 2.75rem;
	padding: var(--hp-space-2, 0.5rem) var(--hp-space-3, 0.75rem);
	font-family: inherit;
	font-size: var(--hp-font-size-sm, 0.875rem);
	border: 1px solid var(--hp-color-border, #ffe4ec);
	border-radius: var(--hp-radius-lg, 0.75rem);
	background: var(--hp-color-bg-subtle, #fff8f0);
}

.hp-kboard-editor .editor-textarea,
.hp-kboard-editor textarea {
	min-height: 12rem;
}

/* Latest widget */
.hp-kboard-latest__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.hp-kboard-latest__item {
	border-bottom: 1px solid var(--hp-color-border, #ffe4ec);
}

.hp-kboard-latest__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--hp-space-3, 0.75rem);
	padding: var(--hp-space-3, 0.75rem) 0;
	color: inherit;
	text-decoration: none;
}

.hp-kboard-latest__title {
	flex: 1;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--hp-font-size-sm, 0.875rem);
	font-weight: var(--hp-font-weight-semibold, 600);
}

.hp-kboard-latest__date {
	flex-shrink: 0;
	font-size: var(--hp-font-size-xs, 0.75rem);
	color: var(--hp-color-text-muted, #8a7b82);
}

/* Latest widget — table layout (streamer page / kboard_latest) */
.hp-kboard-latest--table {
	width: 100%;
}

.hp-kboard-latest--table .hp-kboard-table-wrap {
	overflow-x: auto;
}

.hp-kboard-latest--table .hp-kboard-table--latest {
	margin: 0;
}

.hp-kboard-latest--table .hp-kboard-table--latest .kboard-list-uid {
	width: 3.5rem;
}

.hp-kboard-latest--table .hp-kboard-table--latest thead th {
	padding-top: var(--hp-space-2, 0.5rem);
	padding-bottom: var(--hp-space-2, 0.5rem);
	font-size: var(--hp-font-size-xs, 0.75rem);
}

.hp-kboard-latest--table .hp-kboard-table--latest tbody td {
	font-size: var(--hp-font-size-sm, 0.875rem);
}

.hp-kboard-latest--table .hp-kboard-table--latest .kboard-list-title a {
	color: inherit;
	text-decoration: none;
}

.hp-kboard-latest--table .hp-kboard-table--latest .kboard-list-title a:hover .hp-kboard-table__title-text {
	color: var(--hp-color-accent, #e891a8);
}

@media (max-width: 767px) {
	.hp-kboard-latest--table .hp-kboard-table--latest .kboard-list-user,
	.hp-kboard-latest--table .hp-kboard-table--latest .kboard-list-date,
	.hp-kboard-latest--table .hp-kboard-table--latest .kboard-list-view,
	.hp-kboard-latest--table .hp-kboard-table--latest .kboard-list-vote {
		display: none;
	}

	.hp-kboard-latest--table .hp-kboard-table--latest thead {
		display: none;
	}

	.hp-kboard-latest--table .hp-kboard-table--latest .kboard-list-title {
		width: 100%;
	}
}

/* Lock icon (from avatar skin) */
.kboard-icon-lock {
	display: inline-block;
	width: 14px;
	height: 16px;
	margin-right: 4px;
	vertical-align: middle;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e891a8'%3E%3Cpath d='M18 8h-1V6c0-2.76-2.24-5-5-5S7 3.24 7 6v2H6c-1.1 0-2 .9-2 2v10c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V10c0-1.1-.9-2-2-2zm-6 9c-1.1 0-2-.9-2-2s.9-2 2-2 2 .9 2 2-.9 2-2 2zm3.1-9H8.9V6c0-1.71 1.39-3.1 3.1-3.1 1.71 0 3.1 1.39 3.1 3.1v2z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.kboard-icon-photo {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-right: 4px;
	vertical-align: middle;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23e891a8'%3E%3Cpath d='M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z'/%3E%3C/svg%3E") center/contain no-repeat;
}

.kboard-avatar-poweredby {
	display: none;
}

.hp-kboard-document__control--pre-comments {
	margin-top: var(--hp-space-5, 1.5rem);
	margin-bottom: var(--hp-space-4, 1rem);
	padding-top: var(--hp-space-4, 1rem);
	border-top: 1px solid var(--hp-color-border, #ffe4ec);
}

.hp-kboard-comments-area {
	width: 100%;
	margin-bottom: var(--hp-space-5, 1.5rem);
}

/* KBoard Comments default skin — HappyPaws pink theme (do not edit plugin skin) */
.hp-kboard-panel .kboard-comments-default,
.hp-kboard-comments-area .kboard-comments-default,
.hp-page--kboard .kboard-comments-default {
	--kboard-comments-primary: var(--hp-color-accent, #e891a8);
	--kboard-comments-primary-hover: var(--hp-pink-600, #d67a94);
	--kboard-comments-text: var(--hp-color-text, #4a3f47);
	--kboard-comments-text-muted: var(--hp-color-text-muted, #8a7b82);
	--kboard-comments-bg: var(--hp-color-surface, #fff);
	--kboard-comments-bg-alt: var(--hp-color-bg-subtle, #fff8f0);
	--kboard-comments-border: var(--hp-color-border, #ffe4ec);
	--kboard-comments-border-light: var(--hp-pink-50, #fff5f8);
	--kboard-comments-radius: var(--hp-radius-lg, 0.75rem);
	margin-top: var(--hp-space-5, 1.5rem);
	padding-top: var(--hp-space-4, 1rem);
	border-top: 1px solid var(--hp-color-border, #ffe4ec);
	font-family: var(--hp-font-family, "Nunito", system-ui, sans-serif);
	color: var(--hp-color-text, #4a3f47);
}

.hp-kboard-panel .kboard-comments-default .comments-header,
.hp-kboard-comments-area .kboard-comments-default .comments-header,
.hp-page--kboard .kboard-comments-default .comments-header {
	padding-bottom: var(--hp-space-3, 0.75rem);
	margin-bottom: var(--hp-space-4, 1rem);
	border-bottom: 2px solid var(--hp-color-border-strong, #ffd0de);
}

.hp-kboard-panel .kboard-comments-default .comments-count,
.hp-kboard-comments-area .kboard-comments-default .comments-count,
.hp-page--kboard .kboard-comments-default .comments-count {
	font-size: var(--hp-font-size-lg, 1.125rem);
	font-weight: var(--hp-font-weight-bold, 700);
	color: var(--hp-color-text, #4a3f47);
}

.hp-kboard-panel .kboard-comments-default .comments-count .comments-total-count,
.hp-kboard-comments-area .kboard-comments-default .comments-count .comments-total-count,
.hp-page--kboard .kboard-comments-default .comments-count .comments-total-count {
	color: var(--hp-color-accent, #e891a8);
}

.hp-kboard-panel .kboard-comments-default .comments-sort select,
.hp-kboard-comments-area .kboard-comments-default .comments-sort select,
.hp-page--kboard .kboard-comments-default .comments-sort select {
	border-color: var(--hp-color-border, #ffe4ec);
	border-radius: var(--hp-radius-md, 0.5rem);
	background-color: var(--hp-color-bg-subtle, #fff8f0);
	color: var(--hp-color-text-muted, #8a7b82);
}

.hp-kboard-panel .kboard-comments-default .comments-sort select:focus,
.hp-kboard-comments-area .kboard-comments-default .comments-sort select:focus,
.hp-page--kboard .kboard-comments-default .comments-sort select:focus,
.hp-kboard-panel .kboard-comments-default input:focus,
.hp-kboard-comments-area .kboard-comments-default input:focus,
.hp-page--kboard .kboard-comments-default input:focus,
.hp-kboard-panel .kboard-comments-default textarea:focus,
.hp-kboard-comments-area .kboard-comments-default textarea:focus,
.hp-page--kboard .kboard-comments-default textarea:focus {
	border-color: var(--hp-color-accent, #e891a8);
	box-shadow: 0 0 0 3px rgba(232, 145, 168, 0.18);
}

.hp-kboard-panel .kboard-comments-default .kboard-comments-form,
.hp-kboard-comments-area .kboard-comments-default .kboard-comments-form,
.hp-page--kboard .kboard-comments-default .kboard-comments-form {
	background: var(--hp-color-bg-subtle, #fff8f0);
	border: 1px solid var(--hp-color-border, #ffe4ec);
	border-radius: var(--hp-radius-lg, 0.75rem);
}

.hp-kboard-panel .kboard-comments-default textarea,
.hp-kboard-comments-area .kboard-comments-default textarea,
.hp-page--kboard .kboard-comments-default textarea,
.hp-kboard-panel .kboard-comments-default input[type="text"],
.hp-kboard-comments-area .kboard-comments-default input[type="text"],
.hp-page--kboard .kboard-comments-default input[type="text"],
.hp-kboard-panel .kboard-comments-default input[type="password"],
.hp-kboard-comments-area .kboard-comments-default input[type="password"],
.hp-page--kboard .kboard-comments-default input[type="password"],
.hp-kboard-panel .kboard-comments-default input[type="file"],
.hp-kboard-comments-area .kboard-comments-default input[type="file"],
.hp-page--kboard .kboard-comments-default input[type="file"] {
	border-color: var(--hp-color-border, #ffe4ec);
	border-radius: var(--hp-radius-md, 0.5rem);
	background: var(--hp-color-surface, #fff);
	font-family: inherit;
}

.hp-kboard-panel .kboard-comments-default .comments-submit-button input[type="submit"],
.hp-kboard-comments-area .kboard-comments-default .comments-submit-button input[type="submit"],
.hp-page--kboard .kboard-comments-default .comments-submit-button input[type="submit"] {
	min-height: 2.75rem;
	padding: var(--hp-space-2, 0.5rem) var(--hp-space-5, 1.5rem);
	font-family: inherit;
	font-size: var(--hp-font-size-sm, 0.875rem);
	font-weight: var(--hp-font-weight-semibold, 600);
	color: #fff;
	background: linear-gradient(135deg, var(--hp-pink-400, #f0a0b4), var(--hp-pink-500, #e891a8));
	border: none;
	border-radius: var(--hp-radius-full, 999px);
	cursor: pointer;
	transition: transform var(--hp-transition-fast, 0.15s ease), box-shadow var(--hp-transition-fast, 0.15s ease);
}

.hp-kboard-panel .kboard-comments-default .comments-submit-button input[type="submit"]:hover,
.hp-kboard-comments-area .kboard-comments-default .comments-submit-button input[type="submit"]:hover,
.hp-page--kboard .kboard-comments-default .comments-submit-button input[type="submit"]:hover,
.hp-kboard-panel .kboard-comments-default .comments-submit-button input[type="submit"]:focus-visible,
.hp-kboard-comments-area .kboard-comments-default .comments-submit-button input[type="submit"]:focus-visible,
.hp-page--kboard .kboard-comments-default .comments-submit-button input[type="submit"]:focus-visible {
	background: linear-gradient(135deg, var(--hp-pink-500, #e891a8), var(--hp-pink-600, #d67a94));
	color: #fff;
	transform: translateY(-1px);
	box-shadow: var(--hp-shadow-sm, 0 1px 2px rgba(232, 145, 168, 0.2));
}

.hp-kboard-panel .kboard-comments-default .comments-button-action:hover,
.hp-kboard-comments-area .kboard-comments-default .comments-button-action:hover,
.hp-page--kboard .kboard-comments-default .comments-button-action:hover,
.hp-kboard-panel .kboard-comments-default .comments-list-file1 a:hover,
.hp-kboard-comments-area .kboard-comments-default .comments-list-file1 a:hover,
.hp-page--kboard .kboard-comments-default .comments-list-file1 a:hover,
.hp-kboard-panel .kboard-comments-default .kboard-comments-login a,
.hp-kboard-comments-area .kboard-comments-default .kboard-comments-login a,
.hp-page--kboard .kboard-comments-default .kboard-comments-login a {
	color: var(--hp-color-accent, #e891a8);
}

.hp-kboard-panel .kboard-comments-default .comments-list > ul > li,
.hp-kboard-comments-area .kboard-comments-default .comments-list > ul > li,
.hp-page--kboard .kboard-comments-default .comments-list > ul > li {
	border-top-color: var(--hp-color-border, #ffe4ec);
}

.hp-kboard-panel .kboard-comments-default .comments-list li .comments-list,
.hp-kboard-comments-area .kboard-comments-default .comments-list li .comments-list,
.hp-page--kboard .kboard-comments-default .comments-list li .comments-list {
	border-left-color: var(--hp-pink-200, #ffd0de);
}

.hp-kboard-panel .kboard-comments-default .kboard-comments-login,
.hp-kboard-comments-area .kboard-comments-default .kboard-comments-login,
.hp-page--kboard .kboard-comments-default .kboard-comments-login {
	background: var(--hp-color-bg-subtle, #fff8f0);
	border-color: var(--hp-color-border, #ffe4ec);
	border-radius: var(--hp-radius-lg, 0.75rem);
	color: var(--hp-color-text-muted, #8a7b82);
}

.hp-kboard-panel .kboard-comments-default .comments-list-username,
.hp-kboard-comments-area .kboard-comments-default .comments-list-username,
.hp-page--kboard .kboard-comments-default .comments-list-username {
	font-size: var(--hp-font-size-sm, 0.875rem);
	font-weight: var(--hp-font-weight-semibold, 600);
}

.hp-kboard-panel .kboard-comments-default .comments-list-create,
.hp-kboard-comments-area .kboard-comments-default .comments-list-create,
.hp-page--kboard .kboard-comments-default .comments-list-create {
	font-size: var(--hp-font-size-xs, 0.75rem);
	color: var(--hp-color-text-muted, #8a7b82);
}

.hp-kboard-panel .kboard-comments-default .comments-list-content,
.hp-kboard-comments-area .kboard-comments-default .comments-list-content,
.hp-page--kboard .kboard-comments-default .comments-list-content {
	font-size: var(--hp-font-size-sm, 0.875rem);
	line-height: 1.6;
	color: var(--hp-color-text, #4a3f47);
}

@media (max-width: 767px) {
	#kboard-avatar-list .kboard-category.category-mobile {
		display: block;
	}

	#kboard-avatar-list .kboard-category.category-pc {
		display: none;
	}

	.hp-kboard-toolbar__form {
		flex-wrap: wrap;
	}

	.hp-kboard-toolbar__select,
	.hp-kboard-toolbar__input {
		flex: 1 1 100%;
		width: 100%;
	}

	.hp-kboard-toolbar__btn,
	.hp-kboard-toolbar__write {
		flex: 1 1 calc(50% - var(--hp-space-1, 0.25rem));
	}

	.hp-kboard-table {
		table-layout: auto;
	}

	.hp-kboard-table .kboard-list-user,
	.hp-kboard-table .kboard-list-date,
	.hp-kboard-table .kboard-list-view,
	.hp-kboard-table .kboard-list-vote {
		display: none;
	}

	.hp-kboard-table .kboard-list-uid {
		width: 3rem;
	}

	.hp-kboard-table .kboard-mobile-contents {
		display: block;
	}

	.hp-kboard-document__title {
		font-size: var(--hp-font-size-xl, 1.25rem);
	}

	.hp-kboard-document__meta {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--hp-space-1, 0.25rem);
	}

	.hp-kboard-document__control,
	.hp-kboard-editor__control {
		flex-direction: column;
		align-items: stretch;
	}

	.hp-kboard-document__control .left,
	.hp-kboard-document__control .right,
	.hp-kboard-editor__control .left,
	.hp-kboard-editor__control .right {
		width: 100%;
		justify-content: center;
	}

	.hp-kboard-document__nav {
		grid-template-columns: 1fr;
	}

	.hp-kboard-document__nav .kboard-next-document a {
		text-align: left;
	}
}