/* common.css — 공통 스타일
 *
 * 디자인 토큰(CSS 커스텀 프로퍼티)은 tokens.css에 정의되어 있다.
 * 이 파일은 토큰을 사용하는 공통 스타일을 작성한다.
 */

/* =========================================
   Breakpoints (참고용 주석 — media query 내에서 직접 사용)
   출처: docs/design-system.md §6.2

   Large Desktop : 1440px 이상
   Desktop       : 1024px – 1439px
   Tablet        :  768px – 1023px
   Mobile        :  767px 이하
   ========================================= */

/* =========================================
   Base
   ========================================= */

body {
  font-family: var(--font-kr-sans);
  font-synthesis: none;
  padding-top: var(--site-header-h);
}

/* Shared Hero typography for About/Support and Press-family pages. */
.about-hero__title,
.press-hero__title {
  font-family: var(--font-en-serif);
  font-size: clamp(28px, calc(6.9401vw + 0.934px), 72px);
  font-weight: 400;
  line-height: 1.3;
  letter-spacing: normal;
}

.about-hero__body,
.press-hero__body {
  font-family: var(--font-kr-sans);
  font-size: clamp(14px, calc(0.4732vw + 12.155px), 17px);
  font-weight: 400;
  line-height: var(--lh-kr-body-1);
  letter-spacing: -0.01em;
}

@media (min-width: 768px) and (max-width: 1279px) {
  .about-hero__title,
  .press-hero__title { font-size: 54px; }

  .about-hero__body,
  .press-hero__body { font-size: 15px; }
}

/* =========================================
   Layout Variables
   --content-max    : 1760px (확정 — 1920px Figma 기준 콘텐츠 최대 폭)
   --page-gutter    : breakpoint별 반응형 구현 기준
                      0–767px     16px  (390px Figma 기준)
                      768–1439px  40px  (Tablet + Desktop — WHAT WE DO Figma 실측 기준)
                      1440–1919px 60px  (Large Desktop — WHAT WE DO Figma 실측 기준)
                      1920px 이상 80px  (1920px Figma 기준)
   --site-header-h  : fixed header 높이 — body padding-top 및 섹션 높이 계산에 사용
                      Mobile  : GNB 58px
                      Desktop : Banner 40px + GNB 70px = 110px
   ========================================= */

:root {
  --content-max:    1760px;
  --page-gutter:    clamp(16px, calc(-8.76px + 6.35vw), 40px); /* fluid 16→40px  390→768 */
  --site-header-h:  58px;
}

@media (min-width: 768px) {
  :root { --page-gutter: 40px; } /* flat 40px  768→1023 */
}

@media (min-width: 1024px) {
  :root {
    --site-header-h: 110px;
    --page-gutter: clamp(40px, calc(-9.23px + 4.808vw), 60px); /* fluid 40→60px  1024→1440 */
  }
}

@media (min-width: 1440px) {
  :root { --page-gutter: clamp(60px, 4.1667vw, 80px); } /* fluid 60→80px  1440→1920 */
}

@media (min-width: 1920px) {
  :root { --page-gutter: 80px; } /* fixed 80px  1920+ */
}

/* =========================================
   Layout Primitive — Container
   모든 viewport에서 동일한 primitive 동작
   width: min(viewport 가용폭, --content-max) + 수평 centering
   ========================================= */

.container {
  width: min(
    calc(100% - (var(--page-gutter) * 2)),
    var(--content-max)
  );
  margin-inline: auto;
}

/* =========================================
   공통 컴포넌트
   [TODO] 버튼, 태그, 칩 등 — 섹션 구현 시작 후 추가
   ========================================= */

/* =========================================
   접근성
   ========================================= */

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =========================================
   Site Header
   Figma: Desktop 138:1709 / Mobile 81:1180
   ========================================= */

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 150;
  transition: transform 0.3s ease;
  will-change: transform;
}

/* Scroll hide — JS가 추가/제거 */
.site-header.is-gnb-hidden {
  transform: translateY(-100%);
}

@media (prefers-reduced-motion: reduce) {
  .site-header {
    transition: none;
  }
}

