/* ============================================================================
   본문 영역 정리 : 탭 줄 + 목록(bootgrid)

   좌측 메뉴(admin-sidebar.css)와 같은 방식이다.
   마크업과 동작(JS)은 그대로 두고 #menu-viewer 아이디로 우선순위를 올려
   bootstrap.css / index.css 의 규칙을 덮는다.

   #menu-viewer 안에만 걸리므로 좌측 메뉴(#nav_tabs_left_ul)와
   로그인 화면에는 영향이 없다. 메뉴 화면들이 같은 마크업
   (ul.nav-tabs, table.table + bootgrid) 을 쓰므로 주문관리만이 아니라
   모든 메뉴 화면이 같은 모양이 된다.

   색은 관리자 기본색(#006DC0, css/index.css 의 .admin-background)을 쓴다.
   ============================================================================ */

/* ── 본문 바탕 ───────────────────────────────────────────────────────
   오른쪽 내용 칸 전체를 흰색으로 둔다.
   index.html 이 td#menu-viewer 에 인라인으로 #F7F7F7 을 박아 두어
   !important 로 덮는다. (index.html 은 CP949 라 직접 고치지 않는다.) */

#menu-viewer {
    background: #fff !important;
}

/* 검정 테두리 대신 쓰는 옅은 틀. 페이지 마크업의
   style="border:1px solid black" 을 이 클래스로 바꿨다. */
#menu-viewer .soft-frame {
    border: 0;                      /* 수정판도 상자 틀 없이 */
    background: #fff;
}

/* 패널을 두르던 틀(reset.css 의 .border-*-d)을 없앤다.
   흰 바탕에서는 상자 테두리 없이 내용만 놓는 편이 깔끔하다. */
#menu-viewer .border-left-d { border-left: 0; }
#menu-viewer .border-right-d { border-right: 0; }
#menu-viewer .border-bottom-d { border-bottom: 0; }

/* ── 버튼 ────────────────────────────────────────────────────────────
   흰 바탕에 맞춰 전부 같은 결로 맞춘다.
     기본(btn-default) : 흰 바탕 + 옅은 테두리
     파랑(btn-primary) : 관리자 기본색 #006DC0
     초록·주황·빨강    : 부트스트랩 기본색보다 살짝 낮춘 채도
   목록 줄 안의 작은 버튼 크기는 아래쪽의 기존 규칙이 다시 줄인다. */

#menu-viewer .btn {
    border-radius: 6px;
    font-size: 13px;
    padding: 6px 14px;
    box-shadow: none;
    text-shadow: none;
    transition: background-color .15s ease, border-color .15s ease;
}

#menu-viewer .btn:focus,
#menu-viewer .btn:active:focus {
    outline: none;
}

#menu-viewer .btn-sm,
#menu-viewer .btn-group-sm > .btn {
    padding: 4px 10px;
    font-size: 12px;
}

#menu-viewer .btn-default {
    color: #344054;
    background: #fff;
    border: 1px solid #d0d7de;
}

#menu-viewer .btn-default:hover,
#menu-viewer .btn-default:focus,
#menu-viewer .btn-default:active {
    color: #1d2939;
    background: #f2f6fb;
    border-color: #b3c0cd;
}

/* 색 버튼은 아웃라인으로 : 흰 바탕 + 색 테두리 + 색 글자.
   눌러 보면(hover) 그 색의 옅은 바탕이 깔린다. */
#menu-viewer .btn-primary {
    color: #006DC0;
    background: #fff;
    border-color: #006DC0;
}

#menu-viewer .btn-primary:hover,
#menu-viewer .btn-primary:focus,
#menu-viewer .btn-primary:active {
    color: #005ba1;
    background: #eaf3fb;
    border-color: #005ba1;
}

#menu-viewer .btn-success { color: #2e9e63; background: #fff; border-color: #2e9e63; }
#menu-viewer .btn-success:hover,
#menu-viewer .btn-success:focus,
#menu-viewer .btn-success:active { color: #278a56; background: #e9f7ef; border-color: #278a56; }

#menu-viewer .btn-warning { color: #cf8a1d; background: #fff; border-color: #e8a23d; }
#menu-viewer .btn-warning:hover,
#menu-viewer .btn-warning:focus,
#menu-viewer .btn-warning:active { color: #b97a15; background: #fdf3e3; border-color: #d99328; }

#menu-viewer .btn-danger { color: #d64545; background: #fff; border-color: #d64545; }
#menu-viewer .btn-danger:hover,
#menu-viewer .btn-danger:focus,
#menu-viewer .btn-danger:active { color: #c33a3a; background: #fbeaea; border-color: #c33a3a; }

#menu-viewer .btn-info { color: #3193b6; background: #fff; border-color: #3aa4c9; }
#menu-viewer .btn-info:hover,
#menu-viewer .btn-info:focus,
#menu-viewer .btn-info:active { color: #28809f; background: #e8f5fa; border-color: #3193b6; }

/* 신규사원 배지 : 아웃라인 버튼 위에서는 색을 채워 눈에 띄게 */
#menu-viewer .btn-success .badge {
    background: #2e9e63;
    color: #fff;
}

#menu-viewer .btn .glyphicon {
    font-size: 11px;
    margin-right: 2px;
}

#menu-viewer .btn .badge {
    margin-left: 5px;
}

/* 검색 묶음처럼 입력칸에 붙는 버튼은 입력칸(34px)과 같은 높이로.
   .btn 의 6px 패딩으로는 33px 이 되어 이음새에서 1px 어긋난다.
   높이를 못박고 줄높이로 가운데를 맞춘다.
   (사원관리 수정판(30px)은 아래 nhqv-employee 규칙이 다시 낮춘다) */
#menu-viewer .input-group-btn > .btn {
    height: 34px;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 32px;
}

/* 붙어 있는 버튼들의 모서리.
   위 radius 규칙이 #menu-viewer 로 시작해 부트스트랩의 이음새 처리
   (안쪽 모서리 0)를 이겨 버린다. 여기서 다시 안쪽을 0 으로 만들고
   바깥 모서리만 둥글린다. */
#menu-viewer .input-group .btn {
    border-radius: 0;
}

#menu-viewer .input-group .input-group-btn:first-child > .btn:first-of-type {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

#menu-viewer .input-group .input-group-btn:last-child > .btn:last-of-type {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

#menu-viewer .btn-group > .btn {
    border-radius: 0;
}

#menu-viewer .btn-group > .btn:first-child {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}

#menu-viewer .btn-group > .btn:last-of-type {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

