/* ==========================================================================
   향담 업무시스템 — 모바일 전용 오버라이드
   ==========================================================================
   적용 범위: max-width 768px
   원칙:
   - PC CSS는 절대 건드리지 않음, 이 파일만 손대면 모바일이 완성/롤백 가능
   - 모바일에선 페이지 자체를 단일 세로 스크롤 컨테이너로 만들어서
     PC의 복잡한 flex/overflow 구조를 무력화
   - 테이블은 가로 스크롤 받침대(.table-wrap 등)에서만 overflow-x:auto
   ========================================================================== */


/* ============================================================
   1. 사이드바 드로어 / 햄버거 / 콘텐츠 영역
   ============================================================ */
@media (max-width: 768px) {

  .sidebar{
    position:fixed!important;
    z-index:9998;
    height:100vh;
    width:260px!important;
    left:0;
    top:0;
    transition:left .25s ease;
  }
  .sidebar.collapsed{
    left:-280px!important;
    width:260px!important;
  }
  /* 모바일에선 collapsed여도 내용은 항상 펼친 모양 */
  .sidebar.collapsed .sidebar-logo span,
  .sidebar.collapsed .sidebar-text,
  .sidebar.collapsed .sidebar-badges,
  .sidebar.collapsed .sidebar-section,
  .sidebar.collapsed .sidebar-profile-info,
  .sidebar.collapsed .sidebar-profile-role{
    display:initial!important;
  }
  .sidebar.collapsed .sidebar-item{
    padding:10px 18px!important;
    justify-content:flex-start!important;
    gap:10px!important;
  }
  .sidebar.collapsed .sidebar-item .sidebar-icon{
    width:22px!important;
    font-size:16px!important;
    margin:0!important;
  }
  .sidebar-toggle{display:none!important}

  /* 모바일 사이드바 아이템: hover/드래그 차단 (1번 터치로 즉시 클릭 인식) */
  .sidebar-item{
    -webkit-user-drag:none!important;
    -webkit-touch-callout:none;
    cursor:pointer!important;
  }
  .sidebar-item:hover{
    background:transparent!important;
  }
  .sidebar-item.active{
    background:rgba(91,107,82,0.35)!important;
  }
  /* 톱니바퀴(설정 아이콘) 모바일 숨김 */
  .sidebar-item-gear{display:none!important}

  .mobile-overlay{
    display:none;
    position:fixed;
    inset:0;
    background:rgba(0,0,0,0.45);
    z-index:9997;
  }
  .mobile-overlay.show{display:block}

  .content-area{
    margin-left:0!important;
    padding-right:0!important;
    width:100%!important;
    height:100vh!important;
    overflow:hidden!important;
  }

  .mobile-menu-fixed{
    display:block!important;
    position:fixed!important;
    top:10px!important;
    left:10px!important;
    z-index:9990!important;
    background:var(--bg3)!important;
    border:1px solid var(--border)!important;
    border-radius:8px!important;
    padding:8px 12px!important;
    font-size:18px!important;
    cursor:pointer!important;
    box-shadow:0 2px 8px rgba(0,0,0,0.12)!important;
  }
  .mobile-menu-btn{display:none!important}
}


/* ============================================================
   2. 페이지 강제 단일 스크롤 (모바일 핵심 패턴)
   ============================================================
   PC에선 .page > .main > .left > .table-wrap 처럼 다중 overflow 컨테이너가
   있어서 모바일에선 안쪽 컨텐츠가 잘림.
   모바일에선 .page를 유일한 세로 스크롤 컨테이너로 강제하고
   안쪽의 overflow:hidden, flex:1 을 전부 풀어버림.
   ============================================================ */
@media (max-width: 768px) {

  .page{
    overflow-y:auto!important;
    overflow-x:hidden!important;
    -webkit-overflow-scrolling:touch;
    height:100vh!important;
    max-height:100vh!important;
    flex-direction:column!important;
    padding-top:56px;
    padding-bottom:80px;
    box-sizing:border-box;
  }

  /* 안쪽 컨테이너들의 overflow / flex 무력화 */
  .page .main,
  .page .left,
  .page .right{
    overflow:visible!important;
    max-height:none!important;
    height:auto!important;
    flex:none!important;
    min-height:0!important;
    width:100%!important;
  }
  .page .main{
    display:block!important;
  }
  .page .left{
    display:block!important;
  }

  /* table-wrap만 가로 스크롤 받침대로 살림 */
  .page .table-wrap,
  .page [class*="table-wrap"]{
    overflow-x:auto!important;
    overflow-y:visible!important;
    -webkit-overflow-scrolling:touch;
    max-width:100vw;
  }
  .page .table-wrap table{
    min-width:max-content;
  }

  /* sticky 헤더/필터 무력화 */
  .page .header,
  .page > .header,
  .page .stats,
  .page .filters,
  .page thead{
    position:static!important;
    top:auto!important;
  }
}


