@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css');
@font-face {
  font-family: 'NanumSquareRound';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_two@1.0/NanumSquareRound.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

* {
  user-select: none;
  -moz-window-dragging: none;
  -webkit-user-drag: none;
  overflow: hidden;
  outline: none;
}

:root {
  background: #111;
  overflow: hidden;
}

#menu {
  position: fixed;
  left: 0px; top: 0px;
  width: 100%; height: 32px;
  background: #000;
  border-bottom: 1px solid #444;
  z-index: 2;
  overflow: visible;
}

#menu .tabs {
  font-size: 12px;
  color: #f2f2f2;
  padding: 10px 13px 8px 13px;
  background-color: black;
  float: left;
  transition: background-color 100ms;
  cursor: pointer;
}

a:-webkit-any-link {
  color: #fff;
}

#menu #dropdown {
  padding: 0;
  margin: 0;
  float: left;
  height: 32px;
}

#menu #dropdown a {
  text-decoration: none;
}

#menu > ul > li {
  float: left;
}

#dropdown > li > ul {
  position: absolute;
  top: 32px;
  width: 200px;
  display: none;
  padding: 0;
  z-index: 2;
  border: 1px solid #444;
  box-sizing: border-box; /* 선이 안쪽에 위치하게 할 수 있음 */
}

#dropdown > li > ul > li {
  padding: 8px 13px;
  background: #000000e8;
  backdrop-filter: blur(10px);
  font-size: 12px;
  color: #e8e8e8;
}

#dropdown > li > ul > li:hover {
  cursor: pointer;
  background: #111111e8;
}

#dropdown > li:hover > ul {
  display: block;
}

#menu .tabs .subtabs {
  float: inline-start;
}

ul li {
  list-style: none;
}

#code_tab {
  position: absolute;
  padding: 16px;
  background: #000000e8;
  backdrop-filter: blur(10px);
  z-index: 2;
  top: 33px;
  /* right: 0px; */
  right: -433px;
  width: 400px;
  border-left: 1px solid #444;
  height: calc(100% - 32px - 33px - 2px);
  transition: all 200ms;
}

#code_tab .code {
  color: #fff;
  font-family: consolas;
}

#menu .tabs:hover {
  background-color: #444;
  /* padding: 10px 15px 8px 15px; */
}

#menu .show_layers_tab {
  float: right;
  padding: 0;
}

#menu .start_button {
  float: right;
  padding: 0;
}

#layers_tab {
  position: absolute;
  right: 0px;
  background: #00000080;
  z-index: 1;
  backdrop-filter: blur(10px);
  transition: all 300ms;
  max-height: 600px;
  box-sizing: border-box;
  border-bottom: 1px solid #444;
}

#layers_tab .layers {
  padding: 10px 15px;
  width: 22 0px;
  transition: all 150ms;
}

#layers_tab .layers:hover {
  background: #ffffff20;
}

#layers_tab .layers .layer_preview {
  width: 100px;
  background: white;
  float: left;
}

#layers_tab .layers .layer_information {
  font-size: 14px;
  color: #ffffff;
  font-family: consolas;
  width: 120px;
  margin-left: 10px;
  float: left;
}

#object_information {
  position: absolute;
  z-index: 2;
  width: 220px;
  right: 10px;
  top: 82px;
  border: 1px solid #444;
  background: #000000c0;
  padding: 8px;
  transition: all 150ms;
  backdrop-filter: blur(10px);
}

/* #object_information:hover {
  opacity: 0.5;
  backdrop-filter: none;
} */

#object_information .title {
  font-size: 14px;
  color: #ffffff;
  font-family: Nanumsquare;
  text-align: center;
  padding-bottom: 7px;
}

#object_information table {
  width: 100%;
  padding: 4px 0;
  border-top: 1px solid #444;
  border-bottom: 1px solid #444;
}

#object_information table td {
  font-family: Nanumsquare;
  font-size: 13px;
}

#object_information table td:nth-child(2n+1) {
  color: #eee;
  width: 50%;
  text-align: left;
}

