/* ============================================================
   DI Solution — 인터랙션 전용 (레이아웃 변경 없음)
   기존 common.css 스타일을 유지하면서 애니메이션/전환만 추가
   ============================================================ */

/* ── 전환 타이밍 변수 ── */
:root {
  --ds-ease:        cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ds-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ds-dur-fast:    0.15s;
  --ds-dur-base:    0.25s;
  --ds-dur-slow:    0.4s;
}

/* ── 부드러운 스크롤 ── */
html {
  scroll-behavior: smooth;
  -webkit-font-smoothing: antialiased;
}

/* ── 헤더: 스크롤 시 그림자만 추가 (기존 스타일 유지) ── */
header {
  transition: box-shadow var(--ds-dur-base) var(--ds-ease);
}
header.scrolled {
  box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10);
}

/* ── GNB 링크 전환 효과 ── */
header .head-cont #gnb ul.depth1 > li > a.dep1 {
  transition: color var(--ds-dur-fast) var(--ds-ease);
}

/* depth2 드롭다운 — 기존 display 방식 유지하면서 fade 추가 */
header .head-cont #gnb ul.depth1 > li ul.depth2 li a {
  transition:
    background var(--ds-dur-fast) var(--ds-ease),
    color      var(--ds-dur-fast) var(--ds-ease);
}

/* ── 버튼: hover 시 살짝 올라오는 효과 ── */
.btn {
  transition:
    background    var(--ds-dur-fast) var(--ds-ease),
    color         var(--ds-dur-fast) var(--ds-ease),
    border-color  var(--ds-dur-fast) var(--ds-ease),
    box-shadow    var(--ds-dur-fast) var(--ds-ease),
    transform     var(--ds-dur-fast) var(--ds-ease-spring);
}
.btn:hover  { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }

/* ── 링크 전환 ── */
a {
  transition: color var(--ds-dur-fast) var(--ds-ease),
              opacity var(--ds-dur-fast) var(--ds-ease);
}

/* ── 아이콘 리스트 카드 hover ── */
.icon-lists .lists li .inner {
  transition:
    box-shadow var(--ds-dur-base) var(--ds-ease),
    transform  var(--ds-dur-base) var(--ds-ease);
}
.icon-lists .lists li:hover .inner {
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.10);
  transform: translateY(-4px);
}

/* ── 인뷰 스크롤 진입 애니메이션 (JS가 in-view 클래스를 추가할 때만 작동) ── */
.icon-lists .lists li.in-view-ready {
  opacity: 0;
  transform: translateY(20px);
  transition:
    opacity   0.5s var(--ds-ease),
    transform 0.5s var(--ds-ease);
}
.icon-lists .lists li.in-view {
  opacity: 1;
  transform: translateY(0);
}
.icon-lists .lists li.in-view-ready:nth-child(1) { transition-delay: 0s; }
.icon-lists .lists li.in-view-ready:nth-child(2) { transition-delay: 0.1s; }
.icon-lists .lists li.in-view-ready:nth-child(3) { transition-delay: 0.2s; }
.icon-lists .lists li.in-view-ready:nth-child(4) { transition-delay: 0.3s; }

/* ── section hover-link-lists 카드 hover ── */
.hover-link-lists li a {
  transition:
    transform  var(--ds-dur-base) var(--ds-ease),
    box-shadow var(--ds-dur-base) var(--ds-ease);
}
.hover-link-lists li a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

/* ── CI 슬라이더 이미지 hover ── */
.ci-slider .swiper-slide img {
  transition:
    filter    var(--ds-dur-base) var(--ds-ease),
    transform var(--ds-dur-base) var(--ds-ease);
  filter: grayscale(20%);
}
.ci-slider .swiper-slide:hover img {
  filter: grayscale(0%);
  transform: scale(1.04);
}

/* ── 테이블 행 hover ── */
.tbl-wrap table tbody tr {
  transition: background var(--ds-dur-fast) var(--ds-ease);
}

/* ── 폼 인풋 focus 효과 ── */
.form-control {
  transition:
    border-color var(--ds-dur-fast) var(--ds-ease),
    box-shadow   var(--ds-dur-fast) var(--ds-ease);
}
.form-control:focus {
  box-shadow: 0 0 0 3px rgba(15, 66, 142, 0.12);
  outline: none;
}

/* ── data-reveal: 스크롤 인뷰 진입 효과 ── */
[data-reveal] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   0.55s var(--ds-ease),
    transform 0.55s var(--ds-ease);
}
[data-reveal].is-visible {
  opacity: 1;
  transform: none;
}
[data-reveal-delay="1"] { transition-delay: 0.1s; }
[data-reveal-delay="2"] { transition-delay: 0.2s; }
[data-reveal-delay="3"] { transition-delay: 0.3s; }
[data-reveal-delay="4"] { transition-delay: 0.4s; }

/* ── 언어 스위처 (신규 UI, 기존 레이아웃 영향 없음) ── */
.lang-switcher {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.lang-switcher__btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  font-size: 13px;
  font-weight: 500;
  color: inherit;
  border: 1px solid rgba(255, 255, 255, 0.5);
  border-radius: 20px;
  cursor: pointer;
  background: transparent;
  transition:
    background var(--ds-dur-fast) var(--ds-ease),
    border-color var(--ds-dur-fast) var(--ds-ease);
  white-space: nowrap;
}
.lang-switcher__btn:hover {
  background: rgba(255, 255, 255, 0.15);
  border-color: rgba(255, 255, 255, 0.8);
}
.lang-switcher__btn svg {
  width: 12px;
  height: 12px;
  transition: transform var(--ds-dur-base) var(--ds-ease);
}
.lang-switcher.open .lang-switcher__btn svg.chevron {
  transform: rotate(180deg);
}

.lang-switcher__dropdown {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 120px;
  background: #fff;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 10px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
  padding: 4px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity    var(--ds-dur-base) var(--ds-ease),
    transform  var(--ds-dur-base) var(--ds-ease),
    visibility var(--ds-dur-base) var(--ds-ease);
  z-index: 9999;
}
.lang-switcher.open .lang-switcher__dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.lang-switcher__dropdown a {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  font-size: 13px;
  color: #333;
  border-radius: 6px;
  white-space: nowrap;
  transition:
    background var(--ds-dur-fast) var(--ds-ease),
    color      var(--ds-dur-fast) var(--ds-ease);
}
.lang-switcher__dropdown a:hover,
.lang-switcher__dropdown a.active {
  background: rgba(15, 66, 142, 0.08);
  color: #0f428e;
  font-weight: 600;
}

/* ── 접근성: 모션 감소 설정 시 애니메이션 제거 ── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ── 스크롤바 (부가 개선) ── */
::-webkit-scrollbar       { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.15); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: rgba(0,0,0,0.28); }