@charset "UTF-8";
/* ============================================================
   아카이브 > 건축물 상세 (.ps-awd-*)
   히어로(좌 사진 + 우 정보) → 본문 2단(좌 목차·관련 / 우 섹션들)
   목록 CSS(ps-archive.css)와 분리 — 상세에서만 로드한다.
   ============================================================ */

.ps-awd { display: block; color: var(--ps-ink); background: var(--ps-paper); }
.ps-awd ul, .ps-awd ol { list-style: none; margin: 0; padding: 0; }
.ps-awd li { list-style: none; float: none; }
.ps-awd li::before, .ps-awd li::marker { content: none; }
.ps-awd a { text-decoration: none; color: inherit; }
.ps-awd img { max-width: 100%; display: block; }

/* 좌우 여백 — 공모전 상세(.ps-cptd-*)와 같은 방식으로 섹션마다 --ps-gutter 를 준다.
   .ps-awd 에 한 번에 주지 않는 이유: 히어로 하단 구분선이 화면 끝까지 이어져야 하는데
   컨테이너에 padding 을 주면 선까지 안쪽으로 밀린다(border 는 padding 바깥). */

/* ── 히어로 ── */
.ps-awd-hero {
  display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start;
  border-bottom: 1px solid var(--ps-ink);
  padding: calc(var(--ps-section-pad) / 2) var(--ps-gutter) 64px;
}
@media (min-width: 768px) { .ps-awd-hero { grid-template-columns: 5fr 7fr; gap: 48px; } }

.ps-awd-hero-img {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden;
  border: 1px solid var(--ps-ink); background: var(--ps-mute-50);
}
@supports not (aspect-ratio: 4 / 3) { .ps-awd-hero-img { height: 0; padding-top: 75%; } }
.ps-awd-hero-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ps-awd-hero-img .ph { display: block; width: 100%; height: 100%; }
.ps-awd-hero-badge {
  position: absolute; left: 12px; top: 12px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, 0.9); color: var(--ps-ink);
  padding: 4px 8px; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.18em;
}
/* 건축상 배지 — 라임. 한 건물이 완공작이면서 수상작이면 배지가 둘이라 아래로 내려 붙인다.
   ⚠ 라임은 잉크 글자와만 쓴다(흰 배경 위 대비가 1.15:1 이라 흰 글자는 안 보인다). */
.ps-awd-hero-badge.is-prize { background: var(--ps-accent); color: var(--ps-ink); }
.ps-awd-hero-badge.is-second { top: 44px; }

.ps-awd-hero-body { display: flex; flex-direction: column; gap: 24px; }
.ps-awd-hero-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ps-awd-hero-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 0; }
.ps-awd-hero-meta .sep { color: var(--ps-mute-500); }
.ps-awd-hero-h1 {
  margin: 0; max-width: 18ch;
  font-size: clamp(2rem, 1rem + 3vw, 4.5rem); line-height: 0.94; letter-spacing: -0.025em;
  word-break: keep-all;
}
/* 작품 설명 (완공작 자체) — 제목 바로 아래. 히어로 flex gap(24px)은 과해서 직접 잡는다 */
.ps-awd-hero-desc {
  margin: -8px 0 0; max-width: 52ch;
  font-size: 16px; line-height: 1.7; color: var(--ps-mute-700);
  white-space: pre-wrap; word-break: keep-all;
}
.ps-awd-hero-tag {
  margin: -8px 0 0; max-width: 42ch;
  font-size: var(--ps-fs-lead); line-height: 1.5; color: var(--ps-mute-700); word-break: keep-all;
}
/* 설계자 — 바로 위 작품설명/부제와의 간격.
   히어로 본문이 flex gap 24px 라 마진 0 이면 딱 24px 이 된다.
   32px(마진 +8) 는 떨어져 보이고 16px(마진 -8) 는 좁아서, gap 을 그대로 쓴다. */
.ps-awd-hero-firm {
  margin: 0; font-size: 13px;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ps-mute-500);
}
.ps-awd-hero-firm .v { margin-left: 6px; font-weight: 700; color: var(--ps-ink); }

