@charset "utf-8";

.board-notice	{ width: 264px; padding: 10px; margin: 0 auto; text-align: center; box-sizing: border-box; }


.avocado-list	{
	display: block;
	position: relative;
	margin: 0;
	padding: 0;
}

.avocado-list li {
    display: grid;
    grid-template-columns: 30px 1fr;
    align-items: center;
}

.avocado-list li.no-data {
    display: block;
    grid-template-columns: none;
}

.avocado-list li.bo_notice	{  }
.avocado-list li.no-data	{ 
	text-align: center;
	line-height: 200px;
}
.avocado-list li .td_chk {
    position: static;
    display: flex;
    align-items: center;
    justify-content: center;
}

.avocado-list li strong .highlight {font-weight:normal;}
.avocado-list li strong .cnt_cmt:before	{ content: "( "; }
.avocado-list li strong .cnt_cmt:after	{ content: " )"; }

.avocado-list li .ico-cate	{
	display: block;
	position: absolute;
	top: 0; 
	left: 20px;
	width: 100px;
	text-align: center;
}

.avocado-list li a {
    display: flex;
    align-items: center;
    padding: 6px 16px;
    line-height: 1.4;
}

.list-subject {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
flex: 1 1 auto;
}

.list-title {
    display: flex;
    align-items: center;
    gap: 6px;
font-size: 15px;
}

.list-subtitle {
    font-size: 13px;
    color: #999;
    line-height: 1.4;
    white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
min-width: 0;
flex: 1 1 auto;
display: inline-block;
max-width: 100%;
}

.list-title > .subject-text {
    white-space: nowrap;
}


.avocado-list li a {
    min-width: 0;
}


.avocado-list li .info {
    display: flex;
justify-content:flex-end;
gap: 10px;
    grid-template-columns: 110px auto;
    column-gap: 6px;
    align-items: center;
    font-size: 11px;
    white-space: nowrap;
margin-right: 24px;
}

.avocado-list li .info .name {
    text-align: right;
    overflow: hidden;
max-width: 80px;
	gap: 4px;
	justify-content: flex-end;
	text-overflow: ellipsis;
	padding-right:5px;
}

.avocado-list li .highlight {
flex: 0 0 auto;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 0;
padding-right: 4px;
    border-radius: 3px;
    line-height: 1.4;
font-size: 8px;
margin-bottom: 0px !important;
font-family: inherit;
}

.avocado-list li .info .date {
    text-align: right;
flex-shrink: 0;
padding-right: 6px;
}


.avocado-list li .hit	{
	display: block;
	position: absolute;
	top: 0;
	right: 0;
	width: 50px;
	text-align: center;
	opacity: .6;
	font-size: 11px;
}



.bo_fx {position:relative;padding:20px 0;}


.board-category	{
	display: block;
	position: relative;
	margin-bottom: 10px; 
	
}


.board-write	{  padding: 0 10px; }

.board-write h3	{
	font-size: 26px;
	text-align: center;
	padding: 30px 0 20px;
} 
.board-write .write-notice	{
	padding: 10px;
	font-size: 11px;
}
.board-write > dl {position:relative;}
.board-write > dl > dt { width:70px;position:absolute;line-height:32px;text-align:center; }
.board-write > dl > dd { width:100%;margin-left:0;padding-left:80px;box-sizing:border-box;line-height:32px;}
.board-write input.frm_input.full	{ width: 100%; display:block;margin:1px 0;}


.board-viewer.theme-box	{
	display: block;
	position: relative;
	padding: 20px;
}

.board-viewer .subject	{
	text-align: left;
	margin-bottom:8px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
}
.board-viewer .subject em	{
	display: block;
	position: relative;
	font-size: 14px;
	line-height: 1.2em;
	padding-bottom: 10px;
}
.board-viewer .subject strong	{
	display: block;
	position: relative;
	font-size: 25px;
	line-height: 1.3em;
	margin-bottom: 15px;
	margin-left: 0;
	padding-left: 0;
}

.board-viewer .info	{
	margin-top: -10px;
	padding-left: 2px;
}
.board-viewer .info span	{ display: inline-block; }
.board-viewer .info span + span:before	{
	content: "";
	display: inline-block;
	width: 1px;
	height: 8px;
	vertical-align: middle;
	margin: 0 10px;
}

.board-viewer .contents	{
	display: block;
	position: relative;
	margin: 20px 0;
	padding: 40px 5px;
	border-left-width: 0;
	border-right-width: 0;
	margin-bottom: 100px;
}

.board-viewer .contents hr{
    display:block;
    border:0;
    border-top:1px solid #999;
    margin:20px 0;
}

@media all and (max-width: 768px) {
#bo_v_con * {max-width:100%;}

.board-category	{
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 0 10px;
}
.board-category select	{
		width: 100%;
}

.bo_fx	{
		display: block;
		width: 100%;
		box-sizing: border-box;
		padding: 20px 10px !important;
}

.bo_fx a.ui-btn {
    font-weight: bold;
}
}


#bo_v_bot	{ padding: 20px 0; overflow: visible; }

.view-nav-item {
    display: block;
    padding: 8px 0;
margin-bottom: 10px; 

}

