/* 공통 레이아웃 보정 스타일 (AdminLTE 원본 수정 없이 덮어쓰기)
 * - !important 는 AdminLTE·Bootstrap 의 !important 유틸리티(.text-muted·.elevation-4·.mt-2·.bg-success 등)나 AdminLTE 레이아웃의 높은 우선순위 규칙(사이드바 여백 등)을 덮어쓸 때만 사용
 */

/* ==========================================================================
 * 공통 변수 (색·앱 영역 폭)
 * ========================================================================== */
:root {
    /* 앱 영역 최대 폭 (회원·비로그인은 PC에서도 모바일 폭으로 표시, 관리자 레이아웃은 1장 규칙 미적용이라 쓰이지 않음) */
    --app-max-width: 480px;
    /* 앱 영역 바깥 바탕 */
    --app-outer-bg: #EEF0F5;
    /* 앱 영역 폭 기준 1vw (창이 넓어도 480px 화면의 1vw 이하) */
    --app-vw: min(1vw, 4.8px);
    /* 열린 서랍 사이드바 그림자 (회원 서랍·관리자 좁은 화면 서랍 공통) */
    --drawer-shadow: 4px 0 24px rgba(30, 35, 64, .12);
}

/* ==========================================================================
 * 1. 모바일 폭 앱 영역 (회원·비로그인 레이아웃 전용)
 *    - .wrapper(defaultLayout)를 최대 480px 앱 영역으로 가운데 배치
 *    - 480px 이하 기기에서는 화면 전체 폭 사용
 *    - 관리자 레이아웃(body.officer_layout)은 제외 (body:not(.officer_layout) 한정, 관리자 배치는 5장)
 * ========================================================================== */
html,
body {
    background-color: var(--app-outer-bg);
}

/* 가로 넘침 방지 (앱 영역 밖으로 나간 사이드바·내용 잘라내기, clip 미지원 브라우저는 hidden) */
body:not(.officer_layout) > .wrapper {
    max-width: var(--app-max-width);
    min-height: 100vh;
    margin: 0 auto;
    box-shadow: 0 0 24px rgba(30, 35, 64, .06);
    overflow-x: hidden;
    overflow-x: clip;
}

/* 상단 바·본문·푸터: 창 폭과 무관하게 사이드바 자리 여백 없음 */
body:not(.officer_layout) .wrapper .content-wrapper,
body:not(.officer_layout) .wrapper .main-header,
body:not(.officer_layout) .wrapper .main-footer {
    margin-left: 0 !important;
}

/* 사이드바: 항상 서랍 방식 (닫힘 = 앱 영역 왼쪽 밖으로 숨김, 열림 = 앱 영역 왼쪽에서 표시) */
body:not(.officer_layout) .wrapper .main-sidebar,
body:not(.officer_layout) .wrapper .main-sidebar::before {
    margin-left: -250px !important;
    box-shadow: none !important;
}

body.sidebar-open:not(.officer_layout) .wrapper .main-sidebar,
body.sidebar-open:not(.officer_layout) .wrapper .main-sidebar::before {
    margin-left: 0 !important;
}

body.sidebar-open:not(.officer_layout) .wrapper .main-sidebar {
    box-shadow: var(--drawer-shadow) !important;
}

/* 사이드바 덮개 색 (회원·관리자 공통) */
#sidebar-overlay {
    background-color: rgba(30, 35, 64, .35);
}

/* 사이드바 덮개: 창 폭과 무관하게 열림 상태에서 표시, 앱 영역 폭에만 덮기 */
body:not(.officer_layout) #sidebar-overlay {
    left: 50%;
    right: auto;
    width: 100%;
    max-width: var(--app-max-width);
    transform: translateX(-50%);
}

body.sidebar-open:not(.officer_layout) #sidebar-overlay {
    display: block;
}

/*
 * 사이드바 메뉴 글자 줄바꿈 방지 (회원·관리자 공통, 서랍 열고 닫는 중·접힌 상태 모두)
 * - 접힌 사이드바에서 메뉴 글자가 한 글자씩 줄바꿈되어 .sidebar 높이가 부푸는 현상 방지
 * - AdminLTE fixLayoutHeight가 사이드바 높이로 .content-wrapper min-height를 잡아 생기는 하단 빈 공간 제거 목적
 */
body .main-sidebar .sidebar .nav-sidebar .nav-link,
body .main-sidebar .sidebar .nav-sidebar .nav-link p,
body .main-sidebar .sidebar .user-panel .info {
    white-space: nowrap;
}

