/* YY TOUR — 커스텀 스타일 (Tailwind CDN 유틸리티로 못 채우는 부분만 여기 둔다) */

:root {
  --teal-500: #14b8a6;
  --teal-600: #0d9488;
  --teal-700: #0f766e;
  --teal-800: #115e59;
  --navy-800: #1a1a2e;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Noto Sans KR', sans-serif;
}

/* 상단 네비게이션: 스크롤 전(투명 배경, 흰 글자) / 스크롤 후(흰 배경, 진한 글자) 전환.
   원본(React Navbar.tsx)의 scrolled 상태를 순수 CSS + 최소 JS(app.js)로 재현한다. */
#siteNav {
  background: transparent;
}
#siteNav.nav--scrolled {
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(8px);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
#siteNav .nav-logo,
#siteNav .nav-link,
#siteNav .nav-toggle {
  color: #fff;
}
#siteNav .nav-lang {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
#siteNav .nav-login {
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
}
#siteNav .nav-login:hover {
  background: rgba(255, 255, 255, 0.25);
}
#siteNav .nav-contact {
  color: #fff;
  border-color: rgba(255, 255, 255, 0.5);
}
#siteNav .nav-contact:hover {
  background: rgba(255, 255, 255, 0.1);
}

#siteNav.nav--scrolled .nav-logo { color: var(--teal-800); }
#siteNav.nav--scrolled .nav-link { color: var(--navy-800); }
#siteNav.nav--scrolled .nav-toggle { color: var(--navy-800); }
#siteNav.nav--scrolled .nav-lang {
  color: var(--teal-700);
  border-color: var(--teal-600);
}
#siteNav.nav--scrolled .nav-login {
  background: var(--teal-700);
  color: #fff;
}
#siteNav.nav--scrolled .nav-login:hover { background: var(--teal-800); }
#siteNav.nav--scrolled .nav-contact {
  color: var(--teal-700);
  border-color: var(--teal-600);
}
#siteNav.nav--scrolled .nav-contact:hover { background: #f0fdfa; }

/* 후기 카드 본문 4줄 말줄임 (Tailwind CDN에는 line-clamp 플러그인이 없어서 직접 정의) */
.line-clamp-4 {
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Responsive layouts and touch navigation across phones and tablets. */
html { scroll-padding-top: 88px; }
body { overflow-wrap: break-word; }
img, video, iframe { max-width: 100%; }
.grid > *, .flex > * { min-width: 0; }
button, a { touch-action: manipulation; }
:focus-visible { outline: 3px solid #0d9488; outline-offset: 4px; }
#mobileToggle { width: 44px; height: 44px; flex-shrink: 0; }
#mobileMenu { max-height: calc(100vh - 64px); max-height: calc(100dvh - 64px); overflow-y: auto; overscroll-behavior: contain; padding-bottom: max(20px, env(safe-area-inset-bottom)); }
#mobileMenu a { display: flex; align-items: center; min-height: 48px; white-space: normal; font-size: 16px; }
#siteNav.nav--open { background: #fff; }
#siteNav.nav--open .nav-logo, #siteNav.nav--open .nav-toggle { color: var(--teal-800); }
body.navigation-open { overflow: hidden; }
@media (max-width: 1279px) {
  #siteNav { background: rgba(255,255,255,.97); border-bottom: 1px solid #e7e5e4; }
  #siteNav .nav-logo, #siteNav .nav-toggle { color: var(--teal-800); }
}
@media (max-width: 767px) {
  .tour-home-hero { height: auto; min-height: 85vh; min-height: 85svh; padding: 112px 0 64px; }
  .tour-home-hero h1 { font-size: clamp(2.5rem, 12vw, 3.5rem); line-height: 1.12; }
  .tour-home-hero p:first-child { font-size: .75rem; letter-spacing: .16em; line-height: 1.8; }
  .tour-home-hero > .relative { padding-inline: 24px; }
  .tour-home-hero a { min-height: 48px; }
  .px-6 { padding-inline: 20px; }
  .py-16 { padding-block: 48px; }
  .gap-8 { gap: 24px; }
  h1, h2, h3 { overflow-wrap: break-word; }
  input, select, textarea { font-size: 16px !important; max-width: 100%; }
  input:not([type="checkbox"]):not([type="radio"]), select { min-height: 48px; }
  button, a.inline-flex { min-height: 44px; }
  footer a { display: inline-flex; align-items: center; min-height: 44px; }
  footer ul { margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}