@charset "utf-8";
/* ==========================================================================
   PLAYWEBON BOARD - COMMENT SKIN v3 (메신저형)
   질문(좌) / 답변(우) 대화형 레이아웃 + 채팅 테마 10종 (.cmt_s1 ~ .cmt_s10)
   ========================================================================== */

/* ---------- 공통 베이스 ---------- */
.cmt_wrap {
	--pt: #e2692f;
	--sb: #1d6ba4;
	--pt-soft: color-mix(in srgb, var(--pt) 9%, transparent);
	--sb-soft: color-mix(in srgb, var(--sb) 10%, transparent);
	--txt: #14171c;
	--body: #363c46;
	--sub: #767d89;
	--line: #e3e6eb;
	--line-form: #cfd4dd;
	--bg-a: #f5f6f9;
	--room: transparent;          /* 대화방 배경 */
	--bub-l: #f0f2f6;             /* 질문(좌) 말풍선 */
	--bub-l-tx: #363c46;
	--bub-r: var(--pt);           /* 답변(우) 말풍선 */
	--bub-r-tx: #ffffff;
	--bub-r1: 18px;               /* 말풍선 라운드 */
	--bub-r2: 5px;                /* 꼬리쪽 라운드 */
	--radius: 14px;
	position: relative;
	margin: 0 0 46px;
	padding: 0;
	font-family: 'Pretendard Variable', 'Pretendard', sans-serif;
	letter-spacing: -.03em;
	color: var(--txt);
}
.cmt_wrap * { box-sizing: border-box; }
.cmt_wrap a { text-decoration: none; color: inherit; }

