@charset "UTF-8";
/* =========================================================================
   PROJECT SEOUL — 사용자 페이지 디자인 토큰 + 공통 레이아웃(헤더/푸터/밴드)
   원본: 외부 업체 Next.js 소스(app/globals.css) 에서 Tailwind 제거하고
        순수 CSS 로 추출. KWCAG 명도대비/포커스/스킵네비 처리 그대로 보존.
   ========================================================================= */

/* =========================================================================
   Pretendard — 사용자 페이지 전용 완전 weight 세트 (100~900).
   기존 font.css 의 Pretendard @font-face 는 500/700/900 만 정의돼 있어
   원본이 쓰는 400(본문)·600·800(CTA) 이 비어 브라우저가 합성(faux) 하거나
   폴백 → 원본과 미세하게 달라 보였음. 여기서 전 weight 를 정식 정의한다.
   충돌 방지 위해 자기완결적 패밀리명 'PretendardPS' 사용(--ps-font-sans 우선).
   ⚠️ format 은 실제 파일 확장자(.woff)에 맞게 "woff" 로 정확히 선언
   (font.css 는 .woff 를 format("woff2") 로 잘못 선언 → 일부 브라우저 로드 실패).
   ========================================================================= */
/* woff2 우선(배포본 pretendard 1.3.9 와 동일 포맷) → 미지원 시 woff 폴백. */
@font-face { font-family:'PretendardPS'; font-style:normal; font-weight:400; font-display:swap;
  src:url('../../fonts/Pretendard/Pretendard-Regular.woff2') format('woff2'),
      url('../../fonts/Pretendard/Pretendard-Regular.woff') format('woff'); }
@font-face { font-family:'PretendardPS'; font-style:normal; font-weight:500; font-display:swap;
  src:url('../../fonts/Pretendard/Pretendard-Medium.woff2') format('woff2'),
      url('../../fonts/Pretendard/Pretendard-Medium.woff') format('woff'); }
@font-face { font-family:'PretendardPS'; font-style:normal; font-weight:600; font-display:swap;
  src:url('../../fonts/Pretendard/Pretendard-SemiBold.woff2') format('woff2'),
      url('../../fonts/Pretendard/Pretendard-SemiBold.woff') format('woff'); }
@font-face { font-family:'PretendardPS'; font-style:normal; font-weight:700; font-display:swap;
  src:url('../../fonts/Pretendard/Pretendard-Bold.woff2') format('woff2'),
      url('../../fonts/Pretendard/Pretendard-Bold.woff') format('woff'); }
@font-face { font-family:'PretendardPS'; font-style:normal; font-weight:800; font-display:swap;
  src:url('../../fonts/Pretendard/Pretendard-ExtraBold.woff2') format('woff2'),
      url('../../fonts/Pretendard/Pretendard-ExtraBold.woff') format('woff'); }
@font-face { font-family:'PretendardPS'; font-style:normal; font-weight:900; font-display:swap;
  src:url('../../fonts/Pretendard/Pretendard-Black.woff2') format('woff2'),
      url('../../fonts/Pretendard/Pretendard-Black.woff') format('woff'); }

:root {
  /* Palette — mostly black/white/gray + a single lime accent */
  --ps-ink: #0a0a0a;
  --ps-paper: #ffffff;
  --ps-mute-50: #f6f6f6;
  --ps-mute-100: #ececec;
  --ps-mute-200: #dedede;
  --ps-mute-300: #c8c8c8;
  /* [KWCAG] 입력칸 테두리·구분선 등 UI 컴포넌트 경계 전용 (WCAG 1.4.11 = 3:1).
     mute-300 은 흰 배경 대비 1.67:1 이라 경계가 안 보인다. #909090 = 3.19:1.
     텍스트에는 쓰지 말 것 — 텍스트는 4.5:1 이 필요하므로 mute-500 이상. */
  --ps-mute-400: #909090;
  /* [KWCAG] 명도 대비 — 기존 #8a8a8a 는 흰 배경 대비 ~3.5:1 (AA 미달).
     본문/캡션 텍스트로 쓰이므로 #6e6e6e (~4.7:1) 로 상향해 WCAG AA 충족. */
  --ps-mute-500: #6e6e6e;
  --ps-mute-700: #4a4a4a;
  --ps-accent: #d6ff20; /* Whitney lime — status dots / primary CTA / accent dot */
  /* [a11y-focus] 포커스 링 전용 색 — 라임(d6ff20)은 흰 배경에서 명도대비 ~1.07:1
     로 거의 안 보임. 명도대비 충분한 진청(#0046C8, ~8.6:1) 으로 분리. */
  --ps-focus: #0046c8;

  /* Seoul city symbol palette — 커스텀 커서용 */
  --ps-seoul-green: #519a38;   /* 서울 숲색 — 기본 (idle) */
  --ps-seoul-red:   #e55b40;   /* 서울 단청색 — clickable hover */
  --ps-seoul-blue:  #0098da;   /* 서울 한강색 — 보조 */

  /* [홈 섹션 밴드] 섹션 리듬용 아주 옅은 배경 톤(서울 상징색) */
  --ps-tint-archive: #f4f8f2;   /* 아주 연한 숲색 톤 */
  --ps-tint-story:   #eaf3f8;   /* 연한 한강색 톤 (예비) */

  /* Type scale (fluid, clamp-driven) */
  --ps-fs-eyebrow: 0.75rem;              /* 12px — meta/eyebrow caps */
  --ps-fs-body: 1rem;                    /* 16px */
  --ps-fs-lead: clamp(1.25rem, 0.95rem + 0.8vw, 1.625rem);
  --ps-fs-h3: clamp(1.75rem, 1.2rem + 1.8vw, 2.75rem);
  --ps-fs-h2: clamp(2.75rem, 1.6rem + 4vw, 5rem);

  /* Tracking */
  --ps-tr-display: -0.025em;  /* Cooper Hewitt 식 thick-condensed */
  --ps-tr-eyebrow: 0.08em;    /* uppercase meta */

  /* Sticker primitive */
  --ps-sticker-pad-x: 0.5rem;
  --ps-sticker-pad-y: 0.25rem;

  /* Spacing rhythm */
  --ps-gutter: clamp(1rem, 0.5rem + 2vw, 2.5rem);
  --ps-section-pad: clamp(3rem, 2rem + 4vw, 6rem);
  --ps-band-pad: clamp(2rem, 1.5rem + 1vw, 2.5rem);

  /* Motion */
  --ps-ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Font stack — 위에서 정의한 PretendardPS(전 weight 정상 로드) 우선.
     기존 "Pretendard"(common/font.css) 는 경로 오류로 로드 실패 상태였음. */
  --ps-font-sans: PretendardPS, Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo",
    "Noto Sans KR", sans-serif;

  /* ── Band tokens (헤더 / 푸터 / promo). 기본 = 검정 베이스. */
  --ps-band-bg:        var(--ps-ink);
  --ps-band-fg:        var(--ps-paper);
  --ps-band-fg-dim:    rgb(255 255 255 / 0.75);
  --ps-band-fg-faint:  rgb(255 255 255 / 0.4);
  --ps-band-border:    rgb(255 255 255 / 0.15);
  --ps-band-cta-fg:    var(--ps-accent);    /* lime text on dark band */
  --ps-band-hover-fg:  var(--ps-paper);
  --ps-band-active-fg: var(--ps-accent);    /* 현재 섹션 활성 — 다크 밴드 위 라임 */

  /* Header height (다른 sticky 요소가 헤더 아래 고정할 때 참조) */
  --ps-header-h: 7rem;
}
@media (min-width: 768px) {
  :root { --ps-header-h: 8rem; }
}

