/* ============================================================================
   toss-theme.css — 위드제이 CRM · 토스(TDS) 스타일 리뉴얼 레이어
   ----------------------------------------------------------------------------
   방향: 위드제이 시그니처 레드(#E5172C) 유지 + 토스 레이아웃/여백/라운드/그림자/
         타이포 원칙 도입. 이모지(기능 아이콘)는 유지.
   전략: admin.html 인라인 <style> 뒤에 로드 → 기존 CSS 변수(--ink/--muted/--line/
         --bg/--soft/--shadow 등)를 재정의해 컴포넌트 개별 수정 없이 전역 재테마.
         데스크탑+모바일 공통. 되돌리기 = 이 <link> 한 줄 제거.
   ⚠️ 레이아웃 치수(폭/그리드)는 건드리지 않고 색/라운드/그림자/타이포만 → 회귀 최소.
   Phase 1 (2026-07-12): 토큰 + 안전 컴포넌트 폴리시 + 헤더 정리 + 모바일 코어.
   ============================================================================ */

:root{
  /* ── 브랜드: 위드제이 레드 유지 (토스 블루 역할을 레드가 대체) ── */
  --red:#E5172C;
  --red-hover:#c8102a;
  --red-weak:rgba(229,23,44,.10);   /* Toss "weak fill" 대응 */
  --red-weak-hover:rgba(229,23,44,.16);

  /* ── 토스식 쿨 뉴트럴 (기존 변수 재정의 → 전역 반영) ── */
  --ink:#191f28;      /* Toss grey900 — 헤딩/강조 텍스트 */
  --muted:#6b7178;    /* 원본 유지 — 배경/카드 위 AA 대비 보존(쿨화 시 배경 위 4.0으로 회귀해 원복) */
  --line:#e5e8eb;     /* Toss grey200 — 기본 보더/디바이더 */
  --bg:#f2f4f6;       /* Toss grey100 — 페이지 배경 (기존 웜톤 #f6f6f4 → 쿨) */
  --card:#ffffff;
  --soft:#f9fafb;     /* Toss grey50 — 옅은 표면 */

  /* ── 라운드: 토스 스케일 (기존 --radius 14 유지, 신규 스케일 추가) ── */
  --radius:14px;
  --t-r-sm:8px; --t-r-md:12px; --t-r-lg:16px; --t-r-pill:9999px;

  /* ── 그림자: 토스식 단일 레이어 최소화 (기존 --shadow의 커다란 2번째 레이어 제거) ── */
  --shadow:0 2px 8px rgba(17,24,39,.07);
  --t-sh-1:0 1px 3px rgba(17,24,39,.06);
  --t-sh-2:0 2px 8px rgba(17,24,39,.08);
  --t-sh-3:0 4px 12px rgba(17,24,39,.12);
  --t-sh-4:0 8px 24px rgba(17,24,39,.16);

  /* ── 신규 토스 토큰 (컴포넌트에서 참조) ── */
  --t-fg:#191f28; --t-grey700:#333d4b; --t-grey600:#4e5968; --t-grey500:#6b7684;
  --t-muted:#6b7684; --t-surface:#f2f4f6; --t-border:#e5e8eb; --t-border-strong:#d1d6db;
  --t-success:#03b26c; --t-error:#f04452; --t-warning:#fe9800; --t-info:#18a5a5;
  --t-ease-enter:cubic-bezier(0,0,.2,1);
  --t-ease-standard:cubic-bezier(.4,0,.2,1);
  --t-ease-exit:cubic-bezier(.4,0,1,1);
}

/* ── 폰트 렌더링: 토스식 선명한 안티에일리어싱 ── */
body{ -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; letter-spacing:-.01em; }
/* 금액·수치는 자간 고정폭(tabular)으로 정렬 — KPI 숫자 */
.kpi .n, .num, td.num{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; }

