/* ========================================================= 
   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: 8px;
	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: 8px;
	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: 8px;
	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: 8px;
	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: 12px;
	background: #fff;
	box-shadow: none;
	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: 400;
	font-size: 0.88rem;
	letter-spacing: -0.2px;
	color: #343a40;
}

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

/* 댓글 작성 박스 */
#bdcom_view_page .cmt-write {
	border: 1px solid rgba(0, 0, 0, .08);
	border-radius: 10px;
	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: 50%;
	background: #0d6efd;
	opacity: .65;
}

#bdcom_view_page .writer-name {
	font-weight: 400;
	font-size: 0.88rem;
	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: 50%;
	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: 400;
	font-size: 0.82rem;
	color: rgba(0, 0, 0, .78);
	white-space: nowrap;
	overflow: visible;
	text-overflow: unset;
	max-width: none;
	display: inline-flex;
	align-items: center;
	flex-shrink: 1;
	min-width: 0;
}

#bdcom_view_page .cmt-item-head .who .name a {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 160px;
	display: inline-block;
	vertical-align: middle;
}

#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);
	white-space: nowrap;
	flex-shrink: 0;
}

#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: 0;
	margin-top: .35rem;
}

/* ✅ 공통 아이콘 버튼: border 없음, 투명 배경, 균일한 터치 타겟 */
#bdcom_view_page .cmt-action-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	padding: 0;
	border: none !important;
	background: transparent !important;
	border-radius: 50%;
	color: rgba(0, 0, 0, .45);
	font-size: 1.15rem;
	transition: background-color 0.2s, color 0.2s;
	cursor: pointer;
	box-shadow: none !important;
	outline: none !important;
}

#bdcom_view_page .cmt-action-icon:hover {
	background: rgba(0, 0, 0, .05) !important;
	color: rgba(0, 0, 0, .65);
}

#bdcom_view_page .cmt-action-icon:active {
	background: rgba(0, 0, 0, .08) !important;
}

/* 공감 눌림 상태 */
#bdcom_view_page .cmt-action-icon.btn-cmt-like.is-on {
	color: inherit;
}

/* 공감 카운트 숫자 */
#bdcom_view_page .cmt-like-cnt {
	text-decoration: none;
	font-size: .9rem;
	color: rgba(0, 0, 0, .55);
	min-width: 14px;
	margin-right: 4px;
}

/* 빈 상태 */
#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: 1.1rem !important;
	}

	#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 a {
		max-width: 100px;
	}
}

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

/* =========================
   ✅ 글보기 모드: CKEditor 본문 영역 높이 자동 (하단 불필요 공백 제거)
   - CKEditor가 내부적으로 설정하는 min-height/height를 모두 auto로 강제
   - bdckeditor.css(공통모듈)은 수정하지 않음
   ========================= */
#bdcom_view_page #editor_wrap .ck.ck-editor {
	min-height: auto !important;
	height: auto !important;
}

#bdcom_view_page #editor_wrap .ck.ck-editor__main {
	min-height: auto !important;
	height: auto !important;
}

#bdcom_view_page #editor_wrap .ck-editor__editable {
	min-height: auto !important;
	height: auto !important;
}

#bdcom_view_page #editor_wrap {
	min-height: auto !important;
	height: auto !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;
	min-width: 0;
	flex-wrap: nowrap;
	overflow: visible;
}

/* 도트(·)는 약간 진하게 */
#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.05rem !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;
    }
}

/* =========================================================
   ✅ [3-1] 해시태그 뱃지 (게시글 상세보기)
   ========================================================= */
#bdcom_view_page .view-tags {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding: 0 20px;
}

#bdcom_view_page .view-tags .tag-badge {
	display: inline-block;
	padding: 0;
	border-radius: 0;
	font-size: 0.75rem;
	font-weight: 400;
	color: #999;
	background: none;
	border: none;
	text-decoration: none;
	transition: color 0.2s ease;
	letter-spacing: -0.2px;
	line-height: 1.6;
}

#bdcom_view_page .view-tags .tag-badge:hover {
	color: #555;
}

@media (max-width: 767px) {
	#bdcom_view_page .view-tags {
		padding: 0 14px;
		gap: 3px;
	}
	#bdcom_view_page .view-tags .tag-badge {
		font-size: 0.7rem;
		padding: 1px 6px;
	}
}

/* =========================================================
   🐾 반려동물 뱃지 (클릭 가능)
   ========================================================= */
#view_pet_badge {
	display: inline-block;
}
#view_pet_badge span,
#view_pet_badge a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	background: linear-gradient(135deg, #fff9f0, #ffecd2);
	border: 1px solid rgba(255, 154, 118, 0.25);
	border-radius: 20px;
	padding: 4px 14px;
	font-size: 0.82rem;
	font-weight: 500;
	color: #7a5c4f;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.25s ease;
}
#view_pet_badge a:hover {
	background: linear-gradient(135deg, #ffecd2, #ffd8b8);
	border-color: rgba(255, 130, 80, 0.4);
	box-shadow: 0 2px 8px rgba(255, 154, 118, 0.2);
	transform: translateY(-1px);
}

