/* =========================================================
   CL LIGHT — 프로젝트 목록 스킨 (list.10.skin.php)
   구조: 0.RESET/VARS  1.서브 히어로 배너  2.카테고리 탭(필터)
         3.필터 탭  4.프로젝트 월(전체 카드형 리스트)  5.상세페이지
   ========================================================= */

/* ---------- 0. RESET / VARS ---------- */
:root {
  --cl-ink: #161513;
  --cl-muted: #78746b;
  --cl-accent: #bb9857;
  --cl-line: #e9e6de;
  --cl-ease: cubic-bezier(.22, 1, .36, 1);
}

#wrapper { background: #fff; }
#container { background: #fff; }
#sct { position: relative; background: #fff; }
/* body에 overflow-x:hidden을 걸면 스펙상 overflow-y도 자동으로 auto가 되면서 body 자체가
   스크롤/클리핑 컨테이너가 돼버려, 그 안의 position:absolute 드롭다운이 넘치는 부분을
   잘라버린다(People 페이지 sticky 버그와 같은 원인) — html에 걸어서 회피 */
html { overflow-x: hidden; }

/* #container가 1200px 고정폭이라, 우리 섹션들은 뷰포트 전체폭으로 탈출시킴 (헤더와 여백 100% 일치) */
.cl-sub-hero,
.cl-cat-title-plain,
.cl-cat-nav,
.cl-noitem {
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
}

#sct_hhtml { display: none; }
#sct_sortlst:empty { display: none; margin: 0; padding: 0; }
#wrapper_title { display: none; }

/* .sct_admin(목록페이지)만 있고 .sit_admin(상세페이지)엔 규칙이 없어서, 상세페이지에서만
   이 관리자 버튼이 일반 흐름에 그대로 자리를 차지해 타이틀을 밀어내리고 있었음 — 같이 처리 */
.sct_admin,
.sit_admin { position: absolute; top: 14px; right: 5vw; z-index: 20; }
.sct_admin .btn_admin,
.sit_admin .btn_admin {
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border-radius: 50%;
  background: rgba(255, 255, 255, .15); color: #fff;
  transition: background .3s var(--cl-ease), color .3s var(--cl-ease), transform .5s var(--cl-ease);
}
.sct_admin .btn_admin:hover,
.sit_admin .btn_admin:hover { background: rgba(255, 255, 255, .28); color: var(--cl-accent); transform: rotate(45deg); }
.sct_admin .btn_admin i,
.sit_admin .btn_admin i { animation: none !important; font-size: 13px; }

/* ---------- 1. 서브 히어로 배너 ---------- */
.cl-sub-hero {
  position: relative; height: 38vh; min-height: 280px; max-height: 440px;
  background-size: cover; background-position: center;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.cl-sub-hero::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 9, 7, .28) 0%, rgba(10, 9, 7, .12) 45%, rgba(10, 9, 7, .42) 100%);
}
.cl-sub-hero-content {
  position: relative; z-index: 2; color: #fff; padding: 0 5vw;
  font-family: 'Pretendard', -apple-system, sans-serif; text-align: center;
}
.cl-sub-title { font-size: clamp(28px, 3.6vw, 46px); font-weight: 600; letter-spacing: .04em; margin: 0; }

/* 타이포/여백은 전역 .cl-plain-title(theme/cllight/css/cllight.css, 220px/5vw/40px)에서 가져옴 —
   마크업에 cl-cat-title-plain과 같이 붙여씀. 여기 .cl-cat-title-plain은 위 0번 항목의
   풀블리드 레이아웃 처리(position/left/width/transform)만 담당 */
/* 상세페이지(.cl-pj-item)는 이미 104px 여백(네비 클리어런스)을 자체적으로 확보해두므로,
   타이틀 자체엔 나머지만 더해서 다른 페이지(.cl-plain-title 기본 220px)와 합계가 똑같이
   맞도록 함: 104(.cl-pj-item) + 116(여기) = 220px. 아래도 다른 페이지와 동일하게 40px */
