@charset "UTF-8";
/* ============================================================
   ps-story.css — 이야기(저널) > 건축이야기 목록 (개편, 대민)
   구성: 헤더 / sticky 서브탭+검색 / 대표 1건 / 다른 이야기 그리드 / 페이저
   토큰: ps-tokens.css. 단일 라이트 테마.
   ============================================================ */

/* 폰트 — 지정이 없으면 PretendardPS 로 나오게 한다.
   body.ps-scope 에 걸려 있지만 button/input 은 상속하지 않고,
   레거시 sub.css 가 특정 선택자에 NanumSquare·NotoSans 를 박아둔 곳이 있어
   이 스코프 안에서는 다시 잡아 준다. (ps-competition.css 와 같은 방식) */
.ps-story, .ps-sd { font-family: var(--ps-font-sans); }
.ps-story button, .ps-story input, .ps-story select, .ps-story textarea,
.ps-sd    button, .ps-sd    input, .ps-sd    select, .ps-sd    textarea { font-family: inherit; }

/* [2026-09-29 되돌림] 예전엔 업체 페이지에서 복사해 붙인 옛 인라인 font-family(로드 실패하는
   Pretendard 등)를 전부 사이트 기본 폰트로 강제 덮었었다. 그런데 지금은 Dee 에디터에 폰트 선택
   기능(맑은 고딕 등)이 있어, 관리자가 직접 고른 폰트까지 이 규칙에 같이 덮여서 항상 기본 폰트로만
   나왔다 — 관리자가 고른 대로 보이는 게 맞다고 판단해 강제 override 를 없앤다.
   ※ 건축이야기·서울소식 상세가 같은 .ps-sd-article 을 쓴다. */

.ps-story { padding: var(--ps-section-pad) var(--ps-gutter); }

/* ── 헤더 ── */
.ps-story-head {
  display: grid; grid-template-columns: 1fr; gap: 32px; align-items: end;
  border-bottom: 1px solid var(--ps-ink); padding-bottom: 40px;
}
@media (min-width: 768px) { .ps-story-head { grid-template-columns: 7fr 5fr; } }
.ps-story-head-l .ps-eyebrow { margin: 0 0 16px; }
.ps-story-lead { margin: 0; font-size: var(--ps-fs-body); line-height: 1.6; color: var(--ps-mute-700); max-width: 44ch; }

