@charset "UTF-8";
/* ============================================================================
   vibeAI — common.css
   모든 페이지가 공유하는 레이어: 리셋 · 토큰 · 타이포 · 버튼 · 내비 · 푸터 · 티커
   페이지 전용 스타일은 각 페이지의 CSS(예: main.css)에 작성합니다.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   1. RESET
   ------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body,
h1, h2, h3, h4, h5, h6,
p, figure, blockquote, dl, dd { margin: 0; }

ul[class],
ol[class] {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
picture,
svg,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select,
textarea {
  font: inherit;
  color: inherit;
}

button {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

/* 키보드 사용자에게만 포커스 링을 보여줍니다. */
:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
}

/* ----------------------------------------------------------------------------
   2. DESIGN TOKENS
   Figma 파일에서 실제 사용 중인 값 기준. 근사값은 아래 스케일로 통일했습니다.
   ------------------------------------------------------------------------- */
:root {
  /* --- color : 7종 -------------------------------------------------------- */
  --c-ink:        #0e0e0f;   /* 본문 최고 대비 · 다크 섹션 배경 */
  --c-ink-2:      #5f5f66;   /* 본문 보조 */
  --c-ink-3:      #a3a2a8;   /* 라벨 · 비활성 */
  --c-line:       #cfccc6;   /* 구분선 · 워터마크 숫자 */
  --c-paper:      #ffffff;   /* 기본 배경 */
  --c-paper-warm: #f4f1ec;   /* 강조 섹션 배경 */
  --c-accent:     #e63a0f;   /* 브랜드 레드 */

  /* --- type scale --------------------------------------------------------- */
  --fs-micro:   11px;   /* 모노 라벨 */
  --fs-caption: 12px;   /* 모노 캡션 · 푸터 카테고리 */
  --fs-small:   13px;   /* 서비스 설명 */
  --fs-link:    14px;   /* 푸터 링크 */
  --fs-body:    15px;   /* 본문 · 티커 */
  --fs-body-lg: 16px;   /* CTA 본문 */
  --fs-lede:    17px;   /* 히어로 리드 */
  --fs-h4:      24px;   /* 프로세스 제목 */
  --fs-h3:      30px;   /* 소제목 */
  --fs-h2:      40px;   /* 섹션 제목 */
  --fs-h1:      46px;   /* 서비스명 */
  --fs-num:     48px;   /* 프로세스 번호 */
  --fs-display: 62px;   /* CTA 디스플레이 */
  --fs-stat:    76px;   /* 지표 숫자 */
  --fs-hero:   108px;   /* 히어로 디스플레이 */

  /* --- line height -------------------------------------------------------- */
  --lh-tight: 1.04;
  --lh-head:  1.2;
  --lh-snug:  1.42;
  --lh-body:  1.6;
  --lh-loose: 1.8;

  /* --- font family -------------------------------------------------------- */
  /* CDN이 차단된 환경에서도 무게감이 비슷하게 떨어지도록 폴백을 둡니다. */
  --ff-display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --ff-body: "Pretendard", -apple-system, BlinkMacSystemFont,
             "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", sans-serif;
  --ff-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo,
             Consolas, monospace;

  /* --- layout ------------------------------------------------------------- */
  --gutter:  48px;   /* 좌우 여백 */
  --maxw:  1440px;   /* 아트보드 폭 */
  --col-label: 168px;  /* 좌측 라벨 컬럼 */
  --col-gap:    40px;  /* 라벨 ↔ 본문 간격 */
  --sec-y:     124px;  /* 섹션 상하 여백 */

  /* --- radius : 4종 ------------------------------------------------------- */
  --r-sm:    6px;
  --r-md:   12px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* --- motion ------------------------------------------------------------- */
  --ease: cubic-bezier(.16, 1, .3, 1);
  --dur:  .5s;
}

@media (max-width: 900px) {
  :root {
    --gutter: 24px;
    --sec-y:  72px;
    --col-label: 0px;
    --col-gap:   0px;
  }
}

/* ----------------------------------------------------------------------------
   3. BASE
   ------------------------------------------------------------------------- */
