@charset "UTF-8";
/* view_document.scss
-------------------------------------------------------------------------------------------------------- */

#xet-simple-board {
  /** BLOG형 일때 */
  /** 게시물, 댓글 작성정보 */
  /** 게시물,댓글 - 에디터로 작성된 내용출력 */
  /** 게시물,댓글 - 첨부파일 */
  /** 게시물 읽기 화면 */
}

/* 카드형 컨테이너 */
#xet-simple-board .viewDocument{
  margin-bottom: 32px;
  padding: 16px;
  border-radius: 8px;
  border: 1px solid var(--board-border-color);
  box-shadow: 0 4px 8px rgba(0,0,0,0.16);
}

/* viewDocument 안에서는 read 기본 박스 제거 */
#xet-simple-board .viewDocument .simple-board__read{
  margin-bottom: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  border: 0 !important;
  background-color: transparent !important;
}

/* ==============================
   META
============================== */
#xet-simple-board ul.meta{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
}

#xet-simple-board ul.meta > li{
  position: relative;
  display: flex;
  align-items: center;
  font-size: 12px;
  white-space: nowrap;
  margin: 0;
  padding: 0;
  color: var(--board-text-base-color);
}

#xet-simple-board ul.meta > li + li{
  padding-left: 10px;
}

#xet-simple-board ul.meta > li + li::before{
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  height: 10px;
  transform: translateY(-50%);
  width: 1px;
  background-color: var(--board-border-color);
}

#xet-simple-board ul.meta > li svg{ fill: var(--board-text-base-color); }

#xet-simple-board ul.meta > li > a{
  display: inline-flex;
  align-items: center;
  color: var(--board-text-base-color);
}
#xet-simple-board ul.meta > li > a svg{ fill: var(--board-text-base-color); }

#xet-simple-board ul.meta > li > a.comment-vote.is-active{ color: var(--board-red-color); }
#xet-simple-board ul.meta > li > a.comment-vote.is-active svg{ fill: var(--board-red-color); }

#xet-simple-board ul.meta > li .profileImage{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin-right: 8px;
  overflow: hidden;
  background-color: #fff;
  border: 1px solid var(--board-border-color);
  border-radius: 50%;
}
#xet-simple-board ul.meta > li .profileImage img{
  width: 100%;
  height: 100%;
  vertical-align: top;
}

/* ==============================
   CONTENT
============================== */
#xet-simple-board .rhymix_content,
#xet-simple-board .xe_content{
  margin-bottom: 16px;
  word-break: keep-all;
  font-size: 16px !important;
  color: var(--board-text-strong-color);
}

/* ==============================
   ATTACH
============================== */
#xet-simple-board dl.attachedFile{
  margin: 0 0 16px;
  padding: 0;
  clear: both;
}
#xet-simple-board dl.attachedFile dt i{
  margin: 0;
  padding: 0;
  vertical-align: middle;
}
#xet-simple-board dl.attachedFile dt button.fileToggle{
  display: inline-flex;
  align-items: center;
  border: 0;
  margin: 0;
  padding: 0;
  overflow: visible;
  cursor: pointer;
  vertical-align: middle;
  background: none;
  color: var(--board-text-strong-color);
}
#xet-simple-board dl.attachedFile dd{
  position: relative;
  display: none;
  padding: 0;
  margin: 5px 0 0;
}
#xet-simple-board dl.attachedFile dd ul.files{
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  align-items: center;
}
#xet-simple-board dl.attachedFile dd ul.files li{
  position: relative;
  margin: 0 10px 0 0;
  padding: 0;
}
#xet-simple-board dl.attachedFile dd ul.files li a{
  text-decoration: none !important;
  display: inline-flex;
  align-items: center;
  height: 34px;
  font-size: 12px;
}
#xet-simple-board dl.attachedFile dd ul.files li a .bubble{
  display: none;
  z-index: 100;
  position: absolute;
  top: -20px;
  left: 0;
  padding: 4px 8px;
  font-size: 10px;
  white-space: nowrap;
  border-radius: 4px;
  border: 1px solid var(--board-border-color);
  background-color: #f9f9f9;
}
#xet-simple-board dl.attachedFile dd ul.files li a:hover .bubble,
#xet-simple-board dl.attachedFile dd ul.files li a:active .bubble,
#xet-simple-board dl.attachedFile dd ul.files li a:focus .bubble{
  display: block;
}
#xet-simple-board dl.attachedFile.open dd{ display: block; }

/* ==============================
   READ
============================== */
#xet-simple-board .simple-board__read{
  margin-bottom: 32px;
}

