/* ============================================================
   MEDIA-PORTFOLIO.CSS — Ubique Korea
   Media & Portfolio 서브 페이지 전용
   공통(common.css) 위에 로드 — header·footer·cta·btn-top 제외
   ============================================================ */

/* ============================================================
   00: 페이지 전용 변수
   ============================================================ */
:root {
  --mp-black:      #101010;
  --mp-gray-80:    #5E5E5E;
  --mp-gray-70:    #898E95;
  --mp-gray-30:    #D0D4DA;
  --mp-gray-20:    #DDDDDD;
  --mp-header-h:   90px;
}

/* ============================================================
   01: 페이지 레이아웃
   ============================================================ */
body {
  padding-top: 90px;
}

/* 서브 페이지: 헤더 항상 배경 표시 */

/* ============================================================
   03: HERO (Subtop)
   ============================================================ */
.hero {
  position: relative;
  width: 100%;
  height: 443px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.hero__bg img,
.hero__bg-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.8;
}

.hero__content {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: var(--content-max);
  padding: 0;
  text-align: left;
}

.hero__title {
  font-family: var(--font-suit);
  font-weight: 600;
  font-size: 70px;
  line-height: 1.3;
  color: var(--mp-black);
  white-space: nowrap;
  margin-bottom: 24px;
}

.hero__desc {
  font-family: var(--font-suit);
  font-weight: 700;
  font-size: 16px;
  color: var(--mp-black);
}

/* ============================================================
   04: PORTFOLIO (필터 + 그리드)
   ============================================================ */
.portfolio {
  padding: 0 0 120px;
}

.portfolio__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 56px 0 0;
}

.portfolio__controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 382px;
  align-items: end;
  gap: 28px;
  max-width: var(--content-max);
  margin: 0 auto;
  padding: 42px 0 0;
}

/* 서브탑 하단 카테고리 필터 */
.portfolio__filter {
  min-width: 0;
}

.filter__label {
  display: none;
  font-family: var(--font-suit);
  font-weight: 700;
  font-size: 10.5px;
  line-height: 1.6;
  color: var(--mp-black);
  margin-bottom: 8px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.filter__list {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  gap: 12px 32px;
  margin-top: 0;
  overflow-x: auto;
  scrollbar-width: none;
}

.filter__list::-webkit-scrollbar {
  display: none;
}

.filter__list li {
  font-family: var(--font-suit);
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  letter-spacing: 0;
  color: var(--mp-gray-70);
  cursor: pointer;
  padding: 0 0 10px;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}

.filter__list li.is-active {
  font-weight: 600;
  color: var(--mp-black);
  border-bottom-color: var(--mp-black);
}

.filter__list li:hover {
  color: var(--color-primary);
}

/* 우측 컨텐츠 영역 */
.portfolio__main {
  display: flex;
  flex-direction: column;
  gap: 36px;
}

/* 검색박스 */
.portfolio__search {
  display: flex;
  align-items: center;
  gap: 8px;
  border-bottom: 1px solid var(--mp-gray-30);
  padding: 10px 12px;
  width: 382px;
  justify-self: end;
  transform: translateY(-12px);
  transition: border-color 0.24s ease;
}

.portfolio__search:focus-within {
  border-color: rgba(16,16,16,0.5);
}

.portfolio__search input {
  flex: 1;
  font-family: var(--font-suit);
  font-weight: 500;
  font-size: 13px;
  line-height: 20px;
  color: var(--mp-black);
  background: transparent;
  border: none;
  outline: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.portfolio__search input::placeholder {
  color: var(--mp-gray-70);
}

/* 검색어 지우기 버튼 */
.search__clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease, color 0.2s ease;
  color: var(--mp-gray-70);
}

.search__clear.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.search__clear:hover {
  color: var(--mp-black);
}

.search__clear i {
  position: relative;
  display: block;
  width: 14px;
  height: 14px;
}

.search__clear i::before,
.search__clear i::after {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  width: 14px;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
}

.search__clear i::before { transform: rotate(45deg); }
.search__clear i::after  { transform: rotate(-45deg); }

.search__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
  flex-shrink: 0;
}