#menu-viewer .btn-group > .btn-group:not(:last-child) > .btn:last-of-type {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

#menu-viewer .btn-group > .btn-group:not(:first-child) > .btn:first-child {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}

/* 오른쪽 끝 묶음 안에서 버튼 무리 사이 간격 */
#menu-viewer .admin-toolbar-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ── 조회조건 줄의 입력칸 ────────────────────────────────────────────
   검색창 · 구분(select) · 달력칸은 밝은 회색 테두리.
   검색창에 붙는 돋보기 버튼도 같은 테두리로 한 덩어리가 되게 한다.
   입력 중 칸(focus)은 부트스트랩의 파란 테두리를 그대로 쓴다. */
#menu-viewer .admin-toolbar .form-control,
#menu-viewer .date-range .form-control {
    border-color: #d0d7de;
    color: #344054;
}

#menu-viewer .admin-toolbar .input-group .input-group-btn > .btn {
    border-color: #d0d7de;
}

/* ── 탭 줄 (승인대기 / 승인처리 / 승인취소 ...) ──────────────────────
   상자형 탭을 밑줄형으로 바꾼다. 선택한 탭은 파란 밑줄 + 굵은 글씨. */

#menu-viewer .nav-tabs {
    border-bottom: 1px solid #e4e7eb;
    padding: 0 4px;
}

#menu-viewer .nav-tabs > li {
    margin-bottom: -1px;            /* 밑줄이 탭 줄의 밑선과 겹치게 */
}

#menu-viewer .nav-tabs > li > a {
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    margin: 0;
    padding: 11px 6px;
    background: transparent;
    color: #667085;                 /* 탭 글자는 밝은 회색 */
    font-size: 14px;
    text-align: center;
    transition: color .15s ease, border-color .15s ease;
}

#menu-viewer .nav-tabs > li > a:hover,
#menu-viewer .nav-tabs > li > a:focus {
    border: 0;
    border-bottom: 1px solid #c9d6e4;
    background: transparent;
    color: #006DC0;
}

#menu-viewer .nav-tabs > li.active > a,
#menu-viewer .nav-tabs > li.active > a:hover,
#menu-viewer .nav-tabs > li.active > a:focus {
    border: 0;
    border-bottom: 1px solid #006DC0;
    background: transparent;
    color: #006DC0;
    font-weight: 600;
    cursor: default;
}

/* ── 목록 (bootgrid) ─────────────────────────────────────────────────
   머리줄은 바탕색 없이 위아래 검정 줄만, 줄은 넉넉한 높이, 올린 줄은 파란 기운. */

#menu-viewer .table {
    font-size: 13px;
    margin-bottom: 8px;
}

/* 머리줄 — 바탕색 없이 위아래 밝은 회색 줄만. 굵기도 뺀다. */
#menu-viewer .table > thead > tr > th {
    background: transparent;
    border-top: 1px solid #dfe3e8;
    border-bottom: 1px solid #dfe3e8;
    padding: 10px 8px;
    color: #475467;                 /* 컬럼(머리줄) 글자는 밝은 회색 */
    font-weight: normal;
    white-space: nowrap;
}

/* 정렬 손잡이 (bootgrid 가 th 안에 넣는 a) */
#menu-viewer .table > thead > tr > th > .column-header-anchor {
    color: #475467;
    font-weight: normal;
    text-decoration: none;
}

/* 몸통 글자도 검정(#333, 부트스트랩 기본)이 아니라 진회색으로 */
#menu-viewer .table > tbody > tr > td {
    color: #344054;
}

/* 몸통 */
#menu-viewer .table > tbody > tr > td {
    padding: 8px;
    vertical-align: middle;
    border-top: 1px solid #eef1f4;
}

/* 목록 맨 아래에도 1px 줄을 두어 아래 내용과 구분한다 */
#menu-viewer .table > tbody > tr:last-child > td {
    border-bottom: 1px solid #dfe3e8;
}

/* 줄무늬 없음. 표에는 바탕색을 두지 않는다.
   마크업에 table-striped 가 붙어 있어도 나오지 않게 여기서 지운다. */
#menu-viewer .table,
#menu-viewer .table > tbody > tr,
#menu-viewer .table > tbody > tr > td,
#menu-viewer .table-striped > tbody > tr:nth-of-type(odd),
#menu-viewer .table-striped > tbody > tr:nth-of-type(odd) > td {
    background-color: transparent;
}

/* 마우스를 올린 줄과 고른 줄만 남긴다.
   바탕색이 아니라 지금 무엇을 짚고 있는지 알려 주는 표시다.
   이것까지 없애면 어느 줄을 골랐는지 알 수 없다. */
#menu-viewer .table-hover > tbody > tr:hover,
#menu-viewer .table-hover > tbody > tr:hover > td {
    background-color: #f2f6fb;
}

/* 선택한 줄 (bootgrid 가 active 를 붙인다) */
#menu-viewer .table > tbody > tr.active > td,
#menu-viewer .table > tbody > tr.active:hover > td {
    background-color: #e7effa;
}

/* 굵기 없음.
   포매터가 <b> 나 style="font-weight:bold" 를 직접 박아 넣는 곳이 있어
   자손까지 훑고 !important 를 쓴다. 여기(목록 안)에서만 쓴다. */
#menu-viewer .table > thead > tr > th,
#menu-viewer .table > thead > tr > th *,
#menu-viewer .table > tbody > tr > td,
#menu-viewer .table > tbody > tr > td * {
    font-weight: normal !important;
}

/* ── 셀 글자 ─────────────────────────────────────────────────────────
   가운데 정렬, 굵기 없음.

   이 화면들은 셀 내용을 h5 / h6 로 찍는 관례가 있다. 제목 태그라
   기본으로 굵고 여백이 있어 줄 높이가 들쭉날쭉했다. 크기도 h5 와 h6 가
   섞여 있었다. 목록 안에서는 제목이 아니라 그냥 값이므로 눌러 준다.

   포매터가 style="font-weight:bold" 나 class='text-left' 를 직접 박아
   넣는 곳이 있다. 인라인 스타일은 우선순위가 더 높아 !important 없이는
   덮이지 않는다. 여기서만 쓴다. */
#menu-viewer .table > tbody > tr > td {
    text-align: center;
}

#menu-viewer .table > tbody h1,
#menu-viewer .table > tbody h2,
#menu-viewer .table > tbody h3,
#menu-viewer .table > tbody h4,
#menu-viewer .table > tbody h5,
#menu-viewer .table > tbody h6 {
    margin: 0;
    padding: 0;
    font-size: 13px;
    line-height: 1.5;
    font-weight: normal !important;
    text-align: center !important;
    color: inherit;
}

