/*
 * CommuBoard - structure and layout.
 * Colors come from css/theme.css custom properties.
 */

.cb-board {
	/* Row metrics. Overridden by the density modifier below. */
	--cb-row-h: 36px;
	--cb-row-pad-y: 6px;
	--cb-row-pad-x: 9px;

	/* Type scale. Swapped as a set by the font-size preference. */
	--cb-fs-base: 15px;
	--cb-fs-title: 14.25px;
	--cb-fs-meta: 12.45px;
	--cb-fs-small: 12px;

	/* Fixed column widths (title takes the remainder). */
	--cb-col-id: 90px;
	--cb-col-author: 105px;
	--cb-col-time: 90px;
	--cb-col-view: 45px;
	--cb-col-rate: 45px;

	--cb-max-width: 1100px;

	max-width: var(--cb-max-width);
	margin: 0 auto;
	color: var(--cb-text);
	background: var(--cb-bg);
	font-size: var(--cb-fs-base);
	line-height: 1.5;
	box-sizing: border-box;
}
.cb-board *,
.cb-board *::before,
.cb-board *::after {
	box-sizing: border-box;
}
.cb-board a {
	color: inherit;
	text-decoration: none;
}

.cb-board[data-cb-fontsize="small"] {
	--cb-fs-base: 13.5px;
	--cb-fs-title: 13px;
	--cb-fs-meta: 11.5px;
	--cb-fs-small: 11px;
}
.cb-board[data-cb-fontsize="large"] {
	--cb-fs-base: 16.5px;
	--cb-fs-title: 16px;
	--cb-fs-meta: 13.5px;
	--cb-fs-small: 13px;
}

.cb-board.cb-density-compact { --cb-row-h: 32px; --cb-row-pad-y: 4px; }
.cb-board.cb-density-normal  { --cb-row-h: 36px; --cb-row-pad-y: 6px; }
.cb-board.cb-density-relaxed { --cb-row-h: 44px; --cb-row-pad-y: 10px; }

/* ==========================================================================
   Header
   ========================================================================== */
.cb-header {
	padding: 4px 0 12px;
	border-bottom: 1px solid var(--cb-border);
}
.cb-header__title {
	margin: 0;
	font-size: 1.3em;
	font-weight: 700;
	color: var(--cb-text);
	line-height: 1.3;
}
.cb-header__desc {
	margin: 5px 0 0;
	color: var(--cb-text-sub);
	font-size: var(--cb-fs-meta);
}

/* ==========================================================================
   Category tabs
   ========================================================================== */
.cb-tabs {
	display: flex;
	flex-wrap: nowrap;
	overflow-x: auto;
	position: relative;
	z-index: 1;
	margin-bottom: -1px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.cb-tabs::-webkit-scrollbar { display: none; }

.cb-tabs__item {
	flex: 0 0 auto;
	padding: 6px 10px;
	color: var(--cb-text-muted);
	font-size: var(--cb-fs-base);
	white-space: nowrap;
	border: 1px solid transparent;
	border-bottom: 1px solid var(--cb-border-strong);
	margin-bottom: -1px;
}
.cb-tabs__item:hover {
	color: var(--cb-text);
}
.cb-tabs__item.is-active {
	color: var(--cb-text);
	font-weight: 600;
	border-color: var(--cb-border-strong);
	border-bottom-color: var(--cb-bg);
	background: var(--cb-bg);
}

/* ==========================================================================
   Toolbar
   ========================================================================== */
.cb-toolbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 4px;
	padding: 8px 0;
}
.cb-toolbar__group {
	display: flex;
	align-items: center;
	gap: 4px;
	flex-wrap: wrap;
}
.cb-toolbar__group--end { margin-left: auto; }

