@charset "utf-8";

body {position: relative; color:#333; overflow-x: hidden;}

.wrap {position: relative; margin:0 auto; padding:0; width: 100%; overflow-x: hidden;}

/****************************************************************************************************************************************
ladder-wrap 시작
*****************************************************************************************************************************************/
.ladder-wrap  {position: relative; margin: 0; padding:0; width: 100%; height: 100%; min-width: 850px; min-height: 750px; background: url('../img/bg.jpg') center no-repeat; background-size: cover;}
.ladder-inner {position: relative; margin:0 auto; padding:40px 0; width: 100%; height: 100%; display: flex; justify-content: center;}
.ladder-content {position: relative; width: 830px; height: 677px;}

.game-tit {position: absolute; left: 50%; transform: translateX(-50%); z-index: 9; margin:0 auto; padding:0;}
.game-minutes {position: absolute; top:81px; right: 0;}

/* left-box */
.left-box {position:absolute; top: 176px; left:0; width: 255px; height: 487px; background: url('../img/left-box.png') left 0 no-repeat;}
.leftBox-inner {position:absolute; top:30px; left:30px; bottom:30px; margin: 0 auto; padding:10px 13px; width: 170px; background:rgba(255,255,255,0.10); border: 1px #292929 solid;}
.box-tit {margin-bottom:15px; font-size: 17px; font-weight: 600; text-align: center; color:#fff;}
.box-txt {font-size: 13px; color:#ccc;}

/* center-box */
.center-box {position:absolute; top: 161px; left: 50%; z-index: 2; transform: translateX(-50%); width: 411px; height: 516px; background: url('../img/center-box.png') 0 0 no-repeat;}
.centerBox-inner {position: relative; top: 20px; right:20px; left:20px; bottom:20px; padding:10px 15px; width: calc(100% - 40px); height: calc(100% - 40px); text-align: center;}

.top-btns {margin:10px auto 0 auto; text-align: right;}
.top-btns > button {background: none; border: none;}

.melody-off,
.soun-off {display: none;}

.melody-on,
.sound-on {display: inline;}


/* game-play  */
.game-play {position: relative; margin:30px auto 0 auto; text-align: center;}
.non-ladder,
.ladder {position: relative;}

.game-result {position: absolute; top:85px; left:0; right:0; margin:0 auto; width: 244px; height: 105px; background: url('../img/result-box.png') center no-repeat;}

dl.gamereult-box {position: relative; margin:0 auto; padding:5px 5px; width: 100%;}
dl.gamereult-box > dt {margin:0 auto; padding:0; line-height: 33px; font-size: 13px; font-weight: 500; text-align: center; color:#fff;}
dl.gamereult-box > dd {position: relative; margin:0; padding:0 10px; width: 100%; height: 62px; display: flex; justify-content: center; align-items: center; gap:4px;}
dl.gamereult-box > dd > img {width: 38px;}


/* waiting-board */
.waiting-board {position: absolute; left:0; right:0; bottom:50px; margin:0 auto; padding:3px 3px; width:270px; height:35px; background: #121212; border: 2px #7c2468 solid; border-radius: 25px;}
.wait-time {position: absolute; top: 0; z-index: 1; width: 266px; height: 31px; line-height: 0.7; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: bold; color: #fff; text-shadow: 0px 0px 2px rgba(0, 0, 0, 1);}

.progressBar {position: relative; width: 100%; height: 100%; border-radius: 25px; overflow: hidden;}
.progress {display: block; width: 100%; height: 100%; background-color: #dd3db8 !important;
    background-image: linear-gradient(-45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent);
    background-size: 20px 20px;
    transform-origin: left center;
    animation: shrinkBar 180s linear forwards, progressActive 1.5s linear infinite;
}

@keyframes shrinkBar {
  from {width: 100%;}
  to {width: 0%;}
}

/* 반짝이는 효과 */
@keyframes progressActive {
  0% {background-position: 0 0;}
  100% {background-position: -20px -20px;}
}

/* clock-board */
.clock-board {position: absolute; left:0; right:0; bottom:0; margin:0 auto; padding:3px 10px; width: 60%; text-align: center; font-size: 13px; color:#fff; background:rgba(255,255,255,0.15); border: 1px #313131 solid; border-radius: 10px 10px 0 0;}


/* right-box */
.right-box {position:absolute; top:176px; right:0; width: 255px; height: 487px; background: url('../img/right-box.png') right 0 no-repeat;}
.rightBox-inner {position:absolute; top:30px; right:30px; bottom:30px; margin: 0 auto; padding:5px 0; width: 170px;}

.result-wrap {margin:0 auto; width: 100%; height:calc(100% - 25px); overflow-y: auto; overflow-x: hidden;}
.result-wrap::-webkit-scrollbar {width: 5px; height: 5px; background: #000; border-radius: 5px;}
.result-wrap::-webkit-scrollbar-track {background:#000;}
.result-wrap::-webkit-scrollbar-thumb {background:#1e1e1e; border: solid 1px #000; border-radius: 5px;}

dl.result-box {position: relative; margin:0 auto 8px auto; padding:0; width: 100%; background:rgba(255,255,255,0.10); border: 1px #292929 solid; border-radius: 5px; overflow: hidden;}
dl.result-box > dt {margin:0 auto; padding:0; font-size: 13px; font-weight: 500; text-align: center; color:#ccc; background: #303030;}
dl.result-box > dd {position: relative; margin:0; padding:6px 5px; display: flex; justify-content: center; align-items: center; gap:4px;}
dl.result-box > dd > img {width: 32px;}


/****************************************************************************************************************************************
popup 시작
*****************************************************************************************************************************************/
#popup {display: none; position: absolute; left: 0; top: 0;width: 100%; height: 100%; z-index: 9999;}
.overlay {position:relative; margin:0 auto; padding:20px 20px; display: flex; align-items:flex-start;justify-content: center; height: 100%; background:rgba(0,0,0,0.5);}
.popup-cont {position: relative; margin:0 auto; padding:0; width: 850px; background: #1c0311;}

.popup-close {position: absolute; top:0; right:20px; z-index: 9; line-height: 60px; cursor: pointer;}
.popup-close > img {width: 30px;}

.layer-tit {position: relative; margin:0 auto; padding:0 20px; width: 100%; height: 60px; line-height: 60px; text-align: left; font-size: 20px; color:#fff; background: #7b0b49;}
.layer-con {position: relative; margin:0 auto; padding:30px 30px; width: 100%; text-align: left; font-size: 14px; line-height: 1.5; color:#fff;}
.sub-tit {margin:0 auto 10px auto; width: 100%; text-align: left; font-weight: 600; color:#ffc5e5;}
.margin-top {margin-top:30px;}

.codebox {position: relative; margin:20px auto; padding:20px 20px; width: 100%; display: flex; justify-content: space-between; align-items: center; background: #4d092f;}
.codebox > span {flex: 1; margin-right: auto; padding: 10px 20px 10px 10px; text-align: left; word-break: break-all; font-weight: 500; color:#fff;}
.codebox > button {width: 145px; height: 45px; text-align: center; color:#fff; background: #ff1e9b;}

/****************************************************************************************************************************************
analysis 시작
*****************************************************************************************************************************************/
.analysis {position: relative; margin:5px auto; padding:0; text-align: center; border-radius: 5px; border:1px solid #ddd;}

/* pattern_tab */
ul.pattern_tab {position: relative; margin:0 auto; padding:0; width:100%; height: 50px; display: flex; justify-content: center; align-items: center;}
ul.pattern_tab li {position: relative; margin:0 auto; padding:0; width:100%; line-height: 50px; color:#fff; background: #7b7b7b; border:1px solid #7b7b7b; cursor: pointer;}
ul.pattern_tab li.active {color:#333; background: #fff;}

@media (hover: hover) and (pointer: fine) {
  ul.pattern_tab li:hover {text-decoration: underline;}
}

/* pattern_view */
.pattern_view {position: relative; margin:0 auto; padding:0; width: 100%; background: #fff;}

/* "pattern_info */
ul.pattern_info {position: relative; margin:1px 0 0 0; padding:0 20px; width:100%; height: 50px; display: flex; justify-content:space-between; border: 1px #d6d6d6 solid; border-top: none;}
ul.pattern_info > li {position: relative; margin: 0; padding:0; display: flex; align-items: center; gap:10px;}
ul.pattern_info > li > .info_ballList {position: relative; margin: 0; padding:0; display: flex; justify-content:center; align-items: center; gap:5px;}

/* pattern_info_ball */
.info_ball {position:relative; margin:0; padding:0; width: 27px; height: 27px; display: flex; justify-content: center; align-items: center; font-size: 12px; border-radius: 16px; color: #fff;}
.blue_ball {background: #3498db;}
.red_ball {background: #e74c3c;}
.pongdang_ball {background: #af28c7;}
.break_ball {background: #393e46;}
.continuous_ball {background: #d2a92d;}

/* tab-ball */
.ball {position:relative; margin:0; padding:0; width: 27px; height: 27px; display: flex; justify-content: center; align-items: center; font-size: 9px; font-weight: 500; border-radius: 16px; color: #fff;}
.dark_blue_ball {background: #2980b9;}
.dark_red_ball {background: #c0392b;}

.dot_right {position:absolute; top:-1px; right:-1px; width: 11px; height: 11px; display: flex; justify-content: center; align-items: center; font-style: normal; color: #fff; background:#000; border-radius: 16px;}
.dot_left {position:absolute; top:-1px; left:-1px; width: 11px; height: 11px; display: flex; justify-content: center; align-items: center; font-style: normal; color: #fff; background:#000; border-radius: 16px;}


/* pattern_box */
.pattern_box {position: relative; margin:-1px auto 0 auto; padding:0; text-align: center; width:100%; border: 1px solid #d6d6d6; overflow-x: auto; overflow-y: hidden;}
.tab-box {position: relative; display:none; margin:0 auto; padding:0; width: auto; height:374px; text-align: left; font-size: 0; white-space: nowrap; background: url('../Img/bg_cell.png?11') top left repeat;}
.tab-box.active {display:block;}

.tab-box dl {display: inline-block;vertical-align: top;}
.tab-box dt, 
.tab-box dd {width: 34px; height: 34px; display: flex; justify-content: center; align-items: center; font-size: 12px;}
.tab-box dt.txt_red {color: #c0392b; font-weight: 500;}
.tab-box dt.txt_blue {color: #2980b9; font-weight: 500;}
.tab-box dd.length {position: absolute; bottom: 34px;}
.tab-box dd.times {position: absolute; bottom: 0;}