*{font-family:'Malgun Gothic','맑은 고딕',sans-serif;font-size:12px;box-sizing:border-box;margin:0;padding:0;}
body{background:#f0f0f0;min-width:1100px;}
#hd{background:#1a4a8a;position:sticky;top:0;z-index:1000;}
.gnb-inner{padding:0 20px;}
.menubar{display:flex;flex-wrap:nowrap;align-items:center;background:#2563a8;padding:0;min-height:36px;position:relative;z-index:200;overflow:visible;}
.menu-item{position:relative;flex-shrink:0;}
.menu-item>a{display:block;padding:0 14px;height:36px;line-height:36px;color:#cce4ff;text-decoration:none;white-space:nowrap;}
.menu-item>a:hover,.menu-item>a.active{background:#2563b0;color:#fff;}
.menu-item .submenu{display:none;position:absolute;top:36px;left:0;background:#1e3a6e;min-width:160px;z-index:2000;box-shadow:2px 4px 10px rgba(0,0,0,.4);}
.menu-item:hover .submenu{display:block;}
.menu-item .submenu a{display:block;padding:7px 14px;color:#cce4ff;text-decoration:none;white-space:nowrap;}
.menu-item .submenu a:hover,.menu-item .submenu a.active{background:#2563b0;color:#fff;}
.menubar-login{margin-left:auto;display:flex;align-items:center;gap:8px;color:#cce4ff;padding-right:8px;}
.menubar-login a{color:#cce4ff;text-decoration:none;}
.menubar-login .btn-logout{color:#ffaaaa!important;}

/* ── 검색바 ── */
.search-bar{background:#fff;padding:7px 14px;border-bottom:1px solid #ddd;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.search-bar label{color:#555;font-weight:bold;white-space:nowrap;}
.search-bar select,.search-bar input[type=date]{border:1px solid #bbb;border-radius:3px;padding:3px 6px;height:26px;font-size:12px;}
.btn-search{background:#2563b0;color:#fff;border:none;border-radius:3px;padding:4px 14px;height:26px;cursor:pointer;}
.btn-search:hover{background:#1a4a8a;}
/* 기간 빠른 선택 버튼 */
.period-btns{display:flex;gap:3px;}
.btn-period{height:26px;padding:0 9px;border:1px solid #c8d4e8;border-radius:3px;background:#f4f7fc;color:#3a5a8a;font-size:11px;font-weight:600;cursor:pointer;white-space:nowrap;transition:background .12s,color .12s;}
.btn-period:hover{background:#dce8f8;}
.btn-period.active{background:#2563b0;color:#fff;border-color:#1a4a8a;}
/* 기간 초과 경고 */
.date-warn{display:none;font-size:10px;color:#c0392b;font-weight:600;white-space:nowrap;}
/* 신규매출 합계 표시 */
.total-sale-display{margin-left:100px;display:flex;align-items:center;gap:6px;}
.tsd-label{font-size:11px;font-weight:600;color:#666;white-space:nowrap;}
.tsd-value{font-size:14px;font-weight:800;color:#5b2d9e;letter-spacing:.01em;white-space:nowrap;}
.tsd-unit{font-size:11px;color:#888;}
/* ── 실적 테이블 영역: 5등분 grid ── */
.perf-wrap{padding:10px 14px;overflow-x:auto;overflow-y:visible;}
.perf-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  width:100%;
  min-width:900px;
  align-items:start;
}

/* 개별 테이블 블록 */
.perf-block{display:flex;flex-direction:column;flex-shrink:0;border-radius:6px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.12);}
.perf-block.col-span-2{grid-column:span 2;}

/* 빈 칸: + 추가 버튼 */
.perf-add-slot{
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  min-height:140px;border-radius:6px;
  border:2px dashed #c8d6e5;background:#f8fafc;
  cursor:pointer;transition:border-color .15s,background .15s;
  user-select:none;
}
.perf-add-slot:hover{border-color:#2563b0;background:#eef4ff;}
.perf-add-slot .add-icon{
  width:36px;height:36px;border-radius:50%;
  background:#dde8f8;color:#2563b0;
  display:flex;align-items:center;justify-content:center;
  font-size:20px;font-weight:700;margin-bottom:6px;
  transition:background .15s;
}
.perf-add-slot:hover .add-icon{background:#2563b0;color:#fff;}
.perf-add-slot .add-label{font-size:11px;color:#7a96b4;}

/* catB 블록 드래그 */
.perf-block.dragging{opacity:.4;}
.perf-block.drag-over-col{outline:2px dashed #2563b0;outline-offset:2px;}

/* 상단 요약카드: 신규매출 합계 */
.perf-summary-bar{
  display:flex;align-items:center;gap:0;
  background:#1a2b42;border-radius:6px 6px 0 0;
  padding:7px 14px;border-bottom:2px solid #0d1e30;
}
.perf-summary-bar .ps-label{
  font-size:10px;color:#7fa8c8;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;margin-right:8px;white-space:nowrap;
}
.perf-summary-bar .ps-val{
  font-size:15px;font-weight:800;color:#a78bfa;letter-spacing:.01em;white-space:nowrap;
}
.perf-summary-bar .ps-sep{
  width:1px;background:#2e4560;margin:0 14px;height:18px;
}
.perf-summary-bar .ps-cnt-label{font-size:10px;color:#7fa8c8;font-weight:600;margin-right:6px;}
.perf-summary-bar .ps-cnt-val{font-size:13px;font-weight:700;color:#7ec8e3;}

/* 리스트설정 버튼 */
.ps-setting-btn{
  margin-left:auto;
  background:rgba(255,255,255,.1);color:#b0c4d8;border:1px solid rgba(255,255,255,.15);
  border-radius:3px;padding:0 9px;height:20px;line-height:20px;
  cursor:pointer;font-size:10px;white-space:nowrap;
}
.ps-setting-btn:hover{background:rgba(255,255,255,.18);color:#fff;}

/* 테이블 공통 */
.perf-table{
  border-collapse:collapse;background:#fff;white-space:nowrap;
  box-shadow:0 2px 10px rgba(0,0,0,.10);overflow:hidden;
  border-radius:0 0 5px 5px;
}
.perf-table th{
  font-size:11px;font-weight:700;padding:6px 12px;
  border:1px solid rgba(255,255,255,.12);text-align:center;vertical-align:middle;
}
.perf-table td{
  font-size:12px;padding:5px 12px;border:1px solid #e8ecf1;
  text-align:right;vertical-align:middle;
}

/* 1단 그룹 헤더 */
.th-fixed    {background:#2c3a4a!important;color:#cdd5df!important;}
.th-catA-sub {background:#1558a0!important;color:#fff!important;}
.th-catA-open{background:#962d22!important;color:#fff!important;}
.th-catB     {background:#5a2d9c!important;color:#fff!important;}

/* 2단 서브 헤더 */
.sub-sub {background:#e0eeff!important;color:#1c3d6b!important;font-size:10px;font-weight:700;}
.sub-open{background:#fde8e6!important;color:#7b241c!important;font-size:10px;font-weight:700;}
.sub-catB{background:#ede9fe!important;color:#3d1d8a!important;font-size:10px;font-weight:700;}

/* 데이터 행 */
.perf-table tbody tr:hover td{background:#f2f7ff!important;}

/* 구분·상품 셋 (fixed 라벨열) */
.td-val1{
  text-align:center!important;font-weight:700;font-size:11px;
  color:#2c3a4a;background:#f4f6f9!important;
  border-right:2px solid #c8d0da!important;min-width:68px;
}
.td-val2{
  text-align:left!important;font-size:12px;color:#374151;padding-left:9px!important;
  background:#f4f6f9!important;border-right:2px solid #c8d0da!important;min-width:118px;
}

/* 숫자 셀 */
.n-carry{color:#3182ce;}
.n-cur  {color:#38a169;}
.n-open {color:#e53e3e;}
.n-total{
  color:#1a202c;font-weight:700;
  background:#eef2f8!important;border-left:2px solid #c8d0da!important;
}
.n-sale {
  color:#6d28d9;font-weight:700;
  background:#f0ebff!important;border-left:2px solid #c4b5fd!important;min-width:88px;
}
.n-hvc{color:#a0aec0;font-size:11px;}
.n-dash{color:#d1d5db;}
/* HVC 괄호 표시: 100(80) */
.n-sc{font-size:inherit;color:#9f7aea;font-weight:700;margin-left:2px;}

/* empty */
.empty-state{padding:40px;text-align:center;color:#999;background:#fff;margin:10px 0;border-radius:4px;border:1px solid #ddd;min-width:300px;}

/* ── 모달 공통 ── */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:9000;align-items:flex-start;justify-content:center;padding-top:60px;}
.modal-overlay.open{display:flex;}
.modal-box{background:#fff;border-radius:6px;box-shadow:0 4px 30px rgba(0,0,0,.3);width:860px;max-width:96vw;max-height:88vh;overflow-y:auto;}
.modal-header{background:#1a4a8a;color:#fff;padding:10px 16px;border-radius:6px 6px 0 0;display:flex;justify-content:space-between;align-items:center;}
.modal-header h3{margin:0;font-size:14px;}
.modal-close{background:none;border:none;color:#fff;font-size:18px;cursor:pointer;}
.modal-body{padding:14px 16px;}
.section-title{font-weight:bold;color:#1a4a8a;margin:12px 0 6px;font-size:12px;border-left:3px solid #2563b0;padding-left:7px;}
.color-picker-row{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 10px;}
.color-dot{width:22px;height:22px;border-radius:50%;cursor:pointer;border:2px solid transparent;}
.color-dot.sel{border-color:#222;box-shadow:0 0 0 2px #fff inset;}
.form-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;flex-wrap:wrap;}
.form-row label{font-weight:bold;color:#555;white-space:nowrap;min-width:60px;}
.form-row select,.form-row input[type=text],.form-row input[type=number]{border:1px solid #bbb;border-radius:3px;padding:3px 6px;height:26px;font-size:12px;}
.form-row select{min-width:160px;}
.btn-primary{background:#2563b0;color:#fff;border:none;border-radius:3px;padding:5px 16px;cursor:pointer;font-size:12px;}
.btn-primary:hover{background:#1a4a8a;}
.btn-secondary{background:#888;color:#fff;border:none;border-radius:3px;padding:5px 14px;cursor:pointer;font-size:12px;}
.btn-secondary:hover{background:#555;}
.list-grid{border:1px solid #ddd;border-radius:3px;margin-top:8px;}
.grid-head{background:#f0f0f0;padding:5px 8px;font-weight:bold;color:#555;font-size:11px;border-bottom:1px solid #ddd;display:grid;align-items:center;gap:6px;}
.grid-row{padding:5px 8px;border-bottom:1px solid #f0f0f0;display:grid;align-items:center;gap:6px;}
.grid-row:last-child{border-bottom:none;}
.grid-row:hover{background:#f8f8ff;}
.grid-row.drag-over{border-top:2px solid #2563b0;background:#eef4ff;}
.row-grid .grid-head,.row-grid .grid-row{grid-template-columns:28px 1fr 1fr 46px 28px 28px;}
.col-grid .grid-head,.col-grid .grid-row{grid-template-columns:28px 1fr 120px 46px 28px 28px;}
.ta-c{text-align:center;}
.btn-onoff{border:none;border-radius:10px;padding:2px 8px;font-size:10px;cursor:pointer;}
.btn-onoff.on{background:#2ecc71;color:#fff;}
.btn-onoff.off{background:#bbb;color:#555;}
.btn-edit-sm{background:none;border:none;color:#2563b0;cursor:pointer;padding:2px 5px;font-size:13px;}
.btn-danger-sm{background:none;border:none;color:#c0392b;cursor:pointer;padding:2px 5px;font-size:13px;}
.color-badge{display:inline-block;width:11px;height:11px;border-radius:2px;vertical-align:middle;margin-right:3px;}
.add-box{background:#f9f9f9;border:1px solid #ddd;border-radius:3px;padding:10px 12px;margin-bottom:10px;}
.field-pair-wrap{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:6px 8px;background:#f0f0f8;border:1px solid #ddd;border-radius:3px;margin-bottom:6px;}
.field-col{display:flex;flex-direction:column;gap:3px;}
.field-col label{font-size:10px;color:#888;}
.field-col select{border:1px solid #bbb;border-radius:3px;padding:3px 6px;height:26px;font-size:12px;min-width:140px;}
/* 모달 내 그룹 표시 */
.modal-group-badge{display:inline-block;background:#7b4fa6;color:#fff;border-radius:3px;padding:1px 8px;font-size:11px;margin-left:6px;}
.modal-group-badge.default{background:#1a5fa8;}