/*
 * FloS /topics/ — Picture2 precision pass v24
 * 2026-10-03
 *
 * v23에서 구조와 비율은 그림2 기준으로 맞췄다.
 * v24는 데스크톱 장식 이미지의 사각 잘림을 없애고,
 * 그림2처럼 카드 속에 자연스럽게 녹아들도록 페더링/크기만 정밀 보정한다.
 */

@media (min-width:761px){
  /* 분야별 주제: 책 읽는 챔순이가 별도 사각 이미지처럼 보이지 않게 */
  .topics-home-v3 .topic-catalog-art-wrap{
    top:2px!important;
    right:2px!important;
    width:280px!important;
    height:150px!important;
    overflow:visible!important;
    border-radius:0!important;
  }
  .topics-home-v3 .topic-card-art-catalog{
    top:0!important;
    right:0!important;
    width:285px!important;
    height:auto!important;
    object-fit:contain!important;
    object-position:right top!important;
    border-radius:0!important;
    -webkit-mask-image:radial-gradient(ellipse 82% 80% at 66% 46%,#000 0 60%,rgba(0,0,0,.82) 73%,transparent 100%)!important;
    mask-image:radial-gradient(ellipse 82% 80% at 66% 46%,#000 0 60%,rgba(0,0,0,.82) 73%,transparent 100%)!important;
  }

  /* Editor's Pick: 오른쪽 캐릭터/책 장면이 카드 안으로 자연스럽게 이어지게 */
  .topics-home-v3 .pick-top .side-box{
    width:60%!important;
  }
  .topics-home-v3 .topic-card-art-pick{
    right:-2px!important;
    bottom:-5px!important;
    width:47%!important;
    max-width:265px!important;
    border-radius:0!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.58) 11%,#000 25%,#000 100%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.58) 11%,#000 25%,#000 100%)!important;
  }

  /* 회원 제안: 그림2처럼 오른쪽 장식을 더 넓게 보여주되 목록과 충돌하지 않게 */
  .topics-home-v3 .member-proposals{
    min-height:270px!important;
  }
  .topics-home-v3 .member-proposals .side-box{
    width:60%!important;
  }
  .topics-home-v3 .topic-card-art-member{
    right:-3px!important;
    bottom:-8px!important;
    width:42%!important;
    max-width:220px!important;
    clip-path:none!important;
    object-fit:contain!important;
    object-position:right bottom!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.58) 13%,#000 27%,#000 100%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.58) 13%,#000 27%,#000 100%)!important;
  }
}

/* 4K/대형 화면에서도 그림2의 비율이 과하게 벌어지지 않도록 */
@media (min-width:1480px){
  .topics-home-v3 .topic-index-v3.topics-picture2-layout{
    grid-template-columns:minmax(0,1.16fr) minmax(410px,.84fr)!important;
  }
  .topics-home-v3 .topics-picture2-right{
    grid-template-rows:minmax(220px,.88fr) minmax(270px,1.12fr)!important;
  }
}