:root {
  --breakpoint-xs: 0;
  --breakpoint-sm: 576px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 992px;
  --breakpoint-xl: 1200px;
}

* {
  box-sizing: border-box;
}

article,
aside,
figcaption,
figure,
footer,
header,
hgroup,
main,
nav,
section {
  display: block;
}

html {
  height: 100%;
}

@font-face {
  font-family: "SBAggroL";
  src: local("SBAggroL"),
    /* 시스템에 있다면 시스템을 씀 */ url("/assets/fonts/SBAggroL.woff")
      format("woff"),
    url("https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2108@1.1/SBAggroL.woff")
      format("woff");
  font-weight: normal;
  font-style: normal;

  /* https://web.dev/font-display/?utm_source=lighthouse&utm_medium=lr 
	The easiest way to avoid showing invisible text while custom fonts load is to temporarily show a system font.*/
  font-display: swap;
}

article {
  font-size: 1em;
  margin-bottom: 100px;
  line-height: 1.9;
}

article.home div a,
article.home pre a {
  color: #2c3e50;
}
article.home div a:hover,
article.home pre a:hover {
  color: #2c3e50;
  text-decoration: none;
}
article img {
  max-width: 100%;
}

blockquote {
  color: #828282;
  border-left: 4px solid #ccc;
  padding-left: 10px;
  margin: 0;
  margin-bottom: 15px;
}

p {
  margin-top: 0;
  margin-bottom: 0;
  color: #444444;
}

article h1,
article h2,
article h3,
article h4,
article h5,
article h6 {
  font-family: "Roboto", "Nanum Gothic";
  color: #333;
  margin-bottom: 0;
}

article.home h1 a,
article.home h2 a,
article.home h3 a,
article.home h4 a {
  color: #f2756a;
}
article.home h1 a:hover,
article.home h2 a:hover,
article.home h3 a:hover,
article.home h4 a:hover {
  color: #e74c3c;
}

body {
  height: 100%;
  margin: 0;
  padding: 0;
  font-family: "SBAggroL";
  color: #444444;

  letter-spacing: 0.5px;
  word-spacing: 0.5px;
}

a {
  text-decoration: none;
  color: #007bff;
  background-color: transparent;
}

a:hover {
  cursor: pointer;
  color: #0753a3;
}

.container {
  min-height: 100%;
  display: flex;
  justify-content: left;
  flex-flow: row nowrap;
}

header {
  padding: 10px;
}

.content {
  /*margin-left: 180px;*/
  width: 75%;
  padding: 0px 50px;
  left: 25%;
  position: relative;
  max-width: 1050px;
}

.sidebar {
  display: flex;
  flex-flow: column nowrap;

  padding: 15px;
  z-index: 9999;
  background-color: #051628;
  color: #fff;

  left: 0;
  width: 25%;
  height: 100%;
  position: fixed;
  max-width: 450px;

  /* 내부 스크롤 가능 */
  overflow: auto;
}

.sidebar-header {
  margin-bottom: 4em;
}

.sidebar ul {
  list-style-type: none;
  padding-inline-start: 0px;
}

.sidebar-brand > a > img {
  width: 60%;
  height: auto;
  display: block;
  margin: 0 auto; /* 가운데 정렬 */
}

.lead {
  width: 100%;
  font-size: 1.2em;
  color: #ffff;
  text-align: center;
  word-spacing: 5px;
  line-height: 1.5em;
}

.nav li {
  padding: 1em 0.5em 1em 1em;
  opacity: 70%;

  transform: scale(1);
}

.nav li > a {
  color: #fff;
}

.nav li:hover {
  transform: scale(1.05);
  opacity: 85%;
}

.nav li.nav-title {
  opacity: 100%;
}

.nav li.menu-selected {
  opacity: 100%;
}

.nav-title {
  font-size: 1.5em;
  /* text-transform: uppercase; */
  border-bottom: 1px solid gray;
  margin-bottom: 5px;
}

a.nav-item > .nav-img {
  display: inline-block;
  width: 50px;
  height: 50px;
  vertical-align: middle;
  line-height: 50px;
}

a.nav-item > .nav-img > i {
  /* 그림 세로 가운데 정렬 */
  vertical-align: middle;
}

a.nav-item > .name {
  color: #fff;
  padding: 0 0 0 10px;
}

a.nav-item {
  font-size: 1.2em;
  text-transform: capitalize;
}

header.post-header {
  padding: 10px;
  margin-bottom: 5px;
  border-bottom: 1px solid rgb(139, 136, 136);
  background-color: #fdfdfd;
  vertical-align: middle;

  width: 100%;
  height: 60px;
  max-width: 1050px;
  top: 0;
  left: 30%;
  padding: 0px 10px;
  max-width: 1050px;
  line-height: 60px;
  overflow: auto;
}

header.home {
  text-align: left;
}

.page-header {
  color: #e74c3c;
  text-shadow: 1px 1px 1px rgba(150, 150, 150, 1);
}

@media (max-width: 600px) {
  article {
    padding: 0px 20px;
    font-size: 0.9em;
    line-height: 1.7;
  }

  .container {
    flex-direction: column;
  }

  .content {
    padding: 0px;
    position: relative;
    left: 0;
    top: 0;
    bottom: unset;
    width: 100%;
    height: 100% - 60px;
    max-width: unset;
  }

  header.post-header {
    position: relative;
    font-size: 1em;
    left: 0;
    top: 0;
    max-width: unset;
    width: 100%;
    height: 60px;
    line-height: 60px;
  }

  .sidebar {
    flex-flow: row nowrap;
    font-size: 0.6em;
    padding: 1px;
    position: fixed;
    top: unset;
    bottom: 0;
    width: 100%;
    height: 60px;
    min-height: 60px;
    max-width: unset;

    transition: bottom 0.2s ease-in-out;
  }

  /* 이동시 사이드바 사라지게 */
  .sidebar.nav-down {
    bottom: -60px;
  }

  .post-content {
    top: 80px;
  }

  .sidebar-nav {
    margin: 0em 2em 0em 2em;
    width: 100%;
    vertical-align: middle;
  }

  .sidebar-item {
    padding: 5px;
  }

  .sidebar-nav > .nav {
    display: inline-flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }

  ul.nav {
    margin: 0px;
    width: 100%;
  }

  .sidebar-nav > .nav > li {
    padding: 0px;
    align-items: center;
    vertical-align: middle;
    text-align: center;
  }

  .nav > li.menu-selected {
    opacity: 100%;
  }

  a.nav-item > span {
    display: flex;
  }

  a.nav-item > .name {
    padding: 0;
    vertical-align: top;
    justify-content: center;
  }

  a.nav-item > .nav-img {
    justify-content: center;
    margin: 5px;
    width: 27px;
    height: 27px;
    line-height: 27px;
    text-align: center;
  }

  a.nav-item > .nav-img > i {
    font-size: 24px;
    line-height: 24px;

    justify-content: center;
  }

  /* hidden */
  .sidebar-footer {
    flex: 0 0 0px;
    visibility: hidden;
    display: none;
  }
  .sidebar-brand > a > img {
    visibility: hidden;
    display: none;
    width: 0%;
    height: 0%;
  }
  .lead {
    visibility: hidden;
    display: none;
    width: 0%;
    height: 0%;
  }
  .sidebar-counter {
    visibility: hidden;
    display: none;
    width: 0%;
    height: 0%;
  }
  .sidebar-item .nav-title {
    visibility: hidden;
    display: none;
    width: 0%;
    height: 0%;
    padding: 0px;
  }
  .sidebar-header {
    visibility: hidden;
    display: none;
    width: 0%;
    height: 0%;
  }
  a.nav-item > .badge {
    visibility: hidden;
    display: none;
    width: 0%;
    height: 0%;
    padding: 0px;
  }
}