/* 코호트 분석 전용 — ir.barybody.com 동일 화면에서 이식(2026-08-14).
   어드민 common.css 에 없는 것만 담았다: .kpi-row/.kpi-card · .ins-* · .band-* · .coh-*.
   (.fin-tabs 는 finance.css, .ua-table/.table-card/.section-title 은 common.css 에 이미 있다.) */
  .kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
  .kpi-card{
    background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-card);
    padding:16px 18px;min-width:0;
  }
  .kpi-card .lbl{font-size:12px;color:var(--muted);font-weight:500;white-space:nowrap}
  .kpi-card .val{font-size:22px;font-weight:700;color:var(--text);letter-spacing:-.02em;
    margin-top:6px;font-variant-numeric:tabular-nums;white-space:nowrap}
  .kpi-card .sub{font-size:11.5px;color:var(--muted);margin-top:4px;white-space:nowrap}
  /* 코호트 분석 블록 — 카드 4장(2열), 각 카드에 숫자 + 한 줄 해석 */
  /* 카드 배치 — grid 가 아니라 줄바꿈 flex 다.
     ⚠ grid(auto-fit)로는 오른쪽이 빈다: 전체폭 카드(.ins-card-wide, grid-column:1/-1)가
       열 수를 고정시켜 버려, 일반 카드가 그보다 적으면 남은 칸이 그대로 빈다
       (2560px 실측: 4열이 생기고 카드는 3장 → 오른쪽 387px 공백).
     → flex-wrap + flex-grow 면 각 줄의 카드가 남는 폭을 나눠 가져 **어느 해상도에서든**
       꽉 찬다. 해상도를 박은 미디어쿼리는 쓰지 않는다.
     flex-basis 340px = 이 폭 아래로는 줄이 바뀐다(카드 최소 가독폭). */
  .ins-grid{display:flex;flex-wrap:wrap;gap:12px;align-items:stretch}
  .ins-grid > *{flex:1 1 340px;min-width:0}
  .ins-card{background:var(--surface);border-radius:var(--radius);box-shadow:var(--shadow-card);padding:18px 20px}
  .ins-card-wide{flex:1 1 100%}   /* 열 많은 표는 한 줄 전체 */
  /* 금액대별 막대 비교 — 좌 라벨 / 효율 / 볼륨 */
  .band-grid{display:flex;flex-direction:column;gap:6px;margin-top:4px}
  .band-head{display:grid;grid-template-columns:160px 1fr 1fr;gap:12px;
    font-size:10.5px;color:var(--muted);font-weight:600;padding-bottom:2px}
  .band-head .band-col em{font-style:normal;color:var(--brand);margin-left:3px}
  .band-row{display:grid;grid-template-columns:160px 1fr 1fr;gap:12px;align-items:center}
  .band-lbl{font-size:11.5px;color:var(--text);font-weight:600;line-height:1.3}
  .band-lbl em{display:block;font-style:normal;font-size:10.5px;color:var(--muted);font-weight:400}
  .band-bar{position:relative;height:22px;background:var(--surface-2);border-radius:5px;display:flex;align-items:center}
  .band-bar i{display:block;height:100%;background:var(--brand);border-radius:5px}
  .band-bar.vol i{background:var(--sage)}
  .band-bar b{position:absolute;right:8px;font-size:11px;color:var(--text);font-variant-numeric:tabular-nums}
  .band-bar b.on{color:#fff}   /* 막대가 라벨 자리를 덮을 때 — 대비 확보 */
  /* 해석 문구 — 막대 열과 같은 그리드로 좌(효율)·우(볼륨) 정렬 */
  .band-foot{display:grid;grid-template-columns:160px 1fr 1fr;gap:12px;margin-top:10px}
  .band-note{font-size:11px;color:var(--muted);line-height:1.5}
  .band-note b{color:var(--brand);font-weight:700;margin-right:3px}
  table.ins-tbl td.nx em{font-style:normal;color:var(--muted);font-weight:500;margin-left:4px;font-size:10.5px;white-space:nowrap}
  table.ins-tbl td.nx{color:var(--brand);font-weight:600;max-width:150px}
  table.ins-tbl td.nx .nx-p{display:inline-block;max-width:104px;overflow:hidden;
    text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;
    direction:rtl;text-align:left}   /* 앞을 잘라 접미사(_루피)를 살린다 */
  .ins-card h3{margin:0 0 10px;font-size:14px;font-weight:700;color:var(--text)}
  .ins-lead{margin:0 0 12px;font-size:12.5px;color:var(--text-2)}
  .ins-lead b{color:var(--brand);font-size:15px}
  .ins-lead .lead-sub{color:var(--muted);font-size:11.5px}
  .ins-note{margin:12px 0 0;font-size:11.5px;line-height:1.55;color:var(--muted)}
  .ins-note b{color:var(--text-2)}
  /* 가로 막대 */
  .ins-bar-row{display:flex;align-items:center;gap:8px;margin:5px 0;font-size:11.5px}
  .ins-bar-lbl{flex:0 0 84px;color:var(--text-2)}
  .ins-bar-track{flex:1;height:14px;background:var(--surface-2);border-radius:var(--radius-pill);overflow:hidden}
  .ins-bar-fill{display:block;height:100%;background:var(--sage);border-radius:var(--radius-pill)}
  .ins-bar-val{flex:0 0 96px;text-align:right;color:var(--text-2);font-variant-numeric:tabular-nums}
  .ins-bar-val em{font-style:normal;color:var(--muted);margin-left:3px}
  /* 신규/재구매 분해 막대 */
  .ins-split-bar{display:flex;height:22px;border-radius:var(--radius-sm);overflow:hidden}
  /* 세그먼트 안에 % 라벨을 넣는다(대표 요청 2026-08-14). 각 칸 가운데 정렬.
     글자는 두 칸 모두 흰색(대표 지시 2026-08-14) — 연한 세이지에도 흰 글자가 대비가 난다.
     칸이 좁아 글자가 넘치면 JS(fixSplitLabels)가 숨긴다. */
  .ins-split-bar > span{display:flex;align-items:center;justify-content:center;overflow:hidden}
  .ins-split-bar > span b{font-size:10px;font-weight:700;line-height:1;white-space:nowrap;
    letter-spacing:-.01em;color:#fff}
  .ins-split-bar .seg-new{background:var(--sage)}
  .ins-split-bar .seg-rep{background:var(--brand)}
  .ins-split-legend{display:flex;gap:16px;margin-top:8px;font-size:11.5px;color:var(--text-2)}
  .ins-split-legend i{display:inline-block;width:9px;height:9px;border-radius:2px;margin-right:5px}
  .ins-split-legend .dot-new{background:var(--sage)}
  .ins-split-legend .dot-rep{background:var(--brand)}
  /* 제품별 표 */
  table.ins-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:11.5px}
  table.ins-tbl th{text-align:left;font-weight:600;color:var(--muted);font-size:10.5px;
    padding:5px 6px;border-bottom:1px solid var(--line)}
  table.ins-tbl th.r,table.ins-tbl td.r{text-align:right;font-variant-numeric:tabular-nums}
  table.ins-tbl td{padding:5px 6px;border-bottom:1px solid var(--line);color:var(--text-2)}
  table.ins-tbl tr:last-child td{border-bottom:0}

  /* 셀 클릭 팝오버 — 매출 상위 제품 TOP5 */
  #cohTable td.coh-click{cursor:help}
  #cohTable td.coh-click:hover{outline:2px solid var(--brand);outline-offset:-2px}
  .coh-pop{
    position:fixed;z-index:400;min-width:290px;max-width:380px;pointer-events:none;
    background:var(--surface);border-radius:var(--radius-md);box-shadow:var(--shadow-pop);
    padding:12px 14px;font-size:11.5px;
  }
  .coh-pop-hd{font-weight:700;color:var(--text);margin-bottom:8px;font-size:12px}
  .coh-pop-hd span{font-weight:500;color:var(--muted);margin-left:4px}
  .coh-pop table{width:100%;border-collapse:separate;border-spacing:0}
  .coh-pop td{padding:4px 0;border-bottom:1px solid var(--line);vertical-align:middle}
  .coh-pop tr:last-child td{border-bottom:0}
  .coh-pop td.p{color:var(--text-2);max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .coh-pop td.r{text-align:right;font-variant-numeric:tabular-nums;color:var(--text);font-weight:600;padding-left:8px}
  .coh-pop td.o{text-align:right;font-variant-numeric:tabular-nums;color:var(--muted);padding-left:8px}
  .coh-pop td.pc{text-align:right;color:var(--brand);font-weight:600;padding-left:8px;width:34px}
  .coh-note{margin:10px 0 0;font-size:11.5px;color:var(--muted);line-height:1.5}
  .coh-pop-bulk{
    margin-top:8px;padding:6px 8px;border-radius:6px;
    background:var(--sage-tint);color:var(--brand-ink);
    font-size:11px;font-weight:600;line-height:1.4;
  }
  .coh-pop-ft{margin-top:8px;font-size:10.5px;color:var(--muted);line-height:1.4}

  /* 코호트 표 — 첫 열(코호트월)·둘째 열(신규) 고정, 셀은 값 크기별 세이지 농도 */
  #cohTable td.coh{font-variant-numeric:tabular-nums;text-align:right;font-size:11.5px;padding:6px 10px}
  #cohTable td.coh.z{color:var(--muted)}
  #cohTable th.coh-m{min-width:64px;text-align:right}
  #cohTable td.coh-h,#cohTable th.coh-h{
    position:sticky;left:0;z-index:2;background:var(--surface);
    text-align:left;font-weight:600;color:var(--text);min-width:88px;white-space:nowrap}
  #cohTable td.coh-n,#cohTable th.coh-n{
    position:sticky;left:88px;z-index:2;background:var(--surface);
    text-align:right;font-weight:600;color:var(--text-2);min-width:76px;
    border-right:1px solid var(--line-strong);font-variant-numeric:tabular-nums}
  #cohTable thead th.coh-h,#cohTable thead th.coh-n{z-index:5;background:var(--thead-bg)}