#xet-simple-board .simple-board__read .simple-board__read__header{
  margin-bottom: 16px;
}

#xet-simple-board .simple-board__read .simple-board__read__header .document-title{
  margin-bottom: 16px;
  word-break: keep-all;
}

#xet-simple-board .simple-board__read .simple-board__read__header .document-title .category-name{
  margin-bottom: 8px;
  color: var(--board-text-base-color);
}

/* (기본) 제목: 모바일/태블릿 기준 */
#xet-simple-board .simple-board__read .simple-board__read__header .document-title .title{
  line-height: 1.6;
  font-size: 22px;
  font-weight: 700;
}

/* 메타 바 */
#xet-simple-board .simple-board__read .simple-board__read__header .document-meta{
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 -20px;
  padding: 8px 0;
  overflow: hidden;
  background-color: var(--board-bg-color);
  border-top: 1px solid var(--board-border-color);
  border-bottom: 1px solid var(--board-border-color);
}
#xet-simple-board .simple-board__read .simple-board__read__header .document-meta > ul.meta{
  padding: 0 20px;
}

/* 본문 */
#xet-simple-board .simple-board__read .simple-board__read__body{
  word-break: break-all;
}

/* 확장변수 */
#xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__extravars{
  margin-bottom: 16px;
  overflow: hidden;
  border-top: 1px solid var(--board-border-color);
}
#xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__extravars .item{
  display: table;
  table-layout: fixed;
  width: 100%;
  border-bottom: 1px solid var(--board-border-color);
}
#xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__extravars .item .item__label,
#xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__extravars .item .item__value{
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
}
#xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__extravars .item .item__label{
  font-weight: 500;
  width: 35%;
  border-right: 1px solid var(--board-border-color);
  background-color: var(--board-bg-color);
}

/* 서명 */
#xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__signature{
  position: relative;
  padding: 10px;
  margin-bottom: 16px;
  display: flex;
  overflow: hidden;
  font-size: 14px;
  border-radius: 10px;
  background-color: var(--board-bg-color);
  border: 1px solid var(--board-border-color);
}
#xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__signature .signature-profile-img{
  margin-right: 16px;
}
#xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__signature .signature-profile-img > img{
  width: 40px;
  border-radius: 50%;
}
#xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__signature .signature-profile{
  flex: 1;
}
#xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__signature .signature-profile p{
  margin: 0;
}

/* 태그 */
#xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__tags{
  margin-bottom: 16px;
}
#xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__tags .tag{
  margin: 0;
  padding: 0;
}
#xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__tags .tag > dd{
  display: inline-block;
  margin: 0 4px 4px 0;
  padding: 0;
  vertical-align: middle;
}
#xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__tags .tag > dd a{
  display: inline-flex;
  align-items: center;
  height: 34px;
  padding: 0 14px;
  font-size: 12px;
  white-space: nowrap;
  color: var(--color-body);
  border: 1px solid var(--board-border-color);
  border-radius: 20px;
}

/* 추천 */
#xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__vote{
  text-align: center;
  margin-bottom: 16px;
}
#xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__vote a .vote__count{
  min-width: 20px;
}
#xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__vote a svg{
  width: 20px;
  height: 20px;
}
#xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__vote a.is-active{
  color: red;
}
#xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__vote a.is-active svg{
  fill: red;
}

/* footer */
#xet-simple-board .simple-board__read .simple-board__read__footer{
  margin: 0 -20px;
  border-top: 1px solid var(--board-border-color);
}
#xet-simple-board .simple-board__read .simple-board__read__footer > div{
  padding: 0 20px;
}


/* =========================================================
   YH TITLE SYSTEM (정리본)
   - 기본 제목: 크게
   - .has-model 있을 때만 2줄 구조
   - #xet-simple-board 없는 경우도 대비
========================================================= */

/* 슬로건 아래 여백 */
#xet-simple-board .yh-top-cta,
#xet-simple-board .yh-brand-slogan.yh-top-cta{
  margin-bottom: 28px !important;
}

/* 제목 블록 아래 여백 */
#xet-simple-board .simple-board__read .simple-board__read__header .document-title{
  margin-bottom: 26px !important;
}

/* 1) 기본 제목 (모델 없음/숨김 포함) */
#xet-simple-board .document-title .title{
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: -0.2px;
}

/* 2) 모델 표시: has-model일 때만 */
#xet-simple-board .document-title .title.has-model{
  text-align: center;
  margin-top: 24px;
  font-size: 18px;         /* 제품명 */
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.1px;
  overflow: visible !important;
}

