:root {
  --bg: #f4f6f9; --panel: #ffffff; --ink: #0f1c2e; --muted: #5d6b7e; --line: #d6dde6;
  --accent: #0b3a82; --accent-dark: #072a5e; --accent-ink: #ffffff; --accent-soft: #e7eef8;
  --drum-head: #eef2f7; --drum-shell: #c9d3e0; --drum-line: #7d8ca1; --staff: #1b2636; --note: #0f1c2e;
  --warn: #b45309; --warn-bg: #fdf4e7; --ok: #17794a; --ok-bg: #e8f4ed; --paper: #ffffff;
  --shadow: 0 1px 2px rgba(15, 28, 46, .06);
  --r: 2px;
  --head-font: 'IBM Plex Sans KR', 'Malgun Gothic', sans-serif;
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--ink);
  font: 14px/1.55 'IBM Plex Sans KR', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
h1, h2, h3, .btn, button, .chip, .tabs { font-family: var(--head-font); font-weight: 500; }
header { display: flex; align-items: center; gap: 10px; padding: 12px 20px; background: var(--panel);
  border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 5; height: 60px; }
header .logo { width: 34px; height: 34px; }
header h1 { font-size: 21px; margin: 0; letter-spacing: .01em; }
header .sub { color: var(--muted); font-size: 13px; }
header .spacer { flex: 1; }
button, .btn { font-size: 15px; border: 1px solid var(--line); background: var(--panel); color: var(--ink);
  padding: 6px 16px; border-radius: var(--r); cursor: pointer; text-decoration: none; display: inline-flex; gap: 6px;
  align-items: center; justify-content: center; white-space: nowrap; box-shadow: none;
  transition: background .1s, border-color .1s; }

button.primary, .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent);
  box-shadow: none; }
button.primary:active, .btn.primary:active { box-shadow: none; }
button:disabled { opacity: .45; cursor: default; transform: none; }
.hidden { display: none !important; }
.mobile-only, .tabs.mobile-only { display: none; }

/* ---------- upload */
#upload { max-width: 720px; margin: 0 auto; padding: 22px 16px 40px; text-align: center; }
#upload .hero { width: 100%; max-width: 480px; margin: 0 auto -6px; display: block; }
#upload h2 { font-size: 30px; margin: 0 0 4px; }
#upload p.lead { color: var(--muted); margin: 0 0 20px; }
#drop { border: 1px dashed var(--drum-line); border-radius: var(--r); background: var(--panel); padding: 30px 20px;
  cursor: pointer; transition: background .1s, border-color .1s; box-shadow: var(--shadow); }
#drop:hover { border-color: var(--accent); }
#drop.over { background: var(--accent-soft); border-color: var(--accent);  }
#drop strong { display: block; font-family: var(--head-font); font-size: 21px; margin-bottom: 4px; }
#drop span { color: var(--muted); font-size: 13px; }
.steps { display: flex; gap: 10px; margin-top: 22px; text-align: left; }
.steps div { flex: 1; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px;
  font-size: 13px; color: var(--muted); }
.steps b { display: block; color: var(--ink); font-family: var(--head-font); font-weight: 400; font-size: 16px; }
.steps b i { font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r);
  background: var(--accent); color: var(--accent-ink); font-size: 13px; margin-right: 6px; }
.err { color: var(--warn); margin-top: 14px; min-height: 1.5em; }
.privacy { font-size: 12px; color: var(--muted); margin-top: 22px; line-height: 1.7; }

/* ---------- progress */
#progress { max-width: 480px; margin: 12vh auto 0; text-align: center; padding: 0 16px; }
#progress svg { width: 170px; height: 130px; }
#progress .stage { font-family: var(--head-font); font-size: 22px; margin-top: 8px; }
#progress .hint { color: var(--muted); font-size: 13px; margin-top: 4px; }

/* ---------- result */
/* steps 2 and 3 share one frame: the score on the left (toolbar, summary, page, page turning) and a panel
   on the right (heading, contents, the apply bar) */