/* =========================================
   Site Banner
   Figma: 138:1752
   Desktop 전용 — Mobile (1023px 이하): display:none
   ========================================= */

.site-banner {
  display: none;
}

/* =========================================
   GNB — Base (Mobile / 1023px 이하 기준)
   Figma: 223:3533
   ========================================= */

.gnb {
  background-color: var(--color-white);
}

/* GNB Bar */
.gnb__bar {
  position: relative;
  height: 58px;
  overflow: hidden;
}

/* Logo
   Mobile: left 18px / width 116.88px / height 20px
   Figma: 223:3545 */
.gnb__logo {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 0;
}

.gnb__logo img {
  width: 116.88px;
  height: 20px;
}

/* Desktop 주 메뉴 — Mobile에서 숨김 */
.gnb__nav {
  display: none;
}

/* Menu icon (button)
   Mobile: right 18px / 28×28px
   Figma: 223:3543 */
.gnb__menu {
  /* button reset */
  border: none;
  background: transparent;
  padding: 0;
  cursor: pointer;
  /* positioning */
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  line-height: 0;
}

.gnb__menu-icon {
  width: 28px;
  height: 28px;
}

/* Sub-nav panel — Mobile에서 숨김 */
.gnb__sub-panel {
  display: none;
}

/* =========================================
   GNB — Desktop (min-width: 1024px)
   Figma: 138:1761 / 138:1762
   ========================================= */

