/* 모바일 우선. 한 손 조작 · 100문항 3분.
   색·배치 정본 = UI지침_의뢰인맞춤_20260727.md
   - 장식·그라데이션·애니메이션·외부폰트·다크모드 없음(지침 §6)
   - ★답변 버튼 두 개는 완전히 같은 모양이다. 색으로 유도하면 응답이 기운다(지침 §2) */
:root{
  --bg:#FAF8F5;          /* 웜 아이보리 */
  --fg:#2A2724;          /* 웜 차콜 */
  --muted:#7A7269;
  --line:#E5DFD7;        /* 웜 라인 */
  --card:#FFFFFF;
  --accent:#8B6F7D;      /* 뮤트 플럼 — 진행률·선택상태·관리자 강조에만 */
  --accent-soft:#EFE7EA;
  --danger:#A8503F;      /* 벽돌빛 */
}
*{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}
.error{background:#F7EBE8;border:1px solid #D9B6AC;color:#8C3D2C;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}

/* ── 안내·인구통계 ── */
.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}
legend{font-weight:700;font-size:.95rem;padding:0;margin-bottom:10px}
.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}

/* ── 문항 화면 ── */
.wrap.q{display:flex;flex-direction:column;min-height:100dvh;padding-top:12px}
.qbox{display:flex;flex-direction:column;justify-content:center;flex:1;min-height:78dvh}
.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}
.meaning{text-align:center;color:var(--muted);font-size:.98rem;line-height:1.6;
  margin:-26px 0 38px;word-break:keep-all}
.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}
.progress{margin-top:34px}
.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:9px}

/* 안내문 안의 '안다/모른다' 판단 기준 상자 — 눈이 멈추게 해서 건너뛰지 않게 한다 */
.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}

/* 문항 화면의 「판단 기준 다시 보기」 — 열면 덮어 보이고, 닫으면 제자리 */
.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 .closehint{color:var(--muted);font-size:.85rem;text-align:center;margin-top:18px}

/* 오탭 정정 — 답변 버튼과 경쟁하지 않도록 작고 조용하게 */
.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}
  .meaning{font-size:1.05rem}
}

/* ── 관리자·진행자 ── */
.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}
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}
.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}
td.meaning-cell{white-space:normal;max-width:320px}
td.band.회색{background:#F5EEDC}
td.band.쉬움{background:#E4EEE4}
td.band.어려움{background:#F4E3DF}