/* ============================================================
 * Vision — LX-style split layout.
 * ─────────────────────────────────────────────────────────────
 * Left: sticky cream sidebar (crumb + title + numbered tabs)
 * Right: dark video stage with fade-in overlay content.
 * Mobile: vertical stack (menu top → content bottom).
 * ========================================================== */

/* ─── PAGE SHELL ───────────────────────────────────────────── */
.vs-page {
  --vs-cream: #f5f2ec;
  --vs-ink: #0a0a0a;
  --vs-ink-soft: #1a1a1a;
  --vs-muted: #6b6b6b;
  --vs-mute-light: #a8a29a;
  --vs-line: rgba(10, 10, 10, 0.10);
  --vs-line-dark: rgba(245, 242, 236, 0.14);
  --vs-red: #E30D2E;          /* DS MADE 크럼 크림슨 레드 */
  --vs-stage: #0e0d10;

  min-height: 100vh;
  background: var(--vs-cream);
  color: var(--vs-ink);
  font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Pretendard 전역 강제 — main.css 가 h*/타이틀에 Montserrat/Playfair 를
   !important 로 걸어놓은 상황을 오버라이드. Vision 페이지 스코프 한정. */
.vs-page,
.vs-page h1, .vs-page h2, .vs-page h3, .vs-page h4, .vs-page h5, .vs-page h6,
.vs-page p, .vs-page span, .vs-page button, .vs-page a, .vs-page div,
.vs-page .vs-title, .vs-page .vs-title em,
.vs-page .vs-tab, .vs-page .vs-tab__label,
.vs-page .vs-redbox, .vs-page .vs-h2,
.vs-page .vs-body, .vs-page .vs-em,
.vs-page .vs-mission-item h3, .vs-page .vs-mission-item p,
.vs-page .vs-principle h3, .vs-page .vs-principle p,
.vs-page .vs-eyebrow-mono, .vs-page .vs-panel__foot {
  font-family: "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont, system-ui, sans-serif !important;
}
/* 넘버링/크럼은 모노스페이스 유지 (예외). */
.vs-page .vs-crumb,
.vs-page .vs-tab__num,
.vs-page .vs-mission-item__num {
  font-family: "JetBrains Mono", ui-monospace, monospace !important;
}

.vs-split {
  display: grid;
  /* 좌측 슬림하게: 360–34%. 우측 스테이지 여백 줄임. */
  grid-template-columns: minmax(340px, 32%) 1fr;
  min-height: 100vh;
  /* fixed nav pill hovers over the top ~82px — reserve room */
  padding-top: 0;
}

/* ─── LEFT PANEL (Sticky) ───────────────────────────────────── */
.vs-panel {
  position: sticky;
  top: 0;
  align-self: start;
  height: 100vh;
  background: var(--vs-cream);
  border-right: 1px solid var(--vs-line);
  /* 콘텐츠(타이틀+탭)를 세로 중앙 정렬 — 살짝 위로 (상단 24px, 하단 48px). */
  padding: 24px clamp(32px, 4vw, 64px) 48px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  z-index: 2;
}

/* Crumb — 사이트 공통 (Home · Company · Current) Inter, dot separator. */
.vs-crumb {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 600;
  color: #6b6b6b;
  margin: 0 0 clamp(28px, 4vh, 40px);
  /* nav pill 이 fixed 이지만 pointer 이벤트가 자기 영역에서만 발생하도록
     이 크럼은 그 아래에 있어야 함. 상위 .vs-panel z-index:2 로 확보. */
  position: relative;
  z-index: 5;
}
.vs-crumb a {
  color: #6b6b6b;
  text-decoration: none;
  transition: color 200ms ease;
  /* 클릭 영역 확대 — 원본 텍스트만으론 14px 높이라 너무 작음. */
  padding: 8px 4px;
  margin: -8px -4px;
  cursor: pointer;
}
.vs-crumb a:hover { color: #0a0a0a; }
.vs-crumb .vs-crumb__sep {
  color: #cfcfcf;
  font-weight: 400;
}
.vs-crumb .vs-crumb__current {
  color: #0a0a0a;
}

/* Page title — Pretendard Bold. SK E&S 톤과 유사, 필기체 없음. */
.vs-title {
  font-weight: 700;
  font-size: clamp(28px, 3vw, 44px);
  line-height: 1.15;
  letter-spacing: -0.035em;
  color: var(--vs-ink);
  margin: 0 0 clamp(40px, 6vh, 64px);
  text-wrap: balance;
}
.vs-title em {
  /* em 부분은 같은 폰트 그대로 유지하되 빨간 컬러로만 강조 (필기체/이탤릭 제거). */
  font-style: normal;
  font-weight: 700;
  color: var(--vs-red);
  letter-spacing: -0.035em;
}

/* Sub-nav (numbered tabs) */
.vs-subnav {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.vs-tab {
  appearance: none;
  background: transparent;
  border: none;
  padding: 18px 0 18px 8px;
  cursor: pointer;
  display: grid;
  grid-template-columns: 40px 1fr;
  align-items: baseline;
  gap: 16px;
  text-align: left;
  border-bottom: 1px solid var(--vs-line);
  color: var(--vs-muted);
  transition: color 240ms ease, padding-left 300ms cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  width: 100%;
}
.vs-tab__num {
  /* 넘버는 JetBrains Mono 유지 (전역 규칙에서 이미 강제). */
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.14em;
  color: var(--vs-mute-light);
  font-variant-numeric: tabular-nums;
  transition: color 240ms ease;
}
.vs-tab__label {
  /* 탭 라벨 — Pretendard Bold. */
  font-size: clamp(22px, 2.3vw, 28px);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.1;
}
.vs-tab:hover {
  color: var(--vs-ink);
}
.vs-tab:hover .vs-tab__num {
  color: var(--vs-ink);
}
/* Active state — DS MADE crumb style: red text + red underline */
.vs-tab[aria-selected="true"] {
  color: var(--vs-red);
  padding-left: 16px;
}
.vs-tab[aria-selected="true"] .vs-tab__num {
  color: var(--vs-red);
}
.vs-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 16px;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: var(--vs-red);
  animation: vs-underline 400ms cubic-bezier(0.16, 1, 0.3, 1);
}
@keyframes vs-underline {
  from { transform: scaleX(0); transform-origin: left; }
  to   { transform: scaleX(1); transform-origin: left; }
}

/* Sidebar footer */
.vs-panel__foot {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vs-mute-light);
  padding-top: 24px;
  border-top: 1px solid var(--vs-line);
}

/* ─── RIGHT STAGE (Video + Content) ─────────────────────────── */
.vs-stage {
  position: relative;
  min-height: 100vh;
  max-height: 100vh;         /* fixed viewport height */
  background: var(--vs-stage);
  color: #f5f2ec;
  overflow: hidden;          /* scroll happens inside .vs-stage__inner */
  display: flex;
  align-items: stretch;
  justify-content: center;   /* inner 를 스테이지 중앙에 배치 */
}

.vs-stage__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.vs-stage__bg video,
.vs-stage__bg img,
.vs-stage__bg__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.42;
  filter: brightness(0.85) contrast(1.08);
  display: block;
}
/* Placeholder gradient when no video yet */
.vs-stage__bg__placeholder {
  background:
    radial-gradient(circle at 30% 20%, rgba(227, 13, 46, 0.25) 0%, transparent 55%),
    radial-gradient(circle at 75% 80%, rgba(90, 100, 160, 0.30) 0%, transparent 60%),
    linear-gradient(135deg, #14131a 0%, #1e1c26 40%, #0e0d10 100%);
  opacity: 1;
}
/* Grain / scanlines to give the placeholder body */
.vs-stage__bg__placeholder::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 2px,
      rgba(255, 255, 255, 0.02) 2px,
      rgba(255, 255, 255, 0.02) 3px
    );
  pointer-events: none;
}
/* Dark overlay for readability */
.vs-stage__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(14, 13, 16, 0.88) 0%,
    rgba(14, 13, 16, 0.72) 40%,
    rgba(14, 13, 16, 0.35) 100%
  );
  pointer-events: none;
}

