/* ==========================================================================
   NTEST7 · 관리자/앱 콘솔 테마 (메인 B 디자인 토큰 기반)
   Bootstrap 은 유지하되 팔레트·타이포·컴포넌트를 메인 B로 통일.
   전제: variables.css(디자인 토큰) 가 이 파일보다 먼저 로드됨.
   ========================================================================== */

:root {
    --admin-topbar-h: 3.5rem;
    --admin-sidebar-w: 220px;
    --admin-ink: var(--color-primary-950);
    --admin-line: var(--color-border);
    --admin-muted: var(--color-text-muted);

    /* ---- Bootstrap 테마 변수 오버라이드 → 유틸리티/링크/폼이 메인 B 팔레트를 따름 ---- */
    --bs-body-font-family: var(--font-sans);
    --bs-body-bg: var(--color-background);
    --bs-body-color: var(--color-text);
    --bs-emphasis-color: var(--color-text);
    --bs-secondary-color: var(--color-text-muted);
    --bs-tertiary-color: var(--color-text-muted);
    --bs-border-color: var(--color-border);

    --bs-primary: #087f6d;
    --bs-primary-rgb: 8, 127, 109;
    --bs-success: #12643a;
    --bs-success-rgb: 18, 100, 58;
    --bs-danger: #b44432;
    --bs-danger-rgb: 180, 68, 50;
    --bs-warning: #925314;
    --bs-warning-rgb: 146, 83, 20;
    --bs-info: #245c8e;
    --bs-info-rgb: 36, 92, 142;
    --bs-secondary: #475961;
    --bs-secondary-rgb: 71, 89, 97;

    --bs-link-color: #066757;
    --bs-link-color-rgb: 6, 103, 87;
    --bs-link-hover-color: #055649;
    --bs-border-radius: var(--radius-sm);
    --bs-border-radius-sm: var(--radius-xs);
}

/* Pretendard 로드 후 기본 글꼴 통일 */
.admin-body {
    background: var(--color-background);
    color: var(--color-text);
    font-family: var(--font-sans);
    font-size: 14px;
}

/* ---- 버튼: 변형별 CSS 변수 재지정 (Bootstrap 5.3 런타임 소비) ---- */
.btn-primary {
    --bs-btn-bg: var(--color-accent-600);
    --bs-btn-border-color: var(--color-accent-600);
    --bs-btn-hover-bg: var(--color-accent-700);
    --bs-btn-hover-border-color: var(--color-accent-700);
    --bs-btn-active-bg: var(--color-accent-800);
    --bs-btn-active-border-color: var(--color-accent-800);
    --bs-btn-disabled-bg: var(--color-accent-600);
    --bs-btn-disabled-border-color: var(--color-accent-600);
}

.btn-success {
    --bs-btn-bg: var(--color-success-700);
    --bs-btn-border-color: var(--color-success-700);
    --bs-btn-hover-bg: #0f5231;
    --bs-btn-hover-border-color: #0f5231;
    --bs-btn-active-bg: #0f5231;
}

.btn-danger {
    --bs-btn-bg: var(--color-danger-600);
    --bs-btn-border-color: var(--color-danger-600);
    --bs-btn-hover-bg: var(--color-danger-700);
    --bs-btn-hover-border-color: var(--color-danger-700);
    --bs-btn-active-bg: var(--color-danger-700);
}

.btn-outline-primary {
    --bs-btn-color: var(--color-accent-700);
    --bs-btn-border-color: var(--color-accent-600);
    --bs-btn-hover-bg: var(--color-accent-600);
    --bs-btn-hover-border-color: var(--color-accent-600);
    --bs-btn-active-bg: var(--color-accent-700);
    --bs-btn-active-border-color: var(--color-accent-700);
}

.btn-outline-secondary {
    --bs-btn-color: var(--color-text-secondary);
    --bs-btn-border-color: var(--color-border-strong);
    --bs-btn-hover-bg: var(--color-primary-50);
    --bs-btn-hover-color: var(--color-primary-950);
    --bs-btn-hover-border-color: var(--color-primary-700);
    --bs-btn-active-bg: var(--color-surface-muted);
    --bs-btn-active-color: var(--color-primary-950);
}

.btn-outline-danger {
    --bs-btn-color: var(--color-danger-700);
    --bs-btn-border-color: var(--color-danger-600);
    --bs-btn-hover-bg: var(--color-danger-600);
    --bs-btn-hover-border-color: var(--color-danger-600);
    --bs-btn-active-bg: var(--color-danger-700);
}

.btn-outline-success {
    --bs-btn-color: var(--color-success-700);
    --bs-btn-border-color: var(--color-success-700);
    --bs-btn-hover-bg: var(--color-success-700);
    --bs-btn-hover-border-color: var(--color-success-700);
}

.btn-outline-info {
    --bs-btn-color: var(--color-info-700);
    --bs-btn-border-color: var(--color-info-700);
    --bs-btn-hover-bg: var(--color-info-700);
    --bs-btn-hover-border-color: var(--color-info-700);
}

.btn-link {
    --bs-btn-color: var(--color-accent-700);
    --bs-btn-hover-color: var(--color-accent-800);
}

.btn {
    --bs-btn-focus-box-shadow: var(--shadow-focus);
    font-weight: 640;
}

/* ---- 폼 포커스 링 ---- */
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    border-color: var(--color-accent-500);
    box-shadow: var(--shadow-focus);
}

.form-check-input:checked {
    background-color: var(--color-accent-600);
    border-color: var(--color-accent-600);
}

/* ---- 뱃지: bg-* 조합을 소프트 톤으로 (공개 사이트 .badge--* 와 통일) ---- */
.badge.bg-success { background: var(--color-success-100) !important; color: var(--color-success-700) !important; }
.badge.bg-danger  { background: var(--color-danger-100)  !important; color: var(--color-danger-700)  !important; }
.badge.bg-warning { background: var(--color-warning-100) !important; color: var(--color-warning-700) !important; }
.badge.bg-info    { background: var(--color-info-100)    !important; color: var(--color-info-700)    !important; }
.badge.bg-secondary { background: var(--color-surface-muted) !important; color: var(--color-text-secondary) !important; }
.badge.bg-primary { background: var(--color-accent-100) !important; color: var(--color-accent-800) !important; }
.badge { font-weight: 700; letter-spacing: -0.01em; }

