/* CSS 네임스페이스 전략 가이드
   각 페이지는 고유한 클래스를 가져야 합니다:
   - .page-user (사용자 관리)
   - .page-group-setting (그룹 설정)  
   - .page-member-register (권한 등록)
   - .page-general (일반 설정)
   - .page-workspace (워크스페이스)
   - .page-download-history (다운로드 이력)
   - .page-template-detail (템플릿 상세)
   - .page-terms-new (약관 신규)
   
   전역 충돌을 방지하려면 스타일을 다음과 같이 작성:
   .page-specific .common-class { ... }
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 초기 로드 시 메뉴 깜빡임 방지: JS가 준비되기 전까지 사이드바 비가시화(공간 유지) */
html:not(.menu-ready) .sidebar { visibility: hidden; }

body {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #ffffff;
}

.container {
    display: flex;
    min-height: 100vh;
}

/* 사이드바 스타일링 */
.sidebar {
    width: 280px;
    background-color: #fff;
    padding: 20px;
    min-height: 100vh;
    overflow-y: auto;
    flex-shrink: 0;
    position: sticky;
    top: 0;
    /* 스크롤바 숨기기 */
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

.sidebar::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

/* 사이드바 높이 동적 조정 */
.sidebar.auto-height {
    max-height: 100vh;
}

.sidebar.content-height {
    height: auto;
    max-height: none;
}

.logo {
    padding: 24px 0; /* 상하 24px, 좌우 0 */
    margin-bottom: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    border-bottom: 1px solid #E5E5E5;
}

.logo-icon {
    width: 40px;
    height: 40px;
    background-color: #4B88F0;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 24px;
    font-weight: 600;
}

.logo-text {
    display: flex;
    flex-direction: column;
}

.logo-title {
    font-size: 16px;
    font-weight: 600;
    color: #292A2B;
}

.logo-url {
    font-size: 14px;
    color: #666;
}

/* 로그아웃 버튼 (사이드바 상단 우측) */
.logout-btn {
    margin-left: auto;
    width: 32px;
    height: 32px;
    border: none; /* 원형 선 제거 */
    border-radius: 50%;
    background: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}

.logout-btn:hover {
    background: #F8F9FA;
}

.logout-btn svg {
    width: 20px;
    height: 20px;
}

.menu-section {
    margin-bottom: 24px;
    padding-top: 24px;
}

.menu-section:last-child {
    margin-bottom: 0;
    padding-top: 0;
}

.menu-section h3 {
    padding: 0;
    font-size: 16px;
    color: #292A2B;
    margin-bottom: 12px;
    font-weight: 600;
}

.menu-section ul {
    list-style: none;
}

.menu-section li a {
    display: flex;
    align-items: center;
    padding: 12px;
    color: #333;
    text-decoration: none;
    font-size: 14px;
    transition: background-color 0.2s;
}

.menu-section li a:hover {
    background-color: #f5f6f8;
}

.menu-section li a {
    background-color: transparent;
    color: #333;
}

.menu-section li a.active {
    background-color: #f0f7ff;
    color: #0066ff;
    font-weight: 600;
}

.menu-section li a.active img {
    filter: invert(31%) sepia(98%) saturate(4076%) hue-rotate(211deg) brightness(102%) contrast(107%);
}

.submenu li a.active {
    background: none;
    color: #0066ff;
    font-weight: 600;
}

.submenu li a:hover {
    background: none;
}

.menu-section li a img {
    width: 20px;
    height: 20px;
    margin-right: 12px;
}

/* 로고 스플래시(루트 index.html) 반응형 최적화 */
@media (max-width: 480px) {
    body > picture img {
        max-width: 80% !important;
    }
}

/* 서브메뉴 스타일링 */
/* 서브메뉴 기본 접힘 */
.submenu {
    list-style: none;
    margin-left: 32px;
    display: none;
}

/* 클릭(open 클래스) 또는 활성(현재 페이지)에서만 펼침 */
.menu-section li.open > .submenu {
    display: block;
}

/* 2뎁스 화살표 아이콘 */
.menu-section li:has(> .submenu) > a {
  position: relative;
  padding-right: 32px; /* 화살표 영역 확보 */
}

.menu-arrow {
  position: absolute;
  right: 8px;
  top: 50%;
  width: 16px;
  height: 16px;
  transform: translateY(-50%) rotate(0deg);
  transition: transform .2s ease;
  cursor: pointer;
}



/* 펼쳐진 상태에서 화살표 위로 회전 */
.menu-section li.open > a > .menu-arrow {
  transform: translateY(-50%) rotate(180deg);
}

/* 서브메뉴가 열려있을 때 표시 */
.menu-section li.open > .submenu,
.menu-section li:has(> a.active) > .submenu,
.menu-section li:has(> .submenu a.active) > .submenu {
  display: block !important;
}

/* 활성화된 경우(현재 페이지)에도 항상 펼쳐짐 유지 */
.menu-section li:has(> a.active) > .submenu,
.menu-section li:has(> .submenu a.active) > .submenu {
    display: block;
}

/* 활성화된 경우 화살표도 위로 회전 고정 */
.menu-section li:has(> a.active) > a > .menu-arrow,
.menu-section li:has(> .submenu a.active) > a > .menu-arrow {
  transform: translateY(-50%) rotate(180deg);
}

.submenu li a {
    font-size: 13px;
    padding: 8px 12px;
}

/* 콘텐츠 영역 스타일링 */
.content {
    flex: 1;
    padding: 30px;
    background-color: #ffffff;
    border-left: 1px solid #e1e1e1;
}

.content-header {
    margin-bottom: 20px;
}

.breadcrumb {
    font-size: 24px;
    font-weight: 700;
    line-height: 32px;
    color: #292A2B;
}

.search-section {
    margin-bottom: 20px;
}

/* 공통 상단 검색/필터 바 */
.search-section .common-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    width: 100%;
}
.search-section .common-topbar .tb-left,
.search-section .common-topbar .tb-right {
    display: flex;
    align-items: center;
    gap: 8px;
}
.search-section .common-topbar .tb-right .right-tail {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.btn-query {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 32px;
    padding: 0 12px;
    border-radius: 6px;
    background: #1677FF;
    border: 1px solid #1677FF;
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(16,24,40,0.05);
    cursor: pointer;
}
.btn-query:hover { background:#2B85FF; border-color:#2B85FF; }
.btn-query:active { background:#0F6BFF; border-color:#0F6BFF; }

/* 셀렉트+인풋 결합형 검색 컴포넌트 */
.search-section .combo-search { display:flex; align-items:center; gap:8px; }
.search-section .combo-search .combo-field {
    display:flex; align-items:center; height:36px;
    border:1px solid #ddd; border-radius:8px; background:#fff; overflow:hidden;
    width:100%;
}
.search-section .combo-search .combo-select {
    height:100%; border:none; outline:none; cursor:pointer; background:#fff;
    padding:0 32px 0 12px; font-size:14px; appearance:none; -webkit-appearance:none; -moz-appearance:none;
    background-image: url('../asset/select-arrow.svg');
    background-repeat:no-repeat; background-position:right 8px center; background-size:16px 16px;
}
.search-section .combo-search .divider { width:1px; height:20px; background:#E5E5E5; }
.search-section .combo-search .combo-input-wrap { position:relative; height:100%; display:flex; align-items:center; flex: 1 1 auto; min-width: 260px; }
.search-section .combo-search .combo-input {
    border:none; outline:none; height:100%; padding:0 12px 0 16px; font-size:14px; min-width:260px; width:100%; background:#fff;
}
.search-section .combo-search .combo-input::placeholder { color:#9AA0A6; }
.search-section .combo-search .mag-icon { position:absolute; left:6px; pointer-events:none; text-indent:-9999px; width:16px; height:16px; }
.search-section .combo-search .append-btn{
    height:100%; border:none; border-left:1px solid transparent;
    padding:0 16px; background:#1677FF; color:#fff; font-weight:600; font-size:14px; cursor:pointer;
    display:inline-flex; align-items:center; justify-content:center; white-space:nowrap; flex:0 0 auto; min-width:64px;
}
.search-section .combo-search .append-btn:hover{ background:#2B85FF; }
.search-section .combo-search .append-btn:active{ background:#0F6BFF; }

/* 사용자 관리 페이지 검색 영역 */
.user-page .search-section {
    background: #fff;
    padding: 24px;
    margin-bottom: 16px;
}

/* 멤버 관리 페이지 전용 검색 영역 스타일 */
.user-page.member-page .top-section {
    display: flex;
    flex-direction: row;
    gap: 24px;
    align-items: stretch;
    margin-bottom: 0;
}

.user-page.member-page .search-section {
    border: 1px solid #E5E5E5;
    border-radius: 8px;
}

.user-page.member-page .stats-section {
    height: 100%;
    min-height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
}

.user-page.member-page .search-section {
    border: 1px solid #E5E5E5;
    border-radius: 8px;
}

.user-page.member-page .search-section .common-topbar {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
}

.user-page.member-page .search-section .tb-left {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    align-items: center;
    flex: 1;
}

.user-page.member-page .search-section .tb-right {
    display: flex;
    gap: 12px;
    align-items: center;
    flex-shrink: 0;
}

/* 멤버 관리 페이지 전용 검색 필터 스타일 */
.user-page.member-page .search-section .condition-select {
    width: 100%;
    min-width: 140px;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
    appearance: none;
    background-image: url('../asset/select-arrow.svg');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 16px;
    padding-right: 32px;
}

.user-page.member-page .search-section .condition-select:focus {
    outline: none;
    border-color: #0066FF;
}

.user-page.member-page .search-section .combo-search {
    width: 100%;
}

.user-page.member-page .search-section .combo-field {
    width: 100%;
    display: flex;
    align-items: center;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    background: #fff;
    height: 40px;
    overflow: hidden;
}

.user-page.member-page .search-section .combo-select {
    border: none;
    border-right: 1px solid #E5E5E5;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    min-width: 100px;
    height: 100%;
    padding: 8px 12px;
    appearance: none;
    background-image: url('../asset/select-arrow.svg');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 16px;
    padding-right: 32px;
}

.user-page.member-page .search-section .combo-input-wrap {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    flex: 1;
}

.user-page.member-page .search-section .combo-input {
    border: none;
    outline: none;
    height: 100%;
    padding: 0 12px;
    font-size: 14px;
    width: 100%;
    background: #fff;
}

.user-page.member-page .search-section .mag-icon {
    position: absolute;
    left: 10px;
    pointer-events: none;
    width: 16px;
    height: 16px;
    color: #666;
    font-size: 14px;
}

.user-page.member-page .search-section .divider {
    width: 1px;
    height: 20px;
    background: #E5E5E5;
}

.member-page .search-section .combo-input-wrap {
    display: flex;
    align-items: center;
    padding: 0 12px;
    flex: 1;
}

.member-page .search-section .mag-icon {
    font-size: 16px;
    color: #6B7280;
    margin-right: 8px;
}

.member-page .search-section .combo-input {
    border: none;
    outline: none;
    padding: 8px 0;
    font-size: 14px;
    width: 100%;
    min-width: 200px;
    background: transparent;
}

.user-page.member-page .search-section .combo-input::placeholder {
    color: #9CA3AF;
}

.user-page.member-page .search-section .date-range-wrap {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-page.member-page .search-section .date-range {
    width: 100%;
    min-width: 140px;
    height: 40px;
    padding: 8px 12px;
    border: 1px solid #E5E5E5;
    border-radius: 6px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
}

.user-page.member-page .search-section .date-range:focus {
    outline: none;
    border-color: #0066FF;
}

.user-page.member-page .search-section .date-separator {
    color: #6B7280;
    font-size: 14px;
    font-weight: 500;
}

/* 검색 필터 스타일 개선 */
.search-section .condition-select {
    min-width: 120px;
    padding: 8px 32px 8px 12px;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('../asset/select-arrow.svg');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 16px;
}

.search-section .condition-select:focus {
    outline: none;
    border-color: #0066FF;
}

/* 콤보 검색 스타일 */
.search-section .combo-search {
    display: flex;
    align-items: center;
}

.search-section .combo-field {
    display: flex;
    align-items: center;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    background: #fff;
}

.search-section .combo-select {
    padding: 8px 12px;
    border: none;
    border-right: 1px solid #E5E5E5;
    background: #fff;
    font-size: 14px;
    cursor: pointer;
    min-width: 100px;
}

.search-section .divider {
    width: 1px;
    height: 20px;
    background: #E5E5E5;
}

.search-section .combo-input-wrap {
    display: flex;
    align-items: center;
    padding: 0 12px;
}

.search-section .mag-icon {
    font-size: 16px;
    color: #6B7280;
    margin-right: 8px;
}

.search-section .combo-input {
    border: none;
    outline: none;
    padding: 8px 0;
    font-size: 14px;
    min-width: 200px;
}

.search-section .combo-input::placeholder {
    color: #9CA3AF;
}

.search-group {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 20px;
}

.left-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.right-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

.new-button {
    padding: 8px 20px;
    background-color: #0066ff;
    color: white;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    text-decoration: none;
}

.condition-select {
    padding: 8px 36px 8px 12px; /* 오른쪽 여백 확보 */
    border: 1px solid #ddd; /* 기준 색상 */
    border-radius: 4px;
    background-color: white;
    min-width: 120px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M19 9.00012L12 15.0001L5 9.00012' stroke='%231C274C' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    cursor: pointer;
}

/* 단일 입력 날짜 범위 피커 */
.date-range-wrap {
    position: relative;
}

.date-range {
    padding: 8px 12px;
    border: 1px solid #ddd; /* 셀렉트와 동일 색상으로 통일 */
    border-radius: 4px;
    background: #fff;
    min-width: 220px;
    cursor: pointer;
}

/* 달력 아이콘 표시용 */
.date-range-wrap .calendar-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    background: center/18px 18px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.75 3V5.25M17.25 3V5.25M3 18.75V7.5C3 6.90326 3.23705 6.33097 3.65901 5.90901C4.08097 5.48705 4.65326 5.25 5.25 5.25H18.75C19.3467 5.25 19.919 5.48705 20.341 5.90901C20.7629 6.33097 21 6.90326 21 7.5V18.75M3 18.75C3 19.3467 3.23705 19.919 3.65901 20.341C4.08097 20.7629 4.65326 21 5.25 21H18.75C19.3467 21 19.919 20.7629 20.341 20.341C20.7629 19.919 21 19.3467 21 18.75M3 18.75V11.25C3 10.6533 3.23705 10.081 3.65901 9.65901C4.08097 9.23705 4.65326 9 5.25 9H18.75C19.3467 9 19.919 9.23705 20.341 9.65901C20.7629 10.081 21 10.6533 21 11.25V18.75' stroke='%23292A2B' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    text-indent: -9999px;
    pointer-events: none;
}
.date-range-wrap .date-range { padding-left: 32px; }

.range-panel {
    position: absolute;
    top: 40px;
    left: 0;
    background: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 6px;
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    padding: 12px;
    display: none;
    z-index: 1500;
    min-width: 600px;
}

.range-panel .condition-select {
    min-width: 150px;
}

.range-panel .range-actions {
    display: inline-flex;
    gap: 8px;
    margin-left: 8px;
}

/* 날짜 범위 버튼 – 미니 프라이머리/아웃라인 */
.range-actions .btn-outline,
.range-actions .btn-submit {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    border-radius: 8px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(16,24,40,0.05);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.range-actions .btn-outline,
.range-actions .btn-cancel {
    background: #FFFFFF;
    border: 1px solid #E5E7EB;
    color: #111827;
}
.range-actions .btn-outline:hover,
.range-actions .btn-cancel:hover {
    background: #F9FAFB;
}
.range-actions .btn-submit {
    background: #1677FF; /* 더 선명한 블루 */
    border: 1px solid #1677FF;
    color: #FFFFFF;
}
.range-actions .btn-submit:hover {
    background: #2B85FF;
    border-color: #2B85FF;
}
.range-actions .btn-submit:active {
    background: #0F6BFF;
    border-color: #0F6BFF;
}

/* 위험 버튼 (삭제 등) */
.btn-danger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 36px;
    padding: 0 16px;
    min-width: 64px;
    border-radius: 4px;
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    border: 1px solid #DC2626;
    background: #DC2626;
    color: #FFFFFF;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}

.btn-danger:hover {
    background: #B91C1C;
    border-color: #B91C1C;
}

.btn-danger:active {
    background: #991B1B;
    border-color: #991B1B;
}

/* 달력 UI */
.calendar-range { display: flex; gap: 12px; align-items: flex-start; }
.calendar { width: 280px; }
.cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}
.cal-nav { display: none; }
.cal-prev, .cal-next, .cal-nav button {
    border: 1px solid #E5E5E5;
    background: #fff;
    border-radius: 4px;
    width: 28px;
    height: 28px;
    cursor: pointer;
}
.cal-month {
    font-weight: 600;
    color: #292A2B;
    text-align: center;
}

/* 양쪽 끝 버튼만 보이도록 중앙 버튼 숨김 */
.calendar-range .calendar:first-child .cal-next { display: none; }
.calendar-range .calendar:last-child .cal-prev { display: none; }
.cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}
.cal-weekday {
    text-align: center;
    font-size: 12px;
    color: #666;
}
.cal-day {
    text-align: center;
    padding: 8px 0;
    border-radius: 6px;
    cursor: pointer;
    user-select: none;
}
.cal-day:hover { background: #F5F7FA; }
.cal-day.disabled { color: #C8CED3; cursor: default; }
.cal-day.selected { background: #0066FF; color: #fff; }
.cal-day.in-range { background: #E8F1FF; }

/* 중복 제거: .right-group 여백 규칙 제거 (페이지별로 지정) */

/* 중복 제거: 전역 검색 인풋 구형 정의 제거 (최신 정의는 하단 632라인 근처) */

/* 조회 버튼을 아이콘-only, 셀렉트와 높이/스타일 정렬 */
.search-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    padding: 0;
    background-color: #0066FF;
    color: white;
    border: none;
    border-radius: 8px;
    cursor: pointer;
}
.search-button svg { width: 20px; height: 20px; }

/* 인풋/셀렉트 박스 내부에 아이콘 버튼 삽입용 래퍼 */
.search-control { position: relative; display: inline-block; }
.search-control .search-input,
.search-control .condition-select { padding-right: 40px; }
.search-control .search-button {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    background: center/16px 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M7.91699 0.75C11.8749 0.750176 15.083 3.95906 15.083 7.91699C15.0828 11.8748 11.8748 15.0828 7.91699 15.083C3.95906 15.083 0.750176 11.8749 0.75 7.91699C0.75 3.95895 3.95895 0.75 7.91699 0.75Z' stroke='%234D5256' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.6667 16.6667L15 15' stroke='%234D5256' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    border: none;
    border-radius: 4px;
}
.search-control .search-button svg { display: none; }

/* 왼쪽에 돋보기 아이콘이 들어가는 단일 입력형 */
.search-control.icon-left { position: relative; display:inline-block; flex: 0 0 auto; height:36px; }
.search-control.icon-left .mag-icon{
    position:absolute; left:12px; top:50%; transform:translateY(-50%);
    width:16px; height:16px;
    background: center/16px 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M7.91699 0.75C11.8749 0.750176 15.083 3.95906 15.083 7.91699C15.0828 11.8748 11.8748 15.0828 7.91699 15.083C3.95906 15.083 0.750176 11.8749 0.75 7.91699C0.75 3.95895 3.95895 0.75 7.91699 0.75Z' stroke='%234D5256' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M16.6667 16.6667L15 15' stroke='%234D5256' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    pointer-events:none;
}
.search-control.icon-left .search-input{ padding: 0 12px 0 36px; height:36px; line-height:36px; border-radius:8px; }

.table-container {
    background-color: white;
    border-radius: 4px;
    box-shadow: none;
}

/* 일반 페이지 권한 테이블 여백/폭 약간 축소 */
.general-page .perm-table-narrow table th,
.general-page .perm-table-narrow table td {
    padding: 10px 12px;
}
.general-page .perm-table-narrow table th:first-child,
.general-page .perm-table-narrow table td:first-child {
    width: 100px;
}
/* 첫 번째 열(구분) 텍스트 가운데 정렬 */
.general-page .perm-table-narrow table td:first-child {
    text-align: center;
    vertical-align: middle;
}

/* 일반 페이지 권한 테이블 가로 폭 축소 및 내부 랩 처리 */
.general-page .perm-table-narrow {
    width: 100%;
    max-width: 900px; /* 전체 폭보다 좁게 */
}
.general-page .perm-table-narrow table {
    width: 100%;
    table-layout: fixed; /* 좁은 폭에서도 균등하게 */
}
.general-page .perm-table-narrow table,
.general-page .perm-table-narrow table th,
.general-page .perm-table-narrow table td {
    border: 1px solid #E5E5E5; /* 셀 사이사이 외곽선 */
}
.general-page .perm-table-narrow table th {
    text-align: center; /* 헤더 텍스트 가운데 정렬 */
}
.general-page .perm-table-narrow .toggle-group {
    flex-wrap: wrap; /* 좁아지면 다음 줄로 */
    gap: 16px;      /* 가로 간격 소폭 축소 */
    justify-content: center; /* 셀 중앙 정렬 */
    width: 100%;
}
.general-page .perm-table-narrow .toggle-item {
    min-width: 160px; /* 줄바꿈 단위 확보 */
}
.general-page .perm-table-narrow .toggle-item { justify-content: center; }

/* 공통 빈 상태 표시 */
.empty-state {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 12px;
    padding: 80px 0;
    color: #9AA0A6;
}

.empty-state .icon {
    width: 40px;
    height: 40px;
    opacity: 0.6;
}

.user-icon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* 중복 제거: .user-initial 기본 크기 정의는 하단(28px)만 사용 */

table {
    width: 100%;
    border-collapse: collapse;
}

th, td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

/* 테이블 마지막 열(삭제 열) 가운데 정렬 */
.table-container table th:last-child,
.table-container table td:last-child {
    text-align: center;
}
.table-container table td:last-child {
    vertical-align: middle;
}

th {
    background-color: #f8f9fa;
    font-weight: 500;
    white-space: nowrap;
    color: #333;
}

/* 토글 스위치 스타일 */
.switch {
    position: relative;
    display: inline-block;
    width: 40px;
    height: 20px;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #ccc;
    transition: .4s;
    border-radius: 20px;
}

.slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: .4s;
    border-radius: 50%;
}

input:checked + .slider {
    background-color: #0066ff;
}

input:checked + .slider:before {
    transform: translateX(20px);
}

.delete-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.delete-btn img {
    width: 16px;
    height: 16px;
    display: block;
}

/* 테이블용 채움형 삭제 버튼 (회의록/사전 관리용) */
.delete-btn--filled {
    background-color: #FF4444;
    border: 1px solid #FF4444;
    border-radius: 4px;
}
.delete-btn--filled:hover {
    background-color: #E03E2F;
    border-color: #E03E2F;
}
.delete-btn--filled img {
    filter: brightness(0) invert(1);
}

/* 사용자 관리 페이지 스타일 */
.user-profile {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-initial {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 500;
}

/* 멤버 관리 페이지 새로운 스타일 */
.top-section {
    display: flex;
    gap: 24px;
    margin-bottom: 24px;
}

.search-section {
    flex: 2;
    background: #fff;
}

.search-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #292A2B;
    margin: 0 0 20px 0;
}

.search-filters {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

.filter-row {
    display: flex;
    gap: 24px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.filter-group {
    flex: 1;
    min-width: 200px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.filter-group label {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    margin-bottom: 4px;
}

.user-page.member-page .filter-group label {
    margin-bottom: 0;
}

.filter-row.filter-buttons-row {
    justify-content: flex-start;
    margin-top: 8px;
    display: flex;
    gap: 8px;
}

.user-page.member-page .filter-row.filter-buttons-row {
    margin-top: 0;
}

.filter-group.filter-buttons {
    flex: 0 0 auto;
    align-items: flex-end;
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.filter-group.filter-buttons .btn-submit,
.filter-group.filter-buttons .btn-outline {
    margin-bottom: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 36px;
}

/* 멤버 관리 페이지 버튼 스타일 */
.user-page.member-page .btn-submit {
    padding: 8px 16px;
    background: #0066FF;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    min-width: 60px;
    height: 32px;
    margin-right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.user-page.member-page .btn-submit:hover {
    background: #0052CC;
}

.user-page.member-page .btn-outline {
    padding: 12px 24px;
    background: #fff;
    color: #374151;
    border: 1px solid #D1D5DB;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    min-width: 100px;
    height: 40px;
}

.user-page.member-page .btn-outline:hover {
    background: #F9FAFB;
    border-color: #9CA3AF;
}

.stats-section {
    flex: 1;
    background: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    padding: 24px;
    min-width: 300px;
}

.stats-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #292A2B;
    margin: 0 0 20px 0;
}

.stats-list {
    display: flex;
    flex-direction: column;
}

.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 16px 0;
    border-bottom: 1px solid #E5E5E5;
}

.stats-row:last-child {
    border-bottom: none;
}

.stats-divider {
    height: 1px;
    background: #E5E5E5;
    margin: 0;
}

.stats-label {
    font-size: 16px;
    color: #292A2B;
    font-weight: 500;
}

.stats-value {
    font-size: 16px;
    color: #292A2B;
    font-weight: 500;
}

.stats-value-highlight {
    color: #0066FF;
    font-weight: 600;
}

.list-section {
    background: #fff;
    border: 1px solid #E5E5E5;
    border-radius: 8px;
    padding: 24px;
}

/* 멤버 관리 페이지 테이블 스타일 개선 */
.user-page.member-page .table-container {
    margin-top: 20px;
}

.user-page.member-page .table-container table {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
}

.user-page.member-page .table-container th {
    background: #F8FAFC;
    padding: 12px 16px;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    color: #292A2B;
    border-bottom: 1px solid #E5E5E5;
}

.user-page.member-page .table-container td {
    padding: 12px 16px;
    border-bottom: 1px solid #F3F4F6;
    font-size: 14px;
    color: #374151;
    vertical-align: middle;
}

.user-page.member-page .table-container tbody tr:hover {
    background: #F9FAFB;
}

/* 체크박스 스타일 */
.user-page.member-page .table-container th:first-child,
.user-page.member-page .table-container td:first-child {
    width: 40px;
    text-align: center;
}

/* 체크박스 제외 모든 컬럼 가운데 정렬 */
.user-page.member-page .table-container th:not(:first-child),
.user-page.member-page .table-container td:not(:first-child) {
    text-align: center;
}

/* 멤버 관리 페이지에서만 이니셜 아이콘 숨기기 */
.user-page.member-page .table-container .user-initial {
    display: none;
}

/* 멤버 관리 페이지에서 user-profile 간격 조정 */
.user-page.member-page .table-container .user-profile {
    display: flex;
    align-items: center;
    justify-content: center;
}





.user-page.member-page .table-container input[type="checkbox"] {
    width: 16px;
    height: 16px;
    cursor: pointer;
}

.list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.list-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: #292A2B;
    margin: 0;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.list-header .separator-bar {
    width: 1px;
    height: 16px;
    background-color: #E5E5E5;
    margin: 0 16px;
    flex-shrink: 0;
}

.list-header .total-count {
    font-size: 14px;
    color: #6B7280;
    font-weight: 500;
}

.list-controls {
    display: flex;
    gap: 12px;
}

.list-controls .condition-select {
    min-width: 120px;
    appearance: none;
    background-image: url('../asset/select-arrow.svg');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 16px;
    padding-right: 32px;
}

.status-select {
    padding: 6px 12px;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
    appearance: none;
    background-image: url('../asset/select-arrow.svg');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 16px;
    padding-right: 32px;
}

.status-select:focus {
    outline: none;
    border-color: #0066FF;
}

.list-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 16px;
    padding-top: 16px;
}

.user-page.member-page .list-footer {
    margin-top: 0;
}

.user-page.member-page .pagination {
    margin-top: 0;
}

.user-page.member-page .inactive-members-section {
    margin-top: 16px;
}

.user-page.member-page .inactive-members-section .list-footer {
    margin-top: 0;
}

.user-page.member-page .inactive-members-section .pagination {
    margin-top: 0;
}

/* user 페이지 휴면회원 섹션 버튼 스타일 */
.user-page.member-page .btn-activate {
  padding: 6px 12px;
  background: #fff;
  color: #0066FF;
  border: 1px solid #0066FF;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  margin-right: 4px;
  transition: all 0.15s ease;
}

.user-page.member-page .btn-activate:hover {
  background: #F0F7FF;
  border-color: #0052CC;
  color: #0052CC;
}

.user-page.member-page .btn-withdraw {
  padding: 6px 12px;
  background: #fff;
  color: #EF4444;
  border: 1px solid #EF4444;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  margin-right: 0;
  transition: all 0.15s ease;
}

.user-page.member-page .btn-withdraw:hover {
  background: #FEF2F2;
  border-color: #DC2626;
  color: #DC2626;
}

/* user 페이지 상태 배지 스타일 */
.user-page.member-page .status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  display: inline-block;
}

.user-page.member-page .status-inactive {
  background: #F3F4F6;
  color: #6B7280;
}

.user-page.member-page .status-withdrawn {
  background: #FEE2E2;
  color: #DC2626;
}

/* 간단한 검색 영역 스타일 */
.search-section-simple {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.search-left {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.search-right {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* 간단한 검색 입력 스타일 */
.combo-search-simple {
  display: flex;
  align-items: center;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  background: #fff;
  padding: 0;
  min-width: 200px;
}

.combo-search-simple .search-input {
  border: none;
  outline: none;
  padding: 8px 12px;
  font-size: 14px;
  flex: 1;
  background: transparent;
  width: 100%;
}

.combo-search-simple .search-input::placeholder {
  color: #9CA3AF;
}

/* 통계와 상세정보 섹션 */
.stats-and-detail-section {
  display: flex;
  gap: 24px;
  margin-bottom: 24px;
}

.stats-and-detail-section .stats-section {
  flex: 0 0 300px;
}

.stats-and-detail-section .detail-form-section {
  flex: 1;
}

/* 상세 폼 섹션 */
.detail-form-section {
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  padding: 20px;
}

.detail-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5E5E5;
}

.detail-form-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #292A2B;
  margin: 0;
}

.detail-form-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.detail-info {
  font-size: 12px;
  color: #6B7280;
  margin-right: 8px;
}

/* 검색 영역 버튼 스타일 */
.search-right .btn-orange {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: #FF8C00;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  min-width: 80px;
  height: 40px;
  text-align: center;
}

.search-right .btn-orange:hover {
  background: #E67E00;
}

.search-right .btn-gray {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: #fff;
  color: #374151;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  min-width: 80px;
  height: 40px;
  text-align: center;
}

.search-right .btn-gray:hover {
  background: #F9FAFB;
  border-color: #9CA3AF;
}

.search-right .btn-red {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  background: #EF4444;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  min-width: 80px;
  height: 40px;
  text-align: center;
}

.search-right .btn-red:hover {
  background: #DC2626;
}

/* 폼 내용 */
.detail-form-content {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.detail-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: 16px;
}

.detail-form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.detail-form-group label {
  font-size: 12px;
  color: #374151;
  font-weight: 500;
}

.detail-input {
  padding: 8px 12px;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  font-size: 14px;
  background: white;
}

.detail-input:focus {
  outline: none;
  border-color: #0066FF;
}

.detail-select {
  padding: 8px 32px 8px 12px;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  font-size: 14px;
  background: white;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('../asset/select-arrow.svg');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px 16px;
}

.detail-select:focus {
  outline: none;
  border-color: #0066FF;
}

/* 그룹 설정 페이지 토글 버튼 */
.page-group-setting .toggle-buttons {
  display: flex;
  gap: 2px;
  width: fit-content;
}

.page-group-setting .toggle-btn {
  padding: 6px 16px;
  border: 1px solid #E5E5E5;
  background: white;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
}

.page-group-setting .toggle-btn.active {
  background: #0066FF;
  color: white;
  border-color: #0066FF;
}

.page-group-setting .toggle-btn:hover {
  background: #F8F9FA;
  border-color: #D1D5DB;
}

.page-group-setting .toggle-btn.active:hover {
  background: #0052CC;
}

/* 다른 페이지 토글 버튼 (기본) */
.toggle-buttons {
  display: flex;
  gap: 2px;
}

.toggle-btn {
  padding: 8px 12px;
  border: 1px solid #E5E5E5;
  background: white;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  flex: 1;
  text-align: center;
  min-width: 50px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.toggle-btn.active {
  background: #0066FF;
  color: white;
  border-color: #0066FF;
}

.toggle-btn:hover {
  background: #F8F9FA;
  border-color: #D1D5DB;
}

.toggle-btn.active:hover {
  background: #0052CC;
}

/* 탭 컨테이너 */
.tab-container {
  margin-top: 24px;
}

/* 탭 네비게이션 */
.tab-nav {
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  margin-bottom: 0;
}

.tab-btn {
  padding: 12px 24px;
  background: #F8F9FA;
  color: #6B7280;
  border: 1px solid #E5E5E5;
  border-bottom: none;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  margin-right: 2px;
  transition: all 0.2s ease;
}

.tab-btn:hover {
  background: #F1F3F4;
  color: #374151;
}

.tab-btn.active {
  background: #fff;
  color: #0066FF;
  border-color: #E5E5E5;
  border-bottom: 1px solid #fff;
  position: relative;
  z-index: 1;
}

/* 탭 내용 */
.tab-content {
  display: none;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-top: none;
  border-radius: 0 8px 8px 8px;
  padding: 20px;
}

.tab-content.active {
  display: block;
}

/* 탭 내 리스트 섹션 마진 조정 */
.tab-content .list-section {
  margin-top: 0;
  border: none;
  background: transparent;
  padding: 0;
}

/* 탭 내 테이블 외곽선 제거 */
.tab-content .table-container {
  border: none;
}

.tab-content .table-container table {
  border: none;
}

/* 탈퇴회원 섹션 스타일 */
.user-page.member-page .withdrawn-members-section {
  margin-top: 16px;
}

/* 메뉴 관리 페이지 전용 스타일 */
.page-menu-setting .menu-management-container {
  background: #fff;
  border-radius: 8px;
  margin-top: 24px;
}

.page-menu-setting .menu-management-layout {
  display: flex;
  gap: 24px;
  min-height: 600px;
}

/* 메뉴 트리 패널 */
.page-menu-setting .menu-tree-panel {
  flex: 1;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  padding: 20px;
}

.page-menu-setting .menu-tree-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5E5E5;
}

.page-menu-setting .menu-tree-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #292A2B;
  margin: 0;
}

.page-menu-setting .menu-tree-actions {
  display: flex;
  gap: 8px;
}

.page-menu-setting .btn-sm {
  padding: 6px 12px;
  font-size: 12px;
  height: auto;
  min-width: auto;
}

/* 메뉴 트리 아이템 */
.page-menu-setting .menu-tree-content {
  max-height: 500px;
  overflow-y: auto;
}

.page-menu-setting .menu-tree-item {
  margin-bottom: 2px;
  border-radius: 4px;
  transition: background-color 0.2s ease;
}

.page-menu-setting .menu-tree-item .menu-item-header:hover {
  background: #F8F9FA;
}

.page-menu-setting .menu-tree-item.selected .menu-item-header {
  background: #EFF6FF;
  border: 1px solid #DBEAFE;
}

.page-menu-setting .menu-item-header {
  display: flex;
  align-items: center;
  padding: 8px 12px;
  cursor: pointer;
  border-radius: 4px;
  margin: 1px 0;
  transition: all 0.2s ease;
}

.page-menu-setting .menu-toggle {
  width: 16px;
  font-size: 12px;
  color: #6B7280;
  cursor: pointer;
  margin-right: 8px;
}

.page-menu-setting .menu-icon {
  font-size: 16px;
  margin-right: 8px;
}

.page-menu-setting .menu-title {
  flex: 1;
  font-size: 14px;
  color: #374151;
  font-weight: 500;
}

.page-menu-setting .menu-url {
  font-size: 12px;
  color: #9CA3AF;
  margin-left: 8px;
}

.page-menu-setting .menu-item-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.page-menu-setting .menu-tree-item:hover .menu-item-actions {
  opacity: 1;
}

/* 메뉴 트리 버튼 스타일 - 기존 페이지와 일관성 */
.page-menu-setting .btn-edit {
  padding: 6px 12px;
  background: #0066FF;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  margin-right: 4px;
  transition: background-color 0.2s ease;
}

.page-menu-setting .btn-edit:hover {
  background: #0052CC;
}

.page-menu-setting .btn-delete {
  padding: 6px 12px;
  background: #EF4444;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.page-menu-setting .btn-delete:hover {
  background: #DC2626;
}

/* 메뉴 자식 요소 들여쓰기 */
.page-menu-setting .menu-children {
  margin-left: 20px;
  border-left: 2px solid #F1F3F4;
  padding-left: 8px;
  margin-top: 4px;
}

.page-menu-setting .menu-tree-item[data-level="2"] .menu-item-header {
  padding-left: 12px;
}

.page-menu-setting .menu-tree-item[data-level="3"] .menu-item-header {
  padding-left: 16px;
  font-size: 13px;
}

.page-menu-setting .menu-tree-item[data-level="3"] .menu-title {
  font-size: 13px;
  color: #6B7280;
}

/* 메뉴 편집 패널 */
.page-menu-setting .menu-edit-panel {
  flex: 0 0 400px;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  padding: 20px;
}

.page-menu-setting .menu-edit-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5E5E5;
}

.page-menu-setting .menu-edit-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #292A2B;
  margin: 0;
}

.page-menu-setting .menu-edit-actions {
  display: flex;
  gap: 8px;
}

/* 메뉴 편집 폼 */
.page-menu-setting .menu-edit-form {
  display: flex;
  flex-direction: column;
  gap: 20px;
}



.page-menu-setting .form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.page-menu-setting .form-group.full-width {
  flex: 1 1 100%;
}

.page-menu-setting .form-group:last-child {
  margin-bottom: 0;
}

.page-menu-setting .form-group label {
  font-size: 12px;
  color: #374151;
  font-weight: 500;
}

.page-menu-setting .form-input, .page-menu-setting .form-select {
  padding: 8px 12px;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  font-size: 14px;
  background: white;
}

.page-menu-setting .form-select {
  padding-right: 32px;
  appearance: none;
  background-image: url('../asset/select-arrow.svg');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px 16px;
}

.page-menu-setting .form-input:focus, .page-menu-setting .form-select:focus {
  outline: none;
  border-color: #0066FF;
}

/* 드래그 앤 드롭 스타일 */
.page-menu-setting .menu-tree-item.dragging {
  opacity: 0.5;
}

.page-menu-setting .menu-tree-item.drop-target {
  background: #DBEAFE;
  border: 2px dashed #3B82F6;
}

/* 워크스페이스 섹션 헤더 */
.menu-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.menu-section-header h3 {
  margin: 0;
}

.workspace-manage-btn {
  padding: 4px;
  background: none;
  color: #666;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: color 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.workspace-manage-btn:hover {
  color: #333;
  background: #F5F5F5;
}

.workspace-manage-btn svg {
  width: 16px;
  height: 16px;
}

/* 워크스페이스 상세 페이지 스타일 */
/* 기존 스타일과 일관성 유지 */

/* 카드 스타일 - 기존 스타일 활용 */
.page-workspace-detail .card {
  background: white;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  padding: 24px;
  margin-bottom: 24px;
}

.page-workspace-detail .section {
  margin-bottom: 24px;
}

.page-workspace-detail .logo-card > div:first-child,
.page-workspace-detail .ws-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 16px;
}

.page-workspace-detail .name-row {
  display: flex;
  gap: 12px;
  align-items: center;
}

.page-workspace-detail .name-row .form-input {
  flex: 1;
}

.page-workspace-detail .logo-box {
  width: 200px;
  height: 80px;
  border: 2px dashed #D1D5DB;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #F9FAFB;
  margin-right: 20px;
}

.page-workspace-detail .row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.page-workspace-detail .row-margin-top {
  margin-top: 16px;
}

.page-workspace-detail .hint {
  font-size: 12px;
  color: #6B7280;
  margin-bottom: 4px;
}

/* 워크스페이스 정보 타이틀과 상태 스위치 */
.page-workspace-detail .ws-title-with-status {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}



.page-workspace-detail .status-text {
  font-size: 14px;
  color: #374151;
  font-weight: 500;
  min-width: 40px;
}

.workspace-detail-page .info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-top: 16px;
}

.workspace-detail-page .info-row.full-width {
  grid-column: 1 / -1;
}

.workspace-detail-page .info-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.workspace-detail-page .info-row label {
  font-size: 12px;
  color: #374151;
  font-weight: 500;
}

.workspace-detail-page .form-textarea {
  padding: 8px 12px;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  font-size: 14px;
  background: white;
  resize: none;
  font-family: inherit;
}

.workspace-detail-page .form-textarea:focus {
  outline: none;
  border-color: #0066FF;
}

.workspace-detail-page .workspace-logo {
  max-width: 168px;
  max-height: 48px;
  object-fit: contain;
}

.workspace-detail-page .button-row {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 32px;
}

/* 권한 설정 섹션 스타일 - 기존 스타일 활용 */
.page-workspace-detail .perm-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 16px;
}

.page-workspace-detail .perm-table-narrow {
  background: white;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  overflow: hidden;
}

.page-workspace-detail .perm-table-narrow table {
  width: 100%;
  border-collapse: collapse;
}

.page-workspace-detail .perm-table-narrow th {
  background: #F8F9FA;
  padding: 12px 16px;
  text-align: left;
  font-weight: 600;
  color: #374151;
  border-bottom: 1px solid #E5E5E5;
  font-size: 14px;
}

.page-workspace-detail .perm-table-narrow td {
  padding: 16px;
  border-bottom: 1px solid #F1F1F1;
  vertical-align: top;
}

.page-workspace-detail .perm-table-narrow tr:last-child td {
  border-bottom: none;
}

.page-workspace-detail .toggle-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.page-workspace-detail .toggle-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.page-workspace-detail .toggle-item input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  border: 2px solid #D1D5DB;
  border-radius: 3px;
  background-color: white;
  position: relative;
  transition: all 0.2s ease;
}

.page-workspace-detail .toggle-item input[type="checkbox"]:checked {
  background-color: #10B981;
  border-color: #10B981;
}

.page-workspace-detail .toggle-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 3px;
  height: 6px;
  border: solid white;
  border-width: 0 2px 2px 0;
}

.page-workspace-detail .toggle-item label {
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  user-select: none;
}

.page-workspace-detail .th-width-120 {
  width: 120px;
  min-width: 120px;
}

/* 구성원 관리 스타일 */
.page-workspace-detail .members-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
}

.page-workspace-detail .members-count {
  font-size: 14px;
  color: #6B7280;
}

.page-workspace-detail .members-count span {
  font-weight: 600;
  color: #374151;
}

.page-workspace-detail .btn-add-member {
  padding: 8px 16px;
  font-size: 14px;
}

/* 구성원 섹션 구분 스타일 */
.page-workspace-detail .member-section {
  margin-bottom: 24px;
}

.page-workspace-detail .member-section:last-child {
  margin-bottom: 0;
}

.page-workspace-detail .member-section-title {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #E5E5E5;
}

.page-workspace-detail .section-label {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-right: 8px;
}

.page-workspace-detail .section-count {
  font-size: 14px;
  color: #6B7280;
}

.page-workspace-detail .members-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 40px;
}

/* 관리자 섹션 스타일 */
.page-workspace-detail .admin-badges:empty::before {
  content: '관리자가 없습니다.';
  color: #6B7280;
  font-style: italic;
  font-size: 14px;
}

/* 일반 구성원 섹션 스타일 */
.page-workspace-detail .general-badges:empty::before {
  content: '일반 구성원이 없습니다.';
  color: #6B7280;
  font-style: italic;
  font-size: 14px;
}

.page-workspace-detail .member-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 16px;
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  cursor: default;
  border: 1px solid transparent;
}

/* 역할별 배지 색상 */
.page-workspace-detail .member-badge[data-role="admin"] {
  background: #FEF3C7;
  color: #92400E;
  border-color: #FCD34D;
}

.page-workspace-detail .member-badge[data-role="user"] {
  background: #DBEAFE;
  color: #1E40AF;
  border-color: #93C5FD;
}

.page-workspace-detail .member-badge[data-role="viewer"] {
  background: #D1FAE5;
  color: #065F46;
  border-color: #6EE7B7;
}

.page-workspace-detail .member-badge:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.page-workspace-detail .member-name {
  margin-right: 6px;
  user-select: none;
}

.page-workspace-detail .badge-remove-btn {
  width: 18px;
  height: 18px;
  border: none;
  background: rgba(0, 0, 0, 0.2);
  color: currentColor;
  border-radius: 50%;
  cursor: pointer;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  transition: all 0.2s ease;
  margin-left: 4px;
}

.page-workspace-detail .badge-remove-btn:hover {
  background: rgba(0, 0, 0, 0.3);
  transform: scale(1.1);
}

/* 구성원 추가 모달 스타일 */
.member-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.member-modal {
  background: white;
  border-radius: 8px;
  width: 400px;
  max-width: 90vw;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

.member-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 24px;
  border-bottom: 1px solid #E5E5E5;
}

.member-modal .modal-header h3 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #374151;
}

.member-modal .modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #6B7280;
  cursor: pointer;
  padding: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-modal .modal-close:hover {
  color: #374151;
}

.member-modal .modal-content {
  padding: 24px;
}

.member-modal .form-group {
  margin-bottom: 20px;
}

.member-modal .form-group:last-child {
  margin-bottom: 0;
}

.member-modal .form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.member-modal .form-input,
.member-modal .form-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 4px;
  font-size: 14px;
  background: white;
}

.member-modal .form-select {
  padding-right: 32px;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('../asset/select-arrow.svg');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px 16px;
  cursor: pointer;
}

.member-modal .form-input:focus,
.member-modal .form-select:focus {
  outline: none;
  border-color: #4B88F0;
  box-shadow: 0 0 0 3px rgba(75, 136, 240, 0.1);
}

.member-modal .modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 20px 24px;
  border-top: 1px solid #E5E5E5;
  background: #F9FAFB;
  border-radius: 0 0 8px 8px;
}

.workspace-detail-page .btn.large {
  padding: 12px 32px;
  font-size: 14px;
  min-width: 120px;
}

/* workspace-detail 페이지 변경사항 저장 버튼 스타일 */
.workspace-detail-page .btn.primary.large {
  background-color: #10B981;
  border-color: #10B981;
  color: white;
}

.workspace-detail-page .btn.primary.large:hover {
  background-color: #059669;
  border-color: #059669;
}

.user-page.member-page .withdrawn-members-section .list-footer {
  margin-top: 0;
  justify-content: flex-end;
}

.user-page.member-page .withdrawn-members-section .pagination {
  margin-top: 0;
}

/* 휴면회원 섹션 페이징 오른쪽 정렬 */
.user-page.member-page .inactive-members-section .list-footer {
  justify-content: flex-end;
}

/* 탈퇴회원 버튼 스타일 */
.user-page.member-page .btn-restore {
  padding: 6px 12px;
  background: #fff;
  color: #059669;
  border: 1px solid #059669;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  margin-right: 4px;
  transition: all 0.15s ease;
}

.user-page.member-page .btn-restore:hover {
  background: #ECFDF5;
  border-color: #047857;
  color: #047857;
}

.user-page.member-page .btn-delete-permanent {
  padding: 6px 12px;
  background: #fff;
  color: #DC2626;
  border: 1px solid #DC2626;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  margin-right: 0;
  transition: all 0.15s ease;
}

.user-page.member-page .btn-delete-permanent:hover {
  background: #FEF2F2;
  border-color: #B91C1C;
  color: #B91C1C;
}

.btn-detail {
    padding: 6px 12px;
    background: #0066FF;
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
}

.btn-detail:hover {
    background: #0052CC;
}

.btn-edit {
    padding: 6px 12px;
    background: #fff;
    color: #0066FF;
    border: 1px solid #0066FF;
    border-radius: 4px;
    font-size: 12px;
    cursor: pointer;
    text-align: center;
}

.btn-edit:hover {
    background: #F0F7FF;
}

/* 멤버 관리 페이지 날짜 범위 선택 스타일 */
.user-page.member-page .date-range-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}

.user-page.member-page .date-range-wrap .date-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.user-page.member-page .date-range-wrap .calendar-icon {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    color: #6B7280;
    z-index: 1;
    pointer-events: none;
}

.user-page.member-page .date-range-wrap .date-range {
    padding: 8px 12px 8px 32px;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
    min-width: 100px;
}

.user-page.member-page .date-range-wrap .date-range:focus {
    outline: none;
    border-color: #0066FF;
}

.user-page.member-page .date-range-wrap span {
    color: #6B7280;
    font-size: 14px;
}

/* 이니셜 아이콘 색상 변형 */
.user-initial.color-blue {
    background-color: #E8F3FF;
    color: #0066FF;
}

.user-initial.color-purple {
    background-color: #F3E8FF;
    color: #6B00FF;
}

.user-initial.color-green {
    background-color: #E8FFF3;
    color: #00B674;
}

.user-initial.color-orange {
    background-color: #FFF0E8;
    color: #FF6B00;
}

.user-initial.color-pink {
    background-color: #FFE8F3;
    color: #FF0066;
}

/* 누락된 사용자 이니셜 색상 보완 */
.user-initial.color-red {
    background-color: #FEE2E2; /* 연한 레드 배경 */
    color: #EF4444;           /* 붉은 텍스트 */
}

.user-initial.color-gray {
    background-color: #F3F4F6; /* 연한 그레이 배경 */
    color: #374151;            /* 진한 그레이 텍스트 */
}

.user-initial.color-brown {
    background-color: #FFF2E5;
    color: #A0522D;
}

.user-initial.color-teal {
    background-color: #E6FFFA;
    color: #14B8A6;
}

/* 누락된 사용자 이니셜 색상 */
.user-initial.color-rose {
    background-color: #FCE7F3;
    color: #E11D48;
}
.user-initial.color-emerald {
    background-color: #ECFDF5;
    color: #10B981;
}
.user-initial.color-slate {
    background-color: #F1F5F9;
    color: #334155;
}

/* 추가: indigo, amber (user-initial 전용) */
.user-initial.color-indigo {
    background-color: #EDE9FE; /* 연한 남보라 */
    color: #6366F1;            /* 인디고 텍스트 */
}
.user-initial.color-amber {
    background-color: #FEF3C7; /* 연한 호박색 */
    color: #D97706;            /* 앰버 텍스트 */
}

.btn-reset {
    padding: 6px 12px;
    background-color: #F8F9FA;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    color: #666;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
}

.btn-reset:hover {
    background-color: #E5E5E5;
}

.btn-status {
    padding: 6px 12px;
    background-color: #F0F7FF;
    border: none;
    border-radius: 4px;
    color: #0066FF;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 32px;
}

/* 상태 배지 (테이블용) */
.status-pill {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px; /* 배지 크기 확대 */
    border-radius: 9999px;
    font-size: 13px;
    font-weight: 600;
    line-height: 1;
    min-height: 26px; /* 높이 보장 */
}
.status-pill.draft { /* 초안 */
    background: #FFD84D; /* 밝은 노랑 */
    color: #292A2B;
}
.status-pill.archived { /* 보관됨 */
    background: #E5E7EB; /* 연그레이 */
    color: #4B5563;
}

.search-input {
    width: 240px;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 14px;
}

.search-input::placeholder {
    color: #999;
}

/* 중복 제거: min-width는 상단 .condition-select에 존재 */

/* 콘텐츠 타이틀 스타일 */
.content-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.content-title h3 {
    font-size: 16px;
    font-weight: 600;
    color: #292A2B;
}

.total-count {
    font-size: 14px;
    color: #666;
}

/* 워크스페이스 관리 전용 스타일 */
.workspace-page .search-input {
    width: 400px;
    padding: 10px 12px;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    font-size: 14px;
    margin-right: 8px;
}

.workspace-page .search-btn {
    padding: 10px 24px;
    background-color: #0066FF;
    color: white;
    border: none;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    margin-right: 16px;
}

.workspace-page .left-group {
    display: flex;
    align-items: center;
}

.workspace-page .right-group {
    display: flex;
    align-items: center;
    gap: 16px;
}

.workspace-page .delete-btn {
    padding: 8px 16px;
    background-color: white;
    color: #FF4444;
    border: 1px solid #FF4444;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}

.edit-btn {
    padding: 8px 16px;
    background-color: white;
    color: #666;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
}

.edit-btn:hover {
    background-color: #F8F9FA;
}

.workspace-name {
    display: flex;
    align-items: center;
    gap: 8px;
}

.workspace-icon {
    width: 24px;
    height: 24px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 600;
    color: white;
}

/* 워크스페이스 아이콘 색상 (네모) */
.workspace-icon.color-teal { background-color: #14B8A6; }
.workspace-icon.color-indigo { background-color: #6366F1; }
.workspace-icon.color-rose { background-color: #F43F5E; }
.workspace-icon.color-amber { background-color: #F59E0B; }
.workspace-icon.color-emerald { background-color: #10B981; }
.workspace-icon.color-violet { background-color: #8B5CF6; }
.workspace-icon.color-cyan { background-color: #06B6D4; }
.workspace-icon.color-lime { background-color: #84CC16; }
.workspace-icon.color-fuchsia { background-color: #D946EF; }
.workspace-icon.color-slate { background-color: #64748B; }

.count-spinner {
    position: relative;
    display: inline-block;
    width: 60px;
}

.count-input {
    width: 100%;
    height: 30px;
    padding: 0 20px 0 8px;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    font-size: 15px;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
    box-sizing: border-box;
}

.count-input::-webkit-outer-spin-button,
.count-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.count-input:focus {
    outline: none;
    border-color: #0066FF;
}

.spinner-buttons {
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.spinner-btn {
    width: 12px;
    height: 12px;
    border: none;
    background: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.spinner-btn img {
    width: 10px;
    height: 10px;
}

.spinner-btn:hover img {
    opacity: 0.7;
}

.select-all {
    width: 16px;
    height: 16px;
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
}

.page-btn {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: #9CA3AF;
    cursor: pointer;
    border-radius: 0;
    font-size: 14px;
    font-weight: 500;
    padding: 0;
}

.page-btn:hover:not(.active):not(:disabled) {
    color: #1677FF;
}

.page-btn.active {
    background: #1677FF;
    color: white;
    border-radius: 16px;
    font-weight: 600;
}

.page-btn:disabled {
    color: #D1D5DB;
    cursor: not-allowed;
}

.page-info {
    margin-left: 16px;
    font-size: 14px;
    color: #666;
}

/* 테이블 정렬 가능한 헤더 및 아이콘 */
th.sortable { cursor: pointer; user-select: none; }
th .sort-icon {
    display: inline-block;
    width: 16px; height: 16px;
    vertical-align: middle;
    margin-left: 4px;
    background: center/16px 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath d='M12.3704 15.8353L18.8001 9.20479C19.2013 8.79106 18.9581 8.00012 18.4297 8.00012H5.5703C5.04189 8.00012 4.79869 8.79106 5.1999 9.20479L11.6296 15.8353C11.8427 16.0551 12.1573 16.0551 12.3704 15.8353Z' fill='%231C274C'/%3E%3C/svg%3E");
    transform: rotate(0deg);
    transition: transform .15s ease;
}
th.sortable.asc .sort-icon { transform: rotate(180deg); }
th.sortable.desc .sort-icon { transform: rotate(0deg); }

/* 워크스페이스 페이지 전용 스타일 */
.workspace-page .search-section {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.workspace-page .search-group {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
}

/* 워크스페이스 생성 모달 스타일 */
.workspace-modal {
    width: 500px !important;
}

.workspace-preview {
    text-align: center;
    margin-bottom: 24px;
}

.workspace-icon-preview {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: 600;
    color: white;
    margin: 0 auto;
}

/* 워크스페이스 프리뷰 아이콘 색상 */
.workspace-icon-preview.color-teal { background-color: #14B8A6; }
.workspace-icon-preview.color-indigo { background-color: #6366F1; }
.workspace-icon-preview.color-rose { background-color: #F43F5E; }
.workspace-icon-preview.color-amber { background-color: #F59E0B; }
.workspace-icon-preview.color-emerald { background-color: #10B981; }
.workspace-icon-preview.color-violet { background-color: #8B5CF6; }
.workspace-icon-preview.color-cyan { background-color: #06B6D4; }
.workspace-icon-preview.color-lime { background-color: #84CC16; }
.workspace-icon-preview.color-fuchsia { background-color: #D946EF; }
.workspace-icon-preview.color-slate { background-color: #64748B; }

.form-note {
    font-size: 12px;
    color: #FF4444;
    margin-top: 4px;
}

/* HTML 인라인 스타일을 위한 새로운 클래스들 */
.range-panel-info {
    margin-top: 8px;
    font-size: 12px;
    color: #666;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.combo-search-wide {
    width: 520px;
}

.combo-search-medium {
    width: 480px;
}

.combo-search-small {
    width: 420px;
}

.tb-right-full {
    width: 100%;
}

.tb-right-full-gap {
    width: 100%;
    gap: 10px;
    align-items: center;
}

.tb-left-column {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.stats-head-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.stats-title-bold {
    font-weight: 600;
    font-size: 16px;
    color: #111;
}

.period-toggle-wrap {
    display: inline-flex;
    gap: 4px;
    background: #F3F4F6;
    border-radius: 8px;
    padding: 2px;
    position: relative;
    overflow: hidden;
}

.period-toggle-wrap::before {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(50% - 4px);
    height: calc(100% - 4px);
    background: #fff;
    border-radius: 6px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1;
}

.period-toggle-wrap.yearly::before {
    transform: translateX(calc(100% + 2px));
}

.period-toggle-active,
.period-toggle-inactive {
    border: none;
    background: transparent;
    padding: 6px 12px;
    border-radius: 6px;
    cursor: pointer;
    transition: color 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
    font-size: 14px;
}

.period-toggle-active {
    color: #1F6BFF;
    font-weight: 600;
}

.period-toggle-inactive {
    color: #4D5256;
    font-weight: 400;
}

.period-toggle-inactive:hover {
    color: #1F6BFF;
}

/* 탭 기본 스타일 */
.tab {
    border: none;
    background: transparent;
    padding: 8px 16px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
    position: relative;
    z-index: 2;
}

.tab.active {
    color: #1F6BFF;
    font-weight: 600;
}

.tab:not(.active) {
    color: #4D5256;
}

.tab:hover {
    color: #1F6BFF;
}

.period-row-flex {
    display: flex;
    gap: 8px;
    align-items: center;
}

.period-label {
    color: #4D5256;
    font-size: 14px;
}

.period-separator {
    margin: 0 6px;
    color: #9AA0A6;
}

.result-text {
    font-size: 14px;
    color: #4D5256;
    margin-top: 4px;
}

.text-red {
    color: #EF4444;
}

.pagination-center {
    justify-content: center;
    margin-top: 16px;
}

.search-control-medium {
    width: 260px;
}

.search-control-small {
    width: 220px;
}

.search-input-full {
    width: 100%;
}

.form-input-medium {
    width: 220px;
}

.form-select-medium {
    width: 120px;
}

.form-select-small {
    width: 120px;
}

.form-select {
    padding: 8px 32px 8px 12px;
    border: 1px solid #E5E5E5;
    border-radius: 4px;
    font-size: 14px;
    background: #fff;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url('../asset/select-arrow.svg');
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 16px 16px;
}

.form-select:focus {
    outline: none;
    border-color: #0066FF;
    box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.inline-auto {
    margin-left: auto;
    gap: 8px;
}

.row-margin-top {
    margin-top: 12px;
}

.perm-title-bold {
    font-weight: 600;
    margin-bottom: 8px;
}

.th-width-120 {
    width: 120px;
}

.th-width-40 {
    width: 40%;
}

.th-width-20 {
    width: 20%;
}

.custom-retention-inline {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}

.submenu-active-link {
    background: none;
    color: #0066ff;
    font-weight: 600;
}

.submenu-active-link-alt {
    color: #0066ff;
}

/* 권한 등록 페이지 전용 스타일 */
.member-register-page {
  background-color: #F8FAFC;
  padding: 0;
}

.member-register-page .content-body {
  background-color: #F8FAFC;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: calc(100vh - 120px);
}

.member-register-page .content-header {
  background-color: white;
  padding: 30px 30px 20px 30px;
  margin: 0;
  border-bottom: 1px solid #E5E7EB;
}

.member-register-form-container {
  max-width: 455px;
  margin: 0 auto;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  padding: 24px;
}

.member-register-form-title {
  font-size: 24px;
  font-weight: 600;
  color: #1F2937;
  text-align: center;
  margin-bottom: 24px;
}

.member-register-form-section {
  margin-bottom: 20px;
  padding: 0;
  position: relative;
}

.member-register-form-section:last-child {
  margin-bottom: 0;
}

.member-register-section-number {
  display: none;
}

.member-register-avatar-section {
  text-align: center;
  padding: 0;
}

.member-register-avatar-upload {
  position: relative;
  display: inline-block;
}

.member-register-avatar-circle {
  width: 96px;
  height: 96px;
  border-radius: 45px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #D1D5DB;
  position: relative;
}

.member-register-avatar-icon {
  object-fit: cover;
}

.member-register-avatar-edit {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 32px;
  height: 32px;
  background: white;
  border: 2px solid #CED3D6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.member-register-avatar-edit svg {
  width: 16px;
  height: 16px;
  fill: white;
}

.member-register-form-row {
  display: flex;
  align-items: center;
  margin-bottom: 20px;
}

.member-register-form-row:last-child {
  margin-bottom: 0;
}

.member-register-form-label {
  width: 120px;
  font-weight: 500;
  color: #374151;
  font-size: 14px;
}

.member-register-form-label.required::after {
  content: "*";
  color: #EF4444;
  margin-left: 4px;
}

.member-register-form-input {
  flex: 1;
  padding: 12px 16px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 14px;
  background: white;
}

.member-register-form-input:focus {
  outline: none;
  border-color: #3B82F6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.member-register-form-select {
  flex: 1;
  padding: 12px 16px;
  padding-right: 40px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 14px;
  background: white;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('../asset/select-arrow.svg');
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px 16px;
}

.member-register-form-select:focus {
  outline: none;
  border-color: #0066FF;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.member-register-password-input-wrapper {
  flex: 1;
  position: relative;
  display: flex;
  align-items: center;
}

.member-register-password-input {
  flex: 1;
  padding: 12px 16px;
  padding-right: 80px;
  border: 1px solid #D1D5DB;
  border-radius: 8px;
  font-size: 14px;
  background: white;
}

.member-register-password-icons {
  position: absolute;
  right: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  height: 24px;
}

.member-register-password-icons .member-register-password-icon:first-child {
  position: relative; /* 첫 번째 아이콘 (눈 아이콘들)의 컨테이너 */
}

#eye-closed, #eye-open {
  position: absolute;
  top: 0;
  left: 0;
  width: 20px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.member-register-password-icons .member-register-password-icon:last-child {
  position: relative; /* X 아이콘은 일반적인 플로우에 따라 배치 */
  margin-left: 30px;
}

.member-register-password-icon {
  cursor: pointer;
  color: #6B7280;
  font-size: 16px;
  transition: all 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  opacity: 1;
  transform: scale(1);
}

.member-register-password-icon:hover {
  transform: scale(1.1);
  color: #4B5563;
}

.member-register-password-icon:hover svg path {
  stroke: #4B5563;
  fill: #4B5563;
}

.member-register-password-icon:active {
  transform: scale(0.95);
}

.member-register-password-icon.active svg path {
  stroke: #6B7280;
  fill: #6B7280;
}

.member-register-password-icon svg {
  transition: all 0.2s ease;
}

.member-register-form-buttons {
  display: flex;
  gap: 8px;
  justify-content: space-between;
  margin-top: auto;
  padding-top: 40px;
}

.member-register-btn-cancel {
  flex: 1;
  padding: 0 32px;
  height: 50px;
  background: #F3F4F6;
  color: #374151;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.member-register-btn-cancel:hover {
  background: #E5E7EB;
}

.member-register-btn-create {
  flex: 1;
  padding: 0 32px;
  height: 50px;
  background: #3B82F6;
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 18px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.member-register-btn-create:hover {
  background: #2563EB;
}

/* 그룹 설정 페이지 전용 스타일 */
.group-setting-page {
  background-color: transparent;
}

.group-setting-page .content-header {
  background-color: transparent;
  margin: 0;
}

.group-setting-container {
  border-radius: 8px;
  background: #fff;
  margin-top: 24px;
  padding: 20px;
}

.group-info-subtitle {
  font-size: 16px;
  font-weight: 600;
  color: #333;
  margin: 0 0 16px 0;
}

.group-setting-layout {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}

.group-setting-tree-panel {
  width: 50%;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  background: #fff;
  padding: 16px;
  flex-shrink: 0;
  order: 2;
}

.group-setting-tree-panel .tree-header {
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #E5E5E5;
}

.group-setting-tree-panel .tree-header h4 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #292A2B;
}

.tree-menu {
  max-height: 533px;
  overflow-y: auto;
}

.tree-item {
  margin-bottom: 8px;
  position: relative;
}

.tree-item > label {
  display: inline-block;
  margin-left: 4px;
  font-size: 14px;
  color: #374151;
  cursor: pointer;
  font-weight: 500;
}

.tree-item > input[type="checkbox"] {
  margin-right: 6px;
  cursor: pointer;
}

.tree-children {
  margin-left: 20px;
  margin-top: 4px;
  position: relative;
}

.tree-children::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 0;
  bottom: 0;
  width: 1px;
  background: #E5E5E5;
}

.tree-children .tree-item {
  position: relative;
  margin-bottom: 4px;
  padding-left: 4px;
}

.tree-children .tree-item::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 12px;
  width: 16px;
  height: 1px;
  background: #E5E5E5;
}

.tree-children .tree-item:last-child::after {
  content: '';
  position: absolute;
  left: -12px;
  top: 12px;
  bottom: -4px;
  width: 1px;
  background: #fff;
}

.tree-children .tree-item > label {
  font-weight: 400;
  color: #6B7280;
  margin-left: 4px;
}

.tree-children .tree-children {
  margin-left: 20px;
}

.tree-children .tree-children .tree-item > label {
  font-weight: 400;
  color: #9CA3AF;
  font-size: 13px;
  margin-left: 4px;
}

.tree-actions {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #E5E5E5;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

.btn-tree-save {
  padding: 8px 16px;
  background: #1677FF;
  color: #fff;
  border: 1px solid #1677FF;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}

.btn-tree-save:hover {
  background: #2B85FF;
  border-color: #2B85FF;
}

.btn-tree-cancel {
  padding: 8px 16px;
  background: #fff;
  color: #6B7280;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
}

.btn-tree-cancel:hover {
  background: #F9FAFB;
  border-color: #9CA3AF;
}

.group-setting-table-container {
  width: 100%;
  margin: 0;
}

.group-setting-layout.tree-visible .group-setting-left-panel {
  width: 50%;
}

/* 왼쪽 패널 (테이블들) */
.group-setting-left-panel {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* 새로운 그룹 설정 폼 테이블 */
.group-setting-form-container {
  border-top: 1px solid #F3F4F6
}

.form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 12px 0;
}

.form-title {
  font-size: 16px;
  font-weight: 600;
  color: #292A2B;
  margin: 0;
}

.form-header-buttons {
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn-form-save {
  padding: 8px 16px;
  background: #1677FF;
  color: #fff;
  border: 1px solid #1677FF;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-form-save:hover {
  background: #2B85FF;
  border-color: #2B85FF;
}

.btn-form-delete {
  padding: 8px 16px;
  background: #fff;
  color: #EF4444;
  border: 1px solid #EF4444;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.btn-form-delete:hover {
  background: #FEF2F2;
  border-color: #DC2626;
  color: #DC2626;
}

.group-setting-form-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.group-setting-form-table td {
  padding: 12px 16px;
  border-bottom: 1px solid #F3F4F6;
  vertical-align: middle;
}

.group-setting-form-table .form-label {
  width: 120px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  background: #F8FAFC;
  text-align: left;
  padding-left: 16px;
}

.group-setting-form-table .form-input-cell {
  width: auto;
}

.form-input-field {
  width: 100%;
  max-width: 300px;
  height: 36px;
  padding: 8px 12px;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
}

.form-input-field:focus {
  outline: none;
  border-color: #0066FF;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.form-input-field[readonly] {
  background: #F9FAFB;
  color: #6B7280;
  cursor: not-allowed;
}

.toggle-buttons {
  display: flex;
  gap: 8px;
}

.toggle-btn {
  padding: 6px 16px;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  background: #fff;
  color: #6B7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.toggle-btn.active {
  background: #FEF3C7;
  color: #92400E;
  border-color: #F59E0B;
}

.toggle-btn:hover:not(.active) {
  background: #F9FAFB;
  border-color: #9CA3AF;
}

.group-setting-table-header {
  background-color: #F8FAFC;
  padding: 20px 24px;
  border-bottom: 1px solid #E5E7EB;
}

.group-setting-table-title {
  font-size: 24px;
  font-weight: 600;
  color: #1F2937;
  text-align: center;
  margin: 0;
}

.group-setting-table {
  width: 100%;
  border-collapse: collapse;
}

.group-setting-table th {
  background-color: #F8FAFC;
  padding: 16px 20px;
  text-align: center;
  font-weight: 600;
  color: #292A2B;
  border-bottom: 1px solid #E5E5E5;
  font-size: 14px;
}

.group-setting-table td {
  background-color: white;
  padding: 16px 20px;
  text-align: center;
  border-bottom: 1px solid #F3F4F6;
  color: #374151;
  font-size: 14px;
}

.group-setting-table tr:hover {
  background-color: #F9FAFB;
}

.group-setting-name {
  font-weight: 500;
  color: #111827;
}

.group-setting-type {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
  display: inline-block;
}

.group-setting-type.master {
  background-color: #FEF3C7;
  color: #92400E;
}

.group-setting-type.admin {
  background-color: #DBEAFE;
  color: #1E40AF;
}

.group-setting-type.employee {
  background-color: #D1FAE5;
  color: #065F46;
}

.group-setting-type.test {
  background-color: #F3E8FF;
  color: #7C3AED;
}

.group-setting-action-buttons {
  display: flex;
  gap: 8px;
  justify-content: center;
}

.group-setting-btn-edit {
  padding: 6px 12px;
  background: #fff;
  color: #0066FF;
  border: 1px solid #0066FF;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.group-setting-btn-edit:hover {
  background: #F0F7FF;
}

.group-setting-btn-delete {
  padding: 6px 12px;
  background: #fff;
  color: #FF4D4F;
  border: 1px solid #FF4D4F;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.group-setting-btn-delete:hover {
  background: #FFF1F0;
}

.group-setting-add-group-top {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 16px;
}

.group-setting-btn-add-group {
  background: #22C55E;
  color: white;
  border: 1px solid #22C55E;
  padding: 8px 16px;
  border-radius: 4px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}

.group-setting-btn-add-group:hover {
  background: #16A34A;
  border-color: #16A34A;
}

/* 그룹 설정 모달 스타일 */
.group-setting-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.group-setting-modal-overlay.active {
  display: flex;
}

.group-setting-modal-content {
  background: white;
  border-radius: 8px;
  width: 320px;
  max-width: 400px;
  padding: 20px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.group-setting-modal-header {
  font-size: 18px;
  font-weight: 600;
  color: #1F2937;
  margin-bottom: 20px;
  text-align: center;
}

.group-setting-modal-form-row {
  margin-bottom: 16px;
}

.group-setting-modal-form-label {
  display: block;
  font-weight: 500;
  color: #374151;
  font-size: 14px;
  margin-bottom: 8px;
}

.group-setting-modal-form-label.required::after {
  content: "*";
  color: #EF4444;
  margin-left: 4px;
}

.group-setting-modal-form-input,
.group-setting-modal-form-select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #D1D5DB;
  border-radius: 6px;
  font-size: 14px;
  background: white;
  box-sizing: border-box;
}

.group-setting-modal-form-input:focus,
.group-setting-modal-form-select:focus {
  outline: none;
  border-color: #0066FF;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.group-setting-modal-form-select {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('../asset/select-arrow.svg');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px 16px;
  padding-right: 32px;
}

.group-setting-modal-buttons {
  display: flex;
  gap: 10px;
  margin-top: 24px;
}

.group-setting-modal-btn-cancel,
.group-setting-modal-btn-create {
  flex: 1;
  padding: 10px 16px;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.group-setting-modal-btn-cancel {
  background: #F3F4F6;
  color: #374151;
  border: 1px solid #D1D5DB;
}

.group-setting-modal-btn-cancel:hover {
  background: #E5E7EB;
}

.group-setting-modal-btn-create {
  background: #0066FF;
  color: white;
  border: 1px solid #0066FF;
}

.group-setting-modal-btn-create:hover {
  background: #0052CC;
}

/* 템플릿 디테일 페이지 전용 스타일 */
.template-detail-page .modal-container {
  width: auto !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
}

.template-detail-page .modal-left {
  width: auto !important;
  flex: 1 1 0 !important;
}

.template-detail-page .modal-right {
  max-width: none !important;
  flex: 1 1 0 !important;
}

/* 약관 신규 페이지 전용 스타일 */
.terms-new-page .form-grid {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 20px 24px;
}

.terms-new-page .form-label {
  font-size: 14px;
  font-weight: 600;
  color: #292A2B;
  padding-top: 10px;
}

.terms-new-page .form-input,
.terms-new-page .form-select {
  width: 100%;
  padding: 10px 36px 10px 12px;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

.terms-new-page .form-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('../asset/select-arrow.svg');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px 16px;
  cursor: pointer;
}

.terms-new-page input[type="date"] {
  font-family: inherit;
  font-size: 14px;
  color: #333;
}

.terms-new-page .inline {
  display: flex;
  gap: 10px;
  align-items: center;
}

.terms-new-page .editor {
  border: 1px solid #E5E5E5;
  border-radius: 6px;
  background: #fff;
}

.terms-new-page .editor-toolbar {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 10px 12px;
  border-bottom: 1px solid #E5E5E5;
  background: #F8FAFC;
}

.terms-new-page .editor-area {
  min-height: 420px;
  padding: 12px;
  font-size: 14px;
  color: #333;
}

.terms-new-page .switch {
  margin-left: 8px;
}

.terms-new-page .actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 20px;
}

.terms-new-page .btn {
  padding: 8px 20px;
  border-radius: 4px;
  font-size: 14px;
  cursor: pointer;
  border: 1px solid #E5E5E5;
  background: #fff;
}

.terms-new-page .btn.primary {
  background: #0066FF;
  color: #fff;
  border: none;
}

/* 다운로드 히스토리 페이지 전용 스타일 */
.download-history-page .table-container table {
  table-layout: auto;
}

.download-history-page .table-container table th:first-child,
.download-history-page .table-container table td:first-child {
  min-width: 120px;
}

.download-history-page .table-container table th:nth-child(2),
.download-history-page .table-container table td:nth-child(2) {
  width: 240px;
}

.download-history-page .table-container table td:nth-child(2) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.download-history-page .table-container table th:nth-child(3),
.download-history-page .table-container table td:nth-child(3) {
  max-width: 240px;
}

.download-history-page .table-container table th:nth-child(4),
.download-history-page .table-container table td:nth-child(4) {
  width: 160px;
}

.download-history-page .table-container table th:nth-child(5),
.download-history-page .table-container table td:nth-child(5) {
  width: 90px;
}

.download-history-page .table-container table th:nth-child(6),
.download-history-page .table-container table td:nth-child(6) {
  width: 110px;
}

.download-history-page .table-container table th {
  white-space: nowrap;
}

.download-history-page .table-container table th:nth-child(7),
.download-history-page .table-container table td:nth-child(7) {
  width: 140px;
}

.download-history-page .table-container table td:nth-child(3) {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.download-history-page .table-container table th:last-child,
.download-history-page .table-container table td:last-child {
  text-align: left;
}

.download-history-page .table-container table td:first-child {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* 워크스페이스 페이지 전용 스타일 */
.workspace-page .common-topbar {
  align-items: center;
  width: 100%;
}

/* 사용량 통계 페이지 전용 스타일 */
.stats-usage-page .search-section .common-topbar {
  justify-content: flex-start;
}

.stats-usage-page .search-section .common-topbar .tb-left {
  align-items: flex-start;
}

.stats-usage-page .stats-head,
.stats-usage-page .stats-head-row,
.stats-usage-page .stats-title {
  text-align: left;
  justify-content: flex-start;
}

.workspace-page .tb-right.workspace-actions-right {
  display: flex;
  align-items: center;
  gap: 8px;
  justify-content: flex-end;
  margin-left: auto;
}

.workspace-page .tb-right.workspace-actions-right .total-count {
  margin-right: 12px;
}

.workspace-page .tb-right.workspace-actions-right .ws-actions {
  display: inline-flex;
  gap: 8px;
}

/* 일반 페이지 전용 스타일 */
.general-page .card {
  background: #F7FAFD;
  border: 1px solid #E5EAF0;
  border-radius: 8px;
  padding: 20px;
}

.general-page .section {
  margin-bottom: 24px;
}

.general-page .row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 12px;
}

.general-page .logo-box {
  width: 260px;
  height: 120px;
  background: #fff;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.general-page .hint {
  color: #666;
  font-size: 13px;
  margin-top: 6px;
}

.general-page .btn {
  padding: 8px 16px;
  border-radius: 4px;
  border: 1px solid #E5E5E5;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
}

.general-page .btn.primary {
  background: #0066FF;
  color: #fff;
  border: none;
}

.general-page .btn.danger {
  border-color: #FF4444;
  color: #FF4444;
  background: #fff;
}

.general-page .name-row {
  display: flex;
  gap: 12px;
  max-width: 520px;
  margin-top: 16px;
}

.general-page .form-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  font-size: 14px;
}

.general-page .toggle-group {
  display: flex;
  align-items: center;
  gap: 20px;
}

.general-page .toggle-item {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #333;
  font-size: 14px;
}

.general-page .table-container {
  margin-top: 16px;
}

.general-page .auto-delete-desc {
  margin-top: 8px;
  color: #4D5256;
  font-size: 13px;
  line-height: 1.6;
}

/* workspace_detail 페이지 자동삭제 설명 텍스트 여백 */
.page-workspace-detail .auto-delete-desc {
  margin: 16px 0 20px 0;
}





/* switch-large 스타일 제거 - 기본 switch 사용 */

/* 사용자 설정 카드 스타일 */
.user-settings-card {
  margin-bottom: 24px;
}

.user-settings-title {
  font-size: 16px;
  color: #292A2B;
  margin-bottom: 16px;
}

/* 사용자 설정 테이블 외곽선 제거 */
.user-settings-card .table-container table {
  border: none;
  box-shadow: none;
}

.user-settings-card .table-container table th,
.user-settings-card .table-container table td {
  border-left: none;
  border-right: none;
}

.user-settings-card .table-container table th:first-child,
.user-settings-card .table-container table td:first-child {
  border-left: none;
}

.user-settings-card .table-container table th:last-child,
.user-settings-card .table-container table td:last-child {
  border-right: none;
}

.general-page .inline-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.general-page .count-input.small {
  width: 60px;
}

.general-page .condition-select.small {
  min-width: 84px;
}

.general-page .custom-retention {
  display: none;
}

.general-page .auto-delete-card {
  background: transparent;
  border: none;
  padding: 0;
}

.general-page .auto-delete-card .table-container {
  margin-top: 8px;
  box-shadow: none;
  border: none;
  background: transparent;
}

.general-page .logo-card {
  background: #F7FAFD;
  border: 1px solid #E5EAF0;
  border-radius: 8px;
  padding: 20px;
}

.general-page .logo-card .logo-box {
  background: #FFFFFF;
  border: 1px solid #E5E5E5;
}

.general-page .logo-card .row {
  margin-top: 12px;
}

.general-page .unit-text {
  font-size: 14px;
  color: #4D5256;
}

.general-page .ws-title,
.general-page .perm-title,
.general-page .auto-del-title {
  margin-top: 30px;
  display: block;
}

.general-page .name-card {
  background: transparent;
  border: none;
  padding: 0;
}

/* 사용자 페이지 전용 스타일 */
.user-page-custom .table-container table th:last-child,
.user-page-custom .table-container table td:last-child {
  text-align: center !important;
  vertical-align: middle;
}

/* 권한 관리 페이지 버튼 간격 */
.user-page-custom .table-container td .btn-detail {
  margin-right: 4px;
}

/* 권한 관리 페이지 체크된 행 스타일 */
.user-page-custom .table-container tbody tr.selected {
  background-color: #EFF6FF !important;
}

.user-page-custom .table-container tbody tr.selected:hover {
  background-color: #DBEAFE !important;
}

/* 비활성 멤버 페이지 전용 스타일 */
.inactive-members-page .table-container table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.inactive-members-page .table-container th {
  background: #F8FAFC;
  padding: 12px 16px;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #292A2B;
  border-bottom: 1px solid #E5E5E5;
}

.inactive-members-page .table-container td {
  padding: 12px 16px;
  border-bottom: 1px solid #F3F4F6;
  font-size: 14px;
  color: #374151;
  text-align: center;
  vertical-align: middle;
}

.inactive-members-page .table-container tbody tr:hover {
  background: #F9FAFB;
}

/* 비활성 멤버 페이지 버튼 스타일 - 외곽선 스타일 */
.inactive-members-page .btn-activate {
  padding: 6px 12px;
  background: #fff;
  color: #0066FF;
  border: 1px solid #0066FF;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  margin-right: 4px;
  transition: all 0.15s ease;
}

.inactive-members-page .btn-activate:hover {
  background: #F0F7FF;
  border-color: #0052CC;
  color: #0052CC;
}

.inactive-members-page .btn-withdraw {
  padding: 6px 12px;
  background: #fff;
  color: #EF4444;
  border: 1px solid #EF4444;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  text-align: center;
  margin-right: 0;
  transition: all 0.15s ease;
}

.inactive-members-page .btn-withdraw:hover {
  background: #FEF2F2;
  border-color: #DC2626;
  color: #DC2626;
}

/* 상태 배지 스타일 */
.status-badge {
  padding: 4px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 500;
  text-align: center;
}

.status-inactive {
  background: #F3F4F6;
  color: #6B7280;
}

/* 회색 사용자 아이콘 */
.user-initial.color-gray {
  background: #9CA3AF;
  color: #fff;
}

/* 비활성 멤버 페이지 검색 영역 - 기존 디자인 시스템에 맞춤 */
.inactive-search {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #E5E5E5;
  border-radius: 8px;
}

.inactive-search .page-title {
  font-size: 18px;
  font-weight: 600;
  color: #292A2B;
  margin: 0 0 20px 0;
}

.basic-info-section .section-title {
  font-size: 14px;
  font-weight: 500;
  color: #4D5256;
  margin: 0 0 12px 0;
}

.search-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.search-select {
  width: 140px;
  height: 36px;
  padding: 8px 32px 8px 12px;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url('../asset/select-arrow.svg');
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 16px 16px;
}

.search-input-wide {
  flex: 1;
  height: 36px;
  padding: 8px 12px;
  border: 1px solid #E5E5E5;
  border-radius: 4px;
  font-size: 14px;
  background: #fff;
}

.search-input-wide:focus {
  outline: none;
  border-color: #0066FF;
  box-shadow: 0 0 0 3px rgba(0, 102, 255, 0.1);
}

.btn-search {
  height: 36px;
  padding: 0 16px;
  background: #1677FF;
  color: #fff;
  border: 1px solid #1677FF;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16,24,40,0.05);
}

.btn-search:hover {
  background: #2B85FF;
  border-color: #2B85FF;
}

.btn-reset {
  height: 36px;
  padding: 0 16px;
  background: #FFFFFF;
  color: #111827;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  box-shadow: 0 1px 2px rgba(16,24,40,0.05);
}

.btn-reset:hover {
  background: #F9FAFB;
}



.user-page-custom .btn-delete {
  background-color: #EF4444;
  color: white;
  border: none;
  margin-right: 0;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  display: inline-block;
  text-align: center;
}

.user-page-custom .btn-delete:hover {
  background-color: #DC2626;
}

/* 전역 스타일 충돌 방지 예시 */
/* 만약 .btn 클래스가 페이지마다 다르게 스타일링되어야 한다면: */

/* 기본 전역 스타일 (모든 페이지 공통) */
.btn {
  padding: 8px 16px;
  border: 1px solid #E5E5E5;
  background: #fff;
  cursor: pointer;
  font-size: 14px;
  border-radius: 4px;
  transition: all 0.2s;
}

/* 페이지별 .btn 스타일 오버라이드 */
.page-user .btn {
  padding: 6px 12px;
  font-size: 13px;
}

.page-group-setting .btn {
  padding: 10px 20px;
  font-size: 15px;
  border-radius: 6px;
}

.page-member-register .btn {
  padding: 12px 24px;
  font-size: 16px;
  border-radius: 8px;
}

/* 특정 버튼 타입들도 페이지별로 제한 가능 */
.page-user .btn.primary {
  background: #0066FF;
  color: white;
  border-color: #0066FF;
}

.page-group-setting .btn.primary {
  background: #10B981;
  color: white;
  border-color: #10B981;
}

.modal-overlay-hidden {
    display: none !important;
}

.category-modal-hidden {
    display: none !important;
}

.version-section-margin {
    margin-top: 24px;
}

.category-header-margin {
    margin-bottom: 8px;
}

.new-button-link {
    display: inline-block;
    text-decoration: none;
    padding: 8px 20px;
    font-size: 14px;
}

.reset-name-bold {
    font-weight: 600;
    margin-bottom: 4px;
}

.reset-email-color {
    color: #555;
}

.cal-prev-start {
    justify-self: start;
}

.cal-next-end {
    justify-self: end;
    text-align: right;
}

.preview-content-center {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    color: #4D5256;
    font-size: 14px;
    text-align: center;
}

/* 회의록 템플릿 관리 페이지 전용 스타일 */
.template-list-page .table-container table tbody tr {
    transition: background-color 0.15s ease;
}

.template-list-page .table-container table tbody tr:hover {
    background-color: #F5F9FF;
}

.template-list-page th.sortable {
    cursor: pointer;
    user-select: none;
}

.template-list-page th .sort-icon {
    display: inline-block;
    width: 16px;
    height: 16px;
    vertical-align: middle;
    margin-left: 4px;
    background: center/16px 16px no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'%3E%3Cpath d='M12.3704 15.8353L18.8001 9.20479C19.2013 8.79106 18.9581 8.00012 18.4297 8.00012H5.5703C5.04189 8.00012 4.79869 8.79106 5.1999 9.20479L11.6296 15.8353C11.8427 16.0551 12.1573 16.0551 12.3704 15.8353Z' fill='%231C274C'/%3E%3C/svg%3E");
    transform: rotate(0deg);
    transition: transform .15s ease;
}

.template-list-page th.sortable.asc .sort-icon {
    transform: rotate(180deg);
}

.template-list-page th.sortable.desc .sort-icon {
    transform: rotate(0deg);
}

/* 로딩 페이지 스타일 */
.loading-page {
    margin: 0;
    height: 100vh;
    display: grid;
    place-items: center;
    background: #ffffff;
}

.loading-logo {
    max-width: 60%;
    height: auto;
    display: block;
}

/* 워크스페이스 관리 페이지 체크박스 행 선택 스타일 */
.page-workspace .table-container table tbody tr {
    transition: background-color 0.15s ease;
}

.page-workspace .table-container table tbody tr:hover {
    background-color: #F5F9FF;
}

.page-workspace .table-container table tbody tr.selected {
    background-color: #E8F1FF;
}

.page-workspace .table-container table tbody tr.selected:hover {
    background-color: #D6E8FF;
}

/* 사용자 관리 페이지 체크박스 행 선택 스타일 */
.page-user .table-container table tbody tr {
    transition: background-color 0.15s ease;
}

.page-user .table-container table tbody tr:hover {
    background-color: #F5F9FF;
}

.page-user .table-container table tbody tr.selected {
    background-color: #E8F1FF;
}

.page-user .table-container table tbody tr.selected:hover {
    background-color: #D6E8FF;
}

/* 메뉴 설정 페이지 드래그 앤 드롭 스타일 */
.page-menu-setting .menu-tree-item {
    transition: all 0.2s ease;
    cursor: grab;
    position: relative;
}

.page-menu-setting .menu-tree-item:active {
    cursor: grabbing;
}

.page-menu-setting .menu-tree-item.dragging {
    opacity: 0.6;
    transform: scale(0.98);
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.page-menu-setting .menu-tree-item.drag-over {
    position: relative;
}

.page-menu-setting .menu-tree-item.drag-over::before {
    content: '';
    position: absolute;
    top: -2px;
    left: 0;
    right: 0;
    height: 4px;
    border-radius: 2px;
    z-index: 999;
}

.page-menu-setting .menu-tree-item.drop-allowed::before {
    background: #10B981;
    box-shadow: 0 0 8px rgba(16, 185, 129, 0.3);
}

.page-menu-setting .menu-tree-item.drop-not-allowed::before {
    background: #EF4444;
    box-shadow: 0 0 8px rgba(239, 68, 68, 0.3);
}

.page-menu-setting .menu-tree-item.drop-allowed .menu-item-header {
    background: rgba(16, 185, 129, 0.05);
    border: 1px dashed #10B981;
    border-radius: 4px;
}

.page-menu-setting .menu-tree-item.drop-not-allowed .menu-item-header {
    background: rgba(239, 68, 68, 0.05);
    border: 1px dashed #EF4444;
    border-radius: 4px;
}

.page-menu-setting .menu-tree-item.selected {
    background: rgba(75, 136, 240, 0.1);
    border-radius: 4px;
}

.page-menu-setting .menu-tree-item.selected .menu-item-header {
    background: rgba(75, 136, 240, 0.05);
    border: 1px solid rgba(75, 136, 240, 0.2);
    border-radius: 4px;
}

/* 드래그 중 메뉴 아이템 스타일 */
.page-menu-setting .menu-tree-item.dragging .menu-item-header {
    background: #f8f9fa;
    border: 1px solid #dee2e6;
    border-radius: 4px;
}

/* 메뉴 토글 버튼 스타일 개선 */
.page-menu-setting .menu-toggle {
    display: inline-block;
    width: 16px;
    height: 16px;
    line-height: 16px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    margin-right: 8px;
    color: #6B7280;
    font-size: 12px;
    transition: color 0.2s ease;
}

.page-menu-setting .menu-toggle:hover {
    color: #374151;
}

/* 메뉴 아이템 헤더 패딩 조정 */
.page-menu-setting .menu-item-header {
    display: flex;
    align-items: center;
    padding: 8px 12px;
    min-height: 40px;
    transition: all 0.2s ease;
}

/* 메뉴 아이콘 스타일 */
.page-menu-setting .menu-icon {
    margin-right: 8px;
    font-size: 16px;
}

/* 메뉴 제목 스타일 */
.page-menu-setting .menu-title {
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    user-select: none;
}

/* 드래그 비활성화 상태 */
.page-menu-setting .menu-tree-item[draggable="false"] {
    cursor: default;
    opacity: 0.6;
}

/* 메뉴 레벨별 들여쓰기 */
.page-menu-setting .menu-tree-item[data-level="1"] {
    margin-left: 0;
}

.page-menu-setting .menu-tree-item[data-level="2"] {
    margin-left: 20px;
}

.page-menu-setting .menu-tree-item[data-level="3"] {
    margin-left: 40px;
}

/* 메뉴 접기/펼치기 애니메이션 */
.page-menu-setting .menu-children {
    transition: all 0.3s ease;
    overflow: hidden;
}

.page-menu-setting .menu-tree-item.collapsed .menu-children {
    max-height: 0;
    opacity: 0;
}

/* 드래그 앤 드롭 가이드 텍스트 */
.page-menu-setting .drag-guide {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0, 0, 0, 0.8);
    color: white;
    padding: 8px 16px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.page-menu-setting .menu-tree-item.dragging .drag-guide {
    opacity: 1;
}

/* 메뉴 트리 컨테이너 스타일 개선 */
.page-menu-setting .menu-tree-content {
    position: relative;
    min-height: 400px;
    padding: 16px;
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    background: #FAFBFC;
}

/* 빈 메뉴 트리 상태 */
.page-menu-setting .menu-tree-content:empty::before {
    content: '메뉴를 드래그하여 순서를 변경하거나 "새 메뉴" 버튼을 클릭하여 메뉴를 추가하세요.';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #9CA3AF;
    font-size: 14px;
    text-align: center;
}