/*
 * 게시판 — 목록·상세·글쓰기. 이전 사이트 BoardTabs·PostList·CommentItem·forum 화면의 스코프 CSS 를 옮겼다.
 * 모든 선택자는 .forum 아래로 좁힌다(app.css 의 .page·.notice·.pager 등과 겹치지 않게).
 * 방향이 있는 속성은 논리 속성만 쓴다(ar·ur 오른쪽→왼쪽).
 */

/* ── 공통 ─────────────────────────────────────── */
.forum {
	display: grid;
	gap: var(--wa-space-l);
	max-inline-size: 48rem;
}

.forum .forum-back {
	display: inline-flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	justify-self: start;
	color: var(--pes-muted);
	font-size: var(--wa-font-size-s);
	text-decoration: none;
}
.forum .forum-back:hover { color: var(--pes-accent); }

.forum .forum-badge {
	display: inline-flex;
	align-items: center;
	padding: 0.1rem 0.6rem;
	border: 1px solid var(--pes-border);
	border-radius: 999px;
	color: var(--pes-muted);
	font-size: 0.75rem;
	font-weight: 600;
	white-space: nowrap;
}

.forum .forum-link-button {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pes-muted);
	font: inherit;
	font-size: var(--wa-font-size-s);
	cursor: pointer;
}
.forum .forum-link-button:hover { color: var(--pes-accent); }
.forum .forum-link-button[aria-pressed='true'] { color: var(--wa-color-danger-fill-loud); }
.forum .forum-danger-text:hover { color: var(--wa-color-danger-fill-loud); }

.forum .pes-button.forum-danger { border-color: var(--wa-color-danger-border-normal, var(--pes-border)); color: var(--pes-danger); }
.forum .pes-button.forum-danger:not(:disabled):hover { background: var(--pes-danger-soft); border-color: var(--pes-danger); color: var(--pes-danger); }

.forum .forum-error {
	margin: 0;
	color: var(--pes-danger);
	font-size: var(--wa-font-size-s);
}

.forum .forum-flash {
	margin: 0;
	padding: var(--wa-space-s) var(--wa-space-m);
	border-radius: var(--pes-radius-control);
	background: var(--pes-success-soft);
	color: var(--pes-success);
	font-size: var(--wa-font-size-s);
}

.forum .forum-form-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wa-space-xs);
}

.forum textarea.pes-control {
	inline-size: 100%;
	resize: vertical;
}

/* 사용자 글(제목·본문·코멘트·이름) — 방향을 글 내용이 정한다. 아랍어 화면의 한국어 글, 한국어 화면의 아랍어 글이 섞여도 바르게 보인다 */
.forum :is(.forum-post-title, .forum-post-body, .forum-comment-text, .forum-author),
.forum-show .forum-post-head h1 {
	unicode-bidi: plaintext;
	text-align: -webkit-match-parent;   /* 줄 맞춤은 화면 방향을 따른다(Chrome·Safari) */
	text-align: match-parent;           /* (Firefox) */
}

/* ── 탭·검색 ───────────────────────────────────── */
.forum .forum-tabs { flex-wrap: wrap; }

.forum .forum-search {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wa-space-xs);
}
.forum .forum-search .pes-control { flex: 1 1 14rem; }
.forum .forum-search-clear {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
	color: var(--pes-muted);
	font-size: var(--wa-font-size-s);
	text-decoration: none;
}
.forum .forum-search-clear:hover { color: var(--pes-accent); }

/* 좁은 화면: 탭은 줄바꿈 대신 가로 스크롤 */
@media (max-width: 640px) {
	.forum .forum-tabs {
		flex-wrap: nowrap;
		scrollbar-width: none;
	}
	.forum .forum-tabs::-webkit-scrollbar { display: none; }
	.forum .forum-tabs .pes-tab { flex: 0 0 auto; }
}

/* ── 글 목록 ───────────────────────────────────── */
.forum .forum-posts {
	display: grid;
	gap: var(--wa-space-2xs);
	margin: 0;
	padding: 0;
	list-style: none;
}

.forum .forum-post-item {
	margin: 0;                     /* Web Awesome 기본 li 들여쓰기를 없앤다 */
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-control);
	background: var(--pes-surface);
	transition:
		border-color var(--pes-motion),
		background-color var(--pes-motion);
}
.forum .forum-post-item:hover {
	border-color: var(--pes-accent);
	background: var(--pes-accent-soft);
}

.forum .forum-post-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--wa-space-s);
	padding: var(--wa-space-s) var(--wa-space-m);
	color: var(--pes-ink);
	text-decoration: none;
}

.forum .forum-post-main {
	display: grid;
	gap: 0.2rem;
	min-inline-size: 0;
}

.forum .forum-post-titlerow {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wa-space-2xs);
	min-inline-size: 0;
}

