@charset "UTF-8";
/* ============================================================================
   vibeAI — solution-detail.css
   /solutions/* 5개 페이지(VibeCheck · VibeSpot · VibeTracker-Commerce ·
   VibeTracker-Marketing · Mobility)가 공유하는 레이어. common.css 위에 쌓입니다.
   페이지별로 달라지는 값(히어로 배경색 등)은 각 템플릿의 인라인 --svc-* 변수로.
   ========================================================================= */

/* ----------------------------------------------------------------------------
   1. HERO
   ------------------------------------------------------------------------- */
.svc-hero {
  position: relative;
  overflow: clip;
  padding-top: 124px;
  padding-bottom: 96px;
  background: var(--svc-hero-bg, var(--c-paper-warm));
}

.svc-hero__mesh,
.svc-hero__vector {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

.svc-hero__mesh--1 { top: -25%; left: -47%; width: 112%; }
.svc-hero__mesh--2 { top: -32%; right: -18%; width: 83%; }
.svc-hero__mesh--3 { top: 30%; left: 36%; width: 39%; }
.svc-hero__vector--1 { top: 18%; left: -23%; width: 51%; opacity: .8; }
.svc-hero__vector--2 { top: -14%; right: -5%; width: 80%; opacity: .8; }

/* Figma에서 exportAsync로 뽑은 전체 배경(블롭+그리드+점) —
   레이어를 여러 장 겹치는 대신 이 한 장으로 씁니다 (VibeCheck 이후 페이지).
   1440px 고정폭이었더니 그보다 넓은 뷰포트·섹션에서 여백이 남아 object-fit:cover로 변경. */
.svc-hero__bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.svc-hero__inner {
  position: relative;
  z-index: 1;
  text-align: center;
}

.svc-hero__label {
  text-align: left;
}

.svc-hero__title {
  margin: 24px 0 0;
  font-family: var(--ff-display);
  font-weight: 700;
  font-size: clamp(40px, 5.5vw, 80px);
  line-height: 1.2;
  letter-spacing: -.03em;
}

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

.svc-hero__lede {
  max-width: 640px;
  margin: 32px auto 0;
  font-size: var(--fs-lede);
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
}

.svc-hero__link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding-bottom: 6px;
  border-bottom: 1.5px solid var(--c-ink);
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: var(--fs-lede);
}

.svc-hero__link .btn__arrow { width: 15px; height: 15px; }

.svc-tag {
  position: absolute;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 9px 16px;
  border: 1px solid rgba(14, 14, 15, .08);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, .68);
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: .08em;
  white-space: nowrap;
}

.svc-tag::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--c-accent);
  opacity: .55;
}

.svc-hero__caption {
  position: relative;
  z-index: 1;
  margin-top: 56px;
  font-family: var(--ff-mono);
  font-size: var(--fs-micro);
  letter-spacing: .14em;
}

.svc-hero__caption span { color: var(--c-ink-3); }

@media (max-width: 900px) {
  .svc-hero { padding-top: 88px; padding-bottom: 56px; }
  .svc-hero__label { text-align: center; }
  .svc-hero__label .label { display: flex; justify-content: center; gap: 6px; }
  .svc-tag { display: none; }
}

/* ----------------------------------------------------------------------------
   1b. PHOTO GALLERY (Mobility 페이지: 4장 사진 + 캡션)
   ------------------------------------------------------------------------- */
.svc-gallery {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 56px;
}

.svc-gallery__photo {
  position: relative;
  height: 235px;
  border-radius: var(--r-md);
  overflow: hidden;
}

.svc-gallery__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.svc-gallery__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, .25);
}

.svc-gallery__caption {
  margin-top: 20px;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 24px;
  color: var(--c-line);
}

@media (max-width: 900px) {
  .svc-gallery { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .svc-gallery__caption { font-size: 18px; }
}

/* ----------------------------------------------------------------------------
   2. SOLVE-IT 3-COLUMN CARD (섹션 03에 끼워 넣는 요약 카드)
   ------------------------------------------------------------------------- */
.svc-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 56px;
  padding: 32px;
  border-radius: var(--r-md);
  background: var(--c-paper-warm);
}

