@charset "utf-8";

/*
 * bz_works_react.css — React 어댑테이션 브리지 (퍼블리싱 bz_works.css 보완)
 *
 * 변경 사유(2026-06-23): 퍼블리싱 bz_works.css의 드라이브 카드 썸네일 규칙은
 *   .bz_drive_list > ul > li > a > img / li > img (TAG=img) 기준이다.
 *   - 데스크톱 크기:  li > a > img { width:100% }            (837)
 *   - 라인뷰 숨김:    .view_type_list ... li > a > img {none}  (1086)  ← class .bz_drive_list_thumbnail 도 포함(직접자식 한정)
 *   - ≤760 숨김:      li > a > img, li > img { display:none }  (1572)
 *   그러나 "문서 카드"의 미리보기는 슬라이드/iframe을 렌더하는 <div class="bz_drive_list_thumbnail">라
 *   tag 셀렉터가 닿지 않아 모바일/라인뷰에서 썸네일이 숨지 않고 거대하게 남는다(반응형 깨짐).
 *   → div 썸네일 전용으로 동일 동작(데스크톱 크기 + 라인뷰/≤760 숨김)을 브리지한다.
 *   (폴더/새폴더 카드는 실제 <img>라 퍼블리싱 규칙이 그대로 적용됨 — 인라인 스타일만 제거)
 */

/* 데스크톱 박스뷰: img의 width:100% + 자연 높이를 div(aspect-ratio)로 대체 */
.bz_workspace .bz_main .bz_drive_list > ul > li a div.bz_drive_list_thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background-color: #ffffff;
}

/* 라인뷰(view_type_list)에서 div 썸네일 숨김 (퍼블리싱은 tag 기준이라 div 미적용) */
.bz_workspace .bz_main .bz_drive_list.view_type_list > ul > li a div.bz_drive_list_thumbnail {
  display: none !important;
}

/* ≤760 모바일에서 div 썸네일 숨김 → 카드가 컴팩트 행으로 (퍼블리싱 의도와 일치) */
@media (max-width: 760px) {
  .bz_workspace .bz_main .bz_drive_list > ul > li a div.bz_drive_list_thumbnail {
    display: none !important;
  }
}

/*
 * 변경 사유(2026-06-25): 카드 제목의 파일 아이콘(i_word/i_pdf 등)이 텍스트와 분리되어
 *   자기 줄로 떨어지는 문제 — 아이콘 1줄 + 텍스트 클램프 2줄 = 최대 3줄로 보임.
 *   원인: Tailwind preflight의 `img{display:block}`이, line-clamp용으로
 *   `display:-webkit-box; -webkit-box-orient:vertical`인 strong 안에서 아이콘 img를
 *   블록 요소로 만들어 줄바꿈시킴. 원본 퍼블리싱은 Tailwind가 없어 img가 기본 inline이라
 *   아이콘이 텍스트 첫 줄에 붙고 정상적으로 2줄로 끊긴다.
 *   → 제목 아이콘만 inline(+baseline)으로 되돌려 퍼블리싱과 동일 동작 복원.
 *   (썸네일 등 다른 img는 영향 없음 — 이 셀렉터는 제목 strong 직계 img만 한정)
 */
.bz_workspace
  .bz_main
  .bz_drive_list
  > ul
  > li
  .bz_drive_list_content
  .bz_drive_list_title
  strong
  > img {
  display: inline;
  /* 변경 사유(2026-06): baseline 정렬 시 아이콘 하단이 첫 줄 베이스라인에 붙어
     아이콘이 위로 떠오르고 글자 줄이 아이콘 하단에 맞춰져 보임.
     아이콘 높이(1.4666em)가 줄 높이와 같으므로 top으로 첫 줄 라인박스에 맞춤
     (display:inline 유지 → 2줄 line-clamp 그대로 동작). */
  vertical-align: top;
}