/* 열린 사이드바에서 긴 사용자 이름의 말줄임 처리 */
body .main-sidebar .sidebar .user-panel .info {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 단독 로그인형 화면(init.html, body.login-page)의 앱 영역 */
body.login-page {
    max-width: var(--app-max-width);
    margin: 0 auto;
    box-shadow: 0 0 24px rgba(30, 35, 64, .06);
}

/* 모달 대화상자: 앱 영역 폭 이내 */
body:not(.officer_layout) .modal-dialog {
    max-width: calc(var(--app-max-width) - 1rem);
}

/*
 * Bootstrap 그리드·반응형 유틸 (회원·비로그인): 앱 영역(최대 480px)은 항상 576px 미만이므로
 * 창 폭이 576px 이상이어도 sm/md/lg/xl 배치를 무효화하고 xs(모바일) 배치 유지
 */
@media (min-width: 576px) {
    /* sm 이상 열 클래스 → 모바일 기본(한 줄 전체 폭) */
    body:not(.officer_layout) .wrapper [class*="col-sm"],
    body:not(.officer_layout) .wrapper [class*="col-md"],
    body:not(.officer_layout) .wrapper [class*="col-lg"],
    body:not(.officer_layout) .wrapper [class*="col-xl"] {
        flex: 0 1 auto;
        width: 100%;
        max-width: none;
    }

    /* 함께 지정된 xs 열 클래스 다시 적용 */
    body:not(.officer_layout) .wrapper .col {
        flex-basis: 0;
        flex-grow: 1;
        max-width: 100%;
    }

    body:not(.officer_layout) .wrapper .col-auto {
        flex: 0 0 auto;
        width: auto;
        max-width: 100%;
    }

    body:not(.officer_layout) .wrapper .col-1 { flex: 0 0 8.333333%; max-width: 8.333333%; }
    body:not(.officer_layout) .wrapper .col-2 { flex: 0 0 16.666667%; max-width: 16.666667%; }
    body:not(.officer_layout) .wrapper .col-3 { flex: 0 0 25%; max-width: 25%; }
    body:not(.officer_layout) .wrapper .col-4 { flex: 0 0 33.333333%; max-width: 33.333333%; }
    body:not(.officer_layout) .wrapper .col-5 { flex: 0 0 41.666667%; max-width: 41.666667%; }
    body:not(.officer_layout) .wrapper .col-6 { flex: 0 0 50%; max-width: 50%; }
    body:not(.officer_layout) .wrapper .col-7 { flex: 0 0 58.333333%; max-width: 58.333333%; }
    body:not(.officer_layout) .wrapper .col-8 { flex: 0 0 66.666667%; max-width: 66.666667%; }
    body:not(.officer_layout) .wrapper .col-9 { flex: 0 0 75%; max-width: 75%; }
    body:not(.officer_layout) .wrapper .col-10 { flex: 0 0 83.333333%; max-width: 83.333333%; }
    body:not(.officer_layout) .wrapper .col-11 { flex: 0 0 91.666667%; max-width: 91.666667%; }
    body:not(.officer_layout) .wrapper .col-12 { flex: 0 0 100%; max-width: 100%; }

    /* 사용 중인 반응형 유틸의 sm 이상 값 무효화 */
    body:not(.officer_layout) .wrapper .float-sm-right {
        float: none !important;
    }

    body:not(.officer_layout) .wrapper .px-1.px-sm-2 {
        padding-left: .25rem !important;
        padding-right: .25rem !important;
    }

    body:not(.officer_layout) .wrapper .mb-3.mb-md-0 {
        margin-bottom: 1rem !important;
    }

    body:not(.officer_layout) .wrapper .d-none.d-sm-block,
    body:not(.officer_layout) .wrapper .d-none.d-sm-inline-block {
        display: none !important;
    }
}

/* ==========================================================================
 * 2. 공통 테마 '깔끔한 미니멀' (색·글꼴·카드·버튼·표·폼)
 * ========================================================================== */
:root {
    /* 바탕·카드·선 */
    --c-bg: #F7F8FA;
    --c-card: #FFFFFF;
    --c-line: #EEF0F5;
    --c-border: #E8EAF0;
    --c-input-border: #DDE1EA;
    /* 강조 인디고 */
    --c-primary: #4F63FF;
    --c-primary-dark: #3A4AD9;
    --c-primary-soft: #EEF0FF;
    --c-primary-ring: rgba(79, 99, 255, .18);
    /* 글자 */
    --c-title: #1E2340;
    --c-text: #5B6275;
    /* 보조 글자 (흰 바탕 5.14:1, 본문 바탕 #F7F8FA 4.83:1, 연한 인디고 #EEF0FF 4.54:1) */
    --c-muted: #666C8C;
    /* 보조 강조 보라 (소개 화면 장식·글자 그라데이션) */
    --c-violet: #8B5CF6;
    /* 흰 글자 주 버튼 그라데이션 끝색 (흰 글자 대비 5.1:1, 보조 강조 보라는 4.2:1이라 주 버튼에는 사용 안 함) / 누름·마우스 올림 끝색 (7.1:1) */
    --c-button-gradient-end: #7C4DEB;
    --c-button-gradient-end-dark: #6D28D9;
    /* 달력 선택 날짜칸 읽기 전용 느낌 바탕 (글자 --c-title 대비 14:1 이상, 흰 카드와 구분되는 옅은 회색) */
    --c-input-readonly-bg: #F2F4F8;
    /* 입력칸 안내 글자(placeholder) (흰 바탕 4.6:1) */
    --c-placeholder: #6E7491;
    /* 몰라요 표시 (연한 빨강·주황, 글자는 흰 바탕 대비 확보한 진한 주황) */
    --c-unknown: #D9480F;
    --c-unknown-soft: #FFF1EC;
    --c-unknown-soft-hover: #FFE6DD;
    /* 작은 글씨용 진한 주황 (연한 주황 바탕 대비 5.10:1, 오류 배지 등 공통 사용) */
    --c-unknown-strong: #B93D0B;
    /* 게시판 Q&A 답변 상태 (대기 주황 5.1:1, 완료 초록 5.45:1, 각 연한 바탕 대비) */
    --c-answer-waiting: var(--c-unknown-strong);
    --c-answer-waiting-soft: #FFF1EC;
    --c-answer-done: #237032;
    --c-answer-done-soft: #E6F6EA;
    /* 삭제·위험 동작 글자 진한 빨강 (흰 바탕 4.89:1, 위험 버튼 누름 바탕·게시판 삭제 버튼 글자 공통 사용) */
    --c-danger: #CD3B40;
    /* 모서리 (카드 20px, 입력칸·버튼 12px) */
    --c-radius-lg: 20px;
    --c-radius: 12px;
    --c-radius-sm: 10px;
    /* 카드 그림자 (소개·로그인 화면과 같은 부드러운 그림자) */
    --c-shadow-card: 0 6px 20px rgba(42, 52, 120, .06);
    /* 표 가로 스크롤 오른쪽 끝 그림자 폭 */
    --table-scroll-shadow-width: 24px;
    /* 글꼴 */
    --c-font: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Malgun Gothic", sans-serif;
}

/* 기본 글꼴·글자색 */
body {
    font-family: var(--c-font);
    color: var(--c-text);
}

a {
    color: var(--c-primary);
}

a:hover,
a:focus {
    color: var(--c-primary-dark);
}

body .text-muted {
    color: var(--c-muted) !important;
}

/* 본문 바탕 */
.content-wrapper,
body > .wrapper {
    background-color: var(--c-bg);
}

body.login-page,
.content-wrapper .login-page {
    background-color: var(--c-bg);
}

/* ---- 상단 바: 흰색, 아래 1px 선, 가운데 로고 굵게 ---- */
.main-header.navbar {
    background-color: #ffffff;
    border-bottom: 1px solid var(--c-line);
}

/*
 * 상단 바 아이콘 링크·버튼(햄버거·로그인·로그아웃)
 * - 누름 영역 높이 44px (AdminLTE 기본 40px 대체)
 * - 위아래 음수 바깥 여백 2px : 상단 바 높이(57px)·아이콘 세로 위치 유지
 */
.main-header .navbar-nav .nav-link {
    display: flex;
    align-items: center;
    height: 44px;
    margin: -2px 0;
    color: var(--c-text);
}

.main-header .navbar-nav .nav-link:hover,
.main-header .navbar-nav .nav-link:focus {
    color: var(--c-title);
}

/* 로고 링크: 밑줄 없음 */
.main-header .main-header-logo,
.main-header .main-header-logo:hover,
.main-header .main-header-logo:focus {
    text-decoration: none;
}

/* 로고: 햄버거·오른쪽 아이콘 유무와 관계없이 상단 바 가운데 고정 */
.main-header .main-header-logo {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    white-space: nowrap;
}

/* 로고 이미지(상단 바·사이드바 브랜드 공통): 로고 박스 높이 24px(대문자 높이 약 20px), 비율 유지 */
.main-header .main-header-logo-image,
.main-sidebar .brand-link .brand-logo-image {
    display: block;
    width: auto;
    height: 24px;
}

/* ---- 사이드바: 흰 바탕, 본문색 메뉴, 활성 메뉴 연한 인디고 ---- */
.main-sidebar {
    background-color: #ffffff;
}

/* 사이드바 브랜드 영역: 상단 바와 같은 높이(AdminLTE 상단 바 높이 3.5rem + 테두리 1px), 로고 위아래·좌우 가운데 */
.main-sidebar .brand-link {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(3.5rem + 1px);
    border-bottom: 1px solid var(--c-line);
}

.main-sidebar .user-panel {
    border-bottom: 1px solid var(--c-line);
}

.main-sidebar .user-panel .info a {
    color: var(--c-title);
    font-weight: 600;
}

.main-sidebar .nav-sidebar .nav-link {
    color: var(--c-text);
    border-radius: var(--c-radius-sm);
}

.main-sidebar .nav-sidebar .nav-link .nav-icon {
    color: var(--c-muted);
}

.main-sidebar .nav-sidebar .nav-link:hover,
.main-sidebar .nav-sidebar .nav-link:focus {
    background-color: var(--c-bg);
    color: var(--c-title);
}

/* 활성 메뉴: AdminLTE 밝은 사이드바 활성·마우스 올림 규칙([class*="sidebar-light-"] .nav-sidebar > .nav-item > .nav-link)과 같은 우선순위, 뒤에 로드되어 적용 */
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active,
.main-sidebar .nav-sidebar > .nav-item > .nav-link.active:hover {
    background-color: var(--c-primary-soft);
    color: var(--c-primary);
    box-shadow: none;
    font-weight: 600;
}

.main-sidebar .nav-sidebar .nav-link.active .nav-icon {
    color: var(--c-primary);
}

.main-sidebar .nav-sidebar .nav-header {
    color: var(--c-muted);
}

/* 펼친 묶음 제목: AdminLTE 밝은 사이드바 펼침 회색 배경([class*="sidebar-light-"] .nav-sidebar > .nav-item.menu-open > .nav-link) 대신 기본 메뉴와 같은 바탕 */
.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link {
    background-color: transparent;
    color: var(--c-text);
}

.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link:hover,
.main-sidebar .nav-sidebar > .nav-item.menu-open > .nav-link:focus {
    background-color: var(--c-bg);
    color: var(--c-title);
}

/* 펼침 묶음 제목(테스트·커뮤니티)의 현재 묶음 표시: 배경 없이 글자·아이콘만 인디고 (하위 활성 항목과 이중 강조 방지) */
.main-sidebar .nav-sidebar > .nav-item.has-treeview > .nav-link.active,
.main-sidebar .nav-sidebar > .nav-item.has-treeview > .nav-link.active:hover {
    background-color: transparent;
    color: var(--c-primary);
}

.main-sidebar .nav-sidebar > .nav-item.has-treeview > .nav-link.active:focus {
    background-color: var(--c-bg);
}

/* 펼침 묶음 하위 항목: 묶음 제목보다 한 단계 들여쓰기 */
.main-sidebar .nav-sidebar .nav-treeview > .nav-item > .nav-link {
    padding-left: 1.75rem;
}

/* 펼침 묶음 하위 활성 항목: AdminLTE 밝은 사이드바 하위 활성 규칙([class*="sidebar-light-"] .nav-treeview > .nav-item > .nav-link.active)과 같은 우선순위, 뒤에 로드되어 적용 */
.main-sidebar .nav-treeview > .nav-item > .nav-link.active,
.main-sidebar .nav-treeview > .nav-item > .nav-link.active:hover {
    background-color: var(--c-primary-soft);
    color: var(--c-primary);
    font-weight: 600;
}

/* ---- 페이지 제목·이동 경로 ---- */
.content-header {
    padding: 20px .5rem 10px;
}

.content-header h1 {
    color: var(--c-title);
    font-size: 1.6rem;
    font-weight: 700;
}

.content-header .breadcrumb {
    margin-top: 4px;
    font-size: .85rem;
    line-height: 1.5;
}

.breadcrumb-item,
.breadcrumb-item a,
.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before {
    color: var(--c-muted);
}

.breadcrumb-item a:hover {
    color: var(--c-primary);
}

/* ---- 카드: 흰색, 모서리 20px, 옅은 선, 부드러운 그림자 ---- */
.card {
    background-color: var(--c-card);
    border: 1px solid var(--c-line);
    border-radius: var(--c-radius-lg);
    box-shadow: var(--c-shadow-card);
}

/* 카드 헤더: 원색 띠(card-primary 등) 없이 흰 바탕 + 본문색 굵은 제목 */
.card-header,
.card[class*="card-"]:not(.card-outline) > .card-header {
    background-color: #ffffff;
    border-bottom: 1px solid var(--c-line);
    color: var(--c-title);
}

.card-header:first-child {
    border-radius: calc(var(--c-radius-lg) - 1px) calc(var(--c-radius-lg) - 1px) 0 0;
}

.card-footer {
    background-color: #ffffff;
    border-top: 1px solid var(--c-line);
}

.card-footer:last-child {
    border-radius: 0 0 calc(var(--c-radius-lg) - 1px) calc(var(--c-radius-lg) - 1px);
}

/* 카드 안 표: 카드 모서리 밖으로 칸이 비치지 않게 잘라내기 */
.card > .card-body.table-responsive:last-child {
    border-radius: 0 0 calc(var(--c-radius-lg) - 1px) calc(var(--c-radius-lg) - 1px);
}

/* ---- 표 가로 스크롤 그림자: 오른쪽에 가려진 칸이 남아 있을 때만 오른쪽 끝 그라데이션 (common.js updateTableScrollShadow가 table_scroll_more 지정) ---- */
/* 대상: 카드 표(.table-responsive), 엑셀 미리보기 줄별 결과 표(.word_excel_table_wrap), 회차 상세 펼친 문항 표(.session_detail_scroll) — common.js TABLE_SCROLL_AREA_SELECTOR와 같은 목록 */
/* 표와 그림자를 한 줄(flex)에 두어 그림자를 sticky로 보이는 영역 오른쪽 끝에 고정 (배경 그림자는 머리줄 바탕에 가려져 사용 안 함) */
.table-responsive,
.word_excel_table_wrap,
.session_detail_scroll {
    display: flex;
}

/* 표: 영역 폭을 채우되 칸이 넓으면 영역 밖으로 늘어남 (flex 축소 없음) */
.table-responsive > .table,
.word_excel_table_wrap > .table,
.session_detail_scroll > .table {
    flex: 0 0 auto;
    width: 100%;
}

/* 그림자: 폭 24px, 표 마지막 24px 위에 겹침(음수 여백), 클릭은 표로 통과, 엑셀 표 고정 머리줄(z-index 1)보다 위 */
.table-responsive::after,
.word_excel_table_wrap::after,
.session_detail_scroll::after {
    content: "";
    position: sticky;
    right: 0;
    z-index: 2;
    flex: 0 0 var(--table-scroll-shadow-width);
    margin-left: calc(var(--table-scroll-shadow-width) * -1);
    background: linear-gradient(to left, rgba(30, 35, 64, .12), rgba(30, 35, 64, 0));
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease;
}

.table-responsive.table_scroll_more::after,
.word_excel_table_wrap.table_scroll_more::after,
.session_detail_scroll.table_scroll_more::after {
    opacity: 1;
}

.card-title,
.card-header h3 {
    color: var(--c-title);
    font-size: 1.05rem;
    font-weight: 700;
}

.card-primary.card-outline {
    border-top: 3px solid var(--c-primary);
}

/* 로그인 카드 로고 */
.login-box .card-header h3 {
    color: var(--c-title);
    font-weight: 800;
}

/* 로그인 카드 로고 이미지: 로고 박스 높이 36px, 가운데 */
.login-box .card-header .login-logo-image {
    display: block;
    width: auto;
    height: 36px;
    margin: 0 auto;
}

.login-box-msg {
    color: var(--c-text);
}

/* ---- 키보드 포커스 표시: 2px 인디고 외곽선 (마우스 클릭에는 표시 안 함, 입력칸은 테두리·고리 포커스 표시 사용)
 *      Bootstrap .btn:focus·.page-link:focus 의 outline: 0 보다 우선하도록 같은 클래스 선택자 함께 지정 ---- */
a:focus-visible,
button:focus-visible,
[tabindex]:focus-visible,
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
input[type="file"]:focus-visible,
.btn:focus-visible,
.page-link:focus-visible,
.nav-link:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

/* ---- 버튼: primary 인디고 채움, secondary·outline 회색 테두리, 모서리 10px ---- */
.btn {
    border-radius: var(--c-radius);
    font-weight: 600;
}

.btn-sm,
.btn-xs {
    border-radius: 8px;
}

.btn:focus,
.btn.focus {
    box-shadow: 0 0 0 3px var(--c-primary-ring);
}

/* 주 버튼: 인디고 → 보라 그라데이션 (소개·로그인 화면과 같은 톤, 흰 글자 대비 4.5:1 이상 끝색) */
.btn-primary {
    background-color: var(--c-primary);
    background-image: linear-gradient(135deg, var(--c-primary) 0%, var(--c-button-gradient-end) 100%);
    border-color: transparent;
    color: #ffffff;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--c-primary-dark);
    background-image: linear-gradient(135deg, var(--c-primary-dark) 0%, var(--c-button-gradient-end-dark) 100%);
    border-color: transparent;
    color: #ffffff;
}

.btn-primary:disabled,
.btn-primary.disabled {
    background-color: var(--c-primary);
    border-color: transparent;
}

.btn-outline-primary {
    border-color: var(--c-primary);
    color: var(--c-primary);
}

.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    color: #ffffff;
}

