/* 전체 스타일 */
body {
    background-color: #f8f9fa;
}

/* 네비게이션 바 스타일 */
.navbar {
    box-shadow: 0 2px 4px rgba(0,0,0,.1);
}

/* 카드 스타일 */
.card {
    box-shadow: 0 0.125rem 0.25rem rgba(0,0,0,.075);
    border: none;
    margin-bottom: 0.75rem;
}

.card-header {
    background-color: #fff;
    border-bottom: 1px solid rgba(0,0,0,.125);
}

/* 테이블 스타일 */
.table th {
    border-top: none;
    background-color: #f8f9fa;
}

.table td {
    vertical-align: middle;
}

/* 버튼 스타일 (크기는 아래 "UI 밀도" 섹션에서 변수로 일괄 통제) */
.btn {
    transition: background-color 0.3s ease;
}

/* 호버 효과 제거 (menu-link 제외 - 메뉴 드롭다운 position 깨짐 방지) */
.btn:hover, a:hover:not(.menu-link), .nav-link:hover, .dropdown-item:hover {
    transform: none !important;
    box-shadow: none !important;
}
a.menu-link:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* 페이지네이션 스타일 */
.pagination {
    margin-bottom: 0;
}

.page-link {
    color: #0d6efd;
    border: 1px solid #dee2e6;
}

.page-link:hover {
    color: #0a58ca;
    background-color: #e9ecef;
    border-color: #dee2e6;
}

.page-item.active .page-link {
    background-color: #0d6efd;
    border-color: #0d6efd;
}

/* 폼 스타일 */
.form-control:focus {
    border-color: #86b7fe;
    box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
}

/* =========================================================
   UI 밀도(compact) 스케일
   - 목적: 글자·여백을 줄여 한 화면에 더 많은 정보를 담는다.
   - 버튼은 기존에 4종(36/34/28/42px)이 섞여 있었다. 템플릿 939곳을 고치는 대신
     여기서 CSS 변수로 한 번에 통일한다.
   - 예외: body.ui-relaxed 를 지정한 화면(마인드맵)은 적용하지 않는다.
     키오스크(device_base.html)는 이 파일을 로드하지 않아 자동으로 제외된다.
   ========================================================= */

:root {
    /* Pretendard 우선. CDN 이 막히면 그 뒤 시스템 폰트로 자연스럽게 폴백된다. */
    --fcms-font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
        "Apple SD Gothic Neo", "Segoe UI", Roboto, "Helvetica Neue", "Malgun Gothic", sans-serif;

    /* 버튼 단일 크기 (높이 약 30px) */
    --fcms-btn-padding-y: 0.375rem;
    --fcms-btn-padding-x: 0.75rem;
    --fcms-btn-font-size: 0.8125rem;
}

body:not(.ui-relaxed) {
    --bs-font-sans-serif: var(--fcms-font-sans);
    --bs-body-font-family: var(--fcms-font-sans);
    --bs-body-font-size: 0.875rem;      /* 15px → 14px */
}

/* 테마 CSS 가 컴포넌트마다 폰트를 다시 지정하는 곳이 있어 상속을 한 번 더 강제한다 */
body:not(.ui-relaxed),
body:not(.ui-relaxed) .btn,
body:not(.ui-relaxed) .form-control,
body:not(.ui-relaxed) .form-select,
body:not(.ui-relaxed) .table,
body:not(.ui-relaxed) .modal,
body:not(.ui-relaxed) .dropdown-menu,
body:not(.ui-relaxed) .menu {
    font-family: var(--fcms-font-sans);
}

/* ---- 버튼: 크기 하나로 통일 ---- */
body:not(.ui-relaxed) .btn,
body:not(.ui-relaxed) .btn-sm,
body:not(.ui-relaxed) .btn-lg {
    --bs-btn-padding-y: var(--fcms-btn-padding-y);
    --bs-btn-padding-x: var(--fcms-btn-padding-x);
    --bs-btn-font-size: var(--fcms-btn-font-size);
    --bs-btn-border-radius: 0.25rem;
    line-height: 1.25;
}

/* 테이블 안 인라인 액션용. 유일하게 더 작은 크기를 유지한다 */
body:not(.ui-relaxed) .btn-xs {
    --bs-btn-padding-y: 0.1875rem;
    --bs-btn-padding-x: 0.5rem;
    --bs-btn-font-size: 0.75rem;
    /* 인라인 py-0 / px-2 / font-size 가 섞여 18~23px 로 들쭉날쭉했다.
       box-sizing: border-box 라 높이를 고정하면 인라인 padding 과 무관하게 같아진다. */
    height: 1.375rem;
    line-height: 1.25rem;
    padding-top: 0;
    padding-bottom: 0;
}

