/* ════════════════════════════════════════════════════════════════════
   LLM Router 공통 Footer 스타일 — SSOT (단일 관리 원본)
   디자인팀 footer 템플릿 구조: 다크 토큰 기본(.c24-footer-root)
   + 라이트 오버라이드(.c24-footer-light). 내용은 web 최신 기준.
   - 톤 매핑: index(랜딩) = 다크 / 그 외(React·updates) = 라이트
   - 마크업 SSOT: /partials/llm-footer.html
   - 소비: React Footer.tsx 의 <link> · index.html/updates.html 의 <link>
   ════════════════════════════════════════════════════════════════════ */
.c24-footer-root {
  --c24-surface-inverse: #1c1c1c;
  --c24-surface-muted-inverse: #252525;
  --c24-text-inverse: #ffffff;
  --c24-text-subtle: #a6a6a6;
  --c24-text-muted: #757575;
  --c24-text-muted-inverse: #a6a6a6;
  --c24-border-inverse: rgba(255,255,255,0.3);
  --c24-border-opacity: rgba(255,255,255,0.1);
  --c24-hover-overlay: rgba(255,255,255,0.15);
  --c24-footer-sns-icon: #BFC3CB;
  --c24-footer-sns-icon-hover: #ffffff;
  --c24-footer-logo-size: 44px;
  --c24-footer-nav-width: 1080px;
  --c24-footer-nav-item-width: 160px;
}

/* ── Footer ─────────────────────────────────────────────────── */
.c24-footer-root {
  background-color: #1c1c1c !important;
  padding: 64px 0 32px;
  overflow: visible;
  font-family: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Segoe UI', sans-serif;
  -webkit-font-smoothing: antialiased;
}
.c24-footer-root * { box-sizing: border-box; }
/* 스코프 리셋 — 호스트 페이지 리셋에 의존하지 않고 어디서든 동일 렌더 (dl 등 UA 기본 마진 제거) */
/* 호스트 페이지의 비스코프 .footer-bottom(랜딩 레거시) 등 간섭 차단 */
.c24-footer-root .footer-bottom { display: block; padding: 0; margin: 0; border-top: 0; }
.c24-footer-root dl, .c24-footer-root dt, .c24-footer-root dd, .c24-footer-root ul, .c24-footer-root li, .c24-footer-root h3, .c24-footer-root p, .c24-footer-root figure { margin: 0; padding: 0; }
.c24-footer-root a { text-decoration: none; }

.c24-footer-root .footer-inner {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 24px;
  overflow: visible;
}

/* Top */
.c24-footer-root .footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  overflow: visible;
  margin-bottom: 40px;
}

/* Right */
.c24-footer-root .footer-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  position: relative;
  width: 180px;
  margin-left: auto;
  flex-shrink: 0;
}

/* Logos */
.c24-footer-root .footer-logos {
  display: flex;
  align-items: center;
  gap: 8px;
  order: -1;
}
.c24-footer-root .footer-logos .footer-sns { display: none; }

.c24-footer-root .footer-certifications {
  display: flex;
  gap: 8px;
  align-items: center;
}
.c24-footer-root .footer-logo-item {
  width: var(--c24-footer-logo-size);
  height: var(--c24-footer-logo-size);
  flex-shrink: 0;
}
.c24-footer-root .footer-logo-item a { display: block; width: 100%; height: 100%; }
.c24-footer-root .footer-logo-item img { width: 100%; height: 100%; object-fit: contain; display: block; }
.c24-footer-root .footer-isms { width: var(--c24-footer-logo-size); height: var(--c24-footer-logo-size); background: transparent; border-radius: 0; flex-shrink: 0; }

/* Corp */
.c24-footer-root .footer-corp {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  width: 180px;
}

/* Brand */

