@charset "UTF-8";
/* ---------------------------------------------------------------------------
   lm.css - License Manager 화면 보정

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

     1) Bootstrap 4 시절 마크업이 BS5 에서 어색해지는 부분 보정
     2) DataTables 1.13.6(BS4 통합) 을 BS5 처럼 보이게 맞추기

   ★ 색을 직접 적지 말고 Bootstrap 변수를 쓰세요. Hyper 는 밝은/어두운 테마를
     <html data-bs-theme> 로 바꾸는데, 색을 박아 두면 어두운 테마에서 글자가
     안 보입니다.
   --------------------------------------------------------------------------- */
/* ★ Hyper 의 CSS 변수 접두사는 --bs- 가 아니라 **--ct-** 입니다.
   (--ct-primary, --ct-body-bg, --ct-border-color ...)
   --bs-* 로 쓰면 값이 비어 색이 통째로 사라집니다. 실제 화면에서
   확인하고 잡은 문제라 여기 적어 둡니다. 새 규칙을 넣을 때도
   --ct-* 를 쓰고 하드 폴백을 함께 두세요. */


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

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

.lm-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: 12px; font-weight: 600;
}

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

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

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

   ★ 이 규칙은 app.min.css **뒤에** 실려야 이깁니다. config/common.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 이 없어졌습니다. 화면 119곳이 이 클래스에 기대어
  여백을 얻고 있어서, 전부 고치는 대신 여백만 되살립니다.
*/
.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;
}

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

/* --- DataTables 2.3.8 을 Hyper(Bootstrap 5) 에 맞추기 -------------------
   1.13.6 -> 2.3.8 로 올리면서 이 보정층이 크게 줄었습니다. 2.x 의
   Bootstrap 5 통합층이 검색창에 .form-control.form-control-sm 을, 길이
   선택에 .form-select.form-select-sm 을 직접 붙여 주기 때문입니다.
   1.x 때는 Bootstrap 4 용 .custom-select 가 붙어 BS5 에서 꾸밈이 통째로
   빠졌고, 그래서 여기서 손으로 다시 그려야 했습니다. 이제 필요 없습니다.

   ★ 클래스 이름이 1.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 는 없어졌습니다.**
   (`_wrapper`, `_info`, `_processing` 만 남습니다.) 검색창을 잡으려면
   `#<표id>_wrapper .dt-search` 를 쓰세요.
   ----------------------------------------------------------------------- */

.dt-container .dt-length,
.dt-container .dt-search,
.dt-container .dt-info,
.dt-container .dt-paging { font-size: calc(.875rem * var(--fb-k, 1)); }

/* 검색줄은 flex 한 줄입니다.

   화면 8개가 검색창 왼쪽에 날짜칸·열 드롭다운·Archive 버튼을 prepend 합니다.
   이것들을 inline-block 으로 두면 글자 baseline 에 걸려 서로 높이가
   어긋납니다 - 클래스 없는 <input> 은 21px, DataTables 가 검색창에 붙여 주는
   .form-control-sm 은 31px 이라 눈에 띄게 틀어집니다. 실제로 View Trial /
   View PO 화면에서 그렇게 보였습니다.

   그래서 정렬을 화면마다 따로 적지 않고 여기서 한 번에 잡습니다.
   화면 쪽에서는 prepend 하는 요소에 .form-control.form-control-sm 또는
   .form-select.form-select-sm 만 붙이면 됩니다. */
.dt-container .dt-search {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: .35rem;
}
.dt-container .dt-search label {
    margin: 0;
    display: flex;
    align-items: center;
    gap: .35rem;
    white-space: nowrap;
}
/* 폭을 auto 로 두는 이유: form-control 의 기본 width:100% 를 그대로 두면
   칸 하나가 줄을 통째로 차지합니다. */
.dt-container .dt-search input,
.dt-container .dt-search select { display: inline-block; width: auto; }
.dt-container .dt-search #fromDate,
.dt-container .dt-search #toDate { width: 130px; }

.dt-container .dt-length label  { margin-bottom: 0; }

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

/* --- 표 한 벌 (2026-10-01) ----------------------------------------------
   화면마다 table-striped · table-bordered · table-sm · table-condensed(BS3) 가
   섞여 있어 같은 앱인데 표 모양이 제각각이었습니다. 화면의 모든 .table 을
   Hyper 앱 화면(Products · Orders 목록)의 모양 하나로 맞춥니다.

     - 머리는 연회색 바탕(Hyper 의 table-light 와 같은 색), 굵은 글씨
     - 줄은 가로줄만. 세로줄 · 바깥 테두리 · 줄무늬는 없음
     - 마우스를 올린 줄은 연하게 강조 (table-hover 를 안 적어도)
     - 칸 안 글자는 세로 가운데 (Hyper 의 table-centered)
     - 칸 여백은 한 가지 (.5rem .75rem). table-sm 도 같은 여백

   클래스를 화면마다 다시 적지 않아도 이 규칙이 덮습니다. 새 화면은
   <table class="table"> 만 적으면 됩니다.

   여백만 :where() 로 우선순위를 0 으로 낮춰 두었습니다. 넓은 표를 위해
   따로 여백을 줄인 표(목록 .lm-list, 판매 보고서 .sr-table, PO 상세 풍선
   .lm-od-table 등)는 제 규칙이 이깁니다.

   띄운 칸 제목(.lm-float-head, 본문 밖 body 에 붙음)도 같은 모양이어야 해서 함께 겁니다.

   ★ 종이 양식(인쇄용 PO 처럼 칸마다 테두리가 있어야 하는 표)은
     class 에 lm-doc 을 붙이면 이 규칙에서 빠집니다.
   ----------------------------------------------------------------------- */
