@charset "utf-8";

#loading {
	position:fixed; width:100%; height:100%; left:0; top:0; right:0; bottom:0; background:rgba(0, 0, 0, 0.4) url(../skin_images/loading.gif) no-repeat center; z-index:9999; display:none;
}

/*iframe {position:relative !important; z-index:0 !important;}*/

#bbs_container {box-sizing:border-box;}
#bbs_container #note_wrap {display:flex; margin:0; height:100vh; overflow:hidden; background:#f0f2f5;}

/* 카테고리 섹션 (좌측) */
#bbs_container #side-nav {width:240px; padding:0 10px; background:#fff; border-right:1px solid #ddd; display:flex; flex-direction:column;}
#bbs_container #side-nav h3 {font-size:1.5rem; margin-top:10px;}

#bbs_container #side-nav .nav-header {padding:20px 0 10px; border-bottom:1px solid #eee;}
#bbs_container #side-nav .nav-header p {margin:0 0 6px; font-size:1.2rem; font-weight:400;}
#bbs_container #side-nav .nav-header p span {display:inline-block; color:#6666ff; font-weight:500; margin-top:-4px;}
#bbs_container #side-nav .nav-header button {
    width:calc(100%); cursor:pointer; padding:8px; background:#004d80; color:#fff; font-size:1.1rem; font-weight:600; transition:0.2s;
}
#bbs_container #side-nav .nav-header button:hover {background:#003152; transition:0.2s;}

#bbs_container #category-tree-container {flex:1; overflow-y:auto; padding:10px;}
#bbs_container #category-tree-container p {padding:20px; font-size:1.1rem; color:#999;}
#bbs_container #category-tree-container .item-message {text-align:center; font-size:1.2rem; color:#616161; margin-top:15px;}

/* 섹션 트리 스타일 */
#bbs_container ul.ct-tree {list-style:none; padding-left:10px; margin:4px 0;}
#bbs_container ul.ct-tree:first-child {padding-left:0px;}

/* 하위 트리(2차 이상)는 기본적으로 숨김 */
#bbs_container ul.ct-tree ul.ct-tree {display:none;}

/* 현재 선택된 섹션의 직계 하위 트리는 보여줌 */
#bbs_container li.open > ul.ct-tree {display:block;}

#bbs_container .category-header {display:flex; align-items:center; gap:4px;}
#bbs_container .category-pages .no-pages {font-size:1.0rem; padding:8px 6px; cursor:pointer;}

#bbs_container ul.ct-tree .item-row {
    display:flex; align-items:center; padding:8px 6px; cursor:pointer; border-radius:4px; transition:0.2s; position:relative;
    border:1px solid #ebebeb; border-left:5px solid #999; flex:1;
}

/* 드롭 타겟 강조 */
#bbs_container ul.ct-tree .item-row.drag-over {background:#fff1b8 !important; border:1px solid #ffa940 !important; transition: all 0.1s ease;}

#bbs_container ul.ct-tree .item-row::before {display:inline-block; content:"📁"; font-size:1.6rem; vertical-align:middle; padding:0 4px; margin-top:-3px;}
#bbs_container ul.ct-tree .item-row:hover {background:#f5f5f5;}
#bbs_container ul.ct-tree .item-row.current {background:#e6f7ff; border:1px solid #91d5ff;}
#bbs_container ul.ct-tree .item-row input.cname-edit {width:40px; border:1px solid transparent; background:transparent; flex:1; font-size:1.1rem; padding:3px;}
#bbs_container ul.ct-tree .item-row input.cname-edit:focus {border:1px solid #40a9ff; background:#fff; outline:none;}
#bbs_container ul.ct-tree .item-row input.cname-edit:read-only {
	flex:none !important; display:inline-block; width:auto; min-width:0 !important; max-width:fit-content; field-sizing:content; border:none; outline:none; background:none;
}
#bbs_container ul.ct-tree .item-row .btn-group {display:none;}
#bbs_container ul.ct-tree .item-row:hover .btn-group {display:flex;}
#bbs_container ul.ct-tree .item-row button.btn-sm {cursor:pointer; border:1px solid #d9d9d9; background:#fff; border-radius:2px; padding:0 6px; margin-left:2px;}
#bbs_container ul.ct-tree .item-row button.btn-del:hover {background:#ff4d4f; color:#fff; border-color:#ff4d4f;}

