/* === admin : admin.html === */
/* admin.html 고유 셀렉터(.row2 / .chat-layout / .memtbl / .sb-tab / .cchip / .ccard 등)로 스코프 — 다른 8개 페이지 영향 없음.
   기존 @media(max-width:780px)·@media(max-width:860px)와 충돌 없이 보완. 데스크탑(641px+) 영향 0. */

@media (max-width: 640px){
  /* ── iOS 입력 자동 줌 방지: 모든 입력류 16px (인라인 width는 건드리지 않음) ── */
  .field input,
  .field.sm input, .field.sm select, .field.sm textarea,
  td input, td select,
  .memtbl input, .memtbl select, .memtbl textarea,
  .convo-input textarea,
  .drow .dedit, .rrow .dedit, .ccard .dedit,
  textarea.cnote,
  input[type=date], input[type=time], input[type=number], input[type=file]{
    font-size:16px !important;
  }

  /* ── 캠페인 상세 폼: 2열 → 1열 ── */
  .row2{grid-template-columns:1fr !important;}

  /* ── 캠페인 폼 안 고정폭 input(인라인 width:118px/128px/60px 등)이 화면 밖으로 안 나가게 ──
        .field.sm 내부 input/select/textarea는 기존 width:100% 유지 + 인라인 고정폭 무력화 */
  .field.sm input, .field.sm select, .field.sm textarea{max-width:100% !important;}

  /* ── 체험단원 채팅 레이아웃: 좌(목록)280px + 우(대화)1fr → 세로 1열 ── */
  .chat-layout{
    grid-template-columns:1fr !important;
    height:auto !important;
    min-height:0 !important;
  }
  .chat-list{max-height:230px;}
  .chat-convo{min-height:62vh;}
  .convo-msgs{max-height:none;}

  /* ── 넓은 표 가로 스크롤 관성 스크롤(래퍼는 이미 overflow:auto) ── */
  .panel[style*="overflow:auto"], .memtbl{-webkit-overflow-scrolling:touch;}

  /* ── KPI 카드: 좁은 화면에서 최소폭 낮춰 2열 유지(150px는 360px에서 빡빡) ── */
  .kpis{grid-template-columns:repeat(auto-fit,minmax(132px,1fr)) !important;}
  .kpi{padding:14px 14px;}
  .kpi .n{font-size:24px;}

  /* ── 보드 컬럼: 가로 스크롤은 유지하되 카드 너비 화면에 맞게 ── */
  .col{min-width:80vw;}

  /* ── 터치 타겟 보정 (기존 780px 블록이 .tab/.btn 44px 처리 → 여기선 나머지) ── */
  .sb-tab{min-height:46px;}
  .sb-cfg-btn{min-height:44px;}
  .cchip{min-height:30px; padding:5px 10px; line-height:1.3;}
  .tabcfg-row{min-height:44px;}
  .tabcfg-row input{width:20px; height:20px;}
  .noteexp{min-height:30px; min-width:30px;}
  .esc-act .btn{min-height:40px;}

  /* ── 체크박스(폼 하단 출금확인·단톡방 등 label 안) 터치 키우기 ── */
  .camppage input[type=checkbox]{width:18px; height:18px;}

  /* ── 사이드바 모바일 폭(860px 블록 232px) 좁은 화면에서 화면 거의 다 안 먹게 ── */
  .sidebar{width:min(82vw,300px) !important;}
  .sidebar.collapsed{width:min(82vw,300px) !important;}

  /* ── 로그인 박스 패딩 축소 ── */
  .loginbox{padding:24px 20px;}

  /* ── 드로어/모달성 .drawer 풀폭 ── */
  .drawer{width:100% !important;}

  /* ── 채팅 말풍선 좁은 화면에서 더 넓게 ── */
  .cb{max-width:86%;}

  /* ── 예약 불가일 캘린더 풀폭 ── */
  .bcal{max-width:100%;}

  /* ── 캠페인 상세 ⛶전체너비 모드여도 본문 넘침 방지 ── */
  body.cozy .wrap{width:100% !important;}
}

@media (max-width: 480px){
  /* ── KPI 1열 (아주 좁은 화면) ── */
  .kpis{grid-template-columns:1fr 1fr !important;}
  .kpi .n{font-size:22px;}

  /* ── 보드 카드 한 화면에 한 컬럼 ── */
  .col{min-width:88vw;}

  /* ── 채팅 목록 더 짧게 ── */
  .chat-list{max-height:190px;}

  /* ── 멤버표·연락칩 압축 ── */
  .cchips{min-width:0;}

  /* ── 헤더 우상단 버튼들 줄바꿈 허용 안 됨(topbar는 overflow:auto 아님) → 글자 줄여 압축은 마크업 필요. CSS로는 패딩만 축소 ── */
  header.topbar .btn.sm{padding:9px 9px;}
}