.cl-pj-item > .cl-plain-title { padding-top: 116px; padding-bottom: 40px; }

/* ---------- 2. 카테고리 탭 / 브레드크럼 ---------- */
.cl-cat-nav { padding: 104px 5vw 0; font-family: 'Pretendard', -apple-system, sans-serif; }
#sct_sortlst+.cl-cat-nav { padding-top: 220px; }
.cl-cat-title-plain+.cl-cat-nav { padding-top: 0; }

.cl-cat-top {
  display: flex; flex-wrap: wrap; align-items: baseline; justify-content: center; gap: 40px;
  padding-bottom: 20px; border-bottom: 1px solid var(--cl-line);
}
.cl-cat-top a {
  font-size: 14px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
  color: var(--cl-ink); opacity: .4; position: relative;
  padding: 12px 0 28px; margin: -12px 0 -12px;
  transition: opacity .3s var(--cl-ease), color .3s var(--cl-ease);
}
.cl-cat-top a:hover { opacity: .75; }
.cl-cat-top a.active { opacity: 1; color: var(--cl-accent); }
.cl-cat-top a.active::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -9px; height: 2px; background: var(--cl-accent);
}

/* 탭 목록(.cl-cat-top)과 브랜드 드롭다운을 한 줄에 양끝 정렬 — 드롭다운을 .cl-cat-top
   "안"에 넣었더니 .cl-cat-top a(대문자/넓은 자간/음수 마진 탭 스타일)가 드롭다운 메뉴의
   a 태그에도 그대로 적용돼서 글자가 깨져 보였음 — 아예 형제 요소로 분리해서 해결 */
.cl-pj-top-nav-row {
  display: flex;
  /* .cl-cat-top a 는 padding-top:12px + margin-top:-12px 가 상쇄돼서 실제 글자가
     행의 맨 위에서 바로 시작한다. flex-start로 맞추면 셀렉트도 같은 기준선에서 시작 —
     center를 쓰면 탭 박스(아래쪽 여백 포함) 안에서 셀렉트가 처져 보였음 */
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 16px 24px;
  /* 선(구분선)을 .cl-cat-top 안쪽이 아니라 이 행 전체에 걸어서 셀렉트 밑까지 다 이어지게 */
  padding-bottom: 20px;
  border-bottom: 1px solid var(--cl-line);
}
/* .cl-cat-top 자체의 선/여백은 위 행에서 대신하므로 중복 제거 */
.cl-pj-top-nav-row .cl-cat-top {
  border-bottom: none;
  padding-bottom: 0;
}

/* 상세페이지 상단탭 오른쪽의 브랜드/클라이언트 드롭다운 — 목록으로 안 돌아가도 바로 이동 가능.
   네이티브 select는 팝업(까만 테두리 등)을 브라우저가 강제해서 못 꾸미므로, 버튼 + 커스텀
   패널로 직접 구현 — 라운딩된 사각 버튼 + 카드형 드롭다운 */
.cl-pj-brand-picker {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  /* 버튼 자체 padding-top(10px)만큼 탭 글자보다 아래에서 시작하는 걸 보정 */
  margin-top: -8px;
}

.cl-pj-brand-picker-label {
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--cl-muted);
  font-weight: 600;
}

.cl-pj-brand-picker-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Pretendard', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--cl-ink);
  background: #fff;
  border: 1px solid var(--cl-line);
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  transition: border-color .3s var(--cl-ease), box-shadow .3s var(--cl-ease);
}
.cl-pj-brand-picker-btn:hover,
.cl-pj-brand-picker-btn[aria-expanded="true"] {
  border-color: var(--cl-accent);
  box-shadow: 0 8px 20px -14px rgba(20, 18, 14, .25);
}
.cl-pj-brand-picker-btn svg {
  width: 13px; height: 13px; flex: none; color: var(--cl-muted);
  transition: transform .3s var(--cl-ease);
}
.cl-pj-brand-picker-btn[aria-expanded="true"] svg { transform: rotate(180deg); }

