/* ============================================================
   FOOTER — .site-footer
   상단: 링크 네비게이션
   하단: 로고 | 공연장+연락처+저작권 | 웹접근성마크
   ============================================================ */
.site-footer {
  width: 100%;
  background: var(--ds-color-gray-90);
  position: relative;
  flex-shrink: 0;
  margin-top: 0;                                         /* 간격은 .sub-page-wrap padding-bottom으로 관리 */
}

.footer-inner {
  max-width: 1860px;
  margin: 0 auto;
  padding: var(--ds-number-16) var(--ds-number-15) var(--ds-number-18);
}

/* ---------- 상단: 부가 링크 ---------- */
.footer-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ds-number-4) var(--ds-number-14);
  margin-bottom: var(--ds-number-12);
}
.footer-links a {
  font-size: var(--ds-pc-font-size-label-small);
  color: var(--ds-color-gray-30);                    /* gray-90 배경 대비 ~7.5:1 */
  white-space: nowrap;
  transition: color var(--ease-base);
}
.footer-links a:hover {
  color: var(--ds-color-gray-0);
}
.footer-links a strong {
  color: var(--ds-color-gray-0);                     /* 개인정보처리방침 강조: 화이트 */
  font-weight: 700;
}

/* ---------- 상단 행: 좌 정책링크 / 우 패밀리사이트(관련사이트) ---------- */
.footer-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--ds-number-4) var(--ds-number-14);
  margin-bottom: var(--ds-number-12);
}
.footer-top > .footer-links { margin-bottom: 0; }   /* 마진은 wrapper가 담당 */

/* 패밀리사이트 셀렉트 (어두운 테마) */
.footer-family {
  position: relative;
  flex-shrink: 0;
}
.footer-family-select {
  appearance: none;
  -webkit-appearance: none;
  min-width: 300px;
  height: var(--ds-size-height-12);                  /* 44px — KWCAG 터치타겟 */
  padding: 0 var(--ds-number-16) 0 var(--ds-number-8);
  background: var(--ds-color-gray-100);
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-80);
  border-radius: var(--ds-radius-small);
  color: var(--ds-color-gray-0);
  font-size: 1.6rem;
  font-family: var(--ds-typo-font-type-body);
  cursor: pointer;
  transition: border-color var(--ease-base);
}
.footer-family-select:hover { border-color: var(--ds-color-gray-50); }
.footer-family-select:focus-visible {
  outline: 2px solid var(--ds-color-gray-30);
  outline-offset: 2px;
}
.footer-family-select option {
  background: var(--ds-color-gray-90);
  color: var(--ds-color-gray-0);
}
.footer-family-caret {
  position: absolute;
  right: var(--ds-number-6);                          /* 12px */
  top: 50%;
  transform: translateY(-50%);
  color: var(--ds-color-gray-30);
  pointer-events: none;
}
@media (max-width: 767px) {
  .footer-top { flex-direction: column; align-items: stretch; }
  .footer-family { width: 100%; }
  .footer-family-select { width: 100%; min-width: 0; font-size: var(--ds-mobile-font-size-label-small); }
}

/* ---------- 구분선 ---------- */
.footer-hr {
  border: none;
  height: 1px;
  background: var(--ds-color-gray-80);
  margin: 0 0 var(--ds-number-14);
}

/* ---------- 하단 3열: 로고 | 콘텐츠 | 접근성마크 ---------- */
.footer-body {
  display: flex;
  align-items: flex-start;
  gap: var(--ds-number-20);
}

.footer-logo {
  flex-shrink: 0;
  padding-top: var(--ds-number-2);
}
.footer-logo-img {
  height: var(--ds-number-28);
  width: auto;
}

.footer-content {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-8);
}

.footer-wcag {
  flex-shrink: 0;
  align-self: flex-end;
}
.footer-wcag-img {
  height: var(--ds-number-32);
  width: auto;
}

