/* 민들레 후원 — page styles on top of site.css (prototype V.donate / V.land / V.scholarship /
   V.donations). Colors come only from tokens.css custom properties, so every theme and
   contrast setting works; data-driven values use attributes (CSP: no inline styles).
   --don-line: a control border with at least 3:1 against the surface in all palettes
   (WCAG 1.4.11). It uses the shared --line-strong token when tokens.css defines it. */

.give,.mine,.deposit{--don-line:var(--line-strong,color-mix(in srgb,var(--muted) 75%,var(--surface)))}
.stack{display:grid;gap:18px;max-width:44em}
.notice{padding:14px 18px;border-radius:14px;background:var(--yellow-soft);color:var(--ink);font-weight:600;border:1px solid var(--line)}
.unit-note,.as-of{margin-top:10px}
.first{margin-top:0}
.two.sec.tight{margin-top:48px} /* prototype: the form row sits 48px under the tiles */
.impact-2{grid-template-columns:repeat(2,minmax(0,1fr));margin-top:20px}
/* Impact cards as amount shortcuts (?amount=N#give): the prototype card look, plus a cue
   line, a hover border and a press scale. The whole card is one link and one target. */
.impact-pick{display:block;color:inherit;text-decoration:none;border-radius:20px}
.impact-pick>div{height:100%;display:flex;flex-direction:column;transition:border-color 150ms ease,transform 120ms var(--ease-out)}
.impact-pick .pick-cue{margin-top:auto;padding-top:12px;font-size:.9rem;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:3px}
@media (hover:hover) and (pointer:fine){.impact-pick:hover>div{border-color:var(--ink-2)}.impact-pick:hover .pick-cue{text-decoration-color:currentColor}}
.impact-pick:active>div{transform:scale(.98)}
.impact-pick:focus-visible{outline-offset:3px}
html:not(.js) .js-only{display:none}
/* Checkout fallback (checkout.js reveals it when the payment window cannot open). */
.pay-fallback[hidden]{display:none}
.pay-fallback{font-weight:400;margin-top:12px}
.pay-fallback>p{margin:0 0 8px;font-weight:700}
.pay-fallback ul{margin:0;padding-left:1.2em;display:grid;gap:6px}

/* One-time result of the last action (donations/_notice.html) with an optional undo. */
.result{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 16px;padding:12px 14px 12px 18px;border-radius:14px;background:var(--leaf-soft);color:var(--leaf);font-weight:600;margin-bottom:24px}
.result.notice{background:var(--yellow-soft);color:var(--ink);margin-bottom:24px}
.result p{margin:0;flex:1 1 20em}

/* ── Shortcuts under the page head (donations/_quick.html) ── */
/* The margin sits on the parts, so a strip with nothing shown (no account on a wide
   screen) takes no room. */
