/* One typeface for the whole page: Pretendard Variable covers every weight
   (the page tops out at SemiBold 600). */
@font-face {
  font-family: 'Pretendard';
  src: url('assets/PretendardVariable.woff2') format('woff2-variations');
  font-style: normal; font-weight: 45 920; font-display: swap;
}
:root {
  /* Type scale — display / title / body / label / caption. Tracking is -3% everywhere. */
  --tracking: -0.03em;
  --weight-strong: 600;
  --weight-medium: 500;
  --content-max-width: 1280px;
  --content-inset: 64px;
  --site-header-height: 88px;
  --header-title-gap: 32px;
  --section-safe-top: calc(var(--site-header-height) + var(--header-title-gap));
  --tracking-adjust: 0em;
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
}
* { box-sizing: border-box; }
body {
  --page-gutter: var(--space-4);
  margin: 0 auto;
  padding: 0 var(--page-gutter);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: 16px;
  line-height: 1.75;
  letter-spacing: var(--tracking);
  word-break: keep-all;
  overflow-wrap: anywhere;
}
header, header nav { display: flex; flex-wrap: nowrap; align-items: center; }
header {
  display: grid;
  grid-template-columns: minmax(max-content, 1fr) auto minmax(max-content, 1fr);
  gap: 28px;
  min-height: 92px;
  max-width: var(--content-max-width);
  margin-inline: auto;
  padding: var(--space-3) var(--content-inset);
  font-size: 16px;
  line-height: 1.5;
}
header a { flex-shrink: 0; white-space: nowrap; color: #333d4b; text-decoration: none; transition: color 180ms; }
header a:hover, header [aria-current="page"] { color: #7938d6; }
header a:focus-visible { outline: 2px solid #7938d6; outline-offset: 6px; }
header nav { flex-shrink: 0; gap: 30px; }
header .site-logo { display: flex; align-items: center; justify-self: start; }
header .site-logo img { display: block; width: 104px; height: auto; }
header nav[aria-label="주요 메뉴"] { justify-self: center; }
header nav[aria-label="계정 메뉴"] { justify-self: end; gap: 20px; }
header a.header-cta { padding: 10px 18px; border-radius: 10px; background: rgba(225, 218, 239, .45); }
.home-page { position: relative; }
/* The overlay header shares the normal-flow pages' content box, including gutters. */
.home-page > header { position: absolute; inset: 0 var(--page-gutter) auto; z-index: 1; }
@media (max-width: 1024px) {
  header { gap: 16px; padding-inline: 32px; }
  header nav { gap: 12px; }
  header .site-logo { margin-right: 0; }
  header nav[aria-label="계정 메뉴"] { gap: 12px; }
}
main { max-width: var(--content-max-width); margin-inline: auto; }
.page-content { padding-inline: var(--content-inset); }
.home-content {
  max-width: var(--content-max-width);
  --hero-font-size: clamp(18px, min(6vw, 6.1vh), 64px); /* 세로가 낮은 화면(1920×1080 브라우저 ≈ 950)에서는 높이에 맞춰 줄인다 — 이때 약 58px. hisemo-section.css .hs-title 과 같은 식 */
  --hero-inset: var(--content-inset);
  --feature-stage-top: var(--section-safe-top);
  --terrain-field-height: 108svh;
  --type-rise-duration: 600ms;
  --type-rise-stagger: 100ms;
  --type-rise-ease: cubic-bezier(0.165, 0.84, 0.44, 1);
  margin-inline: auto;
  text-align: center;
}
.home-content p { margin-inline: auto; text-wrap: balance; }
.home-content > section,
.home-content > section:first-child {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: var(--space-6);
}
.home-content > section.linked-section { display: block; padding: 0; }
.home-content .summary-section .section-link { padding-inline: var(--content-inset); }
.home-content[data-scroll-motion] > section.summary-section {
  min-height: 220svh;
  margin-top: -100svh;
}
.home-content[data-scroll-motion] .summary-section .section-link {
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 100svh;
}
.home-content > #home { display: block; padding: 0; }
.hero-stage {
  min-height: 100vh;
  min-height: 100svh;
  display: grid;
  align-items: center;
  padding-block: var(--space-6);
}
.home-content[data-scroll-motion] > #home {
  min-height: 220vh;
  min-height: 220svh;
}
.home-content[data-scroll-motion] .hero-stage {
  position: sticky;
  top: 0;
  overflow-x: clip;
  transform: translateY(var(--hero-stage-offset, 0px));
}
.home-content[data-scroll-motion] > #services {
  position: relative;
  min-height: var(--feature-scene-height, 720svh);
  margin-top: -100svh;
}
.home-content .section-link {
  min-height: inherit;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: var(--space-6);
}
.home-content .scroll-copy { display: block; }
.home-content .type-line { display: block; overflow: clip; }
.home-content .type-line__text { display: block; }
.home-content[data-hero-motion] #home-title .type-line__text {
  animation: type-rise var(--type-rise-duration) var(--type-rise-ease) both;
}
.home-content[data-hero-motion] #home-title .type-line:nth-child(2) .type-line__text {
  animation-delay: var(--type-rise-stagger);
}
@keyframes type-rise {
  from { transform: translateY(110%); }
  to { transform: translateY(0); }
}
.home-content #home-title,
.home-content > section > .section-link > h2 {
  font-size: var(--hero-font-size);
  font-weight: var(--weight-strong);
  line-height: 1.3;
  letter-spacing: var(--tracking);
}
.home-content :is(#home-title, #services-title) { white-space: nowrap; }
.home-content #home-title {
  padding-inline: var(--hero-inset);
  text-align: left;
}
.home-content #services .section-link {
  align-items: flex-start;
  padding-inline: var(--hero-inset);
  text-align: left;
}
.home-content[data-scroll-motion] #services .section-link {
  /* The black surface is handed over by the expanding screen frame
     (customer-tablet.js); --business-bg switches on once it fills the view. */
  --business-theme: calc(var(--business-bg, var(--audience-position, 0)) * (1 - var(--opportunity-surface, 0)));
  --feature-border: color-mix(in srgb, #e5e8eb, #30343b calc(100% * var(--business-contrast, 0)));
  --feature-ink: color-mix(in srgb, #333d4b, #f2f4f6 calc(100% * var(--business-contrast, 0)));
  --feature-muted: color-mix(in srgb, #8b95a1, #b0b8c1 calc(100% * var(--business-contrast, 0)));
  --feature-button: color-mix(in srgb, #e8ebed, #292d33 calc(100% * var(--business-contrast, 0)));
  --feature-button-hover: color-mix(in srgb, #e5e8eb, #353a41 calc(100% * var(--business-contrast, 0)));
  --feature-arrow: color-mix(in srgb, #191f28, #f2f4f6 calc(100% * var(--business-contrast, 0)));
  --feature-arrow-ink: color-mix(in srgb, white, #191f28 calc(100% * var(--business-contrast, 0)));
  color: color-mix(in srgb, black, #f9fafb calc(100% * var(--business-contrast, 0)));
  isolation: isolate;
  clip-path: inset(0 -100vmax);
  position: sticky;
  top: 0;
  height: 100svh;
  min-height: 100svh;
  justify-content: flex-start;
  padding-block-start: calc(var(--feature-stage-top) + var(--feature-center-shift, 0px) * (1 - var(--opportunity-position, 0)));
  padding-block-end: var(--space-4);
  transform: translateY(var(--feature-stage-offset, 0px));
}
@media screen and (prefers-reduced-motion: no-preference) {
  .home-content[data-scroll-motion] #services .feature-stage[data-dark-surface] {
    --business-contrast: 1;
  }
}
.home-content[data-scroll-motion] #services .feature-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: #0a0a0a;
  box-shadow: 0 0 0 100vmax #0a0a0a;
  clip-path: inset(0 -100vmax 0 var(--curtain-inset, -100vmax));
  opacity: calc(var(--business-theme) * var(--curtain-opacity, 1));
  pointer-events: none;
}
.home-content #services-title { width: max-content; margin-bottom: 64px; }
.home-content[data-scroll-motion] #services-title {
  position: relative;
  z-index: 2;
  transform: translate(
    calc(var(--audience-title-travel, 0px) * var(--audience-position, 0) * (1 - var(--opportunity-position, 0)) + var(--opportunity-title-travel, 0px) * var(--opportunity-position, 0)),
    calc(var(--opportunity-title-lift, 24px) * var(--opportunity-position, 0) - var(--opportunity-pan, 0px))
  );
}
.service-title-prefix { display: inline-block; padding-inline-end: 0.18em; }
.service-title-slot, .opportunity-title-intro { display: none; }
.home-content[data-scroll-motion] #services-title > .type-line {
  transform: translate(calc(var(--title-line-pad, 0px) * var(--audience-position, 0) * (1 - var(--opportunity-position, 0))), calc(1.3em * var(--opportunity-position, 0)));
}
.home-content[data-scroll-motion] .service-title-slot {
  position: relative;
  display: inline-block;
  vertical-align: bottom;
  height: 1.3em;
  width: calc(var(--audience-word-width, 2em) * (1 - var(--opportunity-words, 0)) + var(--opportunity-word-width, 5em) * var(--opportunity-words, 0));
  overflow: clip;
}
.home-content[data-scroll-motion] .service-title-slot .audience-word {
  position: absolute;
  left: 0;
  top: 0;
  transform: translateY(calc(-110% * var(--opportunity-words, 0)));
}
.opportunity-word { display: inline-block; width: max-content; white-space: nowrap; }
.home-content[data-scroll-motion] .opportunity-word {
  transform: translateY(calc(110% * (1 - var(--opportunity-words, 0))));
}
.home-content[data-scroll-motion] .opportunity-title-intro {
  display: block;
  position: absolute;
  inset: 0 auto auto 50%;
  width: max-content;
  transform: translateX(-50%);
  overflow: clip;
  text-align: center;
}
.opportunity-title-intro > span {
  display: block;
  transform: translateY(calc(110% * (1 - var(--opportunity-intro, 0)) - 110% * var(--scroll-exit, 0)));
}
.opportunity-years {
  display: inline-grid;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.opportunity-years > span { grid-area: 1 / 1; }
.opportunity-years__measure { visibility: hidden; }
.home-content[data-scroll-motion] #services .feature-stage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #f4f4f5;
  box-shadow: 0 0 0 100vmax #f4f4f5;
  clip-path: inset(0 -100vmax);
  opacity: calc(var(--opportunity-surface, 0) * (1 - var(--scroll-exit, 0)));
  pointer-events: none;
}
.opportunity-scene {
  position: relative;
  width: 100%;
  min-height: 720px;
  margin-top: 128px;
  text-align: center;
}
.opportunity-static-title { position: relative; z-index: 2; }
.opportunity-field {
  position: absolute;
  inset: 0 auto auto 50%;
  width: var(--terrain-width, 100%);
  height: var(--terrain-field-height);
  transform: translateX(-50%);
  overflow: clip;
}
.opportunity-canvas { display: block; width: 100%; height: 100%; }
.opportunity-details {
  position: relative;
  display: grid;
  grid-template-columns: 0.95fr 1.25fr;
  gap: 40px;
  margin-top: calc(var(--terrain-field-height) + 32px);
  text-align: left;
  color: #191f28;
}
.home-content #services .opportunity-details__intro h3 {
  margin: 0 0 24px;
  font-size: 34px;
  font-weight: var(--weight-strong);
  line-height: 1.4;
  letter-spacing: var(--tracking);
  text-wrap: initial;
}
.home-content #services .opportunity-details p {
  max-width: none;
  margin: 0;
  color: #8b95a1;
  font-size: 16px;
  line-height: 1.75;
  text-wrap: pretty;
}
.home-content #services .opportunity-details__intro p { color: #6b7684; }
.opportunity-details__columns {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-self: start;
}
.opportunity-details__columns > div {
  padding-inline: 20px;
  border-left: 1px solid #dedee3;
}
.opportunity-details__columns > div:last-child { padding-right: 0; }
.opportunity-details__columns h4 {
  margin: 0 0 12px;
  font-size: 18px;
  font-weight: var(--weight-strong);
  line-height: 1.5;
  letter-spacing: var(--tracking);
  text-wrap: initial;
}
.home-content[data-scroll-motion] .opportunity-details {
  position: absolute;
  inset: calc(var(--terrain-field-height) + 32px) var(--content-inset) auto;
  margin: 0;
}
.opportunity-meta {
  position: absolute;
  z-index: 2;
  inset: calc(var(--feature-stage-top) + var(--opportunity-title-lift, 24px) + var(--hero-font-size) * 2.6 + 44px) var(--content-inset) auto;
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: space-between;
  color: #969eac;
  font-size: 14px;
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking);
  pointer-events: none;
}
.opportunity-meta > span { flex-shrink: 0; }
.opportunity-meta::before,
.opportunity-meta::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #dedee3;
}
.opportunity-meta::before { order: 1; }
.opportunity-meta > span:nth-child(2) { order: 2; }
.opportunity-meta::after { order: 3; }
.opportunity-meta > span:nth-child(3) { order: 4; }
.terrain-regions { position: absolute; inset: 0; pointer-events: none; }
.terrain-region {
  position: absolute;
  left: var(--region-x);
  top: var(--region-y);
  width: max-content;
  padding: 10px 14px;
  border: 0;
  background: none;
  color: #969eac;
  font: inherit;
  font-size: 14px;
  font-weight: var(--weight-medium);
  line-height: 1.5;
  letter-spacing: var(--tracking);
  text-align: center;
  transform: translate(-50%, -100%);
  transition: color 240ms ease;
  pointer-events: auto;
  cursor: pointer;
}
.terrain-label {
  display: grid;
  align-items: center;
  min-width: 112px;
  height: 28px;
  overflow: clip;
}
.terrain-label > span {
  grid-area: 1 / 1;
  display: block;
  white-space: nowrap;
  transition: opacity 120ms ease;
}
.terrain-label__value {
  font-size: inherit;
  font-weight: inherit;
  font-variant-numeric: tabular-nums;
  letter-spacing: inherit;
  opacity: 0;
}
.terrain-stem {
  position: absolute;
  top: 100%;
  left: 50%;
  height: 64px;
  width: 1px;
  transform: translateX(-50%);
  background: currentColor;
  opacity: 0.48;
  pointer-events: none;
}
.terrain-stem::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 5px;
  height: 5px;
  box-sizing: border-box;
  border: 1px solid currentColor;
  border-radius: 50%;
  background: #f4f4f5;
  transform: translate(-50%, -50%);
}
.terrain-region[aria-pressed="true"] { color: #8015e8; }
.terrain-region[aria-pressed="true"] .terrain-label__name { opacity: 0; }
.terrain-region[aria-pressed="true"] .terrain-label__value { opacity: 1; }
.terrain-region[aria-pressed="true"] .terrain-stem { opacity: 0.8; }
.terrain-region[aria-pressed="true"] .terrain-stem::before { background: #8015e8; box-shadow: 0 0 0 2px #8015e80d; }
.terrain-region:focus-visible { outline: 2px solid #8015e8; outline-offset: 4px; border-radius: 6px; }
.home-content[data-scroll-motion] .opportunity-scene {
  position: absolute;
  inset: 0;
  min-height: 0;
  margin: 0;
  z-index: 1;
  opacity: calc(var(--opportunity-reveal, 0) * (1 - var(--scroll-exit, 0)));
  transform: translateY(calc(-1 * var(--opportunity-pan, 0px)));
}
.home-content[data-scroll-motion] .opportunity-scene:not([data-active]) { visibility: hidden; }
.home-content[data-scroll-motion] .opportunity-static-title { display: none; }
.hero-word.audience-word { display: none; }
.audience-word-track, .audience-word-track > span { display: block; }
.audience-word-track > span { height: 1.3em; }
.audience-panel + .audience-panel { margin-top: var(--space-7); }
.home-content[data-scroll-motion] .audience-static { display: none; }
.home-content[data-scroll-motion] .audience-word { display: inline-block; }
.home-content[data-scroll-motion] .audience-word-track { transform: translateY(calc(-50% * var(--audience-roll, 0))); }
.home-content[data-scroll-motion] .audience-panels { display: grid; width: 480px; max-width: 100%; }
.home-content[data-scroll-motion] .audience-panel {
  grid-area: 1 / 1;
  margin: 0;
  opacity: var(--audience-opacity, 1);
  transform: translateY(var(--audience-shift, 0px));
}
.home-content[data-scroll-motion] .audience-heading { display: none; }
.home-content[data-scroll-motion] .audience-panel[data-audience-hidden] { visibility: hidden; }
.home-content #services p {
  max-width: 360px;
  margin-inline: 0;
  text-wrap: pretty;
}
.home-content .feature-list {
  width: 480px;
  max-width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--feature-border, #e5e8eb);
}
.home-content .feature-item { margin: 0; border-bottom: 1px solid var(--feature-border, #e5e8eb); }
.home-content .feature-item h3 { margin: 0; font-size: 24px; font-weight: var(--weight-strong); line-height: 1.4; letter-spacing: var(--tracking); }
.feature-trigger {
  display: block;
  width: 100%;
  padding: 24px 0 calc(24px - 12px * var(--feature-active, 1));
  border: 0;
  background: none;
  color: var(--feature-ink, #333d4b);
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  cursor: pointer;
}
.feature-trigger:disabled { cursor: default; }
.feature-trigger:focus-visible, .feature-cta:focus-visible {
  outline: 2px solid var(--feature-ink, #333d4b);
  outline-offset: 4px;
}
.feature-detail__content { padding-bottom: 24px; }
.home-content #services .feature-detail p {
  max-width: none;
  margin: 0;
  padding-top: 0;
  color: var(--feature-muted, #8b95a1);
  font-size: 18px;
  font-weight: 300;
  line-height: 1.6;
}
/* Label size: the CTA reads as an action, smaller than the copy it follows. */
.feature-cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  min-height: 44px;
  margin-top: 20px;
  padding: 6px 6px 6px 20px;
  border-radius: 999px;
  background: var(--feature-button, #e8ebed);
  color: var(--feature-ink, #333d4b);
  font-size: 15px;
  font-weight: var(--weight-strong);
  line-height: 1.5;
  letter-spacing: var(--tracking);
  text-decoration: none;
  transition: background-color 180ms ease;
}
.feature-cta:hover { background: var(--feature-button-hover, #e5e8eb); }
.feature-cta__arrow {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  background: var(--feature-arrow, #191f28);
  color: var(--feature-arrow-ink, white);
}
.home-content[data-scroll-motion] .audience-panels {
  opacity: clamp(0, calc(var(--scroll-enter, 0) - var(--scroll-exit, 0)), 1);
  transform: translate(
    calc(var(--audience-travel, 0px) * var(--audience-position, 0)),
    calc(16px * (1 - var(--scroll-enter, 0)))
  );
}
.home-content[data-scroll-motion] #services:not([data-copy-visible]) .audience-panels { visibility: hidden; }
.home-content[data-scroll-motion] .feature-item h3 {
  opacity: calc(0.3 + 0.7 * var(--feature-active, 0));
}
/* Copy fades out in the first half of a close and in during the second half of
   an open, so a moving clip edge never slices through visible text. */
.home-content[data-scroll-motion] .feature-detail {
  height: calc(var(--feature-detail-height, 80px) * var(--feature-active, 0));
  overflow: clip;
  opacity: clamp(0, calc(var(--feature-active, 0) * 2 - 1), 1);
  transform: translateY(calc(8px * (1 - var(--feature-active, 0))));
}
.home-content[data-scroll-motion] .feature-item[data-feature-hidden] .feature-detail { visibility: hidden; }
.hero-word {
  display: inline-block;
  width: max-content;
  height: 1.3em;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-align: left;
  vertical-align: bottom;
  overflow: clip;
}
.hero-word-track,
.hero-word-track > span { display: block; }
.hero-word-track > span { height: 1.3em; }
.home-content[data-scroll-motion] .hero-word-track {
  transform: translateY(calc(var(--word-position, 0) * -1.3em));
}
.home-content .hero-line { position: relative; display: flex; align-items: center; }
.hero-prefix { padding-inline-end: .18em; }
.hero-connector {
  position: relative;
  display: inline-block;
  width: var(--hero-connector-width, 160px);
  height: 1px;
  margin-inline: .3em;
  vertical-align: .4em;
  background: #6b7684;
  opacity: calc(1 - var(--hero-release, 0));
}
.hero-lead { display: inline-flex; align-items: center; }
.hero-lead > *, .hero-suffix { flex-shrink: 0; }
.hero-suffix { display: inline-block; margin-inline-start: .18em; }
.hero-payment {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  height: .95em;
  transform: translateY(-50%);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}
.hero-payment__track {
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: #d5d5d5;
}
.hero-payment__thumb {
  position: absolute;
  top: .07em;
  left: .07em;
  /* Match the supplied SVG's 106 × 60 capsule. */
  width: 1.431em;
  height: .81em;
  border-radius: 999px;
  background: #fff;
}
.hero-payment__pay, .hero-payment__paid {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  color: #fff;
  font-size: .52em;
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--tracking);
}
.hero-payment__pay { right: .7em; }
.hero-payment__paid { left: .7em; opacity: 0; }
.hero-payment__dollar {
  position: absolute;
  left: 18%;
  bottom: 70%;
  color: #7d0ee8;
  font-size: .5em;
  font-weight: 400;
  line-height: 1;
  opacity: 0;
  --burst-x: -40px;
  --burst-y: -100px;
  --burst-rotate: -28deg;
  --burst-delay: 920ms;
}
.hero-payment__dollar:nth-of-type(3) {
  left: 53%; --burst-x: 8px; --burst-y: -145px; --burst-rotate: 12deg; --burst-delay: 980ms;
}
.hero-payment__dollar:nth-of-type(4) {
  left: 84%; --burst-x: 44px; --burst-y: -110px; --burst-rotate: 25deg; --burst-delay: 1040ms;
}
#home[data-purchase] #home-title > .type-line { overflow: visible; }
#home[data-purchase] .hero-connector { background: transparent; }
#home[data-purchase] .hero-payment { visibility: visible; opacity: 1; animation: payment-appear 220ms ease-out both; }
#home[data-purchase] .hero-payment__track { animation: payment-fill 650ms 220ms cubic-bezier(.22,.7,.2,1) forwards; }
#home[data-purchase] .hero-payment__thumb { animation: payment-slide 780ms 220ms cubic-bezier(.22,.7,.2,1) forwards; }
#home[data-purchase] .hero-payment__pay { animation: payment-pay-out 180ms 470ms forwards; }
#home[data-purchase] .hero-payment__paid { animation: payment-paid-in 250ms 600ms ease-out forwards; }
#home[data-purchase] .hero-payment__dollar { animation: payment-burst 800ms var(--burst-delay) cubic-bezier(.18,.65,.25,1) both; }
@keyframes payment-appear { from { opacity: 0; } to { opacity: 1; } }
@keyframes payment-fill { to { background: #7d0ee8; } }
@keyframes payment-slide {
  /* Decelerate within the track; never overshoot the .07em end inset. */
  from { transform: translateX(0); }
  to { transform: translateX(calc(var(--hero-connector-width) - 1.571em)); }
}
@keyframes payment-pay-out { to { opacity: 0; } }
@keyframes payment-paid-in { from { opacity: 0; transform: translateY(calc(-50% + 5px)); } to { opacity: 1; transform: translateY(-50%); } }
@keyframes payment-burst {
  0% { opacity: 0; transform: translate(0, 0) scale(.45) rotate(0deg); }
  18% { opacity: 1; }
  65% { opacity: .95; }
  100% { opacity: 0; transform: translate(var(--burst-x), var(--burst-y)) scale(.85) rotate(var(--burst-rotate)); }
}
.home-content[data-scroll-motion] #home-title {
  transform: none;
}
.home-content[data-scroll-motion] .hero-lead {
  transform: translateY(calc(var(--hero-lift, 0px) * var(--hero-handoff, 0)));
}
.home-content[data-scroll-motion] #home[data-parcel-exit] #home-title > .type-line { overflow: visible; }
.home-content[data-scroll-motion][data-handoff-complete] .hero-lead { visibility: hidden; }
/* The device passes in front of the suffix; retire it only after the handoff. */
.home-content[data-scroll-motion][data-handoff-complete] .hero-suffix { visibility: hidden; }

.home-content[data-scroll-motion] #services-title .type-line__text { --line-progress: 1; }
.home-content[data-scroll-motion] .linked-section .type-line__text {
  --line-progress: clamp(0, calc(var(--scroll-enter, 1) * var(--line-span, 1) - var(--line-delay, 0)), 1);
  transform: translateY(calc(110% * (1 - var(--line-progress) - var(--scroll-exit, 0))));
}
.home-content[data-scroll-motion] section:not([data-copy-visible]) .section-link {
  pointer-events: none;
}
.home-content[data-scroll-motion] .section-link:focus-visible .type-line__text {
  transform: none;
}
main > section { padding-block: var(--space-7); }
main > section:first-child { padding-block: var(--space-6) var(--space-7); }
main > section.linked-section { padding: 0; }
.section-link {
  display: block;
  padding-block: var(--space-7);
  color: inherit;
  text-decoration: none;
}
.section-link > :last-child { margin-bottom: 0; }
section > section, article { margin-block: var(--space-5); }
:where(#services) > section { margin-block: var(--space-7); }
section > section:last-child, section > article:last-child { margin-bottom: 0; }
:where(#services) > section:last-child { margin-bottom: 0; }
h1, h2, h3, h4 { font-weight: var(--weight-strong); text-wrap: balance; }
h1 { margin: 0 0 var(--space-3); font-size: 48px; line-height: 1.25; letter-spacing: var(--tracking); }
h2 { margin: 0 0 var(--space-3); font-size: 36px; line-height: 1.3; letter-spacing: var(--tracking); }
h3 { margin: 0 0 var(--space-2); font-size: 24px; line-height: 1.4; letter-spacing: var(--tracking); }
:where(#services) > section > h2 { font-size: 28px; line-height: 1.35; }
:is(p, ul, ol, .table-scroll, details) + :is(h2, h3) { margin-top: var(--space-4); }
h4 { margin: var(--space-4) 0 var(--space-2); font-size: 18px; line-height: 1.5; letter-spacing: var(--tracking); }
article > :is(h3, h4):first-child { margin-top: 0; }
p { max-width: 76ch; margin: 0 0 var(--space-2); }
h1 + p, h2 + p { font-size: 18px; line-height: 1.65; }
#home-title { margin-bottom: 0; }
:where(#services) > section > h2 + p { font-size: 18px; line-height: 1.65; }
ul, ol { margin: var(--space-2) 0 var(--space-3); padding-left: var(--space-3); }
li + li { margin-top: var(--space-1); }
li > ul { margin-block: var(--space-1) var(--space-2); }
ol > li + li { margin-top: var(--space-4); }
li > :is(h3, h4) { margin: 0 0 var(--space-1); }
li > p:last-child { margin-bottom: 0; }
p > a { text-underline-offset: 3px; }
section > p:last-child { margin-bottom: 0; }
table { width: 100%; border-collapse: collapse; font-size: 14px; line-height: 1.6; }
caption { padding-bottom: var(--space-2); text-align: left; font-size: 16px; font-weight: 600; }
th, td { padding: var(--space-2); border: 1px solid; text-align: left; vertical-align: top; }
.table-scroll { overflow-x: auto; }
summary { padding-block: var(--space-1); cursor: pointer; }
section > details + details { margin-top: var(--space-1); }
section > details > p { margin: var(--space-1) 0 var(--space-2); padding-left: var(--space-3); }
.page-content > section > :is(section, article) { margin-block: var(--space-7); }
.page-content :is(p, ul, ol, .table-scroll, details) + :is(h2, h3) { margin-top: var(--space-5); }
.page-content h2 + :is(ol, article) { margin-top: var(--space-6); }
.page-content ol > li + li { margin-top: var(--space-5); }
.page-content :is(section, article) > :last-child { margin-bottom: 0; }
.site-footer {
  width: calc(100% + 2 * var(--page-gutter));
  margin-inline: calc(-1 * var(--page-gutter));
  padding: var(--space-7) var(--page-gutter) var(--space-5);
  color: #333d4b;
  /* 회사소개 hero glow, flipped: white on top, lavender rising from the bottom. */
  background:
    radial-gradient(ellipse at 72% 112%, #e9defc 0%, #f3ecfc 28%, transparent 66%),
    radial-gradient(ellipse at 9% 100%, #eef2ff, transparent 55%),
    linear-gradient(180deg, #ebe1fc 0%, #fff 38%);
  font-size: 14px;
  line-height: 1.6;
  letter-spacing: var(--tracking);
}
.footer-inner { max-width: var(--content-max-width); margin-inline: auto; padding-inline: var(--content-inset); }
.footer-main { display: grid; grid-template-columns: 1fr 1.8fr; gap: var(--space-6); }
.site-footer .footer-tagline { margin: 0; font-size: 28px; font-weight: var(--weight-strong); line-height: 1.4; letter-spacing: var(--tracking); }
.site-footer .footer-about { margin: 16px 0 0; max-width: 30em; color: #6b7684; font-size: 14px; line-height: 1.7; text-wrap: pretty; }
.footer-navigation { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-3); }
.footer-navigation h2 { margin: 0 0 20px; color: #8b7fa3; font-size: 14px; font-weight: 400; line-height: 1.6; letter-spacing: inherit; text-wrap: nowrap; }
.footer-navigation ul { margin: 0; padding: 0; list-style: none; }
.footer-navigation li + li { margin-top: 10px; }
.footer-navigation a { font-size: 14px; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer a:hover { color: #7517d6; text-decoration: underline; text-underline-offset: 4px; }
.site-footer a:focus-visible { outline: 2px solid #7517d6; outline-offset: 5px; }
.footer-company-info { margin-top: var(--space-7); color: #6b7684; }
.footer-company-info p { margin: 0 0 4px; max-width: none; }
.footer-company-info address { font-style: normal; }
.footer-policies { margin-top: var(--space-4); }
.footer-brand { display: block; width: 100%; margin-top: var(--space-6); }
.footer-brand img { display: block; width: 100%; height: auto; opacity: 0.12; }
.footer-brand:hover img { opacity: 0.18; }
.site-footer .footer-copyright { margin: var(--space-4) 0 0; color: #8b95a1; }
.footer-social { display: flex; gap: 14px; margin-top: var(--space-4); }
.site-footer .footer-social a { display: grid; place-items: center; width: 24px; height: 24px; color: #8b95a1; transition: color 180ms; }
.site-footer .footer-social a:hover { color: #7517d6; text-decoration: none; }
.footer-social svg { display: block; width: 22px; height: 22px; }
:target { scroll-margin-top: var(--section-safe-top); }
@media (max-width: 640px) {
  body { --page-gutter: var(--space-3); }
  header { gap: var(--space-2); }
  header nav { gap: var(--space-2); }
  main > section, main > section:first-child { padding-block: var(--space-6); }
  .section-link { padding-block: var(--space-6); }
  section > section, article { margin-block: var(--space-4); }
  :where(#services) > section { margin-block: var(--space-6); }
  h1 { font-size: 32px; line-height: 1.3; }
  h2 { font-size: 28px; line-height: 1.35; }
  h3 { font-size: 22px; }
  :where(#services) > section > h2 { font-size: 24px; }
  th, td { padding: 12px; min-width: 104px; }
}
@media (prefers-reduced-motion: reduce), print {
  .home-content[data-scroll-motion] .service-title-slot,
  .home-content[data-scroll-motion] .opportunity-title-intro { display: none; }
  .home-content[data-scroll-motion] #services .feature-stage::after { display: none; }
  .home-content[data-scroll-motion] .opportunity-scene,
  .home-content[data-scroll-motion] .opportunity-scene:not([data-active]) { position: relative; inset: auto; min-height: 720px; margin-top: 128px; opacity: 1; visibility: visible; }
  .home-content[data-scroll-motion] .opportunity-static-title { display: block; }
  .home-content[data-scroll-motion] .opportunity-scene { transform: none; }
  .home-content[data-scroll-motion] .opportunity-details { position: relative; inset: auto; margin-top: calc(var(--terrain-field-height) + 32px); }
  .terrain-region, .terrain-label > span { transition: none; }
  .home-content[data-scroll-motion] #services-title { transform: none; }
  .home-content[data-scroll-motion] #services-title > .type-line { transform: none; }
  .home-content[data-scroll-motion] #services .section-link { --business-theme: 0; }
  .home-content[data-scroll-motion] #services .feature-stage::before { display: none; }
  .home-content[data-scroll-motion] .audience-static { display: inline; }
  .home-content[data-scroll-motion] .audience-word { display: none; }
  .home-content[data-scroll-motion] .audience-heading { display: block; }
  .home-content[data-scroll-motion] .audience-panels { display: block; }
  .home-content[data-scroll-motion] .audience-panel + .audience-panel { margin-top: var(--space-7); }
  .home-content[data-scroll-motion] > section.summary-section { min-height: 100svh; margin-top: 0; }
  .home-content[data-scroll-motion] .summary-section .section-link { position: static; height: auto; }
  .home-content[data-hero-motion] #home-title .type-line__text { animation: none; }
  .home-content[data-scroll-motion] .linked-section .type-line__text { transform: none; }
  .home-content[data-scroll-motion] section:not([data-copy-visible]) .section-link { pointer-events: auto; }
  .home-content[data-scroll-motion] .hero-word-track { transform: none; }
  .home-content[data-scroll-motion] > #home { min-height: 100svh; }
  .home-content[data-scroll-motion] .hero-stage { position: static; transform: none; }
  .home-content[data-scroll-motion] #home-title { transform: none; }
  .home-content[data-scroll-motion] :is(.hero-lead, .hero-suffix) { transform: none; opacity: 1; }
  .home-content[data-scroll-motion][data-handoff-complete] .hero-lead,
  .home-content[data-scroll-motion][data-handoff-complete] .hero-suffix,
  .home-content[data-scroll-motion]:not([data-handoff-complete]) #services-title { visibility: visible; }
  .home-content[data-scroll-motion] > #services { min-height: 100svh; margin-top: 0; }
  .home-content[data-scroll-motion] #services .section-link {
    position: static;
    transform: none;
    height: auto;
    justify-content: center;
    padding-block-start: var(--space-6);
  }
  .home-content[data-scroll-motion] .audience-panels,
  .home-content[data-scroll-motion] #services:not([data-copy-visible]) .audience-panels,
  .home-content[data-scroll-motion] .audience-panel,
  .home-content[data-scroll-motion] .audience-panel[data-audience-hidden],
  .home-content[data-scroll-motion] .feature-item h3,
  .home-content[data-scroll-motion] .feature-detail,
  .home-content[data-scroll-motion] .feature-item[data-feature-hidden] .feature-detail {
    height: auto;
    opacity: 1;
    transform: none;
    visibility: visible;
  }
}
@media print {
  .home-page > header { position: static; }
  .home-content > section,
  .home-content > section.summary-section,
  .home-content[data-scroll-motion] > section.summary-section,
  .home-content[data-scroll-motion] .summary-section .section-link,
  .home-content > section:first-child,
  .home-content .section-link,
  .home-content > #home,
  .home-content[data-scroll-motion] > #home,
  .hero-stage { min-height: 0; padding-block: var(--space-4); }
  .home-content .linked-section :is(.type-line, .type-line__text) { display: inline; overflow: visible; }
}

/* Two-line services title: second line rolls with the audience word. */
.service-title-sub { display: none; }
.home-content[data-scroll-motion] .service-title-sub {
  display: block;
  height: 1.3em;
  overflow: clip;
  visibility: visible;
  opacity: calc(1 - var(--opportunity-words, 0));
  transform: translate(calc(var(--title-sub-pad, 0px) * var(--audience-position, 0)), calc(1.3em * var(--opportunity-position, 0)));
}
.home-content[data-scroll-motion] .service-sub-track {
  display: block;
  transform: translateY(calc(-50% * var(--audience-roll, 0)));
}
.service-sub-track > span { display: block; width: max-content; height: 1.3em; }
.home-content:not([data-scroll-motion]) .service-title-sub { display: block; }
.home-content:not([data-scroll-motion]) .service-sub-track > span + span { display: none; }

/* Customer → business sweep: each title glyph flips black → white at the
   curtain edge carried by the tablet. */
.home-content[data-title-sweep] #services-title :is(.service-title-prefix, .audience-word-track > span, .service-sub-track > span) {
  color: transparent;
  background-image: linear-gradient(90deg, #000 var(--sweep-x, 0px), #f9fafb var(--sweep-x, 0px));
  -webkit-background-clip: text;
  background-clip: text;
}
/* Light text on black reads heavier: thinner weight and grayscale smoothing. */
.home-content[data-scroll-motion] #services .feature-stage[data-dark-surface] { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
.home-content[data-scroll-motion] #services .feature-stage[data-dark-surface] .feature-detail p { font-weight: 200; }

/* The header stays put on the home page; it turns light over the black section. */
.home-page > header { position: fixed; z-index: 10; }
.home-page > header a, .home-page > header .site-logo img { transition: color 240ms, filter 240ms; }
body[data-dark-header] > header a { color: #e5e8eb; }
body[data-dark-header] > header a.header-cta { background: rgba(255, 255, 255, .12); }
body[data-dark-header] > header .site-logo img { filter: brightness(0) invert(1); }

/* Stage holds: fixed while a timed handoff is still waiting/playing. */
.home-content[data-scroll-motion] :is(.hero-stage, #services .feature-stage)[data-pinned] {
  position: fixed; top: 0; left: var(--pin-left, 0px); width: var(--pin-width, 100%);
  transform: none;
}

/* Hero → customer handoff: blur out, then focus in (Toss-style). */
.home-content[data-scroll-motion] :is(.hero-lead, .hero-suffix) {
  opacity: calc(1 - var(--hero-blur-out, 0));
  filter: blur(calc(var(--hero-blur-out, 0) * 16px));
}
.home-content[data-scroll-motion] #services-title > .type-line {
  opacity: var(--title-in-1, 1);
  filter: blur(calc((1 - var(--title-in-1, 1)) * 16px));
  translate: 0 calc((1 - var(--title-in-1, 1)) * 24px);
}
.home-content[data-scroll-motion] #services-title > .service-title-sub {
  filter: blur(calc((1 - var(--title-in-2, 1)) * 16px));
  translate: 0 calc((1 - var(--title-in-2, 1)) * 24px);
}
.home-content[data-scroll-motion] #services-title > .service-title-sub { opacity: calc(var(--title-in-2, 1) * (1 - var(--opportunity-words, 0))); }

/* Customer/business title → "24년간의 데이터로 … 거래 기회가 모이는 곳": blur swap instead of a roll. */
.home-content[data-scroll-motion] .service-title-slot .audience-word {
  transform: none;
  opacity: calc(1 - var(--opportunity-words, 0));
  filter: blur(calc(var(--opportunity-words, 0) * 16px));
}
.home-content[data-scroll-motion] .opportunity-word {
  transform: none;
  opacity: var(--opportunity-words, 0);
  filter: blur(calc((1 - var(--opportunity-words, 0)) * 16px));
}
.home-content[data-scroll-motion] .opportunity-title-intro > span {
  transform: translateY(calc(-110% * var(--scroll-exit, 0)));
  opacity: var(--opportunity-intro, 0);
  filter: blur(calc((1 - var(--opportunity-intro, 0)) * 16px));
}
.home-content[data-scroll-motion] #services-title > .service-title-sub {
  filter: blur(calc(max(1 - var(--title-in-2, 1), var(--opportunity-words, 0)) * 16px));
}
.home-content[data-scroll-motion] .service-title-slot { overflow: visible; }

/* Map → finale surfaces. ::before = charcoal + faint grid (continues the
   하이세모 screen); ::after = light lavender that meets the footer. */
.home-content[data-scroll-motion] #services .feature-stage::before {
  inset: 0 -100vmax; box-shadow: none; clip-path: none;
  /* The colour now comes from .map-sky (a scrolling gradient). */
  background: none;
  opacity: var(--map-dark, 0);
}
.home-content[data-scroll-motion] #services .feature-stage::after {
  inset: 0 -100vmax; box-shadow: none; clip-path: none;
  background: linear-gradient(180deg, #f8f6fc 0%, #f3eefc 55%, #ebe1fc 100%);
}
.home-content[data-scroll-motion] #services-title { filter: blur(calc(var(--title-hide, 0) * 16px)); }
.opportunity-cta { display: none; }
.home-content[data-scroll-motion] .opportunity-cta {
  display: inline-flex; position: absolute; left: 50%; z-index: 4; margin: 0;
  opacity: var(--final-cta, 0); transform: translate(-50%, calc(12px * (1 - var(--final-cta, 0)))); pointer-events: none;
}
.home-content[data-scroll-motion] .opportunity-cta[data-visible] { pointer-events: auto; }

.halftone-wipe { position: absolute; top: 0; left: 0; width: 100vw; height: 100svh; z-index: -1; pointer-events: none; visibility: hidden; }

.home-content[data-scroll-motion] .opportunity-scene {
  transform: translateY(calc(var(--map-push, 0px) - var(--opportunity-pan, 0px)));
}

/* 3D city loop behind the Korea map: bottom ~42%, fading into the charcoal. */
.city-backdrop {
  position: absolute; top: 58svh; left: 0; width: 100vw; height: 42svh; z-index: -1;
  object-fit: cover; object-position: center 60%; pointer-events: none; visibility: hidden; opacity: 0;
  -webkit-mask-image: linear-gradient(to top, #000 35%, transparent 100%);
  mask-image: linear-gradient(to top, #000 35%, transparent 100%);
}
@media (max-width: 760px) { .city-backdrop { display: none; } }

/* Scrolling sky behind the maps: a 6-viewport gradient moved by --sky-y. */
.map-sky { position: absolute; top: 0; left: 0; width: 100vw; height: 100svh; z-index: -1; overflow: hidden; pointer-events: none; opacity: var(--map-dark, 0); }
.home-content[data-scroll-motion] .map-sky { left: calc(-1 * var(--pin-left, 0px)); }
.map-sky-fill {
  position: absolute; left: 0; top: 0; width: 100%; height: 600svh; will-change: transform;
  transform: translateY(var(--sky-y, 0px));
  background: linear-gradient(180deg,
    #343434 0%, #343434 13%, #2b2b38 20%, #1e1f38 27%, #151832 34%,
    #1b2046 41%, #283061 48%, #3d4277 55%, #5b5a8c 62%, #7f78a3 68%,
    #a198bd 72.5%, #c4bbd9 77%, #e4ddf2 80.5%, #f8f6fc 83.33%, #f3eefc 92%, #ebe1fc 100%);
}

/* 고객 → 기업 (and 구매 → 판매): blur swap in place instead of a vertical roll.
   The old word blurs out over the first half, the new one focuses in over the second. */
.home-content[data-scroll-motion] :is(.audience-word-track, .service-sub-track) {
  display: grid; transform: none;
}
.home-content[data-scroll-motion] :is(.audience-word-track, .service-sub-track) > span { grid-area: 1 / 1; }
.home-content[data-scroll-motion] :is(.audience-word-track, .service-sub-track) > span:first-child {
  --swap-out: min(1, calc(var(--audience-roll, 0) * 2));
  opacity: calc(1 - var(--swap-out));
  filter: blur(calc(var(--swap-out) * 14px));
}
.home-content[data-scroll-motion] :is(.audience-word-track, .service-sub-track) > span:last-child {
  --swap-in: max(0, calc(var(--audience-roll, 0) * 2 - 1));
  opacity: var(--swap-in);
  filter: blur(calc((1 - var(--swap-in)) * 14px));
}
.home-content[data-scroll-motion] .service-title-sub { overflow: visible; }

/* 24년간 finale: stronger labels and meta row on the lavender. */
.home-content[data-scroll-motion] .terrain-region { color: #4e5968; }
.home-content[data-scroll-motion] .terrain-stem { opacity: .62; }
.home-content[data-scroll-motion] .opportunity-meta { color: #6b7684; }
.home-content[data-scroll-motion] .opportunity-meta::before,
.home-content[data-scroll-motion] .opportunity-meta::after { background: #c9c7d6; }
.home-content[data-scroll-motion] .terrain-region[aria-pressed="true"] { color: #8b2cff; }
.home-content[data-scroll-motion] .terrain-region[aria-pressed="true"] .terrain-stem::before { background: #8b2cff; box-shadow: 0 0 0 3px rgba(139, 44, 255, .16); }

/* Stems fade out toward the bottom so they never need to touch the moving waves. */
.terrain-stem { background: linear-gradient(to bottom, currentColor 0%, currentColor 30%, transparent 100%); }

/* Subpages (not home): the footer opens in white so it continues the page
   above without a seam, and the lavender only rises from the bottom. */
body:not(.home-page) .site-footer {
  background:
    radial-gradient(ellipse at 72% 118%, #e9defc 0%, #f3ecfc 30%, transparent 68%),
    radial-gradient(ellipse at 9% 108%, #eef2ff, transparent 55%),
    linear-gradient(180deg, #fff 0%, #fff 35%, #f6f1fe 100%);
}

/* Subpages: the header stays put (like home). Behind it, a progressive blur
   that is strongest at the top and fades to nothing below, with no edge line. */
body:not(.home-page) > header {
  position: sticky;
  top: 0;
  z-index: 40;
  isolation: isolate;
}
body:not(.home-page) > header::before,
body:not(.home-page) > header::after {
  content: "";
  position: absolute;
  z-index: -1;
  top: 0;
  left: 50%;
  width: 100vw;
  height: calc(100% + 36px);
  transform: translateX(-50%);
  pointer-events: none;
}
/* Soft layer: a light veil over the whole band, fading out at the bottom. */
body:not(.home-page) > header::before {
  background: linear-gradient(180deg, rgba(255, 255, 255, .72) 0%, rgba(255, 255, 255, .45) 55%, rgba(255, 255, 255, 0) 100%);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 45%, transparent 100%);
}
/* Strong layer: heavier blur concentrated toward the top edge. */
body:not(.home-page) > header::after {
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 25%, transparent 70%);
  mask-image: linear-gradient(180deg, #000 0%, #000 25%, transparent 70%);
}

/* Footer: two short link columns that mirror the header, company info beside them. */
.footer-content { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: var(--space-6); align-items: start; }
.footer-content .footer-navigation { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-content .footer-company-info { margin-top: 0; }
@media (max-width: 960px) {
  .footer-content { grid-template-columns: 1fr; }
  .footer-content .footer-company-info { margin-top: var(--space-5); }
}
/* 휴대폰: 한 줄 소개와 세모 소개 문단은 위에 전체 폭으로, 메뉴·회사 정보는 그 아래 */
@media (max-width: 640px) {
  .footer-main { grid-template-columns: 1fr; gap: var(--space-5); }
  .site-footer .footer-tagline { font-size: 24px; }
}