/* ---------------------------------------------------------------------------
   fbhq.css - FunctionBay 자산관리 화면 보정

   Hyper 테마(Bootstrap 5.3) 위에 얹는 얇은 층입니다. 색과 글꼴은 Hyper 가
   정합니다. 여기서는 세 가지만 합니다.

     1) 상단바 · 사이드바의 글자 로고와 아바타
     2) Bootstrap 4 시절 마크업이 BS5 에서 어색해지는 부분 보정
     3) DataTables 1.13.6 을 Hyper 에 맞추기

   ★ 색을 직접 적지 말고 Hyper 의 CSS 변수를 쓰세요. Hyper 는 밝은/어두운
     테마를 <html data-bs-theme> 로 바꾸는데, 색을 박아 두면 어두운 테마에서
     글자가 안 보입니다.

   ★★ Hyper 의 변수 접두사는 `--bs-` 가 아니라 **`--ct-`** 입니다.
     (--ct-primary, --ct-body-bg, --ct-border-color, --ct-secondary-bg ...)
     `--bs-*` 는 아예 정의되어 있지 않아 값이 빈 문자열이 되고 색이 통째로
     사라집니다. 브라우저에서 보기 전에는 눈치채기 어렵습니다.
     새 규칙을 넣을 때는 하드 폴백을 함께 두세요.

     브라우저에서 한 줄로 확인할 수 있습니다.
       getComputedStyle(document.documentElement)
           .getPropertyValue('--ct-primary')    // "#727cf5"
   --------------------------------------------------------------------------- */


/* --- 상단바 / 사이드바 글자 로고 --------------------------------------- */

