/* cherish-home-modes (patch-home-modes.py, 2026-09-06) — 홈 모드 선택 줄 + 「오늘의 나」가 품은 배틀 점수 띠.
   cherish-skin.css 의 토큰(--cw-*)을 그대로 쓴다. skin 은 patch-skin.py 가 통째로 다시 쓰므로 여기 따로 둔다.

   ⚠️ 2026-09-07 카드 외형 개편 — 아이콘 글꼴 + 흰 상자는 폐기(사용자: 「너무 안 예쁘다」).
   카드마다 **그림 한 장**(home-mode-<key>.webp, 로컬 생성)을 깔고 글자는 왼쪽에 얹는다.
   그림은 이 구도로 뽑았다: 주인공은 오른쪽, 왼쪽은 분위기만 남기고 디테일을 낮춘 판.
   고른 카드를 붉게 채우던 것도 폐기 — 그림이 다 죽는다. 왼쪽 굵은 띠 + 테두리로 가른다. */
.cw-modes-row { padding: 12px; }
/* 2026-09-09: 구름 미궁이 네 번째 칸으로 올라와 3열 → 4열. 카드가 240 → 177px 로 좁아지면서
   그림은 왼쪽 14.5% 를 더 잘라 낸다(cover + right center). 잘리는 쪽이 원래 비워 둔 글자
   자리라 그림 파일은 그대로 쓴다 — 대신 막의 기울기를 좁은 카드에 맞춰 조금 당겼다. */
