@font-face {
  font-family: 'Pretendard Variable';
  font-weight: 45 920;
  font-style: normal;
  font-display: swap;
  src: local('Pretendard Variable'),
       local('Pretendard'),
       url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations');
}

:root {
  /* 레이아웃 컨테이너 */
  --container-max: 1440px;

  /* 폰트 패밀리 */
  --font-sans: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont, system-ui,
    'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;

  /* 굵기 (4단계) */
  --fw-regular: 400;
  --fw-medium: 600;
  --fw-subhead: 700;
  --fw-bold: 800;

  /* 크기 계층 — rem 환산 기준: 1rem = 16px(브라우저 기본 글꼴 크기), 이 기준으로
     아래 모든 값을 px→rem 환산했다. KWCAG 2.2: 16px 미만은 --font-badge 단 하나만
     허용하며 배지/태그/스텝뱃지 전용이다(본문 흐름에 사용 금지). 위계는 크기가 아니라
     color·font-weight·여백으로 만든다 — 캡션·메타·라벨도 전부 --fs-base(16px)를 쓰고
     톤(색)과 굵기로만 구분한다. (참고: toss.im/daangn.com 실측 — 헤드라인 letter-spacing
     -0.02em 안팎, 본문 line-height 1.5~1.6) */
  --font-badge: 0.75rem;  /* 12px - 배지/태그/스텝뱃지 전용, 이 값만 16px 미만 허용 */
  --lh-badge: 1.4;
  --ls-badge: 0em;

  --fs-base: 1rem;       /* 16px - 본문·캡션·메타·라벨 공통(위계는 color/weight로) */
  --lh-base: 1.6;        /* 한글 실측(토스 1.6/당근 1.5) 반영 */
  --ls-base: 0em;        /* 당근 SEED 실측(본문 0) 채택 */

  --fs-lg: 1.25rem;      /* 20px - 카드 소제목/강조 숫자 */
  --lh-lg: 1.4;          /* 실측 카드제목 1.4~1.48 반영 */
  --ls-lg: -0.02em;      /* 토스 TDS 실측(-0.02em 내외) 반영 */

  --fs-h1: clamp(2.125rem, 1.35rem + 3.31vw, 2.8rem);        /* 섹션 헤드라인, 34~64px */
  --lh-h1: 1.25;
  --ls-h1: -0.025em;

  --fs-display: clamp(2.875rem, 2.05rem + 3.54vw, 4.875rem);  /* 히어로 헤드라인, 46~78px */
  --lh-display: 1.2;
  --ls-display: -0.035em;
}

* {
  box-sizing: border-box
}

/* scroll-behavior:smooth를 html에 항상 걸어두면 크로미움에서 페이지 최초 로드 시
   URL 해시(#faq 등)로의 자동 스크롤이 아예 동작하지 않는 문제가 있음 — 로드가
   끝난 뒤 nav.js가 이 클래스를 붙여 이후의(클릭에 의한) 이동만 smooth로 처리 */
html.smooth-scroll {
  scroll-behavior: smooth
}

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  color: #151515;
  background: #fff;
  font-family: var(--font-sans);
  word-break: keep-all;
  padding-top: 72px
}

main {
  flex: 1
}

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

.wrap {
  max-width: var(--container-max);
  margin: auto;
  padding: 0 40px
}

@media (max-width: 1024px) {
  .wrap {
    padding: 0 32px
  }
}

@media (max-width: 768px) {
  .wrap {
    padding: 0 24px
  }
}

@media (max-width: 480px) {
  .wrap {
    padding: 0 16px
  }
}

nav {
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  border-bottom: 1px solid #eee;
  background: #fffdfbf0;
  backdrop-filter: blur(16px);
  box-shadow: 0 1px 12px rgba(0, 0, 0, .06);
  z-index: 100;
  transition: background .2s ease, box-shadow .2s ease, border-color .2s ease
}

nav.is-top:not(.force-opaque) {
  background: transparent;
  border-bottom-color: transparent;
  box-shadow: none
}

nav.is-top:not(.force-opaque) .logo,
nav.is-top:not(.force-opaque) .navlinks a {
  color: #fff
}

nav a:focus-visible,
nav button:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px
}

.nav-top-scrim {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 120px;
  z-index: 99;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent);
  opacity: 0;
  transition: opacity .2s ease
}

#siteNav.is-top:not(.force-opaque)~.nav-top-scrim {
  opacity: 1
}

@media (prefers-reduced-motion: reduce) {

  nav,
  .nav-top-scrim {
    transition: none
  }
}

body.has-hero {
  padding-top: 0
}

.logo {
  position: relative;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold)
}

.logo::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: 44px
}

.logo i {
  color: #ff5b35;
  font-style: normal
}

.navlinks {
  display: flex;
  gap: 30px;
  font-size: var(--fs-base);
  color: #666
}

.navbtn {
  position: relative;
  background: #151515;
  color: #fff;
  padding: 11px 17px;
  border-radius: 99px;
  font-size: var(--fs-base);
  font-weight: var(--fw-subhead)
}

.navbtn::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(100%, 44px);
  height: 44px
}

/* ===== 언어 전환 (언어팩이 2개 이상일 때만 렌더링) ===== */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 16px
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0
}

.lang-switch {
  position: relative;
  display: flex;
  align-items: center;
  font-size: var(--fs-base)
}

.lang-trigger {
  min-height: 36px;
  padding: 0 9px 0 10px;
  border: 1px solid #d9e0ea;
  border-radius: 999px;
  background: #fff;
  color: #1e293b;
  font: inherit;
  font-weight: var(--fw-subhead);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: border-color .2s ease, background .2s ease, box-shadow .2s ease
}

.lang-trigger:hover,
.lang-switch.is-open .lang-trigger {
  border-color: #aab8cc;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .1)
}

.lang-trigger-icon {
  width: 16px;
  height: 16px;
  color: #2563eb;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.2
}

.lang-trigger-arrow {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  transition: transform .2s ease
}

.lang-switch.is-open .lang-trigger-arrow { transform: rotate(180deg) }

.lang-menu {
  position: absolute;
  z-index: 20;
  top: calc(100% + 8px);
  right: 0;
  min-width: 132px;
  padding: 5px;
  border: 1px solid #e1e7f0;
  border-radius: 12px;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 12px 28px rgba(15, 23, 42, .14);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .16s ease, transform .16s ease, visibility .16s ease
}

.lang-switch.is-open .lang-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0)
}

.lang-menu-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 10px;
  border-radius: 8px;
  color: #475569;
  font-size: 13px;
  font-weight: var(--fw-subhead);
  text-decoration: none;
  transition: color .16s ease, background .16s ease
}

.lang-menu-item:hover,
.lang-menu-item:focus-visible {
  background: #eff6ff;
  color: #2563eb;
  outline: none
}

.lang-menu-item.is-current { color: #1d4ed8 }

nav.is-top:not(.force-opaque) .lang-trigger {
  border-color: rgba(255, 255, 255, .42);
  background: rgba(15, 23, 42, .25);
  color: #fff
}

nav.is-top:not(.force-opaque) .lang-trigger-icon { color: #bfdbfe }

.lang-trigger:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px
}

@media (max-width: 480px) {
  .nav-actions {
    gap: 8px
  }

  .lang-trigger {
    max-width: 96px;
    padding-left: 8px
  }
}

.hero {
  position: relative;
  height: 100vh;
  height: 100svh;
  min-height: 560px;
  overflow: hidden;
  --hero-focal: 50% 50%;
  --hero-scrim-top: .55;
  --hero-scrim-mid: .25;
  --hero-scrim-bottom: .65;
  --hero-scrim-side: .6
}

.hero__media {
  position: absolute;
  inset: 0;
  z-index: 0
}

.hero__media-el {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--hero-focal)
}

.hero__media-video {
  z-index: 1
}

.hero__media-fallback {
  z-index: 0
}

@media (prefers-reduced-motion: reduce) {
  .hero__media-video {
    display: none
  }
}

.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, var(--hero-scrim-side)) 0%, transparent 60%),
    linear-gradient(180deg, rgba(0, 0, 0, var(--hero-scrim-top)) 0%, rgba(0, 0, 0, var(--hero-scrim-mid)) 40%, rgba(0, 0, 0, var(--hero-scrim-bottom)) 100%)
}

.hero__content {
  position: relative;
  z-index: 2;
  height: 100%;
  display: flex;
  align-items: center
}

.hero__content .wrap {
  width: 100%
}

.hero__sentinel {
  position: absolute;
  left: 0;
  bottom: 72px;
  width: 100%;
  height: 1px;
  pointer-events: none
}

