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

   Core system:
   - body { font-size: 1vw }  →  everything in em scales fluidly
   - 3 tokens: brand var(--brand) / 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 Infrared Ember — hsl(7,80%,46%).
     (legacy Deep Teal #0d6277 recoverable via git history)  */
  --brand: #D32D17;               /* primary (Infrared Ember) — 5.1:1 vs white */
  --brand-rgb: 211, 45, 23;      /* primary as R,G,B for alpha tints */
  --brand-hover: #E63119;        /* hover: L+4 */
  --brand-pressed: #BC2815;      /* pressed: L-5 */
  --brand-deep: #7E1B0A;         /* dark gradient end, 10.2:1 vs white */
  --brand-ink: #A82008;          /* 밝은/틴트 배경 위 텍스트용 — 브랜드 틴트(#f6d3cf)에서도 AA(5.26:1). --brand는 틴트 위 4.2로 미달 */
  --accent: #FC5432;             /* small-dose accent — dark-surface use, 4.8:1 vs black */
  --accent-rgb: 252, 84, 50;
  --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(--brand); outline-offset: 2px; }
.section--dark :focus-visible,
.section--brand :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(--brand); }

/* cross-document page transition: soft crossfade instead of a hard flash
   (progressive enhancement — no-op in browsers without the View Transitions API) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.28s; }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) { animation: none !important; }
}

body {
  font-family: var(--font-sans);
  font-size: 1vw;                 /* fluid root — 모바일 em 재팽창 값은 1vw 기준 보정 */
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--white);
  background: var(--brand);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  word-break: keep-all;           /* Korean: never break inside a word */
  overflow-wrap: break-word;
}
/* ------------------------------------------------------------
   루트 폰트 — 구간별 정규화 (2026-07-24 모바일 QA)

   이 사이트는 body font-size를 루트로 삼고 991/767/479에서 컴포넌트를
   em으로 재팽창시킨다. 각 구간의 em 값은 그 구간 "하단" 뷰포트 기준으로
   맞춰져 있어서, 루트를 1vw로 두면 구간이 시작되는 순간 본문이 가장 작게
   렌더되고 구간 끝에서 가장 커지는 톱니가 생긴다. 실측:
     479px 17.7px → 480px 9.1px,  767px 14.6px → 768px 11.1px

   구간마다 루트에 하한(과 ≤479는 상한)을 걸어 본문 .p-gen이 14~16px에
   머물게 한다. 컴포넌트 em 값은 건드리지 않으므로 구간 내부의 타입 비율과
   레이아웃 리듬은 설계 그대로 유지된다.

   ≥992 하한 12px은 v1.2.0에서 992~1280px 본문 붕괴를 막으려 넣은 값이다.
   (당시 전역으로 걸어 모바일 루트가 3배가 되는 회귀를 냈다 — 구간 한정 필수) */
@media (max-width: 479px) {
  body { font-size: clamp(3.8px, 1vw, 4.3px); }
}
@media (min-width: 480px) and (max-width: 767px) {
  body { font-size: max(1vw, 7.6px); }
}
@media (min-width: 768px) and (max-width: 991px) {
  body { font-size: max(1vw, 10px); }
}
@media (min-width: 992px) {
  body { font-size: max(1vw, 12px); }
}

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--brand { color: var(--brand); font-size: 4.5em; line-height: 1.04; font-weight: 500; max-width: 15ch; text-wrap: balance; }
.h2--brand-small { color: var(--brand); 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--brand { color: var(--brand); }
/* 대비(WCAG AA / KWCAG) — 캡션 흐림(0.65)이 밝은 배경에서 미달:
   브랜드 위 흰색 2.88, 흰 위 브랜드red 2.96. 다크 배경(히어로 등)에서는
   0.65도 충분하므로 그대로 두고, 밝은 배경 맥락에서만 AA(≥4.5:1) 통과값으로 올린다. */
.section--brand .caption,
.product-card .caption { opacity: 0.95; }
/* caption--brand(브랜드red 캡션)은 흰/틴트 배경 위라 --brand로는 미달(2.96~4.11).
   틴트에서도 통과하는 --brand-ink로 + 흐림 최소화 */
.caption--brand { color: var(--brand-ink); opacity: 0.95; }
.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(--brand); }

@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--brand  { background: var(--brand);  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(--brand);
  border-radius: 1.25em;
  padding: 0.25em 0.25em 0.25em 1em;
  font-size: 0.95em;
  font-weight: 500;
}
.btn--brand { background: var(--brand); 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(--brand);
  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(--brand); }

