@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

body{
    font-family: "Noto Sans KR", sans-serif;
    font-size: 14px;
    font-weight: 500;
}

.container {width:375px; height:812px;background-color:#EEEBE5;}
.safe_area {height: 44px;}
.app_screen{ height: 680px; position:relative; }

header {
    margin: 0 auto;
    height: 43px;
    margin-top: 12px; 
    width: 319px;
    padding-left:7px;
    padding-right:1px; 
}
header > h1 {
    position: absolute;
    left: 155px;
    top: 8px;
    font-weight: 600;
    font-size: 18px;
}
header > a {float: left;}
header > a > img {width:43px;} 
header ul {float:right;}
header ul > li {float:left; margin:9.5px 0;}
header ul > li + li {margin-left:18px;}
header ul > li > button {padding: 0; border:none; background: inherit;}
header ul > li > button > img {width:24px;}

.bank_acct{margin-top:33px;}
.bank_acct_info{
    margin: 0 auto;
    width:279px;
    height:155px;
    background-color: white;
    box-shadow: 0px 0px 16px rgba(226, 191, 66, 0.19);
    border-radius: 12px;
    text-align: center;
}
.bank_acct_info > h3 {
    padding-top : 14px;
    line-height: 21px;
    color: #858585;
}
/* .bank_acct_info¿¡ ¸ðµç ¹öÆ° ½ºÅ¸ÀÏ ÃʱâÈ­ */
.bank_acct_info button {
    padding: 0; 
    border:none; 
    background: inherit;
}
/* Àܾ׿¡ '¿ø' Á¶Àý */
.bank_acct_info .balance {
    margin: 26px 0;
    letter-spacing: 2px;
}
/* ÀÜ¾× ±ÛÀÚ Á¶Àý */
.bank_acct_info .balance > span {
    font-size: 24px;
    letter-spacing: 2px;
}
/* ÀÌü¹öÆ° ¹èÄ¡ */
.bank_acct_info .transfer {
    position:absolute;
    top: 90px;
    right: 65px;
}
/* ÀÌü ¹öÆ° ±ÛÀÚ Á¶Àý */
.transfer > button {
    font-weight: 600;
    letter-spacing: -0.24px;
}
.main_slide{margin:-8px 0;}
.main_slide input[type=range] {
    margin:0; 
    -webkit-appearance: none; /*±âº» ½ºÅ¸ÀÏÀ» »ç¿ëÇÒÁö ¸»Áö Á¤Çϱâ */
    width: 202px;
    height: 6px;
    overflow:hidden;
    background: #c4c4c4; /*¹Ù ¼±»ö, transparent ·Î ¼³Á¤ÇÏ¸é ¹è°æ»ýÀ̶û µ¿ÀÏÇØÁø´Ù. == Åõ¸í */ 
    border-radius: 3px;
}
.main_slide .main_slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 4px;
    height: 17px;
    border-radius: 2px;
    background: #FF5F00;
    box-shadow: -80vw 0 0 80vw #FFDB4C;  
    cursor: pointer;
}
/* input ¿· Â÷Æ® ¾ÆÀÌÄÜ */
.bank_acct_info .chart{
    position:absolute;
    top:179px;
    right:67px;    
    cursor: pointer;
}
/* input ¾Æ·¡ ÅؽºÆ® */
.left_day_balnce{margin: 14px 0px 8px;}
.left_day_balnce > span{
    line-height: 21px;
    color: #858585;
}
/* ´ëÃⱤ°í ¹èÄ¡ */
.notice {
    position: absolute;
    width: 262px;
    height: 21px;
    left: 43px;
    top: 255px;
    font-weight: 500;
    font-size: 14px;
    line-height: 21px;
}
.notice > a{
    text-decoration: underline;
}
/* »ç¿ë³»¿ª ¹èÄ¡ */
.bank_use_history{
    position: absolute;
    top: 297px;
    width: 375px;
    height: 383px;
    background-color: #F5F5F5;
    box-shadow: 0px -5px 14px rgba(189, 144, 28, 0.08);
    border-radius: 30px 30px 0px 0px; 
    overflow:auto; 
    transition: 0.5s; 
}
.bank_use_history::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
/*µå·¡±× ¹öÆ°*/ 
.drag_btn {
    position: absolute;
    width:48px;
    height:2.15px;
    top:4.3px;
    left: 162px;
    background-color: #C4C4C4;
    border-radius: 4px;
    cursor: pointer;
}
.bank_use_history.wide  {
    top:43px;
    height: 637px;   
  }
/* saving box ¹èÄ¡ */
.saving {
    margin: 23px 37px 17px 30px;   
    color: white;
    font-weight: 500;
    font-size: 12px;
    line-height: 18px;
    overflow-x: scroll;
    overflow-y: hidden;         
}
/*saving scrollbar ¼û±â±â*/
.saving::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
.saving.active {
    cursor: grabbing;
    cursor: -webkit-grabbing;
    transform: scale(1);
  }
