:root {
    --background-color-black: #1B1E20;
    --background-color-gray: #23262B;
    --text-color-white: #fff;
    --text-color-normal: #EDEEF2;
    --text-color-lightGray: #8D9298;
    --text-color-darkGray: #61676F;
    --border-color-list: #23262B;
    --div-gray: #222;
    --div-darkGray: #111;
    --div-black: #000;
    --color-point: rgb(235, 177, 62);
} 

* {
    transition-duration: 300ms;
    -webkit-timing-function: ease-in;
}

body {
    width:100vw;
    height:100vh;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-family: sans-serif;
    background: var(--background-color-black);
    color: var(--text-color-normal);
    -webkit-touch-callout: none; 
    -webkit-user-select: none;
    font-size: 16px;
}

[type|="list"] {
    list-style-type: none;
    margin: 0;
    padding-inline-start: 0;
}
    [type|="list"] li {
        border-bottom: 1px solid var(--border-color-list);
        padding: 12px;
        height: 46px;
    }
    [type|="listItem"] {
        /* float: left; */
        display: inline-block;
    }
    [type|="listItemRight"] {
        /* float: right; */
        display: inline-block;
        padding-left:2px;
        font-size: 12px;
        color: var(--text-color-darkGray);
    }

[type|="card"] {
    list-style-type: none;
    margin: 0;
    padding-inline-start: 0;
}
    [type|="card"] li {
        margin: 12px;
        padding: 40px 20px;
        border-radius: 12px;
        background: var(--background-color-gray);
        box-sizing: border-box;
    }
    [type|="card"] li:active {
        background: var(--text-color-lightGray);
    }
.halfButton {
    margin: 0px 0px 12px 12px;
    padding: 40px 12px;
    border-radius: 12px;
    /* border : 1px solid var(--background-color-gray); */
    background: var(--color-point);
    color: var(--background-color-black);
    font-weight: 800;
    box-sizing: border-box;
    display: inline-block;
    width: 44.5%;
    text-align: center;
}
.halfButton:active {
    background: var(--text-color-lightGray);
}
/* chord */

:root {
    --text-color-chord: #FF555F;
    --div-control: rgba(255,255,255,.1);
} 
section {
    display: inline-block;
    width:100vw;
    height:100%;
    overflow: auto;
}
.header {
    padding: 28px 12px;
    background: var(--background-color-gray);
    color: var(--text-color-normal);
    font-size: 28px;
    text-overflow:ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

#list {
    position: fixed;
}
    #list.hide {  
        -webkit-transform: translateX(-30%);
    }
#content {
    position: fixed;
    -webkit-transform: translateX(100%);
    background: var(--background-color-black);
}
#content.show {
    -webkit-transform: translateX(0%);
}






/* 스피너 애니메이션 */
.loader,
.loader:after {
  border-radius: 50%;
  width: 20px;
  height: 20px;
}
.loader {
    display: none;
margin: -28px auto;
font-size: 9px;
  position: relative;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(44,49,57, 0.2);
  border-right: 1.1em solid rgba(44,49,57, 0.2);
  border-bottom: 1.1em solid rgba(44,49,57, 0.2);
  border-left: 1.1em solid rgb(44,49,57);
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation: load8 1.1s infinite linear;
  animation: load8 1.1s infinite linear;
}
@-webkit-keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}
@keyframes load8 {
  0% {
    -webkit-transform: rotate(0deg);
    transform: rotate(0deg);
  }
  100% {
    -webkit-transform: rotate(360deg);
    transform: rotate(360deg);
  }
}