/* ============================================================
   3. 좌/우 보조 패널들 — 기본 숨김
   ============================================================ */
@media (max-width: 768px) {
  #taskAlertPanel,
  #leaveReqPanel,
  #editReqPanel{
    display:none!important;
  }
}


/* ============================================================
   4. 헤더 / 툴바 / 필터 / 통계
   ============================================================ */
@media (max-width: 768px) {

  .header{
    padding:10px 12px 10px 60px!important;
    flex-wrap:wrap;
    gap:8px;
    min-height:auto;
  }
  .header h1{
    font-size:16px!important;
    margin:0;
  }
  .header-left{
    gap:8px;
    flex-wrap:wrap;
  }
  .header > div:last-child{
    flex-wrap:wrap;
    gap:6px!important;
  }
  .btn-new{
    padding:7px 10px!important;
    font-size:12px!important;
  }
  .btn-notif{
    padding:7px 10px!important;
    font-size:12px!important;
  }

  .stats{
    padding:8px 12px!important;
    flex-wrap:wrap;
    gap:6px;
  }
  .stat{
    padding:6px 10px!important;
  }
  .stat .num{
    font-size:14px!important;
  }

  .filters{
    padding:8px 12px!important;
    flex-wrap:wrap;
    gap:6px;
  }
  .filters input,
  .filters select{
    font-size:12px!important;
    padding:6px 10px!important;
    min-width:0;
    flex:1 1 auto;
  }
}


/* ============================================================
   5. 공통 테이블 — 컬럼 숨김 패턴
   ============================================================
   페이지별로 숨길 컬럼 <th>/<td>에 클래스 추가:
     .mh-1 : 480px 이하에서 숨김
     .mh-2 : 768px 이하에서 숨김
     .mh-3 : 768px 이하에서 숨김 (가장 덜 중요)
   ============================================================ */
@media (max-width: 768px) {
  .page table{font-size:12px}
  .page th, .page td{padding:6px 8px}
  .page tbody tr{cursor:pointer}
  .mh-2, .mh-3{display:none!important}
}
@media (max-width: 480px) {
  .mh-1{display:none!important}
}


/* ============================================================
   6. 모달 / 패널 — 풀스크린 시트
   ============================================================ */
@media (max-width: 768px) {

  .right.open{
    width:100vw!important;
    min-width:0!important;
    position:fixed!important;
    inset:0!important;
    z-index:100;
  }
  .panel-head{padding:14px 16px}
  .panel-body{padding:14px 16px}
  .panel-meta{grid-template-columns:1fr!important}

  .status-board{flex-direction:column}
  .status-col{max-width:none}

  .bulk-bar{flex-wrap:wrap}

  .login-box{
    width:90%;
    max-width:360px;
    padding:24px;
  }

  .member-card{flex-wrap:wrap}
  .member-actions{
    width:100%;
    justify-content:flex-end;
  }
}


/* ============================================================
   7. 캘린더 모바일
   ============================================================
   목표: 월~일 7일이 가로로 한 화면에 다 보이고, 세로로 스크롤
   ============================================================ */