/* JS에서 body 바로 아래로 옮기고 이 클래스를 붙여서 화면 좌표(fixed) 기준으로 띄움 —
   top/right는 JS가 버튼 위치 계산해서 인라인으로 넣어줌. 부모의 overflow/transform/
   z-index가 뭘로 얽혀있든 전혀 영향 안 받는다 */
.cl-pj-brand-picker-menu--fixed { position: fixed !important; }

.cl-pj-brand-picker-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  max-height: none;
  background: #fff;
  border: 1px solid var(--cl-line);
  border-radius: 10px;
  box-shadow: 0 24px 50px -22px rgba(20, 18, 14, .22);
  /* overflow:hidden(둥근 모서리용으로 걸었던 것)이 박스 높이가 뭔가에 의해 줄어들 때
     안 넘치는 항목을 그냥 잘라버려서(B&B Italia, Roche Bobois가 안 보였음) 빼고,
     라운딩은 아래에서 첫/마지막 항목에 직접 줌 */
  opacity: 0;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity .25s var(--cl-ease), transform .25s var(--cl-ease);
  z-index: 2147483647;
}
.cl-pj-brand-picker-menu.open {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}
.cl-pj-brand-picker-menu a {
  display: block;
  position: static;
  padding: 12px 18px;
  margin: 0;
  font-family: 'Pretendard', -apple-system, sans-serif;
  font-size: 13px;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
  opacity: 1;
  color: var(--cl-ink);
  text-decoration: none;
  transition: background .2s var(--cl-ease), color .2s var(--cl-ease);
}
.cl-pj-brand-picker-menu a:hover { background: #f8f6f0; color: var(--cl-accent); }
.cl-pj-brand-picker-menu a.active { color: var(--cl-accent); font-weight: 600; background: #f8f6f0; }
.cl-pj-brand-picker-menu a:first-child { border-radius: 9px 9px 0 0; }
.cl-pj-brand-picker-menu a:last-child { border-radius: 0 0 9px 9px; }

@media (max-width: 640px) {
  .cl-pj-brand-picker { margin-left: 0; width: 100%; }
  .cl-pj-brand-picker-btn { flex: 1; justify-content: space-between; }
  .cl-pj-brand-picker-menu { left: 0; right: 0; min-width: 0; }
}

.cl-breadcrumb {
  padding: 18px 0 0; font-size: 13px; letter-spacing: .04em; color: var(--cl-muted);
}
.cl-breadcrumb a { color: var(--cl-muted); transition: color .3s var(--cl-ease); }
.cl-breadcrumb a:hover { color: var(--cl-accent); }
.cl-breadcrumb-sep { margin: 0 8px; opacity: .5; }
.cl-breadcrumb-cur { color: var(--cl-ink); font-weight: 600; }

.cl-noitem { padding: 80px 5vw; text-align: center; color: var(--cl-muted); font-size: 14px; }

/* ---------- 3.5 ALL일 때: Products 메인(/shop/)과 같은 톤의 4열 타일 그리드, 타일 하단에 2단계 분류(브랜드) 링크 ---------- */
.cl-pj-tiles {
  position: relative; left: 50%; width: 100vw; transform: translateX(-50%);
  padding: 48px 5vw 110px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 36px 24px;
  font-family: 'Pretendard', -apple-system, sans-serif;
}
.cl-pj-tile-img {
  position: relative; display: block; aspect-ratio: 3/4; overflow: hidden; border-radius: 2px; background: #f4f2ec;
}
.cl-pj-tile-img1,
.cl-pj-tile-img2 {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .8s var(--cl-ease), opacity .5s var(--cl-ease);
}
.cl-pj-tile-img:hover .cl-pj-tile-img1,
.cl-pj-tile-img:hover .cl-pj-tile-img2 { transform: scale(1.11); }

/* 2번째(오버) 이미지 — 분류관리 여분필드3에 등록돼 있을 때만 존재. 1번째 위에 겹쳐뒀다가
   오버 시 페이드인. 없으면 이 요소 자체가 없어서 그냥 대표사진 그대로 */
.cl-pj-tile-img2 { position: absolute; inset: 0; opacity: 0; }
.cl-pj-tile-img:hover .cl-pj-tile-img2 { opacity: 1; }

/* 호버시 어두운 그라디언트 + 가운데 "+"/타이틀 오버레이 (/shop/ 메인 타일과 동일한 톤) */
.cl-pj-tile-img::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10, 9, 7, 0) 45%, rgba(10, 9, 7, .55) 100%);
  opacity: 0; transition: opacity .4s var(--cl-ease);
}
.cl-pj-tile-img:hover::after { opacity: 1; }

