*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:system-ui,"Malgun Gothic",sans-serif;background:#f2f3f5;color:#1a1a1a}
button{font-size:15px;padding:10px 14px;border:1px solid #cbd5e1;background:#fff;border-radius:8px;touch-action:manipulation}
button.primary{background:#2563eb;color:#fff;border-color:#2563eb}
button.on{background:#1f2937;color:#fff;border-color:#1f2937}
input,select{font-size:15px;padding:8px;border:1px solid #cbd5e1;border-radius:6px}
.topbar{display:flex;justify-content:space-between;align-items:center;padding:10px 12px;background:#1f2937;color:#fff}
.topbar.reveal{background:#166534}
.pad{padding:12px}
.row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:6px 0}
.label{font-size:12px;color:#6b7280;text-transform:uppercase;margin-top:10px}
.canvas-wrap{position:relative;margin:10px 0;border:1px solid #ccc;background:#fff}
.canvas-wrap img{display:block;width:100%;height:auto;user-select:none;-webkit-user-drag:none}
.canvas-wrap canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none}
.answers{display:flex;gap:8px}.answers button{flex:1}
.chip{padding:2px 8px;border-radius:10px;font-size:13px}
.chip.ok{background:#dcfce7;color:#166534}.chip.no{background:#fee2e2;color:#991b1b}
.tools{display:flex;gap:6px;flex-wrap:wrap;align-items:center;padding:6px 0;font-size:13px}
.hidden{display:none}

/* 탭 */
.tabs { display: flex; gap: 4px; border-bottom: 1px solid #ddd; padding: 6px 8px 0; }
.tabs button { padding: 8px 14px; border: none; background: #f1f5f9; border-radius: 8px 8px 0 0; cursor: pointer; }
.tabs button.on { background: #2563eb; color: #fff; }

/* 통계 */
.stats h3 { margin: 16px 0 6px; font-size: 15px; }
.statrow { display: flex; gap: 8px; }
.statcard { flex: 1; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; padding: 10px; text-align: center; }
.statcard .sv { font-size: 20px; font-weight: 700; }
.statcard .sl { font-size: 12px; color: #64748b; }
.barrow { display: flex; align-items: center; gap: 8px; margin: 4px 0; font-size: 13px; }
.barlabel { width: 140px; flex: none; }
.bartrack { flex: 1; height: 12px; background: #e5e7eb; border-radius: 6px; overflow: hidden; }
.barfill { display: block; height: 100%; background: #2563eb; }
.barval { width: 44px; text-align: right; flex: none; }
ul.weak { list-style: none; padding: 0; }
ul.weak li { padding: 8px; border: 1px solid #fecaca; background: #fef2f2; border-radius: 8px; margin: 4px 0; cursor: pointer; }
.acts { display: flex; align-items: flex-end; gap: 2px; height: 46px; }
.actbar { width: 8px; background: #93c5fd; border-radius: 2px; }
.actbar.trend { background: #34d399; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { padding: 4px 10px; border-radius: 999px; background: #f1f5f9; font-size: 13px; }
.badge.warn { background: #fef3c7; }
.badge.ok { background: #dcfce7; }

/* 설정/프리셋 */
.presetlist { list-style: none; padding: 0; }
.presetlist li { display: flex; align-items: center; gap: 8px; padding: 6px; border-bottom: 1px solid #eee; }
.swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid #94a3b8; flex: none; }
.presetform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.presetform label { font-size: 13px; }

/* 풀이 툴바 프리셋 버튼 */
.tools .preset { padding: 6px 10px; border-radius: 8px; background: #fff; cursor: pointer; }
.tools .preset.on, .tools [data-tool].on { outline: 3px solid #2563eb; outline-offset: 1px; }
.review-ctl { margin-top: 6px; }
.review-ctl label { display: inline-flex; align-items: center; gap: 4px; }
.review-ctl input { width: 56px; }
.pwform { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pwform input { width: 160px; }