/* 사이드바 "I ♥ 캡슐" 위젯 + SNS 줄 — _capsule_widget.html (좌/우 사이드바 공용, 폭 180px) */
.cw {
	position: relative;
	width: 180px;
	margin-top: 6px;
	font-family: 'Nanum Gothic', sans-serif;
}
.cw-head {
	position: relative;
	height: 82px;              /* 카드 윗선 = 손 그림(108x87) 높이의 94% — 손가락 중간 */
}
.cw-ilove {
	position: absolute;
	left: 8px;
	top: 14px;
	width: 52px;
}
/* 머리(cw_head 1109x1066): 귀 폭·귀 높이를 손 그림(cw_peek_hands 1101x888, 폭 120px)의 얼굴에 맞춘 값 */
.cw-headimg {
	position: absolute;
	left: 61.1px;              /* 얼굴 가운데 = 두 손 가운데 */
	top: -3px;
	z-index: 0;                /* 카드 뒤 — 턱 아래는 카드에 가려짐 */
	width: 119.8px;            /* 카드선 높이에서 얼굴 폭이 두 손 바깥까지 닿도록(틈 없음) */
	transform-origin: 50% 96%; /* 목 */
	animation: cw-sway 4s ease-in-out infinite;
}
.cw-hands {
	position: absolute;
	right: 8px;                /* 머리(귀)가 사이드바 밖으로 잘리지 않게 */
	top: 0;
	z-index: 2;                /* 카드 테두리를 덮음, 고정 */
	width: 108px;
}
@keyframes cw-sway {
	0%, 100% { transform: rotate(0); }
	25% { transform: rotate(-3deg); }
	75% { transform: rotate(3deg); }
}
@media (prefers-reduced-motion: reduce) {
	.cw-headimg { animation: none; }
}
.cw-card {
	position: relative;
	z-index: 1;
	padding: 14px 8px 8px;
	border: 1px solid #dbe4ec;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(30, 43, 69, .06);
}
.cw-mine {
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 0 4px 10px;
	color: #1e2b45;
	text-decoration: none !important;
}
.cw-pill { flex: none; width: 30px; height: 15px; }
.cw-label { font-size: 13px; font-weight: 700; color: #6b7a90; }
.cw-num { font-size: 16px; font-weight: 800; letter-spacing: -.3px; color: #1e2b45; }
.cw-gap { font-size: 12px; font-style: normal; font-weight: 700; color: #9aa6b5; }
.cw-gap.is-up { color: #e5484d; }
.cw-btns { display: flex; gap: 6px; }
.cw-btns a {
	flex: 1;
	padding: 7px 0;
	border: 1px solid #dbe4ec;
	border-radius: 8px;
	background: #f7f9fb;
	color: #1e2b45;
	font-size: 13px;
	font-weight: 700;
	text-align: center;
	text-decoration: none !important;
	transition: background .2s, border-color .2s;
}
.cw-btns a:hover { border-color: #38a8bd; background: #eaf6f8; }
.cw-sns {
	display: flex;
	justify-content: space-around;
	margin-top: 6px;
	padding: 7px 6px;
	border: 1px solid #dbe4ec;
	border-radius: 12px;
	background: #fff;
	box-shadow: 0 2px 8px rgba(30, 43, 69, .06);
}
.cw-sns a { display: block; line-height: 0; transition: transform .2s; }
.cw-sns a:hover { transform: translateY(-2px); }
.cw-sns img { width: 26px; height: 26px; }