#gostart {
    background-image: url('/static/image/report.png') !important; /* 이미지 파일 경로 */
    background-size: cover !important; /* 이미지가 버튼에 꽉 차게 설정 */
    background-position: center !important; /* 이미지 위치 설정 */
    background-color: #0056b3 !important;
  }

  #gostart:hover{
    transform: translateY(-4px) !important;
    background-color: #0056b3 !important;
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2) !important;
}

  .disabled-tile {
      pointer-events: none; 
    }
  
    .disabled-tile .char-img {
      filter: grayscale(100%) !important;
      opacity: 0.2;
    }
  
    .disabled-tile:hover .char-img {
      transform: skew(10deg); /* hover 확대 무효화 */
      filter: grayscale(100%) !important;
      opacity: 0.6;
    }
  .theme-toggle {
      background-color: none !important;
      border: none !important;
      border-radius: 50% !important;
      width: 42px !important;
      height: 42px !important;
      cursor: pointer !important;
      display: flex !important;
      align-items: center !important;
      justify-content: center !important;
      font-size: 1.3rem !important;
      padding: 0 !important;
      box-shadow: 0 2px 6px rgba(0,0,0,0.1) !important;
      transition: all 0.3s ease !important;
  }
  
  .theme-toggle:hover {
      background-color: var(--dropdown-hover) !important;
      box-shadow: 0 4px 10px rgba(0,0,0,0.15) !important;
      transform: translateY(-1px) !important;
  }
  
  .theme-toggle:active {
      transform: scale(0.95) !important;
  }
  .skew-box {
    transform: skew(-10deg);
    border-radius: 0.5rem;
    overflow: hidden;
    position: relative;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }

  .char-img {
    transform: skew(10deg);
    filter: grayscale(100%);
    opacity: 0.85;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease, filter 0.3s ease, opacity 0.3s ease;
  }

  .character-tile:hover .char-img {
    filter: grayscale(0%);
    opacity: 1;
    transform: skew(10deg) scale(1.05);
  }

  .text-overlay {
    position: absolute;
    bottom: 10px;
    left: 12px;
    font-weight: 600;
    font-family: 'Inter', sans-serif;
    font-size: 1.1rem;
    color: white;
    transform: skew(10deg);
    text-shadow: 0 0 2px #000;
    z-index: 10;
  }

  .text-outline {
  text-shadow:
     -1px -1px 0 #000,  
      1px -1px 0 #000,
     -1px  1px 0 #000,
      1px  1px 0 #000;
}