/* ============================================================
   04-responsive.css
   반응형 (햄버거 + 태블릿 1279px + 모바일 767px)
   ============================================================ */

  /* ============================================
     햄버거 (모바일 전용)
  ============================================ */
  .hamburger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    margin-left: 4px;
  }

  .hamburger:hover { background: var(--ios-bg); }

  .hamburger span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--ios-blue);
    border-radius: 2px;
    transition: 0.25s;
  }

  .hamburger.active span:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }
  .hamburger.active span:nth-child(2) { opacity: 0; }
  .hamburger.active span:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  /* ============================================
     반응형 - 태블릿 (768px ~ 1279px)
  ============================================ */
  @media (max-width: 1279px) {
    .header-top { padding: 0 16px; }
    .menu-bar { padding: 0 16px; }
    .menu > li > a { padding: 8px 10px; font-size: 14px; }

    /* 좁은 폭에서 상단 메뉴가 바를 넘치면 두 줄로 흘린다.
       종전엔 통계/현황·홈페이지를 숨겨(menu-resp-hide) 한 줄에 맞췄지만,
       "권한에 따라 동일하게 보이게" 로 바뀌어(사용자 지시) 숨기지 않는다 → 넘치면 접는다.
       ⚠️ 가로 스크롤(overflow-x:auto)로 풀면 안 된다 — 스크롤 컨테이너가 클리핑을 만들어
          hover 드롭다운(.submenu, position:absolute)이 잘린다.
       .menu-bar 는 height:48px 고정이라 두 줄이 되면 넘치므로 auto 로 푼다. */
    .menu-bar { height: auto; min-height: 48px; }
    .menu { flex-wrap: wrap; height: auto; padding: 4px 0; }
    .menu > li { height: auto; }

    /* 헤더 버튼 텍스트 축소 */
    .header-btn { min-width: 48px; padding: 5px 8px; font-size: 11px; }
    .header-btn svg { width: 16px; height: 16px; }

    .logo-placeholder { width: 140px; height: 40px; font-size: 18px; }
    #headerLogoImg { height: 34px; }

    /* 좌측 고정 / 중앙+우측 세로 배치 */
    .main {
      grid-template-columns: 280px 1fr;
      grid-template-areas:
        "left center"
        "left right";
      gap: 12px;
      padding: 12px 16px;
    }
    .left { grid-area: left; }
    .center { grid-area: center; }
    .right {
      grid-area: right;
      position: static;
      max-height: none;
      overflow-y: visible;
    }

    .footer { padding: 12px 16px 10px; }
  }

  /* ============================================
     반응형 - 모바일 (767px 이하)
  ============================================ */
  @media (max-width: 767px) {
    .header-top { height: 56px; padding: 0 12px; }
    .logo-placeholder { width: 110px; height: 36px; font-size: 16px; letter-spacing: 1px; }
    #headerLogoImg { height: 30px; }

    /* 헤더 버튼 텍스트 숨기고 아이콘만 */
    .header-btn span { display: none; }
    .header-btn {
      flex-direction: row;
      min-width: auto;
      padding: 6px;
      width: 36px;
      height: 36px;
      gap: 0;
    }
    .header-btn svg { width: 18px; height: 18px; }

    /* 상단바 액션 아이콘은 전부 드로어(.mobile-menu-actions)로 이전 → 상단바는 로고+검색+햄버거만 */
    .header-right .header-btn {
      display: none;
    }

    /* 통합검색 — 버튼들이 빠져 생긴 자리를 검색창이 채운다 */
    .header-search { padding: 0 8px; }
    .header-search input { height: 32px; font-size: 13px; padding: 0 10px; }
    .header-search-btn { width: 32px; height: 32px; }

    .hamburger { display: flex; }

    /* 메뉴바 - 햄버거 클릭 시 펼침 */
    .menu-bar {
      display: none;
      position: absolute;
      top: 56px;
      left: 0;
      right: 0;
      height: auto;
      flex-direction: column;
      align-items: stretch;
      padding: 8px 0;
      box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    }
    .menu-bar.active { display: flex; }

    .menu {
      flex-direction: column;
      gap: 0;
      align-items: stretch;
      height: auto;
      width: 100%;
    }

    .menu > li {
      width: 100%;
      height: auto;
      flex-direction: column;
      align-items: stretch;
      border-bottom: 0.5px solid var(--ios-separator);
    }
    .menu > li:last-child { border-bottom: none; }

    .menu > li > a {
      padding: 14px 20px;
      border-radius: 0;
      font-size: 15px;
    }

    /* 모바일에서 서브메뉴 항상 펼침 */
    .submenu {
      position: static;
      opacity: 1;
      visibility: visible;
      transform: none;
      box-shadow: none;
      border-radius: 0;
      background: var(--ios-bg);
      margin-top: 0;
      backdrop-filter: none;
      -webkit-backdrop-filter: none;
    }

    .submenu li a {
      padding: 11px 20px 11px 36px;
      font-size: 14px;
      color: var(--ios-text-secondary);
    }

    .has-sub > a::after { content: " ▾"; }

    /* 메인: 1열 세로 배치 + 카드 단위 순서 재배열 (모바일 우선순위) */
    .main {
      display: flex;
      flex-direction: column;
      gap: 12px;
      padding: 12px;
      grid-template-columns: none;
      grid-template-areas: none;
    }

    /* left/right/center 컨테이너는 flex 흐름 단순화하기 위해 contents로 */
    .main > .left,
    .main > .right,
    .main > .center {
      display: contents;
    }

    /* center 내부 컨테이너도 contents로 (centerWidgets) */
    #centerWidgets {
      display: contents;
    }

    /* 카드별 순서 지정 (위로 갈수록 작은 숫자) */
    .work-buttons    { order: 1; }
    .widget-tasks    { order: 2; } /* 나의업무 */
    .widget-board    { order: 3; } /* 공지사항/뉴스/자유/시스템 */
    .calendar-card   { order: 4; }
    .event-card      { order: 5; }
    .widget-tech     { order: 6; } /* 기술분석/자료/지식 등 */
    .quick-section   { order: 7; }

    /* 모바일에서 프로필 카드 숨김 (메뉴로 이동) */
    .profile-card    { display: none; }

    /* 하위 화면(게시판·메뉴 페이지)을 볼 때는 좌측 영역을 통째로 숨긴다(사용자 지시).
       모바일은 1열이라 좌측 카드가 본문 '아래'로 따라붙는데, 바로가기 목록은 햄버거 메뉴와
       중복이고 출퇴근 버튼도 그 화면과 무관하다.
       `.main.right-hidden` = 하위 화면이 열렸다는 기존 표식(setRightVisible(false)가 붙인다).
       ⚠️ 홈(위젯 화면)에서는 그대로 나온다 — 이 규칙은 하위 화면에서만 걸린다.
       ⚠️ 출근/퇴근은 햄버거 드로어에 없으므로 하위 화면에선 홈으로 나가야 누를 수 있다. */
    .main.right-hidden > .left { display: none; }

    /* 공지사항 게시판이 열려있을 때 */
    #centerBoard     { order: 3; }

    /* 모바일 메뉴 - 프로필 표시 */
    .mobile-menu-profile {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 16px;
      background: var(--ios-bg);
      border-bottom: 0.5px solid var(--ios-separator);
    }

    /* 모바일 메뉴 - 빠른 액션(상단바 이전): 3열 칩 + 로그아웃 풀폭 */
    .mobile-menu-actions {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      padding: 12px 16px;
      border-bottom: 0.5px solid var(--ios-separator);
    }
    .mobile-action-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;
      min-height: 56px;
      padding: 10px 4px;
      background: var(--ios-card, #fff);
      border: 0.5px solid var(--ios-separator);
      border-radius: 10px;
      font-size: 11px;
      color: var(--ios-text);
      cursor: pointer;
    }
    .mobile-action-btn svg { width: 20px; height: 20px; }
    .mobile-action-btn:active { background: var(--ios-bg); }
    .mobile-action-logout {
      color: var(--ios-red, #e55b5b);
    }

    .mobile-menu-profile-photo {
      width: 48px;
      height: 48px;
      border-radius: 12px;
      background: var(--ios-fill);
      overflow: hidden;
      flex-shrink: 0;
    }

    .mobile-menu-profile-photo img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .mobile-menu-profile-info {
      flex: 1;
      min-width: 0;
    }

    .mobile-profile-name {
      font-size: 15px;
      font-weight: 600;
      color: var(--ios-text);
      letter-spacing: -0.2px;
    }

    .mobile-profile-position {
      font-size: 13px;
      color: var(--ios-text-secondary);
      margin-top: 2px;
    }

    .mobile-profile-dept {
      font-size: 12px;
      color: var(--ios-text-secondary);
      margin-top: 2px;
    }

    .mobile-profile-last {
      font-size: 11px;
      color: var(--ios-text-tertiary);
      margin-top: 4px;
    }

    .left, .right {
      position: static;
      max-height: none;
      overflow-y: visible;
    }

    /* 푸터 */
    .footer { padding: 10px 12px 8px; }
    .footer-addresses { grid-template-columns: 1fr; gap: 10px; }

    /* 위젯 탭 - 적은 탭은 가로 스크롤, 많은 탭은 줄바꿈 (widget-tabs-many) */
    .widget-tabs:not(.widget-tabs-many) {
      overflow-x: auto;
      flex-wrap: nowrap;
    }
    .widget-tabs:not(.widget-tabs-many) .tab { flex-shrink: 0; }

    /* widget-tabs-many는 모바일에서도 줄바꿈 */
    .widget-tabs-many {
      flex-wrap: wrap !important;
      overflow-x: visible !important;
      padding-right: 12px !important;
    }

    /* 모바일에서는 widget-icons를 일반 흐름에 두어 자연스럽게 줄바꿈 처리 */
    .widget-tabs-many .widget-icons {
      position: static !important;
      right: auto !important;
      top: auto !important;
      margin-left: auto !important;
      background: transparent !important;
    }

    /* 게시글 - 작성자 숨김 */
    .post-list li {
      grid-template-columns: 1fr auto;
      gap: 8px;
    }
    .post-author { display: none; }

    /* 게시판 전체 목록 표 — 모바일: 컬럼 숨김 대신 가로 스크롤로 전 컬럼 유지(그리드 눌림 방지).
       (이전엔 번호·조회를 숨겼으나 사용자 요청으로 스크롤 방식으로 전환.) */
    .notice-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .board-list { min-width: 600px; }
    .notice-table th, .notice-table td { padding: 11px 8px; }

    /* 게시판 검색/글쓰기 툴바 — 모바일: 검색창은 한 줄 전체, 검색/글쓰기 버튼은 다음 줄로 자연 줄바꿈.
       이전엔 검색창과 버튼이 한 줄에서 겹쳐 버튼이 입력창 밑으로 숨어 보이던 것. */
    .notice-actions { width: 100%; flex-wrap: wrap; }
    .notice-search { flex: 1 1 100%; min-width: 0; }
    .notice-search input { width: 100%; box-sizing: border-box; }
    .notice-actions .pw-btn, .notice-actions .btn-primary {
      flex: 0 0 auto; white-space: nowrap;
    }

    /* 넓은 표/그리드 — 모바일 가로 스크롤(구입물품 신청·유류비 계산·출장비용 정산).
       고정폭 컬럼이 좁은 화면에서 눌려 읽기 어렵던 것 → min-width 로 자연폭 유지 + 스크롤. */
    .ga-hscroll, .fuel-calc-wrap, .rqst-hscroll {
      overflow-x: auto; -webkit-overflow-scrolling: touch;
    }
    .ga-hscroll > #gaPurcTable { min-width: 560px; }
    .ga-hscroll > .otre-cost-table { min-width: 520px; }   /* 출장결과보고 신청폼 비용정산(항목110+금액180+비고) */
    .fuel-calc-wrap > table { min-width: 720px; }   /* 데스크톱 모달(760px) 원본 폭 그대로 스크롤 */
    /* 상세 본문 넓은 표(출장비용·구매품목·일괄휴가자) — 표마다 컬럼 수가 달라 단일 min-width 대신
       max-content 로 각 표의 원본 자연폭 유지 + 스크롤. 짧은 표는 min-width:100% 로 컨테이너 채움. */
    .rqst-hscroll > .cmmtList { width: max-content; min-width: 100%; }

    /* ⚠️ 상세 본문 부모 표(rqst-fixed)가 auto 레이아웃이면 셀이 내부 표(560px)를 감싸며 늘어나
       .rqst-hscroll 이 스크롤되지 않고 모달 전체가 넓어진다. fixed 레이아웃으로 셀 폭을 가둬야
       내부 표가 셀을 넘겨 실제로 가로 스크롤된다(colgroup 110px + 나머지). 긴 값은 줄바꿈. */
    .rqst-fixed { table-layout: fixed; width: 100%; }
    .rqst-fixed td { word-break: break-word; }

    /* 개인업무 > 나의업무 풀페이지 표 — 고정폭 컬럼(합 450px)이 좁은 화면에서 눌리던 것 → 가로 스크롤.
       ⚠️ 데이터 있는 렌더만 래퍼에 inline overflow-x:auto 를 단다(빈 목록 렌더는 안 단다) →
       그 표에만 min-width 부여해, 내용 없을 땐 스크롤이 안 생기고 안내문만 자연 표시. */
    #mdListWrap .notice-table-wrap[style*="overflow"] .notice-table { min-width: 680px; }

    /* 게시물 확인(읽음 확인자) 3분할 표 — 모바일: 3열이 나란히(각 1/3폭)라 각 열 안의
       중첩 표(No34+확인일시120=154px 고정)가 열 폭을 넘겨 이웃 열과 겹쳐 보이던 것 →
       3열을 세로로 쌓아 1열로. (JS 주입 스타일이 나중에 로드돼 이기려면 !important) */
    .rc-main, .rc-main > tbody, .rc-main > tbody > tr { display: block !important; width: auto !important; }
    .rc-main > tbody > tr > .rc-col {
      display: block !important; width: auto !important;
      border-right: 0 !important; padding: 0 !important; margin-bottom: 0 !important;
    }
    /* 2·3번째 묶음의 반복 헤더(No./확인자/확인일시)는 숨겨 하나의 연속 표처럼 보이게.
       행 번호(rowNo)는 원래 연속값이라 헤더만 감춰도 1..N 이 자연스럽게 이어짐. */
    .rc-main > tbody > tr > .rc-col:not(:first-child) .rc-tbl thead { display: none; }

    /* 상세 모달 푸터 — 모바일: 좌/우 양끝정렬(space-between)이 좌측 그룹(출력/수정요청)을
       좁은 칸으로 눌러 버튼 글씨가 세로로 쪼개지던 것(출/력). 두 그룹을 각각 전폭으로
       세로 스택 → 좌측 그룹 한 줄, 우측 그룹 아래 줄로 자연 줄바꿈. 버튼 텍스트 nowrap. */
    .modal-footer:has(.modal-footer-left, .modal-footer-right) {
      justify-content: flex-start;
      flex-wrap: wrap;
    }
    .modal-footer-left, .modal-footer-right { width: 100%; }
    .modal-footer .btn { white-space: nowrap; }

    /* 신청 폼 공용 결재선 표(approval-line.js) — 모바일: 고정폭 컬럼(No44+상태104+버튼128)이
       결재자 칸을 40px 로 눌러 이름이 세로로 쪼개지던 것(김/대/일) → 고정폭·패딩 축소로
       이름 폭 확보 + 이름은 음절 단위로 끊기지 않게 keep-all. (nth-child 로 인라인 width 재정의) */
    .al-table th, .al-table td { padding: 8px 5px; }
    /* th 의 인라인 width(44/104/128px)를 이겨야 하므로 !important */
    .al-table th:nth-child(1), .al-table td:nth-child(1) { width: 30px !important; }
    .al-table th:nth-child(3), .al-table td:nth-child(3) { width: 72px !important; }
    .al-table th:nth-child(4), .al-table td:nth-child(4) { width: 104px !important; }
    .al-table td:nth-child(2) { word-break: keep-all; overflow-wrap: anywhere; }
    .al-table .al-type { max-width: 100%; }
    .al-table .al-mini { padding: 2px 5px; }

    /* 근무현황 모달 - 모바일 */
    .modal { border-radius: 14px; }
    .modal-large { max-width: 100%; }

    .status-tabs { padding: 8px 12px 0; }
    .status-tab { padding: 10px 12px; font-size: 13px; }

    .status-body { padding: 12px; }

    /* 툴바를 세로로 쌓아 범례가 날짜줄 아래로 (좁은 화면에서 범례 잘림 방지) */
    .status-toolbar { flex-direction: column; align-items: stretch; }
    .work-legend { flex-wrap: wrap; }

    .status-date-row {
      flex-wrap: wrap;
      gap: 6px;
      padding: 6px 0 12px;
    }
    .status-date-row input[type="date"] { font-size: 13px; }

    .status-summary {
      grid-template-columns: repeat(2, 1fr);
      gap: 6px;
    }
    .summary-card { padding: 8px; }
    .summary-value { font-size: 18px; }

    /* 근무현황 표 - 모바일: 모든 컬럼 유지하고 status-table-wrap 가로 스크롤
       (구 mock 의 nth-child(2) 부서 숨김 규칙은 현재 표에선 이름/근무일을 잘못
        숨겨서 제거함) */
    .status-table { font-size: 12px; }
    .status-table th, .status-table td { padding: 8px; }
    .status-name { font-size: 13px; }

    /* 일정 모달 폼 */
    .type-select { grid-template-columns: repeat(2, 1fr); }
    /* 위 규칙은 (0,1,0) 이라 #eventModal 의 6열(1,1,0)을 못 이긴다 → 같은 ID 로 되돌린다 */
    #eventModal .modal { max-width: 100%; }
    #eventModal .type-select { grid-template-columns: repeat(2, 1fr); }
    .modal-body { padding: 16px; }

    /* 개인정보 모달 - 모바일은 세로 배치 */
    .profile-modal-body {
      grid-template-columns: 1fr;
      gap: 16px;
    }
    .profile-photo-area img {
      width: 120px; height: 150px;
    }

    /* ========== 일정관리 달력 (모바일) ==========
       데스크톱 값(칸 116px · 칩 12px · 필터 3줄)을 그대로 쓰면 폭 390px 에서
       칸 하나가 52px 라 칩 글자가 2~3자씩 세로로 쪼개지고, 달력이 시작되기도 전에
       툴바+필터+힌트가 250px 를 먹는다. */

    /* 툴바 — 제목 한 줄, 버튼은 그 아래. 터치 타깃 29px → 36px */
    .sched-toolbar { gap: 8px; }
    .sched-title { order: -1; width: 100%; font-size: 16px; }
    .sched-views { margin-left: 0; }
    .sched-nav button,
    .sched-views button { min-height: 36px; padding: 0 12px; }

    /* 필터 — 3줄(84px)을 가로 스크롤 한 줄로. 무엇이 꺼졌는지 보여야 하므로 숨기지는 않는다. */
    .sched-filters {
      flex-wrap: nowrap;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
      padding-bottom: 2px;
    }
    .sched-filters::-webkit-scrollbar { display: none; }
    .sched-filters .sf-label,
    .sched-filters .sf-item { flex: 0 0 auto; }

    /* 힌트 — 두 줄을 먹는데, 날짜를 한 번 눌러 보면 바로 드러나는 내용이라 좁은 화면에선 뺀다. */
    .sched-hint { display: none; }

    /* 월 뷰 — 칸을 낮추고 칩은 한 줄 말줄임(세로로 쪼개지던 것) */
    #schedCalendar { font-size: 12px; }
    #schedCalendar .fc-daygrid-day-frame { min-height: 64px; }
    #schedCalendar .fc-daygrid-day-number { font-size: 11px; }
    #schedCalendar .fc-col-header-cell-cushion { font-size: 11px; }
    /* 칩은 우측 요약 달력과 같은 방식 — '[구분명]제목' 을 그대로 두고 줄바꿈으로 다 보여준다(사용자 지시).
       ⚠️ 한 줄 말줄임으로 바꾸면 좁은 칸에서 접두어가 폭을 다 먹어 `[생일]…` 처럼
          정작 이름이 한 글자도 안 보인다. 접두어를 살리려면 줄바꿈이 짝이다.
       크기만 데스크톱(#schedCalendar 12px)에서 되돌린다 — ID 규칙이라 미디어쿼리로 눌러야 한다. */
    #schedCalendar .fc-daygrid-event { font-size: 10px; padding: 1px 4px; }

    /* 주·일 뷰 — 시간격자 자체는 폭 46px 여도 '언제인지'는 읽힌다. 칩은 글자만 줄인다.
       (종일 칩도 월 뷰와 같은 줄바꿈 — 표기가 화면마다 갈리지 않게.) */
    #schedCalendar .fc-timegrid-event { font-size: 10px; padding: 1px 3px; }
    #schedCalendar .fc-timegrid-axis-cushion,
    #schedCalendar .fc-timegrid-slot-label-cushion { font-size: 10px; }

    /* 빠른 등록 팝오버 — 320px 고정이면 360px 기기에서 여백이 거의 없다 */
    .sched-quick { width: min(320px, calc(100vw - 24px)); }
  }

  /* 매우 작은 화면 (480px 이하) */
  @media (max-width: 480px) {
    .header-top { padding: 0 10px; }
    .logo-placeholder { width: 100px; height: 34px; font-size: 14px; }
    #headerLogoImg { height: 26px; }
    .header-btn { width: 32px; height: 32px; }
    .header-btn svg { width: 16px; height: 16px; }
  }