/* 댓글알림 — 깔끔한 알림 리스트 (page.css 토큰 기반) */
.content {
	max-width: 720px;
	margin: 0 auto;
	padding: 30px 20px 64px;
}
.mm .content {
	padding: 14px 12px 44px;
}

/* 상단 액션 버튼 */
.mn_btns {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 8px;
	margin-bottom: 16px;
}
.mn_btns .btn {
	margin: 0 !important;
	padding: 7px 13px !important;
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	border-radius: 7px;
	border: 1px solid var(--d_300);
	background: var(--b_100) !important;
	color: var(--t_300) !important;
	transition: background .15s, border-color .15s, color .15s;
}
.mn_btns .btn:hover {
	background: var(--b_200) !important;
	border-color: var(--d_400);
}
/* 모두 읽음처리 — 주요 액션 (채워진 파랑) */
.mn_btns .btn-info {
	background: var(--like) !important;
	border-color: var(--like);
	color: #fff !important;
}
.mn_btns .btn-info:hover {
	background: #3f78e6 !important;
	border-color: #3f78e6;
}
/* 댓글 전체 삭제 — 위험 (빨강 아웃라인 → hover 시 채워짐) */
.mn_btns .btn-danger {
	border-color: var(--red);
	color: var(--red) !important;
}
.mn_btns .btn-danger:hover {
	background: var(--red) !important;
	border-color: var(--red);
	color: #fff !important;
}

/* 알림 리스트 컨테이너 */
.notice_table {
	width: 100%;
	table-layout: fixed;
	border-collapse: separate;
	border-spacing: 0;
	background: var(--b_100);
	border: 1px solid var(--d_300);
	border-radius: 10px;
}

/* 헤더 — 미니멀 라벨 */
.notice_table thead th {
	padding: 11px 14px;
	font-size: 12px;
	font-weight: 600;
	color: var(--t_400);
	text-align: left;
	background: var(--b_200);
	border-bottom: 1px solid var(--d_300);
}
.notice_table thead th:first-child {
	border-top-left-radius: 10px;
}
.notice_table thead th:last-child {
	border-top-right-radius: 10px;
}

/* 아이디 칼럼 — 내용에 맞게 좁게 */
.notice_table__1 {
	width: 100px;
}
.mm .notice_table__1 {
	width: 55px;
}

/* 행 */
.notice_table tbody td {
	padding: 13px 14px;
	line-height: 1.5;
	vertical-align: top;
	border-bottom: 1px solid var(--d_200);
}
.notice_table tbody tr:last-child td {
	border-bottom: none;
}
.notice_table tbody tr:last-child td:first-child {
	border-bottom-left-radius: 10px;
}
.notice_table tbody tr:last-child td:last-child {
	border-bottom-right-radius: 10px;
}
.notice_table tbody tr:hover td {
	background: var(--b_150);
}

/* 아이디 (메타) */
.notice_table td.name {
	padding-right: 6px;
	font-size: 13px;
	font-weight: 500;
	color: var(--t_300);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* 댓글 내용 (주) — 좌측은 아이디와 붙지 않게, 우측은 펼침버튼과 간격 확보 */
.notice_table td.memo {
	padding-left: 4px;
	font-size: 14px;
}
.notice_table td.memo .rep-ellipsis {
	padding-right: 40px;
}
.notice_table td.memo a {
	color: var(--t_150);
	text-decoration: none;
}
.notice_table td.memo a:hover {
	text-decoration: underline;
}

/* 안읽음 — 좌측 빨강 액센트 + 가장 진한 글씨 */
.notice_table tr.unread td:first-child {
	box-shadow: inset 3px 0 0 var(--red);
}
.notice_table tr.unread td.name {
	color: var(--t_000);
	font-weight: 700;
}
.notice_table tr.unread td.memo a {
	color: var(--t_000);
	font-weight: 600;
}

/* 읽음 — 살짝만 가라앉힘 (충분히 읽히도록) */
.notice_table tr.read td.name {
	color: var(--t_400);
	font-weight: 400;
}
.notice_table tr.read td.memo a {
	color: var(--t_300);
}

/* 댓글 펼치기 (.btn-rep-unfold / .rep-ellipsis 스타일은 page.css 공통 정의 사용) */
div.ellipsis {
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
}
/* 펼침 버튼은 기본 숨김 → 잘리는(두 줄 이상) 댓글에만 표시해 깜빡임 방지 */
.notice_table .btn-rep-unfold {
	display: none;
}
.notice_table .rep-ellipsis.has-more .btn-rep-unfold {
	display: flex;
}