@charset "UTF-8";

/* 판매자홈 스낵바(토스트) - 하단 중앙, 다크, 자동소멸 */
.fw-snackbar {
  position: fixed;
  left: 50%;
  bottom: 90px;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  width: 90%;
  max-width: 420px;
  min-height: 48px;
  box-sizing: border-box;
  padding: 14px 12px 14px 16px;
  border-radius: 4px;
  background: var(--black-1200, #222);
  color: var(--white, #fff);
  font-size: 14px;
  line-height: 20px;
  letter-spacing: 0.25px;
  /* 딤드 없이 뜨는 자리가 있어 바탕과 갈라 보이게 두 겹 */
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3), 0 4px 8px 3px rgba(0, 0, 0, .15);
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s, transform .3s;
}

/* 떠 있는 TOP 버튼 - 스낵바가 뜨면 그만큼 위로 비켜선다.
   자리는 JS 가 bottom 으로 준다. 여기선 움직임만 부드럽게 */
.common-quick {
  transition: transform .3s;
}

/* 노출 상태 */
.fw-snackbar--show {
  opacity: 1;
  pointer-events: auto;
}

/* 안내 텍스트 - 남는 공간 차지 */
.fw-snackbar__text {
  flex: 1;
}

/* 액션(바로가기) 링크 - 관심판매자. 짧은 말이 기본이다.
   누르는 자리는 위아래로만 넓힌다. 좌우로 넓히면 옆 X 의 누르는 자리와 겹쳐
   글자 끝을 눌렀을 때 닫혀 버린다 */
.fw-snackbar__action {
  flex-shrink: 0;
  padding: 10px 0;
  margin: -10px 0;
  font-family: 'Pretendard Medium';
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.1px;
  text-decoration: none;
  white-space: nowrap;
}

/* 전역 a 규칙(reset.css)이 색과 밑줄을 덮어서 상태별로 다시 적는다.
   밑줄은 누를 때만 생기므로 :hover·:active 까지 함께 눌러야 한다 */
.fw-snackbar__action:link,
.fw-snackbar__action:visited,
.fw-snackbar__action:hover,
.fw-snackbar__action:active {
  color: var(--primary-200, #D0EBEE);
  text-decoration: none;
}

/* 경고 아이콘 - 문구 밖 제 칸. 여러 줄이면 문구 전체 기준 세로 가운데에 선다 */
.fw-snackbar__icon {
  flex: none;
  display: flex;
  color: var(--color-warning, #ed4e2b);
}

/* 닫기 X - 아이콘이 곧 상자다. 터치영역은 padding 으로 넓히고
   그만큼 margin 으로 되돌려 배치에는 13px 만 차지하게 한다.
   세로는 부모의 align-items 가 가운데로 맞춘다 */
.fw-snackbar__close {
  flex: none;
  display: flex;
  /* 누르는 자리. 왼쪽은 옆 요소와의 간격(12)만큼만 넓혀 서로 겹치지 않게 한다 */
  padding: 16px 16px 16px 12px;
  margin: -16px -16px -16px -12px;
  border: 0;
  background: none;
  color: var(--white, #fff);
  cursor: pointer;
}
/* 인라인 SVG 는 글자 기준선에 얹혀 자리가 틀어진다 */
.fw-snackbar__closeIcon {
  display: block;
}

/* 직접 xtop 을 준 때만 첫 줄 위로. 기본은 가운데다 */
.fw-snackbar--xtop .fw-snackbar__icon,
.fw-snackbar--xtop .fw-snackbar__close {
  align-self: flex-start;
}

/* 액션 글자가 길 때 (fw-snackbar--stack)
   '마이페이지 > 사용 가능한 쿠폰 보기' 처럼 긴 말은 문구 옆에 두면
   문구가 좁은 칸으로 밀린다. 액션만 아랫줄 오른쪽으로 내리고 X 는 문구 줄에 남긴다 */
/* 액션이 아랫줄로 가면 X 만 문구 줄에 남는다. 세로는 가운데 */
.fw-snackbar--stack .fw-snackbar__close {
  order: 1;
}
.fw-snackbar--stack .fw-snackbar__action {
  order: 2;
  flex: 1 0 100%;
  text-align: right;
  white-space: normal;
}