/* ═══ 전체 인라인 CSS ═══ */ /* ── screenGate: 진입 선택 화면 ── */ #screenGate { min-height: 100vh; background: linear-gradient(150deg, #0b1437 0%, #153088 45%, #142a6e 100%); display: flex; align-items: center; justify-content: center; flex-direction: column; } .gate-wrap { width: 100%; max-width: 520px; padding: 40px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; } .gate-logo { width: 72px; height: 72px; border-radius: 20px; background: rgba(255,255,255,.12); display: flex; align-items: center; justify-content: center; font-size: 32px; color: #fff; margin-bottom: 8px; box-shadow: 0 8px 32px rgba(0,0,0,.3); } .gate-title { font-size: 28px; font-weight: 800; color: #fff; letter-spacing: -.5px; margin: 0; } .gate-sub { font-size: 14px; color: rgba(255,255,255,.55); margin: 0 0 16px; } .gate-cards { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .gate-card { position: relative; background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.13); border-radius: 20px; padding: 28px 20px 24px; display: flex; flex-direction: column; align-items: flex-start; gap: 8px; cursor: pointer; text-decoration: none; transition: transform .2s ease, background .2s ease, box-shadow .2s ease; text-align: left; backdrop-filter: blur(4px); } .gate-card:hover { transform: translateY(-4px); background: rgba(255,255,255,.14); box-shadow: 0 20px 48px rgba(0,0,0,.38); } .gate-card--review { border-color: rgba(16,185,129,.35); } .gate-card--review:hover { border-color: rgba(16,185,129,.7); } .gate-card--admin { border-color: rgba(124,92,247,.35); } .gate-card--admin:hover { border-color: rgba(124,92,247,.7); } .gate-card-icon { width: 44px; height: 44px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 4px; } .gate-card--review .gate-card-icon { background: rgba(16,185,129,.18); color: #10B981; } .gate-card--admin .gate-card-icon { background: rgba(124,92,247,.18); color: #a78bfa; } .gate-card-label { font-size: 17px; font-weight: 700; color: #fff; } .gate-card-desc { font-size: 12px; color: rgba(255,255,255,.5); line-height: 1.5; } .gate-card-arrow { position: absolute; top: 20px; right: 18px; font-size: 13px; color: rgba(255,255,255,.3); transition: color .18s, right .18s; } .gate-card:hover .gate-card-arrow { color: rgba(255,255,255,.8); right: 14px; } @media (max-width: 480px) { .gate-cards { grid-template-columns: 1fr; } .gate-title { font-size: 22px; } } /* ── 메인화면 리뷰어 등록 링크 ── */ .gate-register-row { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 4px; font-size: 13px; color: rgba(255,255,255,.45); } .gate-register-btn { display: inline-flex; align-items: center; gap: 5px; background: rgba(251,191,36,.12); border: 1px solid rgba(251,191,36,.35); color: #FCD34D; border-radius: 20px; padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: background .18s, border-color .18s, transform .18s; text-decoration: none; } .gate-register-btn:hover { background: rgba(251,191,36,.22); border-color: rgba(251,191,36,.65); transform: translateY(-1px); } .gate-register-btn i { font-size: 11px; } /* ── 관리자 로그인 모달: 배경 완전 불투명 (뒤 내용 완전 차단) ── */ #adminLoginModal.modal-overlay { background: linear-gradient(150deg, #0b1437 0%, #153088 45%, #142a6e 100%) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } .hidden{display:none!important} :root{ /* ── 브랜드 컬러 (모던 SaaS 네이비 블루) ── */ --p:#2347CC;--p-d:#1a369e;--p-l:#EFF4FF;--p-m:#93B4F8; /* ── 상태 컬러 ── */ --ok:#10B981;--ok-l:#D1FAE5;--warn:#F59E0B;--warn-l:#FEF3C7;--err:#EF4444;--err-l:#FEE2E2; /* ── 배경/카드/보더 ── */ --bg:#F4F6FB;--card:#FFFFFF;--border:#E2E8F0;--bd:#E2E8F0;--border-d:#CBD5E1; /* ── 텍스트 ── */ --t1:#0F172A;--t2:#475569;--t3:#94A3B8; /* ── 네이비 사이드바 그라디언트 ── */ --nav-from:#153088;--nav-to:#142a6e; /* ── 반경·그림자 ── */ --r:14px;--rs:8px;--rm:12px; --sh:0 1px 4px rgba(15,23,42,.07),0 2px 10px rgba(15,23,42,.05); --shm:0 4px 24px rgba(15,23,42,.12),0 1px 6px rgba(15,23,42,.07); --tr:all .2s ease; /* ── 대시보드 컬럼 너비 CSS 변수 (JS에서 동적 변경 가능) ── */ --dc-closedcb:0px; --dc-campaign:120px; /* v11.0: 캠페인명 */ --dc-tabname:200px; --dc-product:160px; --dc-capture:54px; --dc-folder:54px; --dc-round:36px; --dc-date:60px; --dc-time:80px; --dc-review:50px; --dc-formlink:32px; --dc-manager:48px; --dc-bar:200px; --dc-nums:58px; --dc-payment:42px; --dc-income:80px; /* v9.14: 진행방식 */ --dc-depositname:120px; /* v9.14: 입금명 */ --dc-bank:80px; /* v9.14: 이체은행 */ --dc-taekhap:40px; --dc-memo:140px; --dc-enddate:90px; --dc-info:90px; /* ★ v11.1: 조합된 그리드 문자열 — 22열 (closedcb + campaign + 20열) */ --dash-grid: var(--dc-closedcb) var(--dc-campaign) var(--dc-tabname) var(--dc-product) var(--dc-capture) var(--dc-folder) var(--dc-round) var(--dc-date) var(--dc-time) var(--dc-review) var(--dc-formlink) var(--dc-manager) var(--dc-bar) var(--dc-nums) var(--dc-payment) var(--dc-income) var(--dc-depositname) var(--dc-bank) var(--dc-taekhap) var(--dc-memo) var(--dc-enddate) var(--dc-info); } /* ══════════════════════════════════════════════════════════ ★ 개발자 모드: 영역 명칭 라벨 (디버깅/수정 요청용) ══════════════════════════════════════════════════════════ */ .dev-label { position: absolute; top: 4px; left: 8px; /* 우측 → 좌측으로 변경 */ font-size: 11px; /* 9px → 11px */ font-weight: 600; color: #6B7280; /* 더 진한 회색 */ background: rgba(255, 255, 255, 0.92); padding: 3px 8px; /* 패딩 증가 */ border-radius: 4px; pointer-events: none; z-index: 9999; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Noto Sans KR', sans-serif; /* 시스템 폰트 */ letter-spacing: -0.2px; border: 1px solid #E5E7EB; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); display: none; /* 기본적으로 숨김 */ } /* UI 편집 모드에서만 표시 */ body.ui-edit-mode .dev-label { display: block; } /* 어두운 배경용 */ .dev-label.dark { color: #D1D5DB; background: rgba(17, 24, 39, 0.85); border-color: #374151; } /* 상대 위치 부모 자동 설정 */ .has-dev-label { position: relative !important; } *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} body{font-family:'Noto Sans KR','Pretendard',-apple-system,BlinkMacSystemFont,sans-serif;background:var(--bg);color:var(--t1);min-height:100vh;-webkit-font-smoothing:antialiased} input,textarea,button{font-family:inherit} .loading-overlay{position:fixed;inset:0;background:rgba(255,255,255,.92);display:flex;align-items:center;justify-content:center;z-index:9999;backdrop-filter:blur(6px);transition:opacity .3s} .loading-overlay.fade-out{opacity:0;pointer-events:none} .loading-spinner{text-align:center} .spinner-ring{width:44px;height:44px;border:4px solid var(--p-l);border-top-color:var(--p);border-radius:50%;animation:spin .8s linear infinite;margin:0 auto 12px} @keyframes spin{to{transform:rotate(360deg)}} .loading-spinner p{font-size:.88rem;color:var(--t3)} #toastContainer{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:8000;display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100vw - 32px));pointer-events:none} .toast{display:flex;align-items:center;gap:10px;background:var(--t1);color:#fff;padding:12px 16px;border-radius:var(--rs);font-size:.87rem;box-shadow:var(--shm);animation:toastIn .22s ease;pointer-events:auto} .toast.success{background:var(--ok)}.toast.error{background:var(--err)}.toast.warning{background:var(--warn);color:var(--t1)} @keyframes toastIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}} .modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.55);display:flex;align-items:center;justify-content:center;padding:20px;z-index:5000;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);animation:fadeIn .2s ease} @keyframes fadeIn{from{opacity:0}to{opacity:1}} .modal-box{background:var(--card);border-radius:24px;width:100%;max-width:460px;max-height:calc(100vh - 40px);box-shadow:0 8px 48px rgba(15,23,42,.18),0 2px 12px rgba(15,23,42,.10);overflow:hidden;display:flex;flex-direction:column;animation:slideUp .22s ease} @keyframes slideUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}} .modal-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--border);background:linear-gradient(135deg,#f8faff 0%,#f0f4ff 100%)} .modal-header h3{font-size:1rem;font-weight:700}.modal-header h3 i{color:var(--p);margin-right:8px} .modal-body{padding:20px;overflow-y:auto;flex:1;min-height:0}.modal-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:16px} .field-group{margin-bottom:16px}.field-group label{display:block;font-size:.82rem;font-weight:600;color:var(--t2);margin-bottom:6px} .field-group input{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:10px;font-size:.93rem;outline:none;transition:border-color .18s,box-shadow .18s} .field-group input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(35,71,204,.12)} .field-hint{font-size:.76rem;color:var(--t3);margin-top:5px}.req{color:var(--err)} .pw-input-wrap{display:flex;gap:6px;align-items:center}.pw-input-wrap input{flex:1;padding:10px 12px;border:1.5px solid var(--bd);border-radius:var(--rs);font-size:.9rem;outline:none;transition:border .15s,box-shadow .15s} .pw-input-wrap input:focus{border-color:var(--p);box-shadow:0 0 0 3px #5046E420} .btn-pw-toggle{flex-shrink:0;width:36px;height:36px;border:1.5px solid var(--bd);border-radius:var(--rs);background:#fff;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:.85rem;transition:color .15s,border-color .15s} .btn-pw-toggle:hover{color:var(--p);border-color:var(--p)}.login-error{margin-top:6px;font-size:.78rem;color:var(--err);font-weight:500} /* ── GAS URL 변경 이력 ── */ .gas-url-history-item{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:6px 9px;border:1.5px solid var(--bd);border-radius:7px;cursor:pointer;background:#fff;transition:background .12s,border-color .12s;min-width:0} .gas-url-history-item:hover{background:#F5F3FF;border-color:#C4B5FD} .gas-url-history-item.gas-url-history-current{border-color:#A78BFA;background:#F5F3FF} .gas-url-history-item.gas-url-history-selected{border-color:var(--p);background:#EEF2FF;box-shadow:0 0 0 2px #818CF840} .gas-url-ver-badge{flex-shrink:0;display:inline-flex;align-items:center;padding:1px 6px;background:var(--p);color:#fff;border-radius:20px;font-size:.63rem;font-weight:700;white-space:nowrap} .gas-url-history-current .gas-url-ver-badge{background:#7C3AED} .gas-url-history-url{font-size:.68rem;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;flex:1} .gas-url-cur-tag{flex-shrink:0;font-size:.6rem;font-weight:700;color:#7C3AED;background:#EDE9FE;border-radius:20px;padding:1px 5px;white-space:nowrap} /* ── UI 편집 모드 ── */ .ui-edit-overlay{position:absolute;inset:0;background:rgba(80,70,228,.08);border:2px dashed rgba(80,70,228,.4);border-radius:8px;cursor:pointer;z-index:9500;display:flex;align-items:center;justify-content:center;transition:all .2s ease;pointer-events:auto} .ui-edit-overlay:hover{background:rgba(80,70,228,.15);border-color:rgba(80,70,228,.7)} .ui-edit-label{background:var(--p);color:#fff;padding:4px 12px;border-radius:20px;font-size:.75rem;font-weight:600;pointer-events:none;box-shadow:0 2px 8px rgba(0,0,0,.15)} #uiPropertyPanel{position:fixed;top:80px;right:20px;width:360px;max-height:calc(100vh - 100px);background:#fff;border:1.5px solid var(--border);border-radius:16px;box-shadow:0 8px 24px rgba(0,0,0,.12);z-index:9600;display:flex;flex-direction:column;animation:slideInRight .25s ease} @keyframes slideInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}} .ui-prop-header{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1.5px solid var(--border);background:linear-gradient(135deg,#5046E4,#7C3AED)} .ui-prop-header h3{font-size:.95rem;font-weight:700;color:#fff;margin:0} .ui-prop-close{width:28px;height:28px;border:none;background:rgba(255,255,255,.2);color:#fff;border-radius:6px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s} .ui-prop-close:hover{background:rgba(255,255,255,.3)} .ui-prop-body{padding:16px;overflow-y:auto;flex:1;min-height:0} .ui-prop-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:40px 20px;color:var(--t3);text-align:center} .ui-prop-empty i{font-size:2rem;margin-bottom:12px;opacity:.5} .ui-prop-empty p{font-size:.85rem;margin:0} .ui-prop-section-title{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;color:var(--t1);margin-bottom:12px;padding-bottom:8px;border-bottom:1.5px solid var(--border)} .ui-prop-section-title i{color:var(--p);font-size:.75rem} .ui-prop-category{display:flex;align-items:center;gap:6px;font-size:.75rem;font-weight:600;color:var(--t2);margin-top:16px;margin-bottom:10px;padding:6px 10px;background:#F9FAFB;border-radius:6px;border-left:3px solid var(--p)} .ui-prop-category i{color:var(--p);font-size:.7rem} .ui-prop-help{background:#F0F9FF;border:1px solid #BAE6FD;border-radius:6px;padding:8px 10px;margin-bottom:14px;font-size:.72rem;color:#0C4A6E;line-height:1.4} .ui-prop-help code{background:#E0F2FE;padding:1px 5px;border-radius:4px;font-family:monospace;font-size:.7rem;font-weight:600} .ui-prop-divider{height:1px;background:var(--border);margin:16px 0} .ui-prop-field{margin-bottom:14px} .ui-prop-label{display:block;font-size:.75rem;font-weight:600;color:var(--t2);margin-bottom:6px} .ui-prop-input{width:100%;padding:8px 11px;border:1.5px solid var(--border);border-radius:8px;font-size:.83rem;outline:none;transition:border-color .15s,box-shadow .15s} .ui-prop-input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(80,70,228,.1)} .ui-prop-footer{display:flex;gap:8px;padding:14px 16px;border-top:1.5px solid var(--border);background:var(--bg)} .ui-prop-btn{flex:1;padding:10px 16px;border:none;border-radius:8px;font-size:.83rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:all .15s} .ui-prop-btn-cancel{background:#F3F4F6;color:var(--t2)} .ui-prop-btn-cancel:hover{background:#E5E7EB} .ui-prop-btn-apply{background:var(--p);color:#fff} .ui-prop-btn-apply:hover{background:#4338CA;box-shadow:0 4px 12px rgba(80,70,228,.3)} .gas-url-history-date{flex-shrink:0;font-size:.62rem;color:var(--t3);white-space:nowrap;margin-left:4px} .index-section{margin-top:18px;border-top:1px solid var(--bd);padding-top:16px} .index-section-title{font-size:.85rem;font-weight:600;color:var(--t1);margin-bottom:10px;display:flex;align-items:center;gap:6px} .index-section-title i{color:var(--p)} .index-status-card{background:var(--bg);border-radius:var(--rs);padding:12px 14px;display:flex;flex-direction:column;gap:7px} .index-status-row{display:flex;align-items:center;gap:8px;font-size:.8rem}.index-status-label{color:var(--t3);min-width:72px;flex-shrink:0}.index-meta{color:var(--t2);font-size:.78rem} .index-badge{display:inline-block;padding:2px 9px;border-radius:20px;font-size:.73rem;font-weight:600} .index-badge-ok{background:#D1FAE5;color:#065F46;border-radius:6px}.index-badge-expired{background:var(--warn-l);color:#92400E;border-radius:6px}.index-badge-none,.index-badge-unknown{background:#F1F5F9;color:#64748B;border-radius:6px}.index-badge-error{background:var(--err-l);color:#991B1B;border-radius:6px} .btn-index-build{margin-top:12px;width:100%;padding:10px;background:var(--p);color:#fff;border:none;border-radius:10px;font-size:.85rem;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:7px;transition:background .15s,transform .15s,box-shadow .15s} .btn-index-build:hover{background:var(--p-d);transform:translateY(-1px);box-shadow:0 4px 12px rgba(35,71,204,.3)}.btn-index-build:disabled{opacity:.6;cursor:not-allowed;transform:none} /* ══ 2-Layer Admin Header ══ */ .admin-header{background:linear-gradient(135deg,var(--nav-from) 0%,var(--nav-to) 100%);box-shadow:0 2px 16px rgba(21,48,136,.35);display:flex;flex-direction:column} /* 상단 얇은 바 (시스템 메뉴) */ .admin-header-topbar{display:flex;align-items:center;justify-content:space-between;padding:5px 18px 4px;border-bottom:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.12)} .admin-header-topbar-left{display:flex;align-items:center;gap:6px} .admin-header-topbar-right{display:flex;align-items:center;gap:5px} .topbar-badge{font-size:.6rem;font-weight:700;color:rgba(255,255,255,.5);letter-spacing:.08em;text-transform:uppercase;padding:1px 7px;border:1px solid rgba(255,255,255,.15);border-radius:20px;white-space:nowrap} .btn-topbar{display:inline-flex;align-items:center;gap:5px;padding:3px 10px;border:1px solid rgba(255,255,255,.18);border-radius:20px;background:rgba(255,255,255,.08);color:rgba(255,255,255,.75);font-size:.65rem;font-weight:600;cursor:pointer;transition:background .15s,border-color .15s,color .15s;white-space:nowrap} .btn-topbar i{font-size:.62rem;opacity:.85} .btn-topbar:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.4);color:#fff} .btn-topbar.warn{background:rgba(251,191,36,.15);border-color:rgba(251,191,36,.45);color:#FCD34D} .btn-topbar.warn:hover{background:rgba(251,191,36,.28);border-color:#FCD34D;color:#FDE68A} .btn-topbar.sys{background:rgba(99,102,241,.18);border-color:rgba(99,102,241,.4);color:#A5B4FC} .btn-topbar.sys:hover{background:rgba(99,102,241,.32);border-color:#A5B4FC;color:#fff} /* 메인 헤더 행 */ .admin-header-mainrow{display:flex;align-items:center;gap:10px;padding:9px 18px 10px} .admin-header-actions{display:flex;gap:5px;margin-left:auto;align-items:center} .admin-header .btn-icon-sm{color:rgba(255,255,255,.8)}.admin-header .btn-icon-sm:hover{color:#fff;background:rgba(255,255,255,.1)} /* ── 헤더 사각형 버튼 ── */ .btn-header-sq{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;padding:5px 10px;min-width:52px;border:1px solid rgba(255,255,255,.22);border-radius:10px;background:rgba(255,255,255,.09);color:rgba(255,255,255,.88);cursor:pointer;transition:background .18s,border-color .18s,transform .15s;font-size:.62rem;font-weight:600;letter-spacing:-.01em} .btn-header-sq i{font-size:.88rem;opacity:.9} .btn-header-sq:hover{background:rgba(255,255,255,.18);border-color:rgba(255,255,255,.45);color:#fff;transform:translateY(-1px)} .btn-header-sq.active-mode{background:rgba(253,224,71,.18);border-color:#FDE047;color:#FDE047} .btn-header-review{background:rgba(16,185,129,.18)!important;border-color:rgba(16,185,129,.55)!important;color:#6EE7B7!important} .btn-header-review:hover{background:rgba(16,185,129,.32)!important;border-color:#6EE7B7!important;color:#fff!important} .btn-header-staff{background:rgba(99,102,241,.22)!important;border-color:rgba(99,102,241,.55)!important;color:#A5B4FC!important} /* ══ 컨텍스트 툴바 (탭별 버튼 표시) ══ */ .admin-context-toolbar{display:flex;align-items:center;gap:6px;flex-wrap:wrap;row-gap:4px} /* 툴바 그룹 구분선 */ .ctx-sep{width:1px;height:20px;background:rgba(255,255,255,.0);margin:0 3px;display:inline-block;background:var(--border);border-radius:1px} /* ══ 우클릭 컨텍스트 메뉴 ══ */ #adminContextMenu{position:fixed;z-index:99999;background:#fff;border:1px solid #D8E3FF;border-radius:12px;box-shadow:0 8px 28px rgba(21,48,136,.18);min-width:200px;padding:5px;display:none;animation:fadeInDown .12s ease} #adminContextMenu.open{display:block} .ctx-menu-title{font-size:.62rem;font-weight:700;color:var(--t3);letter-spacing:.08em;text-transform:uppercase;padding:5px 12px 2px} .ctx-menu-item{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:8px;font-size:.82rem;font-weight:500;color:var(--t1);cursor:pointer;transition:background .12s;background:none;border:none;width:100%;text-align:left} .ctx-menu-item:hover{background:var(--p-l);color:var(--p)} .ctx-menu-item i{width:14px;text-align:center;font-size:.78rem;color:var(--p)} .ctx-menu-item.danger{color:#DC2626}.ctx-menu-item.danger i{color:#DC2626}.ctx-menu-item.danger:hover{background:#FEF2F2} .ctx-menu-item.indigo{color:#4F46E5}.ctx-menu-item.indigo i{color:#4F46E5}.ctx-menu-item.indigo:hover{background:#EEF2FF} .ctx-menu-sep{border:none;border-top:1px solid #F3F4F6;margin:4px 0} /* ── 진단 모달 섹션 ── */ .btn-header-staff:hover{background:rgba(99,102,241,.38)!important;border-color:#A5B4FC!important;color:#fff!important} .btn-header-createsheet{background:rgba(5,150,105,.18)!important;border-color:rgba(5,150,105,.5)!important;color:#34D399!important} .btn-header-createsheet:hover{background:rgba(5,150,105,.32)!important;border-color:#34D399!important;color:#fff!important} /* ── 진단 모달 섹션 ── */ .diag-section{margin-top:14px;padding-top:12px;border-top:1px solid var(--bd)} .diag-section:first-child{margin-top:0;padding-top:0;border-top:none} .diag-section-title{font-size:.8rem;font-weight:700;color:var(--t2);display:flex;align-items:center;gap:6px} .diag-section-title i{color:var(--p)} .diag-btn{display:flex;align-items:center;justify-content:center;gap:6px;padding:8px 6px;border-radius:8px;font-size:.78rem;font-weight:600;cursor:pointer;border:1px solid;transition:opacity .15s,filter .12s;text-align:center} .diag-btn:hover{filter:brightness(.94)} .diag-btn-blue{background:#EFF6FF;color:#1D4ED8;border-color:#BFDBFE} .diag-btn-orange{background:#FFF7ED;color:#B45309;border-color:#FED7AA} .diag-btn-purple{background:#FAF5FF;color:#7C3AED;border-color:#DDD6FE} .diag-btn-indigo{background:#EEF2FF;color:#4338CA;border-color:#C7D2FE} .diag-btn-gray{background:none;color:#64748B;border-color:#CBD5E1;border-style:dashed} .diag-btn-yellow{background:#FEF3C7;color:#92400E;border-color:#FCD34D} .diag-btn-green{background:#ECFDF5;color:#065F46;border-color:#6EE7B7} /* ── 열쇠 드롭다운 ── */ .key-menu-wrap{position:relative}.key-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border:1px solid #D8E3FF;border-radius:14px;box-shadow:0 8px 32px rgba(21,48,136,.18);min-width:188px;z-index:9999;overflow:hidden;animation:fadeInDown .15s ease} @keyframes fadeInDown{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}} .key-dropdown-item{display:flex;align-items:center;gap:9px;width:100%;padding:11px 16px;background:none;border:none;cursor:pointer;font-size:.84rem;color:var(--t1);font-weight:500;text-align:left;transition:background .14s} .key-dropdown-item:hover{background:var(--p-l);color:var(--p)}.key-dropdown-item i{width:14px;text-align:center;color:var(--p);font-size:.8rem} .admin-tab-nav{display:flex;background:#fff;border-bottom:2px solid var(--border);position:sticky;top:0;z-index:10;box-shadow:0 1px 6px rgba(15,23,42,.06)} .admin-tab-btn{flex:1;padding:13px 8px;border:none;background:transparent;font-size:.83rem;font-weight:500;color:var(--t3);cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:color .18s,border-bottom .18s,background .18s;border-bottom:2px solid transparent;margin-bottom:-2px;letter-spacing:-.01em} .admin-tab-btn.active{color:var(--p);border-bottom-color:var(--p);font-weight:700;background:var(--p-l)}.admin-tab-btn:hover:not(.active){color:var(--t2);background:#F8FAFF} .success-modal{padding:36px 28px;text-align:center} .success-circle{width:72px;height:72px;background:var(--ok-l);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:2rem;color:var(--ok);margin-bottom:20px;animation:popIn .4s cubic-bezier(.34,1.56,.64,1)} @keyframes popIn{from{transform:scale(0)}to{transform:scale(1)}} .success-modal h2{font-size:1.4rem;margin-bottom:10px}.success-modal p{color:var(--t2);font-size:.93rem;line-height:1.6;margin-bottom:24px} .btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:7px;background:var(--p);color:#fff;border:none;border-radius:10px;padding:11px 20px;font-size:.9rem;font-weight:600;cursor:pointer;transition:background .18s,transform .18s,box-shadow .18s;letter-spacing:-.01em} .btn-primary:hover{background:var(--p-d);transform:translateY(-2px);box-shadow:0 6px 18px rgba(35,71,204,.35)} .btn-primary.full-width{width:100%}.btn-primary:disabled{opacity:.45;transform:none;cursor:not-allowed} .btn-ghost{display:inline-flex;align-items:center;gap:7px;background:#fff;color:var(--t2);border:1.5px solid var(--border-d);border-radius:10px;padding:10px 18px;font-size:.88rem;font-weight:500;cursor:pointer;transition:background .18s,border-color .18s,transform .18s;flex-shrink:0} .btn-ghost:hover{background:var(--p-l);border-color:var(--p-m);color:var(--p);transform:translateY(-1px)} .btn-icon-sm{width:34px;height:34px;background:rgba(255,255,255,.18);border:none;border-radius:50%;color:#fff;font-size:.9rem;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:var(--tr);flex-shrink:0} .btn-icon-sm:hover{background:rgba(255,255,255,.3)}.btn-icon-sm.dark{background:var(--bg);color:var(--t2);border:1.5px solid var(--border)}.btn-icon-sm.dark:hover{background:var(--border)} /* 모달 내부 닫기 버튼: 흰 배경에서 보이도록 */ .modal-header .btn-icon-sm{background:rgba(15,23,42,.06);color:var(--t2);border:1px solid var(--border)} .modal-header .btn-icon-sm:hover{background:rgba(15,23,42,.12);color:var(--t1)} .btn-search{width:50px;height:50px;flex-shrink:0;background:var(--p);color:#fff;border:none;border-radius:var(--rs);font-size:1.05rem;cursor:pointer;transition:var(--tr);display:flex;align-items:center;justify-content:center} .btn-search:hover{background:var(--p-d)} .btn-submit{display:inline-flex;align-items:center;gap:8px;background:linear-gradient(135deg,var(--p),#3B6AEE);color:#fff;border:none;border-radius:10px;padding:13px 24px;font-size:.95rem;font-weight:700;cursor:pointer;transition:transform .18s,box-shadow .18s;box-shadow:0 4px 14px rgba(35,71,204,.35);flex:1} .btn-submit:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(35,71,204,.45)}.btn-submit:disabled{opacity:.5;transform:none;cursor:not-allowed} .screen{display:none;min-height:100vh;flex-direction:column}.screen.active{display:flex} .screen-body{flex:1;padding:16px;max-width:600px;width:100%;margin:0 auto} .app-header{background:linear-gradient(135deg,var(--nav-from) 0%,var(--nav-to) 100%);box-shadow:0 2px 16px rgba(21,48,136,.35);position:sticky;top:0;z-index:100} .header-inner{display:flex;align-items:center;gap:12px;padding:16px 18px 20px;max-width:600px;margin:0 auto;width:100%} .header-icon{width:40px;height:40px;flex-shrink:0;background:rgba(255,255,255,.2);border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem;color:#fff} .header-text{flex:1;min-width:0}.header-text h1{font-size:1.15rem;font-weight:700;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .header-text p{font-size:.78rem;color:rgba(255,255,255,.75);margin-top:2px}.header-setting{margin-left:auto} .search-card{background:var(--card);border-radius:16px;padding:22px 20px;margin-bottom:14px;box-shadow:var(--sh);border:1px solid var(--border);transition:box-shadow .2s} .search-card-title{font-size:1rem;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:9px;margin-bottom:8px}.search-card-title i{color:var(--p);font-size:1.1rem} .search-card-desc{font-size:.85rem;color:var(--t3);line-height:1.5;margin-bottom:16px}.search-row{display:flex;gap:8px} .name-input{flex:1;padding:13px 14px;border:1.5px solid var(--border);border-radius:10px;font-size:.97rem;outline:none;transition:border-color .18s,box-shadow .18s;color:var(--t1)} .name-input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(35,71,204,.12)} .search-tip{font-size:.77rem;color:var(--t3);margin-top:10px;display:flex;align-items:center;gap:6px}.search-tip i{color:var(--warn)} .search-progress{margin-bottom:14px} .progress-bar-wrap{height:5px;background:var(--border);border-radius:3px;overflow:hidden;margin-bottom:8px} .progress-bar{height:100%;background:linear-gradient(90deg,var(--p),#4F80FF);border-radius:3px;width:0%;transition:width .4s ease;animation:progressPulse 1.4s ease infinite} @keyframes progressPulse{0%{opacity:1}50%{opacity:.6}100%{opacity:1}} .progress-text{font-size:.8rem;color:var(--t3);text-align:center} .results-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .results-title{font-size:.88rem;font-weight:700;color:var(--t2)}.results-badge{background:var(--p-l);color:var(--p);padding:3px 10px;border-radius:20px;font-size:.74rem;font-weight:700} .result-card{display:flex;align-items:center;gap:10px;padding:14px 16px;background:var(--card);border:1px solid var(--border);border-radius:14px;cursor:pointer;transition:border-color .18s,transform .18s,box-shadow .18s;margin-bottom:8px;box-shadow:var(--sh)} .result-card:last-child{margin-bottom:0}.result-card:hover{border-color:var(--p);background:var(--p-l);transform:translateY(-2px);box-shadow:0 6px 20px rgba(35,71,204,.15)} .result-avatar{display:none} .result-body{flex:1;min-width:0}.result-name{font-size:.96rem;font-weight:700;color:var(--t1)}.result-product-name{font-size:.92rem;font-weight:700;color:var(--t1)}.result-product-label{font-size:.8rem;color:var(--p);font-weight:600;margin-top:3px}.result-product-empty{font-size:.78rem;color:#9CA3AF;font-style:italic;font-weight:400;margin-top:3px} /* ★ 옵션 배지 (검색 결과 카드) */ .result-option-row{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px} .result-option-badge{display:inline-flex;align-items:center;padding:2px 8px;background:#F0FDF4;border:1px solid #6EE7B7;border-radius:20px;font-size:.72rem;font-weight:600;color:#065F46;white-space:nowrap} .result-campaign{display:none} .result-tab{font-size:.75rem;color:var(--t3);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .result-right{display:flex;align-items:center;gap:8px;flex-shrink:0} .status-badge{padding:3px 9px;border-radius:20px;font-size:.73rem;font-weight:700}.status-pending{background:var(--warn-l);color:#92400E}.status-done{background:var(--ok-l);color:#065F46} .result-chevron{color:var(--t3);font-size:.8rem}.result-card:not(.is-done):hover .result-chevron{color:var(--p)} .empty-state{text-align:center;padding:48px 20px;color:var(--t3)}.empty-state i{font-size:2.2rem;margin-bottom:12px;display:block}.empty-state p{font-size:.93rem;font-weight:600;color:var(--t2);margin-bottom:6px}.empty-state span{font-size:.82rem} .notice-card{display:flex;align-items:flex-start;gap:12px;background:var(--warn-l);border:1.5px solid #FCD34D;border-radius:var(--r);padding:16px 18px;font-size:.87rem;color:#78350F} .notice-card i{font-size:1.2rem;flex-shrink:0;margin-top:1px;color:var(--warn)}.notice-card strong{display:block;font-weight:700;margin-bottom:4px}.notice-card p{font-size:.8rem;opacity:.85;line-height:1.5} .product-strip{background:var(--card);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:12px;padding:12px 18px;max-width:600px;width:100%} .thumb-wrap{flex-shrink:0}.thumb-wrap img{width:52px;height:52px;border-radius:var(--rs);object-fit:cover;border:1px solid var(--border)} .thumb-fallback{width:52px;height:52px;border-radius:var(--rs);background:var(--bg);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;color:var(--t3);font-size:1.4rem} .product-info{min-width:0;flex:1}.product-label{font-size:.7rem;font-weight:700;color:var(--p);letter-spacing:.5px;display:block} .product-name{font-size:.9rem;font-weight:600;display:block;margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .product-link{font-size:.74rem;color:var(--p);text-decoration:none;display:inline-flex;align-items:center;gap:4px;margin-top:3px}.product-link:hover{text-decoration:underline} .stepbar{background:var(--card);border-bottom:1px solid var(--border);padding:10px 18px 14px} .stepbar-track{height:4px;background:var(--border);border-radius:2px;overflow:hidden;margin-bottom:10px} .stepbar-fill{height:100%;background:var(--p);border-radius:2px;transition:width .4s ease}.stepbar-labels{display:flex;justify-content:space-around} .sl{font-size:.76rem;font-weight:500;color:var(--t3);transition:var(--tr)}.sl.active{color:var(--p);font-weight:700}.sl.done{color:var(--ok)} .step-body{padding-top:14px}.step-pane{display:none;animation:slideInR .25s ease}.step-pane.active{display:block} @keyframes slideInR{from{opacity:0;transform:translateX(10px)}to{opacity:1;transform:translateX(0)}} .pane-card{background:var(--card);border-radius:16px;padding:20px 18px;box-shadow:var(--sh);border:1px solid var(--border);transition:transform .2s ease,box-shadow .2s ease} .pane-card:hover{transform:translateY(-2px);box-shadow:var(--shm)} .pane-title{display:flex;align-items:flex-start;gap:12px;margin-bottom:18px} .pane-num{width:30px;height:30px;flex-shrink:0;background:var(--p);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.82rem;font-weight:700;margin-top:1px} .pane-title h2{font-size:1.05rem;font-weight:700}.pane-title p{font-size:.82rem;color:var(--t3);margin-top:3px} .info-grid{border:1.5px solid var(--border);border-radius:var(--rs);overflow:hidden;margin-bottom:14px} .ig-row{display:flex;align-items:stretch;border-bottom:1px solid var(--border)}.ig-row:last-child{border-bottom:none} .ig-label{width:82px;flex-shrink:0;padding:10px 12px;background:var(--bg);font-size:.76rem;font-weight:700;color:var(--t2);display:flex;align-items:center} .ig-value{flex:1;padding:10px 12px;font-size:.9rem;color:var(--t1);display:flex;align-items:center;flex-wrap:wrap;gap:4px;background:var(--card)} .ig-value .tag{background:var(--p-l);color:var(--p);padding:2px 8px;border-radius:12px;font-size:.74rem;font-weight:600} /* 한 행에 2개 항목 표시 (주문자/수취인, 아이디/전화번호) */ .ig-row-pair{display:flex;align-items:stretch;border-bottom:1px solid var(--border)}.ig-row-pair:last-child{border-bottom:none} .ig-pair-cell{flex:1;display:flex;align-items:stretch;min-width:0} .ig-pair-cell+.ig-pair-cell{border-left:1px solid var(--border)} .ig-pair-cell .ig-label{width:64px;font-size:.72rem} .ig-pair-cell .ig-value{font-size:.85rem;padding:10px 10px} /* 상품명 행 강조 */ .ig-row-product .ig-label{color:var(--p);font-size:.75rem} .ig-row-product .ig-value{font-size:.93rem;font-weight:600;color:var(--t1)} /* 옵션 행 스타일 */ .ig-row-option .ig-label{color:#059669;font-size:.73rem;font-weight:600} .ig-row-option .ig-value{font-size:.87rem;font-weight:600;color:#065F46} .ig-row-option .ig-value span{background:#F0FDF4;border:1px solid #6EE7B7;border-radius:6px;padding:2px 8px;display:inline-block} /* 결제금액 행 강조 */ .ig-row-price .ig-label{color:#059669;font-size:.75rem} .ig-row-price .ig-value{font-size:.93rem;font-weight:700;color:#065F46} .alert-done{display:flex;align-items:flex-start;gap:10px;background:var(--ok-l);border:1.5px solid #6EE7B7;border-radius:var(--rs);padding:12px 14px;margin-bottom:14px;color:#065F46;font-size:.87rem} .alert-done i{flex-shrink:0;margin-top:1px;font-size:1.1rem}.alert-done strong{display:block;font-weight:700}.alert-done p{font-size:.8rem;opacity:.8;margin-top:2px} /* 구매양식 입력 폼 */ .of-field{display:flex;align-items:center;margin-bottom:10px;gap:8px} .of-label{width:58px;flex-shrink:0;font-size:.76rem;font-weight:700;color:var(--t2);text-align:right} .of-input{flex:1;border:1.5px solid var(--border);border-radius:8px;padding:9px 12px;font-size:.9rem;color:var(--t1);background:var(--card);outline:none;transition:border-color .15s} .of-input:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(99,102,241,.12)} .of-input::placeholder{color:var(--t3);font-size:.82rem} /* ── 주문 캡처 이미지 업로드 & AI 추출 ── */ .of-img-zone{border:2px dashed #C4B5FD;border-radius:12px;background:#FAFAFF;padding:20px 16px;text-align:center;cursor:pointer;transition:all .18s;margin-bottom:14px;position:relative} .of-img-zone:hover,.of-img-zone.drag-over{border-color:var(--p);background:#EEF2FF} .of-img-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%} .of-img-zone .oiz-icon{font-size:1.8rem;margin-bottom:6px;display:block} .of-img-zone .oiz-title{font-size:.88rem;font-weight:700;color:#5B21B6;margin-bottom:2px} .of-img-zone .oiz-sub{font-size:.72rem;color:var(--t3)} .of-img-preview{display:none;position:relative;margin-bottom:10px} .of-img-preview img{width:80px;height:80px;object-fit:cover;border-radius:8px;border:1.5px solid #DDD6FE;display:block} .of-img-preview .oip-remove{position:absolute;top:-6px;right:-6px;background:rgba(0,0,0,.55);color:#fff;border:none;border-radius:50%;width:20px;height:20px;cursor:pointer;font-size:.7rem;display:flex;align-items:center;justify-content:center} /* AI 분석 중 스피너 */ .of-ai-loading{display:none;align-items:center;gap:10px;padding:12px 14px;background:#F5F3FF;border:1.5px solid #DDD6FE;border-radius:10px;margin-bottom:14px;font-size:.82rem;color:#5B21B6;font-weight:600} .of-ai-loading.show{display:flex} /* AI 추출 결과 카드 */ .of-ai-result{display:none;background:#F0FDF4;border:1.5px solid #6EE7B7;border-radius:10px;padding:12px 14px;margin-bottom:14px} .of-option-row{display:flex;align-items:center;gap:8px;padding:5px 0;border-bottom:1px solid #EDE9FE;font-size:.82rem} .of-option-row:last-child{border-bottom:none} .of-option-label{flex-shrink:0;min-width:70px;font-weight:600;color:#6D28D9;font-size:.75rem} .of-option-val{flex:1;color:#1F2937;font-weight:500} .of-ai-result.show{display:block} .of-ai-result-title{font-size:.72rem;font-weight:700;color:#065F46;letter-spacing:.04em;margin-bottom:8px;display:flex;align-items:center;gap:5px} .of-ai-field{display:flex;align-items:flex-start;gap:6px;margin-bottom:6px;font-size:.8rem} .of-ai-field:last-child{margin-bottom:0} .of-ai-field .aif-label{width:56px;flex-shrink:0;color:#6B7280;font-weight:600} .of-ai-field .aif-val{color:#111827;font-weight:500;flex:1;word-break:break-all} .of-ai-field .aif-val.empty{color:#D1D5DB;font-style:italic} .of-ai-apply-btn{width:100%;margin-top:10px;padding:9px;border-radius:8px;border:none;background:var(--p);color:#fff;font-size:.83rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px} .of-ai-apply-btn:hover{background:#4F46E5} .of-ai-apply-btn:disabled{background:#A5B4FC;cursor:not-allowed} /* 자동입력 표시 */ .of-input.ai-filled{border-color:#10B981;background:#F0FDF4} /* 필수 입력 스타일 */ .of-label-required::after{content:" *";color:#EF4444;font-weight:700} .of-input--error{border-color:#EF4444!important;background:#FFF5F5!important;box-shadow:0 0 0 3px rgba(239,68,68,.12)!important} .of-error-msg{display:none;font-size:.72rem;color:#EF4444;font-weight:600;margin-top:3px;margin-left:66px;align-items:center;gap:4px} .of-error-msg.visible{display:flex} .of-error-msg i{font-size:.68rem} /* 자동완성 드롭다운 */ .of-autocomplete-wrap{flex:1;position:relative} .of-autocomplete-list{position:absolute;top:calc(100% + 4px);left:0;right:0;background:#fff;border:1.5px solid var(--p);border-radius:10px;box-shadow:0 8px 24px rgba(99,102,241,.15);z-index:9999;max-height:220px;overflow-y:auto;display:none} .of-autocomplete-list.open{display:block} .of-ac-item{padding:10px 14px;font-size:.88rem;color:var(--t1);cursor:pointer;display:flex;align-items:center;gap:8px;border-bottom:1px solid #F3F4F6} .of-ac-item:last-child{border-bottom:none} .of-ac-item:hover,.of-ac-item.active{background:#EEF2FF;color:var(--p)} .of-ac-item .ac-icon{font-size:.7rem;color:#A5B4FC} .of-ac-item .ac-date{min-width:36px;font-size:.75rem;font-weight:700;color:#9CA3AF;letter-spacing:.02em;flex-shrink:0} .of-ac-highlight{font-weight:700;color:var(--p)} .of-ac-empty{padding:12px 14px;font-size:.82rem;color:var(--t3);text-align:center} .step-nav{display:flex;gap:10px;margin-top:20px}.step-nav .btn-primary,.step-nav .btn-submit{flex:1;justify-content:center} .drop-zone{border:2px dashed var(--border-d);border-radius:var(--r);min-height:140px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--tr);overflow:hidden;margin-bottom:14px} .drop-zone:hover,.drop-zone.drag-over{border-color:var(--p);background:var(--p-l)} .dz-placeholder{text-align:center;padding:28px 16px;pointer-events:none}.dz-placeholder i{font-size:1.9rem;color:var(--t3);margin-bottom:10px;display:block}.dz-placeholder p{font-size:.9rem;font-weight:600;color:var(--t2);margin-bottom:4px}.dz-placeholder span{font-size:.76rem;color:var(--t3)} .dz-preview{display:flex;flex-wrap:wrap;gap:10px;padding:14px;width:100%} .prev-item{position:relative;width:88px;height:88px;border-radius:var(--rs);overflow:hidden;box-shadow:var(--sh);background:var(--bg);flex-shrink:0}.prev-item img{width:100%;height:100%;object-fit:cover} .prev-del{position:absolute;top:4px;right:4px;width:20px;height:20px;background:rgba(0,0,0,.65);color:#fff;border:none;border-radius:50%;cursor:pointer;font-size:.62rem;display:flex;align-items:center;justify-content:center;transition:var(--tr)}.prev-del:hover{background:var(--err)} .prev-add{width:88px;height:88px;border:2px dashed var(--border-d);border-radius:var(--rs);display:flex;flex-direction:column;align-items:center;justify-content:center;cursor:pointer;gap:5px;color:var(--t3);font-size:.7rem;font-weight:600;transition:var(--tr);flex-shrink:0}.prev-add:hover{border-color:var(--p);color:var(--p)}.prev-add i{font-size:1.1rem} .memo-wrap{margin-bottom:4px}.memo-wrap label{display:flex;align-items:center;gap:7px;font-size:.82rem;font-weight:600;color:var(--t2);margin-bottom:7px}.opt{font-weight:400;color:var(--t3)} .memo-wrap textarea{width:100%;padding:10px 13px;border:1.5px solid var(--border);border-radius:var(--rs);font-size:.88rem;color:var(--t1);resize:vertical;outline:none;transition:var(--tr)}.memo-wrap textarea:focus{border-color:var(--p);box-shadow:0 0 0 3px #5046E420} .submit-safe{text-align:center;font-size:.75rem;color:var(--t3);margin-top:12px;display:flex;align-items:center;justify-content:center;gap:6px}.submit-safe i{color:var(--ok)} .guide-box{background:var(--card);border-radius:var(--r);border:1px solid var(--border);padding:16px 18px;margin-top:12px;box-shadow:var(--sh)} .guide-box h4{font-size:.88rem;font-weight:700;color:var(--t2);margin-bottom:10px}.guide-box h4 i{color:var(--p);margin-right:7px} .guide-box ul{list-style:none;display:flex;flex-direction:column;gap:7px}.guide-box li{font-size:.8rem;color:var(--t3);display:flex;gap:8px;line-height:1.5}.guide-box li i{color:var(--ok);margin-top:2px;flex-shrink:0;font-size:.74rem} .info-banner{display:flex;gap:10px;align-items:flex-start;background:var(--p-l);border-radius:var(--rs);padding:12px 14px;font-size:.81rem;color:var(--p-d);line-height:1.6} .info-banner i{flex-shrink:0;margin-top:2px}.info-banner code{background:#fff;padding:1px 5px;border-radius:4px;font-family:monospace;font-size:.78rem} @media(max-width:480px){.header-text h1{font-size:1rem}.pane-card{padding:16px 14px}.screen-body{padding:12px}.ig-label{width:74px;font-size:.72rem;padding:9px 10px}} /* ── 관리자 화면 너비 확장 ── */ .admin-body{padding-top:0;max-width:1400px;width:100%;margin:0 auto;padding-left:24px;padding-right:24px;box-sizing:border-box;background:var(--bg)} /* ★ v9.15: 반응형 대시보드 너비 (1600px+ 에서는 95%, 1920px+ 에서는 최대 너비 사용) */ @media (min-width: 1600px) { .admin-body{max-width:95%} #screenAdmin .app-header .header-inner, #screenAdmin .app-header .admin-header-mainrow, #screenAdmin .app-header .admin-header-topbar{max-width:95%} } @media (min-width: 1920px) { .admin-body{max-width:calc(100% - 48px)} #screenAdmin .app-header .header-inner, #screenAdmin .app-header .admin-header-mainrow, #screenAdmin .app-header .admin-header-topbar{max-width:calc(100% - 48px)} } #screenAdmin .app-header .header-inner, #screenAdmin .app-header .admin-header-mainrow, #screenAdmin .app-header .admin-header-topbar{max-width:1400px;margin:0 auto;width:100%;box-sizing:border-box} .admin-tab-pane{display:none;padding:16px}.admin-tab-pane.active{display:block;animation:fadeIn .18s ease} .admin-section-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:0;position:sticky;top:0;z-index:50;background:rgba(244,246,251,.95);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);padding:9px 16px;border-bottom:1px solid var(--border);margin-left:-16px;margin-right:-16px} .section-count{font-size:.82rem;font-weight:600;color:var(--t2)} .section-index-info{font-size:.75rem;color:var(--t3)} .btn-sm-refresh{padding:6px 12px;border:1.5px solid var(--border);border-radius:8px;background:#fff;font-size:.75rem;font-weight:500;color:var(--t2);cursor:pointer;display:flex;align-items:center;gap:4px;transition:border-color .15s,color .15s,background .15s,transform .15s} .btn-sm-refresh:hover{border-color:var(--p);color:var(--p);transform:translateY(-1px)} .btn-sm-refresh.active{background:#FFF7ED;border-color:#F97316;color:#C2410C} .admin-header-btns{display:flex;align-items:center;gap:6px;flex-wrap:wrap;row-gap:4px} /* 필터 칩 */ /* 필터 드롭다운 */ .dash-filter-wrap{position:relative;margin-right:6px;flex-shrink:0} .dash-filter-btn{padding:6px 12px;border:1.5px solid var(--border);border-radius:8px;background:#fff;font-size:.75rem;font-weight:500;color:var(--t2);cursor:pointer;display:inline-flex;align-items:center;gap:5px;transition:border-color .15s,color .15s,background .15s;white-space:nowrap} .dash-filter-btn:hover{border-color:var(--p);color:var(--p)} .dash-filter-btn.has-filter{border-color:var(--p);color:var(--p);background:var(--p-l)} .dash-filter-btn .filter-badge{background:var(--p);color:#fff;border-radius:99px;font-size:.65rem;font-weight:700;padding:1px 5px;margin-left:2px} .dash-filter-dropdown{display:none;position:absolute;top:calc(100% + 8px);left:0;background:#fff;border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 24px rgba(15,23,42,.12);padding:6px;z-index:200;min-width:140px;flex-direction:column;gap:2px} .dash-filter-dropdown.open{display:flex} .dash-filter-item{display:flex;align-items:center;gap:8px;padding:7px 10px;border-radius:7px;cursor:pointer;font-size:.78rem;font-weight:500;color:var(--t2);transition:background .12s;user-select:none;white-space:nowrap} .dash-filter-item:hover{background:var(--p-l);color:var(--p)} .dash-filter-item input[type=checkbox]{accent-color:var(--p);width:14px;height:14px;cursor:pointer;flex-shrink:0} .dash-filter-item.checked{color:var(--p);font-weight:600} #dashboardWrap{margin-top:0;overflow:hidden} /* 대시보드 스크롤 래퍼 */ #dashboardScrollOuter{overflow-x:auto;overflow-y:visible;width:100%;padding-bottom:4px;margin-top:0;border:1px solid #E5E7EB;border-top:none} #dashboardScrollInner{width:100%;min-width:0;box-sizing:border-box} .btn-sm-toggle{padding:6px 12px;border:1.5px solid var(--border);border-radius:8px;background:#fff;font-size:.75rem;font-weight:500;color:var(--t2);cursor:pointer;display:flex;align-items:center;gap:4px;transition:background .2s,border-color .2s,color .2s,transform .15s} .btn-sm-toggle:hover{border-color:var(--p);color:var(--p);transform:translateY(-1px)}.btn-sm-toggle.active{background:var(--p);border-color:var(--p);color:#fff}.btn-sm-toggle.active:hover{opacity:.85} .hide-done-mode .dash-campaign-block.camp-all-done{display:none} .hide-done-mode .dash-tab-row.tab-done{display:none} .hide-done-mode .dash-tab-row-monthly.tab-done{display:none} .hide-done-mode .dash-tab-row-round.tab-done{display:none} /* 마감업체 숨김: 모든 탭이 완료인 캠페인 행 숨김 (v11.0: 플랫 행 단위) */ .hide-closed-camp-mode .dash-campaign-block.camp-all-done{display:none} .hide-closed-camp-mode .dash-tab-row.camp-all-done{display:none} /* 마감 탭 숨김: is-closed-row 행 숨김 */ .hide-closed-tab-mode .dash-tab-row.is-closed-row{display:none} .hide-closed-tab-mode .dash-tab-row-round.is-closed-row{display:none} /* 마감 탭이 있는 캠페인 헤더 표시 */ .dash-campaign-block.camp-has-closed .dash-campaign-name::after{content:" 📁";font-size:.7rem;opacity:.6} /* ── 캠페인명 숨김 모드: v11.0에서는 캠페인 컬럼만 숨김 ── */ .hide-camp-name-mode .dash-tab-campaign{display:none!important} .hide-camp-name-mode .dash-col-header-cell:nth-child(2){display:none!important} /* 캠페인 헤더 셀 */ /* 레거시 호환 */ .hide-camp-name-mode .dash-campaign-header{display:none!important} .hide-camp-name-mode .dash-campaign-block{border:none!important;border-radius:0!important;margin-bottom:0!important;background:transparent!important} .hide-camp-name-mode .dash-tab-table{max-height:none!important;opacity:1!important;padding:0!important} /* 캠페인명 숨김 모드에서 가로 구분선 색상 일치 */ .hide-camp-name-mode .dash-tab-row{border-bottom:1px solid #D1D5DB} .hide-camp-name-mode .dash-tab-row-round{border-bottom:1px solid #C7D2FE} /* ════════════════════════════════════════════ 반응형: 화면 크기별 자동 컬럼 숨김 ★ v10.4: JS ResizeObserver 방식으로 전환 — CSS 미디어쿼리는 JS 없을 때 폴백 ════════════════════════════════════════════ */ /* 1600px 이하 폴백: JS가 동작하지 않을 때만 적용 */ @media (max-width: 1600px) { .no-js-responsive :root { --dc-capture: 0px; --dc-folder: 0px; --dc-taekhap: 0px; --dc-memo: 0px; } } /* 1366px 이하 폴백 */ @media (max-width: 1366px) { .no-js-responsive :root { --dc-round: 0px; --dc-review: 0px; } } /* ── 차수 서브행 (v8.2) ── */ .dash-tab-row-round{display:grid;grid-template-columns:var(--dash-grid);align-items:stretch;min-height:28px;padding:2px 10px 2px 10px;background:#F8FBFF;border-bottom:1px solid #E0EAFF;font-size:.72rem;gap:0;width:100%;min-width:0} /* 차수 서브행 세로 구분선 */ .dash-tab-row-round>*{border-right:1px solid #DDE3FF;display:flex;align-items:center} .dash-tab-row-round>*:last-child{border-right:none} /* 차수 서브행 세로 구분선 */ .dash-tab-row-round>*{border-right:1px solid #DDE3FF;height:100%;display:flex;align-items:center} .dash-tab-row-round>*:last-child{border-right:none} /* force/closed 모드 padding 보정 */ .closed-mode .dash-tab-row-round{padding-left:6px} .dash-tab-row-round:last-child{border-bottom:none} .dash-round-badge{display:inline-flex;align-items:center;gap:3px;font-size:.65rem;font-weight:700;padding:1px 6px;border-radius:10px;background:var(--p-l);color:var(--p);border:1px solid #C7D5FF;white-space:nowrap} .dash-round-badge.round-done{background:#F0FDF4;color:#166534;border-color:#BBF7D0} /* 차수 컬럼 배지 */ .dash-round-col-badge{display:inline-flex;align-items:center;justify-content:center;font-size:.63rem;font-weight:700;padding:2px 6px;border-radius:8px;white-space:nowrap;line-height:1} .dash-round-col-badge.badge-solo{background:#F3F4F6;color:#6B7280;border:1px solid #D1D5DB} /* 단독 */ .dash-round-col-badge.badge-nth{background:#EEF2FF;color:#4338CA;border:1px solid #C7D2FE} /* N차 */ /* ── 마감 버튼 ── */ .btn-closed{padding:5px 10px;border:1.5px solid #6366F1;border-radius:20px;background:#fff;font-size:.75rem;font-weight:600;color:#4F46E5;cursor:pointer;display:flex;align-items:center;gap:4px;transition:background .2s,border-color .2s,color .2s;white-space:nowrap} .btn-closed:hover{background:#EEF2FF;border-color:#4F46E5} .btn-closed.active{background:#4F46E5;border-color:#4F46E5;color:#fff} .btn-closed-exec{padding:5px 12px;border:none;border-radius:20px;background:#4F46E5;font-size:.75rem;font-weight:700;color:#fff;cursor:pointer;display:flex;align-items:center;gap:4px;transition:opacity .15s;white-space:nowrap;animation:fadeInScale .18s ease} .btn-closed-exec:hover{opacity:.85} /* ★ 파일 존재 확인 버튼 */ .btn-check-files{padding:5px 10px;border:1.5px solid #D97706;border-radius:20px;background:#fff;font-size:.75rem;font-weight:600;color:#D97706;cursor:pointer;display:flex;align-items:center;gap:4px;transition:background .2s,color .2s;white-space:nowrap} .btn-check-files:hover{background:#FFFBEB;border-color:#B45309;color:#B45309} /* ★ 파일확인 모달 */ #checkFilesModal{display:none;position:fixed;inset:0;z-index:9000;background:rgba(0,0,0,.45);align-items:center;justify-content:center} #checkFilesModal.open{display:flex} .check-files-box{background:#fff;border-radius:16px;padding:28px 28px 22px;width:min(460px,94vw);box-shadow:0 8px 32px rgba(0,0,0,.18);display:flex;flex-direction:column;gap:14px} .check-files-box h3{font-size:1rem;font-weight:700;color:#1F2937;margin:0;display:flex;align-items:center;gap:8px} .check-files-pw-row{display:flex;gap:8px} .check-files-pw-row input{flex:1;padding:9px 12px;border:1.5px solid #D1D5DB;border-radius:8px;font-size:.88rem;outline:none} .check-files-pw-row input:focus{border-color:#7C3AED} .check-files-pw-row button{padding:9px 18px;border:none;border-radius:8px;background:#7C3AED;color:#fff;font-weight:700;font-size:.85rem;cursor:pointer;white-space:nowrap} .check-files-pw-row button:hover{background:#6D28D9} #checkFilesResult{max-height:300px;overflow-y:auto;font-size:.82rem} .cfr-item{padding:7px 10px;border-radius:7px;margin-bottom:5px;line-height:1.5} .cfr-item.restored{background:#ECFDF5;border-left:3px solid #10B981;color:#065F46} .cfr-item.error{background:#FEF2F2;border-left:3px solid #EF4444;color:#991B1B} .cfr-item.empty{background:#F9FAFB;color:#6B7280;text-align:center;padding:18px} .cfr-summary{padding:8px 10px;border-radius:7px;font-weight:700;font-size:.85rem;display:flex;align-items:center;gap:6px} .cfr-summary.ok{background:#D1FAE5;color:#065F46} .cfr-summary.warn{background:#FEF3C7;color:#92400E} .cfr-summary.running{background:#EDE9FE;color:#5B21B6} @keyframes fadeInScale{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:scale(1)}} .closed-cb-wrap{display:flex;align-items:center;justify-content:center;overflow:hidden;position:relative;min-width:0} .closed-mode .closed-cb-wrap{border-right:2px solid #C7D2FE} .closed-cb{width:15px;height:15px;accent-color:#4F46E5;cursor:pointer;flex-shrink:0} .dash-tab-row.is-closed-row{background:#F5F3FF!important} .dash-tab-row.is-closed-row .dash-tab-name a,.dash-tab-row.is-closed-row .dash-tab-name span{color:#4F46E5!important;text-decoration:line-through;opacity:.65} /* ── 긴급 경고: startDate 기준 25일 이상 경과 + 미제출 잔여 ── */ .dash-tab-row.urgent-overdue{ background:#FFF5F5!important; border-left:4px solid #EF4444!important; padding-left:10px!important; } .dash-tab-row.urgent-overdue .dash-tab-name a, .dash-tab-row.urgent-overdue .dash-tab-name span{color:#B91C1C!important;font-weight:700!important} .badge-overdue{ display:inline-flex;align-items:center;gap:3px; background:#FEE2E2;color:#B91C1C;border:1px solid #FCA5A5; border-radius:5px;font-size:.6rem;font-weight:800; padding:1px 5px;margin-left:5px;white-space:nowrap;vertical-align:middle; animation:overdue-pulse 2s ease-in-out infinite; } @keyframes overdue-pulse{ 0%,100%{opacity:1} 50%{opacity:.55} } /* ── v9.9: D-Day 배지 ── */ .dday-badge{ display:inline-flex;align-items:center;gap:2px; border-radius:5px;font-size:.6rem;font-weight:700; padding:1px 5px;white-space:nowrap;vertical-align:middle;border:1px solid; } .dday-over{background:#FEE2E2;color:#B91C1C;border-color:#FCA5A5;animation:overdue-pulse 2s ease-in-out infinite} .dday-near{background:#FEF3C7;color:#92400E;border-color:#FCD34D} .dday-normal{background:#EFF6FF;color:#1D4ED8;border-color:#BFDBFE} .dday-done{background:#F0FDF4;color:#065F46;border-color:#A7F3D0} /* ── v9.9: 메모 버튼 ── */ .btn-tab-memo{ display:inline-flex;align-items:center;justify-content:center; background:none;border:1px solid #E5E7EB;border-radius:5px; padding:2px 5px;font-size:.65rem;color:#6B7280;cursor:pointer; transition:all .15s; } .btn-tab-memo:hover{background:#EEF2FF;color:#6366F1;border-color:#C7D2FE} .btn-tab-memo.has-memo{color:#6366F1;background:#EEF2FF;border-color:#A5B4FC} /* ── v9.9: 메모 모달 ── */ .memo-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:3500;display:none;align-items:center;justify-content:center} .memo-overlay.open{display:flex} .memo-modal{background:#fff;border-radius:16px;width:420px;max-width:95vw;max-height:80vh;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(0,0,0,.18)} .memo-modal-head{padding:14px 18px 10px;border-bottom:1px solid #F3F4F6;display:flex;align-items:center;gap:8px} .memo-modal-title{font-size:.9rem;font-weight:700;color:#111827;flex:1} .memo-chat-area{flex:1;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px;min-height:0} .memo-bubble{max-width:80%;padding:8px 12px;border-radius:12px;font-size:.78rem;line-height:1.5;word-break:break-word} .memo-bubble.admin{align-self:flex-end;background:#EEF2FF;color:#3730A3;border-bottom-right-radius:3px} .memo-bubble.staff{align-self:flex-start;background:#F0FDF4;color:#065F46;border-bottom-left-radius:3px} .memo-bubble-meta{font-size:.65rem;opacity:.7;margin-top:3px} .memo-bubble.admin .memo-bubble-meta{text-align:right} .memo-input-area{padding:10px 14px;border-top:1px solid #F3F4F6;display:flex;gap:8px} .memo-input-area textarea{flex:1;border:1px solid #E5E7EB;border-radius:8px;padding:7px 10px;font-size:.8rem;resize:none;height:54px;font-family:inherit;outline:none} .memo-input-area textarea:focus{border-color:#6366F1;box-shadow:0 0 0 2px rgba(99,102,241,.12)} .memo-send-btn{background:#6366F1;color:#fff;border:none;border-radius:8px;padding:0 14px;font-size:.8rem;font-weight:700;cursor:pointer;white-space:nowrap} .memo-send-btn:hover{background:#4F46E5} .memo-empty{text-align:center;color:#9CA3AF;font-size:.78rem;padding:20px 0} /* 마감 확인 팝업 */ .closed-confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:3000;display:none;align-items:center;justify-content:center} .closed-confirm-overlay.open{display:flex} .closed-confirm-box{background:#fff;border-radius:18px;padding:24px 22px;max-width:380px;width:90%;box-shadow:0 12px 48px rgba(15,23,42,.16);animation:slideUp .2s ease} .closed-confirm-title{font-size:.95rem;font-weight:700;color:var(--p);margin-bottom:10px;display:flex;align-items:center;gap:6px} .closed-confirm-msg{font-size:.82rem;color:var(--t2);line-height:1.6;margin-bottom:12px} .closed-confirm-list{max-height:160px;overflow-y:auto;background:var(--p-l);border-radius:10px;padding:8px 10px;font-size:.8rem;color:var(--p);margin-bottom:14px} .closed-confirm-list-item{padding:3px 0;border-bottom:1px solid #D0DCFF;display:flex;align-items:center;gap:6px} .closed-confirm-list-item:last-child{border-bottom:none} .closed-confirm-list-item.remove-item{color:#EF4444} .closed-confirm-btns{display:flex;gap:8px;justify-content:flex-end} .closed-confirm-cancel{padding:8px 16px;border:1.5px solid var(--border);border-radius:8px;background:#fff;font-size:.82rem;font-weight:600;color:var(--t2);cursor:pointer;transition:background .15s} .closed-confirm-ok{padding:8px 18px;border:none;border-radius:8px;background:var(--p);font-size:.82rem;font-weight:700;color:#fff;cursor:pointer;transition:background .15s} .closed-confirm-ok:hover{background:var(--p-d)} .admin-loading,.admin-empty,.admin-error{padding:36px 20px;text-align:center;font-size:.85rem;color:var(--t3);display:flex;flex-direction:column;align-items:center;gap:10px} .admin-loading i{font-size:1.4rem;color:var(--p)}.admin-empty i{font-size:2rem;color:#D1D5DB}.admin-error i{font-size:1.4rem;color:var(--err)}.admin-error{color:var(--err)} /* ── 대시보드 요약/캠페인 ── */ .dashboard-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:10px} .summary-card{background:#fff;border:1px solid var(--border);border-radius:16px;padding:14px 10px;text-align:center;display:flex;flex-direction:column;gap:4px;box-shadow:var(--sh);transition:transform .2s ease,box-shadow .2s ease} .summary-card:hover{transform:translateY(-2px);box-shadow:var(--shm)} .summary-num{font-size:1.35rem;font-weight:700;line-height:1}.summary-label{font-size:.68rem;color:var(--t3);font-weight:500} .summary-total .summary-num{color:var(--t1)}.summary-done .summary-num{color:var(--ok)}.summary-pending .summary-num{color:var(--warn)}.summary-rate .summary-num{color:var(--p)} .dash-campaign-block{background:#fff;border:1px solid var(--border);border-radius:14px;margin-bottom:10px;box-shadow:var(--sh);overflow:hidden;transition:box-shadow .2s ease} .dash-campaign-block:hover{box-shadow:var(--shm)} /* 컬럼 헤더: overflow:hidden → 셀 내용이 컬럼 너비를 벗어나지 않게 */ .dash-campaign-header{display:flex;align-items:center;justify-content:space-between;padding:11px 14px;background:linear-gradient(135deg,#EEF4FF 0%,#E8F0FF 100%);border-bottom:1px solid #D0DCFF;cursor:pointer;user-select:none;transition:background .18s} .dash-campaign-header:hover{background:linear-gradient(135deg,#E5EDFF 0%,#DAEAFF 100%)} .dash-campaign-left{display:flex;align-items:center;gap:7px;flex:1;min-width:0} .dash-toggle-icon{font-size:.72rem;color:var(--t3);flex-shrink:0;transition:transform .22s ease}.dash-toggle-icon.rotated{transform:rotate(-90deg)} .dash-campaign-name{font-size:.84rem;font-weight:600;color:var(--t1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dash-campaign-total{font-size:.78rem;color:var(--p);font-weight:600;flex-shrink:0;margin-left:8px} /* 캠페인별 인덱스 갱신 버튼 */ .btn-camp-refresh{display:inline-flex;align-items:center;gap:3px;font-size:.68rem;font-weight:600;color:var(--p);background:transparent;border:1px solid #C7D5FF;border-radius:6px;padding:2px 7px;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s} .btn-camp-refresh:hover{background:var(--p-l);color:var(--p-d);border-color:var(--p-m)} .btn-camp-refresh.loading{color:#9CA3AF;border-color:#E5E7EB;pointer-events:none} .btn-camp-refresh i{font-size:.6rem} /* 캠페인 헤더 광고주 URL 복사 버튼 */ .btn-camp-viewer{display:inline-flex;align-items:center;gap:3px;font-size:.68rem;font-weight:600;color:var(--p);background:var(--p-l);border:1px solid #C7D5FF;border-radius:6px;padding:2px 7px;cursor:pointer;flex-shrink:0;transition:background .15s,color .15s,border-color .15s} .btn-camp-viewer:hover{background:var(--p);color:#fff;border-color:var(--p)} .btn-camp-viewer.loading{opacity:.6;cursor:wait;pointer-events:none} .btn-camp-viewer.copied{background:#059669;border-color:#059669;color:#fff} .btn-camp-viewer.error{background:#FEE2E2;border-color:#FCA5A5;color:#DC2626} .btn-camp-viewer i{font-size:.6rem} .dash-tab-table{overflow:hidden;max-height:2000px;transition:max-height .28s ease,opacity .2s ease;opacity:1;padding:4px 0} .dash-tab-table.collapsed{max-height:0;opacity:0;padding:0} /* ── 인덱스 컬럼 헤더 (고정) ── */ /* 그리드 구조 (21열 = closedcb + 20열): [closedcb] 탭명 상품명 캡처폴더 리뷰폴더 차수 시작일 주문시간대 리뷰타입 폼링크 담당 진행률 리뷰 입금 진행방식 입금명 이체은행 택대 비고 부가정보 ⚙ 평소: 0px 0px 280px 200px 65px 65px 40px 65px 85px 50px 35px 50px 70px 65px 45px 90px 140px 100px 45px 185px 110px 90px 마감: 0px 28px (조정) ... */ .dash-col-header{ display:grid;grid-template-columns:var(--dash-grid); align-items:center;gap:0;padding:0 10px; background:#F0F3FA; border:1px solid #D0DCFF;border-radius:0; margin-bottom:0;min-height:30px;box-sizing:border-box; position:sticky;top:0px;z-index:40; box-shadow:0 1px 3px rgba(35,71,204,.08); width:100%;min-width:0;will-change:transform;margin-top:0;overflow:hidden } /* force/closed 모드 padding 보정 */ .closed-mode .dash-col-header{padding-left:6px} .dash-col-header-cell{ font-size:.64rem;font-weight:700;color:#3B4B7A; white-space:nowrap;overflow:visible;text-overflow:ellipsis; padding:0 4px;display:flex;align-items:center;gap:3px; position:relative;user-select:none;cursor:pointer; border-radius:0;transition:background .12s,color .12s; border-right:1px solid #D0DCFF;height:100% } .dash-col-header-cell:last-child{border-right:none} .dash-col-header-cell:hover{background:rgba(35,71,204,.1);color:var(--p)} /* ── 컬럼 선택(활성) 상태 ── */ .dash-col-header-cell.col-active{background:var(--p)!important;color:#fff!important} .dash-col-header-cell.closed-cb-wrap{overflow:hidden;padding:0;justify-content:center;border-right:2px solid transparent} .closed-mode .closed-cb-wrap{border-right:2px solid #C7D2FE} .closed-mode .dash-col-header-cell.closed-cb-wrap{background:#EEF2FF} /* 마감 모드: 탭명 셀 왼쪽 구분선 */ .closed-mode .dash-col-header-cell[data-col-key='tabname']{border-left:2px solid #E5E7EB;padding-left:6px} .closed-mode .dash-tab-name{border-left:2px solid #E5E7EB;padding-left:8px} /* ── 컬럼 드래그 리사이즈 핸들 (엑셀 스타일) ── */ /* 헤더 셀 우측 경계에 절대배치 - 호버 시 ↔ 커서 + 파란 세로선 표시 */ .col-drag-handle{ position:absolute;right:-5px;top:0;width:10px;height:100%; cursor:col-resize;z-index:20; display:flex;align-items:center;justify-content:center; /* 호버 영역 확장용 투명 배경 */ } /* 세로 구분선 (평소 연한 회색, 호버/드래그 시 보라) */ .col-drag-handle::before{ content:''; display:block;width:2px;height:70%; background:rgba(0,0,0,0); border-radius:2px; transition:background .1s,box-shadow .1s; } .col-drag-handle:hover::before{ background:var(--p); box-shadow:0 0 0 1px rgba(80,70,228,.15); } .col-drag-handle.dragging::before{ background:var(--p); box-shadow:0 0 0 2px rgba(80,70,228,.2); } /* 드래그 중 전체 커서 고정 & 텍스트 선택 차단 */ body.col-resizing{cursor:col-resize!important;user-select:none!important} body.col-resizing *{cursor:col-resize!important;pointer-events:none!important} body.col-resizing .col-drag-handle{pointer-events:auto!important} /* 드래그 중 현재 컬럼 헤더 강조 */ .dash-col-header-cell.col-drag-active{background:rgba(80,70,228,.1)!important;color:var(--p)!important} /* 드래그 실시간 너비 툴팁 */ #colDragTooltip{ position:fixed;z-index:9600;pointer-events:none; background:var(--p);color:#fff; font-size:.72rem;font-weight:700; padding:3px 8px;border-radius:6px; box-shadow:0 2px 8px rgba(80,70,228,.3); white-space:nowrap;display:none; transform:translate(-50%,-130%); } /* 드래그 수직 가이드라인 */ #colDragLine{ position:fixed;z-index:9599;pointer-events:none; top:0;bottom:0;width:2px; background:var(--p);opacity:.6; display:none; } /* ══════════════════════════════════════════════ ★ 열 숨김 시스템 (col-hide-{key}) ══════════════════════════════════════════════ */ /* 숨김 클래스: --dc-{key}를 0px으로 덮어씌움 + overflow hidden */ .col-hidden-campaign { --dc-campaign:0px!important; overflow:hidden!important; } .col-hidden-product { --dc-product:0px!important; overflow:hidden!important; } .col-hidden-capture { --dc-capture:0px!important; overflow:hidden!important; } .col-hidden-folder { --dc-folder:0px!important; overflow:hidden!important; } .col-hidden-round { --dc-round:0px!important; overflow:hidden!important; } .col-hidden-date { --dc-date:0px!important; overflow:hidden!important; } .col-hidden-time { --dc-time:0px!important; overflow:hidden!important; } .col-hidden-review { --dc-review:0px!important; overflow:hidden!important; } .col-hidden-formlink { --dc-formlink:0px!important; overflow:hidden!important; } .col-hidden-manager { --dc-manager:0px!important; overflow:hidden!important; } .col-hidden-bar { --dc-bar:0px!important; overflow:hidden!important; } .col-hidden-nums { --dc-nums:0px!important; overflow:hidden!important; } .col-hidden-payment { --dc-payment:0px!important; overflow:hidden!important; } .col-hidden-income { --dc-income:0px!important; overflow:hidden!important; } .col-hidden-depositname { --dc-depositname:0px!important; overflow:hidden!important; } .col-hidden-bank { --dc-bank:0px!important; overflow:hidden!important; } .col-hidden-taekhap { --dc-taekhap:0px!important; overflow:hidden!important; } .col-hidden-memo { --dc-memo:0px!important; overflow:hidden!important; } .col-hidden-enddate { --dc-enddate:0px!important; overflow:hidden!important; } /* 열 숨김 토글 드롭다운 */ #colVisDropdown { position:absolute; top:calc(100% + 6px); right:0; background:#fff; border:1.5px solid #E0E7FF; border-radius:12px; box-shadow:0 8px 28px rgba(30,27,75,.18); min-width:210px; z-index:10000; overflow:hidden; animation:fadeInDown .15s ease; padding:8px 0; } .col-vis-header { font-size:.65rem; font-weight:700; color:var(--t3); padding:4px 14px 6px; letter-spacing:.04em; text-transform:uppercase; } /* 토글 상태 배너 */ .col-vis-toggle-status { display:flex; align-items:center; gap:6px; margin:0 10px 4px; padding:5px 10px; border-radius:7px; font-size:.73rem; font-weight:600; background:#FEF9C3; border:1px solid #FDE68A; color:#92400E; transition:all .2s; } .col-vis-toggle-status.is-hidden { background:#DBEAFE; border-color:#93C5FD; color:#1E40AF; } .col-vis-item { display:flex; align-items:center; gap:8px; padding:7px 14px; cursor:pointer; transition:background .1s; font-size:.8rem; color:#374151; } .col-vis-item:hover { background:#F5F3FF; } /* 선택된 항목 강조 */ .col-vis-item.is-selected { background:#EEF2FF; } .col-vis-item input[type=checkbox] { cursor:pointer; accent-color:var(--p); width:14px; height:14px; } .col-vis-sep { border:none; border-top:1px solid #F3F4F6; margin:4px 0; } /* 저장 + 초기화 버튼 영역 */ .col-vis-footer { display:flex; flex-direction:column; gap:5px; padding:6px 10px 6px; } /* 열 숨기기/표시 토글 버튼 (메인) */ .col-vis-toggle-btn { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; padding:8px 0; border-radius:8px; border:none; font-size:.8rem; font-weight:700; cursor:pointer; transition:all .18s; font-family:inherit; background:#3B82F6; color:#fff; box-shadow:0 2px 6px rgba(59,130,246,.3); } .col-vis-toggle-btn:hover { background:#2563EB; box-shadow:0 3px 10px rgba(37,99,235,.4); } .col-vis-toggle-btn.is-hidden-mode { background:#EF4444; box-shadow:0 2px 6px rgba(239,68,68,.3); } .col-vis-toggle-btn.is-hidden-mode:hover { background:#DC2626; } /* 선택 저장 버튼 */ .col-vis-save { display:flex; align-items:center; justify-content:center; gap:5px; width:100%; padding:6px 0; border-radius:7px; border:1.5px solid #6366F1; background:#EEF2FF; font-size:.74rem; font-weight:700; color:#4338CA; cursor:pointer; transition:all .15s; font-family:inherit; } .col-vis-save:hover { background:#E0E7FF; border-color:#4338CA; } .col-vis-reset { display:flex; align-items:center; justify-content:center; gap:5px; width:100%; padding:5px 0; border-radius:7px; border:1.5px solid #E0E7FF; background:#F9FAFB; font-size:.72rem; font-weight:600; color:#6B7280; cursor:pointer; transition:all .15s; font-family:inherit; } .col-vis-reset:hover { background:#F3F4F6; border-color:#D1D5DB; } /* 선택 카운트 뱃지 */ .col-vis-count { display:inline-flex; align-items:center; justify-content:center; background:#6366F1; color:#fff; border-radius:10px; font-size:.6rem; font-weight:700; min-width:16px; height:16px; padding:0 4px; margin-left:2px; } /* 열 숨김 버튼 (툴바) */ .btn-col-vis { display:inline-flex; align-items:center; gap:5px; padding:6px 12px; border-radius:8px; background:#F0FDF4; border:1.5px solid #6EE7B7; font-size:.75rem; font-weight:700; color:#065F46; cursor:pointer; white-space:nowrap; transition:all .15s; font-family:inherit; position:relative; } .btn-col-vis:hover { background:#D1FAE5; border-color:#10B981; } /* 선택된 열이 있을 때 */ .btn-col-vis.has-selected { background:#EEF2FF; border-color:#6366F1; color:#4338CA; } /* 현재 숨김 상태일 때 */ .btn-col-vis.is-cols-hidden { background:#FEE2E2; border-color:#FCA5A5; color:#991B1B; } /* ══════════════════════════════════════════════ ★ 대시보드 빠른 검색창 ══════════════════════════════════════════════ */ .dash-search-bar { display: flex; align-items: center; gap: 10px; padding: 8px 16px; background: rgba(244,246,251,.95); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: none; position: sticky; top: 0px; z-index: 45; margin-left: -16px; margin-right: -16px; } .dash-search-wrap { position: relative; flex: 1; max-width: 520px; } .dash-search-wrap .search-icon { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); color: var(--p-m); font-size: .8rem; pointer-events: none; } #dashSearchInput { width: 100%; padding: 7px 36px 7px 32px; border: 1.5px solid #D0DCFF; border-radius: 10px; font-size: .82rem; font-family: inherit; color: var(--t1); background: #F8FAFF; outline: none; transition: border-color .15s, box-shadow .15s, background .15s; } #dashSearchInput:focus { border-color: var(--p); background: #fff; box-shadow: 0 0 0 3px rgba(35,71,204,.1); } #dashSearchInput.has-query { border-color: var(--p); background: #fff; } .dash-search-clear { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none; border: none; color: #94A3B8; cursor: pointer; font-size: .8rem; padding: 2px 4px; border-radius: 4px; display: none; transition: color .12s; } .dash-search-clear:hover { color: var(--err); } .dash-search-clear.visible { display: block; } .dash-search-count { font-size: .78rem; font-weight: 700; color: var(--p); white-space: nowrap; min-width: 70px; padding: 4px 10px; background: var(--p-l); border-radius: 8px; border: 1px solid #C7D5FF; display: none; } .dash-search-count.visible { display: block; } .dash-search-count.no-result { color: var(--err); background: #FEE2E2; border-color: #FECACA; } .dash-search-hint { font-size: .72rem; color: var(--t3); white-space: nowrap; } /* 검색 활성 시 매칭 없는 블록 숨김 (JS가 직접 style로 처리) */ /* ══════════════════════════════════════════════ ★ 열 정렬 — 헤더 정렬 아이콘 ══════════════════════════════════════════════ */ .col-sort-icon { font-size:.55rem; opacity:.4; margin-left:2px; display:inline-block; transition:opacity .15s, color .15s; pointer-events:none; } .dash-col-header-cell.sort-asc .col-sort-icon, .dash-col-header-cell.sort-desc .col-sort-icon { opacity:1; color:var(--p); } .dash-col-header-cell.sort-asc { background:rgba(80,70,228,.07)!important; color:var(--p-d)!important; } .dash-col-header-cell.sort-desc { background:rgba(80,70,228,.07)!important; color:var(--p-d)!important; } /* ══════════════════════════════════════════════ ★ 메모 미리보기 툴팁 ══════════════════════════════════════════════ */ #memoPreviewTooltip { position:fixed; z-index:9800; pointer-events:none; background:#1E1B4B; color:#fff; font-size:.75rem; line-height:1.55; padding:8px 12px; border-radius:9px; box-shadow:0 6px 20px rgba(30,27,75,.28); max-width:240px; word-break:break-word; display:none; white-space:pre-wrap; } #memoPreviewTooltip::after { content:''; position:absolute; bottom:-5px; left:16px; width:10px; height:10px; background:#1E1B4B; transform:rotate(45deg); } /* ★ v11.1: 엑셀형 플랫 그리드 (22열 = closedcb + campaign + 20열): [cb] 캠페인 탭명 상품명 캡처폴더 리뷰폴더 차수 시작일 주문시간대 리뷰타입 폼링크 담당자 진행률 리뷰 입금 진행방식 입금명 이체은행 택대 비고 부가정보 ⚙ */ /* ★ v11.1: 엑셀형 플랫 테이블 컨테이너 */ .dash-flat-table{width:100%;min-width:0} /* ── 행: 22열 그리드 ── */ .dash-tab-row{ display:grid;grid-template-columns:var(--dash-grid); align-items:stretch;gap:0;padding:0 10px; border-bottom:1px solid #E5E7EB; min-height:32px;box-sizing:border-box; width:100%;min-width:0; transition:background .1s; font-size:.74rem; } .dash-tab-row:hover{background:#EFF6FF!important} /* ★ v11.1: 캠페인 스트라이프 — 교대 배경색으로 그룹 시각 구분 */ .dash-tab-row.camp-stripe-even{background:#FFFFFF} .dash-tab-row.camp-stripe-odd{background:#F8FAFB} /* ★ v11.1: 캠페인 경계 행에 상단 구분선 추가 */ .dash-tab-row.camp-first-row{border-top:2px solid #C7D2FE} /* ★ v11.1: 캠페인명 셀 — 엑셀 고정열처럼 */ .dash-tab-campaign{ font-size:.72rem;color:#059669;font-weight:700; overflow:hidden;text-overflow:ellipsis;white-space:nowrap; padding:0 6px;min-width:0;display:flex;align-items:center; background:inherit; } .dash-cell-campaign{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0;display:flex;align-items:center;gap:4px} /* 🔄 캠페인 인덱스 갱신 버튼 */ .btn-rebuild-sheet{ flex-shrink:0;width:18px;height:18px;padding:0;border:none;border-radius:4px; background:transparent;color:#9CA3AF;cursor:pointer;font-size:.55rem; display:inline-flex;align-items:center;justify-content:center; transition:all .15s ease; } .btn-rebuild-sheet:hover{background:#ECFDF5;color:#059669;transform:scale(1.15)} .btn-rebuild-sheet.spinning{color:#059669;pointer-events:none} .btn-rebuild-sheet.spinning i{animation:spin .8s linear infinite} @keyframes spin{from{transform:rotate(0deg)}to{transform:rotate(360deg)}} /* ── 세로 구분선 ── */ .dash-tab-row>*{border-right:1px solid #EEF2FF;display:flex;align-items:center;min-width:0;overflow:hidden} .dash-tab-row>*:last-child{border-right:none} /* force/closed 모드 padding 보정 */ .closed-mode .dash-tab-row{padding-left:6px} /* ── 탭명 셀 ── */ .dash-tab-name{font-size:.76rem;color:var(--t1);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px 6px;min-width:0;display:flex;align-items:center} .closed-mode .dash-tab-name{border-left:2px solid #E5E7EB;padding-left:8px} .dash-tab-name>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 날짜 열 – 별도 고정폭 */ .dash-tab-date-col{display:flex;align-items:center;justify-content:flex-start;padding:0 2px;overflow:hidden;min-width:0} .tab-start-date{font-size:.62rem;color:#475569;background:#F1F5FF;border:1px solid #D0DCFF;border-radius:6px;padding:2px 4px;white-space:nowrap;display:inline-flex;align-items:center;gap:2px;font-weight:600;letter-spacing:.01em;justify-content:center;overflow:hidden;max-width:58px;width:100%;cursor:pointer;transition:background .14s,border-color .14s} .tab-start-date:hover{background:#E0EAFF;border-color:var(--p);color:var(--p)} /* 수동 수정된 시작일: 파란색 계열로 구분 */ .tab-start-date.manual-date{background:#EFF6FF;border-color:#93C5FD;color:#1D4ED8} .tab-start-date.manual-date:hover{background:#DBEAFE;border-color:#3B82F6} /* 빈 시작일도 클릭 가능하도록 */ .tab-date-empty{font-size:.62rem;color:#D1D5DB;cursor:pointer;padding:2px 4px;border-radius:4px;border:1px dashed #E5E7EB;display:inline-flex;align-items:center;gap:2px;transition:background .12s,border-color .12s;white-space:nowrap} .tab-date-empty:hover{background:#F5F3FF;border-color:#A78BFA;color:#7C3AED} /* ── 시작일 편집 팝업 ── */ #startDatePopup{position:fixed;z-index:4000;background:#fff;border:1.5px solid #C7D2FE;border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,.16);padding:14px 16px;min-width:220px;display:none} #startDatePopup.visible{display:block} .sdp-title{font-size:.75rem;font-weight:700;color:#4338CA;margin-bottom:10px;display:flex;align-items:center;gap:6px} .sdp-selects{display:flex;gap:6px;margin-bottom:10px} .sdp-selects select{flex:1;border:1.5px solid #C7D2FE;border-radius:7px;padding:5px 4px;font-size:.78rem;font-weight:600;color:#1E40AF;background:#F0F4FF;outline:none;cursor:pointer;text-align:center} .sdp-selects select:focus{border-color:#6366F1} .sdp-btns{display:flex;gap:6px} .sdp-btn-apply{flex:1;padding:6px;border:none;border-radius:7px;background:#6366F1;color:#fff;font-size:.78rem;font-weight:700;cursor:pointer;transition:opacity .15s} .sdp-btn-apply:hover{opacity:.85} .sdp-btn-reset{padding:6px 10px;border:1.5px solid #E5E7EB;border-radius:7px;background:#fff;color:#6B7280;font-size:.75rem;font-weight:600;cursor:pointer;transition:background .12s} .sdp-btn-reset:hover{background:#F3F4F6;color:#374151} .sdp-btn-cancel{padding:6px 10px;border:1.5px solid #E5E7EB;border-radius:7px;background:#fff;color:#9CA3AF;font-size:.75rem;font-weight:600;cursor:pointer;transition:background .12s} .sdp-btn-cancel:hover{background:#F3F4F6} /* 단독 셀 스타일 (배지 해체 후 각 열) */ .dash-cell-name{font-size:.7rem;color:#4C1D95;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px;min-width:0} .dash-cell-time{font-size:.68rem;color:#1D4ED8;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px;min-width:0} .dash-cell-review{font-size:.68rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px;min-width:0} .dash-cell-manager{font-size:.68rem;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px;min-width:0;text-align:center} .dash-cell-payment{font-size:.68rem;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px;min-width:0} .dash-cell-taekhap{display:flex;align-items:center;justify-content:center;padding:0 2px;min-width:0} /* ── 비고 셀 ── */ .dash-cell-memo{font-size:.68rem;color:var(--t2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 3px;min-width:0} /* ── 리뷰폴더 링크 ── */ .dash-folder-link{display:inline-flex;align-items:center;justify-content:center;gap:3px;font-size:.65rem;font-weight:700;color:#1D4ED8;background:#EFF6FF;border:1px solid #BFDBFE;border-radius:5px;padding:2px 5px;text-decoration:none;white-space:nowrap;transition:background .12s} .dash-folder-link:hover{background:#DBEAFE;color:#1E40AF} /* 값이 없는 셀만 hover 시 클릭 유도 표시 */ .qe-cell{cursor:pointer;border-radius:2px;transition:background .1s,box-shadow .1s;position:relative} .qe-cell:hover{background:#F0F4FF;box-shadow:inset 0 0 0 1px #93A3CF} .qe-cell:hover::after{content:"✏";position:absolute;top:50%;right:2px;transform:translateY(-50%);font-size:.55rem;color:#818CF8;pointer-events:none;opacity:.7} /* 값이 있는 셀도 클릭·수정 가능 (qe-cell과 동일 스타일) */ .qe-cell-filled{cursor:pointer;border-radius:5px;transition:background .12s,box-shadow .12s;position:relative} .qe-cell-filled:hover{background:#EEF2FF;box-shadow:inset 0 0 0 1.5px #818CF8} .qe-cell-filled:hover::after{content:"✏";position:absolute;top:50%;right:3px;transform:translateY(-50%);font-size:.58rem;color:#818CF8;pointer-events:none;opacity:.8} /* 인라인 팝업 */ .qe-popup{position:fixed;z-index:3100;background:#fff;border:1px solid #D8E3FF;border-radius:14px;box-shadow:0 8px 32px rgba(21,48,136,.15),0 2px 8px rgba(15,23,42,.08);padding:12px 14px;min-width:170px;max-width:280px} .qe-popup-title{font-size:.7rem;font-weight:700;color:var(--t2);margin-bottom:7px;display:flex;align-items:center;gap:5px} .qe-popup input[type=text]{width:100%;border:1.5px solid var(--border);border-radius:8px;padding:7px 10px;font-size:.8rem;outline:none;box-sizing:border-box;margin-bottom:7px} .qe-popup input[type=text]:focus{border-color:var(--p);box-shadow:0 0 0 3px rgba(35,71,204,.1)} .qe-opt-row{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px} .qe-opt{padding:5px 10px;border:1.5px solid var(--border);border-radius:8px;font-size:.72rem;font-weight:600;cursor:pointer;background:#fff;color:var(--t2);transition:background .14s,border-color .14s,color .14s;white-space:nowrap} .qe-opt:hover{border-color:var(--p);color:var(--p);background:var(--p-l)} .qe-opt.sel{background:var(--p);border-color:var(--p);color:#fff} .qe-apply{width:100%;padding:7px;border:none;border-radius:8px;background:var(--p);color:#fff;font-size:.78rem;font-weight:700;cursor:pointer;transition:opacity .15s,background .15s} .qe-apply:hover{background:var(--p-d)} /* 게이지 열 */ .dash-tab-bar-col{padding:2px 6px;display:flex;align-items:center;overflow:hidden;min-width:0;width:100%;flex-direction:column;gap:1px} .dash-tab-link{color:var(--p);text-decoration:none;font-size:.74rem;font-weight:500;transition:opacity .15s;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;max-width:100%} .dash-tab-link:hover{opacity:.75;text-decoration:underline}.dash-tab-ext{font-size:.6rem;opacity:.7} .dash-tab-bar-wrap{height:7px;background:#E8EEFF;border-radius:99px;overflow:hidden;width:calc(100% - 4px);margin:0 2px;position:relative;flex-shrink:0} .dash-tab-bar{height:100%;border-radius:99px;transition:width .4s;min-width:2px;position:absolute;inset:0} .bar-full{background:var(--ok)}.bar-half{background:var(--p)}.bar-low{background:#FCD34D} /* 2-레이어 게이지바 */ .bar-layer-tuip{position:absolute;top:0;left:0;height:100%;background:#FCD34D;border-radius:99px;transition:width .4s;min-width:0} .bar-layer-chuihap{position:absolute;top:0;left:0;height:100%;background:var(--p);border-radius:99px;transition:width .4s;min-width:0;opacity:.9} /* 텍스트 레이블 — 바 위가 아닌 바 밖(위쪽)에 배치 */ .bar-label{width:100%;display:flex;align-items:center;justify-content:space-between;font-size:.6rem;font-weight:700;white-space:nowrap;pointer-events:none;letter-spacing:.01em;line-height:1.2} .bar-label-center{justify-content:center} .bar-label-light{color:var(--p-d);text-shadow:none} .bar-label-dark{color:#92400E;text-shadow:none} .bar-label-done{color:#065F46;text-shadow:none} .bar-lbl-left{flex:1;text-align:left;overflow:hidden;text-overflow:ellipsis} .bar-lbl-right{flex:1;text-align:right;overflow:hidden;text-overflow:ellipsis} .bar-lbl-center{flex:1;text-align:center;overflow:hidden;text-overflow:ellipsis} /* 오버레이 안 배지는 배경·테두리 제거, 색상만 상속 */ .bar-label .work-badge,.bar-label .dash-pending-badge{background:none!important;border:none!important;color:inherit!important;padding:0;font-size:.62rem;font-weight:700} /* 수취인 헤더 없음 표기 */ .bar-no-recipient{display:flex;align-items:center;width:100%;font-size:.6rem;font-weight:600;color:#9CA3AF;gap:4px;white-space:nowrap;overflow:hidden} .bar-no-recipient i{font-size:.55rem;flex-shrink:0} .dash-tab-nums{display:flex;align-items:center;gap:0;justify-content:flex-end;font-size:.72rem;white-space:nowrap;padding:0 4px;overflow:hidden;min-width:0;font-variant-numeric:tabular-nums} /* 상태 통합 열 (완료 / 투입중 / 취합중 셋 중 하나) */ .dash-tab-state-col{display:flex;align-items:center;justify-content:flex-start;padding:0 6px;overflow:hidden;min-width:0;gap:4px} /* 탭설정 열들 */ /* 정보 배지 영역 */ .dash-tc-badges{display:flex;align-items:center;gap:4px;flex-wrap:nowrap;overflow:hidden;padding:0 4px;min-width:0} .tc-badge{font-size:.62rem;font-weight:700;padding:1px 5px;border-radius:5px;white-space:nowrap;display:inline-flex;align-items:center;gap:2px;flex-shrink:0} .tc-display-name{background:#F5F3FF;color:#4C1D95;border:1px solid #C4B5FD;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:.63rem;font-weight:700;gap:3px} .tc-mandu{background:#FEF3C7;color:#92400E;border:1px solid #FCD34D} .tc-mango{background:#D1FAE5;color:#065F46;border:1px solid #6EE7B7} .tc-time{background:#EFF6FF;color:#1D4ED8;border:1px solid #BFDBFE;font-size:.6rem;max-width:100px;overflow:hidden;text-overflow:ellipsis} .tc-taekhap-on{background:#FEE2E2;color:#991B1B;border:1px solid #FCA5A5;max-width:50px} .tc-bulk-badge{background:#FEF9C3;color:#854D0E;border:1px solid #FDE047;font-weight:700;white-space:nowrap} .tc-delivery-badge{background:#E0F7FA;color:#006064;border:1px solid #80DEEA;font-weight:700;white-space:nowrap} .tc-review-실배송{background:#EDE9FE;color:#5B21B6;border:1px solid #C4B5FD} .tc-review-빈박스{background:#FEF3C7;color:#92400E;border:1px solid #FCD34D} .tc-review-구매확정{background:#D1FAE5;color:#065F46;border:1px solid #6EE7B7} .tc-review-믹스{background:#FCE7F3;color:#9D174D;border:1px solid #F9A8D4} .tc-payment-인애드{background:#E0F2FE;color:#0C4A6E;border:1px solid #7DD3FC} .tc-payment-업체{background:#F3E8FF;color:#581C87;border:1px solid #D8B4FE} /* +정보 버튼 */ .tc-info-btn{display:flex;align-items:center;justify-content:center;width:34px;height:24px;border:1.5px dashed #D1D5DB;border-radius:7px;background:transparent;color:#9CA3AF;font-size:.68rem;font-weight:700;cursor:pointer;transition:all .15s;white-space:nowrap;flex-shrink:0;padding:0} .tc-info-btn:hover{border-color:var(--p);color:var(--p);background:rgba(99,102,241,.06)} /* 구매양식 폼링크 버튼 */ .form-link-btn{display:flex;align-items:center;justify-content:center;width:28px;height:22px;border:1.5px solid #DDD6FE;border-radius:6px;background:#F5F3FF;color:#7C3AED;font-size:.7rem;cursor:pointer;transition:all .15s;flex-shrink:0;padding:0} .form-link-btn:hover{background:#7C3AED;border-color:#7C3AED;color:#fff} .form-link-btn.copied{background:#059669;border-color:#059669;color:#fff} /* 단축URL 복사 버튼 */ .short-link-btn{display:flex;align-items:center;justify-content:center;width:28px;height:22px;border:1.5px solid #BAE6FD;border-radius:6px;background:#F0F9FF;color:#0284C7;font-size:.7rem;cursor:pointer;transition:all .15s;flex-shrink:0;padding:0;position:relative} .short-link-btn:hover{background:#0284C7;border-color:#0284C7;color:#fff} .short-link-btn.loading{background:#E0F2FE;color:#0284C7;cursor:wait;animation:_spin .8s linear infinite} .short-link-btn.copied{background:#059669;border-color:#059669;color:#fff} .short-link-btn.error{background:#FEE2E2;border-color:#FCA5A5;color:#DC2626} .viewer-link-btn{display:flex;align-items:center;justify-content:center;width:28px;height:22px;border:1.5px solid #DDD6FE;border-radius:6px;background:#EDE9FE;color:#7C3AED;font-size:.7rem;cursor:pointer;transition:all .15s;flex-shrink:0;padding:0;position:relative} .viewer-link-btn:hover{background:#7C3AED;border-color:#7C3AED;color:#fff} .viewer-link-btn.loading{opacity:.6;cursor:wait} .viewer-link-btn.copied{background:#059669;border-color:#059669;color:#fff} .viewer-link-btn.error{background:#FEE2E2;border-color:#FCA5A5;color:#DC2626} .form-link-wrap{display:flex;align-items:center;justify-content:center;gap:3px;overflow:hidden;padding:0 2px} @keyframes _spin{to{transform:rotate(360deg)}} /* 팝오버 */ .tc-popover{position:fixed;background:#fff;border:1.5px solid var(--bd);border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.13);padding:0;z-index:1000;min-width:304px;width:304px;display:none} .tc-popover-inner{max-height:80vh;overflow-y:auto;padding:14px;scrollbar-width:thin;scrollbar-color:#D1D5DB #F9FAFB} .tc-popover-inner::-webkit-scrollbar{width:5px} .tc-popover-inner::-webkit-scrollbar-track{background:#F9FAFB;border-radius:99px} .tc-popover-inner::-webkit-scrollbar-thumb{background:#D1D5DB;border-radius:99px} .tc-popover.open{display:block} .tc-popover-title{font-size:.78rem;font-weight:700;color:var(--t1);margin-bottom:10px;border-bottom:1px solid #F3F4F6;padding-bottom:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:240px} .tc-popover-label{font-size:.7rem;font-weight:600;color:var(--t3);margin-bottom:4px;margin-top:8px} .tc-option-row{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:2px} .tc-opt{padding:4px 10px;border:1.5px solid var(--bd);border-radius:16px;font-size:.72rem;font-weight:600;color:var(--t2);cursor:pointer;transition:all .12s;white-space:nowrap;background:#fff} .tc-opt:hover{border-color:var(--p);color:var(--p)} .tc-opt.sel{background:var(--p);border-color:var(--p);color:#fff} .tc-popover-check{display:flex;align-items:center;gap:7px;font-size:.76rem;font-weight:500;cursor:pointer;padding:4px 2px} .tc-popover-check input{width:15px;height:15px;accent-color:#EF4444;cursor:pointer;flex-shrink:0} /* 시간 피커 */ .tc-display-input{width:100%;border:1.5px solid var(--bd);border-radius:7px;padding:5px 8px;font-size:.76rem;outline:none;transition:border-color .15s,box-shadow .15s;box-sizing:border-box;margin-bottom:2px} .tc-display-input:focus{border-color:var(--p)} /* ★ 상품명 필수 경고 스타일 */ .tc-display-input.required-warn{border-color:#EF4444!important;box-shadow:0 0 0 2px #FCA5A540} .tc-display-input.required-warn:focus{border-color:#EF4444!important;box-shadow:0 0 0 3px #FCA5A540} .tc-display-required-msg{display:none;font-size:.68rem;color:#EF4444;font-weight:600;margin-bottom:4px;padding:4px 7px;background:#FFF5F5;border:1px solid #FCA5A5;border-radius:5px;line-height:1.4} .tc-display-required-msg.show{display:flex;align-items:center;gap:5px} /* ★ 대시보드 상품명 없음 경고 행 */ .dash-tab-row.no-product-warn{background:linear-gradient(90deg,#FFF5F5 0%,#FFF5F5 100%)!important} .dash-tab-row-round.no-product-warn{background:#FFF8F8!important} .badge-no-product{display:inline-flex;align-items:center;gap:3px;font-size:.6rem;font-weight:700;color:#DC2626;background:#FEE2E2;border:1px solid #FECACA;border-radius:4px;padding:1px 5px;white-space:nowrap;flex-shrink:0} /* ★ 입금처리 패널 CSS */ .payment-panel{padding:16px} .payment-bank-selector{display:flex;gap:8px;margin-bottom:14px} .payment-bank-btn{flex:1;padding:10px;border:2px solid var(--bd);border-radius:10px;font-size:.8rem;font-weight:700;cursor:pointer;background:#fff;color:var(--t2);transition:all .15s;display:flex;align-items:center;justify-content:center;gap:6px} .payment-bank-btn.active{border-color:var(--p);background:#EEF2FF;color:var(--p)} .payment-bank-btn:hover:not(.active){border-color:#A5B4FC;color:var(--p)} .payment-filter-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px;padding:10px 12px;background:#F9FAFB;border:1.5px solid var(--bd);border-radius:10px} .payment-filter-bar label{font-size:.73rem;font-weight:600;color:var(--t2)} .payment-campaign-select{padding:5px 10px;border:1.5px solid var(--bd);border-radius:7px;font-size:.75rem;color:var(--t1);outline:none;background:#fff;min-width:180px} .payment-load-btn{padding:6px 14px;background:var(--p);color:#fff;border:none;border-radius:7px;font-size:.75rem;font-weight:600;cursor:pointer;white-space:nowrap} .payment-load-btn:hover{background:#4338CA} .payment-load-btn:disabled{opacity:.5;cursor:not-allowed} .payment-preview-wrap{border:1.5px solid var(--bd);border-radius:10px;overflow:hidden;margin-bottom:14px} .payment-preview-header{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;background:#F3F4F6;border-bottom:1px solid var(--bd)} .payment-preview-title{font-size:.78rem;font-weight:700;color:var(--t1)} .payment-preview-count{font-size:.73rem;color:var(--p);font-weight:700} .payment-preview-table{width:100%;border-collapse:collapse;font-size:.72rem} .payment-preview-table th{background:#F9FAFB;padding:6px 8px;text-align:left;font-weight:600;color:var(--t2);border-bottom:1px solid var(--bd);white-space:nowrap} .payment-preview-table td{padding:6px 8px;border-bottom:1px solid #F3F4F6;color:var(--t1);vertical-align:middle} .payment-preview-table tr:last-child td{border-bottom:none} .payment-preview-table tr:hover td{background:#F5F5FF} .payment-preview-table .col-check{width:28px;text-align:center} .payment-preview-table .col-bank{max-width:70px} .payment-preview-table .col-account{font-family:monospace;max-width:120px} .payment-preview-table .col-amount{text-align:right;font-weight:600;color:#065F46;max-width:80px} .payment-preview-table .col-tab{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .payment-action-bar{display:flex;gap:8px;flex-wrap:wrap;align-items:center} .payment-dl-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;background:#065F46;color:#fff;border:none;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .15s} .payment-dl-btn:hover{background:#047857} .payment-dl-btn:disabled{opacity:.5;cursor:not-allowed} .payment-done-btn{display:inline-flex;align-items:center;gap:5px;padding:8px 16px;background:#EF4444;color:#fff;border:none;border-radius:8px;font-size:.8rem;font-weight:600;cursor:pointer;transition:background .15s} .payment-done-btn:hover{background:#DC2626} .payment-done-btn:disabled{opacity:.5;cursor:not-allowed} .payment-sel-count{font-size:.73rem;color:var(--t2);font-weight:600} /* 입금명 일괄 팝업 */ .deposit-name-modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2200;align-items:center;justify-content:center} .deposit-name-modal-overlay.open{display:flex} .deposit-name-modal{background:#fff;border-radius:14px;padding:22px;max-width:460px;width:90%;box-shadow:0 10px 30px rgba(0,0,0,.2);max-height:80vh;display:flex;flex-direction:column} .deposit-name-modal h3{font-size:.92rem;font-weight:700;color:var(--t1);margin:0 0 6px} .deposit-name-modal .desc{font-size:.73rem;color:var(--t3);margin-bottom:14px;line-height:1.5} .deposit-name-modal-body{overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:10px} .deposit-name-row{display:flex;align-items:center;gap:8px;padding:8px 10px;background:#F9FAFB;border-radius:8px;border:1.5px solid var(--bd)} .deposit-name-row label{font-size:.75rem;font-weight:600;color:var(--t2);min-width:100px;flex-shrink:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .deposit-name-input{flex:1;padding:5px 9px;border:1.5px solid var(--bd);border-radius:6px;font-size:.76rem;outline:none} .deposit-name-input:focus{border-color:var(--p)} .deposit-name-input.warn{border-color:#EF4444;background:#FFF5F5} .deposit-name-modal-actions{display:flex;gap:8px;margin-top:14px;justify-content:flex-end} /* 이체완료 확인 팝업 */ .payment-confirm-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:2200;align-items:center;justify-content:center} .payment-confirm-overlay.open{display:flex} .payment-confirm-modal{background:#fff;border-radius:14px;padding:22px;max-width:380px;width:90%;box-shadow:0 10px 30px rgba(0,0,0,.2)} .payment-confirm-modal h3{font-size:.9rem;font-weight:700;margin:0 0 10px} .payment-confirm-modal p{font-size:.78rem;color:var(--t2);margin:0 0 16px;line-height:1.6} .payment-confirm-modal .actions{display:flex;gap:8px;justify-content:flex-end} .tc-time-picker{border:1.5px solid var(--bd);border-radius:8px;overflow:hidden;margin-bottom:2px;transition:opacity .15s} .tc-time-picker-disabled{opacity:.38;pointer-events:none} .tc-time-picker-hint{font-size:.68rem;color:var(--p);font-weight:600;padding:4px 8px;background:#F0F9FF;border-bottom:1px solid #E0F2FE;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .tc-time-picker-disabled .tc-time-picker-hint{color:#9CA3AF;background:#F9FAFB;border-color:#E5E7EB} .tc-time-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:#E5E7EB;max-height:126px;overflow-y:auto} .tc-time-cell{background:#fff;text-align:center;padding:5px 2px;font-size:.67rem;font-weight:600;color:var(--t2);cursor:pointer;transition:background .1s;user-select:none;border:none;outline:none} .tc-time-cell:hover{background:#EFF6FF;color:var(--p)} .tc-time-cell.tc-sel-start{background:var(--p);color:#fff} .tc-time-cell.tc-sel-end{background:#7C3AED;color:#fff} .tc-time-cell.tc-in-range{background:#DBEAFE;color:#1E40AF} .tc-time-clear{width:100%;font-size:.67rem;color:#9CA3AF;border:none;background:#F9FAFB;padding:3px;cursor:pointer;border-top:1px solid #E5E7EB;text-align:center} .tc-time-clear:hover{color:#EF4444;background:#FEF2F2} .tc-popover-btns{display:flex;gap:6px;margin-top:12px} .tc-btn-save{flex:1;padding:6px;background:var(--p);color:#fff;border:none;border-radius:7px;font-size:.76rem;font-weight:700;cursor:pointer;transition:opacity .15s} .tc-btn-save:hover{opacity:.85} .tc-btn-cancel{padding:6px 10px;background:#F3F4F6;color:var(--t2);border:none;border-radius:7px;font-size:.76rem;font-weight:600;cursor:pointer} /* 수정 경고 모달 */ .tc-confirm-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1100;display:none;align-items:center;justify-content:center} .tc-confirm-overlay.open{display:flex} .tc-confirm-box{background:#fff;border-radius:12px;padding:22px 24px;max-width:320px;width:90%;box-shadow:0 12px 40px rgba(0,0,0,.18)} .tc-confirm-box h3{font-size:.95rem;font-weight:700;color:var(--t1);margin-bottom:8px} .tc-confirm-box p{font-size:.8rem;color:var(--t2);margin-bottom:16px;line-height:1.5} .tc-confirm-btns{display:flex;gap:8px} .tc-confirm-ok{flex:1;padding:8px;background:var(--p);color:#fff;border:none;border-radius:8px;font-weight:700;cursor:pointer;font-size:.82rem} .tc-confirm-cancel{padding:8px 14px;background:#F3F4F6;color:var(--t2);border:none;border-radius:8px;font-weight:600;cursor:pointer;font-size:.82rem} /* ── 업체 추가 모달 ── */ .addcamp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.4);z-index:1200;display:none;align-items:center;justify-content:center} .addcamp-overlay.open{display:flex} .addcamp-box{background:#fff;border-radius:14px;padding:24px;width:92%;max-width:460px;box-shadow:0 16px 48px rgba(0,0,0,.18)} .addcamp-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .addcamp-title{font-size:.95rem;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:6px} .addcamp-title i{color:var(--p)} .addcamp-close{background:none;border:none;font-size:1rem;color:var(--t3);cursor:pointer;padding:2px 6px;border-radius:6px;line-height:1} .addcamp-close:hover{background:#F3F4F6;color:var(--t1)} .addcamp-desc{font-size:.78rem;color:var(--t3);margin-bottom:14px;line-height:1.6} .addcamp-input-wrap{margin-bottom:6px} .addcamp-input{width:100%;border:1.5px solid var(--bd);border-radius:8px;padding:9px 11px;font-size:.82rem;outline:none;box-sizing:border-box;transition:border-color .15s} .addcamp-input:focus{border-color:var(--p)} .addcamp-input.has-val{border-color:#10B981} .addcamp-url-preview{font-size:.72rem;color:#10B981;margin-top:5px;word-break:break-all;min-height:16px;font-weight:600} .addcamp-error{font-size:.76rem;color:#EF4444;margin-bottom:8px;min-height:18px;white-space:pre-line} .addcamp-btns{display:flex;gap:8px;margin-top:14px} .addcamp-btn-ok{flex:1;padding:9px;background:var(--p);color:#fff;border:none;border-radius:8px;font-size:.84rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:5px;transition:opacity .15s} .addcamp-btn-ok:hover:not(:disabled){opacity:.85} .addcamp-btn-ok:disabled{opacity:.45;cursor:not-allowed} .addcamp-btn-cancel{padding:9px 16px;background:#F3F4F6;color:var(--t2);border:none;border-radius:8px;font-size:.84rem;font-weight:600;cursor:pointer} /* +업체추가 버튼 */ .btn-add-campaign{display:inline-flex;align-items:center;gap:5px;padding:5px 12px;background:var(--p);color:#fff;border:none;border-radius:20px;font-size:.76rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:opacity .15s;flex-shrink:0} .btn-add-campaign:hover{opacity:.85} .btn-add-campaign i{font-size:.72rem} /* ── v9.10: 캠페인 시트 생성 모달 ── */ .create-sheet-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1300;display:none;align-items:center;justify-content:center} .create-sheet-overlay.open{display:flex} .create-sheet-box{background:#fff;border-radius:16px;padding:26px 24px 22px;width:92%;max-width:500px;box-shadow:0 20px 56px rgba(0,0,0,.2);max-height:90vh;overflow-y:auto} .create-sheet-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .create-sheet-title{font-size:1rem;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:7px} .create-sheet-title i{color:#059669} .create-sheet-close{background:none;border:none;font-size:1rem;color:var(--t3);cursor:pointer;padding:3px 7px;border-radius:6px} .create-sheet-close:hover{background:#F3F4F6;color:var(--t1)} .cs-field{margin-bottom:14px} .cs-label{display:block;font-size:.78rem;font-weight:700;color:var(--t2);margin-bottom:5px} .cs-label .req{color:#EF4444;margin-left:2px} .cs-input{width:100%;border:1.5px solid var(--bd);border-radius:8px;padding:9px 11px;font-size:.84rem;outline:none;box-sizing:border-box;font-family:inherit;transition:border-color .15s} .cs-input:focus{border-color:#059669} .cs-hint{font-size:.7rem;color:var(--t3);margin-top:3px} .cs-radio-group{display:flex;gap:10px;margin-bottom:14px} .cs-radio-label{display:flex;align-items:center;gap:6px;padding:9px 16px;border:1.5px solid var(--bd);border-radius:10px;cursor:pointer;font-size:.82rem;font-weight:600;color:var(--t2);transition:all .15s;flex:1;justify-content:center} .cs-radio-label:has(input:checked){border-color:#059669;background:#F0FDF4;color:#065F46} .cs-radio-label input{accent-color:#059669} .cs-divider{border:none;border-top:1px solid #F3F4F6;margin:14px 0} .cs-template-notice{display:flex;align-items:flex-start;gap:8px;background:#FFF7ED;border:1px solid #FED7AA;border-radius:8px;padding:9px 12px;font-size:.76rem;color:#92400E;margin-bottom:14px;line-height:1.5} .cs-template-notice i{color:#F97316;flex-shrink:0;margin-top:2px} .cs-btns{display:flex;gap:8px;margin-top:16px} .cs-btn-ok{flex:1;padding:10px;background:#059669;color:#fff;border:none;border-radius:9px;font-size:.88rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:opacity .15s} .cs-btn-ok:hover:not(:disabled){opacity:.85} .cs-btn-ok:disabled{opacity:.4;cursor:not-allowed} .cs-btn-cancel{padding:10px 18px;background:#F3F4F6;color:var(--t2);border:none;border-radius:9px;font-size:.88rem;font-weight:600;cursor:pointer} .cs-result{display:none;margin-top:12px;padding:12px;border-radius:8px;font-size:.8rem;line-height:1.7} .cs-result.success{background:#F0FDF4;border:1px solid #A7F3D0;color:#065F46} .cs-result.error{background:#FEF2F2;border:1px solid #FECACA;color:#991B1B} .dash-done{color:var(--ok);font-weight:600;display:inline-block;min-width:2.4ch;text-align:right}.dash-sep{color:var(--t3);padding:0 1px}.dash-total{color:var(--t2);display:inline-block;min-width:2.4ch;text-align:left} .dash-pending-badge{font-size:.67rem;padding:2px 6px;border-radius:8px;background:var(--warn-l);color:#92400E;font-weight:600;white-space:nowrap;display:inline-block} .dash-pending-badge.badge-done{background:var(--ok-l);color:#065F46} /* 투입중 / 취합중 배지 */ .work-badge{font-size:.63rem;padding:2px 5px;border-radius:8px;font-weight:700;white-space:nowrap;display:inline-flex;align-items:center;gap:2px;flex-shrink:0} .badge-tuip{background:#FEF3C7;color:#92400E;border:1px solid #FCD34D} .badge-chuihap{background:#EDE9FE;color:#5B21B6;border:1px solid #C4B5FD} .dash-label{font-size:.65rem;font-weight:700;color:var(--p);background:rgba(99,102,241,.1);padding:1px 5px;border-radius:6px;margin-right:3px;white-space:nowrap;flex-shrink:0} .dash-label-monthly{color:#0891B2;background:rgba(8,145,178,.1)} .dash-tab-row-monthly{background:#F8FDFF;border-left:2px solid #BAE6FD} .dash-tab-name-monthly{color:#0891B2;font-size:.74rem;display:flex;align-items:center;gap:4px} /* ── 캠페인 카드 ── */ .campaign-admin-card{background:#fff;border:1.5px solid var(--bd);border-radius:var(--rm);padding:14px 16px;margin-bottom:10px} .cac-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px} .cac-name{font-size:.88rem;font-weight:600;color:var(--t1);flex:1;margin-right:10px;line-height:1.3} .cac-rate-badge{flex-shrink:0;font-size:.78rem;font-weight:700;padding:2px 8px;border-radius:12px} .rate-full{background:var(--ok-l);color:#065F46}.rate-half{background:var(--warn-l);color:#92400E}.rate-low{background:#F3F4F6;color:#6B7280} .cac-bar-wrap{height:5px;background:#E5E7EB;border-radius:99px;margin-bottom:8px;overflow:hidden} .cac-bar{height:100%;background:var(--p);border-radius:99px;transition:width .4s ease;min-width:2px} .cac-stats{display:flex;gap:12px;font-size:.76rem;margin-bottom:8px} .cac-stat-total{color:var(--t3)}.cac-stat-done{color:var(--ok);font-weight:600}.cac-stat-pending{color:var(--warn);font-weight:600} .cac-link{font-size:.74rem;color:var(--p);text-decoration:none;display:inline-flex;align-items:center;gap:4px} .cac-link:hover{text-decoration:underline} /* ══════════════════════════════════ 리뷰어 등록 — CSS (index.html 공유) ══════════════════════════════════ */ .reg-phone-wrap{display:flex;align-items:center;gap:6px;border:1.5px solid #d1d5db;border-radius:var(--rs);padding:10px 12px;transition:border-color .15s;background:#fff} .reg-phone-prefix{font-size:.9rem;font-weight:600;color:var(--t2);white-space:nowrap;padding-right:4px;border-right:1.5px solid #e5e7eb;margin-right:2px} .reg-phone-input{border:none;outline:none;font-size:.9rem;width:64px;text-align:center;background:transparent;color:var(--t1);font-family:inherit} .reg-phone-sep{color:var(--t3);font-size:.9rem;user-select:none} .reg-phone-preview{font-size:.76rem;color:var(--t3);margin-top:4px;height:1em;transition:color .2s} .reg-field-label{font-size:.8rem;font-weight:600;color:var(--t2);margin-bottom:5px;display:block} .reg-input{width:100%;border:1.5px solid var(--border);border-radius:var(--rs);padding:10px 12px;font-size:.9rem;color:var(--t1);font-family:inherit;outline:none;transition:border-color .15s;background:#fff} .reg-input:focus{border-color:var(--p)} .reg-section{margin-bottom:14px} .reg-consent-row{display:flex;align-items:flex-start;gap:10px;background:#F9FAFB;border:1px solid var(--border);border-radius:var(--rs);padding:10px 12px} /* 개인정보 안내 박스 */ .reg-consent-notice{display:flex;align-items:flex-start;gap:4px;background:#EFF6FF;border:1.5px solid #BFDBFE;border-radius:var(--rs);padding:10px 12px;font-size:.78rem;font-weight:600;color:var(--t1);line-height:1.5;margin-bottom:10px} .reg-error{display:none;background:#FEF2F2;border:1px solid #FECACA;border-radius:var(--rs);padding:9px 12px;font-size:.8rem;color:#DC2626;margin-top:4px;margin-bottom:8px} .reg-error i{margin-right:5px} /* 등록하기 버튼 (DB 저장, 하단 배치) */ .btn-reg-submit{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;background:#16a34a;color:#fff;border:none;border-radius:var(--rs);padding:11px 16px;font-size:.9rem;font-weight:700;cursor:pointer;transition:var(--tr);margin-bottom:8px;box-shadow:0 2px 8px rgba(22,163,74,.25)} .btn-reg-submit:hover:not([disabled]){background:#15803d;transform:translateY(-1px);box-shadow:0 4px 14px rgba(22,163,74,.35)} .btn-reg-submit[disabled]{background:#9CA3AF;cursor:not-allowed;opacity:.7;box-shadow:none} /* ── 스텝 헤더 ── */ .reg-step-header{display:flex;align-items:center;gap:8px;font-size:.82rem;font-weight:700;color:var(--t1);margin:0 0 10px;padding:8px 10px;background:var(--bg);border-radius:var(--rs);border-left:3px solid var(--p)} .reg-step-badge{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;background:var(--p);color:#fff;border-radius:50%;font-size:.72rem;font-weight:800;flex-shrink:0} /* ── 구분선 ── */ .reg-divider-line{border:none;border-top:1px dashed var(--border);margin:16px 0} /* ── 결과 배너 ── */ .reg-result-banner{border-radius:var(--rs);padding:10px 13px;font-size:.87rem;font-weight:700;display:flex;align-items:center;gap:8px;margin-bottom:14px} .reg-result-banner.ok{background:#D1FAE5;color:#065F46;border:1.5px solid #6EE7B7} .reg-result-banner.dup{background:#FEF2F2;color:#991B1B;border:1.5px solid #FECACA} /* ── 복사 영역 ── */ .reg-copy-area{background:#F0F9FF;border:1.5px solid #BAE6FD;border-radius:var(--rs);padding:11px 13px} .reg-copy-guide{font-size:.74rem;color:#0369A1;margin-bottom:8px;line-height:1.5} .btn-reg-copy{width:100%;display:flex;align-items:center;justify-content:center;gap:7px;background:#d97706;color:#fff;border:none;border-radius:var(--rs);padding:10px 14px;font-size:.88rem;font-weight:700;cursor:pointer;transition:var(--tr);box-shadow:0 2px 6px rgba(217,119,6,.2)} .btn-reg-copy:hover:not([disabled]){background:#b45309;transform:translateY(-1px);box-shadow:0 4px 12px rgba(217,119,6,.3)} .btn-reg-copy[disabled]{background:#D1D5DB;color:#9CA3AF;cursor:not-allowed;opacity:1;box-shadow:none} /* ── 카카오 영역 ── */ .reg-kakao-area{background:#FEFCE8;border:1.5px solid #FDE68A;border-radius:var(--rs);padding:11px 13px} .reg-kakao-guide{font-size:.74rem;color:#78350F;line-height:1.6;margin-bottom:8px} .btn-reg-kakao{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;background:#FEE500;color:#3C1E1E;border:none;border-radius:var(--rs);padding:11px;font-size:.92rem;font-weight:700;cursor:pointer;transition:var(--tr);text-decoration:none} .btn-reg-kakao:hover:not(.reg-kakao-disabled){background:#F5DB00;transform:translateY(-1px);box-shadow:0 2px 8px rgba(0,0,0,.12)} .reg-kakao-disabled{background:#E5E7EB !important;color:#9CA3AF !important;pointer-events:none;cursor:not-allowed} .reg-kakao-note{font-size:.7rem;color:#78350F;margin-top:7px;line-height:1.5;opacity:.8;text-align:center} /* ── 닫기 버튼 ── */ .btn-reg-close{width:100%;display:flex;align-items:center;justify-content:center;gap:6px;background:#F3F4F6;color:#6B7280;border:1.5px solid #E5E7EB;border-radius:var(--rs);padding:10px;font-size:.87rem;font-weight:600;cursor:pointer;transition:var(--tr)} .btn-reg-close:hover{background:#E5E7EB;color:#374151} /* 관리자용 등록 트리거 버튼 */ .btn-reg-admin{display:inline-flex;align-items:center;gap:6px;background:#F0F4FF;color:var(--p);border:1.5px solid #C7D2FE;border-radius:20px;padding:7px 14px;font-size:.8rem;font-weight:700;cursor:pointer;transition:var(--tr);white-space:nowrap} .btn-reg-admin:hover{background:var(--p);color:#fff;border-color:var(--p)} .btn-reg-admin i{font-size:.76rem} /* ══════════════════════════════════ Phase 1-1: 진행률 통계 패널 ══════════════════════════════════ */ .stats-panel-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:1300;display:none;align-items:flex-end;justify-content:center} .stats-panel-overlay.open{display:flex} .stats-panel{background:#fff;border-radius:20px 20px 0 0;width:100%;max-width:560px;max-height:85vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 -4px 32px rgba(0,0,0,.18)} .stats-panel-header{padding:16px 18px 12px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0} .stats-panel-title{font-size:1rem;font-weight:700;color:var(--t1);display:flex;align-items:center;gap:8px} .stats-panel-body{padding:16px 18px;overflow-y:auto;flex:1} .stats-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:16px} .stats-card{background:var(--bg);border:1.5px solid var(--border);border-radius:12px;padding:12px 10px;text-align:center} .stats-card-val{font-size:1.5rem;font-weight:800;line-height:1} .stats-card-lbl{font-size:.68rem;color:var(--t3);margin-top:4px;font-weight:600} .stats-card.done .stats-card-val{color:var(--ok)} .stats-card.pending .stats-card-val{color:#F59E0B} .stats-card.total .stats-card-val{color:var(--p)} .stats-bar-wrap{background:#E5E7EB;border-radius:99px;height:8px;margin-bottom:14px;overflow:hidden} .stats-bar-fill{height:100%;border-radius:99px;background:var(--p);transition:width .5s ease} .stats-bar-fill.full{background:var(--ok)} .stats-section-title{font-size:.76rem;font-weight:700;color:var(--t2);margin-bottom:8px;display:flex;align-items:center;gap:5px} .stats-name-list{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px} .stats-name-chip{font-size:.73rem;padding:3px 9px;border-radius:20px;border:1.5px solid;font-weight:600} .stats-name-chip.pending-chip{background:#FEF3C7;color:#92400E;border-color:#FCD34D} .stats-name-chip.done-chip{background:var(--ok-l);color:#065F46;border-color:#6EE7B7} .stats-empty-msg{font-size:.8rem;color:var(--t3);padding:8px 0} .stats-tab-name{font-size:.82rem;font-weight:700;color:var(--t1);margin-bottom:12px;padding:8px 12px;background:#F5F3FF;border-radius:8px;border-left:3px solid var(--p)} /* 대시보드 행 통계 버튼 */ .btn-tab-stats{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;background:#EEF2FF;color:#4338CA;border:1px solid #C7D2FE;border-radius:8px;font-size:.65rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s} .btn-tab-stats:hover{background:#C7D2FE} /* ══════════════════════════════════ Phase 1-2: 블랙리스트 관리 패널 ══════════════════════════════════ */ .bl-panel-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1400;display:none;align-items:center;justify-content:center;padding:16px} .bl-panel-overlay.open{display:flex} .bl-panel{background:#fff;border-radius:16px;width:100%;max-width:480px;max-height:88vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 8px 40px rgba(0,0,0,.22)} .bl-panel-header{padding:16px 18px 12px;background:#FEF2F2;border-bottom:1.5px solid #FECACA;display:flex;align-items:center;justify-content:space-between;flex-shrink:0} .bl-panel-title{font-size:.98rem;font-weight:700;color:#991B1B;display:flex;align-items:center;gap:8px} .bl-panel-body{padding:16px 18px;overflow-y:auto;flex:1} .bl-add-form{background:#FFF5F5;border:1.5px solid #FECACA;border-radius:10px;padding:14px;margin-bottom:16px} .bl-add-title{font-size:.8rem;font-weight:700;color:#DC2626;margin-bottom:10px;display:flex;align-items:center;gap:5px} .bl-input{width:100%;border:1.5px solid #FCA5A5;border-radius:8px;padding:8px 10px;font-size:.87rem;color:var(--t1);outline:none;margin-bottom:8px;font-family:inherit;box-sizing:border-box;background:#fff} .bl-input:focus{border-color:#EF4444;box-shadow:0 0 0 3px rgba(239,68,68,.12)} .bl-input::placeholder{color:#9CA3AF;font-size:.82rem} .btn-bl-add{width:100%;padding:9px;background:#DC2626;color:#fff;border:none;border-radius:8px;font-size:.88rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:6px;transition:opacity .15s} .btn-bl-add:hover{opacity:.88} .btn-bl-add:disabled{background:#9CA3AF;cursor:not-allowed} .bl-list-title{font-size:.8rem;font-weight:700;color:var(--t2);margin-bottom:8px;display:flex;align-items:center;justify-content:space-between} .bl-list{display:flex;flex-direction:column;gap:6px} .bl-item{background:#FFF;border:1.5px solid #FCA5A5;border-radius:10px;padding:10px 12px;display:flex;align-items:flex-start;gap:10px} .bl-item-info{flex:1;min-width:0} .bl-item-name{font-size:.9rem;font-weight:700;color:#DC2626;display:flex;align-items:center;gap:5px} .bl-item-meta{font-size:.72rem;color:var(--t3);margin-top:3px;line-height:1.5} .bl-item-reason{font-size:.78rem;color:#374151;margin-top:4px;background:#FEF2F2;border-radius:6px;padding:4px 8px} .btn-bl-remove{padding:4px 10px;background:#FEE2E2;color:#DC2626;border:1.5px solid #FECACA;border-radius:7px;font-size:.72rem;font-weight:700;cursor:pointer;white-space:nowrap;flex-shrink:0;transition:background .15s} .btn-bl-remove:hover{background:#FECACA} .bl-empty{text-align:center;padding:24px;color:var(--t3);font-size:.85rem} /* 대시보드 상단 블랙리스트 버튼 */ .btn-blacklist-mgr{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;background:#FEF2F2;color:#DC2626;border:1.5px solid #FECACA;border-radius:20px;font-size:.78rem;font-weight:700;cursor:pointer;white-space:nowrap;transition:background .15s} .btn-blacklist-mgr:hover{background:#FECACA} /* ── 모집공고 폼 공통 ── */ .rform-group{display:flex;flex-direction:column;gap:5px} .rform-label{font-size:.78rem;font-weight:700;color:var(--t2)} .rform-req{color:var(--err)} .rform-input{padding:8px 11px;border:1.5px solid var(--border);border-radius:8px;font-size:.82rem;color:var(--t1);outline:none;transition:border-color .15s;font-family:inherit;width:100%;box-sizing:border-box} .rform-input:focus{border-color:var(--p)} textarea.rform-input{line-height:1.5} /* 채널 선택 버튼 */ .rchan-btn{padding:5px 13px;border:1.5px solid var(--border);border-radius:20px;background:#fff;font-size:.75rem;font-weight:600;color:var(--t2);cursor:pointer;transition:all .12s} .rchan-btn:hover{border-color:var(--p);color:var(--p)} .rchan-btn.active{background:var(--p);border-color:var(--p);color:#fff} /* 배지 칩 */ .rbadge-chip{display:inline-flex;align-items:center;gap:4px;padding:3px 10px;background:#EDE9FE;color:#5B21B6;border-radius:20px;font-size:.73rem;font-weight:600} .rbadge-chip button{background:none;border:none;cursor:pointer;color:#7C3AED;padding:0;font-size:.65rem;line-height:1;opacity:.7} .rbadge-chip button:hover{opacity:1} /* 공고 카드 (관리자 목록) */ .recruit-card{background:var(--card);border:1.5px solid var(--border);border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:8px;box-shadow:var(--sh);transition:box-shadow .15s} .recruit-card:hover{box-shadow:0 4px 16px rgba(124,58,237,.12)} .recruit-card.status-draft{border-left:4px solid var(--t4);opacity:.8} .recruit-card.status-active{border-left:4px solid var(--ok)} .recruit-card.status-closed{border-left:4px solid var(--err);opacity:.65} .recruit-card-header{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .recruit-card-title{font-size:.9rem;font-weight:700;color:var(--t1);flex:1;min-width:0} .recruit-status-badge{display:inline-flex;align-items:center;padding:2px 9px;border-radius:20px;font-size:.65rem;font-weight:700;flex-shrink:0} .recruit-status-badge.draft{background:#F3F4F6;color:#6B7280} .recruit-status-badge.active{background:var(--ok-l);color:#065F46} .recruit-status-badge.closed{background:#FEF2F2;color:#DC2626} .recruit-card-meta{display:flex;gap:10px;flex-wrap:wrap;font-size:.72rem;color:var(--t3)} .recruit-card-meta span{display:inline-flex;align-items:center;gap:3px} .recruit-card-badges{display:flex;flex-wrap:wrap;gap:5px} .recruit-card-badge{padding:2px 8px;background:#EDE9FE;color:#5B21B6;border-radius:20px;font-size:.68rem;font-weight:600} .recruit-card-actions{display:flex;gap:6px;margin-left:auto;flex-shrink:0} .recruit-btn{display:inline-flex;align-items:center;gap:3px;padding:4px 11px;border-radius:7px;font-size:.72rem;font-weight:600;cursor:pointer;border:1.5px solid;transition:all .12s} .recruit-btn-edit{color:#5B21B6;border-color:#DDD6FE;background:#F5F3FF} .recruit-btn-edit:hover{background:#5B21B6;color:#fff;border-color:#5B21B6} .recruit-btn-del{color:#DC2626;border-color:#FECACA;background:#FEF2F2} .recruit-btn-del:hover{background:#DC2626;color:#fff;border-color:#DC2626} /* 추천 배지 프리셋 버튼 */ .rbadge-preset{ display:inline-flex;align-items:center;gap:4px; padding:3px 10px;border-radius:20px; border:1.5px dashed #C4B5FD; background:#FAF5FF;color:#6D28D9; font-size:.72rem;font-weight:600; cursor:pointer;transition:all .15s; white-space:nowrap; } .rbadge-preset::before{content:"+";font-weight:700;opacity:.7} .rbadge-preset:hover{background:#EDE9FE;border-color:#7C3AED;border-style:solid;transform:translateY(-1px)} .rbadge-preset:active{transform:translateY(0);background:#DDD6FE} /* ═══ Phase 5: 통합 동기화 상태 패널 ═══ */ .sync-status-panel{ background:#F8FAFC;border:1px solid #E2E8F0;border-radius:8px; padding:6px 10px; } .sync-status-grid{ display:grid;grid-template-columns:1fr 1fr;gap:4px 12px; } .sync-status-item{ display:flex;align-items:center;gap:5px; font-size:.68rem;color:#475569; } .sync-status-icon{ width:16px;text-align:center;font-size:.7rem; } .sync-status-icon.sync-ok{color:#10B981} .sync-status-icon.sync-warn{color:#F59E0B} .sync-status-icon.sync-off{color:#94A3B8} .sync-status-text{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ═══ Phase 5: 라이브 모드 토글 ═══ */ .live-mode-toggle{ display:inline-flex;align-items:center;gap:5px; cursor:pointer;user-select:none;margin-left:8px; vertical-align:middle; } .live-mode-toggle input{display:none} .live-mode-slider{ position:relative;width:34px;height:18px; background:#CBD5E1;border-radius:18px; transition:background .3s; } .live-mode-slider::after{ content:'';position:absolute;left:2px;top:2px; width:14px;height:14px;border-radius:50%; background:#fff;transition:transform .3s;box-shadow:0 1px 2px rgba(0,0,0,.15); } .live-mode-toggle input:checked + .live-mode-slider{ background:#10B981; } .live-mode-toggle input:checked + .live-mode-slider::after{ transform:translateX(16px); } .live-mode-label{ font-size:.65rem;font-weight:700;color:#6B7280; letter-spacing:.04em;transition:color .3s; } .live-mode-toggle input:checked ~ .live-mode-label{ color:#059669; } .live-mode-label.live-active{ color:#059669; animation:livePulse 2s ease-in-out infinite; } @keyframes livePulse{ 0%,100%{opacity:1}50%{opacity:.5} } /* ═══ 자동 빌드 카운트다운 배지 ═══ */ .cron-countdown-badge{ display:inline-flex;align-items:center;gap:5px; padding:3px 10px;border-radius:20px; font-size:.7rem;font-weight:600; white-space:nowrap;cursor:default; transition:all .25s; } .cron-countdown-badge.cron-auto{ background:#EFF6FF;color:#1D4ED8;border:1px solid #BFDBFE; } .cron-countdown-badge.cron-full{ background:#FFF7ED;color:#C2410C;border:1px solid #FED7AA; } .cron-countdown-badge.cron-off{ background:#F3F4F6;color:#6B7280;border:1px solid #E5E7EB; } .cron-countdown-badge .cron-time{ font-variant-numeric:tabular-nums; letter-spacing:.3px; } /* ═══ 빌드 진행 중 배너 ═══ */ .build-in-progress-banner{ display:inline-flex;align-items:center;gap:5px; padding:4px 12px;border-radius:20px; background:linear-gradient(135deg,#FEF3C7,#FDE68A); color:#92400E;border:1px solid #F59E0B; font-size:.72rem;font-weight:700; white-space:nowrap; animation:buildPulse 2s ease-in-out infinite; } @keyframes buildPulse{ 0%,100%{opacity:1} 50%{opacity:.7} }