/*

  master.css
  
  wany.io

*/

/*

  # Color Chart

  purple: #9500ff; rgb(155, 0, 255); rgb(77, 0, 128)
  yellow: #FAFF00; rgb(250, 255, 0);
  red: #FF005A;
  blue: #443DFF;

  # Light
  white: rgb(250,250,250);
  black: rgb(0,0,0);
  theme: #AA8FB3; rgb(170,143,179);

  # Dark
  black: rgb(20,20,20);
  white: rgb(255,255,255);
  theme: #D2B0DD; rgb(210,176,221);

*/

/* 

  # Font

  # Sans Serif
  'Poppins', 'Noto Sans KR', 'Malgun Gothic', sans-serif

  # Monospace
  'SF Mono', 'Consolas', monospace

  # Special
  'Wanymetic'
  'Wanymetic Mono'
  'RoundSharp'

*/


/*@import url('https://wany.io/resource/font/wanymetric/Wanymetric.css');*/
/*@import url('https://wany.io/resource/font/roundsharp/Roundsharp.css');*/
@import url('https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700;900&display=swap');

/*@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;900&display=swap');*/
/*@import url('https://fonts.googleapis.com/css?family=Poppins:400,700&display=swap');*/

/*@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital@1&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:ital@1&display=swap');*/
/*@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@300;400;500&display=swap');*/

:root {
  --light-background-color: rgb(245,245,245);
  --light-background-color-translucent: rgba(245,245,245,0.35);
  --light-text-color: rgb(0,0,0);
  --light-theme-color: #FAE100;

  --dark-background-color: rgb(0,0,0);
  --dark-background-color-translucent: rgba(0,0,0,0.35);
  --dark-text-color: rgb(255,255,255);
  --dark-theme-color: #FAE100;

  --bg: var(--light-background-color);
  --bg-translucent: var(--light-background-color-translucent);
  --fg: var(--light-text-color);
  --th: var(--light-theme-color);

  --gray-250: rgb(250,250,250);
  --gray-240: rgb(240,240,240);
  --gray-230: rgb(230,230,230);
  --gray-210: rgb(210,210,210);
  --gray-180: rgb(180,180,180);
  --gray-150: rgb(150,150,150);
  --gray-130: rgb(130,130,130);
  --gray-128: rgb(128,128,128);
  --gray-100: rgb(100,100,100);
  --gray-80: rgb(80,80,80);
  --gray-50: rgb(50,50,50);
  --gray-40: rgb(40,40,40);
  --gray-20: rgb(20,20,20);

  --fg-l: var(--gray-230);
  --fg-m: var(--gray-150);
  --fg-h: var(--gray-40);

  --yellow: rgb(255,204,0);
  --orange: rgb(255,149,0);
  --red: rgb(255,59,48);
  --pink: rgb(255,45,85);
  --purple: rgb(175,82,222);
  --indigo: rgb(88,86,214);
  --blue: rgb(0,122,255);
  --teal: rgb(90,200,255);
  --green: rgb(52,199,89);

  --sans-serif: 'Poppins', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --serif: 'Times New Roman', 'Noto Serif KR', 'Batang', serif;
  --monospace: 'SF Mono', 'Consolas', 'Noto Sans KR', 'Malgun Gothic', monospace;
}

.light, .forcelight {
  --bg: var(--light-background-color);
  --bg-translucent: var(--light-background-color-translucent);
  --fg: var(--light-text-color);
  --th: var(--light-theme-color);

  --white: rgb(255,255,255);
  --gray-250: rgb(250,250,250);
  --gray-245: rgb(245,245,245);
  --gray-240: rgb(240,240,240);
  --gray-235: rgb(235,235,235);
  --gray-230: rgb(230,230,230);
  --gray-210: rgb(210,210,210);
  --gray-180: rgb(180,180,180);
  --gray-150: rgb(150,150,150);
  --gray-130: rgb(130,130,130);
  --gray-128: rgb(128,128,128);
  --gray-100: rgb(100,100,100);
  --gray-80: rgb(80,80,80);
  --gray-50: rgb(50,50,50);
  --gray-40: rgb(40,40,40);
  --gray-20: rgb(20,20,20);
  --black: rgb(0,0,0);

  --fg-l: var(--gray-210);
  --fg-m: var(--gray-150);
  --fg-h: var(--gray-40);

  --yellow: rgb(255,204,0);
  --orange: rgb(255,149,0);
  --red: rgb(255,59,48);
  --pink: rgb(255,45,85);
  --purple: rgb(175,82,222);
  --indigo: rgb(88,86,214);
  --blue: rgb(0,122,255);
  --teal: rgb(90,200,255);
  --green: rgb(52,199,89);
}

