/* ==========================================================================
   sections/notice.css — 공지사항 목록 · 상세 (9단계)
   --------------------------------------------------------------------------
   로드 조건: 공지 목록(아카이브) · 공지 상세에서만(inc/assets.php).

   ★★ 선택자는 전부 `.c4-notice` · `.c4-notice-item` · `.c4-notice-single` 안으로 한정한다.
      블로그 화면에는 이 파일이 로드되지 않지만, 로드되더라도 닿지 않게 둔다(9단계 제1원칙).
   ★ 사이드 박스가 없다(시안). 그래서 3열 그리드(layout.css)를 쓰지 않고
     **본문 컨테이너(`.c4-container`) 하나만** 쓴다 — 폭 720 / 모바일 327(좌우 24)이 거기서 나온다.
     폭 숫자를 여기에 다시 적지 말 것.
   ★ 페이지네이션 · '결과 없음'은 블로그 것을 그대로 쓴다(sections/pagination.css · no-results.css 는
     목록 계열 묶음으로 전 화면 로드된다). 공지용으로 다시 만들지 말 것.
   ========================================================================== */

/* ==========================================================================
   목록 — 세로 리듬 (PC 80 / 60 / 60 / 100 · 모바일 60 / 40 / 40 / 40)
   ========================================================================== */

.c4-notice {
	padding-top: var(--c4-page-pt);
	padding-bottom: var(--c4-page-pb-notice);   /* ★ PC 100 — 다른 화면과 다른 값(§3-4) */
}

.c4-notice__header { margin-bottom: var(--c4-notice-gap-title); }

/* 제목 — 페이지 제목 계열(블로그 목록 제목과 같은 계열), 가운데 정렬. 새 토큰을 만들지 않는다.
   ★ 옵션이 빈 값이면 이 블록은 렌더되지 않고 sr-only `<h1>` 만 남는다(위 간격도 함께 사라진다). */
.c4-notice__title {
	font-size: var(--c4-fs-page-title);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-page-title);
	color: var(--c4-color-text);
	text-align: center;
}

/* ==========================================================================
   목록 — 테두리
   ★★ 위 테두리는 **첫 항목에 한 번**(2026-10-12 리빌 때문에 목록에서 옮김 — 위치 · 높이 같다), 아래 테두리는 **항목마다**.
      항목마다 위아래를 둘 다 주면 이웃한 선이 겹쳐 2px 로 보이고, 위를 빠뜨리면 첫 항목 위가 뚫린다.
   ========================================================================== */

.c4-notice__list {
	list-style: none;
	margin: 0;
	padding: 0;
	/* 위 테두리는 첫 항목에(아래) — 처음엔 여기 걸었는데 계단식 리빌(2026-10-12)에서 항목보다 먼저 떠 있어서 옮겼다. 위치 · 높이 같다. */
}

.c4-notice__list + .c4-pagination { margin-top: var(--c4-notice-gap-pagination); }

/*
 * 항목 — 제목(좌) · 날짜(우) 양끝 정렬, 세로 **가운데**.
 * ★ 시안은 일반 항목이 위 정렬, 고정 항목이 가운데로 그려져 있다 — **둘 다 가운데로 통일**한다.
 *   섞어 두면 고정 항목과 일반 항목의 글자선이 서로 어긋나 보인다(9단계 결정).
 * ★ 높이는 내용만큼이다. 고정 높이를 주지 말 것.
 * ★★ 아래 여백에서 테두리 두께를 뺀다 — 시안 패딩(18)은 INSIDE 테두리 1 을 **포함한** 값이라
 *    그대로 쓰면 항목마다 1px 씩 커진다(시안 항목 바깥 높이 PC 58 = 16 + 24 + 18 · 모바일 50 = 12 + 24 + 14 — 시안 갱신: 2026-10-06, 옛 시안 59).
 */
.c4-notice-item {
	position: relative;   /* 제목 링크 오버레이(::after)의 기준 */
	display: flex;
	align-items: center;
	justify-content: space-between;
	/* ★ 제목이 길어도 말줄임표가 날짜에 붙지 않게 최소 간격을 보장한다(시안에 없는 값 — 9단계 결정). */
	gap: var(--c4-notice-title-date-gap);
	padding-top: var(--c4-notice-item-pt);
	padding-bottom: calc(var(--c4-notice-item-pb) - var(--c4-border-w));
	border-bottom: var(--c4-border-w) solid var(--c4-color-border);
}