/* ── 본문 2단 ── */
.ps-awd-wrap { display: block; padding: 0 var(--ps-gutter) 64px; }
@media (min-width: 768px) {
  .ps-awd-wrap { display: grid; grid-template-columns: 2fr 10fr; gap: 32px; }
}
.ps-awd-side { padding-top: 48px; }
@media (min-width: 768px) {
  .ps-awd-side-in {
    position: sticky; top: calc(var(--ps-header-h, 4.25rem) + 32px);
    display: flex; flex-direction: column; gap: 48px;
  }
}
.ps-awd-side-nm {
  margin: 0 0 20px; padding-bottom: 16px; border-bottom: 1px solid var(--ps-mute-200);
  font-size: clamp(1.3rem, 1.1rem + 0.6vw, 1.6rem); font-weight: 800;
  line-height: 1.2; letter-spacing: -0.015em; word-break: keep-all;
}
/* ul.ps-awd-toc — 위 `.ps-awd ul { margin: 0 }`(0,1,1) 이 margin-top 을 덮어쓰므로 특이성을 올린다 */
.ps-awd ul.ps-awd-toc { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.ps-awd-toc a { font-size: 17px; line-height: 1.4; color: var(--ps-mute-500); transition: color 140ms ease; }
.ps-awd-toc a:hover { color: var(--ps-ink); }
.ps-awd-toc a.is-current { font-weight: 700; color: var(--ps-ink); }
.ps-awd-toc a:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }

.ps-awd-related { border-top: 1px solid var(--ps-ink); padding-top: 24px; }
.ps-awd-related ul { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
/* a 가 기본값(inline)인 채로 안에 block 자식(.st/.nm)을 두면 outline 이 라인박스 기준으로 그려져
   포커스 링이 보이지 않는다. block 으로 만들어 링크 영역 전체를 감싸게 한다.
   (목차 .ps-awd-toc a 는 내부가 순수 텍스트라 이 문제가 없었다) */
.ps-awd-related a { display: block; }
.ps-awd-related .st { display: block; color: var(--ps-mute-500); }
.ps-awd-related .nm {
  display: block; margin-top: 4px; font-size: 14px; font-weight: 700; line-height: 1.35;
  word-break: keep-all; transition: color 140ms ease;
}
.ps-awd-related a:hover .nm,
.ps-awd-related a:focus-visible .nm { color: var(--ps-mute-700); }
/* 포커스 표시가 없어서 키보드로 이동해도 어디 있는지 안 보였다 — 목차(.ps-awd-toc)와 동일하게 맞춘다 */
.ps-awd-related a:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-awd-related .arw { margin-left: 4px; opacity: 0; transition: opacity 140ms ease; }
/* 화살표도 hover 에만 반응하면 키보드 사용자에겐 안 보인다 */
.ps-awd-related a:hover .arw,
.ps-awd-related a:focus-visible .arw { opacity: 1; }

/* ── 섹션 공통 ── */
.ps-awd-body { padding-top: 48px; }
@media (max-width: 767px) { .ps-awd-body { padding-top: 0; } }
.ps-awd-sec { padding: 64px 0; scroll-margin-top: calc(var(--ps-header-h, 4.25rem) + 32px); }
.ps-awd-sec:first-child { padding-top: 0; }
.ps-awd-sec.is-line { border-top: 1px solid var(--ps-mute-100); }
.ps-awd-sec.is-line-ink { border-top: 1px solid var(--ps-ink); }
.ps-awd .ps-awd-sec .ps-section-title { margin: 0 0 24px; }
/* "당선작 원안" 라벨 — 바로 아래 제목("작품설명")과 붙지 않도록 간격 확보.
   ※ p.ps-awd-src 로 특이성을 올려야 한다. ps-tokens.css 의 `.ps-scope .ps-eyebrow { margin: 0 }` 가
      (0,2,0) 이라 클래스 하나짜리 `.ps-awd-src`(0,1,0) 로는 margin 이 먹지 않는다. */
.ps-awd p.ps-awd-src { display: flex; align-items: center; gap: 8px; margin: 0 0 20px; }
/* "원 공모 당시 제출된 자료입니다." 안내문. 제목(margin-bottom 24px)을 당겨 붙인다 */
.ps-awd-note { margin: -12px 0 32px; font-size: 15px; color: var(--ps-mute-500); }

/* ── 개요 ── */
.ps-awd-facts { display: grid; grid-template-columns: 1fr; gap: 24px; margin: 0; }
@media (min-width: 640px) { .ps-awd-facts { grid-template-columns: repeat(2, 1fr); } }
.ps-awd-facts dt { margin: 0; color: var(--ps-mute-500); }
.ps-awd-facts dd { margin: 4px 0 0; font-size: 16px; line-height: 1.5; word-break: keep-all; }
.ps-awd-facts dd.is-bold { font-weight: 700; }

.ps-awd-org { margin-top: 32px; border-top: 1px solid var(--ps-mute-400); padding-top: 12px; }
.ps-awd-org-list { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 8px 0 0; font-size: 15px; }
.ps-awd-org-list .item { display: inline-flex; align-items: baseline; gap: 8px; }
.ps-awd-org-list .k {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.14em;
  color: var(--ps-mute-500);
}
.ps-awd-org-list .v { font-weight: 600; color: var(--ps-ink); }
.ps-awd-org-list .v.is-link {
  text-decoration: underline; text-decoration-color: var(--ps-mute-400); text-underline-offset: 4px;
}
.ps-awd-org-list .v.is-link:hover { text-decoration-color: var(--ps-accent); text-decoration-thickness: 2px; }
.ps-awd-org-list .v.is-link:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-awd-org-list .ext { margin-left: 4px; font-size: 12px; opacity: 0.6; }

/* ── 생애주기 ── */
.ps-awd-track { position: relative; margin-top: 8px; }
.ps-awd-track .rail { position: absolute; left: 0; right: 0; top: 8px; height: 1px; background: var(--ps-mute-400); }
.ps-awd-track .rail.is-done { right: auto; background: var(--ps-ink); }
.ps-awd-track ol { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); }   /* 공고·당선·설계·착공·준공 [2026-10-22 5칸] */
.ps-awd-track li { display: flex; flex-direction: column; align-items: flex-start; }
.ps-awd-track .dot {
  display: block; width: 16px; height: 16px; border-radius: 50%;
  border: 2px solid var(--ps-mute-400); background: var(--ps-paper);
}
.ps-awd-track .dot.is-done { background: var(--ps-ink); border-color: var(--ps-ink); }
/* 현재 단계 — 라임 링. ink 점 둘레라 대비가 확보된다 */
.ps-awd-track .dot.is-now { box-shadow: 0 0 0 4px var(--ps-accent); }
.ps-awd-track .lb {
  margin-top: 16px; font-size: 12px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ps-mute-500);
}
.ps-awd-track .lb.is-done { font-weight: 900; color: var(--ps-ink); }

