/* 광고가 들어가는 클래스다. */
ins,
.adsbygoogle {    
    z-index: 1 !important;
    /* 넘치지 않도록 한다. */
    overflow: hidden;
}
/* 앵커 광고다. */
.adsbygoogle-noablate{
    /* 맨 위에 있도록 한다. */
    z-index: 10 !important;
}
/* 본문에 들어가는 반응형 광고다. */
.responsive-ad {    
    width: 100%;
    height: 300px;
    display: flex;   
    margin: var(--gap-1) 0;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}
/* 광고가 넘치지 않도록 한다. */
/* .adsense는 광고다. */
.responsive-ad .adsense {
    margin: 0 !important;
    padding: 0 !important;
    width: 600px !important;
    height: 300px !important;
    z-index: 1 !important;
    overflow: hidden;
}

/* 광고 위치다.*/
/* sticky가 되려면 부모의 display가 flex이면 안 된다. */
/* 화면 가운데에 고정한다. */
.center-sticky {
    position: sticky;   
    /* 화면의 1/2에서 400px을 빼고 --gap-main의 2배한 값을 더한다. */
    /* 원래는 300px를 뺐다. 광고 크기가 따라서 빼는 값을 다르게 한다. 빼는 값이 크면 광고가 위로 올라간다. */
    top: calc(50vh - 400px + (var(--gap-3) * 2));
}
/* 위쪽에 고정한다. */
.up-sticky {    
    position: sticky;
    /* header 높이에서 --gap-main을 더한다. */
    top: calc(var(--header-height) + var(--gap-3));
}
/* 사이드바에 직접 광고를 만들어서 넣는다. */
.side-ad{       
    width: 90%;
    max-width: 400px;
    margin: 0 auto;
    overflow: hidden;   
}
.side-ad img{
    transition: 0.2s;
    transform-origin: center bottom;
}
.side-ad img:hover{
    transform: scale(1.05);    
}

/* choice-ad-wrapper 안에 광고를 넣는다. */
.choice-ad-wrapper{
    border-radius: var(--gap-1);
    box-shadow: 0 0 3px var(--box-shadow-2);
    overflow: hidden;
}
.choice-ad-link{
    display: block;
}
.choice-ad-img{
    /* display: block을 해야 아래 공간이 생기지 않는다.*/
    display: block;
    width: 100%;
}
.choice-ad-title{
    display: flex;
    justify-content: center;
    align-items: center;
    padding: var(--gap-1);
    font-size: var(--fontsize-p);
    font-weight: bold;    
}

/* mobile 메뉴 광고다. */
/* header css에 .menu-ad를 설정했다. */
.menu-ad .choice-ad-link{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    border-radius: var(--gap-2);
    overflow: hidden;
    box-shadow: 0 0 3px var(--box-shadow-1);
    transition: 0.2s;
}

/* background-img로 이미지를 정한다. */
.menu-ad .choice-ad-img{
   width: 280px;
   height: 100%;
   flex: 1;
   background-position: center; 
   background-size: cover;
}

/* multiple 광고다. */
/* 화면 크기에 따라서 정사각형 또는 가로 광고를 보여준다. */
.pc-ad{
    width: 100%;
    height: 300px;   
    display: none;
    /* 넘치는 부분은 보이지 않도록 한다. */
    overflow: hidden;    
}
.pc-ad.show{
    display: flex;
    justify-content: center;
    align-self: center;
}
.mobile-ad {
    width: 100%;
    /* 100px를 넘지 않도록 한다.*/
    height: 100px;  
    display: none;    
    /* 넘치는 부분은 보이지 않도록 한다. */
    overflow: hidden;
}
.mobile-ad.show{
    display: flex;
    justify-content: center;
    align-items: center;  
}
.retry-ad-container{
    
}
/* 광고관련 */

@media screen and (max-width: 960px) { 
    /* 정사각형 모양이 되도록 한다. */
    .responsive-ad{
        height: 280px;
    }
    /* mobile 광고 크기로 바꾼다. */   
    .responsive-ad .adsense {
        margin: 0 !important;
        padding: 0 !important;
        width: 336px !important;
        height: 280px !important;
        overflow: hidden !important;
    }   
}