@charset "UTF-8";
/* =====================================================================
   ps-home.css — 사용자 메인(홈) 본문 디자인 (외부 업체 Next.js 원본 이식)
   원본: D:\html\project-seoul-alt-b-light\app\[locale]\page.tsx
         + components/landing/* (HeroCarousel / BrowseIndex /
           CalendarAndNotices / ArchiveTicker / InterviewsTeaser)
   Tailwind → 순수 CSS 변환. 토큰(--ps-*)은 ps-tokens.css 정의를 재사용.
   모든 규칙은 .ps-scope 하위로 한정(전역 오염 방지 + common/renewal.css 방어).
   ===================================================================== */

/* 공통 프리미티브(.ps-eyebrow/.ps-dot/.ps-display/.ps-section-title/
   .ps-card-title/.ps-sticker)는 ps-tokens.css 로 이동함 — 모든 사용자
   페이지(main+view)가 공유. 여기선 홈 전용 규칙만 유지. */

/* 홈 본문 래퍼 — common.css 리셋(li marker/float) 방어 */
.ps-home { display: block; color: var(--ps-ink); background: var(--ps-paper); }
.ps-home ul, .ps-home ol { list-style: none; margin: 0; padding: 0; }
.ps-home li { list-style: none; float: none; }
.ps-home li::before, .ps-home li::marker { content: none; }
.ps-home a { text-decoration: none; color: inherit; }
.ps-home section { display: block; box-sizing: border-box; }
.ps-home img { max-width: 100%; display: block; }

/* =====================================================================
   1) HERO CAROUSEL
   ===================================================================== */
.ps-hero {
  position: relative; width: 100%; overflow: hidden;
  user-select: none; touch-action: pan-y;
  border-bottom: 1px solid var(--ps-mute-200);
  aspect-ratio: 16 / 5; min-height: 420px; max-height: 560px;
  background: var(--ps-paper); cursor: grab;
}
.ps-hero-bg { position: absolute; inset: 0; z-index: 0; }
.ps-hero-slide-bg {
  position: absolute; inset: 0; opacity: 0;
  transition: opacity 700ms ease-out;
}
.ps-hero-slide-bg.is-active { opacity: 1; }
.ps-hero-slide-bg .tint { position: absolute; inset: 0; }
/* 포스터 이미지를 전체 블러 배경으로 + 좌측을 밝게 하는 흰 스크림 (원본 hero-v4) */
.ps-hero-slide-bg .blur {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: blur(36px) saturate(1.15); transform: scale(1.2);
}
.ps-hero-slide-bg .scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg,
    var(--ps-paper) 0%, rgba(255,255,255,0.82) 38%,
    rgba(255,255,255,0.32) 72%, rgba(255,255,255,0.08) 100%);
}
.ps-hero-inner {
  position: absolute; inset: 0; z-index: 10;
  padding: 32px var(--ps-gutter);
}
.ps-hero-grid {
  display: grid; grid-template-columns: 1fr; gap: 24px;
  align-items: center; height: 100%;
  max-width: 1280px; margin: 0 auto;
}
@media (min-width: 768px) {
  .ps-hero-grid { grid-template-columns: 7fr 5fr; gap: 40px; }
}
.ps-hero-text { position: relative; height: 100%; }
.ps-hero-slide-text {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: center;
  gap: 16px; opacity: 0; pointer-events: none;  /* 배포본 gap-4 md:gap-5 */
  transition: opacity 500ms ease-out;
}
@media (min-width: 768px) { .ps-hero-slide-text { gap: 20px; } }
.ps-hero-slide-text.is-active { opacity: 1; pointer-events: auto; }
.ps-hero-stickers { display: flex; align-items: center; gap: 8px; }
.ps-hero-title {
  font-weight: 900; letter-spacing: -0.025em; line-height: 1.02;
  color: var(--ps-ink); word-break: keep-all; margin: 0;
  font-size: clamp(1.75rem, 1rem + 2.2vw, 3.5rem);
}
.ps-hero-slide-text a:hover .ps-hero-title {
  text-decoration: underline; text-decoration-color: var(--ps-accent);
  text-decoration-thickness: 6px; text-underline-offset: 10px;
}
.ps-hero-counter {
  position: absolute; left: 0; bottom: 0;
  display: flex; align-items: center; gap: 12px;
}
.ps-hero-counter-num {
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  text-transform: uppercase; letter-spacing: 0.16em; color: var(--ps-mute-700);
}
.ps-hero-nav-btn {
  height: 36px; width: 36px; display: inline-flex;
  align-items: center; justify-content: center;
  border: 1px solid var(--ps-ink); background: var(--ps-paper);
  color: var(--ps-ink); font-size: 14px; font-weight: 900;
  cursor: pointer; transition: background 160ms ease, color 160ms ease;
}
.ps-hero-nav-btn:hover { background: var(--ps-ink); color: var(--ps-paper); }
.ps-hero-poster-col {
  position: relative; height: 100%;
  display: none; align-items: center; justify-content: flex-end;
}
@media (min-width: 768px) { .ps-hero-poster-col { display: flex; } }
.ps-hero-slide-poster {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: flex-end;
  opacity: 0; pointer-events: none; transition: opacity 500ms ease-out;
}
.ps-hero-slide-poster.is-active { opacity: 1; pointer-events: auto; }
.ps-home a.ps-hero-poster {
  position: relative; height: 90%; aspect-ratio: 1 / 1.414;
  display: block; background: var(--ps-paper);
  box-shadow: 0 18px 40px -16px rgba(0,0,0,0.35);
  transition: transform 300ms ease;
  overflow: hidden;
}
.ps-hero-poster:hover { transform: scale(1.02); }
.ps-hero-poster img { width: 100%; height: 100%; object-fit: cover; }
.ps-hero-controls {
  position: absolute; bottom: 12px; right: var(--ps-gutter); z-index: 10;
  display: flex; align-items: center; gap: 12px;
}
.ps-hero-dots { display: flex; align-items: center; gap: 8px; }
.ps-hero-dot {
  height: 6px; width: 12px; border: 0; padding: 0; cursor: pointer;
  background: var(--ps-mute-300); transition: all 200ms ease;
}
.ps-hero-dot:hover { background: var(--ps-mute-500); }
.ps-hero-dot.is-active { width: 32px; background: var(--ps-ink); }
.ps-hero-playpause {
  display: inline-flex; height: 24px; width: 24px;
  align-items: center; justify-content: center;
  border: 1px solid var(--ps-ink); background: rgba(255,255,255,0.8);
  color: var(--ps-ink); font-size: 12px; line-height: 1; cursor: pointer;
}
.ps-hero-playpause:hover { background: var(--ps-ink); color: var(--ps-paper); }