.quick-give{display:flex;flex-wrap:wrap;align-items:flex-start;column-gap:24px}
.quick-give>*{margin:0 0 20px}
.direct{flex:1 1 22em;max-width:40em}
.direct summary{display:inline-flex;align-items:center;gap:8px;min-height:var(--target-min);cursor:pointer;font-weight:600;color:var(--ink)}
.direct summary .t{text-decoration:underline;text-decoration-color:var(--line-strong);text-underline-offset:4px}
.direct summary::after{content:"+";content:"+" / "";color:var(--muted)}
.direct[open] summary::after{content:"−";content:"−" / ""}
@media (hover:hover) and (pointer:fine){.direct summary:hover .t{text-decoration-color:currentColor}}
.direct-body{display:grid;gap:10px;margin-top:6px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.direct-body dl{margin:0;display:grid;grid-template-columns:auto minmax(0,1fr);gap:6px 16px}
.direct-body dl>div{display:contents}
.direct-body dt{color:var(--muted)}
.direct-body dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.direct-body .num{font-variant-numeric:tabular-nums;letter-spacing:.02em}
.direct-body .help{margin:0}
.jump-give{display:none}
.jump-give a{display:inline-flex;align-items:center;min-height:var(--target-min);font-weight:600}
@media (max-width:640px){.jump-give{display:block}}
.give .trust{margin-top:-6px}

/* ── Application form ── */
form.form h2,.form.closed h2{font-size:1.4rem;font-weight:700;letter-spacing:-.02em}
.form.closed{display:grid;gap:14px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:clamp(22px,4vw,36px)}
.give form.form{gap:16px}
.give fieldset.field{display:grid;gap:8px}
.give fieldset.field>legend{margin-bottom:6px}
.give .check-help{margin:-2px 0 0 30px}
.give :is(input[type=text],input[type=email],input[type=tel],select,textarea){border-color:var(--don-line)}
.give .has-error :is(input[type=text],input[type=email],input[type=tel]){border-color:var(--ink)}
.other-way{margin-top:12px}
.clear-form{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:16px}
.clear-form .help{margin:0}
/* "바꾸기" links and error-summary links jump here: keep the target clear of the sticky header. */
.give :is(fieldset,input,select,textarea){scroll-margin-top:calc(var(--hh,82px) + 24px)}

/* Cycle: two equal halves on a track (bigger targets than the hugging pills). */
.give .seg{display:grid;grid-template-columns:1fr 1fr;border:1.5px solid var(--don-line)}
.give .seg span{display:flex;align-items:center;justify-content:center;gap:6px;min-height:var(--target-min);padding:8px 12px;text-align:center}
.give .seg input:checked+span{font-weight:700;box-shadow:inset 0 0 0 2px var(--ink),0 2px 8px -3px var(--shadow)}
/* The transfer note is about 매달 only: shown once 매달 is chosen (always without :has). */
.give .cycle:not(:has(input[value="monthly"]:checked)) .monthly-help{display:none}

/* Amounts: an equal-width grid; the "많이 고른 금액" badge sits on the pill's top edge. */
.give .amounts{display:grid;grid-template-columns:repeat(auto-fill,minmax(6.2em,1fr));gap:16px 8px;padding-top:4px}
.give .amounts span{display:flex;align-items:center;justify-content:center;gap:4px;min-height:var(--target-min);padding:8px 6px;text-align:center;white-space:nowrap;border-color:var(--don-line)}
.give .amounts .has-pop>span{position:relative}
.give .amounts .pop{position:absolute;left:50%;top:0;transform:translate(-50%,-55%);font-size:.8rem;line-height:1.3;font-weight:700;color:var(--yellow-ink);background:var(--yellow-soft);border:1px solid var(--yellow-ink);border-radius:999px;padding:1px 8px;white-space:nowrap}
.give .amounts input:checked+span .pop{background:var(--bg);color:var(--ink);border-color:var(--ink)}
.give .amounts input:checked+span{border-width:2px}
/* Selection is never colour alone (WCAG 1.4.1): a check mark leads the chosen option. */
.give :is(.amounts,.seg) input:checked+span::before{content:"✓";content:"✓" / "";font-weight:700}
/* Press feedback (Emil Kowalski: scale .97, ease-out, under 160ms). The global
   reduced-motion and data-motion rules in site.css switch the transition off. */
.give :is(.amounts,.seg) span{transition:transform 120ms ease-out}
.give :is(.amounts,.seg) label:active span{transform:scale(.97)}
/* The custom amount opens with "직접 입력"; it stays open with a value or an error so the
   error summary link always lands on a visible field (no :has → always shown). */
.give fieldset.amount:not(.has-error):not(:has(input[value="custom"]:checked)) .custom-amount:not(.has-value){display:none}
.custom-amount input{max-width:240px;font-variant-numeric:tabular-nums}

/* 후원자 명단: one radio group; the other-name field opens with its option. */
.give .choices{display:grid;gap:8px}
.give .public-name{margin:0 0 4px 30px}
.give .public-name label{font-weight:500}
.give fieldset.listing:not(:has(input[value="alias"]:checked)) .public-name:not(.has-error){display:none}

/* Consent: the long privacy notice opens on demand next to its checkbox. */
.consent-more{margin:2px 0 0 30px;font-size:.86rem}
.consent-more summary{cursor:pointer;color:var(--muted);text-decoration:underline;text-underline-offset:3px;display:inline-flex;align-items:center;min-height:var(--target-min)}
.consent-more p{margin-top:4px}
.consent-more .privacy-notice{margin-top:4px;display:grid;gap:4px}
.consent-more dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:4px 12px}
.consent-more dt{font-weight:600}
.consent-more dd{margin:0}
/* 이름 and 전화번호 sit side by side: when one hint wraps to two lines the inputs still
   share an edge (the global .row2 grid stays untouched). */
.give .row2{align-items:end}
.give .nowrap{white-space:nowrap}

