:root {
  --mk-max: 1680px;
  --mk-pad: 24px;

  /* Marketing accent = RED */
  --mk-accent: #ff2d2d;

  --mk-text: #0f172a;
  --mk-muted: #94a3b8; /* mk-x-sub 연한 회색 */
  --mk-radius: 16px;

  /* shadow 정의(기존에 var(--mk-shadow) 없어서 박스가 밋밋/불안정할 수 있음) */
  --mk-shadow: 0 18px 45px rgba(15, 23, 42, 0.12);

  /* ✅ 비율(원하는대로 여기만 바꾸면 됨) */
  --mk-media-col: 1.15fr; /* 사진/영상 */
  --mk-text-col: 0.95fr; /* 텍스트 */
}

.lab-marketing .mk-hero .mk-container {
  max-width: 1320px;
}
.lab-marketing .mk-body .mk-container {
  max-width: 1680px;
}

/* =========================
   Container
   ========================= */
.lab-marketing .mk-container {
  max-width: var(--mk-max);
  margin: 0 auto;
  padding-left: var(--mk-pad);
  padding-right: var(--mk-pad);
}

/* =========================
   HERO (keep)
   ========================= */
.lab-marketing .mk-hero {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

.lab-marketing .mk-hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lab-marketing .mk-hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.62);
}

.lab-marketing .mk-hero-inner {
  position: relative;
  z-index: 2;

  min-height: auto;
  display: grid;
  place-content: start;
  text-align: left;

  padding-top: 220px;
  padding-bottom: 96px;
}

/* ✅ HERO Typography (Startup 동일 체감) */
.lab-marketing .mk-hero-title {
  color: #fff;
  font-size: 44px;
  font-weight: 800;
  line-height: 1.15;
  margin: 0 0 20px;
  white-space: nowrap;
}

.lab-marketing .mk-hero-sub {
  font-size: 20px;
  line-height: 1.9;
  color: rgba(255, 255, 255, 0.85);
  max-width: 720px;
  white-space: nowrap;
  margin-top: 12px;
}

/* ✅ Scroll-down: bottom fixed + RED */
.lab-marketing .scroll-down {
  position: fixed !important;
  left: 50%;
  bottom: 48px;
  transform: translateX(-50%);
  z-index: 30;
}

.lab-marketing .scroll-down span {
  border-color: rgba(255, 45, 45, 0.95) !important;
}
.lab-marketing .scroll-down span::after {
  background: var(--mk-accent) !important;
}

/* =========================
   Body (white)
   ========================= */
.lab-marketing .mk-body {
  background: #ffffff;
  color: var(--mk-text);
  padding: 120px 0 140px;
}

/* 섹션 스택 */
.lab-marketing .mk-sections {
  display: grid;
  gap: 90px;
}

/* =========================
   Cross sections
   ========================= */
.lab-marketing .mk-xsec {
  display: grid;
  grid-template-columns: minmax(0, var(--mk-media-col)) minmax(
      0,
      var(--mk-text-col)
    );
  gap: 56px; /* ✅ gap은 여기서만 */
  align-items: center;
}

.lab-marketing .mk-xsec--reverse {
  grid-template-columns: minmax(0, var(--mk-text-col)) minmax(
      0,
      var(--mk-media-col)
    );
}

.lab-marketing .mk-xsec--reverse .mk-x-media {
  order: 2;
}
.lab-marketing .mk-xsec--reverse .mk-x-text {
  order: 1;
}

/* =========================
   Text
   ========================= */
.lab-marketing .mk-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 16px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mk-accent); /* ✅ var(--mk-orange) 제거 */
  margin: 0 0 16px; /* 🔥 위 여백 제거 → 미디어 상단선과 정렬 */
  line-height: 1;
}

.lab-marketing .mk-x-title {
  margin: 0 0 16px;
  font-size: 40px;
  font-weight: 950;
  line-height: 1.15;
  word-break: keep-all;
  white-space: normal; /* 🔥 줄바꿈 허용 */
  word-break: keep-all;
}

