/* 이식 보정 — Semplice 런타임 JS가 하던 것 중 CSS로 대체 가능한 것만.
   원본과 시각 결과가 같아지도록 하는 최소 보정. 추가할 때마다 사유를 남길 것. */

/* 네비 고정: 라이브 실측 position:fixed (headroom JS가 부여하던 상태).
   translate/transform은 건드리지 않는다 — 등장(translate 인라인)과 headroom 클래스(transform)가 담당 */
smp-nav-section.smp-navbar {
  position: fixed;
  left: 0;
  right: 0;
}

/* masonry: 라이브는 JS 절대배치. 균일 높이 그리드에서는 flex wrap이 동일 좌표를 만든다 */
.masonry {
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
}
/* JS 측정용 사이저가 flex 흐름에서 공간을 차지해 줄바꿈을 깨뜨림 → 제거 */
.masonry > .masonry-item-width {
  display: none !important;
}

/* 페이지 전환 크로스 페이드(@view-transition) — 제거됨 (2026-08-22).
   모바일에서 전환이 간헐 중단(InvalidStateError)되며 스냅샷이 번쩍이는 깜빡임 유발
   (사용자 보고 2건: About 진입, NP→다음 페이지). 원본 사이트도 전환 효과 없음 — 1:1 복귀 */

/* 케이스 종결(최종) — 아카이브 행 하나, 타이포 온리.
   근거: 이 사이트의 내비게이션은 전부 타이포(네비·아카이브·푸터) — 종결부는 내비게이션 영역.
   순서는 Pentagram(선 먼저): 헤어라인 → NEXT PROJECT → 행.
   모든 수치 = 아카이브 실측값(헤드 12/500/LS0.3 · 행 17px 500/#111·400/#7A7A7A · 컬럼 5fr:7fr ·
   간격 16 · 디바이더 #E8E6E1) + 블록 위 120(About 섹션 리듬 토큰) */
.next-project {
  padding-top: 120px;
}
@media (max-width: 991.98px) {
  .next-project {
    padding-top: 96px;
  }
}
.next-project smp-content,
.next-project .is-content {
  width: 100% !important;
}
.next-project .np-label {
  border-top: 1px solid #e8e6e1;
  padding-top: 16px;
}
.next-project .np-label span {
  /* 아카이브 헤드 span 실측 스펙 — 페이지 CSS의 ID 셀렉터 span 규칙 대응 !important */
  font-size: 12px !important;
  font-weight: 500 !important;
  letter-spacing: 0.3px !important;
  color: #7a7a7a !important;
  line-height: 1 !important;
}
.next-project .np-row {
  display: grid;
  /* 아카이브 4컬럼(Project/Discipline/Role/Year) 그대로 — 실측 좌표 312/1112/1592/2072.
     균형 3열(1fr×3)·Role 생략안도 시도했으나 아카이브 완전 정합으로 확정(사용자 판단 2026-08-22) */
  grid-template-columns: 5fr 3fr 3fr 1fr;
  padding-top: 20px; /* 아카이브 헤드→행 실측 간격 */
  font-size: 17px;
  text-decoration: none;
}
.next-project .np-year {
  text-align: right; /* 아카이브 YEAR 실측 = 우측 정렬 */
}
@media (max-width: 749px) {
  /* 아카이브 모바일 실측: 헤드 11px · 행 16px */
  .next-project .np-label span {
    font-size: 11px !important;
  }
  .next-project .np-row {
    font-size: 16px;
  }
}
/* Custom CSS의 본문 링크 규칙(.is-content a span → #111 !important)보다 명시도 우위 확보 —
   아카이브 행은 .is-content 밖이라 안 걸리지만 이 블록은 안이므로 필요 */