.cb-btn {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 30px;
	padding: 0 10px;
	border: 1px solid var(--cb-border-strong);
	background: var(--cb-bg);
	color: var(--cb-text);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
	white-space: nowrap;
}
.cb-btn:hover { background: var(--cb-bg-hover); }
.cb-btn--primary {
	background: var(--cb-accent);
	border-color: var(--cb-accent);
	color: var(--cb-accent-text);
	font-weight: 600;
}
.cb-btn--primary:hover { filter: brightness(1.1); }
.cb-btn--toggle.is-active {
	background: var(--cb-accent);
	border-color: var(--cb-accent);
	color: var(--cb-accent-text);
	font-weight: 700;
}
/* Outline-style active state, used by the scrap toggle. Deliberately not
   .cb-btn.is-active, which would also match the filled .cb-btn--toggle. */
.cb-btn[data-cb-scrap].is-active {
	border-color: var(--cb-accent);
	color: var(--cb-accent);
	font-weight: 600;
}
.cb-btn:disabled { opacity: 0.55; cursor: default; }
.cb-btn--admin {
	color: var(--cb-text-sub);
	border-style: dashed;
}
.cb-btn--admin:hover { color: var(--cb-text); }

.cb-admin-check {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: var(--cb-fs-meta);
	color: var(--cb-text-sub);
	cursor: pointer;
	white-space: nowrap;
}

.cb-select {
	height: 30px;
	padding: 0 6px;
	border: 1px solid var(--cb-border-strong);
	background: var(--cb-bg);
	color: var(--cb-text);
	font-size: 13px;
	line-height: 1;
	cursor: pointer;
}
.cb-icon-btn {
	border: none;
	background: transparent;
	color: var(--cb-text);
	cursor: pointer;
	font-size: 1em;
	line-height: 1;
	padding: 4px;
}

/* ==========================================================================
   List
   ========================================================================== */
.cb-list {
	border-bottom: 1px solid var(--cb-border-strong);
}

.cb-row {
	display: flex;
	align-items: center;
	position: relative;
	min-height: var(--cb-row-h);
	padding: var(--cb-row-pad-y) var(--cb-row-pad-x);
	border-bottom: 1px solid var(--cb-border);
	color: var(--cb-text);
}
a.cb-row:hover {
	background: var(--cb-bg-hover);
	text-decoration: none;
}
a.cb-row:visited:not(.cb-row--notice) .cb-title,
a.cb-row:visited:not(.cb-row--notice) .cb-col-author,
a.cb-row:visited:not(.cb-row--notice) .cb-col-time {
	color: var(--cb-text-visited);
}
.cb-board[data-cb-dim-visited="off"] a.cb-row:visited .cb-title,
.cb-board[data-cb-dim-visited="off"] a.cb-row:visited .cb-col-author,
.cb-board[data-cb-dim-visited="off"] a.cb-row:visited .cb-col-time {
	color: inherit;
}
.cb-row.is-current {
	background: var(--cb-bg-hover);
	box-shadow: inset 2px 0 0 var(--cb-accent);
}
.cb-row--notice {
	background: var(--cb-bg-notice);
}
.cb-row--notice .cb-title {
	font-weight: 700;
}
.cb-row[hidden] { display: none; }

/* Column header row */
.cb-row--head {
	min-height: var(--cb-row-h);
	border-bottom: 2px solid var(--cb-border-strong);
	color: var(--cb-text-sub);
	font-size: var(--cb-fs-meta);
	font-weight: 700;
	cursor: default;
}
.cb-row--head:hover { background: transparent; }

/* One line on desktop: row-top grows, row-bottom keeps its natural width. */
.cb-row-top {
	display: flex;
	align-items: center;
	flex: 1 1 0;
	min-width: 0;
}
.cb-row-bottom {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
}

