/* 모바일 우선. 한 손 조작 · 100문항 3분.
   색·배치 정본 = UI지침_의뢰인맞춤_20260727.md
   - 장식·그라데이션·애니메이션·외부폰트·다크모드 없음(지침 §6)
   - ★답변 버튼 두 개는 완전히 같은 모양이다. 색으로 유도하면 응답이 기운다(지침 §2) */
:root{
  --bg:#FAF8F5;          /* 웜 아이보리 */
  --fg:#2A2724;          /* 웜 차콜 */
  --muted:#7A7269;
  --line:#E5DFD7;        /* 웜 라인 */
  --line-strong:#C9C0B5; /* 같은 웜 계열의 진한 선 — 사후 설문 문항 사이 구분선(의뢰인 08-18 02:22 요청).
                            --line 은 문항 경계로는 안 보이고, --muted 는 글자색이라 아홉 줄이면 무겁다 */
  --card:#FFFFFF;
  --accent:#8B6F7D;      /* 뮤트 플럼 — 진행률·선택상태·관리자 강조에만 */
  --accent-soft:#EFE7EA;
  --danger:#A8503F;      /* 벽돌빛 */
  /* ★안내문 강조 — 의뢰인이 3차본에 빨갛게 표시한 두 곳에만 쓴다(07-28).
     순정 빨강(#FF0000)은 웜 아이보리 위에서 튀고 눈이 아프므로, 붉은 기는 살리되
     팔레트와 어울리는 톤으로 내렸다. 벽돌빛(--danger)보다 확실히 붉어 구분된다. */
  --hl:#B8341F;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--fg);
  font-family:"Malgun Gothic","Apple SD Gothic Neo","Noto Sans KR",system-ui,sans-serif;
  -webkit-text-size-adjust:100%}
