/* =================================================

 ROOMI 2.0
 GLOBAL RESPONSIVE SYSTEM

 手機版 RWD

================================================= */



/* ===============================
   基礎手機設定
================================ */


*{
    box-sizing:border-box;
}


img{
    max-width:100%;
    height:auto;
}


html,body{

    overflow-x:hidden;

}




/* ===============================
   Header / Navigation
================================ */


@media(max-width:768px){


header{

    width:100%;
}



nav{

    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    align-items:center;

    gap:12px;

}



nav a{

    font-size:18px;

    padding:8px 12px;

}



.logo{

    text-align:center;

    width:100%;

}




/* ===============================
   通用 Layout
================================ */


.container,
.wrapper,
.main-container{

    width:95% !important;

    margin:auto;

}




.row{

    flex-direction:column;

}




.column{

    width:100% !important;

}




/* ===============================
   通用卡片
================================ */


.card,
.panel,
.box{


    width:100% !important;

    margin:15px auto;


}



.card-title{

    font-size:24px;

}


}




/* =================================================

      ROOMI FORUM 討論版

================================================= */


@media(max-width:768px){


.forum-layout{

    display:flex;

    flex-direction:column;

}



.forum-left,
.forum-right{

    width:100% !important;

}



.forum-card{

    width:100% !important;

}



.topic-list{

    width:100%;

}


}





/* =================================================

      MEMBER CENTER

================================================= */


@media(max-width:768px){



.member-menu{


    width:95% !important;

}



.menu-grid{


    display:grid;

    grid-template-columns:1fr !important;

    gap:15px;


}



.menu-item{


    width:100%;

    text-align:center;


}



.member-profile{


    width:95% !important;


}



.avatar-frame{


    width:180px !important;

    height:180px !important;

    margin:auto;


}



.profile-card{


    width:100% !important;


}


}





/* =================================================

      MARKET / GACHA

================================================= */


@media(max-width:768px){


.market-grid,
.gacha-grid{


    grid-template-columns:1fr !important;


}



.item-card{


    width:100% !important;


}



}





/* =================================================

      Button

================================================= */


@media(max-width:768px){



button,
.btn{


    width:auto;

    max-width:90%;

}


}




/* =================================================

      大型圖片

================================================= */


@media(max-width:768px){



.hero-image{


    width:90%;

    margin:auto;


}



.banner{


    height:auto;

}



}






/* =================================================

      小手機補強

================================================= */


@media(max-width:430px){



body{

    font-size:14px;

}



nav a{

    font-size:16px;

}



h1{

    font-size:32px;

}



h2{

    font-size:24px;

}



}