.tap-rack-container {
  width: 100%;
  height: 720px;
}
/* ---------------------------------------------- */
/* 좌측 rack 영역 */
.tap-rack-content-wrap {
  width: 310px;
  height: 720px;
}
#tap-rack-mask {
  width: 100%;
  height: 100%;
  background-color: #000;
  opacity: 0.7;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
}
#tap-rack-mask > div {
  color: #fff;
  margin-top: -80px;
  animation: tap-rack-blink 1s infinite;
}
#tap-rack-mask > img {
  animation: tap-rack-console 1s infinite;
}
@keyframes tap-rack-console {
    0% { scale: 1.0; }
   50% { scale: 1.03; }
  100% { scale: 1.0; }
}
/* 커서 도착지*/
#tap-rack-mask img:nth-child(1) {
  top: 231px;
  left: 42px;
  border: 2px solid #ff9800;
}
/* 콘솔 화면 위 커서 */
#tap-rack-mask div:nth-child(2) {
  background-image: url('/wp-content/uploads/2025/03/tap-rack-pointer.png');
  background-size: 160px;
  background-position: 55px -75px;
  width: 20px;
  height: 24px;
}
/* 움직이는 커서 */
#tap-rack-content-cursor {
  background-image: url('/wp-content/uploads/2025/03/tap-rack-pointer.png');
  background-size: 160px;
  background-position: 55px -75px;
  width: 20px;
  height: 24px;
  position: absolute;
  top: 0px;
  left: 380px;
  z-index: 9999;
}
/* 커서 움직임 종료 지점 */
.tap-rack-content-cursor-move {
  animation: tap-rack-cursor 1.8s infinite;
}
@keyframes tap-rack-cursor {
    0% { top:   0px; left: 380px; }
  100% { top: 309px; left:  75px; }
}
.tap-rack-content {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.50), 0 3px 6px rgba(0, 0, 0, 0.50);
  background-image: url('/wp-content/uploads/2025/02/tap-rack.png');
  background-repeat: no-repeat;
  position: absolute;
  width: 304px;
  height: 720px;
}
.tap-rack-content img {
  position: absolute;
  cursor: pointer;
}
/* images */
#tap-rack-img-part-0-top     {       top:  0px; }
#tap-rack-img-part-0-bottom  {    bottom:  0px; }
#tap-rack-img-part-0-right   {     right:  0px; }
#tap-rack-img-part-0-left    {      left:  0px; }
#tap-rack-img-part-1 { top:  50px;  left: 17px; }
#tap-rack-img-part-2 { top:  84px;  left: 17px; }
#tap-rack-img-part-3 { top: 115px;  left: 17px; }
#tap-rack-img-part-4 { top: 172px;  left: 17px; }
#tap-rack-img-part-5 { top: 231px;  left: 42px; }
#tap-rack-img-part-6 { top: 425px;  left: 17px; }
#tap-rack-img-part-7 { top: 627px;  left: 17px; }
#tap-rack-img-part-8 { top: 233px; right:  0px; }
/* part common hover */
.tap-rack-part-hover {
  z-index: 9990;
  border: 2px solid #ff9800; 
  animation: part-hover 0.3s;
  animation-fill-mode: forwards;
}
.tap-rack-part-out {
  animation: part-out 0.3s;
  animation-fill-mode: forwards;
}
/* top hover */
.tap-rack-part-top-hover {
  z-index: 9991;
  border: 2px solid #ff9800; 
  border-bottom: none; 
  animation: rack-top-hover 0.3s;
  animation-fill-mode: forwards;
}
.tap-rack-part-top-out {
  animation: rack-top-out 0.3s;
  animation-fill-mode: forwards;
}
/* bottom hover */
.tap-rack-part-bottom-hover {
  z-index: 9991;
  border: 2px solid #ff9800; 
  border-top: none; 
  animation: rack-bottom-hover 0.3s;
  animation-fill-mode: forwards;
}
.tap-rack-part-bottom-out {
  animation: rack-bottom-out 0.3s;
  animation-fill-mode: forwards;
}
/* left hover */
.tap-rack-part-left-hover {
  z-index: 9990;
  border-left: 2px solid #ff9800; 
  animation: rack-left-hover 0.3s;
  animation-fill-mode: forwards;
}
.tap-rack-part-left-out {
  animation: rack-left-out 0.3s;
  animation-fill-mode: forwards;
}
/* right hover */
.tap-rack-part-right-hover {
  z-index: 9990;
  border-right: 2px solid #ff9800; 
  animation: rack-right-hover 0.3s;
  animation-fill-mode: forwards;
}
.tap-rack-part-right-out {
  animation: rack-right-out 0.3s;
  animation-fill-mode: forwards;
}
@keyframes part-hover        { 0% { scale: 1.0;} 100% { scale: 1.1;} }
@keyframes prt-ouat          { 0% { scale: 1.1;} 100% { scale: 1.0;} }
@keyframes rack-top-hover    { 0% { scale: 1.0;} 100% { scale: 1.098;} }
@keyframes rack-top-out      { 0% { scale: 1.1;} 100% { scale: 1.0;} }
@keyframes rack-bottom-hover { 0% { scale: 1.0;} 100% { scale: 1.098;} }
@keyframes rack-bottom-out   { 0% { scale: 1.1;} 100% { scale: 1.0;} }
@keyframes rack-left-hover {
    0% { top:  0px;  left:   0px; width: 16px; height: 714px; }
  100% { top: 34px;  left: -15px; width: 32px; height: 628px; }
}
@keyframes rack-left-out {
    0% { top: 34px;  left: -15px; width: 32px; height: 628px; }
  100% { top:  0px;  left:   0px; width: 16px; height: 714px; }
}
@keyframes rack-right-hover {
    0% { top:  0px; right:   0px; width: 16px; height: 714px; }
  100% { top: 34px; right: -15px; width: 34px; height: 628px; }
}
@keyframes rack-right-out {
    0% { top: 34px; right: -15px; width: 34px; height: 628px; }
  100% { top:  0px; right:   0px; width: 16px; height: 714px; }
}