.cl-pj-tile-hover {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 12px; color: #fff;
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s var(--cl-ease), transform .4s var(--cl-ease);
  pointer-events: none;
}
.cl-pj-tile-img:hover .cl-pj-tile-hover { opacity: 1; transform: translateY(0); }

.cl-pj-tile-plus { font-size: 56px; font-weight: 100; line-height: 1; }
.cl-pj-tile-hover-name {
  font-size: 18px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
}

.cl-pj-tile-body { padding-top: 18px; }
.cl-pj-tile-name {
  display: block; color: var(--cl-ink);
  font-size: 15px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600;
  transition: color .3s var(--cl-ease);
}
.cl-pj-tile-name:hover { color: var(--cl-accent); }

.cl-pj-tile-subs {
  margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--cl-line);
  display: grid; grid-template-columns: 1fr;
}
.cl-pj-tile-subs a {
  position: relative; display: block;
  padding: 9px 26px 9px 10px;
  border-bottom: 1px solid rgba(233, 230, 222, .72);
  font-size: 14.5px; line-height: 1.45; letter-spacing: .01em; color: var(--cl-muted);
  transition: color .3s var(--cl-ease), background-color .3s var(--cl-ease), transform .3s var(--cl-ease);
}
.cl-pj-tile-subs a::after {
  content: '\2192'; position: absolute; right: 10px; top: 50%;
  color: var(--cl-accent); opacity: 0; transform: translate(-5px, -50%);
  transition: opacity .3s var(--cl-ease), transform .3s var(--cl-ease);
}
.cl-pj-tile-subs a:hover,
.cl-pj-tile-subs a:focus-visible {
  color: var(--cl-ink); background: rgba(187, 152, 87, .09); transform: translateX(4px);
}
.cl-pj-tile-subs a:hover::after,
.cl-pj-tile-subs a:focus-visible::after { opacity: 1; transform: translate(0, -50%); }

@media (max-width: 1100px) { .cl-pj-tiles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) { .cl-pj-tiles { grid-template-columns: 1fr; gap: 34px; padding: 34px 6vw 80px; } }

/* ---------- 4. 프로젝트(브랜드) 좌측 리스트 + 우측 매스너리 갤러리 ---------- */
.cl-proj-section {
  position: relative; left: 50%; width: 100vw; transform: translateX(-50%);
  padding: 56px 5vw 120px;
  font-family: 'Pretendard', -apple-system, sans-serif;
}

.cl-proj-layout {
  display: grid; grid-template-columns: 400px 1fr; gap: 48px; align-items: start;
}

/* --- 좌측 리스트 --- */
.cl-proj-list { list-style: none; margin: 0; padding: 0; position: sticky; top: 40px; }
.cl-proj-list li { border-bottom: 1px solid var(--cl-line); }
.cl-proj-list li:first-child { border-top: 1px solid var(--cl-line); }

