/* 숨기기용 클래스 */
.hidden { display: none !important; }

/* 1) 마우스 오버 시 토너먼트 행의 모든 셀을 볼드로 */
/*
tr[data-file]:hover td {
  font-weight: bold;
}
*/

/* 필터링된 행은 항상 안 보이도록 */
.filter-hidden { display: none; }
/* collapsed 클래스 붙으면 접힌 상태(안 보이도록) */
.collapsed_game { display: none !important; }


/* 2) 클릭해서 선택된(= .selected) 토너먼트 행의 모든 셀을 볼드로 */
tr.trn-row.selected td {
  font-weight: bold;
}

tr.viewer-row {
  cursor: default !important;   /* 손가락 커서 제거 */
}

.viewer-row > td { padding: 0; }
tr.game-row { cursor: pointer; }

/* CSS */
.tooltip_game2 {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

/* 말풍선 텍스트 (아래에 표시) */
.tooltip_game2 .tooltip-text {
  visibility: hidden;
  opacity: 0;
  background: #fff;
  color: #333;
  text-align: center;
  padding: 6px 10px;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  position: absolute;
  top: 125%;                   /* 위에서 아래로 띄우기 */
  left: 50%;
  transform: translateX(-50%);
  transition: opacity 0.15s ease-in-out;
  white-space: nowrap;
  z-index: 10;
}

/* 말풍선 화살표 (위쪽을 가리키도록) */
.tooltip_game2 .tooltip-text::after {
  content: '';
  position: absolute;
  bottom: 100%;                /* 텍스트 박스 바로 위 */
  left: 50%;
  transform: translateX(-50%);
  border-width: 6px;
  border-style: solid;
  border-color: transparent transparent #fff transparent;
}

/* hover 하면 보이도록 */
.tooltip_game2:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}




        /* 검색 버튼 disabled 시 스타일 */
        #searchForm button[type="submit"]:disabled {
          background-color: #dddddd;    /* 연한 회색 배경 */
          color: #aaa;               /* 진한 회색 텍스트 */
          cursor: not-allowed !important;       /* 금지 커서 */
          opacity: 0.7;              /* 약간 투명하게 */
        }


        .level-title a:hover {
            text-decoration: underline;
            color: #FFF;
        }
          
          
          /* 토너먼트 행 마우스 오버 시 손가락 포인터 */
          #tblTrn tbody tr[data-file]:hover {
            cursor: pointer;
          }

          #tblTrn .game-tourney-name {
            text-align: left;
            font-size: 14px;
            white-space: normal;
            overflow-wrap: anywhere;
            word-break: break-word;
          }

          #tblTrn tr.game-row td,
          #tblSearch tr.game-row td,
          #tblSearch tr.trn-row td {
            font-size: 14px;
          }

          #tblTrn .name-with-flag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            max-width: 100%;
          }

          #tblTrn .name-with-flag .tooltip_game {
            flex: 0 0 auto;
            line-height: 1;
          }

          #tblTrn .name-with-flag .tooltip_game .tooltip-text {
            left: 0;
            transform: none;
          }

          #tblTrn .name-with-flag .tooltip_game .tooltip-text::after {
            left: 12px;
            transform: none;
          }

          #tblTrn .flag-img {
            display: inline-block;
            width: 24px;
            height: 16px;
            object-fit: fill;
            border: 0;
            border-radius: 0;
            vertical-align: middle;
          }

          #tblTrn .game-flag-code {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            min-width: 24px;
            height: 16px;
            padding: 0 3px;
            box-sizing: border-box;
            border: 1px solid #c8c8c8;
            border-radius: 2px;
            background: #f7f7f7;
            color: #333;
            font-size: 10px;
            line-height: 1;
            font-weight: 600;
            letter-spacing: 0;
          }

          #tblTrn .game-tourney-label {
            min-width: 0;
          }

          @media (max-width: 760px) {
            #tblTrn .game-tourney-name,
            #tblTrn tr.game-row td,
            #tblSearch tr.game-row td,
            #tblSearch tr.trn-row td {
              font-size: 14px;
            }
          }

          .text-container {
            position: relative;  /* 이 한 줄만 추가하세요 */
          }

          /* 2) 드롭다운 CSS 수정 */
        .search-results {
          list-style: none;
          margin: 0;
          padding: 0;
          max-height: 200px;
          overflow-y: auto;
          border: 1px solid #ccc;
          position: absolute;
          top: 95%;      /* input 바로 아래에 붙도록 */
          left: 0;
          right: 0;       /* left/right 모두 0 이면 부모 너비에 딱 맞습니다 */
          background: white;
          z-index: 100;

          /* 기본 숨김 */
          display: none;

          /* 박스 사이징도 border 포함하도록 */
          box-sizing: border-box;
        }
        /* 자식(li)이 하나라도 있으면 자동으로 보이기 */
        .search-results:not(:empty) {
          display: block;
        }
        .search-results li {
          padding: 5px 10px;
          cursor: pointer;
        }
        .search-results li:hover {
          background: #f0f0f0;
        }
        /* 현재 강조된 항목 스타일 */
        .search-results li.highlight {
          background-color: #ddd;
        }

        #loadingMessage {
          font-size: 16px;
          color: #555;
        }

        .search-results li.trn-selected {
          background-color: #ddd;  /* 강조 스타일 */
        }