body { background-color: rgba(0, 0, 0, 0.7);}

#header .inner,
#content .inner,
#footer .inner { margin: 0 auto; width: 100%; height: 100%; max-width: 95%;}

/*헤더*/
#header .inner { margin: 120px auto 0;}
#header .inner a {display: block; font-size: 45px; text-align: center;font-family: 'Malgun Gothic', sans-serif; color: #00CCFF; font-weight: 700;}

/*네비*/
.menu_nav { border-bottom: 1px solid rgba(255, 255, 255, 0.1); margin-top: 40px;}
.menu_nav .inner { margin: 0 auto; width: 100%; max-width: 95%;}
.menu_nav .inner ul { display: flex; flex-direction: row; justify-content: center; gap: 2%;}
.menu_nav .inner ul li{width: 15%;}

.menu_nav .inner ul li a { display: block; font-size: 16px; font-weight: 500; color: #ccc; border-radius: 4px;
    transition: all 0.2s ease; text-align: center;padding: 10px 0;}

.menu_nav .inner ul li a:hover { color: #00CCFF; background-color: rgba(0, 204, 255, 0.1);}
.menu_nav .inner ul li a.active { color: #00CCFF; font-weight: 700; background-color: rgba(0, 204, 255, 0.1);}

/*메인페이지 컨텐츠*/
#content { margin: 80px auto 0;}
#content .inner ul { display: flex; flex-direction: row; flex-wrap: wrap; gap: 40px 2%; justify-content: center;}
#content .inner ul li { display: flex; flex-direction: column; padding: 12px; background: olivedrab; border-radius: 5%; opacity: 0.7; width: 20%;}
#content .inner ul li:hover { opacity: 1;}
#content .inner ul li a { color: #fff; font-size: 18px; font-weight: 500; text-align: center; display: flex; flex-direction: column; gap: 15px;}
#content .inner ul li a span { display: block; width: 100%; height: 100%;}

/*stone*/
#stone .wrapper { display: flex; flex-direction: column; max-width: 1400px; max-width: 90%; align-items: center; margin: 80px auto 0; box-sizing: border-box;}
#stone .content { flex-shrink: 0; width: 100%; max-width: 700px; }
#stone h1 { font-size: 40px; color: #f1f1f1; margin-bottom: 20px; }
#stone .title-img{display: flex; justify-content: center; margin-bottom: 30px;}
#stone .title-img span{display: block;}
#stone .title-img span img{display: block; width: 100%;}
#stone .intro-text { line-height: 1.4; font-size: 20px; color: #eee; margin-bottom: 40px;}
#stone .choice-container { display: flex;gap: 20px;}
#stone .choice-btn { line-height: 1.3; padding: 15px 0; text-decoration: none; font-weight: 700; border-radius: 8px; transition: 0.3s; text-align: center;
flex: 1; font-size: 18px;}
#stone .btn-direct {background-color: #00CCFF; color: #000;}
#stone .btn-direct:hover { background-color: #0099CC; transform: translateY(-3px);}
#stone .choice-wrap { display: flex; flex-direction: column; gap: 40px; margin-top: 40px;}
#stone .btn-store {display: block; border: 2px solid #00CCFF; color: #00CCFF; }
#stone .btn-store:hover {background-color: rgba(0, 204, 255, 0.1); transform: translateY(-3px);}
#stone .spacer { flex-grow: 1;}
#stone .link-delete { margin-top: 20px; display: inline-block; color: #ff4d4d; text-decoration: none; font-size: 16px;}

/*block*/
#block .wrapper { display: flex; flex-direction: column; max-width: 1400px; max-width: 90%; align-items: center; margin: 80px auto 0; box-sizing: border-box;}
#block .content { flex-shrink: 0; width: 100%; max-width: 700px; }
#block h1 { font-size: 40px; color: #f1f1f1; margin-bottom: 20px; }
#block .title-img{display: flex; justify-content: center; margin-bottom: 30px;}
#block .title-img span{display: block;}
#block .title-img span img{display: block; width: 100%;}
#block .intro-text { line-height: 1.4; font-size: 20px; color: #eee; margin-bottom: 40px;}
#block .choice-container { display: flex;gap: 20px;}
#block .choice-btn { line-height: 1.3; padding: 15px 0; text-decoration: none; font-weight: 700; border-radius: 8px; transition: 0.3s; text-align: center;
flex: 1; font-size: 18px;}
#block .btn-direct {background-color: #00CCFF; color: #000;}
#block .btn-direct:hover { background-color: #0099CC; transform: translateY(-3px);}
#block .choice-wrap { display: flex; flex-direction: column; gap: 40px; margin-top: 40px;}
#block .btn-store {display: block; border: 2px solid #00CCFF; color: #00CCFF; }
#block .btn-store:hover {background-color: rgba(0, 204, 255, 0.1); transform: translateY(-3px);}
#block .spacer { flex-grow: 1;}
#block .link-delete { margin-top: 20px; display: inline-block; color: #ff4d4d; text-decoration: none; font-size: 16px;}