/* =====================================================================
   2) BROWSE INDEX (둘러보기 — 목차형)
   ===================================================================== */
.ps-browse { padding: var(--ps-section-pad) var(--ps-gutter); }
.ps-home p.ps-browse-eyebrow {
  margin: 0 0 24px; display: flex; align-items: center; gap: 8px;
}
.ps-browse-count {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--ps-mute-500);
  font-variant-numeric: tabular-nums;
}
.ps-browse-list { border-top: 1px solid var(--ps-ink); }
.ps-browse-item { border-bottom: 1px solid var(--ps-mute-300); }
.ps-home a.ps-browse-link {
  display: grid; grid-template-columns: 2.25rem 1fr auto;
  align-items: center; gap: 12px;
  padding: 16px 8px; margin: 0 -8px;
  transition: background 160ms ease;
}
@media (min-width: 768px) {
  .ps-home a.ps-browse-link { grid-template-columns: 3rem 2.75rem 1fr auto; gap: 20px; }
}
.ps-browse-link:hover { background: var(--ps-mute-50); }
.ps-browse-num {
  font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums;
  color: var(--ps-mute-500);
}
.ps-browse-thumb {
  position: relative; display: none; aspect-ratio: 3/4; width: 2.75rem;
  overflow: hidden; border: 1px solid rgba(10,10,10,0.1);
  background: var(--ps-mute-100);
}
@media (min-width: 768px) { .ps-browse-thumb { display: block; } }
.ps-browse-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ps-browse-body { min-width: 0; }
.ps-browse-title {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: clamp(1.1rem, 0.9rem + 0.7vw, 1.6rem);
  font-weight: 800; line-height: 1.2; letter-spacing: -0.015em;
}
.ps-browse-link:hover .ps-browse-title {
  text-decoration: underline; text-decoration-color: var(--ps-accent);
  text-decoration-thickness: 3px; text-underline-offset: 5px;
}
.ps-browse-caption {
  display: block; margin-top: 2px; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: 0.9375rem; color: var(--ps-mute-500);
}

