@CHARSET "UTF-8";

.running-sub-title{font-size: 36px;}
.running-sub-desc{font-size: 17px;margin: 15px 0px;}
.challenge-list{display: flex;width: 100%;align-items: center;justify-content: center;}
.challenge-list .list-title{font-size: 15px;width: 100%;margin:5px auto;max-width:720px;padding: 10px 25px;border-radius:5px;border: 1px #cccccc solid;display: flex;justify-content: space-between;align-items: center;}

.challenge-myrecord-list{display: flex;width: 100%;align-items: center;justify-content: center;flex-direction: column;background-color: white;border-radius: 5px;}
.challenge-myrecord-list .list-title{font-size: 17px;width: 90%;margin: auto;max-width: 720px;padding: 10px 0px;border-bottom: 1px #cccccc solid;display: flex;justify-content: space-between;align-items: center;}
.challenge-myrecord-list .list-title .year-and-title{display: flex;flex-direction: column;}
.challenge-myrecord-list .detail-txt{display: flex;flex-direction: row;justify-content: space-around;align-items: center;width:100%;padding:10px;}
.challenge-myrecord-list .detail-txt .txt-layer div{color:#999999;}
.challenge-myrecord-list .detail-btn-layer{width:90%;padding:0px 0px 10px 0px;margin:auto;}
.challenge-myrecord-list .detail-btn-layer .btn{background: #ebf5ff !important;border: 1px #4F7DFF solid;color: #4F7DFF;}
.challenge-myrecord-list .success-icon div img{width:50px;}
.challenge-myrecord-list .fail-icon div img{width:50px;}
.running-txt-layer{width: 100%;padding:10px 15px 10px 15px;display: flex;align-items: center;justify-content: center;flex-direction: row;}
.running-txt-inner-layer{padding: 10px;width: 100%;background-color:#ffe6e7;border-radius:5px;display: flex;justify-content: space-around;color:red;background-image: url(/images/running/banner_speed.png);background-size: contain;background-position: 15px 0px;background-repeat: no-repeat;}



.map-layer{position:relative;display: flex;justify-content: space-between;width: 90%;margin: 10px auto;}
.map-layer img{width:100%;}
.challenge-myrecord-detail-distance{display : flex;justify-content: space-between;padding: 10px;width: 90%;margin: auto;border-bottom:1px #cccccc solid;}
.challenge-myrecord-detail-distance .subtitle div:nth-child(2){font-size:25px;}
.challenge-myrecord-detail-distance .subtitle div:nth-child(2) span{font-size:15px;}
.challenge-myrecord-detail-distance .success-icon div img{width:69px;}
.challenge-myrecord-detail-distance .fail-icon div img{width:69px;}
.challenge-myrecord-detail-time{display : flex;justify-content: space-between;padding: 10px;width: 90%;margin: auto;border-bottom:1px #cccccc solid;}
.challenge-myrecord-detail-time .subtitle div:nth-child(1){font-size:25px;}

.challenge-myrecord-detail-pace-cal{display : flex;justify-content: space-between;width: 90%;margin: auto;border-bottom: 1px #cccccc solid;}
.challenge-myrecord-detail-pace-cal .subtitle div:nth-child(1){font-size:25px;}
.challenge-myrecord-detail-pace-cal .subtitle div:nth-child(1) span{font-size:15px;}
.detail-btn-layer2{width:90%;margin:10px auto;}

.challenge-rankinglist{display: flex;width: 100%;align-items: center;justify-content: center;}
.challenge-rankinglist .list-title{font-size: 15px;width: 100%;margin:5px auto;max-width:720px;padding: 10px 25px;border-radius:5px;border: 1px #cccccc solid;display: flex;justify-content: space-between;align-items: center;}
.challenge-rankinglist .list-btn{font-size:13px;padding: 10PX 0px 10PX 0PX;color:#7F9FFF;}
.challenge-rankinglist .current_ym_txt{color:#999999;font-size:13px;}

.menu-boxTab .wrap-menu ul li{padding:0px 1px;background-color:white;}
.menu-boxTab .wrap-menu ul li a{
	border-top: 1px #ddd solid;        
    border-right: 1px #ddd solid;
    border-left: 1px #ddd solid;
    border-bottom: 0px #ddd solid;
}
.chart-scroll {
   overflow-x: auto;
   white-space: nowrap;
   padding:54px 0px;
   padding-bottom:0px;
 }
 .bar-chart {
   display: flex;
   align-items: flex-end;
   height: 100px;
   min-width: 660px;
   gap: 12px;
   position: relative;
 }

 .bar-wrapper {
   width: 40px;
   height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: flex-end;
   position: relative;
 }

.bars {
  display: flex;
  align-items: flex-end;
  height: 160px;   /* ⭐ 중요 */
  gap: 4px;
}

.bar {
  width: 10px;
  height: 0;
  border-radius: 4px;
  transition: height 0.4s ease;
}

 .day-label {
   font-size: 12px;
   margin-top: 8px;
   color: #aaa;
 }

 /* 말풍선 */
 .bubble {
   position: absolute;
   top: -43px;
   width: 214px;
   height: 30px;
   background: #4484d0;
   border-top-left-radius: 5px;
   border-top-right-radius: 5px;
   border-bottom-right-radius: 5px;
   border-bottom-left-radius: 5px;
   color: white;
   font-size: 14px;
   font-weight: bold;
   text-align: center;
   line-height: 30px;
   z-index: 8;
   display:none;
    /* 화살표 위치를 변수로 조정 */
 	--arrow-left: 50%;
 }

 .bubble::after {
   content: "";
   position: absolute;
   bottom: -11px;
   left: var(--arrow-left, 50%);
  	transform: translateX(-50%);
   border: 6px solid transparent;
   border-top-color: #4484d0;
 }

 /* 세로 라인 */
 .focus-line {
   position: absolute;
   width: 1px;
   height: 88px;
   background: #2e6f55;
   top: -15px;
   display: none;
 }

 /*  선택된 날짜 원 강조 */
 .focus-day {
   position: absolute;
   bottom: -43px;
   width: 30px;
   height: 30px;
   background: #4484d0;
   border-radius: 50%;
   display: none;
   color: white;
   font-size: 14px;
   font-weight: bold;
   text-align: center;
   line-height: 30px;
   z-index: 8;
 }
 .myranking-subtitle{color:#FF449C;padding:0px 3px;font-size:15px;}
 .myranking-layer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
    width: 100%;
    font-size: 15px;
    border-radius: 5px;
    border:1px #cccccc solid;
}
.myranking-layer.active{border:1px #FF449C solid;background-color:#FFF5FA;color:#FF449C;}
.myranking-layer .no {
    width: 30px;
}
.myranking-layer .year {
    width: 25%;
}
.myranking-layer .userid {
    width: 87px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.myranking-layer .time {
    width: 39px;
}
.top-ranking-layer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
    width: 100%;
    font-size: 15px;
    border-radius: 5px;
}
.top-ranking-layer:nth-child(1){border:1px #408EFF solid;background-color:#F5F8FF;color:#408EFF;}
.top-ranking-layer:nth-child(2){border:1px #408EFF solid;color:#408EFF;}
.top-ranking-layer:nth-child(3){border:1px #408EFF solid;color:#408EFF;}
.top-ranking-layer .no {
    width: 30px;
    text-align: center;
}
.top-ranking-layer .year {
    width: 25%;
    text-align: center;
}
.top-ranking-layer .userid {
    width: 87px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.top-ranking-layer .time {
    width: 63px;
    text-align: center;
}

.top-ranking-layer-title {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-around;
    align-items: center;
    padding: 0px 10px 5px 10px;
    width: 100%;
    font-size: 15px;
    border-radius: 5px;
}
.top-ranking-layer-title .no {
    width: 45px;
    text-align: center;
}
.top-ranking-layer-title .year {
    width: 25%;
    text-align: center;
}
.top-ranking-layer-title .userid {
    width: 87px;
    text-align: center;
}
.top-ranking-layer-title .time {
    width: 63px;
    text-align: center;
}



.day-pace-avg-layer {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-around;
    align-items: center;
    padding: 10px;
    width: 100%;
    font-size: 15px;
    border-bottom:1px #cccccc solid;
}
.day-pace-avg-layer .no {
    width: 30px;
    text-align: center;
}
.day-pace-avg-layer .year {
    width: 25%;
    text-align: center;
}
.day-pace-avg-layer .userid {
    width: 87px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
}
.day-pace-avg-layer .time {
    width: 63px;
    text-align: center;
}

.day-pace-avg-layer-title {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: space-around;
    align-items: center;
    padding: 0px 10px 5px 10px;
    width: 100%;
    font-size: 15px;
    border-bottom:1px #cccccc solid;
}
.day-pace-avg-layer-title .no {
    width: 45px;
    text-align: center;
}
.day-pace-avg-layer-title .year {
    width: 25%;
    text-align: center;
}
.day-pace-avg-layer-title .userid {
    width: 87px;
    text-align: center;
}
.day-pace-avg-layer-title .time {
    width: 63px;
    text-align: center;
}

.pace-txt{font-size:17px;}
.paceTime{width:68px;color:#4F7DFF;}
.pace-container{
    width: 100%;
    display: flex;
    column-gap: 10px;
    font-size: 15px;
    align-items: center;
    justify-content: center;
}
.pace-bar {
  width: 100%;
  height: 15px;
  background: #f0f0f0;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
}

.pace-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #007ee3, #3cacff);
  border-radius: 20px;
  transition: width 1.2s ease;
}

.pace-fill#femalePaceContainerFill {
  background: linear-gradient(90deg, #e30000, #f5537b);
}

/* LINE CHART */
.chart-container {
  width:100%;
  max-width:250px;
}

svg {
  width: 100%;
  height: 130px;
  overflow: visible;
}

.line-path {
  fill: none;
  stroke: #e1e1e1;
  stroke-width: 5;
  stroke-linecap: round;

  stroke-dasharray: 1000;
  stroke-dashoffset: 1000;
  animation: lineDraw 1.5s ease forwards;
}

.point {
  fill: #007ee3;
  r: 0;
  animation: pointGrow 0.5s ease forwards;
}

.label {
  fill: #000000;
  font-size: 27px;
}

@keyframes lineDraw {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes pointGrow {
  to {
    r: 11;
  }
}
  
@media(max-width:460px){
	.container .menu-boxTab .wrap-menu ul li{padding:0px 1px;}
	.container .menu-boxTab .wrap-menu ul li.active{background-color:white;}
	.container .menu-boxTab .wrap-menu ul li a{
		border-top: 1px #ddd solid;        
        border-right: 1px #ddd solid;
        border-left: 1px #ddd solid;
        border-bottom: 0px #ddd solid;
    }
	
}