@font-face {
  font-family: 'NeoDunggeunmo Pro';
  src: url('../assets/fonts/NeoDunggeunmoPro-Regular.woff2') format('woff2');
  font-display: swap;
}

:root {
  --uqr-font-display: 'NeoDunggeunmo Pro', 'Malgun Gothic', system-ui, sans-serif;
  --uqr-font-reading: Pretendard, 'Noto Sans KR', 'Malgun Gothic', system-ui, sans-serif;
  --uqr-font-code: ui-monospace, Consolas, monospace;
  --uqr-ink: #173044;
  --uqr-line: #9fb8c8;
  --uqr-surface: #edf4f3;
  --uqr-paper: #fffef9;
}

.uqr-host, .uqr-host * { box-sizing: border-box; }
.uqr-host { height: 100%; min-height: 0; color: var(--uqr-ink); font-family: var(--uqr-font-reading); word-break: keep-all; overflow-wrap: normal; }
.uqr-card { position: relative; display: flex; flex-direction: column; height: 100%; min-height: 0; overflow: hidden; border: 4px solid #18364d; border-radius: 20px; background: var(--uqr-surface); box-shadow: 0 10px 0 #071d2b; }
.uqr-card.uqr-locked .uqr-material-area, .uqr-card.uqr-locked .uqr-answer-area, .uqr-card.uqr-locked .uqr-actions { pointer-events: none; }
.uqr-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: clamp(14px, 2.2vw, 28px); scroll-padding-block: 18px 104px; }
.uqr-question-head { position: sticky; z-index: 12; top: -2px; display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: -2px 0 6px; padding: 2px 0 6px; background: linear-gradient(var(--uqr-surface) 76%, transparent); }
.uqr-meta { display: inline-block; padding: 6px 11px; border-radius: 999px; background: var(--uqr-accent); color: #fff; font: 800 13px/1.25 var(--uqr-font-reading); }
.uqr-question-code { flex: 0 0 auto; max-width: 56%; overflow: hidden; padding: 6px 9px; border: 1px solid #9fb8c8; border-radius: 999px; background: #f8fbfc; color: #34566b; font: 700 12px/1.2 var(--uqr-font-code); text-overflow: ellipsis; white-space: nowrap; }
.uqr-question-code.is-missing { border-color: #d65d53; color: #a7362e; }
.uqr-prompt { margin: 14px 0 16px; color: #122c40; font: 800 clamp(22px, 2.5vw, 32px)/1.38 var(--uqr-font-reading); word-break: keep-all; }
.uqr-layout { display: grid; gap: 16px; }
.uqr-material-area { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; justify-content: center; }
.uqr-material-area.count-0 { display: none; }
.uqr-material-card { position: relative; min-width: 0; margin: 0; padding: 8px; overflow: visible; border: 2px solid #bed1dc; border-radius: 13px; background: #fff; text-align: center; }
.uqr-material-zoom { display: block; width: 100%; padding: 0; border: 0; border-radius: 8px; background: transparent; cursor: zoom-in; }
.uqr-material-card img { display: block; width: 100%; height: 190px; object-fit: contain; border-radius: 8px; }
.uqr-material-card figcaption { margin-top: 7px; font-size: 15px; font-weight: 700; line-height: 1.4; word-break: keep-all; }
.uqr-answer-area { display: grid; align-content: start; gap: 10px; min-width: 0; }
.uqr-choice, .uqr-card-item { width: 100%; min-height: 54px; padding: 12px 14px; border: 2px solid var(--uqr-line); border-radius: 12px; background: #fff; color: var(--uqr-ink); text-align: left; font: 750 clamp(16px, 1.6vw, 19px)/1.45 var(--uqr-font-reading); cursor: pointer; word-break: keep-all; touch-action: none; }
.uqr-choice.is-selected { border-color: #1c9bd2; background: #d9f2ff; box-shadow: 0 0 0 3px #b7e8fb; }
.uqr-feedback { flex: 0 0 auto; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px 12px; max-height: min(27dvh, 210px); overflow-y: auto; margin: 0 14px 8px; padding: 12px 14px; border-left: 6px solid #f4b23d; border-radius: 10px; background: #fff7d9; font: 700 17px/1.5 var(--uqr-font-reading); }
.uqr-feedback[hidden] { display: none; }
.uqr-feedback strong { grid-column: 1 / -1; font-size: 19px; }
.uqr-feedback span:not(.uqr-score-earned) { grid-column: 1 / -1; }
.uqr-score-earned { color: #17684f; font-weight: 900; }
.uqr-feedback-continue { min-width: 220px; }
.uqr-actions { position: relative; z-index: 14; flex: 0 0 auto; display: flex; gap: 10px; padding: 10px 14px 12px; border-top: 2px solid #c8d8dc; background: #edf4f3; }
.uqr-btn { min-height: 52px; padding: 10px 18px; border-radius: 12px; font: 800 17px/1.25 var(--uqr-font-reading); cursor: pointer; }
.uqr-actions .uqr-btn, .uqr-modal-actions .uqr-btn { font-family: var(--uqr-font-display); }
.uqr-btn:disabled { opacity: .55; cursor: default; }
.uqr-btn-primary { flex: 1; border: 2px solid #bd7413; background: linear-gradient(#ffe09a, #ffc85e); color: #342207; }
.uqr-btn-secondary { border: 2px solid #9db2c0; background: #f7fbfc; color: #294054; }

.uqr-order-work { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.uqr-order-work h3 { margin: 0 0 8px; font-size: 17px; }
.uqr-order-bank, .uqr-order-slots { display: grid; gap: 8px; min-height: 120px; padding: 10px; border: 2px dashed #86a9bf; border-radius: 13px; }
.uqr-order-slot { position: relative; min-height: 68px; padding: 6px 6px 6px 46px; border: 2px dashed #b1c5d1; border-radius: 10px; }
.uqr-order-slot::before { content: attr(data-order-number); position: absolute; left: 10px; top: 50%; display: grid; place-items: center; width: 28px; height: 28px; transform: translateY(-50%); border-radius: 50%; background: #315f7c; color: #fff; font-weight: 900; }
.uqr-card-item.is-dragging { opacity: .35; }
.uqr-drag-ghost { position: fixed; z-index: 120; pointer-events: none; opacity: .92; box-shadow: 0 9px 22px #001b2c55; }
[data-uqr-drop].is-drag-over { border-color: #e8a727 !important; background: #fff3c9 !important; box-shadow: 0 0 0 4px #ffdf7d88; }
.uqr-classify-bank { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 10px; }
.uqr-classify-bins { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.uqr-classify-bin { min-height: 132px; padding: 9px; border: 2px dashed #4aa87e; border-radius: 13px; background: #e6f8ef; }
.uqr-classify-bin h3 { margin: 0 0 8px; font-size: 17px; }
.uqr-classify-bin .uqr-card-item + .uqr-card-item { margin-top: 7px; }
.uqr-symbol-row { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.uqr-symbol-row .uqr-choice { width: auto; min-width: 78px; text-align: center; font-size: 23px; }
.uqr-staged-step { padding: 12px 14px; border-radius: 12px; background: #e6f0f5; }
.uqr-staged-step b { display: inline-block; margin-bottom: 6px; }
.uqr-staged-step p { margin: 0; font-size: 18px; font-weight: 750; line-height: 1.5; }

.uqr-annotation-layer { position: absolute; inset: 8px 8px 32px; pointer-events: none; }
.uqr-annotation-layer svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.uqr-leader-line { stroke: #fff; stroke-width: 6; paint-order: stroke; filter: drop-shadow(0 0 1px #122a36); }
.uqr-leader-line + .uqr-leader-line { stroke: #17648d; }
.uqr-annotation-layer line { stroke: #1677a9; stroke-width: 3.3; vector-effect: non-scaling-stroke; }
.uqr-annotation-badge { position: absolute; z-index: 2; display: grid; place-items: center; width: 42px; height: 42px; padding: 0; transform: translate(-50%, -50%); border: 3px solid #17648d; border-radius: 50%; background: #fff; color: #123b55; font: 900 20px/1 var(--uqr-font-reading); pointer-events: auto; cursor: pointer; box-shadow: 0 0 0 3px #fff; }
.uqr-annotation-badge.is-selected { border-color: #d7830e; background: #ffd36b; box-shadow: 0 0 0 4px #fff, 0 0 0 8px #ffd36b77; }

.uqr-correct-overlay { position: absolute; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center; gap: 8px; overflow: hidden; border-radius: 16px; background: rgba(239, 250, 245, .78); opacity: 0; pointer-events: none; }
.uqr-correct-overlay.is-active { opacity: 1; animation: uqrBackdrop .7s ease-out both; }
.uqr-correct-overlay.is-step { background: rgba(239, 250, 245, .7); }
.uqr-correct-check { position: relative; z-index: 2; display: grid; place-items: center; width: 72px; height: 72px; border: 5px solid #2eaa72; border-radius: 50%; background: #effff6; color: #168d59; font: 900 48px/1 var(--uqr-font-display); box-shadow: 0 0 0 8px #4acf8e2e, 0 8px 20px #12674733; }
.uqr-correct-overlay.is-retry .uqr-correct-check { border-color: #32a9a6; color: #168887; }
.uqr-correct-text { position: relative; z-index: 2; padding: 7px 16px; border: 3px solid #d9a32d; border-radius: 999px; background: #fff4bd; color: #5c3b09; font: 900 clamp(22px, 3vw, 34px)/1 var(--uqr-font-display); box-shadow: 0 5px 0 #b97815; }
.uqr-correct-ring { position: absolute; left: 50%; top: 46%; width: 90px; height: 90px; border: 7px solid #f3be37ad; border-radius: 50%; transform: translate(-50%, -50%); animation: uqrRing .7s ease-out both; }
.uqr-correct-particles i { position: absolute; left: 50%; top: 45%; width: 8px; height: 8px; background: #f4bd36; clip-path: polygon(50% 0, 63% 36%, 100% 50%, 63% 64%, 50% 100%, 37% 64%, 0 50%, 37% 36%); animation: uqrParticle .7s ease-out both; }
.uqr-correct-particles i:nth-child(1){--x:-112px;--y:-56px}.uqr-correct-particles i:nth-child(2){--x:-88px;--y:54px}.uqr-correct-particles i:nth-child(3){--x:-28px;--y:-104px}.uqr-correct-particles i:nth-child(4){--x:36px;--y:-98px}.uqr-correct-particles i:nth-child(5){--x:96px;--y:-44px}.uqr-correct-particles i:nth-child(6){--x:92px;--y:58px}
@keyframes uqrBackdrop { 0%,100%{opacity:0} 18%,82%{opacity:1} }
@keyframes uqrRing { from{opacity:.9;transform:translate(-50%,-50%) scale(.45)} to{opacity:0;transform:translate(-50%,-50%) scale(2.25)} }
@keyframes uqrParticle { 0%{opacity:0;transform:translate(-50%,-50%) scale(.5)} 24%{opacity:1} 100%{opacity:0;transform:translate(calc(-50% + var(--x)),calc(-50% + var(--y))) scale(1.25)} }

.uqr-modal-root { position: fixed; inset: 0; z-index: 100; display: grid; place-items: center; padding: 16px; background: #04111bbb; }
.uqr-modal-root[hidden] { display: none; }
.uqr-modal-card { width: min(620px, 100%); max-height: 92dvh; overflow: auto; padding: 20px; border: 4px solid #1b3b52; border-radius: 18px; background: #f8f5e9; box-shadow: 0 14px 0 #03111dcc; }
.uqr-modal-card h2 { margin: 0 0 14px; font: 400 25px/1.35 var(--uqr-font-display); }
.uqr-modal-success { border-color: #218764; background: #f5fff9; box-shadow: 0 14px 0 #0e513e; }
.uqr-modal-wrong { border-color: #cc665c; background: #fffaf1; box-shadow: 0 14px 0 #6b2d29; }
.uqr-success-explanation { margin: 0; font: 700 18px/1.55 var(--uqr-font-reading); word-break: keep-all; }
.uqr-result-score { margin-top: 14px; padding: 10px 13px; border-radius: 11px; background: #e6f7ef; color: #17684f; font: 400 20px/1.3 var(--uqr-font-display); text-align: center; }
.uqr-modal-actions { display: flex; gap: 10px; margin-top: 16px; }
.uqr-material-zoom-modal { text-align: center; }
.uqr-material-zoom-modal img { max-width: 100%; max-height: 68dvh; object-fit: contain; border-radius: 12px; }
.uqr-answer-reveal { padding: 13px; border: 2px solid #7aab9a; border-radius: 13px; background: #e9f6f1; }
.uqr-answer-reveal h3, .uqr-answer-explanation h3 { margin: 0 0 10px; font-size: 20px; }
.uqr-answer-chip-list, .uqr-answer-pairs { display: grid; gap: 8px; }
.uqr-answer-chip { display: flex; gap: 9px; padding: 11px 12px; border: 2px solid #83bba8; border-radius: 11px; background: #fff; font-size: 18px; font-weight: 750; line-height: 1.4; }
.uqr-answer-chip span { color: #15815c; font-size: 22px; }
.uqr-answer-symbols { display: flex; justify-content: center; gap: 12px; }
.uqr-answer-symbols b { display: grid; place-items: center; min-width: 72px; min-height: 62px; border: 3px solid #238566; border-radius: 14px; background: #fff; font-size: 32px; }
.uqr-answer-order-set + .uqr-answer-order-set { margin-top: 12px; }
.uqr-answer-order-set ol { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; counter-reset: order; }
.uqr-answer-order-set li { counter-increment: order; display: grid; grid-template-columns: 34px 1fr; gap: 8px; align-items: center; padding: 9px 10px; border: 2px solid #99baaf; border-radius: 10px; background: #fff; }
.uqr-answer-order-set li::before { content: counter(order); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #238566; color: #fff; font-weight: 900; }
.uqr-answer-classify { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 9px; }
.uqr-answer-bin { padding: 10px; border: 2px dashed #319270; border-radius: 11px; background: #fff; }
.uqr-answer-bin h4 { margin: 0 0 8px; color: #17684f; }
.uqr-answer-bin div { padding: 7px 8px; border-radius: 8px; background: #edf6f2; }
.uqr-answer-bin div + div { margin-top: 6px; }
.uqr-answer-pairs > div { display: grid; grid-template-columns: minmax(0, 1fr) 32px minmax(0, 1fr); align-items: center; gap: 6px; }
.uqr-answer-pairs span { padding: 9px; border: 2px solid #8fb5c7; border-radius: 10px; background: #fff; }
.uqr-answer-pairs b { text-align: center; color: #17795a; font-size: 24px; }
.uqr-answer-explanation { margin-top: 12px; padding: 12px 14px; border-left: 5px solid #e0a52c; border-radius: 10px; background: #fff8dc; }
.uqr-answer-explanation p { margin: 0; font-size: 17px; line-height: 1.5; }

@media (min-width: 701px) {
  .uqr-layout.has-materials.engine-choice, .uqr-layout.has-materials.engine-compare, .uqr-layout.has-materials.engine-symbol_select, .uqr-layout.has-materials.engine-staged { grid-template-columns: minmax(260px, .9fr) minmax(330px, 1.1fr); align-items: start; }
  .uqr-layout.many-materials { grid-template-columns: 1fr; }
  .uqr-layout.many-materials .uqr-material-area { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .uqr-layout.engine-order, .uqr-layout.engine-classify, .uqr-layout.engine-match { grid-template-columns: 1fr; }
}

@media (max-width: 700px) {
  .uqr-card { border-width: 3px; border-radius: 15px; }
  .uqr-scroll { padding: 11px 10px 22px; }
  .uqr-question-head { align-items: flex-start; gap: 5px; }
  .uqr-meta { padding: 5px 8px; font-size: 11px; }
  .uqr-question-code { max-width: 54%; padding: 5px 7px; font-size: 10px; }
  .uqr-prompt { margin: 9px 0 11px; font-size: 21px; line-height: 1.38; }
  .uqr-material-area { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .uqr-material-area.count-1 { grid-template-columns: minmax(0, 220px); }
  .uqr-material-area.count-5, .uqr-material-area.count-6 { max-height: 430px; overflow-y: auto; }
  .uqr-material-card { padding: 6px; }
  .uqr-material-card img { height: 150px; }
  .uqr-material-area.count-1 .uqr-material-card img { height: 220px; }
  .uqr-material-card figcaption { font-size: 14px; }
  .uqr-choice, .uqr-card-item { min-height: 52px; padding: 10px 11px; font-size: 16px; }
  .uqr-order-work { grid-template-columns: 1fr; }
  .uqr-classify-bank { grid-template-columns: repeat(auto-fit, minmax(138px, 1fr)); }
  .uqr-classify-bins { grid-template-columns: 1fr; }
  .uqr-feedback { grid-template-columns: 1fr; max-height: 190px; margin: 0 9px 6px; font-size: 15px; }
  .uqr-feedback strong, .uqr-feedback span, .uqr-feedback .uqr-btn { grid-column: 1; }
  .uqr-feedback-continue { width: 100%; min-width: 0; }
  .uqr-actions { padding: 8px 9px 9px; }
  .uqr-btn { min-height: 52px; font-size: 16px; }
  .uqr-annotation-badge { width: 38px; height: 38px; font-size: 18px; }
  .uqr-modal-card { padding: 15px; }
  .uqr-modal-card h2 { font-size: 22px; }
  .uqr-answer-classify { grid-template-columns: 1fr; }
  .uqr-answer-pairs > div { grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); gap: 4px; }
  .uqr-answer-pairs span { padding: 7px; font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .uqr-correct-overlay.is-active { animation: uqrReduced .7s linear both; }
  .uqr-correct-ring, .uqr-correct-particles { display: none; }
  @keyframes uqrReduced { 0%,100%{opacity:0} 15%,85%{opacity:1} }
}
.uqr-prompt,.uqr-choice,.uqr-card-item,.uqr-staged-step,.sqi-match-card,.choice-btn,.card-item,.match-item,.staged-step,.uqr-card input,.uqr-card textarea,.uqr-card select{-webkit-user-select:text;user-select:text}