.stepgrid { display: grid; grid-template-columns: minmax(0, 1fr) 480px; min-height: calc(100vh - 60px); }
.stepgrid > .main { padding: 16px 20px 30px; min-width: 0; }
.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.toolbar input { font: 400 19px var(--head-font); border: 1px solid transparent; background: transparent; color: var(--ink);
  padding: 4px 10px; border-radius: var(--r); min-width: 0; flex: 1 1 200px; }
.toolbar input:hover, .toolbar input:focus { border-color: var(--line); background: var(--panel); outline: none; }
.tabs { display: inline-flex; background: var(--line); border-radius: var(--r); padding: 3px; gap: 2px; }
.tabs button { border: 0; box-shadow: none; background: transparent; padding: 5px 14px; font-size: 14px; }
.tabs button.on { background: var(--panel); box-shadow: none; }
.summary { color: var(--muted); font-size: 13px; margin: 0 0 10px 6px; }
.summary b { color: var(--ink); }
.viewer { position: relative; }
.pageList { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
  scrollbar-width: none; overscroll-behavior-x: contain; }
.pageList::-webkit-scrollbar { display: none; }
.page { flex: 0 0 100%; scroll-snap-align: center; display: flex; justify-content: center; padding: 4px 0 8px; }
.sheet { position: relative; background: var(--paper); border-radius: var(--r); box-shadow: var(--shadow); border: 1px solid var(--line); }
.sheet img { display: block; max-width: 100%; max-height: calc(100vh - 215px); border-radius: var(--r); }
.busy-cover { position: absolute; inset: 0; background: rgba(255,255,255,.6); border-radius: var(--r);
  display: grid; place-items: center; font-family: var(--head-font); color: var(--accent); font-size: 18px; }
/* page turning: ‹ dots n / N쪽 › under the pages (the result viewer and the source editor) */
.pgbtn { width: 38px; height: 38px; padding: 0; font-size: 22px; flex: none; }
.pager .dots { display: inline-flex; gap: 7px; align-items: center; }
.nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; padding: 0; font-size: 24px;
  z-index: 2; }
.nav:active { transform: translateY(calc(-50% + 2px)); }
.nav.prev { left: 6px; } .nav.next { right: 6px; }
.pager { display: flex; justify-content: center; align-items: center; gap: 7px; margin-top: 8px; min-height: 20px; }
.pager .dot { width: 10px; height: 10px; border-radius: var(--r); background: var(--line); border: 0; padding: 0; box-shadow: none; }
.pager .dot.on { background: var(--accent); width: 22px; border-radius: var(--r); }
.pager .lbl { font-size: 12px; color: var(--muted); margin-left: 6px; font-family: var(--head-font); }

/* ---------- detection correction (원본 위에 상자) */
#detEditor { margin-top: 0; }
.detbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.detbar .hint { color: var(--muted); font-size: 13px; flex: 1 1 260px; }
.detbar select { font: inherit; padding: 5px 10px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); max-width: 210px; }
.detbar .lbl { font-family: var(--head-font); font-size: 13px; color: var(--muted); }
.detbar button { padding: 5px 12px; }
#detScroll { overflow: auto; max-height: calc(100vh - 215px); border-radius: var(--r); border: 1px solid var(--line); box-shadow: var(--shadow);
  background: var(--paper); }
