/* Dooco brand key-color override: logo point #FD4F00 (dooco-logo.svg) * style.css primary(#7539FF) hardcoded rules re-declared: 29 rules * Usage: link AFTER style.css: * */ :root, [data-color=primary] { --primary: #FD4F00; --primary-rgb: 253, 79, 0; --primary-hover: #D64300; } @charset "UTF-8"; /*--------------------------------------------------------------------------------- Template Name: Kanakku Version : 1.0 Author: Dreams Technologies Author URI: https://themeforest.net/user/dreamstechnologies ----------------------------------------------------------------------------------- /*============================ [Table of CSS] 1.variables 2.mixins 3.base 4.background 5.accordion 6.alerts 7.avatar 8.badge 9.boostrap 10.border 11.breadcrumb 12.button 13.calendar 14.call 15.cards 16.chart 17.dropdown 18.file-manager 19.file-upload 20.font 21.form-wizard 22.forms 23.grid 24.icons 25.incoming-call 26.navs-tabs 27.notes 28.pagination 29.popovers 30.popup 31.progress 32.ribbon 33.sweetalert 34.tables 35.timeline 36.todo 37.tooltips 38.typography 39.common 40.content 41.header 42.notification 43.sidebar ============================*/ @import url("https://fonts.googleapis.com/css2?family=Instrument+Sans:ital,wght@0,400..700;1,400..700&display=swap"); /*============================ 2.mixins ============================*/ :root { --primary: #FD4F00; --primary-rgb: 253, 79, 0; } .bg-primary-gradient-200 { background-image: linear-gradient(99.2deg, #FD4F00 14.12%, #B017FF 91.97%); } .bg-primary-gradient { background-image: linear-gradient(120deg, #4c00fb 0%, #6725ff 60%, #FD4F00 100%) !important; } .bg-primary-gradient-50 { background-image: linear-gradient(7.27deg, #FD4F00 38.3%, #3F8BFE 92.24%) !important; } .bg-primary-gradient-300 { background-image: linear-gradient(140.21deg, #BEA2FF 2.66%, #FD4F00 100.69%); } [data-color=primary] { --primary: #FD4F00; --primary-rgb: 253, 79, 0; } .nav-tabs.nav-bordered-primary.nav-tabs-top .nav-item .nav-link:hover, .nav-tabs.nav-bordered-primary.nav-tabs-top .nav-item .nav-link:focus { color: #FD4F00; } .nav-tabs.nav-bordered-primary.nav-tabs-top .nav-item .nav-link.active { border-top: 2px solid #FD4F00; color: #FD4F00; } .nav-tabs.nav-bordered-primary .nav-item .nav-link:hover, .nav-tabs.nav-bordered-primary .nav-item .nav-link:focus { color: #FD4F00; } .nav-tabs.nav-bordered-primary .nav-item .nav-link.active { border-bottom: 2px solid #FD4F00; color: #FD4F00; } .nav-tabs.nav-solid-primary.nav-tabs-rounded li a:hover { color: #FD4F00; } .nav-tabs.nav-solid-primary.nav-tabs-rounded li a.active { background-color: #FD4F00; border-color: #FD4F00; } .nav-tabs.nav-solid-primary.nav-tabs-rounded-fill li a.active { background-color: #FD4F00; border-color: #FD4F00; } .nav-tabs.nav-solid-primary li a:hover { color: #FD4F00; } .nav-tabs.nav-solid-primary li a.active { background-color: #FD4F00; border-color: #FD4F00; } .offcanvas-body .primary-clr::before { background: #FD4F00 !important; } .coming-soon { background: linear-gradient(180deg, rgba(255, 255, 255, 0.1) 67%, rgba(253, 79, 0, 0.2) 100%); } .progress-bar-fill { stroke: #FD4F00; } .inv-date-no { background: linear-gradient(320deg, #FD4F00 0%, #FD4F00 100%); } .ribbon-hotel { background-color: #FD4F00; } .border-bottom.border-primary { border-color: #FD4F00 !important; } .fc-daygrid-event-harness .fc-daygrid-event.bg-primary-subtle .fc-event-title, .fc-daygrid-event-harness .fc-daygrid-event.bg-primary-subtle .fc-event-main { color: #FD4F00 !important; } .fc-timegrid-event-harness .fc-timegrid-event.bg-primary-subtle .fc-event-title { color: #FD4F00 !important; } .fc-list-table .fc-list-event.bg-primary-subtle { color: #FD4F00 !important; } .fc-list-table .fc-list-event.bg-primary-subtle .fc-list-event-title > a { color: #FD4F00 !important; } .fc-list-table .fc-list-event.bg-primary-subtle .fc-list-event-dot { border-color: #FD4F00; } [data-slider-color=primary] .noUi-connect { background: #FD4F00; } [data-slider-color=primary] .noUi-handle { background: #FD4F00; } [data-slider-color=primary][data-slider-style=border] .noUi-handle, [data-slider-color=primary][data-slider-style=square] .noUi-handle { border-color: #FD4F00; } /* gradient buttons: purple pair -> orange pair */ .bg-primary-gradient { background-image: linear-gradient(99.2deg, #FD4F00 14.12%, #FF8A50 91.97%) !important; } .bg-primary-gradient:hover { background-image: linear-gradient(99.2deg, #D64300 14.12%, #FD4F00 91.97%) !important; } .bg-primary-gradient-200 { background-image: linear-gradient(99.2deg, #FD4F00 14.12%, #FFB380 91.97%) !important; } :root { --primary-gradient-100: linear-gradient(90deg, #FFE3D4 0%, rgba(134, 132, 153, 0) 100%); } /* ERP/MES 진입 탭 — 선택됨: 회색 채움 / 선택 안 됨: 흰 배경 + 아웃라인 */ .system-tab .btn { background: #fff; color: #98a2ae; border: 1px solid #e3e7ec; font-weight: 700; } .system-tab .btn:hover { color: #1c2430; } .system-tab .btn-check:checked + .btn { background: #1c2430; color: #fff; border-color: #1c2430; } /* 활성 탭 = 다크(탭 안 버튼 톤과 동일) — 8/28 PM "활성화색 넣어라" */ /* 헤더 우측 ERP/MES 전환 — 로그인 탭과 같은 규칙의 소형 변형 */ .system-tab-sm { width: auto; } .system-tab-sm .btn { padding: 4px 14px; font-size: 12.5px; line-height: 1.4; } /* 다크모드 — ERP/MES 탭 (비선택: 어두운 면 + 아웃라인 / 선택: 밝은 회색 채움) */ [data-bs-theme=dark] .system-tab .btn { background: transparent; color: #8b95a5; border-color: #2f3a4a; } [data-bs-theme=dark] .system-tab .btn:hover { color: #e6eaf0; } [data-bs-theme=dark] .system-tab .btn-check:checked + .btn { background: #3d4a5c; color: #fff; border-color: #4a5870; } /* 사이드바 하단 저작권 — 세로 위치는 화면 맨 아래 유지 */ .sidebar .sidebar-copy { position: absolute; bottom: 0; left: 0; right: 0; background: inherit; border-top: 1px solid #edf1f5; color: #98a2ae; } .sidebar .sidebar-inner { padding-bottom: 40px; } [data-bs-theme=dark] .sidebar .sidebar-copy { border-top-color: #2a3441; color: #6b7684; } /* 우측 플로팅 테마 기어 제거 — 설정은 좌측 하단 레일 아이콘으로 (8/19) */ .sidebar-contact { display: none !important; } /* 테마 설정 패널 — 오른쪽 대신 왼쪽에서 열림 */ .sidebar-themesettings.offcanvas-end { right: auto; left: 0; transform: translateX(-100%); } .sidebar-themesettings.offcanvas-end.show { transform: none; } /* 데이터테이블 기본 검색창 숨김 — 검색은 목록 위 조건 영역으로 일원화 (8/20 정책) */ .dataTables_filter { display: none !important; } /* 데이터테이블 페이징 중앙 정렬 (8/20 목록 표준) */ .dataTables_paginate { float: none !important; text-align: center !important; margin-top: 4px; } .dataTables_paginate .pagination { justify-content: center !important; } /* 툴바로 이동한 목록 개수 컨트롤 — "정렬 :" 버튼과 동일한 형태로 공통화 (8/20) */ #mold-toolbar-right .dataTables_length { margin: 0; } #mold-toolbar-right .dataTables_length label { font-size: 0; display: inline-flex; align-items: center; margin: 0; padding: 6px 0 6px 10px; height: 35px; border: 1px solid #E2E4E6; border-radius: 4.8px; background: #fff; } #mold-toolbar-right .dataTables_length label::before { content: "리스트 개수 : "; font-size: 13px; color: #262626; white-space: pre; } #mold-toolbar-right .dataTables_length select { font-size: 13px; color: #262626; border: 0; height: 100%; background-position: right 6px center; padding: 0 22px 0 2px; width: auto; } /* 데이터테이블 정렬 화살표 — 타이틀 바로 옆, 한 글자(⇅/↑/↓)로 (8/20) */ table.dataTable thead > tr > th.sorting::before, table.dataTable thead > tr > th.sorting_asc::before, table.dataTable thead > tr > th.sorting_desc::before { display: none !important; } table.dataTable thead > tr > th.sorting::after, table.dataTable thead > tr > th.sorting_asc::after, table.dataTable thead > tr > th.sorting_desc::after { position: static !important; display: inline; margin-left: 0; font-size: .7em !important; opacity: .35; } table.dataTable thead > tr > th.sorting::after { content: " ⇅" !important; white-space: pre; } table.dataTable thead > tr > th.sorting_asc::after { content: " ↑" !important; white-space: pre; opacity: .9; } table.dataTable thead > tr > th.sorting_desc::after { content: " ↓" !important; white-space: pre; opacity: .9; } table.dataTable thead > tr > th { padding-right: 10px !important; } /* 리스트 개수 — 정렬 버튼과 동일 선언(btn btn-outline-white) 안의 셀렉트 리셋 */ .list-toolbar-right .btn select { border: 0; background: transparent; font: inherit; color: inherit; padding: 0 2px 0 6px; width: auto; outline: none; } /* 목록 컬럼 헤더 중앙 정렬 (8/20 목록 표준) */ table.dataTable thead > tr > th { text-align: center !important; } /* 회색 버튼 — 검색 등 보조 주요 액션 (중간 톤 슬레이트) */ .btn-gray { background: #6b7684; border: 1px solid #6b7684; color: #fff; font-weight: 700; } .btn-gray:hover { background: #5a6472; border-color: #5a6472; color: #fff; } /* 목록 본문 중앙 정렬 — 링크 셀은 .td-left 로 왼쪽 (8/20 목록 표준) */ table.dataTable tbody > tr > td { text-align: center; } table.dataTable tbody > tr > td.td-left { text-align: left; } /* 참조 링크 — 다른 마스터(사출품·거래처 등)와 연결된 값. 클릭 시 정보 팝업 암시 (8/20 표준) * 품명 등 화면 이동 링크(다크+실선)와 구분: 파랑 + 점선 언더라인 */ .ref-link { color: #FD4F00; font-weight: 400; text-decoration: underline dotted; text-underline-offset: 3px; } .ref-link:hover { color: #D64300; text-decoration: underline solid; } /* 링크 3종 (2026-08-27 PM 결정) — 상세 화면 이동 = 파랑 실선 볼드(.go-link) / 수정 팝업 = 다크 실선 볼드(.edit-link) / 참조 조회 팝업 = 키컬러 점선, 볼드 아님(.ref-link) * 웹 관습(파란 밑줄 = 어디로 간다)을 따르고, 팝업은 다크로 남긴다. 주황 글자·연필 아이콘안은 기각 */ .go-link { color: #2563eb !important; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .go-link:hover { color: #1d4ed8 !important; } .edit-link { color: var(--bs-dark, #1f2937); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; } .edit-link:hover { color: #FD4F00; } /* 키컬러 텍스트 유틸 */ .text-brand { color: #FD4F00 !important; } /* 목록 행 호버 — 키컬러 연한 톤 + 클릭 가능(행=상세 진입) 커서 (8/20 목록 표준) */ table.dataTable tbody > tr:hover > td { background: #F6F8FA !important; cursor: pointer; } /* 슬라이드 패널 — 우측에서 옆으로 펼쳐지는 보조 선택 패널 (8/20 표준, 예: 등록 화면 사출품 선택) */ .slide-panel { flex: 0 0 auto; width: 420px; max-width: 0; max-height: 0; opacity: 0; overflow: hidden; transition: max-width .35s ease, opacity .3s ease; padding: 0 !important; } .slide-panel.open { max-width: 420px; max-height: none; opacity: 1; padding: 0 0 0 12px !important; } /* 입력창 상태 구분 — 입력 가능=흰색, 잠금=회색 (템플릿 기본 회색 배경 재정의, 2026-08-20) */ .form-control, .form-select { background-color: #fff; } .form-control:disabled, .form-control[readonly], .form-select:disabled { background-color: #eef0f3; color: #6b7684; cursor: not-allowed; } /* 우측 도크(side-dock) — 등록 화면의 보조 영역(사출품 정보·첨부 등)을 "화면 밖 우측 고정층"으로 분리. 기본은 화면 밖(숨김), 선택(구분·공정)으로 .open 이 붙으면 오른쪽에서 슬라이드 인 + 본문·헤더를 도크 폭만큼 밀어냄. 디스크립션이 함께 열리면 디스크립션이 맨 오른쪽, 도크는 그 왼쪽에 나란히(spec.css §4). 헤더(z 999, 56px) 아래에서 시작 (2026-08-26, 8/25 리뷰) */ :root { --dock-w: 400px; } /* 디스크립션 패널(.spec-panel)과 동일 규격: top 0 · 100vh · 400px · 흰 배경 · 좌측 1px 선 · 헤더 위(z 1000) */ .side-dock { position: fixed; top: 0; right: 0; width: var(--dock-w); height: 100vh; overflow-y: auto; padding: 16px 16px 40px; background: #fff; border-left: 1px solid #e5e7eb; z-index: 1000; transform: translateX(105%); transition: transform .3s ease; } .side-dock.open { transform: none; box-shadow: -4px 0 16px rgba(20, 30, 45, .07); } /* 그림자 = 본문 위로 확장된 층임을 표시 */ .side-dock .side-dock-head { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 12px; } .side-dock .side-dock-head .t { font-size: 12px; font-weight: 700; letter-spacing: .04em; color: #6b7684; text-transform: uppercase; } .side-dock .side-dock-close { border: 1px solid #dde3ea; background: #fff; border-radius: 999px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; color: #6b7684; cursor: pointer; } .side-dock .side-dock-close:hover { color: #FD4F00; border-color: #FD4F00; } /* 수동으로 닫았을 때 우측 가장자리의 재열기 탭 — 얇은 흰 탭(파랑 글자), 폭 고정 */ .side-dock-tab { position: fixed; top: 40%; right: 0; left: auto; z-index: 999; width: 34px; height: auto; background: #fff; color: #1d4ed8; border: 1px solid #b9d3f2; border-right: 0; border-radius: 8px 0 0 8px; padding: 12px 0; font-size: 12px; font-weight: 700; cursor: pointer; writing-mode: vertical-rl; letter-spacing: 1px; font-family: inherit; box-shadow: -2px 0 8px rgba(20,30,45,.08); display: none; } .side-dock-tab.show { display: inline-block; } .side-dock-tab:hover { background: #f7faff; } body.dock-open .page-wrapper { margin-right: var(--dock-w); } body.dock-open .header { right: var(--dock-w); } /* 도크가 열리면 대표이미지 칸은 잠깐 감춘다 — 입력 칸이 좁아지는 것보다 낫다 (9/3 PM) */ body.dock-open .dock-hide { display: none !important; } .side-dock .card, .slide-panel > .card { border: 1px solid #b9d3f2; background: #fbfdff; } .side-dock .card h6, .slide-panel > .card h6 { color: #1d4ed8; } /* 연한 딤 — 도크 위에 뜨는 짧은 팝업(파생 추가 등)은 뒤 리스트가 비치게 (8/27 PM) */ body.light-dim .modal-backdrop.show { opacity: .2; } /* 도크 채움(dock-fill): 카드·리스트가 도크 높이를 끝까지 쓰고 행이 넘치면 리스트 안에서 스크롤 (8/27 PM "아래 영역까지 다 쓰라") */ .side-dock.dock-fill { display: flex; flex-direction: column; overflow: hidden; } .side-dock.dock-fill .card.fill { flex: 1; min-height: 0; display: flex; flex-direction: column; margin: 0; } .side-dock.dock-fill .card.fill .card-body { flex: 1; min-height: 0; display: flex; flex-direction: column; } .side-dock.dock-fill .dock-body { flex: 1; min-height: 0; display: flex; flex-direction: column; } /* 파란 카드 없이 일반 리스트 (8/27 PM) */ .side-dock.dock-fill .dock-sec { flex: 1; min-height: 0; display: flex; flex-direction: column; } .part-picker.pp-fill { flex: 1; min-height: 0; display: flex; flex-direction: column; } .part-picker.pp-fill .pp-list { flex: 1; min-height: 0; overflow: auto; } .part-picker.pp-fill .pp-paging { margin-top: auto !important; padding-top: 8px; } /* 페이징은 도크 바닥에 (8/27) */ .part-picker .list-group-item { padding-top: .55rem; padding-bottom: .55rem; } .part-picker .list-group-item b { font-size: 14px; } .part-picker .pp-row-name { display: block; font-size: 12px; color: #6b7684; margin-top: 1px; } @media (max-width: 1279.98px) { .side-dock { position: static; width: auto; height: auto; border-left: 0; padding: 0; background: transparent; transform: none; } .side-dock:not(.open) { display: none; } body.dock-open .page-wrapper { margin-right: 0; } body.dock-open .header { right: 0; } } /* 본문 좌우 여백 — 템플릿 24px 은 사이드바·도크에 붙어 보여 40px 로 (2026-08-26, 사용자 지시 "양쪽 여백 더") */ .page-wrapper .content { padding-left: 40px; padding-right: 40px; max-width: 1600px; } /* 본문 최대 폭 1600px(여백 포함) — 와이드 모니터에서 폼·표가 끝없이 늘어나지 않도록 (좌측 정렬 유지) (2026-08-26 사용자 지시) */ @media (max-width: 991.98px) { .page-wrapper .content { padding-left: 16px; padding-right: 16px; } } /* 도크 안 팔레트 탭 5개가 400px 에서 줄바꿈되지 않게 */ .side-dock #pal-tabs .btn { white-space: nowrap; padding-left: 4px; padding-right: 4px; font-size: 12px; } /* 공통코드 그룹 트리 — 선택한 그룹 행에만 수정/삭제 아이콘, 대분류 헤더에도 수정/삭제 아이콘 (8/27) */ #code-group-tree .list-group-item { display: flex; align-items: center; } #code-group-tree .list-group-item .grp-act { display: none; } #code-group-tree .list-group-item.active .grp-act { display: inline-flex; } #code-group-tree .list-group-item.active .grp-act a, #code-group-tree .list-group-item.active .grp-act a:hover { color: #fff !important; opacity: 1; } /* 3뎁스(하위 구분) 행 — 그룹 행과 같은 규칙: 선택된 행에만 수정·삭제 아이콘 (9/3) */ #cc-sub-list .list-group-item .sub-act { display: none; } #cc-sub-list .list-group-item.active .sub-act { display: inline-flex; } #cc-sub-list .list-group-item.active .sub-act .sub-edit, #cc-sub-list .list-group-item.active .sub-act .sub-del { color: #fff !important; opacity: 1; } #cc-sub-list .sub-act .sub-edit, #cc-sub-list .sub-act .sub-del { cursor: pointer; } #code-group-tree .list-group-item.active .font-monospace, #code-group-tree .list-group-item.active .text-muted { color: #fff !important; opacity: .9; } /* 활성 행의 그룹 코드도 흰색 (8/27) */ #code-group-tree .accordion-header { position: relative; } #code-group-tree .accordion-header .cat-act { position: absolute; right: 40px; top: 50%; transform: translateY(-50%); display: inline-flex; gap: 6px; z-index: 2; } #code-group-tree .accordion-header .cat-act a { color: #98a2ae; font-size: 14px; } #code-group-tree .accordion-header .cat-act a:hover { color: #FD4F00; } /* 코드 표 비고 — 길면 말줄임(가로 스크롤 방지), 전체는 title로 */ .col-xl-9 table { table-layout: fixed; width: 100%; } .col-xl-9 table th:nth-child(1) { width: 36px; } .col-xl-9 table th:nth-child(2) { width: 90px; } .col-xl-9 table th:nth-child(4) { width: 90px; } .col-xl-9 table th:nth-child(5) { width: 80px; } .col-xl-9 table th:last-child { width: 130px; } .col-xl-9 table td.cc-note, .col-xl-9 table td:nth-child(3) { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* 폼 입력 높이 통일 — input-group(접두어·규격·캐비티)이 낱개 입력보다 커지지 않게, 셀렉트도 같은 높이 (8/28 PM "높이 맞춰") */ .form-control, .form-select { min-height: 36px; } .input-group > .form-control, .input-group > .form-select, .input-group > .input-group-text { height: 36px; min-height: 36px; padding-top: 0; padding-bottom: 0; line-height: 34px; } .input-group > .form-select { line-height: 1.5; } /* 대표 이미지 호버 [크게 보기] — 상세 공용 (8/31, 신제품·금형 상세) */ .photo-hover .photo-zoom{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .15s;z-index:5;white-space:nowrap} .photo-hover:hover .photo-zoom{opacity:1} .photo-hover:hover img{filter:brightness(.8)} /* 열이 많은 입력 표 — 셀 좌우 여백 축소로 한 화면에 담기게 (8/31 PM 신제품 사양서 부품 표) */ .tbl-compact > :not(caption) > * > *{padding-left:3px;padding-right:3px;padding-top:4px;padding-bottom:4px} .tbl-compact .form-control,.tbl-compact .form-select{padding-left:6px;padding-right:16px} .tbl-compact .form-select{background-position:right .35rem center} /* 컨테이너 단락 표 — 단락마다 검정 헤더가 반복되면 어수선해 회색으로 (9/1 회의 2항, 9/2 PM 지적) */ .cont-sec thead th{background:#eef1f5;color:#1f2a37;border-bottom-color:#dde3ea} /* 컨테이너 구역 — 표 헤더 아래를 tbody 단위로 나눔: 제목 줄은 옅은 배경, 구역 사이만 굵은 선 (9/2 PM) */ .cont-sec > tr.cont-title > td{background:rgba(253,79,0,.07);border-top:40px solid #fff;box-shadow:inset 0 2px 0 rgba(253,79,0,.35);padding-top:8px;padding-bottom:8px} .cont-sec > tr.cont-title .form-select{background-color:#fff} .cont-sec:first-of-type > tr.cont-title > td{border-top:0} /* 구역 마지막 행 아래 선 — 다음 구역 제목의 14px 흰 여백(border-collapse에서 굵은 쪽이 이긴다)이 앞 구역 마지막 행의 1px 선을 덮어 지운다. 겹치지 않는 inset 그림자로 다시 긋는다 (9/3 PM 지적) */ .cont-sec > tr:last-child > td{box-shadow:none} /* 구역 맨 아래선은 그리지 않는다 — 구역 사이 여백으로 구분된다 (9/4 PM) */ .cont-sec > tr.cont-title:last-child > td{box-shadow:inset 0 2px 0 rgba(253,79,0,.35)} /* 끌어다 놓기 — 공용 (팔레트 행·놓는 자리·바뀐 행 표시, 9/2 PM) */ .pp-draggable{cursor:grab} .pp-draggable:active{cursor:grabbing} .pp-draggable[data-dragging]{background:#fff7f3;outline:2px dashed #FD4F00;outline-offset:-2px} tr[data-drop] > td{box-shadow:inset 0 -2px 0 #FD4F00} @keyframes swap-flash{0%,100%{box-shadow:none}25%,75%{box-shadow:inset 0 2px 0 #FD4F00,inset 0 -2px 0 #FD4F00}} tr.swap-flash > td{animation:swap-flash .8s ease-in-out 2}