/* ========================================================= 
   bdcom_view.css
   - 글보기 화면 전용 스타일
   - home.css/common.css와 충돌을 최소화
   ========================================================= */

#bdcom_view_page .content {
	min-width: 0;
}

/* 상단 헤더 */
#bdcom_view_page .view-head {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 20px 12px;
	/* border-bottom: 1px solid rgba(0, 0, 0, .06); */
}

#bdcom_view_page .view-head-left {
	min-width: 0;
}

/* 카테고리 배지(한글 풀네임) */
#bdcom_view_page .view-badge {
	display: inline-flex;
	align-items: center;
	padding: 3px 12px;
	border-radius: 999px;
	font-size: 16px;
	/* ✅ 조금 크게 */
	font-weight: 500;
	/* ✅ 두께 500 */
	letter-spacing: -0.2px;
	background: rgba(13, 110, 253, .09);
	color: #0d6efd;
}

/* 제목 크게 */
#bdcom_view_page .view-title {
	margin: 10px 0 10px;
	font-size: 22px;
	/* ✅ 크게 (28px -> 32px -> 25px) */
	font-weight: 400;
	/* ✅ 두께 500 (900 -> 500) */
	line-height: 1.25;
	letter-spacing: -0.4px;
	word-break: break-word;
}

/* 메타(작성자/날짜/조회/댓글) */
#bdcom_view_page .view-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 14px;
	align-items: center;
	color: rgba(0, 0, 0, .58);
	font-size: 14px;
}

#bdcom_view_page .view-meta .meta-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

#bdcom_view_page .view-meta .bi {
	font-size: 14px;
	opacity: .9;
}

#bdcom_view_page .view-meta b {
	color: rgba(0, 0, 0, .78);
	font-weight: 400;
}

/* 우측 버튼(수정/삭제) */
#bdcom_view_page .view-head-actions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex-shrink: 0;
}

/* 액션바(좋아요/링크복사/댓글) */
#bdcom_view_page .view-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px 20px 14px;
	align-items: center;
}

/* 버튼 공통 */
#bdcom_view_page .view-actions .btn {
	border-radius: 12px;
	font-weight: 400;
	/* ✅ 두께 500 (800 -> 500) */
}

#bdcom_view_page .view-actions .btn-outline-secondary {
	border-color: rgba(0, 0, 0, .12);
}

/* 좋아요 버튼 */
#bdcom_view_page .btn-like {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	border: 1px solid rgba(13, 110, 253, .3);

	padding: 3px 12px;
	border-radius: 999px;
	font-size: 14px;
}

#bdcom_view_page .btn-like .heart i {
	font-size: 16px;
}

#bdcom_view_page .btn-like.is-on,
#bdcom_view_page .btn-like.is-liked {
	background: #fff9e6; /* 부드러운 옅은 노란색 */
	border-color:rgba(13, 110, 253, .05);
	background: rgba(13, 110, 253, .05);
	color: rgba(13, 110, 253, .9);
}

/* =========================================================
   ✅ 커뮤니티 전용 부드러운 강조색 (Bootstrap btn-primary 대체)
   - 철학: "편안한 커뮤니티"에 맞는 자극적이지 않은 파스텔톤 블루
   ========================================================= */
#bdcom_view_page .btn-cmt-accent {
	background-color: #5A8BAF !important;
	border-color: #5A8BAF !important;
	color: #fff !important;
}

#bdcom_view_page .btn-cmt-accent:hover {
	background-color: #487494 !important;
	border-color: #487494 !important;
	color: #fff !important;
}

#bdcom_view_page .text-cmt-accent {
	color: #5A8BAF !important;
}

/* =========================================================
   ✅ 게시글 상단 수정/삭제 버튼 그룹 (모던 세그먼트 스타일)
   ========================================================= */
#bdcom_view_page .post-action-group {
	display: inline-flex;
	background: #f1f3f5;
	border-radius: 8px;
	padding: 3px;
	gap: 2px;
	border: 1px solid rgba(0,0,0,0.05);
}

#bdcom_view_page .post-action-group .btn {
	border: none;
	background: transparent;
	border-radius: 6px;
	padding: 2px 10px;
	font-size: 0.8rem;
	color: #6c757d;
	font-weight: 500;
	transition: all 0.2s;
	box-shadow: none;
}

#bdcom_view_page .post-action-group .btn:hover {
	color: #212529;
	background: #ffffff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

#bdcom_view_page .post-action-group .btn-delete-action:hover {
	color: #dc3545;
}

/* =========================================================
   ✅ 작성/취소 버튼 그룹 (최신순/인기순 스타일, 더 작게)
   ========================================================= */
#bdcom_view_page .cmt-action-group {
	display: inline-flex;
	background: #f1f3f5;
	border-radius: 999px;
	padding: 3px;
	gap: 2px;
	border: 1px solid rgba(0,0,0,0.05);
}

