/* 블로그(칼럼) 게시판 — 목록 · 상세 */

/* 목록은 기본 스킨(#bo_list) 안에 들어간다. 버튼·검색·페이징은 기본 스킨 그대로 쓴다. */
.blog-wrap {margin:14px 0 0;}

/* 카테고리 탭 */
.blog-tabs {display:flex; flex-wrap:wrap; gap:8px; margin:0 0 34px;}
.blog-tabs a {display:inline-block; padding:9px 20px; border:1px solid #ddd6d0; border-radius:22px; font-size:15px; color:#5a5148; text-decoration:none; transition:all .25s ease;}
.blog-tabs a:hover {border-color:#977A6A; color:#977A6A;}
.blog-tabs a.on {background:#503F37; border-color:#503F37; color:#fff; font-weight:600;}

/* 가로형 카드 목록 — 왼쪽 글 / 오른쪽 이미지, 위아래로 쌓인다 */
.blog-grid {display:flex; flex-direction:column; gap:14px; list-style:none; margin:0; padding:0;}
.blog-card {margin:0; position:relative;}
/* 선택삭제용 체크박스 — 기본 스킨 동작을 그대로 쓰되 카드 위에 얹는다 */
.blog-card .blog-chk {position:absolute; top:14px; left:14px; z-index:2;}
/* 카드 배경은 브랜드 베이지 (#F5F2EF) */
.blog-card > a {display:flex; align-items:center; gap:40px; padding:34px 40px; border-radius:18px;
    background:#F5F2EF; text-decoration:none; color:inherit; transition:background .25s ease;}
.blog-card > a:hover {background:#EFEAE4;}

.blog-card .bc-body {flex:1; min-width:0; display:block;}
.blog-card .bc-cate {display:inline-block; margin:0 0 10px; padding:3px 11px; border-radius:11px; background:#fff; font-size:12px; font-style:normal; color:#977A6A; font-weight:600;}
.blog-card .bc-title {display:block; font-size:20px; font-weight:700; line-height:1.45; color:#241f1b; letter-spacing:-0.2px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.blog-card > a:hover .bc-title {color:#977A6A;}
.blog-card .bc-desc {display:block; margin:14px 0 0; font-size:15px; line-height:1.75; color:#7c736b; letter-spacing:-0.1px;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.blog-card .bc-meta {display:flex; align-items:center; gap:12px; margin:16px 0 0; font-size:13px; color:#a49a91;}
.blog-card .bc-meta i {font-style:normal;}
.blog-card .bc-meta i {position:relative; padding-left:13px;}
.blog-card .bc-meta i:before {content:''; position:absolute; left:0; top:50%; width:1px; height:11px; margin-top:-5px; background:#ddd6cf;}
.blog-card.is-notice .bc-title:before {content:'공지'; display:inline-block; margin:0 7px 0 0; padding:2px 8px; border-radius:4px; background:#503F37; color:#fff; font-size:12px; vertical-align:2px;}

.blog-card .bc-thumb {flex:0 0 285px; position:relative; width:285px; height:145px; overflow:hidden; border-radius:12px; background:#fff;}
.blog-card .bc-thumb img {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease;}
.blog-card > a:hover .bc-thumb img {transform:scale(1.04);}
.blog-card .bc-noimg {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); font-size:18px; letter-spacing:2px; color:#d3cdc7;}

.blog-empty {padding:90px 0; text-align:center; color:#a49a91; font-size:16px;}

/* 상세 */
.blog-view {margin:60px 0 100px;}
.blog-view .container {max-width:860px; width:100%; margin:0 auto; padding:0 20px; box-sizing:border-box;}
.blog-view .bv-head {padding:0 0 26px; margin:0 0 34px; border-bottom:1px solid #e8e2dc;}
.blog-view .bv-cate {display:inline-block; margin:0 0 12px; padding:4px 12px; border-radius:12px; background:#f3efeb; font-size:13px; font-style:normal; color:#977A6A; font-weight:600;}
.blog-view h2 {font-size:32px; font-weight:700; line-height:1.4; color:#241f1b; margin:0 0 16px; word-break:keep-all;}
.blog-view .bv-meta {display:flex; flex-wrap:wrap; gap:16px; font-size:14px; color:#a49a91;}
.blog-view .bv-body {font-size:17px; line-height:1.85; color:#3a332d; word-break:keep-all;}
.blog-view .bv-body img {max-width:100%; height:auto;}
.blog-view .bv-body h2, .blog-view .bv-body h3 {margin:38px 0 14px; font-weight:700; color:#241f1b; line-height:1.45;}
.blog-view .bv-body h2 {font-size:25px;} .blog-view .bv-body h3 {font-size:21px;}
.blog-view .bv-body p {margin:0 0 18px;}
.blog-view .bv-body ul, .blog-view .bv-body ol {margin:0 0 18px; padding-left:22px;}
.blog-view .bv-body li {margin:0 0 7px; list-style:inherit;}
.blog-view .bv-body table {width:100%; border-collapse:collapse; margin:0 0 22px;}
.blog-view .bv-body th, .blog-view .bv-body td {border:1px solid #e5e0da; padding:11px 13px;}
.blog-view .bv-body blockquote {margin:0 0 20px; padding:14px 20px; border-left:3px solid #977A6A; background:#faf8f6; color:#5a5148;}
.blog-view .bv-file {margin:34px 0 0; padding:16px 18px; border:1px solid #eae5df; border-radius:8px; font-size:14px;}
.blog-view .bv-file a {color:#977A6A; display:block; margin:0 0 6px;}
/* 관련링크 (글쓰기의 '링크' 칸) */
.blog-view .bv-link {margin:34px 0 0; padding:16px 18px; border:1px solid #eae5df; border-radius:8px; font-size:14px;}
.blog-view .bv-link strong {display:block; margin:0 0 8px; color:#241f1b; font-weight:700;}
.blog-view .bv-link a {display:block; margin:0 0 6px; color:#977A6A; word-break:break-all;}
.blog-view .bv-link a:last-child {margin-bottom:0;}
.blog-view .bv-link a:hover {text-decoration:underline;}
/* 자주 묻는 질문 (아코디언) */
.blog-view .bv-faq {margin:56px 0 0;}
.blog-view .bv-faq h3 {font-size:22px; font-weight:700; color:#241f1b; margin:0 0 20px;}
.blog-view .bv-faq ul {list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px;}
.blog-view .bv-faq li {background:#F5F2EF; border-radius:12px; overflow:hidden;}
.blog-view .bv-faq .bvf-q {display:flex; align-items:center; justify-content:space-between; gap:16px; width:100%;
    padding:20px 26px; border:0; background:none; cursor:pointer; text-align:left;
    font-size:16px; font-weight:600; color:#241f1b; line-height:1.5; height:auto;}
.blog-view .bv-faq .bvf-q i {flex:none; width:16px; height:16px; position:relative; opacity:.55; transition:transform .3s ease;}
.blog-view .bv-faq .bvf-q i:before, .blog-view .bv-faq .bvf-q i:after {content:''; position:absolute; background:#5a5148;}
.blog-view .bv-faq .bvf-q i:before {top:7px; left:0; width:16px; height:2px;}
.blog-view .bv-faq .bvf-q i:after {left:7px; top:0; width:2px; height:16px;}
.blog-view .bv-faq li.on .bvf-q i {transform:rotate(45deg);}
.blog-view .bv-faq .bvf-a {display:none; padding:0 26px 22px;}
.blog-view .bv-faq li.on .bvf-a {display:block;}
.blog-view .bv-faq .bvf-a > div {padding:18px 0 0; border-top:1px solid #e6ded6; font-size:15px; line-height:1.8; color:#5f564e;}

/* 이전 글 · 다음 글 */
.blog-view .bv-around {display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:56px 0 0;}
.blog-view .bva-card {display:flex; align-items:center; gap:18px; padding:26px 24px; border-radius:14px;
    background:#F5F2EF; text-decoration:none; color:inherit; transition:background .25s ease; min-height:118px; box-sizing:border-box;}
.blog-view .bva-card:hover {background:#EFEAE4;}
.blog-view .bva-card.empty {background:none;}
.blog-view .bva-arrow {flex:none; font-size:20px; color:#a49a91;}
.blog-view .bva-txt {flex:1; min-width:0;}
.blog-view .bva-txt strong {display:block; font-size:16px; font-weight:700; color:#241f1b; line-height:1.45; margin:0 0 8px;
    display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden;}
.blog-view .bva-txt em {display:block; font-style:normal; font-size:14px; line-height:1.65; color:#7c736b;
    display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.blog-view .bva-card.next {text-align:right;}

/* 목록 보기 */
.blog-view .bv-listbtn {margin:44px 0 0; text-align:center;}
.blog-view .bv-listbtn a {display:inline-block; padding:13px 34px; border:1px solid #c9a9a0; border-radius:26px;
    font-size:15px; color:#b08b80; text-decoration:none; transition:all .25s ease;}
.blog-view .bv-listbtn a:hover {background:#b08b80; border-color:#b08b80; color:#fff;}

/* 관리자용 수정 · 삭제 */
.blog-view .bv-admin {margin:18px 0 0; text-align:center; display:flex; gap:8px; justify-content:center;}
.blog-view .bv-admin a {display:inline-block; padding:9px 20px; border:1px solid #ddd6d0; border-radius:6px;
    font-size:13px; color:#5a5148; text-decoration:none;}
.blog-view .bv-admin a:hover {background:#f0eae4;}

@media (max-width:1024px) {
    .blog-card > a {gap:28px; padding:28px 30px;}
    .blog-card .bc-thumb {flex-basis:230px; width:230px; height:125px;}
    .blog-card .bc-title {font-size:18px;}
    .blog-view h2 {font-size:26px;}
}
@media (max-width:640px) {
    .blog-wrap {margin:40px 0 70px;}
    .blog-tabs {gap:6px; margin:0 0 24px;}
    .blog-tabs a {padding:7px 15px; font-size:14px;}
    /* 좁은 화면에서는 이미지를 글 위로 올려 세로로 쌓는다 */
    .blog-card > a {flex-direction:column-reverse; align-items:stretch; gap:18px; padding:20px; border-radius:14px;}
    .blog-card .bc-thumb {flex:none; width:100%; height:auto; padding-bottom:52%;}
    .blog-card .bc-title {font-size:17px;}
    .blog-card .bc-desc {font-size:14px; margin:10px 0 0;}
    .blog-card .bc-meta {margin:12px 0 0;}
    .blog-view h2 {font-size:22px;}
    .blog-view .bv-body {font-size:16px;}
    .blog-view .bv-faq h3 {font-size:19px;}
    .blog-view .bv-faq .bvf-q {padding:16px 18px; font-size:15px;}
    .blog-view .bv-faq .bvf-a {padding:0 18px 18px;}
    .blog-view .bv-around {grid-template-columns:1fr; gap:12px;}
    .blog-view .bva-card {min-height:0; padding:20px 18px;}
    .blog-view .bva-card.empty {display:none;}
    .blog-view .bva-card.next {text-align:left; flex-direction:row-reverse;}
}

/* 글쓰기 화면 — 언어 선택 · 자주 묻는 질문 입력 */




/* 선택삭제 체크박스 — 카드 위에서도 잘 보이게 */
.blog-card .blog-chk {background:#fff; border-radius:5px; padding:6px; box-shadow:0 1px 4px rgba(0,0,0,.12); line-height:0;}
.blog-card .blog-chk label {display:block;}