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

body {
  margin: 0;
  background: #eceef1;
  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; }

/* style-hover="background:#f8fafc" 대체 */
.hov-row:hover { background: #f8fafc !important; }

/* style-hover="text-decoration-color:#1c4fd8" 대체 */
.hov-name:hover { text-decoration-color: #1c4fd8 !important; }

/* 급여자료 상세 표의 셀 인라인 편집 · style-focus 대체 */
.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; }

/* 목업 상태 전환 패널 */
.mock-panel {
  border: 1px solid #dde1e7;
  background: #fff;
  border-radius: 12px;
  padding: 14px;
}
.mock-panel button { width: 100%; text-align: left; }

/* ═══════════════════════════════════════════════════════════════════
   반응형
   데스크톱(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::-webkit-scrollbar { display: none; }
  .sidebar > button {
    flex: none;
    margin-top: 0 !important;
    white-space: nowrap;
    padding: 9px 12px !important;
  }
  .side-label, .side-foot { display: none !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;
    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) {
  .page { padding: 16px 12px 40px !important; }

  .topbar {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 12px !important;
  }
  .topbar-title { font-size: 18px !important; }
  .tabs { width: 100%; box-sizing: border-box; }
  .tabs > button { flex: 1; min-width: 0; padding: 9px 8px !important; }

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

  /* 모바일 화면 — 폰 프레임을 벗겨 전체 폭으로 */
  .mobile-wrap { gap: 18px !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%; }
}