/* ==========================================================================
   Lucyware — site.css
   컴포넌트. base.css 의 토큰과 프리미티브 위에만 쌓는다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   아이콘
   아이콘 폰트(CSS 2078줄 + woff2)를 걷어내고 인라인 SVG 스프라이트를 쓴다.
   쓰는 아이콘만 문서에 들어가므로 안 쓰는 1800여 개를 내려받지 않는다.
   -------------------------------------------------------------------------- */
.icon {
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.icon--sm {
  width: 1.125rem;
  height: 1.125rem;
}

/* --------------------------------------------------------------------------
   버튼
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.8rem 1.6rem;
  font-size: var(--text-sm);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: var(--tracking-normal);
  white-space: nowrap;
  border-radius: var(--radius-full);
  border: 1.5px solid transparent;
  transition:
    background-color var(--duration) var(--ease),
    border-color var(--duration) var(--ease),
    color var(--duration) var(--ease),
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

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

.btn:active {
  transform: translateY(0);
}

/* 브랜드 오렌지 위에는 흰 글씨가 아니라 짙은 네이비를 얹는다.
   흰 글씨는 대비 2.8:1 로 WCAG AA 에 못 미친다 — 아래 조합은 7.5:1. */
.btn--primary {
  color: var(--navy-900);
  background-color: var(--brand-orange);
  box-shadow: 0 2px 10px rgb(237 125 49 / 0.3);
}

.btn--primary:hover {
  color: var(--navy-900);
  background-color: var(--orange-hover);
  box-shadow: 0 6px 18px rgb(237 125 49 / 0.36);
}

.btn--ghost {
  color: var(--text-strong);
  border-color: var(--border-strong);
  background-color: transparent;
}

.btn--ghost:hover {
  color: var(--text-strong);
  border-color: var(--brand-orange);
  background-color: var(--orange-50);
}

.on-dark .btn--ghost {
  color: var(--text-inverse-strong);
  border-color: rgb(255 255 255 / 0.35);
}

.on-dark .btn--ghost:hover {
  color: var(--navy-900);
  background-color: var(--text-inverse-strong);
  border-color: var(--text-inverse-strong);
}

.btn--lg {
  padding: 1rem 2rem;
  font-size: var(--text-base);
}

/* 텍스트 링크에 방향을 주는 화살표 */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  font-size: var(--text-sm);
}

.link-arrow .icon {
  transition: transform var(--duration) var(--ease);
}

.link-arrow:hover .icon {
  transform: translateX(0.25rem);
}

/* --------------------------------------------------------------------------
   헤더
   -------------------------------------------------------------------------- */
/* 아래 경계선을 border 가 아니라 box-shadow 로 긋는다.
   border 는 1px 이라도 높이를 차지해 헤더가 4.5rem + 1px 이 된다.
   홈 배너는 --header-h(4.5rem)만큼만 위로 올라오므로 그 1px 만큼 덮이지 않고
   body 의 흰 배경이 어두운 배너 위에 가로줄로 새어 나온다.
   그림자는 흐름에서 빠지므로 헤더 높이가 정확히 --header-h 로 유지된다. */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background-color: rgb(255 255 255 / 0.88);
  backdrop-filter: blur(12px);
  transition:
    background-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.header.is-scrolled {
  box-shadow:
    0 1px 0 var(--border),
    var(--shadow-sm);
}

.header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: var(--header-h);
}

.header__logo {
  margin-inline-end: auto;
  display: flex;
  align-items: center;
}

.header__logo img {
  height: 1.75rem;
  width: auto;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  margin: 0;
}

.nav__link {
  position: relative;
  display: block;
  padding-block: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-strong);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background-color: var(--brand-orange);
  border-radius: var(--radius-full);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration) var(--ease);
}

.nav__link:hover,
.nav__link[aria-current="true"] {
  color: var(--accent-text);
}

.nav__link:hover::after,
.nav__link[aria-current="true"]::after {
  transform: scaleX(1);
}

.nav__toggle {
  display: none;
  color: var(--text-strong);
  padding: var(--space-2);
  margin-inline-start: calc(var(--space-2) * -1);
}

/* 헤더 CTA — 넓은 화면에서는 긴 라벨, 좁은 화면에서는 짧은 라벨.
   로고가 6:1 비율이라 28px 높이에서 169px 을 쓴다. 여기에 긴 CTA 와 햄버거를
   더하면 360px 화면에서 434px 이 필요해 한 줄에 못 들어간다. */
.header__cta-short {
  display: none;
}

