/* ================================================================
   Naver Cafe Style Board Skin — cafe_style/style.css
   ================================================================ */

:root {
    --cs-primary:    var(--portal-primary);
    --cs-primary-dk: var(--portal-primary-hover);
    --cs-red:        #ff3a48;
    --cs-text:       #333;
    --cs-text-sub:   #888;
    --cs-border:     #f2f2f2;
    --cs-border-hd:  #e4e8eb;
    --cs-bg-head:    #f9f9f9;
    --cs-bg-hover:   #fafbfc;
    --cs-bg-notice:  #fffdf5;
    --cs-radius:     4px;
}

/* ================================================================
   테이블 기본 구조
   ================================================================ */
#bo_list.cafe_board .tbl_head01.tbl_wrap table {
    width: 100% !important;
    border-collapse: collapse !important;
    border-spacing: 0 !important;
}

/* 헤더: 상단 포인트 컬러 2px, 하단 구분선 */
#bo_list.cafe_board .tbl_head01.tbl_wrap thead th {
    padding: 10px 6px !important;
    border-top: 2px solid var(--cs-primary) !important;
    border-bottom: 1px solid var(--cs-border-hd) !important;
    border-left: none !important;
    border-right: none !important;
    background: var(--cs-bg-head) !important;
    color: #555 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-align: center !important;
    letter-spacing: .01em;
}

/* 바디: 행 구분선 #f2f2f2 */
#bo_list.cafe_board .tbl_head01.tbl_wrap tbody td {
    padding: 7px 6px !important;
    border-top: none !important;
    border-bottom: 1px solid var(--cs-border) !important;
    border-left: none !important;
    border-right: none !important;
    color: #555 !important;
    font-size: 13px !important;
    text-align: center !important;
    vertical-align: middle !important;
}

/* 행 호버 */
#bo_list.cafe_board .tbl_head01.tbl_wrap tbody tr:hover td {
    background-color: var(--cs-bg-hover) !important;
}

/* 공지 행 */
#bo_list.cafe_board .tbl_head01.tbl_wrap tbody tr.bo_notice td {
    background: var(--cs-bg-notice) !important;
}

/* even 행 배경 제거 (네이버 카페는 줄무늬 없음) */
#bo_list.cafe_board .tbl_head01.tbl_wrap tbody tr.even td {
    background: transparent !important;
}
#bo_list.cafe_board .tbl_head01.tbl_wrap tbody tr.bo_notice.even td {
    background: var(--cs-bg-notice) !important;
}

/* 빈 게시판 */
#bo_list.cafe_board .tbl_head01.tbl_wrap td.empty_table {
    text-align: center !important;
    padding: 48px 0 !important;
    color: var(--cs-text-sub) !important;
    font-size: 13px !important;
    border-bottom: none !important;
}

/* ================================================================
   열 너비 — table-layout:fixed
   fixed 레이아웃: 명시적 너비가 열 폭을 결정 → overflow:visible td도
   이웃 열을 밀지 않으므로 겹침 없음. td_subject만 너비 미지정하면
   나머지 공간 전부를 자동으로 차지함.
   ================================================================ */
#bo_list.cafe_board table { table-layout: fixed !important; width: 100% !important; }

#bo_list.cafe_board .td_chk,
#bo_list.cafe_board .all_chk  { width: 28px !important; }
#bo_list.cafe_board .td_num2  { width: 60px !important; overflow: hidden !important; }
/* overflow:visible 필수 — 사이드뷰 팝업이 td 밖으로 표시되어야 함
   td_name 120px / sv_member max-width:100px → 20px 여유로 겹침 방지 */
#bo_list.cafe_board .td_name  { width: 120px !important; white-space: nowrap; overflow: visible !important; position: relative; }
#bo_list.cafe_board .td_num   { width: 50px !important;  white-space: nowrap; overflow: hidden !important; }
#bo_list.cafe_board .td_datetime { width: 70px !important; white-space: nowrap; overflow: hidden !important; }
/* td_subject: 너비 미지정 → fixed 레이아웃에서 나머지 공간 전부 점유 */

