/**
 * tour-specialty.css — 특산물(specialty) 폼·상세·목록 UI
 * Mobile-First · accent #059669 (portal_meta specialty)
 */

/* ── 폼: 칩 그리드 (emerald 테마) ── */
.specialty-write-wrap {
  --tspec-accent: #059669;
  --tspec-accent-soft: #d1fae5;
  --tspec-accent-mid: #10b981;
  --tspec-accent-dark: #047857;
}
.specialty-write-wrap .pw-section-num { background: var(--tspec-accent); }
.specialty-write-wrap .pw-check { color: var(--tspec-accent); }
/* 메인 제출 버튼만 emerald — 동적목록 추가 버튼은 placard 기본 유지 */
.specialty-write-wrap .pw-submit-row .pw-btn-submit {
  background: linear-gradient(135deg, var(--tspec-accent-mid), var(--tspec-accent));
  box-shadow: 0 4px 14px rgba(5, 150, 105, .35);
}
.specialty-write-wrap .pw-dynamic-toolbar .pw-btn-submit {
  background: linear-gradient(135deg, var(--tspec-accent-mid), var(--tspec-accent));
  box-shadow: 0 2px 8px rgba(5, 150, 105, .25);
}
.specialty-write-wrap .pw-activity-counter { color: var(--tspec-accent); }

/* 칩 그리드 행 — activity 동형 정렬 */
.specialty-write-wrap .pw-row.no-border .pw-label { padding-top: 16px; }
.specialty-write-wrap .pw-row.no-border .pw-field { padding-top: 14px; }
@media (max-width: 768px) {
  .specialty-write-wrap .pw-row.no-border .pw-label { padding-top: 12px; }
  .specialty-write-wrap .pw-row.no-border .pw-field { padding-top: 0; }
}