@media (width < 56rem) {
  .nav__toggle {
    display: block;
    order: 2;
  }

  .header__cta {
    order: 1;
    padding: 0.6rem 1.1rem;
  }

  .header__cta-full {
    display: none;
  }

  .header__cta-short {
    display: inline;
  }

  /* 로고와 간격도 함께 줄여야 320px 화면이 버틴다 */
  .header__inner {
    gap: var(--space-3);
  }

  .header__logo img {
    height: 1.5rem;
  }

  .nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    background-color: var(--bg);
    border-bottom: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
    padding: var(--space-4) var(--gutter) var(--space-6);
    /* 닫힌 상태에서 탭 순서에도 잡히지 않도록 display 로 끈다 */
    display: none;
  }

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

  .nav__list {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav__link {
    padding: var(--space-4) var(--space-2);
    font-size: var(--text-base);
    border-bottom: 1px solid var(--border);
  }

  .nav__link::after {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   드롭다운 메뉴 (Solutions · Services)
   여는 방법을 둘 다 연다 — 마우스는 hover, 키보드는 focus-within 과 클릭.
   hover 만 두면 탭으로 이동하는 사용자가 하위 메뉴에 닿지 못한다.
   -------------------------------------------------------------------------- */

/* 항목이 헤더 높이를 그대로 차지한다. 이래야 드롭다운의 top:100% 가 헤더 아래에
   정확히 붙고, 트리거와 패널 사이에 마우스가 빠지는 틈이 생기지 않는다. */
.nav__item {
  position: relative;
  display: flex;
  align-items: center;
  height: var(--header-h);
}

.nav__trigger {
  display: flex;
  align-items: center;
  gap: var(--space-1);
}

.nav__caret {
  transition: transform var(--duration) var(--ease);
}

.nav__item--menu:hover .nav__caret,
.nav__item--menu:focus-within .nav__caret,
.nav__trigger[aria-expanded="true"] .nav__caret {
  transform: rotate(180deg);
}

.nav__panel {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 60;
  min-width: 20rem;
  padding: var(--space-4);
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.375rem);
  transition:
    opacity var(--duration) var(--ease),
    visibility var(--duration) var(--ease),
    transform var(--duration) var(--ease);
}

.nav__item--menu:hover .nav__panel,
.nav__item--menu:focus-within .nav__panel,
.nav__panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.nav__panel-head {
  padding-inline: var(--space-3);
  margin-block-end: var(--space-2);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
}

.nav__sublink {
  display: block;
  padding: var(--space-3);
  border-radius: var(--radius);
  color: var(--text-strong);
  transition: background-color var(--duration) var(--ease);
}

.nav__sublink:hover,
.nav__sublink[aria-current="page"] {
  background-color: var(--bg-subtle);
  color: var(--text-strong);
}

.nav__sublink-name {
  display: block;
  font-size: var(--text-sm);
  font-weight: 600;
}

.nav__sublink[aria-current="page"] .nav__sublink-name {
  color: var(--accent-text);
}

.nav__sublink-desc {
  display: block;
  margin-block-start: var(--space-1);
  font-size: var(--text-xs);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

/* 준비중 표시. 메뉴에 넣되 방문자가 클릭 전에 알 수 있게 한다 */
.badge {
  display: inline-block;
  margin-inline-start: var(--space-2);
  padding: 0.1em 0.5em;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0;
  vertical-align: 0.1em;
  border-radius: var(--radius-full);
}

.badge--soon {
  color: var(--orange-text);
  background-color: var(--orange-50);
  border: 1px solid rgb(237 125 49 / 0.28);
}

.on-dark .badge--soon {
  color: var(--accent-text);
  background-color: rgb(237 125 49 / 0.12);
}

@media (width < 56rem) {
  /* 모바일에서는 세로 목록이므로 헤더 높이를 물려받지 않는다 */
  .nav__item {
    display: block;
    height: auto;
  }

  .nav__trigger {
    width: 100%;
    justify-content: space-between;
  }

  /* 겹쳐 뜨는 패널이 아니라 접히는 목록이 된다.
     좁은 화면에서 절대 배치를 쓰면 화면 밖으로 밀려 나간다. */
  .nav__panel {
    position: static;
    min-width: 0;
    padding: var(--space-2) 0 var(--space-3);
    border: 0;
    border-bottom: 1px solid var(--border);
    border-radius: 0;
    box-shadow: none;
    transform: none;
    /* 닫힌 상태에서 탭 순서에도 잡히지 않게 display 로 끊는다 */
    display: none;
    opacity: 1;
    visibility: visible;
  }

  .nav__item--menu:hover .nav__panel,
  .nav__item--menu:focus-within .nav__panel {
    display: none;
  }

  .nav__panel.is-open,
  .nav__item--menu:focus-within .nav__panel.is-open {
    display: block;
  }

  .nav__panel-head {
    display: none;
  }

  .nav__sublink {
    padding-inline: var(--space-4);
  }
}

/* --------------------------------------------------------------------------
   Hero
   배경은 이미지가 아니라 CSS 로 만든다. 스톡 사진 428KB 를 받지 않고,
   어느 화면 비율에서도 잘리는 곳이 없다.
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(4.5rem, 3rem + 7.5vw, 9rem);
  background-color: var(--navy-900);
  background-image:
    radial-gradient(
      60rem 30rem at 12% 0%,
      rgb(237 125 49 / 0.22),
      transparent 60%
    ),
    radial-gradient(
      50rem 28rem at 88% 15%,
      rgb(0 145 170 / 0.18),
      transparent 62%
    ),
    linear-gradient(180deg, #151C27 0%, #1B2432 55%, #202B3A 100%);
}

/* 메타데이터 격자 — 회사가 다루는 것이 표와 스키마라는 것을 배경이 말한다 */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image:
    linear-gradient(rgb(255 255 255 / 0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgb(255 255 255 / 0.045) 1px, transparent 1px);
  background-size: 4.5rem 4.5rem;
  mask-image: radial-gradient(70% 60% at 50% 35%, #000 30%, transparent 100%);
}

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.9rem;
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #F3B183;
  background-color: rgb(237 125 49 / 0.12);
  border: 1px solid rgb(237 125 49 / 0.3);
  border-radius: var(--radius-full);
}

.hero__title {
  --flow: var(--space-5);
  max-width: 20ch;
  margin-inline: auto;
  color: #fff;
}

.hero__title em {
  font-style: normal;
  color: var(--brand-orange);
}

.hero__lead {
  max-width: 46ch;
  margin-inline: auto;
  font-size: var(--text-lead);
  color: #C3CCD8;
}

.hero__actions {
  justify-content: center;
  --cluster-gap: var(--space-4);
}

/* --------------------------------------------------------------------------
   섹션 제목
   -------------------------------------------------------------------------- */
.section-head {
  max-width: 44rem;
  margin-inline: auto;
  margin-block-end: var(--space-8);
  text-align: center;
}

.section-head__eyebrow {
  display: block;
  margin-block-end: var(--space-3);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-text);
}

.section-head__lead {
  margin-block-start: var(--space-4);
  font-size: var(--text-lead);
  color: var(--text-muted);
}

.section-head--start {
  margin-inline: 0;
  text-align: start;
}

/* --------------------------------------------------------------------------
   카드
   -------------------------------------------------------------------------- */
.card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-6);
  background-color: var(--bg);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  transition:
    transform var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease),
    border-color var(--duration) var(--ease);
}

