/*
 * 게시판 스킨 "youtube" 전용 스타일 (public/skins/board/youtube/style.css)
 * 레이아웃 basic 의 front.css 에 있던 게시판 목록 · 글보기 · 댓글 · 글쓰기 · 페이저 규칙을 이 스킨으로 옮겨 둔 것입니다.
 * 이 스킨을 쓰는 게시판 화면에 자동으로 붙으며, 이 스킨만 다르게 꾸미려면 아래 규칙을 고치면 됩니다.
 */

/* board list */
.kc-board-head { margin-bottom: 14px; }
.kc-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.kc-cats a { padding: 5px 12px; border: 1px solid var(--kc-line); border-radius: 999px; font-size: 14px; color: var(--kc-muted); }
.kc-cats a.active, .kc-cats a:hover { border-color: var(--kc-primary); color: var(--kc-primary); text-decoration: none; }
.kc-list { width: 100%; border-top: 2px solid var(--kc-text); font-size: 14px; }
.kc-list th { font-weight: 600; text-align: center; padding: 10px 6px; border-bottom: 1px solid var(--kc-line); background: var(--kc-soft); white-space: nowrap; }
.kc-list td { padding: 11px 6px; border-bottom: 1px solid var(--kc-line); text-align: center; color: var(--kc-muted); white-space: nowrap; }
.kc-list td.kc-subject { text-align: left; color: var(--kc-text); white-space: normal; width: 100%; }
.kc-list tr.is-notice td { background: #f7f9ff; }
.kc-list tr.is-current td { background: #fffbe6; }
.kc-subject a { color: var(--kc-text); font-weight: 500; }
.kc-subject .kc-cat { color: var(--kc-primary); font-size: 13px; margin-right: 4px; }
.kc-reply-mark { color: var(--kc-muted); margin-right: 4px; }
.kc-badge { display: inline-block; font-size: 11px; font-weight: 700; border-radius: 4px; padding: 1px 5px; vertical-align: 1px; margin-left: 4px; }
.kc-badge-new { background: #e5484d; color: #fff; }
.kc-badge-hot { background: #ff8a00; color: #fff; }
.kc-badge-notice { background: var(--kc-primary); color: #fff; margin: 0; }
.kc-ico { color: var(--kc-muted); font-size: 13px; margin-left: 3px; }
.kc-list-mobile { list-style: none; padding: 0; margin: 0; border-top: 2px solid var(--kc-text); }
.kc-list-mobile li { padding: 12px 2px; border-bottom: 1px solid var(--kc-line); }
.kc-list-mobile .kc-meta { font-size: 12px; color: var(--kc-muted); margin-top: 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.kc-gallery { display: grid; gap: 16px; }
.kc-gallery-item { display: block; color: var(--kc-text); }
.kc-gallery-item:hover { text-decoration: none; }
.kc-thumb { aspect-ratio: 4/3; background: var(--kc-soft); border-radius: 8px; overflow: hidden; display: flex; align-items: center; justify-content: center; color: #b0b6c0; font-size: 2rem; }
.kc-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .2s; }
.kc-gallery-item:hover .kc-thumb img { transform: scale(1.04); }
.kc-gallery-item .kc-gtitle { margin-top: 8px; font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-gallery-item .kc-meta { font-size: 12px; color: var(--kc-muted); }
.kc-list-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px; margin-top: 16px; position: relative; top: -10px; }
.kc-search-form { display: flex; gap: 6px; justify-content: center; margin-top: 18px; flex-wrap: wrap; }
.kc-search-form .form-select { width: auto; }
.kc-search-form .form-control { width: 220px; max-width: 100%; }
.kc-pager { margin-top: 18px; }
.page-link { color: var(--kc-text); }
.page-item.active .page-link { background: var(--kc-primary); border-color: var(--kc-primary); }

/* post view */
.kc-post-head { border-top: 2px solid var(--kc-text); border-bottom: 1px solid var(--kc-line); padding: 18px 4px 14px; }
.kc-post-title { font-size: 1.35rem; font-weight: 700; margin: 0 0 10px; letter-spacing: -.01em; }
.kc-post-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 13px; color: var(--kc-muted); align-items: center; }
.kc-post-meta .kc-name { color: var(--kc-text); font-weight: 600; }
.kc-post-files, .kc-post-links { border-bottom: 1px solid var(--kc-line); padding: 10px 4px; font-size: 14px; }
.kc-post-files ul, .kc-post-links ul { list-style: none; margin: 0; padding: 0; }
.kc-post-files li, .kc-post-links li { padding: 3px 0; }
.kc-post-body { padding: 28px 4px; min-height: 160px; line-height: 1.75; overflow-x: auto; }
.kc-post-body img { max-width: 100%; height: auto; }
.kc-post-body iframe, .kc-post-body video { max-width: 100%; }
.kc-post-body table { max-width: 100%; }
.kc-post-body pre { background: #0f172a; color: #e2e8f0; padding: 14px; border-radius: 8px; }
.kc-post-images img { display: block; max-width: 100%; height: auto; margin: 0 auto 14px; border-radius: 4px; }
.kc-post-tags { padding: 0 4px 14px; }
.kc-post-tags a { display: inline-block; font-size: 13px; padding: 3px 10px; margin: 0 4px 4px 0; background: var(--kc-soft); border-radius: 999px; color: var(--kc-muted); }
.kc-extra-fields { margin: 0 4px 16px; font-size: 14px; }
.kc-extra-fields th { width: 160px; background: var(--kc-soft); font-weight: 600; }
.kc-reactions { display: flex; justify-content: center; gap: 10px; padding: 8px 0 22px; }
.kc-react-btn { min-width: 96px; border-radius: 999px; }
.kc-react-btn.active { background: var(--kc-primary); color: #fff; border-color: var(--kc-primary); }
.kc-post-actions { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; border-top: 1px solid var(--kc-line); border-bottom: 1px solid var(--kc-line); padding: 10px 0; }
.kc-post-actions .btn { --bs-btn-padding-y: .25rem; --bs-btn-padding-x: .6rem; --bs-btn-font-size: .85rem; }
.kc-prevnext { list-style: none; padding: 0; margin: 16px 0; border-top: 1px solid var(--kc-line); font-size: 14px; }
.kc-prevnext li { display: flex; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--kc-line); }
.kc-prevnext li > span { color: var(--kc-muted); white-space: nowrap; width: 56px; }
.kc-prevnext li > a { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-blind { background: var(--kc-soft); border-radius: 8px; padding: 24px; text-align: center; color: var(--kc-muted); }

/* comments */
.kc-comments { margin-top: 28px; }
.kc-comments-title { font-size: 1.05rem; font-weight: 700; margin-bottom: 10px; }
.kc-comment { border-bottom: 1px solid var(--kc-line); padding: 14px 4px; display: flex; gap: 10px; }
.kc-comment.is-reply { padding-left: 36px; background: #fbfbfc; }
.kc-comment.is-best { background: #fff8e6; }
.kc-comment-photo { flex: 0 0 36px; }
.kc-comment-photo img, .kc-comment-photo .kc-avatar { width: 36px; height: 36px; }
.kc-comment-main { flex: 1; min-width: 0; }
.kc-comment-head { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 13px; color: var(--kc-muted); margin-bottom: 4px; }
.kc-comment-head .kc-name { color: var(--kc-text); font-weight: 600; }
.kc-comment-body { font-size: 14px; line-height: 1.65; }
.kc-comment-tools { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 13px; }
.kc-comment-tools button, .kc-comment-tools a { background: none; border: 0; padding: 0; color: var(--kc-muted); font-size: 13px; }
.kc-comment-tools button.active { color: var(--kc-primary); font-weight: 600; }
.kc-comment-form { border: 1px solid var(--kc-line); border-radius: var(--kc-radius); padding: 12px; margin-top: 14px; background: #fff; }
.kc-comment-form textarea { resize: vertical; }


/* write form: attachment list + drag-and-drop zone */
.kc-hint-inline { font-size: .8125rem; color: var(--kc-muted); }
.file-list { display: flex; flex-direction: column; gap: .5rem; }
.file-list:empty { display: none; }
.file-item { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; padding: .5rem .75rem; border: 1px solid var(--kc-line); border-radius: 6px; background: #fff; }
.file-item.is-deleted { opacity: .45; text-decoration: line-through; }
.file-item .file-name { flex: 1 1 10rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 500; }
.file-item .file-size { flex: none; font-size: .75rem; color: var(--kc-muted); }
.file-item .file-remove { flex: none; display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .5rem; border: 0; border-radius: .375rem; background: transparent; color: var(--kc-muted); font: inherit; font-size: .8125rem; cursor: pointer; }
.file-item .file-remove:hover { background: var(--kc-soft); color: #dc3545; }
.file-dropzone { margin-top: .5rem; }
.file-dropzone-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; padding: 1.5rem 1rem; text-align: center; border: 1.5px dashed var(--kc-line); border-radius: 6px; cursor: pointer; transition: border-color .15s, background-color .15s; }
.file-dropzone-inner:hover, .file-dropzone-inner:focus-visible, .file-dropzone-inner.is-drag-over { border-color: var(--kc-primary); background: var(--kc-soft); outline: 0; }
.file-dropzone-inner.is-full { opacity: .5; cursor: not-allowed; }
.file-dropzone-inner svg { color: var(--kc-muted); }
.file-dropzone-text { font-size: .875rem; margin: 0; }
.file-dropzone-hint { font-size: .75rem; color: var(--kc-muted); margin: 0; }
.file-item .file-caption { flex: 1 1 12rem; min-width: 0; max-width: 18rem; }


/* 이름 클릭 메뉴 (사이드뷰) — ciboard #nameContextMenu 와 같은 검은 상자 */
.kc-sv-menu { background: #000; color: #fff; padding: 4px 8px 6px; min-width: 0; width: max-content; border: 0; border-radius: 0; z-index: 10000; font-size: 12px; --bs-dropdown-min-width: 0; }
.kc-sv-menu { margin-left: 14px; }
.kc-sv-menu li { list-style: none; }
.kc-sv-menu .kc-sv-id { color: #fff; font-size: 12px; line-height: 20px; white-space: nowrap; }
.kc-sv-menu a { color: #fff; font-size: 12px; line-height: 20px; display: block; white-space: nowrap; text-decoration: none; background: transparent; padding: 0; }
.kc-sv-menu a:hover, .kc-sv-menu a:focus { color: #ff0000; background: transparent; }


/* board list: clien.net 'content_list' CSS (clien-main.css 의 규칙을 그대로 가져와 .kc-clien-list 안에서만 적용) */
.kc-board-head .kc-page-title { font-size: 1.75rem; font-weight: 500; letter-spacing: -.5px; margin: 0; }
.kc-board-head { margin-bottom: 6px; padding: .5em 0; align-items: center; }
.kc-clien-list { position: relative; width: 100%; font-size: 12px; line-height: 1; color: #111; font-weight: 400; }
.kc-clien-list .list_manage { padding: 0 0 .5em; font-size: 12px; color: #666; }
.kc-clien-list .list_content { position: relative; display: block; width: 100%; background-color: #F1F1F1; border-top: 1px solid #E2E2E2; }
.kc-clien-list .list_item { position: relative; display: flex; align-items: center; width: 100%; height: 3.083em; border-bottom: 1px solid #E2E2E2; border-left: 1px solid #E2E2E2; border-right: 1px solid #E2E2E2; background-color: #FFF; }
.kc-clien-list .list_item.notice { background-color: #FAFAFA; }
.kc-clien-list .list_item.notice .list_title { font-weight: 500; }
.kc-clien-list .list_item.is-current { background-color: #FFFBE6; }
.kc-clien-list .list_item .list_chk { display: flex; align-items: center; width: 2.5em; justify-content: center; border-left: 0px solid #E2E2E2; }
.kc-clien-list .list_item .list_symph, .kc-clien-list .list_item .list_title, .kc-clien-list .list_item .list_author, .kc-clien-list .list_item .list_hit, .kc-clien-list .list_item .list_time { display: flex; align-items: center; }
.kc-clien-list .list_item .list_symph, .kc-clien-list .list_item .list_symph_not { justify-content: center; height: 3em; color: transparent; border-left: 2px solid #E2E2E2; }
.kc-clien-list .list_item .list_symph { min-width: 3.333em; }
.kc-clien-list .list_item .list_symph > span, .kc-clien-list .list_item .list_symph_not > span { display: flex; align-items: center; justify-content: center; height: 1.273em; line-height: 1; font-size: 0.917em; padding: 0.091em 0.455em 0; border-radius: 0.33em; }
.kc-clien-list .list_item.notice .list_symph { color: #6875AD; border-left-color: #E6EFF6; }
.kc-clien-list .view_symph.lSymph01 { border-left-color: #F1F1F1; }
.kc-clien-list .view_symph.lSymph01 span { background-color: #FAFAFA; color: #CCC; }
.kc-clien-list .view_symph.lSymph02 { border-left-color: #E6EFF6; }
.kc-clien-list .view_symph.lSymph02 span { background-color: #E6EFF6; color: #000; }
.kc-clien-list .view_symph.lSymph03 { border-left-color: #CCDFED; }
.kc-clien-list .view_symph.lSymph03 span { background-color: #CCDFED; color: #000; }
.kc-clien-list .view_symph.lSymph04 { border-left-color: #AFCAE2; }
.kc-clien-list .view_symph.lSymph04 span { background-color: #AFCAE2; color: #FFF; }
.kc-clien-list .view_symph.lSymph05 { border-left-color: #7195B5; }
.kc-clien-list .view_symph.lSymph05 span { background-color: #7195B5; color: #FFF; }
.kc-clien-list .view_symph.lSymph06 { border-left-color: #527492; }
.kc-clien-list .view_symph.lSymph06 span { background-color: #527492; color: #FFF; }
.kc-clien-list .list_item .list_title { flex: 1 1 auto; min-width: 0; overflow: hidden; padding: 0 0.833em 0 0.417em; }
.kc-clien-list .list_item .list_title .list_subject { display: inline-block; position: relative; max-width: 32.857em; font-size: 1.166666em; line-height: 1.286em; word-break: break-all; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; margin: 0 0.357em 0 0; color: #111; font-weight: inherit; text-decoration: none; }
.kc-clien-list .list_item .list_title .list_subject:visited { text-decoration: none; color: #999; }
.kc-clien-list .list_item .list_title .list_subject:hover { color: #D43F3A; }
.kc-clien-list .list_item .list_title .kc-cat { color: #666; font-size: 0.857em; margin: 0 0.833em 0 0; padding: 0 0.25em; border-radius: 0.33em; border: 1px solid rgba(0, 0, 0, 0.05); line-height: 1.417em; }
.kc-clien-list .list_item .list_title .kc-ico { color: #999; font-size: 1.167em; margin: 0 0.357em 0 0; }
.kc-clien-list .list_item .list_title .list_reply { position: relative; top: 0.091em; font-size: 0.917em; color: #F7683A; padding: 0; font-weight: 400; }
.kc-clien-list .list_item .list_title .list_reply { display: inline-block; height: 1.636em; line-height: 1.545em; padding: 0 0.364em; border-radius: 0.33em; border: 1px solid rgba(0, 0, 0, 0.05); background-color: #FAFAFA; }
.kc-clien-list .list_item .list_author { position: relative; justify-content: center; }
.kc-clien-list .list_item .list_author .nickname { display: flex; align-items: center; justify-content: center; width: 7.917em; height: 1.333em; min-height: 16px; font-weight: 500; line-height: 1.333em; text-overflow: ellipsis; white-space: nowrap; border-left: 1px solid #E2E2E2; }
.kc-clien-list .list_item .list_hit, .kc-clien-list .list_item .list_time { text-align: center; color: #666; }
.kc-clien-list .list_item .list_hit .hit, .kc-clien-list .list_item .list_hit .time, .kc-clien-list .list_item .list_time .hit, .kc-clien-list .list_item .list_time .time { display: block; position: relative; width: 5.455em; font-size: 0.917em; line-height: 1.545em; height: 1.455em; border-left: 1px solid #E2E2E2; }
.kc-clien-list .list_item .list_hit .time, .kc-clien-list .list_item .list_time .time { color: #333; }
.kc-clien-list .list_item .list_time .time { width: 8.5em; }
.kc-clien-list .kc-badge { font-size: 0.917em; }
.kc-list-mobile { border-top: 0; }
.kc-list-mobile li { padding: 10px 4px; border-bottom: 1px solid #e2e2e2; }
.kc-list-mobile li a { color: #111; text-decoration: none; }
.kc-list-mobile li a:visited { color: #999; }
.kc-list-mobile .kc-cmt { color: #f7683a; font-size: 12px; font-weight: 500; margin-left: 5px; }
@media (max-width: 767.98px) { .kc-clien-list .list_item .list_hit, .kc-clien-list .list_item .list_author { display: none; } .kc-clien-list .list_item .list_time .time { width: auto; padding: 0 0.833em; white-space: nowrap; } }

/* pager: clien.net 'board-pagination / board-nav-area' CSS (clien-main.css 규칙을 그대로) */
.board-pagination { position: relative; top: -1px; display: flex; justify-content: center; font-weight: 500; font-size: 12px; line-height: 1; margin-top: 18px; }
.board-pagination .board-nav { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; }
.board-pagination .board-nav .board-nav-area { display: flex; border-radius: 0.33em; overflow: hidden; }
.board-pagination .board-nav a { text-decoration: none; color: #333; }
.board-pagination .board-nav .board-nav-area .board-nav-page:first-child { border-bottom-left-radius: 0.33em; border-top-left-radius: 0.33em; }
.board-pagination .board-nav .board-nav-area .board-nav-page:last-child { border-top-right-radius: 0.33em; border-bottom-right-radius: 0.33em; border: 1px solid #E2E2E2; }
.board-pagination .board-nav .board-nav-area .board-nav-page:last-child.active { border: 1px solid #37475A; }
.board-pagination .board-nav .board-nav-area .board-nav-page:last-child.active:hover { background-color: #333; border: 1px solid #333; }
.board-pagination .board-nav .board-nav-first, .board-pagination .board-nav .board-nav-prev, .board-pagination .board-nav .board-nav-page, .board-pagination .board-nav .board-nav-next { display: flex; align-items: center; justify-content: center; padding: 0 0.417em; margin-top: 0.833em; min-height: 2.667em; line-height: 2.5em; }
.board-pagination .board-nav .board-nav-first { color: #666; }
.board-pagination .board-nav .board-nav-first:before { content: "\f100"; position: relative; top: -0.071em; font-family: "FontAwesome"; padding: 0 0.357em 0 0; font-size: 1.167em; }
.board-pagination .board-nav .board-nav-first:hover, .board-pagination .board-nav .board-nav-first:focus { outline: none; color: #D43F3A; }
.board-pagination .board-nav .board-nav-prev { padding: 0 0.833em; }
.board-pagination .board-nav .board-nav-prev:before { content: "\f0d9"; position: relative; top: -0.071em; font-family: "FontAwesome"; font-size: 1.167em; }
.board-pagination .board-nav .board-nav-prev:after { content: ""; position: relative; right: 1.17em; height: 2.33em; border-left: 1px solid #E2E2E2; }
.board-pagination .board-nav .board-nav-prev.ten { padding: 0 0.417em; }
.board-pagination .board-nav .board-nav-prev.ten:after { border-left: 0; }
.board-pagination .board-nav .board-nav-prev.ten:before { content: "\f104"; padding: 0 0.357em 0 0; }
.board-pagination .board-nav .board-nav-prev:hover, .board-pagination .board-nav .board-nav-prev:focus { outline: none; color: #D43F3A; }
.board-pagination .board-nav .board-nav-page { z-index: 1; min-width: 2.667em; border: 1px solid #E2E2E2; border-right-width: 0; margin-right: 0; background-color: #FFF; }
.board-pagination .board-nav .board-nav-page.last { border: 1px solid #E2E2E2; }
.board-pagination .board-nav .board-nav-page.active { color: #FFF; border: 1px solid #37475A; border-right-width: 0; background-color: #37475A; }
.board-pagination .board-nav .board-nav-page.active:hover, .board-pagination .board-nav .board-nav-page.active:focus { outline: none; background-color: #333; border: 1px solid #333; border-right: 0; }
.board-pagination .board-nav .board-nav-page:hover, .board-pagination .board-nav .board-nav-page:focus { outline: none; background-color: #E2E2E2; }
.board-pagination .board-nav .board-nav-next { padding: 0 0.833em; }
.board-pagination .board-nav .board-nav-next:after { content: "\f0da"; position: relative; top: -0.071em; font-family: "FontAwesome"; font-size: 1.167em; }
.board-pagination .board-nav .board-nav-next:before { content: ""; position: relative; right: -1.17em; height: 2.33em; border-right: 1px solid #E2E2E2; }
.board-pagination .board-nav .board-nav-next.ten { padding: 0 0.417em; }
.board-pagination .board-nav .board-nav-next.ten:after { content: "\f105"; padding: 0 0 0 0.357em; }
.board-pagination .board-nav .board-nav-next.ten:before { border-right: 0; }
.board-pagination .board-nav .board-nav-next:hover, .board-pagination .board-nav .board-nav-next:focus { outline: none; color: #D43F3A; }

/* write button: clien.net 'button_post' (clien-main.css 의 .list_button_area .button_post 규칙) */
.kc-pager-wrap .button_post { width: 8em; height: 2.667em; font-size: 12px; line-height: 1; color: #FFF; margin-top: 0.833em; border-radius: 0.33em; background-color: #37475A; }
.kc-pager-wrap .button_post .action_icon { display: flex; align-items: center; height: 2.667em; color: #FFF; line-height: 2.667em; border-radius: 0.33em; text-decoration: none; cursor: pointer; }
.kc-pager-wrap .button_post .action_icon:hover { color: #FFF; }
.kc-pager-wrap .button_post .action_icon:focus { outline: none; background-color: #516B82; }
.kc-pager-wrap .button_post .button_icon { width: 33px; font-size: 1.167em; line-height: 1; padding: 0.643em 0; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.1); box-sizing: border-box; }
.kc-pager-wrap .button_post .button_name { display: inline-block; width: 5.167em; text-align: center; }

/* clien button_command 스타일 (관리자 버튼) */
.kc-list-foot .button_command { display: inline-block; width: 75px; height: 2.667em; padding: 0; margin-top: .833em; font-size: 12px; line-height: 2.667em; color: #666; text-align: center; text-decoration: none; cursor: pointer; border: 0; border-radius: .33em; background-color: #FFF; box-shadow: 0 0 0 1px rgba(0,0,0,0.1) inset; box-sizing: border-box; }
.kc-list-foot .button_command:hover { color: #666; box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset; }
.kc-list-foot .button_command:focus { outline: none; background-color: #F1F1F1; }
.kc-list-foot .kc-mgr-btns select { margin-top: .833em; }
.kc-list-foot #kc-move-target { font-size: 12px; }

/* ---- clien content_view 스타일 글보기 ---- */
.kc-clien-view { font-size: 12px; }
.kc-clien-view .kc-post-head { border-top: 0; border-bottom: 0; padding: 0; }
.kc-clien-view .kc-post-title { display: block; font-size: 1.83333em; line-height: 1.7; font-weight: 400; letter-spacing: 0; word-break: break-all; margin: 0; padding: 0.42em 0 0.9em; }
.kc-clien-view .kc-post-meta { display: block; gap: 0; font-size: 1em; color: #666; padding: 0 0 1.25em; border-bottom: 1px solid #516B82; }
.kc-clien-view .kc-post-meta > span { display: inline-block; padding: 0 0.42em 0 0; margin: 0 0.67em 0 0; border-right: 1px solid #E2E2E2; }
.kc-clien-view .kc-post-meta > span:last-child { padding: 0; margin: 0; border-right: 0; }
.kc-clien-view .kc-post-meta .kc-name { color: #333; font-weight: 400; }
.kc-clien-view .kc-post-files, .kc-clien-view .kc-post-links { margin-top: 1em; padding: 0.583em 0.833em 0.417em; border: 1px solid rgba(0,0,0,0.05); border-radius: 0.33em; background-color: #FFF9E5; font-size: 1em; }
.kc-clien-view .kc-post-body { margin-top: 1em; padding: 2.5em 1.25em; min-height: 160px; font-size: 13px; line-height: 1.6; word-break: break-all; border: 1px solid #E2E2E2; border-radius: 0 0 0.33em 0.33em; }
.kc-clien-view .kc-post-tags { padding: 1em 0 0; }
.kc-clien-view .kc-reactions { display: flex; justify-content: center; gap: 2px; padding: 1.25em 0 0; }
.kc-clien-view .kc-post-actions { justify-content: center; gap: 2px 1em; border-top: 0; border-bottom: 1px solid #E2E2E2; padding: 1.25em 0 2.5em; }
.kc-clien-view .kc-post-actions .btn, .kc-clien-view .kc-reactions .btn { --bs-btn-padding-y: 0.75em; --bs-btn-padding-x: 0.833em; --bs-btn-font-size: 1em; --bs-btn-border-radius: 0.33em; font-size: 12px; line-height: 1.2; color: #FFF; margin: 0 1px; border: 1px solid #516B82; background-color: #516B82; }
.kc-clien-view .kc-post-actions .btn:hover, .kc-clien-view .kc-reactions .btn:hover { color: #FFF; background-color: #435A6E; border-color: #435A6E; }
.kc-clien-view .kc-post-actions .btn:focus, .kc-clien-view .kc-reactions .btn:focus { outline: none; border-color: rgba(0,0,0,0.3); box-shadow: none; }
.kc-clien-view .kc-post-actions .btn-outline-danger { border-color: #D7625E; background-color: #D7625E; }
.kc-clien-view .kc-post-actions .btn-outline-danger:hover { background-color: #C4524E; border-color: #C4524E; }
.kc-clien-view .kc-reactions .btn.active, .kc-clien-view .kc-post-actions .btn.active { color: #FFF; background-color: #F7683A; border-color: #F7683A; }
@media (max-width: 767.98px) { .kc-clien-view .kc-post-body { padding: 1.5em 0.833em; } .kc-clien-view .kc-post-title { font-size: 1.5em; } }
.kc-clien-view .kc-post-actions .btn, .kc-clien-view .kc-reactions .btn { border-radius: 0.33em; font-weight: 400; }

/* 글쓰기 버튼을 페이저 우측으로 */
.kc-pager-wrap { position: relative; }
.kc-pager-wrap .button_post { position: absolute; right: 0; top: 8px; margin-top: 0; }
@media (max-width: 767.98px) { .kc-pager-wrap .button_post { position: static; margin: 0.833em auto 0; } }

/* clien button_next_page (다음페이지) */
.kc-pager-wrap .button_next_page { position: absolute; z-index: 2; left: 0; top: 8px; display: block; width: 8em; min-width: 8em; height: 2.667em; font-size: 12px; line-height: 1; color: #666; text-align: center; text-decoration: none; padding: 0.75em; margin-top: 0; border-radius: 0.33em; box-shadow: 0 0 0 1px rgba(0,0,0,0.1) inset; background-color: #FFF; box-sizing: border-box; cursor: pointer; }
.kc-pager-wrap .button_next_page:hover { color: #666; box-shadow: 0 0 0 1px rgba(0,0,0,0.15) inset; }
.kc-pager-wrap .button_next_page:focus { outline: none; background-color: #F1F1F1; }
.kc-pager-wrap .button_next_page .button_name { position: relative; top: -0.083em; }
.kc-pager-wrap .button_next_page .fa { font-size: 1.167em; margin: 0 0 0 0.357em; }
@media (max-width: 767.98px) { .kc-pager-wrap .button_next_page { position: static; margin: 0.833em auto 0; } }

/* clien post_info (작성자 바) + 작성자 메뉴 */
.kc-clien-view .kc-post-meta { border-bottom: 1px solid #516B82; }
.kc-clien-view .kc-post-meta strong { font-weight: 700; color: #333; }
.kc-clien-view .kc-post-info { display: flex; align-items: center; min-height: 3em; padding: 0.833em 1.25em; margin-top: 1em; background-color: #FAFAFA; border: 1px solid #E2E2E2; border-bottom: 0; }
.kc-clien-view .kc-post-info .kc-name { color: #78909C; font-weight: 700; text-decoration: none; }
.kc-clien-view .kc-post-info .kc-name::after, .kc-clien-view .kc-post-info .kc-name.dropdown-toggle::after { content: "님"; display: inline; margin: 0; vertical-align: baseline; font-weight: 400; border: 0; }
.kc-clien-view .kc-post-info .kc-sv-menu { background: #FFF; color: #666; min-width: 8.5em; margin-left: 0; padding: 0; font-size: 12px; border: 1px solid rgba(0,0,0,0.15); border-radius: 0.33em; box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
.kc-clien-view .kc-post-info .kc-sv-menu li { border-bottom: 1px dotted #CCC; }
.kc-clien-view .kc-post-info .kc-sv-menu li:last-child { border-bottom: 0; }
.kc-clien-view .kc-post-info .kc-sv-menu li > a, .kc-clien-view .kc-post-info .kc-sv-menu li.kc-sv-id { display: block; padding: 0.75em 0.833em; color: #666; font-size: 12px; background: transparent; }
.kc-clien-view .kc-post-info .kc-sv-menu li.kc-sv-id { color: #000; font-weight: 500; }
.kc-clien-view .kc-post-info .kc-sv-menu li > a:hover { color: #D43F3A; background-color: #FAFAFA; }
.kc-clien-view .kc-post-info + .kc-post-files, .kc-clien-view .kc-post-info + .kc-post-links { margin-top: 0; }
.kc-clien-view .kc-post-head ~ .kc-post-body { margin-top: 0; border-top: 1px solid #E2E2E2; }

/* ---- clien 댓글 / 하단 버튼 ---- */
.kc-clien-comments { font-size: 12px; margin-top: 1.5em; }
.kc-clien-comments .kc-comments-title { font-size: 1em; font-weight: 400; color: #516B82; margin: 0 0 0.833em; padding: 0.833em 0 0; }
.kc-clien-comments .kc-comments-title .fa-comment { color: #516B82; margin-right: 0.25em; }
.kc-clien-comments .kc-comments-title strong { font-weight: 700; }
.kc-clien-comments .border-top { border-top: 0 !important; }
.kc-clien-comments .kc-comment { display: block; padding: 0; margin-bottom: 0.5em; border-bottom: 0; background: transparent; }
.kc-clien-comments .kc-comment.is-reply { background: transparent; }
.kc-clien-comments .kc-comment-photo { display: none; }
.kc-clien-comments .kc-comment-head { display: flex; flex-wrap: nowrap; align-items: center; gap: 0 0.5em; margin: 0; padding: 0.5em 0.833em; font-size: 12px; color: #666; background-color: #F1F1F1; }
.kc-clien-comments .kc-comment-head .kc-name { color: #333; font-weight: 500; text-decoration: none; }
.kc-clien-comments .kc-comment-head time { margin-left: auto; color: #666; padding-right: 0.5em; border-right: 1px solid #E2E2E2; }
.kc-clien-comments .kc-comment-head time:last-child { border-right: 0; padding-right: 0; }
.kc-clien-comments .kc-comment-tools { display: flex; gap: 0; margin: 0; font-size: 12px; }
.kc-clien-comments .kc-comment-tools > * { padding: 0 0.5em; border-left: 1px solid #E2E2E2; line-height: 1.2; }
.kc-clien-comments .kc-comment-tools > *:first-child { border-left: 0; }
.kc-clien-comments .kc-comment-tools button, .kc-clien-comments .kc-comment-tools a { color: #3B6FA3; font-size: 12px; text-decoration: none; }
.kc-clien-comments .kc-comment-tools [data-prompt] { color: #D43F3A; }
.kc-clien-comments .kc-comment-tools button:hover, .kc-clien-comments .kc-comment-tools a:hover { text-decoration: underline; }
.kc-clien-comments .kc-comment-body { padding: 0.75em 0.833em 1.25em; font-size: 13px; line-height: 1.6; word-break: break-all; }
.kc-clien-comments .kc-comment.is-best .kc-comment-head { background-color: #FAE3BF; }
.kc-clien-comments .kc-comment.is-best .kc-comment-body { background-color: #FFF8EB; }
.kc-clien-comments .kc-comment.is-best .badge { font-size: 11px; }
.kc-clien-comments .kc-comment-form { padding: 1.25em; margin-top: 1em; background-color: #E4E8EC; border: 0; border-radius: 0; }
.kc-clien-comments .kc-cm-box { display: flex; align-items: stretch; }
.kc-clien-comments .kc-cm-box textarea { flex: 1; min-height: 6.5em; margin: 0; font-size: 13px; border: 1px solid #37475A; border-right: 0; border-radius: 0.33em 0 0 0.33em; resize: vertical; }
.kc-clien-comments .kc-cm-box textarea:focus { box-shadow: none; border-color: #37475A; }
.kc-clien-comments .kc-cm-submit { width: 9.5em; flex: none; font-size: 12px; font-weight: 700; color: #FFF; background-color: #37475A; border: 1px solid #37475A; border-radius: 0 0.33em 0.33em 0; cursor: pointer; }
.kc-clien-comments .kc-cm-submit:hover { background-color: #516B82; }
.kc-clien-comments .kc-comment-form > .d-flex:last-child { margin-top: 0.5em; }
.kc-view-foot { display: flex; justify-content: space-between; margin: 1.5em 0 0; }
.kc-view-foot .button_post { width: 8em; height: 2.667em; font-size: 12px; line-height: 1; color: #FFF; border-radius: 0.33em; background-color: #37475A; }
.kc-view-foot .button_post.button_list { background-color: #999; }
.kc-view-foot .button_post .action_icon { display: flex; align-items: center; height: 2.667em; color: #FFF; line-height: 2.667em; border-radius: 0.33em; text-decoration: none; }
.kc-view-foot .button_post .button_icon { width: 33px; font-size: 1.167em; line-height: 1; padding: 0.643em 0; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.1); box-sizing: border-box; }
.kc-view-foot .button_post .button_name { display: inline-block; width: 5.167em; text-align: center; }
@media (max-width: 767.98px) { .kc-clien-comments .kc-comment-head { flex-wrap: wrap; } .kc-clien-comments .kc-cm-submit { width: 6em; } }
.kc-clien-comments .kc-comment-form > .mb-2:has(.kc-comment-cancel.d-none) { display: none !important; }


/* ---- 게시판 목록 (solution 'bd-head' · 카드 테이블) ---- */
.sol-board { --sb-card: #FFFFFF; --sb-border: #E4E4E7; --sb-border-sub: #F1F1F3; --sb-fg: #09090B; --sb-muted: #71717A; --sb-soft: #F4F4F5; --sb-ring: #A1A1AA; --sb-brand: #5E6AD2; --sb-secondary: #F4F4F5; }
.sol-board a { text-decoration: none; }
.sol-board .breadcrumb { display: block; padding: 0; background: none; font-size: 14px; color: var(--sb-muted); margin: 0 0 .75rem; }
.sol-board .breadcrumb a { color: var(--sb-muted); }
.sol-board .breadcrumb a:hover { color: var(--sb-fg); }
.sol-board .breadcrumb span { margin: 0 .35rem; opacity: .6; }
.sol-board .bd-head { padding: 26px 0 24px; text-align: center; }
.sol-board .bd-label { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; color: var(--sb-brand); text-transform: uppercase; }
.sol-board .bd-title { margin: 0 0 8px; font-size: 30px; font-weight: 700; line-height: 1.7; }
.sol-board .bd-title a { color: var(--sb-fg); }
.sol-board .bd-desc { margin: 0; font-size: 14px; font-weight: 300; line-height: 1.7; color: var(--sb-muted); }
.sol-board .bd-desc a { color: var(--sb-muted); }
.sol-board .bd-filters { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 0 20px; }
.sol-board .bd-filter { display: inline-flex; align-items: center; padding: 6px 14px; font-size: 13px; font-weight: 600; line-height: 1.7; color: var(--sb-muted); background: transparent; border: 1px solid var(--sb-border); border-radius: 7px; }
.sol-board .bd-filter:hover { background: var(--sb-soft); color: var(--sb-fg); }
.sol-board .bd-filter.on, .sol-board .bd-filter.on:hover { background: var(--sb-brand); border-color: var(--sb-brand); color: #FFF; }
.sol-board .bd-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin: 0 0 16px; }
.sol-board .bd-toolbar-l, .sol-board .bd-toolbar-r { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sol-board .bd-count { font-size: 13px; color: var(--sb-muted); }
.sol-board .bd-count strong { font-weight: 700; color: var(--sb-fg); }
.sol-board .bd-sorts { display: flex; gap: 2px; }
.sol-board .bd-sort { padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 600; line-height: 1.7; color: var(--sb-muted); background: transparent; }
.sol-board .bd-sort:hover { color: var(--sb-fg); }
.sol-board .bd-sort.on { color: var(--sb-brand); background: rgba(94, 106, 210, 0.08); }
.sol-board .bd-search { display: flex; align-items: center; gap: 6px; width: 220px; margin: 0; padding: 7px 14px; background: var(--sb-card); border: 1px solid var(--sb-border); border-radius: 8px; }
.sol-board .bd-search > svg { flex: none; color: var(--sb-muted); }
.sol-board .bd-search:focus-within { border-color: var(--sb-ring); }
.sol-board .bd-search input[type=search] { flex: 1 1 auto; min-width: 0; height: auto; padding: 0; font-size: 13px; line-height: 1.7; color: var(--sb-fg); background: transparent; border: 0; box-shadow: none; outline: 0; }
.sol-board .bd-write { flex: none; }
.sol-board .bd-manage-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; padding: 10px 14px; background: var(--sb-soft); border: 1px solid var(--sb-border); border-radius: 10px; font-size: 12px; }
.sol-board .bd-manage-bar select { width: auto; font-size: 12px; }
.sol-board .bd-manage-bar .btn-sm { font-size: 11px; }
.sol-board .sb-card { background: var(--sb-card); border: 1px solid var(--sb-border); border-radius: 12px; overflow: hidden; }
.sol-board .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.sol-board table.sb-list { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--sb-card); margin: 0; }
.sol-board table.sb-list thead th { padding: .75rem 1rem; text-align: left; white-space: nowrap; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--sb-muted); border-bottom: 1px solid var(--sb-border); background: transparent; }
.sol-board table.sb-list tbody td { padding: .875rem 1rem; border-bottom: 1px solid var(--sb-border-sub); vertical-align: middle; background: transparent; color: var(--sb-fg); }
.sol-board table.sb-list tbody tr:last-child td { border-bottom: 0; }
.sol-board table.sb-list tbody tr:hover td { background: var(--sb-soft); }
.sol-board table.sb-list .num, .sol-board table.sb-list .center { text-align: center; white-space: nowrap; }
.sol-board table.sb-list th.center, .sol-board table.sb-list th.num { text-align: center; }
.sol-board table.sb-list .subject { width: 100%; }
.sol-board table.sb-list .subject a.list_subject { color: var(--sb-fg); font-weight: 500; overflow-wrap: anywhere; }
.sol-board table.sb-list .subject a.list_subject:hover { color: var(--sb-brand); }
.sol-board table.sb-list .muted, .sol-board table.sb-list td.muted a, .sol-board table.sb-list td.muted .kc-name { color: var(--sb-muted); font-size: .8125rem; white-space: nowrap; }
.sol-board table.sb-list tr.is-notice td { background: rgba(94, 106, 210, 0.05); }
.sol-board table.sb-list tr.is-current td { background: rgba(245, 158, 11, 0.12); }
.sol-board .kc-cmt { margin-left: 6px; font-size: 12px; font-weight: 600; color: #F7683A; }
.sol-board .kc-ico { margin-left: 4px; font-size: 12px; color: var(--sb-muted); }
.sol-board .kc-reply-mark { color: var(--sb-muted); margin-right: 4px; }
.sol-board .badge { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; line-height: 1.4; }
.sol-board .badge-cat { background: var(--sb-secondary); color: var(--sb-fg); }
.sol-board .badge-notice { background: #FDE8E8; color: #B42318; }
.sol-board .bd-empty { padding: 60px 20px; text-align: center; color: var(--sb-muted); font-size: 14px; }
.sol-board .sb-pager { margin: 1.5rem 0; }
.sol-board .sb-pager .board-pagination { top: 0; margin-top: 0; }
.sol-board .sb-pager .board-nav { gap: .25rem; }
.sol-board .sb-pager .board-nav-area { gap: .25rem; border-radius: 0; overflow: visible; }
.sol-board .sb-pager .board-nav a { display: grid; place-items: center; min-width: 36px; height: 36px; padding: 0 .625rem; border: 1px solid var(--sb-border); border-radius: 8px; background: var(--sb-card); color: var(--sb-muted); font-size: 14px; font-weight: 500; line-height: 1; text-decoration: none; }
.sol-board .sb-pager .board-nav a:hover { background: var(--sb-soft); color: var(--sb-fg); }
.sol-board .sb-pager .board-nav a.active, .sol-board .sb-pager .board-nav a.active:hover { background: var(--sb-brand); border-color: var(--sb-brand); color: #FFF; }
.sol-board .sb-pager .board-nav a::before, .sol-board .sb-pager .board-nav a::after { content: none !important; border: 0 !important; position: static !important; padding: 0 !important; height: auto !important; }
.sol-board .sb-pager .board-nav a.board-nav-first, .sol-board .sb-pager .board-nav a.board-nav-prev.ten, .sol-board .sb-pager .board-nav a.board-nav-next.ten { font-size: 13px; }
.sol-board .sb-pager .board-nav a.board-nav-prev:not(.ten)::after { content: "‹" !important; font-size: 18px; }
.sol-board .sb-pager .board-nav a.board-nav-next:not(.ten)::after { content: "›" !important; font-size: 18px; }
.sol-board .sb-pager .board-nav { flex-wrap: wrap; justify-content: center; }
@media (max-width: 767.98px) {
  .sol-board .hide-sm { display: none; }
  .sol-board .bd-head { padding: 32px 0 20px; }
  .sol-board .bd-title { font-size: 24px; }
  .sol-board .bd-toolbar-r { width: 100%; }
  .sol-board .bd-search { width: auto; flex: 1 1 auto; }
  .sol-board table.sb-list thead th, .sol-board table.sb-list tbody td { padding: .75rem .625rem; }
}

/* ---- 게시판 글쓰기 (solution 'page-head' + 카드 폼) ---- */
.sol-write { --sw-card: #FFFFFF; --sw-bg: #FFFFFF; --sw-border: #E4E4E7; --sw-input: #E4E4E7; --sw-fg: #09090B; --sw-muted: #71717A; --sw-soft: #F4F4F5; --sw-ring: #A1A1AA; --sw-brand: #5E6AD2; --sw-danger: #E5484D; }
.sol-write a { text-decoration: none; }
.sol-write .breadcrumb { display: block; padding: 0; background: none; font-size: 14px; color: var(--sw-muted); margin: 0 0 .75rem; }
.sol-write .breadcrumb a { color: var(--sw-muted); }
.sol-write .breadcrumb a:hover { color: var(--sw-fg); }
.sol-write .breadcrumb span { margin: 0 .35rem; opacity: .6; }
.sol-write .page-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.sol-write .page-head h1 { margin: 0; font-size: 1.875rem; line-height: 2.25rem; letter-spacing: -.025em; font-weight: 700; color: var(--sw-fg); }
.sol-write .sw-card { background: var(--sw-card); border: 1px solid var(--sw-border); border-radius: 12px; }
.sol-write .sw-card-body { padding: 1.25rem; }
.sol-write .kc-form-row { display: block; padding: 0; margin-bottom: 1rem; border-bottom: 0; }
.sol-write .kc-form-row > label, .sol-write .kc-form-row > .kc-label { display: block; padding: 0; margin-bottom: .375rem; font-size: 14px; font-weight: 500; color: var(--sw-fg); }
.sol-write .kc-req { color: var(--sw-danger); margin-left: 2px; }
.sol-write .py-3.border-bottom, .sol-write .py-2.border-bottom { border-bottom: 0 !important; padding-top: 0 !important; padding-bottom: 0 !important; margin-bottom: 1rem; }
.sol-write .form-control, .sol-write .form-select { padding: .5rem .75rem; font-size: 14px; line-height: 1.25rem; color: var(--sw-fg); background-color: var(--sw-bg); border: 1px solid var(--sw-input); border-radius: 8px; box-shadow: none; transition: border-color .2s ease, box-shadow .2s ease; }
.sol-write .form-control:focus, .sol-write .form-select:focus { border-color: var(--sw-ring); box-shadow: 0 0 0 3px rgba(161, 161, 170, 0.25); outline: 0; }
.sol-write textarea.form-control { min-height: 80px; }
.sol-write .form-control::placeholder { color: var(--sw-muted); }
.sol-write .form-text, .sol-write .kc-hint-inline { font-size: .8125rem; color: var(--sw-muted); margin-top: .375rem; }
.sol-write .form-check-label { font-size: 14px; color: var(--sw-fg); }
.sol-write .form-check-input:checked { background-color: var(--sw-brand); border-color: var(--sw-brand); }
.sol-write .file-list { display: flex; flex-direction: column; gap: .5rem; }
.sol-write .file-list:empty { display: none; }
.sol-write .file-item { display: flex; align-items: center; gap: .625rem; flex-wrap: wrap; padding: .5rem .75rem; border: 1px solid var(--sw-border); border-radius: .375rem; background: var(--sw-card); }
.sol-write .file-item.is-deleted { opacity: .45; text-decoration: line-through; }
.sol-write .file-item .file-name { flex: 1 1 10rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: .875rem; font-weight: 500; }
.sol-write .file-item .file-size { flex: none; font-size: .75rem; color: var(--sw-muted); }
.sol-write .file-item .file-caption { flex: 1 1 12rem; min-width: 0; max-width: 18rem; }
.sol-write .file-item .file-remove { flex: none; display: inline-flex; align-items: center; gap: .25rem; padding: .25rem .5rem; border: 0; border-radius: .375rem; background: transparent; color: var(--sw-muted); font: inherit; font-size: .8125rem; cursor: pointer; }
.sol-write .file-item .file-remove:hover { background: var(--sw-soft); color: var(--sw-danger); }
.sol-write .file-dropzone { margin-top: .5rem; }
.sol-write .file-dropzone-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .35rem; padding: 1.5rem 1rem; text-align: center; border: 1.5px dashed var(--sw-border); border-radius: .375rem; cursor: pointer; transition: border-color .15s, background-color .15s; }
.sol-write .file-dropzone-inner:hover, .sol-write .file-dropzone-inner.is-drag-over { border-color: var(--sw-brand); background: var(--sw-soft); }
.sol-write .file-dropzone-inner.is-full { opacity: .5; cursor: not-allowed; }
.sol-write .file-dropzone-inner svg { color: var(--sw-muted); }
.sol-write .file-dropzone-text { font-size: .875rem; margin: 0; }
.sol-write .file-dropzone-hint { font-size: .75rem; color: var(--sw-muted); margin: 0; }
.sol-write .kc-form-actions { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: .5rem; margin-top: 1.2rem; }
.sol-write .sw-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem 1rem; font-size: 14px; font-weight: 500; line-height: 1.25rem; color: var(--sw-fg); background: var(--sw-soft); border: 1px solid transparent; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: opacity .2s ease, background-color .2s ease, color .2s ease; }
.sol-write .sw-btn:hover { color: var(--sw-fg); background: #E9E9EC; }
.sol-write .sw-btn.sw-primary { padding: .65rem 1.5rem; background: var(--sw-brand); color: #FFF; }
.sol-write .sw-btn.sw-primary:hover { opacity: .9; background: var(--sw-brand); color: #FFF; }
.sol-write .alert { border-radius: 10px; }
.sol-write .kc-form-row:has(> .kc-label + .pt-2) { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1rem; }
.sol-write .kc-form-row:has(> .kc-label + .pt-2) > .kc-label { width: auto; margin: 0; }
.sol-write .kc-form-row > .pt-2 { padding-top: 0 !important; }
.sol-write .kc-form-row > div > .form-select.w-auto, .sol-write .kc-form-row .form-select.w-auto { width: 100% !important; }
@media (max-width: 767.98px) { .sol-write .page-head h1 { font-size: 1.5rem; line-height: 2rem; } }

/* ---- 게시판 글보기 (solution 'post-head' · 카드 · 추천 · 댓글) ---- */
.sol-view { --sv-card: #FFFFFF; --sv-bg: #FFFFFF; --sv-border: #E4E4E7; --sv-border-sub: #F1F1F3; --sv-input: #E4E4E7; --sv-fg: #09090B; --sv-muted: #71717A; --sv-soft: #F4F4F5; --sv-ring: #A1A1AA; --sv-brand: #5E6AD2; --sv-danger: #E5484D; }
.sol-view a { text-decoration: none; }
.sol-view .breadcrumb { display: block; padding: 0; background: none; font-size: 14px; color: var(--sv-muted); margin: 0 0 .75rem; }
.sol-view .breadcrumb a { color: var(--sv-muted); }
.sol-view .breadcrumb a:hover { color: var(--sv-fg); }
.sol-view .breadcrumb span { margin: 0 .35rem; opacity: .6; }
.sol-view .sv-card { background: var(--sv-card); border: 1px solid var(--sv-border); border-radius: 12px; overflow: hidden; }
.sol-view .sv-card + .sv-card { margin-top: 1rem; }
.sol-view .post-head { padding: 1.5rem 1.25rem; border-bottom: 1px solid var(--sv-border); }
.sol-view .post-head h1 { margin: 0 0 .625rem; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; color: var(--sv-fg); overflow-wrap: anywhere; }
.sol-view .post-head .badge-cat { margin-bottom: .5rem; }
.sol-view .post-meta { display: flex; flex-wrap: wrap; gap: .25rem 1rem; font-size: .8125rem; color: var(--sv-muted); }
.sol-view .post-meta strong { color: var(--sv-fg); font-weight: 600; }
.sol-view .post-meta strong a, .sol-view .post-meta strong .kc-name { color: var(--sv-fg); font-weight: 600; }
.sol-view .badge { display: inline-block; padding: 3px 8px; border-radius: 5px; font-size: 11px; font-weight: 700; line-height: 1.4; vertical-align: middle; }
.sol-view .badge-cat { background: var(--sv-soft); color: var(--sv-fg); }
.sol-view .badge-notice { background: #FDE8E8; color: #B42318; }
.sol-view .post-body { padding: 2rem 1.25rem; min-height: 8rem; margin: 0; border: 0; font-size: 1rem; line-height: 1.75; }
.sol-view .post-body img { border-radius: 10px; }
.sol-view .post-body blockquote { margin: 1.25rem 0; padding: .5rem 0 .5rem 1.25rem; border-left: 3px solid var(--sv-border); color: var(--sv-muted); }
.sol-view .post-body pre { background: var(--sv-soft); color: var(--sv-fg); padding: 1rem; border-radius: 10px; overflow-x: auto; font-size: 14px; }
.sol-view .post-body code { background: var(--sv-soft); padding: .125rem .375rem; border-radius: 4px; }
.sol-view .post-body pre code { background: none; padding: 0; }
.sol-view .post-body table { border-collapse: collapse; width: 100%; margin: 1.25rem 0; }
.sol-view .post-body th, .sol-view .post-body td { border: 1px solid var(--sv-border); padding: .625rem; }
.sol-view .kc-post-files, .sol-view .kc-post-links { margin: 0; padding: .75rem 1.25rem; border: 0; border-bottom: 1px solid var(--sv-border); border-radius: 0; background: var(--sv-soft); font-size: 14px; }
.sol-view .kc-post-tags { padding: 0 1.25rem 1rem; }
.sol-view .kc-post-tags a { color: var(--sv-muted); background: var(--sv-soft); }
.sol-view .vote-row { display: flex; gap: .625rem; justify-content: center; padding: 1.5rem 0; }
.sol-view .vote-btn { display: inline-flex; flex-direction: column; align-items: center; gap: .125rem; min-width: 5.5rem; padding: .75rem 1.25rem; border: 1px solid var(--sv-border); border-radius: 10px; background: var(--sv-bg); color: var(--sv-muted); cursor: pointer; font-family: inherit; font-size: .8125rem; font-weight: 500; transition: background-color .15s, border-color .15s; }
.sol-view .vote-btn:hover { background: var(--sv-soft); color: var(--sv-muted); }
.sol-view .vote-btn .n { font-size: 1.125rem; font-weight: 700; color: var(--sv-fg); line-height: 1.4; }
.sol-view .vote-btn.on, .sol-view .vote-btn.active { border-color: var(--sv-brand); color: var(--sv-fg); background: var(--sv-bg); }
.sol-view .post-actions { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; padding: 1.125rem 1.25rem; border: 0; border-top: 1px solid var(--sv-border); justify-content: flex-start; }
.sol-view .post-actions > div:nth-child(2) { margin-left: auto; }
.sol-view .sv-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .5rem 1rem; margin: 0; font-size: 14px; font-weight: 500; line-height: 1.25rem; color: var(--sv-fg); background: var(--sv-soft); border: 1px solid transparent; border-radius: 8px; cursor: pointer; white-space: nowrap; transition: opacity .2s ease, background-color .2s ease, color .2s ease; }
.sol-view .sv-btn:hover { color: var(--sv-fg); background: #E9E9EC; }
.sol-view .sv-btn.active { background: var(--sv-brand); color: #FFF; }
.sol-view .sv-btn.sv-danger { background: var(--sv-danger); color: #FFF; }
.sol-view .sv-btn.sv-danger:hover { opacity: .9; background: var(--sv-danger); color: #FFF; }
.sol-view .sv-btn.sv-primary { background: var(--sv-brand); color: #FFF; }
.sol-view .sv-btn.sv-primary:hover { opacity: .9; background: var(--sv-brand); color: #FFF; }
.sol-view .sibling-nav { border-top: 1px solid var(--sv-border); font-size: 14px; }
.sol-view .sibling-nav > div { display: flex; gap: .75rem; padding: .75rem 1.25rem; border-bottom: 1px solid var(--sv-border-sub); }
.sol-view .sibling-nav > div:last-child { border-bottom: 0; }
.sol-view .sibling-nav .dir { color: var(--sv-muted); flex: none; width: 3.5rem; }
.sol-view .sibling-nav a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--sv-fg); }
.sol-view .sibling-nav a:hover { color: var(--sv-brand); }
.sol-view .sv-comments { margin-top: 1.25rem; font-size: 14px; }
.sol-view .sv-comments .card-head { display: flex; align-items: center; gap: .625rem; padding: 1rem 1.25rem; border-bottom: 1px solid var(--sv-border); }
.sol-view .sv-comments .card-head h2 { margin: 0; padding: 0; font-size: 1rem; font-weight: 600; color: var(--sv-fg); }
.sol-view .sv-comments .comment-count { color: var(--sv-muted); font-weight: 600; font-size: .8125rem; }
.sol-view .sv-comments .kc-comment { display: block; padding: 1rem 1.25rem; margin: 0; background: transparent; border-bottom: 1px solid var(--sv-border-sub); }
.sol-view .sv-comments .kc-comment.is-reply { background: transparent; padding-left: 2.25rem; }
.sol-view .sv-comments .kc-comment.is-best { background: rgba(94, 106, 210, 0.06); }
.sol-view .sv-comments .kc-comment-photo { display: none; }
.sol-view .sv-comments .kc-comment-head { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: 0 0 .375rem; padding: 0; font-size: .8125rem; background: transparent; color: var(--sv-muted); }
.sol-view .sv-comments .kc-comment-head .kc-name { font-weight: 600; color: var(--sv-fg); }
.sol-view .sv-comments .kc-comment-head time { margin-left: 0; color: var(--sv-muted); border: 0; padding: 0; }
.sol-view .sv-comments .kc-comment-tools { margin: 0 0 0 auto; display: flex; gap: .5rem; font-size: 12px; }
.sol-view .sv-comments .kc-comment-tools button, .sol-view .sv-comments .kc-comment-tools a { border: 0; background: none; padding: 0; cursor: pointer; color: var(--sv-muted); font-size: 12px; font-family: inherit; }
.sol-view .sv-comments .kc-comment-tools button:hover, .sol-view .sv-comments .kc-comment-tools a:hover { color: var(--sv-fg); }
.sol-view .sv-comments .kc-comment-body { padding: 0; font-size: 14px; line-height: 1.7; color: var(--sv-fg); }
.sol-view .sv-comments .border-top { border-top: 0 !important; }
.sol-view .sv-comments > .kc-muted { padding: 3rem 1rem; text-align: center; border: 0 !important; }
.sol-view .sv-comments .kc-comment-form { margin: 0; padding: 1.25rem; border: 0; border-top: 1px solid var(--sv-border); border-radius: 0; background: transparent; }
.sol-view .sv-comments .form-control { padding: .5rem .75rem; font-size: 14px; color: var(--sv-fg); background-color: var(--sv-bg); border: 1px solid var(--sv-input); border-radius: 8px; box-shadow: none; }
.sol-view .sv-comments .form-control:focus { border-color: var(--sv-ring); box-shadow: 0 0 0 3px rgba(161, 161, 170, 0.25); }
.sol-view .sv-comments textarea.form-control { min-height: 5rem; }
.sol-view .sv-comments > p.small { padding: 1rem 1.25rem; margin: 0 !important; }
@media (max-width: 767.98px) { .sol-view .post-actions > div:nth-child(2) { margin-left: 0; } .sol-view .vote-btn { min-width: 4.5rem; padding: .625rem 1rem; } }



/* ===== 유튜브 게시판 목록 (project2 유튜브 게시판 모양: 4열 영상 카드 · 재생 아이콘 · 검색줄) ===== */
.yt-board { margin: 0; padding: 0 0 40px; } /* 폭·좌우 여백은 레이아웃의 본문 영역(#kc-content)이 이미 준다 */
.yt-crumb { margin: 18px 0 12px; font-size: 13px; color: var(--yt-sub); }
.yt-crumb a { color: inherit; text-decoration: none; }
.yt-crumb a:hover { color: var(--yt-text); }
.yt-crumb span { margin: 0 6px; opacity: .6; }
.yt-head { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; margin: 0 0 24px; }
.yt-head h1 { margin: 0; font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.yt-count { font-size: 13px; color: var(--yt-sub); }
.yt-write { margin-left: auto; display: inline-flex; align-items: center; height: 34px; padding: 0 16px; border-radius: 8px; background: var(--yt-text); color: var(--yt-on); font-size: 13px; font-weight: 600; text-decoration: none; }
.yt-grid { display: grid; gap: 20px; margin-top: 15px; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); }
.yt-item { position: relative; display: flex; flex-direction: column; overflow: hidden; background: var(--yt-card); border: 1px solid var(--yt-line); border-radius: 10px; transition: box-shadow .2s ease, transform .2s ease; }
.yt-item:hover { box-shadow: 0 10px 30px rgba(0, 0, 0, .08); transform: translateY(-2px); }
.yt-item.is-current { border-color: var(--yt-text); }
.yt-pick { position: absolute; top: 8px; left: 8px; z-index: 2; display: flex; padding: 4px; border-radius: 5px; background: var(--yt-card); border: 1px solid var(--yt-line); box-shadow: 0 1px 3px rgba(0, 0, 0, .2); }
.yt-pick input { margin: 0; cursor: pointer; }
.yt-thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--yt-thumb); }
.yt-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.yt-noimg { display: grid; place-items: center; width: 100%; height: 100%; color: var(--yt-sub); font-size: 30px; }
.yt-thumb--yt::after {
  content: ''; position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; background-color: rgba(0, 0, 0, .55);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M8 5v14l11-7z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 54% center; background-size: 20px;
}
.yt-info { display: flex; flex-direction: column; flex: 1; gap: 6px; padding: 14px 16px; }
.yt-info .t { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: 14px; font-weight: 600; line-height: 1.45; color: var(--yt-text); text-decoration: none; }
.yt-info .t em { font-style: normal; color: var(--yt-link); }
.yt-info .m { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: auto; font-size: 12px; color: var(--yt-sub); }
.yt-badge { display: inline-block; padding: 1px 6px; border-radius: 4px; background: var(--yt-text); color: var(--yt-on); font-size: 11px; font-weight: 600; }
.yt-empty { padding: 80px 0; text-align: center; color: var(--yt-sub); border: 1px dashed var(--yt-line); border-radius: 10px; }
.yt-pager { margin-top: 28px; }
.yt-search { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 28px 0 8px; }
.yt-search select, .yt-search input[type=search] { height: 38px; padding: 0 12px; border: 1px solid var(--yt-line2); border-radius: 8px; background: var(--yt-card); font-size: 14px; }
.yt-search input[type=search] { flex: 0 1 320px; }
.yt-btn { display: inline-flex; align-items: center; height: 38px; padding: 0 18px; border: 1px solid var(--yt-text); border-radius: 8px; background: var(--yt-text); color: var(--yt-on); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.yt-btn--line { background: var(--yt-card); color: var(--yt-text); }
@media (max-width: 1100px) { .yt-grid { --cols: 3 !important; } }
@media (max-width: 800px) { .yt-grid { --cols: 2 !important; } }
@media (max-width: 480px) { .yt-grid { --cols: 1 !important; } }

/* 관리 패널 + 하단 버튼 줄 (관리자 페이지 · 글쓰기) */
.yt-card-radius { border-radius: 14px; }
.yt-item { border-radius: 14px; }
.yt-pick { top: 8px; left: 8px; padding: 0; width: 26px; height: 26px; align-items: center; justify-content: center; border: 1px solid var(--yt-line2); border-radius: 6px; box-shadow: none; }
.yt-pick input, .yt-manage input[type=checkbox] { width: 16px; height: 16px; margin: 0; accent-color: var(--yt-text); }
.yt-manage { display: flex; align-items: center; flex-wrap: wrap; gap: 12px 14px; margin: 18px 0 0; padding: 16px 20px; border: 1px solid var(--yt-line); border-radius: 14px; background: var(--yt-card); }
.yt-manage__all { display: inline-flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; font-weight: 500; cursor: pointer; }
.yt-manage select { height: 38px; min-width: 170px; padding: 0 10px; border: 1px solid var(--yt-line2); border-radius: 8px; background: var(--yt-card); font-size: 14px; }
.yt-manage__go { height: 34px; padding: 0 14px; border: 0; border-radius: 8px; background: var(--yt-soft); color: var(--yt-text); font-size: 13px; font-weight: 700; cursor: pointer; }
.yt-manage__go:hover { background: var(--yt-soft2); }
.yt-manage__note { font-size: 12.5px; color: var(--yt-sub); }
.yt-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 16px; }
.yt-foot__a, .yt-foot__w { display: inline-flex; align-items: center; height: 40px; padding: 0 18px; border-radius: 8px; font-size: 14px; font-weight: 700; text-decoration: none; }
.yt-foot__a { background: var(--yt-soft); color: var(--yt-text); }
.yt-foot__a:hover { background: var(--yt-soft2); }
.yt-foot__w { background: var(--yt-text); color: var(--yt-on); }
.yt-foot__w:hover { background: #000; color: var(--yt-on); }
.yt-search { margin-top: 24px; }

/* 색상 변수: 기본(라이트) / 다크 모드(html[data-bs-theme="dark"]) */
.yt-board {
  --yt-text: #1f2430; --yt-on: #fff; --yt-card: #fff; --yt-line: #e4e6eb; --yt-line2: #cfd3da; --yt-sub: #8a8f99;
  --yt-thumb: #eef0f3; --yt-soft: #f1f1f3; --yt-soft2: #e6e6ea; --yt-link: #5b6bd6; --yt-shadow: rgba(0, 0, 0, .08);
}
html[data-bs-theme="dark"] .yt-board {
  --yt-text: #e8e9ee; --yt-on: #121215; --yt-card: #1a1a1f; --yt-line: #2a2a31; --yt-line2: #3a3a43; --yt-sub: #9a9aa6;
  --yt-thumb: #25252b; --yt-soft: #26262c; --yt-soft2: #31313a; --yt-link: #8fa0ff; --yt-shadow: rgba(0, 0, 0, .5);
}
html[data-bs-theme="dark"] .yt-board .yt-search select,
html[data-bs-theme="dark"] .yt-board .yt-search input[type=search],
html[data-bs-theme="dark"] .yt-board .yt-manage select { background: var(--yt-card); color: var(--yt-text); }
html[data-bs-theme="dark"] .yt-board .yt-thumb--yt::after { background-color: rgba(255, 255, 255, .22); }
html[data-bs-theme="dark"] .yt-board .yt-manage__go,
html[data-bs-theme="dark"] .yt-board .yt-foot__a { color: var(--yt-text); }
html[data-bs-theme="dark"] .yt-board .yt-foot__w { background: #e8e9ee; color: #121215; }
html[data-bs-theme="dark"] .yt-board .yt-foot__w:hover { background: #fff; color: #121215; }
.yt-item:hover { box-shadow: 0 10px 30px var(--yt-shadow); }