/* cherish-school (patch-school-card.py) — 배틀홈 학교 카드. cherish-skin.css 의 토큰(--cw-*)을 그대로 쓴다. */
.cw-school { padding: 16px 18px; border-color: var(--cw-line-strong, #d9c8c9); overflow: hidden; /* 타일이 넘쳐도 페이지가 옆으로 밀리지 않게 */ }
.cw-school-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.cw-school-title { margin: 2px 0 0; font-size: 15pt; line-height: 1.25; }
.cw-school-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 8.5pt; font-weight: 700; letter-spacing: .2px; vertical-align: middle; }
.cw-school-badge.is-soon { background: #ffe8ec; color: #c0392b; }
.cw-school-badge.is-grad { background: #e3f7e9; color: #1e8e3e; }
.cw-school-desc { margin: 10px 0 0; font-size: 10.5pt; line-height: 1.55; color: var(--cw-ink-2, #555); word-break: keep-all; }
/* 타일 — 정사각. 그림(school-*.webp 720²)이 있으면 꽉 채우고, 없으면(no-img) 번호 타일. 규격: docs/showdown-school-assets.md */
.cw-school-tiles { display: flex; align-items: flex-end; gap: 8px; margin: 12px 0 0; }
.cw-st { position: relative; flex: 0 0 auto; width: 120px; height: 120px; padding: 0; border: 2px solid transparent; border-radius: 12px; overflow: hidden; background: var(--cw-well, #f6f1f2); color: var(--cw-ink-3, #888); cursor: pointer; text-align: left; font: inherit; transition: transform .15s ease, box-shadow .15s ease; }
.cw-st:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0, 0, 0, .18); }
.cw-st:disabled { cursor: default; }
/* 잠김(진행 중 배틀·미종료 수업) — **disabled 가 아니다**. 눌리고, 누르면 이유를 말해 준다.
   2026-09-14: disabled 였을 때 「눌러도 아무 반응이 없다」 신고가 났다. */
.cw-st.is-wait { opacity: .72; }
.cw-st.is-wait img { filter: saturate(.45); }
.cw-st img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cw-st.no-img img { display: none; }
.cw-st-no { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); font-size: 26px; font-weight: 800; color: var(--cw-ink-2, #777); display: none; }
.cw-st.no-img .cw-st-no { display: block; }
.cw-st-label { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; min-height: 22px; display: flex; align-items: center; justify-content: center; padding: 0 6px; background: rgba(20, 16, 24, .58); color: #fff; font-size: 8.5pt; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-st.no-img .cw-st-label { background: rgba(20, 16, 24, .12); color: var(--cw-ink-2, #666); }
.cw-st.is-now { width: 216px; height: 216px; border-color: #e94b6a; box-shadow: 0 8px 22px rgba(233, 75, 106, .28); animation: cw-st-breathe 2.2s ease-in-out infinite; }
@keyframes cw-st-breathe {
	0%, 100% { box-shadow: 0 8px 22px rgba(233, 75, 106, .28); transform: translateY(0); }
	50% { box-shadow: 0 10px 30px rgba(233, 75, 106, .5), 0 0 0 4px rgba(233, 75, 106, .18); transform: translateY(-3px); }
}
@media (prefers-reduced-motion: reduce) { .cw-st.is-now { animation: none; } }
.cw-school-hint { margin: 10px 0 0; font-size: 9.5pt; color: var(--cw-ink-3, #888); }
.cw-st.is-now .cw-st-no { font-size: 44px; color: #c0392b; }
.cw-st.is-now .cw-st-label { font-size: 10.5pt; }
.cw-st-next { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: #e94b6a; color: #fff; font-size: 8pt; font-weight: 800; }
.cw-st.is-done { border-color: #d9b451; }
.cw-st-stamp { position: absolute; right: 6px; top: 6px; padding: 2px 7px; border: 2px solid #c0392b; border-radius: 6px; color: #c0392b; background: rgba(255, 255, 255, .82); font-size: 8.5pt; font-weight: 900; letter-spacing: 1px; transform: rotate(-12deg); }
.cw-st.is-locked { opacity: .6; }
.cw-st.is-locked img { filter: saturate(.2); }
.cw-st-lock { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); width: 30px; height: 30px; border-radius: 50%; background: rgba(20, 16, 24, .55); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 13px; }
.cw-st.is-locked .cw-st-no { display: none; }
.cw-school-actions { display: flex; align-items: center; gap: 12px; margin-top: 12px; flex-wrap: wrap; }
.cw-school-go { padding: 10px 22px !important; font-size: 11.5pt !important; font-weight: 700; }
.cw-school-skip { background: none; border: 0; padding: 0; color: var(--cw-ink-3, #888); font-size: 9.5pt; text-decoration: underline; cursor: pointer; }
.cw-school-skip:disabled, .cw-school-go:disabled, .cw-school-retake:disabled { opacity: .5; cursor: default; }
/* 잠금 안내 — 회색 9.5pt 는 아무도 안 읽는다(2026-09-14 신고). 타일 바로 아래 띠로 세운다. */
.cw-school-note { margin: 10px 0 0; padding: 7px 10px; border-radius: 8px; background: #fff4e5; color: #8a5a00; font-size: 9.5pt; font-weight: 700; }
.cw-school-err { margin: 8px 0 0; font-size: 9.5pt; color: #c0392b; font-weight: 700; }
/* 모바일 — 지그재그 2열 (사용자 결정 2026-09-05): 1 3 5 / 2 4. 6칸 그리드에 타일마다 2칸씩, 아래 줄은 한 칸 밀린다.
   한 줄에 5개를 우겨 넣으면 넘쳐서 페이지가 옆으로 밀렸고, 줄이면 그림이 작아진다. 크기는 전부 같고(폭의 1/3, 정사각)
   다음 수업은 테두리·배지·애니메이션으로만 구분한다. */
@media (max-width: 700px) {
	/* ⚠️ align-items 는 반드시 start. stretch 면 **사파리에서 타일이 높이 0 으로 찌그러진다** (2026-09-08 실측).
	   grid 아이템이 stretch 되면 aspect-ratio 가 무시되고 높이는 행 높이 = 콘텐츠 높이로 정해지는데,
	   .cw-st 의 자식(img·번호·라벨·배지)은 전부 position:absolute 라 콘텐츠 높이가 0 이다. 게다가 .cw-st 는
	   overflow:hidden 이라 안이 통째로 잘려 「분홍 점 하나」만 남는다. 크롬은 행을 aspect-ratio 로 재서
	   멀쩡히 보이므로 **PC 로는 절대 못 잡는 버그**다. 옆 .cw-mode 가 안 터진 건 align-items 를 안 적어
	   초깃값(normal)이었기 때문 — normal 은 aspect-ratio 가 있으면 start 로 동작한다. */
	.cw-school-tiles { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px 4px; align-items: start; }
	.cw-st, .cw-st.is-now { width: auto; height: auto; aspect-ratio: 1 / 1; border-radius: 10px; }
	.cw-st:nth-child(1) { grid-column: 1 / 3; grid-row: 1; }
	.cw-st:nth-child(3) { grid-column: 3 / 5; grid-row: 1; }
	.cw-st:nth-child(5) { grid-column: 5 / 7; grid-row: 1; }
	.cw-st:nth-child(2) { grid-column: 2 / 4; grid-row: 2; }
	.cw-st:nth-child(4) { grid-column: 4 / 6; grid-row: 2; }
	.cw-st-label { font-size: 8pt; padding: 0 3px; }
	.cw-st.is-now .cw-st-label { font-size: 8.5pt; }
	.cw-st-no { font-size: 24px; }
	.cw-st.is-now .cw-st-no { font-size: 30px; }
	.cw-st-next { left: 5px; top: 5px; font-size: 7pt; padding: 1px 6px; }
	.cw-st-stamp { right: 4px; top: 4px; font-size: 7pt; padding: 1px 5px; }
	.cw-school-go { width: 100%; }
}