포용적 언어

<div class="stage">
  <div class="pane bad"><span class="mark">✕</span><span class="label">Before</span>
    <p class="qlabel" id="bl"></p>
    <div class="opts"><span class="opt">-</span><span class="opt">-</span></div>
    <p class="why" id="bw"></p></div>
  <div class="pane good"><span class="mark">✓</span><span class="label">After</span>
    <p class="qlabel" id="gl"></p>
    <div class="opts"><span class="opt">-</span><span class="opt">-</span><span class="opt">-</span><span class="opt">-</span></div>
    <p class="why" id="gw"></p></div>
</div>

.stage{width:94%;height:88%;display:flex;gap:4%}
.pane{position:relative;flex:1;border-radius:14px;border:1px solid var(--line);background:var(--surface);padding:26px 12px 10px;display:flex;flex-direction:column;justify-content:flex-start;gap:7px;overflow:hidden}
.mark{position:absolute;top:10px;right:12px;font:800 16px/1 system-ui;color:var(--accent-2)}
.good .mark{color:var(--accent-3)}
.label{position:absolute;top:10px;left:12px;font:700 10px/1 monospace;color:var(--muted);text-transform:uppercase;letter-spacing:.06em}
.qlabel{margin:0;font:700 11px/1.3 -apple-system,sans-serif;color:var(--fg)}
.opts{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.opt{position:relative;padding:5px 8px 5px 20px;border-radius:8px;border:1px solid var(--line);background:var(--bg);font:600 9.5px/1.2 -apple-system,sans-serif;color:var(--fg)}
.opt::before{content:'';position:absolute;left:7px;top:50%;transform:translateY(-50%);width:7px;height:7px;border-radius:50%;border:1.5px solid var(--muted)}
.why{margin:0;font:500 10px/1.25 -apple-system,sans-serif;color:var(--muted)}

const bl = document.getElementById('bl'), bw = document.getElementById('bw');
const gl = document.getElementById('gl'), gw = document.getElementById('gw');
const bOpts = document.querySelectorAll('.pane.bad .opt');
const gOpts = document.querySelectorAll('.pane.good .opt');
const L = {
  ko: { q: '성별', bo: ['남성', '여성'], go: ['남성', '여성', '기타', '응답 안 함'], bw: '두 칸 중 하나를 강제로 선택', gw: '누구도 강제로 분류되지 않음' },
  en: { q: 'Gender', bo: ['Male', 'Female'], go: ['Male', 'Female', 'Other', 'Prefer not to say'], bw: 'forces a choice between two boxes', gw: 'no one is forced into the wrong bucket' },
};
let lang = 'ko';
function paint() {
  const t = L[lang];
  bl.textContent = t.q; gl.textContent = t.q;
  bOpts.forEach((el, i) => (el.textContent = t.bo[i]));
  gOpts.forEach((el, i) => (el.textContent = t.go[i]));
  bw.textContent = t.bw; gw.textContent = t.gw;
}
paint();
setInterval(() => { lang = lang === 'ko' ? 'en' : 'ko'; paint(); }, 2800);