/* 모델(첫 줄) */
#xet-simple-board .document-title .title.has-model .model-name{
  display: block;
  font-size: 32px;
  font-weight: 800;
  color: #1f3f6d;
  letter-spacing: 1px;
  margin-bottom: 8px;
  line-height: 1.15;
  padding-top: 2px;
  opacity: 0.92;
}

/* 제품명(둘째 줄) */
#xet-simple-board .document-title .title.has-model .product-name{
  display: block;
}

/* AOS 순차 */
#xet-simple-board .document-title .title.has-model .model-name[data-aos]{
  transition-delay: 0ms !important;
}
#xet-simple-board .document-title .title.has-model .product-name[data-aos]{
  transition-delay: 220ms !important;
}

/* ===== #xet-simple-board 없는 페이지 대비(보험) ===== */
.simple-board__read .simple-board__read__header .document-title .title{
  font-size: 26px !important;
  font-weight: 700 !important;
  line-height: 1.4 !important;
  letter-spacing: -0.2px !important;
  word-break: keep-all;
}
.simple-board__read .simple-board__read__header .document-title .title.has-model{
  text-align: center;
  margin-top: 24px !important;
  font-size: 18px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}
.simple-board__read .simple-board__read__header .document-title .title.has-model .model-name{
  display: block;
  font-size: 32px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  margin-bottom: 8px !important;
  line-height: 1.15 !important;
  padding-top: 2px !important;
}
.simple-board__read .simple-board__read__header .document-title .title.has-model .product-name{
  display: block;
}

/* ==============================
   DESKTOP
============================== */
@media (min-width: 992px){
  #xet-simple-board ul.meta > li:hover > a{ color: var(--board-text-strong-color); }
  #xet-simple-board ul.meta > li:hover > a svg{ fill: var(--board-text-strong-color); }

  #xet-simple-board .rhymix_content,
  #xet-simple-board .xe_content{
    font-size: 14px !important;
  }

  #xet-simple-board .simple-board__read .simple-board__read__header .document-title .title{
    font-size: 26px; /* 데스크톱 기본 제목 */
  }

  #xet-simple-board .simple-board__read .simple-board__read__header .document-meta{
    margin: 0;
  }
  #xet-simple-board .simple-board__read .simple-board__read__header .document-meta > ul.meta{
    padding: 0 8px;
  }

  #xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__extravars .item .item__label{
    width: 200px;
    padding-left: 20px;
  }
  #xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__extravars .item .item__value{
    padding-left: 20px;
  }

  #xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__signature{
    padding: 16px 10px;
  }
  #xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__signature .signature-profile-img > img{
    width: 60px;
  }

  #xet-simple-board .simple-board__read .simple-board__read__body .simple-board__read__vote{
    padding: 16px 0;
  }

  #xet-simple-board .simple-board__read .simple-board__read__footer{
    margin: 0;
  }
  #xet-simple-board .simple-board__read .simple-board__read__footer > div{
    padding: 0;
  }
}

/* ==============================
   MOBILE
============================== */
@media (max-width: 768px){

  #xet-simple-board .yh-top-cta,
  #xet-simple-board .yh-brand-slogan.yh-top-cta{
    margin-bottom: 18px !important;
  }

  #xet-simple-board .simple-board__read .simple-board__read__header .document-title{
    margin-bottom: 16px !important;
  }

  /* 기본 제목 모바일 */
  #xet-simple-board .document-title .title{
    font-size: 22px;
  }

  /* has-model 모바일 */
  #xet-simple-board .document-title .title.has-model{
    margin-top: 18px;
    font-size: 17px;
    line-height: 1.35;
  }
  #xet-simple-board .document-title .title.has-model .model-name{
    font-size: 24px;
    margin-bottom: 6px;
    letter-spacing: 0.6px;
  }

  /* 보험(보드 래퍼 없는 경우) */
  .simple-board__read .simple-board__read__header .document-title .title{
    font-size: 22px !important;
  }
  .simple-board__read .simple-board__read__header .document-title .title.has-model{
    margin-top: 18px !important;
    font-size: 17px !important;
  }
  .simple-board__read .simple-board__read__header .document-title .title.has-model .model-name{
    font-size: 24px !important;
    margin-bottom: 6px !important;
  }
}

.title:empty {
  display: none;
}

/* 국문: 상단에 크게 뜨는 메뉴명(브라우저 타이틀) 숨김 */
.page-title.h1{
  display:none !important;
}