body {
  background: var(--c-paper);
  color: var(--c-ink);
  font-family: var(--ff-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* 한글은 단어 단위로 끊어야 읽기 좋습니다. */
:lang(ko),
.kr { word-break: keep-all; }

h1, h2, h3, h4 {
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: -.02em;
}

/* ----------------------------------------------------------------------------
   4. LAYOUT
   ------------------------------------------------------------------------- */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section { padding-block: var(--sec-y); }
.section--warm { background: var(--c-paper-warm); }
.section--dark { background: var(--c-ink); color: var(--c-paper); }

.rule {
  height: 1px;
  border: 0;
  margin: 0;
  background: var(--c-line);
}

/* 라벨 컬럼 + 본문 2단 그리드. 섹션 헤더의 공통 골격입니다. */
.grid-label {
  display: grid;
  grid-template-columns: var(--col-label) minmax(0, 1fr);
  column-gap: var(--col-gap);
  align-items: start;
}

@media (max-width: 900px) {
  .grid-label {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
}

/* ----------------------------------------------------------------------------
   5. TYPOGRAPHY UTILITIES
   ------------------------------------------------------------------------- */
.label {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  line-height: 1.5;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.label__no { display: block; color: var(--c-ink); }

.eyebrow {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.heading {
  font-family: var(--ff-body);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: var(--lh-head);
  letter-spacing: -.025em;
}

.heading--sm { font-size: var(--fs-h3); }
.heading .accent { color: var(--c-accent); }

.lede {
  font-size: var(--fs-lede);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
}

.body-text {
  font-size: var(--fs-body);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
}

@media (max-width: 900px) {
  .heading    { font-size: 28px; }
  .heading--sm{ font-size: 24px; }
  .lede       { font-size: 16px; }
}

/* ----------------------------------------------------------------------------
   6. BUTTONS & LINKS
   ------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  transition: color var(--dur) var(--ease),
              background var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

.btn__arrow {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  transition: transform var(--dur) var(--ease);
}

.btn:hover .btn__arrow { transform: translate(2px, -2px); }

/* 밑줄이 따라 그어지는 텍스트 링크 */
.btn--text {
  position: relative;
  font-size: var(--fs-lede);
  padding-bottom: 4px;
}

.btn--text::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transition: right var(--dur) var(--ease);
}

.btn--text:hover::after { right: 0; }
.btn--muted { color: var(--c-ink-2); font-weight: 600; }
.btn--muted:hover { color: var(--c-ink); }

/* 알약형 솔리드 버튼 */
.btn--pill {
  padding: 14px 24px;
  border-radius: var(--r-pill);
  background: var(--c-paper);
  color: var(--c-ink);
  font-size: var(--fs-body-lg);
}

.btn--pill:hover { transform: translateY(-2px); }

/* ----------------------------------------------------------------------------
   7. NAV
   ------------------------------------------------------------------------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 68px;
  background: var(--c-paper);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease);
}

.nav.is-stuck { border-bottom-color: var(--c-line); }

.nav__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.nav__logo { display: flex; align-items: center; }

.nav__logo img {
  display: block;
  height: 21px;
  width: auto;
}

.nav__menu {
  display: flex;
  gap: 34px;
}

.nav__link {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink-2);
  transition: color var(--dur) var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="page"] { color: var(--c-ink); }

.nav__cta { color: var(--c-ink); }

/* 모바일 드롭다운 안에 들어가는 Contact 버튼 사본 — 데스크톱에서는 숨김 */
.nav__cta--menu { display: none; }

.nav__toggle {
  display: none;
  width: 40px;
  height: 40px;
  place-items: center;
}

.nav__toggle span {
  position: relative;
  display: block;
  width: 18px;
  height: 1.5px;
  background: var(--c-ink);
}

.nav__toggle span::before,
.nav__toggle span::after {
  content: "";
  position: absolute;
  left: 0;
  width: 18px;
  height: 1.5px;
  background: var(--c-ink);
  transition: transform var(--dur) var(--ease);
}

.nav__toggle span::before { top: -6px; }
.nav__toggle span::after  { top: 6px; }

.nav.is-open .nav__toggle span { background: transparent; }
.nav.is-open .nav__toggle span::before { transform: translateY(6px) rotate(45deg); }
.nav.is-open .nav__toggle span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 900px) {
  .nav__toggle { display: grid; }

  .nav__menu {
    position: fixed;
    inset: 68px 0 auto 0;
    flex-direction: column;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--c-paper);
    border-bottom: 1px solid var(--c-line);
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease),
                transform var(--dur) var(--ease);
    /* 가로로 짧은 화면(가로모드 폰, 펼친 폴더블 기기)에서 메뉴가
       뷰포트보다 길어질 때 잘리지 않도록 자체 스크롤을 둡니다. */
    max-height: calc(100dvh - 68px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  .nav.is-open .nav__menu {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }

  .nav__link {
    padding: 16px 0;
    font-size: 13px;
    border-bottom: 1px solid var(--c-line);
  }

  /* Contact: 헤더 바 사본은 숨기고, 드롭다운 안 사본을 버튼으로 보여줍니다. */
  .nav__cta--bar { display: none; }

  .nav__cta--menu {
    display: flex;
    justify-content: center;
    margin-top: 20px;
    padding: 16px 0;
    border: 0;
    border-radius: var(--r-pill);
    background: var(--c-ink);
    color: var(--c-paper);
    font-weight: 700;
  }
}

/* ----------------------------------------------------------------------------
   8. TICKER (마퀴)
   ------------------------------------------------------------------------- */
.ticker {
  overflow: hidden;
  border-block: 1px solid var(--c-line);
}

.ticker + .ticker { border-top: 0; }

.ticker__track {
  display: flex;
  width: max-content;
  animation: ticker-scroll var(--ticker-dur, 44s) linear infinite;
  /* 화면에 보이기 전까지는 멈춰 둡니다 — 그래야 스크롤해서 처음 보이는
     순간 항상 맨 처음(0%)부터 흐르고, 중간부터 잘려 보이지 않습니다.
     JS가 교차 관찰로 뷰포트에 들어오는 순간 is-running을 붙입니다. */
  animation-play-state: paused;
}

.ticker__track.is-running { animation-play-state: running; }

.ticker--reverse .ticker__track { animation-direction: reverse; }
.ticker:hover .ticker__track { animation-play-state: paused; }

.ticker__item {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 16px 22px;
  white-space: nowrap;
  font-family: var(--ff-display);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--c-ink-2);
}

.ticker__item::after {
  content: "";
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--c-line);
}

@keyframes ticker-scroll {
  from { transform: translate3d(0, 0, 0); }
  /* 기본은 2벌(-50%) 기준이지만, 한 벌 폭이 화면보다 좁은 티커는
     JS가 --ticker-shift를 벌 수에 맞게 다시 계산해 넣습니다. */
  to   { transform: translate3d(var(--ticker-shift, -50%), 0, 0); }
}

/* ----------------------------------------------------------------------------
   9. FOOTER
   ------------------------------------------------------------------------- */
.footer { padding-top: var(--sec-y); }

.footer__cols {
  display: grid;
  grid-template-columns: var(--col-label) repeat(4, minmax(0, 1fr));
  column-gap: var(--col-gap);
}

.footer__addr {
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  line-height: 1.7;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.footer__cat {
  margin-bottom: 18px;
  font-family: var(--ff-mono);
  font-size: var(--fs-caption);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.footer__link {
  display: block;
  padding: 6px 0;
  font-size: var(--fs-link);
  font-weight: 500;
  color: var(--c-ink-2);
  transition: color var(--dur) var(--ease);
}

.footer__link:hover { color: var(--c-ink); }

/* 푸터 하단을 가득 채우는 워드마크 — 실제 로고 SVG를 폭 100%로 채움 */
.footer__wordmark {
  margin-top: 96px;
  user-select: none;
}

.footer__wordmark img {
  display: block;
  width: 100%;
  height: auto;
}

.footer__legal {
  padding: 28px 0 40px;
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--c-ink-3);
}

@media (max-width: 900px) {
  .footer__cols {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 36px;
  }
  .footer__addr { grid-column: 1 / -1; }
  .footer__wordmark { margin-top: 56px; }
}

/* ----------------------------------------------------------------------------
   10. SCROLL REVEAL
   JS가 뷰포트 진입 시 .is-in 을 붙입니다. JS가 꺼져 있어도
   콘텐츠가 보이도록 .no-js 에서는 효과를 해제합니다.
   ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 1.2s var(--ease), transform 1.2s var(--ease);
  transition-delay: calc(var(--i, 0) * 110ms);
}

.reveal.is-in {
  opacity: 1;
  transform: none;
}

.no-js .reveal {
  opacity: 1;
  transform: none;
}

/* ----------------------------------------------------------------------------
   11. ACCESSIBILITY
   ------------------------------------------------------------------------- */
.visually-hidden {
  position: absolute !important;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--gutter);
  z-index: 100;
  padding: 12px 20px;
  background: var(--c-ink);
  color: var(--c-paper);
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: top var(--dur) var(--ease);
}

.skip-link:focus { top: 0; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  .reveal {
    opacity: 1;
    transform: none;
    transition: none;
  }

  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}

/* ----------------------------------------------------------------------------
   12. NAV DROPDOWN
   Solutions 항목의 전폭 드롭다운. 왼쪽 미리보기 문구는 항목에 마우스를
   올릴 때마다 바뀝니다.
   ------------------------------------------------------------------------- */
/* line-height:0 — 본문 기본 line-height(24px)를 물려받아 버튼(17.6px)보다
   줄 높이가 커지는 것을 막습니다. 다른 nav__link 항목과 높이를 맞추기 위함. */
.nav__item { position: relative; line-height: 0; }

.nav__link--drop {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  line-height: var(--lh-body); /* .nav__item의 line-height:0 상속을 끊어 텍스트 높이를 되살립니다 */
  letter-spacing: .06em;
  text-transform: uppercase;
}

.nav__caret {
  width: 9px;
  height: 6px;
  transition: transform var(--dur) var(--ease);
}

.nav__item.is-open .nav__caret { transform: rotate(180deg); }
.nav__item.is-open .nav__link--drop { color: var(--c-ink); }

.drop {
  /* fixed + 고정 top(헤더 높이) — .nav__item 안으로 옮겨도(모바일 아코디언 배치)
     데스크톱 전폭 패널 위치는 뷰포트 기준이라 그대로 유지됩니다. */
  position: fixed;
  top: 68px;
  left: 0;
  right: 0;
  z-index: 49;
  background: var(--c-paper);
  border-top: 1px solid var(--c-line);
  border-bottom: 1px solid var(--c-line);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity var(--dur) var(--ease),
              transform var(--dur) var(--ease);
  /* 가로로 짧은 화면(가로모드 폰, 펼친 폴더블 기기)에서 패널이 뷰포트
     아래로 잘리지 않도록 자체 스크롤을 둡니다. fixed라 페이지 스크롤로는
     닿을 수 없어서 꼭 필요합니다. */
  max-height: calc(100dvh - 68px);
  overflow-y: auto;
}

.drop.is-open {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.drop__inner {
  display: grid;
  grid-template-columns: 420px 220px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  column-gap: 40px;
  padding-block: 44px 64px;
  min-height: 409px;
}

.drop__preview {
  grid-column: 1;
  grid-row: 1 / -1;
  font-family: var(--ff-display);
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.drop__preview-text {
  display: inline-block;
  transition: opacity .28s var(--ease), transform .28s var(--ease);
}

.drop__preview-text.is-swapping {
  opacity: 0;
  transform: translateY(-6px);
}

.drop__preview .accent { color: var(--c-accent); }

/* Services / Physical AI 두 그룹이 같은 칼럼에 위아래로 놓입니다. */
.drop__group { grid-column: 2 / 4; display: contents; }

.drop__cat {
  grid-column: 2;
  font-family: var(--ff-mono);
  font-size: var(--fs-body-lg);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-ink-3);
}

.drop__cat span { color: var(--c-line); }

.drop__list {
  grid-column: 3;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.drop__group--last .drop__cat,
.drop__group--last .drop__list { align-self: end; }

.drop__link {
  position: relative;
  display: inline-block;
  padding-left: 26px;
  font-family: var(--ff-mono);
  font-size: var(--fs-body-lg);
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c-ink-3);
  transition: color var(--dur) var(--ease),
              transform var(--dur) var(--ease);
}

/* 활성 항목 앞의 붉은 점 */
.drop__link::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  opacity: 0;
  transition: opacity var(--dur) var(--ease);
}

.drop__link:hover,
.drop__link:focus-visible,
.drop__link.is-active {
  color: var(--c-ink);
  font-weight: 500;
  transform: translateX(8px);
}

.drop__link:hover::before,
.drop__link:focus-visible::before,
.drop__link.is-active::before { opacity: 1; }

@media (max-width: 900px) {
  /* 모바일에서는 전폭 패널 대신 목록을 그대로 펼칩니다. */
  .drop {
    position: static;
    border: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    display: none;
    /* 모바일에서는 상위 .nav__menu가 스크롤을 전담합니다(중첩 스크롤 방지). */
    max-height: none;
    overflow-y: visible;
    /* 펼쳐진 목록을 흰 배경과 구분하기 위한 옅은 회색 */
    background: #fafafa;
  }

  .drop.is-open { display: block; }

  .drop__inner {
    grid-template-columns: 1fr;
    row-gap: 18px;
    padding-block: 24px;
    min-height: 0;
  }

  .drop__preview { display: none; }

  /* grid-column: 2/4 가 데스크톱 3열 그리드 기준이라, 모바일 1열에서는
     암시적 열을 만들어 오른쪽으로 밀려납니다. 1열로 되돌립니다. */
  .drop__group { display: block; grid-column: 1; }
  .drop__group--last { margin-top: 8px; }

  .drop__cat { margin-bottom: 12px; font-size: var(--fs-small); }
  .drop__list { gap: 14px; margin-bottom: 24px; }
  .drop__group--last .drop__list { margin-bottom: 0; }
  .drop__link { font-size: var(--fs-link); }

  /* Solutions 트리거를 다른 nav__link 항목과 같은 폭·밑줄로 맞춥니다. */
  .nav__link--drop {
    display: flex;
    width: 100%;
    justify-content: space-between;
    font-size: 13px;
  }
}