/* =====================================================================
   3) CALENDAR + NOTICES
   ===================================================================== */
.ps-cal-section { padding: var(--ps-band-pad) var(--ps-gutter); }
.ps-cal-grid {
  display: grid; grid-template-columns: 1fr; gap: 32px;
  align-items: start;
}
@media (min-width: 768px) {
  .ps-cal-grid { grid-template-columns: repeat(4, 1fr); column-gap: 32px; }
  .ps-cal-col-cal  { grid-column: span 2; }
  .ps-cal-col-side { grid-column: span 1; padding-left: 20px; border-left: 1px solid var(--ps-mute-200); padding-top: 24px; }
  .ps-cal-col-noti { grid-column: span 1; padding-left: 20px; border-left: 1px solid var(--ps-mute-200); padding-top: 24px; }
}
/* [반응형 버그 — 진짜 원인] 그리드 아이템의 기본 min-width:auto 때문에, 알림마당의
   대괄호 공지 제목("[관악산 자연휴양림 조성(건축) 실시설계공모]" 처럼 공백 없는
   긴 대괄호 구간)이 word-break:keep-all 로 인해 하나의 안 쪼개지는 덩어리로 계산되어
   그 트랙(col-noti)의 최소 너비를 아주 크게 밀어올림 — 그 결과 4열 fr 비율(2:1:1)이
   무시되고 col-cal/col-side 가 짜부라져 "2026년 8월"·범례가 세로로 깨졌다.
   min-width:0 으로 grid item 의 자동 최소 크기를 꺼서 fr 비율대로 정상 배분되게 한다. */
.ps-cal-col-cal, .ps-cal-col-side, .ps-cal-col-noti { min-width: 0; }
/* 달력 — 원본: 전체를 위아래 검은 라인(border-y)으로 프레이밍 */
.ps-cal-col-cal { border-top: 1px solid var(--ps-ink); border-bottom: 1px solid var(--ps-ink); }
.ps-cal-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; padding: 16px 4px;
}
@media (min-width: 768px) { .ps-cal-head { padding: 20px 4px; } }
.ps-cal-month {
  font-size: clamp(1.25rem, 0.95rem + 1vw, 1.75rem);
  font-weight: 800; letter-spacing: -0.02em; margin: 0;
  /* [반응형 버그] .ps-scope 의 overflow-wrap:anywhere 상속 때문에 그리드가 좁아지는
     구간(예: 데스크톱 창을 768px 근처로 줄일 때)에서 "2026년 8월"이 글자 단위로
     쪼개져 세로로 쌓이는 문제 방지 — 이 짧은 제목은 항상 한 줄이어야 한다. */
  white-space: nowrap;
}
/* align-items: stretch → 화살표(SVG)·오늘(텍스트) 버튼 박스 높이 동일하게 */
.ps-cal-nav { display: flex; align-items: stretch; gap: 4px; }
.ps-cal-navbtn {
  padding: 6px 10px; display: inline-flex; align-items: center;
  justify-content: center; border: 1px solid var(--ps-mute-300);
  background: var(--ps-paper); color: var(--ps-ink); cursor: pointer;
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em;
  transition: background 160ms ease, color 160ms ease, border-color 160ms ease;
}
/* 배포본: 오늘 px-3(12px), 화살표 px-2.5(10px). 화살표는 SVG 중앙정렬. */
.ps-cal-navbtn-today { padding-left: 12px; padding-right: 12px; }
.ps-cal-navbtn-arrow { padding-left: 10px; padding-right: 10px; }
.ps-cal-navbtn:hover { border-color: var(--ps-ink); background: var(--ps-ink); color: var(--ps-paper); }
.ps-home ul.ps-cal-weekdays {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-top: 1px solid var(--ps-ink);
  list-style: none; margin: 0; padding: 0;
}
.ps-home .ps-cal-weekday {
  padding: 8px; text-align: left; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ps-mute-500);
  list-style: none;
}
.ps-home .ps-cal-weekday:first-child { color: var(--ps-mute-700); }
.ps-home ul.ps-cal-days {
  display: grid; grid-template-columns: repeat(7, 1fr);
  border-left: 1px solid var(--ps-mute-300); border-top: 1px solid var(--ps-mute-300);
  list-style: none; margin: 0; padding: 0;
}
.ps-home .ps-cal-day {
  position: relative; min-height: 56px; padding: 6px;
  border-right: 1px solid var(--ps-mute-300); border-bottom: 1px solid var(--ps-mute-300);
  background: var(--ps-paper); cursor: default; text-align: left;
  font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ps-ink);
  list-style: none;
}
/* 배포본: min-h-[56px] sm:min-h-[64px] md:min-h-[72px], p-1.5 sm:p-2 (sm=640px 에서 패딩·높이 동시 변경) */
@media (min-width: 640px) { .ps-home .ps-cal-day { min-height: 64px; padding: 8px; } }
@media (min-width: 768px) { .ps-home .ps-cal-day { min-height: 72px; } }
/* [a11y] role=button 날짜 포커스 링 (배포본: focus-visible ring-2 inset ring-focus) */
.ps-home .ps-cal-day[role="button"]:focus-visible {
  outline: none; box-shadow: inset 0 0 0 2px var(--ps-focus); z-index: 30;
}
.ps-cal-day > .num { font-weight: 600; }
.ps-cal-day.is-out { color: var(--ps-mute-300); background: var(--ps-mute-50); }
.ps-cal-day.is-out > .num { font-weight: 400; }
.ps-cal-day.has-events { cursor: pointer; }
.ps-cal-day.has-events:hover { background: var(--ps-mute-50); z-index: 20; }

