@charset "UTF-8";

/* fw-sheet : 공용 바텀시트 (어디서든 재사용) */

/* 딤드(스크림) */
.fw-sheet-dim {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2200;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  transition: opacity .2s ease;
}
.fw-sheet-dim.is-open {
  opacity: 1;
  transition: opacity .3s ease;
}

.fw-sheet-dim--overNav {
  z-index: 2099;
}

/* 시트 본체 */
.fw-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2201;
  display: flex;
  flex-direction: column;
  max-height: 85vh;
  max-height: 85dvh;
  background: var(--white, #fff);
  border-radius: 20px 20px 0 0;
  /* 테두리 대신 위로 번지는 그림자. 딤이 어두워 연한 그림자는 묻힌다 */
  box-shadow: 0 -4px 12px rgba(0, 0, 0, .15);
  /* 닫혀 있을 때 그림자가 화면 아래에 비치지 않게 그만큼 더 내린다 */
  transform: translateY(calc(100% + 20px));
  transition: transform .2s ease;
  /* iOS 홈 인디케이터 안전영역 만큼 시트 아래 여백 */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.fw-sheet.is-open {
  transform: translateY(0);
  transition: transform .3s ease;
}
/* 열 때 포커스를 받는 시트 틀 - 누르는 요소가 아니라 테두리는 그리지 않는다 */
.fw-sheet:focus {
  outline: none;
}

/* 하단 네비바 위로 띄우는 변형 (네비바 높이 70px) */
.fw-sheet--overNav {
  bottom: 70px;
  transform: translateY(calc(100% + 90px));
}

/* 드래그 핸들 (상단 바) - 50x5 */
.fw-sheet__handle {
  flex-shrink: 0;
  width: 50px;
  height: 5px;
  /* 손잡이 칸은 20. 막대를 위로 붙여 제목과 거리를 둔다 */
  margin: 10px auto 5px;
  border-radius: 3px;
  background: var(--gray-400, #d5d5d5);
}

/* 헤더 (제목 가운데 + 닫기 우측) */
.fw-sheet__header {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;             /* 안여백 4 · 4 를 더해 실제 높이 52 */
  padding: 4px 40px;
}
.fw-sheet__title {
  margin: 0;
  font-family: 'Pretendard SemiBold';
  font-weight: 600;
  font-size: 16px;
  line-height: 1.4;
  color: var(--black-1200, #222);
  text-align: center;
}
.fw-sheet__close {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  background: url("/../img_1.5/btn-close.svg") no-repeat center / 16px;
  font-size: 0;          /* 마크업의 × 등 텍스트 숨김 (아이콘만 노출) */
  color: transparent;
  cursor: pointer;
}

/* 내용 (스크롤 영역) — 위아래만. 가로로 넘기는 줄은 그 줄이 스크롤을 갖는다 */
.fw-sheet__body {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 8px 15px 20px;
}
/* 콘텐츠 좌우 inset — clamp 반응형(작은 화면 줄고 / 큰 화면 45px 캡).
   시트 기본은 15px 유지, 필요한 화면만 이 모디파이어 */
.fw-sheet__body--inset {
  padding-left: 24px;                      /* fallback (clamp 미지원 옛 브라우저) */
  padding-left: clamp(20px, 7vw, 45px);    /* 7vw = 제일 좁은 폴드(344)에서도 안 깨짐 */
  padding-right: 24px;
  padding-right: clamp(20px, 7vw, 45px);
}

/* 하단 버튼 영역 (버튼 배치는 fw-btnBar 가 담당, 여기선 슬롯만) - 기본은 위 구분선 없음 */
.fw-sheet__footer {
  flex-shrink: 0;
}
/* 기본 여백 - :where 로 무게 0. 판매자홈(fw-btnBar · 필터 시트)처럼 여백을 따로 준 곳은 그쪽이 이긴다
   판매자홈 버튼을 이 여백으로 바꾸면 :where 없이 위 규칙에 넣어도 된다 */
:where(.fw-sheet__footer) {
  padding: 14px 15px;
}
/* 버튼 칸 위에 구분선을 긋는 변형 */
.fw-sheet__footer--line {
  border-top: 1px solid var(--gray-300, #eee);
}