@charset "utf-8";
/* =========================================================================
   [260813] 사용자단 댓글 컴포넌트(board/comment/comment.jsp) 다크 스킨 통일
   - 사용처: event/supporters/blog/gallery_total/beafphoto/common/reply read.jsp,
     consult/newconsult read.jsp (mine=on은 mp_consult_fix.css와 동일 톤)
   - 선택자는 댓글 컴포넌트 전용 클래스만 사용 → 링크한 페이지의 다른 요소 영향 없음
   - 팔레트: 카드 #131418/#0B1620 / 테두리 #16324B / 강조 #00B8FC / grad #00B8FC→#5163FE
   ========================================================================= */

/* ── 댓글 헤더(댓글(N) + 검색) ─────────────────────────────────────────── */
.comment_header .font_tit01,
.comment_header .login_tit01,
.comment_header .tit { color: #fff !important; font-size: 20px !important; font-weight: 700; padding: 0 !important; }
.comment_header .login_tit01::before { content: none !important; }

.comment_search { flex: 0 0 auto !important; }
.comment_search select,
.comment_search input[type=text] {
	height: 40px !important; background: #0E141C !important;
	border: 1px solid #16324B !important; color: #fff !important; border-radius: 8px !important;
}
.comment_search select { width: 104px !important; }
.comment_search input[type=text] { width: 132px !important; }
.comment_search a,
.comment_search button {
	height: 40px !important; border-radius: 8px !important;
	background: linear-gradient(90deg,#00B8FC,#5163FE) !important;
	color: #fff !important; padding: 0 14px !important;
	display: inline-flex !important; align-items: center; justify-content: center !important;
	text-align: center !important;
	white-space: nowrap !important; flex: 0 0 auto !important; min-width: 66px;
}

/* ── 로그인 안내 (비로그인) ────────────────────────────────────────────── */
.comment_login_required {
	background: #0B121B !important;
	border: 1px dashed #25517C !important;
	border-radius: 10px;
	color: #8ea0ad !important;
	padding: 18px 20px !important;
	text-align: center;
}
.comment_login_required a {
	display: inline-flex; align-items: center; justify-content: center;
	margin-left: 12px; padding: 5px 18px; border-radius: 999px;
	background: linear-gradient(90deg,#00B8FC,#5163FE);
	color: #fff !important; font-weight: 700; font-size: 13px;
	text-decoration: none !important;
}
.comment_login_required a:hover { filter: brightness(1.1); }

/* ── 작성 영역 ────────────────────────────────────────────────────────── */
.read_rego { color: #cfe0ea !important; }
.read_rego .login_tit01,
.read_rego .font_tit01 { color: #fff !important; }
.read_rego input[type=text],
.read_rego input[type=password],
.read_rego .focus_zone,
.read_rego textarea {
	background: #0E141C !important; border: 1px solid #16324B !important;
	color: #fff !important; border-radius: 8px !important;
}
.read_rego .focus_zone { max-height: 120px; }
.read_rego .flex { align-items: flex-end !important; }
.read_rego input::placeholder,
.read_rego textarea::placeholder { color: #6b6f78 !important; }
.read_rego input:focus,
.read_rego textarea:focus { border-color: #00B8FC !important; outline: none; }
/* 확인(등록) 버튼: 상담 read와 동일한 밝은 grad */
.read_rego .right input[type="submit"],
.read_rego .right input[type="button"],
.read_rego input[type="submit"] {
	height: 50px !important; min-width: 110px; padding: 0 26px !important;
	border: 0 !important; border-radius: 10px !important; cursor: pointer;
	background: linear-gradient(90deg,#00B8FC,#5163FE) !important; color: #fff !important;
	font-size: 15px !important; font-weight: 700 !important; white-space: nowrap;
}
.read_rego .right input[type="submit"]:hover,
.read_rego input[type="submit"]:hover { filter: brightness(1.08); }
/* 댓글(N) 제목 */
.read_rego .login_tit01,
.comment_area .login_tit01 { color: #fff !important; font-size: 20px !important; font-weight: 700; }
/* 댓글 없음/카운트 보조 텍스트 */
.comment-empty, .bbsno { color: #8e9099; }
.answer_wrapper { border-top: none !important; }
.read_rego { border-top: none !important; }

/* ── 댓글 목록 행 (피그마 시안: 검정 카드 + #00B8FC 테두리 + 글로우 아바타) ── */
.answer_wrapper { border-color: transparent !important; }
.answer_box01 {
	background: #000 !important;
	border: 1px solid #00B8FC !important;
	border-radius: 10px;
	margin-bottom: 16px;
	padding: 20px !important;
	align-items: center !important;
	gap: 20px;
}
/* 아바타: 마이페이지 사이드바와 동일 톤(반투명 grad 원 + 글로우 + 사람 아이콘) */
.answer_box01::before {
	content: "";
	flex: 0 0 64px; width: 64px; height: 64px;
	border-radius: 100px;
	background: url(/img/mypage/ico/avatar.svg) center/34px no-repeat,
	            radial-gradient(ellipse at 0% 0%, rgba(0, 184, 252,.2) 0%, rgba(81,99,254,.2) 100%);
	border: 1px solid #00B8FC;
	box-shadow: 0 0 14px rgba(0,184,252,.55);
}
.answer_box01 .answer_left_box { flex: 1 1 auto !important; min-width: 0 !important; color: #fff !important; }
.answer_box01 .answer_left_box .tit,
.answer_box01 .answer_left_box .won_la_si { color: #fff !important; font-size: 15px !important; font-weight: 700; }
.answer_box01 .time_box { color: #CCCCCC !important; font-size: 15px !important; font-weight: 400; margin-left: 12px; }

/* 답글/수정/삭제 버튼: 시안 90x40 검정 + #00B8FC 테두리, 삭제는 빨강 */
.answer_box01 .option_box01,
.custom_box_bom_flex .option_box01 {
	display: flex !important; flex-wrap: nowrap !important; width: auto !important;
	gap: 12px !important; align-items: center; flex: 0 0 auto; margin-left: auto;
}
.option_btn01_label {
	display: inline-flex !important; align-items: center; justify-content: center; gap: 8px;
	height: 40px !important; min-width: 90px; padding: 0 16px !important;
	border: 1px solid #00B8FC !important; border-radius: 5px !important;
	background: #000 !important; color: #fff !important;
	font-size: 15px !important; font-weight: 700; white-space: nowrap !important; cursor: pointer;
}
.option_btn01_label input[type=button] {
	background: transparent !important; border: 0 !important; padding: 0 !important;
	color: #fff !important; font-size: 15px !important; font-weight: 700; cursor: pointer;
}
.option_btn01_label:hover { box-shadow: 0 0 10px rgba(0, 184, 252,.45); }
/* 아이콘 → #00B8FC 근사 */
.option_btn01_label img {
	width: 16px; height: auto;
	filter: brightness(0) saturate(100%) invert(53%) sepia(66%) saturate(3251%) hue-rotate(177deg) brightness(99%) contrast(98%);
}
/* 삭제 버튼: 텍스트·아이콘 빨강(#C20000) */
.option_btn01_label:has(input.r_delete_v2) input { color: #C20000 !important; }
.option_btn01_label:has(input.r_delete_v2) img {
	filter: brightness(0) saturate(100%) invert(11%) sepia(93%) saturate(5157%) hue-rotate(357deg) brightness(92%) contrast(115%);
}

/* ── 답글(대댓글): ↳ 알약 뱃지 + 들여쓰기 액센트 카드 ─────────────────── */
.answer_box01.new_ans_w {
	margin-left: 40px;
	background: #000 !important;
	border: 1px solid #00B8FC !important;
	border-left: 3px solid #00B8FC !important;
	border-radius: 10px;
	padding-left: 20px !important;
}
.answer_box01.new_ans_w::before { flex-basis: 48px; width: 48px; height: 48px; background-size: 26px, cover; }
.new_ans_icon {
	width: auto !important; height: auto !important;
	margin: 0 8px 0 0 !important;
	padding: 3px 12px !important;
	border-radius: 999px !important;
	border: 1px solid rgba(0, 184, 252,.45) !important;
	background: rgba(0,184,252,.08) !important;
	color: #00B8FC !important;
	font-size: 12px !important; font-weight: 700;
	aspect-ratio: auto !important; /* 전역 1/1이 원형으로 만들던 것 해제 */
	line-height: 1.4 !important;
}
.new_ans_icon::before { content: "\21B3  " !important; position: static !important; width: auto !important; border: 0 !important; }
.new_ans_icon::after { content: none !important; display: none !important; }
.new_ans_w .answer_left_box { padding-left: 0 !important; }

/* ── 모바일 ───────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
	.comment_header { flex-wrap: wrap; gap: 8px; }
	.comment_search select { width: 90px !important; }
	.comment_search input[type=text] { width: 110px !important; }
	.answer_box01 { flex-wrap: wrap; padding: 14px !important; gap: 12px; }
	.answer_box01::before { flex-basis: 44px; width: 44px; height: 44px; background-size: 24px, cover; }
	.answer_box01.new_ans_w { margin-left: 14px; }
	.answer_box01 .option_box01 { flex-wrap: wrap !important; margin-left: 0; gap: 8px !important; }
	.option_btn01_label { min-width: 0; height: 34px !important; font-size: 13px !important; padding: 0 12px !important; }
	.option_btn01_label input[type=button] { font-size: 13px !important; }
}