/* ==========================================================================
   Nova Studio — site.css
   Tailwind 유틸리티로 표현할 수 없는 부분만 담습니다.
   (반응형 타이포 축소 / 내비게이션 / 스크롤 리빌 / 지도 다크 필터)
   ========================================================================== */

html,
body {
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  /* 고정 헤더(80px)에 앵커가 가리지 않도록 */
  scroll-padding-top: 96px;
}

body {
  overscroll-behavior-y: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;

  /* 한글 줄바꿈.
     기본값(word-break: normal)은 한글을 음절 단위로 아무 데서나 끊어서
     "시각적으로 정의 / 합니다" 처럼 단어가 두 줄로 쪼개집니다.
     keep-all 로 어절(띄어쓰기) 단위로만 끊고, 한 줄에 들어가지 않는
     긴 영문·URL 만 overflow-wrap 으로 예외 처리합니다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 제목은 줄 길이를 고르게 배분해 한 단어만 남는 줄을 방지 */
h1,
h2,
h3,
h4 {
  text-wrap: balance;
}

::selection {
  background: #e9c176;
  color: #412d00;
}

/* 얇은 스크롤바 — 원본은 스크롤바를 완전히 숨겨 스크롤 위치를 알 수 없었음 */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
::-webkit-scrollbar-track {
  background: #0e0e0e;
}
::-webkit-scrollbar-thumb {
  background: #353535;
  border: 3px solid #0e0e0e;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #5f5e5e;
}

/* 키보드 포커스 표시 (기존 마크업에는 없었음) */
:focus-visible {
  outline: 2px solid #e9c176;
  outline-offset: 3px;
  border-radius: 2px;
}

img {
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   반응형 타이포그래피
   display-lg 72px 는 모바일에서 가로로 넘칩니다. DESIGN.md 의
   "모바일에서는 헤드라인을 과감히 축소" 지침대로 단계별로 줄입니다.
   Play CDN 이 스타일을 동적으로 주입하므로 !important 로 확정합니다.
   -------------------------------------------------------------------------- */
@media (max-width: 1023px) {
  .text-display-lg {
    font-size: 52px !important;
    line-height: 60px !important;
  }
  .text-headline-lg {
    font-size: 38px !important;
    line-height: 46px !important;
  }
}

@media (max-width: 767px) {
  .text-display-lg {
    font-size: 38px !important;
    line-height: 46px !important;
    letter-spacing: -0.03em !important;
  }
  .text-headline-lg {
    font-size: 30px !important;
    line-height: 38px !important;
  }
  .text-headline-md {
    font-size: 24px !important;
    line-height: 32px !important;
  }
  .text-body-lg {
    font-size: 16px !important;
    line-height: 26px !important;
  }
}

/* --------------------------------------------------------------------------
   내비게이션
   -------------------------------------------------------------------------- */
.nav-link {
  font-family: 'JetBrains Mono', 'Noto Sans KR', monospace;
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c4c7c7;
  position: relative;
  padding-block: 6px;
  transition: color 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  height: 1px;
  width: 0;
  background: #e9c176;
  transition: width 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.nav-link:hover {
  color: #e4e2e1;
}

.nav-link:hover::after,
.nav-link.is-active::after {
  width: 100%;
}

.nav-link.is-active {
  color: #e4e2e1;
}

/* 스크롤 시 헤더 배경을 조금 더 불투명하게 */
#site-header.is-scrolled {
  background-color: rgba(14, 14, 14, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

/* 모바일 메뉴 */
#mobile-menu {
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  background: rgba(14, 14, 14, 0.97);
  backdrop-filter: blur(20px);
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1);
}

#mobile-menu.is-open {
  max-height: 420px;
}

/* --------------------------------------------------------------------------
   스크롤 리빌
   -------------------------------------------------------------------------- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s cubic-bezier(0.25, 1, 0.5, 1),
    transform 0.7s cubic-bezier(0.25, 1, 0.5, 1);
  will-change: opacity, transform;
}

.js-reveal [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   포트폴리오 필터
   -------------------------------------------------------------------------- */
.portfolio-item {
  transition: opacity 0.35s ease, transform 0.35s ease;
}

.portfolio-item.is-hidden {
  display: none;
}

.filter-btn[aria-pressed='true'] {
  background: #2a2a2a;
  color: #e4e2e1;
}

/* --------------------------------------------------------------------------
   폼
   -------------------------------------------------------------------------- */
/* 자동완성 시 브라우저가 흰 배경을 덧씌우는 것을 방지 */
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-text-fill-color: #e4e2e1;
  transition: background-color 100000s ease-in-out 0s;
}

select option {
  background: #1f2020;
  color: #e4e2e1;
}

/* --------------------------------------------------------------------------
   지도 — Google 임베드는 라이트 테마뿐이라 필터로 다크 톤을 맞춥니다.
   -------------------------------------------------------------------------- */
.map-embed {
  filter: invert(0.92) hue-rotate(180deg) saturate(0.55) contrast(0.92)
    brightness(0.95);
}

/* --------------------------------------------------------------------------
   모션 최소화 설정 존중
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
  .js-reveal [data-reveal] {
    opacity: 1;
    transform: none;
  }
}

/* 인쇄 */
@media print {
  #site-header,
  #mobile-menu {
    display: none;
  }
  body {
    background: #fff;
    color: #000;
  }
}