.cl-proj-item {
  position: relative; width: 100%; display: flex; align-items: center; justify-content: flex-start; gap: 10px;
  padding: 17px 12px;
  font-size: 16px; font-weight: 600; letter-spacing: -0.01em;
  color: var(--cl-muted);
  transition: color .3s var(--cl-ease);
}
.cl-proj-item:hover { color: var(--cl-ink); }
.cl-proj-item.active { color: var(--cl-ink); padding-left: 12px; }
.cl-proj-item.active::before {
  content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 18px;
  transform: translateY(-50%);
  background: var(--cl-accent); border-radius: 2px;
}

.cl-proj-item-main { display: flex; align-items: center; gap: 12px; min-width: 0; }
.cl-proj-logo { flex: 0 0 auto; width: 80px; height: 40px; display: flex; align-items: center; justify-content: center; }
.cl-proj-logo img {
  max-width: 100%; max-height: 100%; object-fit: contain; display: block;
  filter: grayscale(1); opacity: .45;
  transition: filter .3s var(--cl-ease), opacity .3s var(--cl-ease);
}
.cl-proj-item:hover .cl-proj-logo img,
.cl-proj-item.active .cl-proj-logo img { filter: grayscale(0); opacity: 1; }

.cl-proj-loc {
  margin-left: auto;
  font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cl-muted); font-weight: 500;
  opacity: 0; transition: opacity .3s var(--cl-ease);
}
.cl-proj-item.active .cl-proj-loc { opacity: 1; }

/* --- 우측 갤러리: 매스너리(칸마다 크기 제각각) 대신, 다 같은 크기로 한 줄에 3개씩 —
   세로가 살짝 긴 3:4 비율 --- */
.cl-proj-gallery {
  display: block;
  min-width: 0;
}

/* 다른 목록 페이지(.cl-product-card)와 완전히 같은 톤: 사진 아래 항상 이름 노출 +
   오버하면 사진 위에 "+"랑 이름이 가운데 같이 뜸 */
.cl-proj-card {
  display: block;
  color: var(--cl-ink);
  opacity: 0; transform: translateY(14px);
  animation: clProjIn .6s var(--cl-ease) forwards;
}
@keyframes clProjIn { to { opacity: 1; transform: translateY(0); } }

.cl-proj-card-img {
  position: relative; overflow: hidden; border-radius: 2px;
  aspect-ratio: 16 / 9;
  background: #f0efe9;
}

.cl-proj-card-img1,
.cl-proj-card-img2 {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .7s var(--cl-ease), opacity .5s var(--cl-ease);
}
.cl-proj-card:hover .cl-proj-card-img1,
.cl-proj-card:hover .cl-proj-card-img2 { transform: scale(1.06); }

/* 2번째 이미지(등록돼 있을 때만 렌더됨)는 첫 이미지 위에 겹쳐뒀다가 오버 시 페이드인 —
   2번째 이미지가 없는 상품은 이 요소 자체가 없어서 그냥 대표이미지 그대로 보임 */
.cl-proj-card-img2 {
  position: absolute; inset: 0;
  opacity: 0;
}
.cl-proj-card:hover .cl-proj-card-img2 { opacity: 1; }

.cl-proj-card-img::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(180deg, rgba(10,9,7,0) 45%, rgba(10,9,7,.55) 100%);
  opacity: 0; transition: opacity .4s var(--cl-ease);
}
.cl-proj-card:hover .cl-proj-card-img::after { opacity: 1; }

.cl-proj-card-hover {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  color: #fff;
  opacity: 0; transform: translateY(10px);
  transition: opacity .4s var(--cl-ease), transform .4s var(--cl-ease);
  pointer-events: none;
}
.cl-proj-card:hover .cl-proj-card-hover { opacity: 1; transform: translateY(0); }

.cl-proj-card-plus { font-size: 56px; font-weight: 100; line-height: 1; }
.cl-proj-card-hover-name { font-size: 15px; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; }

