@charset "UTF-8";
/* ============================================================
   아카이브 (.ps-arv-*) — 건축물 / 공모전 / 건축상
   ------------------------------------------------------------
   헤더·툴바·카드 타이포는 공모 목록의 ps-cptt-* 를 그대로 쓴다.
   목록만 masonry(디자인) — 이미지를 원본 비율로 흘려 벽돌처럼 쌓는다.
   ※ ps-competition.css 는 psView 데코레이터가 공통 로드한다.
   ============================================================ */

/* 탭이 링크(a)일 때도 버튼과 같게 보이도록 */
a.ps-cptt-stage-btn { text-decoration: none; display: inline-block; }

/* ── 건수 ── */
.ps-cptt .ps-arv-count {
  margin: 24px 0 0; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ps-mute-500);
}

/* ── masonry ──
   CSS columns. 카드 높이가 제각각이라 grid 대신 columns 로 벽돌 쌓기.
   ※ .ps-cptt ul{margin:0} 리셋(0,1,1)을 이기려면 .ps-cptt 접두가 필요하다. */
.ps-cptt ul.ps-arv-masonry {
  margin: 40px 0 0; padding: 0; list-style: none;
  /* 열 개수는 --arv-cols 하나로 관리한다. JS 재배치도 이 값을 읽으므로
     중단점을 CSS 와 JS 두 곳에 적어둘 필요가 없다. */
  --arv-cols: 1;
  column-count: var(--arv-cols); column-gap: 32px;
}
@media (min-width: 640px)  { .ps-cptt ul.ps-arv-masonry { --arv-cols: 2; } }
@media (min-width: 1024px) { .ps-cptt ul.ps-arv-masonry { --arv-cols: 3; } }
@media (min-width: 1280px) { .ps-cptt ul.ps-arv-masonry { --arv-cols: 4; } }
/* 카드가 열 경계에서 잘리지 않게 */
.ps-arv-masonry .ps-arv-item {
  break-inside: avoid; page-break-inside: avoid;
  margin: 0 0 48px; list-style: none; float: none;
}

/* ── JS 재배치(is-js) ──
   column-count 는 열 높이를 맞추려다, 남은 자리에 안 들어가는 카드를 통째로 다음 열로
   넘긴다(break-inside: avoid 라 쪼갤 수 없다) → 그 자리에 구멍이 남는다.
   그래서 JS 가 '그때그때 가장 짧은 열'에 직접 놓는다.
   DOM 은 건드리지 않고 transform 으로 위치만 옮기므로 준공일 순서(화면낭독기·탭 이동)는 그대로다.
   ※ JS 가 없거나 실패하면 이 클래스가 안 붙어 위의 column-count 가 그대로 동작한다. */
.ps-cptt ul.ps-arv-masonry.is-js { column-count: initial; position: relative; }
.ps-arv-masonry.is-js .ps-arv-item { position: absolute; top: 0; left: 0; margin: 0; }

/* ── 고정 높이 그리드 (공모전 탭) ──
   사진 비율이 일정해 masonry 로 흘릴 이유가 없다. 행이 가지런히 맞도록 grid 로 전환. */
.ps-cptt ul.ps-arv-masonry.is-grid {
  column-count: initial; display: grid; grid-template-columns: 1fr;
  gap: 48px 32px;
}
@media (min-width: 640px)  { .ps-cptt ul.ps-arv-masonry.is-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .ps-cptt ul.ps-arv-masonry.is-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1280px) { .ps-cptt ul.ps-arv-masonry.is-grid { grid-template-columns: repeat(4, 1fr); } }
.ps-arv-masonry.is-grid .ps-arv-item { margin: 0; }
/* 빈 상태는 한 줄 전체 */
.ps-arv-masonry.is-grid .ps-arv-empty { grid-column: 1 / -1; }
.ps-arv-masonry .ps-arv-item::before, .ps-arv-masonry .ps-arv-item::marker { content: none; }

.ps-arv-empty {
  column-span: all; padding: 80px 0; text-align: center;
  color: var(--ps-mute-500); list-style: none;
}

/* ── 사진 프레임 ──
   공모 포스터는 1:√2 고정 + contain 이지만, 아카이브는 원본 비율 그대로 흘린다.
   ps-cptt-poster 의 aspect-ratio 를 풀고 이미지 높이를 auto 로. */
.ps-cptt-poster.ps-arv-photo {
  aspect-ratio: auto; position: relative;
  border: 0; background: var(--ps-mute-100);
}
.ps-cptt-poster.ps-arv-photo img {
  position: static; inset: auto;
  display: block; width: 100%; height: auto; object-fit: fill;
  transition: transform 700ms ease-out, filter 700ms ease-out;
}
/* 이미지 없을 때만 4:3 자리를 잡는다 */
.ps-cptt-poster.ps-arv-photo.is-empty { aspect-ratio: 4 / 3; }
@supports not (aspect-ratio: 4 / 3) {
  .ps-cptt-poster.ps-arv-photo.is-empty { height: 0; padding-top: 75%; }
}

.ps-cptt-card:hover .ps-arv-photo img { transform: scale(1.02); }

/* 카드 hover — 공모 카드는 제목에 라임 밑줄이지만 아카이브는 색만 흐려진다(디자인) */
.ps-arv-masonry .ps-cptt-card:hover .ps-cptt-card-title {
  text-decoration: none; color: var(--ps-mute-700); transition: color 160ms ease;
}

/* ── 공모전 탭 ──
   건축물은 사진 비율이 제각각이라 masonry 로 흘리지만, 공모전은 카드 높이를 고정한다(디자인).
   3:2 프레임 + cover 로 채운다. */
