body {
  overflow: hidden;
}

#rootContainer {
  display: flex;
}

/* 캔버스 영역 */
#canvasContainer {
  flex: 1;
  position: relative;
  width: 80%;
}
#canvasContainer canvas:active {
  cursor: pointer;
}

/* 조작법 */
#controlContainer {
  position: absolute;
  z-index: 1;
  bottom: 21px;
  right: 19px;
  padding: 14px 22px 13px 14px;
}
#controlContainer .frame {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  opacity: 0.42;
  width: 100%;
  height: 100%;
  background-color: #000;
  border-radius: 5px;
}
#controlContainer span,
#controlContainer p {
  margin: 0px;
  font: normal normal normal 14px/16px Pretendard;
  color: #ffffff;
  letter-spacing: 0px;
}
#controlContainer img {
  width: 30px;
  height: 30px;
  margin-right: 9px;
}
#controlContainer .firstControlGroup {
  display: flex;
  margin-top: 16px;
}
#controlContainer .firstControlGroup > div {
  display: flex;
  align-items: center;
}
#controlContainer .firstControlGroup > div:first-child p {
  margin-right: 58px;
}
#controlContainer .secondControlGroup {
  display: flex;
  margin-top: 21px;
}
#controlContainer .secondControlGroup > div {
  display: flex;
  align-items: center;
}
#controlContainer .secondControlGroup > div:first-child p {
  margin-right: 42px;
}
#controlContainer .secondControlGroup > div:last-child img {
  width: 36px;
  height: 36px;
  margin-right: 3px;
}

/* input 영역 */
#inputRootContainer {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
  background-color: #282b31;
  color: white;
}

/* 전환 */
#inputRootContainer #switchContainer {
  display: flex;
  background-color: #1a1d20;
  cursor: pointer;
  font: normal normal normal 13px/15px Pretendard;
  text-align: center;
}
#inputRootContainer #switchContainer .selected,
#inputRootContainer #switchContainer .unSelected {
  width: 40%;
  margin: 0;
  padding: 7.5px 0;
  letter-spacing: 0px;
}
#inputRootContainer #switchContainer .selected {
  background-color: #282b31;
  color: #e3e9f1;
}
#inputRootContainer #switchContainer .unSelected {
  background-color: transparent;
  color: #757a85;
}
#inputRootContainer #switchContainer p:last-child {
  border: 1px solid #000000;
  border-top: 0px;
  border-bottom: 0px;
}

/* 다운로드 버튼 */
#inputRootContainer .exportButton {
  height: 40px;
  margin: auto 14px 20px 14px;
  padding: 12px 0;
  background-color: #7744df;
  border: none;
  border-radius: 4px;
  font: normal normal normal 14px/19px Pretendard;
  color: #ffffff;
  letter-spacing: -0.35px;
}
#inputRootContainer .exportButton:hover {
  background-color: #976fe8;
}
#inputRootContainer .exportButton:active {
  background-color: #592bb6;
}

/* input 영역 2 */
#inputRootContainer #inputSubContainer {
  display: flex;
  flex-direction: column;
  padding: 16px 14px;
}

/* 타이틀 */
#inputSubContainer .title {
  display: flex;
  align-items: center;
  margin-bottom: 14px;
}
#inputSubContainer .title img {
  width: 16px;
  height: 16px;
  margin-right: 6px;
}
#inputSubContainer .title p {
  opacity: 1;
  margin: 0px;
  font: normal normal 500 14px/9px Pretendard;
  color: #e4e7eb;
  text-align: left;
  letter-spacing: 0px;
}

/* 입력창 */
#inputContainer {
  display: flex;
  flex-direction: column;
}

/* 텍스트 입력 */
#inputContainer .textInput {
  resize: none;
  outline: none;
  display: flex;
  height: 60px;
  padding: 10px;
  background: #1a1d20;
  border: none;
  border-radius: 2px;
  font: normal normal normal 14px/18px Pretendard;
  color: #e4e7eb;
  letter-spacing: -0.7px;
}

/* 폰트 설정 - 기본 */
#inputContainer #defaultFontContainer {
  display: flex;
  align-items: center;
  position: relative;
  width: 100%;
  margin-top: 16px;
}
#inputContainer #defaultFontContainer p {
  margin: 0px;
  font: normal normal normal 13px/15px Pretendard;
  color: #a6acbb;
  text-align: left;
  letter-spacing: 0px;
}
#inputContainer #defaultFontContainer .selectFontButton {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex: 1;
  position: relative;
  width: 100%;
  margin-left: 24px;
  padding: 6px 8px 6px 14px;
  background: #353a43;
  cursor: pointer;
  border: 0.4px solid #52555a;
  border-radius: 2px;
}
#inputContainer #defaultFontContainer .selectFontButton span {
  font: normal normal normal 14px Pretendard;
  color: #e4e7eb;
  letter-spacing: 0px;
}
#inputContainer #defaultFontContainer .selectFontButton img {
  position: absolute;
  top: 50%;
  right: 10px;
  transform: translateY(-50%);
}
.fontDropdown {
  position: absolute;
  z-index: 1;
  top: 100%;
  left: 0;
  overflow: hidden;
  width: calc(100% - 12px);
  margin-top: 3px;
  padding: 6px;
  background-color: #353a43;
  border: 0.4px solid #52555a;
  border-radius: 2px;
}
.fontDropdown ul {
  margin: 0;
  padding: 0;
  cursor: pointer;
  border-radius: 2px;
  font: normal normal normal 14px/20px Noto Sans KR;
  color: #ffffff;
  letter-spacing: 0px;
  list-style: none;
}
.fontDropdown ul li {
  margin: 0;
  padding: 4px 10px;
  cursor: pointer;
  border-radius: 2px;
  font: normal normal normal 14px/20px Noto Sans KR;
  color: #ffffff;
  letter-spacing: 0px;
  list-style: none;
}
.fontDropdown ul li:hover {
  background-color: #864edf;
}
.fontDropdown ul li.selected {
  background-color: #864edf;
}