.search__btn img {
  width: 18px;
  height: 18px;
}

/* 포트폴리오 그리드 — masonry 컨테이너 */
.portfolio__grid {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.portfolio__list {
  position: relative;
  width: 100%;
  --masonry-cols: 4;
  --masonry-gap-x: 25px;
  --masonry-gap-y: 48px;
  transition: height 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

/* 프로젝트 카드 */
.project-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  cursor: pointer;
  position: absolute;
  /* left / top / width — JS masonry가 설정 */
}

.project-card.is-hidden {
  display: none;
}

/* 썸네일 */
.project-card__thumb {
  position: relative;
  width: 100%;
  overflow: hidden;
  border: 1px solid #dddddd;
}

.project-card__thumb img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-card:hover .project-card__thumb img {
  transform: scale(1.04);
}

/* Hover overlay */
.project-card__overlay {
  position: absolute;
  inset: 0;
  background: rgba(16, 16, 16, 0.52);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.32s ease;
}

.project-card:hover .project-card__overlay {
  opacity: 1;
}

.project-card__overlay-txt {
  font-family: var(--font-suit);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: #fff;
  text-transform: uppercase;
  border-bottom: 1px solid rgba(255,255,255,0.6);
  padding-bottom: 3px;
}

/* 카드 정보 */
.project-card__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.project-card__name {
  font-family: var(--font-suit);
  font-weight: 600;
  font-size: 20px;
  line-height: 1.5;
  color: var(--mp-black);
}

.project-card__tag {
  font-family: var(--font-suit);
  font-weight: 500;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mp-gray-80);
}

/* 빈 상태 안내 */
.portfolio__empty {
  display: none;
  text-align: center;
  font-family: var(--font-suit);
  font-weight: 500;
  font-size: 15px;
  color: #8C8C8C;
  padding: 80px 0;
}

.portfolio__empty.is-visible {
  display: block;
}

/* 로딩 스피너 */
.portfolio__loading {
  display: none;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 60px 0;
}

.portfolio__loading.is-active {
  display: flex;
}

.portfolio__loading.is-initial {
  min-height: 280px;
}

/* 페이지 로드 중 새 카드는 이미지 로딩이 끝난 뒤에 표시 */
.project-card.is-preloading {
  opacity: 0;
  visibility: hidden;
}

.project-card.is-ready {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.32s ease;
}

.portfolio__spinner {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 3.5px solid rgba(16, 16, 16, 0.12);
  border-top-color: var(--mp-black);
  animation: mpSpin 0.85s linear infinite;
}

@keyframes mpSpin {
  to { transform: rotate(360deg); }
}


/* ============================================================
   POPUP MODAL  (right-docked 테스트 스타일)
   ============================================================ */
html.mp-popup-open,
html.mp-popup-open body {
  overflow: hidden;
}

/* ── 컨테이너: 오른쪽 도킹 ── */
.mp-popup {
  position: fixed;
  inset: 0;
  z-index: 1200;
  --pop-travel: 72px;
  display: flex;
  align-items: stretch;
  justify-content: flex-end;
  padding: 0;
  visibility: hidden;
  pointer-events: none;
}

.mp-popup.is-open    { visibility: visible; pointer-events: auto; }
.mp-popup.is-closing { visibility: visible; pointer-events: none; }

.mp-popup.is-switching .mp-popup__hero,
.mp-popup.is-switching .mp-popup__prev,
.mp-popup.is-switching .mp-popup__next,
.mp-popup.is-switching .mp-popup__close {
  pointer-events: none;
}

/* ── 딤 오버레이 ── */
.mp-popup__dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.60);
  opacity: 0;
  transition: opacity 0.36s ease;
  cursor: pointer;
}

.mp-popup.is-open    .mp-popup__dim { opacity: 1; }
.mp-popup.is-closing .mp-popup__dim { opacity: 0; }

/* ── 박스: 우측 확장형 ── */
.mp-popup__box {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 520px minmax(0, 1fr);
  width: min(1760px, calc(100vw - clamp(0px, 9.2vw, 176px)));
  height: 100vh;
  background: transparent;
  overflow: visible;
  transform: translate3d(var(--pop-travel), 0, 0);
  transform-origin: right center;
  will-change: transform;
}