/* 트랙(타임라인) 아래 단계 카드.
   · 위 트랙(.ps-awd-track ol)과 같은 5열이라 세로로 줄이 맞는다 — 열 수를 바꾸면 어긋난다.
   · 간격은 트랙 라벨(.lb) 바로 아래로, 32px 는 붙어 보이고 64px 는 떨어져 보여 48px 로 맞췄다.
   ※ ol.ps-awd-steps 로 특이성을 올려야 한다. 위쪽 `.ps-awd ul, .ps-awd ol { margin: 0 }` 가
      (0,1,1) 이라 클래스 하나짜리 `.ps-awd-steps`(0,1,0) 의 margin-top 을 덮어쓴다. */
.ps-awd ol.ps-awd-steps {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; margin-top: 48px;
}
.ps-awd-steps li { border-top: 1px solid var(--ps-mute-100); padding-top: 16px; min-height: 4rem; }
.ps-awd-steps .ps-eyebrow { color: var(--ps-mute-500); }
.ps-awd-steps .dt { margin: 8px 0 0; font-size: 14px; font-weight: 700; }
.ps-awd-steps .none { margin: 8px 0 0; font-size: 14px; color: var(--ps-mute-500); }

/* ── 갤러리 ── */
.ps-awd-gallery { display: grid; grid-template-columns: 1fr; gap: 12px; }
@media (min-width: 768px) { .ps-awd-gallery { grid-template-columns: repeat(2, 1fr); } }
.ps-awd-gallery .shot {
  position: relative; display: block; width: 100%; padding: 0;
  aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer;
  border: 1px solid var(--ps-ink); background: var(--ps-mute-50);
}
@supports not (aspect-ratio: 4 / 3) { .ps-awd-gallery .shot { height: 0; padding-top: 75%; } }
.ps-awd-gallery .shot img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transition: transform 500ms ease;
}
.ps-awd-gallery .shot:hover img { transform: scale(1.03); }
.ps-awd-gallery .shot:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 3px; }
.ps-awd-gallery .zoom {
  position: absolute; right: 8px; bottom: 8px;
  background: rgba(255, 255, 255, 0.85); color: var(--ps-ink);
  padding: 2px 8px; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.18em;
  opacity: 0; transition: opacity 140ms ease;
}
.ps-awd-gallery .shot:hover .zoom,
.ps-awd-gallery .shot:focus-visible .zoom { opacity: 1; }

