/* 협회 질문 · 독자의 답장 — additions to site.css (no inline styles: CSP style-src 'self').
   Colours come only from tokens.css (one light palette; forced-colors kept, ADR-0016).
   Shared rules (.plain-list, .pager, a.tab, .tab[aria-current], .page-head .head-end,
   .check on touch screens, .btn.danger, --line-strong borders) live in site.css and are not repeated here. */
.ico{flex-shrink:0}

/* ── Board ── */
.plaza-toolbar .search{flex:0 1 360px}
.plaza-count{font-variant-numeric:tabular-nums;white-space:nowrap}
#plaza-list:focus-visible,.plaza-empty:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.board th.r{text-align:right}
.board .post-link{font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.board .post-link:hover,.board .post-link:focus-visible{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px}
.board tr.measure td{color:var(--muted)}
/* The whole row opens the post (Fitts): the title link is stretched over it. The link's
   name stays the title; the badge and the comment count sit outside it. */
.plaza-board tbody tr{position:relative}
.plaza-board .post-link::after{content:"";position:absolute;inset:0}
.plaza-board .post-link:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
@media (hover:hover) and (pointer:fine){
  .plaza-board tbody tr:not(.pin):not(.measure):hover td{background:var(--sunk)}
}
/* Press feedback for every pointer, touch included (PAR-16): the row darkens while the
   stretched link is held. Colour only, no transform (a moving table row reads as a glitch). */
.plaza-board tbody tr:has(.post-link:active) td,.own-board tbody tr:has(.own-link:active) td{background:var(--sunk)}
/* While htmx loads another list (site.js sets aria-busy on the region), the old one
   recedes after a short delay, so a fast answer never flickers (PAR-15; as magazine's
   #issue-view). */
#plaza-region[aria-busy="true"] :is(.plaza-board,.plaza-empty){opacity:.6;cursor:progress}
@media (prefers-reduced-motion:no-preference){
  :root:not([data-motion="off"]) :is(.plaza-board,.plaza-empty){transition:opacity 150ms ease-out}
  :root:not([data-motion="off"]) #plaza-region[aria-busy="true"] :is(.plaza-board,.plaza-empty){transition-delay:120ms}
}
.pin-k{display:none}
.cmt-count{font-family:var(--mono);font-size:.84rem;color:var(--muted)}
/* 글 n개 and 글쓰기 share the row above the search (PAR-03/04): 글쓰기 comes before the
   search in reading and switch order, and on a phone the row costs no more height than
   the old toolbar. */
.plaza-top{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;justify-content:space-between;margin-bottom:14px}
.plaza-top .plaza-count{margin:0}
.members-badge{display:inline-block;font-size:.74rem;font-weight:700;padding:1px 8px;border-radius:999px;border:1.5px solid var(--line-strong);color:var(--ink-2);white-space:nowrap;vertical-align:.1em}
.measure-note{font-style:italic}
.empty-actions{display:flex;flex-wrap:wrap;gap:8px}
@media (forced-colors:active){
  .plaza-board tr.pin td:first-child{box-shadow:inset 4px 0 0 Highlight}
  .members-badge{border-color:CanvasText}
}

/* Phones: one row = one block. The title comes first and wraps; 글쓴이 · 날짜 · 조회 n
   follow on the next line (no separator before its first cell; a row under a measure
   starts it with the date); the 번호 column goes (title and date identify a post).
   Table semantics stay: every cell keeps its column header for screen readers, and the
   visible separators and "조회" have empty alternative text (nothing is read twice).
   The search takes the full width (no category tabs, ADR-0017 decision 3). */
@media (max-width:640px){
  /* PAR-03: on a phone the board itself comes first; the one-line description of the
     plaza is left to wider screens (the h1 and the sub-nav already say where you are). */
  body:has(#plaza-region) .page-head .lead{display:none}
  /* PAR-04: 글쓰기 (page head action) shares the h1's line, so the head is no taller than
     before and two rows of the board stay in the first screen. It wraps under a long h1
     or very large text. */
  body:has(#plaza-region) .page-head :is(h1,.head-action){display:inline-block;vertical-align:middle}
  body:has(#plaza-region) .page-head .head-action{margin:14px 0 0 12px}
  .page:has(>#plaza-region){padding-top:24px}
  .plaza-top{margin-bottom:10px}
  .plaza-toolbar{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;margin-bottom:16px}
  .plaza-toolbar .search{max-width:none}
  .plaza-board thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .plaza-board tbody tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 0;padding:14px 4px;border-bottom:1px solid var(--line)}
  .plaza-board tbody tr.pin{background:var(--yellow-soft)}
  /* Author, date, views and the chips at the site's 15px floor for information (site.css). */
  .plaza-board tbody td{display:block;padding:0;border:0;background:none;font-size:.9375rem;color:var(--muted)}
  .plaza-board tbody tr:has(.post-link:active){background:var(--sunk)}
  .plaza-board td.c-n{display:none}
  .plaza-board td.c-title{order:-1;flex:1 0 100%;font-size:1rem;color:var(--ink);margin-bottom:2px}
  .plaza-board td.c-author+td.c-date::before{content:"·";content:"·" / "";margin-inline:.45em}
  .plaza-board td.c-views::before{content:"· 조회 ";content:"· 조회 " / "";margin-left:.45em}
  .plaza-board td.c-views,.plaza-board td.c-date{text-align:left;font-family:inherit;font-size:.9375rem}
  .plaza-board .cat{font-size:.9375rem;padding:1px 9px}
  .pin-k{display:inline}
  .members-badge,.cmt-count{font-size:.9375rem}
}
/* The field keeps room for a query (at least 10 characters) next to 찾기; below about
   260px (a zoomed or very narrow window) 찾기 drops under the field instead of pushing
   it out of the page (PAR-23). */
.plaza-toolbar .search input{flex:1 1 auto;min-width:10ch}
.plaza-toolbar .search button{flex:none} /* 찾기 never shrinks into a broken word */
@media (max-width:260px){
  .plaza-toolbar .search{flex-wrap:wrap}
  .plaza-toolbar .search input{min-width:0;flex-basis:100%}
}

/* ── Post ── */
/* One reading column: the post, its comments and 이전/다음 share one right edge. */
.reading-page>*{max-width:46em}
.post-meta{display:flex;flex-wrap:wrap;gap:6px 22px;margin:0 0 28px;padding-bottom:18px;border-bottom:1px solid var(--line);font-size:.93rem}
.post-meta div{display:flex;gap:8px;align-items:baseline}
.post-meta dt{color:var(--muted)}
.post-meta dd{margin:0;font-weight:600;font-variant-numeric:tabular-nums}
.post-body{line-height:1.9;color:var(--ink-2);overflow-wrap:anywhere}
.post-body p+p,.cmt-body p+p{margin-top:1em}
.post-body a,.cmt-body a{overflow-wrap:anywhere}
.post-actions{display:flex;gap:8px;margin-top:28px}
.post-nav{margin-top:48px;border-top:2px solid var(--ink)}
.post-nav li{display:flex;gap:14px;padding:14px 4px;border-bottom:1px solid var(--line)}
.post-nav-k{flex-shrink:0;font-size:.86rem;color:var(--muted);min-width:4em}
.post-nav a{font-weight:600;text-decoration:none;overflow-wrap:anywhere}
.post-nav a:hover{text-decoration:underline}
.back{margin-top:28px}
.gate{display:grid;gap:10px;max-width:40em;padding:24px;border-radius:var(--r);background:var(--sunk);border:1px solid var(--line)}
.gate-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}

/* ── Comments (also on the literature work page) ── */
.cmt-title{font-size:1.4rem;margin-bottom:10px}
/* The count in the body font, in parentheses (PAR-24). */
.cmt-total,.own-count{font-family:var(--sans);font-weight:400;font-size:.95rem;color:var(--muted);font-variant-numeric:tabular-nums}
.tab .own-count{color:inherit} /* on a selected (dark) tab the muted grey would vanish */
/* 글쓴이 / 작가 after the name of a reply by the one who wrote the post or the work
   (RD-18, PAR-21): a word, with a border that survives forced colours. */
.cmt-badge{padding:1px 9px;font-size:.78rem;font-weight:700;border:1.5px solid var(--line-strong);color:var(--ink-2)}
@media (forced-colors:active){.cmt-badge{border-color:CanvasText}}
.cmt-meta{display:flex;flex-wrap:wrap;gap:4px 10px;align-items:baseline}
.cmt-body{color:var(--ink-2);margin-top:4px;overflow-wrap:anywhere}
/* 신고 / 지우기: last on the name line, muted, underlined only on fine-pointer hover or
   keyboard focus. The hit area is the 44px floor (--target-min); the negative block
   margin gives back the extra height, so the name line is not taller than its text. */
.cmt-act{display:inline-flex;align-items:center;margin-inline-start:auto;min-height:var(--target-min);padding:0 6px;margin-block:calc((1lh - var(--target-min)) / 2);margin-inline-end:-6px;font-size:.86rem;color:var(--muted);text-decoration:none;border-radius:8px}
.cmt-act:focus-visible{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){
  .cmt-act:hover{color:var(--ink);text-decoration:underline;text-underline-offset:3px}
}
.cmt-measure p{color:var(--muted);align-self:center}
/* Reply prompt (prototype: help line, then a dark 답장 남기기 button). */
.cmt-cta{display:grid;gap:10px;justify-items:start;margin-top:14px}
.cmt-cta[hidden]{display:none}
.cmt-slot:not(:empty){margin-top:14px}
/* The reply form's height (measured 24.4–26.3rem at 390 and 1280 px, every text size):
   community.js reserves it while the form loads in place, so a slow answer does not push
   the replies below (D11). */
.cmt-slot{--cmt-form-h:25.5rem}
.login-needed:focus:not(:focus-visible){outline:none}
/* The reply just posted (or linked to) is tinted, then fades, so the eye finds it.
   Replies stay square (a radius would bend the border-top separator at both ends); only
   the tinted one is rounded, and it squares off as the tint fades. */
/* Anchored replies and the section clear the floating header (--hh, site.css). */
.cmt,#comments{scroll-margin-top:calc(var(--hh,82px) + 16px)}
.cmt:focus{outline:none}
.cmt:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.cmt:target{background:var(--yellow-soft);box-shadow:0 0 0 8px var(--yellow-soft);border-radius:12px}
@media (prefers-reduced-motion:no-preference){
  :root:not([data-motion="off"]) .cmt:target{animation:cmt-arrive .3s cubic-bezier(.23,1,.32,1) 2s both}
}
@keyframes cmt-arrive{to{background:transparent;box-shadow:0 0 0 8px transparent;border-radius:0}}
.av[data-tone="poem"]{--gc:var(--c-poem)}
.av[data-tone="novel"]{--gc:var(--c-novel)}
.av[data-tone="verse"]{--gc:var(--c-verse)}
.av[data-tone="essay"]{--gc:var(--c-essay)}
.av[data-tone="etc"]{--gc:var(--c-etc)}
.own-comments ul{display:grid;gap:12px}
.cmt-own{padding:12px 0;border-top:1px solid var(--line)}
/* A quoted reply: a quiet box (no coloured side stripe, PAR-24). */
.cmt-quote{margin:0;padding:14px 18px;border:1px solid var(--line);background:var(--sunk);border-radius:12px;overflow-wrap:anywhere}

/* ── Forms (character count; error summary and messages are in site.css) ── */
/* The page stays a full .wrap, so the form shares the page head's left edge at every
   width; only its content keeps a comfortable line length. */
.narrow-page>*{max-width:52em}
.notice-box{display:grid;gap:6px;padding:14px 18px;border-radius:14px;background:var(--sunk);font-size:1rem}
.choices>div{display:grid;gap:4px}
.choices label{display:flex;gap:10px;align-items:center;min-height:var(--target-min);font-weight:500;cursor:pointer}
.choices input{width:20px;height:20px;flex-shrink:0;accent-color:var(--leaf)}
.check-hint{margin-left:30px}
.char-count{font-variant-numeric:tabular-nums}
.char-count.is-over{font-weight:700;color:var(--ink)}
.char-count.is-over::before{content:"! ";content:"! " / "";color:var(--yellow-ink)}
/* With JS the live count replaces the static limit hint visually (screen readers keep it). */
.is-counting .char-hint{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.notice-field{display:flex;align-items:flex-end}
.post-author-k{font-weight:600;font-size:.92rem}
.post-author-v{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;min-height:var(--target-min)}
.post-author-v a{display:inline-flex;align-items:center;min-height:var(--target-min);font-size:.92rem;color:var(--ink-2)}
.report-target{display:grid;gap:6px}
.report-visitor{display:grid;gap:18px}
.report-mail{gap:8px}
.report-mail-title{font-family:var(--sans);font-size:1rem;font-weight:700}
.report-mail ul{margin:0;padding-left:1.2em;display:grid;gap:2px}
.report-url{overflow-wrap:anywhere}
.restore-done{display:flex;gap:10px;align-items:flex-start}
/* 410 page: the sent text in read-only boxes, laid out like the form it came from. */
.gone-page{display:grid;gap:18px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,4vw,36px)}
.restore-done .ico{margin-top:3px}
.login-needed a{font-weight:700}
button[aria-disabled="true"]{cursor:progress;opacity:.75}

/* ── 내가 쓴 글 (R6-MPS-05) ── The state is a word (never colour alone); a trashed row is
   muted but keeps its 되살리기 button at full strength. Phones stack each row like the
   plaza: content first, then where · date, then the state and the action. */
.own-help{margin-left:auto}
.own-board .c-title{overflow-wrap:anywhere}
.own-board .c-state .help{display:block;font-size:.82rem}
.own-board .c-act{text-align:right;white-space:nowrap}
.own-state{display:inline-block;font-size:.82rem;font-weight:700;padding:2px 9px;border-radius:999px;border:1.5px solid var(--line-strong);color:var(--ink-2);white-space:nowrap}
.own-board tr[data-state="live"] .own-state{border-color:var(--leaf);color:var(--leaf);background:var(--leaf-soft)}
.own-board tr:is([data-state="trash"],[data-state="removed"]) .c-title{color:var(--muted);text-decoration:line-through;text-decoration-thickness:1px}
/* PAR-11: the title opens the item and is stretched over the row (as .post-link on the
   plaza board); the row's own button sits above the stretched link. */
.own-board tbody tr{position:relative}
.own-board .own-link{font-weight:600;text-decoration:none}
.own-board .own-link::after{content:"";position:absolute;inset:0}
.own-board .own-link:hover,.own-board .own-link:focus-visible{text-decoration:underline;text-decoration-color:var(--yellow);text-decoration-thickness:3px}
.own-board .own-link:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.own-board .c-act a{position:relative;z-index:1}
@media (hover:hover) and (pointer:fine){
  .own-board tbody tr:has(.own-link):hover td{background:var(--sunk)}
}
.own-note{margin-top:14px}
@media (forced-colors:active){
  .own-state{border-color:CanvasText}
}
@media (max-width:640px){
  .own-help{margin-left:0}
  .own-board thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .own-board tbody tr{display:flex;flex-wrap:wrap;align-items:center;gap:6px 0;padding:14px 4px;border-bottom:1px solid var(--line)}
  .own-board tbody td,.own-board .c-state .help,.own-state{font-size:.9375rem}
  .own-board tbody td{display:block;padding:0;border:0;background:none;color:var(--muted)}
  .own-board td.c-title{order:-1;flex:1 0 100%;font-size:1rem;color:var(--ink)}
  .own-board tbody tr:has(.own-link:active){background:var(--sunk)}
  .own-board td.c-date{order:1;text-align:left;font-family:inherit}
  .own-board td.c-date::before{content:"·";content:"·" / "";margin-inline:.45em}
  .own-board td.c-state{order:2;flex:1 0 100%;display:flex;flex-wrap:wrap;gap:4px 8px;align-items:center}
  .own-board td.c-state .help{display:inline}
  .own-board td.c-act{order:3;flex:1 0 100%;text-align:left}
  .own-board td.c-act.is-empty [aria-hidden]{display:none} /* no stray dash under the state */
}

/* Photos and files of a post or reply (ADR-0016): the rows sit in the form like a field
   group (media/_attachment_rows.html, whose card classes are the back office's), the
   uploaders above them. Uploading needs JavaScript (each file goes to the upload API and
   becomes a row): without it the uploaders are not offered — the rows already there still
   move and go — and the rows' help says so. */
.attachments-ed{border:1.5px solid var(--line);border-radius:14px;padding:16px;margin:0 0 20px;min-width:0}
.attachments-ed>legend{padding:0 6px;font-weight:700}
.attachments-ed .rows-list{display:grid;gap:12px;margin:12px 0 0}
.attachments-ed .row-set{border:1px solid var(--line);border-radius:12px;padding:12px;margin:0;min-width:0}
.attachments-ed .rc{margin-top:8px}
.attachments-ed .rc-acts{display:flex;gap:8px;flex-wrap:wrap}
.attachments-ed .row-btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--target-min);min-height:var(--target-min);border-radius:12px;border:1.5px solid var(--line-strong);background:var(--surface);color:var(--ink);cursor:pointer;font-size:1.05rem}
.attachments-ed .row-btn:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
html:not(.js) .attachments-ed .att-uploads{display:none}
.cmt-body.rt>:first-child,.post-body.rt>:first-child{margin-top:0}
@media (forced-colors:active){
  .attachments-ed,.attachments-ed .row-set,.attachments-ed .row-btn{border-color:CanvasText}
}
/* Phones: a post's details, 이전/다음 and a reply's actions at the site's 15px floor for
   information (site.css, ADR-0017 decision 13); after their base rules above. */
@media (max-width:640px){.post-meta,.post-nav-k,.cmt-act{font-size:.9375rem}}