/* 셀 위 hover/포커스 팝업 박스 (배포본 HomeCalendar) — 데스크톱만 */
.ps-cal-popup { display: none; }
@media (min-width: 640px) {
  .ps-cal-popup {
    position: absolute; z-index: 30; width: 260px; max-width: 80vw;
  }
  .ps-cal-popup.is-below { top: 100%; padding-top: 6px; }
  .ps-cal-popup.is-above { bottom: 100%; padding-bottom: 6px; }
  .ps-cal-popup.align-left  { left: 0; }
  .ps-cal-popup.align-right { right: 0; }
  .ps-cal-popup.align-center { left: 50%; transform: translateX(-50%); }
  .ps-cal-day.has-events:hover .ps-cal-popup,
  .ps-cal-day.has-events:focus-within .ps-cal-popup { display: block; }
}
.ps-cal-popup-inner {
  background: var(--ps-paper); border: 1px solid var(--ps-ink);
  box-shadow: 0 12px 32px -16px rgba(0,0,0,0.35); padding: 12px;
}
.ps-cal-popup-date {
  margin: 0; font-size: 12px; text-transform: uppercase; letter-spacing: 0.16em;
  font-weight: 800; color: var(--ps-mute-500); font-variant-numeric: tabular-nums;
}
.ps-cal-popup-list { list-style: none; margin: 8px 0 0; padding: 0; }
.ps-cal-popup-list li { list-style: none; }
.ps-home a.ps-cal-popup-link {
  display: flex; align-items: baseline; gap: 8px;
  margin: 0 -6px; padding: 4px 6px; transition: background 140ms ease;
}
.ps-home a.ps-cal-popup-link:hover,
.ps-home a.ps-cal-popup-link:focus-visible {
  background: var(--ps-mute-50);
}
.ps-home a.ps-cal-popup-link:focus-visible {
  outline: 2px solid var(--ps-focus); outline-offset: -2px;
}
.ps-cal-popup-link .ps-cal-dot { flex: 0 0 auto; align-self: flex-start; margin-top: 4px; width: 8px; height: 8px; }
.ps-cal-popup-cat {
  flex: 0 0 auto; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em;
  font-weight: 800; color: var(--ps-mute-500);
}
.ps-cal-popup-title {
  font-size: 13px; font-weight: 600; line-height: 1.3; color: var(--ps-ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.ps-cal-popup-more { margin: 4px 0 0; padding: 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ps-mute-500); font-variant-numeric: tabular-nums; }
/* 오늘 = 날짜 숫자에 검은 원 (원본) */
.ps-cal-day.is-today > .num {
  display: inline-flex; align-items: center; justify-content: center;
  height: 24px; width: 24px; border-radius: 9999px;
  background: var(--ps-ink); color: var(--ps-paper); font-weight: 900;
}
.ps-cal-day.is-selected { background: var(--ps-mute-50); }
.ps-cal-dots {
  position: absolute; left: 6px; right: 6px; bottom: 6px;
  display: flex; align-items: center; gap: 4px; flex-wrap: wrap;
}
/* 원본 팔레트: 흑백 + 라임 단색 (무지개 아님) */
.ps-cal-dot { display: inline-block; width: 6px; height: 6px; border-radius: 9999px; box-sizing: border-box; }
.ps-cal-dot[data-cat="announce"] { background: var(--ps-ink); }
.ps-cal-dot[data-cat="deadline"] { background: var(--ps-accent); box-shadow: 0 0 0 1px var(--ps-ink); }
.ps-cal-dot[data-cat="review"]   { background: var(--ps-mute-500); }
.ps-cal-dot[data-cat="award"]    { background: var(--ps-ink); box-shadow: 0 0 0 2px var(--ps-accent); }
/* 서울소식 — 흑백 팔레트 유지: 속 빈(페이퍼) + 잉크 링 */
.ps-cal-dot[data-cat="seoul"]    { background: var(--ps-paper); box-shadow: 0 0 0 2px var(--ps-ink); }
/* 사이드킥 (범례 + 구분선 + 선택일 상세) — 원본 space-y-5(20px) */
.ps-home ul.ps-cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0 0 20px; padding: 0; list-style: none; }
/* white-space:nowrap — 범례 라벨(공고/접수마감/심사/발표/서울소식)도 같은 overflow-wrap:anywhere
   버그로 글자 단위 줄바꿈되는 것 방지. 좁으면 li 단위(flex-wrap)로 줄바꿈되는 게 정상. */