.hero-kv-gather {
  position: relative;
  /* 컨테이너 폭 제한 없이 뷰포트에 비례해서 자유롭게 늘어나고 줄어들도록 vw 기준(브랜드 폰트 상한과 맞춰 clamp) */
  width: 50%;
  margin: 0 auto;
  height: clamp(48px, 9vw, 94px)
}

.hero-kv-wipe {
  /* gather 안쪽이 아니라 헤드라인/브랜드 줄 아래, 설명 문단 위에 별도 줄로 배치 */
  margin-top: 22px;
  height: 2px;
  pointer-events: none;
  opacity: 0
}

.hero-kv-wipe-line {
  display: block;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, .5)
}

.hero-kv-text {
  position: absolute;
  /* 오른쪽 정렬 박스보다 콘텐츠가 넓으면 크로미움이 왼쪽 기준으로 넘쳐서, 고정폭 대신 콘텐츠 크기 박스를 좌/우 끝에 붙임 */
  width: max-content;
  /* 헤드라인(2줄)과 브랜드(1줄) 높이가 달라서 아래쪽 기준으로 나란히 맞춤 */
  bottom: 0
}

.hero-kv-text--left {
  left: 0;
  max-width: min(500px, 85vw)
}

.hero-kv-text--right {
  right: 0
}

.hero-kv-headline {
  margin: 0;
  /* 순수 vw는 .wrap이 --container-max에서 폭 성장을 멈춘 뒤에도 계속 커져서 겹침 발생 → clamp로 상/하한 고정 */
  font-size: clamp(1.25rem, 3vw, 2.25rem);
  font-weight: var(--fw-bold);
  line-height: 1.15;
  letter-spacing: var(--ls-h1);
  color: #fff;
  white-space: nowrap
}

.hero-kv-brand {
  font-size: clamp(2rem, 8vw, 5.875rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: #fff
}

.hero-kv-desc {
  margin: 24px 0 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: rgba(255, 255, 255, .82);
  max-width: 620px;
  word-break: keep-all;
  text-wrap: pretty
}

@media (prefers-reduced-motion: reduce) {

  .hero-kv-gather {
    width: 100%
  }

  .hero-kv-wipe {
    opacity: 1
  }
}

.actions {
  display: flex;
  gap: 10px;
  margin-top: 30px
}

.btn {
  padding: 15px 20px;
  border-radius: 13px;
  border: 1px solid #ddd;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  background: #fff
}

.btn.black {
  background: #151515;
  color: #fff;
  border-color: #151515
}

@media (max-width: 768px) {
  .actions {
    flex-direction: column;
    align-items: stretch
  }

  .actions .btn {
    width: 100%;
    text-align: center
  }
}

@media (max-width: 480px) {
  .hero {
    min-height: 480px
  }
}

section {
  padding: 110px 0
}

.soft {
  /* background: #f7f6f3; */
  background: #F3F5F7;
}

.center {
  text-align: center
}

.eyebrow {
  font-size: var(--fs-base);
  color: #1649A2;
  font-weight: var(--fw-medium);
}

.title {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  margin: 12px 0 18px;
  word-break: keep-all;
  text-wrap: pretty
}

@media (max-width: 480px) {
  .title {
    margin: 12px 0 7px;
  }
}

.sub {
  font-size: var(--fs-base);
  color: #666;
  line-height: var(--lh-base);
  max-width: 650px;
  margin: 0 auto;
  word-break: keep-all
}

.features-top {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 65px;
  align-items: center
}

/* .features-intro h2 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  margin: 12px 0;
  word-break: keep-all;
  text-wrap: pretty
} */

/* .features-intro p {
  font-size: var(--fs-base);
  color: #666;
  line-height: var(--lh-base)
} */

.features-preview {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  /* border-radius: 28px; */
  /* background: #eff4fe; */
  /* box-shadow: 0 20px 50px rgba(37, 99, 235, .12); */
  overflow: hidden;
}

.features-preview img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  height: 90%;
  object-fit: contain;
  opacity: 1;
  transition: opacity .2s ease
}

.features-preview img.is-fading {
  opacity: 0
}

@media (prefers-reduced-motion: reduce) {
  .features-preview img {
    transition: none
  }
}

.features-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 50px
}

.features-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  background: #fff;
  border-radius: 22px;
  padding: 27px;
  height: 165px;
  border: 1px solid #e7e7e7;
}

.features-card-num {
  font-size: var(--fs-base);
  color: #2760c5;
  font-weight: var(--fw-bold);
}

.features-card-label {
  font-size: var(--fs-lg);
  font-weight: var(--fw-subhead);
  color: #151515
}

.features-card-desc {
  color: #666;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  white-space: pre-line;
}

@media (max-width: 768px) {
  .features-top {
    grid-template-columns: 1fr
  }

  .features-cards {
    grid-template-columns: repeat(2, 1fr)
  }
}

@media (max-width: 480px) {
  .features-intro {
    text-align: center
  }
}

@media (max-width: 480px) {
  .features-cards {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    scroll-padding-right: 40px;
    padding-right: 40px;
    scrollbar-width: none;
    -ms-overflow-style: none
  }

  .features-cards::-webkit-scrollbar {
    display: none
  }

  .features-card {
    flex: 0 0 240px;
    padding: 16px;
    height: 180px;
    scroll-snap-align: center
  }
}

.story {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 65px;
  align-items: center
}

.story h2 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  margin: 12px 0;
  word-break: keep-all;
  text-wrap: pretty
}

.story p {
  font-size: var(--fs-base);
  color: #666;
  line-height: var(--lh-base)
}

.story-visual {
  height: 500px;
  background: #ebe9ff;
  border-radius: 28px;
  position: relative;
  overflow: hidden
}

.story-card {
  position: absolute;
  background: #fff;
  border-radius: 18px;
  padding: 24px;
  box-shadow: 0 20px 50px #5552;
  right: 30px;
  bottom: 30px;
  width: 260px
}

.story-card b {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold)
}

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 50px
}

.card {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 22px;
  padding: 27px
}

.card .num {
  font-size: var(--fs-base);
  color: #ff5b35;
  font-weight: var(--fw-bold)
}

.card h3 {
  margin: 10px 0 8px;
  font-size: var(--fs-lg);
  font-weight: var(--fw-subhead)
}

.card p {
  color: #666;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  margin: 0
}

.portfolio-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 50px
}

.portfolio-card {
  background: #fff;
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 20px 50px #5552
}

.portfolio-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #d8d5cf, #a9a49b)
}

.portfolio-photo-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #8d8c8c;
  font-size: 20px;
}

.portfolio-card.is-upcoming {
  cursor: default;
  opacity: .85;
  pointer-events: none
}

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

.portfolio-info {
  padding: 24px
}

.portfolio-card h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-subhead);
  line-height: var(--lh-lg);
  margin: 0
}

.portfolio-card p {
  color: #666;
  font-size: var(--fs-base);
  margin: 10px 0 0
}

.portfolio-card {
  cursor: pointer
}

body.modal-open {
  overflow: hidden
}

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #15151599;
  padding: 24px;
  z-index: 100;
  align-items: center;
  justify-content: center
}

.modal-overlay.open {
  display: flex
}

.modal {
  background: #fff;
  border-radius: 22px;
  width: 100%;
  max-width: 500px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative
}

@media (max-width: 768px) {
  .modal {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100vh;
    height: 100dvh;
    max-width: none;
    max-height: none;
    margin: 0;
    border-radius: 0;
    padding-top: env(safe-area-inset-top, 0px)
  }
}

.modal-close {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  color: #151515;
  font-size: var(--fs-base);
  cursor: pointer;
  z-index: 2;
  box-shadow: 0 4px 12px #15151522
}

@media (max-width: 768px) {
  .modal-close {
    display: none
  }
}

.portfolio-media-placeholder {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #d8d5cf, #a9a49b)
}

.portfolio-swiper,
.portfolio-media-placeholder {
  width: 100%;
  flex-shrink: 0
}


.portfolio-swiper {
  --swiper-navigation-size: 18px;
  --swiper-navigation-color: #1649A2;
  --swiper-pagination-color: #1649A2;
  --swiper-pagination-bullet-inactive-color: #fff;
  --swiper-pagination-bullet-inactive-opacity: .6
}


.portfolio-swiper .swiper-wrapper,
.portfolio-swiper .swiper-slide {
  height: auto
}

.portfolio-swiper .swiper-slide {
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #d8d5cf, #a9a49b)
}

.portfolio-swiper .swiper-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block
}

.portfolio-swiper .swiper-slide img.is-broken {
  display: none
}

.portfolio-swiper .swiper-button-prev,
.portfolio-swiper .swiper-button-next {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 4px 12px #15151533
}

.portfolio-swiper .swiper-button-prev::after,
.portfolio-swiper .swiper-button-next::after {
  font-weight: var(--fw-subhead)
}

