/* 포트폴리오 인덱스 (views/html/portfolio_index.php) */
.pf-index {
  color: #111;
}

.pf-index a {
  color: inherit;
  text-decoration: none;
}

.pfi-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 40px;
  box-sizing: border-box;
}

/* 히어로 */
.pfi-hero {
  padding: 150px 0 50px;
}

.pfi-headline {
  margin: 0 0 20px;
  font-size: clamp(44px, 5.5vw, 76px);
  font-weight: 500;
  line-height: 1;
  letter-spacing: -.02em;
}

.pfi-desc {
  font-size: 15px;
  line-height: 1.7;
  color: #555;
}

.pfi-count strong {
  display: block;
  font-size: 30px;
  font-weight: 500;
  line-height: 1;
}

.pfi-count span {
  font-size: 11px;
  letter-spacing: .1em;
  color: #666;
}

/* 탭 / 검색 */
.pfi-filter-wrap {
  border-bottom: 1px solid #e5e5e5;
}

.pfi-filter {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px 20px;
  padding-top: 28px;
  padding-bottom: 20px;
}

.pfi-tabs {
  display: flex;
  gap: 44px;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: 14px;
}

.pfi-tabs a {
  display: inline-block;
  padding-bottom: 8px;
  border-bottom: 2px solid transparent;
  color: #444;
}

.pfi-tabs .on a {
  color: #111;
  border-color: #111;
}

.pfi-search {
  display: flex;
  align-items: center;
  width: 260px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid #ddd;
  border-radius: 3px;
  box-sizing: border-box;
}

.pfi-search input {
  flex: 1;
  min-width: 0;
  margin-left: 12px;
  border: 0;
  background: none;
  font-size: 13px;
  outline: none;
}

.pfi-search button {
  position: relative;
  flex: none;
  width: 13px;
  height: 13px;
  padding: 0;
  border: 2px solid #333;
  border-radius: 50%;
  background: none;
  cursor: pointer;
}

.pfi-search button::after {
  content: "";
  position: absolute;
  right: -5px;
  bottom: -6px;
  width: 2px;
  height: 7px;
  background: #333;
  transform: rotate(-45deg);
}

/* 그리드: 3칸 균일 (ul 하나 = 12장 = 4줄) */
.pfi-section {
  padding: 28px 0 80px;
}

.pfi-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin: 0 0 12px;
  padding: 0;
  list-style: none;
}

/* 카드: 썸네일 위, 제목·카테고리는 이미지 아래. <button>이라 브라우저 기본 여백/정렬을 리셋합니다. */
.pfi-grid .pfi-card {
  position: relative;
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  text-align: left;
  font: inherit;
  color: #111;
  transition: opacity .6s ease, transform .6s ease;
  cursor: pointer;
}

/* 등장 효과: JS가 .pfi-grids에 .js를 붙인 뒤에만 숨기고, 스크롤로 보이면 li에 .show 추가 (JS 실패 시 전부 보임) */
.pfi-grids.js li:not(.show) .pfi-card {
  opacity: 0;
  transform: translateY(30px);
}

/* 필터로 빠지는 카드: 짧게 축소·페이드 후 재배치 (지연 무시) */
.pfi-grids.js li.leave .pfi-card {
  opacity: 0;
  transform: scale(.92);
  transition-duration: .25s;
  transition-delay: 0s !important;
}

@media (prefers-reduced-motion: reduce) {
  .pfi-grids.js li:not(.show) .pfi-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.pfi-thumb {
  position: relative;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 4px;
  background: #eee;
}

.pfi-thumb img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease;
}

.pfi-card-txt {
  padding: 16px 40px 18px 0;
}

.pfi-card-txt strong {
  display: block;
  margin-bottom: 6px;
  font-size: 16px;
  font-weight: 500;
}

.pfi-card-txt span {
  font-size: 12px;
  color: #777;
}


/* hover: 이미지 확대, 화살표 이동 */
.pfi-grid .pfi-card:hover .pfi-thumb img {
  transform: scale(1.05);
}



.pfi-grid li.pfi-empty {
  grid-column: 1 / -1;
  padding: 80px 0;
  text-align: center;
  color: #777;
}

.pfi-btn {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 28px;
  border: 1px solid #111;
  border-radius: 3px;
  background: none;
  color: #111;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
}

.pfi-btn span {
  margin-left: 8px;
}

/* CTA */
.pfi-cta {
  padding: 56px 0;
  background: #111;
  color: #fff;
}

.pfi-cta .pfi-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 24px;
}

.pfi-cta h2 {
  margin: 0 0 10px;
  font-size: 30px;
  font-weight: 400;
}

.pfi-cta p {
  margin: 0;
  font-size: 14px;
  color: #aaa;
}

.pfi-btn-light {
  border-color: #fff;
  color: #fff;
}

/* CTA 밴드가 footer-top(Recruit/Inquiry 배너)을 대신함 */
.pf-index+.footer-top {
  display: none;
}

