/* A lesson field card: three connected stops, not a second score dashboard. */
.uj-launch { border:1px solid #b9d7ce; background:#f0f8f5; color:#0c765c; border-radius:12px; padding:8px 12px; min-height:44px; font:800 13px 'Noto Sans KR',sans-serif; cursor:pointer; white-space:nowrap; }
.uj-dialog { --uj-ink:#1e3346; --uj-muted:#52687a; --uj-green:#0c765c; --uj-line:#d5e5df; box-sizing:border-box; width:min(780px,calc(100vw - 28px)); max-height:calc(100dvh - 32px); border:0; border-radius:24px; padding:0; color:var(--uj-ink); background:#fff; box-shadow:0 24px 90px #152d4555; font:14px/1.65 'Noto Sans KR',sans-serif; }
.uj-dialog::backdrop { background:#152d4577; backdrop-filter:blur(5px); }
.uj-dialog { margin:auto; overflow-y:auto; overflow-x:hidden; overscroll-behavior:contain; }
.uj-btn:hover:not(:disabled),.uj-launch:hover { filter:brightness(.95); }
.uj-dialog * { box-sizing:border-box; }
.uj-head { padding:20px 24px 16px; border-bottom:1px solid var(--uj-line); display:flex; justify-content:space-between; align-items:start; gap:16px; background:#f0f8f5; }
.uj-head > div { min-width:0; overflow-wrap:anywhere; }
.uj-kicker { font:900 12px 'Nunito',sans-serif; letter-spacing:.12em; color:var(--uj-green); }
.uj-head h2 { font-size:25px; letter-spacing:-.04em; margin:7px 0 5px; line-height:1.35; text-wrap:balance; }
.uj-head p { color:var(--uj-muted); margin:0; }
.uj-close { background:white; color:var(--uj-ink); border:1px solid var(--uj-line); border-radius:50%; width:44px; height:44px; font-size:22px; cursor:pointer; flex:none; }
.uj-body { padding:18px 24px max(22px, env(safe-area-inset-bottom, 0px)); }
.uj-next { margin:0 0 16px; padding:14px 16px; border-left:4px solid var(--uj-green); border-radius:4px 12px 12px 4px; background:#f0f8f5; overflow-wrap:anywhere; }
.uj-next-label { font-size:12px; font-weight:800; color:var(--uj-green); }
.uj-next h3 { margin:0 0 5px; font-size:18px; line-height:1.5; }
.uj-next p { margin:0; font-size:13px; color:var(--uj-muted); }
.uj-next .uj-actions { margin:12px 0 0; }
.uj-next .uj-pending-note { margin-top:12px; padding-top:10px; border-top:1px solid var(--uj-line); color:#7a5615; }
.uj-review-help { margin-top:8px; font-size:12px; }
.uj-review-help p { padding:0 0 8px; }
.uj-route-title { margin:0 0 10px; font-size:15px; }
.uj-catalog { margin:20px 0 0; border-top:1px solid var(--uj-line); border-bottom:1px solid var(--uj-line); }
.uj-catalog > summary { font-weight:800; padding:12px 0; }
.uj-catalog > summary span { font-size:12px; font-weight:500; color:var(--uj-muted); margin-left:8px; }
.uj-catalog nav { padding:2px 0 16px; }
.uj-catalog h3 { margin:0; font-size:16px; }
.uj-catalog nav > p { margin:5px 0 12px; color:var(--uj-muted); font-size:12px; }
.uj-catalog ul { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:9px; }
.uj-catalog li { content-visibility:auto; contain-intrinsic-size:auto 112px; }
.uj-unit { display:flex; flex-direction:column; align-items:flex-start; gap:3px; width:100%; min-height:100px; padding:12px; text-align:left; border:1px solid var(--uj-line); border-radius:12px; background:#fff; color:var(--uj-ink); font:inherit; cursor:pointer; overflow-wrap:anywhere; }
.uj-unit[aria-current="true"] { border-color:var(--uj-green); box-shadow:inset 0 0 0 1px var(--uj-green); background:#f0f8f5; }
.uj-unit strong { font-size:14px; }
.uj-unit span,.uj-unit small { font-size:12px; color:var(--uj-muted); }
.uj-unit .uj-unit-book { font-size:11px; }
.uj-unit:focus-visible { outline:3px solid #d3941b; outline-offset:2px; }
.uj-source { font-size:12px; color:var(--uj-muted); margin:0 0 18px; }
.uj-assignment { margin:18px 0 20px; padding:16px 18px; border:1px solid var(--uj-line); border-left:4px solid var(--uj-green); border-radius:4px 14px 14px 4px; background:#f0f8f5; overflow-wrap:anywhere; }
.uj-assignment h3 { margin:0 0 8px; color:var(--uj-green); font-size:16px; line-height:1.5; }
.uj-assignment-meta { display:flex; flex-wrap:wrap; align-items:baseline; gap:5px 12px; font-size:12px; color:var(--uj-muted); }
.uj-assignment-meta strong { color:var(--uj-ink); font-weight:700; }
.uj-assignment-message { white-space:pre-wrap; margin:12px 0; color:var(--uj-ink); line-height:1.75; }
.uj-assignment-target { margin:12px 0 0; font-size:13px; color:var(--uj-muted); }
.uj-assignment-target strong { color:var(--uj-ink); }
.uj-assignment .uj-actions { margin:12px 0 0; }
.uj-assignment .uj-btn:disabled { cursor:not-allowed; }
.uj-route { margin:0 0 20px; padding:0; list-style:none; display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
.uj-stop { position:relative; padding:16px 12px; border:1px solid var(--uj-line); border-radius:14px; min-width:0; }
.uj-stop[data-state="completed"] { background:#f0f8f5; border-color:#82b4a6; }
.uj-stop[data-state="deferred"] { background:#fff9e9; border-color:#d9bd76; }
.uj-stop[data-current="true"] { box-shadow:inset 0 0 0 2px var(--uj-green); }
.uj-stop-num { display:inline-grid; place-items:center; width:29px; height:29px; margin-bottom:10px; border-radius:50%; background:#e5f0eb; font:900 14px 'Nunito',sans-serif; color:var(--uj-green); }
.uj-stop strong { display:block; font-size:15px; }
.uj-stop small { display:block; color:var(--uj-muted); margin:4px 0 12px; font-size:12px; }
.uj-btn { display:inline-flex; align-items:center; justify-content:center; gap:6px; border:1px solid #bdcfc8; border-radius:11px; background:white; color:#25453b; padding:10px 15px; font:800 13px/1.5 'Noto Sans KR',sans-serif; cursor:pointer; min-height:44px; text-decoration:none; }
.uj-btn-primary { background:#0c765c; border-color:#0c765c; color:white; }
.uj-btn:disabled { opacity:.5; cursor:wait; }
.uj-btn:focus-visible,.uj-close:focus-visible,.uj-launch:focus-visible { outline:3px solid #d3941b; outline-offset:3px; }
.uj-stop .uj-btn { font-size:12px; min-height:44px; padding:6px 9px; width:100%; }
.uj-actions { display:flex; flex-wrap:wrap; gap:9px; margin:14px 0; }
.uj-actions .uj-btn-primary { flex:1; }
.uj-summary { display:flex; justify-content:space-between; gap:12px; padding:13px 16px; background:#f4f7fa; border-radius:12px; margin-bottom:14px; }
.uj-summary span { color:var(--uj-muted); font-size:12px; }
.uj-notice { padding:12px 15px; border-left:3px solid #c49426; background:#fff9e9; border-radius:3px 10px 10px 3px; font-size:13px; }
.uj-note { color:var(--uj-muted); font-size:12px; margin:10px 0 0; }
.uj-error { color:#a03520; background:#fff2ee; padding:12px; border-radius:9px; }
.uj-help { border-top:1px solid var(--uj-line); margin-top:20px; padding-top:16px; }
.uj-help h3 { font-size:16px; margin:0 0 8px; }
.uj-help ul { margin:7px 0; padding-left:22px; }
.uj-expression { font:800 17px/1.8 'Nunito',sans-serif; color:#0c765c; }
.uj-support { display:flex; flex-wrap:wrap; gap:8px; margin:12px 0; }
.uj-evidence { margin-top:20px; color:var(--uj-muted); font-size:12px; }
.uj-evidence summary { cursor:pointer; }
.uj-dialog summary { min-height:44px; padding-top:10px; padding-bottom:10px; cursor:pointer; overflow-wrap:anywhere; }
.uj-dialog summary:focus-visible { outline:3px solid #d3941b; outline-offset:2px; border-radius:6px; }
.uj-dialog h2:focus-visible,.uj-help h3:focus-visible { outline:3px solid #d3941b; outline-offset:3px; border-radius:4px; }
.uj-dialog button,.uj-dialog summary,.uj-launch { touch-action:manipulation; }
.uj-inline { background:#f0f8f5; border:1px solid #a9cdc0; border-radius:14px; padding:16px; margin:18px 0 8px; color:#1e3346; font:13px/1.6 'Noto Sans KR',sans-serif; }
.uj-inline strong { display:block; font-size:16px; }
.uj-inline p { margin:6px 0; }
.uj-inline .uj-actions { margin-bottom:0; }
.uj-sticky { position:sticky; bottom:0; background:#fff; padding:8px 0 0; border-top:1px solid #d5e5df; margin-top:12px; }
@media(max-width:540px) {
  .uj-dialog { width:calc(100vw - 16px); border-radius:18px; max-height:calc(100dvh - 16px); }
  .uj-head,.uj-body { padding:18px; }
  .uj-head h2 { font-size:21px; }
  .uj-next { padding:12px; }
  .uj-next h3 { font-size:17px; }
  .uj-next .uj-actions .uj-btn { width:100%; }
  .uj-assignment { padding:14px; }
  .uj-assignment .uj-btn { width:100%; }
  .uj-catalog ul { grid-template-columns:1fr; }
  .uj-route { grid-template-columns:1fr; gap:8px; }
  .uj-stop { display:grid; grid-template-columns:30px 1fr 85px; column-gap:12px; padding:12px; align-items:center; }
  .uj-stop-num { grid-row:span 2; margin:0; }
  .uj-stop small { margin:0; grid-column:2; }
  .uj-stop .uj-btn { grid-column:3; grid-row:1 / 3; }
  .uj-summary { flex-direction:column; gap:3px; }
  .uj-launch { padding:7px 9px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { .uj-dialog,.uj-btn { scroll-behavior:auto; transition:none; } }