/*
 * FloS /topics/ — Picture2 rebuild v23
 * 기준: 사용자 승인 시안(그림2)
 * 구조: 큰 히어로 + [분야별 주제] | [Editor's Pick / 회원 제안] 비대칭 2열
 * 홈 화면만 적용하며 오래 누적된 theme/v15 override를 사용하지 않는다.
 */

.topics-home-v3{
  --p2-ink:#382d2b;
  --p2-soft:#796b68;
  --p2-pink:#de4f80;
  --p2-pink-soft:#f7dfe9;
  --p2-cream:#fff9ef;
  --p2-line:#e9d8ca;
  --p2-shadow:0 12px 32px rgba(125,83,69,.075);
  margin:0;
  background:
    radial-gradient(circle at 8% 3%,rgba(255,224,235,.52),transparent 25%),
    radial-gradient(circle at 93% 8%,rgba(255,240,217,.62),transparent 26%),
    linear-gradient(180deg,#fffaf2 0%,#fff9f4 62%,#fffaf5 100%);
  color:var(--p2-ink);
}
.topics-home-v3 .shell{
  width:calc(100% - 36px)!important;
  max-width:1480px!important;
  margin:0 auto!important;
  padding:0 0 40px!important;
}

/* ── topbar: 그림2 비율 ───────────────────────── */
.topics-home-v3 .topbar{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:20px!important;
  padding:15px 5px 13px!important;
  margin:0!important;
  border:0!important;
  background:transparent!important;
}
.topics-home-v3 .brand{
  display:flex!important;
  align-items:baseline!important;
  gap:9px!important;
}
.topics-home-v3 .brand-mark{
  color:#3b302b!important;
  font-family:var(--font-serif)!important;
  font-size:31px!important;
  font-weight:700!important;
  letter-spacing:.025em!important;
}
.topics-home-v3 .brand-sub{
  color:#8f7169!important;
  font-size:12px!important;
  font-weight:500!important;
  letter-spacing:.13em!important;
}
.topics-home-v3 .topbar-actions{
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:10px!important;
}
.topics-home-v3 .topbar-actions .chip{
  flex:0 0 auto!important;
  padding:9px 18px!important;
  border:1px solid #eadbc8!important;
  border-radius:999px!important;
  background:rgba(255,252,246,.92)!important;
  color:#493b36!important;
  font-size:12px!important;
  font-weight:700!important;
  box-shadow:0 2px 7px rgba(111,77,64,.025)!important;
}
.topics-home-v3 .topbar-actions .chip:first-child{
  color:#493b36!important;
  background:rgba(255,252,246,.92)!important;
}
.topics-home-v3 .topbar-actions .chip.solid{
  color:#fff!important;
  border-color:#352d28!important;
  background:#352d28!important;
}

/* ── hero: 그림2의 큰 비주얼 ─────────────────── */
.topics-home-v3 .th-hero-v15{
  position:relative!important;
  isolation:isolate!important;
  display:grid!important;
  grid-template-columns:minmax(0,.52fr) minmax(0,.48fr)!important;
  width:100%!important;
  min-height:400px!important;
  margin:0 0 24px!important;
  overflow:hidden!important;
  border:1px solid #ead6c5!important;
  border-radius:24px!important;
  background:
    url("/assets/img/topics-home-bg-v18.webp?v=20261003-v21")
    center center/cover no-repeat!important;
  box-shadow:0 12px 31px rgba(130,87,70,.08)!important;
}
.topics-home-v3 .th-hero-v15::before{
  content:""!important;
  position:absolute!important;
  inset:0!important;
  z-index:-1!important;
  background:
    radial-gradient(circle at 50% 17%,rgba(255,255,255,.30),transparent 27%),
    linear-gradient(90deg,rgba(255,250,243,.62) 0%,rgba(255,249,242,.32) 42%,rgba(255,245,240,.06) 65%,rgba(255,243,239,0) 100%)!important;
  pointer-events:none!important;
}
.topics-home-v3 .th-hero-v15::after{display:none!important;content:none!important}

.topics-home-v3 .th-hero-v15-copy{
  position:relative!important;
  z-index:4!important;
  align-self:center!important;
  min-width:0!important;
  padding:38px 20px 34px 68px!important;
}
.topics-home-v3 .th-hero-v15-kicker{
  display:inline-flex!important;
  align-items:center!important;
  gap:8px!important;
  margin:0 0 17px!important;
  padding:7px 15px 7px 9px!important;
  border-radius:999px!important;
  background:rgba(250,207,223,.83)!important;
  color:#704f58!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1!important;
  box-shadow:inset 0 0 0 1px rgba(224,105,149,.08)!important;
}
.topics-home-v3 .th-hero-v15-kicker span{
  display:grid!important;
  place-items:center!important;
  width:29px!important;
  height:29px!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,#ffd962,#ffb640)!important;
  font-size:17px!important;
}
.topics-home-v3 .th-hero-v15 h1{
  margin:0!important;
  color:#312727!important;
  font-family:var(--font-serif)!important;
  font-size:clamp(58px,5.2vw,80px)!important;
  font-weight:700!important;
  line-height:.98!important;
  letter-spacing:-.065em!important;
  white-space:nowrap!important;
}
.topics-home-v3 .th-hero-v15 h1 em{
  font-style:normal!important;
  background:linear-gradient(102deg,#e14478 0%,#e34c88 48%,#8d45bd 100%)!important;
  -webkit-background-clip:text!important;
  background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
}
.topics-home-v3 .th-hero-v15 h1 b{
  display:inline-block!important;
  margin-left:.03em!important;
  color:#df4c80!important;
  font-family:var(--font-sans)!important;
  font-size:.27em!important;
  vertical-align:top!important;
  transform:translateY(.24em) rotate(-10deg)!important;
  -webkit-text-fill-color:#df4c80!important;
}
.topics-home-v3 .th-hero-v15-lead{
  margin:24px 0 9px!important;
  color:#514645!important;
  font-size:16px!important;
  font-weight:500!important;
  line-height:1.68!important;
  letter-spacing:-.018em!important;
  word-break:keep-all!important;
}
.topics-home-v3 .th-hero-v15-sub{
  margin:0!important;
  color:#84726d!important;
  font-size:11.5px!important;
  line-height:1.65!important;
  word-break:keep-all!important;
}
.topics-home-v3 .th-hero-v15-cta{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:27px!important;
  margin-top:22px!important;
  padding:13px 23px!important;
  border-radius:999px!important;
  background:#342c28!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:700!important;
  line-height:1!important;
  box-shadow:0 9px 21px rgba(51,42,37,.15)!important;
}
.topics-home-v3 .th-hero-v15-cta span{
  font-size:21px!important;
  font-weight:400!important;
}

.topics-home-v3 .th-hero-v15-art{
  position:relative!important;
  z-index:3!important;
  min-width:0!important;
  overflow:visible!important;
}
.topics-home-v3 .th-hero-v15-mobile-mascot{
  display:block!important;
  position:absolute!important;
  right:2.5%!important;
  bottom:-9px!important;
  width:min(590px,96%)!important;
  height:auto!important;
  max-width:none!important;
  max-height:105%!important;
  object-fit:contain!important;
  object-position:right bottom!important;
  image-rendering:auto!important;
  filter:drop-shadow(0 18px 27px rgba(178,92,126,.12))!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
.topics-home-v3 .th-hero-v15-handnote{
  position:absolute!important;
  z-index:6!important;
  top:40px!important;
  right:28px!important;
  margin:0!important;
  color:#9b6259!important;
  font-family:var(--font-serif)!important;
  font-size:16px!important;
  font-weight:700!important;
  line-height:1.5!important;
  text-align:center!important;
  transform:rotate(-5deg)!important;
  text-shadow:0 1px 0 rgba(255,255,255,.75)!important;
  pointer-events:none!important;
}

/* ── 그림2 메인 카드 그리드 ─────────────────── */
.topics-home-v3 .topic-index-v3.topics-picture2-layout{
  display:grid!important;
  grid-template-columns:minmax(0,1.18fr) minmax(390px,.92fr)!important;
  gap:18px!important;
  align-items:stretch!important;
  margin:0 0 22px!important;
}
.topics-home-v3 .topics-picture2-right{
  display:grid!important;
  grid-template-rows:minmax(215px,.88fr) minmax(265px,1.12fr)!important;
  gap:16px!important;
  min-width:0!important;
}
.topics-home-v3 .topic-index-v3 .board{
  position:relative!important;
  isolation:isolate!important;
  min-width:0!important;
  margin:0!important;
  overflow:hidden!important;
  border:1px solid var(--p2-line)!important;
  border-radius:21px!important;
  box-shadow:var(--p2-shadow)!important;
}
.topics-home-v3 .topic-index-v3 .board-head{
  position:relative!important;
  z-index:5!important;
  display:flex!important;
  align-items:flex-start!important;
  justify-content:space-between!important;
  gap:12px!important;
  padding:22px 24px 9px!important;
  border:0!important;
  background:transparent!important;
}
.topics-home-v3 .topic-index-v3 .board-head h2{
  margin:0!important;
  color:#3a2f2d!important;
  font-family:var(--font-serif)!important;
  font-size:28px!important;
  font-weight:700!important;
  line-height:1.18!important;
  letter-spacing:-.025em!important;
}
.topics-home-v3 .topic-index-v3 .board-head .note{
  flex:0 0 auto!important;
  margin-top:3px!important;
  color:#6e625e!important;
  font-size:11px!important;
  font-weight:600!important;
}

/* ── 분야별 주제: 왼쪽 큰 카드 ────────────────── */
.topics-home-v3 .topic-catalog-feature{
  min-height:520px!important;
  background:
    radial-gradient(circle at 90% 4%,rgba(255,255,255,.78),transparent 26%),
    linear-gradient(145deg,#fffaf2 0%,#fff7ec 62%,#fffaf5 100%)!important;
}
.topics-home-v3 .topic-catalog-feature .board-head{
  padding:25px 26px 4px!important;
}
.topics-home-v3 .topic-catalog-feature .board-head h2::before{
  content:"📖"!important;
  display:inline-block!important;
  margin-right:11px!important;
  font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif!important;
  font-size:31px!important;
  vertical-align:-2px!important;
}
.topics-home-v3 .topic-catalog-intro{
  position:relative!important;
  z-index:5!important;
  width:63%!important;
  margin:0!important;
  padding:4px 26px 18px!important;
  color:#766964!important;
  font-size:12.5px!important;
  line-height:1.55!important;
  word-break:keep-all!important;
}
.topics-home-v3 .topic-catalog-art-wrap{
  position:absolute!important;
  z-index:2!important;
  top:16px!important;
  right:13px!important;
  width:225px!important;
  height:116px!important;
  overflow:hidden!important;
  border-radius:17px!important;
  pointer-events:none!important;
}
.topics-home-v3 .topic-card-art-catalog{
  position:absolute!important;
  top:0!important;
  right:0!important;
  width:254px!important;
  height:165px!important;
  max-width:none!important;
  object-fit:cover!important;
  object-position:right top!important;
  opacity:.98!important;
}
.topics-home-v3 .topic-catalog-feature .board-list{
  position:relative!important;
  z-index:5!important;
  display:grid!important;
  gap:10px!important;
  max-height:390px!important;
  margin:0!important;
  padding:4px 19px 19px!important;
  overflow-y:auto!important;
  scrollbar-width:thin!important;
  scrollbar-color:#e4b0a7 #f9ebdf!important;
}
.topics-home-v3 .topic-catalog-feature .board-list::-webkit-scrollbar{width:6px!important}
.topics-home-v3 .topic-catalog-feature .board-list::-webkit-scrollbar-track{
  background:#f9ebdf!important;border-radius:999px!important;
}
.topics-home-v3 .topic-catalog-feature .board-list::-webkit-scrollbar-thumb{
  background:#e3aca3!important;border-radius:999px!important;
}
.topics-home-v3 .topic-catalog-feature .board-list li{
  margin:0!important;
  border:1px solid #eedfd1!important;
  border-radius:17px!important;
  background:rgba(255,253,249,.93)!important;
  box-shadow:0 4px 12px rgba(122,91,75,.025)!important;
}
.topics-home-v3 .topic-catalog-feature .board-row{
  display:grid!important;
  grid-template-columns:58px minmax(0,1fr) auto!important;
  gap:3px 13px!important;
  align-items:center!important;
  min-height:82px!important;
  padding:11px 16px 11px 12px!important;
}
.topics-home-v3 .catalog-icon{
  grid-column:1!important;
  grid-row:1 / span 2!important;
  display:grid!important;
  place-items:center!important;
  width:50px!important;
  height:50px!important;
  border-radius:50%!important;
  background:linear-gradient(145deg,#fff2e5,#fae6db)!important;
  font-size:25px!important;
  box-shadow:inset 0 0 0 1px rgba(225,183,165,.20)!important;
}
.topics-home-v3 .catalog-copy{
  grid-column:2!important;
  min-width:0!important;
}
.topics-home-v3 .topic-catalog-feature .row-title{
  display:block!important;
  margin:0 0 3px!important;
  color:#392f2d!important;
  font-family:var(--font-serif)!important;
  font-size:18px!important;
  font-weight:700!important;
  line-height:1.28!important;
}
.topics-home-v3 .topic-catalog-feature .row-meta{
  grid-column:3!important;
  grid-row:1 / span 2!important;
  align-self:center!important;
  color:#7b6c67!important;
  font-size:11.5px!important;
  white-space:nowrap!important;
}
.topics-home-v3 .topic-catalog-feature .row-meta span{
  margin-left:8px!important;
  color:#df6688!important;
  font-size:18px!important;
}
.topics-home-v3 .topic-catalog-feature .row-preview{
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.topics-home-v3 .topic-catalog-feature .row-body{
  display:block!important;
  max-height:3em!important;
  overflow:hidden!important;
  color:#766963!important;
  font-size:11px!important;
  line-height:1.5!important;
  white-space:normal!important;
}
.topics-home-v3 .topic-catalog-feature .row-body a{
  display:inline!important;
  color:#766963!important;
}
.topics-home-v3 .topic-catalog-feature .row-body a:not(:last-child)::after{
  content:"  |  "!important;
  color:#c9ada2!important;
}

/* ── Editor's Pick: 오른쪽 위 ────────────────── */
.topics-home-v3 .pick-top{
  min-height:215px!important;
  background:
    radial-gradient(circle at 20% 10%,rgba(255,255,255,.76),transparent 30%),
    linear-gradient(145deg,#fff8fc 0%,#f3ebff 58%,#fff8fc 100%)!important;
}
.topics-home-v3 .pick-top .board-head{
  padding:23px 22px 6px!important;
}
.topics-home-v3 .pick-top .board-head h2::before{
  content:"⭐"!important;
  display:inline-block!important;
  margin-right:10px!important;
  font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif!important;
  font-size:29px!important;
  vertical-align:-2px!important;
}
.topics-home-v3 .pick-top .board-head h2::after{
  content:"\A플로스 에디터가 고른, 지금 읽기 좋은 책"!important;
  display:block!important;
  margin:5px 0 0 44px!important;
  color:#71646d!important;
  font-family:var(--font-sans)!important;
  font-size:11px!important;
  font-weight:500!important;
  line-height:1.4!important;
  letter-spacing:0!important;
  white-space:pre!important;
}
.topics-home-v3 .pick-top .side-box{
  position:relative!important;
  z-index:5!important;
  width:62%!important;
  padding:7px 0 18px 22px!important;
}
.topics-home-v3 .pick-top .row-preview{
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.topics-home-v3 .pick-top .row-body{
  position:relative!important;
  display:block!important;
  max-height:95px!important;
  overflow-y:auto!important;
  padding:15px 17px 13px 48px!important;
  border:1px solid rgba(225,207,235,.54)!important;
  border-radius:28px!important;
  background:rgba(255,255,255,.76)!important;
  color:#443a42!important;
  font-size:13px!important;
  line-height:1.55!important;
  scrollbar-width:none!important;
}
.topics-home-v3 .pick-top .row-body::-webkit-scrollbar{display:none!important}
.topics-home-v3 .pick-top .row-body::before{
  content:"“"!important;
  position:absolute!important;
  left:18px!important;
  top:3px!important;
  color:#d9b6f0!important;
  font-family:Georgia,serif!important;
  font-size:42px!important;
  font-weight:700!important;
}
.topics-home-v3 .pick-top .row-body a{
  display:block!important;
  margin:0!important;
  padding:1px 0!important;
  color:#433843!important;
  font-size:13px!important;
  font-weight:600!important;
  white-space:normal!important;
}
.topics-home-v3 .pick-top .row-body a::after{display:none!important;content:none!important}
.topics-home-v3 .pick-top .row-body a small{
  margin-left:5px!important;
  color:#a779bb!important;
}
.topics-home-v3 .topic-card-art-pick{
  position:absolute!important;
  z-index:3!important;
  right:-6px!important;
  bottom:-3px!important;
  width:45%!important;
  height:auto!important;
  max-width:245px!important;
  object-fit:cover!important;
  object-position:right bottom!important;
  border-radius:0 0 20px 0!important;
  pointer-events:none!important;
}

/* ── 회원 제안: 오른쪽 아래 ─────────────────── */
.topics-home-v3 .member-proposals{
  min-height:265px!important;
  background:
    radial-gradient(circle at 18% 7%,rgba(255,255,255,.75),transparent 25%),
    linear-gradient(145deg,#fffaf1 0%,#fff4ef 56%,#fff9f6 100%)!important;
}
.topics-home-v3 .member-proposals .board-head{
  padding:20px 22px 4px!important;
}
.topics-home-v3 .member-proposals .board-head h2::before{
  content:"💡"!important;
  display:inline-block!important;
  margin-right:10px!important;
  font-family:"Apple Color Emoji","Segoe UI Emoji",sans-serif!important;
  font-size:26px!important;
  vertical-align:-2px!important;
}
.topics-home-v3 .member-proposals .board-head h2::after{
  content:"\A함께 만드는 더 다양한 주제!\A궁금한 책, 다뤄줬으면 하는 주제를 제안해주세요."!important;
  display:block!important;
  margin:4px 0 0 41px!important;
  color:#776964!important;
  font-family:var(--font-sans)!important;
  font-size:10.5px!important;
  font-weight:500!important;
  line-height:1.5!important;
  letter-spacing:0!important;
  white-space:pre!important;
}
.topics-home-v3 .member-proposals .side-box{
  position:relative!important;
  z-index:5!important;
  width:68%!important;
  padding:8px 0 18px 22px!important;
}
.topics-home-v3 .member-proposals .row-preview{
  display:block!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
}
.topics-home-v3 .member-proposals .row-body{
  display:block!important;
  max-height:125px!important;
  overflow-y:auto!important;
  padding:10px 12px!important;
  border:0!important;
  border-radius:14px!important;
  background:rgba(255,228,232,.60)!important;
  color:#594847!important;
  font-size:12px!important;
  line-height:1.48!important;
  scrollbar-width:thin!important;
  scrollbar-color:#dc7993 #fae3e8!important;
}
.topics-home-v3 .member-proposals .row-body::-webkit-scrollbar{width:5px!important}
.topics-home-v3 .member-proposals .row-body::-webkit-scrollbar-track{
  background:#fae3e8!important;border-radius:999px!important;
}
.topics-home-v3 .member-proposals .row-body::-webkit-scrollbar-thumb{
  background:#dc7993!important;border-radius:999px!important;
}
.topics-home-v3 .member-proposals .row-body a{
  display:block!important;
  margin:0 0 5px!important;
  padding:1px 0!important;
  color:#564342!important;
  font-size:12px!important;
  font-weight:500!important;
  white-space:normal!important;
}
.topics-home-v3 .member-proposals .row-body a::after{display:none!important;content:none!important}
.topics-home-v3 .member-proposals .row-body a small{
  margin-left:4px!important;
  color:#cf5678!important;
}
.topics-home-v3 .topic-card-art-member{
  position:absolute!important;
  z-index:3!important;
  right:8px!important;
  bottom:-4px!important;
  width:31%!important;
  height:auto!important;
  max-width:155px!important;
  clip-path:inset(0 0 0 8%)!important;
  object-fit:cover!important;
  object-position:right bottom!important;
  pointer-events:none!important;
}

/* old pseudo decorations are never used */
.topics-home-v3 .pick-top::before,
.topics-home-v3 .pick-top::after,
.topics-home-v3 .member-proposals::before,
.topics-home-v3 .member-proposals::after,
.topics-home-v3 .topic-catalog-board::before,
.topics-home-v3 .topic-catalog-board::after{
  display:none!important;
  content:none!important;
}

/* ── lower topic tree ─────────────────────── */
.topics-home-v3 .major-nav{
  display:flex!important;
  flex-wrap:wrap!important;
  justify-content:center!important;
  gap:7px!important;
  margin:23px 0 15px!important;
}
.topics-home-v3 .major-nav .chip{
  border-color:#eadbcf!important;
  background:#fffaf3!important;
  color:#625550!important;
}
.topics-home-v3 .major-block{
  border:1px solid #ebddd1!important;
  border-radius:18px!important;
  background:rgba(255,253,248,.94)!important;
  box-shadow:0 7px 20px rgba(122,88,72,.035)!important;
}
.topics-home-v3 .major-title{color:#423632!important}
.topics-home-v3 .footer{border-color:#eadfd6!important}

/* ── tablet ─────────────────────────────── */
@media (max-width:1040px){
  .topics-home-v3 .shell{
    width:calc(100% - 24px)!important;
  }
  .topics-home-v3 .th-hero-v15{
    min-height:355px!important;
  }
  .topics-home-v3 .th-hero-v15-copy{
    padding-left:40px!important;
  }
  .topics-home-v3 .th-hero-v15 h1{
    font-size:clamp(50px,6vw,68px)!important;
  }
  .topics-home-v3 .th-hero-v15-lead{
    margin-top:18px!important;
    font-size:14px!important;
  }
  .topics-home-v3 .th-hero-v15-mobile-mascot{
    right:-1%!important;
    width:min(500px,100%)!important;
  }
  .topics-home-v3 .topic-index-v3.topics-picture2-layout{
    grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr)!important;
    gap:12px!important;
  }
  .topics-home-v3 .topic-catalog-art-wrap{
    width:205px!important;
  }
}

/* ── mobile: 그림2 위계 유지 + 가독성 우선 ─────────── */
@media (max-width:760px){
  .topics-home-v3 .shell{
    width:calc(100% - 16px)!important;
    padding-bottom:24px!important;
  }
  .topics-home-v3 .topbar{
    gap:7px!important;
    padding:10px 2px 9px!important;
  }
  .topics-home-v3 .brand-mark{font-size:22px!important}
  .topics-home-v3 .brand-sub{font-size:9px!important}
  .topics-home-v3 .topbar-actions{
    gap:4px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
  }
  .topics-home-v3 .topbar-actions::-webkit-scrollbar{display:none!important}
  .topics-home-v3 .topbar-actions .chip{
    padding:6px 9px!important;
    font-size:9px!important;
  }

  .topics-home-v3 .th-hero-v15{
    display:block!important;
    min-height:300px!important;
    margin-bottom:12px!important;
    border-radius:17px!important;
    background-position:center!important;
  }
  .topics-home-v3 .th-hero-v15::before{
    background:
      linear-gradient(90deg,rgba(255,250,243,.82) 0%,rgba(255,250,243,.73) 55%,rgba(255,246,241,.20) 78%,rgba(255,244,240,0) 100%)!important;
  }
  .topics-home-v3 .th-hero-v15-copy{
    width:68%!important;
    padding:18px 5px 16px 15px!important;
  }
  .topics-home-v3 .th-hero-v15-kicker{
    gap:5px!important;
    margin-bottom:8px!important;
    padding:5px 8px 5px 5px!important;
    font-size:8px!important;
  }
  .topics-home-v3 .th-hero-v15-kicker span{
    width:18px!important;height:18px!important;font-size:10px!important;
  }
  .topics-home-v3 .th-hero-v15 h1{
    font-size:39px!important;
  }
  .topics-home-v3 .th-hero-v15-lead{
    margin:11px 0 5px!important;
    font-size:10px!important;
    line-height:1.5!important;
  }
  .topics-home-v3 .th-hero-v15-sub{
    font-size:7.5px!important;
    line-height:1.45!important;
  }
  .topics-home-v3 .th-hero-v15-cta{
    gap:12px!important;
    margin-top:10px!important;
    padding:8px 11px!important;
    font-size:8.5px!important;
  }
  .topics-home-v3 .th-hero-v15-cta span{font-size:14px!important}
  .topics-home-v3 .th-hero-v15-art{
    position:absolute!important;
    right:-6px!important;
    bottom:0!important;
    width:44%!important;
    height:205px!important;
  }
  .topics-home-v3 .th-hero-v15-mobile-mascot{
    right:-10px!important;
    bottom:-1px!important;
    width:108%!important;
    max-height:205px!important;
    filter:drop-shadow(0 8px 14px rgba(173,89,126,.10))!important;
  }
  .topics-home-v3 .th-hero-v15-handnote{display:none!important}

  .topics-home-v3 .topic-index-v3.topics-picture2-layout{
    display:grid!important;
    grid-template-columns:1fr!important;
    gap:10px!important;
  }
  .topics-home-v3 .topics-picture2-right{
    display:grid!important;
    grid-template-rows:auto auto!important;
    gap:10px!important;
  }
  .topics-home-v3 .topic-index-v3 .board{
    border-radius:16px!important;
  }
  .topics-home-v3 .topic-index-v3 .board-head{
    padding:14px 13px 6px!important;
  }
  .topics-home-v3 .topic-index-v3 .board-head h2{
    font-size:18px!important;
  }
  .topics-home-v3 .topic-index-v3 .board-head .note{
    font-size:8px!important;
  }

  .topics-home-v3 .topic-catalog-feature{
    min-height:0!important;
  }
  .topics-home-v3 .topic-catalog-feature .board-head{
    padding:15px 13px 3px!important;
  }
  .topics-home-v3 .topic-catalog-feature .board-head h2::before{
    margin-right:6px!important;
    font-size:20px!important;
  }
  .topics-home-v3 .topic-catalog-intro{
    width:70%!important;
    padding:3px 13px 9px!important;
    font-size:9px!important;
  }
  .topics-home-v3 .topic-catalog-art-wrap{
    top:5px!important;
    right:3px!important;
    width:126px!important;
    height:76px!important;
    border-radius:12px!important;
  }
  .topics-home-v3 .topic-card-art-catalog{
    width:154px!important;
    height:auto!important;
  }
  .topics-home-v3 .topic-catalog-feature .board-list{
    gap:6px!important;
    max-height:248px!important;
    padding:3px 7px 9px!important;
  }
  .topics-home-v3 .topic-catalog-feature .board-row{
    grid-template-columns:38px minmax(0,1fr) auto!important;
    gap:2px 7px!important;
    min-height:58px!important;
    padding:7px!important;
  }
  .topics-home-v3 .catalog-icon{
    width:33px!important;height:33px!important;font-size:16px!important;
  }
  .topics-home-v3 .topic-catalog-feature .row-title{
    font-size:13px!important;
  }
  .topics-home-v3 .topic-catalog-feature .row-body{
    font-size:8px!important;
    line-height:1.35!important;
    max-height:2.7em!important;
  }
  .topics-home-v3 .topic-catalog-feature .row-meta{
    font-size:8px!important;
  }
  .topics-home-v3 .topic-catalog-feature .row-meta span{
    margin-left:3px!important;font-size:12px!important;
  }

  .topics-home-v3 .pick-top{
    min-height:170px!important;
  }
  .topics-home-v3 .pick-top .board-head{
    padding:14px 11px 4px!important;
  }
  .topics-home-v3 .pick-top .board-head h2::before{
    margin-right:5px!important;font-size:19px!important;
  }
  .topics-home-v3 .pick-top .board-head h2::after{
    margin:3px 0 0 28px!important;
    font-size:8px!important;
  }
  .topics-home-v3 .pick-top .side-box{
    width:64%!important;
    padding:4px 0 10px 10px!important;
  }
  .topics-home-v3 .pick-top .row-body{
    max-height:80px!important;
    padding:10px 8px 9px 30px!important;
    border-radius:20px!important;
    font-size:9px!important;
  }
  .topics-home-v3 .pick-top .row-body::before{
    left:10px!important;top:1px!important;font-size:30px!important;
  }
  .topics-home-v3 .pick-top .row-body a{
    font-size:9px!important;
  }
  .topics-home-v3 .topic-card-art-pick{
    width:40%!important;
    max-width:160px!important;
  }

  .topics-home-v3 .member-proposals{
    min-height:195px!important;
  }
  .topics-home-v3 .member-proposals .board-head{
    padding:13px 11px 3px!important;
  }
  .topics-home-v3 .member-proposals .board-head h2::before{
    margin-right:5px!important;font-size:18px!important;
  }
  .topics-home-v3 .member-proposals .board-head h2::after{
    margin:3px 0 0 27px!important;
    font-size:7.5px!important;
    line-height:1.35!important;
  }
  .topics-home-v3 .member-proposals .side-box{
    width:67%!important;
    padding:5px 0 9px 9px!important;
  }
  .topics-home-v3 .member-proposals .row-body{
    max-height:92px!important;
    padding:7px 8px!important;
    border-radius:10px!important;
  }
  .topics-home-v3 .member-proposals .row-body a{
    margin-bottom:3px!important;
    font-size:9px!important;
  }
  .topics-home-v3 .topic-card-art-member{
    width:32%!important;
    max-width:125px!important;
    right:-2px!important;
    bottom:-4px!important;
  }
}

@media (max-width:420px){
  .topics-home-v3 .th-hero-v15-copy{width:70%!important}
  .topics-home-v3 .th-hero-v15 h1{font-size:36px!important}
  .topics-home-v3 .topic-catalog-intro{width:66%!important}
}


/* v21: 회원 제안 챔순이 폭을 그림2처럼 복원.
   원본 왼쪽의 옛 잘린 글자는 clip-path로 완전히 숨긴다. */
.topics-home-v3 .topic-card-art-member{
  right:-4px!important;
  bottom:-8px!important;
  width:43%!important;
  max-width:218px!important;
  clip-path:inset(0 0 0 18%)!important;
  object-fit:cover!important;
  object-position:right bottom!important;
}
@media (max-width:760px){
  .topics-home-v3 .topic-card-art-member{
    right:-7px!important;
    bottom:-5px!important;
    width:43%!important;
    max-width:165px!important;
    clip-path:inset(0 0 0 18%)!important;
  }
}


/* ══ v22 exact-picture2 alignment ═══════════════════════════════════════
   Desktop hero right half uses the approved v13 hero itself, cropped to
   the right half. This preserves the exact winking Champsoon, review card,
   handwritten line and books from the user's reference image.
   Left copy remains live HTML for sharp typography.
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width:761px){
  .topics-home-v3 .topbar{
    padding-left:48px!important;
    padding-right:48px!important;
    padding-top:11px!important;
    padding-bottom:10px!important;
  }

  .topics-home-v3 .th-hero-v15{
    min-height:382px!important;
    margin-bottom:25px!important;
    grid-template-columns:minmax(0,.52fr) minmax(0,.48fr)!important;
  }

  .topics-home-v3 .th-hero-v15-copy{
    padding:34px 0 29px 146px!important;
  }

  .topics-home-v3 .th-hero-v15 h1{
    font-size:clamp(66px,5.35vw,80px)!important;
  }

  .topics-home-v3 .th-hero-v15-lead{
    margin-top:22px!important;
  }

  .topics-home-v3 .th-hero-v15-cta{
    min-width:285px!important;
    margin-left:285px!important;
    padding-left:25px!important;
    padding-right:20px!important;
    justify-content:space-between!important;
  }

  .topics-home-v3 .th-hero-v15-art{
    align-self:stretch!important;
    height:100%!important;
    margin-left:-26px!important;
    background:
      url("/assets/img/topics-home-hero-v13.webp?v=20261003-v22")
      right center / 200% 100% no-repeat!important;
  }

  /* The right-half crop already contains the exact character/card/note. */
  .topics-home-v3 .th-hero-v15-art .th-hero-v15-mobile-mascot,
  .topics-home-v3 .th-hero-v15-art .th-hero-v15-handnote{
    display:none!important;
  }

  .topics-home-v3 .topic-catalog-feature .board-head .note{
    display:none!important;
  }

  .topics-home-v3 .topics-picture2-right{
    grid-template-rows:minmax(230px,.92fr) minmax(270px,1.08fr)!important;
  }

  .topics-home-v3 .pick-top{
    min-height:230px!important;
  }

  .topics-home-v3 .topic-card-art-member{
    width:47%!important;
    max-width:235px!important;
    right:-4px!important;
    bottom:-7px!important;
    clip-path:inset(0 0 0 35%)!important;
  }
}

/* Keep the mobile hero clean and readable; do not use the desktop raster crop. */
@media (max-width:760px){
  .topics-home-v3 .th-hero-v15-art{
    background:none!important;
  }
  .topics-home-v3 .th-hero-v15-art .th-hero-v15-mobile-mascot{
    display:block!important;
  }
  .topics-home-v3 .topic-card-art-member{
    clip-path:inset(0 0 0 34%)!important;
  }
}


/* ══ v23 picture2 visual polish ════════════════════════════════════════
   Final visual differences observed at the same 1491x1055 target viewport:
   1) feather the desktop hero center seam,
   2) rebuild the catalog handwritten decoration as live text,
   3) make member art a bottom-right vignette instead of a vertical strip.
   ═══════════════════════════════════════════════════════════════════════ */

@media (min-width:761px){
  .topics-home-v3 .th-hero-v15{
    min-height:398px!important;
  }

  .topics-home-v3 .th-hero-v15-art{
    margin-left:-52px!important;
    -webkit-mask-image:linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,.20) 5%,
      rgba(0,0,0,.72) 14%,
      #000 24%,
      #000 100%
    )!important;
    mask-image:linear-gradient(
      to right,
      transparent 0%,
      rgba(0,0,0,.20) 5%,
      rgba(0,0,0,.72) 14%,
      #000 24%,
      #000 100%
    )!important;
  }

  .topics-home-v3 .th-hero-v15-cta{
    margin-top:26px!important;
  }

  .topics-home-v3 .topic-catalog-art-wrap{
    top:12px!important;
    right:14px!important;
    width:315px!important;
    height:126px!important;
    overflow:visible!important;
    border-radius:0!important;
  }

  /* Use the source image only for the reading Champsoon; write the reference
     hand-note as crisp live text so no screenshot fragment can be visible. */
  .topics-home-v3 .topic-catalog-art-wrap::before{
    content:"세상을 더 넓고 깊게,\A책으로 만나는 즐거움 ♡"!important;
    position:absolute!important;
    z-index:5!important;
    left:3px!important;
    top:27px!important;
    white-space:pre!important;
    color:#b15d79!important;
    font-family:var(--font-serif)!important;
    font-size:13px!important;
    font-weight:700!important;
    line-height:1.45!important;
    text-align:center!important;
    transform:rotate(-4deg)!important;
    text-shadow:0 1px 0 rgba(255,255,255,.75)!important;
  }
  .topics-home-v3 .topic-catalog-art-wrap::after{
    content:"♪"!important;
    position:absolute!important;
    z-index:5!important;
    left:137px!important;
    top:64px!important;
    color:#e16aa0!important;
    font-size:20px!important;
    transform:rotate(9deg)!important;
  }
  .topics-home-v3 .topic-card-art-catalog{
    top:0!important;
    right:0!important;
    width:188px!important;
    height:122px!important;
    max-width:none!important;
    object-fit:cover!important;
    object-position:right center!important;
    clip-path:inset(0 0 0 34%)!important;
    border-radius:0 17px 0 0!important;
  }

  .topics-home-v3 .topic-catalog-intro{
    width:58%!important;
  }

  .topics-home-v3 .member-proposals .side-box{
    width:64%!important;
  }
  .topics-home-v3 .topic-card-art-member{
    right:-2px!important;
    bottom:-7px!important;
    width:255px!important;
    max-width:255px!important;
    height:215px!important;
    object-fit:cover!important;
    object-position:right bottom!important;
    clip-path:inset(0 0 0 27%)!important;
  }
}

@media (max-width:760px){
  .topics-home-v3 .topic-catalog-art-wrap::before,
  .topics-home-v3 .topic-catalog-art-wrap::after{
    display:none!important;
    content:none!important;
  }
  .topics-home-v3 .topic-card-art-catalog{
    clip-path:none!important;
  }
  .topics-home-v3 .topic-card-art-member{
    width:152px!important;
    max-width:152px!important;
    height:155px!important;
    object-fit:cover!important;
    object-position:right bottom!important;
    clip-path:inset(0 0 0 28%)!important;
  }
}