@charset "utf-8";

/*
 * front + oper 공통 화면 CSS — **L6(화면 전용)로 줄였다**
 *
 * ⚠️ **KRDS 가 주는 것은 여기 두지 않는다.** 버튼·입력·셀렉트·표·페이지네이션·정렬
 *    유틸·숨김 텍스트는 전부 krds/output.css 가 그린다 (절대 규칙 6).
 *    여기 남은 것은 **KRDS 에 대응물이 없는 것뿐**이다.
 *
 * ⚠️ **자체 색·간격 토큰(:root --color-*)을 걷어냈다.** 값은 --krds-* 만 쓴다.
 *    전에는 #0c4ca4 같은 값이 여기서 정의되어, KRDS 를 싣고도 화면이 옛 색으로 그려졌다.
 *
 * ⚠️ 함께 지운 것 — .btn* · .field · .search* · .tbl* · .no-data · .hint · .al-* ·
 *    .sz-* · .pd-* · .mg-* · .c-* · .bg-* · .bd-* · .u-blind · .u-hide · .u-flex ·
 *    .status · .pg · .paging · .required(→ L3) · .link-btn · .is-disabled.
 *    앞의 넷은 KRDS 로 옮겼고 나머지는 **쓰는 화면이 하나도 없었다**(실측).
 */

/* ── 페이지 골격 ─────────────────────────────────────────────────────────
 * 본문 폭·좌우 여백은 데코레이터의 KRDS .inner 가 정한다. 여기는 자리만 잡는다.
 */
.wrap {
	width: 100%;
}

.board-title {
	margin: 0 0 var(--krds-gap-6);
	color: var(--krds-light-color-text-bolder);
	font-size: var(--krds-pc-font-size-heading-small);
	font-weight: var(--krds-font-weight-bold);
}

.sec-title {
	margin: var(--krds-gap-8) 0 var(--krds-gap-4);
	color: var(--krds-light-color-text-bolder);
	font-size: var(--krds-pc-font-size-heading-xsmall);
	font-weight: var(--krds-font-weight-bold);
}

/* 화면 설명 한 줄. KRDS 의 form-hint 와 달리 **입력에 딸린 안내가 아니다** */
.page-desc {
	margin: 0 0 var(--krds-gap-6);
	color: var(--krds-light-color-text-subtle);
}

/* ── 폼 표 ───────────────────────────────────────────────────────────────
 * ⚠️ **입력 폼은 전부 KRDS 폼 그룹으로 옮겼다** 【D-220】. 남은 사용처는
 *    **읽기 전용 상세 2종**뿐이다 — `frontPostView.jsp` · `adminMemberDetail.jsp`.
 *    그 둘은 폼이 아니라 「항목-값」 표라 표로 두는 것이 맞다.
 *    ⚠️ **폼에는 다시 쓰지 않는다.** 새 폼은 `.form-group > .form-conts` 다
 *    (50-screen-jsp §3.2 · preflight 「KRDS 마크업 정본」).
 *
 * ⚠️ table-layout 을 auto 로 되돌리는 것이 핵심이다. KRDS output.css 가 맨 `table`
 *    선택자에 `table-layout: fixed` 를 걸어 두는데, **캡션이 있으면 셀에 준 width 를
 *    통째로 무시**하고 열을 똑같이 나눈다 — 라벨 열이 화면 절반을 차지해 입력칸이
 *    중앙으로 밀렸다. 캡션은 접근성상 뺄 수 없다(절대 규칙 8). (2026-09-08 실측)
 */
.tbl.data.form {
	table-layout: auto;
}

.tbl.data.form tbody th {
	width: 18rem;
	white-space: nowrap;
}

/* ── 조각 ────────────────────────────────────────────────────────────────
 * 목록 행에서 POST 로 넘어가는 자리에 쓰는 폼. 줄을 새로 만들지 않는다.
 */
.inline-post-form {
	display: inline;
	margin: 0;
	padding: 0;
}

.check-wrap {
	display: inline-block;
}

