/* ボタンの大きさは画面幅に合わせて自動で変わります（clamp） */
.slk {
	--slk-fs: clamp(1.3rem, 1.1rem + 1.4vw, 1.7rem);
	margin: 2.2em 0;
	text-align: center;
}
.slk-size-s  { --slk-fs: clamp(.95rem, .9rem + .5vw, 1.05rem); }
.slk-size-m  { --slk-fs: clamp(1.1rem, 1rem + .8vw, 1.3rem); }
.slk-size-l  { --slk-fs: clamp(1.3rem, 1.1rem + 1.4vw, 1.7rem); }
.slk-size-xl { --slk-fs: clamp(1.5rem, 1.2rem + 2.2vw, 2.1rem); }

.slk-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .55em;
	box-sizing: border-box;
	max-width: 100%;
	min-height: 2.9em;
	padding: .6em 1.7em;
	font-size: var(--slk-fs);
	font-weight: 600;
	line-height: 1.2;
	color: #c0392b;
	background: #fff;
	border: 2px solid #c0392b;
	border-radius: 999px;
	cursor: pointer;
	transition: background .15s, color .15s, transform .1s;
	-webkit-tap-highlight-color: transparent;
}
.slk-btn:hover { background: #fdf0ee; }
.slk-btn:active { transform: scale(.96); }
.slk-btn:disabled { opacity: .6; cursor: wait; }
.slk-btn.is-liked { color: #fff; background: #c0392b; }
.slk-btn:focus-visible { outline: 3px solid rgba(192, 57, 43, .4); outline-offset: 2px; }
.slk-icon { font-size: 1.25em; line-height: 1; }
.slk-count { min-width: 1.2em; font-variant-numeric: tabular-nums; }

/* スマホではボタンを横いっぱい近くまで広げる */
@media (max-width: 480px) {
	.slk-btn { width: min(100%, 22em); }
}

/* 「いいね」した常連のアバター */
.slk-faces {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: .35em;
	margin-top: .9em;
	font-size: calc(var(--slk-fs) * .85);
}
.slk-faces:empty { display: none; }
.slk-face {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2em;
	height: 2em;
	overflow: hidden;
	color: #fff;
	background: #c0392b;
	border: 2px solid #fff;
	border-radius: 50%;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .15);
	cursor: default;
}
.slk-face img { display: block; width: 100%; height: 100%; margin: 0; object-fit: cover; }
.slk-initial { font-size: .9em; font-weight: 700; line-height: 1; }
.slk-more { align-self: center; font-size: .7em; color: #666; }
.slk-caption { min-height: 1.4em; margin-top: .3em; font-size: .85rem; color: #666; }

/* 常連ログイン */
.slk-member { margin-top: .4em; font-size: .85rem; color: #666; }
.slk-member a { color: inherit; text-decoration: underline; }
.slk-login { display: flex; flex-wrap: wrap; justify-content: center; gap: .5em; margin-top: .6em; }
.slk-pass {
	box-sizing: border-box;
	width: 12em;
	max-width: 100%;
	padding: .5em .7em;
	font-size: 16px; /* iOSで入力時に拡大されないように */
	border: 1px solid #bbb;
	border-radius: 6px;
}
.slk-login-go {
	padding: .5em 1.1em;
	font-size: .95rem;
	color: #fff;
	background: #c0392b;
	border: 0;
	border-radius: 6px;
	cursor: pointer;
}
.slk-login-go:disabled { opacity: .6; }
.slk-login-msg { flex-basis: 100%; min-height: 1.2em; color: #c0392b; }