/* default.css: #bo_list table th { overflow:hidden; text-overflow:ellipsis } 재정의
   — 헤더 텍스트("조회" 등)가 "조..." 처럼 잘리지 않도록 */
#bo_list.cafe_board table thead th {
    overflow: visible !important;
    text-overflow: clip !important;
}

/* 좁은 열: 좌우 패딩 0
   th 패딩 규칙(1,3,2)을 이기려면 .tbl_head01.tbl_wrap thead th.클래스(1,3,3) */
#bo_list.cafe_board .td_num2,
#bo_list.cafe_board .td_name,
#bo_list.cafe_board .td_num,
#bo_list.cafe_board .td_datetime,
#bo_list.cafe_board .td_chk,
#bo_list.cafe_board .all_chk,
#bo_list.cafe_board .tbl_head01.tbl_wrap thead th.td_num2,
#bo_list.cafe_board .tbl_head01.tbl_wrap thead th.td_name,
#bo_list.cafe_board .tbl_head01.tbl_wrap thead th.td_num,
#bo_list.cafe_board .tbl_head01.tbl_wrap thead th.td_datetime,
#bo_list.cafe_board .tbl_head01.tbl_wrap thead th.all_chk {
    padding-left:  0 !important;
    padding-right: 0 !important;
}

/* ================================================================
   공지 뱃지
   ================================================================ */
.cafe_notice_badge {
    display: inline-block;
    background: #ffeeee;
    color: var(--cs-red);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 10px;
    border: 1px solid #ffcdcd;
    white-space: nowrap;
    line-height: 1.5;
}

/* ================================================================
   제목 열 — 남은 공간 자동 점유, 말줄임표
   ================================================================ */
#bo_list.cafe_board .td_subject {
    max-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: left !important;
    padding-left: 10px !important;
    padding-right: 8px !important;
}

#bo_list.cafe_board .td_subject .bo_cate_link {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    color: #1a73e8;
    background: #eef6fb;
    border: 1px solid #c8dff9;
    border-radius: 3px;
    padding: 1px 5px;
    margin-right: 4px;
    vertical-align: middle;
    text-decoration: none;
    white-space: nowrap;
}

/* tbody td { text-align: center !important } 명시도(1,3,2) 를 이기는 재정의 (1,4,2) */
#bo_list.cafe_board .tbl_head01.tbl_wrap tbody td.td_subject {
    text-align: left !important;
}

#bo_list.cafe_board .td_subject .bo_tit {
    display: inline;
}

#bo_list.cafe_board .td_subject .bo_tit a {
    color: var(--cs-text) !important;
    text-decoration: none !important;
    font-size: 13px !important;
    line-height: 1.45;
}

#bo_list.cafe_board .td_subject .bo_tit a:hover {
    color: var(--cs-primary) !important;
    text-decoration: underline !important;
}

/* ================================================================
   댓글 수 / 새글 N / 아이콘
   ================================================================ */
#bo_list.cafe_board .cnt_cmt {
    color: var(--cs-red) !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    margin-left: 2px !important;
}

#bo_list.cafe_board .icon_new {
    display: inline-block !important;
    background: #ff4747 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 700 !important;
    padding: 1px 4px !important;
    border-radius: 3px !important;
    margin-left: 3px !important;
    vertical-align: middle !important;
    line-height: 1.4 !important;
}

/* ================================================================
   작성자 / 날짜 / 조회수
   ================================================================ */
#bo_list.cafe_board .td_name,
#bo_list.cafe_board .td_datetime,
#bo_list.cafe_board .td_num {
    color: var(--cs-text-sub) !important;
    font-size: 12px !important;
    white-space: nowrap !important;
}

/* tbody td.text-align:center(1,3,2)를 이기는 좌정렬 (1,4,2) */
#bo_list.cafe_board .tbl_head01.tbl_wrap tbody td.td_name {
    text-align: left !important;
}

