/* 협회 안내 (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)}}

/* ── /about/organization/: 협회 조직도 (site.css .org .n draws the prototype's boxes) ──
   One block per level, top first. The line between two levels is a border, so forced
   colours keep it, and --line-strong gives it 3:1 (WCAG 1.4.11). Long names wrap. */
.org{gap:0;margin:0}
.org-lv{display:grid;justify-items:center;width:100%;min-width:0}
.org-lv+.org-lv::before{content:"";width:0;height:24px;margin-block:8px;border-left:2px solid var(--line-strong)}
.org .lv{margin:0;padding:0;max-width:100%}
.org .n{display:block;min-width:8em;max-width:100%;overflow-wrap:anywhere}
/* Phones and the largest text size: a level's boxes stack in one column (no squeezed row). */
@media (max-width:560px){.org .lv{flex-direction:column;align-items:stretch;width:min(100%,22em)}}
:root[data-font-scale="xlarge"] .org .lv{flex-direction:column;align-items:stretch;width:min(100%,24em)}

/* ── /about/: the link to the chart at the end of the text ── */
.about-more{margin-top:1.6em}

/* ── /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) */
/* 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/greeting/ (prototype V.greeting: article + aside) ── */
.greet-h{font-family:var(--serif);font-size:1.5rem;font-weight:700;line-height:1.45;letter-spacing:-.02em;text-wrap:balance;margin:0 0 .8em}
.greet-side{display:grid;gap:14px;align-content:start}
.greet-photo{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover}
/* The icon is .greet-play, not .play: site.css's .play overlays a video thumbnail (absolute, inset:0)
   and would cover the label here. */
a.tile.greet-video{flex-direction:row;align-items:center;gap:14px;padding:18px;color:inherit}
.greet-video .greet-play{width:44px;height:44px;border-radius:50%;background:var(--yellow);color:var(--on-yellow);display:grid;place-items:center;flex-shrink:0}
.greet-video .greet-play svg{width:18px;height:18px;fill:currentColor}
.greet-video .help{display:block}

/* ── /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 filter or 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}
/* Small screens: date and category on one row, title and +/− below (the category stays visible). */
@media (max-width:560px){
  .acc summary{grid-template-columns:minmax(0,1fr) auto}
  .acc summary .d{grid-column:1;grid-row:1}
  .acc summary .cat{display:inline-block;grid-column:2;grid-row:1;justify-self:end}
  .acc summary .t{grid-column:1;grid-row:2}
  .acc summary .pm{grid-column:2;grid-row:2}
}

/* ── 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}
.news-contact{display:flex;flex-wrap:wrap;gap:4px 16px;line-height:1.75;overflow-wrap:anywhere}
.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{max-width:46em;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}
.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}}