@charset "UTF-8";
:root {
  --max-width: 1200px;
  --white: #ffffff;
  --black: #000;
  --gray-pale: #f6f7f9;
  --gray-lightest: #f3f4f5;
  --gray-border: #e1e6e9;
  --gray-light: #9ea3ab;
  --gray-lighter: #b8bbc1;
  --gray-mid: #6f737a;
  --gray-dark: #252d3a;
  --primary: #0052d4;
  --gradient: linear-gradient(to right, var(--primary), var(--primary), #6fb1fc);
  --header-h: 64px;
}
html {
  scroll-behavior: smooth;
  height: 100%;
}
body {
  overflow-x: hidden;
  height: 100%;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  letter-spacing: -0.03em;
  -webkit-overflow-scrolling: touch;
  font-family: 'Pretendard', Pretendard, Roboto, 'Noto Sans KR', 'Segoe UI', 'Malgun Gothic', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
}
main {
  overflow-x: hidden;
}
@media (max-width: 1200px) {
  :root {
    --max-width: 1000px;
  }
}
.material-symbols-sharp {
  font-size: inherit;
  font-weight: inherit;
}

.bg-pale {
  background-color: var(--gray-pale);
}
.gradient-text {
  background: var(--gradient);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.faq-item {
  .faq-question {
    &::before {
      content: 'Q';
      color: #fe5f57;
      flex-shrink: 0;
      margin-right: 10px;
      font-size: 1.2em;
    }
    span:first-of-type {
      flex-grow: 1;
    }
  }

  .faq-answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.2s;
  }
  .faq-icon {
    font-weight: 400;
  }
  &.open {
    .faq-answer {
      display: flex;
      max-height: 200px;
      &::before {
        content: 'A';
        margin-right: 10px;
        font-size: 1.2em;
        font-weight: bold;
        color: var(--primary);
      }
    }
    .faq-icon {
      transform: rotate(45deg);
    }
  }

  &:nth-last-child(1) {
    border: 0;
  }
  @media (max-width: 768px) {
    font-size: 16px;
    padding: 20px;
    line-height: 1.4;
    .faq-question {
      font-size: 14px;
      .faq-icon {
        font-size: 16px;
      }
    }
  }
}

header {
  --color: var(--white);
  padding: 20px 0;
  @media (max-width: 768px) {
    padding: 10px 0;
    padding-top: calc(10px + env(safe-area-inset-top));
  }
  nav {
    max-width: var(--max-width);
    margin: auto;
    padding: 0;
    color: var(--color);
    position: relative;
    @media (max-width: 768px) {
      padding: 0 20px;
    }
    .menu {
      position: absolute;
      left: 50%;
      top: 50%;
      width: 100%;
      transform: translate(-50%, -50%);
      display: flex;
      align-items: center;
      gap: 2em;
      justify-content: center;

      a.active:not(.button) {
        color: var(--primary); /* 파란색 강조 */
        font-weight: 700;
        position: relative;
      }
      a.active:not(.button)::after {
        content: '';
        position: absolute;
        bottom: -4px;
        left: 0;
        right: 0;
        height: 3px;
        background: var(--primary);
        border-radius: 2px;
      }
      .right {
        position: absolute;
        right: 0;
        height: 100%;
        @media (max-width: 768px) {
          position: static;
        }
      }
    }
    .logo {
      font-size: 0;
      width: 60px;
      height: 32px;
      background: var(--gradient);
      mask: url('/images/logos/logo-carforyou.svg') no-repeat left center / auto 32px;
    }

    .button {
      display: block;
    }
    @media (max-width: 768px) {
      .logo {
        height: 26px;
        mask-size: auto 26px;
      }
      .menu {
        position: fixed;
        top: 0;
        right: 0;
        left: auto;
        bottom: 0;
        width: 60vw;
        height: 100vh;
        display: flex; /* keep flex so transform animates */
        flex-direction: column;
        gap: 0px;
        background: var(--white);
        color: var(--black);
        padding: 0;
        padding-top: calc(72px + env(safe-area-inset-top));
        border-left: 1px solid var(--gray-border);
        text-align: left;
        align-items: flex-start;
        justify-content: flex-start;
        z-index: 60;
        transform: translateX(100%);
        opacity: 1;
        pointer-events: none; /* closed state: ignore taps */
        transition: transform 0.28s ease;
        a {
          color: var(--black);
          padding: 10px 20px;
          width: 100%;
        }
        a.active:not(.button):after {
          width: 3px;
          height: 100%;
          left: 0;
          top: 0;
          bottom: 0;
        }
        .right {
          position: static;
          right: auto;
          height: auto;
          width: 100%;
          display: flex;
          justify-content: center;
          margin-top: 4px;
          display: none;
        }
        &.is-open {
          transform: translateX(0);
          pointer-events: auto; /* open state clickable */
        }
      }
      .menu-close {
        position: absolute;
        top: 12px;
        right: 12px;
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        background: var(--white);

        z-index: 61; /* above the panel contents */
      }
      .menu-close .material-symbols-sharp {
        font-size: 24px;
        color: var(--black);
      }
      #menu-toggle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 40px;
        height: 40px;
        margin-left: auto;
        font-size: 1.5em;
        color: var(--color);
      }
    }
    .header-menu-is-open-bg-override {
    }
  }
  &.scrolled {
    --color: var(--black);
    background: rgba(255, 255, 255, 0.7);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    nav {
      .button {
        --color: var(--white);
      }
    }
    @media (max-width: 768px) {
      background: var(--white);
      &:has(.menu.is-open) {
        background: transparent !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
      }
    }
  }
  &.on-visual {
    --color: var(--white);
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    nav .button {
      --color: var(--white);
    }
  }
}

