/* 우리 반 꽃밭 카드 (patch-class-blossom.py, 2026-09-14) — 어린이집 학기제 4차.
   시안: preview/class-blossom.html. 여기와 시안은 같이 고친다. */

/* 카드 발치에 반별 꽃밭이 깔린다. 구름타워 카드와 같은 결이되 구도가 뒤집혔다 —
   거긴 그림이 위에 글자가 아래고, 여긴 글자가 위에 꽃이 아래다.
   띠 높이를 px 로 고정한다. 카드 폭에 맞추면 PC 에선 꽃이 카드를 통째로 덮고 모바일에선 꽃 하나가 화면을 채운다.
   그림이 없으면 --cls-bg 가 none 이라 조용히 흰 카드로 떨어진다. */
.cw-bl { position: relative; overflow: hidden; padding: 14px 15px 122px; }
/* ⚠ `::before` 는 쓸 수 없다 — cherish-skin.css 의 `.menugroup::before` 가 이미 윗줄 1px 헤어라인으로
   쓰고 있고 거기 `top: 0` 이 박혀 있다. 같은 선택자 무게라 내 `bottom: 0` 과 겹치면
   top·bottom·height 가 동시에 잡혀 bottom 이 무시되고 띠가 카드 머리로 올라간다 (2026-09-14 실측). */
.cw-bl::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 205px;
	z-index: 0;
	pointer-events: none;
	/* 꽃밭은 달성률만큼 짙어진다 — 0송이면 거의 맨 땅, 만개면 흐드러진다.
	   「아직 꽃이 피지 않았어요」 뒤에 활짝 핀 꽃밭이 깔려 있으면 말이 어긋난다. */
	opacity: calc(.26 + .5 * var(--bl-bloom, 1));
	background: var(--cls-bg, none) center bottom / cover no-repeat;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 44%, #000 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 44%, #000 100%);
}
/* 반이 없는 카드는 짧다 — 띠가 길면 안내 글자 뒤로 꽃이 올라온다. 발치에만 깔아 둔다. */
.cw-bl.is-none::after { opacity: .6; height: 138px; }
/* 한 송이도 없는 주도 카드가 짧다. */
.cw-bl.is-empty::after { height: 150px; }
.cw-bl > * { position: relative; z-index: 1; }

