@charset "utf-8";

@import 'reset.css';
@import 'normalize.css';
@import 'font.css';
@import 'layout.css';
@import 'numberBalloon.css';
@import 'questionPanel.css';
@import 'graphPaper.css';
@import 'formulaContainer.css';
@import 'formulaVertical.css';


/****** 공통 CSS ******/
*, button {
  background-size: contain;
  background-repeat: no-repeat;
}
/* 키보드로 버튼에 포커스 시 */
/* *:focus-visible {
  outline: 3px solid #000 !important;
} */

/* 마우스, 터치로 버튼에 포커스 시 */
/* *:focus:not(:focus-visible) {
  outline: none;
} */
:root{
  --tt:rgba(255,0,0,0.5);
  --box-w: 160px;
  --gap: 4px;

  --line-color: #161c2f;

  --number: "TmoneyEB";
  --number-size: 68px;

  --color-1: #c41a7e;
  --color-10: #006ecc;  
  --color-100: #0b7953;
  --color-1000: #364069;

  --bg-1: #ffceeb;
  --bg-10: #c0ebff;
  --bg-100: #a8f0cd;
  --bg-1000: #c1c5dc;

  --shading: 77px;
  --shading-r: 20px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input {
  outline: none;
  border: none;
}

/* flexBox (default일 때 설명임) */
/* flex 속성에 좌우 가운데 정렬  */
.flexBox {
  display: flex;
  justify-content: center;
}

/* flex 속성에 가로정렬을 세로 정렬로 바꾸기 */
.flexBox.column {
  flex-direction: column;
}

/* flex 속성에 상하 가운데 정렬  */
.flexBox.alignCenter {
  align-items: center;
  align-content: center;
  display: flex;
}


/*****************************************************/


/********************** active ***********************/
/* popup, tab */
.popupContent,
.tabContent {
  display: none;
  position: relative;
}

.tabContent,
.inputContainer,
.formulaContent {
  width: 100%;
  height: 100%;
}

.numberBalloon.on {
  display: flex;
}
.popupContent.on,
.tabContent.selected {
  display: block;
}


/* 계산 페이지 */
.__run_formula .intro {display: none;}
.__run_formula[data-active-tab="1"] .formulaContainer[data-formula-type="model"],
.__run_formula[data-active-tab="2"] .formulaContainer[data-formula-type="verticalModel"],
.__run_formula[data-active-tab="3"] .formulaContainer[data-formula-type="vertical"] {
  visibility: visible;
}
.__run_formula .titleTab,
.__run_formula .nextBtn,
.__run_formula .loadBtn,
.__run_formula .inputContainer {
  visibility: hidden;
}

/* 수 모형 모션 실행 */
.__playing_formula_motion,
.__playing_formula_motion * {pointer-events: none !important;}