/* src/public/css/calculator/unit-cost.css … 製造原価計算（1個あたり）の見た目
   💡 入力欄・ボタン・結果のカード・表は、共通の money.css・calc-common.css を使います（ダークモードは theme-dark.css の末尾） */

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

.mc-cards.uc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.uc-card-main { grid-column: 1 / -1; }
.uc-card-main .mc-card-val { font-size: 2rem; }

.uc-table-title { margin: 16px 0 4px; font-size: 1rem; }
.uc-good { margin: 0 0 6px; font-size: 0.88rem; color: #475569; }
.mc-table.uc-table thead th, .mc-table.uc-loss-table thead th { white-space: normal; overflow-wrap: anywhere; hyphens: auto; }
.mc-table.uc-table tbody th, .mc-table.uc-table tfoot th { font-weight: normal; white-space: normal; overflow-wrap: anywhere; }
.mc-table.uc-table tfoot th, .mc-table.uc-table tfoot td { font-weight: bold; border-top: 2px solid #cbd5e1; }
.uc-gap-note { margin-top: 8px; font-size: 0.85rem; color: #92400e; }
.mc-table.uc-loss-table tbody th { font-weight: normal; white-space: normal; }
.mc-table tr.is-current th, .mc-table tr.is-current td { font-weight: bold; }

@media (max-width: 600px) {
    .mc-cards.uc-cards { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .mc-form .uc-opt-grid { grid-template-columns: 1fr; }
    .uc-card-main .mc-card-val { font-size: 1.7rem; }
    /* 不良・ロスの例のボタンは、欄の幅が狭いので折り返す（横に隠れない） */
    .mc-form .mc-chips.uc-chips { flex-wrap: wrap; overflow: visible; }
    .mc-table.uc-table th, .mc-table.uc-table td { padding-left: 4px; padding-right: 4px; }
}