/* === admin 헤더·컬럼 넘침 보강 === */
@media (max-width: 640px){

  /* ───────────────────────────────────────────────
     증상① 헤더 넘침 박멸 — header.topbar
     실측: header.topbar{display:flex} + flex-wrap 미지정(=nowrap) +
           header.topbar>*{flex-shrink:0} 때문에 버튼 5개(💼영업CRM·🆕업데이트·
           ⛶전체너비·🔓로그아웃)+who 라벨이 한 줄 못 들어가 화면 밖으로 잘림.
     해법: flex-wrap:wrap 으로 2줄 허용(버튼 글자는 이미 .btn white-space:nowrap
           이라 세로깨짐 없음 — wrap만 풀면 됨). 버튼군은 우측 정렬로 묶고 폰트/패딩
           축소해 가능하면 한 줄, 넘치면 자연스럽게 2줄째로.
     ─────────────────────────────────────────────── */
  header.topbar{
    flex-wrap:wrap !important;
    row-gap:7px !important;
    column-gap:7px !important;
    align-items:center !important;
    padding-top:9px !important;
    padding-bottom:9px !important;
    min-height:0 !important;
  }
  /* 햄버거 + 타이틀은 첫 줄 좌측 고정, 타이틀 길면 말줄임 */
  header.topbar .topbar-burger{order:0;}
  header.topbar .topbar-title{
    order:1;
    min-width:0 !important;
    overflow:hidden !important;
    text-overflow:ellipsis !important;
    flex:0 1 auto !important;
    font-size:15px !important;
  }
  /* spacer 가 줄바꿈 시 버튼군을 다음 줄 우측으로 밀어줌(첫 줄에 타이틀만 남게) */
  header.topbar .spacer{order:2; flex:1 1 100% !important; height:0 !important;}
  /* who 라벨 + 버튼군: 둘째 줄, 우측 정렬, 글자 안 깨지게 */
  header.topbar .who{order:3; font-size:12px !important; flex-shrink:1 !important; min-width:0; overflow:hidden; text-overflow:ellipsis;}
  header.topbar .btn.sm{
    order:4;
    flex-shrink:0 !important;
    white-space:nowrap !important;
    font-size:12px !important;
    padding:8px 9px !important;
    min-height:40px !important;   /* 터치 타겟 유지 */
    gap:4px !important;
  }
  /* 버튼이 둘째 줄에서 좌측부터 차되 넘치면 셋째 줄로 자연 wrap — 잘림 0 */

  /* ───────────────────────────────────────────────
     증상② 테이블 세로텍스트 박멸 — 일반 <table>
     실측: table 베이스(105~107행) th/td 에 white-space 미설정.
           th 는 text-transform:uppercase. 모든 일반 표는 .panel[overflow:auto]
           또는 div[overflow:auto] 컨테이너 안에 있으나, nowrap 이 없으면
           브라우저가 가로 스크롤 트리거 전에 셀을 줄바꿈/세로로 찌부러뜨림
           (한글 헤더 "정의된 매출"·"지급방식" 등이 한 글자씩 쌓임).
     해법: th,td{white-space:nowrap} 로 줄바꿈 자체를 차단 → 폭 부족분은
           컨테이너 overflow:auto 가로 스크롤로 흘림. (data-l/content:attr 카드
           변환 표는 admin.html 에 존재하지 않음 → 일괄 nowrap 안전 확인됨)
     ⚠️ 예외: 의도적으로 white-space:normal 인 셀(특이사항/참고사항/비고 max-width
           셀, .memtbl textarea)은 인라인 style 또는 더 구체 셀렉터로 보호됨.
     ─────────────────────────────────────────────── */
  /* 모든 표를 감싼 패널/컨테이너에 관성 스크롤 + 가로 스크롤 보장 */
  .panel[style*="overflow:auto"]{
    overflow-x:auto !important;
    -webkit-overflow-scrolling:touch !important;
  }
  /* 일반 table: 셀 세로텍스트 차단 + 셀 압축(한 화면에 더 보이게) */
  .panel table th,
  .panel table td{
    white-space:nowrap !important;
  }
  .panel table{font-size:12px !important;}
  .panel table th{padding:7px 7px !important;}
  .panel table td{padding:5px 7px !important;}
  /* 의도적 줄바꿈 셀은 nowrap 예외 복원(특이사항·참고사항·비고 등 인라인 white-space:normal/pre-wrap) */
  .panel table td[style*="white-space:normal"],
  .panel table td[style*="white-space:pre-wrap"],
  .panel table td .cnote,
  .panel table td span[style*="white-space:normal"]{
    white-space:normal !important;
  }

  /* ───────────────────────────────────────────────
     .memtbl (체험단원 18컬럼) — 이미 div[overflow-x:auto]+min-width+
     th/td nowrap 보유. 관성 스크롤만 보강(기존 36행 보완) + 셀 살짝 더 압축.
     ─────────────────────────────────────────────── */
  .memtbl{ -webkit-overflow-scrolling:touch; }
  div[style*="overflow-x:auto"]{ -webkit-overflow-scrolling:touch !important; }

  /* ───────────────────────────────────────────────
     칩·뱃지·라벨 세로깨짐 방지(좁은 칸에서 한 글자씩 쌓임 차단)
     실측 셀렉터만: .cchip/.tag/.cand-rmd/.blk-badge/.ci-esc/.esc-type 는
     인라인 nowrap 이미 있으나, 표 안에서 td nowrap 상속 끊길 때 대비 명시.
     모집현황 범례(3431~3432)·팔로워 분포 인라인 span 은 줄바꿈 허용이 맞아 제외.
     ─────────────────────────────────────────────── */
  .cchip,.tag,.cand-rmd,.blk-badge,.ci-esc,.esc-type,.sb-badge,.cand-rmd,.hwarn-badge{
    white-space:nowrap !important;
  }
  /* 연락 칩 묶음: 좁은 화면에서 칸이 너무 안 벌어지면 줄바꿈 허용(세로깨짐보다 나음) */
  .cchips{ flex-wrap:wrap !important; }
}

