/* 업무 인수인계 대시보드 demo — a Windows window in the app's HSOrbit theme */
.hd-handover { --wd-paper: #f4f3ee; --wd-line: #e2e0d8; --wd-muted: #6b6a64; --wd-soft: #efede6; }
.hd-handover[data-layout="wide"] .wd-win { left: 32px; top: 32px; width: 600px; height: 520px; }
.hd-handover[data-layout="compact"] .wd-win { left: 16px; top: 16px; width: 326px; height: 520px; }
.hd-handover[data-layout="compact"] .wd-side, .hd-handover[data-layout="compact"] .wide-only { display: none; }
.hd-handover[data-layout="compact"] .hd-caps span { width: 36px; }
.wd-win { background: var(--wd-paper); }
.wd-body { flex: 1; display: flex; min-height: 0; }
.wd-side { width: 148px; flex: none; padding: 14px 10px; display: flex; flex-direction: column; gap: 2px; border-right: 1px solid var(--wd-line); }
.wd-nav { height: 30px; display: flex; align-items: center; padding: 0 12px; border-radius: 999px; font-size: 12.5px; line-height: 1.3; white-space: nowrap; color: var(--s-ink); }
.wd-nav[data-on] { background: var(--s-ink); color: var(--wd-paper); font-weight: 600; }
.wd-sec { margin: 10px 12px 4px; font-size: 11px; font-weight: 700; line-height: 1.3; color: var(--s-accent-ink); }
.wd-main { position: relative; flex: 1; min-width: 0; }
.wd-scene { position: absolute; inset: 0; padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; }
.hd-handover[data-layout="compact"] .wd-scene { padding: 14px; }
.wd-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wd-title { font-size: 15px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.wd-seg { display: flex; padding: 3px; border-radius: 999px; background: var(--wd-soft); }
.wd-seg span { padding: 4px 10px; border-radius: 999px; font-size: 11.5px; line-height: 1.3; color: var(--wd-muted); white-space: nowrap; }
.wd-seg span[data-on] { background: #fff; color: var(--s-ink); font-weight: 600; box-shadow: 0 0 0 1px var(--wd-line); }
.wd-card { background: #fff; border: 1px solid var(--wd-line); border-radius: 14px; }

/* A: roadmap infographic */
.wd-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.hd-handover[data-layout="compact"] .wd-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.wd-stat { background: #fff; border: 1px solid var(--wd-line); border-radius: 14px; padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; }
.wd-stat > span { font-size: 11px; line-height: 1.3; color: var(--wd-muted); white-space: nowrap; }
.wd-stat b { font-size: 20px; line-height: 1.1; font-weight: 700; font-variant-numeric: tabular-nums; }
.wd-months { flex: 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; background: #fff; border: 1px solid var(--wd-line); border-radius: 14px; padding: 10px; }
.hd-handover[data-layout="compact"] .wd-months { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.wd-col { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.wd-m { font-size: 11.5px; font-weight: 700; line-height: 1.3; padding: 0 2px 4px; border-bottom: 1px solid var(--wd-line); margin-bottom: 2px; }
.wd-chip { height: 22px; display: flex; align-items: center; padding: 0 7px; border-radius: 7px; background: var(--wd-soft); font-size: 11px; line-height: 1.3; white-space: nowrap; overflow: hidden; }
.wd-chip.hot { background: var(--s-accent-soft); color: var(--s-accent-ink); font-weight: 600; }
.wd-chip.bar { background: #f7f6f2; }

/* B: a 공문 becomes a task */
.wd-file { position: relative; display: flex; align-items: center; gap: 10px; padding: 10px 10px 10px 12px; overflow: hidden; }
.wd-fic { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--wd-soft); flex: none; }
.wd-fic svg.ic { width: 15px; height: 15px; }
.wd-fname { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wd-prog { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--wd-soft); }
.wd-progfill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--s-accent); }
.wd-status { position: relative; height: 16px; font-size: 11.5px; line-height: 1.3; color: var(--wd-muted); }
.wd-status span { position: absolute; left: 2px; top: 0; opacity: 0; white-space: nowrap; }
.wd-st2 { color: var(--s-ok); font-weight: 600; }
.wd-result { overflow: hidden; margin-top: -4px; }
.wd-task { display: flex; gap: 10px; padding: 12px; }
.wd-box { width: 18px; height: 18px; border-radius: 5px; background: var(--s-ink); color: var(--wd-paper); display: grid; place-items: center; flex: none; margin-top: 1px; }
.wd-box svg.ic { width: 12px; height: 12px; stroke-width: 3; }
.wd-tbody { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.wd-ttitle { font-size: 13px; font-weight: 700; line-height: 1.35; }
.wd-meta { display: flex; gap: 6px; }
.wd-pill { font-size: 11px; line-height: 1.3; padding: 2px 8px; border-radius: 999px; background: var(--wd-soft); color: var(--s-ink); white-space: nowrap; }
.wd-actions { display: flex; justify-content: flex-end; }
.wd-toast { bottom: 20px; }

/* C: the handover package */
.wd-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wd-select { height: 30px; display: flex; align-items: center; padding: 0 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--wd-line); font-size: 12.5px; line-height: 1.3; white-space: nowrap; }
.hd-handover[data-layout="compact"] .wd-select { display: none; }
.wd-doc { flex: 1; background: #fff; border: 1px solid var(--wd-line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 9px; }
.wd-dtitle { font-size: 13.5px; font-weight: 700; line-height: 1.3; padding-bottom: 8px; border-bottom: 1px solid var(--wd-line); }
.wd-dline { font-size: 12.5px; line-height: 1.4; white-space: nowrap; display: flex; align-items: center; gap: 10px; min-height: 18px; }
.wd-dline b { font-weight: 700; color: var(--s-accent-ink); width: 22px; flex: none; }
.wd-dh { font-weight: 700; color: var(--wd-muted); font-size: 11.5px; }
.wd-dline .hd-fill { width: 100%; }
.wd-blank { padding: 1px 4px; border-radius: 5px; background: var(--s-accent-soft); color: var(--s-accent-ink); }
.wd-folder { padding: 12px; display: flex; flex-direction: column; gap: 6px; }
.wd-fhead { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 700; line-height: 1.3; padding-bottom: 8px; border-bottom: 1px solid var(--wd-line); }
.wd-fold { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 8px; background: var(--s-accent-soft); color: var(--s-accent-ink); flex: none; }
.wd-fold svg.ic { width: 15px; height: 15px; }
.wd-frow { display: flex; align-items: center; gap: 8px; font-size: 12px; line-height: 1.3; white-space: nowrap; min-width: 0; }
.wd-frow span:last-child { overflow: hidden; text-overflow: ellipsis; }
.wd-frow .wd-fic { width: 24px; height: 24px; border-radius: 7px; }
.wd-frow .wd-fic svg.ic { width: 13px; height: 13px; }