.fb-appname     { font-size: calc(15px * var(--fb-k, 1)); font-weight: 600; color: var(--ct-body-color, #6c757d); opacity: .75; }
.fb-wordmark    { font-size: calc(15px * var(--fb-k, 1)); font-weight: 700; letter-spacing: -.3px; }
.fb-wordmark-sm { font-size: calc(15px * var(--fb-k, 1)); font-weight: 700; }
.logo-light .fb-wordmark, .logo-light .fb-wordmark-sm { color: #fff; }
.logo-dark  .fb-wordmark, .logo-dark  .fb-wordmark-sm { color: var(--ct-body-color, #6c757d); }

.fb-avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 32px; height: 32px; border-radius: 50%;
    background: var(--ct-primary, #727cf5); color: #fff; font-size: 13px; font-weight: 600;
}


/* --- 빠진 아이콘 폰트 메우기 ------------------------------------------
   Hyper 원본은 아이콘을 두 벌(remixicon + Material Design Icons) 씁니다.
   저장소에는 용량 때문에 **remixicon 한 벌만** 넣었으므로, MDI 글리프를
   기대하는 자리는 글자가 없어 네모(두부)로 나옵니다.
   이 앱에서는 사이드바의 접이식 메뉴('RecurDyn License', '일괄등록')
   오른쪽 화살표가 ⊠ 로 보였습니다.

   app.min.css 에서 MDI 를 쓰는 곳은 7군데뿐이고, 이 앱이 실제로 닿는 것은
   아래 두 개입니다. 나머지(topnav 화살표 · card-radio · password-eye ·
   dragula-handle · rateit)는 이 앱에서 쓰지 않는 부품입니다.

   MDI 폰트를 따로 넣지 않고 remixicon 의 같은 모양으로 바꿉니다.
   글꼴 한 벌이면 내려받을 것이 0.33MB 로 끝납니다.

   ★ 이 규칙은 app.min.css **뒤에** 실려야 이깁니다. reference.php 의 링크
     순서를 바꾸지 마세요.
   ----------------------------------------------------------------------- */

/* 접이식 사이드바 메뉴의 오른쪽 화살표. MDI \f0142 -> remixicon \ea6e */
.side-nav .menu-arrow:before {
    content: "\ea6e";
    font-family: "remixicon";
}

/* 빵부스러기 구분자. 지금은 쓰는 화면이 없지만 나중에 쓰면 같은 증상이 납니다. */
.breadcrumb-item + .breadcrumb-item::before {
    content: var(--ct-breadcrumb-divider, "\ea6e");
    font-family: "remixicon";
}


/* --- Bootstrap 4 잔재 보정 ---------------------------------------------- */

/*
  BS5 에서 .form-group 이 없어졌습니다. 화면 180곳이 이 클래스에 기대어
  여백을 얻고 있어서, 전부 고치는 대신 여백만 되살립니다.
*/
.form-group { margin-bottom: 1rem; }

/*
  옛 코드가 <table class="table"> 없이 맨 <table> 을 쓰는 곳이 있습니다.
  BS5 는 맨 표에 아무 스타일도 주지 않아 줄이 다 붙어 버립니다.
  최소한의 여백과 경계선만 줍니다.
*/
.content table:not(.table):not(.dataTable) td,
.content table:not(.table):not(.dataTable) th {
    padding: .35rem .5rem;
    border-bottom: 1px solid var(--ct-border-color, #e5e8eb);
    vertical-align: middle;
}

/*
  화면 34개가 자기 .container-fluid / .container 를 가지고 있고, manu.php 가
  그 바깥에 Hyper 의 .container-fluid 를 또 엽니다. 좌우 여백이 두 겹이 되어
  넓은 표가 그만큼 좁아지므로 안쪽 것의 여백만 지웁니다.
  (화면 34개를 건드리지 않으려고 이렇게 합니다.)
*/
.content > .container-fluid .container-fluid,
.content > .container-fluid > .container { padding-left: 0; padding-right: 0; }

/* 화면 대부분이 카드 없이 바로 내용을 냅니다. 최소한의 숨 쉴 공간. */
.content > .container-fluid h1,
.content > .container-fluid h2,
.content > .container-fluid h3,
.content > .container-fluid h4 { margin-bottom: 1rem; }


/* --- DataTables 1.13.6 을 Hyper(Bootstrap 5) 에 맞추기 ------------------
   assets/dt/dt.bs5.* 는 1.13.6 의 **Bootstrap 5 통합** 파일로 만들었으므로
   검색창에는 .form-control.form-control-sm, 길이 선택에는
   .form-select.form-select-sm 이 이미 붙습니다. 여기서는 크기와 여백만
   Hyper 쪽에 맞춥니다.

   ★ 클래스 이름은 1.x 것입니다. 2.x 로 올리면 전부 바뀝니다.
       dataTables_wrapper  -> dt-container     dataTables_filter -> dt-search
       dataTables_length   -> dt-length        dataTables_info   -> dt-info
       dataTables_paginate -> dt-paging
     그리고 `#<표id>_filter` / `_length` / `_paginate` **id 가 없어집니다.**
     올릴 때는 deploy/build_dt_bundle.sh 머리주석을 먼저 읽으세요.
   ----------------------------------------------------------------------- */

.dataTables_wrapper .dataTables_length,
.dataTables_wrapper .dataTables_filter,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate { font-size: calc(.875rem * var(--fb-k, 1)); }

/* 라벨과 입력칸이 붙어 보이지 않게. 폭을 auto 로 두는 이유는 화면들이
   검색창 옆에 버튼을 끼워 넣기 때문입니다 - 100% 면 줄이 넘칩니다. */
.dataTables_wrapper .dataTables_filter label  { margin-bottom: 0; }
.dataTables_wrapper .dataTables_filter input  { display: inline-block; width: auto; margin-left: .5rem; }
.dataTables_wrapper .dataTables_length label  { margin-bottom: 0; }
.dataTables_wrapper .dataTables_length select { display: inline-block; width: auto; margin: 0 .35rem; }

.dataTables_wrapper .pagination { margin-bottom: 0; }
.dataTables_wrapper .pagination .page-link { padding: .3rem .6rem; font-size: calc(.875rem * var(--fb-k, 1)); }

/* 표 자체는 Hyper 의 .table 스타일을 쓰도록 둡니다. */
table.dataTable { border-collapse: collapse !important; }
table.dataTable thead th { border-bottom: 2px solid var(--ct-border-color, #e5e8eb); }

/* Hyper 의 app.min.css 는 정렬 아이콘 자리(th::after)를 **모든** 머리칸에
   absolute 로 만듭니다. 정렬을 끈 칸도 빈 상자가 남아, 폭이 좁은 체크칸
   (PC · 모니터 목록의 '현재 페이지 전체 선택')에서는 그 상자가 체크박스를
   덮어 눌리지 않았습니다. 정렬 안 하는 칸에서는 지우고, 아이콘은 장식일
   뿐이니 어디서든 클릭을 가로채지 않게 합니다 (정렬은 칸 자체가 받습니다). */
table.dataTable thead th::after { pointer-events: none; }
table.dataTable thead th.sorting_disabled::after { content: none; }

/*
  ★ `.dataTables_wrapper { overflow-x: auto }` 를 두지 않습니다.
    `scrollX: true` 인 표는 DataTables 가 이미 `div.dataTables_scrollBody` 라는
    가로 스크롤 칸을 만듭니다. 바깥 칸에 또 `overflow-x` 를 주면 스크롤바가
    두 겹으로 생깁니다 (재 보니 바깥 칸이 clientWidth 1152 / scrollWidth 1164
    로, 안쪽 스크롤바 두께만큼 쓸모없이 흐릅니다).
    `scrollX` 를 안 쓰는 표는 화면 쪽에서 `.table-responsive` 로 감쌉니다.
*/

/*
  ★ FixedColumns 4.3.0 의 Bootstrap 5 CSS 는 고정된 열의 배경을 밝은 테마에서
    `white` 로 **박아** 두고, 어두운 테마에서는 `var(--bs-body-bg)` 로 씁니다.
    Hyper 에는 `--bs-*` 가 없으므로 어두운 테마에서 값이 비어 배경이 투명해지고
    **표를 좌우로 스크롤할 때 고정 열 밑으로 다른 열의 글자가 겹쳐 보입니다.**
    두 테마 모두 --ct- 변수로 다시 씁니다.

    표 자체에도 같은 배경을 줘야 고정 열과 본문 열의 색이 어긋나지 않습니다.
    (이 앱의 표는 카드 안에 있지 않아 기본 배경이 투명입니다.)
*/
table.dataTable { background-color: var(--ct-secondary-bg, #fff); }

table.dataTable thead tr > .dtfc-fixed-left,
table.dataTable thead tr > .dtfc-fixed-right,
table.dataTable tfoot tr > .dtfc-fixed-left,
table.dataTable tfoot tr > .dtfc-fixed-right,
table.dataTable tbody tr > .dtfc-fixed-left,
table.dataTable tbody tr > .dtfc-fixed-right,
div.dtfc-left-top-blocker,
div.dtfc-right-top-blocker {
    background-color: var(--ct-secondary-bg, #fff);
}

/* 같은 파일이 스크롤 영역 경계선을 #ddd 로 박아 둡니다. */
div.dataTables_scrollBody,
div.dataTables_scrollFootInner table.table-bordered tr th:first-child,
div.dataTables_scrollHeadInner table.table-bordered tr th:first-child {
    border-left-color: var(--ct-border-color, #e5e8eb) !important;
}


/* --- 넓은 자산 표 (.fb-grid) --------------------------------------------
   PC · 모니터 · TV · Windows Key · 소프트웨어 목록처럼 열이 열 개 넘고
   `scrollX: true` 로 가로로 흐르는 표입니다. 예전에는 화면마다 같은 CSS 를
   `#softwareTable` 로 베껴 두고 있었습니다 (다섯 군데, 한 곳은 아예 빠짐).

   ★★ `table-layout: fixed` 가 이 묶음의 핵심입니다. 이것이 없으면 아래
     `nowrap` 과 열 폭 선언(columnDefs 의 width)이 서로 싸웁니다.

     고정 레이아웃이 아닌 표에서 열 폭은 브라우저에게 '권고' 일 뿐이고,
     `nowrap` 이 걸린 칸은 글자 길이만큼 벌어집니다. 그래서 어느 쪽에
     선언한 폭보다 긴 글자(PC 리스트의 CPU · GPU 모델명)가 한 칸이라도
     들어오면 **그 쪽에서만 열 폭이 전부 다시 계산**됩니다. 실제로 재 본
     값입니다.

       글자가 폭 안에 들어오는 쪽   머리글 [132,123,123,153,...] 표 1917px
                                    본문   [132,123,123,153,...] 표 1917px
       CPU 한 칸이 폭을 넘는 쪽     머리글 [132,123,123,153,...] 표 1917px
                                    본문   [ 93, 70, 81,119,...] 표 1962px

     본문만 넓어지고 머리글은 옛 폭에 남아 둘이 어긋납니다. 쪽을 넘길
     때마다 표가 들썩이는 것이 이것입니다. `text-overflow: ellipsis` 도
     고정 레이아웃에서만 듣기 때문에 글자가 잘리지도 않았습니다.

   ★ 화면 쪽에서는 `autoWidth: false` 로 DataTables 의 폭 재기 자체를 끄고,
     `draw` 마다 `columns.adjust()` 로 머리글을 맞춥니다. 그 두 줄은
     assets/fbhq-table.js 의 `fbGrid()` 가 대신 합니다.
   ----------------------------------------------------------------------- */

/* 글자 크기는 정하지 않습니다 - 아래 '글자 크기' 묶음이 앱 전체를 한
   크기로 맞춥니다. 예전에는 여기(화면마다 베낀 CSS)에서 14px 로 박아
   두어 이 표들만 다른 크기였습니다. */
table.fb-grid { table-layout: fixed; }

table.fb-grid > thead > tr > th,
table.fb-grid > tbody > tr > td {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

/* 잘린 글자는 마우스를 올리면 전체가 보입니다 (fbGrid 가 title 을 답니다). */
table.fb-grid td[title] { cursor: help; }


/* --- 글자 크기 ----------------------------------------------------------
   화면이 마흔 개 넘고 여러 사람 손을 거쳐서, 같은 '화면 제목' 을 어떤 곳은
   `<h2>`, 어떤 곳은 `<h4 class="header-title">` 로 적어 두었습니다. Hyper 에서
   그 둘은 크기가 두 배 넘게 차이 납니다.

       h2                 1.872rem (약 30px)   - 목록·추가·고치기 화면 22개
       h4.header-title      0.9rem (약 14px)   - 직원·조직 화면 8개
       h3                  1.575rem            - '변경 이력' 같은 묶음 제목
       h5                  0.936rem            - 같은 자리인데 다른 크기

   화면마다 markup 을 고치는 대신 여기서 **세 단계로 눌러 맞춥니다.** 새 화면을
   `<h2>` 로 적든 `<h4 class="page-title">` 로 적든 같은 크기로 나옵니다.

       화면 제목    1.125rem (18px)   h2 · .page-title · .header-title
       묶음 제목    1rem     (16px)   h3 · h5
       작은 제목    0.9rem            h6  (본문과 같은 크기, 굵게)

   ★ `.header-title` 은 Hyper 에서 **카드 안의 작은 제목**용이라 대문자 변환과
     자간이 붙어 있습니다. 우리말에는 대문자가 없어 자간만 남아 어색하므로
     함께 풉니다.

   ★ `.content` 안으로 한정합니다. 상단바 · 사이드바(manu.php)와 로그인 화면은
     Hyper 가 정한 크기를 그대로 써야 합니다.

   ★ `.modal-title` 은 건드리지 않습니다. 대화상자 제목은 Bootstrap 이 정합니다.
   ----------------------------------------------------------------------- */

.content h2,
.content .h2,
.content .page-title,
.content .header-title {
    font-size: calc(1.125rem * var(--fb-k, 1));
    font-weight: 600;
    text-transform: none;
    letter-spacing: normal;
}

.content h3:not(.modal-title),
.content h5:not(.modal-title) {
    font-size: calc(1rem * var(--fb-k, 1));
    font-weight: 600;
}

.content h6:not(.modal-title) {
    font-size: calc(.9rem * var(--fb-k, 1));
    font-weight: 600;
}


/* --- 로그인 화면 --------------------------------------------------------- */

.fb-login-wrap {
    min-height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: var(--ct-body-bg, #fafbfe);
    padding: 1.5rem;
}
.fb-login-card { width: 100%; max-width: 420px; }

/* --- 사이드바 로고 -----------------------------------------------------
   펼친 사이드바에는 FunctionBay 심볼을 크게, 접으면 같은 심볼을 작게
   보여 줍니다. 접으면 파란 로고만 남습니다.

   ★ 사이드바 배경이 어둡습니다(Hyper 의 menu.color = dark). 마크 옆에 글자가
     붙은 FunctionBay_1.png 은 그 글자가 검정이라 어두운 배경에서 안 보입니다.
     그래서 심볼만 씁니다 - 심볼 안의 'Function Bay' 는 흰 글자입니다.
   ----------------------------------------------------------------------- */

.leftside-menu .logo .fb-logo-lg {
    /*
      바탕을 깔지 않습니다. 어두운 사이드바에는 글자만 흰색으로 바꾼 그림
      (FunctionBay_1_white.png)을 쓰기 때문입니다.

      ★ 원본 FunctionBay_1.png 의 'FunctionBay' 글자는 투명이 아니라 순검정으로
        칠해져 있습니다(글자 영역 표본 125,918개 중 불투명 34,911개가 전부
        rgb(0,0,0)). 투명한 것은 글자 주변뿐이라, 어두운 배경에 그냥 얹으면
        글자가 사라집니다. 밝은 사이드바로 바꿀 때 쓰는 .logo-dark 자리에는
        원본을 그대로 둡니다.

      ★ **높이로 맞춥니다. 세 앱(fbhq · membermanage · planner)이 같은 값을
        씁니다.** 앱마다 다르면 옮겨 다닐 때마다 로고가 커졌다 작아집니다.

        이 로고는 가로:세로가 4.67:1 이라 높이를 정하면 폭이 그 4.67배로
        따라옵니다. 42px 이면 폭이 196px 입니다 - 사이드바(260px, Hyper 기본값)
        안에 여유 있게 들어갑니다. 한때 폭 100% 로 꽉 채웠는데 너무 컸고,
        50px 도 아직 컸습니다.

        크기를 바꾸려면 이 높이 한 줄만 고치고, 폭이 모자라면 아래
        --ct-leftbar-width 를 같이 올립니다.

        여백을 잘라내는 방법은 안 통합니다. 이 그림은 좌우보다 위아래에 여백이
        더 많아서(실제 그림 3240x572, 캔버스 3367x721), 잘라내면 비율이
        5.66:1 로 더 납작해져 같은 폭에서 오히려 작아집니다.
    */
    height: 42px;
    width: auto;
    display: block;
}

/*
  로고 칸은 Hyper 가 상단바 높이(70px)에 맞춰 둡니다. 로고가 그만큼 커지면
  위아래가 꽉 껴 보이므로 칸을 조금 키우고 가운데로 세웁니다.
*/
.leftside-menu .logo {
    display: flex;
    align-items: center;
    min-height: 66px;
    line-height: 1;
    padding: .5rem .75rem;
}
.leftside-menu .logo .fb-logo-sm { margin: 0 auto; }
.leftside-menu .logo .fb-logo-sm { height: 30px; width: auto; }
.logo-topbar .fb-logo-lg        { height: 26px; width: auto; }
.logo-topbar .fb-logo-sm        { height: 24px; width: auto; }

/* --- 사이드바 폭 -------------------------------------------------------
   Hyper 기본은 260px 입니다. 로고를 1.3배(높이 57px)로 키우려면 폭이 266px
   필요해서 30px 넓혔습니다 - 로고 크기와 사이드바 폭은 같은 이야기입니다.

   메뉴 이름이 우리말이라 자리가 넉넉한 쪽이 낫기도 합니다. 되돌리려면 이
   줄만 지우면 Hyper 기본값(260px)으로 돌아갑니다. 본문 여백은 Hyper 가 이
   변수로 계산하므로 따로 고칠 것이 없습니다.
   ----------------------------------------------------------------------- */

:root { --ct-leftbar-width: 260px; }

/* --- 사이드바 접기 단추 -----------------------------------------------
   맨티스처럼 사이드바 맨 아래에 가로 띠를 두고 가운데 « 아이콘을 놓습니다.
   누르면 아이콘 띠만 남고(condensed), 다시 누르면 펼쳐집니다.

   ★ 클릭 처리는 새로 만들지 않습니다. sidebar-toggle.js 가 이미
     `.button-toggle-menu` 클래스를 가로채 접고 펼치며 고른 상태도
     기억하므로, 이 단추도 같은 클래스를 씁니다.

   ★ position:fixed 로 화면 아래에 붙입니다. 접힌 상태에서 Hyper 가
     사이드바를 position:absolute 로 바꿔 문서 길이만큼 늘이므로, 사이드바
     바닥에 붙이면 긴 화면에서는 맨 끝까지 내려가야 보입니다. 폭은 사이드바
     폭 변수를 그대로 따라갑니다. 사이드바에는 Hyper 가 이미 footer 높이만큼
     아래 여백을 두고 있어 메뉴를 가리지 않습니다.

   ★ 폰 화면(너비 767px 이하)에서는 숨깁니다. 그 폭에서는 ☰ 로 메뉴 전체를
     본문 위로 펼치고 ✕ 로 닫는 다른 동작이라 접기 단추가 필요 없습니다.
   ----------------------------------------------------------------------- */
.fb-sidenav-collapse {
    position: fixed;
    left: 0;
    bottom: 0;
    z-index: 2;
    width: var(--ct-leftbar-width);
    height: 40px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0;
    border-top: 1px solid rgba(128, 128, 128, .25);
    background: var(--ct-menu-bg);
    color: var(--ct-menu-item-color);
    cursor: pointer;
    transition: width .25s ease-in-out;
}
.fb-sidenav-collapse i {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: 16px;
    line-height: 1;
    opacity: .8;
    transition: transform .15s ease-in-out;
}
.fb-sidenav-collapse:hover { color: var(--ct-menu-item-hover-color); }
.fb-sidenav-collapse:hover i { opacity: 1; }
html[data-sidenav-size=condensed] .fb-sidenav-collapse { width: var(--ct-leftbar-width-sm); }
/* 접힌 상태에서는 화살표를 반대로 돌려 "누르면 펼쳐진다" 는 뜻으로 바꿉니다 */
html[data-sidenav-size=condensed] .fb-sidenav-collapse i { transform: rotate(180deg); }
@media (max-width: 767.98px) { .fb-sidenav-collapse { display: none; } }

/* --- 조직도 카드 -------------------------------------------------------
   회사 조직도 그림 모양입니다. 최상위(그룹)를 가로로 나란히 두고, 그 안에서
   부문 → 팀 → 파트 → 사람으로 들여씁니다. 기호(❑ ✓ ▪)는 그림에 쓰던 것을
   그대로 가져왔습니다 - 사람들이 그 모양으로 조직을 읽어 왔습니다.

   좁은 화면에서는 카드가 아래로 접힙니다. 조직도는 넓게 보는 그림이지만
   전화기로도 열어 보기 때문입니다.
   ----------------------------------------------------------------------- */

.fb-oc            { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.fb-oc-col        { flex: 1 1 22rem; min-width: 18rem; max-width: 30rem;
                    border: 1px solid var(--ct-border-color, #e5e8eb); border-radius: .5rem;
                    overflow: hidden; background: var(--ct-secondary-bg, #fff); }

.fb-oc-head       { padding: .6rem .9rem; color: #fff; font-weight: 700; font-size: calc(1.05rem * var(--fb-k, 1));
                    text-align: center; line-height: 1.3; }
.fb-oc-head-sub   { font-weight: 500; font-size: calc(.9rem * var(--fb-k, 1)); opacity: .9; }

.fb-oc-body       { padding: .75rem .9rem; }

.fb-oc-div        { border: 1px solid var(--ct-border-color, #e5e8eb); border-radius: .375rem;
                    padding: .5rem .6rem; margin-bottom: .6rem;
                    background: var(--ct-tertiary-bg, #f6f7fb); }
.fb-oc-div-head   { font-weight: 700; text-align: center; margin-bottom: .4rem; }

.fb-oc-team       { margin-bottom: .55rem; }
.fb-oc-team-name  { font-weight: 700; color: var(--fb-read-color, #000); }
.fb-oc-team-name::before { content: "\2751"; margin-right: .35rem; color: var(--ct-body-color, #6c757d); }

.fb-oc-lead       { padding-left: 1.1rem; color: var(--fb-read-color, #000); }
.fb-oc-lead::before { content: "\2713"; margin-right: .35rem; color: #1f6fb2; }

.fb-oc-part       { padding-left: 1.1rem; }
.fb-oc-part-name  { font-weight: 600; color: var(--fb-read-color, #000); }
.fb-oc-part-name::before { content: "\2713"; margin-right: .35rem; color: #1f6fb2; }

.fb-oc-member     { padding-left: 2.2rem; }
.fb-oc-member::before { content: "\25AA"; margin-right: .35rem; color: var(--ct-body-color, #6c757d); }

.fb-oc-role       { color: var(--ct-body-color, #6c757d); font-weight: 500; }

/* 사람 이름은 기호와 같은 줄에 있어야 합니다. 블록이 되면 아랫줄로 밀립니다. */
.fb-oc-person     { display: inline; }

/* 어두운 테마에서는 검정 대신 밝은 글자. */
:root { --fb-read-color: #000; }
[data-bs-theme="dark"] { --fb-read-color: #f1f3fa; }


/* --- 글자 크기 한 벌 -----------------------------------------------------
   본문과 표는 Hyper 기본(0.9rem = 14.4px)인데, 작은 글씨(라벨 · 배지 · 사이드바
   묶음 이름 · 상단 사용자 정보)가 12px 안팎이라 화면이 전체적으로 작아
   보였습니다. 작은 글씨의 바닥을 올려 License Manager 와 같은 눈높이로 맞춥니다.
   화면마다 고치지 말고 여기 한 곳에서 조정하세요.
   ★ 사람마다 정하는 글자 크기(2026-10-01, planner 방식): 이 파일의 글자 크기는 모두
     calc(X * var(--fb-k, 1)) 로 씁니다. --fb-k 는 assets/font-scale.css 가 정하고(--fb-base × --fb-fs),
     X 는 100% 일 때의 크기라 100% 화면은 예전과 같습니다. 글자만 바꾸고 간격 · 정해진 크기의 상자 안
     글자(아바타 머리글자) · 아이콘은 그대로 둡니다. 새 규칙을 쓸 때도 이렇게 쓰세요. */
.small, small                  { font-size: calc(.875rem * var(--fb-k, 1)); }
label.small, .form-label.small { font-size: calc(.875rem * var(--fb-k, 1)); }
.badge                         { font-size: calc(.8125rem * var(--fb-k, 1)); }
.side-nav .side-nav-title      { font-size: calc(.8125rem * var(--fb-k, 1)); }
.dropdown-header h6, .nav-user h5, .nav-user h6 { font-size: calc(.875rem * var(--fb-k, 1)); }
select option                  { font-size: calc(.9rem * var(--fb-k, 1)); }


/* =========================================================================
 * 모바일 (폭 767px 이하) - 세 앱(fbhq · membermanage · planner) 공통 블록
 * 사이드바는 평소 숨고 ☰ 단추로 밀려 나옵니다(Hyper 기본). 여기서는 그 위에
 * 좁은 화면에서 깨지던 여백 · 표 · 입력칸 · 대화상자를 다듬습니다.
 * 세 앱의 CSS 끝에 같은 내용이 들어 있으니 고치면 셋 다 고칠 것.
 * ========================================================================= */
@media (max-width: 767.98px) {
    /* 평소에는 좁은 아이콘 띠, ☰ 를 누르면 펼쳐집니다(sidebar-toggle.js) */
    html[data-sidenav-size=condensed] { --ct-leftbar-width-sm: 56px; }
    html[data-sidenav-size=full] .leftside-menu { width: min(82vw, 300px); }
    .fb-sidenav-backdrop { position: fixed; inset: 0; z-index: 1054; background: rgba(0,0,0,.45); }
    .navbar-custom .topbar { padding-left: .5rem; padding-right: .5rem; }
    .button-toggle-menu { min-width: 44px; min-height: 44px; }
    .content-page { padding-left: 0; padding-right: 0; }
    .content-page .content { padding-left: .5rem; padding-right: .5rem; }
    .content-page .container-fluid { padding-left: .25rem; padding-right: .25rem; }
    .card-body { padding: .875rem; }
    .page-title-box .page-title, h1, .h1 { font-size: calc(1.25rem * var(--fb-k, 1)); }
    /* iOS 는 16px 미만 입력칸에 초점이 가면 화면을 멋대로 확대합니다 - 글자 크기를 줄여도 16px 아래로는 내리지 않습니다 */
    .form-control, .form-select { font-size: max(16px, calc(16px * var(--fb-k, 1))); }
    .btn { min-height: 38px; }
    /* 표: 화면 밖으로 밀려 나가지 않고 표 안에서 가로로 밀어 봅니다 */
    .table-responsive, .dataTables_wrapper .dataTables_scroll, .dt-scroll { -webkit-overflow-scrolling: touch; }
    /* DataTables 자체 규칙(div.dataTables_wrapper div.…)이 가운데 정렬을 걸어 두어서
       같은 구체성으로 써야 이깁니다 */
    div.dataTables_wrapper div.dataTables_length,
    div.dataTables_wrapper div.dataTables_filter { text-align: left; float: none; }
    div.dataTables_wrapper div.dataTables_filter label { display: flex; align-items: center; width: 100%; }
    div.dataTables_wrapper div.dataTables_filter input { flex: 1 1 auto; width: 100%; min-width: 0; margin-left: .5rem; }
    div.dataTables_wrapper div.dataTables_info { text-align: center; white-space: normal; }
    div.dataTables_wrapper div.dataTables_paginate { float: none; text-align: center; }
    .modal-dialog:not(.modal-fullscreen) { margin: .5rem; max-width: none; }
    .footer { padding-left: .5rem; padding-right: .5rem; text-align: center; left: 0; }
}


/* --- 좁은 화면 표: 행 펼치기 (fbGrid 의 mobileKeep, assets/fbhq-table.js) ---
   색은 Hyper 변수를 써서 어두운 테마도 따라갑니다. */
@media (max-width: 767.98px) {
    /* 가로 스크롤이 아닌 표: DataTables 가 박아 둔 px 폭을 풀고 브라우저가 화면 폭에 맞게 배치 */
    .fb-mobile-auto table.dataTable { width: 100% !important; }
    .fb-mobile-auto table.dataTable th, .fb-mobile-auto table.dataTable td { width: auto !important; }
    table.fb-exp > thead > tr > th,
    table.fb-exp > tbody > tr > td, .fb-mobile table thead th { padding-left: .4rem; padding-right: .4rem; }
    table.fb-exp > thead > tr > th.sorting,
    table.fb-exp > thead > tr > th.sorting_asc,
    table.fb-exp > thead > tr > th.sorting_desc { padding-right: 1.1rem; }
    table.fb-exp > tbody > tr:not(.fb-child-row) { cursor: pointer; }
    table.fb-exp > tbody > tr:not(.fb-child-row) > td:last-child { position: relative; padding-right: 1rem; }
    table.fb-exp > tbody > tr:not(.fb-child-row) > td:last-child::after {
        content: "\ea6e"; font-family: "remixicon"; position: absolute; right: 1px; top: 50%; margin-top: -.6em; opacity: .5;
        transition: transform .15s;
    }
    table.fb-exp > tbody > tr.shown > td:last-child::after { transform: rotate(90deg); }
    table > tbody > tr.fb-child-row > td {
        white-space: normal; overflow: visible; text-overflow: clip; padding: 0;
        background: var(--ct-tertiary-bg, #f7f9fb);
        border-bottom: 1px solid var(--ct-border-color, #e5e8eb);
    }
    dl.fb-child { display: grid; grid-template-columns: 6.5em 1fr; gap: .25rem .75rem; margin: 0; padding: .625rem .875rem; }
    dl.fb-child dt { font-weight: 500; color: var(--ct-secondary-color, #8a969c); }
    dl.fb-child dd { margin: 0; color: var(--ct-body-color, #6c757d); word-break: break-word; }
}

/* 필터 한 줄 (PC · 모니터 · TV 목록). 좁은 화면에서 단추 글자가 세로로 쌓이지 않고 줄바꿈으로 흐릅니다. */
.fb-filterbar .btn { white-space: nowrap; }
.fb-filterbar .btn-group { flex-wrap: nowrap; }

/* 변경 이력 카드의 화살표: 접히면 위를 봅니다 */
.fb-hist-caret { font-size: 1.25rem; transition: transform .15s; }
.fb-hist-closed .fb-hist-caret { transform: rotate(-90deg); }

/* =========================================================================
 * 사이드바 접기 · 펴기와 접힌 사이드바 (planner 와 같은 규칙)
 * ========================================================================= */
/* 사이드바 맨 아래의 [메뉴 접기]. 열려 있을 때는 « 와 '메뉴 접기', 아이콘 띠일 때는 » 와 '메뉴 펴기'. */
.side-nav .fb-nav-fold { margin-top: .75rem; border-top: 1px solid rgba(255, 255, 255, .08); padding-top: .25rem; }
.side-nav .fb-nav-fold .side-nav-link { opacity: .75; }
.side-nav .fb-nav-fold .side-nav-link:hover { opacity: 1; }
.side-nav .fb-nav-fold .fb-fold-open { display: none; }
html[data-sidenav-size=condensed] .side-nav .fb-nav-fold .fb-fold-open { display: inline; }
html[data-sidenav-size=condensed] .side-nav .fb-nav-fold i.fb-fold-open { display: inline-block; }
html[data-sidenav-size=condensed] .side-nav .fb-nav-fold .fb-fold-close { display: none; }

/* Hyper 는 접힌(condensed) 사이드바를 position:absolute 로 둔다. 본문을 스크롤하면 같이 올라가 아이콘이 사라지므로 화면에 붙인다. */
html[data-sidenav-size=condensed]:not([data-layout=topnav]) .wrapper .leftside-menu { position: fixed; }

/* Hyper 는 접힌 사이드바에서 .content-page 의 min-height 를 2000px 로 둔다. 사이드바가 fixed 이면 필요 없어 펼친 때와 같은 값으로 되돌린다. */
html[data-sidenav-size=condensed]:not([data-layout=topnav]) .wrapper .content-page { min-height: calc(100vh - var(--ct-topbar-height) - 2px); }

/* 폼 상단(제목 + 저장 버튼 줄): 스크롤을 내려도 상단 바 아래에 고정 */
.fb-sticky-head { position: sticky; top: var(--ct-topbar-height, 70px); z-index: 999; background: var(--ct-body-bg, #f9f9fd); margin-bottom: .5rem; border-bottom: 1px solid var(--ct-border-color, #e5e8eb); }
html[data-layout-position=scrollable] .fb-sticky-head { top: 0; }