/* Photos and files under a body (media/_attachments.html) and the 첨부 파일 rows
   (media/_attachment_rows.html), ADR-0016 decision 8. The page's list gap alone spaces
   the attachments (a PDF block too: pdf-viewer.css leaves its outer margin at 0). */
.attachments{display:grid;gap:28px;margin-top:2em;min-width:0}
.attachments>*{margin:0;min-width:0}
.att-figure img{display:block;max-width:100%;height:auto;border-radius:12px;background:var(--sunk)}
.att-figure figcaption{margin-top:8px;font-family:var(--sans);font-size:.92rem;line-height:1.6;color:var(--muted)}
.att-file{font-family:var(--sans);line-height:1.75;overflow-wrap:anywhere}
.att-file a{display:inline-flex;align-items:center;min-height:var(--target-min);text-underline-offset:3px}
.att-file .file-info{color:var(--muted);font-size:.92rem}

/* Rows: with JavaScript a row shows only the cells its file's kind uses (data-att-for
   against the row's data-att-kind, which the server writes and attachments.js keeps in
   step), from the first paint; a cell with an error always shows. Without JavaScript
   every cell shows. */
.js [data-att-row]:not([data-att-kind="image"]) [data-att-for="image"]:not(.has-error),
.js [data-att-row]:not([data-att-kind="pdf"]) [data-att-for="pdf"]:not(.has-error){display:none}
.att-choices{display:flex;flex-wrap:wrap;gap:0 20px}
.att-choices .check{display:inline-flex;align-items:center;gap:8px;min-height:var(--target-min);cursor:pointer}
.att-state{margin:0}
.att-name{margin:0;font-family:var(--sans);font-weight:600;overflow-wrap:anywhere}

@media (forced-colors:active){.att-figure img{border:1px solid CanvasText}}