@charset "UTF-8";

/* ======================================================
   HERO
   ====================================================== */
.v2_hero {
  position: relative;
  min-height: 832px;
  padding-top: 80px;
  overflow: hidden;
  background: var(--bg);
}

/* dashboard collage background behind hero */
.v2_hero_bg {
  position: absolute;
  top: 80px;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: var(--bg)
    url("../../../../assets/image/page/v2/background_1.svg") no-repeat center top;
  background-size: cover;
}
.v2_hero_bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(24, 24, 24, 0.3) 50%,
    rgba(24, 24, 24, 0.7) 80%,
    var(--bg) 100%
  );
}

.v2_hero_inner {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  /* 우측 패딩에 플로팅 메뉴(우측 24px + 폭 72px) 공간을 확보해 폰 목업과 겹치지 않게 함 */
  padding: 42px calc(var(--side) + 90px) 0 var(--side);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  min-height: 600px;
}

.v2_hero_copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 700px;
}
.v2_hero_badge {
  display: inline-flex;
  align-items: center;
  background: var(--brand-soft);
  color: var(--brand);
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  padding: 10px 12px;
  border-radius: 12px;
}
.v2_hero_title {
  font-size: 80px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  white-space: nowrap;
}
.v2_hero_title .wave {
  position: relative;
  color: var(--brand);
}
/* 펜으로 그리듯 좌→우로 그려지는 물결 밑줄 (인라인 SVG stroke 애니메이션) */
.v2_hero_title .wave .v2_wave_pen {
  position: absolute;
  left: -3px;
  right: auto;
  bottom: -10px;
  width: calc(100% + 16px);
  height: 18px;
  pointer-events: none;
  overflow: visible;
}
.v2_hero_title .wave .v2_wave_pen path {
  fill: none;
  stroke: #47b8ff;
  stroke-width: 4;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.v2_hero_subtitle {
  font-size: 30px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
}
.v2_hero_desc {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  color: var(--text-dim);
}
.v2_hero_cta {
  margin-top: 8px;
}

.v2_hero_visual {
  position: relative;
  flex-shrink: 0;
  width: min(430px, 24vw);
  aspect-ratio: 854 / 1133;
  height: auto;
}
.v2_hero_visual img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* scroll-down indicator */
.v2_hero_scroll {
  position: absolute;
  left: 50%;
  bottom: 36px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  color: #fff;
}
.v2_hero_scroll img {
  width: 36px;
  height: 36px;
  animation: v2_bounce 1.8s ease-in-out infinite;
}
.v2_hero_scroll span {
  font-size: 20px;
  font-weight: 500;
}
@keyframes v2_bounce {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}

/* ======================================================
   KEYWORD BAR
   ====================================================== */
.v2_keywords {
  width: 100%;
  background: linear-gradient(90deg, #47b8ff 0%, #4766ff 100%);
  overflow: hidden;
}
.v2_keywords_track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: v2-keywords-scroll 24s linear infinite;
}
.v2_keywords_track span {
  flex: 0 0 240px;
  width: 240px;
  text-align: center;
  padding: 26px 20px;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
}
@keyframes v2-keywords-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .v2_keywords_track,
  .v2_cases_marquee {
    animation: none;
  }
}

/* ======================================================
   FEATURE 5 — problem statement (light)
   ====================================================== */
