/* ─────────────────────────────────────────────────────────────────────────────
   볼티의 반도체 인턴일지 — DAY 06
   목업(.dc.html)의 인라인 스타일을 화면 단위로 정리한 스타일시트.
   색의 의미 체계는 04 §12를 따른다: 노랑=볼티/주 행동, 초록=정상, 주황=경고,
   적색=실패 원인, 회색/네이비=비활성.
   ───────────────────────────────────────────────────────────────────────────── */

:root {
  /* 업무 화면 콘텐츠 영역(좌측 레일 오른쪽)의 가운데 */
  --work-center: 790px;

  --ink: #2a3b66;
  --ink-dark: #1b2846;
  --text: #3a3630;
  --muted: #8a8272;
  --faint: #b7af9e;
  --line: #e4dece;

  --volt: #ffd338;
  --volt-dark: #c9a214;
  --amber: #f0c93b;
  --amber-text: #c9930a;

  --danger: #e8543f;
  --danger-dark: #c43c28;
  --ok: #4caf7d;
  --ok-dark: #2e7d54;

  --team-prod: #5b7ed9;
  --team-meet: #8b6fc9;
  --team-buy: #4caf7d;
  --team-fin: #c98a3d;

  --paper: #fdfbf5;
  --cream: #fffdf7;
  --note: #fff9e3;
  --note-soft: #fff7dc;
  --sticky: #ffe9a8;
  --panel: #f6f2e8;

  --font-title: 'Volti Jua', 'Volti Plex KR', sans-serif;
  --font-body: 'Volti Plex KR', sans-serif;
  --font-mono: 'Volti Plex Mono', 'Volti Plex KR', monospace;
  /* 설치된 폰트·브라우저의 가상 굵기·모바일 자동 글자 확대에 의존하지 않는다. */
  font-synthesis: none;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  --shadow-card: 0 10px 24px rgba(90, 75, 50, 0.18);
  --shadow-modal: 0 30px 70px rgba(0, 0, 0, 0.5);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: #101626;
  overflow: hidden;
  font-family: var(--font-body);
}

button, input, select, textarea { font: inherit; }