@media (max-width: 1199px) {
  .pfi-hero {
    background-image: none;
  }

  .pfi-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .pfi-inner {
    padding-left: 20px;
    padding-right: 20px;
  }

  .pfi-hero {
    padding: 120px 0 40px;
  }

  .pfi-desc {
    margin-bottom: 32px;
  }

  .pfi-tabs {
    gap: 20px;
    flex-wrap: wrap;
  }

  .pfi-search {
    width: 100%;
  }

  .pfi-grid {
    grid-template-columns: 1fr;
  }

  .pfi-cta h2 {
    font-size: 24px;
  }
}

/* 포트폴리오 카드 클릭 팝업. main_new.php의 .portfolio-modal과 동일한 스타일입니다. */
.portfolio-modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  /* align-items: flex-start; */
  align-items: center;
  justify-content: center;
  padding: 6vh 20px;
  overflow-y: auto;
}

.portfolio-modal[aria-hidden="true"] {
  display: none;
}

.portfolio-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .7);
}

.portfolio-modal-panel {
  position: relative;
  z-index: 1;
  box-sizing: border-box;
  width: min(1000px, 100%);
  max-height: 88vh;
  overflow-y: auto;
  border-radius: 8px;
  background: #fff;
  color: #111;
  /* 패널 자체엔 패딩을 안 주고, 헤딩/바디/이미지가 각자 좌우 패딩을 가집니다 — 그래야 헤딩을
     position:sticky로 고정했을 때 "패널 패딩 밖으로 마진을 빼서 다시 채우는" 트릭 없이도
     흰 배경이 패널 가장자리까지 자연스럽게 닿습니다. */
}

.portfolio-modal-close {
  position: absolute;
  top: 24px;
  right: 24px;
  z-index: 3;
  width: 24px;
  height: 24px;
  color: #111;
}

/* 텍스트 "×" 대신 두 막대를 교차시켜 X를 그립니다. */
.portfolio-modal-close::before,
.portfolio-modal-close::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 16px;
  height: 2px;
  background: currentColor;
  transform: translate(-50%, -50%) rotate(45deg);
}

.portfolio-modal-close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.portfolio-modal-heading {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 40px 40px 24px;
  background: #fff;
  border-radius: 8px 8px 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
}

.portfolio-modal-heading>div:not(.modal-link-box) {
  display: flex;
  flex-direction: column;
  gap: 17px;
  padding-right: 40px;
}

.portfolio-modal-heading h3 {
  margin: 0;
  font-size: 28px;
  font-weight: 600;
}

.portfolio-modal-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.portfolio-modal-tag {
  padding: 8px 12px;
  border-radius: 4px;
  background: #000;
  color: #fff;
  font-size: 13px;
  font-weight: 600;
}

.portfolio-modal-heading .portfolio-modal-link {
  color: #000;
  font-size: 16px;
  font-weight: 400;
  line-height: 100%;
}

.portfolio-modal-body {
  display: flex;
  flex-wrap: wrap;
  gap: 40px;
  padding: 0 40px 40px;
  box-sizing: border-box;
}

.portfolio-modal-intro {
  flex: 1 1 260px;
}

.portfolio-modal-intro h4 {
  margin: 0 0 16px;
  font-size: 18px;
  font-weight: 600;
}

.portfolio-modal-intro p {
  margin: 0;
  color: rgba(0, 0, 0, .6);
  font-size: 15px;
  line-height: 1.6;
  word-break: keep-all;
  white-space: pre-line;
}

.portfolio-modal-meta {
  flex: 1 1 260px;
  margin: 0;
  border-top: 2px solid #000;
}

.portfolio-modal-meta>div {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid rgba(0, 0, 0, .2);
}

.portfolio-modal-meta dt {
  margin: 0;
  font-weight: 600;
}

.portfolio-modal-meta dd {
  margin: 0;
  color: rgba(0, 0, 0, .6);
}

.portfolio-modal-image {
  /* padding을 쓰면 border-radius/overflow:hidden이 안쪽 이미지가 아니라 빈 여백까지 둥글게
     잘라버려서, 여기는 margin으로 좌우/아래 여백을 줍니다. */
  margin: 40px 40px 40px;
  border-radius: 4px;
  overflow: hidden;
}

.portfolio-modal-image img {
  display: block;
  width: 100%;
  height: auto;
}



@media (width <=768px) {

  /* main2026.css에서 옮겨온 규칙 — main_new.php/portfolio_index.php 둘 다 여기서만 정의합니다.
     패널 자체엔 패딩이 없어져서(위 .portfolio-modal-panel 참고), 여기서도 헤딩/바디/이미지
     각각의 패딩·마진을 40px → 20px로 줄여줍니다. */
  .portfolio-modal-heading {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 20px 12px;
  }

  .portfolio-modal-body {
    padding: 0 20px 20px;
  }

  .portfolio-modal-image {
    margin: 20px 20px 20px;
  }

  .portfolio-modal-heading .modal-link-box {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    width: 100%;
  }
}