/* ---- 알림 ---- */
.alert { border-radius: var(--radius-md); border-left-width: 4px; }
.alert-success { --bs-alert-bg: var(--color-success-100); --bs-alert-color: var(--color-success-700); --bs-alert-border-color: var(--color-success-700); }
.alert-danger  { --bs-alert-bg: var(--color-danger-100);  --bs-alert-color: var(--color-danger-700);  --bs-alert-border-color: var(--color-danger-600); }
.alert-warning { --bs-alert-bg: var(--color-warning-100); --bs-alert-color: var(--color-warning-700); --bs-alert-border-color: var(--color-warning-700); }
.alert-info    { --bs-alert-bg: var(--color-info-100);    --bs-alert-color: var(--color-info-700);    --bs-alert-border-color: var(--color-info-700); }
.alert-light   { --bs-alert-bg: var(--color-surface);     --bs-alert-color: var(--color-text-secondary); --bs-alert-border-color: var(--color-border); }

/* 상단바 (다크) 위의 아웃라인-라이트 버튼 유지 */
.admin-topbar .btn-outline-light {
    --bs-btn-color: #dce8ec;
    --bs-btn-border-color: rgba(255, 255, 255, 0.35);
    --bs-btn-hover-bg: rgba(255, 255, 255, 0.12);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-border-color: rgba(255, 255, 255, 0.7);
}

/* ==========================================================================
   콘솔 셸 — 컨트롤 타워 톤
   ========================================================================== */

/* 상단바 */
.admin-topbar {
    position: fixed;
    inset: 0 0 auto 0;
    height: var(--admin-topbar-h);
    background:
        radial-gradient(circle at 88% 20%, rgba(17, 151, 131, 0.18), transparent 18rem),
        linear-gradient(135deg, #071f2a 0%, #0b2b3a 60%, #0d394b 100%);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    z-index: 1030;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-brand {
    display: inline-flex;
    align-items: center;
    gap: 0.55rem;
    color: #fff;
    font-weight: 800;
    font-size: 16px;
    text-decoration: none;
    letter-spacing: -0.03em;
}

.admin-brand span { font-weight: 500; opacity: 0.72; }

/* 앱(조직 운영) 콘솔 — 티일 강조 변형으로 관리자와 구분 */
.admin-topbar--app {
    background:
        radial-gradient(circle at 12% 30%, rgba(17, 151, 131, 0.28), transparent 20rem),
        linear-gradient(120deg, #055649 0%, #0b2b3a 55%, #071f2a 100%);
}

/* App·Admin 콘솔 모두 동일한 소프트 활성 스타일 사용(위 .nav-link.active 규칙) */

.admin-brand .brand__mark {
    display: grid;
    width: 1.85rem;
    height: 1.85rem;
    place-items: center;
    border-radius: 0.55rem;
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-family: var(--font-mono);
    font-size: 0.72rem;
    font-weight: 800;
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.16);
    opacity: 1;
}

.admin-brand .brand__text { font-weight: 800; opacity: 1; }
.admin-brand .brand__logo { max-height: 1.85rem; width: auto; }

.admin-topbar-right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.admin-user {
    font-size: 13px;
    opacity: 0.85;
    color: #fff;
    text-decoration: none;
}

.admin-user:hover { opacity: 1; color: #fff; text-decoration: underline; }

/* 사이드바 + 본문 */
.admin-shell {
    display: flex;
    padding-top: var(--admin-topbar-h);
    min-height: 100vh;
}

.admin-sidebar {
    width: var(--admin-sidebar-w);
    flex: 0 0 var(--admin-sidebar-w);
    background: var(--color-surface);
    border-right: 1px solid var(--admin-line);
    padding: 14px 10px 40px;
    position: sticky;
    top: var(--admin-topbar-h);
    align-self: flex-start;
    max-height: calc(100vh - var(--admin-topbar-h));
    overflow-y: auto;
}

/* 대분류(섹션) — 구분선 + 소형 라벨로 중분류와 명확히 분리 */
.admin-nav-group {
    font-size: 11px;
    font-weight: 700;
    color: var(--admin-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-top: 14px;
    padding: 12px 12px 6px;
    border-top: 1px solid var(--admin-line);
}
.admin-nav-group:first-child {
    margin-top: 0;
    padding-top: 2px;
    border-top: none;
}

/* 중분류(메뉴 항목) — 아이콘 + 넉넉한 여백 */
.admin-sidebar .nav-link {
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--color-text-secondary);
    padding: 9px 12px;
    margin: 1px 0;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 500;
    line-height: 1.2;
    position: relative;
    transition: background var(--transition-fast), color var(--transition-fast);
}

.admin-sidebar .nav-link > i {
    font-size: 16px;
    width: 18px;
    text-align: center;
    flex: 0 0 auto;
    opacity: 0.7;
}

.admin-sidebar .nav-link:hover {
    background: var(--color-surface-muted);
    color: var(--color-text);
}
.admin-sidebar .nav-link:hover > i { opacity: 1; }

/* 활성 — 소프트 틴트 + 좌측 액센트 바(요즘 트렌드) */
.admin-sidebar .nav-link.active {
    background: var(--color-accent-50);
    color: var(--color-accent-700);
    font-weight: 700;
}
.admin-sidebar .nav-link.active > i { opacity: 1; color: var(--color-accent-600); }
.admin-sidebar .nav-link.active::before {
    content: "";
    position: absolute;
    left: 0;
    top: 6px;
    bottom: 6px;
    width: 3px;
    border-radius: 0 3px 3px 0;
    background: var(--color-accent-600);
}

/* 리치에디터·미리보기 이미지 반응형(문항·본문 이미지) */
.ql-editor img { max-width: 100%; height: auto; }
.table td img { max-width: 160px; height: auto; vertical-align: middle; }

.admin-main {
    flex: 1 1 auto;
    background: #f4f5f9;          /* 본문 배경 한 톤 낮춰 흰 카드가 떠 보이게 (2026-08-26) */
    padding: 24px 28px 64px;
    min-width: 0; /* 넓은 표가 부모를 밀어내지 않게 */
}

/* 페이지 헤더 */
.page-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.page-head h1 {
    font-size: 21px;
    font-weight: 780;
    letter-spacing: -0.03em;
    margin: 0;
}

.page-head .subtitle {
    color: var(--admin-muted);
    font-size: 13px;
    margin: 3px 0 0;
}

/* 카드 */
.card {
    border-color: var(--admin-line);
    border-radius: var(--radius-lg);
    box-shadow: 0 1px 2px rgba(20,20,43,.05);
    --bs-card-border-color: var(--admin-line);
    --bs-card-border-radius: var(--radius-lg);
}

.card-body { padding: 18px; }

/* 표 */
.table-wrap { overflow-x: auto; }

.table {
    margin-bottom: 0;
    font-size: 13.5px;
    vertical-align: middle;
    --bs-table-border-color: var(--color-border);
}

.table > thead { background: var(--color-surface-muted); }

.table > thead th {
    font-size: 12.5px;
    font-weight: 700;
    color: var(--admin-muted);
    white-space: nowrap;
    border-bottom-width: 1px;
    letter-spacing: 0.01em;
}

.table td .title-link {
    font-weight: 650;
    color: var(--admin-ink);
    text-decoration: none;
}

.table td .title-link:hover { color: var(--color-accent-700); text-decoration: underline; }

/* 통계 타일 */
.stat-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 12px;
    margin-bottom: 22px;
}

.stat-tile {
    background: var(--color-surface);
    border: 1px solid var(--admin-line);
    border-radius: var(--radius-md);
    padding: 16px 18px;
    box-shadow: var(--shadow-xs);
}

.stat-tile .label {
    font-size: 12.5px;
    color: var(--admin-muted);
    margin-bottom: 6px;
}

.stat-tile .value {
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}

.stat-tile .value small { font-size: 13px; font-weight: 500; color: var(--admin-muted); }

/* 폼 */
.form-label { font-size: 13px; font-weight: 650; margin-bottom: 5px; }
.form-text { font-size: 12px; }

.form-section {
    border-top: 1px solid var(--admin-line);
    margin-top: 22px;
    padding-top: 18px;
}

.form-section:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }

.form-section h2 { font-size: 14px; font-weight: 780; margin-bottom: 12px; }

.form-actions {
    display: flex;
    gap: 8px;
    border-top: 1px solid var(--admin-line);
    margin-top: 22px;
    padding-top: 18px;
}

/* 미디어 그리드 */
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.media-card {
    border: 1px solid var(--admin-line);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    overflow: hidden;
}

.media-thumb {
    aspect-ratio: 4 / 3;
    background: var(--color-surface-muted);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.media-thumb img { width: 100%; height: 100%; object-fit: cover; }
.media-thumb .ext { font-weight: 800; color: var(--admin-muted); font-size: 18px; }

.media-meta { padding: 9px 11px; font-size: 12px; }

.media-meta .name {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: 650;
}

.media-meta .sub { color: var(--admin-muted); }

/* 메뉴 트리 */
.menu-tree { list-style: none; padding-left: 0; margin: 0; }

.menu-tree ul {
    list-style: none;
    padding-left: 22px;
    margin: 0;
    border-left: 1px dashed var(--admin-line);
}

.menu-node {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 11px;
    border: 1px solid var(--admin-line);
    border-radius: var(--radius-sm);
    background: var(--color-surface);
    margin: 6px 0;
}

.menu-node .grow { flex: 1 1 auto; min-width: 0; }
.menu-node .url { color: var(--admin-muted); font-size: 12px; }

.empty-state { text-align: center; padding: 44px 16px; color: var(--admin-muted); }

@media (max-width: 860px) {
    .admin-shell { flex-direction: column; }

    .admin-sidebar {
        width: 100%;
        flex-basis: auto;
        position: static;
        max-height: none;
        border-right: 0;
        border-bottom: 1px solid var(--admin-line);
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .admin-nav-group { width: 100%; padding-bottom: 0; }
}


/* ==========================================================================
   NTEST7 브랜드 퍼플 리컬러 (색만 변경 · 2026-08-13 · 차분한 톤 확정)
   - 콘솔 전용(admin.css)에만 적용 → variables.css/공개 사이트 영향 없음.
   - 딥틸(메인 B) → 채도 낮춘 인디고-퍼플(눈 피로 완화). 브랜드는 퍼플로 통일.
   - 상태색·골드·중립색·레이아웃·타이포는 그대로. 파일 맨 끝이라 위 원본을 덮어씀.
   ========================================================================== */
:root {
    --color-accent-800: #3f3b73;
    --color-accent-700: #4d488f;
    --color-accent-600: #625cae;
    --color-accent-500: #7d78bf;
    --color-accent-200: #cbc9e4;
    --color-accent-100: #e8e7f2;
    --color-accent-50:  #f4f3f9;

    --color-primary-950: #2c2a4a;
    --color-primary-900: #343162;
    --color-primary-800: #3f3b73;
    --color-primary-700: #4a4688;
    --color-primary-100: #e0dfec;
    --color-primary-50:  #f3f2f8;

    --bs-primary: #625cae;
    --bs-primary-rgb: 98, 92, 174;
    --bs-link-color: #4d488f;
    --bs-link-color-rgb: 77, 72, 143;
    --bs-link-hover-color: #3f3b73;

    --shadow-focus: 0 0 0 4px rgba(98, 92, 174, 0.24);
}

/* 상단바 — 채도 낮춘 차분한 인디고 그라데이션 */
.admin-topbar {
    background:
        radial-gradient(circle at 88% 18%, rgba(120, 116, 170, 0.30), transparent 18rem),
        linear-gradient(135deg, #2f2c52 0%, #423e78 55%, #565196 100%);
}

.admin-topbar--app {
    background:
        radial-gradient(circle at 12% 30%, rgba(110, 104, 168, 0.32), transparent 20rem),
        linear-gradient(120deg, #4a4688 0%, #363258 55%, #2f2c52 100%);
}

/* ---- 체크박스·라디오 선명하게 (대표 요청 2026-08-11) ---- */
/* 기본(미체크) 상태 테두리가 흐려 잘 안 보이던 문제 → 진하고 두껍게 + 살짝 크게 */
.form-check-input {
    width: 1.15em;
    height: 1.15em;
    border-width: 2px;
    border-color: #8a97a4;
}
.form-check-input:not(:checked):hover {
    border-color: var(--color-accent-500);
}


/* 화면 사용법 — 타이틀 우측에 크고 눈에 띄는 보라색 버튼(전 화면 일률). 열면 아래로 패널.
   한 곳(_ScreenHelp.cshtml + 이 CSS) 수정으로 전 화면 일괄 적용.
   대표 확정 2026-08-19(2): 우하단 FAB → 우측 상단·큰 글씨·보라색·식별 강화로 변경. */
/* ── 업로드·처리 중 로딩 덮개 (대표 요청 2026-08-25) ──
   파일 올리기는 AI가 읽으면 수십 초 걸린다. 아무 표시가 없으면 멈춘 줄 알고 다시 누르게 되고,
   그러면 같은 파일이 두 번 올라간다. 화면을 덮어 '진행 중'을 알리고 재클릭도 함께 막는다. */
.n7-busy {
    position: fixed; inset: 0; z-index: 2000;
    background: rgba(255, 255, 255, .72); backdrop-filter: blur(2px);
    display: flex; align-items: center; justify-content: center;
}
.n7-busy__box {
    background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
    box-shadow: 0 18px 44px rgba(20, 20, 32, .18);
    padding: 22px 28px; text-align: center; min-width: 260px; max-width: 90vw;
}
.n7-busy__spin {
    width: 34px; height: 34px; margin: 0 auto 12px;
    border: 3px solid #e6e4fa; border-top-color: #5E56E7; border-radius: 50%;
    animation: n7spin .8s linear infinite;
}
@keyframes n7spin { to { transform: rotate(360deg); } }
.n7-busy__msg { font-weight: 700; color: #14141f; }
.n7-busy__sub { font-size: .85rem; color: #6b6c78; margin-top: 4px; }
/* 진행 막대 — 남은 시간을 알 수 없으니 '움직이고 있다'만 보여 준다(불확정 진행) */
.n7-busy__bar { height: 4px; border-radius: 4px; background: #eeedfc; overflow: hidden; margin-top: 14px; }
.n7-busy__bar > i { display: block; height: 100%; width: 40%; border-radius: 4px; background: #5E56E7; animation: n7slide 1.1s ease-in-out infinite; }
@keyframes n7slide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
@media (prefers-reduced-motion: reduce) {
    .n7-busy__spin, .n7-busy__bar > i { animation: none; }
}

.screen-help { float: right; position: relative; margin: 0 0 8px 16px; z-index: 20; }
.screen-help > summary.screen-help__chip {
    list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 700; color: #4d488f;
    background: #fff; border: 1px solid #d6d4ea;
    padding: 6px 13px; border-radius: 999px; white-space: nowrap; user-select: none;
    box-shadow: 0 1px 2px rgba(20,20,43,.05);
}
.screen-help > summary.screen-help__chip:hover { background: #eeedf8; }
.screen-help > summary.screen-help__chip::-webkit-details-marker { display: none; }
.screen-help > summary.screen-help__chip::marker { content: ""; }
.screen-help[open] > summary.screen-help__chip { background: #eeedf8; }
.screen-help__panel {
    position: absolute; right: 0; top: calc(100% + 8px); width: min(440px, 86vw);
    background: #fff; border: 1px solid #e5e7eb; border-left: 4px solid #8b5cf6;
    border-radius: 10px; box-shadow: 0 12px 34px rgba(0,0,0,.18);
    padding: 12px 14px; font-size: 13px; color: #4b5563; line-height: 1.6; z-index: 40; text-align: left;
}
.screen-help__title { font-weight: 700; color: #4c1d95; margin-bottom: 6px; }
.screen-help__panel strong { color: #312e81; }
@media (max-width: 640px) { .screen-help { float: none; display: block; margin: 0 0 10px; } }
/* ── 사용법 칩 위치 = "페이지 제목 바로 옆" (대표 2026-08-26) ─────────────────
   이전: 제목 블록이 남는 폭을 다 차지해 칩이 화면 오른쪽 끝에 붙어 있었다(멀어서 누르기 불편).
   지금: 제목 블록(<div>)을 display:contents 로 풀어 h1·부제를 헤더의 직접 항목으로 만들고,
         order 로 [제목][사용법 칩] ─ (남는 폭) ─ [화면 액션 버튼]  /  다음 줄에 [부제] 를 만든다.
   → 부제가 아무리 길어도 칩은 항상 제목 바로 오른쪽. 마크업(각 화면 .cshtml)은 손대지 않는다. */
.page-head:has(.screen-help) {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-start;
    column-gap: 12px;
    row-gap: 4px;
}
/* 제목 블록의 박스를 없애 h1·부제를 헤더의 직접 항목으로 올린다 */
.page-head:has(.screen-help) > :first-child { display: contents; }
.page-head:has(.screen-help) > * { order: 3; }              /* 화면별 액션 버튼 = 오른쪽 끝 */
.page-head:has(.screen-help) h1 { order: 1; }               /* 제목 = 맨 앞 */
.page-head:has(.screen-help) .screen-help {                 /* 사용법 칩 = 제목 바로 옆 */
    order: 2; float: none; position: relative;
    margin: 0 auto 0 4px;                                   /* 오른쪽 auto → 액션 버튼은 계속 맨 오른쪽 */
}
.page-head:has(.screen-help) .subtitle {                    /* 부제 = 아랫줄 전체 폭 */
    order: 4; flex: 0 0 100%; margin: 2px 0 0;
}
/* 형제 버튼의 부트스트랩 ms-auto(margin-left:auto)는 무력화 — 칩의 margin-right:auto 와 남는 폭을
   나눠 먹어 칩이 제목에서 떨어진다. 버튼은 칩의 auto 여백만으로 이미 오른쪽 끝에 간다. */
.page-head:has(.screen-help) > .ms-auto { margin-left: 0 !important; }
/* float 해제용 빈 div — 헤더 안에서는 쓸모없이 12px 간격만 만든다 */
.page-head:has(.screen-help) > .screen-help__clear { display: none; }
.page-head .screen-help__panel { right: auto; left: 0; }    /* 패널은 칩 기준 왼쪽 정렬로 펼침 */
@media (max-width: 640px) {
    .page-head:has(.screen-help) .screen-help { display: inline-block; margin: 0 auto 0 4px; }
}


/* [F-034] 파일 업로드 드래그앤드롭 공통(_DropZone.cshtml + js/bulk.js) */
.dropzone {
    display: flex; align-items: center; gap: .9rem;
    border: 2px dashed var(--bs-border-color, #ced4da); border-radius: .6rem;
    padding: 1rem 1.1rem; cursor: pointer; background: var(--bs-body-bg, #fff);
    transition: border-color .12s, background-color .12s;
}
.dropzone:hover { border-color: var(--bs-primary, #625cae); }
.dropzone.is-over { border-color: var(--bs-primary, #625cae); background: rgba(98, 92, 174, .06); }
.dropzone-icon { font-size: 1.7rem; color: var(--bs-primary, #625cae); line-height: 1; }
.dropzone-text { line-height: 1.35; }

/* ── 문제은행 다듬기 (대표 확정 2026-08-26 · 시안 문제은행_시안_v3) ────────────
   색 규칙 4가지: 보라=누를 것 · 주황=오늘 처리할 것 · 빨강=위험 · 초록=정상 */

/* [대표 2026-09-02] 0건 칩 = 테두리 없는 '연한 글자'(박스 X). 있는 칩만 박스 → 들쭉날쭉("미완성 박스") 제거, 통일감. */
.qchip-zero { color: #b6b4c6 !important; border-color: transparent !important; background: transparent !important; box-shadow: none !important; pointer-events: none; }
.qchip-zero .badge { color: #b6b4c6 !important; background: transparent !important; padding-left: 1px; padding-right: 1px; }

/* 일괄 작업 막대 — 체크한 것이 1개 이상일 때만 나타난다 (문제은행 D-3 → 5차 B-1에서 대상자 관리와 공용) */
.n7-bulkbar { background: #625cae; color: #fff; border-radius: 10px; padding: 8px 12px; }
.n7-bulkbar .btn-light { --bs-btn-color: #c0392f; font-weight: 600; }

/* D-5 문항 이미지 썸네일 고정 — 원본 크기로 들어가 행 높이가 들쭉날쭉했다 */
.qb-table td img { width: 56px; height: 42px; object-fit: cover; border-radius: 7px; border: 1px solid #e6e6ef; }

/* D-6 미분류 안내 = 주황(오늘 처리할 것) */
.qb-hint-warn { background: #fdf4e4; color: #a86a08; border: 1px solid #f1dfbe; border-radius: 8px; padding: 7px 11px; }

/* ── 5차-4. 상태 배지 색 통일 (대표 확정 2026-08-28 · 지시서 4차-4) ─────────────
   문제: 같은 뜻의 상태가 화면마다 다른 색·다른 모양으로 나왔다.
         진한 solid(bg-success) 와 연한 subtle(bg-success-subtle) 이 섞여 있고,
         부트스트랩 기본 노랑(bg-warning)·하늘색(bg-info)이 4색 규칙 밖이었다.
   방식: 뷰 84개를 고치지 않고 여기 한 곳에서 배지 겉모습만 4색 규칙으로 맞춘다.
         뜻(어떤 상태에 어떤 색을 쓸지)은 각 화면이 이미 정한 대로 두고, 색값만 통일.
   규칙: 보라=진행/완료 · 주황=오늘 처리할 것 · 빨강=위험/마감 · 초록=정상/제출 · 회색=해당없음
   ※ text-dark·text-*-emphasis 같은 부트스트랩 글자색 유틸이 !important 라 여기도 !important 필요.
   ※ bg-light(개수 세는 칩)는 상태 배지가 아니므로 건드리지 않는다. */
.badge.bg-primary, .badge.bg-primary-subtle,
.badge.bg-info,    .badge.bg-info-subtle,
.badge.bg-warning, .badge.bg-warning-subtle,
.badge.bg-danger,  .badge.bg-danger-subtle,
.badge.bg-success, .badge.bg-success-subtle,
.badge.bg-secondary {
    font-weight: 600;
    border: 1px solid transparent;
}
.badge.bg-primary, .badge.bg-primary-subtle,
.badge.bg-info,    .badge.bg-info-subtle {
    background-color: #eeedf8 !important; color: #4d488f !important; border-color: #d6d4ea !important;
}
.badge.bg-warning, .badge.bg-warning-subtle {
    background-color: #fdf4e4 !important; color: #a86a08 !important; border-color: #f1dfbe !important;
}
.badge.bg-danger, .badge.bg-danger-subtle {
    background-color: #fdeceb !important; color: #c0392f !important; border-color: #f4cfcc !important;
}
.badge.bg-success, .badge.bg-success-subtle {
    background-color: #e9f5ee !important; color: #16794f !important; border-color: #c9e4d6 !important;
}
.badge.bg-secondary {
    background-color: #f1f1f5 !important; color: #6f6d80 !important; border-color: #e2e1ea !important;
}

/* 안내 배너(설명 한 줄) = 연보라. 부트스트랩 기본 하늘색(bg-info-subtle)이 4색 규칙 밖이었다. */
.n7-hint { background: #f6f5fb; border-color: #e0dfef; color: #4d488f; }

/* 5차 B-2(2026-08-28): 앞 단계를 안 고르면 그 아래 목록을 잠근다 — 켜져 있는 것처럼 보이던 문제.
   (지금은 응시자 등록의 대상자 명단. 같은 상황이 또 나오면 이 클래스를 그대로 쓴다.) */
.examinee-lock { opacity: .5; pointer-events: none; filter: saturate(.4); }

/* 5차 B-4(2026-08-28): 화면에서 제일 중요한 숫자는 본문보다 확실히 커야 한다(공통 점검 3번).
   화면마다 fs-3·fs-4 로 제각각이던 것을 한 크기(30px)로 맞추고, 자릿수가 흔들리지 않게 tabular-nums.
   0인 값은 회색 — "진행 중 0"이 초록이라 뭔가 있는 것처럼 보이던 문제. */
.n7-stat__label { color: #6f6d80; font-size: .85rem; }
.n7-stat__num { font-size: 30px; font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums; }
.n7-stat__num.is-zero { color: #9795ad !important; }

/* 5차 B-4(2026-08-28): 글자색 유틸도 4색 규칙으로.
   특히 부트스트랩 기본 text-warning(#ffc107 노랑)은 흰 바탕에서 거의 안 읽힙니다.
   배지와 같은 색값을 써서 "같은 뜻 = 같은 색"이 화면 어디서나 지켜지게 합니다. */
.text-warning { color: #a86a08 !important; }
.text-danger  { color: #c0392f !important; }
.text-success { color: #16794f !important; }
.text-info    { color: #4d488f !important; }
.text-primary { color: #4d488f !important; }

/* 5차 C-1(2026-08-28): 점수 분포 막대그래프 — 60점 경계에 세로 점선, 범례 색칩 */
.n7-dist { position: relative; }
.n7-dist__cut { border-left: 2px dashed #a09dbb; }
.n7-dist__cut::before { content: "60점"; position: absolute; top: -2px; margin-left: 4px; font-size: 11px; color: #6f6d80; }
.n7-dist__key { display: inline-block; width: 11px; height: 11px; border-radius: 3px; vertical-align: -1px; margin-right: 5px; }

/* 5차 C-6(2026-08-28): 목록에서 지금 보고 있는 줄 — 회색(table-active)이라 눈에 안 띄었다 → 연보라 + 왼쪽 보라 띠 */
tr.n7-row-sel > * { background-color: #f4f3fb !important; }
tr.n7-row-sel > *:first-child { box-shadow: inset 3px 0 0 #625cae; }

/* ── 5차 K(2026-08-28): 배경색 통일 ─────────────────────────────────────────
   대표 지적 "화면마다 배경 컬러가 다르다" — 실제로 회색 계열이 7가지로 갈라져 있었습니다.
   원인은 지시서에 **회색 표준값이 없었던 것**(글자색 4개만 정해져 있었음).
   앞으로 배경은 아래 변수만 씁니다. */
:root {
    --bg-page:   #f4f5f9;   /* 본문 배경 (.admin-main) */
    --bg-card:   #ffffff;   /* 카드 */
    --bg-soft:   #fafafc;   /* 카드 안 옅은 구역 · 표 머리글 · 빈 상태 */
    --bg-pp:     #eeedf8;   /* 보라 틴트 — 누를 것 · 진행 중 · 선택됨 */
    --bg-warn:   #fdf4e4;   /* 주황 틴트 — 오늘 처리할 일 */
    --bg-bad:    #fdeceb;   /* 빨강 틴트 — 위험 · 마감 */
    --bg-ok:     #e9f5ee;   /* 초록 틴트 — 정상 · 완료 · 합격 */
    --line:      #e6e6ef;   /* 카드 테두리 */
    --line-soft: #f1f1f7;   /* 표 행 구분선 */
}
/* 부트스트랩 기본 회색(#f8f9fa)이 약 40곳에 쓰여 있어, 뷰를 고치지 않고 여기서 한 번에 맞춥니다. */
.admin-body .bg-light { background-color: var(--bg-soft) !important; }

/* 5차 J-6(2026-08-28): 목록이 길어도 "선택 N명 + 저장" 줄이 화면 아래에 항상 보이게 */
.n7-stickybar { position: sticky; bottom: 0; z-index: 5; background: #fff;
                border-top: 1px solid var(--line, #e6e6ef); padding: 10px 0 4px; margin-top: .75rem; }

/* ── 문항 필터 막대 (대표 확정 2026-09-02 · 시안 v13 「나」) ────────────────────
   왜: 라벨이 왼쪽 고정폭이라 세 줄의 칩 시작점이 안 맞았고, 칩이 낱개로 떠 있어
       "어디까지가 유형인지" 경계가 없었다. 라벨을 오른쪽 맞춤 격자로 세우고
       칩은 붙은 덩어리(btn-group)로 묶는다. 내용·줄 수는 그대로. */
.qchip-grid { display: grid; grid-template-columns: auto 1fr; gap: 8px 11px; align-items: center; }
.qchip-grid > .qchip-lab { font-size: 11.5px; font-weight: 700; color: #9795ad;
                           text-align: right; white-space: nowrap; }
/* [대표 2026-09-02] 붙은 덩어리(btn-group) → 낱개 알약(gap). 0건 칩이 테두리 없는 라벨이라 세그먼트가 깨져 보이던 문제 해소.
   분류 많은 기관(학원 과목 20개 등)도 줄바꿈으로 자연스럽게 흐른다. */
.qchip-set { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; justify-self: start; max-width: 100%; }
.qchip-set > .btn { border-radius: 999px; }
.qchip-set > .btn .badge { margin-left: 3px; }

/* '찾기'와 '걸러내기'는 다른 일 — 사이에 연한 가로선 하나 */
.qchip-sep { border-top: 1px solid #f1f1f7; padding-top: 10px; }

/* 미분류처럼 '오늘 처리할 것'에 주황 점 (콘솔 4색 규칙: 주황 = 오늘 처리) */
.qchip-act::before { content: ""; display: inline-block; width: 6px; height: 6px;
                     border-radius: 50%; background: #a86a08; margin-right: 5px;
                     vertical-align: middle; }

/* 목록 '문제' 칸 — 긴 문제가 2~3줄로 늘어나 행 높이가 제각각이던 것을 한 줄로 */
.qb-table td.qb-q > .qb-q-in { display: -webkit-box; -webkit-line-clamp: 1;
                               -webkit-box-orient: vertical; overflow: hidden; }

/* [대표 확정 2026-09-02] 콘솔 4색 규칙에 파랑은 없다 — 안내 배너를 보라 계열로.
   ⚠️ .n7-hint 는 다른 화면에서도 쓴다(같은 규칙이라 함께 적용되는 것이 맞음). */
.n7-hint { background: #f7f7fc; border-color: #d6d4ea !important; }
.n7-hint .bi-signpost-split { color: #625cae; }

/* [대표 확정 2026-09-02] 표 안 숫자 — 자릿수 고정 + 굵게, 단위는 작은 회색, 0은 회색 */
.n7-num  { font-variant-numeric: tabular-nums; font-weight: 700; color: #1b1a2e; }
.n7-unit { font-size: 11.5px; color: #9795ad; font-weight: 600; margin-left: 1px; }
.n7-zero { color: #b6b4c6; font-weight: 600; }

/* ══ [2026-09-03] 콘솔 색 마무리 ═══════════════════════════════════════════════
   ① 2026-08-13 보라 전환 때 빠뜨린 두 변수를 콘솔에서만 덮는다.
      variables.css 는 옛 청록 팔레트 — 테두리 #d9e1e3, 옅은 면 #eef3f2 가 남아 있었다.
   ② 카드가 배경에 잠겨 보이던 문제 — 테두리를 또렷하게 하고 그림자를 살짝 준다.
   ⚠️ 본문 배경(#f4f5f9)은 대표 지시로 그대로 둔다.
   ⚠️ variables.css 자체는 절대 건드리지 않는다 — 공개 사이트(홈·가격·바로테스트)가 같은 파일을 쓴다.
      .admin-body 에만 걸어 콘솔만 바꾼다(기존 --bs-primary 덮는 방식과 동일). */
.admin-body {
    --color-border:        #e6e6ef;   /* ① 카드 테두리 — 청록빛 → 중립 */
    --color-surface-muted: #fafafc;   /* ① 표 머리글·옅은 면 — 초록빛 → 중립 */
}
.admin-body .card { background: #fff; border-color: #dedce9;
                    box-shadow: 0 1px 3px rgba(20,20,43,.07); }     /* ② 카드가 떠 보이게 */

/* [대표 지시 2026-09-03] 시험지 보관함 안내 배너 — 연보라 배경 → 흰색.
   9/2 에 "파랑 → 보라"로 바꾼 것을 대표님 지시로 흰색까지 되돌린다.
   왼쪽 보라 테두리와 보라 아이콘은 남겨 '안내'라는 건 알 수 있게 한다. */
.admin-body .n7-hint { background: #fff; }

/* [2026-09-03] AI팩 안내 카드의 충전 예시 알약 */
.ai-pline > span { border: 1px solid var(--color-border); border-radius: 8px; padding: 5px 11px;
                   font-size: 12.5px; color: #6f6d88; background: #fff; }
.ai-pline > span > strong { color: #1b1a2e; font-variant-numeric: tabular-nums; margin-right: 4px; }

/* [2026-09-03] hidden 속성이 유틸리티 클래스(.d-flex 등 !important)에 지지 않게.
   대상자 관리의 '0명 선택됨' 빨간 삭제 막대가 아무도 안 골랐는데 항상 보이던 사고를 막는다.
   (원인: <form ... class="d-flex" hidden> → .d-flex{display:flex!important} 가 hidden 을 이겼다)
   admin.css 는 bootstrap 다음에 실리므로 같은 특이도에서 이 규칙이 이긴다. */
[hidden] { display: none !important; }

/* [2026-09-03 추가] 세 번째 청록 잔재 — 「박스가 흰색이 아니다」의 진짜 뿌리.
   :root 의 --bs-body-bg 가 옛 --color-background(#f6f8f7, 초록빛)를 가리키고 있었고,
   부트스트랩은 그 값을 표 칸(--bs-table-bg)·입력칸·드롭다운·모달 배경으로 그대로 쓴다.
   → 흰 카드 안의 표·입력칸이 전부 초록빛(#f6f8f7)이었다. 실측으로 확인(2026-09-03).
   콘솔에서만 흰색으로 되돌리고, .admin-body 배경은 본문 배경(#f4f5f9)에 맞춘다.
   ⚠️ variables.css 는 그대로 둔다 — 공개 사이트가 같은 파일을 쓴다. */
.admin-body { --bs-body-bg: #fff; --color-background: var(--bg-page); }

/* 위 수정으로 표 칸이 흰색이 되면서 표 머리글의 옅은 면(384행 .table > thead)이 칸에 가려졌다.
   머리글은 칸(th)에 직접 칠해야 보인다 — 8/28 규칙의 '표 머리글 = #fafafc'을 되살린다. */
.admin-body .table > thead th { background: var(--color-surface-muted); }

/* ══ [대표 확정 2026-09-03 · 시안 v19] 대상자 관리 디자인 4건 ═══════════════════
   ① 행 삭제 — 빨간 글자 버튼 → 회색 휴지통 아이콘.
      8/28 규칙("행마다 빨간 버튼이 있으면 가장 안 눌러야 할 것이 제일 먼저 보인다")과
      9/2 결정("행에서 바로 삭제")을 둘 다 지키는 방법 — 한 번에 삭제되지만 빨갛지 않다.
      평소 회색 → 마우스/키보드 포커스일 때만 빨강. */
.admin-body .n7-del-ico { color: #6f6d88; line-height: 1; }
.admin-body .n7-del-ico:hover,
.admin-body .n7-del-ico:focus-visible { color: #c0392f; border-color: #f3cdc9; background: #fdeceb; }

/* ④ 부서×직급 교차표의 0명 칸 — 숫자 있는 칸만 눈에 들어오게 한 단계 더 흐리게.
   (쓰는 곳 = 대상자 관리 · 부서·직급 두 화면. Shared/_GroupMatrix.cshtml) */
.admin-body .n7-zero-cell { color: #dfdde9; }

/* [2026-09-14] AI 문제 팩 도형 배치·크기 기억 — 미리보기·시험지·응시·인쇄가 같은 자리·크기로 렌더(재현 보장) */
.q-fig{max-width:100%;height:auto}
.q-fig--right{float:right;max-width:55%;margin:.1em 0 .5em 1em}
.q-fig--left{float:left;max-width:55%;margin:.1em 1em .5em 0}
.q-fig--below{display:inline-block;vertical-align:top;max-width:100%;margin:.3em .6%}
.q-figs-below{text-align:center;clear:both;margin:.5em 0}

/* 문의 본문 등 저장된 HTML 안의 그림(화면 캡처)이 화면을 넘지 않게. 콘솔은 app.css 를 싣지 않아 여기서 정한다. */
.prose img { max-width: 100%; height: auto; }

/* 2026-10-14 「구매 구성」 상품 칩 — 상품 이름표라 상태 4색 규칙과 별개로 진한 바탕 + 흰 글씨.
   (전에 text-bg-info/warning 을 썼다가 admin.css 의 어두운 --bs-info/--bs-warning 위에 검은 글씨가 돼 안 보였다)
   흰 글씨 대비 모두 4.5:1 이상. */
.badge.n7-chip { color: #fff !important; font-weight: 700; border: 0 !important; }
.badge.n7-chip--plan  { background-color: #5E56E7 !important; }   /* 구독 플랜 = 보라 */
.badge.n7-chip--taker { background-color: #0f6a85 !important; }   /* 증원팩 = 청록 */
.badge.n7-chip--sms   { background-color: #1d4e7a !important; }   /* 문자팩 = 남색 */
.badge.n7-chip--ai    { background-color: #2b6a2e !important; }   /* AI팩 = 초록 */
.badge.n7-chip--vp    { background-color: #0e6e6e !important; }   /* AI 화상감독 = 청록(2026-10-20) */
.badge.n7-chip--etc   { background-color: #6f6d80 !important; }   /* 그 밖 = 회색 */

/* 2026-10-14 text-bg-* 배지도 상태 4색 규칙(5차-4)으로.
   부트스트랩 text-bg-* 는 글자색을 고정해 위 .badge.bg-* 규칙을 비껴갔다(발행요청 = 갈색 바탕 + 검은 글씨).
   지금 쓰는 곳: 구독·결제 목록 발행요청/발행완료 · 결제 상세 「묶음 결제」 · 고객 결제 내역 사업자 정보 상태/발행요청.
   text-bg-light(「개별 충전」)는 상태 표시가 아니라서 넣지 않았다. */
.badge.text-bg-primary, .badge.text-bg-info {
    background-color: #eeedf8 !important; color: #4d488f !important; border: 1px solid #d6d4ea !important; font-weight: 600;
}
.badge.text-bg-warning {
    background-color: #fdf4e4 !important; color: #a86a08 !important; border: 1px solid #f1dfbe !important; font-weight: 600;
}
.badge.text-bg-danger {
    background-color: #fdeceb !important; color: #c0392f !important; border: 1px solid #f4cfcc !important; font-weight: 600;
}
.badge.text-bg-success {
    background-color: #e9f5ee !important; color: #16794f !important; border: 1px solid #c9e4d6 !important; font-weight: 600;
}
.badge.text-bg-secondary {
    background-color: #f1f1f5 !important; color: #6f6d80 !important; border: 1px solid #e2e1ea !important; font-weight: 600;
}

/* [대표 확정 2026-11-04] 문제은행 분류 칩 단계별 펼치기 (_QuestionChips) */
.qchip-more::after { content: "›"; margin-left: 5px; font-weight: 800; opacity: .55; }
.qchip-sub { background: #f8f7fd; border: 1px solid #e7e5f7; border-radius: 10px; padding: 7px 9px;
             display: flex; flex-wrap: wrap; gap: 5px; align-items: center; min-width: 0; }
.qchip-sub .btn { border-radius: 999px; }
.qchip-sub .btn .badge { margin-left: 3px; }
.qchip-find-list { display: contents; }
.qchip-sub-hd { font-size: 12px; font-weight: 800; color: #5E56E7; margin-right: 4px; }
.qchip-crumb { display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #55566a; flex-wrap: wrap; }
.qchip-crumb a { color: #5E56E7; font-weight: 700; text-decoration: none; }
.qchip-crumb b { color: #14141f; }
.qchip-crumb .qchip-x { margin-left: 6px; font-size: 12px; color: #8b8ca0; font-weight: 500; border: 1px solid #e3e2f0; border-radius: 999px; padding: 0 8px; }
.qchip-find { border: 1px solid #ced4da; border-radius: 999px; padding: 3px 12px; font-size: 12.5px; width: 200px; max-width: 100%; }
.qchip-find:focus { outline: 2px solid #d6d3fa; border-color: #5E56E7; }
.qchip-grid [hidden] { display: none !important; }