a { color: var(--volt); }
a:hover { color: #fff; }

/* ── 무대 ─────────────────────────────────────────────────────────────────── */

.stage {
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(ellipse at 50% 30%, #1b2742, #101626);
  font-family: var(--font-body);
}

/* 게임 문구는 선택 대상이 아니다. Safari의 길게 누르기 메뉴도 숨긴다. */
.stage, .stage * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.stage input, .stage textarea,
.stage [contenteditable]:not([contenteditable="false"]),
.stage [contenteditable]:not([contenteditable="false"]) * {
  -webkit-user-select: text;
  user-select: text;
  -webkit-touch-callout: default;
}
.stage img, .stage a { -webkit-user-drag: none; }
/* pan은 허용하지만 pinch/double-tap zoom은 허용하지 않는다. */
.stage, .stage * { touch-action: pan-x pan-y; }

.frame {
  --hud-tool-height: 34px;
  --hud-row-height: 42px;
  --hud-top: 8px;
  --hud-inline: 18px;
  --hud-tool-gap: 7px;
  position: relative;
  width: 1280px;
  height: 800px;
  flex: none;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
  /* 배경 이미지가 아직 안 떴을 때 파란 여백이 보이지 않도록 방 색으로 맞춘다 */
  background: #e8e1d4;
  color: var(--text);
}
/* 세로(모바일) 프레임 — 폭 402 고정, 세로는 창 비율대로(640~874 · main.js 가 inline 으로 준다).
   실제 기기에서는 화면을 가득 채우므로 둥근 모서리와 그림자를 걷는다. 나머지 배치 규칙은 `mobile.css`. */
.frame--mo { width: 402px; height: 786px; border-radius: 0; box-shadow: none; }

/* ── 사원증·업무 노트를 「보여 주는」 동안 (사용자 지시) ─────────────────────
   실물 하나만 남기고 **배경 화면의 채색이 빠진다.** 닫으면 같은 transition 이
   거꾸로 돌아 색이 돌아온다 — 배경과 화면은 유지되는 노드라 양방향으로 동작한다.
   ⚠ HUD 는 제외다. 대사가 가리키는 것이 HUD 의 사원증 칩이라 같이 죽으면 안 된다.
   ⚠ 대사 바도 제외다(`.dialog--spot` 이 z 77 로 올라간다). */
.frame-bg,
.scene { transition: filter .34s ease; }
.frame--dim .frame-bg,
.frame--dim .scene { filter: grayscale(.8) brightness(.5) blur(2px); }
/* blur 은 프레임 밖을 투명으로 샘플링해 가장자리를 흐린다 — 배경만 살짝 키워 덮는다. */
.frame--dim .frame-bg { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .frame-bg, .scene { transition: none; }
}

/* 회사 배경 — 프레임에 한 장만 둔다. 장면이 바뀌어도 다시 디코딩되지 않는다. */
.frame-bg {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

/* 부서 색 스크림 — 배경을 눌러 UI 가독성을 지키면서 방마다 색을 준다 (04 §7)
   ── 목업 반영 ──────────────────────────────────────────────────────────────
   목업의 업무 화면은 배경 사진이 **아예 없고** 따뜻한 종이색(`#f2ede1`) 한 장이다.
   그래야 카드·수치가 사진의 창문·서버랙과 겨루지 않는다. 다만 사진을 통째로 버리면
   04 §7 의 「방마다 색」이 사라지므로, **종이에 부서 색을 한 스푼** 섞고 블러를 올렸다.
   방은 뒤에 질감으로만 남는다 — 예전 0.58~0.86 은 창밖 도시가 그대로 읽혔다. */
.veil {
  position: absolute;
  inset: 0;
  backdrop-filter: blur(7px) saturate(0.7);
  -webkit-backdrop-filter: blur(7px) saturate(0.7);
}
.veil--hall { background: linear-gradient(rgba(245, 241, 231, 0.90), rgba(238, 233, 221, 0.96)); }
.veil--prod { background: linear-gradient(rgba(236, 233, 226, 0.90), rgba(227, 226, 232, 0.96)); }
.veil--meet { background: linear-gradient(rgba(237, 234, 227, 0.90), rgba(231, 225, 235, 0.96)); }
.veil--buy { background: linear-gradient(rgba(235, 236, 227, 0.90), rgba(222, 232, 226, 0.96)); }

/* ── 애니메이션 (04 §44: 로컬 변화만, 전체 화면 섬광 금지) ──────────────────── */

@keyframes sfade { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
/*
 * 가운데로 옮겨 놓은 요소는 popIn 을 그대로 쓰면 안 된다.
 * popIn 의 `transform: scale(...)` 이 `translate(-50%,-50%)` 를 통째로 덮어써서,
 * 시작 순간 요소의 왼쪽 위 모서리가 화면 중앙에 놓였다가 제자리로 미끄러져 들어온다
 * ("오른쪽 아래에서 올라오는" 증상). 아래 두 키프레임은 정렬을 유지한 채 커진다.
 */
@keyframes popInCenter {
  from { opacity: 0; transform: translate(-50%, -50%) scale(0.85); }
  to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes popInCenterX {
  from { opacity: 0; transform: translateX(-50%) scale(0.85); }
  to { opacity: 1; transform: translateX(-50%) scale(1); }
}

@keyframes popIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } }
/* 목업의 등장 — 아래에서 살짝 튀어 올라온다. `translateX` 를 건드리지 않으므로
   가운데 정렬(`translateX(-50%)`)이 아닌 요소에도 안전하다. */
@keyframes popUp {
  0% { opacity: 0; transform: translateY(14px) scale(0.92); }
  70% { opacity: 1; transform: translateY(-3px) scale(1.02); }
  100% { opacity: 1; transform: none; }
}
@keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
/* 시작은 문 줄 왼쪽 바깥, 끝은 목적지 문의 가운데(`--to`). */
@keyframes voltiRun { from { left: -8%; } to { left: var(--to, 50%); } }
@keyframes pulseWhy {
  0%, 100% { box-shadow: 0 4px 0 var(--volt-dark), 0 0 0 6px rgba(255, 211, 56, 0.35); }
  50% { box-shadow: 0 4px 0 var(--volt-dark), 0 0 0 14px rgba(255, 211, 56, 0.12); }
}
@keyframes guidePulse {
  0%, 100% { box-shadow: 0 5px 0 var(--volt-dark), 0 0 0 0 rgba(255, 211, 56, 0.6); }
  50% { box-shadow: 0 5px 0 var(--volt-dark), 0 0 0 18px rgba(255, 211, 56, 0); }
}
@keyframes passPush {
  0% { transform: scale(0.9) translateY(10px); opacity: 0; }
  60% { transform: scale(1.03) translateY(0); opacity: 1; }
  100% { transform: scale(1) translateY(0); }
}
@keyframes bonusPop {
  0% { transform: scale(0.7); opacity: 0; }
  70% { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes passPop {
  0%, 100% { transform: scale(1); }
  35% { transform: scale(1.16); }
}
@keyframes stampSlam {
  0% { transform: scale(2.8) rotate(-24deg); opacity: 0; }
  55% { transform: scale(0.92) rotate(-8deg); opacity: 1; }
  75% { transform: scale(1.06) rotate(-8deg); }
  100% { transform: scale(1) rotate(-8deg); }
}

@media (prefers-reduced-motion: reduce) {
  .scene, .modal__card, .pop, .pass__foil::after { animation: none !important; }
}

/* ── 공통 조각 ────────────────────────────────────────────────────────────── */

.scene { position: absolute; inset: 0; animation: sfade 0.4s ease; }
.scene--room { background: none; }
.scene--instant { animation: none; }
.scene--slow { animation-duration: 0.5s; }

.bg-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scrim { position: absolute; inset: 0; }
.floor-line { position: absolute; left: 0; right: 0; border-bottom: 3px dashed #c9bfa8; }

.sprite { position: absolute; filter: drop-shadow(0 8px 14px rgba(90, 75, 50, 0.3)); }
.sprite--dark { filter: drop-shadow(0 10px 16px rgba(0, 0, 0, 0.4)); }
.pop { animation: popIn 0.25s ease; }

/* 말풍선 — NPC/볼티 공통 문법 (04 §10) */
.bubble {
  position: absolute;
  background: #fff;
  border: 2px solid var(--ink);
  border-radius: 16px;
  padding: 12px 18px;
  font: 400 17px var(--font-title);
  color: var(--ink);
  box-shadow: 0 6px 14px rgba(42, 59, 102, 0.18);
}
.bubble__tail {
  position: absolute;
  bottom: -8px;
  width: 14px;
  height: 14px;
  background: #fff;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
}

/* Primary Action은 한 화면에 하나 (03 §5-2) */
.btn {
  cursor: pointer;
  font-family: var(--font-title);
  color: var(--ink);
  border-radius: 14px;
  white-space: nowrap;
  user-select: none;
}
.btn--volt { background: var(--volt); box-shadow: 0 4px 0 var(--volt-dark); }
.btn--volt:hover { transform: translateY(-2px); }
.btn--volt:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--volt-dark); }
.btn--ghost { background: rgba(255, 255, 255, 0.92); }
.btn--ghost:hover { background: #fff; transform: translateY(-2px); }
.btn--dashed { background: #fff; border: 2px dashed #9aa7c7; }
.btn--dashed:hover { background: #fafaf6; }

.tag {
  color: #fff;
  font: 400 12px var(--font-title);
  border-radius: 7px;
  padding: 4px 8px;
  flex: none;
}
.tag--prod { background: var(--team-prod); }
.tag--meet { background: var(--team-meet); }
.tag--buy { background: var(--team-buy); }
.tag--urgent { background: var(--danger); }

.avatar {
  border-radius: 50%;
  color: #fff;
  text-align: center;
  flex: none;
  font-family: var(--font-title);
}

.kicker {
  font: 500 12px var(--font-mono);
  color: var(--muted);
  letter-spacing: 0.14em;
}

/* 핵심 단어 강조 — 색 + 굵기, 과도한 형광색 금지 (04 §41-3) */
.hl { font-weight: 700; color: var(--amber-text); }
.dialog__body .hl { color: #b8790a; }
.card__text .hl { color: #b8790a; }
.guide__text .hl { color: var(--volt); }

/* 실패 원인 형광펜 (04 §5-3) */
.highlight {
  background: linear-gradient(104deg,
    rgba(249, 240, 80, 0) 2%, rgba(249, 240, 80, 0.85) 5%,
    rgba(249, 240, 80, 0.85) 96%, rgba(249, 240, 80, 0) 99%);
}

/* ── NEWS (B-NEWS-01) ─────────────────────────────────────────────────────── */

.news__scrim { background: rgba(26, 32, 60, 0.32); }

.tv {
  position: absolute;
  left: 180px; top: 96px; width: 700px;
  background: #1b2338;
  border-radius: 22px;
  padding: 16px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
  border: 6px solid #0f1424;
}
.tv__head { display: flex; align-items: center; gap: 10px; padding: 4px 8px 12px; }
.tv__live {
  background: var(--danger); color: #fff;
  font: 700 12px var(--font-body);
  border-radius: 6px; padding: 3px 10px;
}
.tv__slug { font: 500 13px var(--font-mono); color: #8fa0c9; }
.tv__perm {
  margin-left: auto;
  background: rgba(255, 211, 56, 0.14);
  border: 1px solid var(--volt-dark);
  color: #f5d95e;
  font: 500 11px var(--font-mono);
  border-radius: 999px; padding: 3px 10px;
}
.tv__title { font: 400 34px/1.35 var(--font-title); color: #fff; padding: 0 8px; }
.tv__body { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; padding: 0 8px; }
.tv__key {
  background: rgba(240, 201, 59, 0.12);
  border: 1.5px solid var(--amber);
  border-radius: 12px; padding: 12px 16px;
  display: flex; gap: 12px; align-items: center;
}
.tv__keytag {
  background: var(--amber); color: #5c4a08;
  font: 400 13px var(--font-title);
  border-radius: 7px; padding: 4px 10px; flex: none;
}
.tv__keytext { font: 500 15px var(--font-body); color: #f5ecc9; }
.tv__ticker {
  background: var(--volt);
  border-radius: 0 0 12px 12px;
  margin: 18px -16px -16px;
  padding: 10px 20px;
  font: 500 14px var(--font-mono);
  color: var(--ink);
  white-space: nowrap; overflow: hidden;
}

.news__volti { left: 950px; top: 420px; height: 270px; }
.news__bubble { left: 900px; top: 330px; font-size: 16px; box-shadow: none; }
.news__bubble .bubble__tail { left: 80px; }

.news__actions {
  position: absolute;
  left: 180px; bottom: 78px;
  display: flex; gap: 14px; align-items: stretch;
}

/* 두 줄 행동 버튼 — 무엇을 하는 것인지 아래 줄에 적는다 (03 §5-2) */
.news-btn {
  display: flex; align-items: center; gap: 12px;
  border-radius: 16px;
  padding: 13px 20px;
  cursor: pointer;
  user-select: none;
  transition: transform 0.12s ease;
}
.news-btn:hover { transform: translateY(-2px); }
.news-btn__icon { height: 24px; flex: none; }
.news-btn__icon--arrow {
  width: 26px; height: 26px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font: 400 16px var(--font-title);
  background: rgba(42, 59, 102, 0.1);
  color: var(--ink);
}
.news-btn__title { font: 400 19px var(--font-title); color: var(--ink); }
.news-btn__sub { font: 500 12px var(--font-body); color: var(--muted); margin-top: 2px; }

.news-btn--save { background: var(--volt); box-shadow: 0 4px 0 var(--volt-dark); }
.news-btn--save .news-btn__sub { color: #8a6e0c; }
/* 왜 단서인지 아직 확인하지 않은 상태 */
.news-btn--locked { background: rgba(255, 255, 255, 0.7); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.08); }
.news-btn--locked .news-btn__title { color: var(--muted); }
.news-btn--locked .news-btn__icon { filter: grayscale(1); opacity: 0.5; }
.news-btn--saved { background: #dff3e8; box-shadow: 0 4px 0 #a9d6bf; }
.news-btn--saved .news-btn__title { color: var(--ok-dark); }
.news-btn--saved .news-btn__sub { color: #5f8a74; }

.news-btn--leave { background: rgba(255, 255, 255, 0.92); }
.news-btn--leave:hover { background: #fff; }
/* 단서를 저장하고 나면 Primary 가 이쪽으로 넘어간다 */
.news-btn--primary {
  background: var(--volt);
  box-shadow: 0 4px 0 var(--volt-dark);
  animation: guidePulse 1.6s ease-in-out infinite;
}
.news-btn--primary .news-btn__sub { color: #8a6e0c; }
.news-btn--primary .news-btn__icon--arrow { background: rgba(42, 59, 102, 0.18); }

/* 뉴스에서 읽어 볼 수 있는 조각 */
.tv__read { position: relative; cursor: pointer; border-radius: 12px; }
.tv__read:hover { background-color: rgba(255, 211, 56, 0.1); }
.tv__lens {
  flex: none;
  font-size: 14px;
  margin-left: auto;
  padding-left: 10px;
  opacity: 0.8;
}
.tv__read--done .tv__lens { opacity: 1; }
.tv__title.tv__read { padding: 4px 8px; }
.tv__ticker.tv__read:hover { background-color: #ffdf6b; }

/* 읽은 조각의 뜻이 쌓이는 자리 */
.news-note {
  position: absolute;
  left: 180px; top: 470px; width: 700px;
  background: rgba(255, 255, 255, 0.95);
  border: 2px dashed #9aa7c7;
  border-radius: 14px;
  padding: 12px 18px;
  animation: popIn 0.2s ease;
}
.news-note--clue { background: var(--note-soft); border: 2px solid var(--amber); }
.news-note__label { font: 400 13px var(--font-title); color: var(--muted); }
.news-note__body { font: 500 15px var(--font-body); color: var(--text); margin-top: 4px; }
.news-note--clue .news-note__body { color: #8a6e0c; font-weight: 700; }

.room__time {
  width: 74px; flex: none; text-align: right;
  font: 500 17px var(--font-mono); color: var(--muted);
}
/* 눈금점 — 세로선 위에 얹는다. */
.room__time::after {
  content: '';
  position: absolute; left: 81px; top: 50%; transform: translateY(-50%);
  width: 12px; height: 12px; border-radius: 50%;
  background: #fff; border: 2px solid #d9d0bc;
}
.room__body {
  position: relative;
  flex: 1;
  display: flex; align-items: center; gap: 14px;
  background: var(--cream);
  border: 2px solid var(--line);
  border-left-width: 7px;
  border-radius: 14px;
  padding: 15px 18px;
  box-shadow: var(--shadow-card);
}
.room__body--blue { border-left-color: var(--team-prod); }
.room__body--purple { border-left-color: var(--team-meet); }
.room__body--green { border-left-color: var(--team-buy); }
.room__body--desk { border-left-color: var(--amber); }

.room__team {
  flex: none;
  font: 400 15px var(--font-title); color: var(--ink);
  background: #eef1f8; border-radius: 8px; padding: 5px 12px;
}
.room__task { flex: 1; font: 500 17px var(--font-body); color: var(--text); }
.room__state {
  flex: none;
  font: 400 15px var(--font-title); color: var(--muted);
  min-width: 62px; text-align: right;
}
.room__badge {
  flex: none;
  background: var(--danger); color: #fff;
  font: 400 13px var(--font-title);
  border-radius: 8px; padding: 5px 10px;
  transform: rotate(-2deg);
}

/* ── DOC — 비교/판단 (B-WORK-01) ──────────────────────────────────────────── */

.screen-title {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  background: var(--ink); color: #fff;
  font: 400 25px var(--font-title);
  border-radius: 999px; padding: 14px 32px;
  box-shadow: 0 6px 16px rgba(42, 59, 102, 0.35);
  white-space: nowrap;
}
/* HUD 띠(top 20, 높이 ~47)가 67px 에서 끝난다 — 제목은 그 아래로 여유 있게. */
.work-title { top: 80px; left: var(--work-center); }

/* Primary Action — 업무 화면마다 같은 자리 (03 §5-2) */
.submit-action {
  position: absolute;
  left: var(--work-center); bottom: 78px; transform: translateX(-50%);
  background: var(--volt);
  font: 400 23px var(--font-title);
  border-radius: 16px; padding: 17px 40px;
  box-shadow: 0 5px 0 var(--volt-dark);
  display: flex; gap: 10px; align-items: center;
}
.submit-action:hover { transform: translateX(-50%) translateY(-2px); }
.submit-action:active { transform: translateX(-50%) translateY(3px); box-shadow: 0 2px 0 var(--volt-dark); }
.submit-action img { height: 22px; }
/* 아직 낼 수 없는 상태 — 막지는 않고, 누르면 무엇이 남았는지 알려준다 (03 §9) */
.submit-action--wait { opacity: 0.5; filter: grayscale(0.35); }

/* 견적서 두 장 — 좌우 위치 고정, 카드 높이 동일 (04 §14) */
/* 견적서 — 06 §6-3 이 파운드리 **세 장**을 준다. 예전에는 두 장을 좌우에 절대 배치했다. */
.quotes {
  position: absolute;
  left: var(--work-center); top: 148px; transform: translateX(-50%);
  width: 900px;
  display: flex; gap: 12px; align-items: flex-start;
}
.quote {
  position: relative;   /* 추천 포스트잇이 이 카드에 붙는다 */
  flex: 1; min-width: 0;
  background: var(--paper);
  border-radius: 10px;
  padding: 16px 18px 14px;
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
  cursor: pointer;
  border: 3px solid transparent;
  transition: transform 0.12s ease;
}
.quote:hover { transform: translateY(-4px); }
.quote--selected { border-color: var(--ink); }
.quote__kicker { font: 500 11px var(--font-mono); color: var(--muted); }
.quote__title {
  font: 400 21px var(--font-title);
  color: var(--ink);
  margin-top: 2px;
}
.quote__kind {
  font: 500 11px var(--font-mono); color: var(--muted);
  padding-bottom: 8px; margin-top: 1px;
  border-bottom: 2px solid var(--ink);
}
.quote__row {
  position: relative;
  display: flex; justify-content: space-between;
  padding: 15px 4px;
  border-bottom: 1px solid var(--line);
  font: 500 16px var(--font-body);
  cursor: pointer;
}
.quote__row:hover { background: #faf4de; }
.quote__row--last { border-bottom: none; }
.quote__row--read .quote__label { color: var(--ok-dark); }
.quote__row--wide { padding: 15px 10px; }
.quote__label { color: var(--muted); }
.quote__value { color: var(--ink); font-weight: 700; }
.quote__value--good { color: var(--ok-dark); }
.quote__pick {
  margin-top: 12px;
  border-radius: 12px;
  padding: 9px;
  text-align: center;
  font: 400 15px var(--font-title);
  color: var(--ink);
  background: #f3eeE0;
  border: 2px solid var(--line);
  cursor: pointer;
}
.quote__pick:hover { background: var(--note-soft); border-color: var(--amber); }
.quote__pick--on {
  background: var(--volt);
  border-color: var(--volt-dark);
  box-shadow: 0 3px 0 var(--volt-dark);
}
.quote__flag {
  position: absolute;
  right: -10px; top: -14px;
  background: var(--danger); color: #fff;
  font: 400 12px var(--font-title);
  border-radius: 8px; padding: 4px 9px;
  transform: rotate(6deg);
}

/* 포스트잇 `착!` (04 §15) — 고른 대상에 붙는다 */
.postit {
  position: absolute;
  right: 16px; top: 14px;
  background: var(--volt);
  border-radius: 8px; padding: 6px 12px;
  font: 400 15px var(--font-title);
  color: var(--ink);
  transform: rotate(5deg);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
  animation: popIn 0.2s ease;
  white-space: nowrap;
}

/* ── SCOLD — 혼남/교정 (B-SCOLD-01) ───────────────────────────────────────── */

.scold__scrim { background: rgba(26, 32, 60, 0.42); }
.scold__npc { position: absolute; left: 80px; top: 150px; width: 320px; }
.scold__avatar {
  width: 76px; height: 76px;
  background: var(--team-prod);
  font-size: 32px; line-height: 76px;
}
.scold__line {
  position: relative;
  background: #fff;
  border: 2.5px solid var(--danger);
  border-radius: 18px;
  padding: 16px 20px;
  margin-top: 16px;
  font: 400 19px/1.55 var(--font-title);
  color: var(--text);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}
.scold__line b { color: var(--danger); }
.scold__soft {
  background: rgba(255, 255, 255, 0.92);
  border-radius: 14px;
  padding: 12px 16px;
  margin-top: 12px;
  font: 400 15px/1.5 var(--font-title);
  color: #6b6558;
}
.scold__fume { height: 34px; margin-top: 10px; }

.scold__paper {
  position: absolute;
  left: 470px; top: 170px; width: 360px;
  background: var(--paper);
  border-radius: 10px;
  padding: 24px 28px;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  transform: rotate(-0.6deg);
}
.scold__paper .quote__title { font-size: 22px; padding-bottom: 10px; margin-top: 0; }
.scold__row {
  position: relative;
  display: flex; justify-content: space-between;
  padding: 14px 4px;
  border-bottom: 1px solid var(--line);
  font: 500 15px var(--font-body);
}
.scold__row--last { border-bottom: none; padding: 14px 10px; }
.scold__underline {
  position: absolute;
  left: 8px; right: 8px; bottom: 8px;
  height: 3px;
  background: var(--danger);
  border-radius: 2px;
  transform: rotate(-0.4deg);
}
/* 어긋난 줄 **옆에** 붙인다. 위에 붙이면 바로 윗줄을 가리키는 것처럼 읽힌다
   (DAY 03 은 조건이 셋이라 위반 줄이 마지막이 아닐 수 있다 — 실측으로 확인). */
.scold__here {
  position: absolute;
  /* 왼쪽 끝을 줄 바깥에 건다 — `right` 로 잡으면 배지 폭만큼 줄 안으로 파고들어
     값이 긴 줄(`6,000개`)에서 숫자를 덮는다(실측으로 확인). */
  left: 100%; margin-left: 10px; top: 50%;
  background: var(--danger); color: #fff;
  font: 400 13px var(--font-title);
  border-radius: 8px; padding: 5px 10px;
  transform: translateY(-50%) rotate(6deg);
  white-space: nowrap;
}
.scold__ghost {
  position: absolute;
  right: 20px; bottom: -16px;
  border: 3px solid rgba(91, 126, 217, 0.55);
  color: rgba(91, 126, 217, 0.75);
  font: 400 16px var(--font-title);
  border-radius: 10px; padding: 5px 11px;
  transform: rotate(-9deg);
  background: rgba(255, 255, 255, 0.6);
}
.scold__volti { position: absolute; left: 920px; top: 280px; text-align: center; }
.scold__volti .bubble {
  position: relative;
  display: inline-block;
  padding: 9px 16px;
  font-size: 16px;
  margin-bottom: 10px;
  box-shadow: none;
}
.scold__volti img.sprite { position: static; }
.scold__sweat { height: 34px; vertical-align: top; margin-left: -20px; }
.scold__actions {
  position: absolute;
  left: 50%; bottom: 78px; transform: translateX(-50%);
  display: flex; gap: 16px;
}
.scold__retry { font: 400 21px var(--font-title); padding: 16px 30px; background: var(--volt); }
.scold__push { font: 400 18px var(--font-title); padding: 17px 26px; background: rgba(255, 255, 255, 0.94); }

/* ── YIELD — 웨이퍼/수율 (B-L5-YIELD-01) ──────────────────────────────────── */

.wafer-panel {
  position: absolute;
  left: 340px; top: 150px; width: 400px;
  background: #1b2338;
  border-radius: 20px;
  padding: 22px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}
.wafer-panel__meta {
  /* 12px — 2부 라벨(`정상 72 / 불량 28`)이 배지와 한 줄에 들어가야 한다.
     13px 에서는 「28」이 다음 줄로 넘어가 웨이퍼가 아래로 밀렸다. */
  font: 500 12px var(--font-mono); color: #8fa0c9;
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  white-space: nowrap;
}
.wafer-panel__hint {
  font: 400 12px var(--font-title);
  color: var(--volt);
  background: rgba(255, 211, 56, 0.14);
  border: 1px solid var(--volt-dark);
  border-radius: 999px; padding: 2px 9px;
  white-space: nowrap;
}
/* 학습 시각 앵커 — 관찰이 아니라 직접 눌러보는 오브젝트다 (02 §14) */
/* 다이 100개가 원 안에 전부 들어간다 — 잘리는 칸이 없어야 세어서 28이 나온다.
   행마다 폭이 다르므로 각 다이가 grid-column 을 직접 지정한다(WAFER_DIES). */
.wafer {
  width: 320px; height: 320px;
  border-radius: 50%;
  margin: 14px auto 0;
  background: #2a3450;
  display: grid;
  /* 12열 x 11행 고정 — WAFER.cols / WAFER.rows.length 와 같아야 한다.
     각 다이가 grid-row / grid-column 을 직접 잡으므로 자동 배치에 기대지 않는다. */
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: repeat(11, 1fr);
  gap: 3px;
  padding: 30px 16px;
}
.die { border-radius: 2px; background: #59d98e; cursor: pointer; transition: transform 0.1s ease; }
.die--bad { background: var(--danger); }
.die:hover { outline: 2px solid #fff; outline-offset: -1px; }

/* 찾아낸 불량은 눌린 것이 눈에 남아야 한다 — 어디까지 셌는지가 곧 진행이다. */
.die--found {
  background: #7a2b1e;
  box-shadow: inset 0 0 0 2px #ffd338;
  transform: scale(0.82);
}

/* 세기 진행 — 남은 개수를 계속 보여 준다. */
.count {
  display: flex; align-items: center; gap: 12px;
  margin-top: 16px;
}
.count__label { font: 400 15px var(--font-title); color: #cfd6e6; white-space: nowrap; }
.count__bar {
  flex: 1; height: 12px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.16);
  overflow: hidden;
}
.count__fill {
  height: 100%; border-radius: 999px;
  background: linear-gradient(90deg, var(--danger), var(--volt));
  transition: width 0.18s ease;
}
.count__num {
  font: 500 17px var(--font-mono); color: #fff;
  min-width: 70px; text-align: right;
}

/* 결과는 가로 한 줄로 — 세로로 쌓으면 프레임(800px) 아래로 넘쳐 버튼이 잘린다. */
.wafer-result { flex: 1; min-width: 0; }
.wafer-result__title {
  font: 400 20px var(--font-title); color: var(--ok-dark);
  margin-bottom: 8px;
}
.wafer-result__cost {
  margin-top: 7px;
  font: 500 13px var(--font-body); color: var(--muted);
}
.wafer-panel__forecast {
  background: rgba(76, 175, 125, 0.15);
  border: 1.5px solid var(--ok);
  border-radius: 12px;
  padding: 10px 14px;
  font: 400 14px var(--font-title);
  color: #8ce8b4;
  text-align: center;
  margin-top: 14px;
}

.factors {
  position: absolute;
  left: 770px; top: 150px; width: 220px;
  display: flex; flex-direction: column; gap: 12px;
}
.factor {
  background: #fff;
  border-radius: 14px;
  padding: 14px 16px;
  box-shadow: 0 8px 20px rgba(42, 59, 102, 0.14);
  cursor: pointer;
  border: 2px solid transparent;
}
.factor:hover { border-color: var(--amber); transform: translateY(-2px); }
.factor--read { border-color: rgba(76, 175, 125, 0.55); }
.factor--read .factor__name { color: var(--ok-dark); }
.factor__no { font: 500 11px var(--font-mono); color: var(--muted); }
.factor__name { font: 400 18px var(--font-title); color: var(--ink); margin-top: 3px; }
.factor__note { font: 500 13.5px/1.45 var(--font-body); margin-top: 2px; color: var(--text); }
.factor__note--bad { color: var(--danger-dark); }
.factor__note--good { color: var(--ok-dark); }

.voices {
  position: absolute;
  left: 1010px; top: 150px; width: 230px;
  display: flex; flex-direction: column; gap: 12px;
}

/* 컬럼 머리말 — 자료 묶음이 무엇인지 이름을 붙인다 */
.col-label {
  font: 500 11.5px var(--font-mono);
  color: var(--muted);
  letter-spacing: 0.1em;
  margin-bottom: -2px;
}
.col-label b { color: var(--ok-dark); }
.voice {
  background: var(--panel);
  border-radius: 14px;
  padding: 14px 16px;
  border: 1.5px solid var(--line);
}
.voice__head { display: flex; gap: 8px; align-items: center; }
.voice__avatar { width: 32px; height: 32px; font-size: 14px; line-height: 32px; }
.voice__name { font: 400 13px var(--font-title); color: var(--ink); }
.voice__line { font: 400 14px/1.5 var(--font-body); margin-top: 8px; }

/* 판단 패널 — 고르는 곳과 내는 곳을 한 덩어리로 묶는다 */
.decision {
  position: absolute;
  left: 340px; top: 618px; width: 900px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 18px;
  padding: 14px 18px;
  box-shadow: 0 12px 30px rgba(42, 59, 102, 0.2);
  display: flex; align-items: center; gap: 16px;
  animation: popIn 0.25s ease;
}
.decision__tag {
  flex: none;
  background: var(--ink); color: var(--volt);
  font: 400 14px var(--font-title);
  border-radius: 999px;
  padding: 7px 14px;
}
.decision__plans { display: flex; gap: 16px; flex: 1; }
.decision__submit {
  flex: none;
  background: var(--volt);
  font: 400 19px var(--font-title);
  border-radius: 14px;
  padding: 15px 24px;
  box-shadow: 0 4px 0 var(--volt-dark);
  display: flex; gap: 8px; align-items: center;
}
.decision__submit img { height: 20px; }
.decision__submit:hover { transform: translateY(-2px); }
.decision__submit:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--volt-dark); }

/* 자료를 다 보기 전 — 추천안 자리에 무엇이 남았는지 알려 준다 */
.decision--locked { background: rgba(255, 255, 255, 0.82); box-shadow: 0 8px 20px rgba(42, 59, 102, 0.12); }
.decision__lock { display: flex; flex-direction: column; gap: 3px; }
.decision__lock b { font: 400 17px var(--font-title); color: var(--ink); }
.decision__lock span { font: 500 13px var(--font-body); color: var(--muted); }

.decision--result { display: block; }

/* 추천안 카드 — 견적서와 같은 문법 */
.plan {
  position: relative;
  flex: 1;
  background: #fff;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 6px 16px rgba(42, 59, 102, 0.14);
  cursor: pointer;
  border: 3px solid transparent;
}
.plan:hover { transform: translateY(-2px); }
.plan--selected { border-color: var(--ink); }
.plan__title { font: 400 18px var(--font-title); color: var(--ink); }
.plan__note { font: 500 12.5px/1.45 var(--font-body); color: var(--muted); margin-top: 3px; }
.postit--plan { top: -14px; right: -8px; font-size: 13px; padding: 5px 10px; }

.learn-chip {
  background: var(--note-soft);
  border: 1.5px solid var(--amber);
  border-radius: 10px;
  padding: 10px 14px;
  display: flex; gap: 9px; align-items: flex-start;
  font: 500 13.5px/1.5 var(--font-body);
  color: var(--text);
}
.learn-chip img { height: 19px; flex: none; margin-top: 2px; }
.learn-chip__label { color: var(--amber-text); }
.yield__reaction { display: flex; gap: 14px; align-items: center; margin-top: 10px; }
.yield__reaction p { flex: 1; margin: 0; font: 400 14.5px/1.55 var(--font-body); }
.yield__next {
  flex: none;
  background: var(--volt);
  font: 400 18px var(--font-title);
  border-radius: 12px; padding: 12px 22px;
  box-shadow: 0 3px 0 var(--volt-dark);
  animation: guidePulse 1.6s ease-in-out infinite;
}

/* ── INCIDENT — 원인 추적 (02 §23) ────────────────────────────────────────── */

.inc__banner {
  position: absolute;
  left: 360px; right: 40px; top: 84px;
  background: var(--danger); color: #fff;
  padding: 13px 0;
  text-align: center;
  font: 400 23px var(--font-title);
  border-radius: 14px;
  box-shadow: 0 6px 18px rgba(232, 84, 63, 0.4);
}
.trace { position: absolute; left: 340px; top: 158px; width: 380px; }
.trace__title { font: 400 16px var(--font-title); color: var(--ink); margin-bottom: 8px; }
.trace__title span { font: 500 11.5px var(--font-mono); color: var(--muted); }
.trace__result {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 6px 16px rgba(42, 59, 102, 0.14);
  border-left: 6px solid var(--danger);
  cursor: pointer;
}
.trace__kicker { font: 500 11px var(--font-mono); color: var(--danger-dark); }
.trace__headline { font: 400 17px var(--font-title); color: var(--ink); }
.trace__headline span { color: var(--danger-dark); }
.trace__why {
  position: absolute;
  right: -16px; top: 6px;
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--volt); color: var(--ink);
  font: 400 18px/52px var(--font-title);
  text-align: center;
  cursor: pointer;
  animation: pulseWhy 1.4s ease-in-out infinite;
}
.trace__why:hover { transform: scale(1.1); }
.trace__arrow { text-align: center; font: 400 18px var(--font-title); color: var(--faint); padding: 2px 0; }
.trace__card {
  position: relative;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 14px;
  padding: 12px 16px;
  box-shadow: 0 6px 16px rgba(42, 59, 102, 0.12);
  animation: popIn 0.3s ease;
  cursor: pointer;
}
.trace__card:hover, .trace__result:hover { border-color: var(--amber); }
.trace__card--root { background: var(--note-soft); border: 2px solid var(--amber); }
.trace__card .trace__kicker { color: var(--muted); }
.trace__card--root .trace__kicker { color: var(--amber-text); }
.trace__text { font: 400 16px var(--font-title); color: var(--ink); }
.trace__badge {
  position: absolute;
  right: -10px; top: -12px;
  color: #fff;
  font: 400 12px var(--font-title);
  border-radius: 999px; padding: 4px 11px;
  transform: rotate(4deg);
  background: #9aa0ae;
}
.trace__badge--seen { background: var(--ok); }

.inc__ask { position: absolute; left: 780px; top: 200px; width: 420px; }
.inc__ask-line {
  position: relative;
  background: #fff;
  border: 2.5px solid var(--danger);
  border-radius: 16px;
  padding: 16px 20px;
  font: 400 18px/1.55 var(--font-title);
  color: var(--text);
  animation: popIn 0.25s ease;
}
.inc__ask-line b { color: var(--danger); }
.inc__ask-hint { font: 500 12px var(--font-mono); color: var(--muted); text-align: center; margin-top: 14px; }

.inc__options { position: absolute; left: 780px; top: 158px; width: 420px; animation: sfade 0.35s ease; }
.inc__options-title { font: 400 16px var(--font-title); color: var(--ink); margin-bottom: 8px; }
.inc__options-title span { font: 500 11.5px var(--font-mono); color: var(--muted); }
.inc__list { display: flex; flex-direction: column; gap: 11px; }
.inc__option {
  position: relative;
  background: #fff;
  border-radius: 14px;
  padding: 15px 18px;
  box-shadow: 0 8px 20px rgba(42, 59, 102, 0.14);
  cursor: pointer;
  border: 3px solid transparent;
}
.inc__option:hover { border-color: var(--amber); transform: translateY(-2px); }
.inc__option--selected { border-color: var(--ink); }
.inc__option-title { font: 400 18px var(--font-title); color: var(--ink); }
.inc__option-note { font: 500 13px var(--font-body); margin-top: 3px; color: var(--muted); }
.inc__option-note--bad { color: var(--danger-dark); }

/* 실수 분기 — 상사가 짚어 주는 한 문장. 전체 화면을 붉게 만들지 않는다(04 §5-3). */
.rwrong {
  position: absolute;
  left: var(--work-center); bottom: 268px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px;
  background: #fff; border: 2px solid var(--danger);
  border-radius: 14px; padding: 8px 16px 8px 8px;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.2);
  animation: popInCenterX 0.3s ease both;
  max-width: 640px;
}
.rwrong img { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; }
.rwrong__text { font: 500 14px var(--font-body); color: var(--text); }


/* 결과 — 다 나눈 뒤(05 이야기 결과). 토스트 띠를 피해 아래쪽에 둔다. */
.rdone {
  position: absolute;
  left: var(--work-center); bottom: 74px; transform: translateX(-50%);
  width: 660px;
  background: rgba(255, 253, 247, 0.97);
  border: 2px solid var(--amber);
  border-radius: 18px;
  padding: 13px 20px 15px;
  box-shadow: 0 14px 34px rgba(30, 20, 60, 0.3);
  animation: popInCenterX 0.4s ease both;
}
.rdone__title { font: 400 21px var(--font-title); color: var(--ink); }
.rdone__body {
  font: 500 14px/1.6 var(--font-body); color: var(--text); margin-top: 4px;
  white-space: pre-line;
}
/* ⚠ `.bubble` 은 기본이 `position: absolute` 다. 여기서 자리를 잡아 주지 않으면
   말풍선이 패널 왼쪽 위로 튀어나가 본문과 「파일에 …이 생겼어요」 줄을 덮는다
   (DAY 02 결과 패널이 실제로 그랬다). 흐름 안에 세우고 꼬리는 쓰지 않는다. */
.rdone__volti { display: flex; align-items: center; gap: 8px; margin-top: 9px; position: relative; }
.rdone__volti .bubble { position: static; font-size: 15px; padding: 9px 14px; }
/* `.sprite` 도 기본이 absolute 다 — 흐름에서 빠지면 말풍선이 얼굴 위로 올라앉는다. */
.rdone__face { height: 52px; flex: none; position: static; }
.rdone__gain {
  margin-top: 8px;
  background: #f3f0ff; border-left: 3px solid #b9a8e0;
  border-radius: 8px; padding: 6px 11px;
  font: 500 13px var(--font-body); color: var(--text);
}
.rdone__next {
  margin-top: 11px; text-align: center;
  font: 400 18px var(--font-title); padding: 10px;
}

.worknote {
  position: absolute;
  right: 44px; top: 120px; width: 300px;
  background: var(--note);
  border-radius: 6px 6px 16px 16px;
  padding: 20px 22px;
  box-shadow: 0 14px 36px rgba(30, 20, 60, 0.35);
  transform: rotate(1.2deg);
}
.worknote__title {
  font: 400 18px var(--font-title); color: var(--ink);
  display: flex; gap: 8px; align-items: center;
}
.worknote__title img { height: 19px; }
.worknote__list {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 12px;
  font: 400 13.5px/1.5 var(--font-body);
  color: var(--text);
}
.worknote__list div { display: flex; gap: 8px; }
.worknote__new {
  background: rgba(255, 211, 56, 0.4);
  border-radius: 8px;
  padding: 6px 8px;
  margin: -4px -8px;
}
.worknote__new span { color: var(--amber-text); font-weight: 700; }
.worknote__foot { font: 500 11px var(--font-mono); color: var(--faint); margin-top: 12px; }

/* ⚠ 요약이 2열(left 250 · width 780)로 넓어졌다. 왼쪽에 두면 「오늘 한 일」을 덮는다. */
.dayend__mentor { position: absolute; right: 24px; bottom: 96px; width: 216px; text-align: center; }
.dayend__mentor .bubble {
  position: relative;
  border-radius: 16px; padding: 13px 17px;
  font: 400 16px/1.5 var(--font-title);
  box-shadow: none;
}
.dayend__mentor .bubble { font-size: 14px; padding: 10px 13px; }
.dayend__mentor img {
  height: 168px; margin-top: 10px;
  filter: drop-shadow(0 10px 18px rgba(30, 20, 60, 0.4));
}
.dayend__carry {
  position: absolute;
  left: 24px; bottom: 96px; width: 210px;
  background: #fdecea;
  border: 1.5px solid var(--danger);
  border-radius: 12px;
  padding: 12px 18px;
  font: 500 13px var(--font-body);
  color: var(--danger-dark);
}

/* ── DAY 03 · 멈춘 출하 라인 → 패키징·검사 연결 ────────────────────────────────
   02 §34 D3 시각 앵커 = 제조된 웨이퍼 → **멈춘 출하 라인** → 패키징·검사.
   05 DAY 3 이야기 결과 = 출하 라인이 다시 움직이고 상자가 고객 방향으로 간다.

   두 화면(13:00 출하 데스크 · 15:00 패키징팀)이 **같은 라인 문법**을 쓴다.
   같은 컨베이어가 오후에 다시 움직이는 것이 오늘의 결론이라 모양이 같아야 한다 —
   출하 칸만 따로 그리면 "아까 그 자리"라는 게 안 읽힌다.
   업무 화면의 중심은 `--work-center` 다 — 프레임 중앙(50%)이 아니다(좌측 레일 때문). */
.shipline, .packline {
  position: absolute;
  /* 화면 제목(`.work-title` top 80 · 높이 ~57)이 137 에서 끝난다 — 그 아래에 세운다.
     DAY 02 의 역할 보드(138)와 같은 자리다. */
  left: var(--work-center); top: 140px; transform: translateX(-50%);
  width: 880px;
}
.shipline__head { display: flex; align-items: baseline; gap: 10px; }
.shipline__title { font: 400 20px var(--font-title); color: var(--ink); flex: 1; }
.shipline__count { font: 400 16px var(--font-title); color: var(--amber-text); }
.shipline__row { display: flex; align-items: stretch; gap: 6px; margin-top: 10px; }
.sarrow { align-self: center; flex: none; font-size: 20px; color: var(--faint); }

/* 라인의 칸 — 이어진 칸은 실선, 비어 있는 칸은 점선(복도의 잠긴 줄과 같은 문법). */
.scell, .pcell, .pslot {
  flex: 1; min-height: 118px;
  border: 2px dashed #cfc7b4; border-radius: 14px;
  background: rgba(255, 253, 247, 0.92);
  padding: 12px 8px; text-align: center;
}
.scell--on, .pcell--on { border-style: solid; border-color: #a8bde0; background: #fff; }
.scell__icon, .pcell__icon { font-size: 26px; line-height: 1.1; }
.scell__label, .pcell__label { font: 400 16px var(--font-title); color: var(--ink); margin-top: 2px; }
.scell__who, .pcell__who { font: 500 11px var(--font-mono); color: var(--muted); margin-top: 3px; }
/* 드래그 중 **받을 수 있는 칸만** 밝아진다(drag.js 의 `dz--open`). */
.scell.dz--open, .pcell.dz--open, .pslot.dz--open {
  border-color: var(--volt-dark); background: #fffbe8;
}
/* 출하 시도 전에도 도착지를 읽을 수 있어야 한다. 드래그를 시작한 뒤에만 밝아지면
   사용자는 무엇을 집어 어디에 놓을지 이미 알고 있어야 하는 역전이 생긴다. */
.scell--target {
  border-color: var(--amber);
  background: linear-gradient(180deg, #fffdf7, #fff7d7);
  box-shadow: inset 0 0 0 2px rgba(255, 211, 56, 0.2);
}
.scell--target .scell__who { color: var(--amber-text); font-weight: 700; }
.scell__dropcue {
  display: inline-block;
  margin-top: 7px;
  padding: 3px 9px;
  border-radius: 999px;
  background: var(--volt);
  color: var(--ink);
  font: 500 10.5px var(--font-mono);
  animation: targetBreathe 1.8s ease-in-out infinite;
}
@keyframes targetBreathe {
  0%, 100% { transform: translateY(0); box-shadow: 0 0 0 0 rgba(255, 211, 56, .4); }
  50% { transform: translateY(2px); box-shadow: 0 0 0 5px rgba(255, 211, 56, 0); }
}
/* 올려 봤더니 라인이 멈췄다 — 붉은 것은 이 한 칸뿐이다(전체 화면 금지 · 04 §5-3). */
.scell--stop { border-style: solid; border-color: var(--danger); background: #fff4f1; }
.scell__stop {
  margin-top: 6px;
  font: 500 12px var(--font-mono); color: var(--danger-dark);
  animation: popIn 0.3s ease both;
}

/* 드래그 소스 — 제조된 웨이퍼 상자(13:00) / 완성된 패키지 상자(15:00).
   같은 자리에 서야 "아까 그 상자가 이렇게 됐다"가 읽힌다. */
.waferbox {
  position: absolute;
  left: var(--work-center); bottom: 96px; transform: translateX(-50%);
  text-align: center;
}
.waferbox__label { font: 500 12px var(--font-mono); color: var(--muted); letter-spacing: 0.08em; }
.waferbox__box {
  width: 260px; margin-top: 6px;
  background: #fff; border: 2px solid var(--line); border-radius: 14px;
  padding: 11px 14px 12px;
  box-shadow: 0 3px 0 #e4dece;
  cursor: grab;
}
.waferbox__box.drag--armed {
  border-color: var(--volt-dark);
  box-shadow: 0 0 0 5px rgba(255, 211, 56, .28), 0 3px 0 #e4dece;
}
.waferbox__box--ok { border-color: var(--ok); box-shadow: 0 3px 0 #bfe3cd; }
.waferbox__icon { font-size: 28px; line-height: 1.1; }
.waferbox__title { font: 400 17px var(--font-title); color: var(--ink); }
.waferbox__sub { font: 500 11.5px var(--font-body); color: var(--muted); margin-top: 2px; }

/* 출하 점검표 — **막힌 뒤에** 열린다. 눌러야 상태가 드러난다(03 §4 지시 → 자료 → 판단). */
.schecks {
  position: absolute;
  left: var(--work-center); top: 364px; transform: translateX(-50%);
  width: 880px;
  display: flex; gap: 10px;
}
.schk {
  flex: 1; text-align: center; cursor: pointer;
  background: rgba(255, 253, 247, 0.94);
  border: 2px solid var(--line); border-radius: 14px;
  padding: 9px 10px 11px;
}
.schk__icon { font-size: 22px; line-height: 1.1; }
.schk__name { font: 400 16px var(--font-title); color: var(--ink); }
.schk__state { font: 500 12px var(--font-body); color: var(--muted); margin-top: 3px; }
.schk--seen.schk--ok { border-color: var(--ok); background: #f2faf5; }
.schk--seen.schk--ok .schk__state { color: var(--ok-dark); }
.schk--seen.schk--miss { border-color: var(--danger); background: #fff4f1; }
.schk--seen.schk--miss .schk__state { color: var(--danger-dark); }

/* 결과 패널은 `.rdone` 을 그대로 쓴다 — 상자 자리를 대신 채운다. */
.shipdone { width: 640px; }
/* 상사의 한 문장은 라인 바로 아래에 — 라인을 가리지 않는다. */
.shipwrong, .packwrong { top: 302px; bottom: auto; }

/* ── 패키징 업체 더미 (드래그 소스) ────────────────────────────────────────── */
.vbox {
  position: absolute;
  left: var(--work-center); bottom: 76px; transform: translateX(-50%);
  width: 880px;
}
.vbox__cards { display: flex; gap: 10px; margin-top: 6px; }
.vcard {
  flex: 1; cursor: grab;
  background: #fff; border: 2px solid var(--line); border-radius: 12px;
  padding: 9px 11px 8px;
  box-shadow: 0 3px 0 #e4dece;
}
/* 세 요소를 다 확인해야 라인에 올릴 수 있다 — 열린 것이 눈에 보이게. */
.vcard--ready { border-color: var(--amber); box-shadow: 0 3px 0 var(--amber); }
.vcard__head { display: flex; align-items: center; gap: 6px; }
.vcard__icon { font-size: 16px; }
.vcard__name { font: 400 16px var(--font-title); color: var(--ink); }
.vcard__kind { font: 500 10.5px var(--font-mono); color: var(--muted); margin: 1px 0 5px; }
.vrow {
  display: flex; justify-content: space-between; align-items: baseline; gap: 8px;
  padding: 5px 4px; border-top: 1px solid var(--line);
  cursor: pointer; border-radius: 6px;
}
.vrow--read { background: #fdfaf0; }
.vrow--read .vrow__label { color: var(--ok-dark); }
.vrow--wide { padding: 8px 4px; }
.vrow__label { font: 500 11.5px var(--font-body); color: var(--muted); }
.vrow__value { font: 400 14px var(--font-title); color: var(--ink); }
.vrow__value--good { color: var(--ok-dark); }

/* 패키징·검사 칸 — 오늘 이어 붙이는 그 칸. 비어 있을 때 노랗게 기다린다. */
.pslot { border-color: var(--amber); background: rgba(255, 251, 232, 0.92); }
.pslot--filled { border-style: solid; border-color: var(--ok); background: #fff; }
.pslot__need { font: 500 11px var(--font-mono); color: var(--muted); margin-top: 3px; }
.pslot--filled .pslot__need { font: 400 15px var(--font-title); color: var(--ink); }
.pslot__spec {
  font: 500 11px var(--font-mono); color: var(--ok-dark); margin-top: 2px;
  animation: popIn 0.3s ease both;
}
/* 상자가 실제로 나간 순간 — 13:00 에 멈췄던 그 칸이 초록으로 바뀐다. */
.pout--go { border-style: solid; border-color: var(--ok); background: #f2faf5; }
.pout--go .pcell__who { color: var(--ok-dark); }

/* ── DAY 03 · 파이프라인 퍼즐 추가분 (06 §6) ──────────────────────────────────
   오전 타임라인 · 세 HardConstraint 검증 줄 · 카드 더미 탭 · 계획 반려 화면. */

/* 오전 — 고른 파운드리의 제조 시간이 3주 자에서 얼마를 먹는가(06 Phase A #4).
   「남은 시간」이 무엇에 쓰이는지는 아직 말하지 않는다. 13:00 에 알게 된다. */
.ftime {
  position: absolute;
  left: var(--work-center); bottom: 148px; transform: translateX(-50%);
  width: 560px;
  background: rgba(255, 253, 247, 0.94);
  border: 2px solid var(--line); border-radius: 14px;
  padding: 10px 14px 12px;
  animation: popInCenterX 0.25s ease both;
}
.ftime__head {
  display: flex; justify-content: space-between; align-items: baseline;
  font: 500 12px var(--font-mono); color: var(--muted);
}
.ftime__left { font: 400 16px var(--font-title); color: var(--ok-dark); }
.ftime__left--warn { color: var(--danger-dark); }
.ftime__track {
  margin-top: 7px; height: 26px; border-radius: 8px;
  background: #ece5d5; overflow: hidden;
}
.ftime__track i {
  display: flex; align-items: center; justify-content: center;
  height: 100%; background: var(--team-prod);
  font: 500 12px var(--font-body); color: #fff; font-style: normal;
  transition: width 0.3s ease;
}

/* 오후 — 세 HardConstraint. 검증을 누르기 전에는 값만 보이고 판정은 붙지 않는다. */
.plancheck {
  position: absolute;
  left: var(--work-center); top: 312px; transform: translateX(-50%);
  width: 900px;
  display: flex; gap: 12px; align-items: stretch;
}
.plancheck__rows { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.crow {
  display: grid; grid-template-columns: 92px 1fr 116px 22px;
  align-items: baseline; gap: 8px;
  background: rgba(255, 253, 247, 0.94);
  border: 2px solid var(--line); border-radius: 10px;
  padding: 7px 12px;
}
.crow--ok { border-color: var(--ok); background: #f2faf5; }
.crow--bad { border-color: var(--danger); background: #fff4f1; }
.crow__label { font: 400 15px var(--font-title); color: var(--ink); }
.crow__need { font: 500 11.5px var(--font-mono); color: var(--muted); }
.crow__now { font: 400 16px var(--font-title); color: var(--ink); text-align: right; }
.crow__mark { font: 400 18px var(--font-title); color: var(--faint); text-align: center; }
.crow--ok .crow__mark { color: var(--ok-dark); }
.crow--bad .crow__mark { color: var(--danger-dark); }
.crow--bad .crow__now { color: var(--danger-dark); }
.plancheck__go {
  width: 210px; display: flex; align-items: center; justify-content: center;
  text-align: center; font: 400 18px var(--font-title);
  background: var(--volt); box-shadow: 0 5px 0 var(--volt-dark);
}

/* 카드 더미 탭 — 어느 단계를 다시 고르는지(06 Phase D 교정). */
.vbox__tabs { display: flex; gap: 8px; margin-bottom: 5px; }
.vtab {
  font: 500 12px var(--font-mono); color: var(--muted);
  background: rgba(255, 253, 247, 0.9);
  border: 2px solid var(--line); border-radius: 999px;
  padding: 4px 12px; cursor: pointer;
}
.vtab--on { border-color: var(--amber); color: var(--amber-text); background: var(--note-soft); }

/* 계획 반려 — 어긋난 조건 줄만 형광펜이 지나간다. */
.scold__why {
  margin-top: 8px;
  font: 500 13.5px/1.7 var(--font-body); color: var(--text);
}
/* 밝은 앰버는 스크림 위에서 묻힌다 — 짚는 말은 붉게 굵게. */
.scold__why .hl { color: var(--danger-dark); }
.scold__plan {
  margin: 8px 0 10px;
  font: 500 13px var(--font-mono); color: var(--ink);
  background: var(--note-soft); border-radius: 8px; padding: 7px 10px;
}

/* ── HUD / 스텝퍼 / 가이드 / 토스트 ───────────────────────────────────────── */

/* 상단 띠 하나 — DAY · 위치 · 회사 상태 · 사원증 · 노트가 같은 줄에 선다.
   지표를 따로 띄우면 화면 제목(.screen-title)과 같은 자리를 다툰다. */
/* ── 상단 바 (목업 참고 · 사용자 지시) ──────────────────────────────────────
   예전에는 크림색 알약 여러 개가 배경 사진 위에 떠 있어서 정보 띠와 방이 섞였다.
   지금은 **어두운 띠 하나**가 화면 폭을 가로지른다:
     [DAY 배지]  [설계팀 › 무슨 일]   [● 상황 ○ 확인 ○ 판단 ○ 결과]   [지표 4]  [사원증·노트·보드]
   ⚠ 높이 56px 고정 — `.screen-title`(top 80)과 업무 화면 첫 블록(top 138)이 이걸 전제한다.
   ⚠ 4지표는 **떼지 않는다**(03 §3 을 알고서 어긴 사용자 결정). 다크에 맞춰 좁혔을 뿐이다. */
/* ── 상단 띠 ────────────────────────────────────────────────────────────────
   목업(`export/volti-day1-pc.html`)의 두 줄 구조를 그대로 옮겼다:
   위 줄은 정보(DAY · 어디 · 지표 · 수첩), **아래 줄은 화면 폭을 가로지르는
   진행 막대**다. 예전에는 진행 표시가 위 줄 안의 알약이라 지표와 자리를 다퉜다.

   ⚠ **높이 66 은 고정이다** — 예전 56 에서 목업 실측값으로 올렸다(진행 막대가
   자기 줄을 갖게 되면서). `.screen-title`(top 80)과 업무 화면 첫 블록(top 138)이
   여전히 이 아래에 오므로 겹치지 않는다. `test/metrics.mjs` 가 66 을 검사한다. */
.hud {
  position: absolute;
  top: 0; left: 0; right: 0; height: 66px;
  display: block;
  padding: var(--hud-top) var(--hud-inline) 0;
  background: #1b2742;
  box-shadow: 0 6px 22px rgba(10, 14, 28, 0.28);
  z-index: 40;
}
/* 위 줄 — 한 줄에 전부 세운다. */
/* 높이 42 — 지표 칩(막대 줄까지)이 들어가는 최소값이다. `.hud` 66 = 8 + 42 + 6 + 4 + 6. */
.hud__row { display: flex; align-items: stretch; gap: 11px; height: var(--hud-row-height); }
.hud__group { display: flex; align-items: center; gap: 8px; flex: none; }

/* ── 지표 넷을 담는 얇은 틀 (목업 PC HUD) ────────────────────────────────────
   ⚠ 예전에는 여기에 **테두리 있는 판 + 「회사 상태」 라벨**을 두어 지표를
     「읽는 계기판」으로, 오른쪽 셋을 「누르는 버튼」으로 갈라 놓았다.
     목업이 **지표 칩을 누를 수 있게**(→ Tier A 원장) 만들면서 그 구분이 사라졌다.
     지금은 넷도 칩이고 이 틀은 「넷이 한 묶음」만 말한다. 라벨을 다시 붙이지 말 것.
   ⚠ `flex: 1` 을 주지 말 것 — 틀이 남는 폭을 다 먹는다(한 번 겪었다). */
.hud__metrics {
  flex: none;
  display: flex; align-items: stretch; gap: 6px;
  margin-left: auto;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 13px;
  padding: 4px 7px;
}
/* 읽는 쪽과 누르는 쪽 사이의 세로 선 — 목업의 `1px × 34`. */
.hud__div {
  flex: none; align-self: center;
  width: 1px; height: 34px;
  background: rgba(255, 255, 255, 0.16);
  margin: 0 3px;
}
.hud__day {
  background: var(--volt); color: var(--ink);
  font: 400 15px var(--font-title);
  border-radius: 8px; padding: 4px 10px;
  box-shadow: none;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  line-height: 1.05;
  flex: none;
}
/* 브레드크럼 — 「어디」와 「무슨 일」 */
.hud__crumb { display: flex; align-items: center; gap: 13px; white-space: nowrap; }
.hud__place { font: 400 16px var(--font-title); color: #fff; }
.hud__sep { font: 400 14px var(--font-title); color: #6b7690; }
.hud__task { font: 400 16px var(--font-title); color: #c7d2e8; }

/* 단계 표시 — 「지금 어디쯤인가」. 미래 단계의 답을 이름에 쓰지 않는다(UX 계약 1번).
   ⚠ **이름을 화면에서 뺐다**(목업). 예전엔 `상황·확인·판단·결과` 네 글자가 위 줄에
   알약으로 떠서 지표·브레드크럼과 같은 자리를 다퉜다. 지금은 아래 줄 전폭 막대이고,
   이름은 `title`/`aria-label` 로 남는다 — 지난 칸은 초록, 지금 칸은 노랑, 아직인
   칸은 어둡다. **네 칸 수는 `d.steps` 가 정한다**(DAY 가 STEPS 를 내보내면 그것).
   지운 게 아니라 옮긴 것이므로 `stepperStage` 는 그대로 살아 있다. */
.hud__steps {
  display: flex; align-items: center; gap: 5px;
  margin: 6px -18px 0;
  padding: 0 18px;
}
.hstep {
  flex: 1;
  height: 4px; border-radius: 2px;
  background: #3a4665;
  transition: background 0.3s ease;
}
.hstep--on { background: #7bd4a8; }
.hstep--now { background: var(--volt); }
/* 내 물건 묶음 — **지표와 세로 선으로 갈린다**(사용자 지시). 지표는 판 안의 눈금이고
   이쪽은 눌리는 버튼이라, 같은 줄에 있어도 다른 종류로 읽혀야 한다. */
/* ⚠ 여기에 `border-left` 를 주지 말 것 — 지표 판이 이미 자기 테두리를 갖고 있어서
   3px 간격의 **겹선**이 된다(한 번 겪었다). 간격만으로 충분히 갈린다. */
.hud__tools {
  display: flex; align-items: stretch; gap: var(--hud-tool-gap); flex: none;
  margin-left: 12px;
}
/* 눌리는 것 — 목업은 **알약**(radius 999)에 1.5px 테두리다. 사원증만 노란 테두리라
   「내 것」이 한눈에 갈린다. 아래 굽으로 눌리는 감을 남긴다. */
.hud__pass, .hud__note {
  align-self: center;
  background: rgba(255, 255, 255, 0.1);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
}
.hud__pass { border-color: rgba(255, 211, 56, 0.5); }
/* 열려 있는 동안은 노란 알약이 된다(목업 `passBg/passFg`). */
.hud__pass--open, .hud__note--open { background: var(--volt); color: var(--ink); }
.hud__pass--open .hud__pass-count { background: var(--ink); color: var(--volt); }
.hud__pass:active, .hud__note:active {
  transform: translateY(1px); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.28);
}
.hud__pass {
  color: #e8e4d8;
  font: 400 14px var(--font-title);
  padding: 0 14px; height: var(--hud-tool-height);
  display: flex; gap: 7px; align-items: center;
  cursor: pointer;
  white-space: nowrap;
}
.hud__pass img { height: 15px; }
.hud__pass:hover { background: rgba(255, 255, 255, 0.2); }
.hud__pass--new { animation: passPop 0.55s ease; }
.hud__pass-badge {
  background: var(--danger); color: #fff;
  font: 700 9.5px var(--font-body);
  letter-spacing: 0.08em;
  border-radius: 999px;
  padding: 2px 6px;
}
.hud__pass-count {
  min-width: 20px; height: 20px; padding: 0 5px;
  background: var(--volt); color: var(--ink);
  font: 400 12px var(--font-title);
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.hud__note {
  color: #e8e4d8;
  font: 400 14px var(--font-title);
  padding: 0 14px; height: var(--hud-tool-height);
  display: flex; gap: 7px; align-items: center;
  cursor: pointer;
}
.hud__note:hover { background: rgba(255, 255, 255, 0.2); }
.hud__note img { height: 15px; }

.guide {
  position: absolute;
  left: 50%; bottom: 12px; transform: translateX(-50%);
  z-index: 45;
  background: var(--ink); color: #fff;
  border-radius: 999px;
  padding: 9px 22px 9px 12px;
  display: flex; gap: 10px; align-items: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  white-space: nowrap;
  pointer-events: none;
}
/* 힌트 — 「사수에게 물어보기」 (03 §10).
   가이드 바는 화면 아래 가운데를 쓰므로 힌트는 그 **왼쪽**에 세운다.
   가이드 바와 달리 눌려야 하므로 pointer-events 를 살려 둔다. */
.hintbox {
  position: absolute;
  left: 30px; bottom: 12px;
  z-index: 46;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  max-width: 300px;
}
.hintbox__ask {
  display: flex; align-items: center; gap: 7px;
  background: #fffdf7; color: var(--ink);
  border: 2px solid var(--amber);
  border-radius: 999px;
  padding: 8px 16px 8px 12px;
  font: 400 15px var(--font-title);
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22);
}
.hintbox__ask img { height: 20px; }
/* 03 §27 — 20초 넘게 정체하면 버튼이 스스로 눈에 띈다. 열어 주지는 않는다. */
.hintbox__ask--ready { animation: hintReady 1.6s ease-in-out infinite; }
@keyframes hintReady {
  0%, 100% { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22); transform: none; }
  50% { box-shadow: 0 6px 22px rgba(201, 147, 10, 0.55); transform: translateY(-2px); }
}
.hintbox__panel {
  background: rgba(255, 253, 247, 0.98);
  border: 2px solid var(--line);
  border-radius: 16px;
  padding: 10px 13px 9px;
  box-shadow: 0 14px 34px rgba(30, 20, 60, 0.32);
  display: flex; flex-direction: column; gap: 6px;
  width: 300px;
}
.hintbox__head { display: flex; align-items: center; }
.hintbox__who { font: 400 14px var(--font-title); color: var(--ok-dark); flex: 1; }
.hintbox__close {
  font: 500 13px var(--font-mono); color: var(--faint);
  cursor: pointer; padding: 0 4px;
}
.hintcard {
  background: var(--note-soft);
  border-left: 3px solid var(--amber);
  border-radius: 8px;
  padding: 6px 10px;
}
.hintcard__tag {
  font: 500 10px var(--font-mono); letter-spacing: 0.08em;
  color: var(--amber-text); margin-bottom: 2px;
  display: flex; align-items: center; gap: 6px;
}
.hintcard__step { color: var(--faint); margin-left: auto; }
.hintcard__text { font: 500 13.5px/1.5 var(--font-body); color: var(--text); }
.hintbox__fine { font: 500 10.5px var(--font-mono); color: var(--faint); }
@media (prefers-reduced-motion: reduce) { .hintbox__ask--ready { animation: none; } }

.guide__face {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--volt);
  flex: none;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.guide__face img { height: 30px; margin-top: 6px; }
.guide__step { font: 400 13px var(--font-title); color: var(--volt); flex: none; }
.guide__text { font: 500 14.5px var(--font-body); }

.toast {
  position: absolute;
  left: 50%; bottom: 130px; transform: translateX(-50%);
  background: var(--ink); color: #fff;
  font: 400 16px var(--font-title);
  border-radius: 999px; padding: 11px 26px;
  z-index: 90;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  animation: popInCenterX 0.2s ease;
  white-space: nowrap;
}

/* ── 모달 공통 ────────────────────────────────────────────────────────────── */

/* ── 창 3계층 (목업 「볼티 UI 창 규칙」) ─────────────────────────────────────
   창은 셋뿐이고, 스크림 값이 **누가 열었는가**를 말한다.

     TIER A 열람 — 내가 열었다   사원증 · 업무 노트 · 회사 상태
                   스크림 32% · 게임이 계속 보인다 · 바깥 탭으로 닫힘 · 확인 버튼 없음
                   **스크롤이 허용되는 유일한 계층**
     TIER B 보상 — 게임이 열었다  도장 획득 · 권한 해금 · 역할 승급
                   스크림 84% · 바깥 탭으로 안 닫힘 · 닫기 X 없음 · 확인 버튼 1개 필수
                   **스크롤 금지** — 넘치면 화면을 나눈다
     TIER C 판정 — 내 선택의 결과 실수 패널 · 결과 요약 · 셀프 체크
                   스크림 55% · 작업대는 어두워지고 **HUD 는 밝게 남는다**
                   액션 1~2개 · 실패 표현 금지 · 내가 만든 것은 지우지 않는다

   ⚠ 스크림 값은 **가로·세로 동일**하다. 임의로 조절하지 말 것. */
.overlay {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(16, 22, 38, 0.55);   /* TIER C 기본 */
  z-index: 60;
}
/* TIER A — 열람. 게임이 계속 보인다. */
.overlay--panel, .overlay--soft { background: rgba(16, 22, 38, 0.32); }
/* TIER C — 판정. 작업대는 어두워지고 HUD 는 밝게 남는다. */
.overlay--mid, .overlay--judge { background: rgba(16, 22, 38, 0.55); }
/* TIER B — 보상. 「지금은 이것만」. */
.overlay--deep, .overlay--reward { background: rgba(16, 22, 38, 0.84); }
/* Tier A·C 는 **HUD 아래에서 시작한다** — 회사 상태와 내 물건은 계속 읽혀야 한다.
   Tier B(보상)만 HUD 까지 덮는다. */
.overlay--panel, .overlay--judge, .overlay--mid, .overlay--soft { top: 66px; }
.overlay--dismiss { cursor: pointer; }
/* ⚠ Tier B·C 는 스크롤하지 않는다 — 넘치면 화면을 나눈다. */
.overlay--reward .modal, .overlay--judge .modal { overflow: hidden; }

/* 겹침 순서: 결과 < 호출 < 미션 < 되묻기 < 대사 < 열람 패널 < 보상 < 토스트 */
.overlay--call { z-index: 70; }
/* 업무 지시(목업 03) — 카드는 위(top 120)에 서고, 배경은 옅은 막 한 장(`rgba(16,22,38,.2)`)이다. */
.overlay--mission {
  z-index: 72; background: rgba(16, 22, 38, 0.2);
  align-items: flex-start; padding-top: 54px;
}
.overlay--ask { z-index: 74; }
.overlay--panel { z-index: 80; }
/* ⚠ 보상(Tier B)은 **열람 패널보다 위**다 — 「지금은 이것만」이라 노트·사원증이
   열려 있어도 그 위를 덮어야 한다(겹침 순서: … < 열람 패널 < 보상 < 토스트). */
.overlay--reward { z-index: 84; }
/* 대사가 「이게 사원증이야」 하며 열어 준 상태.
   **대사의 어두운 막(z 75) 위**로 올린다 — 아래에 두면 실물이 회색으로 죽는다.
   스크림도 클릭도 갖지 않으므로 말(대사 바)은 그대로 읽힌다.
   ⚠ 여기에 스크림을 주지 말 것 — 배경을 죽이는 일은 `.frame--dim` 이 맡는다.
      스크림을 주면 z 75 인 대사 바까지 같이 덮인다(겪었다). */
/* ⚠ `top: 0` 을 되돌려 놓는다 — 아래 `padding-top: 96px` 이 프레임 기준으로 잰
   실측값이라, Tier A 의 `top: 66px` 이 남으면 사원증이 66px 아래로 밀린다. */
.overlay--spot { z-index: 76; top: 0; background: transparent; pointer-events: none; }
.overlay--spot .modal { box-shadow: 0 0 0 3px var(--volt), var(--shadow-modal); }
/* ⚠ 위로는 HUD(…89)가, 아래로는 대사 바(662…)가 막으므로 쓸 수 있는 세로는 **96..640** 뿐이다.
   예전엔 사원증이 96..659 여서 대사 바와 **3px** 간격이었다(사용자 지적).
   ⚠ **작게 만드는 것으로 때우지 말 것.** 그건 글자만 작아지는 임시방편이다. 진짜 원인은
      해금 목록 6줄(340px)이 그 순간의 이야기가 아니라는 것이라, 소개 중에는 그 목록을
      접는다(`.overlay--spot .pass__perms { display: none }`). 그래서 배율은 0.9 그대로다.
   ⚠ 값을 바꾸면 `test/day01.mjs` 의 「사원증과 대사 바 간격」 assertion 을 같이 볼 것. */
.overlay--spot { align-items: flex-start; padding-top: 96px; }
.overlay--spot .modal { transform: scale(0.9); transform-origin: top center; }
.modal {
  background: var(--cream);
  border-radius: 24px;
  box-shadow: var(--shadow-modal);
  animation: popIn 0.3s ease;
  cursor: default;
}

/* PRAISE */
.praise { width: 520px; padding: 40px 48px; text-align: center; }
.praise img.hero { height: 180px; }
.praise__title { font: 400 26px var(--font-title); color: var(--ink); margin-top: 14px; }
.praise__body { font: 400 15px/1.7 var(--font-body); color: #6b6558; margin-top: 10px; }
.praise__learn {
  background: var(--note-soft);
  border: 1.5px solid var(--amber);
  border-radius: 12px;
  padding: 14px 18px;
  margin-top: 16px;
  text-align: left;
  display: flex; gap: 10px; align-items: flex-start;
}
.praise__learn img { height: 22px; flex: none; margin-top: 2px; }
.praise__learn-title { font: 400 14px var(--font-title); color: var(--amber-text); }
.praise__learn-body { font: 500 14px/1.55 var(--font-body); color: var(--text); margin-top: 3px; }
.praise__next {
  display: inline-block;
  background: var(--volt);
  font: 400 20px var(--font-title);
  padding: 14px 36px;
  margin-top: 22px;
}

/* 결과 카드 (03 §49) */
.result { width: 540px; padding: 40px 48px; text-align: center; }
.result img.hero { height: 120px; }
.result__title { font: 400 25px var(--font-title); color: var(--ink); margin-top: 8px; }
.result__block { text-align: left; margin-top: 14px; }
.result__changes { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
.result__change {
  background: var(--panel);
  border-radius: 10px;
  padding: 8px 12px;
  font: 500 13.5px var(--font-body);
  color: var(--text);
  display: flex; justify-content: space-between; gap: 10px;
}
.result__whys {
  display: flex; flex-direction: column; gap: 5px; margin-top: 6px;
  font: 500 13px/1.5 var(--font-body);
  color: #6b6558;
}
.result__whys div { display: flex; gap: 7px; }
.result__whys span:first-child { color: var(--amber-text); }
.result__learn {
  background: var(--note-soft);
  border: 1.5px solid var(--amber);
  border-radius: 12px;
  padding: 12px 16px;
  margin-top: 14px;
  text-align: left;
  display: flex; gap: 10px; align-items: flex-start;
  font: 500 14px/1.55 var(--font-body);
  color: var(--text);
}
.result__learn img { height: 20px; flex: none; margin-top: 2px; }
.result__learn b { color: var(--amber-text); }
.result__foot { font: 500 12.5px var(--font-mono); color: var(--muted); margin-top: 10px; }
.result__next {
  display: inline-block;
  background: var(--volt);
  font: 400 20px var(--font-title);
  padding: 14px 34px;
  margin-top: 20px;
}

/* 미션 카드 (B-GOAL-01) */
/* ── 업무 지시 카드 (목업 03 업무 지시) ──────────────────────────────────────
   예전에는 남색 머리띠 + 제목 + 목표 한 줄이었다. 지금은 목업의 흰 카드고, 순서가
   그대로 읽는 순서다: 칩·Context → 행동 제목 → 판단 요소 → 메모 → 시작. */
.mission { width: 640px; padding: 28px 30px 26px; border-radius: 22px; }
.mission__kicker { display: flex; align-items: center; gap: 9px; }
.mission__chip {
  background: var(--note-soft); border: 1.5px solid var(--amber);
  border-radius: 8px; padding: 4px 11px;
  font: 400 14px var(--font-title); color: #a9861a;
  flex: none;
}
.mission__where {
  min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 600 12px var(--font-body); color: var(--muted);
}
.mission__title {
  font: 400 31px/1.35 var(--font-title); color: var(--ink);
  margin-top: 14px;
  white-space: pre-line;
}
/* 조건 상자 줄 — `MISSIONS[].factors`. 판단 근거를 **미리** 알려 주는 자리다.
   「꼭 볼 것」 라벨·접두는 뗐다(사용자 지시 · 2026-08-28) — 상자의 아이콘·이름·조건이 스스로 말한다. */
.mission__watch { margin-top: 22px; }
.mission__factors { display: flex; gap: 10px; }
/* 상자 하나 = **색 띠 머리(아이콘+제목) → 조건 한 줄**(목업 §설명 상자도 제목/내용 분리).
   조건 줄이 없는 DAY 는 머리 줄만 있는 상자가 된다 — 없는 문장을 지어내지 않는다. */
.mfactor {
  flex: 1; min-width: 0;
  background: var(--paper); border: 1.5px solid var(--line);
  border-radius: 14px; overflow: hidden;
}
.mfactor__head {
  display: flex; align-items: center; gap: 8px;
  background: #f7f4ea; border-bottom: 1px solid var(--line);
  padding: 9px 14px;
}
.mfactor__icon { font-size: 14px; line-height: 1; }
.mfactor__name { font: 400 15px var(--font-title); color: var(--text); }
/* 「꼭 볼 것 · 」 접두는 뗐다(사용자 지시 · 2026-08-28) — 상자 머리는 아이콘 · 이름만 말한다. */
.mfactor__note {
  padding: 13px 14px;
  font: 500 13.5px/1.6 var(--font-body); color: var(--text);
}
/* 사원 코멘트는 수평으로 표시한다. */
.mission__memo {
  margin-top: 18px;
  background: var(--sticky);
  border-radius: 4px 4px 14px 14px;
  padding: 14px 16px;
  font: 500 14px/1.6 var(--font-body); color: #7a6210;
  transform: none;
}
.mission__ack {
  margin-top: 22px;
  height: 58px;
  display: flex; align-items: center; justify-content: center;
  background: var(--volt); border-radius: 15px;
  font: 400 21px var(--font-title); color: var(--ink);
  cursor: pointer;
  animation: guidePulse 2s ease-in-out infinite;
}
.mt-18 { margin-top: 18px; }

/* 노트 잠금 (B-NOTE-01) */
.notelock { width: 500px; padding: 32px 38px; background: var(--note); }
.notelock__head { display: flex; align-items: center; gap: 12px; }
.notelock__head img { height: 26px; }
.notelock__head div { font: 400 24px var(--font-title); color: var(--ink); }
.notelock__lines {
  display: flex; flex-direction: column; gap: 10px;
  margin-top: 10px;
  font: 400 16px/1.6 var(--font-body);
  color: var(--text);
}
.notelock__lines div { display: flex; gap: 9px; }
.notelock__foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 22px;
}
.notelock__term {
  background: var(--ink); color: var(--volt);
  font: 400 16px var(--font-title);
  border-radius: 999px; padding: 9px 18px;
}
.notelock__ok {
  background: var(--volt);
  font: 400 19px var(--font-title);
  padding: 13px 40px;
  animation: guidePulse 1.6s ease-in-out infinite;
}
.fine {
  font: 500 11.5px var(--font-mono);
  color: var(--faint);
  margin-top: 14px;
  text-align: center;
}

/* 도장 (B-PASS-02) — 보상은 사원증 위에서 일어난다 */
.stamp__card {
  border-radius: 16px;
  padding: 14px 16px 12px;
  margin-top: 12px;
  text-align: left;
  box-shadow: 0 12px 28px rgba(90, 75, 50, 0.22);
  animation: passPush 0.42s cubic-bezier(0.2, 1.3, 0.4, 1);
}
.stamp__count {
  margin-left: auto;
  font: 400 15px var(--font-title);
  color: var(--muted);
}
.stamp__count b { font-size: 22px; color: var(--ink); }

.stamp__ok {
  background: var(--volt);
  font: 400 23px var(--font-title);
  border-radius: 16px;
  height: 62px; display: flex; align-items: center; justify-content: center;
  margin-top: 16px;
  cursor: pointer;
  color: var(--ink);
  animation: guidePulse 1.9s ease-in-out infinite;
}

/* ── 역할 사다리 — 신입 인턴에서 사장까지 (02 §33-4) ─────────────────────── */

.ladder { display: flex; align-items: center; gap: 5px; margin-top: 8px; }
.ladder__dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  background: #e2dbc9;
  flex: 1;
  max-width: 22px;
  height: 7px;
  border-radius: 999px;
}
.ladder__dot--done { background: var(--ok); }
.ladder__dot--now {
  background: var(--volt);
  box-shadow: 0 0 0 3px rgba(255, 211, 56, 0.35);
  max-width: 34px;
}
.ladder__now {
  font: 400 13.5px var(--font-title);
  color: var(--amber-text);
  margin-top: 9px;
}
.ladder__next { font: 500 12.5px var(--font-body); color: var(--muted); margin-top: 4px; }
.ladder__next b { color: var(--ink); font: 400 14px var(--font-title); }
.ladder__upgrade { color: var(--amber-text); font-weight: 700; }
.ladder__goal {
  font: 400 12.5px var(--font-title);
  color: var(--faint);
  margin-top: 3px;
}

/* 권한 해금 (B-PASS-03) */
.unlock {
  width: 450px; padding: 30px 34px;
  background: #1b2742;
  border: 2px solid var(--volt);
  border-radius: 20px;
  text-align: center;
}
.unlock__kicker { font: 500 13px var(--font-mono); color: var(--volt); letter-spacing: 0.22em; }
.unlock__title { font: 400 33px var(--font-title); color: #fff; margin-top: 12px; }
.unlock__body { font: 400 15px/1.7 var(--font-body); color: #b9c4de; margin-top: 12px; }
.unlock__body b { color: var(--volt); }
.unlock__mentor {
  background: rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  padding: 14px 18px;
  margin-top: 16px;
  font: 400 16px/1.6 var(--font-title);
  color: #f5ecc9;
}
.unlock__promote {
  background: rgba(255, 211, 56, 0.12);
  border: 1px solid rgba(255, 211, 56, 0.45);
  border-radius: 12px;
  padding: 11px 14px;
  margin-top: 12px;
  font: 400 15px var(--font-title);
  color: #e7dcb8;
}
.unlock__promote b { color: var(--volt); }
.unlock__promote span { display: block; font: 500 12px var(--font-body); color: #9aa8c4; margin-top: 3px; }
.unlock__ok {
  background: var(--volt);
  font: 400 19px var(--font-title);
  padding: 13px;
  margin-top: 18px;
  display: block;
  animation: guidePulse 1.6s ease-in-out infinite;
}

/* ── 업무 노트 열람 — **챕터 단위** (목업 「볼티 UI 창 규칙」 §업무 노트) ─────────
   `DAY 하나 = 챕터 하나`. 왼쪽에 11칸이 다 보이고 오른쪽이 펼친 챕터다.
   ⚠ 자리는 가운데다 — 목업은 우측에 붙이지만 온보딩 대사가 이 패널 **옆**에
      말풍선을 세우도록 좌표를 실측해 맞춰 둔 상태다(`.dialog__line--aside`).
   ⚠ 소개 중(`spot === 'note'`)에는 **챕터 목록을 접고 440px 로 줄인다** —
      사원증의 `.pass__perms` 를 접는 것과 같은 이유다(말풍선 40..400 · 패널 446..834).
      지우는 게 아니라 그 순간에만 접는 것이라, 대사 밖에서 열면 11칸이 다 보인다. */
.notebook {
  position: relative;
  width: 680px; height: 604px;
  padding: 0;
  background: linear-gradient(#fffdf8, #fbf6ea);
  border: 2px solid #e6dfcb;
  border-radius: 6px 20px 20px 6px;
  box-shadow: var(--shadow-modal), inset 18px 0 22px -18px rgba(0, 0, 0, 0.16);
  display: flex; flex-direction: column; overflow: hidden;
  animation-duration: 0.25s;
}
/* 링 바인더 등 — 금색 띠에 구멍 여섯. */
.notebook__rings {
  position: absolute; left: 0; top: 0; bottom: 0; width: 16px; z-index: 2;
  background: linear-gradient(90deg, #b8930f, #d8b02a 55%, #a8860f);
  display: flex; flex-direction: column; align-items: center;
  justify-content: space-around; padding: 30px 0; box-sizing: border-box;
}
.notebook__rings i {
  width: 7px; height: 7px; border-radius: 50%;
  background: #fdfaef; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.45);
}
.notebook__head {
  flex: none; display: flex; align-items: center; gap: 11px;
  padding: 17px 22px 14px 30px;
  border-bottom: 1.5px solid #eae2cd;
  box-shadow: 0 1.5px 0 #f4eee0;
}
.notebook__id { flex: 1; min-width: 0; }
.notebook__kicker {
  font: 500 10.5px var(--font-mono); color: #a89d84; letter-spacing: 0.16em;
}
.notebook__title { font: 400 21px var(--font-title); color: var(--ink); }
.notebook__icon {
  width: 36px; height: 36px; flex: none;
  border-radius: 10px; background: var(--note-soft);
  border: 1px solid #f0dfa8;
  display: flex; align-items: center; justify-content: center;
}
.notebook__icon img { height: 19px; }
.notebook__count {
  flex: none; display: flex; align-items: baseline; gap: 6px;
  background: var(--note-soft); border-radius: 9px; padding: 6px 12px;
}
.notebook__count span { font: 500 11.5px var(--font-body); color: #a9861a; }
.notebook__count b { font: 400 17px var(--font-title); color: var(--ink); }
.notebook__count i { font: 400 12px var(--font-title); color: #b5ad98; font-style: normal; }
.notebook__body { flex: 1; display: flex; min-height: 0; }
/* Tier A 는 **스크롤이 허용되는 유일한 계층**이다(목업 창 3계층). */
.chlist {
  flex: none; width: 212px;
  border-right: 1.5px solid #eae2cd;
  background: linear-gradient(#faf6ea, #f4eddc);
  box-shadow: inset -2px 0 0 #fdfaf0;
  padding: 10px 10px 10px 24px; box-sizing: border-box;
  overflow: auto;
  display: flex; flex-direction: column; gap: 4px;
}
.chrow {
  display: flex; align-items: center; gap: 9px;
  border-radius: 11px; padding: 8px 10px; cursor: pointer;
  border: 1.5px solid transparent;
}
.chrow--on { background: var(--note-soft); border-color: #f0c93b; }
.chrow__mark {
  flex: none; width: 26px; height: 26px; border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font: 400 13px var(--font-title);
  background: #f0ebdd; color: #b5ad98;
}
.chrow--done .chrow__mark { background: var(--ok); color: #fff; }
.chrow--current .chrow__mark { background: var(--volt); color: #7a6210; }
.chrow__body { flex: 1; min-width: 0; }
.chrow__day { font: 500 9.5px var(--font-mono); color: #b5ad98; letter-spacing: 0.08em; }
.chrow__word {
  font: 400 15px var(--font-title); color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.chrow--locked .chrow__day { color: #c9bfa8; }
.chrow--locked .chrow__word { color: #b5ad98; }
/* 오른쪽 — 펼친 챕터. 공책 괘선을 깔아 「노트」로 읽히게 한다. */
.chpage {
  flex: 1; min-width: 0; overflow: auto;
  padding: 18px 22px;
  background-image: repeating-linear-gradient(transparent 0 29px, rgba(42, 59, 102, 0.05) 29px 30px);
  background-position: 0 12px;
}
.chpage__head { display: flex; align-items: center; gap: 9px; }
.chpage__day { font: 500 10.5px var(--font-mono); color: #a89d84; letter-spacing: 0.14em; }
.chpage__tag {
  border-radius: 6px; padding: 2px 8px;
  font: 700 10px var(--font-body);
  background: #f0ebdd; color: #b5ad98;
}
.chpage__tag--done { background: #dff3ea; color: #2e7d54; }
.chpage__tag--current { background: var(--note-soft); color: #a9861a; }
.chpage__title { font: 400 24px/1.4 var(--font-title); color: var(--ink); margin-top: 6px; }
/* 형광펜 — 제목이 챕터의 주인공이다. */
.chpage__title span {
  background: linear-gradient(transparent 66%, rgba(255, 211, 56, 0.5) 66%);
}
.chpage__q { font: 500 13px/1.85 var(--font-body); color: #7d7461; margin-top: 6px; }
.chpage__items {
  margin-top: 15px; background: #fff;
  border: 1.5px solid var(--ok); border-radius: 14px;
  padding: 15px 16px;
  display: flex; flex-direction: column; gap: 9px;
  box-shadow: 0 3px 0 rgba(76, 175, 125, 0.16);
}
.chpage__when {
  margin-top: 11px; display: flex; align-items: center; gap: 9px;
  background: var(--note-soft); border-radius: 12px; padding: 11px 14px;
  font: 500 12.5px/1.55 var(--font-body); color: #a9861a;
}
/* 진행 중 — **채워질 줄 수만큼** 회색 막대. 오늘 몇 개를 얻는지 미리 안다. */
.chpage__todo {
  margin-top: 15px; border: 1.5px dashed #dcd5c4; border-radius: 14px;
  padding: 15px 16px; background: #fdfbf5;
}
.chpage__todo-head { font: 400 15px var(--font-title); color: #a9861a; }
.chpage__slots { display: flex; flex-direction: column; gap: 8px; margin-top: 11px; }
.chslot { display: flex; align-items: center; gap: 9px; }
.chslot__mark {
  flex: none; width: 16px; height: 16px; border-radius: 5px;
  background: #f0ebdd; display: flex; align-items: center; justify-content: center;
  font: 700 10px var(--font-body); color: #b5ad98;
}
.chslot__bar { flex: 1; height: 9px; border-radius: 5px; background: #f0ebdd; }
/* 잠김 — 제목과 질문은 위에 이미 있다. 여기서는 언제 열리는지만 말한다. */
.chpage__lock {
  margin-top: 15px; border: 1.5px dashed #dcd5c4; border-radius: 14px;
  padding: 20px 16px; text-align: center; background: #fdfbf5;
}
.chpage__lock-icon { font-size: 20px; }
.chpage__lock-when { font: 400 16px var(--font-title); color: var(--muted); margin-top: 6px; }
.chpage__lock-fine { font: 500 12.5px var(--font-body); color: #b5ad98; margin-top: 4px; }
.chpage__clue {
  margin-top: 14px; border-top: 1.5px solid #eae2cd; padding-top: 12px;
  font: 400 14px/1.6 var(--font-body); color: var(--text);
}
.chpage__clue-label {
  font: 500 10.5px var(--font-mono); color: #a89d84; letter-spacing: 0.14em; margin-bottom: 4px;
}
.notebook__foot {
  flex: none; padding: 9px; border-top: 2px solid #f0ebdd;
  font: 500 11.5px var(--font-body); color: #b5ad98; text-align: center;
}
/* 소개 중(D1-00 튜토리얼)에도 노트는 **평소 Tier A 모습 그대로**다 — 챕터 11칸·머리·본문 · **자리도 평소처럼 가운데**
   (사용자 지시 · 2026-08-28 「업무노트는 평상시랑 똑같게 가운데에서 출력」 — 예전의 translateX(120) 을 걷었다). */
.overlay--spot.overlay--note { top: 66px; padding-top: 0; align-items: flex-start; }
/* 노트 소개 중의 말풍선 — **사원증과 동일하게 왼쪽**이다(사용자 지시 · 2026-08-28). 노트가 가운데(300..980)라
   왼쪽 여백이 300 뿐이므로 폭만 240 으로 줄인다(40..280 · 말꼬리 ~296 이 노트 왼쪽 등을 가리킨다). */
.dialog--spot-note .dialog__line--aside { width: 240px; }

/* ── 대사 / 개념 카드 (B-STORY-01 · B-CARD-01) ────────────────────────────── */

.dialog { position: absolute; inset: 0; z-index: 75; background: rgba(26, 32, 60, 0.22); cursor: pointer; }
/* 사원증·노트를 보여 주는 동안 — 배경은 `.frame--dim` 이 죽이므로 대사는 막을 벗고 위로 올라온다. */
.dialog--spot { z-index: 77; background: transparent; }
/* 목업의 대사 카드 — 화면 폭 1100 을 가운데 두고, 테두리 대신 **위로 뜨는 그림자**로
   배경에서 띄운다. 예전에는 2.5px 남색 테두리가 둘려 있어 카드가 무거웠다. */
.dialog__line {
  position: absolute;
  left: 90px; right: 90px; bottom: 36px;
  background: #fff;
  border-radius: 20px;
  padding: 20px 24px;
  display: flex; gap: 18px; align-items: center;
  box-shadow: 0 -6px 34px rgba(0, 0, 0, 0.3);
  animation: popIn 0.18s ease;
}
/* 얼굴은 **인물 색 링**을 두른 원이다 — 누가 말하는지가 색으로 먼저 읽힌다. */
.dialog__face {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: #fff7dc;
  flex: none; overflow: hidden;
  display: flex; justify-content: center;
  box-shadow: 0 0 0 3px var(--volt-dark);
}
.dialog__face img { width: 100%; height: 100%; object-fit: cover; }
.dialog__avatar {
  width: 62px; height: 62px; font-size: 26px; line-height: 62px;
  border: 0;
}
.dialog__text { flex: 1; min-width: 0; }
.dialog__name { font: 400 15px var(--font-title); }
.dialog__body {
  font: 400 24px/1.5 var(--font-title); color: var(--ink);
  margin-top: 2px; min-height: 36px;
}
/* 둥근 화살표 — 끝나면 노랑(아래 4px 굽), 출력 중엔 회색으로 같은 자리에 남는다. */
.dialog__go {
  flex: none;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--volt); color: var(--ink);
  font: 400 22px var(--font-title);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 0 var(--volt-dark);
}
.dialog__go--wait { background: #f0ebdd; color: #c9bfa8; box-shadow: none; }

/* ── 사원증·업무 노트를 보여 주는 동안 — 대사가 **패널 옆 말풍선**이 된다 (사용자 지시)
   아래 바로 두면 실물과 말이 같은 세로를 다툰다. 자리만 옮기므로 스트리밍은 그대로다.
   ⚠ 패널은 가운데(대략 465..815)에 있으므로 왼쪽 여백(40..400)에 세운다.
      패널 폭을 바꾸면 여기 `width` 도 같이 볼 것. */
.dialog__line--aside {
  left: 40px; right: auto;
  top: 150px; bottom: auto;   /* 말꼬리(top+44)가 두 패널 모두의 세로 범위 안에 든다 */
  width: 360px;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  padding: 18px 22px;
  animation: popIn .2s ease;
}
.dialog__line--aside .dialog__face,
.dialog__line--aside .dialog__avatar { width: 52px; height: 52px; }
.dialog__line--aside .dialog__avatar { font-size: 22px; line-height: 52px; }
.dialog__line--aside .dialog__face img { width: 100%; height: 100%; }
.dialog__line--aside .dialog__body { font-size: 17px; min-height: 0; }
/* 옆 말풍선은 좁다 — 둥근 화살표는 오른쪽 아래로 내려 작게 둔다. */
.dialog__line--aside .dialog__go {
  align-self: flex-end;
  width: 42px; height: 42px; font-size: 18px;
  box-shadow: 0 3px 0 var(--volt-dark);
}
/* 말꼬리 — 오른쪽의 실물을 가리킨다. */
.dialog__line--aside::after {
  content: '';
  position: absolute;
  right: -16px; top: 44px;
  border: 9px solid transparent;
  border-left-color: var(--ink);
}

.card {
  position: absolute;
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 520px;
  background: var(--cream);
  border-radius: 24px;
  overflow: hidden;
  box-shadow: var(--shadow-modal);
  animation: popInCenter 0.25s ease;
}
.card__head {
  background: var(--volt);
  padding: 22px 32px;
  display: flex; align-items: center; gap: 16px;
}
.card__head img { height: 34px; }
.card__kicker { font: 500 12px var(--font-mono); color: #8a6e0c; letter-spacing: 0.14em; }
.card__title { font: 400 26px/1.3 var(--font-title); color: var(--ink); margin-top: 2px; }
.card__tag {
  margin-left: auto; flex: none;
  background: var(--ink); color: var(--volt);
  font: 400 15px var(--font-title);
  border-radius: 999px; padding: 8px 16px;
}
.card__body { padding: 22px 32px; display: flex; gap: 18px; align-items: flex-start; }
.card__content { flex: 1; min-width: 0; }
.card__text { flex: 1; font: 400 16px/1.75 var(--font-body); color: var(--text); white-space: pre-line; }
.card__body img { height: 104px; flex: none; }
.card__foot { padding: 0 32px 22px; display: flex; align-items: center; justify-content: center; gap: 14px; }
.card__cta {
  background: var(--volt); color: var(--ink);
  font: 400 19px var(--font-title);
  border-radius: 14px; padding: 13px 36px;
  box-shadow: 0 4px 0 var(--volt-dark);
}
.card__fine { text-align: center; font: 500 11.5px var(--font-mono); color: var(--faint); padding: 0 32px 20px; }

/* DAY 02 분류 전 네 역할 기준표 — 설명과 MainBoard의 라벨을 정확히 맞춘다. */
.card--role-guide { width: 760px; }
.card--role-guide .card__body { padding-top: 18px; }
.card--role-guide .card__text { text-align: center; font-size: 15px; }
.role-guide__grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px; margin-top: 14px;
}
.role-guide__item {
  display: grid; grid-template-columns: 58px 1fr; align-items: center; gap: 12px;
  min-height: 82px; border: 2px solid #d8d1c1; border-radius: 15px;
  background: #fff; padding: 10px 14px;
}
.role-guide__icon {
  width: 52px; height: 52px; display: flex; align-items: center; justify-content: center;
  border-radius: 13px; background: #f4f1e8; font-size: 27px;
}
.role-guide__name { font: 400 20px var(--font-title); color: var(--ink); }
.role-guide__need { margin-top: 4px; font: 600 13px var(--font-body); color: var(--text); }

/* ── LEVEL UP (역할 사다리 승급) ──────────────────────────────────────────────
   숫자형 EXP 가 아니라 회사 안에서의 역할이 오르는 순간이다(01 §13 · 02 §33-2).
   DAY 06 은 이 자리에서 사원증 등급도 정식 → 금장으로 바뀐다. */

.levelup__bg { background: radial-gradient(circle at 50% 42%, #3a4a7d 0%, #141d36 55%, #0b1020 100%); }

/* 뒤에서 도는 광선 */
.levelup__rays {
  position: absolute; left: 50%; top: 42%;
  width: 1500px; height: 1500px; margin: -750px 0 0 -750px;
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 245, 210, 0.13) 0deg 4deg,
    rgba(255, 245, 210, 0) 4deg 18deg);
  animation: rayspin 22s linear infinite;
  pointer-events: none;
  /* 가장자리로 갈수록 사라지게 — 화면을 가득 채우면 배경이 탁해진다. */
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 18%, transparent 62%);
  mask-image: radial-gradient(circle at 50% 50%, #000 18%, transparent 62%);
}
@keyframes rayspin { to { transform: rotate(360deg); } }

.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti__bit {
  position: absolute; top: -24px;
  width: 11px; height: 16px; border-radius: 2px;
  animation: confdrop 2.6s ease-in infinite;
}
.confetti__bit--0 { left: 12%; background: #ffd338; animation-delay: 0s; }
.confetti__bit--1 { left: 22%; background: #4caf7d; animation-delay: .35s; }
.confetti__bit--2 { left: 33%; background: #e8543f; animation-delay: .7s; }
.confetti__bit--3 { left: 45%; background: #5b7ed9; animation-delay: .15s; }
.confetti__bit--4 { left: 58%; background: #ffd338; animation-delay: .95s; }
.confetti__bit--5 { left: 70%; background: #8b6fc9; animation-delay: .5s; }
.confetti__bit--6 { left: 84%; background: #4caf7d; animation-delay: 1.2s; }
.confetti__bit:nth-child(n + 8) { animation-duration: 3.4s; opacity: .75; }
@keyframes confdrop {
  0%   { transform: translateY(0) rotate(0deg); opacity: 0; }
  10%  { opacity: 1; }
  100% { transform: translateY(880px) rotate(560deg); opacity: 0; }
}

.levelup {
  position: relative;
  width: 560px; text-align: center;
  padding: 34px 40px 30px;
  background: linear-gradient(#fffdf7, #fff4d2);
  border: 3px solid var(--amber);
  border-radius: 26px;
  box-shadow: 0 0 0 6px rgba(255, 211, 56, 0.28), 0 30px 70px rgba(0, 0, 0, 0.55);
  animation: levelPop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1);
}
@keyframes levelPop {
  0%   { transform: scale(0.5) translateY(40px); opacity: 0; }
  60%  { transform: scale(1.04); opacity: 1; }
  100% { transform: scale(1); }
}

.levelup__kicker {
  font: 400 34px var(--font-title);
  letter-spacing: 2px;
  color: var(--amber-text);
  text-shadow: 0 3px 0 #fff, 0 5px 12px rgba(201, 147, 10, 0.4);
  animation: kickerPop 0.6s 0.15s backwards cubic-bezier(0.2, 1.8, 0.4, 1);
}
@keyframes kickerPop {
  from { transform: scale(0.3) rotate(-8deg); opacity: 0; }
  to   { transform: scale(1) rotate(0); opacity: 1; }
}

.levelup__nums {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  margin: 16px 0 6px;
}
.levelup__from {
  font: 400 30px var(--font-title); color: var(--faint);
  animation: fromFade 0.7s 0.3s backwards;
}
@keyframes fromFade { from { opacity: 1; transform: scale(1.1); } to { opacity: .55; transform: scale(1); } }
.levelup__arrow { font: 400 24px var(--font-title); color: var(--amber-text); }
.levelup__to {
  font: 400 52px var(--font-title); color: var(--ink);
  text-shadow: 0 3px 0 var(--amber);
  animation: toSlam 0.5s 0.55s backwards cubic-bezier(0.2, 1.9, 0.35, 1);
}
@keyframes toSlam {
  from { transform: scale(2.4); opacity: 0; }
  to   { transform: scale(1); opacity: 1; }
}

.levelup__role { font: 400 27px var(--font-title); color: var(--ink); }
.levelup__from-role { font: 500 13.5px var(--font-body); color: var(--muted); margin-top: 4px; }

.levelup__grade {
  margin: 16px auto 0; padding: 11px 16px;
  background: rgba(255, 255, 255, 0.7);
  border: 1.5px dashed var(--amber);
  border-radius: 12px;
  display: inline-block;
}
.levelup__grade-from { font: 400 15px var(--font-title); color: var(--faint); }
.levelup__grade-arrow { font: 400 14px var(--font-title); color: var(--amber-text); margin: 0 8px; }
.levelup__grade-to { font: 400 18px var(--font-title); color: var(--amber-text); }
.levelup__grade-note { font: 500 12.5px var(--font-body); color: var(--muted); margin-top: 3px; }

.levelup__ladder { justify-content: center; margin: 18px 0 10px; }
.levelup__voice { font: 400 16px var(--font-title); color: var(--text); }
.levelup__ok {
  margin-top: 20px;
  display: inline-block; cursor: pointer;
  background: var(--volt); color: var(--ink);
  font: 400 21px var(--font-title);
  border-radius: 15px; padding: 14px 40px;
  box-shadow: 0 5px 0 var(--volt-dark);
}
.levelup__ok:hover { transform: translateY(-2px); }
.levelup__ok:active { transform: translateY(4px); box-shadow: 0 1px 0 var(--volt-dark); }

@media (prefers-reduced-motion: reduce) {
  .levelup, .levelup__kicker, .levelup__to, .levelup__from { animation: none; }
  .levelup__rays, .confetti { display: none; }
}

/* ── 업무 완료 — 도장 축하 → 학습 내용 정리 ────────────────────────────────
   도장·권한·회사 지표를 학습 카드에서 반복하지 않는다. 공간과 역할의 변화는
   뒤이어 뜨는 층 해금·레벨업 전용 화면이 각각 한 가지 성취만 보여 준다. */

/* 목업처럼 **방이 뒤에 흐릿하게 남는다** — 프레임에 이미 깔린 배경 한 장을 흐려서 쓰므로
   이미지를 새로 디코딩하지 않는다. 완전한 남색으로 덮으면 어디서 끝낸 하루인지가 사라진다. */
.overlay--clear {
  background: transparent; padding: 0;
  backdrop-filter: blur(7px);
  -webkit-backdrop-filter: blur(7px);
}
.clear {
  position: absolute; inset: 0;
  background: radial-gradient(ellipse at 50% 34%, rgba(42, 59, 102, 0.62), rgba(16, 22, 38, 0.95));
  overflow: hidden;
}
.clear--cheer { cursor: pointer; }
/* 가운데 칼럼 — 세 화면이 같은 자리에서 시작하므로 화면이 바뀌어도 눈이 안 튄다. */
.clear__col {
  position: absolute; left: 50%; top: 90px;
  width: 760px; margin-left: -380px;
  text-align: center;
}
.clear--cheer .clear__col { top: 100px; width: 600px; margin-left: -300px; }
.clear--learning .clear__col { top: 92px; width: 720px; margin-left: -360px; }
.clear__rays {
  position: absolute; left: 50%; top: 34%;
  width: 1500px; height: 1500px; margin: -750px 0 0 -750px;
  background: repeating-conic-gradient(from 0deg,
    rgba(255, 245, 210, 0.07) 0deg 5deg, rgba(255, 245, 210, 0) 5deg 22deg);
  animation: rayspin 32s linear infinite;
  pointer-events: none;
  /* ⚠ 가장자리를 마스크로 지운다 — 화면을 가득 채우면 네이비와 섞여 카키색으로 탁해진다
     (레벨업 연출에서 한 번 겪었다). */
  mask-image: radial-gradient(closest-side, #000 30%, transparent 78%);
  -webkit-mask-image: radial-gradient(closest-side, #000 30%, transparent 78%);
}
@keyframes rayspin { from { transform: rotate(0); } to { transform: rotate(360deg); } }
.clear__ring {
  position: absolute; left: 50%; top: 330px;
  width: 340px; height: 340px; margin-left: -170px;
  border-radius: 50%; border: 5px solid rgba(255, 211, 56, 0.7);
  animation: ringOut 1s ease-out forwards;
  pointer-events: none;
}
@keyframes ringOut {
  0% { opacity: .8; transform: scale(.3); }
  100% { opacity: 0; transform: scale(2.4); }
}
/* 볼티는 양쪽 바닥에 — 가운데 칼럼을 가리지 않는다. */
.clear__volti {
  position: absolute; bottom: 0;
  filter: drop-shadow(0 16px 26px rgba(0, 0, 0, 0.55));
  animation: bob 2.8s ease-in-out infinite;
  pointer-events: none;
}
.clear__volti--l { left: 126px; height: 380px; }
.clear__volti--r { right: 132px; height: 330px; animation-delay: .4s; }
.clear__volti--corner { left: 74px; height: 250px; }

.clear__badge {
  display: inline-block;
  background: rgba(255, 211, 56, 0.16);
  border: 1.5px solid rgba(255, 211, 56, 0.5);
  border-radius: 999px; padding: 6px 18px;
  font: 500 12px var(--font-mono); color: var(--volt);
  letter-spacing: 0.16em;
  animation: popUp .4s ease-out both;
}
.clear__kicker {
  font: 500 12px var(--font-mono); color: #8fa0c9; letter-spacing: 0.16em;
}
.clear__title {
  font: 400 62px var(--font-title); color: #fff; margin-top: 12px;
  text-shadow: 0 6px 26px rgba(0, 0, 0, 0.55);
  animation: burstIn .5s .1s ease-out both;
}
@keyframes burstIn {
  0% { opacity: 0; transform: scale(0.35); }
  60% { opacity: 1; transform: scale(1.1); }
  100% { opacity: 1; transform: scale(1); }
}
.clear__h2 { font: 400 46px var(--font-title); color: #fff; margin-top: 8px; animation: popUp .45s ease-out both; }
.clear__sub { font: 500 17px var(--font-body); color: #c7d2e8; margin-top: 8px; animation: popUp .4s .3s ease-out both; }
.clear__sub .hl { color: var(--volt); }
.clear__reaction {
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.07);
  border-radius: 14px; padding: 12px 18px;
}
.clear__reaction-title { font: 400 17px var(--font-title); color: var(--volt); }
.clear__reaction-body { font: 500 13.5px/1.6 var(--font-body); color: #e8e4d8; margin-top: 4px; }
.clear__bonus {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.08);
  border-radius: 999px; padding: 6px 16px;
  font: 400 15px var(--font-title); color: var(--volt);
}
.clear__go { margin-top: 22px; font: 400 20px var(--font-title); color: var(--volt); animation: hintBob 1.7s ease-in-out infinite; }
@keyframes hintBob { 0%, 100% { opacity: .5; transform: translateY(0); } 50% { opacity: 1; transform: translateY(5px); } }
.clear__review {
  margin-top: 16px;
  font: 500 12.5px var(--font-body); color: #8fa0c9;
}
/* 개념 설명 줄 — **패널 안에** 둔다. 흐린 배경 위에 맨글씨로 얹으면 방이 비쳐 안 읽힌다. */
.clear__lines {
  margin-top: 16px; text-align: left;
  background: rgba(16, 22, 38, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 14px 18px;
}
.clear__lines > div {
  display: flex; gap: 9px; align-items: baseline;
  font: 500 13.5px/1.65 var(--font-body); color: #e8e4d8;
}
.clear__lines > div + div { margin-top: 5px; }
.clear__lines .check { color: #7bd4a8; }

.book__sheen {
  position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: 16px;
}
.book__sheen::after {
  content: ''; position: absolute; top: 0; bottom: 0; width: 80px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.85), transparent);
  animation: sheen 1.4s .6s ease-out;
}
@keyframes sheen {
  0% { transform: translateX(-130%) skewX(-18deg); }
  100% { transform: translateX(760%) skewX(-18deg); }
}
/* ② 학습 내용 정리 — 오늘의 개념 하나와 근거 2~3줄만 남긴다. */
.learning-card {
  position: relative;
  margin-top: 28px;
  padding: 34px 38px 30px;
  text-align: center;
  background: rgba(16, 22, 38, .76);
  border: 2px solid rgba(123, 212, 168, .62);
  border-radius: 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .36);
  animation: popUp .45s ease-out both;
}
.learning-card__icon {
  width: 72px; height: 72px; margin: -4px auto 0;
  border-radius: 24px;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(145deg, #8be6b7, var(--ok));
  font-size: 35px;
  box-shadow: 0 0 0 8px rgba(123, 212, 168, .1);
}
.learning-card__term {
  margin-top: 18px;
  font: 400 38px/1.25 var(--font-title);
  color: #8be6b7;
}
.learning-card__review {
  display: inline-block; margin-top: 9px; padding: 5px 12px;
  border-radius: 999px; background: rgba(143, 160, 201, .14);
  font: 500 11.5px var(--font-body); color: #a8b4ce;
}
.learning-card__lines {
  margin-top: 22px; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .13);
  display: flex; flex-direction: column; gap: 10px;
  text-align: left;
}
.learning-card__lines > div {
  display: flex; gap: 11px; align-items: baseline;
  font: 500 14px/1.65 var(--font-body); color: #e8e4d8;
}
.learning-card__lines .check { flex: none; color: #7bd4a8; }
.clear--learning .stamp__ok { width: 420px; margin: 24px auto 0; }
.cmile__track {
  height: 6px; border-radius: 3px; margin-top: 9px;
  background: rgba(255, 255, 255, 0.14); overflow: hidden;
}
.cmile__track i {
  display: block; height: 100%; border-radius: 3px;
  background: var(--volt); transition: width .6s ease;
}
.clear__lead {
  font: 500 15px var(--font-body); color: #c7d2e8; margin-top: 8px;
}
.cwhy {
  margin-top: 22px; height: 50px;
  display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255, 255, 255, 0.08);
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  border-radius: 14px;
  font: 400 17px var(--font-title); color: #c7d2e8;
  cursor: pointer;
}
.cwhy__body {
  margin-top: 10px;
  background: rgba(255, 255, 255, 0.06);
  border-radius: 14px; padding: 14px 18px;
  display: flex; flex-direction: column; gap: 8px; text-align: left;
  font: 500 13.5px/1.65 var(--font-body); color: #e8e4d8;
  animation: popUp .3s ease-out both;
}
.cwhy__line { display: flex; gap: 9px; }
.cwhy__line .hl { color: #fff; }
.cwhy__arrow { flex: none; font: 400 16px var(--font-title); color: var(--volt); }

@media (prefers-reduced-motion: reduce) {
  .clear__rays, .clear__ring, .clear__volti, .book__sheen::after, .clear__title, .clear__go { animation: none; }
  .pstamp--landing, .gain, .cmet, .clear .stamp__card, .gain__icon { animation: none; }
}

/* ── DAY 07 전략 비교 ────────────────────────────────────────────────────────
   02 §43 "같은 뉴스에서 두 전략 보드가 갈라짐" — 뉴스 한 장에서 좌우로 벌어진다. */

.shared-news {
  position: absolute;
  left: var(--work-center); top: 152px; transform: translateX(-50%);
  width: 560px; text-align: center;
  background: var(--cream);
  border: 2.5px solid var(--ink);
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: var(--shadow-card);
}
.shared-news__tag { font: 400 12.5px var(--font-title); color: var(--muted); }
.shared-news__text { font: 400 19px var(--font-title); color: var(--ink); margin-top: 2px; }
.shared-news__status {
  position: absolute; right: -12px; top: -12px;
  background: var(--team-meet); color: #fff;
  font: 400 12px var(--font-title);
  border-radius: 8px; padding: 4px 10px;
  transform: rotate(4deg);
}

/* 갈라지는 두 갈래 */
.split { position: absolute; left: var(--work-center); top: 232px; width: 520px; height: 34px; transform: translateX(-50%); }
.split i {
  position: absolute; top: 0; width: 50%; height: 100%;
  border-top: 2px dashed var(--faint);
}
.split i:first-child { left: 0; border-left: 2px dashed var(--faint); border-radius: 12px 0 0 0; }
.split i:last-child { right: 0; border-right: 2px dashed var(--faint); border-radius: 0 12px 0 0; }

.boards {
  position: absolute;
  left: var(--work-center); top: 270px; transform: translateX(-50%);
  display: flex; gap: 26px;
}
.board {
  width: 300px;
  background: var(--cream);
  border: 2.5px solid var(--line);
  border-radius: 16px;
  padding: 14px 16px 16px;
  box-shadow: var(--shadow-card);
  animation: popIn 0.25s ease;
}
.board--blue { border-color: var(--team-prod); }
.board--green { border-color: var(--team-buy); }
.board__name { font: 400 17px var(--font-title); color: var(--muted); }
.board__choice { font: 400 24px var(--font-title); color: var(--ink); margin-top: 2px; }
.board__note { font: 500 13px var(--font-body); color: var(--muted); margin-bottom: 10px; }
.board__cells { display: flex; flex-direction: column; gap: 7px; }

.fcell {
  cursor: pointer;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 10px;
  padding: 8px 11px;
  transition: transform 0.1s ease;
}
.fcell:hover { transform: translateX(3px); }
.fcell--read { background: var(--note-soft); border-color: var(--amber); }
.fcell__label { font: 400 13px var(--font-title); color: var(--muted); }
.fcell__value { font: 500 14.5px var(--font-body); color: var(--text); }

/* 판단 — 회사별로 「가장 큰 이유」 하나씩 */
.decision--reasons { align-items: center; }
.reasons { flex: 1; display: flex; gap: 22px; }
.reason { flex: 1; }
.reason__ask { font: 500 13.5px var(--font-body); color: var(--text); margin-bottom: 6px; }
.reason__opts { display: flex; gap: 6px; }
.reason__opt {
  cursor: pointer;
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 9px;
  padding: 7px 9px;
  font: 400 12.5px var(--font-title);
  color: var(--text);
  white-space: nowrap;
}
.reason__opt:hover { border-color: var(--amber); }
.reason__opt--on {
  background: var(--sticky); border-color: var(--amber-text); color: var(--ink);
  box-shadow: 0 2px 0 var(--amber-text);
}

.sresult { flex: 1; }
.sresult__title { font: 400 20px var(--font-title); color: var(--ok-dark); margin-bottom: 6px; }
.sresult__lines { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.sresult__line { font: 500 13.5px var(--font-body); color: var(--text); }
.sresult__line--core { color: var(--ok-dark); }
.sresult__warn { margin-top: 8px; font: 500 12.5px var(--font-body); color: var(--muted); }

/* 인물 사진 — 이니셜 원 자리에 얼굴이 들어간다. */
.avatar { overflow: hidden; display: flex; align-items: center; justify-content: center; }
.avatar__img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 대사가 가리키는 것 — 말과 화면을 잇는 표시. 실물(사원증·노트)은 따로 뜨고,
   여기서는 「저기 저것」이 어디인지 한 번 짚어 준다.
   HUD 는 z 40 이라 대사 막 아래에 깔린다 — 가리키는 동안만 막 위로 올린다. */
/* 가리키는 동안 HUD 는 **보여 주기만** 한다 — 눌러도 대사가 넘어가야 한다. */
.hud--spot { z-index: 78; pointer-events: none; }
/* 단, 「눌러 봐」 하는 줄에서는 그 클릭이 곧 진행이다. */
.hud--tap, .hud--tap .spot { pointer-events: auto; }
.hud--tap .met, .hud--tap .hud__group:first-child { pointer-events: none; }
.spot {
  /* 막 위로 올라가 있으므로 클릭을 뺏지 않게 한다 — 진행은 대사가 갖는다.
     단 「눌러 봐」 하는 HUD 칩은 예외(아래 .hud--tap .spot). */
  position: relative; z-index: 76; pointer-events: none;
  border-radius: 14px;
  box-shadow: 0 0 0 3px var(--volt), 0 0 0 9px rgba(240, 201, 59, 0.35);
  animation: spotPulse 1.1s ease-in-out infinite;
}
@keyframes spotPulse {
  0%, 100% { box-shadow: 0 0 0 3px var(--volt), 0 0 0 9px rgba(240, 201, 59, 0.35); }
  50% { box-shadow: 0 0 0 3px var(--volt), 0 0 0 15px rgba(240, 201, 59, 0.12); }
}
@media (prefers-reduced-motion: reduce) { .spot { animation: none; } }

/* ── 회사 상태 네 지표 (HUD 상시) ────────────────────────────────────────────
   ⚠ 03 §3 "4개 이상 KPI 상시 노출 금지"를 의도적으로 어긴다 — data/metrics.js 참고. */

/* 지표 하나 = **칩 하나**(목업 PC HUD).
     위 줄 `아이콘 · 라벨 ······ 값` · 아래 줄 `지표 색 막대 · 변화량`.
   ⚠ 이건 예전의 「개별 배경을 주지 않는다」를 뒤집은 것이다 — 목업이 네 지표를
     **누를 수 있게**(→ Tier A 원장) 만들면서 넷도 버튼이 됐다. 되돌리지 말 것. */
.met {
  position: relative;
  min-width: 112px;
  display: flex; flex-direction: column; justify-content: center;
  padding: 2px 10px 3px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s ease, box-shadow 0.3s ease;
}
.met:hover { background: rgba(255, 255, 255, 0.16); }
.met__icon { font-size: 12px; line-height: 1; }
.met__body { display: contents; }
.met__head { display: flex; align-items: center; gap: 6px; }
/* 다크 상단 바 위에 얹힌다 — 라벨·숫자·트랙 색을 전부 밝은 쪽으로 잡는다.
   값은 **오른쪽 끝**에 붙는다(목업) — 넷이 세로로 정렬돼 비교해서 읽힌다. */
.met__label { flex: 1; font: 500 11.5px var(--font-body); color: #a9b6d4; line-height: 1.25; }
.met__num { font: 400 15px var(--font-title); color: #fff; line-height: 1.15; white-space: nowrap; }
/* 아래 줄 — 막대와 변화량이 한 줄을 나눠 쓴다. 높이를 고정해 칩이 흔들리지 않게 한다. */
.met__foot { display: flex; align-items: center; gap: 6px; height: 10px; margin-top: 3px; }
.met__bar {
  position: relative; flex: 1;
  height: 3px; border-radius: 2px;
  background: rgba(255, 255, 255, 0.16); overflow: hidden;
}
.met__fill {
  position: absolute; left: 0; top: 0; bottom: 0;
  border-radius: 2px;
  transition: width 0.5s ease;
}
/* 확정된 변화 — 칩 안에서 한 번 크게 떠올랐다 사라진다(목업 `gainFloatIn`). */
.met__flash {
  position: absolute; right: 6px; top: 3px; z-index: 3;
  border-radius: 7px; padding: 2px 8px;
  font: 400 12px var(--font-title); color: #fff;
  white-space: nowrap;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.35);
  animation: gainFloatIn 1.6s ease-out both;
  pointer-events: none;
}
.met__flash--up { background: #3f9d6d; }
.met__flash--down { background: #c43c28; }
.met__diff {
  flex: none; line-height: 1; white-space: nowrap;
  font: 600 10px var(--font-mono);
}
.met__diff--up { color: #7bd4a8; }
.met__diff--down { color: #ff6b5a; }
/* 확정된 변화가 있는 칩은 잠깐 부풀고 지표 색 테두리를 두른다. */
.met--hit { animation: chipGain 0.7s ease-out both; }
.met--up { background: rgba(76, 175, 125, 0.16); border-color: rgba(76, 175, 125, 0.55);
  box-shadow: 0 0 0 3px rgba(76, 175, 125, 0.28); }
.met--down { background: rgba(196, 60, 40, 0.16); border-color: rgba(196, 60, 40, 0.55);
  box-shadow: 0 0 0 3px rgba(196, 60, 40, 0.28); }
@keyframes gainFloatIn {
  0% { opacity: 0; transform: translateY(5px) scale(0.85); }
  22% { opacity: 1; transform: translateY(0) scale(1.1); }
  45% { transform: none; }
  75% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes chipGain {
  0% { transform: scale(1); }
  22% { transform: scale(1.09); }
  45% { transform: scale(0.99); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .met--hit, .met__flash { animation: none; }
}
/* 확정 전 변화 — **움직인 구간만 빗금**이다(목업 「확정 전 변화는 빗금 구간 + 검토 중,
   확정되면 실선이 되고 값 자체가 움직인다」). DAY 01 의 「직접 지어보기」가 이걸 쓴다. */
.met__ghost {
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(45deg,
    var(--met-c, #c43c28) 0 2px, transparent 2px 4px);
  transition: left 0.5s ease, width 0.5s ease;
}
/* ⚠ 칩 **안**에 둔다. 예전처럼 `top:-13px` 로 띄우면 칩이 상단 8px 에 있어서
   상단 띠 밖으로 잘려 보이지 않는다. */
.met__pend {
  flex: none; line-height: 1; white-space: nowrap;
  font: 600 10px var(--font-mono); color: #ff9c88;
  animation: metPend 1.1s ease-in-out infinite;
}
@keyframes metPend { 0%, 100% { opacity: 1; } 50% { opacity: 0.45; } }
/* 지금 화면에서 걸린 지표 — 나머지를 흐리게 하지 않는다 */
.met--live .met__bar { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.5); }
.met--live .met__label { font-weight: 700; color: #fff; }
@keyframes metaPop {
  0% { transform: translateY(8px) scale(0.6); opacity: 0; }
  60% { transform: translateY(-2px) scale(1.15); opacity: 1; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .met__fill, .met__ghost { transition: none; }
  .met__pend { animation: none; }
}

/* 결과 · 도장 · 배운 것을 한 창에 — 팝업을 세 번 띄우면 뒤로 갈수록 중요한데
   인식은 반대로 떨어진다(사용자 지시). 확인은 한 번뿐이다. */
.reaction { margin-bottom: 12px; }
.reaction__title { font: 400 21px var(--font-title); color: var(--ink); }
.reaction__body { font: 500 13.5px/1.6 var(--font-body); color: var(--text); margin-top: 3px; }

.learned {
  margin-top: 14px; text-align: left;
  background: var(--note); border: 1.5px solid var(--amber);
  border-radius: 12px; padding: 11px 14px;
}
.learned__head { display: flex; align-items: center; gap: 8px; margin-bottom: 5px; }
.learned__term { font: 400 16px var(--font-title); color: var(--amber-text); }
/* 「신규 개념」과 「지난 DAY 개념의 재확인」을 색이 아니라 라벨로 구분한다(03 §26). */
.learned__review {
  font: 500 11px var(--font-mono); letter-spacing: 0.06em;
  color: var(--muted); background: #fff; border: 1.5px solid #ded7c6;
  border-radius: 999px; padding: 2px 8px;
}
.learned__lines { display: flex; flex-direction: column; gap: 3px;
  font: 500 13px/1.5 var(--font-body); color: var(--text); }

/* 업무 노트 — 배운 개념이 주인공. 용어를 크게, 설명은 아래로.
   예전엔 두 줄이 하드코딩돼 있어서 무엇을 배웠는지가 아예 반영되지 않았다. */
.terms { display: flex; flex-direction: column; gap: 9px; margin-top: 8px; }
.term {
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 12px;
  padding: 10px 13px;
}
.term__head { display: flex; align-items: center; gap: 8px; }
.term__name { font: 400 18px var(--font-title); color: var(--ink); }
.term__new {
  font: 400 10.5px var(--font-title); color: #fff;
  background: var(--danger); border-radius: 999px; padding: 2px 7px;
}
.term__lines { margin-top: 4px; display: flex; flex-direction: column; gap: 2px; }
.term__line { font: 500 12.5px/1.5 var(--font-body); color: var(--text); }
.term__line::before { content: '· '; color: var(--faint); }
.term--new { border-color: var(--amber); box-shadow: 0 0 0 3px rgba(240, 201, 59, 0.2); }
.notebook__empty { font: 500 13px var(--font-body); color: var(--muted); margin-top: 8px; }
.notebook__label b { color: var(--ink); font-family: var(--font-title); font-weight: 400; font-size: 14px; }

/* ── DAY 01 공장 지어보기 (드래그) ───────────────────────────────────────────
   02 §9 의 `초기 투자 / 준비 시간` 을 표로 읽히는 대신 직접 쓰게 한다. */
.drag { cursor: grab; touch-action: none; user-select: none; }
.drag:focus, .dz:focus { outline: none; }
.drag:focus-visible, .dz:focus-visible {
  outline: 4px solid rgba(255, 211, 56, .85);
  outline-offset: 3px;
}
.drag--armed { box-shadow: 0 0 0 5px rgba(255, 211, 56, .3); }
.drag--held { opacity: 0.35; }
.drag__ghost {
  position: fixed !important; z-index: 200; pointer-events: none; opacity: .96;
  transform: rotate(-3deg) scale(1.05);
  box-shadow: 0 22px 44px rgba(16, 22, 38, .35), 0 0 0 3px rgba(255, 211, 56, .9) !important;
  animation: none !important;
}
.dz { transition: box-shadow 0.12s ease, border-color 0.12s ease; }
.dz--open { border-color: var(--amber) !important; box-shadow: 0 0 0 4px rgba(240,201,59,.3); }
@media (prefers-reduced-motion: reduce) { .scell__dropcue { animation: none; } }

/* ══ DAY 04 — 글로벌 생산 경로 복원 (`PZ-D04-GLOBAL-01` · 06 §7) ═══════════ */

/* ── 물류 데스크 · 문서 트레이 (Phase A) ─────────────────────────────────── */
.dtrays {
  position: absolute;
  left: 340px; top: 142px; width: 900px;
  display: flex; gap: 16px; align-items: stretch;
}
.dtray {
  background: rgba(255, 253, 247, 0.96);
  border: 2px dashed #b9b1a0;
  border-radius: 16px;
  padding: 9px 12px 10px;
  box-shadow: var(--shadow-card);
}
.dtray--route { flex: 5; border-color: var(--team-buy); }
.dtray--ref { flex: 3; }
.dtray__head { display: flex; align-items: baseline; gap: 7px; }
.dtray__icon { font-size: 17px; }
.dtray__name { font: 400 17px var(--font-title); color: var(--ink); }
.dtray__cap { margin-left: auto; font: 500 12px var(--font-mono); color: var(--muted); }
.dtray__need { font: 500 12px var(--font-body); color: var(--muted); margin-top: 2px; }
/* 5칸이 세로로 늘어서면 트레이가 문서 더미를 덮는다 — 두 열로 접는다. */
.dtray__in { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 7px; }

.dchip {
  display: flex; align-items: center; gap: 7px;
  background: #fff; border: 1.5px solid var(--line);
  border-radius: 10px; padding: 4px 8px;
  animation: popIn 0.25s ease both;
}
.dchip__icon { font-size: 16px; flex: none; }
.dchip__body { min-width: 0; flex: 1; }
.dchip__title { font: 400 14px var(--font-title); color: var(--ink); }
/* 06 §7-4 Phase A #4 — 근거가 된 문장에 작은 밑줄이 남는다. */
.dchip__proof {
  font: 500 11px var(--font-body); color: var(--muted);
  text-decoration: underline; text-decoration-color: var(--ok);
  text-underline-offset: 2px;
}
.dchip__region {
  flex: none; font: 500 11px var(--font-mono); color: var(--team-prod);
  background: #eef2fc; border-radius: 999px; padding: 2px 7px;
}
.dhole {
  border: 1.5px dashed #cfc7b4; border-radius: 10px;
  padding: 5px 8px; text-align: center;
  font: 500 11px var(--font-body); color: var(--faint);
}

.ddeck { position: absolute; left: 340px; top: 324px; width: 900px; }
.ddeck__head {
  display: flex; align-items: baseline;
  font: 500 12px var(--font-mono); color: var(--muted); letter-spacing: 0.06em;
}
.ddeck__count { margin-left: auto; }
.ddeck__cards {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-top: 6px;
}
.dcard {
  background: #fff; border: 2px solid var(--line); border-radius: 12px;
  padding: 5px 9px 6px;
  box-shadow: 0 3px 0 #e4dece;
  cursor: grab;
}
.dcard__top { display: flex; align-items: center; gap: 6px; }
.dcard__icon { font-size: 15px; }
.dcard__id { font: 500 10.5px var(--font-mono); color: var(--faint); }
.dcard__region {
  margin-left: auto; font: 500 10.5px var(--font-mono); color: var(--team-prod);
}
.dcard__title { font: 400 14px var(--font-title); color: var(--ink); margin-top: 1px; }
.dcard__from { font: 500 10px/1.3 var(--font-body); color: var(--muted); }
.dcard__proof { font: 500 11px/1.3 var(--font-body); color: var(--text); margin-top: 1px; }
.dcard__read {
  margin-top: 4px; width: 100%;
  background: #faf7ef; border: 1px solid var(--line); border-radius: 8px;
  padding: 2px 0; cursor: pointer;
  font: 500 10.5px var(--font-body); color: var(--muted);
}
.dcard__read:hover { background: #fff; color: var(--text); }
.dcard--miss { border-color: var(--danger); box-shadow: 0 3px 0 #e8b0a6; }
.dcard--miss .dcard__proof { color: var(--danger-dark); }

/* 문서 더미(2행) 아래 — 되돌아온 카드는 빨간 테두리로 함께 표시된다. */
.dmiss { bottom: auto; top: 594px; }

/* ── 회의실 · 세계지도 (Phase C) ─────────────────────────────────────────── */
.wmap {
  position: absolute;
  left: 340px; top: 142px; width: 900px;
  background: #1b2338;
  border-radius: 18px;
  padding: 10px 14px 12px;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.3);
}
.wmap__head {
  display: flex; align-items: baseline;
  font: 400 14px var(--font-title); color: #cfd8ee;
}
.wmap__left { margin-left: auto; font: 500 12px var(--font-mono); color: #8fa0c9; }
.wmap__globe {
  position: relative; height: 168px; margin-top: 6px;
  background: #131c33; border-radius: 12px; overflow: hidden;
}
/* 실제 국가가 아니라 **추상 대륙**이다 — 지역은 전부 가상 명칭이다(06 §7-3 · 04 §2). */
.wland { position: absolute; background: #2a3450; opacity: 0.85; }
.wland--1 { left: 6%; top: 18%; width: 26%; height: 54%; border-radius: 46% 54% 38% 62% / 50% 42% 58% 50%; }
.wland--2 { left: 34%; top: 10%; width: 30%; height: 62%; border-radius: 58% 42% 56% 44% / 44% 56% 44% 56%; }
.wland--3 { left: 66%; top: 20%; width: 28%; height: 62%; border-radius: 42% 58% 46% 54% / 56% 44% 60% 40%; }

.wpin {
  position: absolute; transform: translate(-50%, -50%);
  min-width: 74px; text-align: center;
  background: rgba(255, 253, 247, 0.1);
  border: 1.5px dashed #6d7ca6; border-radius: 10px;
  padding: 3px 6px 4px;
  cursor: pointer;
}
.wpin__dot {
  width: 20px; height: 20px; margin: 0 auto;
  border-radius: 50%; background: #3d4d78; color: #cfd8ee;
  font: 500 12px var(--font-mono); line-height: 20px;
}
.wpin__name { font: 500 11px var(--font-mono); color: #9aa7c7; margin-top: 2px; }
.wpin__box { font: 400 12px var(--font-title); color: var(--volt); margin-top: 2px; }
.wpin__why { font: 500 10px/1.3 var(--font-body); color: #8ce8b4; margin-top: 1px; max-width: 104px; }
.wpin--on {
  border-style: solid; border-color: var(--ok);
  background: rgba(76, 175, 125, 0.18);
  animation: popInCenter 0.3s ease both;
}
.wpin--on .wpin__dot { background: var(--ok); color: #fff; }
/* MS-D04-ORIGIN-ASSUME — 답변이 빠뜨린 지역이 먼저 깜빡인다(문제 징후가 대사보다 먼저). */
.wpin--miss { animation: pinBlink 0.7s ease-in-out 4; }
@keyframes pinBlink {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232, 84, 63, 0); }
  50% { box-shadow: 0 0 0 6px rgba(232, 84, 63, 0.55); }
}
@media (prefers-reduced-motion: reduce) { .wpin--miss { animation: none; outline: 3px solid var(--danger); } }

.wmerge {
  display: flex; align-items: baseline; gap: 7px;
  animation: popIn 0.45s ease both;
}
.wmerge__arrow { color: #8fa0c9; }
.wmerge__box {
  font: 400 15px var(--font-title); color: var(--volt);
  background: rgba(255, 211, 56, 0.16);
  border: 1.5px solid var(--volt); border-radius: 999px; padding: 1px 11px;
}
.wmerge__note { font: 500 11.5px var(--font-body); color: #8fa0c9; }

.wmap__route {
  display: flex; align-items: baseline; gap: 8px; margin-top: 8px;
  font: 500 13px var(--font-body); color: #cfd8ee;
}
.wmap__routelabel { font: 500 11px var(--font-mono); color: #8fa0c9; }

/* ── 공정 타임라인 (Phase B) ─────────────────────────────────────────────── */
.tline {
  position: absolute;
  left: 340px; top: 404px; width: 900px;
  background: rgba(255, 253, 247, 0.94);
  border-radius: 16px; padding: 9px 14px 12px;
  box-shadow: var(--shadow-card);
}
.tline__head {
  display: flex; align-items: baseline;
  font: 400 15px var(--font-title); color: var(--ink);
}
.tline__need { margin-left: auto; font: 500 12px var(--font-mono); color: var(--amber-text); }
.tline__row { display: flex; align-items: stretch; gap: 4px; margin-top: 7px; }
.tslot {
  flex: 1; min-width: 0;
  border: 2px dashed #cfc7b4; border-radius: 12px;
  padding: 5px 7px 7px;
  background: #fffdf7;
  position: relative;
}
.tslot__no {
  position: absolute; left: 6px; top: 4px;
  font: 500 10px var(--font-mono); color: var(--faint);
}
.tslot__empty { text-align: center; padding-top: 10px; }
.tslot__need { font: 500 10.5px var(--font-body); color: var(--amber-text); min-height: 15px; }
.tslot__cue { font: 500 11px var(--font-body); color: var(--faint); margin-top: 2px; }
.tslot--open { border-color: var(--amber); background: #fffbec; }
.tslot--filled { border-style: solid; border-color: var(--team-prod); }
.tslot--mapped { border-color: var(--ok); background: #f2faf5; }

/* ⚠ `popInCenterX` 는 가운데 정렬된 요소 전용이다 — 흐름 안의 상자에 쓰면
   transform 이 translateX(-50%) 로 덮여 슬롯 왼쪽으로 튀어나간다(한 번 겪음). */
.tbox {
  text-align: center; margin-top: 6px; cursor: grab;
  animation: popIn 0.25s ease both;
}
.tbox__icon { display: block; font-size: 17px; line-height: 1.1; }
.tbox__name { display: block; font: 400 13.5px var(--font-title); color: var(--ink); }
.tbox__at { display: block; font: 500 10.5px var(--font-mono); color: var(--muted); margin-top: 1px; }

/* ── 단계 상자 더미 (Phase B 드래그 소스) ────────────────────────────────── */
.sdeck { position: absolute; left: 340px; top: 586px; width: 900px; }
.sdeck__head { font: 500 12px var(--font-mono); color: var(--muted); letter-spacing: 0.06em; }
.sdeck__cards { display: flex; gap: 8px; margin-top: 5px; }
.sbox {
  flex: 1; min-width: 0;
  background: #fff; border: 2px solid var(--team-meet); border-radius: 12px;
  padding: 6px 9px 7px;
  box-shadow: 0 3px 0 #ddd3f0;
  cursor: grab;
}
.sbox__head { display: flex; align-items: center; gap: 5px; }
.sbox__icon { font-size: 15px; }
.sbox__name { font: 400 14px var(--font-title); color: var(--ink); }
/* 순서의 근거는 암기가 아니라 커넥터 일치다 — 두 줄이 늘 같이 보인다. */
.sbox__conn { display: flex; flex-direction: column; gap: 1px; margin-top: 3px; }
.sbox__in { font: 500 10.5px var(--font-body); color: var(--amber-text); }
.sbox__out { font: 500 10.5px var(--font-body); color: var(--ok-dark); }
.sbox__read {
  margin-top: 5px; width: 100%;
  background: #faf7ef; border: 1px solid var(--line); border-radius: 8px;
  padding: 2px 0; cursor: pointer;
  font: 500 10.5px var(--font-body); color: var(--muted);
}
.sbox__read:hover { background: #fff; color: var(--text); }

/* ── 고객 답변 카드 (Phase D — 경로를 다 이은 뒤에만 열린다) ─────────────── */
/* 답변 Phase 에서는 타임라인이 내려가고 그 자리를 쓴다 — 근거는 지도의 경로다. */
.answers { position: absolute; left: 340px; top: 404px; width: 900px; }

/* 두 Phase 의 피드백이 같은 자리를 쓴다 — 주 피드백은 한 곳이다(UX 계약 2번). */
.gmiss { bottom: auto; top: 524px; }
.gmiss--answer { flex-wrap: wrap; max-width: 700px; }
.gmiss__why { font: 500 12.5px var(--font-body); color: var(--muted); margin-top: 2px; }
.gmiss__retry { font: 400 14px var(--font-title); padding: 6px 14px; border: 1.5px solid var(--line); }
.gdone { width: 700px; }

/* ── 좌측 레일 · 확인한 생산 문서 (Phase C 의 근거) ──────────────────────── */
.dstrip {
  background: rgba(255, 253, 247, 0.94);
  border-radius: 14px; padding: 10px 13px 11px;
  box-shadow: 0 4px 12px rgba(42, 59, 102, 0.15);
}
.dstrip__head { font: 400 14px var(--font-title); color: var(--ink); }
.dstrip__note {
  font: 500 11px var(--font-body); color: var(--muted);
  margin-top: 6px; padding-top: 5px; border-top: 1.5px dashed var(--line);
}
.drow {
  display: flex; align-items: center; gap: 6px; margin-top: 4px;
  font: 500 12.5px var(--font-body); color: var(--text);
}
.drow__icon { flex: none; }
.drow__stage { flex: 1; min-width: 0; }
.drow__region { font: 500 11px var(--font-mono); color: var(--team-prod); }
.drow--pulse { animation: rowPulse 0.6s ease-in-out 3; border-radius: 6px; }
@keyframes rowPulse {
  0%, 100% { background: transparent; }
  50% { background: rgba(232, 84, 63, 0.18); }
}
@media (prefers-reduced-motion: reduce) { .drow--pulse { animation: none; background: rgba(232, 84, 63, 0.18); } }

/* ══ DAY 02 — 업무 확인판 · 무리 보드 (`PZ-D02-ROLE-01` · 06 §5) ═══════════
   ⚠ 역할 이름은 화면 어디에도 미리 없다. 이름표는 Phase C 에서 처음 열린다.
   ⚠ 확인판의 램프 셋은 **순서가 아니다** — 화살표를 쓰지 않는다(공정 순서는 D3 것). */

.scanner {
  position: absolute;
  left: 340px; top: 142px; width: 900px;
  background: rgba(255, 253, 247, 0.96);
  border: 2px solid var(--line); border-radius: 16px;
  padding: 10px 16px 14px;
  box-shadow: var(--shadow-card);
}
.scanner__head {
  display: flex; align-items: baseline;
  font: 400 16px var(--font-title); color: var(--ink);
}
.scanner__count { margin-left: auto; font: 500 12px var(--font-mono); color: var(--muted); }
.scanner__row { display: flex; gap: 14px; margin-top: 8px; align-items: stretch; }

.scanner__slot {
  flex: 1; min-width: 0; min-height: 122px;
  border: 2px dashed #b9b1a0; border-radius: 14px;
  background: #fffdf7; padding: 9px 12px 11px;
}
.scanner__slot--on { border-style: solid; border-color: var(--team-buy); }
.scanner__empty { text-align: center; padding-top: 30px; }
.scanner__cue { font: 400 16px var(--font-title); color: var(--faint); }
.scanner__hint { font: 500 11.5px var(--font-body); color: var(--faint); margin-top: 3px; }
.scanner__name { font: 400 18px var(--font-title); color: var(--ink); }
.scanner__loghead {
  font: 500 10.5px var(--font-mono); color: var(--muted);
  letter-spacing: 0.08em; margin: 6px 0 3px;
}
/* 업무 기록 한 줄 — `kind`(위탁·수령·관리)가 붙은 줄은 회색으로 지나간다. */
.slog {
  display: flex; align-items: center; gap: 7px;
  border-radius: 8px; padding: 3px 8px;
  font: 500 12.5px var(--font-body); color: var(--text);
}
.slog__icon { width: 18px; text-align: center; }
.slog__text { flex: 1; min-width: 0; word-break: keep-all; }
.slog__kind {
  font: 500 10px var(--font-mono); color: var(--muted);
  background: #efeadd; border-radius: 999px; padding: 1px 7px;
}
.slog__on { font: 500 10px var(--font-mono); color: var(--ok-dark); }
.slog--dim { color: var(--faint); }
.slog--lit { background: #f2faf5; color: var(--ok-dark); }
.slog--miss { animation: logPulse 0.55s ease 3; }
@keyframes logPulse {
  0%, 100% { background: transparent; }
  50% { background: rgba(232, 84, 63, 0.2); }
}
@media (prefers-reduced-motion: reduce) { .slog--miss { animation: none; background: rgba(232, 84, 63, 0.2); } }

.lamps { flex: none; width: 320px; }
.lamps__head { font: 500 11.5px var(--font-body); color: var(--muted); text-align: center; }
.lamps__row { display: flex; gap: 8px; margin-top: 6px; }
.lamp {
  flex: 1; text-align: center; cursor: pointer;
  background: #f2efe6; border: 2px solid var(--line); border-radius: 14px;
  padding: 12px 6px 10px;
}
.lamp__bulb {
  width: 42px; height: 42px; margin: 0 auto;
  border-radius: 50%; background: #ddd7c7;
  font-size: 21px; line-height: 42px;
  filter: grayscale(1); opacity: 0.55;
}
.lamp__name { font: 400 13.5px var(--font-title); color: var(--muted); margin-top: 5px; }
.lamp__aux { font: 500 10px var(--font-mono); color: #6B4FA9; margin-top: 2px; }
.lamp:hover { border-color: var(--amber); }
.lamp--on { background: #fffbe8; border-color: var(--volt-dark); }
.lamp--on .lamp__bulb {
  background: var(--volt); filter: none; opacity: 1;
  box-shadow: 0 0 0 6px rgba(255, 211, 56, 0.28);
}
.lamp--on .lamp__name { color: var(--ink); }
/* 안 켜지는 램프는 **켜지지 않는 것 자체가 피드백**이다 — 붉은 화면을 쓰지 않는다. */
.lamp--miss { animation: lampShake 0.4s ease 2; }
@keyframes lampShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
@media (prefers-reduced-motion: reduce) { .lamp--miss { animation: none; } }

/* 명함 더미 — Phase A 는 이름만, Phase B 는 불빛 배지가 새겨져 있다. */
.nbox {
  position: absolute;
  left: 340px; bottom: 84px; width: 900px;
}
.nbox__head {
  display: flex; align-items: baseline; gap: 10px;
  font: 500 12px var(--font-mono); color: var(--muted); letter-spacing: 0.06em;
}
.nbox__hint { font: 500 11.5px var(--font-body); letter-spacing: 0; }
.nbox__cards { display: flex; gap: 8px; margin-top: 6px; flex-wrap: wrap; }

/* ── 명함 더미 — 포커 덱처럼 쌓고 맨 위 한 장만 집는다 (사용자 지시) ─────── */
.ndeck { display: flex; flex-direction: column; align-items: center; margin-top: 8px; }
.ndeck__stack { position: relative; width: 248px; height: 142px; }
.ndeck__card {
  position: absolute; left: 0; top: 0;
  /* 뒤로 갈수록 살짝 밀리고 기운다 — 아래 장이 비죽 보여야 「더미」로 읽힌다. */
  transform: translate(calc(var(--i) * 5px), calc(var(--i) * -4px)) rotate(calc(var(--i) * -1.4deg));
  transform-origin: 50% 100%;
  transition: transform 0.24s ease;
  z-index: calc(20 - var(--i));
}
/* 맨 위 한 장만 집힌다. 아래 장은 입력을 받지 않는다. */
.ndeck__card:not([style*="--i: 0"]) { pointer-events: none; }
.ndeck__count {
  margin-top: 9px;
  font: 500 11.5px var(--font-mono); color: var(--muted);
}

/* 진짜 명함처럼 — 실제 명함 비율(91:55)에 로고 마크·구분선·번호. */
.ncard {
  width: 248px; height: 142px; box-sizing: border-box;
  display: flex; flex-direction: column;
  background: linear-gradient(160deg, #fff 0%, #fbf8f1 100%);
  border: 1px solid #ded7c6; border-radius: 10px;
  padding: 14px 16px 12px;
  box-shadow: 0 6px 14px rgba(90, 75, 50, 0.22), 0 1px 0 #fff inset;
  cursor: grab;
}
.ncard__top { display: flex; align-items: center; gap: 11px; }
.ncard__mark {
  flex: none; width: 38px; height: 38px; border-radius: 9px;
  font: 400 19px var(--font-title); line-height: 38px; text-align: center;
  color: #fff;
}
.ncard--blue .ncard__mark { background: var(--team-prod); }
.ncard--purple .ncard__mark { background: var(--team-meet); }
.ncard--green .ncard__mark { background: var(--team-buy); }
.ncard--amber .ncard__mark { background: var(--team-fin); }
.ncard__name { font: 400 18px var(--font-title); color: var(--ink); word-break: keep-all; }
.ncard__sub {
  font: 500 10px var(--font-mono); color: var(--faint);
  letter-spacing: 0.14em; margin-top: 1px;
}
.ncard__rule { height: 1px; background: #e4dece; margin: auto 0 0; }
.ncard__foot {
  display: flex; align-items: baseline; margin-top: 8px;
  font: 500 10.5px var(--font-mono); color: var(--muted);
}
.ncard__id { margin-left: auto; color: var(--faint); }
/* 확인이 끝난 명함에는 불빛 도장이 찍힌다. */
.ncard--scanned { border-color: var(--team-buy); }
.lbadge--stamp {
  position: absolute; right: 14px; top: 46px;
  gap: 2px; margin: 0;
  transform: rotate(-7deg);
}
.lbadge--stamp .lbadge__dot { width: 18px; height: 18px; font-size: 10px; line-height: 18px; }
/* 드래그 유령은 스택 변형을 물려받지 않는다 — 살짝 기운 한 장으로만 보인다. */
.drag__ghost.ndeck__card { transform: rotate(-3deg); }

/* 불빛 배지 — 확인이 끝난 명함에 새겨진다. Phase B 의 유일한 판정 근거다. */
.lbadge { display: flex; justify-content: center; gap: 3px; margin-top: 5px; }
.lbadge__dot {
  width: 20px; height: 20px; border-radius: 6px;
  background: #efeadd; color: var(--faint);
  font-size: 11px; line-height: 20px;
}
.lbadge__dot--on { background: var(--volt); color: var(--ink); }

/* 무리 보드 — 이름 없는 빈 칸 네 개. 첫 장이 그 칸의 불빛을 정한다. */
/* 확인 중에는 확인판 아래, 다 확인하면 위로 올라온다(확인판이 사라진 자리). */
.cgroups {
  position: absolute;
  left: 340px; top: 348px; width: 900px;
  transition: top 0.3s ease;
}
.cgroups--lift { top: 150px; }
.cgroups__head {
  display: flex; align-items: baseline;
  font: 400 16px var(--font-title); color: var(--ink);
}
.cgroups__count { margin-left: auto; font: 400 15px var(--font-title); color: var(--amber-text); }
.cgroups__row { display: flex; gap: 10px; margin-top: 7px; align-items: stretch; }
.cgroup {
  flex: 1; min-width: 0; min-height: 126px;
  border: 2px dashed #b9b1a0; border-radius: 14px;
  background: rgba(255, 253, 247, 0.94);
  padding: 9px 10px 11px;
  box-shadow: var(--shadow-card);
}
.cgroup--set { border-style: solid; border-color: var(--team-buy); }
.cgroup--named { background: #fffdf7; border-color: var(--volt-dark); }
.cgroup--miss { animation: lampShake 0.4s ease 2; border-color: var(--danger); }
.cgroup__head { text-align: center; }
.cgroup__lamps { display: flex; justify-content: center; gap: 4px; }
.cdot {
  width: 24px; height: 24px; border-radius: 7px;
  background: #efeadd; color: var(--faint);
  font-size: 13px; line-height: 24px; text-align: center;
}
.cdot--on { background: var(--volt); color: var(--ink); }
.cgroup__name { font: 400 17px var(--font-title); color: var(--ink); min-height: 22px; margin-top: 3px; }
.cgroup__new { font: 500 11px/1.4 var(--font-body); color: var(--faint); text-align: center; margin-top: 8px; }
.cgroup__in { display: flex; flex-direction: column; gap: 4px; margin-top: 7px; }
.cchip {
  background: #fff; border: 1.5px solid var(--line); border-radius: 9px;
  padding: 4px 8px; text-align: center;
  font: 500 12.5px var(--font-body); color: var(--text);
  animation: popIn 0.25s ease both;
}
.cgroup__cue {
  margin-top: 6px; text-align: center;
  font: 500 11px var(--font-body); color: var(--faint);
}
.cgroup__aux {
  margin-top: 6px; border: 1.5px dashed #8b6fc9; border-radius: 9px;
  padding: 3px 7px; text-align: center;
  font: 500 11px var(--font-body); color: #6B4FA9;
  animation: popIn 0.3s ease both;
}

/* 역할 이름표 — Phase C 에서 처음 열린다. */
.rtag {
  flex: 1 1 0; min-width: 0;
  background: #fff; border: 2px solid var(--line); border-radius: 12px;
  padding: 8px 11px 9px;
  box-shadow: 0 3px 0 #e4dece;
  cursor: grab;
}
.rtag__name { font: 400 17px var(--font-title); color: var(--ink); }
.rtag__need { font: 500 11px/1.35 var(--font-body); color: var(--muted); word-break: keep-all; }
.rtag--meet { border-color: #b9a8e0; box-shadow: 0 3px 0 #ddd3f0; }
.rtag--blue { border-color: #a8bde0; box-shadow: 0 3px 0 #cfdcf2; }
.rtag--purple { border-color: #c9a8e0; box-shadow: 0 3px 0 #e5d3f2; }
.rtag--green { border-color: #9fd4b8; box-shadow: 0 3px 0 #cfe9dc; }
.rtag--aux { border-color: #8b6fc9; box-shadow: 0 3px 0 #ddd3f0; flex: 0 1 420px; }

/* 네 무리를 다 만든 순간 — **이름보다 먼저** 「네 가지」가 확정된다. */
/* 이름표보다 **먼저** 뜬다 — 확인해야 이름표가 열린다(순서가 오늘의 핵심). */
.sorted {
  position: absolute;
  left: var(--work-center); top: 392px; transform: translateX(-50%);
  width: 640px; text-align: center;
  background: rgba(255, 253, 247, 0.97);
  border: 2px solid var(--volt-dark); border-radius: 16px;
  padding: 10px 20px 13px;
  box-shadow: 0 12px 28px rgba(30, 20, 60, 0.24);
  animation: popInCenterX 0.4s ease both;
}
.sorted__tag {
  display: inline-block; background: var(--volt); color: var(--ink);
  border-radius: 999px; padding: 1px 11px;
  font: 500 11px var(--font-mono);
}
.sorted__title { font: 400 21px var(--font-title); color: var(--ink); margin-top: 5px; }
.sorted__body { font: 500 13.5px/1.55 var(--font-body); color: var(--text); white-space: pre-line; }
.sorted__ok { margin-top: 10px; font: 400 17px var(--font-title); padding: 9px 10px; text-align: center; }

.rmiss { bottom: auto; top: 566px; }

/* ══ DAY 05 — 뉴스와 업무 조건 연결 (`PZ-D05-NEWS-01` · 06 §8) ═════════════
   ⚠ 조건을 세 칸으로 나누게 하지 않는다. 계약 파일 한 장에 **자물쇠와 빈칸**을 두고
   뉴스를 끌면 빈칸만 반응한다 — 「판단 불가」가 라벨이 아니라 자물쇠다(06 §8-3). */

/* 로비 TV 의 전망 라벨 — 썸네일(관련 산업)과 △ 라벨이 한 칩에 붙는다. */
.tv__label {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 10px 0 0;
  background: rgba(139, 111, 201, 0.18);
  border: 1.5px solid #8b6fc9;
  border-radius: 999px; padding: 4px 13px;
  cursor: pointer;
}
.tv__thumb { font-size: 17px; }
.tv__topic { font: 400 14px var(--font-title); color: #d8ccf5; }
.tv__tag { font: 500 12px var(--font-mono); color: #b9a8e0; }

/* ── 아침 뉴스 카드 — 하루 종일 고정, Phase B 에서 드래그 소스가 된다 ────── */
.newscard {
  position: absolute;
  left: 340px; top: 144px; width: 900px;
  display: flex; align-items: center; gap: 12px;
  background: #1b2338;
  border-radius: 16px;
  padding: 10px 16px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.28);
}
.newscard--grab { cursor: grab; border: 2px solid var(--volt); padding: 8px 14px; }
.newscard__thumb {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  background: #2a3450; font-size: 24px; line-height: 44px; text-align: center;
}
.newscard__body { flex: 1; min-width: 0; }
.newscard__top { display: flex; align-items: baseline; gap: 8px; }
.newscard__topic { font: 500 12px var(--font-mono); color: #8fa0c9; }
.newscard__tag {
  font: 500 11.5px var(--font-mono); color: #d8ccf5;
  background: rgba(139, 111, 201, 0.3); border-radius: 999px; padding: 1px 8px;
}
.newscard__title { font: 400 17px var(--font-title); color: #fff; margin-top: 1px; }
.newscard__key { font: 500 11.5px var(--font-body); color: #9aa7c7; margin-top: 1px; }
.newscard__cue {
  flex: none; font: 500 11.5px var(--font-body); color: var(--volt);
  background: rgba(255, 211, 56, 0.14); border-radius: 8px; padding: 5px 10px;
}

/* ── Phase B · 계약 파일 — 자물쇠와 빈칸 ─────────────────────────────────── */
.deal {
  position: absolute;
  left: 340px; top: 250px; width: 900px;
  background: rgba(255, 253, 247, 0.96);
  border: 2px solid var(--line); border-radius: 16px;
  padding: 11px 18px 13px;
  box-shadow: var(--shadow-card);
}
.deal__head {
  display: flex; align-items: baseline; gap: 10px;
  font: 400 16px var(--font-title); color: var(--ink);
}
.deal__sub { font: 500 11.5px var(--font-body); color: var(--muted); }
.deal__count { margin-left: auto; font: 400 15px var(--font-title); color: var(--amber-text); }
.deal__done { display: flex; align-items: center; gap: 10px; margin-top: 9px; }
.deal__found { font: 500 12.5px var(--font-body); color: var(--text); }
.deal__next { margin-left: auto; font: 400 15px var(--font-title); padding: 6px 14px; }
.deal__badge {
  flex: none;
  font: 500 12px var(--font-body); color: var(--ok-dark);
  background: #f2faf5; border: 1.5px solid var(--ok); border-radius: 999px; padding: 2px 10px;
  animation: popIn 0.3s ease both;
}

.drow5 {
  display: flex; align-items: center; gap: 9px; margin-top: 5px;
  background: #fff; border: 2px solid var(--line); border-radius: 12px;
  padding: 6px 12px;
}
.drow5__lock { flex: none; font-size: 15px; }
.drow5__icon { flex: none; font-size: 15px; }
.drow5__name { flex: none; width: 150px; font: 400 15px var(--font-title); color: var(--ink); }
.drow5__state { flex: 1; min-width: 0; font: 500 12.5px var(--font-body); color: var(--muted); }
.drow5__read {
  flex: none; border: 1px solid var(--line); border-radius: 7px; background: #faf7ef;
  padding: 2px 7px; cursor: pointer; font-size: 11px; color: var(--muted);
}
.drow5__read:hover { background: #fff; }
.drow5__slot {
  flex: none; font: 500 11.5px var(--font-body); color: var(--faint);
  border: 1.5px dashed #cfc7b4; border-radius: 8px; padding: 4px 10px;
}
/* 아직 안 정해진 칸만 드래그 중에 빛난다 — 「판단 불가」가 라벨이 아니라 자물쇠다. */
.drow5--open { border-style: dashed; border-color: #b9b1a0; }
.drow5--lock { background: #f4f1e8; }
.drow5--lock .drow5__name, .drow5--lock .drow5__state { color: var(--faint); }
.drow5--lock .drow5__slot { border-style: solid; border-color: #e0dacb; }
.drow5--board { background: #f0eee6; border-style: dotted; margin-top: 10px; }
.drow5--on { border-style: solid; border-color: var(--ok); background: #f2faf5; }
.drow5--on .drow5__slot {
  color: var(--ok-dark); border-style: solid; border-color: var(--ok); background: #fff;
}
/* 이미 정해진 칸에 붙이려 하면 자물쇠가 흔들린다. 감점도 붉은 화면도 없다(04 §5-3). */
.drow5--miss { animation: lockShake 0.45s ease 2; border-color: var(--danger); }
@keyframes lockShake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}
@media (prefers-reduced-motion: reduce) { .drow5--miss { animation: none; } }

/* ── Phase C · 보고서 ───────────────────────────────────────────────────── */
.report {
  position: absolute;
  left: 340px; top: 250px; width: 900px;
  background: rgba(255, 253, 247, 0.96);
  border: 2px solid var(--line); border-radius: 16px;
  padding: 11px 18px 14px;
  box-shadow: var(--shadow-card);
}
.report__head {
  display: flex; align-items: baseline; gap: 10px;
  font: 400 16px var(--font-title); color: var(--ink);
}
/* 문제 징후가 대사보다 먼저다 — 결론 카드가 「보류」로 뒤집힌다(05 §5-1 D5). */
.report__held {
  font: 400 14px var(--font-title); color: var(--danger-dark);
  border: 2px solid var(--danger); border-radius: 6px;
  padding: 0 8px; transform: rotate(-6deg);
}
.report__evidence {
  display: flex; align-items: baseline; gap: 10px; margin-top: 7px;
  background: #f6f2e8; border-radius: 10px; padding: 6px 11px;
}
.report__label { flex: none; font: 500 11px var(--font-mono); color: var(--muted); }
.report__ev-list { display: flex; gap: 10px; flex-wrap: wrap; }
.report__ev { font: 500 12.5px var(--font-body); color: var(--text); }
.report__ev--empty { color: var(--danger-dark); }
.report__stem { font: 400 17px var(--font-title); color: var(--ink); margin-top: 10px; }
.report__verbs { display: flex; gap: 9px; margin-top: 6px; }
.verb {
  flex: 1; display: flex; gap: 8px; align-items: flex-start;
  background: #fff; border: 2px solid var(--line); border-radius: 12px;
  padding: 9px 11px 10px;
  cursor: pointer;
}
.verb:hover { border-color: var(--amber); }
.verb--picked { border-color: var(--volt-dark); box-shadow: 0 0 0 4px rgba(255, 211, 56, 0.3); }
.verb__no {
  flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--panel); color: var(--muted);
  font: 500 12px var(--font-mono); line-height: 20px; text-align: center;
}
.verb--picked .verb__no { background: var(--volt); color: var(--ink); }
.verb__text { font: 500 13px/1.5 var(--font-body); color: var(--text); }

/* 두 Phase 의 피드백이 같은 자리를 쓴다 — 주 피드백은 한 곳이다(UX 계약 2번).
   ⚠ 계약 파일 **아래**여야 한다. 위로 올리면 말풍선이 아래 줄을 덮어 그 줄에
   드롭이 안 된다(실제로 게시판 줄이 안 눌렸다). */
.smiss { bottom: auto; top: 600px; }
/* 보고서 교정만 세 줄이라 위로 올린다 — 아래 [보고서 제출] 과 겹치지 않게. */
.smiss--report { top: 484px; flex-wrap: wrap; max-width: 700px; }
.smiss__why { font: 500 12.5px var(--font-body); color: var(--muted); margin-top: 2px; }
.smiss__retry { font: 400 14px var(--font-title); padding: 6px 14px; border: 1.5px solid var(--line); }
.sdone { width: 700px; }

/* ── 「회사 상태」 원장 (Tier A) — 목업 §지표는 원장에서 되짚을 수 있다 ─────────
   HUD 지표 칩을 누르면 열린다. 지표마다 `시작값 → 내가 한 선택 → 지금 값`.
   · 줄 문구는 **선택의 이름 그대로** — 「공장 건설 투입」이지 「예산 감소」가 아니다
   · 검토 중 줄은 황토색 · 확정된 줄은 검정
   · 접은 방안의 줄은 지우지 않고 **취소선 + 「보류됨」** — 시도한 기록은 남는다 */
.ledger {
  width: 940px; max-height: 600px;
  padding: 18px 22px 16px;
  background: var(--cream);
  border: 2px solid var(--line);
  border-top: 6px solid #5b7ed9;
  border-radius: 6px 6px 20px 20px;
  display: flex; flex-direction: column;
  animation-duration: 0.28s;
}
.ledger__head {
  flex: none; display: flex; align-items: center; gap: 11px;
  padding-bottom: 13px; border-bottom: 2px solid #f0ebdd;
}
.ledger__id { flex: 1; min-width: 0; }
.ledger__kicker {
  font: 500 10px var(--font-mono); color: var(--faint); letter-spacing: 0.14em;
}
.ledger__title { font: 400 21px var(--font-title); color: var(--ink); }
.ledger__close { display: none; }
.ledger__cards { flex: 1; display: flex; gap: 12px; margin-top: 14px; min-height: 0; }
.lcard {
  flex: 1; min-width: 0;
  background: #fff; border: 1.5px solid var(--line); border-radius: 15px;
  padding: 14px 15px 15px;
  display: flex; flex-direction: column;
  overflow: auto;
}
.lcard__head { display: flex; align-items: center; gap: 7px; }
.lcard__icon { font-size: 15px; line-height: 1; }
.lcard__name { font: 500 12.5px var(--font-body); color: var(--muted); }
.lcard__now { display: flex; align-items: baseline; gap: 8px; margin-top: 5px; }
.lcard__num { font: 400 32px var(--font-title); color: var(--ink); line-height: 1.1; }
.lcard__delta { font: 500 12px var(--font-body); }
.lcard__desc { font: 500 12px/1.6 var(--font-body); color: var(--muted); margin-top: 7px; }
.lcard__bar {
  height: 3px; border-radius: 2px; background: #f0ebdd;
  margin-top: 8px; overflow: hidden;
}
.lcard__bar i { display: block; height: 100%; transition: width 0.5s ease; }
.lcard__start {
  display: flex; justify-content: space-between; align-items: baseline;
  margin-top: 12px; padding-bottom: 7px; border-bottom: 1px dashed var(--line);
  font: 500 11px var(--font-body); color: var(--faint);
}
.lcard__start b { font: 500 11.5px var(--font-mono); color: var(--muted); }
.lcard__rows { display: flex; flex-direction: column; gap: 7px; margin-top: 10px; }
.lrow { display: flex; align-items: baseline; gap: 8px; }
.lrow__t { flex: 1; font: 500 12px/1.5 var(--font-body); }
.lrow__v { flex: none; font: 500 12.5px var(--font-mono); white-space: nowrap; }
/* 시작값 줄이 없으면(움직인 값이 없거나 보류만 있으면) 줄들이 스스로 구분선을 갖는다. */
.lcard:not(:has(.lcard__start)) .lcard__rows:not(:empty) {
  margin-top: 12px; padding-top: 10px; border-top: 1px dashed var(--line);
}
.ledger__foot {
  flex: none; text-align: center; margin-top: 12px;
  font: 500 11.5px var(--font-body); color: var(--faint);
}

/* ── TIER C — 실수 패널 「뭐가 문제였을까?」 ─────────────────────────────────────
   목업 「볼티 UI 창 규칙」 §TIER C · 「볼티 DAY1 PC 목업」 05 실수 패널.
   · 스크림 55% (`.overlay--judge`) — 작업대는 어두워지고 HUD 는 밝게 남는다
   · 「틀렸다」가 아니라 「이 구조가 조건을 넘었다」
   · 내가 만든 것은 지우지 않는다 — 뒤에 그대로 남는다
   ⚠ 위쪽 6px 붉은 띠가 이 창의 정체다. 다른 창과 헷갈리게 두지 말 것. */
/* ⚠ Tier C 도 **스크롤 금지**다 — 창이 프레임(800) 안에 들어와야 한다.
   반려 창은 「내가 낸 것」 상자를 하나 더 들기 때문에 시작을 위로 올린다. */
.overlay--mistake { align-items: flex-start; padding-top: 18px; }
.mistake {
  width: 650px; padding: 22px 26px;
  background: var(--cream);
  border-top: 6px solid var(--danger-dark);
  border-radius: 20px;
  box-shadow: 0 28px 64px rgba(0, 0, 0, 0.5);
  animation: cardIn 0.35s ease;
}
@keyframes cardIn {
  from { opacity: 0; transform: translateY(18px) scale(0.96); }
  to { opacity: 1; transform: none; }
}
.mistake__kicker { display: flex; align-items: center; gap: 9px; }
.mistake__world {
  background: #fbe4de; border-radius: 8px; padding: 4px 11px;
  font: 500 11.5px var(--font-body); color: var(--danger-dark);
}
.mistake__title { font: 400 29px/1.35 var(--font-title); color: var(--ink); margin-top: 11px; }
.mistake__body { font: 500 14px/1.6 var(--font-body); color: var(--muted); margin-top: 6px; }
/* 증거 두 상자 — 색 띠 머리 → 조건/현재/차이 한 줄. 같은 수치를 반복하지 않는다. */
.mistake__ev { display: flex; gap: 12px; margin-top: 16px; }
.mev {
  flex: 1; min-width: 0;
  background: #fff; border: 1.5px solid #f0c0b6; border-radius: 14px; overflow: hidden;
}
.mev__head {
  background: #fbe4de; border-bottom: 1px solid #f0c0b6;
  padding: 9px 15px; display: flex; align-items: center; gap: 8px;
}
.mev__icon { font-size: 14px; line-height: 1; }
.mev__title { font: 400 15px var(--font-title); color: #a83a22; }
.mev__body { padding: 13px 14px 14px; }
.mev__compare {
  display: grid; grid-template-columns: 1fr auto 1fr auto;
  align-items: center; gap: 8px;
}
.mev__metric { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mev__label { font: 600 10.5px var(--font-body); color: var(--faint); }
.mev__value { font: 400 20px var(--font-title); color: var(--text); white-space: nowrap; }
.mev__metric--current .mev__value { color: var(--danger-dark); }
.mev__arrow { color: var(--faint); font-size: 16px; }
.mev__delta {
  justify-self: end; padding: 4px 7px; border-radius: 999px;
  background: #fbe4de; color: var(--danger-dark);
  font: 700 11px var(--font-body); white-space: nowrap;
}
/* 「내가 만든 것은 지우지 않는다」 — Tier C 의 필수 한 줄. */
.mistake__keep {
  margin-top: 10px; border-top: 1px dashed #dfd4b5;
  padding: 10px 2px 0; font: 600 12.5px/1.5 var(--font-body); color: #967814;
}
.mistake__cta {
  margin-top: 16px; height: 56px;
  display: flex; align-items: center; justify-content: center;
  background: var(--volt); border-radius: 14px;
  font: 400 20px var(--font-title); color: var(--ink);
  box-shadow: 0 5px 0 var(--volt-dark);
  cursor: pointer;
}
.mistake__cta:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--volt-dark); }
/* ⚠ 커서가 남아 있는 동안은 CTA 를 누를 수 없다 — 첫 노출 스킵 금지. */
.mistake__cta--wait {
  background: #e7e2d4; color: #b5ad98;
  box-shadow: none; pointer-events: none;
}
/* 판정 창 안의 NPC 한 줄 — 이름·아바타는 즉시, 문장만 흐른다. */
.npcline {
  margin-top: 12px;
  background: #fdfbf5; border: 1.5px solid var(--line); border-radius: 14px;
  padding: 14px 16px;
}
.npcline__head { display: flex; align-items: center; gap: 9px; }
.npcline__avatar {
  width: 34px; height: 34px; flex: none; border-radius: 50%;
  overflow: hidden; font: 400 14px var(--font-title); color: #fff;
  display: flex; align-items: center; justify-content: center;
}
.npcline__name { font: 400 15px var(--font-title); }
.npcline__spacer { flex: 1; }
.npcline__replay {
  font: 500 11px var(--font-body); color: var(--faint); cursor: pointer;
}
.npcline__replay:hover { color: var(--muted); }
.npcline__text {
  font: 500 14px/1.7 var(--font-body); color: var(--text);
  margin-top: 7px; min-height: 24px;
}
/* 흐르는 동안 커서 — 「아직 말하는 중」이 CTA 잠금의 이유다. */
.npcline__text--on::after {
  content: ''; display: inline-block;
  width: 8px; height: 15px; margin-left: 2px; vertical-align: -2px;
  background: #8b6fc9;
  animation: caretBlink 0.9s steps(1) infinite;
}
@keyframes caretBlink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }

/* ── TIER B — 새 층 해금 · 역할 레벨업 독립 화면 ─────────────────────────────
   한 화면에는 하나의 성취만 크게 보여 준다. 권한 목록은 사원증에 자동 반영하고,
   종료 보상에서는 실제로 선택 가능해진 엘리베이터 층을 보여 준다. */
/* 「지금은 이것만」 — 스크림 84% 위에 가운데가 밝은 방사 그라데이션을 덮는다(목업).
   ⚠ 광선은 이 위에 얹히므로 **가장자리를 마스크로 지운다** — 화면을 가득 채우면
     네이비와 섞여 카키색으로 탁해진다(레벨업 연출에서 겪은 것과 같다). */
.promo__bg {
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(42, 59, 102, 0.38), rgba(16, 22, 38, 0.94)),
    rgba(16, 22, 38, 0.9);
}
/* ⚠ 창 자체는 **투명**하다. 목업에서 **해금은 크림색 카드**이고 **승급은 어두운 배경 위**
   글자다 — 둘을 같은 상자에 넣으면 승급 쪽 흰 글자가 크림 위에서 사라진다(겪었다). */
.promo {
  width: 560px; max-width: 1160px;
  background: none; border: none; box-shadow: none;
  padding: 0;
  text-align: center;
}
.promo--two { width: 1120px; }
.promo__cols { display: flex; gap: 32px; align-items: flex-start; justify-content: center; }
.promo__col { flex: 1; min-width: 0; text-align: center; }
/* 해금 — 크림색 카드. 무엇이 열렸고 무엇이 남았는지가 손에 잡히는 종이여야 한다. */
.promo__col--access {
  text-align: left;
  background: var(--cream);
  border-radius: 20px;
  padding: 22px 24px;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
  animation: cardIn 0.35s ease;
}
/* 승급 — 카드 없이 어두운 배경 위에. 「어느새 올라 있다」는 감각이 카드보다 크다. */
.promo__col--level { padding-top: 6px; }
.promo__ok {
  margin: 22px auto 0; max-width: 420px;
  height: 58px; display: flex; align-items: center; justify-content: center;
  background: var(--volt); border-radius: 15px;
  font: 400 21px var(--font-title); color: var(--ink);
  box-shadow: 0 5px 0 var(--volt-dark);
  cursor: pointer;
}
.promo__ok:active { transform: translateY(3px); box-shadow: 0 2px 0 var(--volt-dark); }

/* 새 층 해금 — 엘리베이터 층 표시판을 닮은 한 장의 공간 보상. */
.promo--floor { width: 650px; }
.floor-award__kicker {
  font: 500 13px var(--font-mono); color: #8be6b7; letter-spacing: .18em;
}
.floor-award__title {
  margin-top: 8px; font: 400 48px/1.18 var(--font-title); color: #fff;
  text-shadow: 0 8px 28px rgba(0, 0, 0, .5);
  animation: burstIn .5s ease-out both;
}
.floor-award__panel {
  width: 430px; margin: 25px auto 0; padding: 23px 28px 25px;
  box-sizing: border-box;
  display: grid; grid-template-columns: 1fr auto; grid-template-areas:
    'code icon' 'name icon' 'role role' 'state state';
  align-items: center; text-align: left;
  border: 2px solid rgba(255, 255, 255, .24); border-radius: 24px;
  background:
    linear-gradient(145deg, rgba(255,255,255,.12), rgba(255,255,255,.035)),
    #182239;
  box-shadow: inset 0 1px rgba(255,255,255,.18), 0 24px 60px rgba(0,0,0,.45);
  animation: popUp .45s .08s ease-out both;
}
.floor-award__code { grid-area: code; font: 400 86px/.9 var(--font-title); color: var(--volt); letter-spacing: -.04em; }
.floor-award__icon {
  grid-area: icon; width: 100px; height: 100px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 26px; background: rgba(255,255,255,.09); font-size: 52px;
}
.floor-award__name { grid-area: name; margin-top: 8px; font: 400 28px var(--font-title); color: #fff; }
.floor-award__role { grid-area: role; margin-top: 17px; font: 500 13px var(--font-body); color: #a8b4ce; }
.floor-award__state {
  grid-area: state; margin-top: 14px; padding-top: 14px;
  border-top: 1px solid rgba(255,255,255,.12);
  font: 500 12px var(--font-mono); color: #7bd4a8; letter-spacing: .14em;
}
.floor-award__access { margin-top: 15px; font: 500 14px var(--font-body); color: #c7d2e8; }

/* 레벨업 — 수치·역할 하나를 중심에 두는 독립 축하 화면. */
.promo--level { width: 650px; }
.level-award { display: flex; flex-direction: column; align-items: center; }
.promo--level .levelup__kicker {
  font: 400 18px var(--font-title); color: var(--volt); letter-spacing: .18em;
}
.level-award__badge {
  width: 224px; height: 224px; margin-top: 18px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: radial-gradient(circle at 38% 30%, #fff7c7 0, var(--volt) 36%, #e4aa15 100%);
  border: 9px solid rgba(255,255,255,.94);
  box-shadow: 0 0 0 9px rgba(255,211,56,.2), 0 24px 58px rgba(0,0,0,.48);
  animation: burstIn .58s ease-out both;
}
.level-award__small { font: 700 11px var(--font-mono); color: #725809; letter-spacing: .16em; }
.promo--level .levelup__to { margin-top: 3px; font: 400 82px/.95 var(--font-title); color: var(--ink); }
.promo--level .levelup__role { margin-top: 18px; font: 400 35px var(--font-title); color: #fff; }
.promo--level .levelup__from-role { margin-top: 4px; font: 500 13px var(--font-body); color: #a8b4ce; }
.promo--level .levelup__grade {
  margin-top: 15px; padding: 12px 16px; max-width: 500px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center; gap: 11px; flex-wrap: wrap;
  border: 1px solid rgba(255,255,255,.14); border-radius: 15px;
  background: rgba(255,255,255,.07);
}
.promo--level .levelup__grade-from,
.promo--level .levelup__grade-to { padding: 7px 11px; border-radius: 9px; font: 400 14px var(--font-title); }
.promo--level .levelup__grade-from { color: #847b68; background: #f7edd8; border: 2px dashed #cfc7b4; }
.promo--level .levelup__grade-to { color: var(--ink); background: var(--cream); border: 2px solid #f0c93b; }
.promo--level .levelup__grade-arrow { font: 400 17px var(--font-title); color: var(--volt); }
.promo--level .levelup__grade-note { flex-basis: 100%; font: 500 11.5px var(--font-body); color: #c7d2e8; }
.promo--level .levelup__ladder { width: 460px; display: flex; gap: 5px; margin: 17px 0 11px; }
.promo--level .ladder__dot { flex: 1; height: 10px; border-radius: 5px; background: rgba(255,255,255,.16); }
.promo--level .ladder__dot--done { background: var(--ok); }
.promo--level .ladder__dot--now { background: var(--volt); box-shadow: 0 0 0 3px rgba(255,211,56,.26); }
.promo--level .levelup__voice { font: 400 16px var(--font-title); color: #e8e4d8; }
.promo--floor .promo__ok, .promo--level .promo__ok { width: 420px; }

/* 반려 창 — Tier C 실수 패널과 같은 틀에 「내가 낸 것」 상자를 하나 더 든다.
   ⚠ 예전에는 이게 **화면(scene)** 이라 반려가 나면 견적·파이프라인이 통째로 사라졌다.
     Tier C 는 작업대를 지우지 않는다 — 지금은 그 화면 위에 뜬다. 되돌리지 말 것. */
.mistake--scold { width: 720px; }
.mistake--scold .scold__plan {
  font: 500 12.5px var(--font-body); color: var(--muted); margin-bottom: 8px;
}
.mistake--scold .scold__row {
  position: relative; display: flex; justify-content: space-between; align-items: baseline;
  font: 500 13px var(--font-body); padding: 4px 0;
}
.mistake--scold .scold__row b { font: 400 15px var(--font-title); }
.mistake--scold .scold__why {
  display: flex; flex-direction: column; gap: 5px; margin-top: 9px;
  font: 500 12.5px/1.55 var(--font-body); color: var(--text);
}
.npcline .scold__soft {
  margin-top: 6px; font: 500 12.5px var(--font-body); color: var(--faint);
}
/* 반려 창은 내용이 많다 — 여백을 한 단계 줄여 프레임 안에 넣는다. */
.mistake--scold .mistake__title { font-size: 26px; margin-top: 8px; }
.mistake--scold .mistake__ev { margin-top: 12px; }
.mistake--scold .mev__body { padding: 11px 14px 12px; }
.mistake--scold .npcline { margin-top: 11px; padding: 12px 14px; }
.mistake--scold .npcline__text { margin-top: 7px; min-height: 24px; }
.mistake--scold .mistake__keep { margin-top: 10px; padding: 10px 14px; }
.mistake--scold .mistake__cta { margin-top: 12px; height: 52px; }
/* ⚠ 「여기가 문제!」 배지는 줄 **바깥**(`left: 100%`)에 걸리는데, 증거 상자가
   `overflow: hidden` 이라 잘린다. 창 안에서는 줄 안쪽 오른쪽에 붙인다. */
.mistake--scold .scold__here {
  left: auto; right: 0; top: -14px; transform: none;
}
/* ⚠ 증거 상자가 **둘**인 오후 반려에서는 배지를 뗀다 — 오른쪽 「무엇이 조건을 넘었나」가
   이미 어긋난 것을 한 줄씩 짚고 있어서, 배지까지 붙으면 같은 말이 두 UI 에서 난다
   (UX 계약 2번). 조건이 하나뿐인 오전 반려에는 남는다. */
.mistake--scold:has(.mev + .mev) .scold__here { display: none; }
.mev--plan .mev__head { background: #f7f4ea; border-bottom-color: var(--line); }
.mev--plan { border-color: var(--line); }
.mev--plan .mev__title { color: var(--muted); }

/* 원장·노트·수첩은 **HUD 바로 아래**에 붙는다(목업 top 76 · 80) — 가운데 정렬이면 화면
   한복판에 떠서 지표 칩과 그 근거 사이의 시선이 멀어진다. */
.overlay--ledger, .overlay--note { align-items: flex-start; padding-top: 10px; }

/* ── 해금 카드 안쪽 (크림 종이) ─────────────────────────────────────────────── */
.promo__col--access .unlock__kicker {
  font: 500 11px var(--font-mono); color: var(--faint); letter-spacing: 0.14em;
}
.promo__col--access .unlock__title {
  font: 400 29px var(--font-title); color: var(--ink); margin-top: 6px;
}
.promo__col--access .unlock__body {
  font: 500 14px/1.7 var(--font-body); color: var(--text); margin-top: 11px;
  white-space: pre-line;
}
.promo__col--access .unlock__body b { color: var(--amber-text); }
/* 사수 쪽지 — 살짝 기울인 노란 종이(미션 카드의 메모와 같은 문법). */
.promo__col--access .unlock__mentor {
  margin-top: 14px; background: var(--sticky);
  border-radius: 4px 4px 13px 13px; padding: 12px 14px;
  font: 500 13px/1.6 var(--font-body); color: #a9861a;
  transform: rotate(-0.6deg);
  border: none;
}
/* 무엇이 실제로 남았는지 — 사슬 미리보기. 마지막 칸은 **점선 자리**다. */
.uchain {
  margin-top: 15px; display: flex; align-items: center; gap: 10px;
  background: #fdfbf5; border: 1.5px solid var(--line);
  border-radius: 14px; padding: 14px 16px;
}
.uchain__cell { flex: 1; border-radius: 11px; padding: 11px 8px; text-align: center; }
.uchain__icon { font-size: 22px; line-height: 1.1; }
.uchain__name { font: 400 14px var(--font-title); margin-top: 2px; }
.uchain__note { font: 500 10.5px var(--font-body); color: var(--muted); }
.uchain__cell--design { background: #eaf0fc; }
.uchain__cell--design .uchain__name { color: #3a5aa8; }
.uchain__cell--prod { background: #dff3ea; }
.uchain__cell--prod .uchain__name { color: var(--ok-dark); }
.uchain__cell--locked { border: 1.5px dashed #dcd5c4; }
.uchain__cell--locked .uchain__icon { opacity: 0.4; }
.uchain__cell--locked .uchain__name { color: var(--faint); }

/* ── 승급 칸 (어두운 배경 위) ───────────────────────────────────────────────── */
.promo__col--level .levelup__kicker {
  font: 400 14px var(--font-title); color: var(--volt); letter-spacing: 0.14em;
  background: none; border: none; padding: 0;
}
.promo__col--level .levelup__nums {
  display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 8px;
}
.promo__col--level .levelup__from { font: 400 42px var(--font-title); color: rgba(255, 255, 255, 0.32); }
.promo__col--level .levelup__arrow { font: 400 27px var(--font-title); color: var(--volt); }
.promo__col--level .levelup__to { font: 400 62px var(--font-title); color: #fff; }
.promo__col--level .levelup__role { font: 400 28px var(--font-title); color: #fff; margin-top: 4px; }
.promo__col--level .levelup__from-role { font: 500 13px var(--font-body); color: #a8b4ce; margin-top: 3px; }
/* 등급 — **표지가 바뀐다**를 두 칩으로 보여 준다(임시 → 정식). */
.promo__col--level .levelup__grade {
  margin-top: 16px; background: rgba(255, 255, 255, 0.07);
  border: 1.5px solid rgba(255, 255, 255, 0.16); border-radius: 16px;
  padding: 15px 17px;
  display: flex; align-items: center; justify-content: center; gap: 13px;
  flex-wrap: wrap;
}
.promo__col--level .levelup__grade-from {
  background: #f7edd8; border: 2px dashed #cfc7b4; border-radius: 11px;
  padding: 9px 14px; font: 400 15px var(--font-title); color: var(--muted);
}
.promo__col--level .levelup__grade-arrow {
  font: 400 18px var(--font-title); color: var(--volt); margin: 0;
}
.promo__col--level .levelup__grade-to {
  background: var(--cream); border: 3px solid #f0c93b; border-radius: 11px;
  padding: 8px 14px; font: 400 16px var(--font-title); color: var(--ink);
}
.promo__col--level .levelup__grade-note {
  flex-basis: 100%; font: 500 12px/1.5 var(--font-body); color: #c7d2e8;
}
/* 사다리 — 목업의 넓은 막대. 지금 칸만 노란 후광이 돈다. */
.promo__col--level .levelup__ladder {
  display: flex; gap: 4px; margin: 16px 0 12px; justify-content: stretch;
}
.promo__col--level .ladder__dot {
  flex: 1; width: auto; max-width: none; height: 10px; border-radius: 5px;
  background: rgba(255, 255, 255, 0.16);
}
.promo__col--level .ladder__dot--done { background: var(--ok); }
.promo__col--level .ladder__dot--now {
  background: var(--volt); box-shadow: 0 0 0 3px rgba(255, 211, 56, 0.3);
}
.promo__col--level .levelup__voice { font: 400 16px var(--font-title); color: #e8e4d8; }

/* 해금·승급 창의 광선 — 목업 값(`rgba(255,211,56,.12)` · 6deg / 24deg)으로 낮춘다.
   레벨업 전용 배경보다 밝은 스크림 위에 얹히므로 그대로 두면 흰 부채살처럼 보인다. */
.promo__bg .levelup__rays {
  background: repeating-conic-gradient(
    from 0deg,
    rgba(255, 211, 56, 0.1) 0deg 6deg,
    rgba(255, 211, 56, 0) 6deg 24deg);
  animation-duration: 26s;
  -webkit-mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 55%);
  mask-image: radial-gradient(circle at 50% 50%, #000 12%, transparent 55%);
}

/* ═════════════════════════════════════════════════════════════════════════════
   3차 개편 (2026-08-25) — 목업 「볼티 DAY1 PC 목업」의 10화면을 그대로 옮긴 스타일.
   사용자 지시 「디자인과 문제풀이 방식을 싹 다 · 모든 디자인을 목업대로」.
   값은 전부 목업의 인라인 스타일 실측이다. 바꾸려면 목업을 먼저 고칠 것.
   ═════════════════════════════════════════════════════════════════════════════ */

@keyframes shake {
  0%, 100% { transform: translate(0, 0); }
  20% { transform: translate(-6px, 3px); }
  40% { transform: translate(5px, -3px); }
  60% { transform: translate(-3px, 2px); }
  80% { transform: translate(2px, -2px); }
}
/* 화면 흔들림 세 단(`docs/puzzle.md` 약한 · 중간 · 큰). ⚠ `sfade` 를 첫 자리에 그대로 두어야 한다 —
   클래스가 빠져 animation-name 목록이 `sfade` 하나로 돌아갈 때 같은 자리의 이름이 유지되면 재생되지 않는다. */
@keyframes shakeScene1 { 0%, 100% { transform: none; } 25% { transform: translate(-4px, 2px); } 50% { transform: translate(4px, -2px); } 75% { transform: translate(-2px, 1px); } }
@keyframes shakeScene2 { 0%, 100% { transform: none; } 20% { transform: translate(-8px, 4px); } 40% { transform: translate(7px, -4px); } 60% { transform: translate(-5px, 3px); } 80% { transform: translate(3px, -2px); } }
@keyframes shakeScene3 { 0%, 100% { transform: none; } 15% { transform: translate(-14px, 6px); } 30% { transform: translate(12px, -7px); } 45% { transform: translate(-10px, 5px); } 60% { transform: translate(8px, -4px); } 80% { transform: translate(-4px, 2px); } }
.scene--shake1 { animation: sfade 0.4s ease, shakeScene1 .4s ease-out; }
.scene--shake2 { animation: sfade 0.4s ease, shakeScene2 .55s ease-out; }
.scene--shake3 { animation: sfade 0.4s ease, shakeScene3 .7s ease-out; }
@keyframes badgeFloat {
  0% { opacity: 0; transform: translateY(8px) scale(.85); }
  20% { opacity: 1; transform: translateY(0) scale(1.06); }
  40% { transform: none; }
  80% { opacity: 1; }
  100% { opacity: 0; transform: translateY(-6px); }
}

/* ── 01 출근 — 흰 카드 하나 + 손 흔드는 볼티 ─────────────────────────────────── */
.home__tint { position: absolute; inset: 0; background: linear-gradient(rgba(255, 244, 214, .3), rgba(16, 22, 38, .45)); }
.home__card {
  position: absolute; left: 80px; top: 120px; width: 440px;
  background: #fff; border-radius: 20px; padding: 24px 26px;
  box-shadow: 0 18px 44px rgba(16, 22, 38, .3);
}
.home__kicker { font: 500 11px var(--font-mono); color: #b5ad98; letter-spacing: .14em; }
.home__title { font: 400 34px/1.3 var(--font-title); color: var(--ink); margin-top: 8px; }
.home__body { font: 500 14.5px/1.7 var(--font-body); color: #5a5548; margin-top: 8px; }
.home__start {
  margin-top: 22px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  background: var(--volt); border-radius: 15px;
  font: 400 21px var(--font-title); color: var(--ink);
  cursor: pointer;
  animation: guidePulse 2s ease-in-out infinite;
}
.home__volti {
  right: 150px; bottom: 0; height: 400px;
  filter: drop-shadow(0 14px 24px rgba(16, 22, 38, .45));
  animation: bob 3s ease-in-out infinite;
}

/* ── 02 대화 — 큰 볼티(표정) · 조직도 · 아래 대사 바 ──────────────────────────── */
.talk__tint { position: absolute; inset: 0; background: rgba(26, 32, 60, .3); }
/* 대사 막은 이 화면에서 따로 깔지 않는다 — 목업은 화면 막 한 장(.3)뿐이다. */
.talk ~ .dialog { background: transparent; }
.talk__volti {
  left: 180px; bottom: 150px; height: 330px;
  filter: drop-shadow(0 14px 24px rgba(16, 22, 38, .45));
  animation: popIn .25s ease;
}
/* 우리 회사 조직도 — 「공장이 없다」를 물건으로(목업 02 `showOrg`). 공장 칸만 점선 + 「없음」. */
/* 2026-08-28 사용자 지시 — 「더 크게 화면 가운데에 · 진짜 조직도처럼」. 오른쪽 구석의 작은 카드(420 · right 110)를
   **가운데 620 문서**로 다시 그렸다. 뼈대는 진짜 조직도다: 회사(루트) → 세로 줄기 → 가로 버스 → 팀 세 칸.
   ⚠ HUD(66)와 대사 바(top 662) 사이에 들어온다 — 크기를 키우면 그 둘을 다시 잴 것(`test/day01.mjs`가 잰다).
   ⚠ `translate` 는 `transform` 과 별개 속성이라 popUp(transform)과 겹치지 않는다 — 가운데 정렬이 유지된다. */
.org {
  position: absolute; left: 50%; translate: -50% 0; top: 150px; width: 620px;
  background: #fff; border: 1.5px solid #e2dcca; border-radius: 18px;
  padding: 20px 26px 26px;
  box-shadow: 0 22px 52px rgba(16, 22, 38, .38);
  animation: popUp .4s ease-out both;
  z-index: 76;
}
.org__head {
  display: flex; align-items: baseline; gap: 10px;
  padding-bottom: 12px; border-bottom: 1.5px solid #f0ebdd;
}
.org__kicker { font: 500 10px var(--font-mono); color: var(--faint); letter-spacing: .16em; }
.org__title { font: 400 20px var(--font-title); color: var(--ink); }
/* 루트 — 회사 한 칸. 어두운 칸이라 팀 칸보다 위계가 위로 읽힌다. */
.org__root {
  width: 252px; margin: 18px auto 0;
  display: flex; align-items: center; gap: 12px;
  background: #1b2742; border-radius: 13px; padding: 12px 16px;
  box-shadow: 0 8px 18px rgba(16, 22, 38, .28);
}
.org__root-icon { font-size: 22px; line-height: 1; }
.org__root-name { font: 400 20px var(--font-title); color: #fff; letter-spacing: .04em; }
.org__root-sub { font: 500 11.5px var(--font-body); color: #a8b6d6; margin-top: 1px; }
/* 줄기 — 루트에서 가로 버스까지 내려오는 세로선. */
.org__stem { width: 2px; height: 22px; margin: 0 auto; background: #cfc7b2; }
.org__row { display: flex; gap: 14px; }
/* 칸마다 세로 드롭(::before)과 가로 버스 한 조각(::after)을 갖는다 — 첫 칸은 자기 가운데에서 오른쪽으로,
   끝 칸은 왼쪽에서 자기 가운데까지. 칸 폭이 어떻게 나뉘든 버스가 바깥 두 칸의 **가운데에서 정확히** 끝난다. */
.org__col { flex: 1; min-width: 0; position: relative; padding-top: 24px; }
.org__col::before {
  content: ''; position: absolute; left: 50%; top: 0; width: 2px; height: 24px;
  margin-left: -1px; background: #cfc7b2;
}
.org__col::after {
  content: ''; position: absolute; top: 0; height: 2px;
  left: -8px; right: -8px; background: #cfc7b2;
}
.org__col:first-child::after { left: calc(50% - 1px); }
.org__col:last-child::after { right: calc(50% - 1px); }
.org__team {
  position: relative; text-align: center;
  border-radius: 14px; padding: 16px 10px 15px;
  border: 1.5px solid var(--line); background: var(--panel);
}
.org__icon { font-size: 32px; line-height: 1; }
.org__name { font: 400 19px var(--font-title); margin-top: 6px; }
.org__role { font: 500 11.5px/1.5 var(--font-body); color: var(--muted); margin-top: 4px; }
.org__team--design { background: #eaf0fc; border-color: #5b7ed9; }
.org__team--design .org__name { color: #3a5aa8; }
.org__team--prod { background: #dff3ea; border-color: var(--ok); }
.org__team--prod .org__name { color: var(--ok-dark); }
/* 빈 칸 — 진짜 조직도의 **공석**처럼 점선 · 흐린 아이콘 · 「없음」 도장.
   맡는 일(`role`)은 그대로 적혀 있다 — 자리는 있는데 칸이 비어 있는 것이 오늘의 문제다. */
.org__team--none { background: #fff8f6; border: 2px dashed #e8543f; }
.org__team--none .org__icon { opacity: .28; filter: grayscale(1); }
.org__team--none .org__name { color: #c24a2e; }
.org__team--none .org__role { color: #cf8b7a; }
.org__tag {
  position: absolute; right: -9px; top: -11px;
  background: #e8543f; border-radius: 999px; padding: 3px 11px;
  font: 400 13px var(--font-title); color: #fff;
  transform: rotate(6deg);
  box-shadow: 0 4px 10px rgba(232, 84, 63, .35);
}
/* 조직도가 떠 있는 동안 볼티는 왼쪽으로 비켜선다 — 가운데 판(330..950)과 겹치지 않게.
   세로에서는 볼티가 가운데 아래라 비켜설 필요가 없다(`.frame--mo` 규칙이 그대로 이긴다). */
.frame--pc .talk--org .talk__volti { left: 24px; transition: left .35s ease; }

/* ── 03 업무 지시 — 배경 위 태블릿 볼티(카드는 오버레이) ─────────────────────── */
.fab__tablet {
  left: 90px; bottom: 0; height: 280px;
  filter: drop-shadow(0 14px 22px rgba(16, 22, 38, .4));
}
/* 업무 화면은 종이색 한 장 — 사진 없음(목업 04 · 06). */
.scene--paper { background: #f2ede1; }

/* ── 04 직접 생산안 — 왼쪽 네 줄 · 오른쪽 두 자 ─────────────────────────────── */
.d1b__left { position: absolute; left: 56px; top: 96px; width: 560px; }
.d1b__title { font: 400 22px var(--font-title); color: var(--ink); }
.d1b__sub { font: 500 13.5px var(--font-body); color: var(--muted); margin-top: 3px; }
.d1b__steps { display: flex; flex-direction: column; gap: 9px; margin-top: 16px; }
.d1b-step {
  position: relative;
  display: flex; align-items: center; gap: 13px;
  background: #fff; border: 1.5px dashed #dcd5c4; border-radius: 13px;
  padding: 13px 15px;
  cursor: default;
}
.d1b-step--next { border: 2px solid var(--volt); cursor: pointer; }
.d1b-step--bad { border: 2px solid var(--danger-dark); animation: shake .5s ease-out both; }
.d1b-step--over { background: #fbe4de; border: 2px solid var(--danger-dark); }
.d1b-step__no {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: #f0ebdd; color: #b5ad98;
  display: flex; align-items: center; justify-content: center;
  font: 400 15px var(--font-title);
}
.d1b-step__icon { font-size: 20px; line-height: 1; }
.d1b-step__body { flex: 1; min-width: 0; }
.d1b-step__name { font: 400 18px var(--font-title); color: #b5ad98; }
.d1b-step--next .d1b-step__name, .d1b-step--over .d1b-step__name { color: var(--ink); }
.d1b-step__meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.d1b-step__meta i { width: 1px; height: 10px; background: #dcd5c4; }
.d1b-step__cost { font: 600 11.5px var(--font-mono); color: var(--danger-dark); }
.d1b-step__time { font: 500 11.5px var(--font-body); color: var(--muted); }
.d1b-step__val { flex: none; font: 400 16px var(--font-title); color: #c9bfa8; }
.d1b-step--over .d1b-step__val { color: var(--danger-dark); }
.d1b-step__badge {
  position: absolute; right: 14px; top: -13px;
  background: var(--danger-dark); border-radius: 9px; padding: 4px 11px;
  font: 500 12px var(--font-body); color: #fff; white-space: nowrap;
  box-shadow: 0 4px 10px rgba(196, 60, 40, .4);
  animation: badgeFloat 1.4s ease-out both;
}
.d1b__right {
  position: absolute; right: 56px; top: 96px; width: 560px;
  background: #fff; border-radius: 18px; padding: 20px 22px;
  box-shadow: 0 12px 30px rgba(42, 59, 102, .16);
}
/* ⚠ 조건 핀 레일은 그림자(0 6px 18px)가 아래로 번진다 — 바로 다음 줄이 붙으면 글자에 그림자가 겹쳐
   「예쁘게 안 보인다」(사용자 지적 · 2026-08-28). 레일 뒤에는 항상 그림자보다 큰 여백을 둔다. */
.d1b__right .pinrail { margin-bottom: 20px; }
.d1b__rtitle { font: 400 17px var(--font-title); color: var(--ink); }
.d1b-ruler { margin-top: 16px; }
.d1b-ruler__head { display: flex; justify-content: space-between; font: 500 12.5px var(--font-body); color: var(--muted); }
.d1b-ruler__head--gap { margin-top: 16px; }
.d1b-ruler__track {
  position: relative; height: 16px; border-radius: 8px; background: #f0ebdd;
  margin-top: 6px; overflow: hidden;
}
.d1b-ruler__fill { position: absolute; left: 0; top: 0; bottom: 0; }
.d1b-ruler__fill--budget { background: #c98a3d; transition: width .5s ease; }
.d1b-ruler__fill--due { background: #5b7ed9; }
.d1b-ruler__short, .d1b-ruler__over {
  position: absolute; top: 0; bottom: 0;
  background: repeating-linear-gradient(45deg, #c43c28, #c43c28 5px, #e8756a 5px, #e8756a 10px);
  transition: width .5s ease;
}
.d1b-tip {
  margin-top: 18px; min-height: 64px;
  background: #f7f4ea; border-radius: 13px; padding: 14px 16px;
  font: 500 13.5px/1.65 var(--font-body); color: var(--muted);
}
.d1b-tip--ok { color: #a9861a; }
.d1b-tip--bad { color: var(--danger-dark); }
.d1b__think { position: static; display: block; margin: 10px auto 0; height: 190px; filter: none; }

/* ── 06 파트너안 — 설계 파일 ··· 한빛반도체 ────────────────────────────────── */
.d1p { position: absolute; left: 50%; top: 110px; width: 920px; margin-left: -460px; }
.d1p__head { text-align: center; }
.d1p__title { font: 400 28px var(--font-title); color: var(--ink); }
.d1p__sub { font: 500 14px var(--font-body); color: var(--muted); margin-top: 5px; }
.d1p__row { display: flex; align-items: center; gap: 20px; margin-top: 28px; }
.d1p-card {
  flex: 1; text-align: center;
  background: #fff; border-radius: 18px; padding: 22px;
  box-shadow: 0 12px 30px rgba(42, 59, 102, .14);
  border: 2px solid transparent;
}
.d1p-card--factory { border: 2px dashed #c9bfa8; cursor: pointer; }
.d1p-card--factory:focus-visible { outline: 4px solid rgba(255, 211, 56, .85); outline-offset: 3px; }
.d1p-card--linked { border: 2px solid var(--ok); cursor: default; }
.d1p-card__icon { font-size: 44px; line-height: 1.1; }
.d1p-card__name { font: 400 20px var(--font-title); color: var(--ink); margin-top: 8px; }
.d1p-card__note { font: 500 12.5px var(--font-body); color: var(--muted); margin-top: 3px; }
.d1p__dots { flex: none; font: 400 30px var(--font-title); color: #c9bfa8; }
.d1p__link { flex: none; text-align: center; animation: popUp .4s ease-out both; }
.d1p__arrow { font: 400 34px var(--font-title); color: var(--ok); }
.d1p__linked { font: 400 15px var(--font-title); color: var(--ok-dark); }
.d1p__results { display: flex; gap: 14px; margin-top: 24px; animation: popUp .4s .1s ease-out both; }
.d1p-res { flex: 1; background: #dff3ea; border: 1.5px solid var(--ok); border-radius: 14px; overflow: hidden; }
.d1p-res__head { background: #cfeee0; border-bottom: 1px solid var(--ok); padding: 9px 15px; font: 400 15px var(--font-title); color: var(--ok-dark); }
.d1p-res__body { padding: 14px 15px; }
.d1p-res__lead { font: 400 26px var(--font-title); color: var(--ok-dark); }
.d1p-res__note { font: 500 13px var(--font-body); color: #5a5548; margin-top: 4px; }
.d1p__cta {
  margin-top: 22px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  background: var(--volt); border-radius: 15px;
  font: 400 21px var(--font-title); color: var(--ink);
  cursor: pointer;
  animation: guidePulse 1.9s ease-in-out infinite;
}
.d1p__guide { margin-top: 26px; text-align: center; font: 400 19px var(--font-title); color: #a9861a; }

/* ── 07 클리어 ① 의 수첩 카드 — 붉은 링 얼굴 · STAMP BOOK · 도장 11칸 ──
   사원증 카드(VoltiPass) 뒷면의 STAMP RECORD 와 **같은 값**(`stampMarks`)을 크게 보여 준다. */
.clear .stamp__card {
  position: relative;
  display: block; height: auto;
  margin: 28px auto 0;
  width: 600px;
  padding: 18px 20px;
  text-align: left;
  background: #f7edd8; border: 3px solid #f0c93b; border-radius: 20px;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .55);
  animation: shake .5s .1s ease-out, burstIn .45s .1s ease-out both;
}
.stampbook__head { display: flex; align-items: center; gap: 13px; }
.stampbook__photo {
  width: 56px; height: 56px; flex: none; border-radius: 50%;
  border: 3px solid var(--danger-dark); padding: 3px;
}
.stampbook__photo > div {
  width: 100%; height: 100%; border-radius: 50%; overflow: hidden; background: #fff7dc;
  display: flex; align-items: center; justify-content: center;
}
.stampbook__photo img { height: 45px; }
.stampbook__id { flex: 1; }
.stampbook__kicker { font: 500 10px var(--font-mono); color: #a89d84; letter-spacing: .16em; }
.stampbook__name { font: 400 20px var(--font-title); color: var(--ink); }
.stamp__count { flex: none; font: 400 14px var(--font-title); color: var(--muted); }
.stamp__count b { font-size: 26px; color: var(--danger-dark); }

/* ── 도장 — 목업의 고무도장. 사원증 수첩과 클리어 카드가 같은 컴포넌트를 쓴다 ──
   바깥 링 실선(굵다) · 안쪽 링 실선(가늘다) · 칸마다 다른 기울기 · 빈 칸은 점선.
   크기는 `--st` 하나로 잡고 안쪽 링·글자는 calc 로 뽑는다.
   ⚠ 이름은 `pstamp-cell` 이다 — `.pcell` 은 DAY 03 이 쓴다. */
.pstamps { --st: 96px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px 16px; }
.pstamps--row { --st: 46px; display: flex; gap: 7px; margin-top: 15px; }
.pstamp-cell { display: flex; flex-direction: column; align-items: center; gap: 7px; }
.pstamps--row .pstamp-cell { flex: 1; gap: 0; }
.pstamps--book .pstamp-cell > .pstamp { margin: 4px; }
.pstamp-cell__label {
  font: 500 11px var(--font-body); color: var(--bk-sub, #8a8272);
  text-align: center; line-height: 1.3; min-height: 14px;
}
.pstamps--row .pstamp-cell__label { display: none; }
.pstamp {
  width: var(--st); height: var(--st); flex: none;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  border: 2px dashed var(--bk-empty, #d7cfba);
}
.pstamps--row .pstamp { width: 100%; height: auto; aspect-ratio: 1; }
.pstamp__no { font: 400 calc(var(--st) * 0.21) var(--font-title); color: var(--bk-empty, #d7cfba); }
.pstamps--row .pstamp__no { display: none; }
.pstamp--filled, .pstamp--landing {
  border: 4px solid var(--bk-ink, #c43c28);
  background: rgba(196, 60, 40, .07);
  opacity: .9;
  transform: rotate(var(--rot, -7deg));
}
.pstamp__ring {
  width: 77%; height: 77%; border-radius: 50%;
  border: 1.5px solid var(--bk-ink, #c43c28);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.pstamps--row .pstamp__ring { border: 0; gap: 0; }
.pstamp__day { font: 500 max(7px, calc(var(--st) * 0.094)) var(--font-mono); color: var(--bk-ink, #c43c28); letter-spacing: .1em; }
.pstamp__word { font: 400 calc(var(--st) * 0.22) var(--font-title); color: var(--bk-ink, #c43c28); line-height: 1; }
.pstamps--row .pstamp__day { font-size: 7px; letter-spacing: 0; }
.pstamps--row .pstamp__word { font-size: 15px; }
.pstamp__ring::after {
  content: 'VOLTI'; margin-top: 1px;
  font: 500 8px var(--font-mono); color: var(--bk-ink, #c43c28);
  border-top: 1px solid var(--bk-ink, #c43c28); padding-top: 2px; opacity: .8;
}
.pstamps--row .pstamp__ring::after { display: none; }
/* 이번에 찍히는 칸 — 위에서 회전하며 내려와 `쾅`. 끝값을 `--rot` 로 맞춰 기울기를 남긴다. */
.pstamp--landing { animation: stampLand .55s .35s ease-out both; }
@keyframes stampLand {
  0% { transform: scale(3) rotate(-26deg); opacity: 0; }
  55% { transform: scale(.9) rotate(var(--rot, -7deg)); opacity: .9; }
  78% { transform: scale(1.08) rotate(var(--rot, -7deg)); }
  100% { transform: scale(1) rotate(var(--rot, -7deg)); opacity: .9; }
}

/* ── 해금·승급 창의 볼티 (목업 §TIER B) ─────────────────────────────────────── */
.promo__volti {
  /* 목업은 두 칼럼 사이(left 596)다. 우리는 CTA 가 하나라 가운데 아래에 오므로 오른쪽 칼럼 아래로 비킨다. */
  position: absolute; right: 90px; bottom: -6px; height: 250px;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .5));
  pointer-events: none;
}

/* ── 10 퇴근 — 어두운 막 · 시각 · 제목 · 복습 퀴즈 · 내일 훅 · 다음 DAY ─────────── */
.dayend__scrim { position: absolute; inset: 0; background: linear-gradient(rgba(16, 22, 38, .7), rgba(16, 22, 38, .92)); }
.dayend__col { position: absolute; left: 50%; top: 110px; width: 660px; margin-left: -330px; text-align: center; }
.dayend__time { font: 400 15px var(--font-title); color: #8fa0c9; }
.dayend__title { font: 400 44px var(--font-title); color: #fff; margin-top: 6px; }
.dayend__box {
  margin-top: 24px; text-align: left;
  background: rgba(255, 255, 255, .08); border: 1.5px solid rgba(255, 255, 255, .16);
  border-radius: 18px; padding: 20px 22px;
}
.dayend__label { font: 400 15px var(--font-title); color: var(--volt); }
.dayend__list { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.dayend__item { display: flex; align-items: center; gap: 11px; }
.dayend__check {
  width: 24px; height: 24px; flex: none; border-radius: 50%; background: var(--ok);
  display: flex; align-items: center; justify-content: center;
  font: 700 12px var(--font-body); color: #fff;
}
.dayend__text { font: 500 14px var(--font-body); color: #e8e4d8; }
.dayend-quiz {
  margin-top: 20px; padding: 18px 20px; text-align: left;
  background: rgba(255, 255, 255, .09); border: 1.5px solid rgba(255, 255, 255, .18); border-radius: 18px;
}
.dayend-quiz__kicker { font: 400 17px var(--font-title); color: var(--volt); }
.dayend-quiz__question-row { display: flex; align-items: flex-start; gap: 12px; margin-top: 13px; }
.dayend-quiz__badge {
  flex: none; padding: 5px 9px; border-radius: 8px; background: var(--volt); color: var(--ink);
  font: 700 11px var(--font-body);
}
.dayend-quiz__question { font: 500 16px/1.55 var(--font-body); color: #f6f2e8; }
.dayend-quiz__answer-label { display: flex; align-items: center; gap: 8px; margin-top: 14px; font: 700 12px var(--font-body); color: #c7d2e8; }
.dayend-quiz__answer-label small { font: 500 10px var(--font-mono); color: #8fa0c9; }
.dayend-quiz__answer-row { display: flex; gap: 9px; margin-top: 7px; }
.dayend-quiz__input {
  flex: 1; min-width: 0; height: 46px; box-sizing: border-box; padding: 0 13px;
  border: 1.5px solid rgba(255, 255, 255, .2); border-radius: 11px; outline: none;
  background: rgba(8, 12, 24, .58); color: #fff; font: 500 13px var(--font-body);
}
.dayend-quiz__input::placeholder { color: #7785a3; }
.dayend-quiz__input:focus { border-color: var(--volt); box-shadow: 0 0 0 3px rgba(255, 211, 56, .14); }
.dayend-quiz__submit {
  flex: none; width: 112px; border: 0; border-radius: 11px; background: var(--volt); color: var(--ink);
  font: 700 13px var(--font-body); cursor: pointer;
}
.dayend-quiz__submit:disabled { opacity: .35; cursor: default; }
.dayend-quiz__foot { min-height: 30px; margin-top: 9px; }
.dayend-quiz__hint { padding: 0; border: 0; background: none; color: #a8b4ce; font: 500 11.5px var(--font-body); text-decoration: underline; cursor: pointer; }
.dayend-quiz__feedback { margin-top: 6px; font: 600 11.5px/1.45 var(--font-body); }
.dayend-quiz__retry { color: #ffae9f; }
.dayend-quiz__correct { color: #8fe3b6; }
.dayend-quiz--wrong { border-color: rgba(232, 84, 63, .6); }
.dayend-quiz--correct { border-color: rgba(76, 175, 125, .7); }
.dayend__hook {
  margin-top: 16px; text-align: left;
  background: rgba(255, 255, 255, .08); border-radius: 14px; padding: 14px 18px;
  font: 500 14px/1.6 var(--font-body); color: #a8b4ce;
}
.dayend__hook .hl { color: var(--volt); font-weight: 700; }
.dayend__next {
  margin-top: 16px; height: 60px;
  width: 100%; border: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--volt); border-radius: 15px;
  font: 400 21px var(--font-title); color: var(--ink);
  cursor: pointer;
  animation: guidePulse 2s ease-in-out infinite;
}
.dayend__next:disabled {
  background: rgba(255, 255, 255, .1); color: #7785a3; cursor: default; animation: none;
  border: 1.5px dashed rgba(255, 255, 255, .2);
}
.dayend__wip {
  margin-top: 20px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .08); border: 1.5px dashed rgba(255, 255, 255, .3); border-radius: 15px;
  font: 400 17px var(--font-title); color: #c7d2e8;
}
.dayend__volti {
  left: 90px; bottom: 0; height: 300px;
  filter: drop-shadow(0 14px 24px rgba(0, 0, 0, .5));
}

/* ═══ 사원증 카드 — VoltiPass (목업 `VoltiPass.dc.html`) ═══════════════════════════
   400×632 카드. 탭하면 뒤집힌다(앞면 신분 · 뒷면 도장 기록·출입 권한).
   색·재질은 등급 6단(`.vp--g1..6`)이 변수로 갖고, 구조 규칙은 한 벌이다.
   ⚠ 「VOLTI FOUNDRY」가 아니라 「VOLTI」다 — 우리 회사는 공장이 없는 설계 회사다(DAY 01). */
.vp {
  width: 400px; height: 632px; flex: none;
  perspective: 1700px; cursor: pointer;
  font-family: var(--font-body);
  outline: none;
  /* 임시(g1) 기본값 */
  --vp-bg: linear-gradient(160deg, #f2e7cd, #e3d3ab); --vp-bd: 2px dashed #b9a97f;
  --vp-brand: #6f6858; --vp-rank: #4d4736; --vp-name: #3a3630; --vp-meta: #8b7f66; --vp-note: #6f6858;
  --vp-rule: rgba(0, 0, 0, .16); --vp-photo: #ded2b4;
  --vp-ring: inset 0 0 0 2px rgba(255, 255, 255, .5), 0 1px 0 rgba(0, 0, 0, .12);
  --vp-accbg: rgba(0, 0, 0, .07); --vp-acc: #6f6858; --vp-band: rgba(0, 0, 0, .07); --vp-bandfg: #8a8272;
  --vp-plate: #fffdf5; --vp-wm: rgba(0, 0, 0, .045); --vp-ink: #c43c28; --vp-stampbg: rgba(196, 60, 40, .06);
  --vp-empty: rgba(0, 0, 0, .2); --vp-solid: #f2e7cd; --vp-line: rgba(0, 0, 0, .055);
}
.vp:focus-visible .vp__inner { box-shadow: 0 0 0 4px rgba(255, 211, 56, .85); border-radius: 20px; }
.vp--g2 {
  --vp-bg: linear-gradient(160deg, #fbf3e0, #f4e8cd); --vp-bd: 2px solid #f0c93b;
  --vp-brand: #2a3b66; --vp-rank: #2a3b66; --vp-name: #2a3b66; --vp-meta: #8b7f66; --vp-note: #6b6353;
  --vp-rule: rgba(0, 0, 0, .15); --vp-photo: #e8dec6;
  --vp-ring: inset 0 0 0 2px rgba(255, 255, 255, .7), 0 1px 0 rgba(0, 0, 0, .1);
  --vp-accbg: #fff1c6; --vp-acc: #a9861a; --vp-band: #ffd338; --vp-bandfg: #7a6210;
  --vp-wm: rgba(42, 59, 102, .05); --vp-empty: rgba(0, 0, 0, .18); --vp-solid: #fbf3e0;
}
.vp--g3 {
  --vp-bg: linear-gradient(160deg, #fdf4da, #f0dca7); --vp-bd: 2px solid #d9a91f;
  --vp-brand: #8a6a12; --vp-rank: #8a6a12; --vp-name: #2a3b66; --vp-meta: #8d7a4d; --vp-note: #6f6340;
  --vp-rule: rgba(138, 106, 18, .26); --vp-photo: #f0e3bd;
  --vp-ring: inset 0 0 0 2px rgba(255, 255, 255, .75), 0 1px 0 rgba(138, 106, 18, .2);
  --vp-accbg: rgba(217, 169, 31, .17); --vp-acc: #8a6a12; --vp-band: rgba(138, 106, 18, .14); --vp-bandfg: #8a6a12;
  --vp-wm: rgba(138, 106, 18, .06); --vp-empty: rgba(138, 106, 18, .24); --vp-solid: #fdf4da;
}
.vp--g4 {
  --vp-bg: linear-gradient(160deg, #33405f, #212a44); --vp-bd: 2px solid #f0d47a;
  --vp-brand: #f0d47a; --vp-rank: #f0d47a; --vp-name: #fff; --vp-meta: #adbada; --vp-note: #d2dbec;
  --vp-rule: rgba(240, 212, 122, .3); --vp-photo: #3c4767;
  --vp-ring: inset 0 0 0 2px rgba(240, 212, 122, .35), 0 1px 0 rgba(0, 0, 0, .3);
  --vp-accbg: rgba(240, 212, 122, .15); --vp-acc: #f0d47a; --vp-band: rgba(240, 212, 122, .14); --vp-bandfg: #f0d47a;
  --vp-plate: #f7f4ea; --vp-wm: rgba(255, 255, 255, .045); --vp-ink: #e8756a; --vp-stampbg: rgba(232, 117, 106, .1);
  --vp-empty: rgba(255, 255, 255, .2); --vp-solid: #33405f; --vp-line: rgba(255, 255, 255, .06);
}
.vp--g5 {
  --vp-bg: linear-gradient(160deg, #1d1a13, #0c0a07); --vp-bd: 2px solid #f0d47a;
  --vp-brand: #f0d47a; --vp-rank: #ffe9a8; --vp-name: #fff; --vp-meta: #bfab7c; --vp-note: #dccb9f;
  --vp-rule: rgba(240, 212, 122, .32); --vp-photo: #251f14;
  --vp-ring: inset 0 0 0 2px rgba(240, 212, 122, .4), 0 1px 0 rgba(0, 0, 0, .4);
  --vp-accbg: rgba(240, 212, 122, .16); --vp-acc: #ffe9a8; --vp-band: rgba(240, 212, 122, .14); --vp-bandfg: #f0d47a;
  --vp-plate: #f7f4ea; --vp-wm: rgba(240, 212, 122, .06); --vp-ink: #e8756a; --vp-stampbg: rgba(232, 117, 106, .1);
  --vp-empty: rgba(240, 212, 122, .24); --vp-solid: #1d1a13; --vp-line: rgba(255, 255, 255, .06);
}
/* 블랙골드 — 골드보다 더 검고 테두리가 빛난다(04 §32 「발광」). */
.vp--g6 {
  --vp-bg: linear-gradient(160deg, #14110c, #000); --vp-bd: 2.5px solid #ffe9a8;
  --vp-brand: #ffe9a8; --vp-rank: #ffe9a8; --vp-name: #fff; --vp-meta: #c9b88a; --vp-note: #e8d9ad;
  --vp-rule: rgba(255, 233, 168, .36); --vp-photo: #1b160c;
  --vp-ring: inset 0 0 0 2px rgba(255, 233, 168, .5), 0 1px 0 rgba(0, 0, 0, .5);
  --vp-accbg: rgba(255, 233, 168, .16); --vp-acc: #ffe9a8; --vp-band: rgba(255, 233, 168, .16); --vp-bandfg: #ffe9a8;
  --vp-plate: #f7f4ea; --vp-wm: rgba(255, 233, 168, .07); --vp-ink: #e8756a; --vp-stampbg: rgba(232, 117, 106, .1);
  --vp-empty: rgba(255, 233, 168, .26); --vp-solid: #14110c; --vp-line: rgba(255, 255, 255, .06);
}
.vp--g6 .vp__face { box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .7), 0 0 44px rgba(240, 212, 122, .28); }

.vp__inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.2, .85, .25, 1);
}
.vp--flipped .vp__inner { transform: rotateY(180deg); }
.vp__face {
  position: absolute; inset: 0; border-radius: 20px;
  background: var(--vp-bg); border: var(--vp-bd);
  box-shadow: 0 30px 60px -18px rgba(0, 0, 0, .6);
  backface-visibility: hidden; -webkit-backface-visibility: hidden;
  overflow: hidden; display: flex; flex-direction: column; box-sizing: border-box;
  color: var(--vp-note);
}
.vp__face--back { transform: rotateY(180deg); }
.vp__guill {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    repeating-linear-gradient(26deg, var(--vp-line) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-26deg, var(--vp-line) 0 1px, transparent 1px 9px);
}
.vp__wm {
  position: absolute; right: -32px; bottom: 38px;
  font: 400 200px var(--font-title); color: var(--vp-wm); line-height: .8;
  pointer-events: none; user-select: none;
}
.vp__slot {
  position: absolute; left: 50%; top: 15px; margin-left: -35px;
  width: 70px; height: 13px; border-radius: 7px; background: #0a0e1a;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .7), 0 1px 0 rgba(255, 255, 255, .22);
}
.vp__spacer { flex: 1; }
.vp__k { font: 600 10px var(--font-mono); color: var(--vp-meta); letter-spacing: .2em; }
/* 머리 */
.vp__head { padding: 40px 24px 0; display: flex; align-items: flex-end; gap: 9px; position: relative; }
.vp__bolt { width: 19px; height: 19px; object-fit: contain; margin-bottom: 3px; }
.vp__brand { font: 400 19px var(--font-title); color: var(--vp-brand); line-height: 1.05; }
.vp__brand-sub { font: 600 9.5px var(--font-mono); color: var(--vp-meta); letter-spacing: .2em; }
.vp__no { text-align: right; }
.vp__no-k { font: 600 9.5px var(--font-mono); color: var(--vp-meta); letter-spacing: .18em; }
.vp__no-v { font: 600 12.5px var(--font-mono); color: var(--vp-rank); letter-spacing: .06em; }
.vp__rule { margin: 13px 24px 0; height: 1.5px; background: var(--vp-rule); position: relative; }
/* 몸 — 사진 · 신분 */
.vp__body { padding: 17px 24px 0; display: flex; gap: 17px; position: relative; }
.vp__photo-col { flex: none; }
.vp__photo {
  width: 156px; height: 198px; border-radius: 9px; background: var(--vp-photo);
  box-shadow: var(--vp-ring); overflow: hidden; position: relative;
  display: flex; align-items: flex-end; justify-content: center;
}
.vp__photo-gloss { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 24%, rgba(255, 255, 255, .35), transparent 62%); }
.vp__photo-pic { width: 100%; height: 88%; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.vp__photo-img { max-width: 100%; max-height: 100%; object-fit: contain; filter: drop-shadow(0 8px 12px rgba(0, 0, 0, .3)); }
.vp__holo {
  position: absolute; right: -16px; bottom: -14px; width: 66px; height: 66px; border-radius: 50%;
  background: conic-gradient(from 210deg, rgba(255, 211, 56, .55), rgba(127, 214, 168, .5), rgba(143, 160, 201, .5), rgba(232, 117, 106, .5), rgba(255, 211, 56, .55));
  border: 1px solid rgba(255, 255, 255, .35); box-shadow: 0 4px 10px rgba(0, 0, 0, .22);
  display: flex; align-items: center; justify-content: center;
  animation: holoSpin 9s linear infinite; pointer-events: none;
}
.vp__holo img { width: 24px; height: 24px; object-fit: contain; opacity: .85; }
@keyframes holoSpin { from { filter: hue-rotate(0deg); } to { filter: hue-rotate(360deg); } }
.vp__micro {
  width: 156px; overflow: hidden; white-space: nowrap; margin-top: 5px;
  font: 600 7.5px var(--font-mono); color: var(--vp-meta); letter-spacing: .22em; opacity: .65;
}
.vp__id { flex: 1; min-width: 0; padding-top: 2px; }
.vp__rank { font: 400 46px var(--font-title); color: var(--vp-rank); line-height: 1.02; margin-top: 1px; white-space: nowrap; }
.vp__name-row { display: flex; align-items: baseline; gap: 7px; margin-top: 9px; }
.vp__name { font: 400 23px var(--font-title); color: var(--vp-name); line-height: 1; }
.vp__name-en { font: 600 10px var(--font-mono); color: var(--vp-meta); letter-spacing: .14em; }
.vp__dept { font: 500 12.5px var(--font-body); color: var(--vp-note); margin-top: 3px; }
.vp__position { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.vp__level { border: 1px solid var(--vp-note); border-radius: 6px; padding: 4px 7px; color: var(--vp-ink); font: 600 16px/1 var(--font-mono); white-space: nowrap; }
.vp__role { color: var(--vp-note); font: 600 15px/1.3 var(--font-body); margin-top: 5px; }
.vp__rows { margin-top: 14px; display: flex; flex-direction: column; gap: 5px; }
.vp__row { display: flex; align-items: baseline; gap: 6px; }
.vp__row-k { font: 600 9.5px var(--font-mono); color: var(--vp-meta); letter-spacing: .14em; }
.vp__row-dots { flex: 1; border-bottom: 1px dotted var(--vp-rule); }
.vp__row-v { font: 600 11px var(--font-mono); color: var(--vp-note); }
/* ACCESS */
.vp__access {
  margin: 20px 24px 0; padding: 10px 13px; border-radius: 12px; background: var(--vp-accbg);
  display: flex; align-items: center; gap: 10px; position: relative;
}
.vp__access img { width: 14px; height: 14px; object-fit: contain; }
.vp__access-k { color: var(--vp-acc); letter-spacing: .18em; font-size: 9.5px; }
.vp__access-v { font: 400 17.5px var(--font-title); color: var(--vp-acc); line-height: 1; white-space: nowrap; }
.vp__bars { display: flex; align-items: flex-end; gap: 3px; height: 20px; }
.vp__bar { display: block; width: 6px; border-radius: 2px; background: var(--vp-rule); }
.vp__bar--on { background: var(--vp-acc); }
/* 회사 직인 — 외형 등급은 카드 재질이 맡는다. */
.vp__approval {
  margin: 20px 24px 0; padding-top: 15px; border-top: 1.5px dashed var(--vp-rule);
  display: flex; justify-content: flex-end; position: relative;
}
.vp__return { display: none; }
.vp__seal {
  flex: none; width: 76px; height: 76px; border-radius: 50%;
  border: 3.5px solid var(--vp-ink); background: var(--vp-stampbg);
  display: flex; align-items: center; justify-content: center; transform: rotate(-9deg);
}
.vp__seal-in {
  width: 60px; height: 60px; border-radius: 50%; border: 1.5px solid var(--vp-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font: 400 15px var(--font-title); color: var(--vp-ink); line-height: 1.05;
}
.vp__seal-in i { display: block; width: 22px; height: 1px; background: var(--vp-ink); opacity: .55; margin: 2px 0; }
.vp__seal-k { font: 600 7.5px var(--font-mono); letter-spacing: .14em; }
.vp__serial { margin: 16px 24px 0; position: relative; display: flex; align-items: center; gap: 10px; }
.vp__serial .vp__k { letter-spacing: .18em; font-size: 9.5px; }
.vp__serial i { flex: 1; height: 1px; background: var(--vp-rule); }
.vp__serial span:last-child { font: 600 9.5px var(--font-mono); color: var(--vp-note); letter-spacing: .24em; }
.vp__tap {
  position: absolute; right: 16px; bottom: 46px;
  display: flex; align-items: center; gap: 6px; border-radius: 999px;
  background: var(--vp-accbg); border: 1px solid var(--vp-rule); padding: 5px 10px;
  font: 400 12.5px var(--font-title); color: var(--vp-acc); line-height: 1;
}
.vp__tap span { font: 600 9.5px var(--font-mono); letter-spacing: .14em; }
.vp__band {
  margin-top: auto; height: 34px; background: var(--vp-band);
  display: flex; align-items: center; justify-content: center; position: relative;
  font: 600 9.5px var(--font-mono); color: var(--vp-bandfg); letter-spacing: .1em; white-space: nowrap;
}
/* 뒷면 */
.vp__mag {
  margin-top: 44px; height: 46px; position: relative;
  background: linear-gradient(#191919, #2e2e2e 40%, #141414);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12);
}
.vp__rec-head { padding: 20px 24px 0; display: flex; align-items: flex-end; position: relative; }
.vp__rec-title { font: 400 22px var(--font-title); color: var(--vp-rank); line-height: 1.1; margin-top: 2px; }
.vp__rec-n { font: 400 34px var(--font-title); color: var(--vp-rank); line-height: 1; }
.vp__rec-n span { font-size: 17px; color: var(--vp-meta); }
.vp__dots { padding: 14px 24px 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 10px; position: relative; }
.vp__dot-cell { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.vp__dot-box { width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; }
.vp__dot-off {
  width: 54px; height: 54px; border-radius: 50%; border: 1.5px dashed var(--vp-empty);
  display: flex; align-items: center; justify-content: center;
  font: 600 11px var(--font-mono); color: var(--vp-empty);
}
.vp__stamp {
  width: 58px; height: 58px; border-radius: 50%; border: 3px solid var(--vp-ink); background: var(--vp-stampbg);
  display: flex; align-items: center; justify-content: center; transform: rotate(var(--rot, -7deg));
}
.vp__stamp-in {
  width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--vp-ink);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
}
.vp__stamp-day { font: 600 6.5px var(--font-mono); color: var(--vp-ink); letter-spacing: .08em; }
.vp__stamp-word { font: 400 16px var(--font-title); color: var(--vp-ink); line-height: 1.05; }
.vp__stamp--landing { animation: stampLand .55s .35s ease-out both; }
.vp__dot-label { font: 500 8.5px var(--font-body); color: var(--vp-meta); min-height: 11px; line-height: 1.2; white-space: nowrap; }
.vp__clear { margin: 16px 24px 0; padding-top: 12px; border-top: 1.5px dashed var(--vp-rule); position: relative; }
.vp__floors { display: flex; flex-direction: column; gap: 4px; margin-top: 8px; }
.vp__floor { display: flex; align-items: center; gap: 8px; }
.vp__floor-tick { display: block; width: 3px; height: 20px; border-radius: 2px; background: transparent; }
.vp__floor--cur .vp__floor-tick { background: var(--vp-acc); }
.vp__floor-code { width: 26px; font: 600 9.5px var(--font-mono); color: var(--vp-empty); text-align: right; }
.vp__floor--on .vp__floor-code { color: var(--vp-acc); }
.vp__floor-box {
  flex: 1; height: 22px; border: 1.5px dashed var(--vp-empty); border-radius: 6px;
  display: flex; align-items: center; gap: 7px; padding: 0 9px; box-sizing: border-box;
  color: var(--vp-empty);
}
.vp__floor--on .vp__floor-box { border-style: solid; border-color: var(--vp-acc); color: var(--vp-acc); }
.vp__floor--cur .vp__floor-box { background: var(--vp-accbg); }
.vp__floor-name { font: 400 13px var(--font-title); line-height: 1; white-space: nowrap; }
.vp__floor-mark { font: 600 8px var(--font-mono); letter-spacing: .14em; }
.vp__foot { margin: auto 24px 0; padding: 12px 0 16px; display: flex; align-items: flex-end; gap: 14px; position: relative; }
.vp__barcode {
  flex: none; width: 56px; height: 56px;
  background-image: repeating-conic-gradient(#1a1a1a 0 25%, transparent 0 50%), repeating-conic-gradient(#1a1a1a 0 25%, transparent 0 50%);
  background-size: 16px 16px, 7px 7px; background-color: var(--vp-plate);
  border: 4px solid var(--vp-plate); border-radius: 3px;
}
.vp__foot-text { flex: 1; min-width: 0; }
.vp__foot-note { font: 600 8.5px/1.6 var(--font-mono); color: var(--vp-meta); letter-spacing: .06em; }
.vp__emboss { font: 600 14.5px var(--font-mono); color: var(--vp-note); letter-spacing: .14em; margin-top: 6px; text-shadow: 0 1px 0 rgba(255, 255, 255, .35); }
@media (prefers-reduced-motion: reduce) {
  .vp__inner { transition: none; }
  .vp__holo, .vp__stamp--landing { animation: none; }
}

/* ── 사원증 열람 (PC · Tier A) — 줄에 매달린 카드 + 오른쪽 안내 패널 (목업 PC 사원증 열람) ── */
.overlay--pass { display: block; }
.passwrap {
  position: absolute; left: 296px; top: 8px;
  display: flex; align-items: flex-start; gap: 34px;
  animation: cardIn .3s ease;
}
.lanyard { flex: none; display: flex; flex-direction: column; align-items: center; }
.lanyard__strap {
  width: 88px; height: 60px;
  background: linear-gradient(90deg, rgba(0, 0, 0, .4), #c9c2ae 26%, #c9c2ae 74%, rgba(0, 0, 0, .4));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3);
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; box-sizing: border-box;
}
.lanyard__strap span { font: 600 6.5px var(--font-mono); color: #4d4736; letter-spacing: .3em; }
.lanyard__clip {
  width: 46px; height: 17px; border-radius: 4px; margin-top: -1px; z-index: 2;
  background: linear-gradient(#f4f6fa, #9aa2b2 52%, #e9ecf2);
  box-shadow: 0 3px 7px rgba(0, 0, 0, .5);
}
.lanyard .vp { margin-top: -5px; }
.passinfo {
  flex: none; width: 272px; margin-top: 70px;
  background: rgba(10, 14, 26, .94); border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 18px; box-shadow: 0 22px 44px rgba(0, 0, 0, .5);
  padding: 18px 20px; box-sizing: border-box;
  cursor: default;
}
.passinfo__kicker { font: 500 10.5px var(--font-mono); color: #a8b6d6; letter-spacing: .18em; }
.passinfo__title { font: 400 26px var(--font-title); color: #fff; margin-top: 4px; }
.passinfo__next {
  margin-top: 16px; border-radius: 12px; padding: 13px 15px;
  background: rgba(255, 255, 255, .09); border: 1px solid rgba(255, 255, 255, .16);
}
.passinfo__next-k { font: 500 10px var(--font-mono); color: #a8b6d6; letter-spacing: .14em; }
.passinfo__next-v { font: 400 18px var(--font-title); color: var(--volt); margin-top: 3px; }
.passinfo__fine { font: 500 12px var(--font-body); color: #a8b6d6; margin-top: 14px; }
/* 소개 중(`spot`)에는 카드만 남긴다 — 안내 패널은 그 순간의 이야기가 아니다. */
.overlay--spot .passinfo { display: none; }

/* ═══ 업무 화면 공용 골격 `.ws*` — 「한 화면에 한 가지 조작」 (2026-08-25) ═══════════════════
   DAY 01 의 직접 생산안(`.d1b*`) · 파트너안(`.d1p*`) 의 값을 그대로 일반화한 것이다. DAY 02~07 의
   업무 화면이 이걸 쓴다. 종이색 한 장 · 제목/부제 · 카드 줄 · 피드백 한 줄 · CTA 또는 안내 한 줄. */
.ws { background: #f2ede1; }
.ws__head { position: absolute; left: 50%; top: 96px; width: 920px; margin-left: -460px; text-align: center; }
.ws__title { font: 400 28px var(--font-title); color: var(--ink); }
.ws__sub { font: 500 14px var(--font-body); color: var(--muted); margin-top: 5px; }
.ws__body {
  position: absolute; left: 50%; top: 176px; width: 920px; margin-left: -460px;
  display: flex; flex-direction: column; gap: 12px;
}
.ws__body--two { flex-direction: row; gap: 48px; width: 1168px; margin-left: -584px; align-items: flex-start; }
.ws__col { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 10px; }
/* 두 판 사이의 흐름 표식(`zoneFlow` · ui.js) — 판 **사이의 골(gutter)에 흐르는** 요소다. 예전에는 `position: absolute; left: 50%` 로
   판 위에 겹쳐 떠서 「툭 튀어나와 보였다」(사용자 지적 · DAY 2 웨이퍼 판 안까지 들어갔다). 이제 flex 자식이라 판이 그만큼 자리를 비켜 준다.
   DAY 별 CSS 에 있던 네 벌의 복사본은 지웠다 — 여기가 유일한 정의다. */
.ws__body--two:has(.zoneflow) { gap: 12px; }
.zoneflow {
  flex: 0 0 auto; align-self: flex-start; margin-top: 104px; min-width: 64px; padding: 0 2px;
  display: flex; flex-direction: column; align-items: center; gap: 5px; pointer-events: none;
}
.zoneflow__arrow {
  width: 34px; height: 34px; border-radius: 50%; background: var(--ink); color: var(--volt);
  display: flex; align-items: center; justify-content: center; font: 400 19px var(--font-title);
  box-shadow: 0 3px 8px rgba(16, 22, 38, .18);
}
.zoneflow__label { font: 500 11px var(--font-body); color: #8a7f66; white-space: nowrap; text-align: center; }
.frame--mo .ws__body--two:has(.zoneflow) { gap: 6px; }
.frame--mo .zoneflow { flex-direction: row; align-self: center; margin-top: 0; min-width: 0; gap: 8px; padding: 2px 0; }
.frame--mo .zoneflow__arrow { width: 28px; height: 28px; font-size: 16px; rotate: 90deg; }
.frame--short .zoneflow { display: none; }   /* 짧은 폰에서는 접는다 — 구역 번호 ①②가 순서를 말한다 */
.ws__foot { position: absolute; left: 50%; bottom: 40px; width: 920px; margin-left: -460px; }
/* 안내 한 줄만 있는 바닥은 클릭을 가로채지 않는다 — 그 아래 카드가 눌려야 한다(DAY 03 병목 카드에서 겪었다). */
.ws__foot:not(:has(.ws__cta)) { pointer-events: none; }
.ws__cta {
  height: 60px; display: flex; align-items: center; justify-content: center;
  background: var(--volt); border-radius: 15px;
  font: 400 21px var(--font-title); color: var(--ink);
  cursor: pointer; animation: guidePulse 1.9s ease-in-out infinite;
}
.ws__cta:focus-visible { outline: 4px solid rgba(255, 211, 56, .85); outline-offset: 3px; }
.ws__cta--wait { background: #e7e2d4; color: #b5ad98; animation: none; pointer-events: none; }
.ws__guide { height: 60px; display: flex; align-items: center; justify-content: center; font: 400 19px var(--font-title); color: #a9861a; animation: hintBob 1.7s ease-in-out infinite; pointer-events: none; }
.ws__tip {
  background: #fff; border-radius: 13px; padding: 14px 16px; min-height: 52px; box-sizing: border-box;
  font: 500 13.5px/1.65 var(--font-body); color: var(--muted);
  box-shadow: 0 8px 20px rgba(42, 59, 102, .12);
}
.ws__tip--ok { color: #a9861a; }
.ws__tip--bad { color: var(--danger-dark); }
/* 흰 카드 — 파트너안 카드 문법. 누를 수 있으면 점선, 골랐으면 노랑, 이어졌으면 초록. */
.wcard {
  background: #fff; border-radius: 18px; padding: 22px; text-align: center;
  box-shadow: 0 12px 30px rgba(42, 59, 102, .14); border: 2px solid transparent;
}
.wcard--tap { border: 2px dashed #c9bfa8; cursor: pointer; }
.wcard--tap:focus-visible { outline: 4px solid rgba(255, 211, 56, .85); outline-offset: 3px; }
.wcard--on { border: 2px solid var(--volt); background: #fdf3d8; }
.wcard--ok { border: 2px solid var(--ok); }
.wcard--bad { border: 2px solid var(--danger-dark); background: #fbe4de; animation: shake .5s ease-out both; }
.wcard--dim { opacity: .55; }
.wcard__icon { font-size: 44px; line-height: 1.1; }
.wcard__name { font: 400 20px var(--font-title); color: var(--ink); margin-top: 8px; }
.wcard__note { font: 500 12.5px var(--font-body); color: var(--muted); margin-top: 3px; }
/* 가로 줄 카드 — 직접 생산안의 단계 줄 문법(번호 · 아이콘 · 이름/메타 · 오른쪽 값). */
.wrow {
  position: relative; display: flex; align-items: center; gap: 13px;
  background: #fff; border: 1.5px dashed #dcd5c4; border-radius: 13px; padding: 13px 15px;
}
.wrow--tap { border: 2px solid var(--volt); cursor: pointer; }
.wrow--tap:focus-visible { outline: 4px solid rgba(255, 211, 56, .85); outline-offset: 3px; }
.wrow--on { background: #fdf3d8; border: 1.5px solid #f0c93b; }
.wrow--ok { background: #dff3ea; border: 1.5px solid var(--ok); }
.wrow--bad { background: #fbe4de; border: 2px solid var(--danger-dark); animation: shake .5s ease-out both; }
.wrow--dim .wrow__name, .wrow--dim .wrow__val { color: #b5ad98; }
.wrow__no {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  background: #f0ebdd; color: #b5ad98; display: flex; align-items: center; justify-content: center;
  font: 400 15px var(--font-title);
}
.wrow--on .wrow__no, .wrow--tap .wrow__no { background: #f0c93b; color: #7a6210; }
.wrow__icon { font-size: 20px; line-height: 1; }
.wrow__body { flex: 1; min-width: 0; }
.wrow__name { font: 400 18px var(--font-title); color: var(--ink); }
.wrow__meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; font: 500 11.5px var(--font-body); color: var(--muted); flex-wrap: wrap; }
.wrow__meta i { width: 1px; height: 10px; background: #dcd5c4; }
.wrow__meta b { font: 600 11.5px var(--font-mono); color: var(--danger-dark); }
.wrow__val { flex: none; font: 400 16px var(--font-title); color: #c9bfa8; }
.wrow--on .wrow__val { color: #a9861a; }
.wrow--ok .wrow__val { color: var(--ok-dark); }
.wrow--bad .wrow__val { color: var(--danger-dark); }
/* 줄 위에 1.4초 떠오르는 붉은 배지 — 순서 오류·조건 미달을 그 줄에서 말한다. */
.wbadge {
  position: absolute; right: 14px; top: -13px;
  background: var(--danger-dark); border-radius: 9px; padding: 4px 11px;
  font: 500 12px var(--font-body); color: #fff; white-space: nowrap;
  box-shadow: 0 4px 10px rgba(196, 60, 40, .4); animation: badgeFloat 1.4s ease-out both;
}
/* 색 띠 머리 + 본문 상자 — 꼭 볼 것 · 결과 상자. */
.wsheet { background: #fdfbf5; border: 1.5px solid #e4dece; border-radius: 14px; overflow: hidden; }
.wsheet__head { background: #f7f4ea; border-bottom: 1px solid #e4dece; padding: 9px 15px; font: 400 15px var(--font-title); color: var(--muted); display: flex; align-items: center; gap: 8px; }
.wsheet__body { padding: 14px 15px; font: 500 13.5px/1.6 var(--font-body); color: var(--text); }
.wsheet__lead { font: 400 26px var(--font-title); color: var(--ink); }
.wsheet__note { font: 500 13px var(--font-body); color: #5a5548; margin-top: 4px; }
.wsheet--ok { background: #dff3ea; border-color: var(--ok); }
.wsheet--ok .wsheet__head { background: #cfeee0; border-bottom-color: var(--ok); color: var(--ok-dark); }
.wsheet--ok .wsheet__lead { color: var(--ok-dark); }
.wsheet--warn { background: #fff7dc; border-color: #f0c93b; }
.wsheet--warn .wsheet__head { background: #fdf3d8; border-bottom-color: #f0c93b; color: #a9861a; }
.wsheet--bad { background: #fff; border-color: #f0c0b6; }
.wsheet--bad .wsheet__head { background: #fbe4de; border-bottom-color: #f0c0b6; color: #a83a22; }
.wsheet--bad .wsheet__lead { color: var(--danger-dark); }
/* 상자 안 항목:값 줄 — 숫자는 오른쪽 정렬. */
.wkv { display: flex; justify-content: space-between; gap: 10px; font: 500 13px var(--font-body); color: #5a5548; }
.wkv b { color: var(--text); font-weight: 700; }
.wkv + .wkv { margin-top: 5px; }

/* ══════════════════════════════════════════════════════════════════════════
   11 DAY 현행 구조 — 사원증 권한이 다음 DAY 의 실제 자료로 나타나는 조각들
   ══════════════════════════════════════════════════════════════════════════ */

/* 조건 핀 레일 — DAY 1 에서 얻은 「조건 핀」. 고객 조건과 지금 후보 값을 같은 줄에서 비교한다. */
.pinrail {
  background: #fffdf6; border: 1.5px solid #e6dcc2; border-radius: 14px; padding: 10px 12px 8px;
  box-shadow: 0 6px 18px rgba(50, 40, 20, 0.08);
}
.pinrail__head { display: flex; align-items: center; gap: 7px; padding-bottom: 6px; border-bottom: 1.5px dashed #e6dcc2; }
.pinrail__icon { font-size: 15px; }
.pinrail__title { font: 400 15px var(--font-title); color: var(--ink); }
.pinrail__n { margin-left: auto; font: 500 11px var(--font-mono); color: var(--muted); }
.pin {
  display: grid; grid-template-columns: 22px 1fr auto auto 18px; align-items: center; gap: 8px;
  padding: 7px 4px; border-bottom: 1px solid #f0ebdd; font: 500 13px var(--font-body); color: var(--ink);
}
.pin:last-child { border-bottom: 0; }
.pin__icon { font-size: 15px; }
.pin__limit { font: 500 12px var(--font-mono); color: var(--muted); }
.pin__value { font: 400 16px var(--font-title); min-width: 52px; text-align: right; color: var(--ink); }
.pin__mark { font: 700 14px var(--font-body); text-align: center; }
.pin--idle .pin__value { color: var(--faint); }
.pin--ok .pin__value, .pin--ok .pin__mark { color: var(--ok-dark); }
.pin--bad .pin__value, .pin--bad .pin__mark { color: var(--danger, #c43c28); }
.pin--bad { background: rgba(196, 60, 40, 0.06); border-radius: 8px; }

/* 이월 자료 띠 — 「어제 얻은 권한이 오늘 자료로」. 화면 머리 아래 한 줄. */
.carrystrip {
  display: flex; align-items: center; gap: 12px; margin: 0 auto 10px; max-width: 920px;
  background: #1f2a44; color: #e8eefc; border-radius: 12px; padding: 8px 14px;
  box-shadow: 0 4px 14px rgba(20, 30, 60, 0.18);
}
.carrystrip__icon { font-size: 20px; }
.carrystrip__body { min-width: 0; }
.carrystrip__kicker { font: 500 10.5px var(--font-mono); letter-spacing: 0.12em; color: #f0c93b; }
.carrystrip__title { font: 400 15px var(--font-title); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.carrystrip__rows { margin-left: auto; display: flex; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.carrystrip__row { display: inline-flex; gap: 5px; align-items: baseline; font: 500 11.5px var(--font-body); color: #b9c4de; white-space: nowrap; }
.carrystrip__row b { font: 400 14px var(--font-title); color: #fff; }

/* 해금 창 — 다음 사용처 한 줄(master.md §15-1) */
.unlock__next {
  margin-top: 12px; display: flex; gap: 10px; align-items: baseline; justify-content: center;
  background: rgba(240, 201, 59, 0.14); border: 1.5px dashed rgba(240, 201, 59, 0.6); border-radius: 10px; padding: 8px 12px;
}
.unlock__next-k { font: 500 11px var(--font-mono); letter-spacing: 0.1em; color: var(--amber-text); white-space: nowrap; }
.unlock__next-v { font: 500 13px var(--font-body); color: var(--ink); }
.promo__col--access .unlock__next-v { color: var(--ink); }

/* D1-P02 — 위반 근거 고르기 · [현재 주문에는 부적합]
   ⚠ 예전에는 점 하나 붙은 **작은 알약**이었다 — 사용자가 「눌러야 하는 건지도 몰랐다」(2026-08-30).
   지금은 체크칸 + 실제 수치 + [고르기] 를 단 **큰 줄**(높이 46+)이고, 아직 안 고른 줄은 스스로 맥동한다.
   되돌리지 말 것: 상호작용 요소는 **정지 상태에서도** 「누르는 것」으로 읽혀야 한다(UX 계약 4번과 같은 줄기). */
/* 근거 창(`.d2rp`) — 제조장비 대사가 끝난 뒤에 뜬다(사용자 지시 2026-08-30 「이전 단계 끝나면 팝업으로」).
   Tier C 계층이지만 **판정 창이 아니라 내가 쓰는 창**이라 상단 띠가 노랑이다 — 붉은 6px 띠는 「뭐가 문제였을까?」의 정체다. */
.overlay--reasons { align-items: center; }
.d2rp {
  width: 520px; padding: 20px 24px 22px;
  background: var(--cream); border-top: 6px solid var(--volt); border-radius: 20px;
  box-shadow: 0 28px 64px rgba(0, 0, 0, .5);
  animation: cardIn .35s ease;
}
.d2rp__kicker { display: flex; align-items: center; gap: 9px; }
.d2rp__tag { background: #fdf3d8; border-radius: 8px; padding: 4px 11px; font: 500 11.5px var(--font-body); color: #7a6210; }
.d2rp__title { font: 400 25px var(--font-title); color: var(--ink); margin-top: 10px; }
.d2rp__foot { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.d2rp__back {
  flex: none; padding: 12px 16px; border-radius: 12px; cursor: pointer;
  background: #efe9db; color: var(--muted); font: 400 15px var(--font-title);
}
.d2rp__back:hover { background: #e6dfcd; color: var(--ink); }
.d1b-reasons { margin-top: 12px; display: flex; flex-direction: column; gap: 7px; }
.d1b-reasons__n { margin-left: auto; font: 600 11.5px var(--font-mono); color: var(--danger-dark); }
.d1b-reasons__guide { font: 500 12.5px var(--font-body); color: #a8604f; margin-top: 7px; }
/* 창을 닫아 두었을 때 작업대에 남는 다시 열기 버튼 */
.d1b__reopen {
  margin-top: 14px; text-align: center; padding: 12px 16px; border-radius: 12px; cursor: pointer;
  background: #fff5f2; border: 2px solid var(--danger, #c43c28); color: var(--danger-dark);
  font: 400 16px var(--font-title); animation: reasonCall 1.8s ease-in-out infinite;
}
.d1b__reopen:hover { background: #ffece7; }
@keyframes reasonCall {
  0%, 100% { box-shadow: 0 2px 0 #e6bfb3, 0 0 0 0 rgba(196, 60, 40, .34); }
  50% { box-shadow: 0 2px 0 #e6bfb3, 0 0 0 9px rgba(196, 60, 40, 0); }
}
.d1b-reason {
  display: flex; align-items: center; gap: 10px; min-height: 46px; padding: 8px 13px;
  background: #fff; border: 2px solid #e6bfb3; border-radius: 12px;
  font: 500 13px var(--font-body); color: var(--faint); cursor: default;
}
.d1b-reason--live { border-color: var(--danger, #c43c28); color: var(--danger-dark); cursor: pointer; animation: reasonCall 1.8s ease-in-out infinite; }
/* ⚠ 고른 줄에는 hover 배경을 씌우지 않는다 — 특이도가 높아 `--on` 의 붉은 배경을 덮는다(겪었다). */
.d1b-reason--live:not(.d1b-reason--on):hover { transform: translateY(-1px); background: #fff8f6; }
.d1b-reason--live:focus-visible { outline: 3px solid rgba(196, 60, 40, .5); outline-offset: 2px; }
/* 체크칸 — 「고를 수 있는 것」이라는 신호. 고르면 ✓ 가 찍힌다. */
.d1b-reason__box {
  flex: none; width: 21px; height: 21px; border-radius: 6px;
  border: 2px solid #d8b3a7; background: #fff;
  display: flex; align-items: center; justify-content: center;
}
.d1b-reason--live .d1b-reason__box { border-color: var(--danger, #c43c28); }
.d1b-reason__icon { font-size: 16px; line-height: 1; }
.d1b-reason__name { font: 400 17px var(--font-title); color: var(--ink); }
.d1b-reason__val { margin-left: auto; font: 600 12px var(--font-mono); color: var(--danger-dark); }
/* [고르기] — 이 줄에서 무엇을 하는지 말하는 작은 버튼 모양. */
.d1b-reason__cta {
  flex: none; border-radius: 999px; padding: 4px 11px;
  background: var(--danger, #c43c28); color: #fff; font: 400 12.5px var(--font-title); white-space: nowrap;
}
.d1b-reason:not(.d1b-reason--live) .d1b-reason__cta { background: #e0d9c9; color: #a9a08c; }
.d1b-reason--on {
  background: var(--danger, #c43c28); border-color: var(--danger, #c43c28); animation: none;
  box-shadow: 0 2px 0 #8f2618;
}
.d1b-reason--on .d1b-reason__name, .d1b-reason--on .d1b-reason__val { color: #fff; }
.d1b-reason--on .d1b-reason__box { background: #fff; border-color: #fff; }
.d1b-reason--on .d1b-reason__box::after { content: '✓'; font: 700 13px var(--font-body); color: var(--danger, #c43c28); }
.d1b-reason--on .d1b-reason__cta { background: rgba(255, 255, 255, .22); color: #fff; }
.d1b__unfit {
  flex: 1; margin-top: 0; text-align: center; padding: 12px 16px; border-radius: 12px; cursor: pointer;
  background: var(--danger, #c43c28); color: #fff; font: 400 17px var(--font-title); box-shadow: 0 4px 0 #8f2618;
}
.d1b__unfit:active { transform: translateY(3px); box-shadow: 0 1px 0 #8f2618; }
/* ⚠ 둘 다 고르기 전에도 **자리를 지킨다** — 버튼이 나타났다 사라지면 창 높이가 흔들린다. */
.d1b__unfit--wait { background: #e0d9c9; color: #a9a08c; box-shadow: none; pointer-events: none; }
.d1b-step--optional .d1b-step__val { color: var(--faint); font-size: 11px; }

/* DAY 8 — 품질 이력에서 온 「이전 이상 기록」 썸네일 */
.qh {
  display: flex; gap: 12px; align-items: center; background: #fffdf6; border: 1.5px solid #e6dcc2; border-radius: 12px; padding: 8px 12px; margin-bottom: 10px;
}
.qh__thumb { width: 64px; height: 64px; border-radius: 50%; background: #2a3142; position: relative; flex: none; box-shadow: inset 0 0 0 3px #46506a; }
.qh__dot { position: absolute; width: 7px; height: 7px; border-radius: 2px; background: #e8503a; transform: translate(-50%, -50%); box-shadow: 0 0 0 1.5px #fff; }
.qh__body { min-width: 0; }
.qh__kicker { font: 500 10.5px var(--font-mono); letter-spacing: 0.12em; color: var(--muted); }
.qh__title { font: 400 15px var(--font-title); color: var(--ink); }
.qh__note { font: 500 12px var(--font-body); color: var(--muted); margin-top: 2px; }
.in-quad--hinted .in-quad__name::after { content: ' · 이전 이상 기록'; font-size: 10px; color: #f0c93b; }

/* DAY 6 — DAY 5 의 제품 구성표가 성능 로그 슬롯의 머리로 남는다 */
.bn-comp { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; padding: 8px 10px; background: rgba(255, 255, 255, 0.55); border-radius: 10px; border: 1.5px dashed #b9c4de; }
.bn-comp__kicker { font: 500 10.5px var(--font-mono); letter-spacing: 0.1em; color: var(--muted); width: 100%; }
.bn-comp__part { display: inline-flex; align-items: center; gap: 5px; font: 500 12px var(--font-body); color: var(--ink); background: #fff; border-radius: 999px; padding: 4px 10px; border: 1px solid #e6dcc2; }
.bn-comp__pass { margin-left: auto; font: 500 11px var(--font-mono); color: var(--ok-dark); }

/* DAY 10 — 볼티 이름의 회의 자료 카드(DAY 9 대응안이 그대로 놓인다) */
.cp-board__doc { display: inline-flex; align-items: center; gap: 6px; font: 500 11px var(--font-mono); letter-spacing: 0.06em; color: #3a5aa8; background: #eaf0fc; border-radius: 6px; padding: 3px 8px; margin-bottom: 6px; }

/* 설계 조건 줄 — 제출 뒤 핀으로 고정된 표시(DAY 1 「조건 핀 3칸」) */
.dsg-row--pinned .dsg-row__name::before { content: '📌 '; font-size: 12px; }
.tr-node__who { display: block; font: 500 10.5px var(--font-body); color: var(--muted); margin-top: 2px; }
.qh__dot--seen { background: #ff7a5c; box-shadow: 0 0 0 2px #f0c93b; }

/* ── D1-00 튜토리얼(2026-08-27 · 사용자 추가) — 대사가 사원증을 열어 보여 주는 동안(`spot`) 카드를 오른쪽으로 옮긴다.
   옆 말풍선(`.dialog__line--aside`)이 40..400 을 쓰므로 카드(400 폭)는 440 부터 세운다. 안내 패널은 그 순간의 이야기가 아니라 접는다. */
.overlay--spot .passwrap { left: 440px; top: 8px; }
/* 「카드를 눌러서 뒤집어 봐」(`tapWait: 'flip'`) — 그 순간만 사원증 창이 대사 막(z 77) 위로 올라오고 카드만 눌린다. */
.overlay--tapcard { z-index: 78; }
.overlay--tapcard .vp { pointer-events: auto; cursor: pointer; }
.vp.spot { box-shadow: 0 0 0 3px var(--volt), 0 0 0 9px rgba(240, 201, 59, 0.35), 0 22px 44px rgba(0, 0, 0, .5); }
/* 「앞면에는 네 직급과 권한」(`mark: 'front'`) · 「뒷면에는 열한 개의 칸과 출입 권한 표」(`mark: 'back'`) —
   굵은 붉은 사각 테두리는 카드 가장자리에서 잘려 깨진 박스처럼 보였다. 읽을 곳에는
   붉은 세로 기준선과 옅은 워시가 한 번 펼쳐지고, 노란 링(.spot)은 누르는 곳에만 남긴다. */
.vp--mark-front .vp__id, .vp--mark-front .vp__access,
.vp--mark-back .vp__rec-head, .vp--mark-back .vp__clear { position: relative; }
.vp--mark-front .vp__id::after, .vp--mark-front .vp__access::after,
.vp--mark-back .vp__rec-head::after, .vp--mark-back .vp__clear::after {
  content: ''; position: absolute; inset: -4px -6px; border: 0; border-left: 4px solid #d64541; border-radius: 9px;
  background: linear-gradient(90deg, rgba(214, 69, 65, .16), rgba(214, 69, 65, .05) 58%, transparent 100%);
  pointer-events: none; transform-origin: left center; animation: markSweep .58s ease-out both;
}
@keyframes markSweep {
  from { opacity: 0; transform: scaleX(.08); }
  to { opacity: 1; transform: scaleX(1); }
}
@media (prefers-reduced-motion: reduce) {
  .vp--mark-front .vp__id::after, .vp--mark-front .vp__access::after,
  .vp--mark-back .vp__rec-head::after, .vp--mark-back .vp__clear::after { animation: none; }
}

/* ── 업무 지시 카드 스트리밍(사용자 요청 · 2026-08-27) — 제목 → 꼭 볼 것 → 메모가 흐르고, 뒤 화면은 `.frame--dim` 이 죽인다(main.js).
   커서가 닿기 전의 상자는 자리만 차지한 채 비어 보이고, CTA 는 다 흐를 때까지 잠긴다. */
.mfactor--hidden, .mission__memo--hidden { opacity: 0; }
.mfactor, .mission__memo { transition: opacity .18s ease; }
.mission__ack--wait { opacity: .45; cursor: default; box-shadow: none !important; transform: none !important; }
.mstream { position: relative; }
.mstream__ghost { visibility: hidden; }
.mstream__live { position: absolute; inset: 0; }
.promo__ok--wait { opacity: .45; cursor: default; box-shadow: none !important; transform: none !important; }
.mistake__title .mstream__ghost, .mistake__body .mstream__ghost { white-space: inherit; }
.card--hidden { opacity: 0; }
.unlock__next, .unlock__mentor { transition: opacity .18s ease; }

/* ═════════════════════════════════════════════════════════════════════════════
   엘리베이터 — 홀 · 카 · 혼남 · 도착 (`docs/UI:UX/엘리베이터 목업.html` · 사용자 지시 2026-08-28)

   좌표는 **PC 프레임 1280×800 · HUD 66** 기준이다(목업은 HUD 56이라 10px 씩 내렸다).
   세로(402×640~874 · HUD 112)는 이 파일 아래쪽 `.frame--mo` 블록이 다시 잡는다.

   ⚠ 문 여닫이는 `transform: translateX` 다 — 프레임의 `scale()` 아래에서도 정상이다.
      다만 `hum`(카 흔들림)이 도는 컨테이너 안에 하단 고정 CTA 를 두지 말 것(기존 함정).
   ═════════════════════════════════════════════════════════════════════════════ */

.elv { background: linear-gradient(#2b3450, #1d2540 44%, #161d31); overflow: hidden; }
.elv__tint { position: absolute; inset: 0; transition: background .5s ease; pointer-events: none; }

/* ── ① 홀 ────────────────────────────────────────────────────────────────── */
.elv-hall {
  position: absolute; left: 0; right: 0; top: 66px; bottom: 0;
  animation: sfade .35s ease both;
}
/* 방 — 조명·바닥·카·볼티의 집. PC 에서는 홀 전체를 채우고, 세로에서는 층 패널 위 칸이 된다. */
.elv-room {
  position: absolute; inset: 0; overflow: hidden;
  background: linear-gradient(#2b3450, #1d2540 44%, #161d31);
}
.elv-lamp { position: absolute; width: 190px; height: 190px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 238, 190, .3), rgba(255, 238, 190, 0) 70%); }
.elv-lamp--a { left: 14%; top: -70px; }
.elv-lamp--b { left: 46%; top: -76px; width: 210px; height: 210px; }
.elv-lamp--c { right: 12%; top: -70px; }
.elv-ceil { position: absolute; left: 0; right: 0; top: 34px; height: 1px; background: rgba(255, 255, 255, .14); }
.elv-ceil-sh { position: absolute; left: 0; right: 0; top: 39px; height: 4px; background: rgba(0, 0, 0, .22); }
.elv-floorband {
  position: absolute; left: 0; right: 0; bottom: 0; height: 196px;
  background: linear-gradient(#232b42, #323c58);
  background-image: linear-gradient(#232b42, #323c58),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 78px),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 46px);
}
.elv-skirt { position: absolute; left: 0; right: 0; bottom: 196px; height: 12px; background: linear-gradient(#4a5470, #333c56); }
/* 건물 명패 */
.elv-plaque { position: absolute; left: 56px; top: 104px; width: 148px; padding: 12px 14px;
  background: rgba(12, 17, 32, .6); border: 1px solid rgba(255, 255, 255, .14); border-radius: 10px; }
.elv-plaque__name { font: 500 12px var(--font-mono); color: #ffd338; letter-spacing: .14em; }
.elv-plaque__sub { font: 400 15px var(--font-title); color: #dbe3f2; margin-top: 3px; }
.elv-plaque__spec { font: 500 10.5px var(--font-mono); color: #8fa0c9; margin-top: 5px; }
/* ▲▼ 호출 버튼 — 카가 움직이는 방향만 켜진다 */
.elv-calls { position: absolute; left: 216px; top: 150px; display: flex; flex-direction: column; gap: 12px; }
.elv-btn {
  width: 46px; height: 46px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: #1a2036; color: #3f4a66; font-style: normal; font-size: 17px;
  box-shadow: inset 0 2px 5px rgba(0, 0, 0, .5);
}
.elv-btn--on { color: #7bd4a8; box-shadow: 0 0 12px rgba(123, 212, 168, .55); }
/* 카 — 표시기 + 문틀 */
.elv-car { position: absolute; left: 298px; top: 64px; bottom: 196px; width: 336px; display: flex; flex-direction: column; z-index: 2; }
.elv-ind {
  flex: none; background: #080c16; border: 4px solid #59617a; border-radius: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  animation: indGlow 1.4s ease-in-out infinite;
}
.elv-ind--hall { height: 66px; }
.elv-ind__current { width: 100%; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.elv-ind small { color: #67738c; font: 600 7px var(--font-mono); letter-spacing: .08em; }
.elv-ind__row { min-width: 0; display: flex; align-items: center; justify-content: center; gap: 5px; overflow: hidden; }
.elv-ind__arrow { font: 400 15px var(--font-mono); color: #3f4a66; }
.elv-ind__arrow--on { color: #7bd4a8; }
.elv-ind__floor { display: inline-block; min-width: 44px; text-align: center; font: 400 27px var(--font-mono); color: #ffd338; }
.elv-ind__floor--up-a { animation: floorRollUpA 240ms cubic-bezier(.2, .7, .3, 1) both; }
.elv-ind__floor--up-b { animation: floorRollUpB 240ms cubic-bezier(.2, .7, .3, 1) both; }
.elv-ind__floor--down-a { animation: floorRollDownA 240ms cubic-bezier(.2, .7, .3, 1) both; }
.elv-ind__floor--down-b { animation: floorRollDownB 240ms cubic-bezier(.2, .7, .3, 1) both; }
/* 문틀 안쪽 배경 = 문이 열렸을 때 보이는 **카 내부**. 문이 닫혀 있으면 문짝이 가린다. */
.elv-frame {
  flex: 1; margin-top: 14px; border: 7px solid #737b8f; border-bottom: 0;
  border-radius: 4px 4px 0 0; position: relative; overflow: hidden;
  background: #111827 url('/assets/runtime/v1/elevator/cabin-interior.webp') center / cover no-repeat;
}
/* 문 두 짝 — 닫힘이 기본, `--open` 이면 바깥으로 물러난다 */
.elv-doors { position: absolute; inset: 0; display: flex; }
.elv-door { flex: 1; background: linear-gradient(100deg, #9aa3b8, #7d879e 46%, #99a2b6); }
.elv-door--l { animation: dClL 460ms cubic-bezier(.3, 0, .3, 1) both; border-right: 1px solid rgba(0, 0, 0, .25); }
.elv-door--r { animation: dClR 460ms cubic-bezier(.3, 0, .3, 1) both; }
.elv-doors--open .elv-door--l { animation: dOpL 620ms cubic-bezier(.4, 0, .2, 1) both; }
.elv-doors--open .elv-door--r { animation: dOpR 620ms cubic-bezier(.4, 0, .2, 1) both; }
.elv-doors__seam { position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: rgba(0, 0, 0, .3); }
/* 이음선은 닫힌 두 문짝 사이의 표시다. 문짝이 벌어진 뒤 중앙에 남으면
   열린 카 안을 가르는 선처럼 보이므로 열림/탑승 동안은 함께 숨긴다. */
.elv-doors--open .elv-doors__seam { opacity: 0; }
/* 볼티 — 문이 완전히 열린 뒤 몸을 돌려 카 쪽으로 걸어 들어간다(PC는 좌우 반전). */
/* z 3 — 문틀(z 2) **앞**으로 걸어온다. 개구부 한가운데(문지방)에서 사라져야 들어가는 것이 보인다.
   뒤에 두면 문틀 테두리에 닿는 순간 없어져 「탑승」이 읽히지 않는다(겪었다). */
.elv-volti { position: absolute; left: 660px; bottom: 186px; z-index: 3; }
.elv-volti__img { position: static; height: 296px; animation: bob 2.8s ease-in-out infinite; }
.elv-volti--ready .elv-volti__img { animation: readyPC .62s ease-in-out both; }
.elv-volti--step .elv-volti__img { animation: stepInPC .86s linear both; }
/* 다 타고 나면 문이 닫히는 동안 계속 숨어 있는다(카 안이다). */
.elv-volti--in .elv-volti__img { opacity: 0; animation: none; }
/* 층 패널 */
.elv-panel {
  position: absolute; right: 56px; top: 96px; width: 296px;
  background: linear-gradient(#d9dde6, #b6bcca); border: 3px solid #eef1f7; border-radius: 8px;
  padding: 14px 15px 15px; box-shadow: 0 18px 40px rgba(0, 0, 0, .45);
}
.elv-panel__head { display: flex; align-items: center; gap: 8px; }
.elv-panel__kicker { font: 500 9.5px var(--font-mono); color: #5c6478; letter-spacing: .2em; }
.elv-panel__hair { flex: 1; height: 1px; background: rgba(0, 0, 0, .16); }
.elv-panel__ind { font: 500 12px var(--font-mono); color: #26304a; background: rgba(255, 255, 255, .6); border-radius: 5px; padding: 1px 7px; }
.elv-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.elv-row {
  display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 10px;
  background: rgba(255, 255, 255, .36); border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 10px; cursor: pointer;
}
.elv-row--lock { background: rgba(255, 255, 255, .12); cursor: default; }
.elv-row--here { background: rgba(240, 189, 21, .2); border: 1px solid rgba(160, 120, 10, .4); cursor: default; }
.elv-row--bad { animation: shake .5s ease-out both; }
.elv-row__btn {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
  background: radial-gradient(circle at 36% 30%, #fdfefe, #c4cad7);
  box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .2), 0 1px 0 rgba(255, 255, 255, .75);
}
.elv-row--here .elv-row__btn {
  background: radial-gradient(circle at 36% 30%, #ffe795, #f0bd15);
  box-shadow: 0 0 0 3px rgba(240, 189, 21, .45), inset 0 -2px 5px rgba(0, 0, 0, .22), 0 1px 0 rgba(255, 255, 255, .8);
}
.elv-row--lock .elv-row__btn { background: repeating-linear-gradient(45deg, #c0c5d0 0 3px, #b2b8c4 3px 6px); }
.elv-row--lock .elv-row__btn span { opacity: .4; }
.elv-row__body { flex: 1; min-width: 0; }
.elv-row__kicker { font: 500 8.5px var(--font-mono); color: #8a6a12; letter-spacing: .18em; }
.elv-row__name { font: 400 18px var(--font-title); color: #1f2738; display: flex; align-items: baseline; gap: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.elv-row__code { flex: none; }
.elv-row--lock .elv-row__name { color: #7b8290; }
.elv-row__code { font: 500 11px var(--font-mono); color: #26304a; }
.elv-row--lock .elv-row__code { color: #868d9c; }
.elv-row__right { flex: none; font: 500 11px var(--font-body); color: #8f96a4; border-radius: 999px; padding: 2px 8px; }
.elv-row--here .elv-row__right { background: rgba(240, 189, 21, .3); color: #57470a; }
.elv-row--goal .elv-row__right {
  background: var(--volt); border: 1px solid #c9a214; color: #4a3b05; font-weight: 700;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .55), 0 0 0 2px rgba(240, 189, 21, .12);
}
/* 카드 리더 */
.elv-reader { display: flex; align-items: center; gap: 9px; margin-top: 11px; background: #1c2233; border-radius: 9px; padding: 9px 12px; }
.elv-reader__dot { width: 6px; height: 6px; border-radius: 50%; background: #2e9d6c; box-shadow: 0 0 7px rgba(46, 157, 108, .8); }
.elv-reader__kicker { font: 500 8.5px var(--font-mono); color: #6b7690; letter-spacing: .2em; }
.elv-reader__text { font: 500 11.5px var(--font-body); color: #fff; margin-top: 1px; }
.elv-reader--bad .elv-reader__dot { background: #e8543f; box-shadow: 0 0 8px rgba(232, 84, 63, .9); }
.elv-reader--bad .elv-reader__text { color: #ff9c88; }
.elv-hint { margin-top: 9px; text-align: center; font: 500 12px var(--font-body); color: #3d4557; animation: hintBob 1.7s ease-in-out infinite; }
.elv-toast {
  margin-top: 8px; text-align: center; font: 500 12.5px var(--font-body); color: #fff;
  background: rgba(20, 26, 44, .92); border-radius: 9px; padding: 7px 10px; animation: toastIn .2s ease both;
}

/* ── ② 카 안 ─────────────────────────────────────────────────────────────── */
.elv-incar { position: absolute; left: 0; right: 0; top: 66px; bottom: 0; z-index: 8; display: flex; cursor: pointer; }
.elv-doors--car { position: absolute; inset: 0; z-index: 2; }
.elv-arrival { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #101626; }
.elv-arrival::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 18px; z-index: 1;
  background: linear-gradient(#9aa3b8, #59617a 42%, #242b3e); box-shadow: 0 -2px 8px rgba(0, 0, 0, .32);
}
.elv-cabin { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: #111827; }
.elv-cabin--moving { animation: hum 1.1s ease-in-out infinite; }
.elv-cabin__art {
  position: absolute; inset: 0; background: url('/assets/runtime/v1/elevator/cabin-interior.webp') center / cover no-repeat;
}
.elv-cabin__art::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(7, 11, 22, .16), transparent 38%, rgba(7, 11, 22, .25));
}
.elv-cabin > :not(.elv-cabin__art) { z-index: 1; }
.elv-ind--car { position: absolute; left: 50%; top: 62px; margin-left: -170px; width: 340px; height: 82px; }
.elv-ind--arrival { z-index: 3; }
.elv-cabin__volti { position: absolute; left: 50%; margin-left: -125px; bottom: 44px; width: 250px; text-align: center; }
.elv-cabin__img { position: static; height: 330px; animation: sway 2.6s ease-in-out infinite; }
.elv-skip { position: absolute; left: 0; right: 0; bottom: 16px; text-align: center; font: 500 12px var(--font-body); color: #b3c0dd; animation: hintBob 1.7s ease-in-out infinite; }

/* ── ③ 혼남 ─────────────────────────────────────────────────────────────── */
.elv-scold { position: absolute; left: 0; right: 0; top: 66px; bottom: 0; background: #101626; animation: none; }
.elv-floorart { position: absolute; inset: 0; z-index: 0; background-size: cover; background-position: center; }
.elv-floorart::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(8, 12, 24, .58) 0 36%, rgba(8, 12, 24, .1) 64%, rgba(8, 12, 24, .24));
}
.elv-scold > :not(.elv-floorart), .elv-landed > :not(.elv-floorart) { z-index: 2; }
.elv-scold::before, .elv-landed::before {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 124px; z-index: 1;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(8, 12, 24, 0), rgba(8, 12, 24, .38) 58%, rgba(8, 12, 24, .62));
}
.elv-scold__chip {
  position: absolute; left: 56px; top: 28px; display: flex; align-items: center; gap: 10px;
  background: rgba(196, 60, 40, .24); border: 1px solid #c43c28; border-radius: 9px;
  padding: 6px 12px; font: 500 13px var(--font-body); color: #ff9c88;
}
.elv-scold__where { font: 500 10px var(--font-mono); color: #8fa0c9; }
/* 「주의 n회」 — 도장처럼 꽂힌다. 기록이지 벌점이 아니다. */
.elv-warnstamp {
  position: absolute; right: 56px; top: 24px; border: 4px solid #6b7690; border-radius: 12px;
  padding: 6px 16px; font: 400 24px var(--font-title); color: #6b7690;
  animation: slamIn .55s .18s ease-out both;
}
.elv-warnstamp--on { border-color: #ffd338; color: #ffd338; }
.elv-warnstamp--hot { border-color: #c43c28; color: #ff8f79; }
.elv-scold__row { position: absolute; left: 56px; top: 104px; width: 640px; display: flex; gap: 16px; animation: bubbleIn .3s .1s ease-out both; }
.elv-scold__face { position: relative; z-index: 2; flex: none; width: 96px; height: 96px; border-radius: 50%; }
.elv-scold__avatar { display: block; width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
.elv-scold__burst {
  position: absolute; z-index: 3; left: 50%; top: -2px; width: 34px; height: auto; margin-left: -17px;
  object-fit: contain; pointer-events: none; filter: drop-shadow(0 3px 3px rgba(69, 12, 20, .32));
  transform-origin: 17px 28px; animation: burstIn .42s .2s cubic-bezier(.2, 1.45, .35, 1) both;
}
.elv-scold__bubble { flex: 1; background: #fffdf7; border-radius: 4px 20px 20px 20px; padding: 18px 22px; }
.elv-scold__name { font: 400 15px var(--font-title); }
.elv-scold__line { font: 400 30px/1.4 var(--font-title); color: #2a3b66; margin-top: 4px; }
.elv-scold__volti { position: absolute; left: 800px; bottom: 140px; animation: droop .4s .3s ease-out both; z-index: 1; }
.elv-scold__img { position: static; height: 400px; }
.elv-scold__say {
  position: absolute; left: 706px; bottom: 196px; z-index: 2; background: rgba(20, 26, 44, .9);
  border-radius: 14px 14px 4px 14px; padding: 10px 14px; font: 400 17px var(--font-title); color: #c7d2e8;
  animation: droop .4s .5s ease-out both;
}
.elv-remind {
  position: absolute; left: 56px; bottom: 126px; width: 560px;
  background: rgba(255, 211, 56, .14); border: 1px solid rgba(255, 211, 56, .42); border-radius: 13px;
  padding: 12px 16px; font: 500 14px var(--font-body); color: #ffd338;
}
.elv-cta {
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border-radius: 15px; font: 400 20px var(--font-title);
}
.elv-cta--back { position: absolute; left: 56px; bottom: 44px; width: 280px; height: 60px; background: var(--volt); color: var(--ink); box-shadow: 0 5px 0 var(--volt-dark); }

/* ── ④ 도착 ─────────────────────────────────────────────────────────────── */
.elv-landed { position: absolute; left: 0; right: 0; top: 66px; bottom: 0; background: #101626; animation: none; }
.elv-nameplate { position: absolute; left: 56px; top: 72px; display: flex; align-items: stretch; gap: 14px; animation: plateIn .45s .12s ease-out both; }
.elv-nameplate__code {
  flex: none; width: 104px; display: flex; align-items: center; justify-content: center;
  border-radius: 10px; font: 400 27px var(--font-mono); color: #0c1120;
}
.elv-nameplate__name { font: 400 38px var(--font-title); color: #fff; }
.elv-nameplate__role { font: 500 13.5px var(--font-body); color: #a8b6d6; margin-top: 3px; }
.elv-brief {
  position: absolute; left: 56px; top: 212px; width: 430px; background: rgba(12, 17, 32, .56);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: 17px; padding: 18px 20px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); animation: cardUp .4s .3s ease-out both;
}
.elv-brief__kicker { font: 500 9.5px var(--font-mono); color: #8fa0c9; letter-spacing: .2em; }
.elv-brief__task { font: 400 26px/1.4 var(--font-title); color: #fff; margin-top: 6px; }
.elv-brief__say { font: 500 13px var(--font-body); color: #c7d2e8; margin-top: 10px; }
.elv-landed__volti { position: absolute; left: 700px; bottom: 150px; animation: walkOut .5s ease-out both; }
.elv-landed__img { position: static; height: 410px; animation: bob 2.8s ease-in-out .5s infinite; }
.elv-landed__cta { position: absolute; left: 56px; bottom: 52px; display: flex; gap: 12px; isolation: isolate; }
.elv-landed__cta::before {
  content: ''; position: absolute; inset: -10px; z-index: -1; pointer-events: none;
  background: rgba(8, 12, 24, .32); border: 1px solid rgba(255, 255, 255, .16); border-radius: 21px;
  -webkit-backdrop-filter: blur(12px) saturate(1.08); backdrop-filter: blur(12px) saturate(1.08);
  box-shadow: 0 12px 28px rgba(4, 7, 15, .22);
}
.elv-cta--ghost { width: 150px; height: 60px; background: rgba(255, 255, 255, .1); color: #dbe3f2; border: 1px solid rgba(255, 255, 255, .2); font-size: 16px; }
.elv-cta--go { width: 260px; height: 60px; background: var(--volt); color: var(--ink); box-shadow: 0 5px 0 var(--volt-dark); }

/* ── 애니메이션 (목업 `style2.css` 그대로) ───────────────────────────────── */
@keyframes dClL { from { transform: translateX(-100%); } to { transform: none; } }
@keyframes dClR { from { transform: translateX(100%); } to { transform: none; } }
@keyframes dOpL { from { transform: none; } to { transform: translateX(-100%); } }
@keyframes dOpR { from { transform: none; } to { transform: translateX(100%); } }
@keyframes hum { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-1.5px); } }
@keyframes sway { 0%, 100% { transform: translateY(0) rotate(-.6deg); } 50% { transform: translateY(-4px) rotate(.6deg); } }
/* 같은 숫자 노드의 class 를 a/b 로 교대해 경유 층마다 애니메이션을 다시 시작한다. */
@keyframes floorRollUpA { from { opacity: 0; transform: translateY(68%); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes floorRollUpB { from { opacity: 0; transform: translateY(68%); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes floorRollDownA { from { opacity: 0; transform: translateY(-68%); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes floorRollDownB { from { opacity: 0; transform: translateY(-68%); filter: blur(2px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes readyPC {
  0% { transform: none; }
  55% { transform: translate(-3px, -3px) rotate(-1deg); }
  100% { transform: translateX(-7px) rotate(-2deg); }
}
/* 볼티가 **열린 문 안으로** 걸어 들어간다 — 문틀 가운데까지 가서 작아지며 카 안으로 사라진다.
   ⚠ `scaleX(-1)`(문 쪽을 보게 뒤집기)이 앞에 있어 `translateX` 부호가 화면 기준과 반대다.
      양수 = 화면 왼쪽. 예전 값(-148)은 문 반대쪽으로 걸어가고 있었다(사용자 지적 2026-08-29). */
@keyframes stepInPC {
  0% { opacity: 1; transform: scaleX(-1) translate(8px, 0) scale(1); }
  16% { opacity: 1; transform: scaleX(-1) translate(52px, -7px) scale(.98); }
  32% { opacity: 1; transform: scaleX(-1) translate(98px, 0) scale(.96); }
  48% { opacity: 1; transform: scaleX(-1) translate(150px, -8px) scale(.93); }
  64% { opacity: 1; transform: scaleX(-1) translate(205px, 0) scale(.9); }
  80% { opacity: .96; transform: scaleX(-1) translate(258px, -6px) scale(.84); }
  92% { opacity: .72; transform: scaleX(-1) translate(292px, 0) scale(.76); }
  100% { opacity: 0; transform: scaleX(-1) translate(310px, 0) scale(.7); }
}
/* 세로는 볼티가 왼쪽(10..122)이고 문틀이 가운데(131..271)라 화면 오른쪽으로 걷는다(뒤집기 없음). */
@keyframes readyM { from { transform: none; } to { transform: translateX(4px) rotate(2deg); } }
@keyframes stepInM {
  0% { opacity: 1; transform: translateX(0) scale(1); }
  18% { opacity: 1; transform: translate(22px, -4px) scale(.98); }
  36% { opacity: 1; transform: translate(46px, 0) scale(.96); }
  54% { opacity: 1; transform: translate(72px, -5px) scale(.92); }
  72% { opacity: 1; transform: translate(98px, 0) scale(.87); }
  88% { opacity: .82; transform: translate(122px, -3px) scale(.79); }
  100% { opacity: 0; transform: translateX(135px) scale(.72); }
}
@keyframes walkOut { from { opacity: 0; transform: translateX(-46px) scale(.94); } to { opacity: 1; transform: none; } }
@keyframes plateIn { from { opacity: 0; transform: translateX(-26px); } to { opacity: 1; transform: none; } }
@keyframes cardUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes indGlow { 0%, 100% { box-shadow: inset 0 0 14px rgba(255, 211, 56, .18); } 50% { box-shadow: inset 0 0 22px rgba(255, 211, 56, .4); } }
@keyframes guidePulse {
  0%, 100% { box-shadow: 0 3px 0 #b0890b, 0 0 0 0 rgba(255, 211, 56, .5); }
  50% { box-shadow: 0 3px 0 #b0890b, 0 0 0 12px rgba(255, 211, 56, 0); }
}
@keyframes toastIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes slamIn {
  0% { transform: scale(2.6) rotate(-24deg); opacity: 0; }
  55% { transform: scale(.92) rotate(-9deg); opacity: 1; }
  78% { transform: scale(1.06) rotate(-9deg); }
  100% { transform: scale(1) rotate(-9deg); }
}
@keyframes bubbleIn { 0% { opacity: 0; transform: translateX(-14px) scale(.94); } 100% { opacity: 1; transform: none; } }
@keyframes droop { 0% { opacity: 0; transform: translateY(-10px); } 100% { opacity: 1; transform: none; } }

/* ═══ 세로(모바일) — 402 × (640~874) · HUD 112 ══════════════════════════════
   목업 모바일은 iOS 프레임(위 54 · 아래 34)을 포함한 874 이라 좌표를 그대로 못 쓴다.
   여기서는 우리 프레임에 맞춰 다시 잡는다: 홀이 위, 층 패널이 아래 시트. */
.frame--mo .elv-hall, .frame--mo .elv-incar, .frame--mo .elv-scold, .frame--mo .elv-landed { top: var(--mo-hud); }
.frame--mo .elv-hall { display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain; }
/* 세로 — 방이 위(flex:1), 층 패널이 아래. 카가 패널을 덮지 않는다. */
.frame--mo .elv-room { position: relative; inset: auto; flex: 1 0 260px; min-height: 260px; }
.frame--mo .elv-plaque, .frame--mo .elv-calls { display: none; }
.frame--mo .elv-lamp--c { display: none; }
.frame--mo .elv-lamp--a { left: 16%; top: -66px; width: 132px; height: 132px; }
.frame--mo .elv-lamp--b { left: auto; right: 16%; top: -56px; width: 132px; height: 132px; }
.frame--mo .elv-floorband { height: 74px; }
.frame--mo .elv-skirt { bottom: 74px; height: 7px; }
.frame--mo .elv-car { position: absolute; left: 50%; margin-left: -70px; top: 14px; bottom: 74px; width: 140px; }
.frame--mo .elv-ind--hall { height: 44px; }
.frame--mo .elv-ind small { font-size: 5px; letter-spacing: 0; }
.frame--mo .elv-ind__arrow { font-size: 8px; }
.frame--mo .elv-ind__floor { min-width: 26px; font-size: 16px; }
.frame--mo .elv-frame { margin-top: 9px; border-width: 5px; border-bottom: 0; border-radius: 3px 3px 0 0; }
.frame--mo .elv-volti { left: 10px; bottom: 58px; }
.frame--mo .elv-volti__img { height: 150px; }
.frame--mo .elv-volti--ready .elv-volti__img { animation: readyM .62s ease-in-out both; }
.frame--mo .elv-volti--step .elv-volti__img { animation: stepInM .86s linear both; }
/* 층 패널 — 아래 시트. 짧은 폰에서는 더 줄인다. */
.frame--mo .elv-panel {
  position: static; margin-top: auto; width: auto; right: auto; top: auto;
  flex: none; border-radius: 0; border: 0; border-top: 3px solid #f0f2f7;
  box-shadow: 0 -10px 26px rgba(0, 0, 0, .4); padding: 12px 14px 14px;
}
.frame--mo .elv-rows { gap: 4px; margin-top: 7px; }
.frame--mo .elv-row { height: 44px; gap: 9px; padding: 0 9px; }
.frame--mo .elv-row__btn { width: 34px; height: 34px; font-size: 15px; }
.frame--mo .elv-row__name { font-size: 16px; }
/* 카드 리더는 접는다 — 패널 머리가 지금 층을 이미 말하고, 방이 좁아진다. */
.frame--mo .elv-reader { display: none; }
.frame--mo .elv-hint { font-size: 11.5px; margin-top: 7px; }
.frame--short .elv-row { height: 42px; }
.frame--short .elv-reader, .frame--short .elv-plaque { display: none; }
/* 카 안 */
.frame--mo .elv-cabin__art { background-position: center; }
.frame--mo .elv-ind--car { left: 50%; margin-left: -96px; top: 40px; width: 192px; height: 54px; }
.frame--mo .elv-ind--car .elv-ind__arrow { font-size: 11px; }
.frame--mo .elv-ind--car .elv-ind__floor { min-width: 34px; font-size: 21px; }
.frame--mo .elv-cabin__volti { left: 50%; margin-left: -112px; bottom: 22px; width: 224px; text-align: center; }
.frame--mo .elv-cabin__img { height: 232px; }
/* 혼남 · 도착 — 세로로 쌓고 CTA 는 바닥 고정 */
.frame--mo .elv-scold__chip { left: 14px; right: 14px; top: 14px; font-size: 11px; padding: 5px 10px; }
.frame--mo .elv-warnstamp { right: 14px; top: 52px; font-size: 15px; padding: 4px 10px; border-width: 3px; }
.frame--mo .elv-scold__row { left: 14px; right: 14px; top: 96px; width: auto; gap: 10px; }
.frame--mo .elv-scold__face { width: 64px; height: 64px; }
.frame--mo .elv-scold__burst { left: 50%; right: auto; top: -1px; width: 24px; margin-left: -12px; transform-origin: 12px 20px; }
.frame--mo .elv-scold__bubble { padding: 12px 14px; }
.frame--mo .elv-scold__line { font-size: 19px; }
.frame--mo .elv-scold__volti { left: 50%; margin-left: -116px; bottom: 128px; }
.frame--mo .elv-scold__img { height: 232px; }
.frame--mo .elv-scold__say { left: 14px; right: auto; top: 300px; bottom: auto; font-size: 14px; }
.frame--mo .elv-remind { left: 14px; right: 14px; width: auto; bottom: 84px; font-size: 12px; padding: 9px 12px; }
.frame--mo .elv-cta--back, .frame--mo .elv-cta--go {
  position: fixed; left: var(--mo-pad); right: var(--mo-pad); bottom: 14px;
  width: auto; height: var(--mo-cta); margin: 0; font-size: 18px;
}
.frame--mo .elv-nameplate { left: 14px; top: 20px; gap: 10px; }
.frame--mo .elv-nameplate__code { width: 74px; font-size: 20px; }
.frame--mo .elv-nameplate__name { font-size: 25px; }
.frame--mo .elv-brief { left: 14px; right: 14px; width: auto; top: 108px; padding: 14px 15px; }
.frame--mo .elv-brief__task { font-size: 19px; }
.frame--mo .elv-landed__volti { left: 50%; margin-left: -125px; bottom: 96px; }
.frame--mo .elv-landed__img { height: 250px; }
/* 도착의 두 버튼 — [↺ 홀]은 왼쪽 작게, [업무 시작하기]는 바닥 고정 CTA 다. */
.frame--mo .elv-landed__cta { left: 14px; right: 14px; bottom: 14px; }
.frame--mo .elv-cta--ghost { position: static; width: 104px; height: var(--mo-cta); font-size: 14px; }
.frame--mo .elv-landed__cta .elv-cta--go { position: static; flex: 1; width: auto; }

/* ═══════════════════════════════════════════════════════════════════════════
   출장 이동 — DAY 3·4. 셔틀 이동은 자동 연출이고, 도착한 뒤에만 CTA가 열린다.
   넓은 불투명 패널 대신 작은 반투명 유리 카드로 에셋의 장소감을 보존한다.
   ═══════════════════════════════════════════════════════════════════════════ */
.trip {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: #fff;
  background: #101827;
}
.trip__choice,
.trip__moving,
.trip__arrival { position: absolute; inset: 66px 0 0; overflow: hidden; }
.trip__choice-bg,
.trip__shuttle,
.trip__factory {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  user-select: none;
  pointer-events: none;
}
.trip__choice-bg { filter: saturate(.75); }
.trip__choice-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7,14,26,.9) 0, rgba(7,14,26,.62) 58%, rgba(7,14,26,.22) 100%),
    linear-gradient(0deg, rgba(7,14,26,.45), transparent 50%);
}
.trip-pick {
  position: absolute;
  z-index: 3;
  left: 52px;
  top: 34px;
  width: 710px;
  padding: 22px 24px 24px;
  border: 1px solid rgba(255,255,255,.26);
  border-radius: 22px;
  background: rgba(8,17,31,.76);
  box-shadow: 0 20px 50px rgba(0,0,0,.36);
  backdrop-filter: blur(16px);
}
.trip-pick__kicker {
  color: #ffd338;
  font: 700 12px/1.2 var(--font-mono);
  letter-spacing: .08em;
}
.trip-pick__title { margin-top: 7px; font: 400 34px/1.12 var(--font-title); }
.trip-pick__evidence {
  display: grid;
  gap: 3px;
  margin-top: 14px;
  padding: 11px 14px;
  border-left: 4px solid #ffd338;
  border-radius: 0 12px 12px 0;
  background: rgba(255,255,255,.1);
}
.trip-pick__evidence span { color: rgba(255,255,255,.62); font-size: 11px; font-weight: 700; }
.trip-pick__evidence b { font-size: 16px; line-height: 1.35; }
.trip-options { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 14px; }
.trip-option {
  position: relative;
  min-height: 150px;
  padding: 15px 15px 13px;
  border: 2px solid rgba(255,255,255,.25);
  border-radius: 16px;
  background: rgba(255,255,255,.08);
  cursor: pointer;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.trip-option:hover,
.trip-option:focus-visible {
  transform: translateY(-3px);
  border-color: #ffd338;
  background: rgba(255,211,56,.12);
  outline: none;
}
.trip-option__pin { color: #ffd338; font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.trip-option__place { margin-top: 5px; font: 400 21px/1.18 var(--font-title); }
.trip-option__purpose { margin-top: 7px; color: rgba(255,255,255,.72); font-size: 12px; line-height: 1.35; }
.trip-option__eta { margin-top: 10px; color: #bff4da; font-size: 11px; font-weight: 700; }
.trip-option__go { position: absolute; right: 13px; bottom: 11px; color: rgba(255,255,255,.68); font-size: 11px; font-weight: 700; }
.trip-option--wrong { border-color: #ff735f; background: rgba(232,84,63,.16); animation: tripWrong .34s ease-out both; }
.trip-option--wrong .trip-option__pin,
.trip-option--wrong .trip-option__go { color: #ff9b8c; }
.trip--wrong .trip-option { pointer-events: none; }
.trip-wrong {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5px 14px;
  align-items: center;
  margin-top: 12px;
  padding: 11px 12px 11px 14px;
  border: 1px solid rgba(255,115,95,.6);
  border-radius: 13px;
  background: rgba(79,23,23,.72);
  animation: tripFeedback .28s ease-out both;
}
.trip-wrong__title { color: #ffb0a4; font-size: 13px; font-weight: 700; }
.trip-wrong__reason { color: rgba(255,255,255,.8); font-size: 12px; line-height: 1.4; }
.trip-wrong__retry {
  grid-row: 1 / 3;
  grid-column: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 158px;
  min-height: 46px;
  padding: 0 14px;
  border: 1px solid rgba(255,255,255,.35);
  border-radius: 11px;
  background: rgba(255,255,255,.12);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.trip-wrong__retry:hover,
.trip-wrong__retry:focus-visible { border-color: #fff; background: rgba(255,255,255,.2); outline: none; }
.trip__volti--pick { right: 95px; bottom: 54px; }
.trip__volti--pick .trip__volti-img { height: 300px; }
.trip__shuttle { transform: scale(1.025); }
.trip--travel .trip__shuttle { animation: tripRide 1.35s ease-in-out infinite; }
.trip__roadflow {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  background: repeating-linear-gradient(102deg, transparent 0 14%, rgba(255,255,255,.16) 15%, transparent 17% 29%);
  mix-blend-mode: screen;
}
.trip--travel .trip__roadflow { opacity: .42; animation: tripRoad 1.1s linear infinite; }
.trip__shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(7,14,26,.8) 0, rgba(7,14,26,.36) 43%, transparent 68%),
    linear-gradient(0deg, rgba(7,14,26,.82) 0, transparent 35%);
}
.trip__head {
  position: absolute;
  left: 52px;
  top: 46px;
  width: 535px;
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}
.trip__kicker,
.trip__arrival-kicker {
  color: #ffd338;
  font: 700 13px/1.2 var(--font-mono);
  letter-spacing: .08em;
}
.trip__title,
.trip__arrival-title {
  margin-top: 8px;
  font: 400 42px/1.12 var(--font-title);
  letter-spacing: -.02em;
}
.trip__summary {
  display: inline-grid;
  grid-template-columns: auto 20px auto;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  padding: 10px 14px;
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 14px;
  background: rgba(10,19,34,.58);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
  backdrop-filter: blur(10px);
  font-size: 15px;
  font-weight: 700;
}
.trip__summary b { color: #ffd338; text-align: center; }
.trip__companion {
  margin-top: 12px;
  color: rgba(255,255,255,.84);
  font-size: 13px;
  font-weight: 700;
}
.trip__companion::first-letter { color: #62d5a0; }
.trip__volti { position: absolute; z-index: 2; pointer-events: none; }
.trip__volti--ride { right: 188px; bottom: 84px; }
.trip__volti-img {
  position: static;
  display: block;
  height: 300px;
  filter: drop-shadow(0 14px 18px rgba(0,0,0,.38));
}
.trip--travel .trip__volti--ride { animation: tripVolti 1.35s ease-in-out infinite; }
.trip__progress {
  position: absolute;
  z-index: 3;
  left: 52px;
  right: 52px;
  bottom: 30px;
  padding: 16px 20px 12px;
  border: 1px solid rgba(255,255,255,.25);
  border-radius: 18px;
  background: rgba(9,17,31,.7);
  box-shadow: 0 14px 34px rgba(0,0,0,.32);
  backdrop-filter: blur(14px);
}
.trip-route { position: relative; display: flex; justify-content: space-between; }
.trip-route__line {
  position: absolute;
  left: 12px;
  right: 12px;
  top: 7px;
  height: 2px;
  background: rgba(255,255,255,.28);
}
.trip-route__stop {
  position: relative;
  z-index: 1;
  display: grid;
  justify-items: center;
  gap: 7px;
  min-width: 110px;
  color: rgba(255,255,255,.55);
  font-size: 12px;
  font-weight: 700;
}
.trip-route__dot {
  width: 16px;
  height: 16px;
  border: 3px solid rgba(255,255,255,.48);
  border-radius: 50%;
  background: #26334a;
  box-shadow: 0 0 0 4px rgba(9,17,31,.88);
}
.trip-route__stop--done { color: #bff4da; }
.trip-route__stop--done .trip-route__dot { border-color: #5dd49b; background: #5dd49b; }
.trip-route__stop--now { color: #fff3b1; }
.trip-route__stop--now .trip-route__dot {
  border-color: #ffd338;
  background: #ffd338;
  box-shadow: 0 0 0 4px rgba(9,17,31,.88), 0 0 18px rgba(255,211,56,.8);
  animation: tripPulse 1s ease-in-out infinite;
}
.trip__caption { margin-top: 10px; text-align: center; color: rgba(255,255,255,.82); font-size: 13px; }

/* 공장 도착 */
.trip__factory { animation: tripArriveScale .8s ease-out both; }
.trip__arrival-shade {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8,17,31,.78) 0, rgba(8,17,31,.28) 50%, transparent 74%),
    linear-gradient(0deg, rgba(8,17,31,.52) 0, transparent 36%);
}
.trip__wipe {
  position: absolute;
  z-index: 6;
  inset: 0;
  background: #f6d772;
  transform-origin: left;
  animation: tripWipe .62s cubic-bezier(.72,0,.22,1) both;
  pointer-events: none;
}
.trip__arrival-card {
  position: absolute;
  z-index: 2;
  left: 52px;
  top: 44px;
  width: 510px;
  padding: 24px 26px;
  border: 1px solid rgba(255,255,255,.27);
  border-radius: 22px;
  background: rgba(8,17,31,.72);
  box-shadow: 0 18px 44px rgba(0,0,0,.32);
  backdrop-filter: blur(16px);
}
.trip__arrival-title { font-size: 39px; }
.trip__arrival-note { margin-top: 10px; color: rgba(255,255,255,.78); font-size: 15px; line-height: 1.55; }
.trip__arrival-task {
  display: grid;
  gap: 4px;
  margin-top: 18px;
  padding: 13px 15px;
  border-left: 4px solid #ffd338;
  border-radius: 0 12px 12px 0;
  background: rgba(255,255,255,.1);
}
.trip__arrival-task span { color: rgba(255,255,255,.63); font-size: 11px; font-weight: 700; }
.trip__arrival-task b { font-size: 17px; line-height: 1.35; }
.trip__volti--landed { right: 116px; bottom: 96px; animation: tripLand .58s .25s ease-out both; }
.trip__volti--landed .trip__volti-img { height: 330px; }
.trip__arrival-route {
  position: absolute;
  z-index: 3;
  left: 52px;
  bottom: 105px;
  width: 510px;
  padding: 14px 16px 10px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 16px;
  background: rgba(8,17,31,.64);
  backdrop-filter: blur(12px);
}
.trip__cta {
  position: absolute;
  z-index: 5;
  left: 52px;
  bottom: 28px;
  width: 390px;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #d3aa17;
  border-radius: 15px;
  color: #2f2a18;
  background: #ffd338;
  box-shadow: 0 10px 24px rgba(87,62,0,.35);
  font: 400 19px var(--font-title);
  cursor: pointer;
  animation: tripCtaIn .38s ease-out both;
}
.trip__cta:hover { transform: translateY(-2px); filter: brightness(1.04); }
.trip__cta:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }

@keyframes tripRide { 0%,100% { transform: scale(1.025) translate(0,0); } 50% { transform: scale(1.032) translate(-3px,2px); } }
@keyframes tripRoad { from { transform: translateX(0); } to { transform: translateX(-18%); } }
@keyframes tripVolti { 0%,100% { transform: translateY(0) rotate(-.4deg); } 50% { transform: translateY(3px) rotate(.4deg); } }
@keyframes tripPulse { 50% { transform: scale(.82); opacity: .78; } }
@keyframes tripWipe { 0% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
@keyframes tripArriveScale { from { opacity: .72; } to { opacity: 1; } }
@keyframes tripLand { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
@keyframes tripCtaIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes tripWrong { 0%,100% { transform: translateX(0); } 32% { transform: translateX(-6px); } 68% { transform: translateX(5px); } }
@keyframes tripFeedback { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: none; } }

/* 세로(모바일) */
.frame--mo .trip__choice,
.frame--mo .trip__moving,
.frame--mo .trip__arrival { inset: var(--mo-hud) 0 0; }
.frame--mo .trip__choice-bg { object-position: 53% center; }
.frame--mo .trip__choice-shade { background: linear-gradient(180deg, rgba(7,14,26,.9), rgba(7,14,26,.62)); }
.frame--mo .trip-pick {
  left: 14px;
  right: 14px;
  top: 14px;
  width: auto;
  padding: 16px;
  border-radius: 18px;
}
.frame--mo .trip-pick__kicker { font-size: 10px; }
.frame--mo .trip-pick__title { margin-top: 5px; font-size: 27px; }
.frame--mo .trip-pick__evidence { margin-top: 10px; padding: 9px 11px; }
.frame--mo .trip-pick__evidence b { font-size: 14px; }
.frame--mo .trip-options { grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
.frame--mo .trip-option { min-height: 104px; padding: 11px 12px; }
.frame--mo .trip-option__place { margin-top: 3px; font-size: 18px; }
.frame--mo .trip-option__purpose { margin-top: 3px; font-size: 11px; }
.frame--mo .trip-option__eta { margin-top: 6px; font-size: 10px; }
.frame--mo .trip-option__go { right: 11px; bottom: 9px; font-size: 10px; }
.frame--mo .trip-wrong { grid-template-columns: 1fr; gap: 4px; margin-top: 8px; padding: 9px 10px; }
.frame--mo .trip-wrong__title { font-size: 12px; }
.frame--mo .trip-wrong__reason { font-size: 10.5px; }
.frame--mo .trip-wrong__retry { grid-row: auto; grid-column: auto; min-height: 42px; margin-top: 4px; }
.frame--mo .trip__volti--pick { display: none; }
.frame--mo .trip__shuttle { object-position: 52% center; }
.frame--mo .trip__factory { object-position: 56% center; }
.frame--mo .trip__shade {
  background: linear-gradient(180deg, rgba(7,14,26,.76) 0, rgba(7,14,26,.12) 42%, rgba(7,14,26,.78) 100%);
}
.frame--mo .trip__head { left: 16px; right: 16px; top: 24px; width: auto; }
.frame--mo .trip__kicker { font-size: 11px; }
.frame--mo .trip__title { margin-top: 6px; font-size: 29px; }
.frame--mo .trip__summary { margin-top: 12px; padding: 8px 11px; gap: 5px; font-size: 12px; }
.frame--mo .trip__companion { margin-top: 8px; font-size: 11px; }
.frame--mo .trip__volti--ride { right: 25px; bottom: 130px; }
.frame--mo .trip__volti--ride .trip__volti-img { height: 180px; }
.frame--mo .trip__progress {
  left: 14px;
  right: 14px;
  bottom: 16px;
  padding: 13px 10px 10px;
  border-radius: 15px;
}
.frame--mo .trip-route__stop { min-width: 0; width: 31%; gap: 6px; font-size: 10px; line-height: 1.2; text-align: center; }
.frame--mo .trip-route__dot { width: 14px; height: 14px; }
.frame--mo .trip__caption { margin-top: 8px; font-size: 11px; }
.frame--mo .trip__arrival-shade {
  background: linear-gradient(180deg, rgba(8,17,31,.7) 0, rgba(8,17,31,.12) 45%, rgba(8,17,31,.64) 100%);
}
.frame--mo .trip__arrival-card {
  left: 16px;
  right: 16px;
  top: 22px;
  width: auto;
  padding: 18px;
  border-radius: 18px;
}
.frame--mo .trip__arrival-kicker { font-size: 11px; }
.frame--mo .trip__arrival-title { margin-top: 5px; font-size: 29px; }
.frame--mo .trip__arrival-note { margin-top: 7px; font-size: 12px; line-height: 1.45; }
.frame--mo .trip__arrival-task { margin-top: 12px; padding: 10px 11px; }
.frame--mo .trip__arrival-task b { font-size: 15px; }
.frame--mo .trip__volti--landed { right: 20px; bottom: 137px; }
.frame--mo .trip__volti--landed .trip__volti-img { height: 205px; }
.frame--mo .trip__arrival-route {
  left: 14px;
  right: 14px;
  bottom: 88px;
  width: auto;
  padding: 11px 9px 8px;
}
.frame--mo .trip__cta {
  position: fixed;
  left: var(--mo-pad);
  right: var(--mo-pad);
  bottom: 14px;
  width: auto;
  height: var(--mo-cta);
  font-size: 18px;
}
.frame--short .trip__arrival-card { top: 12px; padding: 14px 16px; }
.frame--short .trip__arrival-note { display: none; }
.frame--short .trip__volti--landed { bottom: 128px; }
.frame--short .trip-pick { top: 8px; padding: 13px 14px; }
.frame--short .trip-pick__evidence { margin-top: 7px; }
.frame--short .trip-options { margin-top: 7px; }
.frame--short .trip-option { min-height: 92px; }

@media (prefers-reduced-motion: reduce) {
  .trip--travel .trip__shuttle,
  .trip--travel .trip__roadflow,
  .trip--travel .trip__volti--ride,
  .trip-route__stop--now .trip-route__dot,
  .trip__factory,
  .trip__wipe,
  .trip__volti--landed,
  .trip__cta,
  .trip-option--wrong,
  .trip-wrong { animation: none; }
}