/* 머리줄도 가운데로 맞춘다 */
#menu-viewer .table > thead > tr > th {
    text-align: center;
}

/* ── bootgrid 발치 (건수 안내 + 쪽 번호) ──
   쪽 번호는 가운데, 건수 안내(1 to 9 of 821)는 오른쪽 끝에 겹쳐 둔다. */

#menu-viewer .bootgrid-footer > .row {
    position: relative;
}

#menu-viewer .bootgrid-footer > .row > [class*="col-"] {
    float: none;
    width: 100%;
    text-align: center;
}

/* 위 col 규칙(width:100%)과 특이도를 맞추려고 같은 깊이로 쓴다.
   얕게 쓰면 width:100% 가 이겨 건수 안내가 가운데에 겹쳐 보인다. */
#menu-viewer .bootgrid-footer > .row > .infoBar {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    width: auto;
    text-align: right;
}

#menu-viewer .bootgrid-footer .infoBar .infos {
    font-size: 12px;
    color: #98a2b3;
}

/* 사원관리 : 발치(쪽 번호)는 SetBottGrid 가 등록·수정 줄의
   가운데 자리(#emp-paging-slot)로 옮겨 담는다. */
#menu-viewer .emp-actions-center {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

#menu-viewer .emp-actions-center .bootgrid-footer {
    padding: 0;
    margin: 0;                      /* bootgrid 기본 margin:15px 0 을 끈다 */
}

/* 등록·수정 줄 안에서는 쪽 번호와 건수 안내를 한 줄로, 세로도 가운데로.
   (건수 안내를 오른쪽 끝에 붙이면 수정저장 버튼과 겹친다)
   글자 흘림(inline) 대신 flex 로 둔다. 흘림은 글자 밑선 때문에
   쪽 번호가 8px 떠 보였다. */
#menu-viewer .emp-actions-center .bootgrid-footer > .row {
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#menu-viewer .emp-actions-center .bootgrid-footer > .row > [class*="col-"] {
    width: auto;
    padding: 0;
    position: static;
    transform: none;
}

#menu-viewer .emp-actions-center .pagination {
    margin: 0;
    display: flex;
}

/* 건수 안내(1 to N of M)를 쪽 번호와 세로 가운데를 맞춘다.
   p 밑여백과 안 보이는 형제 요소 때문에 칸이 글자보다 커서
   칸을 줄 높이만큼 세우고 그 안에서 flex 로 가운데에 둔다. */
#menu-viewer .emp-actions-center .bootgrid-footer > .row > .infoBar {
    align-self: stretch;
    display: flex;
    align-items: center;
}

#menu-viewer .emp-actions-center .infos {
    margin: 0 !important;
}

#menu-viewer .pagination {
    margin: 2px 0;
}

#menu-viewer .pagination > li > a,
#menu-viewer .pagination > li > span {
    border: 1px solid #e4e7eb;
    margin: 0 2px;
    border-radius: 6px;
    color: #475467;
    padding: 4px 10px;
    font-size: 13px;
}

#menu-viewer .pagination > li > a:hover {
    background: #f0f5fa;
    color: #006DC0;
}

#menu-viewer .pagination > li.active > a,
#menu-viewer .pagination > li.active > a:hover,
#menu-viewer .pagination > li.active > span {
    background: #006DC0;
    border-color: #006DC0;
    color: #fff;
}

#menu-viewer .pagination > li.disabled > a,
#menu-viewer .pagination > li.disabled > a:hover {
    color: #c7ced6;
    background: transparent;
    border-color: #eef1f4;
}

/* NO DATA 문구 */
#menu-viewer #order-wait-list-none h1,
#menu-viewer [id$='-none'] h1 {
    color: #d0d5dd;
    font-size: 28px;
    letter-spacing: 2px;
    margin: 60px 0;
}

/* ── 조회조건 줄과 목록 사이 간격 ────────────────────────────────────
   벌어진 원인이 셋이었다.
     bootgrid 머리띠(.bootgrid-header) 기본 여백 15px
     페이지 표의 빈 행 height:10px          (마크업에서 2px 로 줄임)
     목록 칸의 padding:10px                 (마크업에서 위쪽만 없앰)
   여기서는 머리띠를 줄인다. */

#menu-viewer .bootgrid-header {
    margin: 0 0 4px;
}

/* 검색·쪽수 조절칸을 쓰지 않는 화면에서는 머리띠가 빈 채로 자리만
   차지한다. 안이 빈 경우 아예 접는다. */
#menu-viewer .bootgrid-header .actionBar:empty {
    display: none;
}

#menu-viewer .bootgrid-footer {
    margin-top: 4px;
}

/* 조회조건 줄 공통. 페이지들이 admin-toolbar 클래스를 쓴다.

   좌우 여백을 목록과 맞춘다.
     목록 칸    td 의 padding 10px 에서 표가 시작한다
     조회조건 줄 container-fluid(15) + row(-15) + 칸(15) = 15px 에서 시작
   5px 어긋나 검색창이 목록보다 안쪽으로 들어가 보였다.
   셋을 10px 로 맞추면 양쪽 끝이 목록과 나란해진다. */

#menu-viewer .admin-toolbar {
    padding: 4px 10px 6px;
}

/* 줄을 flex 로 세운다.

   예전에는 화면마다 조회조건 줄의 아래 여백이 달랐다. 안에 들어가는 것이
   버튼(inline-block) · 입력묶음(table) · 체크박스로 제각각이고, 그것들이
   저마다 다른 여백과 글줄 아래 공간을 만들기 때문이다. 그래서 같은
   마크업인데도 목록까지의 거리가 화면마다 달라 보였다.

   flex 로 세우면 글줄 아래 공간이 생기지 않고, 아래 여백은 위에서 준
   padding-bottom 하나로만 정해진다. 어느 화면이든 같은 간격이 된다. */
#menu-viewer .admin-toolbar > .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-left: -10px;
    margin-right: -10px;
}

#menu-viewer .admin-toolbar > .row > [class*="col-"],
#menu-viewer .admin-toolbar > .row > .toolbar-item {
    float: none;                    /* flex 안에서는 float 가 무의미하다 */
    min-width: 0;                   /* 안쪽 내용이 길어도 칸을 밀지 않게 */
    padding-left: 10px;
    padding-right: 10px;
}