/* ---------- 공연장 주소 박스 ---------- */
.footer-venues {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--ds-number-5);
}
.footer-venue {
  background: var(--ds-color-gray-80);
  border-radius: var(--ds-radius-small);
  padding: var(--ds-number-7) var(--ds-number-8);
  display: flex;
  flex-direction: column;
  gap: var(--ds-number-2);
}
.footer-venue-name {
  font-size: var(--ds-pc-font-size-label-small);
  font-weight: 700;
  color: var(--ds-color-gray-0);
  letter-spacing: -0.03em;
}
.footer-venue-addr {
  font-size: var(--ds-pc-font-size-label-xsmall);
  color: var(--ds-color-gray-0);                     /* 박스 내 텍스트 화이트 */
  letter-spacing: -0.03em;
}

/* ---------- 연락처 + 저작권 ---------- */
.footer-contact {
  font-size: var(--ds-pc-font-size-label-small);
  color: var(--ds-color-gray-30);                    /* gray-90 배경 대비 ~7.5:1 */
  letter-spacing: -0.03em;
}
.footer-divider {
  margin: 0 var(--ds-number-6);
  color: var(--ds-color-gray-40);                    /* gray-90 배경 대비 ~4.8:1 */
}
.footer-copy {
  font-size: var(--ds-pc-font-size-label-xsmall);
  color: var(--ds-color-gray-40);                    /* gray-90 배경 대비 ~4.8:1 */
  letter-spacing: -0.03em;
}


/* ============================================================
   FLOATING BUTTONS — 우하단 플로팅 버튼 그룹
   챗봇 + 스크롤 탑 (스크롤 400px 이상에서 노출)
   ============================================================ */
.floating-btns {
  position: fixed;
  right: 34px;
  bottom: var(--ds-number-20);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--ds-number-5);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ease-base);
  z-index: 999;
}
.floating-btns.is-visible {
  opacity: 1;
  pointer-events: auto;
}

/* 챗봇 버튼 */
.chatbot-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: transform var(--ease-base);
}
.chatbot-btn:hover { transform: translateY(-3px); }
.chatbot-icon {
  width: 96px;
  height: 96px;
  display: block;
  margin-left: 22px;
}

/* 번역 안내 버튼 — TOP 버튼과 동일 크기 */
.translate-guide-btn {
  width: var(--ds-number-40);
  height: var(--ds-number-40);
  border-radius: var(--ds-radius-max);
  background: var(--ds-color-gray-0);
  border: 1px solid var(--ds-color-gray-20);
  box-shadow: 0 0 2px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  cursor: pointer;
  transition: transform var(--ease-base), box-shadow var(--ease-base);
  position: relative;
}
.translate-guide-btn:hover {
  transform: translateY(-3px);
}
.translate-guide-btn__icon {
  display: flex;
}
.translate-guide-btn__icon svg {
  width: 32px;
  height: 32px;
}
.translate-guide-btn__label {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--ds-color-gray-50);
  letter-spacing: 0;
}

/* 번역 모달 스크롤 보강 — 콘텐츠(Edge 탭 등)가 길어도 화면 짤림 없이 모달 내부 스크롤.
   DS .ds-modal 캡(max-height:90vh)이 미반영된 환경 대비 #translate-modal ID 스코프로 강제(component.css보다 우선). */
#translate-modal.ds-modal-backdrop {
  align-items: center;
  overflow-y: auto;                                         /* 초소형 화면에서 모달 자체가 넘칠 때 백드롭 스크롤 */
  padding: 2rem 0;
  z-index: 10001;                                           /* sticky 헤더(.site-header z-index:1000)·모바일 메뉴(2000)·index 오버레이(10000)보다 위 — 모달 상단(제목·닫기)이 헤더에 가리지 않도록 */
}
#translate-modal .ds-modal {
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;                                        /* 둥근 모서리(border-radius) 밖으로 헤더 등 자식이 새어 상단에 흰 라인 보이는 것 클립. 내부 스크롤은 .ds-modal__body가 담당 */
}
#translate-modal .ds-modal__body {
  flex: 1 1 auto;
  min-height: 0;                                            /* flex 자식 overflow 동작 보장 */
  overflow-y: auto;
}

