/* ============================================================
   IXC — global styles.

   Core system:
   - body { font-size: 1vw }  →  everything in em scales fluidly
   - 3 tokens: blue var(--blue) / black #151515 / white #fff
   - breakpoints re-inflate em values at 991 / 767 / 479
   ============================================================ */

/* 모노 라벨/숫자도 펴진고딕으로 통일 (영문 전용 Fragment Mono 제거) */

/* Pyeojin Gothic — self-hosted Korean/Latin webfont, static weights 400/500/700 */
@font-face {
  font-family: "Pyeojin Gothic";
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/PyeojinGothic-Regular.woff2") format("woff2");
}
@font-face {
  font-family: "Pyeojin Gothic";
  font-weight: 500;
  font-display: swap;
  src: url("../fonts/PyeojinGothic-Medium.woff2") format("woff2");
}

:root {
  /* ---- brand color system (single source of truth) ----
     IXC Plasma Violet — hsl(252,58%,46%).
     (legacy Deep Teal #0d6277 recoverable via git history)  */
  --blue: #4c31b9;               /* primary (Plasma Violet) — 8.58:1 vs white */
  --brand-rgb: 76, 49, 185;      /* primary as R,G,B for alpha tints */
  --brand-hover: #5335c9;        /* hover: L+4 */
  --brand-pressed: #442ca5;      /* pressed: L-5 */
  --brand-deep: #31117e;         /* dark gradient end, 13.89:1 vs white */
  --accent: #7e48ff;             /* small-dose accent — 4.93:1 vs white */
  --accent-rgb: 126, 72, 255;
  --black: #151515;
  --white: #ffffff;
  --pad-x: 1.75rem;
  /* rounded-pill design language */
  --r-card: 1.25em;   /* cards & large surfaces */
  --r-media: 1em;     /* visual blocks inside cards */
  --r-pill: 999em;    /* capsule tags, chips, inputs */
  --font-sans: "Pyeojin Gothic", Tahoma, sans-serif;
  --font-mono: "Pyeojin Gothic", sans-serif;
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* focus rings (WCAG 2.2): solid primary on light surfaces;
   accent at 45% on dark surfaces where primary lacks contrast */
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }
.section--dark :focus-visible,
.section--blue :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible,
.footer :focus-visible,
.header :focus-visible { outline-color: rgba(var(--accent-rgb), 0.45); }

html { background: var(--blue); }

body {
  font-family: var(--font-sans);
  font-size: 1vw;                 /* fluid root of the whole scale */
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--white);
  background: var(--blue);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  word-break: keep-all;           /* Korean: never break inside a word */
  overflow-wrap: break-word;
}

a { color: inherit; text-decoration: none; }
img { max-width: 100%; border-radius: 0.75em; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

/* ---------------- type scale ---------------- */

.h1 { font-size: 3.9em; line-height: 1.06; font-weight: 400; text-wrap: balance; }
/* product-hero headline: fixed intent size that STILL re-inflates on small
   screens (was pinned inline at 4.6/6em, which left a ~17px title on mobile) */
.h1--pd { font-size: 4.6em; }
.h2 { font-size: 5em; line-height: 1.06; font-weight: 400; letter-spacing: 0; text-wrap: balance; }
.h2--small { font-size: 2.875em; line-height: 1.12; }
.h2--products { font-size: 6em; }
.h2--blue { color: var(--blue); font-size: 4.5em; line-height: 1.04; font-weight: 500; max-width: 15ch; text-wrap: balance; }
.h2--blue-small { color: var(--blue); font-size: 2.875em; font-weight: 500; line-height: 1.12; }
.md-txt { font-size: 2.3em; line-height: 1.22; }
.p-gen { font-size: 0.9em; line-height: 1.52; font-weight: 500; letter-spacing: -0.005em; }
.p-ch { max-width: 40ch; }
.caption {
  font-family: var(--font-mono);
  font-size: 0.82em;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  opacity: 0.65;
}
.caption--blue { color: var(--blue); }
.tag-txt {
  font-family: var(--font-mono);
  font-size: 0.75em;
  letter-spacing: -0.02em;
  text-transform: uppercase;
}

/* ---------------- shared bits ---------------- */

.cube { display: inline-block; background: var(--white); }
.cube--tag { width: 0.375em; height: 0.375em; border-radius: 1px; }
.cube--active { width: 8px; height: 8px; border-radius: 1px; background: var(--blue); }

@keyframes cube-flicker {
  0%, 100% { opacity: 1; }
  8%  { opacity: 0.2; }
  16% { opacity: 1; }
  38% { opacity: 0.35; }
  52% { opacity: 1; }
  70% { opacity: 0.15; }
  84% { opacity: 0.9; }
}
.flicker { animation: cube-flicker 2.4s steps(1) infinite; }

.tagline-row { display: flex; align-items: center; gap: 0.6em; margin-bottom: 1.4em; }

.wrapper-general { position: relative; padding: 13.25em var(--pad-x); }

.section { position: relative; width: 100%; }
.section--blue  { background: var(--blue);  color: var(--white); }
.section--dark  { background: var(--black); color: var(--white); }
.section--white { background: var(--white); color: var(--black); }

/* ---------------- buttons ---------------- */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  background: var(--white);
  color: var(--blue);
  border-radius: 1.25em;
  padding: 0.25em 0.25em 0.25em 1em;
  font-size: 0.95em;
  font-weight: 500;
}
.btn--blue { background: var(--blue); color: var(--white); }
.btn--compact { font-size: 0.82em; letter-spacing: -0.02em; padding: 0.25em 0.25em 0.25em 0.75em; }