/* 회색 테두리 버튼 (secondary·default·outline-secondary) */
.btn-secondary,
.btn-default,
.btn-outline-secondary {
    background-color: #ffffff;
    border-color: var(--c-input-border);
    color: var(--c-text);
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-default:hover,
.btn-default:focus,
.btn-outline-secondary:hover,
.btn-outline-secondary:focus,
.btn-secondary:not(:disabled):not(.disabled):active,
.btn-default:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled):active,
.btn-outline-secondary:not(:disabled):not(.disabled).active {
    background-color: var(--c-bg);
    border-color: #C9CEDA;
    color: var(--c-title);
}

.btn-secondary:disabled,
.btn-secondary.disabled,
.btn-outline-secondary:disabled {
    background-color: #ffffff;
    border-color: var(--c-input-border);
    color: var(--c-text);
}

/* 삭제 등 위험 버튼: 의미 유지, 채도 낮춘 톤 */
.btn-danger {
    background-color: #E5484D;
    border-color: #E5484D;
    color: #ffffff;
}

.btn-danger:hover,
.btn-danger:focus,
.btn-danger:not(:disabled):not(.disabled):active {
    background-color: var(--c-danger);
    border-color: var(--c-danger);
    color: #ffffff;
}

.btn-outline-danger {
    border-color: #F1B9BB;
    color: var(--c-danger);
}

.btn-outline-danger:hover,
.btn-outline-danger:not(:disabled):not(.disabled):active {
    background-color: #FDECEC;
    border-color: #E5484D;
    color: var(--c-danger);
}

/* 상단 바 로그아웃 버튼 (btn-link) */
.main-header .btn-link {
    color: var(--c-text);
    font-weight: 400;
}

/* 상단 바 로그인·로그아웃 아이콘 크기 (header.html, 예전 인라인 스타일 25px과 같음) */
.main-header .header_action_icon {
    font-size: 25px;
}