/* --- 전역 모바일 메뉴 백드롭 (header 외부 DOM 요소) --- */
.menu-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.7);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease;
  z-index: 45;
  pointer-events: none;
}
.menu-backdrop.show {
  opacity: 1;
  visibility: visible;
  pointer-events: all;
}
@media (min-width: 768px) {
  .menu-backdrop {
    display: none;
  }
}
/* 마우스 스크롤 */
@keyframes ani-mouse {
  0% {
    opacity: 1;
    top: 29%;
  }
  15% {
    opacity: 1;
    top: 50%;
  }
  50% {
    opacity: 0;
    top: 50%;
  }
  100% {
    opacity: 0;
    top: 29%;
  }
}
.scroll-btn {
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  text-align: center;
  bottom: 20px;
  z-index: 10;
  margin: auto;
  pointer-events: none;

  > * {
    display: inline-block;
    line-height: 18px;
    font-size: 11px;
    font-weight: normal;
    color: #ffffff;
    font-family: 'proxima-nova', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    letter-spacing: 2px;

    &:hover,
    &:focus,
    &.active {
      color: #ffffff;
      opacity: 0.8;
      filter: alpha(opacity=80);
    }
  }

  .mouse {
    position: relative;
    display: block;
    width: 35px;
    height: 55px;
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    border: 3px solid white;
    border-radius: 23px;
    transform: scale(0.6);

    > * {
      position: absolute;
      display: block;
      top: 29%;
      left: 50%;
      width: 8px;
      height: 8px;
      margin: -4px 0 0 -4px;
      background: white;
      border-radius: 50%;
      -webkit-animation: ani-mouse 1.5s linear infinite;
      -moz-animation: ani-mouse 1.5s linear infinite;
      animation: ani-mouse 1.5s linear infinite;
    }
  }
}
section {
  min-height: calc(100dvh - 68px);
  display: flex;
  word-break: keep-all;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  @media (max-width: 1200px) {
    padding: 0 2rem;
  }
  @media (max-width: 768px) {
    padding: 0 24px;
    &#section-features {
      > .flex {
        flex-direction: column;
      }
      padding: 40px 24px 24px;
      gap: 0;
    }
    &:not(#problem-statement) {
      .text.title {
        h2 .gradient-text {
          display: block;
        }
      }
    }
  }
  .text {
    line-height: 1.3;
    text-align: center;
    > h2 {
      font-size: 3em;
      font-weight: 800;
      line-height: 1.2;
      margin-bottom: 0.2em;
      @media (max-width: 768px) {
        font-size: 2.3rem;
      }
    }
    > h3 {
      line-height: 1.2;
      font-size: 2em;
      font-weight: 800;
      @media (max-width: 768px) {
        font-size: 1.7rem;
        line-height: 1.2;
        font-weight: 700;
      }
    }
    > p {
      color: var(--gray-mid);
      @media (max-width: 768px) {
        font-size: 14px;
        line-height: 1.2;
      }
    }
    > p:first-of-type {
      margin-top: 1em;
    }
    &.title {
      > p {
        font-size: 1.1em;
        @media (max-width: 768px) {
          font-size: 1em;
        }
      }
      > h3 {
        @media (max-width: 768px) {
          font-size: 1.2rem;
          line-height: 1.2;
          font-weight: bold;
        }
      }
      @media (max-width: 768px) {
        margin-bottom: 30px;
      }
    }
  }
  > div {
    max-width: var(--max-width);
    margin: 0 auto;
    width: 100%;
    &.cell4grid {
      > div {
        background-color: var(--gray-pale);
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-end;
        .img {
          aspect-ratio: 1/1;
          flex-grow: 1;
          mask: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 30%);
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.3s ease;
          }
          @media (max-width: 768px) {
            aspect-ratio: 5/3;
          }
        }
        .text {
          text-align: left;
          padding: 2em;
          word-break: keep-all;
          line-height: 1.3;
          .big {
            font-size: 2.4em;
            width: fit-content;
            font-weight: bold;
            margin-bottom: 0.5em;
          }
        }
      }
    }
  }
  .chart-container {
    position: relative;
    width: 100%;
    margin-left: auto;
    margin-right: auto;
    height: 280px; /* 모바일에서도 그래프 높이 보장 */
    @media (min-width: 768px) {
      height: 400px;
    }
  }
  &#section-cta {
    background: url(/images/bg00002.jpg) no-repeat center/cover;
    display: flex;
    flex-direction: column;
    padding: 0;
    .cta {
      background-color: rgba(0, 0, 0, 0.75);
      padding: 0;
      margin: 0;
      height: 100%;
      flex-grow: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      .reserve {
        padding: 5em 1em 1em;
        flex-grow: 1;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 100%;
        .text {
          p {
            color: #fff;
            opacity: 0.7;
            font-size: 1.1em;
            line-height: 1.5;
          }
        }
        .search-form {
          width: 100%;
          max-width: 720px; /* 통일 */
          margin: 0 auto;
          display: flex;
          justify-content: center;
          button {
            white-space: nowrap;
            flex-shrink: 0;
            @media (max-width: 768px) {
              font-size: 0.9em;
              width: fit-content;
            }
          }
        }
        .plate-input {
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 30px;
        }
        .plate {
          --plate-border: var(--primary); /* 초록 테두리 */
          --plate-bg: #fff;
          position: relative;
          flex: 1 1 auto;
          background: var(--plate-bg);
          border: 4px solid var(--plate-border);
          border-radius: 14px;
          padding: 18px;
          box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08), inset 0 0 0 1px #e5e7eb;
          display: flex;
          align-items: center;
          max-width: 400px;
          justify-content: center;
        }
        .plate:focus-within {
          border-color: var(--primary);
          box-shadow: 0 0 0 4px rgba(22, 163, 74, 0.15), inset 0 0 0 1px #d1d5db;
        }
        .plate .bolt {
          position: absolute;
          top: 50%; /* 세로 중앙 정렬 */
          transform: translateY(-50%);
          width: 12px;
          height: 12px;
          border-radius: 50%;
          background: radial-gradient(circle at 30% 30%, #c9c9c9, #8a8a8a 60%, #555 100%);
          box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.6);
        }
        .plate .bolt-l {
          left: 8px;
        }
        .plate .bolt-r {
          right: 8px;
        }
        .plate-field {
          width: 100%;
          background: transparent;
          border: 0;
          outline: none;
          text-align: center;
          font-weight: 800;
          font-size: clamp(24px, 6vw, 40px);
          line-height: 1;
          letter-spacing: 0.04em;
          color: #111827;
        }
        .plate-field::placeholder {
          color: #9ca3af;
          font-weight: 600;
        }
        .plate-submit {
          white-space: nowrap;
          display: inline-flex;
          align-items: center;
          gap: 6px;
          font-size: 1.1em;
          border: 2px solid #fff;
          padding: 0.8em 1.3em;
          border-radius: 1000px;
          &:hover {
            border-color: var(--primary);
            color: var(--primary);
            filter: brightness(1.5);
          }
        }
        @media (max-width: 768px) {
          & {
            padding-top: 40px;
          }
          .text {
            p {
              font-size: 0.9em;
              line-height: 1.4;
            }
            h3 {
              font-size: 1.35rem;
            }
          }
          .plate-input {
            flex-direction: column;
            gap: 20px;
          }
          .plate-submit {
            width: 100%;
            justify-content: center;
          }
        }
      }
      footer {
        opacity: 0.7;
      }
    }
  }
  &#section-process {
    @media (max-width: 768px) {
    }
  }
  &.full {
    min-height: 100vh;
    background: no-repeat center/cover;
    > div {
      max-width: initial;
    }
    max-width: initial;
    &.visual {
      position: relative;
      height: 100vh;
      display: flex;
      flex-direction: column;
      overflow: hidden;
      padding: 0 !important;
      .video-player {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
        z-index: 0;
        pointer-events: none; /* 클릭 비활성화 */
        background: #000; /* 영상 로딩 전 배경 */
        .mbYTP_wrapper {
          position: absolute !important;
          top: 50% !important;
          left: 50% !important;
          transform: translate(-50%, -50%) !important; /* 중앙 정렬 */
          min-width: 100% !important;
          min-height: 100% !important;
          width: 100% !important;
          height: 100% !important;
          z-index: 0 !important;
        }
        iframe {
          pointer-events: none;
        }
        /* Ensure local <video> background fills the entire area */
        video.background-video {
          position: absolute;
          top: 50%;
          left: 50%;
          min-width: 100%;
          min-height: 100%;
          width: auto;
          height: auto;
          transform: translate(-50%, -50%);
          object-fit: cover;
        }
      }
      .text {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        flex-grow: 1;
        background-color: rgba(0, 0, 0, 0.5);
        width: 100%;
        position: relative;
        z-index: 1;
        padding: 2em;
        word-break: keep-all;
        color: var(--white);

        h2 {
          font-size: 4.4em;
          @media (max-width: 768px) {
            font-size: 3.2em;
          }
        }
        > p {
          color: #fff;
          opacity: 0.7;
          font-size: 1.1em;
          @media (max-width: 768px) {
            font-size: 1em;
          }
        }
      }
      @media (prefers-reduced-motion: reduce) {
        .background-video {
          display: none;
        }
        .text {
          background-color: rgba(0, 0, 0, 0.7);
        }
      }
    }
  }

  /* --- Section-level transitions (per data-fx) --- */
  &[data-fx] {
    > div {
      opacity: 0;
      transform: none;
      clip-path: none;
      transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1), clip-path 0.9s cubic-bezier(0.22, 1, 0.36, 1);
      will-change: opacity, transform, clip-path;
    }
    &.visual {
      /* On the visual intro, animate the text block instead of the whole section container */
      > .text {
        opacity: 0;
        transform: none;
        transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1), transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
        will-change: opacity, transform;
      }
      > div {
        /* don't double-animate other direct children like scroll button */
        transition: none;
      }
    }
    &.is-inview {
      > div {
        opacity: 1;
        transform: none;
        clip-path: inset(0 0 0 0);
      }
      &.visual {
        > .text {
          opacity: 1;
          transform: none;
        }
      }
    }
    /* effect variants */
    &[data-fx='fade-scale'] {
      > div {
        transform: translateY(8px) scale(0.98);
      }
      &.visual {
        > .text {
          transform: translateY(8px) scale(0.98);
        }
      }
    }
    &[data-fx='slide-up'] {
      > div {
        transform: translateY(24px);
      }
      &.visual {
        > .text {
          transform: translateY(24px);
        }
      }
    }
    &[data-fx='slide-left'] {
      > div {
        transform: translateX(40px);
      }
    }
    &[data-fx='slide-right'] {
      > div {
        transform: translateX(-40px);
      }
    }
    &[data-fx='wipe'] {
      > div {
        clip-path: inset(0 100% 0 0);
      }
    }
    &[data-fx='stagger-up'] {
      > div {
        transform: translateY(12px);
        opacity: 0;
      }
      &.is-inview > div {
        transform: translateY(0);
        opacity: 1;
      }
    }
    @media (prefers-reduced-motion: reduce) {
      > div,
      &.visual > .text {
        opacity: 1 !important;
        transform: none !important;
        clip-path: inset(0 0 0 0) !important;
        transition: none !important;
      }
    }
  }
}