.btn__chip {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  background: var(--blue);
  color: var(--white);
  border-radius: 1em; /* inner: button 1.25em − 0.25em padding */
  overflow: hidden;
  position: relative;
}
.btn__chip--lg { width: 2.375em; height: 2.375em; }
.btn__chip--white { background: var(--white); color: var(--blue); }

.arrow-glyph { display: inline-block; line-height: 1; }

/* arrow fly-out on hover: glyph exits top-right, clone enters from bottom-left */
@media (hover: hover) and (pointer: fine) {
  .btn__chip .arrow-glyph { transition: transform 0.45s var(--ease-out); }
  .btn__chip::after {
    content: "↗";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translate(-110%, 110%);
    transition: transform 0.45s var(--ease-out);
  }
  .btn:hover .btn__chip .arrow-glyph,
  .product-card:hover .product-card__arrow { transform: translate(120%, -120%); }
  .btn:hover .btn__chip::after { transform: translate(0, 0); }
  .product-card__arrow { transition: transform 0.45s var(--ease-out); }
}

/* text roll-up hover (JS wraps label into .line-inner[data-text]) */
.line-inner { display: inline-block; position: relative; }
@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
  .line-inner {
    transition: transform 0.32s var(--ease-out);
  }
  .line-inner::after {
    content: attr(data-text);
    position: absolute;
    left: 0;
    top: 100%;
  }
  a:hover .line-inner,
  .btn:hover .line-inner { transform: translateY(-100%); }
  /* clip on unpadded label wrappers only — never on the padded link itself */
  .btn__label, .nav-label { display: block; overflow: hidden; }
}

/* ---------------- header ---------------- */

.header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 99;
}
.header__wrap { padding: 0.875em var(--pad-x); }
.header__grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: center;
}

.logotype { display: flex; align-items: center; gap: 0.55em; }
/* IXC logo: inlined SVG painted with fill="currentColor" — no external
   request, no CSS-mask dependency; recolors with the header theme swap */
.logo-ixc {
  display: block;
  width: 5.8em;
  height: auto;
  aspect-ratio: 140.09 / 56.69;
}

.glass-pill {
  display: flex;
  align-items: center;
  gap: 0.25em;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background: #00000047;
  border-radius: 1.25em;
  padding: 0.25em;
}
.header__menu { justify-self: center; }
.header__right { justify-self: end; padding: 0.25em 0.375em 0.25em 0.25em; }

.nav-link {
  display: flex;
  color: var(--white);
  padding: 0.75em 1.125em;
  font-size: 0.84em;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0;
  border-radius: 1em; /* outer pill 1.25em − 0.25em padding */
  transition: opacity 0.32s var(--ease-out), background 0.32s var(--ease-out), color 0.32s var(--ease-out);
}
.nav-link.is-current { background: var(--white); color: var(--blue); }

/* dim siblings on hover */
@media (hover: hover) {
  .glass-pill:hover .nav-link:not(:hover):not(.is-current) { opacity: 0.55; }
}

