/* [L491→L682] AMSS 이번 달의 업무 + 가입 승인 — 모바일 1열. WPF 규약 미러: 지연=빨강 · 완료=취소선 · 모듈 색 칩. */
* { box-sizing: border-box; margin: 0; }
body {
    font-family: "Malgun Gothic", -apple-system, sans-serif;
    background: #F4F6F9; color: #263238;
    padding-bottom: 40px;
}

.topbar {
    display: flex; align-items: center; gap: 8px;
    background: #0D47A1; color: white;
    padding: 14px 16px;
    padding-top: max(14px, env(safe-area-inset-top));
}
.brand { font-weight: bold; font-size: 16px; }
.brand-sub { font-size: 13px; opacity: .85; flex: 1; }

.view { padding: 20px 16px; max-width: 480px; margin: 0 auto; }
.hidden { display: none !important; }

h1 { font-size: 19px; color: #1A237E; margin-bottom: 6px; }
h2 { font-size: 14px; color: #546E7A; margin: 18px 0 8px; }
.sec-overdue { color: #C62828; }
.hint { font-size: 12.5px; color: #90A4AE; margin-bottom: 14px; }

input {
    width: 100%; padding: 13px 14px; font-size: 16px;
    border: 1px solid #CFD8DC; border-radius: 10px;
    margin-bottom: 10px; background: white;
}
input:focus { outline: 2px solid #1976D2; border-color: transparent; }

button {
    font-size: 15px; border: none; border-radius: 10px;
    padding: 13px 16px; cursor: pointer; width: 100%;
}
button.primary { background: #0D47A1; color: white; font-weight: bold; }
button.ghost {
    background: transparent; color: #546E7A;
    width: auto; padding: 8px 12px; font-size: 13px;
}
.topbar .ghost { color: #E3F2FD; }
button:disabled { opacity: .5; }

.msg { font-size: 13px; color: #1976D2; margin-top: 12px; min-height: 18px; }
.msg.error { color: #C62828; font-weight: bold; }

.tasks-head { display: flex; align-items: center; justify-content: space-between; }
.tasks { list-style: none; display: flex; flex-direction: column; gap: 8px; }

.task {
    display: flex; align-items: center; gap: 10px;
    background: white; border: 1px solid #E3E8EE; border-radius: 12px;
    padding: 12px;
}
.task .chip {
    color: white; font-size: 10.5px; font-weight: bold;
    border-radius: 5px; padding: 3px 7px; flex-shrink: 0;
}
.task .body { flex: 1; min-width: 0; }
.task .title { font-size: 13.5px; font-weight: 600; word-break: keep-all; }
.task .date { font-size: 11.5px; color: #90A4AE; margin-top: 3px; }
.task .date.redday { color: #D32F2F; }                    /* [L493] 일·토 예정일 빨강 */
.task .date.overdue { color: #C62828; font-weight: bold; }

.task.done .title { text-decoration: line-through; color: #B0BEC5; }
.task.done .chip { opacity: .45; }

.task .complete {
    width: auto; flex-shrink: 0;
    background: #E8F5E9; color: #2E7D32; font-weight: bold;
    font-size: 13px; padding: 9px 14px;
}

/* ══ [L682] 가입 승인 화면 ══ */
.approve-card {
    background: white; border: 1px solid #E3E8EE; border-radius: 12px;
    padding: 14px; display: flex; flex-direction: column; gap: 6px;
}
.ac-head { display: flex; align-items: baseline; gap: 8px; }
.ac-name { font-size: 15px; font-weight: 700; }
.ac-id {
    font-size: 11.5px; color: #1565C0; background: #E3F2FD;
    border-radius: 5px; padding: 2px 7px; font-weight: 600;
}
.ac-line { font-size: 12.5px; color: #546E7A; }
.ac-date { color: #90A4AE; font-size: 11.5px; }

.ac-chips { display: flex; align-items: center; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.ac-chips-label { font-size: 11.5px; color: #90A4AE; margin-right: 2px; }
.chipbtn {
    width: auto; font-size: 12.5px; padding: 7px 11px;
    background: #F1F4F7; color: #546E7A; border-radius: 8px;
}
.chipbtn.on { background: #0D47A1; color: white; font-weight: bold; }

/* 오터치 방지 — 터치 타깃 48px + 버튼 간 16px 간격 */
.ac-actions { display: flex; gap: 16px; margin-top: 8px; }
.btn-approve, .btn-hold {
    flex: 1; min-height: 48px; font-weight: bold; font-size: 15px;
}
.btn-approve { background: #0D47A1; color: white; }
.btn-hold    { background: #FBE9E7; color: #C62828; }

/* ══ [L682] 토스트 ══ */
.toast {
    position: fixed; left: 16px; right: 16px;
    bottom: calc(16px + env(safe-area-inset-bottom));
    background: #263238; color: white; font-size: 13.5px;
    border-radius: 10px; padding: 12px 16px; text-align: center;
    box-shadow: 0 4px 14px rgba(0,0,0,.25); z-index: 50;
}
.toast.error { background: #C62828; }