/* =========================================================================
   타이포 기반 — 원본(globals.css html,body) 재현. 헤더/푸터가 원본과 같은
   글자 모양으로 보이도록 Pretendard + OpenType feature(ss01/ss02/kern) 적용.
   ⚠️ 이게 빠지면 폰트가 확연히 달라 보임(대체 글리프/자간 차이).
   .ps-scope(사용자 body) 와 헤더/푸터/모바일시트에 명시 적용.
   ========================================================================= */
.ps-scope,
.ps-seoul-bar,
.ps-scope,
.ps-header,
.ps-footer,
.ps-mobile-sheet {
  font-family: var(--ps-font-sans);
  font-feature-settings: "ss01", "ss02", "kern";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  word-break: keep-all;
  overflow-wrap: anywhere;
  /* 배포본 html/:host 기본 line-height 1.5 재현 (Tailwind Preflight).
     제목류(.ps-display/.ps-*-title 등)는 자체 line-height 가 있어 영향 없음. */
  line-height: 1.5;
}

/* ── Theme: HAIRLINE (light, 1px ink hairline as authority) ──────────── */
[data-theme="hairline"] {
  --ps-band-bg:        var(--ps-paper);
  --ps-band-fg:        var(--ps-ink);
  --ps-band-fg-dim:    rgb(10 10 10 / 0.7);
  --ps-band-fg-faint:  rgb(10 10 10 / 0.35);
  --ps-band-border:    var(--ps-ink);
  --ps-band-cta-fg:    var(--ps-ink);       /* CTA 텍스트 = 검정. 라임은 hover 만 */
  --ps-band-hover-fg:  #6ea800;             /* 라임 어두운 변형 (다크 라임) */
  --ps-band-active-fg: #6ea800;
}

/* ── Theme: FACE (light, soft face tone차 as authority) ───────────────── */
[data-theme="face"] {
  --ps-band-bg:        var(--ps-mute-50);
  --ps-band-fg:        var(--ps-ink);
  --ps-band-fg-dim:    rgb(10 10 10 / 0.7);
  --ps-band-fg-faint:  rgb(10 10 10 / 0.4);
  --ps-band-border:    rgb(10 10 10 / 0.08);
  --ps-band-cta-fg:    var(--ps-ink);
  --ps-band-hover-fg:  #6ea800;
  --ps-band-active-fg: #6ea800;
}

/* =========================================================================
   접근성 (KWCAG 2.2) — 포커스 링 / 스킵 네비 / 모션 최소화
   ========================================================================= */

/* [KWCAG 2.2] 키보드 초점 — 전역 focus-visible 링. 마우스 클릭엔 미적용. */
.ps-scope :focus-visible {
  outline: 2px solid var(--ps-focus);
  outline-offset: 2px;
  border-radius: 1px;
}
/* 검정 배경(헤더/푸터) 위에서는 진청이 묻힐 수 있어 흰 윤곽 + 라임 글로우 */
.ps-band-ink :focus-visible {
  outline-color: var(--ps-paper);
  box-shadow: 0 0 0 4px var(--ps-accent);
}

/* [KWCAG 2.2] 건너뛰기 링크 — Tab 첫 초점 시 본문 바로가기.
   평소엔 화면 밖, 초점 시 좌상단에 노출. */
.ps-skip-link {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 200;
  transform: translateY(-120%);
  background: var(--ps-ink);
  color: var(--ps-paper);
  padding: 0.6rem 1rem;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  transition: transform 120ms ease-out;
}
.ps-skip-link:focus {
  transform: translateY(0);
  outline: 2px solid var(--ps-focus);
  outline-offset: 2px;
}