/* ---- 표: 머리줄 연한 바탕 작은 회색 글자, 칸 선 최소, 한국어 낱말 단위 줄바꿈 ---- */
.table {
    color: var(--c-text);
    word-break: keep-all;
    overflow-wrap: break-word;
}

.table thead th {
    background-color: var(--c-bg);
    border-top: 0;
    border-bottom: 1px solid var(--c-line);
    color: var(--c-muted);
    font-size: .8rem;
    font-weight: 600;
    white-space: nowrap;
    vertical-align: middle;
}

.table td,
.table th {
    border-top: 1px solid var(--c-line);
    vertical-align: middle;
}

/* 칸 테두리 표(table-bordered): 세로 선 없이 가로 선만 */
.table-bordered,
.table-bordered td,
.table-bordered th {
    border-color: var(--c-line);
}

.table-bordered {
    border: 0;
}

.table-bordered td,
.table-bordered th {
    border-left: 0;
    border-right: 0;
}

.table-bordered thead th {
    border-bottom-width: 1px;
}

/* 줄바꿈 허용 칸 (긴 문장·뜻): 최소 폭 확보로 한 글자씩 세로로 꺾이는 현상 방지 */
.table .cell_wrap {
    min-width: 8rem;
    white-space: normal;
}

.table .cell_wrap_wide {
    min-width: 13rem;
}

/* 말줄임 칸 (목록의 긴 뜻·문장) */
.table .cell_ellipsis {
    max-width: 12rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 빈 목록 안내 칸 */
.table .table_empty {
    padding: 2.5rem 1rem;
    color: var(--c-muted);
}

.table-hover tbody tr:hover {
    background-color: #FAFBFF;
    color: var(--c-title);
}

/* 누르면 동작하는 표·줄 (관리자 목록 point_cursor·list_row, 내 기록 회차 session_row): 손가락 커서 */
.point_cursor,
.list_row,
.session_row {
    cursor: pointer;
}

/* 누르는 줄 키보드 포커스 (tabindex="0", Enter·Space는 common.js): 줄 안쪽 인디고 외곽선 + 마우스 올림과 같은 바탕 */
.list_row:focus-visible,
.session_row:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: -2px;
    background-color: #FAFBFF;
}

/* 몰라요 표시 줄 (결과표 table-warning): 연한 주황·빨강 배경 유지 */
.table-warning,
.table-warning > td,
.table-warning > th {
    background-color: var(--c-unknown-soft);
}

.table-hover .table-warning:hover,
.table-hover .table-warning:hover > td,
.table-hover .table-warning:hover > th {
    background-color: var(--c-unknown-soft-hover);
}

/* ---- 폼: 로그인·가입 화면과 같은 입력칸 (높이 48px, 모서리 12px, 포커스 인디고 테두리) ---- */
.form-control,
.custom-select {
    border-color: var(--c-input-border);
    border-radius: var(--c-radius);
    color: var(--c-title);
}

.content-wrapper .form-control:not(textarea):not(.form-control-sm):not(.form-control-plaintext),
.content-wrapper .custom-select {
    height: 48px;
    padding: 0 14px;
    font-size: 1rem;
}

/* 선택칸: 브라우저 기본 모양(WebKit 회색 버튼) 대신 흰 입력칸 + 오른쪽 화살표로 Chromium·WebKit 통일 (화살표 색 #666C8C = --c-muted, 검증 오류 칸도 화살표 유지, 오른쪽 여백은 기본 화살표 때와 비슷한 글자 폭이 남게 30px) */
.content-wrapper select.form-control:not(.form-control-sm):not([multiple]):not([size]) {
    -webkit-appearance: none;
    appearance: none;
    padding-right: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23666C8C' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-position: right 12px center;
    background-repeat: no-repeat;
    background-size: 12px 8px;
}

/* 날짜칸: WebKit 값이 위로 쏠리지 않게 세로 가운데(높이 48px - 테두리 2px), 값은 왼쪽 정렬 (iOS Safari 가운데 정렬 방지) */
.content-wrapper input[type="date"].form-control {
    line-height: 46px;
}

.content-wrapper input[type="date"].form-control::-webkit-date-and-time-value {
    text-align: left;
}

/*
 * 달력 선택 날짜칸 (.date_input 감싸개 + 오른쪽 안쪽 달력 아이콘, 직접 입력 차단은 common.js initDateInputs)
 * - 읽기 전용 느낌 : 옅은 회색 바탕·손가락 커서, 글자는 진하게 유지(비활성처럼 흐리지 않음), 포커스 테두리는 공통 입력칸 규칙 그대로
 * - 브라우저 기본 달력 표시 : Chromium 은 투명하게 칸 전체로 늘려 어디를 눌러도 달력이 열리게(showPicker 미지원 대비),
 *   Firefox 는 숨길 선택자가 없어 아이콘이 같은 바탕색으로 덮어 아이콘 하나만 보이게
 */
.date_input {
    position: relative;
}

.content-wrapper .date_input input[type="date"].form-control {
    position: relative;
    padding-left: 12px;
    padding-right: 32px;
    background-color: var(--c-input-readonly-bg);
    color: var(--c-title);
    cursor: pointer;
}

.date_input input[type="date"]::-webkit-calendar-picker-indicator {
    position: absolute;
    inset: 0;
    width: auto;
    height: auto;
    margin: 0;
    padding: 0;
    background: transparent;
    color: transparent;
    cursor: pointer;
}

/* 달력 아이콘 : 칸 오른쪽 안쪽 세로 가운데, 누름은 아래 날짜칸이 받음 (테두리 1px 안쪽에 놓아 포커스 테두리를 가리지 않음) */
.date_input_icon {
    position: absolute;
    top: 1px;
    right: 1px;
    bottom: 1px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    border-radius: 0 var(--c-radius) var(--c-radius) 0;
    background-color: var(--c-input-readonly-bg);
    color: var(--c-muted);
    font-size: .95rem;
    pointer-events: none;
}

/*
 * 좁은 화면(반 칸 약 140px) : WebKit 한국어 날짜(2025. 10. 30.)가 아이콘 밑으로 잘리지 않게 좌우 여백·아이콘 폭 축소
 * - 글자는 1rem 유지 (iPhone Safari 는 16px 미만 입력칸 포커스 시 화면 확대)
 */
@media (max-width: 400px) {
    .content-wrapper .date_input input[type="date"].form-control {
        padding-left: 10px;
        padding-right: 26px;
    }

    .date_input_icon {
        width: 24px;
    }
}

/* 아주 좁은 화면(379px 이하, 360px 등) : 여백을 줄여도 WebKit 날짜 끝이 잘려 시작일·종료일 칸(.date_field)을 한 줄씩 배치 (375px 은 반 칸 약 146px 로 잘림 없음 경계 포함) */
@media (max-width: 379px) {
    .date_field {
        flex: 0 0 100%;
        max-width: 100%;
    }
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--c-primary);
    box-shadow: 0 0 0 4px var(--c-primary-ring);
}

/* 입력칸 위 라벨 */
.content-wrapper .form-group > label,
.content-wrapper .form_label {
    display: block;
    margin-bottom: 6px;
    color: var(--c-title);
    font-size: .85rem;
    font-weight: 700;
}

.content-wrapper .form-group {
    margin-bottom: 18px;
}

/* 검증 오류 입력칸: 아이콘 없이 빨간 테두리 */
.content-wrapper .form-control.is-invalid {
    border-color: #E5484D;
    background-image: none;
    padding-right: 14px;
}

.content-wrapper .invalid-feedback {
    margin-top: 6px;
    font-size: .8rem;
}

.form-control::placeholder {
    color: var(--c-placeholder);
}

.input-group-text {
    background-color: #ffffff;
    border-color: var(--c-input-border);
    border-radius: var(--c-radius-sm);
    color: var(--c-muted);
}

label {
    color: var(--c-title);
}

/* ---- 진행 막대·배지·알림 ---- */
.progress {
    background-color: var(--c-line);
    border-radius: 999px;
    box-shadow: none;
}

.progress-bar {
    background-color: var(--c-primary);
}

.badge-secondary {
    background-color: var(--c-line);
    color: var(--c-text);
}

.alert {
    border-radius: var(--c-radius-sm);
}

