/* gonggu.css — 공구(공동구매) 채널 전용 스타일  (담당: kwkim + dglee)
   common.css 뒤에 로드해 캐스케이드 동일 유지(대시보드 토큰 변수 --surface/--line/--muted 등 사용).
   ⚠ common.css 를 고치는 게 아니라, 여기에 공구 전용 규칙(오버라이드)만 추가한다.

   지금은 빈 골격이다. dglee 가 공구 표/카드/차트 스타일을 여기에 추가한다(perf-channel.css 패턴 참고). */

/* ── SPA 뷰 전환 ── 공구 뷰(.view-gonggu)일 때 다른 섹션(퍼포먼스 테이블 등)을 숨겨 공구만 단독 표시.
   cost.css의 .view-cost / chat.css의 .view-chat 패턴과 동일(이 규칙이 없으면 퍼포먼스 표 밑에 공구가 같이 나옴). */
.container.view-gonggu > .section:not(#gongguView),
.container.view-gonggu > #bannerSlot,
.container.view-gonggu > #emptySlot { display: none; }

/* ── 공구 뷰 컨테이너 ── */
#gongguView { min-width: 0; }

/* ── "개발 예정" 플레이스홀더 (빈 골격 — 구현 시작하면 제거/대체) ── */
.gonggu-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48vh;
  padding: 32px 16px;
}
.gonggu-placeholder-card {
  text-align: center;
  max-width: 420px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg, 16px);
  box-shadow: var(--shadow-card, 0 1px 2px rgba(46, 51, 47, .08));
  padding: 40px 32px;
}
.gonggu-placeholder-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--surface-2, #f4f5f4);
  color: var(--brand, #2e332f);
}
.gonggu-placeholder-title {
  margin: 0 0 8px;
  font-size: 17px;
  font-weight: 700;
  color: var(--text, #2e332f);
}
.gonggu-placeholder-desc {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted, #6b716c);
}

/* ── 공구 성과 화면(카드 + 인플루언서→회차→일별 3단 테이블) ── */
.gonggu-wrap { padding: 0 0 40px; }   /* 좌우 0 — 컨테이너(main.container) 패딩 32px 외 추가 여백 금지: 퍼포먼스·시스템과 콘텐츠 폭 일치 */

/* ── 기간 설정 바(상단) ── 퍼포먼스 채널과 동일 디자인. 지금은 화면만(표 데이터엔 미연결) ── */
/* 크기를 퍼포먼스 채널 기간 설정(common.css .period/.preset-btn/.unit-btn)과 동일하게 맞춤 */
.gg-period { margin: 0 0 22px; }   /* 퍼포먼스 .section 과 동일: 상단 0, 하단 22px */
.gg-period-title { font-size: 13px; font-weight: 700; color: var(--text-2); margin: 0 0 10px; letter-spacing: -.01em; }
.gg-period-box {
  background: var(--surface); border: none; border-radius: var(--radius);
  padding: 18px 20px; box-shadow: var(--shadow-card);
  display: flex; flex-direction: column; gap: 12px;
}
/* 기간 트리거 — 퍼포먼스 .cal-trigger(common.css 967~982행) 값 그대로 복제. 셀렉터 이름만 공구 것.
   align-self:flex-start만 공구 고유(세로 flex 배치용, 구조 유지). letter-spacing은 정본에 없어 제거(트리거 폭 정본 일치). */
.gg-daterange {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px; min-height: 40px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease, background .12s ease;
}
.gg-daterange:hover { border-color: var(--sage); background: var(--surface-3); }
.gg-daterange[aria-expanded="true"] { border-color: var(--brand); box-shadow: 0 0 0 3px var(--sage-tint); }
.gg-cal-ico { width: 16px; height: 16px; flex: 0 0 auto; color: var(--brand); }
/* 기간 드롭다운 캐럿 — 퍼포먼스 .cal-caret 정본(common.css 985~991행) 값 그대로 복제.
   부모 셀렉터만 .cal-trigger → .gg-daterange 로 교체(트리거의 패딩/보더 등 레이아웃 스타일은 딸려오지 않음). */
/* 기간 범위 텍스트 — 퍼포먼스 정본(common.css 983~984행) 값 그대로. 셀렉터만 .gg-daterange 로 교체.
   '~'(.sep)를 가늘게(500)·흐리게(--muted) 렌더해야 정본과 같은 인상이 된다. */
.gg-daterange .cal-range-text { white-space: nowrap; }
.gg-daterange .cal-range-text .sep { color: var(--muted); margin: 0 6px; font-weight: 500; }

.gg-daterange .cal-caret {
  width: 0; height: 0; margin-left: 2px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--muted); flex: 0 0 auto;
  transition: transform .15s ease;
}
.gg-daterange[aria-expanded="true"] .cal-caret { transform: rotate(180deg); border-top-color: var(--brand); }
.gg-chips { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; }
/* 기간 프리셋 칩 — 퍼포먼스 .preset-btn(common.css 949~961행) 값 그대로 복제.
   항목/라벨/개수/클릭 동작은 JS 소관(무변경) — 여기선 시각 속성만. */