/* Busy submit (htmx request in flight / confirm step sending). */
.give form.htmx-request button[type=submit],button[data-busy]{cursor:progress;opacity:.8}

/* ── Errors: summary and messages are in site.css; group-specific borders here ── */
.has-error .amounts span,.has-error .seg{border-color:var(--ink)}

/* ── Check your answers (GOV.UK summary list) ── */
.cya{margin:0 0 28px;border-top:1px solid var(--line)}
.cya-row{display:grid;grid-template-columns:minmax(7em,1fr) minmax(0,2fr) auto;gap:6px 18px;padding:14px 4px;border-bottom:1px solid var(--line);align-items:baseline}
.cya dt{font-weight:600}
.cya dd{margin:0;overflow-wrap:anywhere}
.cya-act a{display:inline-flex;align-items:center;min-height:var(--target-min);font-weight:600}
#answers-title .sub{font-size:.7em;color:var(--muted);letter-spacing:0}
.confirm-form{display:grid;gap:14px}
.next-steps ol{display:grid;gap:8px;counter-reset:n}
.next-steps li{counter-increment:n;display:block;position:relative;padding-left:1.6em;font-size:.95rem}
.next-steps li::before{content:counter(n) ".";position:absolute;left:0;top:0;font-family:var(--mono);color:var(--muted)}

/* ── Confirmation + deposit instructions ── */
.box .num,.deposit .num,.summary-line .num{font-family:var(--mono);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.02em}
.deposit{border-width:2px;border-color:var(--ink);gap:14px}
.deposit-t{font-size:1.15rem;font-weight:700}
/* One column of rows: site.css gives every .box dl two columns (label | value), which
   would auto-place the three .dep-row blocks side by side (baseline D5). Two classes:
   it must outrank `.box dl` (0,1,1). */
.deposit .deposit-list{display:grid;grid-template-columns:minmax(0,1fr);gap:0;margin:0}
.dep-row{display:grid;grid-template-columns:7em minmax(0,1fr);gap:4px 14px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.dep-row:first-child{border-top:0;padding-top:0}
.dep-row dt{color:var(--muted);font-size:.92rem}
.dep-row dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px}
.dep-row .big{font-size:clamp(1.25rem,2.6vw,1.6rem);font-weight:700;color:var(--ink);font-family:var(--sans)}
.dep-row .bank{color:var(--ink-2);font-size:1rem;flex-basis:100%;order:3}
.dep-row .bank b{color:var(--ink)}
.dep-row .dep-help{flex-basis:100%;order:4;margin:0}
.dep-row .name{background:var(--yellow-soft);color:var(--ink);padding:2px 10px;border-radius:8px;font-weight:700;font-size:1.1rem}
.dep-row .copy{margin-left:auto}
/* "복사" → "복사됨" (donations.js) without the button changing width: the label keeps
   room for the longer word; press feedback is site.css .btn:active. */
.copy .copy-l{display:inline-block;min-width:3.2em;text-align:center}
.copy-fail{flex-basis:100%;order:5;margin:0;color:var(--ink);font-weight:600}
.summary-line{color:var(--ink-2);font-size:.95rem}
.summary-line .k{color:var(--muted)}

/* ── Land: hero, progress (staff figures) + 기부금품법 disclosure ── */
.bigmeter .eyebrow{color:var(--on-deep-2)}
.bigmeter .as-of{margin:0;font-size:.84rem;color:var(--on-deep-2)}
.bigmeter.intro{align-content:center}
.bigmeter .intro-t{font-family:var(--serif);font-size:clamp(1.3rem,2.4vw,1.7rem);font-weight:500;letter-spacing:-.03em;line-height:1.45;color:var(--on-deep)}
.land-scene{align-self:stretch;min-height:200px}
.land-scene svg{width:100%;height:100%}
.land-scene .sky{fill:var(--leaf-soft)}
.land-scene .sun{fill:var(--surface);opacity:.75}
.land-scene .hill{fill:color-mix(in srgb,var(--c-essay) 70%,var(--leaf))}
.land-scene .hill.back{opacity:.6}
.land-scene .flowers path{stroke:var(--leaf);stroke-width:2}
.land-scene .flowers circle{fill:var(--c-poem)}
/* Stems sway from their foot a few times on arrival, then rest (under 5 s, WCAG 2.2.2).
   Reduced motion and data-motion="off" stop it (site.css). Transform only. */
