/* ============================================================
   02-left-center-right.css
   좌측 (프로필+신청메뉴) + 중앙 (위젯+신청페이지) + 우측 (달력)
   ============================================================ */

  /* ============================================
     좌측 영역
  ============================================ */
  .left {
    display: flex;
    flex-direction: column;
    gap: 12px;
    align-self: start;
  }

  /* 프로필 카드 */
  .profile-card {
    padding: 14px;
    background: var(--ios-card);
    border-radius: 14px;
  }

  .profile-top {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 10px;
  }

  .profile-photo {
    width: 40px;
    height: 50px;
    border-radius: 8px;
    background: var(--ios-fill);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    flex-shrink: 0;
  }

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

  .profile-photo.has-photo {
    background: linear-gradient(180deg, var(--ios-blue-light) 0%, var(--ios-blue) 100%);
    box-shadow: 0 4px 12px rgba(0, 122, 255, 0.25);
  }

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

  .profile-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ios-text);
    margin-bottom: 2px;
    letter-spacing: -0.3px;
  }

  .profile-position {
    font-size: 12px;
    color: var(--ios-blue);
    font-weight: 500;
    margin-bottom: 1px;
  }

  .profile-dept {
    font-size: 11px;
    color: var(--ios-text-secondary);
  }

  .profile-last {
    border-top: 0.5px solid var(--ios-separator-thin);
    padding-top: 8px;
    font-size: 11px;
    color: var(--ios-text-secondary);
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .profile-last .last-time {
    color: var(--ios-text);
    font-weight: 500;
    font-size: 11px;
  }

  /* 출퇴근 버튼 */
  .work-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }

  .btn-work {
    background: var(--ios-card);
    border: none;
    border-radius: 12px;
    padding: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--ios-text);
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s, opacity 0.15s, transform 0.1s;
  }

  .btn-work:hover { background: #FAFAFA; }
  .btn-work:active { transform: scale(0.97); }

  .btn-work:disabled {
    opacity: 0.4;
    cursor: not-allowed;
  }

  .btn-work:disabled.done {
    opacity: 1;
    background: var(--ios-bg);
  }

  .btn-work:disabled:hover { background: var(--ios-card); }
  .btn-work:disabled.done:hover { background: var(--ios-bg); }
  .btn-work:disabled:active { transform: none; }

  .btn-work .btn-icon { font-size: 14px; }
  .btn-checkin .btn-icon { color: var(--ios-green); }
  .btn-checkout .btn-icon { color: var(--ios-red); }
  .btn-status .btn-icon { color: var(--ios-blue); }

  .btn-time {
    font-size: 11px;
    font-weight: 600;
    color: var(--ios-text-secondary);
    margin-left: 2px;
    font-variant-numeric: tabular-nums;
  }

  .btn-checkin.done .btn-time { color: var(--ios-green); }
  .btn-checkout.done .btn-time { color: var(--ios-red); }

  .btn-status {
    grid-column: 1 / -1;
    padding: 8px;
  }

  /* 신청 바로가기 */
  .quick-section { padding: 0; }

  .quick-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--ios-text-secondary);
    padding: 14px 16px 8px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }

  .quick-buttons {
    list-style: none;
  }

  .quick-buttons li a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    color: var(--ios-text);
    font-size: 14px;
    border-bottom: 0.5px solid var(--ios-separator-thin);
    transition: background 0.1s;
    cursor: pointer;
  }

  .quick-buttons li:last-child a { border-bottom: none; }
  .quick-buttons li a:hover { background: var(--ios-bg); }

  .qb-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
  }

  .qb-arrow {
    margin-left: auto;
    color: var(--ios-text-tertiary);
    font-size: 14px;
  }

  /* 바로가기 신규 건수 배지 — 게시판 탭의 .tab-new-count 와 같은 모양.
     margin-left:auto 로 화살표 앞(우측)에 붙고, 화살표는 뒤이어 붙는다.
     ⚠️ 숨김은 inline style 이 아니라 .on 클래스로 — 인접 선택자(+)는 형제가
     display:none 이어도 적용되므로, 배지가 없는 항목의 화살표까지
     margin-left:auto 를 잃고 글자 옆에 붙어 버린다. */
  .qb-new-count {
    display: none;
    margin-left: auto;
    padding: 1px 6px;
    background: var(--ios-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    min-width: 16px;
    text-align: center;
    line-height: 1.4;
  }
  .qb-new-count.on { display: inline-block; }
  .qb-new-count.on + .qb-arrow { margin-left: 6px; }

  /* ============================================
     중앙 영역 - 위젯
  ============================================ */
  .center { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
  #centerWidgets { display: flex; flex-direction: column; gap: 20px; min-width: 0; }

  .page-header { padding: 8px 4px 12px; }

  .page-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--ios-text);
    margin-bottom: 4px;
    letter-spacing: -0.5px;
  }

  .page-subtitle {
    font-size: 14px;
    color: var(--ios-text-secondary);
  }

  /* 위젯 (탭형) */
  .widget {
    background: var(--ios-card);
    border-radius: 14px;
    overflow: hidden;
    max-width: 100%;
    min-width: 0;
  }

  .widget-tabs {
    display: flex;
    align-items: center;
    background: var(--ios-card);
    border-bottom: 0.5px solid var(--ios-separator-thin);
    padding: 8px 12px;
    gap: 4px;
    overflow-x: hidden;
    scrollbar-width: none;
  }

  .widget-tabs::-webkit-scrollbar { display: none; }

  /* 위젯 2처럼 탭 수가 적은 경우는 가로 스크롤 허용 */
  .widget-tabs:not(.widget-tabs-many) {
    overflow-x: auto;
  }

  .widget-tabs .tab {
    background: transparent;
    border: none;
    padding: 7px 12px;
    font-size: 13px;
    color: var(--ios-text-secondary);
    cursor: pointer;
    border-radius: 8px;
    white-space: nowrap;
    transition: background 0.15s, color 0.15s;
    font-weight: 500;
  }

  .widget-tabs .tab:hover { background: var(--ios-bg); }

  .widget-tabs .tab.active {
    background: rgba(0, 122, 255, 0.1);
    color: var(--ios-blue);
    font-weight: 600;
  }

  .tab-badge {
    display: inline-block;
    background: var(--ios-red-soft);
    color: white;
    font-size: 10px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: 10px;
    margin-left: 4px;
    vertical-align: middle;
  }

  .widget-icons {
    margin-left: auto;
    display: flex;
    gap: 2px;
    flex-shrink: 0;
  }

  .widget-icons .ico {
    background: none;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    color: var(--ios-text-secondary);
    cursor: pointer;
    font-size: 14px;
    transition: background 0.15s;
  }

  .widget-icons .ico:hover { background: var(--ios-bg); color: var(--ios-blue); }

  .widget-icons .ico svg {
    width: 14px;
    height: 14px;
  }

  .widget-body {
    padding: 0;
    overflow: hidden;
  }

  /* 자유게시글/시스템요청 탭일 때 5개 영역 고정 */
  .widget-body.fixed-five {
    min-height: 160px;
  }

  .empty-state {
    padding: 80px 20px;
    text-align: center;
    color: var(--ios-text-secondary);
    font-size: 14px;
  }

  /* 게시글 리스트 */
  .post-list { list-style: none; }

  .post-list li {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 12px;
    align-items: center;
    padding: 7px 16px;
    border-bottom: 0.5px solid var(--ios-separator-thin);
    border-left: 3px solid transparent;   /* 고정 행과 정렬 맞춤 */
    font-size: 13px;
    color: var(--ios-text);
    cursor: pointer;
    transition: background 0.1s;
  }

  .post-list li:last-child { border-bottom: none; }
  .post-list li:hover { background: var(--ios-bg); }

  /* 고정(pinned) — 앰버 톤 + 왼쪽 포인트 바 */
  .post-list li.pinned {
    background: rgba(255, 159, 10, 0.10);
    border-left-color: #ff9f0a;
  }

  .post-list li.pinned:hover {
    background: rgba(255, 159, 10, 0.16);
  }

  .post-list li.pinned .post-title {
    font-weight: 600;
  }

  .post-list li.pinned .post-title b {
    color: #b8730a;
  }

  /* 업무 위젯 - 4컬럼 테이블 형식 */
  .task-list-table li.task-row {
    display: grid;
    grid-template-columns: 70px 1fr 70px;
    gap: 10px;
    align-items: center;
    padding: 8px 16px;
    border-bottom: 0.5px solid var(--ios-separator-thin);
    font-size: 13px;
    color: var(--ios-text);
    cursor: pointer;
    transition: background 0.1s;
  }

  .task-list-table li.task-row:last-child { border-bottom: none; }
  .task-list-table li.task-row:hover { background: var(--ios-bg); }

  .task-col-type {
    font-size: 11px;
    font-weight: 600;
    color: var(--ios-blue);
    background: rgba(0, 122, 255, 0.1);
    padding: 3px 6px;
    border-radius: 5px;
    text-align: center;
    white-space: nowrap;
  }

  /* 업무 종류별 색상 */
  .task-col-type.t-vacation {
    color: #1e8a3a;
    background: rgba(52, 199, 89, 0.12);
  }
  .task-col-type.t-business {
    color: #8e2bbf;
    background: rgba(175, 82, 222, 0.12);
  }
  .task-col-type.t-outside {
    color: #b86400;
    background: rgba(255, 149, 0, 0.12);
  }
  .task-col-type.t-approval {
    color: #0051d5;
    background: rgba(0, 122, 255, 0.12);
  }
  .task-col-type.t-expense {
    color: #c41e15;
    background: rgba(255, 59, 48, 0.12);
  }

  /* 제목 텍스트만 말줄임하고 댓글수·NEW 는 항상 표시 → flex 로 분리(게시판 목록과 동일 패턴). */
  .task-col-title {
    display: flex;
    align-items: center;
    gap: 3px;
    min-width: 0;
    overflow: hidden;
  }
  .task-col-title .task-col-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }
  .task-col-title .comment { color: var(--ios-orange); font-weight: 600; flex-shrink: 0; }
  .task-col-title .new-badge { flex-shrink: 0; }

  .task-col-approver {
    font-size: 12px;
    color: var(--ios-text-secondary);
    text-align: right;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* 업무보고 탭 — 레거시 DtdtBusi 위젯 (이번 주 일일업무 작성상태) */
  /* .post-list li(display:grid) 보다 specificity 높게 — .weekreport-list 접두어로 강제 */
  .weekreport-list { list-style: none; margin: 0; padding: 0; }
  .weekreport-list .weekreport-head {
    display: flex;
    justify-content: flex-end;
    padding: 6px 14px;
    border-bottom: 0.5px solid var(--ios-separator-thin);
  }
  .weekreport-write { font-size: 12px; color: var(--ios-blue); cursor: pointer; }
  .weekreport-write:hover { text-decoration: underline; }
  .weekreport-list .weekreport-row {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0;
    padding: 7px 14px;
    border-bottom: 0.5px solid var(--ios-separator-thin);
    font-size: 13px;
    cursor: pointer;
  }
  .weekreport-list .weekreport-row:last-child { border-bottom: none; }
  .weekreport-list .weekreport-row:hover { background: var(--ios-bg); }
  .weekreport-list .weekreport-row.weekend { background: #f2f2f2; }
  .weekreport-list .weekreport-row .wr-date { width: 96px; color: var(--ios-text-secondary); }
  .weekreport-list .weekreport-row .wr-day { width: 56px; }
  .weekreport-list .weekreport-row .wr-status.wr-todo { color: #c41e15; font-weight: 700; }
  .weekreport-list .weekreport-row .wr-status.wr-done { color: #1e8a3a; }
  .weekreport-list .weekreport-row .wr-empty { color: var(--ios-text-secondary); }

  /* 모바일: 작은 화면에서도 한 줄 유지 */
  @media (max-width: 480px) {
    .task-list-table li.task-row {
      grid-template-columns: 60px 1fr 56px;
      gap: 8px;
      padding: 8px 12px;
      font-size: 12px;
    }
    .task-col-type {
      font-size: 10px;
      padding: 2px 4px;
    }
    .task-col-approver {
      font-size: 11px;
    }
  }

  /* 제목 텍스트만 말줄임(...)하고 댓글수/첨부/NEW 는 항상 보이도록 — flex 로 분리.
     이전엔 span 하나에 다 담아 말줄임이 뒤쪽 메타(댓글·첨부)까지 잘라먹었음(반응형에서 특히). */
  .post-title {
    display: flex;
    align-items: center;
    gap: 2px;
    min-width: 0;   /* grid 1fr 셀이 내용보다 좁아질 수 있게 → 말줄임 동작 */
    overflow: hidden;
  }

  .post-title .post-title-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .post-title b {
    color: var(--ios-blue);
    margin-right: 2px;
    font-weight: 600;
    flex-shrink: 0;
  }

  .post-title .comment {
    color: var(--ios-orange);
    font-weight: 600;
    margin-left: 2px;
    flex-shrink: 0;
  }

  .post-title .attach {
    font-size: 11px;
    margin-left: 2px;
    flex-shrink: 0;
  }

  /* NEW 배지 (게시글 옆) */
  .post-title .new-badge {
    display: inline-block;
    flex-shrink: 0;
    margin-left: 4px;
    padding: 1px 5px;
    background: rgba(255, 59, 48, 0.12);
    color: var(--ios-red);
    font-size: 9px;
    font-weight: 700;
    border-radius: 4px;
    vertical-align: middle;
    letter-spacing: 0.3px;
    line-height: 1.4;
    border: 1px solid rgba(255, 59, 48, 0.25);
  }

  /* ============================================
     Breadcrumb (메뉴 경로)
  ============================================ */
  .breadcrumb {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 4px 14px;
    font-size: 13px;
    color: var(--ios-text-secondary);
    flex-wrap: wrap;
  }

  .breadcrumb-home {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: var(--ios-text-secondary);
    cursor: pointer;
    padding: 3px 6px;
    border-radius: 6px;
    transition: background 0.15s, color 0.15s;
  }

  .breadcrumb-home:hover {
    background: var(--ios-bg);
    color: var(--ios-blue);
  }

  .breadcrumb-home svg {
    width: 14px;
    height: 14px;
  }

  .breadcrumb-sep {
    color: var(--ios-text-tertiary);
    font-size: 13px;
  }

  .breadcrumb-section {
    color: var(--ios-text-secondary);
    font-weight: 500;
  }

  .breadcrumb-current {
    color: var(--ios-text);
    font-weight: 600;
  }

  /* 페이지 헤더 (메뉴 페이지용) */
  .page-content {
    padding: 0;
  }

  /* ============================================
     휴가/출장 신청 페이지 (centerApp)
  ============================================ */
  .app-form {
    padding: 24px;
    background: var(--ios-card);
  }

  .app-form-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 12px;
    padding-bottom: 16px;
    margin-bottom: 16px;
    border-bottom: 0.5px solid var(--ios-separator-thin);
  }

  .app-form-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ios-text);
    letter-spacing: -0.4px;
  }

  /* 연차일수 정보 */
  .annual-info-row {
    margin-bottom: 16px;
  }
  .annual-info {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    background: rgba(0, 122, 255, 0.06);
    border-radius: 10px;
    border: 1px solid rgba(0, 122, 255, 0.15);
    flex-wrap: wrap;
  }
  .annual-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ios-text-secondary);
  }
  .annual-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--ios-blue);
  }
  .annual-period {
    font-size: 11px;
    color: var(--ios-text-tertiary);
    margin-left: auto;
  }
  @media (max-width: 480px) {
    .annual-period { margin-left: 0; width: 100%; }
  }

  .req {
    color: var(--ios-red);
    margin-left: 2px;
  }

  /* 휴가구분 카드 그리드 */
  .vac-type-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
  }
  .vac-type-card {
    position: relative;
    cursor: pointer;
  }
  .vac-type-card input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
  }
  .vac-type-card span {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 12px 6px;
    border: 1px solid var(--ios-separator);
    border-radius: 10px;
    background: var(--ios-card);
    font-size: 13px;
    font-weight: 500;
    color: var(--ios-text);
    transition: all 0.15s;
  }
  .vac-type-card span small {
    font-size: 10px;
    color: var(--ios-text-tertiary);
    font-weight: 400;
  }
  .vac-type-card input[type="radio"]:checked + span {
    background: rgba(0, 122, 255, 0.1);
    border-color: var(--ios-blue);
    color: var(--ios-blue);
    font-weight: 600;
  }

  /* 폼 2칼럼 */
  .form-2col {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }

  /* 기간 입력 */
  .period-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .period-field {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background: var(--ios-bg);
    border: 1px solid var(--ios-separator);
    border-radius: 10px;
    min-width: 0;
  }
  .period-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ios-text-secondary);
    flex-shrink: 0;
    min-width: 28px;
  }
  .period-field input[type="date"],
  .period-field input[type="time"] {
    border: none;
    background: transparent;
    padding: 4px 0;
    font-size: 14px;
    color: var(--ios-text);
    min-width: 0;
    flex: 1;
  }
  .period-field input:focus { outline: none; }

  .period-summary {
    margin-top: 8px;
    padding: 8px 12px;
    background: rgba(0, 122, 255, 0.08);
    color: var(--ios-blue);
    border-radius: 8px;
    font-size: 13px;
    font-weight: 600;
    text-align: center;
  }

  /* 결재선 */
  .approval-line {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  /* 결재선 - 상신자 정보 (별도 영역) */
  .approval-submitted {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: var(--ios-bg);
    border-radius: 8px;
    font-size: 13px;
    flex-wrap: wrap;
  }
  .approval-submitted-label {
    font-size: 11px;
    font-weight: 700;
    color: white;
    background: var(--ios-blue);
    padding: 2px 8px;
    border-radius: 10px;
    letter-spacing: 0.3px;
  }
  .approval-submitted-name {
    font-weight: 600;
    color: var(--ios-text);
  }
  .approval-submitted-time {
    font-size: 11px;
    color: var(--ios-text-secondary);
    margin-left: auto;
  }

  /* 결재자 카드 행 */
  .approval-cards-row {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
  }

  .approver-card {
    position: relative;
    flex: 1;
    min-width: 110px;
    padding: 12px 10px;
    background: var(--ios-bg);
    border: 1px solid var(--ios-separator);
    border-radius: 10px;
    text-align: center;
  }

  /* 결재자 카드의 삭제 버튼 (편집 가능 상태) */
  .approver-card .approver-remove {
    position: absolute;
    top: 2px;
    right: 4px;
    width: 18px;
    height: 18px;
    border: none;
    background: transparent;
    color: var(--ios-text-tertiary);
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .approver-card .approver-remove:hover {
    background: rgba(255, 59, 48, 0.15);
    color: var(--ios-red);
  }
  .approver-card.is-applicant .approver-remove {
    display: none;
  }

  /* 결재자 카드 일시 표시 */
  .approver-card .approver-time {
    margin-top: 4px;
    font-size: 10px;
    color: var(--ios-text-tertiary);
    font-weight: 500;
    letter-spacing: -0.2px;
    line-height: 1.3;
    word-break: keep-all;
  }
  .approver-role {
    font-size: 11px;
    color: var(--ios-text-tertiary);
    font-weight: 600;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
  }
  .approver-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ios-text);
    margin-bottom: 6px;
  }
  .approver-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 600;
  }
  .approver-status.applied {
    background: rgba(0, 122, 255, 0.15);
    color: var(--ios-blue);
  }
  .approver-status.pending {
    background: var(--ios-fill);
    color: var(--ios-text-secondary);
  }
  .approver-status.approved {
    background: rgba(52, 199, 89, 0.15);
    color: var(--ios-green);
  }
  .approver-status.rejected {
    background: rgba(255, 59, 48, 0.15);
    color: var(--ios-red);
  }

  .approval-arrow {
    color: var(--ios-text-tertiary);
    font-size: 16px;
    flex-shrink: 0;
  }

  /* 결재선 편집 영역 */
  .approval-line-wrap {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  .approval-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
    padding: 10px;
    background: var(--ios-bg);
    border-radius: 10px;
    border: 1px dashed var(--ios-separator);
  }

  .approval-toolbar .approval-select {
    flex: 1;
    min-width: 100px;
    padding: 7px 10px;
    border: 1px solid var(--ios-separator);
    border-radius: 8px;
    background: var(--ios-card);
    font-size: 13px;
    font-family: inherit;
    color: var(--ios-text);
  }

  /* 빈 결재선 안내 */
  .approval-empty {
    width: 100%;
    text-align: center;
    padding: 16px;
    color: var(--ios-text-tertiary);
    font-size: 13px;
    background: var(--ios-bg);
    border: 1px dashed var(--ios-separator);
    border-radius: 10px;
  }

  /* 출장자 영역 */
  .travelers-area {
    border: 1px solid var(--ios-separator);
    border-radius: 10px;
    background: var(--ios-bg);
    overflow: hidden;
  }
  .travelers-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px;
    background: var(--ios-card);
    border-bottom: 1px solid var(--ios-separator-thin);
    align-items: center;
  }
  .travelers-toolbar select {
    padding: 6px 10px;
    border: 1px solid var(--ios-separator);
    border-radius: 8px;
    font-size: 13px;
    background: var(--ios-card);
    color: var(--ios-text);
    min-width: 0;
  }
  .toolbar-divider {
    width: 1px;
    height: 20px;
    background: var(--ios-separator);
  }
  .btn-mini {
    padding: 5px 10px;
    border: 1px solid var(--ios-blue);
    background: var(--ios-blue);
    color: white;
    border-radius: 7px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
  }
  .btn-mini:hover { opacity: 0.85; }
  .btn-mini-danger {
    background: var(--ios-card);
    color: var(--ios-red);
    border-color: var(--ios-red);
  }

  .travelers-list {
    list-style: none;
    padding: 8px 12px;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 50px;
  }
  .travelers-list:empty::before {
    content: '출장자를 추가해주세요';
    color: var(--ios-text-tertiary);
    font-size: 13px;
    padding: 8px 4px;
  }
  .traveler-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px 5px 12px;
    background: var(--ios-card);
    border: 1px solid var(--ios-separator);
    border-radius: 14px;
    font-size: 12px;
    color: var(--ios-text);
  }
  .traveler-chip .remove {
    background: var(--ios-fill);
    border: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    color: var(--ios-text-secondary);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
  }
  .traveler-chip .remove:hover {
    background: var(--ios-red);
    color: white;
  }

  /* 에디터 */
  .app-editor {
    min-height: 160px;
    border: 1px solid var(--ios-separator);
    border-radius: 10px;
    background: var(--ios-card);
  }
  .app-fallback {
    width: 100%;
    padding: 12px;
    border: 1px solid var(--ios-separator);
    border-radius: 10px;
    font-family: inherit;
    font-size: 14px;
    color: var(--ios-text);
    resize: vertical;
  }

  /* 폼 푸터 */
  .app-form-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
    padding-top: 20px;
    border-top: 0.5px solid var(--ios-separator-thin);
    gap: 8px;
  }
  .footer-right {
    display: flex;
    gap: 8px;
  }
  .app-form-footer .btn-primary,
  .app-form-footer .btn-secondary {
    padding: 10px 20px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    font-family: inherit;
  }
  .app-form-footer .btn-primary {
    background: var(--ios-blue);
    color: white;
  }
  .app-form-footer .btn-primary:hover { opacity: 0.85; }
  .app-form-footer .btn-secondary {
    background: var(--ios-fill);
    color: var(--ios-text);
  }
  .app-form-footer .btn-secondary:hover {
    background: var(--ios-separator);
  }

  /* 모바일 적응 */
  @media (max-width: 767px) {
    .app-form { padding: 16px; }
    .vac-type-grid { grid-template-columns: repeat(2, 1fr); }
    .form-2col { grid-template-columns: 1fr; }
    .period-row { grid-template-columns: 1fr; }
    .approval-line { gap: 8px; }
    .approval-cards-row { gap: 6px; }
    .approval-arrow { display: none; }
    .approver-card { min-width: 0; flex: 1 1 calc(50% - 3px); }
    .approval-submitted-time { margin-left: 0; width: 100%; }
  }

  /* 업무 목록 (위젯 1) */
  .task-list li {
    cursor: pointer;
    padding: 10px 14px;
  }
  .task-list .task-status {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 700;
    margin-right: 6px;
  }
  .task-status.s-pending { background: rgba(0,122,255,0.15); color: var(--ios-blue); }
  .task-status.s-progress { background: rgba(255,149,0,0.15); color: var(--ios-orange); }
  .task-status.s-approved { background: rgba(52,199,89,0.15); color: var(--ios-green); }
  .task-status.s-rejected { background: rgba(255,59,48,0.15); color: var(--ios-red); }
  .task-status.s-draft { background: var(--ios-fill); color: var(--ios-text-secondary); }

  /* 임시 페이지 (page stub) */
  .page-stub {
    text-align: center;
    padding: 60px 24px;
    background: var(--ios-card);
  }

  .page-stub-icon {
    font-size: 56px;
    margin-bottom: 16px;
  }

  .page-stub-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--ios-text);
    margin-bottom: 12px;
    letter-spacing: -0.4px;
  }

  .page-stub-desc {
    font-size: 14px;
    color: var(--ios-text-secondary);
    line-height: 1.6;
    margin-bottom: 28px;
  }

  .page-stub .btn-primary {
    display: inline-block;
    padding: 12px 32px;
    background: var(--ios-blue);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s;
  }

  .page-stub .btn-primary:hover {
    opacity: 0.85;
  }

  /* ============== 위젯 - 반응형 탭 (줄바꿈 허용) ============== */
  .widget-tabs-many {
    position: relative;
    flex-wrap: wrap;
    overflow-x: visible !important;
    row-gap: 4px;
    padding-right: 80px; /* widget-icons 영역 확보 */
  }
  .widget-tabs-many .tab { flex-shrink: 0; }

  /* widget-icons를 우측 상단에 고정 (탭 줄바꿈에 영향 안 받게) */
  .widget-tabs-many .widget-icons {
    position: absolute;
    right: 12px;
    top: 8px;
    margin-left: 0;
    background: var(--ios-card);
    z-index: 1;
  }

  /* 더보기(⋯) 버튼은 줄바꿈 방식에서는 사용 안 함 */
  .more-tabs-btn { display: none !important; }

  /* 사용 안 함 - 호환용 잔존 (드롭다운) */
  .hidden-tabs-dropdown { display: none !important; }

  /* ============== 신청 페이지 → 모달(팝업) ============== */
  .app-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1000;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 24px 16px;
    /* 깜빡임 방지 */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.18s ease, visibility 0.18s ease;
    pointer-events: none;
  }

  .app-modal-overlay.app-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }

  .app-modal-content {
    background: var(--ios-card);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    width: 100%;
    max-width: 760px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    margin: auto;
    transform: scale(0.97);
    opacity: 0;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  }

  .app-modal-overlay.app-active .app-modal-content {
    transform: scale(1);
    opacity: 1;
  }

  /* 모달 모드일 때 폼 카드 자체는 그림자/테두리 제거 */
  .app-modal-overlay .app-form {
    border-radius: 14px;
    box-shadow: none;
    margin: 0;
  }

  /* 모달 닫기 버튼 (폼 헤더에 추가될 X 버튼) */
  .app-form-header {
    position: relative;
  }

  .app-modal-close {
    position: absolute;
    top: 0;
    right: 0;
    width: 32px;
    height: 32px;
    border: none;
    background: transparent;
    font-size: 24px;
    color: var(--ios-text-secondary);
    cursor: pointer;
    border-radius: 8px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .app-modal-close:hover {
    background: var(--ios-bg);
    color: var(--ios-text);
  }

  @media (max-width: 767px) {
    .app-modal-overlay {
      padding: 12px 8px;
    }
    .app-modal-content {
      max-height: calc(100vh - 24px);
    }
  }

  /* ============== 게시판을 모달로 띄울 때 (위젯 글쓰기에서 사용) ============== */
  #centerBoard.board-as-modal {
    position: fixed !important;
    inset: 0;
    z-index: 1000;
    background: rgba(0, 0, 0, 0.45);
    overflow-y: auto;
    padding: 24px 16px;
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
    pointer-events: none;
  }
  #centerBoard.board-as-modal.board-modal-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
  }
  #centerBoard.board-as-modal > * {
    width: 100%;
    max-width: 820px;
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    background: var(--ios-card);
    border-radius: 14px;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    margin: auto;
    transform: scale(0.97);
    opacity: 0;
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  }
  #centerBoard.board-as-modal.board-modal-active > * {
    transform: scale(1);
    opacity: 1;
  }
  /* 모달 모드일 때 breadcrumb 숨김 */
  #centerBoard.board-as-modal .breadcrumb {
    display: none;
  }
  @media (max-width: 767px) {
    #centerBoard.board-as-modal {
      padding: 12px 8px;
    }
    #centerBoard.board-as-modal > * {
      max-height: calc(100vh - 24px);
    }
  }

  /* ============== 차량관리 모달 ============== */

  /* 탭 바 */
  .vehicle-tab-bar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 16px;
    border-bottom: 0.5px solid var(--ios-separator-thin);
    background: var(--ios-card);
  }
  .vehicle-tab {
    padding: 12px 16px;
    border: none;
    background: transparent;
    font-size: 14px;
    font-weight: 500;
    color: var(--ios-text-secondary);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -0.5px;
    transition: color 0.15s;
  }
  .vehicle-tab.active {
    color: var(--ios-blue);
    border-bottom-color: var(--ios-blue);
    font-weight: 600;
  }
  .vc-add-btn {
    margin-left: auto;
    padding: 6px 14px !important;
    font-size: 13px !important;
  }

  /* 달력 */
  .vc-cal-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px 8px;
  }
  .vc-cal-nav {
    width: 32px; height: 32px;
    border: none;
    background: var(--ios-bg);
    border-radius: 8px;
    font-size: 18px;
    color: var(--ios-blue);
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  .vc-cal-nav:hover { background: rgba(0,122,255,0.1); }
  .vc-cal-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--ios-text);
    flex: 1;
    text-align: center;
    letter-spacing: -0.3px;
  }
  .vc-cal-today {
    font-size: 12px;
    font-weight: 600;
    color: var(--ios-blue);
    border: 1px solid var(--ios-blue);
    border-radius: 6px;
    padding: 3px 8px;
    background: transparent;
    cursor: pointer;
  }
  .vc-cal-today:hover { background: rgba(0,122,255,0.08); }

  .vc-cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding: 0 8px;
    margin-bottom: 4px;
  }
  .vc-cal-weekdays span {
    text-align: center;
    font-size: 11px;
    font-weight: 700;
    color: var(--ios-text-secondary);
    padding: 4px 0;
    text-transform: uppercase;
  }
  .vc-cal-weekdays .sun { color: var(--ios-red); }
  .vc-cal-weekdays .sat { color: var(--ios-blue); }

  .vc-cal-grid {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));   /* minmax(0,..)=긴 칩이 칸을 못 넓힘 → 칩 ellipsis 동작 */
    gap: 2px;
    padding: 0 8px 8px;
  }
  .vc-day {
    min-width: 0;             /* 그리드 칸이 콘텐츠 최소폭 밑으로 줄어들 수 있게 */
    min-height: 52px;
    padding: 4px;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    transition: background 0.1s;
  }
  .vc-day:hover { background: var(--ios-bg); }
  .vc-day.vc-other-month .vc-day-num { color: var(--ios-text-tertiary); }
  .vc-day.vc-today .vc-day-num {
    background: var(--ios-blue);
    color: white;
    border-radius: 50%;
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
    font-weight: 700;
  }
  .vc-day.vc-selected { background: rgba(0,122,255,0.08); }
  .vc-day-num {
    font-size: 12px;
    font-weight: 500;
    color: var(--ios-text);
    width: 22px; height: 22px;
    display: flex; align-items: center; justify-content: center;
  }
  .vc-day.vc-sun .vc-day-num { color: var(--ios-red); }
  .vc-day.vc-sat .vc-day-num { color: var(--ios-blue); }
  .vc-day.vc-today.vc-sun .vc-day-num,
  .vc-day.vc-today.vc-sat .vc-day-num { color: white; }

  .vc-day-chips {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
  }
  .vc-day-chip {
    font-size: 9px;
    font-weight: 600;
    padding: 1px 4px;
    border-radius: 3px;
    background: rgba(175, 82, 222, 0.15);
    color: #8e2bbf;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    line-height: 1.4;
  }
  /* 운행상태 색상 — 운행중(파랑)/운행완료(회색) */
  .vc-day-chip.vc-st-move { background: rgba(0,122,255,0.16); color: #0058c8; }
  .vc-day-chip.vc-st-done { background: rgba(142,142,147,0.22); color: #3a3a3c; }
  .vc-st-badge {
    display: inline-block; font-size: 10px; font-weight: 600;
    padding: 1px 6px; border-radius: 5px; vertical-align: middle;
  }
  .vc-st-badge.vc-st-move { background: rgba(0,122,255,0.16); color: #0058c8; }
  .vc-st-badge.vc-st-done { background: rgba(142,142,147,0.22); color: #3a3a3c; }
  .vc-st-badge.vc-st-repair { background: rgba(255,149,0,0.18); color: #b25f00; }
  .vc-day-chip-more {
    font-size: 9px;
    color: var(--ios-text-tertiary);
    padding-left: 4px;
  }

  .vc-day-records {
    border-top: 0.5px solid var(--ios-separator-thin);
    padding: 10px 16px 4px;
  }
  .vc-day-records-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ios-text);
    margin-bottom: 8px;
  }
  .vc-day-record-list { list-style: none; }
  .vc-day-record-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 0;
    border-bottom: 0.5px solid var(--ios-separator-thin);
    font-size: 13px;
  }
  .vc-day-record-list li:last-child { border-bottom: none; }
  .vc-record-car {
    font-weight: 700;
    color: #8e2bbf;
    white-space: nowrap;
    min-width: 36px;
  }
  .vc-record-info {
    flex: 1;
    min-width: 0;
  }
  /* 일자기록 본문(용무·운전자·행선지)이 길면 한 줄 ... 처리 */
  .vc-record-info > div {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .vc-record-driver {
    font-size: 11px;
    color: var(--ios-text-secondary);
    margin-top: 1px;
  }
  .vc-record-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
  }

  .vehicle-modal-body {
    padding: 0;
    height: calc(90vh - 120px);   /* 고정 — 탭 전환 시 크기 일정(신청 모달과 동일) */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 목록 */
  .vehicle-search-wrap input {
    width: 100%;
    padding: 8px 12px;
    border: 1px solid var(--ios-separator);
    border-radius: 8px;
    font-size: 13px;
    background: var(--ios-bg);
    box-sizing: border-box;
    font-family: inherit;
    color: var(--ios-text);
  }
  .btn-sm {
    padding: 8px 16px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
  }
  .vehicle-list-header {
    display: grid;
    grid-template-columns: 80px 1fr 70px 1fr 60px;
    gap: 8px;
    padding: 8px 16px;
    background: var(--ios-bg);
    font-size: 11px;
    font-weight: 700;
    color: var(--ios-text-secondary);
    letter-spacing: 0.3px;
    text-transform: uppercase;
  }
  .vehicle-list { list-style: none; }
  .vehicle-list li {
    display: grid;
    grid-template-columns: 80px 1fr 70px 1fr 60px;
    gap: 8px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 0.5px solid var(--ios-separator-thin);
    font-size: 13px;
    color: var(--ios-text);
    cursor: pointer;
    transition: background 0.1s;
  }
  .vehicle-list li:hover { background: var(--ios-bg); }
  .vehicle-list li:last-child { border-bottom: none; }

  .vc-col-car { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vc-col-date { font-size: 12px; color: var(--ios-text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vc-col-driver { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vc-col-dest { overflow: hidden; color: var(--ios-text-secondary); font-size: 12px; min-width: 0; }
  .vc-col-dest > div { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .vc-col-action { display: flex; gap: 4px; justify-content: flex-end; }

  .vc-btn-edit, .vc-btn-del {
    width: 26px; height: 26px;
    border: none; border-radius: 6px;
    font-size: 14px; cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    padding: 0; flex-shrink: 0;
  }
  .vc-btn-edit { background: rgba(0,122,255,0.1); color: var(--ios-blue); }
  .vc-btn-del  { background: rgba(255,59,48,0.1);  color: var(--ios-red); }

  .vehicle-empty {
    text-align: center;
    padding: 48px 20px;
    color: var(--ios-text-tertiary);
    font-size: 14px;
  }

  /* 차량수리 목록 그리드 */
  #repairList li {
    display: grid;
    grid-template-columns: 80px 90px 1fr 90px 56px;
    gap: 8px;
    align-items: center;
    padding: 10px 16px;
    border-bottom: 0.5px solid var(--ios-separator-thin);
    font-size: 13px;
    color: var(--ios-text);
    cursor: pointer;
  }
  #repairList li:hover { background: var(--ios-bg); }
  .rp-col-car  { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rp-col-date { font-size: 12px; color: var(--ios-text-secondary); white-space: nowrap; }
  .rp-col-shop { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .rp-col-cost { font-size: 12px; color: #1e8a3a; font-weight: 600; white-space: nowrap; text-align: right; }
  .rp-col-action { display: flex; gap: 4px; justify-content: flex-end; }

  /* 폼 */
  .vehicle-form-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-bottom: 0.5px solid var(--ios-separator-thin);
    font-size: 15px;
    font-weight: 600;
    color: var(--ios-text);
  }
  .vehicle-back-btn {
    background: none;
    border: none;
    color: var(--ios-blue);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
  }
  .vehicle-form { padding: 16px; }
  .vehicle-form .form-row { margin-bottom: 14px; }
  .vehicle-form .form-row label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ios-text-secondary);
    margin-bottom: 6px;
  }
  .vehicle-form input[type="text"],
  .vehicle-form input[type="number"],
  .vehicle-form input[type="tel"],
  .vehicle-form input[type="date"],
  .vehicle-form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid var(--ios-separator);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ios-text);
    background: var(--ios-card);
    box-sizing: border-box;
  }
  .vehicle-form input:focus,
  .vehicle-form textarea:focus { outline: none; border-color: var(--ios-blue); }
  .vehicle-form textarea { resize: none; line-height: 1.6; }
  .vehicle-datetime-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap;
  }
  /* #vehicleModal 스코프로 .form-row input[type="date"]/select 의 width:100% 전역 규칙(03-modal-footer.css)을
     명시도로 이겨 한 줄 배치 유지 — 안 걸면 각 요소가 100% 폭을 먹어 4줄로 줄바꿈됨. */
  #vehicleModal .vehicle-datetime-row input[type="date"] {
    width: auto; flex: 1 1 0; min-width: 0;
  }
  #vehicleModal .vc-hour-sel {
    padding: 9px 4px;
    border: 1px solid var(--ios-separator);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    background: var(--ios-card);
    color: var(--ios-text);
    cursor: pointer;
    width: 52px;
    flex: 0 0 auto;
  }
  .vc-sep { font-size: 13px; color: var(--ios-text-secondary); white-space: nowrap; flex: 0 0 auto; }
  .vehicle-form-footer {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    padding: 12px 16px;
    border-top: 0.5px solid var(--ios-separator-thin);
  }

  @media (max-width: 767px) {
    .vehicle-list-header,
    .vehicle-list li {
      grid-template-columns: 70px 1fr 60px 1fr 52px;
      font-size: 12px;
    }
    #repairList li {
      grid-template-columns: 64px 80px 1fr 80px 52px;
      font-size: 12px;
    }
    .vc-cal-grid { padding: 0 4px 8px; gap: 1px; }
    .vc-day { min-height: 44px; padding: 3px; }
    .vc-day-chip { font-size: 8px; }
  }

  /* ============== 직원찾기 모달 ============== */
  .staff-finder-body {
    padding: 0;
    max-height: calc(90vh - 80px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  /* 직원찾기 모달 헤더 패딩 축소(공용 modal-header 18/20 → 이 모달만) */
  #staffFinderModal .modal-header { padding: 11px 16px; }
  .staff-finder-content {
    display: grid;
    grid-template-columns: 195px 1fr;
    flex: 1;
    min-height: 0;
    overflow: hidden;
  }
  .staff-finder-tree {
    border-right: 0.5px solid var(--ios-separator-thin);
    overflow-y: auto;
    padding: 6px 4px;
    background: white;
    font-size: 12.5px;
  }
  .dept-node {
    padding: 3px 5px;
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 3px;
    line-height: 1.4;
  }
  .dept-node:hover { background: rgba(0,122,255,0.08); }
  .dept-node.active { background: rgba(0,122,255,0.15); color: var(--ios-blue); font-weight: 600; }
  .dept-node .toggle-icon {
    width: 12px;
    text-align: center;
    color: var(--ios-text-tertiary);
    font-size: 11px;
    flex-shrink: 0;
  }
  .dept-node .dept-icon {
    width: 18px;
    text-align: center;
    font-size: 13px;
    flex-shrink: 0;
  }
  .dept-node .dept-name {
    flex: 1;
    white-space: normal;      /* 좁은 트리에서 말줄임(...) 대신 줄바꿈으로 전체 표시 */
    word-break: break-all;
    line-height: 1.3;
  }
  .dept-node.dept-root .dept-name { font-weight: 600; }
  .dept-children { display: block; }

  /* 직원 목록 영역 */
  .staff-finder-list {
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: white;
  }
  .staff-list-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 7px 12px;
    flex-shrink: 0;
    gap: 12px;
  }
  .staff-count {
    font-size: 14px;
    color: var(--ios-text);
    font-weight: 500;
  }
  .staff-search {
    display: flex;
    align-items: center;
    gap: 4px;
  }
  .staff-search input {
    width: 180px;
    padding: 6px 10px;
    border: 1px solid var(--ios-separator);
    border-radius: 4px;
    font-size: 13px;
    background: white;
    box-sizing: border-box;
  }
  .staff-search input:focus {
    outline: none;
    border-color: var(--ios-blue);
  }
  .staff-search-btn {
    width: 30px;
    height: 30px;
    border: 1px solid var(--ios-separator);
    background: white;
    border-radius: 4px;
    cursor: pointer;
    font-size: 13px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .staff-search-btn:hover { background: var(--ios-bg); }

  /* 직원 테이블 */
  .staff-table-wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
  }
  .staff-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
    table-layout: fixed;   /* 고정폭 — 데이터 길면 셀 안에서 줄바꿈(가로 스크롤 없음) */
  }
  .staff-table thead th:nth-child(1) { width: 32px; }   /* 사진 */
  .staff-table thead th:nth-child(2) { width: 50px; }   /* 이름 */
  .staff-table thead th:nth-child(3) { width: 76px; }   /* 직급/직책 (한 셀 2줄) */
  .staff-table thead th:nth-child(4) { width: 105px; }  /* 내선번호 */
  .staff-table thead th:nth-child(5) { width: 105px; }  /* 휴대폰 */
  /* nth-child(6) e-mail = 나머지 폭 */
  .staff-table thead th:nth-child(7) { width: 82px; }   /* 생일 */
  .staff-table .staff-sub { color: var(--ios-text-secondary); }   /* 직급셀 아랫줄 = 직책 */
  .staff-cell-rank { line-height: 1.45; }
  .staff-table thead {
    position: sticky;
    top: 0;
    background: var(--ios-bg);
    z-index: 1;
  }
  .staff-table thead th {
    padding: 6px 6px;
    text-align: left;
    font-weight: 600;
    color: var(--ios-text-secondary);
    border-bottom: 1px solid var(--ios-separator);
    white-space: nowrap;
  }
  .staff-table thead th .th-sub {
    font-size: 11px;
    color: var(--ios-text-tertiary);
    font-weight: 400;
  }
  .staff-table tbody tr {
    border-bottom: 0.5px solid var(--ios-separator-thin);
    transition: background 0.1s;
  }
  .staff-table tbody tr:hover { background: rgba(0,122,255,0.04); }
  .staff-table tbody td {
    padding: 4px 6px;
    color: var(--ios-text);
    white-space: normal;       /* 데이터 길면 줄바꿈 */
    word-break: break-all;
    vertical-align: middle;
  }
  .staff-cell-photo {
    width: 34px;
    padding-left: 10px !important;
  }
  .staff-cell-name {
    font-weight: 600;
  }
  .staff-cell-num {
    font-variant-numeric: tabular-nums;
  }
  .staff-cell-email {
    color: var(--ios-text-secondary);
    white-space: nowrap;          /* 이메일은 한 줄 (넘치면 말줄임) */
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .staff-cell-birth {
    font-variant-numeric: tabular-nums;
    line-height: 1.4;
  }
  .staff-birth-year {
    font-size: 11px;
    color: var(--ios-text-tertiary);
  }
  .staff-photo-sm {
    width: 26px;
    height: 32px;
    border-radius: 4px;
    background: var(--ios-blue);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 12px;
    flex-shrink: 0;
    overflow: hidden;
  }
  img.staff-photo-sm { object-fit: cover; display: block; background: var(--ios-fill-tertiary, #eee); }
  .staff-row:hover { background: var(--ios-fill-quaternary, rgba(0,0,0,0.03)); }
  .staff-row td { cursor: pointer; }
  .staff-empty { padding: 40px; text-align: center; color: var(--ios-text-tertiary); }

  /* 직원 상세 팝업 (원본 empSearch 상세형) */
  .sd-head { display: flex; align-items: center; gap: 14px; padding: 4px 2px 16px; border-bottom: 0.5px solid var(--ios-separator); margin-bottom: 12px; }
  .sd-photo { width: 84px; height: 104px; border-radius: 6px; object-fit: cover; border: 1px solid var(--ios-separator); background: var(--ios-blue); color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 600; font-size: 32px; flex-shrink: 0; }
  .sd-namebox { min-width: 0; }
  .sd-name { font-size: 18px; margin-bottom: 4px; }
  .sd-name .pn-rank, .sd-name span { font-weight: 400; color: var(--ios-text-secondary); font-size: 14px; }
  .sd-sub { font-size: 12px; color: var(--ios-text-secondary); line-height: 1.5; }
  .sd-info { width: 100%; border-collapse: collapse; font-size: 14px; }
  .sd-info th { text-align: left; width: 84px; color: var(--ios-text-tertiary); font-weight: 500; padding: 8px 6px; vertical-align: top; white-space: nowrap; }
  .sd-info td { padding: 8px 6px; word-break: break-all; border-bottom: 0.5px solid var(--ios-separator-thin); }

  @media (max-width: 767px) {
    .staff-finder-content { grid-template-columns: 1fr; }
    .staff-finder-tree { max-height: 140px; border-right: none; border-bottom: 0.5px solid var(--ios-separator-thin); }
    .staff-list-top { flex-direction: column; align-items: stretch; gap: 8px; padding: 8px 12px; }
    .staff-search input { flex: 1; width: auto; }
    /* 좁은 화면: 고정폭 대신 자동 레이아웃 + 한 줄 표시 → 표가 넘치면 가로 스크롤(틀어짐 방지) */
    .staff-table { table-layout: auto; font-size: 12px; }
    .staff-table thead th, .staff-table tbody td { padding: 6px 8px; white-space: nowrap; }
    .staff-cell-rank { white-space: normal; }   /* 직급/직책 2줄은 유지 */
  }

  /* ============== 퇴사 직원 모달 ============== */
  .retired-staff-body {
    padding: 0;
    max-height: calc(90vh - 80px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    background: white;
  }
  .retired-top {
    padding: 8px 14px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--ios-separator);
  }
  .retired-table-wrap {
    flex: 1;
    overflow-y: auto;
    overflow-x: auto;
  }
  .retired-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
  }
  .retired-table thead {
    position: sticky;
    top: 0;
    background: var(--ios-bg);
    z-index: 1;
  }
  .retired-table thead th {
    padding: 8px 10px;
    text-align: center;
    font-weight: 600;
    color: var(--ios-text);
    border-bottom: 1px solid var(--ios-separator);
    white-space: nowrap;
  }
  .retired-table tbody tr {
    border-bottom: 0.5px solid var(--ios-separator-thin);
    transition: background 0.1s;
  }
  .retired-table tbody tr:hover { background: rgba(0,122,255,0.04); }
  .retired-table tbody td {
    padding: 7px 10px;
    text-align: center;
    color: var(--ios-text);
    white-space: nowrap;
    vertical-align: middle;
  }
  .retired-cell-name { min-width: 64px; }
  .retired-cell-dept { min-width: 120px; }
  .retired-cell-num { min-width: 110px; font-variant-numeric: tabular-nums; }
  .retired-cell-date { min-width: 96px; font-variant-numeric: tabular-nums; }

  /* 퇴직자 - 빈 상태 */
  .retired-empty {
    padding: 60px 40px;
    text-align: center;
    color: var(--ios-text-secondary);
  }
  .retired-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.5;
  }
  .retired-empty-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--ios-text);
    margin-bottom: 6px;
  }
  .retired-empty-sub {
    font-size: 13px;
    color: var(--ios-text-tertiary);
  }

  @media (max-width: 767px) {
    .retired-table { font-size: 12px; }
    .retired-table thead th, .retired-table tbody td { padding: 10px 6px; }
    .retired-empty { padding: 40px 20px; }
  }

  /* ============== 개인정보 모달 ============== */
  /* modal-large 공유 고정높이(82vh, 근무현황용) 해제 → 내용만큼만 */
  #myProfileModal .modal-large,
  #editProfileModal .modal-large {
    height: auto;
    max-height: 90vh;
  }
  .profile-modal-body {
    padding: 10px 18px;
    max-height: calc(90vh - 160px);
    overflow-y: auto;
    display: grid;
    grid-template-columns: 168px 1fr;
    gap: 16px;
    align-items: start;
  }
  .profile-photo-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 8px 10px;
    background: var(--ios-card);
    border: 0.5px solid var(--ios-separator);
    border-radius: 10px;
  }
  .profile-photo-area img {
    width: 104px; height: 130px;
    border-radius: 6px;
    object-fit: cover;
    border: 1px solid var(--ios-separator);
    background: #fff;
  }
  .profile-name-area {
    text-align: center;
    margin-top: 4px;
  }
  .profile-name-kr {
    font-size: 15px;
    color: var(--ios-text);
    margin-bottom: 2px;
  }
  .profile-name-kr .pn-name {
    font-weight: 700;
  }
  .profile-name-kr .pn-rank {
    font-weight: 400;
    color: var(--ios-text-secondary);
    margin-left: 2px;
  }
  .profile-name-en {
    font-size: 12px;
    color: var(--ios-text-secondary);
    letter-spacing: 0.3px;
    margin-bottom: 1px;
  }
  .profile-name-cn {
    font-size: 13px;
    color: var(--ios-text-secondary);
  }
  .btn-photo-change {
    font-size: 12px;
    color: var(--ios-blue);
    background: rgba(0,122,255,0.1);
    border: none;
    padding: 6px 14px;
    border-radius: 16px;
    cursor: pointer;
    margin-top: 6px;
  }
  .profile-info-grid {
    display: flex;
    flex-direction: column;
    border-top: 0.5px solid var(--ios-separator);
    border-bottom: 0.5px solid var(--ios-separator);
  }
  .pi-row {
    display: grid;
    grid-template-columns: 88px 1fr;
    gap: 12px;
    padding: 4px 4px;
    border-bottom: 0.5px solid var(--ios-separator-thin);
    align-items: center;
    font-size: 13px;
  }
  .pi-row:last-child { border-bottom: none; }
  .pi-row label { font-weight: 700; color: var(--ios-text); }
  .pi-row span { color: var(--ios-text); }
  .pi-noti-toggle { display: flex; gap: 12px; flex-wrap: wrap; }
  .pi-noti-toggle .switch {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 12px;
    color: var(--ios-text);
    cursor: pointer;
  }
  /* 알림수신 표시 (읽기 전용) */
  .pi-noti-display {
    color: var(--ios-text);
  }
  /* 개인정보 변경 - 알림수신 라디오 */
  .ep-noti-radio {
    display: flex;
    gap: 20px;
    align-items: center;
  }
  .ep-noti-radio .radio-item {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    color: var(--ios-text);
    cursor: pointer;
  }
  .ep-noti-radio input[type="radio"] {
    accent-color: var(--ios-blue);
    cursor: pointer;
  }
  /* 개인정보 변경 모달 - 공통 input 스타일 */
  .ep-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--ios-separator);
    border-radius: 10px;
    font-size: 14px;
    box-sizing: border-box;
    font-family: inherit;
    color: var(--ios-text);
    background: white;
  }
  .ep-input:focus {
    outline: none;
    border-color: var(--ios-blue);
  }
  .ep-input[type="date"] {
    color: var(--ios-text);
  }
  /* 변경 모달 - 인라인 input (조회 화면과 같은 1행 레이아웃) */
  .ep-input-inline {
    flex: 1;
    padding: 6px 10px;
    border: 1px solid var(--ios-separator);
    border-radius: 8px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ios-text);
    background: white;
    box-sizing: border-box;
    min-width: 0;
  }
  .ep-input-inline:focus {
    outline: none;
    border-color: var(--ios-blue);
  }
  .ep-input-inline[type="date"] {
    color: var(--ios-text);
    max-width: 180px;
  }
  /* 읽기 전용 행 - 직급/부서/입사일 */
  .pi-row-readonly span {
    color: var(--ios-text-secondary);
    background: var(--ios-bg);
    padding: 6px 10px;
    border-radius: 8px;
    flex: 1;
  }
  /* 이름 영역 인라인 input */
  .ep-inline-input {
    border: 1px solid var(--ios-separator);
    border-radius: 6px;
    padding: 4px 8px;
    font-size: 15px;
    font-weight: 600;
    color: var(--ios-text);
    font-family: inherit;
    background: white;
    width: 100%;
    box-sizing: border-box;
  }
  .ep-inline-input:focus {
    outline: none;
    border-color: var(--ios-blue);
  }
  .ep-inline-sub {
    font-size: 12px;
    font-weight: 400;
    color: var(--ios-text-secondary);
    margin-top: 4px;
  }
  .profile-modal-footer {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: flex-end;
  }
  .btn-secondary {
    padding: 9px 14px;
    border-radius: 8px;
    border: 1px solid var(--ios-separator);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    background: var(--ios-bg);
    color: var(--ios-text);
  }

  /* ============== 사원관리 — 신규등록/정보수정 모달 (개인정보 변경 모달 스타일 재사용) ============== */
  #staffNewModal .modal-large,
  #staffEditModal .modal-large { height: auto; max-height: 90vh; }
  #staffEditModal .modal-body {
    max-height: calc(90vh - 120px);
    overflow-y: auto;
  }
  #staffEditModal .profile-modal-body {
    max-height: none;
    overflow: visible;
    padding-bottom: 4px;
  }
  .staff-edit-extra { padding: 4px 18px 18px; }
  .staff-edit-section {
    border-top: 0.5px solid var(--ios-separator);
    padding-top: 14px;
    margin-top: 14px;
  }
  .staff-edit-section h4 {
    margin: 0 0 10px;
    font-size: 13px;
    font-weight: 700;
    color: var(--ios-text);
  }
  .staff-edit-inline-form {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: flex-end;
  }
  .staff-edit-field { display: flex; flex-direction: column; gap: 4px; }
  .staff-edit-field label { font-size: 12px; color: var(--ios-text-secondary); }
  .staff-edit-field .ep-input-inline { width: auto; }
  .pi-row-actions {
    display: flex;
    justify-content: flex-end;
    padding: 10px 4px 0;
  }

  /* ============== 관리 페이지 공통 ============== */
  .admin-page {
    background: var(--ios-card);
    border-radius: 14px;
    padding: 20px;
    margin-bottom: 16px;
  }
  .admin-page h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--ios-text);
    margin-bottom: 8px;
  }
  .admin-page-desc {
    font-size: 13px;
    color: var(--ios-text-secondary);
    margin-bottom: 16px;
  }
  .admin-toolbar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }
  .admin-toolbar input[type="text"] {
    flex: 1;
    min-width: 180px;
    padding: 8px 12px;
    border: 1px solid var(--ios-separator);
    border-radius: 8px;
    font-size: 13px;
    background: var(--ios-bg);
    box-sizing: border-box;
  }
  .admin-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 13px;
  }
  .admin-table th {
    background: var(--ios-bg);
    color: var(--ios-text-secondary);
    font-weight: 700;
    font-size: 11px;
    text-transform: uppercase;
    padding: 10px 12px;
    text-align: left;
    border-bottom: 0.5px solid var(--ios-separator);
  }
  .admin-table td {
    padding: 10px 12px;
    border-bottom: 0.5px solid var(--ios-separator-thin);
    color: var(--ios-text);
  }
  .admin-table .btn-mini {
    padding: 4px 10px;
    font-size: 11px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    margin-right: 4px;
  }
  .admin-table .btn-mini.edit { background: rgba(0,122,255,0.1); color: var(--ios-blue); }
  .admin-table .btn-mini.del { background: rgba(255,59,48,0.1); color: var(--ios-red); }
  .admin-table .btn-mini.set { background: rgba(52,199,89,0.12); color: #1e8a3a; }

  .org-tree-view {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
  }
  .org-tree-panel {
    border: 1px solid var(--ios-separator);
    border-radius: 10px;
    padding: 12px;
    background: var(--ios-bg);
    min-height: 300px;
  }
  .org-tree-panel-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ios-text-secondary);
    margin-bottom: 8px;
    padding-bottom: 6px;
    border-bottom: 0.5px solid var(--ios-separator);
  }
  .org-tree-item {
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
  }
  .org-tree-item:hover { background: rgba(0,122,255,0.08); }
  .org-tree-item .toggle { width: 14px; color: var(--ios-text-tertiary); font-size: 11px; }
  .org-children { padding-left: 18px; }
  @media (max-width: 767px) {
    .org-tree-view { grid-template-columns: 1fr; }
  }

  /* ============== 빠른 글쓰기 모달 ============== */
  .quick-write-body {
    max-height: calc(85vh - 130px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .quick-write-body .form-row {
    margin-bottom: 16px;
  }

  .quick-write-body input[type="text"],
  .quick-write-body textarea {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--ios-separator);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ios-text);
    background: var(--ios-card);
    box-sizing: border-box;
  }

  .quick-write-body textarea {
    resize: vertical;
    min-height: 200px;
    line-height: 1.6;
  }

  .quick-write-body input:focus,
  .quick-write-body textarea:focus {
    outline: none;
    border-color: var(--ios-blue);
  }

  .quick-write-body label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--ios-text-secondary);
    margin-bottom: 6px;
  }

  .quick-write-body label .req {
    color: var(--ios-red);
  }

  /* ============== 업무 상세 모달 ============== */
  .task-detail-meta {
    display: grid;
    gap: 10px;
    padding: 12px 16px;
    background: var(--ios-bg);
    border-radius: 10px;
    margin-bottom: 18px;
  }

  .task-detail-row {
    display: flex;
    gap: 12px;
    font-size: 14px;
    align-items: center;
  }

  .task-detail-label {
    flex-shrink: 0;
    width: 70px;
    font-weight: 600;
    color: var(--ios-text-secondary);
    font-size: 13px;
  }

  .task-detail-section {
    margin-top: 18px;
  }

  .task-detail-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--ios-text);
    margin-bottom: 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--ios-separator-thin);
  }

  .task-detail-fields {
    display: grid;
    gap: 8px;
  }

  .task-field-row {
    display: flex;
    gap: 12px;
    font-size: 14px;
    padding: 6px 0;
  }

  .task-field-row .task-detail-label {
    width: 90px;
  }

  .task-field-row .task-field-value {
    flex: 1;
    color: var(--ios-text);
    word-break: break-word;
  }

  .task-detail-content {
    font-size: 14px;
    line-height: 1.7;
    color: var(--ios-text);
    padding: 12px 14px;
    background: var(--ios-bg);
    border-radius: 8px;
    min-height: 60px;
    word-break: break-word;
  }

  .task-detail-content img {
    max-width: 100%;
    height: auto;
    border-radius: 6px;
  }

  .task-detail-approval {
    padding: 8px;
    background: var(--ios-bg);
    border-radius: 8px;
    overflow-x: auto;
  }

  .task-status-large {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 13px;
    font-weight: 600;
  }
  .task-status-large.s-pending { background: rgba(0, 122, 255, 0.12); color: var(--ios-blue); }
  .task-status-large.s-progress { background: rgba(255, 149, 0, 0.12); color: var(--ios-orange); }
  .task-status-large.s-approved { background: rgba(52, 199, 89, 0.12); color: var(--ios-green); }
  .task-status-large.s-rejected { background: rgba(255, 59, 48, 0.12); color: var(--ios-red); }
  .task-status-large.s-draft { background: var(--ios-fill); color: var(--ios-text-secondary); }

  /* ============== 공지사항 상세 모달 ============== */
  /* 모달 자체의 스크롤 비활성화 (내부 notice-detail-scroll만 스크롤) */
  #noticeModal .modal {
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .notice-modal-body {
    padding: 0;
    flex: 1;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
  }

  .notice-detail-header {
    padding: 20px 22px 16px;
    border-bottom: 0.5px solid var(--ios-separator-thin);
    flex-shrink: 0;
  }

  /* 본문/첨부/댓글만 스크롤되는 영역 */
  .notice-detail-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
  }

  .detail-meta-top {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
  }

  .badge-pinned {
    display: inline-block;
    padding: 2px 7px;
    background: var(--ios-red);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    flex-shrink: 0;
  }

  .detail-title {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.3px;
    line-height: 1.4;
    color: var(--ios-text);
  }

  .detail-meta {
    font-size: 13px;
    color: var(--ios-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
  }

  .detail-meta b { color: var(--ios-text); font-weight: 600; }
  .meta-sep { color: var(--ios-text-tertiary); }

  .detail-content {
    padding: 20px 22px;
    font-size: 15px;
    line-height: 1.7;
    color: var(--ios-text);
    min-height: 150px;
    max-width: 100%;
    overflow-wrap: break-word;
    word-break: break-word;
  }

  .detail-content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 8px 0;
  }

  .detail-content a {
    color: var(--ios-blue);
    text-decoration: underline;
  }

  .detail-attachments {
    margin: 0 22px 20px;
    padding: 14px;
    background: var(--ios-bg);
    border-radius: 12px;
  }

  .attachments-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--ios-text);
    margin-bottom: 10px;
  }

  .attachments-title svg { width: 14px; height: 14px; color: var(--ios-blue); }
  .attachments-title b { color: var(--ios-blue); }

  .attachment-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .attachment-list li {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 12px;
    background: var(--ios-card);
    border-radius: 8px;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s;
  }

  .attachment-list li:hover { background: rgba(0, 122, 255, 0.05); }

  .attachment-list .file-icon {
    font-size: 18px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
  }

  .attachment-list .file-name {
    flex: 1;
    color: var(--ios-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .attachment-list .file-size {
    color: var(--ios-text-secondary);
    font-size: 12px;
    flex-shrink: 0;
  }

  .attachment-list .file-download {
    color: var(--ios-blue);
    font-size: 16px;
    flex-shrink: 0;
  }

  /* ============== 댓글 영역 ============== */
  .comments-section {
    margin: 0 22px 20px;
    padding-top: 16px;
    border-top: 1px solid var(--ios-separator-thin);
  }

  .comments-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: var(--ios-text);
    margin-bottom: 14px;
  }

  .comments-header svg { width: 16px; height: 16px; color: var(--ios-blue); }
  .comments-header b { color: var(--ios-blue); }

  .comment-form {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
  }

  .comment-form textarea {
    flex: 1;
    padding: 10px 12px;
    border: 1px solid var(--ios-separator);
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
    color: var(--ios-text);
    background: var(--ios-card);
    resize: vertical;
    min-height: 40px;
    max-height: 120px;
    -webkit-appearance: none;
    line-height: 1.5;
    transition: border-color 0.15s;
  }

  .comment-form textarea:focus {
    outline: none;
    border-color: var(--ios-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
  }

  .comment-form .btn-primary {
    align-self: flex-end;
    flex-shrink: 0;
    background: var(--ios-blue);
    color: white;
    border: none;
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
  }

  .comment-form .btn-primary:hover { opacity: 0.85; }

  .comment-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }

  .comment-item {
    padding: 12px 0;
    border-bottom: 0.5px solid var(--ios-separator-thin);
  }

  .comment-item:last-child { border-bottom: none; }

  .comment-item.is-reply {
    margin-left: 32px;
    padding-left: 12px;
    border-left: 2px solid var(--ios-separator-thin);
  }

  .comment-head {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    font-size: 13px;
  }

  .comment-author { font-weight: 600; color: var(--ios-text); }
  .comment-time { color: var(--ios-text-secondary); font-size: 12px; }
  .comment-edited { color: var(--ios-text-tertiary); font-size: 11px; }

  .comment-actions {
    margin-left: auto;
    display: flex;
    gap: 4px;
  }

  .comment-action-btn {
    background: transparent;
    border: none;
    color: var(--ios-text-secondary);
    font-size: 12px;
    padding: 2px 6px;
    border-radius: 4px;
    cursor: pointer;
    font-family: inherit;
    transition: background 0.15s, color 0.15s;
  }

  .comment-action-btn:hover {
    background: var(--ios-bg);
    color: var(--ios-blue);
  }

  .comment-action-btn.del:hover { color: var(--ios-red); }

  .comment-body {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ios-text);
    white-space: pre-wrap;
    word-break: break-word;
  }

  .comment-edit-form {
    margin-top: 6px;
    display: flex;
    gap: 6px;
    flex-direction: column;
  }

  .comment-edit-form textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--ios-separator);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    color: var(--ios-text);
    background: var(--ios-card);
    resize: vertical;
    min-height: 60px;
    -webkit-appearance: none;
    line-height: 1.5;
  }

  .comment-edit-form textarea:focus {
    outline: none;
    border-color: var(--ios-blue);
  }

  .comment-edit-actions {
    display: flex;
    gap: 6px;
    justify-content: flex-end;
  }

  .comment-edit-actions button {
    padding: 5px 10px;
    border-radius: 6px;
    font-size: 12px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    font-family: inherit;
  }

  .comment-edit-actions .save-btn { background: var(--ios-blue); color: white; }
  .comment-edit-actions .cancel-btn { background: var(--ios-fill); color: var(--ios-text); }

  .reply-form {
    margin-top: 8px;
    display: flex;
    gap: 6px;
  }

  .reply-form textarea {
    flex: 1;
    padding: 8px 10px;
    border: 1px solid var(--ios-separator);
    border-radius: 8px;
    font-size: 13px;
    font-family: inherit;
    background: var(--ios-card);
    color: var(--ios-text);
    resize: vertical;
    min-height: 36px;
    max-height: 100px;
    -webkit-appearance: none;
    line-height: 1.5;
  }

  .reply-form textarea:focus { outline: none; border-color: var(--ios-blue); }

  .reply-form button {
    align-self: flex-end;
    padding: 7px 12px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    border: none;
    cursor: pointer;
    font-family: inherit;
    background: var(--ios-blue);
    color: white;
    flex-shrink: 0;
  }

  .comments-empty {
    padding: 30px 10px;
    text-align: center;
    color: var(--ios-text-secondary);
    font-size: 13px;
  }

  /* 본문 - 인용/코드/표 (모달에서도 동일하게 보이도록) */
  .detail-content blockquote {
    margin: 12px 0;
    padding: 10px 16px;
    border-left: 4px solid var(--ios-blue);
    background: var(--ios-bg);
    color: var(--ios-text-secondary);
    border-radius: 0 8px 8px 0;
    font-style: italic;
  }

  .detail-content pre {
    margin: 12px 0;
    padding: 14px 16px;
    background: #1C1C1E;
    color: #F2F2F7;
    border-radius: 10px;
    overflow-x: auto;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 13px;
    line-height: 1.5;
  }

  .detail-content code {
    background: var(--ios-bg);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 0.9em;
    color: var(--ios-red);
  }

  .detail-content pre code { background: transparent; padding: 0; color: inherit; }

  .detail-content table {
    border-collapse: collapse;
    margin: 12px 0;
    width: 100%;
    /* 넓은 표는 모달을 넘치지 않고 표 안에서만 가로 스크롤 */
    display: block;
    max-width: 100%;
    overflow-x: auto;
  }

  .detail-content table td,
  .detail-content table th {
    border: 1px solid var(--ios-separator);
    padding: 8px 12px;
    font-size: 14px;
  }

  .detail-content table th {
    background: var(--ios-bg);
    font-weight: 600;
    text-align: left;
  }

  .detail-content hr {
    border: none;
    border-top: 1px solid var(--ios-separator);
    margin: 20px 0;
  }


  /* 탭 옆 NEW 카운트 */
  .tab-new-count {
    display: inline-block;
    margin-left: 4px;
    padding: 1px 6px;
    background: var(--ios-red);
    color: white;
    font-size: 10px;
    font-weight: 700;
    border-radius: 10px;
    vertical-align: middle;
    line-height: 1.4;
    min-width: 16px;
    text-align: center;
  }

  .post-author {
    color: var(--ios-text-secondary);
    font-size: 12px;
    min-width: 50px;
    text-align: right;
  }

  .post-date {
    color: var(--ios-text-tertiary);
    font-size: 12px;
    min-width: 80px;
    text-align: right;
  }

  /* ============================================
     우측 영역 - 달력
  ============================================ */
  .right {
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: sticky;
    top: 120px;
    align-self: start;
    /* 높이 제약 제거 — 일정 목록이 길면 내부 스크롤 대신 페이지가 아래로 늘어남 */
    min-width: 0;
  }

  .event-card { max-width: 100%; min-width: 0; overflow: hidden; }
  .calendar-card { padding: 16px 14px; max-width: 100%; min-width: 0; overflow: hidden; }

  .cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
    gap: 6px;
  }

  .cal-header-left {
    display: flex;
    align-items: center;
    gap: 4px;
  }

  .cal-header-right {
    display: flex;
    align-items: center;
    gap: 6px;
  }

  .cal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--ios-text);
    min-width: 100px;
    text-align: center;
    letter-spacing: -0.2px;
  }

  .cal-nav {
    background: none;
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 18px;
    cursor: pointer;
    color: var(--ios-blue);
    transition: background 0.15s;
  }

  .cal-nav:hover { background: rgba(0, 122, 255, 0.1); }

  .btn-today {
    background: var(--ios-fill);
    border: none;
    color: var(--ios-text);
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
  }

  .btn-today:hover { background: var(--ios-text-tertiary); }

  /* 달력 새로고침 · 일정관리 진입 — 오늘 버튼과 톤 통일(원형 아이콘). 회전은 .ico.spin(로더 CSS). */
  .btn-cal-refresh, .btn-cal-full {
    background: var(--ios-fill);
    border: none;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    color: var(--ios-blue);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
  }
  .btn-cal-refresh:hover, .btn-cal-full:hover { background: rgba(0, 122, 255, 0.12); }

  .btn-add-event {
    background: var(--ios-blue);
    color: white;
    border: none;
    padding: 5px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: opacity 0.15s;
  }

  .btn-add-event:hover { opacity: 0.85; }
  .btn-add-event:active { opacity: 0.7; }

  /* 요일 헤더 = 격자의 첫 행. 날짜 격자와 하나의 표로 이어지도록 세로선/가로선을 공유한다
     (사용자 지시 2026-07-21 — 요일까지 선이 합쳐진 표 느낌). 컨테이너=위/왼쪽 선 + 위 둥근 모서리,
     각 요일 셀=오른쪽/아래 선 → 아래 .cal-days 와 세로선이 정확히 이어짐. */
  /* 요일 헤더 = 격자의 첫 행. 외곽선(위·좌·우)은 컨테이너가 담당하고 둥근 모서리를 따라간다 →
     외곽 셀에는 외곽선을 두지 않아 둥근 모서리에서 선이 잘려 보이지 않는다(사용자 지시 2026-07-21).
     내부 구분선만 각 셀의 오른쪽/아래 선이 담당. 아래 .cal-days 와 세로선이 정확히 이어짐. */
  .cal-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    text-align: center;
    font-size: 11px;
    font-weight: 600;
    color: var(--ios-text-secondary);
    border-top: 1px solid var(--ios-separator-thin);
    border-left: 1px solid var(--ios-separator-thin);
    border-right: 1px solid var(--ios-separator-thin);
    border-radius: 10px 10px 0 0;
    overflow: hidden;
  }

  .cal-weekdays span {
    padding: 7px 0;
    border-right: 1px solid var(--ios-separator-thin);
    border-bottom: 1px solid var(--ios-separator-thin);
  }
  .cal-weekdays span:nth-child(7) { border-right: none; }   /* 우측 외곽 = 컨테이너 */

  .cal-weekdays .sun { color: var(--ios-red); }
  .cal-weekdays .sat { color: var(--ios-blue); }

  /* 날짜 격자 = 평평한 1px 격자. 위 선은 요일 헤더가 담당(중복 방지), 좌·우·아래 외곽선 + 아래 둥근
     모서리는 컨테이너가 담당 → 마지막 열/행 셀은 외곽선 제거로 둥근 모서리에서 선 잘림 없음. */
  .cal-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 0;
    border-left: 1px solid var(--ios-separator-thin);
    border-right: 1px solid var(--ios-separator-thin);
    border-bottom: 1px solid var(--ios-separator-thin);
    border-radius: 0 0 10px 10px;
    overflow: hidden;
  }

  .cal-day {
    aspect-ratio: 1;      /* 날짜 셀 정사각형(너비=높이) */
    min-height: 64px;     /* 좁은 화면에서의 최소 높이 바닥 */
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--ios-separator-thin);
    border-bottom: 1px solid var(--ios-separator-thin);
    cursor: pointer;
    transition: background 0.15s;
    color: var(--ios-text);
    padding: 4px;
    overflow: hidden;
  }
  .cal-day:nth-child(7n) { border-right: none; }           /* 마지막 열 외곽 = 컨테이너 */
  .cal-day:nth-last-child(-n+7) { border-bottom: none; }   /* 마지막 행 외곽 = 컨테이너 */

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

  .cal-day-num {
    font-size: 12px;
    font-weight: 500;
    margin-bottom: 2px;
    align-self: flex-start;
  }

  .cal-day.other-month { cursor: default; }
  .cal-day.other-month .cal-day-num { color: var(--ios-text-tertiary); }
  .cal-day.other-month:hover { background: transparent; }

  .cal-day.sun .cal-day-num { color: var(--ios-red); }
  .cal-day.sat .cal-day-num { color: var(--ios-blue); }
  .cal-day.holiday .cal-day-num { color: var(--ios-red); font-weight: 600; }

  .cal-day.today .cal-day-num {
    background: var(--ios-red-soft);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 600;
  }

  .cal-day.selected {
    background: rgba(0, 122, 255, 0.15);
  }

  /* 일정 칩 */
  /* 일정 = 카테고리 색 점(dot). 정사각형 셀에서 말줄임 없이 표시하고, 전체 내용은
     날짜 클릭 시 하단 상세 패널에서 확인(사용자 지시 2026-07-21). 점 색 = evt-* 의 color(currentColor). */
  .day-events {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    gap: 3px;
    overflow: hidden;
    flex: 1;
    padding-top: 2px;
  }

  .day-event {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: currentColor;   /* evt-* 의 color(카테고리 색) 사용 */
    cursor: pointer;
    flex: 0 0 auto;
  }

  .day-event:hover { opacity: 0.6; }

  /* 카테고리 색 = 범례 dot·일정 목록과 동일한 iOS 팔레트 */
  .day-event.evt-all      { color: #007aff; }
  .day-event.evt-personal { color: #30b0c7; }
  .day-event.evt-vacation { color: #34c759; }
  .day-event.evt-business { color: #af52de; }
  .day-event.evt-birthday { color: #ff9500; }
  .day-event.evt-event    { color: #5856d6; }
  .day-event.evt-approval { color: #8e8e93; }   /* 결재중 = 회색 */
  .day-event.evt-holiday  { color: #ff3b30; }   /* 공휴일 = 빨강 */
  .day-event.evt-dayoff   { color: #ff2d55; }   /* 휴무 = 핑크(결재중과 구분) */

  .day-event-more {
    font-size: 9px;
    color: var(--ios-text-secondary, #6e6e73);
    line-height: 7px;
    font-weight: 700;
    cursor: pointer;
    flex: 0 0 auto;
  }

  /* 범례 */
  .cal-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 12px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 0.5px solid var(--ios-separator-thin);
    font-size: 11px;
    color: var(--ios-text-secondary);
    justify-content: center;
  }

  .cal-legend span,
  .cal-legend .cl-item {
    display: flex;
    align-items: center;
    gap: 5px;
  }

  /* 범례 = 표시 필터. 끈 항목은 흐리게 + 취소선 — 자리를 안 먹으면서 상태가 한눈에 보인다.
     ⚠️ 필터가 생기면 사람마다 화면이 달라진다. 그래서 "지금 무엇이 꺼져 있는지" 를 접어 숨기지 않고
        범례 그 자리에 그대로 드러낸다. */
  .cal-legend .cl-item {
    background: none;
    border: 0;
    padding: 0;
    margin: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
    transition: opacity 0.12s;
  }
  .cal-legend .cl-item.off { opacity: 0.35; text-decoration: line-through; }
  .cal-legend .cl-item:hover { opacity: 0.75; }

  /* 표시 프리셋 — 달력 격자 바로 위. 헤더 줄은 이미 버튼 5개로 꽉 차 있다. */
  .cal-legend-quick {
    display: flex;
    gap: 4px;
    flex: 0 0 auto;
    justify-content: flex-end;
    margin: 2px 0 6px;
  }
  .cal-legend-quick .clq {
    font-size: 10px;
    line-height: 1;
    padding: 3px 7px;
    border-radius: 999px;
    border: 0.5px solid var(--ios-separator);
    background: var(--ios-bg-secondary, #f2f2f7);
    color: var(--ios-text-secondary);
    cursor: pointer;
  }
  .cal-legend-quick .clq:hover { color: var(--ios-text); }
  .cal-legend-quick .clq.on {
    background: var(--ios-blue);
    border-color: var(--ios-blue);
    color: #fff;
    font-weight: 600;
  }

  .cal-legend .dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
  }

  .dot-all { background: var(--ios-blue); }
  .dot-personal { background: #30b0c7; }
  .dot-vacation { background: #4faa8e; }   /* 휴가 = 민트틸(차분·클린) */
  .dot-business { background: #6f8bc4; }   /* 출장 = 소프트 블루(차분·클린) */
  .dot-birthday { background: #c99a5c; }   /* 생일 = 차분한 앰버 */
  .dot-event { background: #9b6fbf; }      /* 행사·경조사 = 차분한 퍼플 */
  /* 일정 상세 모달의 종류 배지 — 범례와 같은 .dot-* 색을 그대로 재사용(색 정의를 늘리지 않음) */
  .evt-kind { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ios-text-secondary); }
  .evt-kind .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
  /* .detail-content 의 여백·최소높이는 게시판 큰 화면 기준이라 일정 모달에선 과하다 */
  #eventDetailModal .detail-content {
    padding: 14px 0 0;
    min-height: 40px;
    margin-top: 12px;
    border-top: 0.5px solid var(--ios-separator-thin);
  }

  .dot-meeting { background: #96477f; }    /* 회의 = 자홍 */
  .dot-education { background: #b8860b; }  /* 교육 = 골드 */
  .dot-approval { background: var(--ios-text-tertiary); }
  .dot-meetingext { background: #5d2b4a; } /* 외부회의 = 짙은 플럼(내부회의 자홍과 같은 계열, 점끼리 ΔE2000 14.7 — 기준선 10.1) */
  .dot-holiday { background: #c47a72; }    /* 공휴일 = 차분한 더스티 레드 */
  .dot-dayoff { background: #c07a90; }     /* 휴무 = 차분한 더스티 로즈 */

  /* ============================================
     FullCalendar v6 위젯 테마 (우측 달력 — iOS 톤)
  ============================================ */
  .cal-view {
    --fc-border-color: var(--ios-separator-thin);
    --fc-today-bg-color: rgba(255, 59, 48, 0.06);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: transparent;
    --fc-small-font-size: 10px;
    font-size: 11px;
    color: var(--ios-text);
  }
  /* 외곽선은 scrollgrid(둥근 모서리) 자체가 담당 → 마지막 셀 외곽선이 모서리에서 잘려
     우측/하단 선이 안 보이던 문제 해결. 내부 구분선만 셀이 담당. */
  .cal-view .fc-scrollgrid { border: 1px solid var(--ios-separator-thin); border-radius: 10px; overflow: hidden; }
  .cal-view table { border-color: var(--ios-separator-thin); }
  .cal-view .fc-scrollgrid td:last-child, .cal-view .fc-scrollgrid th:last-child { border-right: 0; }
  .cal-view .fc-scrollgrid-section:last-child > td { border-bottom: 0; }
  .cal-view .fc-scrollgrid-section-header > * { border-bottom-width: 1px; }

  /* 요일 헤더 */
  .cal-view .fc-col-header-cell { padding: 6px 0; background: transparent; }
  .cal-view .fc-col-header-cell-cushion {
    font-size: 11px; font-weight: 600; color: var(--ios-text-secondary); text-decoration: none; padding: 2px;
  }
  .cal-view .fc-day-sun .fc-col-header-cell-cushion { color: var(--ios-red); }
  .cal-view .fc-day-sat .fc-col-header-cell-cushion { color: var(--ios-blue); }

  /* 날짜 숫자 */
  .cal-view .fc-daygrid-day-frame { min-height: 92px; padding: 1px; }
  .cal-view .fc-daygrid-day-number { font-size: 11px; font-weight: 500; color: var(--ios-text); padding: 4px 6px 2px; text-decoration: none; }
  .cal-view .fc-day-sun .fc-daygrid-day-number { color: var(--ios-red); }
  .cal-view .fc-day-sat .fc-daygrid-day-number { color: var(--ios-blue); }
  .cal-view .fc-day-holiday .fc-daygrid-day-number { color: var(--ios-red); font-weight: 700; }
  .cal-view .fc-day-other .fc-daygrid-day-number { color: var(--ios-text-tertiary); }
  .cal-view .fc-day-selected { background: rgba(0, 122, 255, 0.10); }
  /* 오늘 숫자 = 빨간 원 강조 */
  .cal-view .fc-day-today { background: transparent; }
  .cal-view .fc-day-today .fc-daygrid-day-number {
    background: var(--ios-red, #ff3b30); color: #fff; border-radius: 50%;
    width: 20px; height: 20px; padding: 0; margin: 3px 4px 0; display: inline-flex;
    align-items: center; justify-content: center; font-size: 11px; font-weight: 600;
  }

  /* 이벤트 바 (옅은 배경 + 진한 글씨, iOS 톤). 제목을 줄바꿈해 잘림 없이 전부 표시(사용자 지시). */
  /* 좌측 색막대 — 배경 틴트(16%)는 흰색에 너무 가까워 9종을 가르지 못한다(칩 배경끼리 ΔE 3~4).
     불투명한 얇은 막대가 실질 구분자 역할을 한다. 색은 아래 fc-evt-* 의 `--bar`.
     ⚠️ border 가 아니라 inset box-shadow 인 이유 = 레이아웃이 아니라 페인트라 **자리를 안 차지한다**
     (좌측 점유가 막대 없던 원래와 같은 4px — 그래서 폭을 키워도 글자 공간을 안 뺏는다).
     소수점 폭도 살아나지만 1x 화면에선 반픽셀이 흐리게 번져 보여 정수로 둔다
     (1.5px 은 1x 에서 '1픽셀 + 흐린 반픽셀'로 그려짐 — 실측). */
  .cal-view .fc-daygrid-event { border: none; border-radius: 4px; margin: 1px 2px; padding: 1px 4px; box-shadow: inset 2px 0 0 0 var(--bar, transparent); font-size: 10px; font-weight: 500; white-space: normal; cursor: pointer; }
  /* 폭 2px + 채도 70%(사용자 선택). 채도를 낮추면 막대 최소 색차가 ΔE 20.3 → 14.7 로 줄지만,
     막대 없이 배경 틴트만일 때의 2.6 보다는 여전히 훨씬 크다.
     ⚠️ 폭과 채도는 서로 보상 관계라 둘을 같이 줄이면 신호가 빠르게 약해진다 — 더 좁히려면 채도를 올릴 것.
     ⚠️ 위 줄의 원색 box-shadow 는 color-mix 미지원 브라우저용 폴백이다. 이 줄이 무효가 되면
        막대가 통째로 사라지므로 반드시 둘 다 둔다. */
  .cal-view .fc-daygrid-event { box-shadow: inset 2px 0 0 0 color-mix(in srgb, var(--bar, transparent) 70%, white); }
  .cal-view .fc-daygrid-event:hover { opacity: 0.82; }
  .cal-view .fc-daygrid-event .fc-event-title { font-weight: 500; padding: 0; white-space: normal; overflow: visible; line-height: 1.35; }
  .cal-view .fc-daygrid-event-harness { white-space: normal; }
  .cal-view .fc-daygrid-event .fc-event-time { display: none; }
  .cal-view .fc-h-event .fc-event-main { color: inherit; }
  /* 시간격자(주/일)의 세로 이벤트도 같은 처리가 필요하다 — FullCalendar 의 .fc-v-event 는
     글자색을 흰색(--fc-event-text-color)으로 강제해, 옅은 틴트 배경 위에서 시각·제목이 사실상 안 보인다.
     ⚠️ 월 뷰만 보고 색을 맞추면 이 줄을 빠뜨린다(가로 이벤트는 위 줄이 이미 처리하고 있어서). */
  .cal-view .fc-v-event .fc-event-main { color: inherit; }
  .cal-view .fc-evt-vacation { background: rgba(79, 170, 142, 0.15);  color: #2f8f6e; --bar: #2f8f6e; }  /* 휴가 = 민트틸 */
  .cal-view .fc-evt-business { background: rgba(111, 139, 196, 0.16); color: #4a67a8; --bar: #4a67a8; }  /* 출장 = 소프트 블루 */
  .cal-view .fc-evt-birthday { background: rgba(201, 154, 92, 0.16); color: #8a6a3a; --bar: #8a6a3a; }  /* 생일 = 차분한 앰버(교육 골드와 갈리도록 어둡게 유지) */
  .cal-view .fc-evt-event    { background: rgba(155, 111, 191, 0.16);color: #6f4f96; --bar: #6f4f96; }  /* 행사·경조사 = 차분한 퍼플 */
  .cal-view .fc-evt-meeting  { background: rgba(190, 120, 170, 0.18);color: #96477f; --bar: #96477f; }  /* 내부회의·레거시 회의 = 자홍 */
  .cal-view .fc-evt-education{ background: rgba(200, 160, 70, 0.20); color: #8a6410; --bar: #b8860b; }  /* 교육 = 골드(초록 계열에서 분리) */
  .cal-view .fc-evt-approval { background: rgba(142, 142, 147, 0.18);color: #5e5e63; --bar: #8e8e93; }
  /* 외부회의 = 짙은 플럼. 내부회의(자홍)와 '같은 계열, 다른 명도' 로 묶어 회의임이 먼저 읽히게 했다(사용자 선택).
     🔴 색 비교는 ΔE76 이 아니라 **ΔE2000 으로, 그것도 실제 그려지는 막대색(채도 70% 흰색 혼합)** 으로 잴 것.
        처음 고른 딥시안은 ΔE76 27.0 이라 넉넉해 보였지만 ΔE2000·막대색 기준으로는 휴가와 13.0 이었고,
        둘 다 청록 계열이라 사용자가 "휴가와 비슷하다" 고 지적했다. 플럼은 휴가와 42.2 로 그 문제가 없다.
     ⚠️ 대신 내부회의와는 11.4(기준선 9.9)로 이 팔레트에서 가장 빡빡한 쌍이다 — 둘 중 하나를 바꿀 땐 다시 잴 것.
        칩 제목의 [내부회의]/[외부회의] 접두어가 최종 구분 수단이다. */
  .cal-view .fc-evt-meetingext { background: rgba(120, 60, 100, 0.16); color: #5d2b4a; --bar: #5d2b4a; }
  .cal-view .fc-evt-holiday  { background: rgba(196, 122, 114, 0.16);color: #a35850; --bar: #c0392b; }  /* 공휴일 = 차분한 더스티 레드 */
  .cal-view .fc-evt-dayoff   { background: rgba(192, 122, 144, 0.16);color: #9c5a70; --bar: #c2185b; }  /* 휴무 = 차분한 더스티 로즈 */

  /* +N more 링크 + 넘침 팝오버 */
  .cal-view .fc-daygrid-more-link { font-size: 10px; font-weight: 600; color: var(--ios-blue); text-decoration: none; margin: 0 2px; }
  /* '+N more' 팝오버.
     🔴 배경을 반드시 명시한다 — 위 `.cal-view` 가 `--fc-page-bg-color: transparent` 로 두어(격자가 카드에
        녹아들게 하려고) 그 변수를 쓰는 팝오버까지 투명해진다. 그러면 뒤 격자·일정이 그대로 비쳐
        **"겹쳐 보인다"**. 에러가 아니라 배경만 없는 것이라 원인이 안 보인다.
     🔴 선택자를 `.cal-view` 로 스코프하는 것도 필수 — FullCalendar 번들은 CSS 를 **런타임에 주입**해
        우리 스타일시트보다 뒤에 온다. 같은 특정도(`.fc-popover`)로 쓰면 vendor 가 이겨 규칙이 통째로 죽는다
        (종전 `z-index: 3000` 이 안 먹고 9999 로 남아 있던 것이 그 증거). */
  .cal-view .fc-popover { background: var(--ios-card-bg, #fff); border-radius: 10px; border: 1px solid var(--ios-separator); box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16); }
  .cal-view .fc-popover .fc-popover-body { background: var(--ios-card-bg, #fff); }
  .cal-view .fc-popover .fc-popover-header { background: var(--ios-bg-secondary, #f2f2f7); font-size: 12px; font-weight: 600; padding: 8px 10px; }
  .cal-view .fc-popover .fc-daygrid-event { font-size: 11px; }

  /* 하단 일정 상세 패널 잠시 제거 — 달력에 모든 일정을 다 표시하므로(사용자 지시 2026-07-21).
     되돌리려면 이 한 줄만 삭제. */
  .right .event-card { display: none; }

  /* 일정 카드 */
  .event-card-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--ios-text);
  }

  .event-list-wrap { padding: 8px 12px 12px; }

  .event-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    list-style: none;
  }

  .event-list li {
    padding: 10px 12px;
    border-radius: 10px;
    font-size: 13px;
    color: var(--ios-text);
    background: var(--ios-bg);
    border-left: 3px solid var(--ios-text-tertiary);
    line-height: 1.4;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
    min-width: 0;
    overflow: hidden;
  }

  .event-list li.evt-all { border-left-color: var(--ios-blue); }
  .event-list li.evt-personal { border-left-color: #30b0c7; }
  .event-list li.evt-vacation { border-left-color: var(--ios-green); }
  .event-list li.evt-business { border-left-color: var(--ios-purple); }
  .event-list li.evt-birthday { border-left-color: var(--ios-orange); }
  .event-list li.evt-event { border-left-color: #9b6fbf; }
  .event-list li.evt-meeting { border-left-color: #96477f; }
  .event-list li.evt-education { border-left-color: #b8860b; }
  .event-list li.evt-approval { border-left-color: var(--ios-text-tertiary); }
  .event-list li.evt-holiday { border-left-color: #ff3b30; }
  .event-list li.evt-dayoff { border-left-color: #ff2d55; }

  .event-list .evt-content {
    flex: 1;
    min-width: 0;
    word-break: break-word;
    overflow-wrap: anywhere;
  }

  .event-list .evt-type {
    font-size: 10px;
    font-weight: 700;
    margin-right: 6px;
    padding: 2px 6px;
    border-radius: 4px;
    color: white;
  }

  .evt-all .evt-type { background: var(--ios-blue); }
  .evt-personal .evt-type { background: #30b0c7; }
  .evt-vacation .evt-type { background: var(--ios-green); }
  .evt-business .evt-type { background: var(--ios-purple); }
  .evt-birthday .evt-type { background: var(--ios-orange); }
  .evt-event .evt-type { background: #9b6fbf; }
  .evt-meeting .evt-type { background: #96477f; }
  .evt-education .evt-type { background: #b8860b; }
  .evt-approval .evt-type { background: var(--ios-text-tertiary); }
  .evt-holiday .evt-type { background: #ff3b30; }
  .evt-dayoff .evt-type { background: #ff2d55; }

  .evt-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
  }

  .evt-btn {
    background: none;
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12px;
    color: var(--ios-text-secondary);
    transition: background 0.15s;
  }

  .evt-btn:hover { background: var(--ios-card); color: var(--ios-blue); }
  .evt-btn.del:hover { color: var(--ios-red); }

  .event-list .event-empty {
    background: transparent;
    border-left: none;
    color: var(--ios-text-secondary);
    text-align: center;
    padding: 24px 0;
    font-size: 13px;
    justify-content: center;
  }

  .btn-add-on-date {
    background: rgba(0, 122, 255, 0.1);
    color: var(--ios-blue);
    border: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
  }

  .btn-add-on-date:hover { background: rgba(0, 122, 255, 0.2); }


  /* 자산/도서/정기구매 조회 표 — 내용 한 줄 표시(넘치면 가로 스크롤) */
  .cat-table th, .cat-table td { white-space: nowrap; }
  .cat-table .col-title { max-width: 360px; overflow: hidden; text-overflow: ellipsis; }


  /* ============================================
     통합검색 결과 (헤더 검색창 → #stubPage 인라인 렌더)
  ============================================ */
  /* 카드 배경·여백은 .admin-page 가 준다(관리/통계 화면과 동일) — 여기선 검색 전용 요소만 정의 */
  .search-page-header {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 14px;
  }
  .search-page-header h2 { font-size: 20px; font-weight: 600; margin: 0; }
  .search-page-header .search-query { color: var(--ios-blue); }
  .search-page-header .search-total { font-size: 13px; color: var(--ios-text-secondary); }

  .search-tabs {
    display: flex;
    gap: 4px;
    border-bottom: 0.5px solid var(--ios-separator);
    margin-bottom: 4px;
    overflow-x: auto;
  }
  .search-tab {
    flex: 0 0 auto;
    padding: 9px 14px;
    font-size: 14px;
    color: var(--ios-text-secondary);
    background: transparent;
    border: none;
    border-bottom: 2px solid transparent;
    cursor: pointer;
    white-space: nowrap;
    transition: color 0.15s, border-color 0.15s;
  }
  .search-tab:hover { color: var(--ios-text); }
  .search-tab.active { color: var(--ios-blue); border-bottom-color: var(--ios-blue); font-weight: 600; }
  .search-tab .search-tab-count { font-size: 12px; opacity: 0.75; margin-left: 4px; }

  .search-list { list-style: none; margin: 0; padding: 0; }

  .search-item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 13px 4px;
    border-bottom: 0.5px solid var(--ios-separator);
    background: transparent;
    border-left: none; border-right: none; border-top: none;
    cursor: pointer;
    transition: background 0.15s;
  }
  .search-item:hover { background: rgba(118, 118, 128, 0.06); }

  .search-item-title {
    font-size: 15px;
    font-weight: 500;
    color: var(--ios-text);
    margin-bottom: 4px;
    word-break: break-all;
  }
  .search-item-snippet {
    font-size: 13px;
    color: var(--ios-text-secondary);
    line-height: 1.5;
    margin-bottom: 5px;
    word-break: break-all;
  }
  .search-item-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--ios-text-secondary);
  }
  .search-item-meta .search-badge {
    padding: 1px 7px;
    border-radius: 9px;
    background: rgba(0, 122, 255, 0.1);
    color: var(--ios-blue);
    font-weight: 500;
  }
  .search-item-meta .search-sep { opacity: 0.4; }

  /* 검색어 하이라이트 — 결과 목록 전용(브라우저 기본 mark 는 노란 배경이라 눈이 아프다) */
  .search-page mark {
    background: rgba(255, 214, 10, 0.35);
    color: inherit;
    padding: 0 1px;
    border-radius: 2px;
  }

  .search-empty, .search-loading {
    padding: 28px 4px;
    font-size: 14px;
    color: var(--ios-text-secondary);
    text-align: center;
  }

  .search-more {
    display: block;
    width: 100%;
    margin-top: 14px;
    padding: 11px;
    font-size: 14px;
    color: var(--ios-blue);
    background: rgba(0, 122, 255, 0.06);
    border: none;
    border-radius: 10px;
    cursor: pointer;
  }
  .search-more:hover { background: rgba(0, 122, 255, 0.12); }
  .search-more:disabled { color: var(--ios-text-secondary); cursor: default; }

  /* 첨부파일 결과의 [원문서 열기] — 행 클릭(=다운로드)과 구분되는 보조 동작 */
  .search-owner-link {
    font-size: 12px;
    color: var(--ios-blue);
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    text-decoration: underline;
  }


  /* ============================================
     일정관리 달력 (전체화면) — 우측 요약 달력 헤더의 ⤢ 버튼으로 진입
  ============================================ */

  /* 범례 점 모양이 .cal-legend 스코프에만 있어 새 화면에선 크기 0 이라 안 보였다.
     .dot 은 항상 .dot-<타입> 색상과 짝으로만 쓰이므로 모양을 전역으로 올려
     앞으로 생길 화면이 스스로 옵트인하게 한다. */
  .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }

  /* ⚠️ 아래는 전체화면 전용 오버라이드라 선택자를 반드시 #schedCalendar(ID)로 둔다.
     공유 규칙이 .cal-view(클래스)라 클래스로 쓰면 특정도가 같아져 소스 순서에 의존하게 된다.
     (처음에 공유 규칙을 :is(#fcCalendar, .cal-view) 로 썼다가 :is() 가 ID 특정도를 가져가는 바람에
      이 오버라이드들이 통째로 무효였다 — 시각이 계속 숨겨지고 글자도 안 커졌다.) */

  /* 월 뷰는 시각을 표시하지 않는다(사용자 지시) — 공유 규칙 `.cal-view .fc-daygrid-event .fc-event-time
     { display: none }` 을 그대로 따른다. 칸이 좁아 '09:00' 이 제목을 통째로 밀어내던 것
     (실제로 `● 09:00` 만 남고 제목이 안 보이는 칸이 있었다).
     시각은 주·일(시간격자)과 목록 뷰에서 본다 — 거기는 `.fc-timegrid-event`/list 마크업이라 영향 없다. */
  /* 큰 화면이라 글자·칸을 키운다(요약 달력의 10~11px 은 여기선 너무 작다). */
  #schedCalendar { font-size: 13px; }
  #schedCalendar .fc-daygrid-day-frame { min-height: 116px; }
  #schedCalendar .fc-daygrid-event { font-size: 12px; padding: 2px 6px; }
  #schedCalendar .fc-daygrid-day-number { font-size: 12px; }
  #schedCalendar .fc-col-header-cell-cushion { font-size: 12px; }
  /* 하루짜리 시각 일정은 FullCalendar 가 점(dot)으로 그리는데 기본 파랑이라 타입 색과 어긋난다. */
  /* 시간격자(주/일) 이벤트 — 월 뷰 칩과 같은 색 규약을 쓰되 블록이라 테두리로 구분한다. */
  #schedCalendar .fc-timegrid-event { border: none; border-left: 3px solid var(--bar, transparent); border-radius: 4px; padding: 1px 4px; font-size: 12px; }
  #schedCalendar .fc-timegrid-event .fc-event-title { font-weight: 600; }
  #schedCalendar .fc-list-event-dot { border-color: var(--bar, currentColor); }
  /* 파생 일정(휴가·출장·생일 등)은 원본이 없어 못 옮긴다 — 커서로 알린다. */
  #schedCalendar .sched-readonly { cursor: default; }

  .sched-page { display: flex; flex-direction: column; gap: 10px; }

  .sched-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
  .sched-nav { display: flex; align-items: center; gap: 4px; }
  .sched-nav button,
  .sched-views button {
    border: 1px solid var(--ios-separator);
    background: var(--ios-card-bg, #fff);
    color: var(--ios-text);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 13px;
    cursor: pointer;
  }
  .sched-nav button:hover,
  .sched-views button:hover { background: var(--ios-bg); }
  .sched-views { display: flex; gap: 4px; margin-left: auto; }
  .sched-views button.on { background: var(--ios-blue); border-color: var(--ios-blue); color: #fff; font-weight: 600; }
  .sched-title { font-size: 17px; font-weight: 700; color: var(--ios-text); }

  /* 표시 필터 — 기본은 업무일정만. 지금 무엇이 켜져 있는지 한눈에 보여야
     "왜 내 달력엔 휴가가 안 보이지?" 가 안 생긴다(접어 숨기지 말 것). */
  .sched-filters { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
  .sched-filters .sf-label { font-size: 12px; font-weight: 600; color: var(--ios-text-secondary); margin-right: 2px; }
  .sf-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--ios-text-secondary);
    border: 1px solid var(--ios-separator);
    border-radius: 999px;
    padding: 3px 10px 3px 7px;
    cursor: pointer;
    user-select: none;
  }
  .sf-item.on { color: var(--ios-text); border-color: var(--ios-blue); background: rgba(0, 122, 255, 0.06); font-weight: 600; }
  .sf-item input { margin: 0; }
  .sf-item input:disabled { cursor: default; }
  .sf-item:has(input:disabled) { cursor: default; opacity: 0.9; }

  .sched-hint { font-size: 12px; color: var(--ios-text-tertiary); }

  /* ── 빠른 등록 팝오버 ──────────────────────────────────────
     🔴 달력 격자가 아니라 body 에 붙는다 — FullCalendar 는 뷰 전환·refetch 때 격자를
        통째로 다시 그리므로 칸에 꽂아둔 DOM 은 입력 중이던 내용째 사라진다. */
  .sched-quick {
    position: absolute;
    z-index: 4000;
    /* 폭 = 시각 입력 두 칸이 안 잘리는 최소치. ko-KR 의 <input type="time"> 은
       '오후 12:30 🕐' 로 렌더돼 칸당 약 118px 이 필요하다(268px 에선 '오후 12:3' 으로 잘렸다). */
    width: 320px;
    background: var(--ios-card-bg, #fff);
    border: 1px solid var(--ios-separator);
    border-radius: 12px;
    box-shadow: 0 10px 32px rgba(0, 0, 0, 0.18);
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .sched-quick .sq-when { font-size: 12px; font-weight: 600; color: var(--ios-text-secondary); }
  .sched-quick .sq-title {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ios-separator);
    border-radius: 8px;
    padding: 7px 9px;
    font-size: 14px;
    color: var(--ios-text);
  }
  .sched-quick .sq-title:focus { outline: none; border-color: var(--ios-blue); }
  .sched-quick .sq-cat {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ios-separator);
    border-radius: 8px;
    padding: 6px 8px;
    font-size: 13px;
    color: var(--ios-text);
    background: var(--ios-card-bg, #fff);
  }
  .sched-quick .sq-time { display: flex; align-items: center; gap: 6px; }
  .sched-quick .sq-time input {
    flex: 1 1 0;
    min-width: 0;
    border: 1px solid var(--ios-separator);
    border-radius: 8px;
    padding: 5px 7px;
    font-size: 13px;
    color: var(--ios-text);
  }
  .sched-quick .sq-time span { font-size: 12px; color: var(--ios-text-tertiary); }
  .sched-quick .sq-actions { display: flex; align-items: center; gap: 6px; }
  .sched-quick .sq-spacer { flex: 1 1 auto; }
  .sched-quick button {
    border: 1px solid var(--ios-separator);
    background: var(--ios-card-bg, #fff);
    color: var(--ios-text);
    border-radius: 8px;
    padding: 5px 11px;
    font-size: 13px;
    cursor: pointer;
  }
  .sched-quick .sq-more { color: var(--ios-blue); border-color: transparent; padding-left: 0; }
  .sched-quick .sq-save { background: var(--ios-blue); border-color: var(--ios-blue); color: #fff; font-weight: 600; }
  .sched-quick .sq-save:disabled { opacity: 0.6; cursor: default; }

  /* 일정 모달은 기본 420px 로는 좁다 — 종류가 6종이라 5열 그리드에서 마지막 하나가 홀로 줄바꿈되고,
     내용 에디터도 답답하다. 모바일은 04-responsive 가 2열로 되돌린다. */
  #eventModal .modal { max-width: 640px; }
  #eventModal .type-select { grid-template-columns: repeat(6, 1fr); }

  #eventModal #evtCategory {
    width: 100%;
    box-sizing: border-box;
    border: 1px solid var(--ios-separator);
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 14px;
    color: var(--ios-text);
    background: var(--ios-card-bg, #fff);
  }

  /* ── 일정 모달의 종일/시각 행 (우측 달력·일정관리 달력 공용) ── */
  .form-row-time { display: flex; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
  .form-row-time .evt-allday { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; white-space: nowrap; }
  .form-row-time .evt-allday input { margin: 0; }
  .form-row-time .time-field { display: flex; flex-direction: column; gap: 4px; }
  .form-row-time .time-field label { font-size: 12px; color: var(--ios-text-secondary); }
  .form-row-time .time-field input:disabled { opacity: 0.5; }

  /* 모양은 위 .btn-cal-refresh 공용 규칙이 담당. 글리프(⤢)만 살짝 작게. */
  .btn-cal-full { font-size: 13px; }