/* 작성자 텍스트 클리핑은 default.css의 .sv_member { max-width:100px; overflow:hidden } 이 담당
   (sv_member 는 Gnuboard PHP/JS가 sv_use 내부에 자동 생성)
   — 별도 inner span 불필요, td(overflow:visible)는 사이드뷰 팝업 노출용으로만 사용 */

/* ================================================================
   카테고리 탭
   ================================================================ */
#bo_list.cafe_board #bo_cate { margin-bottom: 10px; }
#bo_list.cafe_board #bo_cate_ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
#bo_list.cafe_board #bo_cate_ul li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
#bo_list.cafe_board #bo_cate_ul li a {
    display: inline-block;
    padding: 4px 13px;
    border: 1px solid var(--cs-border-hd);
    border-radius: 14px;
    font-size: 12px;
    color: #555;
    text-decoration: none;
    transition: background 0.1s, color 0.1s, border-color 0.1s;
}
#bo_list.cafe_board #bo_cate_ul li a:hover,
#bo_list.cafe_board #bo_cate_ul li.on a {
    background: var(--cs-primary);
    border-color: var(--cs-primary);
    color: #fff;
}

/* ================================================================
   상단 버튼 영역
   ================================================================ */
#bo_list.cafe_board #bo_btn_top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
#bo_list.cafe_board #bo_list_total {
    font-size: 12px;
    color: var(--cs-text-sub);
}
#bo_list.cafe_board .btn_bo_user {
    display: flex !important;
    list-style: none !important;
    gap: 4px !important;
    padding: 0 !important;
    margin: 0 !important;
}
#bo_list.cafe_board .btn_bo_user li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
}
#bo_list.cafe_board .btn_bo_user .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: var(--cs-radius);
    text-decoration: none;
    cursor: pointer;
    border: 1px solid #dde1e5;
    background: #f7f8f9;
    color: #555;
    transition: background 0.1s;
}
#bo_list.cafe_board .btn_bo_user .btn:hover { background: #eef0f2; }
#bo_list.cafe_board .btn_bo_user .btn_b01 {
    background: var(--cs-primary);
    border-color: var(--cs-primary);
    color: #fff !important;
}
#bo_list.cafe_board .btn_bo_user .btn_b01:hover {
    background: var(--cs-primary-dk);
    border-color: var(--cs-primary-dk);
}

/* 점 세개 버튼 — 관리자 전용, 미니멀 회색 아이콘 버튼 */
#bo_list.cafe_board .btn_more_opt {
    width: 30px !important;
    padding: 0 !important;
    background: #f0f0f0 !important;
    border-color: #dde1e5 !important;
    color: #666 !important;
    font-size: 14px !important;
}
#bo_list.cafe_board .btn_more_opt:hover {
    background: #e0e0e0 !important;
    color: #333 !important;
}

/* 관리자 옵션 드롭다운 — 초기 숨김 (JS toggle로만 노출) */
#bo_list.cafe_board .more_opt {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 2px;
    background: #fff;
    border: 1px solid #dde1e5;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
    min-width: 110px;
    z-index: 300;
    list-style: none !important;
    padding: 4px 0 !important;
    margin-left: 0 !important;
}
#bo_list.cafe_board .more_opt li {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
#bo_list.cafe_board .more_opt button {
    display: block;
    width: 100%;
    padding: 8px 14px;
    font-size: 13px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    color: #333;
    white-space: nowrap;
    transition: background 0.1s;
}
#bo_list.cafe_board .more_opt button:hover { background: #f5f5f5; }

/* ================================================================
   페이지
   ================================================================ */
#bo_list.cafe_board .pg_wrap {
    text-align: center;
    margin: 18px 0 10px;
}
#bo_list.cafe_board .pg_wrap .pg { display: inline-block; }
#bo_list.cafe_board .pg a,
#bo_list.cafe_board .pg strong {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 6px;
    font-size: 13px;
    border-radius: var(--cs-radius);
    text-decoration: none;
    color: #555;
    border: 1px solid transparent;
    transition: all 0.1s;
    margin: 0 1px;
}
#bo_list.cafe_board .pg strong {
    background: var(--cs-primary);
    color: #fff !important;
    border-color: var(--cs-primary);
    font-weight: 700;
}
#bo_list.cafe_board .pg a:hover {
    background: #f2f2f2;
    border-color: var(--cs-border-hd);
}

