/* 협회 안내 (association) — additions to static/css/site.css; replaces the prototype's inline styles.
   Colors only through tokens (static/css/tokens.css); one light palette (ADR-0016 decision
   10), and forced-colors keeps every boundary.
   Shared pieces (.plain-list, .pager, .page-head .head-end, a.tab) live in site.css.
   Motion: press feedback ≤160ms ease-out; hover only on fine pointers; site.css zeroes
   every transition for prefers-reduced-motion and the "움직임 멈추기" setting. */

/* ── /about/: MISSION card (prototype V.about) ── */
/* The 1px border matches the --deep card; forced-colors gives it a visible line below. */
.card.mission{background:var(--deep);color:var(--on-deep);border:1px solid var(--deep);gap:18px}
.card.mission .eyebrow{color:var(--on-deep-2)}
.card.mission .mission-s{color:var(--on-deep);font-family:var(--serif);font-size:1.45rem;font-weight:500;line-height:1.35;letter-spacing:-.03em;text-wrap:balance}
.card.mission dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 16px;color:var(--on-deep-2);font-size:.95rem}
.card.mission dd{margin:0;color:var(--on-deep);font-weight:600;overflow-wrap:anywhere}

/* ── /about/: 주요 사업 — 3 + 3 on wide screens (auto-fill gave 4 + 2) ── */
@media (min-width:981px){.programs .cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
/* A card with a link: the title link covers the card; one hover effect; focus ring on the card. */
.programs .card.is-link{position:relative;transition:border-color 160ms ease-out}
.programs .stretch{color:inherit;text-decoration:none}
.programs .stretch::after{content:"";position:absolute;inset:0;border-radius:inherit}
.programs .stretch:focus-visible{outline:none;box-shadow:none}
.programs .stretch:focus-visible::after{outline:3px solid var(--focus);outline-offset:3px}
.programs .card.is-link h3::after{content:" →";content:" →" / "";color:var(--muted)}
@media (hover:hover) and (pointer:fine){.programs .card.is-link:hover{border-color:var(--ink)}}

/* ── The reading column (ADR-0022, feedback 2026-10-20) ──
   Every text page here (안내, 인사말, 조직도, 연혁, 공지, 법적 문서) is one column in the middle of
   the page. 46em of the prose text (1.08rem; site.css .prose was 38em, left): about 50 Hangul
   syllables a line at the body size, measured at 1280px (tests/test_browser.py); wide enough
   to read as a page, short enough to find the next line (Korean text sets 40-50 syllables a
   line). The legal documents (set at 1rem) fill the same column. The column is the page
   width on a phone, and its text never overflows (rt: overflow-wrap). The width is the
   --read-w token (tokens.css), the same as a 월간지 글's. */
.read{max-width:var(--read-w);margin-inline:auto}
.read .prose{max-width:none}
/* 협회 조직도: the chart is a photo in the body; this opens it at its full size (a phone
   reader zooms the file itself instead of squinting at the page). */
.chart-open{display:flex;flex-wrap:wrap;gap:4px 24px;margin-top:20px;font-family:var(--sans)}

/* ── /about/: the link to the chart at the end of the text, then the MISSION card ── */
.about-more{margin-top:1.6em}
.read .card.mission{margin-top:clamp(32px,5vw,56px)}

/* ── /about/: 찾아오는 길 ── */
.box dd{margin:0;overflow-wrap:anywhere}
.box dd a{text-underline-offset:3px}
.box dd .map{display:flex;align-items:center;width:max-content;max-width:100%;min-height:var(--target-min);font-weight:500;font-size:.9375rem} /* 15px floor (site.css) */
/* One rhythm down the card: a phone number and an address link are 44px targets, so every
   value is a 44px row with its words centred in it (the plain ones were 24px high and the
   rows under and over them uneven), and a label stands level with its value. */
.read .box dl{align-items:center}
.read .box dt{align-self:center}
.read .box dd{display:flex;flex-wrap:wrap;align-items:center;column-gap:.5em;min-height:var(--target-min)}
/* Narrowest screens (320px = 1280px at 400% zoom) and the largest text size: each label sits
   above its value instead of a squeezed label column. Wider phones keep the prototype's two
   columns; overflow-wrap:anywhere above already stops a long value from crushing the label. */
@media (max-width:360px){
  .box dl,.card.mission dl{grid-template-columns:minmax(0,1fr);row-gap:2px}
  .box dd+dt,.card.mission dd+dt{margin-top:8px}
}
:root[data-font-scale="xlarge"] :is(.box,.card.mission) dl{grid-template-columns:minmax(0,1fr);row-gap:2px}
:root[data-font-scale="xlarge"] :is(.box,.card.mission) dd+dt{margin-top:8px}

/* ── /about/history/: year headings and a rail that stays on small screens ── */
.timeline .y{margin:0;letter-spacing:0}
.timeline::before{background:none;width:0;border-left:2px solid var(--line)}
@media (max-width:560px){
  .timeline{padding-left:22px}
  .timeline::before{display:block;left:6px}
  /* li starts at the ol padding (22px); the 14px dot centres on the 2px rail at 6–8px. */
  .timeline li::before{display:block;left:-22px}
}
@media (forced-colors:active){.timeline li::before{border:4px solid CanvasText}}

/* ── /news/ ── */
.acc .permalink{margin-top:1em;font-size:1rem}
/* An item's photos and files are on its own page (ADR-0015): the line right before the
   permalink says so. */
.acc .attached{margin-top:1em;font-family:var(--sans);font-weight:600}
.acc .attached+.permalink{margin-top:0}
/* The link alone is a small text target: give it the shared minimum height (WCAG 2.5.8). */
.acc .permalink a,.acc .attached a{display:inline-flex;align-items:center;min-height:var(--target-min)}
/* The shared empty state sits where the first row would: same inset as a summary row. */
.acc>.empty-state{padding:20px 4px}
#news-list:focus{outline:none}
#news-list:focus-visible{outline:3px solid var(--focus);outline-offset:3px}
.acc summary .pm{transition:transform 160ms cubic-bezier(.23,1,.32,1),scale 100ms ease-out}
.acc summary:active .pm{scale:.94}
@media (hover:hover) and (pointer:fine){.acc summary:hover .t{text-decoration:underline;text-underline-offset:4px}}
/* While htmx loads another page, the old list dims (htmx-request is on the clicked link). */
#news-region:has(.htmx-request) .acc{opacity:.6;transition:opacity 120ms ease-out}
/* A row is date, title and +/− (no category chip: ADR-0022); site.css lays four columns out
   (and, below 561px, puts the date on its own line, which still fits three children). */
@media (min-width:561px){#news-list summary{grid-template-columns:var(--acc-d) minmax(0,1fr) auto}}

/* ── detail & editable pages ── */
.news-meta{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin-bottom:1.6em;font-family:var(--sans);font-size:.9375rem;color:var(--muted)} /* 15px floor (site.css) */
.draft-notice{margin-bottom:1.6em;font-family:var(--sans)}
.page-meta{margin-top:2.4em;font-family:var(--sans)}
.versions{margin-top:1em;font-family:var(--sans);font-size:.95rem;line-height:1.75}
.versions summary{cursor:pointer;font-weight:600;min-height:var(--target-min);display:flex;align-items:center}
.versions ul{margin:.4em 0 0;padding-left:1.2em}
.versions li+li{margin-top:.3em}
.back{margin-top:40px}
/* 협회 공지: the next step a reader can take (staff-set button, or the 공모 contact line). */
.news-next{margin-top:40px;font-family:var(--sans)}
.news-next+.back{margin-top:24px}
/* The sentence and the two contacts sit on one centre line: each contact is a 44px row (its
   link is the 44px box), and the sentence, a text line of its own, hung at the top of that row
   (9px above the links' text). Each item centres its own label and link, so their text shares
   the line whatever the row's height. */
.news-contact{display:flex;flex-wrap:wrap;align-items:center;gap:4px 16px;line-height:1.75;overflow-wrap:anywhere}
.news-contact>span{display:inline-flex;align-items:center;column-gap:.3em}
.news-contact a{display:inline-flex;align-items:center;min-height:var(--target-min);text-underline-offset:3px}

/* Windows High Contrast: `.card.mission` (later, more specific) would beat site.css's `.card` border. */
@media (forced-colors:active){.card.mission{border:1px solid CanvasText}}


/* ── legal documents (legal_page.html, page_history.html; apps/association/legal) ──
   The body is sanitised Markdown: section h2/h3, captioned tables with th[scope],
   definition lists for the summary and the glossary. Tables keep table semantics
   (no display:block) and wrap their text, so they reflow at 320px. */
.legal-doc{font-family:var(--sans);font-weight:400;font-size:1rem;line-height:1.85}
.legal-doc h2{font-family:var(--serif);font-size:1.35rem;line-height:1.4;margin:2em 0 .6em;scroll-margin-top:96px}
.legal-doc h3{font-family:var(--sans);font-size:1.1rem;font-weight:700;margin:1.6em 0 .5em;scroll-margin-top:96px}
.legal-doc :is(p,ul,ol,dl,table){margin:0 0 1em}
.legal-doc :is(ul,ol){padding-left:1.4em}
.legal-doc li+li{margin-top:.3em}
.legal-doc dl{display:grid;grid-template-columns:minmax(6em,auto) minmax(0,1fr);gap:8px 16px}
.legal-doc dt{font-weight:700}
.legal-doc dd{margin:0}
.legal-doc table{width:100%;border-collapse:collapse;font-size:.92rem;line-height:1.6;overflow-wrap:anywhere}
.legal-doc caption{text-align:left;font-weight:700;padding:0 0 8px;color:var(--ink)}
.legal-doc :is(th,td){border:1px solid var(--line-strong);padding:8px 10px;text-align:left;vertical-align:top}
.legal-doc th{background:var(--sunk);font-weight:700}
.legal-doc code{font-family:var(--mono);font-size:.9em;overflow-wrap:anywhere}
.legal-doc a{text-underline-offset:3px;overflow-wrap:anywhere}
/* A link that is a table cell's only element (the notice table's "제17조 제1항") is not
   inside a sentence, so it needs the 24px target (WCAG 2.5.8): 81×21px before. */
.legal-doc td>a:only-child{display:inline-block;min-height:24px;padding-block:2px}
/* Phones: the contents list and a link that is a table cell's only element are 44px targets
   (the text a reader taps to jump or to open a clause), and the tables' text is 15px (the
   site's floor for information, site.css); a sentence's own links stay as inline as they are. */
@media (max-width:640px){
  .legal-doc li>a:only-child,.legal-doc td>a:only-child{display:inline-flex;align-items:center;min-height:var(--target-min);min-width:var(--target-min);padding-block:0}
  .legal-doc :is(table,code){font-size:.9375rem}
}
.legal-upcoming{margin-bottom:1.6em}
/* Back-office previews only: a value still missing (never published). */
.legal-doc .legal-missing{background:var(--mark);color:var(--ink);padding:0 .2em;border-radius:3px}
@media (max-width:420px){.legal-doc dl{grid-template-columns:minmax(0,1fr);gap:0}.legal-doc dd{margin-bottom:10px}}
@media (forced-colors:active){.legal-doc .legal-missing{border:1px solid CanvasText}.legal-doc :is(th,td){border-color:CanvasText}}