.pw-spec-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(155px, 1fr));
  gap: 7px;
}
.pw-spec-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1.5px solid #e2e8f0;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  transition: all .15s;
  background: #f8fafc;
  user-select: none;
}
.pw-spec-item.selected {
  border-color: var(--tspec-accent, #059669);
  background: #ecfdf5;
  color: var(--tspec-accent-dark, #047857);
  font-weight: 700;
}
.pw-spec-item input { display: none; }
.pw-spec-ico { font-size: 14px; color: #6ee7b7; transition: color .15s; }
.pw-spec-item.selected .pw-spec-ico { color: var(--tspec-accent, #059669); }

/* 쇼핑몰 연동 박스 */
.pw-shop-box {
  border-radius: 12px;
  border: 1.5px solid #a7f3d0;
  background: linear-gradient(135deg, #f0fdf4 0%, #ecfdf5 100%);
  padding: 14px 16px;
}
.pw-shop-box .pw-check { font-weight: 600; color: #065f46; }

/* 생산자 프로필 업로드 */
.pw-producer-card {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
  padding: 14px;
  border: 1.5px dashed #a7f3d0;
  border-radius: 12px;
  background: #fafffe;
}
.pw-producer-photo-wrap {
  flex: 0 0 100px;
  width: 100px;
}
.pw-producer-photo-wrap img,
.pw-producer-photo-ph {
  width: 100px;
  height: 100px;
  border-radius: 12px;
  object-fit: cover;
  display: block;
}
.pw-producer-photo-ph {
  background: #ecfdf5;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6ee7b7;
  font-size: 32px;
}
.pw-producer-fields { flex: 1; min-width: 200px; }

/* 이미지 미리보기 */
.pw-preview-img {
  max-width: 120px;
  border-radius: 8px;
  margin: 8px 0;
  display: block;
  border: 1px solid #e2e8f0;
}
.pw-img-preview-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}
.pw-img-preview-grid img {
  width: 88px;
  height: 88px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

/* 맛·특징 인포그래픽 (폼 힌트) */
.tspec-taste-hint {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.tspec-taste-chip {
  font-size: 15px;
  padding: 6px 12px;
  border-radius: 20px;
  background: #f0fdf4;
  color: #166534;
  border: 1px solid #bbf7d0;
}

/* ── 상세 페이지 ── */
.tspec-section-title {
  margin: 0 0 14px;
  font-size: var(--tr-fs-base, 16px);
  font-weight: 700;
  color: #1e293b;
  border-bottom: 2px solid var(--pub-accent, #059669);
  padding-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.tspec-section-title--sm {
  margin-bottom: 12px;
  font-size: var(--tr-fs-sm, 14px);
  border-bottom: none;
  padding-bottom: 0;
}
.tspec-subtitle {
  font-weight: 600;
  font-size: var(--tr-fs-sm, 14px);
  margin-bottom: 6px;
  color: #334155;
}
.tspec-body {
  font-size: var(--tr-fs-sm, 14px);
  color: #475569;
  line-height: 1.7;
}
.tspec-body--pre { white-space: pre-wrap; }

.tspec-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.tr-spec-tag {
  font-size: 14px;
  padding: 2px 8px;
  border-radius: 8px;
  display: inline-block;
}

/* 쇼핑몰 CTA */
.tspec-shop-cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 14px 24px;
  background: linear-gradient(135deg, #10b981, #059669);
  color: #fff;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(5, 150, 105, .3);
  transition: opacity .15s, transform .1s;
}
.tspec-shop-cta:hover { opacity: .92; color: #fff; }
.tspec-shop-cta:active { transform: scale(.98); }

/* 생산자 프로필 (상세) */
.tspec-producer {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.tspec-producer-photo {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 12px;
  flex: 0 0 100px;
  border: 2px solid #a7f3d0;
}
.tspec-producer-info { flex: 1; min-width: 180px; }
.tspec-producer-name {
  font-weight: 700;
  font-size: var(--tr-fs-sm, 14px);
  color: #1e293b;
}
.tspec-producer-title {
  font-size: var(--tr-fs-xs, 14px);
  color: #64748b;
  margin-top: 2px;
}

/* 제조 과정 타임라인 */
.tspec-timeline { display: flex; flex-direction: column; }
.tspec-timeline-step {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  position: relative;
}
.tspec-timeline-step:not(:last-child) {
  border-bottom: 1px dashed #e2e8f0;
}
.tspec-timeline-num {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--pub-accent, #059669);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tspec-timeline-img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 80px;
}
.tspec-timeline-body { flex: 1; min-width: 0; }
.tspec-timeline-title {
  font-weight: 600;
  font-size: var(--tr-fs-sm, 14px);
  color: var(--pub-accent, #059669);
}

/* 맛 인포그래픽 */
.tspec-taste-panel {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-bottom: 10px;
}
.tspec-taste-metric {
  padding: 12px;
  border-radius: 10px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  text-align: center;
}
.tspec-taste-metric-label {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 4px;
  font-weight: 600;
}
.tspec-taste-metric-value {
  font-size: 15px;
  font-weight: 700;
  color: #166534;
}
.tspec-taste-bar-wrap {
  margin-top: 6px;
  height: 6px;
  background: #d1fae5;
  border-radius: 3px;
  overflow: hidden;
}
.tspec-taste-bar {
  height: 100%;
  background: linear-gradient(90deg, #34d399, #059669);
  border-radius: 3px;
}
.tspec-spice-dots {
  display: flex;
  justify-content: center;
  gap: 4px;
  margin-top: 4px;
}
.tspec-spice-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d1fae5;
}
.tspec-spice-dot.on { background: #ef4444; }

/* 배송·포장 */
.tspec-pack-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}
.tspec-pack-grid img {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

/* 레시피 카드 그리드 */
.tspec-recipe-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}
.tspec-recipe-card {
  display: flex;
  gap: 12px;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid #e2e8f0;
  background: #fafbfc;
}
.tspec-recipe-img {
  width: 72px;
  height: 72px;
  object-fit: cover;
  border-radius: 8px;
  flex: 0 0 72px;
}
.tspec-recipe-name {
  font-weight: 600;
  font-size: var(--tr-fs-sm, 14px);
}

/* 궁합 리스트 */
.tspec-pairing-item {
  padding: 10px 0;
  border-bottom: 1px dashed #f1f5f9;
}
.tspec-pairing-item:last-child { border-bottom: none; }

/* 링크 버튼 */
.tspec-link-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: #f1f5f9;
  border-radius: 10px;
  text-decoration: none;
  color: var(--pub-accent, #059669);
  font-weight: 600;
  font-size: var(--tr-fs-sm, 14px);
  transition: background .15s;
}
.tspec-link-btn:hover { background: #ecfdf5; color: var(--pub-accent, #059669); }

/* ── 목록 카드 ── */
.specialty-list-wrap .tr-card-badge--shop {
  background: #dbeafe;
  color: #1d4ed8;
}
.specialty-list-wrap .tr-spec-region {
  display: inline-block;
  font-size: 14px;
  padding: 2px 7px;
  border-radius: 8px;
  background: #d1fae5;
  color: #065f46;
  margin-right: 4px;
}
.specialty-list-wrap .tr-spec-price {
  font-size: 14px;
  color: #059669;
  font-weight: 600;
}
.specialty-list-wrap .tr-spec-weight {
  font-size: 14px;
  padding: 2px 8px;
  background: #f0fdf4;
  color: #15803d;
  border-radius: 8px;
}
.specialty-list-wrap .tr-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.specialty-list-wrap .tr-card-tag-hash {
  font-size: 14px;
  padding: 2px 7px;
  background: #f1f5f9;
  color: #64748b;
  border-radius: 8px;
}

/* ── 모바일 ── */
@media (max-width: 768px) {
  .pw-spec-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
  .pw-producer-card { flex-direction: column; }
  .pw-producer-fields { min-width: 0; width: 100%; }
  .tspec-taste-panel { grid-template-columns: 1fr 1fr; }
  .tspec-recipe-grid { grid-template-columns: 1fr; }
  .tspec-shop-cta { width: 100%; justify-content: center; min-height: 48px; }
  .tspec-timeline-step { flex-wrap: wrap; }
}

@media (max-width: 480px) {
  .pw-spec-grid { grid-template-columns: 1fr; }
  .tspec-taste-panel { grid-template-columns: 1fr; }
  .pw-img-preview-grid img { width: 72px; height: 72px; }
}