/* ================================================================
   상단 검색 바
   ================================================================ */
#bo_list.cafe_board .cafe_sch_top {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
}
#bo_list.cafe_board .cafe_sch_form {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* 셀렉트박스 */
#bo_list.cafe_board .cafe_sch_select {
    height: 32px;
    padding: 0 8px;
    border: 1px solid #d0d5da;
    border-radius: var(--cs-radius);
    font-size: 12px;
    color: #444;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E") no-repeat right 8px center;
    appearance: none;
    -webkit-appearance: none;
    padding-right: 26px;
    cursor: pointer;
    transition: border-color 0.15s;
}
#bo_list.cafe_board .cafe_sch_select:focus {
    outline: none;
    border-color: var(--cs-primary);
}

#bo_list.cafe_board .cafe_sch_input {
    height: 32px;
    width: 180px;
    border: 1px solid #d0d5da;
    border-radius: var(--cs-radius);
    padding: 0 10px;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    color: var(--cs-text);
    transition: border-color 0.15s;
}
#bo_list.cafe_board .cafe_sch_input:focus { border-color: var(--cs-primary); }

#bo_list.cafe_board .cafe_btn_sch {
    height: 32px;
    padding: 0 12px;
    background: var(--cs-primary);
    border: 1px solid var(--cs-primary);
    color: #fff;
    border-radius: var(--cs-radius);
    font-size: 13px;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.1s;
}
#bo_list.cafe_board .cafe_btn_sch:hover {
    background: var(--cs-primary-dk);
    border-color: var(--cs-primary-dk);
}

/* ================================================================
   하단 글쓰기 버튼
   ================================================================ */
#bo_list.cafe_board .cafe_bottom {
    display: flex;
    justify-content: flex-end;
    margin: 12px 0 20px;
}
#bo_list.cafe_board .cafe_btn_write_top {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 30px;
    padding: 0 14px;
    background: var(--cs-primary);
    border: 1px solid var(--cs-primary);
    color: #fff !important;
    border-radius: var(--cs-radius);
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.1s;
}
#bo_list.cafe_board .cafe_btn_write_top:hover {
    background: var(--cs-primary-dk);
    border-color: var(--cs-primary-dk);
}

#bo_list.cafe_board .cafe_btn_write {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 34px;
    padding: 0 18px;
    background: var(--cs-primary);
    border: 1px solid var(--cs-primary);
    color: #fff !important;
    border-radius: var(--cs-radius);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.1s;
}
#bo_list.cafe_board .cafe_btn_write:hover {
    background: var(--cs-primary-dk);
    border-color: var(--cs-primary-dk);
}

/* ================================================================
   체크박스
   ================================================================ */
#bo_list.cafe_board .chk_box label { cursor: pointer; }
#bo_list.cafe_board .chk_box input[type="checkbox"] { cursor: pointer; }

/* ================================================================
   임시저장 팝업 (#autosave_pop) — 초기 숨김 필수
   jQuery autosave.js 의 .show() / .hide() 가 인라인으로 제어함
   ================================================================ */
#autosave_wrapper { position: relative; }

#autosave_pop {
    display: none;
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    z-index: 200;
    min-width: 280px;
    background: #fff;
    border: 1px solid #dde1e5;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
    padding: 14px 16px;
}

#autosave_pop strong {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #333;
    margin-bottom: 8px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f0f0f0;
}

#autosave_pop ul {
    list-style: none;
    margin: 0 0 10px;
    padding: 0;
    max-height: 200px;
    overflow-y: auto;
}

#autosave_pop ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #f5f5f5;
    gap: 8px;
    font-size: 13px;
}
#autosave_pop ul li:last-child { border-bottom: none; }

#autosave_pop ul li a.autosave_load {
    color: #333;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
}
#autosave_pop ul li a.autosave_load:hover { color: var(--cs-primary); }