.land-scene .flowers g{transform-box:fill-box;transform-origin:50% 100%;animation:don-sway 2.2s ease-in-out 2}
.land-scene .flowers g:nth-child(2n){animation-delay:.15s}
.land-scene .flowers g:nth-child(3n){animation-delay:.3s}
@keyframes don-sway{25%{transform:rotate(-2.5deg)}75%{transform:rotate(2.5deg)}}
progress.goal{appearance:none;-webkit-appearance:none;width:100%;height:14px;border:0;border-radius:999px;background:var(--sunk);overflow:hidden;color:var(--leaf)}
progress.goal::-webkit-progress-bar{background:var(--sunk);border-radius:999px}
progress.goal::-webkit-progress-value{background:var(--leaf);border-radius:999px}
progress.goal::-moz-progress-bar{background:var(--leaf);border-radius:999px}
.disclosure dl{grid-template-columns:minmax(7.5em,auto) 1fr}
.disclosure dd{overflow-wrap:anywhere}
.give+section,.two>.give,.two>.side{min-width:0}
.side>.faq.sec{margin-top:48px}
.side>.faq.sec:first-child{margin-top:0}

/* FAQ: the question spans the date + title columns (prototype faq(): grid-column 1/3). */
.acc summary .t.span2{grid-column:1/3}

/* ── Scholarship: the letter with its signature, the "apply" box ── */
.letter{margin:0 0 24px}
.letter .edit-note{margin:0;font-size:1.08rem}
.letter figcaption{margin-top:8px;padding-left:24px}
.apply-box{margin-top:28px}
.apply-box p{margin:0}

/* ── Report: monthly bars are links to that month (no JS needed) ── */
.toolbar.month{justify-content:flex-start}
.bars{gap:0}
.bars li{display:block}
.bars a.b{text-decoration:none;color:inherit;border-radius:8px;min-height:var(--target-min)}
@media (hover:hover) and (pointer:fine){.bars a.b:hover span:first-child{text-decoration:underline}}
.bars svg.tr{display:block;width:100%;height:26px;border-radius:8px;background:var(--sunk)}
.bars svg.tr rect{fill:var(--leaf)}
.bars .b.cur svg.tr rect{fill:var(--yellow)}
.bars .b.cur span:first-child{font-weight:700}