.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: minmax(8rem, 1fr) auto minmax(8rem, 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 0.9em;
  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(--brand); }

/* 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(--brand); }
.header.is-light-section .nav-link.is-current { background: var(--white); color: var(--brand); }
.header.is-light-section .logotype { color: var(--brand); }
.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(--brand);
}
#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--brand {
  height: 14rem;
  background: linear-gradient(180deg, rgba(3, 6, 16, 0) 0%, var(--brand-deep) 55%, var(--brand) 100%);
}

/* Qoretix evidence strip: fixed dimensions and no motion keep the hero handoff stable. */
.metrics-strip { position: relative; z-index: 5; background: #02040a; color: var(--white); }
.metrics-strip :focus-visible { outline-color: rgba(var(--accent-rgb), 0.45); }
.metrics-strip__wrap {
  margin: 0 var(--pad-x);
  padding: 2.1em 0 2.3em;
  border-top: 1px solid #ffffff2e;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.8em 2.2em;
}
.metrics-strip__lead { font-size: 0.9em; line-height: 1.5; font-weight: 500; letter-spacing: 0; }
.metrics-strip__n { font-size: 1.15em; font-weight: 500; }
.metrics-strip__facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4em 1.1em; }
.metrics-strip__fact { display: flex; align-items: baseline; gap: 0.55em; }
.metrics-strip__fact + .metrics-strip__fact::before { content: "·"; opacity: 0.4; }
.metrics-strip__label { font-family: var(--font-mono); font-size: 0.72em; letter-spacing: 0.04em; opacity: 0.6; }
.metrics-strip__value { font-size: 1.1em; font-weight: 500; line-height: 1.3; }
.metrics-strip__unit { font-size: 0.72em; font-weight: 500; opacity: 0.75; margin-left: 0.12em; }
.metrics-strip__asof { font-family: var(--font-mono); font-size: 0.72em; letter-spacing: 0.02em; opacity: 0.55; }
.metrics-strip__cta {
  margin-left: auto;
  display: inline-flex;
  align-items: baseline;
  gap: 0.5em;
  font-size: 0.82em;
  font-weight: 500;
  color: var(--white);
  text-decoration: none;
  border-bottom: 1px solid rgba(var(--accent-rgb), 0.5);
  padding-bottom: 0.25em;
  transition: color 0.2s ease, border-color 0.2s ease;
}
.metrics-strip__cta:hover { color: var(--accent); border-bottom-color: var(--accent); }
.metrics-strip__arrow { transition: transform 0.2s ease; }
.metrics-strip__cta:hover .metrics-strip__arrow { transform: translateX(0.2em); }
@media (prefers-reduced-motion: reduce) {
  .metrics-strip__cta, .metrics-strip__arrow { transition: none; }
  .metrics-strip__cta:hover .metrics-strip__arrow { transform: none; }
}
@media (max-width: 991px) {
  .metrics-strip__wrap { flex-direction: column; align-items: flex-start; gap: 0; padding: 1.9rem 0 2.1rem; }
  .metrics-strip__facts { flex-direction: column; align-items: flex-start; gap: 0.5rem; margin-top: 1.15rem; }
  .metrics-strip__fact + .metrics-strip__fact::before { display: none; }
  .metrics-strip__asof { margin-top: 1.15rem; }
  .metrics-strip__cta { margin-left: 0; margin-top: 0.55rem; }
  .metrics-strip__lead { font-size: 1.45em; }
  .metrics-strip__label { font-size: 1.1em; }
  .metrics-strip__value { font-size: 1.9em; }
  .metrics-strip__asof { font-size: 1.1em; }
  .metrics-strip__cta { font-size: 1.3em; }
}
@media (max-width: 767px) {
  .metrics-strip__lead { font-size: 1.9em; }
  .metrics-strip__label { font-size: 1.45em; }
  .metrics-strip__value { font-size: 2.5em; }
  .metrics-strip__asof { font-size: 1.45em; }
  .metrics-strip__cta { font-size: 1.7em; }
}
@media (max-width: 479px) {
  .metrics-strip__lead { font-size: 3.7em; }
  .metrics-strip__label { font-size: 2.8em; }
  .metrics-strip__value { font-size: 4.8em; }
  .metrics-strip__asof { font-size: 2.8em; }
  .metrics-strip__cta { font-size: 3.2em; }
}