/* 스크린리더 전용 텍스트 (aria 라벨 보조) */
.ps-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* [KWCAG 2.2] 모션 최소화 */
@media (prefers-reduced-motion: reduce) {
  .ps-scope *,
  .ps-scope *::before,
  .ps-scope *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

/* =========================================================================
   밴드 (헤더 / 푸터 공통 색 표면)
   ========================================================================= */
.ps-band-ink { background: var(--ps-band-bg); color: var(--ps-band-fg); }

/* =========================================================================
   서울시 공식 GNB (Yjs.Gnb.init → #seoul-common-gnb) 컨테이너 보정
   ========================================================================= */
#seoul-common-gnb { height: 49px; border-bottom: 1px solid #000; }
#seoul-gnb-plugin .seoul-gnb-holder { max-width: calc(100% - 67px) !important; }

/* =========================================================================
   서울시 공통 글로벌 바 (SeoulGlobalBar)
   [2026-07-21] 현재 미사용 — 자체 글로벌바 대신 서울시 공식 GNB(Yjs.Gnb.init,
   #seoul-common-gnb) 로 교체함. 아래 규칙은 향후 자체 바 필요 시 재사용 대비 보존.
   ========================================================================= */
.ps-seoul-bar {
  width: 100%;
  background: #ffffff;
  color: #1a1a1a;
  border-bottom: 1px solid #000000;
  font-size: 15px;
}
.ps-seoul-bar .ps-seoul-inner {
  padding: 0 var(--ps-gutter);
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.ps-seoul-bar .ps-seoul-ci { display: inline-flex; align-items: center; flex-shrink: 0; }
.ps-seoul-bar .ps-seoul-ci img { height: 26px; width: auto; }
.ps-seoul-bar .ps-seoul-util {
  display: flex;
  align-items: center;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.ps-seoul-bar .ps-seoul-util::-webkit-scrollbar { display: none; }
.ps-seoul-bar .ps-seoul-util a {
  white-space: nowrap;
  font-weight: 500;
  color: #333333;
  text-decoration: none;
}
.ps-seoul-bar .ps-seoul-util a:hover { color: #000000; text-decoration: underline; text-underline-offset: 2px; }
.ps-seoul-bar .ps-seoul-sep { display: inline-block; width: 1px; height: 12px; background: #d8d8d8; margin: 0 12px; }

/* =========================================================================
   헤더 (SiteHeader) — 3행: [1] 워드마크+카테고리 [2] 서브링크 [3] CTA 스트립
   ========================================================================= */
/* [sticky 복구] common.css 의 `html,body{overflow-x:auto}` 가 body 를 스크롤
   컨테이너로 만들어 .ps-header 의 position:sticky 가 깨졌음(스크롤 시 위로 사라짐).
   원본과 동일하게 overflow-x: clip 으로 교체 — clip 은 스크롤 컨테이너를 안 만들어
   sticky 를 보존. 사용자 페이지(.ps-scope)에만 적용, 관리자엔 영향 없음.
   ⚠️ body height:100% 도 sticky 를 방해할 수 있어 auto 로 되돌림(.ps-scope 한정). */
/* [sticky 복구 - html] view.jsp 등에선 common.css 의 html{overflow-x:auto} 가
   html 을 스크롤 컨테이너로 만들어 .ps-header sticky 가 깨짐(스크롤 시 위로 사라짐).
   html 에도 overflow-x:clip 을 주면 세로(overflow-y:visible)는 유지되면서 가로만
   잘라내 스크롤 컨테이너가 안 만들어짐 → sticky 가 뷰포트 기준으로 정상 고정.
   개편 페이지(body.ps-scope)에만 :has 로 한정 — 관리자엔 영향 없음. */
html:has(body.ps-scope) { overflow-x: clip; }
body.ps-scope { overflow-x: clip; height: auto; min-height: 100%; margin: 0; position: relative; }
/* [레거시 래퍼 마진 제거] view.jsp 데코레이터의 #sub_content 는 common.css 에서
   margin:0 57px 를 받음 — 개편 콘텐츠(.ps-cptt/.ps-home)는 --ps-gutter 로 자체
   여백을 가지므로 이 57px 가 이중으로 붙어 어긋남. 개편 래퍼가 들어있을 때만
   마진 제거(:has). 아직 개편 안 한 기존 서브페이지는 그대로 두어 안전. */
#sub_content:has(.ps-cptt),
#sub_content:has(.ps-home) { margin-left: 0; margin-right: 0; max-width: none; }
/* sub.css 의 #sub_content{min-height:calc(100vh-470px)} 가 짧은 페이지에서 콘텐츠를
   뷰포트 높이만큼 늘려 목록↔푸터 사이 빈 공간을 만듦 → 개편 페이지선 제거. */
#sub_content:has(.ps-cptt),
#sub_content:has(.ps-home) { min-height: 0; }
/* 레거시 reset.css 를 메인에서 뺐을 때 대비한 최소 안전 리셋(.ps-scope 한정).
   box-sizing/margin 기본값이 되살아나 레이아웃이 틀어지는 것 방지. */
.ps-scope, .ps-scope *, .ps-scope *::before, .ps-scope *::after { box-sizing: border-box; }
.ps-scope img, .ps-scope svg { vertical-align: middle; }
/* 드래그(텍스트 선택) 하이라이트 — 배포본: 라임 배경 + 검정 글자. .ps-scope 한정(관리자 영향 없음) */
.ps-scope ::selection { background: var(--ps-accent); color: var(--ps-ink); }
.ps-scope ::-moz-selection { background: var(--ps-accent); color: var(--ps-ink); }

/* =========================================================================
   공통 프리미티브 (원본 globals.css 의 .ps-* 유틸) — 모든 사용자 페이지 공유.
   (ps-home.css 에서 이곳으로 이동: 공모/아카이브/건축인/이야기 도 사용)
   ========================================================================= */
.ps-scope .ps-eyebrow {
  font-size: var(--ps-fs-eyebrow);
  letter-spacing: var(--ps-tr-eyebrow);
  text-transform: uppercase;
  font-weight: 500;
  color: var(--ps-mute-700);
  margin: 0;
}
.ps-scope .ps-dot {
  display: inline-block;
  width: 0.5rem; height: 0.5rem;
  border-radius: 9999px;
  background: var(--ps-accent);
  vertical-align: middle;
  flex: 0 0 auto;
}
.ps-scope .ps-display {
  font-weight: 900;
  letter-spacing: var(--ps-tr-display);
  line-height: 0.92;
  text-transform: uppercase;
}
/* 페이지/히어로 최상단 제목 (목록·상세 진입 제목) */
.ps-scope .ps-page-title {
  font-size: clamp(2.5rem, 1rem + 4.5vw, 5.5rem);
  font-weight: 900; letter-spacing: -0.03em;
  line-height: 0.88; text-transform: uppercase;
  margin: 0;
}
.ps-scope .ps-section-title {
  font-size: clamp(2rem, 1.45rem + 1.2vw, 3rem);
  font-weight: 900; letter-spacing: -0.02em;
  line-height: 1.05; text-transform: uppercase;
}
.ps-scope .ps-card-title {
  font-size: clamp(1.05rem, 0.95rem + 0.4vw, 1.25rem);
  font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
  margin: 0;
}
/* 스티커 라벨(흑백 인셋 박스, Cooper Hewitt) */
.ps-scope .ps-sticker {
  display: inline-flex; align-items: center;
  padding: 0.25rem 0.5rem;
  font-weight: 800; letter-spacing: 0.06em; line-height: 1.05;
  text-transform: uppercase;
  background: var(--ps-paper); color: var(--ps-ink);
}
.ps-scope .ps-sticker[data-tone="ink"]    { background: var(--ps-ink); color: var(--ps-paper); }
.ps-scope .ps-sticker[data-tone="accent"] { background: var(--ps-accent); color: var(--ps-ink); }
.ps-scope .ps-sticker[data-size="sm"] { font-size: 0.625rem; padding: 0.15rem 0.4rem; }
.ps-scope .ps-sticker[data-size="md"] { font-size: 0.75rem;  padding: 0.25rem 0.55rem; }
.ps-scope .ps-sticker[data-size="lg"] { font-size: 0.875rem; padding: 0.35rem 0.7rem; }

/* 스크롤 접힘 감지 sentinel — 문서 최상단 24px(absolute, 흐름에서 빠져 레이아웃 영향 0).
   뷰포트 상단에 걸쳐 있으면 '맨 위'(안 접힘), 24px 넘게 스크롤돼 사라지면 접힘.
   ⚠️ 반드시 body.ps-scope { position: relative } 와 함께 — 기준점 보장. */
#ps-scroll-sentinel {
  position: absolute; top: 0; left: 0;
  width: 1px; height: 24px; margin: 0; padding: 0;
  pointer-events: none; visibility: hidden;
}

.ps-header {
  position: sticky;
  position: -webkit-sticky;
  top: 0;
  z-index: 40;
  border-bottom: 1px solid var(--ps-band-border);
  transition: box-shadow 240ms ease-out, border-color 240ms ease-out;
}
body[data-scrolled="true"] .ps-header {
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06);
}
@media (prefers-reduced-motion: reduce) {
  .ps-header { transition: none; }
}
[data-theme="hairline"] .ps-header { border-bottom: 1px solid var(--ps-band-border); }
[data-theme="face"] .ps-header { border-bottom: 1px solid var(--ps-mute-100); }

/* row 1+2 컨테이너 */
.ps-header-top { padding: 12px var(--ps-gutter); }
@media (min-width: 768px) { .ps-header-top { padding: 16px var(--ps-gutter); } }

.ps-header-grid {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  column-gap: 24px;
}
@media (min-width: 768px) {
  .ps-header-grid { grid-template-columns: auto 1fr auto; column-gap: 40px; }
}

/* 워드마크 */
.ps-wordmark-wrap { display: flex; align-items: center; padding-top: 4px; }
.ps-wordmark {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  line-height: 0.85;
  font-size: clamp(1.05rem, 1vw + 0.6rem, 1.4rem);
  color: var(--ps-band-fg);
  text-decoration: none;
}

/* 카테고리 nav (데스크톱 4열) — 배포본과 동일: nav.ps-nav > div.ps-nav-col */
.ps-nav { display: none; list-style: none; margin: 0; padding: 0; }
@media (min-width: 768px) {
  .ps-nav {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    column-gap: 24px;
    row-gap: 12px;
  }
}
.ps-nav-col { min-width: 0; list-style: none; }
/* common.css/renewal.css 오염 방어 — 모바일 숨김 / 데스크톱 grid 는 유지(방어규칙이
   display:none 을 특이성으로 덮어 모바일에서 메뉴가 튀어나오던 버그 수정). */
.ps-header .ps-nav { display: none; float: none; }
.ps-header .ps-nav-col { display: block; float: none; }
@media (min-width: 768px) { .ps-header .ps-nav { display: grid; } }
.ps-header .ps-nav-col::before, .ps-header .ps-nav::before { content: none; }
.ps-header .ps-nav-col::marker { content: ""; }
/* 카테고리 대표 링크 (1뎁스) — 컬럼 전체 폭 3px 라인(원본 block + border-b-[3px]).
   글자 밑이 아니라 열 전체에 걸쳐 라인이 그어짐. 라인 색 = 글자색(band-fg). */
.ps-nav-primary {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0;
  font-size: clamp(0.95rem, 0.4vw + 0.85rem, 1.2rem);
  line-height: 1;
  color: var(--ps-band-fg);
  text-decoration: none;
  padding-bottom: 8px;
  border-bottom: 3px solid var(--ps-band-fg);
  transition: color 160ms ease, border-color 160ms ease;
}
.ps-nav-primary:hover { color: var(--ps-band-hover-fg); border-bottom-color: var(--ps-band-hover-fg); }
.ps-nav-primary.is-active { color: var(--ps-band-active-fg); border-bottom-color: var(--ps-band-active-fg); }
/* 현재 페이지 대메뉴 하이라이트 — 밑줄/보더는 유지하고 글자색만 바꾼다.
   [수정 2026-08-07] #6ea800(다크 라임) 하드코딩이었는데, 헤더는 다크 밴드(ps-band-ink)라
   기본 흰 글자(19.8:1)보다 어두워(6.9:1) 강조가 아니라 흐려 보였다.
   밴드 토큰을 쓰면 다크 밴드=라임(17.1:1), 밝은 밴드(hairline)=다크 라임으로 각각 맞는 색이 잡힌다. */
.ps-nav-primary.is-current { color: var(--ps-band-active-fg); border-bottom-color: var(--ps-band-active-fg); }

/* 서브링크 행 (2뎁스) — 스크롤 시 접힘 */
.ps-subrow {
  list-style: none;
  margin: 4px 0 0;
  padding: 8px 0 0;
  overflow: hidden;
  max-height: 8rem;
  opacity: 1;
  transition: max-height 280ms var(--ps-ease),
              opacity 220ms var(--ps-ease),
              margin 280ms var(--ps-ease),
              padding 280ms var(--ps-ease),
              border-color 280ms var(--ps-ease);
}
/* 배포본 space-y-1.5: li '사이'에만 6px — 마지막 li 아래엔 여백 없음.
   모든 li 에 margin-bottom 을 주면 마지막 링크 아래 6px 가 CTA바를 밀어냄. */
.ps-subrow > li + li { margin-top: 6px; }
.ps-subrow a {
  display: block;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.5;   /* 원본 = Tailwind 기본 line-height(고정 leading 없음). 서브링크 세로 간격 정합 */
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ps-band-fg-dim);
  text-decoration: none;
}
.ps-subrow a:hover { color: var(--ps-band-fg); }

/* Cooper Hewitt 식 hover — 한 열에 hover 시 나머지 열 흐리게 */
.ps-nav .ps-nav-col { transition: opacity 200ms var(--ps-ease); }
.ps-nav:hover .ps-nav-col { opacity: 0.4; }
.ps-nav:hover .ps-nav-col:hover { opacity: 1; }

/* 메뉴 개편 [2026-10-22] — 로고 / 빈칸 / 메뉴 3개. 빈칸 열은 자리만 차지한다 */
.ps-header .ps-nav-spacer { visibility: hidden; }
/* 로고 키움 [2026-10-22] — 대메뉴가 같은 굵기의 영문 대문자가 되면서 로고가 메뉴 하나처럼 보였다.
   데스크톱 펼친 헤더에서만 1.6rem 으로(사용자 지정), 위쪽은 대메뉴 제목 줄에 맞춘다(가운데 정렬이면 아래로 처진다).
   스크롤로 접힌 헤더·모바일은 예전 크기 그대로(접힌 헤더가 두꺼워지지 않게). */
@media (min-width: 768px) {
  .ps-header .ps-wordmark-wrap { align-items: flex-start; padding-top: 0; }
  .ps-header .ps-wordmark {
    font-size: 1.6rem;
    transition: font-size 280ms var(--ps-ease);
  }
  body[data-scrolled="true"] .ps-header .ps-wordmark { font-size: clamp(1.05rem, 1vw + 0.6rem, 1.4rem); }
  body[data-scrolled="true"] .ps-header .ps-wordmark-wrap { align-items: center; padding-top: 4px; }
}
/* 대메뉴 영문 ↔ 한글: 열에 마우스를 올리거나 초점이 들어오면 한글명으로 바뀐다(국문 화면만 .ps-nav-ko 가 있다).
   두 글자를 같은 칸에 겹쳐 두고 투명도만 바꿔 줄 높이·밑줄 위치가 흔들리지 않게 한다. */
.ps-nav-primary { position: relative; }
.ps-nav-primary .ps-nav-en,
.ps-nav-primary .ps-nav-ko { transition: opacity 160ms ease; }
.ps-nav-primary .ps-nav-ko { position: absolute; left: 0; top: 0; opacity: 0; white-space: nowrap; }
.ps-nav-col:hover .ps-nav-primary .ps-nav-ko,
.ps-nav-col:focus-within .ps-nav-primary .ps-nav-ko { opacity: 1; }
.ps-nav-col:hover .ps-nav-primary:has(.ps-nav-ko) .ps-nav-en,
.ps-nav-col:focus-within .ps-nav-primary:has(.ps-nav-ko) .ps-nav-en { opacity: 0; }
/* 모바일 시트: 영문 옆에 한글명을 작게 */
.ps-mobile-ko {
  display: block; margin-top: 6px; font-size: 14px; font-weight: 700;
  letter-spacing: 0.02em; text-transform: none; color: var(--ps-band-fg-dim);
}

/* CTA 스트립 (row 3) */
.ps-cta-strip {
  border-top: 1px solid var(--ps-band-border);
  overflow: hidden;
  max-height: 5rem;
  opacity: 1;
  transition: max-height 280ms var(--ps-ease),
              opacity 220ms var(--ps-ease),
              border-color 280ms var(--ps-ease);
}
[data-theme="hairline"] .ps-header .ps-cta-strip { border-top-color: var(--ps-band-border); }
[data-theme="face"] .ps-header .ps-cta-strip { border-top-color: var(--ps-mute-100); }
.ps-cta-inner {
  padding: 8px var(--ps-gutter);
  min-height: 56px;   /* 디자인 실측 56px (기존 46px → 상향) */
  display: flex;
  align-items: center;
  gap: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
@media (min-width: 768px) { .ps-cta-inner { gap: 28px; } }
.ps-cta-inner::-webkit-scrollbar { display: none; }
.ps-cta-link {
  font-size: 14px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--ps-band-cta-fg);
  white-space: nowrap;
  text-decoration: none;
}
.ps-cta-link:hover { color: var(--ps-band-hover-fg); }
.ps-cta-dot {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--ps-band-fg-faint);
  white-space: nowrap;
}
.ps-cta-right { margin-left: auto; display: flex; align-items: center; gap: 16px; }

/* locale 전환 버튼 — 배포본: 12px/800/0.16em, 현재=라임+밑줄, 비활성=dim */
.ps-locale { display: inline-flex; align-items: center; gap: 8px; }
.ps-locale button, .ps-locale a {
  appearance: none; background: none; border: 0;
  font: inherit; font-size: 12px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.2em;  /* 배포본 대비 자간 확대 */
  color: var(--ps-band-fg-dim); cursor: pointer; text-decoration: none;
  padding: 0;
}
.ps-locale button:hover, .ps-locale a:hover { color: var(--ps-band-fg); }
.ps-locale .is-current {
  color: var(--ps-band-cta-fg);
  text-decoration: underline; text-underline-offset: 4px;
}
.ps-locale .ps-locale-sep { color: var(--ps-band-fg-faint); }

/* 검색 버튼 / 유튜브 아이콘 */
.ps-header-icon {
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: 0; cursor: pointer; padding: 2px;
  color: var(--ps-band-fg);
  transition: color 0.2s var(--ps-ease);
}
/* 검색 버튼은 배포본 h-10 w-10(40px 정사각) — 아이콘 좌우 여백이 생겨
   KO/EN·검색·유튜브 사이 간격이 배포본처럼 넓어짐. */
#ps-search-btn.ps-header-icon { width: 40px; height: 40px; padding: 0; }
.ps-header-icon:hover { color: var(--ps-band-cta-fg); }

/* 알림 벨 카운트 뱃지 */
.ps-bell { position: relative; display: inline-flex; }
.ps-bell-count {
  position: absolute; top: -4px; right: -4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ps-accent); color: var(--ps-ink);
  font-size: 10px; font-weight: 800; line-height: 1;
  border-radius: 999px;
}
.ps-bell-count[hidden] { display: none; }

