* { font-family: 'Pretendard Variable', 'Pretendard', system-ui, sans-serif; }
body { word-break: keep-all; }

/* ── Light corporate design system ─────────────────────────── */

/* Card */
.card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 1rem;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease;
}
.card:hover {
  border-color: #b5ecff;
  box-shadow: 0 12px 32px rgba(13, 82, 143, 0.10);
  transform: translateY(-3px);
}

/* Icon tile */
.icon-tile {
  background: #edfaff;
  border: 1px solid #d6f3ff;
  color: #0178e1;
  transition: all 0.25s ease;
}
.card:hover .icon-tile {
  background: #d6f3ff;
  border-color: #b5ecff;
}

/* Eyebrow section label */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #0178e1;
  text-transform: uppercase;
}
.eyebrow::before {
  content: '';
  width: 1.75rem;
  height: 2px;
  background: #0694f5;
}

/* Primary button (+ 호버 샤인 스윕) */
.btn-primary {
  position: relative;
  overflow: hidden;
  background: #0178e1;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(1, 120, 225, 0.25);
  transition: all 0.25s ease;
}
.btn-primary::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: -80%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(255,255,255,0.35), transparent);
  transform: skewX(-20deg);
  transition: left 0.55s ease;
}
.btn-primary:hover::after { left: 130%; }
.btn-primary:hover {
  background: #0860b6;
  box-shadow: 0 6px 20px rgba(1, 120, 225, 0.35);
  transform: translateY(-1px);
}

/* Outline button */
.btn-outline {
  background: #ffffff;
  color: #334155;
  border: 1px solid #cbd5e1;
  transition: all 0.25s ease;
}
.btn-outline:hover {
  border-color: #0694f5;
  color: #0178e1;
  background: #f0f9ff;
}

