/* ==================== 容量別シミュレーション比較 ==================== */

.capacity-compare-body {
    padding: 16px 4px 4px;
}

.cc-lead {
    margin: 0 0 14px;
    color: #4B5563;
    font-size: 13.5px;
    line-height: 1.7;
}

/* 軸タブ */
.cc-tabs {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}

.cc-tab {
    appearance: none;
    border: 2px solid #D1D5DB;
    background: #FFFFFF;
    color: #374151;
    border-radius: 999px;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.15s ease;
}

.cc-tab:hover {
    border-color: #93C5FD;
}

.cc-tab.active {
    border-color: #2563EB;
    background: #EFF6FF;
    color: #1D4ED8;
}

/* コントロール行 */
.cc-controls {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 18px;
    padding: 12px 14px;
    background: #F8FAFC;
    border: 1px solid #E2E8F0;
    border-radius: 10px;
    margin-bottom: 12px;
}

/* 候補リスト（行ごとに容量・機種を編集できる） */
.cc-cand-list {
    flex-basis: 100%;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.cc-cand-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 8px;
    background: #FFFFFF;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    padding: 7px 10px;
    font-size: 13px;
}

.cc-cand-row.cc-cand-current {
    border-color: #F59E0B;
    background: #FFFBEB;
}

.cc-cand-swatch {
    width: 13px;
    height: 13px;
    border-radius: 3px;
    flex: 0 0 auto;
}

.cc-cand-label {
    font-weight: 700;
    color: #92400E;
}

.cc-cand-part-label {
    font-weight: 700;
    color: #334155;
    white-space: nowrap;
}

.cc-cand-unit {
    color: #64748B;
    font-size: 12px;
}

.cc-cand-row input[type="number"] {
    width: 84px;
    padding: 5px 8px;
    border: 1.2px solid #CBD5E1;
    border-radius: 6px;
    font-size: 13px;
    text-align: right;
}

.cc-cand-row select {
    padding: 5px 8px;
    border: 1.2px solid #CBD5E1;
    border-radius: 6px;
    font-size: 12.5px;
    background: #FFFFFF;
    min-width: 0;
}

.cc-cand-row select.cc-cand-maker {
    max-width: 140px;
}

.cc-cand-row select.cc-cand-model {
    max-width: 300px;
    flex: 1 1 180px;
}

.cc-cand-remove {
    appearance: none;
    border: none;
    background: transparent;
    color: #94A3B8;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    margin-left: auto;
}

.cc-cand-remove:hover {
    color: #DC2626;
}

/* 追加・単価コントロール */
.cc-add,
.cc-unit {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #475569;
}

.cc-add input[type="number"],
.cc-unit input[type="number"] {
    width: 110px;
    padding: 7px 10px;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    font-size: 14px;
}

.cc-add select {
    max-width: 320px;
    padding: 7px 10px;
    border: 1.5px solid #CBD5E1;
    border-radius: 8px;
    font-size: 13px;
    background: #FFFFFF;
}

.cc-add select.cc-add-maker {
    max-width: 160px;
}

.cc-add-btn {
    appearance: none;
    border: none;
    background: #2563EB;
    color: #FFFFFF;
    border-radius: 8px;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
}

.cc-add-btn:hover {
    background: #1D4ED8;
}

.cc-add-limit {
    font-size: 12.5px;
    color: #94A3B8;
}

.cc-unit-label {
    font-weight: 700;
    color: #334155;
}

.cc-unit-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.cc-unit-item + .cc-unit-item {
    margin-left: 12px;
}

.cc-add-part-label {
    font-weight: 700;
    color: #334155;
}

.cc-add-cross {
    font-weight: 700;
    color: #94A3B8;
    padding: 0 2px;
}

/* ステータス */
.cc-status {
    min-height: 20px;
    font-size: 13px;
    font-weight: 700;
    color: #2563EB;
    margin-bottom: 4px;
}