.ps-cal-legend li { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ps-mute-700); list-style: none; white-space: nowrap; }
.ps-cal-legend .ps-cal-dot { width: 8px; height: 8px; }
.ps-cal-divider { height: 1px; background: var(--ps-mute-200); margin: 0 0 20px; }
/* 배포본 사이드킥 실측: 날짜 13px/0.14em/bold, 배지 12px/0.14em/extrabold, 공모명 15px semibold ink */
.ps-cal-selhead {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--ps-mute-500);
  font-variant-numeric: tabular-nums; margin: 0 0 12px;
}
.ps-cal-selempty { font-size: 14px; color: var(--ps-mute-500); margin: 0; }
.ps-cal-sellist { display: flex; flex-direction: column; gap: 10px; }
/* 배포본: dot+배지 한 줄(selrow), 공모명은 아래 줄이되 들여쓰기 없이 왼쪽 정렬 */
.ps-cal-selitem { display: block; }
.ps-cal-selitem a { display: block; }
/* [a11y] 팝업 안 링크와 마찬가지로, 여기서도 포커스가 뚜렷이 보이도록 별도 스타일 지정 */
.ps-cal-selitem a:focus-visible {
  outline: 2px solid var(--ps-focus); outline-offset: 2px;
  background: var(--ps-mute-50);
}
.ps-cal-selrow { display: flex; align-items: center; gap: 8px; }
.ps-cal-selcat { font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ps-mute-500); }
.ps-cal-seltitle { margin: 4px 0 0; font-size: 15px; font-weight: 600; line-height: 1.375; color: var(--ps-ink); }
/* 알림마당 */
.ps-notices-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ps-notices-title {
  display: flex; align-items: center; gap: 8px; margin: 0;
  font-size: clamp(1rem, 0.85rem + 0.5vw, 1.25rem);
  font-weight: 800; letter-spacing: -0.01em;
}
.ps-notices-all {
  flex: 0 0 auto; font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--ps-mute-700);
}
.ps-notices-all:hover { color: var(--ps-ink); }
.ps-home ul.ps-notices-list { margin-top: 16px; padding: 0; list-style: none; }
.ps-notice-item { border-top: 1px solid var(--ps-mute-100); list-style: none; }
.ps-notice-item:first-child { border-top: 0; }
/* display:block + width 강제 — common.css 의 a{display:inline} 로 배경이 글자폭만
   차던 문제 방어. 고정(pinned) 회색 배경이 칸 전체 폭을 채우도록. */