/* header over light sections: pills go solid blue, logo goes blue */
.glass-pill { transition: background 0.42s var(--ease-out); }
.header.is-light-section .glass-pill { background: var(--blue); }
.header.is-light-section .nav-link.is-current { background: var(--white); color: var(--blue); }
.header.is-light-section .logotype { color: var(--blue); }
.header.is-light-section .btn--compact { outline: 1px solid #ffffff40; }
.logotype { transition: color 0.32s var(--ease-out); color: var(--white); }

.hamburger { display: none; }

/* ---------------- hero ---------------- */

.hero {
  position: relative;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}
.hero__wrap {
  position: relative;
  z-index: 15;
  height: 100%;
  padding: 8.5rem var(--pad-x) 2.5em;
}
.hero__flex {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 2.5em;
}
.hero__cta { margin-top: 2.2em; display: flex; flex-wrap: wrap; align-items: center; gap: 1em 1.5em; }

/* button rows: real gap between side-by-side buttons */
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 1em 1.5em; }
.btn-row--center { justify-content: center; }
.hero__caption { align-self: flex-end; }

.hero__background {
  position: absolute;
  inset: 0;
  z-index: 5;
}
.strings-viewport {
  --strings-scale: 0.9;
  width: 100%;
  height: 100vh;
  min-height: 560px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--blue);
}
#strings-stage {
  width: calc(100% / var(--strings-scale));
  height: calc(100vh / var(--strings-scale));
  min-height: calc(560px / var(--strings-scale));
  transform: scale(var(--strings-scale));
  flex: none;
}
#strings-canvas { width: 100%; height: 100%; display: block; }

/* deep-space hero variant (home): near-black canvas, bottom fade into brand blue */
.strings-viewport--space { background: #030610; }
.hero__fade {
  position: absolute;
  inset: auto 0 0 0;
  height: 7rem;
  z-index: 8;
  pointer-events: none;
  /* settle the star field so the space hands off seamlessly into
     the next section, which opens on the same deep-space tone */
  background: linear-gradient(180deg, rgba(2, 4, 10, 0) 0%, #02040a 100%);
}

/* Work hero fades its space into the blue client section below */
.hero__fade--blue {
  height: 14rem;
  background: linear-gradient(180deg, rgba(3, 6, 16, 0) 0%, var(--brand-deep) 55%, var(--blue) 100%);
}

/* home industries section descends FROM the hero: space black →
   deep brand tone → brand colour, one continuous sky */
.built-for {
  background: linear-gradient(180deg, #02040a 0%, var(--brand-deep) 30%, var(--blue) 58%);
}
/* the orbit lives in the dark upper half (Industries) and dissolves
   before the blue "함께한 고객" block — otherwise dark-space stars/streaks
   muddy the solid-blue lower half */
.built-for .orbit-layer {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 34%, transparent 56%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 34%, transparent 56%);
}

@media (max-width: 991px) { .strings-viewport { --strings-scale: 0.8; } }
@media (max-width: 479px) { .strings-viewport { --strings-scale: 0.72; } }

/* ---------------- built-for ---------------- */

.box-heading { position: relative; z-index: 3; }
.box-heading .h2 { max-width: 77ch; }
.box-heading--center { text-align: center; display: flex; flex-direction: column; align-items: center; }


.execution-box {
  position: relative;
  z-index: 3;
  display: flex;
  justify-content: flex-end;
  margin-top: 9em;
}
.execution-box__inner { max-width: 42ch; display: flex; flex-direction: column; gap: 1.6em; }

.wrapper-general--partners { padding-top: 0; }
.partners-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 3em; margin-bottom: 4.5em; }
.partners-p { max-width: 47ch; }

/* scattered logo grid: 6 cols, 8-slot pattern applied by JS */
.partners-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  grid-auto-rows: 8.5em;
  gap: 1em;
}
.partner-item {
  display: block;
  background: #f1f1f126;
  border-radius: var(--r-card);
  transition: background 0.4s;
}
.partner-item:hover { background: #f1f1f112; }
.partner-box img, .partner-logo { max-width: 78%; max-height: 62%; object-fit: contain; opacity: 0.92; }
.partner-box {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  padding: 1rem;
  font-family: var(--font-mono);
  font-size: 0.9em;
  opacity: 0.85;
}

/* ---------------- pixel transition strips ---------------- */

.px-strip {
  position: relative;
  width: 100%;
  overflow: hidden;
  line-height: 0;
}
.px-strip canvas { display: block; }

/* ---------------- IX Orbit deco layers (replace circuit pipes) ---------------- */

.orbit-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.orbit-layer canvas { width: 100%; height: 100%; display: block; }
.orbit-band { position: relative; height: 24em; overflow: hidden; pointer-events: none; }
/* sub-section transition inside a padded wrapper: bleed to the section edges so
   the ellipse spans full-width, with a touch of breathing room top/bottom */
.orbit-band--sub { height: 20em; margin: 1.5em calc(-1 * var(--pad-x)); }

/* ---------------- v4 kinetic typography ---------------- */

/* SplitText line wrappers: mask:'lines' adds overflow-clipping parents;
   keep the split lines block-level so yPercent reveals read cleanly */
.sl-line { display: block; }

/* hero keyword: settles its tracking, then a soft accent glow lights up
   ( --kw-glow tweened 0→1 by motion.js after the line reveal ) */
.kw {
  --kw-glow: 0;
  font-style: normal;
  text-shadow: 0 0 calc(22px * var(--kw-glow)) rgba(var(--accent-rgb), calc(0.55 * var(--kw-glow)));
}

/* keyword color-fill: the orbit accent sweeps L→R across the word as you
   scroll (background-clip:text). Falls back to a solid colour if unsupported. */
.kw-fill {
  color: rgba(var(--brand-rgb), 0.9);
  font-weight: 500;
}
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .kw-fill {
    background-image: linear-gradient(90deg, var(--accent), var(--accent));
    background-repeat: no-repeat;
    background-size: 0% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: rgba(var(--brand-rgb), 0.35);
    -webkit-text-fill-color: currentColor;
  }
  /* on dark surfaces the base ink is a dim white, fill is the bright accent */
  .section--dark .kw-fill,
  .pd-section .kw-fill,
  .section--blue .kw-fill,
  .products__intro .kw-fill {
    color: rgba(255, 255, 255, 0.32);
  }
}