.v2_problem {
  background: #fff;
  color: #000;
  padding: 100px 0;
}
.v2_problem_head .v2_eyebrow {
  color: #009dff;
}
.v2_problem_title {
  text-align: center;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
  margin-top: 16px;
}
.v2_problem_desc {
  text-align: center;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  color: #000;
  margin-top: 20px;
}
.v2_problem_panel {
  margin-top: 40px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  padding: 24px;
  border-radius: 16px;
  background: linear-gradient(180deg, #47b8ff 0%, #4766ff 100%);
}
.v2_problem_card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.v2_problem_card_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.v2_problem_card_icon {
  width: 52px;
  height: 52px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2_problem_card_icon img {
  width: 31px;
  height: 31px;
  object-fit: contain;
}
.v2_problem_card_num {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
}
.v2_problem_card h3 {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}
.v2_problem_card p {
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  line-height: 1.4;
}
.v2_problem_closing {
  margin-top: 40px;
  text-align: center;
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
}
.v2_problem_closing .strike {
  color: #767676;
  text-decoration: line-through;
}
.v2_problem_closing .accent {
  position: relative;
  display: inline-block;
  color: #009dff;
}
/* 펜 드로잉 물결 밑줄 (히어로와 동일, 두께·산 갯수만 이미지에 맞춤) */
.v2_problem_closing .accent .v2_wave_pen {
  position: absolute;
  left: -2px;
  bottom: -10px;
  width: calc(100% + 4px);
  height: 16px;
  pointer-events: none;
  overflow: visible;
  /* 처음엔 좌측 0폭만 보이게 클립 (dash 대신 clip-path 사용 → 끝까지 확실히 그려짐) */
  clip-path: inset(0 100% 0 0);
}
.v2_problem_closing .accent .v2_wave_pen path {
  fill: none;
  stroke: #009dff;
  stroke-width: 5;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
/* 섹션이 스크롤로 보일 때 클립을 좌→우로 풀어 펜으로 그리듯 노출 */
.v2_problem_closing.is-visible .accent .v2_wave_pen {
  animation: v2_wave_clip 1s ease-in-out both 0.15s;
}
@keyframes v2_wave_clip {
  to {
    clip-path: inset(0 -6px 0 0);
  }
}

@media (max-width: 900px) {
  .v2_problem_panel {
    grid-template-columns: repeat(2, 1fr);
  }
  .v2_keywords_track span {
    flex: 0 0 180px;
    width: 180px;
    padding: 16px 12px;
    font-size: 15px;
  }
}
@media (max-width: 768px) {
  .v2_problem {
    padding: 60px 0;
  }
  .v2_problem_title {
    font-size: 26px;
  }
  .v2_problem_desc {
    font-size: 15px;
  }
  .v2_problem_panel {
    grid-template-columns: 1fr;
    padding: 16px;
    gap: 16px;
  }
  .v2_problem_card h3 {
    font-size: 19px;
  }
  .v2_problem_closing {
    font-size: 20px;
  }
}
@media (max-width: 560px) {
  .v2_keywords_track span {
    flex: 0 0 150px;
    width: 150px;
  }
}

/* ======================================================
   FEATURE 8 — comparison (light blue)
   ====================================================== */
.v2_compare {
  background: #e7f6ff;
  color: #000;
  padding: 100px 0;
}
.v2_compare_head .v2_eyebrow {
  color: #009dff;
}
.v2_compare_head .v2_problem_title {
  margin-top: 16px;
}
.v2_compare_grid {
  margin-top: 40px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: start;
}
.v2_compare_card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 40px;
  border-radius: 16px;
}
.v2_compare_card.is-bad {
  background: #2c2c2c;
}
.v2_compare_card.is-good {
  background: linear-gradient(180deg, #47b8ff 0%, #4766ff 100%);
}
.v2_compare_tag {
  align-self: flex-start;
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  font-size: 16px;
  font-weight: 400;
  padding: 8px 12px;
  border-radius: 6px;
}
.v2_compare_card h3 {
  font-size: 30px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}
.v2_compare_divider {
  height: 1px;
  width: 100%;
  background: rgba(255, 255, 255, 0.25);
}
.v2_compare_list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v2_compare_list li {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 18px;
  font-weight: 400;
  color: #fff;
  line-height: 1.4;
}
.v2_compare_ic {
  flex-shrink: 0;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2_compare_ic img {
  width: 20px;
  height: 20px;
}

@media (max-width: 768px) {
  .v2_compare {
    padding: 60px 0;
  }
  .v2_compare_grid {
    grid-template-columns: 1fr;
  }
  .v2_compare_card {
    padding: 28px 24px;
  }
  .v2_compare_card h3 {
    font-size: 22px;
  }
  .v2_compare_list li {
    font-size: 15px;
  }
}

/* ======================================================
   Shared dark section + left-aligned heading
   ====================================================== */
.v2_dark {
  background: var(--bg);
  color: #fff;
  padding: 100px 0;
}
.v2_head_left {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.v2_head_left .v2_eyebrow {
  text-align: left;
  color: #009dff;
}
.v2_head_left h2 {
  text-align: left;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}
.v2_head_left p.v2_lead {
  text-align: left;
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
}

/* ======================================================
   FEATURE 9 — 4 steps
   ====================================================== */
.v2_steps {
  margin-top: 40px;
  display: flex;
  align-items: stretch;
  gap: 16px;
}
.v2_step {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 379px;
  padding: 24px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.4);
}
.v2_step.is-result {
  background: #0075ff;
  border-color: transparent;
}
.v2_step_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.v2_step_top h3 {
  font-size: 24px;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}
.v2_step_label {
  font-size: 16px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.5);
}
.v2_step_desc {
  margin-top: 12px;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
  line-height: 1.4;
}
.v2_step_img {
  align-self: flex-end;
  width: 140px;
  height: 140px;
  margin-top: 24px;
  object-fit: contain;
}
.v2_step_arrow {
  flex-shrink: 0;
  align-self: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
}
.v2_step_arrow img {
  width: 20px;
  height: 20px;
}

@media (max-width: 1024px) {
  .v2_steps {
    flex-wrap: wrap;
  }
  .v2_step {
    flex: 1 1 calc(50% - 8px);
    min-height: 280px;
  }
  .v2_step_arrow {
    display: none;
  }
}
@media (max-width: 768px) {
  .v2_dark {
    padding: 60px 0;
  }
  .v2_head_left h2 {
    font-size: 26px;
  }
  .v2_head_left p.v2_lead {
    font-size: 15px;
  }
  .v2_step {
    flex: 1 1 100%;
    min-height: 0;
  }
}

/* ======================================================
   FEATURE 10 — 5 killer features (light)
   ====================================================== */
.v2_killer {
  background: #fff;
  color: #000;
  padding: 100px 0;
}
.v2_killer .v2_head_left .v2_eyebrow {
  color: #009dff;
}
.v2_killer .v2_head_left h2 {
  color: #000;
}
.v2_killer .v2_head_left p.v2_lead {
  color: #000;
}
.v2_killer_list {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.v2_killer_row {
  display: flex;
  align-items: center;
  gap: 120px;
  padding: 40px;
  border-radius: 24px;
  background: #e7f6ff;
}
.v2_killer_row:nth-child(even) {
  background: #e7eeff;
  flex-direction: row-reverse;
}
.v2_killer_text {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v2_killer_eyebrow {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.4;
  color: #009dff;
}
.v2_killer_title {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
}
.v2_killer_desc {
  font-size: 20px;
  font-weight: 400;
  line-height: 1.4;
  color: #000;
}
.v2_killer_img {
  flex-shrink: 0;
  width: 500px;
  height: 300px;
  border-radius: 12px;
  object-fit: cover;
}

@media (max-width: 1280px) {
  .v2_killer_row {
    gap: 60px;
  }
  .v2_killer_img {
    width: 420px;
    height: 252px;
  }
}
@media (max-width: 1024px) {
  .v2_killer_row,
  .v2_killer_row:nth-child(even) {
    flex-direction: column;
    gap: 32px;
    align-items: flex-start;
  }
  .v2_killer_img {
    width: 100%;
    height: auto;
    aspect-ratio: 500 / 300;
  }
}
@media (max-width: 768px) {
  .v2_killer {
    padding: 60px 0;
  }
  .v2_killer_list {
    margin-top: 32px;
  }
  .v2_killer_row {
    padding: 24px;
    border-radius: 16px;
  }
  .v2_killer_title {
    font-size: 22px;
  }
  .v2_killer_eyebrow {
    font-size: 16px;
  }
  .v2_killer_desc {
    font-size: 15px;
  }
}

@media (max-width: 1280px) {
  .v2_hero_title {
    font-size: 60px;
  }
  .v2_hero_visual {
    width: min(300px, 28vw);
    height: auto;
  }
}
@media (max-width: 1200px) {
  .v2_hero_inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-top: 80px;
    /* 세로 적층 시 폰 목업이 중앙 정렬되므로 플로팅 메뉴 여백 불필요 */
    padding-right: var(--side);
    /* 커진 폰 목업이 하단 스크롤 인디케이터(기능 살펴보기)와 겹치지 않도록 여백 확보 */
    padding-bottom: 130px;
  }
  .v2_hero_copy {
    align-items: center;
    text-align: center;
  }
  .v2_hero_visual {
    width: min(340px, 52vw);
    /* 세로 적층 시 폰 목업을 텍스트 위쪽으로 배치 */
    order: -1;
  }
}
@media (max-width: 768px) {
  .v2_hero {
    min-height: auto;
  }
  .v2_hero_inner {
    gap: 32px;
    padding-bottom: 60px;
  }
  .v2_hero_badge {
    font-size: 14px;
  }
  .v2_hero_title {
    font-size: 36px;
    white-space: normal;
  }
  .v2_hero_subtitle {
    font-size: 20px;
  }
  .v2_hero_desc {
    font-size: 15px;
  }
  .v2_hero_visual {
    /* 모바일: 우측 플로팅 메뉴(약 84px)와 겹치지 않도록 폭 제한 */
    width: min(230px, calc(100vw - 170px));
    max-width: none;
    height: auto;
    aspect-ratio: 854 / 1133;
  }
  .v2_hero_scroll {
    display: none;
  }
  .v2_hero_bg img {
    width: 460px;
  }
}

/* ======================================================
   FEATURE 11 — app/web 5 cards (light blue)
   ====================================================== */
.v2_apps {
  background: #e7eeff;
  color: #000;
  padding: 100px 0;
}
.v2_apps_head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.v2_apps_head .v2_eyebrow {
  text-align: left;
  color: #009dff;
}
.v2_apps_head h2 {
  text-align: left;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
}
.v2_apps_grid {
  margin-top: 40px;
  display: flex;
  gap: 16px;
}
.v2_app_card {
  flex: 1 0 0;
  min-width: 0;
  height: 340px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 30px;
  padding: 24px;
  border-radius: 8px;
  background: #181818;
}
.v2_app_card h3 {
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
  text-align: center;
}
.v2_app_card p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #fff;
  text-align: center;
}
.v2_app_card img {
  width: 120px;
  height: 120px;
  object-fit: contain;
}

@media (max-width: 1024px) {
  .v2_apps_grid {
    flex-wrap: wrap;
  }
  .v2_app_card {
    flex: 1 1 calc(33.333% - 11px);
    height: auto;
    min-height: 260px;
  }
}
@media (max-width: 768px) {
  .v2_apps {
    padding: 60px 0;
  }
  .v2_apps_head h2 {
    font-size: 26px;
  }
  .v2_app_card {
    flex: 1 1 calc(50% - 8px);
  }
}

/* ======================================================
   FEATURE 12 — use cases carousel + stats (white)
   ====================================================== */
.v2_cases {
  background: #fff;
  color: #000;
  padding: 100px 0;
  overflow: hidden;
}
.v2_cases_head {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.v2_cases_head .v2_eyebrow {
  color: #009dff;
}
.v2_cases_head h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
}
.v2_cases_head p {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  color: #000;
}
.v2_cases_track {
  margin-top: 40px;
  overflow: hidden;
}
.v2_cases_marquee {
  display: flex;
  width: max-content;
  animation: v2-cases-scroll 45s linear infinite;
}
@keyframes v2-cases-scroll {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-50%);
  }
}
.v2_case {
  position: relative;
  flex: 0 0 auto;
  width: 400px;
  height: 400px;
  margin-right: 12px;
  border-radius: 8px;
  overflow: hidden;
}
.v2_case img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.v2_case span {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0 24px;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000 100%);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.4;
  color: #fff;
}
.v2_stats {
  margin-top: 40px;
  display: flex;
  flex-wrap: wrap;
  gap: 60px 150px;
  align-items: center;
  justify-content: center;
  padding: 24px 0;
}
.v2_stat {
  width: 200px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}