.cb-col {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	font-size: var(--cb-fs-meta);
	color: var(--cb-text-sub);
}
.cb-row-check {
	flex: 0 0 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.cb-row-check input { cursor: pointer; margin: 0; }

.cb-col-id     { flex: 0 0 var(--cb-col-id); text-align: center; }
.cb-col-title  { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 4px; font-size: var(--cb-fs-title); color: var(--cb-text); }
.cb-col-author { flex: 0 0 var(--cb-col-author); }
.cb-col-time   { flex: 0 0 var(--cb-col-time); text-align: center; }
.cb-col-view   { flex: 0 0 var(--cb-col-view); text-align: center; }
.cb-col-rate   { flex: 0 0 var(--cb-col-rate); text-align: center; }

.cb-title {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	min-width: 0;
}
.cb-badge {
	flex: 0 0 auto;
	padding: 3px 4px;
	border-radius: 3px;
	background: var(--cb-badge-bg);
	color: var(--cb-badge-text);
	font-size: 10.7px;
	font-weight: 700;
	line-height: 1;
}
.cb-best-mark { flex: 0 0 auto; color: var(--cb-best); }
.cb-media-mark { flex: 0 0 auto; font-size: 0.85em; opacity: 0.8; }
.cb-cmt-count { flex: 0 0 auto; color: var(--cb-text-sub); font-size: var(--cb-fs-small); }
.cb-notice-mark { color: var(--cb-text-sub); }

.cb-row--notice-toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 30px;
	padding: var(--cb-row-pad-y) var(--cb-row-pad-x);
	background: var(--cb-bg-notice);
	color: var(--cb-text-sub);
	font-size: var(--cb-fs-meta);
	font-family: inherit;
	border: none;
	border-bottom: 1px solid var(--cb-border);
	cursor: pointer;
}
.cb-row--notice-toggle:hover { background: var(--cb-bg-hover); }

.cb-empty {
	padding: 56px 0;
	text-align: center;
	color: var(--cb-text-muted);
	font-size: var(--cb-fs-meta);
	border-bottom: 1px solid var(--cb-border);
}

/* Hover thumbnail preview (desktop only) */
.cb-preview {
	display: none;
	position: absolute;
	z-index: 20;
	top: calc(100% - 2px);
	left: var(--cb-col-id);
	width: var(--cb-preview-size, 170px);
	max-width: 40vw;
	padding: 4px;
	background: var(--cb-bg);
	border: 1px solid var(--cb-border-strong);
	box-shadow: 0 4px 16px var(--cb-shadow-color);
	pointer-events: none;
}
.cb-preview img {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   Search / pagination
   ========================================================================== */
.cb-search {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
	flex-wrap: wrap;
	padding: 10px 0;
}
.cb-search input[type="text"] {
	height: 30px;
	padding: 0 8px;
	border: 1px solid var(--cb-border-strong);
	background: var(--cb-bg-input);
	color: var(--cb-text);
	font-size: 13px;
	min-width: 180px;
}

.cb-pagination {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 3px;
	padding: 6px 0 14px;
	flex-wrap: wrap;
}
.cb-pagination a,
.cb-pagination strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 8px;
	border: 1px solid var(--cb-border);
	color: var(--cb-text-sub);
	font-size: 13px;
	font-weight: 400;
}
.cb-pagination strong {
	border-color: var(--cb-accent);
	color: var(--cb-text);
	font-weight: 700;
}
.cb-pagination a:hover { background: var(--cb-bg-hover); color: var(--cb-text); }

.cb-jump {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 4px;
	padding: 0 0 20px;
	color: var(--cb-text-sub);
	font-size: var(--cb-fs-meta);
}
.cb-jump input[type="date"] {
	height: 30px;
	padding: 0 6px;
	border: 1px solid var(--cb-border-strong);
	background: var(--cb-bg-input);
	color: var(--cb-text);
	font-size: 13px;
}

/* ==========================================================================
   Floating buttons
   ========================================================================== */
.cb-floating {
	position: fixed;
	right: 18px;
	bottom: 18px;
	display: flex;
	flex-direction: column;
	gap: 6px;
	z-index: 40;
}
.cb-floating__btn {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--cb-border-strong);
	background: var(--cb-bg);
	color: var(--cb-text);
	box-shadow: 0 2px 8px var(--cb-shadow-color);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 14px;
}
.cb-floating__btn:hover { background: var(--cb-bg-hover); }

/* ==========================================================================
   Settings modal
   ========================================================================== */
