/* designwith 포트폴리오 스킨 (cosmos 클론 이식) — 테마 독립 변수(--dw-*) */
:root {
  --dw-text: #101010;
  --dw-muted: #969696;
  --dw-fill: #f5f5f5;
  --dw-fill-hover: #ededed;
  --dw-radius-card: 4px;
  --dw-radius-pill: 32px;
  --dw-radius-panel: 20px;
  --dw-shadow-panel: 0 12px 40px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.05);
  --dw-side: 20px;
  --dw-ease-out: cubic-bezier(.22,.61,.36,1);
}
/* ============ 포트폴리오 필터 ============ */
.portfolio-filters {
  position: relative; z-index: 101;   /* 헤더 그라데이션 위 */
  display: grid; gap: 10px;
  padding: 28px var(--dw-side) 0;
}
.portfolio-filter-row { display: flex; align-items: center; min-width: 0; }
.portfolio-filter-row > strong {
  width: 52px; flex: none; color: #777; font-size: 12px; font-weight: 650;
}
.portfolio-filter-options {
  display: flex; align-items: center; gap: 4px; min-width: 0;
  overflow-x: auto; scrollbar-width: none;
}
.portfolio-filter-options::-webkit-scrollbar { display: none; }
.chip {
  flex: none; font-size: 15px; font-weight: 500; padding: 9px 15px;
  border-radius: var(--dw-radius-pill); color: var(--dw-muted);
  transition: color .15s, background .15s;
  cursor: pointer;
}
.chip:hover { color: var(--dw-text); }
.chip.on {
  background: #fff; color: var(--dw-text);
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25);
}
.portfolio-color-options { gap: 9px; padding: 3px 0; }
.portfolio-color-chip {
  position: relative; width: 34px; height: 34px; flex: none; padding: 0;
  border: 3px solid #fff; border-radius: 50%; background: var(--chip-color);
  box-shadow: 0 0 0 1px rgba(0,0,0,.13);
  transition: transform .2s var(--dw-ease-out), box-shadow .2s var(--dw-ease-out);
}
.portfolio-color-chip:hover { transform: translateY(-2px); }
.portfolio-color-chip.on { box-shadow: 0 0 0 2px #111; transform: translateY(-2px); }
.portfolio-color-chip span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (max-width: 720px) {
  .portfolio-filters { gap: 8px; padding-top: 20px; }
  .portfolio-filter-row { align-items: flex-start; }
  .portfolio-filter-row > strong { width: 42px; padding-top: 10px; }
  .portfolio-filter-options { padding-bottom: 3px; }
  .portfolio-color-options { padding-top: 3px; }
  .portfolio-color-chip { width: 31px; height: 31px; }
}

/* ============ 마소너리 ============ */
.portfolio-search-status {
  margin: 22px var(--dw-side) -18px;
  color: var(--dw-muted);
  font-size: 11px;
  font-weight: 500;
  line-height: 1.4;
}
.portfolio-search-status strong { color: var(--dw-text); font-weight: 600; }
/* 컬러 검색 결과 문구 앞 색상 스와치 */
.portfolio-search-status .pss-sw {
  display: inline-block;
  width: 12px; height: 12px;
  margin-right: 7px;
  border-radius: 3px;
  border: 1px solid rgba(0, 0, 0, .12);
  vertical-align: -1px;
}
.masonry-wrap { padding: 40px var(--dw-side) 60px; }
.masonry { position: relative; }
.m-item {
  position: absolute; top: 0; left: 0;
  border-radius: var(--radius-card, var(--dw-radius-card)); overflow: hidden;
  opacity: 0; transform: translateY(14px);
  transition: opacity .5s var(--dw-ease-out), transform .5s var(--dw-ease-out);
  cursor: pointer;
}
.m-item.shown { opacity: 1; transform: translateY(0); }
.m-item img {
  width: 100%; height: auto; display: block;
  transition: transform .35s var(--dw-ease-out);
  background: var(--dw-fill);
}
.m-item:hover img { transform: scale(1.025); }
.m-item .m-cap {
  position: absolute; inset: auto 0 0 0;
  padding: 40px 16px 14px;
  background: linear-gradient(transparent, rgba(0,0,0,.5));
  color: #fff; font-size: 16px; font-weight: 600; line-height: 1.4;
  opacity: 0; transition: opacity .25s var(--dw-ease-out);
  pointer-events: none;
}
.m-item:hover .m-cap { opacity: 1; }
.m-favorite {
  position: absolute; z-index: 3; top: 14px; right: 14px; display: grid; width: 30px; height: 30px;
  place-items: center; border: 0; background: transparent; color: #fff; opacity: 0; cursor: pointer;
  transform: translateY(-4px); filter: drop-shadow(0 1px 5px rgba(0,0,0,.28));
  transition: opacity .22s var(--dw-ease-out), transform .22s var(--dw-ease-out);
}
.m-favorite svg { display: block; width: 28px; height: 24px; overflow: visible; fill: transparent; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.m-item:hover .m-favorite, .m-favorite:focus-visible, .m-favorite.is-active { opacity: 1; transform: translateY(0); }
.m-favorite:hover { opacity: .7; }
.m-favorite.is-active svg { fill: currentColor; }
.m-cap em {
  display: inline-flex; align-items: center; gap: 3px;
  font-style: normal; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,.78);
  margin-bottom: 5px; letter-spacing: .04em;
  pointer-events: auto; cursor: pointer;
  text-underline-offset: 3px; text-decoration-thickness: 1px;
  transition: color .2s var(--dw-ease-out);
}
.m-cap em::after { content: "→"; font-size: 12px; opacity: 0; margin-left: -3px; transition: opacity .2s, margin-left .2s, translate .2s; }
.m-cap em:hover { color: #fff; text-decoration: underline; }
.m-cap em:hover::after { opacity: 1; margin-left: 2px; }
.m-cap { display: flex; flex-direction: column; align-items: flex-start; }

/* ============ 우클릭 컨텍스트 메뉴 (cosmos 스타일) ============ */
.ctx-menu {
  position: fixed; z-index: 300;
  min-width: 264px;
  background: #fff;
  border-radius: 18px;
  box-shadow: var(--dw-shadow-panel);
  padding: 10px;
  opacity: 0; transform: scale(.97); transform-origin: top left;
  transition: opacity .16s var(--dw-ease-out), transform .16s var(--dw-ease-out);
}
.ctx-menu.open { opacity: 1; transform: scale(1); }
.ctx-item {
  display: flex; align-items: center; justify-content: space-between; gap: 28px;
  width: 100%; padding: 12px 16px;
  font-size: 15px; color: var(--dw-text); text-align: left;
  border-radius: 12px;
  transition: background .12s;
}
.ctx-item:hover { background: var(--dw-fill); }
.ctx-item svg { width: 18px; height: 18px; color: var(--dw-text); flex: none; }
.ctx-sep { height: 1px; background: rgba(0,0,0,.08); margin: 6px 8px; }
.ctx-item.primary { font-weight: 700; }

/* 토스트 */
.dw-toast {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(.96);
  background: rgba(16,16,16,.92); color: #fff;
  font-size: 15px; font-weight: 500; padding: 16px 28px;
  border-radius: var(--dw-radius-pill);
  box-shadow: 0 10px 34px rgba(0,0,0,.28);
  opacity: 0; transition: opacity .22s var(--dw-ease-out), transform .22s var(--dw-ease-out);
  z-index: 600; pointer-events: none;
}
.dw-toast.show { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.m-sentinel { height: 1px; }

/* 섹션 타이틀 (cosmos '엘리먼트 탐색' 스타일) */
.section-title { font-size: 20px; font-weight: 700; padding: 22px var(--dw-side) 18px; }

/* ============ 포트폴리오 상세 (cosmos /e/ 레이아웃) ============ */
.work-wrap {
  display: flex; align-items: flex-start; gap: 44px;
  padding: 36px var(--dw-side) 90px;
}
.work-rail {
  position: sticky; top: 96px;
  width: 64px; flex: none;
  display: flex; flex-direction: column; gap: 18px;
}
.w-back {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--dw-text);
  background: var(--dw-fill);
  transition: background .2s var(--dw-ease-out), transform .2s var(--dw-ease-out);
  cursor: pointer;
}
.w-back:hover { background: var(--dw-fill-hover); transform: translateX(-2px); }
.w-back svg { width: 20px; height: 20px; }
.w-thumbs { display: flex; flex-direction: column; gap: 10px; }
.w-thumb {
  width: 56px; height: 56px; position: relative;
  border-radius: var(--radius-card, var(--dw-radius-card)); overflow: hidden;
  opacity: .55; cursor: pointer;
  transition: opacity .2s var(--dw-ease-out), box-shadow .2s var(--dw-ease-out);
}
.w-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.w-thumb:hover { opacity: .85; }
.w-thumb.on { opacity: 1; box-shadow: inset 0 0 0 1.5px var(--dw-text); }
.w-thumb.on img { mix-blend-mode: multiply; }
.w-thumb-video {
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%; background: #1a1a1a; color: #fff;
}
.w-thumb-video svg { width: 20px; height: 20px; }

.work-center {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  gap: 30px;
}
.w-media { width: min(550px, 100%); cursor: zoom-in; }
.w-media img, .w-media video { width: 100%; height: auto; display: block; border-radius: var(--radius-card, var(--dw-radius-card)); background: var(--dw-fill); min-height: 120px; }
.w-media video, .w-yt { cursor: default; }
.w-yt { display: block; position: relative; width: 100%; aspect-ratio: 16/9; border-radius: var(--radius-card, var(--dw-radius-card)); overflow: hidden; }
.w-yt iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.work-side {
  position: sticky; top: 96px;
  width: clamp(350px, 35vw, 600px); flex: none;
  max-height: calc(100vh - 96px - 24px);
  overflow-y: auto;
  overscroll-behavior: auto;          /* 끝까지 스크롤되면 페이지로 전파 */
  scrollbar-width: none;              /* Firefox */
  -ms-overflow-style: none;           /* IE/Edge */
  padding-bottom: 8px;
}
.work-side::-webkit-scrollbar { width: 0; height: 0; display: none; }
.w-actions {
  display: flex; justify-content: flex-start; gap: 10px;
  margin-bottom: 30px; padding-bottom: 4px;
  position: relative; z-index: 5;
}
.w-act {
  position: relative;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: var(--dw-text);
  background: var(--dw-fill);
  transition: background .2s var(--dw-ease-out), transform .2s var(--dw-ease-out);
  cursor: pointer;
}
.w-act:hover { background: var(--dw-fill-hover); transform: translateY(-2px); }
.w-act svg { width: 19px; height: 19px; }
.w-act::after {
  content: attr(data-tip);
  position: absolute; top: calc(100% + 8px); left: 0;
  translate: 0 0;
  background: var(--dw-text); color: #fff;
  font-size: 12px; font-weight: 500; white-space: nowrap;
  padding: 6px 10px; border-radius: 8px;
  opacity: 0; visibility: hidden;
  transition: opacity .18s var(--dw-ease-out);
  pointer-events: none; z-index: 10;
}
.w-act:hover::after { opacity: 1; visibility: visible; }

.w-info .w-subtitle { font-size: 15px; font-weight: 600; color: #333; letter-spacing: .03em; margin-bottom: 14px; }
.w-info .w-title { font-size: 30px; font-weight: 700; line-height: 1.35; margin-bottom: 24px; }
.w-info .w-desc { font-size: 16px; line-height: 1.85; color: #4a4a4a; margin-bottom: 28px; }
.w-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 40px; }
.w-tag {
  font-size: 14px; font-weight: 500; color: #5a5a5a;
  background: var(--dw-fill); border-radius: var(--dw-radius-pill);
  padding: 6px 12px;
  transition: background .2s, color .2s;
}
.w-tag:hover { background: var(--dw-fill-hover); color: var(--dw-text); }
.w-meta { display: flex; flex-direction: column; gap: 24px; }
.w-meta-row { font-size: 16px; }
.w-meta-row dt { font-size: 14px; color: var(--dw-muted); letter-spacing: .05em; margin-bottom: 6px; }
.w-meta-row dd { color: var(--dw-text); line-height: 1.65; font-weight: 500; }

.w-industry { margin-top: 44px; }
.w-industry-label { font-size: 14px; color: var(--dw-muted); letter-spacing: .05em; margin-bottom: 10px; }
.w-industry-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.w-ind-btn {
  display: inline-flex; align-items: center;
  font-size: 13.5px; font-weight: 600; color: var(--dw-text);
  border: 1px solid var(--dw-text); border-radius: var(--dw-radius-pill);
  padding: 9px 18px;
  transition: background .25s var(--dw-ease-out), color .25s var(--dw-ease-out), transform .25s var(--dw-ease-out);
}
.w-ind-btn:hover { background: var(--dw-text); color: #fff; transform: translateY(-1px); }

/* 하단 고정 문의 CTA */
.w-fab {
  position: fixed; left: 50%; bottom: 28px; z-index: 1000;  /* 신뢰 배지·푸터·퀵 메뉴보다 최상위 */
  width: min(360px, calc(100% - 40px));
  display: inline-flex; align-items: center; justify-content: space-between; gap: 14px;
  background: var(--dw-text); color: #fff;
  border-radius: var(--dw-radius-pill);
  padding: 12px 10px 12px 22px;
  box-shadow: 0 8px 28px rgba(0,0,0,.25);
  white-space: nowrap;
  opacity: 0; pointer-events: none;
  translate: -50% 20px;
  transition: opacity .4s var(--dw-ease-out), translate .4s var(--dw-ease-out),
              box-shadow .25s var(--dw-ease-out);
}
.w-fab.show { opacity: 1; pointer-events: auto; translate: -50% 0; }
.w-fab:hover { box-shadow: 0 12px 34px rgba(0,0,0,.3); }
.w-fab span { font-size: 13.5px; color: rgba(255,255,255,.75); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 1; }
.w-fab em {
  font-style: normal; font-size: 14px; font-weight: 700;
  background: #fff; color: #111;
  border-radius: var(--dw-radius-pill);
  padding: 8px 16px; flex: none;
  transition: background .2s;
}
.w-fab:hover em { background: #eaeaea; }

/* 동일 카테고리 모아보기 */
.work-related { padding-bottom: 140px; position: relative; z-index: 1; }
.w-rel-grid {
  columns: 4 240px; column-gap: 20px;
  padding: 0 var(--dw-side);
}
.w-rel-item {
  position: relative; display: block;
  break-inside: avoid; margin-bottom: 20px;
  border-radius: var(--radius-card, var(--dw-radius-card)); overflow: hidden;
}
.w-rel-item img { width: 100%; height: auto; display: block; background: var(--dw-fill); transition: transform .35s var(--dw-ease-out); }
.w-rel-item:hover img { transform: scale(1.025); }
.w-rel-item .m-cap { position: absolute; }
.w-rel-item:hover .m-cap { opacity: 1; }

/* ============ 라이트박스 ============ */
.lb {
  position: fixed; inset: 0; z-index: 1200;  /* 하단 고정 문의 CTA(z-index:1000)보다 위 */
  background: rgba(10,10,10,.92);
  opacity: 0;
  transition: opacity .25s var(--dw-ease-out);
}
.lb.open { opacity: 1; }
.lb-stage {
  position: absolute; inset: 48px 96px 132px;
  display: flex; align-items: center; justify-content: center;
}
.lb-frame { max-width: 100%; max-height: 100%; display: flex; flex-direction: column; }
.lb-media { min-height: 0; display: flex; justify-content: center; opacity: 0; translate: 0 8px; transition: opacity .3s var(--dw-ease-out), translate .3s var(--dw-ease-out); }
.lb-media.in { opacity: 1; translate: 0 0; }
.lb-media img, .lb-media video {
  max-width: 100%; max-height: calc(100vh - 48px - 132px - 44px);
  width: auto; height: auto; object-fit: contain;
  border-radius: var(--radius-card, var(--dw-radius-card));
}
.lb-yt { display: block; width: min(1100px, calc(100vw - 240px)); aspect-ratio: 16/9; }
.lb-yt iframe { width: 100%; height: 100%; border: 0; }
.lb-cap {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding-top: 14px;
  color: #fff; font-size: 14px;
}
.lb-cap .lb-title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-cap .lb-idx { color: rgba(255,255,255,.55); font-variant-numeric: tabular-nums; flex: none; }
.lb-close {
  position: fixed; top: 24px; right: 24px; z-index: 10;
  width: 42px; height: 42px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff;
  background: rgba(255,255,255,.1);
  transition: background .2s;
  cursor: pointer;
}
.lb-close:hover { background: rgba(255,255,255,.22); }
.lb-close svg { width: 20px; height: 20px; }
.lb-arrow {
  position: fixed; top: 50%; translate: 0 -50%; z-index: 10;
  width: 46px; height: 46px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff;
  background: rgba(255,255,255,.1);
  transition: background .2s;
  cursor: pointer;
}
.lb-arrow:hover { background: rgba(255,255,255,.22); }
.lb-arrow svg { width: 20px; height: 20px; }
.lb-prev { left: 24px; }
.lb-next { right: 24px; }
.lb-strip {
  position: fixed; left: 50%; bottom: 24px; translate: -50% 0; z-index: 10;
  display: flex; gap: 8px;
  max-width: calc(100vw - 160px); overflow-x: auto; scrollbar-width: none;
}
.lb-strip::-webkit-scrollbar { display: none; }
.lb-thumb {
  width: 56px; height: 56px; flex: none;
  border-radius: var(--radius-card, var(--dw-radius-card)); overflow: hidden;
  opacity: .45; cursor: pointer;
  transition: opacity .2s var(--dw-ease-out), box-shadow .2s var(--dw-ease-out);
}
.lb-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-thumb:hover { opacity: .8; }
.lb-thumb.on { opacity: 1; box-shadow: 0 0 0 1.5px #fff; }

@media (max-width: 1080px) {
  .work-wrap { flex-wrap: wrap; }
  .work-rail { position: static; width: 100%; flex-direction: row; align-items: center; order: 0; }
  .w-thumbs { flex-direction: row; }
  .work-center { order: 1; width: 100%; }
  .work-side { position: static; width: 100%; order: 2; max-height: none; overflow: visible; }
  .w-fab span { display: none; }
  .w-fab { padding: 12px 8px 12px 18px; }
  .lb-stage { inset: 40px 16px 120px; }
  .lb-arrow { display: none; }
}

/* ============ 포트폴리오 상세 — 모바일 (≤760px) ============ */
@media (max-width: 760px) {
  .work-wrap { position: relative; padding: 20px var(--dw-side) 60px; gap: 22px; }

  /* 1. 썸네일 레일은 감추고 뒤로가기만 남긴다 */
  .work-rail { width: 100%; min-height: 40px; justify-content: flex-start; gap: 0; }
  .w-thumbs { display: none; }

  /* 2. 링크복사·모아보기·견적문의를 뒤로가기와 같은 줄 우측에 */
  .w-actions {
    position: absolute; top: 20px; right: var(--dw-side);
    margin: 0; padding: 0; justify-content: flex-end; gap: 8px;
  }
  .w-act { width: 38px; height: 38px; }
  .w-act::after { display: none; }          /* 좁은 화면에서 잘리는 툴팁 제거 */

  /* 3. 설명(업종) 아래 모아보기 리스트 숨김 */
  .work-related { display: none; }

  /* 4. 하단 문의하기 고정 팝업 숨김 (탭바와 겹침) */
  .w-fab { display: none; }

  /* 5. 제목은 서브페이지 h1 규격으로 */
  .w-info .w-title { font-size: var(--subpage-title-size, 22px); margin-bottom: 18px; }
  .w-meta-row { font-size: 15px; }
  .w-meta-row dt { font-size: 13px; }
}