/* src/public/css/calculator/handmade_price.css … ハンドメイド販売価格計算（/calculator/handmade-price）
   💡 入力欄・カード・表は money.css（mc-…）。ここは「求めるもの」の切り替えと、内訳の表・赤字の案内だけ */

/* 求めるもの（2つのボタンのように並べる） */
.hp-modes { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 0 0 10px; padding: 0; border: 0; min-width: 0; }
.hp-modes legend { float: left; width: 100%; margin: 0 0 4px; padding: 0; font-weight: bold; font-size: 0.9rem; color: #334155; }
.hp-modes label { position: relative; flex: 1 1 0; min-width: 0; margin: 0; cursor: pointer; }
.hp-modes input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.hp-modes span {
    display: block; padding: 8px 6px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff;
    text-align: center; font-weight: bold; font-size: 0.92rem; color: #334155; line-height: 1.3; overflow-wrap: anywhere;
}
.hp-modes input:checked + span { border-color: #2a5298; background: #2a5298; color: #fff; }
.hp-modes input:focus-visible + span { outline: 3px solid #93c5fd; outline-offset: 2px; }

.hp-hourly { display: block; margin-top: 4px; font-weight: bold; color: #15803d; font-variant-numeric: tabular-nums; }
.hp-hourly:empty { display: none; }
#hp-main-val.is-loss, .hp-hourly.is-loss { color: #b91c1c; }
.hp-loss { margin: 10px 0 0; padding: 8px 12px; border-radius: 8px; background: #fef2f2; color: #991b1b; font-weight: bold; font-size: 0.9rem; }

/* 内訳の表 */
.hp-breakdown { margin-top: 12px; }
.hp-caption { caption-side: top; text-align: left; font-weight: bold; font-size: 0.9rem; padding: 0 0 6px; color: #334155; }
.hp-breakdown th[scope="row"] { white-space: normal; overflow-wrap: break-word; }
#hp-quick th, #hp-quick td { white-space: nowrap; }
.hp-breakdown tr.is-price th, .hp-breakdown tr.is-price td { font-weight: bold; }
.hp-breakdown tr.is-sub th, .hp-breakdown tr.is-sub td { font-weight: bold; background: #f8fafc; }
.hp-breakdown tr.is-total th, .hp-breakdown tr.is-total td { font-weight: bold; background: #eef3fb; }
.hp-breakdown tr.is-loss td { color: #b91c1c; }
#hp-message { overflow-wrap: anywhere; }
.mc-message.is-error { color: #b91c1c; }
#hp-quick tr.is-current th, #hp-quick tr.is-current td { background: #eef3fb; font-weight: bold; }

/* スマホでは、詳細オプションの欄を1列に（選択肢が切れないように） */
@media (max-width: 480px) {
    .pc-options .mc-grid { grid-template-columns: minmax(0, 1fr); }
}

/* ダークモード */
:root[data-theme="dark"] .hp-modes legend,
:root[data-theme="dark"] .hp-caption { color: var(--dk-text, #e2e8f0); }
:root[data-theme="dark"] .hp-modes span { background: var(--dk-surface, #1e293b); border-color: var(--dk-border, #334155); color: var(--dk-text, #e2e8f0); }
:root[data-theme="dark"] .hp-modes input:checked + span { background: #36518a; border-color: #7aa7e9; color: #fff; }
:root[data-theme="dark"] .hp-hourly { color: #4ade80; }
:root[data-theme="dark"] #hp-main-val.is-loss,
:root[data-theme="dark"] .hp-hourly.is-loss { color: #f0787f; }
:root[data-theme="dark"] .hp-loss { background: #3b1d22; color: #fca5a5; }
:root[data-theme="dark"] .hp-breakdown tr.is-sub th,
:root[data-theme="dark"] .hp-breakdown tr.is-sub td { background: var(--dk-raised, #172033); }
:root[data-theme="dark"] .hp-breakdown tr.is-total th,
:root[data-theme="dark"] .hp-breakdown tr.is-total td,
:root[data-theme="dark"] #hp-quick tr.is-current th,
:root[data-theme="dark"] #hp-quick tr.is-current td { background: #1c2c4a; }
:root[data-theme="dark"] .hp-breakdown tr.is-loss td { color: #f0787f; }
:root[data-theme="dark"] .mc-message.is-error { color: var(--dk-danger, #f0787f); }