/* =========================================================
   textarea 자동 높이 공통 정책 (profile.jsp와 동일)
   - .cmt-edit-text  : 댓글/답글 수정 textarea
   - .cmt-reply-text : 답글 입력 textarea
   overflow:hidden 이 없으면 scrollHeight 계산 시 스크롤바 발생
   ========================================================= */
#bdcom_view_page .cmt-edit-text,
#bdcom_view_page .cmt-reply-text {
	overflow: hidden;
	resize: none;
	line-height: 1.6;
}

/* =========================================================
   ✅ 모바일 전용 (576px 이하): 댓글 본문 전체 폭 사용, 아바타 축소
   ========================================================= */
@media (max-width: 576px) {
	#bdcom_view_page .cmt-item-head .left {
		gap: 6px;
	}
	#bdcom_view_page .cmt-item-head .avatar {
		width: 28px;
		height: 28px;
		font-size: 0.75rem;
	}
	#bdcom_view_page .cmt-item-body {
		padding-left: 0 !important;
	}
}

/* ✅ 400px~576px: 답글(.is-reply)은 데스크톱 스타일 유지 */
@media (min-width: 400px) and (max-width: 576px) {
	#bdcom_view_page .cmt-item.is-reply .cmt-item-head .left {
		gap: 10px;
	}
	#bdcom_view_page .cmt-item.is-reply .cmt-item-head .avatar {
		width: 34px;
		height: 34px;
		font-size: unset;
	}
	#bdcom_view_page .cmt-item.is-reply .cmt-item-body {
		padding-left: 44px !important;
	}
}

/* =========================================================
   📱 모바일 UI/UX 통합 개선 (2026-05-23)
   ─────────────────────────────────────────────────────────
   기준: 360px (갤럭시 S25) / 375px (iPhone SE)
   원칙: PC 화면 영향 ZERO
   ========================================================= */