/* --- Generic scroll reveal animations --- */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.6s ease, transform 0.6s ease;
  will-change: opacity, transform;
  &.reveal-up {
    transform: translateY(16px);
  }
  &.reveal-down {
    transform: translateY(-16px);
  }
  &.reveal-left {
    transform: translateX(16px);
  }
  &.reveal-right {
    transform: translateX(-16px);
  }
  &.reveal-scale {
    transform: scale(0.96);
  }
  &.is-inview {
    opacity: 1;
    transform: none;
  }
  /* small, tasteful stagger helpers */
  &[data-delay='1'] {
    transition-delay: 0.08s;
  }
  &[data-delay='2'] {
    transition-delay: 0.16s;
  }
  &[data-delay='3'] {
    transition-delay: 0.24s;
  }
  &[data-delay='4'] {
    transition-delay: 0.32s;
  }
  &[data-delay='5'] {
    transition-delay: 0.4s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* === Section: Partners (section-partners) === */
.partners {
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  flex-direction: row;
  padding: 0;
  margin: 0;
  justify-content: center;
  --row-gap: 40px;
  --column-gap: 40px;
  --cell: 5;
  gap: var(--row-gap) var(--column-gap); /* row-gap 30px, column-gap 40px */
  li {
    transition: opacity 0.7s cubic-bezier(0.22, 1, 0.36, 1), transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
    opacity: 0;
    transform: translateY(16px);
    flex: 0 0 auto;
    width: calc((100% - (var(--cell) - 1) * var(--column-gap)) / var(--cell));
    display: flex;
    align-items: center;
    justify-content: center;
    /* padding: 30px; */
    img {
      max-width: 60%;
      max-height: 30px;
      object-fit: contain;
      @media (max-width: 768px) {
        max-width: 80%;
        max-height: 22px;
      }
    }
    &.is-inview {
      opacity: 1;
      transform: translateY(0);
    }
    &:hover {
      transform: translateY(0) scale(1.05);
      filter: brightness(1.05);
    }
  }
  @media (max-width: 768px) {
    --row-gap: 30px;
    --column-gap: 20px;
    li {
      --cell: 3;
    }
  }
}
/* === Section: Process (section-process) === */
.process {
  .line {
    position: absolute;
    top: 4em;
    left: -100vw;
    width: 200vw;
    height: 1px;
    background: var(--black);
    z-index: 1;
    @media (max-width: 768px) {
      top: 2rem;
    }
  }
  .grid {
    position: relative;
    z-index: 2; /* above the line */
  }
  /* 5-step process reveal animation */
  .step-item {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease, transform 0.6s ease;
    will-change: opacity, transform;
    h5 {
      font-size: 1.35em;
    }
    .img {
      width: 100%;
      max-width: 180px;
      aspect-ratio: 1/1;
      background: var(--black) no-repeat center/cover;
      .number {
        background-color: rgba(0, 0, 0, 0.3);
        width: 100%;
        height: 100%;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 4em;
      }
    }
    &.revealed {
      opacity: 1;
      transform: translateY(0);
    }
    @media (prefers-reduced-motion: reduce) {
      transition: none;
      opacity: 1;
      transform: none;
    }
  }
}

/* === Section: Features (section-features) === */
.feat-item {
  .text {
    text-align: left;
    margin-bottom: 2em;
  }
  .icon {
    display: flex;
    align-items: center;
    margin-bottom: 0.3em;
    img {
      vertical-align: middle;
      max-height: 180px;
    }
  }
  .material-symbols-sharp {
    font-size: 2rem;
    background: var(--gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    display: inline-block;
    line-height: 1;
  }
}
/* Mouse parallax targets */
[data-parallax] {
  will-change: transform;
  transition: transform 0.2s ease; /* small easing for snap */
}
@media (prefers-reduced-motion: reduce) {
  [data-parallax] {
    transition: none !important;
    transform: none !important;
  }
}
/* === Section: Support (section-support) - ask more === */
.ask-more {
  > h3 {
    font-weight: bold;
    font-size: 2em;
    color: var(--gray-light);
    line-height: 1.2;
  }
  > a {
    display: inline-block;
    margin-top: 0.8em;
  }
}