/* 첫 항목은 위 여백을 1px 줄이고 그 자리에 목록 맨 위 테두리 — 바깥 높이는 다른 항목과 같다(시안: 목록 위 끝 → 첫 제목 16). */
.c4-notice-item:first-child {
	padding-top: calc(var(--c4-notice-item-pt) - var(--c4-border-w));
	border-top: var(--c4-border-w) solid var(--c4-color-border);
}

/*
 * 제목 칸 — 시안 `Body/body2_bold` 16 / 700 / 1.5 / -4%, **PC · 모바일 같음**(시안 갱신: 2026-10-06 — 옛 `Title/Table_title` 18 / 16 / 1.4).
 *   기존 Body 토큰을 그대로 쓴다(공지 전용 글자 토큰 없음). 색은 기본 텍스트.
 *   줄 높이 16 × 1.5 = 24 라 항목 높이가 PC 16 + 24 + 18 = 58 · 모바일 12 + 24 + 14 = 50 으로 딱 떨어진다.
 * ★★ `min-width: 0` 이 핵심이다. flex 자식은 기본이 `min-width: auto` 라 내용보다 작아지지 않아서,
 *    없으면 긴 제목이 말줄임되지 않고 **날짜를 오른쪽 밖으로 밀어낸다.**
 * ★ 압정 아이콘과 제목 링크를 가로로 놓는 칸이기도 하다(아이콘 ↔ 제목 7).
 */
.c4-notice-item__title {
	display: flex;
	align-items: center;
	gap: var(--c4-notice-pin-gap);
	min-width: 0;
	font-size: var(--c4-fs-body2);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text);
}

/* 1줄 말줄임 — 블로그 카드 제목(2줄 클램프)과 다르다. 말줄임은 링크 자신이 한다(링크가 제목 칸 안에서 줄어든다). */
.c4-notice-item__link {
	display: block;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* 항목 전체 클릭 — 항목을 <a> 로 감싸지 않고 제목 링크에 오버레이를 씌운다(블로그 카드와 같은 방식). */
.c4-notice-item__link::after {
	content: "";
	position: absolute;
	inset: 0;
}

/*
 * 날짜 — 시안 `Body/body3` 15 / **400** / 1.5 / -4%, grey500(시안 갱신: 2026-10-06 — 옛 `Body/Date` Medium 15). 기존 Body 토큰 그대로.
 * ★★ 상세 날짜(`--c4-fs-single-date` Medium 14)와 크기 · 굵기가 다르다(색만 같다) — 토큰 공유 금지.
 * ★ 줄어들지 않는다 — 긴 제목이 오면 제목 쪽이 줄어든다.
 */
.c4-notice-item__date {
	flex-shrink: 0;
	font-size: var(--c4-fs-body3);
	font-weight: var(--c4-fw-regular);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text-muted);
}

/* ---------- 고정 공지 ---------- */

/* 제목 색 = 포인트 컬러(변수 참조 — hex 금지). 압정은 fill="currentColor" 라 같은 색을 그대로 따라간다. */
.c4-notice-item--pinned .c4-notice-item__title { color: var(--c4-color-accent); }

/* 상세 끝 '목록으로'(2026-10-15 사용자 지시 · 마크업 single-c4_notice.php) — 닥터노트 상세(single.css .c4-single__back)와 같은 간격 · 가운데. single.css 는 공지 상세에 싣지 않아 여기 둔다 */
.c4-notice-single .c4-single__back {
	margin: var(--c4-single-back-gap) 0 0;
	text-align: center;
}

/* ★ 고정이 아닌 항목에는 아이콘 자리를 비워 두지 않는다(시안: 일반 항목 제목은 왼쪽 끝에서 시작) —
     아이콘은 고정 항목에만 마크업으로 들어가며 빈 칸을 남기지 않는다. */
.c4-notice-item__pin {
	flex-shrink: 0;
	width: var(--c4-notice-pin);
	height: var(--c4-notice-pin);
}