.ps-home a.ps-notice-link { display: block; width: 100%; box-sizing: border-box; padding: 10px 0; transition: background 160ms ease; }
.ps-home a.ps-notice-link:hover { background: var(--ps-mute-50); }
.ps-home a.ps-notice-link.is-pinned { background: var(--ps-mute-100); }
.ps-notice-date {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ps-mute-500);
  font-variant-numeric: tabular-nums; margin: 0;
}
.ps-notice-text {
  margin: 4px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 14px; line-height: 1.4; font-weight: 600;
}
.ps-notice-link.is-pinned .ps-notice-text { font-weight: 800; }
.ps-notice-link:hover .ps-notice-text {
  text-decoration: underline; text-decoration-color: var(--ps-accent);
  text-decoration-thickness: 3px; text-underline-offset: 6px;
}
.ps-notice-tag { margin-right: 4px; font-size: 12px; font-weight: 700; color: var(--ps-mute-500); }

/* =====================================================================
   4/5) SNAP CAROUSEL (ArchiveTicker / InterviewsTeaser 공용)
   ===================================================================== */
.ps-snap-section { padding: var(--ps-band-pad) var(--ps-gutter); }
.ps-snap-section.is-archive { background: var(--ps-tint-archive); }
.ps-snap-head {
  margin-bottom: 12px; display: flex; align-items: flex-start;
  justify-content: space-between; gap: 16px;
}
.ps-snap-eyebrow {
  margin: 4px 0 0; display: flex; align-items: center; gap: 8px;
  font-size: clamp(1.25rem, 0.95rem + 1vw, 1.75rem);
  font-weight: 800; letter-spacing: -0.02em; color: var(--ps-ink);
}
.ps-snap-headright { display: flex; flex-direction: column; align-items: flex-end; gap: 12px; flex: 0 0 auto; }
.ps-snap-all { }
.ps-snap-all:hover { text-decoration: underline; }
.ps-snap-controls { display: flex; align-items: center; gap: 6px; }
.ps-snap-btn {
  display: grid; height: 32px; width: 32px; place-items: center;
  background: var(--ps-paper); border: 1px solid var(--ps-ink); color: var(--ps-ink);
  cursor: pointer; transition: background 160ms ease, color 160ms ease;
}
/* 키보드 포커스(Tab) 시에도 hover 와 동일하게 검은 배경 (배포본 focus-visible) */
.ps-snap-btn:hover,
.ps-snap-btn:focus-visible { background: var(--ps-ink); color: var(--ps-paper); }
/* 검은 배경 + 포커스 라인(윤곽) 둘 다 — 키보드 사용자가 위치 확인 가능 */
.ps-snap-btn:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-snap-counter {
  margin-left: 8px; font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--ps-mute-700); font-variant-numeric: tabular-nums;
}
/* 배포(deploy) 버전 실측 — 로컬 소스 globals.css 의 fs-h2(최대 80px)와 달리
   배포본은 제목/설명이 작게 조정돼 있음(스크린샷 8.png 대조). 그 크기에 맞춤. */
/* 배포본 실측(8.png): 제목이 "아카이브"보다 훨씬 작은 16~17px 볼드. */
.ps-snap-title { margin: 0; font-size: clamp(0.9375rem, 0.9rem + 0.15vw, 1rem); }
/* 배포본: 설명 p 에 색 미지정 → 부모 ink(#0a0a0a) 상속(소스의 mute-700 보다 진함). */
.ps-snap-desc { margin-top: 16px; font-size: clamp(0.875rem, 0.83rem + 0.2vw, 1rem); line-height: 1.65; color: var(--ps-ink); }
.ps-snap-viewport { margin-top: 40px; margin-left: calc(-1 * var(--ps-gutter)); margin-right: calc(-1 * var(--ps-gutter)); }
.ps-snap-track {
  display: flex; gap: 32px; padding: 0 var(--ps-gutter);
  overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.ps-snap-track::-webkit-scrollbar { display: none; }
.ps-snap-card { scroll-snap-align: start; flex: 0 0 auto; }
/* [a11y] 카드 링크 키보드 포커스 표시 — 현재 Tab 이동된 이미지가 뚜렷이 구분되게
   이미지 둘레에 포커스 링(윤곽) 노출. 마우스 클릭 시엔 안 나옴(focus-visible). */
.ps-home a.group:focus-visible,
.ps-home .ps-snap-card > a:focus-visible { outline: none; }
.ps-home .ps-snap-card > a:focus-visible .ps-snap-card-img {
  outline: 3px solid var(--ps-focus); outline-offset: 3px;
}
.ps-home .ps-snap-card > a:focus-visible .ps-card-title,
.ps-home .ps-snap-card > a:focus-visible .ps-snap-card-title2 {
  text-decoration: underline; text-decoration-color: var(--ps-accent);
  text-decoration-thickness: 3px; text-underline-offset: 4px;
}
.ps-snap-card.is-archive { width: clamp(220px, 28vw, 360px); }
.ps-snap-card.is-interview { width: clamp(200px, 24vw, 320px); }
.ps-snap-card-img {
  position: relative; overflow: hidden; background: var(--ps-mute-100);
}
.ps-snap-card.is-archive .ps-snap-card-img { aspect-ratio: 3/4; }
.ps-snap-card.is-interview .ps-snap-card-img { aspect-ratio: 4/5; }
.ps-snap-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 500ms ease; }
.ps-snap-card:hover .ps-snap-card-img img { transform: scale(1.04); }
/* 카드 하단 텍스트 간격 — 배포본: 이미지→메타/형식라벨 12px(mt-3), 제목 6px(mt-1.5),
   날짜/분류 4px(mt-1). .ps-home 특이성으로 .ps-scope .ps-eyebrow/.ps-card-title 리셋을 이김. */