/* 유저 메뉴 (아바타 + 이름 → 드롭다운) */
.ps-usermenu { position: relative; display: inline-flex; align-items: center; }
.ps-usermenu-btn {
  appearance: none; background: none; border: 0; cursor: pointer; padding: 0;
  display: inline-flex; align-items: center; gap: 8px;
}
.ps-avatar {
  flex: none; width: 36px; height: 36px; border-radius: 999px;
  display: grid; place-items: center; overflow: hidden;
  background: var(--ps-band-fg); color: var(--ps-band-bg); /* 다크밴드=페이퍼 원+ink 글자, 라이트밴드=자동 반전 */
  font-size: 14px; font-weight: 900; text-transform: uppercase;
}
.ps-usermenu .ps-username {
  font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ps-band-fg-dim);
  max-width: 12ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ps-usermenu-btn:hover .ps-username { color: var(--ps-band-fg); }
@media (max-width: 1023px) { .ps-usermenu .ps-username { display: none; } }  /* 배포본: lg 이상만 이름 노출 */
.ps-usermenu-btn:focus-visible { outline: 2px solid var(--ps-band-cta-fg); outline-offset: 2px; }

/* 드롭다운 팝오버 — 열 때 body 로 이동 + fixed(좌표 JS). 조상 overflow/sticky 영향 회피 */
.ps-usermenu-pop, .ps-usermenu-pop * { box-sizing: border-box; }
.ps-usermenu-pop {
  position: fixed; top: 0; left: 0; z-index: 1200; width: 224px;
  background: var(--ps-paper); border: 1px solid var(--ps-ink);
  display: flex; flex-direction: column; box-shadow: 0 12px 32px -16px rgba(0,0,0,.35);
}
.ps-usermenu-pop[hidden] { display: none; }
/* 헤더: 로그인 계정 */
.ps-usermenu-head { padding: 12px; border-bottom: 1px solid rgba(10,10,10,.15); }
.ps-usermenu-eyebrow {
  margin: 0; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ps-mute-700);
}
.ps-usermenu-name {
  margin: 4px 0 0; font-size: 14px; font-weight: 800; color: var(--ps-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ps-usermenu-roles { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.ps-usermenu-roletag {
  display: inline-block; padding: 2px 7px; font-size: 10px; font-weight: 800;
  text-transform: uppercase; letter-spacing: 0.06em; color: var(--ps-ink);
  background: var(--ps-accent); white-space: nowrap;
}
.ps-usermenu-roletag.is-plain { background: var(--ps-mute-100); color: var(--ps-mute-700); }
/* 항목: hover 시 반전(ink 배경 + paper 글자) */
.ps-usermenu-item {
  padding: 10px 12px; font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.10em;
  color: var(--ps-ink); text-decoration: none; white-space: nowrap;
  background: none; border: 0; width: 100%; text-align: left; cursor: pointer;
  transition: background-color 140ms ease, color 140ms ease;
}
.ps-usermenu-item + .ps-usermenu-item { border-top: 1px solid rgba(10,10,10,.15); }
.ps-usermenu-item:hover { background: var(--ps-ink); color: var(--ps-paper); }
.ps-usermenu-item:focus-visible { outline: 2px solid var(--ps-focus, #0046c8); outline-offset: -2px; }

/* 모바일 햄버거 (데스크톱 숨김) */
.ps-hamburger { display: inline-flex; justify-self: end; }
@media (min-width: 768px) { .ps-hamburger { display: none; } }
.ps-hamburger button {
  appearance: none; background: none; border: 0; cursor: pointer;
  color: var(--ps-band-fg); padding: 0;
  height: 32px; width: 32px; display: inline-flex; align-items: center; justify-content: center;
}
/* 2줄 햄버거 라인 (배포본: h-3 w-5 안에 top/bottom h-px). is-x 면 X 로. */
.ps-burger-lines { position: relative; display: block; height: 12px; width: 20px; }
.ps-burger-top, .ps-burger-bot {
  position: absolute; left: 0; right: 0; height: 1px; background: currentColor;
  transition: transform 200ms var(--ps-ease), top 200ms var(--ps-ease);
}
.ps-burger-top { top: 0; }
.ps-burger-bot { bottom: 0; }
.ps-burger-lines.is-x .ps-burger-top { top: 50%; transform: rotate(45deg); }
.ps-burger-lines.is-x .ps-burger-bot { bottom: auto; top: 50%; transform: rotate(-45deg); }
.ps-hamburger button:focus-visible { outline: 2px solid var(--ps-paper); outline-offset: 2px; }

/* 스크롤 접힘: body[data-scrolled] 시 서브행·CTA 접기 */
body[data-scrolled="true"] .ps-subrow {
  max-height: 0; opacity: 0;
  margin-top: 0 !important; padding-top: 0 !important;
  border-top-color: transparent !important; pointer-events: none;
}
body[data-scrolled="true"] .ps-cta-strip {
  max-height: 0; opacity: 0;
  border-top-color: transparent !important; pointer-events: none;
}
/* [a11y] 키보드 포커스가 헤더로 들어오면 접힌 줄 다시 펼침 */
body[data-scrolled="true"] .ps-nav:focus-within .ps-subrow {
  max-height: 8rem; opacity: 1;
  margin-top: 4px !important; padding-top: 8px !important; pointer-events: auto;
}
body[data-scrolled="true"] .ps-cta-strip:focus-within {
  max-height: 5rem; opacity: 1;
  border-top-color: var(--ps-band-border) !important; pointer-events: auto;
}
@media (prefers-reduced-motion: reduce) {
  .ps-subrow, .ps-cta-strip { transition: none; }
}

/* =========================================================================
   모바일 메뉴 시트
   ========================================================================= */
/* ── 검색 드롭다운 (배포본: 헤더 아래 흰 시트, 마스크 없음) ── */
.ps-search-sheet {
  display: none;
  position: absolute; left: 0; right: 0; top: 100%; z-index: 40;
  background: var(--ps-paper); color: var(--ps-ink);
  border-bottom: 1px solid var(--ps-ink);
  box-shadow: 0 24px 40px -24px rgba(0,0,0,0.25);
}
.ps-search-sheet.is-open { display: block; animation: psSheetDown 180ms ease-out; }
.ps-search-sheet-inner { padding: 32px var(--ps-gutter); }
@media (min-width: 768px) { .ps-search-sheet-inner { padding: 48px var(--ps-gutter); } }
.ps-search-eyebrow {
  margin: 0; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.18em; color: var(--ps-mute-700);
}
.ps-search-form { margin-top: 12px; display: flex; align-items: stretch; gap: 12px; }
.ps-search-field {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--ps-ink); background: var(--ps-paper);
}
.ps-search-field input{
  padding: 0 8px 0 16px;
}
/* 지우기(X) — 검색어 있을 때만(hidden 해제) 노출, 탭 포커스 가능 */
.ps-search-clear {
  flex: 0 0 auto; width: 36px; height: 36px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: transparent; color: var(--ps-mute-700);
  transition: color 140ms ease;
}
.ps-search-clear[hidden] { display: none; }
.ps-search-clear:hover { color: var(--ps-ink); }
.ps-search-clear:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; color: var(--ps-ink); }
.ps-search-input {
  flex: 1 1 auto; min-width: 0; height: 56px;
  border: 0; background: transparent; outline: none;
  font: inherit; font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em;
  color: var(--ps-ink);
}
@media (min-width: 768px) { .ps-search-input { height: 64px; font-size: 2.25rem; } }
.ps-search-input::placeholder {
  color: var(--ps-mute-500); font-weight: 700; letter-spacing: normal; font-size: 1rem;
}
@media (min-width: 768px) { .ps-search-input::placeholder { font-size: 1.125rem; } }
.ps-search-go {
  flex: 0 0 auto; cursor: pointer; padding: 0 20px;
  background: var(--ps-ink); color: var(--ps-paper); border: 0;
  font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em;
}
@media (min-width: 768px) { .ps-search-go { padding: 0 32px; } }
.ps-search-go:disabled { opacity: 0.4; cursor: default; }
.ps-search-go:not(:disabled):hover { background: var(--ps-accent); color: var(--ps-ink); }
/* 포커스 시엔 배경 유지, 테두리(포커스 링)만 표시 */
.ps-search-go:focus-visible { outline: 2px solid var(--ps-focus); outline-offset: 2px; }
.ps-search-close {
  flex: 0 0 auto; cursor: pointer; width: 48px; height: 56px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--ps-ink); background: var(--ps-paper); color: var(--ps-ink);
  transition: background 140ms ease;
}
@media (min-width: 768px) { .ps-search-close { height: 64px; } }
.ps-search-close:hover, .ps-search-close:focus-visible { background: rgba(10,10,10,0.05); }
@keyframes psSheetDown { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .ps-search-sheet.is-open { animation: none; } }

/* 모바일 메뉴 — 배포본: 전체화면 다크 패널(fixed inset-0), 세로 스크롤 */
.ps-mobile-sheet {
  display: none;
  position: fixed; inset: 0; z-index: 60;
  background: var(--ps-band-bg); color: var(--ps-band-fg);
  overflow-y: auto;
}
.ps-mobile-sheet.is-open { display: block; }
@media (min-width: 768px) { .ps-mobile-sheet { display: none !important; } }
.ps-mobile-inner {
  min-height: 100%;
  padding: 20px var(--ps-gutter) 48px;
  display: flex; flex-direction: column;
}
.ps-mobile-head { display: flex; align-items: center; justify-content: space-between; }
.ps-mobile-wordmark {
  font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em;
  line-height: 0.85; font-size: 1rem; color: var(--ps-band-fg); text-decoration: none;
}
.ps-mobile-close {
  appearance: none; background: none; border: 0; cursor: pointer; padding: 0;
  height: 32px; width: 32px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--ps-band-fg);
}
.ps-mobile-close:focus-visible { outline: 2px solid var(--ps-paper); outline-offset: 2px; }
/* 큰 카테고리 목록 */
.ps-mobile-nav { list-style: none; margin: 48px 0 0; padding: 0; flex: 1 1 auto; }
.ps-mobile-col { list-style: none; }
.ps-mobile-col + .ps-mobile-col { margin-top: 32px; }
.ps-mobile-cat {
  display: block; font-weight: 900; text-transform: uppercase;
  letter-spacing: -0.01em; line-height: 0.95;
  font-size: clamp(2rem, 5vw + 1rem, 3rem);
  color: var(--ps-band-fg); text-decoration: none;
}
/* 모바일 시트도 다크 밴드(ps-band-ink) — PC 대메뉴와 같은 이유로 밴드 토큰 사용 */
.ps-mobile-cat.is-current { color: var(--ps-band-active-fg); }
.ps-mobile-sub { list-style: none; margin: 12px 0 0 4px; padding: 0; }
.ps-mobile-sub li { list-style: none; }
.ps-mobile-sub li + li { margin-top: 6px; }
.ps-mobile-sub a {
  display: block; font-size: 16px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ps-band-fg-dim); text-decoration: none;
}
.ps-mobile-sub a:hover { color: var(--ps-band-fg); }
/* 하단 CTA (가입하기/로그인/검색) */
.ps-mobile-foot {
  margin-top: 40px; padding-top: 24px; border-top: 1px solid var(--ps-band-border);
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px;
}
.ps-mobile-cta {
  font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.16em;
  color: var(--ps-band-cta-fg); text-decoration: none;
}
.ps-mobile-cta:hover { color: var(--ps-band-fg); }

