/*
 * FloS /topics/ — 휴대폰·태블릿 히어로 v34 (Claude, 2026-10-03)
 *
 * PC 히어로(v33)와 같은 그림 한 장(assets/img/topics-hero-v33.webp)을 쓴다. 새 그림 파일은 없다.
 *  - 휴대폰(760px 이하): 글자는 위, 그림은 아래. 그림의 오른쪽 3분의 2(챔순이·화분·책더미·손글씨)를 쓰고,
 *    위·왼쪽 가장자리는 부드럽게 풀어서 네모난 경계가 보이지 않게 한다.
 *  - 태블릿(761~999px): 그림 전체를 아래에 깔고 글자는 왼쪽 빈 곳(따뜻한 크림색)에 놓는다. PC와 같은 장면이다.
 * 글자는 모두 HTML이다. 크기는 cqw(히어로 너비의 1/100)라 화면 폭에 비례한다.
 * 맨 마지막에 불러오며 옛 규칙을 이기려고 !important와 body 선택자를 쓴다. PC(1000px~)는 v33이 맡는다.
 */
@media (max-width:999px){
  body.topics-home-v3 .th-hero-v15{
    display:block!important;
    position:relative!important;
    container-type:inline-size!important;
    min-height:0!important;
    height:auto!important;
    padding:0!important;
    overflow:hidden!important;
    isolation:isolate!important;
    background:linear-gradient(180deg,#fff5ef 0%,#fdeee6 55%,#fbe6dd 100%)!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,
  body.topics-home-v3 .th-hero-v15-handnote,
  body.topics-home-v3 .th-hero-v15 .th-hero-v15-art .th-hero-v15-mobile-mascot,
  body.topics-home-v3 .th-hero-v15 .th-hero-v15-art .th-hero-v15-handnote{display:none!important}

  body.topics-home-v3 .th-hero-v15-copy{
    position:relative!important;
    z-index:3!important;
    display:block!important;
    margin:0!important;
    background:none!important;
  }
  body.topics-home-v3 .th-hero-v15-kicker,
  body.topics-home-v3 .th-hero-v15 h1,
  body.topics-home-v3 .th-hero-v15-lead,
  body.topics-home-v3 .th-hero-v15-sub,
  body.topics-home-v3 .th-hero-v15-cta{position:static!important;margin-left:0!important;margin-right:0!important;max-width:none!important}

  body.topics-home-v3 .th-hero-v15-kicker{
    display:inline-flex!important;
    align-items:center!important;
    height:auto!important;
    gap:1.6cqw!important;
    padding:1.3cqw 3.4cqw 1.3cqw 1.4cqw!important;
    border-radius:999px!important;
    background:rgba(255,206,224,.82)!important;
    box-shadow:none!important;
    color:#6f4f5a!important;
    font-size:3.3cqw!important;
    font-weight:700!important;
    letter-spacing:-.01em!important;
    white-space:nowrap!important;
  }
  body.topics-home-v3 .th-hero-v15-kicker span{width:6.4cqw!important;height:6.4cqw!important;font-size:3.6cqw!important}
  body.topics-home-v3 .th-hero-v15 h1{
    margin-top:3cqw!important;
    margin-bottom:0!important;
    font-family:var(--font-sans)!important;
    font-size:12.6cqw!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{
    margin-top:3cqw!important;
    margin-bottom:0!important;
    color:#3a3133!important;
    font-size:3.9cqw!important;
    font-weight:500!important;
    line-height:1.62!important;
    letter-spacing:-.02em!important;
    word-break:keep-all!important;
  }
  body.topics-home-v3 .th-hero-v15-sub{
    margin-top:2cqw!important;
    margin-bottom:0!important;
    color:#8a7d7f!important;
    font-size:3.1cqw!important;
    line-height:1.55!important;
    word-break:keep-all!important;
  }
  body.topics-home-v3 .th-hero-v15-cta{
    margin-top:4cqw!important;
    width:auto!important;
    height:auto!important;
    padding:3cqw 4.6cqw 3cqw 5cqw!important;
    box-sizing:border-box!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:3cqw!important;
    border-radius:999px!important;
    background:#2f2724!important;
    color:#fff!important;
    font-size:3.5cqw!important;
    font-weight:700!important;
    white-space:nowrap!important;
    box-shadow:0 1.4cqw 3cqw rgba(48,36,30,.2)!important;
  }
  body.topics-home-v3 .th-hero-v15-cta span{margin-left:1cqw!important;font-size:5cqw!important;font-weight:400!important}

  /* 그림 칸: 히어로 아래쪽에 깔리고, 위·왼쪽 가장자리가 부드럽게 풀린다 */
  body.topics-home-v3 .th-hero-v15-art{
    position:relative!important;
    inset:auto!important;
    z-index:1!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    overflow:hidden!important;
    pointer-events:none!important;
    border:0!important;
    box-shadow:none!important;
    filter:none!important;
    background:url("/assets/img/topics-hero-v33.webp?v=20261003-v33b") right bottom/178.6% auto no-repeat!important;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) 12%,#000 26%),linear-gradient(to right,transparent 0,#000 22%)!important;
    mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) 12%,#000 26%),linear-gradient(to right,transparent 0,#000 22%)!important;
    -webkit-mask-composite:source-in!important;
    mask-composite:intersect!important;
  }
}

/* 휴대폰 */
@media (max-width:760px){
  body.topics-home-v3 .th-hero-v15-copy{width:auto!important;max-width:none!important;padding:6.2cqw 6.4cqw 0!important;box-sizing:border-box!important}
  body.topics-home-v3 .th-hero-v15-art{
    aspect-ratio:1680/1066!important;
    margin-top:-3cqw!important;
  }
}

/* 태블릿: 그림 전체를 아래에 깔고, 글자는 왼쪽 크림색 자리에 */
@media (min-width:761px) and (max-width:999px){
  body.topics-home-v3 .th-hero-v15{background:#fbeee6!important}
  body.topics-home-v3 .th-hero-v15-copy{
    width:39cqw!important;
    padding:5cqw 0 6cqw 11cqw!important;
    box-sizing:content-box!important;
  }
  body.topics-home-v3 .th-hero-v15-kicker{font-size:1.9cqw!important;padding:.8cqw 2cqw .8cqw .8cqw!important;gap:1cqw!important}
  body.topics-home-v3 .th-hero-v15-kicker span{width:3.2cqw!important;height:3.2cqw!important;font-size:1.9cqw!important}
  body.topics-home-v3 .th-hero-v15 h1{margin-top:1.8cqw!important;font-size:7.4cqw!important}
  body.topics-home-v3 .th-hero-v15-lead{margin-top:1.8cqw!important;font-size:2.05cqw!important}
  body.topics-home-v3 .th-hero-v15-sub{margin-top:1.2cqw!important;font-size:1.65cqw!important}
  body.topics-home-v3 .th-hero-v15-cta{margin-top:2.6cqw!important;padding:1.6cqw 2.6cqw 1.6cqw 3cqw!important;gap:1.8cqw!important;font-size:1.9cqw!important;box-shadow:0 .8cqw 1.8cqw rgba(48,36,30,.2)!important}
  body.topics-home-v3 .th-hero-v15-cta span{font-size:2.6cqw!important}
  /* 그림은 히어로 전체 바닥에 깔고(2000:711), 글자 칸이 그 위에 겹친다 */
  body.topics-home-v3 .th-hero-v15-art{
    position:absolute!important;
    left:0!important;right:0!important;bottom:0!important;top:auto!important;
    aspect-ratio:2000/711!important;
    margin:0!important;
    background:url("/assets/img/topics-hero-v33.webp?v=20261003-v33b") center/100% 100% no-repeat!important;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) 14%,#000 30%)!important;
    mask-image:linear-gradient(to bottom,transparent 0,rgba(0,0,0,.55) 14%,#000 30%)!important;
    -webkit-mask-composite:source-over!important;
    mask-composite:add!important;
  }
}