/* Usage donut + its table (the table is the accessible source of the numbers). */
.donut svg .donut-k{font-size:12px;fill:var(--muted)}
.donut svg .donut-v{font-size:15px;font-weight:700;fill:var(--ink)}
.donut-seg[data-category="manuscript_fee"]{stroke:var(--c-poem)}
.donut-seg[data-category="accessible_edition"]{stroke:var(--c-essay)}
.donut-seg[data-category="interpretation"]{stroke:var(--c-novel)}
.donut-seg[data-category="scholarship_fund"]{stroke:var(--c-verse)}
.donut-seg[data-category="shelter_fund"]{stroke:var(--c-etc)}
.donut-seg[data-category="other"]{stroke:var(--c-orange)}
.sw{display:inline-block;width:12px;height:12px;border-radius:4px;margin-right:10px;vertical-align:-1px}
.sw[data-category="manuscript_fee"]{background:var(--c-poem)}
.sw[data-category="accessible_edition"]{background:var(--c-essay)}
.sw[data-category="interpretation"]{background:var(--c-novel)}
.sw[data-category="scholarship_fund"]{background:var(--c-verse)}
.sw[data-category="shelter_fund"]{background:var(--c-etc)}
.sw[data-category="other"]{background:var(--c-orange)}
.legend-table{border-collapse:collapse;width:100%;font-size:.95rem}
.legend-table th,.legend-table td{padding:6px 4px;text-align:left;font-weight:400}
.legend-table td{text-align:right;font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.board th.num{text-align:right}
.board tfoot th,.board tfoot td{padding:15px 10px;border-top:2px solid var(--ink);border-bottom:0;color:var(--ink);font-size:1rem;font-weight:700}
.board tfoot th{text-align:left}
.month-pick{flex-direction:row;align-items:center;gap:12px}
.scroll[role="region"]:focus-visible{outline:3px solid var(--focus);outline-offset:4px;border-radius:8px}

/* ── Status chips (내 후원): a text label plus a distinct look per state ── */
.cat[data-status]{border:1px solid transparent}
.cat[data-status="pledged"],.cat[data-status="pending_payment"]{background:var(--yellow-soft);color:var(--yellow-ink);border-color:var(--yellow-ink)}
.cat[data-status="paid"]{background:var(--leaf);color:var(--on-leaf)}
.cat[data-status="canceled"],.cat[data-status="failed"]{background:var(--sunk);color:var(--muted);border:1px dashed var(--muted)}

/* ── 내 후원 ── */
.mine .acts{display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-end}
.mine .title{font-weight:600}
.mine-note{margin-top:16px}
@media (max-width:640px){
  /* Each application is a card: campaign + state, "한 번 · 30,000원", date and number,
     then full-width actions. Roles on the markup keep it a table for assistive tech. */
  .board.mine thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
  .board.mine,.board.mine tbody{display:block}
  .board.mine tr{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;padding:16px 0;border-bottom:1px solid var(--line)}
  .board.mine td{display:block;padding:0;border:0}
  .board.mine .title{flex:1 1 60%;font-size:1.05rem;order:1}
  .board.mine .state{order:2}
  .board.mine .cycle{order:3}
  .board.mine .cycle::after{content:" ·";content:" ·" / ""}
  .board.mine .amount{order:4;flex:1 1 auto;text-align:left;font-weight:600}
  .board.mine .date{order:5;flex-basis:100%}
  .board.mine .date::before{content:attr(data-label) " ";content:attr(data-label) " " / ""}
  .board.mine .number{order:6;flex-basis:100%}
  .board.mine .number::before{content:attr(data-label) " ";content:attr(data-label) " " / ""}
  .board.mine .acts{order:7;flex-basis:100%;display:grid;grid-template-columns:1fr;gap:8px;margin-top:8px}
  .board.mine .acts .btn,.board.mine .acts form,.board.mine .acts button{width:100%}
}

@media (forced-colors: active){
  .bars svg.tr rect,.donut svg circle,.sw{forced-color-adjust:none}
  .sw{border:1px solid CanvasText}
  progress.goal{border:1px solid CanvasText}
  .deposit{border-color:CanvasText}
  .cat[data-status]{border:1px solid CanvasText}
  .cat[data-status="canceled"],.cat[data-status="failed"]{border-style:dashed}
  .give .seg{border:1px solid CanvasText;background:Canvas}
  .give :is(.amounts,.seg) input:checked+span{forced-color-adjust:none;background:Highlight;color:HighlightText;border-color:Highlight}
  .give .amounts input:checked+span .pop{forced-color-adjust:none;background:Canvas;color:CanvasText;border-color:CanvasText}
  .dep-row .name{border:1px solid CanvasText}
}
@media (max-width:640px){
  .impact-2{grid-template-columns:1fr}
  .give .amounts{grid-template-columns:1fr 1fr}
  .cya-row{grid-template-columns:1fr auto}
  .cya-row dd:not(.cya-act){grid-column:1/-1;grid-row:2}
  .dep-row{grid-template-columns:1fr}
  .dep-row .copy{margin-left:0}
}
/* Below 260px (zoomed far in on a small phone, beyond the 320px of WCAG 1.4.10) the
   amount pills get one column each so "100,000원" never overflows its pill, and the
   report legend shows label + amount only (D17): the percent column stays in the
   table for screen readers, while the nowrap amount and percent side by side would
   make the row wider than a 195px screen. */
@media (max-width:259.98px){
  .give .amounts{grid-template-columns:minmax(0,1fr)}
  .legend-table td:last-child{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .legend-table th{overflow-wrap:anywhere}
}
@media print{
  header,footer,.sub-nav,.crumb,.no-print,.copy,.result{display:none!important}
  .page-head{margin:0;padding:0;background:none;border:0}
  .deposit{border:2px solid var(--ink);break-inside:avoid}
}

/* Collection notice shown in full before its box (screen-notices 2-2, rule 4: never collapsed). */
.consent .privacy-notice{padding:14px 16px;border-radius:14px;background:var(--sunk);display:grid;gap:6px;font-size:1rem}
/* The link to the whole policy is a 44 px row, not a line of small print (WCAG 2.5.8). */
.consent .privacy-notice .help a{display:inline-flex;align-items:center;min-height:var(--target-min)}
.consent .privacy-notice dl{margin:0}
.consent .privacy-notice p{margin:0}