:root {
  --bg: #07080c; --panel: rgba(255,255,255,.045); --edge: rgba(255,255,255,.09);
  --fg: #e8eaf0; --fg2: rgba(232,234,240,.88); --muted: rgba(214,219,232,.72);
  --fill: rgba(255,255,255,.06); --fill2: rgba(255,255,255,.09); --sep: rgba(255,255,255,.08);
  --accent: #6366f1; --accent2: #22d3ee; --link: #8b9cff; --danger: #ff5a5f; --ok: #4ade80; --warn: #facc15;
  --grad: linear-gradient(135deg, #4f46e5, #0891b2);
  --ease: cubic-bezier(.22,1,.36,1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body { min-height: 100vh; color: var(--fg); word-break: keep-all;
  font: 15px/1.55 -apple-system, "SF Pro", "Apple SD Gothic Neo", "Pretendard Variable", sans-serif;
  background:
  radial-gradient(900px 500px at 85% -10%, rgba(79,70,229,.38), transparent 70%),
  radial-gradient(700px 500px at -5% 45%, rgba(6,182,212,.2), transparent 70%), #07080c;
  background-attachment: fixed; }
a { color: var(--link); text-decoration: none; }
h1 { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 18px; }
.lbl { font-size: 13px; color: var(--muted); }
.card { background: var(--panel); border: 1px solid var(--edge); border-radius: 18px; padding: 20px;
  backdrop-filter: blur(24px) saturate(140%); -webkit-backdrop-filter: blur(24px) saturate(140%);
  animation: rise .5s var(--ease) both; }
.card:nth-child(2) { animation-delay: 40ms; } .card:nth-child(3) { animation-delay: 80ms; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.hero { background: var(--grad); border-color: transparent; box-shadow: 0 30px 60px -30px rgba(79,70,229,.8); }
.hero .lbl { color: rgba(255,255,255,.85); }
.kpi { font-size: 38px; font-weight: 700; letter-spacing: -0.02em; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.tag { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.tag.ok { background: rgba(74,222,128,.22); color: var(--ok); }
.tag.bad { background: rgba(255,90,95,.22); color: var(--danger); }
.bar { height: 6px; background: var(--fill2); border-radius: 6px; overflow: hidden; margin-top: 10px; }
.bar i { display: block; height: 100%; background: linear-gradient(90deg,#6366f1,#22d3ee); }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 17px; margin-bottom: 18px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent2); box-shadow: 0 0 10px var(--accent2); }
button { font: inherit; cursor: pointer; border: 0; border-radius: 12px; padding: 10px 16px; color: #fff;
  transition: transform .15s var(--ease); }
button:active { transform: translateY(1px) scale(.98); }
.primary { background: linear-gradient(135deg,#6366f1,#0ea5c6); font-weight: 600;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.25), 0 10px 24px -10px rgba(99,102,241,.8); }
.ghost { background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.05));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.15); color: var(--fg2); padding: 6px 12px; font-size: 13px; }
/* 로그인 */
body.bare main { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.login { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 12px; }
.login h1 { margin: 0; }
.login label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--fg2); }
input { font: inherit; color: var(--fg); background: rgba(0,0,0,.35); border: 1px solid var(--edge);
  border-radius: 12px; padding: 10px 12px; outline: none; }
input:focus { border-color: var(--accent); }
.err { color: var(--danger); margin: 0; font-size: 13px; }
/* 앱 레이아웃 */
body.app { display: grid; grid-template-columns: 220px 1fr; }
.side { position: sticky; top: 0; height: 100vh; padding: 22px 14px; border-right: 1px solid var(--sep);
  display: flex; flex-direction: column; gap: 4px; }
.side a { display: flex; align-items: center; gap: 10px; color: var(--fg2); padding: 9px 12px; border-radius: 12px; }
.side a.on { background: rgba(255,255,255,.08); color: var(--fg); }
.side a.on svg { color: var(--accent2); filter: drop-shadow(0 0 6px var(--accent2)); }
.out { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 13px; color: var(--muted); }
body.app main { padding: 32px; min-width: 0; }
@media (max-width: 760px) {
  body.app { display: block; padding-bottom: 76px; }
  body.app main { padding: 20px 16px; }
  .side { position: fixed; top: auto; bottom: 0; left: 0; right: 0; height: auto; z-index: 10;
    flex-direction: row; justify-content: space-around; padding: 8px 4px; border-right: 0;
    border-top: 1px solid var(--edge); background: rgba(10,11,18,.62); backdrop-filter: blur(24px); }
  .side .brand, .side .out { display: none; }
  .side a { flex-direction: column; gap: 2px; font-size: 11px; padding: 6px 4px; }
  .grid { grid-template-columns: 1fr; }
}
/* M2 칸반·배정 조정 */
select { font: inherit; font-size: 13px; color: var(--fg); background: rgba(0,0,0,.35); border: 1px solid var(--edge);
  border-radius: 10px; padding: 6px 8px; outline: none; max-width: 100%; }
select:focus { border-color: var(--accent); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 16px; }
.kboard { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr); gap: 12px;
  overflow-x: auto; padding-bottom: 12px; align-items: start; }
.kcol { background: rgba(255,255,255,.03); border: 1px solid var(--edge); border-radius: 18px; padding: 10px;
  min-height: 200px; transition: border-color .15s var(--ease), background .15s var(--ease); }
.kcol.over { border-color: var(--accent2); background: rgba(34,211,238,.06); }
.kcol header { display: flex; justify-content: space-between; align-items: center; padding: 4px 6px 10px; font-size: 14px; }
.cnt { font-size: 12px; color: var(--muted); background: var(--fill2); border-radius: 999px; padding: 1px 8px; }
.kdrop { display: flex; flex-direction: column; gap: 8px; min-height: 120px; }
.kcard { background: var(--panel); border: 1px solid var(--edge); border-radius: 14px; padding: 12px; cursor: grab;
  display: flex; flex-direction: column; gap: 6px; backdrop-filter: blur(24px); animation: rise .4s var(--ease) both; }
.kcard:hover { border-color: rgba(255,255,255,.18); }
.kcard.dragging { opacity: .45; }
.kt { font-weight: 600; font-size: 14px; line-height: 1.4; }
.km { font-size: 12px; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag.x { background: rgba(139,92,246,.22); color: #c4b5fd; }
.tag.mute { background: var(--fill2); color: var(--muted); }
.mute { color: var(--muted); font-size: 12px; }
.of { font-size: 18px; color: var(--muted); }
.wide { margin-top: 16px; }
.row { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-bottom: 12px; }
.sp { flex: 1; }
.tblwrap { overflow-x: auto; }
.tbl { width: 100%; border-collapse: collapse; font-size: 14px; }
.tbl th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 8px; border-bottom: 1px solid var(--sep); }
.tbl td { padding: 10px 8px; border-bottom: 1px solid var(--sep); vertical-align: top; }
.tbl tr:hover td { background: rgba(255,255,255,.025); }
#toast { position: fixed; right: 20px; bottom: 20px; padding: 10px 16px; border-radius: 12px; font-size: 14px;
  background: rgba(20,22,32,.85); border: 1px solid var(--edge); backdrop-filter: blur(24px);
  opacity: 0; transform: translateY(8px); transition: all .25s var(--ease); pointer-events: none; z-index: 20; }
#toast.show { opacity: 1; transform: none; }
#toast.bad { border-color: rgba(255,90,95,.5); color: var(--danger); }
@media (max-width: 760px) { #toast { bottom: 90px; left: 16px; right: 16px; } .kboard { grid-auto-columns: 82vw; } }
/* M3 승인함 */
textarea { font: inherit; color: var(--fg); background: rgba(0,0,0,.35); border: 1px solid var(--edge); border-radius: 12px;
  padding: 10px 12px; outline: none; width: 100%; resize: vertical; }
textarea:focus { border-color: var(--accent); }
.u1 { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.u1 .row { margin: 0; }
.ilist { display: flex; flex-direction: column; gap: 12px; }
.ibox { display: flex; flex-direction: column; gap: 10px; transition: opacity .3s var(--ease), transform .3s var(--ease); }
.ibox .row { margin: 0; }
.ibox.gone { opacity: 0; transform: translateX(16px); }
.ititle { font-size: 15px; }
.row.end { justify-content: flex-end; }
.exit { margin: 0; padding-left: 20px; color: var(--fg2); font-size: 14px; }
.ghost.danger { color: var(--danger); }
button:disabled { opacity: .45; cursor: not-allowed; }
h1 .cnt { font-size: 14px; vertical-align: middle; }
@media (max-width: 760px) { .row.end { justify-content: stretch; } .row.end button { flex: 1; } }
.ibox, .ilist, .u1 { min-width: 0; }
.ibox > .tag { align-self: flex-start; }
.ibox .tbl { font-size: 13px; }
/* M4 S5 이슈 상세 + AI 작업창 */
a.plain { color: inherit; } a.plain:hover { color: var(--link); }
.crumb { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.s5 { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(320px, 1fr); gap: 16px; margin-top: 16px; align-items: start; }
.s5main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.s5side { position: sticky; top: 20px; min-width: 0; }
.md { font-size: 14px; color: var(--fg2); overflow-wrap: anywhere; }
.md h3, .md h4, .md h5 { font-size: 15px; margin: 14px 0 6px; color: var(--fg); }
.md p { margin: 6px 0; } .md ul { margin: 6px 0; padding-left: 20px; }
.md ul.check { list-style: none; padding-left: 2px; }
.md ul.check li { display: flex; gap: 8px; align-items: flex-start; }
.md ul.check li.on span { color: var(--muted); text-decoration: line-through; }
.md code { background: var(--fill2); border-radius: 6px; padding: 1px 6px; font-size: 13px; }
.md pre { background: rgba(0,0,0,.35); border: 1px solid var(--edge); border-radius: 12px; padding: 10px; overflow-x: auto; font-size: 13px; }
.md .ref { color: var(--accent2); }
.mr { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; font-size: 14px; }
.note { padding: 10px 0; border-bottom: 1px solid var(--sep); } .note:last-child { border-bottom: 0; }
.chat { display: flex; flex-direction: column; gap: 10px; }
.chat .row { margin: 0; }
.msgs { display: flex; flex-direction: column; gap: 8px; max-height: 52vh; overflow-y: auto; padding-right: 2px; }
.msg { max-width: 92%; padding: 10px 12px; border-radius: 14px; border: 1px solid var(--edge); animation: rise .3s var(--ease) both; }
.msg.me { align-self: flex-end; background: rgba(99,102,241,.22); border-color: rgba(99,102,241,.35); }
.msg.ai { align-self: flex-start; background: var(--fill); }
.msg.wait { opacity: .6; }
.fold summary { cursor: pointer; font-size: 13px; color: var(--muted); }
input[type=checkbox] { accent-color: var(--accent); }
@media (max-width: 1000px) { .s5 { grid-template-columns: minmax(0, 1fr); } .s5side { position: static; } }
/* M5 S3 진척·S6 회고 */
main h2 { font-size: 16px; font-weight: 600; color: var(--fg2); margin: 24px 0 10px; }
.grid.two { grid-template-columns: repeat(auto-fill, minmax(min(100%, 420px), 1fr)); margin-top: 16px; }
.grid .row { flex-wrap: wrap; gap: 6px; }
.grid > * { min-width: 0; }
.tbl td .tag { white-space: nowrap; }
/* 4층 화면 (t_24b4ff6f): 대시보드·타임라인·프로젝트 상세·내 할 일 — preview.html 기준 */
h2 { font-size: 17px; margin: 0 0 12px; letter-spacing: -.01em; }
.h2 { margin: 20px 0 12px; }
.mt { margin-top: 16px; }
.head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 20px; flex-wrap: wrap; }
.head.sm { align-items: flex-start; margin-bottom: 12px; } .head.sm h2 { margin-bottom: 8px; }
.head h1 { margin: 0; }
.btn { display: inline-block; text-decoration: none; border-radius: 12px; }
.row.nomb { margin: 0; } .row.acts { margin: 16px 0 0; }
.kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.kpis .kpi { font-size: 34px; line-height: 1.1; }
.tag { white-space: nowrap; }
.tag.warn { background: rgba(250,204,21,.22); color: var(--warn); }
.tag.vio { background: rgba(99,102,241,.25); color: #b4b8ff; }
.danger { color: var(--danger); }
.dash { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 16px; align-items: start; }
.stack { display: flex; flex-direction: column; gap: 16px; margin-top: 20px; }
.pc { display: flex; flex-direction: column; gap: 12px; transition: transform .2s var(--ease), border-color .2s; }
.pc:hover { transform: translateY(-2px); border-color: rgba(255,255,255,.18); color: inherit; }
.pc .top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.pc .nm { font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.sb { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; margin-bottom: 6px; }
.meta { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--fg2); }
.av { width: 24px; height: 24px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700;
  color: #fff; background: linear-gradient(135deg,#6366f1,#0ea5c6); flex: none; }
.who { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; white-space: nowrap; }
.steps { display: flex; gap: 4px; }
.steps span { flex: 1; height: 5px; border-radius: 4px; background: var(--fill2); }
.steps span.d { background: rgba(99,102,241,.75); } .steps span.c { background: var(--accent2); box-shadow: 0 0 8px var(--accent2); }
.stepper { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.step { flex: 1; min-width: 112px; background: var(--fill); border: 1px solid var(--edge); border-radius: 14px; padding: 10px 12px;
  color: var(--fg2); display: flex; flex-direction: column; transition: background .2s var(--ease); }
.step b { font-size: 14px; color: var(--fg); } .step small { font-size: 12px; color: var(--muted); }
.step.c { border-color: rgba(34,211,238,.6); box-shadow: 0 0 0 1px rgba(34,211,238,.25) inset; }
.step.sel { background: rgba(255,255,255,.1); }
.pdca { display: flex; gap: 6px; flex-wrap: wrap; }
.pdca span { font-size: 12px; padding: 3px 10px; border-radius: 999px; background: var(--fill); color: var(--muted); border: 1px solid var(--edge); }
.pdca span.d { color: var(--ok); border-color: rgba(74,222,128,.35); } .pdca span.c { color: var(--accent2); border-color: rgba(34,211,238,.5); }
.ms { border-top: 1px solid var(--sep); padding: 12px 0; } .ms:first-of-type { border-top: 0; }
.ms > .mh { display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; list-style: none; }
.ms > .mh::-webkit-details-marker { display: none; }
.ms .chev { transition: transform .2s var(--ease); color: var(--muted); width: 14px; text-align: center; }
.ms[open] > .mh .chev { transform: rotate(90deg); }
.ms .mt { font-weight: 600; flex: 1; min-width: 0; margin: 0; }
.ms .il { margin: 10px 0 0 24px; } .ms .il .bar { margin-bottom: 6px; }
.is { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; }
.is:hover { background: var(--fill); }
.is .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.is .n { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; width: 34px; }
.st { width: 9px; height: 9px; border-radius: 50%; flex: none; display: inline-block; }
.st.done { background: var(--ok); box-shadow: 0 0 8px var(--ok); } .st.doing { background: var(--accent2); box-shadow: 0 0 8px var(--accent2); }
.st.review { background: #a78bfa; box-shadow: 0 0 8px #a78bfa; } .st.todo { background: rgba(255,255,255,.35); }
.st.blocked { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.gantt { overflow-x: auto; scrollbar-width: thin; }
.gwrap { min-width: 760px; position: relative; }
.gscale, .grow { display: grid; grid-template-columns: 150px 1fr; align-items: center; }
.gscale .m { position: relative; height: 22px; font-size: 12px; color: var(--muted); }
.gscale .m span { position: absolute; top: 0; transform: translateX(2px); }
.gbody { position: relative; }
.grow { height: 40px; border-top: 1px solid var(--sep); color: inherit; } a.grow:hover { background: rgba(255,255,255,.03); }
.grow .gn { font-size: 14px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 10px;
  display: flex; align-items: center; gap: 8px; }
.track { position: relative; height: 100%; }
.seg { position: absolute; top: 12px; height: 16px; border-radius: 5px; opacity: .9; }
.seg.d, .lg.d { background: rgba(99,102,241,.55); } .seg.c, .lg.c { background: linear-gradient(90deg,#6366f1,#22d3ee); }
.seg.f, .lg.f { background: var(--fill2); border: 1px dashed rgba(255,255,255,.18); }
.dia { position: absolute; top: 14px; width: 11px; height: 11px; transform: translateX(-50%) rotate(45deg); background: #e8eaf0; border-radius: 2px; z-index: 1; }
.dia.late { background: var(--danger); box-shadow: 0 0 8px var(--danger); } .dia.done { background: var(--ok); }
.gtoday { position: absolute; top: 0; bottom: 0; left: 150px; right: 0; pointer-events: none; }
.today { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--warn); box-shadow: 0 0 10px var(--warn); z-index: 2; }
.today b { position: absolute; top: -2px; left: 4px; font-size: 11px; color: var(--warn); white-space: nowrap; }
.legend { display: flex; gap: 14px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-top: 10px; }
.lg { display: inline-block; width: 14px; height: 8px; border-radius: 3px; margin-right: 5px; vertical-align: middle; }
.li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--sep); }
.li:first-of-type { border-top: 0; } .li .t { flex: 1; min-width: 0; }
.li .t small { display: block; color: var(--muted); font-size: 12px; }
.seg-ctl { display: inline-flex; background: var(--fill); border: 1px solid var(--edge); border-radius: 12px; padding: 3px; }
.seg-ctl a { color: var(--fg2); padding: 6px 12px; font-size: 13px; border-radius: 9px; }
.seg-ctl a.on { background: rgba(255,255,255,.12); color: var(--fg); }
.chip { background: var(--fill); border: 1px solid var(--edge); color: var(--fg2); font-size: 13px; padding: 5px 12px; border-radius: 999px; }
.chip.on { background: rgba(99,102,241,.3); border-color: rgba(99,102,241,.6); color: #fff; }
.mob-links { display: none; }
@media (max-width: 760px) {
  .kpis { grid-template-columns: repeat(3, 1fr); row-gap: 12px; } .kpis .kpi { font-size: 26px; }
  .dash { grid-template-columns: 1fr; }
  .gscale, .grow { grid-template-columns: 96px 1fr; } .gwrap { min-width: 640px; } .grow .gn { font-size: 13px; }
  .gtoday { left: 96px; }
  .ms .il { margin-left: 6px; }
  .hide-m, .side a.more { display: none; }
  .mob-links { display: block; text-align: center; margin-top: 16px; }
  .seg-ctl.tabs { width: 100%; } .seg-ctl.tabs a { flex: 1; text-align: center; }
}

/* t_9dd02e45: 단계 안 사이클, 새 프로젝트 */
.pdca.cyc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 8px; }
.pdca.cyc .ph { display: flex; flex-direction: column; gap: 2px; padding: 8px 10px; border-radius: 12px; background: var(--fill);
  border: 1px solid var(--edge); color: var(--muted); font-size: 12px; min-width: 0; }
.pdca.cyc .ph b { font-weight: 600; } .pdca.cyc .ph small { font-size: 11px; opacity: .85; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pdca.cyc .ph.d { color: var(--ok); border-color: rgba(74,222,128,.35); }
.pdca.cyc .ph.c { color: var(--accent2); border-color: rgba(34,211,238,.5); box-shadow: 0 0 12px rgba(34,211,238,.15); }
.pdca.cyc a.ph:hover { background: rgba(34,211,238,.08); }
.reqs { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--edge); }
.newp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; }
.newp label { display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--fg2); margin-bottom: 12px; }
.newp input, .newp select { width: 100%; box-sizing: border-box; }
.newp .row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.npst { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 8px; counter-reset: st; }
.npst li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--fill); border: 1px solid var(--edge); counter-increment: st; }
.npst li::before { content: counter(st); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 11px;
  background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #fff; flex: none; }
.npst li input { flex: 1; min-width: 0; } .npst li .lbl { white-space: nowrap; font-size: 11px; }
.npst li button { padding: 4px 8px; }
@media (max-width: 760px) {
  .newp { grid-template-columns: 1fr; }
  .pdca.cyc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* t_ea91f1e3: 시연 계정 전환, 사람별 부하, 내 할 일 */
.demo-as { display: flex; align-items: center; gap: 6px; margin: 14px 0 8px; padding: 8px; border-radius: 12px;
  background: rgba(250,204,21,.06); border: 1px solid rgba(250,204,21,.25); }
.demo-as select { flex: 1; min-width: 0; font-size: 13px; padding: 5px 8px; }
.demo-users { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.demo-users button { display: flex; justify-content: space-between; text-align: left; }
.ldgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr)); gap: 8px 16px; }
.ld { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 12px; background: var(--fill); border: 1px solid var(--edge); min-width: 0; }
.ld:hover { border-color: rgba(99,102,241,.5); }
.ld .who { width: 84px; overflow: hidden; text-overflow: ellipsis; }
.ldbar { flex: 1; min-width: 0; } .ldbar .bar { margin-top: 0; } .ldbar small { display: block; color: var(--muted); font-size: 11px; margin-top: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar.warn i { background: linear-gradient(90deg, #f59e0b, var(--warn)); }
.bar.bad i { background: linear-gradient(90deg, #f43f5e, var(--danger)); }
.tag.ok { white-space: nowrap; }
.li.task .t > a { color: var(--fg); }
.li .t small.links a { color: var(--link); } .li .t small.links { white-space: normal; }
.mine { margin-top: 0; }
.demo-as.m { display: none; }
@media (max-width: 760px) {
  .side .demo-as { display: none; }
  .demo-as.m { display: flex; position: fixed; top: 10px; right: 10px; margin: 0; padding: 4px 6px; z-index: 11;
    background: rgba(20,20,28,.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
  .demo-as.m select { max-width: 104px; font-size: 12px; padding: 3px 6px; }
  body.app.demo main { padding-top: 52px; }
}
/* 시연 초기화 (t_828ed166) */
.side .demo-as { flex-wrap: wrap; }
#demoreset { width: 100%; font-size: 12px; padding: 5px 8px; }
.row.steps { gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.row.steps { align-items: center; }
.row.steps .lbl { flex: none; width: auto; margin: 0 4px 0 0; background: none; border: 0; padding: 0; }

/* v3 S1 홈 실시간 · S2 사람 · S3 타임라인 (t_d2f141a2) */
.s1 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.s1 .s1-pairs { grid-column: 1 / -1; }
.s1 h2, .card h2 { font-size: 16px; margin: 0 0 10px; }
.kpis { display: flex; gap: 28px; margin: 4px 0 14px; }
.kpis > div { display: flex; flex-direction: column; }
.plist { display: flex; flex-direction: column; gap: 6px; }
.prow { display: grid; grid-template-columns: 12px minmax(90px, 140px) auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 12px; background: rgba(0,0,0,.18); color: var(--fg); transition: background .6s var(--ease); }
.card:not(.hero) .prow { background: var(--fill); }
.prow:hover { background: rgba(0,0,0,.28); }
.prow .what { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.prow .who { font-weight: 600; white-space: nowrap; }
.prow .badge { font-size: 10px; margin-left: 4px; padding: 0 5px; border-radius: 6px; background: rgba(255,255,255,.18); vertical-align: 2px; }
.prow.flash { background: rgba(255,255,255,.22); }
.sdot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--muted); }
.st-working .sdot, .sdot.st-working { background: var(--ok); box-shadow: 0 0 8px var(--ok); }
.st-blocked .sdot, .sdot.st-blocked { background: var(--danger); box-shadow: 0 0 8px var(--danger); }
.st-needs_human .sdot, .sdot.st-needs_human { background: var(--warn); box-shadow: 0 0 8px var(--warn); }
.st-idle .sdot, .sdot.st-idle { background: rgba(214,219,232,.55); }
.st-offline .sdot, .sdot.st-offline { background: transparent; border: 2px solid var(--muted); }
.tag.pst { background: rgba(0,0,0,.25); color: #fff; }
.st-blocked .tag.pst, .tag.pst.st-blocked { background: rgba(255,90,95,.3); }
.st-needs_human .tag.pst, .tag.pst.st-needs_human { background: rgba(250,204,21,.3); }
.st-working .tag.pst, .tag.pst.st-working { background: rgba(74,222,128,.28); }
ul.list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.empty { margin: 6px 0; }
.btn { display: inline-block; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--edge); }
.filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.filters select { background: var(--fill); color: var(--fg); border: 1px solid var(--edge); border-radius: 10px; padding: 5px 8px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chips.tabs { margin: 0 0 16px; }
ul.tl { list-style: none; margin: 0; padding: 0; }
.tl .ev { display: grid; grid-template-columns: 82px auto 76px minmax(0, 1fr) auto; gap: 8px; align-items: center;
  padding: 8px 4px; border-bottom: 1px solid var(--sep); }
.tl .ev.danger { background: rgba(255,90,95,.1); border-left: 3px solid var(--danger); }
.tl .ev.new { animation: evin .6s var(--ease); }
@keyframes evin { from { background: rgba(99,102,241,.35); } }
.tl .ev time { color: var(--muted); font-variant-numeric: tabular-nums; font-size: 13px; }
.tl .evk { font-size: 13px; color: var(--fg2); }
.tl .evt { min-width: 0; overflow-wrap: anywhere; }
.tl .day { padding: 10px 0 4px; }
code.sel { user-select: all; }
@media (max-width: 760px) {
  .s1 { grid-template-columns: minmax(0, 1fr); }
  .prow { display: flex; flex-wrap: wrap; column-gap: 8px; row-gap: 2px; }
  .prow .who { flex: 1 1 auto; }
  .prow .tag, .prow .sdot { flex: none; min-width: max-content; }
  .prow .what, .prow .when { flex: 1 0 100%; padding-left: 18px; }
  .prow .when { font-size: 12px; }
  .kpis { gap: 18px; }
  .tl .ev { grid-template-columns: 52px auto minmax(0, 1fr); }
  .tl .ev .evk { display: none; }
  .tl .ev .evt { grid-column: 1 / -1; }
  .tl .ev .tag.vio { justify-self: start; }
}