/* 서브 트리 스타일 (게시물/페이지 목록) */
#bbs_container ul.ct-tree .category-pages {margin-left:10px; margin-top:3px;}
#bbs_container ul.ct-tree .page-item-side {
    padding:6px 6px; cursor:pointer; font-size:1.1rem; border:1px solid #ebebeb; border-radius:4px; background:#f7f7f7;
	display:flex; justify-content:space-between; align-items:center; transition:background 0.2s;
}

/* 드래그 중인 아이템 */
#bbs_container ul.ct-tree .page-item-side.dragging {opacity:0.4; border:1px dashed #1890ff !important;}

#bbs_container ul.ct-tree .page-item-side::before {display:inline-block; content:"📄"; margin-right:4px; font-size:1.4rem; vertical-align:middle;}
#bbs_container ul.ct-tree .page-item-side:hover {background-color:#f0f7ff; color:#1890ff;}
#bbs_container ul.ct-tree .page-item-side.active {color:#0050b3; font-weight:500;}
#bbs_container ul.ct-tree .page-item-side.active::before {color:#2196f3;}
#bbs_container ul.ct-tree .page-item-side .page-title {text-align:left; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1;}
#bbs_container ul.ct-tree .page-item-side .page-date {font-size:0.75rem; color:#bbb; margin-left:10px;}
#bbs_container ul.ct-tree .page-item-side input[name="secret"] {
	appearance:none; -webkit-appearance:none; width:20px; height:20px; cursor:pointer; display:inline-flex; align-items:center; justify-content:center;
	outline:none; border:none; background:transparent;
}
#bbs_container ul.ct-tree .page-item-side input[name="secret"]::before {display:inline-block; color:#b2b2b2; width:20px; height:20px; line-height:18px;}
#bbs_container ul.ct-tree .page-item-side input[name="secret"]:checked::before {color:#330b74;}

/* 텍스트 드래그 선택 방지 */
#bbs_container ul.ct-tree .item-row, 
#bbs_container ul.ct-tree .page-item,
#bbs_container ul.ct-tree .page-item-side {
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select:none; user-select:none;
}


/* 페이지 컨텐츠 */
#bbs_container #note_wrap .note_contents {display:flex; flex:1; overflow:hidden; position:relative; min-width:0;}

/* 페이지 영역 (중앙) */
#bbs_container #section-title {width:300px; display:flex; flex-direction:column; background:#fdfdfd;}
#bbs_container #section-title .bbs_top {padding:15px;}
#bbs_container #section-title .bbs_search {width:100%; height:26px; display:flex; gap:0; font-size:1.1rem; box-sizing:border-box;}
#bbs_container #section-title .bbs_search input[name="search"] {flex:1; border:1px solid #d2d2d2; text-indent:10px; min-width:0;}
#bbs_container #section-title .bbs_search input[name="search"]::placeholder {color:#09C; font-size:1.1rem;}
#bbs_container #section-title .bbs_search button {flex:0 0 50px; font-size:1.1rem; color:#fff; background:#111; cursor:pointer;}

#bbs_container #section-title .page-list-header {padding:15px; border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center; background:#eeeff0;}
#bbs_container #section-title .page-list-header h4 {font-size:1.1rem; color:#555; margin:0;}
#bbs_container #section-title .btn-add-page {padding:3px 8px; font-size:0.9rem; background:#fff; border:1px solid #ccc; cursor:pointer; border-radius:3px;}
#bbs_container #section-title .btn-add-page:hover {background: #eee;}

#bbs_container #page-list-container {flex:1; overflow-y:auto;}
#bbs_container #page-list-container .page-item {padding:8px 6px; border-bottom:1px solid #f1f1f1; cursor:pointer; transition:background 0.2s;}