#object_information table td:nth-child(2n) {
  color: #a8a8a8;
  transition: color 100ms;
  text-align: left;
}
#object_information table td:nth-child(2n):hover {
  color: #eee;
}

#object_information .apply {
  position: static;
  float: right;
  width: 35px;
  height: 14px;
  font-size: 14px;
  margin: 8px 0 0 0;
  background: #ccc;
  color: #181818;
  border: 1px solid #404040;
}

#object_information .apply:hover {
  background: #a0a0a0;
}

#toolbar {
  position: fixed;
  top: 32px;
  left: 0px;
  width: 48px;
  height: calc(100% - 32px - 4px);
  background: #000000c0;
  z-index: 1;
  backdrop-filter: blur(10px);
}

#toolbar .tools:first-child {
  margin: 20px 9px 4px 7px;
}

#toolbar .tools {
  margin: 4px 9px 4px 7px; 
  opacity: 0.5;
  cursor: pointer;
  transition: all 150ms;
}

/* #toolbar .tools:hover {
  margin: 2px 9px 2px 9px; 
  opacity: 0.5;
  cursor: pointer;
  transition: all 150ms;
} */

#video_preview {
  position: absolute;
  left: 0px;
  top: 32px;
  width: 100%;
  height: calc(100% - 36px);
  background: #000;
}

#video_preview_cover {
  position: absolute;
  left: 48px;
  top: 32px;
  width: calc(100% - 48px);
  height: calc(100% - 36px);
  transition: all 200ms;
  background: #000;
  opacity: 0;
}

#vide_preview #guide_line {
  position: absolute;
  left: 8px; top: 0px;
  width: calc(100% - 48px);
  height: 100%;
  background: transparent;
}

#video_preview #canvas {
  position: absolute;
  background: #ffffff;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  box-shadow: 0px 4px 3px rgba(0, 0, 0, 0.3);
  image-rendering: pixelated;
  box-sizing: border-box;
}

#fakeCanvas {
  position: absolute;
  left: 48px; height: 32px;
  width: calc(100% - 48px);
  height: calc(100% - 32px);
  image-rendering: pixelated;
  /* filter: invert();
  mix-blend-mode: difference; */
}

#video_information {
  position: absolute;
  bottom: 20px;
  right: 14px;
  font-size: 10px;
  color: #fff;
  font-family: consolas;
  mix-blend-mode: difference;
}

#video_information td:nth-child(odd) {
  width: 50px;
  font-weight: bold;
}

#video_information td:nth-child(even) {
  text-align: right;
}

#bottom_timeline {
  position: absolute;
  width: 100%;
  height: 2px;
  background: #00000080;
  bottom: 0px;
  left: 0px;
  z-index: 2;
}

#bottom_timeline .gauge {
  position: absolute;
  left: 0px;
  bottom: 0px;
  width: 0%;
  height: 100%;
  background: #fff;
  z-index: 3;
}

#time_interface {
  position: absolute;
  left: 0px;
  bottom: 4px;
  width: 100%;
  height: 22px;
  z-index: 3;
  cursor: ew-resize;
  overflow: visible;
  mix-blend-mode: difference;
}

#time_interface .times {
  position: absolute;
  bottom: 2px;
  font-size: 10px;
  color: #fff;
  font-family: consolas;
  text-shadow: 0 2px 2px #000;
} 

#time_interface .current_time {
  left: 16px;
}

#time_interface .end_time {
  right: 16px;
}

#current_time_stick {
  position: absolute;
  left: 0%;
  bottom: -4px;
  width: 1px;
  height: 14px;
  background: var(--point_color);
  /* transform: translateX(-50%); */
  z-index: 3;
  border-radius: 8px;
  mix-blend-mode: difference;
  /* transition: height 200ms, width 100ms, bottom 200ms; */
}

#export_cover {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 99;
  display: none;
}

#export_cover .state {
  position: absolute;
  left: 50%; bottom: 80px;
  transform: translateX(-50%);
  font-size: 14px;
  color: #fff;
  font-family: 'NanumSquare';
  text-align: center;
  line-height: 20px;
}