.card:hover {
  transform: translateY(-4px);
  border-color: transparent;
  box-shadow: var(--shadow-lg);
}

/* 호버 때 카드 위에 그어지는 브랜드 라인 */
.card::before {
  content: "";
  position: absolute;
  inset-inline: var(--space-6);
  top: -1px;
  height: 2px;
  background: linear-gradient(90deg, var(--brand-orange), var(--md-cyan));
  border-radius: var(--radius-full);
  opacity: 0;
  transition: opacity var(--duration) var(--ease);
}

.card:hover::before {
  opacity: 1;
}

.card__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  color: var(--accent-text);
  background-color: var(--orange-50);
  border-radius: var(--radius);
}

.card p {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* 히어로 안에 얹히는 카드 — 배경이 어두우므로 반투명 유리로 */
.hero .card {
  background-color: rgb(255 255 255 / 0.05);
  border-color: rgb(255 255 255 / 0.12);
  backdrop-filter: blur(8px);
}

.hero .card:hover {
  border-color: rgb(255 255 255 / 0.28);
  background-color: rgb(255 255 255 / 0.08);
  box-shadow: none;
}

.hero .card h3 {
  font-size: var(--text-base);
  color: #fff;
}

.hero .card p {
  color: #A9B4C2;
  font-size: var(--text-sm);
}

.hero .card__icon {
  color: #F3B183;
  background-color: rgb(237 125 49 / 0.14);
}

/* --------------------------------------------------------------------------
   About — 본문 + 체크리스트
   -------------------------------------------------------------------------- */
.checklist {
  --flow: var(--space-3);
}

.checklist li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.checklist .icon {
  margin-block-start: 0.2em;
  color: var(--brand-orange);
}

.about__media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

/* --------------------------------------------------------------------------
   MetaDRAG™ 제품 구역
   제품 로고 실측 팔레트(딥네이비·오렌지·시안)를 이 구역에서만 쓴다.
   -------------------------------------------------------------------------- */
.product {
  --bg: #000033;
  --bg-subtle: #0B0B45;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background-color: var(--bg);
  background-image:
    radial-gradient(45rem 24rem at 80% 10%, rgb(0 145 170 / 0.25), transparent 60%),
    radial-gradient(38rem 20rem at 8% 90%, rgb(255 100 4 / 0.18), transparent 60%);
}

.product__logo {
  width: min(22rem, 100%);
  margin-block-end: var(--space-5);
}

.product__lead {
  max-width: 50ch;
  font-size: var(--text-lead);
  color: #B9C0DA;
}

.product__points {
  --flow: var(--space-4);
  margin-block-start: var(--space-6);
}

.product__points li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  color: #D5DAEE;
}

