/*
 * 제품 상세 본문(관리자가 등록한 HTML) 전용 스타일.
 *
 * 본문은 티스토리에서 가져온 마크업이라 figure > span > img 구조에
 * data-origin-width 같은 속성이 붙어 있다. 원본 크기대로 두면 이미지가
 * 본문 폭을 꽉 채워 너무 커 보이므로 여기서 크기와 정렬을 정한다.
 *
 * 저장된 HTML 이 아니라 CSS 로 제어하는 이유:
 * 비율을 바꾸고 싶을 때 글 214개를 다시 가져올 필요가 없다.
 */

.product-contents img {
  width: 50%;
  height: auto;
  display: block;
  margin: 16px auto;
}

/* 티스토리가 남긴 래퍼들이 폭을 고정하고 있으면 가운데 정렬이 깨진다 */
.product-contents figure,
.product-contents figure > span {
  display: block;
  width: auto !important;
  max-width: 100%;
  margin-left: auto;
  margin-right: auto;
  float: none !important;
}

.product-contents figure {
  margin-top: 16px;
  margin-bottom: 16px;
}

/* 본문에 표가 들어간 글이 있어 좁은 화면에서 가로로 넘칠 수 있다 */
.product-contents table {
  max-width: 100%;
}

/* 모바일에서는 50% 가 너무 작다 */
@media (max-width: 768px) {
  .product-contents img { width: 100%; }
}