/* 폭을 정하지 않는 칸. 내용만큼만 차지한다.
   col-md-* 로 나누면 합이 12 를 넘는 순간 다음 줄로 밀려난다. */
#menu-viewer .admin-toolbar > .row > .toolbar-item {
    flex: 0 0 auto;
}

#menu-viewer .admin-toolbar .row + .row {
    margin-top: 8px;
}

/* 오른쪽 끝으로 미는 칸. flex 라 float(pull-right) 대신 이것을 쓴다. */
#menu-viewer .admin-toolbar > .row > .admin-toolbar-right {
    margin-left: auto;
}

/* 안쪽 요소들이 저마다 갖고 있는 아래 여백을 없앤다.
   이것이 남아 있으면 화면마다 조회조건 줄 높이가 달라진다. */
#menu-viewer .admin-toolbar .checkbox,
#menu-viewer .admin-toolbar .radio,
#menu-viewer .admin-toolbar .form-group,
#menu-viewer .admin-toolbar label {
    margin-top: 0;
    margin-bottom: 0;
}

/* ── 기간 선택 (date-range) ──────────────────────────────────────────
   [달력][시작일] ~ [종료일]
   input-group 두 덩어리를 나란히 놓는다.

   한 덩어리에 form-control 을 둘 넣으면 안 된다. 부트스트랩 3 의
   .input-group 은 display:table 이고 칸 하나를 전제로 폭을 계산해서
   테두리와 너비가 어긋난다. 그래서 나눴다.

   띄우기도 float(pull-right) 대신 text-align 을 쓴다. float 는 칸 높이를
   무너뜨려 아래 목록과의 간격까지 흔든다.

   입력칸을 누르면 달력이 뜬다 (menu_order.html datepicker showOn:focus). */

#menu-viewer .date-range {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
}

#menu-viewer .date-range .form-control {
    width: 118px;
    flex: 0 0 auto;
    text-align: center;
    cursor: pointer;
    background: #fff;               /* readonly 라도 눌러 쓰는 칸이므로 회색 금지 */
}

#menu-viewer .date-range .date-range-icon {
    color: #98a2b3;
    flex: 0 0 auto;
}

#menu-viewer .date-range .date-range-sep {
    color: #98a2b3;
    flex: 0 0 auto;
}

/* (btn-primary 색은 위 '버튼' 단락의 아웃라인 규칙 한 곳에서만 정한다.
   예전에 여기 있던 채움 규칙이 뒤에서 그걸 덮는 사고가 있었다.) */

/* ── 목록 안 작업 버튼 묶음 ──────────────────────────────────────────
   정보확인 · 시안수정 · 배송정보 · 미리보기 를 한 칸에 모았다.
   (menu_order.html 의 actions 포매터) 칸이 좁을 때 줄이 바뀌어도
   버튼끼리 붙어 보이게 한다. */

/* 목록 안 버튼은 크기를 하나로 맞춘다.

   묶음 안에 있든(작업 칸) 홀로 있든(수량·상태) 같은 크기여야 한다.
   예전에는 묶음 안만 작게 잡아 두 가지가 섞여 보였다.
   btn-sm 을 쓰는 곳도 있고 안 쓰는 곳도 있어 클래스에 기대지 않고
   목록 안의 모든 버튼에 같은 값을 준다. */
#menu-viewer .table > tbody .btn {
    padding: 3px 8px;
    font-size: 11px;
    line-height: 1.5;
    vertical-align: middle;
    white-space: nowrap;
}

/* 칸이 좁아지면 넘치지 말고 두 줄로 접히게 한다.
   nowrap 을 걸면 좁은 화면에서 버튼이 칸 밖으로 삐져나간다.
   접힐 때 위아래 버튼이 붙어 보이도록 여백을 조금 준다. */
#menu-viewer .table .btn-group.btn-group-sm {
    display: inline-flex;
    flex-wrap: wrap;
    gap: 2px;
}

/* 작업 칸의 최소 폭.
   업체별 폭 재지정(소속·직급을 15% 씩 넓히는 곳 등)이 작업 칸을
   눌러 버리면 버튼이 세 줄 이상으로 접혀 줄 높이가 90px 를 넘는다.
   두 개는 늘 한 줄에 서도록 최소 폭을 잡아 세 줄 접힘을 막는다. */
#menu-viewer .table > thead > tr > th.wait-column-link {
    min-width: 200px;
}

/* 접혔을 때 부트스트랩이 가운데 버튼의 모서리를 깎아 둔 것을 되살린다 */
#menu-viewer .table .btn-group.btn-group-sm > .btn {
    border-radius: 3px;
    float: none;
}

/* 승인처리의 작업 칸. 송장번호·미리보기(또는 기간만료 안내)·주문취소가
   함께 온다. 출처가 달라 모양이 제각각이라 한 줄로 세운다.
   버튼 크기는 위 .btn-group-sm 규칙을 그대로 받아 승인대기와 같다. */
#menu-viewer .order-actions > h6 {
    margin: 0;
    display: inline-block;
    align-self: center;
}


/* 아직 작업 중이라 미리보기가 없는 줄에 붙는 안내 */
#menu-viewer .order-state-text {
    display: inline-block;
    margin-left: 6px;
    font-size: 12px;
    vertical-align: middle;
}

/* ── 상태 칸 (승인처리·승인대기) ─────────────────────────────────────
   포매터가 셀 안에 container-fluid + col-md-6 두 개로 [상태글][버튼]을
   짜 넣는다. 표 칸 안에서 그리드 시스템을 쓰면 좌우 여백(-15px)이 삐져
   나오고 좁은 칸에서 줄이 갈라진다. 칸 안에서만 흐름을 바로잡는다. */

#menu-viewer .table > tbody > tr > td > .container-fluid {
    padding: 0;
    display: flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
}

#menu-viewer .table > tbody > tr > td > .container-fluid > [class*="col-md-"] {
    float: none;
    width: auto;
    padding: 0;
}

#menu-viewer .table > tbody > tr > td > .container-fluid > [class*="col-md-"]:first-child {
    flex: 1 1 auto;
}

#menu-viewer .table > tbody > tr > td > .container-fluid h6 {
    margin: 0;
    white-space: nowrap;
}

/* ── 칸 안의 안내 글자 ───────────────────────────────────────────────
   승인처리의 시안 칸은 상황에 따라 버튼 대신 글자를 낸다.
     구버전자료 / 생산완료·파기 / 기간만료
   <a> 로 감싸 있지만 누를 수 없는 안내다. 손 모양 커서와 밑줄을 없애
   버튼과 헷갈리지 않게 한다. */

