/* Pretendard 폰트 임포트 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css");

/* ==========================================================================
   CMS곳간 (wowsafe) 디자인 시스템 토큰 (CSS Variables)
   기준: Figma "CMS곳간_리뉴얼" (Guide & Component 실측 데이터)
   ========================================================================== */
:root {
    /* --- 회색조 (Gray Palette) --- */
    --gary-50: #FAFAFA;
    --gary-100: #F2F2F2;
    --gary-200: #E4E4E4;
    --gary-300: #CECECE;
    --gary-400: #A6A6A6;
    --gary-500: #656565;
    --gary-600: #383838;
    --gary-700: #2D2D2D;
    --gary-800: #1F1F1F;
    --gary-900: #121212;

    /* --- 기본 흑백 (Primary) --- */
    --primary-WT: #FFFFFF;
    --primary-BK: #000000;

    /* --- 테마 블루 (Theme Palette) --- */
    --theme-50: #F3F8FF;
    --theme-100: #DEEBFF;
    --theme-200: #C5DCFF;
    --theme-300: #82B4FF;
    --theme-400: #5A9AFA;
    --theme-500: #3586FF;
    --theme-600: #1D69DA;
    --theme-700: #0D58C8;

    /* --- 상태/알림 컬러 (Status) --- */
    --warning-bg: #FFF3DF;
    --warning-text: #E67E22;
    --danger-bg: #FFE7E7;
    --danger-text: #E74C3C;
    --danger-primary: #0051FF;
    --success-bg: #EAF2FF;
    --success-text: #1D69DA;

    /* --- 타이포그래피 (1rem = 14px 기준) --- */
    --fs-t5: 3.143rem;   /* 44px */
    --fs-t4: 2.286rem;   /* 32px */
    --fs-t3: 2.000rem;   /* 28px */
    --fs-t2: 1.714rem;   /* 24px */
    --fs-t1: 1.429rem;   /* 20px */
    --fs-b5: 1.286rem;   /* 18px */
    --fs-b4: 1.000rem;   /* 14px (기본 본문) */
    --fs-b3: 0.929rem;   /* 13px */
    --fs-b2: 0.857rem;   /* 12px */
    --fs-b1: 0.786rem;   /* 11px */

    /* --- 모서리 둥글기 (Border Radius) --- */
    --radius-xl: 1.429rem;   /* 20px */
    --radius-lg: 1.143rem;   /* 16px */
    --radius-md: 0.857rem;   /* 12px */
    --radius-base: 0.571rem; /* 8px (Lg 버튼) */
    --radius-sm: 0.429rem;   /* 6px (Md 버튼, 인풋, 드롭다운) */
    --radius-xs: 0.286rem;   /* 4px (Sm 버튼, 뱃지, 체크박스) */

    /* --- 레거시 cms- 폰트/스타일 호환 변수 --- */
    --cms-fs-t4: var(--fs-t4);
    --cms-fs-b5: var(--fs-b5);
    --cms-fs-base: var(--fs-b4);
    --cms-fs-label: var(--fs-b3);
    --cms-fs-small: var(--fs-b2);
    --cms-lh-t4: 2.857rem;
    --cms-lh-b5: 1.857rem;
    --cms-lh-b4: 1.571rem;
    --cms-lh-b3: 1.429rem;
}

/* ==========================================================================
   1. 레이아웃 기본 구조 (GNB + 메인 바디)
   ========================================================================== */
.sidebar-gnb {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh;
    background-color: var(--primary-WT);
    padding: 24px 20px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 1000;
}

.sidebar-gnb .adm-gnb__menus {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sidebar-gnb .adm-gnb_nav {
    border-top: 1px solid var(--gary-100);
}

.sidebar-gnb .gnb-top-wrap {
    display: flex;
    gap: 12px;
    padding: 4px 8px;
}

.sidebar-gnb .adm-gnb__logo img {
    aspect-ratio: 1/1;
}

.sidebar-gnb .adm-gnb__user-info {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.sidebar-gnb .adm-gnb__user-name {
    font-size: var(--fs-b4);
    font-weight: 600;
    color: var(--gary-900);
    line-height: 22px;
}

.sidebar-gnb .adm-gnb__user-divider {
    width: 1px;
    height: 12px;
    background-color: var(--gary-300);
    display: inline-block;
}

.sidebar-gnb .adm-gnb__user-id {
    font-size: var(--fs-b3);
    color: var(--gary-500);
    line-height: 20px;
}

.sidebar-gnb .adm-gnb__user-role {
    font-size: var(--fs-b3);
    color: var(--gary-400);
    line-height: 18px;
    margin-top: 2px;
}

.sidebar-gnb .menu-list {
    list-style: none;
    display: flex;
    flex-direction: column;
}

.sidebar-gnb .menu-item a {
    display: block;
    padding: 10px 16px;
    border-radius: var(--radius-md);
    color: var(--gary-600);
    text-decoration: none;
    transition: all 0.2s ease;
}

.sidebar-gnb .menu-item a:hover,
.sidebar-gnb .menu-item a.active {
    color: var(--theme-600);
    background-color: var(--theme-50);
}

.sidebar-gnb .collapse:not(.show) {
    display: none;
}

.sidebar-gnb .accordion-header {
    font-size: var(--fs-b4);
    padding: 0;
}

.sidebar-gnb .accordion-button {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 12px 8px;
    border-radius: var(--radius-md);
    color: var(--gary-600);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    box-sizing: border-box;
    text-align: left;
}

.sidebar-gnb .accordion-button::after {
    display: none !important;
}

.sidebar-gnb .adm-gnb__arrow {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: transform 0.2s ease-in-out;
    transform: rotate(0deg);
}

.sidebar-gnb .accordion-button.collapsed .adm-gnb__arrow {
    transform: rotate(180deg);
}

.sidebar-gnb .adm-gnb__link-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    color: inherit;
}

.sidebar-gnb .adm-gnb__link-inner img {
    width: 20px;
    height: 20px;
    box-sizing: border-box;
    padding: 2px;
    object-fit: contain;
}

html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

.adm-wrap {
    max-width: 100vw;
    overflow-x: hidden;
}

/* 메인 콘텐츠 영역 (GNB 너비만큼 여백 확보) */
.adm-body {
    margin-left: 240px;
    padding: 28px;
    min-height: 100vh;
    max-width: calc(100vw - 240px);
    overflow-x: hidden;
    box-sizing: border-box;
    background-color: var(--gary-50);
}

/* --- 로그인 전용 레이아웃 (GNB 숨김 및 전체화면 중앙 정렬) --- */
.adm-wrap.adm-wrap--login {
    width: 100%;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-WT);
}

.adm-body.adm-body--login {
    margin-left: 0 !important;
    max-width: 100% !important;
    width: 100%;
    min-height: 100vh;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--primary-WT);
}

/* ==========================================================================
   로그인 컴포넌트 시스템 (Figma "00로그인" & "00로그인_불일치" 실측 매핑)
   ========================================================================== */
.adm-login-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 100vh;
    /*padding: 2.857rem 1.429rem;*/
    box-sizing: border-box;
    background-color: var(--primary-WT);
}

.adm-login-container {
    display: flex;
    width: 400px;
    flex-direction: column;
    align-items: center;
    box-sizing: border-box;
}

/* 1. 상단 로고 아이콘 */
.adm-login-logo-box {
    width: 64px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.714rem; /* 24px */
}

.adm-login-logo {
    width: 64px;
    height: 64px;
    object-fit: contain;
}

/* 2. 타이틀 바 (씨엠에스곳간 | 관리자 로그인) */
.adm-login-title-bar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.857rem; /* 12px */
    margin-bottom: 2.857rem; /* 40px */
}

.adm-login-title-brand {
    font-size: var(--fs-t1); /* 20px / 1.429rem */
    font-weight: 700;
    color: var(--gary-900);
    letter-spacing: -0.02em;
    line-height: 1;
}

.adm-login-title-divider {
    width: 1px;
    height: 16px;
    background-color: var(--gary-200);
    display: inline-block;
}

.adm-login-title-sub {
    font-size: var(--fs-t1); /* 20px / 1.429rem */
    font-weight: 700;
    color: var(--gary-700);
    letter-spacing: -0.02em;
    line-height: 1;
}

/* 3. 불일치 / 에러 알림 박스 (Figma "00로그인_불일치" 레이어) */
.adm-login-error {
    display: none;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 0.714rem 0.857rem; /* 10px 12px */
    margin-bottom: 1.143rem; /* 16px */
    background-color: var(--danger-bg);
    border: 1px solid rgba(231, 76, 60, 0.25);
    border-radius: var(--radius-sm); /* 6px */
    color: var(--danger-text);
    font-size: var(--fs-b3); /* 13px */
    font-weight: 500;
    line-height: 1.4;
    box-sizing: border-box;
    text-align: center;
    animation: admLoginShake 0.3s ease-in-out;
}

.adm-login-error.is-show {
    display: flex;
}

.adm-login-error--info {
    background-color: var(--theme-50);
    border-color: var(--theme-200);
    color: var(--theme-600);
}

.adm-login-error__msg {
    width: 100%;
    text-align: center;
}

@keyframes admLoginShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* 4. 폼 필드 */
.adm-login-form {
    display: flex;
    flex-direction: column;
    gap: 1.143rem; /* 16px */
    width: 100%;
}

.adm-login-field {
    display: flex;
    flex-direction: column;
    gap: 0.429rem; /* 6px */
    width: 100%;
}

.adm-login-label {
    font-size: var(--fs-b2); /* 12px / 0.857rem */
    font-weight: 500;
    color: var(--gary-500);
    margin: 0;
    padding-left: 2px;
}

/* 인풋 필드: Figma 연회색 배경, 테두리 없음, 8px 모서리 라운드 */
.adm-login-input {
    width: 100% !important;
    height: 48px !important;
    background-color: var(--gary-50) !important; /* #FAFAFA */
    border: 1px solid var(--gary-100) !important;
    border-radius: var(--radius-base) !important; /* 8px */
    padding: 0 1.143rem !important; /* 16px */
    font-size: var(--fs-b4) !important; /* 14px */
    color: var(--gary-900) !important;
    outline: none !important;
    box-sizing: border-box !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}

.adm-login-input::placeholder {
    color: var(--gary-400) !important;
    font-size: var(--fs-b4) !important;
}

.adm-login-input:focus {
    background-color: var(--primary-WT) !important;
    border-color: var(--gary-900) !important;
    box-shadow: 0 0 0 1px var(--gary-900) !important;
}

/* 불일치 상태 인풋 필드 스타일 */
.adm-login-input.is-invalid {
    border-color: var(--danger-text) !important;
    background-color: #FFF8F8 !important;
}

.adm-login-input.is-invalid:focus {
    border-color: var(--danger-text) !important;
    box-shadow: 0 0 0 1px var(--danger-text) !important;
}

/* 5. 로그인 버튼: Figma 규격 완전 블랙 (#121212) */
.adm-login-btn {
    width: 100%;
    height: 48px;
    margin-top: 0.571rem; /* 8px */
    background-color: var(--gary-900); /* 완전 블랙 #121212 */
    color: var(--primary-WT);
    border: none;
    border-radius: var(--radius-base); /* 8px */
    font-size: var(--fs-b4); /* 14px */
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    transition: background-color 0.15s ease, opacity 0.15s ease;
}

.adm-login-btn:hover {
    background-color: var(--primary-BK); /* #000000 */
}

.adm-login-btn:active {
    opacity: 0.9;
}

.adm-login-btn:disabled {
    background-color: var(--gary-400);
    cursor: not-allowed;
}

/* ==========================================================================
   2. 버튼 시스템 (Figma "Btn_Solid" & "Btn_Stroke")
   ========================================================================== */
.gotgan-btn,
.cms-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid transparent;
    font-family: inherit;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

/* --- 크기 스펙 (Size) --- */
/* Large (44px) */
.gotgan-btn--lg,
.cms-btn--lg {
    height: 44px;
    padding: 0 1.429rem; /* 20px */
    border-radius: var(--radius-base); /* 8px */
    font-size: var(--fs-t1); /* 16px / 1.143rem */
    font-weight: 500;
}

/* Medium / Default (38px) */
.gotgan-btn--md,
.cms-btn--md,
.gotgan-btn:not([class*="--lg"]):not([class*="--sm"]),
.cms-btn:not([class*="--lg"]):not([class*="--sm"]) {
    height: 38px;
    padding: 0 1.143rem; /* 16px */
    border-radius: var(--radius-sm); /* 6px */
    font-size: var(--fs-b4); /* 14px / 1rem */
    font-weight: 500;
}

/* Small (28px) */
.gotgan-btn--sm,
.cms-btn--sm {
    height: 28px;
    padding: 0 0.857rem; /* 12px */
    border-radius: var(--radius-xs); /* 4px */
    font-size: var(--fs-b2); /* 12px / 0.857rem */
    font-weight: 400;
}

/* --- 스타일: 솔리드 (Solid) --- */
/* 1) Default / Primary (Theme Blue #3586FF) */
.gotgan-btn-solid,
.gotgan-btn-primary,
.gotgan-btn--solid,
.gotgan-btn--primary,
.cms-btn-solid,
.cms-btn-primary {
    background-color: var(--theme-500);
    color: var(--primary-WT);
    border-color: var(--theme-500);
}
.gotgan-btn-solid:hover,
.gotgan-btn-primary:hover,
.gotgan-btn--solid:hover,
.gotgan-btn--primary:hover,
.cms-btn-solid:hover,
.cms-btn-primary:hover {
    background-color: var(--theme-400);
    border-color: var(--theme-400);
    color: var(--primary-WT);
}
.gotgan-btn-solid:active,
.gotgan-btn-primary:active,
.gotgan-btn--solid:active,
.gotgan-btn--primary:active,
.cms-btn-solid:active,
.cms-btn-primary:active {
    background-color: var(--theme-600);
    border-color: var(--theme-600);
    color: var(--primary-WT);
}