#bdcom_view_page .cmt-action-group .btn {
	border: none;
	background: transparent;
	border-radius: 999px;
	padding: 2px 14px;
	font-size: 0.8rem;
	color: #6c757d;
	font-weight: 500;
	transition: all 0.2s;
	box-shadow: none;
}

#bdcom_view_page .cmt-action-group .btn:hover {
	color: #212529;
}

#bdcom_view_page .cmt-action-group .btn-submit {
	background: #5A8BAF;
	color: #fff;
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

#bdcom_view_page .cmt-action-group .btn-submit:hover {
	background: #487494;
	color: #fff;
}


/* =========================
   댓글 카드 - 심플/여백 중심
   ========================= */
#bdcom_view_page .cmt-card {
	margin-top: 14px;
	border: 1px solid rgba(0, 0, 0, .06);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 10px 24px rgba(0, 0, 0, .05);
	overflow: hidden;
	padding: 16px 18px 18px;
}

#bdcom_view_page .cmt-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 12px;
}

#bdcom_view_page .cmt-title {
	font-weight: 600;
	font-size: 16px;
	letter-spacing: -0.2px;
	color: #343a40;
}

#bdcom_view_page .cmt-title b {
	font-weight: 600;
	color: #212529;
}

/* 댓글 작성 박스 */
#bdcom_view_page .cmt-write {
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 16px;
	padding: 14px;
	background: rgba(0, 0, 0, .012);
}

#bdcom_view_page .cmt-write-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	margin-bottom: 10px;
}

#bdcom_view_page .writer {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

#bdcom_view_page .writer-dot {
	width: 8px;
	height: 8px;
	border-radius: 999px;
	background: #0d6efd;
	opacity: .65;
}

#bdcom_view_page .writer-name {
	font-weight: 700;
	font-size: 17px;
	color: rgba(0, 0, 0, .74);
}

#bdcom_view_page #cmt_text {
	width: 100%;
	min-height: 80px;
	resize: vertical;
	border: 1px solid rgba(0, 0, 0, .10);
	border-radius: 0px;
	padding: 12px 14px;
	font-size: 17px;
	line-height: 1.6;
	outline: none;
	background: #fff;
}

#bdcom_view_page #cmt_text {
	resize: none;
	/* 사용자가 수동으로 크기 변경 못 하도록 */
	overflow: hidden;
}

#bdcom_view_page .cmt-write-bottom {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 10px;
	margin-top: 10px;
}

#bdcom_view_page .cmt-write-bottom .btns {
	display: inline-flex;
	align-items: center;
	gap: 8px;
}

/* 댓글 목록 */
#bdcom_view_page .cmt-list {
	margin-top: 14px;
	/* border-top: 1px dashed rgba(0, 0, 0, .12); */
}

#bdcom_view_page .cmt-item {
	padding: 14px 4px;
	/* ✅ 변경: 줄간격/여백 조금 축소 */
	border-bottom: 0px solid rgba(0, 0, 0, .06);
}

#bdcom_view_page .cmt-item-head {
	display: flex;
	align-items: flex-end;
	/* ✅ 변경: 우측 버튼 박스 하단 정렬 */
	justify-content: space-between;
	gap: 0px;
}

#bdcom_view_page .cmt-item-head .left {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
}

#bdcom_view_page .cmt-item-head .avatar {
	width: 34px;
	height: 34px;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-weight: 900;
	background: rgba(0, 0, 0, .05);
	color: rgba(0, 0, 0, .70);
	flex-shrink: 0;
}

/* (중복 선언이 있어도 맨 아래 오버라이드가 최종 적용됨) */
#bdcom_view_page .cmt-item-head .who .name {
	font-weight: 500;
	font-size: 15px;
	color: rgba(0, 0, 0, .78);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 220px;
}

#bdcom_view_page .cmt-item-head .who .time {
	margin-left: 0 !important;
	margin-top: 0 !important;
	font-size: 13px;
	color: rgba(0, 0, 0, .52);
}

#bdcom_view_page .cmt-item-head .right {
	display: inline-flex;
	align-items: center;
	/* 버튼 내부 정렬은 center 유지 */
	gap: 0px;
	flex-shrink: 0;
	align-self: flex-end;
	/* ✅ 추가: 우측 박스 자체를 하단에 붙임 */
}

/* =========================================================
   ✅ [정렬 핵심] 댓글 본문/좋아요 줄을 "name 시작선"과 맞추기
   - avatar(34px) + gap(10px) = 44px
   ========================================================= */
#bdcom_view_page .cmt-item-body {
	padding-left: 44px !important;
	/* ✅ name 라인과 본문 시작선 정렬 */
}