/* ---------------------------------------------- */
/* 우측 explain 영역 */
.tap-rack-explain-container {
  box-shadow: 0 3px 6px rgba(0,0,0,0.50), 0 3px 6px rgba(0,0,0,0.50);
  background-image: url('/wp-content/uploads/2025/02/tap-rack-console.png');
  font-size: 16px;
  color: #fff;
  width: 800px;
  height: 600px;
  margin-left: 410px;
  border: 1px solid grey;
  position: absolute;
  top: 50px;
}
.tap-rack-explain-container > div {
  padding: 4px 48px 0px 12px;
}
.tap-rack-explain-container span {
  font-family: monospace, Verdana, Geneva, Tahoma, sans-serif;
  font-size: 19px;
  line-height: 1.8;
  word-break: keep-all;
}
.tap-rack-explain-container span e {
  color: #fff;
  font-weight: normal;
}
#tap-rack-explain-title {
  margin-top: 56px;
}
.tap-rack-explain-enter-output {
  color: #ff9800;
  font-weight: bold;
}
.cursor {
  border-left: 2px solid #ffffff; /* 커서 스타일 */
  animation: tap-rack-blink 0.6s infinite;
  display: inline-block;
  margin-left: 2px;
  height: 18px; /* 폰트 크기와 동일하게 설정 */
  vertical-align: middle;
}
@keyframes tap-rack-blink {
    0% { opacity: 1; }
   50% { opacity: 0; }
  100% { opacity: 1; }
}
#tap-rack-explain-default-content {
}
.tap-rack-explain-default-content-rack {
  font-size: 8.2px;
  /* font-size: 8.2px; 워드프레스용 */
}
.tap-rack-explain-default-content-print {
/*  font-size: 19px; */
  font-size: 13px;
}