@charset "utf-8";
/* ============================================================
   split_250621  —  좌:게시글 / 우:리스트 2분할 게시판 스킨
   제작 레이아웃 기준 (게시글 부분 + 리스트 + 글작성)
   ============================================================ */

.body {    letter-spacing: -0.05em;}

.sb-wrap{
    --sb-accent:#434343;          /* 게시글 영역 강조 (파랑) */
    --sb-accent2:#22a06b;         /* 리스트 영역 강조 (초록) */
    --sb-accent3:#7c4dff;         /* 글작성 영역 강조 (보라) */
    --sb-line:#e3e6ec;
    --sb-bg:#eeeeee;
    --sb-soft:#f6f8fb;
    --sb-text:#222;
    --sb-sub:#8a8f9a;
    --sb-h: min(78vh, 820px);     /* 분할 영역 높이 (내부 스크롤) */
    --sb-listw: clamp(0px, 36%, 420px); /* 리스트 패널 폭 (토글 위치 계산에 공용) */
    --sb-gap:14px;
    --sb-radius:12px;
    box-sizing:border-box;
    width:100%;
    margin:0 auto;
    padding-top:5%;
    color:var(--sb-text);
    font-size:14px;
    line-height:1.5;
}
.sb-wrap *{box-sizing:border-box;}
.pg_wrap {padding: 0px !important;}
.pg_wrap .pg_page {background-color:transparent !important; color:#666666 !important;}
.pg_wrap .pg_current {background-color:transparent !important; color:#222222 !important;}


/* ---------- 상단 툴바 ---------- */
.sb-toolbar{
    display:flex; align-items:center; gap:8px;
    flex-wrap:wrap;
    margin-bottom:12px;
}
.sb-toolbar .sb-title{
    font-size:18px; font-weight:800; letter-spacing:-.3px;
    margin-right:auto;
}
.sb-btn{
    display:inline-flex; align-items:center; gap:5px;
    height:34px; padding:0 14px;
    /* border:1px solid var(--sb-line);  */
	border-radius:50px;
    background:#fff; color:#444; font-size:13px; font-weight:600;
    cursor:pointer; text-decoration:none; line-height:1; white-space:nowrap;
    transition:.15s;
}
.sb-btn:hover{border-color:#c7ccd6; background:var(--sb-soft);}
.sb-btn.point{background:var(--sb-accent); 
	/* border-color:var(--sb-accent);  */
	color:#fff;}
.sb-btn.point:hover{filter:brightness(.95);}
.sb-btn.admin{border-color:#f0c0c0; color:#c0392b;}

/* ---------- 카테고리 ---------- */
.sb-category{margin-bottom:12px;}
.sb-category select{
    height:34px; padding:0 10px; border:1px solid var(--sb-line);
    border-radius:8px; background:#fff; font-size:13px;
}

/* ---------- 본체 2분할 ---------- */
.sb-main{
    position:relative;
    display:flex;
    align-items:stretch;
    height:var(--sb-h);
}

/* 좌측: 게시글 부분 (파랑) */
.sb-post{
    flex:1 1 auto;
    min-width:0;
    display:flex; flex-direction:column;
    /* border:2px solid var(--sb-accent); */
    border-radius:var(--sb-radius);
    background:var(--sb-bg);
    overflow:hidden;
}

/* 우측: 리스트 (초록) */
.sb-list{
    flex:0 0 var(--sb-listw);
    max-width:none;
    margin-left:var(--sb-gap);
    display:flex; flex-direction:column;
    /* border:2px solid var(--sb-accent2); */
    border-radius:var(--sb-radius);
    backdrop-filter: blur(10px);
    background: rgba(238, 238, 238, 0.7);
    overflow:hidden;
    /* flex-basis 는 JS가 px로 애니메이션(게시글이 함께 펼쳐지도록), 간격/테두리도 함께 트랜지션 */
    transition:flex-basis .3s cubic-bezier(.4,0,.2,1), margin-left .3s cubic-bezier(.4,0,.2,1), border-width .3s cubic-bezier(.4,0,.2,1);
}

/* 접힘 상태 (flex-basis 는 JS가 0px로 애니메이션) */
.sb-main.is-collapsed .sb-list{
    margin-left:0; border-width:0; pointer-events:none;
}

/* 접기/펼치기 토글 — 펼침: 게시글/리스트 경계 / 접힘: 게시글 오른쪽 끝으로 슬라이드 */
.sb-toggle{
    position:absolute; top:8px;
    right:calc(var(--sb-listw) - 6px);   /* 경계(틈) 위에 위치 */
    z-index:6;
    width:26px; height:50px;
    border:none; border-radius:8px;
    background:var(--sb-accent); color:#fff;
    font-size:18px; font-weight:900; line-height:50px;
    cursor:pointer; padding:0;
    box-shadow:0 2px 6px rgba(0,0,0,.2);
    /* 슬라이드는 JS가 transform(px)으로 제어 — right(calc+var) 트랜지션 버그 회피 */
    transition:transform .3s cubic-bezier(.4,0,.2,1), background .2s, filter .2s;
}
.sb-toggle:hover{filter:brightness(.93);}
.sb-main.is-collapsed .sb-toggle{ background:var(--sb-accent); }

/* ===================== 게시글(VIEW) ===================== */
.sb-post-body{height:100%; display:flex; flex-direction:column; min-height:0;}

.sb-empty{
    margin:auto; text-align:center; color:var(--sb-sub); padding:30px;
}
.sb-empty b{display:block; font-size:16px; color:#555; margin-bottom:6px;}

#sb-view{display:flex; flex-direction:column; height:100%; min-height:0;}

.sb-view-head{
    border-bottom:1px solid var(--sb-line);
    padding:18px 22px 14px;
    flex:0 0 auto;
}
.sb-view-title{
    margin:0; font-size:26px; font-weight:800; letter-spacing:-.5px;
    color:#1a1a1a; word-break:break-all;
}
.sb-view-meta{
    margin-top:8px; display:flex; gap:12px; flex-wrap:wrap;
    font-size:13px; color:var(--sb-sub);
}
.sb-view-meta .cate{color:var(--sb-accent); font-weight:700;}
.sb-view-badge{
    display:inline-block; padding:1px 7px; border-radius:5px;
    font-size:11px; font-weight:700; color:#fff; background:#e08a00; vertical-align:1px;
}

/* 본문 — 내부 스크롤 */
.sb-view-content{
    flex:1 1 auto; min-height:0;
    overflow-y:auto;
    padding:20px 22px;
    font-size:15px; line-height:1.75; color:#333;
}
.sb-view-content img{max-width:100%; height:auto;}
.sb-view-content::-webkit-scrollbar{width:10px;}
.sb-view-content::-webkit-scrollbar-thumb{background:#cfd4dd; border-radius:6px; border:3px solid #fff;}

.sb-view-files{padding:0 22px 4px;}
.sb-view-files a{color:var(--sb-accent); font-size:13px; text-decoration:none;}
.sb-view-files a:hover{text-decoration:underline;}

.sb-view-tools{
    flex:0 0 auto;
    /* border-top:1px solid var(--sb-line); */
    padding:10px 16px; display:flex; gap:6px; flex-wrap:wrap; justify-content:flex-end;
    /* background:var(--sb-soft); */
}

/* 댓글 영역(있을 경우) — 본문 스크롤 안쪽에 표시 */
.sb-view-comment{padding:40px 0px}

/* ===================== 댓글 (이미지형) ===================== */
.sb-cmt{display:flex; flex-direction:column;}

/* 댓글 쓰기 */
.sb-cmt-write{margin-bottom:22px;}
.sb-cmt-write textarea{
    width:100%; min-height:78px; resize:vertical;
    border:1px solid #d7dbe2; border-radius:10px; padding:12px 14px;
    font-size:14px; line-height:1.6; color:#333; background:#fff; outline:none;
}
.sb-cmt-write textarea:focus{border-color:#b8c0cc;}
.sb-cmt-form-row{display:flex; align-items:center; gap:8px; margin-top:8px; flex-wrap:wrap;}
.sb-cmt-form-row .frm_input{
    height:36px; border:1px solid #d7dbe2; border-radius:8px; padding:0 12px; font-size:13px; outline:none;
    min-width:0; flex:0 1 150px;
}
.sb-cmt-chk{display:inline-flex; align-items:center; gap:4px; font-size:13px; color:#777; white-space:nowrap; cursor:pointer;}
.sb-cmt-cnt{font-size:12px; color:var(--sb-sub);}
.sb-cmt-submit{
    margin-left:auto; height:36px; padding:0 22px;
    border:none; border-radius:50px; cursor:pointer;
    background:#434343; color:#fff; font-size:13px; font-weight:700;
}
.sb-cmt-submit:hover{filter:brightness(1.12);}

/* 댓글 목록 */
.sb-cmt-list{list-style:none; margin:0; padding:0;}
.sb-cmt-item{padding:6px 0 16px; border-top:1px solid #eef1f5;}
.sb-cmt-item:first-child{border-top:none;}
.sb-cmt-item.reply{
    margin-left:24px; padding-left:16px;
    border-top:none; border-left:2px solid #e0e3ea;
}
.sb-cmt-name{
    display:inline-block; margin:6px 0 10px;
    padding:5px 14px; border-radius:50px;
    background:#6b6f76; color:#fff; font-size:12px; font-weight:700; letter-spacing:.2px;
}
.sb-cmt-text{font-size:14px; line-height:1.7; color:#2b2b2b; word-break:break-all;}
.sb-cmt-text img{max-width:100%; height:auto;}
.sb-cmt-secret{color:#c0392b; font-weight:700; font-size:12px;}
.sb-cmt-foot{display:flex; align-items:center; margin-top:12px;}
.sb-cmt-date{font-size:12px; color:#a9adb5;}
.sb-cmt-acts{margin-left:auto; display:flex; gap:14px;}
.sb-cmt-acts a{font-size:12px; font-weight:700; color:#9aa0a8; text-decoration:none;}
.sb-cmt-acts a:hover{color:#555;}
.sb-cmt-acts a.del:hover{color:#c0392b;}

/* 답글/수정 인라인 폼이 들어오는 영역 */
.sb-cmt-item .sb-cmt-write{margin:12px 0 0;}

/* ===================== 리스트 ===================== */
.sb-list-head{
    flex:0 0 auto;
    padding:10px 14px 10px 22px; border-bottom:1px solid var(--sb-line);
    font-size:13px; font-weight:700; color:#555;
    display:flex; align-items:center; gap:6px;
    background:var(--sb-soft);
}
.sb-list-head .cnt{color:var(--sb-accent2); margin-left:auto; font-weight:800;}

.sb-items{
    list-style:none; margin:0; padding:0;
    flex:1 1 auto; min-height:0; overflow-y:auto;
	    border-radius: 0px;
}
.sb-items::-webkit-scrollbar{width:10px;}
.sb-items::-webkit-scrollbar-thumb{background:#cfd4dd; border-radius:6px; border:3px solid #fff;}

.sb-item{
    display:flex; align-items:stretch; gap:0;
    border-bottom:1px solid var(--sb-line);
    cursor:pointer; min-height:64px;
    transition:background .12s;
	    border-radius: 0px;
}
.sb-item:hover{background:var(--sb-soft);}
.sb-item.is-active{background: #ffffff;
    border-radius: 0px;}
.sb-item.is-notice{background:#fffbe9;}

.sb-it-main{
    flex:1 1 auto; min-width:0;
    padding:10px 12px; display:flex; flex-direction:column; justify-content:center; gap:4px;
}
.sb-it-subject{
    font-size:14px; font-weight:700; color:#222;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
    overflow:hidden; word-break:break-all; line-height:1.35;
}
.sb-it-subject .cmt{color:var(--sb-accent2); font-weight:800; font-size:12px; margin-left:3px;}
.sb-it-cate{color:var(--sb-accent); font-weight:700; font-size:11px; margin-right:4px;}
.sb-it-lock{
    display:inline-block; font-size:10px; font-weight:800; color:#fff;
    background:#999; border-radius:4px; padding:0 5px; margin-right:4px; vertical-align:1px;
}
.sb-it-lock.s{background:#c0392b;} .sb-it-lock.p{background:#8e44ad;} .sb-it-lock.m{background:#2980b9;}
.sb-it-date{font-size:11.5px; color:var(--sb-sub);}

.sb-it-thumb{
    flex:0 0 84px; width:84px;
    background: center/cover no-repeat;
    display:flex; align-items:center; justify-content:center;
    overflow:hidden;
	    border-radius: 0px;
}
.sb-it-thumb img{width:100%; height:100%; object-fit:cover; display:block;    border-radius: 0px;}
.sb-it-thumb .noimg{font-size:10px; color:#aab; font-weight:700;}

.sb-empty-list{padding:40px 16px; text-align:center; color:var(--sb-sub);    border-radius: 0px;}

/* 페이지 / 검색 */
.sb-list-foot{flex:0 0 auto; 
	/* border-top:1px solid var(--sb-line); 
	background:var(--sb-soft); */
}
.sb-paging{padding:8px; text-align:center; font-size:12px;}
.sb-paging a, .sb-paging strong{
    display:inline-block; min-width:24px; padding:3px 6px; margin:0 1px;
    border-radius:6px; text-decoration:none; color:#555; font-size:12px;
}
.sb-paging strong{background:var(--sb-accent2); color:#fff;}
.sb-search{display:flex; gap:6px; padding:8px; 
	/* border-top:1px dashed var(--sb-line); */
}
.sb-search select, .sb-search input[type=text]{
    height:32px; border:1px solid var(--sb-line); border-radius:7px; padding:0 8px; font-size:12px;
}
.sb-search input[type=text]{flex:1 1 auto; min-width:0;}
.sb-search .sb-btn{height:32px; padding:0 12px;}

/* ===================== 글작성 (WRITE) ===================== */
.sb-write-stage{display:flex; gap:16px; align-items:flex-start;}
.sb-write{
    flex:1 1 auto; min-width:0;
    /* border:2px solid var(--sb-accent3); */
    border-radius:var(--sb-radius);
    overflow:hidden; background:#fff;
}
/* 상단: 제목/날짜 + 썸네일 */
.sb-w-top{display:flex; border-bottom:1px solid var(--sb-line);}
.sb-w-top-left{flex:1 1 auto; min-width:0; padding:18px 20px;}
.sb-w-title{
    width:100%; border:none; outline:none; background:transparent;
    font-size:26px; font-weight:800; letter-spacing:-.5px; color:#1a1a1a;
}
.sb-w-title::placeholder{color:#c4c8d0;}
.sb-w-date{margin-top:8px; font-size:13px; color:var(--sb-sub);}
.sb-w-thumb{
    flex:0 0 150px; width:150px;
    border-left:1px solid var(--sb-line);
    background:#f1f3f7 center/cover no-repeat;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    color:#9aa0ac; font-size:13px; font-weight:700; text-align:center; gap:4px;
    position:relative;
}
.sb-w-thumb img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}

/* 옵션 줄 */
.sb-w-opts{
    display:flex; flex-wrap:wrap; gap:8px; align-items:center;
    padding:12px 16px; border-bottom:1px solid var(--sb-line); background:var(--sb-soft);
}
.sb-w-opts .grp{display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.sb-w-opts .seg{display:inline-flex; border:1px solid var(--sb-line); border-radius:8px; overflow:hidden; background:#fff;}
.sb-w-opts .seg label{
    padding:7px 14px; font-size:13px; font-weight:600; color:#555; cursor:pointer;
    border-right:1px solid var(--sb-line);
}
.sb-w-opts .seg label:last-child{border-right:none;}
.sb-w-opts .seg input{display:none;}
.sb-w-opts .seg input:checked + span{}
.sb-w-opts .seg label:has(input:checked){background:var(--sb-accent3); color:#fff;}
.sb-w-field{display:flex; align-items:center; gap:6px; font-size:13px; color:#555;}
.sb-w-field input[type=text], .sb-w-field input[type=password], .sb-w-field input[type=url]{
    height:34px; border:1px solid var(--sb-line); border-radius:8px; padding:0 10px; font-size:13px;
}
.sb-w-field input[type=file]{font-size:12px;}
.sb-w-pw{display:none;}
.sb-w-pw.on{display:flex;}

/* 본문 작성 영역 */
.sb-w-body{padding:14px 16px;}
.sb-w-body .label{font-size:12px; font-weight:800; color:var(--sb-accent3); margin-bottom:8px;}
.sb-w-body textarea{width:100%; min-height:340px; border:1px solid var(--sb-line); border-radius:8px; padding:12px; font-size:14px; line-height:1.7; resize:vertical;}

.sb-w-actions{padding:14px 16px; border-top:1px solid var(--sb-line); display:flex; gap:8px; align-items:center; justify-content:center; background:var(--sb-soft);}
.sb-w-actions .sb-btn{height:42px; padding:0 30px; font-size:15px;}
.sb-w-actions #sb-draft-save{padding:0 18px;}

/* 임시저장 */
.sb-draft-bar{
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
    padding:10px 16px; background:#fff7e6; border-bottom:1px solid #ffe2a8;
    color:#8a6d3b; font-size:13px;
}
.sb-draft-bar .sb-draft-msg{margin-right:auto;}
.sb-draft-bar b{color:#a9802f;}
.sb-draft-bar .sb-btn{height:30px; padding:0 12px; font-size:12px;}
.sb-draft-status{font-size:12px; color:var(--sb-sub); margin-left:6px; opacity:0; transition:opacity .2s;}
.sb-draft-status.on{opacity:1;}

/* 임시저장함 패널 */
.sb-draft-panel{border-bottom:1px solid var(--sb-line); background:#fbfcfe;}
.sb-draft-panel-head{display:flex; align-items:center; padding:10px 16px; font-size:13px; font-weight:800; color:#555; border-bottom:1px solid var(--sb-line);}
.sb-draft-x{margin-left:auto; border:none; background:transparent; font-size:15px; color:#999; cursor:pointer; line-height:1;}
.sb-draft-x:hover{color:#555;}
.sb-draft-list{list-style:none; margin:0; padding:0; max-height:300px; overflow-y:auto;}
.sb-draft-item{display:flex; align-items:center; gap:10px; padding:10px 16px; border-bottom:1px solid #eef1f5;}
.sb-draft-item:hover{background:#f3f6fb;}
.sb-draft-item.on{background:#eef4ff; box-shadow:inset 3px 0 0 var(--sb-accent3);}
.sb-draft-item .dl-main{flex:1 1 auto; min-width:0;}
.sb-draft-item .dl-title{font-size:14px; font-weight:700; color:#222; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sb-draft-item .dl-date{font-size:11.5px; color:var(--sb-sub); margin-top:2px;}
.sb-draft-item .dl-btns{flex:0 0 auto; display:flex; gap:6px;}
.sb-draft-item .dl-btns .sb-btn{height:30px; padding:0 12px; font-size:12px;}
.sb-draft-empty{padding:24px 16px; text-align:center; color:var(--sb-sub); font-size:13px;}

/* 미리보기 패널 */
.sb-w-preview{flex:0 0 250px; width:250px;}
.sb-w-preview .pv-note{font-size:12px; color:var(--sb-sub); line-height:1.6; margin-bottom:10px;}
.sb-w-preview .pv-card{
    border:2px solid var(--sb-accent2); border-radius:var(--sb-radius); overflow:hidden;
}
.sb-w-preview .pv-head{padding:8px 12px; font-size:12px; font-weight:700; color:#555; background:var(--sb-soft); border-bottom:1px solid var(--sb-line);}
.sb-w-preview .pv-item{display:flex; min-height:64px;}
.sb-w-preview .pv-text{flex:1 1 auto; min-width:0; padding:10px 12px; display:flex; flex-direction:column; justify-content:center; gap:4px;}
.sb-w-preview .pv-title{font-size:14px; font-weight:700; color:#222; word-break:break-all;}
.sb-w-preview .pv-title.empty{color:#bcc1cb;}
.sb-w-preview .pv-date{font-size:11.5px; color:var(--sb-sub);}
.sb-w-preview .pv-thumb{flex:0 0 84px; width:84px; background:#eef0f4 center/cover no-repeat; display:flex; align-items:center; justify-content:center;}
.sb-w-preview .pv-thumb img{width:100%; height:100%; object-fit:cover;}
.sb-w-preview .pv-thumb .noimg{font-size:10px; color:#aab; font-weight:700;}

/* ===================== 반응형 ===================== */
@media (max-width:860px){
    .sb-main{height:auto; flex-direction:column;}
    .sb-list{flex-basis:auto !important; max-width:none; max-height:340px; margin-left:0 !important; margin-top:14px; border-width:2px !important;}
    .sb-post{min-height:420px;}
    .sb-toggle{display:none;}
    .sb-main.is-collapsed .sb-list{pointer-events:auto;}
    .sb-write-stage{flex-direction:column;}
    .sb-w-preview{width:100%; flex-basis:auto;}
}