#detSheet { position: relative; width: 100%; }
#detSheet img { display: block; width: 100%; user-select: none; -webkit-user-drag: none; }
#detSvg { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
#detSvg.hand { cursor: grab; }
#detSvg.hand:active { cursor: grabbing; }
.tools { display: inline-flex; background: var(--line); border-radius: var(--r); padding: 3px; gap: 2px; }
.tools button { border: 0; box-shadow: none; background: transparent; padding: 5px 12px; font-size: 14px; }
.tools button.on { background: var(--panel); box-shadow: none; }
.pickwrap { position: relative; }
.clsbtn { gap: 8px; padding: 3px 12px 3px 6px; }
.clsbtn .pic, .boxmenu .pic { flex: none; }
.pic { display: inline-block; background: var(--paper); border-radius: var(--r); vertical-align: middle;
  --note: #0f1c2e; --muted: #5d6b7e; }    /* printed-paper colours in both themes */
.picker { position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; width: min(560px, 92vw); max-height: 60vh; overflow: auto;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 8px 10px 12px; }
.pk-title { font-family: var(--head-font); font-size: 13px; color: var(--muted); margin: 8px 2px 4px; }
.pk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 6px; }
.pk { flex-direction: column; gap: 4px; padding: 6px 4px; border-radius: var(--r); box-shadow: none; white-space: normal;
  font-family: var(--head-font); font-size: 12px; line-height: 1.25; text-align: center; }
.pk.on { border-color: var(--accent); background: var(--accent-soft); }
.boxmenu { position: absolute; z-index: 10; transform: translate(8px, -100%); display: flex; gap: 6px; align-items: center;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow); padding: 5px 6px;
  white-space: nowrap; font-size: 13px; }
