:root {
 --b: #0e0e2e;
 --f: #45f;
 --bo: solid var(--b) calc(1px + 1 * ((100vw - 300px)/ 1620));
 --lin: solid var(--f) calc(1px + 1 * ((100vw - 300px)/ 1620));
}

* {
 padding: 0;
 box-sizing: border-box;
 margin: 0;
 font-style: normal;
 font-variant: normal;
 font-family: ff,Arial;
 font-weight: 400;
 font-size: 20px;
 scrollbar-width: none;
 overscroll-behavior: none;
 color: var(--f);
 text-decoration: none;
 outline: 0;
 border: none;
}
@media (max-width: 1920px) {
 *{
  font-size: calc(12px + (20 - 12) * ((100vw - 300px) / (1920 - 300)));
 }
}
input, textarea, h4 {
  
 user-select: none;
}

body,html {
 height: 100%;
 min-height: 100%;
 max-height: 100%;
}

@font-face {
 font-family:ff;src:url('n.woff') format('woff');
}

::-webkit-scrollbar {
 display: none;
}

html {
 background: var(--b);
 overflow-x: hidden;
}
@media (max-height: 176px) {
 html {overflow-y: scroll;}
}

::selection {
 background: #1d1da555;
}

* img {
 pointer-events: none;
}

@media (max-width:299px) {
 body {
  display: none;
 }
}

#search-input {
 width: 100%;
 position: relative;
 display: flex;
 flex-wrap: wrap;
 min-height: 50px;
 max-height: 50px;
 height: 50px;
 background: var(--f);
 color: var(--b);
 text-align: center;
}
@media (max-width:1920px) {
 #search-input {
  min-height: calc(25px + (25) * ((100vw - 300px)/ (1920 - 300)));
  max-height: calc(25px + (25) * ((100vw - 300px)/ (1920 - 300)));
  height: calc(25px + (25) * ((100vw - 300px)/ (1920 - 300)));
 }
}
#search-input::placeholder { 
 color: var(--b);
 opacity: 1;
}













.board {
  display: flex;
  flex-wrap:wrap;
  overflow-y: auto;
}
.square {
  width: calc(97.9vw / 3);
  height: calc(97.9vh / 4);
  margin:0.35vw;

  border: var(--lin);
  border-radius: 16px;
  
  position: relative;
  display: flex;
  flex-direction: column;
}
.square img{
  width:100%;
  height:100%;
  object-fit: cover;
  border-radius: 16px;
}
.square .description {
  width: 100%; 
  background: var(--f);
  color: var(--b);
  display: flex; 
  position: absolute; 

  justify-content: center; 
  align-items:flex-start; 
  
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  z-index: -100;
}
@media screen and (max-width: 900px) {
  .square {
    width: calc(98vw / 2);
    height: calc(97.9vh / 4);
    margin:0.5vw;
  }
}
@media screen and (max-width: 450px) {
  .square {
    width: calc(99vw / 1);
    height: calc(97.9vh / 4);
    margin:0.75vw;
  }
}






.input-container, 
.result {
  flex: 0 0 44%;
  display: flex;
  flex-direction: column;
  border-radius:0;
}
.input-container {
  border-bottom: var(--lin);;
  margin-top: 4%;
}

.n-input {
  flex: 1;
  width: 100%;
  text-align: center;
  border-bottom: var(--lin);;
  background: none;
}

.result {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  text-align: center;
  margin-top: 0.4%;
}

input::placeholder, textarea::placeholder {
 color: var(--f);
 opacity: 1;
}
@media screen and (max-width: 1400px) {
  .input-container, 
  .result {
    flex: 0 0 46%;
  }
  .input-container {
    border-bottom: var(--lin);;
    margin-top: 5%;
  }
  
}





.perinput {
 background: url('../img/per.svg') calc(98%) no-repeat;
 background-size: auto 44%;
}
.zlyinput {
 background: url('../img/zly.svg') calc(98%) no-repeat;
 background-size: auto 44%;
}
.numinput {
 background: url('../img/num.svg') calc(98%) no-repeat;
 background-size: auto 44%;
}
.kmuinput {
 background: url('../img/kmu.svg') calc(98%) no-repeat;
 background-size: auto 44%;
}
.litinput {
 background: url('../img/lit.svg') calc(98%) no-repeat;
 background-size: auto 44%;
}
.cmuinput {
 background: url('../img/cmu.svg') calc(98%) no-repeat;
 background-size: auto 44%;
}
.cmu2input {
 background: url('../img/cmu.svg') calc(98%) no-repeat;
 background-size: auto 22%;
}
.kguinput {
 background: url('../img/kgu.svg') calc(98%) no-repeat;
 background-size: auto 44%;
}