.cb-settings-modal[hidden] { display: none; }
.cb-settings-modal__backdrop {
	position: fixed;
	inset: 0;
	background: var(--cb-scrim);
	z-index: 50;
}
.cb-settings-modal__panel {
	position: fixed;
	right: 18px;
	bottom: 68px;
	z-index: 51;
	width: 250px;
	max-width: calc(100vw - 36px);
	background: var(--cb-bg);
	border: 1px solid var(--cb-border-strong);
	box-shadow: 0 4px 20px var(--cb-shadow-color);
}
.cb-settings-modal__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 9px 12px;
	border-bottom: 1px solid var(--cb-border);
	color: var(--cb-text);
	font-size: var(--cb-fs-meta);
}
.cb-settings-modal__body {
	padding: 10px 12px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cb-settings-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	font-size: var(--cb-fs-meta);
	color: var(--cb-text-sub);
}
.cb-settings-row select {
	height: 26px;
	padding: 0 4px;
	border: 1px solid var(--cb-border-strong);
	background: var(--cb-bg-input);
	color: var(--cb-text);
	font-size: 12px;
}

/* ==========================================================================
   Article (detail) view
   ========================================================================== */
.cb-article {
	padding: 12px 0 14px;
	border-bottom: 1px solid var(--cb-border);
}
.cb-article__titlebar {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	padding: 9px 12px;
	background: var(--cb-bg-notice);
	border: 1px solid var(--cb-border);
}
.cb-article__title {
	margin: 0;
	font-size: 1.15em;
	font-weight: 700;
	color: var(--cb-text);
	word-break: break-word;
	line-height: 1.4;
}
.cb-article__inforow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px 12px;
	padding: 8px 12px;
	border-bottom: 1px solid var(--cb-border);
	font-size: var(--cb-fs-meta);
	color: var(--cb-text-sub);
}
.cb-article__author {
	font-weight: 600;
	color: var(--cb-text);
}
.cb-article__stats {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 5px;
	margin-left: auto;
}
.cb-stat__k { color: var(--cb-text-muted); }
.cb-stat__v { color: var(--cb-text); }
.cb-stat__v--up { color: var(--cb-vote-up); }
.cb-stat__v--down { color: var(--cb-vote-down); }
.cb-article__sep { opacity: 0.35; }
.cb-article__permalink {
	padding: 5px 12px 0;
	text-align: right;
	font-size: var(--cb-fs-small);
	color: var(--cb-text-muted);
	word-break: break-all;
}

.cb-extravars {
	width: 100%;
	margin: 12px 0;
	border-collapse: collapse;
	font-size: var(--cb-fs-meta);
}
.cb-extravars th,
.cb-extravars td {
	border: 1px solid var(--cb-border);
	padding: 6px 10px;
	text-align: left;
}
.cb-extravars th {
	background: var(--cb-bg-sub);
	color: var(--cb-text-sub);
	width: 28%;
	font-weight: 600;
}

.cb-article__body {
	padding: 18px 2px;
	line-height: 1.7;
	word-break: break-word;
	overflow-wrap: break-word;
	min-height: 80px;
}
.cb-article__body img { max-width: 100%; height: auto; }

.cb-password-form {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	padding: 20px 0;
}
.cb-password-form input[type="password"],
.cb-form input[type="password"] {
	height: 30px;
	padding: 0 8px;
	border: 1px solid var(--cb-border-strong);
	background: var(--cb-bg-input);
	color: var(--cb-text);
	font-size: 13px;
}

.cb-filelist { margin: 8px 0; }
.cb-filelist__items {
	list-style: none;
	margin: 6px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 3px;
	font-size: var(--cb-fs-meta);
}
.cb-filelist__items[hidden] { display: none; }
.cb-text-muted { color: var(--cb-text-muted); }

.cb-tags {
	margin: 8px 0;
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}
.cb-tag {
	padding: 3px 8px;
	background: var(--cb-bg-sub);
	border: 1px solid var(--cb-border);
	color: var(--cb-text-sub);
	font-size: var(--cb-fs-small);
}
.cb-tag:hover { background: var(--cb-bg-hover); color: var(--cb-text); }