/* 버튼 글자는 줄바꿈하지 않는다.
   좁은 표 칸에서 "수정" 이 두 줄로 쪼개져 버튼 높이가 47px 로 튀었다(실측). */
body:not(.ui-relaxed) .btn {
    white-space: nowrap;
}

/* 버튼 안 아이콘이 줄높이를 밀어내 크기가 들쭉날쭉하던 것 보정.
   font-size 는 건드리지 않는다 — 테마가 ri-24px 같은 크기 클래스를 쓰는데
   1em 으로 강제하면 네비 아이콘이 24px→15px 로 찌그러진다(실측으로 확인). */
body:not(.ui-relaxed) .btn > i {
    line-height: 1;
    vertical-align: -0.08em;
}

/* 높이를 line-height 로 고정한다.
   min-height 만으로는 아이콘(16px)이 든 버튼이 2px 더 커졌다(실측 30 vs 32).
   inline 요소는 line-height 가 줄상자를 지배하므로 아이콘 크기와 무관하게 높이가 같아진다. */
body:not(.ui-relaxed) .btn:not(.btn-icon):not(.btn-xs) {
    height: 1.875rem;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.75rem;   /* 테두리 1px*2 제외 */
}

/* 입력칸과 같은 행에 놓인 .btn-xs 는 입력 높이에 맞춘다.
   .btn-xs 는 원래 표 안 인라인 액션용(22px)이지만, 입력 옆 삭제 버튼으로 쓰인 곳에서는
   8px 작아 짝이 안 맞아 보였다(FRD 컬럼 편집 행). */
body:not(.ui-relaxed) .d-flex > .form-control ~ .btn-xs,
body:not(.ui-relaxed) .d-flex > .form-select ~ .btn-xs,
body:not(.ui-relaxed) .input-group > .btn-xs {
    height: 1.875rem;
    line-height: 1.75rem;
}

/* 아이콘 전용 버튼은 다른 버튼과 같은 30px 정사각.
   .btn-sm.btn-icon 조합이 테마 규칙에 밀려 34px 로 남아 있었다(실측). */
body:not(.ui-relaxed) .btn.btn-icon,
body:not(.ui-relaxed) .btn.btn-icon.btn-sm,
body:not(.ui-relaxed) .btn.btn-icon.btn-lg {
    width: 1.875rem;
    height: 1.875rem;
    padding: 0;
    line-height: 1.75rem;
}

/* 네비게이션 바는 테마 고유 레이아웃이라 버튼 스케일에서 제외한다 */
body:not(.ui-relaxed) .layout-navbar .btn,
body:not(.ui-relaxed) .menu .btn {
    --bs-btn-padding-y: revert;
    --bs-btn-padding-x: revert;
    --bs-btn-font-size: revert;
    min-height: 0;
}

/* ---- 폼 컨트롤: 버튼과 정확히 같은 높이로 맞춘다 ----
   padding 만 줄였더니 select 가 input·버튼보다 커지고 input-group 의
   버튼이 어긋나 보였다(실측). 버튼과 동일하게 높이를 고정한다. */
body:not(.ui-relaxed) .form-control {
    height: 1.875rem;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.75rem;
    font-size: var(--fcms-btn-font-size);
}

/* select 주의사항 (실측으로 확인한 두 가지)
   1) line-height 를 크게 주면 선택된 텍스트가 박스 밖으로 밀려 사라진다.
   2) 테마가 .form-select 에 padding 12.7px 를 주는데 명시도가 높아
      `body:not(.ui-relaxed) .form-select` 로는 덮이지 않는다 →
      `select.form-select` 로 명시도를 한 단계 올려야 한다.
   높이는 padding 으로 만들고 height 는 강제하지 않는다. */
body:not(.ui-relaxed) select.form-select {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    line-height: 1.5;
    font-size: var(--fcms-btn-font-size);
    height: auto;
    min-height: 1.875rem;
}

/* 크기 변형(-sm/-lg)과 input-group 부속도 같은 높이로 맞춘다.
   처음에 .form-control/.form-select 만 잡았더니 검색창의 돋보기(.input-group-text 46px),
   .form-control-sm / .form-select-sm(40px) 가 입력칸보다 커져 짝이 안 맞았다(실측 22건). */
