/* 팜시크릿 — 중고거래 등록 (talk-write 폼 패턴 차용)
 * uw-* 네임스페이스
 */

.uw-main { min-width: 0; }

.uw-main-head {
  padding-bottom: 22px;
  margin-bottom: 28px;
  border-bottom: 1px solid #eef0f3;
}
.uw-main-title {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 800;
  color: #111827;
  letter-spacing: -0.025em;
  line-height: 1.25;
}
.uw-main-desc {
  margin-top: 8px;
  font-size: 13.5px;
  color: #6b7280;
  letter-spacing: -0.01em;
  word-break: keep-all;
}

/* ═════════════════════════════════════════════
   폼 필드 공통
   ═════════════════════════════════════════════ */
.uw-form {
  display: flex;
  flex-direction: column;
  gap: 30px;
}
.uw-field {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.uw-field-label {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  letter-spacing: -0.015em;
}
.uw-field-sub {
  margin-left: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #9ca3af;
}
.uw-req {
  color: var(--color-brand);
  font-weight: 800;
}
.uw-help {
  display: inline-flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 12.5px;
  color: #6b7280;
  line-height: 1.55;
}
.uw-help svg { flex-shrink: 0; width: 14px; height: 14px; margin-top: 2px; color: #9ca3af; }

/* 인풋 */
.uw-input {
  width: 100%;
  height: 46px;
  padding: 0 14px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14.5px;
  color: #111827;
  font-family: var(--font-sans);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.uw-input:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 4px rgba(254, 105, 27, 0.12);
}
.uw-input::placeholder { color: #9ca3af; }
select.uw-input {
  appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 38px;
}

/* 인풋 + 카운트 */
.uw-input-wrap {
  position: relative;
}
.uw-input-count {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11.5px;
  color: #9ca3af;
  font-family: var(--font-mono);
}
.uw-input-wrap .uw-input { padding-right: 70px; }

/* ═════════════════════════════════════════════
   사진 업로드
   ═════════════════════════════════════════════ */
.uw-photo {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(102px, 1fr));
  gap: 10px;
}
.uw-photo-add {
  aspect-ratio: 1 / 1;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  background: #f9fafb;
  border: 1.5px dashed #d1d5db;
  border-radius: 10px;
  color: #6b7280;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease, background .12s ease;
}
.uw-photo-add:hover {
  border-color: var(--color-brand);
  color: var(--color-brand);
  background: #fffaf6;
}
.uw-photo-add svg { width: 24px; height: 24px; }
.uw-photo-add-label {
  font-size: 12px;
  font-weight: 600;
}
.uw-photo-add-count {
  font-size: 11px;
  color: #9ca3af;
  font-family: var(--font-mono);
}
.uw-photo-item {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 10px;
  overflow: hidden;
  background: #f3f4f6;
  cursor: grab;
  touch-action: none;
}
.uw-photo-item:active { cursor: grabbing; }

/* SortableJS — 드래그 중 placeholder(원래 자리) */
.uw-photo-item.is-ghost {
  opacity: 0.32;
  background: #f9fafb;
}
.uw-photo-item.is-ghost > * { visibility: hidden; }

/* 들고 있는 미러 element */
.uw-photo-item.is-chosen {
  cursor: grabbing;
}
.uw-photo-item.is-drag {
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.2), 0 0 0 2px var(--color-brand) inset;
  transform: scale(1.04);
  opacity: 0.96;
}
.uw-photo-drag {
  position: absolute;
  left: 6px;
  bottom: 6px;
  width: 22px; height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, 0.55);
  color: #fff;
  border-radius: 5px;
  pointer-events: none;
  backdrop-filter: blur(2px);
}
.uw-photo-drag svg { width: 12px; height: 12px; }
.uw-photo-item img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.uw-photo-cover {
  position: absolute;
  left: 6px; top: 6px;
  padding: 3px 7px;
  background: var(--color-brand);
  color: #fff;
  border-radius: 5px;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.02em;
  display: none;
  z-index: 2;
}
/* 첫 번째 사진만 "대표" 노출 — 드래그 후에도 CSS만으로 동기화 */
.uw-photo-item:first-of-type .uw-photo-cover {
  display: inline-flex;
}
.uw-photo-remove {
  position: absolute;
  right: 6px; top: 6px;
  width: 24px; height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(17, 24, 39, 0.75);
  color: #fff;
  border: 0;
  border-radius: 9999px;
  cursor: pointer;
  backdrop-filter: blur(2px);
}
.uw-photo-remove svg { width: 12px; height: 12px; }