.wrap{max-width:640px;margin:0 auto;padding:24px 20px 56px}
h1{font-size:1.35rem;line-height:1.45;margin:.2em 0 1em}
h2{font-size:1.08rem;margin:2em 0 .6em}
h3{font-size:.98rem;margin:1.5em 0 .5em}
h4{font-size:.92rem;margin:1.2em 0 .4em;color:var(--muted);font-weight:700}
p{line-height:1.7;margin:.6em 0}
a{color:#6A5361}
.note{color:var(--muted);font-size:.86rem;line-height:1.65}
/* 완료 화면의 마지막 줄("이 창은 닫으셔도 됩니다"). 되돌리기 버튼과 눈으로 떼어 놓는다 —
   붙어 있으면 버튼의 연장선처럼 보인다. */
.note.closing{margin-top:26px}
.error{background:#F7EBE8;border:1px solid #D9B6AC;color:#8C3D2C;padding:11px 13px;border-radius:8px}
/* 조작이 제대로 되었을 때의 한 줄 (2026-07-29). .error 와 같은 자리·같은 크기로 두어
   "되었다/안 되었다"가 **같은 자리에서** 읽히게 한다 — 자리가 다르면 못 보고 지나친다.
   ★응답 화면에는 쓰지 않는다. 답변 버튼 근처에 초록이 들어가면 한쪽을 유도하게 된다. */
.ok{background:#EAF2EC;border:1px solid #B6CDBC;color:#2F5B3C;padding:11px 13px;border-radius:8px}
.intro{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:20px 20px 22px;font-size:.95rem}

/* 연구자 미리보기 표시 — 안내·완료 화면에만 나온다(문항 화면은 응답자가 보는 그대로여야 한다).
   ★답변 버튼과 색이 겹치지 않게 관리자 강조색 계열로 둔다. 응답자는 이 상자를 볼 일이 없다. */
.previewbar{background:var(--accent-soft);border:1px solid var(--accent);border-radius:10px;
  padding:12px 14px;margin-bottom:18px;font-size:.86rem;line-height:1.6;color:var(--fg)}
.previewbar form{display:inline;margin-left:6px}
.previewbar button{background:#fff;border:1.5px solid var(--accent);border-radius:8px;
  padding:6px 12px;font-size:.82rem;font-family:inherit;color:var(--fg);cursor:pointer}

/* 코더 설문 첫 화면 — "몇 번으로 시작합니다". 잘못 받은 링크를 여기서 눈으로 잡는다.
   ★답변 버튼과 색이 겹치지 않게 관리자 강조색 계열로 둔다(응답 화면에는 나오지 않는다). */
.coderbar{background:var(--accent-soft);border:1px solid var(--accent);border-radius:10px;
  padding:13px 15px;margin-bottom:16px;font-size:.95rem;line-height:1.6}
.coderbar .note{display:block;margin-top:3px}

/* ── 안내·인구통계 ── */
.card{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:20px;margin-top:20px}
fieldset{border:0;padding:0;margin:0 0 26px}
/* 태어난 해·만 나이를 한 줄에 나란히. 좁은 화면에서는 자연히 두 줄로 접힌다. */
.numrow{display:flex;flex-wrap:wrap;gap:0 22px}
.numrow fieldset{flex:1 1 190px;min-width:0}
.numrow .note{font-size:.83rem}
legend{font-weight:700;font-size:.95rem;padding:0;margin-bottom:10px}
/* 눈금 설명 — 물음 아래 줄에, 물음보다 약하게 (JB 2026-08-20).
   ⛔답 칸을 유도하지 않도록 1과 5 어느 쪽도 강조하지 않는다. */
.scalenote{display:block;margin-top:5px;font-weight:400;font-size:.87rem;
  color:var(--muted);line-height:1.5}
.choices{display:flex;flex-wrap:wrap;gap:9px}
.choice{flex:1 1 auto;min-width:31%}
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{display:block;text-align:center;padding:13px 10px;border:1.5px solid var(--line);
  border-radius:10px;font-size:.92rem;background:#fff;cursor:pointer}
.choice input:checked+span{border-color:var(--accent);background:var(--accent-soft);
  color:var(--fg);font-weight:700}
.choice input:focus-visible+span{outline:2px solid var(--accent);outline-offset:2px}
.numberfield{display:flex;align-items:center;gap:9px;font-size:1rem}
.numberfield input{width:110px;padding:14px 12px;border:1.5px solid var(--line);border-radius:10px;
  font-size:1.15rem;font-family:inherit;text-align:center;-moz-appearance:textfield}
.numberfield input::-webkit-outer-spin-button,
.numberfield input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.numberfield input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.consent{display:flex;gap:11px;align-items:flex-start;font-size:.95rem;
  padding:15px;border:1.5px solid var(--line);border-radius:10px;background:#FDFCFA}
.consent input{width:21px;height:21px;margin-top:1px;flex:0 0 auto;accent-color:var(--accent)}
button.primary,.linkbtn.primary{display:block;width:100%;margin-top:20px;padding:17px;
  font-size:1.05rem;font-weight:700;color:#fff;background:var(--fg);border:0;border-radius:10px;
  cursor:pointer}
.linkbtn{display:inline-block;padding:12px 18px;border:1.5px solid var(--line);border-radius:10px;
  background:#fff;text-decoration:none}
.linkbtn.primary{text-align:center;color:#fff;border:0}

/* ★상단 고정 배너 — 코더 설문 전용(1차에서는 문안이 비어 있어 나오지 않는다).
   설명문에만 있는 80% 기준이 339문항을 내려가는 동안 흐려지므로 붙박이로 띄운다(지시 §3-5).
   ⚠️답변 버튼과 색이 겹치지 않게 관리자 강조색 계열로 둔다 — 배너가 답변 쪽으로 눈을 끌면
     한쪽을 유도하는 것과 같아진다. 붙박이지만 조용해야 한다. */
.banner{position:sticky;top:0;z-index:20;background:var(--accent-soft);
  border-bottom:1px solid var(--accent);color:var(--fg);
  padding:10px 16px;text-align:center;font-size:.87rem;line-height:1.5;word-break:keep-all}
.banner b{color:var(--hl)}
.banner span{color:var(--muted);font-size:.84rem;white-space:nowrap}

/* ── 문항 화면 ── */
.wrap.q{display:flex;flex-direction:column;min-height:100dvh;padding-top:12px}
/* 🔴2026-08-17 — 가운데 정렬을 뗀다. 가운데로 모으면 **글이 짧을수록 단추가 위로 올라와**
   문항마다 자리가 달라진다(실측 108~363px). 위에서부터 쌓고, 단추는 아래 `margin-top:auto` 로
   이 상자의 **아래 끝**에 붙인다.
   ⛔화면 바닥에 붙이지 않는다 — 그렇게 했더니 PC 는 창이 높아 단추가 저 아래로 내려가
     문항과 멀어졌다(JB *"pc는 버튼 위치가 매우 아래로 내려가있는데"*). 기준은 **글 상자**다. */
/* ★★2026-08-17 — 가장 긴 문항 기준으로 상자를 못 박는다(JB *"가장 긴거 기준으로"*).
   ⛔화면 바닥이 아니라 **글 상자**가 기준이다 — 바닥으로 잡았더니 PC 는 창이 높아
     단추가 저 아래로 내려갔다(JB 가 화면으로 잡아 주셨다).
   실측(폰 390) — 교육용 23문항 글 칸 228~**329px**(자리다). 단추와 그 아래 것들이 391px 로
   늘 같으므로 764px 로 못 박으면 **23문항 전부** 단추 자리가 고정된다.
   ⚠️**본 회차는 다르다.** 다의어(「있다」·「좋다」·「없다」)가 1,087px 까지 가서 여기에
     안 든다. 그쪽은 「대다수 고정 + 소수 밀림」이냐 「지금대로」냐를 **의뢰인께 여쭙는다** —
     완전 고정은 상자가 1,100px 이 되어 **모든 문항에서 단추가 첫 화면 밖**이라 못 쓴다.
   ⚠️`min-height` 다. 이보다 긴 문항은 그때만 늘어난다. 조이지 않는다. */
.qbox{display:flex;flex-direction:column;min-height:764px}

/* ★★2026-08-15 전수조사에서 잡은 것 둘 — 2단계 회차(.q3)에만 건다.
   ⓐ **1,673문항 전부가 화면보다 65px 높았다.** 짧은 문항도 예외가 없었다.
      까닭은 글이 길어서가 아니라 뼈대다 — 배너가 흐름 안에 있는데 본문이 100dvh 를
      따로 먹어, 언제나 「배너 높이」만큼 넘쳤다. 실제 폰은 주소창 때문에 더 심하다.
   ⓑ **35문항에서 셋째 단추(판단보류)가 첫 화면 밖으로 밀렸다**(바닥 814~1,432px).
      전부 뜻이 여럿인 형용사다. ⛔판단보류는 자리가 고정이라(가능·불가능만 좌우로 섞인다)
      한 선택지만 체계적으로 닿기 어려워진다 — 미관이 아니라 **응답이 치우칠 자리**다.
   ⇒ 화면을 배너와 본문이 나눠 갖게 하고, 넘치는 것은 **뜻풀이 칸 안에서만** 흐르게 한다.
      단추·진행줄은 늘 화면에 남는다. ⚠️1단계 회차(.q)는 한 줄도 안 바뀐다. */
/* ⓐ 화면을 배너와 본문이 나눠 갖게만 한다. **높이를 못 박지 않는다.**
   ⛔높이를 100dvh 로 조이고 뜻 칸을 흐르게 해 보았다가 되돌렸다 —
     뜻 칸이 53px(관용구 셋은 0px)로 찌그러져 뜻 17개가 안 보였다. 원래보다 나빴다.
     긴 문항에서 화면이 넘어가는 것은 고장이 아니다. 조이는 순간 읽을 것이 사라진다. */
body.q3{display:flex;flex-direction:column;min-height:100dvh}
/* 🔴🔴2026-08-17 — **단추 폭이 문항마다 달랐다**(JB 지적). 실측 폰 318~350px · PC 318~600px.
   까닭 = `.wrap` 에 `margin:0 auto` 가 있는데 이 자리에서 **flex 항목**이 된다.
     세로 flex 의 가로 늘이기(stretch)는 **auto 여백이 있으면 걸리지 않아**,
     상자가 **글자 폭만큼만** 잡혔다. 그래서 낱말·뜻이 길수록 단추가 넓어졌다.
   ⇒ 가로를 꽉 채우게 못 박는다. `max-width:640px` 는 그대로라 PC 에서도 넓어지지 않는다. */
body.q3 .wrap.q3{flex:1 1 auto;min-height:0;width:100%;
  /* ★2026-08-17 — 위 여백 24→12px. 상자를 못 박은 만큼 아래가 밀려, 노트북(1366×768)에서
     「전체 어휘 다시 보기」가 10px 모자랐다. **빈 곳만** 줄여 그 10px 을 찾았다.
     ⛔1차 회차(.wrap.q)는 한 글자도 안 바뀐다 — 이 규칙은 q3 에만 걸린다. */
  padding-top:12px}

/* ⓑ 답 단추는 화면 바닥에 붙어 따라온다 — 긴 문항에서 단추가 첫 화면 밖으로 밀려도
   손이 닿는다. ⛔이유는 미관이 아니다: 「판단보류」는 자리가 고정이라(가능·불가능만 좌우로
   섞인다) 밀려 나가면 **그 선택지만 체계적으로 고르기 어려워진다** = 응답이 치우친다.
   ★세 단추는 같은 상자 안에서 함께 붙는다 — 한쪽만 붙이면 그것이 유도가 된다(UI지침 §2). */
/* ★★2026-08-17 저녁 — **단추가 화면 바닥을 따라온다**(`sticky`). 상자 안에서만 아래로
   붙이는 것(`margin-top:auto`)으로는 **뜻이 긴 낱말에서 단추가 첫 화면 밖**으로 나갔다.
   전수 실측(5,452문항) — 폰 390×844 에서 **12개**, PC 1366×768 에서 **39개**가
   화면을 내려야 단추가 보였다. 가장 심한 「있다」는 단추 아래끝이 **1,380px**(화면 844)이라
   한 화면을 넘기고도 540px 을 더 내려야 했다.
   ⛔미관이 아니다 — 「판단보류」는 자리가 고정이라(가능·불가능만 좌우로 섞인다) 밀려 나가면
     **그 선택지만 체계적으로 덜 눌린다** = 응답이 치우친다(UI지침 §2).
   ★뜻 칸을 잘라 안에서 굴리게 하는 안은 **버렸다.** 단추는 안 보여도 내리면 반드시 만나지만,
     잘린 뜻은 **못 본 채로 답이 저장된다.** 실측으로도 그 안은 폰에서 13~35문항의 뜻을 잘랐다.
   ★고친 뒤 전수 실측 — 폰·PC 둘 다 **5,452/5,452** 가 첫 화면에서 단추 셋에 손이 닿는다 ·
     뜻이 잘리는 문항 **0** · 단추 폭 한 갈래 · 짧은 문항 5,142개는 **자리가 그대로**다
     (화면이 넘치지 않으면 `sticky` 는 아무 일도 하지 않는다).
   ⚠️긴 문항에서는 뜻 글자가 단추 **밑으로 지나간다**(폰 10개·PC 13개). 가려지는 것이 아니라
     끝까지 내리면 단추가 제자리로 돌아가 전부 드러난다 — 실측 「남는 가림 0px」.
   ⛔1단계 회차(`.q`)는 한 글자도 안 바뀐다. 이 규칙은 `body.q3` 에만 걸린다.
   검사기 = `tools/검수_첫화면_단추_20260817.py`(전수) */
body.q3 .answers{margin-top:auto;padding-block:8px;
  position:sticky;bottom:8px;z-index:6;background:var(--bg)}
.hint{text-align:center;color:var(--muted);font-size:.88rem;margin:0 0 18px}
.word{font-size:2.1rem;font-weight:700;text-align:center;letter-spacing:-.01em;
  margin:0 0 40px;word-break:keep-all;line-height:1.35}
/* 🔴2026-08-20 — 두 축 회차만 낱말 위에 여백을 준다 (의뢰인 20:02 §3).
     *"제일 윗단을 없애다보니 어떤 경우에는 단어가 너무 화면 상단에 딱 달라붙어 보입니다"*
   까닭 = 08-19 에 맨 위 물음(.hint)을 걷었고, 그 줄이 여백 노릇을 하고 있었다.
   ⛔낱말의 크기·굵기·색은 한 글자도 안 건드린다 — 낱말이 주인공이다(UI지침 §4).
   ⛔`.twoaxis .word` 로는 못 건다 — 폼은 낱말 **아래 형제**라 낱말을 감싸지 않는다.
     그래서 body 에 단 표(q2)로 겨눈다. 옛 회차 넷에는 그 표가 없다.
   ⚠️28px 은 재어 고른 값이다 — 한 문항이 한 화면에 들어오는 것을 깨지 않는 선에서
     가장 넉넉한 쪽으로 잡았고, 폰 세 폭에서 그림으로 확인한다. */
body.q2 .word{margin-top:28px}
@media (max-width:389px){ body.q2 .word{margin-top:22px} }
/* ★대괄호 묶음의 나머지 형태 — 의뢰인 08-17 지시(손그림 첨부):
     「메인 단어 바로 밑에, 글자 크기만 메인보다 조금 작게, 볼드체로 나열」.
   🔴2026-08-16 에 HTML 만 넣고 이 규칙을 안 넣어, 브라우저 기본 **불릿 목록**으로 나왔다
     (의뢰인 *"단어 제시가 못생기게 나옵니다"*). 대표형과 한 덩어리로 읽히게 한다 —
     여백을 좁혀 붙이고, 뜻풀이와는 크기로 가른다(색으로 낮추지 않는다 · §.meaning 과 같은 까닭). */
/* ★2026-08-17 — 여럿일 때 **한 줄에 슬래시로** 놓는다(JB 확인).
   세어 보니 묶음 101개 중 **89개(88%)는 밑에 붙는 낱말이 하나**뿐이라 줄이 갈릴 일이 없고,
   가장 많은 것도 셋(42자)이라 폰에서 두 줄이면 든다. 세로를 아껴 작은 화면에서
   「전체 어휘 다시 보기」가 첫 화면에 들어오는 데도 보탬이 된다.
   ⚠️의뢰인 손그림은 두 줄로 쌓은 모양이었다. 문장은 *"같이 나열"* 이라 어긋나지는 않으나,
     드릴 때 **한 줄로 말씀드린다** — 그림과 다르게 간 것은 말없이 두지 않는다.
   ⛔`li` 는 그대로 둔다 — 검사기가 그 자리로 형태를 읽는다. 보이는 것만 한 줄로 만든다. */
.forms{list-style:none;margin:-28px auto 40px;padding:0;text-align:center}
.forms li{display:inline;font-size:1.45rem;font-weight:700;line-height:1.4;
  letter-spacing:-.01em;word-break:keep-all}
.forms li + li::before{content:" / ";color:var(--muted);font-weight:400}
/* ★뜻풀이는 단어와 같은 본문 색이다(의뢰인 3차 요구, 07-28).
   종전에는 지시문(.hint)과 같은 흐린 색이라 눈이 건너뛰었고, 실제로 뜻을 읽지 않고 답하는
   경우가 관찰되었다. 뜻을 읽어야 성립하는 설문이므로 색으로 낮추지 말 것.
   색이 같아진 만큼 단어와 뒤엉키지 않도록 위 여백을 6px 넓혔다 — 구분은 크기와 여백으로만 한다. */
.meaning{text-align:center;color:var(--fg);font-size:.98rem;line-height:1.6;
  margin:-20px 0 38px;word-break:keep-all}
/* ★뜻이 둘 이상인 어휘(코더 설문 308개 중 89개) — ①②③ 으로 나눈다.
   한 줄로 이어 붙이면 7뜻짜리(「양양하다」)는 읽히지 않아, 읽지 않고 판정하시게 된다.
   ★뜻풀이와 **같은 본문 색·같은 크기**다 — 색으로 낮추면 눈이 건너뛴다(1차에서 실제로 겪었다).
   가운데 정렬을 쓰지 않는 것은 여러 줄이 되면 왼쪽 끝이 들쭉날쭉해 읽기 어려워지기 때문이다. */
.senses{list-style:none;margin:-14px auto 34px;padding:0;max-width:30em;
  color:var(--fg);font-size:.98rem;line-height:1.6;text-align:left}
.senses li{display:flex;gap:8px;align-items:baseline;margin:.42em 0;word-break:keep-all}
.senses .mark{flex:0 0 auto;color:var(--muted);font-variant-numeric:tabular-nums}
.senses .text{flex:1 1 auto;min-width:0}
[hidden]{display:none !important}
.answers{display:flex;gap:13px}
/* ★두 버튼 동일 스타일 — 색으로 한쪽을 유도하지 않는다 */
.ans{flex:1;padding:27px 8px;font-size:1.15rem;font-weight:700;border-radius:14px;
  background:#fff;border:2px solid var(--line);color:var(--fg);cursor:pointer;
  -webkit-tap-highlight-color:transparent;font-family:inherit}
.ans:active{background:var(--fg);color:#fff}
.ans:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 🔴2026-08-17 — 여백을 34→14px 로 줄였다. 상자를 820px 로 못 박으면서 아래 것들이
     밀려 **노트북(1366×768)·PC(1280×800)에서 「전체 어휘 다시 보기」가 첫 화면 밖**으로
     나갔다(고치기 전에는 보였다). 모르고 지나가면 없는 기능이나 마찬가지다.
   ⛔글자·단추 크기는 한 글자도 안 줄였다. **빈 곳만** 줄인다. */
.progress{margin-top:4px}
.bar{height:8px;background:var(--line);border-radius:99px;overflow:hidden}
.bar span{display:block;height:100%;background:var(--accent)}
.count{text-align:center;color:var(--muted);font-size:.85rem;margin-top:6px}
/* 남은 것 · 몇 % — 「몇/몇」만으로는 얼마나 남았는지 셈을 해야 한다(지시 M9 §3-1 ⑤).
   엑셀판이 맨 윗줄에 늘 띄워 두던 값이고, 의뢰인이 그것을 보고 「fancy 하다」 하셨다. */
.count .left,.count .pct{margin-left:10px;white-space:nowrap}
.count b{font-variant-numeric:tabular-nums;color:var(--fg)}

/* ── 2단계(상황 수식) 회차 — 답이 셋 · 손이 빨라야 한다 ──────────────
   ★「fancy」= 한눈에 들어오고 손이 빠른 것이지 꾸미는 것이 아니다(지시 M9 §3-0).
     의뢰인이 fancy 하다고 하신 엑셀에는 장식이 하나도 없다 — 큰 글자·진행 숫자·갈린 줄
     표시·잠근 칸뿐이다. 그라데이션·그림자·애니메이션은 여기서도 쓰지 않는다(UI지침 §C). */
/* 지금 어느 묶음인지(엑셀에서는 시트로 갈려 있었다) */
.banner .cat{display:inline-block;margin-left:8px;padding:1px 8px;border-radius:99px;
  background:#fff;border:1px solid var(--accent);color:var(--fg);font-size:.8rem}
/* 세 모델이 엇갈린 낱말 — 엑셀과 **같은 노랑**(#FFF3CD)이라 두 도구가 같아 보인다.
   ⚠️낱말 자체의 글자색은 건드리지 않는다. 색으로 답을 유도하는 자리가 아니다. */
.word.split{background:#FFF3CD;border-radius:10px;padding:6px 14px;display:inline-block;
  align-self:center}
/* 보일 AI 판단 하나 — 회색 딱지 **하나**. 답 단추보다 조용해야 한다(판단은 코더가 하신다).
   ★상자를 둘(태그+값)로 나누지 않는다 — 낱말 아래에 작은 네모가 늘수록 눈이 쉴 곳이 없다.
     한 상자 안에 「AI  가능」으로 적고, 「AI」만 작고 흐리게 두어 무엇의 값인지 알린다. */
.aihint{display:flex;justify-content:center;align-items:center;gap:6px;margin:-18px 0 30px;
  width:fit-content;margin-left:auto;margin-right:auto;
  background:#F1EEEA;border:1px solid var(--line);border-radius:8px;padding:4px 13px}
.aihint .tag{font-size:.72rem;color:var(--muted)}
/* ★2026-08-15 — AI 판정 글자를 굵게(의뢰인 요청 1-2 · MID 348656025).
   *"학생들이 좀 더 명확히 AI의 판단을 확인할 수 있을 것 같습니다"*
   ⚠️템플릿에 <b> 를 넣으면 안 된다 — app.js 가 이 칸의 글자를 갈아 끼우면서 지운다.
     그래서 **서식은 CSS 로만** 건다. 답 단추보다 커지지는 않게 두께만 올린다. */
.aihint .val{font-size:.92rem;color:var(--fg);font-weight:700}
.aihint.split{background:#FFF3CD;border-color:#E8D9A8}
/* 답 셋 — 세로로 쌓는다. 좁은 화면에서 셋을 가로로 두면 글자가 접혀 읽히지 않는다.
   ★셋 다 완전히 같은 모양이다(UI지침 §2 — 한쪽이 눈에 띄면 회색지대 응답이 기운다). */
.answers.three{flex-direction:column;gap:11px}
/* ★2026-08-17 — 세로 여백 19→17px. 노트북(1366×768)에서 「전체 어휘 다시 보기」가
   13px 모자라 첫 화면 밖으로 나갔다. ⛔글자 크기는 그대로다. 단추 높이는 58px 로
   손가락 기준(44px)보다 넉넉하다. */
.answers.three .ans{padding:17px 12px;display:flex;align-items:center;gap:12px;
  justify-content:flex-start;text-align:left}
/* 숫자는 **테두리 없이 숫자만.** 상자를 두르면 낱말 아래에 작은 네모가 셋 더 생겨
   눈이 그것부터 훑는다 — 정작 커야 할 것은 낱말과 답이다. */
.ans .keynum{flex:0 0 auto;width:20px;text-align:center;font-size:.92rem;
  color:var(--muted);font-weight:700;font-variant-numeric:tabular-nums}
.ans.hit{background:var(--fg);color:#fff}      /* 숫자판으로 눌렀을 때 눈에 보이게 */
.ans.hit .keynum{color:#fff}
/* 🔴2026-08-17 — 숫자판 안내가 **처음 세 문항에만** 뜨는데, 사라지면서 단추를 밀어 올렸다.
   ⇒ 감추되 **자리는 남긴다.** 안 그러면 네 번째 문항부터 단추가 22px 위로 뛴다. */
body.q3 .keyhint.hidden{visibility:hidden;display:block}
/* 숫자판 안내는 **처음 몇 문항에만.** 1,673번 되풀이되면 읽히지 않고 소음이 된다.
   그다음부터는 단추에 적힌 숫자가 그 구실을 한다. */
.keyhint{text-align:center;color:var(--muted);font-size:.82rem;margin:4px 0 0}
.keyhint b{color:var(--fg);font-variant-numeric:tabular-nums}
.keyhint.hidden{display:none}
/* 낱말을 더 크게 — 화면에서 제일 큰 글자(§3-1 ①, 엑셀 26pt 자리) */
.wrap.q3 .word{font-size:2.4rem;margin-bottom:34px}
/* ★세로 간격을 조금씩 줄인다 — 한 문항이 휴대전화 한 화면에 들어와야 손이 안 멈춘다.
   1,673문항에서 문항마다 한 번씩 밀어 올리면 그것만으로 지친다. */
.wrap.q3 .progress{margin-top:24px}
.wrap.q3 .aihint{margin-bottom:26px}
.wrap.q3 .criteria-toggle{margin-top:2px}
.wrap.q3 .undo{margin-top:12px}

/* 안내문 강조 — 의뢰인이 3차본에서 빨갛게 표시한 두 곳 전용(07-28).
   설명문을 읽지 않고 단어만 보고 답하는 경우가 관찰되어, 핵심 두 문구만 눈에 걸리게 한다.
   ★세 곳 이상으로 늘리지 말 것 — 의뢰인이 "이 두 부분만"이라고 못 박으셨고, 많아지면 강조가 죽는다.
   (2차의 '응답 순서' 블록 .order 는 의뢰인이 직접 철회하셔서 문안·스타일 모두 제거했다) */
b.hl{color:var(--hl)}

/* 안내문 안의 '안다/모른다' 판단 기준 상자 — 눈이 멈추게 해서 건너뛰지 않게 한다 */
.criteria{background:var(--accent-soft);border-left:4px solid var(--accent);border-radius:10px;
  padding:14px 16px;margin:18px 0}
.criteria .c-h{margin:.2em 0 .4em;font-size:.97rem}
.criteria ul{margin:0 0 .9em;padding-left:1.15em}
.criteria li{line-height:1.6;margin:.35em 0;font-size:.93rem}
.criteria ul:last-child{margin-bottom:0}
/* ★2026-08-21 — 상자가 **셋**으로 갈렸다 (의뢰인 08-21 *"박스를 세 부분으로 나누어주십사"*).
   상자 안 첫·끝 줄의 바깥 여백을 지워 상자가 공연히 두꺼워지지 않게 한다.
   ⛔색·테두리·굵기는 한 값도 건드리지 않았다 — 셋이 똑같이 보여야 한다(UI지침 §2·§6).
      의뢰인 문서의 사각형 셋도 서로 같은 모양이다. */
.criteria>p:first-child{margin-top:0}
.criteria>p:last-child{margin-bottom:0}
.criteria>ul:last-child{margin-bottom:0}
/* 다의어 한 줄(코더 설문). 앞의 두 줄과 성격이 달라 한 칸 띄우고 조금 작게 둔다 —
   판단 기준이 아니라 '뜻이 여럿일 때의 처리 규칙'이다. */
.criteria .added{margin:.9em 0 0;font-size:.9rem;line-height:1.6}

/* 문항 화면의 「판단 기준 다시 보기」 — 열면 덮어 보이고, 닫으면 제자리 */
.criteria-toggle{margin-top:16px;text-align:center}
.criteria-toggle>summary{display:inline-block;list-style:none;cursor:pointer;
  color:var(--muted);font-size:.85rem;padding:8px 12px;
  text-decoration:underline;text-underline-offset:3px}
.criteria-toggle>summary::-webkit-details-marker{display:none}
.criteria-toggle[open]>summary{position:fixed;top:0;left:0;right:0;z-index:31;
  background:var(--card);border-bottom:1px solid var(--line);padding:14px;
  text-align:center;color:var(--fg);font-weight:700}
.criteria-panel{position:fixed;inset:52px 0 0;z-index:30;background:var(--bg);
  overflow-y:auto;padding:16px 18px 40px;text-align:left;
  -webkit-overflow-scrolling:touch}
.criteria-panel .criteria{margin-top:0}
/* 상자를 닫는 길을 아래쪽에도 둔다 — 다 읽고 나면 손가락이 화면 아래에 있다.
   위쪽 제목까지 올라가 누르게 하면 그 사이에 뒤로 가기를 누르게 된다(실기기에서 확인). */
.criteria-panel .closepanel{display:block;width:100%;margin:22px 0 0;padding:14px;
  border:1.5px solid var(--line);border-radius:10px;background:#fff;color:var(--fg);
  font-size:1rem;font-family:inherit;cursor:pointer}
.criteria-panel .closehint{color:var(--muted);font-size:.85rem;text-align:center;margin-top:10px}

/* 오탭 정정 — 답변 버튼과 경쟁하지 않도록 작고 조용하게 */
.undo{margin-top:18px;text-align:center}
.undo.hidden{visibility:hidden}
.undo button{background:none;border:0;color:var(--muted);font-size:.85rem;font-family:inherit;
  padding:10px 12px;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.undo button:active{color:var(--fg)}

/* 넓은 화면(PC)에서는 단어를 키워 허전하지 않게 */
@media (min-width:900px){
  .word{font-size:2.7rem}
  .wrap.q3 .word{font-size:3rem}
  .meaning{font-size:1.05rem}
  .senses{font-size:1.05rem}
  /* ⚠️넓은 화면에서도 답 셋은 **세로로 쌓는다**(2026-08-15 · JB *"어지럽다"*).
     가로로 놓으면 글자 길이가 달라(가능·불가능·판단보류) 숫자와 글자가 단추마다 다른
     자리에 놓인다 — 눈이 세 번 다시 자리를 찾는다. 세로로 두면 1·2·3 이 한 줄로 서고
     글자도 같은 자리에서 시작해, 문항이 바뀌어도 눈이 움직일 데가 없다. */
  .answers.three .ans{padding:21px 14px}
}

/* ── 관리자·진행자 ── */
.wrap.admin{max-width:1000px}
.stats{display:flex;gap:11px;flex-wrap:wrap;margin:16px 0 10px}
.stat{flex:1 1 110px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:16px;text-align:center}
.stat .n{display:block;font-size:1.7rem;font-weight:700;color:var(--accent)}
.stat .l{display:block;color:var(--muted);font-size:.82rem;margin-top:3px}
.dists{display:flex;gap:13px;flex-wrap:wrap}
.dist{flex:1 1 200px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px}
.dist h3{margin:.1em 0 .6em}
.dist table{width:100%;border-collapse:collapse;font-size:.9rem}
.dist td{padding:5px 0;border-bottom:1px dashed var(--line)}
.num{text-align:right;font-variant-numeric:tabular-nums}
.locked{margin-top:26px;background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--accent);border-radius:12px;padding:18px 20px}
.opened{margin-top:26px;background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:18px 20px}
.closeform{margin-top:18px;display:flex;flex-wrap:wrap;gap:9px;align-items:center}
.closeform label{flex:1 1 100%;font-size:.9rem;line-height:1.6}
.closeform input{padding:12px;border:1.5px solid var(--line);border-radius:8px;font-size:1rem;
  width:150px;font-family:inherit}
/* 코더 한 분만 고르는 칸(2026-08-03). 확인 칸과 나란히 서되 줄 하나를 통째로 쓴다 —
   누구를 고르셨는지가 확인 문구를 적기 전에 보여야 한다. */
.closeform select{flex:1 1 100%;padding:12px;border:1.5px solid var(--line);border-radius:8px;
  font-size:1rem;font-family:inherit;background:#fff}
button.danger{padding:12px 22px;background:var(--danger);color:#fff;border:0;border-radius:8px;
  font-weight:700;font-size:.95rem;cursor:pointer;font-family:inherit}
/* 처음부터 다시 시작 — 자주 쓸 것이 아니고 잘못 누르면 응답이 사라진다.
   다른 조작과 눈으로 떼어 놓되, 겁을 주는 색은 쓰지 않는다(정상 절차의 하나다). */
.restartbox{margin-top:14px;background:var(--card);border:1px solid var(--line);
  border-left:4px solid var(--danger);border-radius:12px;padding:18px 20px}
.logoutform{margin-top:34px}
.logoutform button{cursor:pointer;font-family:inherit;font-size:.9rem;color:var(--muted)}
.authcard{max-width:420px}
.authform{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:14px 0 4px}
.authform input{flex:1 1 180px;padding:14px;border:1.5px solid var(--line);border-radius:10px;
  font-size:1rem;font-family:inherit}
.authform button.primary{width:auto;flex:0 0 auto;margin-top:0;padding:14px 26px}
.linkrow{background:var(--card);border:1px solid var(--line);border-radius:12px;
  padding:14px 16px;margin-bottom:12px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.linklabel{flex:1 1 100%}
.linklabel b{display:block;margin-bottom:3px}
.linklabel .note{display:block}
code.share{flex:1 1 300px;background:#FBF9F6;border:1px solid var(--line);
  border-radius:8px;padding:11px 13px;font-size:.88rem;word-break:break-all}
.copybtn{flex:0 0 auto;padding:11px 18px;border:1.5px solid var(--line);border-radius:8px;
  background:#fff;color:var(--fg);font-size:.88rem;font-family:inherit;cursor:pointer}
.copybtn:active{background:var(--fg);color:#fff}
table.grid{width:100%;border-collapse:collapse;font-size:.9rem;background:var(--card);
  border:1px solid var(--line);margin:.5em 0 1em;display:block;overflow-x:auto}
table.grid.small{font-size:.84rem}
table.grid th,table.grid td{border:1px solid var(--line);padding:8px 10px;white-space:nowrap}
table.grid th{background:#F3EFEA;font-weight:700}
table.grid th.left{text-align:left;white-space:normal;width:30%}
table.grid tr.best{background:var(--accent-soft);font-weight:700}
/* 결과 두 벌 표에서 '이쪽이 기본입니다' 를 표시. 최적 컷 행(.best)과 이름을 나눠 둔다 */
table.grid tr.chosen{background:var(--accent-soft);font-weight:700}
td.meaning-cell{white-space:normal;max-width:320px}
td.band.회색{background:#F5EEDC}
td.band.쉬움{background:#E4EEE4}
td.band.어려움{background:#F4E3DF}

/* ★전체 어휘 다시 보기 (2026-08-15 · 의뢰인 요청 3-3) — 응답 화면이 아니라 목록 화면이라
   UI 불변식(답 단추 동일)의 대상이 아니다. 다만 색은 팔레트 안에서만 쓴다. */
.allh{font-size:1.15rem;margin:4px 0 10px}
.alllist{list-style:none;margin:14px 0 24px;padding:0}
.allrow{display:flex;align-items:baseline;gap:10px;padding:9px 4px;
  border-bottom:1px solid var(--line);font-size:.95rem}
.allrow .no{flex:0 0 3.4em;color:var(--muted);font-variant-numeric:tabular-nums;font-size:.85rem}
.allrow .w{flex:1 1 auto;min-width:0;word-break:keep-all}
.allrow a.w{color:var(--fg)}
/* 🔴🔴2026-08-17 — 목록의 답 칸이 **답 단추(.ans)의 여백 27px 을 물려받고** 있었다.
     글자·색만 덮어써서, 글자는 14px 인데 칸 높이가 76px · 줄 높이가 95px 이 되어
     번호 1·2·3·4 사이가 크게 벌어졌다(JB 가 라이브에서 잡았다).
   ★`.alllist` 때와 **같은 무늬** — 같은 이름을 두 곳이 나눠 쓰고 있었다.
     ⛔여백·테두리·모서리까지 **여기서 되돌린다.** 이름이 겹치면 물려받는 것을 다 끊어야 한다. */
.allrow .ans{flex:0 0 auto;color:var(--muted);font-size:.88rem;
  padding:0;border:0;border-radius:0;background:none;font-weight:400;line-height:1.5}
.allrow .ans.yet{color:var(--line)}
.allrow.yet .w{color:var(--muted)}
.allrow .edited{flex:0 0 auto;font-size:.78rem;color:var(--accent)}
.backwrap{margin:20px 0 40px}
.alllink{text-align:center;margin:2px 0 2px;font-size:.86rem}
.alllink a{color:var(--muted)}
.hint.editnote{color:var(--accent);margin-bottom:12px}

/* ── 참여 QR (2026-08-16 · JB 「링크로 보내기 · QR로 사용하기 · 한 장으로 인쇄」) ──
   ⛔장식이 아니다. 관리 화면에서는 링크 옆의 작은 그림, 인쇄 화면에서는 찍히는 크기.
   앞선 사양 = 2차_기능후보.md §1(2026-07-29). 참여 주소만 담는다. */
.qrthumb{flex:0 0 auto;width:76px;height:76px;margin-left:10px;
  border:1px solid var(--line);border-radius:6px;background:#FFF;padding:3px}
.wrap.qrsheet{max-width:840px}
.qrh1{margin:.4em 0 .2em}
.qrsub{color:var(--muted);font-size:.92rem;margin:0 0 18px;word-break:keep-all}
.qrgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.qrcard{margin:0;padding:12px;border:1px solid var(--line);border-radius:8px;
  background:var(--card);text-align:center;break-inside:avoid}
.qrcard figcaption{font-size:1.02rem;font-weight:700;margin-bottom:8px}
.qrcard img{width:100%;max-width:190px;height:auto;image-rendering:pixelated}
.qrcard code{display:block;margin-top:8px;font-size:.62rem;color:var(--muted);
  word-break:break-all;line-height:1.35}

@media print{
  /* 종이에서는 안내 단추와 배경을 뺀다 — 잉크와 자리를 문항이 아니라 QR 에 쓴다 */
  .noprint{display:none}
  html,body{background:#FFF}
  .wrap.qrsheet{max-width:none;padding:0}
  .qrgrid{grid-template-columns:repeat(2,1fr);gap:8px}
  .qrcard{border-color:#999}
}


/* ★전체 어휘 목록의 「판정하던 자리로 돌아가기」 — 위에 붙여 둔다 (2026-08-16 · 의뢰인 요청).
   목록이 5,000줄이라 맨 아래 단추 하나로는 폰에서 찾기 어렵다. */
.backtop { position: sticky; top: 0; z-index: 5; margin: 0 0 .6rem;
           padding: .5rem 0; background: var(--bg); }
.backtop .linkbtn { display: inline-block; }

/* ★사후 설문 (2026-08-17 · 의뢰인 08-17 03:15 요청).
   판정 화면과 **다른 화면**이다 — 여기는 눈금이라 1~7 이 나란히 서는 것이 맞다.
   ⚠️폰이 먼저다. 아홉 문항 × 일곱 칸이라, 가로로 욱여넣지 않고 문항마다 한 덩이로 쌓는다. */
.postsurvey{max-width:34em;margin:0 auto}
/* ★눈금 안내 줄에 노란 상자 (의뢰인 08-18 02:22 — *"맨 위의 리커트 척도 부분에는 …
   노란색 네모를 덧입혀주면 더 잘 보일 것 같습니다"*).
   ⚠️노랑은 **갈림 낱말과 같은 #FFF3CD** 다 — 회차 안에서 노랑이 두 뜻으로 갈리지 않게. */
.postsurvey .scalehead{text-align:center;color:var(--fg);margin:0 0 26px;
  background:#FFF3CD;border:1px solid #E8D9A8;border-radius:10px;padding:12px 14px;
  line-height:1.6;word-break:keep-all}
.postsurvey .warn{background:#FFF3CD;border-radius:10px;padding:12px 14px;margin:0 0 18px;
  color:var(--fg);line-height:1.6}
/* ★구분선을 **블록 아래**로 내리고 사이를 벌렸다 (같은 요청 ② — *"리커트 척도가 어떤 문항을
   위한 …인지 약간 헷갈립니다 … 문항과 문항 거리를 좀 띄우고 … 구분선을 하나씩"*).
   종전은 border-top 이라 선이 **다음 문항 글 바로 위**에 붙어, 눈금이 위아래 어느 문항 것인지
   흐렸다. 아래로 내리면 「문항 + 그 눈금」이 한 덩이로 닫힌다.
   ⚠️글과 눈금 사이(12px)는 좁히고 덩이 사이(34px)는 벌린다 — 가까운 것끼리 묶여 보이게. */
.scaleq{border:0;border-bottom:1px solid var(--line-strong);margin:0 0 34px;padding:0 0 26px}
.scaleq legend{display:block;width:100%;padding:0;margin:0 0 12px;line-height:1.6;
  color:var(--fg);word-break:keep-all}
.scaleq .qno{display:inline-block;min-width:1.6em;color:var(--muted);
  font-variant-numeric:tabular-nums}
.scaleq.missing{background:#FFF3CD;border-radius:10px;padding:16px 12px 12px}
.scalerow{display:flex;align-items:center;gap:8px}
.scalerow .anchor{flex:0 0 auto;font-size:.78rem;color:var(--muted);max-width:5.2em;
  line-height:1.35;word-break:keep-all}
.scalerow .anchor.right{text-align:right}
.scalerow .dots{flex:1 1 auto;display:flex;justify-content:space-between;gap:4px}
/* 일곱 칸은 **크기·색이 전부 같다.** 가운데를 크게 하면 응답이 그리로 몰린다(UI지침 §2와 같은 까닭) */
.dot{flex:1 1 0;min-width:0}
.dot input{position:absolute;opacity:0;width:0;height:0}
.dot span{display:block;text-align:center;padding:11px 0;border:1px solid var(--line);
  border-radius:9px;background:#fff;font-variant-numeric:tabular-nums;cursor:pointer}
.dot input:checked + span{background:var(--accent,#6b5b7b);color:#fff;border-color:transparent}
.dot input:focus-visible + span{outline:2px solid var(--fg);outline-offset:2px}
.postsurvey textarea{width:100%;box-sizing:border-box;border:1px solid var(--line);
  border-radius:10px;padding:12px;font:inherit;line-height:1.6;color:var(--fg);background:#fff}
.ans.wide{width:100%;margin-top:24px}

/* ══ 두 축 회차(이해도 + 친숙도 7점) ═══════════════════════════════════════
   🔴2026-08-19 — question.html 의 두 축 블록은 08-19 새벽에 붙었는데 이 파일은
     08-18 02:28 이 마지막이었다. class 열 개가 **정의가 아예 없어** 브라우저 기본으로
     났다(이해도 단추 거대 · 친숙도 라디오 동그라미 · 「다음」 회색 기본 단추).
     JB 가 로컬을 눌러 보시고 잡으셨다. 검사 여덟이 다 초록이었으나 CSS 를 보는 축이
     하나도 없었다 ⇒ `tools/검수_두축스타일_20260819.py` 를 새로 달았다.

   ⛔여기 규칙은 **전부 `.twoaxis` 로 시작한다.** 예외 없다.
     `.ans`·`.answers` 는 형용사·코더·2단계 회차가 함께 쓰고, 지금 라이브에서
     코더 넷이 그 화면으로 돌고 있다. 원본 규칙을 건드리면 그쪽이 같이 바뀐다.

   ⛔미감으로 정한 것이 없다. 전부 `UI지침_의뢰인맞춤_20260727.md` §2·§4·§6 에서 왔다.
     이 화면은 예뻐지는 것이 목표가 아니다 — 어느 칸이든 눈에 띄면 그리로 응답이 기울고,
     가장 크게 기우는 자리가 이 조사가 재려는 회색지대다. 미관이 아니라 타당성 문제다. */

/* 이해도 — 옛 27px 은 화면에 단추 둘뿐이던 시절 값이다. 두 축이면 세로가 두 배로 든다.
   ⛔14px 아래로 더 줄이지 말 것 — 위아래 14 + 글자 ≈ 48px 로 손가락 표적 44px 을 겨우 지킨다. */
/* 🔴2026-08-19 — 글자를 칸 **한가운데**로 (의뢰인 21:03 · 3-3 3번). 종전에는 왼쪽에 붙어
   있었다(라디오 동그라미를 감춘 자리가 왼쪽에 그대로 남아 그만큼 밀렸다).
   ⛔두 칸에 똑같이 건다 — 한쪽만 가운데면 그것이 곧 유도다(UI지침 §2). */
.twoaxis .ans{padding:14px 8px;font-size:1.05rem;text-align:center}
/* ⛔두 칸은 완전히 같은 꼴이다(UI지침 §2). 고른 칸만 반전한다 — 어느 쪽을 고르든 같은 반전이라
   한쪽으로 기울지 않는다. 고른 것이 안 보이면 무엇을 골랐는지 모른 채 「다음」을 누르시게 된다. */
.twoaxis .ans:has(input:checked){background:var(--fg);color:#fff}
.twoaxis .ans input{margin:0 6px 0 0}
/* 라디오 동그라미는 `:has()` 가 되는 브라우저에서만 감춘다. 안 되는 브라우저에서는
   동그라미가 그대로 보여 **고른 것이 여전히 보인다.** 감추기만 하면 그쪽이 깜깜해진다. */
@supports selector(:has(*)){
  .twoaxis .ans input,.twoaxis .famdot input{position:absolute;opacity:0;pointer-events:none}
}

/* 축 이름 — 작고 흐리게. 크게 하면 낱말보다 세진다(§4 「단어가 주인공」). */
.twoaxis .axislabel{color:var(--muted);font-size:.82rem;font-weight:700;
  letter-spacing:.02em;margin:0 0 7px}
.twoaxis .axisrow{margin-bottom:26px}   /* ⛔두 덩이는 여백으로만 가른다. 선을 긋지 않는다(§4) */
.twoaxis .famq{font-size:.94rem;line-height:1.6;margin:0 0 10px}
/* 이해도 물음 — 친숙도 물음(.famq)과 **완전히 같은 꼴**이다. 한쪽 물음이 더 크거나
   진하면 그 축을 더 오래 보시게 되고, 두 축을 함께 재려던 뜻이 흔들린다.
   🔴2026-08-19 — 이 자리는 종전에 화면 맨 위(.hint)였다. 의뢰인이 그 자리를 지우고
     문안을 바꾸어 주셨다(3-3 1·2번). */
.twoaxis .axisq{font-size:.94rem;line-height:1.6;margin:0 0 10px}

/* 친숙도 일곱 칸 — §2 의 「두 칸 동일」을 일곱으로 그대로 넓힌 것이다.
   ⛔4번을 강조하지 않는다(굵게·크게·선·다른 색 전부). 가운데를 표시하면 중앙 쏠림이 생긴다 —
     「안다」 쪽 쏠림을 막은 것과 같은 성질의 자리다. 1~7 이 적혀 있어 4가 가운데인 것은 이미 보인다.
   ⛔색 눈금(빨강→초록) 금지. §6 그라데이션 금지이자, 색이 방향을 준다. */
.twoaxis .famscale{display:flex;gap:6px}
.twoaxis .famdot{flex:1 1 0;min-width:0;min-height:48px;display:flex;
  align-items:center;justify-content:center;border-radius:12px;background:#fff;
  border:2px solid var(--line);color:var(--fg);cursor:pointer;position:relative;
  -webkit-tap-highlight-color:transparent}
.twoaxis .famdot:has(input:checked){background:var(--fg);color:#fff}
.twoaxis .famdot:active{background:var(--fg);color:#fff}
.twoaxis .famdot:focus-within{outline:2px solid var(--accent);outline-offset:2px}
.twoaxis .famnum{font-size:1rem;font-weight:700;font-variant-numeric:tabular-nums}
/* 🔴2026-08-19 — 양끝 글자가 눈금 **위**로 올라가고 가운데에 「보통이다」가 들어왔다
   (의뢰인 21:03 · 3-3 4·5번). 눈금과 **한 줄에 두지는 않는다** — 그러면 폰 360px 에서
   칸이 30px 로 찌그러져 손가락 표적 44px 을 못 지킨다(08-19 실측). 위에 별도 줄로 둔다.
   ★세 칸이 폭이 같으므로(flex:1 1 0) 가운데 칸의 한가운데가 곧 줄의 한가운데이고,
     그것이 일곱 칸 가운데 **4번 칸의 한가운데**다. 자리를 눈으로 맞추지 않았다.
   ⚠️굵게(700)는 **의뢰인이 정하신 것**이다(UI지침 §2 「가운뎃값 강조 금지」와 부딪힌다).
     셋을 **같은 무게**로 두어 가운데만 더 세지지는 않게 했다. */
.twoaxis .famtops{display:flex;margin:0 2px 6px}
.twoaxis .famtop{flex:1 1 0;min-width:0;color:var(--fg);font-size:.8rem;font-weight:700}
.twoaxis .famtop:nth-child(2){text-align:center}
.twoaxis .famtop:last-child{text-align:right}

/* 「다음」 — 답 칸과 **다른 꼴**이다. §2 의 「동일하게」는 답 칸끼리의 규칙이고,
   이것은 답이 아니라 넘어가는 장치다. 오히려 답 칸과 헷갈리면 안 된다.
   🔴옛 회차는 답을 누르면 그 자리에서 넘어갔다. 두 축은 이 단추를 눌러야 넘어가므로,
     눈에 안 띄면 응답자가 첫 문항에서 멈추고 128문항 내내 걸린다. */
/* ⚠️줄 높이를 px 로 못 박는다 — 기다림 글자가 더 작아 배로 두면 단추 높이가 1px 달라진다.
   한 자리에 두는 뜻이 흔들리지 않게 두 꼴의 높이를 **똑같이** 맞춘다(실측 57 ↔ 58px). */
.twoaxis .nextbtn{width:100%;margin-top:22px;padding:16px 12px;font-size:1.05rem;
  line-height:24px;font-weight:700;border:2px solid var(--fg);border-radius:14px;
  background:var(--fg);color:#fff;cursor:pointer;font-family:inherit;
  -webkit-tap-highlight-color:transparent}
.twoaxis .nextbtn:active{background:#000;border-color:#000}
.twoaxis .nextbtn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
/* 덜 고르셨을 때 — 같은 자리에서 글자만 바뀐다(JB 08-19). 따로 경고 줄을 두면
   줄이 뜨고 지면서 단추가 아래위로 움직여 누르려던 자리가 달아난다.
   ⛔크기·자리는 「다음」과 똑같이 둔다. 높이가 달라지면 그것만으로 화면이 흔들린다.
   채우지 않고 흐리게 두어 **아직 누를 때가 아님**이 한눈에 보이게 한다. */
.twoaxis .nextbtn.wait{background:#fff;color:var(--muted);border-color:var(--line);
  font-size:.98rem}
.twoaxis .nextbtn.wait:active{background:#fff;border-color:var(--line)}

/* 좁은 폰(360px) — 일곱 칸이 41px 로 찌그러져 손가락 표적 44px 을 못 지켰다(실측 08-19).
   ⛔칸을 줄이는 대신 **칸 사이와 좌우 여백만** 줄인다. 글자·칸 크기는 안 건드린다.
   눈금만 본문 폭보다 조금 넓게 빼서 폭을 번다 — 다른 줄은 그대로 둔다. */
@media (max-width:389px){
  .twoaxis .famscale{gap:4px;margin-left:-10px;margin-right:-10px}
  .twoaxis .famtops{margin-left:-8px;margin-right:-8px}
}