/* ============================================================
   상품 서술형 본문 서식 - 2026-09  (상품소개 등, nf_goods_contents)

   [무엇]
   SunEditor 로 작성한 본문 HTML 을 그리는 규칙.
   관리자 편집화면과 프론트 노출화면이 같은 모양이 되도록,
   양쪽에서 이 파일 하나만 로드한다.
   (게시판의 static/css/board/board_content.css 와 같은 역할이다)

   [어디서 로드하나]
     프론트   : www/common/top.php  (page_type = invest)
     관리자   : master/goods/contents.php
   둘 다 SunEditor 콘텐츠 CSS "뒤에" 로드해야 한다.
   .sun-editor-editable 과 .goods-content 는 명시도가 같아서
   나중에 로드된 쪽이 이긴다. !important 를 쓰지 않는 이유가 이것이다.

   [적용 대상]
   .goods-content 클래스를 붙인 요소에만 걸린다.
   구 본문(goods.goods_text)을 찍는 자리는 이 클래스를 쓰지 않으므로 영향이 없다.

   [무엇을 덮어쓰나]
   SunEditor 기본값은 본문이 Helvetica Neue 13px / 글자색 #333 이라
   사이트 톤과 다르다. 표·목록·인용구 같은 구조는 SunEditor 규칙을
   그대로 쓰고, 글꼴·크기·색·자간만 사이트 값으로 되돌린다.
   사이트 값의 출처는 상품상세(.est-com) 본문이 상속받는 body 값이다.

   SunEditor 는 .sun-editor-editable * 에
   { font-family:inherit; font-size:inherit; color:inherit } 을 걸어두기 때문에
   루트에만 값을 주면 자식 요소까지 그대로 내려간다.
   ============================================================ */

.goods-content {
    margin: 0;

    color: #444;
    line-height: 1.6;
    letter-spacing: -0.5px;
    word-break: keep-all;
    font-family: "Nanum Gothic", sans-serif;
}

/* 프론트 전용 보정.
   상품상세의 .est-com 이 이미 여백(padding)과 흰 배경을 갖고 있는데
   SunEditor 콘텐츠 CSS 가 .sun-editor-editable 에 padding:16px 과
   background-color:#fff 를 걸어둬서, 그대로 두면 본문이 안쪽으로 한 번 더 밀린다.
   (0,2,0 이라 단일 클래스 규칙을 이긴다)

   관리자 편집영역에는 .est-com 이 없으므로 SunEditor 기본값이 유지된다.
   편집창은 흰 배경에 안쪽 여백이 있는 편이 글쓰기에 낫다. */
.est-com .goods-content {
    padding: 0;
    background-color: transparent;
}

/* 문단 사이 간격. SunEditor 기본값은 10px 인데 넓어 보여 6px 로 (FAQ·게시판과 같은 값) */
.goods-content p {
    margin: 6px 0;
}

/* 첫/마지막 요소의 바깥 여백은 없앤다.
   그대로 두면 .est-com 의 padding 위아래에 여백이 한 번 더 얹힌다 */
.goods-content > :first-child { margin-top: 0; }
.goods-content > :last-child  { margin-bottom: 0; }

/* 굵게·기울임 복원.

   static/css/reset.css (Eric Meyer reset v2.0) 의 셀렉터 목록에
   strong, b, em, i, u, s 가 들어있고 그 블록이 font: inherit 을 건다.
   font 는 단축 속성이라 font-weight 와 font-style 까지 부모 값으로 되돌려버린다.
   그 결과 에디터에서 굵게 지정한 글자가 프론트에서는 보통 굵기로 나온다.
   (관리자 화면은 reset.css 를 로드하지 않아 정상으로 보인다)

   reset.css 를 고치면 사이트 전체에 영향이 가므로 본문 안에서만 되돌린다. */
.goods-content strong,
.goods-content b {
    font-weight: 700;
}

.goods-content em,
.goods-content i {
    font-style: italic;
}

/* 밑줄·취소선도 같은 이유로 되돌린다. 에디터 툴바에 있는 서식이라 실제로 쓰인다. */
.goods-content u        { text-decoration: underline; }
.goods-content s,
.goods-content strike   { text-decoration: line-through; }

/* 링크는 사이트 시그니처 컬러로.
   SunEditor 의 * { color:inherit } 이 a 에도 걸리므로 여기서 다시 지정한다. */
.goods-content a,
.goods-content a:hover {
    color: #398fe1;
    text-decoration: underline;
}

/* 본문에 넣은 이미지가 영역을 넘지 않게. 이미지가 원본 크기로 들어온다. */
.goods-content img {
    max-width: 100%;
    height: auto;
}

/* 표가 본문 폭을 넘칠 때 화면이 가로로 밀리지 않도록 */
.goods-content table {
    max-width: 100%;
}

/* 상품상세 본문 폭 기준 글자 크기 */
.goods-content { font-size: 14px; }

@media (max-width: 767px) {
    .goods-content {
        font-size: 13px;
        line-height: 1.5;
    }
}