.v2_stat strong {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
}
.v2_stat span {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.4;
  color: #2f6bff;
  text-align: center;
}

@media (max-width: 768px) {
  .v2_cases {
    padding: 60px 0;
  }
  .v2_cases_head h2 {
    font-size: 26px;
  }
  .v2_cases_head p {
    font-size: 15px;
  }
  .v2_case {
    width: 280px;
    height: 280px;
  }
  .v2_case span {
    font-size: 18px;
  }
  .v2_stats {
    gap: 32px;
  }
  .v2_stat strong {
    font-size: 32px;
  }
}

/* ======================================================
   FEATURE 14 — reviews (dark)
   ====================================================== */
.v2_reviews {
  background: var(--bg);
  color: #fff;
  padding: 100px 0;
}
.v2_reviews_head {
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.v2_reviews_head .v2_eyebrow {
  color: #009dff;
}
.v2_reviews_head h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
}
.v2_reviews_grid {
  margin-top: 40px;
  display: flex;
  gap: 16px;
}
.v2_review {
  flex: 1 0 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 4px 5px rgba(82, 82, 82, 0.1);
}
.v2_review_stars {
  display: flex;
  align-items: center;
}
.v2_review_stars svg {
  width: 24px;
  height: 24px;
}
.v2_review_who {
  display: flex;
  align-items: center;
  gap: 8px;
}
.v2_review_who strong {
  font-size: 20px;
  font-weight: 700;
  color: #2c2c2c;
}
.v2_review_who span {
  font-size: 16px;
  font-weight: 400;
  color: #777;
}
.v2_review_text {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.36;
  color: #2c2c2c;
}
@media (max-width: 1024px) {
  .v2_reviews_grid {
    flex-wrap: wrap;
  }
  .v2_review {
    flex: 1 1 100%;
  }
}
@media (max-width: 768px) {
  .v2_reviews {
    padding: 60px 0;
  }
  .v2_reviews_head h2 {
    font-size: 26px;
  }
}