/* 탭(채널 3종 · 지표 5종) — IR 원본(ir_page.html 148~158행) 그대로. 밑줄형.
   ⚠ finance.css 의 `#financeView .fin-tab` 는 스코프가 묶여 여기선 안 먹으므로 따로 둔다.
     한 번 어드민 재무의 pill 세그먼트로 바꿨다가 원복했다 — 화면 모양은 IR과 같게 간다. */
#cohortView .fin-tabs {
  display: flex; gap: 6px; border-bottom: 1px solid var(--line-2);
  align-self: stretch; margin-bottom: 14px;
}
#cohortView .fin-tab {
  display: flex; align-items: center; height: 40px; padding: 0 16px;
  font-size: 14px; font-weight: 600; color: var(--muted);
  border: 0; border-bottom: 2px solid transparent; background: none;
  cursor: pointer; font-family: inherit; appearance: none; -webkit-appearance: none; outline: none;
}
#cohortView .fin-tab:hover { color: var(--text-2); }
#cohortView .fin-tab.is-active { color: var(--brand-ink); border-bottom-color: var(--brand); }
#cohortView .fin-tab:focus-visible { outline: 2px solid var(--sage); outline-offset: -4px; border-radius: 6px; }

/* 레이아웃 3종 — IR 원본에는 있는데 어드민 어디에도 없어 빠져 있던 것들(2026-08-14 실측).
   특히 .tbl-scroll 이 없으면 코호트 매트릭스(경과월 36열)가 카드를 뚫고 페이지를 밀어낸다. */
