/* 급여기초자료 수집 시스템
   원본 .dc.html 의 <helmet> 스타일 + style-hover / style-focus 대체 + 반응형 레이어. */

body {
  margin: 0;
  background: #fff;
  font-family: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  color: #15181d;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;   /* 가로 모드에서 글자가 커지는 것 방지 */
}
input, button, select, textarea { font-family: inherit; }
a { color: #1c4fd8; }
a:hover { color: #143aa0; }
::placeholder { color: #a3a9b3; }

/* 스크롤바 (원본 helmet 과 동일) */
.no-sb { scrollbar-width: none; -ms-overflow-style: none; }
.no-sb::-webkit-scrollbar { width: 0; height: 0; }
.thin-sb { scrollbar-width: thin; scrollbar-color: #cfd4db transparent; }
.thin-sb::-webkit-scrollbar { height: 6px; width: 6px; }
.thin-sb::-webkit-scrollbar-track { background: transparent; }
.thin-sb::-webkit-scrollbar-thumb { background: #d5dae1; border-radius: 3px; }
.thin-sb:hover::-webkit-scrollbar-thumb { background: #b9c0cb; }

/* ── style-hover / style-focus 대체 ─────────────────────────────────── */
.hov-row:hover { background: #f8fafc !important; }
.hov-cell:hover { background: #fafbfc !important; }
.hov-name:hover { text-decoration-color: #1c4fd8 !important; }
.hov-soft:hover { background: #f8fafc !important; }
.hov-outline:hover { border-color: #1c4fd8 !important; color: #1c4fd8 !important; }
.icon-btn:hover { color: #1c4fd8 !important; background: #f2f4f7 !important; }
.cell-input:focus {
  border-color: #1c4fd8 !important;
  background: #fff !important;
  outline: none;
}

/* 가로 스크롤 표 */
.rt::-webkit-scrollbar { height: 10px; }
.rt::-webkit-scrollbar-thumb { background: #d3d8df; border-radius: 6px; }
.rt::-webkit-scrollbar-track { background: transparent; }

/* ── 사이드바 접기 ──────────────────────────────────────────────────
   .side-narrow 가 붙으면 아이콘만 남기고 가운데 내용을 넓게 쓴다.
   1024px 이하의 184px 규칙보다 뒤에 놓이면 안 되므로 선택자를 더 좁게 잡아 둔다. */
.shell.side-narrow { grid-template-columns: 58px 1fr !important; }
.side-narrow .nav-label,
.side-narrow .side-label { display: none !important; }
/* 로그인 정보는 글자만 지운다 — margin-top:auto 를 남겨야 아래쪽 버튼이 바닥에 붙는다. */
.side-narrow .side-foot {
  padding: 12px 0 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
.side-narrow .side-top { justify-content: center !important; padding-right: 0 !important; }
.side-narrow .sidebar { padding-left: 8px !important; padding-right: 8px !important; }
.side-narrow .sidebar > button {
  justify-content: center !important;
  gap: 0 !important;
  padding-left: 6px !important;
  padding-right: 6px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   반응형
   데스크톱(1241px 이상)은 인라인 스타일 그대로 두고,
   좁아질 때만 !important 로 덮어쓴다.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1240px 이하 · 문자 발송의 미리보기를 아래로 ───────────────────── */
@media (max-width: 1240px) {
  .sms-layout {
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 18px !important;
    align-items: start !important;
  }
  .sms-preview-wrap { position: static !important; }
  .sms-preview {
    position: static !important;
    max-height: 460px;
  }
}

/* ── 1024px 이하 · 사이드바를 좁게 ────────────────────────────────── */
@media (max-width: 1024px) and (min-width: 901px) {
  .shell { grid-template-columns: 184px 1fr !important; }
  .body { padding: 22px 20px 32px !important; }
}

/* ── 900px 이하 · 사이드바를 상단 가로 메뉴로, 그리드 단수 축소 ───── */
@media (max-width: 900px) {
  .shell {
    grid-template-columns: 1fr !important;
    min-height: auto !important;
  }
  .sidebar {
    flex-direction: row !important;
    align-items: center;
    padding: 10px !important;
    gap: 6px !important;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  /* 메뉴가 화면보다 길어 가로로 밀린다. 더 있다는 걸 알 수 있게 얇은 스크롤바를 남긴다. */
  .sidebar { scrollbar-width: thin; scrollbar-color: #3a424f transparent; padding-bottom: 6px !important; }
  .sidebar::-webkit-scrollbar { height: 4px; }
  .sidebar::-webkit-scrollbar-track { background: transparent; }
  .sidebar::-webkit-scrollbar-thumb { background: #3a424f; border-radius: 2px; }
  .sidebar > button {
    flex: none;
    margin-top: 0 !important;
    white-space: nowrap;
    padding: 9px 12px !important;
  }
  .side-label, .side-foot, .side-top { display: none !important; }
  /* 가로 메뉴에서는 접기가 의미 없다 — 라벨과 폭을 되돌린다. */
  .shell.side-narrow { grid-template-columns: 1fr !important; }
  .side-narrow .nav-label { display: inline !important; }
  .side-narrow .sidebar > button { justify-content: flex-start !important; gap: 8px !important; }

  .body { padding: 18px 14px 30px !important; }

  .screen-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .stat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 10px !important; }
  .form-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .info-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .info-grid > * { border-right: 0 !important; border-bottom: 1px solid #eef0f3; }

  .toolbar { flex-direction: column !important; align-items: stretch !important; }
  .toolbar-actions { justify-content: flex-start !important; flex: none !important; }

  /* 제목 + 버튼이 한 줄에 눌려 들어가지 않게 */
  .act-row {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
  }
  .act-row > button { width: 100%; }
  .act-row [style*="margin-left:auto"] { margin-left: 0 !important; }
}

/* ── 880px 이하 · 표를 항목명이 붙은 카드로 ───────────────────────── */
@media (max-width: 880px) {
  .rt {
    overflow-x: visible !important;
    border: 0 !important;
    border-radius: 0 !important;
  }
  .rt-head { display: none !important; }
  .rt-row {
    display: block !important;
    min-width: 0 !important;
    white-space: normal !important;   /* 표에서 쓰던 nowrap 해제 */
    border: 1px solid #e5e8ec !important;
    border-top: 1px solid #e5e8ec !important;
    border-radius: 12px !important;
    padding: 10px 14px !important;
    margin-bottom: 10px !important;
    gap: 0 !important;
  }
  .rt-row > * {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 12px;
    padding: 6px 0 !important;
    text-align: left !important;
    min-width: 0;
    width: auto !important;
  }
  .rt-row > * + * { border-top: 1px solid #f4f6f8; }
  .rt-row > [data-label]::before {
    content: attr(data-label);
    flex: none;
    color: #7b8290;
    font-size: 12px;
    font-weight: 600;
  }
  /* 데스크톱에서 말줄임하던 긴 값(URL 등)은 카드에서 줄바꿈해 전부 보여준다 */
  .rt-row > [data-label] {
    flex-wrap: wrap;
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    overflow-wrap: anywhere;
  }
  /* 값이 없는 칸 · 해당사항 없는 칸(—)은 카드에서 감춘다 */
  .rt-row > :empty,
  .rt-row > .rt-na-cell { display: none !important; }
  /* 카드 안에서는 입력칸이 오른쪽 절반을 차지 */
  .rt-row input:not([type="checkbox"]),
  .rt-row select,
  .rt-row textarea {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 62%;
  }
  .rt-row .rt-name { font-size: 15px !important; }

  .rt-total {
    display: flex !important;
    justify-content: space-between !important;
    min-width: 0 !important;
    border-radius: 12px !important;
    border: 1px solid #e5e8ec !important;
    padding: 13px 14px !important;
    gap: 12px !important;
  }
  .rt-total > :empty { display: none !important; }
}

/* ── 760px 이하 · 여백 축소, 폰 프레임 해제 ───────────────────────── */
@media (max-width: 760px) {
  .topbar { padding: 16px 12px 14px !important; }
  .topbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .topbar-title { font-size: 18px !important; }
  .topbar-tools { width: 100%; justify-content: flex-start !important; }
  .tabs { width: 100%; box-sizing: border-box; }
  .tabs > button { flex: 1; min-width: 0; padding: 9px 8px !important; }

  .login-wrap { padding: 24px 12px !important; }
  .login-card { width: 100% !important; padding: 26px 20px !important; }

  /* 모바일 화면 — 폰 프레임을 벗겨 전체 폭으로 */
  .mobile-wrap { gap: 18px !important; padding: 0 12px 30px !important; }
  .phone {
    width: 100% !important;
    max-width: 430px;
    padding: 0 !important;
    border-radius: 14px !important;
    box-shadow: 0 1px 2px rgba(20, 24, 32, .08) !important;
  }
  .phone-inner { border-radius: 14px !important; }
  .phone-status { display: none !important; }
  .aside { width: 100% !important; max-width: 430px; padding-top: 0 !important; }
}

/* ── 480px 이하 · 한 줄에 하나씩 ──────────────────────────────────── */
@media (max-width: 480px) {
  .stat-grid { grid-template-columns: 1fr 1fr !important; }
  .form-grid { grid-template-columns: 1fr !important; }
  .info-grid { grid-template-columns: 1fr !important; }
  .toolbar-actions > button { flex: 1 1 46%; }
  .rt-row input:not([type="checkbox"]),
  .rt-row select,
  .rt-row textarea { max-width: 58%; }
}