@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

/* 메인 브랜드 컬러: 여기서만 값을 바꾸면 전체(Tailwind brand-* 유틸 포함)에 반영됨 */
:root {
  --color-brand: #00cfff;
  --color-brand-light: #c0f6ff;
  --color-charcoal: #231f20;
}

/* 사이트 기본 폰트: Wanted Sans Std (로컬 업로드, assets/fonts/) */
@font-face {
  font-family: 'Wanted Sans';
  src: url('../fonts/WantedSansStd_Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Wanted Sans';
  src: url('../fonts/WantedSansStd_Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Wanted Sans';
  src: url('../fonts/WantedSansStd_SemiBold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Wanted Sans';
  src: url('../fonts/WantedSansStd_Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Wanted Sans';
  src: url('../fonts/WantedSansStd_ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Wanted Sans';
  src: url('../fonts/WantedSansStd_Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Wanted Sans';
  src: url('../fonts/WantedSansStd_ExtraBlack.woff2') format('woff2');
  font-weight: 950;
  font-style: normal;
  font-display: swap;
}

/* 폴백 폰트: Pretendard (로컬 업로드, Wanted Sans 로드 실패 시 사용) */
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard_Light.woff2') format('woff2'),
       url('../fonts/Pretendard_Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard_Regular.woff2') format('woff2'),
       url('../fonts/Pretendard_Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard_SemiBold.woff2') format('woff2'),
       url('../fonts/Pretendard_SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard_Bold.woff2') format('woff2'),
       url('../fonts/Pretendard_Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard_Black.woff2') format('woff2'),
       url('../fonts/Pretendard_Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: #F9F9F9; }
::-webkit-scrollbar-thumb { background: var(--color-charcoal); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: #333333; }

html {
  scroll-behavior: smooth;
  background-color: var(--color-charcoal);
  color: var(--color-charcoal);
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
}


::selection {
  background-color: var(--color-charcoal);
  color: #F9F9F9;
}

.no-scrollbar::-webkit-scrollbar { display: none; }
.no-scrollbar { -ms-overflow-style: none; scrollbar-width: none; }

@keyframes grains {
  0% { transform: translate3d(0, 0, 0); }
  10% { transform: translate3d(-1%, -0.5%, 0); }
  20% { transform: translate3d(-2%, 1%, 0); }
  30% { transform: translate3d(1%, -1%, 0); }
  40% { transform: translate3d(-1%, 2%, 0); }
  50% { transform: translate3d(-2%, 1%, 0); }
  60% { transform: translate3d(2%, -1%, 0); }
  70% { transform: translate3d(1%, 2%, 0); }
  80% { transform: translate3d(-1%, -2%, 0); }
  90% { transform: translate3d(2%, 1%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

.film-grain {
  position: fixed;
  top: -10%; left: -10%; right: -10%; bottom: -10%;
  width: 120%; height: 120%;
  background: transparent url('data:image/svg+xml,%3Csvg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg"%3E%3Cfilter id="noise"%3E%3CfeTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="1" stitchTiles="stitch"/%3E%3C/filter%3E%3Crect width="100%25" height="100%25" filter="url(%23noise)" opacity="0.04"/%3E%3C/svg%3E') repeat;
  opacity: 0.15;
  animation: grains 1.5s steps(6) infinite;
  pointer-events: none;
  z-index: 9999;
}

.amber-grade {
  filter: contrast(1.02) sepia(0.04) brightness(0.99);
  transition: filter 0.5s ease-in-out;
}

#cinematic-preloader.is-hidden {
  opacity: 0;
  transform: translateY(-100%);
  pointer-events: none;
}

.nav-link {
  position: relative;
}

#and-studio-header .nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.25s ease;
}

#and-studio-header .nav-link:hover::after,
#and-studio-header .nav-link.nav-active::after {
  transform: scaleX(1);
}

/* 헤더는 항상 블랙 유지: 호버/활성 = 브랜드 컬러 */
#and-studio-header .nav-link:hover,
#and-studio-header .nav-link.nav-active {
  color: var(--color-brand) !important;
}

/* 스크롤 시 하단에 얇은 헤어라인만 추가 (배경색은 항상 블랙 유지) */
#and-studio-header.is-scrolled {
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

/* 감독 분야 필터: 활성 시 배경 + 크림 텍스트 */
.director-cat-btn {
  background-color: rgba(255, 255, 255, 0.1);
  color: rgba(249, 249, 249, 0.8);
}

.director-cat-btn:hover:not(.is-active) {
  color: var(--color-brand);
  background-color: rgba(0, 207, 255, 0.2);
}

.director-cat-btn.is-active {
  background-color: var(--color-brand) !important;
  color: var(--color-charcoal) !important;
}

/* THE ARCHIVES 그리드/인덱스 뷰 전환 버튼: 다크 배경용 */
.portfolio-mode-btn {
  background-color: transparent;
  color: rgba(249, 249, 249, 0.5);
}

.portfolio-mode-btn:hover:not(.is-active) {
  color: #F9F9F9;
}

.portfolio-mode-btn.is-active {
  background-color: var(--color-brand) !important;
  color: var(--color-charcoal) !important;
}

/* THE ARCHIVES 카테고리 필터도 동일 패턴 */
.portfolio-filter-btn.is-active {
  background-color: var(--color-brand) !important;
  color: var(--color-charcoal) !important;
  border-color: var(--color-brand) !important;
}

/* 프로덕션 프로세스 단계 버튼: 활성 시 배경 + 크림 텍스트 (자식 텍스트 색상 포함) */
.process-step-btn {
  background-color: #403c3d;
}

.process-step-btn:hover:not(.is-active) {
  background-color: #4d484a;
}

.process-step-btn.is-active {
  background-color: #6b696a !important;
}

.process-step-btn.is-active .process-step-num,
.process-step-btn.is-active .process-step-title {
  color: var(--color-brand) !important;
}

.process-step-btn.is-active .process-step-sub {
  color: rgba(0, 207, 255, 0.7) !important;
}

.modal-backdrop { display: none; }
.modal-backdrop.is-open { display: flex; }

.faq-answer { display: none; }
.faq-item.is-open .faq-answer { display: block; }
.faq-item.is-open .faq-chevron { transform: rotate(180deg); }

.process-panel { display: none; }
.process-panel.is-active { display: block; }

.archive-drawer { display: none; }
.archive-drawer.is-open { display: table-row; }

.director-modal { display: none; }
.director-modal.is-open { display: flex; }

#director-modal-content {
  padding-top: 3.5rem;
  align-items: center;
}

#director-modal-close {
  position: absolute;
  z-index: 60;
}

#director-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  z-index: 1;
}

#director-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.mobile-menu { display: none; }
.mobile-menu.is-open { display: flex; }

.line-clamp-1 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}

.hidden-ui { display: none !important; }

/* 프로모션(히어로 영상) 전용: Bebas Neue (원본 복원) */
.font-promo {
  font-family: 'Bebas Neue', Poppins, sans-serif;
  font-weight: 400;
  letter-spacing: 0.04em;
}