/* ============================================
 Main Styles
 ============================================ */

/* 공통 로딩 스피너 */
.loading-spinner {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 0;
  width: 100%;
}
.loading-spinner::after {
  content: "";
  width: 40px;
  height: 40px;
  border: 3px solid rgba(0, 0, 0, 0.1);
  border-top-color: #00adef;
  border-radius: 50%;
  animation: loading-spin 1s linear infinite;
}
@keyframes loading-spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

/* ============================================
 0. 공통 유틸리티 클래스 (Common Utilities)
 ============================================ */

/* 하드웨어 가속 유틸리티 (GPU 가속 활성화) */
.gpu-accelerated { will-change: transform; transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } 

/* 하드웨어 가속 유틸리티 (transform + opacity) */
.gpu-accelerated-full { will-change: transform, opacity; transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } 

/* 스크롤 진입 애니메이션 초기 상태 */
.scroll-fade-in { opacity: 0; transform: translate3d(0, 30px, 0); will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; } 

/* 스크롤 진입 시 애니메이션 트리거 */
.scroll-fade-in.is-inview { animation: slideUpFadeInForest 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; } 

/* 순차 애니메이션 (지연 시간 포함) */
.scroll-fade-in-delayed { opacity: 0; transform: translate3d(0, 30px, 0); will-change: transform, opacity; backface-visibility: hidden; -webkit-backface-visibility: hidden; } 

.scroll-fade-in-delayed.is-inview { animation: slideUpFadeInForest 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.25s forwards; } 

/* 접근성: 애니메이션 감소 설정 시 애니메이션 비활성화 */
@media (prefers-reduced-motion: reduce){
 .scroll-fade-in,
 .scroll-fade-in-delayed { opacity: 1; transform: none; animation: none; } 
 }

/* ============================================
 1. Frame (프레임)
 ============================================ */

html,
body { background-color: var(--color-bg-black) !important; transition: background-color var(--transition-bg); } 

/* 요트 페이지: 기본 배경 검정 */
body:has(#yacht.is-active) html,
body:has(#yacht.is-active) body { background-color: var(--color-bg-black) !important; } 

/* 숲 페이지: 기본 배경 흰색 */
body:has(#forest.is-active):not(.forest-expanded) html,
body:has(#forest.is-active):not(.forest-expanded) body { background-color: var(--color-text-white) !important; } 

/* 숲 페이지: 이미지 100%일 때 배경 검정색 */
body.forest-expanded:has(#forest.is-active) html,
body.forest-expanded:has(#forest.is-active) body { background-color: var(--color-bg-black) !important; } 

/* ============================================
 2. Layout (레이아웃)
 ============================================ */

.inner-container { width: 100%; max-width: 1720px; margin: 0 auto; padding: 0 0px; box-sizing: border-box; }

.container { margin: 0 auto; padding: 0 var(--container-padding); } 

.page-section { position: relative; min-height: 100vh; display: flex; flex-direction: column; justify-content: space-between; } 

.section { padding: 0; min-height: 100vh; position: relative; } 

.section-bg { position: relative; z-index: 1; } 

.section-bg > *:not(.section-bg-layer) { position: relative; z-index: 10; } 

/* ============================================
 3. Header (헤더)
 ============================================ */

/* 서브페이지 공통 히어로 헤더 스타일 */
.sub-hero-header { min-height: 500px; position: relative; display: flex; align-items: flex-end; overflow: hidden; }
.sub-hero-header--short { min-height: 400px; }
.sub-hero-header--center { align-items: center; }
.sub-hero-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: 0; opacity: 0; transform: translateY(20px); animation: headerBgSlideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; will-change: opacity; }
/* 애니메이션 후 밝기 조절 (기존 0.4에서 0.2로 밝게 수정) */
.sub-hero-bg::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0); z-index: 1; }
.sub-hero-content { position: relative; z-index: 10; width: 100%; padding: 60px 120px; }
.sub-hero-text-overlay { gap: 4px; position: absolute; z-index: 10; bottom: 50px; left: 100px; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; color: #FFF; opacity: 0; animation: headerBgSlideUp 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) 0.3s forwards; will-change: opacity; }
.sub-hero-text-overlay h1 { font-family: var(--font-primary); font-size: 24px; font-weight: 500; margin: 0; text-align: left; line-height: 1; }
.sub-hero-text-overlay p { font-family: var(--font-primary); font-size: 24px; font-weight: 500; margin: 0; text-align: left; letter-spacing: 0.1em; line-height: 1; opacity: 0.8;}

/* transform 미사용(visible): fixed 자손(.header-menu-wrapper)이 뷰포트 기준이 되도록 함 */
.header { position: fixed; top: 0; left: 0; width: 100%; z-index: var(--z-header); opacity: 1; transform: none; transition: transform var(--transition-transform), opacity var(--transition-transform); } 

.header.header-visible { transform: none; opacity: 1; } 

.header.header-hidden { transform: translateY(-100%); opacity: 0; } 

.header-frame {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: flex-start;
  padding: 0 120px;
  position: relative;
  background-color: rgba(1, 1, 1, 0.2);
  min-height: 77px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.header-logo {
  position: relative;
  width: 108px;
  height: 77px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  flex-shrink: 0;
}

.header-logo img { width: 100%; height: 100%; object-fit: contain; } 

.header-menu-indicator {
  display: none;
}

.header-menu-wrapper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100vw;
  min-height: 100vh;
  min-height: 100dvh;
  z-index: calc(var(--z-header) + 1);
  pointer-events: none;
}

/* 전체 화면 GNB (햄버거 → 오버레이) */
.header-hamburger {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 44px;
  height: 44px;
  padding: 0;
  margin-left: auto;
  border: 0;
  background: transparent;
  cursor: pointer;
  color: var(--color-text-white);
  flex-shrink: 0;
  position: relative;
  z-index: calc(var(--z-header) + 3);
  pointer-events: auto;
}

.header-hamburger-line {
  display: block;
  width: 24px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
}

/* 패널 상단 닫기(×)만 보이도록 — 햄버거 줄이 X로 변하면 ×와 겹침 */
.header.header-nav-open .header-hamburger {
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
}

.header-nav-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
  background-color: rgba(10, 10, 10, 0.8);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  background-image:
    linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, transparent 42%, transparent 58%, rgba(255, 255, 255, 0.03) 100%),
    repeating-linear-gradient(
      -32deg,
      transparent,
      transparent 6px,
      rgba(255, 255, 255, 0.02) 6px,
      rgba(255, 255, 255, 0.02) 7px
    );
  overflow: hidden;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s ease, visibility 0.28s ease;
}

.header.header-nav-open .header-nav-panel {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
}

.header-nav-panel-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  padding: 16px 120px 12px;
  box-sizing: border-box;
}

.header-nav-panel-logo {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 108px;
  height: 56px;
  text-decoration: none;
}

.header-nav-panel-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.header-nav-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-white);
  font-size: 36px;
  line-height: 1;
  cursor: pointer;
  flex-shrink: 0;
}

.header-nav-panel-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 8px 120px 48px;
  box-sizing: border-box;
}

.header-menu-list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  max-width: 720px;
  margin: 0;
}

.header-menu-item {
  width: 100%;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.header-menu-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 8px 20px 0;
  box-sizing: border-box;
  border-radius: 6px;
  transition: background-color 0.15s ease;
}

.header-menu-row:active {
  background-color: rgba(255, 255, 255, 0.12);
}

.header-menu-row--single {
  justify-content: flex-start;
}

.header-menu-link {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size: 20px;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: var(--color-text-white);
  text-align: left;
  text-decoration: none;
  white-space: normal;
  transition: color 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}

.header-menu-item--has-sub .header-menu-chevron {
  display: block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  margin-right: 4px;
  border-right: 2px solid rgba(255, 255, 255, 0.95);
  border-bottom: 2px solid rgba(255, 255, 255, 0.95);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.25s ease, border-color 0.2s ease;
}

.header-menu-item--has-sub.is-submenu-open .header-menu-chevron {
  transform: rotate(-135deg) translateY(2px);
  border-right-color: #00adef;
  border-bottom-color: #00adef;
}

.header-menu-item--has-sub.is-submenu-open .header-menu-link {
  color: #00adef;
}

.header-submenu-group {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}

.header-menu-item--has-sub.is-submenu-open .header-submenu-group {
  grid-template-rows: 1fr;
}

.header-submenu-inner {
  min-height: 0;
  overflow: hidden;
}

.header-submenu-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 14px;
  padding: 0 0 22px 12px;
  box-sizing: border-box;
}

.header-submenu-link {
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size: 16px;
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: rgba(255, 255, 255, 0.75);
  text-align: left;
  text-decoration: none;
  white-space: normal;
  transition: color 0.2s ease;
}

.header-submenu-link:hover {
  color: #00adef;
}

.header-line {
  display: none;
  position: absolute;
  top: 77px;
  left: 0;
  right: 0;
  width: 100%;
  height: 1px;
  background-color: var(--color-text-white);
  opacity: 0.2;
  pointer-events: none;
}

body.header-nav-open {
  overflow: hidden;
  touch-action: none;
}

@media (min-width: 1201px) {
  body.header-nav-open {
    overflow: visible;
    touch-action: auto;
  }

  .header-hamburger {
    display: none !important;
  }

  .header-frame {
    align-items: flex-start;
    transition: padding-bottom var(--transition-base);
  }

  .header-frame:hover {
    padding-bottom: 230px;
  }

  .header-menu-indicator {
    display: block;
    position: absolute;
    bottom: 0;
    left: var(--header-indicator-left, 0px);
    width: var(--header-indicator-width, 0px);
    height: 2px;
    background-color: var(--color-text-white);
    transition:
      left var(--transition-base),
      width var(--transition-base);
    pointer-events: none;
    z-index: 4;
    transform: translateZ(0);
  }

  .header-menu-indicator::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background-color: var(--color-text-white);
    opacity: 0.3;
  }

  .header-menu-wrapper {
    position: relative;
    top: auto;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    min-width: 0;
    min-height: 0;
    height: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 0;
    pointer-events: auto;
    z-index: auto;
  }

  .header-nav-panel {
    position: static;
    inset: auto;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex: 0 0 auto;
    width: 100%;
    min-width: 0;
    max-width: 100%;
    background: transparent;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background-image: none;
    overflow: visible;
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
    padding: 0;
    height: auto;
  }

  .header-nav-panel-top {
    display: none;
  }

  .header-nav-panel-scroll {
    position: relative;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    padding: 0;
    overflow: visible;
    min-height: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
  }

  .header-menu-list {
    display: inline-flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-items: flex-start;
    justify-content: flex-end;
    gap: 8px;
    position: relative;
    flex: 0 0 auto;
    width: auto;
    max-width: none;
    margin: 0;
  }

  .header-menu-item {
    width: auto;
    min-width: 0;
    border-bottom: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    padding: 24px 28px;
    position: relative;
    cursor: pointer;
    z-index: 2;
  }

  .header-menu-row {
    display: contents;
  }

  .header-menu-chevron {
    display: none !important;
  }

  .header-menu-link {
    flex: none;
    width: fit-content;
    max-width: 100%;
    margin: 0;
    padding: 0;
    font-size: 20px;
    line-height: 32px;
    letter-spacing: -0.04px;
    white-space: nowrap;
    text-align: center;
    color: rgba(255, 255, 255, 0.72);
    transition: color var(--transition-base);
  }

  .header-menu-item:hover .header-menu-link,
  .header-menu-item.header-menu-item-active .header-menu-link {
    color: var(--color-text-white);
  }

  .header-submenu-group {
    display: none;
    grid-template-rows: none;
    transition: none;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 0;
    position: absolute;
    top: 100%;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    padding-top: 20px;
    padding-bottom: 32px;
    min-width: 0;
    width: max-content;
    max-width: min(280px, 100%);
    box-sizing: border-box;
    z-index: 10;
    background: transparent;
    pointer-events: auto;
  }

  .header-frame:hover .header-submenu-group,
  .header-menu-wrapper:hover .header-submenu-group,
  .header-frame:focus-within .header-submenu-group {
    display: flex;
  }

  .header-submenu-inner {
    min-height: 0;
    overflow: visible;
    background: transparent;
    border: none;
    border-radius: 0;
    padding: 0;
    box-shadow: none;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .header-submenu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
    width: max-content;
    max-width: 100%;
    min-width: 0;
    padding: 0;
    box-sizing: border-box;
  }

  .header-submenu-link {
    display: block;
    width: 100%;
    font-size: 18px;
    line-height: 1.45;
    letter-spacing: -0.04px;
    text-align: center;
    color: var(--color-text-gray);
    white-space: nowrap;
    transition: color var(--transition-base);
  }

  .header-menu-item:hover .header-submenu-link {
    color: var(--color-text-white);
  }

  /* 이전: 부모 항목 호버 + 링크 호버 시에만 파란색 (단일 :hover는 부모 규칙에 덮임) */
  .header-menu-item:hover .header-submenu-link:hover {
    color: #00adef;
  }

  .header-menu-item-active {
    background-color: transparent;
  }
}


