@charset "UTF-8";

/* =========================
   box30内の「ギチギチ」対策
   ========================= */

/* p以外の要素でも余白が効くようにラッパーを用意 */
.boxBody{
  padding: 16px 20px;
}

/* box同士が詰まりすぎないように（必要なら上書き） */
.box30{
  margin: 18px 0 40px;
}

/* =========================
   電卓
   ========================= */

.calcApp{
  width: min(360px, 100%);
  margin: 0 auto;            /* 全体中央 */
}

/* 表示 */
.calcDisplay{
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 14px;
  padding: 14px 16px;
  font-size: 1.8rem;
  text-align: right;
  overflow: hidden;
  user-select: none;
}

/* 途中計算 */
.calcHistory{
  margin-top: 8px;
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.7);
  border: 1px solid #e5e5e5;
  font-size: 0.95rem;
  text-align: right;
}
.calcHistoryLabel{
  opacity: 0.7;
  margin-right: 6px;
}

/* ボタン配置 */
.calcGrid{
  margin-top: 12px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}

/* ボタン */
.calcBtn{
  appearance: none;
  border: 1px solid #d6d6d6;
  background: #fff;
  border-radius: 14px;
  padding: 14px 0;
  font-size: 1.1rem;
  cursor: pointer;
}
.calcBtn:active{
  transform: translateY(1px);
}

/* 役割別 */
.calcBtn.isFunc{
  background: #f7f7f7;
}
.calcBtn.isOp{
  background: #eaf6ff;
  border-color: #b8def7;
}
.calcBtn.isEq{
  background: #6cc8f7;
  border-color: #6cc8f7;
  color: #fff;
  font-weight: 700;
}

/* 0だけ横長 */
.calcBtn.isZero{
  grid-column: span 2;
}

/* スマホ */
@media (max-width: 480px){
  .calcDisplay{ font-size: 1.6rem; }
  .calcBtn{ padding: 16px 0; }
}