/* 모바일(≤767px) — 번역 모달이 너무 크고 우측이 잘리던 문제 보정.
   DS .ds-modal 모바일 규칙(position:fixed; bottom:0; width:95%)이 백드롭 flex 중앙정렬을 벗어나
   가로 폭 계산이 어긋나 콘텐츠 우측이 잘림. position:static 으로 되돌려 백드롭 flex 중앙정렬을 쓰고
   좌우 1.2rem 여백 안에 폭을 맞춰 가로 잘림을 원천 차단 + 폰트 축소. */
@media (max-width: 767px) {
  #translate-modal.ds-modal-backdrop {
    padding: 1.2rem;                                       /* 모달 좌우/상하 여백 (가로 잘림 방지) */
    align-items: center;
  }
  #translate-modal .ds-modal {
    position: static;                                      /* 바텀시트(fixed) 해제 → 백드롭 flex 중앙정렬 사용 */
    width: 100%;
    min-width: 0;                                          /* flex 자식 기본 min-width:auto 해제 → 콘텐츠 최소너비 무시하고 컨테이너 폭까지 축소(가로 잘림/넘침 방지) */
    max-width: none;
    max-height: calc(100vh - 2.4rem);
    margin: 0;
    border-radius: var(--ds-radius-medium);
  }
  #translate-modal .ds-modal__body { min-width: 0; }       /* 본문도 동일 — 내부 nowrap 요소가 폭 부풀리는 것 차단 */
  #translate-modal .translate-modal__desc { font-size: 1.4rem; margin-bottom: 1.6rem; }
  #translate-modal .translate-modal__browser-desc,
  #translate-modal .translate-modal__steps { font-size: 1.3rem; line-height: 1.7; }
  #translate-modal .translate-modal__browser-title { font-size: 1.5rem; }
  #translate-modal .translate-modal__tabs .ds-tab__btn { font-size: 1.4rem; }
  #translate-modal .ds-modal__title { font-size: 1.7rem; }
  #translate-modal .translate-modal__browser { padding: 1.6rem; }
}

/* 번역 안내 모달 내부 스타일 */
.translate-modal__desc {
  font-size: 1.6rem;
  color: var(--ds-color-gray-60);
  margin: 0 0 2.4rem;
  line-height: 1.6;
}
.translate-modal__browser {
  margin-bottom: 2rem;
  padding: 2rem;
  background: var(--ds-color-gray-3, #f9fafb);
  border-radius: var(--ds-radius-medium);
}
.translate-modal__browser:last-of-type {
  margin-bottom: 0;
}
.translate-modal__browser-title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--ds-light-color-text-basic);
  margin: 0 0 1.2rem;
}
.translate-modal__steps {
  margin: 0;
  padding-left: 2rem;
  font-size: 1.5rem;
  color: var(--ds-light-color-text-basic);
  line-height: 2;
}
.translate-modal__steps strong {
  color: var(--ds-color-primary-50);
}
.translate-modal__steps > li + li::before {
  content: '';
  position: absolute;
  top: 0;
  left: -2rem;                                               /* ol padding-left(2rem)만큼 좌측 확장 → 번호 영역 포함 */
  right: 0;
  border-top: var(--ds-border-width-thin) solid var(--ds-color-gray-10);
}
/* Chrome 안내 소개문 — 단계 목록 위 한 줄 */
.translate-modal__browser-desc {
  margin: 0 0 1.2rem;
  font-size: 1.5rem;
  color: var(--ds-color-gray-60);
  line-height: 1.6;
}
/* 단계 하위 보조 설명 (•) */
.translate-modal__substeps {
  margin: 0;
  padding-left: 1.6rem;
  list-style: disc;                                          /* reset.css가 ul 마커를 제거하므로 명시 */
}
.translate-modal__substeps li {
  color: var(--ds-color-gray-60);
}
/* 주소창 번역 아이콘 (인라인) */
.translate-modal__inline-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.8rem;
  height: 1.8rem;
  margin: 0 0.2rem;
  vertical-align: -0.4rem;
  color: var(--ds-color-primary-50);
}
.translate-modal__inline-icon svg { width: 100%; height: 100%; }
/* 본문 중 인라인 아이콘 이미지 (Edge 주소창 번역 아이콘 등) */
.translate-modal__inline-img {
  display: inline-block;                                     /* reset.css의 img{display:block} 무효화 → 텍스트와 같은 줄 유지 */
  height: 1.8rem;
  width: auto;
  vertical-align: middle;
  margin: 0 0.2rem;
}