/* 2) Gray (#F2F2F2) */
.gotgan-btn-gray,
.gotgan-btn--gray,
.cms-btn-gray,
.cms-btn-point {
    background-color: var(--gary-100);
    color: var(--gary-900);
    border-color: var(--gary-100);
}
.gotgan-btn-gray:hover,
.gotgan-btn--gray:hover,
.cms-btn-gray:hover,
.cms-btn-point:hover {
    background-color: var(--gary-200);
    border-color: var(--gary-200);
    color: var(--gary-900);
}
.gotgan-btn-gray:active,
.gotgan-btn--gray:active,
.cms-btn-gray:active,
.cms-btn-point:active {
    background-color: var(--gary-300);
    border-color: var(--gary-300);
    color: var(--gary-900);
}

/* 3) Dark / Black (#1F1F1F) */
.gotgan-btn-dark,
.gotgan-btn--dark,
.cms-btn-dark {
    background-color: var(--gary-800);
    color: var(--primary-WT);
    border-color: var(--gary-800);
}
.gotgan-btn-dark:hover,
.gotgan-btn--dark:hover,
.cms-btn-dark:hover {
    background-color: var(--gary-700);
    border-color: var(--gary-700);
    color: var(--primary-WT);
}
.gotgan-btn-dark:active,
.gotgan-btn--dark:active,
.cms-btn-dark:active {
    background-color: var(--gary-900);
    border-color: var(--gary-900);
    color: var(--primary-WT);
}

/* 4) Danger (#FF3B30) */
.gotgan-btn-danger,
.gotgan-btn--danger,
.cms-btn-danger {
    background-color: var(--danger-bg, #FFE7E7);
    color: var(--danger-text, #E74C3C);
    border-color: var(--danger-bg, #FFE7E7);
}
.gotgan-btn-danger:hover,
.gotgan-btn--danger:hover,
.cms-btn-danger:hover {
    background-color: #ffd2d2;
    border-color: #ffd2d2;
    color: #d63031;
}

/* --- 스타일: 스트로크 / 아웃라인 (Stroke) --- */
.gotgan-btn-stroke,
.gotgan-btn-outline,
.gotgan-btn--stroke,
.gotgan-btn--outline,
.cms-btn-stroke,
.cms-btn-outline {
    background-color: var(--primary-WT);
    border-color: var(--gary-300);
    color: var(--gary-800);
}
.gotgan-btn-stroke:hover,
.gotgan-btn-outline:hover,
.gotgan-btn--stroke:hover,
.gotgan-btn--outline:hover,
.cms-btn-stroke:hover,
.cms-btn-outline:hover {
    background-color: var(--gary-100);
    border-color: var(--gary-300);
    color: var(--gary-900);
}
.gotgan-btn-stroke:active,
.gotgan-btn-outline:active,
.gotgan-btn--stroke:active,
.gotgan-btn--outline:active,
.cms-btn-stroke:active,
.cms-btn-outline:active {
    background-color: var(--gary-200);
    border-color: var(--gary-400);
    color: var(--gary-900);
}

/* --- 비활성화 상태 (Disabled) --- */
.gotgan-btn:disabled,
.gotgan-btn.is-disabled,
.cms-btn:disabled,
.cms-btn.is-disabled {
    background-color: var(--gary-200) !important;
    border-color: var(--gary-300) !important;
    color: var(--gary-400) !important;
    cursor: not-allowed !important;
    pointer-events: none;
    box-shadow: none !important;
}

/* ==========================================================================
   3. 폼 컨트롤 시스템 (Figma "Input", "Dropdown", "InputNMB")
   ========================================================================== */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="date"],
select,
textarea,
.form-select,
.gotgan-input,
.gotgan-select {
    font-family: inherit;
    font-size: var(--fs-b4);
    color: var(--gary-900);
    background-color: var(--primary-WT);
    border: 1px solid var(--gary-200);
    border-radius: var(--radius-sm); /* 6px */
    padding: 0.571rem 0.857rem; /* 8px 12px */
    height: 38px;
    width: 100%;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

textarea,
.gotgan-textarea {
    height: auto;
    min-height: 80px;
    resize: vertical;
    padding: 0.714rem 0.857rem;
    line-height: var(--cms-lh-b4);
}

/* 플레이스홀더 */
input::placeholder,
textarea::placeholder,
select::placeholder {
    color: var(--gary-400);
}

/* 비활성화 / 읽기전용 */
input:disabled,
select:disabled,
textarea:disabled {
    background-color: var(--gary-100);
    border-color: var(--gary-200);
    color: var(--gary-400);
    cursor: not-allowed;
}

input[readonly],
textarea[readonly] {
    background-color: var(--gary-100);
    border-color: var(--gary-200);
    color: var(--gary-400);
    cursor: default;
}

input[readonly]:focus,
textarea[readonly]:focus {
    border-color: var(--gary-200) !important;
    box-shadow: none !important;
    background-color: var(--gary-100) !important;
}

/* 인풋 변형 */
.input-sm {
    width: 120px !important;
}

.input-file {
    border: 1px dashed var(--gary-300) !important;
    cursor: pointer;
}

/* 셀렉트 드롭다운 스타일 */
select,
.gotgan-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 1.5L8 7.5L14.5 1.5' stroke='%23A6A6A6' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 15px 8.5px;
    cursor: pointer;
}

/* gotgan-select 전역 표준 스타일 (Figma 컴포넌트 실측 및 디자인 토큰 규격) */
.gotgan-select {
    width: 100%;
    height: 40px;
    padding: 0 36px 0 1rem;
    font-family: inherit;
    font-size: var(--fs-b4);
    color: var(--gary-900);
    background-color: var(--primary-WT);
    border: 1px solid var(--gary-200);
    border-radius: var(--radius-base); /* 8px */
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.gotgan-select:focus {
    border-color: var(--gary-900);
    outline: none;
}

/* ==========================================================================
   Select2 전역 표준 스타일 (Figma gotgan-select 디자인 토큰 규격 연동)
   ========================================================================== */

/* 1. 컨테이너 기본 */
.select2-container {
    width: 100% !important;
    font-family: inherit;
    font-size: var(--fs-b4);
    box-sizing: border-box;
}

/* 2. 단일 선택 박스 (Closed state) */
.select2-container--default .select2-selection--single {
    height: 40px !important;
    background-color: var(--primary-WT) !important;
    border: 1px solid var(--gary-200) !important;
    border-radius: var(--radius-base) !important; /* 8px */
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease !important;
    display: flex !important;
    align-items: center !important;
}

/* 텍스트 렌더링 영역 */
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: var(--gary-900) !important;
    font-size: var(--fs-b4) !important;
    line-height: 38px !important;
    padding-left: 1rem !important; /* 14px */
    padding-right: 36px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 플레이스홀더 상태 */
.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--gary-400) !important;
}

/* 우측 화살표 영역 - 기존 삼각형 제거 및 gotgan chevron SVG 적용 */
.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    width: 36px !important;
    top: 0 !important;
    right: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 1.5L8 7.5L14.5 1.5' stroke='%23A6A6A6' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 14px center !important;
    background-size: 15px 8.5px !important;
    transition: background-image 0.15s ease !important;
}

.select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none !important; /* 기본 select2 삼각형 border 제거 */
}

/* 열렸을 때 화살표 (위쪽 셰브론) */
.select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 7.5L8 1.5L14.5 7.5' stroke='%23A6A6A6' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
}

/* 포커스 및 열린 상태 테두리 */
.select2-container--default.select2-container--open .select2-selection--single,
.select2-container--default.select2-container--focus .select2-selection--single {
    border-color: var(--gary-900) !important;
    outline: none !important;
}

/* 비활성화 상태 */
.select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: var(--gary-100) !important;
    border-color: var(--gary-200) !important;
    cursor: not-allowed !important;
}
.select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__rendered {
    color: var(--gary-400) !important;
}

/* 3. 드롭다운 패널 전체 (.select2-dropdown) */
.select2-dropdown {
    background-color: var(--primary-WT) !important;
    border: 1px solid var(--gary-200) !important;
    border-radius: var(--radius-base) !important; /* 8px */
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08) !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    z-index: 1051 !important;
}

.select2-dropdown--below {
    margin-top: 4px !important;
    border-radius: var(--radius-base) !important;
    border-top: 1px solid var(--gary-200) !important;
}

.select2-dropdown--above {
    margin-bottom: 4px !important;
    border-radius: var(--radius-base) !important;
    border-bottom: 1px solid var(--gary-200) !important;
}

/* 4. 드롭다운 검색창 영역 (.select2-search--dropdown) */
.select2-search--dropdown {
    padding: 8px 12px !important;
    background-color: var(--primary-WT) !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid var(--gary-100) !important;
}

/* 검색 인풋 필드 */
.select2-search--dropdown .select2-search__field {
    width: 100% !important;
    height: 36px !important;
    padding: 0 10px !important;
    font-family: inherit !important;
    font-size: var(--fs-b4) !important;
    color: var(--gary-900) !important;
    background-color: var(--gary-50) !important;
    border: 1px solid var(--gary-200) !important;
    border-radius: var(--radius-sm) !important; /* 6px */
    outline: none !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, background-color 0.15s ease !important;
}

.select2-search--dropdown .select2-search__field:focus {
    border-color: var(--gary-900) !important;
    background-color: var(--primary-WT) !important;
    outline: none !important;
}

.select2-search--dropdown .select2-search__field::placeholder {
    color: var(--gary-400) !important;
}

/* 5. 드롭다운 결과 목록 영역 (.select2-results) */
.select2-results {
    padding: 4px 0 !important;
    background-color: var(--primary-WT) !important;
}

/* 드롭다운 결과 목록 기본 구조 */
.select2-results__options {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

/* 전체 목록 루트 ul에만 단일 스크롤 및 최대 높이 적용 */
.select2-results > .select2-results__options {
    max-height: 280px !important;
    overflow-y: auto !important;
}

/* 단락(optgroup) 하위 목록은 자체 스크롤 제거 (단락별 이중 스크롤 방지) */
.select2-results__options--nested {
    max-height: none !important;
    overflow: visible !important;
}

.select2-results > .select2-results__options::-webkit-scrollbar {
    width: 6px;
}
.select2-results > .select2-results__options::-webkit-scrollbar-thumb {
    background-color: var(--gary-300);
    border-radius: 3px;
}

/* 단락(optgroup) 그룹 헤더 스타일 보강 */
.select2-container--default .select2-results__group {
    padding: 7px 14px !important;
    font-size: 12px !important;
    font-weight: 700 !important;
    color: var(--gary-600, #4A5568) !important;
    background-color: var(--gary-50, #F8FAFC) !important;
    border-top: 1px solid var(--gary-200, #E2E8F0) !important;
    border-bottom: 1px solid var(--gary-100, #EDF2F7) !important;
    user-select: none !important;
}

.select2-container--default .select2-results__option--group:first-child .select2-results__group {
    border-top: none !important;
}

/* 옵션 항목 기본 */
.select2-results__option {
    padding: 9px 14px !important;
    font-size: var(--fs-b4) !important;
    color: var(--gary-900) !important;
    cursor: pointer !important;
    user-select: none !important;
    transition: background-color 0.1s ease, color 0.1s ease !important;
}

/* 옵션 마우스 오버 / 키보드 포커스 (하이라이트) */
.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted {
    background-color: var(--gary-100) !important;
    color: var(--gary-900) !important;
}

/* 선택된 옵션 항목 */
.select2-container--default .select2-results__option[aria-selected="true"] {
    background-color: var(--theme-50) !important;
    color: var(--theme-600) !important;
    font-weight: 600 !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected="true"] {
    background-color: var(--theme-100) !important;
    color: var(--theme-700) !important;
}

/* 결과 없음 메시지 */
.select2-results__message {
    color: var(--gary-400) !important;
    padding: 12px 14px !important;
    text-align: center !important;
    font-size: var(--fs-b4) !important;
}

/* 6. 다중 선택 (Multiple) */
.select2-container--default .select2-selection--multiple {
    min-height: 40px !important;
    background-color: var(--primary-WT) !important;
    border: 1px solid var(--gary-200) !important;
    border-radius: var(--radius-base) !important;
    padding: 3px 8px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    box-sizing: border-box !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple,
.select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--gary-900) !important;
    outline: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--gary-100) !important;
    border: 1px solid var(--gary-200) !important;
    border-radius: 20px !important;
    padding: 3px 10px 3px 12px !important;
    font-size: var(--fs-b3) !important;
    color: var(--gary-900) !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    margin: 2px !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--gary-400) !important;
    font-size: 14px !important;
    margin-right: 0 !important;
    order: 2 !important;
    float: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--gary-900) !important;
    background: transparent !important;
}

/* 숫자 입력 (Figma InputNMB) */
.input-number,
.gotgan-input-nmb {
    width: 120px;
    padding-right: 12px;
}

/* 아이콘 미리보기 공통 */
#icon-preview,
#active-icon-preview {
    max-width: 56px;
    max-height: 56px;
    border-radius: var(--radius-xs);
    border: 1px solid var(--gary-100);
    display: none;
}