/* 갤러리 안의 건축상 사진 — 완공작 사진과 한 줄에 섞이므로 출처를 배지로 남긴다.
   ⚠ 라임(--ps-accent)은 흰 배경 위 글자색으로 쓰지 않는다. 배경으로만 쓰고 글자는 잉크. */
.ps-awd-gallery .ps-gal-badge {
  position: absolute; left: 8px; top: 8px;
  background: var(--ps-accent); color: var(--ps-ink);
  padding: 3px 8px; font-size: 11.5px; font-weight: 800;
  letter-spacing: 0.14em; line-height: 1; pointer-events: none;
}
.ps-awd-gallery .shot.is-award { border-color: var(--ps-ink); }

/* ── 작품설명 ──
   본문이 길어 --ps-fs-lead(리드문용) 는 과했다. 심사평 본문(16px)과 같은 급으로 맞춘다.
   색은 .ps-awd 의 기본값(--ps-ink)을 그대로 쓴다 — mute-700 을 지정하면 그게 덮어써서 흐려진다. */
.ps-awd-statement {
  margin: 32px 0 0; max-width: 68ch;
  font-size: 16px; line-height: 1.8;
  white-space: pre-wrap; word-break: keep-all;
}

/* ── 심사평 ── 종합의견서와 개인 심사평을 한 목록에 섞어 낸다 (라벨만 다름) */
.ps-awd-jury { display: flex; flex-direction: column; gap: 24px; }
.ps-awd-jury li { border-left: 2px solid var(--ps-accent); padding-left: 20px; }
.ps-awd-jury .who {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  margin: 0 0 8px; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--ps-mute-500);
}
.ps-awd-jury .who .nm { color: var(--ps-ink); }
/* 이름 뒤 역할 '· 심사위원 / Member' [2026-10-08 디자인] */
.ps-awd-jury .who .nm .role { margin-left: 8px; color: var(--ps-mute-500); font-weight: 700; }
/* 본문 — 에디터가 아니라 평문 입력이라 pre-wrap 으로 줄바꿈만 살린다.
   (DB 전수 확인: TB_EVAL_RESN.CONTENT 201건 중 HTML 태그 0건) */
.ps-awd-jury .txt {
  margin: 0; max-width: 68ch; font-size: 16px; line-height: 1.75;
  color: var(--ps-mute-700); white-space: pre-wrap; word-break: keep-all;
}

/* ── 도면 ── 유형별 탭 + 이미지 그리드 */
.ps-awd-dw-tabs {
  display: flex; flex-wrap: wrap; gap: 0 4px;
  border-bottom: 1px solid var(--ps-ink);
}
.ps-awd-dw-tab {
  display: inline-flex; align-items: baseline; gap: 6px;
  padding: 8px 16px; border: 1px solid transparent; border-bottom: 0;
  background: transparent; color: var(--ps-mute-500); cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.18em; white-space: nowrap;
}
.ps-awd-dw-tab:hover { color: var(--ps-ink); }
.ps-awd-dw-tab:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: -2px; }
.ps-awd-dw-tab.is-on {
  background: var(--ps-ink); border-color: var(--ps-ink); color: var(--ps-paper);
}
.ps-awd-dw-tab .ct { font-weight: 700; opacity: 0.65; }