.ps-home .ps-snap-card-meta { margin-top: 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ps-home .ps-snap-card-sub { margin: 4px 0 0; color: var(--ps-mute-500); }
.ps-home .ps-snap-card-img + .ps-snap-card-sub { margin-top: 12px; }
.ps-home .ps-snap-card-title2 { margin-top: 6px; }

/* 포스터 SVG 폴백(이미지 미존재 시) — 회색 박스 + 라벨 */
.ps-ph {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: repeating-linear-gradient(45deg, var(--ps-mute-100), var(--ps-mute-100) 10px, var(--ps-mute-50) 10px, var(--ps-mute-50) 20px);
  color: var(--ps-mute-500); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; text-align: center; padding: 8px;
}

/* 섹션 구분선 */
.ps-home hr.ps-rule { border: 0; border-top: 1px solid var(--ps-mute-200); margin: 0 var(--ps-gutter); }

/* ═══════════ 메인 팝업 (TB_NOTICE) ═══════════
   관리자 시스템관리 > 팝업 에서 등록한 것 중 '지금 게시기간인' 것만 뜬다(서버 searchCnd=MAIN).
   ⚠ 이미지가 있으면 가로 2단(왼쪽 그림 / 오른쪽 글)이다.
     세로로 쌓으면 포스터처럼 긴 이미지에서 팝업이 화면을 벗어난다. */
.ps-pop-wrap {
  position: fixed; inset: 0; z-index: 900;
  display: flex; justify-content: center;
  padding: 24px; overflow-y: auto;
  background: rgba(10, 10, 10, .55);
}
.ps-pop-wrap[hidden] { display: none; }
/* ⚠ 세로 가운데를 align-items:center 로 잡지 말 것.
   flex 는 내용이 컨테이너보다 크면 center 일 때 '위쪽'이 잘려서 스크롤해도 못 본다
   (팝업이 여러 건이거나 모바일에서 첫 장이 화면 위로 넘어가던 원인).
   margin:auto 는 남는 자리가 있을 때만 가운데로 밀어 주고, 넘치면 위부터 보여 준다. */
.ps-pop-row {
  margin: auto;
  display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; gap: 16px;
}

.ps-pop {
  display: flex; flex-direction: column;
  width: 380px; max-width: calc(100vw - 48px);
  max-height: calc(100vh - 48px);
  background: var(--ps-paper); border: 1px solid var(--ps-ink);
  overflow: hidden;
}
/* 이미지가 있는 팝업 — 가로 2단.
   ⚠ 컨테이너는 stretch(기본값)로 둘 것. flex-start 로 두면 글 칸이 팝업 높이에 안 맞고
     내용만큼 늘어나, 글이 길 때 max-height 를 넘겨 아래(버튼줄)가 잘리고 스크롤도 안 생긴다.
     그림 칸만 align-self 로 위에 붙여 두면 늘어나지 않는다. */
.ps-pop.has-img { flex-direction: row; width: 720px; }
/* 아주 작은 이미지를 올리면 팝업이 납작해져 글이 몇 줄 안 보인다.
   버튼줄(약 45px) + 제목·본문 몇 줄이 들어갈 만큼은 확보한다.
   (JS 가 height 를 이미지 높이로 박아도 min-height 가 이긴다) */
.ps-pop.has-img { min-height: 260px; }
.ps-pop-media {
  flex: 0 0 320px; min-width: 0;
  align-self: flex-start;   /* 그림 칸은 글 높이에 맞춰 늘어나지 않는다 */
  max-height: 100%;
  border-right: 1px solid var(--ps-mute-100);
  overflow: hidden;         /* 화면보다 긴 이미지만 여기서 잘린다 */
}
/* 폭만 맞추고 높이는 원본 비율 그대로 둔다 — 이미지를 자르지 않는 게 우선이다.
   ⚠ object-fit:cover 나 max-height 를 img 에 주지 말 것.
     cover 는 그림을 자르고, width:100% 인 상태의 max-height 는 비율을 찌그러뜨린다.
     남는 자리는 흰 바탕이라 크게 티나지 않는다(칸 배경을 깔지 않은 이유). */
.ps-pop-media img { display: block; width: 100%; height: auto; }
.ps-pop-media a { display: block; width: 100%; height: 100%; }
/* 글 쪽 — 본문이 길면 여기만 스크롤되고 버튼줄은 바닥에 남는다 */
.ps-pop-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }

