/*
 * 커뮤니티(게시판) 겉모습 — **정본 한 곳** (change.board-unify ②).
 *
 * 예전에는 이 규칙이 `src/widgets/community.ts` 안 문자열로 살았다. 그러면 글 장(정적 장)이
 * 같은 모양을 내려면 **손으로 베껴야** 했고, 디자인은 자주 바뀌니 그 순간부터 두 집이 갈라진다
 * (2026-08-23 사용자 확정: 「한쪽에서 SSOT 되는 구조여야 한다」).
 *
 * 이제 파일 하나를 **앱과 정적 장이 각자 링크한다** — `index.html` / `scripts/lib/shell-page.mjs`.
 * 선례 = `css/lotto.css` · `css/randomgen.css` (같은 방식).
 * 여기를 고치면 앱 안 커뮤니티도, 글 장도 같이 바뀐다. 어느 쪽에도 사본을 두지 마라.
 */
/* ★ 목록이 길면 **셸이 스크롤을 맡는다** (2026-08-23 실측: 글 78줄 = 3,057px 이 815px
       칸에 갇혀 아예 안 내려갔다). `layout:'full'` 은 캔버스형 위젯(그래프·스튜디오)이
       스스로 스크롤을 쥐라고 만든 계약인데, 커뮤니티는 **글을 읽는 판**이라 그 계약이
       안 맞는다. 넓게 쓰는 것만 취하고 스크롤은 셸에 돌려준다 — 이 위젯이 열렸을 때만. */
    .main-content:has(> #tool-pages > #page-community.active) { overflow-y:auto !important; }

    /* 커뮤니티는 **글을 읽는 곳**이다. 넓은 화면에는 판이 없어 관측실 무늬가 글 뒤로 그대로
       비쳤다 — 예쁘지만 안 읽힌다. 그렇다고 불투명한 상자를 얹으면 이 사이트 같지가 않다.
       그래서 유리처럼 깐다: 무늬는 흐릿하게 남고 글은 또렷하다. */
    /* ★ 너비는 **글자 수가 아니라 규격**이 정한다 (2026-08-23 실측: 462px 로 쪼그라들어
       목록이 제목 길이에 따라 좌우로 흔들렸다). 세로 flex 안에서는 상자가 내용만큼만
       줄어들어서(shrink-to-fit) 최대너비만으로는 940px 를 못 채운다 — width:100% 를
       같이 적어야 「최대 940, 좁으면 화면만큼」이 성립한다. */
    .c-wrap { display:flex; flex-direction:column; position:relative; width:100%;
        max-width:940px; margin:0 auto; padding:20px 22px 26px;
        background:color-mix(in srgb, var(--bg-primary) 62%, transparent);
        backdrop-filter:blur(14px) saturate(1.15); -webkit-backdrop-filter:blur(14px) saturate(1.15);
        border:1px solid var(--border); border-radius:var(--radius-lg); }
    /* 유리를 못 그리는 브라우저에서는 그냥 불투명하게 — 안 읽히는 것보다 낫다. */
    @supports not (backdrop-filter: blur(1px)) { .c-wrap { background:var(--bg-primary); } }
    @media (max-width: 620px) { .c-wrap { padding:14px 12px 20px; border-radius:0; border-left:0; border-right:0; } }

    .c-head { display:flex; align-items:baseline; gap:10px; margin-bottom:14px; }
    .c-head h2 { margin:0; font-size:22px; color:var(--text-primary); }
    .c-head span { font-size:var(--font-size-xs); color:var(--text-secondary); }

    /* 판 고르는 줄 — 커뮤니티는 「어디에 쓰는 글인지」가 먼저다. */
    .c-boards { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
    .c-board { display:inline-flex; align-items:center; gap:6px; padding:7px 13px; border-radius:999px;
        border:1px solid var(--border); background:transparent; cursor:pointer; font:inherit;
        font-size:var(--font-size-xs); color:var(--text-secondary); }
    .c-board:hover { color:var(--text-primary); }
    .c-board[data-on="1"] { border-color:var(--accent); color:var(--accent); background:var(--accent-dim); }
    .c-board-count { font-size:10px; opacity:.7; font-family:monospace; }

    .c-bar { display:flex; align-items:center; justify-content:space-between; gap:10px;
        margin-bottom:10px; flex-wrap:wrap; }
    .c-sorts { display:flex; gap:4px; }
    .c-sort { background:none; border:0; padding:4px 8px; border-radius:var(--radius-md); cursor:pointer;
        font:inherit; font-size:var(--font-size-xs); color:var(--text-tertiary); }
    .c-sort[data-on="1"] { color:var(--text-primary); font-weight:700; }
    .c-newbtn { padding:7px 14px; border-radius:var(--radius-md); border:1px solid var(--accent);
        background:transparent; color:var(--accent); font:inherit; font-size:var(--font-size-xs);
        font-weight:600; cursor:pointer; }
    .c-newbtn:hover { background:var(--accent); color:var(--bg-primary); }

    /* 익명 이름표 (KL-157) — 채팅에서 쓰던 그 색 그대로. 손잡이(@아무개)와 **다르게** 보여야
       읽는 사람이 「눌러도 프로필이 없는 이름」임을 바로 안다. */
    .c-anon { font-weight:700; }
    .c-anonpick { display:inline-flex; align-items:center; gap:4px; cursor:pointer; user-select:none; }
    .c-anonpick input { accent-color:var(--accent); margin:0; }

    /* 신고함 (KL-157) — 주인에게만, 들어온 것이 있을 때만 보인다. */
    .c-reports { border:1px solid #ef8b8b55; border-radius:var(--radius-md); padding:10px 12px; }
    .c-report-list { list-style:none; margin:8px 0 0; padding:0; display:flex; flex-direction:column; gap:10px; }
    .c-report { border-top:1px solid var(--border); padding-top:8px; }
    .c-report:first-child { border-top:none; padding-top:0; }
    .c-report-head { display:flex; align-items:center; gap:6px; font-size:var(--font-size-xs); color:var(--text-tertiary); }
    .c-report-reason { color:var(--text-secondary); }
    .c-report-body { margin:4px 0 6px; font-size:var(--font-size-sm); color:var(--text-primary); word-break:break-word; }
    .c-report-foot { display:flex; gap:10px; }

    .c-write { display:flex; flex-direction:column; gap:8px; margin-bottom:18px;
        border:1px solid var(--border); border-radius:var(--radius-lg); padding:14px; background:var(--bg-secondary); }
    .c-write input, .c-write textarea { width:100%; padding:10px 12px; border-radius:var(--radius-md);
        border:1px solid var(--border); background:var(--bg-primary); color:var(--text-primary); font:inherit; }
    .c-write textarea { min-height:110px; resize:vertical; }
    .c-write-foot { display:flex; justify-content:space-between; align-items:center; gap:10px; }
    .c-write-hint { font-size:11px; color:var(--text-tertiary); }
    /* 작성기 — 기호를 몰라도 단추로 다 되게. */
    .c-compose-bar { display:flex; align-items:center; justify-content:space-between; gap:8px; flex-wrap:wrap; }
    .c-fmts { display:flex; gap:4px; flex-wrap:wrap; }
    .c-fmt { padding:4px 9px; border-radius:var(--radius-md); border:1px solid var(--border);
        background:transparent; color:var(--text-secondary); font:inherit; font-size:11px; cursor:pointer; }
    .c-fmt:hover { color:var(--text-primary); border-color:var(--accent); }
    .c-modes { display:flex; gap:2px; }
    .c-mode { padding:4px 10px; border:0; background:none; border-radius:var(--radius-md);
        color:var(--text-tertiary); font:inherit; font-size:11px; cursor:pointer; }
    .c-mode[data-on="1"] { color:var(--text-primary); font-weight:700; background:var(--bg-tertiary); }
    .c-preview { min-height:110px; padding:10px 12px; border:1px dashed var(--border);
        border-radius:var(--radius-md); background:var(--bg-primary); }

    /* 서식 있는 글 — 본문·답글·미리보기가 같은 모양을 쓴다. */
    .md { white-space:normal; }
    .md p { margin:0 0 10px; }
    .md p:last-child { margin-bottom:0; }
    .md h3, .md h4, .md h5 { margin:16px 0 8px; color:var(--text-primary); }
    .md h3 { font-size:18px; } .md h4 { font-size:16px; } .md h5 { font-size:14px; }
    .md ul, .md ol { margin:0 0 10px; padding-left:22px; }
    .md li { margin:2px 0; }
    .md blockquote { margin:0 0 10px; padding:6px 12px; border-left:3px solid var(--accent);
        background:var(--bg-tertiary); color:var(--text-secondary); }
    .md code { padding:1px 5px; border-radius:4px; background:var(--bg-tertiary);
        font-family:var(--font-mono, monospace); font-size:.92em; }
    .md pre { margin:0 0 10px; padding:12px 14px; border-radius:var(--radius-md);
        background:var(--bg-tertiary); overflow-x:auto; }
    .md pre code { padding:0; background:none; }
    .md hr { border:0; border-top:1px solid var(--border); margin:14px 0; }
    .md a { color:var(--accent); }
    .c-signin { display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:space-between;
        padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-lg);
        background:var(--bg-secondary); margin-bottom:18px; }
    .c-signin p { margin:0; color:var(--text-secondary); font-size:var(--font-size-sm); }

    /* 커뮤니티 홈 — 아카의 「베스트 라이브」 자리를 본떴다. 갤러리 목록만 있으면 「지금 뭐가
       오가나」가 안 보이고, 사람은 빈 곳으로 읽는다. 반응이 모인 글과 새 글을 먼저 보여 준다. */
    .c-feeds { display:grid; grid-template-columns:repeat(auto-fit, minmax(300px, 1fr)); gap:14px; margin-bottom:22px; }
    .c-feed h3 { margin:0 0 8px; font-size:var(--font-size-xs); color:var(--text-secondary); font-weight:700; }
    .c-feed-rows { border:1px solid var(--border); border-radius:var(--radius-lg);
        background:var(--bg-secondary); overflow:hidden; }
    .c-feed-row { display:flex; align-items:center; gap:7px; width:100%; padding:8px 12px;
        background:none; border:0; border-top:1px solid var(--border); cursor:pointer; font:inherit;
        text-align:left; font-size:var(--font-size-xs); }
    .c-feed-row:first-child { border-top:0; }
    .c-feed-row:hover { background:var(--bg-tertiary); }
    .c-feed-gal { flex:0 0 auto; padding:1px 7px; border-radius:999px; background:var(--accent-dim);
        color:var(--accent); font-size:10px; }
    .c-feed-tag { flex:0 0 auto; font-size:10px; color:var(--text-tertiary); }
    .c-feed-title { flex:1; min-width:0; color:var(--text-primary);
        overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .c-feed-row:hover .c-feed-title { color:var(--accent); }
    .c-feed-meta { flex:0 0 auto; font-size:10px; color:var(--text-tertiary); }
    .c-feed-empty { margin:0; padding:18px 12px; font-size:var(--font-size-xs); color:var(--text-tertiary); }
    .c-gal-title { margin:0; font-size:var(--font-size-xs); color:var(--text-secondary); font-weight:700; }

    /* 이슈식 갤러리 (깃허브 이슈처럼) — 번호와 상태가 늘 붙어 다닌다. */
    .c-seq { color:var(--text-tertiary); font-weight:700; margin-right:2px; }
    .c-tag[data-status="planned"] { color:#a16207; border-color:rgba(161,98,7,.4); }
    .c-tag[data-status="done"] { color:#15803d; border-color:rgba(21,128,61,.4); }
    .c-tag[data-status="declined"] { color:var(--text-tertiary); }
    html[data-theme="dark"] .c-tag[data-status="planned"] { color:#fcd34d; border-color:rgba(252,211,77,.4); }
    html[data-theme="dark"] .c-tag[data-status="done"] { color:#86efac; border-color:rgba(134,239,172,.4); }

    /* 닫힌 글의 자국 — 「언제·누가·왜」. 없으면 닫힌 글이 사라진 글처럼 읽힌다. */
    .c-closed { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px;
        margin:12px 0 0; padding:10px 14px; border-radius:var(--radius-lg);
        border:1px solid var(--border); background:var(--bg-secondary);
        font-size:var(--font-size-xs); color:var(--text-secondary); }
    .c-closed b { color:var(--text-primary); }
    .c-closed[data-status="done"] b { color:#15803d; }
    html[data-theme="dark"] .c-closed[data-status="done"] b { color:#86efac; }
    .c-closed-when { color:var(--text-tertiary); font-size:11px; }

    /* 상태 바꾸는 줄 (갤러리 주인). */
    .c-statusbar { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin-top:12px; }
    .c-statusbar select { flex:0 0 auto; }
    .c-statusbar input { flex:1 1 220px; min-width:0; }

    /* 고르는 줄 — 무엇을 고르는 줄인지 왼쪽에 적는다. 안 적으면 갤러리와 말머리가 똑같아 보인다. */
    .c-picker { display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
    .c-picker-label { flex:0 0 auto; font-size:11px; color:var(--text-tertiary); font-weight:700;
        min-width:40px; }
    .c-picker .c-boards, .c-picker .c-tags { margin-bottom:0; }

    /* 말머리 — 갤러리 안에서 글을 한 번 더 가른다 (디시·아카의 말머리). */
    .c-tags { display:flex; gap:5px; flex-wrap:wrap; margin-bottom:10px; }
    .c-tagchip { padding:4px 10px; border-radius:var(--radius-md); border:1px solid var(--border);
        background:transparent; color:var(--text-tertiary); font:inherit; font-size:11px; cursor:pointer; }
    .c-tagchip:hover { color:var(--text-primary); }
    .c-tagchip[data-on="1"] { border-color:var(--accent); color:var(--accent); }
    .c-headword { flex:0 0 auto; color:var(--text-tertiary); font-size:11px; }
    .c-write select { padding:8px 10px; border-radius:var(--radius-md); border:1px solid var(--border);
        background:var(--bg-primary); color:var(--text-primary); font:inherit; }

    /* 갤러리 목록 — 어느 갤러리가 살아 있나. 글 수만으로는 모른다, 마지막 글이 있어야 안다. */
    .c-galleries { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:10px; }
    .c-gal { display:flex; flex-direction:column; gap:4px; padding:14px 16px; text-align:left;
        border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--bg-secondary);
        cursor:pointer; font:inherit; }
    .c-gal:hover { border-color:var(--accent); }
    .c-gal-name { display:flex; align-items:baseline; gap:8px; }
    .c-gal-name b { font-size:var(--font-size-sm); color:var(--text-primary); }
    .c-gal-name em { font-style:normal; font-family:monospace; font-size:11px; color:var(--text-tertiary); }
    .c-gal-desc { font-size:11px; color:var(--text-tertiary); }
    .c-gal-last { margin-top:6px; padding-top:6px; border-top:1px solid var(--border);
        font-size:11px; color:var(--text-secondary); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .c-gal-quiet { color:var(--text-tertiary); }
    .c-gal-wrap { position:relative; }
    .c-gal-wrap .c-gal { width:100%; }
    .c-gal-del { position:absolute; top:8px; right:8px; width:20px; height:20px; line-height:1;
        border:1px solid var(--border); border-radius:50%; background:var(--bg-primary);
        color:var(--text-tertiary); cursor:pointer; font-size:12px; }
    .c-gal-del:hover { color:var(--accent); border-color:var(--accent); }

    /* 갤러리 안 — 여기가 어딘지가 제일 크게 보여야 한다. */
    .c-gal-head { margin-bottom:14px; }
    .c-gal-head h2 { margin:6px 0 2px; font-size:24px; color:var(--text-primary); }
    .c-gal-head p { margin:0; font-size:var(--font-size-xs); color:var(--text-secondary); }

    /* 목록 — 국내 게시판(디시·아카) 골격: 번호·제목·글쓴이·날짜·조회·추천이 한 줄에 선다.
       조밀해야 한 화면에 많이 들어오고, 그래야 「사람이 오가는 곳」으로 읽힌다. */
    .c-table { width:100%; border-collapse:collapse; font-size:var(--font-size-xs); }
    .c-table thead th { padding:7px 6px; border-top:2px solid var(--text-tertiary);
        border-bottom:1px solid var(--border); color:var(--text-tertiary); font-weight:600;
        font-size:11px; text-align:center; white-space:nowrap; }
    .c-table thead th.c-th-title { text-align:left; padding-left:10px; }
    .c-table tbody td { padding:6px; border-bottom:1px solid var(--border);
        color:var(--text-secondary); text-align:center; white-space:nowrap; }
    .c-table tbody tr:hover td { background:var(--bg-secondary); }
    .c-table tr[data-pinned="1"] td { background:var(--accent-dim); }
    .c-num { width:52px; font-family:monospace; font-size:11px; color:var(--text-tertiary); }
    .c-td-title { text-align:left !important; width:auto; padding-left:10px !important; max-width:0; }
    .c-title-btn { background:none; border:0; padding:0; font:inherit; cursor:pointer;
        color:var(--text-primary); display:flex; align-items:center; gap:6px; width:100%; min-width:0; }
    .c-title-btn:hover .t { color:var(--accent); text-decoration:underline; }
    .c-title-btn .t { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .c-cmt { flex:0 0 auto; color:var(--accent); font-weight:700; font-size:11px; }
    .c-who { width:130px; }
    .c-who span { display:inline-flex; align-items:center; gap:5px; max-width:100%; }
    .c-who b { font-weight:400; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .c-when { width:66px; font-size:11px; color:var(--text-tertiary); }
    .c-cnt { width:52px; font-family:monospace; font-size:11px; }
    .c-cnt[data-hot="1"] { color:var(--accent); font-weight:700; }
    .c-face { width:16px; height:16px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
    .c-face-blank { width:16px; height:16px; border-radius:50%; background:var(--bg-tertiary); flex:0 0 auto; display:inline-block; }
    /* 빈 갤러리 — 「없습니다」로 끝내면 닫힌 곳으로 읽힌다. 무엇을 쓰면 되는지 보여 준다. */
    .c-invite { display:flex; flex-direction:column; align-items:center; gap:6px; padding:8px 4px; }
    .c-invite-head { margin:0; font-size:var(--font-size-sm); color:var(--text-primary); }
    .c-invite-sub { margin:8px 0 0; font-size:11px; color:var(--text-tertiary); }
    .c-invite-list { margin:0; padding:0; list-style:none; display:flex; flex-wrap:wrap;
        justify-content:center; gap:6px; }
    .c-invite-list li { padding:4px 12px; border:1px dashed var(--border); border-radius:999px;
        font-size:11px; color:var(--text-secondary); }
    .c-invite .c-newbtn { margin-top:12px; }
    .c-codeform { display:flex; gap:6px; justify-content:center; margin-top:10px; flex-wrap:wrap; }
    .c-codeform input { flex:0 1 200px; min-width:0; text-transform:uppercase; letter-spacing:.06em; }
    .c-empty-row { padding:32px 4px; color:var(--text-secondary); font-size:var(--font-size-sm); text-align:center; }

    /* 아래 줄 — 검색과 페이지. */
    .c-foot { display:flex; align-items:center; justify-content:space-between; gap:10px;
        margin-top:14px; flex-wrap:wrap; }
    .c-pages { display:flex; gap:2px; }
    .c-page { min-width:26px; padding:4px 7px; border:1px solid var(--border); border-radius:var(--radius-md);
        background:transparent; color:var(--text-secondary); font:inherit; font-size:11px; cursor:pointer; }
    .c-page[data-on="1"] { border-color:var(--accent); color:var(--accent); font-weight:700; }
    .c-page[disabled] { opacity:.4; cursor:default; }
    .c-search { display:flex; gap:6px; }
    .c-search input { padding:5px 10px; border-radius:var(--radius-md); border:1px solid var(--border);
        background:var(--bg-secondary); color:var(--text-primary); font:inherit; font-size:11px; width:150px; }

    .c-imgbar { display:flex; align-items:center; gap:8px; }
    .c-search-all { margin-bottom:16px; }
    .c-search-all input { width:100%; padding:9px 12px; font-size:var(--font-size-xs); }
    .md img { max-width:100%; height:auto; border-radius:var(--radius-md); display:block; margin:8px 0; }

    /* 폰 — 표를 그대로 두면 칸이 눌려 아무것도 안 읽힌다. 줄 하나로 접는다. */
    @media (max-width: 620px) {
        .c-table thead { display:none; }
        .c-table, .c-table tbody, .c-table tr, .c-table td { display:block; width:auto; }
        .c-table tbody tr { padding:10px 2px; border-bottom:1px solid var(--border); }
        .c-table tbody td { border:0; padding:0; text-align:left; white-space:normal; }
        .c-num { display:none; }
        .c-td-title { padding-left:0 !important; max-width:none; }
        .c-title-btn .t { white-space:normal; }
        .c-who, .c-when, .c-cnt { display:inline-block; font-size:11px; color:var(--text-tertiary); margin-top:4px; }
        .c-who { width:auto; margin-right:8px; }
        .c-when::before, .c-cnt::before { content:'· '; }
        .c-when, .c-cnt { width:auto; margin-right:6px; }
    }

    /* 글 하나 */
    .c-crumb { margin-bottom:12px; }
    .c-post { border:1px solid var(--border); border-radius:var(--radius-lg);
        background:var(--bg-secondary); padding:20px; }
    .c-post-title { margin:0; font-size:21px; line-height:1.4; color:var(--text-primary); }
    .c-dot::before { content:'·'; margin-right:8px; }
    .c-post-meta { display:flex; align-items:center; gap:8px; margin-top:10px;
        font-size:11px; color:var(--text-tertiary); flex-wrap:wrap; }
    .c-post-body { margin-top:16px; white-space:pre-wrap; word-break:break-word; color:var(--text-primary); }
    .c-actions { display:flex; gap:8px; margin-top:18px; flex-wrap:wrap; }
    .c-act { padding:7px 14px; border-radius:999px; border:1px solid var(--border); background:transparent;
        color:var(--text-secondary); font:inherit; font-size:var(--font-size-xs); cursor:pointer; }
    .c-act[data-on="1"] { border-color:var(--accent); color:var(--accent); }
    .c-act[disabled] { cursor:default; opacity:.55; }

    .c-section { margin:26px 0 10px; font-size:var(--font-size-sm); color:var(--text-primary); }
    ul.c-replies { list-style:none; margin:0 0 18px; padding:0; display:flex; flex-direction:column; gap:8px; }
    .c-reply { border:1px solid var(--border); border-radius:var(--radius-md); padding:10px 14px;
        background:var(--bg-secondary); }
    .c-reply[data-child="1"] { margin-left:28px; background:var(--bg-tertiary); }
    .c-reply[data-owner="1"] { border-color:var(--accent); }
    .c-reply-head { display:flex; align-items:center; gap:6px; font-size:11px; color:var(--text-tertiary); }
    .c-reply-body { margin-top:5px; white-space:pre-wrap; word-break:break-word;
        color:var(--text-primary); font-size:var(--font-size-sm); }
    .c-reply-foot { margin-top:6px; display:flex; gap:10px; }
    .c-linkbtn { background:none; border:none; padding:0; color:var(--text-tertiary); font:inherit;
        font-size:11px; text-decoration:underline; cursor:pointer; }
    .c-linkbtn:hover { color:var(--text-primary); }
    .c-linkbtn[data-on="1"] { color:var(--accent); }

    .c-tag { display:inline-block; padding:1px 8px; border-radius:999px; border:1px solid var(--border);
        font-size:10px; color:var(--text-secondary); vertical-align:middle; }
    .c-empty { padding:48px 0; text-align:center; color:var(--text-secondary); }
    .c-empty h3 { color:var(--text-primary); font-size:18px; margin:0 0 8px; }
    .c-empty p { margin:4px 0; }
    .c-err-actions { margin:18px 0 10px; }
    .c-err-detail { margin-top:10px; font-size:11px; color:var(--text-tertiary); }
    .c-err-detail summary { cursor:pointer; }
    .c-err-detail code { display:block; margin:8px auto 6px; padding:8px 10px; max-width:520px;
        background:var(--bg-tertiary); border-radius:var(--radius-md); word-break:break-all; text-align:left; }

    @media (max-width: 620px) {
        .c-row { flex-wrap:wrap; }
        .c-reply[data-child="1"] { margin-left:14px; }
    }