/* ---- 모달: 카드와 같은 흰 바탕·큰 모서리·부드러운 그림자, 머리·바닥 구분선 최소 ---- */
.modal-content {
    border: 0;
    border-radius: var(--c-radius-lg);
    box-shadow: var(--c-shadow-card);
}

.modal-header {
    border-bottom: 1px solid var(--c-line);
}

.modal-title {
    color: var(--c-title);
    font-size: 1.1rem;
    font-weight: 700;
}

/* 모달 하단 버튼 줄 (form_actions 와 같은 균등 분할 버튼, 좌우 여백은 .modal-body 1rem과 같게) */
.modal-footer.form_actions {
    flex-wrap: nowrap;
    gap: 8px;
    padding-left: 1rem;
    padding-right: 1rem;
    border-top: 0;
}

.modal-footer.form_actions > * {
    margin: 0;
}

/* ---- 페이지 번호 (layout/pagination.html) ---- */
.page-link {
    border-color: var(--c-line);
    color: var(--c-text);
}

.page-link:hover {
    background-color: var(--c-bg);
    color: var(--c-primary);
}

.page-item.active .page-link {
    background-color: var(--c-primary);
    border-color: var(--c-primary);
    color: #ffffff;
}

.pagination {
    justify-content: center;
}

/* 페이지 번호 영역 : 카드 밖 투명 바탕 (다른 카드 하단 영역에는 영향 없음) */
.pagination > .card-footer {
    padding: 12px .25rem 4px;
    background-color: transparent;
    border-top: 0;
}

/* 둥근 32px 번호 버튼 (현재 페이지 인디고 채움, 나머지 회색 글자), 세 자리 번호 5개와 화살표 4개 한 줄 표시 */
.pagination > .card-footer .pagination {
    flex-wrap: nowrap;
    gap: 4px;
}

/* 첫·마지막 번호의 Bootstrap 모서리 규칙(.page-item:first-child .page-link)보다 우선하도록 .page-item 포함 선택자 사용 */
.pagination > .card-footer .page-item .page-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    margin: 0;
    padding: 0 6px;
    border: 0;
    border-radius: 999px;
    background-color: transparent;
    color: var(--c-muted);
    font-size: .875rem;
    font-weight: 600;
    line-height: 1;
}

.pagination > .card-footer .page-item .page-link:hover,
.pagination > .card-footer .page-item .page-link:focus {
    background-color: var(--c-primary-soft);
    color: var(--c-primary);
}

.pagination > .card-footer .page-item.active .page-link {
    background-color: var(--c-primary);
    color: #ffffff;
}

.pagination > .card-footer .page-item.disabled .page-link {
    background-color: transparent;
    color: #C9CEDA;
}

/* ---- 푸터: 작은 회색 글자 ---- */
.main-footer {
    background-color: transparent;
    border-top: 0;
    color: var(--c-muted);
    font-size: .8rem;
    text-align: center;
}

/* 모바일 푸터 좌우 여백 8px : 360px 폭(WebKit)에서 저작권 문구 한 줄 유지, 넓은 폭은 AdminLTE 기본 16px 유지 (줄바꿈되어도 본문 높이는 AdminLTE가 실제 푸터 높이로 계산) */
@media (max-width: 575.98px) {
    .main-footer {
        padding-left: .5rem;
        padding-right: .5rem;
    }
}

/* 푸터 링크 (누름 영역 높이 44px 이상 : 음수 바깥 여백으로 푸터 높이·글자 위치 유지) */
.main-footer a {
    display: inline-block;
    margin: -13px -4px;
    padding: 13px 4px;
    color: var(--c-muted);
}

/* ==========================================================================
 * 3. 테스트 화면: static/css/wordTest.css (테스트 화면에서만 로드)
 * ========================================================================== */

/* ==========================================================================
 * 4. 공통 화면 구성 요소 (폼 카드·하단 버튼 줄·배지·검색·탭·요약 타일·정보 행)
 * ========================================================================== */
/* ---- 폼 카드 필수 안내 (layout/component :: requiredNote) ---- */
.form_required_note {
    margin: 0 0 14px;
    color: var(--c-muted);
    font-size: .8rem;
    text-align: right;
}

/* ---- 카드 하단 버튼 줄: 모바일 기준 균등 분할, 주 버튼 넓게, 삭제는 왼쪽 ---- */
.card-footer.form_actions {
    display: flex;
    gap: 8px;
    padding: 14px 1.25rem 18px;
    border-top: 0;
}

/* AdminLTE 카드 clearfix 가상 요소 제거 (flex 항목으로 잡혀 간격 8px만큼 버튼 줄 오른쪽 끝이 짧아지는 현상 방지) */
.card-footer.form_actions::after {
    display: none;
}

.form_actions .btn,
.button_row .btn {
    flex: 1 1 0;
    min-width: 0;
    min-height: 48px;
    padding: 0 12px;
    border-radius: var(--c-radius);
    font-size: 1rem;
    white-space: nowrap;
}

.form_actions .button_main {
    flex-grow: 2;
}

/* 버튼 링크(a.btn) 글자 가운데 정렬 */
.form_actions a.btn,
.button_row a.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* 같은 폭 버튼 줄 (검색·초기화 등) */
.button_row {
    display: flex;
    gap: 8px;
}

/* ---- 사용 여부·계정 상태 배지 (layout/component :: enabledBadge) ---- */
.status_badge {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: .8rem;
    font-weight: 700;
    line-height: 1.3;
    white-space: nowrap;
}

.status_badge_on {
    background: var(--c-primary-soft);
    /* 연한 인디고 바탕 위 글자 대비 확보용 진한 인디고 */
    color: var(--c-primary-dark);
}

.status_badge_off {
    background: var(--c-line);
    color: var(--c-text);
}

/* ---- 관리자 목록 검색 카드·도구 줄 ---- */
.search_card .card-body {
    padding: 16px;
}

.search_label {
    display: block;
    margin-bottom: 6px;
    color: var(--c-title);
    font-size: .85rem;
    font-weight: 700;
}

.search_fields {
    display: flex;
    gap: 8px;
    margin-bottom: 10px;
}

.search_fields .search_condition {
    flex: 0 0 96px;
}

/* 검색 조건 선택칸: 96px 안에 세 글자 조건(아이디·휴대폰·작성자)이 잘리지 않게 좌우 여백·화살표 위치 축소 (공통 선택칸 규칙(폼 구역 select.form-control)과 우선순위가 같아 뒤에 선언된 이 규칙이 우선 — 선언 순서 유지 필요) */
.content-wrapper .search_fields select.form-control.search_condition:not([multiple]) {
    padding-left: 12px;
    padding-right: 28px;
    background-position: right 10px center;
}

.search_fields input.form-control {
    flex: 1 1 auto;
    min-width: 0;
}

.list_toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin: 4px 2px 10px;
}

.list_count {
    margin: 0;
    color: var(--c-title);
    font-size: 1rem;
    font-weight: 700;
}

.list_toolbar .btn {
    min-height: 40px;
    padding: 0 14px;
}

/* 도구 줄 버튼 묶음 (단어 등록·엑셀 등록, 좁은 폭에서도 한 줄) */
.list_toolbar_actions {
    display: flex;
    flex: 0 0 auto;
    gap: 6px;
}

/* 버튼 묶음이 있는 도구 줄의 개수 글자: 줄바꿈 없이 한 줄 (6자리 개수까지) */
.list_toolbar_actions .btn,
.list_toolbar:has(.list_toolbar_actions) .list_count {
    white-space: nowrap;
}

/* 좁은 폭(400px 이하): 버튼 아이콘 숨김·안쪽 여백 축소로 개수와 버튼 2개를 한 줄에 유지 */
@media (max-width: 400px) {
    .list_toolbar_actions .btn {
        padding: 0 10px;
    }

    .list_toolbar_actions .btn .fas {
        display: none;
    }
}

/* ---- 단어 엑셀 등록 모달 (layout/wordExcel :: wordExcelModal) ---- */
/* 대화상자 폭: 공통 앱 영역 폭 제한 대신 결과 표용 넓은 폭 (PC 최대 800px, 좁은 화면은 양옆 .5rem 여백 안) */
.word_excel_modal .modal-dialog.modal-lg {
    max-width: min(800px, calc(100% - 1rem));
}

/* 단계 구역 (서식 받기·파일 올리기·확인 결과) */
.word_excel_step + .word_excel_step {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--c-line);
}

