/* src/public/css/calculator/hourly-rate.css … 時間単価計算（フリーランス）の見た目
   💡 入力欄・ボタン・結果のカード・表は、共通の money.css・calc-common.css を使います（ダークモードは theme-dark.css の末尾） */

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

/* 請求できる時間の割合の例のボタン（入力の並びの下） */
.hr-chips { align-items: center; margin: -4px 0 12px; }
.hr-chips-label { font-size: 0.85rem; color: #475569; }

/* いちばん上のカード（最低時間単価）は、1行を広く使う（ほかの計算と同じ） */
.mc-cards.hr-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hr-card-main { grid-column: 1 / -1; }
.hr-card-main .mc-card-val { font-size: 2rem; }

/* 割合ごとの表：3列なので、スマホでも見出しを折り返して枠に収める */
.mc-table.hr-rate-table thead th { white-space: normal; overflow-wrap: anywhere; hyphens: auto; }

/* 内訳の表（必要な月の売上の内訳と、請求できる時間） */
.hr-bd-title { margin: 16px 0 6px; font-size: 1rem; }
.mc-table.hr-bd tbody th { font-weight: normal; white-space: normal; overflow-wrap: anywhere; }
.mc-table.hr-bd .hr-bd-total th, .mc-table.hr-bd .hr-bd-total td { font-weight: bold; border-top: 2px solid #cbd5e1; }
.hr-bd-sub { display: block; font-size: 0.8rem; color: #64748b; }

/* 割合ごとの表：いまの割合の行（色は共通の is-current） */
.mc-table tr.is-current th, .mc-table tr.is-current td { font-weight: bold; }

@media (max-width: 600px) {
    .mc-cards.hr-cards { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .mc-form .hr-opt-grid { grid-template-columns: 1fr; }
    /* 共通の .mc-chips はスマホで1行の横スクロールになるので、このツールは折り返して全部見せる */
    .mc-form .hr-chips { flex-wrap: wrap; overflow-x: visible; }
    .hr-chips-label { flex: 0 0 100%; }
    .mc-table.hr-rate-table th, .mc-table.hr-rate-table td { padding-left: 3px; padding-right: 3px; }
    .hr-card-main .mc-card-val { font-size: 1.7rem; }
}