/* content always paints above the deco layers */
.section, .pd-section { position: relative; }
.section > .wrapper-general,
.section > .products__wrapper,
.pd-section > div:not(.orbit-layer),
.pd-section > .pd-caps,
.pd-section > .pd-props {
  position: relative;
  z-index: 1;
}

/* ---------------- products ---------------- */

.products__wrapper {
  position: relative;
  padding: 13em 0;
  min-height: 420vh;   /* scroll runway for the horizontal scrub */
}
.products__intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 3em;
  padding: 0 var(--pad-x);
}
.products__intro-right { max-width: 42ch; display: flex; flex-direction: column; gap: 1.8em; }

.products__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.products__track {
  display: flex;
  gap: 4.3em;
  padding-left: clamp(120px, 10vw, 320px);
  will-change: transform;
}

/* static-rail variant (index): the intro pins & fills instead, so the
   cards drop into a plain three-column grid — no horizontal scrub */
[data-rail="static"].products__wrapper { min-height: 0; padding-bottom: 9em; }
[data-rail="static"] .products__stage {
  position: static; height: auto; min-height: 0; overflow: visible;
  margin-top: 4.5em;
}
[data-rail="static"] .products__track {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4em;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
  will-change: auto;
}
[data-rail="static"] .product-card {
  width: auto;
  font-size: 1vw;
}
@media (max-width: 991px) {
  [data-rail="static"] .products__track { grid-template-columns: 1fr; }
  [data-rail="static"] .product-card { width: auto; font-size: 1.6vw; }
}
.product-card {
  flex: none;
  width: 26.1em;
  display: flex;
  flex-direction: column;
  background: var(--blue);
  color: var(--white);
  border-radius: var(--r-card);
  overflow: hidden;
  font-size: 1vw;          /* reset em context, as in source */
  padding: 1em;
  gap: 1em;
  will-change: transform;
}
.product-card__tagrow { display: flex; justify-content: space-between; align-items: center; }
.tagline-product {
  font-family: var(--font-mono);
  font-size: 0.6em;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  background: #ffffff26;
  border-radius: var(--r-pill);
  padding: 0.7em 0.85em;
}
.product-card__visual {
  height: 21.5em;
  border-radius: var(--r-media);
  background:
    linear-gradient(#ffffff12, #ffffff05),
    repeating-linear-gradient(0deg, transparent 0 23px, #ffffff14 23px 24px),
    repeating-linear-gradient(90deg, transparent 0 23px, #ffffff14 23px 24px);
  position: relative;
}
.product-card__visual::after {
  content: "";
  position: absolute;
  width: 34%;
  aspect-ratio: 1;
  right: 8%;
  bottom: 10%;
  border-radius: 2px;
  background: #ffffff22;
}
.product-card__visual[data-pattern="2"]::after { right: auto; left: 8%; top: 10%; bottom: auto; background: var(--accent)2e; }
.product-card__visual[data-pattern="3"]::after { width: 55%; aspect-ratio: 2.2; }
.product-card__visual[data-pattern="4"]::after { border-radius: 50%; background: #ffffff1c; }
.product-card__visual[data-pattern="5"]::after { width: 22%; top: 14%; left: 12%; bottom: auto; right: auto; }
.product-card__visual[data-pattern="6"]::after { width: 46%; aspect-ratio: 1.4; background: var(--accent)24; }
.product-card__visual[data-pattern="7"]::after { width: 30%; border-radius: 50%; left: 35%; }
.product-card__about { display: flex; flex-direction: column; gap: 0.8em; padding: 0.4em 0.2em 0.6em; }
.product-title { font-size: 1.3em; max-width: 21ch; }
.product-desc { font-size: 1vw; line-height: 1.5; max-width: 38ch; opacity: 0.85; }

/* ---------------- cutting edge ---------------- */

.cutting-edge__wrap { display: flex; flex-direction: column; gap: 7em; }

.edge-stats {
  display: flex;
  gap: 6em;
  margin-top: 4.5em;
  justify-content: center;
}
.edge-stat { display: flex; flex-direction: column; gap: 0.9em; align-items: center; }
.number-count { font-size: 4.5em; font-weight: 500; }

/* ---------------- newsroom ---------------- */

.wrapper-general--news { padding: 10em var(--pad-x) 8em; }
.newsroom__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 3.2em;
}
.articles-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1em 2em;
}
/* two-card variant: 2-up from tablet, collapsing to 1 on phones */
@media (min-width: 768px) { .articles-grid--pair { grid-template-columns: 1fr 1fr; } }
.article-link {
  display: flex;
  flex-direction: column;
  gap: 1.1em;
  background: rgba(var(--brand-rgb), 0.10);
  border-radius: var(--r-card);
  padding: 1em 1em 1.45em;
  transition: background 0.45s;
}
.article-link:hover { background: rgba(var(--brand-rgb), 0.15); }
.image-article {
  height: 23em;
  border-radius: var(--r-media);
  overflow: hidden;
  background:
    linear-gradient(160deg, var(--blue) 0%, var(--brand-deep) 100%);
  position: relative;
}
.image-article::after {
  content: "";
  position: absolute;
  inset: auto 12% 14% auto;
  width: 30%;
  aspect-ratio: 1;
  background: #ffffff2a;
  border-radius: 2px;
}
.image-article[data-pattern="b"]::after { inset: 14% auto auto 12%; border-radius: 50%; }
.image-article[data-pattern="c"]::after { width: 50%; aspect-ratio: 2.4; inset: auto auto 14% 12%; }
.article-meta { display: flex; justify-content: space-between; align-items: center; }
.news-tag {
  color: var(--blue);
  background: rgba(var(--brand-rgb), 0.12);
  border-radius: var(--r-pill);
  padding: 0.63em 0.7em 0.6em;
  font-size: 0.78em;
  font-weight: 500;
}
.article-title {
  color: var(--blue);
  font-size: 1.4em;
  line-height: 1.38;
  font-weight: 500;
  letter-spacing: -0.01em;
}

/* ---------------- CTA ---------------- */

.cta-box {
  min-height: 125vh;
  display: flex;
  align-items: flex-end;
}
.cta-box__inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 2.4em;
  padding: 6.5em var(--pad-x) 10em;
}
.cta-lines { width: min(78vw, 1200px); margin-top: 15em; }
.cta-svg { width: 100%; height: auto; display: block; }
.cta-base { stroke: rgba(var(--brand-rgb), 0.25); stroke-width: 1.5; }
.cta-pulse { stroke: var(--blue); stroke-width: 1.5; opacity: 0; }
.cta-cap {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 13px;
  fill: var(--blue);
  letter-spacing: 0.08em;
  opacity: 0;
}

/* ---------------- footer ---------------- */

.footer { background: var(--black); color: var(--white); }
.wrapper-footer { padding: 4.5em var(--pad-x) 1.5em; }
.footer__top {
  display: flex;
  justify-content: space-between;
  gap: 6em;
  padding-bottom: 6em;
}

.input-field {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: 1px solid #ffffff40;
  color: var(--white);
  border-radius: var(--r-pill);
  padding: 0.9em 1em;
  font: inherit;
  font-size: 0.9em;
  outline: none;
  transition: border-color 0.4s;
}
.input-field:hover, .input-field:focus { border-color: #ffffffa6; }
.form-note { font-size: 0.82em; opacity: 0.75; line-height: 1.4; }
.footer__menu-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 6em 5em;
}
.menu-box { display: flex; flex-direction: column; gap: 0.5em; }
.title-menu { font-size: 0.9em; font-weight: 500; letter-spacing: -0.01em; margin-bottom: 0.8em; }
.footer-link {
  font-size: 0.9em;
  line-height: 1.3;
  transition: color 0.4s;
}
.footer-link:hover { color: #ffffffa6; }
.footer__bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 2em;
  border-top: 1px solid #ffffff40;
  padding-top: 1.5em;
}
.footer__bottom-brand { display: flex; align-items: center; gap: 1.6em; }

/* ---------------- mobile menu ---------------- */

.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 103;
  background: var(--white);
  color: var(--blue);
  transform: translateX(100%);
  visibility: hidden;
  transition: transform 0.5s var(--ease-out), visibility 0.5s var(--ease-out);
  height: 100dvh;
}
.mobile-menu.is-open { transform: translateX(0); visibility: visible; }
.mobile-menu__inner {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 6rem 1.25rem 2rem;
}
.mobile-menu__links { display: flex; flex-direction: column; gap: 1.2rem; }
.mobile-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.5rem 0;
  font-size: 2rem;
  font-weight: 500;
}
.mobile-link .cube--active { opacity: 0; transform: scale(0); transition: all 0.3s var(--ease-out); }
.mobile-link.is-current .cube--active { opacity: 1; transform: scale(1); }
.mobile-menu__bottom { display: flex; flex-direction: column; gap: 2rem; }
.mobile-menu__splitter {
  height: 1px;
  background: linear-gradient(90deg, rgba(var(--brand-rgb), 0), var(--blue) 50%, rgba(var(--brand-rgb), 0));
  margin-bottom: 1rem;
}
.mobile-menu__group-title { font-family: var(--font-mono); text-transform: uppercase; font-size: 0.75rem; opacity: 0.6; margin-bottom: 0.7rem; }
.mobile-sub-link { display: block; font-size: 1rem; padding: 0.9rem 0; }