/* 폰트 설정 - 사용자 지정 */
#inputContainer #customFontContainer {
  display: flex;
  align-items: center;
  margin-top: 16px;
  word-break: break-all;
}
#inputContainer #customFontContainer p {
  margin: 0px;
  font: normal normal normal 13px/15px Pretendard;
  color: #a6acbb;
  text-align: left;
  letter-spacing: 0px;
}
#inputContainer #customFontContainer .fontName {
  flex: 1;
  width: 0px;
  margin-right: 7px;
  margin-left: 24px;
  background: #353a43;
  border: 0.4px solid #52555a;
  border-radius: 2px;
}
#inputContainer #customFontContainer .fontName p {
  overflow: hidden;
  margin: 0px;
  padding: 5px 10px 5px 10px;
  font: normal normal normal 14px Pretendard;
  color: #e4e7eb;
  text-align: left;
  text-overflow: ellipsis;
  letter-spacing: -0.7px;
  white-space: nowrap;
}
#inputContainer #customFontContainer button {
  width: 28px;
  height: 28px;
  background-color: #3d424b;
  background-image: url("/images/select_font_default.svg");
  background-size: cover;
  border: 0.4px solid #52555a;
  border-radius: 2px;
}
#inputContainer #customFontContainer button:active {
  background-image: url("/images/select_font_pressed.svg");
}

/* bold, italic 설정 버튼 */
#inputContainer #fontStyleContainer {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
}
#inputContainer #fontStyleContainer input[type="checkbox"] {
  display: none;
}
#inputContainer #fontStyleContainer label {
  width: 28px;
  height: 28px;
  cursor: pointer;
  border: 0.4px solid #52555a;
  border-radius: 2px;
}
#inputContainer #fontStyleContainer .boldButton {
  background: transparent url("/images/font_bold.svg") calc(50% - 1px)
    calc(50% + 2px) no-repeat padding-box;
  background-color: #353a43;
  margin-right: 4px;
}
#inputContainer #fontStyleContainer .italicButton {
  background: transparent url("/images/font_italic.svg") calc(50% + 1px) center
    no-repeat padding-box;
  background-color: #353a43;
}
#inputContainer #fontStyleContainer .disabledBoldButton {
  background: transparent url("/images/font_bold_disabled.svg") calc(50% - 1px)
    calc(50% + 2px) no-repeat padding-box;
  background-color: #282b31;
  margin-right: 4px;
  pointer-events: none;
}
#inputContainer #fontStyleContainer .disabledItalicButton {
  background: transparent url("/images/font_italic_disabled.svg")
    calc(50% + 1px) center no-repeat padding-box;
  background-color: #282b31;
  pointer-events: none;
}

#inputContainer
  #fontStyleContainer
  input[type="checkbox"]#bold:checked
  + label.boldButton {
  background-color: #1a1d20;
}
#inputContainer
  #fontStyleContainer
  input[type="checkbox"]#italic:checked
  + label.italicButton {
  background-color: #1a1d20;
}

/* 행간, 자간 설정 */
#spacingContainer {
  margin-top: 16px;
  margin-bottom: 20px;
}
#spacingContainer #spacingSubContainer {
  display: flex;
  align-items: center;
}
#spacingContainer #spacingSubContainer:first-child {
  margin-bottom: 12px;
}
#spacingContainer #spacingSubContainer p {
  margin: 0px;
  font: normal normal normal 13px/15px Pretendard;
  color: #a6acbb;
  text-align: left;
  letter-spacing: 0px;
}
#spacingContainer #spacingSubContainer .spacingSlider {
  flex: 1;
  width: 100%;
  height: 4px;
  margin-right: 10px;
  margin-left: 24px;
  padding: 0px;
  cursor: pointer;
}
#spacingContainer #spacingSubContainer .currentSpacing {
  width: 100%;
  border: none;
  outline: none;
  border-radius: 2px;
  flex: 0.5;
  padding: 6px 0 6px 8px;
  background-color: #1a1d20;
  font: normal normal normal 14px/17px Roboto;
  color: #e4e7eb;
  letter-spacing: 0px;
}

/* 텍스트 생성 */
#inputContainer .generateTextButton {
  flex: 1;
  background-color: #3d424b;
  cursor: pointer;
  border-radius: 2px;
}
#inputContainer .generateTextButton:active {
  background-color: #121416;
}
#inputContainer .generateTextButton p {
  margin: 6px 0px;
  font: normal normal normal 14px/19px Pretendard;
  color: #ffffff;
  text-align: center;
  letter-spacing: -0.35px;
}

/* 구분선 */
.division {
  margin: 16px 0 16px 0;
  border-top: 0.6px solid #4e5259;
}

/* 높이 설정 */
#heightContainer {
  display: flex;
  align-items: center;
}
#heightContainer p {
  margin: 0px;
  font: normal normal normal 13px/15px Pretendard;
  color: #a6acbb;
  text-align: left;
  letter-spacing: 0px;
}
#heightContainer .heightSlider {
  flex: 1;
  width: 100%;
  height: 4px;
  margin-right: 10px;
  margin-left: 24px;
  padding: 0px;
  cursor: pointer;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
#heightContainer .currentHeight {
  width: 100%;
  border: none;
  outline: none;
  border-radius: 2px;
  flex: 0.5;
  padding: 6px 0 6px 8px;
  background-color: #1a1d20;
  font: normal normal normal 14px/17px Roboto;
  color: #e4e7eb;
  letter-spacing: 0px;
}