/* 드래그 중인 아이템 */
#bbs_container #page-list-container .page-item.dragging {opacity:0.4; border:1px dashed #1890ff !important; background-color:#f0f7ff !important;}

/* 마우스가 올라간 섹션 트리 */
#bbs_container #page-list-container .item-row.drag-over {background:#fff1b8 !important; border:1px solid #ffa940 !important; box-shadow:0 0 5px rgba(255,169,64,0.7);}


#bbs_container #page-list-container .page-item:hover {background:#f0f7ff;}
#bbs_container #page-list-container .page-item.active {background:#eef6ff; border-left: 5px solid #004d80;}
#bbs_container #page-list-container .page-item .p-title {
	display:block; font-size:1.1rem; color:#333; font-weight:500; white-space:nowrap; overflow:hidden;text-overflow:ellipsis;
}
#bbs_container #page-list-container .page-item .p-date {font-size:0.85rem; color:#666; margin-top:4px; display:block;}
#bbs_container #page-list-container .empty-msg {padding:30px 10px; text-align:center; color:#818181; font-size:1.1rem;}

/* 에디터 영역 (우측) */
#bbs_container #editor-area {flex:1; display:flex; flex-direction:column; border-left:1px solid #d2d2d2; min-width:0;}
#bbs_container #editor-area .editor-container {
	display:flex; flex-direction:column; height:calc(100vh); background:#fff; padding:20px 20px; position:relative; overflow-y:auto; min-width:0;
}

#bbs_container .note_contents button.btn-modal-close {display:none;}

/* 로딩 후 커서 숨김처리 */
.editor-container .editor-overlay ~ #toast-editor .toastui-editor-contents,
.editor-container .editor-overlay ~ #toast-editor .ProseMirror {caret-color:transparent !important; outline:none !important; user-select:none;}
#bbs_container #editor-area .editor-container .editor-overlay {
	position:absolute; top:0; left:0; right:0; bottom:0; background:rgba(0, 0, 0, 0.6); display:flex; align-items:center; justify-content:center; z-index:20;
	font-size:1.4rem; font-weight:500; color:#fff;
}
#bbs_container #editor-area .editor-container .editor-overlay i {margin-right:4px; font-size:3.0rem; font-weight:400;}
.editor-container:has(.editor-overlay) #toast-editor .toastui-editor-contents,
.editor-container:has(.editor-overlay) #toast-editor .ProseMirror,
.editor-container:has(.editor-overlay) #toast-editor * {
	caret-color:transparent !important; outline:none !important; -webkit-user-modify:read-only !important;
}
#post-title:disabled {caret-color:transparent !important;}

#bbs_container #editor-area .editor-container .editor-top {position:relative;}
#bbs_container #editor-area .editor-container .editor-top .selected-info {font-size:1.2rem;}
#bbs_container #editor-area .editor-container .editor-top .editor-buttons {position:absolute; top:0; right:0; z-index:10;}
#bbs_container #editor-area .editor-container .editor-top .editor-buttons button {width:42px; height:20px; line-height:20px; display:inline-block; font-size:0.9rem; color:#fff; border:none; cursor:pointer;}
#bbs_container #editor-area .editor-container .editor-top button.btn-save {background:#111;}
#bbs_container #editor-area .editor-container .editor-top button.btn-del-page {background:#ff4d4f;}

#bbs_container #editor-area .editor-container .post-title {border-bottom:1px solid #919191; margin:8px 0 10px; padding-bottom:8px;}
#bbs_container #editor-area .editor-container .post-title input[name="title"] {
	display:block; width:100%; border:none; font-size:1.8rem; font-weight:500; letter-spacing:-1px;
}
#bbs_container #editor-area .editor-container .post-title input[name="title"]::placeholder {font-size:1.8rem; font-weight:500; color:#09C; letter-spacing:-1px;}
#bbs_container #editor-area .editor-container #toast-editor {flex:1; width:100%;}
#bbs_container #editor-area .editor-container .toastui-editor-defaultUI {display:flex; flex-direction:column; height:100% !important;}
#bbs_container #editor-area .editor-container .toastui-editor-main {flex:1;}
#bbs_container #editor-area .editor-container .toastui-editor-mode-switch {position:relative;}
#bbs_container #editor-area .editor-container .save-status {display:inline-block; position:absolute; left:10px; top:8px; font-size:1.1rem; color:#818181;}