.product__points .icon {
  margin-block-start: 0.2em;
  color: var(--md-cyan);
}

.product__points strong {
  color: #fff;
}

.product__panel {
  padding: var(--space-6);
  background-color: rgb(255 255 255 / 0.04);
  border: 1px solid rgb(255 255 255 / 0.12);
  border-radius: var(--radius-lg);
  backdrop-filter: blur(8px);
}

.product__panel h3 {
  color: #fff;
  margin-block-end: var(--space-4);
}

/* 스키마 → 질의 → 답 흐름을 보여주는 작은 도식 */
.flow {
  --flow: var(--space-3);
  font-family: var(--font-mono);
  font-size: var(--text-sm);
}

.flow li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  padding: var(--space-3) var(--space-4);
  color: #C9CFE8;
  background-color: rgb(255 255 255 / 0.05);
  border: 1px solid rgb(255 255 255 / 0.1);
  border-radius: var(--radius);
}

.flow li:last-child {
  color: #fff;
  border-color: rgb(0 145 170 / 0.5);
  background-color: rgb(0 145 170 / 0.14);
}

.flow__step {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  flex: none;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--md-navy);
  background-color: var(--md-orange);
  border-radius: var(--radius-full);
}

/* --------------------------------------------------------------------------
   Approach — 번호가 붙은 단계
   -------------------------------------------------------------------------- */
.steps {
  --col-min: 14rem;
  counter-reset: step;
}

.step {
  position: relative;
  counter-increment: step;
  padding-block-start: var(--space-6);
  border-top: 2px solid var(--border);
  transition: border-color var(--duration) var(--ease);
}

.step:hover {
  border-top-color: var(--brand-orange);
}

.step::before {
  content: counter(step, decimal-leading-zero);
  display: block;
  margin-block-end: var(--space-3);
  font-size: var(--text-h3);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--brand-orange);
}

.step p {
  margin-block-start: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Contact
   -------------------------------------------------------------------------- */
.contact__grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}

@media (width >= 60rem) {
  .contact__grid {
    grid-template-columns: 22rem 1fr;
    align-items: start;
  }
}

.map {
  width: 100%;
  height: clamp(18rem, 14rem + 20vw, 28rem);
  background-color: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  margin-block-end: var(--space-6);
}

/* 지도 API 가 뜨지 않을 때 보이는 대체 안내. 빈 상자를 남기지 않는다 */
.map__fallback {
  display: grid;
  place-content: center;
  gap: var(--space-3);
  height: 100%;
  padding: var(--space-6);
  text-align: center;
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.info-list {
  --flow: var(--space-5);
}

.info-item {
  display: flex;
  gap: var(--space-4);
}

.info-item .icon {
  flex: none;
  margin-block-start: 0.15em;
  color: var(--brand-orange);
}

.info-item h3 {
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-block-end: var(--space-1);
}

.info-item p,
.info-item a {
  font-size: var(--text-base);
  color: var(--text-strong);
}

.info-item a:hover {
  color: var(--accent-text);
}

/* 폼 */
.form {
  display: grid;
  gap: var(--space-4);
  grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr));
  padding: var(--space-6);
  background-color: var(--bg-subtle);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
}

.form__row--full {
  grid-column: 1 / -1;
}

.field {
  display: block;
}

.field__label {
  display: block;
  margin-block-end: var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-strong);
}

.field__label .req {
  color: var(--accent-text);
}

.field__control {
  width: 100%;
  padding: 0.75rem 1rem;
  color: var(--text-strong);
  background-color: var(--bg);
  border: 1.5px solid var(--border-strong);
  border-radius: var(--radius);
  transition:
    border-color var(--duration) var(--ease),
    box-shadow var(--duration) var(--ease);
}

.field__control::placeholder {
  color: #9AA6B6;
}

.field__control:focus {
  outline: none;
  border-color: var(--brand-orange);
  box-shadow: 0 0 0 3px rgb(237 125 49 / 0.18);
}

.field__control:focus-visible {
  outline: none;
}

textarea.field__control {
  resize: vertical;
  min-height: 9rem;
  line-height: var(--leading-snug);
}

