@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ==========================================
   通常表示時（WEBブラウザ画面用）の絶対防御
   ※インライン指定を外したため、ここで通常のサイズを確実に固定します
   ========================================== */
.tco-wrapper { font-family: 'Inter', sans-serif; }

.slide-in { animation: slideIn 0.5s ease-out; }
@keyframes slideIn {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.checkbox-wrapper input:checked+div { background-color: #2563eb; border-color: #2563eb; }
.checkbox-wrapper input:checked+div svg { display: block; }
.usecase-radio:checked + div { border-color: #2563eb; background-color: #eff6ff; }
.usecase-radio:checked + div .uc-icon { color: #2563eb; }

.modal-bg { background-color: rgba(0, 0, 0, 0.5); }

/* 通常表示時のWEB画面グラフの高さコンテナを独立固定（通常画面の潰れバグを解消） */
.chart-wrapper-box .chart-container {
    height: 400px !important;
    width: 100% !important;
    position: relative !important;
    display: block !important;
}

/* ==========================================
   A4横（Landscape）専用の絶対印刷レイアウト
   ※WEB画面用の余白クラスやモーダルの残骸を印刷時に完全遮断します
   ========================================== */
@media print {
    @page { 
        size: A4 landscape; /* A4横に強制固定 */
        margin: 8mm 10mm !important; /* 印刷時の余白を最適化 */
    }
    
    /* 印刷に不要なWEB用ボタン、背景の影、警告帯を完全消去 */
    .no-print, #modalBg, #evidenceModal button, .bg-yellow-50, header p { 
        display: none !important; 
    }
    
    /* カラーと背景の印刷強制固定 */
    .tco-wrapper { background-color: white !important; color: black !important; padding-bottom: 0 !important; }
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    
    /* Tailwindの自動レイアウト・余白クラスを印刷時だけ完全に「強制初期化」して干渉を完全ブロック */
    .max-w-7xl, .space-y-8, .grid, .print-contents-split, #tco-p1, #tco-p2, #tco-p3 {
        display: block !important;
        margin: 0 !important;
        padding: 0 !important;
        gap: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        float: none !important;
    }

    header { width: 100% !important; margin-bottom: 4px !important; border-bottom: 1px solid #e5e7eb !important; padding-bottom: 2px !important; }
    header h1 { font-size: 18px !important; }

    /* ------------------------------------------
       PAGE 1：条件選択 ＋ 適合度診断
       ------------------------------------------ */
    #tco-p1 {
        display: block !important;
        width: 100% !important;
        page-break-before: avoid !important;
        page-break-after: always !important; /* ★ここで絶対に2ページ目へ強制改ページ */
        break-after: page !important;
    }
    #printStep1 {
        width: 48% !important;
        float: left !important;
        padding: 8px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 6px;
        margin-bottom: 6px !important;
    }
    #printDifficulty {
        width: 48% !important;
        float: left !important;
        clear: left !important;
        padding: 8px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 6px;
        margin-top: 0 !important;
    }
    #printStep2 {
        width: 50% !important;
        float: right !important;
        padding: 8px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 6px;
        margin-bottom: 6px !important;
    }
    #printStep3 {
        width: 50% !important;
        float: right !important;
        clear: right !important;
        padding: 8px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 6px;
    }
    
    /* 1ページ目のチェックボックス（margin-top）のガタツキを完全リセットして横2列化 */
    .print-checkbox-2col { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 2px 4px !important; }
    .print-checkbox-2col label { margin: 0 !important; padding: 2px !important; }
    .print-office-box { grid-column: 1 / 3 !important; padding-left: 12px !important; margin-top: 2px !important; }
    
    #tco-p1 h2, #tco-p1 h3 { font-size: 11px !important; margin-bottom: 4px !important; font-weight: bold !important; }
    #tco-p1 p, #tco-p1 span, #tco-p1 label, input, select { font-size: 9px !important; line-height: 1.1 !important; }
    #tco-p1 label p { display: none !important; } /* 長文説明をカットしてスペースを確保 */
    #difficultyBox { padding: 4px !important; }
    #difficultyStars { font-size: 14px !important; margin-bottom: 1px !important; color: #16a34a !important; }
    #difficultyLabel { font-size: 12px !important; }

    /* ------------------------------------------
       PAGE 2：シミュレーション結果 ＋ つぶれない独立大画面グラフ
       ------------------------------------------ */
    #tco-p2 {
        display: block !important;
        width: 100% !important;
        clear: both !important;
        page-break-before: avoid !important;
        page-break-after: always !important; /* ★ここで絶対に3ページ目へ強制改ページ */
        break-after: page !important;
    }
    .result-section {
        display: block !important;
        width: 100% !important;
        padding: 12px !important;
        border: 1px solid #e5e7eb !important;
        border-radius: 6px;
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        box-shadow: none !important;
        page-break-inside: avoid !important;
    }
    .result-section h2 { font-size: 13px !important; margin-bottom: 4px !important; font-weight: bold !important; }
    
    /* 金額表示の帯を無駄な余白のないコンパクトな横1行に縮小（背景グレーで統一） */
    .result-section .print-summary-row { 
        display: flex !important; 
        flex-direction: row !important; 
        justify-content: center !important; 
        gap: 40px !important; 
        margin-bottom: 6px !important; 
        padding: 6px !important; 
        background: #f8fafc !important; 
        border-radius: 6px !important;
        border: none !important;
    }
    .result-section .text-4xl { font-size: 22px !important; font-weight: bold !important; }
    .result-section .text-xl { font-size: 11px !important; }
    .print-sep-line { display: block !important; height: 24px !important; width: 1px !important; background: #cbd5e1 !important; margin: 0 !important; }
    
    /* ★物理的高さのダイエット：印刷時のグラフコンテナサイズを縦「240px」、横「85%」の黄金比に固定。
       これで縦の押し潰れや、左右の「ピコスト」文字化けは発生しなくなります */
    .chart-wrapper-box .chart-container { 
        height: 240px !important; 
        width: 85% !important; 
        margin: 0 auto !important;
        display: block !important; 
    }
    canvas { max-height: 240px !important; width: 100% !important; }
    .print-note { font-size: 9.5px !important; margin-top: 4px !important; text-align: center !important; display: block !important; color: #64748b !important; }

    /* ------------------------------------------
       PAGE 3：白紙ページ（虚無）が消滅する算出根拠マスター表
       ------------------------------------------ */
    #tco-p3 {
        display: block !important;
        width: 100% !important;
        clear: both !important;
        page-break-before: avoid !important;
        page-break-after: avoid !important;
    }
    
    /* ★最重要：白紙の真犯人だったWEBモーダルの固定配置（fixed）や「min-h-screen（透明な巨大な壁）」を印刷時だけ完全に「強制解除」 */
    #evidenceModal, .print-modal-reset, .print-modal-content {
        display: block !important;
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: auto !important; /* 透明な壁を強制消去 */
        height: auto !important;
        transform: none !important;
        box-shadow: none !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    #evidenceModal .bg-white { padding: 0 !important; margin: 0 !important; border: none !important; }
    #evidenceModal h3 { font-size: 13px !important; font-weight: bold; margin-bottom: 4px !important; color: #1e293b !important; }
    #evidenceModal p { font-size: 10px !important; margin-bottom: 4px !important; }
    
    /* テーブルの横幅を100%フルに広げ、1文字自動改行のガタガタを1行でピシッと解決 */
    #evidenceModal table { width: 100% !important; font-size: 9.5px !important; border-collapse: collapse !important; margin-bottom: 6px !important; }
    #evidenceModal th, #evidenceModal td { padding: 5px 8px !important; border: 1px solid #e5e7eb !important; line-height: 1.2 !important; }
    
    /* 注記と補足説明も3ページ目の下部にすっぽり綺麗に収め、4枚目の白紙化を完全阻止 */
    #evidenceModal h4 { font-size: 10px !important; font-weight: bold !important; margin: 2px 0 !important; }
    #evidenceModal ul { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 2px 12px !important; font-size: 8.5px !important; padding: 0 4px !important; }
    #evidenceModal ul li { margin-bottom: 0 !important; line-height: 1.1 !important; }
    #evidenceModal .bg-blue-50 { padding: 6px !important; font-size: 8.5px !important; margin-top: 4px !important; line-height: 1.2 !important; }
}