/* ============================================================================ * madmin_app.css — /Madmin 전용 보정·확장 스타일. * 원본 admin.css / style.css는 절대 수정하지 않고, 이 파일에서만 보정한다. * ============================================================================ */ /* ---- 기본 리셋: 본문 회색 배경, 폰트 ---- */ html, body { margin: 0; padding: 0; background-color: #eff0f4; color: #4e5e6a; font-family: 'Malgun Gothic','맑은 고딕','Noto Sans KR','NanumBarunGothic','돋움',Dotum,sans-serif; } /* ---- 좌측 사이드바 로고 — 상단바 높이(50px)와 정확히 정렬 ---- */ #leftMenu .logo { height: 50px; width: 100%; background: #fff; display: flex; align-items: center; justify-content: center; border-bottom: 1px solid #e6e6e6; /* gnb 와 동일 라인 */ padding: 0 12px; box-sizing: border-box; } #leftMenu .logo a { display: inline-flex; align-items: center; line-height: 0; } #leftMenu .logo img { max-height: 32px; width: auto; display: block; } #leftMenu .logo a.logo-brand { text-decoration: none; line-height: 1; letter-spacing: 0.3px; } #leftMenu .logo a.logo-brand .logo-text { font-weight: 700; font-size: 17px; background: linear-gradient(90deg,#7367f0 0%,#3e8ef7 50%,#1aa28a 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; color: transparent; display: inline-block; } /* ---- 사이드바 메뉴 색상 보정 (admin.css 기본 위에 우선 적용) ---- */ #leftMenu .lnb .lnb-menu .left i { width: 16px; text-align: center; } #leftMenu .lnb .lnb-submenu .lnb-submenu-item { padding-left: 50px; font-size: 13px; border-top: 1px solid #2d3744; } #leftMenu .lnb .lnb-submenu .lnb-submenu-item:first-child { border-top: 0; } /* ---- 상단 GNB (흰색 top bar) — 좌측 로고와 같은 높이/라인 ---- */ #rightCont .gnb { display: flex; align-items: stretch; /* 자식 메뉴 박스가 전체 높이 차지 */ padding: 0; height: 50px; } #rightCont .gnb .gnb-spacer { flex: 1; } #rightCont .gnb .gnb-menu { position: relative; display: flex; /* 아이콘/텍스트 세로 중앙 */ align-items: center; gap: 6px; height: 50px; line-height: 1; /* 줄높이 50→1 (vertical-align 의존 X) */ padding: 0 16px; border-left: 1px solid #eee; color: #4e5e6a; font-size: 13px; cursor: pointer; user-select: none; box-sizing: border-box; } #rightCont .gnb .gnb-menu:first-child { border-left: 0; } #rightCont .gnb .gnb-menu:hover { background: #fafafa; color: #1aa28a; } #rightCont .gnb .gnb-menu a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 6px; height: 100%; } #rightCont .gnb .gnb-menu .fa { color: #888; margin: 0; } #rightCont .gnb .gnb-menu:hover .fa { color: #1aa28a; } #rightCont .gnb .gnb-menu .fa.fa-caret-down { font-size: 11px; } #rightCont .gnb .gnb-menu .gnb-menu-list { display: none; position: absolute; top: 50px; right: 0; min-width: 180px; background: #fff; border: 1px solid #e6e6e6; border-top: 0; box-shadow: 0 2px 6px rgba(0,0,0,.08); z-index: 1000; } #rightCont .gnb .gnb-menu .gnb-menu-list .gnb-menu-item { padding: 10px 18px; line-height: 1.4; border-top: 1px solid #f3f3f3; cursor: pointer; color: #4e5e6a; font-size: 13px; } #rightCont .gnb .gnb-menu .gnb-menu-list .gnb-menu-item:first-child { border-top: 0; } #rightCont .gnb .gnb-menu .gnb-menu-list .gnb-menu-item:hover { background: #f6f8fa; color: #424f63; } #rightCont .gnb .gnb-menu .gnb-menu-list .gnb-menu-item .square { color: #62cea6; margin-right: 8px; font-size: 8px; vertical-align: middle; } /* ---- pageContainer 상단 여유 (gnb fixed 50px) ---- */ #pageContainer { padding-top: 50px; min-height: calc(100vh - 50px); } #pageContainer .pageWrap { padding: 22px 26px 44px; } #pageContainer .pageWrap .page-heading { padding-bottom: 16px; } #pageContainer .pageWrap .page-heading h3 { font-size: 20px; color: #2c3a50; letter-spacing: -.3px; } #pageContainer .pageWrap .page-heading .breadcrumb { padding: 0; margin: 6px 0 0; list-style: none; } #pageContainer .pageWrap .page-heading .breadcrumb li { font-size: 12px; color: #999; } #pageContainer .pageWrap .page-heading .breadcrumb li.active { color: #1aa28a; } /* ---- 카드 박스 보정 — 라운드 + 약한 shadow + 카드 간격 통일 ---- */ #pageContainer .box { background: #fff; border: 1px solid #e8eaee; border-radius: 6px; box-shadow: 0 1px 2px rgba(28,42,67,.04), 0 1px 8px rgba(28,42,67,.03); } #pageContainer .box + .box { margin-top: 16px; } #pageContainer .box .panel { padding: 18px 20px; } /* ---- flash 메시지 ---- */ .flash { margin: 0 0 14px; padding: 10px 14px; border-radius: 4px; font-size: 13px; } .flash.ok { background:#e6ffed; border:1px solid #b7eb8f; color:#22863a; } .flash.err { background:#ffeef0; border:1px solid #fdb8c0; color:#b31d28; } /* ============================================================================ * 표준 컴포넌트 — STEP 3+의 목록/검색/폼 페이지가 공통으로 쓰는 클래스 * ============================================================================ */ /* ---- 검색 박스 (search-box) — 한 줄 정렬 우선, 좁아지면 자연스럽게 줄바꿈 ---- */ .search-box { padding: 14px 18px; } .search-box .search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin-bottom: 6px; } .search-box .search-row:last-child { margin-bottom: 0; } .search-box label.lbl { display: inline-flex; align-items: center; min-width: 56px; justify-content: flex-end; height: 32px; font-size: 12px; color: #5a6573; font-weight: 600; padding-right: 6px; flex-shrink: 0; } .search-box .grow { flex: 1 1 auto; min-width: 160px; } .search-box .sep { color: #aaa; padding: 0 4px; font-size: 12px; display: inline-flex; align-items: center; height: 32px; } .search-box .form-control { padding: 5px 10px; border: 1px solid #dce1e4; border-radius: 3px; font-size: 12px; background: #fff; color: #333; vertical-align: middle; line-height: 1.2; height: 32px; box-sizing: border-box; width: auto; max-width: none; } .search-box select.form-control { padding: 4px 8px; min-width: 110px; } .search-box input.form-control[type="text"] { min-width: 180px; } .search-box input.form-control[type="date"] { width: 150px; } .search-box .form-control:focus { outline: none; border-color: #1aa28a; box-shadow: 0 0 0 2px rgba(26,162,138,.12); } .search-box .btn { height: 32px; line-height: 1; padding: 0 14px; display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; flex-shrink: 0; } .search-box .btn .fa { line-height: 1; } /* ---- 리스트 테이블 (list-table) ---- */ .list-wrap { padding: 0; overflow: hidden; border-radius: 6px; } .list-wrap > .list-toolbar { display: flex; align-items: center; padding: 14px 20px; border-bottom: 1px solid #f0f0f0; background: #fbfbfd; } .list-wrap > .list-toolbar .left { flex: 1; font-size: 13px; color: #6b7785; } .list-wrap > .list-toolbar .right { display: flex; gap: 6px; } table.list-table { width: 100%; border-collapse: collapse; background: #fff; } table.list-table thead td, table.list-table thead th { background: #f6f7fa; font-weight: 700; color: #2c3a50; font-size: 12px; text-align: center; padding: 13px 8px; border-bottom: 1px solid #e1e5ea; } table.list-table tbody td { font-size: 13px; color: #3c4a5a; text-align: center; padding: 13px 8px; border-bottom: 1px solid #eef0f3; vertical-align: middle; } table.list-table tbody tr:hover td { background: #f7fbfa; } table.list-table td.tal { text-align: left; } table.list-table td.tar { text-align: right; } table.list-table .empty { text-align: center; padding: 50px 20px; color: #999; font-size: 13px; } table.list-table tbody td .btn { margin: 0 1px; } /* ---- 폼 테이블 (form-table) — 라벨 톤·input/select 통일 ---- */ table.form-table { width: 100%; border-collapse: collapse; background: #fff; } table.form-table tr:first-child th, table.form-table tr:first-child td { border-top: 0; } table.form-table th { width: 160px; padding: 14px 16px; border-bottom: 1px solid #eef0f3; background: #f8f9fb; font-size: 13px; font-weight: 600; color: #4e5e6a; text-align: left; vertical-align: middle; } table.form-table th .req { color: #d9534f; margin-left: 2px; } table.form-table td { padding: 14px 16px; border-bottom: 1px solid #eef0f3; font-size: 13px; color: #2c3a50; vertical-align: middle; } table.form-table tr:last-child th, table.form-table tr:last-child td { border-bottom: 0; } table.form-table input[type=text], table.form-table input[type=password], table.form-table input[type=email], table.form-table input[type=url], table.form-table input[type=date], table.form-table input[type=datetime-local], table.form-table input[type=number], table.form-table select, table.form-table textarea { border: 1px solid #d6dbe0; border-radius: 4px; padding: 7px 10px; font-size: 13px; background: #fff; color: #2c3a50; box-sizing: border-box; height: 34px; transition: border-color .12s, box-shadow .12s; } table.form-table textarea { width: 100%; min-height: 160px; height: auto; resize: vertical; line-height: 1.5; } table.form-table input:focus, table.form-table select:focus, table.form-table textarea:focus { outline: none; border-color: #1aa28a; box-shadow: 0 0 0 2px rgba(26,162,138,.12); } table.form-table input[type=file] { font-size: 12px; } table.form-table .input-full { width: 100%; max-width: 600px; box-sizing: border-box; } table.form-table .hint { color: #98a2ad; font-size: 12px; margin-top: 5px; line-height: 1.5; } /* 팝업 form 내부 sub-box (PC 영역 / 모바일 영역 묶음용) */ .form-subbox { background:#fbfcfd; border:1px solid #e8ecf1; border-radius:5px; padding:4px 10px; } table.form-subtable { width: 100%; border-collapse: collapse; background: transparent; } table.form-subtable th { width: 80px; padding: 8px 10px; background: transparent; border-bottom: 1px dashed #e3e7ec; font-size: 12px; font-weight: 600; color: #6b7785; text-align: left; vertical-align: middle; } table.form-subtable td { padding: 8px 10px; background: transparent; border-bottom: 1px dashed #e3e7ec; font-size: 12px; color: #2c3a50; } table.form-subtable tr:last-child th, table.form-subtable tr:last-child td { border-bottom: 0; } /* ---- 공통 드래그앤드롭 업로드 UI (.upbox) ---- */ .upbox { width: 100%; } .upbox_input { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; } .upbox_drop { display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 2px dashed #cfd8e0; border-radius: 6px; background: #fbfcfd; color: #6b7785; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s; } .upbox_drop:hover { background: #f3f9f7; border-color: #1aa28a; color: #1aa28a; } .upbox.is_dragover .upbox_drop { background: #ebf6f3; border-color: #1aa28a; color: #1aa28a; box-shadow: inset 0 0 0 1px rgba(26,162,138,.18); } .upbox_icon { font-size: 28px; color: #1aa28a; flex-shrink: 0; line-height: 1; } .upbox_text { font-size: 13px; line-height: 1.5; } .upbox_text strong { color: #1aa28a; font-weight: 600; margin-right: 4px; } .upbox_hint { color: #98a2ad; font-size: 11px; margin-top: 4px; } .upbox_files { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; } .upbox_files:empty { display: none; } .upbox_item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px 6px 6px; background: #fff; border: 1px solid #e1e5ea; border-radius: 4px; font-size: 12px; color: #2c3a50; max-width: 100%; } .upbox_thumb { width: 36px; height: 28px; object-fit: cover; border-radius: 3px; background: #f2f4f7; display: inline-flex; align-items: center; justify-content: center; color: #98a2ad; flex-shrink: 0; } .upbox_thumb_file .fa { font-size: 14px; } .upbox_fname { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .upbox_fsize { color: #98a2ad; font-size: 11px; flex-shrink: 0; } .upbox.has_files .upbox_drop { padding: 10px 14px; } .upbox.has_files .upbox_icon { font-size: 22px; } /* 기존 첨부 표시 (서버에 이미 저장된 파일) */ .up_existing { margin-bottom: 10px; } .up_existing_item { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; background: #fff; border: 1px solid #e1e5ea; border-radius: 4px; font-size: 12px; color: #2c3a50; margin-right: 6px; margin-bottom: 6px; } .up_existing_item img { width: 36px; height: 28px; object-fit: cover; border-radius: 3px; } .up_existing_item .fa-paperclip { color: #98a2ad; } .up_existing_item label { display: inline-flex; align-items: center; gap: 4px; color: #d9534f; font-size: 11px; cursor: pointer; } .up_existing_item label input { margin: 0; } /* ---- 버튼 — 텍스트 대비 통일 (관리자 전용, 프론트 무영향) ---- * primary : 신규등록 / 대시보드 진입 — 진남색 * info : 저장 / 검색 — 민트 * success : 수정 — 그린 * danger : 삭제 — 레드 * default : 목록/취소/초기화 — 흰색 + 회색 보더 * warning : 보류/대기 등 — 옐로 */ #pageContainer .btn, #pageContainer .form-actions .btn, .box .btn, .search-box .btn { color: #fff; border: 1px solid transparent; font-weight: 600; letter-spacing: -0.2px; transition: background-color .12s, border-color .12s, color .12s; } #pageContainer .btn-primary, .box .btn-primary, .search-box .btn-primary { background-color: #2f6fd6; border-color: #2860c2; color: #fff; } #pageContainer .btn-primary:hover, .box .btn-primary:hover, .search-box .btn-primary:hover { background-color: #1f5cba; border-color: #1f5cba; color: #fff; } #pageContainer .btn-info, .box .btn-info, .search-box .btn-info { background-color: #1aa28a; border-color: #168a76; color: #fff; } #pageContainer .btn-info:hover, .box .btn-info:hover, .search-box .btn-info:hover { background-color: #128871; border-color: #128871; color: #fff; } #pageContainer .btn-success, .box .btn-success { background-color: #2faa54; border-color: #259244; color: #fff; } #pageContainer .btn-success:hover, .box .btn-success:hover { background-color: #259244; border-color: #259244; color: #fff; } #pageContainer .btn-danger, .box .btn-danger { background-color: #d9534f; border-color: #c9302c; color: #fff; } #pageContainer .btn-danger:hover, .box .btn-danger:hover { background-color: #c9302c; border-color: #c9302c; color: #fff; } #pageContainer .btn-warning, .box .btn-warning { background-color: #f0ad4e; border-color: #eea236; color: #fff; } #pageContainer .btn-warning:hover, .box .btn-warning:hover { background-color: #ec971f; border-color: #ec971f; color: #fff; } #pageContainer .btn-default, .box .btn-default, .search-box .btn-default { background-color: #fff; border-color: #cfd4d8; color: #444; } #pageContainer .btn-default:hover, .box .btn-default:hover, .search-box .btn-default:hover { background-color: #f3f5f7; border-color: #b8bdc2; color: #222; } /* 비활성 버튼 */ #pageContainer .btn.disabled, #pageContainer .btn[disabled] { background-color: #e8eaed; border-color: #d0d4d8; color: #999; cursor: not-allowed; } /* ---- 페이지네이션 ---- */ .pager { margin: 20px 0 4px; text-align: center; } .pager a, .pager .cur, .pager .gap, .pager .nav-btn { display: inline-block; min-width: 32px; padding: 7px 12px; margin: 0 2px; border: 1px solid #e1e4e8; background: #fff; color: #555; font-size: 12px; text-decoration: none; border-radius: 4px; line-height: 1.2; transition: background-color .12s, color .12s, border-color .12s; } .pager a:hover { background: #f3f9f7; color: #1aa28a; border-color: #1aa28a; text-decoration: none; } .pager .cur { background: #1aa28a; color: #fff; border-color: #168a76; font-weight: bold; } .pager .gap { background: transparent; border-color: transparent; color: #aaa; } .pager .nav-btn { color: #4e5e6a; } .pager .nav-btn .fa { margin: 0 4px; font-size: 10px; } /* ---- 상태 표시 라벨 ---- */ .status-label { display: inline-block; padding: 2px 8px; font-size: 11px; border-radius: 10px; font-weight: 600; line-height: 1.6; } .status-label.on { background: #e8f7f1; color: #1ea27d; border: 1px solid #b6e2cf; } .status-label.off { background: #fdecec; color: #c0392b; border: 1px solid #f5b8b8; } .status-label.expired { background: #eef1f6; color: #6c7a8b; border: 1px solid #d8dde6; } .status-label.draft { background: #fff7e6; color: #b06d00; border: 1px solid #f5dc99; } /* ---- 폼 액션바 — 좌(목록), 우(확인/취소) 정렬 ---- */ .form-actions { display: flex; align-items: center; padding: 16px 20px; border-top: 1px solid #eef0f3; background: #f8f9fb; border-radius: 0 0 6px 6px; } .form-actions .left { flex: 1; text-align: left; } .form-actions .right { text-align: right; } .form-actions .btn { margin: 0 3px; min-width: 88px; } /* ---- "준비중" 메뉴 ---- */ .coming-soon { text-align: center; padding: 70px 20px 90px; color: #888; } .coming-soon .ico { font-size: 64px; color: #d6d8de; margin-bottom: 20px; } .coming-soon h2 { margin: 0 0 10px; font-size: 22px; color: #49586e; font-weight: normal; } .coming-soon p { margin: 0 0 22px; font-size: 14px; color: #888; } /* ---- 대시보드 카드 — grid 레이아웃으로 잘림 방지 ---- */ .stat_card { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 16px; } .stat_card .card { background: #fff; border: 1px solid #e8eaee; border-radius: 6px; padding: 16px 18px; box-shadow: 0 1px 2px rgba(28,42,67,.04), 0 1px 8px rgba(28,42,67,.03); min-width: 0; box-sizing: border-box; overflow: hidden; } .stat_card .card .label { font-size: 12px; color: #888; margin-bottom: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat_card .card .value { font-size: 24px; font-weight: bold; color: #2c3a50; letter-spacing: -.3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat_card .card .sub { font-size: 11px; color: #98a2ad; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat_card .card .value.muted { color: #cccccc; } .notice_box { background: #fff; border: 1px solid #e6e6e6; border-radius: 4px; padding: 18px 20px; margin-top: 12px; } .notice_box h4 { margin: 0 0 8px; font-size: 14px; color: #4e5e6a; } .notice_box ul { margin: 0; padding-left: 20px; color: #666; font-size: 13px; line-height: 1.8; } /* ---- 대시보드 3단 "최근 현황" 영역 — grid 로 잘림 방지 ---- */ .dash_recent { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 4px; } .dash_recent .dash_col { min-width: 0; } .dash_recent .dash_col .box { margin: 0; height: 100%; box-sizing: border-box; overflow: hidden; } .dash_recent .dash_col .panel { padding: 16px 18px; } .dash_recent .panel .title { font-size: 14px; font-weight: 600; color: #4e5e6a; border-bottom: 1px solid #f0f0f0; padding-bottom: 10px; } .dash_recent .panel .title .fa { color: #1aa28a; margin-right: 4px; } .dash_recent .panel .title a { color: #1aa28a; } .dash_recent .panel .list-table thead td, .dash_recent .panel .list-table thead th { height: 32px; padding: 6px 4px; font-size: 11px; } .dash_recent .panel .list-table tbody td { height: auto; padding: 8px 4px; font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; } .dash_recent .panel .list-table tbody td.tal { max-width: none; white-space: normal; } .dash_recent .panel .list-table tbody td a { color: #424f63; text-decoration: none; } .dash_recent .panel .list-table tbody td a:hover { color: #1aa28a; text-decoration: underline; } /* ---- 접속통계 차트 박스 ---- */ .stats_chart_wrap { padding: 16px 22px 18px; } .stats_chart_wrap .stats_chart_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; padding-bottom: 10px; border-bottom: 1px solid #eef0f3; flex-wrap: wrap; gap: 8px; } .stats_chart_wrap .stats_chart_head h4 { margin: 0; font-size: 14px; font-weight: 600; color: #2c3a50; letter-spacing: -.2px; } .stats_chart_wrap .stats_chart_head h4 .fa { color: #1aa28a; margin-right: 6px; } .stats_chart_wrap .stats_chart_legend { font-size: 12px; color: #6b7785; display: inline-flex; gap: 16px; } .stats_chart_wrap .stats_chart_legend span { display: inline-flex; align-items: center; gap: 6px; } .stats_chart_wrap .stats_chart_legend i { display: inline-block; width: 12px; height: 12px; border-radius: 2px; } .stats_chart_wrap .stats_chart_canvas { position: relative; height: 240px; width: 100%; padding: 8px 0 0; } /* 차트 박스 자체에도 카드 톤 살짝 — wrap 안에서 정돈된 캔버스 영역 강조 */ .stats_chart_wrap .stats_chart_canvas canvas { max-height: 100% !important; } /* ============================================================================ * 로그인 화면 (admin_login) * ============================================================================ */ body.madmin-login { margin: 0; background: #3B54A4; /* easyBackground 가 위에 덮음 */ color: #555; font-family: 'Malgun Gothic','맑은 고딕','Noto Sans KR',sans-serif; } .madmin-login #wrap { width: 100%; min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; z-index: 10; } .madmin-login #login_wrap { width: 520px; background: #fff; border-radius: 6px; box-shadow: 0 8px 28px rgba(0,0,0,.18); } .madmin-login #login_con { padding: 40px 50px 30px; } .madmin-login .login_logo_con { text-align: center; padding-top: 10px; padding-bottom: 8px; } .madmin-login .login_logo_con img { max-height: 56px; width: auto; } .madmin-login .login_title_con { text-align: center; margin: 18px 0 28px; } .madmin-login .login_title_text { font-size: 15px; color: #4e5e6a; letter-spacing: -.5px; font-weight: 600; } .madmin-login .login_err { background: #ffeef0; border: 1px solid #fdb8c0; color: #b31d28; padding: 9px 12px; border-radius: 4px; font-size: 13px; margin-bottom: 14px; text-align: center; } .madmin-login .login_ipnut_con { margin-bottom: 14px; } .madmin-login .login_ipnut { width: 100%; box-sizing: border-box; padding: 13px 14px; border: 1px solid #d0d7de; border-radius: 3px; font-size: 14px; color: #333; background: #fafbfc; } .madmin-login .login_ipnut:focus { outline: none; border-color: #22BAA0; background: #fff; } .madmin-login .login_btn_con { margin: 20px 0 18px; } .madmin-login .login_btn { width: 100%; padding: 14px 0; background: #22BAA0; color: #fff; border: 0; border-radius: 3px; font-size: 15px; font-weight: bold; cursor: pointer; letter-spacing: .5px; } .madmin-login .login_btn:hover { background: #1aa28a; } .madmin-login .login_intro_text_con { text-align: center; padding-top: 4px; } .madmin-login .login_intro_text { font-size: 12px; color: #bbb; } /* ============================================================================ * v2 POLISH — 공통 관리자 UI 기준 (다른 마이그레이션 관리자에도 재사용 가능) * 가장 마지막에 선언되어 위쪽 규칙을 모두 override. * 토큰: * 포인트 #1aa28a (mint/teal) * 다크 BG #2a3344 (좌측 메뉴) * 본문 BG #f4f6f9 * 카드 BG #fff radius 12px shadow 0 8px 24px rgba(15,23,42,.06) * input height 38px radius 6px * ============================================================================ */ /* ── 배경 톤 ── */ html, body { background-color: #f4f6f9; } /* ── 좌측 사이드바 — 더 깊은 슬레이트 톤 ── */ #leftMenu { background-color: #2a3344 !important; } #leftMenu .logo { height: 56px; border-bottom: 1px solid #e6e6e6; padding: 0 14px; } #leftMenu .logo img { max-height: 32px; } #leftMenu .lnb .lnb-div.userInfo, #leftMenu .lnb .lnb-menu { height: 44px; } #leftMenu .lnb .lnb-div.userInfo { line-height: 44px; } #leftMenu .lnb .lnb-div.userInfo { border-bottom: 1px solid #1f2632; } #leftMenu .lnb .lnb-menu .fa, #leftMenu .lnb .lnb-div .fa { line-height: 44px; } #leftMenu .lnb .lnb-menu.sel, #leftMenu .lnb .lnb-menu.on { background-color: #232b3a; } #leftMenu .lnb .lnb-menu.sel .left, #leftMenu .lnb .lnb-menu.on .left { color: #1aa28a; } #leftMenu .lnb .lnb-submenu { background-color: #232b3a; } #leftMenu .lnb .lnb-submenu .lnb-submenu-item { line-height: 38px; padding-left: 50px; font-size: 13px; border-top: 1px solid #1f2632; } #leftMenu .lnb .lnb-submenu .lnb-submenu-item.on, #leftMenu .lnb .lnb-submenu .lnb-submenu-item.sel { background-color: #1c2330; color: #1aa28a; } /* ── 상단 GNB 56px (로고와 정확히 일치) ── */ #rightCont .gnb { height: 56px; border-bottom: 1px solid #e6e6e6; background: #fff; } #rightCont .gnb .gnb-menu { height: 56px; } /* ── 본문 영역 ── */ #pageContainer { padding-top: 56px; min-height: calc(100vh - 56px); } #pageContainer .pageWrap { padding: 26px 28px 56px; } /* ── 페이지 헤딩 — 간격 축소 ── */ #pageContainer .pageWrap .page-heading { padding-bottom: 18px; position: relative; } #pageContainer .pageWrap .page-heading h3 { font-size: 22px; color: #1f2937; font-weight: 600; margin: 0 0 8px; letter-spacing: -.3px; } #pageContainer .pageWrap .page-heading .breadcrumb { padding: 0; margin: 0 0 4px; list-style: none; } #pageContainer .pageWrap .page-heading .breadcrumb li { font-size: 12px; color: #94a3b8; display: inline-block; } #pageContainer .pageWrap .page-heading .breadcrumb > li + li:before { padding: 0 6px; color: #cbd5e1; content: "/"; } #pageContainer .pageWrap .page-heading .breadcrumb li.active { color: #1aa28a; } /* ── 카드 — 라운드 12, 약한 shadow ── */ #pageContainer .box { background: #fff; border: 1px solid #e9edf2; border-radius: 12px; box-shadow: 0 8px 24px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); } #pageContainer .box + .box { margin-top: 18px; } #pageContainer .box .panel { padding: 22px 24px; } /* ── 상단 카드(통계) ── */ .stat_card { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; margin-bottom: 18px; } .stat_card .card { background: #fff; border: 1px solid #e9edf2; border-radius: 12px; padding: 18px 20px; box-shadow: 0 8px 24px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); min-width: 0; box-sizing: border-box; overflow: hidden; } .stat_card .card .label { font-size: 12px; color: #6b7785; margin-bottom: 6px; font-weight: 600; } .stat_card .card .value { font-size: 26px; font-weight: 700; color: #1f2937; letter-spacing: -.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .stat_card .card .sub { font-size: 11px; color: #94a3b8; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ── 대시보드 3단 ── */ .dash_recent { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; margin-top: 6px; } .dash_recent .dash_col { min-width: 0; } .dash_recent .dash_col .box { margin: 0; height: 100%; box-sizing: border-box; overflow: hidden; } .dash_recent .panel { padding: 18px 20px; } .dash_recent .panel .title { font-size: 14px; font-weight: 600; color: #1f2937; border-bottom: 1px solid #f0f3f7; padding-bottom: 10px; } .dash_recent .panel .title .fa, .dash_recent .panel .title a { color: #1aa28a; } /* ── 폼 카드 / form-table ── */ table.form-table { width: 100%; border-collapse: collapse; background: #fff; } table.form-table tr:first-child th, table.form-table tr:first-child td { border-top: 0; } table.form-table tr:last-child th, table.form-table tr:last-child td { border-bottom: 0; } table.form-table th { width: 168px; padding: 16px 18px; border-bottom: 1px solid #f0f3f7; background: #f8fafc; font-size: 13px; font-weight: 600; color: #475569; text-align: left; vertical-align: middle; line-height: 1.5; } table.form-table td { padding: 16px 18px; border-bottom: 1px solid #f0f3f7; font-size: 13px; color: #1f2937; vertical-align: middle; line-height: 1.6; } table.form-table input[type=text], table.form-table input[type=password], table.form-table input[type=email], table.form-table input[type=url], table.form-table input[type=date], table.form-table input[type=datetime-local], table.form-table input[type=number], table.form-table input[type=search], table.form-table input[type=tel], table.form-table select, table.form-table textarea { border: 1px solid #d6dde6; border-radius: 6px; padding: 8px 12px; font-size: 13px; background: #fff; color: #1f2937; box-sizing: border-box; height: 38px; line-height: 1.4; transition: border-color .12s, box-shadow .12s; } table.form-table textarea { width: 100%; min-height: 180px; height: auto; resize: vertical; line-height: 1.6; } table.form-table input:focus, table.form-table select:focus, table.form-table textarea:focus { outline: none; border-color: #1aa28a; box-shadow: 0 0 0 3px rgba(26,162,138,.15); } table.form-table .input-full { width: 100%; max-width: 640px; box-sizing: border-box; } table.form-table .hint { color: #94a3b8; font-size: 12px; margin-top: 6px; line-height: 1.6; } /* ── 폼 액션 ── */ .form-actions { display: flex; align-items: center; padding: 18px 24px; border-top: 1px solid #f0f3f7; background: #fafbfd; border-radius: 0 0 12px 12px; } .form-actions .left { flex: 1; text-align: left; } .form-actions .right { text-align: right; } .form-actions .btn { margin: 0 3px; min-width: 92px; height: 38px; line-height: 1; } /* ── 검색 박스 — 한 줄 정렬 ── */ .search-box { padding: 18px 22px; } .search-box .search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; } .search-box .search-row:last-child { margin-bottom: 0; } .search-box label.lbl { display: inline-flex; align-items: center; min-width: 60px; justify-content: flex-end; height: 36px; font-size: 12px; color: #475569; font-weight: 600; padding-right: 8px; flex-shrink: 0; } .search-box .grow { flex: 1 1 auto; min-width: 160px; } .search-box .sep { color: #94a3b8; padding: 0 4px; font-size: 12px; display: inline-flex; align-items: center; height: 36px; } .search-box .form-control { padding: 6px 10px; border: 1px solid #d6dde6; border-radius: 6px; font-size: 13px; background: #fff; color: #1f2937; vertical-align: middle; line-height: 1.3; height: 36px; box-sizing: border-box; width: auto; max-width: none; } .search-box select.form-control { padding: 6px 10px; min-width: 120px; } .search-box input.form-control[type="text"] { min-width: 180px; } .search-box input.form-control[type="date"] { width: 156px; } .search-box .form-control:focus { outline: none; border-color: #1aa28a; box-shadow: 0 0 0 3px rgba(26,162,138,.15); } .search-box .btn { height: 36px; line-height: 1; padding: 0 14px; display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; flex-shrink: 0; min-width: 0; } .search-box .btn .fa { line-height: 1; } /* ── 목록 테이블 ── */ .list-wrap { padding: 0; overflow: hidden; border-radius: 12px; } .list-wrap > .list-toolbar { display: flex; align-items: center; padding: 14px 22px; border-bottom: 1px solid #f0f3f7; background: #fafbfd; } .list-wrap > .list-toolbar .left { flex: 1; font-size: 13px; color: #6b7785; } .list-wrap > .list-toolbar .right { display: flex; gap: 6px; } table.list-table { width: 100%; border-collapse: collapse; background: #fff; } table.list-table thead td, table.list-table thead th { background: #f8fafc; font-weight: 700; color: #1f2937; font-size: 12px; text-align: center; padding: 14px 10px; border-bottom: 1px solid #e5eaf0; } table.list-table tbody td { font-size: 13px; color: #334155; text-align: center; padding: 14px 10px; border-bottom: 1px solid #f0f3f7; vertical-align: middle; } table.list-table tbody tr:hover td { background: #f7fbfa; } table.list-table td.tal { text-align: left; } table.list-table td.tar { text-align: right; } table.list-table .empty { text-align: center; padding: 60px 20px; color: #94a3b8; font-size: 13px; } table.list-table tbody td .btn { margin: 0 1px; } /* ── 버튼 — 텍스트 대비 통일 ── */ #pageContainer .btn, #pageContainer .form-actions .btn, .box .btn, .search-box .btn { color: #fff !important; border: 1px solid transparent; font-weight: 600; letter-spacing: -.2px; border-radius: 6px; transition: background-color .12s, border-color .12s, color .12s; } #pageContainer .btn-primary, .box .btn-primary, .search-box .btn-primary { background-color: #1aa28a; border-color: #138673; color: #fff !important; } #pageContainer .btn-primary:hover, .box .btn-primary:hover, .search-box .btn-primary:hover { background-color: #138673; border-color: #138673; } #pageContainer .btn-info, .box .btn-info, .search-box .btn-info { background-color: #1aa28a; border-color: #138673; color: #fff !important; } #pageContainer .btn-info:hover, .box .btn-info:hover, .search-box .btn-info:hover { background-color: #138673; border-color: #138673; } #pageContainer .btn-success, .box .btn-success { background-color: #2faa54; border-color: #259244; color: #fff !important; } #pageContainer .btn-success:hover, .box .btn-success:hover { background-color: #259244; border-color: #259244; } #pageContainer .btn-danger, .box .btn-danger { background-color: #ef4444; border-color: #dc2626; color: #fff !important; } #pageContainer .btn-danger:hover, .box .btn-danger:hover { background-color: #dc2626; border-color: #dc2626; } #pageContainer .btn-warning, .box .btn-warning { background-color: #f59e0b; border-color: #d97706; color: #fff !important; } #pageContainer .btn-warning:hover, .box .btn-warning:hover { background-color: #d97706; border-color: #d97706; } #pageContainer .btn-default, .box .btn-default, .search-box .btn-default { background-color: #fff !important; border-color: #d6dde6 !important; color: #475569 !important; } #pageContainer .btn-default:hover, .box .btn-default:hover, .search-box .btn-default:hover { background-color: #f1f5f9 !important; border-color: #b9c2cc !important; color: #1f2937 !important; } /* 작은/극소 버튼 */ #pageContainer .btn-sm { padding: 6px 12px; font-size: 12px; height: auto; line-height: 1.3; } #pageContainer .btn-xs { padding: 4px 9px; font-size: 11px; height: auto; line-height: 1.3; } /* ── 페이저 ── */ .pager { margin: 22px 0 4px; text-align: center; } .pager a, .pager .cur, .pager .gap, .pager .nav-btn { display: inline-block; min-width: 34px; padding: 7px 12px; margin: 0 2px; border: 1px solid #e1e5ea; background: #fff; color: #475569; font-size: 12px; text-decoration: none; border-radius: 6px; line-height: 1.2; transition: background-color .12s, color .12s, border-color .12s; } .pager a:hover { background: #f3f9f7; color: #1aa28a; border-color: #1aa28a; text-decoration: none; } .pager .cur { background: #1aa28a; color: #fff; border-color: #138673; font-weight: 700; } .pager .gap { background: transparent; border-color: transparent; color: #cbd5e1; } .pager .nav-btn { color: #475569; } /* ── 상태 라벨 ── */ .status-label { display: inline-block; padding: 3px 9px; font-size: 11px; border-radius: 12px; font-weight: 600; line-height: 1.6; } .status-label.on { background: #e6f7f1; color: #0f9876; border: 1px solid #b6e2cf; } .status-label.off { background: #fdecec; color: #c0392b; border: 1px solid #f5b8b8; } .status-label.expired { background: #eef1f6; color: #6c7a8b; border: 1px solid #d8dde6; } .status-label.draft { background: #fff7e6; color: #b06d00; border: 1px solid #f5dc99; } /* ============================================================================ * 드래그앤드롭 업로드 — 신규 표준 (.upload-dropzone) * 호환: 구버전 .upbox 는 madmin_upload.js 에서 동일하게 처리. * 핵심: 드롭존 자체 클릭은 무동작, "파일 선택" 버튼만 input trigger. * ============================================================================ */ .upload-dropzone, .upbox { width: 100%; } .upload-dropzone .dz_input, .upbox .dz_input { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; } .upload-dropzone .dz_zone, .upbox .dz_zone { display: flex; align-items: center; gap: 18px; padding: 22px 24px; border: 2px dashed #cfd8e0; border-radius: 10px; background: #f9fbfd; color: #6b7785; cursor: default; transition: background-color .15s, border-color .15s, color .15s; user-select: none; } .upload-dropzone.is_dragover .dz_zone, .upbox.is_dragover .dz_zone { background: #ecf7f3; border-color: #1aa28a; color: #138673; box-shadow: inset 0 0 0 1px rgba(26,162,138,.18); } .upload-dropzone .dz_icon, .upbox .dz_icon { font-size: 34px; color: #1aa28a; flex-shrink: 0; line-height: 1; } .upload-dropzone .dz_text, .upbox .dz_text { font-size: 13px; line-height: 1.6; flex: 1; min-width: 0; } .upload-dropzone .dz_main, .upbox .dz_main { color: #1f2937; font-weight: 600; font-size: 14px; margin-bottom: 4px; } .upload-dropzone .dz_hint, .upbox .dz_hint { color: #94a3b8; font-size: 12px; margin-bottom: 10px; } .upload-dropzone .dz_pick, .upbox .dz_pick { display: inline-block; padding: 7px 16px; background: #fff; border: 1px solid #1aa28a; border-radius: 6px; color: #1aa28a; font-size: 12px; font-weight: 600; cursor: pointer; transition: background-color .12s, color .12s; } .upload-dropzone .dz_pick:hover, .upbox .dz_pick:hover { background: #1aa28a; color: #fff; } .upload-dropzone .dz_pick:focus, .upbox .dz_pick:focus { outline: 2px solid #1aa28a; outline-offset: 1px; } /* 선택된 파일 표시 */ .upload-dropzone .dz_files, .upbox .dz_files { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; } .upload-dropzone .dz_files:empty, .upbox .dz_files:empty { display: none; } .upload-dropzone .dz_item, .upbox .dz_item { display: inline-flex; align-items: center; gap: 10px; padding: 8px 10px; background: #fff; border: 1px solid #e1e5ea; border-radius: 8px; font-size: 12px; color: #1f2937; max-width: 100%; } .upload-dropzone .dz_thumb, .upbox .dz_thumb { width: 40px; height: 32px; object-fit: cover; border-radius: 4px; background: #f1f5f9; display: inline-flex; align-items: center; justify-content: center; color: #94a3b8; flex-shrink: 0; } .upload-dropzone .dz_thumb_file .fa, .upbox .dz_thumb_file .fa { font-size: 15px; } .upload-dropzone .dz_fname, .upbox .dz_fname { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } .upload-dropzone .dz_fsize, .upbox .dz_fsize { color: #94a3b8; font-size: 11px; flex-shrink: 0; } .upload-dropzone .dz_remove, .upbox .dz_remove { background: transparent; border: 0; color: #94a3b8; cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: color .12s, background-color .12s; } .upload-dropzone .dz_remove:hover, .upbox .dz_remove:hover { color: #ef4444; background: #fef2f2; } /* 파일 선택된 상태 — 드롭존 컴팩트 */ .upload-dropzone.has_files .dz_zone, .upbox.has_files .dz_zone { padding: 14px 18px; } .upload-dropzone.has_files .dz_icon, .upbox.has_files .dz_icon { font-size: 24px; } .upload-dropzone.has_files .dz_main, .upbox.has_files .dz_main { font-size: 13px; margin-bottom: 0; } .upload-dropzone.has_files .dz_hint, .upbox.has_files .dz_hint { display: none; } /* 기존 첨부 표시 */ .up_existing { margin-bottom: 12px; } .up_existing_item { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border: 1px solid #e1e5ea; border-radius: 8px; font-size: 12px; color: #1f2937; margin-right: 6px; margin-bottom: 6px; } .up_existing_item img { width: 40px; height: 32px; object-fit: cover; border-radius: 4px; } .up_existing_item .fa-paperclip { color: #94a3b8; } .up_existing_item label { display: inline-flex; align-items: center; gap: 4px; color: #ef4444; font-size: 11px; cursor: pointer; font-weight: 600; } .up_existing_item label input { margin: 0; } /* 팝업 form 내부 sub-box */ .form-subbox { background: #f9fbfd; border: 1px solid #e9edf2; border-radius: 8px; padding: 4px 12px; } table.form-subtable { width: 100%; border-collapse: collapse; background: transparent; } table.form-subtable th { width: 90px; padding: 10px 12px; background: transparent; border-bottom: 1px dashed #e5eaf0; font-size: 12px; font-weight: 600; color: #475569; text-align: left; vertical-align: middle; } table.form-subtable td { padding: 10px 12px; background: transparent; border-bottom: 1px dashed #e5eaf0; font-size: 12px; color: #1f2937; } table.form-subtable tr:last-child th, table.form-subtable tr:last-child td { border-bottom: 0; } /* ============================================================================ * v3 — Chameleon Admin 톤 (최종 단일 기준, 위쪽 모든 규칙 override) * * 디자인 토큰: 포인트 #1aa28a · 사이드바 #2a3344 · 본문 #f4f6f9 * 카드 radius 12 · shadow 0 8px 24px rgba(15,23,42,.06) * input 38px · 검색 control 36px · 헤더 56px * 적용: 전부 #pageContainer 또는 #leftMenu 스코프 (프론트 무영향). * ============================================================================ */ #pageContainer { padding-top: 56px; min-height: calc(100vh - 56px); background: #f4f6f9; } #pageContainer .pageWrap { padding: 24px 28px 56px; max-width: 1480px; } /* 페이지 헤딩 */ #pageContainer .pageWrap .page-heading { padding-bottom: 18px; margin-bottom: 6px; } #pageContainer .pageWrap .page-heading h3 { font-size: 22px; color: #1f2937; font-weight: 700; margin: 0 0 6px; letter-spacing: -.3px; line-height: 1.3; } #pageContainer .pageWrap .page-heading .breadcrumb { padding: 0; margin: 0; list-style: none; line-height: 1; } #pageContainer .pageWrap .page-heading .breadcrumb li { font-size: 12px; color: #94a3b8; display: inline-block; } #pageContainer .pageWrap .page-heading .breadcrumb > li + li:before { padding: 0 6px; color: #cbd5e1; content: "/"; } #pageContainer .pageWrap .page-heading .breadcrumb li.active { color: #1aa28a; font-weight: 600; } /* 카드 */ #pageContainer .box, #pageContainer .v3-card { background: #fff; border: 1px solid #e9edf2; border-radius: 12px; box-shadow: 0 8px 24px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); } #pageContainer .box + .box { margin-top: 18px; } #pageContainer .box .panel { padding: 22px 26px; } #pageContainer .box .v3-card-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 22px; border-bottom: 1px solid #f0f3f7; } #pageContainer .box .v3-card-head h4 { margin: 0; font-size: 15px; font-weight: 700; color: #1f2937; } #pageContainer .box .v3-card-head .head-actions a { color: #1aa28a; font-size: 12px; text-decoration: none; font-weight: 600; } #pageContainer .box .v3-card-head .head-actions a:hover { color: #0e8d77; text-decoration: underline; } /* 통계 카드 */ #pageContainer .stat_card { display: grid; gap: 16px; margin-bottom: 18px; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } #pageContainer .stat_card .card { background: #fff; border: 1px solid #e9edf2; border-radius: 12px; padding: 20px 22px; box-shadow: 0 8px 24px rgba(15,23,42,.06), 0 1px 2px rgba(15,23,42,.04); min-width: 0; box-sizing: border-box; overflow: hidden; transition: box-shadow .15s, transform .15s; } #pageContainer .stat_card .card:hover { box-shadow: 0 12px 32px rgba(15,23,42,.08), 0 1px 2px rgba(15,23,42,.04); transform: translateY(-1px); } #pageContainer .stat_card .card .label { font-size: 12px; color: #6b7785; margin-bottom: 8px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; } #pageContainer .stat_card .card .label .fa { color: #1aa28a; font-size: 14px; } #pageContainer .stat_card .card .value { font-size: 28px; font-weight: 700; color: #1f2937; letter-spacing: -.4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.2; } #pageContainer .stat_card .card .sub { font-size: 12px; color: #94a3b8; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } #pageContainer .stat_card .card .value.muted { color: #cbd5e1; font-size: 16px; } /* 대시보드 3단 */ #pageContainer .dash_recent { display: grid; gap: 18px; margin-top: 2px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } #pageContainer .dash_recent .dash_col { min-width: 0; } #pageContainer .dash_recent .dash_col .box { margin: 0; height: 100%; box-sizing: border-box; overflow: hidden; } #pageContainer .dash_recent .panel { padding: 20px 22px; } #pageContainer .dash_recent .panel .title { font-size: 14px; font-weight: 700; color: #1f2937; border-bottom: 1px solid #f0f3f7; padding-bottom: 12px; margin-bottom: 4px; } #pageContainer .dash_recent .panel .title .fa { color: #1aa28a; margin-right: 6px; font-size: 14px; } #pageContainer .dash_recent .panel .title a { color: #1aa28a; font-weight: 600; text-decoration: none; font-size: 12px; } #pageContainer .dash_recent .panel .title a:hover { color: #0e8d77; } #pageContainer .dash_recent .panel .list-table thead td, #pageContainer .dash_recent .panel .list-table thead th { height: 36px; padding: 8px 6px; font-size: 11px; background: #fafbfd; color: #6b7785; } #pageContainer .dash_recent .panel .list-table tbody td { height: auto; padding: 10px 6px; font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 0; } #pageContainer .dash_recent .panel .list-table tbody td.tal { max-width: none; white-space: normal; } #pageContainer .dash_recent .panel .list-table tbody td a { color: #1f2937; text-decoration: none; font-weight: 500; } #pageContainer .dash_recent .panel .list-table tbody td a:hover { color: #1aa28a; } /* form-table */ #pageContainer table.form-table { width: 100%; border-collapse: collapse; background: #fff; } #pageContainer table.form-table tr:first-child th, #pageContainer table.form-table tr:first-child td { border-top: 0; } #pageContainer table.form-table tr:last-child th, #pageContainer table.form-table tr:last-child td { border-bottom: 0; } #pageContainer table.form-table th { width: 168px; padding: 16px 22px; border-bottom: 1px solid #f0f3f7; background: #fafbfd; font-size: 13px; font-weight: 600; color: #475569; text-align: left; vertical-align: middle; line-height: 1.5; } #pageContainer table.form-table td { padding: 16px 22px; border-bottom: 1px solid #f0f3f7; font-size: 13px; color: #1f2937; vertical-align: middle; line-height: 1.6; } #pageContainer table.form-table input[type=text], #pageContainer table.form-table input[type=password], #pageContainer table.form-table input[type=email], #pageContainer table.form-table input[type=url], #pageContainer table.form-table input[type=date], #pageContainer table.form-table input[type=datetime-local], #pageContainer table.form-table input[type=number], #pageContainer table.form-table input[type=search], #pageContainer table.form-table input[type=tel], #pageContainer table.form-table select, #pageContainer table.form-table textarea { border: 1px solid #dfe5ec; border-radius: 6px; padding: 8px 12px; font-size: 13px; background: #fff; color: #1f2937; box-sizing: border-box; height: 38px; line-height: 1.4; transition: border-color .12s, box-shadow .12s; } #pageContainer table.form-table textarea { width: 100%; min-height: 180px; height: auto; resize: vertical; line-height: 1.6; } #pageContainer table.form-table input:focus, #pageContainer table.form-table select:focus, #pageContainer table.form-table textarea:focus { outline: none; border-color: #1aa28a; box-shadow: 0 0 0 3px rgba(26,162,138,.15); } #pageContainer table.form-table .input-full { width: 100%; max-width: 640px; box-sizing: border-box; } #pageContainer table.form-table .hint { color: #94a3b8; font-size: 12px; margin-top: 6px; line-height: 1.6; } /* form-actions */ #pageContainer .form-actions { display: flex; align-items: center; padding: 18px 26px; border-top: 1px solid #f0f3f7; background: #fafbfd; border-radius: 0 0 12px 12px; } #pageContainer .form-actions .left { flex: 1; text-align: left; } #pageContainer .form-actions .right { text-align: right; display: flex; gap: 6px; justify-content: flex-end; } #pageContainer .form-actions .btn { margin: 0; min-width: 92px; height: 38px; line-height: 1; padding: 0 16px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } /* 검색 박스 */ #pageContainer .search-box { padding: 20px 24px; } #pageContainer .search-box .search-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 8px; } #pageContainer .search-box .search-row:last-child { margin-bottom: 0; } #pageContainer .search-box label.lbl { display: inline-flex; align-items: center; min-width: 60px; justify-content: flex-end; height: 36px; font-size: 12px; color: #475569; font-weight: 600; padding-right: 8px; flex-shrink: 0; } #pageContainer .search-box .grow { flex: 1 1 auto; min-width: 160px; } #pageContainer .search-box .sep { color: #94a3b8; padding: 0 4px; font-size: 12px; display: inline-flex; align-items: center; height: 36px; } #pageContainer .search-box .form-control { padding: 6px 10px; border: 1px solid #dfe5ec; border-radius: 6px; font-size: 13px; background: #fff; color: #1f2937; vertical-align: middle; line-height: 1.3; height: 36px; box-sizing: border-box; width: auto; max-width: none; } #pageContainer .search-box select.form-control { padding: 6px 10px; min-width: 120px; } #pageContainer .search-box input.form-control[type="text"] { min-width: 180px; } #pageContainer .search-box input.form-control[type="date"] { width: 156px; } #pageContainer .search-box .form-control:focus { outline: none; border-color: #1aa28a; box-shadow: 0 0 0 3px rgba(26,162,138,.15); } #pageContainer .search-box .btn { height: 36px; line-height: 1; padding: 0 14px; display: inline-flex; align-items: center; gap: 4px; box-sizing: border-box; flex-shrink: 0; min-width: 0; } /* 목록 테이블 */ #pageContainer .list-wrap { padding: 0; overflow: hidden; border-radius: 12px; } #pageContainer .list-wrap > .list-toolbar { display: flex; align-items: center; padding: 16px 24px; border-bottom: 1px solid #f0f3f7; background: #fafbfd; } #pageContainer .list-wrap > .list-toolbar .left { flex: 1; font-size: 13px; color: #475569; } #pageContainer .list-wrap > .list-toolbar .right { display: flex; gap: 6px; } #pageContainer table.list-table { width: 100%; border-collapse: collapse; background: #fff; } #pageContainer table.list-table thead td, #pageContainer table.list-table thead th { background: #f8fafc; font-weight: 700; color: #475569; font-size: 12px; text-align: center; padding: 14px 10px; border-bottom: 1px solid #e5eaf0; } #pageContainer table.list-table tbody td { font-size: 13px; color: #334155; text-align: center; padding: 14px 10px; border-bottom: 1px solid #f0f3f7; vertical-align: middle; } #pageContainer table.list-table tbody tr:hover td { background: #f7fbfa; } #pageContainer table.list-table td.tal { text-align: left; } #pageContainer table.list-table td.tar { text-align: right; } #pageContainer table.list-table .empty { text-align: center; padding: 64px 20px; color: #94a3b8; font-size: 13px; } #pageContainer table.list-table tbody td .btn { margin: 0 1px; } /* 버튼 — 최종 통일 (Chameleon 톤, !important로 명세도 확보) */ #pageContainer .btn, .box .btn, .search-box .btn, .list-wrap .btn { color: #fff !important; border: 1px solid transparent !important; font-weight: 600; letter-spacing: -.2px; border-radius: 6px; transition: background-color .12s, border-color .12s, color .12s, box-shadow .12s; cursor: pointer; text-decoration: none !important; display: inline-flex; align-items: center; justify-content: center; gap: 4px; } #pageContainer .btn-primary, .box .btn-primary, .search-box .btn-primary { background-color: #1aa28a !important; border-color: #138673 !important; color: #fff !important; } #pageContainer .btn-primary:hover, .box .btn-primary:hover, .search-box .btn-primary:hover { background-color: #0e8d77 !important; border-color: #0e8d77 !important; } #pageContainer .btn-info, .box .btn-info, .search-box .btn-info { background-color: #1aa28a !important; border-color: #138673 !important; color: #fff !important; } #pageContainer .btn-info:hover, .box .btn-info:hover, .search-box .btn-info:hover { background-color: #0e8d77 !important; border-color: #0e8d77 !important; } #pageContainer .btn-success, .box .btn-success { background-color: #28c76f !important; border-color: #23b362 !important; color: #fff !important; } #pageContainer .btn-success:hover, .box .btn-success:hover { background-color: #23b362 !important; border-color: #23b362 !important; } #pageContainer .btn-danger, .box .btn-danger { background-color: #ea5455 !important; border-color: #d94142 !important; color: #fff !important; } #pageContainer .btn-danger:hover, .box .btn-danger:hover { background-color: #d94142 !important; border-color: #d94142 !important; } #pageContainer .btn-warning, .box .btn-warning { background-color: #ff9f43 !important; border-color: #f08919 !important; color: #fff !important; } #pageContainer .btn-warning:hover, .box .btn-warning:hover { background-color: #f08919 !important; border-color: #f08919 !important; } #pageContainer .btn-default, .box .btn-default, .search-box .btn-default { background-color: #fff !important; border-color: #dfe5ec !important; color: #475569 !important; } #pageContainer .btn-default:hover, .box .btn-default:hover, .search-box .btn-default:hover { background-color: #f1f5f9 !important; border-color: #cbd5e1 !important; color: #1f2937 !important; } #pageContainer .btn-sm { padding: 7px 14px; font-size: 12px; height: auto; line-height: 1.3; } #pageContainer .btn-xs { padding: 5px 10px; font-size: 11px; height: auto; line-height: 1.3; } /* 페이저 */ #pageContainer .pager { margin: 24px 0 4px; text-align: center; } #pageContainer .pager a, #pageContainer .pager .cur, #pageContainer .pager .gap, #pageContainer .pager .nav-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 34px; padding: 0 12px; margin: 0 2px; border: 1px solid #e1e5ea; background: #fff; color: #475569; font-size: 12px; text-decoration: none; border-radius: 6px; transition: background-color .12s, color .12s, border-color .12s; } #pageContainer .pager a:hover { background: #f3f9f7; color: #1aa28a; border-color: #1aa28a; } #pageContainer .pager .cur { background: #1aa28a; color: #fff; border-color: #138673; font-weight: 700; } #pageContainer .pager .gap { background: transparent; border-color: transparent; color: #cbd5e1; } #pageContainer .pager .nav-btn { color: #475569; } /* 상태 라벨 */ #pageContainer .status-label { display: inline-block; padding: 3px 10px; font-size: 11px; border-radius: 12px; font-weight: 600; line-height: 1.6; } #pageContainer .status-label.on { background: rgba(40,199,111,.12); color: #28c76f; border: 1px solid rgba(40,199,111,.3); } #pageContainer .status-label.off { background: rgba(234,84,85,.12); color: #ea5455; border: 1px solid rgba(234,84,85,.3); } #pageContainer .status-label.expired { background: rgba(108,122,139,.12); color: #6c7a8b; border: 1px solid rgba(108,122,139,.3); } #pageContainer .status-label.draft { background: rgba(255,159,67,.12); color: #ff9f43; border: 1px solid rgba(255,159,67,.3); } /* 사이드바 메뉴 — Chameleon 톤 */ #leftMenu { background-color: #2a3344 !important; width: 240px; } #leftMenu .logo { height: 56px; padding: 0 14px; border-bottom: 1px solid #e6e6e6; } #leftMenu .lnb .lnb-div.userInfo { height: 48px; line-height: 48px; border-bottom: 1px solid #1c2330; } #leftMenu .lnb .lnb-menu { height: 44px; transition: background-color .15s; } #leftMenu .lnb .lnb-menu .left { font-size: 13px; } #leftMenu .lnb .lnb-menu .left span { color: #d3dae3; } #leftMenu .lnb .lnb-menu.sel, #leftMenu .lnb .lnb-menu.on { background-color: #232b3a; } #leftMenu .lnb .lnb-menu:hover .left span, #leftMenu .lnb .lnb-menu.sel .left span, #leftMenu .lnb .lnb-menu.on .left span, #leftMenu .lnb .lnb-menu:hover .left i, #leftMenu .lnb .lnb-menu.sel .left i, #leftMenu .lnb .lnb-menu.on .left i { color: #1aa28a; } #leftMenu .lnb .lnb-submenu { background-color: #232b3a; } #leftMenu .lnb .lnb-submenu .lnb-submenu-item { line-height: 38px; padding-left: 52px; font-size: 12.5px; color: #b8c2cc; border-top: 1px solid #1c2330; transition: background-color .15s, color .15s; } #leftMenu .lnb .lnb-submenu .lnb-submenu-item:hover { background-color: #1c2330; color: #1aa28a; } #leftMenu .lnb .lnb-submenu .lnb-submenu-item.on, #leftMenu .lnb .lnb-submenu .lnb-submenu-item.sel { background-color: #1c2330; color: #1aa28a; font-weight: 600; } /* 상단 GNB */ #rightCont { margin-left: 240px; } #rightCont .gnb { position: fixed; left: 240px; top: 0; right: 0; height: 56px; background: #fff; border-bottom: 1px solid #e6e6e6; border-left: 0; z-index: 999; display: flex; align-items: stretch; } #rightCont .gnb .gnb-spacer { flex: 1; } #rightCont .gnb .gnb-menu { height: 56px; padding: 0 18px; display: flex; align-items: center; gap: 6px; border-left: 1px solid #eef0f3; font-size: 13px; color: #475569; cursor: pointer; transition: background-color .12s, color .12s; } #rightCont .gnb .gnb-menu:hover { background: #fafbfd; color: #1aa28a; } #rightCont .gnb .gnb-menu a { color: inherit; text-decoration: none; display: flex; align-items: center; gap: 6px; height: 100%; } #rightCont .gnb .gnb-menu .fa { color: #94a3b8; } #rightCont .gnb .gnb-menu:hover .fa { color: #1aa28a; } #rightCont .gnb .gnb-menu .fa.fa-caret-down { font-size: 11px; } #rightCont .gnb .gnb-menu .gnb-menu-list { display: none; position: absolute; top: 56px; right: 0; min-width: 200px; background: #fff; border: 1px solid #e9edf2; border-top: 0; box-shadow: 0 8px 24px rgba(15,23,42,.1); z-index: 1000; border-radius: 0 0 8px 8px; overflow: hidden; } #rightCont .gnb .gnb-menu .gnb-menu-list .gnb-menu-item { padding: 12px 18px; line-height: 1.4; border-top: 1px solid #f3f5f9; cursor: pointer; color: #475569; font-size: 13px; display: flex; align-items: center; gap: 8px; } #rightCont .gnb .gnb-menu .gnb-menu-list .gnb-menu-item:first-child { border-top: 0; } #rightCont .gnb .gnb-menu .gnb-menu-list .gnb-menu-item:hover { background: #f6f8fa; color: #1aa28a; } #rightCont .gnb .gnb-menu .gnb-menu-list .gnb-menu-item .square { color: #1aa28a; font-size: 8px; } /* 드롭존 — Chameleon 톤 */ #pageContainer .upload-dropzone, #pageContainer .upbox { width: 100%; max-width: 720px; } #pageContainer .upload-dropzone .dz_zone, #pageContainer .upbox .dz_zone { display: flex; align-items: center; gap: 20px; padding: 24px 26px; border: 2px dashed #cbd5e1; border-radius: 10px; background: #fafbfd; color: #6b7785; cursor: default; transition: background-color .15s, border-color .15s, color .15s; user-select: none; } #pageContainer .upload-dropzone.is_dragover .dz_zone, #pageContainer .upbox.is_dragover .dz_zone { background: #ecf7f3; border-color: #1aa28a; color: #0e8d77; box-shadow: inset 0 0 0 1px rgba(26,162,138,.18); } #pageContainer .upload-dropzone .dz_icon, #pageContainer .upbox .dz_icon { font-size: 36px; color: #1aa28a; flex-shrink: 0; line-height: 1; } #pageContainer .upload-dropzone .dz_main, #pageContainer .upbox .dz_main { color: #1f2937; font-weight: 600; font-size: 13px; margin-bottom: 4px; } #pageContainer .upload-dropzone .dz_hint, #pageContainer .upbox .dz_hint { color: #94a3b8; font-size: 12px; margin-bottom: 10px; } #pageContainer .upload-dropzone .dz_pick, #pageContainer .upbox .dz_pick { display: inline-block; padding: 8px 18px; background: #fff; border: 1px solid #1aa28a; border-radius: 6px; color: #1aa28a; font-size: 12px; font-weight: 600; cursor: pointer; transition: background-color .12s, color .12s; } #pageContainer .upload-dropzone .dz_pick:hover, #pageContainer .upbox .dz_pick:hover { background: #1aa28a; color: #fff; } #pageContainer .upload-dropzone .dz_pick:focus, #pageContainer .upbox .dz_pick:focus { outline: 2px solid #1aa28a; outline-offset: 1px; } #pageContainer .upload-dropzone .dz_files, #pageContainer .upbox .dz_files { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; } #pageContainer .upload-dropzone .dz_files:empty, #pageContainer .upbox .dz_files:empty { display: none; } #pageContainer .upload-dropzone .dz_item, #pageContainer .upbox .dz_item { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border: 1px solid #e1e5ea; border-radius: 8px; font-size: 12px; color: #1f2937; max-width: 100%; } #pageContainer .upload-dropzone .dz_thumb, #pageContainer .upbox .dz_thumb { width: 40px; height: 32px; object-fit: cover; border-radius: 4px; background: #f1f5f9; display: inline-flex; align-items: center; justify-content: center; color: #94a3b8; flex-shrink: 0; } #pageContainer .upload-dropzone .dz_thumb_file .fa, #pageContainer .upbox .dz_thumb_file .fa { font-size: 15px; } #pageContainer .upload-dropzone .dz_fname, #pageContainer .upbox .dz_fname { max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; } #pageContainer .upload-dropzone .dz_fsize, #pageContainer .upbox .dz_fsize { color: #94a3b8; font-size: 11px; flex-shrink: 0; } #pageContainer .upload-dropzone .dz_remove, #pageContainer .upbox .dz_remove { background: transparent; border: 0; color: #94a3b8; cursor: pointer; padding: 2px 6px; border-radius: 4px; transition: color .12s, background-color .12s; } #pageContainer .upload-dropzone .dz_remove:hover, #pageContainer .upbox .dz_remove:hover { color: #ea5455; background: #fef2f2; } #pageContainer .upload-dropzone.has_files .dz_zone, #pageContainer .upbox.has_files .dz_zone { padding: 14px 20px; } #pageContainer .upload-dropzone.has_files .dz_icon, #pageContainer .upbox.has_files .dz_icon { font-size: 26px; } #pageContainer .upload-dropzone.has_files .dz_main, #pageContainer .upbox.has_files .dz_main { font-size: 13px; margin-bottom: 0; } #pageContainer .upload-dropzone.has_files .dz_hint, #pageContainer .upbox.has_files .dz_hint { display: none; } /* 기존 첨부 */ #pageContainer .up_existing { margin-bottom: 14px; } #pageContainer .up_existing_item { display: inline-flex; align-items: center; gap: 10px; padding: 8px 12px; background: #fff; border: 1px solid #e1e5ea; border-radius: 8px; font-size: 12px; color: #1f2937; margin-right: 6px; margin-bottom: 6px; } #pageContainer .up_existing_item img { width: 40px; height: 32px; object-fit: cover; border-radius: 4px; } #pageContainer .up_existing_item .fa-paperclip { color: #94a3b8; } #pageContainer .up_existing_item label { display: inline-flex; align-items: center; gap: 4px; color: #ea5455; font-size: 11px; cursor: pointer; font-weight: 600; } #pageContainer .up_existing_item label input { margin: 0; } /* 팝업 sub-box */ #pageContainer .form-subbox { background: #fafbfd; border: 1px solid #e9edf2; border-radius: 8px; padding: 6px 14px; } #pageContainer table.form-subtable { width: 100%; border-collapse: collapse; background: transparent; } #pageContainer table.form-subtable th { width: 90px; padding: 10px 12px; background: transparent; border-bottom: 1px dashed #e5eaf0; font-size: 12px; font-weight: 600; color: #475569; text-align: left; vertical-align: middle; } #pageContainer table.form-subtable td { padding: 10px 12px; background: transparent; border-bottom: 1px dashed #e5eaf0; font-size: 12px; color: #1f2937; } #pageContainer table.form-subtable tr:last-child th, #pageContainer table.form-subtable tr:last-child td { border-bottom: 0; } /* 통계 차트 */ #pageContainer .stats_chart_wrap { padding: 20px 24px 22px; } #pageContainer .stats_chart_wrap .stats_chart_head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding-bottom: 12px; border-bottom: 1px solid #f0f3f7; flex-wrap: wrap; gap: 8px; } #pageContainer .stats_chart_wrap .stats_chart_head h4 { margin: 0; font-size: 14px; font-weight: 700; color: #1f2937; letter-spacing: -.2px; } #pageContainer .stats_chart_wrap .stats_chart_head h4 .fa { color: #1aa28a; margin-right: 6px; } #pageContainer .stats_chart_wrap .stats_chart_legend { font-size: 12px; color: #6b7785; display: inline-flex; gap: 18px; } #pageContainer .stats_chart_wrap .stats_chart_legend span { display: inline-flex; align-items: center; gap: 7px; } #pageContainer .stats_chart_wrap .stats_chart_legend i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; } #pageContainer .stats_chart_wrap .stats_chart_canvas { position: relative; height: 260px; width: 100%; padding: 8px 0 0; } #pageContainer .stats_chart_wrap .stats_chart_canvas canvas { max-height: 100% !important; } /* ============================================================================ * Madmin UI Theme v4 — Chameleon Admin 톤 * * 적용 방식: 스코프 — 위쪽 모든 누적 규칙 * 위에서 최우선 적용. 기존 클래스명은 그대로 사용하되 시각만 재정의. * * 컬러 가이드: * --primary #7367F0 (보라, 메인 액션/링크/카드) * --info #00CFE8 (시안, 보조) * --success #28C76F * --danger #EA5455 * --warning #FF9F43 * --pink #FF5B8A * --bg #F8F8FB * --ink #2C2C54 * --muted #8A92A6 * * 그라데이션: * --grad-primary linear-gradient(118deg, #7367F0, #9E95F5) * --grad-info linear-gradient(118deg, #00CFE8, #1CE7E7) * --grad-success linear-gradient(118deg, #28C76F, #48DA89) * --grad-danger linear-gradient(118deg, #EA5455, #F08182) * --grad-warning linear-gradient(118deg, #FF9F43, #FFC085) * --grad-pink linear-gradient(118deg, #FF5B8A, #FF8FAA) * ============================================================================ */ body.theme-chameleon { background: #f8f8fb; color: #2c2c54; font-family: 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', 'NanumBarunGothic', sans-serif; } /* ── 좌측 사이드바 — 라이트 화이트 톤 ── * Chameleon 라이트 메뉴: #fff 배경 + 좌측 컬러 라인 active */ body.theme-chameleon #leftMenu { background: #fff !important; width: 240px; box-shadow: 0 0 18px 0 rgba(34,41,47,.05); border-right: 1px solid #ebeaf2; } body.theme-chameleon #leftMenu .logo { height: 64px !important; background: #fff !important; border-bottom: 1px solid #ebeaf2 !important; padding: 0 16px; } body.theme-chameleon #leftMenu .logo img { max-height: 34px; } /* userInfo */ body.theme-chameleon #leftMenu .lnb .lnb-div.userInfo { height: 56px !important; line-height: 56px !important; background: linear-gradient(118deg, #7367F0, #9E95F5); border-bottom: 0 !important; } body.theme-chameleon #leftMenu .lnb .lnb-div.userInfo .left { color: #fff !important; font-weight: 600; font-size: 13px; } body.theme-chameleon #leftMenu .lnb .lnb-div.userInfo .left span { color: rgba(255,255,255,.85) !important; } body.theme-chameleon #leftMenu .lnb .lnb-div.userInfo .right a { color: #fff !important; } /* 메인 메뉴 */ body.theme-chameleon #leftMenu .lnb .lnb-menu { height: 46px !important; margin: 4px 12px; border-radius: 6px; transition: background-color .15s, color .15s; } body.theme-chameleon #leftMenu .lnb .lnb-menu .left { color: #5e5873 !important; font-size: 13px; font-weight: 500; padding-left: 4px; } body.theme-chameleon #leftMenu .lnb .lnb-menu .left i { width: 22px; text-align: center; color: #5e5873 !important; font-size: 14px; transition: color .15s; } body.theme-chameleon #leftMenu .lnb .lnb-menu .left span { color: #5e5873 !important; } body.theme-chameleon #leftMenu .lnb .lnb-menu .right i { color: #b9b3ce !important; font-size: 10px; } body.theme-chameleon #leftMenu .lnb .lnb-menu:hover { background: rgba(115,103,240,.08) !important; } body.theme-chameleon #leftMenu .lnb .lnb-menu:hover .left i, body.theme-chameleon #leftMenu .lnb .lnb-menu:hover .left span { color: #7367f0 !important; } /* 활성 메뉴 — 그라데이션 강조 */ body.theme-chameleon #leftMenu .lnb .lnb-menu.on, body.theme-chameleon #leftMenu .lnb .lnb-menu.sel { background: linear-gradient(118deg, #7367F0, #9E95F5) !important; box-shadow: 0 0 10px 1px rgba(115,103,240,.7); } body.theme-chameleon #leftMenu .lnb .lnb-menu.on .left i, body.theme-chameleon #leftMenu .lnb .lnb-menu.on .left span, body.theme-chameleon #leftMenu .lnb .lnb-menu.sel .left i, body.theme-chameleon #leftMenu .lnb .lnb-menu.sel .left span, body.theme-chameleon #leftMenu .lnb .lnb-menu.on .right i, body.theme-chameleon #leftMenu .lnb .lnb-menu.sel .right i { color: #fff !important; } /* 서브 메뉴 */ body.theme-chameleon #leftMenu .lnb .lnb-submenu { background: #fafafc !important; margin: 0 12px 6px; border-radius: 0 0 6px 6px; } body.theme-chameleon #leftMenu .lnb .lnb-submenu .lnb-submenu-item { color: #6e6b7b !important; font-size: 12.5px; font-weight: 500; line-height: 38px; padding-left: 44px; border-top: 0 !important; position: relative; transition: color .15s, background-color .15s; } body.theme-chameleon #leftMenu .lnb .lnb-submenu .lnb-submenu-item:before { content: ""; position: absolute; left: 24px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: #d6d3e3; transform: translateY(-50%); transition: background-color .15s, transform .15s; } body.theme-chameleon #leftMenu .lnb .lnb-submenu .lnb-submenu-item:hover { color: #7367f0 !important; background: transparent !important; } body.theme-chameleon #leftMenu .lnb .lnb-submenu .lnb-submenu-item:hover:before { background: #7367f0; } body.theme-chameleon #leftMenu .lnb .lnb-submenu .lnb-submenu-item.on, body.theme-chameleon #leftMenu .lnb .lnb-submenu .lnb-submenu-item.sel { color: #7367f0 !important; background: transparent !important; font-weight: 600; } body.theme-chameleon #leftMenu .lnb .lnb-submenu .lnb-submenu-item.on:before, body.theme-chameleon #leftMenu .lnb .lnb-submenu .lnb-submenu-item.sel:before { background: #7367f0; transform: translateY(-50%) scale(1.4); box-shadow: 0 0 0 3px rgba(115,103,240,.2); } /* ── 상단 헤더 ── */ body.theme-chameleon #rightCont { margin-left: 240px; } body.theme-chameleon #rightCont .gnb { position: fixed; left: 240px; top: 0; right: 0; height: 64px !important; background: #fff; border-bottom: 0; box-shadow: 0 4px 24px 0 rgba(34,41,47,.06); z-index: 999; display: flex; align-items: stretch; } body.theme-chameleon #rightCont .gnb:before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: linear-gradient(118deg, #7367F0, #00CFE8); } body.theme-chameleon #rightCont .gnb .gnb-menu { height: 64px !important; padding: 0 20px; font-size: 13px; color: #5e5873 !important; border-left: 0 !important; display: flex; align-items: center; gap: 8px; transition: color .15s, background-color .15s; } body.theme-chameleon #rightCont .gnb .gnb-menu .fa { color: #6e6b7b !important; } body.theme-chameleon #rightCont .gnb .gnb-menu:hover { background: #f6f5fb !important; color: #7367f0 !important; } body.theme-chameleon #rightCont .gnb .gnb-menu:hover .fa { color: #7367f0 !important; } body.theme-chameleon #rightCont .gnb .gnb-menu .gnb-menu-list { border: 0; border-radius: 8px; box-shadow: 0 5px 25px rgba(34,41,47,.1); margin-top: 4px; } body.theme-chameleon #rightCont .gnb .gnb-menu .gnb-menu-list .gnb-menu-item .square { color: #7367f0 !important; } /* ── 본문 ── */ body.theme-chameleon #pageContainer { background: #f8f8fb; padding-top: 64px; min-height: calc(100vh - 64px); } body.theme-chameleon #pageContainer .pageWrap { padding: 22px 28px 56px; max-width: 1480px; } /* 페이지 헤딩 */ body.theme-chameleon #pageContainer .page-heading { padding-bottom: 18px; margin-bottom: 4px; } body.theme-chameleon #pageContainer .page-heading h3 { font-size: 22px; font-weight: 700; color: #2c2c54; letter-spacing: -.3px; margin: 0 0 6px; } body.theme-chameleon #pageContainer .page-heading .breadcrumb li { color: #8a92a6; font-size: 12px; } body.theme-chameleon #pageContainer .page-heading .breadcrumb li.active { color: #7367f0 !important; font-weight: 600; } /* ── 카드 ── */ body.theme-chameleon #pageContainer .box { background: #fff !important; border: 0 !important; border-radius: 10px !important; box-shadow: 0 4px 24px 0 rgba(34,41,47,.08) !important; } body.theme-chameleon #pageContainer .box + .box { margin-top: 20px; } body.theme-chameleon #pageContainer .box .panel { padding: 24px 26px; } /* ── 통계 카드 (컬러 포인트) ── */ body.theme-chameleon #pageContainer .stat_card { display: grid; gap: 18px; margin-bottom: 22px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } body.theme-chameleon #pageContainer .stat_card .card { background: #fff; border: 0; border-radius: 10px; padding: 22px 24px; box-shadow: 0 4px 24px 0 rgba(34,41,47,.08); min-width: 0; overflow: hidden; position: relative; transition: transform .2s, box-shadow .2s; } body.theme-chameleon #pageContainer .stat_card .card:hover { transform: translateY(-2px); box-shadow: 0 8px 30px 0 rgba(34,41,47,.12); } body.theme-chameleon #pageContainer .stat_card .card .label { font-size: 12px; color: #8a92a6; margin-bottom: 10px; font-weight: 600; display: flex; align-items: center; gap: 0; } body.theme-chameleon #pageContainer .stat_card .card .label .fa { width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: #fff !important; background: linear-gradient(118deg, #7367F0, #9E95F5); margin-right: 12px; box-shadow: 0 4px 12px rgba(115,103,240,.4); } body.theme-chameleon #pageContainer .stat_card .card .value { font-size: 28px; font-weight: 700; color: #2c2c54; letter-spacing: -.4px; line-height: 1.1; margin-top: 4px; } body.theme-chameleon #pageContainer .stat_card .card .sub { font-size: 12px; color: #8a92a6; margin-top: 8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* 카드별 포인트 컬러 (index.php에서 .card.color-XXX 부여) */ body.theme-chameleon #pageContainer .stat_card .card.color-primary .label .fa { background: linear-gradient(118deg, #7367F0, #9E95F5); box-shadow: 0 4px 12px rgba(115,103,240,.4); } body.theme-chameleon #pageContainer .stat_card .card.color-info .label .fa { background: linear-gradient(118deg, #00CFE8, #1CE7E7); box-shadow: 0 4px 12px rgba(0,207,232,.4); } body.theme-chameleon #pageContainer .stat_card .card.color-success .label .fa { background: linear-gradient(118deg, #28C76F, #48DA89); box-shadow: 0 4px 12px rgba(40,199,111,.4); } body.theme-chameleon #pageContainer .stat_card .card.color-warning .label .fa { background: linear-gradient(118deg, #FF9F43, #FFC085); box-shadow: 0 4px 12px rgba(255,159,67,.4); } body.theme-chameleon #pageContainer .stat_card .card.color-pink .label .fa { background: linear-gradient(118deg, #FF5B8A, #FF8FAA); box-shadow: 0 4px 12px rgba(255,91,138,.4); } /* ── 대시보드 3단 ── */ body.theme-chameleon #pageContainer .dash_recent { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } body.theme-chameleon #pageContainer .dash_recent .panel { padding: 22px 24px; } body.theme-chameleon #pageContainer .dash_recent .panel .title { font-size: 15px; font-weight: 700; color: #2c2c54; border-bottom: 1px solid #ebe9f1; padding-bottom: 14px; margin-bottom: 6px; } body.theme-chameleon #pageContainer .dash_recent .panel .title .fa, body.theme-chameleon #pageContainer .dash_recent .panel .title a { color: #7367f0 !important; } body.theme-chameleon #pageContainer .dash_recent .panel .list-table thead td, body.theme-chameleon #pageContainer .dash_recent .panel .list-table thead th { background: #f8f8fb !important; color: #8a92a6 !important; font-size: 11px; text-transform: uppercase; letter-spacing: .5px; font-weight: 600; } body.theme-chameleon #pageContainer .dash_recent .panel .list-table tbody td a { color: #2c2c54; font-weight: 500; } body.theme-chameleon #pageContainer .dash_recent .panel .list-table tbody td a:hover { color: #7367f0; } /* ── form-table ── */ body.theme-chameleon #pageContainer table.form-table th { background: #f8f8fb !important; color: #5e5873 !important; padding: 16px 22px; font-size: 13px; font-weight: 600; border-bottom: 1px solid #ebe9f1 !important; } body.theme-chameleon #pageContainer table.form-table td { padding: 16px 22px; color: #2c2c54; border-bottom: 1px solid #ebe9f1 !important; } body.theme-chameleon #pageContainer table.form-table input[type=text], body.theme-chameleon #pageContainer table.form-table input[type=password], body.theme-chameleon #pageContainer table.form-table input[type=email], body.theme-chameleon #pageContainer table.form-table input[type=url], body.theme-chameleon #pageContainer table.form-table input[type=date], body.theme-chameleon #pageContainer table.form-table input[type=datetime-local], body.theme-chameleon #pageContainer table.form-table input[type=number], body.theme-chameleon #pageContainer table.form-table input[type=search], body.theme-chameleon #pageContainer table.form-table select, body.theme-chameleon #pageContainer table.form-table textarea { border: 1px solid #d8d6de !important; border-radius: 6px !important; height: 38px; padding: 8px 14px; font-size: 13px; color: #2c2c54; background: #fff !important; transition: border-color .15s, box-shadow .15s; } body.theme-chameleon #pageContainer table.form-table textarea { height: auto; min-height: 200px; } body.theme-chameleon #pageContainer table.form-table input:focus, body.theme-chameleon #pageContainer table.form-table select:focus, body.theme-chameleon #pageContainer table.form-table textarea:focus { border-color: #7367f0 !important; box-shadow: 0 3px 10px 0 rgba(115,103,240,.15) !important; outline: 0 !important; } body.theme-chameleon #pageContainer table.form-table .hint { color: #8a92a6; font-size: 12px; } /* form-actions */ body.theme-chameleon #pageContainer .form-actions { background: #f8f8fb !important; border-top: 1px solid #ebe9f1 !important; border-radius: 0 0 10px 10px !important; padding: 20px 26px; } body.theme-chameleon #pageContainer .form-actions .btn { height: 40px; min-width: 100px; padding: 0 18px; } /* ── 버튼 — Chameleon Pill 톤 ── */ body.theme-chameleon #pageContainer .btn, body.theme-chameleon .box .btn, body.theme-chameleon .search-box .btn, body.theme-chameleon .list-wrap .btn { border-radius: 6px !important; font-weight: 500; letter-spacing: 0; text-decoration: none !important; display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 1px solid transparent !important; transition: all .15s; color: #fff !important; } body.theme-chameleon #pageContainer .btn-primary, body.theme-chameleon #pageContainer .btn-info, body.theme-chameleon .box .btn-primary, body.theme-chameleon .box .btn-info, body.theme-chameleon .search-box .btn-primary, body.theme-chameleon .search-box .btn-info { background: #7367f0 !important; border-color: #7367f0 !important; color: #fff !important; box-shadow: 0 2px 6px rgba(115,103,240,.3) !important; } body.theme-chameleon #pageContainer .btn-primary:hover, body.theme-chameleon #pageContainer .btn-info:hover, body.theme-chameleon .box .btn-primary:hover, body.theme-chameleon .box .btn-info:hover, body.theme-chameleon .search-box .btn-primary:hover, body.theme-chameleon .search-box .btn-info:hover { background: #5e50ee !important; border-color: #5e50ee !important; box-shadow: 0 4px 12px rgba(115,103,240,.4) !important; transform: translateY(-1px); } body.theme-chameleon #pageContainer .btn-success, body.theme-chameleon .box .btn-success { background: #28c76f !important; border-color: #28c76f !important; box-shadow: 0 2px 6px rgba(40,199,111,.3) !important; } body.theme-chameleon #pageContainer .btn-success:hover, body.theme-chameleon .box .btn-success:hover { background: #1f9d57 !important; border-color: #1f9d57 !important; box-shadow: 0 4px 12px rgba(40,199,111,.4) !important; transform: translateY(-1px); } body.theme-chameleon #pageContainer .btn-danger, body.theme-chameleon .box .btn-danger { background: #ea5455 !important; border-color: #ea5455 !important; box-shadow: 0 2px 6px rgba(234,84,85,.3) !important; } body.theme-chameleon #pageContainer .btn-danger:hover, body.theme-chameleon .box .btn-danger:hover { background: #c63b3c !important; border-color: #c63b3c !important; box-shadow: 0 4px 12px rgba(234,84,85,.4) !important; transform: translateY(-1px); } body.theme-chameleon #pageContainer .btn-warning, body.theme-chameleon .box .btn-warning { background: #ff9f43 !important; border-color: #ff9f43 !important; color: #fff !important; box-shadow: 0 2px 6px rgba(255,159,67,.3) !important; } body.theme-chameleon #pageContainer .btn-default, body.theme-chameleon .box .btn-default, body.theme-chameleon .search-box .btn-default { background: #fff !important; border: 1px solid #d8d6de !important; color: #5e5873 !important; box-shadow: none !important; } body.theme-chameleon #pageContainer .btn-default:hover, body.theme-chameleon .box .btn-default:hover, body.theme-chameleon .search-box .btn-default:hover { background: #f6f6f9 !important; border-color: #b8b8c4 !important; color: #2c2c54 !important; } /* Pill 변형 — 빠른 기간 버튼 */ body.theme-chameleon #pageContainer .btn-pill { border-radius: 22px !important; padding: 6px 16px !important; font-size: 12px !important; height: auto; min-width: 0; } /* ── 검색박스 ── */ body.theme-chameleon #pageContainer .search-box { padding: 20px 24px; } body.theme-chameleon #pageContainer .search-box .form-control { height: 38px; border: 1px solid #d8d6de !important; border-radius: 6px; color: #2c2c54; } body.theme-chameleon #pageContainer .search-box .form-control:focus { border-color: #7367f0 !important; box-shadow: 0 3px 10px 0 rgba(115,103,240,.15) !important; } body.theme-chameleon #pageContainer .search-box .lbl { color: #5e5873; height: 38px; font-weight: 600; font-size: 12px; } body.theme-chameleon #pageContainer .search-box .btn { height: 38px; padding: 0 16px; } /* ── 목록 테이블 ── */ body.theme-chameleon #pageContainer .list-wrap { border-radius: 10px; } body.theme-chameleon #pageContainer .list-wrap > .list-toolbar { background: #fff !important; border-bottom: 1px solid #ebe9f1 !important; padding: 18px 26px; } body.theme-chameleon #pageContainer table.list-table thead td, body.theme-chameleon #pageContainer table.list-table thead th { background: #f8f8fb !important; color: #5e5873 !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .5px; text-transform: uppercase; padding: 14px 12px; border-bottom: 1px solid #ebe9f1 !important; } body.theme-chameleon #pageContainer table.list-table tbody td { color: #5e5873 !important; padding: 16px 12px; border-bottom: 1px solid #ebe9f1 !important; } body.theme-chameleon #pageContainer table.list-table tbody tr:hover td { background: #f8f8fb !important; } body.theme-chameleon #pageContainer table.list-table .empty { color: #b9b3ce; padding: 64px 20px; } /* ── 페이저 — pill 톤 ── */ body.theme-chameleon #pageContainer .pager { margin: 24px 0 6px; } body.theme-chameleon #pageContainer .pager a, body.theme-chameleon #pageContainer .pager .cur, body.theme-chameleon #pageContainer .pager .gap, body.theme-chameleon #pageContainer .pager .nav-btn { min-width: 36px; height: 36px; border-radius: 50%; border: 0; background: #f0eff5; color: #6e6b7b; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; } body.theme-chameleon #pageContainer .pager a:hover { background: rgba(115,103,240,.12); color: #7367f0; } body.theme-chameleon #pageContainer .pager .cur { background: #7367f0 !important; color: #fff !important; box-shadow: 0 3px 10px 0 rgba(115,103,240,.4); } body.theme-chameleon #pageContainer .pager .gap { background: transparent; color: #b9b3ce; } /* ── 상태 라벨 — Chameleon 라이트 ── */ body.theme-chameleon #pageContainer .status-label { padding: 3px 12px; border-radius: 12px; font-size: 11px; font-weight: 600; border: 0 !important; } body.theme-chameleon #pageContainer .status-label.on { background: rgba(40,199,111,.12); color: #28c76f; } body.theme-chameleon #pageContainer .status-label.off { background: rgba(234,84,85,.12); color: #ea5455; } body.theme-chameleon #pageContainer .status-label.expired { background: rgba(108,122,139,.12); color: #6c7a8b; } body.theme-chameleon #pageContainer .status-label.draft { background: rgba(255,159,67,.12); color: #ff9f43; } /* ── 드롭존 — Chameleon 라이트 ── */ body.theme-chameleon #pageContainer .upload-dropzone .dz_zone, body.theme-chameleon #pageContainer .upbox .dz_zone { border: 2px dashed #d8d6de !important; background: #f8f8fb !important; border-radius: 10px; padding: 26px 28px; } body.theme-chameleon #pageContainer .upload-dropzone.is_dragover .dz_zone, body.theme-chameleon #pageContainer .upbox.is_dragover .dz_zone { background: rgba(115,103,240,.06) !important; border-color: #7367f0 !important; color: #7367f0 !important; } body.theme-chameleon #pageContainer .upload-dropzone .dz_icon, body.theme-chameleon #pageContainer .upbox .dz_icon { color: #7367f0 !important; } body.theme-chameleon #pageContainer .upload-dropzone .dz_pick, body.theme-chameleon #pageContainer .upbox .dz_pick { border: 1px solid #7367f0 !important; color: #7367f0 !important; background: #fff !important; border-radius: 6px; padding: 8px 18px; font-weight: 600; } body.theme-chameleon #pageContainer .upload-dropzone .dz_pick:hover, body.theme-chameleon #pageContainer .upbox .dz_pick:hover { background: #7367f0 !important; color: #fff !important; box-shadow: 0 3px 10px rgba(115,103,240,.4); } /* ── 차트 카드 ── */ body.theme-chameleon #pageContainer .stats_chart_wrap { padding: 22px 26px; } body.theme-chameleon #pageContainer .stats_chart_wrap .stats_chart_head { border-bottom: 1px solid #ebe9f1; padding-bottom: 14px; } body.theme-chameleon #pageContainer .stats_chart_wrap .stats_chart_head h4 { color: #2c2c54; font-weight: 700; } body.theme-chameleon #pageContainer .stats_chart_wrap .stats_chart_head h4 .fa { color: #7367f0 !important; } body.theme-chameleon #pageContainer .stats_chart_wrap .stats_chart_legend { color: #8a92a6; } /* sub-box (팝업 PC/모바일) */ body.theme-chameleon #pageContainer .form-subbox { background: #f8f8fb !important; border: 1px solid #ebe9f1 !important; border-radius: 8px; } /* 기존 첨부 카드 */ body.theme-chameleon #pageContainer .up_existing_item { background: #fff; border: 1px solid #ebe9f1 !important; border-radius: 8px; } body.theme-chameleon #pageContainer .up_existing_item label { color: #ea5455 !important; } /* ============================================================================ * v5 — Madmin UI 보정 (Chameleon 마무리) * * 적용: 스코프, v4 위 최종 보정. * 1) 카드 아이콘 glow 잘림 해소 (.stat_card .card overflow visible) * 2) CKEditor 툴바 색상/대비 강화 * 3) form-actions 버튼 간격 (gap) * 4) 사이드바 배경 패턴 (radial-gradient pseudo) * 5) userInfo 그라데이션 강화 * ============================================================================ */ /* 1) 통계 카드 — 아이콘 glow 가 카드 안에 잘리지 않도록 overflow 해제 */ body.theme-chameleon #pageContainer .stat_card .card { overflow: visible !important; position: relative; } body.theme-chameleon #pageContainer .stat_card .card .label .fa { /* 아이콘 박스에 여백 확보 — wrapper 자신은 카드 안에 있되 box-shadow는 시각적으로 살짝 떠 보임 */ width: 42px; height: 42px; margin-right: 14px; } body.theme-chameleon #pageContainer .stat_card .card:hover .label .fa { transform: translateY(-1px); transition: transform .2s, box-shadow .2s; } /* hover 시 아이콘 glow 강화 (카드 hover와 별도로 자연스럽게) */ body.theme-chameleon #pageContainer .stat_card .card.color-primary:hover .label .fa { box-shadow: 0 8px 18px rgba(115,103,240,.5); } body.theme-chameleon #pageContainer .stat_card .card.color-info:hover .label .fa { box-shadow: 0 8px 18px rgba(0,207,232,.5); } body.theme-chameleon #pageContainer .stat_card .card.color-success:hover .label .fa { box-shadow: 0 8px 18px rgba(40,199,111,.5); } body.theme-chameleon #pageContainer .stat_card .card.color-warning:hover .label .fa { box-shadow: 0 8px 18px rgba(255,159,67,.5); } body.theme-chameleon #pageContainer .stat_card .card.color-pink:hover .label .fa { box-shadow: 0 8px 18px rgba(255,91,138,.5); } /* label 영역의 텍스트가 아이콘과 같은 줄에 깔끔히 정렬되도록 */ body.theme-chameleon #pageContainer .stat_card .card .label { align-items: center; line-height: 1.2; } /* 3) form-actions 버튼 간격 — 비밀번호 변경 등 */ body.theme-chameleon #pageContainer .form-actions { padding: 22px 26px; } body.theme-chameleon #pageContainer .form-actions .left .btn, body.theme-chameleon #pageContainer .form-actions .right .btn { margin: 0; } body.theme-chameleon #pageContainer .form-actions .right { gap: 10px; } body.theme-chameleon #pageContainer .form-actions .left { display: flex; gap: 10px; } /* (v5 사이드바 pseudo/아이콘 박스/userInfo glow 블록은 v7 에서 안정화 위해 제거됨) */ /* 6) 드롭존 — 안내 강화 */ body.theme-chameleon #pageContainer .upload-dropzone .dz_zone, body.theme-chameleon #pageContainer .upbox .dz_zone { padding: 28px 30px; } /* 드롭존 오류 메시지 */ body.theme-chameleon #pageContainer .upload-dropzone .dz_error, body.theme-chameleon #pageContainer .upbox .dz_error { display: none; margin-top: 10px; padding: 8px 12px; background: rgba(234,84,85,.10); color: #ea5455; border: 1px solid rgba(234,84,85,.3); border-radius: 6px; font-size: 12px; font-weight: 500; } /* ============================================================================ * v7 — Madmin UI 안정화 (레이아웃 + 사이드바 V4 복구 + active 박스만 Chameleon) * * 적용: * * 깨짐 원인 정리: * 1) admin.css(50px) + v1(50px) + v3(56px) + v4(64px) + v6(64px) 의 GNB 높이와 * pageContainer padding/margin-top 가 누적 → 컨텐츠가 헤더 아래로 과하게 밀림. * → v7 은 단일 값(56px) 으로 강제 통일. * 2) v5 #leftMenu :before/:after radial + 메뉴 아이콘 흰 박스(30x30) 가 정렬 * 파괴 → v7 은 모든 pseudo content:none + 아이콘 박스 제거. * 3) v6 의 flex 강제와 z-index 조작이 admin.css float layout 과 충돌 → v7 은 * V4 시점의 float 기반 구조로 환원. * * 디자인 추가는 일체 없고, active 메뉴(.on/.sel) 만 보라 gradient + radius 10px * + soft shadow 로 가볍게 마감. * ============================================================================ */ /* ── (A) 사이드바 배경 패턴 / radial / glow / pseudo 전면 제거 ── */ body.theme-chameleon #leftMenu:before, body.theme-chameleon #leftMenu:after, body.theme-chameleon #leftMenu .lnb:before, body.theme-chameleon #leftMenu .lnb:after, body.theme-chameleon #leftMenu .lnb-menu:before, body.theme-chameleon #leftMenu .lnb-menu:after { content: none !important; display: none !important; background: none !important; } body.theme-chameleon #leftMenu { position: fixed; top: 0; left: 0; width: 240px; height: 100%; background: #fff !important; overflow-x: hidden; overflow-y: auto; z-index: 100; box-shadow: 0 0 18px 0 rgba(34,41,47,.05); border-right: 1px solid #ebeaf2; } /* 콘텐츠는 absolute layer 없이 정상 흐름으로 — z-index 강제 해제 */ body.theme-chameleon #leftMenu > *, body.theme-chameleon #leftMenu .lnb, body.theme-chameleon #leftMenu .lnb > * { position: static; z-index: auto; } /* ── (B) 로고 영역 — GNB 와 동일한 56px ── */ body.theme-chameleon #leftMenu .logo { height: 56px; line-height: 56px; padding: 0 16px; background: #fff; border-bottom: 1px solid #ebeaf2; text-align: left; } body.theme-chameleon #leftMenu .logo a { display: inline-flex; align-items: center; height: 56px; } body.theme-chameleon #leftMenu .logo img { max-height: 32px; vertical-align: middle; } /* ── (C) userInfo — V4 구조(50px line-height) + 보라 단색 톤 ── */ body.theme-chameleon #leftMenu .lnb .lnb-div.userInfo { height: 50px !important; line-height: 50px !important; padding: 0; background: linear-gradient(118deg, #7367F0, #9E95F5); border-bottom: 0; box-shadow: none; } body.theme-chameleon #leftMenu .lnb .lnb-div.userInfo .left { float: left; margin-left: 20px; color: #fff !important; font-weight: 600; font-size: 13px; } body.theme-chameleon #leftMenu .lnb .lnb-div.userInfo .left span { color: rgba(255,255,255,.85) !important; } body.theme-chameleon #leftMenu .lnb .lnb-div.userInfo .right { float: right; margin-right: 17px; width: auto; height: auto; } body.theme-chameleon #leftMenu .lnb .lnb-div.userInfo .right a { color: #fff !important; background: none; padding: 0; border-radius: 0; display: inline-block; line-height: 50px; } body.theme-chameleon #leftMenu .lnb .lnb-div.userInfo .right a:hover { background: none; color: rgba(255,255,255,.75) !important; } body.theme-chameleon #leftMenu .lnb .lnb-div.userInfo .right a .fa { color: #fff !important; } /* ── (D) 메인 메뉴 — V4 float 구조 환원 (flex 강제 해제) ── */ body.theme-chameleon #leftMenu .lnb .lnb-menu { display: block; height: 44px; line-height: 44px; margin: 3px 12px; padding: 0; border-radius: 8px; cursor: pointer; transition: background-color .15s, color .15s, box-shadow .15s; } body.theme-chameleon #leftMenu .lnb .lnb-menu .left { float: left; margin-left: 16px; display: inline-block; color: #5e5873 !important; font-size: 13px; font-weight: 500; line-height: 44px; } body.theme-chameleon #leftMenu .lnb .lnb-menu .left i { /* 단일 아이콘 — 박스/배경/그림자 모두 제거 */ width: 18px; height: auto; display: inline-block; background: none !important; border-radius: 0 !important; box-shadow: none !important; text-align: center; font-size: 14px; line-height: 44px; vertical-align: middle; color: #5e5873 !important; transition: color .15s; } body.theme-chameleon #leftMenu .lnb .lnb-menu .left span { margin-left: 10px; color: #5e5873 !important; vertical-align: middle; } body.theme-chameleon #leftMenu .lnb .lnb-menu .right { float: right; margin-right: 16px; width: 14px; text-align: center; line-height: 44px; } body.theme-chameleon #leftMenu .lnb .lnb-menu .right i { color: #b9b3ce !important; font-size: 10px; line-height: 44px; vertical-align: middle; } /* hover — 부드러운 옅은 보라 */ body.theme-chameleon #leftMenu .lnb .lnb-menu:hover { background: rgba(115,103,240,.08); box-shadow: none; } body.theme-chameleon #leftMenu .lnb .lnb-menu:hover .left i, body.theme-chameleon #leftMenu .lnb .lnb-menu:hover .left span { color: #7367f0 !important; } /* ── (E) 활성 메뉴 — 보라 gradient 박스 (작업 2 핵심) ── */ body.theme-chameleon #leftMenu .lnb .lnb-menu.on, body.theme-chameleon #leftMenu .lnb .lnb-menu.sel { background: linear-gradient(118deg, #7367F0, #9E95F5) !important; border-radius: 10px !important; box-shadow: 0 6px 16px rgba(115,103,240,.25); } body.theme-chameleon #leftMenu .lnb .lnb-menu.on .left, body.theme-chameleon #leftMenu .lnb .lnb-menu.sel .left, body.theme-chameleon #leftMenu .lnb .lnb-menu.on .left i, body.theme-chameleon #leftMenu .lnb .lnb-menu.sel .left i, body.theme-chameleon #leftMenu .lnb .lnb-menu.on .left span, body.theme-chameleon #leftMenu .lnb .lnb-menu.sel .left span, body.theme-chameleon #leftMenu .lnb .lnb-menu.on .right i, body.theme-chameleon #leftMenu .lnb .lnb-menu.sel .right i { color: #fff !important; } /* ── (F) 서브메뉴 — 가벼운 표시 (dot + 텍스트만) ── */ body.theme-chameleon #leftMenu .lnb .lnb-submenu { background: transparent !important; margin: 0 12px 4px; padding: 4px 0; border-radius: 0; } body.theme-chameleon #leftMenu .lnb .lnb-submenu .lnb-submenu-item { padding-left: 44px; line-height: 34px; color: #6e6b7b !important; font-size: 12.5px; font-weight: 500; border-top: 0 !important; position: relative; cursor: pointer; transition: color .15s; } body.theme-chameleon #leftMenu .lnb .lnb-submenu .lnb-submenu-item:before { content: ""; position: absolute; left: 26px; top: 50%; width: 5px; height: 5px; border-radius: 50%; background: #d6d3e3; transform: translateY(-50%); transition: background-color .15s; } body.theme-chameleon #leftMenu .lnb .lnb-submenu .lnb-submenu-item:hover { background: transparent !important; color: #7367f0 !important; } body.theme-chameleon #leftMenu .lnb .lnb-submenu .lnb-submenu-item:hover:before { background: #7367f0; } body.theme-chameleon #leftMenu .lnb .lnb-submenu .lnb-submenu-item.on, body.theme-chameleon #leftMenu .lnb .lnb-submenu .lnb-submenu-item.sel { background: transparent !important; color: #7367f0 !important; font-weight: 600; } body.theme-chameleon #leftMenu .lnb .lnb-submenu .lnb-submenu-item.on:before, body.theme-chameleon #leftMenu .lnb .lnb-submenu .lnb-submenu-item.sel:before { background: #7367f0; } /* ── (G) 레이아웃 — GNB 높이/컨텐츠 시작점 단일화 (누적 padding 제거) ── */ body.theme-chameleon #rightCont { margin-left: 240px; background: #f8f8fb; } body.theme-chameleon #rightCont .gnb { position: fixed; left: 240px; right: 0; top: 0; height: 56px !important; line-height: 56px !important; background: #fff; border-bottom: 1px solid #ebeaf2; box-shadow: 0 1px 0 0 rgba(34,41,47,.04); z-index: 999; display: flex; align-items: stretch; padding: 0; } /* v8 에서 별도 body::before 로 2px 상단 그라데이션 바 재구성 (gnb:before 미사용) */ body.theme-chameleon #rightCont .gnb:before { content: none !important; display: none; } body.theme-chameleon #rightCont .gnb .gnb-menu { height: 56px !important; line-height: 56px !important; } /* 핵심: pageContainer 의 상단 여유 = GNB(56px) 만큼만. margin-top + padding-top * 누적 금지 — 둘 중 padding-top 만 사용하고 admin.css 의 margin-top:51px 는 0 으로 차단 */ body.theme-chameleon #pageContainer { margin-top: 0 !important; padding-top: 56px !important; min-height: calc(100vh - 56px); background: #f8f8fb; } body.theme-chameleon #pageContainer .pageWrap { padding: 28px 28px 56px; /* 헤더 아래 28px → "32~48px 정도" 요구 충족 */ max-width: 1480px; } body.theme-chameleon #pageContainer .pageWrap .page-heading { padding-bottom: 18px; margin-bottom: 4px; } body.theme-chameleon #pageContainer .pageWrap .page-heading h3 { font-size: 22px; font-weight: 700; color: #2c2c54; letter-spacing: -.3px; margin: 0 0 6px; } /* ============================================================================ * v8 — Chameleon Admin 톤 재정리 (포인트 그라데이션 + 마감 폴리시) * * 적용: . v7 안정 레이아웃 위에 Chameleon 샘플의 * gradient 포인트 / 카드 / 버튼 / focus glow 마감을 일관 적용. * * 원칙: * - 텍스트는 그라데이션 처리 금지 (배경/아이콘만) * - !important 는 v1~v7 누적 룰을 정확히 덮기 위해 필요한 곳에만 사용 * - body.theme-chameleon 스코프 안에서만 동작 (프론트 무영향) * - 단색 보라 #7367f0 만 깔린 곳을 118deg gradient 로 재정리 * * 컬러 토큰: * primary : linear-gradient(118deg, #7367F0, #9E95F5) * info : linear-gradient(118deg, #00CFE8, #1CE7FF) * success : linear-gradient(118deg, #28C76F, #48DA89) * warning : linear-gradient(118deg, #FF9F43, #FFC085) * danger : linear-gradient(118deg, #EA5455, #FF7B7C) * pink : linear-gradient(118deg, #FF5B8A, #FF8DB1) * ============================================================================ */ /* ── (A) 상단 2px gradient bar 복구 ───────────────────────────────────────── * v7 에서 gnb:before 를 제거했으므로, body::before 로 화면 최상단 전체 폭에 * fixed 2px 라인을 새로 깐다. z-index 1001 → GNB(999) 위, 메뉴(100) 위. */ body.theme-chameleon::before { content: ""; position: fixed; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, #7367F0 0%, #9E95F5 45%, #00CFE8 100%); z-index: 1001; pointer-events: none; } /* GNB 상단 1px shadow 와 충돌 방지 — GNB 는 위에서 2px 아래로 살짝 보정 */ body.theme-chameleon #rightCont .gnb { top: 2px !important; /* gradient bar 와 자연스럽게 연결 */ } body.theme-chameleon #leftMenu { padding-top: 2px; /* 로고 영역도 gradient bar 만큼 살짝 내림 */ } /* ── (B) 페이지 헤더 — breadcrumb 보라 포인트 ────────────────────────────── */ body.theme-chameleon #pageContainer .pageWrap .page-heading .breadcrumb li { color: #8a92a6 !important; font-size: 12px; } body.theme-chameleon #pageContainer .pageWrap .page-heading .breadcrumb li.active { color: #7367f0 !important; font-weight: 600; } body.theme-chameleon #pageContainer .pageWrap .page-heading .breadcrumb li + li:before { color: #d6d3e3 !important; } /* ── (C) 버튼 — primary/info 그라데이션 + hover lift ────────────────────── */ body.theme-chameleon #pageContainer .btn, body.theme-chameleon .search-box .btn { border: 0 !important; border-radius: 6px; font-weight: 600 !important; transition: transform .15s, box-shadow .15s, background .15s, color .15s; } /* v10: 주요 CTA — btn-primary / btn-info / form-actions 내부 btn-success(저장·확인) → * 브랜드 3-stop gradient 로 통일. v4 단색 보라 + v8 cyan-only 가 이 블록으로 덮임. */ body.theme-chameleon #pageContainer .btn-primary, body.theme-chameleon #pageContainer .btn-info, body.theme-chameleon #pageContainer .form-actions .btn-success, body.theme-chameleon .box .btn-primary, body.theme-chameleon .box .btn-info, body.theme-chameleon .search-box .btn-primary, body.theme-chameleon .search-box .btn-info { background: linear-gradient(118deg, #7367F0 0%, #6B7AF0 48%, #00CFE8 100%) !important; background-image: linear-gradient(118deg, #7367F0 0%, #6B7AF0 48%, #00CFE8 100%) !important; border: 0 !important; color: #fff !important; box-shadow: 0 8px 18px rgba(115,103,240,.28) !important; } body.theme-chameleon #pageContainer .btn-primary:hover, body.theme-chameleon #pageContainer .btn-info:hover, body.theme-chameleon #pageContainer .form-actions .btn-success:hover, body.theme-chameleon .box .btn-primary:hover, body.theme-chameleon .box .btn-info:hover, body.theme-chameleon .search-box .btn-primary:hover, body.theme-chameleon .search-box .btn-info:hover { background: linear-gradient(118deg, #7367F0 0%, #6B7AF0 48%, #00CFE8 100%) !important; background-image: linear-gradient(118deg, #7367F0 0%, #6B7AF0 48%, #00CFE8 100%) !important; transform: translateY(-1px); box-shadow: 0 10px 24px rgba(115,103,240,.38) !important; } /* 리스트 수정버튼 등 일반 .btn-success 는 그대로 success gradient (저장/확인이 아닌 컨텍스트) */ body.theme-chameleon #pageContainer .btn-success { background: linear-gradient(118deg, #28C76F, #48DA89) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(40,199,111,.25); } body.theme-chameleon #pageContainer .btn-success:hover { background: linear-gradient(118deg, #28C76F, #48DA89) !important; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(40,199,111,.35); } body.theme-chameleon #pageContainer .btn-warning { background: linear-gradient(118deg, #FF9F43, #FFC085) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(255,159,67,.25); } body.theme-chameleon #pageContainer .btn-warning:hover { background: linear-gradient(118deg, #FF9F43, #FFC085) !important; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(255,159,67,.35); } body.theme-chameleon #pageContainer .btn-danger { background: linear-gradient(118deg, #EA5455, #FF7B7C) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(234,84,85,.25); } body.theme-chameleon #pageContainer .btn-danger:hover { background: linear-gradient(118deg, #EA5455, #FF7B7C) !important; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(234,84,85,.35); } body.theme-chameleon #pageContainer .btn-default { background: #fff !important; border: 1px solid #d8d6de !important; color: #6e6b7b !important; box-shadow: none; } body.theme-chameleon #pageContainer .btn-default:hover { background: #f8f8fb !important; border-color: #b9b3ce !important; color: #5e5873 !important; transform: translateY(-1px); } /* ── (D) 입력폼 — 38px 통일 + focus 보라 glow ─────────────────────────────── */ body.theme-chameleon #pageContainer input[type="text"], body.theme-chameleon #pageContainer input[type="number"], body.theme-chameleon #pageContainer input[type="email"], body.theme-chameleon #pageContainer input[type="password"], body.theme-chameleon #pageContainer input[type="date"], body.theme-chameleon #pageContainer select, body.theme-chameleon #pageContainer textarea, body.theme-chameleon .search-box .form-control { height: 38px; border: 1px solid #dfe5ec !important; border-radius: 6px !important; background: #fff !important; color: #2c2c54 !important; padding: 0 12px; font-size: 13px; transition: border-color .15s, box-shadow .15s; } body.theme-chameleon #pageContainer textarea { height: auto; padding: 10px 12px; line-height: 1.5; } body.theme-chameleon #pageContainer input:focus, body.theme-chameleon #pageContainer select:focus, body.theme-chameleon #pageContainer textarea:focus, body.theme-chameleon .search-box .form-control:focus { border-color: #7367f0 !important; box-shadow: 0 0 0 3px rgba(115,103,240,.15) !important; outline: none !important; } body.theme-chameleon #pageContainer ::placeholder { color: #b4bac4; } body.theme-chameleon #pageContainer label { font-size: 13px; font-weight: 600; color: #5e5873; } /* ── (E) 검색영역 — 한 줄 정렬 + pill 형 빠른 기간 ────────────────────────── */ body.theme-chameleon .search-box .search-row { gap: 8px; align-items: center; } body.theme-chameleon .search-box .lbl { color: #5e5873; font-weight: 600; font-size: 13px; } body.theme-chameleon .search-box .btn { height: 38px; padding: 0 16px; } body.theme-chameleon .btn-pill { height: 30px !important; padding: 0 14px !important; border-radius: 50px !important; font-size: 12px !important; background: #fff !important; border: 1px solid #d8d6de !important; color: #6e6b7b !important; } body.theme-chameleon .btn-pill:hover { background: rgba(115,103,240,.08) !important; color: #7367f0 !important; border-color: rgba(115,103,240,.4) !important; } /* ── (F) 페이저 .cur — 단색 → 보라 gradient ──────────────────────────────── */ body.theme-chameleon #pageContainer .pager .cur { background: linear-gradient(118deg, #7367F0, #9E95F5) !important; color: #fff !important; box-shadow: 0 4px 12px rgba(115,103,240,.32) !important; } /* ── (G) 왼쪽 메뉴 active — 부드러움 보정 (radius 10 유지, shadow 톤 다운) ── */ body.theme-chameleon #leftMenu .lnb .lnb-menu.on, body.theme-chameleon #leftMenu .lnb .lnb-menu.sel { background: linear-gradient(118deg, #7367F0, #9E95F5) !important; border-radius: 10px !important; box-shadow: 0 4px 14px rgba(115,103,240,.28); } /* hover 도 transition 자연스럽게 */ body.theme-chameleon #leftMenu .lnb .lnb-menu { transition: background-color .2s, box-shadow .2s; } /* ── (H) CKEditor — v11 부터 스킨 자체(skins/moono-lisa/editor.css 하단)에서 처리. * madmin_app.css 의 override 블록은 제거. */ /* ── (I) stat_card — 12~14px radius, hover lift, glow 잘림 방지 ──────────── */ body.theme-chameleon #pageContainer .stat_card .card { border-radius: 12px !important; overflow: visible !important; box-shadow: 0 4px 24px 0 rgba(34,41,47,.06); transition: transform .2s, box-shadow .2s; } body.theme-chameleon #pageContainer .stat_card .card:hover { transform: translateY(-3px); box-shadow: 0 10px 30px 0 rgba(34,41,47,.10); } body.theme-chameleon #pageContainer .stat_card .card .label .fa { width: 42px; height: 42px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 16px; color: #fff !important; margin-right: 14px; /* 카드별 색상은 v4 의 .color-XXX 셀렉터에서 그라데이션 + box-shadow 부여 */ } body.theme-chameleon #pageContainer .stat_card .card .value { color: #2c2c54; font-size: 28px; font-weight: 700; line-height: 1.1; } body.theme-chameleon #pageContainer .stat_card .card .sub { color: #8a92a6; font-size: 12px; } /* ── (J) 박스/패널 카드 — 흰 배경 + 12px radius + 부드러운 shadow ───────── */ body.theme-chameleon #pageContainer .box { background: #fff; border: 0 !important; border-radius: 12px; box-shadow: 0 4px 24px 0 rgba(34,41,47,.06); padding: 0; overflow: hidden; } body.theme-chameleon #pageContainer .box.list-wrap { padding: 0; } body.theme-chameleon #pageContainer .box .list-toolbar { padding: 18px 22px; border-bottom: 1px solid #ebe9f1; } body.theme-chameleon #pageContainer .stats_chart_wrap { padding: 22px 26px; } /* ── (K) 통계 차트 카드 — legend pill 형 ────────────────────────────────── */ body.theme-chameleon #pageContainer .stats_chart_head .stats_chart_legend { display: inline-flex; gap: 12px; align-items: center; } body.theme-chameleon #pageContainer .stats_chart_head .stats_chart_legend span { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; background: #f8f8fb; border-radius: 50px; font-size: 12px; color: #5e5873; font-weight: 500; } body.theme-chameleon #pageContainer .stats_chart_head .stats_chart_legend span i { width: 10px; height: 10px; border-radius: 50%; display: inline-block; } /* ── (L) 본문 배경 — Chameleon 라이트 톤 (재확인) ────────────────────────── */ body.theme-chameleon { background: #f8f8fb; } body.theme-chameleon #rightCont { background: #f8f8fb; } body.theme-chameleon #pageContainer { background: #f8f8fb; } /* ============================================================================ * v9 — Chameleon 톤 마감 폴리시 (gradient 깊이 / shadow 잘림 / form-actions 간격) * * 적용: + (로그인 한정) * * 원인 정리: * - .stat_card .card { overflow:hidden } (v4 라인 1542) 가 v5/v8 의 visible 보정 * 이후에도 같은 셀렉터로 다시 적용되어, 일부 hover 경계에서 그림자 잘림. * → v9 가 .stat_card 컨테이너 + .label + .label .fa 까지 visible 강제. * - 5장 카드 + minmax(220px) 가 본문 폭(약 1180px) 보다 살짝 큼 → 최우측 카드 * 절단. minmax(180px) 로 줄여 5장이 한 줄에 자연스럽게 들어가도록. * - .form-actions .right { gap: 6px } (v3 라인 1060) — 너무 좁음. v9 가 14px 로 * 명확 보정 + 버튼 height 38px 통일. * - 단색 보라 한계: userInfo 와 로그인 버튼은 3-stop 보라→블루→시안 gradient * 로 깊이 부여 (사용자 샘플 로그인 버튼 톤). * - 상단 2px gradient bar 가 화면에서 옅게 보임 → 3px + saturate 100% 로 강조. * ============================================================================ */ /* ── (A) 상단 gradient bar — 3px 로 강조 + 3-stop ───────────────────────── */ body.theme-chameleon::before { height: 3px !important; background: linear-gradient(90deg, #7367F0 0%, #6B7AF0 35%, #2EB6F0 70%, #00CFE8 100%) !important; } body.theme-chameleon #rightCont .gnb { top: 3px !important; } body.theme-chameleon #leftMenu { padding-top: 3px; } /* ── (B) userInfo — 3-stop 보라→블루→시안 (사용자 표시 영역 깊이 부여) ── */ body.theme-chameleon #leftMenu .lnb .lnb-div.userInfo { background: linear-gradient(118deg, #7367F0 0%, #6B7AF0 50%, #00CFE8 100%) !important; box-shadow: 0 4px 14px rgba(115,103,240,.18); } /* ── (C) 로그인 버튼 — 3-stop 보라→시안 gradient (사용자 샘플 톤) ───────── */ body.madmin-login .login_btn { background: linear-gradient(118deg, #7367F0 0%, #6B7AF0 45%, #00CFE8 100%) !important; border-radius: 50px !important; padding: 14px 0 !important; font-weight: 600 !important; letter-spacing: .5px; box-shadow: 0 6px 18px rgba(115,103,240,.32); transition: transform .15s, box-shadow .15s; } body.madmin-login .login_btn:hover { background: linear-gradient(118deg, #7367F0 0%, #6B7AF0 45%, #00CFE8 100%) !important; transform: translateY(-1px); box-shadow: 0 10px 26px rgba(115,103,240,.42); } body.madmin-login .login_ipnut:focus { border-color: #7367f0 !important; box-shadow: 0 0 0 3px rgba(115,103,240,.15) !important; } /* ── (D) stat_card — overflow 보정 (icon glow 잘림 해소) + 5장 fit ──────── */ body.theme-chameleon #pageContainer .stat_card { overflow: visible !important; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)) !important; gap: 14px; padding: 6px 0; /* glow 가 위/아래 살짝 떠 보이게 카드 박스 외부 여유 */ } body.theme-chameleon #pageContainer .stat_card .card, body.theme-chameleon #pageContainer .stat_card .card .label, body.theme-chameleon #pageContainer .stat_card .card .label .fa { overflow: visible !important; } body.theme-chameleon #pageContainer .stat_card .card { padding: 20px 22px; /* 222px 박스 안에 아이콘 + 텍스트 안정 배치 */ } /* 아이콘 원형 — Chameleon 라이트 박스 톤 (gradient 옅게 + glow 살림) */ body.theme-chameleon #pageContainer .stat_card .card .label .fa { width: 42px; height: 42px; border-radius: 50%; margin-right: 12px; line-height: 1; box-shadow: 0 6px 14px rgba(115,103,240,.28); /* color 별 색은 v4 가 override */ } /* color-XXX 별 glow — v4 가 background 만, v9 가 glow 톤 강화 (.32 → .35) */ body.theme-chameleon #pageContainer .stat_card .card.color-primary .label .fa { box-shadow: 0 6px 14px rgba(115,103,240,.35); } body.theme-chameleon #pageContainer .stat_card .card.color-info .label .fa { box-shadow: 0 6px 14px rgba(0,207,232,.35); } body.theme-chameleon #pageContainer .stat_card .card.color-success .label .fa { box-shadow: 0 6px 14px rgba(40,199,111,.35); } body.theme-chameleon #pageContainer .stat_card .card.color-warning .label .fa { box-shadow: 0 6px 14px rgba(255,159,67,.35); } body.theme-chameleon #pageContainer .stat_card .card.color-pink .label .fa { box-shadow: 0 6px 14px rgba(255,91,138,.35); } /* hover 시에도 visible 유지 + lift 살림 */ body.theme-chameleon #pageContainer .stat_card .card:hover { overflow: visible !important; transform: translateY(-3px); box-shadow: 0 10px 28px 0 rgba(34,41,47,.10); } /* ── (E) form-actions — 좌우 버튼 간격 14px + 버튼 통일 ────────────────── */ body.theme-chameleon #pageContainer .form-actions { padding: 22px 26px !important; border-top: 1px solid #ebe9f1; background: #fff; border-radius: 0 0 12px 12px; } body.theme-chameleon #pageContainer .form-actions .left, body.theme-chameleon #pageContainer .form-actions .right { display: flex !important; align-items: center; gap: 14px !important; } body.theme-chameleon #pageContainer .form-actions .right { justify-content: flex-end; } body.theme-chameleon #pageContainer .form-actions .btn { margin: 0 !important; /* admin.css/.form-actions .btn { margin:0 3px } 차단 */ height: 40px !important; line-height: 40px !important; padding: 0 22px !important; min-width: 100px; border-radius: 8px !important; font-weight: 600 !important; display: inline-flex !important; align-items: center; justify-content: center; gap: 6px; } /* ── (F) box overflow:hidden → list-wrap 한정 ───────────────────────────── */ /* v8 가 모든 .box 에 overflow:hidden 을 걸어 stats_chart 의 차트 외곽 등이 * 잘릴 수 있음 → .list-wrap 만 hidden 유지, 일반 .box 는 visible */ body.theme-chameleon #pageContainer .box { overflow: visible !important; } body.theme-chameleon #pageContainer .box.list-wrap { overflow: hidden !important; /* 표 모서리 radius 클리핑 위해 유지 */ } /* ── (G) 좌측 메뉴 active — 그림자 더 부드럽게 (v8 .28 → v9 .22) ────────── */ body.theme-chameleon #leftMenu .lnb .lnb-menu.on, body.theme-chameleon #leftMenu .lnb .lnb-menu.sel { background: linear-gradient(118deg, #7367F0, #9E95F5) !important; border-radius: 10px !important; box-shadow: 0 4px 12px rgba(115,103,240,.22) !important; } /* active 메뉴 좌우 여백 자연스럽게 — 12px 사이드 마진 (v7) 유지하되, +/- 아이콘 우측 정렬 강조 */ body.theme-chameleon #leftMenu .lnb .lnb-menu .right { margin-right: 14px; } /* ── (I) GNB — 헤더 라인 좌우 자연스럽게 (border + shadow 통일) ─────────── */ body.theme-chameleon #rightCont .gnb { border-bottom: 1px solid #ebeaf2 !important; box-shadow: 0 1px 0 0 rgba(34,41,47,.02), 0 2px 6px rgba(34,41,47,.03); align-items: center !important; /* 세로 중앙 정렬 — flex stretch 였던 부분 정리 */ } body.theme-chameleon #rightCont .gnb .gnb-spacer { flex: 1; } body.theme-chameleon #rightCont .gnb .gnb-menu { display: inline-flex !important; align-items: center; height: 56px !important; line-height: 1 !important; /* line-height 56 으로 누적되어 baseline 어긋나던 것 정리 */ padding: 0 18px; gap: 8px; } body.theme-chameleon #rightCont .gnb .gnb-menu .fa, body.theme-chameleon #rightCont .gnb .gnb-menu span, body.theme-chameleon #rightCont .gnb .gnb-menu a { line-height: 1; display: inline-flex; align-items: center; } /* ── (J) 본문 시작 위치 재확인 — v7/v8 단일 padding-top:56 유지 강조 ───── */ body.theme-chameleon #pageContainer { padding-top: 56px !important; margin-top: 0 !important; } body.theme-chameleon #pageContainer .pageWrap { padding-top: 28px !important; /* 헤더 아래 28px → 페이지 제목 시작 */ } /* ── (K) 검색 박스 / 차트 카드 — 한 줄 정렬 유지 ────────────────────────── */ body.theme-chameleon .search-box .search-row { flex-wrap: wrap; row-gap: 8px; } /* ============================================================================ * v10 — 최종 정리: 헤더 라인 정렬 + 취소 버튼 라이트 톤 + form-actions 간격 강조 * * 작업 메모: * - v8 의 btn-info(cyan-only) / v4 의 btn-primary(단색 보라) 는 위 (C) 블록을 * 같은 셀렉터로 in-place 교체하여 v10 브랜드 3-stop gradient 가 winner. * - 위 (H) 블록은 v5/v8 의 CKEditor 룰을 in-place 강화 (background-image:none + * filter:none) — vendor moono `background-image` linear-gradient 완전 차단. * - 본 v10 미니 섹션은 헤더 라인 / 취소 버튼 / 카드 hover overflow 만 마감. * ============================================================================ */ /* (1) 헤더 라인 — 좌측 로고와 우측 GNB 하단선 픽셀 단위 정렬 강제 */ body.theme-chameleon #leftMenu .logo, body.theme-chameleon #rightCont .gnb { height: 56px !important; box-sizing: border-box !important; border-bottom: 1px solid #ebeaf2 !important; } body.theme-chameleon #rightCont .gnb { top: 3px !important; /* gradient bar 3px 만큼 아래로 */ line-height: 1 !important; } body.theme-chameleon #leftMenu { padding-top: 3px !important; } /* 로고 좌측 패딩 정렬 — userInfo 와 좌측 라인 통일 */ body.theme-chameleon #leftMenu .logo { padding: 0 20px !important; } /* (2) 취소 / 목록 버튼 — 라이트 톤 + 자연스러운 hover */ body.theme-chameleon #pageContainer .btn-default, body.theme-chameleon .box .btn-default, body.theme-chameleon .search-box .btn-default { background: #fff !important; background-image: none !important; color: #2c2c54 !important; border: 1px solid #dfe5ec !important; border-radius: 10px !important; min-width: 100px; height: 42px; box-shadow: none !important; font-weight: 600 !important; } body.theme-chameleon #pageContainer .btn-default:hover, body.theme-chameleon .box .btn-default:hover, body.theme-chameleon .search-box .btn-default:hover { background: #f8f8fb !important; background-image: none !important; border-color: #cfd6e4 !important; color: #2c2c54 !important; transform: translateY(-1px); box-shadow: 0 4px 10px rgba(34,41,47,.06) !important; } /* (3) CTA 사이즈 통일 — 작업 2 명세 (height 42, radius 10, padding, min-width) */ body.theme-chameleon #pageContainer .btn-primary, body.theme-chameleon #pageContainer .btn-info, body.theme-chameleon #pageContainer .form-actions .btn-success { height: 42px !important; min-width: 110px !important; padding: 0 22px !important; border-radius: 10px !important; font-weight: 700 !important; } /* 검색/조회 버튼은 .search-box 안에서 36px 작은 톤 */ body.theme-chameleon .search-box .btn-primary, body.theme-chameleon .search-box .btn-info { height: 36px !important; min-width: 90px; padding: 0 18px !important; border-radius: 10px !important; font-weight: 700 !important; } /* (4) form-actions 간격 강조 — gap 14px 명세 재확인 (v9 와 동일하되 한 번 더 보강) */ body.theme-chameleon #pageContainer .form-actions { padding: 22px 26px !important; background: #fff !important; border-top: 1px solid #ebe9f1 !important; border-radius: 0 0 12px 12px; } body.theme-chameleon #pageContainer .form-actions .left, body.theme-chameleon #pageContainer .form-actions .right { display: flex !important; gap: 14px !important; align-items: center; } body.theme-chameleon #pageContainer .form-actions .right { justify-content: flex-end; } body.theme-chameleon #pageContainer .form-actions .btn { margin: 0 !important; } /* (5) 좌측 메뉴 active — radius 10, soft shadow, 좌우 12 margin (v9 유지 재확인) */ body.theme-chameleon #leftMenu .lnb .lnb-menu.on, body.theme-chameleon #leftMenu .lnb .lnb-menu.sel { background: linear-gradient(118deg, #7367F0 0%, #6B7AF0 48%, #00CFE8 100%) !important; background-image: linear-gradient(118deg, #7367F0 0%, #6B7AF0 48%, #00CFE8 100%) !important; border-radius: 10px !important; box-shadow: 0 6px 16px rgba(115,103,240,.22) !important; margin: 3px 12px !important; } /* (6) 대시보드 카드 — overflow 4단 재확인 (v9 + v10 보강) */ body.theme-chameleon #pageContainer .stat_card, body.theme-chameleon #pageContainer .stat_card .card, body.theme-chameleon #pageContainer .stat_card .card .label, body.theme-chameleon #pageContainer .stat_card .card .label .fa { overflow: visible !important; } body.theme-chameleon #pageContainer .stat_card { padding: 8px 4px !important; } body.theme-chameleon #pageContainer .stat_card .card:hover { overflow: visible !important; } /* (7) 상단 gradient bar 단일 정의 — 다른 가짜 라인 제거 보강 */ body.theme-chameleon::before { content: "" !important; position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; width: 100% !important; height: 3px !important; background: linear-gradient(90deg, #7367F0 0%, #6B7AF0 35%, #2EB6F0 70%, #00CFE8 100%) !important; z-index: 1100 !important; pointer-events: none !important; } /* ============================================================================ * v12 — CKEditor 5 Chameleon 톤 (4.x 교체 후) * * 적용: body.theme-chameleon 스코프 안의 .ck-editor / .ck-toolbar / .ck-content. * CKE5 는 CSS variable + BEM 클래스 기반이라 변수 override 만으로 톤 대부분 통일. * ============================================================================ */ body.theme-chameleon .ck-editor { /* CKE5 design token override — 변수 한 곳만 바꾸면 toolbar/border/focus 가 따라옴 */ --ck-color-toolbar-background: linear-gradient(118deg, #7367F0 0%, #6B7AF0 48%, #00CFE8 100%); --ck-color-toolbar-border: transparent; --ck-color-button-default-background: transparent; --ck-color-button-default-hover-background: rgba(255,255,255,.22); --ck-color-button-default-active-background: rgba(255,255,255,.30); --ck-color-button-on-background: rgba(255,255,255,.28); --ck-color-button-on-hover-background: rgba(255,255,255,.36); --ck-color-button-on-active-background: rgba(255,255,255,.36); --ck-color-button-on-color: #fff; --ck-color-button-on-disabled-background: rgba(255,255,255,.15); --ck-color-text: #2c2c54; --ck-color-base-border: #ebe9f1; --ck-color-base-background: #fff; --ck-color-base-foreground: #fafafc; --ck-color-focus-border: #7367F0; --ck-color-focus-outer-shadow: rgba(115,103,240,.15); --ck-focus-ring: 1px solid #7367F0; --ck-border-radius: 8px; --ck-color-dropdown-panel-background: #fff; --ck-color-dropdown-panel-border: #ebe9f1; --ck-color-list-button-hover-background: rgba(115,103,240,.10); --ck-color-list-button-on-background: rgba(115,103,240,.18); --ck-color-list-button-on-text: #7367F0; } /* 외곽 — soft shadow + radius 10 */ body.theme-chameleon .ck.ck-editor { border-radius: 10px; box-shadow: 0 4px 14px rgba(34,41,47,.06); overflow: hidden; } body.theme-chameleon .ck.ck-editor__main > .ck-content { border: 1px solid #ebe9f1; border-top: 0; border-radius: 0 0 10px 10px; background: #fff; color: #2c2c54; min-height: 320px; padding: 16px 18px; box-shadow: none; } /* Toolbar — gradient 배경 + 흰 아이콘/텍스트 */ body.theme-chameleon .ck.ck-toolbar { background: linear-gradient(118deg, #7367F0 0%, #6B7AF0 48%, #00CFE8 100%) !important; background-image: linear-gradient(118deg, #7367F0 0%, #6B7AF0 48%, #00CFE8 100%) !important; border: 0 !important; border-radius: 10px 10px 0 0; padding: 6px 8px; box-shadow: none; } body.theme-chameleon .ck.ck-toolbar > .ck-toolbar__items { gap: 2px; } /* Toolbar buttons (단일 버튼) */ body.theme-chameleon .ck.ck-toolbar .ck-button { color: #fff !important; background: transparent !important; border: 0 !important; border-radius: 6px !important; } body.theme-chameleon .ck.ck-toolbar .ck-button .ck-button__icon, body.theme-chameleon .ck.ck-toolbar .ck-button .ck-button__icon * { color: #fff !important; fill: #fff !important; } body.theme-chameleon .ck.ck-toolbar .ck-button:hover, body.theme-chameleon .ck.ck-toolbar .ck-button:focus { background: rgba(255,255,255,.22) !important; box-shadow: none !important; } body.theme-chameleon .ck.ck-toolbar .ck-button.ck-on, body.theme-chameleon .ck.ck-toolbar .ck-button.ck-on:hover { background: rgba(255,255,255,.30) !important; color: #fff !important; } body.theme-chameleon .ck.ck-toolbar .ck-button .ck-button__label { color: #fff !important; font-size: 12px; } /* Dropdown buttons (Heading, FontColor) */ body.theme-chameleon .ck.ck-toolbar .ck-dropdown .ck-button.ck-dropdown__button { background: rgba(255,255,255,.18) !important; border: 1px solid rgba(255,255,255,.22) !important; border-radius: 6px !important; color: #fff !important; } body.theme-chameleon .ck.ck-toolbar .ck-dropdown .ck-button.ck-dropdown__button:hover { background: rgba(255,255,255,.28) !important; } body.theme-chameleon .ck.ck-toolbar .ck-dropdown .ck-button .ck-dropdown__arrow { color: #fff !important; } /* Toolbar separator */ body.theme-chameleon .ck.ck-toolbar .ck-toolbar__separator { background: rgba(255,255,255,.25) !important; margin: 0 4px; } /* Dropdown panel (Heading 선택 메뉴, 색상 picker 등) — 흰 배경 + 보라 active */ body.theme-chameleon .ck.ck-dropdown__panel { background: #fff; border: 1px solid #ebe9f1; border-radius: 8px; box-shadow: 0 6px 20px rgba(34,41,47,.10); } body.theme-chameleon .ck.ck-dropdown__panel .ck-list .ck-list__item .ck-button:hover { background: rgba(115,103,240,.10) !important; color: #7367F0 !important; } body.theme-chameleon .ck.ck-dropdown__panel .ck-list .ck-list__item .ck-button.ck-on { background: rgba(115,103,240,.18) !important; color: #7367F0 !important; } /* Balloon / image toolbar / table toolbar */ body.theme-chameleon .ck.ck-balloon-panel { border-radius: 8px; border: 1px solid #ebe9f1; box-shadow: 0 6px 20px rgba(34,41,47,.10); } body.theme-chameleon .ck.ck-balloon-panel .ck-toolbar { background: #fff !important; background-image: none !important; border-radius: 8px; } body.theme-chameleon .ck.ck-balloon-panel .ck-toolbar .ck-button, body.theme-chameleon .ck.ck-balloon-panel .ck-toolbar .ck-button .ck-button__label, body.theme-chameleon .ck.ck-balloon-panel .ck-toolbar .ck-button .ck-button__icon * { color: #2c2c54 !important; fill: #2c2c54 !important; } body.theme-chameleon .ck.ck-balloon-panel .ck-toolbar .ck-button:hover { background: rgba(115,103,240,.10) !important; } /* Content editing area typography */ body.theme-chameleon .ck.ck-content { line-height: 1.6; font-size: 14px; } body.theme-chameleon .ck.ck-content h2, body.theme-chameleon .ck.ck-content h3, body.theme-chameleon .ck.ck-content h4 { color: #2c2c54; } body.theme-chameleon .ck.ck-content a { color: #7367F0; } body.theme-chameleon .ck.ck-content blockquote { border-left: 4px solid #7367F0; padding-left: 14px; color: #6b7280; margin: 14px 0; } body.theme-chameleon .ck.ck-content img { max-width: 100%; height: auto; border-radius: 6px; } body.theme-chameleon .ck.ck-content .media iframe, body.theme-chameleon .ck.ck-content figure.media iframe { width: 100%; aspect-ratio: 16/9; max-width: 720px; border-radius: 6px; } /* CKE5 "Powered by CKEditor" 배지 — GPL 라이선스 의무 노출. CSS 로 숨기지 않음. * 배지가 본문 모서리에 자연스럽게 떠 있도록 z-index 만 보정. */ body.theme-chameleon .ck.ck-balloon-panel.ck-powered-by-balloon { z-index: 10; } /* ============================================================================ * v13 — 상단 GNB 드롭다운 안정화 (hover flicker / 클릭 불가 해소) * * 원인: * - madmin_header.php 의 $('.gnb-menu').mouseenter/mouseleave + slideDown/Up * 이 .gnb-menu-list 에 inline `display:none/block` 을 박아 CSS hover 상태와 * 충돌. 마우스가 부모(.gnb-menu) → 자식(.gnb-menu-list) 로 이동할 때 * slideUp 가 먼저 실행되며 닫혔다 열렸다 flicker. * - v1/v3 의 `.gnb-menu-list { top: 50px / 56px }` 가 누적되어 일부 환경에서 * 56px 헤더와 1~6px 의 hover gap 가능성. * * 처리: * 1) JS slideDown/Up 제거 (madmin_header.php) — 표시/숨김은 CSS only * 2) .gnb-menu-list 를 `visibility / opacity / transform / pointer-events` 4종 * 세트로 토글 (display:none 사용 안 함 → reflow flicker 없음) * 3) .gnb-menu:hover OR .gnb-menu.is-open 일 때 표시 * 4) .gnb-menu-list::before 로 부모-자식 사이 6px hover bridge 깔아 마우스 * 이동 시 hover 끊김 차단 * 5) z-index 3000 + position:absolute top:100% right:0 (margin-top:0) * * 스코프: body.theme-chameleon (모든 관리자 페이지). 다른 영역 무영향. * ============================================================================ */ body.theme-chameleon #rightCont .gnb .gnb-menu { position: relative !important; overflow: visible !important; /* v9 align-items:center 의 stretch overflow 차단 해제 */ } body.theme-chameleon #rightCont .gnb .gnb-menu .gnb-menu-list { display: block !important; /* slideDown 잔재 inline display 차단 */ position: absolute !important; top: 100% !important; /* 부모(.gnb-menu) 56px 바로 아래 */ left: 50% !important; /* 부모 버튼 중앙 기준 */ right: auto !important; transform: translateX(-50%); /* 중앙 정렬 (translateY 미사용 — flicker 회피) */ margin: 0 !important; min-width: 180px; padding: 6px 0; background: #fff; border: 1px solid #ebeaf2; border-radius: 10px; box-shadow: 0 8px 24px rgba(34,41,47,.12); overflow: hidden; z-index: 3000 !important; /* hidden state — display:none 대신 visibility 기반 (reflow 없음 → flicker 없음). * translateY 같은 transform 애니메이션은 사용 안 함 — 마우스 이동 중 dropdown 위치가 * 변하면 hover 영역도 같이 움직여 flicker 가 잠재. opacity 만 페이드. */ visibility: hidden; opacity: 0; pointer-events: none; transition: opacity .15s ease, visibility 0s linear .15s; } /* hover bridge — 부모(.gnb-menu) 와 dropdown 사이 10px 투명 영역을 dropdown 위로 * 깔아 마우스가 그 10px 를 지나가도 hover 끊기지 않게 함. */ body.theme-chameleon #rightCont .gnb .gnb-menu .gnb-menu-list::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 10px; background: transparent; pointer-events: auto; } /* hover / is-open / dropdown 자체 hover 시 표시 */ body.theme-chameleon #rightCont .gnb .gnb-menu:hover .gnb-menu-list, body.theme-chameleon #rightCont .gnb .gnb-menu.is-open .gnb-menu-list, body.theme-chameleon #rightCont .gnb .gnb-menu .gnb-menu-list:hover { visibility: visible; opacity: 1; pointer-events: auto; transition: opacity .15s ease, visibility 0s linear 0s; } /* 드롭다운 항목 — 클릭 영역 명확, transition 자연스럽게 */ body.theme-chameleon #rightCont .gnb .gnb-menu .gnb-menu-list .gnb-menu-item { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 18px; line-height: 1.4; border-top: 0; /* radius 10 컨테이너 안에서 구분선 없이 hover 만 */ cursor: pointer; color: #2c2c54; font-size: 13px; white-space: nowrap; transition: background-color .12s, color .12s; } body.theme-chameleon #rightCont .gnb .gnb-menu .gnb-menu-list .gnb-menu-item:hover { background: #f8f8fb; color: #7367f0; } body.theme-chameleon #rightCont .gnb .gnb-menu .gnb-menu-list .gnb-menu-item .square { color: #7367f0 !important; font-size: 8px; } /* ============================================================================ * v14 — 대시보드 좌우 정렬 (5열/3열 고정 + 공용 max-width 컨테이너) * * 원인: * - .stat_card { repeat(auto-fit, minmax(180px, 1fr)) } 와 * .dash_recent { repeat(auto-fit, minmax(320px, 1fr)) } 의 minmax 기준이 * 달라 1730px 이상 화면에서 1fr 트랙 폭이 두 grid 간 불일치. * - v10 .stat_card { padding: 8px 4px } 의 4px 수평 padding 이 stat_card * content edge 를 dash_recent 보다 4px 안쪽으로 들여 좌우 라인 어긋남. * - pageWrap max-width 1480 이 매우 넓은 화면에서 두 grid 모두 stretch 하나 * auto-fit 의 트랙 수 차이로 visual 폭 불일치. * * 처리: * - public/Madmin/index.php 의 대시보드 본문을
* 로 wrap. 이 컨테이너 하나가 폭/정렬 단일 출처. * - 두 grid 모두 width:100% 로 컨테이너 폭 그대로 사용 (좌측 정렬). * - 5열/3열 명시 고정 (repeat(5, 1fr) / repeat(3, 1fr)). * - stat_card 수평 padding 0 으로 dash_recent 와 좌우 edge 일치 (v10 의 8px 4px → * 8px 0 로 변경, 세로 glow 여유는 유지). * - 반응형: 1280px 이하 → 3열 / 2열, 768px 이하 → 1열. * * 스코프: body.theme-chameleon #pageContainer .dashboard-container. * dashboard-container 클래스는 index.php 에만 존재 → 다른 페이지 무영향. * ============================================================================ */ body.theme-chameleon #pageContainer .dashboard-container { width: 100%; max-width: 1440px; box-sizing: border-box; margin: 0; /* 좌측 정렬 (margin:auto 아님) */ } body.theme-chameleon #pageContainer .dashboard-container .stat_card { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 18px !important; padding: 8px 0 !important; /* glow 위/아래 여유 유지, 좌우 0 → dash_recent 와 edge 일치 */ margin: 0 0 18px !important; width: 100%; box-sizing: border-box; } body.theme-chameleon #pageContainer .dashboard-container .dash_recent { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 18px !important; padding: 0 !important; margin: 0 !important; width: 100%; box-sizing: border-box; } /* 반응형 — 좁은 화면 컬럼 수 단계 축소 */ @media (max-width: 1280px) { body.theme-chameleon #pageContainer .dashboard-container .stat_card { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } body.theme-chameleon #pageContainer .dashboard-container .dash_recent { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 768px) { body.theme-chameleon #pageContainer .dashboard-container .stat_card, body.theme-chameleon #pageContainer .dashboard-container .dash_recent { grid-template-columns: 1fr !important; } } /* ============================================================================ * v15 — 대시보드 상단 타이틀/breadcrumb 숨김 + 카드 영역 위로 끌어올림 * * 원칙: * - madmin_header.php 무수정 (전체 페이지 공통이라 건드리면 타 페이지 영향) * - 대시보드만 식별하는 단일 표식: pageWrap 안에 .dashboard-container 가 있는지 * - CSS :has() 로 dashboard 페이지에서만 .page-heading 숨김 + pageWrap padding-top * 축소. .dashboard-container 클래스는 index.php 에만 존재 → 다른 페이지 무영향. * * 브라우저: Chrome 105+ / Safari 15.4+ / Firefox 121+ 에서 :has() 지원. 관리자 도구 * 타깃 브라우저 범위로 충분. * ============================================================================ */ body.theme-chameleon #pageContainer .pageWrap:has(> .dashboard-container) .page-heading { display: none !important; } body.theme-chameleon #pageContainer .pageWrap:has(> .dashboard-container) { padding-top: 18px !important; /* 기존 28px → 18px (헤더 바로 아래 가깝게) */ } /* ============================================================================ * v16 — form-actions 하단 버튼 영역 최종 통일 (gap 16px + .left:empty 숨김) * * 원칙: * - v1~v15 누적된 `.form-actions .btn { margin:0 3px }` 등을 최종 override * - 모든 form-actions 는 `.left` / `.right` wrapper 사용 (v16 에서 4개 페이지 * 마크업도 통일됨: privacy / terms / password / site) * - 왼쪽 wrapper 가 비었거나 없으면 오른쪽 영역이 자연스럽게 우측 정렬 * ============================================================================ */ body.theme-chameleon #pageContainer .form-actions { display: flex !important; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 26px !important; background: #fff !important; border-top: 1px solid #ebe9f1 !important; border-radius: 0 0 12px 12px; } body.theme-chameleon #pageContainer .form-actions .left, body.theme-chameleon #pageContainer .form-actions .right { display: flex !important; align-items: center; gap: 16px !important; margin: 0 !important; } /* 왼쪽 그룹이 비었거나 자식 없으면 숨김 → 오른쪽 그룹이 우측 정렬 흐름 자연스럽게 */ body.theme-chameleon #pageContainer .form-actions .left:empty { display: none !important; } body.theme-chameleon #pageContainer .form-actions .right { margin-left: auto !important; } /* 누적 .btn margin 차단 — 어떤 위치/이전 룰의 margin 도 무효화 */ body.theme-chameleon #pageContainer .form-actions .btn { margin: 0 !important; } /* ============================================================================ * v17 — 좌측 메뉴 하단 "유지보수 요청" CTA + GNB hover 안정성 마감 * * 1) madmin_header.php 의 7번째 메뉴 그룹(support — 유지보수/개발요청) 을 제거하고 * 좌측 메뉴 하단에 .support-cta 단일 버튼을 별도 노출. cms.hd-group.co.kr 새 창 이동. * /Madmin/support/maintenance.php · /development.php 파일은 그대로 유지 (메뉴 노출만 제거). * 2) GNB hover 시 부모 메뉴 버튼의 width/height/padding 이 변하지 않게 강조 — 글자 색 * + background 만 변동 (v9 의 :hover background 그대로, v17 은 size lock 만 추가). * ============================================================================ */ /* 좌측 메뉴 flex column — 상단 logo/lnb, 하단 .support-cta 가 margin-top:auto 로 바닥 고정. * #leftMenu 는 v7 에서 이미 position:fixed; width:240px; height:100%; overflow-y:auto. * 여기에 display:flex; flex-direction:column 만 추가 — 기존 자식 정렬 무영향. */ body.theme-chameleon #leftMenu { display: flex !important; flex-direction: column !important; } body.theme-chameleon #leftMenu .logo, body.theme-chameleon #leftMenu .support-cta { flex: 0 0 auto; /* 고정 높이 — 줄어들지 않음 */ } body.theme-chameleon #leftMenu .lnb { flex: 1 1 auto; /* 가용 세로 공간 모두 차지 → CTA 가 바닥으로 밀려 내려감 */ /* 메뉴가 화면보다 길어지면 lnb 가 늘어나며 #leftMenu 의 overflow-y:auto 가 스크롤 처리 */ } /* 하단 CTA — Chameleon 보라→시안 gradient, 텍스트만(아이콘 없음) */ body.theme-chameleon #leftMenu .support-cta { margin: auto 14px 24px; /* margin-top:auto → 바닥 정렬, 좌우 14, 하단 24 */ flex-shrink: 0; } body.theme-chameleon #leftMenu .support-cta a { display: flex; align-items: center; justify-content: center; /* 텍스트 가운데 정렬 */ height: 42px; padding: 0 16px; border-radius: 10px; color: #fff !important; text-decoration: none; font-size: 13px; font-weight: 600; text-align: center; background: linear-gradient(118deg, #7367F0 0%, #6B7AF0 45%, #00CFE8 100%); background-image: linear-gradient(118deg, #7367F0 0%, #6B7AF0 45%, #00CFE8 100%); box-shadow: 0 8px 18px rgba(115,103,240,.25); transition: transform .18s ease, box-shadow .18s ease; } body.theme-chameleon #leftMenu .support-cta a:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(115,103,240,.32); color: #fff !important; } /* 아이콘 흔적 차단 — 마크업에서 제거했으나 향후 i/svg 가 잘못 들어와도 숨김 */ body.theme-chameleon #leftMenu .support-cta i, body.theme-chameleon #leftMenu .support-cta svg, body.theme-chameleon #leftMenu .support-cta .fa { display: none !important; } /* GNB hover 시 size lock — width/height/padding 변동 차단 */ body.theme-chameleon #rightCont .gnb .gnb-menu, body.theme-chameleon #rightCont .gnb .gnb-menu:hover { height: 56px !important; padding: 0 18px !important; /* v9 의 padding 과 동일, hover 에서도 유지 */ } /* ============================================================================ * v18 — 로그인 페이지 배경: easyBackground (파란 사각 파티클) → blur-motion-effect * * 적용: body.madmin-login 스코프만. 다른 관리자/프론트 무영향. * 마크업: login.php 안에
+ bg.png + 5개의 .blur-NNN.bm 점. * 동작: blurMotion.js 가 .bm 클래스 + class-encoded 파라미터 (blrng / blmove) 를 읽어 * blur radius / position 을 매 frame 변동시킴 (jQuery animate). * * 데모 원본 (index.html) 스타일을 본 페이지에 맞게 옮김: * - .login-motion-bg: 화면 전체 fixed inset:0, z-index 0, pointer-events none * - .blur-NNN: 색상 원형 + mix-blend-mode color-dodge (bg.png 위에서 컬러 누적) * - 로그인 박스(#wrap) 는 z-index 2 → 항상 위 * ============================================================================ */ body.madmin-login { min-height: 100vh; overflow: hidden; background: #3B54A4; /* bg.png 로딩 전/실패 시 fallback (기존 easyBackground baseColor 유지) */ margin: 0; } .login-motion-bg { position: fixed; inset: 0; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; pointer-events: none; overflow: hidden; background: #3B54A4; } .login-motion-bg .login-motion-bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* 모바일/좁은 화면에서도 cover */ display: block; } /* 5개 blur dot — 데모 index.html 의 색상/크기/위치 톤을 그대로 옮김 * (top/left 가 100% 이상/음수 → 화면 밖에서 출발해 blurMotion.js 가 움직임) */ .login-motion-bg .blur-001 { width: 100px; height: 100px; border-radius: 50px; background-color: #11a207; position: absolute; top: -30%; left: -20%; mix-blend-mode: color-dodge; } .login-motion-bg .blur-002 { width: 750px; height: 750px; border-radius: 300px; background-color: #0752a2; position: absolute; top: 130%; left: 130%; mix-blend-mode: color-dodge; } .login-motion-bg .blur-003 { width: 500px; height: 500px; border-radius: 200px; background-color: #07a21c; position: absolute; top: 130%; left: -30%; mix-blend-mode: color-dodge; } .login-motion-bg .blur-004 { width: 200px; height: 200px; border-radius: 200px; background-color: #a20773; position: absolute; top: -50%; left: 50%; mix-blend-mode: color-dodge; } .login-motion-bg .blur-005 { width: 200px; height: 200px; border-radius: 200px; background-color: #0748a2; position: absolute; top: 50%; left: -50%; mix-blend-mode: color-dodge; } /* 로그인 박스 — z-index 로 항상 배경 위 */ body.madmin-login #wrap { position: relative; z-index: 2; min-height: 100vh; } /* ============================================================================ * v19 — 로그인 페이지 톤 다운 + 로그인 박스 라운드/여백 보정 * * 적용: body.madmin-login 스코프. 다른 관리자/프론트 무영향. * * 변경 의도: * 1) v18 의 네온 톤(블루/퍼플/핑크/시안 + mix-blend-mode:color-dodge) 이 너무 형광 * → 채도/명도 ~20% 다운, 핑크/그린 dot 제거 (블루·퍼플·시안 톤만), blend mode 도 * soft-light/screen 으로 변경 + opacity 으로 한 번 더 가라앉힘 * 2) 로그인 박스 가독성: 중앙 vignette 으로 배경 대비 약화 * 3) 로그인 박스: radius 6 → 18, 그림자 부드럽게, 내부 padding 여유, 행간 안정 * 4) input 38px → 42px, 버튼 그라데이션 유지하되 shadow 톤 다운 * ============================================================================ */ /* (1) 배경 전체 톤 다운 — saturate 0.78, brightness 0.9 (~22% 감소) */ .login-motion-bg { filter: saturate(0.78) brightness(0.9); } .login-motion-bg .login-motion-bg-img { opacity: 0.85; /* bg.png 자체도 살짝 가라앉힘 */ } /* (2) blur dot 5개 — 컬러 톤 다운 + screen 블렌딩 + opacity 으로 형광 제거. * 블루/퍼플/시안 계열만 사용 (네온 그린 #11a207, 마젠타 #a20773 제거 → 블루 톤 대체) */ .login-motion-bg .blur-001 { background-color: #5a8dd9; /* 기존 #11a207(네온 그린) → 라이트 블루 */ mix-blend-mode: screen; opacity: 0.55; } .login-motion-bg .blur-002 { background-color: #4a6fc4; /* 기존 #0752a2(딥 블루) → 차분한 블루 */ mix-blend-mode: screen; opacity: 0.55; } .login-motion-bg .blur-003 { background-color: #6c7bd4; /* 기존 #07a21c(네온 그린) → 소프트 퍼플블루 */ mix-blend-mode: screen; opacity: 0.5; } .login-motion-bg .blur-004 { background-color: #8b7fd0; /* 기존 #a20773(마젠타) → 라벤더 */ mix-blend-mode: screen; opacity: 0.55; } .login-motion-bg .blur-005 { background-color: #56a8c4; /* 기존 #0748a2 → 부드러운 시안 */ mix-blend-mode: screen; opacity: 0.55; } /* (3) 중앙 vignette — 로그인 박스 주변 배경 대비를 낮춰 박스 가독성 ↑ */ .login-motion-bg::after { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse at center, rgba(20, 28, 64, 0.20) 0%, rgba(20, 28, 64, 0.35) 60%, rgba(15, 22, 50, 0.45) 100% ); pointer-events: none; } /* (4) 로그인 박스 — radius / shadow / padding 보정 */ .madmin-login #login_wrap { width: 520px; background: #fff; border-radius: 18px !important; box-shadow: 0 20px 50px rgba(0,0,0,.12), 0 4px 14px rgba(0,0,0,.06) !important; } .madmin-login #login_con { padding: 52px 56px 40px !important; /* 상하 padding 늘림 (40/30 → 52/40) */ } .madmin-login .login_logo_con { padding-top: 4px; padding-bottom: 4px; } .madmin-login .login_logo_con img { max-height: 56px; } .madmin-login .login_title_con { margin: 22px 0 32px !important; /* 18/28 → 22/32 더 여유 */ } .madmin-login .login_title_text { color: #2c2c54; font-size: 15px; font-weight: 600; letter-spacing: -.3px; } .madmin-login .login_err { border-radius: 8px; margin-bottom: 18px; } /* (5) input — 높이 42px, radius 8, focus 보라 glow (v9 유지) */ .madmin-login .login_ipnut_con { margin-bottom: 16px !important; } .madmin-login .login_ipnut { height: 42px; padding: 0 14px !important; border-radius: 8px !important; border: 1px solid #dfe5ec !important; background: #fff !important; font-size: 14px; color: #2c2c54; } /* (6) 버튼 — gradient 유지, shadow 톤 다운 */ body.madmin-login .login_btn { height: 46px; padding: 0 !important; border-radius: 12px !important; box-shadow: 0 6px 18px rgba(115,103,240,.22) !important; /* .32 → .22 */ font-weight: 600 !important; font-size: 14.5px; } body.madmin-login .login_btn:hover { box-shadow: 0 10px 24px rgba(115,103,240,.30) !important; /* .42 → .30 */ } .madmin-login .login_btn_con { margin: 24px 0 22px !important; } .madmin-login .login_intro_text_con { padding-top: 10px; } .madmin-login .login_intro_text { font-size: 12px; color: #b9b3ce; } /* ============================================================================ * v20 — 로그인 페이지 톤 재조정 (v19 너무 어두움 → 밝게 되돌림) + 박스 위치/쉐도우 * * 적용: body.madmin-login / .login-motion-bg 스코프. 다른 페이지 무영향. * * 변경 의도: * 1) v19 의 filter:saturate(0.78) brightness(0.9) + img opacity 0.85 가 과해서 * 네이비/퍼플이 답답 → saturate 0.9 / brightness 1.02 / img opacity 0.95 로 환원 * 2) blur dot opacity 0.5~0.55 → 0.65~0.75 (사용자 권장) * 3) vignette 톤도 살짝 약하게 * 4) 로그인 박스 translateY(-24px) 로 위로 올림 * 5) 박스 shadow 입체감 보강 (이중 layer) * ============================================================================ */ /* (1) 배경 톤 — 밝고 부드럽게 (사용자 권장값) */ .login-motion-bg { filter: saturate(0.9) brightness(1.02); } .login-motion-bg .login-motion-bg-img { opacity: 0.95; } /* (2) blur dot opacity 상향 — v19 의 0.5~0.55 → 0.65~0.75 * 컬러는 v19 의 블루/퍼플/시안 톤(형광 그린/핑크 미사용) 그대로 유지 */ .login-motion-bg .blur-001 { opacity: 0.70; } .login-motion-bg .blur-002 { opacity: 0.72; } .login-motion-bg .blur-003 { opacity: 0.65; } .login-motion-bg .blur-004 { opacity: 0.72; } .login-motion-bg .blur-005 { opacity: 0.70; } /* (3) vignette — 약하게 (v19 의 0.20~0.45 → 0.08~0.22) — 배경이 밝아진 만큼 dim 감소 */ .login-motion-bg::after { background: radial-gradient( ellipse at center, rgba(20, 28, 64, 0.08) 0%, rgba(20, 28, 64, 0.15) 60%, rgba(15, 22, 50, 0.22) 100% ); } /* (4) 로그인 박스 — 위로 24px 이동 (반응형 자연 유지: flex 중앙 정렬 + transform 만 추가) */ .madmin-login #login_wrap { transform: translateY(-24px); } /* (5) 박스 그림자 보강 — 부드러운 이중 layer 로 입체감 */ .madmin-login #login_wrap { box-shadow: 0 24px 70px rgba(15, 23, 42, 0.22), 0 8px 24px rgba(15, 23, 42, 0.12) !important; } /* ============================================================================ * v21 — blur dot 첫 페인트 visible + 라이트 반사감 보강 * * 원인 (사용자 보고 "2~3초 뒤 나타남"): * blurMotion.js 의 moveAnim() 이 시작 시 각 dot 의 top/left 를 random 10~100% * 목표로 10초 간(duration=10000) 선형 animate. 데모 원본 CSS 는 dot 초기 위치를 * 화면 밖 (-30%, -20%, 130%, 130% 등) 으로 두어 dot 이 슬라이드 인되며 등장. * 첫 페인트엔 보이지 않다가 1~3초 뒤부터 가장자리에 진입. * * 처리: 초기 top/left 를 viewport 안쪽 (10~70% 범위) 으로 override → 첫 페인트부터 * 5개 dot 모두 보임. blurMotion.js / blmove_10_100_10000 (속도 10초) 무수정. * * 추가: 큰 dot 2개는 color-dodge 로 라이트 반사감 ↑, 나머지는 screen + opacity 유지. * 적용: body.madmin-login / .login-motion-bg 스코프. 다른 페이지 무영향. * ============================================================================ */ /* (1) 초기 top/left override — 첫 페인트부터 5개 dot 모두 viewport 안 */ .login-motion-bg .blur-001 { top: 12%; left: 8%; } /* 좌상 */ .login-motion-bg .blur-002 { top: 55%; left: 60%; } /* 우하 큰 원 */ .login-motion-bg .blur-003 { top: 50%; left: 5%; } /* 좌하 큰 원 */ .login-motion-bg .blur-004 { top: 18%; left: 60%; } /* 우상 */ .login-motion-bg .blur-005 { top: 40%; left: 30%; } /* 중앙-좌 */ /* (2) 라이트 반사감 — 큰 dot 2개만 color-dodge (사용자 권장 .is-bright 패턴) */ .login-motion-bg .blur-002, .login-motion-bg .blur-003 { mix-blend-mode: color-dodge; opacity: 0.48; /* color-dodge 가 강하므로 opacity 낮춤 → 신선한 빛 반사 */ } /* (3) 작은 dot 3개는 screen 유지 + opacity 살짝 ↑ (v20 의 0.70~0.72 → 0.74~0.78) */ .login-motion-bg .blur-001 { opacity: 0.78; mix-blend-mode: screen; } .login-motion-bg .blur-004 { opacity: 0.74; mix-blend-mode: screen; } .login-motion-bg .blur-005 { opacity: 0.74; mix-blend-mode: screen; } /* (4) 배경 전체 saturate 살짝 ↑ — 반사감 보완 (brightness 는 v20 그대로 유지) */ .login-motion-bg { filter: saturate(1.0) brightness(1.02); /* v20: 0.9 → 1.0 (자연 채도) */ } /* ============================================================================ * v22 — 로그인 페이지 마감: dot 반사감 + 박스 glass-card + input/button 폴리시 * * 적용: body.madmin-login / .login-motion-bg 스코프. 다른 페이지 무영향. * * 기술 노트: * blurMotion.js 가 .css('filter', `blur(...) hue-rotate(...)`) 를 매 100ms 인라인 * 적용 → CSS 의 `filter: saturate/brightness` 는 dot 자체에 적용해도 100ms 마다 * 덮어쓰여 시각적으로 사라짐. 대신 box-shadow (플러그인이 건드리지 않음) 로 dot * 외곽에 부드러운 halo 를 더해 "라이트 반사감" 을 만든다. * ============================================================================ */ /* (1) dot 반사감 — box-shadow halo (plugin filter 와 충돌 없음) + opacity 미세 ↑ */ .login-motion-bg .blur-001 { opacity: 0.80; box-shadow: 0 0 60px 20px rgba(140, 175, 235, 0.45); } .login-motion-bg .blur-002 { /* 큰 블루 — bright layer */ opacity: 0.42; mix-blend-mode: color-dodge; box-shadow: 0 0 120px 40px rgba(110, 140, 220, 0.30); } .login-motion-bg .blur-003 { /* 큰 퍼플 — bright layer */ opacity: 0.42; mix-blend-mode: color-dodge; box-shadow: 0 0 100px 35px rgba(130, 110, 220, 0.28); } .login-motion-bg .blur-004 { /* 라벤더 — soft screen */ opacity: 0.78; mix-blend-mode: screen; box-shadow: 0 0 70px 22px rgba(180, 160, 230, 0.42); } .login-motion-bg .blur-005 { /* 시안 — soft screen */ opacity: 0.78; mix-blend-mode: screen; box-shadow: 0 0 80px 25px rgba(120, 200, 230, 0.45); } /* (2) 배경 전체 — 자연 채도 (v21 의 1.0 / 1.02 유지) */ .login-motion-bg { filter: saturate(0.98) brightness(1.02); } /* (3) 로그인 박스 — glass-card 느낌 (rgba 흰색 + 미세 backdrop-blur + 이중 shadow) */ .madmin-login #login_wrap { border-radius: 22px !important; background: rgba(255, 255, 255, 0.94) !important; -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border: 1px solid rgba(255, 255, 255, 0.72); box-shadow: 0 28px 70px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(36, 61, 140, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.65) !important; } /* (4) input — height 44, radius 10, 보라+시안 focus glow */ .madmin-login .login_ipnut { height: 44px !important; padding: 0 16px !important; border-radius: 10px !important; border: 1px solid #dfe5ec !important; background: #fff !important; color: #2c2c54; font-size: 14px; } .madmin-login .login_ipnut::placeholder { color: #b9b3ce; } .madmin-login .login_ipnut:focus { border-color: #7367f0 !important; box-shadow: 0 0 0 3px rgba(115, 103, 240, 0.14), 0 0 0 6px rgba(0, 207, 232, 0.06) !important; outline: none !important; } /* (5) 버튼 — gradient 유지 (v9), 보라+시안 hybrid shadow */ body.madmin-login .login_btn { height: 48px; border-radius: 12px !important; box-shadow: 0 8px 22px rgba(115, 103, 240, 0.24), 0 4px 12px rgba(0, 207, 232, 0.14) !important; } body.madmin-login .login_btn:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(115, 103, 240, 0.30), 0 6px 18px rgba(0, 207, 232, 0.18) !important; } /* ============================================================================ * v23 — 로그인 dot 반사감 보강 + 관리자 전체 Noto Sans KR 폰트 통일 * * 스코프: * - 폰트: body.theme-chameleon, body.madmin-login, #leftMenu, #rightCont, * #pageContainer, input/select/textarea/button/table, CKEditor 전체 * - 반사감: body.madmin-login / .login-motion-bg * - 프론트(/): 무영향 * * 기술 노트(v22 그대로): * blurMotion.js 가 .css('filter', 'blur() hue-rotate()') 를 매 100ms 인라인 갱신 → * dot 자체 filter 는 무력. opacity / mix-blend-mode / box-shadow halo 만 사용. * ============================================================================ */ /* ───── (A) 로그인 dot 반사감 보강 ───── * v22 box-shadow 보다 halo 를 더 넓고 밝게 + 두 번째 outer halo 로 깊이 추가. * 컬러 톤(블루/퍼플/시안)은 v22 유지, 형광 회피. */ /* 작은 dot — screen, opacity 0.82, halo 2단 */ .login-motion-bg .blur-001 { opacity: 0.82 !important; mix-blend-mode: screen; box-shadow: 0 0 90px 28px rgba(140, 175, 235, 0.50), 0 0 160px 60px rgba(115, 103, 240, 0.18) !important; } .login-motion-bg .blur-004 { opacity: 0.82 !important; mix-blend-mode: screen; box-shadow: 0 0 90px 28px rgba(180, 160, 230, 0.50), 0 0 160px 60px rgba(140, 110, 220, 0.18) !important; } .login-motion-bg .blur-005 { opacity: 0.82 !important; mix-blend-mode: screen; box-shadow: 0 0 100px 30px rgba(120, 200, 230, 0.52), 0 0 170px 65px rgba(0, 207, 232, 0.20) !important; } /* 큰 dot (bright layer) — color-dodge, opacity 0.42, halo 더 크고 white+시안 highlight */ .login-motion-bg .blur-002 { opacity: 0.45 !important; mix-blend-mode: color-dodge; box-shadow: 0 0 140px 50px rgba(255, 255, 255, 0.18), 0 0 200px 80px rgba(0, 207, 232, 0.26) !important; } .login-motion-bg .blur-003 { opacity: 0.45 !important; mix-blend-mode: color-dodge; box-shadow: 0 0 130px 45px rgba(255, 255, 255, 0.18), 0 0 200px 80px rgba(115, 103, 240, 0.26) !important; } /* ───── (B) 관리자 전체 Noto Sans KR 폰트 통일 ───── * 우선순위: Noto Sans KR → Pretendard → Apple SD Gothic Neo → Malgun Gothic → 폴백 */ body.theme-chameleon, body.theme-chameleon #leftMenu, body.theme-chameleon #rightCont, body.theme-chameleon #pageContainer, body.theme-chameleon #pageContainer input, body.theme-chameleon #pageContainer select, body.theme-chameleon #pageContainer textarea, body.theme-chameleon #pageContainer button, body.theme-chameleon #pageContainer table, body.theme-chameleon #pageContainer .btn, body.theme-chameleon #rightCont .gnb, body.theme-chameleon #rightCont .gnb .gnb-menu, body.theme-chameleon #leftMenu .lnb-menu, body.theme-chameleon #leftMenu .lnb-submenu-item, body.theme-chameleon #leftMenu .support-cta a { font-family: 'Noto Sans KR', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', Dotum, sans-serif !important; } /* 로그인 페이지도 동일 */ body.madmin-login, body.madmin-login input, body.madmin-login button, body.madmin-login .login_title_text, body.madmin-login .login_ipnut, body.madmin-login .login_btn, body.madmin-login .login_intro_text { font-family: 'Noto Sans KR', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', Dotum, sans-serif !important; } /* CKEditor 5 — toolbar / dropdown / content 모두 동일 폰트 */ body.theme-chameleon .ck, body.theme-chameleon .ck.ck-editor, body.theme-chameleon .ck.ck-toolbar, body.theme-chameleon .ck.ck-toolbar .ck-button, body.theme-chameleon .ck.ck-dropdown__panel, body.theme-chameleon .ck.ck-balloon-panel { font-family: 'Noto Sans KR', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', Dotum, sans-serif !important; } /* CKEditor 5 본문 편집 영역 — 사용자가 작성하는 콘텐츠 폰트 */ body.theme-chameleon .ck.ck-content, body.theme-chameleon .ck.ck-content p, body.theme-chameleon .ck.ck-content h1, body.theme-chameleon .ck.ck-content h2, body.theme-chameleon .ck.ck-content h3, body.theme-chameleon .ck.ck-content h4, body.theme-chameleon .ck.ck-content li, body.theme-chameleon .ck.ck-content td { font-family: 'Noto Sans KR', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', Dotum, sans-serif !important; } /* 폰트 교체로 line-height 가 어긋날 수 있는 영역 보정 (가벼운 line-height 조정) */ body.madmin-login .login_ipnut { line-height: 44px; } body.madmin-login .login_btn { line-height: 48px; } body.madmin-login .login_intro_text { line-height: 1.5; } /* ============================================================================ * v24 — 에비스 사이트 진단 대시보드 카드 (HD그룹 공통 Madmin) * * 노출 조건: EvisDiagnosisClient::fetch() 가 sane data 반환 시에만 partial 포함. * - 게이트 실패 시 DOM 에 .evis-diagnosis-card 자체가 출력되지 않음 → 이 CSS 는 * "출력될 때만" 적용. 그 외 페이지/상황엔 어떤 시각적 흔적도 없음. * * 디자인: Chameleon Admin 톤 — 흰 라운드 카드 + 보라→시안 포인트 + 부드러운 shadow. * 스코프: body.theme-chameleon #pageContainer .dashboard-container 안에 자연스럽게. * ============================================================================ */ body.theme-chameleon #pageContainer .evis-diagnosis-card { background: #fff; border-radius: 14px; box-shadow: 0 8px 28px rgba(34,41,47,.08); padding: 22px 26px; margin-top: 18px; width: 100%; box-sizing: border-box; border: 1px solid #ebe9f1; overflow: hidden; } /* 헤더 */ body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 14px; border-bottom: 1px solid #f1f0f7; margin-bottom: 18px; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-title { display: inline-flex; align-items: center; gap: 10px; color: #2c2c54; font-size: 15px; font-weight: 700; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-title .fa { color: #7367f0; font-size: 16px; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-checked { margin-left: 8px; color: #8a92a6; font-size: 12px; font-weight: 500; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-badge { display: inline-flex; align-items: center; padding: 5px 14px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(115,103,240,.10); color: #7367f0; } /* 상태 tone — badge / score ring 컬러 */ body.theme-chameleon #pageContainer .evis-diagnosis-card.evis-tone-good .evis-diagnosis-badge { background: rgba(40,199,111,.12); color: #28c76f; } body.theme-chameleon #pageContainer .evis-diagnosis-card.evis-tone-improve .evis-diagnosis-badge { background: rgba(115,103,240,.12); color: #7367f0; } body.theme-chameleon #pageContainer .evis-diagnosis-card.evis-tone-warning .evis-diagnosis-badge { background: rgba(255,159,67,.14); color: #ff9f43; } body.theme-chameleon #pageContainer .evis-diagnosis-card.evis-tone-critical .evis-diagnosis-badge { background: rgba(234,84,85,.14); color: #ea5455; } /* 본문 — 좌측 점수 원 / 우측 요약+항목 */ body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-body { display: grid; grid-template-columns: 180px 1fr; gap: 28px; align-items: start; } /* 종합 점수 원형 (conic-gradient 기반) */ body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-score { text-align: center; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-score-ring { --score: 0; width: 140px; height: 140px; border-radius: 50%; margin: 0 auto; display: flex; align-items: center; justify-content: center; flex-direction: column; background: conic-gradient(#7367f0 calc(var(--score) * 1%), #ebe9f1 0) border-box; position: relative; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-score-ring::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: #fff; box-shadow: inset 0 1px 3px rgba(34,41,47,.04); } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-score-num { position: relative; font-size: 34px; font-weight: 700; color: #2c2c54; line-height: 1; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-score-suffix { position: relative; font-size: 13px; color: #8a92a6; margin-top: 4px; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-score-cap { margin-top: 12px; color: #5e5873; font-size: 13px; font-weight: 600; } /* tone 별 ring 색상 */ body.theme-chameleon #pageContainer .evis-diagnosis-card.evis-tone-good .evis-diagnosis-score-ring { background: conic-gradient(#28c76f calc(var(--score) * 1%), #ebe9f1 0) border-box; } body.theme-chameleon #pageContainer .evis-diagnosis-card.evis-tone-warning .evis-diagnosis-score-ring { background: conic-gradient(#ff9f43 calc(var(--score) * 1%), #ebe9f1 0) border-box; } body.theme-chameleon #pageContainer .evis-diagnosis-card.evis-tone-critical .evis-diagnosis-score-ring { background: conic-gradient(#ea5455 calc(var(--score) * 1%), #ebe9f1 0) border-box; } /* 우측 요약 + 항목 리스트 */ body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-summary { margin: 0 0 16px; color: #2c2c54; font-size: 14px; line-height: 1.6; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-item { display: grid; grid-template-columns: 110px 1fr 130px; gap: 14px; align-items: center; font-size: 13px; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-item-name { color: #5e5873; font-weight: 600; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-item-bar { height: 8px; background: #f1f0f7; border-radius: 999px; overflow: hidden; display: block; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-item-bar-fill { display: block; height: 100%; background: linear-gradient(90deg, #7367f0 0%, #6b7af0 50%, #00cfe8 100%); border-radius: 999px; transition: width .25s ease; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-item.evis-tone-good .evis-diagnosis-item-bar-fill { background: linear-gradient(90deg, #28c76f, #48da89); } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-item.evis-tone-warning .evis-diagnosis-item-bar-fill { background: linear-gradient(90deg, #ff9f43, #ffc085); } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-item.evis-tone-critical .evis-diagnosis-item-bar-fill { background: linear-gradient(90deg, #ea5455, #ff7b7c); } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-item-meta { display: inline-flex; align-items: center; justify-content: flex-end; gap: 8px; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-item-score { color: #2c2c54; font-weight: 700; font-size: 13px; min-width: 24px; text-align: right; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-item-badge { padding: 3px 10px; border-radius: 999px; background: rgba(115,103,240,.10); color: #7367f0; font-size: 11px; font-weight: 600; min-width: 64px; text-align: center; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-item.evis-tone-good .evis-diagnosis-item-badge { background: rgba(40,199,111,.12); color: #28c76f; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-item.evis-tone-warning .evis-diagnosis-item-badge { background: rgba(255,159,67,.14); color: #ff9f43; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-item.evis-tone-critical .evis-diagnosis-item-badge { background: rgba(234,84,85,.14); color: #ea5455; } /* 풋터 CTA */ body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-foot { display: flex; gap: 12px; margin-top: 22px; padding-top: 18px; border-top: 1px solid #f1f0f7; justify-content: flex-end; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-cta { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 18px; border-radius: 10px; font-size: 13px; font-weight: 600; text-decoration: none; transition: transform .15s, box-shadow .15s; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-cta-primary { background: linear-gradient(118deg, #7367F0 0%, #6B7AF0 48%, #00CFE8 100%); color: #fff; box-shadow: 0 6px 16px rgba(115,103,240,.24); } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-cta-primary:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(115,103,240,.32); color: #fff; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-cta-default { background: #fff; color: #2c2c54; border: 1px solid #dfe5ec; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-cta-default:hover { background: #f8f8fb; border-color: #cfd6e4; transform: translateY(-1px); } /* 반응형 — 좁은 화면에서 점수 원이 위로, 요약은 아래로 */ @media (max-width: 900px) { body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-body { grid-template-columns: 1fr; gap: 18px; } body.theme-chameleon #pageContainer .evis-diagnosis-card .evis-diagnosis-item { grid-template-columns: 90px 1fr 100px; gap: 10px; } } /* ============================================================================ * ok02 v-menu — 좌측 메뉴 상태 정리 + 부드러운 전환 (ok03 기준 동일 적용) * .on : 현재 페이지 메뉴만 기존 그라데이션 강조 (이 블록에서 미override → 원본 유지) * .sel:not(.on) : 펼침 상태는 일반 메뉴와 100% 동일 (배경/글자/그림자 강조 제거) * :hover : 아주 약한 배경(rgba .06) + 글자 살짝 강조 + translateY(-1px) * active/hover 전환은 background-color/color/box-shadow/transform 0.18~0.22s ease. * 메뉴 구조/JS/폭 변경 없음, 프론트 무영향(#leftMenu 스코프). * ============================================================================ */ /* 펼침(open, 현재 페이지 아님) — 일반 메뉴와 동일하게 복귀 */ body.theme-chameleon #leftMenu .lnb .lnb-menu.sel:not(.on) { background: transparent !important; box-shadow: none !important; } body.theme-chameleon #leftMenu .lnb .lnb-menu.sel:not(.on) .left, body.theme-chameleon #leftMenu .lnb .lnb-menu.sel:not(.on) .left i, body.theme-chameleon #leftMenu .lnb .lnb-menu.sel:not(.on) .left span { color: #5e5873 !important; } body.theme-chameleon #leftMenu .lnb .lnb-menu.sel:not(.on) .right i { color: #b9b3ce !important; } /* hover (현재 페이지 아닌 메뉴 — 펼침 포함) */ body.theme-chameleon #leftMenu .lnb .lnb-menu:not(.on):hover { background: rgba(115,103,240,.06) !important; box-shadow: none !important; } body.theme-chameleon #leftMenu .lnb .lnb-menu:not(.on):hover .left i, body.theme-chameleon #leftMenu .lnb .lnb-menu:not(.on):hover .left span, body.theme-chameleon #leftMenu .lnb .lnb-menu:not(.on):hover .right i { color: #7367f0 !important; } /* active/hover 부드러운 전환 (CSS transition only) */ body.theme-chameleon #leftMenu .lnb .lnb-menu { transition: background-color .22s ease, color .18s ease, box-shadow .22s ease, transform .18s ease !important; } body.theme-chameleon #leftMenu .lnb .lnb-menu .left, body.theme-chameleon #leftMenu .lnb .lnb-menu .left i, body.theme-chameleon #leftMenu .lnb .lnb-menu .left span, body.theme-chameleon #leftMenu .lnb .lnb-menu .right i { transition: color .18s ease; } body.theme-chameleon #leftMenu .lnb .lnb-menu:not(.on):hover { transform: translateY(-1px); }