body:not(.ui-relaxed) .input-group-text,
body:not(.ui-relaxed) .form-control-sm,
body:not(.ui-relaxed) .form-control-lg {
    height: 1.875rem;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 1.75rem;
    font-size: var(--fcms-btn-font-size);
}

/* select 는 line-height 를 키우면 글자가 잘리므로 padding 방식 (위 select 규칙과 동일) */
body:not(.ui-relaxed) select.form-select-sm,
body:not(.ui-relaxed) select.form-select-lg {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    line-height: 1.5;
    font-size: var(--fcms-btn-font-size);
    height: auto;
    min-height: 1.875rem;
}

/* 테마는 RTL 대응으로 모든 폼 규칙에 `html:not([dir="rtl"])` 접두사를 단다.
   그래서 `body:not(.ui-relaxed) .form-select-sm` 정도로는 명시도가 밀려 덮이지 않는다(실측).
   같은 접두사를 붙여 한 단계 올린다. */
html:not([dir="rtl"]) body:not(.ui-relaxed) input.form-control,
html:not([dir="rtl"]) body:not(.ui-relaxed) input.form-control-sm,
html:not([dir="rtl"]) body:not(.ui-relaxed) input.form-control-lg,
html:not([dir="rtl"]) body:not(.ui-relaxed) .input-group-text {
    padding-top: 0;
    padding-bottom: 0;
    height: 1.875rem;
    min-height: 1.875rem;
    line-height: 1.75rem;
}
html:not([dir="rtl"]) body:not(.ui-relaxed) select.form-select,
html:not([dir="rtl"]) body:not(.ui-relaxed) select.form-select-sm,
html:not([dir="rtl"]) body:not(.ui-relaxed) select.form-select-lg {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
    height: auto;
    min-height: 1.875rem;
}

/* .form-floating 은 라벨이 입력 안에 떠 있는 테마 패턴이라 높이를 줄이면 라벨과 값이 겹친다.
   의도된 큰 컨트롤이므로 compact 스케일에서 제외하고, 원래 크기를 그대로 둔다.

   ⚠️ 여기서 `revert` 를 쓰면 안 된다. revert 는 "이전 오리진"(= 브라우저 기본값)으로
   되돌릴 뿐, 같은 author 오리진인 테마 값으로는 돌아가지 않는다. 처음에 padding/height 를
   revert 로 두었더니 테마가 라벨 자리로 비워둔 위쪽 패딩과 3rem 높이가 통째로 사라져
   프로젝트 화면 셀렉트의 글자가 아래로 잘렸다(2026-09-21 실측).
   → 테마 값(mt/css/rtl/core.css)을 그대로 다시 적어 복원한다. */
html:not([dir="rtl"]) body:not(.ui-relaxed) .form-floating > .form-control,
html:not([dir="rtl"]) body:not(.ui-relaxed) .form-floating > .form-select,
body:not(.ui-relaxed) .form-floating > .form-control,
body:not(.ui-relaxed) .form-floating > .form-select {
    height: 3.0000625rem;
    min-height: 3.0000625rem;
    line-height: 1.375;
}

/* 기본 변형 — 라벨이 박스 '안'에서 위로 떠오르므로 위쪽 패딩이 크다.
   input 은 빈 상태(placeholder 노출)에서는 라벨이 가운데 있어 상하 대칭이다. */
html:not([dir="rtl"]) body:not(.ui-relaxed) .form-floating:not(.form-floating-outline) > .form-control {
    padding: 0.8555rem 1rem !important;
}
html:not([dir="rtl"]) body:not(.ui-relaxed) .form-floating:not(.form-floating-outline) > .form-control:focus,
html:not([dir="rtl"]) body:not(.ui-relaxed) .form-floating:not(.form-floating-outline) > .form-control:not(:placeholder-shown),
html:not([dir="rtl"]) body:not(.ui-relaxed) .form-floating:not(.form-floating-outline) > .form-select {
    padding-top: 1.28325rem !important;
    padding-bottom: calc(0.42775rem + 1px) !important;
}

