/* 「!」 카드(#440, flag-card.js) — 막음은 빨강, 주의는 주황, 풀린 것은 접힌 회색 한 줄 */
.flagcard { border: 1px solid var(--line); border-left-width: 4px; border-radius: 10px; padding: 10px 12px; margin: 8px 0;
  background: var(--panel, var(--bg)); }
.flagcard.block { border-left-color: var(--danger); }
.flagcard.warn { border-left-color: var(--human); }
.flagcard.done { border-left-color: var(--line); opacity: .75; padding: 6px 12px; }
.flagcard .fc-head { display: flex; gap: 8px; align-items: baseline; }
.flagcard .fc-head b { font-weight: 600; color: var(--ink); line-height: 1.45; }
.flagcard .fc-mark { flex: 0 0 auto; width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center;
  font-weight: 700; font-size: 13px; color: var(--bg); background: var(--danger); }
.flagcard.warn .fc-mark { background: var(--human); color: var(--bg); }
.flagcard.done .fc-mark { background: var(--line); color: var(--ink-2); }
.flagcard .fc-state { margin-left: auto; flex: 0 0 auto; font-size: 12px; color: var(--ink-2); }
.flagcard .fc-meta { margin: 4px 0 0 28px; font-size: 12.5px; color: var(--ink-2); }
.flagcard.done .fc-meta { display: none; }
.flagcard .fc-rule { background: none; border: 0; padding: 0; color: var(--human); font: inherit; cursor: pointer; text-align: left; }
.flagcard .fc-ev { list-style: none; margin: 8px 0 0 28px; padding: 0; display: grid; gap: 6px; }
.flagcard .fc-ev li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--ink); }
.flagcard .fc-ev > li > img { width: 96px; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; flex: 0 0 auto; background: var(--line); }
.flagcard .fc-acts { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0 28px; }
.flagcard .fc-acts button { padding: 6px 12px; border-radius: 7px; border: 1px solid var(--line); background: transparent;
  color: var(--ink); font: inherit; font-size: 13px; cursor: pointer; }
.flagcard .fc-acts button.go { background: var(--human); border-color: var(--human); color: var(--bg); font-weight: 600; }
.flagcard .fc-acts button:disabled { opacity: .6; cursor: default; }
.flagcard .fc-err { margin: 6px 0 0 28px; color: var(--danger); font-size: 12.5px; }
@media (max-width: 640px) { .flagcard .fc-ev li { flex-direction: column; } .flagcard .fc-ev > li > img { width: 100%; } }

/* 규칙 책장(#440 S3) — 책 아홉 권, 걸린 책은 테두리로 */
.rule-shelf .rs-books { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.rule-shelf .rs-book { display: grid; gap: 4px; text-align: left; padding: 10px 12px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); font: inherit; cursor: pointer; }
.rule-shelf .rs-book:hover { border-color: var(--human-dim); }
.rule-shelf .rs-book b { font-size: 13.5px; }
.rule-shelf .rs-book span { font-size: 12px; color: var(--ink-2); line-height: 1.5; }
.rule-shelf .rs-book em { font-style: normal; font-size: 12px; color: var(--human); }
.rule-shelf .rs-book.hot { border-color: var(--danger); } .rule-shelf .rs-book.hot em { color: var(--danger); }
.rule-shelf h3 { margin: 10px 0 4px; font-size: 15px; } .rule-shelf h4 { margin: 14px 0 6px; font-size: 13px; color: var(--ink-2); }
.rule-shelf .rs-rules, .rule-shelf .rs-hits { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 13px; }
.rule-shelf .rs-rules b { color: var(--human); font-weight: 600; margin-right: 4px; }
.rule-shelf .rs-hits em { font-style: normal; color: var(--ink-2); font-size: 12px; margin-left: 6px; }
.rule-shelf .rs-values { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.rule-shelf .rs-values dt { color: var(--ink-2); } .rule-shelf .rs-values dd { margin: 0; }
/* 작업 창(.modal.work)에서는 근거 그림을 크게 보인다 — 무엇이 걸렸는지 그림으로 판단한다 */
.modal.work .flagcard .fc-ev > li > img { width: 200px; }

/* 다시 그린 근거의 「전 → 후」(#459) — 대화 칸의 카드 · 「!」 창 · 작품 홈의 확인 카드가 같은 모양을 쓴다 */
.fc-redo { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; }
.fc-redo figure { margin: 0; flex: 1 1 0; min-width: 0; max-width: 220px; }
.fc-redo img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 6px; display: block; background: var(--line); }
.fc-redo figcaption { margin-top: 3px; font-size: 11.5px; color: var(--ink-2); text-align: center; }
.fc-redo .fc-arrow { flex: 0 0 auto; color: var(--ink-2); }
.fc-asked { margin: 6px 0 0; padding-left: 16px; font-size: 12px; line-height: 1.5; color: var(--ink-2); }
.flagcard .fc-ev li.redo { display: block; }