.view-nav {
    margin-top: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.bo_v_nb,
.bo_v_com {
    float: right;
}

.board-comment-list			{ position: relative; }
.board-comment-list .co-line	{
	display: block;
	position: relative;
	clear: both;
	width: 100%;
	height: 1px;
	margin: 0;
	padding: 0;
	border: none;
}
.board-comment-list .item	{
display: flex;
flex-direction: column;
align-items: flex-start;
	position: relative;
	padding: 10px;
}
.board-comment-list .co-name	{
	position: static;
	top: 0px;
	left: 0;
	bottom: 0;
	width: auto;
	padding: 10px 10px;
	box-sizing: border-box;
}
.board-comment-list .co-info {
	display: block;
	text-align: right;
	padding-top: 15px;
	font-size: 11px;
	opacity: .7;
}
.board-comment-list .co-info span	{ display: inline-block; opacity: .8; }
.board-comment-list .co-info span + span:before	{
	content: "";
	display: inline-block;
	width: 1px;
	height: 8px;
	vertical-align: middle;
	margin: 0 10px;
}

.board-comment-list .item.reply	{ border-left: 5px solid rgba(255, 255, 255, .1); }
.board-comment-list .item.reply .co-name	{
	background: none;
}


.board-comment-list {
    margin-top: 20px;
}

.board-comment-write {
    margin-top: 30px;
}


.board-comment-form	{ 
	position: relative;
	padding-right: 80px;
}
.board-comment-form .btn_confirm	{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 29px;
	width: 80px;
}
.board-comment-form .btn_confirm .ui-btn	{
	width: 100%;
	height: 100%;
}
.board-comment-form p	{
	margin: 0;
	padding: 5px 10px;
}
.board-comment-form textarea	{ display: block; height: 100px; resize: none; border: none; }


@media all and (max-width: 768px) {

.avocado-list li a {
    display: flex;
    align-items: center;
    padding: 6px 16px;
}
.avocado-list li .ico-cate,
.avocado-list li .name,
.avocado-list li .date,
.avocado-list li .hit	{
		position: relative;
		width: auto;
		left: auto;
		right: auto;
		bottom: auto;
		line-height: 1.2em;
	}

	

.avocado-list li .ico-cate	{ display: inline; }
.avocado-list li .ico-cate:before	{ content: "[ "; }
.avocado-list li .ico-cate:after	{ content: " ]"; }

.avocado-list li strong	{ display: flex; min-width: 0; line-height: 1.2em; }

.avocado-list li .name,
.avocado-list li .date,
.avocado-list li .hit	{ display: inline; padding: 0 5px; }

.board-comment-list .item	{ padding: 0; }
.board-comment-list .co-name	{ display: flex; align-items: center; gap: 6px; white-space: nowrap; position: relative; width: auto; padding: 5px 10px; }
.board-comment-list .co-content	{ padding: 10px; word-break:break-all;}

}

.board-comment-list .co-name .secret {
    white-space: nowrap;
    flex: 0 0 auto;
}

.board-comment-list .co-nick,
.board-comment-list .secret {
    white-space: nowrap;
}

/* 기본 들여쓰기
   - P/DIV 등 에디터가 만드는 블록의 첫 줄은 text-indent 상속으로 처리
   - 일반 Enter가 <br>로 저장된 경우에는 JS가 .fiction-line-indent를 삽입해
     줄바꿈 뒤의 각 텍스트 줄에도 같은 들여쓰기를 적용합니다. */
#bo_v_con.indent-on {
    --fiction-indent-size: 0.8em;
    text-indent: var(--fiction-indent-size);
}

#bo_v_con.indent-on .fiction-indent-skip,
#bo_v_con.indent-on blockquote,
#bo_v_con.indent-on pre,
#bo_v_con.indent-on code,
#bo_v_con.indent-on ul,
#bo_v_con.indent-on ol,
#bo_v_con.indent-on li,
#bo_v_con.indent-on table,
#bo_v_con.indent-on .fiction-body-image {
    text-indent: 0 !important;
}

#bo_v_con .fiction-line-indent {
    display: none;
}

#bo_v_con.indent-on .fiction-line-indent {
    display: inline-block;
    width: var(--fiction-line-indent-width, var(--fiction-indent-size, 0.8em));
    height: 0;
    padding: 0;
    margin: 0;
    border: 0;
    overflow: hidden;
    pointer-events: none;
}


#bo_v_con img {
    display: block;
    max-width: 100%;
    height: auto;
    margin: 10px 0;
}


#bo_v_con p {
    margin-left: 0;
    padding-left: 0;
}


.view-font-control {
    display: flex;
    align-items: center;
    gap: 6px;
}

.view-font-control .indent-toggle {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 16px;
    cursor: pointer;
    user-select: none;
}


#bo_v_con {
    line-height: 1.8;
}


.board-comment-form {
    display: flex;
    align-items: stretch;
    gap: 8px;
}

.board-comment-form > textarea {
    flex: 1;
    resize: none;
}

.comment-input-row {
    display: flex;
    gap: 8px;
    align-items: stretch;
}

.comment-input-row textarea {
    flex: 1;
    min-height: 120px;
    resize: none;
}

.comment-input-row .btn_confirm {
    display: flex;
}

.comment-input-row .btn_confirm button {
    min-width: 90px;
    white-space: nowrap;
}

.comment-extra {
    margin-top: 10px;
}

.comment-extra input {
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 6px;
}


.board-comment-form .btn_confirm {
    flex: 0 0 72px;
}


.board-comment-form .btn_confirm button {
    min-width: 80px;
    padding: 0 16px;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
}
.view-font-control {
    margin-bottom: 30px;
    display: flex;
    gap: 6px;
justify-content: right;
}

.view-font-control button {
    padding: 4px 10px;
    font-size: 13px;
    cursor: pointer;
}

.view-status {
    margin-top: 6px;
    font-size: 14px;
    color: #5797f8;
margin-left: -16px;
margin-right: -16px;
}

.view-status .highlight {
    display: inline-block;
    margin-right: 4px;
    padding: 1px 5px;
    font-size: 11px;
    border-radius: 3px;
    background: #000;
    color: #fff;
}

.view-subtitle {
    font-size: 19px;
    font-weight: 500;
    margin: 0 0 16px;
    color: #555;
padding-left: 1px;
}

.avocado-list li a.bo_row {
    display: grid;
	grid-template-columns: 1fr auto;
    align-items: center;
    justify-content: space-between;
    min-width: 0;
	gap: 12px;
width: 100%;
}
.avocado-list li .bo_title {
	flex-direction: column;
	gap: 4px;
	display: flex;
    min-width: 0; 
}

.avocado-list li .bo_title .list-title {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    min-width: 0;
}


.avocado-list li .list-title {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}