#menu-viewer .table > tbody a:not([onclick]) {
    cursor: default;
    text-decoration: none;
    font-size: 12px;
}

#menu-viewer .table > tbody a:not([onclick]):hover {
    text-decoration: none;
}

/* 누를 수 있는 글자 링크는 반대로 분명히 보이게 */
#menu-viewer .table > tbody a[onclick] {
    cursor: pointer;
}

#menu-viewer .table > tbody a[onclick]:hover {
    text-decoration: underline;
}

/* ── 왼쪽 정렬 목록 (grid-left) ──────────────────────────────────────
   주문관리 세 탭과 사원관리 목록이 쓴다. 컬럼과 내용을 왼쪽으로 두고,
   가운데를 유지할 칸만 표시한다.
     cell-ordercd  주문번호 (가운데)
     cell-center   그대로 가운데 둘 칸 (사원관리의 신청 버튼)
   기본 가운데 규칙들이 !important 라 같은 세기로 되받는다. */

#menu-viewer .grid-left > thead > tr > th {
    text-align: left;
}

#menu-viewer .grid-left > tbody > tr > td {
    text-align: left;
}

#menu-viewer .grid-left > tbody h1,
#menu-viewer .grid-left > tbody h2,
#menu-viewer .grid-left > tbody h3,
#menu-viewer .grid-left > tbody h4,
#menu-viewer .grid-left > tbody h5,
#menu-viewer .grid-left > tbody h6 {
    text-align: left !important;
}

#menu-viewer .grid-left > thead > tr > th[data-column-id="ordercd"] {
    text-align: center;
}

#menu-viewer .grid-left > tbody > tr > td.cell-ordercd,
#menu-viewer .grid-left > tbody > tr > td.cell-ordercd h5,
#menu-viewer .grid-left > tbody > tr > td.cell-ordercd h6,
#menu-viewer .grid-left > tbody > tr > td.cell-center,
#menu-viewer .grid-left > tbody > tr > td.cell-center h5,
#menu-viewer .grid-left > tbody > tr > td.cell-center h6 {
    text-align: center !important;
}

/* ── 사번 칸 ─────────────────────────────────────────────────────────
   왼쪽 정렬. bootgrid 가 data-css-class 를 각 칸에 붙여 준다. */
#menu-viewer .table > tbody > tr > td.cell-empcd,
#menu-viewer .table > tbody > tr > td.cell-empcd h5,
#menu-viewer .table > tbody > tr > td.cell-empcd h6 {
    text-align: left !important;
    padding-left: 12px;
}

/* ── 사원관리 하단 수정판 ────────────────────────────────────────────
   라벨 칸의 색은 뜻이 있었다. 기본정보 · 이름 · 소속 · 직급 · 연락처 ·
   주소 를 색으로 갈라 놓은 것이다. 처음에 그것을 모르고 한 가지 회색으로
   눌렀다가, 묶음을 이름 있는 갈래로 되살렸다.

   색은 여기 한 곳에서 정한다. 마크업에는 g-basic 같은 이름만 있다.
   원래 파스텔보다 낮은 채도를 쓴다. 화면 전체가 흰 바탕이라 진한 색이
   여럿 있으면 눈이 먼저 그리로 간다. 갈래가 보일 만큼만 얹는다. */

/* 밝은 흰색 계열로 정리했다.
   바탕은 거의 흰색 하나로 두고, 갈래는 왼쪽 색 띠로만 알린다.
   (파스텔 바탕 7가지를 깔았더니 판이 알록달록해 보였다) */
#menu-viewer .form-label {
    background: #fafbfc;            /* 거의 흰색 */
    border-right: 1px solid rgba(0, 0, 0, .06);
    display: flex;
    align-items: center;
    min-height: 34px;
    padding-top: 0;
    padding-bottom: 0;
    padding-left: 10px !important;  /* 색 띠와 글자 사이 */
}

/* 갈래별 왼쪽 띠. 바탕은 모두 같고 띠 색만 다르다. */
#menu-viewer .form-label.g-basic { box-shadow: inset 2px 0 0 #e8a0a0; }  /* 기본정보 */
#menu-viewer .form-label.g-name { box-shadow: inset 2px 0 0 #e8b978; }  /* 이름 */
#menu-viewer .form-label.g-org { box-shadow: inset 2px 0 0 #8fb4e3; }  /* 소속 */
#menu-viewer .form-label.g-rank { box-shadow: inset 2px 0 0 #86c79c; }  /* 직급 */
#menu-viewer .form-label.g-contact { box-shadow: inset 2px 0 0 #7bc0cb; }  /* 연락처 (개인) */
#menu-viewer .form-label.g-contact-com { box-shadow: inset 2px 0 0 #8f9ada; }  /* 연락처 (회사) */
#menu-viewer .form-label.g-addr { box-shadow: inset 2px 0 0 #cfc879; }  /* 주소 */

#menu-viewer .form-label h6,
#menu-viewer .form-label h5 {
    margin: 0;
    font-size: 12px;
    font-weight: normal;
    color: #000;
    line-height: 1.4;
}

/* 누를 수 있는 라벨(템플릿 등)은 그렇게 보이게 */
#menu-viewer .form-label[onclick] {
    cursor: pointer;
}

#menu-viewer .form-label[onclick]:hover {
    background: #eef2f7;
}

#menu-viewer .form-label .badge {
    margin-left: 6px;
    font-size: 10px;
}

/* ── 사원관리 버튼 줄 ────────────────────────────────────────────────
   왼쪽 등록, 오른쪽 수정·삭제. float 대신 flex 로 놓는다.
   float 를 쓰면 안내 문구와 버튼이 서로 밀려 오른쪽 끝이 어긋난다. */
#menu-viewer .emp-actions {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px 0 8px;             /* 좌우는 칸(td)의 10px 만 쓴다 */
}

#menu-viewer .emp-actions-left,
#menu-viewer .emp-actions-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

#menu-viewer .emp-actions-hint {
    font-size: 13px;
    color: #2d6fb8;
}

#menu-viewer .emp-actions-hint-warn {
    color: #d9534f;
}

/* ── 수정판 두 칸 ────────────────────────────────────────────────────
   왼쪽 입력 줄들, 오른쪽 사진과 템플릿. */
#menu-viewer .emp-board {
    display: flex;
    align-items: stretch;           /* 1열이 2열 높이만큼 늘어난다 */
    gap: 12px;
}