.ps-cptt-card.is-cptt .ps-arv-photo { aspect-ratio: 3 / 2; }
.ps-cptt-card.is-cptt .ps-arv-photo img { height: 100%; object-fit: cover; }
@supports not (aspect-ratio: 3 / 2) {
  .ps-cptt-card.is-cptt .ps-arv-photo { height: 0; padding-top: 66.6667%; }
  .ps-cptt-card.is-cptt .ps-arv-photo img { position: absolute; inset: 0; }
}
/* 흑백에서 컬러로 (디자인) */
.ps-cptt-card.is-cptt .ps-arv-photo img { filter: grayscale(1) contrast(1.05); }
.ps-cptt-card.is-cptt:hover .ps-arv-photo img { filter: grayscale(0) contrast(1); }
/* 애니메이션을 끄기로 한 사용자에게는 확대·필터 전환을 하지 않는다 */
@media (prefers-reduced-motion: reduce) {
  .ps-cptt-poster.ps-arv-photo img { transition: none; }
  .ps-cptt-card:hover .ps-arv-photo img { transform: none; }
}

/* 공모전 탭은 메타(완공·연도)가 이미지 위에 온다 */
.ps-cptt-card.is-cptt .ps-cptt-meta { margin-top: 0; margin-bottom: 12px; }

/* 건축물 카드의 연도 뒤에 붙는 수상등급 — "2025 · 건축상 대상" */
.ps-arv-grd { margin-left: 4px; font-weight: 600; color: var(--ps-mute-700); }

/* 건축상만 등록된 건은 상세가 없어 카드가 링크가 아니다(div). 확대·색변화도 끈다 */

/* ── 건축상 탭 ──
   완공작은 사진 비율이 제각각이라 흘려 놓지만, 수상작은 4:3 으로 맞춰 나란히 세운다(디자인).
   공모전 카드와 달리 흑백 처리는 하지 않는다 — 건축 사진 자체가 볼거리라서. */
.ps-cptt-card.is-prize .ps-arv-photo { aspect-ratio: 4 / 3; }
.ps-cptt-card.is-prize .ps-arv-photo img { height: 100%; object-fit: cover; }
@supports not (aspect-ratio: 4 / 3) {
  .ps-cptt-card.is-prize .ps-arv-photo { height: 0; padding-top: 75%; }
  .ps-cptt-card.is-prize .ps-arv-photo img { position: absolute; inset: 0; }
}

/* 메타(연도 · 회차 · 자치구)가 제목 위에 온다 */
.ps-cptt-card.is-prize .ps-arv-submeta { margin: 12px 0 0; flex-wrap: wrap; }
.ps-cptt-card.is-prize .ps-cptt-card-title { margin-top: 4px; }

/* 연도 칩 — 툴바 아래줄 왼쪽. 해가 늘면 줄바꿈된다 */
.ps-arv-yrs { gap: 8px; }

/* ── 좌상단 배지 (공모 카드 스티커는 우상단이라 별도) ──
   사진 프레임(.ps-arv-photo) 밖, 카드 기준으로 붙인다. 프레임 안에 두면 이미지 비율에 따라
   자리가 흔들려서 카드를 기준으로 잡았다. left 를 -1px 로 빼 프레임 테두리와 선을 맞춘다. */
.ps-cptt-card { position: relative; }
.ps-arv-badges {
  position: absolute; left: -1px; top: 0; z-index: 10;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; max-width: 92%;
}
.ps-arv-badge {
  display: block; max-width: 100%;
  padding: 4px 10px; font-size: 12px; font-weight: 900; line-height: 1.3;
  text-transform: uppercase; letter-spacing: 0.1em;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ps-arv-badge.is-cptt { background: var(--ps-ink); color: var(--ps-paper); }
/* 건축상 — 라임은 ink 글자와만 쓴다(흰 배경에서 대비 1.15:1) */
.ps-arv-badge.is-prize { background: var(--ps-accent); color: var(--ps-ink); }

/* ── 건축물 카드 — 이미지 → 제목 → 참여사무소 → 연도 ── */
.ps-arv-firm {
  margin: 4px 0 0; font-size: 14px; font-weight: 600; line-height: 1.35;
  color: var(--ps-mute-700); word-break: keep-all;
}
.ps-arv-year { margin: 2px 0 0; font-size: 12px; color: var(--ps-mute-500); }
/* 건축상 수상등급 — 도메인 생기면 연도 뒤에 붙는다 */
.ps-arv-year .prize { margin-left: 4px; font-weight: 600; color: var(--ps-mute-700); }

/* ── 카드 보조 메타 (공모전 탭: 시설유형 · N 수상작) ── */
.ps-arv-submeta {
  margin: 4px 0 0; display: flex; align-items: center; gap: 8px;
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--ps-mute-500);
}

/* ── 검색 ──
   공모 목록의 아이콘은 장식용(pointer-events:none)이지만 여기선 실제 제출 버튼이라 되살린다. */
button.ps-cptt-search-ico {
  pointer-events: auto; border: 0; background: transparent; padding: 0; cursor: pointer;
}
button.ps-cptt-search-ico:hover { color: var(--ps-ink); }
button.ps-cptt-search-ico:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }

/* ── 페이징 ── */
.ps-arv-pager { display: flex; align-items: center; justify-content: center; gap: 20px; margin: 48px 0 0; }
.ps-arv-pager a, .ps-arv-pager .is-off {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  text-decoration: none; color: var(--ps-ink);
}
.ps-arv-pager a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ps-arv-pager .is-off { color: var(--ps-mute-500); }
.ps-arv-pager .cur { font-size: 12px; color: var(--ps-mute-700); }