/* =========================================================
   공지사항 · 뉴스 (Views/Notice/Index.cshtml, Read.cshtml, Views/News/Index.cshtml)

   배치만 둡니다. 색·반경·서체·컴포넌트 모양은 components.css 의 몫입니다.
   클래스 이름에 pd- 를 쓰지 않습니다. pd- 는 시스템 것입니다.

   뉴스도 같이 둡니다. 같은 자리(고객센터)의 같은 모양 목록(제목 + 등록일)
   이라 규칙을 한 벌 더 쓸 이유가 없습니다. 다른 점은 제목이 외부 기사로
   나가는 것 하나뿐입니다.
   ========================================================= */

.page-notice,
.page-news {
  /* 글줄 폭은 고객센터 화면끼리 맞춥니다 — tokens.css 의 --pd-read-w. */
  max-width: var(--pd-read-w);
  display: flex;
  flex-direction: column;
  gap: var(--pd-space-5);
  /* 위 여백은 .container 가 이미 24px 를 냅니다(layout.css 의
     `.submenu + .container`). 여기서 24px 를 또 주면 100px 짜리 제목 줄
     아래가 48px 로 벌어져 제목과 본문이 따로 노는 것으로 보였습니다.
     아래 여백만 남깁니다. */
  padding-block: 0 var(--pd-space-12);
}

/* --- 목록 --- */

/* 날짜 열은 내용 길이가 정해져 있다. 제목이 남는 폭을 전부 가져간다. */
.page-notice__date-col,
.page-news__date-col { width: 120px; }

/* 목록의 제목은 줄 전체가 아니라 글자만 누르게 한다.
   행 전체를 누르게 만들려면 행에 링크를 겹쳐야 하는데,
   그러면 제목을 복사하거나 새 탭으로 여는 동작이 어려워진다. */
.page-notice__link,
.page-news__link {
  color: var(--pd-text);
  text-decoration: none;
  font-weight: var(--pd-weight-medium);
}
.page-notice__link:hover,
.page-news__link:hover {
  color: var(--pd-accent-on-subtle);
  text-decoration: underline;
}

/* 새 창으로 나간다는 표시. 제목 글자와 같은 줄에 붙습니다.
   base.css 가 .pd-root 안의 svg 를 display:block 으로 두기 때문에(그림이
   줄 아래로 삐져 나오는 것을 막으려고) 여기서만 되돌립니다. 안 그러면
   아이콘이 제목 다음 줄로 떨어집니다. */
.page-news__link .pd-icon {
  display: inline-block;
  width: var(--pd-icon-sm);
  height: var(--pd-icon-sm);
  margin-inline-start: var(--pd-space-1);
  vertical-align: -3px;
  color: var(--pd-text-placeholder);
}

/* --- 상세 --- */

.page-notice__head {
  /* 제목이 길면 날짜가 밀려 내려간다. 붙여 두면 제목이 잘린다. */
  flex-wrap: wrap;
  gap: var(--pd-space-2) var(--pd-space-4);
}
.page-notice__title {
  font-size: 20px;
  line-height: 1.45;
  /* pd-card__head 의 space-between 안에서 남는 폭을 가져간다. */
  flex: 1 1 20em;
  min-width: 0;
}
.page-notice__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--pd-space-2);
  font-size: 13px;
  color: var(--pd-text-muted);
  white-space: nowrap;
}