.form__note {
  font-size: var(--text-xs);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.footer {
  padding-block-start: var(--space-9);
  background-color: var(--bg-subtle);
  border-top: 1px solid var(--border);
}

.footer__grid {
  --col-min: 12rem;
  --grid-gap: var(--space-7);
  align-items: start;
}

.footer__about {
  grid-column: span 2;
  max-width: 32rem;
}

.footer__logo img {
  height: 1.625rem;
  width: auto;
}

.footer__about p {
  margin-block-start: var(--space-4);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.footer h4 {
  margin-block-end: var(--space-4);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--text-strong);
}

.footer__links {
  --flow: var(--space-3);
}

.footer__links a,
.footer__contact p {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

.footer__links a:hover {
  color: var(--accent-text);
}

.footer__contact {
  --flow: var(--space-2);
}

.footer__bottom {
  margin-block-start: var(--space-8);
  padding-block: var(--space-5);
  border-top: 1px solid var(--border);
  font-size: var(--text-xs);
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  justify-content: space-between;
  align-items: center;
}

/* --------------------------------------------------------------------------
   맨 위로
   -------------------------------------------------------------------------- */
.to-top {
  position: fixed;
  right: var(--gutter);
  bottom: var(--gutter);
  z-index: 40;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--navy-900);
  background-color: var(--brand-orange);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(0.5rem);
  transition:
    opacity var(--duration) var(--ease),
    visibility var(--duration) var(--ease),
    transform var(--duration) var(--ease),
    background-color var(--duration) var(--ease);
}

.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

.to-top:hover {
  color: var(--navy-900);
  background-color: var(--orange-hover);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   모바일 메뉴 버튼 — 열림/닫힘에 따라 아이콘 하나만 보인다
   -------------------------------------------------------------------------- */
.nav__toggle-close,
.nav__toggle[aria-expanded="true"] .nav__toggle-open {
  display: none;
}

.nav__toggle[aria-expanded="true"] .nav__toggle-close {
  display: block;
}

/* --------------------------------------------------------------------------
   페이지 머리 — 하위 페이지 상단. 홈의 Hero 를 대신한다.
   제품마다 색을 바꿀 수 있게 배경을 토큰(--page-head-bg)으로 뺀다.
   -------------------------------------------------------------------------- */
.page-head {
  position: relative;
  padding-block: calc(var(--space-9) + var(--space-4)) var(--space-9);
  background-color: var(--page-head-bg, var(--bg-subtle));
  border-bottom: 1px solid var(--border);
}

/* 제품 페이지는 밝은 면으로 둔다.
   로고 색을 배경으로 끌어오면 페이지마다 다른 사이트처럼 보이고,
   어두운 머리가 이어지면 로고가 반전판으로만 보여 인상이 갇힌다.
   제품색은 위에 그은 4px 띠 하나에만 남긴다 — 구분은 되고 화면은 밝게 유지된다. */
.page-head--accent::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background-color: var(--page-accent, var(--brand-orange));
}

.page-head--accent .page-head__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  color: var(--text-muted);
}

.page-head--accent .page-head__eyebrow::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 2px;
  background-color: var(--page-accent, var(--brand-orange));
}

.page-head__inner {
  max-width: var(--container-narrow);
}

.page-head__eyebrow {
  display: block;
  margin-block-end: var(--space-3);
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--accent-text);
}

.page-head h1 {
  font-size: clamp(2rem, 1.5rem + 2.5vw, 3.25rem);
}

.page-head__lead {
  margin-block-start: var(--space-5);
  font-size: var(--text-lead);
  line-height: var(--leading-snug);
  color: var(--text-muted);
}

.page-head__logo {
  height: 2.25rem;
  width: auto;
  margin-block-end: var(--space-5);
}

.page-head__actions {
  margin-block-start: var(--space-7);
}

/* --------------------------------------------------------------------------
   본문 텍스트 덩어리 — 길이가 긴 설명 문단
   한 줄이 너무 길면 다음 줄 첫 글자를 찾지 못한다. 46rem 에서 끊는다.
   -------------------------------------------------------------------------- */
.prose {
  max-width: var(--container-narrow);
  --flow: var(--space-5);
}

.prose h2 {
  margin-block-start: var(--space-8);
}

.prose h3 {
  margin-block-start: var(--space-6);
}

.prose > h2:first-child,
.prose > h3:first-child {
  margin-block-start: 0;
}

/* --------------------------------------------------------------------------
   기능 목록 — 아이콘 + 제목 + 설명
   -------------------------------------------------------------------------- */
.feature {
  display: flex;
  gap: var(--space-4);
}

.feature .icon {
  flex: none;
  margin-block-start: 0.2em;
  color: var(--brand-orange);
}

