/* cherish-music.css — 「내 포켓몬 › 💿 음악 CD」 (patch-music-tab.py, 2026-09-23).
   스킨 토큰(--cw-*)만 쓴다 — 라이트·하늘·다크 세 테마가 따라온다. 원반 색만 곡마다 hue 로 돈다.
   ⚠️ 머리 주석의 'cherish' 를 지우지 말 것 — verify-patch-markers.py 가 우리 파일을 고를 때 쓴다. */
.cw-music { --cw-music-len: 25s; }

/* ── CD 카드 ── */
.cw-music-list { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cw-music-cd {
	--h: var(--cw-disc-hue, 340);
	position: relative; display: flex; align-items: center; gap: 14px;
	padding: 12px 14px 12px 12px;
	border-radius: var(--cw-r-sm, 14px);
	background: var(--cw-white, #fff);
	/* 기본 스킨은 --cw-line 이 거의 흰색이라 흰 카드 위에서 윤곽이 사라진다 — 진한 선을 묽혀 쓴다 */
	border: 1px solid var(--cw-line, #f3d6db);
	border-color: color-mix(in srgb, var(--cw-line-strong, #fda4af) 45%, transparent);
	box-shadow: 0 1px 2px rgba(136, 19, 55, .04), 0 10px 22px -18px rgba(136, 19, 55, .35);
	transition: border-color .16s ease, box-shadow .16s ease, background .16s ease;
}
.cw-music-cd.is-on { border-color: var(--cw-line-strong, #fda4af); background: linear-gradient(135deg, var(--cw-white, #fff) 50%, var(--cw-tint-2, #ffe4e9)); }
html.cw-dark .cw-music-cd { box-shadow: 0 10px 22px -18px rgba(0, 0, 0, .7); }
.cw-music-cd.is-playing { border-color: hsl(var(--h) 62% 72%); box-shadow: 0 12px 26px -16px hsl(var(--h) 70% 42% / .6); }

/* 원반 — 가운데 구멍 · 곡 색 라벨 · 무지개 결. 크기와 무관하게 비율로 그린다. */
.cw-music-disc {
	--h: var(--cw-disc-hue, 340);
	display: block; width: 58px; height: 58px; border-radius: 50%;
	background:
		radial-gradient(circle closest-side, var(--cw-white, #fff) 0 21%, rgba(0, 0, 0, .16) 22% 25%, hsl(var(--h) 68% 74%) 26% 52%, rgba(255, 255, 255, .7) 53% 55%, transparent 56%),
		repeating-radial-gradient(circle closest-side, rgba(255, 255, 255, 0) 0 4%, rgba(255, 255, 255, .16) 5% 6%),
		conic-gradient(from 210deg, hsl(var(--h) 72% 90%), #fff 10%, hsl(calc(var(--h) + 70) 78% 86%) 24%, #f6f5fb 36%, hsl(calc(var(--h) + 190) 66% 87%) 52%, #fff 64%, hsl(calc(var(--h) - 60) 78% 86%) 80%, hsl(var(--h) 72% 90%));
	box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07), inset 0 0 0 3px rgba(255, 255, 255, .55), 0 6px 14px -8px hsl(var(--h) 55% 32% / .55);
}
.cw-music-disc.is-sm { width: 40px; height: 40px; flex: 0 0 auto; }
.cw-music-disc.is-ghost { width: 66px; height: 66px; margin-bottom: 6px; opacity: .5; filter: saturate(.35); }
html.cw-dark .cw-music-disc { filter: brightness(.86) saturate(1.1); }
html.cw-dark .cw-music-disc.is-ghost { filter: brightness(.7) saturate(.3); }

.cw-music-play {
	position: relative; flex: 0 0 auto; width: 58px; height: 58px; padding: 0;
	border: 0; border-radius: 50%; background: transparent; cursor: pointer; text-shadow: none;
}
.cw-music-play:focus-visible { outline: 2px solid var(--cw-accent, #e11d48); outline-offset: 3px; }
.cw-music-play-ic {
	position: absolute; right: -3px; bottom: -3px;
	width: 25px; height: 25px; border-radius: 50%;
	display: grid; place-items: center;
	background: var(--cw-cta-grad, #e11d48); color: var(--cw-on-accent, #fff);
	box-shadow: 0 0 0 2px var(--cw-white, #fff), 0 5px 10px -4px rgba(190, 18, 60, .75);
	transition: transform .14s ease;
}
.cw-music-play-ic svg { width: 12px; height: 12px; fill: currentColor; }
.cw-music-play:hover .cw-music-play-ic { transform: scale(1.1); }
.cw-music-cd.is-live .cw-music-disc { animation: cw-music-spin 2.8s linear infinite; }

.cw-music-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cw-music-title { font-size: 15px; font-weight: 800; letter-spacing: -.01em; color: var(--cw-ink, #881337); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-music-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.cw-music-tag { font-style: normal; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--cw-tint-2, #ffe4e9); color: var(--cw-ink-muted, #a8637a); }
.cw-music-tag.is-on { background: var(--cw-accent, #e11d48); color: var(--cw-on-accent, #fff); }
.cw-music-tag.is-spare { background: transparent; box-shadow: inset 0 0 0 1px var(--cw-line-strong, #fda4af); color: var(--cw-ink-soft, #be123c); }
.cw-music-progress { position: absolute; left: 84px; right: 14px; bottom: 7px; display: block; height: 3px; border-radius: 3px; overflow: hidden; background: var(--cw-tint-2, #ffe4e9); }
.cw-music-progress i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--cw-cta-grad, #e11d48); transform: scaleX(0); transform-origin: left center; }
.cw-music-cd.is-live .cw-music-progress i { animation: cw-music-prog var(--cw-music-len) linear forwards; }

.cw-music-actions { flex: 0 0 auto; display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.cw-music-equip { display: inline-flex; align-items: center; gap: 7px; }
.cw-music-equip small { font-size: 11.5px; font-weight: 700; color: var(--cw-ink-muted, #a8637a); }
.cw-music-switch {
	position: relative; width: 42px; height: 24px; padding: 0;
	border: 0; border-radius: 999px; cursor: pointer;
	background: var(--cw-tint-2, #ffe4e9); box-shadow: inset 0 0 0 1px var(--cw-line-strong, #fda4af); text-shadow: none;
	transition: background .18s ease, box-shadow .18s ease;
}
.cw-music-switch i { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, .25); transition: transform .18s cubic-bezier(.3, .7, .3, 1); }
.cw-music-switch.on { background: var(--cw-accent, #e11d48); box-shadow: none; }
.cw-music-switch.on i { transform: translateX(18px); }
.cw-music-switch:focus-visible { outline: 2px solid var(--cw-accent, #e11d48); outline-offset: 2px; }
.cw-music-switch:disabled { opacity: .6; cursor: default; }
.cw-music-gift {
	padding: 4px 11px; border-radius: 999px;
	border: 1px solid var(--cw-line-strong, #fda4af); background: var(--cw-white, #fff);
	color: var(--cw-ink-soft, #be123c); font: inherit; font-size: 12px; font-weight: 800; line-height: 1.5;
	cursor: pointer; text-shadow: none; transition: background .14s ease;
}
.cw-music-gift:hover:not(:disabled) { background: var(--cw-tint, #fff1f3); }
.cw-music-gift:disabled { opacity: .6; cursor: default; }

.cw-music-empty {
	display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center;
	padding: 28px 16px 24px; border-radius: var(--cw-r-sm, 14px);
	background: var(--cw-tint, #fff1f3); border: 1px dashed var(--cw-line-strong, #fda4af);
}
.cw-music-empty b { font-size: 15px; color: var(--cw-ink, #881337); }
.cw-music-empty p { margin: 0; font-size: 13px; color: var(--cw-ink-muted, #a8637a); }
.cw-music-lead { margin: 2px 0 12px; font-size: 13px; line-height: 1.6; color: var(--cw-ink-muted, #a8637a); }
.cw-music-lead b { color: var(--cw-ink, #881337); }
/* 못 만난 CD 자리 — 점선 · 흐린 원반 · 물음표. 누를 수 없다. */
.cw-music-cd.is-locked { background: transparent; border-style: dashed; box-shadow: none; }
.cw-music-play.is-locked { display: block; cursor: default; }
.cw-music-cd.is-locked .cw-music-disc { opacity: .38; filter: grayscale(1); }
.cw-music-lock { position: absolute; inset: 0; display: grid; place-items: center; font: 800 17px/1 Pretendard, sans-serif; color: var(--cw-ink-muted, #a8637a); }
.cw-music-cd.is-locked .cw-music-title { font-weight: 700; color: var(--cw-ink-muted, #a8637a); }
.cw-music-tag.is-locked { padding-left: 0; background: transparent; font-weight: 600; opacity: .85; }
.cw-music-foot { margin-top: 12px; }
.cw-music-foot p { margin: 4px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--cw-ink-muted, #a8637a); }
.cw-music-foot strong { color: var(--cw-ink-soft, #be123c); }

/* ── 선물 시트 ── */
.cw-music-sheet-back {
	position: fixed; inset: 0; z-index: 1000;
	display: flex; align-items: center; justify-content: center; padding: 16px;
	background: rgba(30, 14, 36, .38);
	-webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
	animation: cw-music-fade .16s ease;
}
.cw-music-sheet {
	width: 100%; max-width: 400px; max-height: min(560px, calc(100vh - 32px));
	display: flex; flex-direction: column; overflow: hidden;
	border-radius: var(--cw-r, 20px);
	/* --cw-white 는 기본 스킨에서 반투명이라 창 뒤가 비친다 — 창은 불투명한 바탕색으로 */
	background: var(--cw-bg, #fff); color: var(--cw-ink, #881337);
	box-shadow: 0 30px 60px -24px rgba(60, 10, 40, .45), 0 0 0 1px var(--cw-line, #f3d6db);
	animation: cw-music-rise .22s cubic-bezier(.2, .8, .2, 1);
}
.cw-music-sheet-head { display: flex; align-items: center; gap: 12px; padding: 16px 12px 14px 16px; border-bottom: 1px solid var(--cw-line, #f3d6db); }
.cw-music-sheet-head > div { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.cw-music-sheet-head b { font-size: 15px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cw-music-sheet-head small { font-size: 12px; line-height: 1.45; color: var(--cw-ink-muted, #a8637a); }
.cw-music-x {
	flex: 0 0 auto; align-self: flex-start; width: 32px; height: 32px; padding: 0;
	border: 0; border-radius: 50%; background: transparent; cursor: pointer; text-shadow: none;
	color: var(--cw-ink-muted, #a8637a); font: 700 20px/1 Pretendard, sans-serif;
}
.cw-music-x:hover { background: var(--cw-tint-2, #ffe4e9); color: var(--cw-ink, #881337); }
.cw-music-search {
	display: flex; align-items: center; gap: 8px;
	margin: 14px 16px 6px; padding: 0 12px; height: 44px;
	border-radius: 12px; background: var(--cw-white, #fff); border: 1px solid var(--cw-line-strong, #fda4af);
	transition: border-color .14s ease, box-shadow .14s ease;
}
.cw-music-search:focus-within { border-color: var(--cw-accent, #e11d48); box-shadow: 0 0 0 3px rgba(225, 29, 72, .14); }
.cw-music-search svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--cw-ink-muted, #a8637a); stroke-width: 2; stroke-linecap: round; }
.cw-music-search input {
	flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; margin: 0;
	border: 0; outline: 0; box-shadow: none; background: transparent;
	color: var(--cw-ink, #881337); font: inherit; font-size: 14px;
}
.cw-music-search input::placeholder { color: var(--cw-ink-muted, #a8637a); opacity: .75; }
.cw-music-results { flex: 1 1 auto; min-height: 132px; overflow-y: auto; padding: 4px 8px 12px; }
.cw-music-results ul { list-style: none; margin: 0; padding: 0; }
.cw-music-who {
	width: 100%; display: flex; align-items: center; gap: 11px;
	padding: 8px 10px; border: 0; border-radius: 12px; background: transparent; cursor: pointer; text-shadow: none;
	color: var(--cw-ink, #881337); font: inherit; font-size: 14px; font-weight: 700; text-align: left;
}
.cw-music-who:hover, .cw-music-who:focus-visible { background: var(--cw-tint-2, #ffe4e9); outline: none; }
.cw-music-who span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cw-music-face { position: relative; display: grid; place-items: center; flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; overflow: hidden; background: var(--cw-tint-2, #ffe4e9); }
.cw-music-face b { font-size: 15px; font-weight: 800; color: var(--cw-ink-soft, #be123c); }
.cw-music-face img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.cw-music-hint { margin: 22px 12px; text-align: center; font-size: 13px; line-height: 1.6; color: var(--cw-ink-muted, #a8637a); }
.cw-music-confirm { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 24px 20px 20px; text-align: center; }
.cw-music-confirm .cw-music-face { width: 68px; height: 68px; box-shadow: 0 0 0 3px var(--cw-bg, #fff), 0 0 0 5px var(--cw-line-strong, #fda4af); }
.cw-music-confirm .cw-music-face b { font-size: 26px; }
.cw-music-confirm p { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--cw-ink, #881337); }
.cw-music-confirm small { font-size: 12px; color: var(--cw-ink-muted, #a8637a); }
.cw-music-err { margin: 6px 0 0; font-size: 13px; font-weight: 700; color: var(--cw-accent-dark, #be123c); }
.cw-music-confirm .cw-music-err { margin-top: 6px; font-size: 13px; }
.cw-music-confirm-btns { display: flex; gap: 8px; width: 100%; margin-top: 14px; }
.cw-music-btn {
	flex: 1 1 0; height: 46px; border-radius: 13px; cursor: pointer; text-shadow: none;
	border: 1px solid var(--cw-line-strong, #fda4af); background: var(--cw-white, #fff);
	color: var(--cw-ink-soft, #be123c); font: inherit; font-size: 14px; font-weight: 800;
}
.cw-music-btn:hover:not(:disabled) { background: var(--cw-tint, #fff1f3); }
.cw-music-btn.is-go { border: 0; background: var(--cw-cta-grad, #e11d48); color: var(--cw-on-accent, #fff); box-shadow: 0 12px 20px -12px rgba(190, 18, 60, .9), inset 0 1px 0 rgba(255, 255, 255, .35); }
.cw-music-btn.is-go:hover:not(:disabled) { background: var(--cw-cta-grad, #e11d48); filter: brightness(1.05); }
.cw-music-btn:disabled { opacity: .6; cursor: default; }

@keyframes cw-music-spin { to { transform: rotate(360deg); } }
@keyframes cw-music-prog { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes cw-music-fade { from { opacity: 0; } }
@keyframes cw-music-rise { from { opacity: 0; transform: translateY(14px); } }

@media (max-width: 700px) {
	.cw-music-list { grid-template-columns: 1fr; }
}
/* 하위탭이 6칸이 되면(💿 가 더해진 뒤) PC 의 790px 바에서 「내 포켓몬 12마리」가 두 줄로 깨진다.
   **6칸일 때만** 글자·여백을 한 단 줄이고 줄바꿈을 막는다. 폰(≤700px)은 cherish-items.css 가 3칸×2줄로 감는다. */
@media (min-width: 701px) {
	.cw-subtabs:has(> .cw-subtab:nth-child(6)) { gap: 4px; }
	.cw-subtabs:has(> .cw-subtab:nth-child(6)) > .cw-subtab { font-size: 14px; padding: 11px 6px; gap: 5px; white-space: nowrap; }
	.cw-subtabs:has(> .cw-subtab:nth-child(6)) > .cw-subtab small { font-size: 11px; }
}
/* 모바일은 아래에서 올라오는 시트 — 하단 탭바(cw-bnav) 위를 덮는다 */
@media (max-width: 520px) {
	.cw-music-sheet-back { align-items: flex-end; padding: 0; }
	.cw-music-sheet { max-width: none; max-height: 84vh; border-radius: var(--cw-r, 20px) var(--cw-r, 20px) 0 0; padding-bottom: env(safe-area-inset-bottom, 0); }
	.cw-music-cd { gap: 12px; padding: 11px 12px 11px 10px; }
	.cw-music-progress { left: 80px; right: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.cw-music-cd.is-live .cw-music-disc, .cw-music-sheet, .cw-music-sheet-back { animation: none; }
}