/* ── 약관 동의 상자 ──────────────────────────────────────────────────────
 * ⚠️ **`<pre>` 를 그대로 두면 320px 에서 가로 스크롤이 난다** (절대 규칙 10).
 *    약관 원문은 줄이 길고 `<pre>` 는 기본이 `white-space: pre` 라 줄바꿈을 안 한다 —
 *    `npm run a11y` 의 「가로 스크롤 없음」이 375px 에서 잡아냈다(scrollWidth 516).
 *    ⚠️ **원문 줄바꿈은 살려야 읽힌다** — 그래서 `pre-wrap` 이고 `normal` 이 아니다.
 * ⚠️ 상자에 `tabindex="0"`·`role="region"`·`aria-label` 이 붙어 있다(화면 쪽).
 *    키보드만으로 약관을 스크롤할 수 있어야 하므로 **높이를 제한하고 세로 스크롤을 준다**.
 */
.agree-cn {
	max-height: 24rem;
	overflow-y: auto;
	padding: var(--krds-padding-5);
	border: 1px solid var(--krds-light-color-border-gray-light);
	background-color: var(--krds-light-color-surface-white-subtle);
}

.terms-text {
	margin: 0;
	font-family: inherit;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

/* ── 댓글 ─────────────────────────────────────────────────────────────────
 * 2단계뿐이다. 들여쓰기는 margin-left 로만 하고 최소 폭 320px 에서도 안 넘친다.
 * ⚠️ 대댓글임을 **들여쓰기(색·여백)로만** 알리지 않는다 — 왼쪽 세로선이 함께 보인다.
 */
.cmnt {
	margin-top: var(--krds-gap-10);
	border-top: 1px solid var(--krds-light-color-border-secondary);
	padding-top: var(--krds-padding-7);
}

.cmnt-title {
	margin: 0 0 var(--krds-gap-5);
	color: var(--krds-light-color-text-bolder);
	font-size: var(--krds-pc-font-size-heading-xsmall);
	font-weight: var(--krds-font-weight-bold);
}

.cmnt-list {
	margin: 0 0 var(--krds-gap-6);
	padding: 0;
}

.cmnt-item {
	border-bottom: 1px solid var(--krds-light-color-divider-gray-light);
	padding: var(--krds-padding-5) 0;
}

.cmnt-item.is-reply {
	margin-left: var(--krds-gap-6);
	border-left: 2px solid var(--krds-light-color-border-secondary);
	padding-left: var(--krds-padding-5);
}

.cmnt-meta {
	margin: 0 0 var(--krds-gap-1);
	color: var(--krds-light-color-text-subtle);
}

.cmnt-writer {
	color: var(--krds-light-color-text-bolder);
	font-weight: var(--krds-font-weight-bold);
}

.cmnt-date {
	margin-left: var(--krds-gap-3);
}

.cmnt-cn {
	margin: 0;
	overflow-wrap: anywhere;
	white-space: pre-line;
}

.cmnt-deleted,
.cmnt-none {
	margin: 0;
	color: var(--krds-light-color-text-subtle);
}

.cmnt-act {
	display: flex;
	flex-wrap: wrap;
	gap: var(--krds-gap-3);
	margin-top: var(--krds-gap-3);
}

.cmnt-fold > summary {
	cursor: pointer;
	color: var(--krds-light-color-text-secondary);
}

.cmnt-form textarea {
	display: block;
	box-sizing: border-box;
	width: 100%;
	margin: var(--krds-gap-3) 0 var(--krds-gap-1);
}

/* ── 레이어 알림창(alert·confirm) ─────────────────────────────────────────
 * 색·간격·크기는 전부 KRDS 모달이 정한다. 여기서는 **본문 줄바꿈만** 손댄다 —
 * 메시지는 textContent 로 넣으므로(HTML 주입 차단) \n 이 그대로 남는다.
 */
.sem-dialog .sem-dialog-msg {
	margin: 0;
	white-space: pre-line;
	overflow-wrap: anywhere;
}

/* 보이는 순서는 취소 | 확인 이다. 마크업은 초점 때문에 반대다 - dialog.js 주석 참고 */
.sem-dialog .modal-btn [data-dialog="cancel"] {
	order: 0;
}

.sem-dialog .modal-btn [data-dialog="ok"] {
	order: 1;
}

/* ---------------------------------------------------------------------------
 * KRDS 에 대응물이 없어 화면이 직접 쓰던 것들 — **정의를 채운다** 【D-215】
 *
 *   ⚠️ 이 클래스들은 **마크업에만 있고 CSS 가 없었다.** 화면은 「그려지긴 하는」
 *      모습이라 사람 눈으로는 통과했고, 빌드·axe 도 울지 않았다.
 *      이제 `preflight` 의 「KRDS 마크업 정본」이 정의 없는 클래스를 막는다.
 *   ⚠️ 값은 --krds-* 토큰만. 색·글꼴을 직접 적으면 KrdsMarkupRuleTest 가 잡는다.
 * ------------------------------------------------------------------------- */

/* 절 설명 문단 — 제목 아래 한 줄 안내 */
.sec-desc {
	margin: 0 0 var(--krds-gap-4);
	color: var(--krds-light-color-text-subtle);
	font-size: var(--krds-pc-font-size-label-small);
}

/* 점 목록 — KRDS 는 ul 의 list-style 을 지운다. 안내문에서는 점이 있어야 읽힌다 */
.bullet-list {
	margin: 0 0 var(--krds-gap-5);
	padding-left: var(--krds-padding-5);
	list-style: disc;
}

.bullet-list > li {
	margin-bottom: var(--krds-gap-1);
}

/* 약관 상자 — 본문이 길어 스크롤을 준다 */
.agree-box {
	margin-bottom: var(--krds-gap-6);
	padding: var(--krds-padding-5);
	border: var(--krds-light-border-width-variable-regular) solid var(--krds-light-color-border-gray-light);
	border-radius: var(--krds-radius-medium2);
}

/* 언어 전환 — 헤더 오른쪽 위 */
.lang-switch {
	display: inline-flex;
	gap: var(--krds-gap-1);
	align-items: center;
	font-size: var(--krds-pc-font-size-label-small);
}

/* 지금 언어는 굵게 — ⚠️ 색으로만 알리지 않는다(절대 규칙 8). aria-current 가 함께 있다 */
.lang-switch [aria-current] {
	font-weight: var(--krds-font-weight-bold);
}

.lang-switch .sep {
	color: var(--krds-light-color-text-subtle);
}

/* 내 사진 — 원본 비율을 지키고 너무 커지지 않게만 */
.my-photo {
	max-width: 8rem;
	border-radius: var(--krds-radius-small1);
}

/* 첨부 목록 — ⚠️ KRDS .file-list 는 **업로드 컴포넌트 전용**이라 쓸 수 없다(실측) */
.attach-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.attach-list > li {
	padding: var(--krds-padding-2) 0;
}

.post-attach {
	margin-top: var(--krds-gap-6);
}

/* 이전·다음 글 — 목록으로 돌아가지 않고 옮겨 다니는 길 */
.post-nav {
	margin-top: var(--krds-gap-6);
	border-top: var(--krds-light-border-width-variable-regular) solid var(--krds-light-color-border-gray-light);
}

.post-nav .nav-label {
	display: inline-block;
	min-width: 3.5rem;
	color: var(--krds-light-color-text-subtle);
	font-weight: var(--krds-font-weight-bold);
}

/* 추천 — 숫자를 눈에 띄게. ⚠️ 상태는 글자로도 말한다 */
.post-rcmdt {
	margin-top: var(--krds-gap-5);
	text-align: center;
}

.post-rcmdt .rcmdt-cnt {
	margin-left: var(--krds-gap-2);
	font-weight: var(--krds-font-weight-bold);
}

/* 새 댓글 표식 — ⚠️ 색이 아니라 **글자**가 알린다(절대 규칙 8) */
.cmnt-new {
	margin-left: var(--krds-gap-1);
	color: var(--krds-light-color-text-danger);
	font-size: var(--krds-pc-font-size-label-small);
	font-weight: var(--krds-font-weight-bold);
}