.ps-awd-dw-grid { display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px; }
@media (min-width: 640px) { .ps-awd-dw-grid { grid-template-columns: repeat(2, 1fr); } }
.ps-awd-dw-grid[hidden] { display: none; }
.ps-awd-dw-grid .shot {
  position: relative; aspect-ratio: 4 / 3; overflow: hidden; cursor: pointer;
  border: 1px solid var(--ps-ink); background: var(--ps-mute-50); padding: 0;
}
@supports not (aspect-ratio: 4 / 3) { .ps-awd-dw-grid .shot { height: 0; padding-top: 75%; } }
/* 도면은 잘리면 안 되므로 contain (갤러리 사진은 cover) */
.ps-awd-dw-grid .shot img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  transition: transform 500ms ease;
}
.ps-awd-dw-grid .shot:hover img { transform: scale(1.03); }
.ps-awd-dw-grid .shot:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 3px; }
.ps-awd-dw-grid .zoom {
  position: absolute; left: 12px; bottom: 12px;
  background: var(--ps-ink); color: var(--ps-paper); padding: 4px 8px;
  font-size: 12px; font-weight: 800; letter-spacing: 0.18em; text-transform: uppercase;
  opacity: 0; transition: opacity 140ms ease;
}
.ps-awd-dw-grid .shot:hover .zoom,
.ps-awd-dw-grid .shot:focus-visible .zoom { opacity: 1; }

/* ── 인터뷰 ── */
.ps-awd-itvw { display: flex; flex-direction: column; gap: 64px; }
.ps-awd-itvw article { display: grid; grid-template-columns: 1fr; gap: 24px; align-items: start; }
@media (min-width: 768px) { .ps-awd-itvw article { grid-template-columns: 4fr 8fr; gap: 32px; } }
.ps-awd-itvw h3 {
  margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 1.875rem);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.25; word-break: keep-all;
}
.ps-awd-itvw .by { margin: 12px 0 0; font-size: 14px; color: var(--ps-mute-700); }
.ps-awd-itvw .lead {
  margin: 0 0 32px; font-size: var(--ps-fs-lead); line-height: 1.7; color: var(--ps-mute-700);
  word-break: keep-all;
}

/* ── 원 공모 ── */
.ps-awd-source { display: block; }
.ps-awd-source h3 {
  margin: 0; font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.25rem);
  font-weight: 800; letter-spacing: -0.02em; line-height: 1.2; word-break: keep-all;
  transition: color 160ms ease;
}
.ps-awd-source:hover h3,
.ps-awd-source:focus-visible h3 { color: var(--ps-mute-700); }
.ps-awd-source:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 4px; }
.ps-awd-source .sub { margin: 12px 0 0; color: var(--ps-mute-700); }
.ps-awd-source .go { margin: 16px 0 0; color: var(--ps-mute-500); }

/* ── 목록으로 ── */
.ps-awd-back { margin: 0; padding: 32px var(--ps-gutter) 64px; border-top: 1px solid var(--ps-mute-200); }
.ps-awd-back a { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; }
.ps-awd-back a:hover { text-decoration: underline; text-underline-offset: 4px; }
.ps-awd-back a:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }

/* ── 이미지 확대 (갤러리·도면 공용) ── */
.ps-awd-lightbox {
  position: fixed; inset: 0; z-index: 100;
  /* 사진 위를 끌어도 뒤 페이지로 스크롤이 넘어가지 않게 */
  overscroll-behavior: contain; touch-action: pinch-zoom;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 10, 10, 0.95); padding: 48px 24px;
}
.ps-awd-lightbox[hidden] { display: none; }
.ps-awd-lightbox figure {
  margin: 0; max-width: 92vw; max-height: 88vh;
  display: flex; flex-direction: column; align-items: center;
}
.ps-awd-lightbox img {
  max-width: 100%; max-height: 80vh; object-fit: contain;
  border: 1px solid var(--ps-mute-700);
}
.ps-awd-lightbox .cap {
  margin: 16px 0 0; display: flex; align-items: center; flex-wrap: wrap;
  justify-content: center; gap: 12px;
  font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ps-paper); text-align: center;
}
.ps-awd-lightbox .cap .by { font-weight: 600; letter-spacing: 0.06em; text-transform: none; opacity: 0.8; }
.ps-awd-lightbox .cap .by:empty { display: none; }
.ps-awd-lightbox .cap .idx { opacity: 0.7; }
.ps-awd-lightbox .cap .idx:empty { display: none; }