.gg-chip {
  background: var(--surface); color: var(--charcoal);
  border: 1px solid var(--line); border-radius: var(--radius-pill);
  padding: 7px 15px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.gg-chip:hover { background: var(--surface-2); border-color: var(--line-strong); color: var(--brand); }
.gg-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.gg-chip.on:hover { background: var(--brand-2); color: #fff; }
/* 단위 세그먼트 — 퍼포먼스 .unit-toggle/.unit-btn(common.css 1109~1127행) 값 그대로 복제.
   align-self:flex-start만 공구 고유(세로 flex 배치용, 구조 유지). */
.gg-gran {
  display: inline-flex; align-self: flex-start; align-items: stretch; gap: 2px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 3px;
}
.gg-granbtn {
  background: transparent; color: var(--charcoal);
  border: none; border-radius: var(--radius-pill);
  padding: 6px 16px; font-size: 12px; font-weight: 600;
  font-family: inherit; cursor: pointer; line-height: 1.4;
  transition: background .12s ease, color .12s ease;
}
.gg-granbtn:hover { color: var(--brand); }
.gg-granbtn.on { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-card); }

/* 날짜 직접 지정 팝오버 */
.gg-dr-wrap { align-self: flex-start; position: relative; }
.gg-datepop {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 60; min-width: 236px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md);
  box-shadow: var(--shadow-pop); padding: 12px;
}
.gg-dp-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; font-size: 12.5px; font-weight: 700; color: var(--text-2); }
.gg-dp-row input[type="date"] {
  font-size: 12.5px; padding: 6px 8px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  color: var(--text); background: var(--surface); font-variant-numeric: tabular-nums;
}
.gg-dp-note { font-size: 11px; color: var(--muted); margin: 2px 0 10px; }
.gg-dp-actions { display: flex; justify-content: flex-end; gap: 8px; }
.gg-dp-actions button { font-size: 12.5px; font-weight: 700; padding: 6px 14px; border-radius: var(--radius-sm); cursor: pointer; border: 1px solid var(--line-strong); background: var(--surface); color: var(--text-2); letter-spacing: -.2px; }
.gg-dp-cancel:hover { background: var(--surface-2); }
.gg-dp-apply { background: var(--brand); color: #fff; border-color: var(--brand); }
.gg-dp-apply:hover { background: var(--brand-2); }

/* 인플루언서 공유용 표 — 검색/회차 선택 + 스프레드시트 느낌(노랑 헤더/파랑 본문/분홍 SUM) */
.gg-share-ctrl { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 2px 12px; }
.gg-share-ctrl input, .gg-share-ctrl select {
  font-size: 13px; padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-md);
  color: var(--text); background: var(--surface); min-height: 40px; font-weight: 600;
}
.gg-share-ctrl input { min-width: 220px; }
.gg-share-ctrl select { min-width: 200px; cursor: pointer; }
/* 인플루언서 검색 자동완성(타이핑하면 실시간 필터) */
.gg-sac { position: relative; }
.gg-sac-in { width: 220px; }
.gg-sac-list {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 70; width: 220px; max-height: 280px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-pop); padding: 4px;
}
.gg-sac-item { padding: 8px 12px; font-size: 13px; font-weight: 600; color: var(--text); border-radius: var(--radius-sm); cursor: pointer; white-space: nowrap; }
.gg-sac-item:hover { background: var(--surface-2); }
.gg-sac-empty { padding: 10px 12px; font-size: 12.5px; color: var(--muted); }
.gg-share-wrap { overflow-x: auto; margin: 0 2px 20px; border-radius: var(--radius-sm); }
.gg-share { border-collapse: collapse; font-size: 12.5px; min-width: 760px; width: 100%; }
.gg-share th, .gg-share td { border: 1px solid #dfe3ea; padding: 8px 12px; text-align: center; white-space: nowrap; }
.gg-share thead th { background: #fdebc9; color: #6a5327; font-weight: 800; }
.gg-share tbody td { background: #e6edf9; color: #2a3340; }
.gg-share .gg-sh-date { background: #d2dff3; font-weight: 800; vertical-align: middle; line-height: 1.5; }
.gg-share .gg-sh-inf { font-size: 13px; }
.gg-share .gg-sh-per { font-size: 11.5px; color: #4a5468; font-weight: 700; }
.gg-share .gg-sh-prod { background: #cdd9ef; font-weight: 800; vertical-align: middle; border-right: 2px solid #a7b9d9; }
.gg-share .gg-sh-num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.gg-share tfoot .gg-share-sum td { background: #f6d6d1; color: #7a2e26; font-weight: 800; }
/* 제품 그룹 경계 — 그룹이 바뀌는 첫 행 위에 진한 구분선(제품명 구분 명확) */
.gg-share tbody tr.gg-sh-gstart td { border-top: 2px solid #8ba0c6; }

/* ── 공구 매출 목표(월 전체) ── 퍼포먼스 채널 .pt-* 재사용(common.css 변수) ── */
#gongguTargets { margin: 0 2px 6px; }
.gg-sec-title { margin: 0; }
/* 월 버튼을 제목 바로 옆으로(양끝 정렬 대신 왼쪽 정렬) */
.gg-pt-head { justify-content: flex-start; gap: 16px; }
.gg-tgrid { display: flex; }
.gg-tcard { width: 100%; max-width: 420px; gap: 10px; }
/* 이번달 공구 목표 대비 달성 — 진행 바 */
.gg-tgt { margin: 2px 0 2px; }
.gg-tgt-row { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 6px; }
.gg-tgt-label { font-size: 12px; font-weight: 600; color: var(--muted); }
.gg-tgt-pct { font-size: 13px; font-weight: 800; color: var(--brand); font-variant-numeric: tabular-nums; }
.gg-tgt-track { height: 7px; border-radius: 999px; background: var(--surface-2); overflow: hidden; }
.gg-tgt-fill { height: 100%; border-radius: 999px; background: var(--brand); transition: width .3s ease; }

/* ── 공구 매출(좌) + 인플루언서 일정(우) 2단 배치 ── */
.gg-top-row { display: flex; gap: 20px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 4px; }
/* 왼쪽 열을 오른쪽 달력 높이에 맞춰 늘려(align-self:stretch), 콘텐츠 패널이 그 남는 높이를 채운다. */
.gg-top-left { flex: 0 0 420px; max-width: 420px; display: flex; flex-direction: column; gap: 18px; align-self: stretch; }
.gg-top-right { flex: 1 1 460px; min-width: 0; margin: 0 !important; }
.gg-top-right .gg-plan-head { margin-top: 0; }   /* 왼쪽 '공구 매출' 제목과 같은 높이 */

/* ── 인플루언서 콘텐츠 성과(매출 카드 아래 빈 공간) ── 성과만 압축 노출 */
.gg-ct-head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; }
.gg-ct-head .gg-sec-title { margin: 0; }
.gg-ct-sub { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.gg-ct-empty {
  background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--radius);
  padding: 18px 16px; font-size: 12px; color: var(--muted); line-height: 1.7; text-align: center;
}
/* 콘텐츠 목록이 옆 달력 높이를 넘으면 목록만 스크롤(상한은 JS가 달력 높이로 설정) */
.gg-content { display: flex; flex-direction: column; min-height: 0; }
.gg-content .gg-ct-list { overflow-y: auto; padding-right: 3px; }
.gg-ct-list { display: flex; flex-direction: column; gap: 6px; }
.gg-ct-who { font-size: 12px; font-weight: 800; color: var(--brand); margin: 0 2px 8px; }
.gg-ct-item {
  display: block; text-decoration: none; color: inherit;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 8px 11px; box-shadow: var(--shadow-card);
  transition: border-color .12s ease, transform .12s ease;
}
.gg-ct-item:hover { border-color: var(--brand); transform: translateY(-1px); }
.gg-ct-item:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.gg-ct-top { display: flex; align-items: baseline; gap: 8px; margin-bottom: 3px; }
.gg-ct-inf { font-size: 12px; font-weight: 800; color: var(--text); }
.gg-ct-date { margin-left: auto; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gg-ct-cap {
  font-size: 12.5px; color: var(--text-2); line-height: 1.35; margin-bottom: 4px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gg-ct-stats { display: flex; gap: 10px; font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }
.gg-ct-stats .gg-ct-cmt { color: var(--brand); font-weight: 800; }   /* 댓글 = 링크 요청(구매 신호) 강조 */

/* ── 월별 공구 인플루언서 일정(트렐로) ── */
#gongguPlan { margin: 0 2px; }
.gg-plan-head { display: flex; align-items: center; gap: 10px; margin: 22px 2px 12px; min-height: 33px; }
.gg-plan-box {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow-card); overflow: hidden;
}
.gg-plan-row {
  display: grid; grid-template-columns: minmax(120px,220px) minmax(90px,150px) 1fr;
  gap: 12px; padding: 8px 14px; border-bottom: 1px solid #f0f2f6; font-size: 12px; align-items: center;
}
.gg-plan-scroll { max-height: 220px; overflow-y: auto; }   /* ~4명 노출, 나머지 스크롤 */
.gg-plan-scroll .gg-plan-row:last-child { border-bottom: 0; }
.gg-plan-h { background: #fafbfd; font-weight: 700; color: #6b7488; font-size: 11px; position: sticky; top: 0; z-index: 1; }
.gg-plan-inf { font-weight: 700; color: #1f2430; }
.gg-plan-prod { color: #3a4252; }
.gg-plan-period { color: #6b7280; font-variant-numeric: tabular-nums; }
.gg-plan-done .gg-plan-inf { text-decoration: line-through; color: #9aa3b8; }
/* 이미 시작된 일정 — 맨 아래로 정렬 + 살짝 흐리게 */
.gg-plan-started { background: #fafbfc; }
.gg-plan-started .gg-plan-inf { color: #6b7280; font-weight: 600; }

/* ── 공구 인플루언서 일정: 달력(월) — flex + 셀 px 고정폭(폭 접힘 원천 차단), iOS풍 디자인 ── */
.gg-plan-full { width: 100%; margin: 0 2px; }
.gg-cal { box-sizing: border-box; background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-card); padding: 10px 10px 12px; max-width: 100%; overflow: hidden; }
.gg-cal-load { min-height: 64px; }
.gg-cal-title { display: flex; align-items: center; justify-content: center; gap: 4px; text-align: center; font-size: 13.5px; font-weight: 800; color: #2a3340; letter-spacing: -.01em; margin: 0 0 8px; }
/* 월 이동 화살표(‹ ›) — 트렐로에 등록된 어느 달이든 넘겨본다(2026-08-03).
   제목 폭을 고정해 '2026년 7월'↔'2026년 12월' 처럼 글자수가 달라져도 화살표가 안 흔들리게. */
.gg-cal-title-t { min-width: 92px; }
.gg-cal-nav { -webkit-appearance: none; appearance: none; display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: #fff; color: #6b7484; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; transition: background .12s, color .12s, border-color .12s; }
.gg-cal-nav:hover { background: #f4f6fa; color: #2a3340; border-color: #d6dbe4; }
.gg-cal-nav:active { background: #e9edf3; }
.gg-cal-row { display: flex; }
.gg-cal-hc { flex: 0 0 auto; text-align: center; font-size: 11px; font-weight: 700; color: #8a93a6; padding: 1px 0 6px; }
.gg-cal-hc.sun { color: #e06666; }
.gg-cal-hc.sat { color: #5b8def; }
.gg-cal-c { flex: 0 0 auto; min-height: 56px; border-top: 1px solid #f0f2f6; padding-bottom: 3px; }
.gg-cal-dnum { display: flex; align-items: center; justify-content: center; height: 26px; font-size: 12px; font-weight: 600; color: #3a4252; }
.gg-cal-dnum.sun { color: #e06666; }
.gg-cal-dnum.sat { color: #5b8def; }
.gg-cal-c.oth .gg-cal-dnum { color: #d3d8e0; }
.gg-cal-today { display: inline-block; min-width: 20px; height: 20px; line-height: 20px; border-radius: 999px; background: #37b24d; color: #fff; font-size: 11px; font-weight: 800; padding: 0 4px; text-align: center; }   /* text-align 없으면 min-width 로 늘어난 여백에서 숫자가 왼쪽에 붙는다 */
.gg-cal-evs { display: flex; flex-direction: column; gap: 2px; }
.gg-cal-ev { height: 16px; line-height: 16px; font-size: 10px; font-weight: 700; color: #fff; padding: 0 4px; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; }
.gg-cal-ev.empty { background: transparent !important; }
.gg-cal-ev.s { border-top-left-radius: 6px; border-bottom-left-radius: 6px; margin-left: 3px; }
.gg-cal-ev.e { border-top-right-radius: 6px; border-bottom-right-radius: 6px; margin-right: 3px; }
.gg-cal-ev.done { opacity: .5; text-decoration: line-through; }
/* 막대 안 제품명 — 인플루언서명보다 한 단계 약하게(가늘고 반투명) 해서 이름이 먼저 읽히게 */
.gg-cal-ev-prod { font-weight: 600; opacity: .78; margin-left: 3px; }

/* ── 일별 성과 추이 차트 ── */
.gg-chart-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 22px 0 12px; }
.gg-legend { display: inline-flex; gap: 16px; align-items: center; }
.gg-lg { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 700; color: var(--text-2); }
.gg-lgdot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.gg-lg-rev, .gg-bar-rev { fill: var(--chart-sales); background: var(--chart-sales); }
.gg-lg-mgn, .gg-bar-mgn { fill: var(--chart-margin); background: var(--chart-margin); }
.gg-chart-box {
  background: var(--surface); border: none; border-radius: var(--radius);
  box-shadow: var(--shadow-card); padding: 22px 24px 24px;
}
.gg-svg { width: 100%; height: auto; display: block; }
.gg-grid { stroke: var(--grid); stroke-width: 1; }
.gg-axis { stroke: var(--line-2); stroke-width: 1; }
.gg-yl { fill: var(--text-2); font-size: 9px; font-variant-numeric: tabular-nums; }
.gg-xl { fill: var(--text-2); font-size: 9px; }
.gg-hit { fill: transparent; cursor: pointer; }
.gg-hit:hover { fill: rgba(120,140,130,.06); }

/* 그날 공구 시작 인플루언서 마커(세로 점선 + 세로 라벨) */
.gg-mk-line { stroke: #c7d2cb; stroke-width: 0.9; stroke-dasharray: 1.8 3.6; }
.gg-mk-txt { fill: #5f6f66; font-size: 9px; font-weight: 600; }
.gg-mk-bg { fill: rgba(255,255,255,.82); }   /* 라벨 뒤 반투명 흰 박스 — 정본 chart-module.js(rgba(255,255,255,.82))와 동일. 세로선 위에서도 글자 또렷 */

/* 차트 막대 호버 툴팁 — 그 날 진행 인플루언서 */
.gg-tip {
  position: fixed; z-index: 9999; min-width: 200px; max-width: 320px;
  background: var(--surface); color: var(--text); border: 1px solid var(--line-2); border-radius: var(--radius-sm);
  padding: 11px 13px; box-shadow: var(--shadow-pop);
  font-size: 12.5px; line-height: 1.5; pointer-events: none;
}
.gg-tip-hd { font-weight: 800; font-size: 13px; color: var(--text); }
.gg-tip-tot { color: var(--muted); font-size: 11.5px; margin: 2px 0 8px; }
.gg-tip-row { display: flex; justify-content: space-between; gap: 16px; margin: 3px 0; }
.gg-tip-nm { font-weight: 700; color: var(--text); }
.gg-tip-gp { font-weight: 600; color: var(--muted); font-size: 11px; }
.gg-tip-rv { color: var(--charcoal); font-variant-numeric: tabular-nums; white-space: nowrap; }
.gg-tip-none { color: var(--muted); }
.gg-tip-hint { margin-top: 8px; padding-top: 7px; border-top: 1px solid var(--line); font-size: 11px; font-weight: 700; color: var(--brand); }

/* ── 인플루언서 매출 베스트·워스트 ── */
.gg-rk-head { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 12px; }
.gg-rk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gg-rk-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: 8px 8px 10px; }
.gg-rk-title { font-size: 13px; font-weight: 800; padding: 10px 12px 8px; }
.gg-rk-best { color: var(--pos); }
.gg-rk-note { font-size: 11px; font-weight: 600; color: var(--muted); }
.gg-rk-worst { color: #c9744e; }
.gg-rk-row { display: grid; grid-template-columns: 22px 1fr auto auto; align-items: center; gap: 8px; padding: 8px 12px; border-top: 1px solid var(--line); font-size: 12.5px; }
.gg-rk-no { color: var(--muted); font-weight: 700; font-variant-numeric: tabular-nums; }
.gg-rk-nm { font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gg-rk-ym { font-weight: 600; color: var(--muted); font-size: 11.5px; }
.gg-rk-rev { font-weight: 800; color: var(--text); font-variant-numeric: tabular-nums; }
.gg-out { font-size: 11px; font-weight: 800; padding: 2px 8px; border-radius: var(--radius-pill); white-space: nowrap; background: #fdf0e6; color: #c9744e; }
.gg-out-x { background: var(--neg-bg); color: var(--neg); }
/* OUT 앞 매출 추세 막대(최근 5회차) */
.gg-rk-trend { display: inline-flex; align-items: center; gap: 7px; justify-self: end; }
.gg-spk { position: relative; display: inline-flex; align-items: flex-end; gap: 2px; height: 22px; padding: 0 1px; vertical-align: middle; }
.gg-spk-b { display: inline-block; width: 5px; min-height: 2px; background: #b9c2d0; border-radius: 1.5px; }
.gg-spk-b.low { background: #e8674f; }
.gg-spk-th { position: absolute; left: 0; right: 0; height: 0; border-top: 1px dashed #cdd3dd; pointer-events: none; }
@media (max-width: 639px) { .gg-rk-grid { grid-template-columns: 1fr; } }

/* ── 일자별 매트릭스 표(항목=행, 날짜=열) ── 퍼포먼스 채널 데일리표 스타일 ── */
.gg-dt-head { display: flex; align-items: baseline; gap: 10px; margin: 22px 0 12px; }
.gg-dt-sub { font-size: 12px; color: var(--muted); font-weight: 600; }
.gg-dtable {
  overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface);
  box-shadow: var(--shadow-card);
}
.gg-dt { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; font-size: 12px; font-variant-numeric: tabular-nums; }
.gg-dt th, .gg-dt td { padding: 8px 12px; white-space: nowrap; text-align: center; border-bottom: 1px solid var(--line); border-right: 1px solid var(--line); color: var(--charcoal); }
.gg-dt th:last-child, .gg-dt td:last-child { border-right: 0; }
.gg-dt thead th { font-size: 11px; font-weight: 700; color: var(--text-2); background: var(--thead-bg); position: sticky; top: 0; z-index: 1; }
.gg-dt .gg-dt-item { text-align: left; position: sticky; left: 0; z-index: 2; background: var(--surface); font-weight: 600; color: var(--charcoal); min-width: 150px; }
.gg-dt td.gg-dim, .gg-dt .gg-dt-sum.gg-dim { color: #b6bcc8; }
.gg-dt thead .gg-dt-item { z-index: 3; background: var(--thead-bg); }
.gg-dt .gg-dt-sum { background: var(--surface-2); font-weight: 700; color: var(--text); }
.gg-dt thead .gg-dt-sum { background: var(--thead-bg); }
.gg-dt-rev td, .gg-dt-rev th { font-weight: 800; color: var(--text); }
.gg-dt-day.gg-sun { color: var(--neg); }
.gg-dt-day.gg-sat { color: #3b6fd4; }
.gg-dt tbody tr:last-child th, .gg-dt tbody tr:last-child td { border-bottom: 0; }
.gg-dt td.gg-neg, .gg-dt .gg-dt-sum.gg-neg { color: var(--neg); }
.gg-card {
  display: inline-flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: 16px 22px; box-shadow: var(--shadow-card); margin-bottom: 16px; min-width: 240px;
}
.gg-card-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.gg-card-value { font-size: 28px; font-weight: 800; color: var(--text); letter-spacing: -.5px; font-variant-numeric: tabular-nums; }
.gg-card-target { font-size: 12px; font-weight: 700; color: #3b6fd4; }
.gg-card-target.gg-muted { color: var(--muted); font-weight: 600; }

.gonggu-table { border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); overflow-x: auto; box-shadow: var(--shadow-card); }
.gg-row {
  display: grid;
  /* 라벨 열은 내용에 맞춰 240~300px(옵션명↔판매가 간격 최소화) + 맨 끝 1fr 스페이서가 남는 폭 흡수 → 내용 왼쪽 정렬 */
  /* 금액 열(매출액·수수료·마진 등)은 억대 숫자가 안 잘리게 넉넉히 */
  grid-template-columns: minmax(240px,300px) 90px 68px 60px 126px 116px 126px 110px 102px 102px 126px 68px minmax(0,1fr);
  align-items: stretch; gap: 6px; padding: 7px 14px; min-width: 1440px;
  border-bottom: 1px solid var(--line); font-size: 12px; font-variant-numeric: tabular-nums;
}
.gg-row:last-child { border-bottom: 0; }
/* 세로 구분선 — 셀을 전체 높이로 채워 열 구분(마지막 실제 셀=마진율은 오른쪽 선 생략) */
.gg-c {
  display: flex; align-items: center; justify-content: flex-end;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--charcoal);
  border-right: 1px solid var(--line); padding-right: 6px;
}
.gg-name { display: flex; align-items: center; gap: 5px; justify-content: flex-start; border-right: 1px solid var(--line); }
.gg-row > .gg-c:last-of-type { border-right: 0; }
.gg-neg { color: var(--neg) !important; }

.gg-head { background: var(--thead-bg); color: var(--muted); font-weight: 700; font-size: 11.5px; position: sticky; top: 0; }
.gg-head .gg-c { color: var(--muted); }

.gg-month-head { cursor: pointer; font-weight: 800; background: var(--surface-2); }
.gg-month-head:hover { background: var(--thead-bg); }
.gg-month-head b { font-weight: 800; color: var(--text); font-size: 13.5px; }
.gg-month + .gg-month { border-top: 2px solid var(--line-2); }

.gg-inf-head { cursor: pointer; font-weight: 800; background: var(--surface); }
.gg-inf-head:hover { background: var(--surface-3); }
.gg-inf-head b { font-weight: 800; color: var(--text); }
.gg-inf-head .gg-name { padding-left: 18px; }

.gg-round-head { cursor: pointer; font-weight: 700; background: var(--surface-3); }
.gg-round-head:hover { background: var(--surface-2); }
.gg-round-head .gg-name { padding-left: 36px; color: var(--text); }

.gg-day-head { cursor: pointer; background: var(--surface); }
.gg-day-head:hover { background: var(--surface-3); }
.gg-day-head .gg-name { padding-left: 34px; font-weight: 600; color: var(--text); }

/* 옵션 행 — 제품명은 그룹 첫 옵션 앞에만(시트 병합셀처럼) */
.gg-opt { background: var(--surface-3); }
.gg-opt .gg-name { padding-left: 52px; color: var(--muted); }
.gg-opt .gg-c { color: var(--muted); }
.gg-pp { display: inline-block; min-width: 84px; font-weight: 700; color: var(--text); }
.gg-pfirst { border-top: 1px solid var(--line-2); }   /* 제품 그룹 구분선 */

.gg-arw { font-size: 9px; color: var(--muted); width: 10px; display: inline-block; }
/* ── 표 펼침 캐럿 — daily-table.css의 .d-chev 재사용(index.html에서 이미 로드, 기본 스타일 중복정의 안 함).
   공구 표는 기본 접힘이라 head 행에 .is-collapsed를 초기 부여 → -90°(›), 펼치면 제거 → 기본 아래 쉐브론(⌄).
   회전 규칙 방향은 퍼포먼스 정본(.is-collapsed → rotate(-90deg))과 동일. 회전 애니메이션은 .d-chev의 transition이 처리. ── */
.gg-row.is-collapsed .d-chev { transform: rotate(-90deg); }
.gg-month-head:hover .d-chev,
.gg-inf-head:hover .d-chev,
.gg-day-head:hover .d-chev { color: var(--brand); }
.gg-sub { font-size: 11px; font-weight: 600; color: var(--muted); }
.gg-empty, .gg-loading { padding: 28px; text-align: center; color: var(--muted); font-size: 13px; }

/* 스크롤 표: 헤더 행과 모든 그룹 래퍼가 내용 폭(행 폭)까지 늘어나야
   행 배경·가로 구분선(월 사이 등)이 오른쪽 끝(마진율 열)까지 이어짐.
   래퍼가 좁으면 마진율 열이 배경/선 밖으로 떠 보임. */
.gonggu-table > .gg-head,
.gonggu-table .gg-month, .gonggu-table .gg-month-body,
.gonggu-table .gg-inf, .gonggu-table .gg-inf-body,
.gonggu-table .gg-round, .gonggu-table .gg-round-body,
.gonggu-table .gg-day, .gonggu-table .gg-day-body { min-width: max-content; }

/* ── 이벤트비 입력 칸(인플루언서 통합 줄) — 클릭하면 팝업 ── */
.gg-ev-edit { cursor: pointer; }
.gg-ev-edit:hover { background: var(--sage-tint, #eaf3ee); border-radius: 6px; }
.gg-ev-pen { font-size: 10px; color: var(--brand, #3d7a5a); opacity: .5; margin-left: 4px; }
.gg-ev-edit:hover .gg-ev-pen { opacity: 1; }

/* ── 이벤트비 입력 팝업(모달) ── */
.gg-ev-ov { position: fixed; inset: 0; z-index: 10000; background: rgba(16,24,40,.42);
  display: flex; align-items: center; justify-content: center; padding: 20px; }
.gg-ev-ov[hidden] { display: none; }
.gg-ev-dlg { width: 620px; max-width: 94vw; max-height: 88vh; overflow: auto;
  background: var(--surface, #fff); border: 1px solid var(--line, #ECEEF1);
  border-radius: var(--radius, 18px); box-shadow: 0 12px 40px rgba(16,24,40,.22); padding: 20px 22px 18px; }
.gg-ev-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.gg-ev-title { font-size: 16px; font-weight: 800; color: var(--text, #1A1D21); }
.gg-ev-sub { font-size: 12.5px; font-weight: 600; color: var(--muted, #79818B); margin-top: 3px; }
.gg-ev-x { border: none; background: transparent; font-size: 16px; color: var(--muted); cursor: pointer; line-height: 1; padding: 2px 4px; }
.gg-ev-x:hover { color: var(--text); }
.gg-ev-cols, .gg-ev-row { display: grid; grid-template-columns: 1fr 104px 76px 108px 34px; gap: 8px; align-items: center; }
.gg-ev-cols { font-size: 11px; font-weight: 700; color: var(--muted); padding: 0 2px 7px; }
.gg-ev-cols span:nth-child(2), .gg-ev-cols span:nth-child(3), .gg-ev-cols span:nth-child(4) { text-align: right; }
.gg-ev-rows { display: flex; flex-direction: column; gap: 8px; }
.gg-ev-pcell { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.gg-ev-prod, .gg-ev-name, .gg-ev-cost, .gg-ev-qty { font-size: 13px; font-family: inherit; color: var(--text);
  background: var(--surface); border: 1px solid var(--line-strong, #D6DAE0); border-radius: 8px;
  padding: 7px 9px; width: 100%; box-sizing: border-box; }
.gg-ev-cost, .gg-ev-qty { text-align: right; font-variant-numeric: tabular-nums; }
.gg-ev-cost[readonly] { background: var(--surface-2, #F4F5F7); color: var(--text-2, #4A5159); }
.gg-ev-amt { text-align: right; font-size: 13px; font-weight: 700; color: var(--text); font-variant-numeric: tabular-nums; }
.gg-ev-del { border: none; background: transparent; cursor: pointer; font-size: 14px; opacity: .55; padding: 4px; }
.gg-ev-del:hover { opacity: 1; }
.gg-ev-add { margin-top: 12px; width: 100%; border: 1px dashed var(--line-strong, #D6DAE0); background: var(--surface);
  color: var(--brand, #3d7a5a); font-weight: 700; font-size: 13px; border-radius: 10px; padding: 9px; cursor: pointer; }
.gg-ev-add:hover { background: var(--surface-2); }
.gg-ev-ft { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 16px; border-top: 1px solid var(--line); padding-top: 14px; }
.gg-ev-total { font-size: 13px; font-weight: 600; color: var(--text-2, #4A5159); }
.gg-ev-total b { font-size: 17px; font-weight: 800; color: var(--text); margin-left: 6px; font-variant-numeric: tabular-nums; }
.gg-ev-actions { display: flex; gap: 8px; }
.gg-ev-btn { font-size: 13px; font-weight: 700; border-radius: 9px; padding: 9px 18px; cursor: pointer; border: 1px solid var(--line-strong, #D6DAE0); }
.gg-ev-btn.ghost { background: var(--surface); color: var(--text-2, #4A5159); }
.gg-ev-btn.ghost:hover { background: var(--surface-2); }
.gg-ev-btn.primary { background: var(--brand, #3d7a5a); border-color: var(--brand, #3d7a5a); color: #fff; }
.gg-ev-btn.primary:hover { filter: brightness(1.06); }
.gg-ev-btn:disabled { opacity: .6; cursor: default; }
.gg-ev-load { font-size: 13px; color: var(--muted); padding: 16px 2px; }

/* ── 달력 인플루언서 바 → 공유 링크 생성 팝업 ── */
.gg-cal-clk { cursor: pointer; }
.gg-sl-dlg { width: 460px; }
.gg-sl-msg { font-size: 13.5px; line-height: 1.65; color: var(--text-2, #4A5159); margin: 2px 0 16px; }
.gg-sl-msg b { color: var(--text, #1A1D21); font-weight: 700; }
.gg-sl-link { width: 100%; box-sizing: border-box; font-size: 13px; font-family: inherit; color: var(--text);
  background: var(--surface-2, #F4F5F7); border: 1px solid var(--line-strong, #D6DAE0); border-radius: 8px;
  padding: 9px 10px; margin-bottom: 14px; font-variant-numeric: tabular-nums; }
.gg-sl-actions { display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
.gg-sl-actions a.gg-ev-btn { text-decoration: none; display: inline-flex; align-items: center; }