/* BBS Paging */
#bbs_container .board-pagination {margin:80px 0 20px; text-align:center;}
#bbs_container .board-pagination ul {display:inline-flex; gap:6px; font-size:0;}
#bbs_container .board-pagination li {display:inline-block;}
#bbs_container .board-pagination a {
	display:inline-block; padding:6px 10px; text-decoration:none; border:1px solid #ddd; border-radius:4px;
	font-size:1.6rem; font-family:Arial, Helvetica, sans-serif; font-weight:400 !important;
}
#bbs_container .board-pagination .active span {font-weight:bold; padding:6px 10px; border:1px solid #333; background:#f5f5f5;}
#bbs_container .board-pagination .disabled span {color:#aaa; border:1px solid #f0f0f0; padding:6px 10px;}

#bbs_container ul#bbs_paging li.numbox::nth-child(1){margin-left:0 !important;}
#bbs_container ul#bbs_paging li.prev {background:#fff url('img/btn_paging_prev.png') no-repeat center;}
#bbs_container ul#bbs_paging li.next {background:#fff url('img/btn_paging_next.png') no-repeat center;}
#bbs_container ul#bbs_paging li.start {background:#fff url('img/btn_paging_start.png') no-repeat center;}
#bbs_container ul#bbs_paging li.end {background:#fff url('img/btn_paging_end.png') no-repeat center;}
#bbs_container ul#bbs_paging li.current {font-weight:600 !important; color:#000;}

.page_box {padding:2px 0px; background:#333; color:#FFF; font-family:Arial, Helvetica, sans-serif; font-size:1.2rem;}

/* 소셜링크 */
#bbs_container .bbs_view_wrap .SocialLink {position:relative;}
#bbs_container .bbs_view_wrap .SocialLink button.share_button {display:flex; width:38px; height:38px; border:1px solid #d2d2d2; border-radius:19px; align-items:center; justify-content:center;}
#bbs_container .bbs_view_wrap .SocialLink button.share_button i {font-size:1.4rem; color:#717171; font-weight:400;}
#bbs_container .bbs_view_wrap .SocialLink.active button.share_button,
#bbs_container .bbs_view_wrap .SocialLink button.share_button:hover {border-color:#5581e0; background:#5581e0;}
#bbs_container .bbs_view_wrap .SocialLink.active button.share_button i,
#bbs_container .bbs_view_wrap .SocialLink button.share_button:hover i {font-weight:500; color:#fff !important;}
#bbs_container .bbs_view_wrap .SocialLink dl {
    display:none; position:absolute; width:260px; height:200px; right:10px; top:40px; box-sizing:border-box; padding:20px;
    background:#fff; border-radius:20px; border:1px solid #ebebeb; box-shadow:4px 4px 4px rgba(100,100,100,0.2);
}
#bbs_container .bbs_view_wrap .SocialLink.active dl {display:block;}
#bbs_container .bbs_view_wrap .SocialLink dl dt {font-size:1.4rem; color:#515151; font-weight:400;}
#bbs_container .bbs_view_wrap .SocialLink dl dd {margin-top:10px;}
#bbs_container .bbs_view_wrap .SocialLink dl dd button {
    width:49px; height:49px; border-radius:50%; border:none; outline:none; margin:10px; background-size:cover !important; display:inline-block;
    background-position:center !important; background-repeat:no-repeat !important; font-size:1.6rem;
}
#bbs_container .bbs_view_wrap .SocialLink dl dd button.close {position:absolute; right:-12px; top:-12px;}
#bbs_container .bbs_view_wrap .SocialLink dl dd button.close i {color:#818181;}
#bbs_container .bbs_view_wrap .SocialLink dl dd button.ico_facebook {background:url(../skin_images/sns_facebook.png)}
#bbs_container .bbs_view_wrap .SocialLink dl dd button.ico_twitter {background:url(../skin_images/sns_twitter.png)}
#bbs_container .bbs_view_wrap .SocialLink dl dd button.ico_kakao {background:url(../skin_images/sns_kakaotalk.png)}
#bbs_container .bbs_view_wrap .SocialLink dl dd button.ico_naver {background:url(../skin_images/sns_naver.png)}
#bbs_container .bbs_view_wrap .SocialLink dl dd button.ico_band {background:url(../skin_images/sns_band.png)}
#bbs_container .bbs_view_wrap .SocialLink dl dd button.ico_urlcopy {background:#717171;}
#bbs_container .bbs_view_wrap .SocialLink dl dd button.ico_urlcopy i {color:#fff !important;}