body .next-project .np-row .np-title,
body .next-project .is-content a.np-row:visited span.np-title {
  color: #111111 !important;
  font-weight: 500 !important;
}
body .next-project .is-content a.np-row span {
  /* 아카이브 호버는 즉시 스냅(실측 transition 0s) — Custom CSS의
     `.is-content a span { transition: color .2s ease !important }`가 페이드를 강제해
     중간톤이 아카이브와 다른 색으로 인지됨(사용자 지적) → 제거로 정합 */
  transition: none !important;
}
body .next-project .is-content a.np-row:hover span.np-title {
  /* 아카이브 언어: 호버 시 타이틀만 액센트. Custom CSS의 a/a:visited/a:hover span 규칙군
     (최대 명시도 0,3,3)보다 확실히 위 */
  color: #f05a28 !important;
}
@media (hover: none) {
  body .next-project .is-content a.np-row:active span.np-title {
    color: #f05a28 !important;
  }
}
body .next-project .np-row .np-cat,
body .next-project .np-row:hover .np-cat,
body .next-project .np-row:focus .np-cat,
body .next-project .is-content a.np-row:visited span.np-cat {
  /* 아카이브 보조 컬럼 실측. :hover/:focus/:visited 셀렉터 병기 — Custom CSS의
     `.is-content a:hover span → #F05A28` · `a:visited span → #111`(전부 !important)이
     행을 오렌지/검정으로 칠하는 것 차단(아카이브 언어 = 평상시 회색, 호버 시 타이틀만 액센트).
     주의: :visited는 페인팅에만 적용되고 getComputedStyle은 미방문 값을 돌려줘 측정으로 안 잡힘 */
  color: #7a7a7a !important;
  font-weight: 400 !important;
}
@media (max-width: 749px) {
  /* 아카이브 모바일 실측: 타이틀 + 연도(우측)만 표시, Discipline/Role 숨김 */
  .next-project .np-row {
    grid-template-columns: 1fr auto;
  }
  .next-project .np-cat:not(.np-year) {
    display: none;
  }
}

/* 네비 가독성 (개선 v3 2026-08-22): 원본은 배경이 상단 페이드 그라데이션뿐이라
   스크롤 중간에 핀 되면 하단부 링크(회색 #8A8A8A)가 어두운 콘텐츠에 묻힘.
   보강은 솔리드가 아닌 그라데이션 + 살짝 투명(사용자 지정, Pentagram 작업 페이지 실측
   rgba(255,255,255,.97)): 텍스트 구간 α.97, 페이드는 하단 패딩 토큰 구간(40/36/28)에서만.
   투명도가 실제로 비치려면 원본 그라데이션과 겹치면 안 되므로 요소 배경을 비우고
   원본을 ::before로 이관 → ::before(원본)/::after(보강)를 opacity 크로스페이드.
   전환은 headroom 토큰(.2s ease-out) */
.nav_n5x0wqmvi #navbar-top,
.nav_vjcwsjwku #navbar-top {
  background-image: none;
}
#navbar-top::before,
#navbar-top::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1; /* 링크 아래 */
  pointer-events: none;
  transition: opacity 0.2s ease-out;
}
#navbar-top::after {
  opacity: 0;
}
#navbar-top.headroom--not-top::before {
  opacity: 0;
}
#navbar-top.headroom--not-top::after {
  opacity: 1;
}
/* ::before = 원본 그라데이션 그대로 (페이지 최상단 상태) */
.nav_n5x0wqmvi #navbar-top::before {
  background-image: linear-gradient(0deg, rgba(252, 252, 250, 0) 0%, #fcfcfa 100%);
}
.nav_vjcwsjwku #navbar-top::before {
  background-image: linear-gradient(0deg, rgba(17, 17, 17, 0) 0%, #111111 100%);
}
/* ::after = 스크롤 보강 — 플랫 α.97 바 (v4: 하단 페이드 제거, Pentagram 실측 그대로.
   소프트 페이드는 사이트의 크리스프 엣지 언어에 이질적이고, 넓히면 묻힘이 재발) */
.nav_n5x0wqmvi #navbar-top::after {
  background-color: rgba(252, 252, 250, 0.97);
}
.nav_vjcwsjwku #navbar-top::after {
  background-color: rgba(17, 17, 17, 0.97);
}