.portfolio-swiper .swiper-button-prev {
  left: 14px
}

.portfolio-swiper .swiper-button-next {
  right: 14px
}

.portfolio-swiper .swiper-pagination-bullet {
  opacity: 1
}

.modal-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 28px
}

/* 스크롤 영역이 실제로 넘칠 때만 JS가 붙이는 클래스 — 상단 경계를
   그림자로 표시해 "이 아래는 스크롤된다"를 알려줌 */
.modal-body.has-overflow {
  box-shadow: inset 0 8px 8px -8px rgba(0, 0, 0, .15)
}

/* 모바일 하단 고정 닫기 바 — 데스크톱/태블릿에서는 숨김.
   .modal-body(flex:1) 뒤에 자연스러운 flex 아이템으로 놓여 항상 바닥에
   붙고, 콘텐츠와 겹치지 않아 마지막 내용을 가리지 않음(별도 여백 계산 불필요) */
.modal-mobile-close-bar {
  display: none
}

@media (max-width: 768px) {
  .modal-mobile-close-bar {
    display: flex;
    flex-shrink: 0;
    justify-content: center;
    background: #fff;
    box-shadow: 0 -4px 12px rgba(21, 21, 21, .08);
    padding: 8px 20px calc(8px + env(safe-area-inset-bottom, 0px))
  }

  .modal-bottom-close {
    width: 100%;
    height: 48px;
    border: 0;
    border-radius: 12px;
    background: #F3F5F7;
    color: #151515;
    font-size: var(--fs-base);
    font-weight: var(--fw-subhead);
    font-family: inherit;
    cursor: pointer
  }
}

.modal-title {
  font-size: var(--fs-lg);
  font-weight: var(--fw-subhead);
  line-height: var(--lh-lg);
  margin: 8px 0 20px;
  word-break: keep-all
}

.modal-meta {
  border-top: 1px solid #e7e7e7;
  margin-bottom: 24px
}

.modal-flow {
  display: flex;
  /* grid-template-columns: repeat(3, 1fr); */
  /* gap: 12px; */
  margin-bottom: 28px
}

.modal-flow-item {
  background: #F3F5F7;
  border-radius: 16px;
  padding: 18px;
  width: 100%;
}

.modal-flow-item small {
  display: block;
  font-size: var(--fs-badge);
  font-weight: var(--fw-medium);
  color: #1649A2;
  letter-spacing: .08em;
  margin-bottom: 8px
}

.modal-flow-item p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: #333
}

@media (max-width: 800px) {

  .hero .wrap,
  .story {
    grid-template-columns: 1fr
  }

  .hero-visual {
    height: 430px
  }

  .grid,
  .portfolio-grid,
  .modal-flow {
    grid-template-columns: 1fr
  }

  .modal-body {
    padding: 22px
  }

  .dashstats {
    grid-template-columns: 1fr 1fr
  }

  .navlinks {
    display: none
  }
}

/* ===== 행사 진행 순서 섹션 ===== */

.process-block {
  margin-bottom: 96px;
}

.process-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 48px
}

.process-heading h2 {
  margin: 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-bold);
  color: #151515;
  word-break: keep-all;
  text-wrap: pretty
}

.process-heading p {
  margin: 16px 0 0;
  color: #666;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  word-break: keep-all
}

.process-stage {
  position: relative;
  width: 100%;
  max-width: 1440px;
  aspect-ratio: 1080 / 660;
  margin: 0 auto;
  border-radius: 32px;
  background: linear-gradient(180deg, #F3F8FF, #E9F1FE);
  background-image:
    linear-gradient(180deg, #F3F8FF, #E9F1FE),
    repeating-linear-gradient(0deg, rgba(37, 99, 235, .06) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(90deg, rgba(37, 99, 235, .06) 0 1px, transparent 1px 40px);
  box-shadow: 0 20px 60px rgba(37, 99, 235, .1);
  overflow: hidden;
}

.process-stage-oval {
  position: absolute;
  left: 50%;
  top: 50.8%;
  width: 74.5%;
  height: 64.8%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: #fff;
  opacity: .55
}

.process-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%
}

.process-track {
  fill: none;
  stroke: #CBDCF8;
  stroke-width: 2;
  stroke-dasharray: 3 11;
  stroke-linecap: round
}

.process-track-progress {
  fill: none;
  stroke: #2563eb;
  stroke-width: 2;
  stroke-dasharray: 3 11;
  stroke-linecap: round;
  transition: d .28s cubic-bezier(.2, .8, .2, 1)
}

.process-nodes {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none
}

.process-hover-zones {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%
}

.process-hover-zone {
  fill: rgba(37, 99, 235, 0);
  cursor: pointer;
  pointer-events: all
}

.process-node {
  position: absolute;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 12px;
  border: none;
  border-radius: 18px;
  background: #fff;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 2px 8px rgba(15, 23, 42, .06);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1),
              background-color .28s cubic-bezier(.2, .8, .2, 1),
              box-shadow .28s cubic-bezier(.2, .8, .2, 1),
              z-index .28s;
  z-index: 1;
  pointer-events: auto
}

@media (min-width: 769px) and (hover: hover) {
  /* 보이는 버튼보다 넓은 투명 영역까지 같은 버튼으로 인식해 hover 전환을 쉽게 합니다. */
  .process-node::before {
    content: '';
    position: absolute;
    inset: -24px -32px;
  }
}

.process-node-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 10px;
  background: #DBEAFE;
  color: #1E293B;
  font-size: var(--font-badge);
  font-weight: var(--fw-bold);
  transition: background-color .28s cubic-bezier(.2, .8, .2, 1),
              color .28s cubic-bezier(.2, .8, .2, 1)
}

.process-node-label {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: #1E293B;
  white-space: nowrap;
  transition: color .28s cubic-bezier(.2, .8, .2, 1)
}

.process-node.is-upcoming .process-node-badge {
  background: transparent;
  color: #697380
}

.process-node.is-upcoming .process-node-label {
  color: #697380
}

.process-node.is-current {
  background: #2563eb;
  transform: translate(-50%, -50%) scale(1.06);
  box-shadow: 0 12px 28px rgba(37, 99, 235, .35);
  z-index: 3
}

.process-node.is-current .process-node-badge {
  background: rgba(255, 255, 255, .2);
  color: #fff
}

.process-node.is-current .process-node-label {
  color: #fff
}

.process-node:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px
}

.process-panel {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: min(500px, 42%);
  background: #fff;
  border-radius: 28px;
  border: none;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .14);
  padding: clamp(16px, 3%, 28px);
  text-align: left;
  z-index: 3
}

.process-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.process-panel-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 14px;
  background: #2563eb;
  color: #fff;
  font-size: clamp(1rem, 1.6vw, 1.25rem);
  font-weight: var(--fw-bold)
}

.process-panel-step {
  font-size: var(--fs-base);
  font-weight: var(--fw-bold);
  letter-spacing: .04em;
  color: #2563eb;
  text-transform: uppercase
}

.process-panel-body {
  display: grid;
  /* 이미지 트랙을 텍스트 줄바꿈(row 높이)이 아니라 패널 자체 폭의 %로 고정 —
     높이 기준으로 잡으면 좁은 화면에서 "이미지 커짐→텍스트 칸 줄어듦→줄바꿈 증가→
     이미지 더 커짐" 순환이 생겨 폭 기준(비순환)으로 전환 */
  grid-template-columns: 1fr minmax(56px, 24%);
  align-items: start;
  gap: clamp(12px, 2.5%, 20px);
  margin-top: 16px
}

.process-panel-left {
  display: flex;
  flex-direction: column;
  min-width: 0
}

.process-panel-text {
  min-width: 0
}

.process-panel-media {
  width: 100%;
  border-radius: 16px;
  color: #93a5c4;
  overflow: hidden
}

.process-panel-media img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.process-panel-name {
  margin: 0;
  font-size: clamp(1.1rem, 2.4vw, 1.6875rem);
  font-weight: var(--fw-bold);
  color: #151515;
  word-break: keep-all
}

.process-panel-desc {
  margin: 8px 0 0;
  font-size: clamp(1rem, 1.4vw, 1.0625rem);
  line-height: var(--lh-base);
  color: #64748B;
  word-break: keep-all
}

.process-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 20px
}

.process-dot {
  width: 8px;
  height: 8px;
  padding: 0;
  border: none;
  border-radius: 999px;
  background: #d2d2d2;
  cursor: pointer;
  transition: width .28s cubic-bezier(.2, .8, .2, 1),
              background-color .28s cubic-bezier(.2, .8, .2, 1)
}

.process-dot.is-current {
  width: 26px;
  background: #2563eb
}

.process-dot:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 3px
}