.word_excel_step_title {
    margin-bottom: 6px;
    color: var(--c-title);
    font-size: .95rem;
    font-weight: 700;
}

.word_excel_help {
    display: block;
    margin-bottom: 10px;
    color: var(--c-muted);
    font-size: .82rem;
    font-weight: 400;
    word-break: keep-all;
}

/* 모달 안 버튼·링크 버튼 터치 대상 44px */
.word_excel_modal .modal-body .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    min-height: 44px;
    border-radius: var(--c-radius);
}

/* 파일 선택 칸 (입력칸과 같은 테두리, 긴 파일 이름 넘침 방지) */
.word_excel_file {
    width: 100%;
    min-height: 44px;
    padding: 8px 10px;
    border: 1px solid var(--c-input-border);
    border-radius: var(--c-radius);
    background: #ffffff;
    font-size: .85rem;
}

.word_excel_file.is-invalid {
    border-color: var(--c-unknown);
}

.word_excel_error {
    margin: 6px 0 0;
    color: var(--c-unknown);
    font-size: .82rem;
    white-space: pre-line;
    word-break: keep-all;
}

/* 요약 타일 4칸 (전체·등록 예정·중복·오류, 뒤에 선언된 공통 .summary_tiles 3칸보다 우선) */
.summary_tiles.word_excel_summary {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 6px;
}

.word_excel_summary .summary_tile_value {
    font-size: 1.1rem;
}

/* 상태별 보기 필터 줄 */
.word_excel_filter {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 8px;
}

.word_excel_filter label {
    flex: 0 0 auto;
    margin: 0;
    color: var(--c-title);
    font-size: .85rem;
    font-weight: 700;
}

.word_excel_filter .form-control {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 44px;
}

/* 줄별 결과 표 영역 (영역 안 가로·세로 스크롤, 머리줄 고정) */
.word_excel_table_wrap {
    max-height: 50vh;
    overflow: auto;
    border: 1px solid var(--c-border);
    border-radius: var(--c-radius);
    -webkit-overflow-scrolling: touch;
}

.word_excel_table_wrap:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

.word_excel_table th,
.word_excel_table td {
    padding: 8px 10px;
    font-size: .82rem;
    white-space: nowrap;
    vertical-align: middle;
}

.word_excel_table thead th {
    position: sticky;
    top: 0;
    z-index: 1;
    border-top: 0;
    background: var(--c-bg);
    color: var(--c-title);
}

/* 긴 글자 칸 (문장·사유): 줄바꿈 허용, 최소 폭 확보 */
.word_excel_table .word_excel_cell_wrap {
    min-width: 12em;
    white-space: normal;
    overflow-wrap: anywhere;
}

.word_excel_empty {
    margin: 0;
    padding: 20px 0;
    color: var(--c-muted);
    font-size: .85rem;
    text-align: center;
}

/* 오류 상태 배지 (몰라요 표시와 같은 주황 계열, 글자는 작은 글씨 대비 4.5:1 이상인 진한 주황 5.10:1) */
.status_badge_error {
    background: var(--c-unknown-soft);
    color: var(--c-unknown-strong);
}

/* ---- 탭 (nav-tabs): 둥근 알약형 세그먼트 ---- */
.content .nav-tabs {
    display: flex;
    flex-wrap: nowrap;
    gap: 4px;
    margin-bottom: 12px;
    padding: 4px;
    border: 0;
    border-radius: var(--c-radius);
    background: var(--c-line);
}

.content .nav-tabs .nav-item {
    flex: 1 1 0;
    margin: 0;
}

.content .nav-tabs .nav-link {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 40px;
    margin: 0;
    border: 0;
    border-radius: var(--c-radius-sm);
    color: var(--c-muted);
    font-weight: 600;
}

.content .nav-tabs .nav-link:hover,
.content .nav-tabs .nav-link:focus {
    color: var(--c-title);
}

.content .nav-tabs .nav-link.active {
    background: #ffffff;
    color: var(--c-primary);
    box-shadow: 0 1px 3px rgba(30, 35, 64, .08);
}

/* ---- 요약 타일 (테스트 결과·통계 요약, 소개 화면 맛보기 결과와 같은 톤) ---- */
.summary_tiles {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
}

.summary_tile {
    min-width: 0;
    padding: 12px 6px;
    border-radius: var(--c-radius);
    background: var(--c-bg);
    text-align: center;
}

.summary_tile_value {
    display: block;
    color: var(--c-title);
    font-size: 1.35rem;
    font-weight: 800;
    line-height: 1.3;
    white-space: nowrap;
}

.summary_tile_label {
    display: block;
    margin-top: 2px;
    color: var(--c-muted);
    font-size: .78rem;
    font-weight: 600;
    word-break: keep-all;
}

/* 알아요 인디고 / 몰라요 주황 */
.summary_tile_known {
    background: var(--c-primary-soft);
}

.summary_tile_known .summary_tile_value,
.text_known {
    color: var(--c-primary) !important;
}

.summary_tile_unknown {
    background: var(--c-unknown-soft);
}

.summary_tile_unknown .summary_tile_value,
.text_unknown {
    color: var(--c-unknown) !important;
}

/* 요약 아래 작은 회색 상세 줄 */
.summary_details {
    margin: 12px 0 0;
    padding: 0;
    list-style: none;
    color: var(--c-muted);
    font-size: .8rem;
    line-height: 1.6;
    word-break: keep-all;
}

.summary_details li {
    display: inline;
}

.summary_details li + li::before {
    content: " · ";
}

/* 결과 화면 버튼 (다시 하기 주 버튼 전체 폭, 반응속도 다시 측정 보조) */
.result_actions {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 14px;
}

.result_actions .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 48px;
    font-size: 1rem;
}

/* ---- 정보 행 목록 (마이페이지 내 정보: 왼쪽 라벨 회색, 오른쪽 값) ---- */
.info_list {
    margin: 0;
}

.content-wrapper .info_list .info_row {
    display: flex;
    margin: 0;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 48px;
    padding: 10px 0;
    border-bottom: 1px solid var(--c-line);
}

.info_list .info_row:first-child {
    padding-top: 0;
}

.info_list .info_row:last-child {
    padding-bottom: 0;
    border-bottom: 0;
}

/* 라벨 : 입력칸 라벨(label)과 배지 등 값 앞 이름(span.info_label) 공통 */
.content-wrapper .info_list .info_row > label,
.content-wrapper .info_list .info_row > .info_label {
    flex: 0 0 auto;
    margin: 0;
    color: var(--c-muted);
    font-size: .9rem;
    font-weight: 600;
}

.info_list .info_row > .form-control-plaintext {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
    padding: 0;
    color: var(--c-title);
    font-weight: 600;
    text-align: right;
    text-overflow: ellipsis;
}

/* 줄바꿈 값 (긴 이름 등 공백 없는 긴 글자도 잘리지 않고 다음 줄로) */
.info_list .info_row > .info_value_wrap {
    overflow-wrap: anywhere;
    word-break: break-all;
}

/* ---- 계정 관리 상세 (회원·관리자 상세 공통) ---- */
/* 관리 버튼 줄 : 버튼을 2개씩 줄 바꿈 (좁은 화면에서도 '비밀번호 초기화' 한 줄 유지, 홀수 개면 마지막 버튼은 한 줄 전체) */
.card-footer.user_actions {
    flex-wrap: wrap;
}

.user_actions .btn {
    flex: 1 1 calc(50% - 4px);
    padding: 0 8px;
}

.user_actions .button_main {
    flex-grow: 1;
}

/* 임시 비밀번호 : 옮겨 적기 쉬운 큰 고정폭 글자 (문장 안 강조 상자) */
.temporary_password {
    display: inline-block;
    margin: 4px 0;
    padding: 4px 12px;
    border-radius: var(--c-radius);
    background: var(--c-primary-soft);
    color: var(--c-title);
    font-family: SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: .1em;
    word-break: break-all;
    user-select: all;
}

/* ---- 터치 대상 최소 높이 44px (본문의 일반 버튼, 작은 버튼 제외) ---- */
.content-wrapper button.btn:not(.btn-sm):not(.btn-xs):not(.btn-link) {
    min-height: 44px;
}