/* 본문 */
#bdcom_view_page .cmt-item-body .cmt-text {
	margin: 6px 0 0;
	/* ✅ 위 여백 축소 */
	padding: 10px 0px;
	/* ✅ 패딩 축소 */
	border: 0px solid rgba(0, 0, 0, .08);
	border-radius: 0px;
	background: rgba(0, 0, 0, .012);
	white-space: pre-wrap;
	word-break: break-word;
	font-family: inherit;
	font-size: 15px;
	/* ✅ 살짝 축소 */
	line-height: 1.55;
	/* ✅ 줄간격 축소 */
}

/* 댓글 하단 좋아요 라인 */
#bdcom_view_page .cmt-like-row {
	display: inline-flex;
	align-items: center;
	gap: .35rem;
	margin-top: .35rem;
}

/* ✅ 엄지척(스마일) 버튼 간격 보정 */
#bdcom_view_page .btn-cmt-like {
	opacity: .85;
}

#bdcom_view_page .btn-cmt-like.is-on {
	opacity: 1;
}

#bdcom_view_page .cmt-like-cnt {
	text-decoration: none;
	font-size: .95rem; /* 살짝 크게 보정 */
	opacity: .9;
}

/* 빈 상태 */
#bdcom_view_page .cmt-empty {
	padding: 24px 10px;
	text-align: center;
	color: rgba(0, 0, 0, .55);
}

/* 모바일: 제목/여백 조정 */
@media (max-width: 767px) {
	#bdcom_view_page .view-head {
		padding: 16px 14px 10px;
	}

	#bdcom_view_page .view-title {
		font-size: 22px;
	}

	#bdcom_view_page .view-actions {
		padding: 10px 14px 12px;
	}

	#bdcom_view_page .cmt-card {
		padding: 14px 14px 16px;
	}

	#bdcom_view_page .cmt-item-head .who .name {
		max-width: 140px;
	}
}

/* =========================
   CKEditor 헤더(툴바) 숨김: 글보기 페이지에서만
   ========================= */
#bdcom_view_page .ck-editor__top,
#bdcom_view_page .ck-toolbar {
	display: none !important;
}

/* =========================
   CKEditor 내부 표(Table) - 반응형 가로 스크롤
   - 표가 화면에 들어오면 그냥 100%로 표시
   - 표가 화면보다 넓으면 figure.table 안에서만 좌우 스크롤
   - 화면 전체가 좌우로 밀리지 않도록 page에 overflow-x:hidden
   ========================= */

/* 페이지 전체의 가로 스크롤 방지 (표만 움직이게) */
#bdcom_view_page {
    overflow-x: hidden !important;
}

/* figure.table = 스크롤 컨테이너 */
#bdcom_view_page .ck-editor__editable figure.table {
    display: block !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
}

/* 스크롤바 시각적으로 숨김 (터치/드래그 기능은 유지) */
#bdcom_view_page .ck-editor__editable figure.table::-webkit-scrollbar {
    display: none !important;
}
#bdcom_view_page .ck-editor__editable figure.table {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}

/* 표: 모바일 구동 시에만 내용이 넓으면 컨테이너를 넘어가고, PC에서는 창크기에 맞춰 줄바꿈(width: 100%) 되도록 제한 */
@media(max-width: 768px) {
    #bdcom_view_page .ck-editor__editable table {
        min-width: max-content !important;  /* 내용물 자연 폭 유지 */
        max-width: none !important;
        table-layout: auto;
    }
}
#bdcom_view_page .ck-editor__editable table td,
#bdcom_view_page .ck-editor__editable table th {
    word-break: keep-all;
}

/* =========================================================
   ✅ 최신순 / 인기순 (모던 세그먼트 컨트롤 - giscus 스타일)
   ========================================================= */
#bdcom_view_page .cmt-sort {
	display: inline-flex;
	background: #f1f3f5; /* 부드러운 회색 배경 */
	border-radius: 8px;
	padding: 4px;
	gap: 2px;
}

#bdcom_view_page .cmt-sort .cmt-sort-btn {
	border: none;
	background: transparent;
	border-radius: 6px;
	padding: 4px 12px;
	font-size: 0.85rem;
	color: #495057;
	font-weight: 500;
	transition: all 0.2s;
}

#bdcom_view_page .cmt-sort .cmt-sort-btn:hover {
	color: #212529;
}

#bdcom_view_page .cmt-sort .cmt-sort-btn.is-on {
	background: #ffffff;
	color: #212529;
	font-weight: 600;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* =========================================================
   ✅ [최종 오버라이드] name · time 가로 유지 + 도트 스타일
   - 위쪽에서 column으로 덮이는 경우가 있으므로, 맨 마지막에서 강제한다.
   ========================================================= */
#bdcom_view_page .cmt-item-head .who {
	display: inline-flex !important;
	flex-direction: row !important;
	align-items: center !important;
	gap: 0 !important;
}

