/* ===========================
   FRAME SELECT 프레임 선택 화면
   =========================== */

.frame-select-screen {
  background: #ffffff;
}

/* 메인 레이아웃 */
.frame-select-main {
  padding: 5.15cqw;
  gap: 5.15cqw;
  min-height: 0;
  overflow: hidden;
}

/* 타이틀 */
.frame-select-title {
  font-weight: 700;
  font-size: 5.15cqw;
  line-height: 6.87cqw;
  text-align: center;
  color: #222222;
  margin: 0;
}

/* 이미지 프레임 (센터링 컨테이너, flex-basis를 절대값 0으로 설정) */
.frame-select-frame {
  flex: 1 1 0;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 프레임 내부 (테두리 포함 2:3 비율) */
.frame-select-frame-inner {
  height: 100%;
  aspect-ratio: 2 / 3;
  border: 0.43cqw solid #222222;
  box-sizing: border-box;
  overflow: hidden;
}

/* 캔버스 */
.frame-select-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 프레임 옵션 섹션 */
.frame-options-section {
  display: flex;
  flex-direction: column;
  gap: 3.43cqw;
  flex-shrink: 0;
}

/* 섹션 라벨 */
.frame-options-label {
  font-weight: 700;
  font-size: 5.15cqw;
  line-height: 6.22cqw;
  color: #222222;
  margin: 0;
}

/* 프레임 옵션 행 (적용안함 고정 + 스크롤 영역) */
.frame-options-row {
  display: flex;
  gap: 3.43cqw;
  padding: 0.86cqw;
  /* margin: -0.86cqw 0; */
}

/* 프레임 스크롤 영역 */
.frame-options-scroll {
  display: flex;
  gap: 3.43cqw;
  overflow-x: auto;
  min-width: 0;
  user-select: none;
  -webkit-user-drag: none;
  padding: 0.86cqw;
  margin: -0.86cqw;
}

/* 적용 안함 버튼 */
.frame-option-none {
  width: 18cqw;
  height: 18cqw;
  background: #222222;
  border-radius: 3.43cqw;
  border: none;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.86cqw;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.frame-option-none:active {
  transform: scale(0.95);
}
.frame-option-none-icon {
  width: 4.29cqw;
  height: 4.29cqw;
  color: #ffffff;
}
.frame-option-none-text {
  font-weight: 600;
  font-size: 2.58cqw;
  color: #ffffff;
  text-align: center;
}

/* 프레임 썸네일 */
.frame-option-thumb {
  width: 18cqw;
  height: 18cqw;
  background: #222222;
  border-radius: 3.43cqw;
  overflow: hidden;
  border: none;
  padding: 0;
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.2s;
}
.frame-option-thumb:active {
  transform: scale(0.95);
}

/* 선택 상태: 흰색 갭 + 검정 테두리 (이중 box-shadow) */
.frame-option-none.selected,
.frame-option-thumb.selected {
  box-shadow:
    0 0 0 0.43cqw #ffffff,
    0 0 0 0.86cqw #222222;
}
.frame-option-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
}

/* 버튼 컨테이너 */
.frame-select-buttons {
  display: flex;
  gap: 5.15cqw;
  flex-shrink: 0;
}

/* 버튼 공통 */
.frame-select-btn {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4.29cqw 6.87cqw;
  gap: 1.72cqw;
  background: #222222;
  border-radius: 4.29cqw;
  border: none;
  cursor: pointer;
  font-family: "Pretendard", sans-serif;
  font-weight: 700;
  font-size: 4.29cqw;
  line-height: 5.15cqw;
  text-align: center;
  color: #ffffff;
  transition: transform 0.2s;
}
.frame-select-btn:active {
  transform: scale(0.95);
}
.frame-select-btn--secondary {
  background: #666666;
}