.process-fallback-list {
  display: none;
  list-style: none;
  margin: 32px 0 0;
  padding: 0
}

@media (prefers-reduced-motion: reduce) {
  .process-node,
  .process-node-badge,
  .process-node-label,
  .process-track-progress,
  .process-dot {
    transition: none
  }

  .process-node.is-current {
    transform: translate(-50%, -50%)
  }
}

@media (max-width: 768px) {
  .process-block {
    margin-bottom: 64px
  }

  .process-node {
    padding: 0;
    border-radius: 50%;
    box-shadow: none;
    background: transparent
  }

  .process-hover-zones {
    display: none
  }

  .process-node-label {
    display: none
  }

  .process-node .process-node-badge {
    width: 26px;
    height: 26px
  }

  .process-node.is-current {
    background: transparent;
    box-shadow: none
  }

  .process-node.is-current .process-node-badge {
    background: #2563eb;
    color: #fff
  }
}

@media (max-width: 480px) {
  .process-stage {
    display: none
  }

  .process-fallback-list {
    display: block;
    position: relative;
    padding-left: 40px
  }

  .process-fallback-list::before {
    content: '';
    position: absolute;
    left: 15px;
    top: 16px;
    bottom: 16px;
    width: 0;
    border-left: 2px dashed #CBDCF8
  }

  .process-fallback-item {
    position: relative;
    margin-left: -40px
  }

  .process-fallback-item+.process-fallback-item {
    margin-top: 20px
  }

  .process-fallback-btn {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    width: 100%;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
    text-align: left;
    font-family: inherit
  }

  .process-fallback-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: #DBEAFE;
    color: #1E293B;
    font-size: var(--font-badge);
    font-weight: var(--fw-bold);
    transition: background-color .2s, color .2s
  }

  .process-fallback-text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 4px
  }

  .process-fallback-text strong {
    font-size: var(--fs-base);
    font-weight: var(--fw-subhead);
    color: #697380;
    transition: color .2s
  }

  .process-fallback-text em {
    font-style: normal;
    font-size: var(--fs-base);
    color: #697380;
    transition: color .2s
  }

  .process-fallback-item.is-current .process-fallback-badge {
    background: #2563eb;
    color: #fff
  }

  .process-fallback-item.is-current .process-fallback-text strong {
    color: #151515
  }

  .process-fallback-item.is-current .process-fallback-text em {
    color: #64748B
  }

  .process-fallback-btn:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 3px
  }
}

.feature-cards-section {
  padding-top: 110px;
  position: relative;
  overflow: hidden;
  /* 히어로(어두운 사진) 톤을 이어받는 라이트 블루 → 아래 #features(#F3F5F7)로 경계 없이 합류 */
  background: linear-gradient(180deg, #eff4fe 0%, #f6f9fe 45%, #F3F5F7 100%);
}

.feature-cards-section > .wrap {
  position: relative;
  z-index: 1;
}

.feature-cards-glow {
  position: absolute;
  z-index: 0;
  border-radius: 50%;
  pointer-events: none;
  filter: blur(90px);
  will-change: transform
}

.feature-cards-glow--a {
  top: -140px;
  left: -100px;
  width: 440px;
  height: 440px;
  opacity: .3;
  background: radial-gradient(circle, #2563eb 0%, transparent 70%)
}

.feature-cards-glow--b {
  bottom: -120px;
  right: -80px;
  width: 400px;
  height: 400px;
  opacity: .22;
  background: radial-gradient(circle, #b8cdf5 0%, transparent 70%)
}

@media (prefers-reduced-motion: reduce) {
  .feature-cards-glow {
    will-change: auto
  }
}

.feature-cards-bg {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  width: 100%;
  min-height: calc(100vw * 443 / 2102);
  padding: clamp(100px, 15vw, 220px) 0;
  background-image: url('/festline/images/feature/feature_bg_img.png');
  background-repeat: no-repeat;
  background-position: bottom center;
  background-size: 100% auto;
  pointer-events: none;
}

.feature-cards-heading {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 40px;
}

.feature-cards-heading h2 {
  margin: 16px 0 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-bold);
  color: #151515;
  word-break: keep-all;
  text-wrap: pretty
}

/* .feature-cards-heading p {
  margin: 16px 0 0;
  color: #666;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  word-break: keep-all
} */

.feature-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch
}

.feature-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .04), 0 12px 32px rgba(0, 0, 0, .06);
  padding: 28px;
  /* 진입 애니메이션은 GSAP가 담당(초기 opacity/transform은 JS의 gsap.set) */
  transition: transform .2s ease, box-shadow .2s ease
}

.feature-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, .06), 0 20px 48px rgba(0, 0, 0, .1)
}

@media (prefers-reduced-motion: reduce) {
  .feature-card:hover {
    transform: none
  }
}

.feature-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #eff4fe;
  color: #2563eb
}

.feature-card-icon svg {
  width: 24px;
  height: 24px
}

.feature-card-title {
  margin: 16px 0 0;
  font-size: var(--fs-lg);
  font-weight: var(--fw-subhead);
  color: #151515;
  word-break: keep-all
}

.feature-card-desc {
  margin: 8px 0 0;
  font-size: var(--fs-base);
  color: #666;
  line-height: var(--lh-base);
  word-break: keep-all;
  white-space: pre-line;
}

@media (max-width: 768px) {
  .feature-cards-section {
    padding-top: 80px
  }

  .feature-cards-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px
  }

  .feature-card {
    padding: 20px
  }

  .feature-card-desc {
    white-space: normal
  }
}

@media (max-width: 480px) {
  .feature-cards-grid {
    display: none
  }

  .feature-card {
    display: grid;
    grid-template-columns: 48px 1fr;
    column-gap: 16px;
    row-gap: 4px;
    align-items: center
  }

  .feature-card-icon {
    grid-row: 1 / 3;
    margin: 0
  }

  .feature-card-title {
    grid-column: 2;
    margin-top: 0
  }

  .feature-card-desc {
    grid-column: 2;
    margin-top: 0;
    white-space: normal
  }
}

/* ===== #simulation (관람객 시뮬레이션) =====
   색상 매핑: 포인트 블루→#1649A2(전역 .eyebrow와 동일 톤) / 본문→#151515 /
   보조 텍스트(+본문 보조)→#666(KWCAG 4.5:1 확보, 사이트 내 별도 3단계 그레이 없어 통합) /
   회색면→#F3F4F7(.included과 동일) / 연한 블루면→#eff4fe(.feature-card-icon과 동일) /
   섹션 배경→#F3F5F7(.soft, 위 섹션 #features와 동일해 경계 없음) */
.sim-section {
  padding: 120px 0;
  background: #F3F5F7;
}

.sim-header {
  max-width: 640px;
  margin: 0 auto;
  text-align: center
}

/* .sim-headline {
  margin: 16px 0 0;
  font-size: var(--fs-h1);
  line-height: var(--lh-h1);
  letter-spacing: var(--ls-h1);
  font-weight: var(--fw-bold);
  color: #151515;
  word-break: keep-all;
  text-wrap: pretty
} */

/* .sim-sub {
  margin: 16px 0 0;
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: #666;
  word-break: keep-all;
} */

.sim-tabs-wrap {
  margin-top: 64px;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none
}

.sim-tabs-wrap::-webkit-scrollbar {
  display: none
}