@media (min-width: 1024px) {

  /* -----------------------------------------
     Site Banner
     Figma: 138:1752 / h:40px / bg: welati-red
     ----------------------------------------- */

  .site-banner {
    display: block;
    position: relative;
    height: 40px;
    background-color: var(--color-welati-red);
    overflow: hidden;
  }

  .site-banner__inner {
    position: relative;
    height: 100%;
  }

  /* 텍스트 그룹 — viewport 정중앙 고정
     left: 50% + translateX(-50%)로 viewport 폭과 무관하게 center 유지
     기존 left: calc(33.33%+84px)는 1920px 전용 고정값이라 viewport 축소 시 우측 쏠림 발생 */
  .site-banner__text {
    position: absolute;
    left: 50%;
    top: 8px;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 20px;
    color: var(--color-white);
    white-space: nowrap;
    width: max-content;
  }

  /* "WELATI는" — Kakao Big Sans, 15px */
  .site-banner__label {
    font-family: var(--font-kr-sans);
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.15px;
  }

  /* 괄호 그룹 — gap 48px */
  .site-banner__tag {
    display: flex;
    align-items: center;
    gap: 48px;
  }

  /* "（" "）" — Kakao Big Sans, 18px */
  .site-banner__bracket {
    font-family: var(--font-kr-sans);
    font-size: 18px;
    line-height: 1.4;
    letter-spacing: -0.18px;
  }

  /* "정답보다, 나만의 표현을 발견합니다" — GyeonggiBatang, 15px */
  .site-banner__serif {
    font-family: var(--font-kr-serif);
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.15px;
  }

  /* Rolling copy — layout-shift-free 수직 롤링
     모든 item이 동일 grid cell에 쌓임 → 가장 긴 항목이 container width 결정
     overflow: hidden이 item의 미세한 전환 위치를 clip */
  .site-banner__rolling {
    display: grid;
    overflow: hidden;
  }

  .site-banner__rolling-item {
    grid-area: 1 / 1;
    font-family: var(--font-kr-serif);
    font-size: 15px;
    line-height: 1.4;
    letter-spacing: -0.15px;
    white-space: nowrap;
    opacity: 0;
    transform: translateY(4px);
    transition: transform 0.4s ease, opacity 0.4s ease;
  }

  .site-banner__rolling-item.is-active {
    opacity: 1;
    transform: translateY(0);
  }

  .site-banner__rolling-item.is-leaving {
    opacity: 0;
    transform: translateY(-4px);
  }

  /* 닫기 버튼
     Figma node: 138:1773 — 아이콘 right 28px / 시각 크기 20×20px
     hit area 40×40px: right 18px (= 아이콘 center 38px에서 20px 확장)
     아이콘은 button 내부 중앙에 배치 → 시각 위치 유지 */
  .site-banner__close {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: none;
    background: transparent;
    padding: 0;
    cursor: pointer;
  }

  /* -----------------------------------------
     GNB Bar
     Figma: 138:1762 / h:70px / border-bottom
     ----------------------------------------- */

  .gnb__bar {
    height: 70px;
    border-bottom: var(--width-1) solid var(--color-stone-200);
    /* sub-panel이 bar 아래로 overflow되도록 허용 */
    overflow: visible;
  }

  /* Logo
     Desktop: left 40px / width ~151.944px / height 26px
     Figma: 144:2575 */
  .gnb__logo {
    left: 40px;
  }

  .gnb__logo img {
    width: 151.944px;
    height: 26px;
  }

  /* -----------------------------------------
     주 메뉴
     Figma: 138:1763 / 수평 중앙 / gap 80px (1920px 기준)
     ----------------------------------------- */

  /* panel absolute containing block / stacking context: gnb__nav(z:1) > panel(z:auto) */
  .gnb { position: relative; z-index: 100; }

  .gnb__nav {
    display: block;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    height: 70px;
    z-index: 1;
  }

  .gnb__list {
    display: flex;
    align-items: stretch;
    height: 100%;
    /* 1920px: 80px / 1440px: 60px / 1280px: 53px / 1024px: 48px */
    gap: clamp(48px, 4.1667vw, 80px);
  }

  /* 각 항목이 stretch된 nav 높이를 채우면서 내부 링크는 수직 중앙
     position:relative — .gnb__sub의 absolute containing block */
  .gnb__item {
    position: relative;
    display: flex;
    align-items: center;
  }

  /* Navigation Button
     Figma: px 16px / py 4px
     font: kr-sans / 17px / lh 1.65 / tracking -0.17px / color stone-900 */
  .gnb__link {
    position: relative;
    display: flex;
    align-items: center;
    padding: 4px 16px;
    font-family: var(--font-kr-sans);
    font-size: 17px;
    line-height: 1.65;
    letter-spacing: -0.17px;
    color: var(--color-stone-900);
    white-space: nowrap;
  }

  /* Hover / focus / submenu open — text-width underline */
  .gnb__link::after {
    position: absolute;
    right: 16px;
    bottom: 0;
    left: 16px;
    height: var(--width-1);
    background: currentColor;
    content: "";
    pointer-events: none;
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 200ms ease;
  }

  .is-keyboard-nav .gnb__link:focus-visible::after {
    transform: scaleX(1);
  }

  @media (hover: hover) and (pointer: fine) {
    .gnb__link:hover::after {
      transform: scaleX(1);
    }
  }

  .gnb[data-gnb-active="about"] .gnb__item--about > .gnb__link::after,
  .gnb[data-gnb-active="programs"] .gnb__item--programs > .gnb__link::after,
  .gnb[data-gnb-active="media"] .gnb__item--media > .gnb__link::after,
  .gnb[data-gnb-active="support"] .gnb__item--support > .gnb__link::after {
    transform: scaleX(1);
  }

  /* Active / Current — underline remains visible */
  .gnb__link--active::after,
  .gnb__link[aria-current="page"]::after {
    transform: scaleX(1);
  }

  /* -----------------------------------------
     Menu icon
     Desktop: right 40px / top 15px / 40×40px
     Figma: 138:1772
     [TODO] 기능 확정 후 <button> 구조로 교체 예정
     ----------------------------------------- */

  .gnb__menu {
    right: 40px;
    top: 15px;
    transform: none;
  }

  .gnb__menu-icon {
    width: 40px;
    height: 40px;
  }

  /* -----------------------------------------
     Sub-nav 공통 패널
     Figma: 138:1775 / h: 0 → 128px
     visual background + layout height 역할만 담당 (콘텐츠 없음)
     JS data-gnb-active 속성으로 expand / collapse 제어
     ----------------------------------------- */

  .gnb__sub-panel {
    display: block;
    position: absolute;
    top: 70px;
    left: 0;
    width: 100%;
    height: 0;
    overflow: hidden;
    background-color: var(--color-white);
    visibility: hidden;
    /* text(200ms) 먼저 fade-out 후 panel collapse 시작 */
    transition:
      height     300ms ease 200ms,
      visibility 0ms   linear 500ms;
  }

  .gnb[data-gnb-active] .gnb__sub-panel {
    height: 136px;
    visibility: visible;
    transition:
      height     300ms ease,
      visibility 0ms   linear 0ms;
  }

  /* -----------------------------------------
     Sub-nav 그룹
     .gnb__item 내부 absolute — containing block: .gnb__item (position:relative)
     top: calc(100% + 24px) = item height(70px) + panel content margin(24px) = 94px from gnb top
     left: 16px = .gnb__link padding-left — CSS만으로 glyph 정렬
     ----------------------------------------- */

  .gnb__sub {
    position: absolute;
    top: calc(100% + 22px);
    left: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    visibility: hidden;
    opacity: 0;
    transform: translateY(6px);
    transition:
      opacity    200ms ease,
      transform  200ms ease,
      visibility 0ms   linear 200ms;
  }

  .gnb[data-gnb-active="about"]    .gnb__sub--about,
  .gnb[data-gnb-active="programs"] .gnb__sub--programs,
  .gnb[data-gnb-active="media"]    .gnb__sub--media,
  .gnb[data-gnb-active="support"]  .gnb__sub--support {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity    200ms ease  80ms,
      transform  200ms ease  80ms,
      visibility 0ms   linear 0ms;
  }

  /* Sub-nav 링크
     font: kr-sans / 16px / lh 1.6 / tracking -0.16px / color stone-400 */
  .gnb__sub-link {
    display: inline-block;
    font-family: var(--font-kr-sans);
    font-size: 16px;
    line-height: 1.6;
    letter-spacing: -0.16px;
    color: var(--color-stone-400);
    white-space: nowrap;
    transition: color 200ms ease;
  }

  .gnb__sub-link--active,
  .gnb__sub-link[aria-current="page"],
  .is-keyboard-nav .gnb__sub-link:focus-visible {
    color: var(--color-stone-900);
  }

  @media (hover: hover) and (pointer: fine) {
    .gnb__sub-link:hover {
      color: var(--color-stone-900);
    }
  }

}