.boxmenu .nm { display: flex; align-items: center; gap: 6px; padding-right: 4px; }
.boxmenu .nm small { color: var(--muted); }
.boxmenu button { padding: 3px 10px; font-size: 13px; }
.boxmenu button.danger { color: #c0392b; border-color: #f2c6c0; }
#detSvg .bx { fill: transparent; stroke-width: 1.4; vector-effect: non-scaling-stroke; cursor: pointer; }
#detSvg .bx.head { stroke: #3b82c4; } #detSvg .bx.rest { stroke: #2f9e63; } #detSvg .bx.flag { stroke: #e08a2c; }
#detSvg .bx.other { stroke: #9a8a8a; }
#detSvg .bx.user { stroke: #0b3a82; stroke-width: 2.2; fill: rgba(11, 58, 130, .10); }
#detSvg .bx.sel { stroke: #0b3a82; stroke-width: 3; fill: rgba(11, 58, 130, .22); }
#detEditor.busy #detSvg, #detEditor.loading #detSvg { pointer-events: none; opacity: .5; }
.offsvg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; border-radius: var(--r); }
.offbar { fill: rgba(229, 57, 53, .13); stroke: #e53935; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.offlbl { fill: #e53935; font: 700 9px var(--head-font); paint-order: stroke; stroke: #fff; stroke-width: 2.5px; }
.offjump { pointer-events: auto; cursor: pointer; }
.offjump:hover .offbar { fill: rgba(229, 57, 53, .25); }
.offnum { fill: #e53935; }
.offnum + text { fill: #fff; font: 11px var(--head-font); }
.offbar.flash { animation: offflash 1.6s ease-out 2; }
@keyframes offflash { 0%, 100% { fill: rgba(229, 57, 53, .13); } 30% { fill: rgba(229, 57, 53, .45); } }
#detSvg .offbar { pointer-events: none; }
.dlg-back { position: fixed; inset: 0; z-index: 100; background: rgba(15, 28, 46, .4); display: flex;
  align-items: center; justify-content: center; padding: 16px; }
.dlg { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
  max-width: 420px; width: 100%; padding: 20px 20px 16px; }
.dlg p { margin: 0 0 16px; line-height: 1.6; }
.dlg .row { display: flex; justify-content: flex-end; gap: 8px; }
/* ---------- upload: what kind of score (drums only / with other parts) */
.kind { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow);
  padding: 16px 16px 14px; margin: 0 0 16px; text-align: left; }
.kind h3 { margin: 0 0 10px; font-size: 19px; text-align: center; }
.kind .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.kind .opt { flex-direction: column; gap: 4px; padding: 12px 10px; border-radius: var(--r); white-space: normal; font-size: 16px;
  box-shadow: none; }
.kind .opt small { font-family: var(--head-font); font-size: 12.5px; color: var(--muted); }
.kind .opt.on { border-color: var(--accent); background: var(--accent-soft); box-shadow: none; }
.kind .opt.on small { color: var(--accent-dark); }
.kind .which { display: flex; gap: 14px; align-items: center; justify-content: center; flex-wrap: wrap; margin-top: 14px;
  font-size: 16px; }
.kind .which { flex-wrap: nowrap; gap: 8px; }
.kind .which .say { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; justify-content: center; }
.kind .which select { width: auto; flex: none; font: 400 17px var(--head-font); padding: 6px 12px; border-radius: var(--r);
  border: 1px solid var(--accent); background: var(--panel); color: var(--ink); }
.kind .which svg { width: 110px; height: 84px; flex: none; background: var(--paper); border-radius: var(--r); padding: 4px; }
@media (max-width: 520px) { .kind .opts { grid-template-columns: 1fr; } .kind .which { flex-wrap: wrap; } .kind .which svg { width: 90px; height: 68px; } }
.staffpick { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; justify-content: center;
  margin: 12px 0 0; font-size: 14px; color: var(--ink); }
.staffpick select { width: auto; font: inherit; padding: 4px 10px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); }
.staffpick .muted { color: var(--muted); font-size: 12.5px; flex-basis: 100%; text-align: center; }
#resStaff { justify-content: flex-start; margin: 2px 0 10px; }
#resStaff .muted { text-align: left; }
#detSvg .draft { fill: rgba(11, 58, 130, .12); stroke: #0b3a82; stroke-dasharray: 4 3; stroke-width: 1.6; vector-effect: non-scaling-stroke; }
.legend { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin: 6px 2px 0; }
.legend i { display: inline-block; width: 12px; height: 9px; border: 1px solid; margin-right: 4px; vertical-align: -1px; }

aside { border-left: 1px solid var(--line); background: var(--panel); display: flex; flex-direction: column;
  height: calc(100vh - 60px); position: sticky; top: 60px; }
aside .head { padding: 14px 18px 4px; }
aside h3 { margin: 0; font-size: 19px; }
aside .head p { margin: 2px 0 0; color: var(--muted); font-size: 13px; }
.aside-body { overflow-y: auto; padding: 10px 14px 20px; flex: 1; }
aside .sheet img { max-height: none; }
.section-title { font-family: var(--head-font); font-size: 15px; margin: 16px 4px 8px; }

/* kit map */
.kitwrap { background: var(--bg); border-radius: var(--r); border: 1px solid var(--line); padding: 6px 4px 2px; position: relative; }
.kit { width: 100%; display: block; touch-action: none; user-select: none; }
.kit .piece { cursor: pointer; }
.kit .nh { cursor: grab; }
.kit .nh.drag { cursor: grabbing; }
.kit.dragging .nh:not(.drag) { pointer-events: none; }   /* the notes never hide a drum from the drop */
.kit .nh .ring { fill: none; stroke: transparent; stroke-width: 6; }
.kit .nh.sel .ring { stroke: var(--accent); stroke-dasharray: 10 7; }
.kit .nh.changed .ring { stroke: var(--ok); }
.kit .nh.check .ring { stroke: var(--warn); }
.kitlabel { position: absolute; left: 12px; top: 8px; font-family: var(--head-font); font-size: 14px; color: var(--accent);
  background: var(--panel); border-radius: var(--r); padding: 1px 10px; pointer-events: none; box-shadow: none; }
.detail { margin-top: 10px; border-radius: var(--r); border: 1px solid var(--line); padding: 12px 14px; background: var(--panel); }
.detail .hint { color: var(--muted); font-size: 13px; text-align: center; padding: 8px 0; }
.detail h4 { font-family: var(--head-font); font-weight: 400; font-size: 17px; margin: 0 0 2px; display: flex; gap: 8px; align-items: baseline; }
.detail h4 small { color: var(--muted); font-size: 12px; margin-left: auto; }
.row { border-top: 1px dotted var(--line); padding: 10px 0 4px; }
.row:first-of-type { border-top: 0; }
.row.sel .top .shape { color: var(--accent-dark); }
.detail .lbl { font-size: 12px; color: var(--muted); margin: 6px 0 3px; }
.detail > select { margin-bottom: 4px; }
.todo { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 0 2px 10px; font-size: 13px; color: var(--muted); }
.todo button { padding: 2px 10px; font-size: 13px; border-color: var(--warn); color: var(--warn); box-shadow: none; }
.kit .nh.insel .ring { stroke: var(--accent-soft); stroke-dasharray: none; }

.card { border: 1px solid var(--line); border-radius: var(--r); padding: 10px 12px 12px; margin-bottom: 10px; background: var(--panel); }
.card.check { border-color: var(--warn); background: var(--warn-bg); }
.card.changed { border-color: var(--ok); background: var(--ok-bg); }
.card .top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.glyph { width: 30px; height: 30px; flex: none; }
.card .shape { font-family: var(--head-font); font-size: 16px; }
.card .place { color: var(--muted); font-size: 13px; }
.card .count { margin-left: auto; font-size: 12px; color: var(--muted); font-family: var(--head-font); }
.chip { font-size: 12px; padding: 1px 9px; border-radius: var(--r); }
.chip.check { background: var(--warn); color: #fff; }
.chip.guess { background: var(--accent-soft); color: var(--accent-dark); }
.chip.shared { background: var(--ok-bg); color: var(--ok); border: 1.5px solid var(--ok); }
.why { font-size: 12.5px; color: var(--muted); margin: 4px 0 0; }
.kinds { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.shots { display: flex; gap: 6px; margin: 9px 0 10px; }
.shots img { flex: 1; min-width: 0; height: 74px; object-fit: contain; background: #fff; border-radius: var(--r);
  border: 1px solid var(--line); cursor: zoom-in; }
.pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pills button { padding: 3px 12px; font-size: 14px; box-shadow: none; }
.pills button.on { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); box-shadow: none; }
.pick { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.pick label { font-size: 12px; color: var(--muted); display: block; margin-bottom: 2px; }
select { font: inherit; width: 100%; padding: 7px 10px; border-radius: var(--r); border: 1px solid var(--line);
  background: var(--panel); color: var(--ink); }
.mark-row { display: grid; grid-template-columns: 1fr 150px; gap: 8px; align-items: center; padding: 8px 4px;
  border-bottom: 1px dotted var(--line); font-size: 14px; }
.mark-row small { color: var(--muted); }
.addrow { display: flex; gap: 6px; margin-top: 6px; }
.applybar { border-top: 1px solid var(--line); padding: 10px 14px; display: flex; gap: 8px; align-items: center; background: var(--panel); }
.applybar .info { flex: 1; font-size: 13px; color: var(--muted); }
#zoom { position: fixed; inset: 0; background: rgba(15, 28, 46, .6); display: flex; align-items: center; justify-content: center;
  z-index: 20; cursor: zoom-out; padding: 16px; }
#zoom img { max-width: min(720px, 100%); background: #fff; border-radius: var(--r); }

@media (max-width: 960px) {
  .stepgrid { grid-template-columns: 1fr; }
  aside { position: static; height: auto; border-left: 0; }
  .aside-body { overflow: visible; }
  .applybar { position: sticky; bottom: 0; }
  .steps { flex-direction: column; }
  header .sub { display: none; }
  .stepgrid > .main { padding: 12px 16px 20px; }
  .sheet img { max-height: none; }
  .nav { display: none; }
  .mobile-only, .tabs.mobile-only { display: inline-flex; }
  .stepgrid.map > .main > :not(.toolbar) { display: none; }
  .stepgrid:not(.map) aside { display: none; }
  #detScroll { max-height: 70vh; }
}

/* ---------- three steps: 1 올리기 · 2 판독 확인 (image scores) · 3 변환 결과 */
.stepper { display: flex; gap: 6px; align-items: center; margin-left: 14px; }
.stepper button { border: 0; box-shadow: none; background: transparent; padding: 4px 10px; font-size: 14px; color: var(--muted); gap: 6px; }
.stepper button i { font-style: normal; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--r);
  background: var(--line); color: var(--muted); font-size: 13px; }
.stepper button.on { color: var(--ink); background: var(--accent-soft); }
.stepper button.on i { background: var(--accent); color: var(--accent-ink); }
.stepper button.done i { background: var(--ok-bg); color: var(--ok); }
.stepper button:disabled { opacity: .35; }
.stepper .sep { color: var(--line); font-size: 13px; }

.offchips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; font-size: 13px; color: var(--muted); margin: 0 2px 6px; }
.offchips button { padding: 2px 10px 2px 4px; font-size: 13px; border-color: #f2b8b5; color: #c62828; box-shadow: none; }
.offchips button b { display: inline-grid; place-items: center; width: 19px; height: 19px; border-radius: var(--r); background: #e53935;
  color: #fff; font-weight: 400; font-size: 12px; margin-right: 2px; }
@media (max-width: 960px) {
  .stepper .lbl-long { display: none; }
}
header h1 { white-space: nowrap; }
@media (max-width: 560px) { .stepper { margin-left: 0; } .stepper button { padding: 4px 6px; } header h1 { font-size: 17px; } }
@media (max-width: 420px) { header h1 { display: none; } }

.hist { display: inline-flex; gap: 4px; }
.hist button { padding: 3px 11px; font-size: 18px; line-height: 1.1; }


/* ---------- step 2: the source and the result side by side, alike: same heading, same paper frame
   (same height, page fitted to the width, scrolled up and down), same page turning underneath */
:root { --frame-h: max(380px, calc(100vh - 330px)); }
#check { padding: 12px 20px 24px; }
.checkbar { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin-bottom: 8px; }
.checkbar h2 { margin: 0; font-size: 20px; }
.checkbar .summary { margin: 0; flex: 1 1 260px; }
#check .staffpick { justify-content: flex-start; margin: 0 0 8px; }
#check .staffpick .muted { flex-basis: auto; text-align: left; }
.pair { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pane { min-width: 0; }
.pane-h { display: flex; gap: 8px; align-items: baseline; margin: 0 4px 6px; }
.pane-h h3 { margin: 0; font-size: 17px; }
.pane-h small { color: var(--muted); font-size: 12.5px; }
.frame { height: var(--frame-h); overflow: auto; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); }
#detScroll.frame { max-height: none; }
#checkViewer .pageList { height: var(--frame-h); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  box-shadow: var(--shadow); }
#checkViewer .page { height: 100%; overflow-y: auto; display: block; padding: 0; }
#checkViewer .sheet { border: 0; border-radius: var(--r); box-shadow: none; background: none; }
#checkViewer .sheet img { width: 100%; max-height: none; border-radius: var(--r); }
#check .legend { margin-top: 2px; }
@media (max-width: 960px) {
  :root { --frame-h: 70vh; }
  .pair { grid-template-columns: 1fr; }
}

/* step 2: 변경 적용 right after the result's heading; both headings keep one height so the two frames line up */
.pane-h { min-height: 36px; align-items: center; }
.pane-h #checkApply { margin-left: 4px; padding: 4px 14px; font-size: 14px; }

/* 박자 표시 끄기: the red boxes and numbers of bars whose beats do not add up, hidden everywhere */
body.hide-off .offsvg, body.hide-off #detSvg .offbar, body.hide-off #detSvg .offjump { display: none; }
.offchips .offtoggle { padding: 2px 10px; font-size: 13px; }

/* the selected notehead's value in the box menu */
.boxmenu .val { display: inline-flex; gap: 6px; align-items: center; }
.boxmenu .val select { width: auto; padding: 3px 8px; border-radius: var(--r); font-size: 13px; }
.boxmenu .val small { color: var(--muted); }

/* the kit's notes invite a drag: a dashed ring and ‹ › on hover */
.kit .nh .draghint path { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; stroke-linejoin: round; }
.kit .nh .draghint { opacity: 0; transition: opacity .15s; }
.kit .nh:hover .draghint, .kit .nh.drag .draghint, .kit .nh.sel .draghint { opacity: 1; }
.kit .nh:hover .ring { stroke: var(--accent); stroke-dasharray: 8 6; }

/* 원본 -> 변환 mapping table under the kit */
.maptable { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: var(--panel); }
.maphead, .maprow { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: center; gap: 6px; }
.maphead { padding: 6px 12px; font-family: var(--head-font); font-size: 14px; color: var(--muted); background: var(--bg); }
.maprow { width: 100%; border: 0; border-top: 1px solid var(--line); border-radius: var(--r); box-shadow: none; background: var(--panel);
  padding: 4px 12px; text-align: left; justify-content: stretch; font-family: var(--head-font); white-space: normal; }
.maprow:active { transform: none; box-shadow: none; }
.maprow:hover { background: var(--accent-soft); }
.maprow.sel { background: var(--accent-soft); outline: 1px solid var(--accent); outline-offset: -4px; }
.maprow.changed .dst b { color: var(--ok); }
.maprow .src, .maprow .dst { display: flex; align-items: center; gap: 8px; min-width: 0; }
.maprow b { display: block; font-family: var(--head-font); font-weight: 400; font-size: 14px; }
.maprow small { color: var(--muted); font-size: 12px; }
.maprow .to { color: var(--muted); text-align: center; }
.mini { width: 46px; height: 44px; flex: none; background: var(--paper); border-radius: var(--r); }
.mini .st line { stroke: #7d8ca1; stroke-width: .9; }
.mini .mk { font: 12px 'Times New Roman', serif; fill: #0f1c2e; }
.mini .mko { fill: none; stroke: #0f1c2e; stroke-width: 1.1; }
.mini g[transform] { --note: #0f1c2e; --bg: #fff; }

/* 같은 마디 함께 고치기: the switch, the bars read the same and their boxes that change too */
.detbar .twins.on { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-dark); }
.detbar .twins b { margin-left: 6px; font-weight: 400; }
.detbar .twins b:empty { display: none; }
#detSvg .twinbar { fill: rgba(11, 58, 130, .05); stroke: #0b3a82; stroke-width: 1.2; stroke-dasharray: 5 4;
  vector-effect: non-scaling-stroke; pointer-events: none; }
#detSvg .bx.mate { stroke: #0b3a82; stroke-width: 2; stroke-dasharray: 3 2; }

/* 표기법: one row per group, the options as small staves */
.notrow { display: flex; align-items: center; gap: 10px; margin: 0 2px 8px; }
.notrow .nlbl { font-family: var(--head-font); font-size: 14px; min-width: 52px; }
.nopts { display: flex; gap: 8px; flex-wrap: wrap; }
.nopt { display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px 4px 6px; border-radius: var(--r); background: var(--panel); }
.nopt span { font-size: 13px; }
.nopt.on { border-color: var(--accent); background: var(--accent-soft); }

/* ---------- professional pass: flat, square, blue */
header { height: 52px; border-bottom: 1px solid var(--line); padding: 0 20px; }
header .logo { width: 22px; height: 22px; }
header h1 { font-size: 16px; font-weight: 600; letter-spacing: -.01em; }
.stepgrid { min-height: calc(100vh - 52px); }
aside { height: calc(100vh - 52px); top: 52px; }
button, .btn { font-size: 13.5px; padding: 6px 14px; }
button:hover:not(:disabled), .btn:hover { border-color: var(--accent); }
button.primary:hover:not(:disabled), .btn.primary:hover { background: var(--accent-dark); border-color: var(--accent-dark); }
button:focus-visible, .btn:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.stepper button, .tabs button, .tools button { font-size: 13px; }
.stepper button.on { background: transparent; color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }
.stepper button i, .steps b i { width: 20px; height: 20px; font-size: 12px; }
.stepper button.done i { background: var(--accent-soft); color: var(--accent); }
.tabs, .tools { background: transparent; border: 1px solid var(--line); padding: 2px; }
.tabs button.on, .tools button.on { background: var(--accent); color: var(--accent-ink); }
#upload { padding-top: 48px; }
#upload h2 { font-size: 24px; font-weight: 600; margin-bottom: 18px; }
.kind h3 { font-size: 15px; font-weight: 600; }
.kind .opt { font-size: 14px; }
.kind .opt.on small { color: var(--accent); }
#drop { padding: 34px 20px; }
#drop strong { font-size: 16px; font-weight: 600; color: var(--accent); }
.steps b { font-size: 14px; font-weight: 600; }
#progress { margin-top: 18vh; }
#progress .stage { font-size: 16px; font-weight: 500; margin-top: 14px; }
.bar { width: 220px; height: 3px; margin: 0 auto; background: var(--line); overflow: hidden; position: relative; }
.bar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 35%; background: var(--accent);
  animation: barslide 1.1s ease-in-out infinite; }
@keyframes barslide { from { left: -35%; } to { left: 100%; } }
aside h3, .checkbar h2 { font-size: 15px; font-weight: 600; }
.pane-h h3 { font-size: 14px; font-weight: 600; }
.section-title { font-size: 13px; font-weight: 600; color: var(--muted); text-transform: none; letter-spacing: .02em; }
.kitwrap { background: var(--panel); }
.kitlabel { color: var(--accent); border: 1px solid var(--line); }
.detail h4 { font-size: 15px; font-weight: 600; }
.maphead { font-size: 12px; font-weight: 600; }
.maprow b, .card .shape { font-weight: 500; }
.pager .dot { width: 14px; height: 3px; }
.pager .dot.on { width: 22px; height: 3px; }
.chip.check { background: var(--warn); }
.toolbar input { font-size: 17px; font-weight: 600; }
.busy-cover { background: rgba(255, 255, 255, .7); font-size: 14px; }
.offlbl { font-weight: 600; }
.stepper button:hover:not(:disabled):not(.on) { color: var(--accent); }
.mini .sm { stroke: #0f1c2e; stroke-width: 1.1; }
.mini .bm { fill: #0f1c2e; }

/* upload page: before / after slides, one line of a score each; all slides share one cell (the frame
   keeps the tallest one's height, nothing below jumps) */
.example { margin-top: 22px; border: 1px solid var(--line); background: var(--paper); text-align: left; }
.ex-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; border-bottom: 1px solid var(--line); }
.ex-cap { flex: 1; font-size: 13px; font-weight: 600; color: var(--ink); }
.ex-nav { display: inline-flex; align-items: center; gap: 8px; }
.ex-nav button { width: 28px; height: 28px; padding: 0; font-size: 16px; }
.ex-dots { display: inline-flex; gap: 5px; }
.ex-dots i { width: 14px; height: 3px; background: var(--line); cursor: pointer; }
.ex-dots i.on { background: var(--accent); }
.ex-slides { display: grid; }
.ex-slide { grid-area: 1 / 1; display: flex; flex-direction: column; justify-content: flex-start; gap: 0;
  opacity: 0; visibility: hidden; transition: opacity .35s, visibility .35s; }
.ex-slide.on { opacity: 1; visibility: visible; }
.ex-img { position: relative; padding: 22px 14px 10px; }
.ex-img + .ex-img { border-top: 1px dashed var(--line); }
.ex-img b { position: absolute; left: 14px; top: 6px; font-size: 11px; font-weight: 600; color: var(--muted); }
.ex-img.after b { color: var(--accent); }
.ex-img img { display: block; width: 100%; height: auto; max-height: 230px; object-fit: contain; object-position: left top; }