/* 원본 문서 도움말 링크 (밑줄로 링크임을 인지) */
.translate-modal__help-link {
  color: var(--ds-color-primary-50);
  text-decoration: underline;
}
.translate-modal__help-link:hover {
  text-decoration: none;
}

/* 번역 모달 — 브라우저 탭 (FILL 균등 너비로 모달 폭 꽉 채움) */
.translate-modal__tabs { margin-top: 0; }
.translate-modal__tabs .ds-tab__list { width: 100%; }
.translate-modal__tabs .ds-tab__item { flex: 1 1 0; }       /* 두 탭 균등 분할 */
.translate-modal__tabs .ds-tab__btn {
  width: 100%;
  justify-content: center;
  align-items: center;                                       /* DS 기본 flex-end 무효화 → 텍스트 수직 중앙 */
  padding-top: 0;
  padding-bottom: 0;
}
.translate-modal__panel { padding-top: 2rem; }
/* Edge 탭: 두 안내 박스 사이 간격은 .translate-modal__browser margin-bottom으로 처리 */

/* 헤더 — 제목 + 언어 토글 버튼(제목에서 10px) 묶음. 닫기(X)는 우측 끝(헤더 space-between) */
.translate-modal__header-title {
  display: flex;
  align-items: center;
  gap: 1rem;                                                 /* 10px — 제목 ↔ 언어 버튼 */
}
.translate-modal__lang-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  height: 3.2rem;
  padding: 0 1.2rem;
  font-size: 1.4rem;
  font-weight: var(--ds-typo-font-weight-medium);
  color: var(--ds-color-primary-50);
  background: var(--ds-color-gray-0);
  border: var(--ds-border-width-thin) solid var(--ds-color-primary-50);
  border-radius: var(--ds-radius-small);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.translate-modal__lang-btn:hover {
  background: var(--ds-color-primary-50);
  color: var(--ds-color-gray-0);
}
.translate-modal__lang-btn svg { flex-shrink: 0; }

/* 언어 표시 제어 — 모달 data-lang 값에 따라 한 언어만 노출 */
#translate-modal[data-lang="ko"] [data-lang-en],
#translate-modal[data-lang="en"] [data-lang-ko] {
  display: none;
}

/* 안내 스크린샷 (파일 제공 시 삽입) */
.translate-modal__figure {
  margin: 1.2rem 0 0;
}
.translate-modal__figure img {
  display: block;
  width: 100%;
  max-width: 32rem;                                          /* 스크린샷 축소 — 320px 상한 */
  height: auto;
  border: var(--ds-border-width-thin) solid var(--ds-color-gray-20);
  border-radius: var(--ds-radius-medium);
}
/* 더 작게 — 세로로 긴 스크린샷(크롬 번역 등) */
.translate-modal__figure--sm img {
  max-width: 22rem;                                          /* 220px 상한 */
}
.translate-modal__figure figcaption {
  margin-top: 0.6rem;
  font-size: 1.3rem;
  color: var(--ds-color-gray-50);
}

/* 스크롤 탑 버튼 */
.scroll-top-btn {
  width: var(--ds-number-40);
  height: var(--ds-number-40);
  border-radius: var(--ds-radius-max);
  background: var(--ds-color-gray-0);
  border: 1px solid var(--ds-color-gray-20);
  box-shadow: 0 0 2px rgba(0,0,0,0.05), 0 4px 8px rgba(0,0,0,0.08);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: transform var(--ease-base);
}
.scroll-top-btn:hover { transform: translateY(-3px); }

.scroll-top-arrow {
  width: 16px;
  height: 16px;
  color: var(--ds-color-gray-60);
}
.scroll-top-text {
  font-size: var(--ds-pc-font-size-label-small);
  font-weight: 800;
  color: var(--ds-color-gray-60);
  letter-spacing: 0;
}