@media (max-width: 480px){
  /* 아주 좁은 화면: 헤더 버튼 더 압축(글자는 유지, 잘림 방지) */
  header.topbar .btn.sm{ font-size:11.5px !important; padding:8px 8px !important; gap:3px !important; }
  header.topbar .who{ font-size:11px !important; }
  /* 일반 표 더 압축 */
  .panel table{ font-size:11.5px !important; }
  .panel table th{ padding:6px 6px !important; }
  .panel table td{ padding:4px 6px !important; }
}


/* === 진행상태/진행 드롭다운(select) 텍스트 잘림 해결 (2026-06-16) === */
@media (max-width: 640px){
  /* 멤버표 '진행'(progress, min-width:92px)·대시보드/정산 표 '진행상태'(.dedit status)·
     캠페인정보 '진행상태'(#c_status)·기타 표 안 select 가, 16px 폰트에 폭/높이가 부족해
     '업로드완료'·'모집+진행' 등 긴 옵션이 잘리고 우측 화살표에 가려 안 보이던 문제 해결.
     폭·높이·우측 화살표 공간 확보. (.memtbl/.panel table 모두 가로 스크롤이라 폭 늘려도 안전) */
  select[data-f="progress"],
  select.dedit[data-f="status"],
  select#c_status,
  .memtbl select,
  .panel table select{
    min-width: 120px !important;
    min-height: 40px !important;
    height: auto !important;
    line-height: 1.4 !important;
    padding: 7px 26px 7px 9px !important;
    text-overflow: clip !important;
  }
}


/* === 반응형 세로 뭉개짐 개선 (2026-07-02) === */

/* 중간 폭(태블릿·창 절반 축소, 641~1100px): topbar가 flex-wrap 없이 버튼이 화면 밖으로
   잘려 페이지 전체 가로 스크롤 유발(실측 700px 뷰포트에서 scrollWidth 965px) →
   필요할 때만 둘째 줄로 자연 줄바꿈. 버튼 글자는 .btn 전역 nowrap이라 세로깨짐 없음.
   내용이 한 줄에 다 들어가는 폭에선 wrap 미발동 = 기존 데스크탑 렌더 영향 0 */
@media (min-width: 641px) and (max-width: 1100px){
  header.topbar{flex-wrap:wrap; row-gap:6px;}
}

@media (max-width: 640px){
  /* 대시보드 카드 특이사항/참고사항 「⤢ 넓게」 버튼이 42px 폭에 3줄 세로로 뭉개짐 */
  .noteexp{white-space:nowrap !important;}
}

/* 쓰레드 탭 성과 게시물 행: 매장명·티어 라벨("매장"·"50만+ 왕홍"·"카페·디저트")이
   지표 span(♥⭐💬 합계)에 밀려 글자 단위 세로로 쪼개짐 →
   라벨 nowrap + 행 줄바꿈 허용(지표가 길면 둘째 줄로 자연 이동).
   2열 그리드가 유지되는 641~1100px 창에서도 열폭이 좁아 같은 증상 → 미디어 없이 전 폭 적용
   (내용이 넉넉하면 wrap 미발동·nowrap은 원래 안 꺾이던 글자 그대로 = 데스크탑 렌더 변화 0) */
