/* layout.mobile-patch.css
   모바일에서 main-works 텍스트가 잘리지 않도록 하고
   배경이 화면 높이의 90vh까지 보이도록 하는 오버라이드
   적용 위치: 기존 layout.css 아래에 import 하거나, <link>로 가장 마지막에 로드
*/

@media (max-width: 768px){
  .main-works{ padding:40px 0; overflow:visible; }
  .main-works .contain{ display:block; max-width:100%; padding-left:20px; padding-right:20px; }
  .main-works .title{ width:100%; margin-bottom:20px; }
  .main-works .title h2{ font-size:28px; }
  .main-works .title p{ font-size:15px; line-height:1.6; }

  .main-works .content{ width:100%; }
  .main-works .row{ display:block; margin:0; }
  .main-works .col{ width:100%; padding:0; margin:0 0 24px 0; }
  .main-works .col:nth-child(2){ margin-top:0; }

  /* 핵심: 카드의 높이를 고정값(500px) 대신 뷰포트의 90% 이상으로 */
  .main-works .link{
    height:auto !important;
    min-height:40vh !important;
    overflow:visible;             /* 텍스트 잘림 방지 */
  }

  /* 배경 이미지는 기존 cover 유지, 내부 여백만 살짝 조정 */
  .main-works .link .bg{
    background-size:cover;
  }

  /* 텍스트가 줄임/클램프 되지 않도록 */
  .main-works .link .inner{
    position:absolute;
    bottom:0; left:0; width:100%;
    padding:22px 20px 26px 20px;
  }
  .main-works .link .tit{
    font-size:22px; line-height:1.35; margin-bottom:8px;
  }
  .main-works .link .txt{
    font-size:15px; line-height:1.65;
    white-space:normal !important;
    overflow:visible !important;
    -webkit-line-clamp:unset;     /* 혹시 모를 클램프 무력화 */
    display:block;
  }
  .main-works .link .hover{ pointer-events:none; } /* 오버레이가 텍스트 클릭 방해 방지(선택) */
}