/* ══ 공유 헤더 (243:373 · 1920×94 · 투명 오버레이 · px100 py20) ═══════════ */
@layer components {
  .hd { position: fixed; inset-block-start: 0; inset-inline: 0; z-index: 100; }
  .hd__bar {
    display: flex; align-items: center; justify-content: space-between;
    block-size: var(--hd-h);
    padding-inline: clamp(20px, 5.2083vw, 100px);   /* 시안 px 100 */
    /* 시안 배경 없음(투명 오버레이). 스크롤 도킹 시에만 판이 생긴다(아래 is-docked). */
  }
  .hd.is-docked .hd__bar { background: rgba(19, 32, 51, 0.9); backdrop-filter: blur(8px); }
  .hd.is-docked { transition: background-color .3s var(--ease-out-quart); }

  .hd__logo { display: inline-flex; }
  .hd__logo-img { inline-size: clamp(150px, 12.2917vw, 236px); block-size: auto; aspect-ratio: 236 / 54; object-fit: contain; }

  .hd__menu { display: flex; gap: var(--sp-90); }
  .hd__link {
    position: relative;
    font-weight: 600; font-size: var(--fs-20); line-height: 1; color: var(--df-white);
    padding-block: 6px;   /* 히트 확장(시각 불변) */
  }
  /* 활성 표시 — 현재 페이지는 색상만(밑줄은 호버 전용) */
  .hd__link.active { color: var(--df-cyan); }

  .hd__util { display: flex; align-items: center; gap: var(--sp-20); }
  .hd__lang { position: relative; }
  .hd__lang-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: none; border: 0; padding: 0; cursor: pointer;
    color: var(--df-white); font-family: inherit; font-size: var(--fs-16);
    padding-block: 6px;   /* hd__link 과 동일 — 아이콘·텍스트 전체 히트 확장 */
  }
  .hd__lang-ic,
  .hd__lang-twrap,
  .hd__lang-t {
    pointer-events: none; /* hover·클릭을 버튼 단위로 통일 */
  }
  .hd__lang-twrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    block-size: 20px;
    line-height: 1;
  }
  .hd__lang-t { display: block; line-height: 1; }
  .hd__lang-twrap > .hd__link-ln {
    position: absolute;
    inset-inline: 0;
    inset-block-start: calc(100% + 4px);
    margin-block-start: 0;
    transition: transform 0.55s cubic-bezier(0.19, 1, 0.22, 1);
  }
  .hd__lang-ic { display: block; inline-size: 20px; block-size: 20px; object-fit: contain; flex-shrink: 0; }
  .hd__lang-menu {
    position: absolute; inset-block-start: calc(100% + 8px); inset-inline-start: 50%;
    translate: -50% 0; z-index: 110;
    min-inline-size: 88px; margin: 0; padding: 6px 0; list-style: none;
    background: rgba(19, 32, 51, 0.95); border: 1px solid var(--df-line-w20);
    backdrop-filter: blur(8px);
  }
  .hd__lang-menu[hidden] { display: none; }
  .hd__lang-opt {
    display: block; padding: 8px 16px;
    font-weight: 400; font-size: var(--fs-16); color: var(--df-white); text-decoration: none;
    text-align: center;
  }
  .hd__lang-opt:hover { color: var(--df-cyan); background: rgba(255, 255, 255, 0.04); }
  .hd__lang-opt.is-current { color: var(--df-cyan); pointer-events: none; }

  .hd__burger { display: none; }

  @media (width < 1024px) {
    .hd__gnb { display: none; }
    .hd__util { gap: var(--sp-30); }
    .hd__lang { display: flex; align-items: center; }
    .hd__lang-btn { min-block-size: 44px; }
    .hd__burger {
      display: grid; place-items: center;
      inline-size: 24px; block-size: 44px; border-radius: var(--r-4);
    }
    .hd__burger-l, .hd__burger-l::before, .hd__burger-l::after {
      content: ""; display: block; inline-size: 22px; block-size: 2px;
      background: var(--df-white); position: relative;
    }
    .hd__burger-l::before { position: absolute; inset-block-start: -7px; }
    .hd__burger-l::after  { position: absolute; inset-block-start: 7px; }

    .hd__panel {
      position: fixed; inset: 0; z-index: 200;
      display: grid;
      grid-template-columns: 1fr min(300px, 100%);
      grid-template-rows: auto 1fr;
      visibility: hidden; pointer-events: none;
      transition: visibility 0s linear var(--dur-base);
    }
    .hd__panel::before {
      content: "";
      position: absolute; inset: 0; z-index: 0;
      background: rgba(19, 32, 51, 0.35);
      backdrop-filter: blur(3px);
      -webkit-backdrop-filter: blur(3px);
      opacity: 0;
      transition: opacity var(--dur-base) var(--ease-out-quart);
    }
    .hd__panel[data-open] {
      visibility: visible; pointer-events: auto;
      transition: visibility 0s linear 0s;
    }
    .hd__panel[data-open]::before { opacity: 1; }
    .hd__panel-top {
      position: relative; z-index: 1;
      grid-column: 2; grid-row: 1;
      display: flex; justify-content: flex-end; align-items: center;
      block-size: var(--hd-h); padding-inline-end: var(--sp-20);
      background: #2b3d59;
      border-left: 4px solid var(--df-dim);
      transform: translateX(100%);
      transition: transform var(--dur-base) var(--ease-out-quart);
    }
    .hd__panel > nav {
      position: relative; z-index: 1;
      grid-column: 2; grid-row: 2;
      background: #2b3d59;
      border-left: 4px solid var(--df-dim);
      overflow-y: auto;
      transform: translateX(100%);
      transition: transform var(--dur-base) var(--ease-out-quart);
    }
    .hd__panel[data-open] .hd__panel-top,
    .hd__panel[data-open] > nav { transform: translateX(0); }
    .hd__close { inline-size: 44px; block-size: 44px; color: var(--df-white); font-size: 22px; }
    .hd__panel-menu { display: grid; gap: 4px; padding: var(--sp-20); }
    .hd__panel-menu li {
      opacity: 0;
      transform: translateX(-24px);
    }
    .hd__panel-menu.is-enter li {
      animation: hd-panel-item-in 0.55s var(--ease-out-quart) forwards;
    }
    .hd__panel-menu.is-enter li:nth-child(1) { animation-delay: 0.06s; }
    .hd__panel-menu.is-enter li:nth-child(2) { animation-delay: 0.12s; }
    .hd__panel-menu.is-enter li:nth-child(3) { animation-delay: 0.18s; }
    .hd__panel-menu.is-enter li:nth-child(4) { animation-delay: 0.24s; }
    .hd__panel-menu.is-enter li:nth-child(5) { animation-delay: 0.30s; }
    .hd__panel-menu a {
      display: block; padding: 14px 16px; border-radius: var(--r-6);
      color: var(--df-white); font-size: var(--fs-24); font-weight: 600;
    }
    .hd__panel-menu a.active { color: var(--df-cyan); }
  }
  @media (width < 1024px) and (prefers-reduced-motion: reduce) {
    .hd__panel-menu li {
      opacity: 1;
      transform: none;
      animation: none !important;
    }
  }
  @media (width >= 1024px) {
    .hd__panel { display: none; }
    .hd__lang-t { translate: 0 1px; }
  }
}

/* cursor-magnet-underline 타깃 — 엔진은 [data-motion-target] 밑줄 노드가 **이미 있어야** 만다(R2).
   정지 상태 scaleX(0) = 시안(밑줄 없음) 그대로. */
@layer components {
  .hd__link { display: inline-flex; flex-direction: column; }
  .hd__link-ln {
    display: block; block-size: 2px; inline-size: 100%;
    background: currentColor; margin-block-start: 4px;
    transform: scaleX(0);           /* 축약형 — 계약 P44 안전 */
  }
  @media (hover: hover) and (pointer: fine) {
    .hd__lang-btn:hover .hd__link-ln,
    .hd__lang-btn:focus-visible .hd__link-ln {
      transform: scaleX(1);
      transform-origin: center center;
    }
  }
}

@keyframes hd-panel-item-in {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}