.lab-marketing .mk-x-sub {
  margin: 0 0 22px;
  color: var(--mk-muted);
  font-size: 16px;
  line-height: 1.9;
}

.lab-marketing .mk-x-h3 {
  margin: 34px 0 12px;
  font-size: 22px;
  font-weight: 900;
  color: var(--mk-text);
}

.lab-marketing .mk-x-list {
  margin: 0;
  padding-left: 18px;
  color: #334155;
  line-height: 1.95;
  font-size: 17px;
}

/* =========================
   Slider
   ========================= */
.lab-marketing .mk-slider {
  position: relative;
  border-radius: var(--mk-radius);
  overflow: hidden;
  box-shadow: var(--mk-shadow);
  background: #0b1020;
  /* ✅ “가로 폭을 조금 줄여서” 텍스트와 교차 라인이 더 맞게 */
  max-width: 920px; /* 필요하면 860~980 사이로 조절 */
  width: 100%;
  aspect-ratio: 16 / 10;
}

.lab-marketing .mk-slides {
  position: absolute;
  inset: 0;
}

.lab-marketing .mk-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.28s ease, transform 0.9s cubic-bezier(0.2, 1, 0.2, 1);
  will-change: opacity, transform;
}

.lab-marketing .mk-slide.is-active {
  opacity: 1;
  transform: scale(1);
}

/* 미디어 공통 */
.lab-marketing .mk-media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 좌우 버튼 */
.lab-marketing .mk-navbtn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(2, 6, 23, 0.35);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  color: #fff;
  font-size: 26px;
  font-weight: 900;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
  opacity: 0.9;
  z-index: 5;
}

.lab-marketing .mk-navbtn:hover {
  background: rgba(2, 6, 23, 0.55);
  transform: translateY(-50%) scale(1.03);
}

.lab-marketing .mk-prev {
  left: 14px;
}
.lab-marketing .mk-next {
  right: 14px;
}

/* 도트 */
.lab-marketing .mk-dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  display: flex;
  gap: 8px;
  z-index: 6;
}

.lab-marketing .mk-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  border: 0;
  background: rgba(255, 255, 255, 0.45);
  cursor: pointer;
  transition: transform 0.15s ease, background 0.15s ease;
}

.lab-marketing .mk-dot.is-active {
  background: var(--mk-accent); /* ✅ var(--mk-orange) 제거 */
  transform: scale(1.2);
}

/* =========================================
   Cross-section ratio + per-section spacing
   (append at the bottom of labs-marketing.css)
   ========================================= */

/* ✅ 텍스트 줄 안 잘리게(특히 2,4에서 좁아질 때) */
.lab-marketing .mk-x-text {
  min-width: 0; /* grid에서 텍스트 overflow 방지 핵심 */
}
.lab-marketing .mk-x-sub {
  white-space: normal !important;
  overflow: visible !important;
  word-break: keep-all;
}

/* =========================
   spacing preset
   1,3,5 = loose  (더 띄움)
   2,4   = tight  (reverse에서 텍스트를 더 우측으로)
   ========================= */

/* 1,3,5: 텍스트를 미디어에서 더 멀리 */
.lab-marketing .mk-xsec--loose {
  column-gap: 92px; /* 기본 56px보다 넓게 */
}

/* reverse인데 loose면: 텍스트(왼쪽)와 미디어(오른쪽) 사이 더 띄움 */
.lab-marketing .mk-xsec--reverse.mk-xsec--loose {
  column-gap: 72px;
}

/* 2,4: (reverse) 텍스트를 "조금 더 우측"으로 = 미디어 쪽으로 밀기 */
.lab-marketing .mk-xsec--reverse.mk-xsec--tight {
  column-gap: 30px; /* 붙는 느낌 */
}