/* =========================================================================
   푸터 (SiteFooter)
   ========================================================================= */
.ps-footer { /* 색은 .ps-band-ink 로 표면 지정 */ }
[data-theme="hairline"] .ps-footer { border-top: 1px solid var(--ps-band-border); }
[data-theme="face"] .ps-footer { border-top: 1px solid var(--ps-mute-100); }
.ps-footer-inner { padding: 56px var(--ps-gutter); }
@media (min-width: 768px) { .ps-footer-inner { padding: 80px var(--ps-gutter); } }

/* [정렬 방어] 프로젝트 공통 CSS(renewal.css 등)가 뒤에 로드되며 div/ul/li 를
   flex·float 로 흐트러뜨리는 것을 막기 위해 .ps-footer 하위로 특이성을 높이고
   display 를 명시 강제한다. (헤드 p 와 링크 ul 이 나란히 붙던 증상 해결) */
.ps-footer .ps-footer-grid {
  display: grid; grid-template-columns: 1fr; gap: 40px; float: none;
}
@media (min-width: 1024px) {
  .ps-footer .ps-footer-grid { grid-template-columns: repeat(5, 1fr); column-gap: 40px; }
}
.ps-footer .ps-footer-spacer { display: none; }
@media (min-width: 1024px) { .ps-footer .ps-footer-spacer { display: block; grid-column: span 2; } }
.ps-footer .ps-footer-cols {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 40px 24px; float: none;
}
@media (min-width: 768px) { .ps-footer .ps-footer-cols { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .ps-footer .ps-footer-cols { grid-column: span 3; } }

/* 컬럼 = 세로 블록(헤드 위, 링크목록 아래). 외부 flex/float 무력화. */
.ps-footer .ps-footer-col {
  display: block; float: none; min-width: 0;
}
.ps-footer .ps-footer-col-head {
  display: block; float: none;
  font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.18em; color: var(--ps-band-fg-dim); margin: 0 0 12px;
}
.ps-footer .ps-footer-col ul {
  display: block; float: none; list-style: none; margin: 0; padding: 0;
}
.ps-footer .ps-footer-col li { display: block; float: none; margin-bottom: 8px; }
.ps-footer-link {
  font-size: 13px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.06em; color: var(--ps-band-fg); text-decoration: none;
}
.ps-footer-link:hover { color: var(--ps-band-hover-fg); }
.ps-footer-addr {
  font-size: 13px; line-height: 1.6; color: var(--ps-band-fg-dim);
  font-style: normal;
}
.ps-footer-phone { font-size: 13px; color: var(--ps-band-fg-dim); font-variant-numeric: tabular-nums; }

.ps-footer .ps-footer-bottom {
  margin-top: 56px; padding-top: 32px;
  border-top: 1px solid var(--ps-band-border);
  display: flex; flex-direction: column; gap: 16px; float: none;
}
@media (min-width: 768px) {
  .ps-footer .ps-footer-bottom { flex-direction: row; align-items: flex-end; justify-content: space-between; }
  /* acebanner(우측 정렬)를 맨위로/큰글씨 버튼(right:1rem + 44px) 폭만큼만 왼쪽으로
     띄워 겹침 방지. THEME pill(맨 아래)은 acebanner 아래라 제외. */
  .ps-footer .ps-footer-marks { margin-right: 4.5rem; }
}
.ps-footer .ps-footer-org p {
  margin: 0 0 8px; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.14em; color: var(--ps-band-fg-faint);
}
/* 하단 인증마크/배너 영역 (WA 마크 + AceCounter 서울시 배너) */
.ps-footer .ps-footer-marks {
  flex-shrink: 0;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap; float: none;
}
.ps-footer .ps-footer-marks .ps-wa-img { width: 100px; height: auto; display: block; }
.ps-footer .ps-footer-marks .ps-acebanner { display: inline-block; }
/* AceCounter 배너는 스크립트가 내부에 <a>/<img>/<iframe> 을 주입 — 그 링크가
   Tab 포커스될 때 포커스 링 표시(키보드 위치 확인). div 자체 + 주입 링크 모두. */
.ps-acebanner a:focus-visible,
.ps-acebanner:focus-visible {
  outline: 2px solid var(--ps-focus); outline-offset: 2px;
}
.ps-band-ink .ps-acebanner a:focus-visible,
.ps-band-ink .ps-acebanner:focus-visible {
  display: flex;
  outline-color: var(--ps-paper); box-shadow: 0 0 0 4px var(--ps-accent);
}
/* 어두운 밴드 위에서 배너/마크가 흰 배경일 수 있어 살짝 여백 프레임 */


/* =========================================================================
   [정렬 방어] 헤더 핵심 레이아웃 — 프로젝트 공통 CSS(common.css/renewal.css)가
   div/ul/li 를 flex·float·inline 으로 흐트러뜨리는 것 방지. .ps-header 특이성
   + display 명시 강제. (푸터와 동일한 방어. 워드마크/카테고리/CTA 정렬 보존)
   ========================================================================= */
.ps-header .ps-header-grid {
  display: grid; grid-template-columns: auto 1fr; align-items: start;
  column-gap: 24px; float: none;
}
@media (min-width: 768px) {
  .ps-header .ps-header-grid { grid-template-columns: auto 1fr auto; column-gap: 40px; }
}
.ps-header .ps-nav { display: none; float: none; }
@media (min-width: 768px) {
  .ps-header .ps-nav {
    display: grid; grid-template-columns: repeat(4, 1fr);
    column-gap: 24px; row-gap: 12px;
  }
}
.ps-header .ps-nav-col { display: block; float: none; min-width: 0; }
.ps-header .ps-subrow { display: block; float: none; list-style: none; }
.ps-header .ps-subrow > li { display: block; float: none; }
.ps-header .ps-cta-inner {
  display: flex; align-items: center; float: none;
}
.ps-header .ps-cta-right { margin-left: auto; display: flex; align-items: center; gap: 16px; float: none; }

/* =========================================================================
   우하단 유틸리티 위젯 (테마 스위처 / 큰 글씨 / 맨 위로) + 커스텀 커서
   원본: ThemeSwitcher / TextSizeToggle / BackToTop / Cursor 컴포넌트 변환.
   스택(위→아래): 맨위로(bottom-28) · 큰글씨(bottom-16) · 테마(bottom-4).
   ========================================================================= */
.ps-util-shadow { box-shadow: 0 8px 24px -12px rgba(0,0,0,0.4); }

/* 공통 사각 버튼 (큰글씨 / 맨위로) */
.ps-util-btn {
  position: fixed; right: 1rem; z-index: 80;
  display: grid; place-items: center;
  height: 44px; width: 44px;
  background: var(--ps-paper); color: var(--ps-ink);
  border: 1px solid var(--ps-ink);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,0.4);
  cursor: pointer; padding: 0;
  transition: background 160ms ease, color 160ms ease, opacity 200ms ease, transform 200ms ease;
}
.ps-util-btn:hover,
.ps-util-btn:focus-visible { background: var(--ps-ink); color: var(--ps-paper); }
.ps-util-btn[aria-pressed="true"] { background: var(--ps-ink); color: var(--ps-paper); }