/* saving box item ¹èÄ¡ */
.saving ul{
    width:308px;
    height: 49px;
    display:flex;
}
.saving ul li{
    width: 162px;
    height: 47px;
    flex-shrink: 0;
    border-radius: 6px;
    position: relative;
    background-color: #DADADA;
}
.saving ul li + li{
    margin-left: 13px;
}
.saving ul li span{
    background: transparent;
    position: absolute;
    color: #FFFFFF;
    font-size: 12px;
    line-height: 18px;
}
.saving ul li span:first-child{
    top: 5px;
    left: 13px;
}
.saving ul li span:nth-child(2){
    bottom: 5px;
    left: 13px;;
}

/*°¢°¢ÀÇ ÀúÃàÀÇ ÆÛ¼¾Æ® ¸¸Å­ ¹è°æ»ö ä¿ì±â JSÇÊ¿ä?*/
.saving li .fill_color{
    width: 97px;
    height: 100%;
    background-color: #FF5F00;
    border-radius: 6px 0 0 6px;
}
/*¼¼ºÎ³»¿ª box */
.use_history_detail{
    margin: 1px 37px 38px 36px;    
}
/*³¯Â¥ + ÁöÃâÇÕ°è*/
.date_total_out div{
    margin-bottom: 8px; 
    font-weight: bold;
    line-height: 21px;}
/*Àú±ÝÅë ¸¸µé±â*/
.date_total_out div > span:last-child{
    line-height: 21px;
    color: #B4B4B4;
}
.date_total_out > li + li{
    margin-top: 38px;
}
.date_total_out li div{
    display: flex;
    justify-content: space-between;    
}
.day_details li{    
    padding-bottom: 8px;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #DCDCDC;
    font-weight: 350;
    font-size: 18px;
    line-height: 27px;
    color: #444444;
}
/*ÁöÃâ°ü¸® ÆäÀÌÁö*/
.out_mgt > *{}
.out_mgt{
    display:none;
    position:absolute; /*±âÁØÀ» h1À¸·Î ÀâÀ½*/
    top:-55px;
    left:0px;
    width:378px;
    height:736px;
    background-color: white;
    overflow: auto;
}
.out_mgt.open{
    display:block;    
}
.out_mgt::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera*/
}
.out_mgt section{
    width:315px;
    margin: 0 auto;
}
.fixed_header{
    position: fixed;
    width:377px;
    height:113px;
    background:white;
}
.fixed_header h1{
    position: absolute;
    top: 77px;
    left:30px;
    font-size: 24px;
    line-height: 36px;
}
.fixed_header .close_btn{
    position: absolute;
    top:44px;
    left:336px;
    border:none; 
    background: inherit;
    cursor: pointer;
}
.out_mgt  h3{
    display:inline-block;
    font-size: 18px;
    line-height: 27px;
}
.set_budget{
    padding-top:129px;
}
.set_budget > span{
    padding-left:78px;
    font-size: 24px;
    line-height: 36px;
    color: #FF5F00;
}
.out_slide input[type=range] {
    width: 308px;
    height: 9px;    
    margin-top:28px;
    overflow:hidden;
    background: #c4c4c4; /*¹Ù ¼±»ö, transparent ·Î ¼³Á¤ÇÏ¸é ¹è°æ»ýÀ̶û µ¿ÀÏÇØÁø´Ù. == Åõ¸í */ 
    border-radius: 3px;
}
.out_slide .out_slider::-webkit-slider-thumb {
    width: 4px;
    height: 17px;
    border-radius: 2px;
    background: #FF5F00;
    box-shadow: -80vw 0 0 80vw #FFDB4C;  
    cursor: pointer;
}
.daily_report{
    padding-top: 59px;
}
.monthly_out_pattern{
    padding-top:46px;
}
#bar_graph{  
    height: 198px;
    width: 307px;
}
.out_category{
    padding-top:14px;
    font-weight: 350;
    font-size: 18px;
    line-height: 27px;
}
.graph{
    position: relative;
}
#donut_graph{
    width: 308px;
}
.donut_total_out{
    position:absolute;
    top:50%;
    left:40%;
}
.out_category li{           
    display:flex;
    justify-content: space-between; 
}
.out_category li span{
}
.out_category li + li {
    padding-top:10.77px;
}
.out_category img{
    padding-right:25px;
    width:24px;
    vertical-align:middle;
}
.out_category li:nth-child(3) img{
    width:18px;
    padding-right:32px;
}

/*ÇÏ´Ü ¸Þ´º*/
nav{
    background-color: #00C7A3;
    height:76px;
    margin:0 auto;  
}
nav ul{
    overflow:hidden;
    padding-left:40px;
}
nav ul li{
    float:left;
    padding: 24px 0 24px;;
}
nav ul li + li{
    padding-left:60px;
}