/* reverse에서 텍스트는 왼쪽 컬럼이므로, padding-left로 "우측 이동" */
.lab-marketing .mk-xsec--reverse.mk-xsec--tight .mk-x-text {
  padding-left: clamp(56px, 6vw, 120px);
  padding-right: 0;
}

/* (혹시 non-reverse tight도 쓰게 되면) 텍스트를 살짝만 붙게 */
.lab-marketing .mk-xsec.mk-xsec--tight:not(.mk-xsec--reverse) {
  column-gap: 40px;
}
.lab-marketing .mk-xsec.mk-xsec--tight:not(.mk-xsec--reverse) .mk-x-text {
  padding-left: 18px;
}

/* ✅ 모바일에서는 spacing preset 무력화(쌓이니까) */
@media (max-width: 1100px) {
  .lab-marketing .mk-xsec--loose,
  .lab-marketing .mk-xsec--reverse.mk-xsec--loose,
  .lab-marketing .mk-xsec--reverse.mk-xsec--tight,
  .lab-marketing .mk-xsec.mk-xsec--tight:not(.mk-xsec--reverse) {
    column-gap: 22px;
  }
  .lab-marketing .mk-xsec--reverse.mk-xsec--tight .mk-x-text {
    padding-left: 0;
  }
}

/* =========================
   CTA (Marketing) - EXACT match to Startup CTA
   ========================= */

/* CTA wrapper */
.lab-marketing .lab-cta {
  background: #000000;
  color: #fff;
  width: 100%;
}

.lab-marketing .lab-cta-inner {
  max-width: 1320px; /* Startup == var(--lab-max-width) */
  margin: 0 auto;
  padding: 64px 24px 80px;
  text-align: center;
}

.lab-marketing .lab-cta-title {
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 14px;
}

.lab-marketing .lab-cta-desc {
  font-size: 16px;
  opacity: 0.9;
  margin-bottom: 30px;
}

/* actions row */
.lab-marketing .lab-cta-actions {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-top: 44px; /* Startup 동일 */
}

/* =========================
   IMPORTANT: Startup's .lab-btn base (needed to avoid blue/underline)
   ========================= */
.lab-marketing .lab-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  padding: 0 34px;
  height: 50px;

  border-radius: 999px;
  border: none;

  font-size: 15px;
  font-weight: 600;

  cursor: pointer;
  text-decoration: none; /* ✅ 파란 밑줄 제거 핵심 */
  white-space: nowrap;

  transition: transform 0.15s ease-out, box-shadow 0.15s ease-out,
    background-color 0.15s ease-out, color 0.15s ease-out;
}

/* CTA에서는 버튼 높이/패딩을 Startup처럼 조정 */
.lab-marketing .lab-cta-actions .lab-btn {
  height: 48px;
  padding: 0 30px;
}

/* light / outline-light (Startup 동일) */
.lab-marketing .lab-btn-light {
  background: #fff;
  color: #111827;
  border: none;
}
.lab-marketing .lab-btn-light:hover {
  background: #f3f4f6;
}

.lab-marketing .lab-btn-outline-light {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.65);
  color: #fff;
}
.lab-marketing .lab-btn-outline-light:hover {
  background: rgba(15, 23, 42, 0.12);
}

/* =========================================
   GLASS CTA BUTTON (Startup 동일)
   ========================================= */
.lab-marketing .lab-cta-actions .lab-btn-glass {
  position: relative;
  overflow: hidden;

  background: rgba(255, 255, 255, 0.92);
  color: #0b0f1a;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;

  box-shadow: 0 10px 26px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.75), inset 0 -1px 0 rgba(0, 0, 0, 0.06);

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transition: transform 0.25s ease, box-shadow 0.25s ease, filter 0.25s ease;
}

.lab-marketing .lab-cta-actions .lab-btn-glass:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 34px rgba(0, 0, 0, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 rgba(0, 0, 0, 0.08);
  filter: saturate(1.05);
}