label:has(> .th-pick){flex-wrap:wrap !important;}
label:has(> .th-pick) span{white-space:nowrap !important;}


/* === 모바일 다열 그리드 1열 스택 (2026-07-02) === */
@media (max-width: 640px){
  /* 쓰레드 탭 좌(성과 게시물)/우(쓰레드 글) 2열 inline 그리드가 375px에서
     각 200px로 짓눌리며 페이지 가로 넘침(scrollWidth 461px) → 세로 1열 스택 */
  div[style*="grid-template-columns:1.05fr"]{grid-template-columns:1fr !important;}

  /* showModal(.wj-ov) 안 inline 2·3열 폼(환자 상담 카드·병원 정보 등):
     좁은 화면에서 칸당 150px로 라벨·입력이 답답 → 1열 스택 (grid-column:1/-1 span은 무해) */
  .wj-ov div[style*="grid-template-columns:1fr 1fr"]{grid-template-columns:1fr !important;}
}

/* === 우하단 플로팅 버튼 접기/펼치기 토글 (2026-07-04) ===
   업무불가(#reportFab)·피드백(#fbFab)·대시보드로(#backToDashFab) 3개 FAB이 좁은 화면 우측을
   세로로 다 차지 → 모바일에서만 「⋮」 토글(#fabToggle) 하나로 접고, body.fabExpanded일 때 위로 스택.
   데스크탑(≥641px)은 토글을 숨기고 기존 FAB을 그대로 노출 = 데스크탑 렌더 영향 0. */
#fabToggle{ display:none; } /* 데스크탑: 토글 숨김(기존 FAB inline 스타일 그대로) */
@media (max-width: 640px){
  #fabToggle{
    display:flex; align-items:center; justify-content:center;
    position:fixed; right:16px; bottom:16px; z-index:903;
    width:52px; height:52px; border-radius:999px; border:none;
    background:#22252A; color:#fff; font-size:26px; font-weight:700; line-height:1;
    box-shadow:0 8px 22px rgba(0,0,0,.34); cursor:pointer;
  }
  /* 접힘(기본): 네 버튼 숨김 */
  #reportFab, #fbFab, #backToDashFab, #aiFab{ display:none !important; }
  /* 펼침: 토글(16) 위로 60px 간격 스택 — 업무불가(80) → 대시보드로(140) → 피드백(140/200) → AI 도우미(200/260) */
  body.fabExpanded #reportFab{ display:flex !important; right:16px !important; bottom:80px !important; }
  body.fabExpanded #backToDashFab{ display:flex !important; right:16px !important; bottom:140px !important; }
  body.fabExpanded #fbFab{ display:flex !important; right:16px !important; bottom:140px !important; } /* 대시보드로 없을 때 */
  body.fabExpanded.hasBackFab #fbFab{ bottom:200px !important; }                                    /* 있을 때 그 위 */
  /* AI 도우미 FAB = 스택 최상단. aibot 탭에선 펼쳐도 숨김(:not(.onAibot)) — 그 탭 자체가 채팅이므로 */
  body.fabExpanded:not(.onAibot) #aiFab{ display:flex !important; right:16px !important; bottom:200px !important; } /* 대시보드로 없을 때: 피드백140 위 */
  body.fabExpanded.hasBackFab:not(.onAibot) #aiFab{ bottom:260px !important; }                       /* 있을 때: 피드백200 위 */
}

/* === 조직도(관리자 정보 탭) 반응형 (2026-07-07) ===
   데스크탑은 팀 칼럼이 가로로 wrap. 모바일에선 고정 200px 칼럼이 가로스크롤을 만들어
   → 세로 스택으로 전환, 상단 연결선(::before) 제거. 데스크탑(≥641px) 영향 0. */
@media (max-width: 640px){
  .org-wrap{ overflow-x:visible; }
  .org-exec{ max-width:none; }
  .org-cols{ flex-direction:column; gap:11px; align-items:stretch; }
  .org-col{ flex:1 1 auto; width:100%; min-width:0; }
  .org-col.pool{ flex:1 1 auto; width:100%; }
  .org-col::before{ display:none; }   /* 세로 스택 — 칼럼 상단 연결선 제거 */
  .org-trunk{ height:14px; }
  .org-chip .nm{ white-space:normal; } /* 좁은 폭에서 이름 줄바꿈 허용 */
}