/* 폰트를 정한다. */
/* https://noonnu.cc/font_page/415 */
@font-face {
    font-family: 'ChosunGu';
    src: url('https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@1.0/ChosunGu.woff') format('woff');
    font-display: swap;
}

/* 공통된 부분을 정한다. */
:root {
    /* header의 높이다. */
    --header-height: 5rem;
    /* nav의 너비다. header 너비를 기준으로 정한다. */
    /* mobile에서는 너비를 작게 한다.*/
    --nav-width: 95%;
    /* 모바일 화면에서 메뉴의 너비다. */
    --mobile-menu-width: 600px;
    /* 사이드바의 너비다. */
    --side-width: 400px;
    /* 사이드바는 부모 높이의 95%로 높이를 정한다. */
    --side-height: 95%;
    /* main에서 center div의 너비를 정한다. */
    --app-width: 650px;    
    /* 여백 등을 통일하기 위해서 값을 정한다.*/    
    --gap-1: 10px;
    --gap-2: 15px;
    --gap-3: 20px;    
    /* 폰트 등의 크기를 정한다. */
    --fontsize-h1: 1.5rem;
    --fontsize-h2: 1.4rem;
    --fontsize-h3: 1.3rem;
    --fontsize-h4: 1.2rem;
    --fontsize-p: 1.2rem;
    --fontsize-example: 1.1rem;
    --fontsize-basic: 1rem;  
    --fontsize-mobile-placeholder: 0.9rem;
    --fontsize-small: 0.8rem;  
    /* 하얀색이다. */   
    --white-1: #fefeff;
    /* 검은색이다. */    
    --black-1: #222;   
    /* 테두리 관련이다.*/
    --border-light-gray: #d9d9d9;    
    --box-shadow-1: rgba(0,0,0,0.2);
    --box-shadow-2: rgba(0,0,0,0.4);   
}
/* 리셋을 한다. */
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
    /* 모바일에서 클릭했을 때 파란색 부분이 나오지 않도록 한다.*/
    -webkit-tap-highlight-color: transparent !important;
}
/* css 클래스를 만들어서 사용한다. */
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}
.flex-center-col {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.flex-start-col {
    display: flex;
    flex-direction: column;
    /* 위에서 부터 정렬한다. */
    justify-content: flex-start;
    align-items: center;
}
body,
html {
    /* height를 100%로 한다. */
    height: 100%;
    /* 더이상 줄어들지 않기 위해서 min-height를 설정한다. */   
    /* min-height 값이 너무 크면 모바일에서 아래 공간이 생긴다. */
    min-height: 400px;
}
html {
    /* 부드럽게 움직이게 한다. */
    scroll-behavior: smooth;
}
body {
    --font-title : 'ChosunGu';
    --font-basic : 'ChosunGu';
    /* mobile에서 일단 메뉴가 보이지 않도록 한다. */
    /* overflow-x를 설정하지 않으면 mobile에서 메뉴가 나왔을 때 아래에 공간이 생긴다. */
    overflow-x: hidden;
    /* 위에서 애드센스 앵커 광고가 나올 때 레이아웃이 깨지지 않기 위해서 설정한다. */
    padding: 0 !important;
    max-width: 100%;
    /* body에서 폰트를 정한다. */
    font-family: var(--font-basic);
    /* 드래그를 하지 못하게 한다. */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}
li {
    /* 앞에 디스크 모양이 나오지 않게 한다. */
    list-style: none;
}
a,
a:hover,
a:visited {
    /* 밑줄이 없도록 한다. */
    text-decoration: none;
    color: #000000;
}
button {
    /* 버튼이 테두리를 없앤다. */
    outline: 0;
    border: none;
    /* 버튼은 기본 폰트가 있어서 font-familiy를 정한다. */
    font-family: var(--font-basic);
    cursor: pointer;
}
input{
  /* input은 기본 폰트가 있어서 font-familiy를 지정한다. */
  font-family: var(--font-basic);
}
input::placeholder{
  /* placeholder는 기본 폰트가 있어서 font-familiy를 지정한다. */
  font-family: var(--font-basic);
}

/* 로딩화면이다. */
/* body 안에서 가장 위에 있다. */
.loader-container {
    position: fixed;
    top: 0;
    left: 0;
    /* 꽉 차게 한다. */
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    background: var(--second-color);
}
/* 1초 있다가 사라진다. */
.loader-container.hidden {
    animation: fadeOut 1s forwards;
}
@keyframes fadeOut {
    50% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        visibility: hidden;
    }
}
.loader {
    animation: rotate 1s infinite;
    height: 50px;
    width: 50px;
}
.loader:after,
.loader:before {
    border-radius: 50%;
    content: '';
    display: block;
    height: 20px;
    width: 20px;
}
.loader:before {
    animation: ball1 1s infinite;
    background: #ffffff;
    box-shadow: 30px 0 0 #ffffff;
    margin-bottom: var(--gap-1);
}
.loader:after {
    animation: ball2 1s infinite;
    background: #ffffff;
    box-shadow: 30px 0 0 #ffffff;
}
@keyframes rotate {
    0%   { transform: rotate(0deg) scale(0.8); }
    50%  { transform: rotate(360deg) scale(1.2); }
    100% { transform: rotate(720deg) scale(0.8); }
}
@keyframes ball1 {
    0%   { box-shadow: 30px 0 0 #ffffff; }
    50%  { box-shadow: 0 0 0 #ffffff; margin-bottom: 0; transform: translate(15px, 15px); }
    100% { box-shadow: 30px 0 0 #ffffff; margin-bottom: var(--gap-1); }
}
@keyframes ball2 {
    0%   { box-shadow: 30px 0 0 #ffffff; }
    50%  { box-shadow: 0 0 0 #ffffff; margin-top: -20px; transform: translate(15px, 15px); }
    100% { box-shadow: 30px 0 0 #ffffff; margin-top: 0; }
}

/* gametoquiz logo다. 다른 개별 게임과 다르다. */
.logo-container{
    padding: var(--gap-1) 0; 
}
.logo-container a{
    display: block;   
}
.logo-container p {
    color: var(--site-color-1);
    font-size: var(--fontsize-h2);
    font-weight: bold;
    text-shadow: 2px 1px #000000;
}
.logo-img{
    display: block;    
    height: 58px;
    background: #ffffff;
    border-radius: var(--gap-2);
    overflow: hidden;    
    transition: 0.2s;
}
.logo-img:hover{
    transform: scale(1.1);
}
/* 개별 로고다. */
/* gametoquiz에서는 삭제한다. */
/* logo는 게임마다 다를 수 있다. */
.logo p {
    color: var(--site-color-1);
    font-size: var(--fontsize-h2);
    font-weight: bold;
    text-shadow: 2px 1px #000000;
}


main {
    width: 100%;
    /* 위에 header 높이만큼 공간을 둔다. */
    margin-top: var(--header-height);
    height: calc(100% - var(--header-height));
    display: flex;
}
/* 가운데 부분을 정한다.*/
/* 게임은 가운데 있고 양쪽에 사이드바가 있다. 여기에 광고 등을 넣는다. */
main .center {
    width: var(--app-width);
    height: 100%;
    /* 가운데 정렬한다. */
    margin: 0 auto;
}
aside {
    /* --gap-main만큼 padding을 준다. */
    /* header와 약간의 공백을 준다. */
    padding: var(--gap-3);
}
/* 같은 것은 모아서 한다. */
.left,
.right {
    flex: 1;
    /* height: 100%를 안 하니깐 sticky가 된다.*/
    height: auto;
}
.sidebar {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    /* 가운데 정렬한다. */
    margin: 0 auto;
    width: 100%;
    /* 자식에 높이만큼 차지한다. */
    height: auto;
    max-width: var(--side-width);
}
.side-title {
    padding: var(--gap-1);
}
.side-title h2 {
    font-size: var(--fontsize-h2);
    font-family: var(--font-title);
    text-align: center;
    font-weight: bold;
}
/* 제목 부분의 padding을 정한다.  */
.page-title {
    padding: var(--gap-3);
    /* 모바일에서는 --gap-small로 정한다. */
}
.page-title h1 {
    font-size: var(--fontsize-h1);
    font-family: var(--font-title);
    font-weight: bold;
    word-break: keep-all;
    text-align: center;
}

/* youtube 또는 form이 있다. */
/* 게임 화면 아래에 있다. */
/* main 태그 아래에 있다. */
.under-main{
    /* 가운데 정렬한다. */
    margin: 0 auto;
    width: var(--app-width);
    /* 높이를 최소값으로 정하지 않아도 된다. */
}

/* footer다. */
.footer {
    width: 100%;
    /* 양  */
    padding: var(--gap-3) 30px 50px;
    /* 위에 공간을 둔다. */
    margin-top: var(--gap-1);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap-1);
    /* 위쪽 모서리를 둥글게 한다. */
    border-radius: var(--gap-3) var(--gap-3) 0 0;
    box-shadow: 0 0 5px var(--box-shadow-1);
    background: var(--second-color);
    font-size: var(--fontsize-example);
}
/* 중요한 정보를 알려준다. */
.footer-menu {
    display: flex;
    gap: var(--gap-1);
}
.footer-menu h2 {
    padding: 5px;
    font-size: var(--fontsize-p);
    display: flex;
    justify-content: center;
    align-items: center;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0 0 5px var(--box-shadow-2);
}
.footer-menu ul {
    position: relative;
    display: grid;
    grid-template-columns: auto auto auto;
    gap: var(--gap-3);
}
.footer-menu ul li {
    /* 모바일에서 display: flex를 하면 주소가 세로로 써진다.  */
    display: flex;
    justify-content: flex-start;
    align-self: center;
}
.footer-menu ul li a {
    color: #000000;
}
.footer-menu ul li a:visited {
    color: #000000;
}
.footer-menu ul li a:hover {
    color: #ffffff;
}
/* 회사이름과 같은 항목이다. */
.footer-menu span {
    font-weight: bold;
}
.footer-notice ul {
    /* margin-left와 padding-right를 설정해서 정렬한다. */
    margin-left: var(--gap-3);
    padding-right: var(--gap-3);
}
/* 디스크 모양을 정한다. */
.footer-notice ul li {
    list-style-type: disc;
}
/* copyright를 보여주는 부분이다. */
.copyright p {
    text-align: center;
}

@media screen and (max-width: 1470px) {
    aside {
        /* aside가 보이지 않도록 한다. */
        /* database가 나오는 부분이 .center와 정렬이 될 수 있도록 한다. */
        display: none !important;
    }
}

/* 가운데 부분의 너비와 같을 때다. */
@media screen and (max-width: 650px) {
    :root {
        --nav-width: 90%;
        /* 100%로 너비가 화면 전체가 되도록 한다. */
        --app-width: 100%;        
    }
    .page-title {
        padding: var(--gap-1);
    }    
}

/* mo.js 관련이다. */
[data-name="mojs-shape"] {
    /* 가장 위에 있도록 한다. */
    z-index: 100 !important;
    /* 클릭할 수 없도록 한다. */
    /* 게임을 할 때 위에 있어서 아래 있는 블록을 클릭하지 못하는 경우가 있다. */
    pointer-events: none;
}