@media (max-width: 480px) {
  .sim-tabs-wrap {
    position: relative;
    scroll-padding-right: 40px;
    padding-right: 40px
  }

  .sim-tabs-wrap::before,
  .sim-tabs-wrap::after {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 40px;
    pointer-events: none;
    z-index: 1;
    transition: opacity .2s ease
  }

  .sim-tabs-wrap::before {
    left: 0;
    background: linear-gradient(to right, #F3F5F7, transparent);
    opacity: 0
  }

  .sim-tabs-wrap::after {
    right: 0;
    background: linear-gradient(to left, #F3F5F7, transparent)
  }

  .sim-tabs-wrap.is-scrolled::before {
    opacity: 1
  }

  .sim-tabs-wrap.is-end::after {
    opacity: 0
  }
}

.sim-tabs {
  /* overflow 컨테이너에서 justify-content:center를 쓰면 초기 스크롤 위치가
     가운데로 맞춰지는(첫 탭이 가려지는) 브라우저 동작이 있어, 대신 auto-margin으로
     중앙 정렬 — 넘칠 때는 auto margin이 0으로 수렴해 자연스럽게 처음(첫 탭)부터 보임 */
  display: flex;
  gap: 2px;
  width: fit-content;
  margin: 0 auto;
  padding: 6px;
  border-radius: 999px;
  background: #F9F9FA;
  scroll-snap-type: x proximity
}

.sim-tab {
  scroll-snap-align: center;
  display: flex;
  align-items: center;
  gap: 6px;
  height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: #666;
  font-family: inherit;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .2s ease, color .2s ease, box-shadow .2s ease
}

.sim-tab-no {
  font-size: var(--fs-base);
  opacity: .55
}

.sim-tab.is-active {
  background: #fff;
  color: #1649A2;
  box-shadow: 0 1px 3px rgba(25, 31, 40, .10)
}

.sim-tab:focus-visible {
  outline: 2px solid #1649A2;
  outline-offset: 2px
}

.sim-card-wrap {
  position: relative
}

.sim-progress {
  display: none
}

.sim-gif-nav {
  display: none
}

.sim-card {
  margin-top: 25px;
  background: #fff;
  border-radius: 20px;
  padding: 64px;
  /* 모든 스텝 패널을 같은 셀(1/1)에 겹쳐 쌓아 카드 높이가 항상
     "가장 긴 콘텐츠" 기준으로 고정되게 함 — 탭 전환 시 1px도 안 변함,
     JS로 높이를 측정/하드코딩할 필요 없음 */
  display: grid
}

/* 카드 padding(64px) 안쪽에 두면 768px 이하에서 padding이 24px로 줄어
   48px(또는 44px) 버튼이 텍스트/GIF와 겹치게 됨 — 모든 폭에서 일관되게
   카드 "바깥"(섹션 배경 위, .sim-card-wrap 기준)에 배치 */
.sim-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .06), 0 8px 24px rgba(0, 0, 0, .08);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #151515;
  cursor: pointer;
  transition: box-shadow .2s ease, color .2s ease;
  z-index: 1
}

.sim-nav-btn::before {
  content: '';
  position: absolute;
  inset: -4px
}

.sim-nav-btn svg {
  width: 20px;
  height: 20px
}

/* 카드 가장자리에 절반은 카드 자체 padding(64px) 안, 절반은 .wrap 거터에
   걸치도록 배치 — .wrap 거터(40px)만으로는 버튼 지름(48px)을 다 못 담아서
   순수 "바깥" 배치는 1440px 실뷰포트에서 화면 밖으로 잘리는 걸 확인 후 수정 */
.sim-nav-prev {
  left: -24px
}

.sim-nav-next {
  right: -24px
}

.sim-nav-btn:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, .10), 0 12px 32px rgba(0, 0, 0, .12);
  color: #1649A2
}

.sim-nav-btn:active {
  transform: translateY(-50%) scale(.94)
}

.sim-nav-btn:focus-visible {
  outline: 2px solid #1649A2;
  outline-offset: 2px
}

@media (prefers-reduced-motion: reduce) {
  .sim-nav-btn {
    transition: none
  }
}

.sim-panel {
  grid-area: 1 / 1;
  min-width: 0;
  display: grid;
  /* 1fr 1fr는 트랙의 암묵적 최소값이 각 칼럼 콘텐츠의 min-content라서
     스텝마다 제목·설명 길이에 따라 칼럼 폭(그래서 GIF 크기)이 달라짐 —
     minmax(0,1fr)로 최소값을 0으로 고정해 항상 정확히 반반 */
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 80px;
  align-items: center;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease
}

.sim-panel.is-active {
  visibility: visible;
  opacity: 1;
  pointer-events: auto
}

.sim-step-badge {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 999px;
  background: #eff4fe;
  color: #1649A2;
  font-size: var(--font-badge);
  font-weight: var(--fw-bold)
}

.sim-title {
  margin: 20px 0 0;
  font-size: 2.75rem;
  font-weight: var(--fw-bold);
  color: #151515;
  line-height: 1.3;
  word-break: keep-all
}

.sim-desc {
  margin: 20px 0 0;
  font-size: 1.0625rem;
  line-height: 1.75;
  color: #666;
  word-break: keep-all
}

.sim-panel-media {
  display: flex;
  flex-direction: column;
  align-items: end;
}

.sim-media-inner {
  /* gif의 실제(뷰포트 높이에 따라 달라지는) 폭에 아래 버튼 줄 폭을 맞추기 위한 래퍼.
     inline-flex는 폭이 콘텐츠(=gif의 고유 폭)에 맞춰 줄어들고, actions는 이 래퍼의
     100%로 채워서 항상 gif와 같은 폭이 된다. */
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 80%
}

.sim-gif {
  /* height를 기준으로 잡고 width:auto + aspect-ratio로 폭을 따라가게 함 —
     뷰포트가 낮은 작은 데스크탑 화면에서 세로 크기만 줄어들고 비율은 유지됨.
     max-width는 세로로 긴(높이가 큰) 좁은 모바일 화면에서 높이 기준 폭이
     카드 폭을 넘어 가로 스크롤을 유발하지 않도록 하는 안전장치(넘치면 크롭). */
  height: min(56vh, 576px);
  width: auto;
  max-width: 100%;
  aspect-ratio: 4 / 5;
  border-radius: 20px;
  object-fit: cover;
  display: block;
  background: #F3F4F7;
  transition: opacity .2s ease
}

@media (prefers-reduced-motion: reduce) {
  .sim-gif {
    transition: none
  }
}

.sim-panel-actions {
  width: 100%;
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.sim-panel-actions.is-empty {
  display: none
}

.sim-btn {
  flex: 1;
  height: 56px;
  min-height: 44px;
  border: 0;
  border-radius: 14px;
  font-size: 1.0625rem;
  font-weight: var(--fw-medium);
  font-family: inherit;
  cursor: pointer;
  transition: opacity .2s ease
}

.sim-btn[aria-pressed="true"] {
  background: #1649A2;
  color: #fff
}

.sim-btn[aria-pressed="false"] {
  background: #eff4fe;
  color: #1649A2
}

.sim-btn:hover {
  opacity: .9
}

.sim-btn:focus-visible {
  outline: 2px solid #1649A2;
  outline-offset: 2px
}

@media (prefers-reduced-motion: reduce) {
  .sim-panel {
    transition: none
  }
}

@media (max-width: 1024px) {
  .sim-panel {
    grid-template-columns: 1fr;
    gap: 40px
  }

  .sim-panel-media {
    order: -1
  }
}

@media (max-width: 768px) {
  .sim-card {
    padding: 28px 20px;
  }

  .sim-title {
    margin-top: 10px;
    font-size: clamp(20px, 5vw, 2.25rem)
  }

  /* 상단 스텝 탭 7개는 가로 스크롤로 절반 이상 화면 밖에 있어 탐색 기능을
     못하고 잘려 보이기만 함 — 숨기되 DOM/상태 로직은 그대로 두고, 대신
     하단 점 인디케이터(.sim-progress)로 "전체 단계 수 + 현재 위치" 정보를 대체 */
  .sim-tabs-wrap {
    display: none
  }

  /* 390×660 기준 스크롤 없이 한 화면에 들어오도록 설명문은 숨김(DOM 유지,
     데스크톱은 그대로 노출) — STEP 배지 + 제목만 남김 */
  .sim-desc {
    display: none
  }

  /* 모바일은 위→아래로 읽으므로 텍스트(무엇에 대한 화면인지)를 먼저,
     GIF는 그다음에 보여줌. GIF 안의 토글 버튼 순서는 기존 DOM 순서(GIF→버튼) 그대로 */
  .sim-panel-text {
    order: 1
  }

  .sim-panel-media {
    order: 2
  }

  .sim-panel {
    gap: 14px;
    transition: opacity .2s ease, transform .2s ease
  }

  .sim-card-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    scroll-margin-top: 88px
  }

  /* 카드 바깥 가장자리에 걸치던 좌우 이동 버튼은 세로 공간을 차지하지 않도록
     GIF 위 오버레이로 이동(.sim-gif-nav) — 기존 버튼은 모바일에서 숨김 */
  .sim-nav-prev,
  .sim-nav-next {
    display: none
  }

  .sim-media-inner {
    position: relative;
    width: 100%;
    max-width: 100%
  }

  .sim-gif {
    width: 100%;
    height: auto;
    max-width: 100%;
    aspect-ratio: 4 / 5;
    object-fit: cover;
    object-position: top
  }

  /* GIF 전용 이동 버튼 — 지름 40px 반투명 블러 원형, 좌우 이동 버튼(원형 아이콘)과
     GIF 토글 버튼(사각 라벨)의 형태를 명확히 구분 */
  .sim-gif-nav {
    display: flex;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .68);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    color: #151515;
    cursor: pointer;
    z-index: 1
  }

  .sim-gif-nav::before {
    content: '';
    position: absolute;
    inset: -2px
  }

  .sim-gif-nav svg {
    width: 18px;
    height: 18px
  }

  .sim-gif-nav:disabled {
    opacity: .35;
    cursor: not-allowed
  }

  .sim-gif-nav-prev {
    left: 6px
  }

  .sim-gif-nav-next {
    right: 6px
  }

  /* 탭이 주던 "전체 구조 + 현재 위치" 정보를 대체 — 숫자 표시는 생략하고
     점 인디케이터만 사용해 하단 컨트롤을 최소화 */
  .sim-progress {
    display: flex;
    align-items: center;
    gap: 8px
  }

  .sim-progress-count {
    display: none
  }

  .sim-progress-dot {
    position: relative;
    width: 8px;
    height: 8px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background: #dde1e8;
    cursor: pointer;
    transition: width .2s ease, background-color .2s ease
  }

  /* 히트 영역: 점 자체는 작게 유지하되 ::before로 세로 44px 확보,
     가로는 인접 점과 겹치지 않게 gap(8px)의 절반(4px)까지만 확장 */
  .sim-progress-dot::before {
    content: '';
    position: absolute;
    top: -18px;
    bottom: -18px;
    left: -4px;
    right: -4px
  }

  .sim-progress-dot.is-active {
    width: 22px;
    background: #1649A2
  }

  .sim-progress-dot:focus-visible {
    outline: 2px solid #1649A2;
    outline-offset: 2px
  }

  /* GIF 토글 버튼(01·02·03·05만 존재) — 세로 스택 대신 가로 2분할 유지.
     버튼이 없는 스텝(04·06·07)도 같은 높이의 빈 자리를 비워둬(.is-empty)
     GIF 아래 내부 구성이 스텝마다 흔들리지 않고 일정하게 보이게 함 */
  .sim-panel-actions {
    flex-direction: row;
    min-height: 44px;
    margin-top: 12px
  }

  .sim-panel-actions.is-empty {
    display: flex;
    visibility: hidden
  }

  .sim-btn {
    height: 44px;
    min-height: 44px
  }
}

