/* 스크롤·전환을 매끄럽게, 포트폴리오를 보기 좋게.
 *
 * 기존 style.css 를 고치지 않고 여기서 덮는다. 3,000줄에 스크롤
 * 애니메이션이 얽혀 있어 무엇이 깨지는지 알기 어렵다 — 되돌릴 때도
 * 이 파일만 빼면 된다.
 */

/* ── product 배경: 뚝 끊기지 않게 겹쳐서 넘긴다 ────────────────────
 *
 * 예전에는 `.animation-bg{background:url(1.jpg)}` 처럼 배경 이미지를
 * 통째로 갈아끼웠다. background-image 는 전환이 되지 않으므로 화면이
 * 그냥 튄다. 세 장을 미리 겹쳐 깔아 두고 opacity 만 바꾼다 — opacity 는
 * 합성 단계에서 처리되어 부드럽고 싸다.
 */
#product { position: relative; isolation: isolate; }

#product .product-bg-box,
#product .bg-wrap { position: relative; z-index: 1; }

#product::before,
#product::after,
#product .product-bg-layer {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity .7s ease;
  pointer-events: none;
}
#product::before { background-image: url(img/1.jpg); }
#product .product-bg-layer { background-image: url(img/2.jpg); }
#product::after { background-image: url(img/3-1.jpg); }

#product.bg-1::before { opacity: 1; }
#product.bg-2 .product-bg-layer { opacity: 1; }
#product.bg-3::after { opacity: 1; }

/* 옛 클래스가 어딘가 남아 다시 붙어도 배경을 갈아끼우지 못하게 막는다 */
.animation-bg, .animation-bg-1, .animation-bg-2 { background-image: none !important; }

/* ── 포트폴리오 가로 이동 ──────────────────────────────────────── */

.portpolio .scroll-box {
  /* 자바스크립트가 translate3d 로 옮긴다. 합성 레이어로 올려 둔다. */
  will-change: transform;
  backface-visibility: hidden;
}

/* ── 포트폴리오 카드 ──────────────────────────────────────────── */

.portpolio .portpolio-container .port-img {
  /* blanchedalmond 였다. 이미지가 뜨기 전 크림색이 번쩍인다. */
  background: #0b1013;
  border-radius: 2px;
}

.portpolio .portpolio-container .port-img img {
  /* width:inherit + height:100% 는 비율을 무시해 사진이 눌린다. */
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s cubic-bezier(.22, .61, .36, 1),
              filter .6s cubic-bezier(.22, .61, .36, 1);
}

.portpolio .por-card {
  /* 파란 판이 그대로 보였다. 살짝 띄워 카드처럼 보이게 한다. */
  background: linear-gradient(160deg, #00a8ff 0%, #0077b6 100%);
  border-radius: 4px;
  overflow: hidden;
  transition: transform .5s cubic-bezier(.22, .61, .36, 1),
              box-shadow .5s ease;
}
.portpolio li:hover .por-card {
  transform: translateY(-10px);
  box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .65);
}
.portpolio li:hover .port-img img {
  transform: scale(1.06);
  filter: brightness(.72);
}

/* 제목이 사진 위에 그냥 얹혀 있어 밝은 사진에서 안 읽혔다 */
/* 사진 위 제목 띠.
 *
 * 원래 `height: 10%` 로 못박혀 있었다. 사진이 커지면 10% 가 한 줄보다
 * 얕아져서 **두 줄짜리 제목이 잘린다**(실측: 사진 429px 에서 띠는 43px,
 * 제목 둘째 줄이 카드 밖으로 나갔다). 내용만큼 늘어나게 바꾼다.
 *
 * 선택자에 `#index-portfolio-list` 를 그대로 쓴 이유가 있다. 클래스만으로
 * 쓴 규칙은 ID 선택자에 밀려 **적용조차 되지 않았다**(실측: 흰 띠가 그대로
 * 남아 있었다). 덮으려면 같은 무게로 써야 한다. */
