/* ============================================================
 * css/shop-editor-v3.css
 * 에디터 표준 구조 v3 본문 레이아웃 (use_editor_template=1 일 때만 로드)
 * 컬러는 렌더러가 .shop-content.tnl-v3 에 인라인 CSS 변수로 주입:
 *   --v3-bg --v3-primary --v3-text --v3-muted --v3-section-light --v3-section-dark --v3-accent
 * 원칙: 모바일 우선 / 박스 안 박스 금지(섹션 풀폭 배경 + 구분선) / 기존 다크 톤 일관
 * ============================================================ */

.shop-content.tnl-v3 { color: var(--v3-text, #fff); }
.tnl-v3-body { width: 100%; }

/* ---- 제목 ---- */
.tnl-v3-h1 {
  font-size: 22px; line-height: 1.3; font-weight: 700;
  color: var(--v3-text, #fff); margin: 4px 8px 14px; padding: 0 0 10px;
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.tnl-v3-h2 {
  font-size: 17px; font-weight: 700; color: var(--v3-primary, #ff6b00);
  margin: 0 0 14px; padding: 0;
}
.tnl-v3-h3 {
  font-size: 14px; font-weight: 600; color: var(--v3-text, #fff);
  margin: 16px 0 8px;
}

/* ---- 섹션 (풀폭 배경 블록, 박스 중첩 X) ---- */
.tnl-v3-sec {
  padding: 22px 14px;
  border-top: 1px solid rgba(255,255,255,0.07);
}
.tnl-v3-sec:first-of-type { border-top: none; }

/* ---- 본문 텍스트 ---- */
.tnl-v3-bluf {
  font-size: 15px; line-height: 1.7; color: var(--v3-text, #fff);
  font-weight: 500; margin: 0 0 12px;
}
.tnl-v3-prose {
  font-size: 14px; line-height: 1.75; color: var(--v3-text, #ddd);
  margin: 0 0 8px;
}
.tnl-v3-prose a { color: var(--v3-accent, #ff8533); text-decoration: underline; }
.tnl-v3-prose p { margin: 0 0 10px; }
.tnl-v3-timing { color: var(--v3-muted, #aaa); font-size: 13px; }

/* ---- 히어로 이미지 ---- */
.tnl-v3-hero { margin: 0 8px 4px; }
.tnl-v3-hero img, .tnl-v3-hero picture img {
  width: 100%; height: auto; display: block; border-radius: 10px;
}

/* ---- 갤러리 (풀폭 그리드 / 모바일 2열·데스탑 4열, 전역 img 규칙 이김) ---- */
.tnl-v3-gallery {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 8px 0; width: 100%;
}
.tnl-v3-gallery-item { width: 100%; min-width: 0; }
.tnl-v3-gallery-item img,
.tnl-v3-gallery-item picture,
.tnl-v3-gallery-item picture img {
  width: 100% !important; max-width: 100% !important; height: auto;
  aspect-ratio: 3 / 4; object-fit: cover; display: block; border-radius: 8px; margin: 0 !important;
}

/* ---- 비디오 (반응형) ---- */
.tnl-v3-video { margin: 4px 0; }
.tnl-v3-video-frame {
  position: relative; width: 100%; padding-top: 56.25%;
  border-radius: 10px; overflow: hidden; background: #000;
}
.tnl-v3-video-frame iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
.tnl-v3-video-native video { width: 100%; border-radius: 10px; display: block; }

/* ---- 가격 테이블 ---- */
.tnl-v3-price-wrap { width: 100%; overflow-x: auto; }
.tnl-v3-price-table {
  width: 100%; border-collapse: collapse; table-layout: auto; font-size: 14px;
}
.tnl-v3-price-table td {
  padding: 11px 8px; border-bottom: 1px solid rgba(255,255,255,0.08);
  vertical-align: top; word-break: break-word;
}
.tnl-v3-price-name { width: 60%; }
.tnl-v3-price-svc { color: var(--v3-text, #fff); font-weight: 600; }
.tnl-v3-price-note { display: block; color: var(--v3-muted, #999); font-size: 12px; margin-top: 3px; }
.tnl-v3-price-dur { color: var(--v3-muted, #aaa); white-space: nowrap; text-align: right; }
.tnl-v3-price-thb {
  color: var(--v3-primary, #ff6b00); font-weight: 700; white-space: nowrap; text-align: right;
}
.tnl-v3-badge {
  display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 10px;
  font-size: 10px; font-weight: 600; vertical-align: middle;
}
.tnl-v3-badge.pop { background: rgba(255,107,0,0.18); color: var(--v3-accent, #ff8533); }
.tnl-v3-badge.cpl { background: rgba(96,165,250,0.18); color: #93c5fd; }

/* ---- 에디터 평가 (5점 바) ---- */
.tnl-v3-ratings { margin: 4px 0 12px; }
.tnl-v3-rating-row {
  display: flex; align-items: center; gap: 10px; margin: 0 0 9px;
}
.tnl-v3-rating-label { flex: 0 0 84px; font-size: 13px; color: var(--v3-muted, #bbb); }
.tnl-v3-rating-bar {
  flex: 1 1 auto; height: 7px; border-radius: 4px;
  background: rgba(255,255,255,0.10); overflow: hidden;
}
.tnl-v3-rating-fill {
  display: block; height: 100%; border-radius: 4px;
  background: var(--v3-primary, #ff6b00);
}
.tnl-v3-rating-score {
  flex: 0 0 32px; text-align: right; font-size: 13px; font-weight: 700;
  color: var(--v3-text, #fff);
}
.tnl-v3-editor-review { margin-top: 4px; }

/* ---- FAQ (질문/답변 명확 구분: Q·A 배지 + 좌측 정렬, 박스 X) ---- */
.tnl-v3-faq .faq-item { padding: 16px 0; border-bottom: 1px solid rgba(255,255,255,0.1); }
.tnl-v3-faq .faq-item:last-child { border-bottom: none; }
.tnl-v3-faq .faq-question {
  font-size: 15px; font-weight: 700; color: var(--v3-primary, #ff6b00);
  margin: 0 0 10px; padding-left: 28px; position: relative; line-height: 1.45;
}
.tnl-v3-faq .faq-question::before {
  content: "Q"; position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; line-height: 20px; text-align: center;
  font-size: 12px; font-weight: 800; border-radius: 5px;
  color: var(--v3-bg, #1a1a1a); background: var(--v3-primary, #ff6b00);
}
.tnl-v3-faq .faq-answer {
  font-size: 14px; line-height: 1.75; color: var(--v3-text, #fff);
  padding-left: 28px; position: relative;
}
.tnl-v3-faq .faq-answer::before {
  content: "A"; position: absolute; left: 0; top: 1px;
  width: 20px; height: 20px; line-height: 20px; text-align: center;
  font-size: 12px; font-weight: 800; border-radius: 5px;
  color: var(--v3-bg, #1a1a1a); background: var(--v3-accent, #ff8533);
}
.tnl-v3-faq .faq-answer a { color: var(--v3-accent, #ff8533); text-decoration: underline; }

/* ---- 안전 가이드 ---- */
.tnl-v3-safety-item { padding: 8px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.tnl-v3-safety-item:last-child { border-bottom: none; }

/* ---- 데스크탑 ---- */
@media (min-width: 768px) {
  .tnl-v3-h1 { font-size: 28px; }
  .tnl-v3-h2 { font-size: 20px; }
  .tnl-v3-sec { padding: 30px 20px; }
  .tnl-v3-gallery { grid-template-columns: repeat(4, 1fr); gap: 12px; }
  .tnl-v3-bluf { font-size: 16px; }
}