/* ============================================================
   LCC — 자신만만 렌터카연구소 (저신용자동차)
   Light / Toss-style + Tech Blue #0058FF + Sharp Edges
   Tailwind 유틸과 공존. 이 파일은 컴포넌트 + 애니메이션 전용.
============================================================ */

*, *::before, *::after {
  word-break: keep-all;
  overflow-wrap: break-word;
}

html { scroll-behavior: auto; -webkit-font-smoothing: antialiased; }

body {
  font-family: 'Pretendard Variable','Pretendard',-apple-system,sans-serif;
  font-size: 16px;
  font-weight: 400;
  background: #FFFFFF;
  color: #0F172A;
  overflow-x: hidden;
}

::selection { background: #0058FF; color: #fff; }
::-webkit-scrollbar { width: 0; height: 0; }

.font-en { font-family: 'Outfit','Pretendard Variable',sans-serif; letter-spacing: -0.01em; }

/* ---------- noise texture ---------- */
.noise {
  position: fixed; inset: 0; z-index: 100; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.025;
  mix-blend-mode: multiply;
}

/* ---------- glow lights (테크 블루) ---------- */
.glow {
  position: absolute;
  border-radius: 50%;
  filter: blur(120px);
  will-change: transform;
  pointer-events: none;
  z-index: 0;
}
.glow-1 { width: 560px; height: 560px; background: rgba(0,88,255,0.18);   top: -15%; left: -8%; }
.glow-2 { width: 480px; height: 480px; background: rgba(51,119,255,0.12); bottom: -5%; right: -10%; }
.glow-3 { width: 360px; height: 360px; background: rgba(0,88,255,0.10);   top: 40%; left: 40%; }

/* ---------- 오버레이 메뉴 ---------- */
.overlay-menu {
  position: fixed; inset: 0; z-index: 120;
  background: #0A0F1C; color: #fff;
  transform: translateY(-100%);
  transition: transform 0.8s cubic-bezier(0.77,0,0.175,1);
}
.overlay-menu.is-open { transform: translateY(0); }

/* ---------- 히어로 타이포그래피 (SplitText용) ---------- */
.hero-line { perspective: 500px; }
.split-word { display: inline-block; will-change: transform, opacity; }
.split-char { display: inline-block; will-change: transform, opacity; }

/* ---------- reveal 베이스 ---------- */
.gs_reveal { opacity: 0; will-change: transform, opacity; }
.gs_reveal.is-visible { opacity: 1; }

/* ---------- 이미지 zoom ---------- */
.img-zoom { overflow: hidden; position: relative; }
.img-zoom img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 1.2s cubic-bezier(0.19,1,0.22,1);
}
.img-zoom:hover img { transform: scale(1.08); }

/* ---------- 프리미엄 링크 언더라인 ---------- */
.link-underline { position: relative; display: inline-block; }
.link-underline::after {
  content: ''; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform 0.5s cubic-bezier(0.77,0,0.175,1);
}
.link-underline:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Marquee (텍스트) ---------- */
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  display: inline-flex; gap: 4rem; white-space: nowrap;
  animation: marquee 35s linear infinite;
  will-change: transform;
}

/* ---------- 사진 Marquee ---------- */
@keyframes img-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.img-marquee-track {
  animation: img-marquee 60s linear infinite;
  will-change: transform;
  width: max-content;
}

/* ---------- 키워드 무질서 배치 + 유영 + 호버 확대 ---------- */
/* --rot, --scale, --oy는 각 키워드별 인라인 스타일로 주입 */
.kw-floater {
  --rot: 0deg;
  --scale: 1;
  --oy: 0px;
  transform: translateY(var(--oy)) rotate(var(--rot)) scale(var(--scale));
  animation: kw-float var(--s, 6s) ease-in-out infinite;
  animation-delay: var(--d, 0s);
  will-change: transform;
  transform-origin: center;
  transition: color 0.3s, text-shadow 0.4s;
}
@keyframes kw-float {
  0%, 100% {
    transform: translateY(var(--oy)) translateX(0) rotate(var(--rot)) scale(var(--scale));
  }
  25% {
    transform: translateY(calc(var(--oy) - 10px)) translateX(4px) rotate(calc(var(--rot) + 1deg)) scale(var(--scale));
  }
  50% {
    transform: translateY(calc(var(--oy) + 6px)) translateX(-3px) rotate(calc(var(--rot) - 1.5deg)) scale(var(--scale));
  }
  75% {
    transform: translateY(calc(var(--oy) - 4px)) translateX(-5px) rotate(calc(var(--rot) + 0.5deg)) scale(var(--scale));
  }
}

/* 호버: 유영 멈추고 원래 회전 복원, 중앙 정렬, 확대 + 브랜드 컬러 + 글로우 */
.kw-floater:hover {
  animation-play-state: paused;
  color: #0058FF;
  text-shadow: 0 0 30px rgba(0,88,255,0.5);
  transform: translateY(var(--oy)) rotate(0deg) scale(calc(var(--scale) * 1.12));
  transition: color 0.3s, text-shadow 0.4s, transform 0.35s cubic-bezier(0.34,1.56,0.64,1);
  z-index: 10;
}

/* 모바일: 터치 시에도 동일 효과 */
@media (hover: none) {
  .kw-floater:active {
    animation-play-state: paused;
    color: #0058FF;
    transform: translateY(var(--oy)) rotate(0deg) scale(calc(var(--scale) * 1.1));
  }
}

/* 모바일에서는 무질서도를 절반으로 */
@media (max-width: 767px) {
  .kw-floater {
    --scale: calc(var(--scale, 1) * 0.92 + 0.08);
  }
}

/* ---------- Floating CTA ---------- */
.floating-cta {
  position: fixed; right: 16px; bottom: 16px; z-index: 90;
  opacity: 0; transform: translateY(16px);
  pointer-events: none;
  transition: opacity .45s, transform .45s;
  display: flex; flex-direction: column; gap: 8px;
}
@media (min-width: 768px) { .floating-cta { right: 24px; bottom: 24px; } }
.floating-cta.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; }
.float-btn {
  width: 52px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: transform .25s, background .25s;
  border: 1px solid rgba(15,23,42,0.08);
  background: rgba(255,255,255,0.85);
}
.float-btn:hover { transform: translateY(-3px); background: #fff; }
.float-btn.primary { background: #0058FF; border-color: #0058FF; color: #fff; }
.float-btn.primary:hover { background: #0046CC; }

/* ---------- FAQ accordion ---------- */
.faq-item summary { cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform 0.4s cubic-bezier(0.77,0,0.175,1); }

/* ---------- 헤더 배경 블러 ---------- */
.header-blur {
  backdrop-filter: blur(14px) saturate(180%);
  -webkit-backdrop-filter: blur(14px) saturate(180%);
  background: rgba(255,255,255,0.72);
}

/* ---------- Custom cursor (desktop only) ---------- */
@media (hover: hover) and (pointer: fine) {
  body.has-custom-cursor * { cursor: none !important; }
  .cursor-dot {
    position: fixed; top: 0; left: 0;
    width: 8px; height: 8px; border-radius: 50%;
    background: #0058FF; pointer-events: none; z-index: 999;
    transform: translate(-50%, -50%);
    transition: width .2s, height .2s, background .2s;
    will-change: transform;
  }
  .cursor-dot.is-hover { width: 48px; height: 48px; background: rgba(0,88,255,0.15); }
}

/* ---------- 셀렉트 무시 (이미지) ---------- */
img, svg { user-select: none; -webkit-user-drag: none; }