#index-portfolio-list .pf-thumb-headline {
  height: auto;
  min-height: 10%;
  padding: .85rem .9rem;
}
#index-portfolio-list .pf-thumb-headline p {
  /* 제목이 길면 두 줄까지만 보이고 말줄임한다 — 세 줄이 되면 사진을
   * 너무 가린다. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 이 절의 배경은 흰색이다. 흰 글자·흰 테두리로 두면 통째로 안 보인다
 * (실측: color rgb(255,255,255) 에 절 배경 투명 = 본문 흰색). */
.portpolio .last-por-card .por-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 2px solid rgba(17, 18, 18, .18);
  color: var(--offer-ink, #111212);
  text-decoration: none;
  transition: background .3s ease, border-color .3s ease, color .3s ease;
}
.portpolio .last-por-card .por-card:hover {
  background: var(--point-color);
  border-color: var(--point-color);
  color: #04202e;
}
.portpolio li.last-por-card:hover .por-card { transform: translateY(-6px); }

/* ── 무한 흐름 두 개: 타이머 대신 CSS 로 ──────────────────────────
 *
 * 자바스크립트가 매 프레임(또는 10ms 마다) 위치를 쓰고 있었다. 메인
 * 스레드가 바쁘면 그대로 떨린다. 거리·시간은 스크립트가 실제 폭을 재서
 * 변수로 넣어 주고, 움직임은 여기서 돈다.
 */
@keyframes marquee-x {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(calc(var(--marquee-distance) * -1), 0, 0); }
}

.scroll-content.is-marquee {
  animation: marquee-x var(--marquee-duration, 30s) linear infinite;
  will-change: transform;
}
.scroll-container:hover .scroll-content.is-marquee { animation-play-state: paused; }

.logocompany.is-marquee {
  position: relative;
  left: 0 !important;
  animation: marquee-x var(--marquee-duration, 30s) linear infinite;
  will-change: transform;
}

/* ── 스크롤 자체 ──────────────────────────────────────────────── */

html { scroll-behavior: smooth; }

/* 고정 헤더 아래로 앵커가 숨지 않게 한다 */
#offer, #product, #closing, #contact, .about, .portpolio {
  scroll-margin-top: 80px;
}

/* ── 움직임을 줄여 달라고 한 사용자 ───────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scroll-content.is-marquee,
  .logocompany.is-marquee { animation: none; }
  #product::before, #product::after, #product .product-bg-layer,
  .portpolio .por-card, .portpolio .port-img img { transition: none; }
}

/* ── 포트폴리오를 격자로 편 경우 ──────────────────────────────────
 *
 * 대표 포트폴리오는 다섯 자리뿐이라 카드가 화면 안에 다 들어온다.
 * 그런데 절은 200vh 를 차지하고 있어서, 두 화면을 굴려도 가로로는
 * 74~224px 밖에 안 움직였다(실측). 스크롤이 헛도는 느낌의 원인이다.
 * 내용이 정말 넘칠 때만 가로로 밀고, 아니면 여기서 격자로 편다.
 * 어느 쪽인지는 scroll.js 가 실제 폭을 재서 `is-static` 으로 알려 준다.
 */