#cohortView .rev-sec { margin-bottom: 22px; }          /* 블록 간 여백 */
#cohortView .tbl-scroll { overflow-x: auto; }          /* 표는 카드 안에서만 가로 스크롤 */
#cohortView .footnotes { margin-top: 14px; padding: 0 4px; }
#cohortView .footnotes p { margin: 4px 0; font-size: 12px; color: var(--muted); }

/* 분석 카드 표의 숫자 열 — '82,380원'의 '원'이 다음 줄로 떨어지던 문제(실측 2026-08-14).
   카드가 3열 그리드라 폭이 좁아 금액이 쪼개진다. 숫자 열은 통째로 붙여 둔다. */
#cohortView table.ins-tbl td.r,
#cohortView table.ins-tbl th.r { white-space: nowrap; }

/* '어떤 경로로 무엇을 사러 왔나' — 경로·제품을 각각 열로 두고 숫자 3열만 폭 고정.
   한때 한 칸에 두 줄로 넣었으나(카드가 그리드 1칸이라 좁아 경로가 '쇼…'로 잘렸다)
   이 카드가 한 줄의 절반을 쓰게 되면서 폭이 충분해졌다 → 열로 나눠 행 높이를 반으로 줄인다.
   넘치는 이름은 말줄임(전체 값은 title). */