.mp-popup.is-open .mp-popup__box {
  animation: mpPopIn 0.72s cubic-bezier(0.2, 0.86, 0.24, 1.03) both;
}

.mp-popup.is-closing .mp-popup__box {
  animation: mpPopOut 0.52s cubic-bezier(0.32, 0.04, 0.64, 1) both;
}

@keyframes mpPopIn {
  0%   { transform: translate3d(var(--pop-travel), 0, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

@keyframes mpPopOut {
  0%   { transform: translate3d(0, 0, 0); }
  100% { transform: translate3d(var(--pop-travel), 0, 0); }
}

/* ── 닫기 버튼 ── */
.mp-popup__close {
  position: fixed;
  top: 44px;
  right: 42px;
  z-index: 10;
  width: 35px;
  height: 35px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  color: var(--mp-black);
  transition: transform 0.24s ease, opacity 0.24s ease;
}

.mp-popup__close:hover,
.mp-popup__close:focus-visible {
  opacity: 0.72;
  transform: rotate(90deg);
}

.mp-popup__close-ico {
  display: block;
  width: 32px;
  height: 32px;
  font-style: normal;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15.8337 4.1665L4.16699 15.8332M4.16699 4.1665L15.8337 15.8332' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M15.8337 4.1665L4.16699 15.8332M4.16699 4.1665L15.8337 15.8332' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: contain;     mask-size: contain;
}

/* ── 왼쪽 패널 ── */
.mp-popup__left {
  position: relative;
  width: 520px;
  min-height: 100vh;
  padding: 44px 0 0;
  display: grid;
  grid-template-rows: auto auto;
  align-content: start;
  transform: translateX(-32px);
  background: transparent;
  color: #fff;
  z-index: 6;
}

/* ── Hero 카드 ── */
.mp-popup__hero {
  width: 520px;
  height: 370px;
  position: relative;
  border-radius: 20px;
  border: 10px solid #fff;
  overflow: hidden;
  background: #f1f1f1;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: box-shadow 0.24s ease;
}

.mp-popup__hero::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.30);
  opacity: 1;
  transition: opacity 0.24s ease;
  pointer-events: none;
  z-index: 2;
}

.mp-popup__hero:hover::before { opacity: 0.10; }

.mp-popup__hero-img-wrap {
  position: absolute;
  inset: 0;
  border-radius: 12px;
  overflow: hidden;
  z-index: 1;
}

.mp-popup__hero-img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: filter 0.38s ease;
}

.mp-popup.is-switching .mp-popup__hero-img {
  filter: saturate(0.85);
}

/* hero hover 텍스트 */
.mp-popup__hero-overlay,
.mp-popup__hero-cta {
  position: absolute;
  left: 50%;
  text-align: center;
  pointer-events: none;
  z-index: 3;
  transition: opacity 0.24s ease, transform 0.24s ease;
}

.mp-popup__hero-overlay {
  top: 50%;
  transform: translate(-50%, -72%);
  opacity: 1;
  color: #fff;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: 0.01em;
}

.mp-popup__hero-cta {
  top: 50%;
  transform: translate(-50%, 16px);
  opacity: 1;
  padding: 8px 18px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  border-radius: 300px;
  color: #fff;
  font-family: var(--font-suit);
  font-size: 14px;
  font-weight: 500;
  white-space: nowrap;
  background: rgba(255,255,255,0.12);
  border: 0.5px solid rgba(255,255,255,0.95);
  backdrop-filter: blur(2px);
  transition:
    background 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    color 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.55s cubic-bezier(0.22, 1, 0.36, 1);
}

.mp-popup__hero:hover .mp-popup__hero-cta {
  color: rgba(0,0,0,0.8);
  background: #fff;
  border-color: #fff;
}

/* ── Pager ── */
.mp-popup__pager {
  width: 466px;
  margin-top: 14px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 0 8px;
}

