/* =========================================================
   Aurum 댓글
   - Figma "댓글창" (node 53-3444) 기준
========================================================= */

.aurum-comments {
	--aurum-comments-blue: #1b93fe;
	--aurum-comments-blue-hover: #1885E4;
	--aurum-comments-text: #252525;
	--aurum-comments-muted: #777777;
	--aurum-comments-line: #EDEDED;
	--aurum-comments-panel: #F8F9FB;
	--aurum-comments-disabled: #DDDDDD;
	--aurum-comments-disabled-hover: #C7C7C7;
	--aurum-comments-disabled-text: #999999;
	--aurum-comments-font: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
	width: 100%;
	max-width: 800px;
	margin: 0 auto;
	color: var(--aurum-comments-text);
	font-family: var(--aurum-comments-font);
}

.aurum-comments button,
.aurum-comments textarea {
	font: inherit;
}

/* 테마/Elementor 글로벌 스타일이 버튼·입력창 폰트를 덮어쓰지 않도록 명시도 보강 */
.aurum-comments.aurum-comments :is(button, input, textarea, select) {
	font-family: var(--aurum-comments-font);
}


/* =========================================================
   작성 영역 (회색 패널 + 흰 입력창 + 우측 버튼)
========================================================= */

.aurum-comments__composer {
	padding: 20px;
	border-radius: 12px;
	background: var(--aurum-comments-panel);
}

.aurum-comments .aurum-comments__textarea {
	display: block;
	width: 100%;
	height: 76px;
	padding: 18px 20px;
	margin: 0 0 10px;
	resize: none;
	border: 1px solid var(--aurum-comments-line);
	border-radius: 12px;
	outline: none;
	background: #fff;
	color: var(--aurum-comments-text);
	font-size: 16px;
	font-weight: 400;
	line-height: 145%;
	letter-spacing: -2%;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.aurum-comments__textarea::placeholder,
.aurum-comments__inline-textarea::placeholder {
	color: var(--aurum-comments-muted);
}

.aurum-comments .aurum-comments__textarea:focus,
.aurum-comments .aurum-comments__inline-textarea:focus {
	border-color: var(--aurum-comments-blue);
	box-shadow: 0 0 0 3px rgba(27, 147, 254, 0.12);
}

.aurum-comments__textarea[readonly] {
	cursor: pointer;
}

.aurum-comments__status,
.aurum-comments__inline-status {
	min-height: 24px;
	margin: 0 0 10px;
	color: #777;
	font-size: 14px;
}

.aurum-comments__status.is-error,
.aurum-comments__inline-status.is-error {
	color: #e14949;
}

.aurum-comments__status:empty,
.aurum-comments__inline-status:empty {
	display: none;
}

.aurum-comments__submit-row {
	display: flex;
	justify-content: flex-end;
}


/* =========================================================
   버튼 (댓글 남기기 / 답글 남기기)
   - 비활성 #DDDDDD → 호버 #C7C7C7
   - 활성 #1B93FE → 호버 #1885E4
========================================================= */

.aurum-comments .aurum-comments__submit,
.aurum-comments .aurum-comments__inline-submit {
	min-height: 43px;
	padding: 10px 20px;
	border: 0;
	border-radius: 10px;
	background: var(--aurum-comments-blue);
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 145%;
	letter-spacing: -2%;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease;
}

.aurum-comments .aurum-comments__inline-submit {
	min-height: 38px;
	padding: 8px 16px;
	font-size: 14px;
}

.aurum-comments .aurum-comments__submit:hover,
.aurum-comments .aurum-comments__submit:focus-visible,
.aurum-comments .aurum-comments__inline-submit:hover,
.aurum-comments .aurum-comments__inline-submit:focus-visible {
	background: var(--aurum-comments-blue-hover);
	color: #fff;
}

.aurum-comments .aurum-comments__submit:disabled,
.aurum-comments .aurum-comments__inline-submit:disabled {
	background: var(--aurum-comments-disabled);
	color: var(--aurum-comments-disabled-text);
	cursor: default;
}

.aurum-comments .aurum-comments__submit:disabled:hover,
.aurum-comments .aurum-comments__inline-submit:disabled:hover {
	background: var(--aurum-comments-disabled-hover);
	color: var(--aurum-comments-disabled-text);
}


/* =========================================================
   목록
========================================================= */

.aurum-comments__results {
	padding-top: 30px;
	scroll-margin-top: 30px;
}

.aurum-comments__results[aria-busy="true"] {
	opacity: 0.55;
	pointer-events: none;
}

.aurum-comments__title {
	margin: 0 0 8px;
	color: var(--aurum-comments-text);
	font-size: 16px;
	font-weight: 700;
	line-height: 145%;
	letter-spacing: -2%;
}

.aurum-comments__count {
	color: var(--aurum-comments-blue);
}

.aurum-comments__list {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.aurum-comments__comment {
	position: relative;
	padding: 15px 20px;
	border: 1px solid var(--aurum-comments-line);
	border-radius: 12px;
	background: #fff;
}

.aurum-comments__comment-header {
	display: flex;
	align-items: baseline;
	gap: 10px;
}

.aurum-comments__author {
	font-size: 14px;
	font-weight: 700;
	line-height: 145%;
	letter-spacing: -2%;
}

.aurum-comments__date {
	color: var(--aurum-comments-muted);
	font-size: 12px;
	font-weight: 400;
	line-height: 135%;
	letter-spacing: -2%;
}

.aurum-comments__content {
	margin-top: 5px;
	font-size: 16px;
	font-weight: 400;
	line-height: 145%;
	letter-spacing: -2%;
	word-break: break-word;
}

.aurum-comments__content p {
	margin: 0;
	/* 테마/Elementor의 p 글자 크기 대신 부모(.aurum-comments__content) 값 사용 */
	font-size: inherit;
}

.aurum-comments__content p + p {
	margin-top: 0.6em;
}

.aurum-comments__actions {
	display: flex;
	justify-content: space-between;
	align-items: center;
	min-height: 16px;
	margin-top: 8px;
}

/* 버튼이 없는 액션 줄(권한 없는 대댓글 등)은 공간 차지하지 않음 */
.aurum-comments__actions:not(:has(button)) {
	display: none;
}

.aurum-comments__owner-actions {
	display: flex;
	gap: 14px;
	margin-left: auto;
}

.aurum-comments__text-button {
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--aurum-comments-muted);
	font-size: 12px !important;
	font-weight: 400;
	line-height: 135%;
	letter-spacing: -2%;
	cursor: pointer;
}

.aurum-comments__text-button:hover,
.aurum-comments__text-button:focus-visible {
	color: var(--aurum-comments-blue);
	background: transparent;
}


/* =========================================================
   대댓글 스레드
   - 부모 댓글 본문 기준 20px 들여쓰기 + 왼쪽 1px 세로선
   - 답글 입력창은 스레드 하단, 버튼 줄은 세로선 밖(아래)
========================================================= */

.aurum-comments__thread {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 20px;
	margin: 20px 20px 0;
	padding-left: 20px;
}

.aurum-comments__thread[hidden] {
	display: none;
}

.aurum-comments__thread::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background: #DDDDDD;
}