.feature h3 {
  margin-block-end: var(--space-2);
  font-size: var(--text-base);
}

.feature p {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   정의 목록 — 회사 정보처럼 「항목 : 값」 이 반복되는 표
   표(table)를 쓰지 않는다. 좁은 화면에서 두 칸이 자연스럽게 위아래로 접힌다.
   -------------------------------------------------------------------------- */
.deflist {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  border-top: 1px solid var(--border);
}

.deflist > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-1);
  padding-block: var(--space-4);
  border-bottom: 1px solid var(--border);
}

@media (width >= 40rem) {
  .deflist > div {
    grid-template-columns: 10rem 1fr;
    gap: var(--space-5);
    align-items: baseline;
  }
}

.deflist dt {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--text-muted);
}

.deflist dd {
  margin: 0;
  color: var(--text-strong);
}

/* --------------------------------------------------------------------------
   준비중 페이지
   빈 페이지로 두지 않는다 — 무엇을 준비하고 있는지 알리고,
   지금 필요한 사람에게는 문의라는 다음 걸음을 준다.
   -------------------------------------------------------------------------- */
.soon {
  display: grid;
  place-items: center;
  gap: var(--space-6);
  min-height: 50vh;
  padding-block: var(--space-10);
  text-align: center;
}

.soon__mark {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  color: var(--brand-orange);
  background-color: var(--orange-50);
  border-radius: var(--radius-full);
}

.soon__mark .icon {
  width: 1.75rem;
  height: 1.75rem;
}

.soon__body {
  max-width: 34rem;
}

.soon__body h2 {
  margin-block-end: var(--space-4);
}

.soon__body p {
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   전환 유도 띠 — 모든 하위 페이지 하단
   -------------------------------------------------------------------------- */
.cta-band {
  padding-block: var(--space-9);
  text-align: center;
}

.cta-band h2 {
  max-width: 34rem;
  margin-inline: auto;
}

.cta-band p {
  max-width: 34rem;
  margin-block-start: var(--space-4);
  margin-inline: auto;
  color: var(--text-muted);
}

.cta-band__actions {
  margin-block-start: var(--space-7);
  justify-content: center;
}

/* --------------------------------------------------------------------------
   섹션 배경 교대
   같은 흰 바탕이 이어지면 섹션 경계가 사라진다. 한 칸씩 걸러 톤을 낮춘다.
   -------------------------------------------------------------------------- */
.section--subtle {
  background-color: var(--bg-subtle);
  border-block: 1px solid var(--border);
}

/* 카드 안에서 제품 이름을 로고로 보여줄 때.
   카드가 세로 flex 라 align-self 를 주지 않으면 로고가 카드 폭만큼 늘어난다.
   높이를 맞춰 세우면 폭이 다른 워드마크들이 한 줄에 나란히 선다. */
.card__logo {
  align-self: start;
  height: 1.5rem;
  width: auto;
  max-width: 100%;
  margin-block-end: var(--space-1);
}

/* ==========================================================================
   홈 — 다크 배너 + 밝은 본문
   배너 첫 장에 회사 메시지를 걸고, 이어서 제품을 하나씩 넘긴다.
   배너 아래부터는 밝은 면으로 내려가고, 푸터에서 다시 어두워진다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   홈 헤더 — 어두운 배너 위에서 시작해 스크롤하면 흰 바가 된다
   -------------------------------------------------------------------------- */
.home .header {
  background-color: transparent;
  backdrop-filter: none;
}

.home .header:not(.is-scrolled) .nav__link,
.home .header:not(.is-scrolled) .nav__toggle {
  color: #fff;
}

.home .header:not(.is-scrolled) .nav__link:hover,
.home .header:not(.is-scrolled) .nav__link[aria-current="true"] {
  color: #F3B183;
}

.home .header.is-scrolled {
  background-color: rgb(255 255 255 / 0.94);
  backdrop-filter: blur(12px);
}

/* 로고는 원본 한 벌로 어두운 면과 밝은 면을 함께 버틴다.
   1px 흰 외곽선이 배너 위에서 글자를 배경에서 떼어내 주고,
   흰 헤더 위에서는 눈에 띄지 않는다 — 로고를 두 벌 바꿔 끼우지 않아도 된다. */
.header__logo img {
  filter:
    drop-shadow(0 1px 0 rgb(255 255 255 / 0.92))
    drop-shadow(0 -1px 0 rgb(255 255 255 / 0.92))
    drop-shadow(1px 0 0 rgb(255 255 255 / 0.92))
    drop-shadow(-1px 0 0 rgb(255 255 255 / 0.92));
}

/* 모바일 메뉴 패널은 흰 면이므로 그 안에서는 어두운 글자로 되돌린다 */
@media (width < 56rem) {
  .home .header:not(.is-scrolled) .nav.is-open .nav__link {
    color: var(--text-strong);
  }
}

/* --------------------------------------------------------------------------
   배너
   -------------------------------------------------------------------------- */
.banner {
  --banner-h: min(46rem, calc(100svh - var(--header-h)));
  position: relative;
  isolation: isolate;
  /* 헤더가 투명하게 얹히므로 그 높이만큼 위로 끌어올린다 */
  margin-block-start: calc(var(--header-h) * -1);
  background-color: #070A12;
}

/* 배경 그래프. 슬라이드가 넘어가도 이것은 이어서 흐른다 —
   장면이 바뀌어도 같은 화면이라는 감각이 남는다. */
.banner__canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
}

