/* src/public/css/calculator/calc-common.css
 * 計算ツール共通の見た目：「クリア／計算する（比較する）」のボタン・計算履歴・初めは閉じている折りたたみ
 * （docs/its-tool/NEW_TOOL.md の 0章）。
 * 💡 各ツールの CSS に書き写さず、このファイルを読み込んで使います。ツールの CSS より後に読み込むこと。
 *    ダークモードは theme-dark.css の .btn-calc・.btn-clear-tool・.history-box などの指定と、
 *    末尾の「=== 計算ツール共通 ===」にあります。
 */

/* ===== ボタン：クリア ／ 計算する（比較する） ===== */
.btn-group {
    display: flex;
    gap: 15px;
    margin: 22px 0 10px;
}
.btn-calc,
.btn-clear-tool {
    flex: 1;
    padding: 14px;
    border: none;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}
.btn-calc { background-color: #2a5298; color: #ffffff; }
.btn-calc:hover { background-color: #1e3c72; }
.btn-clear-tool { background-color: #e9ecef; color: #495057; }
.btn-clear-tool:hover { background-color: #dee2e6; }

/* ===== 計算履歴 ===== */
.history-box {
    margin-top: 20px;
    background: #ffffff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.history-box h3 {
    font-size: 1.1rem;
    color: #1e3c72;
    margin: 0 0 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}
.clear-history-lnk {
    border: none;
    background: none;
    padding: 4px 0;
    font-size: 0.8rem;
    font-weight: bold;
    color: #dc3545;
    cursor: pointer;
}
.clear-history-lnk:hover { text-decoration: underline; }
.history-list {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 320px;
    overflow-y: auto;
}
.history-item {
    display: flex;
    align-items: center;
    gap: 6px 12px;
    padding: 10px 0;
    border-bottom: 1px solid #f1f3f5;
    font-size: 0.9rem;
}
.history-item:last-child { border-bottom: none; }
.history-text { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.history-time { color: #999999; font-size: 0.8rem; white-space: nowrap; }
.history-apply {
    flex: 0 0 auto;
    padding: 5px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    background: #f8fafc;
    color: #1e3c72;
    font-size: 0.8rem;
    font-weight: bold;
    cursor: pointer;
}
.history-apply:hover { background: #e2e8f0; }
.history-empty {
    margin: 0;
    color: #adb5bd;
    text-align: center;
    font-size: 0.9rem;
    padding: 10px 0;
}

/* ===== 計算履歴より下の要素（早見表・比較表など）：初めは閉じている折りたたみ ===== */
.calc-fold {
    margin-top: 20px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    padding: 0;
}
.calc-fold > summary {
    padding: 16px 20px;
    font-weight: bold;
    color: #1e3c72;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}
.calc-fold[open] > summary { border-bottom: 1px solid #e2e8f0; }
.calc-fold-body { padding: 16px 20px 20px; }

@media (max-width: 768px) {
    .btn-group { gap: 10px; }
    .btn-calc, .btn-clear-tool { padding: 12px; font-size: 0.95rem; }
    .history-box { padding: 16px; }
    .history-item { flex-wrap: wrap; font-size: 0.85rem; }
    .history-text { flex-basis: 100%; }
    .history-time { margin-right: auto; }
    .calc-fold > summary { padding: 14px 16px; }
    .calc-fold-body { padding: 14px 16px 16px; }
}