.portpolio.is-static {
  height: auto;
  padding: 6vw 5vw 8vw;
}
.portpolio.is-static .scroll-box {
  position: static;
  width: 100%;
  height: auto;
  transform: none !important;
}
.portpolio.is-static .portpolio-inner {
  display: block;
  padding-top: 0;
}
.portpolio.is-static .portpolio-inner > div:first-child {
  margin: 0 0 4vw;
}
.portpolio.is-static #index-portfolio-list {
  display: grid;
  /* 열 수를 고정하지 않는다. 3 으로 박아 두면 카드가 4장일 때 3+1 로
   * 갈라져 한 줄이 거의 빈다(실측). 대표 자리는 다섯까지 늘 수 있으므로
   * 폭에 맞춰 채우게 둔다. */
  grid-template-columns: repeat(auto-fit, minmax(clamp(220px, 18vw, 280px), 1fr));
  gap: 2vw;
  align-items: stretch;
}
.portpolio.is-static #index-portfolio-list > li { width: auto; }
.portpolio.is-static .por-card {
  width: 100%;
  height: 100%;
  /* 높이를 vw 로 못박으면 카드마다 남는 파란 여백이 크게 생긴다.
   * 사진은 비율로 고정하고 아래 글자는 내용만큼만 차지하게 둔다. */
  min-height: clamp(300px, 24vw, 420px);
  justify-content: flex-start;
}
/* 사진이 남는 높이를 채운다.
 *
 * 비율을 4/3 으로 못박았더니, 제목을 사진 위에 얹는 카드(관리자에서
 * '제목을 헤드라인으로' 를 켠 것)는 아래 글자칸이 없어서 파란 여백이
 * 123px 남았다(실측). 격자가 카드 높이를 서로 맞추니 그 칸이 그대로
 * 빈 채로 보인다. 사진이 늘어나 채우게 하면 어느 쪽 카드든 꽉 찬다. */
.portpolio.is-static .port-img {
  height: auto;
  aspect-ratio: auto;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
.portpolio.is-static .por-card > p { flex: 0 0 auto; }
.portpolio.is-static .sub-bottom-text {
  flex: 0 0 auto;
  padding: 1.4rem 1rem 1.8rem;
}

/* VIEW MORE 는 격자 칸이 아니라 아래 전체를 가로지르는 띠로 둔다.
 *
 * 칸 하나로 두면 카드 수에 따라 혼자 다음 줄에 남아 납작하게 눌린다
 * (실측: 4장일 때 379x74px). 띠로 만들면 대표 자리가 셋이든 다섯이든
 * 늘 같은 모양이고, 마지막에 누를 것이 하나 분명히 남는다. */
.portpolio.is-static .last-por-card .por-card {
  align-items: center;
  justify-content: center;
  letter-spacing: .12em;
  font-weight: 800;
}

@media (max-width: 998px) {
  .portpolio.is-static { padding: 10vw 6vw; }
  .portpolio.is-static #index-portfolio-list { grid-template-columns: 1fr; gap: 6vw; }
}

/* ── 카드가 화면에 들어올 때 살짝 올라오며 나타난다 ────────────────
 *
 * 스크롤 위치를 계산하지 않는다. IntersectionObserver 가 한 번 알려 주면
 * 그 뒤로는 CSS 가 알아서 한다 — 스크롤 이벤트가 늘지 않는다.
 */
.portpolio #index-portfolio-list > li {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, .61, .36, 1);
}
.portpolio #index-portfolio-list > li.is-in {
  opacity: 1;
  transform: none;
}

@media (prefers-reduced-motion: reduce) {
  .portpolio #index-portfolio-list > li {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* ── 태블릿 폭에서 가로 스크롤바가 생기던 것 ──────────────────────
 *
 * 998px 이하에서 `.contact-user-info > div` 가 `width: 100vw` 였다.
 * 부모(`.contact`)에 `padding: 5vw` 가 걸려 있으므로 100vw 짜리 자식은
 * 정확히 그 여백만큼 넘친다(실측 768px 화면에서 38px). 세로로 읽는데
 * 가로 스크롤바가 생기면 스크롤이 어긋난 것처럼 느껴진다.
 *
 * 100vw 는 부모의 여백도, 세로 스크롤바 폭도 모른다. 여기서 필요한 것은
 * '부모를 꽉 채워라' 이므로 100% 가 맞다.
 *
 * 이 결함은 내가 넣은 것이 아니다(내 CSS 와 새 절을 다 꺼도 38px 그대로).
 */
@media (max-width: 998px) {
  .contact .contact-right-wrap .contact-user-info > div { width: 100%; }
}