/* Stage inner — scrollable if content overflows viewport.
   좌우 여백을 잔뜩 남기지 않도록 max-width 확장 + padding 축소. */
.vs-stage__inner {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 960px;
  padding: clamp(120px, 15vh, 160px) clamp(32px, 3.5vw, 56px) clamp(60px, 10vh, 100px);
  overflow-y: auto;
  overflow-x: hidden;
  max-height: 100vh;
  scrollbar-width: thin;
  scrollbar-color: rgba(245, 242, 236, 0.22) transparent;
  -webkit-overflow-scrolling: touch;
  /* subtle bottom fade so the reader knows content continues */
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 clamp(80px, 12vh, 120px),
    #000 calc(100% - 40px),
    transparent 100%
  );
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    #000 clamp(80px, 12vh, 120px),
    #000 calc(100% - 40px),
    transparent 100%
  );
}
.vs-stage__inner::-webkit-scrollbar { width: 6px; }
.vs-stage__inner::-webkit-scrollbar-track { background: transparent; }
.vs-stage__inner::-webkit-scrollbar-thumb {
  background: rgba(245, 242, 236, 0.18);
  border-radius: 3px;
}
.vs-stage__inner::-webkit-scrollbar-thumb:hover {
  background: rgba(245, 242, 236, 0.32);
}