#cohortView .ins-card-combo table.ins-tbl { table-layout: fixed; width: 100%; }
#cohortView .ins-card-combo th:nth-child(3), #cohortView .ins-card-combo td:nth-child(3) { width: 56px; }
#cohortView .ins-card-combo th:nth-child(4), #cohortView .ins-card-combo td:nth-child(4) { width: 66px; }
#cohortView .ins-card-combo th:nth-child(5), #cohortView .ins-card-combo td:nth-child(5) { width: 84px; }
#cohortView td.ck-in, #cohortView td.ck-p {
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
#cohortView td.ck-in { color: var(--text-2); }
#cohortView td.ck-p { color: var(--text); font-weight: 600; }

/* 분석 카드 표의 숫자 열 — '82,380원'의 '원'이 다음 줄로 떨어지던 문제(실측 2026-08-14).
   카드가 3열 그리드라 폭이 좁아 금액이 쪼개진다. 숫자 열은 통째로 붙여 둔다. */
#cohortView table.ins-tbl td.r,
#cohortView table.ins-tbl th.r { white-space: nowrap; }

/* 카드 2장을 한 칸에 위아래로(2단) — '재구매의 매출 기여' + '다시 살 때 무엇을 사는가'.
   둘 다 세로 내용이 적어 각각 한 칸을 쓰면 아래가 크게 빈다(같은 행 표 카드 높이에 맞춰
   늘어나기 때문). gap 은 .ins-grid 와 같은 12px 로 맞춰 한 장처럼 보이지 않게 한다. */
#cohortView .ins-stack {
  display: flex; flex-direction: column; gap: 12px; min-width: 0;
}

/* 스택 안 두 카드가 칸 높이를 꽉 채우게 — 안 그러면 아래가 뜬다(실측 393px ↔ 칸 411px).
   남는 높이는 두 카드가 나눠 갖는다. */
#cohortView .ins-stack > .ins-card { flex: 1 1 auto; }

/* 유입경로 2장 전용 줄 — 한 줄을 통째로 쓰고 그 안에서 좌우로 꽉 나눈다.
   그냥 두면 앞 카드들과 같은 줄에 끼어 위/아래 줄 균형이 깨진다(대표 지시 2026-08-14).
   내부도 flex-wrap 이라 화면이 좁아지면 두 장이 자연스럽게 세로로 쌓인다(반응형 유지). */
#cohortView .ins-row2 {
  flex: 1 1 100%; display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch;
}
#cohortView .ins-row2 > .ins-card { flex: 1 1 340px; min-width: 0; }