/* ======================================================
   FEATURE 15 — FAQ (white)
   ====================================================== */
.v2_faq {
  background: #fff;
  color: #000;
  padding: 100px 0;
}
.v2_faq_head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: flex-start;
}
.v2_faq_head .v2_eyebrow {
  text-align: left;
  color: #009dff;
}
.v2_faq_head h2 {
  text-align: left;
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
}
.v2_faq_list {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.v2_faq_item {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px;
  border-radius: 12px;
  background: #eff2f4;
}
.v2_faq_item h3 {
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: #000;
}
.v2_faq_item p {
  font-size: 16px;
  font-weight: 400;
  line-height: 1.4;
  color: #000;
}

@media (max-width: 768px) {
  .v2_faq {
    padding: 60px 0;
  }
  .v2_faq_head h2 {
    font-size: 26px;
  }
  .v2_faq_item h3 {
    font-size: 17px;
  }
}

/* ======================================================
   FLOATING MENU (전화상담 / 메일문의 / 카톡상담 / TOP)
   ====================================================== */
.v2_float {
  position: fixed;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 1001;
  width: 72px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}
.v2_float_cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  text-align: center;
  color: #0f172a;
  background: #fff;
  border: 0;
  border-bottom: 1px solid #edf2f7;
  cursor: pointer;
  text-decoration: none;
  font-family: inherit;
  padding: 0;
  transition: background 0.15s ease;
}
.v2_float_cell:last-child {
  border-bottom: none;
}
.v2_float_cell:hover {
  background: #f1f9ff;
}
.v2_float_cell img {
  width: 24px;
  height: 24px;
  display: block;
  margin-bottom: 4px;
  object-fit: contain;
}
.v2_float_label {
  font-family: "Noto Sans KR", sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.25;
  color: #000000;
}
.v2_float_cell--kakao {
  background: var(--kakao);
}
.v2_float_cell--kakao:hover {
  background: #f2d900;
}

