/*
 * 주제별 탑3 메인 — 「탑3 책 질문 · 탑3 책 제안」 큰 칸 하나 (v0.87, 2026-10-04 Claude)
 *
 *   이상준님: 「탑3 책 질문 · 탑3 책 제안」을 큰 제목으로, 그 제목 영역에 챔순이 한 장.
 *             질문 스크롤과 제안 스크롤은 그 아래 서브 영역으로.
 *
 *   ┌ 큰 제목 ─────────────────── 챔순이(말풍선) ┐
 *   │ Q 탑3 책 질문 [ … ]           주제 N개      │  ← 분홍 서브 칸, 5줄 스크롤
 *   │ A 탑3 책 제안 [ … ]           주제 N개      │  ← 민트 서브 칸, 5줄 스크롤
 *   └─────────────────────────────────────────────┘
 *
 *   챔순이는 assets/img/ask-mascot.webp 한 장 (ChatGPT 그림이 오면 같은 이름으로 바꿔 끼우고 ?v= 올림)
 *   새 이름표 askx-* 만 쓴다. 배치(.lower-v36 두 칸)와 분야별 주제 늘리기는 flos-topics-ask-v36.css 그대로.
 */

.topics-home-v3 .askx{
  position:relative;
  min-width:0;
  padding:0 0 20px;
  border:1px solid #f1d9df;
  border-radius:24px;
  overflow:hidden;
  background:
    radial-gradient(circle at 10% 0%,rgba(255,255,255,.9),transparent 34%),
    linear-gradient(160deg,#fffaf4 0%,#fff3f2 55%,#f6f8f0 100%);
  box-shadow:0 10px 26px rgba(164,104,124,.08);
}

/* ── 큰 제목 + 챔순이 ─────────────────────────── */
.topics-home-v3 .askx-head{
  position:relative;
  display:flex;align-items:flex-end;justify-content:space-between;gap:12px;
  min-height:150px;
  padding:22px 18px 0 26px;
}
.topics-home-v3 .askx-head h2{
  flex:1 1 auto;min-width:0;align-self:center;
  margin:0;
  font-family:var(--font-serif);font-size:30px;font-weight:700;line-height:1.3;
  color:#2b2429;letter-spacing:-.01em;word-break:keep-all;
}
.topics-home-v3 .askx-dot{color:#e35d8b;margin:0 .1em}
/* 「탑3 책 질문 ·」「탑3 책 제안」이 낱말 중간에서 끊기지 않게 */
.topics-home-v3 .askx-t{white-space:nowrap}
.topics-home-v3 .askx-mascot{
  flex:0 0 auto;
  display:block;
  width:220px;height:auto;
  margin-bottom:-4px;
  pointer-events:none;
}

/* ── 서브 칸: Q 질문 · A 제안 ─────────────────── */
.topics-home-v3 .askx-subs{
  position:relative;z-index:1;
  display:flex;flex-direction:column;gap:14px;
  padding:0 18px;
}
.topics-home-v3 .askx-sub{
  --ask-accent:#e35d8b;
  --ask-accent-deep:#c2406e;
  --ask-track:#fae3e8;
  --ask-line:rgba(236,205,214,.9);
  padding:16px 16px 16px;
  border:1px solid #f3d6de;
  border-radius:18px;
  background:linear-gradient(150deg,rgba(255,240,244,.95),rgba(255,247,249,.9));
}
.topics-home-v3 .askx-proposal{
  --ask-accent:#3f9c78;
  --ask-accent-deep:#2c7a5c;
  --ask-track:#dff1e8;
  --ask-line:rgba(190,224,206,.95);
  border-color:#d3eadc;
  background:linear-gradient(150deg,rgba(236,247,240,.95),rgba(246,251,247,.9));
}
.topics-home-v3 .askx-sub-head{
  display:flex;align-items:flex-start;gap:10px;
  margin:0 0 12px;
}
.topics-home-v3 .askx-badge{
  flex:0 0 auto;
  display:inline-grid;place-items:center;
  width:36px;height:36px;border-radius:50%;
  background:linear-gradient(145deg,#ff9cbd,var(--ask-accent));
  color:#fff;font-family:var(--font-serif);font-size:20px;font-weight:700;line-height:1;
  box-shadow:0 5px 12px rgba(227,93,139,.25), inset 0 -3px 0 rgba(0,0,0,.08);
}
.topics-home-v3 .askx-proposal .askx-badge{
  background:linear-gradient(145deg,#8fd6b5,var(--ask-accent));
  box-shadow:0 5px 12px rgba(63,156,120,.25), inset 0 -3px 0 rgba(0,0,0,.08);
}
.topics-home-v3 .askx-sub-titles{flex:1 1 auto;min-width:0}
.topics-home-v3 .askx-sub-titles h3{
  margin:0;
  font-family:var(--font-serif);font-size:20px;font-weight:700;line-height:1.3;color:#2b2429;
}
.topics-home-v3 .askx-sub-titles p{
  margin:2px 0 0;
  font-family:var(--font-sans);font-size:12.5px;font-weight:500;line-height:1.45;
  color:#7b6a70;word-break:keep-all;
}
.topics-home-v3 .askx-proposal .askx-sub-titles p{color:#5f7569}
.topics-home-v3 .askx-count{
  flex:0 0 auto;margin-top:4px;
  font-family:var(--font-sans);font-size:12.5px;font-weight:700;color:var(--ask-accent-deep);
  white-space:nowrap;
}

/* 목록: 흰 둥근 줄 + › , 5줄이 보이는 스크롤 */
.topics-home-v3 .askx .row-preview.askx-list{
  display:grid;grid-template-columns:minmax(0,1fr) 8px;gap:8px;
  margin:0;padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;
}
.topics-home-v3 .askx .askx-list .row-body{
  /* 줄 하나 = 42px + 사이 7px → 5줄 */
  max-height:238px;
  overflow-y:auto;
  white-space:normal;
  font-size:14px;line-height:1.35;
  padding:1px 0;
}
.topics-home-v3 .askx .askx-list .row-body a{
  display:flex;align-items:center;gap:8px;
  min-height:42px;
  margin:0 0 7px;
  padding:7px 12px 7px 16px;
  border:1px solid var(--ask-line);
  border-radius:14px;
  background:rgba(255,255,255,.92);
  color:#332b31;font-family:var(--font-sans);font-size:14px;font-weight:600;
  text-decoration:none;word-break:keep-all;overflow-wrap:anywhere;
  box-shadow:0 2px 8px rgba(150,100,120,.04);
  transition:background .15s, border-color .15s, transform .15s;
}
.topics-home-v3 .askx .askx-list .row-body a:last-child{margin-bottom:0}
.topics-home-v3 .askx .askx-list .row-body a:hover,
.topics-home-v3 .askx .askx-list .row-body a:focus-visible{
  background:#fff;border-color:var(--ask-accent);color:#1f1a1e;text-decoration:none;transform:translateX(2px);
}
.topics-home-v3 .askx .askx-name{flex:1 1 auto;min-width:0}
.topics-home-v3 .askx .askx-list .row-body a small{
  flex:0 0 auto;margin:0;padding:1px 7px;border-radius:999px;
  background:var(--ask-track);color:var(--ask-accent-deep);font-size:11.5px;font-weight:700;
}
.topics-home-v3 .askx .askx-go{flex:0 0 auto;color:var(--ask-accent);font-size:22px;font-weight:400;line-height:1}
.topics-home-v3 .askx .askx-list .row-track{border-radius:5px;background:var(--ask-track)}
.topics-home-v3 .askx .askx-list .row-thumb{border-radius:5px;background:var(--ask-accent)}
.topics-home-v3 .askx .askx-list .row-track:hover .row-thumb,
.topics-home-v3 .askx .askx-list .row-thumb:active{background:var(--ask-accent-deep)}

.topics-home-v3 .askx .askx-empty{
  margin:0;padding:14px 16px;border:1px dashed var(--ask-line);border-radius:14px;
  background:rgba(255,255,255,.75);color:#7b6a70;font-size:14px;
}

.topics-home-v3 .askx .askx-write{
  display:inline-flex;align-items:center;gap:8px;
  margin-top:12px;padding:9px 18px;border-radius:999px;
  background:var(--ask-accent);color:#fff;
  font-family:var(--font-sans);font-size:13.5px;font-weight:700;text-decoration:none;
  box-shadow:0 6px 14px rgba(0,0,0,.08);
  transition:background .15s, transform .15s;
}
.topics-home-v3 .askx .askx-write:hover,
.topics-home-v3 .askx .askx-write:focus-visible{background:var(--ask-accent-deep);color:#fff;transform:translateY(-1px);text-decoration:none}

/* ── 태블릿·휴대폰 ─────────────────────────────── */
@media (max-width:999px){
  .topics-home-v3 .askx-head{min-height:128px;padding:18px 12px 0 20px}
  .topics-home-v3 .askx-head h2{font-size:25px}
  .topics-home-v3 .askx-mascot{width:180px}
  .topics-home-v3 .askx-subs{padding:0 14px}
}
@media (max-width:760px){
  .topics-home-v3 .askx{border-radius:20px;padding-bottom:16px}
}
@media (max-width:420px){
  .topics-home-v3 .askx-head{min-height:104px;padding:14px 8px 0 16px;gap:6px}
  .topics-home-v3 .askx-head h2{font-size:21px}
  .topics-home-v3 .askx-mascot{width:142px}
  .topics-home-v3 .askx-subs{padding:0 10px;gap:12px}
  .topics-home-v3 .askx-sub{padding:14px 12px}
  .topics-home-v3 .askx-badge{width:32px;height:32px;font-size:18px}
  .topics-home-v3 .askx-sub-titles h3{font-size:18px}
  .topics-home-v3 .askx-sub-titles p{font-size:12px}
  .topics-home-v3 .askx .askx-list .row-body{max-height:218px}
  .topics-home-v3 .askx .askx-list .row-body a{min-height:38px;font-size:13px;padding:6px 10px 6px 13px}
  .topics-home-v3 .askx .askx-write{font-size:13px;padding:8px 15px}
}