/* footer.css — the ONE site footer (markup: scripts/lib/footer.js) and the
   analytics consent banner (js/analytics.js). Loaded by every page, after the
   page's own stylesheet, like css/header.css. Colours fall back across the two
   token sets in use: style.css (--bg, --muted) and op/op.css (--bg, --dim). */

/* ── KO / EN inline pairs ─────────────────────────────────────────────────
   <span class="lang-en">…</span><span class="lang-ko">…</span>. html[lang] is set by
   main.js's language toggle, and by /op's own inline script from the saved
   choice, so this works on pages without main.js too. */
html:not([lang^="ko"]) .lang-ko,
html[lang^="ko"] .lang-en { display: none; }

/* ── Street addresses ─────────────────────────────────────────────────────
   Drawn by CSS, not written in the page: people see them (and screen readers
   read generated content), but search engines index a page's text, not its
   stylesheet — so a search for either street address doesn't find the site.
   Markup: <span class="address address--nl"></span>, in the footer, the About
   list and the privacy policy. :lang() follows the nearest lang attribute, so
   each language version of the policy shows its own form. */
:root {
  --address-nl-en: "Zernikestraat 1, 5612 HZ Eindhoven, the Netherlands";
  --address-nl-ko: "네덜란드 5612 HZ 아인트호번 Zernikestraat 1";
  --address-kr-en: "14, Seonyu-ro 23-gil, Yeongdeungpo-gu, Seoul, South Korea";
  --address-kr-ko: "서울특별시 영등포구 선유로23길 14";
}
.address--nl::before { content: var(--address-nl-en); }
.address--nl:lang(ko)::before { content: var(--address-nl-ko); }
.address--kr::before { content: var(--address-kr-en); }
.address--kr:lang(ko)::before { content: var(--address-kr-ko); }

/* ── Footer ─────────────────────────────────────────────────────────────── */
.site-footer {
  margin-top: auto;                          /* /op's body is a flex column: pin to the bottom */
  padding: var(--section-space) var(--gutter);
  border-top: 1px solid var(--rule, #2A2A27);
  background: var(--bg, #111110);
  color: var(--ink, #E4E3DD);
  font-family: 'Space Mono', 'mgothic-210', 'Courier New', monospace;
  font-size: var(--text-label);
  font-style: normal;
  letter-spacing: 0.04em;
  line-height: 1.6;
}
.footer-inner { display: grid; gap: var(--block-space); }

.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--item-space) var(--inline-space);
}
.footer-nav { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--inline-space); }
.footer-nav a,
.footer-business a {
  color: inherit;
  text-decoration: none;
  opacity: 0.6;
  transition: opacity 0.2s ease;
}
.footer-nav a:hover,
.footer-business a:hover { opacity: 1; }
/* The privacy policy link is set apart from its neighbours on purpose — the
   Korean PIPC guidance asks for it to be easy to spot, not one link among many. */
.footer-nav .footer-privacy { font-weight: 700; opacity: 1; }
.footer-copyright { color: var(--muted, var(--dim, #686862)); }

.footer-business { color: var(--muted, var(--dim, #686862)); }
.footer-business p { margin: 0; }

@media (max-width: 640px) {
  .footer-top { flex-direction: column; align-items: flex-start; }
}

/* ── Analytics consent banner (js/analytics.js) ────────────────────────── */
.consent-banner {
  position: fixed;
  left: var(--gutter);
  bottom: var(--gutter);
  z-index: 200;                              /* above the detail panel (120) and the header (60) */
  width: min(26rem, calc(100vw - 2 * var(--gutter)));
  max-height: calc(100svh - 2 * var(--gutter));
  overflow-y: auto;                          /* short phone screens: the facts must stay reachable */
  padding: var(--block-space);
  background: var(--bg-raised, #1C1C1A);
  border: 1px solid var(--rule, #2A2A27);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.5);
  color: var(--ink, #E4E3DD);
  font-family: 'Space Mono', 'mgothic-210', 'Courier New', monospace;
  font-size: var(--text-label);
  letter-spacing: 0.02em;
  line-height: 1.6;
}
.consent-banner p { margin: 0 0 var(--item-space); }
.consent-banner[lang="ko"] { word-break: keep-all; }   /* break Korean between words, not inside them */
/* The facts Korean law wants in front of the visitor before they consent:
   items, recipient and country, retention. Muted, so the question stays first. */
.consent-banner-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--tight-space) var(--item-space);
  margin: 0 0 var(--item-space);
  color: var(--muted, var(--dim, #8F8D85));
}
.consent-banner-facts dt { white-space: nowrap; }
.consent-banner-facts dd { margin: 0; }
.consent-banner-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2);
  align-items: start;
  margin: 0 0 var(--sp-2);
  cursor: pointer;
}
.consent-banner-option input { margin: 0.2em 0 0; accent-color: var(--ink, #E4E3DD); }
.consent-banner-id { color: var(--muted, var(--dim, #8F8D85)); word-break: break-all; }
.consent-banner-actions { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); margin: var(--item-space) 0; }
/* Allow and Decline look identical: refusing must be as easy and as visible as
   accepting — no highlighted "Accept", no greyed-out "No". Allow is only
   disabled until both consents are ticked. */
.consent-banner-btn {
  font: inherit;
  letter-spacing: 0.06em;
  color: inherit;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: 0;
  padding: var(--button-padding);
  cursor: pointer;
}
.consent-banner-btn:hover:not(:disabled),
.consent-banner-btn:focus-visible { background: var(--ink, #E4E3DD); color: var(--bg-raised, #1C1C1A); outline: none; }
.consent-banner-btn[aria-pressed="true"] { background: var(--ink, #E4E3DD); color: var(--bg-raised, #1C1C1A); }
.consent-banner-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.consent-banner-policy { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media print { .consent-banner { display: none; } }