/* 큐알이지 마이오피스 모던 UI (모바일 호환) */
html { font-size: 16px; }
body.myoffice-modern {
  font-family: 'Pretendard', 'Noto Sans KR', sans-serif;
  background: #f5f6fa;
  color: #1f2a38;
  font-size: 15px;
  line-height: 1.5;
  margin: 0;
  padding: 0;
  -webkit-text-size-adjust: 100%;
}
body.myoffice-modern * { box-sizing: border-box; }

/* 상단 고정바 */
body.myoffice-modern .header-top-area {
  background: #1a1a2e !important;
  height: 52px;
  display: flex;
  align-items: center;
  padding: 0 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
body.myoffice-modern .header-top-area a,
body.myoffice-modern .header-top-area span,
body.myoffice-modern .header-top-area strong { color: #fff !important; }

/* 탭 메뉴 */
body.myoffice-modern #mulTabMenu {
  display: flex;
  gap: 4px;
  background: #1a1a2e !important;
  padding: 0 12px !important;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  white-space: nowrap;
}
body.myoffice-modern #mulTabMenu > li { list-style: none; }
body.myoffice-modern #mulTabMenu > li > a {
  display: block;
  padding: 12px 18px;
  color: #cfd4dc !important;
  text-decoration: none;
  font-size: 14px;
  font-weight: 600;
  border-radius: 10px 10px 0 0;
}
body.myoffice-modern #mulTabMenu > li.on > a {
  color: #fff !important;
  background: #3a3f57;
}

/* 콘텐츠 랩 */
body.myoffice-modern .wrap {
  max-width: 1080px;
  margin: 0 auto;
  padding: 14px;
}

/* 카드형 테이블 */
body.myoffice-modern table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
  font-size: 13px;
  margin: 0 0 16px;
}
body.myoffice-modern th,
body.myoffice-modern td {
  padding: 10px 12px;
  border-bottom: 1px solid #eef1f4;
  text-align: left;
  vertical-align: middle;
  word-break: break-word;
}
body.myoffice-modern thead th {
  background: #f8fafc;
  color: #556;
  font-weight: 700;
  font-size: 12px;
  border-bottom: 1px solid #e2e6ec;
}
body.myoffice-modern tbody tr:last-child td { border-bottom: 0; }
body.myoffice-modern tbody tr:hover td { background: #fafbfd; }

/* 입력폼 */
body.myoffice-modern input[type="text"],
body.myoffice-modern input[type="password"],
body.myoffice-modern input[type="date"],
body.myoffice-modern input[type="number"],
body.myoffice-modern input[type="search"],
body.myoffice-modern select,
body.myoffice-modern textarea {
  width: 100%;
  max-width: 100%;
  padding: 9px 10px;
  border: 1px solid #d7dce1;
  border-radius: 8px;
  font-size: 13px;
  background: #fff;
  color: #1f2a38;
}
body.myoffice-modern input:focus,
body.myoffice-modern select:focus,
body.myoffice-modern textarea:focus {
  outline: none;
  border-color: #4d9596;
  box-shadow: 0 0 0 3px rgba(77,149,150,.12);
}

/* 버튼 */
body.myoffice-modern button,
body.myoffice-modern input[type="submit"],
body.myoffice-modern input[type="button"] {
  padding: 9px 16px;
  border: 0;
  border-radius: 8px;
  background: #4d9596;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
body.myoffice-modern button:hover { background: #3e7d7e; }

/* 요약/카드 블록 */
body.myoffice-modern .panel,
body.myoffice-modern .card,
body.myoffice-modern .box {
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}

/* 모바일 */
@media (max-width: 640px) {
  html { font-size: 16px; }
  body.myoffice-modern { font-size: 15px; }
  body.myoffice-modern .wrap { max-width: 100%; padding: 8px; }
  body.myoffice-modern table {
    width: 100% !important;
    border-radius: 10px;
  }
  body.myoffice-modern th, body.myoffice-modern td { padding: 10px 12px; font-size: 14px; }
  body.myoffice-modern #mulTabMenu > li > a { padding: 12px 16px; font-size: 15px; }
  body.myoffice-modern .header-top-area { padding: 0 10px; }
  body.myoffice-modern input,
  body.myoffice-modern select,
  body.myoffice-modern textarea,
  body.myoffice-modern button { font-size: 16px !important; }
}

/* PC: 고정 헤더(52px) 높이만큼 본문 상단 여백 확보 */
@media (min-width: 641px) {
  body.myoffice-modern { padding-top: 52px; }
}

/* 푸터 */
body.myoffice-modern .mo-footer {
  margin-top: 24px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  font-size: 12px;
  color: #7a8494;
  text-align: center;
  line-height: 1.7;
  word-break: keep-all;
}