/* 답글 입력 중: 세로선은 입력창까지만 (버튼 줄 높이 38px + 간격 10px 제외) */
.aurum-comments__thread.is-replying::before {
	bottom: 48px;
}

.aurum-comments__replies {
	display: flex;
	flex-direction: column;
	gap: 25px;
}

.aurum-comments .aurum-comments__comment--reply {
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
}

/* 대댓글 수정/삭제 버튼 끝을 원댓글 버튼 끝과 맞춤 (스레드 우측 margin 20px 상쇄) */
.aurum-comments__comment--reply .aurum-comments__owner-actions {
	margin-right: -20px;
}

.aurum-comments__reply-form:empty {
	display: none;
}


/* =========================================================
   인라인 입력창 (답글 / 수정)
========================================================= */

.aurum-comments__inline-editor {
	margin-top: 10px;
}

.aurum-comments__reply-form .aurum-comments__inline-editor {
	margin-top: 0;
}

.aurum-comments .aurum-comments__inline-textarea {
	display: block;
	width: 100%;
	height: 52px;
	padding: 14px 15px;
	margin: 0 0 10px;
	resize: none;
	border: 1px solid var(--aurum-comments-line);
	border-radius: 12px;
	outline: none;
	background: var(--aurum-comments-panel);
	color: var(--aurum-comments-text);
	font-size: 14px;
	font-weight: 400;
	line-height: 145%;
	letter-spacing: -2%;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.aurum-comments__inline-actions {
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 5px;
}

.aurum-comments .aurum-comments__inline-cancel {
	min-height: 38px;
	padding: 8px 20px;
	border: 0;
	background: transparent;
	color: var(--aurum-comments-disabled-text);
	font-size: 14px;
	font-weight: 400;
	line-height: 145%;
	letter-spacing: -2%;
	cursor: pointer;
}

.aurum-comments .aurum-comments__inline-cancel:hover,
.aurum-comments .aurum-comments__inline-cancel:focus-visible {
	background: transparent;
	color: var(--aurum-comments-text);
}

/* 대댓글 입력창의 취소 버튼은 볼드 */
.aurum-comments .aurum-comments__reply-form .aurum-comments__inline-cancel {
	font-weight: 700;
}

.aurum-comments__empty {
	margin: 0;
	padding: 70px 20px;
	border: 1px solid var(--aurum-comments-line);
	border-radius: 12px;
	color: #888;
	text-align: center;
}


/* =========================================================
   페이지네이션 (38px 원형, 숫자 간격 5px / 화살표 간격 15px)
========================================================= */

.aurum-comments__pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 5px;
	margin-top: 30px;
}

