@charset "UTF-8";
/* ==========================================================================
   학습 상태 뱃지 - 진도율 툴팁
   --------------------------------------------------------------------------
   뱃지(학습중 / 학습완료) 자체의 스타일은 퍼블리셔 작업분(c3658a2)의
     - main.css  : .lecture-item .swiper-slide .lecHead > em.lec_ing / .lec_com
     - sub.css   : .subContents .lecture-item .swiper-slide .lecHead > em...
                   .subContents .lec_grid .grid_item .lecHead > em...
     - board.css : .video_info .info_top h2 > em.edu_ing / .edu_com
   을 그대로 사용한다.

   이 파일은 퍼블리셔가 형상관리하는 /resources/home/css/ 를 건드리지 않기 위해
   분리한 파일로, 아래 두 가지만 담는다.
     1) 마우스 오버 시 노출되는 진도율 툴팁
     2) 퍼블리셔 CSS 가 커버하지 않는 검색 결과 카드(.conThumb)용 뱃지

   툴팁은 data-progress 속성이 있는 뱃지에만 붙는다.
   문구가 없는 뱃지(예: 콘텐츠 목록의 학습완료)는 속성이 없으므로 툴팁도 없다.
     <em class="lec_ing" data-progress="학습 이력이 있는 콘텐츠입니다. 진도율&nbsp;45%">학습중</em>

   로드 위치 : /WEB-INF/views/home/include/javascript.jsp
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) 툴팁 공통
      목록 카드(.lecHead, .conThumb)는 부모가 overflow:hidden 이라
      썸네일 밖으로 나가면 잘린다. → max-width 로 카드 안에 들어오도록 제한
      (최소 카드 220x124px 기준 툴팁 180x52px)
   -------------------------------------------------------------------------- */
.lecHead > em[data-progress]::before,
.lecHead > em[data-progress]::after,
.conThumb > em[data-progress]::before,
.conThumb > em[data-progress]::after,
.info_top h2 > em[data-progress]::before,
.info_top h2 > em[data-progress]::after {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 200ms ease-in-out, visibility 200ms ease-in-out;
}

/* 말풍선 꼬리 */
.lecHead > em[data-progress]::before,
.conThumb > em[data-progress]::before,
.info_top h2 > em[data-progress]::before {
  content: "";
  top: calc(100% + 0.4rem);
  border: 0.4rem solid transparent;
  border-bottom-color: rgba(0, 0, 0, 0.85);
}

/* 말풍선 본문 */
.lecHead > em[data-progress]::after,
.conThumb > em[data-progress]::after,
.info_top h2 > em[data-progress]::after {
  content: attr(data-progress);
  top: calc(100% + 1.2rem);
  width: max-content;
  padding: 0.8rem 1.2rem;
  border-radius: 0.6rem;
  background: rgba(0, 0, 0, 0.85);
  color: #FFFFFF;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
  white-space: normal;
  word-break: keep-all; /* 한글 단어 중간 줄바꿈 방지 */
}

.lecHead > em[data-progress]:hover::before,
.lecHead > em[data-progress]:hover::after,
.conThumb > em[data-progress]:hover::before,
.conThumb > em[data-progress]:hover::after,
.info_top h2 > em[data-progress]:hover::before,
.info_top h2 > em[data-progress]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* --------------------------------------------------------------------------
   2) 목록 카드 - 뱃지가 우측 상단이므로 툴팁도 우측 기준으로 정렬
   -------------------------------------------------------------------------- */
.lecHead > em[data-progress]::before,
.conThumb > em[data-progress]::before {
  right: 1.4rem;
}

.lecHead > em[data-progress]::after,
.conThumb > em[data-progress]::after {
  right: 0;
  max-width: 18rem;
}

/* --------------------------------------------------------------------------
   3) 콘텐츠 상세(content view) h2 뱃지
      퍼블리셔 CSS 의 h2 > em 은 display:block 이라 기준점이 없어
      툴팁 배치를 위한 position:relative 가 필요하다.
      offset 을 주지 않으므로 뱃지의 외형/위치 변화는 없다.
      상세 영역은 overflow:hidden 이 아니라 잘림 걱정이 없어 한 줄로 노출한다.
   -------------------------------------------------------------------------- */
.info_top h2 > em[data-progress] {
  position: relative;
}

.info_top h2 > em[data-progress]::before {
  left: 1.4rem;
}

.info_top h2 > em[data-progress]::after {
  left: 0;
  max-width: 30rem;
  z-index: 2;
}

/* --------------------------------------------------------------------------
   4) 검색 결과 카드(.conThumb) 뱃지
      검색 결과는 .lecHead 구조가 아니라 퍼블리셔 CSS 의 뱃지 규칙이 적용되지 않는다.
      아래 값은 c3658a2 의 .lecHead > em 과 동일하게 맞춘 것으로,
      추후 퍼블리셔 CSS 에 .conThumb > em 규칙이 추가되면 이 블록은 제거해도 된다.
   -------------------------------------------------------------------------- */
.conThumb > em {
  position: absolute;
  font-size: 1.4rem;
  border-radius: 100rem;
  right: 2rem;
  top: 2rem;
  line-height: 1;
  padding: 0.6rem 1rem;
  color: #FFFFFF;
}

.conThumb > em.lec_ing {
  background: #3B67D7;
}

.conThumb > em.lec_com {
  background: #000000;
}