/* 파일 선택 컴포넌트 (Figma Fiileselected & Btn_Solid 다크) */
.gotgan-file-box,
.pg-file-select-box {
    display: flex;
    align-items: center;
    gap: 0.571rem; /* 8px */
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.gotgan-file-display {
    flex: 1 1 auto;
    min-width: 0;
    height: 38px;
    padding: 0 0.857rem; /* 12px */
    background-color: var(--primary-WT);
    border: 1px solid var(--gary-200);
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.571rem; /* 8px */
    box-sizing: border-box;
    overflow: hidden;
}

.gotgan-file-empty {
    font-size: var(--fs-b4);
    color: var(--gary-400);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    user-select: none;
}

.gotgan-file-info {
    display: flex;
    align-items: center;
    gap: 0.714rem; /* 10px */
    min-width: 0;
    overflow: hidden;
}

.gotgan-file-name {
    font-size: var(--fs-b4);
    color: var(--gary-900);
    text-decoration: underline;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    cursor: pointer;
}

.gotgan-file-name:hover {
    color: var(--theme-500);
}

.gotgan-file-size {
    font-size: var(--fs-b3);
    color: var(--gary-500);
    white-space: nowrap;
    flex-shrink: 0;
}

.gotgan-file-remove {
    background: transparent;
    border: none;
    padding: 2px;
    cursor: pointer;
    color: var(--gary-900);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: color 0.15s ease;
}

.gotgan-file-remove:hover {
    color: var(--danger-primary);
}

.gotgan-btn-file-select {
    flex-shrink: 0;
    height: 38px;
    padding: 0 1.143rem; /* 16px */
    background-color: var(--gary-900);
    color: var(--primary-WT);
    border: none;
    border-radius: var(--radius-sm);
    font-size: var(--fs-b4);
    font-weight: 400;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.286rem; /* 4px */
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease;
    box-sizing: border-box;
}

.gotgan-btn-file-select:hover {
    background-color: var(--gary-800);
}

.gotgan-btn-file-select img,
.gotgan-btn-file-select svg {
    flex-shrink: 0;
}

/* ==========================================================================
   4. 체크박스 & 라디오 (Figma "Check", "Radio")
   ========================================================================== */
.gotgan-check-wrap,
.gotgan-radio-wrap,
.form-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    font-size: var(--fs-b4);
    color: var(--gary-900);
    user-select: none;
}

.gotgan-check,
.gotgan-radio,
input[type="checkbox"],
input[type="radio"] {
    appearance: none;
    width: 20px;
    height: 20px;
    border: 1px solid var(--gary-300);
    background-color: var(--primary-WT);
    cursor: pointer;
    position: relative;
    box-sizing: border-box;
    flex-shrink: 0;
    padding: 0;
}

/* 체크박스 */
.gotgan-check,
input[type="checkbox"] {
    border-radius: var(--radius-xs); /* 4px */
}

.gotgan-check:checked,
input[type="checkbox"]:checked {
    background-color: var(--theme-500);
    border-color: var(--theme-500);
    background-image: url("data:image/svg+xml,%3Csvg width='12' height='9' viewBox='0 0 12 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 4.5L4.5 8L11 1' stroke='%23FFFFFF' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 11px 8px;
}

/* 라디오 */
.gotgan-radio,
input[type="radio"] {
    border-radius: 50%;
}

.gotgan-radio:checked,
input[type="radio"]:checked {
    border-color: var(--gary-400);
    background-color: var(--primary-WT);
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='10' viewBox='0 0 10 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='5' cy='5' r='4' fill='%23000000'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
    background-size: 10px 10px;
}

/* 비활성 체크/라디오 */
input[type="checkbox"]:disabled,
input[type="radio"]:disabled {
    background-color: var(--gary-100);
    border-color: var(--gary-300);
    cursor: not-allowed;
}

/* CMS 라디오 & 체크박스 호환 컴포넌트 (Figma 실측 규격) */
.cms-radio-group {
    display: flex;
    gap: 1.143rem; /* 16px */
    align-items: center;
    flex-wrap: wrap;
}

.cms-radio-label {
    display: inline-flex;
    align-items: center;
    gap: 0.571rem; /* 8px */
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    font-size: var(--fs-b4);
    color: var(--gary-800);
}

/* 커스텀 원형 라디오 UI (피그마 Frame 2085664068) */
.cms-radio-label input[type="radio"] {
    margin: 0;
}

.cms-radio-label input[type="radio"]:has(+ .cms-radio-circle) {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.cms-radio-circle {
    position: relative;
    width: 20px;
    height: 20px;
    border: 2px solid var(--gary-200);
    border-radius: 50%;
    background: var(--primary-WT);
    flex-shrink: 0;
    transition: border-color 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
}

.cms-radio-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--theme-500);
    opacity: 0;
    transition: opacity 0.15s ease, transform 0.15s ease;
    transform: scale(0.5);
}

.cms-radio-label input[type="radio"]:checked ~ .cms-radio-circle {
    border-color: var(--theme-500);
}

.cms-radio-label input[type="radio"]:checked ~ .cms-radio-circle .cms-radio-dot {
    opacity: 1;
    transform: scale(1);
}

.cms-radio-label:hover .cms-radio-circle {
    border-color: var(--gary-300);
}

.cms-radio-text {
    font-size: var(--fs-b4);
    font-weight: 400;
    color: var(--gary-900);
    letter-spacing: -0.02em;
}

.cms-check-label {
    display: inline-flex;
    align-items: center;
    gap: 0.571rem; /* 8px */
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    font-size: var(--fs-b4);
    color: var(--gary-800);
}

.cms-check-label input[type="checkbox"]:has(+ .cms-check-box) {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

.cms-check-box {
    width: 20px;
    height: 20px;
    border: 2px solid var(--gary-200);
    border-radius: var(--radius-xs);
    background: var(--primary-WT);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s ease, border-color 0.15s ease;
    box-sizing: border-box;
}

.cms-check-box svg {
    display: none;
}

.cms-check-label input[type="checkbox"]:checked + .cms-check-box {
    background: var(--theme-500);
    border-color: var(--theme-500);
}

.cms-check-label input[type="checkbox"]:checked + .cms-check-box svg {
    display: block;
}

.cms-check-label:hover .cms-check-box {
    border-color: var(--gary-300);
}

.cms-check-text {
    font-size: var(--fs-b4);
    font-weight: 400;
    color: var(--gary-900);
}

/* ==========================================================================
   5. 뱃지 컴포넌트 (Figma "Badge")
   ========================================================================== */
.gotgan-badge,
.cms-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 0.857rem; /* 12px */
    border-radius: var(--radius-xs); /* 4px */
    font-size: var(--fs-b2); /* 12px */
    font-weight: 400;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
}

/* 1) Default / Success / Theme (저장/성공) */
.gotgan-badge--theme,
.gotgan-badge--success {
    background-color: var(--theme-50);
    color: var(--theme-600);
}

/* 2) Stroke / Default (테두리형) */
.gotgan-badge--stroke {
    background-color: var(--primary-WT);
    border-color: var(--gary-300);
    color: var(--gary-700);
}

/* 3) Warning (보류) */
.gotgan-badge--warning {
    background-color: var(--warning-bg);
    color: var(--warning-text);
}

/* 4) Danger / Disabled (비활성화/반려) */
.gotgan-badge--danger {
    background-color: var(--danger-bg);
    color: var(--danger-text);
}

/* ==========================================================================
   6. 데이터 테이블 시스템 (Figma "Table_Head" & "Table_Data")
   ========================================================================== */
.gotgan-table,
.table-custom {
    width: 100%;
    border-collapse: collapse;
    background-color: var(--primary-WT);
    text-align: left;
}

.gotgan-table th,
.table-custom th {
    height: 40px;
    background-color: var(--gary-50);
    border-bottom: 1px solid var(--gary-200);
    padding: 0 1.143rem; /* 16px */
    font-size: var(--fs-b4);
    font-weight: 500;
    color: var(--gary-900);
    white-space: nowrap;
    vertical-align: middle;
}

.gotgan-table td,
.table-custom td {
    height: 38px;
    border-bottom: 1px solid var(--gary-100);
    padding: 0 0.857rem; /* 12px */
    font-size: var(--fs-b4);
    font-weight: 400;
    color: var(--gary-800);
    vertical-align: middle;
    background-color: var(--primary-WT);
    transition: background-color 0.15s ease;
}

/* 행 상태 (호버 / 선택) */
.gotgan-table tbody tr:hover td,
.table-custom tbody tr:hover td {
    background-color: var(--gary-50);
}

.gotgan-table tbody tr.is-selected td,
.table-custom tbody tr.is-selected td {
    background-color: var(--theme-50);
    color: var(--theme-700);
}

/* ==========================================================================
   7. 상세 폼 레이아웃 (Figma "Dtl_Head" & "Dtl_Data")
   ========================================================================== */
.pg-form-body {
    background-color: var(--primary-WT);
    border-radius: var(--radius-md);
    width: 100%;
    min-width: 0;
}

.dtl-cell {
    display: flex;
    align-items: center;
    border-bottom: 1px solid var(--gary-100);
    min-height: 56px;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.dtl-cell:last-child {
    border-bottom: none;
}

.dtl-head {
    width: 180px;
    flex-shrink: 0;
    padding: 0.857rem 1.143rem;
    font-size: var(--fs-b4);
    font-weight: 500;
    color: var(--gary-800);
    display: flex;
    align-items: center;
    gap: 4px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dtl-head__label {
    color: var(--gary-800);
}

.dtl-head__req {
    color: var(--danger-primary);
    font-weight: 700;
}

.dtl-data {
    flex: 1;
    padding: 0.857rem 1.143rem;
    font-size: var(--fs-b4);
    color: var(--gary-900);
    min-width: 0;
    box-sizing: border-box;
    overflow: hidden;
}

.dtl-data--file {
    display: flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
}

.dtl-data--inline {
    display: flex;
    align-items: center;
    gap: 1.143rem; /* 16px */
    flex-wrap: wrap;
    min-width: 0;
}

.dtl-hint,
.dtl-data__hint {
    font-size: var(--fs-b2);
    color: var(--gary-500);
    margin-top: 0.286rem; /* 4px */
    margin-bottom: 0;
    line-height: 1.4;
}

.text-muted,
.cms-text-muted {
    color: var(--gary-500) !important;
}

/* 2열 폼 배치 지원 */
.dtl-cell--row {
    display: grid;
    grid-template-columns: 180px 1fr 180px 1fr;
    align-items: center;
}

#icon-name-input-wrapper .dtl-data {
    grid-column: 2 / -1;
    width: 100%;
}

/* ── 권한 다중 선택 Select2 피그마 토큰 오버라이드 ── */
.select2-container {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* body 직속으로 붙는 드롭다운 레이어의 가로 스크롤 유발 방지 */
body > .select2-container,
.select2-container:not(.select2) {
    width: auto !important;
    max-width: 100vw !important;
}

.select2-dropdown {
    max-width: calc(100vw - 32px) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
}

.select2-container--default .select2-selection--multiple {
    background-color: var(--gary-50) !important;
    border: 1px solid var(--gary-200) !important;
    border-radius: var(--radius-sm) !important;
    min-height: 38px !important;
    padding: 4px 8px !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease;
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    max-width: 100% !important;
    overflow: hidden !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    box-sizing: border-box !important;
}

.select2-container .select2-search--inline {
    display: inline-flex !important;
    align-items: center !important;
    flex: 1 1 auto !important;
    max-width: 100% !important;
    margin: 0 !important;
}

.select2-container .select2-search--inline .select2-search__field {
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin-top: 0 !important;
    margin-left: 0 !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
    border-color: var(--theme-500) !important;
    outline: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--theme-50) !important;
    border: 1px solid var(--theme-200) !important;
    border-radius: var(--radius-xs) !important;
    color: var(--theme-700) !important;
    font-size: var(--fs-b3) !important;
    padding: 2px 8px !important;
    margin: 2px 4px 2px 0 !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    color: var(--theme-500) !important;
    margin-right: 4px !important;
    border: none !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--danger-primary) !important;
    background: transparent !important;
}

/* ── 다중 선택 드롭다운 및 태그 목록 (Figma Frame 2085664266) ── */
.dtl-cell--auth {
    align-items: flex-start;
}

.dtl-cell--auth .dtl-head {
    padding-top: 0.857rem;
    min-height: 38px;
}

.pg-select-tags-wrap {
    display: flex;
    flex-direction: column;
    width: 100%;
    gap: 0.571rem; /* 8px */
}

/* 플레이스홀더 상태의 셀렉트 텍스트 컬러 */
.gotgan-select.is-placeholder,
.gotgan-select:has(option[value=""]:checked) {
    color: var(--gary-400);
}

.gotgan-select option {
    color: var(--gary-900);
}

.gotgan-select option[value=""] {
    color: var(--gary-400);
}

/* 하단 선택된 태그 목록 컨테이너 */
.pg-selected-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.571rem; /* 8px */
    min-height: 0;
}

.pg-selected-tags:empty {
    display: none;
}

/* 선택된 태그 알약(Pill) 캡슐 (Figma Frame 1 Tag 규격: bg #F2F2F2, radius 20px, 14px Regular #121212) */
.pg-tag-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.429rem; /* 6px */
    background-color: var(--gary-100);
    border: none;
    border-radius: var(--radius-xl); /* 20px pill shape */
    padding: 0.357rem 0.857rem 0.357rem 1.000rem; /* 상하 5px, 우 12px, 좌 14px */
    font-size: var(--fs-b4); /* 14px */
    font-weight: 400;
    color: var(--gary-900);
    line-height: 1.4;
    letter-spacing: -0.02em;
    user-select: none;
    transition: background-color 0.15s ease;
}

.pg-tag-pill:hover {
    background-color: var(--gary-200);
}

.pg-tag-pill__text {
    white-space: nowrap;
}

/* 태그 삭제(X) 버튼 */
.pg-tag-pill__remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    cursor: pointer;
    color: var(--gary-500);
    line-height: 1;
    border-radius: 50%;
    width: 16px;
    height: 16px;
    transition: color 0.15s ease;
}

.pg-tag-pill__remove:hover {
    color: var(--gary-900);
}

.pg-tag-pill__remove svg {
    width: 10px;
    height: 10px;
    stroke: currentColor;
    stroke-width: 1.5;
    stroke-linecap: round;
}

/* ==========================================================================
   8. 페이지 표준 구조 (Figma Title_Head & pg-menu-layout)
   ========================================================================== */
/* 페이지 상단 타이틀 바 */
.pg-title-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.429rem; /* 20px */
}

.pg-title-bar__left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.pg-title-bar__main {
    font-size: var(--fs-t2);
    font-weight: 600;
    color: var(--gary-900);
}

.pg-title-bar__divider {
    width: 1px;
    height: 18px;
    background-color: var(--gary-300);
}

.pg-title-bar__sub {
    font-size: var(--fs-t2);
    font-weight: 500;
    color: var(--gary-400);
}

.pg-title-bar__right {
    display: flex;
    align-items: center;
    gap: 0.571rem; /* 8px */
}

/* 상단 타이틀 바 우측 액션 버튼 표준 규격 (텍스트 길이에 최적화된 단정하고 슬림한 비율) */
.pg-title-bar__right .gotgan-btn,
.pg-title-bar__right .cms-btn,
.pg-title-bar__right > button,
.pg-title-bar__right > a {
    min-width: auto;
    padding: 0 1.143rem; /* 16px */
    justify-content: center;
    text-align: center;
    box-sizing: border-box;
}

/* 표준 2분할 레이아웃 */
.pg-menu-layout {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.pg-tree-panel {
    width: 360px;
    flex-shrink: 0;
    background-color: var(--primary-WT);
    border-radius: var(--radius-lg);
    padding: 1.429rem; /* 20px */
    min-height: 520px;
    box-sizing: border-box;
    overflow-y: auto;
}

.pg-tree-panel__header {
    margin-bottom: 1.143rem; /* 16px */
}

.pg-tree-panel__btn-new {
    width: 100%;
    height: 38px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: var(--fs-b4);
    font-weight: 500;
    border-radius: var(--radius-sm);
}

/* ── 좌측 패턴 목록 컨테이너 & 아이템 스타일 (피그마 디자인 토큰 규격) ── */
.pattern-list-wrap {
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: calc(100vh - 330px);
    padding-right: 4px;
}

.pattern-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.857rem 1rem; /* 12px 14px */
    background-color: var(--primary-WT);
    border: none;
    border-radius: var(--radius-base); /* 8px */
    cursor: pointer;
    text-align: left;
    width: 100%;
    transition: all 0.15s ease-in-out;
    box-sizing: border-box;
}

.pattern-item:hover {
    background-color: var(--gary-50);
}

/* 좌측 목록에서 선택되었을 때 활성 상태 */
.pattern-item.is-active {
    background-color: var(--theme-50);
    border: none;
    box-shadow: none;
}

.pattern-item__info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
    padding-right: 8px;
}

.pattern-item__name {
    font-size: var(--fs-b4);
    font-weight: 600;
    color: var(--gary-900);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pattern-item.is-active .pattern-item__name, .pattern-item.is-active .pattern-item__path {
    color: var(--theme-700);
}

.pattern-item__path {
    font-size: var(--fs-b2);
    color: var(--gary-400);
    font-family: 'Consolas', 'Courier New', monospace;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pattern-item__badge {
    flex-shrink: 0;
}

/* 빈 목록 안내 */
.pattern-empty {
    padding: 3rem 1rem;
    text-align: center;
    color: var(--gary-400);
    font-size: var(--fs-b4);
}

.pg-content-panel {
    flex: 1;
    min-width: 0;
    max-width: 100%;
    background-color: var(--primary-WT);
    border-radius: var(--radius-lg);
    padding: 1.429rem;
    box-sizing: border-box;
    overflow-x: hidden;
    display: flex;
    flex-direction: column;
}

/* 우측 [01선택전] 플레이스홀더 (피그마 Frame 64 / Frame 2085664071) */
.pg-placeholder-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 480px;
    padding: 3rem 1.5rem;
    gap: 1.143rem; /* 16px */
    text-align: center;
}

.pg-placeholder-wrap__icon {
    width: 60px;
    height: 60px;
    margin-bottom: 4px;
    display: block;
}

.pg-placeholder-wrap__text {
    font-size: var(--fs-b4);
    color: var(--gary-500);
    font-weight: 400;
    line-height: 1.571rem;
    letter-spacing: -0.02em;
}

/* 우측 플레이스홀더 표시 중 폼 및 삭제 버튼 초기 비노출 */
.pg-placeholder-wrap ~ form,
#securityPatternForm {
    display: none;
}

#btnDelete {
    display: none;
}

/* 패널 상단 헤더 바 & 브레드크럼 */
.pg-header-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--gary-100);
    gap: 12px;
    flex-wrap: wrap;
}

.pg-header-bar__left {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.pg-header-bar__right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* 그리드 상단 액션 바 (경계선 제거 및 상단 여백 확보) */
.pg-header-bar--grid {
    margin-top: 1.714rem; /* 24px */
    margin-bottom: 0.857rem; /* 12px */
    padding-bottom: 0;
    border-bottom: none;
}

.pg-form-title {
    font-size: var(--fs-t1); /* 20px / 1.429rem */
    font-weight: 600;
    color: var(--gary-900);
    line-height: 1.2;
    margin: 0;
}

.pg-form-req-badge {
    font-size: var(--fs-b3); /* 13px / 0.929rem */
    color: var(--danger-primary);
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 2px;
    white-space: nowrap;
}

.pg-form-req-txt {
    color: var(--gary-500);
}

/* Breadcrumb 칩 (피그마: bg #F3F8FF, h:32, r:6, px:10) */
.pg-breadcrumb {
    background-color: var(--theme-50);
    border-radius: var(--radius-sm);
    height: 32px;
    padding: 4px 10px;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    max-width: 320px;
    overflow: hidden;
    box-sizing: border-box;
}

.pg-breadcrumb__check {
    width: 10px;
    height: 10px;
    flex-shrink: 0;
    border: 1px solid var(--theme-500);
    border-radius: 2px;
    background-color: var(--primary-WT);
}

.pg-breadcrumb__text {
    font-size: var(--fs-b3); /* 13px */
    font-weight: 600;
    color: var(--theme-600);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.pg-breadcrumb__placeholder {
    color: var(--gary-400);
}

/* 필터 카드 영역 */
.pg-filter-card {
    background-color: var(--primary-WT);
    border-radius: var(--radius-lg);
    padding: 1.143rem 1.429rem;
    margin-bottom: 1.429rem;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    flex-wrap: wrap;
}

.pg-filter-card__title {
    font-size: var(--fs-b4);
    font-weight: 600;
    color: var(--gary-800);
    white-space: nowrap;
    margin-bottom: 0;
    flex-shrink: 0;
}

/* 필터 카드 라벨 및 컨트롤 여유 공간 표준화 (글자 세로 꺾임 방지) */
.pg-filter-card label,
.pg-filter-card .filter-label,
.pg-filter-card .cms-b4-b {
    font-size: var(--fs-b4, 14px);
    font-weight: 600;
    color: var(--gary-800, #1F1F1F);
    white-space: nowrap !important;
    flex-shrink: 0 !important;
    margin-bottom: 0;
    line-height: 1.4;
    min-width: max-content;
}

/* 필터 폼 및 줄바꿈 행 레이아웃 (화면 축소 시 자연스러운 하단 줄바꿈 보장) */
.pg-filter-card form {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

.pg-filter-card form .d-flex.flex-wrap,
.pg-filter-card form > .d-flex {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    box-sizing: border-box;
    flex-wrap: wrap !important;
    row-gap: 12px;
}

/* 개별 필터 항목 래퍼 */
.pg-filter-card .filter-item,
.pg-filter-card form .d-flex.flex-wrap > div:not(.ms-auto) {
    max-width: 100%;
    box-sizing: border-box;
}

/* 검색 키워드 입력 그룹 (검색구분 셀렉트 + 인풋창) */
.pg-filter-card form .flex-grow-1 {
    min-width: 240px;
    max-width: 100%;
    box-sizing: border-box;
}

.pg-filter-card form .flex-grow-1 input.gotgan-input {
    min-width: 0;
    flex: 1 1 0%;
    width: auto;
}

.pg-filter-card .searchable-select,
.pg-filter-card select,
.pg-filter-card .gotgan-select {
    width: auto;
    min-width: 130px;
    max-width: 100%;
    box-sizing: border-box;
    flex-shrink: 0;
}

/* 필터 액션 버튼 그룹 (조회, 초기화) */
.pg-filter-card form .ms-auto {
    flex-shrink: 0;
    margin-left: auto;
}

/* ── 피그마 표준 필터 카드 다단 레이아웃 컴포넌트 ── */
.pg-filter-card__item {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0%;
    min-width: 200px;
    box-sizing: border-box;
}

.pg-filter-card__item > .gotgan-select,
.pg-filter-card__item > .gotgan-input {
    flex: 1 1 0%;
    min-width: 0 !important;
    width: auto !important;
}

.pg-filter-card__period {
    display: flex;
    align-items: center;
    gap: 6px;
    flex: 1 1 0%;
    min-width: 0;
}

.pg-filter-card__period > .gotgan-input {
    flex: 1 1 0%;
    min-width: 0 !important;
    width: auto !important;
}

.pg-filter-card__search {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 0%;
    min-width: 280px;
    box-sizing: border-box;
}

.pg-filter-card__search > select,
.pg-filter-card__search > .gotgan-select {
    width: 110px !important;
    min-width: 110px !important;
    flex-shrink: 0 !important;
}

.pg-filter-card__search > input.gotgan-input {
    flex: 1 1 0%;
    min-width: 0 !important;
    width: auto !important;
}

.pg-filter-card__actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    flex-shrink: 0;
}

.pg-filter-card button[type="submit"],
.pg-filter-card .gotgan-btn--primary,
.pg-filter-card .gotgan-btn-primary,
.pg-filter-card #btn-search,
.pg-filter-card #btnSearch {
    background-color: var(--gary-900, #121212) !important;
    color: var(--primary-WT, #ffffff) !important;
    border: 1px solid var(--gary-900, #121212) !important;
    height: 38px;
    padding: 0 18px;
    border-radius: var(--radius-sm, 6px);
    font-size: var(--fs-b4, 14px);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pg-filter-card button[type="submit"]:hover,
.pg-filter-card .gotgan-btn--primary:hover,
.pg-filter-card .gotgan-btn-primary:hover,
.pg-filter-card #btn-search:hover,
.pg-filter-card #btnSearch:hover {
    background-color: var(--gary-700, #2D2D2D) !important;
    border-color: var(--gary-700, #2D2D2D) !important;
}

.pg-filter-card button[type="button"][id*="reset"],
.pg-filter-card button[type="button"][id*="Reset"],
.pg-filter-card .gotgan-btn--outline,
.pg-filter-card .gotgan-btn-outline {
    background-color: var(--primary-WT, #ffffff) !important;
    color: var(--gary-800, #1F1F1F) !important;
    border: 1px solid var(--gary-300, #CECECE) !important;
    height: 38px;
    padding: 0 18px;
    border-radius: var(--radius-sm, 6px);
    font-size: var(--fs-b4, 14px);
    font-weight: 500;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background-color 0.15s ease, border-color 0.15s ease;
}

.pg-filter-card button[type="button"][id*="reset"]:hover,
.pg-filter-card button[type="button"][id*="Reset"]:hover,
.pg-filter-card .gotgan-btn--outline:hover,
.pg-filter-card .gotgan-btn-outline:hover {
    background-color: var(--gary-100, #F2F2F2) !important;
    border-color: var(--gary-400, #A6A6A6) !important;
    color: var(--gary-900, #121212) !important;
}

/* 그리드 감싸는 래퍼 */
.pg-grid-wrap {
    background-color: var(--primary-WT);
    border-radius: var(--radius-lg);
    padding: 1.429rem;
}

/* 그리드 2열 반응형 레이아웃 (표준 권한 관리 등 2분할 카드 레이아웃) */
.pg-grid-cols-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(460px, 1fr));
    gap: 1.429rem;
    align-items: start;
    width: 100%;
}

@media (max-width: 768px) {
    .pg-grid-cols-2 {
        grid-template-columns: 1fr;
    }
}

/* TUI Grid 정렬 버튼 배경색 (피그마 디자인 스펙) */
.tui-grid-btn-sorting {
    background-color: var(--gary-200);
    border-radius: var(--radius-xs);
    transition: background-color 0.15s ease;
}

.tui-grid-btn-sorting:hover {
    background-color: var(--gary-200);
}

/* ==========================================================================
   9. TUI Grid & Pagination (Figma "Pagination" 레이어 - node 262:4199)
   ========================================================================== */
.tui-grid-pagination {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    margin: 1.143rem 0 0.571rem 0 !important; /* 16px 0 8px */
    padding: 0 !important;
    background-color: transparent !important;
    border: none !important;
    text-align: center !important;
}

.tui-grid-container .tui-grid-pagination {
    margin: 1.143rem 0 0.571rem 0 !important;
}

.pg-grid-wrap .tui-grid-pagination,
.pg-grid-wrap .tui-pagination {
    margin: 1.143rem 0 0.571rem 0 !important;
}

.tui-pagination {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 28px !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 12px !important;
    line-height: normal !important;
    text-align: center !important;
    font-size: 0 !important;
    border: none !important;
    background-color: transparent !important;
}

.tui-pagination .tui-page-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: var(--radius-md) !important; /* 12px / 0.857rem */
    background-color: transparent !important;
    color: var(--gary-500) !important;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    font-size: var(--fs-b4) !important; /* 14px / 1.000rem */
    font-weight: 400 !important;
    line-height: 1 !important;
    letter-spacing: -0.28px !important;
    text-decoration: none !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
}

.tui-pagination .tui-page-btn:hover:not(.tui-is-selected):not(.tui-is-disabled):not(.tui-prev):not(.tui-next):not(.tui-first):not(.tui-last) {
    background-color: var(--gary-100) !important;
    color: var(--gary-900) !important;
}

.tui-pagination .tui-is-selected,
.tui-pagination strong.tui-page-btn,
.tui-pagination strong {
    background-color: var(--gary-200) !important;
    color: var(--gary-900) !important;
    font-weight: 500 !important;
    cursor: default !important;
    border: none !important;
}

.tui-pagination .tui-is-selected:hover,
.tui-pagination strong.tui-page-btn:hover {
    background-color: var(--gary-200) !important;
    color: var(--gary-900) !important;
}

.tui-pagination .tui-prev {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-right: 8px !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpolygon points='12,3 6,9 12,15' fill='%23A6A6A6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    font-size: 0 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: background-image 0.15s ease, opacity 0.15s ease !important;
}

.tui-pagination .tui-prev:hover:not(.tui-is-disabled) {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpolygon points='12,3 6,9 12,15' fill='%23121212'/%3E%3C/svg%3E") !important;
}

.tui-pagination .tui-next {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    padding: 0 !important;
    margin: 0 !important;
    margin-left: 8px !important;
    border: none !important;
    border-radius: 0 !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpolygon points='6,3 12,9 6,15' fill='%23A6A6A6'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    font-size: 0 !important;
    flex-shrink: 0 !important;
    cursor: pointer !important;
    transition: background-image 0.15s ease, opacity 0.15s ease !important;
}

.tui-pagination .tui-next:hover:not(.tui-is-disabled) {
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18'%3E%3Cpolygon points='6,3 12,9 6,15' fill='%23121212'/%3E%3C/svg%3E") !important;
}

.tui-pagination .tui-first,
.tui-pagination .tui-last {
    display: none !important;
}

.tui-pagination [class*="tui-ico-"],
.tui-pagination .tui-ico-prev,
.tui-pagination .tui-ico-next,
.tui-pagination .tui-ico-first,
.tui-pagination .tui-ico-last,
.tui-pagination .tui-ico-ellip {
    display: none !important;
}

.tui-pagination .tui-is-disabled {
    opacity: 0.3 !important;
    cursor: default !important;
    pointer-events: none !important;
}

.tui-pagination .tui-prev-is-ellip,
.tui-pagination .tui-next-is-ellip {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    background: transparent !important;
    color: var(--gary-400) !important;
    font-size: var(--fs-b4) !important;
    cursor: pointer !important;
    line-height: 1 !important;
    transition: background-color 0.15s ease, color 0.15s ease !important;
}

.tui-pagination .tui-prev-is-ellip::before,
.tui-pagination .tui-next-is-ellip::before {
    content: "···";
    font-weight: 700;
    font-size: var(--fs-b4);
    line-height: 1;
    letter-spacing: 1px;
}

.tui-pagination .tui-prev-is-ellip:hover,
.tui-pagination .tui-next-is-ellip:hover {
    background-color: var(--gary-100) !important;
    color: var(--gary-900) !important;
}

/* ==========================================================================
   10. CMS 탭 UI (Figma TabUI 컴포넌트)
   ========================================================================== */
.cms-tabs {
    display: flex;
    align-items: flex-end;
    gap: 0;
    border-bottom: 2px solid var(--gary-200);
    padding: 0;
    margin: 0;
    list-style: none;
}

.cms-tabs .nav-item {
    list-style: none;
}

.cms-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 20px;
    font-size: var(--fs-b4);
    font-weight: 500;
    color: var(--gary-400);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    cursor: pointer;
    transition: color 0.15s ease, border-color 0.15s ease;
    text-decoration: none;
    letter-spacing: -0.02em;
}

.cms-tabs .nav-link:hover {
    color: var(--gary-700);
    border-bottom-color: var(--gary-300);
}

.cms-tabs .nav-link.active {
    color: var(--gary-900);
    font-weight: 700;
    border-bottom-color: var(--gary-900);
}

.cms-tab-content {
    width: 100%;
}

.cms-tab-pane {
    display: none;
}

.cms-tab-pane.active {
    display: block;
}

/* ==========================================================================
   11. TUI Tree 피그마 커스텀 (16x16 폴더/문서 아이콘 및 트리 스타일)
   ========================================================================== */
#menu-tree.tui-tree-wrap {
    width: 100% !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: var(--fs-b4) !important;
}

#menu-tree .tui-tree-node {
    list-style: none !important;
    margin: 2px 0 !important;
    padding: 0 !important;
    display: block !important;
}

#menu-tree .tui-tree-content-wrapper {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 10px !important;
    height: 38px !important;
    border-radius: var(--radius-sm) !important;
    width: 100% !important;
    box-sizing: border-box !important;
    transition: background-color 0.15s ease !important;
    cursor: pointer !important;
    overflow: hidden !important;
}

#menu-tree .tui-tree-content-wrapper:hover,
#menu-tree .tui-tree-hover > .tui-tree-content-wrapper {
    background-color: var(--gary-50) !important;
}

#menu-tree .tui-tree-selected > .tui-tree-content-wrapper {
    background-color: var(--theme-50) !important;
}

#menu-tree .tui-tree-selected > .tui-tree-content-wrapper .tui-tree-text {
    color: var(--theme-600) !important;
    font-weight: 600 !important;
}

#menu-tree .tui-tree-toggle-btn {
    flex-shrink: 0 !important;
    width: 14px !important;
    height: 14px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: none !important;
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    cursor: pointer !important;
}

#menu-tree .tui-ico-tree,
#menu-tree .tui-ico-root { 
    display: none !important; 
}

/* 열린 ▼ */
#menu-tree .tui-tree-opened > .tui-tree-content-wrapper .tui-tree-toggle-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23656565' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 10px 6px !important;
}

/* 닫힌 ▶ */
#menu-tree .tui-tree-closed > .tui-tree-content-wrapper .tui-tree-toggle-btn {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='6' height='10' viewBox='0 0 6 10'%3E%3Cpath d='M1 1l4 4-4 4' stroke='%23656565' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 6px 10px !important;
}

#menu-tree .tui-tree-text {
    flex: 1 !important;
    min-width: 0 !important;
    font-size: var(--fs-b4) !important;
    font-weight: 400 !important;
    color: var(--gary-700) !important;
    line-height: 22px !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

/* 16x16 트리 노드 아이콘 공통 규격 */
#menu-tree .tui-tree-ico {
    flex-shrink: 0 !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background-size: 16px 16px !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    border: none !important;
    background-color: transparent !important;
    margin: 0 8px 0 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
    vertical-align: middle !important;
}

/* 1depth / 폴더 아이콘 (Figma 규격 16x16 폴더) */
#menu-tree .tui-ico-folder {
    background-image: url("/admin/static/img/icon/ic_folder_16.svg") !important;
}

/* 2depth 리스트 / 리프 노드 문서 아이콘 (Figma 규격 16x16 문서) */
#menu-tree .tui-ico-file,
#menu-tree .tui-tree-subtree .tui-tree-ico {
    background-image: url("/admin/static/img/icon/ic_file_16.svg") !important;
}

/* 서브트리 내부라도 하위 자식이 있는 폴더 노드인 경우 폴더 아이콘 유지 */
#menu-tree .tui-tree-subtree .tui-ico-folder {
    background-image: url("/admin/static/img/icon/ic_folder_16.svg") !important;
}

#menu-tree .tui-tree-leaf > .tui-tree-content-wrapper {
    padding-left: 28px !important;
}

#menu-tree .tui-tree-subtree {
    list-style: none !important;
    padding-left: 18px !important;
    margin: 0 !important;
}

#menu-tree .tui-tree-root,
#menu-tree > ul,
.tui-tree.tui-tree-root,
.tui-tree-wrap .tui-tree-root {
    padding-left: 0 !important;
    max-height: 600px;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    padding-right: 4px;
}

#menu-tree .tui-tree-root::-webkit-scrollbar,
.tui-tree.tui-tree-root::-webkit-scrollbar,
.tui-tree-wrap .tui-tree-root::-webkit-scrollbar {
    width: 4px;
}

#menu-tree .tui-tree-root::-webkit-scrollbar-thumb,
.tui-tree.tui-tree-root::-webkit-scrollbar-thumb,
.tui-tree-wrap .tui-tree-root::-webkit-scrollbar-thumb {
    background-color: var(--gary-300);
    border-radius: 4px;
}

#menu-tree .tui-tree-root::-webkit-scrollbar-track,
.tui-tree.tui-tree-root::-webkit-scrollbar-track,
.tui-tree-wrap .tui-tree-root::-webkit-scrollbar-track {
    background: transparent;
}

.tree-hidden-badge {
    display: inline-flex;
    align-items: center;
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    color: var(--gary-400);
    background: var(--gary-100);
    border: 1px solid var(--gary-200);
    border-radius: var(--radius-xs);
    padding: 2px 4px;
    margin-right: 4px;
    vertical-align: middle;
}

/* 타이포그래피 유틸리티 클래스 (Figma 스타일 호환) */
.cms-t2-b  { font-size: var(--fs-t2); font-weight: 600; }
.cms-t2-sb { font-size: var(--fs-t2); font-weight: 500; }
.cms-t4-b  { font-size: var(--fs-t4); font-weight: 700; }
.cms-t4-sb { font-size: var(--fs-t4); font-weight: 600; }
.cms-b5-sb { font-size: var(--fs-b5); font-weight: 600; }
.cms-b5-m  { font-size: var(--fs-b5); font-weight: 500; }
.cms-b5-r  { font-size: var(--fs-b5); font-weight: 400; }
.cms-b4-sb { font-size: var(--fs-b4); font-weight: 600; }
.cms-b4-m  { font-size: var(--fs-b4); font-weight: 500; }
.cms-b4-r  { font-size: var(--fs-b4); font-weight: 400; }
.cms-b3-m  { font-size: var(--fs-b3); font-weight: 500; }
.cms-b3-r  { font-size: var(--fs-b3); font-weight: 400; }
.cms-b2-r  { font-size: var(--fs-b2); font-weight: 400; }

/* ==========================================================================
   공통 레이아웃 유틸리티 (Flex, Gap, Alignment)
   ========================================================================== */
.d-flex {
    display: flex !important;
}

.d-inline-flex {
    display: inline-flex !important;
}

.flex-column {
    flex-direction: column !important;
}

.justify-content-start {
    justify-content: flex-start !important;
}

.justify-content-center {
    justify-content: center !important;
}

.justify-content-between {
    justify-content: space-between !important;
}

.justify-content-end {
    justify-content: flex-end !important;
}

.align-items-start {
    align-items: flex-start !important;
}

.align-items-center {
    align-items: center !important;
}

.align-items-end {
    align-items: flex-end !important;
}

.gap-1 {
    gap: 0.286rem !important; /* 4px */
}

.gap-2 {
    gap: 0.571rem !important; /* 8px */
}

.gap-3 {
    gap: 0.857rem !important; /* 12px */
}

.gap-4 {
    gap: 1.143rem !important; /* 16px */
}

.me-1 {
    margin-right: 0.286rem !important; /* 4px */
}

.me-2 {
    margin-right: 0.571rem !important; /* 8px */
}

.ms-1 {
    margin-left: 0.286rem !important; /* 4px */
}

.ms-2 {
    margin-left: 0.571rem !important; /* 8px */
}

/* ==========================================================================
   메인 관리 화면 전용 스타일 (Figma Frame 2085664283 / Frame 2085664288)
   ========================================================================== */
.mainsettings-wrap {
    display: flex;
    flex-direction: column;
    gap: 1.143rem; /* 16px */
    width: 100%;
}

/* 1) 상단 사이트 선택 카드 */
.mainsettings-top-card {
    background-color: var(--primary-WT);
    border-radius: var(--radius-lg);
    padding: 1.286rem 2rem; /* 18px 28px */
    display: flex;
    align-items: center;
    box-sizing: border-box;
    width: 100%;
}

.mainsettings-top-card__label {
    width: 140px;
    flex-shrink: 0;
    font-size: var(--fs-b4);
    font-weight: 600;
    color: var(--gary-900);
}

.mainsettings-top-card__select-wrap {
    flex: 1;
    max-width: 540px;
}

/* 2) 하단 메인 설정 카드 */
.mainsettings-card {
    background-color: var(--primary-WT);
    border-radius: var(--radius-lg);
    padding: 2rem 2.286rem; /* 28px 32px */
    box-sizing: border-box;
    width: 100%;
}

.mainsettings-sec {
    margin-bottom: 2.286rem; /* 32px */
}

.mainsettings-sec:last-child {
    margin-bottom: 0;
}

.mainsettings-sec__header {
    display: flex;
    align-items: center;
    gap: 0.714rem; /* 10px */
    padding-bottom: 0.857rem; /* 12px */
    border-bottom: 1px solid var(--gary-200);
    margin-bottom: 1.429rem; /* 20px */
}

.mainsettings-sec__title {
    font-size: var(--fs-t1); /* 18-20px */
    font-weight: 700;
    color: var(--gary-900);
    margin: 0;
}

.mainsettings-sec__badge {
    font-size: var(--fs-b2);
    color: var(--gary-500);
}

.mainsettings-sec__badge .req-star {
    color: var(--theme-500);
    font-weight: 700;
    margin-right: 2px;
}

.mainsettings-sec__desc {
    font-size: var(--fs-b3);
    color: var(--gary-500);
    font-weight: 400;
    margin-left: 0.571rem;
}

/* 2열 그리드 배치 */
.mainsettings-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 2.857rem; /* 40px */
    row-gap: 1.429rem; /* 20px */
    width: 100%;
}

@media (max-width: 992px) {
    .mainsettings-grid {
        grid-template-columns: 1fr;
    }
}

.mainsettings-field {
    display: flex;
    align-items: flex-start;
    gap: 1.143rem; /* 16px */
    min-width: 0;
}

.mainsettings-field--full {
    grid-column: 1 / -1;
}

.mainsettings-field__label {
    width: 110px;
    flex-shrink: 0;
    font-size: var(--fs-b4);
    font-weight: 500;
    color: var(--gary-800);
    padding-top: 2px;
}

.mainsettings-field__label .req-star {
    color: var(--theme-500);
    font-weight: 700;
    margin-left: 2px;
}

.mainsettings-field__content {
    flex: 1;
    min-width: 0;
}

.mainsettings-field__val {
    font-size: var(--fs-b4);
    color: var(--gary-900);
    line-height: 1.5;
    word-break: break-word;
}

.mainsettings-field__hint {
    font-size: var(--fs-b2);
    color: var(--gary-400);
    margin-top: 0.286rem;
    margin-bottom: 0;
    line-height: 1.4;
}

.mainsettings-radio-group {
    display: flex;
    align-items: center;
    gap: 1.429rem; /* 20px */
    height: 24px;
}

/* 라디오 버튼 체크 시 블랙 도트 (Figma Frame 2085664288) */
.cms-radio-label input[type="radio"]:checked ~ .cms-radio-circle {
    border-color: var(--gary-900);
}