.cb-votebox {
	display: flex;
	justify-content: center;
	gap: 8px;
	padding: 18px 0;
}
.cb-vote-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 2px;
	min-width: 84px;
	padding: 8px 18px;
	border: 1px solid var(--cb-border-strong);
	background: var(--cb-bg);
	color: var(--cb-text-sub);
	font-family: inherit;
	cursor: pointer;
}
.cb-vote-btn:hover { background: var(--cb-bg-hover); }
.cb-vote-btn--up.is-active { border-color: var(--cb-vote-up); color: var(--cb-vote-up); }
.cb-vote-btn--down.is-active { border-color: var(--cb-vote-down); color: var(--cb-vote-down); }
.cb-vote-btn__label { font-size: var(--cb-fs-meta); font-weight: 600; }
.cb-vote-btn__count { font-size: 1.05em; font-weight: 700; color: var(--cb-text); }

.cb-article__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 6px;
	padding-top: 10px;
	border-top: 1px solid var(--cb-border);
}
.cb-article__actions-left,
.cb-article__actions-right {
	display: flex;
	gap: 4px;
	flex-wrap: wrap;
}

/* ==========================================================================
   Comments
   ========================================================================== */
.cb-comments { padding: 14px 0 30px; }
.cb-comments__head {
	padding: 4px 0 10px;
	color: var(--cb-text);
	font-size: var(--cb-fs-base);
	border-bottom: 2px solid var(--cb-border-strong);
}
.cb-comments__list {
	display: flex;
	flex-direction: column;
}
.cb-comments__empty {
	padding: 30px 0;
	text-align: center;
	color: var(--cb-text-muted);
	font-size: var(--cb-fs-meta);
	border-bottom: 1px solid var(--cb-border);
}

.cb-comment {
	border-bottom: 1px solid var(--cb-border);
}

/*
 * Replies are marked three ways at once - indent, a darker surface and a left
 * rule. The list is dense and the indent steps are small, so any one of them
 * alone is easy to miss when scanning.
 */
.cb-comment--reply {
	background: var(--cb-bg-reply);
	border-left: 3px solid var(--cb-border-strong);
}
.cb-comment--reply .cb-comment__head { background: var(--cb-bg-reply-head); }

/* Even a light tint pushes --cb-text-muted well under 3:1 here (badly so in
   dark mode), so the small text in a reply moves one step up to --cb-text-sub.
   That leaves replies slightly more legible than root comments, not less. */
.cb-comment--reply .cb-comment__time,
.cb-comment--reply .cb-comment__actions,
.cb-comment--reply .cb-comment__actions a,
.cb-comment--reply .cb-comment__reply-btn { color: var(--cb-text-sub); }

/* The template caps data-cb-depth at 4 so the text keeps a usable width. */
.cb-comment[data-cb-depth="1"] { margin-left: 18px; }
.cb-comment[data-cb-depth="2"] { margin-left: 36px; }
.cb-comment[data-cb-depth="3"] { margin-left: 54px; }
.cb-comment[data-cb-depth="4"] { margin-left: 72px; }

.cb-comment__head {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 7px 9px;
	background: var(--cb-bg-sub);
	font-size: var(--cb-fs-meta);
}
.cb-comment__author {
	font-weight: 600;
	color: var(--cb-text);
}
.cb-comment__parent-link {
	color: var(--cb-best);
	font-size: var(--cb-fs-small);
}
.cb-comment__time {
	margin-left: auto;
	color: var(--cb-text-muted);
}
.cb-comment__body {
	padding: 9px 9px;
	font-size: var(--cb-fs-title);
	line-height: 1.6;
	word-break: break-word;
	overflow-wrap: break-word;
}
.cb-comment__body img { max-width: 100%; height: auto; }
.cb-comment__body--deleted { color: var(--cb-text-muted); font-style: italic; }
.cb-comment__password {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
}
.cb-comment__files {
	list-style: none;
	margin: 0;
	padding: 0 9px 8px;
	font-size: var(--cb-fs-small);
}
.cb-comment__actions {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 0 9px 8px;
	font-size: var(--cb-fs-small);
	color: var(--cb-text-muted);
}
.cb-comment__actions a { color: var(--cb-text-muted); }
.cb-comment__actions a:hover { color: var(--cb-accent); }