/* ==========================================================================
   상세 — ★ 시안에 공지 상세 화면이 없다. 새 디자인을 짓지 않고 블로그 상세의 **토큰**을 재사용한다.
   · ★★ 클래스는 **공지 전용**이다. 블로그 상세 클래스(`.c4-single__*`)를 빌리지 않는다 —
       블로그 상세용 single.css 는 공지 상세에서 **로드되지 않는다**(inc/assets.php 가 이 테마 CPT 를 뺀다).
   · 참조 토큰: 상세 제목 계열(`--c4-fs-single-title` / `-m` · `--c4-lh-single-title`) · 상세 날짜 계열
     (`--c4-fs-single-date`, Medium, `--c4-color-text-muted`) · 제목 → 날짜(`--c4-single-date-gap` / `-m`) ·
     제목 블록 → 본문(`--c4-single-head-gap` / `-m`, PC 40 / 모바일 28).
     ★ 목록의 날짜(`Body/body3` 15 Regular)가 아니라 **상세 날짜 Medium 14** 다.
   · 카테고리 라벨이 없으므로 블로그 상세의 '카테고리 → 제목 8' 은 처음부터 없다.
   · 본문: `.c4-entry-content`(article.css — is_singular() 로 로드) 그대로.
   · 위아래 여백: 고정 페이지 값(§3-4 '약관 · 그 밖의 고정 페이지' 줄 — 상단 80/60 · 하단 60/60).
   ========================================================================== */

.c4-notice-single {
	padding-top: var(--c4-page-pt);
	padding-bottom: var(--c4-page-pb-page);
}

/*
 * 제목 블록 — ★★ 세로로 쌓는 묶음은 flex column 으로 둔다(DESIGN-TOKENS §3-2-1).
 *   블록 컨테이너 안의 인라인 줄은 부모 글꼴로 만든 보이지 않는 기준 글자(strut) 높이를 따라가서,
 *   선언한 간격보다 몇 px 씩 벌어진다(4단계 상세 제목 블록에서 실제로 80 → 84 · 8 → 11 이 됐다).
 *   블로그 상세 클래스를 빌리지 않으므로 그 규칙도 여기서 **다시** 걸어야 한다.
 */
.c4-notice-single__head {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	margin-bottom: var(--c4-single-head-gap);
}

/* 제목 · 날짜 아래 검은 선 한 줄(2026-10-15 사용자 지시 · 상세는 전부 같게 — 글 상세 single.css '.c4-single__head::after' 와 같은 규칙 · 같은 토큰) */
.c4-notice-single__head::after {
	content: "";
	align-self: stretch;
	height: var(--c4-border-w);
	margin-top: var(--c4-single-head-line-gap);
	background: var(--c4-color-text);
}

.c4-notice-single__title {
	font-size: var(--c4-fs-single-title);
	font-weight: var(--c4-fw-bold);
	line-height: var(--c4-lh-single-title);
	color: var(--c4-color-text);
}

.c4-notice-single__date {
	margin-top: var(--c4-single-date-gap);
	font-size: var(--c4-fs-single-date);
	font-weight: var(--c4-fw-medium);
	line-height: var(--c4-lh-body);
	color: var(--c4-color-text-muted);
}

/* ==========================================================================
   모바일 — 기준선 768 (테마 공통 분기점 그대로. 공지용 분기점을 새로 만들지 않는다)
   ========================================================================== */

@media (max-width: 767.98px) {
	.c4-notice {
		padding-top: var(--c4-page-pt-m);
		padding-bottom: var(--c4-page-pb-notice-m);
	}

	.c4-notice__header { margin-bottom: var(--c4-notice-gap-title-m); }

	.c4-notice__title { font-size: var(--c4-fs-page-title-m); }

	.c4-notice__list + .c4-pagination { margin-top: var(--c4-notice-gap-pagination-m); }

	.c4-notice-item {
		padding-top: var(--c4-notice-item-pt-m);
		padding-bottom: calc(var(--c4-notice-item-pb-m) - var(--c4-border-w));
	}

	.c4-notice-item:first-child { padding-top: calc(var(--c4-notice-item-pt-m) - var(--c4-border-w)); }

	/* 날짜를 제목 아래로 — 그만큼 칸이 높아진다(2026-10-15 사용자 지시 '모바일에서만 공지사항 · 언론보도 일괄 · 날짜를 제목 아래로 내리고 그만큼 칸 높이 늘려' — 언론보도 줄도 같은 클래스) · 제목은 한 줄 … 그대로(이제 전 폭) */
	.c4-notice-item {
		flex-direction: column;
		align-items: stretch;
		gap: var(--c4-notice-title-date-gap-m);
	}

	.c4-notice-single .c4-single__back { margin-top: var(--c4-single-back-gap-m); }

	.c4-notice-single { padding-top: var(--c4-page-pt-m); }

	.c4-notice-single__head  { margin-bottom: var(--c4-single-head-gap-m); }
	.c4-notice-single__head::after { margin-top: var(--c4-single-head-line-gap-m); }
	.c4-notice-single__title { font-size: var(--c4-fs-single-title-m); }
	.c4-notice-single__date  { margin-top: var(--c4-single-date-gap-m); }
}