@charset "utf-8";

/* ================================================
   서비스 배경색 설정
   되돌리려면: --service-bg-color 값을 #ffffff 으로 변경
   ================================================ */
:root {
  --service-bg-color: #0E1A33;
}
body {
  background-color: var(--service-bg-color) !important;
  color: #ffffff !important;
}

    *{
      text-decoration: none !important;
    }
    ul,li{
      text-decoration: none !important;
      list-style: none !important;
      list-style-type: none !important;
    }
    .row>*{
      padding: 0 !important;
      margin: 0 !important;
    }
    /* html,body{
      height: 100% !important;
    } */
    /* 웹 크기 */
    .web-size{
      /* background-color: aqua; */
      max-width: 768px !important;
      margin: 0 auto !important;
      padding: 1.4rem !important;
      max-height: calc(100% - 51px) !important;
      overflow-y: hidden !important;
      overflow-x: hidden !important;
    }
    /* 전체 스크롤바의 너비 */
    ::-webkit-scrollbar {
      width: 12px;
    }
    
    /* 스크롤바 트랙 */
    ::-webkit-scrollbar-track {
      background: #1E293B;
      border-radius: 10px;
    }

    /* 스크롤바 핸들 */
    ::-webkit-scrollbar-thumb {
      background-color: #334155;
      border-radius: 10px;
    }

    /* 스크롤바 핸들: 호버 시 */
    ::-webkit-scrollbar-thumb:hover {
      background: #475569;
    }
    .overflow-y{
      overflow-y: auto !important;
      height: 720px !important;
    }
    .form-check-input:checked {
  background-color: rgb(112, 211, 187);
  border-color: rgb(112, 211, 187);
}
.form-check-input:focus {
  box-shadow: none;
  outline: none;
}
    /* 헤더 */
    .fixed-header {
      position: fixed !important;
      background-color: #0E1A33 !important;
      width: 100% !important; /* 고정 크기 대신 100% 사용 */
      max-width: 768px !important;
      height: 65px !important;
      top: 0px;
      left: 50% !important;
      transform: translateX(-50%);
      border-bottom: 1px solid #334155 !important;
      padding: 0 1.4rem !important;
      z-index: 1 !important;
    }
    .fa-angle-left{
      cursor: pointer !important;
    }
    .logo {
      position: absolute !important;
      left: 1.4rem !important; /* % 단위로 변경 */
      top: 50% !important;
      transform: translateY(-50%);
      width: 80px !important; /* 너비 조정 */
    }
    /* .myqr {
      position: absolute !important;
      right: 4rem !important;
      right: 1.4rem !important;
      top: 50% !important;
      transform: translateY(-50%);
    } */
    .hamburger {
      position: absolute;
      right: 1.4rem !important; /* % 단위로 변경 */
      top: 50% !important;
      transform: translateY(-50%);
      cursor: pointer;
    }
    .hamburger-circle{
      top: 10px !important;
      right: 15px !important; 
      font-size: 10px !important;
      color: #FF5C5C !important;
    }
    .header-down{
      height: 65px !important;
    }
    
    /* 하단메뉴 */
    .fixed-nav{
      position: fixed !important;
      background-color: #0E1A33 !important;
      width: 100% !important; /* 고정 크기 대신 100% 사용 */
      max-width: 768px !important;
      height: 65px !important;
      bottom: 0px;
      left: 50% !important;
      transform: translateX(-50%);
      border-top: 1px solid #334155 !important;
      z-index: 1 !important;
    }
    .center-btn{
      position: fixed !important;
      bottom: 5rem !important;
      right: 20px !important;
      background-color: #1E293B !important;
      width: 55px !important;
      height: 55px !important;
      border-radius: 50px !important;
      box-shadow: 0 0 5px rgba(0,0,0,0.25);
    }
    .center-circle{
      position: absolute !important;
      background-color: #334155 !important;
      background-image: none !important;
      width: 85%;
      height: 85%;
      border-radius: 50%; /* 둥근 모양 */
    }
    .qrscan{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      width: 25px;
      height: 25px;
    }
    .mypage-gray{
      width: 27px !important;
      height: 24px !important;
    }
    .trophy{
      width: 29px !important;
      height: 30px !important;
    }
    .trophy-color{
      width: 30px !important;
      height: 30px !important;
    }
    /* 네임태그 */
    .name-tag-user{
      background-color: #9DE5EC !important;
      color: #fff !important;
      font-size: 14px !important;
      padding: 5px 20px !important;
      border-radius: 20px !important;
      font-weight: bold !important;
    }
    .name-tag-organizer{
      background-color: #70D3BB !important;
      color: #fff !important;
      font-size: 14px !important;
      padding: 5px 20px !important;
      border-radius: 20px !important;
      font-weight: bold !important;
    }
    .name-tag-admin{
      background-color: #70D3BB !important;
      color: #fff !important;
      font-size: 14px !important;
      padding: 5px 20px !important;
      border-radius: 20px !important;
      font-weight: bold !important;
    }

    .userlist{
      margin-left: 4px !important;
      margin-right: 7px !important;
      width: 27px !important;
      height: 30px !important;
    }

    /* 오프캔버스 */
    .offcanvas {
    height: 100vh; /* 전체 화면 높이 */
    z-index: 9999 !important;
    background-color: #0E1A33 !important;
    color: #ffffff !important;
    }
    .offcanvas-body {
      overflow-y: auto !important;
      background-color: #0E1A33 !important;
    }
    .notice-circle{
      top: 78px !important;
      left: 87px !important; 
      font-size: 10px !important;
      color: #FF5C5C !important;
    }
    /* circlc */
    .circle-relative{
      position: relative !important;
    }
    .circle-absolute{
      position: absolute !important;
      top: -9px !important;
      right: -6px !important; 
      font-size: 10px !important;
      color: #FF5C5C !important;
    }
    /* 아코디언 */
    .accordion-button {
      padding: 20px 0 !important;
    }
    .accordion-button:focus {
      box-shadow: none !important;
    }
    .accordion-button:not(.collapsed) {
      background-color: transparent !important;
      box-shadow: none !important;
    }
    .accordion-body {
      padding: 0 0 0 10px !important;
      margin-bottom: 20px;
    }

    /* 버튼 */
    .btn-close:focus {
      box-shadow: none !important;
      outline: none; /* outline 제거 */
    }

    /* hr */
    .full-width-hr {
      position: relative !important;
      left: -1.4rem !important;
      width: calc(100% + 2.8rem) !important;
      border: 1px solid #334155 !important;
      z-index: -99999 !important; /* offcanvas보다 낮은 값으로 설정 */
      margin-top: 2rem;
      margin-bottom: 1rem;
    }
    .hr {
      border: 1px solid #334155 !important; /* hr의 스타일 */
      opacity: 1 !important;
      margin: 0 !important;
    }
    /* 글자 설정 */
    p{
      margin: 0 !important;
    }
    .color1{
      color: #ffffff !important;
    }
    .fs1{
      font-size: 24px !important;
    }
    .color2{
      color: #94A3B8 !important;
    }
    .fs2{
      font-size: 18px !important;
    }
    .color3{
      color: #64748B !important;
    }
    .fs3{
      font-size: 16px !important;
    }
    .color4{
      color: #70D3BB !important;
    }
    .fs4{
      font-size: 14px !important;
    }
    .color5{
      color: #FF5C5C !important;
    }
    .fs5{
      font-size: 13px !important;
    }

    /* input */
    .input-mb{
      position: relative;
      margin-bottom: 20px;
    }
    .default-input{
      border: none !important;
      border-bottom: 2px solid #334155 !important;
      width: 100% !important;
      padding: 10px 25px 10px 15px !important;
      font-size: 14px !important;
      font-weight: bold;
      border-radius: 0 !important;
      background-color: transparent !important;
      color: #ffffff !important;
    }
    .default-input2{
      border: 2px solid #334155 !important;
      border-radius: 15px;
      width: 100% !important;
      height: 300px !important;
      padding: 10px 15px 10px 15px !important;
      outline: none; /* 기본 포커스 아웃라인 제거 */
      color: #94A3B8 !important;
      font-size: 14px !important;
      font-weight: bold;
      background-color: #1E293B !important;
    }
    .default-input2:focus,.default-input2:active{
      border: 2px solid #334155 !important;
      color: #94A3B8 !important;
      font-size: 14px !important;
      font-weight: bold;
    }
    .default-input2::placeholder{
      color: #64748B !important;
      font-size: 14px !important;
      font-weight: bold; /* 또는 숫자로 지정: 100, 400, 700 등 */
    }
    input::placeholder {
      color: #64748B !important;
      font-size: 14px !important;
      font-weight: bold !important; /* 또는 숫자로 지정: 100, 400, 700 등 */
    }
    .form-select:focus{
      box-shadow: none !important; /* 파란색 그림자 제거 */
      outline: none !important; /* 테두리 제거 */
      border: var(--bs-border-width) solid var(--bs-border-color) !important;
    }
    .default-input:focus {
      border-bottom: 2px solid #3B82F6 !important;
      outline: none;
    }
    .border {
      border-bottom: 2px solid transparent; /* 기본적으로 투명한 border */
    }
    .error-border {
      border-color: #FF5C5C !important; /* 오류 시 빨간색 border 적용 */
    }
    .success-border {
      border-color: #3B82F6 !important;  /* 성공 시 border 적용 */
    }
    .input-container {
      position: relative; /* 위치를 상대적으로 설정 */
      width: 100%;
      padding-bottom: 25px;
    }
    .error-location, .check-location{
      top: 12% !important;
      right: 0 !important;
      transform: translateX(-12%) !important;
    }
    .error-icon, .check-icon {
      position: absolute;
      right: 0px; /* 입력 필드의 오른쪽 끝에 배치 */
      top: 33%; /* 수직 중앙에 배치 */
      transform: translateY(-50%); /* 중앙 정렬을 위해 변환 */
      display: flex; /* flexbox 사용 */
      align-items: center; /* 세로 중앙 정렬 */
      justify-content: center; /* 가로 중앙 정렬 */
      color: white;
      border-radius: 50%;
      width: 20px;
      height: 20px;
      text-align: center; /* 중앙 정렬 */
      line-height: 20px; /* 아이콘을 수직 중앙에 정렬 */
    }
    .detail-input-container > .error-icon{
      top: 15px !important;
      right: 5px !important;
    }
    .detail-input-container > .check-icon{
      top: 15px !important;
      right: 5px !important;
    }
    .error-icon {
      display: none;
      background-color: #FF5C5C; /* 오류 아이콘 배경색 */
    }
    
    .check-icon {
      display: none;
      background-color: #3B82F6; /* 체크 아이콘 배경색 */
    }
    .error-message {
      position: absolute;
      bottom: -1.3rem;
      color: #FF5C5C;
      line-height: 1.2;
      white-space: normal;
      display: none;
      min-height: 2.4rem;
    }
    
    /* 버튼 */
    .btn-green-radius{ /* modify */
      background-color: #3B82F6;
      border: none;
      border-radius: 30px;
      color: #fff;
      font-weight: bold;
      font-size: 16px;
      padding: 3px 10px;
    }
    .btn-green-radius:hover {
      background-color: #2563EB;
    }
    .btn-red-radius{ /* delete */
      background-color: #EC756A;
      border: none;
      border-radius: 30px;
      color: #fff;
      font-weight: bold;
      font-size: 16px;
      padding: 3px 10px;
    }
    .btn-blue-radius{ /* active */
      background-color: #3B82F6;
      border: none;
      border-radius: 30px;
      color: #fff;
      font-weight: bold;
      font-size: 16px;
      padding: 3px 10px;
    }
    .btn-blue-radius:hover {
      background-color: #2563EB;
    }
    .btn-gray-radius{ /* inactive */
      background-color: #1E293B;
      border: 1px solid #334155;
      border-radius: 30px;
      color: #94A3B8;
      font-weight: bold;
      font-size: 16px;
      padding: 3px 10px;
    }
    .btn-yellow-radius{
      background-color: #FFB922;
      border: none;
      border-radius: 30px;
      color: #767676;
      font-weight: bold;
      font-size: 16px;
      padding: 3px 10px;
    }
    .btn-black-radius{
      background-color: black;
      color: white;
      border: none;
      outline: 1px solid white;
      box-shadow: 0 0 0 1px white;
    }
    .authentication-send,.authentication-check,.duplicate-check-nickname,.duplicate-check-id, .change-password,#btnChangeName{
      width: 25% !important;
      padding: 10px 0 !important;
      border: 1px solid #3B82F6;
      border-radius: 30px !important;
      background-color: #1E293B;
      color: #3B82F6;
      /* font-weight: 900 !important; */
    }
    .button-confirmed {
      background-color: #3B82F6 !important;
      color: #fff !important;
    }
    #loginBtn{
      font-size: 18px !important;
      width: 100% !important;
      padding: 15px 0 !important;
      border: none !important;
      border-radius: 30px !important;
      background-color: #3B82F6 !important;
      color: #fff !important;
    }
    #loginBtn:hover {
      background-color: #2563EB !important;
    }
    #signupBtn{
      font-size: 18px !important;
      width: 100% !important;
      padding: 15px 0 !important;
      border: 1px solid #334155 !important;
      border-radius: 30px !important;
      background-color: #1E293B !important;
      color: #ffffff !important;
    }
    #signupBtn:hover {
      background-color: #334155 !important;
    }
    .goAccountSettings{
      display: inline-block;
  width: 28px;      /* 웹에서 보여줄 최종 크기 (2x PNG 기준) */
  height: 28px;
  background-image: url("/img/icon/sprite2-afe791129dd89d10c7327ae1926b98cd.png");
  background-size: 418px 291px;  /* 스프라이트 전체 크기 (2x PNG) */
  background-position: -128px -152px; /* 스프라이트에서 해당 아이콘 위치 */
  background-repeat: no-repeat;
    }
    .goQrScan{
      display: inline-block;
    }
    .qrscan-wrapper{
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      z-index: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
    }
    .qrscan-icon{
      font-size: 22px;
      color: #fff;
    }
    .qrscan-label{
      font-size: 10px;
      color: #fff;
      font-weight: bold;
      white-space: nowrap;
    }
    /* 고정버튼 */
    #next-button,#account-settings,#sendBtn,#add-button,#accountRegisterBtn,#reservation-cancel, #admin-event-modify{
      position: fixed !important;
      left: 50% !important;
      transform: translateX(-50%);
      bottom: 0 !important;
      width: 768px !important;
      padding: 25px 0 !important;
      background-color: #1E293B;
      border: none !important;
      color: #94A3B8 !important;
      font-weight: bold !important;
      z-index: 9 !important;
    }
    #reservation-closing{
      position: fixed !important;
      left: 50% !important;
      transform: translateX(-50%);
      bottom: 0 !important;
      width: 768px !important;
      padding: 25px 0 !important;
      background-color: #EC756A;
      border: none !important;
      color: #fff !important;
      font-weight: bold !important;
    }
    #next-button.active, #account-settings.active, #sendBtn.active, #add-button.active, #accountRegisterBtn.active,#reservation, #admin-event-modify.active{
      position: fixed !important;
      left: 50% !important;
      transform: translateX(-50%);
      bottom: 0 !important;
      width: 768px !important;
      padding: 25px 0 !important;
      background-color: #3B82F6;
      border: none !important;
      color: #fff !important;
      font-weight: bold !important;
      z-index: 9 !important;
    }
    #next-button.active:hover, #account-settings.active:hover, #sendBtn.active:hover,
    #add-button.active:hover, #accountRegisterBtn.active:hover, #admin-event-modify.active:hover {
      background-color: #2563EB;
    }
    #signup-complete-button{
      position: fixed !important;
      left: 50% !important;
      transform: translateX(-50%);
      bottom: 0 !important;
      width: 768px !important;
      padding: 25px 0 !important;
      background-color: #3B82F6;
      border: none !important;
      color: #fff !important;
      font-weight: bold !important;
    }
    #signup-complete-button:hover {
      background-color: #2563EB;
    }
    /* 계정설정 */
    .account{
      background-color: #1E293B !important;
      border: 1px solid #334155 !important;
      border-radius: 15px !important;
      padding: 5px 10px !important;
      cursor: pointer !important;
      color: #ffffff !important;
    }
    /* 포인트 보내기 */
    .send{
      background-color: #3B82F6 !important;
      border-radius: 15px !important;
      padding: 5px 10px !important;
      color:#fff !important;
    }
    .send:hover {
      background-color: #2563EB !important;
    }
    .point-select{
      margin-top: 5px !important;
      border: 1px solid #334155 !important;
      background-color: #1E293B !important;
      color: #94A3B8 !important;
      border-radius: 30px !important;
      font-size: 14px !important;
      font-weight: bold !important;
      padding: 5px 10px !important;
    }
    .overlay {
      display: none; /* 기본적으로 숨김 */
      position: fixed; /* 고정 위치 */
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.7); /* 어두운 배경 */
      z-index: 10; /* 검색 패널보다 위에 위치 */
    }
    
    .search-panel {
      display: none; /* 기본적으로 숨김 */
      position: fixed; /* 고정 위치 */
      bottom: 0; /* 화면 하단에 위치 */
      left: 0;
      right: 0;
      background-color: #0E1A33; /* 배경색 */
      border-radius: 15px 15px 0 0 !important;
      border-top: 1px solid #334155;
      transition: transform 0.3s ease; /* 슬라이드 애니메이션 */
      transform: translateY(100%); /* 초기 위치 (안 보이게 설정) */
      z-index: 20; /* overlay보다 위에 위치 */
      height: 500px; /* 고정 높이 설정 */
    }
    .search-panel.active {
        display: block !important; /* 활성화된 경우에만 표시 */
        transform: translateY(0); /* 패널이 보이도록 변환 */
    }
    .nickname-list {
      height: 300px;
      list-style: none; /* 기본 리스트 스타일 제거 */
      padding: 0.4rem 1rem 0 0 !important;
      margin-top: 10px; /* 상단 여백 */
      overflow-y: auto; /* 내용이 넘칠 경우 스크롤바 추가 */
      overflow-x: hidden !important;
    }
    
    .nickname-item {
      --bs-gutter-x: 0 !important;
      padding: 15px 10px 15px 10px !important; /* 여백 */
      border-bottom: 1px solid #334155; /* 테두리 */
      cursor: pointer; /* 커서 모양 변경 */
      color: #ffffff;
    }

    .nickname-item:hover {
      background-color: #1E293B; /* 호버 효과 */
    }

    .nickname-item.active {
      background-color: #1E293B;
    }
    .search-actions {
      position: absolute;
      width: 100%;
      bottom: 0;
      display: flex;
      justify-content: space-between; /* 버튼을 양 끝으로 정렬 */
    }
    .close-panel{
      width: calc(100% / 2) !important;
      padding: 25px 0 !important;
      background-color: #1E293B;
      border: none !important;
      border-top: 1px solid #334155 !important;
      color: #94A3B8 !important;
      font-weight: bold !important;
    }
    .confirm-selection{
      width: calc(100% / 2) !important;
      padding: 25px 0 !important;
      background-color: #3B82F6;
      border: none !important;
      color: #fff !important;
      font-weight: bold !important;
    }
    .confirm-selection:hover {
      background-color: #2563EB;
    }
    /* 회원 리스트 검색 */
    #user-list{
      margin-top: 20px;
      padding: 0.4rem 1rem 0 0 !important;
      height: 630px !important;
      overflow-y: auto;
      padding-bottom: 50px !important;
    }
    @media (max-height: 800px) {
      #user-list {
        height: 540px !important;
      }
    }
    
    @media (max-height: 700px) {
      #user-list {
        height: 440px !important; /* 화면 높이가 600px 이하일 때 */
      }
    }
    @media (max-height: 600px) {
      #user-list {
        height: 320px !important; /* 화면 높이가 600px 이하일 때 */
      }
    }
    /* 첨부파일 */
    .image-upload-container {
      display: flex; /* 가로 방향으로 정렬 */
      align-items: center; /* 세로 중앙 정렬 */
    }
    
    .image-slot {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #1E293B;
      border: 1px dashed #334155;
      cursor: pointer;
      width: 100px; /* 원하는 크기로 설정 가능 */
      height: 100px; /* 원하는 크기로 설정 가능 */
      position: relative;
    }
    
    .add-icon {
      font-size: 30px; /* 아이콘 크기 조정 */
      color: #aaa;
    }
    
    .file-input {
      display: none; /* 기본 파일 입력 숨김 */
    }
    
    .image-preview-container {
      position: relative;
      display: flex; /* Flexbox로 가로 정렬 */
      overflow-x: auto; /* 가로 방향 오버플로우 허용 */
      gap: 10px; /* 이미지 간 간격 */
      margin-left: 10px; /* label과 미리보기 간격 조정 */
      height: 100px; /* 미리보기 이미지 높이 조정 */
    }
    
    .delete-button {
      position: absolute; /* 버튼을 이미지 상단 오른쪽에 배치 */
      top: 5px; /* 위쪽 여백 */
      right: 5px; /* 오른쪽 여백 */
      padding: 4px 8px; /* 버튼 패딩 */
      font-size: 10px; /* 버튼 글자 크기 */
      color: white; /* 버튼 글자 색상 */
      background-color: #FF5C5C; /* 버튼 배경 색상 */
      border: none; /* 기본 테두리 제거 */
      border-radius: 50%; /* 버튼 둥글게 */
      cursor: pointer; /* 커서 포인터로 변경 */
    }
    
    .preview-image {
      width: 100px; /* 미리보기 이미지 크기 조정 */
      height: 100px;
      object-fit: cover; /* 이미지 비율 유지 */
      border-radius: 4px; /* 이미지 테두리 */
      border: 1px solid #334155; /* 이미지 테두리 */
    }
    /* @media screen and (max-width: 450px){
      .error-message {
        position: absolute;
        bottom: -1.5rem;
        color: #FF5C5C;
        line-height: 1.2;
        white-space: normal;
        display: block;
        min-height: 2.4rem;
      }
    } */