/* --- v7.2: 앱 레이아웃 설정 --- */
/* 공통 스타일은 assets/toss-ui.css 로 이동됨 */

/* --- 단계 2: 원본 미리보기 --- */
#sourcePreview {
  width: 60px;
  height: 60px;
  border-radius: 10px;
  object-fit: cover;
  margin-bottom: 24px;
  border: 1px solid #f2f4f6;
}

/* --- 옵션 카드 --- */
.option-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.option-card {
  width: 100%;
  padding: 16px;
  border: 2px solid #e5e8eb;
  border-radius: 14px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  /* 카드의 높이 통일을 위해 정렬 방식 지정 */
  justify-content: flex-start;
}
.option-card:hover {
  border-color: #0070ff;
}
.option-card.active {
  border-color: #0070ff;
  box-shadow: 0 0 0 2px #0070ff;
}
.option-card strong {
  font-size: 15px;
  font-weight: 600;
  color: #333d4b;
}

/* --- (수정 v7.2) 미리보기 박스 및 사각형 크기 통일 --- */
.grid-preview {
  width: 48px;
  height: 80px; /* (핵심) 4줄짜리 높이(20px * 4)에 맞춰 고정 */
  display: grid;
  gap: 2px;
  align-content: center; /* (핵심) 내용물(그리드)을 수직 중앙 정렬 */
  margin: 0 auto;
}

.grid-preview .grid-cell {
  background-color: #dde0e3;
  width: 100%;
  aspect-ratio: 4 / 5; /* (핵심) 모든 셀을 4:5 비율로 고정 */
  border-radius: 1px;
}

/* 각 옵션별 그리드 구조 (행 높이 강제 지정 삭제) */
.grid-preview[data-grid-vis="3x1-pano"] {
  grid-template-columns: 1fr 1fr 1fr;
  /* grid-template-rows 삭제 -> 비율에 따라 자동 높이 */
}
.grid-preview[data-grid-vis="3x2-pano"] {
  grid-template-columns: 1fr 1fr 1fr;
  /* 2줄이면 자동으로 2줄 생성 */
}
.grid-preview[data-grid-vis="3x3-pano"] {
  grid-template-columns: 1fr 1fr 1fr;
}
.grid-preview[data-grid-vis="3x4-pano"] {
  grid-template-columns: 1fr 1fr 1fr;
}

.option-card.active .grid-preview .grid-cell {
  background-color: #0070ff;
}

/* --- 크롭 & 여백 미리보기 --- */
#cropperContainer {
  position: relative;
  width: 100%;
  height: 40vh;
  background-color: #f2f4f6;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
}
#fitPreviewContainer {
  width: 100%;
  height: 40vh;
  background-color: #000000;
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 24px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
#cropperContainer img {
  display: block;
  max-width: 100%;
}

/* --- 가이드 스타일 --- */
.cropper-crop-box .seam-guides-dynamic {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}
/* 썸네일에서 잘려나가는 영역 (붉은 반투명) */
.seam-margin-zone {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1.08%; /* 33.5px / 3106px */
  background-color: rgba(255, 0, 0, 0.3);
  border: 0;
}
.seam-margin-zone.left {
  left: 0;
  border-right: 1px solid rgba(255, 0, 0, 0.5);
}
.seam-margin-zone.right {
  right: 0;
  border-left: 1px solid rgba(255, 0, 0, 0.5);
}

/* 이미지가 나뉘는 분기점 (흰색 실선) */
.seam-split-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 1px;
  background-color: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.3);
}
.seam-split-line.split-1 {
  left: 33.69%;
}
.seam-split-line.split-2 {
  left: 66.31%;
}

/* 가로 분할선 (흰색 점선) */
.seam-horizontal-line {
  position: absolute;
  left: 0;
  right: 0;
  height: 1px;
  border-top: 1px dashed rgba(255, 255, 255, 0.6);
}

/* --- 결과 그리드 --- */
#gridResultContainer {
  display: grid;
  gap: 5px;
  border: 1px solid #f2f4f6;
  border-radius: 12px;
  padding: 5px;
}
#gridResultContainer a {
  position: relative;
  display: block;
  line-height: 0;
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.1s ease;
}
#gridResultContainer a:hover {
  transform: scale(1.03);
}
#gridResultContainer img {
  width: 100%;
  height: auto;
}
/* 업로드 순서 번호 */
.grid-number-label {
  position: absolute;
  top: 6px;
  left: 6px;
  background-color: #0070ff; /* 토스 파란색 강조 */
  color: white;
  border-radius: 8px;
  padding: 4px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* --- Safari 하단 주소창 대응 --- */
.app-container {
  padding-bottom: env(safe-area-inset-bottom);
}

.card-footer,
.card-footer-simple,
.card-footer.button-group {
  padding-bottom: calc(24px + env(safe-area-inset-bottom));
}