/* 404 (테마 기본 템플릿 .smp-template .no-content — 404 페이지에만 존재) —
   테마 기본값(#000 타이틀 32/400 · #888 본문 · 밑줄 링크)이 시스템 밖이라 토큰으로 교체:
   타이틀 = 프로젝트 H1 토큰(2.889rem/600/LS-.006rem, md 2rem, xs 1.667rem — 실측),
   본문 = 본문 토큰(1rem/400/#3A3A3A/lh1.778), 타이틀→본문 간격 = 그리드 갭 토큰 1.333rem,
   링크 = 본문 링크 언어(#111 · 밑줄 없음 · 호버 #F05A28 즉시 스냅) */
body.error404 .content-container,
body.error404 #content-notfound {
  /* 지면색 토큰(전 페이지 transition-wrap과 동일) — 테마 기본 #EEE(ID 셀렉터) 교체 */
  background-color: #fcfcfa;
}
body.error404 .smp-template {
  background-color: transparent; /* 기본 #EEE 박스 + #999 보더 제거 */
  border: 0;
}
.smp-template .no-content .title {
  font-size: 2.889rem;
  line-height: 3.444rem;
  font-weight: 600;
  letter-spacing: -0.006rem;
  color: #111111;
}
.smp-template .no-content .text {
  margin-top: 1.333rem;
  font-size: 1rem;
  line-height: 1.778;
  font-weight: 400;
  color: #3a3a3a;
}
.smp-template .no-content .text a {
  color: #111111;
  text-decoration: none;
  border-bottom: 0; /* 테마 기본 2px #999 밑줄 보더 제거 — 본문 링크 언어는 밑줄 없음 */
}
.smp-template .no-content .text a:hover {
  color: #f05a28;
}
@media (max-width: 991.98px) {
  .smp-template .no-content .title {
    font-size: 2rem;
    line-height: 2.444rem;
  }
}
@media (max-width: 543.98px) {
  .smp-template .no-content .title {
    font-size: 1.667rem;
    line-height: 2.111rem;
  }
}

/* 오버레이 메뉴 타이포 (개선 2026-08-22) — 원본 32px/gap8은 토큰 밖:
   크기 = 모바일 H1 토큰 1.667rem(30px) — 메뉴가 페이지 타이틀 위계를 넘지 않는 상한.
   간격 = 그리드 갭 토큰 1.333rem(24px) — 8px 클러스터 대신 풀스크린 호흡.
   색은 네비 토큰 유지(#8A8A8A/#111), 터치 피드백 = NP 모바일과 동일한 :active 액센트.
   페이지 CSS가 ID 셀렉터라 !important 필요 */
#navbar-overlay nav > ul {
  gap: 1.333rem !important;
}
#navbar-overlay nav > ul > li > a span {
  font-size: 1.667rem !important;
}
@media (hover: none) {
  /* 터치: 탭 순간 액센트 스냅 — 언더라인은 손가락에 가려 무의미, NP 모바일과 동일 언어 */
  #navbar-overlay nav > ul > li > a:active span {
    color: #f05a28 !important;
  }
}
@media (hover: hover) {
  /* 마우스가 있는 좁은 창: 데스크탑 네비 호버와 완전 동일 —
     #111 전환 + 1px #F05A28 언더라인 scaleX 0→1 (origin right→left, .25s ease-out 원본 스펙) */
  #navbar-overlay nav > ul > li > a span::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    /* 2px × scaleY(.5) = 렌더 1px — DPR 1.5 등 소수 배율에서 1px이 문맥(폰트 크기·박스
       위치)에 따라 1 또는 2 물리픽셀로 반올림돼 데스크탑과 굵기가 달라 보이던 것(사용자 지적)을
       래스터 단계에서 고정. 데스크탑 네비에도 동일 적용해 두 곳이 항상 같은 굵기 */
    height: 2px;
    background: #f05a28;
    transform: scaleX(0) scaleY(0.5);
    transform-origin: bottom right;
    transition: transform 0.25s ease-out;
  }
  #navbar-overlay nav > ul > li > a:hover span {
    color: #111111 !important;
  }
  /* About(다크 네비): 호버 #111은 #111 배경에 묻힘 → 원본 다크 호버 토큰 #FCFCFA
     (About 데스크탑 네비 a:hover span 실측과 동일) */
  .nav_vjcwsjwku #navbar-overlay nav > ul > li > a:hover span {
    color: #fcfcfa !important;
  }
  #navbar-overlay nav > ul > li > a:hover span::after {
    transform: scaleX(1) scaleY(0.5);
    transform-origin: bottom left;
  }
  /* 데스크탑 네비 언더라인도 같은 래스터 규칙으로 통일 (원본 1px 시각 결과 유지) */
  #navbar-top nav > ul > li > a span::after {
    height: 2px !important;
    transform: scaleX(0) scaleY(0.5);
  }
  #navbar-top nav > ul > li > a span:hover::after,
  #navbar-top nav > ul > li > a:hover span::after {
    transform: scaleX(1) scaleY(0.5);
  }
}

