﻿/* Google FontsからNoto Sans JPを読み込み */
        @import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;500;700&display=swap');
        /* 全体のフォントと背景色を設定 */
        body { font-family: 'Noto+Sans+JP', sans-serif; background-color: #f8fafc; }
        /* ヘッダーのグラデーション背景を定義 */
        .gradient-header { background: linear-gradient(135deg, #10b981 0%, #059669 100%); }
        /* カードスタイルの共通定義 */
        .card { background: white; border-radius: 1rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
        /* チェックボックスが選択された時のラベルの色と太さを変更 */
        .checkbox-custom:checked + label { color: #059669; font-weight: 600; }
        /* SVGアイコンのサイズとマージンを調整 */
        .icon-svg { width: 32px; height: 32px; margin: 0 auto 8px; display: block; }
        /* カスタムスクロールバーの幅を設定 */
        .custom-scroll::-webkit-scrollbar { width: 4px; }
        /* スクロールバーの背景色を設定 */
        .custom-scroll::-webkit-scrollbar-track { background: #f1f1f1; }
        /* スクロールバーのつまみ部分の色と丸みを設定 */
        .custom-scroll::-webkit-scrollbar-thumb { background: #cbd5e1; border-radius: 10px; }
        /* トースト通知のフェードインアニメーション */
        @keyframes slideIn { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
        /* アニメーションを適用するクラス */
        .toast-active { animation: slideIn 0.3s ease-out forwards; }
        
        /* レシピ本文（Markdown変換後）の見出しの装飾 */
        #recipeContent h1, #recipeContent h2, #recipeContent h3 { color: #065f46; font-weight: bold; margin-top: 1.5rem; margin-bottom: 0.75rem; border-bottom: 1px solid #d1fae5; padding-bottom: 0.25rem; }
        /* H3見出しの微調整 */
        #recipeContent h3 { font-size: 1.25rem; border: none; }
        /* レシピ本文の段落のマージンと行間 */
        #recipeContent p { margin-bottom: 1rem; line-height: 1.7; }
        /* リストの余白設定 */
        #recipeContent ul, #recipeContent ol { margin-bottom: 1rem; padding-left: 1.5rem; }
        /* リスト項目のマージン */
        #recipeContent li { margin-bottom: 0.5rem; }
        /* 太字部分の色変更 */
        #recipeContent strong { color: #047857; }
        /* 印刷時のスタイル定義（不要な要素を隠してレシピのみ表示） */
        @media print {
            body { background-color: white !important; }
            header, #toastContainer, main > div:not(#recipeResult), main > section:not(#recipeResult), #actionButtons, .text-center.pt-4, aside, button, #loadingOverlay { display: none !important; }
            #recipeResult { display: block !important; position: absolute; top: 0; left: 0; width: 100%; margin: 0; padding: 0; border: none !important; box-shadow: none !important; background-color: white !important; }
            #recipeResult h2 i, .fa-print { display: none !important; }
            #recipeContent { font-size: 12pt; }
        }
