/*
 * 출력 화면 공통 디자인 — 출석부 / 이동서비스일지 / 입소자현황 / 종사자현황 네 곳이 같은 모양을 씁니다.
 * 여기 한 곳만 고치면 네 화면이 함께 바뀝니다. (색은 theme.css의 값을 그대로 씁니다)
 */

body{
  margin:0;
  font-family:Arial,sans-serif;
  background:var(--bg);
  color:var(--text);
}

.wrap{
  max-width:430px;
  margin:auto;
  padding:20px 16px 24px;
  background:var(--bg);
  min-height:100vh;
  box-sizing:border-box;
}

@media (min-width:700px){
  .wrap{
    max-width:720px;
  }
}

h1{
  margin:0 0 16px;
  font-size:22px;
  font-weight:700;
}

/* 기준 월 고르는 줄 — 네모칸 없이 밑줄만 */
.monthRow{
  display:flex;
  align-items:center;
  gap:8px;
  margin-bottom:18px;
  font-size:13px;
  color:var(--text-sub);
}

.monthInput{
  border:none;
  border-bottom:1px solid var(--line);
  background:transparent;
  padding:2px 0;
  font-size:14px;
  font-family:inherit;
  color:var(--text);
}

.monthInput:focus{
  outline:none;
  border-bottom-color:var(--text);
}

/* 내려받을 항목 한 덩어리 — 배경·테두리 없이 위쪽 구분선만 */
.card{
  padding:14px 0;
  border-top:1px solid var(--line);
}

.cardTitle{
  font-size:15px;
  font-weight:700;
  margin-bottom:4px;
}

.cardDesc{
  font-size:12px;
  color:var(--text-sub);
  line-height:1.6;
  margin-bottom:10px;
}

/* 카드 제목 옆 작은 이름표 (관리자용 / 게시판용) */
.cardTag{
  font-size:11px;
  font-weight:400;
  color:var(--text-sub);
  margin-left:6px;
}

/* 내려받기 전에 고르는 옵션 한 줄 (예: 빨간 X 표시) */
.optRow{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  color:var(--text-sub);
  margin-bottom:10px;
  cursor:pointer;
}

.optRow input{
  width:15px;
  height:15px;
  margin:0;
  cursor:pointer;
}

.downloadBtn{
  background:none;
  border:none;
  padding:0;
  font-size:14px;
  font-weight:700;
  color:#ff13f0;
  cursor:pointer;
  font-family:inherit;
}

.downloadBtn:disabled{
  color:var(--text-sub);
  cursor:default;
}

.statusText{
  margin-top:14px;
  font-size:12px;
  color:var(--text-sub);
  line-height:1.6;
}

.warnText{
  color:var(--warn);
}