/* 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(--brand) 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 LCP-safe reveal (프리스플릿 + 순수 CSS) ----------------
   히어로 h1([data-reveal])은 SplitText 런타임 재분할을 쓰지 않고 템플릿에서 정적 2줄로
   프리스플릿(.sl-line > .sl-inner)한다. 리빌은 전부 CSS(.is-in). 이렇게 하면 h1이 첫
   페인트에 그려지고(런타임 DOM 재삽입/재페인트 없음), 모바일 LCP=FCP가 된다.
   기본값(무-JS)은 항상 최종 상태 — 안전판이자 접근성 텍스트 그대로. */
.h1[data-hero-reveal] .sl-line { display: block; }
.h1[data-hero-reveal] .sl-inner { display: block; will-change: transform; }

/* 데스크톱: 마스크 슬라이드업 — 기존 SplitText yPercent:118 리빌을 CSS로 대체(느낌 동일).
   데스크톱은 LCP 병목이 아니라 텍스트가 잠깐 클립돼도 무방. */
@media (min-width: 992px) {
  html.js .h1[data-hero-reveal] .sl-line { overflow: hidden; }
  html.js .h1[data-hero-reveal] .sl-inner { transform: translateY(110%); }
  html.js .h1[data-hero-reveal].is-in .sl-inner {
    transform: none;
    transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
  }
  html.js .h1[data-hero-reveal].is-in .sl-line:nth-child(2) .sl-inner { transition-delay: 0.14s; }
}

/* 모바일: 클립 없는 경량 리빌 — 텍스트를 첫 페인트에 비영(0.12) opacity·소폭 오프셋으로 그려
   LCP 후보로 즉시 확정. web.dev: LCP는 초기 위치·크기만 집계, 이후 transform 이동은 새 후보
   미생성 → 살짝 올려도 LCP 불변. opacity는 0 금지(제외됨), overflow:hidden 금지(잉크 0). */
@media (max-width: 991px) {
  html.js .h1[data-hero-reveal] .sl-inner {
    opacity: 0.12;
    transform: translateY(0.34em);
  }
  html.js .h1[data-hero-reveal].is-in .sl-inner {
    opacity: 1;
    transform: none;
    transition: opacity 0.5s ease, transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: auto;
  }
  html.js .h1[data-hero-reveal].is-in .sl-line:nth-child(2) .sl-inner { transition-delay: 0.1s; }
}

/* Six navigation groups plus Contact need a stable tablet breakpoint. */
@media (min-width: 992px) and (max-width: 1199px) {
  .header { background: var(--brand); }
  .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(--brand); }
}

/* reduced-motion: 리빌 없이 정적 최종 상태(데스크톱·모바일 공통, LCP=FCP) */
@media (prefers-reduced-motion: reduce) {
  html.js .h1[data-hero-reveal] .sl-line { overflow: visible; }
  html.js .h1[data-hero-reveal] .sl-inner {
    opacity: 1 !important; transform: none !important; transition: none !important;
  }
}

/* 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--brand .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(--brand);
  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; }
/* opacity 0.85는 브랜드 빨강(#D32D17, 순백 대비 5.1:1) 위에서 4.01:1로 WCAG AA
   미달(Lighthouse a11y). 브랜드 배경에서 AA(4.5:1) 통과하는 최소 흐림은 0.93 —
   0.94로 통일해 흐린 느낌은 유지하되 대비를 확보한다. */
.product-desc { font-size: 1vw; line-height: 1.5; max-width: 38ch; opacity: 0.94; }

/* ---------------- 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; }
/* 숫자 대신 단어가 들어가는 스탯 변형(SYSTEMS / SOFTWARE QA …).
   전에는 마크업에 인라인 font-size로 박혀 있었는데, 인라인은 미디어쿼리를
   이기므로 모바일에서 10~13px로 렌더됐다. 클래스로 옮기고 .h2--small 사다리를
   따른다 — 데스크톱 값(3.4em / 2.6em)은 그대로 유지. */
.number-count--word { font-size: 3.4em; }
.number-count--phrase { font-size: 2.6em; }

/* ---------------- 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;
}
/* 제목 + 우측 링크를 좌우로 놓는 가로 flex인데 모바일 처리가 없어, 제목 래퍼가
   flex 아이템으로 쪼그라들고 text-wrap:balance가 좁은 폭을 골라 88px 세로 리본이
   된다("문제, 범위, 남긴 결과."가 4줄). 좁은 화면에선 세로로 쌓아 제목을 전체 폭으로.
   index·work·business·axix·qoretix 공용 헤더. */