@media (max-width: 768px) {
  /* cal-wrap (calendar.js가 만드는 외곽 컨테이너) 풀기 */
  #page-calendar .cal-wrap{
    display:block!important;
    overflow:visible!important;
    flex:none!important;
    height:auto!important;
    padding:0!important;
  }
  /* 캘린더 페이지 안의 중간 wrapper(div[style*="display:flex"])도 풀어줌 */
  #page-calendar > div[style*="flex:1"]{
    display:block!important;
    overflow:visible!important;
    flex:none!important;
    height:auto!important;
  }
  /* 그리드: 7열 유지하되 가로 스크롤 막고 세로로만 스크롤 */
  #page-calendar .cal-grid{
    flex:none!important;
    overflow:visible!important;
    height:auto!important;
    min-height:0!important;
    width:100%!important;
    max-width:100vw;
    grid-template-columns:repeat(7, minmax(0, 1fr))!important;
  }
  /* 요일 헤더 컴팩트 */
  #page-calendar .cal-dow{
    padding:6px 2px!important;
    font-size:10px!important;
  }
  /* 셀: 내용물이 셀 폭을 못 넘치게 강제 */
  #page-calendar .cal-cell{
    min-width:0!important;
    min-height:78px!important;
    padding:3px 2px!important;
    overflow:hidden!important;
  }
  /* 일자 뱃지 작게 */
  #page-calendar .cal-day{
    width:20px!important;
    height:20px!important;
    font-size:11px!important;
    margin-bottom:2px!important;
  }
  /* 일정 막대: 한 줄 ellipsis, 폰트 작게 */
  #page-calendar .cal-bar{
    font-size:9px!important;
    padding:0 3px!important;
    min-height:14px!important;
    line-height:1.4!important;
    margin-bottom:1px!important;
    gap:2px!important;
  }
  /* 연차 칩 */
  #page-calendar .cal-leave-chip{
    font-size:8px!important;
    padding:0 3px!important;
    min-height:13px!important;
  }
  /* 공휴일 라벨 */
  #page-calendar .cal-holiday{
    font-size:8px!important;
    line-height:1.2!important;
  }
  /* +N 더보기 */
  #page-calendar .cal-more{
    font-size:9px!important;
    padding:0 3px!important;
  }
  /* 범례/오늘 스트립 좌우 패딩 */
  #page-calendar .cal-legend,
  #page-calendar .cal-today-strip{
    padding-left:12px;
    padding-right:12px;
  }
}
@media (max-width: 480px) {
  #page-calendar .cal-cell{min-height:64px!important;padding:2px 1px!important}
  #page-calendar .cal-day{width:18px!important;height:18px!important;font-size:10px!important}
  #page-calendar .cal-dow{font-size:9px!important;padding:5px 1px!important}
  #page-calendar .cal-bar{font-size:8px!important;min-height:12px!important}
}


/* ============================================================
   7-B. 플로팅 버튼 스택 정리
   ============================================================
   PC: 24/88/152/216/280 px 간격으로 5개 스택
   모바일: 화면이 좁으니 컴팩트하게 16/72/128/184 로 줄이고
           CS 전용 fab은 해당 페이지에서만 보이게
   ============================================================ */
@media (max-width: 768px) {
  .chat-floating-btn{
    right:14px!important;
    bottom:16px!important;
    width:46px!important;
    height:46px!important;
    font-size:20px!important;
  }
  .hsx-float-btn{
    right:14px!important;
    bottom:74px!important;
    width:46px!important;
    height:46px!important;
    font-size:20px!important;
  }
  .cs2-fab-mycs{
    right:14px!important;
    bottom:132px!important;
    width:48px!important;
    height:48px!important;
    font-size:20px!important;
  }
  /* 버그리포트 등 기타 fab도 있을 경우 — 클래스 모르면 위 셀렉터에 추가 */
}


/* ============================================================
   8. 페이지별 섹션 (점진 추가용)
   ============================================================ */