:is(.content, .lm-float-head) .table:not(.lm-doc) {
    --ct-table-striped-bg: transparent;           /* table-striped 무력화 */
    vertical-align: middle;
}
:is(.content, .lm-float-head) .table:not(.lm-doc) > :not(caption) > * { border-width: 0; }            /* table-bordered 의 바깥 테두리 */
:is(.content, .lm-float-head) .table:not(.lm-doc) > :not(caption) > * > * {                           /* table-bordered 의 세로줄 */
    border-left-width: 0; border-right-width: 0; vertical-align: middle;
}
:is(.content, .lm-float-head) .table:not(.lm-doc) > :not(caption) > :not(thead) > tr:last-child > * { border-bottom-width: 0; }
:is(.content, .lm-float-head) .table-bordered:not(.lm-doc) tbody { border-top: 0; }
:is(.content, .lm-float-head) :where(.table:not(.lm-doc)) > :not(caption) > * > * { padding: .5rem .75rem; }
:is(.content, .lm-float-head) .table:not(.lm-doc) > thead > tr > th,
:is(.content, .lm-float-head) .table:not(.lm-doc) > thead > tr > td {
    --ct-table-bg: var(--ct-light, #eef2f7);
    font-weight: 600;
    border-bottom-width: var(--ct-border-width, 1px);
}
:is(.content, .lm-float-head) .table:not(.lm-doc) > tbody > tr:hover > * {
    --ct-table-color-state: var(--ct-table-hover-color);
    --ct-table-bg-state: var(--ct-table-hover-bg);
}

table.dataTable { border-collapse: collapse !important; }
/* 칸 제목을 고정한 표는 collapse 이면 칸 너비가 바뀔 때 Chrome 이 머리글을
   첫 데이터 줄 아래로 그립니다. separate 로 두고 칸 사이는 0 이라 가로줄만 있는 모양은 같습니다. */
table.dataTable.lm-sticky-head,
table.dataTable.lm-list {
    border-collapse: separate !important;
    border-spacing: 0;
}

/* --- 선택 체크박스 열 -----------------------------------------------------
   Select All / Select None 버튼 대신 행마다 체크박스를 둡니다. 머리글의
   체크박스는 지금 검색·필터에 걸린 행 전부를 켭니다. 고른 행은
   table.rows('.selected') 로 잡히므로 Merge / Export Selected 쪽 코드는
   그대로입니다.

   ★ 선택된 행 색은 DataTables 가 --dt-row-selected 로 뽑아 쓰는데 기본값이
     Bootstrap 파랑(13,110,253) 입니다. Hyper 의 보라(--ct-primary #727cf5)
     로 맞춥니다. 이 변수는 #rrggbb 가 아니라 **쉼표로 끊은 RGB 삼원색**
     이어야 합니다 - rgb()/rgba() 안에 그대로 펼쳐 쓰기 때문입니다. */
:root {
    --dt-row-selected: 114, 124, 245;
    --dt-row-selected-text: 255, 255, 255;
    --dt-row-selected-link: 255, 255, 255;
}

/* ★ 머리글에 정렬 화살표가 **두 개씩** 그려지고 있었습니다.

   Hyper 의 표 스타일은 DataTables **1.x** 를 기준으로 만들어져서, 정렬
   화살표를 `thead th::after` 에 remixicon 글리프로 직접 그립니다. 그런데
   DataTables **2** 는 `.dt-column-order` 스팬을 만들어 ▲▼ 를 스스로
   그립니다. 그래서 지금은 머리글 왼쪽에 DataTables 것이, 오른쪽에 Hyper
   것이 함께 나옵니다.

   Hyper 는 그 화살표 자리를 비우려고 `.dt-column-header` 와
   `.dt-column-title` 에 각각 `padding-right: 30px` 을 줍니다. 둘이 겹쳐
   머리글마다 60px 이 낭비되고, 글자가 짧은 열(ID 같은)은 내용보다 훨씬
   넓어집니다 - DataTables 가 내용 폭을 재서 colgroup 에 픽셀로 박기
   때문에 표 전체 폭 배분까지 틀어집니다.

   Hyper 쪽 화살표를 끄고 그 자리 확보용 padding 도 걷어냅니다.
   정렬 표시는 DataTables 2 것 하나만 남습니다. */
.dt-container table.dataTable thead th::after,
.dt-container table.dataTable thead td::after { content: none; }
.dt-container table.dataTable thead .dt-column-header,
.dt-container table.dataTable thead .dt-column-title { padding-right: 0; }

/* Responsive 가 열을 접었을 때 ID 칸에 "펼치기" 표시를 답니다.
   기본 컨트롤은 첫 열에 붙는데 그 자리가 선택 체크박스라, 체크만 하려 해도
   자식 행이 함께 열렸습니다. 컨트롤을 ID 열로 옮기면서 표시도 여기서
   직접 그립니다. Responsive 의 .dtr-control 스타일은 inline 모드 전용이라
   column 모드에서는 아무것도 그려 주지 않습니다. */
.dt-container table.dataTable td.lm-expand { cursor: pointer; }
/* 접힌 표는 행 어디를 눌러도 펼쳐집니다(assets/lm-rows.js) */
.dt-container table.dataTable.collapsed > tbody > tr:not(.child) { cursor: pointer; }
.dt-container table.dataTable.dtr-column.collapsed > tbody > tr > td.lm-expand::before {
    content: "▶";
    display: inline-block;
    margin-right: .35rem;
    font-size: .7em;
    color: var(--ct-secondary-color, #8a969c);
}
.dt-container table.dataTable.dtr-column.collapsed > tbody > tr.parent > td.lm-expand::before {
    content: "▼";
}

/* 선택 열은 체크박스 하나만 들어가므로 최소 폭으로 둡니다.
   .dt-select-col  - DataTables Select 가 그리는 열
   .lm-check-col   - 화면이 직접 <input type=checkbox> 를 넣는 열
                     (manage_bu.php 처럼 Select 확장을 안 쓰는 표) */
.dt-container table.dataTable th.dt-select-col,
.dt-container table.dataTable td.dt-select-col,
.dt-container table.dataTable th.lm-check-col,
.dt-container table.dataTable td.lm-check-col {
    width: 2.4rem;
    text-align: center;
    vertical-align: middle;   /* Bootstrap 의 .table 은 top 이라 칸이 높으면 위로 붙습니다 */
    padding-left: .35rem;
    padding-right: .35rem;
}

/* ★ DataTables 2 는 머리글 내용을 .dt-column-header(flex, space-between) 로
   감싸고 오른쪽에 정렬 아이콘 자리(.dt-column-order)를 둡니다. 제목도 정렬도
   없는 체크박스 열에서는 그 빈 자리가 체크박스를 왼쪽으로 밀어, 머리글
   체크박스와 본문 체크박스가 30px 쯤 어긋나 보였습니다. */
.dt-container table.dataTable th.dt-select-col .dt-column-header,
.dt-container table.dataTable th.lm-check-col  .dt-column-header {
    justify-content: center;
    padding-right: 0;   /* Hyper 가 정렬 아이콘 자리로 30px 을 비워 둡니다 */
}
.dt-container table.dataTable th.dt-select-col .dt-column-order,
.dt-container table.dataTable th.lm-check-col  .dt-column-order { display: none; }
/* 제목 span 은 flex 항목이라 남는 폭만큼 늘어납니다. 그 안에서 체크박스는
   왼쪽에 붙으므로 늘어난 만큼 어긋납니다. 내용 폭으로 줄여야 부모의
   justify-content:center 가 실제로 가운데로 보냅니다.

   ★ 그리고 Hyper 가 `.dt-column-title { padding-right: 30px }` 을 줍니다.
     정렬 아이콘 자리를 비워 두려는 것인데, 체크박스만 든 칸에서는 이
     30px 때문에 체크박스가 정확히 30px 왼쪽으로 밀려 본문 체크박스와
     어긋났습니다. 열 폭도 그만큼 넓어집니다 - DataTables 가 내용 폭을
     재서 colgroup 에 픽셀로 박기 때문입니다. */
.dt-container table.dataTable th.dt-select-col .dt-column-title,
.dt-container table.dataTable th.lm-check-col  .dt-column-title {
    flex: 0 0 auto;
    width: auto;
    padding-right: 0;
    text-align: center;
}

.dt-container table.dataTable .dt-select-col input[type="checkbox"],
.dt-container table.dataTable .lm-check-col  input[type="checkbox"] {
    margin: 0;
    cursor: pointer;
    float: none;   /* Bootstrap 의 .form-check-input 은 폼 안에서 왼쪽으로 띄웁니다 */
    vertical-align: middle;
}

/* 좁은 화면에서 표가 잘리지 않게 */
.dt-container { overflow-x: auto; }
/* DataTables 가 머리 · 표 · 꼬리를 Bootstrap .row 로 감싸는데, .row 의 음수 여백(좌우 12px)이
   위 overflow 칸 밖으로 삐져나와 표가 다 들어가는 화면에도 가로 스크롤이 생겼습니다. */
.dt-container > .row { --bs-gutter-x: 0; --ct-gutter-x: 0; margin-left: 0; margin-right: 0; }
/* 접기(Responsive)를 쓰는 표는 넘치는 열을 스스로 접으므로 가로 스크롤이 필요 없습니다.
   바깥 테두리 1~2px 때문에 스크롤 막대가 생기던 것을 막습니다. */
.dt-container:has(table.dtr-column), .dt-container:has(table.dtr-inline) { overflow-x: hidden; }

/* 화면 아래의 "최근 변경 내역" 패널 (assets/lm-changelog.js) */
#lmChangeLogPanel { margin: 2rem 0 1rem; }
#lmChangeLogPanel .lm-cl-head {
    display: flex; align-items: center; justify-content: space-between;
    cursor: pointer; user-select: none;
}
#lmChangeLogPanel .lm-cl-body { max-height: 320px; overflow-y: auto; }

/* 상단바 로고 */
.logo-topbar .fb-logo-lg        { height: 26px; width: auto; }
.logo-topbar .fb-logo-sm        { height: 24px; width: auto; }

/* ---------------------------------------------------------------------------
   PO · Trial 목록 (assets/lm-list.js, config/lm_list.php)
   칸 폭은 고정 배치라 긴 값은 줄바꿈 대신 … 로 줄이고 마우스를 올리면 전체가 뜹니다.
   --------------------------------------------------------------------------- */
table.lm-list { table-layout: fixed; width: 100% !important; }
table.lm-list > thead > tr > th,
table.lm-list > tbody > tr > td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.lm-list > thead > tr > th { position: relative; }
table.lm-list th.lm-c-select, table.lm-list td.dt-select-col { width: 34px; }
/* 잡는 자리는 12px(7px 은 마우스를 맞추기 어려웠습니다, 2026-10-01).
   드러나는 것은 오른쪽 끝의 가는 선 하나입니다 - 12px 을 통째로 칠하면
   머리글 글자 위에 띠가 얹혀 보입니다. */
table.lm-list th .lm-rsz,
table.lm-colsize th .lm-rsz {
    position: absolute; top: 0; right: 0; width: 12px; height: 100%;
    cursor: col-resize; z-index: 6; user-select: none;
}
table.lm-list th .dt-column-order,
table.lm-colsize th .dt-column-order { pointer-events: none; }
table.lm-list th .lm-rsz::after,
table.lm-colsize th .lm-rsz::after {
    content: ''; position: absolute; top: 3px; bottom: 3px; right: 1px;
    width: 3px; border-radius: 2px; background: transparent;
}
table.lm-list th .lm-rsz:hover::after, body.lm-resizing table.lm-list th .lm-rsz::after,
table.lm-colsize th .lm-rsz:hover::after, body.lm-resizing table.lm-colsize th .lm-rsz::after { background: rgba(114, 124, 245, .6); }
/* BU · FBHQ 목록 칸 폭 (assets/lm-colsize.js). 표는 칸 너비에 맞추고, 넘치면 가로로 스크롤합니다. */
table.lm-colsize { table-layout: fixed; width: 100%; }
table.lm-colsize > thead > tr > th,
table.lm-colsize > tbody > tr > td { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.lm-colsize > thead > tr > th { position: relative; }
body.lm-resizing { cursor: col-resize; user-select: none; }
/* 체인에서 Dead · 보관된 PO 는 회색 */
table.lm-list > tbody > tr.lm-row-dead > td { background-color: #eceff3 !important; box-shadow: none !important; color: #6c757d; }
table.lm-list .lm-bdg { font-size: calc(.72rem * var(--fb-k, 1)); margin-right: 2px; }
.lm-bdg-orange { background: #fd7e14; color: #fff; }
.dt-container .dt-search .lm-cols-btn { padding: .15rem .45rem; }
.lm-head-tip .tooltip-inner { max-width: 28rem; text-align: left; }
.lm-od-pop { max-width: 780px; }
.lm-od-pop .popover-body { padding: .5rem; }
.lm-od-table { font-size: calc(.78rem * var(--fb-k, 1)); margin-bottom: 0; }
.lm-od-table th, .lm-od-table td { white-space: nowrap; padding: .2rem .4rem; }
/* 칸이 많아도 들어가게 안쪽 여백을 줄이고, 정렬 표시 자리도 좁힙니다.
   글자는 다른 화면과 같은 .9rem(14.4px). 예전 .8rem(12.8px)은 목록만 작아 보였습니다 (2026-09-30 사용자 요청). */
table.lm-list > thead > tr > th,
table.lm-list > tbody > tr > td { padding: .45rem .4rem; font-size: calc(.9rem * var(--fb-k, 1)); }
/* 칸이 모자랄 때만 한 단계 작게 (lm-list.js 가 표 폭을 재서 붙입니다, 2026-10-01) */
table.lm-list.lm-compact > thead > tr > th,
table.lm-list.lm-compact > tbody > tr > td { padding: .4rem .25rem; font-size: calc(.8rem * var(--fb-k, 1)); }
table.dataTable.lm-list > thead > tr > th.dt-orderable-asc,
table.dataTable.lm-list > thead > tr > th.dt-orderable-desc { padding-right: 18px; }
table.dataTable.lm-list > thead > tr > th span.dt-column-order { right: 4px; }
/* PO 편집 머리: 대리점 · 현재 · 이전 · 다음 ID (manage_po_edit.php). 앱 표와 같은 테두리 · 머리 색. */
.lm-po-headbox {
    width: 100%; max-width: 100%; border-collapse: separate; border-spacing: 0;
    border: 1px solid var(--ct-border-color, #e5e8eb); border-radius: .25rem; overflow: hidden;
    background: var(--ct-secondary-bg, #fff); font-size: calc(.9rem * var(--fb-k, 1));
}
.lm-po-headbox th, .lm-po-headbox td {
    padding: .35rem .65rem; vertical-align: middle;
    border-bottom: 1px solid var(--ct-border-color, #e5e8eb);
}
.lm-po-headbox tr:last-child th, .lm-po-headbox tr:last-child td { border-bottom: 0; }
.lm-po-headbox th {
    white-space: nowrap; width: 1%; font-weight: 600;
    color: var(--ct-secondary-color, #8a969c); background: var(--ct-tertiary-bg, #f6f7fb);
}
.lm-po-headbox td { color: var(--ct-body-color, #313a46); overflow-wrap: anywhere; }
.lm-po-headbox a { color: var(--ct-primary, #727cf5); font-weight: 600; text-decoration: none; }
.lm-po-headbox a:hover { text-decoration: underline; }

/* ── 단추 한 가지 모양 · 한 가지 크기 (2026-09-30) ──────────────────────────
   사용자 결정: 테두리만 있는 단추를 없애고 모두 바탕을 채운 모양으로, 색만 역할로 가릅니다.
     주 동작 btn-primary · 삭제 · 반려 btn-soft-danger · 나머지 btn-light
   btn-sm 과 기본 크기가 섞여 있어 btn-sm 도 기본 크기로 맞춥니다(아이콘만 있는 작은 단추는 각자 크기를 따로 줍니다). */
.btn-sm, .btn-group-sm > .btn {
    --ct-btn-padding-y: 0.45rem;
    --ct-btn-padding-x: 0.9rem;
    --ct-btn-font-size: calc(0.9rem * var(--fb-k, 1));
    --ct-btn-border-radius: 0.15rem;
}
/* Hyper 의 btn-soft-danger 는 누를 수 없을 때 진한 빨강이 됩니다 - 다른 단추처럼 흐려지기만 하게 */
.btn-soft-danger:disabled, .btn-soft-danger.disabled {
    --ct-btn-disabled-bg: var(--ct-danger-bg-subtle);
    --ct-btn-disabled-color: var(--ct-danger);
    --ct-btn-disabled-border-color: transparent;
}
/* 나란한 단추 간격: 채운 단추는 테두리가 없어, 줄바꿈 공백(약 4px)만으로는 붙어 보입니다.
   공백 + 4px = 8px 로 d-flex gap-2 와 같게 맞춥니다. flex 로 간격을 주는 묶음 · 붙어야 하는 묶음은 빼고.
   .lmc-mid 는 칸 설정의 Add/Remove 처럼 세로로 쌓으므로 왼쪽 여백을 주면 아래 단추가 밀립니다. */
:where(:not(.d-flex):not(.d-inline-flex):not(.btn-group):not(.btn-group-vertical):not(.input-group):not(.dt-buttons):not(.dt-search):not(.pagination):not(.lmc-mid)) > .btn + .btn {
    margin-left: .25rem;
}

/* PO · Trial 목록: 스크롤해도 거르개 줄(보기 개수 · 날짜 · 검색)과 칸 제목이 보이게 (2026-09-30 사용자 요청).
   상단바(Hyper, --ct-topbar-height) 바로 아래에 거르개 줄, 그 아래에 칸 제목. 거르개 줄 높이는 lm-list.js 가
   --lm-th-top 으로 알려 줍니다. 조상에 overflow 가 걸리면 sticky 가 먹지 않으니 넣지 말 것.
   ★ 2026-10-01: 처음 넣은 것이 먹지 않았습니다. (1) 위의 .dt-container { overflow-x: auto } 때문에 표 틀이
     스크롤 상자가 되어 칸 제목이 화면이 아니라 그 틀 안에서만 고정되려 했고, (2) 이 앱의 DataTables(bootstrap5)는
     줄을 .dt-layout-row 가 아니라 .row 로 만들어 거르개 줄 선택자가 맞지 않았습니다.
     목록 표는 칸 폭을 표 폭에 맞춰 나누므로(lm-list.js) 넘치지 않아 가로 스크롤 상자가 필요 없습니다. */
.dt-container.lm-sticky { overflow: visible; }
.dt-container.lm-sticky > .row:first-child {
    position: sticky; top: calc(var(--ct-topbar-height, 70px) + var(--lm-topnav-h, 0px)); z-index: 5;
    background: var(--ct-secondary-bg, #fff); padding-top: .25rem; padding-bottom: .25rem;
}
.dt-container.lm-sticky table.lm-list > thead > tr > th {
    position: sticky; top: var(--lm-th-top, 70px); z-index: 4;
    /* Hyper 가 칸 바탕을 var(--ct-table-bg) !important(투명)로 고정해 background 는 먹지 않습니다 - 변수에 색을 넣습니다 */
    --ct-table-bg: var(--ct-light, #eef2f7); box-shadow: inset 0 -1px 0 var(--ct-border-color, #dee2e6);
}

/* PO · Trial 목록 화면: 표가 좌우로 더 넓게 (2026-10-01 사용자 요청 "양 옆으로 간격을 더 늘릴 수 있는 것 같은데").
   여백이 네 겹(본문 틀 · 바깥 container · 화면 자체 container · 카드 안쪽)이라 사이드바에서 표까지 70px 가까이
   비어 있었습니다. 화면 자체 container 의 좌우 여백을 없애고 카드 안쪽을 절반으로 줄입니다. */
.lm-list-page { padding-left: 0; padding-right: 0; }
.lm-list-page > .card > .card-body { padding-left: .75rem; padding-right: .75rem; }

/* 모든 표의 칸 제목 고정 (assets/lm-sticky.js, 2026-10-01). 표가 폭 안에 들어갈 때만 감싼 상자의 스크롤을 풀어
   (.lm-fit - clip 은 스크롤 상자를 만들지 않아 sticky 가 화면 기준으로 동작) 칸 제목을 붙입니다. top 은 스크립트가 줄마다 줍니다.
   Hyper 는 칸 바탕을 var(--ct-table-bg) !important(기본 투명)로 고정하므로 변수에 색을 넣습니다(table-light 머리는 그 색 그대로). */
.lm-fit { overflow-x: clip !important; overflow-y: visible !important; }
table.lm-sticky-head > thead > tr > th {
    position: sticky; z-index: 3; background-clip: padding-box;
    box-shadow: inset 0 -1px 0 var(--ct-border-color, #dee2e6);
}
table.lm-sticky-head > thead:not(.table-light) > tr > th { --ct-table-bg: var(--ct-light, #eef2f7); }
/* 왼쪽 칸도 고정한 표(매출 현황)의 왼쪽 위 모서리 칸은 위 · 옆 고정 칸보다 위에 */
table.lm-sticky-head > thead > tr > th.sr-c1, table.lm-sticky-head > thead > tr > th.sr-c2 { z-index: 4; }
/* 넘치는 표(가로 스크롤)의 띄운 칸 제목 (assets/lm-sticky.js). 상단바(z-index 1000) 아래, 본문 위. */
.lm-float-head { position: fixed; z-index: 999; overflow: hidden; display: none; background: var(--ct-secondary-bg, #fff);
                 box-shadow: 0 2px 4px rgba(0,0,0,.06); }
.lm-float-head table { margin: 0; table-layout: fixed; }

/* =========================================================================
 * 상단 메뉴 - Hyper 의 Horizontal 레이아웃 (2026-10-15, page/manu.php)
 * <html data-layout="topnav"> + .navbar-custom(상단바) 아래 .topnav(메뉴) 가 Hyper 의 기본 마크업입니다.
 * 아래는 Hyper 기본 모양을 이 앱 색 · 동작에 맞추는 것만 - 사이드바는 없습니다.
 * ========================================================================= */
html[data-layout=topnav] {
    --lm-bar-bg: #1f2d4d; --lm-bar-fg: rgba(255,255,255,.88); --lm-bar-hover: #ffd166; --lm-bar-open-bg: #34487a;
    --lm-bar-user-fg: #9fd0ff; --lm-bar-user-sub: #7fb6ea;
}
/* Hyper 의 상단 메뉴 레이아웃은 본문 폭을 화면의 85~95% 로 줄입니다. 이 앱은 넓은 표가 많아 전체 폭을 씁니다. */
html[data-layout=topnav] .container-fluid { max-width: none; padding-left: 1rem; padding-right: 1rem; }
/* 상단바 왼쪽의 화면 이름(License Manager / Manage License - PO ...)은 보이지 않게 합니다 (2026-10-13). */
.lm-appname { display: none !important; }

/* 메뉴를 상단바 한 줄로 넣은 뒤, 본문 틀의 pt-3(1.5rem)와 화면이 또 주는 pt-3/mt-3 가
   겹쳐 메뉴와 본문이 떨어져 보였습니다. 맨 위 한 겹만 줄입니다 (2026-10-15).
   Hyper 간격 클래스는 !important 라 여기서도 필요합니다. */
html[data-layout=topnav] .content > .container-fluid {
    padding-top: .5rem !important;
}
html[data-layout=topnav] .content > .container-fluid > .container.pt-3:first-of-type,
html[data-layout=topnav] .content > .container-fluid > .container-fluid.pt-3:first-of-type,
html[data-layout=topnav] .content > .container-fluid > form > .container.pt-3:first-of-type,
html[data-layout=topnav] .content > .container-fluid > form > .container-fluid.pt-3:first-of-type {
    padding-top: .25rem !important;
}
html[data-layout=topnav] .content > .container-fluid > .card.mt-3:first-of-type,
html[data-layout=topnav] .content > .container-fluid > form > .card.mt-3:first-of-type,
html[data-layout=topnav] .content > .container-fluid > .container-fluid:first-of-type > .card.mt-3:first-child,
html[data-layout=topnav] .content > .container-fluid > form > .container-fluid:first-of-type > .card.mt-3:first-child {
    margin-top: .25rem !important;
}

/* 상단바: 남색 바탕, 로고 · 계정 */
html[data-layout=topnav] .navbar-custom { background: var(--lm-bar-bg); border-bottom-color: rgba(255,255,255,.08); }
html[data-layout=topnav] .navbar-custom .nav-user { background-color: transparent; border-color: rgba(255,255,255,.08); }
html[data-layout=topnav] .navbar-custom .nav-user:hover,
html[data-layout=topnav] .navbar-custom .nav-user:focus,
html[data-layout=topnav] .navbar-custom .nav-user.show { background-color: var(--lm-bar-open-bg); }
html[data-layout=topnav] .navbar-custom .nav-user h5 { color: var(--lm-bar-user-fg); }
html[data-layout=topnav] .navbar-custom .nav-user h6 { color: var(--lm-bar-user-sub); }
/* 좁은 화면의 메뉴 여닫이(햄버거). 1400px 미만은 세로 메뉴라 보이고, 그 이상에서는 한 줄이라 숨깁니다. */
html[data-layout=topnav] .navbar-toggle span { background-color: var(--lm-bar-fg); }
@media (max-width: 1399.98px) { html[data-layout=topnav] .navbar-toggle { display: block; } }
@media (min-width: 1400px) { html[data-layout=topnav] .navbar-toggle { display: none; } }

/* 메뉴 (.topnav): 로고 · 메뉴 · 계정이 상단바 한 줄에 놓이도록 상단바 안에서 남는 폭을 채웁니다 (2026-10-15).
   Hyper 기본은 상단바 아래 따로 한 줄(sticky)이라 그것을 풀어 줍니다. */
html[data-layout=topnav] { --lm-topnav-h: 0px; }
html[data-layout=topnav] .topnav {
    position: static; flex: 1 1 auto; min-width: 0; margin: 0 .5rem; width: auto;
    background: transparent; border: 0; box-shadow: none; max-height: none; overflow: visible;
}
html[data-layout=topnav] .topnav .navbar { padding: 0; }
html[data-layout=topnav] .topnav .navbar-nav { flex-direction: row; flex-wrap: nowrap; }
html[data-layout=topnav] .topnav .navbar-nav .nav-link {
    display: flex; align-items: center; white-space: nowrap; padding: 0 .8rem;
    height: var(--ct-topbar-height, 70px); color: var(--lm-bar-fg); font-size: .9rem;
}
html[data-layout=topnav] .topnav .navbar-nav .nav-link i { font-size: 1.1rem; margin-right: .4rem; }
/* Hyper 의 화살표는 Material Design Icons 글꼴이라 이 앱에는 없습니다 - 글자 ▾ 로 대신합니다 */
html[data-layout=topnav] .topnav .arrow-down {
    display: inline-block; position: static; right: auto; transform: none; margin-left: .4rem;
    font-size: .75em; opacity: .7;
}
html[data-layout=topnav] .topnav .arrow-down:before { content: "\25BE"; font-family: inherit; }
html[data-layout=topnav] .topnav .navbar-nav .nav-link:hover { background: rgba(255,255,255,.08); color: var(--lm-bar-hover); }
html[data-layout=topnav] .topnav .navbar-nav .nav-link:focus,
html[data-layout=topnav] .topnav .navbar-nav .nav-link:active,
html[data-layout=topnav] .topnav .navbar-nav .nav-link.show,
html[data-layout=topnav] .topnav .nav-item.show > .nav-link {
    color: var(--lm-bar-hover) !important; background: var(--lm-bar-open-bg) !important; outline: 0; box-shadow: none;
}
/* 지금 화면이 속한 메뉴: 노란 글씨 + 아래 줄 */
html[data-layout=topnav] .topnav .nav-item.active > .nav-link { color: var(--lm-bar-hover); box-shadow: inset 0 -3px 0 var(--lm-bar-hover); }

/* 펼침 메뉴는 눌러서 여닫습니다(Hyper 기본인 마우스 올리면 열리는 동작은 끕니다). 항목 하나가 한 줄. */
@media (min-width: 1400px) {
    html[data-layout=topnav] .topnav .dropdown:hover > .dropdown-menu:not(.show) { display: none; }
    html[data-layout=topnav] .topnav .dropdown > .dropdown-menu.show { display: block; }
    html[data-layout=topnav] .topnav .navbar-nav .dropdown .dropdown-menu {
        background: #fff; border: 1px solid var(--ct-border-color, #dee2e6); box-shadow: var(--ct-box-shadow);
        padding: .4rem 0; min-width: 12rem; margin-top: 0;
    }
    html[data-layout=topnav] .topnav .navbar-nav .dropdown .dropdown-menu .dropdown-item {
        padding: .45rem 1.2rem; white-space: nowrap; color: #333;
    }
    html[data-layout=topnav] .topnav .dropdown .dropdown-item:hover,
    html[data-layout=topnav] .topnav .dropdown .dropdown-item:focus,
    html[data-layout=topnav] .topnav .dropdown .dropdown-item:active { background: #e9edf7; color: #1f2d4d; }
    html[data-layout=topnav] .topnav .navbar-nav .dropdown .dropdown-menu .dropdown-item.active,
    html[data-layout=topnav] .topnav .navbar-nav .dropdown .dropdown-menu .dropdown-item.active:hover,
    html[data-layout=topnav] .topnav .navbar-nav .dropdown .dropdown-menu .dropdown-item.active:focus,
    html[data-layout=topnav] .topnav .navbar-nav .dropdown .dropdown-menu .dropdown-item.active:active {
        color: var(--lm-bar-hover); background: transparent; font-weight: 600;
    }
}
/* 드롭다운에서 지금 화면의 항목: 바탕은 그대로 두고 글자만 노란색 */
html[data-layout=topnav] .topnav .navbar-nav .dropdown .dropdown-menu .dropdown-item.active {
    color: var(--lm-bar-hover); background: transparent; font-weight: 600;
}
@media (max-width: 1399.98px) {
    /* 휴대폰·태블릿: 햄버거를 누르면 상단바 아래에 세로 메뉴가 열립니다.
       하위 항목은 띄우지 않고 그 아래에 이어 붙입니다. */
    html[data-layout=topnav] .navbar-custom,
    html[data-layout=topnav] .navbar-custom .topbar { overflow: visible; }
    html[data-layout=topnav] .topnav {
        position: static; flex: 0 0 0; width: 0; min-width: 0; margin: 0;
        max-height: none; overflow: visible;
    }
    html[data-layout=topnav] .topnav .navbar-collapse {
        position: fixed; left: 0; right: 0; top: var(--ct-topbar-height, 70px); z-index: 1004;
        background: var(--lm-bar-bg); padding: .25rem 0 .75rem;
        max-height: calc(100vh - var(--ct-topbar-height, 70px)); overflow-y: auto;
        box-shadow: 0 10px 18px rgba(0,0,0,.28);
    }
    html[data-layout=topnav] .topnav .navbar-nav {
        flex-direction: column; flex-wrap: nowrap; align-items: stretch; width: 100%;
        margin: 0; padding: 0;
    }
    /* 묶음은 정의된 순서 그대로. 한 줄의 아이콘·글자 시작이 같게 맞춥니다. */
    html[data-layout=topnav] .topnav .navbar-nav > .nav-item { width: 100%; margin: 0; }
    html[data-layout=topnav] .topnav .navbar-nav > .nav-item > .nav-link {
        height: auto; width: 100%; margin: 0; padding: .75rem 1.1rem;
        white-space: normal; box-sizing: border-box;
    }
    html[data-layout=topnav] .topnav .navbar-nav > .nav-item > .nav-link > i {
        display: inline-block; width: 1.3rem; flex: 0 0 1.3rem; margin-right: .55rem; text-align: center;
    }
    html[data-layout=topnav] .topnav .navbar-nav .nav-link .arrow-down {
        position: static !important; right: auto !important; transform: none !important; margin-left: auto;
    }
    html[data-layout=topnav] .topnav .nav-item.active > .nav-link { box-shadow: inset 3px 0 0 var(--lm-bar-hover); }
    html[data-layout=topnav] .topnav .navbar-nav .dropdown .dropdown-menu {
        position: static !important; transform: none !important; float: none; width: 100%;
        margin: 0 !important; border: 0; border-radius: 0; box-shadow: none; background: rgba(0,0,0,.18);
        padding: .15rem 0 .4rem !important;
    }
    html[data-layout=topnav] .topnav .dropdown-menu .dropdown-item {
        color: var(--lm-bar-fg); white-space: normal; padding: .5rem 1.1rem .5rem 2.95rem;
    }
    html[data-layout=topnav] .topnav .dropdown .dropdown-item:hover,
    html[data-layout=topnav] .topnav .dropdown .dropdown-item:focus { color: var(--lm-bar-hover); background: rgba(255,255,255,.08); }
    html[data-layout=topnav] .topnav .dropdown .dropdown-item.active {
        color: var(--lm-bar-hover); background: transparent;
    }
}

/* 본문 글자를 한 단계 가볍게 (2026-10-15).
   Noto Sans KR 400 은 예전 화면(맑은 고딕)보다 획이 두꺼워 굵어 보여서, 본문과 입력 칸만 300 으로 내립니다.
   - licensemanager 만 바꿉니다. 이 값은 font-scale.css(네 앱 공유)에 두지 않습니다.
   - 어두운 상단바 · 메뉴 · 드롭다운 · 버튼 · 배지는 얇으면 읽기 어려워 그대로 둡니다(400 / 700).
   - Bootstrap 의 b · strong 은 "부모보다 굵게(bolder)" 라서 부모가 300 이면 400 으로 약해지므로 600 으로 고정합니다.
   되돌리려면 아래 :root 한 줄(--ct-body-font-weight)을 지우거나 400 으로 바꿉니다. */
:root { --ct-body-font-weight: 300; }
.form-control, .form-select { font-weight: 300; }
b, strong, .fw-medium { font-weight: 600; }
.navbar-custom, .lm-topbar-nav, .topbar-menu, .dropdown-menu, .btn, .badge, .page-link { font-weight: 400; }
.btn-sm, .btn { font-weight: 400; }
.badge { font-weight: 700; }