/* ==========================================================================
 * 5. 관리자 레이아웃 (body.officer_layout, defaultLayout에서 SA·ADMIN 로그인 시 추가)
 *    - 1장 앱 폭 규칙 미적용: 화면 전체 폭, Bootstrap 그리드·반응형 유틸 정상 동작
 *    - 992px 초과: AdminLTE 기본 데스크톱 사이드바 (layout-fixed, 항상 펼침, 본문은 사이드바 오른쪽)
 *    - 992px 이하: AdminLTE 기본 서랍 (햄버거로 열기, 덮개 누르면 닫기)
 * ========================================================================== */
/* 바탕: 앱 영역 바깥 바탕 대신 본문 바탕색 (1장 앱 폭 변수는 관리자 화면에서 쓰이지 않음) */
body.officer_layout {
    background-color: var(--c-bg);
}

/* iPhone 가로 화면 노치 영역 여백 (viewport-fit=cover 로 화면 전체 폭 본문·고정 사이드바가 노치 아래까지 넓어지는 것 방지, 그 외 기기는 0)
 * - 본문 : body 좌우 안쪽 여백
 * - 고정 사이드바 : body 여백 영향을 받지 않으므로 사이드바 안쪽 왼쪽 여백 */
body.officer_layout {
    padding-left: env(safe-area-inset-left, 0px);
    padding-right: env(safe-area-inset-right, 0px);
}

body.officer_layout .main-sidebar {
    padding-left: env(safe-area-inset-left, 0px);
}

/* 사이드바: 펼친 데스크톱 사이드바는 그림자(elevation-4) 대신 오른쪽 1px 선 */
body.officer_layout .main-sidebar {
    border-right: 1px solid var(--c-line);
    box-shadow: none !important;
}

/* 사이드바 메뉴 영역: 낮은 창 높이에서 메뉴가 잘리지 않도록 사이드바 안 세로 스크롤 */
body.officer_layout .main-sidebar .sidebar {
    overflow-y: auto;
}

/* 사이드바 메뉴 묶음 사이 간격 제거 (관리자 메뉴는 묶음 제목이 없어 묶음 경계에서만 간격이 벌어지는 현상 방지, 항목 간격 43px 통일) */
body.officer_layout .main-sidebar .sidebar nav + nav {
    margin-top: 0 !important;
}

/* 데스크톱 사이드바 자리 바탕 (992px~, 펼침 상태): 고정(fixed) 사이드바 높이는 창 높이라 긴 화면 전체 캡처·인쇄에서 아래가 끊겨 보이므로,
   본문 틀(.wrapper) 왼쪽 250px(AdminLTE 사이드바 폭)을 사이드바와 같은 흰 바탕 + 오른쪽 1px 선으로 문서 끝까지 채움 */
@media (min-width: 992px) {
    body.officer_layout:not(.sidebar-collapse) > .wrapper {
        background: linear-gradient(to right, #ffffff 249px, var(--c-line) 249px, var(--c-line) 250px, transparent 250px);
    }
}

/* 좁은 화면 서랍: 열린 사이드바는 회원 서랍과 같은 그림자 */
@media (max-width: 991.98px) {
    body.officer_layout.sidebar-open .main-sidebar {
        border-right: 0;
        box-shadow: var(--drawer-shadow) !important;
    }
}

/* 입력 폼 카드: 넓은 화면에서 입력칸이 지나치게 늘어나지 않도록 최대 폭 (제목 줄과 같은 왼쪽 시작선) */
body.officer_layout .form_card {
    max-width: 760px;
}

/* 태블릿 이상(768px~): 검색 카드 한 줄 배치 (검색 조건·검색어 최대 560px, 좁으면 줄어듦 + 검색·초기화 버튼 고정 폭 96px), 계정 관리 버튼 한 줄 */
@media (min-width: 768px) {
    body.officer_layout .search_card .card-body {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        column-gap: 8px;
    }

    /* AdminLTE 카드 clearfix 가상 요소 제거 (flex 항목으로 잡혀 줄 끝 간격 차지 방지) */
    body.officer_layout .search_card .card-body::after {
        display: none;
    }

    body.officer_layout .search_card .search_label {
        flex: 0 0 100%;
    }

    /* 기준 폭 0에서 최대 560px까지 늘어남 (기준 폭을 560px로 두면 좁은 화면에서 줄어들기 전에 버튼이 다음 줄로 밀림) */
    body.officer_layout .search_card .search_fields {
        flex: 1 1 0;
        max-width: 560px;
        min-width: 0;
        margin-bottom: 0;
    }

    body.officer_layout .search_card .button_row {
        flex: 0 0 auto;
    }

    /* 버튼 폭은 width로 지정 (flex-basis만 두면 버튼 줄 자체 폭이 글자 폭으로 계산되어 버튼이 카드 밖으로 넘침) */
    body.officer_layout .search_card .button_row .btn {
        flex: 0 0 auto;
        width: 96px;
    }

    body.officer_layout .user_actions .btn {
        flex: 1 1 0;
    }
}

/* PC(992px~): 본문 좌우 여백 확대, 본문 최대 폭 1600px (아주 넓은 모니터에서 가운데), 엑셀 모달 넓게 */
@media (min-width: 992px) {
    body.officer_layout .content-header {
        padding: 24px 1rem 12px;
    }

    body.officer_layout .content-wrapper > .content {
        padding: 0 1rem 1rem;
    }

    body.officer_layout .content-header > .container-fluid,
    body.officer_layout .content-wrapper > .content > .container-fluid {
        max-width: 1600px;
    }

    /* 상단 바 가운데 로고 숨김 (펼친 사이드바 브랜드 로고와 중복, 사이드바를 접으면 다시 표시) */
    body.officer_layout:not(.sidebar-collapse) .main-header .main-header-logo {
        display: none;
    }

    /* 엑셀 등록 모달: 결과 표 칸이 많아 PC에서는 최대 1040px (창 양옆 여백 안) */
    body.officer_layout .word_excel_modal .modal-dialog.modal-lg {
        max-width: min(1040px, calc(100% - 3.5rem));
    }

    /* 엑셀 서식 다운로드 버튼: 넓은 모달에서 한 줄 전체로 늘어나지 않게 글자 폭 + 최소 240px */
    body.officer_layout .word_excel_modal #excelTemplateButton {
        display: inline-flex;
        width: auto;
        min-width: 240px;
    }
}

/* 노트북 PC(1200~1399px): 회원 목록 8칸이 가로 스크롤 없이 들어가도록 두 값 칸(cell_stack)·보조 머리글(th_sub) 두 줄 쌓기, 이름 말줄임 8rem */
@media (min-width: 1200px) and (max-width: 1399.98px) {
    body.officer_layout .table .cell_stack .stack_line,
    body.officer_layout .table .th_sub {
        display: block;
    }

    body.officer_layout .table .cell_stack .stack_separator,
    body.officer_layout .table .th_sub_bracket {
        display: none;
    }

    /* 보조 머리글: 아래 줄 작은 글씨 */
    body.officer_layout .table .th_sub {
        font-size: .7rem;
        font-weight: 500;
    }

    body.officer_layout .table .cell_ellipsis_name {
        max-width: 8rem;
    }
}

/* 넓은 PC(1200px~): 뜻·문장 말줄임 칸 폭 확대, 목록 표 칸 좌우 여백 축소 (회원 목록 8칸 한 화면 표시), 계정 상세 정보 2열 */
@media (min-width: 1200px) {
    /* 긴 뜻·문장 칸 전용 (아이디·이름 등 일반 말줄임 칸은 기본 12rem 유지) */
    body.officer_layout .table .cell_ellipsis_wide {
        max-width: 24rem;
    }

    body.officer_layout .card > .table-responsive > .table:not(.table-sm) th,
    body.officer_layout .card > .table-responsive > .table:not(.table-sm) td {
        padding-left: .6rem;
        padding-right: .6rem;
    }

    /* 계정 상세(회원·관리자) 정보 목록: 2열 그리드 (기본 정보 카드는 입력 폼과 달리 본문 전체 폭) */
    body.officer_layout .info_list_columns {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        column-gap: 32px;
        align-content: start;
    }

    body.officer_layout .info_list_columns::after {
        display: none;
    }

    /* 정보 행이 아닌 안내 문구는 두 열 전체 */
    body.officer_layout .info_list_columns > :not(.info_row) {
        grid-column: 1 / -1;
    }

    /* 첫 줄 오른쪽 칸: 왼쪽 칸(first-child)과 같은 위 여백 0 */
    body.officer_layout .info_list_columns > .info_row:nth-child(2) {
        padding-top: 0;
    }

    /* 마지막 줄 왼쪽 칸(홀수 번째이면서 끝에서 두 번째): 오른쪽 칸(last-child)과 같이 아래 선·여백 없음 */
    body.officer_layout .info_list_columns > .info_row:nth-child(odd):nth-last-child(2) {
        padding-bottom: 0;
        border-bottom: 0;
    }

    /* 계정 관리 버튼 줄: 오른쪽 정렬, 글자 폭 버튼 (최소 120px) */
    body.officer_layout .card-footer.user_actions {
        justify-content: flex-end;
    }

    body.officer_layout .user_actions .btn {
        flex: 0 0 auto;
        min-width: 120px;
        padding: 0 16px;
    }
}

