533 lines
8.4 KiB
CSS
533 lines
8.4 KiB
CSS
/*---------------20260119---------------*/
|
|
/* ===============================
|
|
서비스 등록 팝업
|
|
=============================== */
|
|
|
|
.service-popup {
|
|
padding: 10px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* 상단 */
|
|
.service-top {
|
|
display: flex;
|
|
gap: 16px;
|
|
margin-bottom: 12px;
|
|
}
|
|
|
|
/* 회원 정보 */
|
|
.service-member {
|
|
flex: 1;
|
|
border: 1px solid #ddd;
|
|
padding: 10px;
|
|
background: #fafafa;
|
|
}
|
|
|
|
.service-member > div {
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.purchase-date {
|
|
margin-top: 8px;
|
|
}
|
|
|
|
/* 상품 선택 */
|
|
.service-product {
|
|
width: 420px;
|
|
border: 1px solid #ddd;
|
|
padding: 10px;
|
|
background: #fff;
|
|
}
|
|
|
|
.service-product .title {
|
|
font-weight: bold;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
/* 저장 / 삭제 바 */
|
|
.service-save-bar {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
margin: 12px 0;
|
|
}
|
|
|
|
.service-save-bar .btn-delete {
|
|
padding: 6px 14px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
border-radius: 4px;
|
|
border: none;
|
|
background: rgb(247, 74, 52);
|
|
color: #fff;
|
|
}
|
|
|
|
.service-save-bar .btn-delete:hover {
|
|
background: #d32f2f;
|
|
}
|
|
|
|
.service-save-bar .btn-save {
|
|
padding: 6px 14px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
border-radius: 4px;
|
|
border: none;
|
|
background: rgb(70, 58, 248);
|
|
color: #fff;
|
|
}
|
|
|
|
.service-save-bar .btn-save:hover {
|
|
background: #3c04f3;
|
|
}
|
|
|
|
.service-save-bar .right-actions {
|
|
display: flex;
|
|
gap: 8px; /* 삭제-저장 간격 */
|
|
}
|
|
|
|
/* Grid */
|
|
.service-grid {
|
|
margin-top: 10px;
|
|
}
|
|
|
|
/* 합계 */
|
|
.service-summary {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 20px;
|
|
padding: 10px;
|
|
border-top: 2px solid #ccc;
|
|
margin-top: 8px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
/* ===============================
|
|
상품등록
|
|
=============================== */
|
|
|
|
.product-wrap {
|
|
max-width: 900px;
|
|
margin: 40px auto;
|
|
border: 1px solid #aaa;
|
|
background: #fff;
|
|
}
|
|
|
|
.product-header {
|
|
background: #f2f2f2;
|
|
padding: 10px 14px;
|
|
font-size: 16px;
|
|
font-weight: 700;
|
|
text-align: center;
|
|
position: relative;
|
|
}
|
|
|
|
.product-header .btn-close {
|
|
position: absolute;
|
|
right: 10px;
|
|
top: 8px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.product-toolbar {
|
|
padding: 8px 10px;
|
|
border-bottom: 1px solid #ccc;
|
|
display: flex;
|
|
gap: 6px;
|
|
}
|
|
|
|
.product-toolbar button {
|
|
padding: 4px 10px;
|
|
font-size: 13px;
|
|
}
|
|
|
|
/* ===============================
|
|
Grid 액션 바(슈퍼관리자 상단)
|
|
=============================== */
|
|
|
|
/* 검색 + 저장 버튼 한 줄 정렬 */
|
|
/* 전체 한 줄 */
|
|
.super-search-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 10px;
|
|
margin: 10px 20px;
|
|
}
|
|
|
|
/* 좌측 검색 그룹 */
|
|
.super-search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* 검색 입력 공통 */
|
|
.super-search select,
|
|
.super-search input {
|
|
height: 34px;
|
|
padding: 0 10px;
|
|
font-size: 13px;
|
|
border-radius: 6px;
|
|
border: 1px solid #d1d5db;
|
|
}
|
|
|
|
/* 검색 버튼 */
|
|
#btnSearch {
|
|
height: 34px;
|
|
padding: 0 14px;
|
|
border-radius: 6px;
|
|
border: 1px solid #2563eb;
|
|
background: #2563eb;
|
|
color: #374151;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#btnSearch:hover,
|
|
#btnSearch:focus,
|
|
#btnSearch:active {
|
|
background: #ffffff;
|
|
color: #374151;
|
|
border: 1px solid #2563eb;
|
|
box-shadow: none;
|
|
outline: none;
|
|
}
|
|
|
|
/* 🔥 저장 버튼을 오른쪽 끝으로 */
|
|
#btnSave {
|
|
margin-left: auto;
|
|
height: 34px;
|
|
padding: 0 16px;
|
|
border-radius: 6px;
|
|
border: 1px solid #2563eb;
|
|
background: #2563eb;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#btnSave:hover {
|
|
background: #1d4ed8;
|
|
}
|
|
|
|
#schMemberStatus {
|
|
width: 130px;
|
|
}
|
|
|
|
#schMemberName {
|
|
width: 160px;
|
|
}
|
|
|
|
#schRemainArea {
|
|
width: 160px;
|
|
text-align: right;
|
|
}
|
|
|
|
#btnSuperSearch {
|
|
margin-left: auto;
|
|
height: 34px;
|
|
padding: 0 16px;
|
|
font-size: 13px;
|
|
border-radius: 6px;
|
|
border: 1px solid #2563eb;
|
|
background: #2563eb;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
#btnSuperSearch:hover {
|
|
background: #1d4ed8;
|
|
}
|
|
|
|
.grid-action-bar {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.btn-save {
|
|
padding: 6px 14px;
|
|
font-size: 13px;
|
|
font-weight: 600;
|
|
border-radius: 4px;
|
|
border: none;
|
|
background: #2f80ed;
|
|
color: #fff;
|
|
}
|
|
|
|
.btn-save:hover {
|
|
background: #1f66d1;
|
|
}
|
|
|
|
/* ===============================
|
|
관리자 요약 영역 (거래처관리자 상단)
|
|
=============================== */
|
|
|
|
.adm-summary {
|
|
border: 2px solid #1f6fd8;
|
|
font-size: 13px;
|
|
padding: 0;
|
|
}
|
|
|
|
.adm-row {
|
|
display: flex;
|
|
align-items: center;
|
|
padding: 6px 10px;
|
|
border-bottom: 1px solid #1f6fd8;
|
|
}
|
|
|
|
.adm-row:last-child {
|
|
border-bottom: none;
|
|
}
|
|
|
|
.adm-item {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
.adm-item.right {
|
|
margin-left: auto;
|
|
}
|
|
|
|
.label {
|
|
font-weight: 600;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.value {
|
|
margin-right: 8px;
|
|
}
|
|
|
|
.value.bold {
|
|
font-weight: 700;
|
|
}
|
|
|
|
|
|
/* 사용량 */
|
|
.adm-row.usage {
|
|
align-items: flex-start;
|
|
}
|
|
|
|
.usage-box {
|
|
margin-left: auto;
|
|
width: 520px;
|
|
}
|
|
|
|
.usage-text {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
font-size: 12px;
|
|
margin-bottom: 4px;
|
|
}
|
|
|
|
.usage-bar {
|
|
display: flex;
|
|
height: 22px;
|
|
background: #eee;
|
|
border-radius: 3px;
|
|
overflow: hidden;
|
|
font-size: 12px;
|
|
font-weight: 700;
|
|
color: #fff;
|
|
margin-top: 6px;
|
|
}
|
|
|
|
.usage-used {
|
|
background: #ff6b6b;
|
|
text-align: center;
|
|
line-height: 22px;
|
|
width: 60%;
|
|
height: 100%;
|
|
float: left;
|
|
}
|
|
|
|
.usage-remain {
|
|
background: #4caf50;
|
|
text-align: center;
|
|
line-height: 22px;
|
|
width: 40%;
|
|
height: 100%;
|
|
float: left;
|
|
}
|
|
|
|
/*검색영역*/
|
|
.adm-search {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 6px;
|
|
margin: 0 20px 10px;
|
|
}
|
|
|
|
.adm-search input,
|
|
.adm-search select {
|
|
height: 32px;
|
|
padding: 0 8px;
|
|
font-size: 13px;
|
|
border-radius: 6px;
|
|
border: 1px solid #d1d5db;
|
|
background: #fff;
|
|
width: 120px;
|
|
}
|
|
|
|
.adm-search button {
|
|
height: 32px;
|
|
padding: 0 10px;
|
|
font-size: 13px;
|
|
border-radius: 6px;
|
|
border: 1px solid #d1d5db;
|
|
background: #ffffff;
|
|
cursor: pointer;
|
|
margin-left: 0;
|
|
}
|
|
|
|
.adm-search button:hover {
|
|
background: #f9fafb;
|
|
}
|
|
|
|
#btnSave_comp {
|
|
background: #2563eb;
|
|
border-color: #2563eb;
|
|
color: #fff;
|
|
margin-left: auto;
|
|
}
|
|
|
|
#btnSave_comp:hover {
|
|
background: #1d4ed8;
|
|
}
|
|
|
|
#btnDelete {
|
|
color: #dc2626;
|
|
border-color: #dc2626;
|
|
}
|
|
|
|
#btnDelete:hover {
|
|
background: #fee2e2;
|
|
}
|
|
|
|
#btnSearch {
|
|
margin-left: auto;
|
|
background: #f3f4f6;
|
|
margin-left: 4px;
|
|
}
|
|
|
|
#btnAdd {
|
|
border-color: #22c55e;
|
|
color: #22c55e;
|
|
}
|
|
|
|
#btnAdd:hover {
|
|
background: #ecfdf5;
|
|
}
|
|
|
|
/* 좌측 상단 홈 버튼 - 타이틀 높이 기준 정렬 */
|
|
.btn-home-fixed {
|
|
position: fixed;
|
|
top: 14px;
|
|
left: 16px;
|
|
z-index: 2000;
|
|
|
|
width: 40px;
|
|
height: 40px;
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
background: #000;
|
|
color: #fff;
|
|
border-radius: 8px;
|
|
}
|
|
|
|
/* ⭐ 반드시 SVG 크기 제한 */
|
|
.btn-home-fixed .icon-home {
|
|
width: 20px;
|
|
height: 20px;
|
|
}
|
|
|
|
.adm-member-input {
|
|
width: 140px;
|
|
margin-right: 6px;
|
|
}
|
|
|
|
.btn-bulk {
|
|
margin-right: 12px;
|
|
background: #555;
|
|
color: #080808;
|
|
}
|
|
|
|
|
|
/* ===============================
|
|
관리자 페이지 타이틀 (슈퍼&거래처)
|
|
=============================== */
|
|
|
|
.adm-title {
|
|
position: relative;
|
|
text-align: center;
|
|
font-size: 24px;
|
|
font-weight: 700;
|
|
margin: 12px 0 16px;
|
|
}
|
|
|
|
/* 우측 상단 버튼 */
|
|
.adm-title-actions {
|
|
position: absolute;
|
|
right: 0;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
display: flex;
|
|
gap: 8px;
|
|
}
|
|
|
|
/* 구매이력 버튼 */
|
|
.btn-history {
|
|
padding: 6px 14px;
|
|
font-size: 13px;
|
|
border: 1px solid #999;
|
|
background: #f5f5f5;
|
|
cursor: pointer;
|
|
right: 0;
|
|
}
|
|
.btn-history:hover {
|
|
background: #e9e9e9;
|
|
}
|
|
|
|
/* 상품등록 버튼 (강조 스타일) */
|
|
.btn-product {
|
|
padding: 6px 14px;
|
|
font-size: 13px;
|
|
border: 1px solid #1f6fd8;
|
|
background: #1f6fd8;
|
|
color: #fff;
|
|
cursor: pointer;
|
|
}
|
|
.btn-product:hover {
|
|
background: #185bb0;
|
|
}
|
|
|
|
.btn-service {
|
|
padding: 6px 14px;
|
|
font-size: 13px;
|
|
border: 1px solid #444;
|
|
background: #444;
|
|
color: #fff;
|
|
}
|
|
|
|
/* ===============================
|
|
공통
|
|
=============================== */
|
|
|
|
body {
|
|
font-size: 13px;
|
|
}
|
|
|
|
.card {
|
|
background: #fff;
|
|
border: 1px solid #ddd;
|
|
padding: 16px 20px;
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
/* 버튼 공통 */
|
|
button {
|
|
cursor: pointer;
|
|
}
|
|
|