/* ══════════════════════════════════════════════════════════════
   주일공과 보기 · 등록 · 수정 — DailyMission4 밝은 흰색 버전 (2026-10-03 시안 확정)
   board-bone.css 와 화면 <style> 뒤에 불러와 덮어쓴다. 화면 구조 · 입력 이름은 건드리지 않는다.
   ══════════════════════════════════════════════════════════════ */
:root {
    --bg: #FFFFFF; --tx: #111827; --dim: #9CA3AF; --dim2: #6B7280;
    --rule: #EEF0F3; --line: #EEF0F3; --acc: #2F80ED; --mark: #EAF2FD; --card: #FFFFFF;
    --head: #FFFFFF; --headtx: #111827; --headk: #2F80ED; --headdim: #6B7280; --danger: #D9534F; --pad: 16px;
    color-scheme: light;
}
@media (prefers-color-scheme: dark) {
    :root {
        --bg: #FFFFFF; --tx: #111827; --dim: #9CA3AF; --dim2: #6B7280;
        --rule: #EEF0F3; --line: #EEF0F3; --acc: #2F80ED; --mark: #EAF2FD; --card: #FFFFFF;
        --head: #FFFFFF; --headtx: #111827; --headk: #2F80ED; --headdim: #6B7280; --danger: #D9534F;
    }
}
body, body *:not(i):not(svg):not(path) { font-family: "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif !important; }
body { background: #FFFFFF; color: #374151; }
.sh { max-width: 760px; padding: 0 16px; }

/* 머리 */
.hd { background: #FFFFFF !important; color: #111827; }
.hd .sh { padding-top: 0; padding-bottom: 0; }
.hdTop { padding: 14px 0 12px; border-bottom: 1px solid #EEF0F3; color: #9CA3AF; }
.hdTop > span:first-child a { font-weight: 700; color: #374151; }
.hdTop a:hover { color: #2F80ED; }
.hdTop .sep { color: #D1D5DB; opacity: 1; }
.hdK { margin-top: 20px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #2F80ED; }
.hdT { margin-top: 6px; font-size: 24px; font-weight: 800; line-height: 1.35; letter-spacing: -.02em; color: #111827; }
.hdS { margin-top: 4px; font-size: 13px; color: #6B7280; }
@media (max-width: 480px) { .hdT { font-size: 22px; } }

/* 구역 제목 */
.sec { margin-top: 24px; }
.secH { padding: 16px 0 6px; border-bottom: 0; border-top: 1px solid #EEF0F3; }
.secK { display: none; }
.secT { margin-top: 0; font-size: 16px; font-weight: 800; color: #111827; }
.secN { font-size: 11.5px; font-weight: 600; color: #9CA3AF; }

/* 버튼 */
.tb { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 12px; padding: 0; border: 0; }
.tb .grow { flex: 1; }
.nbtn { border: 0 !important; border-radius: 999px; background: #F4F6F9; color: #374151; font-size: 12.5px; font-weight: 700; padding: 7px 13px; }
.nbtn:hover { color: #2F80ED; }
.nbtn.pri { background: #2F80ED; color: #fff; }
.nbtn.pri:hover { background: #1F6FDB; color: #fff; }
.nbtn.dan { background: #FDEEEE; color: #D9534F; }
.nbtn.dan:hover { color: #D9534F; }
.ft { padding: 18px 0 30px; font-size: 11.5px; color: #9CA3AF; }
.ft a { color: #6B7280; font-weight: 700; }

/* 폼 (등록 · 수정) */
.fm { margin-top: 4px; }
.fRow { margin-bottom: 12px; }
.fLbl { font-size: 12px; font-weight: 400; letter-spacing: 0; color: #6B7280; margin-bottom: 4px; }
.fIn { border: 0; border-radius: 12px; background: #F4F6F9; color: #111827; padding: 12px 13px; }
.fIn:focus { background: #fff; box-shadow: inset 0 0 0 2px #2F80ED; border: 0; }
textarea.fIn { min-height: 110px; line-height: 1.7; }
.fGrid { gap: 0 10px; }
.text-danger, .field-validation-error, .validation-summary-errors { color: #D9534F; font-size: 12px; }
.validation-summary-errors { padding: 10px 14px; border-radius: 12px; background: #FDEEEE; }
.fAct { justify-content: stretch; gap: 8px; padding-top: 0; border-top: 0; }
.fAct .nbtn { height: 48px; display: grid; place-items: center; border-radius: 14px; font-size: 15px; font-weight: 800; }
.fAct .nbtn:not(.pri) { flex: none; width: 96px; color: #6B7280; }
.fAct .nbtn.pri { flex: 1; }

/* ── 공과 보기 (WeeklyReport/IndexByID) ── */
.hdP { margin-top: 10px; padding-left: 12px; border-left: 3px solid #D6E4FA; font-size: 14.5px; line-height: 1.8; color: #374151; }
.hdP::before, .hdP::after { content: none; }
.qn { background: #FFFFFF; border-bottom: 1px solid #EEF0F3; margin-top: 12px; }
.qn .sh { gap: 6px; padding-top: 10px; padding-bottom: 8px; }
.qn a { padding: 7px 13px; border: 0; border-radius: 999px; margin: 0; background: #F4F6F9; color: #6B7280; font-size: 12.5px; font-weight: 700; }
.qn a:first-child { padding-left: 13px; }
.qn a:hover, .qn a.on { color: #fff; background: #2F80ED; border: 0; }
.obj { display: grid; grid-template-columns: 1fr; gap: 8px; margin-top: 14px; background: none; border: 0; }
.obj > div { padding: 13px 15px; border-radius: 14px; background: #EAF2FD; }
.obj > div + div { border: 0 !important; }
.objK { font-size: 11.5px; font-weight: 800; letter-spacing: 0; color: #2F80ED; }
.objT { margin-top: 3px; font-size: 14.5px; line-height: 1.7; color: #111827; }
@media (min-width: 641px) { .obj { grid-template-columns: 1fr 1fr; } }
.bible-chip { gap: 12px; padding: 15px 2px; border-bottom: 1px solid #EEF0F3; }
.bible-chip:hover { background: none; }
.bcNo { width: 30px; font-weight: 800; font-size: 17px; color: #7FA3DB; }
.bible-chip.recite .bcNo { color: #2F80ED; font-size: 13px; }
.bible-chip-type { font-size: 11.5px; font-weight: 400; letter-spacing: 0; color: #9CA3AF; }
.bible-chip-ref { margin-top: 1px; font-size: 18px; font-weight: 800; color: #111827; }
.bible-chip-go { font-weight: 300; font-size: 18px; color: #7FA3DB; }
.bible-chip:hover .bible-chip-go { color: #2F80ED; }
.video-grid { gap: 12px; margin-top: 12px; }
.video-label { font-size: 12px; font-weight: 400; letter-spacing: 0; color: #9CA3AF; margin-bottom: 6px; }
.yt { border: 0; border-radius: 14px; }
details.acc { border-bottom: 1px solid #EEF0F3; }
details.acc > summary { gap: 10px; padding: 15px 2px; font-size: 16px; font-weight: 700; color: #111827; }
details.acc > summary::before { content: "▾"; order: 3; width: auto; font-size: 12px; color: #2F80ED; transition: transform .2s; }
details.acc[open] > summary::before { content: "▾"; transform: rotate(180deg); }
details.acc > summary:hover { color: #2F80ED; }
.badge { font-size: 12px; font-weight: 700; color: #2F80ED; background: #EAF2FD; border-radius: 999px; padding: 1px 9px; }
.accBody { margin: 0 0 14px; padding: 13px 15px; border-left: 0; border-radius: 14px; background: #F4F6F9; }
.muted { font-size: 12.5px; color: #6B7280; }
.btn-link { border: 0; border-radius: 999px; background: #FFFFFF; color: #2F80ED; font-size: 13px; font-weight: 700; padding: 7px 13px; }
.secBody > .links .btn-link, .adm .btn-link { background: #F4F6F9; color: #374151; }
.btn-link:hover { color: #1F6FDB; }
figure.thumb { border: 0; border-radius: 12px; background: #E1E6EE; }
#viewer::backdrop, #viewer[open] { background: rgba(17,24,39,.9); }
.viewer-close { border: 0; border-radius: 50%; background: rgba(255,255,255,.15); color: #fff; }
.viewer-close:hover { background: rgba(255,255,255,.3); color: #fff; }