/* ── 버튼: 토스 지오메트리(라운드·굵기·프레스) — 레드 필 유지 ── */
.btn{ border-radius:var(--t-r-md); font-weight:700; }
/* hover는 기존 base .btn{filter:brightness(.94)} 유지 — 모든 색 버튼에 안전(비-레드 버튼 레드화 방지) */
.btn.sec{ background:#fff; color:var(--t-grey700); border:1px solid var(--line); font-weight:600; }
.btn.sec:not(:disabled):hover{ background:var(--soft); border-color:var(--t-border-strong); }
.btn.sm{ border-radius:var(--t-r-sm); }

/* ── 입력: 토스 박스 인풋(라운드·포커스 링) — ⚠️폼 컨텍스트로 한정.
   전역 input[type=…]는 특이도(0,1,1)로 base `td input{border:transparent}`(0,0,2)를 눌러
   데이터 표 날짜칸만 테두리 생기는 회귀 유발 → 제거(리뷰 conflict-coverage 반영) ── */
.field input, .field.sm input, .field.sm select, .field.sm textarea, .input, .loginbox input{
  border-radius:var(--t-r-sm); border-color:var(--line);
}
.field input{ border-radius:var(--t-r-md); }
.field input:focus, .field.sm input:focus, .field.sm select:focus, .field.sm textarea:focus, .input:focus{
  border-color:var(--red); box-shadow:0 0 0 3px var(--red-weak);
}

/* ── 카드/패널/KPI: 토스 화이트 카드(라운드·미니멀 그림자) ── */
.panel{ border-radius:var(--t-r-lg); box-shadow:var(--t-sh-2); border-color:var(--line); }
.kpi{ border-radius:var(--t-r-lg); box-shadow:var(--t-sh-1); border-color:var(--line); }
.kpi .n{ letter-spacing:-.04em; } /* 원본과 동일 유지 — tabular 폭 증가 최소화(리뷰 반영) */
.loginbox{ border-radius:var(--t-r-lg); box-shadow:var(--t-sh-3); }

/* ── 토스트: 토스 다크 토스트(라운드 8) ── */
.toast{ background:#191f28; border-radius:var(--t-r-sm); box-shadow:var(--t-sh-3); font-weight:500; }

/* ── 사이드바 탭: 토스식 부드러운 활성 상태 ── */
.sb-tab{ border-radius:var(--t-r-sm); font-weight:600; }
.sb-tab.on{ background:var(--red-weak); color:var(--red); font-weight:700; }
.sb-tab:hover{ background:var(--soft); }

/* ── 포커스 가시성(접근성): 토스 레드 링 ── */
:focus-visible{ outline:2px solid var(--red); outline-offset:2px; }

/* ============================================================================
   Phase 1 · 헤더 정리 + 드로어 + 모바일 코어
   @media(max-width:860px) 전용 → 데스크탑(≥861px) 완전 무영향.
   불만① 헤더 버튼 과밀 → [☰ 메뉴 | 타이틀 | ⋯ 더보기] 3요소, 유틸은 더보기 시트로.
   불만② ☰ 메뉴 세로깨짐 → .sb-collapse 30px 고정 해제(.topbar-burger 전용).
   ============================================================================ */

/* 기본: 드로어 × 숨김. ⋯ 더보기는 PC에서도 노출(2026-07-12 PC 확장 — 저빈도 버튼을 시트로) */
.sb-drawer-x{ display:none; }
.topbar-more{ position:relative; }

/* 더보기 드롭다운 시트 — 우상단 고정 패널(토스 라운드·그림자). PC·모바일 공용 */
.topbar-more-menu{
  display:none; position:fixed; top:60px; right:14px; z-index:210;
  width:min(80vw,280px); background:#fff; border:1px solid var(--line);
  border-radius:16px; box-shadow:0 12px 40px rgba(17,24,39,.16); padding:8px;
  flex-direction:column; gap:2px; max-height:calc(100vh - 76px); overflow-y:auto;
}
.topbar-more-menu.open{ display:flex; }
.topbar-more-menu .mm-who{ font-size:12px; color:var(--muted); padding:8px 10px 10px; border-bottom:1px solid var(--line); margin-bottom:4px; white-space:normal; }
.topbar-more-menu .btn.sm{ width:100%!important; justify-content:flex-start!important; min-height:46px!important; font-size:14px!important; border-color:transparent!important; background:#fff!important; border-radius:10px!important; box-shadow:none!important; }
.topbar-more-menu .btn.sm:hover, .topbar-more-menu .btn.sm:active{ background:var(--soft)!important; }
.topbar-more-menu #logoutBtn{ margin-top:4px; border-top:1px solid var(--line)!important; border-radius:0 0 10px 10px!important; color:var(--red)!important; }

@media (max-width:860px){
  /* (A) 헤더 = 3요소 nowrap 복구 — mobile-admin.css flex-wrap:wrap 무력화 */
  header.topbar{ flex-wrap:nowrap!important; row-gap:0!important; column-gap:8px!important; gap:8px!important; min-height:56px!important; padding-top:9px!important; padding-bottom:9px!important; }
  header.topbar .spacer{ flex:1 1 auto!important; height:auto!important; width:auto!important; }
  header.topbar .who{ display:none!important; }                 /* who → 더보기 시트 상단으로 이동 */

  /* (B) ☰ 메뉴 버거 — .sb-collapse 30px 고정 해제 → 가로 라벨 복구 (불만 #2) */
  header.topbar .topbar-burger{
    width:auto!important; height:auto!important; min-height:40px!important;
    padding:8px 12px!important; gap:6px!important; white-space:nowrap!important;
    font-size:14px!important; font-weight:700!important; color:var(--ink)!important;
    border:1px solid var(--line)!important; border-radius:10px!important; background:#fff!important;
    flex-shrink:0!important;
  }
  header.topbar .topbar-burger:active{ background:var(--soft)!important; }

  /* (C) 화면 타이틀 — 말줄임 */
  header.topbar .topbar-title{ min-width:0!important; overflow:hidden!important; text-overflow:ellipsis!important; flex:0 1 auto!important; font-size:15px!important; white-space:nowrap!important; }

  /* (D) ⋯ 더보기 트리거 — 모바일 전용 확대 스타일 */
  header.topbar .topbar-more{
    display:inline-flex!important; align-items:center; flex-shrink:0;
    width:auto!important; min-height:40px; padding:8px 12px!important; gap:5px;
    border:1px solid var(--line); border-radius:10px; background:#fff; color:var(--ink); font-weight:700; font-size:13px; white-space:nowrap;
  }
  header.topbar .topbar-more:active{ background:var(--soft); }

  /* (F) 드로어 배경 스크롤 잠금 */
  body.sb-locked{ overflow:hidden!important; }

  /* (G) 드로어 닫기 × 버튼 (좁은 스크림 탭 영역 보완) */
  .sb-drawer-x{ display:inline-flex!important; align-items:center; justify-content:center; margin-left:auto; width:auto!important; min-height:40px; padding:6px 10px; background:none; border:none; font-size:19px; line-height:1; color:var(--muted); cursor:pointer; }
  .sb-drawer-x:active{ color:var(--ink); }

  /* (H) iOS 포커스 자동확대 방지 보강 — .input·모달 입력류(기존 목록 누락분) */
  .input, .wj-ov textarea, .wj-ov select, .wj-ov input{ font-size:16px!important; }
}

/* ============================================================================
   Phase 2 (2026-07-12) · 컴포넌트 토스화 — KPI·칸반·상태 배지·버튼·섹션
   전역(데스크탑+모바일). 색/그림자/라운드/여백/타이포만 → 레이아웃 치수 무변경.
   ============================================================================ */

/* ── KPI 카드: 카드 스타일(라운드·그림자·tabular)만 — hover lift 제거(정적 카드에 모션 추가는 데스크탑 불변식 밖, 리뷰 반영) ── */

/* ── 칸반 보드: 토스 화이트 카드 + 컬럼은 페이지 배경과 구분되는 서피스
   (⚠️--t-surface=#f2f4f6가 재정의된 --bg와 동일해 컬럼 경계 소실 → 살짝 어두운 #e8ebef로 트레이감 복원, 리뷰 반영) ── */
.col{ background:#e8ebef; border-radius:var(--t-r-lg); }
.col h3{ color:var(--t-grey700); }
.ccard{ border-radius:var(--t-r-md); box-shadow:var(--t-sh-1); }
.ccard:hover{ box-shadow:var(--t-sh-2); }
.col.dragover{ background:#e9edf2; }

/* ── 상태 칩(.cchip): 원본이 이미 토스식 weak 배지(연틴트+진한텍스트)로 대비 양호 → 오버라이드 없이 유지(리뷰 반영: 내 틴트 변경이 10.5px 텍스트 AA 대비를 낮춰 원복) ── */

/* ── 버튼 프레스 상태(토스 dim) — 모든 색 버튼 안전 ── */
.btn:not(:disabled):active{ filter:brightness(.92); }

/* ── 패널 섹션 헤더 위계 강화 ── */
.panel h4{ color:var(--ink); font-weight:700; }

/* ── 플로팅 드롭다운: --shadow 평탄화로 콤보 드롭다운 입체감 소실 → elevated 그림자 명시(리뷰 반영) ── */
.combo-list{ box-shadow:var(--t-sh-3); }

/* ============================================================================
   Phase 4a (2026-07-12) · 실버그 수정 보조 — 칸반 카드 진행상태 select
   모바일(터치)은 HTML5 drag 이벤트가 없어 카드 상태 변경 불가 → 카드 안 select로 변경.
   데스크탑(≥641px)은 기존 드래그 유지 + select 숨김 = 렌더 불변.
   ============================================================================ */
@media (min-width:641px){
  .ccard .m-status-row{ display:none; }
}

/* ============================================================================
   Phase 3 (2026-07-12) · 표 리테마 + 모바일 표 사용성
   ============================================================================ */

/* 멤버표 헤더: 하드코딩 웜톤(#f3f2ef/#d6d7db) → 토스 쿨톤 통일 (행 상태색은 의미색이라 유지)
   ⚠️고정 헤더는 `thead th.fzcol{background:#f3f2ef}`(0,1,2)가 이겨서 동급 셀렉터로 함께 오버라이드 */
.memtbl th{ background:var(--t-surface); border-color:var(--t-border-strong); }
thead th.fzcol{ background:var(--t-surface); }
thead th.fzcol.fzlast{ box-shadow:2px 0 0 var(--t-border-strong); }

@media (max-width:640px){
  /* ── 좌측 고정(틀 고정) 모바일 자동 해제 — 멤버표 기본 5칸 고정(≈290px)이 360px 뷰포트를
        잠식해 데이터 열이 ~60px 창으로만 스크롤되던 문제. 명단·멤버리스트 표도 함께 해제.
        (데스크탑은 미디어 밖이라 고정 그대로) ── */
  th.fzcol, td.fzcol{ position:static!important; left:auto!important; }
  td.fzcol{ background:transparent!important; }   /* 고정셀 흰 배경 해제 → 진행상태 행색(MPBG) 복원 */
  .fzcol.fzlast{ box-shadow:none!important; }

  /* ── 멤버표 툴바(연락모드·전체확정 등 최대 10버튼) 컴팩트 — 4~5줄 스택 완화 ── */
  .mem-toolbar{ gap:6px!important; row-gap:6px!important; }
  .mem-toolbar .btn.sm{ font-size:11.5px!important; padding:6px 8px!important; min-height:38px!important; }

  /* ── 숫자 인라인 input: iOS 16px 강제에 데스크탑 58~62px 폭이라 4자리부터 잘림 ── */
  .memtbl input[type=number]{ min-width:66px!important; }

  /* ── 정산·3.3% 신고 표: 좌측 2칸(#·계정/성명) sticky — 우측 끝 지급액·상태 편집 시
        어느 행인지 유지(멤버표와 달리 2칸=~120px라 뷰포트 부담 없음).
        ⚠️!important 필수: 정렬 헤더 JS가 th에 인라인 position:relative를 심음(admin.html 1098) ── */
  .payout-tbl th:first-child, .payout-tbl td:first-child{ position:sticky!important; left:0!important; z-index:3; background:#fff; width:34px; min-width:34px; }
  .payout-tbl th:nth-child(2), .payout-tbl td:nth-child(2){ position:sticky!important; left:34px!important; z-index:3; background:#fff; box-shadow:2px 0 0 var(--line); }

  /* ── 수취정보 셀: 줄바꿈 허용 — ⚠️mobile-admin의 `.panel table td{nowrap!important}`(0,1,2)를
        이기려면 동급 이상 특이도 + !important 필요 ── */
  .panel table td.recv-cell, .recv-cell{ white-space:normal!important; min-width:200px; max-width:260px; }
}

/* ============================================================================
   Phase 4b (2026-07-12) · 캘린더 스크롤 + 모달 오버레이 모바일 개선
   ============================================================================ */
@media (max-width:640px){
  /* ── 페이지 레벨 가로 넘침 원천 차단(사용자 보고: 모바일 옆 넘침 가로 스크롤) —
        clip은 스크롤 컨테이너를 만들지 않아 position:sticky 안 깨짐(hidden 금지).
        내부 표·캘린더는 자체 overflow-x:auto 스크롤러라 영향 없음 ── */
  html, body{ overflow-x:clip; }

  /* ── 캘린더 월/주 뷰: 7열 1fr이 375px서 열당 ~50px로 짓눌려 일정 판독 불가 →
        가로 스크롤 래퍼 + 그리드 최소폭(데스크탑은 560px < 본문폭이라 스크롤 미발동=무영향) ── */
  .cal-scroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .cal-scroll > div{ min-width:560px; }

  /* ── 모달 오버레이: 세로 짧은 화면에서 가운데 정렬 팝업의 상/하단이 잘려 닫기·저장 도달 불가
        → 상단 정렬 + 스크롤(!important가 인라인 cssText의 align-items:center를 이김).
        상단 여백 38~40px도 16px로 축소해 첫 화면 공간 확보 ── */
  .wj-ov{ align-items:flex-start!important; overflow:auto!important; padding-top:16px!important; padding-bottom:16px!important; }
}

/* ============================================================================
   Phase 5 (2026-07-12) · PC 여백·위계 — 토스 "progressive density"
   섹션 제목을 또렷하게, 요약 표면(카드·패널)은 여유 있게. 전역(PC 중심·모바일 무해).
   ============================================================================ */

/* 섹션 제목: 13px 대문자 회색 라벨 → 또렷한 잉크 타이틀(토스 Subtitle급) */
h2.sec{ font-size:16px; font-weight:800; letter-spacing:-.015em; color:var(--ink); text-transform:none; margin:32px 0 14px; }
h2.sec .dim{ font-weight:500; }
/* 첫 섹션은 위 여백 과잉 방지 */
.wrap > h2.sec:first-child, .wrap > div:first-child > h2.sec{ margin-top:4px; }

/* 패널·KPI: 토스 카드 여백(20px) — 표 패널(padding:0 인라인)은 인라인이 이겨 무영향 */
.panel{ padding:20px; }
.kpi{ padding:18px 20px; }
.kpis{ gap:14px; }

/* 패널 내부 제목 위계: h4 = 카드 헤딩(직계 타이틀은 한 단계 크게) */
.panel h4{ font-size:14px; margin-bottom:14px; }
.panel > h4{ font-size:15px; }
/* h3.sec — PRMgr 등에서 쓰이나 base엔 h2.sec만 정의돼 브라우저 기본으로 렌더되던 것을 위계 편입 */
h3.sec{ font-size:16px; font-weight:800; letter-spacing:-.015em; color:var(--ink); text-transform:none; margin:26px 0 12px; }

/* ============================================================================
   Phase 5b (2026-07-12) · 전 탭 스캔 잔여 웜톤/토큰이탈 CSS 오버라이드
   (마크업 sed로 못 잡는 것들 — 스타일시트 규칙·id/클래스 보유 인라인)
   ============================================================================ */

/* 관리자 정보 · 조직도(org-*) — 구 그레이 → 쿨 토큰(스타일시트 규칙이라 재선언만으로 승리) */
.org-exec-row.sub .org-person{ color:var(--t-grey600); }
.org-trunk, .org-col::before{ background:var(--t-border-strong); }
.org-col-h .sub{ color:var(--muted); }
.org-sup{ background:var(--soft); color:var(--t-grey600); }
.org-sup b{ color:var(--ink); }

/* 확인 대기함 항목 구분선 */
.esc-item{ border-bottom-color:var(--t-surface); }

/* AI 도우미 채팅 표면 */
#aiMsgs{ background:var(--soft)!important; }

/* 교육·가이드 카드 — .panel과 라운드/그림자 정합 */
.gcard{ border-radius:var(--t-r-lg)!important; box-shadow:var(--t-sh-1); }
/* 교육 카테고리 탭 비활성 잉크(#333) 정리 */
.edu-cat:not(.on){ background:var(--card)!important; color:var(--t-grey700)!important; border-color:var(--line)!important; }

/* 제출 버튼 레드 그라데이션 → 토스 플랫 필 */
#drSubmit, #srCampBtn{ background:var(--red)!important; }

/* 캠페인 상세 — 투어 체크리스트·업데이트 안내 박스·컬럼순서 칩·탭별표시컬럼 hairline */
#tourSteps, #un-items, #un-clis{ background:var(--soft)!important; border-radius:var(--t-r-md)!important; }
.rcol-chip{ background:var(--soft)!important; }
#campInfoBody table td{ border-bottom-color:var(--t-surface)!important; }
.bh-seg-del{ color:var(--muted)!important; border-radius:var(--t-r-sm)!important; }

/* 배송/정산 모달 요청멘트 박스 — 블루/오렌지 제각각 → 뉴트럴 통일 */
.wj-ov .panel>div:has(>#shReqMsg), .wj-ov .panel>div:has(>#poReqMsg){ background:var(--soft)!important; border-color:var(--line)!important; }

/* 고정열 세로 경계선 — thead만 토스화됐던 것 tbody까지 쿨톤 통일 */
.fzcol.fzlast{ box-shadow:2px 0 0 var(--t-border-strong), 5px 0 6px -4px rgba(17,24,39,.14); }

/* 체험단원 리스트 빈 찜 버튼 */
.claim-btn[data-cur=""]{ border-color:var(--line)!important; color:var(--muted)!important; }

/* 예약불가 미니달력 네비 버튼 */
.bcal-nav button{ border-color:var(--line); background:var(--soft); }

/* 표 안 액션 버튼 규격 통일(휴지통 풀사이즈 vs 표 초소형 혼재) — 데스크탑만(모바일 터치타겟 44px 보존) */
@media (min-width:641px){
  td .btn.sm{ min-height:30px; padding:4px 10px; font-size:12px; }
}

/* ── 📊 스프레드시트형 표 (고객 리포트 c.html .tbl-wrap 톤 이식) — 남색 머리글·격자·호버 ──
   관리자 화면의 "리스트" 성격 표를 고객 공유 페이지와 같은 시트 느낌으로. payout-tbl(모바일 좌측고정)과 병용 가능. */
.sheet-tbl{ overflow-x:auto; overflow-y:visible; -webkit-overflow-scrolling:touch; border-radius:8px; border:1px solid var(--line); background:#fff; }
.sheet-tbl table{ width:100%; border-collapse:separate; border-spacing:0; font-size:13px; }
.sheet-tbl thead th{ position:sticky; top:0; z-index:5; background:#244084; color:#fff; text-align:center; font-weight:700; font-size:11.5px; letter-spacing:.02em; padding:8px 10px; white-space:nowrap; border-right:1px solid rgba(255,255,255,.18); border-bottom:1px solid var(--line); }
.sheet-tbl thead th:last-child{ border-right:none; }
.sheet-tbl tbody td{ padding:8px 10px; border-bottom:1px solid var(--line); border-right:1px solid var(--line); line-height:1.45; vertical-align:middle; background:#fff; }
.sheet-tbl tbody td:last-child{ border-right:none; }
.sheet-tbl tbody tr:last-child td{ border-bottom:none; }
.sheet-tbl tbody tr:hover td{ background:#edf3fc; }
.sheet-tbl tfoot td{ background:var(--soft); border-top:2px solid var(--line); padding:10px; }
/* 펼친 명단(확장행) 안쪽 표는 시트 격자와 겹치지 않게 여백만 */
.sheet-tbl tbody tr.sheet-detail td{ padding:0; background:var(--soft); }