.aurum-comments .aurum-comments__page {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	border: 1px solid var(--aurum-comments-line);
	border-radius: 50%;
	background: #fff;
	color: var(--aurum-comments-muted);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	cursor: pointer;
}

.aurum-comments .aurum-comments__page--prev {
	margin-right: 10px;
}

.aurum-comments .aurum-comments__page--next {
	margin-left: 10px;
}

.aurum-comments .aurum-comments__page.is-current {
	border-color: var(--aurum-comments-blue);
	background: var(--aurum-comments-blue);
	color: #fff;
}

.aurum-comments .aurum-comments__page:disabled {
	border-color: #F2F2F2;
	background: #F2F2F2;
	cursor: default;
}

.aurum-comments__page--arrow span {
	display: block;
	width: 7px;
	height: 7px;
	border-top: 1.5px solid #777;
	border-right: 1.5px solid #777;
}

.aurum-comments__page--prev span {
	transform: rotate(-135deg);
	margin-left: 3px;
}

.aurum-comments__page--next span {
	transform: rotate(45deg);
	margin-right: 3px;
}

.aurum-comments__page--arrow:disabled span {
	border-color: #ccc;
}


/* =========================================================
   TABLET / MOBILE : 1024px 이하
========================================================= */

@media (max-width: 1024px) {
	.aurum-comments__composer {
		padding: 15px;
	}

	.aurum-comments .aurum-comments__textarea {
		padding: 15px;
	}

	.aurum-comments .aurum-comments__submit {
		min-height: 38px;
		padding: 8px 20px;
	}

	.aurum-comments__results {
		padding-top: 25px;
	}

	.aurum-comments__title {
		margin: 0 0 5px;
	}

	.aurum-comments__comment {
		padding: 15px;
	}

	.aurum-comments__comment-header {
		justify-content: space-between;
	}

	.aurum-comments__content {
		font-size: 14px;
		margin-top: 5px;
	}

	.aurum-comments__thread {
		margin: 15px 0 0 0;
		padding-left: 15px;
	}

	/* 모바일은 스레드 우측 margin이 0이라 보정 불필요 */
	.aurum-comments__comment--reply .aurum-comments__owner-actions {
		margin-right: 0;
	}

	.aurum-comments__replies {
		gap: 20px;
	}
}


/* =========================================================
   MOBILE : 767px 이하
   - Figma 모바일 기사 댓글 입력창 (node 14-12874 / 버튼 14-12893)
   - 바깥 회색 패널 없이 #F5F5F5 입력창 125px + 우측 버튼 38px
   - 포커스·버튼 활성/비활성 색상은 공통 규칙 그대로 사용
========================================================= */

@media (max-width: 767px) {
	.aurum-comments__composer {
		padding: 0;
		border-radius: 0;
		background: transparent;
	}

	.aurum-comments .aurum-comments__textarea {
		height: 125px;
		padding: 15px;
		border-color: transparent;
		background: #F5F5F5;
	}

	/* 내용이 입력된 상태는 흰 배경 */
	.aurum-comments .aurum-comments__textarea:not(:placeholder-shown) {
		background: #fff;
	}

	/* 흰 배경에서 입력창 경계가 사라지지 않도록 기본 테두리 복원 (포커스 시엔 공통 파란 테두리) */
	.aurum-comments .aurum-comments__textarea:not(:placeholder-shown):not(:focus) {
		border-color: var(--aurum-comments-line);
	}

	.aurum-comments__comment {
		border-radius: 8px;
	}

	.aurum-comments .aurum-comments__submit {
		min-height: 38px;
		padding: 8px 30px 7px;
		border-radius: 8px;
	}
}