/* ReplayBoard 전용 — DailyMission4 밝은 흰색 버전 (공용 board-bone.css 는 건드리지 않는다) */
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: #FFFFFF; color: #374151; font-family: "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
.sh { max-width: 720px; margin: 0 auto; padding: 0 20px; }

/* 머리 */
.hdTop { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 12px 0 10px; border-bottom: 1px solid #EEF0F3; font-size: 12px; color: #9CA3AF; }
.hdTop a:hover { color: #2F80ED; }
.hdTop .sep { margin: 0 6px; color: #D1D5DB; }
.hdAct { display: flex; gap: 6px; }
.hdK { margin-top: 18px; font-size: 12px; font-weight: 800; letter-spacing: .02em; color: #2F80ED; font-variant-numeric: tabular-nums; }
.hdT { margin: 6px 0 0; font-size: 24px; font-weight: 800; line-height: 1.35; letter-spacing: -.02em; color: #111827; word-break: keep-all; overflow-wrap: anywhere; }
.hdS { margin-top: 6px; font-size: 12px; color: #9CA3AF; }
.hdS b { font-weight: 700; color: #6B7280; }
.hdS .sep { color: #D1D5DB; }

/* 버튼 */
.nbtn { display: inline-block; font-family: inherit; font-size: 12.5px; font-weight: 700; padding: 8px 14px; border: 0; border-radius: 999px; background: #F4F6F9; color: #6B7280; cursor: pointer; white-space: nowrap; }
.nbtn:hover { color: #2F80ED; }
.nbtn.pri { background: #2F80ED; color: #fff; font-weight: 800; }
.nbtn.pri:hover { background: #1F6FDB; color: #fff; }
.nbtn.dan { background: #FBEFE7; color: #B4531F; }
.nbtn.dan:hover { background: #F7E3D5; color: #B4531F; }
.nbtn.sm { font-size: 12px; padding: 5px 11px; }

/* 검색 */
.sr { display: flex; gap: 8px; margin-top: 16px; }
.sr input[type=text] { flex: 1; min-width: 0; font-family: inherit; font-size: 14px; padding: 10px 16px; border: 0; border-radius: 999px; background: #F4F6F9; color: #111827; outline: none; }
.sr input::placeholder { color: #9CA3AF; }
.sr input:focus { box-shadow: 0 0 0 2px #CFE0FA; }
.sr button { flex: none; font-family: inherit; font-size: 13.5px; font-weight: 800; padding: 0 18px; border: 0; border-radius: 999px; background: #2F80ED; color: #fff; cursor: pointer; }
.sr button:hover { background: #1F6FDB; }

/* 구역 */
.sec { margin-top: 22px; padding-top: 16px; border-top: 1px solid #EEF0F3; }
.secH { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.secT { font-size: 16px; font-weight: 800; color: #111827; }
.secN { font-size: 12px; color: #9CA3AF; font-variant-numeric: tabular-nums; }
.empty { padding: 40px 0 12px; text-align: center; font-size: 14px; color: #9CA3AF; }
.alert { margin-top: 16px; padding: 10px 14px; border-radius: 12px; background: #FBEFE7; color: #B4531F; font-size: 13px; }

/* 목록 줄 */
.nr { display: flex; gap: 14px; align-items: flex-start; padding: 15px 0; border-bottom: 1px solid #EEF0F3; }
.nr:hover .nrT { color: #2F80ED; }
.nrNo { flex: none; width: 30px; padding-top: 1px; font-size: 18px; font-weight: 300; color: #8DB5F3; font-variant-numeric: tabular-nums; }
.nrNo.k { font-size: 12px; font-weight: 800; color: #2F80ED; padding-top: 4px; }
.nrTx { flex: 1; min-width: 0; }
.nrT { display: block; font-size: 15.5px; font-weight: 700; line-height: 1.5; color: #111827; word-break: keep-all; overflow-wrap: anywhere; transition: color .15s; }
.nrM { display: block; margin-top: 3px; font-size: 11.5px; color: #9CA3AF; font-variant-numeric: tabular-nums; }
.nrM i { font-style: normal; margin: 0 5px; color: #D1D5DB; }
.tag { display: inline-block; margin-right: 6px; padding: 2px 8px; border-radius: 999px; background: #EAF2FD; color: #2B5FA8; font-size: 11px; font-weight: 700; vertical-align: 1px; }
.tag.line { margin: 0 0 0 6px; background: #FBEFE7; color: #B4531F; }

/* 쪽 넘김 */
.pg { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin-top: 18px; }
.pg a { min-width: 32px; height: 32px; padding: 0 6px; display: grid; place-items: center; border-radius: 999px; background: #F4F6F9; color: #6B7280; font-size: 13px; font-variant-numeric: tabular-nums; }
.pg a:hover { color: #2F80ED; }
.pg a.on { background: #2F80ED; color: #fff; font-weight: 700; }
.pg a.off { opacity: .4; pointer-events: none; }

/* 바닥 */
.ft { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin-top: 24px; padding: 14px 0 40px; border-top: 1px solid #EEF0F3; font-size: 11.5px; color: #9CA3AF; }
.ft a { color: #6B7280; }
.ft a:hover { color: #2F80ED; }

/* 글쓰기 · 수정 폼 */
.fm { margin-top: 8px; }
.fRow { margin-top: 18px; }
.fGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
@media (max-width: 560px) { .fGrid { grid-template-columns: 1fr; } }
.fLbl { display: block; font-size: 12.5px; font-weight: 700; color: #6B7280; }
.fIn { display: block; width: 100%; margin-top: 6px; font-family: inherit; font-size: 15px; line-height: 1.7; padding: 11px 16px; border: 0; border-radius: 999px; background: #F4F6F9; color: #111827; outline: none; }
.fIn::placeholder { color: #9CA3AF; }
.fIn:focus { box-shadow: 0 0 0 2px #CFE0FA; }
.fIn[readonly], .fIn:disabled { color: #9CA3AF; }
textarea.fIn { min-height: 200px; border-radius: 12px; resize: vertical; padding: 12px 16px; }
input[type=file].fIn { border-radius: 12px; font-size: 13.5px; color: #6B7280; }
input[type=file].fIn::file-selector-button { margin-right: 12px; padding: 6px 14px; border: 0; border-radius: 999px; background: #EAF2FD; color: #2B5FA8; font-family: inherit; font-weight: 700; cursor: pointer; }
.fChk { display: flex; align-items: center; gap: 8px; margin-top: 6px; padding: 9px 14px; border-radius: 999px; background: #F4F6F9; font-size: 13.5px; color: #6B7280; cursor: pointer; }
.fChk:has(input:checked) { background: #EAF2FD; color: #2B5FA8; font-weight: 700; }
.fChk input { accent-color: #2F80ED; margin: 0; }
.fHint { margin-top: 6px; font-size: 12px; line-height: 1.6; color: #9CA3AF; }
.fAct { display: flex; gap: 8px; margin-top: 24px; }
.fAct .nbtn { flex: 1; font-size: 14px; text-align: center; padding: 13px 14px; }
.fAct .nbtn.pri { flex: 2; }

/* 첨부 목록 */
.fl { list-style: none; margin: 8px 0 0; padding: 0; }
.fl li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #EEF0F3; font-size: 14px; }
.fl li:last-child { border-bottom: 0; }
.fl li .n { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; color: #2F80ED; }
.fl li .s { flex: none; font-size: 12px; color: #9CA3AF; font-variant-numeric: tabular-nums; }
.fl .th { flex: none; width: 44px; height: 44px; object-fit: cover; border-radius: 12px; background: #EAF2FD; display: grid; place-items: center; color: #2F80ED; font-size: 13px; }
.fl .l { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1; }
.fl .r { display: flex; align-items: center; gap: 10px; flex: none; }
.fl .r form { margin: 0; }

/* 상세 */
.tb { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 14px; }
.tb form { margin: 0; display: contents; }
.tb .grow { flex: 1; }
.pop { margin-top: 14px; padding: 10px 14px; border-radius: 12px; background: #EAF2FD; font-size: 13px; color: #2B5FA8; }
.pop b { font-weight: 800; }
.art { margin-top: 16px; padding-top: 18px; border-top: 1px solid #EEF0F3; }
.ct { font-size: 15.5px; line-height: 1.9; color: #374151; word-break: keep-all; overflow-wrap: anywhere; }
.ct.pre { white-space: pre-wrap; }
.ct :is(img, video, iframe) { max-width: 100%; height: auto; border-radius: 12px; }
.ct a, a.content-link { color: #2F80ED; text-decoration: underline; word-break: break-all; }

/* 댓글 */
.rpF { margin-top: 12px; display: grid; grid-template-columns: 120px 1fr auto; gap: 6px; align-items: center; }
@media (max-width: 560px) { .rpF { grid-template-columns: 1fr auto; } .rpF .w { grid-column: 1 / -1; } }
.rpF .fIn { margin-top: 0; padding: 10px 14px; font-size: 14px; }
.rpF .nbtn { padding: 11px 16px; }
.rp { padding: 14px 0; border-bottom: 1px solid #EEF0F3; }
.rp:last-child { border-bottom: 0; }
.rpH { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 11.5px; color: #9CA3AF; font-variant-numeric: tabular-nums; }
.rpH b { font-size: 13px; font-weight: 700; color: #111827; margin-right: 8px; }
.rpH form { margin: 0; }
.rpNo { display: inline-block; min-width: 18px; text-align: center; font-size: 10.5px; line-height: 1.5; color: #6B7280; background: #F3F4F6; border-radius: 9px; padding: 1px 7px; margin-right: 8px; vertical-align: 1px; }
.rpB { margin-top: 5px; font-size: 14px; line-height: 1.75; color: #374151; white-space: pre-wrap; word-break: keep-all; overflow-wrap: anywhere; }
.rpAct { display: inline-flex; align-items: center; gap: 6px; }
.rpAct form { margin: 0; }
.rpEdit { display: grid; gap: 6px; margin-top: 10px; }
.rpEdit[hidden] { display: none; }
.rpEdit .fIn { margin-top: 0; font-size: 14px; padding: 9px 14px; }
.rpEdit textarea.fIn { min-height: 90px; font-family: inherit; line-height: 1.6; }
.rpEditB { display: flex; justify-content: flex-end; gap: 6px; }
.rp.editing .replyBody { display: none; }