/* ===== 판매채널 손익 (v2) ===== */

/* 헤더 */
.ch-header{display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px;background:var(--bg);flex-shrink:0}
.ch-header-left{display:flex;align-items:center;gap:10px}
.ch-header-icon{width:32px;height:32px;border-radius:8px;background:var(--green);color:#F7F3ED;display:flex;align-items:center;justify-content:center;font-size:16px}
.ch-header-title{margin:0;font-size:18px;font-weight:800;color:var(--txt);letter-spacing:-.02em}
.ch-back-btn{background:none;border:none;font-size:12px;font-weight:600;color:var(--txt2);cursor:pointer;padding:6px 10px;border-radius:6px;font-family:inherit;transition:all .15s;margin-right:4px}
.ch-back-btn:hover{background:var(--bg2);color:var(--txt)}
.ch-header-right{display:flex;align-items:center;gap:8px}
.ch-month-sel{font-size:12px;padding:8px 12px;border-radius:6px;border:1px solid var(--border);background:var(--bg3);color:var(--txt);font-family:inherit;cursor:pointer;outline:none}
.ch-month-sel:focus{border-color:var(--green)}
.ch-hdr-btn{font-size:12px;padding:8px 14px;border-radius:6px;border:1px solid var(--border);background:var(--bg3);color:var(--txt);cursor:pointer;font-weight:600;font-family:inherit;display:inline-flex;align-items:center;gap:6px;transition:all .15s}
.ch-hdr-btn:hover{background:var(--bg2);border-color:var(--border2)}
.ch-hdr-btn:disabled{opacity:.5;cursor:not-allowed}
.ch-hdr-btn-primary{background:var(--green);color:#F7F3ED;border-color:var(--green);font-weight:700}
.ch-hdr-btn-primary:hover{background:#2D3328;border-color:#2D3328}

/* 동기화 스피너 */
.ch-sync-dot{width:7px;height:7px;border-radius:50%;background:#5B6B52;display:inline-block;flex-shrink:0}
.ch-syncing{width:12px;height:12px;border:2px solid var(--border);border-top-color:var(--green);border-radius:50%;display:inline-block;animation:chSpin .7s linear infinite;flex-shrink:0}
@keyframes chSpin{to{transform:rotate(360deg)}}

/* 팁 배너 */
.ch-tip-banner{margin:0 22px 14px;padding:11px 14px;background:rgba(186,117,23,0.08);border-left:3px solid #BA7517;border-radius:6px;display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#6B4F1A;flex-shrink:0}
.ch-tip-close{background:none;border:none;font-size:14px;color:var(--txt3);cursor:pointer;padding:4px 8px;border-radius:4px;font-family:inherit}
.ch-tip-close:hover{color:var(--txt);background:rgba(168,152,128,0.15)}

/* 본문 */
.ch-body{flex:1;overflow-y:auto;padding:0 22px 22px;display:flex;flex-direction:column;gap:14px;background:var(--bg)}

/* 빈 상태 */
.ch-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:80px 20px;text-align:center;gap:12px;color:var(--txt2);font-size:14px}
.ch-empty-icon{font-size:48px;opacity:.5}
.ch-empty-btn{padding:9px 18px;border-radius:6px;border:none;background:var(--green);color:#F7F3ED;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;margin-top:4px}

/* ── 채널 카드 그리드 ── */
.ch-card-grid{display:grid;gap:12px;flex-shrink:0}
@media(max-width:900px){.ch-card-grid{grid-template-columns:repeat(2,1fr) !important}}
@media(max-width:560px){.ch-card-grid{grid-template-columns:1fr !important}}

.ch-channel-card{background:var(--bg3);border:1px solid var(--border);border-radius:12px;padding:16px 18px;cursor:pointer;transition:all .15s;display:flex;flex-direction:column}
.ch-channel-card:hover{border-color:var(--border2);transform:translateY(-1px);box-shadow:0 4px 12px rgba(45,51,40,0.06)}
.ch-cc-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.ch-cc-name{display:flex;align-items:center;gap:7px;font-size:14px;font-weight:700;color:var(--txt)}
.ch-cc-icon{font-size:18px}
.ch-cc-orders{font-size:11px;color:var(--txt3)}
.ch-cc-lbl{font-size:10px;font-weight:700;color:var(--txt2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.ch-cc-rev{font-size:22px;font-weight:800;color:var(--txt);letter-spacing:-.02em;margin-bottom:10px}
.ch-cc-profit{font-size:15px;font-weight:800;margin-bottom:12px}
.ch-cc-margin{padding:7px 10px;border-radius:6px;text-align:center;font-size:13px;font-weight:800;margin-top:auto}

/* 채널 추가 카드 */
.ch-add-card{align-items:center;justify-content:center;border:1px dashed var(--border2);background:transparent;color:var(--txt3);min-height:200px}
.ch-add-card:hover{border-color:var(--green);color:var(--green);background:rgba(91,107,82,0.04);transform:none;box-shadow:none}
.ch-add-card-icon{font-size:32px;margin-bottom:8px;font-weight:300}
.ch-add-card-text{font-size:13px;font-weight:600}

/* ── 합계 박스 ── */
.ch-summary-bar{background:var(--bg3);border:1px solid var(--border2);border-radius:12px;padding:16px 22px;display:grid;grid-template-columns:repeat(3,1fr);gap:20px;flex-shrink:0}
.ch-sum-cell{}
.ch-sum-lbl{font-size:10px;font-weight:700;color:var(--txt2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.ch-sum-val{font-size:24px;font-weight:800;color:var(--txt);letter-spacing:-.02em}
.ch-sum-unit{font-size:14px;color:var(--txt3);font-weight:600;margin-left:3px}

/* ── 하단 탭 ── */
.ch-bottom-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);flex-shrink:0;margin-top:4px}
.ch-bt-tab{padding:11px 16px;font-size:13px;font-weight:600;color:var(--txt2);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s;font-family:inherit}
.ch-bt-tab:hover{color:var(--txt)}
.ch-bt-tab.active{color:var(--green);font-weight:700;border-bottom-color:var(--green)}
.ch-bt-content{flex:1;min-height:200px}

/* 카드 (탭 내부 공통) */
.ch-card{background:var(--bg3);border-radius:12px;border:1px solid var(--border);padding:18px 20px}
.ch-card-title{font-size:11px;font-weight:700;color:var(--txt2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:14px}

/* 추이 차트 */
.ch-trend-svg{width:100%;height:auto;display:block}
.ch-legend{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;padding-top:12px;border-top:1px solid var(--border)}
.ch-legend-item{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--txt2)}
.ch-legend-dot{width:8px;height:8px;border-radius:50%}

/* 판매내역 테이블 */
.ch-sales-wrap{overflow-x:auto;margin:0 -4px}
.ch-sales-table{width:100%;border-collapse:collapse;font-size:13px}
.ch-sales-table th{padding:9px 12px;text-align:left;font-size:11px;font-weight:700;color:var(--txt2);text-transform:uppercase;letter-spacing:.04em;border-bottom:1px solid var(--border);background:var(--bg);white-space:nowrap}
.ch-sales-table td{padding:10px 12px;border-bottom:1px solid var(--border);color:var(--txt);vertical-align:middle}
.ch-sales-table tr:hover td{background:var(--bg)}
.ch-mono{font-family:'SF Mono',Monaco,'Courier New',monospace;font-size:11px;color:var(--txt3)}
.ch-badge{padding:3px 8px;border-radius:4px;font-size:11px;font-weight:700}
.ch-map-ok{font-size:12px;color:#3B7A57;font-weight:600}
.ch-map-btn{font-size:11px;padding:4px 10px;border-radius:5px;border:1px solid var(--border);background:var(--bg);color:var(--txt2);cursor:pointer;font-weight:600;font-family:inherit;transition:all .15s}
.ch-map-btn:hover{border-color:var(--green);color:var(--green);background:rgba(91,107,82,0.05)}
.ch-link-btn{font-size:11px;padding:4px 10px;border-radius:5px;border:1px solid var(--border);background:var(--bg3);color:var(--txt2);cursor:pointer;font-weight:600;font-family:inherit;transition:all .15s}
.ch-link-btn:hover{border-color:var(--border2);color:var(--txt);background:var(--bg2)}
.ch-sales-stats{margin-top:12px;padding-top:12px;border-top:1px solid var(--border);font-size:11px;color:var(--txt3);text-align:right}

/* 광고비 탭 */
.ch-ads-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:8px}
.ch-ads-stat{background:var(--bg);border-radius:8px;padding:12px 14px}
.ch-ads-lbl{font-size:10px;font-weight:700;color:var(--txt2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:4px}
.ch-ads-val{font-size:18px;font-weight:800;color:var(--txt);letter-spacing:-.02em}
.ch-ads-row{display:flex;align-items:center;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border)}
.ch-ads-row:last-child{border-bottom:none}

/* 채널설정 탭 */
.ch-settings-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--border)}
.ch-settings-row:last-child{border-bottom:none}

/* ── KPI 카드 (채널 상세에서 사용) ── */
.ch-kpi-row{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;flex-shrink:0}
@media(max-width:900px){.ch-kpi-row{grid-template-columns:repeat(2,1fr)}}
.ch-kpi-card{background:var(--bg3);border-radius:10px;border:1px solid var(--border);padding:16px 18px}
.ch-kpi-lbl{font-size:11px;font-weight:600;color:var(--txt2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:8px}
.ch-kpi-val{font-size:22px;font-weight:800;color:var(--txt);letter-spacing:-.02em;margin-bottom:4px}
.ch-kpi-sub{font-size:11px;color:var(--txt3)}
.ch-up{color:#3B7A57}
.ch-dn{color:#C0392B}

/* 채널 상세 내부 탭 */
.ch-detail-tabs{display:flex;gap:0;margin-bottom:14px;border-bottom:1px solid var(--border)}
.ch-detail-tab{background:none;border:none;border-bottom:2px solid transparent;padding:9px 16px;font-size:13px;font-weight:600;color:var(--txt2);cursor:pointer;font-family:inherit;transition:all .15s}
.ch-detail-tab:hover{color:var(--txt)}
.ch-detail-tab.active{color:var(--green);border-bottom-color:var(--green)}

/* 상세 그리드 */
.ch-detail-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:900px){.ch-detail-grid{grid-template-columns:repeat(2,1fr)}}
.ch-detail-item{background:var(--bg);border-radius:8px;border:1px solid var(--border);padding:12px 14px}
.ch-detail-lbl{font-size:10px;font-weight:600;color:var(--txt3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.ch-detail-val{font-size:14px;font-weight:700;color:var(--txt)}
.ch-detail-val.big{font-size:18px}
.ch-editable{width:100%;font-size:14px;font-weight:700;color:var(--txt);border:none;background:none;outline:none;font-family:inherit;padding:0}
.ch-editable:focus{color:var(--green);border-bottom:1px solid var(--green)}

/* ════════════════════════════════════════
   모달 (공통)
   ════════════════════════════════════════ */
.ch-add-overlay{display:none;position:fixed;inset:0;background:rgba(45,51,40,0.45);z-index:10500;align-items:center;justify-content:center}
.ch-add-overlay.open{display:flex}
.ch-modal{background:var(--bg3);border-radius:14px;width:420px;max-width:96vw;max-height:90vh;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 20px 60px rgba(45,51,40,0.2)}
.ch-modal-head{display:flex;align-items:center;justify-content:space-between;padding:16px 22px;border-bottom:1px solid var(--border);flex-shrink:0}
.ch-modal-title{font-size:15px;font-weight:800;color:var(--txt);letter-spacing:-.02em}
.ch-modal-x{font-size:18px;color:var(--txt3);cursor:pointer;padding:4px 8px;border-radius:4px;line-height:1}
.ch-modal-x:hover{color:var(--txt);background:var(--bg2)}
.ch-modal-body{padding:18px 22px;overflow-y:auto;flex:1}
.ch-modal-foot{display:flex;gap:8px;justify-content:flex-end;padding:14px 22px;border-top:1px solid var(--border);background:var(--bg);flex-shrink:0}

/* 폼 */
.ch-form-row{margin-bottom:14px}
.ch-form-lbl{font-size:11px;font-weight:600;color:var(--txt2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:5px}
.ch-form-input{width:100%;font-size:13px;padding:9px 12px;border-radius:8px;border:1px solid var(--border);background:var(--bg);color:var(--txt);outline:none;font-family:inherit;transition:border-color .15s;box-sizing:border-box}
.ch-form-input:focus{border-color:var(--green)}
.ch-form-input::placeholder{color:var(--txt3)}
.ch-cfg-section{font-weight:700;font-size:11px;color:var(--txt2);text-transform:uppercase;letter-spacing:.06em;margin:14px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--border)}
.ch-cfg-section:first-child{margin-top:0}

/* 모달 버튼 */
.ch-btn-cancel{padding:9px 18px;border-radius:8px;border:1px solid var(--border);background:var(--bg3);color:var(--txt2);font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:all .15s}
.ch-btn-cancel:hover{background:var(--bg2);color:var(--txt)}
.ch-btn-save{padding:9px 20px;border-radius:8px;border:none;background:var(--green);color:#F7F3ED;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s}
.ch-btn-save:hover{background:#2D3328}
.ch-btn-save:disabled{opacity:.5;cursor:not-allowed}

/* 판매입력 모달: 상품 검색 */
.ch-search-list{display:none;margin-top:4px;border:1px solid var(--border);border-radius:8px;background:var(--bg3);max-height:240px;overflow-y:auto}
.ch-search-item{padding:9px 12px;border-bottom:1px solid var(--border);cursor:pointer;font-size:13px;color:var(--txt)}
.ch-search-item:last-child{border-bottom:none}
.ch-search-item:hover{background:var(--bg2)}

/* 판매입력 자동계산 박스 */
.ch-calc-box{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px 14px;margin-top:10px}
.ch-calc-row{display:flex;justify-content:space-between;align-items:center;font-size:12px;padding:4px 0;color:var(--txt2)}
.ch-calc-row span:last-child{color:var(--txt);font-weight:600}
.ch-calc-tot{display:flex;justify-content:space-between;align-items:center;padding:8px 0 0;margin-top:6px;border-top:1px solid var(--border);font-size:14px;font-weight:800;color:var(--txt)}
.ch-calc-rate{font-size:11px;font-weight:800;padding:2px 7px;border-radius:100px;margin-left:6px}

/* 광고비 입력 모달 */
.ch-ads-input-row{display:flex;align-items:center;gap:10px;margin-bottom:10px}
.ch-ads-input-row label{flex:1;font-size:13px;font-weight:600;color:var(--txt);display:flex;align-items:center;gap:6px}
.ch-ads-input{flex:0 0 180px;text-align:right;font-weight:700}

/* 매핑 모달 */
.ch-map-source{background:var(--bg);border-radius:8px;padding:14px;margin-bottom:14px}
.ch-map-src-lbl{font-size:10px;font-weight:700;color:var(--txt2);text-transform:uppercase;letter-spacing:.04em;margin-bottom:6px}
.ch-map-src-name{font-size:14px;font-weight:700;color:var(--txt);margin-bottom:4px;word-break:break-all}
.ch-map-src-id{font-size:11px}
.ch-map-arrow{text-align:center;font-size:14px;color:var(--txt3);margin:8px 0 12px}
.ch-map-list{margin-top:8px;border:1px solid var(--border);border-radius:8px;background:var(--bg3);max-height:340px;overflow-y:auto}
.ch-map-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--border);cursor:pointer;transition:background .15s}
.ch-map-item:last-child{border-bottom:none}
.ch-map-item:hover{background:var(--bg2)}
.ch-map-item.current{background:rgba(91,107,82,0.06)}
.ch-map-code{background:var(--bg2);padding:2px 6px;border-radius:4px}
.ch-confidence{font-size:11px;font-weight:700;padding:3px 8px;border-radius:100px;flex-shrink:0}
.ch-confidence.good{background:rgba(91,107,82,0.12);color:#3B7A57}
.ch-confidence.warn{background:rgba(186,117,23,0.12);color:#854F0B}
.ch-confidence.bad{background:rgba(192,57,43,0.1);color:#C0392B}