/* Fade-in for switched panels */
.vs-panel-content {
  animation: vs-fade-up 500ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes vs-fade-up {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Eyebrow — Pretendard 대문자 라벨. */
.vs-eyebrow-mono {
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--vs-red);
  font-weight: 700;
  margin: 0 0 14px;
  display: block;
}

/* 빨간 배경 박스 제거 — 타이포그래피 자체로 위계 (Vercel/Stripe 톤).
   흰색 대형 헤딩 + 로즈 레드 강조로 대조. */
.vs-redbox {
  display: block;
  background: transparent;
  color: #ffffff;
  font-weight: 700;
  font-size: clamp(28px, 2.4vw, 40px);
  letter-spacing: -0.025em;
  line-height: 1.2;
  padding: 0;
  margin-bottom: 32px;
  max-width: 100%;
  text-wrap: balance;
}

.vs-h2 {
  /* 우측 헤딩 — Pretendard Bold, SK E&S 톤. */
  font-weight: 700;
  font-size: clamp(24px, 2.8vw, 36px);
  line-height: 1.25;
  letter-spacing: -0.03em;
  color: #ffffff;
  margin: 0 0 20px;
  text-wrap: balance;
}
.vs-body {
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.7;
  color: rgba(245, 242, 236, 0.78);
  font-weight: 400;
  letter-spacing: -0.01em;
  margin: 0 0 20px;
  /* max-width 없음 — inner 폭을 다 활용해서 좌우 여백 최소화. */
  text-wrap: pretty;
}
.vs-body:last-child { margin-bottom: 0; }

/* Inline emphasis — 다크 배경 위 가독성 좋은 로즈 레드. */
.vs-em {
  font-style: normal;
  color: #fb7185;
  font-weight: 600;
}

/* Mission list items */
.vs-mission-hdr {
  padding-bottom: 20px;
  border-bottom: 1px solid var(--vs-line-dark);
  margin-bottom: 32px;
}
.vs-mission-list {
  display: flex;
  flex-direction: column;
  gap: 28px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.vs-mission-item h3 {
  /* 서브 헤딩 — Pretendard Semibold/Bold. */
  font-weight: 700;
  font-size: 18px;
  color: #ffffff;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.vs-mission-item h3::before {
  content: "";
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--vs-red);
  flex-shrink: 0;
}
.vs-mission-item p {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(245, 242, 236, 0.7);
  margin: 0;
  padding-left: 19px;
  text-wrap: pretty;
}

/* Numbered variant — big 01/02/03 on the left */
.vs-mission-list--numbered .vs-mission-item {
  display: grid;
  grid-template-columns: 48px 1fr;
  column-gap: 20px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--vs-line-dark);
}
.vs-mission-list--numbered .vs-mission-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}
.vs-mission-item__num {
  /* 카드 넘버 — JetBrains Mono, 절제된 크기. */
  grid-row: 1 / 3;
  font-size: 14px;
  font-weight: 700;
  color: var(--vs-red);
  letter-spacing: 0.1em;
  line-height: 1;
  padding-top: 6px;
  font-variant-numeric: tabular-nums;
}
.vs-mission-list--numbered .vs-mission-item h3 {
  grid-column: 2;
  margin-bottom: 8px;
  font-size: 19px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.vs-mission-list--numbered .vs-mission-item h3::before {
  display: none;
}
.vs-mission-list--numbered .vs-mission-item p {
  grid-column: 2;
  padding-left: 0;
}

/* Principles cards */
.vs-principles {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  margin-top: 8px;
}
/* Principle 카드 — 스샷 매핑: 큰 세리프 넘버 + 빨간 카테고리 대문자
   + Inter Bold 서브타이틀 + Inter 본문. */
.vs-principle {
  padding-left: 18px;
  border-left: 2px solid var(--vs-line-dark);
  transition: border-color 300ms ease;
}
.vs-principle:hover {
  border-left-color: var(--vs-red);
}
.vs-principle__num {
  /* 카테고리 라벨 — JetBrains Mono, 빨간 액센트, 넓은 트래킹. */
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--vs-red);
  font-weight: 700;
  text-transform: uppercase;
  display: block;
  margin-bottom: 10px;
}
.vs-principle h3 {
  font-weight: 700;
  font-size: 17px;
  color: #ffffff;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
}
.vs-principle p {
  font-size: 13.5px;
  line-height: 1.7;
  color: rgba(245, 242, 236, 0.7);
  margin: 0;
  letter-spacing: -0.01em;
  text-wrap: pretty;
}

/* ─── RESPONSIVE ─────────────────────────────────────────────
   768px 이하 = 모바일: LX International 참조 레이아웃.
   - 세로 스택 (좌측 라이트 패널 → 하단 다크 스테이지)
   - 상단: 타이틀 + 수평 탭 nav
   - 하단: 좌측 밀착 레드 배너 + 본문
   ============================================================ */