/* ==========================================================================
 * 6. 하단 탭 바·선택 시트 (layout/tabBar, 로그인 사용자 화면, 폭 991.98px 이하에서만 표시)
 *    - 회원 레이아웃은 앱 영역(최대 480px) 폭에 맞춰 가운데, 관리자 레이아웃(/officer 밖 화면)은 화면 전체 폭
 *    - 겹침 순서: 탭 바(1032) < 사이드바 덮개(1037)·사이드바(1038) < 시트 덮개(1040)·시트(1041) < 모달(1050)
 * ========================================================================== */
:root {
    /* 탭 바 높이 (홈 표시줄 여백 제외, 탭 누름 영역 높이) */
    --app-tab-bar-height: 58px;
    /* 화면 아래 안전 여백 (iPhone 홈 표시줄, viewport-fit=cover 일 때만 값 있음) */
    --app-safe-bottom: env(safe-area-inset-bottom, 0px);
    /* 탭 바·시트 바깥 덮개 색 (사이드바 덮개와 같은 색) */
    --app-sheet-backdrop: rgba(30, 35, 64, .35);
}

/* 넓은 폭(992px~): 탭 바·시트 숨김 (PC는 왼쪽 메뉴 사용) */
.app_tab_bar,
.app_tab_bar_spacer,
.app_sheet,
.app_sheet_backdrop {
    display: none;
}

@media (max-width: 991.98px) {
    /* ---- 본문 끝 여백: 탭 바 높이 + 위 테두리 1px + 홈 표시줄 (푸터·마지막 내용·페이지 버튼이 가리지 않게) ---- */
    .app_tab_bar_spacer {
        display: block;
        height: calc(var(--app-tab-bar-height) + 1px + var(--app-safe-bottom));
    }

    /* ---- 탭 바 본체 ---- */
    .app_tab_bar {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1032;
        margin: 0 auto;
        padding-bottom: var(--app-safe-bottom);
        background-color: var(--c-card);
        border-top: 1px solid var(--c-border);
        box-shadow: 0 -4px 16px rgba(30, 35, 64, .06);
    }

    /* 회원 레이아웃: 앱 영역 폭 */
    body:not(.officer_layout) .app_tab_bar,
    body:not(.officer_layout) .app_sheet {
        max-width: var(--app-max-width);
    }

    .app_tab_list {
        display: flex;
        margin: 0;
        padding: 0;
        list-style: none;
    }

    /* 탭 칸: 남은 폭을 같은 비율로 나눔 (권한에 따라 탭 수가 달라도 균등) */
    .app_tab_item {
        flex: 1 1 0;
        min-width: 0;
    }

    /* 탭: 아이콘 위·이름 아래 세로 가운데 정렬, 칸 전체가 누름 영역 */
    .app_tab {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        width: 100%;
        height: var(--app-tab-bar-height);
        padding: 0 2px;
        border: 0;
        border-radius: 0;
        background-color: transparent;
        color: var(--c-muted);
        font: inherit;
        text-decoration: none;
        -webkit-tap-highlight-color: transparent;
    }

    .app_tab:hover,
    .app_tab:focus {
        color: var(--c-title);
        text-decoration: none;
    }

    .app_tab:focus {
        outline: none;
    }

    .app_tab:focus-visible {
        outline: 2px solid var(--c-primary);
        outline-offset: -4px;
        border-radius: var(--c-radius-sm);
    }

    /* 현재 화면이 속한 탭 */
    .app_tab.active,
    .app_tab.active:hover {
        color: var(--c-primary);
    }

    .app_tab_icon {
        width: 1.5em;
        font-size: 1.2rem;
        line-height: 1;
        text-align: center;
    }

    /* 탭 이름: 한 줄, 넘치면 말줄임 */
    .app_tab_label {
        max-width: 100%;
        overflow: hidden;
        font-size: .72rem;
        font-weight: 600;
        line-height: 1.2;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ---- 선택 시트 바깥 덮개 ---- */
    .app_sheet_backdrop {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1040;
        background-color: var(--app-sheet-backdrop);
        opacity: 0;
        transition: opacity .2s ease;
    }

    .app_sheet_backdrop.is_open {
        opacity: 1;
    }

    /* ---- 선택 시트: 아래에서 올라오는 판 (전환 시간은 tabBar.js transitionMs 와 같음) ---- */
    .app_sheet {
        display: block;
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1041;
        max-height: calc(100% - 3.5rem);
        margin: 0 auto;
        overflow-y: auto;
        padding: 8px 12px calc(12px + var(--app-safe-bottom));
        background-color: var(--c-card);
        border-radius: var(--c-radius-lg) var(--c-radius-lg) 0 0;
        box-shadow: 0 -8px 24px rgba(30, 35, 64, .12);
        transform: translateY(100%);
        transition: transform .2s ease;
    }

    .app_sheet.is_open {
        transform: translateY(0);
    }

    .app_sheet:focus {
        outline: none;
    }

    /* hidden 속성 우선 (닫힌 시트·덮개는 화면·낭독에서 제외) */
    .app_sheet[hidden],
    .app_sheet_backdrop[hidden] {
        display: none;
    }

    .app_sheet_header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 0 0 4px 12px;
    }

    .app_sheet_title {
        margin: 0;
        color: var(--c-title);
        font-size: 1.05rem;
        font-weight: 700;
    }

    /* 닫기 버튼: 44px 누름 영역 */
    .app_sheet_close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background-color: transparent;
        color: var(--c-muted);
        font-size: 1.1rem;
    }

    .app_sheet_close:hover,
    .app_sheet_close:focus {
        background-color: var(--c-bg);
        color: var(--c-title);
        outline: none;
    }

    .app_sheet_close:focus-visible {
        outline: 2px solid var(--c-primary);
        outline-offset: 2px;
    }

    /* 시트 항목 (왼쪽 메뉴와 같은 fragment 의 .nav-link, 48px 줄) */
    .app_sheet_list .nav-link {
        display: flex;
        align-items: center;
        gap: 12px;
        min-height: 48px;
        padding: 0 12px;
        border-radius: var(--c-radius);
        color: var(--c-text);
        font-weight: 600;
    }

    .app_sheet_list .nav-link p {
        margin: 0;
    }

    .app_sheet_list .nav-icon {
        width: 1.5rem;
        color: var(--c-muted);
        font-size: 1.1rem;
        text-align: center;
    }

    /* 마우스 올림 배경 (포커스는 배경 대신 테두리 : 시트를 열 때 첫 항목 포커스가 선택된 것처럼 보이지 않게) */
    .app_sheet_list .nav-link:hover {
        background-color: var(--c-bg);
        color: var(--c-title);
    }

    .app_sheet_list .nav-link:focus {
        outline: none;
    }

    .app_sheet_list .nav-link:focus-visible {
        outline: 2px solid var(--c-primary);
        outline-offset: -2px;
    }

    /* 현재 화면 항목 (common.js markActiveSidebarMenu) */
    .app_sheet_list .nav-link.active {
        background-color: var(--c-primary-soft);
        color: var(--c-primary);
    }

    .app_sheet_list .nav-link.active .nav-icon {
        color: var(--c-primary);
    }

    /* 시트가 폭 변경으로 닫힐 때 포커스를 받는 본문 영역 (스크립트 포커스용, 테두리 없음) */
    .content-wrapper[tabindex="-1"]:focus {
        outline: none;
    }

    /* 시트 열림: 배경 스크롤 막기 */
    body.app_sheet_open {
        overflow: hidden;
    }
}

/* 움직임 줄이기 설정: 시트·덮개 전환 없음 */
@media (prefers-reduced-motion: reduce) {
    .app_sheet,
    .app_sheet_backdrop {
        transition: none;
    }
}