/*
 * 주제별 탑3 메인 — 「탑3 책 질문」·「탑3 책 제안」 두 장 (v0.86, 2026-10-04 Claude)
 *
 *   아래 두 칸: 왼쪽 위 탑3 책 질문(Q) · 왼쪽 아래 탑3 책 제안(A) | 오른쪽 분야별 주제
 *   목록은 한 줄에 하나씩 흰 둥근 줄 + 분홍 ›, 5줄이 보이는 스크롤 (2026-10-02 ChatGPT 시안의 줄 모양을 되살림)
 *   챔순이 그림은 이름이 정해진 자리다 — ask-mascot-question.webp / ask-mascot-proposal.webp 를 같은 이름으로 바꿔 끼운다
 *
 * 새 이름표(ask-*, lower-v36)만 쓴다. 예전 picture2 층(member-proposals, topics-picture2-right)과 겹치지 않는다.
 * 이 파일은 topics/parts.php에서 맨 마지막에 읽힌다.
 */

/* ── 아래 두 칸 배치 ───────────────────────────── */
.topics-home-v3 .topic-index-v3.topics-picture2-layout.lower-v36{
  display:grid!important;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
  gap:18px!important;
  align-items:start!important;
}
.topics-home-v3 .lower-v36 .ask-col-v36{
  display:flex;flex-direction:column;gap:18px;min-width:0;
}

