/* style.css (iOS風 - =ボタン修正) */

body {
    font-family: 'SF Pro Text', 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #202020;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
}

.calculator-container {
    background-color: #000000;
    border-radius: 25px;
    box-shadow: none;
    padding: 20px;
    max-width: 320px;
    width: 100%;
}

/* 式表示部分 */
#expression-display {
    background-color: transparent;
    color: #a0a0a0;
    font-size: 1.4em;
    text-align: right;
    padding: 0 10px;
    height: 30px;
    line-height: 30px;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}

/* 主な表示部分 */
#display {
    background-color: transparent;
    color: #ffffff;
    font-size: 4em;
    text-align: right;
    padding: 0 10px 10px;
    margin-bottom: 20px;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
    min-height: 70px;
    line-height: 70px;
}

.buttons-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 常に4列 */
    gap: 10px;
    /* このグリッドは5行を持つことになります (4行 + 1行が0,00,.用) */
    /* そして、=ボタンがその下の行に縦に伸びる */
}

button {
    background-color: #333333; /* 数字ボタンの背景色（濃いグレー） */
    color: #ffffff; /* 数字ボタンの文字色（白） */
    border: none;
    border-radius: 50%; /* ボタンを円形に近くする (正方形に近いボタンを想定) */
    width: 60px; /* 固定幅 - 必要に応じて調整。gapと合わせて4つ並ぶか確認 */
    height: 60px; /* 固定高さ */
    font-size: 2em; /* フォントサイズ */
    cursor: pointer;
    transition: background-color 0.1s ease, color 0.1s ease;
    box-shadow: none;
    display: flex;
    justify-content: center;
    align-items: center;
}

button:hover {
    background-color: #555555;
}

button:active {
    background-color: #a0a0a0;
    color: #333333;
}

/* トップ行の特別なボタン (C, +/-, %) */
.clear,
button[data-value="+/-"] {
    background-color: #a0a0a0;
    color: #333333;
}

.clear:hover,
button[data-value="+/-"]:hover {
    background-color: #c0c0c0;
}

.clear:active,
button[data-value="+/-"]:active {
    background-color: #e0e0e0;
}


/* 演算子ボタン */
.operator {
    background-color: #ff9500;
    color: #ffffff;
}

.operator:hover {
    background-color: #ffa52e;
}

.operator:active {
    background-color: #ffffff;
    color: #ff9500;
}

/* イコールボタン */
.equal {
    background-color: #ff9500;
    color: #ffffff;
}

.equal:hover {
    background-color: #ffa52e;
}

.equal:active {
    background-color: #ffffff;
    color: #ff9500;
}

/* 特殊なボタンのレイアウト調整 */

/* 0ボタンを2列分に広げる */
button.zero {
    grid-column: span 2;
    border-radius: 30px; /* 角を丸くした長方形に */
    justify-content: flex-start; /* 左寄せ */
    padding-left: 25px; /* 左パディングで調整 */
    width: auto; /* 幅はグリッドに任せる */
}

/* 縦長のイコールボタン */
button.large-equal-button {
    /* HTMLの並び順で一番最後にあるので、グリッドの最後のセルから配置を開始 */
    /* グリッドの4列目（一番右端）に配置 */
    grid-column: 4;
    /* 4行目から開始し、2行分を占める */
    grid-row: 4 / span 2; /* 4行目から始まり、2行分を占める */
    height: calc(60px * 2 + 10px); /* ボタンの高さ60px * 2 + ギャップ10px */
    border-radius: 30px; /* 長方形の角丸 */
}

/* 00 と . ボタンはデフォルトの1列分のままでOK */
button.zero-double,
button[data-value="."] {
    /* デフォルトのスタイルを維持 */
}


/* 画面が小さい場合のフォントサイズ調整 */
@media (max-width: 380px) {
    #display {
        font-size: 3.5em;
    }
    button {
        /* 幅と高さが固定されているため、フォントサイズのみ調整 */
        font-size: 1.8em;
        width: 55px; /* 必要に応じて微調整 */
        height: 55px; /* 必要に応じて微調整 */
    }
    #expression-display {
        font-size: 1.1em;
    }
    button.zero {
        padding-left: 20px; /* 幅が小さくなったらパディングも調整 */
    }
    button.large-equal-button {
        height: calc(55px * 2 + 10px); /* ボタンの高さに合わせて調整 */
    }
}