@media (max-width: 768px) and (prefers-reduced-motion: reduce) {
  .sim-progress-dot {
    transition: none
  }
}

/* ===== #proof (현장 사례 증명 + 마키) ===== */
.proof-section {
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: 20px;
  padding-bottom: 20px;
}

.proof-wrap {
  display: grid;
  grid-template-columns: 1fr .95fr;
  align-items: center;
  gap: clamp(32px, 6vw, 120px);
  width: 100%;
}

.proof-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start
}

/* .sub 공통 유틸의 margin:auto가 flex 아이템에서는 align-items:flex-start를
   무시하고 가운데로 밀어버림 — 이 섹션만 margin을 지워 왼쪽 정렬 유지
   (1024px 이하는 .proof-copy가 align-items:center로 바뀌어 영향 없음) */
.proof-copy .sub {
  margin: 0
}

.proof-label {
  display: flex;
  align-items: center;
  gap: 10px;
  /* font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  letter-spacing: .22em;
  color: #1649A2;
  text-transform: uppercase */
}

.proof-cta {
  margin-top: 32px;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  transition: gap .25s ease
}

.proof-cta:hover {
  gap: 18px
}

.proof-metrics {
  display: flex;
  gap: 48px;
  margin-top: 48px;
  padding-top: 24px;
  border-top: 1px solid #eee;
  width: 100%
}

.proof-metric {
  display: flex;
  flex-direction: column;
  gap: 4px
}

.proof-metric b {
  font-size: 1.75rem;
  font-weight: var(--fw-bold);
  color: #151515;
  line-height: 1.2
}

.proof-metric span {
  font-size: var(--fs-base);
  color: #666
}

.proof-marquee {
  height: min(86vh, 860px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  overflow: hidden;
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%)
}

.proof-marquee-col {
  overflow: hidden;
  position: relative;
  height: 100%
}

.proof-marquee-track {
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: translate3d(0, 0, 0);
  will-change: transform
}

.proof-marquee-track[data-marquee-track="up"] {
  animation: proof-marquee-up 38s linear infinite
}

.proof-marquee-track[data-marquee-track="down"] {
  animation: proof-marquee-down 44s linear infinite
}

.proof-marquee-col:hover .proof-marquee-track {
  animation-play-state: paused
}

.proof-section.is-offscreen .proof-marquee-track {
  animation-play-state: paused
}

@keyframes proof-marquee-up {
  from {
    transform: translate3d(0, 0, 0)
  }

  to {
    transform: translate3d(0, -50%, 0)
  }
}

@keyframes proof-marquee-down {
  from {
    transform: translate3d(0, -50%, 0)
  }

  to {
    transform: translate3d(0, 0, 0)
  }
}

.proof-marquee-card {
  position: relative;
  height: var(--card-h, 300px);
  border-radius: 10px;
  overflow: hidden;
  background: #f3f5f7;
  flex: none
}

.proof-marquee-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover
}

/* .proof-marquee-overlay {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, .55) 100%)
} */

/* .proof-marquee-title {
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: #fff
}

.proof-marquee-meta {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: var(--fs-base);
  color: rgba(255, 255, 255, .72)
} */

@media (prefers-reduced-motion: reduce) {
  .proof-marquee-track {
    animation: none !important
  }

  .proof-marquee-col {
    overflow-y: auto
  }
}

@media (max-width: 1024px) {
  .proof-section {
    min-height: 0;
    padding: 90px 0
  }

  .proof-wrap {
    grid-template-columns: 1fr
  }

  .proof-copy {
    align-items: center;
    text-align: center
  }

  .proof-label,
  .proof-metrics {
    justify-content: center
  }

  .proof-desc {
    max-width: 560px
  }

  .proof-marquee {
    height: 60vh;
    margin-top: 48px
  }
}

@media (max-width: 768px) {
  .proof-marquee {
    grid-template-columns: 1fr;
    height: 50vh
  }

  .proof-marquee-col:last-child {
    display: none
  }

  .proof-marquee-card {
    height: calc(var(--card-h, 300px) * .8)
  }
}

@media (max-width: 480px) {
  .proof-cta {
    width: 100%;
    justify-content: center
  }

  .proof-metrics {
    gap: 32px
  }
}

/* ===== .grad-text (헤드라인 부분 문구 흐르는 그라데이션) ===== */
.grad-text {
  display: inline
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .grad-text {
    /* 포인트 블루(#1649A2) → 밝은 블루(#2563eb, 기존 아이콘/포커스 링 컬러) → 포인트 블루 — 양끝 색을 맞춰 루프 이음새 방지 */
    background-image: linear-gradient(100deg, #1649A2 0%, #2563eb 50%, #1649A2 100%);
    background-size: 220% 100%;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-font-smoothing: antialiased;
    will-change: background-position;
    animation: grad-text-flow 6s linear infinite
  }
}

@keyframes grad-text-flow {
  from {
    background-position: 0% 50%
  }

  to {
    background-position: 100% 50%
  }
}

.grad-text.is-offscreen {
  animation-play-state: paused
}

@media (prefers-reduced-motion: reduce) {
  .grad-text {
    animation: none;
    background-position: 50% 50%
  }
}

.toggle-group {
  display: inline-flex;
  gap: 4px;
  background: #fff;
  border-radius: 99px;
  padding: 4px;
  margin-top: 30px;
}

.toggle-btn {
  border: 0;
  background: none;
  padding: 15px 28px;
  border-radius: 99px;
  font-size: var(--fs-base);
  font-weight: var(--fw-medium);
  color: #666;
  cursor: pointer;
  font-family: inherit;
  transition: background .2s ease, color .2s ease;
}

.toggle-btn.active {
  background: #1649A2;
  color: #fff;
  font-weight: var(--fw-medium)
}

.review-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 15px;
  margin-top: 50px;
}

.review-grid[hidden] {
  display: none
}

.review {
  padding: 28px;
  background: #fff;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.review q {
  font-size: var(--fs-lg);
  /* line-height: var(--lh-base); */
  font-weight: var(--fw-medium);
}

.review p {
  font-size: var(--fs-base);
  color: #888;
  margin: 20px 0 0
}

.review b {
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
}

@media (max-width: 480px) {
  .review{
    padding: 20px
  }
}

#quote {
  --estimate-primary: #1649A2;
  --estimate-primary-hover: color-mix(in srgb, var(--estimate-primary) 85%, black);
  --estimate-primary-active: color-mix(in srgb, var(--estimate-primary) 72%, black);
  --estimate-primary-disabled: color-mix(in srgb, var(--estimate-primary) 35%, #fff);
  --estimate-primary-bg: color-mix(in srgb, var(--estimate-primary) 6%, #fff);
  --estimate-primary-border: color-mix(in srgb, var(--estimate-primary) 24%, #fff);
  --estimate-primary-ring: color-mix(in srgb, var(--estimate-primary) 13%, transparent);
}

.quote-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 24px;
  margin-top: 50px;
  align-items: start
}

.quote-form {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 22px;
  padding: 36px 32px;
}

.quote-form .field-group {
  margin-bottom: 30px
}

.quote-form .field-group:last-of-type {
  margin-bottom: 0
}

.quote-form h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-subhead);
  margin: 0 0 18px
}

