/* ==========================================================================
   정도기업 v2 — 공통 스타일 (Tailwind 보완 + 인터랙션)
   디자인 토큰: Cormorant Garamond(영문 디스플레이) + Pretendard(본문)
   팔레트: paper #f2f3f5 / ink #1a1a1a / body #333 / muted #8a8a85 / dark #16150f
   ========================================================================== */

:root {
  --paper: #f2f3f5;
  --ink: #1a1a1a;
  --body: #333333;
  --muted: #8f8b83;
  --line: #e4e3df;
  --dark: #16150f;
  --accent: #a89576; /* 웜 타우프 (미세 포인트) */
}

html { scroll-behavior: smooth; }
body {
  background: var(--paper);
  color: var(--body);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

.font-display {
  font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
  letter-spacing: -0.01em;
}

/* 작은 라벨(영문 캡션) */
.eyebrow {
  font-size: .72rem;
  letter-spacing: .28em;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 500;
}

/* --------------------------------------------------------------------------
   헤더 (히어로 위 투명 → 스크롤 시 솔리드)
   -------------------------------------------------------------------------- */
.site-header {
  color: #fff;
  transition: background-color .5s ease, box-shadow .5s ease, color .5s ease;
}
.site-header.nav-scrolled { color: var(--ink); }
.site-header a,
.site-header .logo-mark { color: inherit; }
.site-header .logo-line { background: #fff; }

.site-header.nav-scrolled {
  background: rgba(242, 243, 245, .94);
  backdrop-filter: saturate(150%) blur(8px);
  box-shadow: 0 1px 0 rgba(0, 0, 0, .06);
}
.site-header.nav-scrolled .logo-line { background: var(--ink); }

/* 로고 — 헤더: 히어로 위(투명)=흰색 로고, 스크롤 시=원본 네이비 로고 크로스페이드 */
.logo-on-dark, .logo-on-light { transition: opacity .5s ease; }
.site-header.nav-scrolled .logo-on-dark { opacity: 0; }
.site-header.nav-scrolled .logo-on-light { opacity: 1; }

/* 데스크톱 메뉴 링크 */
.nav-link {
  position: relative;
  font-size: .8rem;
  letter-spacing: .15em;
  font-weight: 500;
  padding-bottom: 4px;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  width: 0; height: 1px;
  background: currentColor;
  transition: width .35s ease;
}
.nav-link:hover::after,
.nav-link.is-current::after { width: 100%; }

/* --------------------------------------------------------------------------
   히어로 슬라이더
   -------------------------------------------------------------------------- */
.hero-slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1.6s ease, transform 7s ease;
}
.hero-slide.is-active {
  opacity: 1;
  transform: scale(1);
}
.hero-dot {
  width: 22px; height: 1px;
  background: rgba(255, 255, 255, .45);
  transition: background .4s ease, width .4s ease;
  cursor: pointer;
}
.hero-dot.is-active { background: #fff; width: 40px; }

/* 세로 SCROLL DOWN */
.vertical-text {
  writing-mode: vertical-rl;
  letter-spacing: .35em;
  font-size: .65rem;
  text-transform: uppercase;
}
.scroll-cue {
  width: 1px; height: 64px;
  background: linear-gradient(to bottom, rgba(255,255,255,.7), rgba(255,255,255,0));
  position: relative; overflow: hidden;
}
.scroll-cue::after {
  content: ''; position: absolute; top: -40%; left: 0;
  width: 100%; height: 40%;
  background: #fff;
  animation: scrollcue 2.2s ease-in-out infinite;
}
@keyframes scrollcue { 0%{top:-40%} 60%,100%{top:100%} }

/* --------------------------------------------------------------------------
   원형 화살표 버튼 (View More)
   -------------------------------------------------------------------------- */
.circle-btn {
  display: inline-flex; align-items: center; gap: 1rem;
  font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
  font-size: 1.25rem; letter-spacing: .02em;
}
.circle-btn .circle {
  width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid currentColor;
  transition: background .4s ease, color .4s ease, transform .4s ease;
}
.circle-btn:hover .circle { background: var(--ink); color: #fff; border-color: var(--ink); transform: translateX(4px); }
.circle-btn.on-dark:hover .circle { background: #fff; color: var(--ink); border-color: #fff; }
.circle-btn.filled .circle { background: var(--ink); color: #fff; border-color: var(--ink); }
.circle-btn.filled:hover .circle { transform: translateX(4px); }

/* pill 버튼 (히어로) */
.pill-btn {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .85rem 2rem; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.6);
  font-size: .8rem; letter-spacing: .12em; text-transform: uppercase;
  color: #fff; transition: background .4s ease, color .4s ease;
}
.pill-btn:hover { background: #fff; color: var(--ink); }

/* --------------------------------------------------------------------------
   프로젝트 카드
   -------------------------------------------------------------------------- */
.project-card .pc-img {
  overflow: hidden;
  aspect-ratio: 4 / 5;
}
.project-card .pc-img img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 1.1s cubic-bezier(.22,.61,.36,1);
}
.project-card:hover .pc-img img { transform: scale(1.06); }

/* --------------------------------------------------------------------------
   마퀴 아웃트로
   -------------------------------------------------------------------------- */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee-track {
  display: inline-flex; will-change: transform;
  animation: marquee 28s linear infinite;
}
.marquee-track span { padding: 0 .5em; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* --------------------------------------------------------------------------
   섹션 유틸
   -------------------------------------------------------------------------- */
.section-pad { padding: clamp(5rem, 12vw, 11rem) 0; }
.lift-line { line-height: 1.05; }
hr.hair { border: 0; border-top: 1px solid var(--line); }

/* --------------------------------------------------------------------------
   패럴랙스 배경 — 컨테이너보다 크게 잡아 이동 시 빈 가장자리가 안 보이게
   (transform 은 scroll-fx.js 가 적용. inset-0 의 top/height 를 덮어씀)
   -------------------------------------------------------------------------- */
.parallax-bg {
  top: -16%;
  bottom: auto;
  height: 132%;
  will-change: transform;
}

/* --------------------------------------------------------------------------
   사업분야 가로 슬라이더 (좌 이미지 · 우 다크 패널, translateX 전환)
   -------------------------------------------------------------------------- */
.svc-slider { position: relative; }
.svc-viewport { overflow: hidden; }
.svc-track {
  display: flex;
  transition: transform .85s cubic-bezier(.22, .61, .36, 1);
  will-change: transform;
}
.svc-slide {
  flex: 0 0 100%;
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: stretch;
  min-height: clamp(440px, 64vh, 680px);
  overflow: hidden;
}
.svc-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.svc-media img { width: 100%; height: 100%; object-fit: cover; transition: transform .7s cubic-bezier(.22, .61, .36, 1); }
.svc-slide:hover .svc-media img { transform: scale(1.05); }
.svc-panel {
  position: relative;
  z-index: 1;
  width: min(56%, 660px);
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.4rem;
  padding: clamp(2rem, 5vw, 5rem);
  padding-left: clamp(3rem, 8vw, 8rem);
  background: linear-gradient(90deg, rgba(22,21,15,0) 0%, rgba(22,21,15,.32) 40%, rgba(22,21,15,.62) 72%, rgba(22,21,15,.8) 100%);
}
.svc-panel .svc-no {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem; letter-spacing: .25em; color: var(--accent);
}
.svc-panel h3 {
  font-family: 'Cormorant Garamond', 'Noto Serif KR', serif;
  font-weight: 500; line-height: 1.1;
  font-size: clamp(2rem, 4vw, 3.1rem);
}
.svc-panel p { color: rgba(255, 255, 255, .72); line-height: 1.8; max-width: 30rem; }
.svc-arrow {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 6;
  width: 54px; height: 54px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .92); color: var(--ink);
  border: 0; cursor: pointer; transition: background .3s, transform .3s;
}
.svc-arrow:hover { background: #fff; }
.svc-prev { left: clamp(8px, 2vw, 24px); }
.svc-next { right: clamp(8px, 2vw, 24px); }
.svc-dots { display: flex; gap: .55rem; justify-content: center; margin-top: 2.2rem; }
.svc-dot { width: 26px; height: 2px; background: var(--line); border: 0; padding: 0; cursor: pointer; transition: background .35s, width .35s; }
.svc-dot.is-active { background: var(--ink); width: 46px; }
@media (max-width: 860px) {
  .svc-slide { flex-direction: column; justify-content: flex-end; min-height: clamp(420px, 72vh, 560px); }
  .svc-media { position: absolute; inset: 0; height: auto; min-height: 0; }
  .svc-panel {
    width: 100%;
    justify-content: flex-end;
    padding: clamp(1.6rem, 6vw, 2.4rem);
    padding-left: clamp(1.6rem, 6vw, 2.4rem);
    background: linear-gradient(0deg, rgba(22,21,15,.85) 0%, rgba(22,21,15,.42) 48%, rgba(22,21,15,0) 100%);
  }
  .svc-arrow { width: 44px; height: 44px; }
}

/* --------------------------------------------------------------------------
   프로젝트 가로 카루셀 (scroll-snap + 화살표 + 드래그)
   -------------------------------------------------------------------------- */
.proj-carousel { position: relative; }
.proj-track {
  display: flex; gap: clamp(1rem, 2vw, 1.75rem);
  overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; -ms-overflow-style: none;
  padding: 4px 2px 8px;
}
.proj-track::-webkit-scrollbar { display: none; }
.proj-track.is-dragging { scroll-behavior: auto; cursor: grabbing; }
.proj-item { flex: 0 0 calc((100% - 2 * clamp(1rem, 2vw, 1.75rem)) / 3); scroll-snap-align: start; }
@media (max-width: 1024px) { .proj-item { flex-basis: calc((100% - clamp(1rem, 2vw, 1.75rem)) / 2); } }
@media (max-width: 640px) { .proj-item { flex-basis: 82%; } }
.proj-arrow {
  position: absolute; top: 38%; transform: translateY(-50%); z-index: 6;
  width: 50px; height: 50px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--ink); color: #fff; border: 0; cursor: pointer;
  transition: opacity .3s, transform .3s; box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
}
.proj-arrow:hover { transform: translateY(-50%) scale(1.06); }
.proj-arrow[disabled] { opacity: 0; pointer-events: none; }

/* ===================== 시공사례: 카테고리 필터 ===================== */
.pfilter {
  display: flex; flex-wrap: wrap;
  gap: 1rem 1.75rem;
  margin-bottom: clamp(2rem, 4vw, 3.25rem);
}
.pfilter:empty { display: none; }
.pfilter-item {
  background: none; border: 0; padding: 0; cursor: pointer;
  font-family: inherit;
  font-size: .78rem; letter-spacing: .14em; text-transform: uppercase;
  color: #8f8b83;
  position: relative; transition: color .25s ease;
}
.pfilter-item:hover { color: #1a1a1a; }
.pfilter-item.is-active { color: #1a1a1a; }
.pfilter-item.is-active::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px;
  height: 1px; background: #a89576;
}
.project-card.is-hidden { display: none; }

/* ===================== 시공사례: 라이트박스 갤러리 ===================== */
.glb {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: rgba(22, 21, 15, .93);
  opacity: 0; visibility: hidden; transition: opacity .3s ease;
  padding: clamp(1rem, 5vw, 4rem);
}
.glb.is-open { opacity: 1; visibility: visible; }
.glb-stage {
  margin: 0; display: flex; flex-direction: column; align-items: center;
  max-width: 92vw;
}
.glb-img {
  max-width: 92vw; max-height: 82vh; object-fit: contain;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .5);
}
.glb-cap {
  margin-top: 1.1rem; color: rgba(255, 255, 255, .75);
  font-size: .85rem; letter-spacing: .04em; text-align: center;
}
.glb-close, .glb-nav {
  position: absolute; background: none; border: 0; cursor: pointer;
  color: rgba(255, 255, 255, .7);
  transition: color .2s ease, transform .2s ease;
  display: inline-flex; align-items: center; justify-content: center;
}
.glb-close:hover, .glb-nav:hover { color: #fff; }
.glb-close { top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); }
.glb-close svg { width: 30px; height: 30px; }
.glb-nav { top: 50%; transform: translateY(-50%); }
.glb-nav:hover { transform: translateY(-50%) scale(1.08); }
.glb-nav svg { width: 42px; height: 42px; }
.glb-prev { left: clamp(.5rem, 2vw, 2rem); }
.glb-next { right: clamp(.5rem, 2vw, 2rem); }
.glb.is-single .glb-nav { display: none; }
@media (max-width: 640px) { .glb-nav svg { width: 32px; height: 32px; } }
.proj-prev { left: -8px; }
.proj-next { right: -8px; }
@media (max-width: 640px) { .proj-arrow { display: none; } }

/* --------------------------------------------------------------------------
   배경 영상 섹션
   -------------------------------------------------------------------------- */
.video-section { position: relative; overflow: hidden; }
.video-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.video-section .v-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(90deg, rgba(13, 12, 9, .82) 0%, rgba(13, 12, 9, .55) 45%, rgba(13, 12, 9, .35) 100%);
}
.video-section .v-content { position: relative; z-index: 2; }