/* 피부과 시술 상세 SSR 페이지
   템플릿: templates/dermatology/item-detail.html
   (템플릿 안 <style> 에 있던 규칙을 옮긴 것) */

.derma-item-detail { max-width: 1200px; margin: 0 auto; padding: 40px 20px; }
.derma-item-detail .breadcrumb { font-size: 13px; color: #666; margin-bottom: 20px; }
.derma-item-detail .breadcrumb a { color: #666; text-decoration: none; }
.derma-item-detail .breadcrumb a:hover { color: #6d28d9; }
.derma-item-detail .breadcrumb .current { color: #333; font-weight: 600; }
.derma-item-detail h1 { font-size: 32px; font-weight: 700; margin-bottom: 12px; line-height: 1.3; }
.derma-item-detail .lead { font-size: 16px; color: #555; line-height: 1.6; margin-bottom: 24px; }
.derma-item-detail figure { margin: 0 0 30px; aspect-ratio: 16/9; overflow: hidden; border-radius: 8px; background: #f5f5f5; }
.derma-item-detail figure img { width: 100%; height: 100%; object-fit: cover; display: block; }
.derma-item-detail .meta-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-bottom: 40px; }
.derma-item-detail .meta-card { background: #f8f9fa; border-radius: 8px; padding: 16px; }
.derma-item-detail .meta-card .label { font-size: 12px; color: #888; margin-bottom: 6px; }
.derma-item-detail .meta-card .value { font-size: 18px; font-weight: 600; color: #222; }
.derma-item-detail .meta-card .price-original { color: #aaa; font-size: 14px; }
.derma-item-detail .meta-card .price-discount { color: #e74c3c; font-size: 18px; margin-left: 8px; font-weight: 700; }
.derma-item-detail h2.section-h { font-size: 20px; font-weight: 600; margin: 30px 0 12px; padding-left: 10px; border-left: 4px solid #6d28d9; }
.derma-item-detail .section-body { font-size: 15px; color: #444; line-height: 1.8; margin-bottom: 30px; }
.derma-item-detail .section-body img {
  /* 본문 이미지 원본이 전부 1080px 이라 그 이상 늘리면 흐려진다 */
  max-width: min(100%, 1080px);
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}
.derma-item-detail .warn-box { background: #fff3cd; border-left: 4px solid #ffc107; padding: 16px 20px; border-radius: 4px; margin-bottom: 40px; }
.derma-item-detail .warn-box h2 { font-size: 18px; font-weight: 600; margin-bottom: 10px; color: #856404; }
.derma-item-detail .warn-box p { font-size: 14px; color: #856404; line-height: 1.7; margin: 0; }
.derma-item-detail .cta-area { text-align: center; margin-top: 40px; padding: 30px 0; border-top: 1px solid #eee; }
.derma-item-detail .cta-btn { display: inline-block; background: #6d28d9; color: #fff; padding: 14px 36px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: background .15s; }
.derma-item-detail .cta-btn:hover { background: #5b21b6; }
.derma-item-detail .badges { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.derma-item-detail .badge { display: inline-block; padding: 4px 12px; border-radius: 12px; font-size: 12px; font-weight: 600; }
.derma-item-detail .badge-popular { background: #fef3c7; color: #92400e; }
.derma-item-detail .badge-new { background: #dbeafe; color: #1e40af; }
.derma-item-detail .badge-month { background: #fce7f3; color: #9f1239; }
@media (max-width: 768px) {
  .derma-item-detail { padding: 20px 16px; }
  .derma-item-detail h1 { font-size: 24px; }
  .derma-item-detail .meta-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .derma-item-detail .meta-card { padding: 12px; }
  .derma-item-detail .meta-card .value { font-size: 16px; }
}

/* 헤더가 position:absolute 로 겹쳐 있다 — 헤더 높이만큼 본문을 내린다 */
.derma-item-detail { padding-top: 137px; }

@media (max-width: 1023px) {
  .derma-item-detail { padding-top: 110px; }
}

@media (max-width: 767px) {
  .derma-item-detail { padding-top: 90px; }
}