/* 후기·전후사진·리얼셀카 상세 — medical-item-detail.css 를 깔고 그 위에 얹는다 */

.story-head {
  margin: 0 0 28px;
}

.story-head h1 {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  color: #222;
  margin: 0 0 14px;
  word-break: keep-all;
}

.story-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.story-chip {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 14px;
  background: #f3efe9;
  color: #8a6644;
  font-size: 13px;
  font-weight: 600;
}

.story-chip.sub {
  background: #eef0f6;
  color: #5a6172;
}

.story-date {
  margin-left: auto;
  font-size: 13px;
  color: #999;
}

/* 본문 이미지가 넘치지 않게 — 후기 본문은 에디터로 작성돼 폭이 제각각이다 */
.story-detail .section-body img {
  /* 본문 이미지 원본이 전부 1080px 이라 그 이상 늘리면 흐려진다 */
  max-width: min(100%, 1080px);
  height: auto;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 768px) {
  .story-head h1 {
    font-size: 21px;
  }

  .story-date {
    margin-left: 0;
    width: 100%;
  }
}

/* 이 후기의 시술 — 시술 상세로 가는 칩 */
.story-item-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.story-item-chip { display: inline-block; padding: 7px 14px; border: 1px solid #d6c9bb;
  border-radius: 16px; background: #fff; color: #333; text-decoration: none; font-size: 14px; }
.story-item-chip:hover { background: #f6f1ea; }

/* 피부과 후기 상세의 틀 — 시술 상세(item-detail.css)와 같은 헤더 여백 · 위치 띠 · 공통 꼬리 */
.story-page { padding-top: 85px; }
body:has(> .story-page) { display: flex; flex-direction: column; min-height: 100vh; }
body:has(> .story-page) > .footer { margin-top: auto; margin-left: 0; margin-right: 0; }
.story-crumb .crumb-current { min-width: 0; flex: 0 1 auto; }
.crumb-bar.story-crumb ol > li.crumb-up, .crumb-bar.story-crumb ol > li.crumb-home { flex-shrink: 0; }
.story-crumb .crumb-current span { overflow: hidden; text-overflow: ellipsis; }
.story-crumb .crumb-current details, .story-crumb .crumb-current summary { min-width: 0; }
@media (min-width: 769px) {
  .story-crumb .crumb-current .crumb-menu { width: 360px; }
}
.story-crumb .crumb-current .crumb-menu a { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; line-height: 1.45; }
.story-page .sd.medical-item-detail { padding-top: 32px; }
@media (max-width: 1068px) {
  .story-page { padding-top: 90px; }
}

/* 피부과 후기 상세 — 왼쪽 사진(잘림 없이 정사각 틀), 오른쪽 글과 시술. 모바일은 사진 → 글 */
.sd .sd-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; align-items: start; }
.sd .sd-gallery { position: sticky; top: 72px; min-width: 0; }
.sd .sd-stage { position: relative; display: block; width: 100%; padding: 0; overflow: hidden; border: 0;
  border-radius: 18px; background: #f4f2f8; cursor: zoom-in; aspect-ratio: 1 / 1; }
.sd .sd-stage img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sd .sd-count { position: absolute; right: 14px; bottom: 14px; padding: 4px 10px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12px; }
.sd .sd-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.sd .sd-thumb { width: 72px; height: 72px; padding: 0; overflow: hidden; border: 2px solid transparent;
  border-radius: 10px; background: #f4f2f8; cursor: pointer; opacity: 0.6; }
.sd .sd-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sd .sd-thumb.on { border-color: #6d28d9; opacity: 1; }
.sd .sd-info { min-width: 0; }
.sd .sd-tags { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-bottom: 10px; font-size: 14px;
  font-weight: 600; color: #7a63a8; }
.sd .sd-title { margin: 0 0 14px; font-size: 26px; font-weight: 700; line-height: 1.4; word-break: keep-all;
  overflow-wrap: anywhere; }
.sd .sd-meta { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding-bottom: 20px;
  border-bottom: 1px solid #eee; font-size: 13px; color: #999; }
.sd .sd-badge { padding: 4px 10px; border-radius: 999px; background: #f1ecfa; color: #6b4fa8; font-weight: 600; }
.sd .sd-body { padding: 22px 0 6px; font-size: 16px; line-height: 1.85; color: #333; }
.sd .sd-body p { margin: 0; }
.sd .sd-items { margin-top: 22px; padding: 20px; border-radius: 16px; background: #faf8fd; }
.sd .sd-items h2 { margin: 0 0 14px; font-size: 15px; font-weight: 700; }
.sd .sd-group + .sd-group { margin-top: 14px; }
.sd .sd-group h3 { margin: 0 0 8px; font-size: 13px; font-weight: 600; color: #8c79b3; }
.sd .sd-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sd .sd-chip { display: inline-flex; align-items: center; padding: 8px 14px; border: 1px solid #e3dcf0;
  border-radius: 999px; background: #fff; color: #333; font-size: 14px; text-decoration: none; }
.sd .sd-chip:hover { border-color: #6d28d9; color: #6d28d9; }
.sd .sd-note { margin: 28px 0 0; padding: 14px 18px; border-radius: 12px; background: #f7f7f8; font-size: 13px; color: #888; }
.sd .sd-more { margin-top: 56px; }
.sd .sd-more-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; }
.sd .sd-more-head h2 { margin: 0; font-size: 20px; }
.sd .sd-more-head a { font-size: 14px; color: #888; text-decoration: none; }
.sd .sd-more-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.sd .sd-more-grid .rv-text { display: none; }
.sd .sd-viewer { max-width: min(92vw, 900px); padding: 0; border: 0; border-radius: 14px; background: #111; }
.sd .sd-viewer::backdrop { background: rgba(0, 0, 0, 0.7); }
.sd .sd-viewer img { display: block; max-width: 100%; max-height: 85vh; margin: 0 auto; }
.sd .sd-viewer-close { position: absolute; top: 10px; right: 10px; width: 36px; height: 36px; border: 0;
  border-radius: 50%; background: rgba(255, 255, 255, 0.9); font-size: 16px; cursor: pointer; }

@media (max-width: 768px) {
  .sd .sd-wrap { grid-template-columns: 1fr; gap: 20px; }
  .sd .sd-gallery { position: static; }
  .sd .sd-stage { border-radius: 14px; }
  .sd .sd-title { font-size: 21px; }
  .sd .sd-body { font-size: 15px; }
  .sd .sd-more-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}