/* --- 페이지: 로그인정보 (#page-credentials) — 카드형 변환 --- */
@media (max-width: 768px) {
  /* 헤더 우측 컨트롤 줄바꿈 */
  #page-credentials .header > div:last-child{
    flex-wrap:wrap;
    width:100%;
  }
  #page-credentials .header > div:last-child select,
  #page-credentials .header > div:last-child input{
    flex:1 1 auto;
    min-width:0;
    font-size:12px!important;
    padding:6px 10px!important;
  }

  /* table-wrap: 가로 스크롤 끔 (카드형이라 가로 안 넘침) */
  #page-credentials .table-wrap{
    overflow-x:hidden!important;
    padding:8px 12px;
  }
  /* 테이블 자체를 블록으로 변환 */
  #page-credentials #credTable{
    display:block!important;
    min-width:0!important;
    width:100%;
  }
  /* thead 숨김 (카드라 라벨이 td::before로 들어감) */
  #page-credentials #credTable thead{
    display:none!important;
  }
  #page-credentials #credTable tbody{
    display:block!important;
  }
  /* 각 행 = 카드 */
  #page-credentials #credTable tbody tr{
    display:block!important;
    background:var(--bg3);
    border:1px solid var(--border);
    border-radius:10px;
    padding:12px 14px 10px;
    margin-bottom:10px;
    box-shadow:0 1px 3px rgba(0,0,0,0.04);
    position:relative;
  }
  /* 짝수행 배경 제거 (PC table에 적용된 nth-child 색 무력화) */
  #page-credentials #credTable tbody tr:nth-child(even) td{
    background:transparent!important;
  }
  /* td 전체 블록 변환 */
  #page-credentials #credTable tbody tr td{
    display:block!important;
    width:auto!important;
    padding:4px 0!important;
    border:none!important;
    text-align:left!important;
    font-size:13px;
    word-break:break-all;
  }
  /* 1번 td = 체크박스 → 우상단 절대위치 */
  #page-credentials #credTable tbody tr td:nth-child(1){
    position:absolute!important;
    top:10px;
    right:10px;
    padding:0!important;
    width:auto!important;
  }
  /* 2번 td = 사이트명 → 카드 타이틀 */
  #page-credentials #credTable tbody tr td:nth-child(2){
    font-size:15px;
    font-weight:700;
    color:var(--txt);
    padding:0 36px 8px 0!important;
    margin-bottom:6px;
    border-bottom:1px solid var(--border)!important;
  }
  #page-credentials #credTable tbody tr td:nth-child(2) .cred-site-name{
    font-size:15px;
    font-weight:700;
  }
  /* 3~7번 td = 라벨 + 값 한 줄씩 */
  #page-credentials #credTable tbody tr td:nth-child(3),
  #page-credentials #credTable tbody tr td:nth-child(4),
  #page-credentials #credTable tbody tr td:nth-child(5),
  #page-credentials #credTable tbody tr td:nth-child(6),
  #page-credentials #credTable tbody tr td:nth-child(7){
    display:flex!important;
    align-items:center;
    gap:8px;
    padding:5px 0!important;
    min-height:28px;
  }
  /* 라벨 ::before */
  #page-credentials #credTable tbody tr td:nth-child(3)::before{content:"계정";}
  #page-credentials #credTable tbody tr td:nth-child(4)::before{content:"비번";}
  #page-credentials #credTable tbody tr td:nth-child(5)::before{content:"URL";}
  #page-credentials #credTable tbody tr td:nth-child(6)::before{content:"분류";}
  #page-credentials #credTable tbody tr td:nth-child(7)::before{content:"비고";}
  #page-credentials #credTable tbody tr td:nth-child(3)::before,
  #page-credentials #credTable tbody tr td:nth-child(4)::before,
  #page-credentials #credTable tbody tr td:nth-child(5)::before,
  #page-credentials #credTable tbody tr td:nth-child(6)::before,
  #page-credentials #credTable tbody tr td:nth-child(7)::before{
    flex-shrink:0;
    width:38px;
    font-size:11px;
    font-weight:700;
    color:var(--txt3);
    text-transform:uppercase;
  }
  /* 비고가 비어있으면 행 자체 숨김 */
  #page-credentials #credTable tbody tr td:nth-child(7):not(:has(span:not(:empty))){
    display:none!important;
  }
  /* 복사 버튼/토글 버튼 컴팩트 */
  #page-credentials .cred-copy-cell{
    display:flex!important;
    align-items:center;
    gap:6px;
    flex:1;
    min-width:0;
  }
  #page-credentials .cred-copy-cell > span,
  #page-credentials .cred-copy-cell .pw-masked{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
  }
  #page-credentials .cred-copy-btn,
  #page-credentials .pw-toggle{
    flex-shrink:0;
    padding:3px 8px!important;
    font-size:11px!important;
    border-radius:4px;
  }
  /* URL 링크 ellipsis */
  #page-credentials #credTable tbody tr td:nth-child(5) a{
    flex:1;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display:inline-block;
  }
  /* 카테고리 태그 */
  #page-credentials #credTable tbody tr td:nth-child(6){
    flex-wrap:wrap;
  }
  /* 신규 추가 행 */
  #page-credentials #credTable tbody tr.add-row{
    text-align:center!important;
    padding:14px!important;
    background:transparent!important;
    border:2px dashed var(--border)!important;
    box-shadow:none;
    color:var(--txt2);
    font-weight:600;
  }
  #page-credentials #credTable tbody tr.add-row td{
    text-align:center!important;
    padding:0!important;
  }
  #page-credentials #credTable tbody tr.add-row td::before{
    content:""!important;
    display:none;
  }
}

/*
   --- 페이지: 홈 (#page-home) ---
   --- 페이지: 업무요청 (#page-tasks) ---
   --- 페이지: 제품DB (#page-products) ---
   --- 페이지: 거래처 (#page-partners) ---
   --- 페이지: 견적서 (#page-quotes) ---
   --- 페이지: 거래명세서 (#page-invoices) ---
   --- 페이지: 발주서 (#page-purchase-orders) ---
   --- 페이지: 입고전표 (#page-receives) ---
   --- 페이지: 결제 (#page-payments) ---
   --- 페이지: 채널분석 (#page-channels) ---
   --- 페이지: 손익관리 (#page-pnl2) ---
   --- 페이지: CS센터 (#page-csguide) ---
*/