/* ========================================================================== */
/* WithJ CRM · 관리자/마스터 PC UX — Attio Web 레퍼런스 기반                    */
/* 데스크톱 전용 표현 레이어. 데이터·이벤트·권한·저장 로직은 변경하지 않는다. */
/* ========================================================================== */

@media (min-width:861px){
  :root{
    --pc-control-h:34px;
    --pc-page-max:1720px;
    --pc-hairline:var(--line);
  }

  /* 앱 셸: 장식보다 정보에 면적을 배분한다. */
  #app{ background:var(--bg); }
  .sidebar{
    width:224px;
    border-right:1px solid var(--pc-hairline);
    box-shadow:none;
  }
  .sidebar.collapsed{ width:58px; }
  .sb-top{ min-height:54px; padding:11px 12px 9px; }
  .sb-top .brand{ font-size:18px; letter-spacing:-.035em; }
  .sb-nav{ gap:1px; padding:8px; }
  .sb-tab{
    min-height:36px;
    gap:9px;
    padding:7px 9px;
    border-radius:7px;
    font-size:13.5px;
  }
  .sb-tab .ic{ width:20px; font-size:15px; }
  .sb-tab.on{ background:var(--red-weak); }
  .sb-tab.on::before{ left:-8px; top:7px; bottom:7px; width:2px; }
  .sb-bottom{ padding:7px 8px; }
  .sb-cfg-btn{ min-height:34px; padding:7px 9px; border-radius:7px; }

  header.topbar{
    min-height:54px;
    gap:7px;
    padding:8px 24px;
    border-bottom:1px solid var(--pc-hairline);
    box-shadow:0 1px 0 rgba(17,24,39,.02);
  }
  header.topbar .topbar-title{ font-size:15.5px; letter-spacing:-.025em; }
  header.topbar .who{ font-size:12px; }
  header.topbar .btn.sm{
    min-height:34px;
    padding:6px 10px;
    border-radius:8px;
    font-size:12.5px;
  }
  .topbar-more-menu{
    top:60px;
    border-radius:12px;
    box-shadow:0 14px 38px rgba(17,24,39,.14);
  }

  .wrap{
    width:100%;
    max-width:var(--pc-page-max);
    margin:0 auto;
    padding:26px 30px 72px;
  }
  .wrap > h2.sec:first-child,
  .wrap > div:first-child > h2.sec{ margin-top:2px; }
  h2.sec,h3.sec{
    margin:24px 0 11px;
    font-size:16px;
    letter-spacing:-.025em;
  }

  /* 카드: 큰 그림자를 걷고 얇은 경계와 정돈된 여백으로 계층을 만든다. */
  .panel,
  .kpi{
    border-color:var(--pc-hairline);
    border-radius:12px;
    box-shadow:0 1px 2px rgba(17,24,39,.045);
  }
  .panel{ margin-bottom:14px; }
  .panel h4{ letter-spacing:-.015em; }
  .kpis{ gap:10px; }
  .kpi{ min-height:78px; padding:14px 16px; }
  .kpi .n{ font-size:26px; line-height:1.05; }
  .kpi .l{ margin-top:5px; font-size:11.5px; }

  /* 입력·검색·필터: 같은 높이와 같은 포커스 언어를 쓴다. */
  #app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
  #app select,
  #app textarea{
    min-height:var(--pc-control-h);
    border:1px solid var(--pc-hairline);
    border-radius:8px;
    background:var(--card);
    color:var(--ink);
    box-shadow:none;
  }
  #app textarea{ min-height:64px; line-height:1.5; }
  #app input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):focus,
  #app select:focus,
  #app textarea:focus{
    outline:0;
    border-color:var(--red);
    box-shadow:0 0 0 3px var(--red-weak);
  }
  #app input[type="checkbox"],
  #app input[type="radio"]{
    width:16px;
    height:16px;
    min-height:16px;
    accent-color:var(--red);
  }
  #app .field label,
  #app .field.sm label{ margin-bottom:5px; color:var(--muted); font-weight:650; }
  #app .btn.sm{ min-height:32px; padding:5px 10px; }
  #app .btn.sec{ box-shadow:none; }

  /* 데이터 표: Attio처럼 한 줄을 빠르게 훑을 수 있는 조용한 격자. */
  #main table,
  .drawer table{
    border-collapse:separate;
    border-spacing:0;
    font-size:12.5px;
  }
  #main table th,
  .drawer table th{
    height:36px;
    padding:8px 10px;
    border-bottom:1px solid var(--pc-hairline);
    background:var(--soft);
    color:var(--muted);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.015em;
    text-transform:none;
  }
  #main table td,
  .drawer table td{
    padding:8px 10px;
    border-bottom:1px solid var(--pc-hairline);
    line-height:1.4;
  }
  #main table tbody tr:last-child > td,
  .drawer table tbody tr:last-child > td{ border-bottom:0; }
  #main table tbody tr:hover > td,
  .drawer table tbody tr:hover > td{ background:var(--soft); }
  #main .panel[style*="overflow:auto"] > table thead th,
  #progressTbl thead th,
  .memtbl thead th,
  .payout-tbl thead th{
    position:sticky;
    top:0;
    z-index:5;
  }
  #main table td input:not([type="checkbox"]):not([type="radio"]),
  #main table td select,
  .drawer table td input:not([type="checkbox"]):not([type="radio"]),
  .drawer table td select{
    min-height:30px;
    padding-top:4px;
    padding-bottom:4px;
    border-radius:7px;
    background:var(--card);
  }
  #main .panel[style*="padding:0"][style*="overflow:auto"],
  .drawer .panel[style*="padding:0"][style*="overflow:auto"]{
    border-radius:10px;
    box-shadow:none;
  }

  /* 대시보드·필터·칸반 */
  .rfilter,
  .tag,
  .cchip{ box-shadow:none; }
  .board{ gap:10px; padding-bottom:10px; }
  .col{
    min-width:248px;
    padding:9px;
    border:1px solid var(--pc-hairline);
    border-radius:12px;
    background:var(--soft);
  }
  .col h3{ margin:3px 4px 9px; font-size:11.5px; }
  .ccard{
    margin-bottom:7px;
    padding:10px 11px;
    border-radius:9px;
    box-shadow:none;
  }
  .ccard:hover{ transform:none; border-color:var(--t-border-strong); box-shadow:0 2px 7px rgba(17,24,39,.07); }

  /* 캠페인 상세: 좁은 620px 드로어를 실제 편집 작업 폭으로 확장한다. */
  .scrim{ background:rgba(15,18,22,.28); backdrop-filter:blur(1px); }
  .drawer{
    width:min(1180px,calc(100vw - 78px));
    border-left:1px solid var(--pc-hairline);
    box-shadow:-18px 0 44px rgba(15,18,22,.16);
  }
  .dh{
    min-height:58px;
    padding:12px 22px;
    border-bottom:1px solid var(--pc-hairline);
    z-index:20;
  }
  .dh .nm{ font-size:18px; }
  .dbody{ padding:18px 22px 48px; }
  .drawer .panel{ padding:18px; }
  .drawer .mem-toolbar{ margin-bottom:10px!important; row-gap:6px!important; }
  .drawer .mem-toolbar .btn.sm{ min-height:30px; padding:4px 9px; }
  .camp-savebar{ padding:9px 0 2px; }
  /* 회색 배경·blur 는 sticky 로 '떠서 내용을 가릴 때'만 필요하다. 항상 켜 두면 폼 맨 아래
     제자리에 있을 때도 흰 패널 위에 회색 띠가 남아 아래 카드와 맞닿아 어긋나 보인다. */
  .camp-savebar.stuck{
    padding:9px 10px;
    background:color-mix(in srgb,var(--bg) 92%,transparent);
    backdrop-filter:blur(10px);
  }
  @media (min-width:1180px){
    #campInfoBody > .row2{ grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px 12px; }
  }

  /* 모달: 과도한 카드 느낌을 줄이고 제목·본문·액션을 읽기 쉽게 한다. */
  .wj-ov{
    padding:36px 24px;
    background:rgba(15,18,22,.38);
    backdrop-filter:blur(2px);
  }
  .wj-ov > .panel,
  .wj-ov > div > .panel{
    border-radius:14px;
    box-shadow:0 22px 60px rgba(15,18,22,.22);
  }
  .wj-ov h3,.wj-ov h4{ letter-spacing:-.02em; }

  /* 우하단 상시 액션은 표를 덮지 않도록 아이콘 레일로 축소한다. */
  #aiFab,#fbFab,#reportFab,#backToDashFab{
    right:14px!important;
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    padding:0!important;
    justify-content:center!important;
    overflow:hidden!important;
    border-radius:11px!important;
    font-size:0!important;
    box-shadow:0 6px 18px rgba(17,24,39,.18)!important;
  }
  #reportFab{ bottom:14px!important; }
  #fbFab{ bottom:64px!important; }
  #backToDashFab{ bottom:114px!important; }
  #aiFab{ bottom:164px!important; background:var(--red)!important; }
}