/* 햄버거 아이콘 X 전환 (원본 semplice-base 규칙 재선언) — 페이지 CSS가
   .menu-icon span::before/after(±6px 3바)를 뒤 순서로 재선언해 close-menu 상태의
   X 회전을 덮는 캐스케이드 문제 → 최후순위인 이 파일에서 복원 */
.hamburger a.close-menu span {
  visibility: hidden;
}
.hamburger a.close-menu span::before {
  transform: rotate(45deg);
  visibility: visible;
}
.hamburger a.close-menu span::after {
  transform: rotate(-45deg);
  visibility: visible;
}

/* 푸터·소셜 링크 터치 하이라이트 (2026-08-22, 사용자 보고: 모바일에서 간헐 동작) —
   원본 Custom CSS가 라이트 페이지 인스타그램 :active를 #3A3A3A로 강제하고
   mailto/linkedin은 터치 규칙이 없어, hover 에뮬레이션이 잔류할 때만 오렌지가 보이던 것.
   터치 홀드(:active) 동안 항상 액센트 — NP 모바일·오버레이와 동일 언어.
   html 프리픽스 = 원본 :active #3A3A3A(동일 명시도, 뒤 순서 승) 및 :visited span 규칙(0,3,3) 대응 */
@media (hover: none) {
  html body:not(.page-id-9) a[href^='mailto:']:active,
  html body:not(.page-id-9) a[href^='mailto:']:active *,
  html body:not(.page-id-9) a[href*='instagram.com']:active,
  html body:not(.page-id-9) a[href*='instagram.com']:active *,
  html body:not(.page-id-9) a[href*='linkedin.com']:active,
  html body:not(.page-id-9) a[href*='linkedin.com']:active *,
  html body.page-id-9 a[href^='mailto:']:active,
  html body.page-id-9 a[href^='mailto:']:active span,
  html body.page-id-9 a[href*='instagram.com']:active,
  html body.page-id-9 a[href*='instagram.com']:active span,
  html body.page-id-9 a[href*='linkedin.com']:active,
  html body.page-id-9 a[href*='linkedin.com']:active span {
    color: #f05a28 !important;
    text-decoration: none !important;
  }
}

/* 탭 하이라이트 (.tap-hi — Ported.astro 터치 리스너가 부여) — CSS :active의 모바일
   미발화 문제를 우회하는 결정적 경로. 소셜/메일 링크는 전체, NP 행은 타이틀만(아카이브 언어),
   오버레이 메뉴는 항목 색. 명시도는 :visited #111 홀드류(!important)보다 높게 */
html body a.tap-hi[href]:not(.np-row),
html body a.tap-hi[href]:not(.np-row) span,
html body a.tap-hi[href]:not(.np-row) * {
  color: #f05a28 !important;
  transition: none !important; /* 터치 피드백은 즉시 스냅 — Custom CSS의 .2s 컬러 전환 차단 */
}
html body .next-project .is-content a.np-row.tap-hi span.np-title {
  color: #f05a28 !important;
}
html body .next-project .is-content a.np-row.tap-hi span.np-cat {
  color: #7a7a7a !important; /* 보조 컬럼은 탭 중에도 회색 유지 */
}

/* 자동재생 영상의 플레이 아이콘 오버레이 제거 — 라이브에서는 Semplice JS가 재생 시작 후 숨기던 것.
   현 사이트의 영상 48개 전부 hide-controls+smp-autoplay 조합 */
.smp-video.smp-autoplay.hide-controls:after {
  display: none !important;
}