/* Scroll reveal (+ 방향 변형) */
.reveal        { opacity: 0; transform: translateY(28px);  transition: opacity 0.7s cubic-bezier(0.22,1,0.36,1), transform 0.7s cubic-bezier(0.22,1,0.36,1); }
.reveal-left   { opacity: 0; transform: translateX(-40px); transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.reveal-right  { opacity: 0; transform: translateX(40px);  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.reveal-scale  { opacity: 0; transform: scale(0.94);       transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1), transform 0.8s cubic-bezier(0.22,1,0.36,1); }
.reveal.visible, .reveal-left.visible, .reveal-right.visible, .reveal-scale.visible { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }

/* 이미지 케네번즈(줌) 리빌 */
.img-reveal { overflow: hidden; }
.img-reveal img { transform: scale(1.12); transition: transform 1.5s cubic-bezier(0.22,1,0.36,1); }
.img-reveal.visible img { transform: scale(1); }

/* 키워드 마퀴 (무한 흐름 띠) */
.marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { display: flex; align-items: center; gap: 3.5rem; width: max-content; animation: marquee 36s linear infinite; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* 부유하는 장식 블롭 */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(60px);
  pointer-events: none;
  animation: floaty 9s ease-in-out infinite;
}
@keyframes floaty {
  0%, 100% { transform: translateY(0) }
  50%      { transform: translateY(-18px) }
}

/* 히어로 플로팅 카드 */
.float-card {
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #e2e8f0;
  box-shadow: 0 20px 50px rgba(13, 82, 143, 0.16);
  animation: floaty 7s ease-in-out infinite;
}

/* ── 에이전시 모션 유틸 ─────────────────────────────────────── */

/* 워드 로테이터 — 히어로 헤드라인 키워드 순환 (site.js) */
.word-rotator { display: inline-block; }
.word-rotator .wr-word { display: inline-block; will-change: transform, opacity; }
.wr-out { animation: wrOut 0.38s cubic-bezier(0.55, 0, 0.55, 0.2) forwards; }
.wr-in  { animation: wrIn  0.42s cubic-bezier(0.22, 1, 0.36, 1) forwards; }
@keyframes wrOut { to   { opacity: 0; transform: translateY(-60%) skewY(-4deg); } }
@keyframes wrIn  { from { opacity: 0; transform: translateY(60%) skewY(4deg); } to { opacity: 1; transform: none; } }

/* 인터랙티브 서비스 로우 (index) */
.service-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 2rem 0.75rem;
  border-top: 1px solid #e2e8f0;
  transition: background 0.3s ease, padding 0.3s ease;
}
.service-row:last-of-type { border-bottom: 1px solid #e2e8f0; }
.service-row:hover { background: #f0f9ff; padding-left: 2rem; }
.row-num { font-size: 0.9rem; font-weight: 800; color: #94a3b8; letter-spacing: 0.1em; transition: color 0.3s; }
.service-row:hover .row-num { color: #0178e1; }
.row-thumb {
  position: absolute;
  right: 7rem; top: 50%;
  width: 11rem; height: 7rem;
  object-fit: cover;
  border-radius: 0.9rem;
  opacity: 0;
  transform: translateY(-50%) scale(0.85) rotate(4deg);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 20px 40px rgba(13, 82, 143, 0.22);
  pointer-events: none;
  z-index: 5;
}
.service-row:hover .row-thumb { opacity: 1; transform: translateY(-50%) scale(1) rotate(0deg); }
.row-arrow { margin-left: auto; color: #cbd5e1; transition: color 0.3s, transform 0.3s; }
.service-row:hover .row-arrow { color: #0178e1; transform: translateX(8px); }

/* 아웃라인 타이포 (마퀴 2열) */
.text-outline {
  color: transparent;
  -webkit-text-stroke: 1.5px #cbd5e1;
}
.marquee-reverse .marquee-track { animation-direction: reverse; }

/* 프로세스 커넥터 라인 — 보이는 순간 좌→우로 그려짐 */
.process-line {
  position: absolute;
  left: 3%; right: 3%; top: 3.1rem;
  height: 2px;
  background: #e2e8f0;
  overflow: hidden;
}
.process-line::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0694f5, #48ceff);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.6s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}
.process-line.visible::after { transform: scaleX(1); }

/* 카드 3D 틸트 (site.js가 transform 제어) */
.tilt { transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), border-color 0.25s ease, box-shadow 0.25s ease; transform-style: preserve-3d; }
.tilt:hover { box-shadow: 0 18px 44px rgba(13, 82, 143, 0.14); border-color: #b5ecff; }

/* 기능 타일 */
.feature-tile { transition: transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease; }
.feature-tile:hover { transform: translateY(-5px); border-color: #83e2ff; box-shadow: 0 14px 30px rgba(13,82,143,0.12); }
.feature-tile:hover iconify-icon { animation: iconBounce 0.5s cubic-bezier(0.34,1.56,0.64,1); }
@keyframes iconBounce { 0% { transform: scale(1); } 50% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* 스크롤 프로그레스 바 (site.js가 생성/제어) */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #0178e1, #48ceff);
  z-index: 90;
  pointer-events: none;
}

/* 백투탑 버튼 (site.js가 생성) */
#to-top {
  position: fixed;
  right: 1.5rem; bottom: 1.5rem;
  width: 2.9rem; height: 2.9rem;
  border-radius: 9999px;
  display: flex; align-items: center; justify-content: center;
  background: #0178e1; color: #fff;
  box-shadow: 0 10px 26px rgba(1,120,225,0.35);
  opacity: 0; pointer-events: none;
  transform: translateY(10px);
  transition: opacity 0.3s, transform 0.3s, background 0.2s;
  z-index: 80;
  cursor: pointer;
  border: none;
}
#to-top.show { opacity: 1; pointer-events: auto; transform: translateY(0); }
#to-top:hover { background: #0860b6; }

/* 탄산 키워드 칩 — 기포 버스트와 함께 '뽁' 생성 (assets/bubbles.js가 타이밍 제어) */
.bubble-chip {
  opacity: 0;
  transform: scale(0.2) translateY(26px);
  background: rgba(255,255,255,0.94);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid #d6f3ff;
  box-shadow: 0 16px 40px rgba(13, 82, 143, 0.15);
  will-change: transform, opacity;
}
.bubble-chip.chip-pop {
  animation:
    chipPop 0.65s cubic-bezier(0.34, 1.56, 0.64, 1) forwards,
    chipFloat 6s ease-in-out 0.7s infinite;
}
@keyframes chipPop {
  0%   { opacity: 0; transform: scale(0.2) translateY(26px); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
@keyframes chipFloat {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-9px); }
}

/* 모션 최소화 환경 배려 */
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right, .reveal-scale, .img-reveal img { transition: none; opacity: 1; transform: none; }
  .marquee-track, .blob, .float-card { animation: none; }
  .bubble-chip { opacity: 1; transform: none; }
  .bubble-chip.chip-pop { animation: none; }
  .wr-out, .wr-in { animation: none; }
  .process-line::after { transition: none; transform: scaleX(1); }
  .btn-primary::after { display: none; }
}

/* Navbar (solid white, 스크롤 시 그림자 + 높이 축소) */
#navbar { transition: box-shadow 0.25s ease; }
#navbar.scrolled { box-shadow: 0 2px 16px rgba(15, 23, 42, 0.08); }
.nav-inner { height: 5rem; transition: height 0.3s ease; }
.nav-bubbles { opacity: 0; transition: opacity 0.6s ease; }
#navbar.deep .nav-bubbles,
#navbar.menu-open .nav-bubbles { opacity: 1; }
#navbar.scrolled .nav-inner { height: 4rem; }
#navbar.scrolled .nav-link > span { margin-bottom: 0; height: 0; opacity: 0; }
.nav-link > span { transition: opacity 0.25s ease, height 0.25s ease, margin 0.25s ease; height: 10px; overflow: hidden; }

/* 메뉴 링크 — 호버 시 왼쪽에서 자라나는 언더라인 */
.nav-link {
  position: relative;
  font-size: 15px;
  font-weight: 700;
  color: #334155;
  padding: 0.3rem 0;
  transition: color 0.25s ease;
}
.nav-link::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 2px;
  background: #0178e1;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.nav-link:hover { color: #0178e1; }
.nav-link:hover::after { transform: scaleX(1); transform-origin: left; }
.nav-link.active { color: #0178e1; }
.nav-link.active::after { transform: scaleX(1); }

/* Mobile menu — 열릴 때 항목이 순차 등장 */
#mobile-menu { transition: all 0.3s cubic-bezier(0.22,1,0.36,1); }
#mobile-menu.flex .mobile-item { animation: navItemIn 0.35s cubic-bezier(0.22,1,0.36,1) both; }
#mobile-menu.flex .mobile-item:nth-child(1) { animation-delay: 0.04s; }
#mobile-menu.flex .mobile-item:nth-child(2) { animation-delay: 0.09s; }
#mobile-menu.flex .mobile-item:nth-child(3) { animation-delay: 0.14s; }
#mobile-menu.flex .mobile-item:nth-child(4) { animation-delay: 0.19s; }
#mobile-menu.flex .mobile-item:nth-child(5) { animation-delay: 0.24s; }
@keyframes navItemIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* Hero soft background */
.hero-bg {
  background:
    radial-gradient(60% 50% at 85% 10%, rgba(30,178,255,0.10) 0%, transparent 70%),
    linear-gradient(180deg, #f0f9ff 0%, #ffffff 100%);
}

/* Number badge for process steps */
.step-num {
  background: #edfaff;
  border: 1px solid #b5ecff;
  color: #0178e1;
  font-variant-numeric: tabular-nums;
}

/* Stats band number */
.stat-num { font-variant-numeric: tabular-nums; }

/* Timeline */
.timeline-line { background: linear-gradient(180deg, #48ceff, #d6f3ff); }

/* Scrollbar (light) */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; }
::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

html { scroll-behavior: smooth; }
@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }