@charset "utf-8";

/*////////////////////////////////////////////
///     - layout
////////////////////////////////////////////*/  
.page-enote > .header > .wrapper-title > .wrapper-toolbar {
  display: block
}
.page-enote > .header > .wrapper-title .page-name{
  cursor:pointer;

  margin-top: calc(5/var(--space))
}
.page-enote > .header > .wrapper-title .page-name:before{
  font-family: font-icon;
  content:"\f0c9";

  margin-right: calc(5/var(--space));
}
/*tab 형태 메뉴*/
.page-enote .nav-tab-enote,
.use-nav-tab-enote.page-enote .page-nav {
  display: none
}
.use-nav-tab-enote.page-enote > .header > .wrapper-title {
  padding: calc(5/var(--space)) calc(10/var(--space)) 0 0
}


.use-nav-tab-enote.page-enote .nav-tab-enote {
  list-style: none;
  display: flex;
  align-items: center;
  padding: 0;
}
.use-nav-tab-enote.page-enote .nav-tab-enote li {
  position: relative
}

.use-nav-tab-enote.page-enote .nav-tab-enote li a {
  position: relative;
  display: block;
  text-decoration: none;

  color: rgb(var(--gray50));
  padding: calc(5/var(--space)) calc(13/var(--space));
  margin: calc(3/var(--space)) calc(3/var(--space));
  border-radius: var(--radius-lg)
}
.use-nav-tab-enote.page-enote .nav-tab-enote li:hover a {
  background-color: rgb(var(--gray20));
}
.use-nav-tab-enote.page-enote .nav-tab-enote li.active a {
  font-weight: bold;

  color: var(--text);
  background-color: rgb(var(--white));
  border: var(--border) rgb(var(--gray20))
}

.page-enote > .header > .wrapper-header-search{
  position:absolute;
  left:0;
  right:0;
  top: calc(45/var(--space))
}

.page-enote > .header > .wrapper-nav-tabs{
  position:relative;
  overflow:hidden;
  padding:0;
  z-index:0;
}
.page-enote > .header > .wrapper-nav-tabs > .nav-tabs{
  border-bottom:none;
  white-space:nowrap;
  position:relative;
  transition:left ease 0.2s;
  left:0;

  padding-left: calc(10/var(--space));
  padding-right: calc(60/var(--space));
  height: calc(40/var(--size));
  background-color: var(--body-background-color)
}
.page-enote > .header > .wrapper-nav-tabs.open{
  overflow:visible;

  height: calc(40/var(--size));
}
.page-enote > .header > .wrapper-nav-tabs.open > .nav-tabs{
  height:auto;
  white-space:normal;
  position:absolute;
  top:0;
}

.page-enote > .header > .wrapper-nav-tabs > .tab-option{
  position:absolute;
  top:0;
  bottom:0;
  right:0;
  z-index:3;
  user-select:none;
  display:flex;
  align-items:flex-start;
}
.page-enote > .header > .wrapper-nav-tabs > .tab-option > span{
  display:flex;
  align-items:center;
  cursor:pointer;

  padding: calc(9/var(--space)) calc(8/var(--space));
  border-radius: var(--radius-default);
}
.page-enote > .header > .wrapper-nav-tabs > .tab-option > span:hover{
  background-color: rgb(var(--gray20))
}

.page-enote > .header > .wrapper-nav-tabs > .tab-option .tab-plus:before,
.page-enote > .header > .wrapper-nav-tabs > .tab-option .tab-more:before{
  font-family: font-icon;
  display:inline-block;
}
.page-enote > .header > .wrapper-nav-tabs > .tab-option .tab-plus:before{
  content:"\f067";
}
.page-enote > .header > .wrapper-nav-tabs > .tab-option .tab-more:before{
  content:"\e90b";
}
.page-enote > .header > .wrapper-nav-tabs.open > .tab-option .tab-more:before{
  content:"\e90d";
}
.page-enote > .footer > .wrapper-toolbar{}

/*////////////////////////////////////////////
///     List
////////////////////////////////////////////*/
.page.page-enote.enote-todo > .contents,
.page.page-enote.enote-memo > .contents{
  padding:0
}
.page.page-enote > .contents .todo,
.page.page-enote > .contents .memo,
.page.page-enote > .contents .file,
.page.page-enote > .contents .image{
  display:none
}
.page.page-enote.enote-todo > .contents .todo,
.page.page-enote.enote-memo > .contents .memo,
.page.page-enote.enote-file > .contents .file,
.page.page-enote.enote-image > .contents .image{
  display:block
}
.page.page-enote.enote-file > .header .nav-tabs,
.page.page-enote.enote-file > .header .tab-option{
  display:none
}


.enote-list > ul{
  list-style:none;
  padding:0;

  margin: calc(10/var(--space));
  border: var(--border) var(--border-default);
  border-radius: var(--radius-lg)
}
.enote-list:first-child {
  margin-top: calc(10/var(--space))
}

.enote-list > ul > li{
  position:relative;
  cursor:pointer;
  transition:background ease 0.2s,border ease 0.2s;

  padding: calc(5/var(--space)) calc(10/var(--space)) calc(5/var(--space)) calc(45/var(--space));
  background-color: rgb(var(--white));
  border-bottom: var(--border) rgb(var(--gray10));
  border-right: var(--border) transparent;
}
.enote-list > ul > li:last-child{
  border-bottom:none
}
.enote-list > ul > li:first-child{
  border-radius: var(--radius-lg) var(--radius-lg) 0 0
}
.enote-list > ul > li:last-child{
  border-radius: 0 0 var(--radius-lg) var(--radius-lg)
}
.enote-list > ul > li:first-child:last-child {
  border-radius: var(--radius-lg)
}
.enote-list > ul:not(.enote-nodata) > li:not(.group-title):not(.more-list):hover {
  background-color: rgb(var(--gray10));
  border-right: calc(3/var(--size)) solid var(--primary)
}
.enote-list > ul:not(.enote-nodata) > li:not(.group-title):not(.more-list):hover .note {
  font-weight:bold;

  color: var(--primary);
}

.enote-list > ul .check {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  cursor: default;
  display: flex;
  align-items: center;
  justify-content: center;

  width: calc(50/var(--size));
}
.enote-list > ul .attached-link{
  position:absolute;

  right: calc(10/var(--space));
  top: calc(13/var(--space));
  color: rgb(var(--gray70))
}
.enote-list > ul .enote-article{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  line-height:1;

  padding: calc(10/var(--space)) calc(20/var(--space)) calc(10/var(--space)) 0;
}
.enote-list > ul .enote-article .label{
  margin-right: calc(5/var(--space))
}
.enote-list > ul .enote-article .note br{
  display: none;
}
.enote-list > ul .enote-time{
  text-align: right;

  font-size:calc(11/var(--font-calc));
  color: rgb(var(--gray50))
}

.enote-list > .group-title{
  position:relative;
  display: flex;
  align-items: center;
  font-weight:bold;

  padding: calc(10/var(--space)) calc(10/var(--space)) 0 calc(28/var(--space));
}
.enote-list > .group-title .check{}
.enote-list > .group-title a{
  text-decoration:none;

  color: var(--text);
  margin-left: calc(10/var(--space))
}
.enote-list > .group-title a .collapse-arrow{
  display: none
}

.enote-list > .more-list{
  text-align:center;
  cursor:pointer;

  padding: calc(10/var(--space)) calc(5/var(--space));
}
.enote-list > .more-list:after{
  content:"\f107";
  font-family: font-icon;
  display:inline-block;
}
.enote-list > .more-list.hidden{
  display:block !important
}
.enote-list > .more-list.hidden:after,
.enote-list > .more-list.hidden > span,
.enote-list > ul.collapse:not(.in) + .more-list{
  display:none !important
}

.enote-list > ul.enote-nodata{}
.enote-list > ul.enote-nodata > li{
  text-align: center;
  cursor:default
}