/* outline 변형 — 라벨이 보더 '위'에 걸터앉으므로 상하 패딩이 같다 */
html:not([dir="rtl"]) body:not(.ui-relaxed) .form-floating.form-floating-outline > .form-control,
html:not([dir="rtl"]) body:not(.ui-relaxed) .form-floating.form-floating-outline > .form-select {
    padding-top: 0.8555rem !important;
    padding-bottom: 0.8555rem !important;
}

/* 테마는 일부 input-group 조합에 세로 패딩을 `!important` 로 강제한다(core.css:11263, 11724).
       .input-group:has(button) .form-control            → padding 12.7px 항상
       .input-group-sm:focus-within .form-control:first-child → 포커스 시 8.9px
   명시도로는 못 덮으므로 compact 높이(30px)와 겹치면 위아래 패딩만 25px 가 되어
   글자가 들어갈 자리가 2.6px 밖에 안 남고 잘린다(일정 화면 즐겨찾기 모달 실측).
   가로 패딩은 테마 값을 살리고 세로만 되돌린다. form-floating 은 위 블록이
   더 높은 명시도로 다시 덮으므로 영향받지 않는다. */
body:not(.ui-relaxed) .input-group:has(button) input.form-control,
body:not(.ui-relaxed) .input-group:focus-within input.form-control {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}
body:not(.ui-relaxed) .input-group:has(button) select.form-select,
body:not(.ui-relaxed) .input-group:focus-within select.form-select {
    padding-top: 0.25rem !important;
    padding-bottom: 0.25rem !important;
}

/* input-group 안 버튼은 형제(textarea 등) 높이에 맞춰 늘어나야 한다.
   .btn 에 height 를 고정해 두면 textarea 66px 옆에 30px 버튼이 붙어 어긋난다. */
body:not(.ui-relaxed) .input-group > .btn,
body:not(.ui-relaxed) .input-group > .input-group-text {
    height: auto;
    min-height: 1.875rem;
    align-self: stretch;
}

/* 여러 줄 입력은 높이 고정에서 제외 */
body:not(.ui-relaxed) textarea.form-control,
body:not(.ui-relaxed) select[multiple].form-select,
body:not(.ui-relaxed) select[size].form-select {
    height: auto;
    line-height: 1.5;
    padding-top: 0.375rem;
    padding-bottom: 0.375rem;
}
body:not(.ui-relaxed) .form-label {
    margin-bottom: 0.25rem;
    font-size: 0.8125rem;
}

/* ---- 간격 축소 ---- */
body:not(.ui-relaxed) .card-body {
    padding: 0.875rem;
}
body:not(.ui-relaxed) .card-header {
    padding: 0.625rem 0.875rem;
}
body:not(.ui-relaxed) .table > :not(caption) > * > * {
    padding: 0.4rem 0.5rem;
}
body:not(.ui-relaxed) .modal-body {
    padding: 0.875rem;
}
body:not(.ui-relaxed) .modal-header,
body:not(.ui-relaxed) .modal-footer {
    padding: 0.625rem 0.875rem;
}
body:not(.ui-relaxed) .mb-3 {
    margin-bottom: 0.75rem !important;
}

/* ---- 제목 크기 축소 ---- */
body:not(.ui-relaxed) h1 { font-size: 1.5rem; }
body:not(.ui-relaxed) h2 { font-size: 1.3rem; }
body:not(.ui-relaxed) h3 { font-size: 1.15rem; }
body:not(.ui-relaxed) h4 { font-size: 1.05rem; }
body:not(.ui-relaxed) h5 { font-size: 0.95rem; }
body:not(.ui-relaxed) h6 { font-size: 0.875rem; }

/* === FCMS 유틸리티 클래스 === */

/* 폰트 크기 */
.text-2xs { font-size: 0.7rem; }
.text-xs  { font-size: 0.75rem; }
.text-sm  { font-size: 0.8rem; }
.text-md  { font-size: 0.85rem; }

/* 그룹/팀 카드의 업무 메뉴 링크 묶음.
   flex-wrap 으로 두면 링크 길이가 제각각이라("증명서 발급" vs "게시판") 줄마다 시작 위치가
   어긋나 들쭉날쭉해 보인다. 같은 폭의 열로 끊어 세로선을 맞춘다.
   auto-fill 이라 카드가 좁아지면(모바일) 열 수가 알아서 줄어든다. */