.forum .forum-post-title {
	font-weight: 600;
	overflow-wrap: anywhere;
}

.forum .forum-post-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.25rem var(--wa-space-s);
	margin: 0;
	color: var(--pes-muted);
	font-size: var(--wa-font-size-s);
}

.forum .forum-author { overflow-wrap: anywhere; }

.forum .forum-chevron {
	flex: 0 0 auto;
	color: var(--pes-muted);
}

.forum .forum-empty {
	margin: 0;
	display: grid;
	justify-items: center;
	gap: var(--wa-space-xs);
	padding-block: var(--wa-space-2xl);
	color: var(--pes-muted);
	text-align: center;
}
.forum .forum-empty > i { font-size: 2rem; }
.forum .forum-empty p { margin: 0; }

/* ── 글 상세 ───────────────────────────────────── */
.forum-show .forum-post-head {
	display: grid;
	justify-items: start;
	gap: var(--wa-space-xs);
}
.forum-show .forum-post-head h1 {
	font-size: clamp(1.5rem, 2vw, 2rem);
	overflow-wrap: anywhere;
}

.forum-show .forum-post-body {
	padding-block: var(--wa-space-s);
	color: var(--pes-ink);
	line-height: 1.8;
	white-space: pre-wrap;         /* 평문의 줄바꿈을 지킨다 */
	overflow-wrap: anywhere;
}

.forum-show .forum-post-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wa-space-s);
	padding-block-end: var(--wa-space-m);
	border-block-end: 1px solid var(--pes-border);
}
.forum-show .forum-spacer { flex: 1 1 auto; }
.forum-show .forum-like[aria-pressed='true'] {
	border-color: transparent;
	background: var(--pes-accent);
	color: var(--pes-on-accent);
}

/* ── 코멘트 ─────────────────────────────────────── */
.forum-show .forum-comments {
	display: grid;
	gap: var(--wa-space-m);
}
.forum-show .forum-comments h2 {
	margin: 0;
	font-size: var(--wa-font-size-l);
}

.forum-show .forum-comment-form,
.forum-show .forum-inline-form {
	display: grid;
	gap: var(--wa-space-xs);
}

.forum-show .forum-login-note {
	margin: 0;
	padding: var(--wa-space-s) var(--wa-space-m);
	border: 1px dashed var(--pes-border);
	border-radius: var(--pes-radius-control);
	color: var(--pes-muted);
	font-size: var(--wa-font-size-s);
}

.forum-show .forum-comments-empty {
	margin: 0;
	padding-block: var(--wa-space-m);
	color: var(--pes-muted);
}

/* 맨 위 코멘트끼리 구분선 */
.forum-show .forum-thread > .forum-comment + .forum-comment {
	margin-block-start: 0.25rem;
	padding-block-start: 0.25rem;
	border-block-start: 1px solid var(--pes-border);
}

.forum-show .forum-comment {
	position: relative;
	scroll-margin-block-start: 8rem;
	padding-block: 0.35rem;
}
.forum-show .forum-comment:target > .forum-comment-content,
.forum-show .forum-comment:target > .forum-comment-head {
	background: var(--pes-accent-soft);
}

.forum-show .forum-comment-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wa-space-2xs) var(--wa-space-xs);
	font-size: var(--wa-font-size-s);
}
.forum-show .forum-comment-head .forum-author { font-weight: 600; }
.forum-show .forum-comment-head time {
	color: var(--pes-muted);
	font-size: var(--wa-font-size-xs);
}

.forum-show .forum-comment-text {
	margin: 0.15rem 0 0;
	line-height: 1.6;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}
.forum-show .forum-comment-text.is-deleted {
	color: var(--pes-muted);
	font-style: italic;
}

.forum-show .forum-comment-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wa-space-xs) var(--wa-space-s);
	margin-block-start: 0.25rem;
}

.forum-show .forum-reply-form {
	margin-block-start: var(--wa-space-xs);
	padding: var(--wa-space-s);
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-control);
	background: var(--pes-subtle);
}
.forum-show .forum-reply-hint {
	display: flex;
	align-items: center;
	gap: var(--wa-space-2xs);
	margin: 0;
	color: var(--pes-muted);
	font-size: var(--wa-font-size-s);
}

/* 답글 — 세로선으로 스레드를 잇는다. 4단계 넘게는 더 들여 쓰지 않는다 */
.forum-show .forum-comment-children {
	margin-inline-start: 0.5rem;
	padding-inline-start: 1rem;
}
.forum-show .forum-comment[data-depth='4'] > .forum-comment-children {
	margin-inline-start: 0;
	padding-inline-start: 0;
}

