
/* === FORCE: Globe LEFT / Title RIGHT (works with your current markup) === */
@media (min-width: 981px){
  /* 1) Make the first hero wrap a two-column grid using explicit areas */
  section.hero#top > .wrap{
    display:grid !important;
    grid-template-areas: "globe title" !important;
    grid-template-columns: minmax(420px, 46vw) 1fr !important;
    align-items:center !important;
    gap: clamp(36px, 4vw, 60px) !important;
    padding: 10px 0 96px !important;
  }

  /* 2) Map existing blocks to areas (no HTML change) */
  section.hero#top .globe-wrap.globe-desktop{ grid-area: globe !important; justify-self:start !important; max-width: 640px; width:100%; }
  section.hero#top .intro-content{ grid-area: title !important; max-width: 640px; }

  /* 3) Hide mobile globe on desktop */
  section.hero#top .globe-mobile{ display:none !important; }
}

/* Mobile: stack vertically, prevent overflow */
@media (max-width: 980px){
  section.hero#top > .wrap{
    display:block !important;
    padding: 80px 0px 60px !important;
    overflow:hidden !important;
  }
  section.hero#top .globe-desktop{ display:none !important; }
  section.hero#top .globe-mobile{ display:block !important; width:100%; max-width:340px; margin:0 auto; }
  section.hero#top .globe-mobile img.globe-core{ width:100%; height:auto; display:block; object-fit:contain; }
}


@media (min-width: 981px){
  section.hero#top > .wrap {
    grid-template-columns: 1.0fr 1.3fr !important; /* ← 기존 46vw:1fr보다 오른쪽 더 넓게 */
    gap: clamp(40px, 3vw, 50px) !important;        /* 간격 살짝 확대 */
  }

  section.hero#top .globe-wrap.globe-desktop {
    max-width: 840px; /* 지구본은 살짝 줄여서 균형 */
  }

  section.hero#top .intro-content {
    max-width: 940px; /* 오른쪽 텍스트 영역 여유 있게 */
  }
}


/* === 2025 / DIGITAL INNOVATION INSIGHT 줄바꿈 === */
.title-top {
  display: flex;
  flex-direction: column; /* 세로 쌓기 */
  align-items: flex-start; /* 왼쪽 정렬 */
  line-height: 1.15;
  gap: 6px; /* 줄 사이 간격 */
}

.title-top .year {
  display: block;
  font-size: clamp(2rem, 6vw, 3.8rem);
  line-height: 1.05;
}

.title-top .eng {
  display: block;
  font-weight: 700;
  font-size: clamp(1rem, 2.2vw, 2.4rem);
  color: #00e7ff;
  letter-spacing: 0.06em;
}


/* === 지구본 크기 확대 === */
@media (min-width: 981px){
  section.hero#top .globe-wrap.globe-desktop {
    max-width: 840px !important; /* 기존 640px → 760px */
  }
}

@media (max-width: 980px){
  section.hero#top .globe-mobile {
    max-width: 380px !important; /* 기존 340px → 420px */
  }
}


/* === HERO layer order hardening === */
section.hero#top { position: relative; }

section.hero#top .hero-bg{
  position: absolute; inset: 0;
  z-index: 0 !important;     /* 배경은 항상 맨 뒤 */
  pointer-events: none;
}

section.hero#top > .wrap{
  position: relative;
  z-index: 1;                /* 콘텐츠가 배경 위 */
  overflow: visible;         /* 데스크탑에서 지구본이 밖으로 퍼지도록 */
}

section.hero#top .globe-wrap.globe-desktop{
  position: relative;
  z-index: 2;                /* 지구본 박스 */
  overflow: visible !important;
}

section.hero#top .globe-wrap .gflare-layer,
section.hero#top .globe-wrap .globe-glow{
  z-index: 3;                /* 플레어/글로우를 최상위로 */
}