/* 닫기 / 이전·다음 — 배경이 어두우므로 종이색 테두리, 호버 시 반전 */
.ps-awd-lightbox .close,
.ps-awd-lightbox .nav {
  position: absolute; z-index: 10;
  display: grid; place-items: center;
  border: 1px solid var(--ps-paper); background: transparent; color: var(--ps-paper);
  line-height: 1; cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.ps-awd-lightbox .close:hover,
.ps-awd-lightbox .nav:hover { background: var(--ps-paper); color: var(--ps-ink); }
.ps-awd-lightbox .close:focus-visible,
.ps-awd-lightbox .nav:focus-visible { outline: 2px solid var(--ps-accent); outline-offset: 2px; }
.ps-awd-lightbox .close { top: 24px; right: 24px; width: 40px; height: 40px; font-size: 22px; }
.ps-awd-lightbox .nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 28px; }
.ps-awd-lightbox .nav.prev { left: 16px; }
.ps-awd-lightbox .nav.next { right: 16px; }
@media (min-width: 768px) {
  .ps-awd-lightbox .nav.prev { left: 32px; }
  .ps-awd-lightbox .nav.next { right: 32px; }
}
.ps-awd-lightbox .nav[hidden] { display: none; }

/* ── 생애주기 단계 영역 [2026-10-22] — 설계 01 / 공사 02 / 완공 03 머리. 아래 구역들을 묶는 큰 제목 ── */
.ps-lc-stage {
  margin-top: 48px; padding: 20px 0 4px; border-top: 3px solid var(--ps-ink);
  display: flex; align-items: baseline; gap: 14px;
  scroll-margin-top: calc(var(--ps-header-h, 4.25rem) + 32px);
}
.ps-lc-stage .ps-eyebrow { margin: 0; color: var(--ps-mute-500); }
.ps-lc-stage-h { margin: 0; font-size: clamp(1.6rem, 1.2vw + 1.1rem, 2.2rem); font-weight: 900; letter-spacing: -0.02em; }
/* 단계 머리 바로 아래 구역은 위 선을 겹쳐 그리지 않는다 */
.ps-lc-stage + .ps-awd-sec.is-line,
.ps-lc-stage + .ps-awd-sec.is-line-ink { border-top: 0; padding-top: 32px; }

/* WEB3D — 16:9 */
.ps-lc-web3d { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--ps-mute-100); }
.ps-lc-web3d iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
@supports not (aspect-ratio: 16 / 9) { .ps-lc-web3d { height: 0; padding-top: 56.25%; } }
.ps-lc-web3d-go { margin: 10px 0 24px; font-size: 14px; }
.ps-lc-web3d-go a { color: inherit; }

/* 활용정보 — 줄바꿈을 살리고, 긴 칸(프로그램·찾아가는 길)은 한 줄 전체 */
.ps-lc-use dd { white-space: pre-line; }
@media (min-width: 640px) { .ps-lc-use > div.is-wide { grid-column: 1 / -1; } }
/* 항목 구분 [2026-10-23] — 개요와 같은 간격만 있어서 여러 줄짜리(개방시간·프로그램·찾아가는 길)가 이어지면
   앞 항목 끝줄과 다음 항목 제목이 붙어 보였다. 활용정보에만 항목마다 위 구분선 + 여백, 제목은 진하게 */
.ps-lc-use { row-gap: 0; column-gap: 32px; border-bottom: 1px solid var(--ps-mute-300); }
.ps-lc-use > div { padding: 18px 0 20px; border-top: 1px solid var(--ps-mute-300); }
.ps-lc-use dt { color: var(--ps-ink); font-weight: 700; }
.ps-lc-use dd { margin-top: 8px; }
/* 프로그램 글 안의 주소 링크·대표 홈페이지 버튼 [2026-10-23] — 링크임이 색만이 아니라 밑줄로도 보이게(웹접근성), 긴 주소는 줄을 넘긴다 */
.ps-lc-use .ps-lc-linktext a { color: inherit; text-decoration: underline; text-underline-offset: 2px; word-break: break-all; }
.ps-lc-use .ps-lc-linktext a:focus-visible,
.ps-lc-use .ps-lc-hmpg:focus-visible { outline: 2px solid var(--ps-focus, #1a5c96); outline-offset: 2px; }
.ps-lc-use dd .ps-lc-hmpg { white-space: nowrap; }

/* 작품설명 아래 #키워드 [2026-10-22] — 공모전 당선작(ps-competition.css)·건축인(ps-arctn.css .ps-kwds)과 같은 모양. 글자만, 링크 아님 */
.ps-awd .ps-kwds { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 16px 0 0; font-size: 14px; line-height: 1.5; color: var(--ps-mute-700); }