.banner__track {
  position: relative;
  z-index: 1;
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
}

.banner__track::-webkit-scrollbar {
  display: none;
}

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

.banner__slide {
  flex: 0 0 100%;
  scroll-snap-align: start;
  min-height: var(--banner-h);
  display: grid;
  align-items: center;
  padding-block: calc(var(--header-h) + var(--space-7)) var(--space-10);
  /* 제품마다 다른 것은 이 옅은 빛 하나다. 배경을 통째로 칠하지 않는다 */
  background-image:
    radial-gradient(46rem 26rem at 78% 24%, var(--slide-glow, transparent), transparent 66%),
    linear-gradient(180deg, rgb(7 10 18 / 0.18) 0%, rgb(7 10 18 / 0.62) 72%, #070A12 100%);
}

.banner__inner {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (width >= 56rem) {
  .banner__slide--product .banner__inner {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: var(--space-9);
  }
}

.banner__copy {
  --flow: var(--space-5);
  max-width: 36rem;
}

/* 첫 장이 순서대로 올라온다. 처음 한 번뿐이고 스크롤마다 반복하지 않는다 —
   요소가 계속 튀어나오면 읽는 속도를 화면이 정하게 된다. */
.rise {
  opacity: 0;
  transform: translateY(1.25rem);
  animation: rise-in 800ms var(--ease) forwards;
  animation-delay: var(--rise-delay, 0ms);
}

@keyframes rise-in {
  to {
    opacity: 1;
    transform: none;
  }
}

/* 스크립트가 죽거나 모션을 줄이는 설정이면 처음부터 제자리에 둔다.
   등장 연출 때문에 내용이 사라지는 일은 없어야 한다. */
.no-js .rise,
.no-js .banner__dot {
  opacity: 1;
  transform: none;
  animation: none;
}

@media (prefers-reduced-motion: reduce) {
  .rise {
    opacity: 1;
    transform: none;
    animation: none;
  }
}

.banner__tag {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: 0.4rem 0.9rem;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: #E9EEF6;
  background-color: rgb(255 255 255 / 0.06);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius-full);
}

.banner__tag::before {
  content: "";
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  background-color: var(--slide-accent, var(--brand-orange));
}

.banner__logo {
  height: 2rem;
  width: auto;
  max-width: min(18rem, 100%);
}

.banner__title {
  color: #fff;
  font-size: clamp(1.875rem, 1.4rem + 2.4vw, 3rem);
  text-wrap: balance;
}

/* 첫 장만 크게 간다 — 회사가 무엇을 하는지 거는 자리다 */
.banner__slide--lead .banner__title {
  font-size: clamp(2.25rem, 1.5rem + 3.6vw, 4rem);
  line-height: 1.1;
  letter-spacing: -0.03em;
}

.banner__title em {
  font-style: normal;
  background: linear-gradient(100deg, var(--brand-orange), #F3B183 42%, var(--md-cyan));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.banner__lead {
  max-width: 44ch;
  font-size: var(--text-lead);
  color: #B6C0D0;
}

/* 첫 장 아래 붙는 요약 숫자 */
.banner__facts {
  display: grid;
  gap: var(--space-5);
  grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr));
  max-width: 40rem;
  padding-block-start: var(--space-6);
  border-top: 1px solid rgb(255 255 255 / 0.12);
}

.banner__fact b {
  display: block;
  font-size: var(--text-h3);
  font-weight: 700;
  color: #fff;
  font-variant-numeric: tabular-nums;
}

.banner__fact span {
  display: block;
  margin-block-start: var(--space-1);
  font-size: var(--text-sm);
  color: #8A96A9;
}

/* --------------------------------------------------------------------------
   제품 슬라이드의 도형 — 사진 대신 표와 관계를 그린다
   -------------------------------------------------------------------------- */
.banner__art {
  position: relative;
  display: none;
  aspect-ratio: 4 / 3;
  max-height: 20rem;
}