/* 전화 상담 안내 모달 */
.v2_call_modal {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  align-items: center;
  justify-content: center;
}
.v2_call_modal.is-open {
  display: flex;
}
.v2_call_box {
  position: relative;
  background: #fff;
  padding: 40px 48px;
  border-radius: 8px;
  min-width: 280px;
  text-align: center;
}
.v2_call_box p {
  font-size: 18px;
  font-weight: 500;
  margin: 8px 0;
  color: #333;
}
.v2_call_tag {
  color: var(--brand);
  font-size: 0.8em;
  font-weight: 600;
  vertical-align: middle;
  margin-right: 4px;
}
.v2_call_close {
  position: absolute;
  top: 10px;
  right: 14px;
  width: 28px;
  height: 28px;
  border: 0;
  background: none;
  font-size: 24px;
  line-height: 1;
  color: #888;
  cursor: pointer;
}

@media (max-width: 768px) {
  .v2_float {
    right: 12px;
    width: 60px;
  }
  .v2_float_cell {
    width: 60px;
    height: 60px;
  }
  .v2_float_cell img {
    width: 20px;
    height: 20px;
  }
  .v2_float_label {
    font-size: 10px;
  }
}

/* ======================================================
   주요 기능 설명 영상 (밝은 섹션 + 다크 프레임)
   ====================================================== */
.v2_video {
  background: #f2f7ff;
  color: #000;
  padding: 100px 0;
}
.v2_video_head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
}
.v2_video_head .v2_eyebrow {
  color: #009dff;
}
.v2_video_head h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
}
.v2_video_frame {
  max-width: 960px;
  margin: 0 auto;
  padding: 12px;
  border-radius: 16px;
  background: #0e0e0e;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.28);
}
.v2_video_player {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  background: #000;
  object-fit: contain;
}

@media (max-width: 768px) {
  .v2_video {
    padding: 60px 0;
  }
  .v2_video_head h2 {
    font-size: 26px;
  }
  .v2_video_frame {
    padding: 8px;
    border-radius: 12px;
  }
}

/* ======================================================
   MORNING BRIEF — 콜 운영 요약 대시보드 카드 그리드
   ====================================================== */
