/* src/public/css/calc-keyboard.css
 *
 * 電卓キーボード（設定ページで「電卓キーボード」を選んだときだけ出ます）。
 *
 * 💡 全ページで読み込んでいますが、.calc-kb は最初は hidden で、
 *    実際に使われるまで画面には出ません（public/js/calc-keyboard.js が制御します）。
 */

.calc-kb {
    position: fixed;
    left: 0;
    right: 0;
    /* 💡 アプリモードのタブバー（画面下に固定表示）の上に重ならないよう、
            その高さぶん（--app-tabbar-h）だけ底上げします。
            アプリモード以外のページではこの変数が無いので 0px になります。 */
    bottom: var(--app-tabbar-h, 0px);
    z-index: 950;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px 8px calc(8px + env(safe-area-inset-bottom, 0px));
    background: #eef1f6;
    border-top: 1px solid #d7dee8;
    box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.12);
}

.calc-kb[hidden] { display: none !important; }

.calc-kb-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}

/* 💡 「四角のデザイン」。角は少しだけ丸め、円形にはしません */
.calc-kb-key {
    aspect-ratio: 1.3 / 1;
    min-height: 44px;
    border: none;
    border-radius: 8px;
    font-size: 1.15rem;
    font-weight: bold;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.calc-kb-key:active { filter: brightness(0.92); }

/* 数字（0〜9・.） */
.calc-kb-key-num {
    background: #ffffff;
    color: #22303f;
}

/* 機能キー（⌫・C・%） */
.calc-kb-key-fn {
    background: #d7dee8;
    color: #33414f;
    font-size: 1rem;
}

/* 演算子（÷ × − +） */
.calc-kb-key-op {
    background: #2a5298;
    color: #ffffff;
}

/* 計算（＝） */
.calc-kb-key-eq {
    background: #1e3c72;
    color: #ffffff;
    font-size: 0.95rem;
}

/* 💡 開いている間、画面の一番下がキーボードで隠れて操作しづらくならないよう、
        本文の下に少しだけ余白を足します（フッターが隠れる程度の見た目のズレは許容します）。 */
body.calc-kb-open { padding-bottom: 260px; }

/* アプリモードは本文の高さを画面ぴったりに計算しているため、
   下の余白の代わりに、開いている間だけ本文を電卓キーボードの高さぶん縮めます */
.app-mode-body.calc-kb-open { padding-bottom: 0; }
.app-mode-body.calc-kb-open .app-main { height: calc(100dvh - var(--header-h, 60px) - var(--app-tabbar-h) - env(safe-area-inset-bottom, 0px) - 240px); }