/* Password */
#divBoardPass {width:100%; height:100%; position:fixed; top:0; left:0; background:url(../skin_images/bg_pattern.png); z-index:9999;}
#divBoardPass .password_form {width:300px; height:90px; position:absolute; left:50%; top:50%; margin:-45px 0 0 -150px; padding:10px 20px 20px; background:#fff; border-radius:10px;}
#divBoardPass .password_form p.close_bt {text-align:right;}
#divBoardPass .password_form span.close_bt a img {border:none; vertical-align:top;}
#divBoardPass ul.password_box {overflow:hidden; list-style:none; margin:10px 0 0; padding:0;}
#divBoardPass ul.password_box li.th {width:80%; float:left;}
#divBoardPass ul.password_box li.th h2 {font-family:Arial, Helvetica, sans-serif; font-size:1.4rem; color:#212121; font-weight:600; margin:0 0 8px 0; padding:0;}
#divBoardPass ul.password_box li.th input {width:99%; border:1px solid #d2d2d2; height:24px; line-height:24px; border-radius:4px;}
#divBoardPass ul.password_box li.td {width:20%; float:left; text-align:right;}
#divBoardPass ul.password_box li input.submit {
	width:52px; height:52px; border:none; background:#292929 url(../skin_images/bt_pattern01.gif); color:#fff; font-size:1.2rem; text-align:center;
	cursor:pointer; display:inline-block; zoom:1; border-radius:6px;
}

@media screen and (max-width:1106px) {
	#bbs_container #note_wrap {height:calc(100vh - 84px);} /* 부모창 padding 상/하 영역 조절*/
	#bbs_container #side-nav {width:200px;}
	#bbs_container #section-title {width:240px;}
	#bbs_container #section-title .bbs_search button {flex:0 0 44px; font-size:1.0rem;}
	#bbs_container #editor-area {}
	#bbs_container #editor-area .editor-container {}
}

@media screen and (max-width:820px) {
	#bbs_container #note_wrap {height:auto; overflow-y:auto;}
	#bbs_container .note_contents {display:flex; flex-grow:1; flex-direction:column; height:auto; overflow:visible;}
	#bbs_container #section-title {width:100%; height:auto; flex:none; border:none;}
	#bbs_container #editor-area {width:100%; display:block; flex:none; flex-direction:unset; border:none;}
	#bbs_container #editor-area .editor-container {height:auto; min-height:500px; overflow:visible;}
	#bbs_container #editor-area .editor-container .post-title input[name="title"],
	#bbs_container #editor-area .editor-container .post-title input[name="title"]::placeholder {font-size:1.6rem;}
	#bbs_container #editor-area .editor-container .editor-overlay {font-size:1.3rem;}
	#bbs_container #editor-area .editor-container .editor-overlay i {margin-right:4px; font-size:2.6rem;}
}

@media screen and (max-width:640px) {
	#bbs_container #editor-area .editor-container .editor-top .selected-info {display:none;}
	#bbs_container #editor-area .editor-container .editor-top .editor-buttons {top:-10px;}
}