#menu-viewer .emp-board-main {
    flex: 1 1 auto;
    min-width: 0;
}

/* 사진·버튼·템플릿 칸. 판의 맨 왼쪽 첫 열이다.
   사번·이름이 시작하는 줄과 왼쪽 끝을 맞춘다.
   마크업에서는 뒤에 있지만 order 로 앞에 세운다. 옮기면 id 참조가
   흩어질 수 있어 자리만 바꾼다. */
#menu-viewer .emp-board-side {
    order: -1;
    flex: 0 0 150px;                /* 라벨 + 입력이 나란히 들어갈 폭 */
    display: flex;
    flex-direction: column;
    gap: 4px;                       /* 오른쪽 입력 줄 사이 간격과 같게 */
}

/* 사진은 남는 높이를 다 가져간다.
   그래야 1열 전체가 2열(이름~주소1(영))과 같은 높이가 된다. */
#menu-viewer .emp-board-side > .emp-photo {
    flex: 1 1 auto;
    height: auto;
    min-height: 136px;
}

/* 사번·업체명 등은 라벨과 입력을 나란히 놓는다. 오른쪽 줄과 같은 모양이다.
   1열이 150px 이라 라벨을 좁히고 글자도 한 단계 줄여 업체명(영) 이 안 잘리게 한다. */
#menu-viewer .emp-side-label {
    flex: 0 0 72px;
    padding-left: 6px;
    padding-right: 4px;
}

#menu-viewer .emp-side-label h6 {
    font-size: 12px;
    white-space: nowrap;
}

#menu-viewer .emp-side-field {
    flex: 1 1 auto;
    min-width: 0;
}

/* 라벨과 입력을 한 줄로 묶는다. 마크업이 형제로 나란히 있으므로
   두 개씩 짝지어 감싸는 대신 줄 자체를 flex 로 흐르게 한다. */
#menu-viewer .emp-board-side {
    flex-flow: column wrap;
}

#menu-viewer .emp-side-row {
    display: flex;
    align-items: stretch;
    gap: 0;
    height: 34px;
}

/* 1열은 증명사진 · 사진등록 · 사번 · 업체명 · 업체명(영) 이다.
   사진이 남는 높이를 다 가져가 2열과 아래끝이 맞는다.
   한 행은 입력칸 30px + 줄 사이 4px = 34px. */

#menu-viewer .emp-photo {
    height: 136px;                  /* 34px x 4행 */
    background: #fff;
    border: 1px solid #d0d7de;      /* 검정에서 밝게. 입력칸·버튼과 같은 톤 */
    overflow: hidden;
    position: relative;             /* 사진을 절대배치로 채우기 위한 기준 */

    /* 안쪽 여백을 두면 사진이 5px 들어가 아래 버튼·템플릿과 왼쪽 끝이
       어긋난다. 여백 없이 테두리에 바로 붙인다. */
    padding: 0;
}

/* 사진은 상자를 비율에 맞게 꽉 채운다(넘치는 부분은 잘린다).
   절대배치라 사진이 커도 상자 크기를 밀어 키우지 못한다. */
#menu-viewer .emp-photo img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: cover;
    border: 0;
    padding: 0;
    background: transparent;
}

/* 5행 — 사진이 있으면 제거, 없으면 등록. 한 번에 하나만 보인다. */
#menu-viewer .emp-photo-actions {
    height: 34px;
    display: flex;
    align-items: center;
    gap: 6px;
}

#menu-viewer .emp-photo-actions .btn {
    height: 30px;
    padding: 4px 10px;
    font-size: 12px;
    width: 100%;                    /* 사진 상자와 같은 폭으로 */
    flex: 1 1 auto;
}

#menu-viewer .emp-photo-info {
    font-size: 12px;
    color: #98a2b3;
}

/* 템플릿 칸 — 입력 + 고르기 + 사용여부 셋이 좁은 칸에 들어간다.
   사용여부 글자를 줄여 입력칸이 눌리지 않게 한다. */
#menu-viewer .nhqv-employee #emp-tempuse {
    padding-left: 6px;
    padding-right: 6px;
    font-size: 12px;
}

/* 수정판 안 줄들의 좌우 끝을 판의 끝과 맞춘다.
   container-fluid(15) - row(-15) + 칸(6) = 6px 씩 안으로 들어가 있어서
   오른쪽 끝 입력칸이 위 삭제 버튼보다 6px 짧았다.
   컨테이너 여백을 없애고 row 가 칸 여백(6px)만 접게 한다. */
#menu-viewer .emp-board-main > .container-fluid {
    padding-left: 0;
    padding-right: 0;
}

#menu-viewer .emp-board-main > .container-fluid > .row {
    margin-left: -6px;
    margin-right: -6px;
}

/* 수정판의 줄 간격. 등록정보 팝업(modalInsert)도 같은 결로 맞춘다. */
#menu-viewer .nhqv-employee .container-fluid > .row,
#menu-viewer #modalInsert .container-fluid > .row {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

#menu-viewer .nhqv-employee .container-fluid > .row > [class*="col-"],
#menu-viewer #modalInsert .container-fluid > .row > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
}

#menu-viewer .nhqv-employee .form-control,
#menu-viewer #modalInsert .form-control {
    height: 30px;
    padding: 4px 8px;
    font-size: 13px;
}

/* 등록정보 팝업의 사진등록 옆 상태 글 */
#menu-viewer #modalInsert .re-photo-state {
    margin-left: 6px;
    font-size: 11px;
    color: #d64545;
}

/* 입력칸 옆에 붙는 고르기 버튼.
   부트스트랩 3 의 .btn 은 padding 6px + line-height 20px + 테두리 2px = 34px 라
   위에서 30px 로 낮춘 입력칸보다 4px 높았다. 패딩을 같은 4px 로 맞춘다. */
#menu-viewer .nhqv-employee .input-group-btn > .btn,
#menu-viewer #modalInsert .input-group-btn > .btn {
    height: 30px;
    padding: 4px 8px;
    font-size: 13px;
    line-height: 20px;
}

/* 캐럿만 있는 버튼은 폭을 정해 둔다 */
#menu-viewer .nhqv-employee .input-group-btn > .btn.select-popup-btn,
#menu-viewer #modalInsert .input-group-btn > .btn.select-popup-btn {
    width: 34px;
    padding-left: 0;
    padding-right: 0;
}

/* ── 회사정보 ────────────────────────────────────────────────────────
   칸마다 박아 두던 style="background:#..." 를 이리로 옮겼다.
   사원관리 수정판과 같은 결의 색을 쓰되, 무엇에 대한 칸인지로 나눈다. */