#export_cover progress {
  width: 200px;
  height: 20px;
  border-radius: 0px;
  margin-top: 10px;
}

#export_cover progress::-webkit-progress-bar {
  background: #444;
}

#export_cover progress::-webkit-progress-value {
  background: #ffffff;
}

#export_cover #video_recorded {
  position: absolute;
  left: 50%; top: 40%;
  transform: translate(-50%, -50%);
  width: 700px;
  opacity: 0;
}

#export_cover .cancle {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 20px;
  cursor: pointer;
  padding: 8px 12px;
  color: #fff;
  text-align: center;
  transition: all 120ms;
  font-size: 14px;
  background: #404040;
}

#export_cover .cancle:hover {
  color: #808080;
  background: #202020;
}

.interface_tab {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  background: #000000e8;
  padding: 30px 45px 90px 45px;
  width: 800px;
  /* height: calc(100% - 100px); */
  z-index: 11;
  border: 1px solid #ffffffa0;
  display: none;
}

.interface_tab .title {
  font-family: 'NanumSquare';
  color: #fff;
  font-size: 28px;
  margin-bottom: 24px;
}

.interface_tab .content {
  font-family: 'NanumSquare';
  color: #fff;
  font-size: 16px;
  width: 100%; height: auto;
  letter-spacing: 0px;
}

.interface_tab table {
  border-spacing: 6px;
}

.interface_tab table tr {
  height: 32px;
}

.interface_tab table td:nth-child(3n+1) {
  width: 140px
}

.interface_tab table td:nth-child(3n+2) {
  color: #c8c8c8;
}

.interface_tab table tr td:nth-child(3n) {
  font-family: consolas, NanumsquareRound;
  padding: 4px 11px;
  color: #eee;
  border: 1px solid #444;
  background: #00000080;
  border-radius: 4px;
  width: 125px;
  white-space: nowrap;
}

.interface_tab table tr[variableType='boolean'] td:nth-child(3n) {
  cursor: pointer;
}

.interface_tab table tr td:nth-child(3n):hover {
  background: #22222280;
}

.interface_tab .code {
  width: calc(100% - 40px);
  height: calc(100% - 100px);
  margin: 30px 0px 40px 0px;
  border: 1px solid #444;
  color: #fff;
  font-family: consolas;
  padding: 15px 20px;
  outline: none;
  line-height: 140%;
}

.interface_tab .code[class='code real'] {
  position: absolute;
  margin: 0;
  left: 45px;
  top: 94px;
  /* left: 0px;
  top: 0px;
  margin: 94px 45px; */
  width: calc(100% - 130px);
  height: calc(100% - 150px);
  /* opacity: 0; */
  color: #ffffff80;
}

.interface_tab .quit_tab {
  position: absolute;
  right: 10px;
  top: 10px;
  cursor: pointer;
}

.apply, .continue {
  position: absolute;
  right: 45px;
  bottom: 25px;
  cursor: pointer;
  padding: 8px 12px;
  color: #fff;
  border-radius: 4px;
  width: 70px;
  text-align: center;
  transition: all 120ms;
}

.apply {
  background: #F61C41;
}

.apply:hover {
  background: #f55a73;
}

.continue {
  background: #17cc62;
}

.continue:hover {
  background: #78f092;
}

#cover {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 100%;
  background: #000000c8;
  backdrop-filter: blur(5px);
  z-index: 10;
  display: none;
}

#color_picker {
  position: absolute;
  right: 10px;
  top: 42px;
  z-index: 1;
}

.clr-field {
  width: 30px;
  height: 30px;
  border-radius: 17px;
  border: 1px solid #fff;
  box-sizing: border-box;
}

#color_picker input {
  width: 30px;
  height: 30px;
  cursor: pointer;
}

#color_picker button {
  width: 30px;
  height: 30px;
}

.clr-right {
  right: 10px;
}

.clr-dark {
  background: #000000d8;
  border: 1px solid #444;
  backdrop-filter: blur(10px);
}

#clr-color-area {
  cursor: crosshair;
}