/* 테마 스위처 pill */
.ps-theme-switch {
  position: fixed; bottom: 1rem; right: 1rem; z-index: 80;
  display: flex; align-items: center; gap: 4px;
  background: var(--ps-paper); border: 1px solid var(--ps-ink);
  box-shadow: 0 8px 24px -12px rgba(0,0,0,0.4);
  padding: 4px;
}
.ps-theme-switch .ps-theme-label {
  font-size: 12px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.16em; color: var(--ps-mute-500); padding: 0 4px 0 8px;
}
.ps-theme-switch button {
  appearance: none; background: none; border: 0; cursor: pointer;
  font: inherit; font-size: 12px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 0.14em; color: var(--ps-mute-700);
  padding: 4px 8px; transition: color 160ms ease, background 160ms ease;
}
.ps-theme-switch button:hover { color: var(--ps-ink); }
.ps-theme-switch button[aria-pressed="true"] { background: var(--ps-ink); color: var(--ps-paper); }

/* 큰 글씨 버튼 "가" */
.ps-textsize-btn { bottom: 4rem; }
.ps-textsize-btn .ps-ga {
  display: flex; align-items: flex-end; gap: 2px; line-height: 1;
}
.ps-textsize-btn .ps-ga .sm { font-size: 11px; font-weight: 700; }
.ps-textsize-btn .ps-ga .lg { font-size: 19px; font-weight: 800; }