/*cosmic*/
#cosmic .wrapper { display: flex; flex-direction: column; max-width: 1400px; max-width: 90%; align-items: center; margin: 80px auto 0; box-sizing: border-box;}
#cosmic .content { flex-shrink: 0; width: 100%; max-width: 700px; }
#cosmic h1 { font-size: 40px; color: #f1f1f1; margin-bottom: 20px; }
#cosmic .title-img{display: flex; justify-content: center; margin-bottom: 30px;}
#cosmic .title-img span{display: block;}
#cosmic .title-img span img{display: block; width: 100%;}
#cosmic .intro-text { line-height: 1.4; font-size: 20px; color: #eee; margin-bottom: 40px;}
#cosmic .choice-container { display: flex;gap: 20px;}
#cosmic .choice-btn { line-height: 1.3; padding: 15px 0; text-decoration: none; font-weight: 700; border-radius: 8px; transition: 0.3s; text-align: center;
flex: 1; font-size: 18px;}
#cosmic .btn-direct {background-color: #00CCFF; color: #000;}
#cosmic .btn-direct:hover { background-color: #0099CC; transform: translateY(-3px);}
#cosmic .choice-wrap { display: flex; flex-direction: column; gap: 40px; margin-top: 40px;}
#cosmic .btn-store {display: block; border: 2px solid #00CCFF; color: #00CCFF; }
#cosmic .btn-store:hover {background-color: rgba(0, 204, 255, 0.1); transform: translateY(-3px);}
#cosmic .spacer { flex-grow: 1;}
#cosmic .link-delete { margin-top: 20px; display: inline-block; color: #ff4d4d; text-decoration: none; font-size: 16px;}

/*quizapp*/
#quizapp .wrapper { display: flex; flex-direction: column; max-width: 1400px; max-width: 90%; align-items: center; margin: 80px auto 0; box-sizing: border-box;}
#quizapp .content { flex-shrink: 0; width: 100%; max-width: 700px; }
#quizapp h1 { font-size: 40px; color: #f1f1f1; margin-bottom: 20px; }
#quizapp .title-img{display: flex; justify-content: center; margin-bottom: 30px;}
#quizapp .title-img span{display: block;}
#quizapp .title-img span img{display: block; width: 100%;}
#quizapp .intro-text { line-height: 1.4; font-size: 20px; color: #eee; margin-bottom: 40px;}
#quizapp .choice-container { display: flex;gap: 20px;}
#quizapp .choice-btn { line-height: 1.3; padding: 15px 0; text-decoration: none; font-weight: 700; border-radius: 8px; transition: 0.3s; text-align: center;
flex: 1; font-size: 18px;}
#quizapp .btn-direct {background-color: #00CCFF; color: #000;}
#quizapp .btn-direct:hover { background-color: #0099CC; transform: translateY(-3px);}
#quizapp .choice-wrap { display: flex; flex-direction: column; gap: 40px; margin-top: 40px;}
#quizapp .btn-store {display: block; border: 2px solid #00CCFF; color: #00CCFF; }
#quizapp .btn-store:hover {background-color: rgba(0, 204, 255, 0.1); transform: translateY(-3px);}
#quizapp .spacer { flex-grow: 1;}
#quizapp .link-delete { margin-top: 20px; display: inline-block; color: #ff4d4d; text-decoration: none; font-size: 16px;}

/*mini*/
#mini .wrapper { display: flex; flex-direction: column; max-width: 1400px; max-width: 90%; align-items: center; margin: 80px auto 0; box-sizing: border-box;}
#mini .content { flex-shrink: 0; width: 100%; max-width: 700px; }
#mini h1 { font-size: 40px; color: #f1f1f1; margin-bottom: 20px; }
#mini .title-img{display: flex; justify-content: center; margin-bottom: 30px;}
#mini .title-img span{display: block;}
#mini .title-img span img{display: block; width: 100%;}
#mini .intro-text { line-height: 1.4; font-size: 20px; color: #eee; margin-bottom: 40px;}
#mini .choice-container { display: flex;gap: 20px;}
#mini .choice-btn { line-height: 1.3; padding: 15px 0; text-decoration: none; font-weight: 700; border-radius: 8px; transition: 0.3s; text-align: center;
flex: 1; font-size: 18px;}
#mini .btn-direct {background-color: #00CCFF; color: #000;}
#mini .btn-direct:hover { background-color: #0099CC; transform: translateY(-3px);}
#mini .choice-wrap { display: flex; flex-direction: column; gap: 40px; margin-top: 40px;}
#mini .btn-store {display: block; border: 2px solid #00CCFF; color: #00CCFF; }
#mini .btn-store:hover {background-color: rgba(0, 204, 255, 0.1); transform: translateY(-3px);}
#mini .spacer { flex-grow: 1;}
#mini .link-delete { margin-top: 20px; display: inline-block; color: #ff4d4d; text-decoration: none; font-size: 16px;}

