/*
 * FloS 첫 화면(챔순이) 감성 꾸밈 v1.38 — 2026-10-29 Claude
 * 이상준님: "메인이 밋밋하고 건조하고 단순하고 지루해 … 아기자기한 아이콘, 감성적인 분위기"
 *           "이런 식으로 색감을 역동적으로 해봐" (제미나이 시안: 게시물마다 다른 파스텔 색)
 * 그림은 제미나이가 그린 것(assets/img/home-*). 원본은 docs/backup/home_garden_assets_20261029/.
 * 이 파일은 champsoon 화면에서만 읽힌다(index.php $garden). 기능·글자는 바꾸지 않는다.
 * 리뷰가 주인공이라 그림은 작게, 배경은 옅게. 본문 스크롤(.row-body)은 그대로 둔다.
 */
.home-theme-champsoon{
  --g-pink:#e8578f;   --g-pink-l:#fff0f6;  --g-pink-b:#f6b3cb;
  --g-sky:#3f97d3;    --g-sky-l:#eef7ff;   --g-sky-b:#b3dbf4;
  --g-mint:#3aa57c;   --g-mint-l:#ecf9f2;  --g-mint-b:#a8e0c9;
  --g-butter:#c7900e; --g-butter-l:#fff8e2;--g-butter-b:#f6d77a;
  --g-lilac:#8462cf;  --g-lilac-l:#f4efff; --g-lilac-b:#cdb9f2;
}