/* 정보판과 같은 밝은 계열 : 바탕은 라벨 공통(거의 흰색)을 그대로 쓰고
   갈래는 왼쪽 2px 색 띠로만 알린다. */
#menu-viewer .form-label.c-info  { box-shadow: inset 2px 0 0 #8fb4e3; }  /* 읽기 전용 회사정보 */
#menu-viewer .form-label.c-biz   { box-shadow: inset 2px 0 0 #e8a0a0; }  /* 사업자 */
#menu-viewer .form-label.c-tax   { box-shadow: inset 2px 0 0 #86c79c; }  /* 계산서 담당 */
#menu-viewer .form-label.c-mng   { box-shadow: inset 2px 0 0 #7bc0cb; }  /* 관리자 */
#menu-viewer .form-label.c-noti  { box-shadow: inset 2px 0 0 #cfc879; }  /* 알림 · 표기 */
#menu-viewer .form-label.c-pw    { box-shadow: inset 2px 0 0 #e8b978; }  /* 비밀번호 */

#menu-viewer .company-board > .row {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

#menu-viewer .company-board > .row > [class*="col-"] {
    padding-left: 6px;
    padding-right: 6px;
}

#menu-viewer .company-board .form-control {
    height: 30px;
    padding: 4px 8px;
    font-size: 13px;
}

/* 값을 글자로만 보여 주는 칸(회사코드 따위). 입력칸과 높이를 맞춘다. */
#menu-viewer .company-board .form-static {
    display: flex;
    align-items: center;
    min-height: 34px;
}

#menu-viewer .company-board .form-static h6 {
    margin: 0;
    font-size: 13px;
    font-weight: normal;
    color: #344054;
}

/* 무엇에 대한 칸인지 짚어 주는 제목.
   빈 줄(<h8>　</h8>)로 벌려 두던 자리를 대신한다.
   왼쪽 -15px : 줄(row) 이 컨테이너 여백(15)을 접고 시작하는 선에
   제목도 맞춘다. (실측으로 맞춘 값) */
#menu-viewer .company-board .board-section {
    margin: 18px 0 8px -15px;
    padding-bottom: 6px;
    font-size: 13px;
    font-weight: 600;
    color: #475467;
    border-bottom: 1px solid #e6e8ea;
}

/* 제목 옆에 붙는 체크박스 (계산서담당자와 동일) */
#menu-viewer .company-board .board-section-side {
    margin-left: 14px;
    font-size: 12px;
    font-weight: normal;
    color: #667085;
}

#menu-viewer .company-board .board-section-side input[type="checkbox"] {
    margin-right: 3px;
    vertical-align: -2px;
}

#menu-viewer .company-board .board-section:first-child {
    margin-top: 0;
}

/* 안내 글. flex 로 두면 <b> 하나하나가 칸이 되어 줄이 토막 난다.
   글은 글답게 흐르도록 block 으로 둔다. */
#menu-viewer .company-board .board-note {
    display: block;
    padding-top: 7px;
    padding-bottom: 7px;
    font-size: 12px;
    color: #667085;
    line-height: 1.7;
}

#menu-viewer .company-board .board-note-warn {
    color: #d0342c;
}

#menu-viewer .company-board .board-note .checkbox {
    margin: 0;
}

/* 알림톡 대상 세 개를 한 줄에 */
#menu-viewer .company-board .board-checks {
    display: flex;
    align-items: center;
    gap: 10px;
    min-height: 34px;
    font-size: 12px;
}

#menu-viewer .company-board .board-checks label {
    margin: 0;
    font-weight: normal;
    white-space: nowrap;
}

/* 저장 줄 */
#menu-viewer .company-board .board-actions {
    display: flex;
    justify-content: flex-end;
    margin-top: 18px;
    padding-top: 12px;
    border-top: 1px solid #e6e8ea;
}

/* ── 배송지변경 ──────────────────────────────────────────────────────
   bootgrid 가 아니라 손으로 줄을 넣는 표다. 칸마다 입력이 들어간다. */

#menu-viewer .deli-hint,
#menu-viewer .charge-hint {
    font-size: 12px;
    color: #667085;
    margin: 0;
    line-height: 34px;
}

#menu-viewer .charge-hint {
    line-height: 1.6;
    padding: 4px 2px 10px;
}

#menu-viewer .deli-table > tbody > tr > td {
    padding: 4px 6px;
    vertical-align: middle;
}

#menu-viewer .deli-table > tbody .form-control {
    height: 30px;
    padding: 4px 8px;
    font-size: 13px;
}

#menu-viewer .deli-table .deli-col-title { width: 12%; }
#menu-viewer .deli-table .deli-col-narrow { width: 11%; }

/* 넘길 값만 담는 칸. 머리글과 몸통을 함께 감춰야 열이 안 어긋난다. */
#menu-viewer .deli-table .deli-hidden-cell {
    display: none;
}

/* ── 관리자변경 ──────────────────────────────────────────────────────
   jquery.tree-multiselect 가 만드는 두 칸짜리 고르기 판을 감싼다. */

#menu-viewer .charge-picker > select {
    display: none;                  /* 플러그인이 읽고 나면 볼 일이 없다 */
}

#menu-viewer .charge-picker .tree-multiselect {
    border: 1px solid #e6e8ea;
    border-radius: 4px;
    font-size: 13px;
}

/* 고르기 창은 등록정보 팝업(모달) 위에서도 열린다.
   부트스트랩 3 모달은 z-index 가 같아(1050) DOM 순서로 겹치는데,
   등록정보가 뒤에 있어 고르기 창이 깔린다. 한 층 올려 둔다. */
#modalSelectPopup {
    z-index: 1070;
}

/* 생산완료/파기 표시 : 빨간 바탕 + 흰 글자.
   버튼 모양이지만 누르는 것이 아니라 상태 표시다. */
#menu-viewer .table > tbody .state-destroyed,
#menu-viewer .table > tbody .state-destroyed * {
    background: #d64545;
    border: 1px solid #d64545;
    color: #fff !important;
    cursor: default;
    pointer-events: none;
}

/* ── 팝업 안 입력 양식 (주문내역서 등) ──────────────────────────────
   라벨 + 칸 한 줄. 칸들은 남는 폭을 똑같이 나눠 가진다. */