.svc-card {
  position: relative;
  padding: 0 32px;
}

.svc-card:first-child { padding-left: 0; }
.svc-card:last-child { padding-right: 0; }

.svc-card + .svc-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 1px;
  background: var(--c-line);
}

.svc-card__icon { display: block; width: 44px; height: 44px; }

.svc-card__title {
  margin: 32px 0 0;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.35;
  letter-spacing: -.02em;
}

.svc-card__desc {
  margin: 16px 0 0;
  font-size: 14px;
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
}

@media (max-width: 900px) {
  .svc-cards { grid-template-columns: 1fr; row-gap: 32px; padding: 24px; }
  .svc-card { padding: 0; }
  .svc-card + .svc-card { padding-top: 32px; }
  .svc-card + .svc-card::before { left: 0; right: 0; top: 0; bottom: auto; width: auto; height: 1px; }
}

/* ----------------------------------------------------------------------------
   3. KEY FEATURES — 번호가 붙은 행, 짝수 행은 이미지를 왼쪽으로 뒤집습니다
   ------------------------------------------------------------------------- */
.svc-features { margin-top: 64px; }

.svc-feature {
  display: grid;
  grid-template-columns: var(--col-label) minmax(0, 1fr) auto;
  column-gap: var(--col-gap);
  align-items: center;
  padding-block: 56px;
  border-bottom: 1px solid var(--c-line);
}

.svc-features .svc-feature:first-child { padding-top: 0; }
.svc-features .svc-feature:last-child { border-bottom: 0; padding-bottom: 0; }

.svc-feature__no {
  grid-column: 1;
  align-self: start;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 48px;
  letter-spacing: -.05em;
  color: var(--c-line);
}

.svc-feature__body { grid-column: 2; }
.svc-feature__media { grid-column: 3; }

.svc-feature__eyebrow {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--ff-mono);
  font-size: 16px;
  letter-spacing: .02em;
  color: var(--c-ink-3);
}

.svc-feature__eyebrow::before {
  content: "";
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--c-accent);
  opacity: .55;
}

.svc-feature__title {
  margin: 20px 0 0;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.42;
  letter-spacing: -.025em;
}

.svc-feature__desc {
  max-width: 400px;
  margin: 32px 0 0;
  font-size: 15px;
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
}

.svc-feature__media {
  position: relative;
  width: 528px;
  max-width: 44vw;
}

.svc-feature__media::before {
  content: "";
  position: absolute;
  inset: 20px -20px -20px 20px;
  border-radius: var(--r-md);
  background: var(--c-paper-warm);
  z-index: 0;
}

.svc-feature__media img {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: 338px;
  border-radius: var(--r-md);
  object-fit: cover;
  box-shadow: 4px 4px 8px 0 rgba(235, 230, 222, .7);
}

@media (max-width: 900px) {
  .svc-feature {
    grid-template-columns: 1fr;
    row-gap: 24px;
    padding-block: 40px;
  }
  .svc-feature__no,
  .svc-feature__body,
  .svc-feature__media { grid-column: 1; }
  .svc-feature__media { width: 100%; max-width: none; }
  .svc-feature__media img { height: auto; aspect-ratio: 528 / 338; }
  .svc-feature__title { font-size: 26px; }
}

/* ----------------------------------------------------------------------------
   4. PRODUCT SCREEN — 배경 블롭 + 브라우저 프레임 스크린샷
   ------------------------------------------------------------------------- */
.svc-screen {
  position: relative;
  overflow: hidden;
  /* Figma 섹션 실측 높이(444px) — 프레임을 이 안에서 하단 고정합니다 */
  min-height: 444px;
  background: var(--c-paper);
}

/* Figma에서 내보낸 배경 레이어(블롭 2개 + 그리드) —
   1440px 고정폭이었더니 여백이 남아 object-fit:cover로 변경 (히어로와 동일 이슈) */
