/* [주의] 이 파일에서는 [class*="…"] 같은 class 속성 부분일치 선택자를 쓰지 않는다. 이런 규칙이 하나라도 있으면 브라우저(Chrome)는 어떤 요소든 클래스가 바뀔 때마다 그 아래 전체 스타일을 다시 계산한다(규칙당 약 1ms × 요소 1만 개). 매물등록폼 초기화가 클래스를 수십 번 바꾸면서 1초 넘게 밀렸다. 대신 실제 클래스 이름을 :is(...) 로 나열한다. 새 클래스가 생기면 목록에 추가한다. */ /* ============================================================================ * admin_style_category.php — 카테고리형(디자인 타입, 스타일1) 전용 스타일 * ---------------------------------------------------------------------------- * /script/get/admin_style_category 로 서빙되어 admin_style 위에 오버레이된다. * dashboard_style_original 40~48 에서만 로드된다(admin_header.php 가드). * base 는 0(기본)으로 환산되므로 style 9 전용 footer CSS(!important)와 경쟁하지 않아 * 여기서는 !important 를 쓰지 않는다. 우선순위는 body.catx-on 접두 명세도로 확보한다. * 색상 팔레트는 클로드 디자인 시안(관리자용.dc.html, 다크, accent #4d8dff)에서 가져왔다. * accent 는 향후 홈페이지 대표컬러 설정과 연동 가능(현재는 시안 기본값 고정). * ==========================================================================*/ /* ---- 팔레트 (다크 기본) ---------------------------------------------------- */ body.catx-on{ --cx-accent:#4d8dff; --cx-accent-token: color-mix(in oklab, var(--cx-accent) 88%, #ffffff); --cx-accent-text: color-mix(in oklab, var(--cx-accent) 55%, #ffffff); --cx-brand: linear-gradient(140deg, var(--cx-accent), color-mix(in oklab, var(--cx-accent) 45%, #4d6dff)); --cx-page-bg: radial-gradient(1200px 600px at 80% -10%, color-mix(in oklab, var(--cx-accent) 12%, #1b2636) 0%, color-mix(in oklab, var(--cx-accent) 5%, #121a26) 60%); --cx-page-solid: color-mix(in oklab, var(--cx-accent) 5%, #161f2c); --cx-header: color-mix(in oklab, var(--cx-accent) 7%, #1c2634); --cx-sidebar: linear-gradient(180deg, color-mix(in oklab, var(--cx-accent) 8%, #212c3c), color-mix(in oklab, var(--cx-accent) 4%, #1a2431)); --cx-card: linear-gradient(160deg, color-mix(in oklab, var(--cx-accent) 9%, #26323f), color-mix(in oklab, var(--cx-accent) 4%, #202a37)); --cx-panel: color-mix(in oklab, var(--cx-accent) 6%, #232e3c); --cx-chip: color-mix(in oklab, var(--cx-accent) 7%, #2a3644); --cx-row: color-mix(in oklab, var(--cx-accent) 7%, #2e3a49); --cx-track: color-mix(in oklab, var(--cx-accent) 10%, #455465); --cx-line: rgba(190,214,240,.20); --cx-line2: rgba(190,214,240,.32); --cx-line-soft: rgba(190,214,240,.13); --cx-hover-bg: color-mix(in oklab, var(--cx-accent) 20%, transparent); --cx-hover-line: color-mix(in oklab, var(--cx-accent) 62%, transparent); --cx-home-bg: linear-gradient(100deg, color-mix(in oklab, var(--cx-accent) 32%, transparent), color-mix(in oklab, var(--cx-accent) 14%, transparent)); --cx-home-line: color-mix(in oklab, var(--cx-accent) 52%, transparent); --cx-shadow: 0 6px 18px rgba(0,0,0,.35); --cx-text:#eef4fb; --cx-strong:#ffffff; --cx-body:#c8d5e4; --cx-sub:#9fb0c4; --cx-sub2:#8698ae; --cx-red:#ff8496; --cx-green:#5fd99a; --cx-violet:#bda4ff; --cx-indigo:#7f9cff; --cx-amber:#ffc266; --cx-dash:#5a6d82; /* 대시보드 아이콘 배지용 비비드(밝은) 팔레트 — 라이트/다크 동일 값(밝은 원색) */ --cx-red-v:#ff5b6b; --cx-amber-v:#ffa32e; --cx-indigo-v:#5b7cff; --cx-violet-v:#9b7bff; --cx-accent-v:#4d8dff; --cx-green-v:#22c07a; --cx-topbar-h:68px; --cx-sidebar-w:250px; } /* ---- 팔레트 (라이트 토글) -------------------------------------------------- */ body.catx-on.catx-light{ --cx-accent-token: color-mix(in oklab, var(--cx-accent) 94%, #1d3350); --cx-accent-text: color-mix(in oklab, var(--cx-accent) 66%, #0b1728); --cx-page-bg: radial-gradient(1200px 600px at 80% -10%, color-mix(in oklab, var(--cx-accent) 9%, #d4dde9) 0%, color-mix(in oklab, var(--cx-accent) 4%, #dfe5ee) 60%); --cx-page-solid: color-mix(in oklab, var(--cx-accent) 3%, #dfe5ee); --cx-header:#ffffff; --cx-sidebar: #ffffff; /* 시안: 사이드바는 순백(페이지 회색 배경과 대비되어 밝게 도드라짐) */ --cx-card:#ffffff; --cx-panel:#ffffff; --cx-chip:#ffffff; --cx-row: color-mix(in oklab, var(--cx-accent) 5%, #eef3f9); --cx-track: color-mix(in oklab, var(--cx-accent) 10%, #c6d2e0); --cx-line: rgba(20,45,75,.22); --cx-line2: rgba(20,45,75,.32); --cx-line-soft: rgba(20,45,75,.13); --cx-hover-bg: color-mix(in oklab, var(--cx-accent) 16%, transparent); --cx-shadow: 0 2px 8px rgba(16,40,70,.10); --cx-text:#0d1a28; --cx-strong:#05101c; --cx-body:#37485e; --cx-sub:#4d5f76; --cx-sub2:#5b6d84; --cx-red:#c0223c; --cx-green:#0b7a48; --cx-violet:#5a37c7; --cx-indigo:#2340c9; --cx-amber:#9a5a00; --cx-dash:#9aabbe; --cx-red-v:#ff5b6b; --cx-amber-v:#ffa32e; --cx-indigo-v:#5b7cff; --cx-violet-v:#9b7bff; --cx-accent-v:#4d8dff; --cx-green-v:#22c07a; } /* ---- 페이지 바탕 ----------------------------------------------------------- */ body.catx-on{ background: var(--cx-page-solid); color: var(--cx-text); } body.catx-on #admin_wrap{ background: var(--cx-page-solid); margin-left: var(--cx-sidebar-w); padding-top: var(--cx-topbar-h); min-height: 100vh; color: var(--cx-text); } /* ============================ 상단 정보바 =================================== */ body.catx-on .catx-topbar{ position: fixed; top:0; left:0; right:0; height: var(--cx-topbar-h); display:flex; align-items:center; gap:14px; padding:0 clamp(12px,2vw,24px) 0 12px; background: var(--cx-header); border-bottom:1px solid var(--cx-line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); z-index:30050; color: var(--cx-text); font-family:'Apple SD Gothic Neo','NotoSansKR','NanumBarunGothic','nanum gothic','나눔고딕','apple gothic','맑은 고딕','굴림',sans-serif; box-sizing:border-box; } body.catx-on .catx-topbar *{ box-sizing:border-box; } body.catx-on .catx-tb-left{ display:flex; align-items:center; gap:12px; flex-shrink:1; min-width:0; overflow:visible; } body.catx-on .catx-spacer{ flex:1; min-width:8px; } body.catx-on .catx-navtoggle, body.catx-on .catx-iconbtn{ width:36px; height:36px; flex-shrink:0; display:flex; align-items:center; justify-content:center; border-radius:11px; background: var(--cx-chip); border:1px solid var(--cx-line2); color: var(--cx-body); cursor:pointer; transition:border-color .15s ease, color .15s ease, background .15s ease, transform .15s ease; } body.catx-on .catx-navtoggle:hover, body.catx-on .catx-iconbtn:hover{ border-color: var(--cx-hover-line); color: var(--cx-accent-text); background: var(--cx-hover-bg); transform: translateY(-1px); } body.catx-on .catx-brand{ display:flex; flex-direction:column; line-height:1.15; white-space:nowrap; cursor:pointer; min-width:0; overflow:hidden; } body.catx-on .catx-brand-name, body.catx-on .catx-brand-sub{ overflow:hidden; text-overflow:clip; max-width:100%; } body.catx-on .catx-brand-name{ font-size:15px; font-weight:700; letter-spacing:-.01em; color: var(--cx-strong); } body.catx-on .catx-brand-sub{ margin-top:2px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-10, 10px); color: var(--cx-sub2); letter-spacing:.14em; } body.catx-on .catx-sysinfo{ display:grid; grid-template-columns:auto auto; align-items:center; gap:4px 20px; padding:7px 14px; border-radius:11px; background: var(--cx-chip); border:1px solid var(--cx-line); font-size:var(--dash-font-11, 11px); white-space:nowrap; min-width:0; flex-shrink:1; } body.catx-on .catx-sys-item{ display:flex; align-items:center; gap:6px; color: var(--cx-sub); } body.catx-on .catx-sys-item svg{ color: var(--cx-accent-token); } body.catx-on .catx-sys-label{ color: var(--cx-sub); } body.catx-on .catx-sys-value{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color: var(--cx-strong); } body.catx-on .catx-tb-right{ display:flex; align-items:center; gap:10px; flex-shrink:0; } body.catx-on .catx-live{ display:flex; align-items:center; gap:8px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-11, 11px); color: var(--cx-sub); white-space:nowrap; } body.catx-on .catx-live-dot{ width:6px; height:6px; border-radius:50%; background: var(--cx-accent-token); animation: catxPulse 1.8s ease-in-out infinite; } body.catx-on .catx-live-date{ color: var(--cx-body); } @keyframes catxPulse{ 0%,100%{ opacity:1; transform:scale(1);} 50%{ opacity:.35; transform:scale(.75);} } body.catx-on .catx-tb-divider{ width:1px; height:22px; background: var(--cx-line2); } /* 라벨 버튼(아이콘+문구): 다크모드/홈페이지/지도 */ body.catx-on .catx-labelbtn{ width:auto; padding:0 12px; gap:7px; } /* 공통 헤더 바로가기: 채운 배경 위에 아이콘·문구를 흰색으로 표시 */ body.catx-on .catx-iconbtn.catx-tb-home{border-color:#3b82f6!important;background:#3b82f6!important;color:#fff!important;} body.catx-on .catx-iconbtn.catx-tb-home svg{color:#fff!important;} body.catx-on .catx-iconbtn.catx-tb-map{border-color:#10a174!important;background:#10a174!important;color:#fff!important;} body.catx-on .catx-iconbtn.catx-tb-map svg{color:#fff!important;} body.catx-on .catx-iconbtn.catx-tb-home:hover{border-color:#2563eb!important;background:#2563eb!important;color:#fff!important;} body.catx-on .catx-iconbtn.catx-tb-map:hover{border-color:#059669!important;background:#059669!important;color:#fff!important;} body.catx-on .catx-btn-label{ font-size:var(--dash-font-12, 12px); font-weight:500; white-space:nowrap; color:inherit; line-height:1; } body.catx-on .catx-tb-home .catx-btn-label, body.catx-on .catx-tb-map .catx-btn-label{ font-weight:700; } /* 테마 버튼 문구: 다크=다크모드 / 라이트=라이트모드 (아이콘과 동일 규칙으로 토글) */ body.catx-on .catx-lbl-light{ display:none; } body.catx-on .catx-lbl-dark{ display:inline; } body.catx-on.catx-light .catx-lbl-light{ display:inline; } body.catx-on.catx-light .catx-lbl-dark{ display:none; } /* 좁은 폭에선 문구 숨겨 아이콘 전용으로(상단바 넘침 방지) */ @media (max-width:1240px){ body.catx-on .catx-btn-label{ display:none; } body.catx-on .catx-theme-toggle .catx-lbl-dark, body.catx-on.catx-light .catx-theme-toggle .catx-lbl-light{ display:none; } body.catx-on .catx-labelbtn{ width:36px; padding:0; } } /* 테마 토글 아이콘 표시 전환 */ body.catx-on .catx-theme-toggle .catx-ico-sun{ display:none; } body.catx-on .catx-theme-toggle .catx-ico-moon{ display:block; } body.catx-on.catx-light .catx-theme-toggle .catx-ico-sun{ display:block; } body.catx-on.catx-light .catx-theme-toggle .catx-ico-moon{ display:none; } /* 계정 드롭다운 */ body.catx-on .catx-acct{ position:relative; } body.catx-on .catx-acct-btn{ display:flex; align-items:center; gap:10px; padding:5px 12px 5px 6px; border-radius:12px; background: var(--cx-chip); border:1px solid var(--cx-line); cursor:pointer; transition:border-color .15s ease, background .15s ease, transform .15s ease; } body.catx-on .catx-acct-btn:hover{ border-color: var(--cx-hover-line); background: var(--cx-hover-bg); transform: translateY(-1px); } body.catx-on .catx-acct-avatar{ width:30px; height:30px; border-radius:10px; overflow:hidden; flex-shrink:0; background: var(--cx-track); display:flex; align-items:center; justify-content:center; } body.catx-on .catx-acct-avatar img{ width:100%; height:100%; object-fit:cover; } body.catx-on .catx-acct-name{ display:flex; align-items:baseline; gap:5px; font-size:var(--dash-font-12_5, 12.5px); font-weight:600; color: var(--cx-strong); white-space:nowrap; } body.catx-on .catx-acct-role{ font-size:var(--dash-font-11_5, 11.5px); font-weight:400; color: var(--cx-body); } body.catx-on .catx-acct-caret{ width:6px; height:6px; border-right:1.5px solid var(--cx-sub2); border-bottom:1.5px solid var(--cx-sub2); transform:rotate(45deg) translateY(-2px); transition:transform .15s ease; } body.catx-on .catx-acct.open .catx-acct-caret{ transform:rotate(-135deg) translateY(-1px); } body.catx-on .catx-acct-menu{ position:absolute; top:calc(100% + 8px); right:0; z-index:30060; width:264px; display:none; border:1px solid var(--cx-line2); border-radius:14px; background: var(--cx-panel); box-shadow:0 18px 44px rgba(4,8,14,.4); overflow:hidden; } body.catx-on .catx-acct.open .catx-acct-menu{ display:block; } body.catx-on .catx-acct-fields{ display:grid; grid-template-columns:auto 1fr; gap:9px 14px; padding:14px 16px; } body.catx-on .catx-af-label{ font-size:var(--dash-font-11_5, 11.5px); color: var(--cx-accent-text); } body.catx-on .catx-af-value{ font-size:var(--dash-font-11_5, 11.5px); color: var(--cx-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.catx-on .catx-acct-sep{ height:1px; background: var(--cx-line); } body.catx-on .catx-acct-action{ display:flex; align-items:center; gap:10px; margin:1px 6px; padding:9px 10px; border-radius:9px; font-size:var(--dash-font-12_5, 12.5px); color: var(--cx-text); cursor:pointer; text-decoration:none; } body.catx-on .catx-acct-action:first-of-type{ margin-top:6px; } body.catx-on .catx-acct-action:last-of-type{ margin-bottom:6px; } body.catx-on .catx-acct-action:hover{ background: var(--cx-hover-bg); } body.catx-on .catx-acct-logout{ color: var(--cx-red); } body.catx-on .catx-acct-logout svg{ color: var(--cx-red); } /* ================= 스마트 알림 — 상단바 벨 버튼만 ========================== * 패널(.alarm_list_box / .catx-notifbox) 재스타일은 제거했다(요청: 알림 패널은 * 모든 대시보드에서 공통 스타일 사용). 여기 남은 건 catx 상단바 고유 요소인 * 벨 버튼·개수 배지뿐이며, 패널 모양에는 관여하지 않는다. */ body.catx-on .catx-bell{ position:relative; } body.catx-on .catx-bell.is-on{ border-color:var(--cx-hover-line); background:var(--cx-hover-bg); color:var(--cx-accent-text); } body.catx-on .catx-bell-badge{ position:absolute; top:-4px; right:-4px; min-width:16px; height:16px; padding:0 4px; border-radius:8px; background:#e0568a; color:#fff; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-9_5, 9.5px); line-height:1; display:flex; align-items:center; justify-content:center; border:2px solid var(--cx-header); } body.catx-on .catx-notif-settings{ display:none; } @media (min-width:993px){ body.catx-on .catx-notif-settings.is-enabled{ height:36px; padding:0 12px; display:flex; align-items:center; justify-content:center; gap:6px; flex-shrink:0; border:1px solid #d9dee7; border-radius:11px; background:#f1f3f5; color:#475569; font-family:inherit; font-size:var(--dash-font-12, 12px); font-weight:700; white-space:nowrap; cursor:pointer; transition:border-color .15s ease,background .15s ease,color .15s ease,transform .15s ease; } body.catx-on .catx-notif-settings:hover{ border-color:#cbd5e1; background:#e5e7eb; color:#1f2937; transform:translateY(-1px); } body.catx-on .catx-notif-settings-ico{ flex:0 0 auto; font-size:16px; line-height:1; } } @media (min-width:993px) and (max-width:1240px){ body.catx-on .catx-notif-settings{ width:36px; padding:0; } body.catx-on .catx-notif-settings-label{ display:none; } } /* 별도 토스트(새 알림) 는 카테고리에서 미사용 */ body.catx-on #admin_wrap header.style_admin_category .new_alarm_box{ display:none; } /* ============================ 좌측 사이드바 ================================= */ body.catx-on #admin_wrap header.style_admin_category{ position:fixed; top: var(--cx-topbar-h); left:0; width: var(--cx-sidebar-w); min-width: var(--cx-sidebar-w); height: calc(100vh - var(--cx-topbar-h)); margin:0; padding:0; background: var(--cx-sidebar); border-right:1px solid var(--cx-line); box-shadow:none; z-index:30000; overflow:hidden; font-family:'Apple SD Gothic Neo','NotoSansKR','NanumBarunGothic','nanum gothic','나눔고딕','apple gothic','맑은 고딕','굴림',sans-serif; transition: transform .18s ease; } /* 상단 브랜드(.logo_top) 및 기존 모바일 헤더는 catx topbar 로 대체 → 숨김. * admin_header.css 의 .menu-trigger 가 모바일에서 검정 배경과 높은 z-index 로 * 표시되어 iOS 새로고침 뒤 catx topbar 위를 덮는 문제를 함께 막는다. */ body.catx-on #admin_wrap header.style_admin_category .nav_open_btn, body.catx-on #admin_wrap .admin9_mobile_menu_btn, body.catx-on #admin_wrap #hamburger_icon{ display:none !important; } @media (max-width:992px){ body.catx-on #admin_wrap #hamburger_manu_box.admin9_mobile_header{ display:none !important; } } /* logo_top: 원본이 position:fixed·z-index:1002·display:block !important 라, 모달로 topbar z-index가 내려가면 위로 튀어나와 '헤더 두 개' 로 보임 → !important 로 확실히 숨김 */ body.catx-on #admin_wrap header.style_admin_category .logo_top, body.catx-on #admin_wrap header.style_admin_category .logo.logo_top, body.catx-on #admin_wrap header.style_admin_09 .logo.logo_top{ display:none !important; } body.catx-on #admin_wrap header.style_admin_category .logo_btm{ position:static; width:100%; height:100%; display:flex; flex-direction:column; margin:0; padding:12px 10px; background:transparent; overflow-y:auto; overflow-x:hidden; } body.catx-on #admin_wrap header.style_admin_category .logo_btm::-webkit-scrollbar{ width:7px; } body.catx-on #admin_wrap header.style_admin_category .logo_btm::-webkit-scrollbar-thumb{ background: var(--cx-line2); border-radius:7px; } /* 유저 박스: 카테고리는 계정정보를 상단바 계정 드롭다운으로 옮겼으므로 사이드바 유저박스는 숨김. * (내부 .alarm_list_box 는 JS(178줄)가 로드 시 body 로 이동시키므로 알림벨엔 영향 없음) */ body.catx-on #admin_wrap header.style_admin_category .admin_user_box{ display:none !important; } body.catx-on #admin_wrap header.style_admin_category .admin_user_box .img_box{ width:38px; height:38px; border-radius:11px; overflow:hidden; } body.catx-on #admin_wrap header.style_admin_category .admin_user_box .img_box img{ width:100%; height:100%; object-fit:cover; } body.catx-on #admin_wrap header.style_admin_category .admin_user_box .img_cnt_top span, body.catx-on #admin_wrap header.style_admin_category .admin_user_box .img_cnt_btm span{ color: var(--cx-sub); } body.catx-on #admin_wrap header.style_admin_category .admin_user_box .img_cnt_mid span{ color: var(--cx-strong); font-weight:600; } body.catx-on #admin_wrap header.style_admin_category .admin_user_box .user_btn{ display:inline-flex; align-items:center; gap:6px; padding:7px 10px; margin:6px 4px 0 0; border-radius:9px; background: var(--cx-chip); border:1px solid var(--cx-line2); color: var(--cx-body); font-size:var(--dash-font-12, 12px); cursor:pointer; } body.catx-on #admin_wrap header.style_admin_category .admin_user_box .user_btn:hover{ border-color: var(--cx-hover-line); color: var(--cx-strong); } body.catx-on #admin_wrap header.style_admin_category .admin_user_box .logout_btn i{ color: var(--cx-red); } /* ------------------------------ 메뉴 (시안 구조) --------------------------- */ body.catx-on #admin_wrap header.style_admin_category .nav_view_box{ width:100%; flex:1; min-height:0; display:block; background:transparent; overflow:visible; } body.catx-on #admin_wrap header.style_admin_category .admin_nav{ width:100%; background:transparent; } body.catx-on .catx-nav{ display:flex; flex-direction:column; width:100%; } /* 관리자 홈 */ body.catx-on .catx-home{ display:flex; align-items:center; gap:9px; margin:0 0 14px; padding:10px 18px 10px 19px; border-radius:12px; background:transparent; border:1px solid transparent; text-decoration:none; transition:background .12s; } body.catx-on .catx-home:hover{ background:var(--cx-hover-bg); } body.catx-on .catx-home.is-active{ background:var(--cx-home-bg); border-color:var(--cx-home-line); } body.catx-on .catx-home.is-active .catx-home-ico{ color:var(--cx-accent-token); } body.catx-on .catx-home-ico{ display:inline-flex; align-items:center; justify-content:center; color:var(--cx-body); } body.catx-on .catx-home-txt{ font-size:13.5px; font-weight:400; color:var(--cx-strong); white-space:nowrap; } body.catx-on .catx-home.is-active .catx-home-txt{ font-weight:700; } /* 그룹 */ body.catx-on .catx-group{ margin-bottom:14px; } /* 관리자 홈과 첫 그룹, 1차 그룹 사이에 같은 구분선을 둔다. */ body.catx-on .catx-home + .catx-group, body.catx-on .catx-group + .catx-group{ padding-top:14px; position:relative; } body.catx-on .catx-home + .catx-group::before, body.catx-on .catx-group + .catx-group::before{ content:''; position:absolute; top:0; left:10px; right:10px; border-top:1px solid var(--cx-line2); } /* 접힘(아이콘 레일) 상태: 그룹 구분선 숨김 + 구분선용 padding-top 제거(아이콘 간격 균일) */ body.catx-on.catx-nav-collapsed .catx-home + .catx-group::before, body.catx-on.catx-nav-collapsed .catx-group + .catx-group::before{ display:none; } body.catx-on.catx-nav-collapsed .catx-home + .catx-group, body.catx-on.catx-nav-collapsed .catx-group + .catx-group{ padding-top:0; } body.catx-on .catx-group-head{ display:flex; align-items:center; gap:8px; padding:6px 10px; cursor:pointer; user-select:none; border-radius:9px; transition:background .12s; } body.catx-on .catx-group-head:hover{ background:var(--cx-hover-bg); } body.catx-on .catx-group-head:hover .catx-group-title{ color:var(--cx-strong); } body.catx-on .catx-group-code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-9_5, 9.5px); letter-spacing:.16em; } /* 그룹 접기 캐럿(우측) + 접힘 시 메뉴 숨김 */ body.catx-on .catx-group-caret{ margin-left:auto; width:7px; height:7px; border-right:1.5px solid var(--cx-sub2); border-bottom:1.5px solid var(--cx-sub2); transform:rotate(45deg); transition:transform .15s; flex-shrink:0; } body.catx-on .catx-group.is-collapsed .catx-group-caret{ transform:rotate(-45deg); } body.catx-on:not(.catx-nav-collapsed) .catx-group.is-collapsed .catx-menu{ display:none; } body.catx-on:not(.catx-nav-collapsed) .catx-group.is-collapsed{ margin-bottom:6px; } /* [사용자 요청] CORE(중개업무)/OPS(운영관리)/WORK(업무지원) 은 접기 금지 = 항상 열림 + caret 제거. is-collapsed 가 붙어도 하위메뉴를 항상 노출(279행 override), caret 숨김, 헤드 커서 기본. SITE/CONF 는 그대로. */ body.catx-on:not(.catx-nav-collapsed) .catx-group[data-catx-group="CORE"].is-collapsed .catx-menu, body.catx-on:not(.catx-nav-collapsed) .catx-group[data-catx-group="OPS"].is-collapsed .catx-menu, body.catx-on:not(.catx-nav-collapsed) .catx-group[data-catx-group="WORK"].is-collapsed .catx-menu{ display:block; } body.catx-on .catx-group[data-catx-group="CORE"] .catx-group-caret, body.catx-on .catx-group[data-catx-group="OPS"] .catx-group-caret, body.catx-on .catx-group[data-catx-group="WORK"] .catx-group-caret{ display:none; } body.catx-on .catx-group[data-catx-group="CORE"] .catx-group-head, body.catx-on .catx-group[data-catx-group="OPS"] .catx-group-head, body.catx-on .catx-group[data-catx-group="WORK"] .catx-group-head{ cursor:default; } /* [사용자 요청] 라이트모드만 사용 → 다크/라이트 전환 버튼 숨김 */ body.catx-on .catx-theme-toggle{ display:none !important; } body.catx-on .catx-group-title{ font-size:var(--dash-font-11, 11px); font-weight:700; color:var(--cx-strong); white-space:nowrap; } /* 메뉴 항목 (1차) */ body.catx-on .catx-menu{ margin:0 0 2px; } body.catx-on .catx-menu-row{ display:flex; align-items:center; gap:9px; min-height:38px; padding:8px 18px 8px 20px; border-radius:10px; color:var(--cx-text); font-size:14px; font-weight:600; text-decoration:none; cursor:pointer; transition:background .12s, color .12s; } body.catx-on .catx-menu-row:hover{ background:var(--cx-hover-bg); color:var(--cx-strong); } body.catx-on .catx-menu.is-open > .catx-menu-row, body.catx-on .catx-menu.is-active > .catx-menu-row{ background:var(--cx-hover-bg); color:var(--cx-strong); font-weight:700; } body.catx-on .catx-mi{ display:flex; flex-shrink:0; color:var(--cx-sub); } body.catx-on .catx-menu-row:hover .catx-mi, body.catx-on .catx-menu.is-open > .catx-menu-row .catx-mi, body.catx-on .catx-menu.is-active > .catx-menu-row .catx-mi{ color:var(--cx-accent-token); } body.catx-on .catx-mn{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.catx-on .catx-mc{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-9_5, 9.5px); color:var(--cx-sub2); flex-shrink:0; } /* 알림 뱃지 (기존 헤더 방식) */ body.catx-on .catx-badge{ min-width:17px; height:17px; padding:0 5px; border-radius:9px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-10, 10px); font-weight:600; line-height:17px; text-align:center; color:#fff; flex-shrink:0; } body.catx-on .catx-badge-red{ background:#e0568a; } body.catx-on .catx-badge-green{ background:#22b07d; } body.catx-on .catx-badge-indigo{ background:#5b6bff; } body.catx-on .catx-badge-amber{ background:#e0870f; } body.catx-on .catx-leaf-txt{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.catx-on .catx-ca{ width:6px; height:6px; border-right:1.5px solid var(--cx-sub2); border-bottom:1.5px solid var(--cx-sub2); transform:rotate(45deg); transition:transform .15s; flex-shrink:0; margin-left:2px; } body.catx-on .catx-menu.is-open > .catx-menu-row .catx-ca{ transform:rotate(-135deg); border-color:var(--cx-accent-token); } /* 서브메뉴 */ body.catx-on .catx-sub{ display:none; margin:2px 0 8px 24px; padding-left:12px; border-left:1px solid var(--cx-line2); } body.catx-on .catx-menu.is-open > .catx-sub{ display:block; } body.catx-on .catx-leaf{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:8px; font-size:13px; color:var(--cx-body); text-decoration:none; cursor:pointer; transition:background .12s, color .12s; } body.catx-on .catx-leaf:hover{ background:var(--cx-hover-bg); color:var(--cx-strong); } body.catx-on .catx-leaf.is-active{ background:var(--cx-hover-bg); color:var(--cx-strong); font-weight:700; } body.catx-on .catx-dash{ width:5px; height:1px; background:var(--cx-dash,#5a6d82); flex-shrink:0; } body.catx-on .catx-leaf.is-active .catx-dash{ background:var(--cx-accent-token); } body.catx-on .catx-leaf.catx-todo{ color:var(--cx-sub2); opacity:.65; } /* Light sidebar submenu labels: keep category accents and dark palette unchanged. */ body.catx-on.catx-light .catx-sub .catx-leaf, body.catx-on.catx-light .catx-sub .catx-sg-title{ color:#000; } body.catx-on .catx-empty{ display:block; padding:6px 8px; font-size:var(--dash-font-11, 11px); color:var(--cx-sub2); } /* 서브그룹 */ body.catx-on .catx-sg{ margin:6px 0 8px; } body.catx-on .catx-sg-title{ display:flex; align-items:center; gap:6px; padding:0 8px 5px; font-size:var(--dash-font-11_5, 11.5px); color:var(--cx-sub); } body.catx-on .catx-sg-dot{ width:3px; height:10px; border-radius:2px; flex-shrink:0; } body.catx-on .catx-sg-items{ display:flex; flex-direction:column; gap:1px; padding-left:9px; } /* 3차 메뉴(소그룹) 접기 — 기본은 펼침(.is-open). 제목 줄 전체가 토글 버튼이다. */ body.catx-on .catx-sg-title{ cursor:pointer; user-select:none; } body.catx-on .catx-sg-title:hover{ color:var(--cx-body); } body.catx-on .catx-sg-name{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.catx-on .catx-sg-caret{ flex:0 0 auto; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-right:-2px; opacity:.65; transition:transform .15s ease, opacity .15s ease; } body.catx-on .catx-sg-title:hover .catx-sg-caret{ opacity:1; } body.catx-on .catx-sg:not(.is-open) > .catx-sg-caret, body.catx-on .catx-sg:not(.is-open) .catx-sg-caret{ transform:rotate(-90deg); } body.catx-on .catx-sg:not(.is-open) > .catx-sg-items{ display:none; } /* ============================ 본문(대시보드) =============================== */ /* 카테고리 전용 대시보드(admin_main_category)는 .catxd-* 로 다크 시안 스타일 적용. * 그 외 페이지(admin_item 등 base 0 뷰)는 다크 캔버스 + 원본 카드 유지. */ body.catx-on #admin_wrap > section:not(.catxd-wrap), body.catx-on #admin_wrap > .main_box, body.catx-on #admin_wrap section.main_box{ background:transparent; } /* ---- 카테고리 대시보드 (시안 레이아웃) ---- */ body.catx-on .catxd-wrap{ display:flex; flex-direction:column; box-sizing:border-box; gap:14px; padding:clamp(12px,1.4vw,18px) clamp(12px,1.4vw,18px) clamp(14px,1.6vw,22px); font-family:'Apple SD Gothic Neo','NotoSansKR','NanumBarunGothic','nanum gothic','나눔고딕','apple gothic','맑은 고딕','굴림',sans-serif; color:var(--cx-text); } /* 세로 채움: 콘텐츠가 적으면 상단바를 뺀 화면 높이만큼 채우고(min-height), * 콘텐츠가 많으면 min-height 를 넘어 자연스럽게 확장 → 페이지 스크롤. 고정 height/overflow 미사용. */ body.catx-on .catxd-wrap{ min-height: calc(100vh - var(--cx-topbar-h)); } body.catx-on .catxd-wrap{ min-height: calc(100dvh - var(--cx-topbar-h)); } /* 시안(@media≥1280 의 [data-row-staff],[data-row-stats]{flex:1 1 0}) 참고: * 두 콘텐츠 행이 남은 세로를 채우도록 flex-grow. 단 시안의 flex-basis:0(내부 스크롤 전제) 대신 * flex:1 1 auto 로 두어, 콘텐츠가 많으면 축소 없이 확장(페이지 스크롤)하고 적으면 남은 공간을 채운다. */ body.catx-on .catxd-row-staff{ flex:1.9 1 auto; } /* 2행(직원현황+오늘일정) 세로 확대 */ body.catx-on .catxd-row3{ flex:1 1 auto; } /* 3행(방문/인기매물/최근문의) 세로 축소 */ /* 대시보드에서는 base 의 .admin_main_wrap 하단 여백을 제거해 불필요한 세로 스크롤 방지(대시보드 한정 스코프). */ body.catx-on #admin_wrap .admin_main_wrap:has(> .catxd-wrap){ padding-bottom:0; } body.catx-on .catxd-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap; } body.catx-on .catxd-head:not(:has(.catxd-quick)){display:none;} @media(max-width:992px){ body.catx-on #admin_wrap .admin_main_wrap:has(> .catxd-wrap){padding-top:0!important;} body.catx-on .catxd-wrap > .catxd-head{display:none!important;} body.catx-on .catxd-wrap > .catxi-mquick{margin-top:0!important;} } @media(min-width:993px){body.catx-on .catxd-wrap > .catxd-head{display:none!important;}} body.catx-on .catxd-title{ margin:0; font-size:clamp(20px,2.2vw,26px); font-weight:600; letter-spacing:-.02em; color:var(--cx-strong); } body.catx-on .catxd-sub{ margin:4px 0 0; font-size:var(--dash-font-12_5, 12.5px); color:var(--cx-sub); } body.catx-on .catxd-sub b{ color:var(--cx-accent-token); } body.catx-on .catxd-quick{ display:flex; gap:8px; flex-wrap:wrap; } body.catx-on .catxd-qbtn{ width:64px; height:62px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; border-radius:14px; background:var(--cx-chip); border:1px solid var(--cx-line); color:var(--cx-body); font-size:var(--dash-font-11, 11px); text-decoration:none; transition:transform .15s, border-color .15s, background .15s; } body.catx-on .catxd-qbtn:hover{ transform:translateY(-2px) !important; border-color:var(--cx-hover-line) !important; background:var(--cx-hover-bg) !important; color:var(--cx-strong) !important; } body.catx-on .catxd-qbtn:hover svg{ color:var(--cx-accent-text) !important; } body.catx-on .catxd-qbtn svg{ color:var(--cx-accent-token); } body.catx-on .catxd-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:clamp(10px,1.2vw,14px); } /* KPI 행: 6개 KPI 카드 + 우측 정보 패널(용량/만료/문자) — 넓은 화면은 한 줄에 전부 */ body.catx-on .catxd-kpirow{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)) minmax(300px,1.28fr); gap:clamp(8px,0.9vw,12px); } @media (max-width:1180px){ body.catx-on .catxd-kpirow{ grid-template-columns:repeat(3,minmax(120px,1fr)); } body.catx-on .catxd-infopanel{ grid-column:1 / -1; } } /* [40] 상단 KPI 를 2행(직원 업무 현황 | 오늘 일정) 패널 폭에 맞춰 4칸 + 3칸 두 그룹으로 정렬. * 2행(.catxd-row-staff)은 반반(1fr 1fr)이므로 그룹 합이 각각 (100% - g)/2 가 되어야 한다. * 앞 4칸 a: 4a + 3g = (W-g)/2 → a = (W - 7g)/8 * 뒤 3칸은 1:1:2 비율(계약서미작성 : 오래된매물 : 용량) * 4b + 2g = (W-g)/2 → b = (W - 5g)/8, 용량칸 = 2b = (W - 5g)/4 * 그룹 사이 간격(4번째↔5번째)도 g 라서 2행 gap 과 정확히 일치한다. */ @media (min-width:1181px){ body.catx-on .catxd-kpirow{ --cxk-g: clamp(10px,1.2vw,14px); /* .catxd-row-staff 과 동일한 gap */ gap: var(--cxk-g); grid-template-columns: repeat(4, calc((100% - 7 * var(--cxk-g)) / 8)) repeat(2, calc((100% - 5 * var(--cxk-g)) / 8)) calc((100% - 5 * var(--cxk-g)) / 4); } } @media (max-width:720px){ /* 모바일: 6개 KPI 카드를 2칸씩(3줄) */ body.catx-on .catxd-kpirow{ grid-template-columns:repeat(2,minmax(0,1fr)); } body.catx-on .catxd-infopanel{ grid-column:1 / -1; } body.catx-on .catxd-kpi{ padding:12px 11px; } /* 모바일: 데이터(라벨+값)만 — 상태문구('전체 확인' 등)·진행바·방문 7일 그래프 숨김 */ body.catx-on .catxd-kpi-note{ display:none; } body.catx-on .catxd-kpi-track{ display:none; } body.catx-on .catxd-visit-chart{ display:none; } } /* KPI 카드 상단: 코드(좌) + 상태문구(우) */ body.catx-on .catxd-kpi-top{ display:flex; align-items:center; justify-content:space-between; gap:8px; } body.catx-on .catxd-kpi-note{ font-size:var(--dash-font-11, 11px); font-weight:500; white-space:nowrap; } body.catx-on .catxd-kpi-desc{ margin-top:9px; font-size:var(--dash-font-12_5, 12.5px); color:var(--cx-sub); line-height:1.35; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; background:color-mix(in oklab, var(--cx-row) 60%, var(--cx-card)); padding:5px 9px; border-radius:7px; } /* 정보 패널 — 용량/만료일/잔여문자 한 줄 3칸(구분선), 아이콘+라벨 위·값+버튼 아래. 게이지 없음(단순화). */ body.catx-on .catxd-infopanel{ display:flex; align-items:stretch; gap:0; padding:12px 18px; border-radius:16px; background:var(--cx-card); border:1px solid var(--cx-line); box-shadow:var(--cx-shadow); min-height:0; flex-wrap:wrap; } body.catx-on .catxd-info-cell{ flex:1 1 0; min-width:0; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:8px; padding:0 16px; } body.catx-on .catxd-infopanel > .catxd-info-cell:first-child{ padding-left:0; } body.catx-on .catxd-infopanel > .catxd-info-cell:last-child{ padding-right:0; } body.catx-on .catxd-info-text{ min-width:0; display:flex; flex-direction:column; gap:6px; } body.catx-on .catxd-info-label{ display:flex; align-items:center; gap:6px; min-height:16px; font-size:var(--dash-font-11_5, 11.5px); color:var(--cx-sub); white-space:nowrap; } body.catx-on .catxd-info-label svg{ color:var(--cx-accent-token); flex-shrink:0; } body.catx-on .catxd-info-val{ font-size:15px; color:var(--cx-strong); line-height:1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body.catx-on .catxd-info-val b{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-weight:700; } body.catx-on .catxd-info-val em{ font-style:normal; font-size:var(--dash-font-12, 12px); color:var(--cx-sub); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } body.catx-on .catxd-info-div{ flex:none; align-self:center; width:1px; height:30px; background:var(--cx-line2); } /* 아이콘 원형 버튼(항상 이 크기) — 용량추가/문자충전=핑크, 연장신청도 동일 핑크 계열로 통일 */ body.catx-on .catxd-info-btn{ flex:0 0 auto; align-self:center; width:26px; height:26px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; border:none; padding:0; cursor:pointer; transition:filter .12s ease; } body.catx-on .catxd-info-btn svg{ display:block; } body.catx-on .catxd-info-btn:hover{ filter:brightness(1.08); } body.catx-on .catxd-info-btn[hidden]{ display:none !important; } /* 정보패널 버튼 텍스트(용량추가/연장신청/문자충전): 기본(PC 포함) 숨김 — 매물연동용(42) 모바일에서만 노출 */ body.catx-on .catxi-sync .catxd-btn-tx{ display:none; } body.catx-on .catxd-info-btn.is-pink, body.catx-on .catxd-info-btn.catxd-btn-extend{ background:color-mix(in oklab, #e0568a 18%, var(--cx-card)); color:#f3a8c6; animation:catxiExtendBlink 1.5s ease-in-out infinite; } body.catx-light .catxd-info-btn.is-pink, body.catx-light .catxd-info-btn.catxd-btn-extend{ background:color-mix(in oklab, #e0568a 14%, #fff); color:#c31e63; } @media (prefers-reduced-motion: reduce){ body.catx-on .catxd-info-btn.is-pink, body.catx-on .catxd-info-btn.catxd-btn-extend{ animation:none; } } /* 잔여문자수 버튼(문자충전요청)만 파란색 계열 */ body.catx-on #catxd-sms-btn{ background:color-mix(in oklab, var(--cx-accent) 18%, var(--cx-card)); color:var(--cx-accent-text); } body.catx-light #catxd-sms-btn{ background:color-mix(in oklab, var(--cx-accent) 14%, #fff); color:var(--cx-accent-text); } /* [직원관리용 40 전용] 용량 단독 한 줄 + 만료일·잔여문자수 한 줄로 2줄 배치. * 매물연동용(42, .catxi-sync)은 기존 3칸 한 줄 유지 — :not(.catxi-sync) 로 40만 스코프. */ body.catx-on .catxd-wrap:not(.catxi-sync) .catxd-infopanel{ display:grid; grid-template-columns:1fr auto 1fr; row-gap:12px; column-gap:16px; } body.catx-on .catxd-wrap:not(.catxi-sync) .catxd-infopanel > .catxd-info-cell{ padding:0; } body.catx-on .catxd-wrap:not(.catxi-sync) .catxd-infopanel > .catxd-info-cell:nth-child(1){ grid-column:1 / -1; grid-row:1; } body.catx-on .catxd-wrap:not(.catxi-sync) .catxd-infopanel > .catxd-info-div:nth-child(2){ display:none; } body.catx-on .catxd-wrap:not(.catxi-sync) .catxd-infopanel > .catxd-info-cell:nth-child(3){ grid-column:1; grid-row:2; } body.catx-on .catxd-wrap:not(.catxi-sync) .catxd-infopanel > .catxd-info-div:nth-child(4){ grid-column:2; grid-row:2; } body.catx-on .catxd-wrap:not(.catxi-sync) .catxd-infopanel > .catxd-info-cell:nth-child(5){ grid-column:3; grid-row:2; } /* 용량 옆 사용률 게이지(40 전용) */ body.catx-on .catxd-wrap:not(.catxi-sync) .catxd-info-gauge{ flex:1 1 auto; min-width:40px; margin:0 10px; } body.catx-on .catxd-wrap:not(.catxi-sync) .catxd-info-gauge-track{ height:8px; border-radius:6px; background:var(--cx-track); overflow:hidden; } body.catx-on .catxd-wrap:not(.catxi-sync) .catxd-info-gauge-fill{ height:100%; border-radius:6px; background:var(--cx-accent); transition:width .3s ease; } body.catx-on .catxd-wrap:not(.catxi-sync) .catxd-info-gauge-fill.is-mid{ background:var(--cx-amber); } body.catx-on .catxd-wrap:not(.catxi-sync) .catxd-info-gauge-fill.is-high{ background:#e0568a; } /* [직원관리용 40 · 관리자(비직원) 분기 전용] 정보패널이 .catxd-info-line + 게이지 마크업을 쓰는데, 직원분기 단순화(info-cell) 때 이 계열의 넓은폭 기본 CSS가 빠져 KPI행 우측 칸(≈300px)에서 세로로 눌려 깨짐. 넓은폭에서 2줄(용량+게이지 / 만료일·문자)로 스택 복구. min-width:701 로 게이팅 → ≤700 기존 모바일 규칙(1396~) 불변, :has(>info-line) 로 직원분기·매물연동42(info-cell) 는 미해당. */ @media (min-width:701px){ body.catx-on .catxd-infopanel:has(> .catxd-info-line){ flex-direction:column; flex-wrap:nowrap; gap:12px; align-items:stretch; } body.catx-on .catxd-info-line{ display:flex; align-items:center; flex-wrap:wrap; gap:6px 10px; width:100%; min-width:0; } body.catx-on .catxd-info-line > .catxd-info-cell{ flex:0 1 auto; } body.catx-on .catxd-info-line:first-child > .catxd-info-cell{ flex:0 0 auto; } body.catx-on .catxd-info-line > .catxd-info-gauge{ flex:1 1 auto; min-width:40px; } body.catx-on .catxd-info-gauge-track{ height:6px; border-radius:4px; background:var(--cx-line2); overflow:hidden; } body.catx-on .catxd-info-gauge-fill{ height:100%; border-radius:4px; background:var(--cx-accent); } body.catx-on .catxd-info-gauge-fill.is-mid{ background:var(--cx-amber-v,#e5a13a); } body.catx-on .catxd-info-gauge-fill.is-high{ background:#e0568a; } body.catx-on .catxd-info-line > .catxd-info-div{ flex:0 0 auto; align-self:center; width:1px; height:26px; background:var(--cx-line2); } } @media(max-width:640px){ body.catx-on .catxd-infopanel{ flex-wrap:wrap; row-gap:12px; } body.catx-on .catxd-info-cell{ flex:1 1 40%; padding:0 !important; } body.catx-on .catxd-info-div{ display:none; } } body.catx-on .catxd-kpi{ display:block; padding:14px 16px; border-radius:16px; background:var(--cx-card); border:1px solid var(--cx-line); box-shadow:var(--cx-shadow); text-decoration:none; transition:transform .15s, border-color .15s; } /* 신규 문의(미확인 문의) 카드만 분홍 강조 */ body.catx-on .catxd-kpirow > .catxd-kpi:nth-child(2) .catxd-kpi-desc{ background:color-mix(in oklab, #ec6ea0 14%, var(--cx-card)); color:#c94f7c; font-weight:600; } body.catx-on .catxd-kpi:hover{ transform:translateY(-2px); border-color:var(--cx-hover-line); } body.catx-on .catxd-kpi-code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-10, 10px); letter-spacing:.16em; font-weight:700; } body.catx-on .catxd-kpi-label{ font-size:13.5px; font-weight:600; color:var(--cx-body); margin-top:10px; } body.catx-on .catxd-kpi-val{ display:flex; align-items:baseline; gap:6px; margin-top:2px; } body.catx-on .catxd-kpi-val span{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:28px; font-weight:700; line-height:1.1; color:var(--cx-strong); } body.catx-on .catxd-kpi-val em{ font-style:normal; font-size:var(--dash-font-12_5, 12.5px); color:var(--cx-sub); } body.catx-on .catxd-kpi-track{ display:none; } body.catx-on .catxd-kpi-fill{ height:100%; border-radius:3px; } /* KPI 카드 클릭 → 매물 목록 팝업(button 태그). .catxd-kpi 가 배경·테두리·그림자를 이미 담당하므로 브라우저 버튼 기본값만 해제 */ body.catx-on button.catxd-kpi{ appearance:none; -webkit-appearance:none; font:inherit; text-align:left; color:inherit; } body.catx-on button.catxd-kpi-pop{ cursor:pointer; } body.catx-on .catxd-row2{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); gap:clamp(10px,1.2vw,14px); } body.catx-on .catxd-panel{ display:flex; flex-direction:column; min-height:160px; border-radius:18px; background:var(--cx-panel); border:1px solid var(--cx-line); box-shadow:var(--cx-shadow); padding:16px; } body.catx-on .catxd-panel-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; } body.catx-on .catxd-panel-head h2{ margin:0; font-size:15px; font-weight:700; letter-spacing:-.01em; color:var(--cx-strong); } body.catx-on .catxd-panel-note{ font-size:var(--dash-font-11, 11px); font-weight:500; letter-spacing:0; color:var(--cx-sub); } /* 패널 헤더 '전체보기/자세히 보기' — 그냥 텍스트로 보여 클릭 가능한지 인지 어렵던 문제 → 두 클래스를 동일한 pill 버튼으로 통일 */ body.catx-on .catxd-more, body.catx-on .catxd-panel-more{ display:inline-flex; align-items:center; flex-shrink:0; font-family:inherit; font-size:var(--dash-font-11, 11px); font-weight:500; line-height:1.4; color:var(--cx-body); background:var(--cx-panel); border:1px solid var(--cx-line-soft); border-radius:7px; padding:2px 8px; text-decoration:none; white-space:nowrap; cursor:pointer; transition:background .12s ease, border-color .12s ease; } body.catx-on .catxd-more:hover, body.catx-on .catxd-panel-more:hover{ background:var(--cx-row); border-color:var(--cx-line2); color:var(--cx-strong); text-decoration:none; } /* 내부 스크롤을 만들지 않고 콘텐츠 높이만큼 자연 확장 → 페이지 스크롤로 통일(이중 스크롤 방지). */ body.catx-on .catxd-scroll{ overflow:visible; } body.catx-on .catxd-sch{ display:flex; align-items:center; gap:12px; padding:6px 12px; border-radius:10px; background:color-mix(in oklab,var(--cx-row) 35%,white); border:1px solid var(--cx-line-soft); margin-bottom:6px; } body.catx-on .catxd-sch-time{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-12, 12px); color:var(--cx-accent-text); min-width:42px; white-space:nowrap; } body.catx-on .catxd-sch-title{ flex:1; font-size:13px; color:var(--cx-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.catx-on .catxd-sch-tag{ flex-shrink:0; font-size:var(--dash-font-10_5, 10.5px); font-weight:700; padding:3px 9px; border-radius:7px; white-space:nowrap; letter-spacing:.01em; } body.catx-on .catxd-logtag{ min-width:66px; padding-left:6px; padding-right:6px; text-align:center; box-sizing:border-box; } body.catx-on .catxd-sch-dev{ flex-shrink:0; font-size:var(--dash-font-11, 11px); color:var(--cx-sub2); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } body.catx-on .catxd-logrow .catxd-sch-who{ width:82px; min-width:82px; flex-shrink:0; overflow:hidden; text-overflow:ellipsis; } /* 관리자/직원 구분 태그(직원카드·로그인이력 공용) */ body.catx-on .catxd-sttype{ flex-shrink:0; display:inline-block; margin-right:5px; font-size:var(--dash-font-10, 10px); font-weight:700; padding:1px 6px; border-radius:5px; white-space:nowrap; letter-spacing:.01em; vertical-align:middle; } body.catx-on .catxd-logrow .catxd-sttype{ min-width:42px; text-align:center; box-sizing:border-box; margin-right:0; } body.catx-on .catxd-sttype-admin{ background:color-mix(in oklab,#8b5cf6 15%,transparent); color:#6d3fd4; } body.catx-on .catxd-sttype-staff{ background:color-mix(in oklab,#2c4a8f 15%,transparent); color:#26386e; } /* (.catxd-panel-more 스타일은 위 .catxd-more 통합 규칙으로 일원화) */ body.catx-on a.catxd-sch{ text-decoration:none; color:inherit; cursor:pointer; transition:background .12s,border-color .12s; } body.catx-on a.catxd-sch:hover{ background:var(--cx-hover-bg); border-color:var(--cx-hover-line); } /* 로그인 이력 모바일: 고정폭 합이 카드 폭을 넘겨 시간(.catxd-sch-time)이 42px 로 눌리며 * 관리자/직원 배지 위로 글자가 겹치던 문제 → 시간은 축소 금지, 이름이 남은 폭을 차지하게 전환 */ @media (max-width:700px){ body.catx-on .catxd-logrow{ gap:6px; padding:6px 8px; } body.catx-on .catxd-logrow .catxd-sch-time{ flex:0 0 auto; min-width:0; font-size:var(--dash-font-11, 11px); } body.catx-on .catxd-logrow .catxd-sttype{ min-width:0; padding:1px 5px; } body.catx-on .catxd-logrow .catxd-sch-who{ width:auto; min-width:0; flex:1 1 auto; } body.catx-on .catxd-logrow .catxd-sch-title{ display:none; } body.catx-on .catxd-logrow .catxd-sch-dev{ font-size:var(--dash-font-10_5, 10.5px); } body.catx-on .catxd-logrow .catxd-logtag{ min-width:0; font-size:var(--dash-font-10, 10px); padding:3px 7px; } } body.catx-on .catxd-alert{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:11px; background:var(--cx-card); border:1px solid var(--cx-line); margin-bottom:8px; text-decoration:none; transition:background .12s, border-color .12s; } body.catx-on .catxd-alert:hover{ background:var(--cx-hover-bg); border-color:var(--cx-hover-line); } body.catx-on .catxd-alert-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; } /* 고객문의 카드도 업무현황처럼 아이콘 타일(도트 대체) — 높이도 업무현황과 동일해짐 */ body.catx-on .catxd-alert-ico{ width:26px; height:26px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; } body.catx-on .catxd-alert-ico svg{ stroke-width:1.9; } body.catx-on .catxd-alert-label{ flex:1; font-size:13px; color:var(--cx-text); } body.catx-on .catxd-alert-val{ text-align:right; margin-left:auto; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13.5px; font-weight:700; } body.catx-on .catxd-stats{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } body.catx-on .catxd-stat{ display:flex; flex-direction:column; gap:3px; padding:12px; border-radius:12px; background:var(--cx-row); border:1px solid var(--cx-line-soft); } body.catx-on .catxd-stat-l{ font-size:var(--dash-font-11_5, 11.5px); color:var(--cx-sub); } body.catx-on .catxd-stat-v{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:22px; font-weight:700; color:var(--cx-strong); } body.catx-on .catxd-work{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-radius:11px; background:var(--cx-card); border:1px solid var(--cx-line); margin-bottom:8px; transition:background .12s, border-color .12s; } body.catx-on .catxd-work:hover{ background:var(--cx-hover-bg); border-color:var(--cx-hover-line); } body.catx-on a.catxd-work{ text-decoration:none; color:inherit; cursor:pointer; } body.catx-on .catxd-work-code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-9_5, 9.5px); color:var(--cx-sub2); width:24px; } /* 업무 현황 항목 앞 아이콘(숫자 대체) */ body.catx-on .catxd-work-ico{ width:26px; height:26px; border-radius:8px; display:inline-flex; align-items:center; justify-content:center; flex-shrink:0; } body.catx-on .catxd-work-ico svg{ stroke-width:1.9; } body.catx-on .catxd-work-l{ flex:1; font-size:13px; color:var(--cx-text); } body.catx-on .catxd-work-v{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13.5px; font-weight:700; color:var(--cx-strong); } /* 업무 현황 하단 2칸(전체 매물 | 전체 고객) */ body.catx-on .catxd-work-pair{ display:grid; grid-template-columns:1fr 1fr; gap:8px; } body.catx-on .catxd-work-pair .catxd-work{ margin-bottom:0; } body.catx-on .catxd-work-half{ gap:6px; } body.catx-on .catxd-work-half .catxd-work-code{ width:auto; } body.catx-on .catxd-work-half .catxd-work-l{ font-size:var(--dash-font-12, 12px); } /* 직원관리용(관리자) 3행 세로 컴팩트 (스태프 로그인 .catxi-dash 는 제외) */ body.catx-on .catxd-wrap:not(.catxi-dash) .catxd-row3 .catxd-panel{ padding:14px; } body.catx-on .catxd-wrap:not(.catxi-dash) .catxd-row3 .catxd-panel-head{ margin-bottom:9px; } body.catx-on .catxd-wrap:not(.catxi-dash) .catxd-row3 .catxd-alert, body.catx-on .catxd-wrap:not(.catxi-dash) .catxd-row3 .catxd-work{ padding:8px 11px; margin-bottom:6px; } body.catx-on .catxd-wrap:not(.catxi-dash) .catxd-row3 .catxd-visit-row{ margin-top:8px; } body.catx-on .catxd-wrap:not(.catxi-dash) .catxd-row3 .catxd-visit-chart{ margin-top:6px; flex:1; min-height:120px; } body.catx-on .catxd-wrap:not(.catxi-dash) .catxd-row3 .catxd-vc-bars{ flex:1; min-height:90px; } body.catx-on .catxd-wrap:not(.catxi-dash) .catxd-row3 .catxd-vc-bar{ height:100%; } body.catx-on .catxd-todo-tag{ font-size:var(--dash-font-10_5, 10.5px); font-weight:600; padding:3px 9px; border-radius:7px; background:var(--cx-hover-bg); color:var(--cx-amber); border:1px solid var(--cx-line2); } body.catx-on .catxd-todo-note{ font-size:var(--dash-font-12, 12px); color:var(--cx-sub); margin-bottom:8px; } body.catx-on .catxd-todo-list ul{ margin:0; padding-left:18px; display:flex; flex-direction:column; gap:5px; } body.catx-on .catxd-todo-list li{ font-size:var(--dash-font-12_5, 12.5px); color:var(--cx-body); } body.catx-on .catxd-empty{ padding:24px 0; text-align:center; font-size:var(--dash-font-12_5, 12.5px); color:var(--cx-sub); } /* ---- 시안 배치·반응형: 2열(직원현황+오늘일정) / 3열(방문·알림·업무) ---- * 시안 브레이크포인트 그대로: stats 3열 → ≤1279 2열(방문현황 상단 전체폭) → ≤760 1열. * 직원+일정 행은 auto-fit(minmax 450) 로 폭 부족 시 자동 1열. */ body.catx-on .catxd-row-staff{ display:grid; grid-template-columns:repeat(auto-fit,minmax(min(450px,100%),1fr)); gap:clamp(10px,1.2vw,14px); } body.catx-on .catxd-row3{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1.2vw,14px); } @media (max-width:1279px){ body.catx-on .catxd-row3{ grid-template-columns:repeat(2,minmax(0,1fr)); } body.catx-on .catxd-row3 > section:first-child{ grid-column:1 / -1; } } @media (max-width:760px){ body.catx-on .catxd-row3{ grid-template-columns:minmax(0,1fr); } body.catx-on .catxd-row3 > section:first-child{ grid-column:auto; } } body.catx-on .catxd-panel-body{ flex:1; min-height:0; } body.catx-on .catxd-h2sub{ color:var(--cx-sub2); font-weight:400; font-size:var(--dash-font-12, 12px); } /* 직원 업무 현황 테이블 */ body.catx-on .catxd-sttable{ display:flex; flex-direction:column; } body.catx-on .catxd-sthead, body.catx-on .catxd-strow{ display:grid; grid-template-columns:minmax(170px,1.8fr) minmax(50px,.7fr) minmax(50px,.7fr) minmax(64px,.9fr) minmax(64px,.9fr) minmax(74px,1fr); gap:6px 8px; align-items:center; } body.catx-on .catxd-sthead{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-12, 12px); font-weight:600; letter-spacing:0; line-height:1.5; color:var(--cx-sub); background:var(--cx-row); border:1px solid var(--cx-line-soft); border-radius:9px; padding:8px 10px; margin-bottom:6px; } /* [사용자 요청] 직원 업무 현황 테이블 헤더 고정 — 목록(행)만 스크롤(스크롤 컨테이너 .catxd-scroll 안에서 sticky). --cx-row 는 불투명(color-mix, 알파없음)이라 행이 뒤로 비치지 않음 → 기존 배경 유지, sticky 만 적용. */ body.catx-on .catxd-panel-body.catxd-scroll .catxd-sthead{ position:sticky; top:0; z-index:3; } body.catx-on .catxd-sthead .r, body.catx-on .catxd-strow .r{ text-align:right; } body.catx-on .catxd-strow > .r:not(.catxd-stlast){font-weight:700;} body.catx-on .catxd-label-mobile{display:none;} body.catx-on .catxd-strow{ padding:11px 10px; border-bottom:1px solid var(--cx-line-soft); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; color:var(--cx-strong); } body.catx-on .catxd-strow-sum{ background:var(--cx-row); border:1px solid var(--cx-line-soft); border-radius:10px; } body.catx-on .catxd-stname{ display:flex; align-items:center; gap:9px; min-width:0; font-family:'Apple SD Gothic Neo','NotoSansKR','NanumBarunGothic','nanum gothic','나눔고딕','apple gothic','맑은 고딕','굴림',sans-serif; } body.catx-on .catxd-stpic{ flex-shrink:0; width:30px; height:30px; border-radius:9px; overflow:hidden; background:var(--cx-track); border:1px solid var(--cx-line-soft); display:flex; align-items:center; justify-content:center; } body.catx-on .catxd-stpic img{ width:100%; height:100%; object-fit:cover; display:block; } body.catx-on .catxd-stnamewrap{ display:flex; flex:1; flex-direction:column; min-width:0; gap:1px; } body.catx-on .catxd-stnm{ display:flex; align-items:center; gap:5px; font-size:13px; color:var(--cx-text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.catx-on .catxd-stmail{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-10_5, 10.5px); color:var(--cx-sub2); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%; } body.catx-on .catxd-stlast .catxd-login-device{display:block;font-size:var(--dash-font-11, 11px);color:var(--cx-sub);line-height:1.5;} body.catx-on .catxd-ston{ flex-shrink:0; width:7px; height:7px; border-radius:50%; background:var(--cx-green); box-shadow:0 0 0 2px color-mix(in oklab, var(--cx-green) 22%, transparent); } /* 이름 뒤 직급 */ body.catx-on .catxd-strank{ flex-shrink:0; font-size:var(--dash-font-11, 11px); font-weight:600; color:var(--cx-sub); } /* 본인 계정 '나' 배지 */ body.catx-on .catxd-mebadge{ flex-shrink:0; font-size:var(--dash-font-10, 10px); font-weight:700; line-height:1; padding:2px 6px; border-radius:6px; color:var(--cx-accent); background:color-mix(in oklab, var(--cx-accent) 14%, transparent); border:1px solid color-mix(in oklab, var(--cx-accent) 38%, transparent); } body.catx-on .catxd-stlogout{ flex-shrink:0; margin-left:4px; width:auto; height:28px; gap:4px; display:inline-flex; align-items:center; justify-content:center; padding:0; border-radius:8px; background:transparent; border:1px solid var(--cx-line); color:var(--cx-sub); cursor:pointer; transition:all .12s; } body.catx-on .catxd-stlogout{padding:0 7px;border-color:#10a174;font-size:var(--dash-font-11, 11px);font-weight:700;white-space:nowrap;} /* 접속중 문구 굵게(미접속은 그대로) */ body.catx-on .catxd-stlogout svg{color:#10a174;flex-shrink:0;} body.catx-on .catxd-stlogout:hover{background:color-mix(in oklab, #10a174 8%, transparent);} @keyframes catxOnlineBorder{0%,100%{border-color:#10a174;}50%{border-color:#a7dfc9;}} @keyframes catxOnlineIcon{0%,100%{color:#10a174;}50%{color:#a7dfc9;}} @media(prefers-reduced-motion:no-preference){ body.catx-on .catxd-stlogout{animation:catxOnlineBorder 2s ease-in-out infinite;} body.catx-on .catxd-stlogout svg{animation:catxOnlineIcon 2s ease-in-out infinite;} } body.catx-on .catxd-stlast{ font-size:var(--dash-font-11, 11px); } body.catx-on .catxd-dim{ color:var(--cx-sub2); } body.catx-on .catxd-stnote{ margin-top:10px; font-size:var(--dash-font-12, 12px); line-height:1.55; color:var(--cx-sub); } /* 오늘 일정: 담당자 배지 */ body.catx-on .catxd-sch-who{ font-size:var(--dash-font-12, 12px); color:var(--cx-sub); min-width:46px; } /* 홈페이지 방문 현황 */ body.catx-on .catxd-visit-nums{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; } body.catx-on .catxd-visit-n{ display:flex; flex-direction:column; gap:4px; padding:9px 11px; border-radius:10px; background:color-mix(in oklab,var(--cx-row) 45%,white); border:1px solid var(--cx-line-soft); } body.catx-on .catxs-body:has(.catxd-visit-chart){ display:flex; flex-direction:column; } body.catx-on .catxd-vc-title{ font-size:var(--dash-font-11, 11px); font-weight:600; color:var(--cx-sub); margin:11px 0 4px; } body.catx-on .catxd-visit-l{ display:flex; align-items:center; gap:4px; font-size:var(--dash-font-12_5, 12.5px); font-weight:600; color:var(--cx-sub); white-space:nowrap; } body.catx-on .catxd-visit-v{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:clamp(17px,2vw,22px); font-weight:700; line-height:1.1; color:var(--cx-strong); } body.catx-on .catxd-visit-v.sub{ color:var(--cx-body); } body.catx-on .catxd-visit-bars{ display:flex; align-items:flex-end; gap:14px; height:76px; margin-top:14px; padding-top:8px; border-top:1px solid var(--cx-line-soft); } body.catx-on .catxd-vbar{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:5px; } body.catx-on .catxd-vbar-fill{ width:100%; max-width:46px; border-radius:6px 6px 0 0; min-height:6px; } body.catx-on .catxd-vbar-d{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-10, 10px); color:var(--cx-sub2); } /* 방문 현황: 매물 조회 row + 7일 트렌드 차트(시안 레이아웃) */ body.catx-on .catxd-visit-row{ display:flex; align-items:center; gap:8px; margin-top:12px; padding:7px 10px; border-radius:9px; background:var(--cx-row); border:1px solid var(--cx-line-soft); } body.catx-on .catxd-visit-row-l{ flex:1; min-width:0; font-size:var(--dash-font-12, 12px); color:var(--cx-body); } body.catx-on .catxd-visit-row-v{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13.5px; font-weight:600; color:var(--cx-strong); } body.catx-on .catxd-visit-row-u{ font-size:var(--dash-font-10_5, 10.5px); color:var(--cx-sub); } body.catx-on .catxd-visit-chart{ margin-top:12px; display:flex; flex-direction:column; gap:5px; } body.catx-on .catxd-vc-bars{ flex:1; min-height:60px; display:flex; align-items:flex-end; gap:5px; } body.catx-on .catxd-vc-bar{ flex:1; display:flex; align-items:flex-end; justify-content:center; height:60px; } body.catx-on .catxd-vc-fill{ position:relative; width:100%; max-width:22px; min-height:6px; border-radius:5px 5px 0 0; background:var(--cx-accent); opacity:.55; transition:opacity .12s; } body.catx-on .catxd-vc-bar:last-child .catxd-vc-fill{ opacity:1; } body.catx-on .catxd-vc-bar:hover .catxd-vc-fill{ opacity:1; } body.catx-on .catxd-vc-days{ display:flex; gap:5px; } body.catx-on .catxd-vc-days span{ flex:1; text-align:center; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-9, 9px); color:var(--cx-sub2); } body.catx-on #admin_wrap .board_type > .board_type_tit, body.catx-on #admin_wrap .main_box .tit{ color: var(--cx-text); } /* 스크롤바 */ body.catx-on ::-webkit-scrollbar{ width:8px; height:8px; } body.catx-on ::-webkit-scrollbar-thumb{ background: var(--cx-line2); border-radius:8px; } /* ==================== 썸네일 칸 크기 고정 ==================================== * 목록이 뜰 때 썸네일이 5배 크게 나왔다가 줄어들었다. * dev 실측: t=911ms 썸네일 357x359 (td 369px) → t=1,021ms 70x72 (td 82px) * 약 110ms 동안 커진 채로 화면에 보였다(그 시점 opacity 0.71 — 이미 노출 중). * * 원인은 순환 의존이다. td 는 flex 항목이고 flex 항목의 min-width 기본값은 auto 라 * '내용보다 작아질 수 없다'. 그런데 내용인 span.img_ratio_4x3 은 width:100% + * padding-top:100% 라 제 크기가 부모 폭에 의존한다. 서로를 기다리다 레이아웃이 * 확정될 때 비로소 값이 잡힌다. * * → td 는 min-width:0 으로 auto 를 끊고 폭을 못박고, span 은 퍼센트 대신 px 로 * 고정해 부모와 무관하게 처음부터 크기가 정해지게 한다. 값은 위 실측 확정치. * ========================================================================== */ body.catx-on.catx-list-normal .list_table_pc_zone tr[data-id] .catx-c-thumb{ flex:0 0 72px !important; min-width:0 !important; max-width:72px !important; overflow:hidden !important; } body.catx-on.catx-list-normal .list_table_pc_zone tr[data-id] .catx-c-thumb .img_ratio_4x3{ width:70px !important; max-width:70px !important; padding-top:70px !important; /* 100% 는 부모 폭 의존 → px 로 끊는다 */ } /* ==================== 레이아웃 고정(사이드바 폭 / 본문 오프셋) ================== * 예전에는 catxSyncTopbar() 가 window 'load' 에서 사이드바 폭과 본문 margin-left·width 를 * 인라인으로 박았다. load 는 이미지·외부스크립트까지 끝나야 오므로, 그 전까지 본문이 * 화면 전체 폭을 차지했다가 뒤늦게 사이드바 폭만큼 밀리며 줄어들었다. * 실측(dev, 1920px): t=580ms body 2,176px → t=1,964ms 1,916px (약 1.4초간 우측 삐져나감) * * 그런데 JS 가 쓰던 값은 측정값이 아니라 상수였다 — var SBW = collapsed ? 64 : 250; * 그러면 CSS 가 처음부터 잡는 게 맞다. 폭은 이미 --cx-sidebar-w 로 정의돼 있다. * 접힘 상태(catx-nav-collapsed)는 헤더의 인라인 스크립트가 파싱 중에 body 에 붙이므로 * 첫 렌더부터 올바른 폭이 적용된다. * * !important 를 쓰는 이유: base 관리자 JS 가 화면폭별로 width/left 를 '일반' 인라인으로 * 주입한다. 인라인은 !important 가 붙은 CSS 를 이기지 못하므로 이걸로 무력화된다. * (catxSyncTopbar 는 그대로 둔다. 상단바 실제 높이 보정은 여전히 필요하고, 폭은 같은 * 값을 다시 쓰는 것뿐이라 화면이 움직이지 않는다.) * ========================================================================== */ @media (min-width:993px){ body.catx-on #admin_wrap header.style_admin_category{ position:fixed !important; left:0 !important; top:var(--cx-topbar-h) !important; height:calc(100vh - var(--cx-topbar-h)) !important; width:var(--cx-sidebar-w) !important; min-width:var(--cx-sidebar-w) !important; max-width:var(--cx-sidebar-w) !important; } body.catx-on #admin_wrap{ margin-left:var(--cx-sidebar-w) !important; width:calc(100vw - var(--cx-sidebar-w)) !important; max-width:calc(100vw - var(--cx-sidebar-w)) !important; box-sizing:border-box !important; overflow-x:hidden !important; } /* 접힘(64px) — 아래 접힘 블록의 width 규칙과 같은 값으로 본문 폭도 맞춘다 */ body.catx-on.catx-nav-collapsed #admin_wrap{ width:calc(100vw - 64px) !important; max-width:calc(100vw - 64px) !important; } } /* ==================== 네비 접힘(아이콘 레일) / 반응형 ====================== */ /* 데스크톱: 토글 시 64px 아이콘 레일 (텍스트/그룹/서브 숨기고 아이콘만) */ /* 접힘 레일은 실서버 기존 CSS(base/헤더 인라인)와 경쟁하므로 이 블록에 한해 !important 로 확실히 고정한다. */ @media (min-width:993px){ body.catx-on.catx-nav-collapsed #admin_wrap header.style_admin_category{ width:64px !important; min-width:64px !important; max-width:64px !important; overflow:hidden !important; border-right:1px solid var(--cx-line) !important; box-sizing:border-box !important; } body.catx-on.catx-nav-collapsed #admin_wrap header.style_admin_category .logo_btm{ width:100% !important; box-sizing:border-box !important; padding:14px 0 !important; overflow:hidden !important; } body.catx-on.catx-nav-collapsed #admin_wrap header.style_admin_category .nav_view_box, body.catx-on.catx-nav-collapsed #admin_wrap header.style_admin_category .admin_nav, body.catx-on.catx-nav-collapsed .catx-nav{ width:64px !important; min-width:0 !important; padding:0 !important; } body.catx-on.catx-nav-collapsed #admin_wrap{ margin-left:64px !important; } body.catx-on.catx-nav-collapsed .catx-group-head, body.catx-on.catx-nav-collapsed .catx-home-txt, body.catx-on.catx-nav-collapsed .catx-mn, body.catx-on.catx-nav-collapsed .catx-mc, body.catx-on.catx-nav-collapsed .catx-ca, body.catx-on.catx-nav-collapsed .catx-sub, body.catx-on.catx-nav-collapsed #admin_wrap header.style_admin_category .admin_user_box{ display:none !important; } body.catx-on.catx-nav-collapsed .catx-home{ width:40px !important; height:40px !important; justify-content:center !important; padding:0 !important; margin:0 auto 10px !important; } body.catx-on.catx-nav-collapsed .catx-group{ width:auto !important; margin:0 0 2px !important; } body.catx-on.catx-nav-collapsed .catx-menu{ width:auto !important; margin:0 0 2px !important; } body.catx-on.catx-nav-collapsed .catx-menu-row{ width:44px !important; justify-content:center !important; padding:9px 0 !important; gap:0 !important; margin:0 auto !important; } body.catx-on.catx-nav-collapsed .catx-mi{ margin:0 !important; } /* 접힘(아이콘 레일) 상태: 숫자 배지 대신 아이콘 우상단 작은 빨간 점 */ body.catx-on.catx-nav-collapsed .catx-menu-row{ position:relative !important; } body.catx-on.catx-nav-collapsed .catx-menu-row .catx-badge{ position:absolute !important; top:5px !important; right:8px !important; min-width:0 !important; width:8px !important; height:8px !important; padding:0 !important; border-radius:50% !important; font-size:0 !important; line-height:0 !important; text-indent:-9999px !important; overflow:hidden !important; border:1.5px solid var(--cx-header) !important; box-sizing:content-box !important; } } /* 모바일: 사이드바 드로어(기본 숨김), 토글 시 노출 */ @media (max-width:992px){ body.catx-on{ --cx-drawer-w: min(82vw, 330px); } body.catx-on #admin_wrap{ margin-left:0; } /* 모바일 드로어: 화면에 고정(fixed) 오버레이. 불투명 배경이라 자기 폭만큼 딤을 가려 메뉴 위는 안 어둡다. * z-index 는 상단바(30050)보다 낮고 백드롭(30030)보다 높게 → 메뉴는 딤 위, 콘텐츠는 딤 아래. */ body.catx-on #admin_wrap header.style_admin_category{ position:fixed !important; top:var(--cx-topbar-h) !important; left:auto !important; right:0 !important; height:calc(100vh - var(--cx-topbar-h)) !important; height:calc(100dvh - var(--cx-topbar-h)) !important; width:var(--cx-drawer-w) !important; min-width:0 !important; max-width:var(--cx-drawer-w) !important; transform:translateX(100%); z-index:30040 !important; overflow-y:auto; -webkit-overflow-scrolling:touch; } /* 딤(스크림)은 드로어의 box-shadow(100vmax spread)로 깐다. box-shadow 는 요소 '바깥'에만 칠해지므로 * 드로어(메뉴) 자기 영역은 절대 어두워지지 않고 주변(오른쪽 콘텐츠)만 딤. 상단바는 z-index 30050 으로 위라 영향 없음. * box-shadow 는 포인터 이벤트를 잡지 않아 클릭도 그대로 통과(바깥 클릭 닫기는 JS 담당). */ body.catx-on.catx-nav-collapsed #admin_wrap header.style_admin_category{ transform:translateX(0); box-shadow:0 18px 60px rgba(0,0,0,.5), 0 0 0 100vmax rgba(4,8,15,.42) !important; } body.catx-on .catx-sysinfo{ display:none; } body.catx-on .catx-live{ display:none; } body.catx-on .catx-acct-name{ display:none; } } @media (max-width:600px){ body.catx-on .catx-brand{ display:none; } } /* ================= 실서버 대응 긴급 수정 ================================== */ /* (1) 상단바 fixed 강제 — 경쟁 규칙으로 position 이 풀리면 in-flow 가 되어 본문이 * 이중 오프셋(topbar 높이 + padding-top)만큼 밀리는 여백이 생긴다. */ body.catx-on .catx-topbar{ position:fixed !important; top:0 !important; left:0 !important; right:0 !important; z-index:30050 !important; } /* The image editor opens with jQuery .show(), so the modal visibility observer does not lower the catx header. */ body.catx-on.cx-has-formitem #modal-toast-editor{ z-index:30060 !important; } /* 모달이 실제로 보일 때 상단바/사이드바를 모달 아래로 내림(z 30050→1000) → 모달 위로 뜨던 문제 해결 + 오버레이에 딤 처리. * 숨기지 않고 '아래로'만 내림: 작은 모달(매칭된 고객 등)에서 헤더가 통째로 사라져 상단이 비던 문제 방지(딤된 채 남아있음). * ⚠️ CSS :has(.modal.in) 는 못 씀: #modal_customer_matching 등이 항상 .modal.in + display:none(상시 숨김) 이라 상시 매칭돼 오작동. * → 헤더 JS(cx_modal_chrome)가 '보이는' 모달만 판정해 body.catx-modal-vis 토글, 여기선 그 클래스로만 z내림. */ /* 999: #modal_building 등 z-index 1000 모달과 동점이면 문서 순서에 따라 헤더가 위로 올 수 있어 한 단계 아래로. 2026-09-30 */ body.catx-on.catx-modal-vis .catx-topbar, body.catx-on.catx-modal-vis #admin_wrap header.style_admin_category{ z-index:999 !important; } /* AI description is a custom overlay, so it needs the same header stacking as Bootstrap modals. */ body.catx-on.catx-ai-modal-open .catx-topbar, body.catx-on.catx-ai-modal-open #admin_wrap header.style_admin_category{ z-index:1000 !important; } /* [주소 검색 / 빠른 주소 검색 모달] 이 둘은 Bootstrap `.modal` 이 아니라 자체 마크업(.modal_daum_address / .modal_quick, z-index 1040)이라 * cx_modal_chrome 의 감지 대상이 아니다 → body.catx-modal-vis 가 안 붙어 상단바(z 30050)가 모달 위로 올라온다. * 헤더를 내리는 대신 모달 자체를 상단바·사이드바 드로어(30040/30050) 위로 올린다. */ body.catx-on .modal_daum_address, body.catx-on .modal_quick, /* 주소·건물 정보 조회 중 로딩 창도 .modal 이 아니라(is-open 토글, z 12000) 감지가 안 돼 상단바가 그 위로 올라왔다. 같은 방식으로 올린다. 2026-09-30 */ body.catx-on #item_address_loading_modal{ z-index:30060 !important; } /* The detail modal's Bootstrap backdrop already dims the entire page. */ body.catx-on #modal-item.modal_itemScroll{ background: transparent !important; } /* ═══ [거래 상태 변경 모달] 첨부 mockup 디자인으로 개선(catx 한정, 헤더 JS 가 부제목/힌트/요약 주입) ═══ * 공유 셸(admin_item_v2.php)의 모달 CSS(#modal-isfinish_change)를 catx 스코프로 오버라이드 → 비catx 무영향. * 단일열 · 무카드(플랫) · 세그먼트 컨트롤 · 토글박스+힌트 · 푸터 요약 */ body.catx-on #modal-isfinish_change .modal-dialog{ width:min(520px,calc(100% - 32px)) !important; } body.catx-on #modal-isfinish_change .modal_wrap_ver1 .modal_title{ height:auto !important; padding:18px 24px !important; align-items:center !important; } body.catx-on #modal-isfinish_change .catx-ds-head h4{ margin:0 !important; font-size:18px !important; font-weight:700 !important; color:#18181b !important; } body.catx-on #modal-isfinish_change .catx-ds-sub{ margin-top:4px !important; font-size:13px !important; color:#71717a !important; } body.catx-on #modal-isfinish_change .catx-ds-sub b{ color:#3f3f46 !important; font-weight:600 !important; } body.catx-on #isfinish_change_body{ grid-template-columns:1fr !important; gap:20px !important; background:#fff !important; padding:22px 24px !important; } body.catx-on #isfinish_change_body .deal-status-section{ border:0 !important; border-radius:0 !important; padding:0 !important; } body.catx-on #isfinish_change_body .deal-status-section-title{ display:none !important; } body.catx-on #isfinish_change_body .deal-status-section>.isfinish_box{ margin:0 0 14px !important; } body.catx-on #isfinish_change_body .deal-status-section>.isfinish_box:last-child{ margin-bottom:0 !important; } body.catx-on #isfinish_change_body .deal_status_modal_box>span:first-child{ font-size:13px !important; font-weight:600 !important; color:#3f3f46 !important; margin-bottom:8px !important; } /* 거래완료 여부: 세그먼트 컨트롤(회색 컨테이너, 선택=흰색). 앱 인라인 --status-color 는 !important 로 덮음 */ body.catx-on #isfinish_change_body .deal_status_btns{ background:#f4f4f5 !important; padding:4px !important; border-radius:11px !important; gap:4px !important; width:100% !important; box-sizing:border-box !important; } /* 각 상태는 설정된 색상(인라인 --status-color)으로 표시(사용자 요청). 미선택=옅게, 선택=흰 pill+해당색 글자+해당색 링 */ body.catx-on #isfinish_change_body .deal_status_btn{ flex:1 1 0 !important; min-width:0 !important; height:38px !important; line-height:36px !important; border:0 !important; border-radius:8px !important; background:transparent !important; color:var(--status-color,#71717a) !important; opacity:.6 !important; font-weight:600 !important; box-shadow:none !important; } body.catx-on #isfinish_change_body .deal_status_btn.on{ background:#fff !important; color:var(--status-color,#18181b) !important; opacity:1 !important; font-weight:700 !important; box-shadow:0 1px 2px rgba(24,24,27,.12),0 0 0 1px color-mix(in oklab, var(--status-color,#888) 45%, transparent) !important; } body.catx-on #isfinish_change_body .deal_status_btn:hover:not(.on){ opacity:.85 !important; background:rgba(24,24,27,.03) !important; } body.catx-on #isfinish_change_body .deal_status_btn>i{ display:none !important; } /* 날짜 입력 */ body.catx-on #isfinish_change_body .deal_status_modal_box>div{ width:100% !important; max-width:none !important; height:46px !important; padding:0 40px 0 14px !important; border:1px solid #d4d4d8 !important; border-radius:10px !important; } body.catx-on #isfinish_change_body .deal_status_modal_box>div input{ font-size:14px !important; color:#18181b !important; } /* 계약도래 여부: 별도 라벨(위) + 토글 박스(스위치+힌트) */ body.catx-on #isfinish_change_body .catx-ds-flaglabel{ font-size:13px !important; font-weight:600 !important; color:#3f3f46 !important; margin:6px 0 8px !important; } /* 거래완료일(section1 마지막) ↔ 계약도래(section2) 사이 여백 확보(사용자 요청) */ body.catx-on #isfinish_change_body .ordercome-status-section{ margin-top:4px !important; } body.catx-on #isfinish_change_body .ordercome-flag-box{ display:flex !important; align-items:center !important; gap:12px !important; padding:13px 16px !important; border:1px solid #e4e4e7 !important; border-radius:12px !important; box-sizing:border-box !important; } body.catx-on #isfinish_change_body .ordercome-flag-box>span:first-child{ display:none !important; } body.catx-on #isfinish_change_body .ordercome-flag-box .catx-ds-hint{ margin-left:auto !important; font-size:var(--dash-font-12, 12px) !important; color:#9ca3af !important; } /* 푸터: 버튼 가운데 정렬 + 하단 모서리 둥글게(모달 radius 와 일치, 사각 삐짐 방지). 좌측 요약문구는 제거(사용자 요청) */ body.catx-on #modal-isfinish_change .modal_btn_box{ padding:14px 24px !important; background:#fafafa !important; border-top:1px solid #ececef !important; border-radius:0 0 16px 16px !important; overflow:hidden !important; } body.catx-on #modal-isfinish_change .modal_btn_box .btn_wrap{ display:flex !important; align-items:center !important; justify-content:center !important; gap:8px !important; } body.catx-on #modal-isfinish_change .modal_btn_box .catx-ds-summary{ display:none !important; } body.catx-on #modal-isfinish_change .modal_btn_box button.btn{ order:2 !important; min-width:auto !important; padding:0 18px !important; background: var(--cx-accent) !important; border:0 !important; border-radius:10px !important; color:#fff !important; font-weight:700 !important; box-shadow:0 1px 2px rgba(77,141,255,.35) !important; } body.catx-on #modal-isfinish_change .modal_btn_box .btn_999{ order:1 !important; } /* 본문 첫 섹션의 상단 마진 제거(혹시 모를 기본 여백) */ body.catx-on #admin_wrap > section.catxd-wrap{ margin-top:0 !important; } /* #1 다크 대시보드 본문 배경 다크화: 대시보드(.catxd-wrap 있는 페이지)에만 적용. * .admin_main_wrap 은 전 페이지 공통 래퍼라 무조건 투명화하면 다른 페이지(매물목록 등) 배경까지 바뀐다 → :has 로 대시보드 한정. */ body.catx-on #admin_wrap .admin_main_wrap:has(> .catxd-wrap){ background:transparent !important; } /* #3 #admin_wrap padding-top(상단바 높이)이 min-height:100vh 에 더해져 생기는 미세 세로 스크롤 방지 */ body.catx-on #admin_wrap{ box-sizing:border-box; } /* 본문 래퍼(.admin_main_wrap): base JS 가 화면폭별로 width:winW-280 / position:absolute;left:40px 등 * 인라인을 직접 주입해 사이드바(260)와 어긋나거나 우측 여백이 생긴다. 데스크톱에선 이를 무시하고 * #admin_wrap 안을 그대로 꽉 채우도록 강제(오프셋은 #admin_wrap margin-left 가 담당). */ @media (min-width:993px){ body.catx-on #admin_wrap .admin_main_wrap{ position:static !important; top:auto !important; left:auto !important; width:auto !important; max-width:100% !important; min-width:0 !important; margin:0 !important; box-sizing:border-box !important; float:none !important; } /* .catxd-wrap 및 내부 그리드가 컨테이너를 절대 넘지 않게 (오버플로우→잘림 방지) */ body.catx-on #admin_wrap .admin_main_wrap .catxd-wrap{ max-width:100% !important; box-sizing:border-box !important; } body.catx-on .catxd-kpis, body.catx-on .catxd-row-staff, body.catx-on .catxd-row3{ max-width:100%; min-width:0; } /* ★ 핵심 원인: base(admin_style.php:1378) 가 header.style_admin_09 .logo_btm 을 * width:236px !important; position:fixed; top:64px; background:#06152e 로 고정 → * 내부 패널이 236px 라 사이드바(260)와 24px 어긋나 여백처럼 보였다. * style_admin_category 로 더 높은 특이성으로 덮어써 260 을 꽉 채우게 복구. */ body.catx-on #admin_wrap header.style_admin_category .logo_btm{ position:static !important; top:auto !important; left:auto !important; width:100% !important; height:100% !important; background:transparent !important; box-shadow:none !important; z-index:auto !important; padding:12px 10px !important; overflow-y:auto !important; overflow-x:hidden !important; } } /* 사이드바: 경쟁 스크립트의 인라인(width:280px; z-index:0/position)을 덮어써 250px/전면 고정. * position:fixed 가 풀리면 in-flow 로 250px 자리를 차지 + #admin_wrap margin-left:250 이 겹쳐 * 본문이 ~520px 로 이중으로 밀린다 → fixed/top/left 를 !important 로 강제. */ @media (min-width:993px){ body.catx-on #admin_wrap header.style_admin_category{ position:fixed !important; top:var(--cx-topbar-h) !important; left:0 !important; width:var(--cx-sidebar-w) !important; min-width:var(--cx-sidebar-w) !important; max-width:var(--cx-sidebar-w) !important; height:calc(100vh - var(--cx-topbar-h)) !important; z-index:30000 !important; } } /* (2) 라이트모드 좌측 사이드바도 밝게 — 내부 dark bg 강제 해제 */ body.catx-on.catx-light #admin_wrap header.style_admin_category{ background:var(--cx-sidebar) !important; border-right-color:var(--cx-line) !important; } body.catx-on.catx-light #admin_wrap header.style_admin_category .logo_btm, body.catx-on.catx-light #admin_wrap header.style_admin_category .nav_view_box, body.catx-on.catx-light #admin_wrap header.style_admin_category .admin_nav, body.catx-on.catx-light #admin_wrap header.style_admin_category .logo, body.catx-on.catx-light #admin_wrap header.style_admin_category .logo_top{ background:transparent !important; } /* ============================================================================ * 요청 모달 (.cxm) — 용량 추가 / 문자 충전. 시안(다크/라이트) 반영. * 다크가 기본(body.catx-on), 라이트 토글(body.catx-light) 시 팔레트 전환. 안내 전용(결제 없음). * ========================================================================== */ .cxm{ /* 다크: 모달 카드를 대시보드 배경보다 밝게 띄우고(엘리베이션) 테두리·내부면 대비를 강화 */ --m-card:#1e2840; --m-border:#3e4c6b; --m-code:#8493ad; --m-title:#f2f6fc; --m-sub:#9aa6bd; --m-close-bd:#3d4a68; --m-close-bg:#29344e; --m-close-fg:#aab5cb; --m-close-hbg:#33415f; --m-close-hfg:#f2f6fc; --m-close-hbd:#55658c; --m-scard-bg:#26314b; --m-scard-bd:#394663; --m-scard-label:#98a3ba; --m-scard-val:#f2f6fc; --m-scard-unit:#b3bdd0; --m-chip-bg:#29344e; --m-chip-bd:#3d4a68; --m-chip-fg:#bcc6da; --m-chip-on-bg:#3f66b6; --m-chip-on-bd:#5479cc; --m-chip-on-fg:#fff; --m-chip-hbd:#55658c; --m-chip-dash:#46557a; --m-input-bg:#26314b; --m-input-bd:#3d4a68; --m-input-fg:#f2f6fc; --m-input-unit:#9aa6bd; --m-hint:#98a3ba; --m-err:#ef8fab; --m-err-bd:#8a3a5a; --m-price-grad:linear-gradient(160deg,#31518c 0%,#1d2c49 100%); --m-price-bd:#3e4f80; --m-price-sum:#a9bbdc; --m-price-val:#f6f9ff; --m-price-won:#c9d5ec; --m-price-div:rgba(255,255,255,.16); --m-price-foot:#98abcf; --m-note:#b291a6; --m-sec:#e9eef7; --m-acc-bg:#26314b; --m-acc-bd:#394663; --m-ibk-bg:#2f3f63; --m-ibk-fg:#a8bef0; --m-bank:#d7dfee; --m-holder:#98a3ba; --m-accnum:#f6f9ff; --m-copy-fg:#9aa6bd; --m-copy-on:#a8bef0; --m-copy-bg:#29344e; --m-copy-bd:#3d4a68; --m-copy-hbg:#33415f; --m-info-bg:#2c1c28; --m-info-bd:#573349; --m-info-icon:#c07a92; --m-info-title:#f0aec2; --m-info-body:#d3a1b1; --m-info-link:#f0aec2; --m-foot-bd:#394663; --m-foot-bg:#1a2337; --m-pri-bg:#3f66b6; --m-pri-hbg:#5479cc; --m-pri-fg:#fff; --m-sec-bg:#29344e; --m-sec-bd:#3d4a68; --m-sec-fg:#cbd4e6; --m-sec-hbg:#33415f; } body.catx-light .cxm{ --m-card:#ffffff; --m-border:#e6eaf2; --m-code:#9aa3b8; --m-title:#16223d; --m-sub:#8b93a7; --m-close-bd:#e6eaf2; --m-close-bg:#ffffff; --m-close-fg:#7c869e; --m-close-hbg:#f4f6fb; --m-close-hfg:#16223d; --m-close-hbd:#d6dcea; --m-scard-bg:#fbfcfe; --m-scard-bd:#e9edf5; --m-scard-label:#97a0b6; --m-scard-val:#16223d; --m-scard-unit:#6d7690; --m-chip-bg:#ffffff; --m-chip-bd:#dfe5f0; --m-chip-fg:#5c6580; --m-chip-on-bg:#2b477f; --m-chip-on-bd:#2b477f; --m-chip-on-fg:#fff; --m-chip-hbd:#b9c5de; --m-chip-dash:#cdd6e6; --m-input-bg:#ffffff; --m-input-bd:#c3cee4; --m-input-fg:#16223d; --m-input-unit:#7c869e; --m-hint:#97a0b6; --m-err:#c2456a; --m-err-bd:#e2a3b6; --m-price-grad:linear-gradient(160deg,#33528f 0%,#1c3062 100%); --m-price-bd:transparent; --m-price-sum:#b9c8e6; --m-price-val:#fff; --m-price-won:#dbe4f5; --m-price-div:rgba(255,255,255,.16); --m-price-foot:#adbedd; --m-note:#a8768a; --m-sec:#16223d; --m-acc-bg:#fbfcfe; --m-acc-bd:#e9edf5; --m-ibk-bg:#e4eaf7; --m-ibk-fg:#33528f; --m-bank:#3d4762; --m-holder:#97a0b6; --m-accnum:#16223d; --m-copy-fg:#7c869e; --m-copy-on:#2b477f; --m-copy-bg:#ffffff; --m-copy-bd:#dfe5f0; --m-copy-hbg:#eef2fa; --m-info-bg:#fdf5f7; --m-info-bd:#f2dae1; --m-info-icon:#dd9db1; --m-info-title:#a8556e; --m-info-body:#b06d83; --m-info-link:#a8556e; --m-foot-bd:#eef1f7; --m-foot-bg:#fbfcfe; --m-pri-bg:#2b477f; --m-pri-hbg:#1c3062; --m-pri-fg:#fff; --m-sec-bg:#ffffff; --m-sec-bd:#d8dfec; --m-sec-fg:#4c5673; --m-sec-hbg:#f2f5fb; } dialog.cxm{ width:520px; max-width:calc(100vw - 24px); max-height:calc(100vh - 40px); margin:auto; padding:0; border:1px solid var(--m-border); border-radius:18px; background:var(--m-card); color:var(--m-title); font-family:'Apple SD Gothic Neo','NotoSansKR','NanumBarunGothic','nanum gothic','나눔고딕','apple gothic','맑은 고딕','굴림',sans-serif; box-shadow:0 30px 80px rgba(0,0,0,.58); overflow:auto; } dialog.cxm:not([open]){ display:none; } dialog.cxm::backdrop{ background:rgba(5,9,16,.74); } .cxm *{ box-sizing:border-box; } .cxm-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:22px 24px 20px 28px; border-bottom:1px solid var(--m-border); } .cxm-code{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-10_5, 10.5px); font-weight:700; letter-spacing:.14em; color:var(--m-code); } .cxm-title{ margin-top:8px; font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--m-title); } .cxm-sub{ margin-top:6px; font-size:13px; color:var(--m-sub); line-height:1.5; } .cxm-close{ flex:none; width:32px; height:32px; margin-top:2px; padding:0; border:1px solid var(--m-close-bd); background:var(--m-close-bg); border-radius:9px; color:var(--m-close-fg); font-size:15px; line-height:1; font-family:inherit; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s ease; } .cxm-close:hover{ background:var(--m-close-hbg); color:var(--m-close-hfg); border-color:var(--m-close-hbd); } .cxm-summary{ padding:20px 28px 0; display:grid; grid-template-columns:1fr 1fr; gap:10px; } .cxm-scard{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; border:1px solid var(--m-scard-bd); border-radius:12px; padding:11px 14px; background:var(--m-scard-bg); } .cxm-scard-l{ font-size:var(--dash-font-11, 11px); color:var(--m-scard-label); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .cxm-scard-v{ margin-top:0; flex:none; font-size:14px; font-weight:700; color:var(--m-scard-val); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } .cxm-scard-v .u{ font-size:13px; font-weight:500; color:var(--m-scard-unit); margin-left:3px; font-family:'Apple SD Gothic Neo','NotoSansKR','NanumBarunGothic','nanum gothic','나눔고딕','apple gothic','맑은 고딕','굴림',sans-serif; } .cxm-sec-label{ font-size:13.5px; font-weight:700; color:var(--m-sec); } .cxm-field{ padding:22px 28px 0; } .cxm-chips{ margin-top:10px; display:flex; flex-wrap:wrap; gap:8px; } .cxm-chip{ padding:9px 14px; min-width:62px; font-family:inherit; font-size:13px; font-weight:500; border-radius:9px; cursor:pointer; transition:all .15s ease; background:var(--m-chip-bg); border:1px solid var(--m-chip-bd); color:var(--m-chip-fg); } .cxm-chip:hover{ border-color:var(--m-chip-hbd); } .cxm-chip.is-on{ background:var(--m-chip-on-bg); border:1px solid var(--m-chip-on-bd); color:var(--m-chip-on-fg); font-weight:700; } .cxm-chip.cxm-chip-custom{ border-style:dashed; border-color:var(--m-chip-dash); } .cxm-chip.cxm-chip-custom.is-on{ border-style:solid; } .cxm-custom{ margin-top:10px; display:flex; align-items:center; gap:10px; } .cxm-custom[hidden]{ display:none; } .cxm-custom-box{ flex:1; display:flex; align-items:center; border-radius:9px; background:var(--m-input-bg); padding:0 14px; border:1px solid var(--m-input-bd); } .cxm-custom-box.is-err{ border-color:var(--m-err-bd); } .cxm-custom-box input{ flex:1; width:100%; padding:11px 0; border:none; outline:none; background:transparent; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:15px; font-weight:600; color:var(--m-input-fg); } .cxm-custom-box .u{ font-size:13px; font-weight:500; color:var(--m-input-unit); margin-left:6px; } .cxm-custom-hint{ font-size:var(--dash-font-11_5, 11.5px); color:var(--m-hint); white-space:nowrap; } .cxm-err{ margin-top:7px; display:none; align-items:center; gap:6px; font-size:var(--dash-font-12, 12px); font-weight:500; color:var(--m-err); } .cxm-err.is-on{ display:flex; } .cxm-err .mk{ width:15px; height:15px; flex:none; border-radius:50%; background:#c2456a; color:#fff; font-size:var(--dash-font-10, 10px); font-weight:700; display:flex; align-items:center; justify-content:center; } .cxm-price{ margin:18px 28px 0; border-radius:14px; padding:22px 22px 20px; background:var(--m-price-grad); border:1px solid var(--m-price-bd); color:#fff; } .cxm-price-sum{ font-size:var(--dash-font-12, 12px); color:var(--m-price-sum); } .cxm-price-row{ margin-top:8px; display:flex; align-items:baseline; gap:4px; } .cxm-price-val{ font-size:34px; font-weight:700; letter-spacing:-.025em; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; color:var(--m-price-val); } .cxm-price-won{ font-size:16px; font-weight:500; color:var(--m-price-won); } .cxm-price-foot{ margin-top:14px; padding-top:13px; border-top:1px solid var(--m-price-div); display:flex; gap:18px; font-size:var(--dash-font-11_5, 11.5px); color:var(--m-price-foot); flex-wrap:wrap; } .cxm-note{ margin:12px 28px 0; font-size:var(--dash-font-12, 12px); line-height:1.7; color:var(--m-note); } .cxm-pay{ padding:24px 28px 0; } .cxm-account{ margin-top:10px; border:1px solid var(--m-acc-bd); border-radius:12px; background:var(--m-acc-bg); padding:16px 18px; display:flex; align-items:center; justify-content:space-between; gap:14px; } .cxm-account-l{ display:flex; align-items:center; gap:10px; min-width:0; } .cxm-account-l > div:not(.cxm-ibk){ min-width:0; } .cxm-ibk{ width:36px; height:36px; border-radius:10px; background:var(--m-ibk-bg); color:var(--m-ibk-fg); font-size:var(--dash-font-10_5, 10.5px); font-weight:700; display:flex; align-items:center; justify-content:center; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; flex:none; } .cxm-bank{ font-size:13px; font-weight:500; color:var(--m-bank); white-space:nowrap; } .cxm-holder{ margin-top:2px; font-size:var(--dash-font-10_5, 10.5px); color:var(--m-holder); line-height:1.4; } .cxm-account-r{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; justify-content:flex-end; flex:none; } .cxm-accnum{ font-size:16px; font-weight:600; color:var(--m-accnum); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; letter-spacing:-.01em; } .cxm-copy{ margin-top:0; flex:none; padding:5px 10px; font-family:inherit; font-size:var(--dash-font-11, 11px); font-weight:500; color:var(--m-copy-fg); background:var(--m-copy-bg); border:1px solid var(--m-copy-bd); border-radius:7px; cursor:pointer; transition:all .15s ease; } .cxm-copy:hover{ background:var(--m-copy-hbg); } .cxm-copy.is-done{ color:var(--m-copy-on); } .cxm-info{ margin:12px 28px 0; border:1px solid var(--m-info-bd); background:var(--m-info-bg); border-radius:12px; padding:14px 16px; display:flex; gap:10px; } .cxm-info-icon{ flex:none; width:18px; height:18px; margin-top:1px; border-radius:50%; background:var(--m-info-icon); color:#fff; font-size:var(--dash-font-11, 11px); font-weight:700; display:flex; align-items:center; justify-content:center; } .cxm-info-title{ font-size:var(--dash-font-12_5, 12.5px); font-weight:700; color:var(--m-info-title); } .cxm-info-body{ margin-top:4px; font-size:var(--dash-font-12, 12px); line-height:1.7; color:var(--m-info-body); } .cxm-info-body a{ color:var(--m-info-link); display:inline-flex; align-items:center; gap:3px; text-decoration:none; } .cxm-info-body a:hover{ text-decoration:underline; } /* 결제 취소·환불 안내문구 — 모달 하단, 상단 구분선 + 중앙 정렬 + 링크 강조(전역 a 색상에 눌리지 않게 !important) */ .cxm-refund-note{ margin:12px 28px 16px; padding-top:12px; border-top:1px solid var(--m-border); font-size:var(--dash-font-11_5, 11.5px); line-height:1.65; color:var(--m-muted,#7b8498); text-align:center; } .cxm-refund-note a{ color:var(--m-info-link) !important; font-weight:600; text-decoration:underline; text-underline-offset:2px; } .cxm-refund-note a:hover{ opacity:.85; } .cxm-foot{ margin-top:22px; padding:18px 28px 22px; border-top:1px solid var(--m-foot-bd); background:var(--m-foot-bg); display:grid; grid-template-columns:1.15fr 1fr; gap:10px; } .cxm-btn{ padding:14px 12px; font-family:inherit; font-size:14px; border-radius:10px; cursor:pointer; transition:all .15s ease; text-align:center; text-decoration:none; display:flex; align-items:center; justify-content:center; } .cxm-btn-primary{ font-weight:700; color:var(--m-pri-fg); background:var(--m-pri-bg); border:1px solid var(--m-pri-bg); } .cxm-btn-primary:hover{ background:var(--m-pri-hbg); border-color:var(--m-pri-hbg); color:var(--m-pri-fg); } .cxm-btn-secondary{ font-weight:500; color:var(--m-sec-fg); background:var(--m-sec-bg); border:1px solid var(--m-sec-bd); } .cxm-btn-secondary:hover{ background:var(--m-sec-hbg); color:var(--m-sec-fg); } .cxm :focus-visible{ outline:2px solid var(--m-chip-on-bg); outline-offset:2px; } .cxm-unavail{ margin:18px 28px 0; padding:18px; border-radius:12px; background:var(--m-info-bg); border:1px solid var(--m-info-bd); color:var(--m-info-body); font-size:13px; line-height:1.7; } /* KPI 매물 목록 팝업(#dashfilter-modal) — 행은 .catxi-list/.catxi-lrow 재사용, 여기선 스크롤 높이만 지정 */ .dfm-list{ max-height:min(52vh,440px); overflow-y:auto; } .dfm-empty{ padding:26px 0; text-align:center; font-size:13px; color:var(--m-sub); } .dfm-pager{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:14px; padding-top:14px; border-top:1px solid var(--m-border); } .dfm-pg-btn{ padding:6px 14px; font-family:inherit; font-size:var(--dash-font-12_5, 12.5px); font-weight:500; color:var(--m-sec-fg); background:var(--m-sec-bg); border:1px solid var(--m-sec-bd); border-radius:8px; cursor:pointer; transition:all .15s ease; } .dfm-pg-btn:hover:not(:disabled){ background:var(--m-sec-hbg); } .dfm-pg-btn:disabled{ opacity:.45; cursor:default; } .dfm-pg-info{ font-size:var(--dash-font-12, 12px); color:var(--m-sub); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } @media (max-width:560px){ dialog.cxm{ width:calc(100vw - 24px); } .cxm-foot{ grid-template-columns:1fr; } .cxm-account{ flex-direction:column; align-items:flex-start; gap:12px; } .cxm-account-r{ text-align:left; } .dfm-list{ max-height:min(60vh,420px); } } /* 홈페이지 연장 요청 모달 전용 — '현재 홈페이지 정보' + '연장 비용 안내'. .cxm 팔레트(--m-*) 재사용. */ .erm-info{ margin-top:10px; border:1px solid var(--m-acc-bd); border-radius:12px; background:var(--m-acc-bg); padding:4px 18px; } .erm-row{ padding:13px 0; display:flex; align-items:center; justify-content:space-between; gap:12px; } .erm-row + .erm-row{ border-top:1px solid var(--m-border); } .erm-row-top{ align-items:flex-start; } .erm-row-l{ font-size:var(--dash-font-12_5, 12.5px); color:var(--m-scard-label); flex:none; } .erm-doms{ display:flex; flex-wrap:wrap; justify-content:flex-end; gap:5px; max-width:300px; } .erm-dom{ padding:3px 9px; border:1px solid var(--m-chip-bd); border-radius:999px; background:var(--m-chip-bg); font-size:var(--dash-font-11_5, 11.5px); font-weight:500; color:var(--m-sec-fg); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } .erm-dom-count{ padding:3px 9px; border-radius:999px; background:var(--m-ibk-bg); color:var(--m-ibk-fg); font-size:var(--dash-font-11_5, 11.5px); font-weight:700; } .erm-usage{ display:flex; align-items:center; gap:8px; } .erm-bar{ width:76px; height:5px; border-radius:3px; background:var(--m-chip-bd); overflow:hidden; flex:none; } .erm-bar-fill{ height:100%; border-radius:3px; background:#6f92dd; } body.catx-light .erm-bar-fill{ background:#2b477f; } .erm-usage-val{ font-size:13px; font-weight:600; color:var(--m-scard-val); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } .erm-ssl{ display:inline-flex; align-items:center; gap:5px; padding:4px 10px; border-radius:999px; font-size:var(--dash-font-12, 12px); font-weight:700; } .erm-ssl .dot{ width:6px; height:6px; border-radius:50%; background:currentColor; } .erm-ssl.is-ok{ background:#1b3229; color:#77c69b; } .erm-ssl.is-no{ background:#331d26; color:#e58ea8; } body.catx-light .erm-ssl.is-ok{ background:#e6f0ea; color:#2f7550; } body.catx-light .erm-ssl.is-no{ background:#fdf0f3; color:#b4566d; } .erm-cost{ margin:16px 28px 0; border-radius:14px; border:1px solid var(--m-price-bd); padding:16px 18px 15px; background:var(--m-price-grad); color:#fff; } .erm-cost-l{ font-size:var(--dash-font-12, 12px); color:var(--m-price-sum); } .erm-cost-h{ margin-top:5px; font-size:17px; font-weight:700; letter-spacing:-.02em; line-height:1.38; color:var(--m-price-val); } .erm-cost-d{ margin-top:6px; font-size:var(--dash-font-12_5, 12.5px); line-height:1.6; color:var(--m-price-foot); } /* 문의 복사 완료 토스트 — 모달 중앙에 다크 토스트로 노출 + 위아래로 살짝 떠오르는 효과. * position:fixed 로 화면(=모달) 중앙 고정, is-on 시 페이드+바운스. 다크/라이트 공통 다크 토스트. */ /* 반전 토스트 — 다크모드: 밝은 토스트, 라이트모드: 어두운 토스트 (배경과 대비 확보) */ .cxm-copied{ position:fixed; left:50%; top:50%; z-index:5; display:flex; align-items:center; gap:8px; max-width:min(360px, calc(100vw - 56px)); padding:14px 20px; border-radius:12px; background:#f5f8ff; color:#16223d; border:1px solid rgba(20,45,75,.12); font-size:13.5px; font-weight:600; line-height:1.5; text-align:center; box-shadow:0 18px 48px rgba(0,0,0,.55), 0 0 0 4px rgba(95,217,154,.14); opacity:0; visibility:hidden; pointer-events:none; transform:translate(-50%,-50%); transition:opacity .2s ease, visibility .2s ease; } .cxm-copied svg{ flex:none; color:#129a56; } body.catx-light .cxm-copied{ background:#1b2333; color:#f2f6ff; border-color:rgba(255,255,255,.12); box-shadow:0 18px 48px rgba(18,35,61,.30), 0 0 0 4px rgba(47,158,80,.16); } body.catx-light .cxm-copied svg{ color:#5fd99a; } .cxm-copied.is-on{ opacity:1; visibility:visible; animation:ermCopiedBob 2.2s ease-in-out infinite; } @keyframes ermCopiedBob{ 0%,100%{ transform:translate(-50%,-50%); } 50%{ transform:translate(-50%, calc(-50% - 7px)); } } /* 직접입력 필드 포커스 개선: 하드 아웃라인 대신 컨테이너 강조 테두리 + 부드러운 링 */ .cxm-custom-box input:focus-visible{ outline:none; } .cxm-custom-box:focus-within{ border-color:var(--m-chip-on-bg); box-shadow:0 0 0 3px color-mix(in oklab, var(--m-chip-on-bg) 24%, transparent); } /* 용량 초과 안내 등 멀티라인 에러 */ #hsm-err-msg{ white-space:pre-line; text-align:left; } /* 라이트 사이드바 — base(.logo_btm #06152e 등)·래퍼 배경을 제압. 순백 대신 아주 연한 회색(사용자 요청: 메뉴 배경 연회색). */ body.catx-on.catx-light #admin_wrap header.style_admin_category, body.catx-on.catx-light #admin_wrap header.style_admin_category .logo_btm, body.catx-on.catx-light #admin_wrap header.style_admin_category .nav_view_box, body.catx-on.catx-light #admin_wrap header.style_admin_category .admin_nav, body.catx-on.catx-light #admin_wrap header.style_admin_category .catx-nav{ background:#f4f5f7 !important; } /* ============================================================================ * 매물관리용 대시보드(dashboard_style 41, admin_main_category_item.php) 전용 * — 헤더/메뉴/팔레트(--cx-*)는 직원관리용과 공유, 본문 레이아웃만 .catxi-* 로 정의. * 다크(body.catx-on) 기본 + 라이트(body.catx-light)는 --cx-* 변수 스왑으로 자동 대응. * ==========================================================================*/ /* KPI 6카드 그리드 */ body.catx-on .catxi-kpigrid{ display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:clamp(9px,1.1vw,13px); } @media (max-width:1439px){ body.catx-on .catxi-kpigrid{ grid-template-columns:repeat(3,minmax(0,1fr)); } } @media (max-width:700px){ body.catx-on .catxi-kpigrid{ grid-template-columns:repeat(2,minmax(0,1fr)); } } /* 매물연동용(42) 상단: 광고 KPI 2그룹(각 3장) + 정보 패널(용량/만료일/잔여문자) — 아래 3열(발송목록/발송추이/ * 최근작업)과 동일한 grid-template-columns 를 써서 정보 패널 가로폭을 '최근 작업' 칸과 정확히 맞춘다. */ body.catx-on .catxi-adtoprow{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(10px,1.2vw,14px); } body.catx-on .catxi-adkpi-group{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(9px,1.1vw,13px); } @media (max-width:1439px){ body.catx-on .catxi-adtoprow{ grid-template-columns:1fr; } } body.catx-on .catxi-kpi{ min-width:0; display:flex; flex-direction:column; gap:8px; border:1px solid var(--cx-line); border-radius:14px; background:var(--cx-card); box-shadow:var(--cx-shadow); padding:clamp(9px,1vh,12px) 14px; cursor:pointer; text-decoration:none; color:inherit; transition:transform .15s ease,border-color .15s ease; } body.catx-on .catxi-kpi:hover{ border-color:var(--cx-hover-line); transform:translateY(-2px); } /* 클릭 이벤트 없는 정적 KPI(광고 상태) — 커서/hover 제거 */ body.catx-on .catxi-kpi-static{ cursor:default; } body.catx-on .catxi-kpi-static:hover{ border-color:var(--cx-line); transform:none; } /* 광고상태 KPI 카드(버튼형, 클릭→모달): 버튼 기본값 리셋 + 클릭 가능 표시 */ body.catx-on .catxi-sync .catxi-kpi-pop{ cursor:pointer; text-align:left; width:100%; font:inherit; color:inherit; -webkit-appearance:none; appearance:none; } body.catx-on .catxi-sync .catxi-kpi-pop:hover{ border-color:var(--cx-hover-line); background:var(--cx-hover-bg); } body.catx-on .catxi-kpi-top{ display:flex; align-items:center; gap:8px; } body.catx-on .catxi-kpi-ico{ width:26px; height:26px; border-radius:9px; flex-shrink:0; display:flex; align-items:center; justify-content:center; } body.catx-on .catxi-kpi-name{ flex:1; min-width:0; font-size:var(--dash-font-12, 12px); font-weight:600; color:var(--cx-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 매물관리용(41) KPI 6칸 라벨만 2px 크게. 모바일(≤700px)에서는 자리가 좁아 줄임표가 생기므로 * min-width 로 감싸 기존 축소 규칙(11px/10px)을 건드리지 않는다. */ @media (min-width:701px){ body.catx-on .catxi-item .catxi-kpigrid .catxi-kpi-name{ font-size:14px; } } /* 매물연동용 상단 광고 상태 카드의 제목만 강조한다. */ body.catx-on .catxi-sync .catxi-adtoprow .catxi-kpi-name{ font-size:14px; font-weight:700; } body.catx-on .catxi-kpi-hint{ flex-shrink:0; font-size:var(--dash-font-10_5, 10.5px); font-weight:500; color:var(--cx-sub); white-space:nowrap; } body.catx-on .catxi-kpi-btn{ flex-shrink:0; align-self:center; margin-left:auto; display:inline-flex; align-items:center; gap:3px; padding:4px 10px; border-radius:8px; background:var(--cx-home-bg); border:1px solid var(--cx-home-line); font-size:var(--dash-font-11, 11px); font-weight:600; color:var(--cx-accent-text); white-space:nowrap; line-height:1.3; } body.catx-on .catxi-kpi:hover .catxi-kpi-btn{ border-color:var(--cx-hover-line); } body.catx-on .catxi-kpi-btn.is-pink{ background:color-mix(in oklab, #e0568a 20%, transparent); border-color:color-mix(in oklab, #e0568a 46%, transparent); color:#ff9dc0; } body.catx-on.catx-light .catxi-kpi-btn.is-pink{ background:color-mix(in oklab, #e0568a 13%, #ffffff); border-color:color-mix(in oklab, #e0568a 42%, transparent); color:#c31e63; } body.catx-on .catxi-kpi:hover .catxi-kpi-btn.is-pink{ border-color:color-mix(in oklab, #e0568a 70%, transparent); } /* 연장신청 버튼: 만료 임박 안내용 부드러운 깜박임(글로우+투명도) — 고객 주목 유도 */ @keyframes catxiExtendBlink{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(224,86,138,0); } 50%{ opacity:.6; box-shadow:0 0 8px 1px rgba(224,86,138,.55); } } body.catx-on .catxi-kpi-btn.is-pink{ animation:catxiExtendBlink 1.5s ease-in-out infinite; } @media (prefers-reduced-motion: reduce){ body.catx-on .catxi-kpi-btn.is-pink{ animation:none; } } body.catx-on .catxi-kpi-val{ flex-wrap:wrap; row-gap:6px; } body.catx-on .catxi-kpi-val{ display:flex; align-items:baseline; gap:4px; } body.catx-on .catxi-kpi-val b{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:clamp(19px,2vw,24px); font-weight:700; line-height:1.05; color:var(--cx-strong); } body.catx-on .catxi-kpi-val em{ font-size:var(--dash-font-12, 12px); font-style:normal; color:var(--cx-sub); } /* 매물관리용 세로 컴팩트(직원관리용 영향 없이 .catxi-dash 스코프로만) */ body.catx-on .catxi-dash{ gap:clamp(8px,0.9vw,11px); padding-top:clamp(10px,1vw,14px); padding-bottom:clamp(10px,1.1vw,16px); } body.catx-on .catxi-dash .catxd-panel{ min-height:0; padding:16px; } body.catx-on .catxi-dash .catxd-panel-head{ margin-bottom:9px; } body.catx-on .catxi-dash .catxi-kpigrid{ gap:clamp(8px,0.9vw,11px); } body.catx-on .catxi-dash .catxd-head{ margin-bottom:2px; } /* 매물관리용(41, .catxi-item) 전용: .catxd-wrap 이 min-height:100vh + 행 flex-grow(row-staff 1.9/row3 1) 로 뷰포트를 채우려 stretch 돼 * 카드가 콘텐츠보다 과하게 커지고 statrow 가 벌어졌음 → 콘텐츠 높이대로 나오게 채움 stretch 해제 + row3 355 캡 제외. * (매물연동용 42 는 .catxi-item 클래스가 없어 영향 없음) */ body.catx-on .catxd-wrap.catxi-item{ min-height:0; } /* [매물연동용 42] 매물/고객 현황 통계: 2칸 그리드 + 문구 앞 아이콘 */ body.catx-on .catxi-sync .catxs-statgrid{ display:grid; grid-template-columns:1fr 1fr; gap:7px; margin-bottom:10px; } /* [42] 3행 매물/고객 현황: 3카드와 바로 아래 통계행이 딱 붙어 답답하던 부분에 여백. * 41(.catxi-item)은 카드 다음 .catxi-cli-list 가 이미 margin-top 을 갖고 있어 제외하고 42 만 적용. */ body.catx-on .catxi-sync .catxi-summary-row .catxi-cli3{ margin-bottom:12px; } body.catx-on .catxi-sync .catxs-statrow{ gap:7px; } body.catx-on .catxi-sync .catxs-statrow > .catxs-stat-ico{ flex:0 0 auto !important; width:22px; height:22px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; } body.catx-on .catxi-sync .catxs-statrow > .catxs-stat-lb{ flex:1; min-width:0; font-size:var(--dash-font-12_5, 12.5px); color:var(--cx-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body.catx-on .catxi-sync .catxi-summary-row .catxs-statrow > .catxs-stat-lb{ font-size:13.5px; } body.catx-on .catxi-sync .catxi-summary-row .catxs-statrow > b{ font-size:15px; } body.catx-on .catxi-sync .catxi-summary-row .catxs-statrow > em{ font-size:var(--dash-font-12, 12px); } body.catx-on .catxi-sync .catxi-summary-row .catxi-addbtn{ font-size:13px; font-weight:700; } @media(min-width:993px){ body.catx-on .catxd-wrap.catxi-sync > .catxd-row3.catxi-summary-row{flex:0 0 auto;} body.catx-on .catxi-sync .catxi-summary-row .catxd-panel{padding:14px;} body.catx-on .catxi-sync .catxi-summary-row .catxi-addbtn{margin-top:auto!important;} body.catx-on .catxi-sync .catxi-summary-row .catxi-clirows{margin-bottom:10px;} body.catx-on .catxi-sync .catxi-summary-row .catxi-clirows .catxi-statrow{flex:1;align-items:center;} body.catx-on .catxi-sync .catxi-summary-row .catxi-sol{flex:1;gap:10px;} body.catx-on .catxi-sync .catxi-summary-row .catxi-sol-item{flex:1;display:flex;flex-direction:column;justify-content:center;box-shadow:none;} } @media(min-width:993px){ body.catx-on .catxd-wrap.catxi-sync{min-height:calc(100dvh - var(--cx-topbar-h));} body.catx-on .catxd-wrap.catxi-sync > .catxd-row3{flex:1 1 auto;align-items:stretch;} body.catx-on .catxd-wrap.catxi-sync > .catxd-row3 > .catxd-panel{max-height:none;} } /* 3행(매물현황/고객현황/홈페이지방문현황)에 .catxs-body 가 들어가면서 관리자 전용 * ":has(.catxs-body) .catxd-row3{flex:0 0 auto;...} / .catxd-panel{max-height:355px;...}" 규칙(특이도가 더 높음)이 * 매물연동용 두 .catxd-row3(발송목록 행 포함) 모두에 같이 걸려 패널이 355px로 잘리는 것을 방지. * .catxi-dash 를 더해 더 높은 특이도로 원래 값(위 993px 블록과 동일)을 다시 고정한다. */ @media(min-width:993px){ /* 2행(발송목록/추이/작업)·3행(매물/고객/방문) 세로 균등: 둘 다 flex:1 1 auto + 내부 리스트 스크롤. * (grow 비율을 0.85:1.15 로 바꿔본 적 있으나 남는 공간이 없어 시각 변화가 없었음 → 균등으로 원복. * 3행 여백은 아래 .catxi-cli3 margin-bottom 처럼 콘텐츠 간격으로 확보한다.) */ body.catx-on .catxd-wrap.catxi-sync.catxi-dash > .catxd-row3, body.catx-on .catxd-wrap.catxi-sync.catxi-dash > .catxd-row3.catxi-summary-row{flex:1 1 auto;align-items:stretch;} body.catx-on .catxd-wrap.catxi-sync.catxi-dash > .catxd-row3 > .catxd-panel{max-height:none;display:flex;flex-direction:column;min-height:0;} body.catx-on .catxd-wrap.catxi-sync.catxi-dash > .catxd-row3 .catxi-list{flex:1;min-height:0;overflow-y:auto;} /* 매물/고객 현황 통계 그리드가 남은 세로를 채워 여백 제거(행 균등 확대) */ body.catx-on .catxd-wrap.catxi-sync.catxi-dash > .catxd-row3.catxi-summary-row .catxs-statgrid{flex:1;min-height:0;grid-auto-rows:1fr;} } /* 홈페이지 방문 현황 차트(매물연동용): 관리자 :not(.catxi-dash) 전용 처리(차트 flex:1, 막대 height:100%)를 * .catxi-sync 에도 동일 적용 — 안 하면 막대가 고정 60px 로 남고 패널 하단에 빈 여백이 생긴다. */ body.catx-on .catxi-sync .catxd-row3 .catxd-visit-chart{ flex:1; min-height:120px; } body.catx-on .catxi-sync .catxd-row3 .catxd-vc-bars{ flex:1; min-height:90px; } body.catx-on .catxi-sync .catxd-row3 .catxd-vc-bar{ height:100%; } /* [매물관리용2(43), .catxi-item] 방문현황 차트: 배경박스 + 패널 세로 채움(catxs-body 미사용이라 별도 지정 — :has(.catxs-body) 40앱셸 규칙 회피 목적) */ body.catx-on .catxi-item .catxd-row3 > .catxd-panel:has(.catxd-visit-chart){ display:flex; flex-direction:column; } body.catx-on .catxi-item .catxd-row3 > .catxd-panel:has(.catxd-visit-chart) > .catxd-panel-body{ flex:1; min-height:0; display:flex; flex-direction:column; } body.catx-on .catxi-item .catxd-row3 .catxd-visit-chart{ flex:1; min-height:120px; padding:22px 10px 8px; border:1px solid var(--cx-line-soft); border-radius:10px; background:color-mix(in oklab,var(--cx-row) 40%,white); } body.catx-on .catxi-item .catxd-row3 .catxd-vc-bars{ flex:1; min-height:90px; } body.catx-on .catxi-item .catxd-row3 .catxd-vc-bar{ height:100%; } body.catx-on .catxi-top-viewed{min-height:300px;overflow:hidden;} body.catx-on .catxi-top-viewed > .catxi-list{flex:1 1 0;min-height:0;overflow-y:auto;overflow-x:hidden;} body.catx-on .catxi-top-viewed > .catxi-list .catxi-lrow{flex-shrink:0;} @media(max-width:992px){body.catx-on .catxi-top-viewed > .catxi-list{flex:0 1 auto;max-height:320px;}} /* [41] 많이 본 매물 최소 높이 복구. * 위 .catxi-top-viewed{min-height:300px}(특이도 0,2,1)가 아래 row3 규칙 * .catxd-wrap.catxi-item > .catxd-row3 > .catxd-panel{min-height:0}(0,5,1) * .catxi-item .catxd-row3 > .catxd-panel{min-height:0}(0,3,1) * 에 밀려 무력화 → 폭을 줄이면 목록(flex:1 1 0)이 0 이 되며 헤더만 남고 접히던 문제. * 더 높은 특이도(0,6,1)로 최소 높이를 되살리되, 짧은 뷰포트에서 페이지 스크롤이 * 과해지지 않도록 고정 300px 대신 뷰포트 연동 clamp 사용. */ body.catx-on .catxd-wrap.catxi-item > .catxd-row3 > .catxd-panel.catxi-top-viewed{ min-height:clamp(200px,32vh,300px); } @media(min-width:993px){ body.catx-on .catxd-wrap.catxi-item{min-height:calc(100dvh - var(--cx-topbar-h));} body.catx-on .catxd-wrap.catxi-item > .catxd-row-staff{flex:1.1 0 auto;} body.catx-on .catxd-wrap.catxi-item > .catxd-row3{flex:1 1 auto;min-height:0;} body.catx-on .catxd-wrap.catxi-item > .catxd-row3 > .catxd-panel{max-height:none;} /* 매물관리용(41) 넓은 화면 스크롤 방지: 위 두 flex-grow 행이 '남은 세로'를 나눠 갖게 했는데, * 패널(catxd-panel)의 기본 min-height(콘텐츠 기준 auto)가 grid stretch 를 뚫고 넘쳐서 * wrap 이 뷰포트보다 커지고 페이지 스크롤이 생기던 문제. min-height:0 으로 stretch 가 실제로 * 적용되게 하고, 넘치는 내용은 패널 내부(.catxi-list/.catxi-clirows 등)에서만 스크롤한다. * 그래도 남는 미세한 잔여 스크롤은 3행(row3) 자체의 flex-shrink 를 0→1 + min-height:0 으로 열어 * 마지막 몇 px 까지 안쪽 리스트가 흡수하도록 함(2행 row-staff 는 그대로 유지). */ body.catx-on .catxd-wrap.catxi-item > .catxd-row-staff > .catxd-panel, body.catx-on .catxd-wrap.catxi-item > .catxd-row3 > .catxd-panel{ min-height:0; } } body.catx-on .catxi-item .catxd-row-staff, body.catx-on .catxi-item .catxd-row3{ flex:0 0 auto; } /* PC: 목록 패널(하단 TOP5/고객/최근작업 + 오래된 매물) 최대 세로 355px — 넘칠 때만 목록 내부 스크롤. 통계패널(매물관리현황)은 버튼 잘림 방지로 제외 */ @media (min-width:993px){ body.catx-on .catxi-dash .catxd-row3 .catxd-panel{ max-height:355px; box-sizing:border-box; } body.catx-on .catxi-dash .catxi-clirows{ overflow-y:auto; } /* 매물관리용(41) row3: '많이 본 매물 TOP5'(≈342px) 높이 기준으로 맞춤 → 최근 매물 작업 등 넘치는 목록은 내부 스크롤 */ body.catx-on .catxi-item .catxd-row3 .catxd-panel{ max-height:344px; box-sizing:border-box; } /* 솔루션 정보는 목록이 아니라 3개 고정 카드 → 355px 캡 제외(내용 넘침 방지). 넘칠 땐 내부 스크롤 */ body.catx-on .catxi-dash .catxd-row3 .catxi-solpanel{ max-height:none; } body.catx-on .catxi-dash .catxd-row3 .catxi-solpanel .catxi-sol{ min-height:0; } } /* 직원관리용(40) 관리자뷰 — 넓은 화면(≥1181px, KPI행이 1줄로 펴지는 폭)에서 대시보드를 뷰포트 높이에 맞춰 * 페이지 스크롤 제거. wrap을 (100vh - topbar) 고정높이 flex컬럼으로 → head/KPI행은 자연높이, 2·3행이 남은 * 공간을 같은 비율로 나누고, 직원 표와 일정은 내부 스크롤. :has(.catxd-sttable)로 40 관리자뷰만 타깃(41/42 무영향). * (993~1180px에선 KPI행이 2줄로 접혀 남는 세로가 부족 → 이 처리 제외, 자연 흐름/스크롤 허용) */ @media (min-width:1181px){ body.catx-on .catxd-wrap:has(.catxd-sttable){ height:calc(100vh - var(--cx-topbar-h)); min-height:0; } body.catx-on .catxd-wrap:has(.catxd-sttable) .catxd-row-staff{ flex:1 1 0; min-height:0; } body.catx-on .catxd-wrap:has(.catxd-sttable) .catxd-row3{ flex:1 1 0; min-height:0; } body.catx-on .catxd-row-staff:has(.catxd-sttable) .catxd-panel{ max-height:none; min-height:0; } body.catx-on .catxd-row-staff:has(.catxd-sttable) .catxd-panel-body.catxd-scroll{ overflow-y:auto; min-height:0; } } /* 공용: 패널 헤더 우측 chip/링크, 스크롤 목록 */ body.catx-on .catxi-chip{ display:inline-flex; align-items:center; gap:6px; padding:5px 10px; border-radius:9px; background:var(--cx-row); border:1px solid var(--cx-line); font-size:var(--dash-font-11_5, 11.5px); color:var(--cx-body); cursor:pointer; } body.catx-on .catxi-chip:hover{ border-color:var(--cx-hover-line); } body.catx-on .catxi-list{ flex:1; min-height:0; overflow-y:auto; } body.catx-on .catxi-lrow{ display:flex; align-items:center; gap:10px; padding:clamp(6px,.9vh,10px) 3px; border-top:1px solid var(--cx-line-soft); cursor:pointer; text-decoration:none; } body.catx-on .catxi-lrow:first-child{ border-top:0; } body.catx-on .catxi-lrow:hover{ background:var(--cx-hover-bg); } /* 클릭 이벤트 없는 행(최근 고객 작업): 커서/hover 제거 */ body.catx-on .catxi-lrow-noclick{ cursor:default; } body.catx-on .catxi-lrow-noclick:hover{ background:none; } body.catx-on .catxi-lname{ flex:1; min-width:0; font-size:var(--dash-font-12_5, 12.5px); font-weight:600; color:var(--cx-strong); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.catx-on .catxi-lmeta{ font-size:var(--dash-font-11, 11px); color:var(--cx-sub); white-space:nowrap; } /* 매물 관리 현황: 좌 통계행 + 우 미니 막대차트 */ body.catx-on .catxi-mgmt{ flex:1; min-height:0; display:grid; grid-template-columns:minmax(190px,.85fr) minmax(0,1.15fr); gap:14px; } @media (max-width:560px){ body.catx-on .catxi-mgmt{ grid-template-columns:1fr; } } body.catx-on .catxi-statcol{ min-width:0; display:flex; flex-direction:column; gap:8px; } body.catx-on .catxi-statrows{ flex:1; min-height:0; display:flex; flex-direction:column; gap:9px; } body.catx-on .catxi-statrow{ display:flex; align-items:center; gap:8px; padding:clamp(6px,0.7vh,8px) 12px; border-radius:10px; background:var(--cx-chip); border:1px solid var(--cx-line); } body.catx-on .catxi-statrow > span:first-child{ flex:1; min-width:0; font-size:var(--dash-font-12_5, 12.5px); color:var(--cx-body); white-space:nowrap; } body.catx-on .catxi-statrow b{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:14px; font-weight:700; } body.catx-on .catxi-statrow em{ font-size:var(--dash-font-11, 11px); font-style:normal; color:var(--cx-sub); } body.catx-on .catxi-addbtn{ flex-shrink:0; display:flex; align-items:center; justify-content:center; gap:5px; padding:7px 12px; border-radius:11px; background:var(--cx-home-bg); border:1px solid var(--cx-home-line); font-size:var(--dash-font-12, 12px); font-weight:600; color:var(--cx-accent-text); text-decoration:none; cursor:pointer; transition:background .12s ease, border-color .12s ease; } /* hover: 크기 변화 없이 배경 농도 + 테두리만 강조(클릭 가능 인지성) */ body.catx-on .catxi-addbtn:hover{ background:linear-gradient(100deg, color-mix(in oklab, var(--cx-accent) 44%, transparent), color-mix(in oklab, var(--cx-accent) 22%, transparent)); border-color:var(--cx-hover-line); } /* 보라 변형(고객 등록) — 인라인 style 로는 hover 가 안 먹어 클래스로 분리 */ body.catx-on .catxi-addbtn.is-violet{ background:color-mix(in oklab, var(--cx-violet-v) 14%, transparent); border-color:color-mix(in oklab, var(--cx-violet-v) 30%, transparent); color:var(--cx-violet-v); } body.catx-on .catxi-addbtn.is-violet:hover{ background:color-mix(in oklab, var(--cx-violet-v) 26%, transparent); border-color:color-mix(in oklab, var(--cx-violet-v) 55%, transparent); } body.catx-on .catxi-chartcol{ min-width:0; display:flex; flex-direction:column; gap:9px; } body.catx-on .catxi-legend{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; font-size:var(--dash-font-11, 11px); color:var(--cx-body); } body.catx-on .catxi-legend .lg{ display:flex; align-items:center; gap:5px; } body.catx-on .catxi-legend .dot{ width:8px; height:8px; border-radius:3px; } body.catx-on .catxi-legend .cap{ flex:1; min-width:0; font-size:var(--dash-font-11_5, 11.5px); color:var(--cx-sub); white-space:nowrap; } body.catx-on .catxi-chart{ flex:1; min-height:96px; display:flex; flex-direction:column; gap:6px; } body.catx-on .catxi-chart-bars{ flex:1; min-height:0; display:flex; align-items:flex-end; gap:clamp(6px,1vw,14px); padding-bottom:6px; border-bottom:1px solid var(--cx-line); } body.catx-on .catxi-chart-bars > div{ flex:1; min-width:0; height:100%; display:flex; align-items:flex-end; justify-content:center; gap:3px; } body.catx-on .catxi-chart-bars i{ width:9px; border-radius:3px 3px 0 0; display:block; } body.catx-on .catxi-chart-days{ display:flex; gap:clamp(6px,1vw,14px); } body.catx-on .catxi-chart-days span{ flex:1; text-align:center; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-9_5, 9.5px); color:var(--cx-sub2); } /* ── [매물관리용 41 전용] 매물 관리 현황: 2열 박스 그리드 + 아이콘 + 그래프 배경박스 (.catxi-item 스코프 → 연동42 무영향) ── */ body.catx-on .catxi-item .catxi-mgmt{ grid-template-columns:minmax(300px,1.05fr) minmax(0,.95fr); } body.catx-on .catxi-item .catxi-statgrid{ flex:1; min-height:0; display:grid; grid-template-columns:1fr 1fr; grid-auto-rows:1fr; gap:8px; } body.catx-on .catxi-item .catxi-statbox{ display:flex; align-items:center; gap:7px; padding:8px 10px; border-radius:10px; background:var(--cx-chip); border:1px solid var(--cx-line); min-width:0; } body.catx-on .catxi-item .catxi-statbox-ic{ flex:0 0 auto; width:24px; height:24px; display:inline-flex; align-items:center; justify-content:center; border-radius:7px; } body.catx-on .catxi-item .catxi-statbox-label{ flex:1; min-width:0; font-size:var(--dash-font-11_5, 11.5px); color:var(--cx-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 매물관리용(41) 매물 관리 현황 통계 라벨 1px 크게. 모바일(10.5px)은 그대로. */ @media (min-width:701px){ body.catx-on .catxi-item .catxi-statbox-label{ font-size:var(--dash-font-12_5, 12.5px); } } body.catx-on .catxi-item .catxi-statbox-val{ flex:0 0 auto; display:flex; align-items:baseline; gap:2px; } body.catx-on .catxi-item .catxi-statbox-val b{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:18px; font-weight:800; } body.catx-on .catxi-item .catxi-statbox-val em{ font-size:var(--dash-font-10_5, 10.5px); font-style:normal; color:var(--cx-sub); } body.catx-on .catxi-item .catxi-chartcol{ background:var(--cx-chip); border:1px solid var(--cx-line); border-radius:10px; padding:12px; } /* [42] 7일 발송 추이 그래프도 41(.catxi-chartcol)과 동일한 박스로 감싼다. * 42 는 별도 래퍼가 없어 .catxi-chart 에 직접 적용. 인라인 min-height:120px 가 있어 * padding 이 높이에 더해지지 않도록 box-sizing:border-box 를 함께 지정. */ body.catx-on .catxi-sync .catxi-chart{ box-sizing:border-box; background:var(--cx-chip); border:1px solid var(--cx-line); border-radius:10px; padding:12px; } @media (max-width:560px){ body.catx-on .catxi-item .catxi-mgmt{ grid-template-columns:1fr; } /* 통계 박스는 모바일에서도 2칸 유지(요청) */ /* 모바일은 폭이 좁아 문구 잘림 → 통계 박스 앞 아이콘 숨겨 문구 공간 확보(요청) */ body.catx-on .catxi-item .catxi-statbox-ic{ display:none !important; } body.catx-on .catxi-item .catxi-statbox{ padding-left:11px; } } /* 오래된 매물: 3버킷 + 목록 */ body.catx-on .catxi-buckets{ flex-shrink:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:11px; } /* 버킷 색상은 인라인 대신 --bk(색) / --bk-bg(배경%) / --bk-bd(테두리%) 변수로 받는다. * 인라인 background/border 로는 :hover 가 덮이지 않아 마우스 오버 효과가 안 먹기 때문. */ body.catx-on .catxi-bucket{ display:flex; flex-direction:column; align-items:center; gap:3px; padding:clamp(7px,1.05vh,11px) 8px; border-radius:12px; cursor:pointer; text-align:left; font:inherit; background:color-mix(in oklab, var(--bk) var(--bk-bg), var(--cx-panel)); border:1px solid color-mix(in oklab, var(--bk) var(--bk-bd), transparent); transition:background .12s ease, border-color .12s ease; } /* hover: 크기 변화 없이 각 버킷 고유색의 배경·테두리만 진하게 */ body.catx-on .catxi-bucket:hover{ background:color-mix(in oklab, var(--bk) 20%, var(--cx-panel)); border-color:color-mix(in oklab, var(--bk) 72%, transparent); } body.catx-on .catxi-bucket .bl{ font-size:var(--dash-font-11_5, 11.5px); color:var(--cx-sub); white-space:nowrap; } /* 오래된 매물 구간 라벨(30/60/90일 이상) 1px 크게. 모바일(10.5px)은 그대로. */ @media (min-width:701px){ body.catx-on .catxi-item .catxi-bucket .bl{ font-size:var(--dash-font-12_5, 12.5px); } } body.catx-on .catxi-bucket .bv{ display:flex; align-items:baseline; gap:2px; } body.catx-on .catxi-bucket .bv b{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:clamp(17px,1.9vw,21px); font-weight:700; } body.catx-on .catxi-bucket .bv em{ font-size:var(--dash-font-11, 11px); font-style:normal; color:var(--cx-sub); } /* 고객 현황: 상단 요약 + 통계행 */ body.catx-on .catxi-cli-top{ flex-shrink:0; display:flex; align-items:center; gap:12px; padding:clamp(9px,1vh,11px) 14px; border-radius:13px; background:var(--cx-row); border:1px solid var(--cx-line-soft); margin-bottom:10px; } body.catx-on .catxi-cli-ico{ width:36px; height:36px; border-radius:11px; background:var(--cx-home-bg); border:1px solid var(--cx-home-line); display:flex; align-items:center; justify-content:center; flex-shrink:0; } body.catx-on .catxi-cli-top .cl{ flex:1; min-width:0; font-size:var(--dash-font-12, 12px); color:var(--cx-body); } body.catx-on .catxi-cli-top .cv{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:clamp(18px,1.7vw,21px); font-weight:700; color:var(--cx-strong); } body.catx-on .catxi-cli-top .cu{ font-size:var(--dash-font-11_5, 11.5px); color:var(--cx-sub); } body.catx-on .catxi-clirows{ flex:1; min-height:0; display:flex; flex-direction:column; gap:8px; } /* 태그(등록/수정/삭제) */ body.catx-on .catxi-tag{ flex-shrink:0; font-size:var(--dash-font-10_5, 10.5px); font-weight:600; padding:3px 8px; border-radius:7px; white-space:nowrap; } body.catx-on .catxi-rank{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-11_5, 11.5px); font-weight:700; width:12px; text-align:center; flex-shrink:0; } body.catx-on .catxi-thumb{ width:34px; height:26px; border-radius:7px; background:var(--cx-track); border:1px solid var(--cx-line-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; } body.catx-on .catxi-views b{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:13px; font-weight:700; color:var(--cx-accent-text); } body.catx-on .catxi-views em{ font-size:var(--dash-font-10_5, 10.5px); font-style:normal; color:var(--cx-sub); } /* [매물관리용 41] 고객 현황: 상단 3칸 스탯 + 하단 고객 목록 */ body.catx-on .catxd-wrap .catxi-cli3{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; flex:0 0 auto; } body.catx-on .catxd-wrap .catxi-cli3box{ display:flex; flex-direction:column; align-items:center; gap:2px; padding:12px 6px; border-radius:10px; background:var(--cx-chip); border:1px solid var(--cx-line); text-decoration:none; min-width:0; } body.catx-on .catxd-wrap .catxi-cli3-ic{ width:26px; height:26px; display:inline-flex; align-items:center; justify-content:center; border-radius:8px; margin-bottom:3px; flex:0 0 auto; } body.catx-on .catxd-wrap .catxi-cli3-v{ display:flex; align-items:baseline; gap:1px; } body.catx-on .catxd-wrap .catxi-cli3-v b{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:18px; font-weight:800; } body.catx-on .catxd-wrap .catxi-cli3-v em{ font-size:var(--dash-font-10, 10px); font-style:normal; color:var(--cx-sub); } body.catx-on .catxd-wrap .catxi-cli3-l{ font-size:var(--dash-font-11, 11px); color:var(--cx-body); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } body.catx-on .catxi-sync .catxi-summary-row .catxi-cli3-l{ font-size:var(--dash-font-12, 12px); } /* 매물관리용(41) 고객 현황 3칸 라벨(전체/손님지/물건지 고객)만 1px 크게. * 모바일(≤700px)에는 10px 로 줄이는 규칙이 있어 min-width 로 감싼다. */ @media (min-width:701px){ body.catx-on .catxi-item .catxi-cli3-l{ font-size:var(--dash-font-12, 12px); } } body.catx-on .catxi-item .catxi-cli-list{ flex:1; min-height:0; margin-top:9px; } body.catx-on .catxi-item .catxi-cli-avt{ flex:0 0 auto; width:28px; height:28px; display:inline-flex; align-items:center; justify-content:center; border-radius:50%; background:var(--cx-chip); border:1px solid var(--cx-line); } /* 고객 목록 행 한 줄: 분류칩 | 이름 | 연락처 */ body.catx-on .catxi-item .catxi-cli-list .catxi-lrow{ align-items:center; gap:7px; } body.catx-on .catxi-item .catxi-cli-type{ flex:0 0 auto; display:inline-flex; align-items:center; padding:2px 8px; border-radius:999px; background:color-mix(in oklab, var(--cx-accent) 12%, transparent); border:1px solid color-mix(in oklab, var(--cx-accent) 26%, transparent); color:var(--cx-accent-text); font-size:var(--dash-font-10_5, 10.5px); font-weight:600; white-space:nowrap; } body.catx-on .catxi-item .catxi-cli-list .catxi-lname{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } body.catx-on .catxi-item .catxi-cli-hp, body.catx-on .catxi-sync .catxi-cli-hp{ flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; } /* [매물목록] 등록된 매물 없음 빈 상태: 아이콘 + 아래 문구 + 박스 가운데 정렬(catx 전용) */ body.catx-on .catx-empty-list{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:12px; min-height:min(46vh, 360px); padding:40px 16px; color:var(--cx-sub); } body.catx-on .catx-empty-list svg{ color:var(--cx-sub2); opacity:.85; } body.catx-on .catx-empty-list span{ font-size:14px; color:var(--cx-sub); } /* [매물관리용 41] 데스크톱(≥993): 행을 강제로 늘리거나 줄이지 않고 '내용 높이'대로 둔다(잘림/붕괴 방지). * - 2행(매물관리현황+오래된매물)은 전체 표시(억지 축소·내부스크롤 금지 → 8개 통계박스+차트 안 잘림). * - 3행(TOP10/고객현황/최근작업) '목록 패널'만 최대높이 캡(아래 1184줄)으로 내부 스크롤 → 3행이 과하게 길어지지 않음. * ≤992 는 모바일 스택(앱셸 미적용) → 좁은 화면 레이아웃 깨짐 없음. */ @media (min-width:993px){ body.catx-on .catxd-wrap.catxi-item{ min-height:0 !important; height:auto !important; } body.catx-on .catxi-item .catxd-row-staff, body.catx-on .catxi-item .catxd-row3{ flex:0 0 auto !important; align-items:stretch; } body.catx-on .catxi-item .catxd-row-staff > .catxd-panel, body.catx-on .catxi-item .catxd-row3 > .catxd-panel{ display:flex; flex-direction:column; min-height:0; } /* 3행 목록만 내부 스크롤(패널 max-height 는 1184줄에서 지정). 매물관리현황 통계그리드는 목록이 아니라 스크롤 대상 아님 → 전체 표시. */ body.catx-on .catxi-item .catxd-row3 .catxi-list{ overflow-y:auto; min-height:0; } } /* [매물관리용 41·매물연동용 42] 최근 작업 행 작업자(직원명) — 시간 뒤 작은 칩 */ body.catx-on .catxi-item .catxi-worker, body.catx-on .catxi-sync .catxi-worker{ flex:0 0 auto; display:inline-flex; align-items:center; gap:3px; margin-left:6px; padding:2px 7px; border-radius:999px; background:var(--cx-chip); border:1px solid var(--cx-line); font-size:var(--dash-font-10_5, 10.5px); color:var(--cx-sub); white-space:nowrap; } body.catx-on .catxi-item .catxi-worker svg{ flex:0 0 auto; opacity:.8; } /* [매물관리용 41] 많이 본 매물 조회수 = 눈 아이콘 + 배지(pill) */ body.catx-on .catxi-item .catxi-views{ flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; background:color-mix(in oklab, var(--cx-accent) 12%, transparent); border:1px solid color-mix(in oklab, var(--cx-accent) 26%, transparent); color:var(--cx-accent-text); } /* 오래된 매물 '마지막 활동' — 조회수(.catxi-views)와 동일한 pill 배지. * 경과일 색(90일↑ red / 60일↑ amber / 그 외 sub)은 행별 --ag 변수로 받아 유지한다. */ body.catx-on .catxi-item .catxi-aged{ flex:0 0 auto; display:inline-flex; align-items:center; gap:4px; padding:3px 9px; border-radius:999px; font-size:var(--dash-font-10_5, 10.5px); white-space:nowrap; background:color-mix(in oklab, var(--ag) 12%, transparent); border:1px solid color-mix(in oklab, var(--ag) 26%, transparent); color:var(--ag); } body.catx-on .catxi-item .catxi-aged b{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-12, 12px); font-weight:700; color:var(--ag); } /* 오래된 매물 모바일: 매물번호+제목 + 마지막 활동일만 노출(주소·거래유형·금액 숨김) → 가로 스크롤 방지 */ @media (max-width:700px){ body.catx-on .catxi-item .catxi-lrow:has(> .catxi-aged){ gap:7px; } body.catx-on .catxi-item .catxi-lrow:has(> .catxi-aged) .catxi-lmeta{ display:none; } body.catx-on .catxi-item .catxi-lrow:has(> .catxi-aged) .catxi-lname{ flex:1 1 auto; min-width:0; } } body.catx-on .catxi-item .catxi-views b{ font-size:var(--dash-font-12, 12px); color:var(--cx-accent-text); } body.catx-on .catxi-item .catxi-views em{ font-size:var(--dash-font-10, 10px); color:var(--cx-accent-text); opacity:.8; } body.catx-on .catxi-ago{ font-size:var(--dash-font-10_5, 10.5px); color:var(--cx-sub); white-space:nowrap; } /* ===== 매물연동용(42) 전용 컴포넌트 ===== */ /* 상태 뱃지(광고 상태) */ /* 아이콘+라벨 정렬용 inline-flex. gap 은 아이콘이 있을 때만 의미가 있어 텍스트 전용 배지는 기존과 동일하게 보인다. */ body.catx-on .catxi-badge{ flex-shrink:0; display:inline-flex; align-items:center; gap:4px; font-size:var(--dash-font-10_5, 10.5px); font-weight:600; padding:3px 10px; border-radius:20px; white-space:nowrap; } /* 네이버 발송 매물 목록 행 */ body.catx-on .catxi-brow{ display:flex; align-items:center; gap:11px; padding:clamp(8px,1vh,11px) 4px; border-top:1px solid var(--cx-line-soft); cursor:pointer; text-decoration:none; } body.catx-on .catxi-brow:first-child{ border-top:0; } body.catx-on .catxi-brow:hover{ background:var(--cx-hover-bg); } body.catx-on .catxi-brow-ico{ width:34px; height:30px; border-radius:8px; background:var(--cx-track); border:1px solid var(--cx-line-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; color:var(--cx-sub); } body.catx-on .catxi-brow-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } body.catx-on .catxi-brow-id{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-10_5, 10.5px); color:var(--cx-sub2); } /* 매물번호 칩 */ /* 매물번호 배지: 배경이 진해 숫자가 묻히던 문제 → 배경 연하게(--cx-track→--cx-row) + 글자 진하게(--cx-sub→--cx-body) */ body.catx-on .catxi-brow-no{ align-self:flex-start; display:inline-block; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-10, 10px); font-weight:700; color:var(--cx-body); background:var(--cx-row); border:1px solid var(--cx-line-soft); border-radius:5px; padding:1px 6px; line-height:1.5; } /* 매물번호 + 네이버 매물번호 줄 */ body.catx-on .catxi-brow-nos{ display:flex; align-items:center; flex-wrap:wrap; gap:4px; margin-bottom:3px; } /* 네이버 매물번호 칩(데이터 있을 때만) — 네이버 그린, 클릭 시 네이버 매물 열기 */ body.catx-on .catxi-brow-nno{ display:inline-flex; align-items:center; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-10, 10px); font-weight:700; color:#00a44f; background:color-mix(in oklab, #03c75a 14%, transparent); border:1px solid color-mix(in oklab, #03c75a 40%, transparent); border-radius:5px; padding:1px 6px; line-height:1.5; cursor:pointer; } body.catx-on .catxi-brow-nno:hover{ background:color-mix(in oklab, #03c75a 22%, transparent); } /* 네이버 발송 목록 썸네일: 우측 정보(제목/주소/날짜)와 균형 맞게 크게 */ body.catx-on .catxi-brow{ gap:12px; } body.catx-on .catxi-brow .catxi-thumb-sq{ width:54px; height:54px; border-radius:12px; } body.catx-on .catxi-brow .catxi-thumb-sq .catxi-thumb-ph svg{ width:20px; height:20px; } body.catx-on .catxi-brow-t{ font-size:var(--dash-font-12_5, 12.5px); font-weight:600; color:var(--cx-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body.catx-on .catxi-brow-a{ font-size:var(--dash-font-11, 11px); color:var(--cx-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body.catx-on .catxi-brow-date{ flex-shrink:0; text-align:right; font-size:var(--dash-font-11_5, 11.5px); color:var(--cx-sub2); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; line-height:1.6; } /* 날짜만 굵고 진하게(라벨 등록·발송 은 보조색 유지) */ body.catx-on .catxi-brow-date b{ font-weight:700; color:var(--cx-body); } /* 선 그래프(7일 발송 추이) */ body.catx-on .catxi-linewrap{ position:relative; flex:1; min-height:110px; overflow:visible; } body.catx-on .catxi-linewrap svg{ position:absolute; inset:0; width:100%; height:100%; display:block; } body.catx-on .catxi-dot{ position:absolute; width:8px; height:8px; border-radius:50%; background:var(--cx-accent); border:2px solid var(--cx-panel); transform:translate(-50%,-50%); box-shadow:0 0 0 1px color-mix(in oklab, var(--cx-accent) 45%, transparent); } body.catx-on .catxi-dotv{ position:absolute; transform:translate(-50%,-135%); font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-10, 10px); font-weight:700; color:var(--cx-body); white-space:nowrap; } /* 주간 발송 요약 3박스 */ /* 3칸은 그래프 위로 이동(요청) → 간격도 margin-top 에서 margin-bottom 으로 */ body.catx-on .catxi-sumrow{ flex-shrink:0; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:9px; margin-bottom:11px; } body.catx-on .catxi-sumbox{ padding:clamp(8px,1vh,11px) 12px; border-radius:11px; background:var(--cx-chip); border:1px solid var(--cx-line); } body.catx-on .catxi-sumbox .l{ display:inline-flex; align-items:center; gap:5px; font-size:var(--dash-font-11, 11px); color:var(--cx-sub); white-space:nowrap; } body.catx-on .catxi-sync .catxi-sumrow .catxi-sumbox .l{ font-size:13px; } body.catx-on .catxi-sumbox .v{ margin-top:3px; display:flex; align-items:baseline; gap:2px; } body.catx-on .catxi-sumbox .v b{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:clamp(15px,1.7vw,19px); font-weight:700; color:var(--cx-strong); } body.catx-on .catxi-sumbox .v em{ font-size:var(--dash-font-10_5, 10.5px); font-style:normal; color:var(--cx-sub); } /* 최근 매물 작업(2줄: 이름+설명) */ body.catx-on .catxi-wrow{ display:flex; align-items:flex-start; gap:10px; padding:clamp(7px,1vh,11px) 3px; border-top:1px solid var(--cx-line-soft); cursor:pointer; text-decoration:none; } body.catx-on .catxi-wrow:first-child{ border-top:0; } body.catx-on .catxi-wrow:hover{ background:var(--cx-hover-bg); } body.catx-on .catxi-wrow-main{ flex:1; min-width:0; display:flex; flex-direction:column; gap:2px; } body.catx-on .catxi-wrow-t{ font-size:var(--dash-font-12_5, 12.5px); font-weight:600; color:var(--cx-strong); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body.catx-on .catxi-wrow-d{ font-size:var(--dash-font-11, 11px); color:var(--cx-sub); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* 솔루션 정보 */ body.catx-on .catxi-sol{ display:flex; flex-direction:column; gap:8px; } body.catx-on .catxi-sol-item{ position:relative; border:1px solid var(--cx-line); border-radius:12px; background:var(--cx-card); box-shadow:var(--cx-shadow); padding:9px 14px; transition:border-color .12s, transform .12s, box-shadow .12s; } body.catx-on .catxi-sol-item:hover{ border-color:var(--cx-hover-line); transform:translateY(-1px); box-shadow:0 4px 14px rgba(0,0,0,.10); } body.catx-on .catxi-sol-item.is-expire{ background:color-mix(in oklab, #e0568a 9%, var(--cx-panel)); border-color:color-mix(in oklab, #e0568a 32%, transparent); } body.catx-on .catxi-sol-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; row-gap:9px; } /* 만료일 카드 우측: D-day 배지 + 연장신청 버튼 세로 스택 */ body.catx-on .catxi-sol-expright{ margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:7px; flex-shrink:0; } body.catx-on .catxi-sol-ic{ width:30px; height:30px; border-radius:9px; display:flex; align-items:center; justify-content:center; flex-shrink:0; } body.catx-on .catxi-sol-nm{ font-size:var(--dash-font-12_5, 12.5px); font-weight:500; color:var(--cx-strong); white-space:nowrap; } body.catx-on .catxi-sol-vl{ margin-left:auto; display:flex; align-items:center; gap:8px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:15px; font-weight:700; color:var(--cx-strong); white-space:nowrap; } body.catx-on .catxi-sol-vl em{ font-style:normal; font-family:'Apple SD Gothic Neo','NotoSansKR','NanumBarunGothic','nanum gothic','나눔고딕','apple gothic','맑은 고딕','굴림',sans-serif; font-size:var(--dash-font-11, 11px); font-weight:500; color:var(--cx-sub); } body.catx-on .catxi-sol-bar{ margin-top:7px; height:6px; border-radius:5px; background:var(--cx-track); overflow:hidden; } body.catx-on .catxi-sol-bar > i{ display:block; height:100%; border-radius:5px; } body.catx-on .catxi-sol-pct{ margin-top:3px; text-align:right; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-10_5, 10.5px); color:var(--cx-sub); } /* ============================================================================ * 모바일 개선(카테고리 대시보드 공통) — ≤700px * ==========================================================================*/ /* 모바일 퀵버튼(타이틀 밑)/하단 지원버튼 — 기본 숨김 */ body.catx-on .catxi-mquick, body.catx-on .catxi-mfoot{ display:none; } body.catx-on .catxi-mqbtn{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:13px 6px; border-radius:13px; background:var(--cx-chip); border:1px solid var(--cx-line); color:var(--cx-body); font-size:var(--dash-font-12, 12px); font-weight:600; text-decoration:none; } body.catx-on .catxi-mqbtn.is-primary{ background:var(--cx-home-bg); border-color:var(--cx-home-line); color:var(--cx-accent-text); } body.catx-on .catxi-mqbtn svg{ color:var(--cx-accent-token); } body.catx-on .catxi-mqbtn.is-primary svg{ color:var(--cx-accent-text); } body.catx-on .catxi-mfbtn{ display:flex; align-items:center; justify-content:center; gap:6px; padding:11px 6px; border-radius:11px; background:var(--cx-chip); border:1px solid var(--cx-line); color:var(--cx-body); font-size:var(--dash-font-12, 12px); font-weight:500; text-decoration:none; } body.catx-on .catxi-mfbtn svg{ color:var(--cx-sub); flex-shrink:0; } @media (max-width:700px){ /* #5,#6: 데스크톱 헤더 퀵버튼 숨김, 모바일 퀵/하단 버튼 노출 */ body.catx-on .catxd-head{ flex-direction:column; align-items:stretch; gap:10px; } body.catx-on .catxd-quick{ display:none; } body.catx-on .catxi-mquick{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:4px; } body.catx-on .catxi-mfoot{ display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-top:auto; padding-top:6px; } /* #4a: 직원관리용 정보패널 — 용량/만료/문자 3줄로 스택 */ body.catx-on .catxd-info-line{ flex-wrap:wrap; row-gap:10px; column-gap:10px; } body.catx-on .catxd-info-line > .catxd-info-cell:first-child{ width:auto; } body.catx-on .catxd-info-gauge{ flex:1 1 60px; min-width:60px; } body.catx-on .catxd-info-div{ flex-basis:100%; width:100%; height:0; background:none; margin:0; align-self:stretch; } /* 세로구분선 → 줄바꿈으로 전환(문자수 다음줄) */ body.catx-on .catxd-info-btn{ margin-left:auto; } /* #4b: 직원 업무 현황 테이블 — 모바일 폭에 맞게 열 축소(넘침 방지) */ body.catx-on .catxd-sthead, body.catx-on .catxd-strow{ grid-template-columns:minmax(90px,1.7fr) minmax(42px,.7fr) minmax(42px,.7fr) minmax(66px,1fr); gap:4px 6px; } body.catx-on :is(.catxd-sthead,.catxd-strow) > :nth-child(4),body.catx-on :is(.catxd-sthead,.catxd-strow) > :nth-child(5){display:none;} body.catx-on .catxd-label-pc{display:none;} body.catx-on .catxd-label-mobile{display:inline;} body.catx-on .catxd-strow .catxd-stname{flex-wrap:wrap;} body.catx-on .catxd-strow .catxd-stnamewrap{flex:1;min-width:0;} body.catx-on .catxd-strow .catxd-stlogout{margin-left:2px; } body.catx-on .catxd-sthead{ font-size:var(--dash-font-11, 11px); letter-spacing:0; padding:7px 8px; word-break:keep-all; } body.catx-on .catxd-strow{ padding:10px 8px; font-size:var(--dash-font-12, 12px); } body.catx-on .catxd-stlast{ font-size:var(--dash-font-10, 10px); } /* 모바일: 이메일 숨김·프로필 축소로 폭 확보 */ body.catx-on .catxd-stmail{ display:none; } body.catx-on .catxd-stpic{ width:24px; height:24px; border-radius:7px; } body.catx-on .catxd-stname{ gap:6px; } body.catx-on .catxd-stlogout{ width:26px; height:26px; margin-left:2px; padding:0; gap:0; } body.catx-on .catxd-stlogout > span{display:none;} /* #3: .cxm 모달 — 모바일 뷰포트 안에 들어오게(내부 스크롤) + 전체적으로 컴팩트하게 */ dialog.cxm{ width:calc(100vw - 20px) !important; max-width:none !important; max-height:calc(100dvh - 24px) !important; margin:auto !important; overflow:auto !important; border-radius:15px; } .cxm-head{ padding:16px 16px 13px 18px; } .cxm-title{ font-size:17px; margin-top:5px; } .cxm-sub{ font-size:var(--dash-font-12, 12px); margin-top:4px; } .cxm-summary{ padding:14px 18px 0; gap:8px; } /* 모바일: 카드가 좁아 라벨(홈페이지 만료일 등)이 값과 한 줄을 나눠 쓰다 잘리던 문제 * → 라벨 위 / 값 아래로 스택해 라벨이 카드 폭을 온전히 쓰게 하고, 그래도 길면 줄바꿈(잘림 대신). */ .cxm-scard{ padding:11px 13px; flex-direction:column; align-items:flex-start; gap:3px; } .cxm-scard-l{ white-space:normal; overflow:visible; text-overflow:clip; line-height:1.35; } .cxm-scard-v{ font-size:15px; } .cxm-field{ padding:15px 18px 0; } .cxm-price{ margin:13px 18px 0; padding:13px 16px 12px; } .erm-cost{ margin:12px 18px 0; padding:13px 16px 12px; } .erm-cost-h{ font-size:16px; margin-top:4px; } .erm-cost-d{ margin-top:5px; } .cxm-price-sum{ font-size:var(--dash-font-11_5, 11.5px); } .cxm-price-row{ margin-top:5px; } .cxm-price-val{ font-size:26px; } .cxm-price-foot{ margin-top:10px; padding-top:9px; gap:10px; font-size:var(--dash-font-11, 11px); } .cxm-pay{ padding:15px 18px 0; } .cxm-account{ padding:13px 14px; } .cxm-info{ margin:10px 18px 0; padding:12px 14px; } .cxm-refund-note{ margin:12px 18px 14px; } .cxm-unavail{ margin:14px 18px 0; padding:14px; } .cxm-foot{ grid-template-columns:1fr; margin-top:16px; padding:14px 18px 18px; } /* 모바일에서 대시보드 wrap/#admin_wrap 을 뷰포트 높이로 강제 채우지 않음 → 콘텐츠 짧을 때 하단 빈 여백/불필요 스크롤 제거 */ body.catx-on .catxd-wrap{ min-height:0; } body.catx-on #admin_wrap{ min-height:0; } } /* ============================================================================ * 모바일 헤더/드로어 개선 — 상단바 재배치 + 드로어 '전체 메뉴' 헤더/카카오 푸터 * ==========================================================================*/ body.catx-on .catx-navtoggle-m, body.catx-on .catx-mobmenu-head, body.catx-on .catx-mobmenu-foot, body.catx-on .catx-mobile-shortcuts{ display:none; } @media (max-width:992px){ /* 상단바: [알림 · 알림설정] [가운데 상호명] [프로필 · 메뉴] */ body.catx-on{ --cx-topbar-h:60px; } body.catx-on .catx-navtoggle{ display:none; } /* 왼쪽 햄버거 숨김 */ body.catx-on .catx-navtoggle-m{ width:34px; height:34px; display:flex; } /* 오른쪽 끝 햄버거 노출 */ body.catx-on .catx-tb-left{ width:0; min-width:0; flex:0 0 0; } body.catx-on .catx-brand{ position:absolute; left:50%; top:50%; z-index:1; display:flex !important; align-items:center; max-width:calc(100% - 180px); transform:translate(-50%,-50%); text-align:center; } /* 상호명 중앙 고정 */ body.catx-on .catx-brand-name{ font-size:13px; } body.catx-on .catx-brand-sub{ font-size:var(--dash-font-9, 9px); } body.catx-on .catx-spacer{ display:none; } body.catx-on .catx-tb-home, body.catx-on .catx-tb-map, body.catx-on .catx-tb-divider{ display:none !important; } /* 프로필: 화살표 삭제 + 아바타만(컴팩트) — 클릭은 아바타로 동작(기존 onclick 유지). 헤더 잘림 방지 */ body.catx-on .catx-acct-caret{ display:none !important; } body.catx-on .catx-acct-btn{ width:34px; height:34px; padding:0 !important; gap:0 !important; overflow:hidden; } body.catx-on .catx-acct-avatar{ width:34px; height:34px; border-radius:11px; } body.catx-on .catx-tb-right{ position:static; gap:5px; margin-left:auto; } body.catx-on .catx-bell{ position:absolute; left:12px; top:50%; z-index:2; width:34px; height:34px; transform:translateY(-50%); } body.catx-on .catx-iconbtn.catx-bell:hover{ transform:translateY(-50%); } body.catx-on .catx-notif-settings.is-enabled{ position:absolute; left:51px; top:50%; z-index:2; width:34px; height:34px; padding:0; display:flex; align-items:center; justify-content:center; border:1px solid #d9dee7; border-radius:11px; background:#fff; color:#475569; font-family:inherit; cursor:pointer; transform:translateY(-50%); } body.catx-on .catx-notif-settings-label{ display:none; } body.catx-on .catx-notif-settings-ico{ font-size:16px; line-height:1; } /* 알림 설정(톱니): PC(≥993px)에만 배경이 지정돼 있어 모바일에선 아이콘만 떠 보였다 → PC 와 동일한 회색 칩. * (알림 종 버튼 색은 admin_header_category.php 의 PC 규칙과 함께 관리한다) */ body.catx-on .catx-notif-settings.is-enabled{ border:1px solid #d9dee7; border-radius:11px; background:#f1f3f5; color:#475569; } body.catx-on:not(.catx-light) .catx-notif-settings.is-enabled{ border-color:var(--cx-line2); background:var(--cx-chip); color:var(--cx-body); } body.catx-on .catx-acct, body.catx-on .catx-navtoggle-m{ position:relative; z-index:2; } body.catx-on .catx-topbar{ gap:5px; padding-left:12px; padding-right:12px; } /* 드로어: head(고정) + 메뉴(스크롤) + foot(고정) 3단 레이아웃 */ body.catx-on #admin_wrap header.style_admin_category{ display:flex !important; flex-direction:column !important; overflow:hidden !important; } body.catx-on #admin_wrap header.style_admin_category .logo_btm{ position:static !important; top:auto !important; left:auto !important; right:auto !important; width:100% !important; height:100% !important; background:transparent !important; box-shadow:none !important; z-index:auto !important; flex:1 1 auto !important; min-height:0 !important; display:flex !important; flex-direction:column !important; overflow:hidden !important; padding:0 !important; } body.catx-on #admin_wrap header.style_admin_category .nav_view_box{ flex:1 1 auto !important; min-height:0 !important; overflow-y:auto !important; -webkit-overflow-scrolling:touch; padding:10px 15px 0 !important; } body.catx-on #admin_wrap header.style_admin_category .page_info_wrap{ display:none !important; } body.catx-on #admin_wrap header.style_admin_category .logo_top, body.catx-on #admin_wrap header.style_admin_category .nav_open_btn{ display:none !important; } body.catx-on .catx-mobile-shortcuts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); align-items:center; gap:8px; margin:0 0 10px; } body.catx-on .catx-mobile-shortcut{ min-height:40px; display:flex; align-items:center; justify-content:center; gap:7px; border-radius:11px; color:#fff; font-size:13px; font-weight:700; text-decoration:none; box-shadow:0 2px 7px rgba(30,64,175,.1); } body.catx-on .catx-mobile-shortcut:first-child{ background:#3b82f6; } body.catx-on .catx-mobile-shortcut:last-child{ background:#10a174; } body.catx-on .catx-mobile-shortcut svg{ color:#fff; flex:0 0 auto; } body.catx-on .catx-mobile-shortcut:first-child:active{ background:#2563eb; } body.catx-on .catx-mobile-shortcut:last-child:active{ background:#059669; } body.catx-on .catx-mobmenu-head{ display:flex; align-items:center; justify-content:space-between; flex-shrink:0; padding:15px 18px 11px; border-bottom:1px solid var(--cx-line-soft); } body.catx-on .catx-mobmenu-title{ font-size:16px; font-weight:700; color:var(--cx-strong); letter-spacing:-.01em; } body.catx-on .catx-mobmenu-close{ width:34px; height:34px; border-radius:10px; border:1px solid var(--cx-line); background:var(--cx-chip); color:var(--cx-body); display:flex; align-items:center; justify-content:center; cursor:pointer; } body.catx-on .catx-mobmenu-close:hover{ border-color:var(--cx-hover-line); } body.catx-on .catx-mobmenu-foot{ display:flex; align-items:center; justify-content:center; gap:8px; flex-shrink:0; margin:14px; padding:13px 12px; border-radius:14px; background:#FEE500; color:#191600; font-size:14px; font-weight:700; text-decoration:none; box-shadow:0 6px 16px rgba(254,229,0,.28); } body.catx-on .catx-mobmenu-foot svg{ stroke:#191600; } body.catx-on .catx-mobmenu-foot:hover{ background:#f5d800; } } /* 모바일 헤더 토글 아이콘: 닫힘=햄버거 / 열림=X (드로어 상단 '전체 메뉴' 헤더 제거) */ body.catx-on .catx-navtoggle-m .catx-navtoggle-close{ display:none; } body.catx-on.catx-nav-collapsed .catx-navtoggle-m .catx-navtoggle-open{ display:none; } body.catx-on.catx-nav-collapsed .catx-navtoggle-m .catx-navtoggle-close{ display:block; } @media (max-width:992px){ body.catx-on .catx-mobmenu-head{ display:none !important; } /* '전체 메뉴' 헤더 제거 — 닫기는 상단 X 버튼으로 */ body.catx-on #admin_wrap header.style_admin_category .nav_view_box{ padding-top:10px; } } /* 모바일: 드로어 열림(=catx-nav-collapsed) 상태에서도 그룹(OPS/WORK/SITE/CONF) 접힘이 동작하게. * (기존 접힘 규칙은 :not(.catx-nav-collapsed) 라 모바일 드로어에서 제외됐음 → 수동 접힘·관리자 기본 접힘 상태 미적용) */ @media (max-width:992px){ body.catx-on.catx-nav-collapsed .catx-group.is-collapsed .catx-menu{ display:none !important; } body.catx-on.catx-nav-collapsed .catx-group.is-collapsed{ margin-bottom:6px; } } /* 중복 타이틀 제거: 베이스 헤더의 모바일 로고(admin9_mobile_logo)는 catx 상단바 브랜드와 중복이라 숨김 */ body.catx-on .admin9_mobile_logo{ display:none !important; } /* 이중 스크롤 방지(모바일): base 는 html/body:overflow:hidden + .admin_main_wrap:height 고정+overflow:auto 로 * '본문만 내부 스크롤' 구조라, 실브라우저(클래식 스크롤바)에선 컨테이너가 함께 스크롤돼 스크롤바가 2개 보인다. * 모바일에선 내부 고정높이 스크롤을 없애고 '문서 하나'만 스크롤하도록 강제. */ @media (max-width:992px){ html{ overflow-y:auto !important; height:auto !important; } body.catx-on{ overflow-y:visible !important; height:auto !important; } body.catx-on #admin_wrap{ overflow:visible !important; height:auto !important; min-height:calc(100dvh - 0px) !important; } body.catx-on #admin_wrap .admin_main_wrap{ overflow:visible !important; height:auto !important; min-height:0 !important; top:0 !important; /* 기존/모노톤 모바일 헤더의 40px 규칙은 원본에서 CATX를 제외한다. * 이 0 값도 유지해 이후 공통 스타일 변경으로 여백이 다시 생기는 것을 막는다. */ margin-top:0 !important; } /* 예외: 지도 페이지(임장지도 등)는 '문서 스크롤' 구조를 쓸 수 없다. * .map_wraper → #imjang_map 이 height:100% 사슬로 화면을 채우는데, * 위 규칙의 height:auto 가 걸리면 사슬이 끊겨 지도가 30px 로 접힌다. */ body.catx-on #admin_wrap .admin_main_wrap:has(.map_wraper){ height:calc(100dvh - 68px) !important; /* 68px = catx 상단바 */ overflow:hidden !important; padding-top:0 !important; } /* #admin_wrap 의 margin-bottom:40px 는 본문이 짧을 때는 안 보였는데, * 위에서 높이를 화면만큼 채우자 문서가 40px 더 길어져 아래에 빈 띠가 * 스크롤로 드러났다. 지도 페이지는 화면을 꽉 채우므로 그 여백을 없앤다. */ body.catx-on #admin_wrap:has(.map_wraper){ margin-bottom:0 !important; } } /* ===== 매물관리용 추가 컴포넌트 (탭/썸네일/매물번호/고객링크/모바일3열) ===== */ /* 최근 작업 탭 — 가로 반반(50/50) 꽉 채움 */ /* 탭 = 세그먼트 컨트롤. 버튼 2개가 따로 떠 있던 형태 → 하나의 트랙 안에서 선택된 것만 pill 로 올라오게. * 어느 쪽이 선택됐는지 한눈에 들어오고, 묶여 있어 '전환 스위치'라는 것도 인지된다. * 트랙 padding 3px + 탭 padding 5px 조합으로 전체 높이는 기존(39px)과 동일하게 유지. */ /* 탭 — 선택 탭 상단에 accent 바 + 흰 배경, 비선택은 회색 배경으로 채운 형태(참고 시안). * 두 탭은 간격 없이 붙고 바깥 테두리로 하나의 컨트롤처럼 묶인다. 아이콘은 라벨 위에 배치. */ /* 탭은 패널 상단·좌우에 딱 붙인다: 패널 padding(16px)을 헤드 음수 마진으로 상쇄. * 아래 여백은 .catxi-dash .catxd-panel-head 기본값(9px)과 동일하게 유지. */ body.catx-on .catxd-panel-head:has(> .catxi-tabs){ margin:-16px -16px 9px; } /* 패널 radius 18px - 테두리 1px = 안쪽 17px 이므로 양끝 탭 위 모서리만 맞춰 깎는다(패널 overflow 를 건드리지 않기 위함) */ body.catx-on .catxi-tabs{ display:flex; gap:0; flex:1; width:100%; border:0; border-radius:0; } body.catx-on .catxi-tab:first-child{ border-top-left-radius:17px; } body.catx-on .catxi-tab:last-child{ border-top-right-radius:17px; } body.catx-on .catxi-tab{ flex:1 1 0; min-width:0; display:flex; flex-direction:row; align-items:center; justify-content:center; gap:6px; padding:8px 10px; border:0; border-top:3px solid transparent; border-radius:0; background:var(--cx-row); font-size:15px; font-weight:600; color:var(--cx-sub); cursor:pointer; font-family:inherit; letter-spacing:-.01em; transition:background .15s, color .15s, border-color .15s; } body.catx-on .catxi-tab + .catxi-tab{ border-left:1px solid var(--cx-line); } body.catx-on .catxi-tab > span{ max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } body.catx-on .catxi-tab svg{ display:block; flex:0 0 auto; } body.catx-on .catxi-tab:hover{ color:var(--cx-strong); } body.catx-on .catxi-tab.is-on{ background:var(--cx-panel); border-top-color:transparent; /* 선택 탭 상단 파란 선 제거(요청) — 높이 유지를 위해 3px 투명 테두리는 남김 */ color:var(--cx-strong); } body.catx-on .catxi-tab.is-on:hover{ color:var(--cx-strong); } body.catx-on .catxi-tabpane[hidden]{ display:none; } /* 매물번호 뱃지(최근 매물 작업) */ body.catx-on .catxi-itemno{ flex-shrink:0; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:var(--dash-font-10_5, 10.5px); font-weight:700; color:var(--cx-sub); background:transparent; border:1px solid var(--cx-line); border-radius:6px; padding:1px 6px; } /* TOP5 썸네일 1:1 + 이미지(실패 시 아이콘 폴백) */ body.catx-on .catxi-thumb-sq{ position:relative; width:38px; height:38px; border-radius:9px; overflow:hidden; background:var(--cx-track); border:1px solid var(--cx-line-soft); flex-shrink:0; } body.catx-on .catxi-thumb-sq .catxi-thumb-ph{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; } body.catx-on .catxi-thumb-sq img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; background:var(--cx-track); } /* 전체 고객 카드 링크 hover */ body.catx-on .catxi-cli-link{ transition:border-color .15s, background .15s; } body.catx-on .catxi-cli-link:hover{ border-color:var(--cx-hover-line); background:var(--cx-hover-bg); } /* 모바일: 상단 KPI 6장을 3×2 로 */ @media (max-width:700px){ body.catx-on .catxi-kpigrid{ grid-template-columns:repeat(3,minmax(0,1fr)) !important; gap:7px; } body.catx-on .catxi-adtoprow{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; gap:7px; } body.catx-on .catxi-adkpi-group{ display:contents !important; } /* 그룹 경계 해제 → 6장이 adtoprow 2칸 그리드로 흐름(2×3) */ body.catx-on .catxi-adtoprow > .catxd-infopanel{ grid-column:1 / -1; } /* [매물연동용 42 모바일] 정보패널 = 용량/만료일/잔여문자 3개 카드 한 줄 + 버튼을 각 값 아래로 */ body.catx-on .catxi-sync .catxd-infopanel{ background:transparent !important; border:none !important; box-shadow:none !important; padding:0 !important; flex-wrap:nowrap !important; gap:7px !important; } body.catx-on .catxi-sync .catxd-infopanel > .catxd-info-div{ display:none !important; } body.catx-on .catxi-sync .catxd-infopanel > .catxd-info-cell{ flex:1 1 0 !important; min-width:0; flex-direction:column !important; align-items:center !important; justify-content:flex-start !important; gap:8px; padding:11px 6px !important; background:var(--cx-chip); border:1px solid var(--cx-line); border-radius:12px; text-align:center; } body.catx-on .catxi-sync .catxd-info-cell .catxd-info-text{ align-items:center !important; gap:4px; width:100%; } body.catx-on .catxi-sync .catxd-btn-tx{ display:inline !important; } body.catx-on .catxi-sync .catxd-info-btn{ width:auto !important; height:auto !important; border-radius:999px !important; padding:5px 11px !important; gap:4px; font-size:var(--dash-font-11, 11px); font-weight:600; align-self:center !important; margin:0 !important; } body.catx-on .catxi-sync .catxd-info-btn svg{ width:11px; height:11px; } body.catx-on .catxi-kpi{ padding:10px 8px; gap:5px; align-items:flex-start; border-radius:12px; } body.catx-on .catxi-kpi-top{ gap:6px; width:100%; } body.catx-on .catxi-kpi-ico{ width:22px; height:22px; border-radius:7px; } body.catx-on .catxi-kpi-name{ font-size:var(--dash-font-11, 11px); } body.catx-on .catxi-kpi-hint{ display:none; } /* 3열 폭 부족 → 힌트 숨김(값으로 대체) */ body.catx-on .catxi-kpi-val{ flex-wrap:wrap; row-gap:5px; width:100%; } body.catx-on .catxi-kpi-val b{ font-size:clamp(15px,4.4vw,19px); } /* 버튼(용량추가/연장신청/문자충전)은 값 아래 줄로 내림(pill 유지, 좌측정렬) */ body.catx-on .catxi-kpi-btn{ flex:0 0 100%; max-width:max-content; margin-left:0 !important; margin-right:auto; margin-top:3px; padding:3px 7px; font-size:var(--dash-font-10, 10px); } /* 매물관리용 라벨 축소: '홈페이지 ' 접두어 숨김(용량/만료일), 만료일 요일 숨김 */ body.catx-on .catxi-hpx{ display:none; } body.catx-on .catxi-kpi-val em.catxi-wd{ display:none; } } /* ========================================================================= * [추가] 인포 아이콘 + 툴팁(홈페이지 용량/만료 안내) & 업데이트 건의 모달 테마 * ========================================================================= */ /* ── 인포 아이콘 + 툴팁 ─────────────────────────────────────────────────── */ body.catx-on .catx-infotip{ position:relative; display:inline-flex; align-items:center; justify-content:center; width:16px; height:16px; margin-left:5px; border-radius:50%; color:var(--cx-sub2); cursor:pointer; vertical-align:middle; outline:none; flex-shrink:0; -webkit-tap-highlight-color:transparent; } /* KPI 라벨을 14px 로 키우면서 ⓘ 아이콘이 글자 중앙보다 살짝 아래에 놓인다. * vertical-align:middle 은 'baseline + x-height/2' 기준인데, 한글은 baseline 위 * cap-height 쪽에 무게가 실려 광학 중심이 더 높기 때문이다. 1px 올려 맞춘다. */ @media (min-width:701px){ body.catx-on .catxi-item .catxi-kpigrid .catxi-kpi-name .catx-infotip{ top:-1px; } } body.catx-on .catx-infotip:hover, body.catx-on .catx-infotip:focus{ color:var(--cx-accent-token); } body.catx-on .catx-infotip svg{ width:14px; height:14px; display:block; } /* 팝업은 position:fixed 로 뷰포트 기준 배치(카드 overflow:hidden·링크 클릭에 영향받지 않음). 위치는 JS(catxTip)가 설정, 표시는 .is-open 클래스로 토글 */ body.catx-on .catx-infotip-pop{ display:none; position:fixed; top:0; left:0; z-index:40060; width:max-content; max-width:min(300px,86vw); padding:12px 14px; border-radius:12px; background:var(--cx-panel); border:1px solid var(--cx-line2); box-shadow:0 18px 48px rgba(4,8,14,.5); text-align:left; white-space:normal; cursor:default; } body.catx-on .catx-infotip-pop.is-shown{ display:block; } body.catx-on .catx-infotip-pop b{ display:block; margin-bottom:5px; font-size:var(--dash-font-12, 12px); font-weight:700; color:var(--cx-strong); } body.catx-on .catx-infotip-pop span{ display:block; margin-top:4px; font-size:var(--dash-font-11_5, 11.5px); line-height:1.5; color:var(--cx-body); } /* ── 직원(staff) 전용 대시보드 추가 컴포넌트 ─────────────────────────────── */ body.catx-on .catxi-staffkpi{ grid-template-columns:repeat(4,minmax(0,1fr)); } body.catx-on .catxi-mgmt2{ display:grid; grid-template-columns:1fr 1fr; gap:9px; margin-top:2px; } body.catx-on .catxi-mini{ display:flex; flex-direction:column; gap:6px; padding:11px 12px; border-radius:11px; background:var(--cx-chip); border:1px solid var(--cx-line); } body.catx-on .catxi-mini-l{ display:flex; align-items:center; gap:6px; font-size:var(--dash-font-11_5, 11.5px); color:var(--cx-sub); } body.catx-on .catxi-mini b{ font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:17px; font-weight:700; color:var(--cx-strong); } body.catx-on .catxi-dot2{ display:inline-block; width:8px; height:8px; border-radius:3px; margin-right:7px; vertical-align:middle; } body.catx-on .catxd-staff-r1 .catxd-panel, body.catx-on .catxd-staff-r2 .catxd-panel{ min-height:0; } /* 직원 대시보드: 1행 자연높이 + 2행(미확인문의/최근작업)이 남은 세로를 채워 하단까지 확장 */ body.catx-on .catxd-staffwrap{ min-height:calc(100vh - var(--cx-topbar-h)); min-height:calc(100dvh - var(--cx-topbar-h)); } body.catx-on .catxd-staff-r1{ flex:0 0 auto; } body.catx-on .catxd-staff-r2{ flex:1 1 auto; } /* 3행(홈페이지방문현황/최근매물작업/최근고객작업)에 .catxs-body 가 들어가면서 관리자 전용 * ".catxd-wrap:has(.catxs-body) .catxd-row3{flex:0 0 auto;...}" 규칙(특이도가 더 높음)이 같이 걸려 * 2행이 남은 세로를 채우지 못하고 뷰포트 하단에 빈 여백이 남는다. 직원 대시보드 스코프에서만 * 더 높은 특이도로 다시 채움(하단 여백 제거 + 전체 페이지 스크롤 최소화). */ body.catx-on .catxd-wrap.catxd-staffwrap.catxi-dash .catxd-staff-r2{ flex:1 1 auto; min-height:0; align-items:stretch; } body.catx-on .catxd-wrap.catxd-staffwrap.catxi-dash .catxd-staff-r2 > .catxd-panel{ max-height:none; min-height:0; } /* 홈페이지 방문 현황 차트: 패널이 늘어난 만큼 막대 차트도 같이 늘어나도록(관리자 :not(.catxi-dash) 버전과 동일 처리) */ body.catx-on .catxd-staffwrap .catxd-row3 .catxd-visit-chart{ flex:1; min-height:120px; } body.catx-on .catxd-staffwrap .catxd-row3 .catxd-vc-bars{ flex:1; min-height:90px; } body.catx-on .catxd-staffwrap .catxd-row3 .catxd-vc-bar{ height:100%; } @media (max-width:1279px){ body.catx-on .catxd-staff-r1, body.catx-on .catxd-staff-r2{ grid-template-columns:repeat(2,minmax(0,1fr)); } body.catx-on .catxd-staff-r1 > section:first-child, body.catx-on .catxd-staff-r2 > section:first-child{ grid-column:1 / -1; } } @media (max-width:760px){ body.catx-on .catxd-staff-r1, body.catx-on .catxd-staff-r2{ grid-template-columns:minmax(0,1fr); } body.catx-on .catxd-staff-r1 > section:first-child, body.catx-on .catxd-staff-r2 > section:first-child{ grid-column:auto; } } @media (max-width:700px){ body.catx-on .catxi-staffkpi{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } } /* ── 공지 팝업(.popup.notice_popup): 카테고리 대시보드에선 base .popup CSS(긴급팝업 조건부)가 안 실려 깨짐. * 다크/라이트 무관 '기존(라이트) 스타일'로 고정 복구 + 닫기 동작 위해 박스/닫기 영역 명시. ─────── */ body.catx-on .popup.notice_popup{ position:fixed !important; top:50% !important; left:50% !important; right:auto !important; transform:translate(-50%,-50%) !important; margin:0 !important; padding:0 !important; background:#fff !important; color:#333 !important; border:1px solid #ddd !important; border-radius:10px !important; box-shadow:0 10px 40px rgba(0,0,0,.28) !important; max-width:calc(100vw - 24px) !important; max-height:calc(100vh - 40px) !important; overflow:hidden !important; z-index:30055 !important; } body.catx-on .popup.notice_popup:not([style*="display: block"]):not(.pop_on){ } /* 글자색: 전체(*)를 #333 으로 덮으면 공지 편집기에서 준 색이 사라진다 → 기본색만 주고, 색을 직접 준 요소는 그대로 둔다. 2026-09-22 */ body.catx-on .popup.notice_popup .popup-content, body.catx-on .popup.notice_popup .pop_close{ color:#333 !important; } body.catx-on .popup.notice_popup .popup-content *:not([style*="color"]):not(font[color]), body.catx-on .popup.notice_popup .pop_close *{ color:inherit !important; } body.catx-on .popup.notice_popup .pop_title{ display:block !important; width:100% !important; padding:12px 40px 12px 16px !important; border-radius:10px 10px 0 0 !important; font-size:16px !important; font-weight:bold !important; text-align:left !important; background:#002266 !important; color:#fff !important; position:relative !important; box-sizing:border-box !important; } body.catx-on .popup.notice_popup .pop_title *{ color:#fff !important; } /* 닫기 버튼: 제목줄 X 는 둥근 투명 버튼, 하단 '닫기' 는 흰 바탕 얇은 테두리 버튼으로 단정하게. 2026-09-22 */ body.catx-on .popup.notice_popup .pop_title .btn{ position:absolute !important; top:50% !important; right:10px !important; transform:translateY(-50%) !important; display:flex !important; align-items:center !important; justify-content:center !important; width:30px !important; height:30px !important; padding:0 !important; margin:0 !important; border:0 !important; border-radius:50% !important; background:transparent !important; box-shadow:none !important; color:#fff !important; cursor:pointer !important; opacity:.85; transition:background .15s, opacity .15s; } body.catx-on .popup.notice_popup .pop_title .btn:hover{ background:rgba(255,255,255,.16) !important; opacity:1; } body.catx-on .popup.notice_popup .pop_title .btn i{ position:static !important; transform:none !important; width:auto !important; height:auto !important; float:none !important; font-size:18px !important; line-height:1 !important; color:#fff !important; } body.catx-on .popup.notice_popup .popup-content{ padding:16px 18px !important; max-height:60vh !important; overflow-y:auto !important; background:#fff !important; color:#333 !important; box-sizing:border-box !important; display:block !important; float:none !important; width:100% !important; } body.catx-on .popup.notice_popup .pop_close{ display:flow-root !important; float:none !important; height:auto !important; margin:0 !important; width:100% !important; padding:10px 14px !important; background:#f2f2f2 !important; border-top:1px solid #e5e5e5 !important; box-sizing:border-box !important; position:relative !important; } body.catx-on .popup.notice_popup .pop_close>*{ float:left; } /* 하단 줄: 안쪽이 float 라 줄 높이가 무너져 그 아래 흰 여백이 생기던 것 — flow-root 로 감싸고 제목·본문도 float 해제 */ body.catx-on .popup.notice_popup>.pop_title{ float:none !important; } body.catx-on .popup.notice_popup .pop_close label{ margin:0 !important; font-weight:normal !important; font-size:14px; line-height:24px; cursor:pointer; } body.catx-on .popup.notice_popup .pop_close label input{ margin:0 6px 0 0 !important; vertical-align:middle; } body.catx-on .popup.notice_popup .pop_close>.btn{ float:right !important; display:inline-flex !important; align-items:center !important; height:28px !important; padding:0 14px !important; margin:0 !important; border:1px solid #d0d5dd !important; border-radius:6px !important; background:#fff !important; box-shadow:none !important; font-size:13px !important; line-height:1 !important; color:#344054 !important; cursor:pointer !important; transition:background .15s, border-color .15s; } body.catx-on .popup.notice_popup .pop_close>.btn:hover{ background:#f5f6f8 !important; border-color:#b9c0cc !important; color:#111 !important; } /* ════════════════════════════════════════════════════════════════════════════ * [매물목록 페이지] 필터 영역(.search_filter_btm) — catx 통합 + 컴팩트 * 대상: 카테고리형(40~48, body.catx-on) 에서만. 다른 테마/페이지 무영향(body.catx-on + .search_filter_btm 스코프). * 필터 컨트롤 2종: (A)bootstrap-select 토글 (B)커스텀 드롭다운(.btn.btn-default.dropdown-toggle) * → 공통 클래스 `.btn.dropdown-toggle` 로 둘 다 커버. + 텍스트 input. * base(라이브러리)가 !important 로 font-size·height·background 강제 → override 에도 필요한 !important. * 열리는 패널: 커스텀은 `.dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box)`(price/area/... _drop_box), bootstrap 은 `.bootstrap-select .dropdown-menu`. * (일반 `.dropdown-menu` 는 나중 로드되는 동급 규칙에 져서 타깃 복합 셀렉터로 특이도 확보) * 색은 --cx-* 변수 → 라이트/다크 자동 대응. 라이트 칩/입력은 순백 대신 옅은 회색으로 구분감 부여. * ════════════════════════════════════════════════════════════════════════════ */ /* 컨트롤(버튼 2종 + 텍스트 input) 공통 */ body.catx-on .search_filter_btm .form_box .btn.dropdown-toggle, body.catx-on .search_filter_btm .form_box input[type="text"], body.catx-on .search_filter_btm .form_box input.form-control{ font-size:var(--dash-font-12, 12px) !important; height:28px !important; min-height:28px !important; line-height:18px !important; background: var(--cx-card) !important; color: var(--cx-body) !important; border:1px solid var(--cx-line2) !important; border-radius:7px !important; box-shadow:none !important; box-sizing:border-box !important; } body.catx-on .search_filter_btm .form_box .btn.dropdown-toggle{ display:inline-flex !important; align-items:center !important; padding:5px 22px 3px 10px !important; } body.catx-on .search_filter_btm .form_box input[type="text"]{ padding:0 10px !important; } /* bootstrap-select 래퍼가 30px·흰배경이라 28px 칩 아래로 흰색 삐짐 → 래퍼 투명+28px 로 맞춤(래퍼 배경 제거) */ body.catx-on .search_filter_btm .form_box .bootstrap-select{ background:transparent !important; height:28px !important; } /* 라이트: 순백 대신 옅은 회색 칩으로 필터영역과 구분(지침: 지나친 흰색 지양) */ body.catx-on.catx-light .search_filter_btm .form_box .btn.dropdown-toggle, body.catx-on.catx-light .search_filter_btm .form_box input[type="text"], body.catx-on.catx-light .search_filter_btm .form_box input.form-control{ background:#f8fafc !important; } /* 미선택 필터(placeholder) 텍스트 = 본문색으로 통일(커스텀 드롭다운 .btn-center 와 동일: 셀렉트박스↔버튼 폰트색 일치) */ body.catx-on .search_filter_btm .form_box .btn.dropdown-toggle.bs-placeholder{ color: var(--cx-body) !important; } /* 캐럿 색(모든 드롭다운): 닫힘=아래화살표(border-top), 열림=위화살표(border-bottom) 둘 다 보조색 */ body.catx-on .search_filter_btm .form_box .btn.dropdown-toggle .caret{ border-top-color: var(--cx-sub) !important; border-bottom-color: var(--cx-sub) !important; } /* 캐럿 방향을 .open 클래스 기준으로 강제 — 값 선택된 필터를 바깥클릭으로 닫으면 base 가 border-bottom 을 안 지워 ▲ 로 고정되는 버그 방지 */ body.catx-on .search_filter_btm .form_box .bootstrap-select:not(.open) > .btn.dropdown-toggle .caret{ border-top-width:4px !important; border-bottom-width:0 !important; } body.catx-on .search_filter_btm .form_box .bootstrap-select.open > .btn.dropdown-toggle .caret{ border-top-width:0 !important; border-bottom-width:4px !important; } /* hover / focus / open 상태 명확히 */ body.catx-on .search_filter_btm .form_box .btn.dropdown-toggle:hover, body.catx-on .search_filter_btm .form_box input[type="text"]:hover{ border-color: var(--cx-hover-line) !important; } body.catx-on .search_filter_btm .form_box .bootstrap-select.open > .btn.dropdown-toggle, body.catx-on .search_filter_btm .form_box .btn.dropdown-toggle.active, body.catx-on .search_filter_btm .form_box input[type="text"]:focus{ border-color: var(--cx-accent) !important; color: var(--cx-strong) !important; } /* 열리는 패널(커스텀 _drop_box + bootstrap-select 메뉴) — 다크에서 흰 패널 방지 */ body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box), body.catx-on .search_filter_btm .bootstrap-select .dropdown-menu{ background: var(--cx-panel) !important; border:1px solid var(--cx-line2) !important; box-shadow: var(--cx-shadow) !important; border-radius:9px !important; } /* 금액·면적 패널은 바깥 padding:0이고 기존 안쪽 padding이 .open 상태에만 묶여 있다. 표시 상태와 무관하게 내용 여백을 유지한다. */ body.catx-on .search_filter_btm .dropdown-menu.price_drop_box > .drop_price_box, body.catx-on .search_filter_btm .dropdown-menu.area_drop_box > .drop_area_box{ padding:10px !important; box-sizing:border-box !important; } /* 패널 내부 텍스트/라벨 */ body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) li, body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) label, body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) span, body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) a, body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) p, body.catx-on .search_filter_btm .bootstrap-select .dropdown-menu li a{ color: var(--cx-body) !important; } /* 패널 내부 입력(최소/최대 등) */ body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) input, body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .form-control{ background: var(--cx-card) !important; color: var(--cx-body) !important; border:1px solid var(--cx-line2) !important; border-radius:6px !important; height:28px !important; font-size:var(--dash-font-12, 12px) !important; box-sizing:border-box !important; } body.catx-on.catx-light .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) input, body.catx-on.catx-light .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .form-control{ background:#f8fafc !important; } /* 입력+단위(평/㎡ 등) input-group: 단위 addon(span)이 h34·흰색·#ddd 라 입력(28)과 어긋남 → 높이/테두리 catx 통일 + 조인 라운드 정리(input 좌측만, addon 우측만) */ body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .input_span_box .form-control{ border-radius:7px 0 0 7px !important; border-right-width:0 !important; } body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .input_span_box > span{ height:28px !important; min-width:30px !important; font-size:var(--dash-font-12, 12px) !important; color: var(--cx-body) !important; border:1px solid var(--cx-line2) !important; border-radius:0 7px 7px 0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; } body.catx-on:not(.catx-light) .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .input_span_box > span{ background: var(--cx-chip) !important; } body.catx-on.catx-light .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .input_span_box > span{ background:#eef2f7 !important; } /* 전력(ELECTRIC POWER)/호이스트(HOIST) 등 min_max_box 구조 필터 팝업 — input_span_box 와 동일 스타일(깨짐 복구) */ /* min_max 필터: 바깥 래퍼의 앱 기본 패딩 제거. 금액·면적의 스크롤 내용 래퍼는 위 10px 여백을 유지한다. */ body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box):is(.dropdown-menus:not(.price_drop_box,.area_drop_box),.admin_hoist_drop_box) > div, body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box):is(.dropdown-menus,.admin_hoist_drop_box) .dropdown{ padding:0 !important; margin:0 !important; } body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .min_max_box{ display:flex !important; flex-wrap:nowrap !important; align-items:center !important; gap:5px !important; padding:6px !important; white-space:nowrap !important; width:auto !important; } body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .min_max{ display:inline-flex !important; flex:none !important; align-items:center !important; margin:0 !important; border:0 !important; padding:0 !important; background:transparent !important; } body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .min_max .form-control{ border-radius:7px 0 0 7px !important; border-right-width:0 !important; width:58px !important; flex:none !important; } body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .min_max > span{ height:28px !important; min-width:30px !important; padding:0 5px !important; font-size:var(--dash-font-12, 12px) !important; color:var(--cx-body) !important; border:1px solid var(--cx-line2) !important; border-radius:0 7px 7px 0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; box-sizing:border-box !important; flex:none !important; } body.catx-on:not(.catx-light) .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .min_max > span{ background:var(--cx-chip) !important; } body.catx-on.catx-light .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .min_max > span{ background:#eef2f7 !important; } /* bootstrap-select 열린 메뉴 — 선택/활성 항목이 앱 규칙(.admin_item_left_box ... li.selected a:focus{background:#002060} 특이도 0,6,2)으로 남색+어두운글자라 안읽힘. * .bootstrap-select.btn-group + > a + :focus 로 특이도 넘겨 선택항목=accent+흰글자, 비선택 hover=catx hover-bg. (항목 텍스트가 span.text 라 .text 도 흰색) */ body.catx-on .search_filter_btm .bootstrap-select.btn-group .dropdown-menu li.selected > a, body.catx-on .search_filter_btm .bootstrap-select.btn-group .dropdown-menu li.selected > a:hover, body.catx-on .search_filter_btm .bootstrap-select.btn-group .dropdown-menu li.selected > a:focus, body.catx-on .search_filter_btm .bootstrap-select.btn-group .dropdown-menu li.active > a, body.catx-on .search_filter_btm .bootstrap-select.btn-group .dropdown-menu li.active > a:hover, body.catx-on .search_filter_btm .bootstrap-select.btn-group .dropdown-menu li.active > a:focus{ background: var(--cx-accent) !important; color:#fff !important; } body.catx-on .search_filter_btm .bootstrap-select.btn-group .dropdown-menu li.selected > a .text, body.catx-on .search_filter_btm .bootstrap-select.btn-group .dropdown-menu li.active > a .text{ color:#fff !important; } body.catx-on .search_filter_btm .bootstrap-select.btn-group .dropdown-menu li > a:hover, body.catx-on .search_filter_btm .bootstrap-select.btn-group .dropdown-menu li > a:focus{ background: var(--cx-hover-bg) !important; color: var(--cx-strong) !important; } body.catx-on .search_filter_btm .bootstrap-select.btn-group .dropdown-menu li > a:hover .text, body.catx-on .search_filter_btm .bootstrap-select.btn-group .dropdown-menu li > a:hover span{ color: var(--cx-strong) !important; } /* 필터 패널(면적/가격 등 _drop_box) 초기화 버튼(빨간 아웃라인) → catx-red 로 통일·컴팩트 */ body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .btn_box .btn, body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .btn.btn_pc{ color: var(--cx-red) !important; border:1px solid var(--cx-red) !important; border-radius:6px !important; font-size:var(--dash-font-12, 12px) !important; background:transparent !important; } /* 패널 내부 중첩 select(타입/층·주차·소유자·경매유찰 등) — 원래 native look(h33·#ddd·radius5·13px)이라 옆 입력(28)과 어긋남 → catx 통일 */ body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) select{ height:28px !important; min-height:28px !important; font-size:var(--dash-font-12, 12px) !important; line-height:1 !important; color: var(--cx-body) !important; background: var(--cx-card) !important; border:1px solid var(--cx-line2) !important; border-radius:6px !important; box-sizing:border-box !important; padding:0 6px !important; } /* 라이트 select 배경 #f8fafc(입력칸과 통일) — parking/owner 는 앱 흰배경 규칙(...admin_item_left_box .PANEL_drop_box ... select, 0,7,2)이 있어 box경로 포함 0,7,3 으로 이김 */ body.catx-on.catx-light .search_filter_btm .form_box table .admin_item_left_box .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) select, body.catx-on.catx-light .search_filter_btm .form_box table .admin_item_right_box .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) select{ background:#f8fafc !important; } /* ════════════════════════════════════════════════════════════════════════════ * [매물목록 페이지] 툴바(.admin_itemList .item_header_pc) — 매물개수/정렬/개수/검색/등록 catx 통합 * 대상: 카테고리형(40~48, body.catx-on) 에서만. .item_header_pc 스코프라 테이블 행 버튼엔 무영향. * 중립 컨트롤 배경은 base 가 투명(다크)/흰색을 강제 → 라이트 `.catx-light`(2클래스)·다크 `:not(.catx-light)`(2클래스) 각각으로 이김. * 검색 input-group 은 조인 유지 위해 input radius 는 안 건드림(단독 드롭다운/셀렉트만 radius). * ════════════════════════════════════════════════════════════════════════════ */ body.catx-on .admin_itemList .item_header_pc .btn_dropdown, body.catx-on .admin_itemList .item_header_pc select.form-control, body.catx-on .admin_itemList .item_header_pc input[type="text"].form-control{ font-size:13px !important; height:32px !important; line-height:20px !important; color: var(--cx-body) !important; border:1px solid var(--cx-line2) !important; box-shadow:none !important; box-sizing:border-box !important; } body.catx-on.catx-light .admin_itemList .item_header_pc .btn_dropdown, body.catx-on.catx-light .admin_itemList .item_header_pc select.form-control{ background:#f8fafc !important; } body.catx-on:not(.catx-light) .admin_itemList .item_header_pc .btn_dropdown, body.catx-on:not(.catx-light) .admin_itemList .item_header_pc select.form-control{ background: var(--cx-card) !important; } /* 키워드 입력칸: 라이트 옅은회색(#f8fafc, 필터/툴바와 통일)·다크 어두운면 */ body.catx-on:not(.catx-light) .admin_itemList .item_header_pc input[type="text"].form-control{ background: var(--cx-card) !important; } body.catx-on.catx-light .admin_itemList .item_header_pc input[type="text"].form-control{ background:#f8fafc !important; } /* 단독 드롭다운/셀렉트만 라운드(검색 input-group 조인 유지) */ body.catx-on .admin_itemList .item_header_pc .btn_dropdown, body.catx-on .admin_itemList .item_header_pc select.form-control{ border-radius:7px !important; } /* 검색버튼(파랑)·매물등록 → catx accent, 컴팩트 */ body.catx-on .admin_itemList .item_header_pc .btn_search, body.catx-on .admin_itemList .item_header_pc .insert_btn{ background: var(--cx-accent) !important; border-color: var(--cx-accent) !important; height:32px !important; } body.catx-on .admin_itemList .item_header_pc .insert_btn{ border-radius:7px !important; font-size:13px !important; } /* 매물등록 버튼 폭 축소 → [엑셀|매물등록] 그룹 폭을 위 '필터 접기'(115px)와 동일하게. inline-flex+중앙정렬로 문구 세로중앙 맞춤 */ body.catx-on .admin_itemList .item_header_pc .insert_btn{ width:78px !important; min-width:78px !important; padding:0 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; gap:4px !important; } /* 매물 개수 badge → accent 강조 + 사이즈/라운드 통일(구파랑 테두리 제거) */ body.catx-on .admin_itemList .item_header_pc .item_num.badge{ background: var(--cx-accent) !important; height:32px !important; border-radius:7px !important; border:0 !important; font-size:13px !important; font-weight:600 !important; display:inline-flex !important; align-items:center !important; box-sizing:border-box !important; } /* 숫자(.all_cnt)만 더 크고 진하게 강조 — 이미지 참고(사용자 요청). "매물 175개" 형태(콜론 제거는 header JS) */ body.catx-on .admin_itemList .item_header_pc .item_num.badge .all_cnt{ font-size:16px !important; font-weight:800 !important; margin:0 1px 0 2px !important; letter-spacing:.2px !important; } /* 정렬 드롭다운(.align_dropdown) 패널 catx 스타일 — 기본 부트스트랩(각진·회색·중앙정렬) → 라운드 패널/좌정렬/accent 선택(사용자 요청) */ body.catx-on .admin_itemList .align_dropdown .dropdown-menu{ background: var(--cx-panel) !important; border:1px solid var(--cx-line2) !important; border-radius:10px !important; box-shadow: var(--cx-shadow) !important; padding:5px !important; margin-top:5px !important; min-width:100px !important; } body.catx-on.catx-light .admin_itemList .align_dropdown .dropdown-menu{ background:#fff !important; } /* li 구분선(앱 기본 border-bottom:#ddd) 제거(사용자 요청) */ body.catx-on .admin_itemList .align_dropdown .dropdown-menu > li{ border:0 !important; } /* 공통 스타일(display 미지정 → 숨김항목 '랜덤순'(.btn_random, inline display:none) 유지) */ body.catx-on .admin_itemList .align_dropdown .dropdown-menu > li > label.btn_align{ padding:7px 11px !important; margin:1px 0 !important; border-radius:7px !important; font-size:13px !important; font-weight:500 !important; color: var(--cx-body) !important; text-align:left !important; border:0 !important; background:transparent !important; cursor:pointer !important; box-shadow:none !important; transition: background .12s ease, color .12s ease !important; } /* 보이는 항목만 flex(텍스트 좌 + 정렬화살표 우). 랜덤순 제외해 노출 회귀 방지 */ body.catx-on .admin_itemList .align_dropdown .dropdown-menu > li > label.btn_align:not(.btn_random){ display:flex !important; align-items:center !important; justify-content:space-between !important; gap:8px !important; } body.catx-on .admin_itemList .align_dropdown .dropdown-menu > li > label.btn_align input[type="radio"]{ display:none !important; } body.catx-on .admin_itemList .align_dropdown .dropdown-menu > li > label.btn_align:hover{ background: var(--cx-hover-bg) !important; color: var(--cx-strong) !important; } body.catx-on .admin_itemList .align_dropdown .dropdown-menu > li > label.btn_align.active{ background: var(--cx-accent) !important; color:#fff !important; font-weight:600 !important; } /* 개수(30개씩보기) native select#offset → bootstrap-select 변환(header JS) 후 정렬 드롭다운과 동일 catx 패널 스타일. * (네이티브 select 열림목록은 OS 렌더라 CSS 불가 → 변환. 값/change 는 bootstrap-select 가 native 로 전달) */ body.catx-on .admin_itemList .item_header_pc .bootstrap-select{ width:112px !important; } body.catx-on .admin_itemList .item_header_pc .bootstrap-select > .dropdown-toggle.btn{ width:100% !important; height:32px !important; border-radius:7px !important; border:1px solid var(--cx-line2) !important; color: var(--cx-strong) !important; font-size:13px !important; box-shadow:none !important; display:inline-flex !important; align-items:center !important; padding:0 26px 0 11px !important; } body.catx-on.catx-light .admin_itemList .item_header_pc .bootstrap-select > .dropdown-toggle.btn{ background:#f8fafc !important; } body.catx-on:not(.catx-light) .admin_itemList .item_header_pc .bootstrap-select > .dropdown-toggle.btn{ background: var(--cx-card) !important; } body.catx-on .admin_itemList .item_header_pc .bootstrap-select > .dropdown-toggle .filter-option{ position:static !important; overflow:visible !important; width:auto !important; } body.catx-on .admin_itemList .item_header_pc .bootstrap-select > .dropdown-toggle .caret{ border-top-color: var(--cx-sub) !important; } body.catx-on .admin_itemList .item_header_pc .bootstrap-select .dropdown-menu{ background: var(--cx-panel) !important; border:1px solid var(--cx-line2) !important; border-radius:10px !important; box-shadow: var(--cx-shadow) !important; padding:5px !important; margin-top:5px !important; min-width:112px !important; } /* [버그] 내부스크롤용 overflow:hidden(admin_itemList)이 위로 열리는(dropup) 메뉴를 통째로 잘라 '클릭해도 안 열림'처럼 보임 * → 툴바는 화면 상단이라 아래 공간 충분하므로, bootstrap-select 의 dropup 을 무시하고 항상 아래로 강제(가시영역 유지) */ body.catx-on .admin_itemList .item_header_pc .bootstrap-select.dropup > .dropdown-menu, body.catx-on .admin_itemList .item_header_pc .bootstrap-select > .dropdown-menu{ top:100% !important; bottom:auto !important; } body.catx-on.catx-light .admin_itemList .item_header_pc .bootstrap-select .dropdown-menu{ background:#fff !important; } /* [버그] bootstrap-select 은 .dropdown-menu(외곽) 안에 .dropdown-menu.inner(내부 ul)가 있어 둘 다 패널스타일이 먹어 '테두리 2개' → 내부 ul 은 리셋(외곽만 카드) */ body.catx-on .admin_itemList .item_header_pc .bootstrap-select .dropdown-menu.inner{ border:0 !important; border-radius:0 !important; box-shadow:none !important; background:transparent !important; padding:0 !important; margin:0 !important; min-width:0 !important; } body.catx-on .admin_itemList .item_header_pc .bootstrap-select .dropdown-menu li{ border:0 !important; } body.catx-on .admin_itemList .item_header_pc .bootstrap-select .dropdown-menu li a{ display:flex !important; align-items:center !important; line-height:1.3 !important; min-height:0 !important; padding:7px 11px !important; margin:1px 0 !important; border-radius:7px !important; font-size:13px !important; color: var(--cx-body) !important; } body.catx-on .admin_itemList .item_header_pc .bootstrap-select .dropdown-menu li a:hover, body.catx-on .admin_itemList .item_header_pc .bootstrap-select .dropdown-menu li a:focus{ background: var(--cx-hover-bg) !important; color: var(--cx-strong) !important; } body.catx-on .admin_itemList .item_header_pc .bootstrap-select .dropdown-menu li.selected a{ background: var(--cx-accent) !important; color:#fff !important; font-weight:600 !important; } body.catx-on .admin_itemList .item_header_pc .bootstrap-select .dropdown-menu li a .check-mark{ display:none !important; } /* 선택기능 드롭다운 패널(.catx-bulkmenu, header JS 가 마커+아이콘+구분선 주입) — 정렬/개수와 동일 catx 카드 + 아이콘항목(사용자: 이미지처럼) */ body.catx-on .item_header_pc .dropdown-menu.catx-bulkmenu{ background: var(--cx-panel) !important; border:1px solid var(--cx-line2) !important; border-radius:10px !important; box-shadow: var(--cx-shadow) !important; padding:5px !important; margin-top:5px !important; min-width:186px !important; max-height:calc(100vh - 130px) !important; overflow-y:auto !important; overflow-x:hidden !important; } body.catx-on.catx-light .item_header_pc .dropdown-menu.catx-bulkmenu{ background:#fff !important; } body.catx-on .item_header_pc .dropdown-menu.catx-bulkmenu > li{ border:0 !important; } body.catx-on .item_header_pc .dropdown-menu.catx-bulkmenu a[role="menuitem"]{ display:flex !important; align-items:center !important; gap:9px !important; padding:8px 11px !important; margin:1px 0 !important; border-radius:7px !important; font-size:13px !important; color: var(--cx-body) !important; line-height:1.3 !important; text-decoration:none !important; white-space:nowrap !important; } body.catx-on .item_header_pc .dropdown-menu.catx-bulkmenu a[role="menuitem"] .catx-bulk-ic{ display:inline-flex !important; align-items:center !important; color: var(--cx-sub) !important; flex:0 0 auto !important; } body.catx-on .item_header_pc .dropdown-menu.catx-bulkmenu a[role="menuitem"]:hover{ background: var(--cx-hover-bg) !important; color: var(--cx-strong) !important; } body.catx-on .item_header_pc .dropdown-menu.catx-bulkmenu a[role="menuitem"]:hover .catx-bulk-ic{ color: var(--cx-strong) !important; } body.catx-on .item_header_pc .dropdown-menu.catx-bulkmenu a.catx-bulk-danger{ color: var(--cx-red) !important; } body.catx-on .item_header_pc .dropdown-menu.catx-bulkmenu a.catx-bulk-danger .catx-bulk-ic{ color: var(--cx-red) !important; } body.catx-on .item_header_pc .dropdown-menu.catx-bulkmenu a.catx-bulk-danger:hover{ background:color-mix(in oklab, var(--cx-red) 12%, transparent) !important; color: var(--cx-red) !important; } body.catx-on .item_header_pc .dropdown-menu.catx-bulkmenu .catx-bulkdiv{ height:1px !important; background: var(--cx-line2) !important; margin:5px 6px !important; } /* 툴바 액션버튼 사이즈/색톤 통일 --------------------------------- */ /* 검색 input-group: 파랑 검색버튼 우측 조인 라운드 */ body.catx-on .admin_itemList .item_header_pc .btn_search{ border-radius:0 7px 7px 0 !important; } /* 검색 input 좌측 조인 라운드 */ body.catx-on .admin_itemList .item_header_pc input[type="text"].form-control{ border-radius:7px 0 0 7px !important; } /* 빨강 검색버튼(자체관리번호) → catx-red, h32 통일 */ body.catx-on .admin_itemList .item_header_pc .btn.btn-default{ height:32px !important; border-radius:0 7px 7px 0 !important; background: #d6336c !important; border-color: #d6336c !important; color:#fff !important; } /* 엑셀 버튼 → 초록 아이콘 + catx 칩, h32/라운드7 통일 */ body.catx-on .admin_itemList .item_header_pc .btn_excel{ height:32px !important; border-radius:7px !important; color: var(--cx-green) !important; border:1px solid var(--cx-line2) !important; display:inline-flex !important; align-items:center !important; box-sizing:border-box !important; } body.catx-on.catx-light .admin_itemList .item_header_pc .btn_excel{ background:#f8fafc !important; } body.catx-on:not(.catx-light) .admin_itemList .item_header_pc .btn_excel{ background: var(--cx-card) !important; } /* 필터영역 우측 검색/새로고침 버튼 → catx 색톤+라운드(높이 30 원본 유지) */ body.catx-on .search_filter_btm .right_btn_01{ border-radius:7px !important; border:1px solid var(--cx-line2) !important; color: var(--cx-body) !important; box-sizing:border-box !important; } body.catx-on .search_filter_btm .right_btn_02{ border-radius:7px !important; border:1px solid #d6336c !important; color: #d6336c !important; background:transparent !important; box-sizing:border-box !important; } body.catx-on.catx-light .search_filter_btm .right_btn_01{ background:#f8fafc !important; } body.catx-on:not(.catx-light) .search_filter_btm .right_btn_01{ background: var(--cx-card) !important; } body.catx-on .search_filter_btm .right_btn_02 .fa-refresh{ color: #d6336c !important; } /* 아이콘 버튼(검색 파랑/빨강·엑셀) 정사각형 32x32 통일 — 가로가 세로보다 넓던 문제 해소 */ body.catx-on .admin_itemList .item_header_pc .btn_search, body.catx-on .admin_itemList .item_header_pc .btn.btn-default, body.catx-on .admin_itemList .item_header_pc .btn_excel{ width:32px !important; min-width:32px !important; height:32px !important; padding:0 !important; box-sizing:border-box !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } /* hover 효과: 채워진 버튼(파랑/빨강/등록)은 살짝 어둡게, 아웃라인 버튼은 강조색/옅은 배경 */ body.catx-on .admin_itemList .item_header_pc .btn_search, body.catx-on .admin_itemList .item_header_pc .btn.btn-default, body.catx-on .admin_itemList .item_header_pc .insert_btn, body.catx-on .admin_itemList .item_header_pc .btn_excel, body.catx-on .search_filter_btm .right_btn_01, body.catx-on .search_filter_btm .right_btn_02{ transition: filter .12s ease, background .12s ease, border-color .12s ease, color .12s ease !important; } /* 채워진 버튼 hover — 라이트=어둡게, 다크=밝게+글로우 (각 테마서 변화가 명확히 보이도록. 다크서 어둡게하면 배경에 묻혀 안보임) */ body.catx-on.catx-light .admin_itemList .item_header_pc .btn_search:hover, body.catx-on.catx-light .admin_itemList .item_header_pc .btn.btn-default:hover, body.catx-on.catx-light .admin_itemList .item_header_pc .insert_btn:hover{ filter:brightness(0.9) !important; box-shadow:0 2px 6px rgba(0,0,0,.2) !important; } body.catx-on:not(.catx-light) .admin_itemList .item_header_pc .btn_search:hover, body.catx-on:not(.catx-light) .admin_itemList .item_header_pc .btn.btn-default:hover, body.catx-on:not(.catx-light) .admin_itemList .item_header_pc .insert_btn:hover{ filter:brightness(1.15) !important; box-shadow:0 0 0 2px rgba(120,170,255,.35) !important; } /* 매물등록 버튼만 hover 시 파랑 채움·흰 글자(앱 흰bg/파랑글자 규칙 무시). btn_search/btn-default 는 위 filter 만 유지(색 변화 없음). */ body.catx-on .admin_itemList .item_header_pc .insert_btn:hover{ background:var(--cx-accent) !important; border-color:var(--cx-accent) !important; color:#fff !important; } body.catx-on .admin_itemList .item_header_pc .insert_btn:hover i{ color:#fff !important; } body.catx-on .admin_itemList .item_header_pc .btn_excel:hover{ border-color: var(--cx-accent) !important; color: var(--cx-accent) !important; } body.catx-on .search_filter_btm .right_btn_01:hover{ background: var(--cx-accent) !important; border-color: var(--cx-accent) !important; color:#fff !important; } body.catx-on .search_filter_btm .right_btn_01:hover i{ color:#fff !important; } body.catx-on .search_filter_btm .right_btn_02:hover{ background: var(--cx-hover-bg) !important; } /* 표시·광고 필수정보 누락(#required_missing_btn) → 경고 강조 분홍색 계열 (라이트: 옅은분홍칩+마젠타핑크 글자/아이콘, 다크: 밝은핑크) */ body.catx-on .admin_itemList .item_header_pc #required_missing_btn{ color:#a12b53 !important; border:1px solid #e5bbc9 !important; } body.catx-on.catx-light .admin_itemList .item_header_pc #required_missing_btn{ background:#fff !important; } body.catx-on:not(.catx-light) .admin_itemList .item_header_pc #required_missing_btn{ background: rgba(255,120,170,0.12) !important; color:#ff9ec4 !important; border-color:#ff9ec4 !important; } body.catx-on .admin_itemList .item_header_pc #required_missing_btn i{ color:inherit !important; } body.catx-on .admin_itemList .item_header_pc #required_missing_btn:hover{ filter:brightness(0.97) !important; border-color:#d6336c !important; } /* 활성화(.on): 배경 분홍 + 글자 흰색(요청). 라이트/다크 동일 톤. */ body.catx-on .admin_itemList .item_header_pc #required_missing_btn.on{ background:#d6336c !important; border-color:#d6336c !important; color:#fff !important; } /* 클릭 시 체크박스 포커스로 버튼 바깥에 테두리가 한 번 더 생기는 효과 제거(요청, catx 한정) */ body.catx-on .admin_itemList .item_header_pc #required_missing_btn:focus-within{ outline:none !important; outline-offset:0 !important; } /* 매물등록 불가(용량 초과) 버튼 색상은 전 대시보드 공통이라 admin_item_v2.php 마크업 인라인 스타일에서 적용(여기서는 게이팅하지 않음). */ /* [catx 한정] 용량초과 버튼 크기/라디우스를 다른 툴바 버튼(32px·radius7)과 통일 + 눈에 띄게 깜빡이는 효과. */ @keyframes cxBlockedBlink{ 0%,100%{ opacity:1; box-shadow:0 0 0 0 rgba(214,51,108,.55); } 50%{ opacity:.6; box-shadow:0 0 7px 2px rgba(214,51,108,.6); } } body.catx-on .admin_itemList .item_header_pc .item_header_R a.cx-item-blocked{ height:32px !important; line-height:30px !important; padding:0 12px !important; border-radius:7px !important; box-sizing:border-box !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; animation:cxBlockedBlink 1.2s ease-in-out infinite; } body.catx-on .admin_itemList .item_header_pc .item_header_R a.cx-item-blocked:hover{ animation-play-state:paused; } @media (prefers-reduced-motion: reduce){ body.catx-on .admin_itemList .item_header_pc .item_header_R a.cx-item-blocked{ animation:none; } } /* [catx 한정·PC] 문구 앞 경고 아이콘 노출 */ body.catx-on .admin_itemList .item_header_pc .item_header_R a.cx-item-blocked .cx-blocked-ico{ display:inline-block !important; margin-right:6px; font-size:var(--dash-font-12, 12px); } body.catx-on .admin_itemList .item_header_pc #required_missing_btn.on i{ color:#fff !important; } body.catx-on .admin_itemList .item_header_pc #required_missing_btn.on input[type="checkbox"]{ accent-color:#fff !important; } body.catx-on .admin_itemList .item_header_pc #required_missing_btn.on:hover{ filter:brightness(0.96) !important; border-color:#c23364 !important; } /* 활성화 시 옆에 매물 개수 배지 노출(비활성/비-catx 는 숨김) */ body.catx-on .admin_itemList .item_header_pc #required_missing_btn .rq_count{ display:none; } body.catx-on .admin_itemList .item_header_pc #required_missing_btn.on .rq_count{ display:inline-flex !important; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 6px; margin-left:2px; border-radius:9px; background:#fff; color:#c23364; font-size:var(--dash-font-11, 11px); font-weight:700; line-height:1; } /* 아이콘만 보이는 축소(compact) 상태에서는 개수 배지 숨김(요청) */ body.catx-on .admin_itemList .item_header_pc #required_missing_btn.rq_compact .rq_count{ display:none !important; } @media (max-width:1000px){ body.catx-on .admin_itemList .item_header_pc #required_missing_btn .rq_count{ display:none !important; } } /* ── 다크모드 필터 패널/버튼 상태 보정 ─────────────────────────────── */ /* 패널 섹션 제목(h4: 보증금/월세/FLOOR 등)이 rgb(16,35,69) 남색 고정이라 다크서 안보임 → catx-strong */ body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) h1, body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) h2, body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) h3, body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) h4, body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) h5, body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) h6{ color: var(--cx-strong) !important; } /* input_span_box 조인 라운드: 입력=좌측7·우직각·우테두리제거, 단위addon=우측7 (floor_input_box 등 .form-control 아닌 input 포함). select 단독=7 */ body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .input_span_box input, body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .input_span_box .form-control{ border-radius:7px 0 0 7px !important; border-right-width:0 !important; } body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .input_span_box > span{ border-radius:0 7px 7px 0 !important; } /* 소유자 필터: 고객그룹/고객명 높이와 정렬 통일. 고객명은 단위가 없는 독립 입력칸이다. */ body.catx-on .search_filter_btm .owner_drop_box .dropdown_owner_con > div{ display:flex !important; align-items:center !important; gap:6px; width:100%; min-width:0; } body.catx-on .search_filter_btm .owner_drop_box .dropdown_owner_con > div > .dropdown{ flex:0 1 88px; min-width:0; margin:0 !important; } body.catx-on .search_filter_btm .owner_drop_box .dropdown_owner_con .input_span_box{ flex:1 1 110px !important; min-width:0 !important; width:auto !important; margin:0 !important; float:none !important; } body.catx-on .search_filter_btm .owner_drop_box .dropdown_owner_con select, body.catx-on .search_filter_btm .owner_drop_box .dropdown_owner_con .input_span_box > input.search_customer{ display:block; width:100% !important; min-width:0 !important; height:28px !important; line-height:normal !important; margin:0 !important; box-sizing:border-box !important; border-width:1px !important; border-style:solid !important; border-radius:7px !important; } @media (min-width:768px){ body.catx-on #admin_wrap .search_filter_btm .dropdown-menu.owner_drop_box{ width:240px !important; min-width:240px !important; padding:10px !important; box-sizing:border-box !important; } body.catx-on #admin_wrap .search_filter_btm .owner_drop_box .dropdown_search, body.catx-on #admin_wrap .search_filter_btm .owner_drop_box .type_sub_view, body.catx-on #admin_wrap .search_filter_btm .owner_drop_box .dropdown_owner_con{ width:100% !important; min-width:0 !important; box-sizing:border-box !important; } body.catx-on #admin_wrap .search_filter_btm .owner_drop_box .dropdown_owner_con > div > .dropdown{ flex:0 0 88px !important; width:88px !important; min-width:88px !important; } body.catx-on #admin_wrap .search_filter_btm .owner_drop_box .dropdown_owner_con .input_span_box{ flex:1 0 110px !important; min-width:110px !important; } } body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) select{ border-radius:7px !important; } /* Kw/톤 등 .min_max 단위 addon(span) — app 이 #efefef(밝은회색) 강제라 다크서 밝은글자와 저대비 → catx 칩+입력 조인(h28) */ body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .min_max input{ border-radius:7px 0 0 7px !important; border-right-width:0 !important; } body.catx-on .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .min_max input + span{ height:28px !important; min-width:34px !important; font-size:var(--dash-font-12, 12px) !important; color: var(--cx-body) !important; border:1px solid var(--cx-line2) !important; border-radius:0 7px 7px 0 !important; box-sizing:border-box !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } body.catx-on:not(.catx-light) .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .min_max input + span{ background: var(--cx-chip) !important; } body.catx-on.catx-light .search_filter_btm .dropdown-menu:is(.price_drop_box,.area_drop_box,.floor_drop_box,.type_floor_drop_box,.addfilter_drop_box,.admin_hoist_drop_box,.hoist_drop_box,.owner_drop_box,.parking_drop_box,.auction_bids_drop_box,.auction_date_drop_box,.electric_power_drop_box) .min_max input + span{ background:#eef2f7 !important; } /* 필터/툴바 드롭다운 hover: 배경 옅게 + 문구·화살표 밝게 (기존엔 테두리만 변해 hover 체감 약함) */ body.catx-on .search_filter_btm .form_box .btn.dropdown-toggle:hover{ background: var(--cx-hover-bg) !important; color: var(--cx-strong) !important; border-color: var(--cx-hover-line) !important; } body.catx-on .search_filter_btm .form_box .btn.dropdown-toggle:hover .caret{ border-top-color: var(--cx-strong) !important; border-bottom-color: var(--cx-strong) !important; } body.catx-on .admin_itemList .item_header_pc .btn_dropdown{ transition: background .12s ease, color .12s ease, border-color .12s ease !important; } body.catx-on .admin_itemList .item_header_pc .btn_dropdown:hover{ background: var(--cx-hover-bg) !important; color: var(--cx-strong) !important; border-color: var(--cx-hover-line) !important; } /* ── 선택/입력된 필터 강조(파랑) ────────────────────────────────────── * bootstrap-select: 값 선택 시 .bs-placeholder 제거됨 → :not(.bs-placeholder) * 텍스트 입력칸: :not(:placeholder-shown) * 커스텀 range 드롭다운(가가/면적/FLOOR/주차/전력/HOIST/경매): 클래스 마커가 없어 * admin_header_category.php 의 catx-gated JS 가 값 있을 때 .cx-filter-active 부여(다른 스타일 무해) * ──────────────────────────────────────────────────────────────────── */ /* 강조색 변수(테두리/글자/배경 분리): 라이트=밝은 파랑 아웃라인, 다크=슬레이트 채움(원격지원 버튼 톤 — 사용자 선택) */ body.catx-on{ --cx-filter-bd: var(--cx-accent); --cx-filter-tx: var(--cx-accent); --cx-filter-bg: rgba(77,141,255,.12); } /* 다크: 배경 밝게 + 글자 어둡게(강한 대비, 확실히 눈에 띔 — 사용자 요청) */ body.catx-on:not(.catx-light){ --cx-filter-bd:#86a9db; --cx-filter-tx:#17253f; --cx-filter-bg:#9cbce9; } /* bootstrap-select(값선택) + 커스텀(cx-filter-active) */ body.catx-on .search_filter_btm .bootstrap-select > .btn.dropdown-toggle:not(.bs-placeholder), body.catx-on .search_filter_btm .form_box .btn.btn-center.btn-default.dropdown-toggle.cx-filter-active{ border-color: var(--cx-filter-bd) !important; color: var(--cx-filter-tx) !important; background: var(--cx-filter-bg) !important; font-weight:600 !important; } /* 텍스트 입력칸 — border 는 shorthand+특이도(:not(.bs-placeholder))라야 base 를 이김 */ body.catx-on .search_filter_btm .form_box input[type="text"]:not(:placeholder-shown):not(.bs-placeholder), body.catx-on .search_filter_btm .form_box input.form-control:not(:placeholder-shown):not(.bs-placeholder){ border:1px solid var(--cx-filter-bd) !important; color: var(--cx-filter-tx) !important; background: var(--cx-filter-bg) !important; font-weight:600 !important; } /* 커스텀 버튼 내부 텍스트 div */ body.catx-on .search_filter_btm .btn.btn-center.btn-default.dropdown-toggle.cx-filter-active .type_sub_tit2, body.catx-on .search_filter_btm .btn.btn-center.btn-default.dropdown-toggle.cx-filter-active .ellipsis{ color: var(--cx-filter-tx) !important; } /* 캐럿(화살표) */ body.catx-on .search_filter_btm .bootstrap-select > .btn.dropdown-toggle:not(.bs-placeholder) .caret, body.catx-on .search_filter_btm .btn.btn-center.btn-default.dropdown-toggle.cx-filter-active .caret{ border-top-color: var(--cx-filter-tx) !important; border-bottom-color: var(--cx-filter-tx) !important; } /* 선택 개수 배지(.badge, 기본 #333/흰글자) — 다크 밝은칩 위에서 네이비 pill 로 */ body.catx-on:not(.catx-light) .search_filter_btm .bootstrap-select > .btn.dropdown-toggle:not(.bs-placeholder) .badge{ background:#17253f !important; color:#dbe8fc !important; } /* 다크: 필터 hover/열림/포커스/active — 기존 --cx-hover-bg(20% 블루)가 허옇게 워시돼 글자가 안읽히던 것 → 솔리드 다크블루(#2f3d5c)+밝은글자로 명확히. :focus/.active/:active 까지 덮어 Bootstrap 기본 밝은회색 열림상태 제거 */ body.catx-on:not(.catx-light) .search_filter_btm .form_box .btn.dropdown-toggle:hover, body.catx-on:not(.catx-light) .search_filter_btm .form_box .btn.dropdown-toggle:focus, body.catx-on:not(.catx-light) .search_filter_btm .form_box .btn.dropdown-toggle.active, body.catx-on:not(.catx-light) .search_filter_btm .form_box .btn.dropdown-toggle:active, body.catx-on:not(.catx-light) .search_filter_btm .form_box .bootstrap-select.open > .btn.dropdown-toggle{ background:#2f3d5c !important; background-image:none !important; color:#eaf1fb !important; box-shadow:none !important; } body.catx-on:not(.catx-light) .search_filter_btm .form_box .btn.dropdown-toggle:hover .filter-option, body.catx-on:not(.catx-light) .search_filter_btm .form_box .bootstrap-select.open > .btn.dropdown-toggle .filter-option{ color:#eaf1fb !important; } body.catx-on:not(.catx-light) .search_filter_btm .form_box .btn.dropdown-toggle:hover .caret, body.catx-on:not(.catx-light) .search_filter_btm .form_box .bootstrap-select.open > .btn.dropdown-toggle .caret{ border-top-color:#eaf1fb !important; border-bottom-color:#eaf1fb !important; } /* 선택된 필터는 열림/hover/포커스 에도 밝은 칩 유지(위 솔리드 열림상태를 이김) */ body.catx-on:not(.catx-light) .search_filter_btm .bootstrap-select.open > .btn.dropdown-toggle:not(.bs-placeholder), body.catx-on:not(.catx-light) .search_filter_btm .bootstrap-select > .btn.dropdown-toggle:not(.bs-placeholder):hover, body.catx-on:not(.catx-light) .search_filter_btm .bootstrap-select > .btn.dropdown-toggle:not(.bs-placeholder):focus{ background: var(--cx-filter-bg) !important; color: var(--cx-filter-tx) !important; } body.catx-on:not(.catx-light) .search_filter_btm .bootstrap-select.open > .btn.dropdown-toggle:not(.bs-placeholder) .filter-option{ color: var(--cx-filter-tx) !important; } body.catx-on:not(.catx-light) .search_filter_btm .bootstrap-select.open > .btn.dropdown-toggle:not(.bs-placeholder) .caret, body.catx-on:not(.catx-light) .search_filter_btm .bootstrap-select > .btn.dropdown-toggle:not(.bs-placeholder):hover .caret{ border-top-color: var(--cx-filter-tx) !important; border-bottom-color: var(--cx-filter-tx) !important; } /* 필터 영역 상/하 여백 균형(모드 무관 — 레이아웃) — 필터블록 margin-bottom:5px 가 마지막 행에 트레일링으로 남아 하단이 상단보다 넓던 것(11 vs 18) → 행간을 row-gap 으로 옮기고 트레일링 제거 → .filter_content 상하 11/11 대칭 */ body.catx-on .search_filter_btm .filter_content{ row-gap:5px !important; align-content:flex-start !important; } body.catx-on .search_filter_btm .filter_content > *{ margin-bottom:0 !important; } /* 필터 접힘(.on) 바: 컴팩트 + 좌(선택된필터조건)·우(필터펼치기) 세로 중앙 정렬 통일. 펼침 무영향 = .on 한정. ⚠️ 데스크톱 전용(min-width:769px)! 모바일에선 .search_filter_btm.on 이 "열린 전체필터 오버레이"라 이 접힘바 규칙(특히 filter_title flex-center)이 새어들면 선택된필터조건이 빈 공간에 뜨고 레이아웃이 깨짐. → 모바일은 앱 기본(일반형)대로 두고, 접힘바 보정은 데스크톱에만 적용. */ @media (min-width:769px){ body.catx-on .search_filter_btm.on td{ padding-top:8px !important; padding-bottom:8px !important; vertical-align:middle !important; } body.catx-on .search_filter_btm.on .btn_box{ height:auto !important; } /* 좌: filter_title — 한글 디센더로 박스중심보다 시각중심이 위로 뜸 → translateY(4)로 바 중앙 보정(우측 토글과 라인 맞춤) */ body.catx-on .search_filter_btm.on .filter_title{ display:flex !important; align-items:center !important; justify-content:center !important; gap:6px !important; margin:0 !important; line-height:1 !important; transform:translateY(4px) !important; } /* 우: 필터펼치기 토글(.filter_top_btn: absolute+top:-7, .btn_open line-height:35) 컴팩트 바 위 삐져나옴 방지 → 바 높이에 flex 중앙 + line-height 축소 */ body.catx-on .search_filter_btm.on .filter_top_btn{ top:0 !important; bottom:0 !important; display:flex !important; align-items:center !important; justify-content:flex-end !important; } /* btn_open 이 flex 라 native text-align:center 무시됨 → 텍스트가 115px 박스 좌측에 붙던 것(좌측정렬로 보임) → justify-content:center 로 가로 중앙정렬 */ body.catx-on .search_filter_btm.on .btn_open{ line-height:1 !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; } /* 개수 배지(.title_num) = accent 칩(선택개수). ※라벨은 원래 어두운색 유지 — 접힘 바 배경이 #f7f7f7(밝은회색, 양 모드 공통)이라 흰색이면 안보임(이전 실수 정정) */ body.catx-on .search_filter_btm.on .filter_title .title_num{ background: var(--cx-accent) !important; color:#fff !important; border:1px solid var(--cx-accent) !important; border-radius:10px !important; padding:1px 8px !important; font-size:var(--dash-font-12, 12px) !important; line-height:16px !important; display:inline-flex !important; align-items:center !important; } } /* ── 모바일 전체필터 오버레이 다크(≤768) : 앱 기본이 흰 패널+검정 문구라 다크에서 안 보임 → 패널/문구/입력칸/칩 다크화. ※ .on=모바일에선 열린 오버레이. 네이티브 를 숨기고 .btn.dropdown-toggle 을 렌더한다. * 그래서 select:focus 로는 클릭 효과가 걸리지 않는다 → 버튼(열림/포커스) 기준으로 동일한 효과를 준다. */ body.catx-on #form_item .bootstrap-select.btn-group > .dropdown-toggle:focus, body.catx-on #form_item .bootstrap-select.btn-group.open > .dropdown-toggle, body.catx-on #form_item .btn-group.open > .dropdown-toggle.btn-default, body.catx-on #form_item .select_boxs .btn-group.open > .dropdown-toggle{ border-color:#4D8DFF; color:#4D8DFF; box-shadow:0 0 0 3px rgba(77,141,255,.18); outline:0; } /* 열린 목록의 선택 항목도 포인트 컬러로 */ body.catx-on #form_item .bootstrap-select.btn-group .dropdown-menu li.selected > a, body.catx-on #form_item .bootstrap-select.btn-group .dropdown-menu li > a:hover{ background:rgba(77,141,255,.08); color:#4D8DFF; } /* -- 9. [자동 생성] 폼에 하드코딩된 파랑(#0A84FF / #0557fe)을 포인트 컬러 #4D8DFF 로 일괄 통일 -- * 원본 규칙과 1:1 대응. 선택자 앞에 body.catx-on.cx-has-itemadd 만 붙여 * (a) 특이도로 이기고 (b) 등록폼이 있는 화면으로만 범위를 묶는다. * - 같은 규칙의 color:#FFF 동반 이관: 안 하면 선택 상태(.active/.on)의 흰 글자를 덮어버린다. * - 원본이 무효인 선언(##0A84FF 등) 제외: 되살리면 없던 스타일이 새로 생긴다. * - 원본의 @media 조건 유지: 빼면 좁은 폭 전용 색이 전 폭에 적용된다. * 색상 외 속성은 손대지 않으므로 크기/위치/상태 로직에 영향 없음. */ body.catx-on.cx-has-itemadd .modal_wrap_ver1 .btn.btn_0557fe{ background:#4D8DFF; border-color:#4D8DFF; color:#fff; } body.catx-on.cx-has-itemadd .modal_wrap_ver1 .btn.btn_0557fe:hover{ background:#fff; color:#4D8DFF; } body.catx-on.cx-has-itemadd .form_box .box_title{ background:#4D8DFF; color: #fff; } body.catx-on.cx-has-itemadd .form_box .box_contents .form_title .btn.add_build{ background:#4D8DFF; color:#fff; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd .form_box .box_contents .form_title .btn.add_build:hover{ background: #FFF; color:#4D8DFF; } body.catx-on.cx-has-itemadd .form_box .box_contents .form_title .btn.add_build:hover i{ color:#4D8DFF; } body.catx-on.cx-has-itemadd .form_select_box .form_select div{ background:#fff; border-color:#4D8DFF; color:#4D8DFF; } body.catx-on.cx-has-itemadd .form_select_box .form_select div.on{ background:#4D8DFF; color:#fff; } body.catx-on.cx-has-itemadd .multibox.file .image_edit_btn{ border-color:#4D8DFF; background:#4D8DFF; color: #FFF; } body.catx-on.cx-has-itemadd .multibox.file .image_edit_btn:hover{ color:#4D8DFF; background: #FFF; } body.catx-on.cx-has-itemadd .address_tr .con_box .build_searchs span{ background:#4D8DFF; border-color:#4D8DFF; color: #fff; } body.catx-on.cx-has-itemadd .address_tr .con_box .build_searhs span:hover{ background: #fff; color:#4D8DFF; } body.catx-on.cx-has-itemadd .map_wrap .btn_tojiSoyu_search{ background:#; border-color:#4D8DFF; color:#4D8DFF; } body.catx-on.cx-has-itemadd .location_address_box_L .address_box .form_table_box_tt .btn_tojiSoyu_search{ background:#; border-color:#4D8DFF; color:#4D8DFF; } body.catx-on.cx-has-itemadd .map_wrap .btn_tojiSoyu_search:hover{ background:#4D8DFF !important; border-color:#4D8DFF !important; color:#fff !important; } body.catx-on.cx-has-itemadd .location_address_box_L .address_box .form_table_box_tt .btn_tojiSoyu_search:hover{ background:#4D8DFF !important; border-color:#4D8DFF !important; color:#fff !important; } body.catx-on.cx-has-itemadd .contents_g_contents .btn:not(.active, body.catx-on.cx-has-itemadd .dropdown-toggle):hover{ background:#4D8DFF; border-color:#4D8DFF; color:#fff; } body.catx-on.cx-has-itemadd .contents_g_contents .btn-default.active, body.catx-on.cx-has-itemadd .btn-default:active, body.catx-on.cx-has-itemadd .open>.dropdown-toggle.btn-default{ background:#4D8DFF; color:#fff; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd .contents_g_contents .btn-default.active:hover{ background:#4D8DFF; color:#fff; } body.catx-on.cx-has-itemadd .contents_g_contents .input-group-addon.btn_toji_search{ background:#4D8DFF; border-color:#4D8DFF; color:#fff; } body.catx-on.cx-has-itemadd .contents_g_contents .input-group-addon.btn_toji_search:hover{ background:#fff; color:#4D8DFF; } body.catx-on.cx-has-itemadd .moneybox .contents_g_contents .input_month_rent_btn{ background:#4D8DFF; border-color:#4D8DFF; color:#fff; } body.catx-on.cx-has-itemadd .contents_g_contents .form_owner_select>.btn{ background:#4D8DFF; color:#fff; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd .contents_g_contents .form_owner_select>.btn:hover{ background:#fff; color:#4D8DFF; } body.catx-on.cx-has-itemadd .form_box_wrap .form_owner_select>.btn{ background:#4D8DFF; color:#fff; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd .form_box_wrap .form_owner_select>.btn:hover{ background:#fff; color:#4D8DFF; } body.catx-on.cx-has-itemadd .form-control:focus{ border-color:#4D8DFF; } body.catx-on.cx-has-itemadd label.btn-default{ border-color:#4D8DFF; color:#4D8DFF; } body.catx-on.cx-has-itemadd select:focus, body.catx-on.cx-has-itemadd select:active{ border-color:#4D8DFF; } body.catx-on.cx-has-itemadd .btn-default.active.focus, body.catx-on.cx-has-itemadd .btn-default.active:focus, body.catx-on.cx-has-itemadd .btn-default.active:hover, body.catx-on.cx-has-itemadd .btn-default:active:focus, body.catx-on.cx-has-itemadd .btn-default:active:hover, body.catx-on.cx-has-itemadd .open>.dropdown-toggle.btn-default:focus{ border-color:#4D8DFF; background-color:#fff; } body.catx-on.cx-has-itemadd .form_content .btn-default:hover{ background:#fafafa; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd .form_content .form-control:focus{ border-color:#4D8DFF; } body.catx-on.cx-has-itemadd .form_content .cke_combo_off a.cke_combo_button:hover, body.catx-on.cx-has-itemadd .form_content .cke_combo_off a.cke_combo_button:focus{ border-color:#4D8DFF; background:#efefef; } body.catx-on.cx-has-itemadd .form_content .cke_toolgroup:hover{ border-color:#4D8DFF; } body.catx-on.cx-has-itemadd .filebox label:hover{ border-color:#4D8DFF; color:#4D8DFF; } body.catx-on.cx-has-itemadd .checks input[type="checkbox"]:checked + label:before{ background:#4D8DFF; border-color:#4D8DFF; color:#fff; } body.catx-on.cx-has-itemadd .form_btn_box .save_btn_copy{ background-color:#4D8DFF !important; border-color:#4D8DFF !important; } body.catx-on.cx-has-itemadd .form_btn_box .save_btn_copy:hover{ background:#fff !important; border-color:#4D8DFF !important; color:#4D8DFF !important; } body.catx-on.cx-has-itemadd .switch-input:checked ~ .switch-label{ background:#4D8DFF; } body.catx-on.cx-has-itemadd .land_unit_btn{ background:#4D8DFF; border-color:#4D8DFF; color:#fff; } body.catx-on.cx-has-itemadd .land_unit_btn:hover{ background:#fff; color:#4D8DFF; } body.catx-on.cx-has-itemadd .form_box_wrap .form_title>.land_unit_btn{ background:#4D8DFF; border-color:#4D8DFF; color:#fff; } body.catx-on.cx-has-itemadd .form_box_wrap .form_title>.land_unit_btn:hover{ background:#fff; color:#4D8DFF; } body.catx-on.cx-has-itemadd .contents_g_contents .input-group>input:focus{ border-color:#4D8DFF; } body.catx-on.cx-has-itemadd .btn_part.active .radioR{ background:#4D8DFF; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd .btn_display.active .radioR{ background:#4D8DFF; border-color:#0076e7; } body.catx-on.cx-has-itemadd .fileName_box label>span{ background:#4D8DFF; border-color:#4D8DFF; color:#fff; } body.catx-on.cx-has-itemadd .fileName_box label>span:hover{ background:#fff; color:#4D8DFF; } body.catx-on.cx-has-itemadd .rental_status_table .btn{ background:#4D8DFF; border-color:#4D8DFF; color:#fff; } body.catx-on.cx-has-itemadd .rental_status_table .btn:hover{ background:#fff; border-color:#4D8DFF; color:#4D8DFF; } body.catx-on.cx-has-itemadd .price_auction_table .btn{ background:#4D8DFF; border-color:#4D8DFF; color:#fff; } body.catx-on.cx-has-itemadd .price_auction_table .btn:hover{ background:#fff; border-color:#4D8DFF; color:#4D8DFF; } body.catx-on.cx-has-itemadd .tenant_table .btn{ background:#4D8DFF; border-color:#4D8DFF; color:#fff; } body.catx-on.cx-has-itemadd .tenant_table .btn:hover{ background:#fff; border-color:#4D8DFF; color:#4D8DFF; } body.catx-on.cx-has-itemadd .building_register_table .btn{ background:#4D8DFF; border-color:#4D8DFF; color:#fff; } body.catx-on.cx-has-itemadd .building_register_table .btn:hover{ background:#fff; border-color:#4D8DFF; color:#4D8DFF; } body.catx-on.cx-has-itemadd .toji_register_table .btn{ background:#4D8DFF; border-color:#4D8DFF; color:#fff; } body.catx-on.cx-has-itemadd .toji_register_table .btn:hover{ background:#fff; border-color:#4D8DFF; color:#4D8DFF; } body.catx-on.cx-has-itemadd .tenant_lease_table .btn{ background:#4D8DFF; border-color:#4D8DFF; color:#fff; } body.catx-on.cx-has-itemadd .tenant_lease_table .btn:hover{ background:#fff; border-color:#4D8DFF; color:#4D8DFF; } body.catx-on.cx-has-itemadd .form_tabbtn .tab_btn{ color:#4D8DFF; background: #FFF; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd .form_tabbtn .tab_btn.active{ color: #FFF; background:#4D8DFF; } body.catx-on.cx-has-itemadd .build_tabcontent .tabcontent_floor .box_title span.item_arrow:hover{ border-color:#4D8DFF; } body.catx-on.cx-has-itemadd .build_tabcontent .tabcontent_floor .box_title span.item_arrow:hover i, body.catx-on.cx-has-itemadd .build_tabcontent .tabcontent_floor .box_title span.item_arrow.on i{ color:#4D8DFF; } body.catx-on.cx-has-itemadd .build_searchbtn{ background:#4D8DFF; border-color:#4D8DFF; color: #fff; } body.catx-on.cx-has-itemadd .build_searchbtn:hover{ background: #fff; color:#4D8DFF; } body.catx-on.cx-has-itemadd .contents_g_contents .con_box.management3 .fee_list .fee_plus{ border-color:#4D8DFF; color: #FFF; background:#4D8DFF; } body.catx-on.cx-has-itemadd .contents_g_contents .con_box.management3 .fee_list .fee_plus:hover{ color:#4D8DFF; background: #FFF; } body.catx-on.cx-has-itemadd .price_to_won{ color:#4D8DFF; } body.catx-on.cx-has-itemadd .checks input[type="checkbox"]:checked + label:before{ background:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .form_select_box .form_select_box_L .form_select > div{ background: #FFF; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .form_select_box .form_select_box_L .form_select > div.on{ color: #FFF; background:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .form_select_box .form_select_box_R .btn_adDeclare:hover{ color:#4D8DFF; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .form_select_box .form_select_box_R .btn_adDeclare:hover i.fa-chevron-right{ color:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .form_select_box .form_select_box_R > .save_btn_copy{ background:#4D8DFF !important; color:#FFF; border-color:#4D8DFF !important; } body.catx-on.cx-has-itemadd #form_item .form_select_box .form_select_box_R > .save_btn_copy:hover{ color:#4D8DFF !important; background: #FFF !important; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap .form_table_box_wrap > .form_table_box .form_table_box_tt .form_table_box_tt_btn .setting_btn:hover{ background:#4D8DFF; color: #FFF; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap .form_table_box_wrap > .form_table_box .form_table_box_tt .buttons_boxs{ border-color:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap .buttons_boxs label span{ color:#4D8DFF; background: #FFF; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap .is_hidden.buttons_boxs label span{ color:#4D8DFF; background: #FFF; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap .buttons_boxs:not(#item_range) label input:checked + span{ color: #FFF; background:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap .buttons_boxs label.active span{ color: #FFF; background:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap#form_location_info .form_title .btn_adDeclare:hover{ color:#4D8DFF; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap#form_location_info .form_title .btn_adDeclare:hover i.fa-chevron-right{ color:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap#form_location_info .form_title .setting_btn:hover{ background:#4D8DFF; color: #FFF; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap#form_price_info .form_title .setting_btn:hover{ background:#4D8DFF; color: #FFF; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap#form_price_info .con_manage_box.manage_fee_box .fee_list .fee_plus{ border-color:#4D8DFF; color: #FFF; background:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap#form_price_info .con_manage_box.manage_fee_box .fee_list .fee_plus:hover{ color:#4D8DFF; background: #FFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap#form_price_info .manage_detail_box .manage_detail_box_list_box .manage_detail_box_list_box_cnt .fee_plus{ border-color:#4D8DFF; color: #FFF; background:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap#form_price_info .manage_detail_box .manage_detail_box_list_box .manage_detail_box_list_box_cnt .fee_plus:hover{ color:#4D8DFF; background: #FFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap.form_detail_photo_tab .detail_photo_tab_btn_box > div{ background: #F3F9FF; border-color:#4D8DFF; color:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap.form_detail_photo_tab .detail_photo_tab_btn_box > div.on{ background:#4D8DFF; color: #FFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap.form_building_toji_tab .building_toji_tab_btn_box{ background:var(--cx-row); } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap.form_building_toji_tab .building_toji_tab_btn_box > div{ background: #F3F9FF; border-color:#4D8DFF; color:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap.form_building_toji_tab .building_toji_tab_btn_box > div.on{ background:#4D8DFF; color: #FFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap#form_toji_info .con_dong_box .input-group input{ border-color:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap#form_toji_info .con_box.con_dong_box .toji_soyu{ color:#4D8DFF; background: #fff; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap#form_toji_info .con_box.con_dong_box .toji_soyu:hover{ background:#4D8DFF; color: #fff; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap#form_officer_info .setting_btn:hover{ background:#4D8DFF; border-color:#4D8DFF; color: #FFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap#form_officer_info .input_span input{ border-color:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap#form_officer_info .input_span span{ background:#4D8DFF; color: #FFF; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap#form_officer_info .input_span span:hover{ color:#4D8DFF; background: #FFF; } body.catx-on.cx-has-itemadd #form_item .box_content_box .form_box_wrap#form_officer_info .select_box_wrap .select_box_wrap_top .customer_tip{ color:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .form_box_wrap#form_building_info .address_tr .con_box .build_searchs input{ border-color:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .form_btn_box .btn.save_btn_copy{ background:#4D8DFF; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd #form_item .form_btn_box .btn.save_btn_copy:hover{ background:#fff; color:#4D8DFF; } body.catx-on.cx-has-itemadd .new_existingCustomerInfo_wrap .modal_box.blue.active, body.catx-on.cx-has-itemadd .new_existingCustomerInfo_wrap .modal_box.blue:hover{ border-color:#4D8DFF; } body.catx-on.cx-has-itemadd .new_existingCustomerInfo_wrap .modal_box .customer_info_boxs_wrap .customer_info_boxs_R .blue:hover{ background:#4D8DFF; border-color:#4D8DFF; color: #FFF; } body.catx-on.cx-has-itemadd .new_sortation.blue{ background:#4D8DFF; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd #price_setting_modal .modal_wrap_ver1 .modal_content .price_table_body .dd-item > div:nth-child(1) .move_btn > span:hover{ border-color:#4D8DFF; color:#4D8DFF; } body.catx-on.cx-has-itemadd #customer_setting_modal .modal_wrap_ver1 .customer_select_box{ border-color:#4D8DFF; background:#4D8DFF; } body.catx-on.cx-has-itemadd #customer_setting_modal .modal_wrap_ver1 .customer_select_box > label input + span{ color:#4D8DFF; } body.catx-on.cx-has-itemadd #customer_setting_modal .modal_wrap_ver1 .customer_select_box > label input:checked + span{ color: #FFF; background:#4D8DFF; } body.catx-on.cx-has-itemadd #modal-member_customer .modal_wrap_ver1 .modal_content .register_wrap_btm .register_type_tab{ border-color:#4D8DFF; background: #FFF; } body.catx-on.cx-has-itemadd #modal-member_customer .modal_wrap_ver1 .modal_content .register_wrap_btm .register_type_tab label span{ color:#4D8DFF; } body.catx-on.cx-has-itemadd #modal-member_customer .modal_wrap_ver1 .modal_content .register_wrap_btm .register_type_tab label.on span{ color: #FFF; background:#4D8DFF; } body.catx-on.cx-has-itemadd #modal-ownerFind .modal_box:hover{ background: #EBF2FF; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd #modal-ownerFind .modal_box:hover .customer_info_boxs_R label{ background:#4D8DFF; border-color:#4D8DFF; color: #FFF; } body.catx-on.cx-has-itemadd #modal-ownerFind .modal_box .customer_info_boxs_R label:hover{ background:#4D8DFF; border-color:#4D8DFF; color: #FFF; } body.catx-on.cx-has-itemadd #modal-ownerFind .modal_box .customer_info_boxs_R label i{ color:#4D8DFF; } body.catx-on.cx-has-itemadd #modal-ownerFind .modal_btn_box .pagination > .active > span:hover{ border-color:#4D8DFF !important; background-color:#4D8DFF !important; color:#FFF !important; } body.catx-on.cx-has-itemadd #modal_building .modal_top_btn>.btn_add_building{ border-color:#4D8DFF; background-color:#4D8DFF; color:#fff; } body.catx-on.cx-has-itemadd #modal_building .modal_top_btn>.btn_add_building:hover{ background-color:#fff; color:#4D8DFF; } body.catx-on.cx-has-itemadd .custom_chk input:checked+label{ border-color:#4D8DFF; background-color:#4D8DFF; } body.catx-on.cx-has-itemadd .address_tr .inputBox2>span{ background:#4D8DFF; color:#fff; } body.catx-on.cx-has-itemadd .address_tr .btn_searchN{ background:#4D8DFF; border-color:#4D8DFF; color:#fff; } body.catx-on.cx-has-itemadd .section_box_wrap .fa-info-circle:hover{ color:#4D8DFF; } body.catx-on.cx-has-itemadd .arch_dong_jibun span.building_pdf_btn{ background:#4D8DFF; color: #fff; border-color:#4D8DFF; } body.catx-on.cx-has-itemadd .arch_dong_jibun span.building_pdf_btn:hover{ background: #FFF !important; color:#4D8DFF !important; } body.catx-on.cx-has-itemadd .arch_dong_jibun span.building_pdf_btn:hover > i{ color:#4D8DFF; } body.catx-on.cx-has-itemadd .arch_dong_jibun span.building_pdf_btn:hover > span{ color:#4D8DFF !important; } /* ── 11. 고객 검색 결과 모달(#modal-ownerFind) — 매물목록 고객 검색 모달과 같은 스타일로 ── * 카드형 테두리 대신 '평평한 목록 + 얇은 구분선', 알약형 버튼/페이지네이션. * 위 자동 생성 블록보다 뒤에 두고 동일 접두(:has)를 써서 특이도·순서를 함께 맞춘다. * 구조·스크립트 불변(행은 JS 가 만드는 .modal_box). */ body.catx-on.cx-has-itemadd #modal-ownerFind .modal-dialog{ width:min(560px, calc(100% - 32px)); border:0 !important; box-shadow:none !important; background:transparent !important; } body.catx-on.cx-has-itemadd #modal-ownerFind .modal_wrap_ver1{ background:#FFFFFF; border:1px solid #E6EAF0; border-radius:16px; /* 시안 기준 (15~20px 대) */ box-shadow:0 12px 32px rgba(30,45,70,.16); overflow:hidden; } /* 헤더: 흰 배경 + 얇은 구분선, 제목 좌측 정렬 */ body.catx-on.cx-has-itemadd #modal-ownerFind .modal_title{ display:flex; align-items:center; justify-content:flex-start; gap:10px; padding:18px 22px; background:#FFFFFF; border-bottom:1px solid #EEF1F5; } body.catx-on.cx-has-itemadd #modal-ownerFind .modal_title h4{ margin:0; flex:1 1 auto; text-align:left; font-size:17px; font-weight:700; color:#172B4D; } body.catx-on.cx-has-itemadd #modal-ownerFind .modal_title .add_new_customer{ flex:0 0 auto; height:30px; padding:0 12px; display:inline-flex; align-items:center; gap:5px; border-radius:8px; border:1px solid #D5DCE5; background:#FFFFFF; color:#1F2937; font-size:var(--dash-font-12_5, 12.5px); font-weight:600; line-height:1; } body.catx-on.cx-has-itemadd #modal-ownerFind .modal_title .add_new_customer:hover{ border-color:#4D8DFF; color:#4D8DFF; background:rgba(77,141,255,.08); } body.catx-on.cx-has-itemadd #modal-ownerFind .modal_title .close{ flex:0 0 auto; width:28px; height:28px; padding:0; border:0; background:none; display:flex; align-items:center; justify-content:center; color:#64748B; opacity:1; } body.catx-on.cx-has-itemadd #modal-ownerFind .modal_title .close:hover{ color:#1F2937; } /* 본문: 카드 테두리 제거 → 구분선만 있는 평평한 목록 */ body.catx-on.cx-has-itemadd #modal-ownerFind .modal_content{ padding:2px 22px; background:#FFFFFF; } body.catx-on.cx-has-itemadd #modal-ownerFind .modal_content .modal_box{ border:0; border-bottom:1px solid #EEF1F5; border-radius:0; background:transparent; margin:0; padding:13px 0; box-shadow:none; } body.catx-on.cx-has-itemadd #modal-ownerFind .modal_content .modal_box:last-child{ border-bottom:0; } body.catx-on.cx-has-itemadd #modal-ownerFind .modal_content .modal_box:hover{ border-color:#EEF1F5; background:rgba(77,141,255,.04); } body.catx-on.cx-has-itemadd #modal-ownerFind .modal_content .bold_span{ color:#1F2937; font-weight:700; } body.catx-on.cx-has-itemadd #modal-ownerFind .modal_content .customer_info_boxs_btm{ color:#64748B; } /* 선택 버튼: 알약형 아웃라인 */ body.catx-on.cx-has-itemadd #modal-ownerFind .modal_box .customer_info_boxs_R label, body.catx-on.cx-has-itemadd #modal-ownerFind .customer_info_boxs_R.radio .btn{ border:1px solid #D5DCE5; border-radius:8px; background:#FFFFFF; color:#1F2937; } body.catx-on.cx-has-itemadd #modal-ownerFind .modal_box:hover .customer_info_boxs_R label, body.catx-on.cx-has-itemadd #modal-ownerFind .modal_box .customer_info_boxs_R label:hover, body.catx-on.cx-has-itemadd #modal-ownerFind .customer_info_boxs_R.radio .btn:hover{ border-color:#4D8DFF; background:rgba(77,141,255,.08); color:#4D8DFF; } body.catx-on.cx-has-itemadd #modal-ownerFind .modal_box .customer_info_boxs_R label i{ color:#4D8DFF; } /* 푸터: 알약형 페이지네이션, 활성 = 채운 파랑 */ body.catx-on.cx-has-itemadd #modal-ownerFind .modal_btn_box{ padding:12px 16px; background:#FFFFFF; border-top:1px solid #EEF1F5; } body.catx-on.cx-has-itemadd #modal-ownerFind .pagination{ margin:0; } body.catx-on.cx-has-itemadd #modal-ownerFind .pagination > li > a, body.catx-on.cx-has-itemadd #modal-ownerFind .pagination > li > span{ margin:0 2px; border:1px solid #E6EAF0; border-radius:8px; color:#64748B; background:#FFFFFF; } /* 크기는 원본 유지, 색/라운드만 */ body.catx-on.cx-has-itemadd #modal-ownerFind .pagination > li > a:hover{ border-color:#4D8DFF; color:#4D8DFF; background:rgba(77,141,255,.08); } body.catx-on.cx-has-itemadd #modal-ownerFind .pagination > .active > a, body.catx-on.cx-has-itemadd #modal-ownerFind .pagination > .active > span, body.catx-on.cx-has-itemadd #modal-ownerFind .modal_btn_box .pagination > .active > span:hover{ background:#4D8DFF; border-color:#4D8DFF; color:#FFFFFF; } /* 결과 행 세로 중앙 정렬. * 구조 확인: .modal_box > [ .customer_info_boxs_wrap , .customer_info_boxs_R.radio ] — 선택 버튼은 * wrap 의 '형제'다(wrap 안이 아님). 그래서 wrap 에 flex 를 걸면 버튼이 flex 항목이 아니어서 * float 만 잃고 아래로 떨어진다 → 부모인 .modal_box 를 flex 로 만든다. * float 는 flex 항목에서 자동 무시되므로 따로 해제하지 않는다(순서·크기 불변). */ body.catx-on.cx-has-itemadd #modal-ownerFind .modal_content .modal_box{ display:flex; align-items:center; gap:12px; } body.catx-on.cx-has-itemadd #modal-ownerFind .modal_content .modal_box > .customer_info_boxs_wrap{ flex:1 1 auto; min-width:0; } body.catx-on.cx-has-itemadd #modal-ownerFind .modal_content .modal_box > .customer_info_boxs_R{ flex:0 0 auto; } /* 매물 등록폼의 기본 설정 모달 네 곳: 기존 크기와 배치는 유지한다. */ body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal, #modal_building) .modal-dialog{ border:0 !important; box-shadow:none !important; background:transparent !important; } body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal, #modal_building) .modal_wrap_ver1{ background:var(--cx-panel) !important; border:1px solid var(--cx-line) !important; border-radius:12px !important; box-shadow:0 18px 48px rgba(14,32,55,.22) !important; } body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal, #modal_building) .modal_title{ background:var(--cx-panel) !important; border-bottom:1px solid var(--cx-line-soft) !important; border-radius:11px 11px 0 0 !important; } body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal, #modal_building) .modal_title h4{ color:var(--cx-strong) !important; font-size:16px !important; font-weight:700 !important; } body.catx-on.cx-has-formitem #location_setting_modal .modal_title h4{ width:max-content; max-width:calc(100% - 72px); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } @media (max-width:380px){ body.catx-on.cx-has-formitem #location_setting_modal .modal_title h4{ font-size:14px !important; } } body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal, #modal_building) .modal_title .close, body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal, #modal_building) .modal_title .close i{ color:var(--cx-body) !important; opacity:1 !important; } body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal, #modal_building) .modal_title .close:hover, body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal, #modal_building) .modal_title .close:hover i{ color:var(--cx-accent) !important; } body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal, #modal_building) .modal_content{ background:var(--cx-panel) !important; color:var(--cx-text) !important; } body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal) .modal_content .ex_box{ background:color-mix(in oklab, var(--cx-red) 8%, var(--cx-panel)) !important; border:1px solid color-mix(in oklab, var(--cx-red) 42%, var(--cx-line)) !important; border-radius:8px !important; } body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal) .modal_content .ex_box li, body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal) .modal_content .ex_box li span{ color:var(--cx-red) !important; line-height:1.45 !important; } body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal) .modal_btn_box{ background:var(--cx-panel) !important; border-top:1px solid var(--cx-line-soft) !important; } body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal) .modal_btn_box .btn{ border-radius:7px !important; font-weight:600 !important; } body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal) .modal_btn_box .btn:not(.btn_close){ background:var(--cx-accent) !important; border-color:var(--cx-accent) !important; color:#fff !important; } body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal) .modal_btn_box .btn_close{ background:var(--cx-row) !important; border-color:var(--cx-line) !important; color:var(--cx-body) !important; } body.catx-on.cx-has-formitem #location_setting_modal .location_selet_box select{ background-color:var(--cx-panel) !important; border-color:var(--cx-line) !important; border-radius:7px !important; color:var(--cx-text) !important; } body.catx-on.cx-has-formitem #location_setting_modal .location_selet_box select:focus{ border-color:var(--cx-accent) !important; box-shadow:0 0 0 3px color-mix(in oklab, var(--cx-accent) 18%, transparent) !important; } body.catx-on.cx-has-formitem #price_setting_modal .price_table_head{ background:var(--cx-row) !important; border-bottom-color:var(--cx-line) !important; color:var(--cx-strong) !important; } body.catx-on.cx-has-formitem #price_setting_modal .price_table_body .dd-item:not(:last-child){ border-bottom-color:var(--cx-line-soft) !important; } body.catx-on.cx-has-formitem #price_setting_modal .price_table_body .dd-item .dd-content, body.catx-on.cx-has-formitem #price_setting_modal .price_table_body .dd-item .dd-handle{ background:var(--cx-panel) !important; color:var(--cx-text) !important; } body.catx-on.cx-has-formitem #price_setting_modal .price_table_body .dd-item .move_btn > span{ background:var(--cx-row) !important; border-color:var(--cx-line) !important; color:var(--cx-body) !important; } body.catx-on.cx-has-formitem #price_setting_modal .price_table_body .dd-item .move_btn > span:hover{ border-color:var(--cx-accent) !important; color:var(--cx-accent) !important; } body.catx-on.cx-has-formitem #customer_setting_modal .customer_select_box{ border-color:var(--cx-accent) !important; border-radius:7px !important; background:var(--cx-panel) !important; } body.catx-on.cx-has-formitem #customer_setting_modal .customer_select_box > label{ background:var(--cx-panel) !important; } body.catx-on.cx-has-formitem #customer_setting_modal .customer_select_box > label input + span{ color:var(--cx-accent) !important; } body.catx-on.cx-has-formitem #customer_setting_modal .customer_select_box > label input:checked + span{ background:var(--cx-accent) !important; color:#fff !important; } body.catx-on.cx-has-formitem #modal_building .modal_top_btn > span{ border-radius:7px !important; font-weight:600 !important; } body.catx-on.cx-has-formitem #modal_building .modal_top_btn > .btn_add_building{ background:var(--cx-accent) !important; border-color:var(--cx-accent) !important; color:#fff !important; } body.catx-on.cx-has-formitem #modal_building .modal_top_btn > .btn_all_off{ background:var(--cx-panel) !important; border-color:var(--cx-red) !important; color:var(--cx-red) !important; } body.catx-on.cx-has-formitem #modal_building .modal_top_txt{ color:var(--cx-red) !important; } body.catx-on.cx-has-formitem #modal_building table th{ background:var(--cx-row) !important; color:var(--cx-strong) !important; border-bottom:1px solid var(--cx-line) !important; } body.catx-on.cx-has-formitem #modal_building table td{ color:var(--cx-text) !important; } body.catx-on.cx-has-formitem #modal_building table tbody > tr{ border-bottom-color:var(--cx-line-soft) !important; } body.catx-on.cx-has-formitem #modal_building table tbody > tr:hover{ background:var(--cx-hover-bg) !important; } /* 네 모달의 조작 상태. 테두리와 색만 바꾸고 버튼·입력칸의 크기는 유지한다. */ body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal) .modal_btn_box{ border-radius:0 0 11px 11px !important; } body.catx-on.cx-has-formitem #modal_building .modal_content{ border-radius:0 0 11px 11px !important; } body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal) .modal_btn_box .btn, body.catx-on.cx-has-formitem #modal_building .modal_top_btn > span{ transition:background-color .16s ease, border-color .16s ease, color .16s ease, box-shadow .16s ease, filter .16s ease !important; } body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal) .modal_btn_box .btn:not(.btn_close):hover, body.catx-on.cx-has-formitem #modal_building .modal_top_btn > .btn_add_building:hover{ background:color-mix(in oklab, var(--cx-accent) 85%, #15233b) !important; border-color:color-mix(in oklab, var(--cx-accent) 85%, #15233b) !important; color:#fff !important; } body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal) .modal_btn_box .btn_close:hover{ background:var(--cx-hover-bg) !important; border-color:var(--cx-accent) !important; color:var(--cx-accent) !important; } body.catx-on.cx-has-formitem #modal_building .modal_top_btn > .btn_all_off:hover{ background:color-mix(in oklab, var(--cx-red) 11%, var(--cx-panel)) !important; border-color:var(--cx-red) !important; } body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal, #modal_building) .modal_title .close:hover{ background:var(--cx-row) !important; border-radius:6px !important; } body.catx-on.cx-has-formitem :is(#location_setting_modal, #price_setting_modal, #customer_setting_modal) .modal_btn_box .btn:focus-visible, body.catx-on.cx-has-formitem #modal_building .modal_top_btn > span:focus-visible{ outline:2px solid var(--cx-accent) !important; outline-offset:2px !important; } body.catx-on.cx-has-formitem #location_setting_modal .location_selet_box .select_box select, body.catx-on.cx-has-formitem #modal_building table :is(select, .dropdown-toggle){ transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease !important; } body.catx-on.cx-has-formitem #location_setting_modal .location_selet_box .select_box select:hover, body.catx-on.cx-has-formitem #modal_building table :is(select, .dropdown-toggle):hover{ border-color:var(--cx-accent) !important; background-color:var(--cx-row) !important; } body.catx-on.cx-has-formitem #location_setting_modal .location_selet_box .select_box:focus-within select, body.catx-on.cx-has-formitem #modal_building table :is(select, .dropdown-toggle):focus, body.catx-on.cx-has-formitem #modal_building table .bootstrap-select.open > .dropdown-toggle{ outline:0 !important; border-color:var(--cx-accent) !important; box-shadow:0 0 0 3px color-mix(in oklab, var(--cx-accent) 22%, transparent) !important; } /* 공통 Nestable의 장식 화살표가 실제 위·아래 순서 버튼 위에 중복으로 그려지는 것만 막는다. */ html body.catx-on.cx-has-formitem #price_setting_modal .price_table_body .dd-item > .dd3-handle::before, html body.catx-on.cx-has-formitem #price_setting_modal .price_table_body .dd-item > .dd3-handle::after{ content:none !important; display:none !important; background:none !important; } body.catx-on.cx-has-formitem #price_setting_modal .price_table_body .dd-item .move_btn > span:hover{ background:var(--cx-hover-bg) !important; border-color:var(--cx-accent) !important; color:var(--cx-accent) !important; } body.catx-on.cx-has-formitem #customer_setting_modal .customer_select_box > label:hover input:not(:checked) + span{ background:var(--cx-hover-bg) !important; } body.catx-on.cx-has-formitem #customer_setting_modal .customer_select_box > label:hover input:checked + span{ background:color-mix(in oklab, var(--cx-accent) 85%, #15233b) !important; } body.catx-on.cx-has-formitem #modal_building table :is(.building_btn, .building_btn2).on:hover{ background:var(--cx-accent) !important; border-color:var(--cx-accent) !important; color:#fff !important; } /* 방향 기본 등록 모달: 다른 catx 설정 모달과 같은 표면·조작 상태를 적용한다. */ body.catx-on.cx-has-formitem #direction_setting_modal .modal-dialog{ border:0 !important; box-shadow:none !important; background:transparent !important; } body.catx-on.cx-has-formitem #direction_setting_modal .modal_wrap_ver1{ background:var(--cx-panel) !important; border:1px solid var(--cx-line) !important; border-radius:12px !important; box-shadow:0 18px 48px rgba(14,32,55,.22) !important; } body.catx-on.cx-has-formitem #direction_setting_modal .modal_title{ background:var(--cx-panel) !important; border-bottom:1px solid var(--cx-line-soft) !important; border-radius:11px 11px 0 0 !important; } body.catx-on.cx-has-formitem #direction_setting_modal .modal_title h4{ color:var(--cx-strong) !important; font-size:16px !important; font-weight:700 !important; } body.catx-on.cx-has-formitem #direction_setting_modal .modal_title .close, body.catx-on.cx-has-formitem #direction_setting_modal .modal_title .close i{ color:var(--cx-body) !important; opacity:1 !important; } body.catx-on.cx-has-formitem #direction_setting_modal .modal_title .close:hover{ background:var(--cx-row) !important; border-radius:6px !important; } body.catx-on.cx-has-formitem #direction_setting_modal .modal_title .close:hover, body.catx-on.cx-has-formitem #direction_setting_modal .modal_title .close:hover i{ color:var(--cx-accent) !important; } body.catx-on.cx-has-formitem #direction_setting_modal .modal_content{ background:var(--cx-panel) !important; color:var(--cx-text) !important; } body.catx-on.cx-has-formitem #direction_setting_modal .modal_content .ex_box{ background:color-mix(in oklab, var(--cx-red) 8%, var(--cx-panel)) !important; border:1px solid color-mix(in oklab, var(--cx-red) 42%, var(--cx-line)) !important; border-radius:8px !important; } body.catx-on.cx-has-formitem #direction_setting_modal .modal_content .ex_box li, body.catx-on.cx-has-formitem #direction_setting_modal .modal_content .ex_box li span{ color:var(--cx-red) !important; line-height:1.45 !important; } body.catx-on.cx-has-formitem #direction_setting_modal .direction_box .select_box select{ background-color:var(--cx-panel) !important; border-color:var(--cx-line) !important; border-radius:7px !important; color:var(--cx-text) !important; transition:border-color .16s ease, box-shadow .16s ease, background-color .16s ease !important; } body.catx-on.cx-has-formitem #direction_setting_modal .direction_box .select_box select:hover{ border-color:var(--cx-accent) !important; background-color:var(--cx-row) !important; } body.catx-on.cx-has-formitem #direction_setting_modal .direction_box .select_box:focus-within select{ outline:0 !important; border-color:var(--cx-accent) !important; box-shadow:0 0 0 3px color-mix(in oklab, var(--cx-accent) 22%, transparent) !important; } body.catx-on.cx-has-formitem #direction_setting_modal .modal_btn_box{ background:var(--cx-panel) !important; border-top:1px solid var(--cx-line-soft) !important; border-radius:0 0 11px 11px !important; } body.catx-on.cx-has-formitem #direction_setting_modal .modal_btn_box .btn{ border-radius:7px !important; font-weight:600 !important; transition:background-color .16s ease, border-color .16s ease, color .16s ease !important; } body.catx-on.cx-has-formitem #direction_setting_modal .modal_btn_box .btn:not(.btn_close){ background:var(--cx-accent) !important; border-color:var(--cx-accent) !important; color:#fff !important; } body.catx-on.cx-has-formitem #direction_setting_modal .modal_btn_box .btn:not(.btn_close):hover{ background:color-mix(in oklab, var(--cx-accent) 85%, #15233b) !important; border-color:color-mix(in oklab, var(--cx-accent) 85%, #15233b) !important; } body.catx-on.cx-has-formitem #direction_setting_modal .modal_btn_box .btn_close{ background:var(--cx-row) !important; border-color:var(--cx-line) !important; color:var(--cx-body) !important; } body.catx-on.cx-has-formitem #direction_setting_modal .modal_btn_box .btn_close:hover{ background:var(--cx-hover-bg) !important; border-color:var(--cx-accent) !important; color:var(--cx-accent) !important; } body.catx-on.cx-has-formitem #direction_setting_modal .modal_btn_box .btn:focus-visible{ outline:2px solid var(--cx-accent) !important; outline-offset:2px !important; } /* 표제부 분석 모달의 네 상태는 동일한 catx 색과 테두리를 사용한다. */ body.catx-on.cx-has-formitem #modal-building-pdf-upload .modal-dialog{ border:0 !important; box-shadow:none !important; background:transparent !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .building_pdf_upload_modal{ background:var(--cx-panel) !important; border:1px solid var(--cx-line) !important; border-radius:12px !important; box-shadow:0 18px 48px rgba(14,32,55,.22) !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .modal_header{ background:var(--cx-panel) !important; border-bottom-color:var(--cx-line-soft) !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .modal_header .title{ color:var(--cx-strong) !important; font-size:16px !important; font-weight:700 !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .modal_header .close, body.catx-on.cx-has-formitem #modal-building-pdf-upload .modal_header .close i{ color:var(--cx-body) !important; opacity:1 !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .modal_header .close{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:transparent !important; border-radius:8px !important; transition:background-color .15s ease, color .15s ease; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .modal_header .close:hover, body.catx-on.cx-has-formitem #modal-building-pdf-upload .modal_header .close:focus-visible{ background:color-mix(in oklab, var(--cx-red) 12%, var(--cx-panel)) !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .modal_header .close:focus-visible{ outline:2px solid var(--cx-red); outline-offset:1px; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .modal_header .close:is(:hover, :focus-visible), body.catx-on.cx-has-formitem #modal-building-pdf-upload .modal_header .close:is(:hover, :focus-visible) i{ color:var(--cx-red) !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .modal_body{ background:var(--cx-panel) !important; color:var(--cx-text) !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .building_pdf_notice{ background:color-mix(in oklab, var(--cx-red) 8%, var(--cx-panel)) !important; border:1px solid color-mix(in oklab, var(--cx-red) 28%, var(--cx-line)) !important; border-radius:8px !important; color:var(--cx-body) !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .building_pdf_notice p, body.catx-on.cx-has-formitem #modal-building-pdf-upload .building_pdf_notice i{ color:var(--cx-red) !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .building_pdf_file_row .building_pdf_name{ background:var(--cx-panel) !important; border-color:var(--cx-line) !important; color:var(--cx-body) !important; border-radius:7px 0 0 7px !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload :is(.building_pdf_file_row .building_pdf_file_btn, .btn_building_pdf_upload){ background:var(--cx-accent) !important; border-color:var(--cx-accent) !important; color:#fff !important; font-weight:600 !important; transition:background-color .16s ease, border-color .16s ease, color .16s ease !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .building_pdf_file_row .building_pdf_file_btn{ border-radius:0 7px 7px 0 !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .btn_building_pdf_upload{ border-radius:7px !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload :is(.building_pdf_file_row .building_pdf_file_btn, .btn_building_pdf_upload):hover{ background:color-mix(in oklab, var(--cx-accent) 85%, #15233b) !important; border-color:color-mix(in oklab, var(--cx-accent) 85%, #15233b) !important; color:#fff !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload :is(.building_pdf_file_row .building_pdf_file_btn, .btn_building_pdf_upload, .btn_close_pdf, .btn_retry_pdf):focus-visible{ outline:2px solid var(--cx-accent) !important; outline-offset:2px !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .building_pdf_spinner{ border-color:color-mix(in oklab, var(--cx-accent) 15%, var(--cx-panel)) !important; border-top-color:var(--cx-accent) !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload h4{ color:var(--cx-accent) !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .state_fail h4{ color:var(--cx-red) !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .building_pdf_icon.pink{ background:var(--cx-red) !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .btn_close_pdf{ background:var(--cx-row) !important; border-color:var(--cx-line) !important; border-radius:7px !important; color:var(--cx-body) !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .btn_close_pdf:hover{ background:var(--cx-hover-bg) !important; border-color:var(--cx-accent) !important; color:var(--cx-accent) !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .btn_retry_pdf{ background:var(--cx-red) !important; border-color:var(--cx-red) !important; border-radius:7px !important; color:#fff !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .btn_retry_pdf:hover{ filter:brightness(.9) !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload :is(.btn_close_pdf, .btn_retry_pdf){ transition:background-color .16s ease, border-color .16s ease, color .16s ease, filter .16s ease !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .arch_result_form :is(.title, .arch_parking_label){ color:var(--cx-strong) !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload :is(.arch_result_grid, .state_success .arch_result_col){ border-bottom-color:var(--cx-line-soft) !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .arch_result_form input[type="text"]{ background:var(--cx-panel) !important; border-color:var(--cx-line) !important; color:var(--cx-text) !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .arch_result_form input[type="text"]:focus{ outline:0 !important; border-color:var(--cx-accent) !important; box-shadow:0 0 0 3px color-mix(in oklab, var(--cx-accent) 18%, transparent) !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload :is(.input_unit span, .input_unit_2 span, .arch_parking_input span){ background:var(--cx-row) !important; border-color:var(--cx-line) !important; color:var(--cx-body) !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .arch_floor_box :is(th, td){ border-color:var(--cx-line) !important; color:var(--cx-text) !important; } body.catx-on.cx-has-formitem #modal-building-pdf-upload .arch_floor_box th{ background:var(--cx-row) !important; color:var(--cx-strong) !important; } /* 건축물대장 발급: 선택 화면과 발급 진행 화면의 외형만 catx 매물등록폼에 적용한다. */ body.catx-on.cx-has-formitem #modal-building-search .modal-dialog{ border:0 !important; background:transparent !important; box-shadow:none !important; } body.catx-on.cx-has-formitem #modal-building-search .modal_wrap_ver1{ background:var(--cx-panel) !important; border:1px solid var(--cx-line) !important; border-radius:12px !important; box-shadow:0 18px 48px rgba(14,32,55,.22) !important; overflow:hidden; } body.catx-on.cx-has-formitem #modal-building-search .modal_title{ background:var(--cx-panel) !important; border-bottom:1px solid var(--cx-line-soft) !important; border-radius:11px 11px 0 0 !important; } body.catx-on.cx-has-formitem #modal-building-search .modal_title h4{ color:var(--cx-strong) !important; font-size:16px !important; font-weight:700 !important; } body.catx-on.cx-has-formitem #modal-building-search .modal_title .close{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:transparent !important; color:var(--cx-body) !important; border-radius:8px !important; opacity:1 !important; transition:background-color .16s ease, color .16s ease; } body.catx-on.cx-has-formitem #modal-building-search .modal_title .close i{ color:inherit !important; } body.catx-on.cx-has-formitem #modal-building-search .modal_title .close:hover, body.catx-on.cx-has-formitem #modal-building-search .modal_title .close:focus-visible{ background:color-mix(in oklab, var(--cx-red) 12%, var(--cx-panel)) !important; color:var(--cx-red) !important; } body.catx-on.cx-has-formitem #modal-building-search .modal_title .close:focus-visible{ outline:2px solid var(--cx-red); outline-offset:1px; } body.catx-on.cx-has-formitem #modal-building-search .modal_title .btn_go_url{ background:var(--cx-row) !important; border-color:var(--cx-line) !important; color:var(--cx-body) !important; border-radius:6px !important; transition:background-color .16s ease, border-color .16s ease, color .16s ease; } body.catx-on.cx-has-formitem #modal-building-search .modal_title .btn_go_url:hover{ background:var(--cx-hover-bg) !important; border-color:var(--cx-accent) !important; color:var(--cx-accent) !important; } body.catx-on.cx-has-formitem #modal-building-search .select_b_info{ background:var(--cx-row) !important; border-bottom:1px solid var(--cx-line-soft) !important; color:var(--cx-strong) !important; } body.catx-on.cx-has-formitem #modal-building-search .select_b_info .addr i{ color:var(--cx-accent) !important; } body.catx-on.cx-has-formitem #modal-building-search .b_select_reset{ background:var(--cx-panel) !important; border-color:var(--cx-line) !important; color:var(--cx-body) !important; border-radius:6px !important; } body.catx-on.cx-has-formitem #modal-building-search .b_select_reset:hover{ border-color:var(--cx-accent) !important; color:var(--cx-accent) !important; } body.catx-on.cx-has-formitem #modal-building-search .modal_content{ background:var(--cx-panel) !important; color:var(--cx-text) !important; } body.catx-on.cx-has-formitem #modal-building-search .select_b_list .b_info{ background:var(--cx-panel) !important; border-color:var(--cx-line) !important; border-radius:8px !important; color:var(--cx-strong) !important; } body.catx-on.cx-has-formitem #modal-building-search .select_b_list .b_info.dropdown > .drop-toggle{ display:flex !important; align-items:center; gap:6px; width:100%; min-width:0; } body.catx-on.cx-has-formitem #modal-building-search .select_b_list .b_info .drop-toggle .tt{ order:1; min-width:0; margin-left:0 !important; } body.catx-on.cx-has-formitem #modal-building-search .select_b_list .b_info .drop-toggle .badge{ order:2; flex:0 0 auto; } body.catx-on.cx-has-formitem #modal-building-search .select_b_list .b_info .drop-toggle .arrow{ position:static !important; order:3; display:inline-flex; align-items:center; justify-content:center; flex:0 0 20px; width:20px !important; height:20px !important; margin:0 0 0 auto !important; padding:0 !important; border:0 !important; color:var(--cx-body) !important; } body.catx-on.cx-has-formitem #modal-building-search .select_b_list .b_info .drop-toggle .arrow i{ margin:0 !important; } body.catx-on.cx-has-formitem #modal-building-search .select_b_list .b_info.dropdown li{ border-bottom-color:var(--cx-line-soft) !important; color:var(--cx-text) !important; } body.catx-on.cx-has-formitem #modal-building-search .select_b_list .b_info.dropdown li:hover{ background:var(--cx-row) !important; } body.catx-on.cx-has-formitem #modal-building-search .select_b_list .b_info .badge{ background:var(--cx-row) !important; border-color:var(--cx-line) !important; color:var(--cx-accent) !important; border-radius:6px !important; } body.catx-on.cx-has-formitem #modal-building-search input[type="checkbox"]{ accent-color:var(--cx-accent); } body.catx-on.cx-has-formitem #modal-building-search .modal_btn_box{ background:var(--cx-panel) !important; border-top:1px solid var(--cx-line-soft) !important; border-radius:0 0 11px 11px !important; } body.catx-on.cx-has-formitem #modal-building-search .btn_b_submit{ background:var(--cx-accent) !important; border-color:var(--cx-accent) !important; color:#fff !important; border-radius:7px !important; font-weight:600 !important; transition:background-color .16s ease, border-color .16s ease; } body.catx-on.cx-has-formitem #modal-building-search .btn_b_submit:hover{ background:color-mix(in oklab, var(--cx-accent) 85%, #15233b) !important; border-color:color-mix(in oklab, var(--cx-accent) 85%, #15233b) !important; } body.catx-on.cx-has-formitem #modal-building-search .btn_b_submit:focus-visible, body.catx-on.cx-has-formitem #modal-building-search .select_b_list input[type="checkbox"]:focus-visible{ outline:2px solid var(--cx-accent); outline-offset:2px; } body.catx-on.cx-has-formitem #modal-building-search #buildingSearchLoading .load_box.ing .icon_box{ --track:color-mix(in oklab, var(--cx-accent) 14%, var(--cx-panel)); --bar:var(--cx-accent); color:var(--cx-accent) !important; } body.catx-on.cx-has-formitem #modal-building-search #buildingSearchLoading .load_box.ing .icon_box::after{ background:var(--cx-panel) !important; } body.catx-on.cx-has-formitem #modal-building-search #buildingSearchLoading .arch_issued_last_txt1{ color:var(--cx-strong) !important; } body.catx-on.cx-has-formitem #modal-building-search #buildingSearchLoading :is(.arch_issued_last_txt2, .arch_issued_last_txt3){ color:var(--cx-body) !important; } body.catx-on.cx-has-formitem #modal-building-search #buildingSearchLoading .load_box.done{ max-width:100%; padding:16px 18px; background:var(--cx-row) !important; border:1px solid var(--cx-line-soft) !important; border-radius:10px !important; } body.catx-on.cx-has-formitem #modal-building-search #buildingSearchLoading .load_box.done .icon_box{ background:var(--cx-accent) !important; box-shadow:0 8px 20px color-mix(in oklab, var(--cx-accent) 25%, transparent) !important; transition:filter .16s ease, transform .16s ease; } body.catx-on.cx-has-formitem #modal-building-search #buildingSearchLoading .load_box.done .icon_box:hover{ filter:brightness(.9); transform:translateY(-2px); } body.catx-on.cx-has-formitem #modal-building-search #buildingSearchLoading .load_box.done .arch_issued_last_txt1{ color:var(--cx-strong) !important; font-size:16px !important; font-weight:700 !important; } body.catx-on.cx-has-formitem #modal-building-search #buildingSearchLoading .load_box.done .arch_issued_last_txt2{ color:var(--cx-body) !important; font-size:13px !important; line-height:1.5 !important; } body.catx-on.cx-has-formitem #modal-building-search .arch_issued_pyoje_analyze_box :is(.btn_pyoje_download, .btn_pyoje_analyze){ border-radius:7px !important; font-weight:600 !important; transition:background-color .16s ease, border-color .16s ease, color .16s ease !important; } body.catx-on.cx-has-formitem #modal-building-search .arch_issued_pyoje_analyze_box .btn_pyoje_download{ background:var(--cx-panel) !important; border-color:var(--cx-line) !important; color:var(--cx-body) !important; } body.catx-on.cx-has-formitem #modal-building-search .arch_issued_pyoje_analyze_box .btn_pyoje_download:hover{ background:var(--cx-hover-bg) !important; border-color:var(--cx-accent) !important; color:var(--cx-accent) !important; } body.catx-on.cx-has-formitem #modal-building-search .arch_issued_pyoje_analyze_box .btn_pyoje_analyze{ background:var(--cx-accent) !important; border-color:var(--cx-accent) !important; color:#fff !important; } body.catx-on.cx-has-formitem #modal-building-search .arch_issued_pyoje_analyze_box .btn_pyoje_analyze:hover{ background:color-mix(in oklab, var(--cx-accent) 85%, #15233b) !important; border-color:color-mix(in oklab, var(--cx-accent) 85%, #15233b) !important; } body.catx-on.cx-has-formitem #modal-building-search .arch_issued_pyoje_analyze_box :is(.btn_pyoje_download, .btn_pyoje_analyze):focus-visible{ outline:2px solid var(--cx-accent); outline-offset:2px; } /* catx 매물등록폼: 등기부등본 검색, 확인, 진행, 완료 및 오류 모달 */ body.catx-on.cx-has-formitem #modal-dnggi_issued_func .modal_wrap_ver1{ background:var(--cx-panel) !important; border:1px solid var(--cx-line) !important; border-radius:12px !important; overflow:hidden; box-shadow:0 18px 48px rgba(14,32,55,.22) !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func .modal_title{ background:var(--cx-panel) !important; border-bottom:1px solid var(--cx-line-soft) !important; border-radius:11px 11px 0 0 !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func .modal_title h4{ color:var(--cx-strong) !important; font-size:16px !important; font-weight:700 !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func .modal_title .close{ width:32px; height:32px; display:flex; align-items:center; justify-content:center; background:transparent !important; color:var(--cx-body) !important; border-radius:8px !important; opacity:1 !important; transition:background-color .16s ease, color .16s ease; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func .modal_title .close i{color:inherit !important;} body.catx-on.cx-has-formitem #modal-dnggi_issued_func .modal_title .close:hover, body.catx-on.cx-has-formitem #modal-dnggi_issued_func .modal_title .close:focus-visible{ background:color-mix(in oklab, var(--cx-red) 12%, var(--cx-panel)) !important; color:var(--cx-red) !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func .btn_go_url{ background:var(--cx-row) !important; border-color:var(--cx-line) !important; color:var(--cx-body) !important; border-radius:6px !important; transition:background-color .16s ease, border-color .16s ease, color .16s ease; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func .btn_go_url:hover{ background:var(--cx-hover-bg) !important; border-color:var(--cx-accent) !important; color:var(--cx-accent) !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func .modal_content{ background:var(--cx-panel) !important; color:var(--cx-text) !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func .select_d_info{ background:var(--cx-row) !important; color:var(--cx-strong) !important; border-bottom:1px solid var(--cx-line-soft) !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func .select_d_info .addr i{color:var(--cx-accent) !important;} body.catx-on.cx-has-formitem #modal-dnggi_issued_func .b_select_reset{ background:var(--cx-panel) !important; border-color:var(--cx-line) !important; color:var(--cx-body) !important; border-radius:6px !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func .b_select_reset:hover{ border-color:var(--cx-accent) !important; color:var(--cx-accent) !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func :is(#dnggiSearchBox, #dnggiNumSearchBox) select, body.catx-on.cx-has-formitem #modal-dnggi_issued_func :is(#dnggiSearchBox, #dnggiNumSearchBox) .input_span input, body.catx-on.cx-has-formitem #modal-dnggi_issued_func #dnggiAccountForm input.form-control, body.catx-on.cx-has-formitem #modal-dnggi_issued_func .select_b_write :is(select, input.form-control){ background:var(--cx-panel) !important; border:1px solid var(--cx-line) !important; color:var(--cx-text) !important; border-radius:6px !important; transition:border-color .16s ease, box-shadow .16s ease; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func :is(#dnggiSearchBox, #dnggiNumSearchBox, #dnggiAccountForm, .select_b_write) :is(select, input:not([type="radio"]):not([type="checkbox"])):focus-visible{ border-color:var(--cx-accent) !important; box-shadow:0 0 0 3px color-mix(in oklab, var(--cx-accent) 16%, transparent) !important; outline:0 !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func :is(#dnggiSearchBox, #dnggiNumSearchBox) .input_span .btn{ background:var(--cx-accent) !important; border-color:var(--cx-accent) !important; color:#fff !important; border-radius:0 6px 6px 0 !important; transition:filter .16s ease; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func :is(#dnggiSearchBox, #dnggiNumSearchBox) .input_span .btn:hover{filter:brightness(.88);} body.catx-on.cx-has-formitem #modal-dnggi_issued_func .dnggi_ex{ background:var(--cx-row) !important; border:1px solid var(--cx-line-soft) !important; border-radius:8px !important; color:var(--cx-body) !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func .dnggi_ex .ex_tt span{color:var(--cx-accent) !important;} body.catx-on.cx-has-formitem #modal-dnggi_issued_func input:is([type="radio"], [type="checkbox"]){accent-color:var(--cx-accent);} body.catx-on.cx-has-formitem #modal-dnggi_issued_func .modal_box{ background:var(--cx-row) !important; border-color:var(--cx-line) !important; color:var(--cx-text) !important; border-radius:8px !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func .modal_box:hover{ background:var(--cx-hover-bg) !important; border-color:var(--cx-accent) !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func .modal_box .customer_info_boxs_L{color:var(--cx-text) !important;} body.catx-on.cx-has-formitem #modal-dnggi_issued_func .modal_box .customer_info_boxs_R span{ background:var(--cx-panel) !important; border-color:var(--cx-line) !important; color:var(--cx-body) !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func .modal_box .customer_info_boxs_R span:hover{ background:var(--cx-accent) !important; border-color:var(--cx-accent) !important; color:#fff !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func #dnggiResult th{ background:var(--cx-row) !important; color:var(--cx-strong) !important; border-bottom:1px solid var(--cx-line) !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func #dnggi_search_body td{ border-bottom-color:var(--cx-line-soft) !important; color:var(--cx-text) !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func #dnggi_search_body .b_select_btn{ background:var(--cx-panel) !important; border-color:var(--cx-line) !important; color:var(--cx-body) !important; border-radius:6px !important; transition:background-color .16s ease, border-color .16s ease, color .16s ease; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func #dnggi_search_body .b_select_btn:hover{ background:var(--cx-accent) !important; border-color:var(--cx-accent) !important; color:#fff !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func :is(.select_d_infoAddr, .select_d_infoAddrLast, .select_b_list .dnggi_issued_info){ background:var(--cx-row) !important; border-color:var(--cx-line) !important; border-radius:8px !important; color:var(--cx-text) !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func :is(.select_b_alert, .select_b_issue) .modal_title_hdtt{ color:var(--cx-strong) !important; font-weight:700 !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func :is(.select_b_alert, .select_b_issue) .modal_title_sbtt{color:var(--cx-body) !important; line-height:1.5 !important;} body.catx-on.cx-has-formitem #modal-dnggi_issued_func .modal_btn :is(.go_prev, .go_next), body.catx-on.cx-has-formitem #modal-dnggi_issued_func .btn_b_submit, body.catx-on.cx-has-formitem #modal-dnggi_issued_func #dnggiAccountForm button{ border-radius:7px !important; font-weight:600 !important; transition:filter .16s ease, box-shadow .16s ease !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func .modal_btn .go_prev{ background:var(--cx-row) !important; border-color:var(--cx-line) !important; color:var(--cx-body) !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func .modal_btn .go_next:not(.red), body.catx-on.cx-has-formitem #modal-dnggi_issued_func .btn_b_submit{ background:var(--cx-accent) !important; border-color:var(--cx-accent) !important; color:#fff !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func .modal_btn .go_next.red, body.catx-on.cx-has-formitem #modal-dnggi_issued_func #dnggiAccountForm button{ background:var(--cx-red) !important; border-color:var(--cx-red) !important; color:#fff !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func .modal_btn :is(.go_prev, .go_next):hover, body.catx-on.cx-has-formitem #modal-dnggi_issued_func :is(.btn_b_submit, #dnggiAccountForm button):hover{filter:brightness(.9);} body.catx-on.cx-has-formitem #modal-dnggi_issued_func .modal_btn :is(.go_prev, .go_next):focus-visible, body.catx-on.cx-has-formitem #modal-dnggi_issued_func :is(.btn_b_submit, #dnggiAccountForm button, .modal_title .close):focus-visible{ outline:2px solid var(--cx-accent); outline-offset:2px; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func #dnggiSearchLoading .load_box, body.catx-on.cx-has-formitem #modal-dnggi_issued_func :is(#dnggiSearchAdrWait, #dnggiSearchWait) .load_boxw{ max-width:100%; padding:18px; background:var(--cx-row) !important; border:1px solid var(--cx-line-soft) !important; border-radius:10px !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func #dnggiSearchLoading .load_box.ing .icon_box{ --track:color-mix(in oklab, var(--cx-accent) 14%, var(--cx-panel)); --bar:var(--cx-accent); color:var(--cx-accent) !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func #dnggiSearchLoading .load_box.ing .icon_box::after{background:var(--cx-row) !important;} body.catx-on.cx-has-formitem #modal-dnggi_issued_func #dnggiSearchLoading .load_box.done .icon_box{ background:var(--cx-accent) !important; box-shadow:0 8px 20px color-mix(in oklab, var(--cx-accent) 24%, transparent) !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func #dnggiSearchLoading .load_box.warning .icon_box{ background:color-mix(in oklab, var(--cx-red) 12%, var(--cx-panel)) !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func #dnggiSearchLoading .load_box.warning .icon_box::before{color:var(--cx-red) !important;} body.catx-on.cx-has-formitem #modal-dnggi_issued_func #dnggiSearchLoading :is(.dnggi_issued_last_txt1, .dnggi_issued_last_txt1 span){ color:var(--cx-strong) !important; font-size:16px !important; font-weight:700 !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func #dnggiSearchLoading :is(.dnggi_issued_last_txt2, .dnggi_issued_last_txt3){color:var(--cx-body) !important; line-height:1.5 !important;} body.catx-on.cx-has-formitem #modal-dnggi_issued_func :is(#dnggiSearchEmpty, #dnggiSearchWarning, #dnggiAccountForm){color:var(--cx-body) !important;} body.catx-on.cx-has-formitem #modal-dnggi_issued_func :is(#dnggiSearchEmpty, #dnggiSearchWarning, #dnggiAccountForm) .ex_tt.icons span, body.catx-on.cx-has-formitem #modal-dnggi_issued_func :is(#dnggiSearchWarning, #dnggiAccountForm) .ex_tt span{ background:color-mix(in oklab, var(--cx-red) 12%, var(--cx-panel)) !important; color:var(--cx-red) !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func :is(#dnggiSearchEmpty, #dnggiSearchWarning, #dnggiAccountForm) .ex_tt i{color:var(--cx-red) !important;} body.catx-on.cx-has-formitem #modal-dnggi_issued_func :is(#dnggiSearchEmpty, #dnggiSearchWarning, #dnggiAccountForm) .ex_sub > span{ color:var(--cx-strong) !important; font-size:16px !important; font-weight:700 !important; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func :is(#dnggiSearchEmpty, #dnggiSearchWarning, #dnggiAccountForm) .ex_sub2 span{color:var(--cx-body) !important; line-height:1.5 !important;} body.catx-on.cx-has-formitem #modal-dnggi_issued_func :is(#dnggiSearchWarning, #dnggiAccountForm) .reason{color:var(--cx-red) !important;} body.catx-on.cx-has-formitem #modal-dnggi_issued_func :is(#dnggiSearchWarning, #dnggiAccountForm) .btn_go_url2{ background:var(--cx-row) !important; border-color:var(--cx-line) !important; color:var(--cx-body) !important; border-radius:7px !important; transition:background-color .16s ease, border-color .16s ease, color .16s ease; } body.catx-on.cx-has-formitem #modal-dnggi_issued_func :is(#dnggiSearchWarning, #dnggiAccountForm) .btn_go_url2:hover{ background:var(--cx-hover-bg) !important; border-color:var(--cx-accent) !important; color:var(--cx-accent) !important; } body.catx-on.cx-has-formitem #modal-dnggiso_login .modal-dialog, body.catx-on.cx-has-formitem #modal-dnggiso_login .modal_wrap_ver1{ background:var(--cx-panel) !important; border-radius:12px !important; } body.catx-on.cx-has-formitem #modal-dnggiso_login .modal-dialog{ border:1px solid var(--cx-line) !important; box-shadow:0 18px 48px rgba(14,32,55,.22) !important; } body.catx-on.cx-has-formitem #modal-dnggiso_login .modal_content{ background:var(--cx-panel) !important; color:var(--cx-text) !important; border-radius:12px !important; } body.catx-on.cx-has-formitem #modal-dnggiso_login .modal_icon i, body.catx-on.cx-has-formitem #modal-dnggiso_login .modal_title_hdtt{color:var(--cx-accent) !important;} body.catx-on.cx-has-formitem #modal-dnggiso_login .modal_title_sbtt{color:var(--cx-body) !important; line-height:1.5 !important;} body.catx-on.cx-has-formitem #modal-dnggiso_login .modal_sign_box input{ background:var(--cx-panel) !important; border-color:var(--cx-line) !important; color:var(--cx-text) !important; border-radius:6px !important; } body.catx-on.cx-has-formitem #modal-dnggiso_login .modal_sign_box input:focus-visible{ border-color:var(--cx-accent) !important; box-shadow:0 0 0 3px color-mix(in oklab, var(--cx-accent) 16%, transparent) !important; } body.catx-on.cx-has-formitem #modal-dnggiso_login :is(.modal_sign_box button, .eais_signgo){ background:var(--cx-accent) !important; border-color:var(--cx-accent) !important; color:#fff !important; border-radius:7px !important; } body.catx-on.cx-has-formitem #modal-dnggiso_login .go_platform{ background:var(--cx-row) !important; border-color:var(--cx-line) !important; color:var(--cx-body) !important; border-radius:7px !important; } body.catx-on.cx-has-formitem #modal-dnggiso_login :is(.modal_sign_box button, .eais_signgo, .go_platform):hover{filter:brightness(.9);} body.catx-on.cx-has-formitem #modal-dnggiso_login .modal_title .close:hover{ background:color-mix(in oklab, var(--cx-red) 12%, var(--cx-panel)) !important; color:var(--cx-red) !important; } /* catx 발급 이력: 건축물대장과 등기부등본 목록의 공통 화면 */ .cx-issued-history .cx-issued-heading{display:none;} body.catx-on .cx-issued-history{ color:var(--cx-text); padding:0 10px 10px !important; } body.catx-on .cx-issued-history > .container-fluid{ max-width:none; width:100%; padding:0; } body.catx-on .cx-issued-history .cx-issued-heading{ display:block; margin:0 -10px 12px; padding:14px 18px; background:#fff; border-bottom:1px solid #e8edf3; } body.catx-on .cx-issued-history .cx-issued-heading > span{ display:none; } body.catx-on .cx-issued-history .cx-issued-heading h1{ margin:0; color:#172033; font-family:'NotoSansKR-Bold'; font-size:22px; font-weight:normal; line-height:1.35; } body.catx-on .cx-issued-history .cx-issued-heading p{ margin:3px 0 0; color:#718096; font-size:13px; line-height:1.5; } body.catx-on .cx-issued-history .top_fixed{ background:var(--cx-panel) !important; border:1px solid var(--cx-line) !important; border-radius:12px !important; padding:14px 16px !important; box-shadow:0 5px 18px rgba(12,30,55,.08); } body.catx-on .cx-issued-history .top_fixed .form-inline > form{ display:flex; flex-wrap:wrap; align-items:center; gap:12px; width:100%; } body.catx-on .cx-issued-history .top_fixed .badge.main_color{ float:none !important; flex:0 0 auto; width:auto !important; max-width:none !important; margin:0 !important; padding:6px 12px !important; height:36px !important; background:var(--cx-row) !important; border:1px solid var(--cx-line) !important; border-radius:8px !important; color:var(--cx-strong) !important; font-size:14px; line-height:22px !important; } body.catx-on .cx-issued-history .top_fixed .input-group{ float:none !important; flex:1 1 420px; min-width:0; width:auto !important; display:flex !important; align-items:stretch; gap:8px; margin:0 !important; } body.catx-on .cx-issued-history .top_fixed .input-group > input.form-control{ float:none !important; flex:1 1 auto; min-width:0; width:100% !important; height:36px !important; background:var(--cx-panel) !important; border:1px solid var(--cx-line) !important; border-radius:7px !important; color:var(--cx-text) !important; box-shadow:none !important; } body.catx-on .cx-issued-history .top_fixed .input-group > input.form-control:focus{ border-color:var(--cx-accent) !important; box-shadow:0 0 0 3px color-mix(in oklab, var(--cx-accent) 16%, transparent) !important; } body.catx-on .cx-issued-history .top_fixed .input-group-btn{ flex:0 0 auto; width:auto !important; display:flex; margin:0 !important; } body.catx-on .cx-issued-history .top_fixed .input-group-btn .btn{ width:38px; height:36px; padding:0 !important; border-radius:7px !important; background:var(--cx-row) !important; border:1px solid var(--cx-line) !important; color:var(--cx-body) !important; } body.catx-on .cx-issued-history .top_fixed .arch_issued_btn{ float:none !important; flex:0 0 auto; width:auto !important; height:36px !important; margin:0 !important; padding:0 14px !important; line-height:34px !important; background:var(--cx-accent) !important; border:1px solid var(--cx-accent) !important; border-radius:7px !important; color:#fff !important; font-weight:600; transition:filter .16s ease, transform .16s ease; } body.catx-on .cx-issued-history .top_fixed .arch_issued_btn :is(span, i){color:inherit !important;} body.catx-on .cx-issued-history .top_fixed :is(.arch_issued_btn, .input-group-btn .btn):hover{ filter:brightness(.9); transform:translateY(-1px); } body.catx-on .cx-issued-history .top_fixed :is(.arch_issued_btn, .input-group-btn .btn):focus-visible{ outline:2px solid var(--cx-accent); outline-offset:2px; } body.catx-on .cx-issued-history .table-responsive{ background:var(--cx-panel) !important; border:1px solid var(--cx-line) !important; border-radius:12px !important; margin-top:12px !important; box-shadow:0 5px 18px rgba(12,30,55,.08); } body.catx-on .cx-issued-history .table_top_wrap{ padding:0 !important; overflow-x:auto; } body.catx-on .cx-issued-history .table_pc{ width:100%; margin:0; border:0 !important; box-shadow:none !important; } body.catx-on .cx-issued-history .table_pc thead{ background:var(--cx-row) !important; } body.catx-on .cx-issued-history .table_pc thead th{ background:var(--cx-row) !important; border:0 !important; border-bottom:1px solid var(--cx-line) !important; color:var(--cx-strong) !important; font-weight:700 !important; padding:13px 10px !important; } body.catx-on .cx-issued-history .table_pc tbody tr{ background:var(--cx-panel) !important; transition:background-color .16s ease; } body.catx-on .cx-issued-history .table_pc tbody tr:hover{background:var(--cx-row) !important;} body.catx-on .cx-issued-history .table_pc tbody td{ border-top:0 !important; border-bottom:1px solid var(--cx-line-soft) !important; color:var(--cx-text) !important; padding:12px 10px !important; vertical-align:middle; } body.catx-on .cx-issued-history .table_pc .issued-date{ white-space:nowrap; word-break:normal; } body.catx-on .cx-issued-history .table_pc .no_list_box, body.catx-on .cx-issued-history .mobile_no_list{ color:var(--cx-sub) !important; text-align:center; padding:28px 12px !important; } body.catx-on .cx-issued-history .select_btn_wrap{gap:5px;} body.catx-on .cx-issued-history :is(.select_btn, .select_btn_del){ display:inline-flex !important; align-items:center; justify-content:center; gap:5px; width:auto !important; min-height:30px; height:auto !important; margin:0 !important; padding:5px 9px !important; border-radius:7px !important; font-size:var(--dash-font-12, 12px) !important; font-weight:600 !important; line-height:1.3 !important; transition:background-color .16s ease, border-color .16s ease, color .16s ease; } body.catx-on .cx-issued-history .select_btn{ background:var(--cx-row) !important; border:1px solid var(--cx-accent) !important; color:var(--cx-accent) !important; } body.catx-on .cx-issued-history .select_btn_del{ background:color-mix(in oklab, var(--cx-red) 9%, var(--cx-panel)) !important; border:1px solid var(--cx-red) !important; color:var(--cx-red) !important; } body.catx-on .cx-issued-history :is(.select_btn, .select_btn_del) i{color:inherit !important; margin:0 !important;} body.catx-on .cx-issued-history .select_btn:hover{ background:var(--cx-accent) !important; color:#fff !important; } body.catx-on .cx-issued-history .select_btn_del:hover{ background:var(--cx-red) !important; color:#fff !important; } body.catx-on .cx-issued-history :is(.select_btn, .select_btn_del):focus-visible{ outline:2px solid var(--cx-accent); outline-offset:2px; } body.catx-on .cx-issued-history :is(.status-progress, .status-waiting){ display:inline-flex; align-items:center; gap:5px; padding:5px 9px; border-radius:7px; font-size:var(--dash-font-12, 12px); font-weight:600; line-height:1.3; } body.catx-on .cx-issued-history .status-progress{ background:color-mix(in oklab, var(--cx-accent) 12%, var(--cx-panel)); color:var(--cx-accent); } body.catx-on .cx-issued-history .status-waiting{ background:color-mix(in oklab, var(--cx-amber) 13%, var(--cx-panel)); color:var(--cx-amber); } body.catx-on .cx-issued-history .issued-history-failed{ display:inline-block; max-width:100%; padding:5px 9px; background:color-mix(in oklab, var(--cx-red) 11%, var(--cx-panel)); border-radius:7px; color:var(--cx-red) !important; font-size:var(--dash-font-12, 12px); font-weight:600; line-height:1.4; text-align:center; } body.catx-on .cx-issued-history .analyze_pagination{ display:flex; flex-wrap:wrap; justify-content:center; gap:3px; margin:12px 0 !important; } body.catx-on .cx-issued-history .analyze_pagination > li > a{ color:var(--cx-body) !important; border-radius:6px !important; } body.catx-on .cx-issued-history .analyze_pagination > li > a:hover{ background:var(--cx-row) !important; color:var(--cx-accent) !important; } body.catx-on .cx-issued-history .analyze_pagination > .active > a{color:var(--cx-accent) !important; font-weight:700;} @media (max-width:992px){ body.catx-on .cx-issued-history{padding:0 12px 10px !important;} body.catx-on .cx-issued-history > .container-fluid{ display:flex; flex-direction:column; min-height:0; height:100% !important; padding:0 !important; } body.catx-on .cx-issued-history .cx-issued-heading{ margin:0 -12px 10px; padding:12px 12px 10px; } body.catx-on .cx-issued-history .cx-issued-heading h1{font-size:19px;} body.catx-on .cx-issued-history .cx-issued-heading p{font-size:var(--dash-font-12, 12px);} body.catx-on .cx-issued-history .top_fixed{position:static !important; padding:12px !important;} body.catx-on .cx-issued-history .top_fixed .form-inline > form{gap:10px;} body.catx-on .cx-issued-history .top_fixed .badge.main_color{flex:1 1 100%;} body.catx-on .cx-issued-history .top_fixed .input-group{ flex:1 1 100%; flex-wrap:wrap; gap:7px; } body.catx-on .cx-issued-history .top_fixed .input-group > input.form-control{ flex:1 1 calc(100% - 46px); width:calc(100% - 46px) !important; } body.catx-on .cx-issued-history .top_fixed .input-group-btn{flex:0 0 38px;} body.catx-on .cx-issued-history .top_fixed .arch_issued_btn{ flex:1 1 100%; text-align:center; } body.catx-on .cx-issued-history .table-responsive{ display:flex; flex-direction:column; flex:1 1 auto; min-height:0; width:100%; height:auto !important; overflow:hidden !important; } body.catx-on .cx-issued-history #list_box{ flex:1 1 auto; min-height:0; height:auto !important; overflow:hidden; } body.catx-on .cx-issued-history .table_top_wrap{ height:100% !important; padding:12px !important; overflow-y:auto !important; overflow-x:hidden !important; } body.catx-on .cx-issued-history .table_mobile{ display:block !important; width:100% !important; margin:0 !important; } body.catx-on .cx-issued-history .table_mobile .table_tr{ background:var(--cx-row) !important; border:1px solid var(--cx-line) !important; border-radius:9px !important; overflow:hidden; margin-bottom:10px !important; box-shadow:0 2px 8px rgba(12,30,55,.05); } body.catx-on .cx-issued-history .table_mobile .table_td_top{ padding:12px !important; border-bottom:1px solid var(--cx-line-soft) !important; } body.catx-on .cx-issued-history .table_mobile .table_td_top > div{ display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 8px; height:auto !important; line-height:1.4 !important; } body.catx-on .cx-issued-history .table_mobile .table_td_top .addr{ flex:1 1 100%; min-width:0; color:var(--cx-strong) !important; font-size:14px; line-height:1.45; overflow-wrap:anywhere; } body.catx-on .cx-issued-history .table_mobile .table_td_top :is(.history-seq, .item_id, .gubun){ color:var(--cx-sub) !important; font-size:var(--dash-font-12, 12px); } body.catx-on .cx-issued-history .table_mobile .table_td_btm{ display:flex !important; flex-wrap:wrap; align-items:center; justify-content:flex-start; gap:8px; padding:11px 12px !important; color:var(--cx-body) !important; line-height:1.4 !important; } body.catx-on .cx-issued-history .table_mobile .table_td_btm > span:not(.issued-history-failed){ flex:1 1 100%; width:auto !important; color:var(--cx-body) !important; } body.catx-on .cx-issued-history .table_mobile .table_td_btm > .select_btn, body.catx-on .cx-issued-history .table_mobile .table_td_btm > .select_btn_del{ flex:1 1 auto; min-width:100px; } body.catx-on .cx-issued-history .table_mobile .table_tr:hover{ border-color:var(--cx-accent) !important; } body.catx-on .cx-issued-history .analyze_pagination{padding:8px !important;} } /* 디자인 설정 페이지의 다섯 섹션 제목을 같은 서체 크기와 굵기로 표시 */ html body.catx-on #admin_wrap .settings-page #form_design_update h4.box_title{ font-size:20px !important; font-weight:700 !important; line-height:26px !important; } html body.catx-on #admin_wrap .settings-page #form_design_update .box_contents>table>thead>tr>th.settings-section-heading{ position:relative !important; padding:14px 250px 14px 16px !important; font-size:18px !important; font-weight:700 !important; line-height:26px !important; } html body.catx-on #admin_wrap .settings-page #form_design_update .settings-section-title{ display:block; min-width:0; color:inherit !important; font-size:inherit !important; font-weight:inherit !important; line-height:inherit !important; } html body.catx-on #admin_wrap .settings-page #form_design_update .settings-section-actions{ position:absolute !important; top:50%; right:12px; transform:translateY(-50%) !important; display:inline-flex; align-items:center; justify-content:flex-end; gap:7px; } html body.catx-on #admin_wrap .settings-page #form_design_update .settings-section-actions .guide_check_btn{ position:static !important; top:auto !important; right:auto !important; transform:none !important; } /* SNS/SEO 설정의 외곽 section은 기존 float:left가 남아 중앙 정렬을 막는다. */ html body.catx-on #admin_wrap .settings-page.sns-seo-settings-page{ display:block !important; float:none !important; width:calc(100% - 36px) !important; max-width:1356px !important; margin:18px auto !important; box-sizing:border-box; box-shadow:none !important; } @media (max-width:767px){ html body.catx-on #admin_wrap .settings-page.sns-seo-settings-page{ width:calc(100% - 16px) !important; margin:8px auto !important; } html body.catx-on #admin_wrap .settings-page #form_design_update h4.box_title{ font-size:18px !important; font-weight:700 !important; } html body.catx-on #admin_wrap .settings-page #form_design_update .box_contents>table>thead>tr>th.settings-section-heading{ padding:12px !important; min-height:0 !important; font-size:16px !important; line-height:24px !important; } html body.catx-on #admin_wrap .settings-page #form_design_update .settings-section-actions{ position:static !important; transform:none !important; justify-content:flex-start; flex-wrap:wrap; margin-top:8px; } } /* 매물목록 매물종류 칸: 이름이 길어도 칸이 가로로 늘어나지 않게 100px 로 묶고 줄바꿈. * 표가 table-layout:auto 라 td 에 max-width 를 줘도 무시되므로 안쪽 박스 폭을 고정한다. * (이 파일은 text/css 로 서빙된다 —