/* ============================================
 4. Background Layers (배경 레이어)
 ============================================ */

.section-bg-layer { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background-size: cover; background-position: center; background-repeat: no-repeat; z-index: -2; opacity: 0; transform: scale(1.02) translateZ(0); filter: brightness(0.95); transition: none; will-change: opacity, transform, filter; backface-visibility: hidden; -webkit-backface-visibility: hidden; pointer-events: none; } 

.section-bg-layer.active { z-index: -1 !important; opacity: 1 !important; transform: scale(1) translateZ(0) !important; filter: brightness(1) !important; transition: none; } 

.section-bg-layer::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg-overlay); z-index: 1; } 

/* 섹션별 배경 레이어 스타일 */
#propellant .section-bg-layer { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: -1 !important; opacity: 1 !important; transform: scale(1) translateZ(0) !important; filter: brightness(1) !important; transition: none !important; } 

#forest .section-bg-layer,
#yacht .section-bg-layer { z-index: 1 !important; opacity: 1 !important; } 

#yacht .section-bg-layer { transition: opacity var(--transition-fade-fast); image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; } 

body:has(#rocket.is-active) #yacht .section-bg-layer { opacity: 0 !important; z-index: 0 !important; transition: opacity var(--transition-fade-fast) 0.05s !important; pointer-events: none !important; } 

body:has(#jump.is-active) #yacht .section-bg-layer,
body:has(#forest.is-active) #yacht .section-bg-layer,
body:has(#propellant.is-active) #yacht .section-bg-layer,
body.forest-expanded:has(#propellant.is-active) #yacht .section-bg-layer,
body.forest-expanded:not(:has(#yacht.is-active)) #yacht .section-bg-layer { opacity: 0 !important; z-index: -10 !important; transition: opacity var(--transition-fade-fast) !important; visibility: hidden !important; } 

#rocket .section-bg-layer,
#jump .section-bg-layer,
#table .section-bg-layer { position: fixed !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100vh !important; z-index: 0 !important; opacity: 0 !important; transform: translateZ(0) !important; transition: opacity var(--transition-fade-fast) !important; visibility: hidden; } 

/* 로켓 배경 레이어 (z-index: -3) - 활성화 시 즉시 표시 */
#rocket .section-bg-layer.active { z-index: -3 !important; opacity: 1 !important; visibility: visible !important; } 

/* 점프 배경 레이어 (z-index: -2) */
#jump .section-bg-layer.active { z-index: -2 !important; } 

/* 테이블 배경 레이어 (z-index: -1) */
#table .section-bg-layer.active { z-index: -1 !important; } 

/* 점프 <-> 테이블 전환 시 z-index 확실하게 제어 */
body:has(#table.is-active) #jump .section-bg-layer.active { z-index: -3 !important; opacity: 0 !important; visibility: hidden !important; } 
body:has(#jump.is-active) #table .section-bg-layer.active { z-index: -3 !important; opacity: 0 !important; visibility: hidden !important; } 

/* 숲 배경 레이어 (최상단) */
#forest .section-bg-layer.active { z-index: 1 !important; } 

body.table-unfixed #table .section-bg-layer,
body.table-unfixed #table .section-bg-layer.active { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 100% !important; z-index: -1 !important; will-change: transform !important; transform: translateY(var(--table-translate-y, 0px)) !important; transition: transform var(--transition-transform) !important; } 

#rocket .section-bg-layer:not(.active) { z-index: -5 !important; opacity: 0 !important; visibility: hidden !important; transition: none; } 

#propellant .section-bg-layer { z-index: -1 !important; opacity: 1 !important; transition: none !important; } 

#jump .section-bg-layer:not(.active),
#table .section-bg-layer:not(.active) { z-index: 0 !important; opacity: 0 !important; transition: opacity var(--transition-fade-fast) !important; pointer-events: none !important; } 

body.yacht-expanded #rocket .section-bg-layer.active { z-index: 3 !important; } 

body:has(#rocket.is-active) #jump .section-bg-layer.active { z-index: 4 !important; } 

/* 점프 활성화 시 테이블 배경 레이어 준비 (z-index만 설정, opacity는 테이블 활성화 시 설정) */
body:has(#jump.is-active):not(:has(#table.is-active)) #table .section-bg-layer.active { z-index: 3 !important; opacity: 0 !important; transition: opacity var(--transition-fade-fast) !important; visibility: hidden !important; } 

/* 점프→테이블 전환 시 점프 배경 레이어 숨김 (빠른 전환, 깜박임 방지) */
body:has(#table.is-active) #jump .section-bg-layer.active { z-index: 0 !important; opacity: 0 !important; transition: opacity 0.08s ease-in-out !important; pointer-events: none !important; visibility: hidden !important; } 

/* 테이블 활성화 시 테이블 배경 레이어 표시 (빠른 전환, 깜박임 방지) */
body:has(#table.is-active) #table .section-bg-layer.active { z-index: 4 !important; opacity: 1 !important; transition: opacity 0.08s ease-in-out !important; visibility: visible !important; } 

/* 테이블→점프 역방향 전환 시 점프 배경 레이어 표시 (빠른 전환, 깜박임 방지) */
body:has(#jump.is-active):not(:has(#table.is-active)) #jump .section-bg-layer.active { z-index: 4 !important; opacity: 1 !important; transition: opacity 0.08s ease-in-out !important; visibility: visible !important; } 

/* 점프 배경 레이어가 active이지만 점프 섹션이 비활성화된 경우 (전환 중 깜박임 방지) */
body:has(#table.is-active) #jump .section-bg-layer:not(.active) { z-index: -1 !important; opacity: 0 !important; transition: none !important; visibility: hidden !important; pointer-events: none !important; } 

/* 모든 배경 레이어의 기본 z-index를 조정하여 첫 페이지 노출 방지 */
.section-bg-layer { z-index: -5 !important; } 
.section-bg-layer.active { z-index: -1 !important; } 

/* 요트 섹션 배경 레이어는 항상 최하단에 위치하여 기본값 역할 */
#yacht .section-bg-layer { z-index: -10 !important; } 
#yacht .section-bg-layer.active { z-index: -4 !important; } 

body.forest-expanded #propellant .section-bg-layer.active { z-index: 1 !important; } 

/* 숲 섹션 배경 레이어 */
#forest .section-bg-layer,
#forest .section-bg-layer.active { position: absolute !important; left: calc(10vw - 10vw * var(--forest-scroll-progress, 0)); width: calc(80vw + (100vw - 80vw) * var(--forest-scroll-progress, 0)); height: calc(35vh + 65vh * var(--forest-scroll-progress, 0)); top: calc(170vh - 10vh * var(--forest-scroll-progress, 0)); max-height: 100vh; will-change: contents; z-index: 1; transform: translateZ(0); transform-origin: center center; transition: none; backface-visibility: hidden; -webkit-backface-visibility: hidden; contain: layout style paint; image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; isolation: isolate; } 

/* 숲 이미지 100% 확장 시 고정 */
body:has(#forest.is-active):not(.forest-unfixed) #forest .section-bg-layer.active { position: fixed !important; top: var(--forest-bg-fixed-top, 0px) !important; left: 0 !important; width: 100vw !important; height: 100vh !important; } 

/* 숲 고정 해제 시 원래 위치로 - 현재 위치 유지 */
body.forest-unfixed #forest.page-section { position: relative !important; top: auto !important; left: auto !important; width: 100% !important; height: auto !important; min-height: calc(var(--forest-bg-unfixed-top, 160vh) + 100vh) !important; } 

body.forest-unfixed #forest .section-bg-layer { position: absolute !important; top: var(--forest-bg-unfixed-top, 160vh) !important; left: 0 !important; width: 100vw !important; height: 100vh !important; max-height: 100vh !important; } 

/* 숲 고정 해제 시 텍스트도 원래 위치로 복원 - 고정 상태일 때와 동일한 위치 */
body.forest-unfixed .page-section .section-content .forest-text-item { position: absolute !important; left: 50% !important; transform: translate(-50%, 0) !important; opacity: 1 !important; visibility: visible !important; z-index: 10 !important; width: 100% !important; text-align: center !important; } 

body.forest-unfixed .page-section .section-content .forest-text-item[data-forest-step="1"] { top: calc(var(--forest-text-unfixed-top, 50vh) - 55px - 20px) !important; } 

body.forest-unfixed .page-section .section-content .forest-text-item[data-forest-step="2"] { top: calc(var(--forest-text-unfixed-top, 50vh) + 55px - 20px) !important; } 

/* ============================================
 5. Section Content (섹션 컨텐츠)
 ============================================ */

.page-section .section-content { position: absolute; display: flex; flex-direction: column; align-items: flex-start; height: 100vh; box-sizing: border-box; z-index: 10; } 

#main2 .main2-content.section-content { position: relative; height: auto; min-height: 0; margin: 0px, 100px;} 

#yacht .section-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: auto; height: auto; z-index: 10; } 

#yacht .yacht-page-content { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } 

#forest .section-content { position: absolute; top: calc(0px + var(--forest-content-top, 0px)); left: var(--section-padding-x); right: var(--section-padding-x); bottom: 0; width: auto; height: auto; z-index: 11; transition: top var(--transition-content); } 

body.forest-expanded #forest .section-content { position: absolute; top: calc(0px + var(--forest-content-top, 0px)); left: var(--section-padding-x); right: var(--section-padding-x); bottom: 0; width: auto; height: auto; transform: none; display: flex; align-items: flex-start; justify-content: flex-start; transition: top var(--transition-content); z-index: 11; } 

body:not(.forest-expanded) #forest .section-content { transition: top var(--transition-content); } 

#forest .forest-page-content { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; } 

#forest .section-content .section-text { text-align: center; } 

/* ============================================
 6. Intro Slider (인트로 슬라이더)
 ============================================ */

.intro-slider { position: relative; width: 100%; height: 100vh; min-height: 100vh; overflow: hidden; background-color: var(--color-bg-black); }

.intro-bg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; background-repeat: no-repeat; opacity: 0; transition: opacity 1.5s ease-in-out; z-index: 1; filter: brightness(0.95); }
.intro-bg::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-bg-overlay); z-index: 1; }
.intro-bg.active { opacity: 1; z-index: 2; }

.intro-text-layer { position: absolute; top: 0; left: var(--section-padding-x); right: var(--section-padding-x); bottom: 0; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; z-index: 5; pointer-events: none; }

.intro-text { position: absolute; opacity: 0; transform: translateY(30px); transition: opacity 0.5s ease, transform 0.5s ease; text-align: left; }
.intro-text.active { opacity: 1; transform: translateY(0); transition: opacity 1s ease 0.5s, transform 1s ease 0.5s; }

.intro-text p.text-t2 { color: rgba(255, 255, 255, 0.5); font-family: var(--font-primary); font-weight: 300; line-height: 1.2; margin: 0; text-align: left; }

@media (min-width: 1201px) {
  .intro-text p.text-t2 { font-size: 60px; }
}
.intro-text p.text-t2 span { font-weight: 700; color: #ffffff; }
.intro-text p.slider-title { font-size: 70px; font-weight: 300; color: #ffffff; line-height: 100%; margin-bottom: 20px; font-family: var(--font-primary); }
.intro-text p.slider-title span { font-weight: 700; font-size: 70px; }
.intro-text p.slider-subtitle { font-size: 40px; font-weight: 300; color: rgba(255, 255, 255, 0.8); font-family: var(--font-primary); }
.intro-text p.slider-subtitle span { font-weight: 600; font-size: 40px; }

/* ============================================
 8. First Page Layer (공통 첫 페이지 메뉴)
 ============================================ */

.first-page-layer { position: absolute; top: 0; right: 204px; bottom: 0; display: flex; justify-content: flex-end; align-items: center; z-index: 6; pointer-events: none; }
.first-page-layer .first-page-content { position: absolute; top: 0; left: var(--section-padding-x); right: var(--section-padding-x); bottom: 0; display: flex; flex-direction: row; justify-content: flex-end; align-items: center; width: var(--section-content-width); height: 100vh; box-sizing: border-box; pointer-events: none; }

.first-page-menu { position: relative; display: flex; flex-direction: column; gap: 0; z-index: 10; align-items: flex-end; flex-shrink: 0; opacity: 1; pointer-events: auto; margin-top: 80px;}

.first-page-menu .menu-item { display: flex; flex-direction: column; height: var(--menu-item-height); align-items: center; justify-content: center; gap: var(--spacing-md); padding: 40px; position: relative; background-color: var(--color-first-menu-bg); border-radius: 0; border: 1px solid var(--color-first-menu-border); width: var(--menu-item-width); flex-shrink: 0; transition: background-color var(--transition-base), border-color var(--transition-base); text-decoration: none; margin-top: -1px; }

.first-page-menu .menu-item:first-child { margin-top: 0; }

.first-page-menu .menu-item:hover { background-color: var(--color-first-menu-bg-hover); border-color: var(--color-first-menu-border-hover); z-index: 1; }

.first-page-menu .menu-item-content { width: 100%; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-end; position: relative; flex: 1; align-self: stretch; flex-grow: 1; gap: 4px;}

.first-page-menu .menu-item-label { position: relative; align-self: stretch; margin-top: -1px; font-size: 24px; font-weight: 500; } 

.first-page-menu .menu-item-text { position: relative; width: fit-content; white-space: nowrap; font-family: var(--font-primary); font-weight: 400; font-size: var(--font-size-24); color: #F9F9F9; display: flex; align-items: baseline; gap: 8px; }

.first-page-menu .menu-item-text span { font-weight: 500; font-size: var(--font-size-34); line-height: 1; }

.first-page-menu .menu-item-arrow { position: absolute; top: 0; right: 0; width: 24px; height: 24px; object-fit: contain; transition: opacity var(--transition-base); opacity: 0.8; } 

.first-page-menu .menu-item:hover .menu-item-arrow { opacity: 1; } 

/* ============================================
 13. Forest Section (숲 섹션)
 ============================================ */

#forest.page-section { min-height: 320vh; background-color: var(--color-text-white); transition: background-color var(--transition-bg); position: relative; z-index: 5; padding-bottom: calc(100vh + 100vh + 40vh); } 

.forest-content-area { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; padding-bottom: 0; } 

body.forest-expanded .forest-content-area { justify-content: center; align-items: center; } 

body.forest-expanded .forest-image-area { display: none; } 

.forest-text-content { display: flex; flex-direction: column; gap: var(--spacing-2xl); width: 100%; } 

.forest-title-text { font-family: 'HanwhaGothic', sans-serif; font-weight: 300; font-size: var(--font-size-80); line-height: var(--line-height-relaxed); letter-spacing: var(--letter-spacing-02em); color: var(--color-bg-black); } 

.forest-description-text { display: flex; flex-direction: column; gap: 0; } 

.forest-description-part1,
.forest-description-part2 { font-size: var(--font-size-24); line-height: var(--line-height-170); letter-spacing: var(--letter-spacing-015em); color: var(--color-text-gray-494949); } 

.forest-description-part1 { font-weight: 300; } 

.forest-description-part2 { font-weight: 400; margin-top: var(--spacing-md); } 

.forest-image-area { display: flex; flex-direction: column; gap: 200px; width: 100%; margin-top: 60px; } 

.forest-image-item { display: flex; align-items: center; justify-content: space-between; width: 100%; gap: 0; } 

.forest-operator-item,
.forest-family-item { flex-direction: row; } 

.forest-family-item .forest-text-wrapper { order: 1; justify-content: flex-start; width: 50%; flex: 0 0 50%; } 

.forest-family-item .forest-text-wrapper .forest-image-text { text-align: left; } 

.forest-family-item .forest-image-wrapper { order: 2; width: 50%; flex: 0 0 50%; margin-right: calc(-1 * var(--section-padding-x)); } 

.forest-operator-item .forest-image-wrapper { width: 50%; flex: 0 0 50%; max-height: var(--image-trophy-max-height); padding-left: 140px; padding-right: 140px; box-sizing: border-box; } 

.forest-operator-item .forest-text-wrapper { width: 50%; flex: 0 0 50%; } 

.forest-operator-item .forest-image-wrapper .forest-image { max-height: var(--image-trophy-max-height); width: 100%; height: auto; object-fit: contain; } 

.forest-image-wrapper { flex-shrink: 0; width: 100%; height: auto; } 

.forest-image-wrapper-glass { width: 100%; min-height: var(--image-glass-height); height: var(--image-glass-height); } 

.forest-image { width: 100%; height: auto; display: block; object-fit: contain; } 

.forest-image-wrapper-glass .forest-image { width: 100%; height: var(--image-glass-height); object-fit: cover; } 

.forest-text-wrapper { display: flex; justify-content: flex-end; width: 50%; flex: 0 0 50%; } 

.forest-bottom-row { display: flex; width: 100%; margin-top: 80px; }

.forest-bottom-left,
.forest-bottom-right { width: 50%; flex: 0 0 50%; }

.forest-bottom-title { margin: 0; font-family: var(--font-primary); font-size: 56px; font-weight: 300; line-height: 1.25; letter-spacing: var(--letter-spacing-04em); color: #222; }

.forest-bottom-title span { font-weight: 700; }

.forest-bottom-heading { margin: 0; font-family: var(--font-primary); font-size: 42px; font-weight: 600; line-height: 1.3; letter-spacing: var(--letter-spacing-04em); color: #222; }

.forest-bottom-desc { margin: 12px 0 0; font-family: var(--font-primary); font-size: 34px; font-weight: 400; line-height: 1.35; letter-spacing: var(--letter-spacing-04em); color: #444; }

.forest-glass-text-wrapper,
.forest-trophy-text-wrapper { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--spacing-md); height: 100%; padding-left: 140px; box-sizing: border-box; } 

.forest-glass-text-wrapper .forest-overview-desc,
.forest-trophy-desc { margin-top: auto; } 

.forest-trophy-text-wrapper { width: auto; max-width: 100%; } 

.forest-trophy-title-wrapper { position: relative; display: flex; flex-direction: column; align-items: flex-start; width: auto; margin-top: 0; } 

.forest-trophy-title { text-align: left; width: auto; position: relative; } 

.forest-trophy-title-wrapper .forest-forbes-logo { position: absolute; top: -80px; left: 0; z-index: 1; } 

.forest-trophy-desc { text-align: left; width: auto; } 

.forest-trophy-header { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; gap: var(--spacing-sm); } 

.forest-trophy-header .forest-overview-label { width: auto; flex-shrink: 0; } 

.forest-forbes-logo { display: flex; align-items: center; justify-content: center; flex-shrink: 0; } 

.forbes-logo-image { width: auto; height: auto; max-width: 80px; max-height: 80px; display: block; object-fit: contain; } 

.page-section .section-content .forest-text-container { display: flex; flex-direction: column; gap: var(--spacing-lg); align-items: center; width: 100%; padding-bottom: var(--spacing-2xl); } 

.page-section .section-content .forest-text-item { text-align: center; position: absolute; overflow: visible; display: block; opacity: 0; visibility: hidden; transition: opacity var(--transition-fast), visibility 0s var(--transition-fast), transform var(--transition-fast); width: 100%; left: 0; right: 0; z-index: 10; transform: translateZ(0); } 

.page-section .section-content .forest-text-item[data-forest-step="1"] { top: calc(170vh - 10vh * var(--forest-scroll-progress, 0) + (35vh + 65vh * var(--forest-scroll-progress, 0)) / 2 - 55px); } 

.page-section .section-content .forest-text-item[data-forest-step="2"] { top: calc(170vh - 10vh * var(--forest-scroll-progress, 0) + (35vh + 65vh * var(--forest-scroll-progress, 0)) / 2 + 55px); } 

/* 숲 섹션이 활성화되지 않았을 때는 숲 텍스트 숨김 (최우선) - 단, forest-unfixed 상태일 때는 제외 (스크롤 올라갈 때 보여야 함) */
body:not(:has(#forest.is-active)):not(.forest-unfixed) .page-section .section-content .forest-text-item { opacity: 0 !important; visibility: hidden !important; } 

body.forest-expanded:has(#forest.is-active) .page-section .section-content .forest-text-item { visibility: visible; } 

/* 숲 이미지 100% 확장 시 텍스트 고정 - 배경 레이어와 같은 위치 */
body:has(#forest.is-active):not(.forest-unfixed) .page-section .section-content .forest-text-item[data-forest-step="1"] { position: fixed !important; top: calc(var(--forest-text-fixed-top, 50vh) - 55px - 110px) !important; left: 50% !important; transform: translate(-50%, 0) translateZ(0) !important; z-index: 15 !important; opacity: var(--forest-text-step-1-opacity, 0) !important; visibility: var(--forest-text-step-1-visibility, hidden) !important; } 

body:has(#forest.is-active):not(.forest-unfixed) .page-section .section-content .forest-text-item[data-forest-step="2"] { position: fixed !important; top: calc(var(--forest-text-fixed-top, 50vh) + 55px - 110px) !important; left: 50% !important; transform: translate(-50%, 0) translateZ(0) !important; z-index: 15 !important; opacity: var(--forest-text-step-2-opacity, 0) !important; visibility: var(--forest-text-step-2-visibility, hidden) !important; } 

/* 숲 고정 해제 시 텍스트도 원래 위치로 */
body.forest-unfixed .page-section .section-content .forest-text-item { position: absolute !important; top: auto !important; left: auto !important; transform: none !important; } 

/* ============================================
 14. White Section (흰색 섹션)
 ============================================ */

#white-section.page-section { min-height: 100vh; background-color: var(--color-text-white); position: relative; z-index: 4; padding: var(--section-padding-y) 0; padding-bottom: 0; display: flex; align-items: center; justify-content: center; margin-top: calc(-1 * 50vh); margin-bottom: 0; will-change: transform; transform: translateY(calc(var(--white-scroll-progress, 0) * 50vh)) translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; } 

/* 숲 고정 해제 시 화이트 섹션이 숲 뒤에 숨어있다가 점진적으로 내려감 */
body.forest-unfixed #white-section.page-section { z-index: 3 !important; margin-top: calc(-1 * 50vh) !important; transform: translateY(calc(var(--white-scroll-progress, 0) * 50vh)) translateZ(0) !important; } 

.white-section-content { width: 100%; max-width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0; padding: 0; box-sizing: border-box; } 

.white-section-text { text-align: center; max-width: 1200px; margin: 0 auto; width: 100%; height: 50%; display: flex; align-items: center; justify-content: center; padding: 0 var(--section-padding-x); box-sizing: border-box; } 

.white-section-images { width: 100vw; height: 50%; margin-left: calc(50% - 50vw); overflow: hidden; position: relative; opacity: var(--white-image-opacity, 0); transform: translateY(var(--white-image-translate-y, 0px)); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); display: flex; align-items: center; justify-content: center; box-sizing: border-box; } 

.white-section-image-track { display: flex; gap: 20px; width: fit-content; animation: scrollImages 20s linear infinite; will-change: transform; transform: translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; } 

@keyframes scrollImages { 
 0% { transform: translateX(0); } 
 100% { transform: translateX(calc(-1 * var(--single-set-width))); } 
 }

.white-section-image { width: 360px; border-radius: 0; }

#propellant.page-section { min-height: 100vh; position: relative; z-index: 2; will-change: transform; transform: translateY(calc(var(--propellant-scroll-progress, 0) * 50vh)) translateZ(0); backface-visibility: hidden; -webkit-backface-visibility: hidden; transform-style: preserve-3d; } 

#propellant .propellant-content { position: absolute; top: 0; left: 0; right: 0; bottom: 0; display: flex; flex-direction: row; align-items: center; justify-content: space-between; padding: 80px 0 80px var(--section-padding-x); gap: 64px; z-index: 10; background: linear-gradient(0deg, rgba(0, 0, 0, 0.24) 0%, rgba(0, 0, 0, 0.24) 100%); opacity: var(--propellant-content-opacity, 0); transform: translateY(var(--propellant-content-translate-y, 150px)); transition: opacity 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94), transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94); will-change: opacity, transform; } 

.propellant-main { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; flex: 0 0 auto; gap: 0; min-width: 0; max-width: 100%; overflow: hidden; } 

.propellant-header { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: var(--spacing-md); position: relative; flex: 0 0 auto; margin: 0; margin-bottom: 64px; } 

.propellant-title { position: relative; flex: 1; margin-top: -1px; } 

.propellant-recruit-button { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 24px; padding: 12px 24px; background-color: transparent; border: 1px solid var(--color-text-white); border-radius: 99px; cursor: pointer; transition: background-color var(--transition-fast), border-color var(--transition-fast); text-decoration: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } 

.propellant-recruit-button:hover { background-color: rgba(255, 255, 255, 0.1); } 

.propellant-recruit-text { font-family: var(--font-display); font-size: 20px; font-weight: var(--font-weight-regular); line-height: 160%; letter-spacing: -0.04px; color: var(--color-text-white); white-space: nowrap; } 

.propellant-recruit-button svg { width: 24px; height: 24px; color: var(--color-text-white); flex-shrink: 0; } 

.propellant-slider { display: flex; flex-direction: column; align-items: flex-start; gap: 0; position: relative; flex: 0 0 auto; margin: 0; width: 100%; max-width: 100%; overflow: hidden; } 

.propellant-slider-wrapper { display: flex; flex-direction: column; max-width: 100%; align-items: flex-start; justify-content: flex-start; gap: 0; position: relative; flex: 0 0 auto; width: 100%; overflow: hidden; } 

.propellant-card-list { display: flex; align-items: flex-start; gap: 24px; position: relative; width: 100%; max-width: 100%; flex-wrap: nowrap; overflow: hidden; } 

.propellant-card-list::-webkit-scrollbar { display: none; } 

.propellant-card-list:active,
.propellant-card-list.propellant-dragging { cursor: grabbing !important; scroll-snap-type: none !important; scroll-behavior: auto !important; will-change: scroll-position !important; } 

.propellant-card { display: flex; flex-direction: column; flex: 1 1 0; min-width: 0; height: 367px; align-items: flex-start; gap: 24px; padding: 16px; position: relative; background-color: var(--color-propellant-card-bg); border-radius: 0; backdrop-filter: blur(4px) brightness(100%); -webkit-backdrop-filter: blur(4px) brightness(100%); transition: background-color 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease; }

.propellant-card:target,
.propellant-card.propellant-card-active { background-color: var(--color-propellant-card-bg-active); backdrop-filter: blur(12px) brightness(100%); -webkit-backdrop-filter: blur(12px) brightness(100%); transition: background-color 0.4s ease, backdrop-filter 0.4s ease, -webkit-backdrop-filter 0.4s ease; } 

.propellant-card-content { display: flex; align-items: flex-start; justify-content: center; gap: var(--spacing-lg); position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; } 

.propellant-card-text { display: flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-xs); position: relative; flex: 1; flex-grow: 1; } 

.propellant-card-label { position: relative; align-self: stretch; margin-top: -1px; transition: color 0.4s ease; } 

.propellant-card.propellant-card-active .propellant-card-label,
.propellant-card-label.propellant-card-label-active { color: var(--color-propellant-card-label-active); } 

.propellant-card-title { position: relative; align-self: stretch; transition: color 0.4s ease; } 

.propellant-card.propellant-card-active .propellant-card-title,
.propellant-card-title.propellant-card-title-active { color: var(--color-propellant-card-text-active); } 

.propellant-card-image { position: relative; align-self: stretch; width: 100%; height: var(--image-card-height); border-radius: 0; background-size: cover; background-position: 50% 50%; background-color: var(--color-bg-black); } 

.propellant-card-image-placeholder { height: var(--image-card-height); border-radius: 0; }

.propellant-card-arrow { all: unset; box-sizing: border-box; display: none; width: 40px; height: 40px; align-items: center; justify-content: center; gap: 10px; position: absolute; top: 320px; left: 312px; background-color: rgba(255, 255, 255, 0.4); border-radius: var(--radius-full); backdrop-filter: blur(1px) brightness(100%); -webkit-backdrop-filter: blur(1px) brightness(100%); aspect-ratio: 1; cursor: pointer; transition: background-color var(--transition-fast); } 

.propellant-card-arrow:hover { background-color: rgba(255, 255, 255, 0.6); } 

.propellant-card.propellant-card-active .propellant-card-arrow { display: flex !important; } 

.propellant-card-arrow svg { position: relative; width: var(--spacing-md); height: var(--spacing-md); color: var(--color-text-white); } 

.propellant-navigation { display: flex; flex-direction: column; width: var(--propellant-navigation-width); align-items: flex-start; gap: 12px; position: relative; flex: 0 0 auto; } 

.propellant-progress { position: relative; align-self: stretch; width: 100%; height: 4px; background-color: var(--color-propellant-progress-bg); border-radius: var(--radius-full); overflow: hidden; } 

.propellant-progress-bar { width: var(--propellant-progress, 0%); height: 4px; background-color: var(--color-propellant-progress-bar); border-radius: var(--radius-full); transition: width var(--transition-base); } 

.propellant-controls { display: flex; align-items: center; justify-content: space-between; position: relative; align-self: stretch; width: 100%; flex: 0 0 auto; } 

.propellant-pagination { display: inline-flex; align-items: center; gap: 4px; position: relative; flex: 0 0 auto; } 

.propellant-page-current,
.propellant-page-separator,
.propellant-page-total { position: relative; width: fit-content; margin-top: -1px; white-space: nowrap; } 

.propellant-buttons { display: inline-flex; align-items: center; gap: 4px; position: relative; flex: 0 0 auto; } 

.propellant-button-prev,
.propellant-button-next { all: unset; box-sizing: border-box; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: opacity var(--transition-fast); width: 32px; height: 32px; } 

.propellant-button-prev:hover,
.propellant-button-next:hover { opacity: 0.8; } 

.propellant-button-prev svg,
.propellant-button-next svg { position: relative; width: 32px; height: 32px; color: var(--color-text-white); pointer-events: none; } 

.propellant-family-site { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-2xl); position: relative; flex: 0 0 auto; background: transparent; } 

.propellant-family-title { position: relative; width: fit-content; margin-top: -1px; white-space: nowrap; } 

.propellant-family-nav { display: inline-flex; flex-direction: column; align-items: flex-start; gap: var(--spacing-sm); position: relative; flex: 0 0 auto; } 

.propellant-family-button { all: unset; box-sizing: border-box; display: flex; width: var(--propellant-family-button-width); align-items: center; justify-content: space-between; padding: 12px var(--spacing-md); position: relative; flex: 0 0 auto; background-color: var(--color-propellant-family-bg-inactive); border-radius: var(--radius-full); cursor: pointer; backdrop-filter: blur(8px) brightness(100%); -webkit-backdrop-filter: blur(8px) brightness(100%); transition: transform var(--transition-fast), background-color var(--transition-fast); outline: none; } 

.propellant-family-radio { position: absolute; opacity: 0; pointer-events: none; width: 0; height: 0; } 

.propellant-family-button:hover { transform: translateY(-2px); } 

.propellant-family-button:active { transform: translateY(0); } 

.propellant-family-button:has(.propellant-family-radio:checked) { background-color: var(--color-propellant-family-bg); } 

.propellant-family-button:has(.propellant-family-radio:checked) .propellant-family-text,
.propellant-family-button:has(.propellant-family-radio:checked) svg { color: var(--color-propellant-family-text); } 

.propellant-family-button::before { content: ""; position: absolute; inset: 0; padding: 1px; border-radius: var(--radius-full); background: linear-gradient(
 180deg,
 rgba(255, 255, 255, 0.2) 0%,
 rgba(255, 255, 255, 0) 55%,
 rgba(255, 255, 255, 0.2) 100%
 ); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; z-index: 1; pointer-events: none; } 

.propellant-family-text { display: flex; align-items: center; justify-content: center; width: fit-content; margin-top: -1px; white-space: nowrap; position: relative; } 

.propellant-family-button svg { position: relative; width: var(--spacing-md); height: var(--spacing-md); color: var(--color-text-white); transition: color var(--transition-base); } 

.propellant-fake-area { flex: 0 0 auto; width: var(--propellant-navigation-width); } 

.propellant-card:last-child { width: var(--propellant-card-width-last); border-radius: 0; }

.propellant-card:last-child.propellant-card-active { background-color: var(--color-propellant-card-bg-active) !important; backdrop-filter: blur(12px) brightness(100%) !important; -webkit-backdrop-filter: blur(12px) brightness(100%) !important; } 

/* ============================================
 16. About Page (그룹소개 페이지)
 ============================================ */

.about-page-main { min-height: 100vh; background-color: var(--color-bg-black); position: relative; } 

/* 서브페이지 섹션 공통 스타일 */
.subpage-section { position: relative; width: 100%; } 

/* 서브페이지 콘텐츠 영역 */
.subpage-section-content { background-color: var(--color-text-white); position: relative; z-index: 1; will-change: transform; padding: 50px 50px; } 

/* About 페이지 타이틀 영역 */
.about-page-title { display: flex; flex-direction: column; gap: 24px; } 

.about-page-title .text-t21,
.about-page-title .text-t12 { margin: 0; text-align: left; } 

/* 이미지와 목록 그리드 */
.about-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: stretch; margin-top: 30px; } 

/* 이미지 영역 */
.about-content-image { height: 100%; padding: 4px 0; display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; } 

.about-content-image img { width: 100%; height: auto; max-height: 100%; object-fit: contain; } 

/* 목록 영역 */
.about-content-list { height: 100%; padding: 64px 0; display: flex; flex-direction: column; gap: 0; box-sizing: border-box; } 

.about-content-list-item { flex: 1; padding-bottom: 15px; display: flex; align-items: center; gap: 40px; border-bottom: 1px solid var(--color-text-c4c4c4); margin-bottom: 8px; min-height: 0; } 

.about-content-list-number { width: 40px; height: 40px; border-radius: 50%; background-color: var(--color-text-1e1e1e); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } 

.about-content-list-number .text-t23 { color: var(--color-text-white); margin: 0; } 

.about-content-list-text { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; } 

.about-content-list-text .text-t24,
.about-content-list-text .text-t25 { margin: 0; } 

/* 공통 푸터 정보 섹션 */
.footer-section-info { background-color: var(--color-bg-black); position: relative; will-change: transform; /* 본문(z-index:1)보다 위 — 드롭다운이 짤리지 않도록 */
 transform: translate3d(0, 0, 0); backface-visibility: hidden; -webkit-backface-visibility: hidden; padding: 50px 0; } 

/* 하단 컨테이너: 공통 gpu-accelerated 클래스 사용 */

/* 공통 사이트 푸터 (fragments/footer.html) */
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 30px;}
.footer-logo { display: flex; align-items: center; }
.footer-logo-image { height: 40px; width: auto; filter: brightness(0) invert(1); }
.footer-dropdowns { display: flex; gap: 40px; }
.footer-dropdown { position: relative; }
.footer-dropdown-trigger {
  all: unset;
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  font-family: var(--font-primary);
  font-weight: var(--font-weight-regular);
  font-size: var(--font-size-base);
  line-height: var(--line-height-relaxed);
  color: var(--color-text-white);
  cursor: pointer;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--color-text-white);
  transition: opacity var(--transition-base);
}
.footer-dropdown-trigger::-webkit-details-marker { display: none; }
.footer-dropdown-trigger:hover { opacity: 0.7; }
.footer-dropdown-trigger svg { width: 16px; height: 16px; color: var(--color-text-white); transition: transform 0.2s ease; }

/* 푸터 패밀리·협회 드롭다운 (details/summary) */
.footer-dropdown.footer-dropdown-details { overflow: visible; }
.footer-dropdown-panel { display: none; position: absolute; top: calc(100% + 8px); right: 0; min-width: 240px; margin: 0; padding: 8px 0; list-style: none; background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15); z-index: 200; box-sizing: border-box; }
.footer-dropdown-details[open] > .footer-dropdown-panel { display: block; }
.footer-dropdown-details[open] .footer-dropdown-trigger svg { transform: rotate(180deg); }
.footer-dropdown-link { display: block; padding: 10px 18px; font-family: var(--font-primary); font-size: 18px; font-weight: 500; line-height: 1.4; color: #000; text-decoration: none; }
.footer-dropdown-link:hover { background: rgba(0, 0, 0, 0.06); }

.footer-middle { display: flex; flex-direction: column; gap: 16px; }
.footer-links { display: flex; align-items: center; gap: 12px; font-family: var(--font-primary); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--color-text-white); }
.footer-links a { color: var(--color-text-white); text-decoration: none; transition: opacity var(--transition-base); }
.footer-links a:hover { opacity: 0.7; }
.footer-links span { color: var(--color-text-white); opacity: 0.5; }
.footer-info { font-family: var(--font-primary); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); line-height: var(--line-height-loose); color: var(--color-text-white); opacity: 0.8; }
.footer-bottom { display: flex; justify-content: space-between; align-items: center; }
.footer-copyright { font-family: var(--font-primary); font-weight: var(--font-weight-regular); font-size: var(--font-size-sm); line-height: var(--line-height-relaxed); color: var(--color-text-white); opacity: 0.6; }
.footer-social { display: flex; gap: 16px; align-items: center; }
.footer-social-icon { display: flex; align-items: center; justify-content: center; color: var(--color-text-white); transition: opacity var(--transition-base); }
.footer-social-icon:hover { opacity: 0.7; }
.footer-social-icon img { display: block; width: auto; height: auto; max-width: none; }

/* ============================================
 17. Greeting Page (인사말 페이지)
 ============================================ */

/* 인사말 컨텐츠 그리드 */
.greeting-content-grid { display: grid; grid-template-columns: 2.3fr 1fr; gap: clamp(40px, 4vw, 50px)} 

/* 텍스트 영역 (왼쪽) */
.greeting-text-area { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; height: 100%; width: 100%; max-width: none;} 

.greeting-text-content { display: flex; flex-direction: column; gap:20px; width: 100%; } 

.greeting-text-paragraph { margin: 0; color: var(--color-bg-black); } 

.greeting-signature { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; } 

.greeting-signature-title { margin: 0; color: #1E1E1E; } 
.greeting-signature-title .text-t27,
.greeting-signature-title .text-t28 { color: #1E1E1E; } 

.greeting-signature-image { width: 114px; height: 57px; display: flex; align-items: center; justify-content: flex-start; } 
.greeting-signature-image img { width: 100%; height: auto; object-fit: contain; } 

/* 초상화 영역 (오른쪽) */
.greeting-portrait-area { display: flex; justify-content: center; gap: var(--spacing-2xl); /* padding-right: 120px; */ } 

.greeting-portrait-wrapper { width: 100%; position: relative; display: flex;} 

.greeting-portrait-image { object-fit: cover; display: block; border-radius: 0; }

/* ============================================
 18. Philosophy Page (경영이념 페이지)
 ============================================ */

.philosophy-text { margin: 0 0 30px 0; color: #1E1E1E; } 

.philosophy-cards { background-color: #f2f2f2; padding: clamp(30px, 4vw, 50px); display: grid; grid-template-columns: repeat(3, minmax(0, 415px)); justify-content: center; gap: clamp(20px, 2.5vw, 40px); width: 100%; border-radius: 0; } 

.philosophy-card { background-color: #fff; width: 100%; height: 436px; padding: clamp(24px, 3vw, 40px); display: flex; flex-direction: column; border-radius: 0; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05); box-sizing: border-box; } 

.philosophy-card-icon { height: auto; margin-bottom: 77px; display: flex; align-items: center; justify-content: flex-start; } 

.philosophy-card-icon img { width: 120px; height: 120px; height: auto; object-fit: contain; } 

.philosophy-card-text { display: flex; flex-direction: column; flex: 1; } 

.philosophy-card-title-en { margin: 0 0 0px 0; color: #1e1e1e; font-size: 24px; font-weight: 600; }

.philosophy-card-title-ko { margin: 0 0 0px 0; color: #1e1e1e; font-size: 24px; font-weight: 600; }

.philosophy-card-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0px; }

.philosophy-card-list li { position: relative; color: #555; font-size: 18px; font-weight: 400; }

/* ============================================
   20. Growth Page (성장성 페이지)
   ============================================ */

/* 모토 문구 */
.growth-motto { margin: 0 0 14px 0; font-family: var(--font-primary); font-size: var(--font-size-34); font-weight: var(--font-weight-semibold); line-height: var(--line-height-loose); letter-spacing: var(--letter-spacing-04em); color: var(--color-text-1e1e1e); text-align: left; } 

/* 컨텐츠 블록 (이미지 + 타임라인) */
.growth-content-block { width: 100%; margin-top: 30px; margin-bottom: 50px; display: flex; flex-direction: column; align-items: flex-end; gap: 40px; } 

.growth-content-block:last-of-type { margin-bottom: 100px; } 

/* 이미지 래퍼 */
.growth-image-wrapper { width: 1189px; display: flex; justify-content: flex-start; align-items: flex-start; } 

.growth-image { width: 100%; max-height:928px; height: auto; object-fit: contain; } 

/* 타임라인 테이블 */
.growth-timeline-table { width: 100%; display: flex; flex-direction: column; align-items: flex-end; gap: 40px; } 

.growth-timeline-title { margin: 0; font-family: var(--font-primary); font-size: 32px; font-weight: var(--font-weight-light); line-height: 160%; letter-spacing: -0.04em; color: #1E1E1E; text-align: left; width: 1189px; } 

.growth-timeline-container { width: 1189px; background-color: #FFFFFF !important; display: flex; flex-direction: column; } 

.growth-timeline-divider { width: 100%; height: 0; border-top: 1px solid #C4C4C4; } 

.growth-timeline-divider:first-child { border-top: 2px solid #1E1E1E; } 

.growth-timeline-item { padding: 40px 24px; } 

.growth-timeline-text { margin: 0; font-family: var(--font-primary); font-size: 24px; font-weight: var(--font-weight-light); line-height: 160%; letter-spacing: -0.04em; color: #1E1E1E; text-align: left; } 

/* 효과 테이블 */
.growth-benefits-table { width: 100%; margin-top: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 40px; } 

.growth-benefits-title { margin: 0; font-family: var(--font-primary); font-size: 32px; font-weight: var(--font-weight-light); line-height: 160%; letter-spacing: -0.04em; color: #1E1E1E; text-align: left; width: 1189px; } 

.growth-benefits-container { width: 1189px; background-color: #FFFFFF !important; display: flex; flex-direction: column; } 

.growth-benefits-divider { width: 100%; height: 0; border-top: 1px solid #C4C4C4; } 

.growth-benefits-divider:first-child { border-top: 2px solid #1E1E1E; } 

.growth-benefit-item { display: flex; align-items: flex-start; gap: 24px; padding: 40px 24px; } 

.growth-benefit-number { width: 48px; height: 48px; border-radius: 50%; background-color: #E9E9E9; display: flex; align-items: center; justify-content: center; flex-shrink: 0; font-family: var(--font-primary); font-size: 24px; font-weight: var(--font-weight-regular); line-height: 140%; letter-spacing: -0.02em; color: #505050; } 

.growth-benefit-content { display: flex; flex-direction: column; gap: 16px; flex: 1; min-width: 0; } 

.growth-benefit-title { margin: 0; font-family: var(--font-primary); font-size: 24px; font-weight: var(--font-weight-light); line-height: 160%; letter-spacing: -0.04em; color: #1E1E1E; } 

.growth-benefit-desc-wrapper { display: flex; flex-direction: column; gap: 8px; } 

.growth-benefit-desc { margin: 0; font-family: var(--font-primary); font-size: 24px; font-weight: var(--font-weight-light); line-height: 160%; letter-spacing: -0.04em; color: #7E7E7E; } 

/* 첫 번째와 두 번째 영역 구분선 */
.growth-section-divider { width: 100%; height: 0; border-top: 1px solid #C4C4C4; margin: 0 0 100px 0; } 

/* 벤처천억기업 섹션 */
/* 성장성 페이지: 모토(t29)만 t30과 동일 크기·굵기, span·색은 typography와 다름 */
.growth-page .text-t29 { font-weight: var(--font-weight-regular); color: #555555; }

.growth-page .text-t30 { color: #555555; }
.growth-page .text-t30 span { font-weight: var(--font-weight-regular); color: #555555; }

.growth-cert-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: flex-start; margin-top: 0px; }
.growth-cert-text { flex-direction: column; justify-content: flex-start; }
.growth-cert-image { width: 100%; display: flex; justify-content: flex-end; }
.growth-cert-image img { width: 100%; max-width: 660px; height: auto; object-fit: contain; }

/* ============================================
   21. Expertise Page (전문성 페이지)
   ============================================ */

/* 컨텐츠 블록 (이미지 + 타임라인) */
.expertise-content-block { width: 100%; margin-top: 30px; margin-bottom: 30px; display: flex; flex-direction: column; align-items: flex-end; gap: 40px; } 
.expertise-cert-text { margin-top: 50px; flex-direction: column; justify-content: flex-start; }

/* ============================================
 CI 페이지 스타일
 ============================================ */

/* ... 기존 CI 스타일 ... */

/* ============================================
 채용정보(인재상) 페이지 스타일
 ============================================ */

.job-info-page {background-color: #FFFFFF;}
.recruit-section { padding: 50px;  background-color: #FFFFFF; }
.recruit-section:nth-child(even) { background-color: #FFFFFF; }

.recruit-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }
.recruit-header-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-primary); font-size: 32px; font-weight: 700; color: #000; }
.mobile-recruit-icon { display: none; }
.recruit-apply-btn { display: flex; align-items: center; gap: 12px; padding: 12px 24px; background: #000; border-radius: 4px; color: #FFF; text-decoration: none; font-size: 24px; font-weight: 500; transition: opacity 0.3s; }
.recruit-apply-btn img { width: 24px; height: 24px; object-fit: contain; }
.recruit-apply-btn:hover { opacity: 0.8; }

.recruit-description { font-family: var(--font-primary); font-size: 18px; line-height: 1.6; color: #666; margin-bottom: 30px; max-width: 1720px; }

.recruit-visual-area { width: 100%; display: flex; justify-content: center; padding: 0 0 60px 0; }
.recruit-visual-img { width: 100%; max-width: 1720px; height: auto; object-fit: contain; }

.process-img-pc { display: block; width: 100%; height: auto; }
.process-img-mo { display: none; }

.recruitment-page-main { background-color: #F4F4F4; }

/* 반응형 */
@media (max-width: 1200px) {
    .ideal-talent-grid { flex-direction: column; gap: 40px; }
    .ideal-main-circle::after { display: none; }
    .ideal-sub-grid::before { display: none; }
}

/* ============================================
 CI 페이지 스타일
 ============================================ */

/* CI Hero 섹션 */
.ci-hero-label { font-family: var(--font-primary); font-size: 24px; font-weight: var(--font-weight-light); line-height: 150%; letter-spacing: -0.02em; color: #BCBCBC; margin: 0; } 

.ci-hero-title { font-family: var(--font-primary); font-size: 80px; font-weight: var(--font-weight-light); line-height: 140%; letter-spacing: -0.04em; color: #FFFFFF; margin: 0; } 

/* CI 텍스트 블록 (상단) */
.ci-text-block { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin-bottom: 30px; } 

.ci-content-title { font-family: var(--font-primary); font-size: 48px; font-weight: var(--font-weight-light); line-height: 160%; color: #000000; margin: 0; } 

.ci-content-description { display: flex; flex-direction: column; gap: 0; } 

.ci-content-description p { font-family: var(--font-primary); font-size: var(--font-size-24); font-weight: var(--font-weight-regular); line-height: var(--line-height-loose); letter-spacing: var(--letter-spacing-02em); color: var(--color-text-1e1e1e); margin: 0; } 

/* CI 중간 섹션: 2개 박스 반반 */
.ci-middle-section { display: flex; flex-direction: row; gap: 30px; margin-bottom: 30px; } 

.ci-box { flex: 1; display: flex; justify-content: center; align-items: center; padding: 80px; border: 1px solid #C4C4C4; background-color: #FFFFFF; min-height: 400px; position: relative; } 

.ci-item-download { position: absolute; bottom: 30px; right: 30px; display: block; }

.ci-item-download img { width: auto; height: auto; }

.ci-butterfly-logo,
.ci-main-logo {  max-width: 500px; height: auto; } 

/* CI 하단 섹션: 1개 박스 전체 */
.ci-bottom-section { display: flex; flex-direction: column; gap: 80px; padding: 80px; border: 1px solid #C4C4C4; background-color: #FFFFFF; } 

/* CI 로고 그리드 */
.ci-logo-grid { display: flex; flex-direction: column; gap: 60px; width: 100%; } 

.ci-logo-row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; gap: 40px; } 

.ci-logo-row.center-row { justify-content: center; gap: 240px; } 

.ci-logo-item-grid { flex: 1; display: flex; justify-content: center; align-items: center; max-width: 300px; } 

.ci-logo-image { width: 100%; height: auto; object-fit: contain; } 


/* CI 다운로드 버튼 */
.ci-download-wrapper { display: flex; flex-direction: row; justify-content: flex-end; align-items: center; margin-top: 0px; width: 100%; } 

.ci-download-button { box-sizing: border-box; display: flex; flex-direction: row; justify-content: center; align-items: center; padding: 12px 32px; gap: 12px; border: 1px solid #C4C4C4; border-radius: 99px; background: #FFFFFF; cursor: pointer; transition: all 0.3s ease; text-decoration: none; } 

.ci-download-button:hover { background: #F5F5F5; border-color: #1E1E1E; } 

.ci-download-text { font-family: var(--font-primary); font-size: 18px; font-weight: var(--font-weight-regular); line-height: 160%; letter-spacing: -0.02em; color: #1E1E1E; } 

.ci-download-icon { width: 24px; height: 24px; object-fit: contain; } 

/* ============================================
 채용정보(모집요강) 페이지 스타일
 ============================================ */

/* 혜택 섹션 */
.benefit-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px; background-color: #FFFFFF;  margin-bottom: 0px; }
.benefit-item { background-color: #FBFBFB; padding: 30px 30px; display: flex; flex-direction: column; gap: 10px; border-top: 1px solid #1E1E1E;}
.benefit-icon { width: 24px; height: 24px; margin-bottom: 8px; }
.benefit-icon img { width: 100%; height: 100%; object-fit: contain; }
.benefit-title { font-family: var(--font-primary); font-size: 24px; font-weight: 500; color: #000; margin: 0; }
.benefit-desc { font-family: var(--font-primary); font-size: 18px; font-weight: 300; line-height: 1.6; color: #666; margin: 0; word-break: keep-all; }

/* 프로세스 섹션 */
.process-section { background-color: #FFFFFF; padding: 0px 0; text-align: center; }

/* 상세 모집 정보 섹션 */
.job-detail-section { padding: 50px 0; background-color: #FFF; }
.job-info-block { margin-bottom: 80px; }
.job-info-header { background-color: #000; padding: 20px 40px; display: flex; justify-content: space-between; align-items: center; margin-bottom: 40px; }
.job-info-title { font-family: var(--font-primary); font-size: 24px; font-weight: 700; color: #FFF; }
.job-info-content { display: flex; gap: 60px; align-items: stretch; }
.job-info-image { flex-shrink: 0; width: 400px; }
.job-info-image img { display: block; width: 100%; height: 100%; object-fit: cover; }
.job-info-table { flex: 1; border-top: none; display: flex; flex-direction: column; }
.job-info-row { display: flex; gap: 20px; flex: 1; }
.job-info-label { width: 331px; font-family: var(--font-primary); font-size: 24px; font-weight: 500; color: #333; flex-shrink: 0; padding: 25px 0; border-bottom: 1px solid #C4C4C4; }
.job-info-row:first-child .job-info-label,
.job-info-row:first-child .job-info-text { border-top: 1px solid #000; }
.job-info-text { flex: 1; font-family: var(--font-primary); font-size: 20px; font-weight: 400; line-height: 2.0; letter-spacing: -0.04em; color: #1E1E1E; padding: 20px 24px; border-bottom: 1px solid #C4C4C4; }

/* ============================================
 지원서 작성 페이지 스타일
 ============================================ */

/* 상단 설명 섹션 */
.apply-detail-section { padding: 50px 0; background-color: #FFF; }
.apply-description { max-width: 1720px; font-family: var(--font-primary); font-size: 18px; line-height: 1.6; color: #666; word-break: keep-all; }

/* 카테고리 그룹 */
.apply-category-group { margin-bottom: 80px; flex: 1; }
.apply-category-group .recruit-header { border-bottom: 1px solid #1E1E1E; padding-bottom: 15px; margin-bottom: 30px; }
.apply-categories-row { display: flex; gap: 40px; align-items: flex-start; }

/* 카드 그리드 */
.apply-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.apply-card { background: #FBFBFB; border: 1px solid #C4C4C4; padding: 40px; height: 260px; display: flex; flex-direction: column; justify-content: space-between; transition: all 0.3s ease; text-decoration: none; position: relative; }
.apply-card:hover { border-color: #000; transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.apply-card-title { font-family: var(--font-primary); font-size: 20px; font-weight: 700; color: #000; }
.apply-card-icon { align-self: flex-end; width: 32px; height: 32px; }
.apply-card-icon img { width: 100%; height: 100%; object-fit: contain; }

/* 모바일 지원서 작성 관련 */
.mo-only { display: none !important; }
.apply-mobile-toggle-btn { width: 100%; padding: 0 40px; background-color: #FBFBFB; color: #000; font-family: var(--font-primary); font-size: 20px; font-weight: 700; border: 1px solid #C4C4C4; cursor: pointer; display: flex; flex-direction: row; align-items: center; justify-content: space-between; transition: all 0.3s ease; height: 50px; }
.apply-mobile-toggle-btn::after { content: ''; display: inline-block; width: 16px; height: 16px; background-image: url('../images/icon/u_arrow-up-right.png'); background-size: contain; background-repeat: no-repeat; transition: transform 0.3s; transform: rotate(90deg); filter: invert(1); }
.apply-mobile-toggle-btn.active::after { transform: rotate(-90deg); }
.apply-mobile-toggle-btn:hover { border-color: #000; transform: translateY(-5px); box-shadow: 0 10px 30px rgba(0,0,0,0.05); }
.apply-mobile-form-wrapper { display: none; background-color: #FFF; padding: 20px 0; border-top: 1px solid #000; margin-bottom: 20px; }
.apply-mobile-form-wrapper.active { display: block; }
.apply-form.apply-mobile-form { grid-template-columns: 1fr; gap: 20px; }
.apply-form.apply-mobile-form .apply-form-group.full-width,
.apply-form.apply-mobile-form .apply-submit-btn { grid-column: span 1; width: 100%; max-width: none; }


/* ============================================
   혁신성(Innovation) 페이지 스타일
   ============================================ */

.innovation-page-main { min-height: 100vh; background-color: var(--color-bg-black); position: relative; }

.innovation-section { position: relative; width: 100%; }

.innovation-section-content { background-color: var(--color-text-white); position: relative; z-index: 1; will-change: transform; padding: 50px 50px; }

.innovation-content-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: stretch; margin-top: 12px; }

.innovation-list { height: 100%; padding: 0px 0; display: flex; flex-direction: column; gap: 0; box-sizing: border-box; grid-column: span 2; width: 100%; }

.innovation-list-item { flex: 1; padding-bottom: 15px; display: flex; align-items: center; gap: 4px; border-bottom: 1px solid var(--color-text-c4c4c4); margin-bottom: 16px; min-height: 0; }

.innovation-list-item-first { border-top: 2px solid var(--color-text-1e1e1e); padding-top: 20px; }

.innovation-list-text { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }

.innovation-list-text .text-t24,
.innovation-list-text .text-t25 { margin: 0; }

.innovation-forbes-section { margin-top: 50px; border: none; }

.innovation-forbes-text { border: none; }

.innovation-forbes-image { border: none; }

.innovation-forbes-inline-video { width: 100%; max-width: 660px; margin-left: auto; }
.innovation-forbes-youtube-iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; }

/* ============================================
   효율성(Efficiency) 페이지 스타일
   ============================================ */

.efficiency-page-main { min-height: 100vh; background-color: var(--color-bg-black); position: relative; }

.efficiency-section { position: relative; width: 100%; }

.efficiency-section-content { background-color: var(--color-text-white); position: relative; z-index: 1; will-change: transform; padding: 0px 0px; }

.efficiency-content-grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 80px; align-items: stretch; margin-top: 0px; margin-bottom: 100px; }

.efficiency-list { height: 100%; padding: 64px 0; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; }

.efficiency-list-item { padding-bottom: 20px; display: flex; gap: 40px; border-bottom: 1px solid var(--color-text-c4c4c4); margin-bottom: 8px; min-height: 0; }

.efficiency-list-item-first { padding-top: 10px; }

.efficiency-list-text { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }

.efficiency-list-text .text-t24,
.efficiency-list-text .text-t25 { margin: 0; }

.efficiency-content-image { height: 100%; padding: 4px 0; display: flex; align-items: center; justify-content: flex-end; box-sizing: border-box; }

.efficiency-content-image img { width: 100%; height: auto; max-height: 100%; object-fit: contain; }

/* ============================================
   뉴스실(Newsroom) 페이지 스타일
   ============================================ */

.news-page-main { min-height: 100vh; background-color: var(--color-bg-black); position: relative; }

.news-section { position: relative; width: 100%; }

.news-section-content { background-color: var(--color-text-white); position: relative; z-index: 1; will-change: transform; padding: 40px 0; }

.search-container { display: flex; justify-content: flex-end; margin-bottom: 22px; }

.search-box { position: relative; width: 400px; }

.search-input { width: 100%; padding: 12px 16px 12px 44px; border: 1px solid transparent; border-radius: 8px; font-family: var(--font-primary); font-size: 16px; background-color: #f5f5f5; color: var(--color-text-1e1e1e); box-sizing: border-box; transition: border-color var(--transition-base); }

.search-input:focus { outline: none; border-color: #0088C7; }

.search-input::placeholder { color: #9e9e9e; }

.search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; color: #555555; pointer-events: none; }

.news-list { border-top: 2px solid var(--color-text-1e1e1e); }

.news-item { display: flex; justify-content: space-between; align-items: center; padding: 30px 0; border-bottom: 1px solid var(--color-text-c4c4c4); transition: background-color var(--transition-base); text-decoration: none; cursor: pointer; }

.news-item:hover { background-color: #fafafa; }

.news-item-left { flex: 1; padding-right: 40px; }

.news-item-category { font-size: 14px; color: #888888; margin-bottom: 8px; font-weight: var(--font-weight-regular); }

.news-item-title { font-size: 20px; color: var(--color-text-1e1e1e); font-weight: var(--font-weight-medium); line-height: 1.4; }

.news-item-right { display: flex; align-items: center; gap: 30px; white-space: nowrap; }

.news-item-author { font-size: 16px; color: #555555; font-weight: var(--font-weight-regular); }

.news-item-date { font-size: 16px; color: #555555; font-weight: var(--font-weight-regular); }

.news-pagination { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 22px; }

.news-pagination-btn { all: unset; width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; color: #9e9e9e; cursor: pointer; transition: color var(--transition-base); }

.news-pagination-btn:hover { color: var(--color-text-1e1e1e); }

.news-pagination-number { font-size: 16px; color: var(--color-text-1e1e1e); font-weight: var(--font-weight-medium); }

.news-empty-state { display: none; border-bottom: 1px solid #1f1f1f; border-top: 1px solid #1f1f1f;  }

.news-empty-state-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 533px; color: #666; }

.news-empty-state-icon { width: 20px; height: 20px; margin-bottom: 10px; opacity: 0.7; }

.news-empty-state-text { font-size: 14px; line-height: 1.6; }

/* ============================================
   자료실(Reference Room) 페이지 스타일
   ============================================ */

.reference-page-main { min-height: 100vh; background-color: var(--color-bg-black); position: relative; }

.reference-section { position: relative; width: 100%; }

.reference-section-content { background-color: var(--color-text-white); position: relative; z-index: 1; will-change: transform; padding: 40px 0; }

.reference-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 30px; margin-top: 12px; }

.reference-item { display: flex; flex-direction: column; text-decoration: none; cursor: pointer; transition: transform var(--transition-base); }

.reference-item:hover { transform: translateY(-5px); }

.reference-item-image { width: 100%; aspect-ratio: 16 / 10; margin-bottom: 12px; overflow: hidden; background-color: #f5f5f5; }

.reference-item-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }

.reference-item:hover .reference-item-image img { transform: scale(1.05); }

.reference-item-category { font-size: 14px; color: #007bff; font-weight: var(--font-weight-regular); }

.reference-item-title { font-size: 16px; color: var(--color-text-1e1e1e); font-weight: var(--font-weight-medium); line-height: 1.5; margin-bottom: 4px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.reference-item-date { font-size: 14px; color: #888888; font-weight: var(--font-weight-regular); }

.reference-pagination { display: flex; justify-content: center; align-items: center; gap: 12px; margin-top: 30px; }

.reference-pagination-btn { all: unset; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; color: #9e9e9e; cursor: pointer; transition: all var(--transition-base); border-radius: 4px; }

.reference-pagination-btn:hover { color: var(--color-text-1e1e1e); background-color: #f5f5f5; }

.reference-pagination-number { font-size: 16px; color: #9e9e9e; cursor: pointer; padding: 0 8px; transition: color var(--transition-base); }

.reference-pagination-number:hover { color: var(--color-text-1e1e1e); }

.reference-pagination-number.active { color: #007bff; font-weight: var(--font-weight-bold); }

.reference-empty-state { display: none; border-bottom: 1px solid #1f1f1f; border-top: 1px solid #1f1f1f; }

.reference-empty-state-inner { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 533px; color: #666; }

.reference-empty-state-icon { width: 20px; height: 20px; margin-bottom: 10px; opacity: 0.7; }

.reference-empty-state-text { font-size: 14px; line-height: 1.6; }

/* ============================================
   사회공헌(Social) 페이지 스타일
   ============================================ */

.social-page-main { min-height: 100vh; background-color: var(--color-bg-black); position: relative; }

.social-section { position: relative; width: 100%; }

.social-section-content { background-color: var(--color-text-white); position: relative; z-index: 1; will-change: transform; padding: 50px 0; }

.social-activities-section { margin-bottom: 120px; }

.social-section-title { margin-bottom: 20px; }

.social-section-desc { margin-bottom: 30px; line-height: 1.6; }

.social-activity-pagination { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 40px; }

.social-activity-pagination-btn { all: unset; width: 20px; height: 20px; display: flex; align-items: center; justify-content: center; color: #9e9e9e; cursor: pointer; transition: color var(--transition-base); }

.social-activity-pagination-btn:hover { color: var(--color-text-1e1e1e); }

.social-activity-pagination-number { font-size: 16px; color: var(--color-text-1e1e1e); font-weight: var(--font-weight-medium); }

.social-esg-section { margin-top: 80px; }

.social-esg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 30px; }

.social-esg-card { background-color: #f9f9f9; padding: 40px 30px; display: flex; flex-direction: column; gap: 24px; min-height: 240px; border-top: 1px solid #e0e0e0; transition: transform var(--transition-base), background-color var(--transition-base); }

.social-esg-card:hover { transform: translateY(-5px); background-color: #f0f0f0; }

.social-esg-icon { width: 24px; height: 24px; color: var(--color-text-1e1e1e); }

.social-esg-icon img { width: 100%; height: 100%; object-fit: contain; }

.social-esg-text { font-size: 18px; line-height: 1.6; color: var(--color-text-1e1e1e); font-weight: var(--font-weight-medium); }

/* ============================================
   지원서 작성 모달 스타일
   ============================================ */

.apply-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; display: none; align-items: center; justify-content: center; background-color: rgba(0, 0, 0, 0.5); }

.apply-modal.active { display: flex; }

.apply-modal-container { background-color: #fff; width: 100%; max-width: 800px; padding: 60px; position: relative; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1); max-height: 90vh; overflow-y: auto; overscroll-behavior: contain; }

.apply-modal-close { position: absolute; top: 30px; right: 30px; background: none; border: none; cursor: pointer; color: #ccc; transition: color 0.3s; padding: 0; }

.apply-modal-close:hover { color: #000; }

.apply-modal-title { font-size: 32px; font-weight: 600; color: #000; margin-bottom: 40px; }

.apply-form { display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 40px; }

.apply-form-group { display: flex; flex-direction: column; gap: 12px; }

.apply-form-group-file { gap: 0px !important; }

.apply-form-group.full-width { grid-column: span 2; }

.apply-label { font-size: 16px; font-weight: 600; color: #000; }

.apply-label span { color: #ff0000; margin-left: 2px; }

.apply-input { width: 100%; border: none; border-bottom: 1px solid #e0e0e0; padding: 12px 0; font-size: 16px; font-family: var(--font-primary); color: #1e1e1e; outline: none; transition: border-color 0.3s; }

.apply-input:focus { border-color: #000; }

.apply-input::placeholder { color: #ccc; }

.apply-file-box { position: relative; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e0e0e0; padding: 12px 0; cursor: pointer; }

.apply-file-placeholder { font-size: 16px; color: #ccc; }

.apply-file-icon { color: #999; }

.apply-privacy-section { margin-top: 10px; }

.apply-privacy-box { width: 100%; height: 100px; background-color: #f9f9f9; border: 1px solid #eee; padding: 15px; font-size: 14px; color: #666; overflow-y: auto; margin-bottom: 25px; line-height: 1.6; word-break: keep-all; }

.apply-checkbox-group { display: flex; align-items: center; gap: 10px; cursor: pointer; }

.apply-checkbox { width: 20px; height: 20px; border: 1px solid #ccc; background-color: #fff; cursor: pointer; }

.apply-checkbox-label { font-size: 15px; color: #333; }

.apply-submit-btn { grid-column: span 2; background-color: #e0e0e0; color: #999; border: none; padding: 20px 40px; font-size: 18px; font-weight: 500; cursor: not-allowed; transition: all 0.3s; margin-top: 0px; width: 100%; max-width: 240px; margin-left: auto; margin-right: auto; }

.apply-submit-btn.enabled { background-color: #000; color: #fff; cursor: pointer; }

@media (max-width: 1200px) {
    .apply-modal { align-items: flex-start; overflow-y: auto; }
    .apply-modal-container { padding: 40px 20px; width: 100%; max-width: 100%; height: auto; min-height: 100%; }
    .apply-form { grid-template-columns: 1fr; gap: 20px; }
    .apply-form-group.full-width { grid-column: span 1; }
    .apply-modal-title { font-size: 24px; margin-bottom: 24px; }
}

/* ============================================
   뉴스 상세 페이지 스타일
   ============================================ */
.news-detail-view { width: 100%; margin-bottom: 60px; }

.news-detail-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 20px; }

.news-detail-category { font-size: 16px; color: #888; margin-bottom: 8px; }

.news-detail-title { font-size: 32px; font-weight: 600; color: #1e1e1e; word-break: keep-all; }

.news-detail-header-right { text-align: right; font-size: 16px; color: #888; }

.news-detail-author { margin-right: 15px; }

.news-detail-divider { width: 100%; height: 1px; background-color: #000; margin: 20px 0; }

.news-detail-content { padding: 40px 0; }

.news-detail-video { width: 100%; max-width: 800px; margin: 0 auto 40px; aspect-ratio: 16 / 9; }

.news-detail-video iframe { width: 100%; height: 100%; }

.news-detail-image { width: 100%; max-width: 800px; margin: 0 auto 40px; text-align: center; }

.news-detail-image img { max-width: 100%; height: auto; }

.news-detail-text { font-size: 18px; line-height: 1.6; color: #333; word-break: keep-all; }

.news-detail-navigation { display: flex; border-top: 1px solid #eee; border-bottom: 1px solid #eee; margin: 40px 0; }

.news-nav-item { flex: 1; padding: 25px; cursor: pointer; transition: background-color 0.3s; }

.news-nav-item:hover:not(.disabled) { background-color: #f9f9f9; }

.news-nav-item.disabled { cursor: default; opacity: 0.5; }

.news-nav-item.prev { border-right: 1px solid #eee; }

.news-nav-label { font-size: 14px; color: #888; margin-bottom: 8px; display: flex; align-items: center; gap: 5px; }

.news-nav-label svg { width: 16px; height: 16px; }

.news-nav-title { font-size: 16px; font-weight: 500; color: #1e1e1e; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.news-detail-footer { text-align: center; margin-top: 40px; }

.news-list-btn { background-color: #000; color: #fff; border: none; padding: 15px 50px; font-size: 16px; font-weight: 500; cursor: pointer; transition: opacity 0.3s; }

.news-list-btn:hover { opacity: 0.8; }


/* ============================================
   메인 하단 고정 레이아웃
   ============================================ */
.main2-section { position: relative; z-index: 30; background: #fff !important; }

.main2-inner {
  display: flex;
  justify-content: center;
  width: 100%;
  max-width: 1720px;
  margin: 0 auto;
  box-sizing: border-box;
}

.main2-content { position: relative; z-index: 2; background: #fff; width: 100%; max-width: 1720px; padding: 64px 100px 55px; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; box-sizing: border-box; }

/* PC: 좌(문구·건물·환영) / 우(트로피·캡션) 2열 · 상단 정렬; 모바일은 responsive에서 contents+order */
.main2-dual {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px 249px;
  width: 100%;
  align-items: start;
}

.main2-dual-stack--primary,
.main2-dual-stack--side {
  display: flex;
  flex-direction: column;
  gap: 28px;
  min-width: 0;
  width: 100%;
}

.main2-dual-eyebrow {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 32px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: #1e1e1e;
  text-align: left;
  width: 100%;
}

.main2-dual-eyebrow-light {
  font-weight: var(--font-weight-light);
}

.main2-dual-figure {
  margin: 0;
  width: 100%;
  overflow: hidden;
}

.main2-dual-figure img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.main2-dual-figure--01 {
  width: 770px;
  max-width: 100%;
  height: 590px;
}

.main2-dual-figure--01 img {
  width: 100%;
  height: 100%;
  aspect-ratio: unset;
  object-fit: cover;
}

.main2-dual-figure--02 {
  width: 100%;
  max-width: 100%;
  height: auto;
}

.main2-dual-figure--02 img {
  width: 480px;
  height: auto;
  display: block;
  object-fit: cover;
}

.main2-dual-welcome {
  margin: 55px 0 0;
  font-family: var(--font-primary);
  font-size: 65px;
  font-weight: var(--font-weight-light);
  line-height: 1.25;
  letter-spacing: -0.02em;
  color: #1e1e1e;
  text-align: left;
  width: 100%;
}

.main2-dual-welcome-strong {
  font-weight: var(--font-weight-semibold);
}

.main2-dual-caption-lead {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 32px;
  font-weight: var(--font-weight-semibold);
  line-height: 1.4;
  letter-spacing: -0.02em;
  color: #1e1e1e;
}

.main2-dual-caption {
  margin: 0;
  font-family: var(--font-primary);
  font-size: 32px;
  font-weight: var(--font-weight-medium);
  line-height: 1.45;
  letter-spacing: -0.02em;
  color: #2b2b2b;
}

.main2-dual-caption-em {
  font-weight: var(--font-weight-semibold);
}

.main2-dual-caption-stack {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  width: 100%;
  text-align: left;
}

.main2-top-row,
.main2-bottom-row { display: flex; gap: 40px; width: 100%; }

.main2-top-row { margin-bottom: 44px; }

.main2-col { flex: 1; min-width: 0; }

.main2-top-title { margin: 0 0 20px; font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: #1e1e1e; }

.main2-top-title span { font-size: 32px; font-weight: 300; }

.main2-image-wrap { width: 770px; height: 590px; max-width: 100%; overflow: hidden; }

.main2-image-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }

.main2-trophy-wrap { position: relative; }
.main2-trophy-wrap { width: 617px; height: 774px; max-width: 100%; }

.main2-forbes { position: absolute; right: 14px; bottom: 14px; width: 116px !important; height: auto !important; object-fit: contain !important; }

.main2-bottom-title { margin: 0; font-size: 65px; font-weight: 600; line-height: 1.08; letter-spacing: -0.02em; color: #1e1e1e; }

.main2-bottom-title span { font-size: 65px; font-weight: 300; }

.main2-bottom-heading { margin: 12px 0 8px; font-size: 54px; font-weight: 600; line-height: 1.2; letter-spacing: -0.02em; color: #1e1e1e; }

.main2-bottom-desc { margin: 0; font-size: 32px; font-weight: 600; line-height: 1.25; letter-spacing: -0.02em; color: #2b2b2b; }

.main2-bottom-desc span { font-size: 32px; font-weight: 300; }

.main3-inner { position: relative; z-index: 2; width: 100%; max-width: 1720px; margin: 0 auto; }

.main3-image { display: block; }

body:has(#main2.is-active) #yacht .section-bg-layer,
body:has(#main3.is-active) #yacht .section-bg-layer,
body:has(#main2.is-active) .fullscreen-bg-wrapper,
body:has(#main3.is-active) .fullscreen-bg-wrapper {
  display: none !important;
}

body:has(#main2.is-active) #yacht,
body:has(#main3.is-active) #yacht {
  display: none !important;
}

body:has(#main2.is-active) #table .section-content,
body:has(#main3.is-active) #table .section-content,
body:has(#main2.is-active) #table .table-content-area,
body:has(#main3.is-active) #table .table-content-area {
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* main3 cards + video modal */
.main3-section {
  background: #050505 url("../images/background/bg_page_movie.jpg") center center / cover no-repeat;
  min-height: auto;
  padding: 163px 0 111px;
}

.main3-inner {
  max-width: 1720px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.main3-header {
  text-align: center;
  color: #fff;
  margin-bottom: 93px;
}

.main3-title {
  margin: 0 0 10px;
  font-size: 50px;
  font-weight: 300;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

.main3-title span {
  font-size: 50px;
  font-weight: 600;
}

.main3-subtitle,
.main3-subtitle-en {
  margin: 0;
  font-size: 28px;
  font-weight: 300;
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.8);
}

.main3-subtitle span,
.main3-subtitle-en span {
  font-size: 28px;
  font-weight: 600;
}

.main3-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

/* 브라우저 렌더링 한계(Stacking Context)로 인해 애니메이션이 동작 중이거나 
   transform이 있으면 backdrop-filter가 배경까지 도달하지 못하는 버그를 방지하기 위해 
   카드 영역의 스크롤 애니메이션 강제 해제 */
.main3-cards.scroll-fade-in-delayed {
  opacity: 1 !important;
  transform: none !important;
  will-change: auto !important;
  animation: none !important;
}

.main3-card {
  all: unset;
  display: block;
  cursor: pointer;
  border: 1px solid rgba(255, 255, 255, 0.28);
  background: rgba(255, 255, 255, 0.03);
  position: relative;
}

.main3-card-image {
  width: 100%;
  aspect-ratio: 1.35 / 1;
  object-fit: cover;
  display: block;
  position: relative;
  z-index: 2; /* 렌더링 순서를 텍스트보다 늦게 그려지도록 하여 블러에 사진이 섞이지 않게 함 */
}

.main3-card-preview {
  width: 100%;
  aspect-ratio: 1.35 / 1;
  object-fit: cover;
  display: block;
  background: #000;
  position: relative;
  z-index: 2;
}

.main3-card-body {
  position: relative;
  z-index: 1; /* 사진보다 먼저 렌더링하여 뒷 배경만 깨끗하게 블러 처리 */
  padding: 30px;
  color: #fff;
  background: rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.main3-card-text {
  margin: 0 0 20px;
  font-size: 24px;
  font-weight: 300;
  line-height: 1.35;
  letter-spacing: -0.02em;
  color: #fff;
  opacity: 0.9;
}

.main3-card-text span {
  font-weight: 500;
}

.main3-card-link {
  font-size: 24px;
  font-weight: 500;
  line-height: 1;
}

.main3-card-arrow {
  position: absolute;
  right: 20px;
  bottom: 20px;
  width: 24px;
  height: 24px;
  object-fit: contain;
}

.main3-video-modal {
  position: fixed !important;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.7);
  z-index: 9999;
}

.main3-video-modal.is-open {
  display: flex;
}

.main3-video-dialog {
  position: relative;
  width: min(1200px, 90vw);
  max-height: calc(100vh - 48px);
}

.main3-video-close {
  position: absolute;
  right: -8px;
  top: -52px;
  width: 40px;
  height: 40px;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 44px;
  line-height: 1;
  cursor: pointer;
}

.main3-video-frame-wrap {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: visible;
}

.main3-video-frame-wrap iframe {
  width: 100%;
  height: 100%;
  display: block;
}

.main3-video-frame-wrap video {
  width: 100%;
  height: 100%;
  display: block;
}

/* ============================================
 Intro Scroll-Driven Override (요트/로켓/점프)
============================================ */
body.intro-scroll-driven .fixed-text-layer {
  display: flex !important;
}

body:has(#main2.is-active).intro-scroll-driven .fixed-text-layer,
body:has(#main3.is-active).intro-scroll-driven .fixed-text-layer {
  display: none !important;
}

body.intro-scroll-driven .first-page-layer {
  display: flex !important;
}

body.intro-scroll-driven:has(#table.is-active) .fixed-text-layer {
  display: none !important;
}

body.intro-scroll-driven .fixed-text-layer .scroll-text-item[data-scroll-step="1"] {
  opacity: var(--intro-step-1-opacity, 0) !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  font-size: var(--intro-step-1-size, 60px) !important;
  font-weight: 300 !important;
  color: #ffffff !important;
  transition: none !important;
  transition-delay: 0s !important;
  animation: none !important;
}

body.intro-scroll-driven .fixed-text-layer .scroll-text-item[data-scroll-step="2"] {
  opacity: var(--intro-step-2-opacity, 0) !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  font-size: var(--intro-step-2-size, 60px) !important;
  font-weight: 300 !important;
  color: #ffffff !important;
  transition: none !important;
  transition-delay: 0s !important;
  animation: none !important;
}

body.intro-scroll-driven .fixed-text-layer .scroll-text-item[data-scroll-step="3"] {
  opacity: var(--intro-step-3-opacity, 0) !important;
  visibility: visible !important;
  transform: translateY(0) !important;
  font-size: var(--intro-step-3-size, 60px) !important;
  font-weight: 300 !important;
  color: #ffffff !important;
  transition: none !important;
  transition-delay: 0s !important;
  animation: none !important;
}

body.intro-scroll-driven .fixed-text-layer .scroll-text-item[data-scroll-step] span {
  font-size: inherit !important;
  font-weight: 700 !important;
}


body.intro-scroll-driven #yacht .section-bg-layer {
  opacity: var(--intro-bg-yacht-opacity, 1) !important;
  visibility: visible !important;
  z-index: -4 !important;
  transition: none !important;
  transition-delay: 0s !important;
  animation: none !important;
}

body.intro-scroll-driven #rocket .section-bg-layer {
  opacity: var(--intro-bg-rocket-opacity, 0) !important;
  visibility: visible !important;
  z-index: -3 !important;
  transition: none !important;
  transition-delay: 0s !important;
  animation: none !important;
}

body.intro-scroll-driven #jump .section-bg-layer {
  opacity: var(--intro-bg-jump-opacity, 0) !important;
  visibility: visible !important;
  z-index: -2 !important;
  transition: none !important;
  transition-delay: 0s !important;
  animation: none !important;
}

/* ============================================
   지점 안내(Branch) 페이지 스타일
   ============================================ */

.branch-page-main { background-color: #FFF; position: relative; min-height: 100vh; }
.branch-section { background-color: #FFF; color: #000; padding: 50px 0; }

.branch-header { margin-bottom: 30px; }
.branch-header h2 { color: #000; font-weight: 400; margin-bottom: 20px; }
.branch-header p { color: #666; line-height: 1.6; word-break: keep-all; }

.branch-tabs {
  display: flex;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
  margin-bottom: 30px;
  overflow-x: auto;
  white-space: nowrap;
}

.branch-tabs::-webkit-scrollbar {
  display: none;
}

.branch-tab {
  flex: 1;
  text-align: center;
  padding: 20px 0;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  min-width: 120px;
}

.branch-tab.active {
  color: #0088C7;
  font-weight: 700;
}

.branch-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: #00adef;
}

.branch-mobile-select-wrapper {
  display: none;
}

.branch-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1400px) {
  .branch-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.branch-card {
  background-color: #FBFBFB;
  color: #000;
  padding: 30px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.branch-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.1);
  border-color: #000;
}

.branch-card-name {
  font-family: var(--font-primary);
  font-size: 20px;
  font-weight: 700;
  color: #000;
  margin-bottom: 8px;
}

.branch-card-address,
.branch-card-phone {
  font-family: var(--font-primary);
  font-size: 14px;
  color: #666;
  line-height: 1.5;
}


/* 대시(-) 항목 들여쓰기 */
.dash-item {
  margin: 0;
  padding-left: 1em;
  text-indent: -1em;
}


/* =============================================
   개인정보처리방침 페이지
   ============================================= */
.privacy-page-main {
  min-height: 100vh;
  background-color: var(--color-text-white);
  position: relative;
}

.privacy-page-main .sub-hero-header--simple {
  background-color: #1a2a4a;
  min-height: 200px;
}

.privacy-section {
  padding: 60px 0 80px;
}

.privacy-intro {
  font-size: 15px;
  line-height: 1.8;
  color: #444;
  margin-bottom: 48px;
  padding-bottom: 32px;
  border-bottom: 1px solid #e0e0e0;
}

.privacy-intro a {
  color: #1a4fa0;
  text-decoration: underline;
}

.privacy-article {
  margin-bottom: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid #eee;
}

.privacy-article:last-of-type {
  border-bottom: none;
}

.privacy-article-title {
  font-size: 18px;
  font-weight: 700;
  color: #1a2a4a;
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #1a4fa0;
  display: inline-block;
}

.privacy-article-body {
  font-size: 14px;
  line-height: 1.9;
  color: #444;
}

.privacy-article-body p {
  margin: 0 0 12px 0;
}

.privacy-sub-title {
  font-weight: 600;
  color: #1a2a4a;
  margin: 20px 0 8px 0 !important;
}

.privacy-list {
  list-style: none;
  padding: 0;
  margin: 0 0 16px 0;
}

.privacy-list li {
  position: relative;
  padding-left: 14px;
  margin-bottom: 6px;
  line-height: 1.8;
}

.privacy-list li::before {
  content: "·";
  position: absolute;
  left: 0;
  color: #1a4fa0;
  font-weight: 700;
}

.privacy-list--ordered {
  list-style: none;
  counter-reset: privacy-counter;
}

.privacy-list--ordered li {
  counter-increment: privacy-counter;
  padding-left: 24px;
}

.privacy-list--ordered li::before {
  content: counter(privacy-counter) ".";
  font-weight: 600;
  color: #444;
}

.privacy-list a,
.privacy-article-body a {
  color: #1a4fa0;
  text-decoration: underline;
}

/* 표 */
.privacy-table-wrap {
  overflow-x: auto;
  margin: 16px 0 20px 0;
  -webkit-overflow-scrolling: touch;
}

.privacy-table {
  width: 100%;
  min-width: 600px;
  border-collapse: collapse;
  font-size: 13px;
  line-height: 1.6;
}

.privacy-table th,
.privacy-table td {
  border: 1px solid #d0d0d0;
  padding: 10px 14px;
  text-align: left;
  vertical-align: top;
}

.privacy-table thead th {
  background-color: #1a2a4a;
  color: #fff;
  font-weight: 600;
  white-space: nowrap;
}

.privacy-table tbody tr:nth-child(even) {
  background-color: #f8f9fb;
}

/* 개인정보보호책임자 박스 */
.privacy-contact-box {
  background-color: #f4f7fb;
  border-left: 4px solid #1a4fa0;
  padding: 20px 24px;
  border-radius: 0 6px 6px 0;
  margin: 16px 0;
}

.privacy-contact-title {
  font-weight: 700;
  color: #1a2a4a;
  margin: 0 0 10px 0 !important;
  font-size: 15px;
}

/* 시행일 */
.privacy-enforcement-date {
  text-align: right;
  font-size: 14px;
  color: #666;
  padding-top: 24px;
  margin-top: 8px;
}