/* ============================================
   Footer (common-design.md § 4 / responsive.md § 5-8)
   ============================================ */

/* Figma 1990:626: 배경 #F3F3F3 (회색) — 본문 흰 영역과 색 경계로 구분 */
.c-footer {
  background: var(--color-footer-bg);   /* #F3F3F3 */
  padding: 50px 0;
}

/* common.css 가 로드 안 된 페이지(goodsDetail 등)에서도 푸터가 1232 컨테이너 폭으로 중앙정렬되도록
   .c-footer__inner 자체에 width/padding 을 직접 지정 (common.css 의 .container 와 동일 룰) */
.c-footer__inner {
  --c-footer-padding: 16px;
  width: 100%;
  max-width: calc(1232px + var(--c-footer-padding) * 2);
  margin: 0 auto;
  padding-left: var(--c-footer-padding);
  padding-right: var(--c-footer-padding);
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}
@media (min-width: 768px) {
  .c-footer__inner { --c-footer-padding: 40px; }
}
@media (min-width: 1280px) {
  .c-footer__inner { --c-footer-padding: 60px; }
}

.c-footer__left {
  flex: 1 1 auto;
  max-width: 720px;
}
.c-footer__logo {
  font-family: Pretendard, sans-serif;
  font-weight: 800;
  font-size: 1.5rem;
  color: var(--color-mono-1);
  margin-bottom: 16px;
}

.c-footer__terms {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 12px;
  margin-bottom: 16px;
}
.c-footer__terms li {
  display: inline-flex;
  align-items: center;
  font-size: 0.875rem;
}
.c-footer__terms li + li::before {
  content: "|";
  margin-right: 12px;
  color: var(--color-mono-6);
}
.c-footer__terms a {
  font-size: 0.875rem;
  color: var(--color-mono-3);
}

.c-footer__company {
  font-size: 0.8125rem;
  color: var(--color-mono-4);
  line-height: 1.7;
  margin: 0 0 12px;
}
.c-footer__copyright {
  font-size: 0.8125rem;
  color: var(--color-mono-4);
  margin: 0;
}

/* ---- Right ---- */
.c-footer__right {
  flex: 0 0 240px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.c-footer__select-label {
  display: block;
  font-size: 0.8125rem;
  color: var(--color-mono-3);
  font-weight: 700;
}

/* ---- FAMILY SITE 커스텀 드롭다운 ----
   네이티브 <select> 의 option 패널은 OS 가 그려서 폰트/배경/패딩 모두 스타일링 불가.
   푸터 톤에 맞추기 위해 div 기반으로 직접 구현 (토글 동작은 footer.html 인라인 JS) */
.c-footer__family {
  position: relative;
  width: 100%;
}
.c-footer__family-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  height: 44px;
  padding: 0 14px;
  border: 1px solid var(--color-mono-6);
  border-radius: var(--radius-md);
  background-color: transparent;
  font-size: 0.875rem;
  color: var(--color-mono-3);
  cursor: pointer;
  text-align: left;
}
.c-footer__family-toggle:hover {
  border-color: var(--color-mono-4);
}
.c-footer__family-current {
  flex: 1 1 auto;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* caret 화살표 — 기존 select 와 동일한 두 줄 사선 모티프 */
.c-footer__family-caret {
  flex: 0 0 10px;
  width: 10px;
  height: 5px;
  margin-left: 8px;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-mono-3) 50%),
    linear-gradient(135deg, var(--color-mono-3) 50%, transparent 50%);
  background-position: 0 0, 5px 0;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: transform 0.15s ease;
}
.c-footer__family.is-open .c-footer__family-caret {
  transform: rotate(180deg);
}
/* 열려있을 때 토글 강조 — 기본은 회색 보더 그대로, 포커스 느낌만 살짝 */
.c-footer__family.is-open .c-footer__family-toggle {
  border-color: var(--color-mono-4);
}

.c-footer__family-list {
  position: absolute;
  left: 0;
  right: 0;
  /* 닫힌 상태: 아래로 펼치는 대신 위로 — 푸터가 화면 하단이라 아래로 열면 잘림 방지 */
  bottom: calc(100% + 4px);
  background: #fff;
  border: 1px solid var(--color-mono-6);
  border-radius: var(--radius-md);
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
  padding: 6px 0;
  margin: 0;
  list-style: none;
  max-height: 240px;
  overflow-y: auto;
  z-index: 10;
  /* 기본 숨김 — .is-open 일 때만 노출 */
  display: none;
}
.c-footer__family.is-open .c-footer__family-list {
  display: block;
}
.c-footer__family-item {
  display: block;
  padding: 10px 14px;
  font-size: 0.875rem;
  color: var(--color-mono-2, #444);
  text-decoration: none;
}
.c-footer__family-item:hover,
.c-footer__family-item:focus {
  background: var(--color-footer-bg);
  color: var(--color-mono-1);
}
.c-footer__links {
  display: flex;
  gap: 8px;
  margin-top: 4px;
}
/* 배경은 footer 회색 그대로 (transparent). 내부 SVG 는 currentColor 로 회색톤 매칭 */
.c-footer__link-box {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--color-mono-6);
  border-radius: var(--radius-md);
  font-weight: 700;
  font-size: 1rem;
  color: var(--color-mono-3);
  background: transparent;
}
.c-footer__link-box svg {
  width: 26px;
  height: 26px;
  display: block;
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
  .c-footer__inner {
    flex-direction: column;
    gap: 28px;
  }
  .c-footer__terms { gap: 4px 8px; }
  .c-footer__terms li + li::before { margin-right: 8px; }
  .c-footer__right { flex: 1 1 100%; width: 100%; }
  .c-footer__link-box { width: 40px; height: 40px; }
}