:root {
  --fg: #111;
  --bg: #fffdf8;
  --card: #fff;
  --line: #555;
  --primary: #0b4fb3;
  --ok: #0a6b2d;
  --okbg: #e3f5e8;
  --no: #a3200f;
  --nobg: #fdecea;
  --focus: #ff9900;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { font-size: 22px; }
body {
  margin: 0; color: var(--fg); background: var(--bg);
  font-family: "Malgun Gothic", "맑은 고딕", system-ui, sans-serif; line-height: 1.6;
}
.top { background: var(--primary); padding: 12px 16px; }
.brand { color: #fff; font-weight: bold; text-decoration: none; font-size: 1.1rem; }
main { max-width: 900px; margin: 0 auto; padding: 16px 16px 64px; }
h1 { font-size: 1.6rem; line-height: 1.3; margin: 16px 0; }
h2 { font-size: 1.25rem; margin: 8px 0; }
h1:focus { outline: none; }
small { font-size: 0.85rem; }
kbd {
  display: inline-block; border: 2px solid var(--line); border-bottom-width: 4px; border-radius: 6px;
  padding: 0 8px; background: #fff; font-family: inherit; font-weight: bold;
}
:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }

.btn {
  font: inherit; font-size: 1rem; min-height: 56px; padding: 10px 22px; margin: 6px 0;
  border: 3px solid var(--primary); border-radius: 12px; background: #fff; color: var(--primary);
  cursor: pointer; font-weight: bold;
}
.btn.primary { background: var(--primary); color: #fff; }
.btn.big { font-size: 1.15rem; min-height: 72px; width: 100%; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn.level { display: block; text-align: left; margin: 12px 0; }
.btn.level.current { background: #eaf1fc; }
.row { display: flex; gap: 12px; margin: 16px 0; }
.row.wrap { flex-wrap: wrap; }

.card { background: var(--card); border: 2px solid #ccc; border-radius: 16px; padding: 16px 20px; margin: 16px 0; }
.card.today { border: 4px solid var(--primary); }
.label { color: #444; font-size: 0.9rem; margin: 4px 0; }
.banner { padding: 14px 18px; border-radius: 12px; }
.banner.ok { background: var(--okbg); border: 2px solid var(--ok); }
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.summary div { background: #fff; border: 2px solid #ccc; border-radius: 12px; padding: 10px 14px; }
.summary span { display: block; color: #444; font-size: 0.85rem; }
.loading { font-size: 1.2rem; }

#login label { display: block; font-weight: bold; }
input[type=text], input[type=password], textarea {
  font: inherit; font-size: 1.1rem; width: 100%; padding: 12px; border: 3px solid var(--line); border-radius: 10px; background: #fff;
}
.msg { min-height: 1.6em; font-weight: bold; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

.instruction { font-size: 1.2rem; font-weight: bold; background: #fff7d6; border-left: 8px solid #e0a800; padding: 14px 18px; border-radius: 8px; }
.capture-tip { background: #eef4ff; padding: 12px 16px; border-radius: 8px; }
.steps li { margin: 8px 0; }

.attach .drop {
  border: 4px dashed var(--line); border-radius: 16px; padding: 28px 16px; text-align: center; background: #fff; margin: 12px 0;
}
.attach .drop.over { background: #eaf1fc; border-color: var(--primary); }
.attach .preview { display: block; max-width: 100%; max-height: 400px; border: 2px solid #ccc; margin: 12px 0; }

.big-score { font-size: 1.3rem; }
.big-score b { font-size: 2.2rem; }
.big-score.ok b { color: var(--ok); }
.big-score.no b { color: var(--no); }
.criteria { list-style: none; padding: 0; }
.criteria li { padding: 10px 14px; border-radius: 10px; margin: 8px 0; }
.criteria li.ok { background: var(--okbg); }
.criteria li.no { background: var(--nobg); }
.retry { list-style: none; padding: 0; }

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.9rem; }
th, td { border: 1px solid #999; padding: 8px; text-align: center; }
tbody th, tfoot th { text-align: left; }

/* A유형 실습 */
.task { margin: 16px 0; }
.tiles { display: flex; flex-wrap: wrap; gap: 16px; margin: 12px 0; }
.tile {
  font: inherit; font-size: 1.1rem; min-width: 130px; min-height: 100px; padding: 12px;
  background: #fff; border: 3px solid #bbb; border-radius: 12px; cursor: pointer; user-select: none;
}
.tile.selected, .part.selected, .opt.selected { background: #cfe0fb; border-color: var(--primary); }
.zones { display: flex; flex-wrap: wrap; gap: 16px; }
.zone { flex: 1; min-width: 200px; min-height: 150px; border: 4px dashed var(--line); border-radius: 12px; padding: 12px; font-weight: bold; }
.zone.over { background: #eaf1fc; }
.ctx-area { position: relative; min-height: 260px; }
.ctxmenu {
  position: absolute; z-index: 5; min-width: 200px; background: #fff; border: 2px solid #888; border-radius: 10px;
  box-shadow: 0 6px 18px rgba(0,0,0,.25); padding: 6px;
}
.ctxmenu button { display: block; width: 100%; text-align: left; font: inherit; padding: 8px 12px; border: 0; background: none; cursor: pointer; border-radius: 6px; }
.ctxmenu button:hover { background: #eaf1fc; }
.keyshow, .note { font-size: 1.1rem; font-weight: bold; color: var(--primary); min-height: 1.6em; }
.copy-src, .passage { font-size: 1.2rem; background: #fff; border: 2px solid #ccc; padding: 14px; border-radius: 10px; }
.options { display: flex; flex-direction: column; gap: 8px; }
.opt { text-align: left; }

/* 모의 화면 */
.mk { border: 2px solid #777; border-radius: 10px; background: #fff; overflow: hidden; font-size: 0.85rem; }
.part { font: inherit; border: 2px solid transparent; background: none; cursor: pointer; padding: 6px 10px; border-radius: 6px; }
.part:hover { background: #e8e8e8; }
.mk-bar { display: flex; align-items: center; background: #eef0f3; }
.mk-title, .mk-tab { flex: 1; text-align: left; }
.mk-tab { flex: 0 1 220px; background: #fff; border-radius: 8px 8px 0 0; }
.grow { flex: 1; }
.wb { width: 54px; }
.wb.close:hover { background: #c42b1c; color: #fff; }
.mk-menu, .mk-tool { display: flex; gap: 4px; padding: 4px 8px; border-bottom: 1px solid #ddd; flex-wrap: wrap; }
.mk-addr { flex: 1; text-align: left; border: 1px solid #aaa; background: #f6f6f6; }
.mk-search { border: 1px solid #aaa; }
.mk-body { min-height: 120px; padding: 12px; }
.mk-text { display: block; width: 100%; min-height: 160px; text-align: left; vertical-align: top; }
.mk-split { display: flex; min-height: 200px; }
.mk-nav { display: flex; flex-direction: column; border-right: 1px solid #ddd; padding: 6px; }
.mk-nav .part { text-align: left; }
.mk-files { display: flex; flex-wrap: wrap; align-content: flex-start; gap: 8px; padding: 8px; }
.mk-file { width: 120px; min-height: 90px; }
.mk-file, .mk-icon { word-break: keep-all; }
.ic { display: block; font-size: 2rem; line-height: 1.2; }
.mk-desk { background: linear-gradient(#5b8fd6, #a7c4ec); min-height: 320px; display: flex; flex-direction: column; }
.mk-icons { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px; }
.mk-icon { color: #fff; text-shadow: 0 1px 2px #000; width: 100px; font-size: 0.9rem; }
.mk-taskbar { display: flex; align-items: center; justify-content: center; gap: 4px; background: #e9edf2; padding: 4px; }
.tb { font-size: 1.1rem; min-width: 48px; }
.tb.wide { min-width: 140px; border: 1px solid #aaa; font-size: 0.85rem; }
.tb.clock { font-size: 0.7rem; line-height: 1.2; }

@media (max-width: 600px) {
  html { font-size: 20px; }
  .row { flex-direction: column; }
}