.v2_brief {
  background: #e7f6ff;
  color: #000;
  padding: 100px 0;
}
.v2_brief_head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
}
.v2_brief_head .v2_eyebrow {
  color: #009dff;
}
.v2_brief_head h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
}
.v2_brief_head h2 span {
  color: #009dff;
}
.v2_brief_head p {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  color: #000;
}

.v2_brief_grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.v2_brief_card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 12px;
  border-radius: 8px;
  overflow: hidden;
  background-color: var(--card-bg, #0f172a);
  background-image: url("../../../../assets/image/page/v2/img_brief_texture.png");
  background-size: cover;
  background-position: center;
}
.v2_brief_ic {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.2);
}
.v2_brief_ic img {
  width: 24px;
  height: 24px;
  display: block;
}
.v2_brief_body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.v2_brief_label {
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
  color: #fff;
}
.v2_brief_label span {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.6);
}
.v2_brief_value {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.v2_brief_value strong {
  font-size: 35px;
  font-weight: 500;
  line-height: 1;
  color: #fff;
}
.v2_brief_value em {
  font-size: 14px;
  font-weight: 500;
  font-style: normal;
  margin-left: 2px;
}
.v2_brief_delta {
  font-size: 13px;
  font-weight: 400;
  line-height: 1.4;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
}
.v2_brief_delta.is-up {
  color: #10b981;
  background: rgba(16, 185, 129, 0.15);
}
.v2_brief_delta.is-down {
  color: #d92d20;
  background: rgba(217, 45, 32, 0.15);
}

@media (max-width: 1024px) {
  .v2_brief_grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 768px) {
  .v2_brief {
    padding: 60px 0;
  }
  .v2_brief_head h2 {
    font-size: 26px;
  }
  .v2_brief_head p {
    font-size: 16px;
  }
}
@media (max-width: 480px) {
  .v2_brief_grid {
    grid-template-columns: 1fr;
  }
}

/* ======================================================
   WORKSPACE — 리스트뷰 / 카드뷰 시간초 교차 뷰어
   ====================================================== */
.v2_workspace {
  background: #f7f5f2;
  color: #000;
  padding: 100px 0;
}
.v2_workspace_head {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: center;
  text-align: center;
  margin-bottom: 40px;
}
.v2_workspace_head .v2_eyebrow {
  color: #009dff;
}
.v2_workspace_head h2 {
  font-size: 48px;
  font-weight: 700;
  line-height: 1.4;
  color: #000;
}
.v2_workspace_head p {
  font-size: 22px;
  font-weight: 400;
  line-height: 1.4;
  color: #000;
}

/* 뷰어 : 둥근 그라데이션 배경 프레임 안에 스크린샷 + 캡션 */
.v2_workspace_viewer {
  position: relative;
  margin: 0 auto;
  width: 100%;
  max-width: 1120px;
  padding: 48px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.v2_workspace_bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
  pointer-events: none;
  z-index: 0;
}

/* 스테이지 : 목업 이미지(자체 그림자 포함, 투명 여백 제거됨) 교차 페이드 */
.v2_workspace_stage {
  position: relative;
  z-index: 1;
  width: 100%;
  aspect-ratio: 1672 / 1000;
}
.v2_workspace_slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.7s ease, visibility 0s linear 0.7s;
}
.v2_workspace_slide.is-active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.7s ease, visibility 0s;
}
.v2_workspace_slide img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* 현재 보기 이름 (그라데이션 배경 위 흰색 캡션) */
.v2_workspace_caption {
  position: relative;
  z-index: 1;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: #000000;
  text-align: center;
}

@media (max-width: 768px) {
  .v2_workspace {
    padding: 60px 0;
  }
  .v2_workspace_head h2 {
    font-size: 26px;
  }
  .v2_workspace_head p {
    font-size: 16px;
  }
  .v2_workspace_viewer {
    padding: 20px;
    border-radius: 12px;
    gap: 12px;
  }
  .v2_workspace_caption {
    font-size: 16px;
  }
}

/* ======================================================
   INTERACTIONS — 스크롤 등장 / hover / 히어로 진입 / 디테일
   (모션은 절제: 짧고 빠르게, prefers-reduced-motion 존중)
   ====================================================== */

/* ---- 스크롤 등장(reveal) : 요소 단위 페이드업 ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

/* 킬러 기능 행: 좌/우 교차 슬라이드 인 */
.v2_killer_row[data-reveal] {
  transform: translateX(-44px);
}
.v2_killer_row:nth-child(even)[data-reveal] {
  transform: translateX(44px);
}
.v2_killer_row[data-reveal].is-visible {
  transform: none;
}

