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

/* 等級の行：番号・名前・等価係数・数量・消す（スマホでも1行） */
.gc-head, .gc-row { display: grid; grid-template-columns: 1.4em minmax(0, 1.3fr) minmax(0, 0.9fr) minmax(0, 1.3fr) 2.2em; gap: 6px; align-items: center; }
.gc-head { font-size: 0.82rem; font-weight: bold; color: #475569; margin: 4px 0 4px; align-items: end; }
/* 見出しは長い言語（ドイツ語など）でも重ならないよう、折り返す */
.gc-head span { min-width: 0; overflow-wrap: anywhere; hyphens: auto; line-height: 1.25; }
.gc-rows { display: flex; flex-direction: column; gap: 6px; }
.gc-row input { width: 100%; min-width: 0; box-sizing: border-box; padding: 8px; border: 1px solid #ccc; border-radius: 6px; font-size: 1rem; }
.gc-row .gc-coef, .gc-row .gc-qty { text-align: right; }
.gc-no { font-size: 0.85rem; color: #64748b; text-align: center; }
.gc-del { width: 2.2em; height: 2.2em; border: 1px solid #fca5a5; border-radius: 6px; background: #fff; color: #dc2626; cursor: pointer; }
.gc-del:disabled { opacity: 0.35; cursor: not-allowed; }
.gc-add-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 10px 0 14px; }
.gc-add { padding: 8px 14px; border: 1px dashed #94a3b8; border-radius: 6px; background: #fff; color: #2a5298; font-weight: bold; cursor: pointer; }
.gc-add:disabled { opacity: 0.5; cursor: not-allowed; }
.gc-add-note { font-size: 0.85rem; color: #64748b; }

/* 1個あたりの原価（等級ごと） */
.gc-card-main { margin-bottom: 12px; }
.gc-unit-list { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.gc-unit-list li { display: flex; justify-content: space-between; gap: 12px; font-size: 1.15rem; }
.gc-unit-name { font-weight: bold; overflow-wrap: anywhere; min-width: 0; }
.gc-unit-val { font-weight: bold; color: #1e3c72; white-space: nowrap; }
.gc-adjust-note { margin: 0 0 10px; font-size: 0.88rem; color: #92400e; }
.gc-table tbody th, .gc-table tfoot th { white-space: normal; overflow-wrap: anywhere; font-weight: normal; }
.gc-table tfoot td, .gc-table tfoot th { font-weight: bold; }

@media (max-width: 480px) {
    .gc-head, .gc-row { grid-template-columns: 1.1em minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1.2fr) 2em; gap: 4px; }
    /* 16px より小さいと、iPhone が入力のときに画面を拡大する */
    .gc-row input { padding: 7px 5px; font-size: 16px; }
    .gc-head, .gc-row { grid-template-columns: 1.1em minmax(0, 1.1fr) minmax(0, 0.8fr) minmax(0, 1.2fr) 32px; }
    .gc-del { width: 32px; height: 32px; }
    .gc-unit-list li { font-size: 1.05rem; }
    .mc-form .gc-opt-grid { grid-template-columns: 1fr; }
}