/* THEME COLOR - 이 한 줄만 바꾸면 아래 5단계가 자동 생성됨 */
:root {
  --theme: #0053c0;

  /* 자동 생성 영역 - 수정 불필요 */
  --theme-50: color-mix(in srgb, var(--theme), #fff 92%);  /* 숫자 버튼 배경 (가장 옅음) */
  --theme-100: color-mix(in srgb, var(--theme), #fff 78%); /* 연산 버튼 배경, 구분선 */
  --theme-200: color-mix(in srgb, var(--theme), #fff 55%); /* 버튼 눌림(.on) 상태 */
  --theme-500: var(--theme);                               /* 상단 강조선 */
  --theme-700: color-mix(in srgb, var(--theme), #000 34%); /* = 버튼 배경 (가장 진함) */
}

main {
  padding: 0;
}
main .calculate_wrap {
  height: calc((100vh - 6rem) / 2);
  padding: 2rem;
  text-align: right;
}
main .calculate_wrap .calc_history {
  font-size: 2rem;
  line-height: 1.4;
  color: #999;
  word-break: break-all;
}
main .calculate_wrap .cur_number {
  font-size: 4rem;
  font-weight: 700;
  line-height: 1.2;
  word-break: break-all;
}
main .numpad_wrap {
  height: calc((100vh - 6rem) / 2);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
main .numpad_wrap > p {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1.5rem;
  font-size: 2rem;
  background: var(--theme-100);
}
main .numpad_wrap > p.on {
  background: var(--theme-200);
}
main .numpad_wrap .num {
  background: var(--theme-50);
}
main .numpad_wrap > p:not(:nth-child(4n)) {
  border-right: 1px solid var(--theme-100);
}
main .numpad_wrap > p:nth-child(-n + 16) {
  border-bottom: 1px solid var(--theme-100);
}
main .numpad_wrap > p:nth-child(-n + 4) {
  border-top: 1px solid var(--theme-500);
}
main #calculate {
  background: var(--theme-700);
  color: #fff;
  font-weight: 600;
}