.avocado-list li .title-main {
    display: block;
   width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.avocado-list li .list-subtitle {
	display: block;
	width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #999;
}

.no-data-row {
    width: 100%;
    padding: 40px 0;
    text-align: center;
    color: #888;
    font-size: 15px;
}

.subtitle-wrap {
    display: block;
    width: 100%;
    overflow: hidden;
}

.comment-count {
    font-size: 12px;
    color: #5797f8;
font-weight: 700;
}


.board-comment-list .co-name,
.board-comment-list .co-content {
    padding-left: 10px;
    padding-right: 10px;
    width: 100%;
    box-sizing: border-box;
}

#bo_v_con em,
#bo_v_con i {
    font-style: italic;
}

.btn_submit {
font-size: 13.5px;
}

.view-nav-item {
    display: block;
    padding: 8px 0;
    border-radius: 12px;
    background: none;
    text-decoration: none;
    color: inherit;
    transition: background .2s ease;
}

.view-nav-item:hover {
    background: none;
}

.view-nav-item.prev {
    text-align: left;
}

.view-nav-item.next {
    text-align: left;
}

.view-nav-item .nav-label {
    font-size: 11px;
    opacity: .5;
    display: block;
    margin-bottom: 6px;
}

.nav-title {
    display: block;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.nav-subtitle {
    font-size: 13px;
    color: #888;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.view-nav-item .nav-content {
    min-width: 0;
}


.video-inline {
    display: inline-block;
    width: 100%;
    max-width: 400px;
    aspect-ratio: 16 / 9;
    vertical-align: middle;
}

.video-inline iframe {
    display: block; 
    width: 100%;
    height: 100%;

    border: 0;
    outline: none;
    box-shadow: none;
}


@media (max-width: 768px) {
  
 .comment-input-row .btn_confirm button {
        width: 100%;
    }

  a.bo_row {
        display: block !important;
    }

a.bo_row .bo_title {
        display: block;
        width: 100%;
    }

a.bo_row .info {
        display: block;
        width: 100%;
        margin-top: 6px;
    }

.avocado-list li .highlight {
padding-left: 0px;
padding-right: 10px;
}
.avocado-list li .info .name {
        padding-left: 0;
	padding-right: 5px;
    }

.comment-input-row {
        flex-wrap: wrap;
    }

.comment-input-row .file_box {
        flex: 0 0 100%;
        margin-top: 8px;
    }
.comment-input-row .btn_confirm {
        margin-left: auto;
        display: flex;
        justify-content: flex-end;
    }
.view-nav {
        grid-template-columns: 1fr;
    }

.avocado-list li .bo_title .list-title {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 5px;
}

.list-preview {
    margin-top: 5px;
}
}

html.dark-mode,
body.dark-mode {
    background: #000;
    color: #e3e3e2;
}


body.dark-mode #header .gnb_1da,
body.dark-mode #header .gnb_1da a {
    color: #fff !important;
}

body.dark-mode .board-viewer,
body.dark-mode .board-viewer.theme-box,
body.dark-mode #bo_v_con {
    background: #000;
    color: #e3e3e2;
}

body.dark-mode .subject strong {
    color: #e3e3e2;
}

body.dark-mode .view-subtitle {
    color: #c7c7c7;
}

body .info {
    color: #777;
}
body.dark-mode .info,
body.dark-mode .sv_member {
    color: #999;
}

body.dark-mode a {
    color: #e3e3e2;
}


.view-category,
.view-category a {
    color: #777;
}

body.dark-mode .view-category,
body.dark-mode .view-category a {
    color: #999;
}

body.dark-mode .nav-title {
    color: #e3e3e2;
}

body.dark-mode .nav-subtitle {
    color: #999;
}

body.dark-mode .board-comment-list {
    color: #fff;
}

body.dark-mode .board-comment-list.theme-box {
    background: #000;
}
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
    background: #000;
    color: #fff;
    border-color: #555;
}

body.dark-mode .required,
body.dark-mode .frm_file,
body.dark-mode .frm_input.full {
    border: 1px solid #999;
}

body.dark-mode .ui-btn {
    background: #000;
    color: #fff;
    border: 1px solid #000;
}

body.dark-mode .theme-box {
    border-color: #000;
}

body.dark-mode::-webkit-scrollbar-track {
    background: #222;
}

body.dark-mode::-webkit-scrollbar-thumb {
    background: #999;
    border-radius: 5px;
}


    body.dark-mode #gnb_wrapper {
        background: #000;
    }
.bo_title .list-preview { 
    display: block; 
    font-size: 0.9em; 
    color: #999; 
    line-height: 1.6; 
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

blockquote.se2_quote2 {
    display: table !important;
    margin: 20px auto !important;
    position: relative !important;
    padding: 10px 10px 10px 50px !important;
    border: 0 !important;
    background: none !important;
    text-indent: 0 !important;
    min-width: 50px;
text-align: left;
}

blockquote.se2_quote2 p {
    display: inline-block !important;
vertical-align: middle;
    text-align: inherit;
    margin: 0 !important;
    text-indent: 0 !important;
}

blockquote.se2_quote2::before {
    content: "\201C" !important;
    position: absolute !important;
    left: 10px !important;
    top: 2px !important;
    font-size: 70px !important;
    color: #777 !important;
    font-family: Georgia, serif !important;
    z-index: 999 !important;
    line-height: 1 !important;
}

blockquote.se2_quote2[style*="text-align: left"],
blockquote.se2_quote2:has(p[style*="text-align: left"]) {
    margin-left: 0.8em !important;
    margin-right: auto !important;
}
blockquote.se2_quote2[style*="text-align: right"],
blockquote.se2_quote2:has(p[style*="text-align: right"]) {
    margin-left: auto !important;
    margin-right: 0.8em !important;
}

.view-font-control button {
    width: 40px; 
    height: 25px;
    color: #555;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    padding: 0;
    vertical-align: middle;
    border: none;
    background: #EEF0F0;
    cursor: pointer;
}

.view-font-control button:hover {
    background-color: #e2e6ea;
}

.light-mode .emoji {
    color: #555 !important;
}

.dark-mode .comment-extra input::placeholder {
    color: #999 !important;
    opacity: 1;
}

.dark-mode .comment-extra input:-ms-input-placeholder {
    color: #999 !important;
}

.dark-mode .comment-extra input::-ms-input-placeholder {
    color: #999 !important;
}

html.light-mode,
body.light-mode {
    background: #fff;
    color: #555;
}



body.light-mode #header .gnb_1da,
body.light-mode #header .gnb_1da a {
    color: #555 !important;
}