/* 맨 위로 버튼 */
.ps-totop-btn { bottom: 7rem; opacity: 0; transform: translateY(8px); pointer-events: none; }
.ps-totop-btn.is-show { opacity: 1; transform: translateY(0); pointer-events: auto; }

/* [큰 글씨 모드] html[data-textsize="lg"] - 20px 미만 글씨를 전부 1.25배
   (12→15, 14→18, 16→20, 예전 배포본 매핑과 같은 비율). */

/* 큰 글씨로 서브메뉴/CTA 항목이 커져 접힘 캡(8rem/5rem)을 넘어 잘리는 것 방지 */
html[data-textsize="lg"] body:not([data-scrolled="true"]) .ps-subrow,
html[data-textsize="lg"] body[data-scrolled="true"] .ps-nav:focus-within .ps-subrow { max-height: 12rem; }
html[data-textsize="lg"] body:not([data-scrolled="true"]) .ps-cta-strip,
html[data-textsize="lg"] body[data-scrolled="true"] .ps-cta-strip:focus-within { max-height: 7rem; }

/* [커스텀 커서] JS 부착 성공 시 html.has-custom-cursor → native 커서 숨김.
   미지원/터치 환경에선 클래스 미부착 → native 커서 유지(안전). */
.has-custom-cursor .ps-scope,
.has-custom-cursor .ps-scope a,
.has-custom-cursor .ps-scope button,
.has-custom-cursor .ps-scope [role="button"],
.has-custom-cursor .ps-scope [data-clickable] {
  cursor: none;
}
/* jquery-confirm 팝업은 .ps-scope 밖(body 직속)이라 위 규칙이 안 닿는다.
   팝업 위에서도 native 커서를 숨겨 초록 점이 다른 화면처럼 자연스럽게 이어지게 한다. */