/*푸터*/
#footer { margin: 80px auto 30px;}
#footer .inner { display: flex; flex-direction: row; align-items: center; justify-content: space-between;}
#footer .inner .footerlogo { font-size: 25px; color: #aaa;}
#footer .inner .footerinfo { display: flex; gap: 20px;}
#footer .inner .footerinfo p { font-size: 15px; color: #aaa; font-weight: 400;}
#footer .inner .footerinfo p a { font-weight: 700;}






@media screen and (max-width:1024px) {
    #content .inner ul {gap: 40px 8%;}
    #content .inner ul li {width: 35%;}
}

@media screen and (max-width: 820px) {
    .choice-container { flex-direction: column; gap: 40px;}
}

@media screen and (max-width:768px) {
    #header .inner,
    #content .inner,
    #footer .inner {max-width: 98%;}
    /*헤더*/
    #header .inner { margin: 16.927vw auto 0;}
    #header .inner a {font-size: 7.161vw;}

    /*네비*/
    .menu_nav {margin-top: 6.510vw;}
    .menu_nav .inner ul {flex-wrap: wrap; gap: 1.953vw 2%;}
    .menu_nav .inner ul li {width: 30%;}
    .menu_nav .inner ul li a { font-size: 3.385vw;border-radius: 1.302vw; padding: 1.302vw 0;}

    /*메인페이지*/
    #content { margin: 11.719vw auto 0;}
    #content .inner ul { gap: 6.510vw 4%;}
    #content .inner ul li {width: 41.5%; padding: 2.563vw;}
    #content .inner ul li a {font-size: 3.646vw; gap: 3.255vw;}

    /*stone*/
    #stone h1 {font-size: 6.510vw; margin-bottom: 3.906vw;}
    #stone .title-img{margin-bottom: 5.208vw;}
    #stone .wrapper { align-items: center; margin: 11.719vw auto 0; box-sizing: border-box;}
    #stone .intro-text { font-size: 3.906vw; margin-bottom: 6.510vw;}

    /*cosmic*/
    #cosmic h1 {font-size: 6.510vw; margin-bottom: 3.906vw;}
    #cosmic .title-img{margin-bottom: 5.208vw;}
    #cosmic .wrapper { align-items: center; margin: 11.719vw auto 0; box-sizing: border-box;}
    #cosmic .intro-text { font-size: 3.906vw; margin-bottom: 6.510vw;}

    /*block*/
    #block h1 {font-size: 6.510vw; margin-bottom: 3.906vw;}
    #block .title-img{margin-bottom: 5.208vw;}
    #block .wrapper { align-items: center; margin: 11.719vw auto 0; box-sizing: border-box;}
    #block .intro-text { font-size: 3.906vw; margin-bottom: 6.510vw;}
    
    /*mini*/
    #mini h1 {font-size: 6.510vw; margin-bottom: 3.906vw;}
    #mini .title-img{margin-bottom: 5.208vw;}
    #mini .wrapper { align-items: center; margin: 11.719vw auto 0; box-sizing: border-box;}
    #mini .intro-text { font-size: 3.906vw; margin-bottom: 6.510vw;}

    /*quizapp*/
    #quizapp h1 {font-size: 6.510vw; margin-bottom: 3.906vw;}
    #quizapp .title-img{margin-bottom: 5.208vw;}
    #quizapp .wrapper { align-items: center; margin: 11.719vw auto 0; box-sizing: border-box;}
    #quizapp .intro-text { font-size: 3.906vw; margin-bottom: 6.510vw;}
    
    /* 버튼 디자인 */
    #quizapp .choice-container { gap: 3.906vw;}
    #quizapp .choice-btn { padding: 3.255vw 0; font-size: 3.646vw;}
    #quizapp .choice-wrap { gap: 6.510vw; margin-top: 6.510vw; }
    #quizapp .link-delete { margin-top: 3.906vw; font-size: 3.385vw;}

    /*푸터*/
    #footer { margin: 11.719vw auto 5.208vw;}
    #footer .inner { flex-direction: column; gap: 1.302vw}
    #footer .inner .footerlogo { font-size: 4.557vw;}
    #footer .inner .footerinfo { flex-direction: column; gap: 1.302vw;}
    #footer .inner .footerinfo p { font-size: 3.255vw;}
}