body.light-mode .board-viewer,
body.light-mode .board-viewer.theme-box,
body.light-mode #bo_v_con {
    background: #fff;
    color: #555;
}

body.light-mode .subject strong {
    color: #555;
}

body.light-mode .view-subtitle {
    color: #555;
}

body .info,
body .sv_member {
    color: #999;
}
body.light-mode .info,
body.light-mode .sv_member {
    color: #777;
}


body.light-mode a {
    color: #333;
}


body.dark-mode #bo_v_con {
    color: #e3e3e2; 
}
body.dark-mode #bo_v_con span, 
body.dark-mode #bo_v_con p, 
body.dark-mode #bo_v_con div {
    color: inherit; 
}

body.light-mode #bo_v_con {
    color: #555;
}
body.light-mode #bo_v_con span, 
body.light-mode #bo_v_con p, 
body.light-mode #bo_v_con div {
    color: inherit;
}


body.light-mode .nav-title {
    color: #333;
}

body.light-mode .nav-subtitle {
    color: #777;
}

body.light-mode .board-comment-list {
    color: #555;
}

body.light-mode .board-comment-list.theme-box {
    background: #fff;
}

body.light-mode input,
body.light-mode textarea,
body.light-mode select {
    background: #fff;
    color: #555;
}

body.light-mode .required,
body.light-mode .frm_file,
body.light-mode .frm_input.full {
    border: 1px solid rgb(227,227,226);
}
body.light-mode .ui-btn {
    background: #fff;
    color: #555;
    border: 1px solid #fff;
}

body.light-mode .theme-box {
    border-color: #fff;
}

    body.light-mode #gnb_wrapper {
        background: #fff;
    }

body.light-mode .view-category,
body.light-mode .view-category a {
    color: #777;
}

body.light-mode::-webkit-scrollbar-track {
    background: #f5f5f5;
}

body.light-mode::-webkit-scrollbar-thumb {
    background: #555;
    border-radius: 5px;
}

.light-mode .emoji {
    color: #555 !important;
}

.light-mode .comment-extra input::placeholder {
    color: #555 !important;
    opacity: 1;
}

.light-mode .comment-extra input:-ms-input-placeholder {
    color: #555 !important;
}

.light-mode .comment-extra input::-ms-input-placeholder {
    color: #555 !important;
}

.temp-check {
    width: 20px;
    height: 20px;
    transform: scale(1.3);
    cursor: pointer;
}

.board-skin-basic .td_chk { 
    visibility: hidden;
    opacity: 0;
}

.board-skin-basic .admin-btns { 
    display: none !important; 
}

.edit-mode .td_chk { 
    visibility: visible;
    opacity: 1;
}

.edit-mode .admin-btns { 
    display: inline-block !important; 
}

.edit-mode .btn-hide-edit {
    display: none !important;
}

.ui-btn.fiction {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    height: 32px;
    font-size: 13px;
    font-weight: 500 !important;
    color: #555;
    background-color: #fff;
    border: 1.5px solid #eef0f0;
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
    gap: 4px;
    box-sizing: border-box;
}

.ui-btn.cancel {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px 14px;
    height: 32px;
    font-size: 13px;
    font-weight: 500 !important;
    color: #555;
    background-color: #fff;
    border: 1.5px solid #eef0f0;
    cursor: pointer;
    text-decoration: none;
    vertical-align: middle;
    gap: 4px;
    box-sizing: border-box;
}

.ui-btn.cancel:hover {
background-color: #eef0f0;
}

.edit-mode .ui-btn.cancel {
background-color: #eef0f0;
}

.ui-btn.fiction:hover {
    background-color: #eef0f0;
}

.board-write > dl > dt {
text-align: right;
}

.theme-box {
padding: 20px 10px !important;
}

.light-mode #header {
background-color: #fff;
}

@media screen and (max-width: 768px) {
    .board-viewer.theme-box {
        padding-left: 25px !important;
        padding-right: 25px !important;
        
    }
.light-mode #header {
background-color: #none;
}
}
/* =========================================================
   HOME FIT v3 — current RA0 home design system
   Keeps fiction reader light/dark mode behavior intact.
   ========================================================= */