/* ============================================================
   breakpoints — em re-inflation, per source behavior
   ============================================================ */

@media (max-width: 991px) {
  :root { --pad-x: 1.25rem; }

  .header { background: var(--blue); }
  .header__menu, .header__right { display: none; }
  .header__grid { display: flex; justify-content: space-between; }
  .hamburger {
    display: grid;
    place-items: center;
    width: 44px;
    height: 44px;
    position: relative;
    z-index: 105;
  }
  .hamburger__cubes {
    display: grid;
    grid-template-columns: 8px 8px;
    grid-template-rows: 8px 8px;
    gap: 4px;
    position: relative;
  }
  .hamburger__cubes i { background: var(--white); border-radius: 0.5px; }
  .hamburger__cubes i.mid { position: absolute; inset: 0; margin: auto; width: 8px; height: 8px; transform: scale(0); transition: transform 0.3s; }
  .hamburger.is-open .hamburger__cubes i.mid { transform: scale(1); }
  .hamburger.is-open .hamburger__cubes i { background: var(--blue); }

  .h1 { font-size: 5.6em; }
  .h1--pd { font-size: 6.4em; }
  .h2 { font-size: 6.3em; }
  .h2--small { font-size: 3.7em; }
  .h2--products { font-size: 7.6em; }
  .h2--blue { font-size: 5.3em; }
  .md-txt { font-size: 3.5em; }
  .p-gen { font-size: 1.45em; }
  .input-field { font-size: 1.5em; }
  .form-note { font-size: 1.4em; }
  .caption { font-size: 1.25em; }
  .tag-txt { font-size: 1.35em; }
  .news-tag { font-size: 1.4em; }
  .footer-link { font-size: 1.5em; }
  .btn { font-size: 1.5em; }
  .number-count { font-size: 6em; }
  .product-title { font-size: 2.2em; }
  .product-desc { font-size: 1.6em; }
  .tagline-product { font-size: 1.2em; }
  .article-title { font-size: 2em; }

  .partners-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .partners-head { flex-direction: column; align-items: flex-start; }

  /* products: sticky scrub off, native horizontal scroll on */
  .products__wrapper { min-height: 0; }
  .products__stage { position: static; height: auto; min-height: 0; overflow-x: scroll; margin-top: 5em; }
  .products__track { padding: 0 var(--pad-x); }
  .product-card { width: 60vw; font-size: 1.6vw; }
  .product-card__visual { height: 34em; }
  .products__intro { flex-direction: column; align-items: flex-start; }

  .articles-grid { grid-template-columns: 1fr 1fr; }
  .cta-box { min-height: 90vh; }
  .footer__top { flex-direction: column; }
  .footer__menu-grid { gap: 1em 5em; }
}