.cms-radio-label input[type="radio"]:checked ~ .cms-radio-circle .cms-radio-dot {
    background: var(--gary-900);
    opacity: 1;
    transform: scale(1);
}

/* 3) 게시판 노출 설정 행 (Figma Frame 2085664288) */
.mainsettings-board-row {
    display: flex;
    align-items: flex-start;
    gap: 1.143rem; /* 16px */
    width: 100%;
}

.mainsettings-board-grid {
    flex: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1.714rem; /* 24px */
    min-width: 0;
}

@media (max-width: 992px) {
    .mainsettings-board-row {
        flex-direction: column;
    }
    .mainsettings-board-grid {
        grid-template-columns: 1fr;
        width: 100%;
    }
}

.mainsettings-board-col__title {
    font-size: var(--fs-b3);
    font-weight: 500;
    color: var(--gary-700);
    margin-bottom: 0.714rem; /* 10px */
}

.mainsettings-board-list {
    display: flex;
    flex-direction: column;
    gap: 0.571rem; /* 8px */
    min-height: 100px;
}

.board-select-card {
    background-color: var(--primary-WT);
    border: 1px solid var(--gary-200);
    border-radius: var(--radius-sm);
    height: 42px;
    padding: 0 0.714rem 0 1.143rem; /* 0 10px 0 16px */
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    transition: border-color 0.15s ease;
}

.board-select-card:hover {
    border-color: var(--gary-300);
}

.board-select-card__name {
    font-size: var(--fs-b4);
    color: var(--gary-800);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    padding-right: 0.571rem;
}

.board-select-card__btn-add {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-xs);
    background-color: var(--gary-100);
    border: none;
    font-size: 16px;
    color: var(--gary-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    padding: 0;
    line-height: 1;
}

.board-select-card__btn-add:hover {
    background-color: var(--gary-200);
    color: var(--gary-900);
}

.board-select-card__controls {
    display: flex;
    align-items: center;
    gap: 0.571rem; /* 8px */
    flex-shrink: 0;
}

.board-select-card__count-input {
    width: 52px !important;
    height: 28px !important;
    padding: 2px 4px !important;
    background-color: var(--gary-100) !important;
    border: none !important;
    border-radius: var(--radius-xs) !important;
    text-align: center !important;
    font-size: var(--fs-b3) !important;
    color: var(--gary-900) !important;
    outline: none !important;
}

.board-select-card__count-input:focus {
    background-color: var(--primary-WT) !important;
    box-shadow: 0 0 0 1px var(--gary-300) !important;
}

.board-select-card__btn-remove {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-xs);
    background-color: var(--gary-100);
    border: none;
    font-size: 14px;
    color: var(--gary-600);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
    padding: 0;
    line-height: 1;
}

.board-select-card__btn-remove:hover {
    background-color: var(--danger-bg);
    color: var(--danger-text);
}

.mainsettings-board-empty {
    padding: 2rem 1rem;
    text-align: center;
    color: var(--gary-400);
    font-size: var(--fs-b3);
}

/* ==========================================================================
   메뉴 관리 전용 추가 파라미터 테이블 스타일
   ========================================================================== */
.params-table-wrap {
    width: 100%;
    max-width: 680px;
}

.params-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--fs-b4);
    background-color: var(--primary-WT);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.params-table th {
    background-color: var(--gary-50);
    color: var(--gary-700);
    font-weight: 600;
    padding: 0.643rem 0.857rem;
    border-top: 1px solid var(--gary-200);
    border-bottom: 1px solid var(--gary-200);
    text-align: left;
}

.params-table td {
    padding: 0.5rem 0.571rem;
    border-bottom: 1px solid var(--gary-100);
}

.params-table input {
    width: 100%;
    height: 38px;
    padding: 0 0.857rem;
    border: 1px solid var(--gary-200);
    border-radius: var(--radius-sm);
    font-size: var(--fs-b4);
    color: var(--gary-900);
    box-sizing: border-box;
    background-color: var(--primary-WT);
    transition: border-color 0.15s ease;
}

.params-table input:focus {
    border-color: var(--theme-500);
    outline: none;
}

.btn-remove-param {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: none;
    background: transparent;
    cursor: pointer;
    border-radius: var(--radius-xs);
    color: var(--danger-primary);
    transition: background-color 0.15s ease;
}

.btn-remove-param:hover {
    background-color: var(--danger-bg);
}

/* ==========================================================================
   체크박스 — 피그마 검정 배경 규격 일괄 적용 (Figma Design Token)
   ========================================================================== */
input[type="checkbox"],
.tui-grid-cell-row-header input[type="checkbox"],
.tui-grid-cell input[type="checkbox"] {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    accent-color: var(--gary-900) !important;
    width: 18px !important;
    height: 18px !important;
    border: 1px solid var(--gary-300) !important;
    border-radius: var(--radius-xs) !important;
    background-color: var(--primary-WT) !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    position: relative !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
    flex-shrink: 0 !important;
}

input[type="checkbox"]:hover,
.tui-grid-cell-row-header input[type="checkbox"]:hover,
.tui-grid-cell input[type="checkbox"]:hover {
    border-color: var(--gary-500) !important;
}

input[type="checkbox"]:checked,
.tui-grid-cell-row-header input[type="checkbox"]:checked,
.tui-grid-cell input[type="checkbox"]:checked {
    background-color: var(--gary-900) !important;
    border-color: var(--gary-900) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='10' viewBox='0 0 12 10' fill='none'%3E%3Cpath d='M1.5 5L4.5 8L10.5 2' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

input[type="checkbox"]:focus,
input[type="checkbox"]:focus-visible,
.tui-grid-cell-row-header input[type="checkbox"]:focus,
.tui-grid-cell input[type="checkbox"]:focus {
    outline: none !important;
    box-shadow: 0 0 0 2px rgba(18, 18, 18, 0.2) !important;
    border-color: var(--gary-900) !important;
}

/* ==========================================================================
   통계 및 모니터링 — Figma Frame 2085664292 (필터 카드 & TUI Grid)
   ========================================================================== */
.stat-filter-card {
    position: relative !important;
    z-index: 50 !important;
    overflow: visible !important;
    background-color: var(--primary-WT);
    border-radius: var(--radius-lg);
    padding: 1.714rem 2rem 1.429rem 2rem;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.stat-filter-row {
    display: flex;
    align-items: center;
    gap: 2rem;
    width: 100%;
    flex-wrap: wrap;
}

.stat-filter-item {
    display: flex;
    align-items: center;
    gap: 1.143rem;
}

.stat-filter-label {
    font-size: var(--fs-b4);
    font-weight: 600;
    color: var(--gary-900);
    white-space: nowrap;
}

.stat-filter-select-wrap {
    width: 380px;
    max-width: 100%;
}

/* 기간 영역 전체 그룹 (피그마 Frame 2085664292 이미지 규격) */
.stat-filter-group--period {
    position: relative;
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 14px;
}

.stat-datepicker-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
    position: relative;
    z-index: 70;
}

.stat-datepicker-box {
    position: relative;
    display: inline-block;
}

.stat-datepicker-popup {
    position: absolute !important;
    top: calc(100% + 4px) !important;
    left: 0 !important;
    z-index: 9999 !important;
}

.stat-datepicker-popup .tui-datepicker {
    position: relative !important;
    z-index: 10000 !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12) !important;
    border-radius: var(--radius-sm, 6px) !important;
    background-color: #ffffff !important;
}