@media (max-width: 767px) {
  /* 대부분 템플릿이 인라인 align-items:flex-end를 달고 있어(세로 스택에선 우측
     정렬이 됨) !important로 좌측 정렬 강제 */
  .newsroom__head { flex-direction: column; align-items: flex-start !important; gap: 1.4em; }
  .newsroom__head > * { max-width: 100%; }
}
.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); }

/* card microinteractions — individual scale/translate props so GSAP's
   inline transforms (reveal settle) and hover motion compose cleanly */
@media (hover: hover) and (pointer: fine) {
  .image-article .media-img,
  .image-article::after,
  .product-card__visual::after {
    transition: scale 0.7s cubic-bezier(0.22, 0.61, 0.21, 1), translate 0.7s cubic-bezier(0.22, 0.61, 0.21, 1);
  }
  .article-link:hover .media-img { scale: 1.045; }
  .article-link:hover .image-article::after { translate: 0 -10%; }
  /* hover dim via filter — NOT `opacity`: GSAP animates opacity on these
     titles (Scene 7 copy), and a CSS opacity transition corrupts the value
     gsap.from() records as its end state (title freezes at ~0.2) */
  .article-title { transition: filter 0.35s; }
  .article-link:hover .article-title { filter: opacity(0.7); }
  .product-card:hover .product-card__visual::after { translate: -6% -8%; scale: 1.04; }
}
.image-article {
  height: 23em;
  border-radius: var(--r-media);
  overflow: hidden;
  background:
    linear-gradient(160deg, var(--brand) 0%, var(--brand-deep) 100%);
  position: relative;
}
/* 23em는 모바일 루트(≈3.8px)를 따라가 87px 레터박스로 붕괴 → 뉴스 커버 이미지가
   심하게 크롭된다. .product-card__visual과 동일하게 모바일 고정 높이를 준다
   (rem은 html 16px 기준이라 뷰포트와 무관). */
@media (max-width: 991px) { .image-article { height: 15rem; } }
@media (max-width: 479px) { .image-article { height: 13rem; } }
.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(--brand-ink);  /* 틴트 배경 위 AA — var(--brand)는 4.2:1로 미달 */
  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(--brand-ink);  /* 카드 틴트 배경 위 AA */
  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(--brand); stroke-width: 1.5; opacity: 0; }
.cta-cap {
  font-family: var(--font-mono);
  text-transform: uppercase;
  font-size: 13px;
  fill: var(--brand);
  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 {
  display: flex;
  align-items: center;
  min-height: 24px;
  font-size: 0.9em;
  line-height: 1.3;
  transition: color 0.4s;
}
.footer-link:hover { color: #ffffffa6; }
a.title-menu { transition: color 0.4s; }
a.title-menu: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(--brand);
  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(--brand) 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(--brand); }
  .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(--brand); }

  .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--brand { 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; }
  .number-count--word, .number-count--phrase { font-size: 3.7em; }
  .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 (+ snap) */
  .products__wrapper { min-height: 0; }
  .products__stage {
    position: static; height: auto; min-height: 0; overflow-x: scroll; margin-top: 5em;
    scroll-snap-type: x mandatory;
    scroll-padding: 0 var(--pad-x);
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .products__stage::-webkit-scrollbar { display: none; }
  .products__track { padding: 0 var(--pad-x); }
  .product-card { width: 60vw; font-size: 1.6vw; scroll-snap-align: center; }
  .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--brand { 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; }
  .number-count--word, .number-count--phrase { font-size: 5em; }
}

@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--brand { font-size: 8.4em; }
  .number-count--word { font-size: 6em; }
  .number-count--phrase { font-size: 5em; }
  .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; }
  /* 캡션에는 뉴스 날짜(2026.05.12), 고객사명(EBTS 협동조합), 지표 설명
     (AI·ERP·백오피스 구축)이 들어간다 — 통째로 숨기면 폰에서 그 내용이
     사라진다. 순수 장식인 히어로 스크롤 힌트만 숨긴다.
     (푸터 카피라이트도 같은 이유로 이미 되살려 둔 전례가 있다)
     크기 재팽창은 파일 하단 블록에서 — 그쪽 767 규칙이 여기보다 뒤라 이긴다. */
  .hero__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; }
  .image-article .media-img,
  .image-article::after,
  .product-card__visual::after { transition: none; }
}

/* ---------------- mobile rail progress (native horizontal scroll) ---------------- */
.rail-progress { display: none; }
@media (max-width: 991px) {
  .rail-progress {
    display: block;
    margin: 1.6em var(--pad-x) 0;
    height: 2px;
    background: #ffffff26;
    border-radius: 1px;
    overflow: hidden;
  }
  .rail-progress__fill { display: block; height: 100%; width: 0%; background: var(--accent); }
}