@media (max-width: 767px) {
  :root { --pad-x: 1rem; }
  .h2 { font-size: 6.3em; line-height: 1.08; }
  .h2--small { font-size: 5em; }
  .h2--products { font-size: 8em; }
  .h2--blue { font-size: 6em; }
  .p-gen { font-size: 1.9em; }
  .input-field { font-size: 1.9em; }
  .form-note { font-size: 1.8em; }
  .article-title { font-size: 2.3em; }
  .news-tag { font-size: 1.6em; }
  .footer-link { font-size: 1.95em; }
  .btn { font-size: 1.85em; }
  .tagline-product { font-size: 1.4em; }
  .articles-grid { grid-template-columns: 1fr; gap: 1.2em; }
  .partners-grid { grid-template-columns: repeat(3, 1fr); }
  .footer__menu-grid { grid-template-columns: 1fr 1fr; width: 100%; gap: 6em 1em; }
  .edge-stats { flex-direction: column; gap: 3em; }
  .product-card { width: 76vw; font-size: 2vw; }
}

@media (max-width: 479px) {
  :root { --pad-x: 16px; }
  body { line-height: 1; }
  .h1 { font-size: 8.4em; }
  .h1--pd { font-size: 7.4em; }
  .h2 { font-size: 8.5em; }
  .h2--small { font-size: 6em; }
  .h2--blue { font-size: 8.4em; }
  .p-gen { font-size: 3.7em; }
  .input-field { font-size: 4.3em; }  /* >=16px so iOS Safari does not zoom on focus */
  .form-note { font-size: 3.5em; }
  .caption { display: none; }
  .btn { font-size: 3.6em; width: 100%; justify-content: space-between; }
  .footer-link { font-size: 3.8em; }
  .news-tag { font-size: 3.2em; }
  .article-title { font-size: 4.2em; }
  .tagline-product { font-size: 2.8em; }
  .hero { height: 100svh; }
  .hero__wrap { padding: 25em 1rem 10em; }
  .partners-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .product-card { width: 86vw; font-size: 3vw; }
  .product-card__visual { height: 20rem; }
  .hamburger__cubes { grid-template-columns: 6px 6px; grid-template-rows: 6px 6px; }
  .hamburger__cubes i.mid { width: 6px; height: 6px; }
  .footer__menu-grid { grid-template-columns: 0.75fr 1fr; gap: 9em 1em; }
}