.forum-show .forum-thread-line {
	position: absolute;
	inset-block: 2rem 0;
	inset-inline-start: 0;
	inline-size: 0.5rem;
	padding: 0;
	border: 0;
	border-inline-start: 1px solid var(--wa-color-neutral-border-normal, var(--pes-border));
	background: none;
	cursor: pointer;
}
.forum-show .forum-thread-line:hover,
.forum-show .forum-thread-line:focus-visible {
	border-inline-start: 3px solid var(--pes-accent);
	outline: none;
}
.forum-show .forum-comment[data-depth='4'] > .forum-thread-line { display: none; }

/* 접은 스레드 — 본문·답글을 숨기고 "[+N]" 을 보인다 */
.forum-show .forum-collapsed-info {
	display: none;
	padding: 0;
	border: 0;
	background: none;
	color: var(--pes-accent-ink);
	font: inherit;
	font-size: var(--wa-font-size-xs);
	font-weight: 600;
	cursor: pointer;
}
.forum-show .forum-comment.is-collapsed > .forum-collapsed-info,
.forum-show .forum-comment.is-collapsed > .forum-comment-head .forum-collapsed-info { display: inline; }
.forum-show .forum-comment.is-collapsed > .forum-comment-content,
.forum-show .forum-comment.is-collapsed > .forum-comment-text,
.forum-show .forum-comment.is-collapsed > .forum-comment-children,
.forum-show .forum-comment.is-collapsed > .forum-thread-line { display: none; }

/* ── 신고 창 ───────────────────────────────────── */
.forum-show .forum-dialog {
	inline-size: min(28rem, calc(100vw - 2rem));
	padding: 0;
	border: 1px solid var(--pes-border);
	border-radius: var(--pes-radius-card);
	background: var(--pes-surface);
	color: var(--pes-ink);
	box-shadow: var(--pes-shadow-overlay);
}
.forum-show .forum-dialog::backdrop { background: rgb(0 0 0 / 0.4); }
.forum-show .forum-report-form {
	display: grid;
	gap: var(--wa-space-s);
	padding: var(--wa-space-l);
}
.forum-show .forum-report-form h2 {
	margin: 0;
	font-size: var(--wa-font-size-l);
}

/* ── 글쓰기·고치기 ─────────────────────────────── */
.forum-write .forum-write-form {
	display: grid;
	gap: var(--wa-space-m);
}

.forum .forum-field {
	display: grid;
	gap: var(--wa-space-2xs);
	min-inline-size: 0;
	margin: 0;
	padding: 0;
	border: 0;
}
.forum .forum-field-label {
	padding: 0;
	font-size: var(--wa-font-size-s);
	font-weight: 600;
}
.forum-write textarea.pes-control { min-block-size: 12rem; }

/* 카테고리 선택 — 둥근 칩 모양 라디오. 실제 라디오는 숨기고 글자 칩을 누른다 */
.forum-write .forum-cat-choices {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--wa-space-2xs);
}
.forum-write .forum-cat-chip {
	position: relative;
	display: inline-flex;
	cursor: pointer;
}
.forum-write .forum-cat-chip input {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	opacity: 0;
	pointer-events: none;
}
.forum-write .forum-cat-chip span {
	padding: var(--wa-space-2xs) var(--wa-space-m);
	border: 1px solid var(--pes-border);
	border-radius: 999px;
	color: var(--pes-muted);
	font-size: var(--wa-font-size-s);
	font-weight: 600;
	user-select: none;
	transition:
		background-color var(--pes-motion),
		border-color var(--pes-motion),
		color var(--pes-motion);
}
.forum-write .forum-cat-chip:hover span {
	border-color: var(--pes-accent);
	background: var(--pes-accent-soft);
	color: var(--pes-accent-ink);
}
.forum-write .forum-cat-chip input:checked + span {
	border-color: var(--pes-accent);
	background: var(--pes-accent);
	color: var(--pes-on-accent);
}
.forum-write .forum-cat-chip input:focus-visible + span {
	outline: 2px solid var(--pes-accent);
	outline-offset: 2px;
}

/* ── 게시판 — 글의 표면 · 제목 · 본문 ─────────────────── */
.forum .forum-posts { border-radius: var(--pes-radius-card); background: var(--pes-surface); box-shadow: var(--pes-shadow-card); }
.forum .forum-post-link { padding-block: var(--wa-space-l); }
.forum .forum-post-title { line-height: 1.65; }
.forum .forum-post-meta { font-size: 0.83rem; line-height: 1.7; }
.forum .forum-post-body { padding: clamp(1rem, 2vw, 2rem); border: 1px solid var(--pes-border); border-radius: var(--pes-radius-card); background: var(--pes-surface); line-height: 1.9; overflow-wrap: anywhere; }
.forum .forum-write-form { padding: clamp(1rem, 2vw, 2rem); border: 1px solid var(--pes-border); border-radius: var(--pes-radius-card); background: var(--pes-surface); box-shadow: var(--pes-shadow-card); }