/* 
    Created on : 2026年4月10日, 08:39:15
    Author     : sarkuya
*/

html, body {
    margin: 0;
    padding: 0;
}

html {
    box-sizing: border-box;
    
    & * {
        box-sizing: inherit;
    }
    
    height: 100vh;

    display: grid;
    overflow: hidden;
    
    > body {
        min-height: 0;
        height: 100%;
        
        overflow: hidden;
        
        position: relative;

        > #canvas-container {
            min-height: 0;
            overflow: hidden;
            
            width: 100%;
            height: 100%;
            
            position: relative;
            
            > canvas#webgl-canvas {
                display: block;
                width: 100%;
                height: 100%;
            }
            
            > div.viewport-border {
                position: absolute;
                box-sizing: border-box;
                border: 1px solid gray;
                
                &[selected] {
                    border-width: 2px;
                    border-color: #ccc;
                }
            }
            
            > div#pc-container {
                position: absolute;
                
                overflow: hidden;
                
                left: 0;
                top: 0;

                max-width: 33%;
                max-height: 98%;
                margin: 1em;

                display: none;
                grid-template-rows: minmax(auto, 1fr);

                border: .1px solid cyan;
                background-color: #333A;

                > ul.pageconsole-output {
                    margin: 0.5em;
                    overflow: scroll;
                }
            }
        }
    }
}