/*
 * FloS /topics/ — Picture2 reference-art pass v25
 * 2026-10-03
 *
 * 목표: 승인된 그림2에서 보이는 세 장식과 가장 가까운 기존 자산을 사용한다.
 * - 분야별 주제: 눈 감고 책 읽는 챔순이 + 실제 손글씨를 HTML/CSS로 재현
 * - Editor's Pick: 책 위로 빼꼼 올라온 챔순이
 * - 회원 제안: 말풍선 + 눈 뜬 챔순이
 * 원본 이미지 안에 남은 옛 화면 글자는 clip-path/overflow로 보이지 않게 한다.
 */

@media (min-width:761px){
  /* 분야별 주제 — 그림2의 손글씨와 독서 챔순이 */
  .topics-home-v3 .topic-catalog-feature{
    position:relative!important;
  }
  .topics-home-v3 .topic-catalog-feature::after{
    content:"세상을 더 넓고 깊게,\A책으로 만나는 즐거움 ♡"!important;
    position:absolute!important;
    z-index:7!important;
    top:47px!important;
    right:205px!important;
    width:190px!important;
    color:#a76b73!important;
    font-family:var(--font-serif)!important;
    font-size:13px!important;
    font-weight:700!important;
    line-height:1.45!important;
    white-space:pre!important;
    text-align:center!important;
    transform:rotate(-5deg)!important;
    pointer-events:none!important;
  }
  .topics-home-v3 .topic-catalog-art-wrap{
    top:4px!important;
    right:5px!important;
    width:260px!important;
    height:142px!important;
    overflow:hidden!important;
    border-radius:0 18px 0 0!important;
  }
  .topics-home-v3 .topic-card-art-catalog{
    position:absolute!important;
    top:10px!important;
    right:-3px!important;
    width:286px!important;
    height:118px!important;
    max-width:none!important;
    object-fit:contain!important;
    object-position:right top!important;
    clip-path:inset(0 0 0 43%)!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 38%,rgba(0,0,0,.35) 43%,#000 51%,#000 100%)!important;
    mask-image:linear-gradient(90deg,transparent 38%,rgba(0,0,0,.35) 43%,#000 51%,#000 100%)!important;
    filter:none!important;
    opacity:1!important;
  }

  /* Editor's Pick — 그림2와 같은 '책 위로 빼꼼' 챔순이 */
  .topics-home-v3 .pick-top .side-box{
    width:62%!important;
  }
  .topics-home-v3 .topic-card-art-pick{
    right:0!important;
    bottom:0!important;
    width:248px!important;
    height:184px!important;
    max-width:48%!important;
    object-fit:contain!important;
    object-position:right bottom!important;
    border-radius:0 0 18px 0!important;
    clip-path:polygon(0 0,68% 0,68% 18%,100% 18%,100% 100%,0 100%)!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
    filter:none!important;
    opacity:1!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:0!important;
    bottom:0!important;
    width:253px!important;
    height:200px!important;
    max-width:45%!important;
    object-fit:contain!important;
    object-position:right bottom!important;
    border-radius:0 0 18px 0!important;
    clip-path:polygon(37% 0,100% 0,100% 100%,0 100%,0 24%,37% 24%)!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 12%,#000 24%,#000 100%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,rgba(0,0,0,.35) 12%,#000 24%,#000 100%)!important;
    filter:none!important;
    opacity:1!important;
  }
}

/* 모바일에서도 새 자산이 글을 가리지 않도록 별도 조정 */
@media (max-width:760px){
  .topics-home-v3 .topic-catalog-feature::after{
    display:none!important;
    content:none!important;
  }
  .topics-home-v3 .topic-catalog-art-wrap{
    overflow:hidden!important;
  }
  .topics-home-v3 .topic-card-art-catalog{
    width:190px!important;
    height:auto!important;
    right:-8px!important;
    top:4px!important;
    clip-path:inset(0 0 0 38%)!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 34%,#000 49%,#000 100%)!important;
    mask-image:linear-gradient(90deg,transparent 34%,#000 49%,#000 100%)!important;
  }
  .topics-home-v3 .topic-card-art-pick{
    width:145px!important;
    height:auto!important;
    right:0!important;
    bottom:0!important;
    clip-path:polygon(0 0,67% 0,67% 19%,100% 19%,100% 100%,0 100%)!important;
    -webkit-mask-image:none!important;
    mask-image:none!important;
  }
  .topics-home-v3 .topic-card-art-member{
    width:142px!important;
    height:auto!important;
    right:-2px!important;
    bottom:0!important;
    clip-path:polygon(36% 0,100% 0,100% 100%,0 100%,0 24%,36% 24%)!important;
    -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 100%)!important;
    mask-image:linear-gradient(90deg,transparent 0%,#000 24%,#000 100%)!important;
  }
}