.svc-screen__bg {
  position: absolute;
  z-index: 0;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
}

.svc-screen__grid {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  min-height: 444px;
}

.svc-screen__text { max-width: 460px; }

.svc-screen__title {
  margin: 20px 0 0;
  font-family: var(--ff-body);
  font-weight: 700;
  font-size: var(--fs-h2);
  line-height: 1.42;
  letter-spacing: -.025em;
}

.svc-screen__desc {
  max-width: 400px;
  margin: 32px 0 0;
  font-size: 15px;
  line-height: var(--lh-loose);
  color: var(--c-ink-2);
}

.svc-screen__frame {
  position: absolute;
  z-index: 1;
  right: 6.11%; /* Figma: (1440 − 732 − 620) / 1440 */
  bottom: 0;
  width: 43.06%; /* Figma: 620 / 1440 */
  max-width: 620px;
  min-width: 320px;
  /* Figma 크롭 비율(620×304) — 원본 이미지 비율이 아니라 이 비율로 잘라 보여줍니다 */
  aspect-ratio: 620 / 304;
  border: 7px solid rgba(14, 14, 15, .8);
  border-bottom: 0;
  border-radius: 20px 20px 0 0;
  overflow: hidden;
}

.svc-screen__frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

@media (max-width: 900px) {
  .svc-screen { min-height: 0; }
  .svc-screen__grid {
    display: block;
    min-height: 0;
    padding-block: 56px 32px;
  }
  .svc-screen__text { max-width: none; }
  .svc-screen__frame {
    /* static이면 z-index가 먹지 않아 절대배치 배경(z-index:0)이 위로 뜹니다.
       데스크톱용 right/bottom 오프셋은 반드시 auto로 풀어야 합니다 —
       relative에서는 absolute와 달리 right가 위치를 밀어내는 오프셋으로 작동합니다. */
    position: relative;
    top: auto;
    right: auto;
    bottom: auto;
    left: auto;
    z-index: 1;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-top: 32px;
  }
  .svc-screen__title { font-size: 26px; }
}

/* ----------------------------------------------------------------------------
   5. CTA — 어두운 섹션, 홈 CTA와 동일한 뼈대 + 워드마크
   ------------------------------------------------------------------------- */
.svc-cta__inner {
  display: grid;
  grid-template-columns: var(--col-label) minmax(0, 1fr) auto;
  column-gap: var(--col-gap);
  align-items: end;
}

.svc-cta__logo {
  grid-column: 2;
  font-family: var(--ff-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -.03em;
}

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

/* VibeTracker 계열 페이지의 브랜드 로고락업(아이콘+워드마크+"for X") — 다른 솔루션
   페이지는 그냥 "vibeAI" 텍스트를 쓰므로 --brand 수정자로만 켭니다 */
.svc-cta__logo--brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ff-body);
  font-weight: 300;
}

.svc-cta__logo-icon { height: 20px; width: auto; display: block; }
.svc-cta__logo-word { height: 16px; width: auto; display: block; }
.svc-cta__logo-tag { font-size: 20px; color: rgba(255, 255, 255, .8); }

.svc-cta__title {
  grid-column: 2;
  margin: 24px 0 0;
  font-family: var(--ff-body);
  font-weight: 800;
  font-size: 54px;
  line-height: 1.18;
  letter-spacing: -.04em;
  max-width: 680px;
}

.svc-cta__text {
  grid-column: 2;
  margin: 24px 0 0;
  max-width: 430px;
  font-size: 16px;
  line-height: var(--lh-loose);
  color: rgba(255, 255, 255, .62);
}

.svc-cta__btn { grid-column: 3; grid-row: 1 / -1; align-self: end; }

@media (max-width: 900px) {
  .svc-cta__inner { grid-template-columns: 1fr; row-gap: 24px; }
  .svc-cta__logo, .svc-cta__title, .svc-cta__text, .svc-cta__btn { grid-column: 1; }
  .svc-cta__title { font-size: 32px; }
}