.cw-modes-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.cw-mode {
	position: relative; display: block; width: 100%; min-width: 0; height: 104px;
	padding: 0; border: 1px solid rgba(38, 20, 42, .25); border-radius: 16px; overflow: hidden;
	background: var(--cw-white, #fff); color: inherit; font: inherit; text-align: left; cursor: pointer;
	box-shadow: 0 4px 18px -12px rgba(95, 61, 99, .55);
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.cw-mode-art { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; object-position: right center; }
/* 글자 자리 — 왼쪽에서 오른쪽으로 옅어지는 막. 그림의 낮은 디테일 쪽과 맞물린다 */
.cw-mode::before {
	content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background: linear-gradient(90deg, rgba(38, 20, 42, .88) 0%, rgba(38, 20, 42, .76) 42%, rgba(38, 20, 42, .38) 70%, rgba(38, 20, 42, 0) 95%);
}
.cw-mode-body { position: relative; z-index: 2; display: block; padding: 13px 12px 11px; }
.cw-mode-body b { display: block; font: 400 13.5pt/1.2 'Cafe24Dongdong', 'Pretendard', sans-serif; color: #fff; text-shadow: 0 1px 3px rgba(0, 0, 0, .45); }
/* 4열이 되며 카드가 177px 로 좁아졌다 — 부제를 8pt·90% 로 낮춰야 「야생을 헤치고 깊이 들어가 보자」가 세 줄로 넘치지 않는다 */
.cw-mode-body small { display: block; margin-top: 3px; font-size: 8pt; line-height: 1.4; color: rgba(255, 255, 255, .86); text-shadow: 0 1px 3px rgba(0, 0, 0, .4); word-break: keep-all; max-width: 90%; }
.cw-mode:hover:not(.is-locked):not(.is-soon) { transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(95, 61, 99, .6); }
/* 고른 카드 — 왼쪽 굵은 띠 + 테두리. 그림을 덮지 않는다 */
.cw-mode.is-on { border-color: var(--cw-accent, #e11d48); box-shadow: 0 0 0 1px var(--cw-accent, #e11d48), 0 10px 24px -12px rgba(190, 18, 60, .5); }
.cw-mode.is-on::after { content: ""; position: absolute; z-index: 3; left: 0; top: 0; bottom: 0; width: 4px; background: var(--cw-cta-grad, linear-gradient(180deg, #fb7185, #be123c)); }
.cw-mode.is-on .cw-mode-body b { color: #ffd7e0; }
/* 잠김 — 「너는 아직 안 됨」이 아니라 「다음에 열릴 것」으로 보이게 채도만 낮춘다 */
.cw-mode.is-locked, .cw-mode.is-soon { cursor: default; border-style: dashed; box-shadow: none; }
.cw-mode.is-locked .cw-mode-art, .cw-mode.is-soon .cw-mode-art { filter: saturate(.3) brightness(.82); }
.cw-mode.is-locked .cw-mode-body b, .cw-mode.is-soon .cw-mode-body b { color: rgba(255, 255, 255, .78); }
.cw-mode-lock {
	position: absolute; z-index: 3; right: 10px; top: 10px; width: 22px; height: 22px; border-radius: 50%;
	display: grid; place-items: center; background: rgba(255, 255, 255, .25); color: #fff;
	font-size: 10px; box-shadow: 0 2px 6px -3px rgba(95, 61, 99, .5);
}
.cw-modes-hint { margin: 10px 2px 0; font-size: 9pt; line-height: 1.5; color: var(--cw-ink-2, #8a6a8c); }
/* 「첫 등반」 알약 (2026-09-24) — 탑에 자리가 없는 졸업생의 구름타워 칸에만. 자리가 생기면 사라진다 */
.cw-mode-pill {
	position: absolute; z-index: 4; right: 9px; top: 9px; padding: 3px 8px; border-radius: 999px;
	background: #fff; color: var(--cw-accent-dark, #be123c); font-size: 7.5pt; font-weight: 800; white-space: nowrap;
	box-shadow: 0 2px 8px -3px rgba(190, 18, 60, .6);
}
.cw-mode-pill::before {
	content: ""; display: inline-block; width: 6px; height: 6px; margin-right: 5px; vertical-align: 1px;
	border-radius: 50%; background: var(--cw-accent, #e11d48); animation: cw-mode-pill-blink 1.6s ease-in-out infinite;
}
@keyframes cw-mode-pill-blink { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { .cw-mode-pill::before { animation: none; } }
/* 「오늘의 나」가 품은 배틀 점수 띠 — 단독 카드였을 때의 menugroup 여백을 여기서 되살린다. */
.cw-home .cw-bp.is-inline { margin: 14px -2px 0; padding: 13px 2px 0; border-top: 1px solid var(--cw-line, #e6dcdd); }
/* 모바일 — 정사각 4열 한 줄 (2026-09-09, 미궁 승격). 막은 가로가 아니라 **세로**로 깐다 (2026-09-07 사용자 제안).
   2×2 두 줄은 360px 폰에서 세로 360px 를 먹어 홈 첫 화면의 절반이 된다 → 기각. */
@media (max-width: 700px) {
	.cw-modes-row { padding: 10px; }
	.cw-modes-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; }
	.cw-mode { height: auto; aspect-ratio: 1 / 1; border-radius: 14px; }
	.cw-mode::before {
		background: linear-gradient(180deg, rgba(38, 20, 42, 0) 30%, rgba(38, 20, 42, .5) 58%, rgba(38, 20, 42, .92) 100%);
	}
	.cw-mode-body { position: absolute; left: 0; right: 0; bottom: 0; padding: 7px 3px 8px; }
	/* 4열이라 320px 폰에서 카드가 71px 까지 줄어든다 — 「매칭하기」·「구름 미궁」 4글자가 한 줄에 들어가야 한다.
	   8pt(10.7px)×4글자 ≈ 43px + 좌우 여백 6px < 71px. 띄어쓰기는 글자 사이라 nowrap 으로 붙여 둔다. */
	.cw-mode-body b { font-size: clamp(8pt, 2.6vw, 10.5pt); text-align: center; white-space: nowrap; letter-spacing: -.02em; }
	.cw-mode-body small { display: none; }
	.cw-mode-lock { right: 6px; top: 6px; width: 19px; height: 19px; font-size: 9px; }
	/* 정사각 칸(최소 71px)에선 글자를 빼고 점만 — 「첫 등반」 네 글자가 칸 제목과 겹친다 */
	.cw-mode-pill { right: 6px; top: 6px; padding: 0; width: 12px; height: 12px; font-size: 0; background: #fff; }
	.cw-mode-pill::before { display: block; margin: 3px; }
	.cw-mode.is-on::after { top: auto; height: 4px; width: auto; right: 0; bottom: 0;
		background: var(--cw-cta-grad, linear-gradient(90deg, #fb7185, #be123c)); }
	.cw-modes-hint { margin-top: 8px; }
}