.cl-proj-card-name-row,
.cl-proj-card-cat { display: none; }
.cl-proj-card-name {
  display: block; min-width: 0;
  font-size: 12.5px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--cl-muted);
  transition: color .3s var(--cl-ease);
}
.cl-proj-card:hover .cl-proj-card-name { color: var(--cl-accent); }
.cl-proj-card-cat { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--cl-muted); opacity: .78; margin: 4px 0 0; }

/* 로그인한 회원(=관리자)에게만 보이는 수정 버튼 — 이름 옆에 항상 노출(다른 목록과 동일) */
.cl-proj-card-edit {
  flex: none;
  width: 22px; height: 22px; border: none; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: transparent; color: var(--cl-muted);
  cursor: pointer;
  transition: background-color .25s var(--cl-ease), color .25s var(--cl-ease);
}
.cl-proj-card-edit:hover { background: #f4f2ec; color: var(--cl-accent, #bb9857); }
.cl-proj-card-edit svg { width: 13px; height: 13px; }

@media (max-width: 1100px) {
  .cl-cat-top { gap: 20px; }
  .cl-proj-layout { grid-template-columns: 320px 1fr; gap: 32px; }
}
@media (max-width: 860px) {
  .cl-proj-layout { grid-template-columns: 1fr; }
  .cl-proj-list { position: static; display: flex; flex-wrap: wrap; gap: 0 22px; }
  .cl-proj-list li { border: none; }
  .cl-proj-item { padding: 10px 0; font-size: 14.5px; }
}
@media (max-width: 640px) {
  .cl-proj-card-name-row { margin-top: 14px; }
}

/* =========================================================
   5. 프로젝트 상세페이지 (item.form.skin.php)
   ========================================================= */
#sit_hhtml, #sit_admin_removed { display: none; }

.cl-pj-item {
  position: relative; left: 50%; width: 100vw; transform: translateX(-50%);
  font-family: 'Pretendard', -apple-system, sans-serif;
  color: var(--cl-ink);
  padding-top: 104px;
}

/* 상세페이지 상단 이동탭 — #cl-pj-item이 이미 헤더높이만큼 padding-top을 확보해뒀으니 여기선 추가 여백 없이 */
.cl-pj-top-nav.cl-cat-nav { padding-top: 0; }

.cl-pj-hero {
  display: flex; align-items: flex-start; gap: 60px;
  padding: 40px 5vw 40px;
}

.cl-pj-info {
  flex: 0 0 34%; display: flex; flex-direction: column; justify-content: flex-start;
  padding-top: 40px;
}

.cl-pj-eyebrow {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase; color: var(--cl-accent);
  font-weight: 600; margin: 0 0 14px;
}

.cl-pj-title {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  font-size: clamp(24px, 2.6vw, 34px); font-weight: 500; letter-spacing: -0.5px;
  color: #292722; margin: 0 0 26px; line-height: 1.35;
}

.cl-pj-meta { border-collapse: collapse; margin-bottom: 22px; }
.cl-pj-meta th {
  text-align: left; vertical-align: baseline; padding: 7px 20px 7px 0;
  font-size: 15px; line-height: 1.6; letter-spacing: -0.5px; color: var(--cl-ink); font-weight: 500; white-space: nowrap;
}
.cl-pj-meta td {
  vertical-align: baseline; padding: 7px 0; font-size: 15px; line-height: 1.6;
  letter-spacing: -0.5px; color: var(--cl-muted);
}

.cl-pj-desc {
  font-size: 14px; line-height: 1.8; color: var(--cl-muted); margin: 0 0 30px; max-width: 460px;
}

.cl-pj-back {
  font-size: 13px; letter-spacing: .04em; color: var(--cl-ink); opacity: .6;
  transition: opacity .3s var(--cl-ease); align-self: flex-start;
}
.cl-pj-back:hover { opacity: 1; color: var(--cl-accent); }

/* 우측 슬라이더 — 가로 100%, 세로는 이미지 비율대로 채우되 너무 길어지지 않게 상한만 둠 */
.cl-pj-slider {
  flex: 1 1 auto; position: relative; border-radius: 2px; background: #f4f2ec;
  margin-top: 40px; max-height: 600px; overflow: hidden;
}
.cl-pj-slide-frame { position: relative; width: 100%; line-height: 0; }
.cl-pj-slide-img {
  display: block; width: 100%; height: auto;
  transition: opacity .3s var(--cl-ease);
}

.cl-pj-slide-nav {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
  width: 64px; height: 64px; border: none; border-radius: 50%;
  background: rgba(20,18,15,.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .3s var(--cl-ease), transform .3s var(--cl-ease);
}
.cl-pj-slide-nav:hover { background: rgba(20,18,15,.4); }
.cl-pj-slide-nav svg { width: 28px; height: 28px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.35)); }
.cl-pj-slide-prev { left: 22px; }
.cl-pj-slide-next { right: 22px; }

