/* home, front-page 연결 css */
  body.home .site-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: 100%;
    z-index: 100;
  }

  body.admin-bar.home .site-header {
    top: 32px;
  }

  .three-section {
    --home-container-edge: max(1.5rem, calc((100vw - var(--container)) / 2));

    position: relative;
    width: 100%;
    height: 100vh;
    height: 100svh;
    min-height: 100vh;
    min-height: 100svh;
    background: #000;
    overflow: hidden;
    isolation: isolate;
  }

  /* ==========================
     좌우 도트 패턴 배경
  ========================== */

  .zyon-dot-pattern {
    position: absolute;
    top: 0;
    bottom: 0;
    z-index: 1;
    width: 44vw;
    min-width: 360px;
    pointer-events: none;

    /*
     * 화면 끝쪽 도트 최대 opacity 20%
     * 마스크를 통해 중앙 방향으로 7% → 0%까지 감소합니다.
     */
    background-image: radial-gradient(
      circle,
      rgba(255, 255, 255, 0.20) 0,
      rgba(255, 255, 255, 0.20) 1px,
      transparent 1.4px
    );
    background-size: 18px 18px;
    background-repeat: repeat;

    will-change: background-position;
  }

  .zyon-dot-pattern-left {
    left: 0;

    /* 화면 왼쪽은 선명하고 중앙으로 갈수록 0% */
    -webkit-mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 12%,
      rgba(0, 0, 0, 0.35) 42%,
      transparent 100%
    );

    mask-image: linear-gradient(
      to right,
      #000 0%,
      #000 12%,
      rgba(0, 0, 0, 0.35) 42%,
      transparent 100%
    );
  }

  .zyon-dot-pattern-right {
    right: 0;
    background-position-x: 9px;

    /* 화면 오른쪽은 선명하고 중앙으로 갈수록 0% */
    -webkit-mask-image: linear-gradient(
      to left,
      #000 0%,
      #000 12%,
      rgba(0, 0, 0, 0.68) 42%,
      transparent 100%
    );

    mask-image: linear-gradient(
      to left,
      #000 0%,
      #000 12%,
      rgba(0, 0, 0, 0.68) 42%,
      transparent 100%
    );
  }

  /* ========================== 랜덤 강조 도트 3~4개 ========================== */

  .zyon-dot-sparkles {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
    will-change: transform;
  }

  .zyon-dot-sparkle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: #fff;
    opacity: 0;
    box-shadow: 0 0 5px rgba(255, 255, 255, 0.32);
    transform: translate(-50%, -50%) scale(0.85);
    transition:
      opacity 1s linear,
      transform 1s ease-out;
  }

  .zyon-dot-sparkle.is-active {
    opacity: 0.5;
    transform: translate(-50%, -50%) scale(1);
  }

  .zyon-hero-title {
    position: absolute;
    left: 50%;
    top: 18vh;
    z-index: 40;
    margin: 0;
    /* left: 50% + translate(-50%, 0) 조합으로 PC 화면에서 수평 중앙 정렬합니다. */
    transform: translate(-50%, 0);
    color: #fff;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 700;
    line-height: 0.6;
    text-align: center;
    white-space: nowrap;
    pointer-events: none;
  }

  .zyon-title-line {
    display: block;
    margin: 0;
    padding: 0;
  }

  .zyon-title-line-02 {
    /* 1행과 2행 사이 간격 */
    margin-top: 0.7em;
  }

  .zyon-title-char {
    position: relative;
    display: inline-block;
    will-change: opacity;
  }

  .zyon-title-space {
    display: inline-block;
    width: 0.28em;
  }

  /* ========================== 첫 화면 Scroll 안내 ========================== */

  .zyon-scroll-guide {
    position: absolute;
    left: 50%;
    bottom: clamp(24px, 4.5vh, 52px);
    z-index: 45;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.82);
    opacity: 1;
    pointer-events: none;
    will-change: opacity, transform;
  }

  .zyon-scroll-guide__mouse {
    display: block;
    width: 36px;
    height: 48px;
  }

  .zyon-scroll-guide__text {
    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0.12em;
  }

  #radarCanvas {
    /* Three.js 캔버스와 레이더 SVG가 같은 .three-section을 기준 좌표계로 사용하도록 absolute inset으로 고정합니다. */
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
  }

  /* ========================== WebGL 실패 시 돔 대체 표현  ========================== */

  .zyon-dome-fallback {
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 2;
    display: none;
    width: min(620px, 68vw, 68vh);
    aspect-ratio: 2 / 1;
    transform: translate(-50%, -100%);
    transform-origin: 50% 100%;
    border: 1px solid rgba(3, 220, 92, 0.72);
    border-bottom: 0;
    border-radius: 50% 50% 0 0 / 100% 100% 0 0;
    background:
      radial-gradient(ellipse at 50% 100%, rgba(3, 220, 92, 0.06), transparent 62%),
      repeating-radial-gradient(ellipse at 50% 100%, transparent 0 15%, rgba(3, 220, 92, 0.16) 15.2% 15.5%, transparent 15.7% 30%);
    box-shadow:
      inset 0 0 46px rgba(3, 220, 92, 0.05),
      0 0 28px rgba(3, 220, 92, 0.08);
    pointer-events: none;
    opacity: 1;
  }

  .zyon-dome-fallback::before,
  .zyon-dome-fallback::after {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 1px;
    height: 100%;
    content: "";
    background: linear-gradient(to top, rgba(3, 220, 92, 0.36), rgba(3, 220, 92, 0.04));
    transform-origin: 50% 100%;
  }

  .zyon-dome-fallback::before { transform: rotate(35deg); }
  .zyon-dome-fallback::after { transform: rotate(-35deg); }

  .three-section.zyon-webgl-fallback .zyon-dome-fallback {
    display: block;
  }

  .three-section.zyon-webgl-fallback #radarCanvas {
    visibility: hidden;
  }


  /* ========================== 중앙 ZYON 네온 도트  ========================== */

  .zyon-ai-neon-visual {
    /* 초기값은 화면 중앙이지만 JavaScript가 Three.js 돔의 실제 바닥 중심을 화면 좌표로 변환해 left/top 값을 매 프레임 갱신합니다. */
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 7;

    /* 기존 최대 520px의 정확히 1/2 크기입니다. vw/vh 제한도 기존 값의 절반으로 함께 축소했습니다. */
    width: min(390px, 39vw, 43.5vh);
    aspect-ratio: 1 / 1;

    transform: translate(-50%, -50%);
    transform-origin: center;
    pointer-events: none;
    overflow: visible;

    /* 안쪽 Canvas가 앞뒤로 기울 때 입체 원근감이 보이도록 적용 */
    perspective: 900px;
  }

  .zyon-ai-neon-tilt {
    width: 100%;
    height: 100%;
    transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg);
    transform-origin: 50% 50%;
    transform-style: preserve-3d;
    backface-visibility: hidden;
    will-change: transform;
  }

  #zyonAiNeonCanvas {
    display: block;
    width: 100%;
    height: 100%;
    background: transparent;
    pointer-events: none;
    backface-visibility: hidden;
  }

  .zyon-radar-stage {
    /* 이 래퍼의 left/top/width/height는 JavaScript가 Three.js 돔의 실제 화면 투영값으로 매 프레임 갱신합니다. transform은 위치 전용이며 GSAP이 건드리지 않습니다. */
    position: absolute;
    left: 50%;
    top: 50%;
    z-index: 5;
    width: min(720px, 72vw, 72vh);
    height: min(720px, 72vw, 72vh);
    transform: translate(-50%, -50%);
    transform-origin: center;
    pointer-events: none;
    overflow: visible;
  }

  .radar-svg-overlay {
    /* SVG는 래퍼를 100% 채우며, 위치 transform을 갖지 않습니다. 따라서 GSAP scale이 실행돼도 중앙 정렬용 translate가 손상되지 않습니다. */
    display: block;
    width: 100%;
    height: 100%;
    aspect-ratio: 1 / 1;
    transform: scale(0.96);
    transform-origin: 50% 50%;
    opacity: 0;
    overflow: visible;
    pointer-events: none;
    will-change: opacity, transform;
  }

  /* 제공된 레이더 SVG 내부 애니메이션 안정화 */
  .zyon-radar-sweep,
  .zyon-radar-ticks,
  .zyon-radar-point {
    transform-box: view-box;
  }

  .zyon-radar-point {
    pointer-events: none;
  }

  .zyon-radar-mobile-stack {
    /* 데스크톱에서는 자식 요소가 기존 .three-section을 기준으로 배치됩니다. */
    display: contents;
  }

  .zyon-radar-card {
    position: absolute;
    z-index: 20;
    width: 320px;
    min-height: 140px;
    padding: 24px 24px;
    border-radius: 10px;
    background: rgba(58, 78, 70, 0.5);
    box-shadow: 0 18px 34px rgba(0, 0, 0, 0.32);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
  }

  .zyon-radar-card h3 {
    margin: 0 0 22px;
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: -0.04em;
  }

  .zyon-radar-card p {
    margin: 0;
    color: rgba(255, 255, 255, 0.8);
    font-size: 16px;
    line-height: 1.35;
  }

  .radar-card-01 {
    left: max(16vw, var(--home-container-edge));
    top: 25vh;
  }

  .radar-card-02 {
    left: max(16vw, var(--home-container-edge));
    top: 55vh;
  }

  .radar-card-03 {
    right: max(14vw, var(--home-container-edge));
    top: 25vh;
  }

  .radar-card-04 {
    right: max(14vw, var(--home-container-edge));
    top: 55vh;
  }

  .zyon-radar-cta {
    position: absolute;
    /* transform 없이 부모 기준 수평 중앙 정렬 */
    left: 0;
    right: 0;
    bottom: 10vh;
    z-index: 22;

    /* CTA 자체 너비만 차지 */
    width: max-content;
    margin-inline: auto;

    /* GSAP transform과 중앙정렬 완전 분리 */
    translate: none;
    transform: none;
    padding: 18px 42px;
    border: 0;
    border-radius: 4px;
    background: rgba(58, 78, 70, 0.5);
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    text-decoration: none;
    opacity: 0;
    pointer-events: auto;
    will-change: transform, opacity;
  }

  @media (max-width: 782px) {
    body.admin-bar.home .site-header {
      top: 46px;
    }
  }

  @media (max-width: 768px) {
    .three-section {
      /* 모바일 주소창의 열림/닫힘에 따라 높이가 계속 변하는 100dvh 대신
         안정적인 100svh를 사용해 ScrollTrigger refresh 튐을 줄입니다. */
      height: 100svh;
      min-height: 100svh;
    }

    .zyon-dot-pattern {
      width: 50vw;
      min-width: 0;
      background-size: 15px 15px;
    }

    .zyon-ai-neon-visual {
      width: min(58.5vw, 323px, 37.5svh);
    }

    .zyon-scroll-guide {
      bottom: 24px;
    }

    .zyon-scroll-guide__mouse {
      width: 32px;
      height: 43px;
    }

    .zyon-scroll-guide__text {
      font-size: 11px;
    }

    .zyon-hero-title {
      /* 화면 중앙보다 조금 위에 배치하되 헤더 바로 아래에 붙지 않도록 합니다. */
      top: clamp(150px, 27svh, 230px);
      z-index: 40;
      width: calc(100% - 32px);
      max-width: 44rem;
      transform: translate(-50%, -50%);
      font-size: clamp(30px, 8.4vw, 42px);
      line-height: 1.2;
      letter-spacing: -0.055em;
      white-space: normal;
      text-wrap: balance;
    }

    .zyon-title-line {
      width: 100%;
    }

    .zyon-title-line-02 {
      /* line-height 1.2 적용 시 두 행 사이가 과도하게 벌어지지 않도록 조정 */
      margin-top: 0.5em;
    }

    /*
     * 모바일 레이더 카드 영역은 별도의 내부 스크롤을 만들지 않습니다.
     * 카드가 들어 있는 pin 섹션 자체만 스크롤되도록 하여 pin 해제 시
     * 카드가 아래에서 다시 튀어나오는 것처럼 보이는 현상을 방지합니다.
     */
    .zyon-radar-mobile-stack {
      /*
       * 레이더 전환이 완료되는 시점에는 타이틀이 사라진 상태이므로
       * 카드 4개와 CTA 전체 묶음을 모바일 화면의 상하 중앙에 배치합니다.
       */
      position: absolute;
      left: 50%;
      top: 50%;
      z-index: 22;
      display: flex;
      flex-direction: column;
      gap: 8px;
      width: min(calc(100% - 32px), 30rem);
      box-sizing: border-box;
      padding: 0;
      transform: translate(-50%, -50%);
      overflow: visible;
      pointer-events: none;
    }

    .zyon-radar-card,
    .radar-card-01,
    .radar-card-02,
    .radar-card-03,
    .radar-card-04 {
      position: relative;
      left: auto;
      right: auto;
      top: auto;
      bottom: auto;
      flex: 0 0 auto;
      width: 100%;
      min-height: 0;
      box-sizing: border-box;
      padding: 11px 14px;
      border-radius: 8px;
      box-shadow: 0 10px 22px rgba(0, 0, 0, 0.24);
    }

    .zyon-radar-card h3 {
      margin-bottom: 5px;
      font-size: 14px;
      line-height: 1.15;
      letter-spacing: -0.025em;
    }

    .zyon-radar-card p {
      font-size: 12px;
      line-height: 1.38;
    }

    .zyon-radar-cta {
      position: relative;
      left: auto;
      right: auto;
      top: auto;
      bottom: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      align-self: center;
      flex: 0 0 auto;
      width: 100%;
      min-height: 40px;
      box-sizing: border-box;
      margin-inline: auto;

      /*
       * 데스크톱의 translate: -50% 값을 모바일에서 제거합니다.
       * GSAP은 transform의 y값만 제어하므로 버튼 중심 정렬이 유지됩니다.
       */
      translate: 0 0;
      transform: none;
      padding: 10px 14px;
      border: 0;
      border-radius: 8px;
      font-size: 12px;
      line-height: 1.2;
      text-align: center;
      pointer-events: auto;
    }
  }