/* ═════════════════════════════════════════════
   라디오 칩 (카테고리, 거래방식, 상태)
   ═════════════════════════════════════════════ */
.uw-radio-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.uw-radio-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 13.5px;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  transition: all .12s ease;
}
.uw-radio-chip:hover { border-color: #d1d5db; background: #f9fafb; }
.uw-radio-chip input {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.uw-radio-chip:has(input:checked) {
  border-color: var(--color-brand);
  background: #fff7ed;
  color: var(--color-brand-dark);
  font-weight: 700;
}
.uw-radio-emoji { font-size: 15px; line-height: 1; }

/* ═════════════════════════════════════════════
   가격 입력 + 거래방식 토글
   ═════════════════════════════════════════════ */
.uw-price-row {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.uw-price-input-wrap {
  flex: 1;
  position: relative;
}
.uw-price-input-wrap .uw-input {
  padding-right: 60px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
}
.uw-price-suffix-fixed {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 14px;
  color: #6b7280;
  font-weight: 600;
}
.uw-price-input-wrap.is-disabled .uw-input {
  background: #f3f4f6;
  color: #9ca3af;
}

.uw-offer-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
  font-size: 13px;
  color: #4b5563;
  cursor: pointer;
}
.uw-offer-toggle input { accent-color: var(--color-brand); }

/* ═════════════════════════════════════════════
   지역 + 택배 옵션
   ═════════════════════════════════════════════ */
.uw-region-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.uw-option-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.uw-check-line {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #1f2937;
  cursor: pointer;
}
.uw-check-line input { accent-color: var(--color-brand); width: 18px; height: 18px; }

/* ═════════════════════════════════════════════
   본문 textarea
   ═════════════════════════════════════════════ */
.uw-textarea {
  width: 100%;
  min-height: 240px;
  padding: 16px 16px;
  background: #fff;
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  font-size: 14.5px;
  line-height: 1.65;
  color: #111827;
  font-family: var(--font-sans);
  resize: vertical;
}
.uw-textarea:focus {
  outline: none;
  border-color: var(--color-brand);
  box-shadow: 0 0 0 4px rgba(254, 105, 27, 0.12);
}
.uw-textarea-count {
  align-self: flex-end;
  font-size: 11.5px;
  color: #9ca3af;
  font-family: var(--font-mono);
}

/* ═════════════════════════════════════════════
   액션 (취소 / 임시저장 / 등록)
   ═════════════════════════════════════════════ */
.uw-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 24px;
  margin-top: 8px;
  border-top: 1px solid #eef0f3;
  flex-wrap: wrap;
}
.uw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 48px;
  padding: 0 22px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  cursor: pointer;
  text-decoration: none;
  transition: all .15s ease;
  border: 1.5px solid transparent;
  background: transparent;
}
.uw-btn--outline {
  background: #fff;
  border-color: #e5e7eb;
  color: #4b5563;
}
.uw-btn--outline:hover { background: #f9fafb; border-color: #d1d5db; color: #111827; }
.uw-btn--primary {
  background: var(--color-brand);
  color: #fff;
}
.uw-btn--primary:hover { background: var(--color-brand-dark); }
.uw-btn--primary:disabled {
  background: #e5e7eb;
  color: #9ca3af;
  cursor: not-allowed;
}
.uw-btn svg { width: 14px; height: 14px; }

@media (max-width: 640px) {
  .uw-actions {
    flex-direction: column-reverse;
    align-items: stretch;
  }
  .uw-btn { width: 100%; }
}

/* ═════════════════════════════════════════════
   안내 박스 (게이팅)
   ═════════════════════════════════════════════ */
.uw-gate {
  padding: 40px 24px;
  text-align: center;
  background: linear-gradient(135deg, #fff7ed 0%, #ffedd5 100%);
  border: 1px solid #fed7aa;
  border-radius: 14px;
}
.uw-gate-emoji { font-size: 40px; margin-bottom: 8px; }
.uw-gate-title {
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 800;
  color: #9a3412;
  letter-spacing: -0.02em;
  margin-bottom: 6px;
}
.uw-gate-desc {
  font-size: 13.5px;
  color: #7c2d12;
  line-height: 1.55;
  margin-bottom: 18px;
}
.uw-gate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 46px;
  padding: 0 24px;
  background: var(--color-brand);
  color: #fff;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 700;
  text-decoration: none;
}
.uw-gate-btn:hover { background: var(--color-brand-dark); }