/* ---------- 헤더 ---------- */
.cmt_wrap .cmt_head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 0 0 16px;
	border-bottom: 2px solid var(--txt);
}
.cmt_wrap .cmt_head h2 {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	line-height: 1.2;
}
.cmt_wrap .cmt_head h2 i { font-size: 18px; color: var(--pt); }
.cmt_wrap .cmt_head h2 em { font-style: normal; font-weight: 800; color: var(--pt); }
.cmt_wrap .cmt_head_btn {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	height: 40px;
	padding: 0 17px;
	border: 1px solid var(--line-form);
	border-radius: 10px;
	background: #fff;
	color: var(--sub);
	font-size: 15px;
	font-weight: 600;
	font-family: inherit;
	letter-spacing: -.03em;
	cursor: pointer;
	transition: all .2s ease;
}
.cmt_wrap .cmt_head_btn:hover { border-color: var(--pt); background: var(--pt); color: #fff; }
.cmt_wrap .cmt_head_btn i { font-size: 13px; }

/* ---------- 대화방 ---------- */
.cmt_wrap .cmt_list {
	margin: 0;
	padding: 20px 0 4px;
	list-style: none;
	background: var(--room);
}
.cmt_wrap .cmt_item { position: relative; list-style: none; }

.cmt_wrap .cmt_inner {
	display: flex;
	align-items: flex-start;
	gap: 11px;
	padding: 7px 0;
}
.cmt_wrap .cmt_item.is_staff > .cmt_inner { flex-direction: row-reverse; }

/* 아바타 */
.cmt_wrap .cmt_avatar {
	flex: 0 0 42px;
	width: 42px;
	height: 42px;
	margin-top: 22px;
	overflow: hidden;
	border-radius: 14px;
	background: var(--bg-a);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #bfc4cc;
}
.cmt_wrap .cmt_avatar img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cmt_wrap .cmt_av_ico { width: 66%; height: 66%; display: block; color: inherit; }
.cmt_wrap .cmt_av_sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.cmt_wrap .cmt_item.is_staff .cmt_avatar { color: var(--pt); background: var(--pt-soft); }
.cmt_wrap .cmt_item.is_admin .cmt_avatar { color: #fff; background: var(--pt); }
.cmt_wrap .cmt_av_ico.is_crown { width: 54%; height: 54%; }

/* 본문 컬럼 */
.cmt_wrap .cmt_body {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	max-width: 74%;
	min-width: 0;
}
.cmt_wrap .cmt_item.is_staff .cmt_body { align-items: flex-end; }

/* 이름 줄 */
.cmt_wrap .cmt_meta {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 7px;
	margin: 0 0 6px;
	padding: 0 4px;
	line-height: 1.2;
}
.cmt_wrap .cmt_item.is_staff .cmt_meta { flex-direction: row-reverse; }
.cmt_wrap .cmt_name { margin: 0; font-size: 14.5px; font-weight: 700; color: var(--txt); }
.cmt_wrap .cmt_badge {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	height: 21px;
	padding: 0 8px;
	border-radius: 6px;
	background: var(--bg-a);
	color: var(--sub);
	font-size: 12px;
	font-weight: 700;
}
.cmt_wrap .cmt_badge.admin { background: var(--pt-soft); color: var(--pt); }
.cmt_wrap .cmt_badge.admin i { font-size: 10.5px; }
.cmt_wrap .cmt_badge.secret { background: var(--sb-soft); color: var(--sb); }
.cmt_wrap .cmt_ip { font-size: 12px; color: #b3b8c0; }

/* 말풍선 줄 */
.cmt_wrap .cmt_line {
	display: flex;
	align-items: flex-end;
	gap: 7px;
	max-width: 100%;
	min-width: 0;
}
.cmt_wrap .cmt_item.is_staff .cmt_line { flex-direction: row-reverse; }

.cmt_wrap .cmt_bubble {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	min-width: 0;
	padding: 12px 15px;
	border-radius: var(--bub-r2) var(--bub-r1) var(--bub-r1) var(--bub-r1);
	background: var(--bub-l);
	color: var(--bub-l-tx);
}
.cmt_wrap .cmt_item.is_staff .cmt_bubble {
	align-items: flex-end;
	border-radius: var(--bub-r1) var(--bub-r2) var(--bub-r1) var(--bub-r1);
	background: var(--bub-r);
	color: var(--bub-r-tx);
}

.cmt_wrap .cmt_reto {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	margin: 0 0 6px;
	padding: 3px 9px;
	border-radius: 20px;
	background: rgba(0,0,0,.06);
	font-size: 12px;
	font-weight: 600;
	opacity: .85;
}
.cmt_wrap .cmt_reto i { font-size: 10px; }
.cmt_wrap .cmt_item.is_staff .cmt_reto { background: rgba(255,255,255,.22); }

.cmt_wrap .cmt_text {
	width: 100%;
	font-size: 14px;
	line-height: 1.72;
	word-break: break-word;
}
.cmt_wrap .cmt_text > *:first-child { margin-top: 0; }
.cmt_wrap .cmt_text > *:last-child { margin-bottom: 0; }
.cmt_wrap .cmt_text img { max-width: 100%; height: auto; }
.cmt_wrap .cmt_text.is_deleted { opacity: .6; font-style: italic; }

.cmt_wrap .cmt_date {
	flex: 0 0 auto;
	padding-bottom: 3px;
	font-size: 12px;
	color: var(--sub);
	white-space: nowrap;
}

/* 비밀글 확인 */
.cmt_wrap .cmt_secret_form {
	width: 100%;
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	font-size: 14px;
}
.cmt_wrap .cmt_secret_form label { flex: 1 1 100%; margin: 0 0 3px; }
.cmt_wrap .cmt_secret_form input[type="password"] {
	width: 150px;
	height: 38px;
	padding: 0 12px;
	border: 1px solid var(--line-form);
	border-radius: 8px;
	background: #fff;
	font-family: inherit;
	font-size: 15px;
	color: var(--txt);
}
.cmt_wrap .cmt_secret_form input[type="submit"] {
	height: 38px;
	padding: 0 15px;
	border: 0;
	border-radius: 8px;
	background: var(--txt);
	color: #fff;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
}

/* 첨부 */
.cmt_wrap .cmt_files { width: 100%; margin: 10px 0 0; }
.cmt_wrap .cmt_files_btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	opacity: .8;
	font-family: inherit;
	font-size: 13.5px;
	cursor: pointer;
}
.cmt_wrap .cmt_files ul {
	display: none;
	margin: 8px 0 0;
	padding: 10px 12px;
	border-radius: 9px;
	background: rgba(0,0,0,.05);
	list-style: none;
	font-size: 13.5px;
	line-height: 1.9;
}
.cmt_wrap .cmt_item.is_staff .cmt_files ul { background: rgba(255,255,255,.18); }

/* 액션 */
.cmt_wrap .cmt_act {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 2px;
	margin: 5px 0 0;
	padding: 0 2px;
}
.cmt_wrap .cmt_item.is_staff .cmt_act { flex-direction: row-reverse; }
.cmt_wrap .cmt_act button,
.cmt_wrap .cmt_act a {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	height: 28px;
	padding: 0 9px;
	border: 0;
	border-radius: 8px;
	background: none;
	color: var(--sub);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 500;
	letter-spacing: -.03em;
	line-height: 1;
	cursor: pointer;
	transition: all .18s ease;
}
.cmt_wrap .cmt_act button:hover,
.cmt_wrap .cmt_act a:hover { background: rgba(0,0,0,.05); color: var(--txt); }
.cmt_wrap .cmt_act i { font-size: 12px; }
.cmt_wrap .cmt_act .cmt_reply_btn { color: var(--pt); font-weight: 600; }
.cmt_wrap .cmt_act .cmt_reply_btn:hover { background: var(--pt-soft); }
.cmt_wrap .cmt_act .cmt_del:hover { background: #fdeceb; color: #d4362c; }

/* 답글 슬롯 */
.cmt_wrap .cmt_reply_slot:empty { display: none; }
.cmt_wrap .cmt_reply_slot { margin: 10px 0 14px; }

/* 없음 */
.cmt_wrap .cmt_empty { padding: 56px 20px; text-align: center; color: #a9aeb6; font-size: 15.5px; }
.cmt_wrap .cmt_empty i { display: block; margin-bottom: 12px; font-size: 30px; color: #d3d7dd; }

/* 페이징 */
.cmt_wrap .cmt_paging {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	margin: 16px 0 0;
	padding-top: 18px;
	border-top: 1px solid var(--line);
}
.cmt_wrap .cmt_paging a,
.cmt_wrap .cmt_paging strong {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 36px;
	height: 36px;
	padding: 0 9px;
	border-radius: 9px;
	font-size: 14.5px;
	font-weight: 600;
	color: var(--sub);
}
.cmt_wrap .cmt_paging a:hover { background: var(--bg-a); color: var(--txt); }
.cmt_wrap .cmt_paging strong { background: var(--pt); color: #fff; }

/* ==========================================================================
   작성 폼 (텍스트 전용)
   ========================================================================== */
.cmt_wrap .cmt_form {
	position: relative;
	margin: 22px 0 0;
	border: 1px solid var(--line-form);
	border-radius: var(--radius);
	background: #fff;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(20,24,32,.04);
	transition: border-color .2s ease;
}
.cmt_wrap .cmt_form.is_hidden { display: none; }
.cmt_wrap .cmt_form:focus-within { border-color: var(--pt); }
.cmt_wrap .cmt_form_head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 13px 18px;
	border-bottom: 1px solid var(--line-form);
	background: var(--bg-a);
	font-size: 14.5px;
	font-weight: 700;
	color: var(--txt);
}
.cmt_wrap .cmt_form_head i { color: var(--pt); font-size: 14px; }
.cmt_wrap .cmt_form_head > span { display: inline-flex; align-items: center; gap: 3px; min-width: 0; }
.cmt_wrap .cmt_ta {
	display: block;
	width: 100%;
	min-height: 126px;
	padding: 18px;
	border: 0;
	background: #fff;
	color: var(--txt);
	font-family: inherit;
	font-size: 16px !important;
	line-height: 1.75;
	letter-spacing: -.03em;
	resize: vertical;
	outline: 0;
}
.cmt_wrap .cmt_ta::placeholder { color: #b3b8c0; }
.cmt_wrap .cmt_form_foot {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	min-width: 0;
	padding: 13px 18px;
	border-top: 1px solid var(--line-form);
	background: var(--bg-a);
}
.cmt_wrap .cmt_guest { display: flex; gap: 8px; flex: 0 0 auto; min-width: 0; }
.cmt_wrap .cmt_guest input {
	width: 148px;
	height: 44px;
	padding: 0 13px;
	border: 1px solid var(--line-form);
	border-radius: 9px;
	background: #fff;
	font-family: inherit;
	font-size: 16px;
	color: var(--txt);
	outline: 0;
}
.cmt_wrap .cmt_guest input:focus { border-color: var(--pt); }
.cmt_wrap .cmt_opt { display: flex; align-items: center; gap: 16px; font-size: 14.5px; color: var(--sub); }
.cmt_wrap .cmt_opt label { display: inline-flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; }
.cmt_wrap .cmt_opt input[type="checkbox"] { width: 17px; height: 17px; accent-color: var(--pt); margin: 0; }
.cmt_wrap .cmt_captcha { flex: 1 1 100%; margin: 2px 0; }
.cmt_wrap .cmt_submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 7px;
	margin-left: auto;
	height: 44px;
	min-width: 120px;
	padding: 0 22px;
	border: 0;
	border-radius: 10px;
	background: var(--pt);
	color: #fff;
	font-family: inherit;
	font-size: 15.5px;
	font-weight: 700;
	letter-spacing: -.03em;
	cursor: pointer;
	transition: all .2s ease;
}
.cmt_wrap .cmt_submit:hover { filter: brightness(1.07); box-shadow: 0 6px 16px color-mix(in srgb, var(--pt) 32%, transparent); }
.cmt_wrap .cmt_submit i { font-size: 14px; }

.cmt_wrap .cmt_form_reply { margin: 0; border-color: color-mix(in srgb, var(--pt) 34%, transparent); }
.cmt_wrap .cmt_form_reply .cmt_form_head { background: var(--pt-soft); color: var(--pt); }
.cmt_wrap .cmt_form_reply .cmt_ta { min-height: 104px; }
.cmt_wrap .cmt_reply_target { font-weight: 800; }
.cmt_wrap .cmt_cancel {
	margin-left: auto;
	height: 28px;
	padding: 0 11px;
	border: 0;
	border-radius: 7px;
	background: rgba(255,255,255,.8);
	color: var(--pt);
	font-family: inherit;
	font-size: 13.5px;
	font-weight: 600;
	cursor: pointer;
}
.cmt_wrap .cmt_login_notice {
	margin: 22px 0 0;
	padding: 30px 20px;
	border: 1px dashed var(--line-form);
	border-radius: var(--radius);
	background: var(--bg-a);
	text-align: center;
	color: var(--sub);
	font-size: 15px;
}

/* ==========================================================================
   01. 브랜드 메신저 (기본)
   ========================================================================== */
/* 베이스 값 그대로 사용 */

/* ==========================================================================
   02. 카카오톡
   ========================================================================== */
.cmt_s2 {
	--room: #b2c7d9;
	--bub-l: #ffffff;
	--bub-l-tx: #1a1a1a;
	--bub-r: #fee500;
	--bub-r-tx: #1a1a1a;
	--bub-r1: 12px;
	--bub-r2: 3px;
}
.cmt_s2 .cmt_list { padding: 18px 16px 10px; border-radius: 14px; }
.cmt_s2 .cmt_name { color: #3b4654; font-size: 13.5px; }
.cmt_s2 .cmt_date { color: #5c6b7d; }
.cmt_s2 .cmt_avatar { border-radius: 16px; background: #dfe7ee; }
.cmt_s2 .cmt_item.is_staff .cmt_avatar { display: none; }
.cmt_s2 .cmt_item.is_staff .cmt_meta { display: none; }
.cmt_s2 .cmt_badge { background: rgba(255,255,255,.75); color: #46525f; }
.cmt_s2 .cmt_badge.admin { background: #fee500; color: #3c2f00; }
.cmt_s2 .cmt_act button,
.cmt_s2 .cmt_act a { color: #5c6b7d; }
.cmt_s2 .cmt_act button:hover,
.cmt_s2 .cmt_act a:hover { background: rgba(255,255,255,.6); color: #1a1a1a; }
.cmt_s2 .cmt_act .cmt_reply_btn { color: #2c3a48; font-weight: 700; }

/* ==========================================================================
   03. 클래식 블루 (풀라운드)
   ========================================================================== */
.cmt_s3 {
	--bub-l: #eceef2;
	--bub-l-tx: #1a1c20;
	--bub-r: #1d80e2;
	--bub-r-tx: #fff;
	--bub-r1: 22px;
	--bub-r2: 22px;
}
.cmt_s3 .cmt_bubble { padding: 12px 18px; }
.cmt_s3 .cmt_avatar { border-radius: 50%; }
.cmt_s3 .cmt_item.is_staff .cmt_avatar { display: none; }
.cmt_s3 .cmt_item.is_staff .cmt_body { max-width: 82%; }

/* ==========================================================================
   04. 그린 톡 (LINE 계열)
   ========================================================================== */
.cmt_s4 {
	--room: #eef3f7;
	--bub-l: #ffffff;
	--bub-l-tx: #26303b;
	--bub-r: #06c755;
	--bub-r-tx: #fff;
	--bub-r1: 16px;
	--bub-r2: 4px;
}
.cmt_s4 .cmt_list { padding: 18px 16px 10px; border-radius: 14px; }
.cmt_s4 .cmt_bubble { box-shadow: 0 1px 2px rgba(20,24,32,.07); }
.cmt_s4 .cmt_avatar { border-radius: 50%; background: #dde5ec; }
.cmt_s4 .cmt_date { color: #7c8a97; }

/* ==========================================================================
   05. 다크 메신저
   ========================================================================== */
.cmt_s5 {
	--txt: #f0f3f8;
	--body: #c6ccd8;
	--sub: #98a0b0;
	--line: #2a3040;
	--line-form: #39415a;
	--bg-a: #222836;
	--room: #171b26;
	--bub-l: #262d3d;
	--bub-l-tx: #dfe4ee;
	--bub-r: var(--pt);
	--bub-r-tx: #fff;
	padding: 26px;
	border-radius: 18px;
	background: #10141d;
}
.cmt_s5 .cmt_head { border-bottom-color: #2a3040; }
.cmt_s5 .cmt_head_btn { background: #222836; border-color: #39415a; color: #98a0b0; }
.cmt_s5 .cmt_head_btn:hover { background: var(--pt); border-color: var(--pt); color: #fff; }
.cmt_s5 .cmt_list { padding: 18px 16px 10px; border-radius: 14px; }
.cmt_s5 .cmt_avatar { background: #262d3d; color: #59617a; }
.cmt_s5 .cmt_badge { background: #262d3d; color: #98a0b0; }
.cmt_s5 .cmt_act button:hover,
.cmt_s5 .cmt_act a:hover { background: rgba(255,255,255,.08); color: #f0f3f8; }
.cmt_s5 .cmt_form { background: #1c212c; border-color: var(--line-form); }
.cmt_s5 .cmt_form_head { background: #222836; color: #f0f3f8; }
.cmt_s5 .cmt_ta { background: #1c212c; color: #f0f3f8; }
.cmt_s5 .cmt_form_foot { background: #222836; }
.cmt_s5 .cmt_guest input { background: #171b26; border-color: var(--line-form); color: #f0f3f8; }
.cmt_s5 .cmt_form_reply .cmt_form_head { background: color-mix(in srgb, var(--pt) 20%, #222836); color: #fff; }
.cmt_s5 .cmt_cancel { background: rgba(255,255,255,.16); color: #fff; }
.cmt_s5 .cmt_paging { border-top-color: #2a3040; }
.cmt_s5 .cmt_login_notice { background: #1c212c; }
.cmt_s5 .cmt_reto { background: rgba(255,255,255,.1); }

/* ==========================================================================
   06. 아웃라인 톡
   ========================================================================== */
.cmt_s6 {
	--bub-l: transparent;
	--bub-l-tx: var(--body);
	--bub-r: transparent;
	--bub-r-tx: var(--pt);
	--bub-r1: 16px;
	--bub-r2: 16px;
}
.cmt_s6 .cmt_bubble { border: 1px solid var(--line-form); }
.cmt_s6 .cmt_item.is_staff .cmt_bubble { border-color: var(--pt); }
.cmt_s6 .cmt_avatar { background: #fff; border: 1px solid var(--line); }
.cmt_s6 .cmt_item.is_staff .cmt_reto { background: var(--pt-soft); color: var(--pt); }

/* ==========================================================================
   07. 소프트 파스텔
   ========================================================================== */
.cmt_s7 {
	--room: color-mix(in srgb, var(--pt) 4%, #fafbfc);
	--bub-l: #ffffff;
	--bub-l-tx: #3a4049;
	--bub-r: color-mix(in srgb, var(--pt) 16%, #fff);
	--bub-r-tx: color-mix(in srgb, var(--pt) 78%, #000);
	--bub-r1: 20px;
	--bub-r2: 8px;
}
.cmt_s7 .cmt_list { padding: 22px 18px 12px; border-radius: 20px; }
.cmt_s7 .cmt_bubble { box-shadow: 0 2px 8px rgba(20,24,32,.05); }
.cmt_s7 .cmt_avatar { border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(20,24,32,.07); }
.cmt_s7 .cmt_item.is_staff .cmt_reto { background: rgba(255,255,255,.6); }

/* ==========================================================================
   08. 스퀘어 미니멀
   ========================================================================== */
.cmt_s8 {
	--bub-l: #f4f5f7;
	--bub-r: var(--pt);
	--bub-r1: 4px;
	--bub-r2: 4px;
}
.cmt_s8 .cmt_bubble { padding: 12px 15px; }
.cmt_s8 .cmt_avatar { border-radius: 4px; }
.cmt_s8 .cmt_badge { border-radius: 3px; }
.cmt_s8 .cmt_reto { border-radius: 3px; }
.cmt_s8 .cmt_act button,
.cmt_s8 .cmt_act a { border-radius: 4px; }

/* ==========================================================================
   09. 텍스트 정렬형 (말풍선 없음)
   ========================================================================== */
.cmt_s9 {
	--bub-l: transparent;
	--bub-r: transparent;
	--bub-l-tx: var(--body);
	--bub-r-tx: var(--body);
}
.cmt_s9 .cmt_bubble { padding: 0; }
.cmt_s9 .cmt_body { max-width: 82%; }
.cmt_s9 .cmt_inner { padding: 14px 0; border-bottom: 1px solid var(--line); }
.cmt_s9 .cmt_item:last-child > .cmt_inner { border-bottom: 0; }
.cmt_s9 .cmt_item.is_staff .cmt_text { text-align: right; }
.cmt_s9 .cmt_item.is_staff .cmt_name { color: var(--pt); }
.cmt_s9 .cmt_avatar { display: none; }
.cmt_s9 .cmt_reto { background: var(--bg-a); color: var(--sub); }
.cmt_s9 .cmt_item.is_staff .cmt_reto { background: var(--pt-soft); color: var(--pt); }

/* ==========================================================================
   10. 컴팩트 채팅
   ========================================================================== */
.cmt_s10 {
	--bub-r1: 13px;
	--bub-r2: 4px;
}
.cmt_s10 .cmt_list { padding: 12px 0 2px; }
.cmt_s10 .cmt_inner { padding: 4px 0; gap: 8px; }
.cmt_s10 .cmt_avatar { flex: 0 0 30px; width: 30px; height: 30px; margin-top: 19px; border-radius: 10px; }
.cmt_s10 .cmt_bubble { padding: 9px 13px; }
.cmt_s10 .cmt_text { font-size: 13px; line-height: 1.6; }
.cmt_s10 .cmt_name { font-size: 13px; }
.cmt_s10 .cmt_date { font-size: 11.5px; }
.cmt_s10 .cmt_meta { margin-bottom: 4px; }
.cmt_s10 .cmt_act { margin-top: 3px; }
.cmt_s10 .cmt_act button,
.cmt_s10 .cmt_act a { height: 24px; padding: 0 7px; font-size: 12.5px; }

/* ==========================================================================
   상태
   ========================================================================== */
.cmt_wrap .cmt_item.is_replying .cmt_bubble { box-shadow: 0 0 0 2px var(--pt); }
.cmt_wrap .cmt_item.is_replying .cmt_reply_btn { background: var(--pt); color: #fff; }
.cmt_wrap .cmt_item.is_target .cmt_bubble { animation: cmtFlash 2.4s ease; }
@keyframes cmtFlash {
0%, 55% { box-shadow: 0 0 0 3px var(--pt); }
100% { box-shadow: 0 0 0 0 transparent; }
}

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 768px) {
.cmt_wrap { margin-bottom: 30px; }
.cmt_wrap .cmt_head { padding-bottom: 13px; }
.cmt_wrap .cmt_head h2 { font-size: 17.5px; }
.cmt_wrap .cmt_head_btn { height: 36px; padding: 0 13px; font-size: 14px; }

.cmt_wrap .cmt_inner { gap: 8px; padding: 6px 0; }
.cmt_wrap .cmt_avatar { flex: 0 0 34px; width: 34px; height: 34px; margin-top: 20px; border-radius: 11px; }
.cmt_wrap .cmt_body { max-width: 84%; }
.cmt_wrap .cmt_name { font-size: 13.5px; }
.cmt_wrap .cmt_date { font-size: 11.5px; }
.cmt_wrap .cmt_text { font-size: 14px; }
.cmt_wrap .cmt_bubble { padding: 11px 14px; }
.cmt_wrap .cmt_act button,
.cmt_wrap .cmt_act a { height: 27px; padding: 0 8px; font-size: 13px; }

.cmt_wrap .cmt_form { margin-top: 18px; }
.cmt_wrap .cmt_form_head { padding: 11px 14px; font-size: 14px; }
.cmt_wrap .cmt_ta { min-height: 116px; padding: 14px; }
.cmt_wrap .cmt_form_foot { gap: 8px; padding: 12px 14px; }
.cmt_wrap .cmt_guest { flex: 1 1 100%; min-width: 0; max-width: 100%; }
.cmt_wrap .cmt_guest input { flex: 1 1 0; width: auto; min-width: 0; }
.cmt_wrap .cmt_opt { flex: 1 1 auto; font-size: 14px; }
.cmt_wrap .cmt_submit { width: 100%; margin-left: 0; height: 48px; font-size: 16px; }

.cmt_s2 .cmt_list,
.cmt_s4 .cmt_list,
.cmt_s5 .cmt_list { padding: 14px 11px 8px; }
.cmt_s7 .cmt_list { padding: 16px 12px 8px; }
.cmt_s5 { padding: 18px; border-radius: 14px; }
}

@media (max-width: 480px) {
.cmt_wrap .cmt_body { max-width: 88%; }
.cmt_wrap .cmt_head h2 { font-size: 16.5px; }
}