/* =========================================
   Full Menu
   Figma: Desktop 138:1969 / Mobile 223:3615
   JS: common.js initFullMenu()
   ========================================= */

/* --- Base / hidden --- */

.full-menu {
  display: flex;
  position: fixed;
  inset: 0;
  z-index: 200;
  background-color: var(--color-welati-00);
  visibility: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 220ms ease-out, visibility 0ms linear 220ms;
}

.full-menu.is-open {
  visibility: visible;
  pointer-events: auto;
  opacity: 1;
  transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0ms linear 0ms;
}

/* Panel — Mobile: full screen light bg */
.full-menu__panel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  background-color: var(--color-welati-00);
  transform: translateY(-6px);
  transition: transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
}

.full-menu.is-open .full-menu__panel {
  transform: translateY(0);
}

@media (max-width: 1439px) {
  .full-menu__group {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 210ms ease-out, transform 210ms ease-out;
  }

  .full-menu.is-open .full-menu__group {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 420ms cubic-bezier(0.22, 1, 0.36, 1), transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .full-menu.is-open .full-menu__group:nth-child(1) { transition-delay: 0ms; }
  .full-menu.is-open .full-menu__group:nth-child(2) { transition-delay: 50ms; }
  .full-menu.is-open .full-menu__group:nth-child(3) { transition-delay: 100ms; }
  .full-menu.is-open .full-menu__group:nth-child(4) { transition-delay: 150ms; }
}

@media (max-width: 767px) {
  .full-menu__panel {
    opacity: 0;
    transition: opacity 300ms cubic-bezier(0.22, 1, 0.36, 1), transform 300ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  .full-menu.is-open .full-menu__panel {
    opacity: 1;
  }
}

/* Close button — Mobile: 28×28, top 15px, right 18px */
.full-menu__close {
  position: absolute;
  right: 18px;
  top: 15px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  z-index: 1;
}

.full-menu__close-icon {
  width: 28px;
  height: 28px;
  display: block;
}

/* Inner — Mobile: 358px, auto margin (flex centering), top padding clears close btn */
.full-menu__inner {
  width: 358px;
  max-width: calc(100% - var(--layout-padding-sm) * 2);
  margin: auto;
  padding: 58px 0 var(--layout-padding-xl);
  display: flex;
  flex-direction: column;
  gap: var(--layout-padding-4xl); /* 80px — sections ~ footer 간격 */
}

/* Sections list */
.full-menu__sections {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-padding-2xl); /* 48px — 그룹 간 간격 */
}

/* Menu group — Mobile: center, 8px title~sub 간격 */
.full-menu__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-padding-xs); /* 8px */
  width: 100%;
}

