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

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

  /* 라이트/다크 테마 공통 시맨틱 토큰 (기본값 = 다크, 현재 사이트 상태) */
  --surface-page: var(--color-charcoal);
  --surface-card: rgba(255, 255, 255, 0.05);
  --surface-card-2: rgba(0, 0, 0, 0.2);
  --text-heading: var(--color-brand);
  --text-body: var(--color-brand-light);
  --text-primary: #F9F9F9;
  --text-muted: rgba(249, 249, 249, 0.7);
  --border-default: rgba(255, 255, 255, 0.1);
  --border-strong: rgba(255, 255, 255, 0.3);

  /* process-section / price_faq 처럼 자체 그레이 팔레트를 쓰는 섹션 전용 토큰 */
  --surface-panel: #403c3d;
  --surface-panel-hover: #4d484a;
  --surface-panel-active: #6b696a;
  --surface-panel-2: #545051;
  --surface-pill-soft: #807e7f;
  --surface-question: #585455;
  --surface-cta: #5a5859;
  --surface-deep: #0D0D0E;
  --surface-deep-2: #111112;
}

/* 라이트 모드: #and-studio-app-root 에 light-mode 클래스를 추가하면 전환됨 (hero-section은 예외로 항상 다크 유지) */
#and-studio-app-root.light-mode {
  --surface-page: #F9F9F9;
  --surface-card: #FFFFFF;
  --surface-card-2: rgba(17, 17, 17, 0.02);
  --text-body: rgba(17, 17, 17, 0.8);
  --text-primary: var(--color-charcoal);
  --text-muted: rgba(17, 17, 17, 0.7);
  --border-default: rgba(17, 17, 17, 0.1);
  --border-strong: rgba(17, 17, 17, 0.3);

  --surface-panel: #F9F6F0;
  --surface-panel-hover: #F2EEE4;
  --surface-panel-active: #E8E2D3;
  --surface-panel-2: #FFFFFF;
  --surface-pill-soft: #EDEAE3;
  --surface-question: #FFFFFF;
  --surface-cta: #F2EEE4;
  --surface-deep: #FFFFFF;
  --surface-deep-2: #F5F5F5;
}

/* 사이트 기본 폰트: 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-brand);
  color: var(--color-charcoal);
}

.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: var(--surface-card);
  color: var(--text-muted);
}

.director-cat-btn:hover:not(.is-active) {
  color: var(--color-brand);
  background-color: color-mix(in srgb, var(--color-brand) 20%, transparent);
}

.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: var(--text-muted);
}

.portfolio-mode-btn:hover:not(.is-active) {
  color: var(--text-primary);
}

.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: var(--surface-panel);
}

.process-step-btn:hover:not(.is-active) {
  background-color: var(--surface-panel-hover);
}

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

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

.process-step-btn.is-active .process-step-sub {
  color: var(--color-charcoal) !important;
  opacity: 0.7;
}

/* 감독 모달 릴 목록 버튼: 활성 시 배경 + 차콜 텍스트 */
.director-reel-btn.is-active {
  background-color: var(--color-brand) !important;
  color: var(--color-charcoal) !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;
}