.field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 18px;
}

.field {
  margin-bottom: 18px
}

.field-row .field,
.field:last-child {
  margin-bottom: 0
}

.field label {
  display: block;
  font-size: var(--fs-base);
  font-weight: var(--fw-subhead);
  margin-bottom: 8px
}

.field label i {
  color: var(--estimate-primary);
  font-style: normal
}

.field input,
.field select {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-size: var(--fs-base);
  font-family: inherit;
  color: #151515;
  background: #fff
}

.field input:focus,
.field select:focus {
  outline: none;
  border-color: var(--estimate-primary);
  box-shadow: 0 0 0 3px var(--estimate-primary-ring)
}

.chip-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid #ddd;
  border-radius: 99px;
  background: #fff;
  color: #666;
  font-size: var(--fs-base);
  font-weight: var(--fw-regular);
  font-family: inherit;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease
}

.chip[aria-checked="true"] {
  background: var(--estimate-primary);
  border-color: var(--estimate-primary);
  color: #fff
}

.chip:focus-visible {
  outline: 2px solid var(--estimate-primary);
  outline-offset: 2px
}

.date-range {
  display: grid;
  grid-template-columns: 1fr 18px 1fr;
  gap: 10px;
  align-items: end
}

.date-range .tilde {
  height: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #bbb;
  font-weight: var(--fw-subhead)
}

.tag-required {
  display: inline-block;
  margin-left: 8px;
  font-size: var(--font-badge);
  font-weight: var(--fw-bold);
  color: var(--estimate-primary);
  background: var(--estimate-primary-bg);
  border: 1px solid var(--estimate-primary-border);
  border-radius: 99px;
  padding: 3px 10px;
  vertical-align: middle
}

.included {
  background: #F3F4F7;
  border-radius: 18px;
  padding: 24px
}

.included p {
  margin: 0 0 16px;
  font-size: var(--fs-base);
  color: #666;
  line-height: var(--lh-base)
}

.included p b {
  color: #151515
}

.included-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 16px;
  font-size: var(--fs-base);
  font-weight: var(--fw-subhead)
}

.included-list li:before {
  content: "✓ ";
  color: var(--estimate-primary);
  font-weight: var(--fw-bold)
}

.option {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  border: 1px solid #e7e7e7;
  border-radius: 16px;
  cursor: pointer;
  margin-bottom: 12px
}

.option input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--estimate-primary);
  flex-shrink: 0
}

.option b {
  display: block;
  font-size: var(--fs-base);
  font-weight: var(--fw-subhead);
  margin-bottom: 4px
}

.option p {
  margin: 0;
  font-size: var(--fs-base);
  color: #666;
  line-height: var(--lh-base)
}

.option:has(input:checked) {
  border-color: var(--estimate-primary)
}

.option-sub {
  margin: -2px 0 18px;
  padding: 18px 20px;
  border: 1px dashed #ddd;
  border-radius: 16px;
  background: #fafaf8;
  display: none
}

.option-sub.show {
  display: block
}

.qty-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: var(--fs-base);
  color: #666
}

.unit-price {
  margin: 8px 0 0;
  font-size: var(--fs-base);
  color: #666
}

.stepper {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow: hidden
}

.stepper button {
  width: 34px;
  height: 34px;
  border: 0;
  background: #fff;
  font-size: var(--fs-base);
  font-weight: var(--fw-subhead);
  cursor: pointer;
  color: #151515
}

.stepper button:hover {
  background: #f7f6f3
}

.stepper input {
  width: 56px;
  height: 34px;
  border: 0;
  border-left: 1px solid #ddd;
  border-right: 1px solid #ddd;
  text-align: center;
  font-size: var(--fs-base);
  font-weight: var(--fw-subhead);
  font-family: inherit
}

.consent {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 26px;
  padding: 3px 0;
  font-size: var(--fs-base);
  color: #666
}

.consent input {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--estimate-primary)
}

.consent-link {
  background: none;
  border: 0;
  padding: 0;
  color: #151515;
  font-weight: var(--fw-subhead);
  text-decoration: underline;
  cursor: pointer;
  font: inherit
}

.consent-detail {
  display: none;
  font-size: var(--fs-base);
  color: #888;
  margin: 8px 0 0 26px;
  line-height: var(--lh-base)
}

.consent-detail.show {
  display: block
}

.q-error {
  font-size: var(--fs-base);
  color: #e2432a;
  margin-top: 10px;
  display: none
}

.q-error.show {
  display: block
}

.quote-summary {
  position: sticky;
  top: 84px;
  background: #fff;
  border-radius: 22px;
  padding: 28px
}

.quote-summary h3 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-subhead);
  margin: 0 0 18px
}

.summary-price {
  background: #fff;
  border: 1px solid #e7e7e7;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 18px
}

.summary-price>span {
  display: block;
  font-size: var(--fs-base);
  color: #666;
  margin-bottom: 6px
}

.summary-price b {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  color: var(--estimate-primary);
  letter-spacing: -.02em
}

.summary-price b small {
  font-size: var(--fs-base);
  font-weight: var(--fw-subhead);
  color: #666;
  margin-left: 2px
}

.summary-price em {
  display: block;
  font-style: normal;
  font-size: var(--fs-base);
  color: #666;
  margin-top: 8px;
  line-height: var(--lh-base)
}

.summary-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: var(--fs-base);
  padding: 12px 0;
  border-top: 1px solid #e7e7e7
}

.summary-row span:first-child {
  color: #666
}

.summary-row b {
  font-weight: var(--fw-medium);
  text-align: right
}

.summary-note {
  font-size: var(--fs-base);
  color: #666;
  line-height: var(--lh-base);
  margin: 18px 0 22px
}

.quote-summary .btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  cursor: pointer;
  font-family: inherit
}

.quote-success {
  display: none;
  text-align: center;
  padding: 10px 0 4px
}

.quote-success.show {
  display: block
}

.quote-success .ok {
  width: 44px;
  height: 44px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--estimate-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold)
}

.quote-success h4 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-subhead);
  margin: 0 0 8px
}

.quote-success p {
  font-size: var(--fs-base);
  color: #666;
  line-height: var(--lh-base);
  margin: 0 0 18px
}

.quote-success button {
  background: none;
  border: 0;
  color: #151515;
  font-weight: var(--fw-subhead);
  font-size: var(--fs-base);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit
}

/* 아래 두 미디어쿼리는 원래 있었지만 .review-grid/.quote-grid/.quote-summary/
   .field-row/.included-list/.date-range의 실제 선언(이 파일 뒤쪽, 2400~2830줄대)보다
   앞에 있어 캐스케이드에서 항상 뒤(나중에 나온 데스크톱 값)에 덮여 무시되고
   있었다 — 실제 선언 뒤로 옮겨 원래 의도대로 동작하게 함 (가로 스크롤·헤더·#quote
   붕괴의 공통 원인) */
@media (max-width: 800px) {
  .review-grid,
  .quote-grid,
  .field-row,
  .included-list,
  .date-range {
    grid-template-columns: 1fr
  }

  .date-range .tilde {
    display: none
  }

  .quote-summary {
    position: static
  }
}

@media (max-width: 480px) {
  .quote-form {
    padding: 24px 20px
  }

  .chip-group {
    display: grid;
    grid-template-columns: repeat(2, 1fr)
  }

  .quote-summary {
    padding: 20px
  }

  .field input,
  .field select {
    min-height: 44px
  }

  .summary-price b {
    white-space: nowrap
  }
}

#faq {
  padding-bottom: 200px;
}

.faq-list {
  max-width: 780px;
  margin: 50px auto 0
}

.faq-item {
  background: #fff;
  border-radius: 22px;
  margin-bottom: 14px;
  overflow: hidden
}

.faq-item:last-child {
  margin-bottom: 0
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 24px 27px;
  background: none;
  border: 0;
  text-align: left;
  font-size: var(--fs-base);
  font-weight: var(--fw-subhead);
  color: #151515;
  font-family: inherit;
  cursor: pointer;
  word-break: keep-all
}

.faq-icon {
  position: relative;
  width: 18px;
  height: 18px;
  flex-shrink: 0
}

.faq-icon i {
  position: absolute;
  background: #1649A2;
  border-radius: 1px;
  transition: transform .25s ease, opacity .25s ease
}

.faq-icon i:first-child {
  left: 0;
  top: 50%;
  width: 100%;
  height: 2px;
  margin-top: -1px
}

