@import url("/assets/css/flos-topics-view-v41.css?v=20261007-v41");
@import url("/assets/css/flos-topics-view-v42.css?v=20261007-v42");
@import url("/assets/css/flos-topics-view-v43.css?v=20261008-v43");
@import url("/assets/css/flos-topics-view-v44.css?v=20261008-v44");
@import url("/assets/css/flos-topics-view-v45.css?v=20261008-v45");
@import url("/assets/css/flos-topics-view-v46.css?v=20261008-v46");
@import url("/assets/css/flos-topics-view-v47.css?v=20261008-v47");
@import url("/assets/css/flos-topics-view-v48.css?v=20261009-v48");
@import url("/assets/css/flos-topics-view-v49.css?v=20261009-v49");

/*
 * 주제 화면 머리 칸 챔순이 (v0.88, 2026-10-04 Claude)
 *
 *   이상준님이 준비해 두신 「엄지 척 + 책 안은 챔순이」로 바꾼다.
 *   예전 그림(champsoon-recommend.webp)은 카드에 「CPO +300」·별 다섯 개가 그려져 있었다.
 *   ChatGPT의 flos-topics-theme.css는 고치지 않고, 이 파일을 그 뒤에 읽혀 그림 자리만 덮는다.
 *   그림은 키가 큰 모양이라 머리 칸 높이에 맞춰(contain) 오른쪽 아래에 세운다.
 */
.topic-head:after{
  top:18px;bottom:-6px;right:48px;
  width:230px;height:auto;
  background:url("/assets/img/topic-view-mascot.webp?v=20261004-v1") right bottom/contain no-repeat;
  filter:drop-shadow(0 14px 20px rgba(187,87,129,.16));
  opacity:1;transform:none;
}
@media (max-width:980px){
  .topic-head:after{right:20px;width:200px}
}
@media (max-width:759px){
  .topic-head:after{top:16px;bottom:-4px;right:6px;width:112px;background-size:contain}
}
@media (max-width:420px){
  .topic-head:after{right:2px;width:96px;background-size:contain}
}

/*
 * 원탑 칸과 탑3 칸 나누기 (v0.88.1)
 *   예전엔 꼬리표 글자만 달랐다. 원탑은 보라 꼬리표·조금 큰 책 제목, 탑3는 지금 분홍 그대로.
 *   금색·트로피 같은 강조는 쓰지 않는다(「담담하게」).
 */
.rank-block.rank-one{box-shadow:0 14px 34px rgba(122,82,150,.10)}
.rank-block.rank-one .rank-bar{
  padding:16px 20px;
  background:linear-gradient(90deg,#f7effd 0%,#fff3f8 62%,#fff9f4 100%);
}
.rank-block.rank-one .rank-no{
  border-color:transparent;color:#fff;
  background:linear-gradient(135deg,#8a5aa6,#b26aa6);
  box-shadow:0 5px 14px rgba(122,82,150,.22);
}
.rank-block.rank-one .rank-book{font-size:clamp(20px,2.4vw,25px)}
.rank-block.rank-one .rank-more{color:#8a5aa6}
.rank-block.rank-top3 .rank-bar{background:linear-gradient(90deg,#fffafa 0%,#fff4f8 55%,#f3faf6 100%)}

/* 리뷰가 아직 없는 칸은 낮게 */
.rank-block .board-empty{margin:0;padding:14px 12px}

/* 휴대폰 글씨가 9~10px까지 작아지던 것을 읽을 만하게 */
@media (max-width:759px){
  .section-label .note{font-size:11px}
  .rank-no{font-size:11.5px;padding:2px 8px}
  .rank-book{font-size:16px}
  .rank-block.rank-one .rank-bar{padding:12px 11px}
  .rank-block.rank-one .rank-book{font-size:18px}
  .rank-book .writer{font-size:11.5px}
  .rank-more{font-size:11px}
  .board-head h2{font-size:13px}
  .board-head .more-link{font-size:10.5px}
  .rank-block .board-empty{font-size:12px;padding:12px 8px}
}

/*
 * 추천리뷰 쓰기·읽기, 질문·제안 올리기 상자 오른쪽 아래의 흐린 챔순이 (v0.88.2)
 *   예전 그림(카드에 CPO +300)을 새 챔순이(엄지 척)로 바꾼다. 자리·흐림 정도는 예전 그대로.
 *   이상준님: 「흐릿해서 오히려 괜찮은 것 같았는데」 → 「새 챔순이로 흐릿하게 원래 위치에 넣어」
 */
.paper-box:after{
  /* v0.88.3 이상준님: 「제목과 같은 높이의 칸 오른쪽」으로 — 상자 오른쪽 위, 흐림은 그대로 */
  top:14px;right:22px;bottom:auto;width:120px;height:168px;
  background:url("/assets/img/topic-view-mascot.webp?v=20261004-v1") right top/contain no-repeat;
}
@media (max-width:759px){
  .paper-box:after{top:10px;right:8px;width:64px;height:90px}
}

/*
 * 로그인해야 열리는 탑3 화면(쓰기·질문·제안 올리기)의 「회원 아이디 … (회원번호 #…)」 막대 (v0.88.4)
 *   ChatGPT의 MemberIdentityBanner(app/Support/Auth.php)가 <body> 바로 뒤에 넣는다.
 *   옛 화면용이라 탑3 화면에선 상단바 뒤에 반쯤 가려져 보였다. 탑3 화면에서만 감춘다(상단바에 「○○ 님」이 이미 있다).
 *   다른 화면과 ChatGPT 파일은 그대로.
 */
[data-member-default-identity]{display:none!important}

/* v1.30 (2026-10-25 이상준님) — Editor's Pick 부연 설명을 주제 화면 머리에 큰 글자로.
 * 보통 주제·특별이벤트·특별판·질문·제안 모두. 예전 「등수가 아니라 묶음입니다…」 자리 */
.topic-head p.topic-sum.topic-note-big{
  font-family:var(--font-sans,"Pretendard Variable",Pretendard,sans-serif)!important;
  font-size:clamp(16px,1.45vw,20px)!important;
  font-weight:600!important;
  line-height:1.6!important;
  color:#3a2f44!important;
  letter-spacing:-.015em;
  margin:2px 0 14px!important;
  white-space:pre-line;
}
@media (max-width:759px){
  .topic-head p.topic-sum.topic-note-big{font-size:15px!important;line-height:1.55!important;margin-bottom:11px!important}
}