/* style-pages.css — 소식·시설 페이지 전용
   시안 여섯 벌과 달리 한 벌만 만듭니다. 채택된 시안의 테마 클래스로
   body 클래스만 바꿔 쓰시면 색과 눈금이 그대로 따라옵니다.
   그림자는 쓰지 않습니다 — 배경색 차이와 1px 테두리로만 나눕니다. */

/* hidden 속성이 display 선언에 눌리지 않게 합니다 —
   목록에서 숨긴 카드가 그대로 보이던 원인입니다. */
[hidden] { display: none !important; }

/* ── 페이지 머리 ─────────────────────────────── */
.page-head { padding-bottom: 0; }

.page-head__lead {
  max-width: 640px;
  margin: 12px auto 0;
  color: var(--muted);
}

/* ── 분류 탭 ─────────────────────────────────
   폭이 아니라 글자 수에 맞춰 두되, 눌린 탭이 분명히 보이게 합니다. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.tab {
  padding: 9px 18px;
  border: 1px solid var(--line);
  border-radius: var(--radius-btn);
  background: var(--surface);
  color: var(--text);
  font-size: var(--fs-sm);
  font-weight: 700;
  line-height: normal;
  cursor: pointer;
}

.tab:hover { border-color: var(--primary-dk); color: var(--primary-dk); }

.tab[aria-pressed="true"] {
  background: var(--primary-dk);
  border-color: var(--primary-dk);
  color: #FFFFFF;
}

/* 목록 페이지에서는 카드 사이 간격을 조금 넓게 둡니다. */
#list { row-gap: 28px; }

.news__empty { margin-top: 20px; }

/* ── 시설 둘러보기 ─────────────────────────────
   시안 01 은 홈에서 종이색 섹션을 둘로 줄여 두었습니다. 그 규칙이
   여기까지 따라오면 여섯 공간이 한 덩어리로 보여, 이 페이지에서만
   교차 배경을 되살립니다. */
.room.section--alt { background: var(--paper); }

.room__head { margin-bottom: 18px; }

.room__head .eyebrow {
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.08em;
}

.room__photos {
  display: grid;
  gap: 20px;
}

.room__photos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.room__photos--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.room__photo { font-size: var(--fs-sm); }

.room__desc {
  max-width: 760px;
  margin-top: 18px;
}

/* ── 소식 상세 ───────────────────────────────── */
.post__in { max-width: 760px; }

.post__head {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--line);
}

.post__meta {
  display: flex;
  align-items: center;
  gap: 10px;
}

.post__title {
  margin-top: 12px;
  font-family: var(--font-heading);
  font-size: var(--fs-h2);
  line-height: 1.4;
  color: var(--heading);
}

.post__body { margin-top: 24px; }

.post__body p + p { margin-top: 20px; }

.post__photo {
  margin-top: 24px;
  font-size: var(--fs-sm);
}

.post__caption { margin-top: 8px; line-height: normal; }

/* 사진 다음에 오는 문단은 설명 줄과 붙지 않게 띄웁니다. */
.post__caption + p { margin-top: 24px; }

/* ── 이전 글 · 다음 글 ───────────────────────── */
.post__nav-in {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.post__nav-link {
  display: block;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-card);
  padding: 18px 22px;
}

.post__nav-link:hover { border-color: var(--primary-dk); }

.post__nav-link--next { text-align: right; }

.post__nav-k { display: block; line-height: normal; }

.post__nav-t {
  display: block;
  margin-top: 4px;
  font-weight: 700;
  color: var(--heading);
  line-height: 1.5;
}

.post__back { margin-top: 22px; }

/* ── 아래쪽 안내 ─────────────────────────────── */
.cta__lead { margin-top: 10px; color: var(--muted); }

.cta__btns {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-top: 20px;
}

@media (max-width: 768px) {
  .room__photos--2,
  .room__photos--3 { grid-template-columns: minmax(0, 1fr); }
  .post__nav-in { grid-template-columns: minmax(0, 1fr); }
  .post__nav-link--next { text-align: left; }
  .cta__btns { flex-direction: column; }
}