/* =========================================================
 * lyrics.css … 歌詞（新方式）の表示
 * 使用：曲のページ・歌詞だけのページ（/kashi/）・プレイリスト・一覧の抜粋・切り替えのウィジェット
 * 組み立ては js/lyrics.js
 * ========================================================= */


/* ---------------------------------------------------------
 * 表示する内容（チェックボックスのアコーディオン）
 * --------------------------------------------------------- */
.sl-picker {
	margin: .8em 0;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
}
.sl-picker__summary {
	cursor: pointer;
	padding: .55em .9em;
	font-size: .9em;
	color: #555;
	list-style: none;
}
.sl-picker__summary::-webkit-details-marker { display: none; }
.sl-picker__summary::before { content: "▶ "; font-size: .8em; }
.sl-picker[open] .sl-picker__summary::before { content: "▼ "; }
.sl-picker__now { font-weight: bold; color: #333; }
.sl-picker__body { padding: .2em .9em .8em; }
.sl-picker__row { display: flex; flex-wrap: wrap; gap: .2em 1em; padding: .35em 0; border-bottom: 1px dashed #eee; }
.sl-picker__row label { font-size: .9em; white-space: nowrap; cursor: pointer; }
.sl-picker__set { font-size: .9em; font-weight: bold; white-space: nowrap; color: #555; }
.sl-picker__buttons { margin-top: .6em; display: flex; flex-wrap: wrap; gap: .5em; }
.sl-picker__buttons button,
.sl-copy__btn {
	padding: 4px 12px;
	border: 1px solid #ccc;
	border-radius: 4px;
	background: #fafafa;
	cursor: pointer;
	font-size: .85em;
}


/* ---------------------------------------------------------
 * 本文
 * --------------------------------------------------------- */
.sl-sep { margin: .6em 0 !important; }

.sl-display {
	overflow-x: auto;
	max-width: none !important;
	white-space: pre;   /* 空白（コードの位置合わせ）をそのまま */
	line-height: 1.6;
}
.sl-group { margin-bottom: .45em; }
.sl-blank { height: .9em; }
.sl-line { min-height: 1.2em; }
.sl-chord { color: var(--color_main, #1e4d8c); font-weight: 600; }
.sl-hira,
.sl-roma { font-size: .85em; color: #666; }
.sl-empty { color: #999; font-size: .9em; white-space: normal; }
.sl-noscript { white-space: pre; }

.sl-copy { margin: .4em 0 1.2em; }
.sl-copy__msg { margin-left: 8px; font-size: .9em; }


/* ---------------------------------------------------------
 * 一覧の抜粋（カードの中）
 * --------------------------------------------------------- */
.sl-list .sl-sep { display: none; }
.sl-list .sl-display { font-size: .85em; line-height: 1.45; }
.sl-list .sl-group { margin-bottom: 1px; }
.sl-list .sl-blank { height: .6em; }


/* ---------------------------------------------------------
 * 歌詞だけのページ（文字を小さくして全体を入れる）
 * --------------------------------------------------------- */
.sl-kashi .sl-display { font-size: .9em; }


/* ---------------------------------------------------------
 * 切り替えのウィジェット（サイドバー・スマホ開閉メニュー）
 * 歌詞のないページでは隠す（common.css の .widget_sanbi_display_switch も参照）
 * --------------------------------------------------------- */
.sl-switch__group { margin-bottom: .8em; }
.sl-switch__title { font-size: .8em; color: #777; margin-bottom: .3em; }
.sl-switch__group { display: flex; flex-wrap: wrap; gap: 0; }
.sl-switch__title { flex: 0 0 100%; }
.sl-switch button {
	flex: 1;
	padding: 8px 6px;
	border: 1px solid #ccc;
	background: #fff;
	font-size: 12px;
	cursor: pointer;
	margin-left: -1px;
}
.sl-switch button:first-of-type { margin-left: 0; border-radius: 4px 0 0 4px; }
.sl-switch button:last-of-type { border-radius: 0 4px 4px 0; }
.sl-switch button.is-active { background: #d4792d; border-color: #d4792d; color: #fff; font-weight: bold; }


/* ---------------------------------------------------------
 * プレイリストの中（区切り線は出さない）
 * --------------------------------------------------------- */
.sl-playlist .sl-sep { display: none; }