/* ---- 스크롤 등장(stagger) : 자식 순차 페이드업 ---- */
[data-stagger] > * {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
[data-stagger].is-visible > * {
  opacity: 1;
  transform: none;
}
[data-stagger].is-visible > *:nth-child(1) { transition-delay: 0.05s; }
[data-stagger].is-visible > *:nth-child(2) { transition-delay: 0.1s; }
[data-stagger].is-visible > *:nth-child(3) { transition-delay: 0.15s; }
[data-stagger].is-visible > *:nth-child(4) { transition-delay: 0.2s; }
[data-stagger].is-visible > *:nth-child(5) { transition-delay: 0.25s; }
[data-stagger].is-visible > *:nth-child(6) { transition-delay: 0.3s; }
[data-stagger].is-visible > *:nth-child(n + 7) { transition-delay: 0.35s; }

/* Why RecSee AI 스텝: STEP 01~RESULT는 동시에, 화살표는 그 뒤 0.5초 간격 좌→우 */
.v2_steps.is-visible > .v2_step { transition-delay: 0s; }
.v2_steps.is-visible > .v2_step_arrow:nth-of-type(1) { transition-delay: 0.6s; }
.v2_steps.is-visible > .v2_step_arrow:nth-of-type(2) { transition-delay: 1.1s; }
.v2_steps.is-visible > .v2_step_arrow:nth-of-type(3) { transition-delay: 1.6s; }

/* ---- 카드 hover 인터랙션 ---- */
.v2_problem_card {
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.v2_problem_card:hover {
  transform: translateY(-6px);
  border-color: var(--brand);
  background: rgba(255, 255, 255, 0.2);
}

.v2_app_card {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.v2_app_card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35);
}
.v2_app_card img {
  transition: transform 0.25s ease;
}
.v2_app_card:hover img {
  transform: scale(1.06);
}

.v2_killer_img {
  transition: transform 0.35s ease;
}
.v2_killer_row:hover .v2_killer_img {
  transform: scale(1.03);
}

.v2_review {
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.v2_review:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.14);
}