.lab-marketing .lab-cta-actions .lab-btn-glass::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: -35%;
  height: 90%;
  border-radius: 999px;

  background: radial-gradient(
    closest-side at 50% 60%,
    rgba(255, 255, 255, 0.85),
    rgba(255, 255, 255, 0.2) 55%,
    rgba(255, 255, 255, 0) 72%
  );

  transform: translateY(0);
  opacity: 0.9;
  pointer-events: none;
}

.lab-marketing .lab-cta-actions .lab-btn-glass::after {
  content: "";
  position: absolute;
  inset: -40% -60%;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 35%,
    rgba(255, 255, 255, 0.45) 48%,
    rgba(255, 255, 255, 0) 62%
  );
  transform: translateX(-30%) rotate(8deg);
  opacity: 0.35;
  pointer-events: none;

  animation: mkGlassSheen 2.8s ease-in-out infinite;
}

.lab-marketing .lab-cta-actions .lab-btn-glass:hover::after {
  opacity: 0.55;
}

@keyframes mkGlassSheen {
  0% {
    transform: translateX(-45%) rotate(8deg);
  }
  55% {
    transform: translateX(0%) rotate(8deg);
  }
  100% {
    transform: translateX(35%) rotate(8deg);
  }
}

/* =========================
   CTA 버튼: Glass Pro (Startup 동일)
   ========================= */
.lab-marketing .lab-cta-actions .lab-btn-glass-pro {
  position: relative;
  overflow: hidden;
  border-radius: 999px;

  height: 52px;
  padding: 0 34px;

  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 0.98),
    rgba(245, 247, 255, 0.9)
  );
  color: #0b0f1a;
  border: 1px solid rgba(255, 255, 255, 0.55);

  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.12) inset,
    0 1px 0 rgba(255, 255, 255, 0.85) inset;

  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  transform: translateZ(0);
  transition: transform 0.22s ease, box-shadow 0.22s ease, filter 0.22s ease;

  /* Startup 동일 */
  animation: mkBreathe 4.5s ease-in-out infinite;
}

.lab-marketing .lab-cta-actions .lab-btn-glass-pro::before {
  content: "";
  position: absolute;
  left: 10%;
  right: 10%;
  top: -45%;
  height: 95%;
  border-radius: 999px;
  background: radial-gradient(
    closest-side at 50% 60%,
    rgba(255, 255, 255, 0.95),
    rgba(255, 255, 255, 0.25) 55%,
    rgba(255, 255, 255, 0) 75%
  );
  opacity: 0.9;
  pointer-events: none;
}

.lab-marketing .lab-cta-actions .lab-btn-glass-pro::after {
  content: "";
  position: absolute;
  inset: -60% -70%;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0) 38%,
    rgba(255, 255, 255, 0.65) 50%,
    rgba(255, 255, 255, 0) 62%
  );
  transform: translateX(-55%) rotate(10deg);
  opacity: 0;
  pointer-events: none;
}

.lab-marketing .lab-cta-actions .lab-btn-glass-pro:hover {
  transform: translateY(-2px);
  filter: saturate(1.06);
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.55),
    0 0 0 1px rgba(255, 255, 255, 0.14) inset,
    0 1px 0 rgba(255, 255, 255, 0.9) inset;

  /* Startup halo(orange) 동일 */
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.55), 0 0 26px rgba(255, 122, 0, 0.22),
    0 0 0 1px rgba(255, 255, 255, 0.14) inset,
    0 1px 0 rgba(255, 255, 255, 0.9) inset;
}

.lab-marketing .lab-cta-actions .lab-btn-glass-pro:hover::after {
  opacity: 0.55;
  animation: mkGlassSheenOnce 1.05s ease-out;
}

@keyframes mkGlassSheenOnce {
  0% {
    transform: translateX(-60%) rotate(10deg);
  }
  100% {
    transform: translateX(40%) rotate(10deg);
  }
}

.lab-marketing .lab-cta-actions .lab-btn-glass-pro:hover {
  letter-spacing: -0.01em;
}

@keyframes mkBreathe {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-1px);
  }
}