@media screen and (max-width:560px) {
	#bbs_container #side-nav {width:160px;}
	#bbs_container #editor-area .editor-container .post-title input[name="title"],
	#bbs_container #editor-area .editor-container .post-title input[name="title"]::placeholder {font-size:1.5rem;}
	#bbs_container #editor-area .editor-container .editor-overlay {font-size:1.2rem;}
	#bbs_container #editor-area .editor-container .editor-overlay i {margin-right:4px; font-size:2.4rem;}
}

@media screen and (max-width:420px) {
	#bbs_container ul.ct-tree .item-row::before {padding:0 6px 0 4px;}

	#bbs_container #note_wrap.modal-open {display:block; height:auto; padding:0 10px; overflow-y:visible;}
	#bbs_container #side-nav {
		display:block; position:fixed; top:0; left:0; flex-direction:unset; width:calc(100%); height:100%; border:none; padding:0; z-index:1; overflow-y:auto;
		-webkit-overflow-scrolling:touch; /* 아이폰 부드러운 스크롤 */
	}
	#bbs_container #side-nav .nav-header {margin-top:60px; padding:0 10px;}
	#bbs_container #side-nav .nav-header button {padding:12px 8px; border-radius:4px;}
	#bbs_container #side-nav ul.ct-tree .item-row {padding:10px 6px;}
	#bbs_container #side-nav ul.ct-tree .item-row::before {font-size:1.3rem;}
	#bbs_container #side-nav ul.ct-tree .page-item-side {padding:8px 6px;}
	#bbs_container #note_wrap .note_contents {display:none;}
	#bbs_container #note_wrap.modal-open .note_contents {
		display:block !important; position:fixed; top:0; left:0; width:calc(100% - 20px); height:100%; padding:0 10px; background:#fff; z-index:50; overflow-y:auto;
		-webkit-overflow-scrolling:touch; /* 아이폰 부드러운 스크롤 */
	}
	#bbs_container #note_wrap.modal-open #section-title {margin-top:100px; position:relative;} /* 부모창 margin 상 영역 조절*/
	#bbs_container #note_wrap.modal-open #section-title button.btn-modal-close {
		display:inline-block; position:absolute; top:-20px; right:10px; font-size:2.6rem; color:#616161; cursor:pointer; z-index:2;
	}
	#bbs_container #note_wrap.modal-open #section-title .bbs_search {height:32px;}
	#bbs_container #note_wrap.modal-open #section-title .bbs_search button {flex:0 0 50px;}
	#bbs_container #note_wrap.modal-open #page-list-container .page-item .p-date {}
    #bbs_container #note_wrap.modal-open #editor-area {padding-bottom:10px;}
	#bbs_container #note_wrap.modal-open #editor-area .editor-top {height:10px; margin-top:15px;}
	#bbs_container #note_wrap.modal-open #editor-area .editor-buttons {display:none;}
	#bbs_container #note_wrap.modal-open #editor-area .save-status {display:none;}
	#bbs_container #note_wrap.modal-open #editor-area .editor-container {height:auto !important; min-height:100%; overflow:visible !important; padding:0;}

	/* TOAST UI Editor 내부 요소들: 높이 고정을 모두 해제 */
    #bbs_container #note_wrap.modal-open .toastui-editor-defaultUI,
    #bbs_container #note_wrap.modal-open .toastui-editor-main,
    #bbs_container #note_wrap.modal-open .toastui-editor-main-container,
    #bbs_container #note_wrap.modal-open .toastui-editor-ww-container,
    #bbs_container #note_wrap.modal-open .toastui-editor-contents,
    #bbs_container #note_wrap.modal-open .ProseMirror {
        height:auto !important; min-height:300px; overflow:visible !important;
    }

	/* TOAST UI Editor 하단 마크다운 텝 숨기기 */
	#bbs_container #note_wrap.modal-open #editor-area .toastui-editor-mode-switch {display:none !important;}
}