.mp-popup__prev,
.mp-popup__next {
  display: flex;
  align-items: center;
  gap: 12px;
  width: calc(50% - 8px);
  border: 0;
  background: transparent;
  color: #fff;
  font-family: var(--font-suit);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  cursor: pointer;
  transition: color 0.2s ease;
}

.mp-popup__next { justify-content: flex-end; }

.mp-popup__prev:hover:not(:disabled),
.mp-popup__next:hover:not(:disabled) { color: #9fc3ff; }

.mp-popup__prev:disabled,
.mp-popup__next:disabled {
  opacity: 0.35;
  pointer-events: none;
}

.mp-popup__pager-name {
  min-width: 0;
  max-width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mp-popup__next .mp-popup__pager-name { text-align: right; }

.mp-popup__arrow {
  width: 16px;
  height: 16px;
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  flex: 0 0 auto;
}

.mp-popup__arrow--prev { transform: rotate(-45deg); }
.mp-popup__arrow--next { transform: rotate(135deg); }

/* ── 오른쪽 패널 ── */
.mp-popup__right {
  position: relative;
  height: 100%;
  margin-left: -54px;
  background: #fff;
  border-radius: 0;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.22);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: rgba(16,16,16,0.28) transparent;
  z-index: 5;
}

.mp-popup__right::-webkit-scrollbar       { width: 10px; }
.mp-popup__right::-webkit-scrollbar-track { background: transparent; margin: 14px 0 10px; }
.mp-popup__right::-webkit-scrollbar-thumb {
  background: rgba(16,16,16,0.26);
  border-radius: 999px;
  border: 3px solid transparent;
  background-clip: padding-box;
  min-height: 56px;
}
.mp-popup__right::-webkit-scrollbar-thumb:hover  { background: rgba(16,16,16,0.40); }
.mp-popup__right::-webkit-scrollbar-corner       { background: transparent; }

.mp-popup__panel {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}

.mp-popup__head {
  padding: 88px 88px 56px;
  background: #fff;
}

/* 제목 */
.mp-popup__name {
  font-family: var(--font-suit);
  font-size: clamp(28px, 3.6vw, 52px);
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: var(--mp-black);
}

/* 카테고리 메타 */
.mp-popup__meta {
  margin-top: 12px;
  font-family: var(--font-suit);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--mp-black);
  opacity: 0.72;
}

/* 정보 + 설명 2단 그리드 */
.mp-popup__top {
  margin-top: 38px;
  display: grid;
  grid-template-columns: minmax(220px, 320px) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
}

.mp-popup__top.only-infos,
.mp-popup__top.only-desc {
  grid-template-columns: minmax(0, 1fr);
}

.mp-popup__infos {
  display: grid;
  gap: 14px;
  align-content: start;
}

.mp-popup__row {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: 12px;
}

.mp-popup__key {
  font-family: var(--font-suit);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--mp-black);
  min-width: 72px;
}

.mp-popup__val {
  font-family: var(--font-suit);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.5;
  color: var(--mp-black);
  word-break: break-word;
}

/* View the Project 링크 */
.mp-popup__link {
  --ico-size: clamp(10px, 1.1vw, 13px);
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(8px, 1.2vw, 14px);
  min-width: clamp(150px, 22vw, 230px);
  min-height: clamp(40px, 4.6vw, 52px);
  padding: clamp(9px, 1.1vw, 14px) clamp(14px, 1.5vw, 20px);
  border: 1px solid var(--mp-black);
  border-radius: 300px;
  text-decoration: none;
  color: var(--mp-black);
  font-family: var(--font-suit);
  font-size: clamp(12px, 1vw, 15px);
  font-weight: 500;
  line-height: 1.6;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  transition: color 0.24s ease, border-color 0.24s ease;
}

.mp-popup__link::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--mp-black);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.30s ease;
  z-index: 0;
}

.mp-popup__link:hover,
.mp-popup__link:focus-visible {
  color: #fff;
  border-color: var(--mp-black);
}

.mp-popup__link:hover::before,
.mp-popup__link:focus-visible::before { transform: scaleX(1); }

.mp-popup__link-txt {
  position: relative;
  z-index: 1;
}