#autosave_pop ul li span {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    font-size: 11px;
    color: #aaa;
}

#autosave_pop ul li button.autosave_del {
    font-size: 11px;
    padding: 1px 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
    background: #f7f7f7;
    cursor: pointer;
    color: #888;
    transition: background 0.1s;
}
#autosave_pop ul li button.autosave_del:hover {
    background: #fee;
    border-color: #f5a0a0;
    color: var(--cs-red);
}

/* ================================================================
   글보기 (View) 페이지 — .cafe_view 스코프
   ================================================================ */
.cafe_view #bsk_view_wrap {
    font-size: 14px;
    color: var(--cs-text);
}

/* 제목 영역 */
.cafe_view .bsk_view_header {
    padding-bottom: 14px;
    border-bottom: 2px solid var(--cs-primary);
}
.cafe_view .bsk_badge_cate {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 8px;
    font-size: 11px;
    font-weight: 700;
    color: #1a73e8;
    background: #eef6fb;
    border: 1px solid #c8dff9;
    border-radius: 3px;
    text-decoration: none;
}
.cafe_view .bsk_view_tit {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--cs-text);
}

/* 작성자 / 메타 정보 */
.cafe_view .bsk_view_info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0;
    border-bottom: 1px solid var(--cs-border);
}
.cafe_view .bsk_view_author {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cafe_view .bsk_view_avatar img,
.cafe_view .bsk_view_avatar {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    overflow: hidden;
    line-height: 26px;
}
.cafe_view .bsk_view_name {
    font-size: 13px;
    font-weight: 700;
    color: var(--cs-text);
}
.cafe_view .bsk_view_ip {
    font-size: 12px;
    color: var(--cs-text-sub);
}
.cafe_view .bsk_view_stats {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cafe_view .bsk_view_stat {
    font-size: 12px;
    color: var(--cs-text-sub);
}
.cafe_view .bsk_view_stat a {
    color: var(--cs-text-sub);
    text-decoration: none;
}
.cafe_view .bsk_view_stat a:hover { color: var(--cs-primary); }

/* 액션 버튼 (목록/답변/글쓰기, 수정/삭제/복사/이동) */
.cafe_view .bsk_view_actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 0;
}
.cafe_view .bsk_btn_group {
    display: flex;
    gap: 4px;
}
.cafe_view .bsk_btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 30px;
    padding: 0 12px;
    font-size: 12px;
    color: #555;
    background: #f7f8f9;
    border: 1px solid #dde1e5;
    border-radius: var(--cs-radius);
    text-decoration: none !important;
    cursor: pointer;
    transition: background 0.1s;
}
.cafe_view .bsk_btn:hover { background: #eef0f2; }
.cafe_view .bsk_btn_write,
.cafe_view .bsk_btn_submit {
    background: var(--cs-primary);
    border-color: var(--cs-primary);
    color: #fff !important;
    font-weight: 700;
}
.cafe_view .bsk_btn_write:hover,
.cafe_view .bsk_btn_submit:hover {
    background: var(--cs-primary-dk);
    border-color: var(--cs-primary-dk);
}
.cafe_view .bsk_btn_danger { color: var(--cs-red); }

/* 본문 */
.cafe_view .bsk_view_body {
    padding: 20px 2px 24px;
    border-bottom: 1px solid var(--cs-border);
}
.cafe_view .bsk_view_content {
    font-size: 14px;
    line-height: 1.8;
    color: var(--cs-text);
    word-break: break-all;
}
.cafe_view .bsk_view_content img { max-width: 100%; height: auto; }
.cafe_view .bsk_view_sig {
    margin-top: 16px;
    padding-top: 12px;
    border-top: 1px dashed var(--cs-border-hd);
    font-size: 12px;
    color: var(--cs-text-sub);
}
.cafe_view #bo_v_img { margin-bottom: 12px; }

/* SNS 공유 — 브랜드 고유색은 유지, 카페 포인트컬러와 무관 */
.cafe_view .bsk_share {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 14px 0;
    border-bottom: 1px solid var(--cs-border);
}
.cafe_view .bsk_share_label {
    font-size: 12px;
    color: var(--cs-text-sub);
    margin-right: 2px;
}
.cafe_view .bsk_share_btns {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.cafe_view .bsk_share_btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    height: 28px;
    padding: 0 10px;
    font-size: 12px;
    border-radius: var(--cs-radius);
    text-decoration: none !important;
    color: #fff !important;
    border: none;
    cursor: pointer;
}
.cafe_view .bsk_share_icon { width: 13px; height: 13px; fill: currentColor; }
.cafe_view .bsk_share_kakao { background: #fee500; color: #391b1b !important; }
.cafe_view .bsk_share_fb    { background: #1877f2; }
.cafe_view .bsk_share_x     { background: #000; }
.cafe_view .bsk_share_naver { background: #03c75a; }
.cafe_view .bsk_share_pin   { background: #e60023; }

/* 추천/비추천 */
.cafe_view .bsk_view_react {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    padding: 22px 0;
}
.cafe_view .bsk_react_btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 42px;
    padding: 0 22px;
    font-size: 14px;
    font-weight: 700;
    color: var(--cs-text);
    background: #fff;
    border: 1px solid #d0d5da;
    border-radius: 24px;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.15s;
}
.cafe_view .bsk_react_btn strong { color: var(--cs-primary); }
.cafe_view .bsk_react_good:hover {
    border-color: var(--cs-primary);
    background: #f3fbf6;
}
.cafe_view .bsk_react_nogood strong { color: var(--cs-red); }
.cafe_view .bsk_react_nogood:hover {
    border-color: var(--cs-red);
    background: #fff5f5;
}
.cafe_view .bsk_react_msg {
    display: block;
    width: 100%;
    text-align: center;
    font-size: 12px;
    color: var(--cs-text-sub);
    font-weight: normal;
}

/* 첨부파일 / 관련 링크 */
.cafe_view .bsk_view_files,
.cafe_view .bsk_view_links {
    padding: 14px 0;
    border-bottom: 1px solid var(--cs-border);
}
.cafe_view .bsk_view_files h3,
.cafe_view .bsk_view_links h3 {
    margin: 0 0 8px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cs-text-sub);
}
.cafe_view .bsk_view_files ul,
.cafe_view .bsk_view_links ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.cafe_view .bsk_view_files li,
.cafe_view .bsk_view_links li {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 0;
    font-size: 13px;
}
.cafe_view .bsk_file_link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--cs-text);
    text-decoration: none;
}
.cafe_view .bsk_file_link:hover { color: var(--cs-primary); }
.cafe_view .bsk_file_size,
.cafe_view .bsk_file_info { font-size: 12px; color: var(--cs-text-sub); }
.cafe_view .bsk_link_item { color: #1a73e8; text-decoration: none; font-size: 13px; }
.cafe_view .bsk_link_item:hover { text-decoration: underline; }

/* 이전글 / 다음글 */
.cafe_view .bsk_view_nav {
    padding: 4px 0;
}
.cafe_view .bsk_nav_item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 2px;
    border-bottom: 1px solid var(--cs-border);
    text-decoration: none !important;
    color: var(--cs-text);
    font-size: 13px;
}
.cafe_view .bsk_nav_item:hover .bsk_nav_tit { color: var(--cs-primary); }
.cafe_view .bsk_nav_label {
    flex-shrink: 0;
    width: 64px;
    font-size: 12px;
    color: var(--cs-text-sub);
}
.cafe_view .bsk_nav_tit {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ================================================================
   댓글 — .cafe_view 스코프
   ================================================================ */
.cafe_view .bsk_cmt_toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    margin: 14px 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--cs-text);
    background: var(--cs-bg-head);
    border: 1px solid var(--cs-border-hd);
    border-radius: var(--cs-radius);
    cursor: pointer;
}
.cafe_view .bsk_cmt_toggle strong { color: var(--cs-primary); }

.cafe_view .bsk_cmt_section {
    padding-top: 6px;
}
.cafe_view .bsk_cmt_empty {
    padding: 30px 0;
    text-align: center;
    font-size: 13px;
    color: var(--cs-text-sub);
}
.cafe_view .bsk_cmt_item {
    display: flex;
    gap: 10px;
    padding: 12px 0;
    border-bottom: 1px solid var(--cs-border);
    position: relative;
}
.cafe_view .bsk_cmt_reply {
    padding-left: 14px;
    background: var(--cs-bg-hover);
}
.cafe_view .bsk_cmt_avatar { flex-shrink: 0; }
.cafe_view .bsk_cmt_avatar img,
.cafe_view .bsk_cmt_avatar {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    overflow: hidden;
}
.cafe_view .bsk_cmt_body { flex: 1; min-width: 0; }
.cafe_view .bsk_cmt_header {
    display: flex;
    align-items: center;
    gap: 6px;
    position: relative;
}
.cafe_view .bsk_cmt_name {
    font-size: 12px;
    font-weight: 700;
    color: var(--cs-text);
}
.cafe_view .bsk_cmt_ip,
.cafe_view .bsk_cmt_date {
    font-size: 11px;
    color: var(--cs-text-sub);
}
.cafe_view .bsk_cmt_content {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.6;
    color: var(--cs-text);
    word-break: break-all;
}
.cafe_view .bsk_icon_lock { margin-right: 4px; color: var(--cs-text-sub); }
.cafe_view .bsk_cmt_actions { flex-shrink: 0; position: relative; }
.cafe_view .bsk_cmt_opt_btn {
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    color: var(--cs-text-sub);
    cursor: pointer;
}
.cafe_view .bsk_cmt_opt_menu {
    display: none;
    position: absolute;
    right: 0;
    top: 100%;
    z-index: 200;
    min-width: 90px;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background: #fff;
    border: 1px solid #dde1e5;
    border-radius: 6px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, .1);
}
.cafe_view .bsk_cmt_opt_menu li { margin: 0; padding: 0; }
.cafe_view .bsk_cmt_opt_menu a {
    display: block;
    padding: 7px 12px;
    font-size: 12px;
    color: var(--cs-text);
    text-decoration: none;
}
.cafe_view .bsk_cmt_opt_menu a:hover { background: #f5f5f5; }

/* 댓글 입력 폼 */
.cafe_view .bsk_cmt_form_wrap {
    margin-top: 10px;
    padding: 12px;
    background: var(--cs-bg-head);
    border-radius: var(--cs-radius);
}
.cafe_view .bsk_cmt_form_body textarea {
    width: 100%;
    min-height: 60px;
    padding: 8px 10px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--cs-text);
    background: #fff;
    border: 1px solid #d0d5da;
    border-radius: var(--cs-radius);
    resize: vertical;
    box-sizing: border-box;
}
.cafe_view .bsk_cmt_form_body textarea:focus {
    outline: none;
    border-color: var(--cs-primary);
}
.cafe_view .bsk_cmt_charcount {
    margin: 4px 0 0;
    text-align: right;
    font-size: 11px;
    color: var(--cs-text-sub);
}
.cafe_view .bsk_cmt_form_footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 8px;
}
.cafe_view .bsk_cmt_form_info {
    display: flex;
    align-items: center;
    gap: 6px;
}
.cafe_view .bsk_input {
    height: 30px;
    padding: 0 8px;
    font-size: 12px;
    border: 1px solid #d0d5da;
    border-radius: var(--cs-radius);
    box-sizing: border-box;
}
.cafe_view .bsk_input_sm { width: 100px; }
.cafe_view .bsk_cmt_form_actions {
    display: flex;
    align-items: center;
    gap: 10px;
}
.cafe_view .bsk_cmt_secret_chk {
    font-size: 12px;
    color: var(--cs-text-sub);
    cursor: pointer;
}
.cafe_view .bsk_btn_submit {
    height: 32px;
    padding: 0 16px;
    font-size: 12px;
    border-radius: var(--cs-radius);
}