/* 좁은 화면에서 머리줄이 「제목 · 주차 · 남은 기간」 셋이라 넘칠 수 있다 — 넘치면 접히게 둔다. */
.cw-bl-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.cw-bl-title { font-size: 14px; font-weight: 800; letter-spacing: -.2px; }
.cw-bl-week { margin-left: auto; font-size: 11px; color: var(--cw-ink-3); }
/* 남은 기간 — 평소엔 주차 옆 작은 글씨, 마지막 하루만 알약으로 도드라진다. */
.cw-bl-left { font-size: 11px; color: var(--cw-ink-3); }
.cw-bl-left.soon { font-weight: 700; color: #b8354c; background: #fdeef1; border-radius: 999px; padding: 2px 8px; }

/* 모은 송이와 목표. 숫자는 크게, 목표는 옆에 작게. */
.cw-bl-count { display: flex; align-items: flex-end; gap: 6px; margin: 8px 0 7px; }
.cw-bl-now { font-size: 26px; font-weight: 800; line-height: 1; letter-spacing: -.5px; }
.cw-bl-goal { font-size: 12px; color: var(--cw-ink-3); padding-bottom: 2px; }
.cw-bl-full { margin-left: auto; align-self: center; font-size: 11px; font-weight: 700; color: #b8354c; background: #fdeef1; border-radius: 999px; padding: 3px 10px; }

/* 반 비교 — 반들을 같은 축에 놓는다. 순위를 달성률로 가르므로 길이로 바로 읽혀야 한다.
   큰 게이지를 따로 두지 않는 이유: 우리 반 줄과 같은 값을 두 번 그리게 된다 (2026-09-14 시안 검수). */
.cw-bl-others { margin-top: 13px; display: grid; gap: 9px; }
.cw-bl-row { display: flex; align-items: center; gap: 9px; font-size: 12px; }
.cw-bl-row .nm { width: 86px; flex: none; color: var(--cw-ink-3); }
.cw-bl-row .mini { flex: 1; height: 8px; border-radius: 999px; background: var(--cw-well); overflow: hidden; }
.cw-bl-row .mini span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--cls-soft, var(--cls)), var(--cls)); }
.cw-bl-row .pct { width: 42px; text-align: right; color: var(--cw-ink-3); font-variant-numeric: tabular-nums; }
/* 우리 반은 굵게, 막대도 한 단 두껍게 — 어느 게 우리 줄인지 한눈에. */
.cw-bl-row.me .nm { font-weight: 800; color: var(--cw-ink); }
.cw-bl-row.me .pct { font-weight: 700; color: var(--cw-ink-2); }
.cw-bl-row.me .mini { height: 12px; }
/* 만개를 넘긴 반은 막대에 금빛 — 넘은 건 사건이다. */
.cw-bl-row.over .mini span { background: linear-gradient(90deg, var(--cls), #ffd76a, var(--cls)); }

/* 보너스가 있다는 것까지만 알리는 줄. 얼마인지는 어디에도 안 쓴다 (2026-09-15 사용자 확정). */
.cw-bl-hint { margin-top: 9px; font-size: 11px; color: var(--cw-ink-3); }

/* 우리 반에서 가장 많이 피워준 사람 — 셋만. 등수 숫자는 안 쓴다. */
.cw-bl-top { margin-top: 16px; padding-top: 15px; border-top: 1px solid var(--cw-line); }
.cw-bl-cap { font-size: 11px; color: var(--cw-ink-3); margin: 0 0 11px; }
.cw-bl-podium { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
/* 단상은 꽃밭 위에 놓인다 — 꽉 막지 않고 살짝 비치게 해 꽃이 뒤로 지나가게 둔다. */
.cw-bl-one { position: relative; border: 1px solid var(--cw-line); border-radius: 14px; background: rgba(255, 255, 255, .84); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); padding: 9px 8px 10px; text-align: center; overflow: hidden; }
.cw-bl-one::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--cls); opacity: .5; }
.cw-bl-one.first { border-color: var(--cls); box-shadow: 0 4px 14px -8px var(--cls); }
.cw-bl-one.first::before { opacity: 1; }
.cw-bl-ava { height: 84px; margin: 2px auto 6px; display: block; object-fit: contain; }
.cw-bl-nm { font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-bl-pt { font-size: 11px; color: var(--cw-ink-3); margin-top: 1px; }
.cw-bl-chair { display: inline-block; margin-top: 5px; font-size: 10px; font-weight: 700; color: #8a5a12; background: #fff4d6; border-radius: 999px; padding: 2px 8px; }

/* 나 — 4위 이하에게는 등수 대신 이것만 */
.cw-bl-mine { margin-top: 11px; padding: 9px 11px; border-radius: 12px; background: rgba(246, 241, 242, .82); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); font-size: 12px; color: var(--cw-ink-2); display: flex; align-items: center; gap: 8px; }
.cw-bl-mine b { color: var(--cw-ink); font-weight: 800; }

/* 어린이집 교실로 가는 버튼 (2026-09-23) — 배틀 사이트에서 웹으로 넘어가는 자리.
   덮개의 「확인」(.cw-blr-ok)과 같은 결로, 반 색만 옅게 깐다. 금색·발광 금지. */
.cw-bl-go { display: block; margin: 9px auto 0; width: 100%; max-width: 300px; font-size: 12px; font-weight: 800; color: var(--cw-ink); background: var(--cls-soft); border: 1px solid var(--cls); border-radius: 12px; padding: 10px 0; text-align: center; text-decoration: none; }
.cw-bl-go:hover { filter: brightness(.97); text-decoration: none; }
.cw-bl-go:active { transform: translateY(1px); }

/* 반이 없는 사람 — 순위표 대신 배정 안내. 여기가 배정의 유일한 발견 경로다. */
.cw-bl-none { text-align: center; padding: 16px 10px 6px; }
.cw-bl-none .big { font-size: 13px; font-weight: 700; margin-bottom: 4px; }
.cw-bl-none .sub { font-size: 12px; color: var(--cw-ink-3); line-height: 1.6; }
.cw-bl-flowers { font-size: 22px; letter-spacing: 4px; opacity: .55; margin-bottom: 8px; }

/* 배틀 종료 카드 한 줄 — 이긴 판에만 뜬다. 알·체리 칸과 같은 결로, 색만 반 꽃 쪽으로. */
.cw-end-blossom {
	margin: 10px auto 0;
	max-width: 420px;
	padding: 9px 14px;
	border-radius: 12px;
	background: rgba(255, 255, 255, .14);
	display: flex; align-items: baseline; justify-content: center; gap: 10px;
	text-align: center;
}
.cw-end-blossom b { font-size: 11pt; font-weight: 700; }
.cw-end-blossom small { font-size: 8.5pt; opacity: .78; }

/* 배틀 화면 반 표식 — 전신 아바타 이름 옆 반 꽃. 익명 배틀에서는 서버가 안 보내 아예 안 붙는다. */
.trainer .cw-cls-badge {
	margin-left: 3px;
	font-size: .9em;
	font-weight: 400;
	vertical-align: baseline;
	opacity: .95;
}

/* ─────────────────────────────────────────────────────────────────────────
   지난 주 마감 결과 (2026-09-22) — 확인을 누를 때까지 꽃밭 카드 자리를 **대신한다**.
   시안: preview/class-blossom.html 의 같은 이름 규칙들. 한쪽만 고치지 말 것.

   덮개를 절대배치로 얹지 않는 이유: 카드와 높이가 어긋나면 모바일에서 아래가 잘리거나 빈 자리가
   남는다. 자리를 통째로 바꿔 끼우면 그 문제가 통째로 없다.
   ⚠ 금색·입체·발광·반짝임 금지 (구름타워 카드에서 확정된 취향). 강조는 반 색 하나로만 준다. */
.cw-blr { position: relative; overflow: hidden; padding: 18px 16px 16px; text-align: center; }
/* ⚠ `::before` 는 못 쓴다 — cherish-skin.css 의 `.menugroup::before` 가 헤어라인으로 쓰고 있다
     (꽃밭 카드와 같은 함정). 그림은 카드보다 짙게 깔되 위쪽은 걷어 글자가 뜨게 둔다. */
.cw-blr::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: 0;
	height: 260px;
	z-index: 0;
	pointer-events: none;
	opacity: .62;
	background: var(--cls-bg, none) center bottom / cover no-repeat;
	-webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 52%, #000 100%);
	mask-image: linear-gradient(180deg, transparent 0%, #000 52%, #000 100%);
}
/* 꽃잎 여섯 장이 느리게 진다. 반짝임이 아니라 **움직임**이라 촌스러워지지 않는다.
   여섯 장인 이유 — 더 늘리면 눈이 글자에서 떨어진다. */
.cw-blr-petals { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
.cw-blr-petals i {
	position: absolute; top: -14px; width: 9px; height: 9px; opacity: 0;
	border-radius: 9px 1px 9px 1px; background: var(--cls-soft, var(--cls));
	animation: cw-blr-fall linear infinite;
}
@keyframes cw-blr-fall {
	0%   { transform: translate3d(0, -14px, 0) rotate(0deg); opacity: 0; }
	14%  { opacity: .6; }
	86%  { opacity: .45; }
	100% { transform: translate3d(18px, 300px, 0) rotate(210deg); opacity: 0; }
}
.cw-blr-petals i:nth-child(1) { left:  7%; animation-duration: 12s; animation-delay:  0s; }
.cw-blr-petals i:nth-child(2) { left: 24%; animation-duration: 16s; animation-delay: -6s; }
.cw-blr-petals i:nth-child(3) { left: 43%; animation-duration: 14s; animation-delay: -9s; }
.cw-blr-petals i:nth-child(4) { left: 61%; animation-duration: 18s; animation-delay: -3s; }
.cw-blr-petals i:nth-child(5) { left: 78%; animation-duration: 13s; animation-delay: -11s; }
.cw-blr-petals i:nth-child(6) { left: 91%; animation-duration: 17s; animation-delay: -15s; }
@media (prefers-reduced-motion: reduce) { .cw-blr-petals { display: none; } }
/* PC 에서 카드가 1100px 까지 벌어진다 — 안쪽은 한 단 묶어 가운데로 모은다.
   안 묶으면 막대가 1m 짜리로 늘어나고 확인 버튼이 화면을 가로지른다. */
.cw-blr-in { position: relative; z-index: 2; max-width: 560px; margin: 0 auto; }

.cw-blr-cap { font-size: 11px; font-weight: 800; letter-spacing: .4px; color: var(--cw-ink-3); }
.cw-blr-term { margin-top: 3px; font-size: 11px; color: var(--cw-ink-3); }
.cw-blr-cls { margin-top: 15px; font-size: 13px; font-weight: 800; color: var(--cw-ink-2); }
/* 등수가 주인공이다. 숫자만 반 색으로 크게 두고 나머지는 전부 조용히. */
.cw-blr-rank { display: flex; align-items: baseline; justify-content: center; gap: 3px; margin-top: 3px; }
.cw-blr-rank b { font-size: 50px; font-weight: 800; line-height: 1; letter-spacing: -2px; color: var(--cls); }
.cw-blr-rank i { font-style: normal; font-size: 16px; font-weight: 700; color: var(--cls); }
.cw-blr-pct { margin-top: 5px; font-size: 12px; color: var(--cw-ink-2); }
.cw-blr-pct b { font-weight: 800; color: var(--cw-ink); }
.cw-blr-mine { margin-top: 11px; }
/* 「지켰다 / 올라왔다」만 말한다. 내려온 주에는 이 줄이 아예 없다 — 감점을 안 보이는 규칙과 같은 결. */
.cw-blr-move { display: inline-block; margin-top: 9px; font-size: 11px; font-weight: 700; color: var(--cls); background: rgba(255, 255, 255, .74); border: 1px solid var(--cls-soft); border-radius: 999px; padding: 3px 11px; }

/* 세 반 나란히 — 카드와 **같은 줄 모양**(.cw-bl-row)을 그대로 쓴다. 두 벌로 나뉘면 언젠가 갈라진다. */
.cw-blr-rows { margin-top: 16px; padding: 12px; border-radius: 14px; border: 1px solid var(--cw-line); background: rgba(255, 255, 255, .92); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); text-align: left; display: grid; gap: 9px; }

/* 받은 것. 지급은 이미 끝나 있다 — 여긴 통지지 수령 버튼이 아니다. */
.cw-blr-got { margin-top: 12px; padding: 12px 13px; border-radius: 14px; border: 1px solid var(--cls-soft); background: rgba(255, 255, 255, .92); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); }
.cw-blr-got .big { font-size: 14px; font-weight: 800; color: var(--cw-ink); }
.cw-blr-got .sub { margin-top: 4px; font-size: 11px; line-height: 1.6; color: var(--cw-ink-3); }
/* 못 받은 주는 조용하게. 문턱은 여기서만 말한다 — 담임 게시판은 배틀을 모른다. */
.cw-blr-got.none { border-color: var(--cw-ink-3); border-style: dashed; }
.cw-blr-got.none .big { font-size: 13px; font-weight: 700; color: var(--cw-ink-2); }