.mp-popup__link-ico {
  position: relative;
  z-index: 1;
  width: var(--ico-size);
  height: var(--ico-size);
  flex: 0 0 var(--ico-size);
  background-color: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 0.5H12.5M12.5 0.5V10.5M12.5 0.5L0.5 12.5' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg width='13' height='13' viewBox='0 0 13 13' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.5 0.5H12.5M12.5 0.5V10.5M12.5 0.5L0.5 12.5' stroke='%23000' stroke-width='1.2' stroke-linecap='round'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* 설명 */
.mp-popup__desc {
  font-family: var(--font-suit);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.65;
  color: var(--mp-black);
  white-space: pre-line;
}


/* ── 상세 갤러리 ── */
.mp-popup__gallery {
  padding: 80px 88px;
  display: flex;
  flex-direction: column;
  gap: 32px;
  background: #f2f2f2;
}

.mp-popup__gallery .dtext {
  font-family: var(--font-suit);
  font-size: 15px;
  font-weight: 300;
  line-height: 1.7;
  color: var(--mp-black);
  white-space: pre-line;
}

.mp-popup__gallery .dvideo {
  width: 100%;
}

.mp-popup__gallery .dvideo-embed {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.mp-popup__gallery .dvideo-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.mp-popup__gallery .dvideo video {
  width: 100%;
  display: block;
}

.mp-popup__gallery .dimgs {
  display: grid;
  gap: 12px;
}

.mp-popup__gallery .dimgs.col1 { grid-template-columns: 1fr; }
.mp-popup__gallery .dimgs.col2 { grid-template-columns: repeat(2, 1fr); }
.mp-popup__gallery .dimgs.col3 { grid-template-columns: repeat(3, 1fr); }

.mp-popup__gallery .dimgs figure {
  margin: 0;
  overflow: hidden;
}

.mp-popup__gallery .dimgs figure img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.mp-popup__gallery .detailempty {
  font-size: 14px;
  color: #999;
  text-align: center;
  padding: 32px 0;
}


/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width: 1280px) {
  .portfolio__list {
    --masonry-cols: 3;
    --masonry-gap-x: 20px;
  }

  .hero__title {
    font-size: 56px;
  }
}

@media (max-width: 1024px) {
  .hero {
    height: 360px;
  }

  .hero__title {
    font-size: 44px;
    white-space: normal;
  }

  .portfolio {
    padding: 0 0 96px;
  }

  .portfolio__inner {
    padding-top: 44px;
  }

  .portfolio__controls {
    padding-top: 34px;
    gap: 28px;
  }

  .filter__list {
    gap: 12px 24px;
  }

  .portfolio__list {
    --masonry-cols: 3;
  }

  /* 팝업: 태블릿 — 우측 도킹 유지 */
  .mp-popup {
    padding: 0;
  }

  .mp-popup__box {
    grid-template-columns: 380px minmax(0, 1fr);
    width: min(900px, calc(100vw - 48px));
    height: 100vh;
  }

  .mp-popup__left {
    width: 380px;
  }

  .mp-popup__hero {
    width: 380px;
    height: 270px;
  }

  .mp-popup__pager {
    width: 340px;
  }

  .mp-popup__right {
    margin-left: -42px;
  }

  .mp-popup__head {
    padding: 64px 56px 44px;
  }

  .mp-popup__top {
    grid-template-columns: minmax(0, 1fr);
  }
}

@media (max-width: 768px) {
  body {
    padding-top: 72px;
  }

  .hero {
    height: 300px;
  }

  .hero__title {
    font-size: 32px;
    white-space: normal;
  }

  .hero__desc {
    font-size: 14px;
  }

  .portfolio {
    padding: 0 0 72px;
  }

  .portfolio__controls {
    grid-template-columns: 1fr;
    gap: 20px;
    padding-top: 28px;
  }

  .portfolio__filter {
    overflow-x: auto;
    scrollbar-width: none;
  }

  .portfolio__filter::-webkit-scrollbar {
    display: none;
  }

  .portfolio__inner {
    padding-top: 36px;
  }

  .portfolio__search {
    width: 100%;
    justify-self: stretch;
    transform: none;
  }

  .portfolio__main {
    gap: 24px;
  }

  .portfolio__list {
    --masonry-cols: 2;
    --masonry-gap-x: 16px;
    --masonry-gap-y: 32px;
  }

  .filter__list li {
    font-size: 15px;
  }

  .project-card__name {
    font-size: 15px;
  }

  .project-card__tag {
    font-size: 11px;
  }

  /* 팝업: 모바일 — 세로 스택 */
  .mp-popup {
    padding: 0;
    align-items: flex-end;
  }

  .mp-popup__box {
    grid-template-columns: 1fr;
    grid-template-rows: auto 1fr;
    width: 100vw;
    height: min(92vh, 100vh);
    overflow: hidden;
  }

  .mp-popup__left {
    width: 100%;
    padding: 16px 16px 0;
    transform: none;
  }

  .mp-popup__hero {
    width: 100%;
    height: 200px;
    border-radius: 16px;
    border-width: 6px;
  }

  .mp-popup__pager {
    width: 100%;
    padding: 0 4px;
    margin-bottom: 16px;
  }

  .mp-popup__right {
    margin-left: 0;
    border-radius: 16px 16px 0 0;
    height: 100%;
  }

  .mp-popup__head {
    padding: 36px 28px 36px;
  }

  .mp-popup__top {
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
  }

  .mp-popup__close {
    top: 24px;
    right: 20px;
  }

  .mp-popup__pager-name {
    display: none;
  }
}

@media (max-width: 480px) {
  .hero {
    height: 240px;
  }

  .hero__content {
    padding: 0;
  }

  .hero__title {
    font-size: 24px;
    line-height: 1.3;
  }

  .filter__list {
    gap: 10px 18px;
  }

  .filter__list li {
    font-size: 14px;
  }

  .portfolio__search {
    padding: 8px 0;
  }

  .portfolio__list {
    --masonry-cols: 1;
    --masonry-gap-x: 0px;
    --masonry-gap-y: 28px;
  }

  .project-card__overlay-txt {
    font-size: 11px;
  }

  .mp-popup__hero {
    height: 180px;
  }

  .mp-popup__head {
    padding: 30px 20px 28px;
  }

  .mp-popup__name {
    font-size: 24px;
  }

  .mp-popup__meta,
  .mp-popup__key,
  .mp-popup__val,
  .mp-popup__desc {
    font-size: 13px;
  }

  .mp-popup__close {
    top: 18px;
    right: 16px;
    width: 18px;
    height: 18px;
  }
}

/* 반응형 보완 2026-09-18 — 서브탑·카테고리 필터·카드 목록이 화면 끝에 붙던 문제 */
.hero__content,.portfolio__controls,.portfolio__inner{max-width:calc(var(--content-max) + var(--section-px) * 2);padding-left:var(--section-px);padding-right:var(--section-px)}
/* 카테고리 탭이 좁은 폭에서 가로 스크롤 밖으로 숨지 않도록 — 태블릿·데스크톱(769~1600px) 글자 크기 축소, 넘치면 줄바꿈 */
.filter__list{flex-wrap:wrap}
@media (min-width: 769px) and (max-width: 1600px){
  .filter__list{gap:12px 24px}
  .filter__list li{font-size:clamp(24px,1.8vw,40px)}
}
/* 모바일: 카테고리 탭이 가로 스크롤 밖(ETC 등)으로 숨지 않도록 줄바꿈 */
@media (max-width: 768px){
  .portfolio__filter,.filter__list{overflow-x:visible}
  .filter__list{flex-wrap:wrap;gap:10px 20px}
}

/* 반응형 보완 2026-09-21 — 모바일 팝업
   1) 팝업이 보이지 않던 문제: .mp-popup__left 의 min-height:100vh 가 세로 스택에서 남아 상세 패널 높이가 0이 되었다.
   2) 유튜브·이미지가 작던 문제: 갤러리 좌우 패딩 88px 이 모바일에서도 유지되어 375px 폭에서 영상이 199px 밖에 안 됐다.
   3) 모바일에서는 다음 프로젝트(.mp-popup__left)를 상세 패널 맨 아래로 옮긴다 (JS placePopupLeft). 읽는 순서·탭 순서가 화면 순서와 같아진다. */

/* 다음 프로젝트 제목·프로젝트명: 데스크톱에서는 숨김 */
.mp-popup__more-title,
.mp-popup__thumb-name { display: none; }

/* 닫기 버튼 X: 보이는 크기 18px, 선 굵기 1.5px (viewBox 18 = 표시 크기 18px 이라 선이 배율 없이 1.5px, 끝 둥근 캡 포함 18px) */
.mp-popup__close-ico {
  width: 18px;
  height: 18px;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M.75 .75L17.25 17.25M17.25 .75L.75 17.25' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M.75 .75L17.25 17.25M17.25 .75L.75 17.25' stroke='black' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* 데스크톱·태블릿: 영상·이미지가 상단 카드(520px)에 견줄 크기가 되도록 좌우 패딩을 화면 폭에 맞춰 줄인다.
   1025px 24px → 1400px 이상 88px(기존 값). 769~1024px 는 24px. */
@media (min-width: 769px) {
  .mp-popup__gallery {
    padding-left:  clamp(24px, calc((100vw - 1025px) * 0.17 + 24px), 88px);
    padding-right: clamp(24px, calc((100vw - 1025px) * 0.17 + 24px), 88px);
  }
}

@media (max-width: 768px) {
  .mp-popup__box {
    display: block;
    height: 92vh; height: 92dvh;
  }

  /* 상세 패널이 팝업 전체를 채운다 */
  .mp-popup__right {
    height: 100%;
    border-radius: 16px 16px 0 0;
  }

  /* 닫기: 흰 원형 버튼 — 갤러리(어두운 이미지) 위에서도 보이게 */
  .mp-popup__close {
    top: 16px; right: 16px;
    width: 44px; height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,.94);
    z-index: 10;
  }
  .mp-popup__name { padding-right: 44px; }

  /* 영상·이미지: 상단 카드와 같은 좌우 16px 여백 */
  .mp-popup__gallery { padding: 32px 16px; gap: 24px; }

  /* 다음 프로젝트: 상세 패널 맨 아래 */
  .mp-popup__left {
    width: 100%; min-height: 0;
    padding: 40px 16px calc(48px + env(safe-area-inset-bottom));
    transform: none;
    z-index: auto;
    background: #fff;
    color: var(--mp-black);
  }
  .mp-popup__left.is-empty { display: none; }

  .mp-popup__more-title {
    display: block;
    margin: 0 0 16px;
    font-family: var(--font-suit);
    font-size: 20px; font-weight: 700; line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--mp-black);
  }

  .mp-popup__hero {
    width: 100%; height: auto;
    aspect-ratio: 16 / 9;
    border: 0;
    border-radius: 12px;
    box-shadow: none;
  }

  .mp-popup__thumb-name {
    display: block;
    margin: 14px 0 0;
    font-family: var(--font-suit);
    font-size: 16px; font-weight: 600; line-height: 1.45;
    color: var(--mp-black);
    word-break: keep-all;
  }

  /* 이전/다음: 터치 영역 48px 이상, 프로젝트명 표시 */
  .mp-popup__pager {
    width: 100%; margin: 20px 0 0; padding: 0;
    gap: 12px;
  }
  .mp-popup__prev,
  .mp-popup__next {
    min-height: 56px;
    padding: 8px 12px;
    border: 1px solid #d9d9d9;
    border-radius: 12px;
    color: var(--mp-black);
    font-size: 14px; line-height: 1.35;
    text-align: left;
  }
  .mp-popup__next { text-align: right; }
  .mp-popup__prev:hover:not(:disabled),
  .mp-popup__next:hover:not(:disabled) { color: var(--mp-black); background: #f4f4f4; }
  .mp-popup__pager-name {
    display: -webkit-box;
    -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    max-width: none;
    white-space: normal;
    word-break: keep-all;
  }
  .mp-popup__arrow { width: 12px; height: 12px; border-color: var(--mp-black); }
}