.faq-icon i:last-child {
  top: 0;
  left: 50%;
  width: 2px;
  height: 100%;
  margin-left: -1px
}

.faq-item.open .faq-icon i:last-child {
  transform: rotate(90deg);
  opacity: 0
}

.faq-a {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s ease
}

.faq-item.open .faq-a {
  grid-template-rows: 1fr
}

.faq-a-inner {
  overflow: hidden
}

.faq-a p {
  margin: 0;
  padding: 0 27px 24px;
  color: #666;
  font-size: var(--fs-base);
  line-height: var(--lh-base)
}

@media (prefers-reduced-motion: reduce) {

  .faq-icon i,
  .faq-a {
    transition: none
  }
}

/* cta final 섹션 */
.cta-final {
  --cta-final-navy-1: #071228;
  --cta-final-navy-2: #0d2148;
  --cta-final-navy-3: #0a1a36;
  position: relative;
  height: 520px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 32px 32px 0 0;
  margin-top: -32px;
  background: linear-gradient(180deg, var(--cta-final-navy-1) 0%, var(--cta-final-navy-2) 55%, var(--cta-final-navy-3) 100%)
}

.cta-final-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none
}

.cta-final-glow-main {
  left: 50%;
  top: 118%;
  width: 120%;
  height: 230%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(58, 132, 255, .62), rgba(58, 132, 255, .12) 62%, rgba(58, 132, 255, 0));
  animation: cta-final-orb-main 12s ease-in-out infinite alternate
}

.cta-final-glow-left {
  left: 14%;
  top: 50%;
  width: 70%;
  height: 180%;
  transform: translate(-50%, -50%);
  background: radial-gradient(closest-side, rgba(96, 170, 255, .18), rgba(96, 170, 255, .05) 62%, rgba(96, 170, 255, 0));
  animation: cta-final-orb-left 16s ease-in-out infinite alternate
}

.cta-final-glow-right {
  right: 10%;
  top: 45%;
  width: 60%;
  height: 160%;
  transform: translate(50%, -50%);
  background: radial-gradient(closest-side, rgba(140, 196, 255, .14), rgba(140, 196, 255, .04) 62%, rgba(140, 196, 255, 0));
  animation: cta-final-orb-right 20s ease-in-out infinite alternate
}

@keyframes cta-final-orb-main {
  from {
    transform: translate(-50%, -50%) scale(1) translateY(-2%)
  }

  to {
    transform: translate(-50%, -50%) scale(1.08) translateY(2%)
  }
}

@keyframes cta-final-orb-left {
  from {
    transform: translate(-50%, -50%) translate(-4%, 0);
    opacity: .8
  }

  to {
    transform: translate(-50%, -50%) translate(4%, 0);
    opacity: 1
  }
}

@keyframes cta-final-orb-right {
  from {
    transform: translate(50%, -50%) translate(4%, 0);
    opacity: .8
  }

  to {
    transform: translate(50%, -50%) translate(-4%, 0);
    opacity: 1
  }
}

@media (prefers-reduced-motion: reduce) {
  .cta-final-glow {
    animation: none
  }
}

.cta-final-content {
  position: relative;
  z-index: 1;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  padding: 0 40px
}

.cta-final-content .eyebrow {
  color: #7fb2ff;
  opacity: .9
}

.cta-final-content .title {
  color: #fff;
  margin: 0
}

.cta-final-content .sub {
  color: rgba(255, 255, 255, .78);
  margin: 0 auto
}

.cta-final-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center
}

.cta-final-btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, .4)
}

.cta-final-btn-ghost:hover {
  border-color: #fff
}

@media (max-width: 768px) {
  .cta-final {
    height: 440px
  }

  .cta-final-content {
    gap: 18px;
    padding: 0 24px
  }
}

@media (max-width: 480px) {
  .cta-final {
    height: auto;
    min-height: 380px;
    padding: 40px 0
  }

  .cta-final-content {
    gap: 20px;
    padding: 0 20px
  }

  .cta-final-actions {
    flex-direction: column;
    width: 100%
  }

  .cta-final-actions .btn {
    width: 100%
  }
}

/* ===== 소개서 신청 모달 (modusign.co.kr 서비스소개서 팝업 분석 기반, 톤/치수만 참고) ===== */
.intro-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: #15151599;
  padding: 24px;
  z-index: 100;
  align-items: center;
  justify-content: center
}

.intro-overlay.open {
  display: flex
}

.intro-modal {
  --estimate-primary: #1649A2;
  --estimate-primary-ring: color-mix(in srgb, var(--estimate-primary) 13%, transparent);
  width: 100%;
  max-width: 480px;
  padding: 36px 32px 32px;
  opacity: 0;
  transform: scale(.96);
  transition: opacity .2s ease, transform .2s ease
}

.intro-overlay.show .intro-modal {
  opacity: 1;
  transform: scale(1)
}

@media (prefers-reduced-motion: reduce) {
  .intro-modal {
    transition: none
  }
}

.intro-modal-close {
  width: 44px;
  height: 44px
}

.intro-modal h2 {
  font-size: var(--fs-lg);
  font-weight: var(--fw-bold);
  margin: 0 0 8px
}

.intro-modal-desc {
  font-size: var(--fs-base);
  color: #666;
  margin: 0 0 26px
}

.intro-submit {
  width: 100%;
  margin-top: 26px;
  display: flex;
  align-items: center;
  justify-content: center
}

.intro-submit:disabled {
  opacity: .6;
  cursor: not-allowed
}

.intro-success {
  text-align: center;
  padding: 16px 0 4px
}

.intro-success p {
  font-size: var(--fs-base);
  font-weight: var(--fw-subhead);
  margin: 0 0 24px
}

@media (max-width: 768px) {
  .intro-modal {
    width: calc(100% - 40px);
    max-width: calc(100% - 40px);
    padding: 30px 22px 24px
  }
}

footer {
  /* 바로 위 .cta(#1649A2) 톤을 이어받는 다크 네이비 — 급격한 색 전환 방지 */
  background: #101B33;
  color: #fff;
  padding: 64px 0
}

/* modusign.co.kr 푸터 하단 정보 행 구조 참고: 좌(로고+회사정보)/우(SNS+약관+저작권)
   2블록, row justify-content:space-between → 768 이하 column으로 스택 */
.footer-info-wrapper {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px
}

.footer-info-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px
}

.footer-logo {
  display: block
}

.footer-logo img {
  height: 21px;
  width: auto;
  display: block
}

@media (max-width: 480px) {
  .footer-logo img {
    height: 17px
  }
}

.footer-download {
  position: relative;
  height: 32px;
  display: inline-flex;
  align-items: center;
  color: #262931;
  background-color: #8290a6;
  border-radius: 99px;
  padding: 0 16px;
  font-size: 14px;
  font-weight: var(--fw-medium);
  border: 0;
  cursor: pointer;
  font-family: inherit;
}
.footer-download::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 44px
}
.footer-download:hover {
  background-color: #5b8def;
  color: #fff
}

.footer-info-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px
}

.footer-info-row {
  display: flex;
  flex-wrap: wrap;
  font-size: var(--fs-base);
  color: #8C99AB;
  line-height: var(--lh-base)
}

.footer-info-row span+span::before {
  content: "·";
  margin: 0 8px;
  color: #4a5570
}

.footer-sns {
  display: flex;
  gap: 10px
}

.footer-sns-btn {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: transparent;
  color: #fff;
  transition: background-color .2s ease
}

.footer-sns-btn::before {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0
}

.footer-sns-btn:not(:last-child)::before {
  left: -10px;
  right: -5px
}

.footer-sns-btn:last-child::before {
  left: -5px;
  right: -10px
}

.footer-sns-btn:hover {
  background: rgba(255, 255, 255, .12)
}

.footer-sns-btn:focus-visible,
.footer-download:focus-visible,
.footer-legal a:focus-visible {
  outline: 2px solid #5b8def;
  outline-offset: 3px
}

.footer-sns-btn img {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: block
}

.footer-legal {
  display: flex;
  gap: 20px;
  font-size: var(--fs-base)
}

.footer-legal a {
  position: relative;
  color: #697380
}

.footer-legal a::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  bottom: -13px
}

.footer-legal a:hover {
  color: #fff
}

.footer-copyright {
  margin: 0;
  font-size: var(--fs-base);
  color: #8C99AB
}

@media (max-width: 768px) {
  .footer-info-wrapper {
    flex-direction: column;
    align-items: flex-start;
    gap: 32px
  }

  .footer-info-right {
    align-items: flex-start
  }

  .footer-sns-btn {
    width: 44px;
    height: 44px
  }
}

@media (max-width: 480px) {
  footer {
    padding: 48px 0
  }

  .footer-download {
    width: 100%;
    justify-content: center
  }
}