.dark, .forcedark {
  --bg: var(--dark-background-color);
  --bg-translucent: var(--dark-background-color-translucent);
  --fg: var(--dark-text-color);
  --th: var(--dark-theme-color);

  --white: rgb(0,0,0);
  --gray-250: rgb(20,20,20);
  --gray-245: rgb(25,25,25);
  --gray-240: rgb(30,30,30);
  --gray-235: rgb(35,35,35);
  --gray-230: rgb(40,40,40);
  --gray-210: rgb(60,60,60);
  --gray-180: rgb(90,90,90);
  --gray-150: rgb(120,120,120);
  --gray-130: rgb(140,140,140);
  --gray-128: rgb(128,128,128);
  --gray-100: rgb(170,170,170);
  --gray-80: rgb(190,190,190);
  --gray-50: rgb(220,220,220);
  --gray-40: rgb(230,230,230);
  --gray-20: rgb(250,250,250);
  --black: rgb(255,255,255);

  --fg-l: var(--gray-210);
  --fg-m: var(--gray-150);
  --fg-h: var(--gray-40);

  --yellow: rgb(255,214,10);
  --orange: rgb(255,159,10);
  --red: rgb(255,69,58);
  --pink: rgb(255,55,95);
  --purple: rgb(191,90,242);
  --indigo: rgb(94,92,230);
  --blue: rgb(10,122,255);
  --teal: rgb(100,210,255);
  --green: rgb(48,209,88);
}
html, body {
  font-family: 'Poppins', 'Consolas', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  font-weight: normal;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
  scrollbar-width: 15px;
  scrollbar-color: var(--fg) var(--bg);
}
body {
  overflow-y: auto;
  background-color: var(--bg);
  color: var(--fg);
}
div {
  border-color: var(--fg);
}
h1, h2, h3, h4, h5, h6, 
p, a, i, b, s, span, 
img, input, textarea, 
table, tr, td {
  margin: 0;
  padding: 0;
  border: none;
  outline: none;
  border-spacing: 0px;
  color: var(--fg);
}
a {
  text-decoration: none;
  color: var(--fg);
}
img {
  display: block;
}
svg {
  fill: var(--fg);
  stroke: var(--fg);
}
svg path, svg rect, svg circle, svg ellipse {
  fill: var(--fg);
  stroke: var(--fg);
} 
textarea, input {
  -webkit-appearance: none;
}
textarea:focus, input:focus {
  outline: none;
}
input:-webkit-autofill,
input:-webkit-autofill:hover, 
input:-webkit-autofill:focus,
textarea:-webkit-autofill,
textarea:-webkit-autofill:hover,
textarea:-webkit-autofill:focus,
select:-webkit-autofill,
select:-webkit-autofill:hover,
select:-webkit-autofill:focus {
  box-shadow: 0 0 0px 1000px var(--bg) inset;
  font-family: var(--sans-serif);
  -webkit-text-fill-color: var(--fg);
}
text {
  font-family: Wanymetric, Poppins, Noto Sans KR, Malgun Gothic, sans-serif;
}

::selection {
  background: var(--th);
  color: black;
}
::-moz-selection {
  background: var(--th);
  color: black;
}
[contenteditable=true]:empty:before{
  content: attr(placeholder);
  color: var(--fg-m);
}

/* wrapper */
.outwrapper {
  width: calc(100% - 180px);
  padding: 0px 90px 0px 90px;
  max-width: 75vw;
  margin: 0 auto;
  transition: 
    width 0.2s ease-out, 
    padding 0.2s ease-out, 
    max-width 0.2s ease-out;
}
.outwrapper.wide {
  max-width: unset;
}
.outwrapper.full {
  width: 100%;
  padding: 0;
  max-width: unset;
}
@media (max-width:900px) {
  .outwrapper {
    width: calc(100% - 120px);
    max-width: 100vw;
    padding: 0px 60px 0px 60px;
  }
}
@media (max-width:600px) {
  .outwrapper {
    width: calc(100% - 30px);
    max-width: 100vw;
    padding: 0px 15px 0px 15px;
  }
}
.inwrapper {
  width: 100%;
}

/* floatmessage */
.floatmessage {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 100000000;
  display: flex;
  justify-content: center;
} 
.floatmessage .wrapper {
  max-width: 480px;
  padding: 15px 30px 15px 30px;
  border-radius: 15px;
  transform: scale(0.75);
  position: absolute;
  top: -90px;
  font-family: 'Poppins', 'Consolas', 'Noto Sans KR', 'Malgun Gothic', monospace;
  font-size: 14pt;
  font-weight: 400;
  text-align: center;
  box-shadow: 0px 0px 10px 0px rgb(0,0,0,0.1);
  transition: top 0.2s cubic-bezier(0,0,.3,1.3), transform 0.2s ease-out, box-shadow 0.2s ease-out;
  background-color: white;
  color: black;
}
.floatmessage.warn .wrapper {
  background-color: var(--yellow);
  color: black;
}
.floatmessage.error .wrapper {
  background-color: var(--red);
  color: white;
}
.floatmessage.down .wrapper{
  transform: scale(1.0);
  top: 10vh;
  box-shadow: 0px 0px 30px 0px rgb(0,0,0,0.1);
}
@media (max-width:600px) {
  .floatmessage .wrapper {
    width: calc(100% - 60px);
    padding: 15px 15px 15px 15px;
    font-size: 12pt;
  }
  .floatmessage.down .wrapper{
    transform: scale(1.0);
    top: 60px;
  }
}





footer {
  padding-top: 90px;
  padding-bottom: 300px;
  border-top: solid 1.5px var(--gray-230);
}

@media print {
  body {
    background-color: white !important;
    color: black !important;
  }
  .outwrapper {
    width: 100%;
    max-width: 100%;
    padding: 0;
    margin: 0 auto;
  }
  .floatthing,
  #cursor,
  #footer {
    display: none !important;
  }
  @page {
    margin: 2cm;
  }
}



.none {
  display: none !important;
}
.opa0 {
  opacity: 0 !important;
}
.btn {
  cursor: pointer;
}
.layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}