:root {
  --ink: #1d2027;
  --ink-2: #4b5160;
  --ink-3: #8a90a0;
  --paper: #fbfaf6;
  --paper-2: #f1efe8;
  --line: #d9d6cc;
  --stamp: #c8312b;
  --ok: #2e8b57;
  --warn: #d68a1c;
  --accent: #2f5fa8;
  --shadow: 0 10px 30px rgba(20, 22, 30, .18), 0 2px 6px rgba(20, 22, 30, .08);
  font-family: Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #cfd3da; color: var(--ink); }
button { font: inherit; cursor: pointer; }
#app { position: fixed; inset: 0; user-select: none; -webkit-user-select: none; touch-action: none; }
#scene { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
#labels, #hud, #screen, #overlay, #toasts { position: absolute; inset: 0; pointer-events: none; }
#screen > *, #overlay > *, #hud .pe, #toasts > * { pointer-events: auto; }
#fade { position: absolute; inset: 0; background: #0d0f14; opacity: 0; pointer-events: none; transition: opacity .35s; z-index: 50; }
#fade.on { opacity: 1; pointer-events: auto; }

/* boot */
#boot { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: #1d2027; color: #e9e6dd; z-index: 60; transition: opacity .5s; }
#boot.done { opacity: 0; pointer-events: none; }
.boot-logo { font-size: 28px; font-weight: 800; letter-spacing: -.02em; }
.boot-sub { margin-top: 8px; color: #9aa0ac; font-size: 14px; }

/* generic */
.btn { border: 0; border-radius: 10px; padding: 14px 22px; font-weight: 700; font-size: 16px; background: var(--ink); color: #fff; box-shadow: 0 2px 0 #000; transition: transform .08s, background .15s; }
.btn:hover { background: #2b303b; }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px var(--line); }
.btn.ghost:hover { background: var(--paper-2); }
.btn.red { background: var(--stamp); box-shadow: 0 2px 0 #7d1d19; }
.btn.small { padding: 8px 12px; font-size: 13px; border-radius: 8px; }
.btn[disabled] { opacity: .45; cursor: default; }
.muted { color: var(--ink-3); }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* onboarding screens */
.screen { position: absolute; inset: 0; display: grid; place-items: center; padding: 24px 16px; background: radial-gradient(ellipse at center, rgba(29,32,39,.35), rgba(29,32,39,.72)); backdrop-filter: blur(3px); animation: fadein .35s ease; }
.doc { width: min(560px, 100%); max-height: calc(100vh - 48px); overflow: auto; background: var(--paper); border-radius: 6px; box-shadow: var(--shadow); padding: 28px 28px 24px; position: relative; }
.doc-head { display: flex; justify-content: space-between; align-items: baseline; border-bottom: 2px solid var(--ink); padding-bottom: 10px; margin-bottom: 18px; }
.doc-logo { font-weight: 800; font-size: 15px; letter-spacing: -.01em; }
.doc-no { font-size: 12px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.doc h1 { font-size: 26px; line-height: 1.3; margin: 6px 0 10px; letter-spacing: -.02em; }
.doc p { line-height: 1.6; margin: 0 0 12px; color: var(--ink-2); }
.doc .actions { margin-top: 22px; display: flex; gap: 10px; flex-wrap: wrap; }
.doc .actions .btn { flex: 1 1 160px; }
.doc .fine { font-size: 12px; color: var(--ink-3); margin-top: 14px; line-height: 1.5; }
.doc .linkish { background: none; border: 0; color: var(--ink-3); text-decoration: underline; padding: 0; font-size: 12px; }
.emp-card { display: flex; gap: 16px; align-items: center; border: 1.5px solid var(--line); border-radius: 10px; padding: 12px 14px; margin: 14px 0 4px; background: var(--paper-2); }
.emp-card img { width: 76px; height: 76px; object-fit: cover; border-radius: 50%; background: #e9e6df; flex: none; }
.emp-card > div { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.emp-card b { font-size: 16px; }
.emp-card span { font-size: 12px; color: var(--ink-3); }
.emp-card dl { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 8px 0 0; }
.emp-card dl div { display: flex; flex-direction: column; }
.emp-card dt { font-size: 11px; color: var(--ink-3); }
.emp-card dd { margin: 0; font-weight: 800; font-size: 17px; font-variant-numeric: tabular-nums; }
.doc .actions.pick .btn { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.doc .actions.pick .btn small { font-size: 12px; font-weight: 500; opacity: .7; }
.rehire-warn { margin-top: 16px !important; padding: 10px 12px; border-radius: 8px; background: #fbeceb; color: #7d1d19 !important; font-size: 14px; }

/* quiz */
.quiz { width: min(620px, 100%); }
.quiz-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink-3); margin-bottom: 10px; }
.quiz-dots { display: flex; gap: 5px; }
.quiz-dots i { width: 18px; height: 5px; border-radius: 3px; background: var(--line); }
.quiz-dots i.on { background: var(--ink); }
.gauge { height: 12px; border-radius: 6px; background: #e6e3da; overflow: hidden; margin-bottom: 22px; }
.gauge > b { display: block; height: 100%; width: 100%; background: #3cae6a; border-radius: 6px; transform-origin: left; }
.quiz-q { font-size: clamp(22px, 4.6vw, 30px); font-weight: 800; line-height: 1.35; min-height: 2.7em; letter-spacing: -.02em; }
.quiz-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 22px; }
.quiz-choices button { border: 2px solid var(--ink); background: #fff; border-radius: 12px; padding: 20px 12px; font-size: 18px; font-weight: 700; min-height: 84px; transition: transform .06s, background .1s; }
.quiz-choices button:hover { background: var(--paper-2); }
.quiz-choices button.picked { background: var(--ink); color: #fff; }
.quiz-choices kbd { display: block; font-size: 11px; color: var(--ink-3); font-weight: 600; margin-top: 4px; font-family: inherit; }
.quiz-choices button.picked kbd { color: #b9bdc8; }
.combo { font-weight: 800; color: var(--stamp); min-width: 70px; text-align: right; }
.shake { animation: shake .35s; }
.urgent .doc { animation: tremble .12s infinite; }

/* stamp */
.stamp { position: absolute; border: 4px solid var(--stamp); color: var(--stamp); font-weight: 900; padding: 6px 14px; border-radius: 8px; transform: rotate(-12deg); font-size: 26px; letter-spacing: .04em; background: rgba(255,255,255,.6); pointer-events: none; animation: stampin .28s cubic-bezier(.2,1.6,.4,1) both; white-space: nowrap; }
.stamp.round { border-radius: 50%; width: 120px; height: 120px; display: grid; place-content: center; text-align: center; font-size: 20px; line-height: 1.2; padding: 0; }

/* name */
.name-big { font-size: clamp(26px, 6vw, 38px); font-weight: 900; letter-spacing: -.03em; line-height: 1.25; margin: 10px 0 6px; min-height: 2.5em; }
.name-big span { display: inline-block; }
.slot { animation: slot .08s linear infinite; }

/* id card */
.idcard-img { width: min(300px, 70vw); aspect-ratio: 9/16; border-radius: 10px; display: block; margin: 0 auto 14px; box-shadow: var(--shadow); background: #eee; object-fit: cover; }
.seg { display: inline-flex; border: 1.5px solid var(--line); border-radius: 9px; overflow: hidden; }
.seg button { border: 0; background: #fff; padding: 8px 16px; font-weight: 700; color: var(--ink-2); }
.seg button.on { background: var(--ink); color: #fff; }

/* HUD */
#hud { font-size: 14px; }
.hud-box { background: rgba(251, 250, 246, .92); border-radius: 12px; box-shadow: var(--shadow); padding: 10px 14px; backdrop-filter: blur(6px); }
.hud-tl { position: absolute; left: 14px; top: calc(14px + env(safe-area-inset-top, 0px)); max-width: 46vw; }
.hud-tl .nm { font-weight: 800; font-size: 15px; line-height: 1.25; }
.hud-tl .sub { color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.hud-tc { position: absolute; left: 50%; top: calc(14px + env(safe-area-inset-top, 0px)); transform: translateX(-50%); text-align: center; padding: 8px 18px; }
.hud-tc .clock { font-size: 28px; font-weight: 900; font-variant-numeric: tabular-nums; letter-spacing: .01em; line-height: 1; }
.hud-tc .where { font-size: 11px; color: var(--ink-3); margin-top: 4px; }
.hud-tc.late .clock { color: var(--stamp); }
.hud-tr { position: absolute; right: 14px; top: calc(14px + env(safe-area-inset-top, 0px)); min-width: 160px; }
.hud-tr .pay { font-weight: 800; font-variant-numeric: tabular-nums; }
.bar { height: 7px; background: #e3e0d7; border-radius: 4px; overflow: hidden; margin-top: 6px; }
.bar b { display: block; height: 100%; background: linear-gradient(90deg, #6c7a93, #8e5bb5, #c8312b); border-radius: 4px; transition: width .4s; }
.hud-tr .lbl { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); margin-top: 6px; }
/* task list: ~80% of the old size (250px -> 200px) so it covers less of the floor */
.tasks { position: absolute; right: 14px; top: calc(124px + env(safe-area-inset-top, 0px)); width: 200px; transition: left .18s ease, top .18s ease; max-height: 38vh; overflow: auto; padding: 8px 10px; font-size: 12.5px; }
.tasks h4 { margin: -8px -10px 4px; padding: 8px 10px 6px; font-size: 11px; color: var(--ink-3); font-weight: 700; display: flex; justify-content: space-between; align-items: center; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; }
.tasks h4 .grip { font-style: normal; font-size: 14px; line-height: 1; color: var(--ink-3); opacity: .7; }
.tasks.dragging { transition: none; box-shadow: 0 10px 28px rgba(0,0,0,.28); opacity: .96; }
.tasks.dragging h4 { cursor: grabbing; }
.task { border-top: 1px solid var(--line); padding: 6px 0; display: grid; grid-template-columns: 1fr auto; gap: 1px 6px; align-items: center; }
.task .btn { padding: 7px 10px; font-size: 12px; border-radius: 8px; }
.task:first-of-type { border-top: 0; }
.task .t { font-weight: 700; }
.task .d { font-size: 11px; color: var(--ink-3); grid-column: 1; }
.task.done .t { text-decoration: line-through; color: var(--ink-3); }
.task.failed .t { color: var(--stamp); }
.task .btn { grid-row: 1 / span 2; grid-column: 2; }
.task.urgent { background: linear-gradient(90deg, rgba(200,49,43,.08), transparent); }
.hud-bottom { position: absolute; left: 50%; bottom: calc(22px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: max-content; max-width: max(260px, calc(100vw - 520px)); display: flex; flex-direction: column; align-items: center; gap: 8px; }
.objective { max-width: 100%; text-align: center; font-weight: 700; padding: 10px 18px; }
.objective small { display: block; font-weight: 500; color: var(--ink-3); font-size: 12px; margin-top: 2px; }
.ctrls { position: absolute; right: 14px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); display: grid; grid-template-columns: repeat(3, 42px); gap: 6px; }
.ctrls button { width: 42px; height: 42px; border-radius: 10px; border: 0; background: rgba(251,250,246,.92); box-shadow: var(--shadow); font-size: 18px; font-weight: 800; color: var(--ink); }
.hint { position: absolute; left: 14px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); font-size: 12px; color: var(--ink-2); max-width: 230px; line-height: 1.5; }

/* toasts */
#toasts { display: flex; flex-direction: column; align-items: center; gap: 8px; padding-top: calc(86px + env(safe-area-inset-top, 0px)); }
.toast { max-width: min(420px, 92vw); background: rgba(29,32,39,.94); color: #f2f0ea; padding: 10px 14px; border-radius: 12px; box-shadow: var(--shadow); font-size: 14px; line-height: 1.45; animation: toastin .25s ease; pointer-events: none !important; }
.toast b { color: #ffd36a; }
.toast.msg { background: #fff; color: var(--ink); border-left: 4px solid var(--accent); }
.toast.msg b { color: var(--accent); }
.toast.good { border-left: 4px solid var(--ok); }
.toast.bad { border-left: 4px solid var(--stamp); }
.toast.out { opacity: 0; transform: translateY(-6px); transition: .3s; }

/* floating labels */
.flabel { position: absolute; transform: translate(-50%, -100%); background: rgba(29,32,39,.9); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 9px; border-radius: 7px; white-space: nowrap; pointer-events: none; }
.flabel.name { background: rgba(251,250,246,.9); color: var(--ink); font-weight: 600; font-size: 11px; }
.flabel.say { background: #fff; color: var(--ink); font-size: 13px; max-width: 220px; white-space: normal; text-align: center; box-shadow: var(--shadow); }

/* windows (minigames, dialogs) */
.dim { position: absolute; inset: 0; display: grid; place-items: center; padding: 16px; background: rgba(13,15,20,.35); animation: fadein .2s; }
.win { width: min(640px, 100%); max-height: calc(100vh - 32px); overflow: auto; background: #f7f7f5; border-radius: 10px; box-shadow: 0 20px 60px rgba(0,0,0,.35); border: 1px solid #c9ccd3; position: relative; }
.win-bar { display: flex; align-items: center; gap: 8px; padding: 9px 12px; background: linear-gradient(#e9ebef, #dde0e6); border-bottom: 1px solid #c9ccd3; font-size: 13px; font-weight: 700; color: var(--ink-2); border-radius: 10px 10px 0 0; }
.win-bar .dots { display: flex; gap: 6px; }
.win-bar .dots i { width: 11px; height: 11px; border-radius: 50%; background: #c9ccd3; }
.win-bar .dots i:first-child { background: #e0625a; }
.win-body { padding: 16px 18px 18px; }
.timer { height: 8px; border-radius: 4px; background: #e2e3e7; overflow: hidden; margin-bottom: 14px; }
.timer b { display: block; height: 100%; background: var(--accent); width: 100%; }
.timer.low b { background: var(--stamp); }
.mg-top { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--ink-2); margin-bottom: 8px; }
.mg-result { text-align: center; padding: 18px 0 6px; }
.mg-result h3 { font-size: 22px; margin: 6px 0; }

/* approval */
.apdoc { background: #fff; border: 1px solid #d5d7dc; border-radius: 6px; padding: 16px 18px; min-height: 170px; position: relative; box-shadow: 0 2px 0 #e3e4e8; }
.apdoc .meta { display: grid; grid-template-columns: 70px 1fr; font-size: 12px; color: var(--ink-3); gap: 2px; margin-bottom: 10px; }
.apdoc .ttl { font-size: 19px; font-weight: 800; margin-bottom: 8px; letter-spacing: -.01em; }
.apdoc .body { color: var(--ink-2); line-height: 1.55; font-size: 14px; }
.apbtns { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 14px; }
.apbtns .btn { padding: 14px; }

/* excel */
.sheet { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; background: #fff; font-size: 15px; }
.sheet td, .sheet th { border: 1px solid #d0d4da; padding: 9px 8px; text-align: right; }
.sheet th { background: #eef1f4; color: var(--ink-3); font-weight: 600; font-size: 12px; text-align: center; }
.sheet td.sum { background: #f4f8ef; font-weight: 800; }
.sheet td.ref { color: var(--stamp); font-weight: 900; text-align: center; background: #fff1f0; }
.opts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.opts .btn { font-variant-numeric: tabular-nums; font-size: 18px; }
.boom { position: absolute; inset: 0; display: grid; place-content: center; font-size: 64px; font-weight: 900; color: var(--stamp); animation: boom .5s ease-out forwards; pointer-events: none; }

/* copier */
.copier-box { position: relative; height: 290px; background: linear-gradient(#5b606b, #43474f); border-radius: 10px; overflow: hidden; }
.copier-lid { position: absolute; inset: 0; background: repeating-linear-gradient(90deg, #d9dad6 0 18px, #cfd0cc 18px 20px); display: grid; place-content: center; transition: transform .45s cubic-bezier(.4,0,.2,1); transform-origin: top; z-index: 30; border-bottom: 6px solid #9a9c98; }
.copier-lid.open { transform: perspective(600px) rotateX(78deg); }
.copier-lid .btn { pointer-events: auto; }
.rollers { position: absolute; left: 6%; right: 6%; top: 46%; height: 26px; background: repeating-linear-gradient(90deg, #262a31 0 30px, #3a3f48 30px 34px); border-radius: 13px; }
.jam { position: absolute; width: 150px; height: 110px; background: #fdfdf8; border-radius: 3px; box-shadow: 0 3px 8px rgba(0,0,0,.35); cursor: pointer; clip-path: polygon(3% 8%, 22% 0, 48% 6%, 74% 1%, 100% 9%, 95% 38%, 100% 66%, 92% 100%, 61% 93%, 34% 100%, 5% 92%, 0 60%); background-image: linear-gradient(115deg, transparent 40%, rgba(0,0,0,.06) 41%, transparent 47%), linear-gradient(35deg, transparent 55%, rgba(0,0,0,.07) 56%, transparent 62%), repeating-linear-gradient(0deg, transparent 0 12px, rgba(60,80,120,.12) 12px 13px); transition: transform .25s, opacity .25s; }
.jam:hover { filter: brightness(1.04); }
.jam.gone { transform: translateY(-160px) rotate(20deg); opacity: 0; pointer-events: none; }
.jam.torn { animation: shake .3s; filter: sepia(.5) hue-rotate(-30deg); }
/* contract seal (간인) */
.seal-desk { position: relative; height: 240px; background: linear-gradient(#b48a5c, #9c7448); border-radius: 10px; overflow: hidden; cursor: pointer; user-select: none; }
.seal-pg { position: absolute; top: 18px; bottom: 18px; background: #fdfdf8; border-radius: 2px; box-shadow: 0 3px 10px rgba(0,0,0,.28); padding: 22px 18px; display: flex; flex-direction: column; gap: 11px; }
.seal-pg.under { left: 5%; right: 30%; }
.seal-pg.top { right: 5%; box-shadow: -4px 3px 10px rgba(0,0,0,.3); }
.seal-pg b { font-size: 14px; color: var(--ink); }
.seal-pg i { display: block; height: 6px; border-radius: 3px; background: #dfe2e7; }
.seal-pg i:nth-child(odd) { width: 82%; }
.seal-seam { position: absolute; top: 10px; bottom: 10px; width: 0; border-left: 2px dashed rgba(200,49,43,.45); pointer-events: none; }
.seal-stamp, .seal-mark { position: absolute; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; border: 3px solid var(--stamp); color: var(--stamp); display: grid; place-content: center; text-align: center; font-size: 11px; font-weight: 900; line-height: 1.15; pointer-events: none; }
.seal-stamp { background: rgba(255,255,255,.35); box-shadow: 0 8px 14px rgba(0,0,0,.25); transform: translateY(-14px); }
.seal-mark { background: rgba(200,49,43,.08); opacity: .9; animation: stampin .22s cubic-bezier(.2,1.6,.4,1) both; }
.seal-mark.bad { opacity: .5; filter: grayscale(.4); }
.seal-msg { position: absolute; left: 0; right: 0; bottom: 6px; text-align: center; font-weight: 900; font-size: 15px; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.5); pointer-events: none; }
.seal-msg.good { color: #d6ffe4; }
.seal-msg.bad { color: #ffd9d6; }

/* clickable words (contract diff, typo) */
.tok { cursor: pointer; border-radius: 4px; padding: 0 1px; transition: background .12s; }
.tok:hover { background: #eef2fb; }
.tok.hit { background: #e3f4e9; color: var(--ok); font-weight: 800; cursor: default; }
.tok.hit s { color: var(--stamp); font-weight: 600; }
.tok.miss { animation: shake .3s; background: #fff1f0; }
.ctr-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ctr { background: #fff; border: 1px solid #d5d7dc; border-radius: 6px; padding: 10px 12px; font-size: 13px; line-height: 1.6; color: var(--ink-2); }
.ctr p { margin: 0 0 6px; }
.ctr:not(.copy) .tok { cursor: default; }
.ctr:not(.copy) .tok:not(.hit):hover { background: none; }
.ctr-h { font-size: 12px; font-weight: 800; color: var(--ink-3); border-bottom: 1px solid var(--line); padding-bottom: 6px; margin-bottom: 8px; }
.ctr.copy { box-shadow: inset 0 0 0 2px #c9d6ee; }
@media (max-width: 560px) { .ctr-pair { grid-template-columns: 1fr; } }
.rpt { background: #fff; border: 1px solid #d5d7dc; border-radius: 6px; padding: 14px 16px; font-size: 14px; line-height: 1.7; color: var(--ink-2); }
.rpt-h { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px; border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin-bottom: 6px; }
.rpt-h span { font-size: 12px; color: var(--ink-3); }
.rpt ol { margin: 0; padding-left: 20px; }

/* shapes */
.shp-stage { display: grid; grid-template-columns: auto 1fr; gap: 14px; align-items: center; }
.shp-src { background: #fff; border: 1px solid #d5d7dc; border-radius: 8px; padding: 10px 14px; display: grid; justify-items: center; gap: 6px; }
.shp-src small { font-size: 11px; color: var(--ink-3); font-weight: 700; }
.shp-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.shp-opt { background: #fff; border: 1.5px solid var(--line); border-radius: 8px; padding: 12px; display: grid; place-items: center; min-height: 110px; cursor: pointer; }
.shp-opt:hover { border-color: var(--accent); }
.shp-opt.miss { animation: shake .3s; border-color: var(--stamp); opacity: .45; }
.shp { display: grid; gap: 2px; }
.shp i { width: 16px; height: 16px; border-radius: 2px; }
.shp.big i { width: 24px; height: 24px; }
.shp i.on { background: var(--accent); box-shadow: inset 0 -2px 0 rgba(0,0,0,.2); }
@media (max-width: 480px) { .shp-stage { grid-template-columns: 1fr; } }

/* multiplayer: live ranking, chat, other players' name tags */
.rank { position: absolute; left: 14px; top: calc(78px + env(safe-area-inset-top, 0px)); width: 230px; padding: 8px 12px; }
.rank h4 { margin: 0 0 4px; font-size: 11px; color: var(--ink-3); font-weight: 700; }
.rank ol { list-style: none; margin: 0; padding: 0; font-size: 12px; }
.rank li { display: grid; grid-template-columns: 18px 1fr auto; gap: 6px; padding: 2px 0; align-items: baseline; }
.rank li .no { font-weight: 800; color: var(--ink-3); }
.rank li .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rank li .sc { font-variant-numeric: tabular-nums; color: var(--ink-2); font-size: 11px; }
.rank li.me { color: var(--accent); font-weight: 800; }
.chat { position: absolute; left: 50%; bottom: calc(76px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); width: min(420px, calc(100vw - 32px)); }
.chat input { width: 100%; border: 0; border-radius: 10px; padding: 12px 14px; font: inherit; font-size: 14px; background: rgba(251,250,246,.96); box-shadow: var(--shadow); outline: 2px solid var(--accent); }
.name.peer { background: rgba(47,95,168,.85); color: #fff; }
.name.mine { background: #ffcf33; color: #1d2027; font-weight: 800; }
@media (max-width: 720px) {
  /* phone: a narrow column left of the clock (rank + name only) */
  .rank { top: calc(70px + env(safe-area-inset-top, 0px)); bottom: auto; left: 10px; width: min(125px, 33vw); padding: 6px 8px; }
  .rank h4 { font-size: 10px; }
  .rank li { grid-template-columns: 14px 1fr; font-size: 11px; }
  .rank li .sc { display: none; }
}

/* quick chat */
.chat-fab { position: absolute; left: 14px; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); width: 48px; height: 48px; border-radius: 50%; border: 0; background: rgba(251,250,246,.95); box-shadow: var(--shadow); font-size: 22px; display: grid; place-items: center; }
.chat-fab.on { background: var(--accent); }
.chat-quick { position: absolute; left: 14px; bottom: calc(152px + env(safe-area-inset-bottom, 0px)); width: min(300px, calc(100vw - 28px)); background: rgba(251,250,246,.97); border-radius: 14px; box-shadow: var(--shadow); padding: 10px; display: grid; gap: 8px; }
.chat-quick[hidden] { display: none; }
.chat-quick button { border: 0; font: inherit; cursor: pointer; }
.cq-emoji { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; }
.cq-emoji button { font-size: 22px; padding: 6px 0; border-radius: 10px; background: #fff; }
.cq-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.cq-list button { background: #fff; border-radius: 10px; padding: 10px 8px; font-size: 13px; font-weight: 600; text-align: left; box-shadow: inset 0 0 0 1px var(--line); }
.cq-list button:active, .cq-emoji button:active { background: #eef2fb; }
.cq-type { background: var(--ink); color: #fff; border-radius: 10px; padding: 10px; font-weight: 700; font-size: 13px; }
@media (max-width: 720px) { .chat-fab { left: 10px; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); } .chat-quick { left: 10px; bottom: calc(74px + env(safe-area-inset-bottom, 0px)); } }

/* sick leave: the screen slowly goes black */
.blackout { position: absolute; inset: 0; background: #000; display: grid; place-items: center; animation: blackout 2.6s ease-in forwards; z-index: 50; }
.blackout .bo-text { color: #e9e6df; text-align: center; display: grid; gap: 10px; opacity: 0; animation: fadein 1s ease-out 1.6s forwards; }
.blackout .bo-text b { font-size: 22px; letter-spacing: .02em; }
.blackout .bo-text span { font-size: 14px; color: #9aa0ad; }
@keyframes blackout { 0% { opacity: 0; } 30% { opacity: .55; } 45% { opacity: .35; } 100% { opacity: 1; } }

.queue { font-size: 13px; color: var(--ink-2); }
.queue b { color: var(--stamp); }

/* dialog / choice */
.talk { width: min(520px, 100%); background: var(--paper); border-radius: 14px; box-shadow: var(--shadow); padding: 18px 20px; position: relative; }
.talk .who { font-size: 12px; font-weight: 800; color: var(--accent); margin-bottom: 4px; }
.talk .line { font-size: 19px; font-weight: 700; line-height: 1.45; margin-bottom: 14px; }
.talk .choices { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.talk .choices .btn { padding: 14px 10px; }
.needle-track { position: relative; height: 34px; background: #e6e3da; border-radius: 8px; overflow: hidden; margin: 8px 0 14px; }
.needle-zone { position: absolute; top: 0; bottom: 0; background: rgba(46,139,87,.35); border-left: 2px solid var(--ok); border-right: 2px solid var(--ok); }
.needle { position: absolute; top: -2px; bottom: -2px; width: 4px; background: var(--ink); border-radius: 2px; }

/* result card */
.result-wrap { display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 280px); gap: 22px; align-items: center; justify-content: center; width: 100%; }
.result-wrap img { width: 100%; border-radius: 10px; box-shadow: var(--shadow); }
.result-side { background: var(--paper); border-radius: 12px; padding: 20px; box-shadow: var(--shadow); }
.result-side h2 { margin: 0 0 8px; font-size: 22px; }
.result-side .btn { width: 100%; margin-top: 8px; }
.stats { font-size: 14px; color: var(--ink-2); line-height: 1.8; margin: 8px 0 6px; }

/* settings */
.set-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--line); flex-wrap: wrap; }
.set-row:first-of-type { border-top: 0; }
.lint-list { font-size: 12px; line-height: 1.55; max-height: 220px; overflow: auto; background: #fff; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 8px; white-space: pre-wrap; }
.ok-text { color: var(--ok); font-weight: 800; }
.bad-text { color: var(--stamp); font-weight: 800; }

/* overtime */
.ot-banner { position: absolute; left: 50%; top: 40%; transform: translate(-50%, -50%); text-align: center; color: #f2f0ea; pointer-events: auto; }
.ot-banner .big { font-size: clamp(40px, 9vw, 76px); font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 4px 30px rgba(0,0,0,.6); }
.ot-banner p { color: #b9bdc8; margin: 6px 0 16px; }

@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes toastin { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }
@keyframes shake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }
@keyframes tremble { 0% { transform: translate(0,0); } 50% { transform: translate(1px,-1px); } 100% { transform: translate(-1px,1px); } }
@keyframes stampin { from { transform: rotate(-12deg) scale(2.2); opacity: 0; } to { transform: rotate(-12deg) scale(1); opacity: 1; } }
@keyframes slot { from { transform: translateY(-3px); } to { transform: translateY(3px); } }
@keyframes boom { from { transform: scale(.4); opacity: 1; } to { transform: scale(1.8); opacity: 0; } }

@media (max-width: 720px) {
  .hud-tl { max-width: 46vw; padding: 8px 10px; }
  .hud-tl .nm, .hud-tl .sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .hud-tl .nm { font-size: 13px; }
  .hud-tc { top: calc(72px + env(safe-area-inset-top, 0px)); padding: 6px 14px; }
  .hud-tc .clock { font-size: 22px; }
  .hud-tr { min-width: 120px; max-width: 44vw; padding: 8px 10px; }
  #toasts { padding-top: calc(134px + env(safe-area-inset-top, 0px)); }
  /* phone: top-right under the stats box, out of the middle of the screen */
  .tasks { top: calc(116px + env(safe-area-inset-top, 0px)); bottom: auto; right: 10px; width: min(200px, 52vw); max-height: 30vh; }
  .hud-bottom { bottom: calc(118px + env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 32px); }
  .objective { font-size: 13px; }
  .hint { display: none; }
  .result-wrap { grid-template-columns: 1fr; }
  .result-wrap img { max-width: 240px; margin: 0 auto; }
  .doc { padding: 22px 18px 18px; }
}

/* ===== CU kiosk shop ===== */
.cu-win { width: min(720px, 100%); }
.cu-bar { background: linear-gradient(#7a39a6, #6a2c91); color: #fff; border-bottom-color: #4b1f68; }
.cu-logo { background: #6a2c91; color: #fff; font-weight: 900; border: 2.5px solid #b3d235; border-radius: 10px; padding: 0 7px; font-size: 13px; line-height: 18px; }
.cu-head { display: flex; gap: 14px; align-items: center; background: #fff8e8; border: 1px solid #f1d9a8; border-radius: 12px; padding: 10px 12px; margin-bottom: 12px; }
.cu-head img { width: 64px; height: 84px; object-fit: cover; object-position: center 35%; border-radius: 10px; flex: none; }
.cu-head .who { font-size: 12px; font-weight: 800; color: #b06a00; }
.cu-head .say { font-size: 16px; font-weight: 800; line-height: 1.4; margin: 2px 0 4px; }
.cu-wallet { font-size: 12px; color: var(--ink-3); }
.cu-wallet b { color: var(--ink); font-size: 14px; }
.cu-tier { margin-top: 10px; }
.cu-tier-h { display: flex; gap: 8px; align-items: baseline; font-size: 13px; margin-bottom: 6px; }
.cu-tier-h span { color: var(--ink-3); font-size: 12px; }
.cu-tier.t4 .cu-tier-h b { color: #6a2c91; }
.cu-items { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.cu-item { position: relative; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "ic nm" "ic pr" "ef ef"; gap: 0 8px; text-align: left; border: 1.5px solid #e2dfd6; background: #fff; border-radius: 10px; padding: 8px 10px; align-items: center; overflow: hidden; }
.cu-item:hover { border-color: #6a2c91; background: #faf6fd; }
.cu-item .ic { grid-area: ic; font-size: 26px; }
.cu-item .nm { grid-area: nm; font-weight: 800; font-size: 13px; }
.cu-item .pr { grid-area: pr; font-weight: 900; color: #6a2c91; font-variant-numeric: tabular-nums; }
.cu-item .ef { grid-area: ef; font-size: 11px; color: #2e8b57; font-weight: 700; margin-top: 4px; }
.cu-item.poor { opacity: .55; }
.cu-item.poor .pr { color: var(--stamp); }
.cu-item.sold { background: #f3f1ec; cursor: not-allowed; }
.cu-item.sold .ef { color: var(--stamp); }
.cu-item .sold-stamp { position: absolute; right: 6px; top: 6px; border: 2px solid var(--stamp); color: var(--stamp); font-weight: 900; font-size: 11px; padding: 1px 5px; border-radius: 5px; transform: rotate(-12deg); }
.cu-item.nope { animation: shake .3s; }
@media (max-width: 560px) { .cu-items { grid-template-columns: 1fr 1fr; } }

/* ===== get coffee: drink button + brewing label ===== */
.coffee-btn { display: flex; align-items: center; gap: 10px; border: 0; padding: 6px 14px 6px 6px; font-weight: 800; color: var(--ink); border-left: 4px solid #1f5c32; animation: toastin .25s ease; }
.coffee-btn[hidden] { display: none; }
.coffee-btn img { width: 40px; height: 40px; object-fit: cover; border-radius: 8px; background: #1f5c32; }
.coffee-btn small { display: block; font-weight: 600; color: var(--ink-3); font-size: 11px; }
.coffee-btn .sips { display: inline-flex; gap: 3px; margin-left: 4px; vertical-align: middle; }
.coffee-btn .sips i { width: 9px; height: 13px; border-radius: 2px 2px 4px 4px; background: #5a3418; }
.coffee-btn .sips i.empty { background: #e3e0d7; }
.flabel.brew { background: #1f5c32; color: #fff; font-size: 13px; padding: 5px 11px; box-shadow: var(--shadow); }

/* ===== standing ovation ===== */
.cheer { position: absolute; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; animation: fadein .25s; }
.cheer.out { opacity: 0; transition: opacity .45s; }
.cheer-rays { position: absolute; left: 50%; top: 42%; width: 220vmax; height: 220vmax; transform: translate(-50%, -50%); background: repeating-conic-gradient(rgba(255,214,90,.20) 0 6deg, transparent 6deg 18deg); animation: spin 14s linear infinite; mask-image: radial-gradient(circle, #000 0, transparent 60%); -webkit-mask-image: radial-gradient(circle, #000 0, transparent 60%); }
.cheer-confetti i { position: absolute; top: -20px; border-radius: 2px; animation: confetti linear forwards; }
.cheer-claps span { position: absolute; font-size: clamp(28px, 5vw, 46px); opacity: 0; animation: clappop 1.2s ease-out infinite; }
.cheer-card { position: absolute; left: 50%; top: 42%; transform: translate(-50%, -50%); display: flex; align-items: center; gap: 18px; background: #fff8e8; border: 4px solid #6a2c91; outline: 4px solid #b3d235; border-radius: 22px; padding: 14px 24px 14px 14px; box-shadow: 0 24px 60px rgba(0,0,0,.35); animation: cheerin .6s cubic-bezier(.2,1.5,.4,1) both, wobble 1.6s .6s ease-in-out infinite; max-width: calc(100vw - 32px); }
.cheer-card img { width: clamp(90px, 16vw, 150px); aspect-ratio: 335 / 420; object-fit: cover; object-position: center 30%; border-radius: 14px; flex: none; }
.cheer-txt .t1 { font-size: clamp(22px, 4.2vw, 40px); font-weight: 900; letter-spacing: -.03em; color: #1f5c32; line-height: 1.15; }
.cheer-txt .t2 { font-size: clamp(15px, 2.4vw, 22px); font-weight: 800; color: #6a2c91; margin-top: 6px; }
.cheer-txt .t3 { font-size: clamp(22px, 3vw, 30px); margin-top: 6px; animation: clapbeat .3s ease-in-out infinite alternate; transform-origin: left center; }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes confetti { 0% { transform: translate(0, 0) rotate(0); opacity: 1; } 100% { transform: translate(var(--sx), 105vh) rotate(var(--r)); opacity: .9; } }
@keyframes clappop { 0% { transform: scale(.3) translateY(10px); opacity: 0; } 30% { transform: scale(1.15); opacity: 1; } 100% { transform: scale(1) translateY(-40px); opacity: 0; } }
@keyframes cheerin { from { transform: translate(-50%, -50%) scale(.2) rotate(-8deg); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes wobble { 0%, 100% { transform: translate(-50%, -50%) rotate(-1.5deg); } 50% { transform: translate(-50%, -52%) rotate(1.5deg) scale(1.03); } }
@keyframes clapbeat { from { transform: scale(1); } to { transform: scale(1.15); } }

/* reputation bar + report button */
.bar.rep b { background: linear-gradient(90deg, #c8312b, #e0a531, #3cae6a); }
.task.report .d { color: #b07a10; font-weight: 700; }
.tasks .report-btn { width: 100%; margin: 2px 0 6px; }
.tasks .sum { font-size: 11px; color: var(--ink-3); border-top: 1px solid var(--line); padding-top: 6px; margin-top: 2px; }

/* ---------- 화분 물 주기 ---------- */
.plant-stage { position: relative; height: 300px; border-radius: 10px; overflow: hidden; cursor: pointer; user-select: none; touch-action: none; -webkit-user-select: none; }
.plant-stage canvas { width: 100%; height: 100%; display: block; }
.plant-info { position: absolute; left: 14px; top: 12px; display: flex; flex-direction: column; gap: 2px; background: rgba(255,255,255,.85); padding: 7px 10px; border-radius: 8px; max-width: 60%; }
.plant-info b { font-size: 15px; }
.plant-info span { font-size: 12px; color: var(--ink-3); }
.plant-msg { position: absolute; left: 0; right: 70px; bottom: 14px; text-align: center; font-weight: 800; font-size: 15px; pointer-events: none; }
.plant-msg.good { color: #1f7a45; } .plant-msg.bad { color: var(--stamp); } .plant-msg.warn { color: #a26a00; }

/* ---------- 정수기 물통 ---------- */
.jug-stage { position: relative; height: 300px; border-radius: 10px; overflow: hidden; touch-action: none; user-select: none; }
.jug-stage canvas { width: 100%; height: 100%; display: block; }
.jug-msg { position: absolute; left: 0; right: 0; top: 46px; text-align: center; font-weight: 800; font-size: 16px; pointer-events: none; }
.jug-msg.good { color: #1f7a45; } .jug-msg.bad { color: var(--stamp); }
.jt-gauge { position: relative; height: 34px; margin-top: 12px; border-radius: 17px; background: #e2e3e7; overflow: hidden; cursor: pointer; touch-action: none; user-select: none; }
.jt-gauge .zone { position: absolute; top: 0; bottom: 0; background: rgba(60,174,106,.45); }
.jt-gauge .sweet { position: absolute; top: 0; bottom: 0; background: rgba(60,174,106,.75); }
.jt-gauge .needle { position: absolute; top: 3px; bottom: 3px; width: 6px; margin-left: -3px; border-radius: 3px; background: var(--ink); box-shadow: 0 0 0 2px #fff; }
.jt-gauge.hit { box-shadow: 0 0 0 3px #3cae6a; }
.jt-gauge.miss { animation: shake .3s; box-shadow: 0 0 0 3px var(--stamp); }
.jt-steps { display: flex; justify-content: space-between; margin-top: 8px; font-size: 12px; color: var(--ink-3); }
.jt-steps span.on { color: var(--ink); font-weight: 800; }
.jt-steps span.done { color: #1f7a45; }
.jt-steps span.done::before { content: '✓ '; }

/* ---------- 스테이플러 리듬 ---------- */
.stp-stage { position: relative; height: 210px; border-radius: 10px; overflow: hidden; background: linear-gradient(#b48a5c, #9c7448); cursor: pointer; user-select: none; touch-action: none; }
.stp-lane { position: absolute; inset: 0; }
.stp-note { position: absolute; left: 0; top: 46px; width: 100px; height: 128px; background: #fdfdf8; border-radius: 3px; box-shadow: 0 3px 8px rgba(0,0,0,.3); padding: 8px 8px; will-change: transform; }
.stp-note b { display: block; font-size: 11px; line-height: 1.25; margin-bottom: 8px; color: var(--ink); }
.stp-note i { display: block; height: 4px; margin: 6px 0; background: rgba(60,80,120,.18); border-radius: 2px; }
.stp-note.red { background: #ffecea; box-shadow: 0 3px 8px rgba(0,0,0,.3), inset 0 0 0 2px #d9443b; }
.stp-note.red b { color: #c8312b; }
.stp-note.stapled::after { content: ''; position: absolute; right: 10px; top: 8px; width: 18px; height: 4px; background: #8d939c; border-radius: 1px; transform: rotate(-35deg); }
.stp-note.holed::after { content: ''; position: absolute; right: 10px; top: 6px; width: 12px; height: 12px; border-radius: 50%; background: #9c7448; }
.stp-note.kept { box-shadow: 0 3px 8px rgba(0,0,0,.3), inset 0 0 0 2px #3cae6a; }
.stp-line { position: absolute; left: 78%; top: 20px; bottom: 20px; width: 3px; background: rgba(255,255,255,.75); border-radius: 2px; box-shadow: 0 0 10px rgba(255,255,255,.8); }
.stp-stapler { position: absolute; left: calc(78% - 30px); top: 6px; width: 70px; height: 50px; pointer-events: none; }
.stp-stapler .top { position: absolute; left: 0; top: 4px; width: 70px; height: 18px; background: #c8423b; border-radius: 6px 10px 4px 4px; transform-origin: 100% 50%; transition: transform .07s; }
.stp-stapler .base { position: absolute; left: 4px; top: 28px; width: 66px; height: 10px; background: #2a2c31; border-radius: 3px; }
.stp-stapler.hit .top { animation: stp-press .14s; }
@keyframes stp-press { 50% { transform: rotate(-9deg) translateY(8px); } }
.stp-judge { position: absolute; left: 0; right: 0; bottom: 10px; text-align: center; font-weight: 900; font-size: 20px; color: #fff; text-shadow: 0 2px 4px rgba(0,0,0,.35); pointer-events: none; }
.stp-judge.perfect { color: #ffe066; } .stp-judge.bad { color: #ffb4ad; }
.stp-judge.pop { animation: stp-pop .25s; }
@keyframes stp-pop { from { transform: scale(1.35); } }
.stp-count { position: absolute; left: 0; right: 0; top: 70px; text-align: center; font-weight: 900; font-size: 40px; color: rgba(255,255,255,.9); pointer-events: none; }
.stp-stats { display: flex; gap: 16px; margin-top: 10px; font-size: 13px; color: var(--ink-2); }
.stp-stats .combo { margin-left: auto; font-weight: 800; color: #1f7a45; }
.red-t { color: var(--stamp); }

/* ---------- 세단 문서 복원 ---------- */
.shr-wrap { background: linear-gradient(#5b606b, #43474f); border-radius: 10px; padding: 18px 14px; }
.shr-board { display: flex; justify-content: center; align-items: flex-start; gap: 7px; width: min(100%, 380px); margin: 0 auto; touch-action: none; user-select: none; }
.shr-strip { flex: 0 0 calc((100% - 35px) / 6); aspect-ratio: 80 / 620; background-repeat: no-repeat; border-radius: 1px; box-shadow: 0 2px 6px rgba(0,0,0,.4); cursor: grab; transform: rotate(var(--tilt)); transition: transform .2s, margin .15s, box-shadow .15s; }
.shr-strip.flip { transform: rotate(calc(180deg + var(--tilt))); }
.shr-strip.join { margin-right: -7px; }
.shr-strip.drag { cursor: grabbing; z-index: 5; box-shadow: 0 10px 24px rgba(0,0,0,.5); transition: none; }
.shr-strip.gap-l { margin-left: 22px; }
.shr-board.done .shr-strip { transform: none; box-shadow: none; }
@media (max-width: 560px) { .plant-stage, .jug-stage { height: 250px; } .stp-note { width: 84px; height: 110px; } }

/* ---------- 층 선택 (멀티플레이 세션) ---------- */
.floor-list { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.floor { display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; padding: 11px 14px; cursor: pointer; transition: border-color .15s, transform .08s; color: var(--ink); }
.floor:hover:not([disabled]) { border-color: var(--ink); }
.floor:active:not([disabled]) { transform: translateY(1px); }
.floor[disabled] { cursor: default; opacity: .55; }
.floor.here { opacity: 1; background: var(--paper-2); }
.floor.rec { border-color: #3cae6a; box-shadow: 0 0 0 1px #3cae6a inset; }
.fl-no { flex: none; width: 46px; height: 46px; border-radius: 8px; background: #1d2027; color: #ff9b3d; font-weight: 900; font-size: 17px; display: grid; place-items: center; font-variant-numeric: tabular-nums; }
.floor.b1 .fl-no { color: #3ddc84; }
.fl-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.fl-txt b { font-size: 15px; }
.fl-txt small { font-size: 12px; color: var(--ink-3); }
.fl-n { flex: none; font-size: 13px; font-weight: 700; color: var(--ink-2); display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-variant-numeric: tabular-nums; }
.fl-n i { font-style: normal; font-size: 11px; color: #fff; background: #3cae6a; border-radius: 4px; padding: 1px 6px; }