@media (max-width: 576px) {

	/* ── 1. 본문 카드: 좌우 꽉 채움 ── */
	#bdcom_view_page .view-card {
		border-radius: 0 !important;
		border-left: none !important;
		border-right: none !important;
		margin: 0 !important;
	}

	/* ── 2. 상단 헤더 패딩 축소 ── */
	#bdcom_view_page .view-head {
		padding: 12px 14px 8px !important;
		gap: 8px !important;
	}

	/* ── 3. 메타 정보 컴팩트 ── */
	#bdcom_view_page .view-meta {
		font-size: 0.78rem !important;
		gap: 4px 6px !important;
	}

	/* 구분점(·) 간격 */
	#bdcom_view_page .view-meta .meta-sep {
		margin-left: 2px !important;
		margin-right: 2px !important;
	}

	/* ── 4. 제목 ── */
	#bdcom_view_page .view-title {
		font-size: 1.05rem !important;
		margin: 6px 0 8px !important;
		letter-spacing: -0.3px !important;
	}

	#bdcom_view_page .view-title.mb-4 {
		margin-bottom: 10px !important;
	}

	#bdcom_view_page .view-title.pb-4 {
		padding-bottom: 10px !important;
	}

	/* ── 5. 에디터 본문 패딩 ── */
	#bdcom_view_page #editor_wrap .ck.ck-editor__main > .ck-editor__editable {
		padding: 10px 14px !important;
		font-size: 0.9rem !important;
	}

	/* ── 6. 해시태그 ── */
	#bdcom_view_page .view-tags {
		padding: 0 14px !important;
		margin-top: 16px !important;
		margin-bottom: 8px !important;
	}

	/* ── 7. 액션 버튼 (좋아요/링크복사/카카오) ── */
	#bdcom_view_page .view-actions {
		padding: 10px 14px !important;
		gap: 6px !important;
		justify-content: center !important;
		flex-wrap: wrap !important;
	}

	#bdcom_view_page .view-actions .btn {
		font-size: 0.78rem !important;
		padding: 6px 12px !important;
		border-radius: 8px !important;
	}

	/* ── 8. 댓글 카드 컴팩트 ── */
	#bdcom_view_page .cmt-card {
		padding: 12px 14px !important;
		border-radius: 0 !important;
		border-left: none !important;
		border-right: none !important;
		margin-top: 8px !important;
	}

	/* 댓글 헤더 */
	#bdcom_view_page .cmt-head {
		margin-bottom: 10px !important;
	}

	#bdcom_view_page .cmt-title {
		font-size: 0.82rem !important;
	}

	/* 댓글 정렬 버튼 */
	#bdcom_view_page .cmt-sort .cmt-sort-btn {
		font-size: 0.78rem !important;
		padding: 3px 10px !important;
	}

	/* ── 9. 댓글 입력 ── */
	#bdcom_view_page .cmt-write {
		padding: 10px !important;
		border-radius: 10px !important;
	}

	#bdcom_view_page #cmt_text {
		font-size: 0.875rem !important;
		padding: 10px 12px !important;
		min-height: 60px !important;
		border-radius: 8px !important;
	}

	/* 수정/답글 textarea도 동일 크기 */
	#bdcom_view_page .cmt-edit-text,
	#bdcom_view_page .cmt-reply-text {
		font-size: 0.875rem !important;
		padding: 10px 12px !important;
		border-radius: 8px !important;
	}

	#bdcom_view_page .writer-name {
		font-size: 0.82rem !important;
	}

	/* 작성/취소 버튼 */
	#bdcom_view_page .cmt-action-group .btn {
		font-size: 0.75rem !important;
		padding: 2px 10px !important;
	}

	/* ── 10. 하단 액션바 ── */
	#bdcom_view_page .mobile-actionbar {
		padding: 8px 12px !important;
		padding-bottom: calc(8px + env(safe-area-inset-bottom)) !important;
		gap: 8px !important;
	}

	#bdcom_view_page .mobile-actionbar .btn {
		font-size: 0.92rem !important;
		font-weight: 500 !important;
		border-radius: 10px !important;
		padding: 11px 0 !important;
	}

	#bdcom_view_page .mobile-actionbar .btn i {
		font-size: 1rem !important;
	}

	/* ── 11. 수정/삭제 버튼 ── */
	#bdcom_view_page .post-action-group .btn {
		font-size: 0.72rem !important;
		padding: 2px 6px !important;
	}

	/* ── 12. 빈 댓글 ── */
	#bdcom_view_page .cmt-empty {
		padding: 20px 10px !important;
		font-size: 0.82rem !important;
	}

	/* ── 13. 반려동물 뱃지 ── */
	#view_pet_badge span,
	#view_pet_badge a {
		font-size: 0.78rem !important;
		padding: 3px 10px !important;
	}

	/* ── 14. 본문 하단 여백 (하단바 가림 방지) ── */
	#bdcom_view_page .content {
		padding-bottom: 72px !important;
	}

	/* ── 15. 댓글 본문 글자 축소 ── */
	#bdcom_view_page .cmt-item-body .cmt-text {
		font-size: 0.84rem !important;
		line-height: 1.5 !important;
		padding: 6px 0 !important;
		margin: 4px 0 0 !important;
	}

	/* ── 16. 댓글 닉네임: flex 기반 축소 (오버플로우 방지) ── */
	#bdcom_view_page .cmt-item-head .who {
		min-width: 0 !important;
		overflow: hidden !important;
		flex: 1 1 0 !important;
	}

	#bdcom_view_page .cmt-item-head .who .name {
		flex: 0 1 auto !important;
		min-width: 0 !important;
	}

	#bdcom_view_page .cmt-item-head .who .name a {
		max-width: none !important;
		overflow: hidden !important;
		text-overflow: ellipsis !important;
		white-space: nowrap !important;
		display: inline-block !important;
		max-width: 40vw !important;  /* 화면 폭 대비 40% */
	}

	/* 시간: 절대 안 잘림 */
	#bdcom_view_page .cmt-item-head .who .time {
		flex-shrink: 0 !important;
		white-space: nowrap !important;
	}

	/* ── 18. 댓글 간격 ── */
	#bdcom_view_page .cmt-item {
		padding: 10px 2px !important;
	}

	/* ── 19. 공감/답글 아이콘 라인 ── */
	#bdcom_view_page .cmt-like-row {
		margin-top: 2px !important;
	}

	#bdcom_view_page .cmt-action-icon {
		width: 28px !important;
		height: 28px !important;
		font-size: 1rem !important;
	}

	#bdcom_view_page .cmt-like-cnt {
		font-size: 0.78rem !important;
	}

	/* ── 20. 답글 들여쓰기 최적화 ── */
	#bdcom_view_page .cmt-item.is-reply {
		padding-left: 16px !important;
	}

	/* ── 21. 수정/삭제 버튼 → 하단(좋아요 옆)으로 이동 ── */
	#bdcom_view_page .cmt-item {
		position: relative !important;
	}

	#bdcom_view_page .cmt-item-head .right {
		position: absolute !important;
		bottom: 8px !important;
		right: 4px !important;
		align-self: auto !important;
	}

	#bdcom_view_page .cmt-item-head .right .cmt-action-icon {
		width: 26px !important;
		height: 26px !important;
		font-size: 0.9rem !important;
	}

	/* 수정 모드일 때 하단 수정/삭제 버튼 숨김 (취소/수정과 중첩 방지) */
	#bdcom_view_page .cmt-item.is-editing .cmt-item-head .right {
		display: none !important;
	}
}

/* ── 400px 이하: 초소형 추가 보정 ── */
@media (max-width: 400px) {
	#bdcom_view_page .view-actions .btn {
		font-size: 0.72rem !important;
		padding: 5px 8px !important;
	}

	#bdcom_view_page .view-actions .btn span {
		display: inline !important;
	}
}