@media (width >= 56rem) {
  .banner__art {
    display: block;
  }
}

.banner__card {
  position: absolute;
  padding: var(--space-4);
  background-color: rgb(255 255 255 / 0.055);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius);
  backdrop-filter: blur(8px);
}

.banner__card--1 { inset: 4% auto auto 2%;  width: 46%; }
.banner__card--2 { inset: 34% 4% auto auto; width: 44%; }
.banner__card--3 { inset: auto auto 4% 14%; width: 50%; }

.banner__card h4 {
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--slide-accent, var(--brand-orange));
  margin-block-end: var(--space-2);
}

.banner__rows {
  display: grid;
  gap: 0.3rem;
}

.banner__row {
  height: 0.375rem;
  border-radius: var(--radius-full);
  background-color: rgb(255 255 255 / 0.14);
}

.banner__row--w70 { width: 70%; }
.banner__row--w45 { width: 45%; }
.banner__row--hot {
  background-color: var(--slide-accent, var(--brand-orange));
  opacity: 0.7;
}

.banner__wire {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke: var(--slide-accent, var(--brand-orange));
  stroke-width: 1.5;
  fill: none;
  opacity: 0.4;
}

/* --------------------------------------------------------------------------
   배너 조작부 — 멈출 수 없는 자동 재생은 접근성에서 실패로 친다
   -------------------------------------------------------------------------- */
.banner__controls {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-2);
  background-color: rgb(255 255 255 / 0.07);
  border: 1px solid rgb(255 255 255 / 0.16);
  border-radius: var(--radius-full);
  backdrop-filter: blur(10px);
}

.banner__btn {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  color: #E9EEF6;
  border-radius: var(--radius-full);
  transition: background-color var(--duration) var(--ease);
}

.banner__btn:hover {
  background-color: rgb(255 255 255 / 0.14);
}

.banner__btn .icon {
  width: 1.125rem;
  height: 1.125rem;
}

.banner__pause .banner__icon-play {
  display: none;
}

.banner__pause[aria-pressed="true"] .banner__icon-play {
  display: block;
}

.banner__pause[aria-pressed="true"] .banner__icon-pause {
  display: none;
}

.banner__dots {
  display: flex;
  gap: var(--space-1);
  margin-inline: var(--space-1);
}

.banner__dot {
  width: 1.5rem;
  height: 0.25rem;
  border-radius: var(--radius-full);
  background-color: rgb(255 255 255 / 0.28);
  transition:
    background-color var(--duration) var(--ease),
    width var(--duration) var(--ease);
}

.banner__dot[aria-current="true"] {
  width: 2.5rem;
  background-color: var(--brand-orange);
}

/* --------------------------------------------------------------------------
   본문 — 좌우 교대 설명
   -------------------------------------------------------------------------- */
.alt {
  display: grid;
  gap: var(--space-7);
  align-items: center;
}

@media (width >= 56rem) {
  .alt {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-9);
  }

  .alt--flip .alt__media {
    order: -1;
  }
}

.alt__copy {
  --flow: var(--space-4);
  max-width: 34rem;
}

.alt__media {
  position: relative;
  aspect-ratio: 5 / 4;
  border-radius: var(--radius-lg);
  border: 1px solid var(--border);
  overflow: hidden;
  background-color: var(--navy-50);
  background-image:
    linear-gradient(var(--navy-100) 1px, transparent 1px),
    linear-gradient(90deg, var(--navy-100) 1px, transparent 1px);
  background-size: 2.5rem 2.5rem;
}

.alt__badge {
  position: absolute;
  left: 50%;
  top: 50%;
  translate: -50% -50%;
  display: grid;
  gap: var(--space-3);
  width: min(80%, 22rem);
  padding: var(--space-6);
  background-color: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  text-align: center;
}

.alt__badge .icon {
  width: 2rem;
  height: 2rem;
  margin-inline: auto;
  color: var(--brand-orange);
}

.alt__badge span {
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* 지표 줄 */
.figures {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
  text-align: center;
}

.figure__num {
  display: block;
  font-size: clamp(2rem, 1.6rem + 2vw, 3rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: var(--tracking-tight);
  color: var(--text-strong);
  font-variant-numeric: tabular-nums;
}

.figure__label {
  display: block;
  margin-block-start: var(--space-2);
  font-size: var(--text-sm);
  color: var(--text-muted);
}

/* --------------------------------------------------------------------------
   푸터 — 배너와 같은 어둠으로 닫는다
   -------------------------------------------------------------------------- */
.footer {
  background-color: #070A12;
  border-top: 0;
}

.footer__logo img {
  height: 1.75rem;
  width: auto;
}