/* Nav */
.c24-footer-root .footer-nav {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  list-style: none;
  flex: 1;
  margin: 0 0 80px;
  padding: 0;
}
.c24-footer-root .footer-nav-item { flex-shrink: 0; }
.c24-footer-root .footer-nav-title { font-weight: 700; margin-bottom: 16px; display: block; font-size: 16px; line-height: 24px; color: var(--c24-text-inverse); }
.c24-footer-root .footer-nav-item--centers { display: flex; flex-direction: column; }
.c24-footer-root .footer-nav-centers { display: flex; flex-direction: column; gap: 16px; }
.c24-footer-root .footer-nav-title--link { text-decoration: none; margin-bottom: 0; transition: color 0.2s; }
.c24-footer-root .footer-nav-title--link:hover { color: var(--c24-text-subtle); }
.c24-footer-root .footer-nav-submenu { list-style: none; display: flex; flex-direction: column; gap: 12px; padding: 0; margin: 0; }
.c24-footer-root .footer-nav-submenu li { margin: 0; padding: 0; }
.c24-footer-root .footer-nav-link { font-size: 16px; line-height: 24px; font-weight: 400; text-decoration: none; color: var(--c24-text-subtle); transition: color 0.2s; }
.c24-footer-root .footer-nav-link:hover { color: var(--c24-text-inverse); }
.c24-footer-root .footer-nav-link[target="_blank"]::after { content: ""; }

/* Info row */
.c24-footer-root .footer-info-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 60px; margin-bottom: 48px; }
.c24-footer-root .footer-info-row .footer-sns { display: flex; gap: 16px; flex-shrink: 0; }
.c24-footer-root .footer-info-row .footer-sns a { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background-color: var(--c24-surface-muted-inverse); border-radius: 50%; color: var(--c24-footer-sns-icon); transition: color 0.2s, opacity 0.2s, background-color 0.2s; }
.c24-footer-root .footer-info-row .footer-sns a:hover { color: var(--c24-footer-sns-icon-hover); }
.c24-footer-root .footer-info-row .footer-sns svg { width: 28px; height: 28px; }

