/* src/public/css/calculator/project-quote.css … 案件見積計算（原価・採算）の見た目
   💡 入力欄・ボタン・結果のカード・表は、共通の money.css・calc-common.css を使います（ダークモードは theme-dark.css の末尾） */

/* 求めるもの（見積金額／採算の確認） */
.pq-mode { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: 0 0 12px; }
.pq-mode-label { font-weight: bold; color: #1e3c72; }
.pq-mode label { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; }

/* 見出しが2行になった欄があっても、入力欄の高さをそろえる */
#pq-form > .mc-grid { align-items: end; }

/* いちばん上のカードは、1行を広く使う */
.mc-cards.pq-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pq-card-main { grid-column: 1 / -1; }
.pq-card-main .mc-card-val { font-size: 2rem; }
.pq-card-main .mc-card-val.is-loss { color: #b91c1c; }

/* 赤字・実質時間単価の注意 */
.pq-warn { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: #fef2f2; color: #991b1b; font-size: 0.9rem; }

/* 内訳の表 */
.pq-bd-title { margin: 16px 0 6px; font-size: 1rem; }
.mc-table.pq-bd tbody th { font-weight: normal; white-space: normal; overflow-wrap: anywhere; }
.mc-table.pq-bd .pq-bd-total th, .mc-table.pq-bd .pq-bd-total td { font-weight: bold; border-top: 2px solid #cbd5e1; }
.pq-bd-sub { display: block; font-size: 0.8rem; color: #64748b; }

/* 利益率ごとの表 */
.mc-table.pq-rate-table thead th { white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
.mc-table tr.is-current th, .mc-table tr.is-current td { font-weight: bold; }

@media (max-width: 600px) {
    .mc-cards.pq-cards { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .mc-form .pq-opt-grid { grid-template-columns: 1fr; }
    .pq-card-main .mc-card-val { font-size: 1.7rem; }
    .mc-table.pq-rate-table th, .mc-table.pq-rate-table td { padding-left: 3px; padding-right: 3px; }
}