@media (prefers-reduced-motion: reduce) {
  .flicker { animation: none; }
  .mobile-menu { transition: none; }
}

/* ---------------- footer brand statement (replaces newsletter block) ---------------- */
.footer-brand { display: flex; flex-direction: column; gap: 1.8em; max-width: 34ch; }
.footer-brand__title { font-size: 2.3em; line-height: 1.18; }
.footer-brand__meta { display: flex; flex-direction: column; gap: 0.5em; font-size: 0.95em; opacity: 0.85; line-height: 1.5; }
.footer-brand__meta a { color: inherit; }
.footer-brand__meta a:hover { text-decoration: underline; }

/* ---------------- photo cover variant for article cards ---------------- */
.image-article--photo { background-size: cover; background-position: center; }
.image-article--photo::after { display: none; }

/* ---------------- sub-services inside a product card (OPERATE / Platform Lab) ---------------- */
.product-sublist { display: flex; flex-direction: column; gap: 0.9em; margin-top: 1.2em; padding-top: 1.2em; border-top: 1px solid #ffffff26; }
.product-subitem { display: flex; flex-direction: column; gap: 0.25em; }
.product-subitem__name { font-weight: 500; font-size: 0.95em; }
.product-subitem__desc { font-size: 0.82em; opacity: 0.72; line-height: 1.5; }

@media (max-width: 991px) {
  .footer-brand__title { font-size: 2.6em; }
  .footer-brand__meta { font-size: 1.45em; }
  .product-subitem__name { font-size: 1.7em; }
  .product-subitem__desc { font-size: 1.4em; }
}
@media (max-width: 767px) {
  .footer-brand__title { font-size: 3.4em; }
  .footer-brand__meta { font-size: 1.9em; }
}
@media (max-width: 479px) {
  .footer-brand__title { font-size: 6em; }
  .footer-brand__meta { font-size: 3.7em; }
}

/* skip-navigation (a11y): visible only on keyboard focus */
.skip-link { position: absolute; left: 0.5rem; top: -4rem; z-index: 200; background: var(--white); color: var(--blue); padding: 0.6rem 1rem; border-radius: var(--r-pill); font-weight: 500; transition: top 0.2s var(--ease-out); }
.skip-link:focus-visible { top: 0.5rem; }

/* Lenis smooth-scroll base (inlined from lenis.css to drop a render-blocking CDN request) */
html.lenis, html.lenis body { height: auto; }
.lenis:not(.lenis-autoToggle).lenis-stopped { overflow: clip; }
.lenis [data-lenis-prevent], .lenis [data-lenis-prevent-wheel], .lenis [data-lenis-prevent-touch], .lenis [data-lenis-prevent-vertical], .lenis [data-lenis-prevent-horizontal] { overscroll-behavior: contain; }
.lenis.lenis-smooth iframe { pointer-events: none; }
.lenis.lenis-autoToggle { transition-property: overflow; transition-duration: 1ms; transition-behavior: allow-discrete; }

/* ============================================================
   Mobile audit fixes (2026-07-20)
   These components were left at the ~1vw base at small viewports,
   so they rendered 3–7px. Re-inflate to the established scale
   (.p-gen ≈ 14px @390 is the body reference). Plus Korean line-break,
   logo, a11y and footer-legal-visibility polish.
   ============================================================ */
/* keep-all: stop ugly mid-eojeol (mid-word) breaks in Korean display text */
.h1, .h2, .h2--blue, .h2--small, .h2--products, .footer-brand__title, .btn__label, .title-menu { word-break: keep-all; }

@media (max-width: 991px) {
  .title-menu { font-size: 1.5em; }        /* footer column headers (was 0.9em → 6.9px) */
  .partner-box { font-size: 1.5em; }        /* partner name fallback text */
  .tag-txt { font-size: 1.5em; }            /* section eyebrow labels */
  .logo-ixc { width: 8em; }                 /* header wordmark (was 5.8em → 23px) */
  .skip-link { font-size: 1.4em; }
  .footer-copyright { font-size: 1.5em; }
  /* `max-width: Nch` on 1em containers collapses to ~66px at mobile (ch tracks the
     un-inflated body font). These stack full-width on mobile, so reset the measure. */
  .footer-brand, .products__intro-right, .execution-box__inner { max-width: none; }
}
@media (max-width: 767px) {
  .title-menu { font-size: 2em; }
  .partner-box { font-size: 1.9em; }
  .tag-txt { font-size: 2em; }
  .logo-ixc { width: 10em; }
  .skip-link { font-size: 1.9em; }
}
@media (max-width: 479px) {
  .title-menu { font-size: 3em; }
  .partner-box { font-size: 2.9em; }
  .tag-txt { font-size: 3em; }
  .logo-ixc { width: 13em; }
  .skip-link { font-size: 3.4em; }
  /* copyright / 사업자등록번호 line is a .caption (display:none @479); keep it visible on phones */
  .footer-copyright { display: block; font-size: 2.9em; opacity: 0.72; line-height: 1.65; }
}

.footer-legal { text-decoration: underline; opacity: 0.9; }