.card-menu-grid {
    display: grid;
    /* 최소 열 폭은 실측 기준 — 가장 긴 링크가 "증명서 발급" 75px 이라 5.5rem(88px)이면
       6글자짜리 메뉴가 새로 생겨도 넘치지 않는다. 더 키우면 열 수가 줄어 카드가 세로로 길어진다. */
    grid-template-columns: repeat(auto-fill, minmax(5.5rem, 1fr));
    gap: 0.35rem 0.5rem;
}
.card-menu-grid > a {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}
.card-menu-grid > a > i {
    flex-shrink: 0;   /* 글자가 길어도 아이콘은 찌그러지지 않게 */
}

/* 이미지 */
.img-cover { object-fit: cover; }

/* 커서 */
.cursor-pointer { cursor: pointer; }

/* ===== 다크모드 오버라이드 ===== */
.dark-style body {
    background-color: transparent;
}
.dark-style .card-header {
    background-color: transparent;
    border-bottom: none;
}
.dark-style .btn-light {
    background-color: rgba(255,255,255,.1);
    border-color: rgba(255,255,255,.15);
    color: rgba(255,255,255,.8);
}
.dark-style .btn-light:hover {
    background-color: rgba(255,255,255,.2);
    color: #fff;
}
.dark-style .table th {
    background-color: rgba(255,255,255,.05);
}
.dark-style .page-link {
    color: var(--bs-primary, #3D4F7C);
    border-color: rgba(255,255,255,.15);
    background-color: transparent;
}
.dark-style .page-link:hover {
    color: var(--bs-primary, #3D4F7C);
    background-color: rgba(255,255,255,.08);
    border-color: rgba(255,255,255,.15);
}
.dark-style .form-control:focus {
    border-color: var(--bs-primary, #3D4F7C);
    box-shadow: 0 0 0 0.25rem rgba(124,110,233,.25);
}

/* 채팅 말풍선 (인라인 스타일 오버라이드) */
.dark-style .chat-bubble-user {
    background-color: #1a4a2e !important;
    color: #e0e0e0 !important;
}
.dark-style .chat-bubble-ai {
    background-color: rgba(255,255,255,.08) !important;
    color: #e0e0e0 !important;
}
.dark-style #chatForm {
    background-color: var(--bs-card-bg, #2b2c40) !important;
    box-shadow: 0 -2px 10px rgba(0,0,0,0.3) !important;
}
.dark-style #fcms_c_req_contents {
    color: inherit !important;
}

/* 칸반 보드 카드 (인라인 스타일 오버라이드) */
.dark-style .board-card-item {
    background: var(--bs-card-bg, #2b2c40) !important;
    border-color: rgba(255,255,255,.1) !important;
}
.dark-style .board-card-item:hover {
    border-color: rgba(255,255,255,.25) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
}

/* 프로젝트 아이콘 컨테이너 (인라인 스타일 오버라이드) */
.dark-style .project-icon-container {
    background-color: rgba(255,255,255,.08) !important;
}
.dark-style .project-icon-wrapper {
    border-color: rgba(255,255,255,.2) !important;
}

/* 구분선, 텍스트 색상 다크모드 보정 */
.dark-style [style*="border-bottom: 1px solid #e9ecef"],
.dark-style [style*="border: 1px solid #e9ecef"] {
    border-color: rgba(255,255,255,.1) !important;
}
.dark-style [style*="color: #495057"] {
    color: rgba(255,255,255,.75) !important;
}
.dark-style [style*="color: #6c757d"] {
    color: rgba(255,255,255,.5) !important;
}
.dark-style [style*="color: #ccc"] {
    color: rgba(255,255,255,.3) !important;
}
.dark-style [style*="color: #888"] {
    color: rgba(255,255,255,.45) !important;
}

/* 프로필 사진 컨테이너 */
.dark-style .profile-pic-container {
    background-color: rgba(255,255,255,.08) !important;
}

/* admin 테이블 헤더 (인라인 #0d6efd 배경) */
.dark-style thead[style*="background-color: #0d6efd"] {
    background-color: rgba(var(--bs-primary-rgb),.3) !important;
}
.dark-style thead[style*="background-color: #0d6efd"] th {
    color: rgba(255,255,255,.85) !important;
}
.dark-style td[style*="color: #212529"] {
    color: inherit !important;
}

/* bg-white 다크모드 보정 */
.dark-style .bg-white {
    background-color: var(--bs-card-bg, #2b2c40) !important;
}

/* 기기 대시보드 시간 텍스트 */
.dark-style [style*="color: #667eea"] {
    color: var(--bs-primary, #3D4F7C) !important;
}