@charset "UTF-8";

/* ============================================
   SS Footer (공용) - Figma 2928:54790 (Section/Footer, 1200x640)
   ============================================
   [요소] 상단 메뉴 4열(우측 정렬) + 하단 정보 블록(로고 / 사업자 정보 / 정책 링크 / 인스타그램)
   [없는 요소] 기존 new-footer 의 구조는 승계하지 않는다 — 신규 디자인이다
              (2차 메뉴 문구도 다르다: '공동구매 셀러' → '공구 셀러', '공동구매 밴더사' → '공구 벤더사')
   [없는 요소] hover / focus / transition (시안에 없음)

   바깥: background #FFFFFF, padding 160px 24px 40px
   Footer/Info 카드: background #F2F2F2, radius 40, padding 30px 40px, column, gap 40, width 100%
   메뉴 행: row, justify-content flex-end, gap 50 / 각 열 column gap 6, padding-right 20
     1차 메뉴 17.5px 600, lh 1.2, ls -0.0086em, #000000
     2차 메뉴 17.5px 500, lh 1.5, ls -0.01em, #666666, 항목 padding 2px 4px
   정보 블록: column gap 12
     로고 139x16
     사업자 정보 12.5px 500, lh 1.5, ls -0.04em, #666666 (2줄)
     정책 링크 row wrap gap 10, 각 padding 2px 20px 2px 0, 12.5px 600, lh 1.5, #000000
     소셜 박스 46x46 / 글리프 22x22

   높이 640 = padding-top 160 + 카드 440 + padding-bottom 40
   ============================================ */
.ss-footer {
  --ss-footer-pad-top: 160px;
  --ss-footer-pad-x: 24px;
  --ss-footer-pad-bottom: 40px;
  --ss-footer-card-pad: 30px 40px; /* Footer/Info */
  --ss-footer-card-gap: 40px; /* 메뉴 행 ↔ 정보 블록 */
  --ss-footer-menu-gap: 50px; /* 열 간 */
  --ss-footer-col-gap: 6px; /* 1차 ↔ 2차 */
  --ss-footer-info-gap: 12px; /* 정보 블록 항목 간 */

  padding: var(--ss-footer-pad-top) var(--ss-footer-pad-x)
    var(--ss-footer-pad-bottom);
  background: #ffffff;
}

.ss-footer__card {
  box-sizing: border-box;
  width: 100%;
  max-width: 1152px; /* 프레임 1200 − 좌우 padding 24×2 */
  margin: 0 auto;
  padding: var(--ss-footer-card-pad);
  border-radius: 40px;
  background: #f2f2f2;
  display: flex;
  flex-direction: column;
  gap: var(--ss-footer-card-gap);
}

/* ---- 메뉴 4열 (우측 정렬) ---- */
.ss-footer__menus {
  display: flex;
  justify-content: flex-end;
  gap: var(--ss-footer-menu-gap);
  /* 좁은 폭 방어: 1152 미만에서 가로 스크롤 대신 줄바꿈 */
  flex-wrap: wrap;
}

.ss-footer__col {
  display: flex;
  flex-direction: column;
  gap: var(--ss-footer-col-gap);
  padding-right: 20px;
}

.ss-footer__col-title {
  font-weight: 600;
  font-size: 17.5px;
  line-height: 1.2;
  letter-spacing: -0.0086em;
  color: #000000;
  white-space: nowrap;
}

.ss-footer__col-links {
  display: flex;
  flex-direction: column;
  list-style: none;
  margin: 0;
  padding: 0;
}

.ss-footer__col-links a {
  display: block;
  padding: 2px 4px;
  font-weight: 500;
  font-size: 17.5px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: #666666;
  text-decoration: none;
  white-space: nowrap;
}

/* ---- 정보 블록 ---- */
.ss-footer__info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ss-footer-info-gap);
}

.ss-footer__logo {
  display: block;
  line-height: 0;
}

.ss-footer__logo img {
  width: 139px;
  height: 16px;
}

.ss-footer__company {
  font-weight: 500;
  font-size: 12.5px;
  line-height: 1.5;
  letter-spacing: -0.04em;
  color: #666666;
}

.ss-footer__policy {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.ss-footer__policy a {
  padding: 2px 20px 2px 0;
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.5;
  color: #000000;
  text-decoration: none;
  white-space: nowrap;
}

/* 소셜 - Figma 2928:54790 (Footer/Social): 박스 46x46 안에 글리프 36.99x36.99 */
.ss-footer__sns-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
}

.ss-footer__sns-link img {
  width: 36.99px;
  height: 36.99px;
}

/* ============================================
   모바일 - Figma 2962:11226 (Section/Footer, 375x364)
   ============================================
   [없는 요소] 4열 메뉴(다운로드 / 스타일셀러 / 스타일셀러 파트너 / 고객센터)가 통째로 없다.
              PC 에는 필요하므로 마크업은 그대로 두고 여기서 display:none 으로만 숨긴다.
   모바일에 남는 것: 로고 → 사업자 정보 → 정책 링크 3개 → 소셜

   바깥 패딩 160px 24px 40px → 80px 20px
   카드 radius 40 → 24 / 패딩 30px 40px → 44px 24px 24px
   사업자 정보 12.5px 500 ls-0.04em → 9px 500, lh 1.5, ls -0.005em, #666666
   정책 링크 12.5px 600 → 9px 500, lh 1.5, ls -0.005em, #000000
             item 패딩 2px 20px 2px 0 → 2px 12px 2px 0
   소셜 박스 46 → 24 / 글리프 36.99 → 19.3 (PC 와 같은 비율 0.804)
   로고 139x16, 내부 gap 12, 배경(#FFFFFF / 카드 #F2F2F2), 정책 flex-wrap gap 10 은 PC 와 동일
   ============================================ */
@media screen and (max-width: 768px) {
  .ss-footer {
    --ss-footer-pad-top: 80px;
    --ss-footer-pad-x: 20px;
    --ss-footer-pad-bottom: 80px;
    --ss-footer-card-pad: 44px 24px 24px;
  }

  .ss-footer__card {
    border-radius: 24px;
  }

  /* [없는 요소] 모바일 시안에 4열 메뉴가 없다 */
  .ss-footer__menus {
    display: none;
  }

  .ss-footer__company {
    font-size: 9px;
    letter-spacing: -0.005em;
  }

  .ss-footer__policy a {
    padding: 2px 12px 2px 0;
    font-weight: 500;
    font-size: 9px;
    letter-spacing: -0.005em;
  }

  .ss-footer__sns-link {
    width: 24px;
    height: 24px;
  }

  .ss-footer__sns-link img {
    width: 19.3px;
    height: 19.3px;
  }
}