/* English title — Mobile: 32px, welati-red */
.full-menu__title {
  font-family: var(--font-en-serif);
  font-size: 32px;
  line-height: 1;
  color: var(--color-welati-red);
  text-align: center;
}

/* Sub-items row — Mobile: 14px, 16px gap, stone-400 */
.full-menu__sub {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--layout-padding-sm); /* 16px */
  font-family: var(--font-kr-sans);
  font-size: var(--fs-kr-label); /* 14px */
  line-height: 1.5;
  letter-spacing: -0.14px;
  color: var(--color-stone-400);
  white-space: nowrap;
}

.full-menu__sub-link,
.full-menu__sep {
  color: inherit;
}

.full-menu__sub-link {
  position: relative;
  display: inline-block;
}

.full-menu__sub-link::after {
  position: absolute;
  bottom: 1px;
  left: 0;
  width: 100%;
  height: var(--width-1);
  background: currentColor;
  content: "";
  pointer-events: none;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.is-keyboard-nav .full-menu__sub-link:focus-visible {
  text-decoration: none;
}

.is-keyboard-nav .full-menu__sub-link:focus-visible::after {
  transform: scaleX(1);
}

@media (hover: hover) and (pointer: fine) {
  .full-menu__sub-link:hover::after {
    transform: scaleX(1);
  }
}

/* Footer */
.full-menu__footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--layout-padding-xl); /* 40px — divider ~ links 간격 */
  width: 100%;
}

.full-menu__divider {
  border: none;
  border-top: var(--width-1) solid var(--color-stone-200);
  width: 100%;
  margin: 0;
}

.full-menu__footer-links {
  display: flex;
  align-items: center;
  gap: var(--layout-padding-lg); /* 32px */
}

.full-menu__footer-link {
  display: flex;
  align-items: center;
  gap: var(--space-xs); /* 8px */
  font-family: var(--font-kr-sans);
  font-size: var(--fs-kr-label); /* 14px — mobile */
  line-height: 1.6;
  letter-spacing: -0.14px;
  color: var(--color-welati-80);
}

.full-menu__footer-icon {
  width: 16px;
  height: 16px;
  display: block;
  flex-shrink: 0;
}

/* --- Tablet medium (768px ~ 1023px) --- */

@media (min-width: 768px) {

  /* Close button — 40×40, top 40px, right 40px */
  .full-menu__close {
    right: 40px;
    top: 40px;
    width: 40px;
    height: 40px;
  }

  .full-menu__close-icon {
    width: 40px;
    height: 40px;
  }

  /* Inner — 688px centered */
  .full-menu__inner {
    width: 688px;
  }

  /* Sections gap — 80px */
  .full-menu__sections {
    gap: var(--layout-padding-4xl); /* 80px */
  }

  /* Group — 16px title~sub gap */
  .full-menu__group {
    gap: var(--layout-padding-sm); /* 16px */
  }

  /* Title — 48px (red inherited from base) */
  .full-menu__title {
    font-size: 48px;
  }

  /* Sub — 16px, stone-500, nowrap */
  .full-menu__sub {
    font-size: var(--fs-kr-body-2); /* 16px */
    letter-spacing: -0.16px;
    color: var(--color-stone-500);
    flex-wrap: nowrap;
  }

  /* Footer links — 16px, 20px icons */
  .full-menu__footer-link {
    font-size: var(--fs-kr-body-2); /* 16px */
    letter-spacing: -0.16px;
  }

  .full-menu__footer-icon {
    width: 20px;
    height: 20px;
  }

}