.cw-blr-ok { display: block; margin: 14px auto 0; width: 100%; max-width: 300px; font: inherit; font-size: 13px; font-weight: 800; color: var(--cw-ink); background: var(--cls-soft); border: 1px solid var(--cls); border-radius: 12px; padding: 11px 0; cursor: pointer; }
.cw-blr-ok:hover { filter: brightness(.97); }
.cw-blr-ok:active { transform: translateY(1px); }

/* 아직 아무도 안 친 주 */
.cw-bl-empty { margin-top: 12px; padding: 14px 10px; border-radius: 12px; background: var(--cw-well); text-align: center; font-size: 12px; color: var(--cw-ink-3); }

@media (max-width: 700px) {
	.cw-bl { padding-bottom: 104px; }
	.cw-bl::after { height: 150px; }
	.cw-bl.is-none::after { height: 128px; }
	.cw-bl-podium { gap: 6px; }
	.cw-bl-ava { height: 68px; }
	.cw-bl-now { font-size: 23px; }
	.cw-bl-row .nm { width: 72px; }
	/* 덮개 — 좁은 화면에선 등수 숫자를 한 단 줄이고 여백을 당긴다. */
	.cw-blr { padding: 16px 13px 14px; }
	.cw-blr-rank b { font-size: 44px; }
	.cw-blr-rows { padding: 11px 10px; }
}