/**
 * Renewal /youtube モード別テーマCSS
 *
 * 移植元: tmp/mock/app.js の modesData.youtube（themeColor, indicatorColor 等）。
 * [data-renewal-layout] 配下かつ [data-mode="youtube"] スコープに限定する
 * （tmp/front_layout_unification_plan.md 5章 CSSスコープ規約）。
 */

/* サブナビのヘッダー（インジケーター・タイトル）: youtubeページ表示時 */
[data-renewal-layout] nav[data-mode="youtube"] #nav-indicator {
	background-color: #dc2626;
}

/* CTAボタン（front_nav_items type=button, design=primary/secondary）: youtubeページ表示時 */
[data-renewal-layout] nav[data-mode="youtube"] .nav-cta-btn[data-design="primary"] {
	background: linear-gradient(to right, #dc2626, #e11d48);
	color: #fff;
	box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.2);
}
[data-renewal-layout] nav[data-mode="youtube"] .nav-cta-btn[data-design="primary"]:hover {
	background: linear-gradient(to right, #ef4444, #f43f5e);
}
[data-renewal-layout] nav[data-mode="youtube"] .nav-cta-btn[data-design="secondary"] {
	background-color: #fff;
	color: #b91c1c;
	border: 1px solid #fecaca;
}
[data-renewal-layout] nav[data-mode="youtube"] .nav-cta-btn[data-design="secondary"]:hover {
	background-color: #fef2f2;
}

/* ページトップへ戻るボタン: youtubeモードのアクセントカラー（nav-indicatorと同色）を適用 */
[data-renewal-layout][data-renewal-mode="youtube"] .pagetop {
	background-color: #dc2626;
	border: 2px solid #fff;
}
[data-renewal-layout][data-renewal-mode="youtube"] .pagetop:hover {
	background-color: #b91c1c;
}