/* ── 카드 ─────────────────────────────────────── */
.topics-home-v3 .ask-card{
  --ask-accent:#e35d8b;
  --ask-accent-deep:#c2406e;
  --ask-track:#fae3e8;
  --ask-line:rgba(236,205,214,.9);
  position:relative;
  overflow:hidden;
  min-height:330px;
  padding:22px 24px 20px;
  border:1px solid #f1d9df;
  border-radius:24px;
  background:
    radial-gradient(circle at 12% 0%,rgba(255,255,255,.85),transparent 32%),
    linear-gradient(150deg,#fffaf3 0%,#fff2f4 60%,#ffeef2 100%);
  box-shadow:0 10px 26px rgba(164,104,124,.08);
}
.topics-home-v3 .ask-card.ask-proposal{
  --ask-accent:#3f9c78;
  --ask-accent-deep:#2c7a5c;
  --ask-track:#dff1e8;
  --ask-line:rgba(190,224,206,.95);
  border-color:#d6ebdf;
  background:
    radial-gradient(circle at 12% 0%,rgba(255,255,255,.85),transparent 32%),
    linear-gradient(150deg,#fbfdf6 0%,#eff8f1 60%,#e9f5ee 100%);
  box-shadow:0 10px 26px rgba(80,140,110,.08);
}

/* 머리: Q/A 동그라미 · 제목 · [ ] 설명 · 주제 수 */
.topics-home-v3 .ask-card-head{
  position:relative;z-index:3;
  display:flex;align-items:flex-start;gap:12px;
  margin:0 0 14px;
}
.topics-home-v3 .ask-badge{
  flex:0 0 auto;
  display:inline-grid;place-items:center;
  width:44px;height:44px;border-radius:50%;
  background:linear-gradient(145deg,#ff9cbd,var(--ask-accent));
  color:#fff;font-family:var(--font-serif);font-size:24px;font-weight:700;line-height:1;
  box-shadow:0 6px 14px rgba(227,93,139,.28), inset 0 -3px 0 rgba(0,0,0,.08);
}
.topics-home-v3 .ask-proposal .ask-badge{
  background:linear-gradient(145deg,#8fd6b5,var(--ask-accent));
  box-shadow:0 6px 14px rgba(63,156,120,.28), inset 0 -3px 0 rgba(0,0,0,.08);
}
.topics-home-v3 .ask-card-titles{flex:1 1 auto;min-width:0}
.topics-home-v3 .ask-card-titles h2{
  margin:0;
  font-family:var(--font-serif);font-size:25px;font-weight:700;line-height:1.25;
  color:#2b2429;letter-spacing:-.01em;
}
.topics-home-v3 .ask-card-titles p{
  margin:4px 0 0;
  font-family:var(--font-sans);font-size:13px;font-weight:500;line-height:1.45;
  color:#7b6a70;word-break:keep-all;
}
.topics-home-v3 .ask-proposal .ask-card-titles p{color:#5f7569}
.topics-home-v3 .ask-count{
  flex:0 0 auto;margin-top:6px;
  font-family:var(--font-sans);font-size:12.5px;font-weight:700;color:var(--ask-accent-deep);
  white-space:nowrap;
}

/* 몸통: 목록(왼쪽) + 챔순이(오른쪽 아래) */
.topics-home-v3 .ask-card-body{
  position:relative;z-index:3;
  width:64%;
}
.topics-home-v3 .ask-card .row-preview.ask-list-v36{
  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 .ask-card .ask-list-v36 .row-body{
  /* 줄 하나 = 44px + 사이 7px → 5줄이 보인다 */
  max-height:248px;
  overflow-y:auto;
  white-space:normal;
  font-size:14px;line-height:1.35;
  padding:1px 0;
}
.topics-home-v3 .ask-card .ask-list-v36 .row-body a{
  display:flex;align-items:center;gap:8px;
  min-height:44px;
  margin:0 0 7px;
  padding:7px 12px 7px 16px;
  border:1px solid var(--ask-line);
  border-radius:15px;
  background:rgba(255,255,255,.9);
  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 .ask-card .ask-list-v36 .row-body a:last-child{margin-bottom:0}
.topics-home-v3 .ask-card .ask-list-v36 .row-body a:hover,
.topics-home-v3 .ask-card .ask-list-v36 .row-body a:focus-visible{
  background:#fff;border-color:var(--ask-accent);color:#1f1a1e;text-decoration:none;transform:translateX(2px);
}
.topics-home-v3 .ask-card .ask-name{flex:1 1 auto;min-width:0}
.topics-home-v3 .ask-card .ask-list-v36 .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 .ask-card .ask-go{
  flex:0 0 auto;color:var(--ask-accent);font-size:22px;font-weight:400;line-height:1;
}
.topics-home-v3 .ask-card .ask-list-v36 .row-track{
  border-radius:5px;background:var(--ask-track);
}
.topics-home-v3 .ask-card .ask-list-v36 .row-thumb{
  border-radius:5px;background:var(--ask-accent);
}
.topics-home-v3 .ask-card .ask-list-v36 .row-track:hover .row-thumb,
.topics-home-v3 .ask-card .ask-list-v36 .row-thumb:active{background:var(--ask-accent-deep)}

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

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

/* 챔순이 — 오른쪽 아래. 목록 칸(64%) 옆 빈자리에 앉는다 */
.topics-home-v3 .ask-card .ask-mascot{
  position:absolute;z-index:2;
  right:6px;bottom:4px;
  width:34%;max-width:230px;height:auto;
  pointer-events:none;
}

/* ── 태블릿·휴대폰 ─────────────────────────────── */
@media (max-width:999px){
  .topics-home-v3 .ask-card{padding:20px 18px 18px}
  .topics-home-v3 .ask-card-titles h2{font-size:22px}
}
@media (max-width:760px){
  .topics-home-v3 .topic-index-v3.topics-picture2-layout.lower-v36{
    grid-template-columns:minmax(0,1fr)!important;gap:14px!important;
  }
  .topics-home-v3 .lower-v36 .ask-col-v36{gap:14px}
  .topics-home-v3 .ask-card{min-height:0;border-radius:20px}
  .topics-home-v3 .ask-card-body{width:68%}
  .topics-home-v3 .ask-card .ask-mascot{width:32%;right:2px}
  .topics-home-v3 .ask-card .ask-list-v36 .row-body{max-height:228px}
  .topics-home-v3 .ask-card .ask-list-v36 .row-body a{min-height:40px;font-size:13.5px;padding:6px 10px 6px 13px}
}
@media (max-width:420px){
  .topics-home-v3 .ask-card{padding:18px 14px 16px}
  .topics-home-v3 .ask-card-head{gap:10px}
  .topics-home-v3 .ask-badge{width:36px;height:36px;font-size:20px}
  .topics-home-v3 .ask-card-titles h2{font-size:20px}
  .topics-home-v3 .ask-card-titles p{font-size:12px}
  .topics-home-v3 .ask-count{font-size:11.5px;margin-top:4px}
  .topics-home-v3 .ask-card-body{width:70%}
  .topics-home-v3 .ask-card .ask-mascot{width:31%}
  .topics-home-v3 .ask-card .ask-list-v36 .row-body a{font-size:13px}
  .topics-home-v3 .ask-card .ask-write{font-size:13px;padding:9px 16px}
}

/* 질문·제안 쓰는 화면 제목 뒤의 [ ] 설명 (topics/create.php · topics/propose.php) */
.side-sub{display:inline-block;margin-left:4px;font-size:.55em;font-weight:500;color:#7b6a70;letter-spacing:0;vertical-align:middle}
.propose-book-head{margin:22px 0 10px;font-size:18px}
.propose-book-head small{font-size:.75em;font-weight:500;color:#7b6a70}

/* ── 오른쪽 분야별 주제: 왼쪽 두 장 높이에 맞춰 늘린다 (v0.86) ── */
@media (min-width:761px){
  .topics-home-v3 .topic-index-v3.topics-picture2-layout.lower-v36{align-items:stretch!important}
  .topics-home-v3 .lower-v36 .topic-catalog-feature{
    display:flex!important;flex-direction:column!important;min-height:0!important;
  }
  .topics-home-v3 .lower-v36 .topic-catalog-feature .board-list{
    flex:1 1 0!important;min-height:0!important;max-height:none!important;
    contain:size;overflow-y:auto!important;
  }
}
/* 분야별 주제 그림: 그림 속 손글씨(흐린 옛 글씨 + 「…나보세요.」 조각)가 그 위 글자 손글씨와 겹치던 것.
   그림은 챔순이 쪽만 보이게 왼쪽을 부드럽게 지우고, 손글씨는 또렷한 글자(ChatGPT v23의 ::before)만 남긴다 */
.topics-home-v3 .lower-v36 .topic-card-art-catalog{
  clip-path:none!important;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,transparent 56%,#000 64%,#000 100%)!important;
  mask-image:linear-gradient(90deg,transparent 0,transparent 56%,#000 64%,#000 100%)!important;
}
/* 카드가 좁아지면(1199px 이하) 글자 손글씨가 「분야별 주제」 제목에 겹친다 — 그때는 손글씨를 빼고 챔순이만 */
@media (max-width:1199px){
  .topics-home-v3 .lower-v36 .topic-catalog-art-wrap::before,
  .topics-home-v3 .lower-v36 .topic-catalog-art-wrap::after{content:none!important;display:none!important}
}

/* 질문 칸 챔순이(말풍선 「여러분의 생각도 궁금해요!」 포함)는 가로가 넓어 조금 크게 */
.topics-home-v3 .ask-question .ask-mascot{width:36%;max-width:250px;right:4px;bottom:2px}