@media (max-width: 768px) {

  /* 1. 세로 스택 전환 */
  .vs-split {
    display: flex;
    flex-direction: column;
    width: 100%;
  }

  /* 2. 상단 라이트 패널 (Vision 타이틀 + 수평 탭) */
  .vs-panel {
    position: relative;
    top: auto;
    height: auto;
    min-height: auto;
    width: 100%;
    padding: clamp(100px, 15vh, 130px) 20px 20px;
    background: #fcfcfd;
    border-right: none;
    border-bottom: none;
    display: block;   /* flex 해제 */
    gap: 0;
  }

  /* 좌측 세로 여백 아이콘 제거 (필요 시) */
  .vs-panel > div { width: 100%; }

  /* 타이틀 — 축소 & 검정 단색 (em 강조 제거) */
  .vs-title {
    font-size: 28px !important;
    line-height: 1.15;
    letter-spacing: -0.025em;
    color: #111111;
    margin: 0 0 24px;
  }
  .vs-title em {
    color: #111111;  /* 모바일에선 심플하게 단색 */
  }

  /* 수평 탭 nav — LX 스타일 (Vision | Mission | Principles) */
  .vs-subnav {
    flex-direction: row !important;
    gap: 24px;
    border-bottom: 1px solid #e5e7eb;
    padding-bottom: 0;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .vs-subnav::-webkit-scrollbar { display: none; }

  .vs-tab {
    display: inline-block;
    width: auto;
    grid-template-columns: none;
    padding: 0 0 12px;
    border-bottom: none;
    text-align: left;
    flex-shrink: 0;
  }
  .vs-tab__num {
    display: none;   /* 모바일에선 넘버 숨김 — LX 참조 스타일 */
  }
  .vs-tab__label {
    font-size: 17px !important;
    font-weight: 700;
    color: #9ca3af;
    letter-spacing: -0.02em;
  }
  .vs-tab[aria-selected="true"] {
    color: var(--vs-red);
    padding-left: 0;
  }
  .vs-tab[aria-selected="true"] .vs-tab__label {
    color: var(--vs-red);
  }
  /* 언더라인은 tab 자체 하단이 아니라 subnav 전체 하단선으로 대체 */
  .vs-tab[aria-selected="true"]::after {
    left: 0;
    right: 0;
    bottom: -1px;
    background: var(--vs-red);
  }

  /* 3. 하단 다크 스테이지 (레드 배너 + 본문) */
  .vs-stage {
    width: 100%;
    min-height: auto;
    max-height: none;
    padding: 32px 20px 48px;
    background: #07060a;
    justify-content: flex-start;
    align-items: stretch;
    display: block;
    overflow: visible;
  }
  .vs-stage__inner {
    max-width: 100%;
    padding: 0;
    overflow: visible;
    max-height: none;
    mask-image: none;
    -webkit-mask-image: none;
  }

  /* 레드 배너 박스 부활 — LX 참조처럼 좌측 밀착 (padding 을 빠져나감) */
  .vs-redbox {
    display: block;
    background: var(--vs-red) !important;
    color: #ffffff;
    padding: 18px 20px !important;
    /* 좌측 화면에 밀착: stage padding(20px)만큼 음수 마진 */
    margin: 0 -20px 24px !important;
    font-size: 20px !important;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.02em;
    max-width: none;
  }

  /* 우측 헤딩 & 본문 축소 */
  .vs-h2 {
    font-size: 22px !important;
    line-height: 1.3;
    margin-bottom: 16px;
  }
  .vs-body {
    font-size: 14px !important;
    line-height: 1.65;
    margin-bottom: 20px;
    color: rgba(255, 255, 255, 0.8);
  }

  /* 미션/프린서플 카드 살짝 축소 */
  .vs-mission-hdr {
    padding-bottom: 16px;
    margin-bottom: 24px;
  }
  .vs-mission-list { gap: 22px; }
  .vs-mission-list--numbered .vs-mission-item {
    grid-template-columns: 36px 1fr;
    column-gap: 14px;
    padding-bottom: 22px;
  }
  .vs-mission-item h3 { font-size: 16px !important; }
  .vs-mission-item p { font-size: 13.5px; }

  .vs-principles { gap: 20px; }
  .vs-principle h3 { font-size: 16px; }
  .vs-principle p { font-size: 13px; }
}

/* 아주 좁은 폰 (≤380px) 마이크로 조정 */
@media (max-width: 380px) {
  .vs-title { font-size: 24px !important; }
  .vs-redbox { font-size: 18px !important; }
  .vs-h2 { font-size: 20px !important; }
}