/* ============================================================
   반응형 — 태블릿
   ============================================================ */
@media (max-width: 1199px) {
  .footer-inner {
    padding: var(--ds-number-14) var(--ds-number-15) var(--ds-number-16);
  }
  .footer-venues {
    grid-template-columns: repeat(2, 1fr);
  }
  .floating-btns {
    right: 24px;
    bottom: var(--ds-number-15);
  }
  .chatbot-icon {
    width: 80px;
    height: 80px;
    margin-left: 18px;
  }
  .translate-guide-btn {
    width: 60px;
    height: 60px;
  }
  .translate-guide-btn__icon svg {
    width: 24px;
    height: 24px;
  }
  .translate-tooltip {
    width: 260px;
  }
  .scroll-top-btn {
    width: 64px;
    height: 64px;
  }
  /* 태블릿: PC와 동일한 폰트 크기 유지 (모바일에서 급격히 줄어드는 것 방지) */
  .footer-links a {
    font-size: var(--ds-pc-font-size-label-small);
  }
  .footer-venue-name {
    font-size: var(--ds-pc-font-size-label-small);
  }
  .footer-venue-addr {
    font-size: var(--ds-pc-font-size-label-xsmall);
  }
  .footer-contact {
    font-size: var(--ds-pc-font-size-label-small);
  }
  .footer-copy {
    font-size: var(--ds-pc-font-size-label-xsmall);
  }
  .footer-body {
    flex-direction: column;
    gap: var(--ds-number-12);
  }
  .footer-content {
    width: 100%;
  }
  .footer-wcag {
    align-self: flex-start;
  }
}


/* ============================================================
   반응형 — 모바일
   ============================================================ */
@media (max-width: 767px) {
  .footer-inner {
    padding: var(--ds-number-12) var(--ds-number-8) var(--ds-number-14);
  }
  .footer-links {
    gap: var(--ds-number-3) var(--ds-number-8);
    margin-bottom: var(--ds-number-9);
  }
  .footer-links a {
    font-size: var(--ds-mobile-font-size-label-xsmall);
  }
  .footer-hr {
    margin-bottom: var(--ds-number-10);
  }
  .footer-body {
    flex-direction: column;
    gap: var(--ds-number-10);
  }
  .footer-logo-img {
    height: var(--ds-number-22);
  }
  .footer-venues {
    grid-template-columns: 1fr;
    gap: var(--ds-number-4);
  }
  .footer-venue {
    padding: var(--ds-number-6) var(--ds-number-8);
    flex-direction: row;
    align-items: center;
    gap: var(--ds-number-4);
  }
  .footer-venue-name {
    font-size: var(--ds-mobile-font-size-label-xsmall);
    flex-shrink: 0;
  }
  .footer-venue-addr {
    font-size: var(--ds-mobile-font-size-label-xsmall);
  }
  .footer-wcag {
    align-self: flex-end;
  }
  .footer-wcag-img {
    height: var(--ds-number-26);
  }
  .footer-contact {
    font-size: var(--ds-mobile-font-size-label-xsmall);
  }
  .footer-divider {
    margin: 0 var(--ds-number-4);
  }
  .footer-copy {
    font-size: var(--ds-mobile-font-size-label-xsmall);
  }
  .floating-btns {
    right: 16px;
    bottom: var(--ds-number-10);
    gap: var(--ds-number-3);
  }
  .chatbot-icon {
    width: 64px;
    height: 64px;
    margin-left: 14px;
  }
  .translate-guide-btn {
    width: 48px;
    height: 48px;
  }
  .translate-guide-btn__icon svg {
    width: 20px;
    height: 20px;
  }
  .translate-guide-btn__label {
    font-size: 1rem;
  }
  .translate-tooltip {
    width: calc(100vw - 48px);
    right: -8px;
  }
  .scroll-top-btn {
    width: 52px;
    height: 52px;
  }
  .scroll-top-arrow {
    width: 14px;
    height: 14px;
  }
  .scroll-top-text {
    font-size: var(--ds-mobile-font-size-label-xsmall);
  }
}