.modal .modal-form-row {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.modal .modal-form-row:last-child {
    margin-bottom: 0;
}

.modal .modal-form-label {
    flex: 0 0 52px;
    margin: 0;
    font-size: 13px;
    font-weight: normal;
    color: #344054;
}

.modal .modal-form-row > .form-control {
    flex: 1 1 auto;
    width: auto;
}

/* basis 0 : 내용 크기(입력 기본폭 189x2)를 무시하고 줄 폭에 맞춘다.
   auto 로 두면 안 줄어들어 작은 창(modal-sm) 밖으로 나간다. */
#menu-viewer .modal .modal-form-row .date-range {
    flex: 1 1 0;
    min-width: 0;
}

/* 조회조건 줄의 달력칸은 118px 고정인데, 팝업 안에서는 남는 폭을 나눈다.
   기본 규칙이 #menu-viewer 로 시작해 같은 세기로 되받는다. */
#menu-viewer .modal .modal-form-row .date-range .form-control {
    flex: 1 1 0;
    width: auto;
    min-width: 0;
    text-align: center;
}

/* 고르기 창의 목록 */
#modalSelectPopup .select-popup-list {
    margin-top: 8px;
    margin-bottom: 0;
    max-height: 320px;
    overflow-y: auto;
}

/* 부트스트랩 3.3.2 는 button.list-group-item 규칙이 없어(3.3.5 부터 생겼다)
   버튼이 글자 길이만큼만 늘어난다. 폭을 직접 채워 준다. */
#modalSelectPopup .select-popup-list > .list-group-item {
    display: block;
    width: 100%;
    text-align: left;
    font-size: 13px;
    padding: 7px 12px;
}

/* ── 데이트피커 팝업 (jQuery UI) ─────────────────────────────────────
   팝업은 body 바로 아래에 붙어 #menu-viewer 밖이다. 전역으로 걸되
   .ui-datepicker 안에만 미친다. 부트스트랩 드롭다운과 같은 결로 맞춘다. */

.ui-datepicker {
    width: 260px;
    padding: 8px;
    border: 1px solid #d8dde3;
    border-radius: 8px;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .12);
    background: #fff;
    font-size: 13px;
}

.ui-datepicker .ui-datepicker-header {
    background: #006DC0;
    border: 0;
    border-radius: 6px;
    color: #fff;
    padding: 4px 0;
}

.ui-datepicker .ui-datepicker-title {
    color: #fff;
    font-weight: 600;
    line-height: 26px;
}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next {
    top: 6px;
    border: 0;
    background: transparent;
    cursor: pointer;
}

.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
    top: 6px;
    border: 0;
    background: rgba(255, 255, 255, .18);
    border-radius: 4px;
}

.ui-datepicker th {
    color: #667085;
    font-weight: 600;
    padding: 6px 0 4px;
}

.ui-datepicker td {
    padding: 1px;
}

.ui-datepicker td .ui-state-default {
    border: 0;
    background: transparent;
    border-radius: 5px;
    text-align: center;
    padding: 5px 0;
    color: #344054;
}

.ui-datepicker td .ui-state-hover {
    background: #eef5fd;
    color: #006DC0;
}

/* 오늘 */
.ui-datepicker td.ui-datepicker-today .ui-state-default {
    border: 1px solid #9ec7e8;
}

/* 고른 날 */
.ui-datepicker td .ui-state-active {
    background: #006DC0;
    color: #fff;
}

/* ── 포커스 테두리 ───────────────────────────────────────────────────
   부트스트랩 3 은 a:focus 에 포커스 링을 걸어 마우스 클릭에도
   검은 테두리가 남는다. 클릭 포커스에는 없애고,
   키보드(Tab)로 온 포커스에만 파란 테두리를 남긴다(접근성). */
#menu-viewer a:focus,
#menu-viewer .btn:focus,
#menu-viewer .btn:active:focus,
.modal a:focus,
.modal .btn:focus {
    outline: none;
}

#menu-viewer a:focus-visible,
#menu-viewer .btn:focus-visible,
.modal a:focus-visible,
.modal .btn:focus-visible {
    outline: 2px solid #006DC0;
    outline-offset: -2px;
}

/* ── 직각 ────────────────────────────────────────────────────────────
   모든 둥근 모서리를 없앤다. 버튼 · 입력칸 · 쪽 번호 · 사진 상자 ·
   달력 팝업 · 모달까지 전부 직각이다.
   위에 남아 있는 개별 radius 값들은 이 규칙이 덮는다. */
#menu-viewer,
#menu-viewer *,
.modal,
.modal *,
.ui-datepicker,
.ui-datepicker * {
    border-radius: 0 !important;
}

/* ── 검색되는 업체 콤보박스 (WebManager 추가) ────────────────────────
   PetaADAdmin 에는 없다. 업체가 많아 굴려서 찾기 어렵다는 요청으로 넣었다.
   <select> 를 숨기고 그 자리에 jQuery UI autocomplete 입력칸을 둔다
   (menu_order.html 의 MakeSearchableSelect).

   목록 팝업은 데이트피커와 마찬가지로 body 바로 아래에 붙어
   #menu-viewer 밖이다. 전역으로 걸되 .ui-autocomplete 안에만 미친다. */

#menu-viewer .order-manager-search {
    cursor: pointer;                /* 눌러서 고르는 칸이라는 표시 */
}

.ui-autocomplete {
    max-height: 320px;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 4px;
    border: 1px solid #d8dde3;
    box-shadow: 0 6px 18px rgba(16, 24, 40, .12);
    background: #fff;
    font-size: 13px;
    z-index: 1060;                  /* 부트스트랩 모달(1050) 위 */
}

.ui-autocomplete .ui-menu-item {
    padding: 0;
    list-style: none;
}

/* jQuery UI 1.11 이하는 <a>, 1.12 이상은 <div> 를 쓴다. 둘 다 잡는다. */
.ui-autocomplete .ui-menu-item > a,
.ui-autocomplete .ui-menu-item-wrapper {
    display: block;
    padding: 6px 10px;
    border: 0;
    background: transparent;
    color: #344054;
    line-height: 1.5;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ui-autocomplete .ui-menu-item > a.ui-state-focus,
.ui-autocomplete .ui-menu-item > a:hover,
.ui-autocomplete .ui-menu-item-wrapper.ui-state-active,
.ui-autocomplete .ui-menu-item-wrapper:hover {
    margin: 0;
    border: 0;
    background: #eaf3fb;
    color: #006DC0;
    font-weight: 600;
}

.ui-autocomplete,
.ui-autocomplete * {
    border-radius: 0 !important;    /* 위 '직각' 규칙과 같은 결 */
}