/*
 * FloS /topics/ — PC 히어로 v33 (Claude, 2026-10-03)
 *
 * 승인된 히어로 그림(따뜻한 서재 + 세 손가락 챔순이) 한 장을 통째로 배경으로 깐다.
 *  - 그림은 글자·버튼·손글씨를 지운 배경 한 장(assets/img/topics-hero-v33.webp). 장식이 제목 뒤에서 끊기지 않는다.
 *  - 제목·설명·버튼은 지금처럼 실제 HTML 글자다. 위치와 크기는 모두 cqw(히어로 너비의 1/100)라서
 *    창 폭이 달라져도 그림과 같은 비율로 움직인다. 그림 속 옛 글자 자리가 곧 HTML 글자 자리다.
 *  - 하얀 막(::before)·좌우 분할·챔순이 오려낸 그림(::before)을 모두 쓰지 않는다.
 *  - PC 폭(1000px 이상)에만 적용한다. 그보다 좁은 화면은 기존 규칙 그대로(휴대폰은 다음 단계에서 같은 그림으로 만든다).
 *
 * 맨 마지막에 불러오며, 앞의 v15~v32 규칙을 이기려고 !important와 body 선택자를 쓴다.
 * 그림을 고해상도로 바꿀 때는 topics-hero-v33.webp 파일만 같은 이름으로 바꾸면 된다.
 */
@media (min-width:1000px){
  body.topics-home-v3 .th-hero-v15{
    display:block!important;
    position:relative!important;
    container-type:inline-size!important;
    aspect-ratio:2000/711!important;
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    overflow:hidden!important;
    isolation:isolate!important;
    background:#fbeee6 url("/assets/img/topics-hero-v33.webp?v=20261003-v33b") center/100% 100% no-repeat!important;
  }
  body.topics-home-v3 .th-hero-v15::before,
  body.topics-home-v3 .th-hero-v15::after,
  body.topics-home-v3 .th-hero-v15-art::before,
  body.topics-home-v3 .th-hero-v15-art::after{
    content:none!important;
    display:none!important;
    background:none!important;
  }
  body.topics-home-v3 .th-hero-v15-scene,
  body.topics-home-v3 .th-hero-v15-mobile-mascot{display:none!important}

  /* 글 묶음은 자리를 차지하지 않고, 아래 글자들이 히어로 기준으로 놓인다 */
  body.topics-home-v3 .th-hero-v15-copy{
    position:static!important;
    padding:0!important;
    margin:0!important;
  }
  body.topics-home-v3 .th-hero-v15-art{
    position:absolute!important;
    inset:0!important;
    z-index:3!important;
    overflow:visible!important;
    pointer-events:none!important;
    background:none!important;
    background-image:none!important;
    border:0!important;
    box-shadow:none!important;
    filter:none!important;
  }

  body.topics-home-v3 .th-hero-v15-kicker{
    position:absolute!important;
    z-index:6!important;
    left:10.7cqw!important;
    top:4.55cqw!important;
    height:3.3cqw!important;
    margin:0!important;
    padding:0 1.7cqw 0 .55cqw!important;
    gap:.75cqw!important;
    display:inline-flex!important;
    align-items:center!important;
    border-radius:999px!important;
    background:rgba(255,206,224,.82)!important;
    box-shadow:none!important;
    color:#6f4f5a!important;
    font-size:1.32cqw!important;
    font-weight:700!important;
    letter-spacing:-.01em!important;
    white-space:nowrap!important;
  }
  body.topics-home-v3 .th-hero-v15-kicker span{
    width:2.2cqw!important;
    height:2.2cqw!important;
    font-size:1.25cqw!important;
  }

  body.topics-home-v3 .th-hero-v15 h1{
    position:absolute!important;
    z-index:6!important;
    left:10.5cqw!important;
    top:8.25cqw!important;
    margin:0!important;
    font-family:var(--font-sans)!important;
    font-size:5.7cqw!important;
    font-weight:800!important;
    line-height:1.12!important;
    letter-spacing:-.045em!important;
    white-space:nowrap!important;
  }
  body.topics-home-v3 .th-hero-v15 h1 b{
    font-size:.3em!important;
    transform:translateY(.1em) rotate(-12deg)!important;
  }

  body.topics-home-v3 .th-hero-v15-lead{
    position:absolute!important;
    z-index:6!important;
    left:10.7cqw!important;
    top:16.9cqw!important;
    margin:0!important;
    color:#3a3133!important;
    font-size:1.4cqw!important;
    font-weight:500!important;
    line-height:2.35cqw!important;
    letter-spacing:-.02em!important;
    white-space:nowrap!important;
  }
  body.topics-home-v3 .th-hero-v15-sub{
    position:absolute!important;
    z-index:6!important;
    left:10.8cqw!important;
    top:22.6cqw!important;
    max-width:none!important;
    margin:0!important;
    color:#8a7d7f!important;
    font-size:1.06cqw!important;
    line-height:1.5!important;
    white-space:nowrap!important;
  }
  body.topics-home-v3 .th-hero-v15-cta{
    position:absolute!important;
    z-index:6!important;
    left:28cqw!important;
    top:26.1cqw!important;
    width:22.5cqw!important;
    height:3.9cqw!important;
    margin:0!important;
    padding:0 2cqw 0 2.4cqw!important;
    box-sizing:border-box!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    gap:0!important;
    border-radius:999px!important;
    background:#2f2724!important;
    color:#fff!important;
    font-size:1.1cqw!important;
    font-weight:700!important;
    white-space:nowrap!important;
    box-shadow:0 .5cqw 1.1cqw rgba(48,36,30,.2)!important;
  }
  body.topics-home-v3 .th-hero-v15-cta span{
    margin-left:auto!important;
    font-size:1.9cqw!important;
    font-weight:400!important;
  }

  /* 오른쪽 위 손글씨는 그림 속에 그대로 들어 있다(원본 손글씨). HTML 손글씨는 쓰지 않는다 */
  body.topics-home-v3 .th-hero-v15-handnote{display:none!important}
}