* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; overflow: hidden; }
body {
  margin: 0; background: #202b3d; color: #111;
  font-family: "Malgun Gothic", "Noto Sans KR", "Khmer OS Battambang",
               "Noto Sans Khmer", sans-serif;
}
/* the exam sits in a fixed 6:19 phone frame, so tapping never shifts it */
:root { --txt-scale: 1; --img-scale: 1; --fit: 1; --fitt: 1; }

/* iOS Safari counts its toolbars inside 100vh, which hides the pager row, so
   the visible viewport height is used and the home indicator is kept clear */
.app {
  position: relative; display: flex; flex-direction: column;
  height: 100vh; height: -webkit-fill-available; height: 100dvh;
  width: 100%; max-width: min(520px, calc(100vh * 9 / 19));
  margin: 0 auto; background: #eef1f6; overflow: hidden;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
#scroller { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.hidden { display: none !important; }

/* ------------------------------------------------------------- top bar */
.topbar {
  flex: 0 0 auto; z-index: 20; display: flex; align-items: center;
  gap: 10px; padding: 8px 12px; background: #4a7bd0; color: #fff;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
}
.icon { background: none; border: 0; width: 34px; padding: 0; }
.icon, .setbtn, button.primary {
  font-family: "Khmer OS Battambang", "Noto Sans Khmer",
               "Malgun Gothic", "Noto Sans KR", sans-serif;
}

.stop-mark { display: none; }
.audio button.busy .play-mark { display: none; }
.audio button.busy .stop-mark { display: block; }
.option-audio.busy .play-mark { display: none; }
.option-audio.busy .stop-mark { display: block; }
.icon span {
  display: block; height: 3px; margin: 5px 0; background: #fff; border-radius: 2px;
}
.brand { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; }
.brand img { width: 34px; height: 34px; border-radius: 50%; background: #fff; }
.brand b { display: block; font-size: 12px; letter-spacing: .3px; }
.brand small { display: block; font-size: 11px; opacity: .95; }
.clock {
  font-weight: 700; font-size: 16px; background: rgba(0, 0, 0, .18);
  padding: 5px 9px; border-radius: 6px; min-width: 66px; text-align: center;
}
.clock.low { background: #c62828; }

/* ---------------------------------------------------------------- card */
.card {
  background: rgba(255,255,255,.72); margin: 10px; padding: 12px;
  border: 1px solid #d7dce6;
  border-radius: 6px;
}
/* question number and the clock share one line */
.qhead {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px; padding-bottom: 8px;
  border-bottom: 1px solid #e3e7ef;
}
.card h2 { margin: 0; font-size: 18px; }
.qhead .clock { background: #4a7bd0; color: #fff; font-size: 15px; }
.qhead .clock.low { background: #c62828; }
/* the instruction line stands above the frame, so the frame belongs to the
   content itself, not to the whole block */
.qbox { border: 0; padding: 0; margin-bottom: 10px; }
.prompt, .body {
  font-family: "NanumGothic", "Noto Sans KR", sans-serif;
  font-size: calc(17px * var(--fitt)); line-height: 1.45; white-space: pre-wrap;
  word-break: keep-all; overflow-wrap: break-word;
}
.prompt { font-weight: 700; }
.body {
  margin-top: 7px; text-align: left;
  border: 1px solid #555; padding: 9px 10px; background: #fff;
}
.body.lead { border: 0; padding: 0; background: none; }
.sentence { border: 1px solid #555; padding: 9px 10px; background: #fff; }
.keyword { border: 1px solid #555; padding: 10px; background: #fff; }
/* a reading paragraph reads as a block, so both edges line up */
.body.para { text-align: justify; text-justify: inter-word; }
.emphasis-underline {
  text-decoration: underline;
  text-decoration-thickness: .09em;
  text-underline-offset: .12em;
}
.keyword {
  margin: 10px 0; text-align: center; font-weight: 700;
  font-size: calc(24px * var(--fitt));
  font-family: "NanumGothic", "Noto Sans KR", sans-serif; line-height: 1.4;
  white-space: pre-wrap;
}
.passage {
  border: 1px solid #666; padding: 10px; margin: 8px 0;
  font-size: calc(16px * var(--fitt));
  line-height: 1.5; white-space: pre-wrap; background: #fcfcfd;
  text-align: justify; text-justify: inter-word;
}
.qbox img, .optimg { display: block; max-width: 100%; margin: 6px auto; border: 0; }
.opt .txt img, .picture-grid .opt .txt img { border: 0; }
.km { color: #1f3b73; font-size: 14px; line-height: 1.5; }
.audio { display: flex; justify-content: center; margin: 10px 0; }
.audio button {
  width: calc(64px * var(--fit)); height: calc(64px * var(--fit));
  border-radius: 50%; border: 0; color: #fff;
  background: #4a7bd0; font-size: 30px; line-height: 1;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25);
}
.audio button:active { background: #35609f; }

/* ------------------------------------------------------------- options */
.status {
  padding: 12px; text-align: center; color: #fff; font-size: 18px;
  border-radius: 3px; margin-bottom: 10px;
}
.status.unsolved { background: #b3121f; }
.status.solved { background: #1b7a3d; }
.opts { border: 0; }
.opts.picture-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px; border: 0;
}
.picture-grid .opt {
  display: block; min-width: 0; padding: 8px;
  border: 0; border-radius: 4px;
}
.picture-grid .opt .num {
  margin: 0 auto 6px;
}
.picture-grid .opt .txt img {
  width: 100%; height: calc(26vh * var(--img-scale) * var(--fiti, 1));
  max-height: none; object-fit: contain;
}
.opt {
  display: flex; align-items: center; gap: 12px; padding: 13px 10px;
  border-bottom: 1px solid #b9c2d1; background: rgba(255,255,255,.7);
}
.opt .num {
  flex: 0 0 calc(42px * var(--fit)); width: calc(42px * var(--fit));
  height: calc(42px * var(--fit)); border: 2px solid #111;
  border-radius: 50%; display: grid; place-items: center;
  font-size: calc(18px * var(--fitt)); font-weight: 700;
  /* the Korean font's tall line box pushes the digit off the middle of the
     circle, so the digit is measured on its own metrics instead */
  font-family: Arial, Helvetica, sans-serif; line-height: 1;
}
.opt .txt {
  flex: 1; font-family: "NanumGothic", "Noto Sans KR", sans-serif;
  font-size: calc(20px * var(--fitt)); line-height: 1.35; font-weight: 600;
  white-space: pre-wrap;
}
.opt.sel { background: rgba(228,238,252,.92); }
.opt.sel .num { background: #1e63c8; border-color: #1e63c8; color: #fff; }
.opt.right .num { background: #21a24a; border-color: #21a24a; color: #fff; }
.opt.wrong .num { background: #c62828; border-color: #c62828; color: #fff; }

/* -------------------------------------------------------------- pager */
.pager { display: flex; gap: 8px; margin: 0 10px 6px; }
.pager button {
  flex: 1; padding: 12px 0; font-size: 15px; border: 1px solid #c3ccdb;
  background: #fff; border-radius: 6px;
  font-family: "Khmer OS Battambang", "Noto Sans Khmer", sans-serif;
}
.pager .ghost { background: #f4f7fc; }
.submitwrap { margin: 10px; }
button.primary {
  width: 100%; padding: 14px; font-size: 16px; font-weight: 700; color: #fff;
  background: #4a7bd0; border: 0; border-radius: 8px;
  font-family: "Khmer OS Battambang", "Noto Sans Khmer", sans-serif;
}

/* --------------------------------------------------------------- sheet */
.sheet {
  position: fixed; inset: 0; background: rgba(0, 0, 0, .45); z-index: 30;
  display: grid; place-items: center; padding: 16px;
}
.sheetbox {
  background: #fff; border-radius: 8px; padding: 14px; width: 100%;
  max-width: 420px; max-height: 80vh; overflow: auto;
}
.grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin: 10px 0; }
.grid button {
  padding: 12px 0; border: 1px solid #c3ccdb; background: #fff; border-radius: 6px;
  font-size: 15px;
  font-family: "Khmer OS Battambang", "Noto Sans Khmer", sans-serif;
}
.grid button.done { background: #21a24a; border-color: #21a24a; color: #fff; }
.grid button.cur { outline: 3px solid #4a7bd0; }
.ghost { width: 100%; padding: 12px; border: 1px solid #c3ccdb; background: #f4f7fc; border-radius: 6px; }
.option-audio {
  width: calc(64px * var(--fit)); height: calc(64px * var(--fit));
  margin: auto; border-radius: 50%;
  font-family: "Khmer OS Battambang", "Noto Sans Khmer", sans-serif;
}

/* --------------------------------------------------------- intro/result */
.intro h1 { font-size: 20px; text-align: center; line-height: 1.4; }
.intro .rules { font-size: 14px; color: #333; }
.kmtoggle { display: block; margin: 12px 0; font-size: 14px; }
.score {
  font-size: 40px; font-weight: 700; text-align: center; margin: 14px 0 20px;
  line-height: 1.35; color: #c62828;
}
.score .km { display: block; font-size: 26px; margin-top: 4px; color: #c62828; }
.rv { border-top: 1px solid #e3e7ef; padding: 8px 0; font-size: 15px; }
.rv.open { cursor: pointer; }
.rvsee {
  margin-left: 10px; font-size: 13px; color: #4a7bd0; text-decoration: underline;
  font-family: "Khmer OS Battambang", "Noto Sans Khmer", sans-serif;
}
.rvbox { max-width: 640px; }
#rvBody .prompt { font-size: 17px; font-weight: 700; margin-bottom: 6px; }
#rvBody .stem { display: block; width: 100%; max-height: 40vh; object-fit: contain; }
.rvopts { margin-top: 8px; }
.rvopt {
  display: flex; align-items: center; gap: 10px; padding: 8px 6px;
  border-bottom: 1px solid #e3e7ef; font-size: 16px;
}
.rvopt .txt { flex: 1; min-width: 0; }
.rvopt .txt img { width: 100%; max-height: 22vh; object-fit: contain; }
.rvopt.good { background: #e8f6ec; }
.rvopt.bad { background: #fdecec; }
.rvopt .tag { font-size: 13px; font-weight: 700; }
.rvopt .tag.ok { color: #1b7a3d; }
.rvopt .tag.no {
  color: #c62828;
  font-family: "Khmer OS Battambang", "Noto Sans Khmer", sans-serif;
}
.rvaudio {
  width: 54px; height: 54px; border-radius: 50%;
  background: #f0f2f6; border: 2px solid #111;
}
.rvaudio svg { display: block; margin: auto; }
.rv b { margin-right: 6px; }
.rv .ok { color: #1b7a3d; }
.rv .no { color: #c62828; }

/* ------------------------------------------------- centred logo watermark */
.wm {
  position: absolute; inset: 0; z-index: 0; display: grid; place-items: center;
  pointer-events: none;
}
.wm img { width: 78%; max-width: 400px; opacity: .3; }
.topbar, .card, .pager, .submitwrap, .foot { position: relative; z-index: 1; }

/* ------------------------------------------------------------- footer bar */
.foot {
  flex: 0 0 auto; display: flex;
  align-items: center; gap: 8px; padding: 6px 12px; background: #24365c;
  color: #fff;
}
.foot img { width: 26px; height: 26px; border-radius: 50%; background: #fff; }
/* the name has to stand on one line, however narrow the phone is */
.foot b {
  display: block; font-size: 11.5px; white-space: nowrap;
  overflow: hidden; text-overflow: clip;
}
.foot > div { min-width: 0; }
.foot span { font-size: 11.5px; opacity: .92; }
.intrologo { display: block; width: 92px; margin: 4px auto 6px; }
.center { text-align: center; font-size: 14px; margin: 4px 0 10px; }
.foot .km, .foot b { color: #fff; }
.sentence { font-size: calc(17px * var(--fitt)); line-height: 1.5; margin: 8px 0; }

.audio button { background: #f0f2f6; border: 2px solid #111; }
.option-audio { background: #f0f2f6; border: 2px solid #111; }
/* the state is shown by the icon alone: play when idle, stop while heard */
/* a clip is heard once only, as in the exam, so the mark goes pale after */
.audio button.used { opacity: .35; }
.option-audio.used { opacity: .35; }
/* the headphone sits in the exact middle of its circle */
.audio button, .option-audio {
  display: grid; place-items: center; padding: 0; box-sizing: border-box;
}
.audio button svg, .option-audio svg {
  display: block; margin: 0;
  width: calc(36px * var(--fit)); height: calc(36px * var(--fit));
}
.pager button:disabled, button.primary:disabled { opacity: .45; }
.pager button.final {
  background: #4a7bd0; border-color: #4a7bd0; color: #fff; font-weight: 700;
}

.lightbox {
  position: fixed; inset: 0; z-index: 50; display: flex;
  align-items: center; justify-content: center; padding: 18px;
  background: rgba(0, 0, 0, .82);
}
.lightbox img { display: block; width: 100%; max-height: 92vh; object-fit: contain; }
.lightbox-close {
  position: absolute; top: 8px; right: 12px; z-index: 1;
  width: 42px; height: 42px; border: 0; border-radius: 50%;
  background: rgba(255, 255, 255, .9); color: #111; font-size: 30px;
  line-height: 1;
}

.mk {
  display: inline-block; width: 30px; height: 30px; line-height: 30px;
  text-align: center; border-radius: 50%; color: #fff; font-style: normal;
  font-weight: 700; font-size: 16px; vertical-align: middle;
}
.mk.ok { background: #1b7a3d; color: #fff; }
.mk.no { background: #c62828; color: #fff; }
.rvans { margin-left: 6px; font-size: 14px; }
.rvtxt { margin-left: 6px; font-size: 17px; }

/* ------------------------------------------------- artwork in text questions */
.qbox img.stem {
  display: block; width: auto; max-width: min(100%, 420px);
  max-height: calc(38vh * var(--img-scale) * var(--fiti, 1));
  margin: 6px auto; object-fit: contain;
}
.qbox img.stem.wide {
  max-width: 100%; max-height: calc(60vh * var(--fiti, 1));
}
.qbox img.stem.chart {
  width: 100%; max-width: 100%;
  max-height: calc(68vh * var(--img-scale) * var(--fiti, 1));
}
.opt .txt img { display: block; width: 100%; max-height: calc(150px * var(--fiti, 1)); object-fit: contain; }
.setlist { display: grid; gap: 8px; margin-top: 10px; }
.setbtn {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 8px; padding: 11px 14px; font-size: 16px; border-radius: 8px;
  border: 1px solid #c4cde0; background: #fff; color: #14335f;
}
.setbtn small { font-size: 12px; color: #5a6b88; }

/* ------------------------------------------------- tablet / desktop layout
   the wide screen follows the original UBT computer screen: a status strip,
   the question on the left, the options on the right, and one row of three
   wide buttons at the foot.  The phone layout below 900px is untouched. */
.widecell { display: none; }
/* on a phone the exam pane also fills the screen exactly, so the question,
   the artwork and the four choices are read without scrolling */
@media (max-width: 899px) {
  /* a phone screen is already narrow, so the frame drops the tall-phone
     aspect cap and the artwork and the letters use the whole width */
  .app { max-width: 100%; }
  body.exam-mode #scroller { overflow: hidden; }
  body.exam-mode #examView {
    display: flex; flex-direction: column; height: 100%; min-height: 0;
  }
  body.exam-mode #examView .card {
    flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
    overflow: hidden;
  }
  body.exam-mode #examView .qhead { flex: 0 0 auto; }
  body.exam-mode #examView #qbody,
  body.exam-mode #examView #opts { flex: 0 1 auto; min-height: 0; overflow: auto; }
  body.exam-mode #examView .pager { flex: 0 0 auto; }
  /* a phone screen is short, so during the exam the two name bars, the frame
     around the question and the pager give their spare room to the question
     itself and the letters stay large */
  body.exam-mode .topbar { padding: 4px 10px; }
  body.exam-mode .icon span { height: 2.5px; margin: 4px 0; }
  body.exam-mode .brand img { width: 26px; height: 26px; }
  body.exam-mode .brand b { font-size: 11px; line-height: 1.25; }
  body.exam-mode .brand small { font-size: 10px; line-height: 1.25; }
  body.exam-mode .foot { padding: 3px 10px; gap: 6px; }
  body.exam-mode .foot img { width: 20px; height: 20px; }
  /* the block around the two footer lines carries its own strut, so it is put
     on the small size as well, otherwise the bar keeps a tall empty band */
  body.exam-mode .foot > div { font-size: 10px; }
  body.exam-mode .foot b, body.exam-mode .foot span {
    display: block; font-size: 10px; line-height: 1.25;
  }
  body.exam-mode #examView .card { margin: 6px; padding: 7px; }
  body.exam-mode #examView .qhead { margin-bottom: 6px; padding-bottom: 5px; }
  body.exam-mode #examView .pager { margin: 0 6px 4px; }
  body.exam-mode #examView .pager button { padding: 8px 0; font-size: 14px; }
  /* a spoken-answer question holds a picture plus five headphones, so on a
     phone the picture is kept small and the headphone rows tight, and all of
     them are seen at once */
  body.exam-mode #examView.audopts .qbox img.stem,
  body.exam-mode #examView.audopts .qbox img.stem.wide {
    max-height: calc(30vh * var(--img-scale) * var(--fiti, 1));
  }
  body.exam-mode #examView.audopts .audio { margin: 4px 0; }
  body.exam-mode #examView.audopts .audio button,
  body.exam-mode .opts.audio-list .option-audio {
    width: calc(46px * var(--fit)); height: calc(46px * var(--fit));
  }
  body.exam-mode #examView.audopts .audio button svg,
  body.exam-mode .opts.audio-list .option-audio svg {
    width: calc(26px * var(--fit)); height: calc(26px * var(--fit));
  }
  body.exam-mode .opts.audio-list .opt { padding: 5px 10px; }
  body.exam-mode .opts:not(.picture-grid):not(.audio-list) .opt {
    padding: 9px 10px;
  }
}
/* the shortest phones in landscape-like heights have no room for the name bar
   at the foot during the exam, so it steps aside and the question keeps its
   full size */
@media (max-width: 899px) and (max-height: 640px) {
  body.exam-mode .foot { display: none; }
  body.exam-mode #examView .card { margin: 4px; padding: 5px; }
  body.exam-mode #examView .qhead { margin-bottom: 4px; padding-bottom: 4px; }
  body.exam-mode #examView .pager button { padding: 7px 0; }
}
@media (min-width: 900px) {
  .app { max-width: 100%; }
  #examView {
    display: flex; flex-direction: column;
    min-height: calc(100vh - 132px);
  }
  #examView .card {
    flex: 1 1 auto; display: grid; margin: 8px 10px 0; padding: 0;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: auto 1fr;
    background: rgba(255, 255, 255, .82);
  }
  #examView .qhead {
    grid-column: 1 / -1; display: grid; margin: 0; padding: 0;
    grid-template-columns: auto 1fr 1fr 1fr auto auto;
    background: #f1f2f4; border-bottom: 1px solid #555;
  }
  .widecell, #examView .qhead h2, #examView .qhead .clock {
    display: grid; place-items: center; padding: 3px 6px; margin: 0;
    font-size: 13px; font-weight: 700; border-right: 1px solid #cfd4de;
    background: none; color: #111; border-radius: 0;
  }
  #examView .qhead .clock { border-right: 0; min-width: 96px; }
  /* the two steppers in the clock row scale the artwork and the text */
  #examView .qhead .zoomctl {
    display: flex; align-items: center; justify-content: center;
    gap: 5px; padding: 2px 6px;
  }
  #examView .qhead .zoomctl span {
    font-size: 12px; font-weight: 700; white-space: nowrap;
  }
  #examView .qhead .zoomctl button {
    flex: 0 0 auto; width: 24px; height: 24px; font-size: 16px;
    line-height: 1; padding: 0; border: 1px solid #9aa6bd;
    border-radius: 8px; background: #fff; color: #111;
  }
  #examView .qhead .zoomctl button:active { background: #dde6f6; }
  #examView .qhead .clock.low { background: #c62828; color: #fff; }
  #examView #qbody { border-right: 1px solid #555; overflow: auto; }
  #examView .qbox { border: 0; padding: 12px 20px; }
  #examView .prompt {
    font-size: calc(34px * var(--txt-scale) * var(--fitt)); line-height: 1.4;
  }
  /* the sentence to complete sits in its own frame, as the paper does */
  #examView .body, #examView .passage, #examView .sentence {
    font-size: calc(39px * var(--txt-scale) * var(--fitt)); line-height: 1.5;
    border: 1px solid #555; padding: 16px 18px; margin: 18px 0 0;
    background: #fff;
  }
  /* the instruction line above a target word carries no frame of its own */
  #examView .body.lead {
    border: 0; padding: 0; background: none; margin: 14px 0 0;
  }
  #examView .keyword {
    font-size: calc(56px * var(--txt-scale) * var(--fitt));
    border: 1px solid #555; padding: 18px; margin: 18px 0 0;
    background: #fff;
  }
  /* the headphone sits above its artwork, as the original screen shows */
  #examView .stemwrap {
    display: flex; flex-direction: column-reverse; align-items: center;
    margin: 22px auto 0;
  }
  #examView .stemwrap .audio { margin: 0 0 14px; }
  /* the artwork fills the left pane: a set height with contained scaling
     keeps it large without cropping or stretching */
  #examView .qbox img.stem {
    height: calc(58vh * var(--img-scale) * var(--fiti, 1)); width: auto;
    max-width: 100%; max-height: none;
    margin: 0; object-fit: contain;
  }
#examView .qbox img.stem.wide {
  height: auto; width: calc(82% * var(--img-scale));
  max-width: 100%; max-height: calc(58vh * var(--img-scale) * var(--fiti, 1));
}
#examView .qbox img.stem.chart {
  height: auto; width: calc(96% * var(--img-scale));
  max-width: 100%; max-height: calc(72vh * var(--img-scale) * var(--fiti, 1));
}
  #examView .picture-grid .opt .txt img {
    height: calc(30vh * var(--img-scale) * var(--fiti, 1)); max-height: none;
  }
  /* four picture choices share the right pane, so each one takes a quarter of
     its height and the whole set is read without scrolling */
  #examView.picopts .picture-grid .opt { padding: 6px 10px; }
  #examView.picopts .picture-grid .opt .txt img {
    height: calc(30vh * var(--img-scale) * var(--fiti, 1));
    width: 100%; max-height: none;
  }
  /* the set picker holds two roomy columns on a wide screen */
  #pickView { max-width: 900px; margin: 14px auto; }
  #pickView .intro h1 { font-size: 30px; }
  #pickView .intrologo { width: 130px; }
  #pickView .setlist { grid-template-columns: 1fr 1fr; gap: 12px; }
  #pickView .setbtn { padding: 18px 22px; font-size: 26px; }
  #examView .opts { border: 0; overflow: auto; }
  #examView .opts.picture-grid { padding: 12px; gap: 12px; }
  #examView .opt { padding: 14px 20px; background: none; }
  #examView .opt .txt {
    font-size: calc(34px * var(--txt-scale) * var(--fitt)); line-height: 1.35;
  }
  #examView .opt .num {
    flex: 0 0 calc(52px * var(--fit)); width: calc(52px * var(--fit));
    height: calc(52px * var(--fit)); font-size: calc(22px * var(--fitt));
  }
  #examView .audio button {
    width: calc(66px * var(--fit)); height: calc(66px * var(--fit));
  }
  #examView .option-audio {
    width: calc(66px * var(--fit)); height: calc(66px * var(--fit));
  }
  #examView .audio button svg, #examView .option-audio svg {
    width: calc(40px * var(--fit)); height: calc(40px * var(--fit));
  }
  .pager { margin: 4px 14px 5px; gap: 10px; justify-content: space-between; }
  .pager button {
    flex: 0 0 auto; width: 120px; padding: 5px 0; font-size: 14px;
  }
  .pager .gridicon .bars { width: 22px; gap: 3px; }
  .pager .gridicon .bars i { height: 3px; }
  /* the exam pane fits the screen exactly, so the 이전 / 다음 row is always
     in view and only the question and the options scroll */
  body.exam-mode #scroller { overflow: hidden; }
  body.exam-mode #examView {
    height: 100%; min-height: 0;
  }
  body.exam-mode #examView .card { min-height: 0; overflow: hidden; }
  body.exam-mode #examView #qbody,
  body.exam-mode #examView .opts { min-height: 0; overflow: auto; }
  .brand b { font-size: 15px; }
  .brand small { font-size: 13px; }
  .wm img { max-width: 520px; }
}

.bars { display: inline-flex; flex-direction: column; justify-content: center; gap: 3px; vertical-align: middle; width: 24px; }
.bars i { display: block; height: 3px; border-radius: 2px; background: currentColor; }
#listView .submitwrap { margin: 12px 0 0; }
#listView .submitwrap button { width: 100%; }

/* ------------------------------------------- entitlement on the set picker */
.setbadge {
  flex: 0 0 auto; padding: 3px 9px; border-radius: 999px;
  font-size: 12px; font-weight: 700; white-space: nowrap;
  font-family: "Khmer OS Battambang", "Noto Sans Khmer", sans-serif;
}
.setbtn.free .setbadge { color: #166534; background: #dcfce7; }
.setbtn.paid .setbadge { color: #166534; background: #d1fae5; }
.setbtn.pending .setbadge { color: #1e40af; background: #dbeafe; }
.setbtn.locked { border-color: #fcd34d; background: #fffbeb; }
.setbtn.locked .setbadge { color: #92400e; background: #fef3c7; }