/* 도트(·)는 약간 진하게 */
#bdcom_view_page .cmt-item-head .who .who-dot {
	display: inline-block;
	margin: 0 .45rem;
	color: rgba(0, 0, 0, .70);
	font-weight: 900;
	line-height: 1;
}

/* ✅ 무한스크롤 센티넬(자동 더보기 트리거) */
.cmt-sentinel {
	height: 1px;
}
/* =========================================================
   ??[諛섏쓳?? ?곸꽭 ?섏씠吏€ 媛€?쒖꽦 諛?媛꾧꺽 理쒖쟻??(768px / 520px)
   - ?ъ슜???붿껌: 湲곌린蹂??뺣낫 ?④퀎???④? 諛?媛꾧꺽 理쒖냼??   ========================================================= */

/* 1. 768px ?댄븯 (?쒕툝由??€??紐⑤컮?? */
@media (max-width: 768px) {
	/* ?듦퀎(議고쉶/?볤?) ?④린湲?*/
	#bdcom_view_page .meta-stat,
	#bdcom_view_page .stat-sep {
		display: none !important;
	}

	/* ?섏젙/??젣 踰꾪듉 ?띿뒪???④린湲?(?꾩씠肄섎쭔 ?④?) */
	#bdcom_view_page .btn-text {
		display: none !important;
	}

	/* 援щ텇??쨌) 媛꾧꺽 理쒖냼??(8px -> 4px) */
	#bdcom_view_page .meta-sep {
		margin-left: 4px !important;
		margin-right: 4px !important;
	}
	
	/* 踰꾪듉 洹몃９ ?⑤뵫 誘몄꽭 議곗젙 */
	#bdcom_view_page .post-action-group .btn {
		padding: 2px 8px;
	}
}

/* 2. 520px ?댄븯 (?뚰삎 紐⑤컮?? */
@media (max-width: 520px) {
	/* ?좎쭨 異붽? ?④린湲?*/
	#bdcom_view_page #view_date,
	#bdcom_view_page .date-sep {
		display: none !important;
	}

	/* 媛꾧꺽 洹뱀큹?뚰솕 (4px -> 2px) */
	#bdcom_view_page .meta-sep {
		margin-left: 2px !important;
		margin-right: 2px !important;
	}
	
	/* ?쒕ぉ ?고듃 ?ш린 誘몄꽭 議곗젙 */
	#bdcom_view_page .view-title {
		font-size: 1.35rem !important;
	}
}

/* PC 등 스크롤바가 필요없거나 불가피하게 생겼을 때 시각적으로 스크롤바 숨기기 (기능은 유지) */
#bdcom_view_page .ck-editor__editable figure.table {
    -ms-overflow-style: none !important;
    scrollbar-width: none !important;
}
#bdcom_view_page .ck-editor__editable figure.table::-webkit-scrollbar {
    display: none !important;
}

/* =========================================================
   [사용자 조정 영역] bdcom_view 글보기 에디터 패딩 (화면 크기별)
   - bdckeditor.css 기본값(62px)을 이 페이지에서만 오버라이드
   ========================================================= */
/* PC (≤3000px, 실질적으로 항상 적용) */
@media (max-width: 3000px) {
    #bdcom_view_page #editor_wrap .ck.ck-editor__main > .ck-editor__editable {
        padding: 20px 70px !important;
    }
}

/* 태블릿 (≤1199px) */
@media (max-width: 1231px) {
    #bdcom_view_page #editor_wrap .ck.ck-editor__main > .ck-editor__editable {
        padding: 20px 60px !important;
    }
}

/* 모바일 (≤991px): 추가 패딩 없음 */
@media (max-width: 1210px) {
    #bdcom_view_page #editor_wrap .ck.ck-editor__main > .ck-editor__editable {
        padding: 15px 50px !important;
    }
}

/* 모바일 (≤991px): 추가 패딩 없음 */
@media (max-width: 1190px) {
    #bdcom_view_page #editor_wrap .ck.ck-editor__main > .ck-editor__editable {
        padding: 15px 40px !important;
    }
}

/* 모바일 (≤991px): 추가 패딩 없음 */
@media (max-width: 1170px) {
    #bdcom_view_page #editor_wrap .ck.ck-editor__main > .ck-editor__editable {
        padding: 15px 30px !important;
    }
}

/* 모바일 (≤991px): 추가 패딩 없음 */
@media (max-width: 1150px) {
    #bdcom_view_page #editor_wrap .ck.ck-editor__main > .ck-editor__editable {
        padding: 15px 20px !important;
    }
}
/* 모바일 (≤991px): 추가 패딩 없음 */
@media (max-width: 1130px) {
    #bdcom_view_page #editor_wrap .ck.ck-editor__main > .ck-editor__editable {
        padding: 15px 10px !important;
    }
}