@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;
  border: 0.5px solid var(--gray-400, #d5d5d5);
  border-bottom: 0;
  transform: translateY(100%);
  transition: transform .2s ease;
  /* iOS 홈 인디케이터 안전영역 만큼 시트 아래 여백 */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.fw-sheet.is-open {
  transform: translateY(0);
  transition: transform .3s ease;
}

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

/* 드래그 핸들 (상단 바) - 100x3, 디자인 시스템 회색 */
.fw-sheet__handle {
  flex-shrink: 0;
  width: 100px;
  height: 3px;
  margin: 17px auto 4px;          /* figma: 컨테이너 top에서 17px */
  border-radius: 2px;
  background: var(--gray-400, #d5d5d5);
}

/* 헤더 (제목 가운데 + 닫기 우측) */
.fw-sheet__header {
  position: relative;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 4px 56px;
}
.fw-sheet__title {
  margin: 0;
  font-family: 'Pretendard SemiBold';
  font-size: 16px;
  color: var(--black-1200, #222);
  text-align: center;
}
.fw-sheet__close {
  position: absolute;
  top: 50%;
  right: 7px;            /* figma: X 우측끝 15px = 32프레임(right7) + 아이콘 안쪽 8 */
  transform: translateY(-50%);
  width: 32px;           /* 터치영역 32 (figma X 16px + 여유) */
  height: 32px;
  padding: 0;
  border: 0;
  /* 공통 close 아이콘(btn-close.svg). 흰 헤더라 SVG 원색(#222). figma X 16px */
  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;
  -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;
  border-top: 1px solid var(--gray-300, #eee);
}