html:not(.popupMode){
    /* 스크롤바가 사라져도 화면이 밀리지 않게 공간을 고정합니다. */
    scrollbar-gutter: stable;
}

/* SweetAlert2가 강제로 넣는 패딩 차단 */
body.swal2-shown:not(.popupMode) {
    padding-right: 0 !important;
}

/* 1. 알림창 전체 (팝업 구성을 모던하고 신뢰감 있게) */
.katso-popup {
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, 'Helvetica Neue', 'Segoe UI', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif !important;
    border-radius: 12px !important; /* 과하지 않고 깔끔하게 떨어지는 곡률 */
    box-shadow: 0 12px 30px rgba(15, 23, 42, 0.15) !important; /* 부드러운 깊이감의 그림자 */
    padding: 2.5rem 2rem !important;
}

/* 2. 제목 (학회 사이트 특유의 무겁고 진한 네이비 텍스트) */
.katso-title {
    color: #0f172a !important; /* 매우 깊은 네이비/블랙 */
    font-size: 18px !important;
    font-weight: 700 !important;
    letter-spacing: -0.5px;
    margin-bottom: 10px !important;
    line-height: 1.4 !important;
}

/* 3. 본문 텍스트 */
.katso-html {
    color: #475569 !important; /* 가독성 좋은 슬레이트 회색 */
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* 4. 확인 버튼 (메인 포인트 컬러: Deep Blue) */
.katso-confirm-btn {
    background-color: #0A3663 !important; /* 사이트 시그니처 딥블루 (신뢰감을 주는 색상) */
    color: #ffffff !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px 32px !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer;
    transition: background-color 0.2s ease;
    box-shadow: 0 4px 6px -1px rgba(10, 54, 99, 0.2) !important;
}
.katso-confirm-btn:hover {
    background-color: #062343 !important; /* 호버 시 더 짙어지는 블루 */
}

/* 5. 취소 버튼 (연한 회색 바탕의 깔끔한 스타일) */
.katso-cancel-btn {
    background-color: #f1f5f9 !important;
    color: #64748b !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    padding: 12px 32px !important;
    border-radius: 6px !important;
    border: none !important;
    cursor: pointer;
    margin-left: 10px !important;
    transition: all 0.2s ease;
}
.katso-cancel-btn:hover {
    background-color: #e2e8f0 !important;
    color: #334155 !important;
}


/* 토글 전체를 감싸는 컨테이너 */
.toggle-container {
    display: inline-block;
    position: relative;
    width: 40px;  /* 👈 관리자 페이지 테이블 안에도 쏙 들어가게 가로를 줄임 */
    height: 20px; /* 👈 안정적인 2:1 비율로 조절 */
    cursor: pointer;
    user-select: none;
    top:3px;
  }
  
  /* 실제 체크박스는 화면에서 숨깁니다. */
  .toggle-input {
    display: none;
  }
  
  /* ⭐️ OFF 상태: 시스템 설정 창에 어울리는 플랫한 다크 그레이 톤 */
  .toggle-switch {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-color: #f1f5f9; /* 👈 부드러운 연회색 바탕 */
    border: 1px solid #cbd5e1;  /* 👈 대시보드 경계선과 일치하는 플랫한 테두리 */
    border-radius: 4px;        /* 👈 완전히 동그란 모양 대신 살짝 각을 살린 둥근 사각형 */
    box-sizing: border-box;
    transition: all 0.15s ease-in-out;
  }
  
  /* 토글 안의 사각형 버튼 (입체감과 그림자를 빼고 깔끔한 플랫 스타일로 전환) */
  .toggle-switch::before {
    content: "";
    position: absolute;
    width: 14px;
    height: 14px;
    top: 2px; 
    left: 3px;
    background-color: #94a3b8; /* 👈 OFF일 때는 버튼도 차분한 슬레이트 회색 */
    border-radius: 2px;        /* 👈 바 형태와 통일감을 주는 미세한 라운딩 */
    transition: transform 0.15s ease-in-out, background-color 0.15s ease-in-out;
  }
  
  /* 💡 ON 상태: 활성화되었을 때 스타일 */
  /* 1. 글로벌 대시보드 표준인 차분하고 명확한 오피스 그린(Success) 컬러 */
  .toggle-input:checked + .toggle-switch {
    background-color: #ecfdf5; /* 👈 연한 그린 틴트 배경 */
    border-color: #10b981;     /* 👈 선명한 그린 테두리 */
  }
  
  /* 2. ON이 되면 내부 버튼 색상도 그린으로 변경하며 슬라이딩 */
  .toggle-input:checked + .toggle-switch::before {
    background-color: #10b981; /* 👈 확연히 눈에 띄는 활성화 컬러 */
    transform: translateX(18px); /* 👈 슬림해진 가로폭에 맞춰 이동 거리 최적화 */
  }