/* 比較表
 * monthly-generation.css の .table-scroll thead th / tbody td より
 * 後勝ち・同等以上の詳細度になるよう、thead/tbody を明示する。 */
table.cc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13.5px;
    margin-top: 14px;
}

.cc-table thead th,
.cc-table tbody td {
    border: 1px solid #E2E8F0;
    padding: 9px 12px;
    text-align: center;
    white-space: nowrap;
}

.cc-table thead th {
    background: #1E3A5F;
    color: #FFFFFF;
    font-weight: 700;
    font-size: 12.5px;
}

.cc-table thead th small {
    font-weight: 400;
    font-size: 10.5px;
    opacity: 0.85;
}

.cc-table tbody td.cc-col-label {
    text-align: left;
    font-weight: 700;
    color: #1F2937;
    font-size: 13.5px;
}

.cc-table tbody td.cc-col-label small {
    font-weight: 400;
    color: #6B7280;
    font-size: 11px;
    white-space: normal;
}

.cc-table tbody td.text-right {
    text-align: right;
    font-size: 13.5px;
    color: #1F2937;
}

.cc-table tbody tr.cc-row-current td {
    background: #FFFBEB;
}

.cc-table tbody tr.cc-row-reference td {
    background: #F8FAFC;
    color: #64748B;
}

.cc-badge-current {
    display: inline-block;
    font-size: 10.5px;
    font-weight: 700;
    color: #FFFFFF;
    background: #F59E0B;
    border-radius: 999px;
    padding: 1px 7px;
    vertical-align: 1px;
}

.cc-table tbody td.cc-col-gap {
    font-weight: 700;
}

.cc-table tbody td.cc-gap-plus {
    color: #059669;
}

.cc-table tbody td.cc-gap-minus {
    color: #DC2626;
}

.cc-table tbody td.cc-col-na {
    color: #94A3B8;
}

/* 行ごとの機器価格編集セル（機器ごとに単価・合計の2入力） */
.cc-table tbody td.cc-price-cell {
    text-align: left;
    min-width: 210px;
}

.cc-table tbody td.cc-price-none {
    text-align: center;
    color: #94A3B8;
}

.cc-price-group {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 4px 0;
}

.cc-price-group + .cc-price-group {
    border-top: 1px dashed #E2E8F0;
    margin-top: 3px;
}

.cc-price-group-label {
    font-size: 10.5px;
    font-weight: 700;
    color: #475569;
}

.cc-price-group-none {
    flex-direction: row;
    align-items: center;
    gap: 8px;
}

.cc-price-na {
    color: #94A3B8;
    font-size: 12px;
}

.cc-price-row {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: #64748B;
}

.cc-price-row input[type="number"] {
    width: 108px;
    padding: 4px 7px;
    border: 1.2px solid #CBD5E1;
    border-radius: 6px;
    font-size: 12.5px;
    text-align: right;
}

.cc-price-manual .cc-price-row input[type="number"] {
    border-color: #2563EB;
    background: #EFF6FF;
}

.cc-price-reset {
    appearance: none;
    border: none;
    background: transparent;
    color: #2563EB;
    font-size: 11px;
    cursor: pointer;
    padding: 0;
    text-align: left;
    text-decoration: underline;
}

.cc-price-reset:hover {
    color: #1D4ED8;
}

.cc-price-auto {
    font-size: 10.5px;
    color: #94A3B8;
}

/* 注記 */
.cc-note {
    margin: 14px 2px 0;
    font-size: 11.5px;
    line-height: 1.8;
    color: #6B7280;
}

/* スマホ */
@media (max-width: 640px) {
    .cc-controls {
        flex-direction: column;
        align-items: stretch;
    }

    .cc-add,
    .cc-unit {
        flex-wrap: wrap;
    }

    .cc-add {
        display: flex;
        width: 100%;
    }

    .cc-add select {
        max-width: 100%;
        flex: 1 1 auto;
        min-width: 0;
    }

    .cc-table thead th,
    .cc-table tbody td {
        padding: 8px 8px;
        font-size: 12.5px;
    }
}