/*전체*/
body {
    /*바깥쪽 여백 제거 */
    margin: 0;
    /*안쪽 여백 제거*/
    padding: 0;
    /*쉽게 정렬하는거 준비*/
    display: flex;
    /*세로로 정렬*/
    flex-direction: column;
}

/*헤더*/
header {
    /*가로로 화면 꽉 채우기*/
    width: 100vw;
    /*높이 고정*/
    height: 50px;
    /*좌우로만 안쪽으로 여백*/
    padding: 0 20px;
    /*배경색*/
    background-color: #2e3d86;

    /*정해진 사이즈 안으로 모두 집어넣기*/
    box-sizing: border-box;
    /*테두리*/
    border-bottom: 5px solid #19224d;
    /*글자색*/
    color: white;

    /*글자 사이즈*/
    font-size: 1rem;
    /*글자 굵게*/
    font-weight: bold;
    /*글자 높이*/
    line-height: 45px;
}

/*헤더 뺀 부분*/
main {
    /*matrix, graph 나란히 배치하기위한 준비*/
    display: flex;
    /*헤더를 뺀 높이*/
    height: calc(100vh - 50px);
}

/*이것저것 담을 왼쪽 박스*/
#leftbox {
    /*가로*/
    width: 205px;
    /*안쪽 여백*/
    padding: 5px;
    /*오른쪽 외각선*/
    border-right: 5px solid #19224d;
    /*정해진 사이즈 유지*/
    box-sizing: border-box;
    /*배경색*/
    background-color: white;

    /*글자색*/
    color: black;

    /*위치 조정용 부모 역할*/
    position: relative;
}

/*벡터표시*/
.vector{
    /*가로*/
    width: 190px;
    /*세로*/
    height: 40px;
    /*안쪽 여백*/
    padding: 5px;
    /*테두리*/
    border: 2.5px solid #19224d;
    /*정해진 사이즈 유지*/
    box-sizing: border-box;
    /*배경색*/
    background-color: white;

    /*글자색*/
    color: black;
    /*글자 높이 조정*/
    line-height: 20px;

    /*position 이 static 이 아닌 상위 개념을 찾아서 기준으로 움직임*/
    position: absolute;
    /*기준으로부터 위에서*/
    top: 5px;
    /*기준으로부터 왼쪽에서*/
    left: 5px;
}

/*단위벡터 표시*/
.unitvectorborder{
    /*가로*/
    width: 190px;
    /*세로*/
    height: 80px;
    /*안쪽 여백*/
    padding: 5px;
    /*테두리*/
    border: 2.5px solid #19224d;
    /*정해진 사이즈 유지*/
    box-sizing: border-box;
    /*배경색*/
    background-color: white;

    /*글자색*/
    color: black;

    /*position 이 static 이 아닌 상위 개념을 찾아서 기준으로 움직임*/
    position: absolute;
    /*기준으로부터 위에서*/
    top: 50px;
    /*기준으로부터 왼쪽에서*/
    left: 5px;
}

/*i 벡터*/
.unitvectori{
    /*가로*/
    width: 185px;
    /*세로*/
    height: 37.5px;
    /*안쪽 여백*/
    padding: 5px;
    /*정해진 사이즈 유지*/
    box-sizing: border-box;
    /*배경색*/
    background-color: white;

    /*글자색*/
    color: black;
    /*글자 높이 조정*/
    line-height: 18.75px;

    /*position 이 static 이 아닌 상위 개념을 찾아서 기준으로 움직임*/
    position: absolute;
    /*기준으로부터 위에서*/
    top: 0px;
    /*기준으로부터 왼쪽에서*/
    left: 0px;
}

/*j 벡터*/
.unitvectorj{
    /*가로*/
    width: 185px;
    /*세로*/
    height: 37.5px;
    /*왼쪽 여백*/
    padding: 5px;
    /*정해진 사이즈 유지*/
    box-sizing: border-box;
    /*배경색*/
    background-color: white;

    /*글자색*/
    color: black;
    /*글자 높이 조정*/
    line-height: 18.75px;

    /*position 이 static 이 아닌 상위 개념을 찾아서 기준으로 움직임*/
    position: absolute;
    /*기준으로부터 위에서*/
    top: 37.5px;
    /*기준으로부터 왼쪽에서*/
    left: 0px;
}

/*행렬 순서 기록*/
.matrixlog{
    /*가로*/
    width: 190px;
    /*맞춤형 세로*/
    height: calc(100vh - 325px);
    /*안쪽 여백*/
    padding: 5px;
    /*테두리*/
    border: 2.5px solid #19224d;
    /*정해진 사이즈 유지*/
    box-sizing: border-box;
    /*배경색*/
    background-color: white;

    /*글자색*/
    color: black;

    /*position 이 static 이 아닌 상위 개념을 찾아서 기준으로 움직임*/
    position: absolute;
    /*기준으로부터 위에서*/
    top: 135px;
    /*기준으로부터 왼쪽에서*/
    left: 5px;
}

/*행렬 입력창*/
.matrixinput{
    /*가로*/
    width: 190px;
    /*세로*/
    height: 130px;
    /*왼쪽 여백*/
    padding: 5px;
    /*테두리*/
    border: 2.5px solid #19224d;
    /*정해진 사이즈 유지*/
    box-sizing: border-box;
    /*배경색*/
    background-color: white;

    /*글자색*/
    color: black;

    /*position 이 static 이 아닌 상위 개념을 찾아서 기준으로 움직임*/
    position: absolute;
    /*기준으로부터 아래에서*/
    bottom: 5px;
    /*기준으로부터 왼쪽에서*/
    left: 5px;
}

/*좌표평면 부분*/
#plane {
    /*남은 공간 모두 차지*/
    flex: 1;
    /*연한 회색 배경 canvas가 로딩 안될때 보임*/
    background-color: #404040;
    
    /*영역 넘어가는거 잘라서 스크롤 바 없애기*/
    overflow: hidden;
}

/*canvas id 좌표평면 표시용*/
#graph {
    /*반응형 가로*/
    width: calc(100vw - 205px);
    /*반응형 세로*/
    height: calc(100vh - 50px);
}