/* 답글 opens a form in place, so it has to be a button; it should still read as
   one of the plain text actions sitting next to it. */
.cb-comment__reply-btn {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: var(--cb-text-muted);
	cursor: pointer;
}
.cb-comment__reply-btn:hover { color: var(--cb-accent); }
.cb-comment__reply-btn[aria-expanded="true"] {
	color: var(--cb-accent);
	font-weight: 600;
}

/* Empty until 답글 is clicked, so the rule only applies once a form is in it.
   The accent rule separates "you are writing here" from the neutral rule that
   marks an existing reply. */
.cb-comment__reply-slot:not(:empty) {
	margin: 0 9px 10px;
	padding-left: 9px;
	border-left: 2px solid var(--cb-accent);
}
.cb-comment-form--reply { margin-top: 0; }
.cb-comment-form--reply .cb-comment-form__input { min-height: 56px; }

.cb-pagination--comment { padding: 10px 0 0; }

.cb-comment-form {
	margin-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.cb-comment-form__source {
	margin-bottom: 12px;
	padding: 9px 12px;
	border-left: 3px solid var(--cb-border-strong);
	background: var(--cb-bg-sub);
	font-size: var(--cb-fs-meta);
}
.cb-comment-form__source-body { margin-top: 3px; color: var(--cb-text-sub); }
.cb-comment-form__guest {
	display: flex;
	gap: 6px;
	flex-wrap: wrap;
}
.cb-comment-form__guest input {
	height: 30px;
	padding: 0 8px;
	border: 1px solid var(--cb-border-strong);
	background: var(--cb-bg-input);
	color: var(--cb-text);
	font-size: 13px;
}
.cb-comment-form__input {
	display: block;
	width: 100%;
	min-height: 72px;
	padding: 8px 10px;
	border: 1px solid var(--cb-border-strong);
	background: var(--cb-bg-input);
	color: var(--cb-text);
	font-family: inherit;
	font-size: var(--cb-fs-title);
	line-height: 1.6;
	resize: vertical;
}
.cb-comment-form__input:focus {
	outline: none;
	border-color: var(--cb-accent);
}
.cb-comment-form__footer {
	display: flex;
	align-items: center;
	gap: 8px;
}
/* Buttons sit on the right; the optional secret checkbox stays on the left. */
.cb-comment-form__actions {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-left: auto;
}
.cb-comment-form__check {
	display: flex;
	align-items: center;
	gap: 4px;
	font-size: var(--cb-fs-meta);
	color: var(--cb-text-sub);
}

/* ==========================================================================
   Generic form pages
   ========================================================================== */
.cb-form {
	padding: 14px 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.cb-form input[type="text"],
.cb-form select {
	height: 32px;
	padding: 0 8px;
	border: 1px solid var(--cb-border-strong);
	background: var(--cb-bg-input);
	color: var(--cb-text);
	font-size: 13px;
}
.cb-form__title {
	width: 100%;
	height: 36px !important;
	font-size: var(--cb-fs-base) !important;
}
.cb-form-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}
.cb-form-row > .cb-form__title { flex: 1 1 260px; }

/*
 * The editor emits several siblings (editor chrome, upload box, hidden inputs).
 * They must stack and fill the width, so this block is never a flex row.
 */
.cb-form-editor { display: block; width: 100%; }
.cb-form-editor > * { max-width: 100%; }
.cb-form__actions { display: flex; gap: 6px; padding-top: 4px; }
.cb-confirm-box {
	padding: 12px;
	border: 1px solid var(--cb-border);
	background: var(--cb-bg-sub);
	font-size: var(--cb-fs-meta);
}
.cb-category-dump { list-style: none; margin: 0; padding: 8px; }
.cb-category-dump li { padding: 2px 0; }

.cb-votelog { padding: 14px 0; display: flex; gap: 24px; flex-wrap: wrap; }
.cb-votelog__group ul { list-style: none; margin: 6px 0 0; padding: 0; }
.cb-votelog__group li { padding: 2px 0; color: var(--cb-text-sub); font-size: var(--cb-fs-meta); }

.cb-updatelog { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: var(--cb-fs-meta); }
.cb-updatelog th,
.cb-updatelog td { border: 1px solid var(--cb-border); padding: 7px 10px; text-align: left; }
.cb-updatelog th { background: var(--cb-bg-sub); color: var(--cb-text-sub); }

.cb-tags--cloud { padding: 14px 0; }

/* ==========================================================================
   Desktop-only: hover preview
   ========================================================================== */
@media (min-width: 768px) {
	a.cb-row:hover .cb-preview { display: block; }
}
.cb-board[data-cb-preview="off"] .cb-preview { display: none !important; }

/* ==========================================================================
   Below this width every row collapses from one line into a two-line stack.
   The markup is identical in both cases; only the CSS layout changes.
   ========================================================================== */
@media (max-width: 767px) {
	/*
	 * Full bleed. The surrounding layout container carries horizontal padding;
	 * pulling the board out by (50% - 50vw) on both sides cancels whatever that
	 * padding happens to be, so the list runs edge to edge. Width stays auto so
	 * no 100vw is involved and a classic scrollbar cannot cause overflow.
	 * Negative margins are used rather than a transform because a transformed
	 * ancestor would break the position:fixed floating buttons and modal.
	 */
	.cb-board {
		margin-left: calc(50% - 50vw);
		margin-right: calc(50% - 50vw);
		max-width: none;
	}
	.cb-header,
	.cb-toolbar,
	.cb-tabs,
	.cb-search,
	.cb-jump,
	.cb-article,
	.cb-comments,
	.cb-form {
		padding-left: 10px;
		padding-right: 10px;
	}
	.cb-article__permalink { padding-right: 10px; }

	.cb-row--head { display: none; }
	.cb-col-id { display: none; }

	.cb-row {
		flex-direction: column;
		align-items: stretch;
		min-height: calc(var(--cb-row-h) + 16px);
	}
	.cb-row-top { flex: 0 0 auto; }
	.cb-row-bottom {
		flex: 0 0 auto;
		gap: 8px;
		margin-top: 2px;
	}
	.cb-col-author,
	.cb-col-time,
	.cb-col-view,
	.cb-col-rate {
		flex: 0 0 auto;
		text-align: left;
		max-width: 45%;
	}
	.cb-col-time { margin-left: auto; }
	.cb-col-view::before { content: "조회 "; }
	.cb-col-rate::before { content: "추천 "; }

	/* Half steps: the comment area already gives up 10px to the full-bleed
	   padding, and 72px of indent would leave replies with no line length. */
	.cb-comment[data-cb-depth="1"] { margin-left: 10px; }
	.cb-comment[data-cb-depth="2"] { margin-left: 20px; }
	.cb-comment[data-cb-depth="3"] { margin-left: 30px; }
	.cb-comment[data-cb-depth="4"] { margin-left: 40px; }

	.cb-preview { display: none !important; }

	.cb-toolbar__group--end { margin-left: auto; }
	.cb-search { justify-content: stretch; }
	.cb-search input[type="text"] { flex: 1 1 auto; min-width: 0; }

	.cb-pagination a,
	.cb-pagination strong { min-width: 36px; height: 36px; }

	.cb-article__actions { flex-direction: column; align-items: stretch; }
	.cb-article__actions-right { justify-content: flex-end; }
}

@media (max-width: 575px) {
	.cb-header__title { font-size: 1.15em; }
	.cb-col-author { max-width: 40%; }
	.cb-settings-modal__panel { right: 10px; left: 10px; width: auto; }
	.cb-floating { right: 10px; bottom: 10px; }
	.cb-floating__btn { width: 34px; height: 34px; }
}