/*
 * 주제별 탑3 메인 — 오른쪽 「분야별 주제」 칸 (v0.89, 2026-10-05 Claude)
 *
 *   이상준님: 「문학 분야 스크롤, 사회과학 분야 스크롤 이렇게 각각이 스크롤이 되어야 해.
 *             지금 있는 스크롤은 필요 없어. 각 스크롤 3줄로 해.」
 *   - 대주제마다 「중주제-소주제」를 한 줄에 하나씩 전부 넣고 3줄 스크롤 (예전엔 3개만 한 줄에 붙어 있었다)
 *   - 칸 전체를 감싸던 바깥 스크롤은 없앤다. 칸은 내용만큼 길어진다
 *   - 기능 없던 ⌄ 표시는 뺀다
 *   - 챔순이 = assets/img/catalog-mascot.webp — ChatGPT 그림(책 읽는 챔순이 + 손글씨 「세상을 더 넓고 깊게 책으로 만나는 즐거움♡」), v0.89.1
 *   새 이름표 catx-* 만 쓴다.
 */

/* 왼쪽 칸이 오른쪽 길이에 맞춰 늘어나지 않게 (v36의 stretch를 되돌림) */
.topics-home-v3 .topic-index-v3.topics-picture2-layout.lower-v36{align-items:start!important}

.topics-home-v3 .catx{
  position:relative;min-width:0;
  padding:0 0 18px;
  border:1px solid #f1dfe2;border-radius:24px;overflow:hidden;
  background:
    radial-gradient(circle at 92% 0%,rgba(255,255,255,.9),transparent 30%),
    linear-gradient(165deg,#fffaf3 0%,#fff6f4 50%,#fbf6ee 100%);
  box-shadow:0 10px 26px rgba(164,104,124,.08);
}

/* ── 머리: 큰 제목 + 손글씨 + 챔순이 ── */
.topics-home-v3 .catx-head{
  position:relative;min-height:168px;
  padding:24px 300px 14px 26px;
}
.topics-home-v3 .catx-titles h2{
  margin:0;display:flex;align-items:center;gap:10px;
  font-family:var(--font-serif);font-size:30px;font-weight:700;line-height:1.3;color:#2b2429;
}
.topics-home-v3 .catx-book{font-size:28px;line-height:1}
.topics-home-v3 .catx-titles p{
  margin:8px 0 0;
  font-family:var(--font-sans);font-size:13px;line-height:1.55;color:#7b6a70;word-break:keep-all;
}
/* 그림 속에 손글씨가 들어 있다 (v0.89.1) */
.topics-home-v3 .catx-hand{display:none}
.topics-home-v3 .catx-mascot{
  position:absolute;right:14px;bottom:2px;
  width:268px;height:auto;max-width:none;
  pointer-events:none;
}

/* ── 대주제 칸 ── */
.topics-home-v3 .catx-list{display:flex;flex-direction:column;gap:12px;padding:0 18px}
.topics-home-v3 .catx-major{
  display:grid;grid-template-columns:52px minmax(0,1fr);gap:14px;align-items:start;
  padding:14px 16px 14px 14px;
  border:1px solid #f0e2dc;border-radius:18px;
  background:rgba(255,255,255,.9);
  box-shadow:0 4px 12px rgba(150,100,110,.05);
}
.topics-home-v3 .catx-icon{
  display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:linear-gradient(145deg,#fdeee6,#f8e1e2);
  font-size:24px;line-height:1;
}
.topics-home-v3 .catx-main{min-width:0}
.topics-home-v3 .catx-major-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:2px 0 6px}
.topics-home-v3 .catx-name{
  font-family:var(--font-serif);font-size:19px;font-weight:700;color:#2b2429;text-decoration:none;
}
.topics-home-v3 .catx-name:hover,.topics-home-v3 .catx-name:focus-visible{color:#c2406e;text-decoration:none}
.topics-home-v3 .catx-count{
  flex:0 0 auto;
  font-family:var(--font-sans);font-size:12.5px;font-weight:700;color:#a3536f;white-space:nowrap;
}

/* 3줄 스크롤 (flos-board.js가 막대를 그린다) */
.topics-home-v3 .catx .row-preview.catx-scroll{
  display:grid;grid-template-columns:minmax(0,1fr) 7px;gap:8px;
  margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;
}
.topics-home-v3 .catx .catx-scroll .row-body{
  max-height:calc(1.7em * 3);
  overflow-y:auto;white-space:normal;
  font-family:var(--font-sans);font-size:14px;line-height:1.7;
  padding:0;
}
.topics-home-v3 .catx .catx-scroll .row-body a{
  display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:#5a4a52;text-decoration:none;
}
.topics-home-v3 .catx .catx-scroll .row-body a::before{content:"·";margin-right:6px;color:#d48aa2;font-weight:700}
.topics-home-v3 .catx .catx-scroll .row-body a:hover,
.topics-home-v3 .catx .catx-scroll .row-body a:focus-visible{color:#c2406e;text-decoration:underline}
.topics-home-v3 .catx .catx-scroll .row-track{border-radius:4px;background:#f6e3e8}
.topics-home-v3 .catx .catx-scroll .row-thumb{border-radius:4px;background:#e07a9c}

/* ── 태블릿·휴대폰 ── */
/* 칸이 좁아지면 그림을 제목 아래로 내려 오른쪽에 붙인다 */
@media (max-width:1199px){
  .topics-home-v3 .catx-head{padding:22px 20px 6px;min-height:0}
  .topics-home-v3 .catx-mascot{position:static;display:block;margin:6px 0 0 auto;width:min(290px,80%)}
}
@media (max-width:999px){
  .topics-home-v3 .catx-titles h2{font-size:25px}
  .topics-home-v3 .catx-list{padding:0 14px}
}
@media (max-width:760px){
  .topics-home-v3 .catx{border-radius:20px;padding-bottom:14px}
}
@media (max-width:420px){
  .topics-home-v3 .catx-head{padding:16px 16px 4px}
  .topics-home-v3 .catx-titles h2{font-size:21px;gap:7px}
  .topics-home-v3 .catx-book{font-size:22px}
  .topics-home-v3 .catx-titles p{font-size:12px}
  .topics-home-v3 .catx-mascot{width:min(250px,86%)}
  .topics-home-v3 .catx-list{padding:0 10px;gap:10px}
  .topics-home-v3 .catx-major{grid-template-columns:40px minmax(0,1fr);gap:10px;padding:12px 12px 12px 10px}
  .topics-home-v3 .catx-icon{width:40px;height:40px;font-size:19px}
  .topics-home-v3 .catx-name{font-size:17px}
  .topics-home-v3 .catx .catx-scroll .row-body{font-size:13.5px}
}