/* --- Tablet large (1024px ~ 1439px) — full-screen --- */

@media (min-width: 1024px) {

  /* Inner — 944px centered (full-screen 유지) */
  .full-menu__inner {
    width: 944px;
  }

  /* Title — 58px (red, center 모두 inherited from @768/base) */
  .full-menu__title {
    font-size: 58px;
  }

  /* Sub — 20px, 24px gap (stone-500, center inherited from @768) */
  .full-menu__sub {
    font-size: var(--fs-kr-h4); /* 20px */
    letter-spacing: -0.2px;
    gap: var(--layout-padding-md); /* 24px */
  }

}

/* --- Desktop (1440px+) — right-panel --- */

@media (min-width: 1440px) {

  /* Dark overlay — panel 왼쪽 영역이 어두워짐 / open-close animation */
  .full-menu {
    background-color: var(--color-black-50);
    display: flex;
    visibility: hidden;
    pointer-events: none;
    opacity: 0;
    transition: opacity 260ms ease, visibility 0ms linear 260ms;
  }

  .full-menu.is-open {
    visibility: visible;
    pointer-events: auto;
    opacity: 1;
    transition: opacity 340ms ease, visibility 0ms linear 0ms;
  }

  /* Panel — right-anchored, 1080px fixed */
  .full-menu__panel {
    position: absolute;
    right: 0;
    top: 0;
    width: 1080px;
    height: 100%;
    align-items: flex-start;
    transform: translateX(24px);
    transition: transform 260ms ease;
  }

  .full-menu.is-open .full-menu__panel {
    transform: translateX(0);
    transition: transform 340ms cubic-bezier(0.22, 1, 0.36, 1);
  }

  /* Inner — panel 폭 전체, 80px padding (content 920px) */
  .full-menu__inner {
    width: 100%;
    max-width: none;
    padding: 80px;
  }

  /* Sections — left-aligned, 48px gap */
  .full-menu__sections {
    align-items: flex-start;
    gap: var(--layout-padding-2xl); /* 48px */
  }

  /* Group — left-aligned, 4px title~sub gap */
  .full-menu__group {
    align-items: flex-start;
    gap: var(--layout-padding-2xs); /* 4px */
  }

  /* Title — stone-400 default, red on hover */
  .full-menu__title {
    text-align: left;
    color: var(--color-stone-400);
    transition: color 300ms ease;
  }

  .full-menu__group:hover .full-menu__title,
  .full-menu__group:focus-within .full-menu__title {
    color: var(--color-welati-red);
  }

  /* Sub — stone-400 default, stone-800 on group hover, left-aligned */
  .full-menu__sub {
    justify-content: flex-start;
    color: var(--color-stone-400);
    transition: color 300ms ease;
  }

  .full-menu__group:hover .full-menu__sub,
  .full-menu__group:focus-within .full-menu__sub {
    color: var(--color-stone-800);
  }

  /* Footer — left-aligned */
  .full-menu__footer {
    align-items: flex-start;
  }

}

/* =========================================
   prefers-reduced-motion
   - rolling animation 중지 — 첫 문구만 고정 표시 / JS도 timer 미실행 (중복 대응)
   - sub-nav expand/collapse 즉시 전환 (기능 유지, motion 제거)
   ========================================= */

@media (prefers-reduced-motion: reduce) {
  .full-menu__sub-link::after {
    transition: none;
  }

  .site-banner__rolling-item {
    transition: none;
  }

  .gnb__sub-panel {
    transition: none;
  }

  /* transition:none → visibility/opacity 즉시 전환, transform 고정 */
  .gnb__sub {
    transition: none;
    transform: translateY(0);
  }

  /* Full Menu open/close — 즉시 최종 상태 */
  .full-menu {
    transition: none;
  }

  .full-menu__panel {
    transition: none;
    transform: translateX(0);
    opacity: 1;
  }

  .full-menu__group {
    opacity: 1;
    transform: none;
    transition: none;
  }
}