/* ── 맨 위 큰 칸: 수채화 정원을 옅게 깐다 ─────────────── */
.home-theme-champsoon .garden-sky{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:url(/assets/img/home-hero-garden.webp?v=20261029-g1) center bottom/cover no-repeat;
  opacity:.5;
  -webkit-mask-image:linear-gradient(90deg,rgba(0,0,0,.55) 0%,#000 55%);
          mask-image:linear-gradient(90deg,rgba(0,0,0,.55) 0%,#000 55%);
}

/* ── 빠른 메뉴 01·02·03: 그림 아이콘 + 칸마다 다른 파스텔 ── */
.home-theme-champsoon .home-rail a{grid-template-columns:auto auto 1fr;align-items:center}
.home-theme-champsoon .rail-ico{
  grid-row:1/3;width:52px;height:52px;object-fit:contain;
  filter:drop-shadow(0 4px 6px rgba(120,80,120,.12));
  transition:transform .25s ease;
}
.home-theme-champsoon .home-rail a:hover .rail-ico{transform:translateY(-3px) rotate(-4deg)}
.home-theme-champsoon .home-rail a:nth-child(1){background:linear-gradient(135deg,#fff4f8,#fff)}
.home-theme-champsoon .home-rail a:nth-child(2){background:linear-gradient(135deg,#fffaea,#fff)}
.home-theme-champsoon .home-rail a:nth-child(3){background:linear-gradient(135deg,#f6f1ff,#fff)}
.home-theme-champsoon .home-rail a:nth-child(1) .rail-no{color:var(--g-pink)}
.home-theme-champsoon .home-rail a:nth-child(2) .rail-no{color:var(--g-butter)}
.home-theme-champsoon .home-rail a:nth-child(3) .rail-no{color:var(--g-lilac)}

/* ── 하루 뒤 한 마디 띠 · 글광고 칸: 머리에 작은 그림 ─────── */
.home-theme-champsoon .dayboard-title{
  padding-left:72px;
  background:url(/assets/img/home-icon-replay.png?v=20261029-g1) 16px center/46px no-repeat,
             linear-gradient(135deg,#eef7ff,#fff7fb);
}
.home-theme-champsoon .dayboard-kicker{color:var(--g-sky)}
.home-theme-champsoon .home-review-promo-head{
  background:url(/assets/img/home-icon-textad.png?v=20261029-g1) 14px center/42px no-repeat,
             linear-gradient(90deg,#fff2f8 0%,#fffdf4 55%,#eefaf3 100%);
}
.home-theme-champsoon .home-review-promo-title-wrap{padding-left:52px}

/* ── NEW · BEST 칸 ─────────────────────────────── */
.home-theme-champsoon .boards{position:relative}
.home-theme-champsoon .boards:before{
  /* 두 칸 바깥 양옆에 흩날리는 꽃잎 (가운데는 비어 있는 그림) */
  content:"";position:absolute;z-index:0;pointer-events:none;
  left:max(-150px,calc((100% - 100vw) / 2 + 10px));right:max(-150px,calc((100% - 100vw) / 2 + 10px));top:24px;height:340px;
  background:url(/assets/img/home-deco-petals.webp?v=20261029-g1) center top/100% auto no-repeat;
  opacity:.75;
}
.home-theme-champsoon .home-review-promo,.home-theme-champsoon .home-day-board{position:relative;z-index:2}
.home-theme-champsoon .board{position:relative;z-index:1;background:#fff;border-radius:22px}
.home-theme-champsoon .board-head{gap:10px;padding:14px 18px}
.home-theme-champsoon .board-head h2{margin-right:auto}
.home-theme-champsoon .board-badge{width:44px;height:44px;object-fit:contain;flex:0 0 auto;filter:drop-shadow(0 3px 5px rgba(120,80,120,.13))}
.home-theme-champsoon .board:first-child .board-head{background:linear-gradient(120deg,#fff0f6 0%,#fff 60%,#eefaf3 100%)}
.home-theme-champsoon .board:last-child .board-head{background:linear-gradient(120deg,#fff6db 0%,#fff 58%,#fff0f6 100%)}
.home-theme-champsoon .board:first-child .board-head h2{color:#d4467f}
.home-theme-champsoon .board:last-child .board-head h2{color:#b9820a}
.home-theme-champsoon .board:last-child .board-head h2:after{color:#d39a26}

/* 게시물마다 다섯 가지 파스텔이 차례로 돈다 */
.home-theme-champsoon .board-list{padding:10px 10px 12px}
.home-theme-champsoon .board-list li{
  --c:var(--g-pink);--cl:var(--g-pink-l);--cb:var(--g-pink-b);
  margin:0 0 9px;border:1px solid var(--cb);border-radius:16px;
  background:linear-gradient(135deg,var(--cl) 0%,#fff 88%);
  box-shadow:0 6px 16px color-mix(in srgb,var(--c) 10%,transparent);
  transition:transform .2s ease,box-shadow .2s ease;
}
.home-theme-champsoon .board-list li:last-child{margin-bottom:0;border-bottom:1px solid var(--cb)}
.home-theme-champsoon .board-list li:hover{transform:translateY(-2px);box-shadow:0 10px 22px color-mix(in srgb,var(--c) 18%,transparent)}
.home-theme-champsoon .board-list li:nth-child(5n+2){--c:var(--g-sky);--cl:var(--g-sky-l);--cb:var(--g-sky-b)}
.home-theme-champsoon .board-list li:nth-child(5n+3){--c:var(--g-mint);--cl:var(--g-mint-l);--cb:var(--g-mint-b)}
.home-theme-champsoon .board-list li:nth-child(5n+4){--c:var(--g-butter);--cl:var(--g-butter-l);--cb:var(--g-butter-b)}
.home-theme-champsoon .board-list li:nth-child(5n+5){--c:var(--g-lilac);--cl:var(--g-lilac-l);--cb:var(--g-lilac-b)}
.home-theme-champsoon .board-row,
.home-theme-champsoon .board-row:hover{background:transparent;padding:11px 13px 12px}
.home-theme-champsoon .row-title:hover{color:var(--c)}
.home-theme-champsoon .row-meta.time{
  padding:2px 9px;border-radius:999px;
  background:#fff;border:1px solid var(--cb);color:var(--c);font-weight:700;font-size:11px;
}
.home-theme-champsoon .row-meta.cp{
  padding:3px 10px;border-radius:999px;
  background:linear-gradient(135deg,#ffe48f,#f8c64a);color:#7a4f00;
  font-weight:800;font-size:11.5px;box-shadow:0 3px 8px rgba(214,152,20,.22);
}
.home-theme-champsoon .row-no{
  width:24px;height:24px;display:grid;place-items:center;border-radius:50%;
  background:var(--c);color:#fff;font-size:11px;
  box-shadow:0 3px 7px color-mix(in srgb,var(--c) 30%,transparent);
}
.home-theme-champsoon .board-row.ranked{grid-template-columns:24px 1fr auto}
.home-theme-champsoon .row-preview{
  background:rgba(255,255,255,.88);
  border:1px solid color-mix(in srgb,var(--cb) 70%,#fff);
  border-left:4px solid var(--c);
  border-radius:10px;
}
.home-theme-champsoon .row-track{background:color-mix(in srgb,var(--c) 14%,transparent)}
.home-theme-champsoon .row-thumb{background:var(--c)}
.home-theme-champsoon .period-switch a[aria-current="true"]{background:linear-gradient(135deg,#f3b52f,#e58fb2);color:#fff}

/* 비어 있을 때 — 책 읽는 챔순이 */
.home-theme-champsoon .board .empty{background:linear-gradient(180deg,#fff,#fff7fb);border:0;border-radius:0}
.home-theme-champsoon .empty-champsoon{display:block;width:150px;height:150px;margin:0 auto 6px;object-fit:contain}

/* ── 맨 아래: 풀밭 띠(토끼·파랑새) ─────────────────── */
.home-theme-champsoon .footer{
  position:relative;padding-bottom:clamp(90px,12vw,150px);
  background:url(/assets/img/home-footer-meadow.webp?v=20261029-g1) center bottom/100% auto no-repeat;
}

/* ── 휴대폰 ───────────────────────────────────── */
@media (max-width:759px){
  .home-theme-champsoon .garden-sky{opacity:.42}
  .home-theme-champsoon .rail-ico{width:40px;height:40px}
  .home-theme-champsoon .dayboard-title{padding-left:58px;background-position:10px center,0 0;background-size:38px,auto}
  .home-theme-champsoon .home-review-promo-head{background-position:10px center,0 0;background-size:34px,auto}
  .home-theme-champsoon .home-review-promo-title-wrap{padding-left:40px}
  .home-theme-champsoon .boards:before{left:0;right:0;top:-40px;height:140px;opacity:.55}
  .home-theme-champsoon .board{border-radius:16px}
  .home-theme-champsoon .board-head{padding:10px 8px;gap:5px}
  .home-theme-champsoon .board-badge{width:28px;height:28px}
  .home-theme-champsoon .board-list{padding:6px 5px 8px}
  .home-theme-champsoon .board-list li{margin-bottom:6px;border-radius:12px}
  .home-theme-champsoon .board-row,
  .home-theme-champsoon .board-row:hover{padding:8px 7px 9px}
  .home-theme-champsoon .row-meta.time,.home-theme-champsoon .row-meta.cp{padding:1px 6px;font-size:9.5px}
  .home-theme-champsoon .row-no{width:19px;height:19px;font-size:9.5px}
  .home-theme-champsoon .board-row.ranked{grid-template-columns:19px 1fr auto}
  .home-theme-champsoon .row-preview{border-left-width:3px}
  .home-theme-champsoon .empty-champsoon{width:104px;height:104px}
}
@media (prefers-reduced-motion:reduce){
  .home-theme-champsoon .board-list li,.home-theme-champsoon .rail-ico{transition:none}
}

/* ── v1.38.1 BEST 목록 아래 책 읽는 챔순이 — 늘 보이게 (이상준님 2026-10-29) ──
   두 칸 높이가 같아지므로(격자) BEST 칸 아래 빈자리를 챔순이가 채운다. 목록이 길면 맨 아래에 작게 남는다 */
.home-theme-champsoon .boards .board:last-child{display:flex;flex-direction:column}
.home-theme-champsoon .best-champsoon{
  flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  min-height:190px;padding:10px 12px 18px;text-align:center;text-decoration:none;
}
.home-theme-champsoon .best-champsoon img{width:150px;height:150px;object-fit:contain;transition:transform .25s ease}
.home-theme-champsoon .best-champsoon:hover img{transform:translateY(-3px) rotate(-3deg)}
.home-theme-champsoon .best-champsoon span{
  padding:5px 12px;border-radius:999px;background:#fff4f8;border:1px solid #f6c3d6;
  color:#c84a80;font-size:12.5px;font-weight:700;word-break:keep-all;
}
@media (max-width:759px){
  .home-theme-champsoon .best-champsoon{min-height:130px;padding:6px 4px 10px}
  .home-theme-champsoon .best-champsoon img{width:96px;height:96px}
  .home-theme-champsoon .best-champsoon span{font-size:10px;padding:3px 7px}
}
@media (prefers-reduced-motion:reduce){.home-theme-champsoon .best-champsoon img{transition:none}}

/* ── v1.39 BEST 챔순이를 빈자리에 맞춰 키우기 (이상준님 2026-10-29 「두 배로」) ──
   BEST 아래 빈자리가 넉넉하면 최대 300px, 목록이 길어 자리가 줄면 150px까지 저절로 작아진다.
   크기는 상자(.best-champsoon)의 높이·폭을 재는 컨테이너 단위(cqh·cqw)로 정한다 */
.home-theme-champsoon .best-champsoon{container-type:size;min-height:226px;gap:8px}
.home-theme-champsoon .best-champsoon img{
  width:auto;max-width:100%;
  height:clamp(150px, min(calc(100cqh - 76px), calc(100cqw - 24px)), 300px);
}
.home-theme-champsoon .best-champsoon span{font-size:14px;padding:6px 14px}
@media (max-width:759px){
  .home-theme-champsoon .best-champsoon{min-height:150px;gap:5px}
  .home-theme-champsoon .best-champsoon img{height:clamp(96px, min(calc(100cqh - 54px), calc(100cqw - 8px)), 140px)}
  .home-theme-champsoon .best-champsoon span{font-size:11px;padding:3px 8px}
}

/* ── v1.43 BEST 챔순이 인사 (이상준님 2026-10-30) ──
   마우스를 올리면 통통 한 번 뛰어오르고 고개를 좌우로 갸웃하며, 머리 왼쪽에 말풍선
   「안녕하세요? 뇌가 멋진 분들이 오셨군요!」. 휴대폰은 누르면 바로 넘어가므로 말풍선을 숨긴다 */
.home-theme-champsoon .best-champsoon .bc-stage{position:relative;display:block;line-height:0;padding:0;border:0;border-radius:0;background:none}
.home-theme-champsoon .best-champsoon .bc-stage img{transform-origin:50% 92%}
.home-theme-champsoon .best-champsoon:hover .bc-stage img,
.home-theme-champsoon .best-champsoon:focus-visible .bc-stage img{transform:none;animation:bc-hello-hop 1.15s ease-in-out}
@keyframes bc-hello-hop{
  0%{transform:translateY(0) rotate(0)}
  22%{transform:translateY(-16px) rotate(0)}
  40%{transform:translateY(0) rotate(0)}
  56%{transform:rotate(-7deg)}
  72%{transform:rotate(6deg)}
  86%{transform:rotate(-3deg)}
  100%{transform:rotate(0)}
}
.home-theme-champsoon .best-champsoon .bc-hello{
  position:absolute;right:76%;top:4%;z-index:2;width:max-content;max-width:176px;
  padding:9px 13px;border-radius:16px;background:#fff;border:2px solid #f6a9c6;
  color:#c84a80;font-family:var(--font-sans);font-size:14px;font-weight:700;line-height:1.45;
  text-align:center;word-break:keep-all;box-shadow:0 6px 16px rgba(220,90,140,.18);
  opacity:0;transform:translateY(8px) scale(.9);transform-origin:100% 100%;
  transition:opacity .28s ease .15s,transform .28s ease .15s;pointer-events:none;
}
.home-theme-champsoon .best-champsoon .bc-hello::after{
  content:"";position:absolute;right:-7px;bottom:16px;width:12px;height:12px;background:#fff;
  border-right:2px solid #f6a9c6;border-top:2px solid #f6a9c6;transform:rotate(45deg);
}
.home-theme-champsoon .best-champsoon:hover .bc-hello,
.home-theme-champsoon .best-champsoon:focus-visible .bc-hello{opacity:1;transform:none}
@media (max-width:759px){.home-theme-champsoon .best-champsoon .bc-hello{display:none}}
@media (prefers-reduced-motion:reduce){
  .home-theme-champsoon .best-champsoon:hover .bc-stage img,
  .home-theme-champsoon .best-champsoon:focus-visible .bc-stage img{animation:none}
}
.home-theme-champsoon .best-champsoon .bc-hint{margin-top:-2px;font-family:var(--font-sans);font-size:12px;color:#a0899a;letter-spacing:-.01em}
@media (max-width:759px){.home-theme-champsoon .best-champsoon .bc-hint{font-size:10px}}