.stage {position:relative; width:100%; display:flex;  box-sizing:border-box; }
.stage div.box {width:100%; position:relative;}
.stage div.box { display:none}
.stage div.box:first-child { display:block; }
.stage div.box .flex {align-items:flex-start; gap:20px}
.stage h3 {height:50px; }

.stage img {width:100%}
.stage button {
  position:absolute;
  width:22px;
  height:22px;
  border-radius:50%;
  background-color:var(--main_c);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:17px;
  font-weight:300;
  border:none;
  cursor:pointer;
  z-index:2;
}
.stage button span {display:none}

/* 툴팁 */
.stage button::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 130%;
  left: 50%;
  transform: translateX(-50%);
  background: #111;
  color: #fff;
  padding: 6px 10px;
  font-size: 12px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: 0.2s;
}

/* 퍼지는 링 효과 (화살표 제거하고 이것만 유지) */
.stage button::after {
  content:"";
  position:absolute;
  top:50%;
  left:50%;
  width:100%;
  height:100%;
  border-radius:50%;
  background:var(--main_c);
  transform:translate(-50%, -50%);
  opacity:0.6;
  z-index:-1;
  animation:pulse 1.6s infinite;
}

.stage button:hover::before {
  opacity:1;
}

/* 애니메이션 */
@keyframes pulse {
  0% {transform:translate(-50%, -50%) scale(1); opacity:0.8;}
  70% {transform:translate(-50%, -50%) scale(2.2); opacity:0;}
  100% {opacity:0;}
}

/* hover 효과 */
.stage button:hover {
  transform:scale(1.2);
  transition:0.2s;
}






.button_wrap {width:100%; height:100%; position:absolute; top:0; left:0; }



@media all and (max-width:800px) {
		.stage div.box {width:100%}
		.stage button {width:20px; height:20px}
  }




.table_div {width:200px; text-align:right}
.table_div p { color: #000; background: #ee7e40; displaY:inline-block; margin-toP:10px;  font-size:14px}
.stage div.box table.basic {width:100%}
.stage div.box table.basic th {padding:10px; text-align:center;  font-size:14px; width:50%;  border:1px solid #fff}
.stage div.box table.basic td {padding:10px; font-size:14px; width:50%;  }

.seat-map { width:900px;   margin: 0 auto; border:2px solid #fff; border-radius:20px;  padding:30px;  position: relative; }
.seat-map .tit { width: 100%; height: 80px; margin: 0 auto 10px; border: 2px solid #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; }
.seat-map .floor-title { text-align: center; font-size: 20px; font-weight: bold; margin: 10px 0 10px; }
.map-body { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; }
.seat-area { position: relative; width: 100%; }

.center-block { vertical-align: top;   }
.side-block   {  vertical-align: top;  }
.right-block {  vertical-align: top;   }

.row-wrap { display: flex; justify-content:flex-end; align-items: center; margin-bottom: -1px; }
.center-block .row-wrap {   justify-content:center}
.right-block  .row-wrap { justify-content:flex-start}
.row-label { width: 26px; text-align: center; padding:0 20px; font-size: 14px;   }
.right-block  .row-label {display:none}


table.seat-table td { width: 26px; height: 24px; border: 1px solid #fff; text-align: center; vertical-align: middle; font-size: 13px; padding: 0; }
table.seat-table td.active { background:var(--main_c); color: #fff; }

.console { width: 269px; height: 60px; border: 1px solid #fff; margin-left:0px; margin-top: -1px; display: flex; align-items: center; justify-content: center; font-size: 16px; }

/****/

.type2 .top-area { position:relative; margin-bottom:30px; display:flex; gap:10px; padding-righT:63px }
.type2 .top-area .balcony-label {font-size:14px; }

.type2  td { width:21px; height:22px; border:1px solid #fff; text-align:center; vertical-align:middle; font-size:12px; padding:0 4px; white-space:nowrap; }
.type2  td.none {width:22px; border:none; }
.type2 td.big_td {width:51px; height:30px}
.type2 .main-wrap{ display:flex; padding-left:0px; justify-content:center; align-items:flex-start; }
.type2 .block { display:flex; flex-direction:column; margin-left:30px; gap:2px; }
.type2 .block.r {margin-left:0;}
.type2 .block .row {justify-content:flex-end; }
.type2 .block.r .row {justify-content:flex-start }
.type2 .row {display:flex; align-items:center; gap:6px; }
.type2 .row + .row {margin-top:-2px}


.type2 .left-lower {margin-top:-1px}
.type2 .wheel-left, .wheel-right{ margin-top:-1px }
.type2 .wheel-right { margin-left:0; }
.type2 .entrance { text-align:center; font-size:18px; font-weight:bold; margin-top:26px; }


.stage1 .point:nth-child(1) {top:19.5%; left:18.5%;}
.stage1 .point:nth-child(2) {top:19.5%; left:46%;}
.stage1 .point:nth-child(3) {top:19.5%; right:20%;}
.stage1 .point:nth-child(4) {top:50.5%; left:14%;}
.stage1 .point:nth-child(5) {top:50.5%; left:46%;}
.stage1 .point:nth-child(6) {top:50.5%; right:14%;}
.stage1 .point:nth-child(7) {top:82%; left:21%;}
.stage1 .point:nth-child(8) {top:82%; left:47%;}
.stage1 .point:nth-child(9) {top:82%; right:23%;}


.stage2 .point:nth-child(1)  {top:38%; left:10%;}
.stage2 .point:nth-child(2)  {top:25%; right:17%;}
.stage2 .point:nth-child(3)  {top:47%; left:15%;}
.stage2 .point:nth-child(4)  {top:47%; left:48%;}
.stage2 .point:nth-child(5)  {top:47%; right:24.5%;}
.stage2 .point:nth-child(6)  {top:61%; left:19%;}
.stage2 .point:nth-child(7)  {top:61%; left:37%;}
.stage2 .point:nth-child(8)  {top:61%; right:24.5%;}
.stage2 .point:nth-child(9)  {top:72%; left:13%;}
.stage2 .point:nth-child(10) {top:72%; left:48%;}
.stage2 .point:nth-child(11) {top:72%; right:12%;}

 .button_wrap {}


@media all and (min-width:1240px) {

 .seat-map img {display:none}
}


@media all and (max-width:1240px) {
	.seat-map {border:none; padding:0}
	.seat-map_in {display:none}
 

}

@media all and (max-width:800px) {
		.table_div {width:100%}
		.stage div.box table.basic th {width:25%; padding:5px; font-size:14px}
		.stage div.box table.basic td {width:25%; padding:5px; font-size:14px}

}