.stat-datepicker-popup .tui-calendar {
    border: 1px solid var(--gary-200, #E4E4E4) !important;
    border-radius: var(--radius-sm, 6px) !important;
    overflow: hidden !important;
}

/* TUI DatePicker Input 래퍼 — 피그마 인풋 규격으로 완벽 오버라이드 */
.stat-datepicker-wrap .tui-datepicker-input {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    width: 170px !important;
    height: 40px !important;
    padding: 0 !important;
    border: 1px solid var(--gary-200, #E4E4E4) !important;
    border-radius: var(--radius-sm, 6px) !important;
    background-color: var(--primary-WT, #FFFFFF) !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease !important;
    vertical-align: middle !important;
    overflow: hidden !important;
    cursor: pointer !important;
}

.stat-datepicker-wrap .tui-datepicker-input.tui-has-focus,
.stat-datepicker-wrap .tui-datepicker-input:focus-within {
    border-color: var(--gary-900, #121212) !important;
    outline: none !important;
}

/* 내부 Input 텍스트 필드 */
.stat-datepicker-wrap .tui-datepicker-input > input {
    width: 100% !important;
    height: 100% !important;
    padding: 0 38px 0 14px !important;
    border: none !important;
    border-radius: 0 !important;
    font-family: inherit !important;
    font-size: var(--fs-b4, 14px) !important;
    color: var(--gary-900, #121212) !important;
    background: transparent !important;
    line-height: 38px !important;
    outline: none !important;
    box-sizing: border-box !important;
    letter-spacing: -0.2px !important;
    cursor: pointer !important;
}

.stat-datepicker-wrap .tui-datepicker-input > input::placeholder {
    color: var(--gary-400, #A6A6A6) !important;
    font-size: var(--fs-b4, 14px) !important;
}

/* 캘린더 아이콘 — 피그마 선형 모던 캘린더 SVG 적용 및 스프라이트 제거 */
.stat-datepicker-wrap .tui-datepicker-input > .tui-ico-date {
    position: absolute !important;
    right: 12px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    border: none !important;
    background-color: transparent !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23888888' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='3' ry='3'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: center !important;
    background-size: 18px 18px !important;
    pointer-events: none !important;
    line-height: 1 !important;
    font-size: 0 !important;
    display: inline-block !important;
    z-index: 2 !important;
}

.stat-datepicker-wrap .tui-datepicker-input.tui-has-focus > .tui-ico-date,
.stat-datepicker-wrap .tui-datepicker-input:focus-within > .tui-ico-date {
    background-position: center !important;
}

.stat-datepicker-separator {
    color: var(--gary-400, #A6A6A6) !important;
    font-size: 14px !important;
    font-weight: 400 !important;
    margin: 0 4px !important;
    user-select: none !important;
}

/* 빠른 기간 선택 7일 / 30일 버튼 — 피그마 무테두리 라이트 그레이 칩 버튼 */
.stat-quick-btns {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 4px;
}

.stat-quick-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 40px !important;
    min-width: 52px !important;
    padding: 0 16px !important;
    border: none !important;
    border-radius: var(--radius-sm, 6px) !important;
    background-color: var(--gary-100, #F2F2F2) !important;
    color: var(--gary-900, #121212) !important;
    font-family: inherit !important;
    font-size: var(--fs-b4, 14px) !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: background-color 0.15s ease !important;
    box-sizing: border-box !important;
    outline: none !important;
}

.stat-quick-btn:hover {
    background-color: var(--gary-200, #E4E4E4) !important;
}

.stat-quick-btn:active {
    background-color: var(--gary-300, #CECECE) !important;
}

/* 2행: 중앙 정렬된 검정색 조회 버튼 (Figma 이미지 규격) */
.stat-filter-action {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 1.429rem;
}

.stat-search-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 40px;
    min-width: 140px;
    padding: 0 28px;
    border: none;
    border-radius: var(--radius-sm);
    background-color: var(--gary-900);
    color: var(--primary-WT);
    font-size: var(--fs-b4);
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.15s ease;
}

.stat-search-btn:hover {
    background-color: var(--gary-700);
}

.stat-search-btn svg {
    width: 16px;
    height: 16px;
}

/* 하단 그리드 상단 바: 조회된 내역 (좌) & 엑셀 다운로드 (우) */
.stat-grid-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
    width: 100%;
}

.stat-grid-header__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-perpage-select {
    display: inline-flex;
    align-items: center;
    height: 34px;
    padding: 0 28px 0 12px;
    border: 1px solid var(--gary-200);
    border-radius: var(--radius-sm);
    background-color: var(--primary-WT);
    color: var(--gary-800);
    font-family: inherit;
    font-size: var(--fs-b3);
    font-weight: 500;
    cursor: pointer;
    box-sizing: border-box;
    outline: none;
    transition: all 0.15s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px 12px;
}

.stat-perpage-select:hover {
    background-color: var(--gary-50);
    border-color: var(--gary-300);
    color: var(--gary-900);
}

.stat-perpage-select:focus {
    border-color: var(--gary-900);
}

/* 인라인 텍스트 드롭다운 래퍼 (피그마 Frame 2085664294 '전체 로그 등' 드롭다운) */
.stat-select-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    user-select: none;
    color: var(--gary-900, #121212);
}

.stat-select-trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.429rem;
    height: 2.429rem;
    padding: 0 0.286rem;
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--gary-900, #121212);
    font-family: inherit;
    outline: none;
    user-select: none;
}

.stat-select-wrap__label {
    font-size: var(--fs-b4, 1.000rem);
    font-weight: 500;
    color: var(--gary-900, #121212);
    line-height: 1;
    white-space: nowrap;
    letter-spacing: -0.01em;
}

.stat-select-wrap__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 0.857rem;
    height: 0.5rem;
    color: var(--gary-900, #121212);
    flex-shrink: 0;
    transition: color 0.15s ease, transform 0.2s ease;
}

.stat-select-wrap.is-open .stat-select-wrap__icon {
    transform: rotate(180deg);
}

.stat-select-wrap:hover .stat-select-wrap__label,
.stat-select-wrap:hover .stat-select-wrap__icon,
.stat-select-trigger:hover .stat-select-wrap__label,
.stat-select-trigger:hover .stat-select-wrap__icon {
    color: var(--gary-700, #2D2D2D);
}

/* 커스텀 드롭다운 메뉴 팝업 (피그마 Frame 2085664294 규격) */
.stat-select-dropdown {
    position: absolute;
    top: calc(100% + 0.286rem);
    left: 0;
    min-width: 10.714rem;
    background-color: var(--primary-WT, #FFFFFF);
    border: 1px solid var(--gary-100, #F2F2F2);
    border-radius: var(--radius-md, 0.857rem);
    box-shadow: 0 0.286rem 1.429rem rgba(0, 0, 0, 0.08), 0 0.071rem 0.286rem rgba(0, 0, 0, 0.04);
    padding: 0.429rem 0;
    z-index: 1000;
    display: none;
    overflow: hidden;
}

.stat-select-wrap.is-open .stat-select-dropdown {
    display: block;
}

.stat-select-item {
    display: block;
    width: 100%;
    padding: 0.714rem 1.143rem;
    font-size: var(--fs-b4, 1.000rem);
    font-weight: 400;
    color: var(--gary-500, #656565);
    background-color: transparent;
    border: none;
    text-align: left;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
    user-select: none;
    line-height: 1.4;
    box-sizing: border-box;
}

.stat-select-item:hover {
    background-color: var(--gary-50, #FAFAFA);
    color: var(--gary-900, #121212);
}

.stat-select-item.is-selected {
    background-color: var(--gary-50, #FAFAFA);
    color: var(--gary-900, #121212);
    font-weight: 500;
}

.stat-select-wrap__native {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
    border: none;
    background: transparent;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    z-index: 2;
}

/* 테두리 없는 텍스트형 드롭다운 (하위 호환 유지) */
.stat-select--borderless,
select.stat-select--borderless,
.stat-perpage-select.stat-select--borderless {
    border: none !important;
    background-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    padding: 0 20px 0 6px !important;
    font-size: var(--fs-b4, 14px) !important;
    font-weight: 500 !important;
    color: var(--gary-900, #121212) !important;
    cursor: pointer !important;
    background-position: right 2px center !important;
}

.stat-select--borderless:hover,
.stat-select--borderless:focus {
    border: none !important;
    background-color: transparent !important;
    color: var(--gary-900, #121212) !important;
    box-shadow: none !important;
}

.stat-excel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 34px;
    padding: 0 14px;
    border: 1px solid var(--gary-200);
    border-radius: var(--radius-sm);
    background-color: var(--primary-WT);
    color: var(--gary-800);
    font-size: var(--fs-b3);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

.stat-excel-btn span {
    white-space: nowrap !important;
}

.stat-excel-btn:hover {
    background-color: var(--gary-50);
    border-color: var(--gary-300);
    color: var(--gary-900);
}

.stat-excel-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* TUI Grid Summary 영역 — 피그마 블루 톤 및 중앙 정렬 */
.tui-grid-summary-area {
    background-color: var(--theme-50, #F3F8FF) !important;
    border-top: 1px solid var(--gary-200) !important;
}

.tui-grid-summary-area .tui-grid-cell {
    background-color: var(--theme-50, #F3F8FF) !important;
    font-weight: 600 !important;
    color: var(--theme-500, #3586FF) !important;
    font-size: var(--fs-b4) !important;
    border-right: 1px solid var(--gary-200) !important;
    border-bottom: none !important;
    text-align: center !important;
    line-height: 40px !important;
}

.tui-grid-summary-area .tui-grid-cell:last-child {
    border-right: none !important;
}

/* ==========================================================================
   접속 로그 및 통계 — Figma Frame 2085664294 (상단 지표 카드 4열 & 검색 필터 카드)
   ========================================================================== */

/* 1. 상단 통계 지표 4열 그리드 컨테이너 */
.stat-container {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.429rem; /* 20px */
    margin-bottom: 1.429rem; /* 20px */
    width: 100%;
}

@media (max-width: 1024px) {
    .stat-container {
        grid-template-columns: repeat(2, 1fr);
        gap: 1.143rem;
    }
}

@media (max-width: 640px) {
    .stat-container {
        grid-template-columns: 1fr;
    }
}

/* 개별 통계 박스 */
.stat-box {
    background-color: var(--primary-WT);
    border-radius: var(--radius-lg);
    padding: 1.429rem 1.714rem;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 0.571rem;
    box-sizing: border-box;
    border: none;
}

.stat-label {
    font-size: var(--fs-b4);
    font-weight: 500;
    color: var(--gary-500);
    line-height: 1.2;
    margin: 0;
}

.stat-value {
    font-size: var(--fs-t2);
    font-weight: 700;
    color: var(--gary-900);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-feature-settings: "tnum";
}

.stat-value.point,
.stat-value--primary {
    color: var(--theme-500) !important;
}

/* 2. 필터 카드 (Frame 2085664294 2단 필터 행) */
.filter-box.stat-filter-card {
    position: relative !important;
    z-index: 50 !important;
    overflow: visible !important;
    background-color: var(--primary-WT);
    border-radius: var(--radius-lg);
    padding: 1.714rem 2rem 1.429rem 2rem;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
    margin-bottom: 1.429rem;
    border: none;
}

.stat-filter-form {
    display: flex;
    flex-direction: column;
    gap: 1.143rem;
    width: 100%;
}

.stat-filter-row--full {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    width: 100%;
}

.stat-filter-row--split,
.stat-filter-row--equal {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
    width: 100%;
}

.stat-filter-col {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    min-width: 0;
    width: 100%;
}

.stat-filter-col .stat-datepicker-wrap {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 8px;
}

.stat-filter-col .stat-datepicker-box {
    flex: 1;
    min-width: 0;
}

.stat-filter-col .stat-datepicker-box .tui-datepicker-input {
    width: 100% !important;
}

/* 폼 행 라벨의 수직 정렬을 위한 너비 고정 규약 */
.stat-filter-row--full .stat-filter-label,
.stat-filter-col:not(.stat-filter-group--period) .stat-filter-label {
    width: 5.5rem;
    min-width: 5.5rem;
    flex-shrink: 0;
    display: inline-block;
}

.stat-filter-group--period .stat-filter-label {
    width: auto;
    min-width: auto;
    flex-shrink: 0;
}

@media (max-width: 900px) {
    .stat-filter-row--split,
    .stat-filter-row--equal {
        grid-template-columns: 1fr;
        gap: 1.143rem;
    }
}

/* 3. 로그 그리드 장치 및 상태 뱃지 컴포넌트 (피그마 Frame 2085664294) */
.log-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 28px;
    padding: 0 12px;
    border-radius: var(--radius-sm, 6px);
    font-size: var(--fs-b3, 13px);
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
    box-sizing: border-box;
}

/* 장치 뱃지 (DESKTOP, MOBILE 등 연회색 배경 + 다크 텍스트) */
.log-badge--device {
    background-color: var(--gary-200, #E4E4E4);
    color: var(--gary-900, #121212);
    min-width: 76px;
    letter-spacing: -0.01em;
}

/* 상태 뱃지 - 정상/성공 (200대) 연녹색 배경 + 녹색 텍스트 */
.log-badge--success {
    background-color: #E6F7ED;
    color: #1E8E3E;
    font-weight: 600;
    min-width: 52px;
}

/* 상태 뱃지 - 오류/경고 (400, 500대) 연분홍 배경 + 빨간 텍스트 */
.log-badge--danger {
    background-color: var(--danger-bg, #FFE7E7);
    color: var(--danger-text, #E74C3C);
    font-weight: 600;
    min-width: 52px;
}

/* HTTP 메서드 뱃지 (피그마 Frame 2085664294) */
.log-badge--get {
    background-color: #EFF6FF;
    color: #2563EB;
    font-weight: 700;
    min-width: 54px;
}

.log-badge--post {
    background-color: #E6F7ED;
    color: #16A34A;
    font-weight: 700;
    min-width: 54px;
}

.log-badge--put {
    background-color: var(--warning-bg, #FFF3DF);
    color: var(--warning-text, #E67E22);
    font-weight: 700;
    min-width: 54px;
}

.log-badge--delete {
    background-color: var(--danger-bg, #FFE7E7);
    color: var(--danger-text, #E74C3C);
    font-weight: 700;
    min-width: 54px;
}

/* 관리자 활동 로그 작업 유형 뱃지 (피그마 Frame 2085664311) */
.log-badge--create {
    background-color: #E6F7ED;
    color: #16A34A;
    font-weight: 700;
    min-width: 60px;
}

.log-badge--update {
    background-color: #EFF6FF;
    color: #2563EB;
    font-weight: 700;
    min-width: 60px;
}

.log-badge--view {
    background-color: #F4F3FF;
    color: #5925DC;
    font-weight: 700;
    min-width: 60px;
}

/* ==========================================================================
   실시간 접속자 — Figma Frame 2085664316 (인디케이터 박스, 새로고침 버튼, 전용 필터 카드)
   ========================================================================== */
.online-indicator-box {
    display: inline-flex;
    align-items: center;
    gap: 0.714rem;
    height: 34px;
    padding: 0 0.857rem;
    border: 1px solid var(--theme-500, #3586FF);
    border-radius: var(--radius-sm, 6px);
    background-color: var(--theme-50, #F3F8FF);
    margin-left: 1.143rem;
    box-sizing: border-box;
}

.online-indicator-label {
    font-size: var(--fs-b4, 14px);
    font-weight: 500;
    color: var(--theme-500, #3586FF);
    line-height: 1;
    white-space: nowrap;
}

.online-indicator-divider {
    width: 1px;
    height: 14px;
    background-color: var(--theme-300, #B4D3FF);
}

.online-indicator-count {
    font-size: var(--fs-b4, 14px);
    font-weight: 700;
    color: var(--theme-500, #3586FF);
    line-height: 1;
    font-feature-settings: "tnum";
}

.online-refresh-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 36px;
    padding: 0 14px;
    border: 1px solid var(--gary-200, #E4E4E4);
    border-radius: var(--radius-sm, 6px);
    background-color: var(--gary-100, #F2F2F2);
    color: var(--gary-900, #121212);
    font-family: inherit;
    font-size: var(--fs-b4, 14px);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    box-sizing: border-box;
    outline: none;
}

.online-refresh-btn:hover {
    background-color: var(--gary-200, #E4E4E4);
    color: var(--gary-900, #121212);
}

.online-refresh-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

/* 실시간 접속자 화면 전용 필터 카드 패딩 (top/bottom: 20px, left/right: 240px) */
.filter-box.stat-filter-card.stat-filter-card--online,
.stat-filter-card--online {
    padding: 1.429rem 17.143rem !important;
}

@media (max-width: 1400px) {
    .filter-box.stat-filter-card.stat-filter-card--online,
    .stat-filter-card--online {
        padding: 1.429rem 4rem !important;
    }
}

@media (max-width: 768px) {
    .filter-box.stat-filter-card.stat-filter-card--online,
    .stat-filter-card--online {
        padding: 1.429rem 1.5rem !important;
    }
}

/* ==========================================================================
   통계 관리 — Figma Frame 2085664296 (단일 상단 통합 카드 & 실행 로그 콘솔)
   ========================================================================== */

/* 1. 상단 통합 카드 (빠른 작업 버튼 + 수동 집계 필터가 하나의 흰색 배경에 묶임) */
.stat-manage-top-box {
    position: relative !important;
    z-index: 50 !important;
    overflow: visible !important;
    background-color: var(--primary-WT);
    border-radius: var(--radius-lg);
    padding: 1.714rem 2rem 1.429rem 2rem;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
}

/* 상단 빠른 작업 카드 3열 그리드 */
.stat-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.143rem;
    width: 100%;
    margin-bottom: 1.714rem;
}

/* 개별 빠른 작업 카드 (영역 전체가 클릭 가능한 버튼) */
.stat-quick-card {
    background-color: #F8F9FB;
    border: 1px solid var(--gary-100, #F2F2F2);
    border-radius: var(--radius-md, 10px);
    padding: 1.143rem 1.429rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    outline: none;
}

.stat-quick-card:hover {
    background-color: #F0F4F8;
    border-color: var(--gary-300, #CECECE);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.stat-quick-card:active {
    background-color: #E6ECF2;
    transform: scale(0.99);
}

.stat-quick-card__left {
    display: flex;
    align-items: center;
    gap: 1.143rem;
    min-width: 0;
}

.stat-quick-card__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: block;
}

.stat-quick-card__text {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
}

.stat-quick-card__title {
    font-size: var(--fs-b3, 15px);
    font-weight: 700;
    color: var(--gary-900, #121212);
    margin: 0;
    line-height: 1.2;
    white-space: nowrap;
}

.stat-quick-card__desc {
    font-size: 0.857rem;
    color: var(--gary-500, #71717A);
    margin: 0;
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.stat-quick-card__arrow {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    color: var(--gary-400, #A6A6A6);
    transition: transform 0.15s ease, color 0.15s ease;
}

.stat-quick-card:hover .stat-quick-card__arrow {
    transform: translateX(3px);
    color: var(--gary-900, #121212);
}

/* 수동 통계 집계 구분 헤딩 및 라인 */
.stat-manual-heading {
    font-size: var(--fs-b3, 15px);
    font-weight: 700;
    color: var(--gary-900, #121212);
    margin: 0 0 0.714rem 0;
}

.stat-manual-divider {
    width: 100%;
    height: 1px;
    background-color: var(--gary-200, #E4E4E4);
    margin-bottom: 1.429rem;
}


/* 2. 실행 로그 모니터링 카드 (피그마 이미지 규격) */
.stat-log-card {
    background-color: var(--primary-WT);
    border-radius: var(--radius-lg);
    padding: 1.714rem 2rem 2rem 2rem;
    box-sizing: border-box;
    width: 100%;
    display: flex;
    flex-direction: column;
}

.stat-log-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1.143rem;
    margin-bottom: 1.429rem;
    border-bottom: 1px solid var(--gary-200, #E4E4E4);
}

.stat-log-header__title {
    font-size: var(--fs-b2, 16px);
    font-weight: 700;
    color: var(--gary-900, #121212);
    margin: 0;
}

.stat-log-clear-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--gary-200, #E4E4E4);
    border-radius: var(--radius-sm, 6px);
    background-color: var(--primary-WT);
    color: var(--gary-800, #374151);
    font-size: var(--fs-b4, 13px);
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    box-sizing: border-box;
}

.stat-log-clear-btn:hover {
    background-color: var(--gary-50, #F9FAFB);
    color: var(--gary-900, #111827);
    border-color: var(--gary-300, #D1D5DB);
}

.stat-log-clear-btn svg {
    width: 13px;
    height: 13px;
    stroke: currentColor;
}

/* 실행 로그 뷰어 박스 — 피그마 이미지의 밝은 보더 박스 */
.stat-log-viewer {
    background-color: var(--gary-50);
    border: 1px solid var(--gary-200, #E4E4E4);
    border-radius: var(--radius-md, 10px);
    padding: 1.429rem 1.714rem;
    min-height: 440px;
    max-height: 600px;
    overflow-y: auto;
    font-family: inherit;
    font-size: var(--fs-b4, 14px);
    line-height: 1.8;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.stat-log-viewer::-webkit-scrollbar {
    width: 6px;
}

.stat-log-viewer::-webkit-scrollbar-track {
    background: transparent;
}

.stat-log-viewer::-webkit-scrollbar-thumb {
    background: var(--gary-300, #D1D5DB);
    border-radius: 3px;
}

/* 로그 항목 — 피그마 이미지 규격 텍스트 색상 */
.stat-log-entry {
    font-size: var(--fs-b4, 14px);
    line-height: 1.8;
    word-break: break-all;
}

/* 초기 가이드 안내 텍스트: 회색 */
.stat-log-entry--guide {
    color: var(--gary-500, #6B7280);
}

/* 시작 및 일반 안내: 어두운 회색 */
.stat-log-entry--info {
    color: var(--gary-500, #374151);
}

/* 성공/집계 결과: 피그마 이미지와 동일한 밝은 파란색 텍스트 */
.stat-log-entry--success {
    color: var(--theme-500, #3586FF);
    font-weight: 500;
}

/* 에러: 선명한 빨간색 */
.stat-log-entry--error {
    color: var(--danger-primary, #EF4444);
    font-weight: 500;
}

/* 3. 기간별 일괄 집계 모달 (피그마 모던 모달 스타일) */
.stat-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
}

.stat-modal-overlay.is-open {
    opacity: 1;
    visibility: visible;
}

.stat-modal-window {
    background-color: var(--primary-WT);
    border-radius: var(--radius-lg);
    width: 520px;
    max-width: 90vw;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.stat-modal-overlay.is-open .stat-modal-window {
    transform: scale(1);
}

.stat-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.429rem 1.714rem;
    border-bottom: 1px solid var(--gary-200);
}

.stat-modal-title {
    font-size: var(--fs-b1);
    font-weight: 700;
    color: var(--gary-900);
    margin: 0;
}

.stat-modal-close-btn {
    background: transparent;
    border: none;
    cursor: pointer;
    color: var(--gary-400);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    border-radius: var(--radius-xs);
    transition: color 0.15s ease;
}

.stat-modal-close-btn:hover {
    color: var(--gary-900);
}

.stat-modal-body {
    padding: 1.714rem;
    display: flex;
    flex-direction: column;
    gap: 1.286rem;
}

.stat-modal-item {
    display: flex;
    flex-direction: column;
    gap: 0.571rem;
}

.stat-modal-label {
    font-size: var(--fs-b4);
    font-weight: 600;
    color: var(--gary-900);
}

.stat-modal-footer {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.714rem;
    padding: 1.143rem 1.714rem;
    background-color: var(--gary-50);
    border-top: 1px solid var(--gary-200);
}

@media (max-width: 992px) {
    .stat-action-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================================================
   통계 대시보드 — Figma 00대시보드 레이어 규격 스타일
   ========================================================================== */

/* 대시보드 상단 타이틀 & 인라인 알약 사이트 셀렉트 */
.dash-title-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 20px;
}

.dash-title {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--gary-900, #121212);
    margin: 0;
    line-height: 1.2;
}

/* 대시보드 사이트 커스텀 드롭다운 (피그마 이미지 100% 일치) */
.dash-site-dropdown {
    position: relative;
    display: inline-block;
}

.dash-site-trigger {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--gary-100, #F4F4F5);
    border: none;
    border-radius: 9999px;
    padding: 7px 18px;
    font-family: inherit;
    font-size: var(--fs-b3, 0.929rem);
    font-weight: 500;
    color: var(--gary-900, #121212);
    cursor: pointer;
    outline: none;
    transition: none;
    user-select: none;
}

.dash-site-trigger:hover,
.dash-site-dropdown.is-open .dash-site-trigger {
    background-color: var(--gary-100, #F4F4F5);
}

.dash-site-trigger__text {
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.dash-site-trigger__arrow {
    width: 18px;
    height: 18px;
    stroke: var(--gary-900, #121212);
    stroke-width: 2.2;
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.dash-site-dropdown.is-open .dash-site-trigger__arrow {
    transform: rotate(180deg);
}

/* 드롭다운 메뉴 팝업 레이어 */
.dash-site-menu {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    min-width: 220px;
    background-color: var(--primary-WT, #FFFFFF);
    border: 1px solid var(--gary-100, #F2F2F2);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.03);
    padding: 8px 0;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s ease;
    box-sizing: border-box;
    max-height: 320px;
    overflow-y: auto;
}

.dash-site-dropdown.is-open .dash-site-menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.dash-site-menu::-webkit-scrollbar {
    width: 5px;
}

.dash-site-menu::-webkit-scrollbar-thumb {
    background: var(--gary-300, #D1D5DB);
    border-radius: 3px;
}

.dash-site-menu::-webkit-scrollbar-track {
    background: transparent;
}

/* 드롭다운 개별 아이템 */
.dash-site-item {
    padding: 10px 18px;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--gary-600, #52525B);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
    white-space: nowrap;
    user-select: none;
}

.dash-site-item:hover {
    background-color: var(--gary-50, #F9FAFB);
    color: var(--gary-900, #121212);
}

/* 선택된 아이템 (피그마 스크린샷: 진한 볼드 폰트 + 연한 배경) */
.dash-site-item.is-selected {
    font-weight: 700;
    color: var(--gary-900, #121212);
    background-color: var(--gary-50, #F8F9FA);
}

/* 주요 모니터링 지표 대형 통합 카드 */
.dash-monitoring-card {
    background-color: var(--primary-WT);
    border: none;
    border-radius: var(--radius-lg, 16px);
    padding: 24px 28px;
    box-sizing: border-box;
    width: 100%;
}

.dash-monitoring-card__header {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding-bottom: 18px;
    margin-bottom: 22px;
    border-bottom: 1px solid var(--gary-100, #F2F2F2);
}

.dash-monitoring-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--gary-900, #121212);
    margin: 0;
}

.dash-monitoring-card__date {
    font-size: 0.813rem;
    color: var(--gary-500, #71717A);
    font-weight: 400;
}

.dash-monitoring-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
    width: 100%;
}

@media (max-width: 1200px) {
    .dash-monitoring-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media (max-width: 640px) {
    .dash-monitoring-grid {
        grid-template-columns: 1fr;
    }
}

/* 개별 지표 컬럼 */
.dash-metric-col {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.dash-metric-col__label {
    font-size: 0.813rem;
    font-weight: 500;
    color: var(--gary-600, #52525B);
    margin: 0;
}

.dash-metric-col__val-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
}

.dash-metric-col__val {
    font-size: 1.857rem;
    font-weight: 500;
    color: var(--gary-900, #121212);
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-feature-settings: "tnum";
}

/* 전일 대비 증감 뱃지 (스크린샷 규격) */
.dash-diff-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.3;
}

.dash-diff-pill.is-up {
    background-color: #FEE2E2;
    color: #EF4444;
}

.dash-diff-pill.is-down {
    background-color: #EFF6FF;
    color: #3B82F6;
}

.dash-diff-pill.is-same {
    background-color: var(--gary-100, #F4F4F5);
    color: var(--gary-600, #71717A);
}

/* 컬럼 하단 설명 박스 (연회색 둥근 배경) */
.dash-metric-col__desc-box {
    background-color: var(--gary-50);
    border-radius: 6px;
    padding: 8px 12px;
    font-size: 0.75rem;
    color: var(--gary-500, #71717A);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    box-sizing: border-box;
}

/* 2. 하단 2분할 콘텐츠 그리드 (차트 + 인기 페이지) */
.stat-dashboard-content-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 1.143rem;
    width: 100%;
}

@media (max-width: 1024px) {
    .stat-dashboard-content-grid {
        grid-template-columns: 1fr;
    }
}

/* 하단 패널 공통 카드 */
.stat-panel-card {
    background-color: var(--primary-WT);
    border-radius: var(--radius-lg, 12px);
    padding: 1.714rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}

.stat-panel-card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.429rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--gary-100, #F2F2F2);
}

.stat-panel-card__title-wrap {
    display: flex;
    align-items: baseline;
    gap: 12px;
}

.stat-panel-card__title {
    font-size: var(--fs-b2, 1rem);
    font-weight: 700;
    color: var(--gary-900, #121212);
    margin: 0;
}

.stat-panel-card__date {
    font-size: 0.813rem;
    color: var(--gary-500, #71717A);
    font-weight: 400;
}

/* 차트 다운로드 드롭다운 버튼 & 메뉴 (Figma 스크린샷 100% 일치) */
.dash-export-dropdown {
    position: relative;
    display: inline-block;
}

.dash-export-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--gary-100, #F4F4F5);
    border: none;
    border-radius: 6px;
    padding: 6px 14px;
    font-family: inherit;
    font-size: 0.813rem;
    font-weight: 500;
    color: var(--gary-800, #27272A);
    cursor: pointer;
    outline: none;
    transition: background-color 0.15s ease;
    user-select: none;
}

.dash-export-btn:hover {
    background-color: var(--gary-200, #E4E4E4);
}

.dash-export-icon {
    width: 14px;
    height: 14px;
    stroke: var(--gary-800, #27272A);
    flex-shrink: 0;
}

.dash-export-menu {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    min-width: 150px;
    background-color: var(--primary-WT, #FFFFFF);
    border: 1px solid var(--gary-100, #F2F2F2);
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08), 0 4px 10px rgba(0, 0, 0, 0.03);
    padding: 8px 0;
    z-index: 1000;
    display: none;
}

.dash-export-dropdown.is-open .dash-export-menu {
    display: block;
}

.dash-export-item {
    padding: 10px 18px;
    font-size: 0.875rem;
    font-weight: 400;
    color: var(--gary-700, #3F3F46);
    cursor: pointer;
    transition: background-color 0.12s ease, color 0.12s ease;
    white-space: nowrap;
    user-select: none;
}

.dash-export-item:hover {
    background-color: var(--gary-50, #F8F9FA);
    color: var(--gary-900, #121212);
}

.stat-panel-card__body {
    flex: 1;
    min-height: 320px;
    position: relative;
}

/* 인기 페이지 Top 10 목록 */
/* 인기 페이지 Top 10 헤더 (파란색 라운드 바) */
.stat-panel-card__header--blue {
    background-color: var(--theme-500, #3586FF);
    border-radius: 8px;
    padding: 12px 18px;
    border-bottom: none;
    margin-bottom: 6px;
}

.stat-panel-card__header--blue .stat-panel-card__title {
    color: var(--primary-WT, #FFFFFF);
    font-size: 1rem;
    font-weight: 700;
}

/* 인기 페이지 Top 10 목록 */
.stat-rank-list {
    display: flex;
    flex-direction: column;
}

.stat-rank-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 11px 4px;
    border-bottom: 1px solid var(--gary-100, #F2F2F2);
    gap: 0.857rem;
}

.stat-rank-item:last-child {
    border-bottom: none;
}

.stat-rank-item__left {
    display: flex;
    align-items: center;
    gap: 12px;
    min-width: 0;
    flex: 1;
}

/* 모든 순위 뱃지 동일 색상 (연한 하늘색 배경 + 파란 글자색) */
.stat-rank-badge {
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.813rem;
    font-weight: 700;
    flex-shrink: 0;
    background-color: var(--theme-100, #DEEBFF);
    color: var(--theme-500, #3586FF);
}

.stat-rank-title {
    font-size: var(--fs-b4, 0.875rem);
    color: var(--gary-600, #52525B);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 400;
    transition: color 0.15s ease;
}

/* 마우스 hover 시 url 아래에 밑줄이 생기며 폰트 색상이 진해짐 */
.stat-rank-title:hover {
    color: var(--gary-900, #121212);
    text-decoration: underline;
}

.stat-rank-views {
    font-size: var(--fs-b4, 0.875rem);
    font-weight: 600;
    color: var(--gary-900, #121212);
    flex-shrink: 0;
    text-align: right;
    font-feature-settings: "tnum";
}

.stat-rank-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    color: var(--gary-400, #A1A1AA);
    font-size: var(--fs-b4, 0.875rem);
}

/* 대시보드 최근 7일 방문자 추이 차트 툴팁 커스텀 (Figma 다크 툴팁 규격) */
#visitorChart .toastui-chart-tooltip-container {
    transition: transform 0.12s cubic-bezier(0.2, 0, 0, 1) !important;
    pointer-events: none !important;
}

#visitorChart .toastui-chart-tooltip {
    background: #181A20 !important;
    border-radius: 8px !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    color: var(--primary-WT, #ffffff) !important;
    padding: 2px 0 !important;
}

#visitorChart .toastui-chart-tooltip-category {
    border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: var(--primary-WT, #ffffff) !important;
    font-size: 0.8125rem !important;
    font-weight: 600 !important;
    padding: 8px 14px !important;
    letter-spacing: -0.01em;
}

#visitorChart .toastui-chart-tooltip-series-wrapper {
    padding: 8px 14px !important;
}

#visitorChart .toastui-chart-tooltip-series {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    font-size: 0.8125rem !important;
    gap: 16px !important;
}

#visitorChart .toastui-chart-tooltip-series .toastui-chart-icon {
    border-radius: 50% !important;
    background-color: #2F80ED !important;
    width: 6px !important;
    height: 6px !important;
    margin-right: 6px !important;
    display: inline-block !important;
}

#visitorChart .toastui-chart-series-name .toastui-chart-name {
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500 !important;
}

#visitorChart .toastui-chart-series-value {
    color: var(--primary-WT, #ffffff) !important;
    font-weight: 700 !important;
    margin-left: auto !important;
}