/* ---------------- scroll-to-top ---------------- */
.to-top {
  position: fixed;
  right: 1.4em;
  bottom: 1.4em;
  z-index: 90;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--white);
  border: 1px solid #ffffff2e;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  line-height: 1;
  opacity: 0;
  visibility: hidden;
  translate: 0 10px;
  transition: opacity 0.35s, visibility 0.35s, translate 0.35s;
  cursor: pointer;
}
.to-top.is-show { opacity: 1; visibility: visible; translate: 0 0; }
.to-top:hover { background: var(--brand-deep); }
@media (prefers-reduced-motion: reduce) { .to-top { transition: none; } }
@media (max-width: 991px) { .to-top { right: 14px; bottom: 14px; } }

/* ---------------- mobile touch targets (≥44px) ----------------
   KWCAG 2.2 · WCAG 2.5.8. 375px 실측에서 헤더 로고 49x20, CTA 버튼 343x39,
   푸터 링크 145x31, 이메일·전화 링크 86x17로 기준 미달이었다.
   글자를 키우는 대신 min-height와 세로 가운데 정렬로 히트 영역만 넓힌다
   (44px은 뷰포트와 무관해야 하므로 em이 아니라 px). */
@media (max-width: 991px) {
  .footer-link { padding: 0.45em 0; min-height: 44px; display: flex; align-items: center; }
  .footer-legal { display: inline-flex; align-items: center; min-height: 44px; padding: 0.45em 0; }
  a.title-menu { padding: 0.45em 0; margin-bottom: 0.35em; min-height: 44px; display: flex; align-items: center; }
  .logotype { min-height: 44px; }
  .btn { min-height: 44px; }
  .footer-brand__meta a { display: inline-flex; align-items: center; min-height: 44px; }
}

/* ---------------- mobile tap-target SPACING (PageSpeed) ----------------
   인접 탭 타겟은 ≥8px 떨어져 있어야 한다(PageSpeed "Tap targets are not sized
   appropriately"). 이 컨테이너들의 gap이 em이라 붕괴된 모바일 루트(≈3.8px)를
   따라가 버튼 사이 4px·뉴스카드 5px·푸터링크 2~4px로 붙어 버렸다. rem 기반
   간격(뷰포트 무관)으로 교체 — 데스크톱(≥992)은 기존 em 간격 유지. */
@media (max-width: 991px) {
  .hero__cta, .btn-row { gap: 0.9rem 1.1rem; }              /* 스택 버튼 사이 ≈14px */
  .articles-grid, .articles-grid--pair, .articles-grid--blog,
  .grid-newsroom, .grid-partners-gen { gap: 1.1rem; }        /* 뉴스·카드 그리드 ≈18px */
  .menu-box { gap: 0.6rem; }                                  /* 푸터 링크 세로 ≈10px */
  .footer__menu-grid { column-gap: 1.6rem; }                 /* 푸터 두 열 사이 ≈26px */
}

/* ---------------- 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.94; line-height: 1.5; }  /* 0.72→0.94: 브랜드 위 AA 대비 확보(3.23→4.6:1) */

@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(--brand); 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; }

/* 모바일 메뉴 열림: 헤더(닫기 버거)를 오버레이(z103) 위로, 짧은 화면은 내부 스크롤 */
.header:has(.hamburger.is-open) { z-index: 104; }
/* 열림 상태의 버거 큐브는 var(--brand)로 바뀌는데(흰 오버레이 위를 가정),
   헤더가 z104로 함께 올라오면서 브랜드색 헤더 배경이 뒤에 깔려 닫기 버튼이
   배경과 같은 색이 됐다 — 실측 헤더 배경·큐브 모두 rgb(211,45,23).
   열림 동안 헤더 배경을 지워 흰 오버레이가 비치게 하고, 흰 로고도 같이 뒤집는다. */
@media (max-width: 991px) {
  .header:has(.hamburger.is-open) { background: transparent; }
  .header:has(.hamburger.is-open) .logotype { color: var(--brand); }
}
.mobile-menu { overflow-y: auto; -webkit-overflow-scrolling: touch; }

/* 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--brand, .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; }
  /* 480~767 티어가 없어 991 값이 루트 7.6px에 걸리던 것들 */
  .caption { font-size: 1.65em; }
  .footer-copyright { font-size: 1.95em; }
}
@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; }
  .caption { font-size: 2.9em; }
  /* 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; }