/* ── 서브탭 + 검색 (sticky) ── */
.ps-story-subnav {
  position: sticky; top: var(--ps-header-h, 4.25rem); z-index: 30;
  margin: 48px calc(-1 * var(--ps-gutter)) 0; padding: 0 var(--ps-gutter);
  border-top: 1px solid var(--ps-ink); border-bottom: 1px solid var(--ps-ink);
  background: var(--ps-paper);
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .ps-story-subnav { background: rgba(255,255,255,.85); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
}
.ps-story-subnav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 12px 0; }
.ps-story-tabs { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; overflow-x: auto; scrollbar-width: none; }
.ps-story-tabs::-webkit-scrollbar { display: none; }
.ps-story-tabs a {
  display: inline-block; padding: 6px 12px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.16em; white-space: nowrap;
  color: var(--ps-mute-700); border: 1px solid transparent; text-decoration: none;
  transition: border-color 140ms ease, color 140ms ease, background-color 140ms ease;
}
.ps-story-tabs a:hover { border-color: var(--ps-ink); }
.ps-story-tabs a.is-active { background: var(--ps-ink); color: var(--ps-paper); border-color: var(--ps-ink); }
.ps-story-tabs a:focus-visible { outline: 2px solid var(--ps-focus, #0046c8); outline-offset: 2px; }

.ps-story-search { position: relative; display: flex; align-items: center; flex: none; }
.ps-story-search input {
  width: clamp(180px, 22vw, 300px); border: 1px solid var(--ps-mute-300); background: transparent;
  padding: 6px 32px 6px 12px; font-size: 12px; outline: none; color: var(--ps-ink);
}
.ps-story-search input::placeholder { color: var(--ps-mute-500); }
.ps-story-search input:focus { border-color: var(--ps-ink); }
.ps-story-search button {
  position: absolute; right: 6px; display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; color: var(--ps-mute-500); padding: 2px;
}
.ps-story-search button:hover { color: var(--ps-ink); }
.ps-story-search button:focus-visible { outline: 2px solid var(--ps-focus, #0046c8); outline-offset: 2px; }

.ps-story-tagline { margin: 40px 0 0; max-width: 64ch; font-size: var(--ps-fs-body); color: var(--ps-mute-700); line-height: 1.5; }
.ps-story-rule { margin: 32px 0 0; border: 0; border-top: 1px solid var(--ps-mute-100); }
.ps-story-empty { margin: 64px 0; text-align: center; color: var(--ps-mute-500); }

/* ── 공통: 이미지 (썸네일 없으면 해치 placeholder) ── */
.ps-story-img {
  position: absolute; inset: 0; background-size: cover; background-position: center;
  background-color: var(--ps-mute-50);
  background-image: repeating-linear-gradient(45deg, var(--ps-mute-100), var(--ps-mute-100) 12px, var(--ps-mute-50) 12px, var(--ps-mute-50) 24px);
  transition: transform 700ms ease;
}
.group:hover .ps-story-img { transform: scale(1.04); }

/* ── 배지 ── */
.ps-story-badge {
  display: inline-block; background: var(--ps-accent); color: var(--ps-ink);
  padding: 4px 8px; font-size: 12px; letter-spacing: 0.18em; font-weight: 800; text-transform: uppercase;
}

/* ── 메타 (이름 · 날짜) ── */
.ps-story-meta { margin: 12px 0 0; color: var(--ps-mute-500); }
.ps-story-meta .sep { margin: 0 8px; color: var(--ps-mute-300); }
.ps-story-meta .tnum { font-variant-numeric: tabular-nums; }

/* ── 대표(최신 1건) ── */
.ps-story-feature {
  display: grid; grid-template-columns: 1fr; gap: 32px; align-items: end;
  margin-top: 48px; text-decoration: none; color: inherit;
}
@media (min-width: 768px) { .ps-story-feature { grid-template-columns: 7fr 5fr; gap: 48px; } }
.ps-story-feature-body { order: 2; }
.ps-story-feature-fig { order: 1; }
@media (min-width: 768px) { .ps-story-feature-body { order: 1; } .ps-story-feature-fig { order: 2; } }
.ps-story-feature-title {
  margin: 20px 0 0; font-size: clamp(2rem, 1rem + 3vw, 4.25rem);
  font-weight: 900; line-height: 0.94; letter-spacing: -0.025em;
}
.ps-story-feature-sub { margin: 16px 0 0; font-size: var(--ps-fs-body); color: var(--ps-mute-700); max-width: 58ch; line-height: 1.5; }
.ps-story-feature-fig {
  position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--ps-mute-50); border: 1px solid var(--ps-ink);
}
.ps-story-feature:focus-visible { outline: 2px solid var(--ps-focus, #0046c8); outline-offset: 4px; }

/* ── 다른 이야기 ── */
.ps-story-more { margin-top: 80px; }
.ps-story-more-head { border-top: 1px solid var(--ps-ink); padding-top: 20px; margin-bottom: 40px; }
.ps-story-more-head h2 {
  margin: 0; font-size: clamp(1.25rem, 0.9rem + 0.8vw, 1.75rem);
  font-weight: 900; letter-spacing: -0.01em; text-transform: uppercase;
}
.ps-story-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 56px 40px; }
@media (min-width: 768px) { .ps-story-grid { grid-template-columns: 1fr 1fr; } }
.ps-story-card { display: block; text-decoration: none; color: inherit; }
.ps-story-card-fig {
  position: relative; width: 100%; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--ps-mute-50); border: 1px solid var(--ps-ink);
}
.ps-story-card-badge { margin-top: 16px; }
.ps-story-card-title {
  margin: 12px 0 0; font-size: clamp(1.25rem, 0.95rem + 0.8vw, 1.75rem);
  font-weight: 800; line-height: 1.08; letter-spacing: -0.02em; color: var(--ps-ink);
  transition: color 140ms ease;
}
.ps-story-card:hover .ps-story-card-title { color: var(--ps-mute-700); }
.ps-story-card-sub { margin: 12px 0 0; font-size: var(--ps-fs-body, 0.9375rem); color: var(--ps-mute-700); max-width: 42ch; line-height: 1.4; }
/* 부제 다음의 참여자·날짜 메타는 간격을 더 벌림 (딱붙음 방지) */
.ps-story-card-sub + .ps-story-meta { margin-top: 16px; }
.ps-story-card:focus-visible { outline: 2px solid var(--ps-focus, #0046c8); outline-offset: 4px; }

/* ── 페이저 ── */
.ps-story-pager { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 80px; padding-top: 24px; border-top: 1px solid var(--ps-mute-100); }
.ps-story-pager a { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ps-ink); text-decoration: none; }
.ps-story-pager a:hover { color: var(--ps-mute-700); }
.ps-story-pager a:focus-visible { outline: 2px solid var(--ps-focus, #0046c8); outline-offset: 2px; }
.ps-story-pager-cur { font-size: 12px; font-weight: 700; letter-spacing: 0.14em; color: var(--ps-mute-500); font-variant-numeric: tabular-nums; }

/* ═══════════ 건축이야기 상세 (viewDetailStory) ═══════════ */
.ps-sd { }

/* ── 히어로 ── */
.ps-sd-hero { position: relative; width: 100%; aspect-ratio: 16 / 9; border-bottom: 1px solid var(--ps-ink); overflow: visible; }
@media (min-width: 768px) { .ps-sd-hero { aspect-ratio: 21 / 9; } }
.ps-sd-hero-img {
  position: absolute; inset: 0; overflow: hidden;
  background-size: cover; background-position: center; background-color: var(--ps-mute-100);
}
.ps-sd-hero-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,10,.85), rgba(10,10,10,.3) 55%, transparent); }
/* 대표이미지 없을 때 — 스트라이프 대신 잉크 배경 + 큰 워터마크(PS). 이미 어두워서 스크림 불필요. */
.ps-sd-hero-img.is-empty { background-color: var(--ps-ink); }
.ps-sd-hero-mark {
  position: absolute; right: var(--ps-gutter); top: 50%; transform: translateY(-50%);
  font-weight: 900; text-transform: uppercase; line-height: 1; letter-spacing: -0.04em;
  font-size: clamp(4rem, 14vw, 12rem); color: var(--ps-paper); opacity: .1;
  user-select: none; pointer-events: none;
}
.ps-sd-hero-actions { position: absolute; top: 16px; right: 16px; z-index: 10; display: flex; align-items: center; gap: 8px; }
/* 히어로 공유/북마크 버튼은 공모상세 클래스(ps-cptd-hero-iconbtn / ps-cptd-share-*) 재사용 — ps-competition.css */

.ps-sd-hero-body { position: absolute; inset-inline: 0; bottom: 0; z-index: 5; padding: 0 var(--ps-gutter) 40px; color: var(--ps-paper); }
@media (min-width: 768px) { .ps-sd-hero-body { padding-bottom: 64px; } }
/* .ps-scope .ps-eyebrow(0,2,0) 의 mute 색을 이기도록 .ps-sd-hero-body 접두로 특이도 상향 */
.ps-sd-hero-body .ps-sd-hero-meta { display: flex; align-items: center; gap: 8px; margin: 0; color: var(--ps-paper); }
.ps-sd-hero-body .ps-sd-hero-meta span { color: var(--ps-paper); }
.ps-sd-hero-meta .sep { opacity: .6; }
.ps-sd-hero-meta .tnum { font-variant-numeric: tabular-nums; }
.ps-sd-hero-title {
  margin: 16px 0 0; font-size: clamp(2rem, 1rem + 3.5vw, 5rem); line-height: 0.95;
  letter-spacing: -0.025em; text-transform: uppercase; max-width: 24ch; text-wrap: balance;
}
.ps-sd-hero-sub { margin: 16px 0 0; max-width: 52ch; font-size: var(--ps-fs-body); line-height: 1.55; color: rgba(255,255,255,.85); }

/* ── 본문 ── */
.ps-sd-main { padding: var(--ps-section-pad) var(--ps-gutter); }
.ps-sd-grid { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: start; }
@media (min-width: 768px) { .ps-sd-grid { grid-template-columns: repeat(12, 1fr); gap: 32px; } }

.ps-sd-aside { display: flex; flex-direction: column; gap: 24px; }
@media (min-width: 768px) { .ps-sd-aside { grid-column: span 3; position: sticky; top: calc(var(--ps-header-h, 4.25rem) + 1.5rem); align-self: start; } }
.ps-sd-aside-lbl { margin: 0; color: var(--ps-mute-500); }
.ps-sd-aside > div > a.ps-eyebrow { text-decoration: none; transition: color .15s; }
.ps-sd-aside > div > a.ps-eyebrow:hover { color: var(--ps-mute-700); }
.ps-sd-aside-name { display: block; margin-top: 4px; font-size: 16px; font-weight: 800; line-height: 1.35; color: var(--ps-ink); text-decoration: none; }
.ps-sd-aside-name:not(.is-plain):hover { text-decoration: underline; }
.ps-sd-aside-affil { margin: 4px 0 0; font-size: 13px; color: var(--ps-mute-700); }
.ps-sd-aside-mbr + .ps-sd-aside-mbr { margin-top: 12px; }
.ps-sd-aside-date { margin: 4px 0 0; font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ps-sd-aside-links { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.ps-sd-aside-links a { font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--ps-ink); text-decoration: none; }
.ps-sd-aside-links a:hover { text-decoration: underline; }

/* article 본문 — 에디터 HTML 그대로 렌더.
   본문 요소(p/blockquote/img 등)에는 스타일을 강제하지 않는다(에디터 인라인 style 보존).
   레이아웃 배치와 넘침 방지만 담당. */
@media (min-width: 768px) { .ps-sd-article { grid-column: 5 / span 8; } }
.ps-sd-article { min-width: 0; }              /* grid 자식 넘침 방지 */
/* 영문 화면 본문 글꼴 [2026-10-20] — 에디터 본문에 Word 에서 붙여 넣은 인라인 글꼴(Arial·맑은 고딕)이 박혀 있어
   영문(자동번역) 본문이 Arial 로 보였다. 영문일 때만 사이트 글꼴로 통일한다(인라인 style 이라 !important).
   국문은 담당자가 고른 글꼴을 존중해 손대지 않는다. html lang 은 psView 데코레이터가 로케일로 채운다. */
html[lang="en"] .ps-sd-article,
html[lang="en"] .ps-sd-article * { font-family: var(--ps-font-sans, 'PretendardPS', sans-serif) !important; }
/* 크기를 따로 지정 안 한(인라인 font-size 없는) 기본 텍스트의 기준 크기를 에디터가 실제로 쓰는
   값(14px, webeditor.min.css .we-wrapper)에 맞춘다 [2026-09-29] — 대민 디자인 기본값(16px)이
   아니라, 관리자가 에디터에서 타이핑하며 "보는 그대로"가 기준이어야 한다는 판단.
   글자크기 드롭다운이 이 앙비언트 값을 10pt(14*0.75, 근사)로 표시해 보여서 헷갈리기 쉬운데,
   실제 렌더 크기는 14px 다 — 그 값 그대로 맞춘다. */
.ps-sd-article { font-size: 14px; }
/* 본문 행간 1.4 [2026-10-01, 담당자 요청] — 에디터 쪽(.we-body)도 같은 값으로 맞춰 뒀다
   (viewDetailJrnlItvw.jsp 의 head 안 <style>). 위 font-size 와 같은 이유로, 행간도
   "관리자가 에디터에서 보는 그대로" 가 대민에 나가야 한다 — 한쪽만 고치면 어긋난다.
   ⚠ 지금까지는 대민에 행간 규칙이 아예 없어 상속값을, 에디터는 1.75 를 써서 서로 달랐다.
   ⚠ .ps-sd-article 은 건축이야기 말고 서울소식·알림마당·WEB3D 상세도 같이 쓴다 —
     본문 조판 기준은 넷이 같아야 하므로 일부러 함께 적용한다. */
.ps-sd-article { line-height: 1.4; }
.ps-sd-article img { max-width: 100%; height: auto; }  /* 컨테이너 넘침만 방지 */
/* 표 테두리 보완 [2026-09-29] — 에디터가 표를 삽입할 때 브라우저(execCommand insertHTML)가
   셀 인라인 style 의 border 축약형(예: "border:1px solid #000")에서 border-width/style 을
   지우고 border-color 만 남긴다(브라우저 자체 동작, 우리 코드가 하는 게 아니다). 에디터 쪽엔
   webeditor.min.css 에 이걸 보완하는 기본 테두리(.we-body table td/th{border:1px solid #c0c4cc})
   가 있어서 폭·스타일은 이 기본값으로, 색상만 인라인 값이 이겨서 정상으로 보인다.
   대민은 그 CSS를 안 불러오므로(툴바·팝업 스타일까지 다 들어와 충돌 위험) 같은 보완 규칙만
   복제한다 — webeditor.min.css 전체를 로드하지 않는다. */
.ps-sd-article table { border-collapse: collapse; width: 100%; margin: 8px 0; }
.ps-sd-article table td, .ps-sd-article table th { border: 1px solid #c0c4cc; padding: 6px 10px; vertical-align: top; }
.ps-sd-article table th { background: #f0f3f8; font-weight: 600; }
/* 에디터 이미지 캡션(figure.we-img-figure > img + figcaption) [2026-09-29].
   ⚠ 이 스타일은 webeditor.min.css 에만 있고 대민 페이지는 그 CSS를 안 불러온다
   (에디터 툴바용 스타일까지 통째로 들어와 버려서) — 그래서 캡션이 입력한 그대로가 아니라
   기본 figcaption 스타일(꾸밈 없음)로 나왔다. 에디터 안 모양과 맞춰 여기에 옮겨 둔다. */
.ps-sd-article .we-img-figure { display: inline-block; max-width: 100%; }
.ps-sd-article .we-img-figure img { display: block; margin: 0 auto; vertical-align: middle;
    cursor: pointer;
    border: 2px solid transparent;
    border-radius: 2px;
    transition: border-color 0.12s;}
.ps-sd-article .we-img-figure figcaption {
  margin-top: 6px; padding: 4px 8px; font-size: 13px; color: var(--ps-mute-500);
  text-align: center; font-style: italic;
}
/* 본문 유튜브 임베드 (we-yt-lite → iframe 변환분) — 16:9 반응형 */
.ps-sd-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 24px 0; background: #000; }
.ps-sd-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ps-sd-backlink { margin: 48px 0 0; }
.ps-sd-backlink a {
  font-size: var(--ps-fs-eyebrow); text-transform: uppercase; letter-spacing: var(--ps-tr-eyebrow);
  font-weight: 500; color: var(--ps-mute-500); text-decoration: none;
}
.ps-sd-backlink a:hover { color: var(--ps-ink); }

/* ── 관련글 ── */
/* ⚠ 여기엔 border-top 을 두지 않는다 — 바로 아래 .ps-sd-related-blk 이 각자 윗선을 갖고 있어
   선이 두 겹으로 겹쳐 보인다. */
.ps-sd-related { padding: var(--ps-section-pad) var(--ps-gutter); }
.ps-sd-related-grid { display: grid; grid-template-columns: 1fr; gap: 40px; }
@media (min-width: 768px) { .ps-sd-related-grid { grid-template-columns: 1fr 1fr; gap: 32px; } }
/* 한쪽 구분만 있을 때는 2단으로 벌리지 않는다 — 빈 칸이 생겨 어색하다.
   미디어쿼리 뒤에 둬야 768px 이상에서도 이긴다(같은 특이도, 나중 규칙 우선). */
.ps-sd-related-grid.is-single { grid-template-columns: 1fr; }
.ps-sd-related-blk { border-top: 1px solid var(--ps-ink); padding-top: 24px; }
.ps-sd-related-blk > .ps-eyebrow { margin: 0 0 16px; }
.ps-sd-related-blk ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.ps-sd-related-item { display: block; text-decoration: none; }
.ps-sd-related-item .date, .ps-sd-related-item .kind { display: block; color: var(--ps-mute-500); }
.ps-sd-related-item .ttl { display: block; margin-top: 4px; font-size: 14px; font-weight: 700; line-height: 1.35; color: var(--ps-ink); transition: color 140ms ease; }
.ps-sd-related-item:hover .ttl { color: var(--ps-mute-700); }
.ps-sd-related-item .arw { margin-left: 4px; opacity: 0; transition: opacity 140ms ease; }
.ps-sd-related-item:hover .arw { opacity: 1; }
.ps-sd-related-item:focus-visible { outline: 2px solid var(--ps-focus, #0046c8); outline-offset: 2px; }

/* ── 건축가 보기 (대표 건축가의 당선작 아카이브) ── */
.ps-arch-works { border-top: 1px solid var(--ps-ink); padding: var(--ps-section-pad) var(--ps-gutter); }
.ps-arch-head {
  display: grid; grid-template-columns: 1fr; gap: 12px; align-items: end;
  padding-bottom: 40px; border-bottom: 1px solid rgba(10, 10, 10, 0.1);
}
@media (min-width: 768px) { .ps-arch-head { grid-template-columns: 7fr 5fr; gap: 32px; } }
.ps-arch-head-l .ps-eyebrow { margin: 0 0 12px; }
.ps-arch-title { margin: 0; line-height: 0.95; letter-spacing: -0.025em; text-transform: uppercase;
  font-size: clamp(1.75rem, 1rem + 2.4vw, 3.25rem); }
.ps-arch-head-r { display: flex; }
@media (min-width: 768px) { .ps-arch-head-r { justify-content: flex-end; } }
.ps-arch-more {
  align-self: end; text-decoration: none; font-size: 14px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.12em; color: var(--ps-ink); transition: color 140ms ease;
}
.ps-arch-more:hover { color: var(--ps-mute-700); }
.ps-arch-more:focus-visible { outline: 2px solid var(--ps-focus, #0046c8); outline-offset: 2px; }

.ps-arch-grid {
  list-style: none; margin: 40px 0 0; padding: 0;
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 48px 24px;
}
@media (min-width: 768px) { .ps-arch-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ps-arch-grid { grid-template-columns: repeat(4, 1fr); } }
.ps-arch-card { display: flex; flex-direction: column; text-decoration: none; }
.ps-arch-frame {
  position: relative; width: 100%; aspect-ratio: 3 / 4; overflow: hidden;
  background: #f2f2f2;
  border: 1px solid rgba(10, 10, 10, 0.1);
}
/* 사진은 프레임을 꽉 채운다 — 원본 비율이 3:4 가 아니어도 그리드가 들쭉날쭉해지지 않게 자른다
   (아카이브 목록의 masonry 와 다른 선택이다. 여기는 4열 고정 그리드라 높이가 같아야 한다) [2026-10-02] */
.ps-arch-frame img { display: block; width: 100%; height: 100%; max-width: 100%; object-fit: cover; }
.ps-arch-ph {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ps-mute-500);
}
.ps-arch-badge {
  position: absolute; left: 0; top: 0;
  background: var(--ps-ink); color: var(--ps-paper);
  padding: 4px 10px; font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.1em;
}
.ps-arch-card-title { margin: 12px 0 0; color: var(--ps-ink); word-break: keep-all; transition: color 140ms ease; }
.ps-arch-card:hover .ps-arch-card-title { color: var(--ps-mute-700); }
.ps-arch-card-arch { margin: 4px 0 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ps-mute-700); word-break: keep-all; }
.ps-arch-card-year { margin: 2px 0 0; font-size: 12px; color: var(--ps-mute-500); }
.ps-arch-card:focus-visible { outline: 2px solid var(--ps-focus, #0046c8); outline-offset: 2px; }
.ps-arch-empty { margin: 32px 0 0; font-size: 15px; color: var(--ps-mute-500); }

/* ═══════════ 서울소식 목록 (viewListMedia) ═══════════
   건축이야기와 달리 '대표 1건 크게' 가 없는 균일 그리드 — 벤더 디자인(devtools 추출) 그대로.
   이미지 비율 4:3(건축이야기는 16:10), 2/3/4열. 배지·본문 타이포는 공용 프리미티브
   (.ps-eyebrow/.ps-card-title, ps-tokens.css) 를 그대로 쓴다. */
.ps-news-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 48px 24px; }
@media (min-width: 768px)  { .ps-news-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ps-news-grid { grid-template-columns: repeat(4, 1fr); } }
.ps-news-card { display: block; text-decoration: none; color: inherit; }
.ps-news-fig {
  position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden;
  background: var(--ps-mute-50); border: 1px solid var(--ps-ink);
}
.ps-news-card .ps-story-badge { margin-top: 12px; }
.ps-news-card .ps-card-title { margin: 8px 0 0; color: var(--ps-ink); transition: color 140ms ease; }
.ps-news-card:hover .ps-card-title { color: var(--ps-mute-700); }
.ps-news-card .ps-eyebrow { margin-top: 8px; color: var(--ps-mute-500); font-variant-numeric: tabular-nums; }
.ps-news-card:focus-visible { outline: 2px solid var(--ps-focus, #0046c8); outline-offset: 4px; }

/* WEB3D — 서울소식 카드 프리미티브 재사용, 배지만 이미지 위 오버레이(좌상단)로 얹는다.
   .ps-news-card .ps-story-badge{margin-top:12px} 보다 특이도를 맞춰야 이겨서 상단에 딱 붙는다. */
.ps-web3d-badge, .ps-news-card .ps-web3d-badge { position: absolute; left: 0; top: 0; z-index: 2; margin: 0; }
/* 당선업체명 — .ps-eyebrow(작은 대문자 라벨)는 어울리지 않아 아카이브 카드와 같은 스타일로 */
.ps-web3d-company { margin: 4px 0 0; font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ps-mute-700); word-break: keep-all; }

/* ═══════════ WEB3D 상세 (viewDetailWeb3d) ═══════════
   히어로는 다른 이야기 상세와 동일(대표이미지+스크림+제목). 3D iframe 은 뷰어 조작을 막지 않도록
   오버레이가 아니라 본문(article) 상단에 — 서울소식 상세의 유튜브 임베드(.ps-nd-video)와 같은 자리,
   다만 여긴 항상 켜져 있는 임베드라 border 로 프레임을 둔다. */
.ps-w3d-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; background: var(--ps-mute-50); border: 1px solid var(--ps-ink); }
.ps-w3d-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ps-w3d-lead { margin: 4px 0 0; font-size: 16px; font-weight: 700; color: var(--ps-ink); }
.ps-w3d-desc { margin: 4px 0 0; font-size: var(--ps-fs-body, 0.9375rem); line-height: 1.7; color: var(--ps-mute-700); white-space: pre-wrap; max-width: 60ch; }
/* 공모개요 — 구 화면의 라벨/값 2단 표를 dl 로 */
.ps-w3d-overview { margin-top: 40px; padding-top: 32px; border-top: 1px solid var(--ps-mute-100); max-width: 60ch; }
.ps-w3d-overview-list { margin: 16px 0 0; display: grid; grid-template-columns: minmax(120px, 30%) 1fr; row-gap: 12px; column-gap: 16px; }
.ps-w3d-overview-list dt { margin: 0; font-size: 13px; font-weight: 600; color: var(--ps-mute-500); }
.ps-w3d-overview-list dd { margin: 0; font-size: 14px; line-height: 1.5; color: var(--ps-ink); }
/* 지명 건축가 — 여러 명이라 한 줄에 하나씩 */
.ps-w3d-arc { display: block; }
.ps-w3d-arc + .ps-w3d-arc { margin-top: 4px; }

/* ═══════════ 서울소식 상세 (viewDetailMedia) ═══════════
   건축이야기 상세(.ps-sd)와 같은 골격(히어로 + aside/article)을 그대로 쓴다.
   미디어는 참여자·공모전 연동이 없어 aside 항목만 구분(1/2/3), 상세 프리픽스는 .ps-nd. */
.ps-nd-hero { position: relative; }
.ps-nd-video { position: relative; width: 100%; aspect-ratio: 16 / 9; margin: 40px 0; background: var(--ps-mute-50); }
.ps-nd-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.ps-nd-files { list-style: none; margin: 8px 0 0; padding: 0; }
.ps-nd-files li { border-bottom: 1px solid var(--ps-mute-100); }
.ps-nd-files a {
  display: flex; align-items: center; gap: 8px; padding: 10px 0;
  font-size: var(--ps-fs-body, 0.9375rem); color: var(--ps-ink); text-decoration: none;
}
.ps-nd-files a:hover { color: var(--ps-mute-700); text-decoration: underline; }

/* 공모알림마당(TB_NEWS) 상세 본문 — 일반 텍스트(hf:filter 로 개행만 <br/> 변환) + 이미지 갤러리 */
.ps-nd-body { font-size: var(--ps-fs-body, 0.9375rem); line-height: 1.7; color: var(--ps-mute-700); max-width: 60ch; }
/* 이미지가 글보다 먼저 온다(공지는 포스터가 본체) — 그래서 위 여백은 두지 않고
   아래에 글과의 간격만 준다. 글이 없는 공지도 있어서 :last-child 는 여백을 뺀다. */
.ps-nd-gallery { display: flex; flex-direction: column; gap: 16px; margin-bottom: 32px; }
.ps-nd-gallery:last-child { margin-bottom: 0; }
/* ⚠ width:100% 로 두지 말 것 — 알림마당 이미지는 대부분 세로로 긴 포스터라
   본문 폭을 꽉 채우면 한 장이 화면 몇 개를 차지한다.
   본문 글줄(.ps-nd-body 의 60ch ≈ 540px)과 같은 폭으로 묶고, 원본이 그보다 작으면
   확대하지 않는다(max-width 만 쓰고 width 는 지정하지 않는다). */
.ps-nd-gallery img { display: block; max-width: min(100%, 540px); height: auto; }

/* ═══════════ 공모알림마당 목록 (viewListNotice) ═══════════
   카드가 아니라 줄 목록 — 날짜 + [공모전명] 접두 + 제목. 벤더 디자인(devtools 추출) 그대로.
   공모전 공지는 [대괄호]로 출처를 밝히고 그 공모전 상세의 #notices 로 보낸다. */
.ps-notice-list { list-style: none; margin: 8px 0 0; padding: 0; border-top: 1px solid var(--ps-ink); }
.ps-notice-list > li { border-bottom: 1px solid var(--ps-mute-100); }
.ps-notice-row {
  display: grid; grid-template-columns: 6rem 1fr; align-items: baseline; gap: 16px;
  padding: 16px 8px; margin: 0 -8px; text-decoration: none; color: inherit;
  transition: background-color 140ms ease;
}
@media (min-width: 768px) { .ps-notice-row { grid-template-columns: 8rem 1fr; } }
.ps-notice-row:hover { background: var(--ps-mute-50); }
.ps-notice-row .dt {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em;
  color: var(--ps-mute-500); font-variant-numeric: tabular-nums;
}
.ps-notice-row .ttl {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 15px; line-height: 1.4; font-weight: 600;
}
.ps-notice-row:hover .ttl { text-decoration: underline; text-decoration-color: var(--ps-accent); text-decoration-thickness: 3px; text-underline-offset: 6px; }
.ps-notice-row .src {
  margin-right: 6px; font-size: 12px; font-weight: 700; color: var(--ps-mute-500);
}/* 고정 — 서울시 운영 공지(TB_NEWS)에만 있는 기능. 옅은 배경으로 목록 맨 위에서 눈에 띄게 한다. */
.ps-notice-row.is-pinned { background: var(--ps-mute-100); }
.ps-notice-row.is-pinned:hover { background: var(--ps-mute-200); }
.ps-notice-row.is-pinned .ttl { font-weight: 800; }