.v2_compare_card {
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.v2_compare_card.is-good:hover {
  transform: translateY(-6px) scale(1.01);
  box-shadow: 0 24px 50px rgba(71, 102, 255, 0.3);
}

/* ---- 히어로 진입 애니메이션 ---- */
@keyframes v2_rise {
  from {
    opacity: 0;
    transform: translateY(24px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
/* 1) 좌측 텍스트·버튼은 한 번에 함께 등장 */
.v2_hero_badge,
.v2_hero_title,
.v2_hero_subtitle,
.v2_hero_desc,
.v2_hero_cta { animation: v2_rise 0.6s ease both 0.05s; }
/* 2) 그다음 우측 핸드폰 목업 등장 */
.v2_hero_visual { animation: v2_rise 0.95s ease both 0.4s; }

/* 폰 목업 상하 플로팅 (진입 애니메이션과 분리해 내부 img에 적용) */
@keyframes v2_float_phone {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}
.v2_hero_visual img {
  animation: v2_float_phone 4s ease-in-out infinite 1.35s;
}

/* Why RecSee AI 스텝 화살표 — 좌측부터 시간차로 위아래 둥실 */
@keyframes v2_float_arrow {
  0%, 100% { transform: translateY(-3px); }
  50% { transform: translateY(3px); }
}
.v2_step_arrow {
  animation: v2_float_arrow 3s ease-in-out infinite;
}
.v2_step_arrow:nth-of-type(1) { animation-delay: 0.2s; }
.v2_step_arrow:nth-of-type(2) { animation-delay: 0.55s; }
.v2_step_arrow:nth-of-type(3) { animation-delay: 0.9s; }

/* 3) 좌·우 모두 등장한 뒤 '성과' 밑줄을 펜으로 그리듯 좌→우로 */
.v2_hero_title .wave .v2_wave_pen path {
  stroke-dasharray: 1 2;
  stroke-dashoffset: 1;
  animation: v2_wave_draw 1s ease-in-out both 0.9s;
}
@keyframes v2_wave_draw {
  to { stroke-dashoffset: 0; }
}

/* ---- 상단 스크롤 진행바 ---- */
.v2_progress {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 0;
  background: linear-gradient(90deg, #47b8ff 0%, #4766ff 100%);
  z-index: 200;
  transition: width 0.1s linear;
}

/* ---- 영상 커스텀 재생 오버레이 + 프레임 글로우 ---- */
.v2_video_frame {
  position: relative;
  transition: box-shadow 0.3s ease;
}
.v2_video_frame:hover {
  box-shadow: 0 24px 70px rgba(71, 184, 255, 0.32);
}
.v2_video_play {
  position: absolute;
  inset: 0;
  margin: auto;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(71, 184, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.4);
  transition: transform 0.2s ease, opacity 0.2s ease, background 0.2s ease;
}
.v2_video_play:hover {
  transform: scale(1.08);
  background: rgba(71, 184, 255, 1);
}
.v2_video_play span {
  display: block;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 13px 0 13px 22px;
  border-color: transparent transparent transparent #fff;
  margin-left: 5px;
}
.v2_video_play.is-hidden {
  opacity: 0;
  pointer-events: none;
}

/* ---- FAQ 아코디언 ---- */
.v2_faq_item {
  padding: 0;
  gap: 0;
  overflow: hidden;
  transition: background-color 0.3s ease;
}
/* 펼침 시 배경 반전(블랙) + 텍스트·아이콘 화이트 */
.v2_faq_item.is-open {
  background: #000;
}
.v2_faq_item.is-open .v2_faq_q,
.v2_faq_item.is-open .v2_faq_a p {
  color: #fff;
}
.v2_faq_item.is-open .v2_faq_icon::before,
.v2_faq_item.is-open .v2_faq_icon::after {
  background: #fff;
}
.v2_faq_q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 24px;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.4;
  color: #000;
  text-align: left;
}
.v2_faq_icon {
  position: relative;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}
.v2_faq_icon::before,
.v2_faq_icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  background: #009dff;
  border-radius: 2px;
}
.v2_faq_icon::before {
  width: 14px;
  height: 2px;
  transform: translate(-50%, -50%);
}
.v2_faq_icon::after {
  width: 2px;
  height: 14px;
  transform: translate(-50%, -50%);
  transition: transform 0.3s ease;
}
.v2_faq_item.is-open .v2_faq_icon::after {
  transform: translate(-50%, -50%) scaleY(0);
}
.v2_faq_a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease;
}
.v2_faq_a p {
  padding: 0 24px 24px;
}

/* ======================================================
   태블릿 구간 타이포그래피 (769px ~ 1024px)
   데스크톱 → 모바일 사이에서 본문·제목이 단계적으로 줄도록 보완.
   min-width:769px 로 묶어 모바일(≤768) 규칙과 절대 충돌하지 않음.
   ====================================================== */
@media (min-width: 769px) and (max-width: 1024px) {
  /* 히어로 */
  .v2_hero_title {
    font-size: 48px;
  }
  .v2_hero_subtitle {
    font-size: 24px;
  }
  .v2_hero_badge {
    font-size: 17px;
  }
  .v2_hero_desc {
    font-size: 18px;
  }
  /* 섹션 대표 제목 (48px → 36px) */
  .v2_problem_title,
  .v2_compare_head .v2_problem_title,
  .v2_head_left h2,
  .v2_apps_head h2,
  .v2_cases_head h2,
  .v2_reviews_head h2,
  .v2_faq_head h2,
  .v2_video_head h2 {
    font-size: 36px;
  }
  /* 통계 수치 */
  .v2_stat strong {
    font-size: 36px;
  }
  /* 보조 제목·마무리 문구 (30px → 26px) */
  .v2_killer_title,
  .v2_problem_closing {
    font-size: 26px;
  }
}

/* ---- 접근성: 모션 최소화 선호 시 모든 신규 모션 비활성화 ---- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal],
  [data-reveal].is-visible,
  .v2_killer_row[data-reveal],
  [data-stagger] > *,
  [data-stagger].is-visible > * {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .v2_hero_badge,
  .v2_hero_title,
  .v2_hero_subtitle,
  .v2_hero_desc,
  .v2_hero_cta,
  .v2_hero_visual,
  .v2_hero_visual img,
  .v2_hero_title .wave .v2_wave_pen path,
  .v2_problem_closing.is-visible .accent .v2_wave_pen,
  .v2_step_arrow {
    animation: none;
  }
  .v2_hero_title .wave .v2_wave_pen path {
    stroke-dashoffset: 0;
  }
  /* 모션 최소화 시 물결 밑줄은 클립 없이 전체 노출 */
  .v2_problem_closing .accent .v2_wave_pen {
    clip-path: none;
  }
}