@media (min-width:861px){
  html[data-theme="dark"] .camp-savebar.stuck{ background:rgba(23,25,28,.9); }
  html[data-theme="dark"] #main table tbody tr:hover > td,
  html[data-theme="dark"] .drawer table tbody tr:hover > td{ background:var(--surface-hi); }
}

/* ========================================================================== */
/* PC 한 줄 작업 레이아웃 — 넘치는 조작 요소는 아래로 쌓지 않고 영역 안에서 이동 */
/* ========================================================================== */
@media (min-width:861px){
  /* 중간 폭에서 mobile-admin.css의 2줄 헤더 규칙을 되돌린다. */
  header.topbar{
    flex-wrap:nowrap!important;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }
  header.topbar::-webkit-scrollbar{ display:none; }
  header.topbar .topbar-title{
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  #progressTbl thead th.fzcol,
  .memtbl thead th.fzcol,
  #memlistTbl thead th.fzcol{
    z-index:9!important;
    background:var(--soft);
  }
  header.topbar .btn,
  header.topbar .who{ white-space:nowrap; }

  /* KPI는 폭이 부족할 때 새 줄을 만들지 않고 한 줄 요약 레일로 유지한다. */
  .kpis{
    grid-template-columns:none!important;
    grid-auto-flow:column;
    grid-auto-columns:minmax(148px,1fr);
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:4px;
    scrollbar-width:thin;
    scrollbar-color:var(--t-border-strong) transparent;
  }
  .kpis > *{ min-width:0; }

  /* 화면 상단 필터·검색·보기 전환은 한 줄을 유지하고 해당 줄만 좌우 이동한다. */
  #main > [style*="display:flex"][style*="flex-wrap:wrap"],
  #aiHints > div[style*="display:flex"][style*="flex-wrap:wrap"],
  .camppage .camphead,
  .camppage .mem-toolbar,
  #rcolWrap,
  #campInfoBody > div[style*="display:flex"][style*="flex-wrap:wrap"],
  .camppage .panel > div[style*="display:flex"][style*="flex-wrap:wrap"][style*="margin-top:9px"]{
    flex-wrap:nowrap!important;
    overflow-x:auto;
    overflow-y:hidden;
    justify-content:flex-start;
    white-space:nowrap;
    padding-bottom:5px;
    scrollbar-width:thin;
    scrollbar-color:var(--t-border-strong) transparent;
  }
  #main > [style*="display:flex"][style*="flex-wrap:wrap"] > *,
  #aiHints > div[style*="display:flex"][style*="flex-wrap:wrap"] > *,
  .camppage .camphead > *,
  .camppage .mem-toolbar > *,
  #rcolWrap > *,
  #campInfoBody > div[style*="display:flex"][style*="flex-wrap:wrap"] > *,
  .camppage .panel > div[style*="display:flex"][style*="flex-wrap:wrap"][style*="margin-top:9px"] > *{
    flex-shrink:0;
  }
  #main > [style*="display:flex"][style*="flex-wrap:wrap"] > [style*="flex:1"],
  .camppage .camphead > [style*="flex:1"],
  .camppage .mem-toolbar > [style*="flex:1"]{
    flex:1 0 24px!important;
  }

  /* 표 안 상태·연락 칩은 행 높이를 늘리지 않고 표의 가로 이동 영역을 사용한다. */
  .drow .dbadge-cell{
    min-width:260px;
    white-space:nowrap;
  }
  .drow .dbadge-cell .bwrap{
    width:max-content;
    min-width:100%;
    max-width:none;
    flex-wrap:nowrap;
  }
  .cchips{
    width:max-content;
    min-width:max-content;
    flex-wrap:nowrap;
  }
  #rosterSearch{ order:-30; flex:0 0 210px; }
  #rosterClientSel{ order:-29; flex:0 0 auto; }
  .wjss:has(> #rosterClientSel){ order:-29; flex:0 0 210px; }
  #rosterSortSel{ order:-28; flex:0 0 auto; }
  #fzHostProgress{ order:-27; flex:0 0 auto; }
  #main table th,
  .drawer table th{
    word-break:keep-all;
    overflow-wrap:normal;
    white-space:nowrap;
  }
  #main table .btn,
  #main table .tag,
  #main table .cchip,
  .drawer table .btn,
  .drawer table .tag,
  .drawer table .cchip{
    flex:none;
    white-space:nowrap;
    word-break:keep-all;
  }

  /* 보드 카드도 배지와 메타 정보가 카드 높이를 밀어내지 않게 한다. */
  .ccard .cbadges,
  .ccard .meta{
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:none;
  }
  .ccard .cbadges::-webkit-scrollbar,
  .ccard .meta::-webkit-scrollbar{ display:none; }
  .ccard .cbadges > *,
  .ccard .meta > *{ flex:none; }

  /* 조직도는 팀을 여러 단으로 내리지 않고 한 줄 구조로 훑는다. */
  .org-exec-row{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    scrollbar-width:thin;
  }
  .org-exec-row > *{ flex:none; }
  .org-cols{
    flex-wrap:nowrap;
    justify-content:flex-start;
    overflow-x:auto;
    overflow-y:hidden;
    padding-bottom:5px;
    scrollbar-width:thin;
  }
  .org-col{ flex:0 0 226px; }
  .org-col.pool{ flex-basis:196px; }
  .org-col-h,
  .org-chip{
    min-width:0;
    flex-wrap:nowrap!important;
    white-space:nowrap;
  }
  .org-col-h{ overflow:hidden; text-overflow:ellipsis; }
  .org-chip > *{ flex-shrink:0; }
  .org-chip .nm{ flex:1 1 auto; }
  .org-chip .ct{
    max-width:74px;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .camppage .camphead > div:first-of-type{
    min-width:180px;
    flex:1 1 260px;
  }
  .camppage .mem-toolbar .dim{ white-space:nowrap; }
}

@media (min-width:861px) and (max-width:1199px){
  header.topbar{ gap:5px; padding-inline:14px; }
  header.topbar .who{ display:none; }
  header.topbar .btn.sm{ padding-inline:8px; }
}