/* 팝업 높이가 정해지면(이미지 높이) 글은 남은 자리에서만 스크롤된다.
   ⚠ min-height:0 이 없으면 flex 항목이 내용만큼 늘어나 스크롤이 안 생긴다. */
.ps-pop-body { flex: 1; min-height: 0; padding: 18px 20px; overflow-y: auto; }
.ps-pop-title { margin: 0 0 10px; font-size: 1.0625rem; font-weight: 800; line-height: 1.4; color: var(--ps-ink); }
.ps-pop-text {
  margin: 0; font-size: 0.875rem; line-height: 1.7; color: var(--ps-mute-700);
  white-space: pre-wrap; word-break: break-word;
}
.ps-pop-link {
  display: inline-block; margin-top: 12px;
  font-size: 0.8125rem; font-weight: 700; color: var(--ps-ink);
  border-bottom: 2px solid var(--ps-accent); text-decoration: none; padding-bottom: 2px;
}
.ps-pop-link:hover { border-bottom-color: var(--ps-ink); }
/* 아래 버튼줄 — 본문이 짧아도 바닥에 붙는다 */
.ps-pop-foot {
  margin-top: auto; flex-shrink: 0;
  display: flex; align-items: stretch;
  border-top: 1px solid var(--ps-mute-100);
}
.ps-pop-foot button {
  flex: 1; appearance: none; border: 0; background: var(--ps-paper);
  font: inherit; font-size: 0.8125rem; color: var(--ps-mute-700);
  padding: 13px 10px; cursor: pointer;
}
.ps-pop-foot button + button { border-left: 1px solid var(--ps-mute-100); }
.ps-pop-foot button:hover { background: var(--ps-mute-50); color: var(--ps-ink); }
.ps-pop-foot .ps-pop-close { font-weight: 700; color: var(--ps-ink); }
.ps-pop-foot button:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: -2px; }

/* 좁은 화면 — 가로 2단을 풀고 위아래로. 이미지 높이는 묶어 둔다 */
@media (max-width: 768px) {
  .ps-pop-wrap { padding: 16px; }
  /* 위 max-height 는 데스크톱 패딩(24px) 기준이라 여기서 다시 잡는다.
     여러 건이면 세로로 쌓이고 화면 밖은 .ps-pop-wrap 스크롤로 본다. */
  .ps-pop, .ps-pop.has-img {
    flex-direction: column; width: 100%; max-width: 420px;
    max-height: calc(100vh - 32px);
  }
  /* 세로로 쌓이므로 이미지가 화면을 다 먹지 않게 묶는다.
     ⚠ 높이 제한은 img 가 아니라 칸에 준다 — img 에 주면 비율이 찌그러진다. */
  .ps-pop-media {
    flex: 0 0 auto; width: 100%; max-height: 40vh; overflow: hidden;
    border-right: 0; border-bottom: 1px solid var(--ps-mute-100);
  }
}