.board-skin-basic,
#bo_w,
.board-viewer,
.board-comment-list,
.board-comment-write {
    font-family: var(--content-font-family, inherit);
    color: var(--content-font-color, #434343);
}

/* list shell */
.board-skin-basic {
    width: 100%;
}
.board-notice,
.board-skin-basic .theme-box,
.board-write.theme-box {
    background: var(--card-bg-color, #fff);
    border: 1px solid var(--card-border-color, #e5e7eb);
    border-radius: var(--card-border-radius, 10px);
}
.board-notice {
    width: 100%;
    max-width: 100%;
    color: var(--text-muted, #767676);
}
.board-category select,
.board-write input.frm_input,
.board-write select,
.board-write textarea,
.board-comment-write input,
.board-comment-write textarea,
.board-comment-write select {
    background: var(--form-bg-color, #fff);
    color: var(--form-text-color, #434343);
    border: 1px solid var(--form-border-color, #d6d6d6);
    border-radius: var(--form-border-radius, 6px);
    font-family: var(--content-font-family, inherit);
    transition: border-color var(--transition-fast, .15s ease), box-shadow var(--transition-fast, .15s ease);
}
.board-category select:focus,
.board-write input.frm_input:focus,
.board-write select:focus,
.board-write textarea:focus,
.board-comment-write input:focus,
.board-comment-write textarea:focus,
.board-comment-write select:focus {
    outline: none;
    border-color: var(--primary-color, #8D86F2);
    box-shadow: 0 0 0 2px rgb(from var(--primary-color, #8D86F2) r g b / 10%);
}

.avocado-list {
    display: grid;
    gap: 10px;
}
.avocado-list > li {
    position: relative;
    overflow: hidden;
    background: var(--card-bg-color, #fff);
    border: 1px solid var(--card-border-color, #e5e7eb);
    border-radius: var(--card-border-radius, 10px);
    transition: border-color var(--transition-fast, .15s ease), transform var(--transition-fast, .15s ease), box-shadow var(--transition-fast, .15s ease);
}
.avocado-list > li:not(.no-data):hover {
    border-color: rgb(from var(--primary-color, #8D86F2) r g b / 45%);
    box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,.05));
    transform: translateY(-1px);
}
.avocado-list li a.bo_row {
    padding: 14px 16px;
    color: var(--content-font-color, #434343);
    text-decoration: none;
}
.avocado-list li .title-main {
    font-family: var(--title-font-family, var(--content-font-family, inherit));
    color: var(--title-font-color, var(--content-font-color, #434343));
    font-size: 1em;
    font-weight: 600;
}
.avocado-list li .list-subtitle,
.avocado-list li .info,
.avocado-list li .info .date,
.avocado-list li .info .name,
.bo_title .list-preview {
    color: var(--text-muted, #767676);
}
.avocado-list li .highlight,
.comment-count,
.view-status,
.view-status .highlight {
    color: var(--primary-color, #8D86F2);
}
.avocado-list li .highlight,
.view-status .highlight {
    background: rgb(from var(--primary-color, #8D86F2) r g b / 10%);
    border-radius: 999px;
    padding: 2px 7px;
}
.view-status .highlight { color: var(--primary-color, #8D86F2); }
.avocado-list .list-preview .text-area {
    color: var(--text-muted, #767676) !important;
}
.avocado-list .thumb-area > div {
    border-color: var(--card-border-color, #e5e7eb) !important;
    background: var(--container-bg-color, #f7f7f7) !important;
    border-radius: var(--card-border-radius, 8px) !important;
}

/* home-style buttons */
.board-skin-basic .ui-btn,
#bo_w .ui-btn,
.board-viewer .ui-btn,
.board-comment-list .ui-btn,
.board-comment-write .ui-btn,
#temp-layer button {
    min-height: 34px;
    padding: 7px 13px;
    border: 1px solid transparent;
    border-radius: var(--btn-secondary-radius, 6px);
    background: var(--btn-secondary-bg, #f3f4f6);
    color: var(--btn-secondary-text, #555);
    font-family: var(--content-font-family, inherit);
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
    transition: opacity var(--transition-fast, .15s ease), transform var(--transition-fast, .15s ease), border-color var(--transition-fast, .15s ease);
}
.board-skin-basic .ui-btn:hover,
#bo_w .ui-btn:hover,
.board-viewer .ui-btn:hover,
.board-comment-list .ui-btn:hover,
.board-comment-write .ui-btn:hover { opacity: .86; }
.board-skin-basic .ui-btn:active,
#bo_w .ui-btn:active,
.board-viewer .ui-btn:active { transform: translateY(1px); }
.board-skin-basic .ui-btn.point,
#bo_w .ui-btn.point,
#bo_w .btn_submit,
.board-comment-write .btn_submit {
    background: var(--btn-primary-bg, var(--primary-color, #8D86F2));
    color: var(--btn-primary-text, #fff);
    border-color: var(--btn-primary-bg, var(--primary-color, #8D86F2));
    border-radius: var(--btn-primary-radius, 6px);
}

/* write */
.board-write.theme-box {
    padding: 22px;
}
.board-write h3 {
    padding: 8px 0 24px;
    color: var(--title-font-color, var(--content-font-color, #434343));
    font-family: var(--title-font-family, var(--content-font-family, inherit));
    font-size: var(--title-font-size, 24px);
    font-weight: 700;
}
.board-write > dl {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    align-items: start;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border-light, #e9e9e9);
}
.board-write > dl:last-of-type { border-bottom: 0; }
.board-write > dl > dt {
    position: static;
    width: auto;
    line-height: 36px;
    text-align: left;
    color: var(--text-muted, #767676);
    font-size: .9em;
    font-weight: 600;
}
.board-write > dl > dd {
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 36px;
}
.board-write .write-notice {
    margin-bottom: 12px;
    background: var(--container-bg-color, #f7f7f7);
    border-radius: var(--container-border-radius, 8px);
    color: var(--text-muted, #767676);
}
#editor_char_count_display {
    border-color: var(--card-border-color, #ddd) !important;
    background: var(--container-bg-color, #fafafa) !important;
    color: var(--text-muted, #555) !important;
    border-radius: var(--form-border-radius, 6px) !important;
}

/* view: original fictionn reader styling intentionally preserved */
/* comments */
.board-comment-list.theme-box {
    margin-top: 14px;
    padding: 6px 18px;
    background: var(--card-bg-color, #fff);
    border: 1px solid var(--card-border-color, #e5e7eb);
    border-radius: var(--card-border-radius, 10px);
}
.board-comment-list .item {
    padding: 14px 4px;
    border-bottom: 1px solid var(--border-light, #e9e9e9);
}
.board-comment-list .item:last-child { border-bottom: 0; }
.board-comment-list .co-name { padding: 0 0 8px; color: var(--primary-color, #8D86F2); }
.board-comment-list .co-info { color: var(--text-muted, #767676); }
.board-comment-list .item.reply {
    border-left-color: rgb(from var(--primary-color, #8D86F2) r g b / 25%);
    padding-left: 14px;
}
.board-comment-write {
    padding: 16px;
    background: var(--card-bg-color, #fff);
    border: 1px solid var(--card-border-color, #e5e7eb);
    border-radius: var(--card-border-radius, 10px);
}
.board-comment-form textarea,
.comment-input-row textarea { border: 1px solid var(--form-border-color, #d6d6d6); padding: 10px 12px; }

/* temp storage modal: remove the old hard-coded black panel */
#temp-layer {
    background: var(--card-bg-color, #fff) !important;
    color: var(--content-font-color, #434343) !important;
    border: 1px solid var(--card-border-color, #e5e7eb) !important;
    border-radius: var(--card-border-radius, 10px) !important;
    box-shadow: var(--shadow-lg, 0 10px 25px rgba(0,0,0,.12));
}
#temp-layer h3,
#temp-layer label,
#temp-layer .temp-item,
#temp-layer .temp-item strong { color: var(--content-font-color, #434343) !important; }
#temp-layer .temp-item { border-bottom-color: var(--border-light, #e9e9e9) !important; }
#temp-layer .temp-item span,
#temp-layer .temp-item small { color: var(--text-muted, #767676) !important; }
#btn-temp-close,
#btn-temp-delete {
    background: var(--btn-secondary-bg, #f3f4f6) !important;
    color: var(--btn-secondary-text, #555) !important;
    border-radius: var(--btn-secondary-radius, 6px) !important;
}

/* light/dark reader mode: keep the skin's intended full-page reading experience,
   but use the home accent for interactive controls. */
body.light-mode .view-font-control button:hover,
body.dark-mode .view-font-control button:hover,
body.light-mode .comment-count,
body.dark-mode .comment-count {
    color: var(--primary-color, #8D86F2);
}

@media (max-width: 768px) {
    .board-write.theme-box,
    .board-viewer.theme-box { padding: 16px; }
    .board-write > dl { grid-template-columns: 1fr; gap: 2px; }
    .board-write > dl > dt { line-height: 1.6; padding-top: 4px; }
    .avocado-list li a.bo_row { padding: 12px; }
    .view-nav { grid-template-columns: 1fr; }
    .board-comment-list.theme-box,
    .board-comment-write { padding: 12px; }
}


/* v6: fictionn 댓글 기본 접힘 */
.fiction-comment-section{margin-top:18px;}
.fiction-comment-toggle{display:inline-flex!important;align-items:center;gap:6px;}
.fiction-comment-count{font-size:.9em;opacity:.7;}
.fiction-comment-body[hidden]{display:none!important;}
.fiction-comment-body{margin-top:12px;}


/* fictionn v8: reader isolation + font preset + compact BGM */
body.light-mode{background:#fff!important;background-image:none!important;}
body.dark-mode{background:#151515!important;background-image:none!important;}
body.light-mode .board-viewer{background:#fff!important;}
body.dark-mode .board-viewer{background:#151515!important;}
#bo_v_con.fiction-font-gothic{font-family:var(--content-font-family,"Pretendard","Noto Sans KR",Arial,sans-serif);}
#bo_v_con.fiction-font-myeongjo{font-family:"Noto Serif KR","Nanum Myeongjo","Batang",serif;}
/* 에디터가 span/font 등에 직접 지정한 font-family는 상위 기본값보다 우선합니다. */
.fiction-field-help{display:block;margin-top:5px;color:var(--text-muted-color,#888);font-size:11px;line-height:1.5;}
.fiction-bgm-title-input{margin-top:6px!important;}
.fiction-bgm-dock{position:fixed;left:max(14px,env(safe-area-inset-left));bottom:18px;z-index:100000;width:44px;height:44px;}
.fiction-bgm-toggle{display:flex;width:44px;height:44px;align-items:center;justify-content:center;border:1px solid var(--card-border-color,#ddd);border-radius:50%;background:var(--card-bg-color,#fff);box-shadow:0 8px 26px rgba(0,0,0,.15);color:var(--primary-color,#555);font-size:18px;cursor:pointer;transition:.18s ease;}
.fiction-bgm-dock.is-playing .fiction-bgm-toggle{box-shadow:0 0 0 4px color-mix(in srgb,var(--primary-color,#777) 12%,transparent),0 8px 26px rgba(0,0,0,.15);}
.fiction-bgm-panel{position:absolute;left:0;bottom:52px;display:grid;grid-template-columns:minmax(150px,1fr) 34px minmax(95px,135px) 30px;gap:9px;align-items:center;width:min(500px,calc(100vw - 36px));padding:10px 11px 10px 14px;border:1px solid var(--card-border-color,#ddd);border-radius:14px;background:var(--card-bg-color,#fff);box-shadow:0 16px 45px rgba(0,0,0,.18);opacity:0;visibility:hidden;pointer-events:none;transform:translateY(8px) scale(.985);transition:.18s ease;}
.fiction-bgm-dock.is-open .fiction-bgm-panel{opacity:1;visibility:visible;pointer-events:auto;transform:none;}
.fiction-bgm-info{min-width:0;}.fiction-bgm-info span{display:block;color:var(--text-muted-color,#999);font-size:8px;letter-spacing:.12em}.fiction-bgm-info strong{display:block;overflow:hidden;margin-top:2px;text-overflow:ellipsis;white-space:nowrap;font-size:11px;color:var(--text-color,#333)}
.fiction-bgm-play,.fiction-bgm-link{display:flex;width:30px;height:30px;align-items:center;justify-content:center;border:1px solid var(--card-border-color,#ddd);border-radius:8px;background:transparent;color:var(--text-color,#333);text-decoration:none;cursor:pointer}.fiction-bgm-volume{display:grid;grid-template-columns:auto 1fr;gap:6px;align-items:center;color:var(--text-muted-color,#888);font-size:8px}.fiction-bgm-volume input{width:100%;}.fiction-bgm-panel iframe,#fictionYoutubePlayer,#fictionAudioPlayer{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important;}
@media(max-width:650px){.fiction-bgm-dock{left:10px;bottom:12px;width:40px;height:40px}.fiction-bgm-toggle{width:40px;height:40px;font-size:16px}.fiction-bgm-panel{width:min(340px,calc(100vw - 20px));grid-template-columns:minmax(0,1fr) 32px 30px}.fiction-bgm-volume{grid-column:1/-1;grid-row:2}.fiction-bgm-play,.fiction-bgm-link{width:29px;height:29px}}

/* fictionn v8.2 — TRPG-style horizontal BGM dock */
.fiction-bgm-dock{
  position:fixed!important;left:18px!important;top:50%!important;bottom:auto!important;
  z-index:100000!important;width:44px!important;height:44px!important;transform:translateY(-50%)!important;
  font-family:var(--content-font-family,Arial,sans-serif)!important;
}
.fiction-bgm-dock:before{content:"";position:absolute;left:40px;top:50%;width:18px;height:64px;transform:translateY(-50%)}
.fiction-bgm-toggle{
  position:relative!important;display:flex!important;width:44px!important;height:44px!important;min-width:44px!important;
  align-items:center!important;justify-content:center!important;margin:0!important;padding:0!important;
  border:1px solid var(--card-border-color,#ddd)!important;border-radius:50%!important;
  background:rgba(255,255,255,.97)!important;box-shadow:0 8px 26px rgba(0,0,0,.16)!important;
  color:var(--text-color,#555)!important;font-size:18px!important;line-height:1!important;cursor:pointer!important;
  backdrop-filter:blur(10px);transition:.18s ease!important;
}
.fiction-bgm-toggle:hover,.fiction-bgm-dock:focus-within .fiction-bgm-toggle,.fiction-bgm-dock.is-open .fiction-bgm-toggle{
  background:var(--primary-color,#888)!important;color:#fff!important;transform:translateY(-1px)!important;
}
.fiction-bgm-dock.is-playing .fiction-bgm-toggle{box-shadow:0 0 0 4px color-mix(in srgb,var(--primary-color,#888) 12%,transparent),0 10px 30px rgba(0,0,0,.18)!important}
.fiction-bgm-panel{
  position:absolute!important;left:54px!important;right:auto!important;top:50%!important;bottom:auto!important;
  display:grid!important;grid-template-columns:minmax(180px,1fr) 34px minmax(105px,145px) 30px!important;
  align-items:center!important;gap:9px!important;width:min(510px,calc(100vw - 90px))!important;
  min-height:54px!important;margin:0!important;padding:8px 10px 8px 14px!important;
  border:1px solid var(--card-border-color,#ddd)!important;border-radius:14px!important;
  background:rgba(255,255,255,.97)!important;box-shadow:0 12px 34px rgba(0,0,0,.16)!important;
  opacity:0!important;visibility:hidden!important;pointer-events:none!important;
  transform:translate(-8px,-50%) scale(.985)!important;transform-origin:left center!important;
  transition:opacity .18s ease,transform .18s ease,visibility .18s ease!important;backdrop-filter:blur(12px);
}
.fiction-bgm-dock:hover .fiction-bgm-panel,.fiction-bgm-dock:focus-within .fiction-bgm-panel,.fiction-bgm-dock.is-open .fiction-bgm-panel{
  opacity:1!important;visibility:visible!important;pointer-events:auto!important;transform:translate(0,-50%) scale(1)!important;
}
.fiction-bgm-info{display:block!important;min-width:0!important;margin:0!important;padding:0!important;line-height:1.2!important}
.fiction-bgm-info span{display:block!important;margin:0 0 2px!important;color:var(--text-muted-color,#999)!important;font:700 8px/1.1 Arial,sans-serif!important;letter-spacing:.14em!important}
.fiction-bgm-info strong{display:block!important;overflow:hidden!important;margin:0!important;color:var(--text-color,#333)!important;font-size:11px!important;font-weight:700!important;line-height:1.35!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.fiction-bgm-play,.fiction-bgm-link{
  display:flex!important;width:30px!important;height:30px!important;min-width:30px!important;align-items:center!important;justify-content:center!important;
  margin:0!important;padding:0!important;border:1px solid var(--card-border-color,#ddd)!important;border-radius:8px!important;
  background:#fff!important;color:var(--text-color,#444)!important;text-decoration:none!important;font-size:12px!important;line-height:1!important;cursor:pointer!important;
}
.fiction-bgm-play:hover,.fiction-bgm-link:hover{background:var(--primary-color,#888)!important;border-color:var(--primary-color,#888)!important;color:#fff!important}
.fiction-bgm-volume{display:grid!important;grid-template-columns:auto minmax(70px,1fr)!important;gap:6px!important;align-items:center!important;margin:0!important;color:var(--text-muted-color,#888)!important;font:700 8px/1 Arial,sans-serif!important;white-space:nowrap!important}
.fiction-bgm-volume input[type="range"]{display:block!important;width:100%!important;height:auto!important;margin:0!important;padding:0!important;accent-color:var(--primary-color,#888)!important}
.fiction-bgm-panel iframe,#fictionYoutubePlayer,#fictionAudioPlayer{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important;overflow:hidden!important}
@media(max-width:650px){
 .fiction-bgm-dock{left:10px!important;top:calc(10px + env(safe-area-inset-top))!important;bottom:auto!important;width:40px!important;height:40px!important;transform:none!important}
 .fiction-bgm-dock:before{left:36px!important;top:0!important;width:14px!important;height:44px!important;transform:none!important}
 .fiction-bgm-toggle{width:40px!important;height:40px!important;min-width:40px!important;font-size:16px!important}
 .fiction-bgm-panel{left:48px!important;top:0!important;width:min(330px,calc(100vw - 68px))!important;grid-template-columns:minmax(0,1fr) 30px 28px!important;gap:7px!important;padding:8px 9px!important;transform:translateX(-6px) scale(.985)!important}
 .fiction-bgm-dock:hover .fiction-bgm-panel,.fiction-bgm-dock:focus-within .fiction-bgm-panel,.fiction-bgm-dock.is-open .fiction-bgm-panel{transform:none!important}
 .fiction-bgm-volume{grid-column:1/-1!important;grid-row:2!important}
 .fiction-bgm-play,.fiction-bgm-link{width:28px!important;height:28px!important;min-width:28px!important}
}

/* fictionn dark reader: 본문만 별도 검정 박스로 분리되지 않도록 페이지 배경을 그대로 사용 */
body.dark-mode #bo_v_con {
    background: transparent !important;
    background-color: transparent !important;
}


/* fictionn blog body images: compact [이미지1], [이미지2] uploader */
.fiction-image-toolbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    margin:0 0 7px;
}
.fiction-image-help-inline{
    min-width:0;
    color:var(--text-muted-color,#777);
    font-size:11px;
    line-height:1.45;
}
.fiction-image-help-inline code{
    padding:1px 5px;
    border-radius:5px;
    background:var(--container-bg-color,#f4f4f5);
    color:var(--primary-color,#6f68d9);
    font-family:monospace;
    font-size:10px;
}
.fiction-image-add{
    flex:0 0 auto;
    width:28px;
    height:28px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0;
    border:1px solid var(--card-border-color,#ddd);
    border-radius:50%;
    background:var(--card-bg-color,#fff);
    color:var(--primary-color,#7068dc);
    font:600 18px/1 var(--content-font-family,sans-serif);
    cursor:pointer;
}
.fiction-image-add:hover{
    border-color:var(--primary-color,#7068dc);
    background:color-mix(in srgb,var(--primary-color,#7068dc) 7%,var(--card-bg-color,#fff));
}
.fiction-image-slots{
    display:grid;
    gap:6px;
}
.fiction-image-slot{
    display:grid;
    grid-template-columns:26px minmax(0,1fr) minmax(0,1.15fr) auto;
    align-items:center;
    gap:6px;
    padding:6px 7px;
    border:1px solid var(--card-border-color,#e4e4e7);
    border-radius:8px;
    background:var(--card-bg-color,#fff);
    box-sizing:border-box;
}
.fiction-image-slot[hidden]{
    display:none!important;
}
.fiction-image-number{
    width:26px;
    height:26px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    background:var(--container-bg-color,#f4f4f5);
    color:var(--text-muted-color,#777);
    font-size:10px;
    font-weight:700;
}
.fiction-image-file-cell,
.fiction-image-link-cell{
    min-width:0;
    display:grid;
    grid-template-columns:auto minmax(0,1fr);
    align-items:center;
    gap:6px;
}
.fiction-image-cell-label{
    color:var(--text-muted-color,#777);
    font-size:10px;
    white-space:nowrap;
}
.fiction-image-slot .fiction-image-file,
.fiction-image-slot .fiction-external-image{
    min-width:0;
    width:100%;
    height:32px;
    box-sizing:border-box;
    margin:0;
    font-size:11px;
}
.fiction-image-slot .fiction-image-file{
    padding:3px 5px;
}
.fiction-image-slot .fiction-external-image{
    padding:5px 8px;
}
.fiction-image-insert{
    flex:0 0 auto;
    height:30px;
    padding:0 8px;
    border:1px solid var(--card-border-color,#ddd);
    border-radius:7px;
    background:var(--container-bg-color,#f7f7f8);
    color:var(--primary-color,#7068dc);
    font:600 10px/1.2 var(--content-font-family,sans-serif);
    white-space:nowrap;
    cursor:pointer;
}
.fiction-image-insert:hover{
    border-color:var(--primary-color,#7068dc);
    background:color-mix(in srgb,var(--primary-color,#7068dc) 8%,var(--card-bg-color,#fff));
}
.fiction-image-existing{
    grid-column:2 / -1;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:8px;
    margin-top:-1px;
    color:var(--text-muted-color,#777);
    font-size:10px;
    line-height:1.35;
}
.fiction-image-existing span{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
}

#bo_v_con .fiction-body-image{
    display:block;width:fit-content;max-width:100%;margin:1.75em auto;line-height:0;text-indent:0!important;
}
#bo_v_con .fiction-body-image img{
    display:block;width:auto;max-width:100%;height:auto;margin:0 auto;border:0;border-radius:0;box-shadow:none;
}
#bo_v_con .fiction-body-image[data-image-kind="external"] img{max-width:100%}

@media(max-width:780px){
    .fiction-image-slot{
        grid-template-columns:24px minmax(0,1fr) auto;
    }
    .fiction-image-file-cell,
    .fiction-image-link-cell{
        grid-column:2;
    }
    .fiction-image-insert{
        grid-column:3;
        grid-row:1 / span 2;
        align-self:stretch;
        height:auto;
    }
    .fiction-image-existing{
        grid-column:2 / -1;
    }
}
@media(max-width:520px){
    .fiction-image-toolbar{
        align-items:flex-start;
    }
    .fiction-image-slot{
        grid-template-columns:22px minmax(0,1fr);
    }
    .fiction-image-number{
        width:22px;
        height:22px;
    }
    .fiction-image-file-cell,
    .fiction-image-link-cell,
    .fiction-image-existing{
        grid-column:2;
    }
    .fiction-image-insert{
        grid-column:2;
        grid-row:auto;
        justify-self:end;
        height:28px;
    }
    #bo_v_con .fiction-body-image{margin:1.35em auto}
}


/* 게시글 링크 복사 버튼 */
.view-font-control .fiction-share-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-width: 52px;
}
.view-font-control .fiction-share-icon {
    width: 13px;
    height: 13px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.view-font-control .fiction-share-link.is-copied {
    color: var(--primary-color, #777);
    border-color: color-mix(in srgb, var(--primary-color, #777) 45%, transparent);
}
.view-font-control .fiction-share-link.is-error {
    color: #c85b5b;
}
@media (max-width: 520px) {
    .view-font-control .fiction-share-link {
        min-width: 34px;
        padding-left: 7px;
        padding-right: 7px;
    }
    .view-font-control .fiction-share-link .fiction-share-label {
        display: none;
    }
}


/* 게시글 삭제 버튼 */
.bo_v_com .fiction-delete-btn {
    color: color-mix(in srgb, #c85b5b 82%, var(--content-font-color, #333));
}
.bo_v_com .fiction-delete-btn:hover,
.bo_v_com .fiction-delete-btn:focus-visible {
    color: #c85b5b;
    border-color: color-mix(in srgb, #c85b5b 48%, var(--card-border-color, #ddd));
    background: color-mix(in srgb, #c85b5b 8%, transparent);
    outline: none;
}