/* Company info */
.c24-footer-root .footer-info-contents { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.c24-footer-root .footer-company-name { font-weight: 700; display: block; margin-bottom: 8px; font-size: 15px; line-height: 24px; color: var(--c24-text-subtle); }
.c24-footer-root .footer-info { display: flex; flex-wrap: wrap; font-size: 14px; line-height: 20px; gap: 4px 8px; color: var(--c24-text-subtle); }
.c24-footer-root .footer-info dt { font-weight: 400; }
.c24-footer-root .footer-info dd { margin: 0; }
.c24-footer-root .footer-info a { color: var(--c24-text-subtle); text-decoration: underline; }
.c24-footer-root .footer-info a:hover { color: var(--c24-text-inverse); }

/* SNS */
.c24-footer-root .footer-sns { display: flex; gap: 16px; }
.c24-footer-root .footer-sns a { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background-color: var(--c24-surface-muted-inverse); border-radius: 50%; color: var(--c24-footer-sns-icon); transition: color 0.2s, opacity 0.2s; }
.c24-footer-root .footer-sns a:hover { color: var(--c24-footer-sns-icon-hover); }
.c24-footer-root .footer-sns svg { width: 28px; height: 28px; }
.c24-footer-root .footer-sns svg path,
.c24-footer-root .footer-sns svg rect,
.c24-footer-root .footer-sns svg circle { fill: currentColor !important; }

/* Bottom */
.c24-footer-root .footer-info-copy { display: flex; align-items: center; justify-content: space-between; gap: 24px; border-top: 1px solid var(--c24-border-opacity); padding-top: 32px; }
.c24-footer-root .footer-policy { display: flex; flex-wrap: wrap; margin: 0; padding: 0; gap: 8px 24px; }
.c24-footer-root .footer-policy a { font-size: 14px; line-height: 20px; font-weight: 400; text-decoration: none; color: var(--c24-text-subtle); transition: color 0.2s; }
.c24-footer-root .footer-policy a:hover { color: var(--c24-text-inverse); }
.c24-footer-root .footer-policy a strong { font-weight: 400; color: var(--c24-text-inverse); }
.c24-footer-root .footer-copyright { font-size: 12px; line-height: 17px; font-weight: 400; white-space: nowrap; color: var(--c24-text-muted); }
.c24-footer-root .blind { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ── SelectBoxRound (footer 내부) ────────────────────────────── */
.c24-footer-root .select-box-round { position: relative; display: inline-block; width: 180px; }
.c24-footer-root .select-box-round__select { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; outline: none; position: relative; border-radius: 9999px; height: 44px; background-color: var(--c24-surface-inverse); border: 1px solid rgba(255,255,255,0.3); padding: 0 16px; transition: all 0.2s ease; }
.c24-footer-root .select-box-round__select:hover::before { content: ''; position: absolute; inset: 0; border-radius: 9999px; pointer-events: none; background-color: var(--c24-hover-overlay); }
.c24-footer-root .select-box-round__select:focus { outline: 2px solid rgba(8,79,255,0.5); outline-offset: 2px; }
.c24-footer-root .select-box-round__label { flex: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--c24-text-inverse); }
.c24-footer-root .select-box-round__icon { flex-shrink: 0; pointer-events: none; width: 16px; height: 16px; color: var(--c24-text-inverse); transition: transform 0.2s ease; }
.c24-footer-root .select-box-round__select[aria-expanded="true"] .select-box-round__icon { transform: rotate(180deg); }
.c24-footer-root .select-box-round__dropdown { position: absolute; left: 0; width: 100%; overflow-y: auto; list-style: none; margin: 0; border-radius: 16px; box-sizing: border-box; top: calc(100% + 8px); background-color: var(--c24-surface-inverse); border: 1px solid rgba(255,255,255,0.3); padding: 12px 0 8px; max-height: 202px; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; z-index: 1000; box-shadow: 0 4px 12px rgba(0,0,0,0.15); }
.c24-footer-root .select-box-round__dropdown[aria-hidden="false"] { opacity: 1; visibility: visible; transform: translateY(0); }
.c24-footer-root .select-box-round__item { display: flex; align-items: center; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 16px; line-height: 24px; border-radius: 8px; height: 34px; padding: 0 12px; font-weight: 400; color: var(--c24-text-muted-inverse); transition: all 0.2s ease; }
.c24-footer-root .select-box-round__item--selected,
.c24-footer-root .select-box-round__item:hover { font-weight: 700; color: var(--c24-text-inverse); }

/* ── Responsive ─────────────────────────────────────────────── */

/* Tablet (769px ~ 1279px) */
@media (min-width: 769px) and (max-width: 1279px) {
  .c24-footer-root { padding: 32px 0; }
  /* 상단: 세로 스택 */
  .c24-footer-root .footer-top { flex-direction: column; gap: 32px; margin-bottom: 40px; }
  /* 브랜드: 텍스트 줄바꿈 허용 */
  /* nav: 닷컴과 동일하게 숨김 */
  .c24-footer-root .footer-nav { display: none !important; }
  /* footer-right: 전체폭 */
  .c24-footer-root .footer-right { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; margin-left: 0; }
  /* SNS 아이콘: 왼쪽 표시 */
  .c24-footer-root .footer-logos { display: flex; flex-direction: row; justify-content: space-between; width: 100%; align-items: center; }
  .c24-footer-root .footer-logos .footer-sns { display: flex; flex-direction: row; gap: 16px; }
  .c24-footer-root .footer-logos .footer-sns a { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background-color: var(--c24-surface-muted-inverse); border-radius: 50%; color: var(--c24-footer-sns-icon); transition: color 0.2s, opacity 0.2s; }
  .c24-footer-root .footer-logos .footer-sns a:hover { color: var(--c24-footer-sns-icon-hover); }
  .c24-footer-root .footer-logos .footer-sns svg { width: 28px; height: 28px; }
  /* 인증마크: 오른쪽 표시 */
  .c24-footer-root .footer-certifications { display: flex; flex-direction: row; gap: 8px; align-items: center; }
  /* 하단 corp info */
  .c24-footer-root .footer-info-row { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 24px; }
  .c24-footer-root .footer-info-row .footer-sns { display: none; }
  .c24-footer-root .footer-info-copy { display: block; padding-top: 16px; }
  .c24-footer-root .footer-policy { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-bottom: 16px; }
  .c24-footer-root .footer-policy a { font-size: 12px; line-height: 17px; }
  .c24-footer-root .footer-copyright { font-size: 13px; line-height: 19px; }
}

/* Mobile (~ 768px) */
@media (max-width: 768px) {
  .c24-footer-root { padding: 32px 0; }
  /* 상단: 세로 스택 */
  .c24-footer-root .footer-top { flex-direction: column; gap: 24px; margin-bottom: 32px; }
  /* 브랜드: 텍스트 줄바꿈 허용 */
  /* nav: 닷컴과 동일하게 숨김 */
  .c24-footer-root .footer-nav { display: none !important; }
  /* footer-right: 전체폭 */
  .c24-footer-root .footer-right { width: 100%; flex-direction: row; align-items: center; justify-content: space-between; margin-left: 0; }
  /* SNS 아이콘: 왼쪽 표시 */
  .c24-footer-root .footer-logos { display: flex; flex-direction: row; justify-content: space-between; width: 100%; align-items: center; }
  .c24-footer-root .footer-logos .footer-sns { display: flex; flex-direction: row; gap: 12px; }
  .c24-footer-root .footer-logos .footer-sns a { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background-color: var(--c24-surface-muted-inverse); border-radius: 50%; }
  .c24-footer-root .footer-logos .footer-sns svg { width: 24px; height: 24px; }
  /* 인증마크: 오른쪽 표시 */
  .c24-footer-root .footer-certifications { display: flex; flex-direction: row; gap: 8px; align-items: center; }
  /* 하단 corp info */
  .c24-footer-root .footer-info-row { flex-direction: column; align-items: flex-start; gap: 24px; margin-bottom: 24px; }
  .c24-footer-root .footer-info-row .footer-sns { display: none; }
  .c24-footer-root .footer-info-copy { display: block; padding-top: 16px; }
  .c24-footer-root .footer-policy { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-bottom: 16px; }
  .c24-footer-root .footer-policy a,
  .c24-footer-root .footer-copyright { font-size: 12px; line-height: 17px; }
}

/* =================================================================
   cafe24-com Footer — 라이트 테마 오버라이드
   사용법: <footer class="c24-footer-root c24-footer-light">
   ================================================================= */

/* ── 라이트 토큰 오버라이드 ─────────────────────────────────── */
.c24-footer-light {
  --c24-surface-inverse: #f7f7f5;
  --c24-surface-muted-inverse: #efefed;
  --c24-text-inverse: #0a0a0b;
  --c24-text-subtle: #6b6b70;
  --c24-text-muted: #9b9ba0;
  --c24-text-muted-inverse: #6b6b70;
  --c24-border-inverse: rgba(0,0,0,0.2);
  --c24-border-opacity: rgba(0,0,0,0.08);
  --c24-hover-overlay: rgba(0,0,0,0.05);
  --c24-footer-sns-icon: #6b6b70;
  --c24-footer-sns-icon-hover: #0a0a0b;
}

/* 배경 오버라이드 (다크에서 하드코딩된 값) */
.c24-footer-light { background-color: #f7f7f5 !important; }

/* ISMS 인증마크: 흰색 SVG → 라이트 배경에서 반전 처리 */
.c24-footer-light .footer-isms img { filter: invert(1); }

/* select-box 라이트 스타일 */
.c24-footer-light .select-box-round__select {
  background-color: var(--c24-surface-inverse);
  border-color: rgba(0,0,0,0.2);
}