/* Structure.css */
* {padding: 0;margin: 0;box-sizing: border-box;}
html, body {height: 100%;background-color:var(--bg-base);}
body {margin:0; padding:0; display:flex; flex-direction:column;overflow-x: hidden; }
#content {width:100% }
img, ul, ol {display: block;}
ul, ol {list-style: none;}
#account,#system {display: flex; height: 100%; justify-content: center; align-items: center;}
#Message {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 52px;
    padding: 32px 20px;
    color: #fff;
    font-weight: 500;
    z-index: 9999;
}
#Message p {
    margin: 0;
}
#content {
    display: grid;
    grid-template-areas:
        "title"
        "header"
        "menu"
        "index"
        "main"
        "footer";
    grid-template-rows: auto auto auto auto 1fr auto;
    padding-top: 4rem;
    padding-bottom: 5rem;
}
.hide, .hidden{display: none !important;}
.title {grid-area: title;position: fixed;top: 0;left: 0;width: 100%;height: 4rem;display: flex;justify-content: space-between;align-items: center;z-index: 1100;}
.header {grid-area: header;height: 240px;}
.menu {grid-area: menu;position: fixed;bottom: 0;left: 0;width: 100%;height: 4.5rem;display: flex;justify-content: space-around;align-items: center;z-index: 950;}
.index {grid-area: index;display:flex; flex-direction:column;min-height: 200px;position: relative;}
.footer {grid-area: footer;text-align: center;}
.sidebar {display: none;}
.sidebar.open {display: block;position: fixed;top: 4rem;bottom: 4.5rem;left: 20vw;right: 20vw;max-width: 300px;z-index: 1000;}
.main {grid-area: main;display: flex;flex-direction: column;min-height: 200px;max-width: 100vw;padding:16px 0;overflow: hidden;}
#content.sidebar-active::after {content: "";display: block;position: fixed;inset: 0;}
.icon {aspect-ratio: 1 / 1;background-size: cover;background-position: center;}
.sprite {background-image: url('/design/icon/sprite.webp');background-repeat: no-repeat;background-size: 1000% 300%;}

.block{
	flex: auto;
	margin: 20px 0;
	padding: 20px;
	border: 1px solid;
	border-radius: 9px;}
.half{flex:auto;width: auto !important;}
.wall{min-height: 100px;}
.grid{display: flex;flex-direction: column;justify-content: space-around;gap:3vw;padding:3vw;}
.grid-row{display:flex;gap:3vw;}
.canvas {
    margin: 20px 4vw;
    padding: 4px 10px;
    border: 1px solid var(--border-dark);
    border-radius: 9px;
}
@media (min-width: 600px) {
	#account .main {width:90%;height:90%;}
	#system .main {width:90%;height:90%;}
    #content {
        grid-template-areas:
            "title header"
            "menu menu"
            "index index"
            "main main"
            "footer footer";
        grid-template-columns: 1fr 2fr;
        grid-template-rows: auto auto auto 1fr auto;
        padding: 0;}
    .title {position: relative;width: auto;height: 240px;margin: 36px 0 20px 50px;}
    .header {margin: 36px 50px 20px 0;overflow: hidden;}
    .menu {position: static;width: auto;height: auto;margin: 0 50px;padding: 10px 0;}
    .menu li {aspect-ratio: 3 / 2;width:100%;height: auto;margin: 6px;}
    .index {display: grid;grid-template-columns: 2fr 1fr;min-height: 250px;margin: 0 50px;}
    .sidebar {display: block;position: static;width: auto;height: auto;}
	.main {padding:16px 0;min-height: 300px;margin: 10px 50px;border: solid 1px #181818;border-radius: 9px;}
    .toggle-btn {display: none !important;}

}
@media (min-width: 1000px) {
    #content {grid-template-columns: 1fr 3fr;}
	.main {padding: 16px 60px;min-height: 300px;}
}