@charset "UTF-8";

/* fw-common : 새 tobe(모바일) 공용 UI 조각 모음 (버튼·입력·체크박스 등)
 * - 여러 페이지에서 공통으로 쓰는 기본 UI 컴포넌트를 여기 모은다.
 * - 색은 common.css :root 디자인 토큰만 사용 (임의 색 추가 금지).
 * - 레거시 PC public_html/css/tobe/fw-common.css 와 같은 이름이나 경로 분리
 *   (레포 common.css PC/모바일 짝 관례). PC건은 추후 assets 이전 예정. */

/* ===== 버튼 ===== */
.fw-btn {
  display: inline-block;
  box-sizing: border-box;
  padding: 16px 10px;
  line-height: 1;
  vertical-align: middle;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--primary-300, #169dab);
  color: var(--white, #fff);
  font-size: 13px;
  font-family: 'Pretendard';
  text-decoration: none;
  cursor: pointer;
}

/* 크기 */
.fw-btn--sm {
  padding: 5px 12px;
  font-size: 11px;
  border-radius: 10px;
}

/* 채움 변형 */
.fw-btn--gray {
  background: var(--gray-900, #8d8d8d);
}
.fw-btn--light {
  background: var(--gray-300, #eee);
  color: var(--black-1200, #222);
}
.fw-btn--dark {
  background: var(--black-1200, #222);
}
.fw-btn--red {
  background: var(--color-error, #d6080e);
}

/* 아웃라인 변형 */
.fw-btn--outline {
  background: transparent;
  border-color: var(--primary-300, #169dab);
  color: var(--primary-300, #169dab);
}
.fw-btn--outline-gray {
  background: transparent;
  border-color: var(--gray-700, #aaa);
  color: var(--black-1000, #666);
}
.fw-btn--outline-light {
  background: var(--white, #fff);
  border-color: var(--gray-500, #ccc);
  color: var(--black-1000, #666);
}
.fw-btn--outline-dark {
  background: transparent;
  border-color: var(--black-1200, #222);
  color: var(--black-1200, #222);
}

/* 전체폭 (바텀시트 하단 버튼 등) */
.fw-btn--block {
  display: block;
  width: 100%;
}

/* 버튼 묶음 */
.fw-btn-group {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ===== 버튼 바 (하단 액션 버튼바) =====
   .fw-btn 들을 담는 바. 안의 버튼이 flex:1 로 균등 분할.
   - 1개 → 풀폭 / 2개 → 반반 / 3개 → 3등분
   - 모바일 풀폭, 큰 화면에선 max-width 까지만 + 가운데 */
.fw-btnBar {
  display: flex;
  gap: 0;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  box-sizing: border-box;
  padding: 12px 16px;
  background: var(--white, #fff);
}
.fw-btnBar > .fw-btn {
  flex: 1;
  border-radius: 0;   /* 바 안에선 직각 (맥락이 결정, 버튼 자체는 안 건드림) */
}

/* 작게 가운데 — 단일 버튼을 반쪽 폭으로 가운데 */
.fw-btnBar--center {
  justify-content: center;
}
.fw-btnBar--center > .fw-btn {
  flex: 0 1 50%;
}

/* 하단 고정 (페이지 맨 아래 붙임) */
.fw-btnBar--fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 100;
  border-top: 1px solid var(--gray-300, #eee);
  /* iOS 홈 인디케이터 안전영역 만큼 아래 여백 추가 */
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}

/* ===== 입력 ===== */
.fw-input {
  width: 100%;
  box-sizing: border-box;
  padding: 10px 12px;
  border: 1px solid var(--gray-400, #d5d5d5);
  border-radius: 0;          /* 직각 (시안·회사 톤) */
  font-size: 14px;
  outline: none;
}
.fw-input:focus {
  border-color: var(--primary-300, #169dab);   /* 포커스 청록 라인 */
}
.fw-input[readonly] {
  background: var(--gray-200, #f5f5f5);   /* 읽기전용(우편번호·기본주소) = 회색 */
}

/* 입력 + 지우기(X) 묶음 — 포커스 + 값 있을 때만 X 노출 */
.fw-field {
  position: relative;
}
.fw-field .fw-input {
  padding-right: 38px;       /* X 자리 확보 */
}
.fw-field__clear {
  position: absolute;
  top: 50%;
  right: 6px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  display: none;             /* 평소 숨김 */
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}
/* X 아이콘 = 공용 sprite (newCommon searchBox 의 iconClearBtn 과 동일) */
.fw-field__clear::before {
  content: "";
  display: block;
  width: 15px;
  height: 15px;
  background: url("https://icon.feelway.com/recent/common/icon/spIcon_commons.png") no-repeat -58px -83px;
  background-size: 166px;
}
/* 포커스 + 값 있을 때만 X (placeholder 보이면 빈 칸 → 숨김) */
.fw-field:focus-within .fw-input:not(:placeholder-shown) ~ .fw-field__clear {
  display: flex;
}

/* ===== 체크박스 ===== */
.fw-checkbox {
  display: inline-flex;
  align-items: center;
  line-height: 1;
  cursor: pointer;
}
/* input 은 숨기되 display:none 은 안 씀 (폼 전송·접근성 유지) */
.fw-checkbox input[type=checkbox] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}
.fw-checkbox::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-right: 6px;
  border: 1px solid var(--gray-400, #d5d5d5);
  border-radius: 3px;
  background: var(--white, #fff);
}
.fw-checkbox:hover::before {
  border-color: var(--primary-300, #169dab);
}
.fw-checkbox:has(input:checked)::before {
  border-color: var(--primary-300, #169dab);
  background: var(--primary-300, #169dab)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 11.5L3 8l1-1 2.5 2.5L11 5l1 1z' fill='%23fff'/%3E%3C/svg%3E")
    no-repeat center / 14px;
}
.fw-checkbox:has(input:disabled) {
  color: var(--gray-600, #b5b5b5);
  cursor: not-allowed;
}
.fw-checkbox:has(input:disabled)::before {
  border-color: var(--gray-400, #d5d5d5);
  background: var(--gray-200, #f5f5f5);
}

/* ===== 칩 (필터/토글 pill) ===== */
.fw-chip {
  flex-shrink: 0;
  padding: 7px 15px;
  border: 1px solid var(--gray-400, #d9d9d9);
  border-radius: 15px;
  background: var(--white, #fff);
  font-family: 'Pretendard';
  font-weight: normal;
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  color: var(--black-1000, #666);
}
/* 활성은 색·굵기·보더만 바뀜(padding 동일) — 선택 시 폭이 변하면 옆 칩이 밀림 */
.fw-chip.is-active {
  border: 1.5px solid var(--black-1200, #222);
  font-family: 'Pretendard SemiBold';
  color: var(--black-1200, #222);
}

/* ===== 인덱스 바 (알파벳 등 가로 스크롤 인덱스 + 첫 항목 좌측 고정) =====
   칩은 .fw-chip 사용. 브랜드 인덱스 등 공용 */
.fw-indexBar {
  display: flex;
  align-items: center;
  gap: 5px;
}
.fw-indexBar__fixed {
  flex-shrink: 0;
}
.fw-indexBar__scroll {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 5px;
  overflow-x: auto;
  -ms-overflow-style: none;
  scrollbar-width: none;
}
.fw-indexBar__scroll::-webkit-scrollbar {
  display: none;
}
/* 인덱스 칩: 필터칩(.fw-chip)보다 작은 인덱스 전용 — 높이28·radius10·보더0.5px·글자#999 (figma 1-3680) */
.fw-indexBar .fw-chip {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 28px;
  padding: 0 12px;
  border-width: 0.5px;
  border-radius: 10px;
  color: var(--gray-800, #999);
}
.fw-indexBar .fw-chip.is-active {
  padding: 0 12px;
  border-width: 1.5px;
  color: var(--black-1200, #222);
}

/* ===== 구분 띠 (영역·카드 사이 두꺼운 회색 띠) =====
   body 좌우 inset(5px) 빠져나와 화면 끝까지 = full-bleed. -15px는 과해서 가로 오버플로우(흔들림) */
.fw-divider {
  height: 13px;
  width: 100vw;
  margin-left: 50%;
  transform: translateX(-50%);
  background: var(--gray-200, #f4f4f4);
}

/* 세그먼트 칩 (연결형 토글) */
.fw-segChip {
  display: inline-flex;
  align-items: center;
  height: 28px;
  box-sizing: border-box;
}
.fw-segChip__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  padding: 0 10px;
  border: 0;
  background: var(--white, #fff);
  box-shadow: inset 0 0 0 1px var(--gray-400, #d9d9d9);
  box-sizing: border-box;
  font-family: 'Pretendard';
  font-weight: normal;
  font-size: 12px;
  line-height: 1;
  color: var(--gray-800, #999);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, box-shadow 0.2s ease;
}
/* 보더 겹쳐 단일선 (경계 2px 방지) */
.fw-segChip__btn + .fw-segChip__btn { margin-left: -1px; }
/* 코너: 첫=좌측 둥금 / 끝=우측 둥금 / 중간=각짐 */
.fw-segChip__btn:first-child { border-radius: 15px 0 0 15px; }
.fw-segChip__btn:last-child { border-radius: 0 15px 15px 0; }
.fw-segChip__btn:only-child { border-radius: 15px; }
/* 선택 */
.fw-segChip__btn.active,
.fw-segChip__btn.is-active {
  position: relative;
  z-index: 1;
  box-shadow: inset 0 0 0 1.5px var(--black-1200, #222);
  font-family: 'Pretendard SemiBold';
  color: var(--black-1200, #222);
}

/* ===== 필터 칩 (단독 드롭다운: 가격/브랜드/카테고리 — 화살표→시트, 선택 시 다크+X) =====
   범용 원자. 기본=회색 보더+아래화살표 / 선택(.is-active)=다크 보더+X.
   X·화살표는 상태로 토글(멀티클래스 X). 아이콘은 currentColor라 글자색 따라감 (figma 1-3916) */
.fw-filterChip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  box-sizing: border-box;
  padding: 0 12px;
  border: 0;
  box-shadow: inset 0 0 0 1px var(--gray-400, #d9d9d9);
  border-radius: 15px;
  background: var(--white, #fff);
  font-family: 'Pretendard';
  font-weight: normal;
  font-size: 12px;
  line-height: 1;
  color: var(--gray-800, #999);
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease, box-shadow 0.2s ease;
}
/* 아래 화살표 (기본) */
.fw-filterChip__arrow {
  flex: none;
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: rotate(45deg);
}
/* X (선택 시만) */
.fw-filterChip__clear {
  flex: none;
  position: relative;
  display: none;
  width: 10px;
  height: 10px;
}
.fw-filterChip__clear::before,
.fw-filterChip__clear::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 100%;
  height: 1px;
  background: currentColor;
}
.fw-filterChip__clear::before { transform: rotate(45deg); }
.fw-filterChip__clear::after { transform: rotate(-45deg); }
/* 선택 상태: 다크 보더·글자 + 화살표→X */
.fw-filterChip.is-active {
  box-shadow: inset 0 0 0 1.5px var(--black-1200, #222);
  font-family: 'Pretendard SemiBold';
  color: var(--black-1200, #222);
}
.fw-filterChip.is-active .fw-filterChip__arrow { display: none; }
.fw-filterChip.is-active .fw-filterChip__clear { display: inline-block; }