@charset "UTF-8";

@import url("component.css");

/* init setting */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html { 
	-moz-text-size-adjust: none;
  	-webkit-text-size-adjust: none;
	text-size-adjust: none;
	scroll-behavior: smooth;
}

body { margin:0; overflow:hidden; }

img { display:block; }
/* init setting */


/* overflow */
[overflow] { -webkit-overflow-scrolling:touch; overflow:auto; }
[overflow]::-webkit-scrollbar { display: none; }
/* overflow */

/* animation */
@keyframes fadeinL {
      from {
         left:100%;
      }
      to {
         left:0;
      }
   }

   @keyframes fadeinR {
      from {
         left:-100%;
      }
      to {
         left:0;
      }
   }

   @keyframes fadeoutL {
      from {
         left:0;
      }
      to {
         left:-100%;
      }
   }

   @keyframes fadeoutR {
      from {
         left:0;
      }
      to {
         left:100%;
      }
   }
/* animation */


/* popup */
.popup .popup-back { background:black; opacity:.5; }
/* popup */


/* test */
._test:not(.test), ._dev:not(.dev), ._beta:not(.beta) { display:none !important; }
/* test */


/* debug */
[debug] { max-height:50vh; position:fixed; left:0; bottom:40px; z-index:10000000; color:white; font-size:8pt; }
[debug] > * { width:fit-content; margin-bottom:5px; padding:2px 4px; background:rgba( 0, 0, 0, 0.5 ); animation-duration:.3s; animation-name: slideIn; }
/* debug */


/* init start */

/* font */
html { font-family: "Noto Sans KR", sans-serif; }
/* font */

/* cursor */
[type=button][act]:hover,
label.radio:hover,
label.checkbox:hover { cursor:pointer; }
[type=button][disabled]:hover,
label.radio[disabled]:hover,
label.checkbox[disabled]:hover
{ cursor:not-allowed; }
/* cursor */

/* init end */

/* common */
@keyframes slideIn {
    from {
        margin-left: 50px;
    }

    to {
        margin-left: 0;
    }
}

@keyframes anime-rotate {
	0% {
		transform: rotate(0);
	}
	100% {
		transform: rotate(360deg);
	}
}

.material-symbols-outlined.spinner, 
.material-symbols-rounded.spinner 
{
	animation: anime-rotate 2s infinite linear;
}

/* timer */
[timer] { color:rgba(0,0,0, 0.4); }
[timer][cond=go] { color:rgba(0,0,0, 0.8); }
[timer][cond=over] { color:rgba(255,0,0, 0.6); }
/* timer */

/* google icon radio button start */
label.radio { display:inline-flex; margin:0; position:relative; align-items:center; font-weight:normal; font-size:1.1em; }
label.radio > [type=radio],
label.radio > [type=checkbox] { opacity:0; width:0; height:0; margin:0; }
label.radio > [type=radio] + span,
label.radio > [type=checkbox] + span { display:flex; align-items:center; font-size:1.4em; margin-right:5px; }
label.radio > [type=radio] + span:before, 
label.radio > [type=checkbox] + span:before { 
	content:"\f192"; 
	display:inline-block; 
	font-family:'Font Awesome 6 Free'; 
	font-weight:normal; 
	font-style:normal; 
	line-height:1; 
	letter-spacing:normal; 
	text-transform:none; 
	white-space:nowrap; 
	word-wrap:normal; 
	direction:ltr; 
	text-rendering:optimizeLegibility; 
	-webkit-font-smoothing:antialiased;
	color: #efefef;
}
label.radio > [type=radio]:checked + span:before,
label.radio > [type=checkbox]:checked + span:before { color:rgba(108,116,234,1); }
/* google icon radio button end*/

/* buttton start*/

/* button end*/

/* form-control start */
/* form-control end */


/* timer start */
/* timer end */