.cl-pj-slide-dots {
  position: absolute; left: 0; right: 0; bottom: 16px; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 7px;
}
.cl-pj-dot {
  width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.55);
  transition: background .3s var(--cl-ease), transform .3s var(--cl-ease);
}
.cl-pj-dot.active { background: #fff; transform: scale(1.3); }

/* 관련상품을 우측 갤러리(사진)와 같은 시작 X좌표에 맞추기 위해, 히어로와 동일한 flex 비율의 spacer를 둠 */
.cl-pj-related-row {
  position: relative; left: 50%; width: 100vw; transform: translateX(-50%);
  display: flex; gap: 60px; padding: 0 5vw;
}
.cl-pj-related-spacer { flex: 0 0 34%; }
.cl-pj-related {
  flex: 1 1 auto;
  padding: 46px 0 0;
  max-width: 640px;
}
.cl-pj-related-title {
  font-size: 14px; font-weight: 700; letter-spacing: 0; text-transform: none;
  color: var(--cl-ink); margin: 0 0 16px;
}
.cl-pj-related-grid {
  display: flex; flex-wrap: wrap; gap: 20px;
}
.cl-pj-related-card { display: block; color: var(--cl-ink); width: 110px; }
.cl-pj-related-img {
  position: relative; width: 110px; height: 110px; overflow: hidden; border-radius: 2px; background: #f4f2ec;
}
.cl-pj-related-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--cl-ease); }
.cl-pj-related-card:hover .cl-pj-related-img img { transform: scale(1.08); }
.cl-pj-related-name {
  display: block; margin-top: 8px; font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: var(--cl-muted); line-height: 1.4; transition: color .3s var(--cl-ease);
}
.cl-pj-related-card:hover .cl-pj-related-name { color: var(--cl-accent); }

.cl-pj-siblings {
  display: flex; justify-content: space-between; gap: 20px;
  padding: 40px 5vw 100px; font-size: 13px; letter-spacing: .04em;
  border-top: 1px solid var(--cl-line); margin-top: 40px;
}
.cl-pj-siblings a { color: var(--cl-muted); transition: color .3s var(--cl-ease); }
.cl-pj-siblings a:hover { color: var(--cl-accent); }

@media (max-width: 1100px) {
  .cl-pj-hero { gap: 36px; }
  .cl-pj-info { flex: 0 0 40%; }
  .cl-pj-related-row { gap: 36px; }
  .cl-pj-related-spacer { flex: 0 0 40%; }
}

@media (max-width: 780px) {
  .cl-pj-item { padding-top: 84px; }
  /* 모바일에서도 84(.cl-pj-item) + 136(여기) = 220px로 다른 페이지와 합계 동일하게 유지 */
  .cl-pj-item > .cl-plain-title { padding-top: 136px; }
  .cl-pj-hero { flex-direction: column; padding: 0 6vw 30px; gap: 24px; }
  .cl-pj-info { flex: none; padding-top: 0; }
  .cl-pj-slider { margin-top: 0; max-height: none; }
  .cl-pj-related-row { padding: 0 6vw; }
  .cl-pj-related-spacer { display: none; }
}