:root {
  --frame_main_bg: #fff;
  --frame_top_height: 36px; /* 상단바 높이 */
  --frame_bgcolor_top: var(--frame_main_bg); /* 상단바 배경색 */
  --frame_bgcolor_top_sub: #435f8e; /* 상단바 보조 배경색 */
  --frame_side_panel_width: 240px; /* 사이드메뉴 넓이 */
  --frame_bgcolor_sidebar: #97bdfb; /* 사이드메뉴 배경색 */
  --frame_bgcolor_sidebar_sub: #f6f6f6;/* 사이드메뉴 보조 배경색 */
  --frame_bgcolor_contents: #FFFFFF; /* 메인 콘텐츠 배경색 */
  --frame_padding_contents: 2.4em; /* 콘텐츠 프레임 Padding */
}

#frame_top { grid-area: frame_top; }
#frame_side { grid-area: frame_side; }
#frame_body { grid-area: frame_body; }

#frame_main {
  display: grid;
  grid-template-columns: var(--frame_side_panel_width) calc(100vw - var(--frame_side_panel_width));
  grid-template-areas:"frame_top frame_top"
                      "frame_side frame_body";
  position:relative;

  /*
  display: flex;
  flex-wrap: wrap;
  width: 100%;*/
}

#frame_main.full_width {
  grid-template-columns: 0px 100%;
}

#frame_main #frame_body #frame_top {
  /*position: sticky;*/
  top:0;
  left:0;
  width: 100%;
  height: var(--frame_top_height);
  background-color: var(--frame_bgcolor_top);
  z-index: 100;
}

#frame_main #frame_side {
  /*position: sticky;
  flex: 0;
  flex-basis: var(--frame_side_panel_width);
  width: var(--frame_side_panel_width);*/
  width: 100%;
  height: 100vh;
  background-color: var(--frame_bgcolor_sidebar);
  overflow-y: auto;
  overflow-x: hidden;
  z-index: 101;
  -webkit-transition: flex 0.2s;
  transition: flex 0.2s;
}

#frame_main.full_width #frame_side {
  flex-basis: 1px;
}

#frame_main #frame_body {
  display: flex;
  flex-direction: column;
  padding: 0 var(--frame_padding_contents);

  /*flex:1;
  flex-basis: calc(100vw - var(--frame_side_panel_width));
  width: calc(100vw - var(--frame_side_panel_width));*/
  width: 100%;
  position: relative;
}

#frame_main #frame_body #frame_contents {
  flex: 1;
  flex-basis: calc(100vh - var(--frame_top_height));
  width: 100%;
  background-color: var(--frame_bgcolor_contents);
}

#frame_main.frame_topmode #frame_top {
  position: sticky;
  top:0;
  left:0;
  width: 100%;
  height: var(--frame_top_height);
  padding: 0 var(--frame_padding_contents);
  background-color: var(--frame_bgcolor_top_sub);
  color: #fff;
  z-index: 102;
}

#frame_main.frame_topmode #frame_side {
  height: calc(100vh - var(--frame_top_height));
  background-color: var(--frame_bgcolor_sidebar_sub);
}

/*flex*/
.flexcol {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.flexrow {
  display: flex;
  flex-direction: row;
}

.flexstart {
  justify-content: flex-start;
}
.flexend {
  justify-content: flex-end;
}
.flexcenter {
  justify-content: center;
}
.flexbetween {
  justify-content: space-between;
}
.flexaround {
  justify-content: space-around;
}
.flexevenly {
  justify-content: space-evenly;
}

.flexfillstart {
  align-items: flex-start;
}
.flexfillend {
  align-items: flex-end;
}
.flexfillcenter {
  align-items: center;
}
.flexfillstrech {
  align-items: stretch;
}
.flexfillbaseline {
  align-items: baseline;
}

.flex-auto { flex: auto ;}
.flex-1  { flex: 1;  }
.flex-2  { flex: 2;  }
.flex-3  { flex: 3;  }
.flex-4  { flex: 4;  }
.flex-5  { flex: 5;  }
.flex-6  { flex: 6;  }
.flex-7  { flex: 7;  }
.flex-8  { flex: 8;  }
.flex-9  { flex: 9;  }
.flex-10 { flex: 10; }
.flex-11 { flex: 11; }
.flex-12 { flex: 12; }

.gap06  { gap: 6px;  }
.gap10  { gap: 10px;  }
.gap20  { gap: 20px;  }
.gap30  { gap: 30px;  }
.gap40  { gap: 40px;  }
.gap50  { gap: 50px;  }
.gap60  { gap: 60px;  }
.gap70  { gap: 70px;  }
.gap80  { gap: 80px;  }
.gap90  { gap: 90px;  }
.gap100 { gap: 100px; }
.gap120 { gap: 120px; }
.gap150 { gap: 150px; }
.gap200 { gap: 200px; }
.gap250 { gap: 250px; }
.gap300 { gap: 300px; }

.posrel {
  position: relative;
}
.posabs {
  position: absolute;
}