.has-custom-cursor .jconfirm,
.has-custom-cursor .jconfirm * {
  cursor: none !important;
}
.ps-cursor {
  position: fixed; top: 0; left: 0;
  width: 12px; height: 12px; border-radius: 9999px;
  background: var(--ps-seoul-green);
  pointer-events: none; z-index: 2147483647; opacity: 0;
  transform: translate3d(0,0,0) translate(-50%,-50%);
  transition: width 160ms var(--ps-ease), height 160ms var(--ps-ease),
              background 160ms ease, border-color 160ms ease, opacity 200ms ease;
}
/* 터치/coarse 포인터에서는 커서 숨김 */
@media (hover: none), (pointer: coarse) {
  .ps-cursor { display: none; }
}

/* ── 스크린리더 전용 텍스트 ──
   시각적으로 숨기되 보조기기에는 읽힌다. 상태 안내(live region)·아이콘 버튼 보조 설명 등에 사용.
   display:none / visibility:hidden 은 스크린리더도 건너뛰므로 쓰지 말 것. */
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* 건너뛰기 링크처럼 포커스 시엔 보여야 하는 경우 */
.sr-only-focusable:active, .sr-only-focusable:focus {
  position: static; width: auto; height: auto; margin: 0;
  overflow: visible; clip: auto; white-space: normal;
}


/* ══════════ 인증 마커 .ps-vmark (2026-09-18) ══════════
   이름 옆의 작은 체크 — '회원으로 확인된 사람이고, 이 정보는 본인이 관리한다'는 표시.
   판정 기준은 회원 연결(USR_MST_SEQ) 하나뿐이다. 명부에 이름만 있고 아직 가입하지 않은
   사람에게는 붙지 않는다. 마크업은 /WEB-INF/views/viewmgmt/inc/psVerifiedMark.jsp 가 찍는다.

   ⚠ '본인인증(휴대폰·간편인증)' 과 다른 말이다 — 가입 시 본인확인 여부가 아니다.
   ⚠ 라임(--ps-accent)은 배경 전용이다. 흰 배경에 라임 글자를 두면 안 보여서
     ink 원 위에 라임 체크를 얹는다(북마크 .ps-bmk-icon.is-on 과 같은 규칙).
   ⚠ 여러 화면이 함께 쓴다(심사위원 목록 · 건축인 상세 · 공모전 상세 심사위원 탭).
     그래서 화면별 CSS 가 아니라 전역 토큰에 둔다. */
.ps-vmark {
  display: inline-grid; place-items: center; vertical-align: middle;
  /* 글자 크기를 따라가되 위아래를 묶는다 [2026-09-19].
     ⚠ 1em 으로 두면 건축인 상세의 이름(.ps-apd-nm, 최대 4.5rem)에서 마커가 72px 로 커져
       이름보다 눈에 띈다. 이름 옆 표시는 이름보다 작아야 한다.
     ⚠ 반대로 작은 글자에서 너무 줄면 체크가 안 보이므로 아래도 묶는다. */
  /* [2026-10-06 9/28 회의 "좀 더 눈에 띄게"] 검은 원+라임 체크(15~20px) → 인증 배지 모양(톱니 테두리),
     라임 바탕 + ink 테두리 + ink 체크, 18~28px. 라임은 여전히 '바탕' 으로만 쓴다(테두리가 흰 배경과 가른다).
     ⚠ 마크업은 두 곳 — psVerifiedMark.jsp 와 공모전 상세 심사위원 카드 JS(viewDetailCptt.jsp renderFnJury). 같이 고칠 것. */
  width: clamp(18px, 0.72em, 28px); height: clamp(18px, 0.72em, 28px);
  margin-left: 0.3em;
  color: var(--ps-ink);
  line-height: 0; flex: none;
}
.ps-vmark svg { width: 100%; height: 100%; overflow: visible; }
.ps-vmark .seal { fill: var(--ps-accent); stroke: var(--ps-ink); stroke-width: 1.7; stroke-linejoin: round; }
.ps-vmark .chk  { fill: none; stroke: var(--ps-ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* 기계번역 표시 [2026-10-13] — 영문 화면의 심사평·종합의견서가 자동번역일 때 본문 아래에 붙는다.
   심사 문장은 뜻이 와전될 수 있어 사용자 결정으로 표시. 텍스트 회색은 mute-500 이상(대비 규칙). */
.ps-scope .ps-autotr {
  margin: 6px 0 0;
  font-size: 12px;
  font-style: italic;
  letter-spacing: 0.02em;
  color: var(--ps-mute-500);
}