/* ═══════════ TDS 참고 디자인 토큰 · 포인트 = 블랙 ═══════════ */
:root{
  --grey50:#f9fafb; --grey100:#f2f4f6; --grey200:#e5e8eb; --grey300:#d1d6db;
  --grey400:#b0b8c1; --grey500:#8b95a1; --grey600:#6b7684; --grey700:#4e5968;
  --grey800:#333d4b; --grey900:#191f28;
  --point:#191f28;
  --blue:#3182f6; --blue-bg:#e8f3ff;
  --red:#f04452;  --red-bg:#fdedee;
  --green:#059669; --green-bg:#e6f6f1;
  --amber:#dd7d02; --amber-bg:#fff3e0;
  --teal:#0e8585; --teal-bg:#e0f5f5;
  --card:#ffffff;
  --r:20px; --r-s:12px;
  --shadow:0 1px 3px rgba(25,31,40,.06),0 4px 14px rgba(25,31,40,.04);
}
*{margin:0;padding:0;box-sizing:border-box}
button{font-family:inherit;cursor:pointer}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR',sans-serif;
  background:var(--grey100); color:var(--grey900);
  font-size:14px; letter-spacing:-.015em; word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
.app{display:flex;min-height:100vh}

/* ── 사이드바 ── */
.sidebar{
  width:230px;flex-shrink:0;background:#fff;border-right:1px solid var(--grey200);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;
}
.brand{padding:24px 22px 16px}
.brand .logo{font-weight:800;font-size:17px;letter-spacing:-.03em;display:flex;align-items:center;gap:8px}
.brand .logo .sq{width:22px;height:22px;border-radius:7px;background:var(--point);color:#fff;display:grid;place-items:center;font-size:11px;font-weight:800}
.brand .sub{font-size:11px;color:var(--grey500);margin-top:6px;font-weight:500}
.nav{padding:6px 12px;display:flex;flex-direction:column;gap:2px}
.nav-label{font-size:11px;color:var(--grey400);padding:14px 12px 6px;font-weight:700}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;
  color:var(--grey700);font-weight:600;font-size:14px;border:none;background:none;
  width:100%;text-align:left;transition:background .13s;letter-spacing:-.015em;
}
.nav-item:hover{background:var(--grey100)}
.nav-item.active{background:var(--point);color:#fff}
.nav-item .ico{width:18px;text-align:center}
.nav-item .cnt{margin-left:auto;font-size:11px;font-weight:700;background:var(--grey100);color:var(--grey600);padding:2px 8px;border-radius:20px}
.nav-item.active .cnt{background:rgba(255,255,255,.2);color:#fff}
.side-camps{padding:2px 12px;overflow:auto;flex:1}
.side-camp{
  display:block;width:100%;text-align:left;border:none;background:none;
  padding:9px 12px;border-radius:12px;transition:background .13s;
}
.side-camp:hover{background:var(--grey100)}
.side-camp .nm{font-size:13px;font-weight:650;color:var(--grey800);display:flex;align-items:center;gap:7px}
.side-camp .st{font-size:11px;color:var(--grey500);margin-top:3px;padding-left:15px}
.pulse{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.pulse.red{background:var(--red)} .pulse.amber{background:#f59e0b} .pulse.green{background:var(--green)}
.side-foot{padding:16px 22px;border-top:1px solid var(--grey200);font-size:11px;color:var(--grey400);line-height:1.7}

/* ── 메인 공통 ── */
.main{flex:1;min-width:0;padding:28px 36px 80px;max-width:1280px}
.view{display:none}
.view.on{display:block;animation:rise .28s ease}
@keyframes rise{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;margin-bottom:20px;gap:16px;flex-wrap:wrap}
.topbar h1{font-size:24px;font-weight:800;letter-spacing:-.035em}
.topbar .desc{font-size:13.5px;color:var(--grey600);margin-top:6px}
.topbar .date{font-size:12px;color:var(--grey500);font-weight:600}

.btn{
  font-size:13.5px;font-weight:700;padding:10px 16px;border-radius:12px;border:none;
  background:var(--grey100);color:var(--grey700);transition:filter .13s,background .13s;letter-spacing:-.015em;
}
.btn:hover{background:var(--grey200)}
.btn.primary{background:var(--point);color:#fff}
.btn.primary:hover{filter:brightness(1.35)}
.btn.danger{background:var(--red-bg);color:var(--red)}
.btn.success{background:var(--green);color:#fff}
.btn.sm{padding:6px 11px;font-size:12px;border-radius:9px}
.btn.xs{padding:4px 9px;font-size:11.5px;border-radius:8px}
.btn:disabled{opacity:.45;cursor:default}
.btn.ghost{background:#fff;border:1px solid var(--grey200)}
.btn.ghost:hover{background:var(--grey50)}

.panel{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);overflow:hidden}
.panel-h{padding:18px 22px 14px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.panel-h h2{font-size:15.5px;font-weight:800;letter-spacing:-.02em}
.panel-h .tag{font-size:11.5px;color:var(--grey500);font-weight:600}
.panel-h .sp{margin-left:auto;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.mt{margin-top:14px}

/* KPI */
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.kpi{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:18px 20px;position:relative}
.kpi.hero{background:var(--point);color:#fff}
.kpi .k-label{font-size:12px;font-weight:700;color:var(--grey500)}
.kpi.hero .k-label{color:rgba(255,255,255,.55)}
.kpi .k-val{font-size:30px;font-weight:800;letter-spacing:-.05em;margin-top:6px}
.kpi .k-val small{font-size:14px;font-weight:600;color:var(--grey500)}
.kpi.hero .k-val small{color:rgba(255,255,255,.5)}
.kpi .k-sub{font-size:12px;color:var(--grey500);margin-top:5px;font-weight:500}
.kpi.hero .k-sub{color:rgba(255,255,255,.65)}
.kpi .k-sub b{color:var(--green)}
.kpi.hero .k-sub b{color:#5eead4}
.cols{display:grid;grid-template-columns:1.25fr 1fr;gap:14px;align-items:start}
@media(max-width:1100px){.cols{grid-template-columns:1fr}.kpis{grid-template-columns:repeat(2,1fr)}}

/* 하루 워크플로우 블럭 */
.blocks{display:flex;gap:8px;padding:6px 22px 20px;flex-wrap:wrap}
.block{
  flex:1;min-width:150px;border:1.5px solid var(--grey200);border-radius:14px;padding:12px 14px;
  position:relative;background:#fff;
}
.block .b-step{font-size:10.5px;font-weight:800;color:var(--grey400);letter-spacing:.06em}
.block .b-t{font-size:13px;font-weight:750;margin-top:4px}
.block .b-d{font-size:11.5px;color:var(--grey500);margin-top:3px;line-height:1.5}
.block.done{background:var(--grey50);border-color:var(--grey200)}
.block.done .b-t{color:var(--grey400);text-decoration:line-through}
.block.done .b-step:after{content:' ✓';color:var(--green)}
.block.now{border-color:var(--point);box-shadow:0 4px 14px rgba(25,31,40,.1)}
.block.now .b-step{color:var(--point)}
.block-foot{padding:0 22px 18px;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.block-foot .note{font-size:12px;color:var(--grey500);font-weight:500}

/* 오늘 할 일 / 알림 */
.todo{display:flex;gap:12px;padding:13px 22px;border-top:1px solid var(--grey100);align-items:flex-start;cursor:pointer;transition:background .12s}
.todo:hover{background:var(--grey50)}
.todo .cb{width:20px;height:20px;border-radius:7px;border:1.5px solid var(--grey300);flex-shrink:0;margin-top:1px;display:grid;place-items:center;font-size:11px;color:#fff;background:#fff;transition:all .15s}
.todo.done .cb{background:var(--point);border-color:var(--point)}
.todo.done .t-title{text-decoration:line-through;color:var(--grey400)}
.todo .t-title{font-weight:650;font-size:13.5px}
.todo .t-meta{font-size:12px;color:var(--grey500);margin-top:3px;display:flex;gap:8px;flex-wrap:wrap}
.todo .t-camp{font-size:11px;font-weight:700;padding:1px 8px;border-radius:6px;background:var(--grey100);color:var(--grey600)}
.todo .t-risk{color:var(--red);font-weight:650}
.alert-item{display:flex;gap:12px;padding:14px 22px;border-top:1px solid var(--grey100);align-items:flex-start;cursor:pointer;transition:background .12s}
.alert-item:hover{background:var(--grey50)}
.alert-item .sev{font-size:11px;font-weight:800;padding:3px 9px;border-radius:8px;flex-shrink:0;margin-top:1px}
.sev.hi{background:var(--red-bg);color:var(--red)}
.sev.md{background:var(--amber-bg);color:var(--amber)}
.alert-item .a-title{font-weight:700;font-size:13.5px}
.alert-item .a-act{font-size:12px;color:var(--grey500);margin-top:3px}
.alert-item .a-act b{color:var(--grey800)}
.alert-item .go{margin-left:auto;flex-shrink:0;align-self:center;color:var(--grey300);font-size:16px}

/* 캠페인 카드 */
.camp-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:14px}
.camp-card{background:var(--card);border-radius:var(--r);box-shadow:var(--shadow);padding:22px;cursor:pointer;transition:transform .16s,box-shadow .16s;position:relative}
.camp-card:hover{transform:translateY(-3px);box-shadow:0 8px 26px rgba(25,31,40,.1)}
.camp-card .c-brand{font-size:11.5px;font-weight:700;color:var(--grey500)}
.camp-card h3{font-size:17px;font-weight:800;letter-spacing:-.025em;margin-top:4px}
.camp-card .c-dday{position:absolute;top:20px;right:20px;font-size:12px;font-weight:800;padding:4px 11px;border-radius:20px;background:var(--grey100);color:var(--grey600)}
.camp-card .c-dday.hot{background:var(--red-bg);color:var(--red)}
.camp-card .c-dday.go{background:var(--green-bg);color:var(--green)}
.camp-card .c-dday.wait{background:#fff5da;color:#b07d00}
.camp-card .c-dday.done{background:var(--grey100);color:var(--grey500)}
.camp-card .c-dday.stop{background:var(--grey100);color:var(--grey400)}
.c-stage{display:flex;gap:4px;margin:18px 0 10px}
.c-stage i{height:6px;flex:1;border-radius:3px;background:var(--grey200)}
.c-stage i.done{background:var(--green)}
.c-stage i.now{background:var(--point)}
.c-stage-label{font-size:12.5px;color:var(--grey500);display:flex;justify-content:space-between;font-weight:600}
.c-stage-label b{color:var(--grey900);font-weight:800}
.c-meta{display:flex;gap:16px;margin-top:16px;padding-top:15px;border-top:1px solid var(--grey100)}
.c-meta .m{font-size:11.5px;color:var(--grey500);font-weight:600}
.c-meta .m b{display:block;font-size:15px;color:var(--grey900);font-weight:800;margin-top:2px}
.c-meta .m b.warn{color:var(--red)}
.c-line{margin-top:13px;font-size:12.5px;font-weight:700}
.c-line.bad{color:var(--red)} .c-line.ok{color:var(--green)}

/* 상세 */
.detail-head{margin-bottom:16px}
.crumb{font-size:12.5px;color:var(--grey500);margin-bottom:10px;cursor:pointer;display:inline-flex;gap:6px;font-weight:600}
.crumb:hover{color:var(--grey900)}
.detail-head h1{font-size:22px;font-weight:800;letter-spacing:-.03em;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.badge{font-size:11.5px;font-weight:800;padding:4px 11px;border-radius:20px}
.badge.live{background:var(--point);color:#fff}
.badge.list{background:var(--blue-bg);color:var(--blue)}
.badge.up{background:var(--green-bg);color:var(--green)}
.detail-head .d-sub{font-size:13px;color:var(--grey500);margin-top:8px;display:flex;gap:16px;flex-wrap:wrap;font-weight:500}
.detail-head .d-sub b{color:var(--grey800);font-weight:700}
.tabs{display:flex;gap:2px;background:var(--grey200);padding:3px;border-radius:14px;width:fit-content;margin-bottom:16px}
.tab{padding:8px 18px;font-size:13.5px;font-weight:700;color:var(--grey600);border:none;background:none;border-radius:11px;transition:all .15s;letter-spacing:-.015em}
.tab.on{background:#fff;color:var(--grey900);box-shadow:0 1px 4px rgba(25,31,40,.1)}
.tab .n{font-size:11px;color:var(--grey400);margin-left:4px;font-weight:800}
.tabpane{display:none}
.tabpane.on{display:block;animation:rise .22s ease}

/* 킥오프 */
.kick-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;align-items:start}
@media(max-width:1100px){.kick-grid{grid-template-columns:1fr}}
table.sheet{width:100%;border-collapse:collapse}
table.sheet th,table.sheet td{padding:10px 22px;text-align:left;font-size:13px;border-top:1px solid var(--grey100);vertical-align:top}
table.sheet th{width:126px;color:var(--grey500);font-weight:700;font-size:12px;white-space:nowrap}
.mark-star{color:var(--red);font-weight:800}
.mark-blank{font-size:11.5px;color:var(--amber);background:var(--amber-bg);padding:2px 9px;border-radius:6px;font-weight:700}
.copybox{padding:4px 22px 18px}
.copybox pre{font-family:inherit;font-size:12.5px;line-height:1.75;white-space:pre-wrap;background:var(--grey50);border:1px solid var(--grey200);border-radius:14px;padding:15px 17px;color:var(--grey700)}
.ask-item{padding:12px 22px;border-top:1px solid var(--grey100);font-size:12.5px;line-height:1.6;display:flex;gap:10px;align-items:center}
.ask-item .q{color:var(--amber);font-weight:800;flex-shrink:0}

/* 안내 배너 */
.hint{margin:0 0 16px;padding:13px 18px;border-radius:14px;background:#fff;box-shadow:var(--shadow);color:var(--grey700);font-size:12.5px;line-height:1.65;display:flex;gap:10px;align-items:flex-start}
.hint .hi{flex-shrink:0;font-size:15px}
.hint b{color:var(--grey900)}
.rulebar{
  margin:0 22px 14px;padding:12px 16px;border-radius:12px;background:var(--grey900);color:#fff;
  font-size:12.5px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-weight:600;
}
.rulebar .lock{font-size:14px}
.rulebar b{color:#fca5a5}
.rulebar .cnt{margin-left:auto;font-weight:800;background:rgba(255,255,255,.14);padding:3px 12px;border-radius:20px;font-size:12px}

/* 타임라인 */
.tl{padding:6px 22px 18px}
.tl-note{margin:2px 22px 6px;font-size:12px;color:var(--grey600);background:var(--grey100);border-radius:10px;padding:8px 13px;display:inline-block;font-weight:600}
.tl-row{display:flex;gap:14px}
.tl-rail{width:18px;flex-shrink:0;display:flex;flex-direction:column;align-items:center}
.tl-dot{width:13px;height:13px;border-radius:50%;border:2.5px solid var(--grey300);background:#fff;flex-shrink:0;margin-top:5px;z-index:1}
.tl-row.done .tl-dot{background:var(--green);border-color:var(--green);color:#fff;font-size:9px;font-weight:900;line-height:8px;text-align:center}
.tl-dot:hover{border-color:var(--point)}
.tl-row.now .tl-dot{background:var(--point);border-color:var(--point);box-shadow:0 0 0 4px rgba(25,31,40,.12)}
.tl-line{width:2px;flex:1;background:var(--grey200);min-height:12px}
.tl-row.done .tl-line{background:var(--green)}
.tl-body{padding:3px 0 18px;flex:1;display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.tl-date{font-size:12.5px;font-weight:800;width:82px;flex-shrink:0;color:var(--grey500)}
.tl-row.done .tl-date{color:var(--green)}
.tl-row.now .tl-date{color:var(--grey900)}
.tl-title{font-weight:750;font-size:13.5px}
.tl-who{font-size:11px;color:var(--grey500);background:var(--grey100);padding:2px 9px;border-radius:6px;font-weight:700}
.tl-warn{font-size:11.5px;color:var(--amber);font-weight:700}
.tl-late{font-size:11.5px;color:var(--red);font-weight:700}
.tl-now-tag{font-size:10px;font-weight:800;color:#fff;background:var(--point);padding:2px 8px;border-radius:5px}

/* 퍼널/층 */
.funnel{display:flex;padding:18px 22px 8px}
.fstep{flex:1;text-align:center;position:relative;padding:8px 4px}
.fstep:not(:last-child):after{content:'›';position:absolute;right:-5px;top:46%;transform:translateY(-50%);color:var(--grey300);font-size:19px}
.fstep .fv{font-size:25px;font-weight:800;letter-spacing:-.04em}
.fstep .fl{font-size:11.5px;color:var(--grey500);font-weight:700;margin-top:3px}
.fstep.final .fv{color:var(--green)}
.tier-bars{padding:8px 22px 18px;display:grid;gap:10px}
.tier{display:flex;align-items:center;gap:12px}
.tier .t-name{width:100px;font-size:12.5px;font-weight:750;flex-shrink:0}
.tier .t-name small{display:block;font-weight:500;color:var(--grey500);font-size:10.5px}
.tier .t-bar{flex:1;height:24px;background:var(--grey100);border-radius:8px;overflow:hidden;display:flex}
.tier .t-fill{background:var(--point);display:grid;place-items:center;color:#fff;font-size:10.5px;font-weight:700;min-width:26px;transition:width .3s}
.tier .t-fill.full{background:var(--green)}
.tier .t-num{font-size:12px;color:var(--grey500);width:78px;text-align:right;flex-shrink:0;font-weight:700}

/* 테이블 */
.filters{display:flex;gap:6px;padding:0 22px 14px;flex-wrap:wrap}
.fchip{font-size:12.5px;font-weight:700;padding:6px 14px;border-radius:20px;border:1px solid var(--grey200);background:#fff;color:var(--grey600);transition:all .13s}
.fchip:hover{border-color:var(--grey400)}
.fchip.on{background:var(--point);color:#fff;border-color:var(--point)}
table.grid{width:100%;border-collapse:collapse}
table.grid thead th{font-size:11.5px;color:var(--grey500);font-weight:750;text-align:left;padding:10px 14px;border-bottom:1px solid var(--grey200);white-space:nowrap;background:var(--grey50)}
table.grid thead th:first-child{padding-left:22px}
table.grid tbody td{padding:12px 14px;font-size:13px;border-bottom:1px solid var(--grey100);vertical-align:middle}
table.grid tbody td:first-child{padding-left:22px}
table.grid tbody tr:last-child td{border-bottom:none}
table.grid tbody tr:hover{background:var(--grey50)}
.handle{font-weight:750;font-size:13.5px}
.handle small{display:block;font-weight:500;color:var(--grey500);font-size:11.5px;margin-top:1px}
/* 인플루언서 계정 링크 — 평소엔 일반 글자처럼 두고, 올리면 링크임을 알립니다 */
a.ig{color:inherit;text-decoration:none;border-radius:5px;transition:color .12s}
a.ig:hover{color:var(--blue);text-decoration:underline;text-underline-offset:2px}
a.ig .ig-x{font-size:9.5px;margin-left:3px;opacity:0;vertical-align:1px;transition:opacity .12s}
a.ig:hover .ig-x{opacity:.75}
a.ig:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.tiertag{font-size:11px;font-weight:800;padding:3px 9px;border-radius:7px}
.tiertag.A{background:#191f28;color:#fff}
.tiertag.B{background:var(--grey200);color:var(--grey700)}
.tiertag.C{background:var(--grey100);color:var(--grey500);border:1px solid var(--grey200)}
.chip{font-size:11.5px;font-weight:750;padding:4px 11px;border-radius:20px;white-space:nowrap;border:none;transition:filter .12s}
.chip:hover{filter:brightness(.95)}
.chip.cand{background:var(--grey100);color:var(--grey600)}
.chip.contact{background:var(--blue-bg);color:var(--blue)}
.chip.accept{background:var(--teal-bg);color:var(--teal)}
.chip.confirm{background:var(--amber-bg);color:var(--amber)}
.chip.final{background:var(--point);color:#fff}
.chip.out{background:none;color:var(--grey400);border:1px dashed var(--grey300);text-decoration:line-through}
.chip.noresp{background:var(--red-bg);color:var(--red)}
.chip.sub{background:#fff;border:1.5px dashed var(--teal);color:var(--teal)}
.vet{font-size:11px;font-weight:700;padding:3px 8px;border-radius:6px;border:none}
.vet.ok{background:var(--green-bg);color:var(--green)}
.vet.no{background:var(--grey100);color:var(--grey500)}
.subpool{padding:13px 22px;background:var(--teal-bg);font-size:12.5px;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-weight:600;color:var(--grey700)}
.subpool b{color:var(--teal)}

/* 운영 매트릭스 */
.ops-legend{display:flex;gap:14px;padding:0 22px 12px;font-size:11.5px;color:var(--grey500);flex-wrap:wrap;font-weight:600}
.cell{display:inline-flex;align-items:center;justify-content:center;gap:4px;min-width:62px;padding:5px 9px;border-radius:8px;font-size:11px;font-weight:750;border:none}
.cell.done{background:var(--green-bg);color:var(--green)}
.cell.now{background:var(--amber-bg);color:var(--amber)}
.cell.wait{color:var(--grey300);background:none}
.cell.late{background:var(--red-bg);color:var(--red);animation:blink 1.6s ease infinite}
.cell.reject{background:var(--red-bg);color:var(--red)}
.cell.click{cursor:pointer}
.cell.click:hover{filter:brightness(.95)}
@keyframes blink{50%{opacity:.55}}
tr.row-risk td:first-child{box-shadow:inset 3px 0 0 var(--red)}
.touch-dots{display:flex;gap:4px;margin-top:4px;align-items:center}
.touch-dots i{width:16px;height:16px;border-radius:50%;background:var(--grey100);color:var(--grey400);font-size:9px;font-style:normal;display:grid;place-items:center;font-weight:800}
.touch-dots i.on{background:var(--point);color:#fff}
.touch-dots small{font-size:10px;color:var(--grey400);font-weight:600;margin-left:2px}
.empty{padding:48px 22px;text-align:center;color:var(--grey500)}
.empty .e-ico{font-size:30px;margin-bottom:10px}
.empty .e-t{font-weight:750;font-size:14.5px;color:var(--grey700)}
.empty .e-d{font-size:12.5px;margin-top:5px;line-height:1.6}

/* 풀 */
.ptag{font-size:11px;padding:2px 9px;border-radius:6px;background:var(--grey100);color:var(--grey600);font-weight:700}
.score{font-weight:750}
.score.good{color:var(--green)} .score.bad{color:var(--red)}
.stars{font-size:12px;color:#f59e0b;letter-spacing:1px}

/* 모달 */
.modal-bg{position:fixed;inset:0;background:rgba(25,31,40,.45);display:none;place-items:center;z-index:50;backdrop-filter:blur(2px);padding:20px}
.modal-bg.on{display:grid;animation:fade .18s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
.modal{background:#fff;border-radius:22px;width:560px;max-width:100%;max-height:88vh;overflow:auto;box-shadow:0 24px 70px rgba(0,0,0,.25);animation:pop .22s cubic-bezier(.2,.9,.3,1.15)}
.modal.wide{width:680px}
@keyframes pop{from{transform:scale(.95);opacity:0}to{transform:none;opacity:1}}
.modal-h{padding:22px 26px 14px;position:sticky;top:0;background:#fff;z-index:2}
.modal-h h3{font-size:17px;font-weight:800;letter-spacing:-.025em}
.modal-h .m-sub{font-size:12.5px;color:var(--grey500);margin-top:5px;line-height:1.5}
.modal-h .x{position:absolute;top:18px;right:18px;border:none;background:var(--grey100);width:32px;height:32px;border-radius:10px;font-size:14px;color:var(--grey500)}
.modal-h .x:hover{background:var(--grey200)}
.modal-b{padding:4px 26px 10px}
.modal-f{padding:16px 26px 22px;display:flex;gap:8px;justify-content:flex-end;position:sticky;bottom:0;background:#fff;flex-wrap:wrap}
.field{margin-bottom:13px}
.field label{display:block;font-size:12px;font-weight:750;color:var(--grey600);margin-bottom:6px}
.field input,.field textarea,.field select{
  width:100%;border:1.5px solid var(--grey200);border-radius:12px;padding:10px 13px;
  font-family:inherit;font-size:13.5px;background:var(--grey50);color:var(--grey900);
  letter-spacing:-.015em;outline:none;transition:border-color .15s;
}
.field input:focus,.field textarea:focus,.field select:focus{border-color:var(--grey900);background:#fff}
.field textarea{resize:vertical;min-height:90px;line-height:1.6}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.frow3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.qc-src{margin:2px 0 12px;font-size:12px;color:var(--grey600);background:var(--blue-bg);border-radius:11px;padding:10px 14px;line-height:1.55}
.qc-src b{color:var(--blue)}
.qc-sec{padding:12px 0 4px;font-size:11.5px;font-weight:800;color:var(--grey500)}
.qc-sec.ban{color:var(--red)}
.qc-item{display:flex;gap:11px;padding:9px 2px;align-items:flex-start;cursor:pointer;border-radius:10px}
.qc-item:hover{background:var(--grey50)}
.qc-item .cb{width:19px;height:19px;border-radius:6px;border:1.5px solid var(--grey300);flex-shrink:0;display:grid;place-items:center;font-size:10px;color:#fff;background:#fff;margin-top:1px}
.qc-item.ok .cb{background:var(--point);border-color:var(--point)}
.qc-item.ban .cb{border-radius:50%}
.qc-item.ban.ok .cb{background:var(--red);border-color:var(--red)}
.qc-item .q-t{font-size:13px;font-weight:650}
.qc-item .q-d{font-size:11.5px;color:var(--grey500);margin-top:2px}
.tmpl-tabs{display:flex;gap:6px;margin-bottom:12px;flex-wrap:wrap}
.tmpl-tab{font-size:12px;font-weight:700;padding:6px 12px;border-radius:9px;border:1px solid var(--grey200);background:#fff;color:var(--grey600)}
.tmpl-tab.on{background:var(--point);color:#fff;border-color:var(--point)}
.msgprev{font-family:inherit;font-size:12.5px;line-height:1.75;white-space:pre-wrap;background:var(--grey50);border:1px solid var(--grey200);border-radius:14px;padding:15px 17px;color:var(--grey700);max-height:300px;overflow:auto}
.pick-row{display:flex;align-items:center;gap:11px;padding:9px 4px;border-radius:10px;cursor:pointer}
.pick-row:hover{background:var(--grey50)}
.pick-row .cb{width:19px;height:19px;border-radius:6px;border:1.5px solid var(--grey300);display:grid;place-items:center;font-size:10px;color:#fff;background:#fff;flex-shrink:0}
.pick-row.on .cb{background:var(--point);border-color:var(--point)}
.pick-row .info{flex:1}
.pick-row .nm{font-weight:750;font-size:13px}
.pick-row .dt{font-size:11.5px;color:var(--grey500)}
.step-note{font-size:12px;color:var(--grey600);background:var(--grey100);border-radius:10px;padding:10px 13px;line-height:1.6;margin-bottom:12px}
.step-note b{color:var(--grey900)}
.esc-step{border:1.5px solid var(--grey200);border-radius:14px;padding:13px 15px;margin-bottom:10px}
.esc-step .e-h{display:flex;align-items:center;gap:8px;font-weight:800;font-size:13px}
.esc-step .e-n{width:22px;height:22px;border-radius:50%;background:var(--point);color:#fff;display:grid;place-items:center;font-size:11px;flex-shrink:0}
.esc-step.warn .e-n{background:var(--red)}
.esc-step .e-d{font-size:12px;color:var(--grey600);margin-top:6px;line-height:1.6}
.esc-step .e-d b{color:var(--red)}
.spin{width:18px;height:18px;border:2.5px solid var(--grey200);border-top-color:var(--grey900);border-radius:50%;animation:sp .7s linear infinite;display:inline-block;vertical-align:-4px;margin-right:8px}
@keyframes sp{to{transform:rotate(360deg)}}
.track-row{display:flex;gap:12px;padding:8px 0;align-items:baseline}
.track-row .tk-d{font-size:12px;font-weight:750;color:var(--grey500);width:106px;flex-shrink:0}
.track-row .tk-t{font-size:13px;font-weight:650}
.track-row.cur .tk-t{color:var(--blue)}

/* 일정 편집 + 캘린더 */
.edited-b{font-size:10px;font-weight:800;color:var(--blue);background:var(--blue-bg);padding:2px 7px;border-radius:5px;margin-left:2px}
.tl-editinput{border:1.5px solid var(--point);border-radius:8px;padding:3px 6px;font-family:inherit;font-size:12px;width:140px}
.tl-date.editable{cursor:pointer;border-bottom:1px dashed var(--grey300)}
.tl-date.editable:hover{color:var(--point);border-bottom-color:var(--point)}
.cal-month{padding:6px 22px 20px}
.cal-title{font-weight:800;font-size:14px;margin:6px 0 10px}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}
.cal-w{font-size:11px;font-weight:800;color:var(--grey500);text-align:center;padding:4px 0}
.cal-w.sun{color:var(--red)}
.cal-cell{min-height:62px;border:1px solid var(--grey100);border-radius:10px;padding:5px 6px;background:#fff}
.cal-cell.empty{background:none;border:none}
.cal-cell.today{border-color:var(--point);box-shadow:0 0 0 1px var(--point)}
.cal-d{font-size:11px;font-weight:700;color:var(--grey500)}
.cal-cell.today .cal-d{color:var(--point);font-weight:800}
.cal-ev{font-size:10.5px;font-weight:700;background:var(--grey100);color:var(--grey700);border-radius:5px;padding:2px 6px;margin-top:3px;line-height:1.35}
.cal-ev.done{background:var(--green-bg);color:var(--green)}
.cal-ev.now{background:var(--point);color:#fff}
.cal-ev.ed{box-shadow:inset 0 0 0 1.5px var(--blue)}
.searchbox{width:100%;border:1.5px solid var(--grey200);border-radius:12px;padding:9px 13px;font-family:inherit;font-size:13px;background:var(--grey50);outline:none;margin-bottom:10px}
.searchbox:focus{border-color:var(--grey900);background:#fff}
/* 킥오프 절차 스테퍼 */
.kstep{border:1.5px solid var(--grey200);border-radius:14px;padding:13px 16px;margin:0 22px 10px}
.kstep:last-child{margin-bottom:18px}
.kstep.done{background:var(--grey50)}
.kstep.done .k-h{color:var(--grey500)}
.kstep.now{border-color:var(--point);box-shadow:0 4px 14px rgba(25,31,40,.08)}
.kstep .k-h{display:flex;gap:9px;align-items:center;font-weight:800;font-size:13.5px}
.kstep .k-n{width:22px;height:22px;border-radius:50%;background:var(--grey200);color:var(--grey600);display:grid;place-items:center;font-size:11px;flex-shrink:0;font-weight:800}
.kstep.now .k-n{background:var(--point);color:#fff}
.kstep.done .k-n{background:var(--green);color:#fff}
.kchk{display:flex;gap:10px;align-items:flex-start;padding:7px 2px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600}
.kchk:hover{background:var(--grey100)}
.kchk .cb{width:18px;height:18px;border-radius:6px;border:1.5px solid var(--grey300);display:grid;place-items:center;color:#fff;font-size:10px;background:#fff;flex-shrink:0;margin-top:1px}
.kchk.ok .cb{background:var(--point);border-color:var(--point)}
.kchk small{display:block;color:var(--grey500);font-weight:500;font-size:11.5px;margin-top:2px}
/* 고객사 시트 뷰 (구글시트 템플릿 재현) */
.sheetwrap{overflow-x:auto;padding:0 22px 20px}
table.gsheet{width:100%;border-collapse:collapse;font-size:12.5px;min-width:760px}
table.gsheet th,table.gsheet td{border:1px solid #d0d7de;padding:8px 11px;text-align:left;vertical-align:middle}
table.gsheet thead th{background:#d9ead3;font-weight:800;font-size:12.5px;text-align:center}
table.gsheet thead th.pick{background:#ead1dc;color:#a61c7a}
table.gsheet td.prod{background:#fff;font-weight:700;text-align:center;vertical-align:middle}
table.gsheet tr.sel td{background:#fff9c2}
table.gsheet td.nm{font-weight:700;white-space:nowrap}
table.gsheet td.url a{color:#1155cc;text-decoration:underline;font-size:12px;word-break:break-all}
table.gsheet td.cmt{color:#333;line-height:1.5}
table.gsheet td.ck{text-align:center}
table.gsheet td.ck input{width:16px;height:16px;accent-color:#188653;cursor:pointer}
table.gsheet tr.sect td{background:#d9ead3;text-align:center;font-weight:800;font-size:13.5px;border:1px solid #c4d6bc;padding:9px}
.viewtoggle{display:flex;gap:2px;background:var(--grey200);padding:2px;border-radius:10px}
.viewtoggle button{border:none;background:none;font-size:12px;font-weight:700;padding:6px 12px;border-radius:8px;color:var(--grey600)}
.viewtoggle button.on{background:#fff;color:var(--grey900);box-shadow:0 1px 3px rgba(25,31,40,.1)}
.toast{position:fixed;bottom:28px;left:50%;transform:translateX(-50%) translateY(90px);background:var(--grey900);color:#fff;font-size:13.5px;font-weight:650;padding:13px 22px;border-radius:14px;transition:transform .3s cubic-bezier(.2,.9,.3,1.15);z-index:99;box-shadow:0 12px 30px rgba(0,0,0,.25);max-width:80vw;text-align:center}
.toast.on{transform:translateX(-50%) translateY(0)}

/* ═══════════ 서버 연동에 필요한 UI (목업에 없던 부분) ═══════════ */

/* 사이드바 하단 — 저장 상태 · 오늘 날짜 · 관리 도구 */
.side-foot{display:flex;flex-direction:column;gap:8px}
.save-state{
  display:inline-flex;align-items:center;gap:6px;align-self:flex-start;
  font-size:11px;font-weight:700;padding:3px 10px 3px 8px;border-radius:20px;
  background:var(--grey100);color:var(--grey600);transition:background .2s,color .2s;
}
.save-state:before{content:'';width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}
.save-state.saved{background:var(--green-bg);color:var(--green)}
.save-state.pending{background:var(--amber-bg);color:var(--amber)}
.save-state.failed{background:var(--red-bg);color:var(--red)}
.foot-date{font-size:11px;color:var(--grey400);font-weight:600}
.admin-tools{display:flex;flex-direction:column;gap:2px;align-items:flex-start;padding-top:4px;border-top:1px solid var(--grey100)}
.linkbtn{
  border:none;background:none;padding:2px 0;font-family:inherit;font-size:11px;
  font-weight:650;color:var(--grey500);text-align:left;letter-spacing:-.015em;
}
.linkbtn:hover{color:var(--grey900);text-decoration:underline}
.linkbtn.danger:hover{color:var(--red)}

/* 서버에 연결하지 못했을 때 */
.bootfail{
  max-width:420px;margin:18vh auto;padding:30px 32px;background:#fff;border-radius:var(--r);
  box-shadow:var(--shadow);text-align:center;display:flex;flex-direction:column;gap:10px;
}
.bootfail .bf-t{font-size:17px;font-weight:800;letter-spacing:-.025em}
.bootfail .bf-d{font-size:13px;color:var(--grey600);line-height:1.65}
.bootfail code{background:var(--grey100);padding:2px 7px;border-radius:6px;font-family:ui-monospace,monospace;font-size:12.5px}
.bootfail .btn{margin-top:6px;align-self:center}

/* 키보드로도 쓸 수 있게 — 목업에서는 마우스 전용이던 요소들 */
.todo,.alert-item,.qc-item,.kchk,.pick-row,.side-camp,.camp-card,.crumb{outline-offset:2px}
:focus-visible{outline:2px solid var(--blue);outline-offset:2px;border-radius:8px}

/* 좁은 화면에서 매트릭스를 가로로 넘겨볼 수 있게 */
@media(max-width:820px){
  .app{flex-direction:column}
  .sidebar{width:100%;height:auto;position:static;border-right:none;border-bottom:1px solid var(--grey200)}
  .side-camps{flex:none;max-height:190px}
  .main{padding:20px 16px 60px}
  .kpis{grid-template-columns:1fr}
  .tabs{width:100%;overflow-x:auto}
}
@media (prefers-reduced-motion:reduce){
  *,*:before,*:after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* ── 표 머리글 정렬 ─────────────────────────────────────────── */
th.sortable{cursor:pointer;user-select:none;white-space:nowrap;position:relative;transition:color .12s}
th.sortable:hover{color:var(--grey900)}
th.sortable::after{content:'↕';font-size:9px;opacity:.28;margin-left:4px;vertical-align:1px}
th.sortable:hover::after{opacity:.6}
th.sortable.sorted{color:var(--point);font-weight:800}
th.sortable.sorted::after{content:attr(data-arrow);opacity:1;font-size:8.5px}

/* ── 전체 캘린더 ─────────────────────────────────────────── */
.calnav{display:flex;gap:6px;align-items:center}
.fchip.cal-chip{display:inline-flex;align-items:center;gap:7px}
.fchip.cal-chip .dot{width:9px;height:9px;border-radius:50%;flex:none}
.fchip.cal-chip .n{font-size:11px;font-weight:800;color:var(--grey500);background:var(--grey100);border-radius:20px;padding:1px 7px}
.fchip.cal-chip.dim{opacity:.45}
.fchip.cal-chip.on{background:var(--grey900);color:#fff;border-color:var(--grey900)}
.fchip.cal-chip.on .n{background:rgba(255,255,255,.18);color:#fff}

.cal-cell.big{min-height:104px}
.cal-cell.past{background:var(--grey50)}
.cal-d.sun{color:var(--red)}
.cal-ev.multi{background:color-mix(in srgb,var(--c) 12%,#fff);color:color-mix(in srgb,var(--c) 78%,#000);
  border-left:3px solid var(--c);border-radius:4px;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:filter .12s}
.cal-ev.multi b{font-weight:800}
.cal-ev.multi:hover{filter:brightness(.94)}
.cal-ev.multi.done{background:var(--grey100);color:var(--grey400);border-left-color:var(--grey300);text-decoration:line-through}
.cal-ev.multi.over{background:var(--red-bg);color:var(--red);border-left-color:var(--red)}
.cal-more{font-size:10px;font-weight:700;color:var(--grey500);margin-top:3px;padding-left:3px}

.cal-sec{font-size:11.5px;font-weight:800;color:var(--grey500);padding:12px 22px 6px}
.cal-up{display:flex;align-items:center;gap:10px;padding:9px 22px;border-top:1px solid var(--grey100);
  cursor:pointer;font-size:13px;transition:background .12s}
.cal-up:hover{background:var(--grey50)}
.cal-up .dot{width:8px;height:8px;border-radius:50%;flex:none}
.cal-up-d{font-size:11.5px;font-weight:800;color:var(--grey500);min-width:56px}
.cal-up-d.today{color:var(--point)}
.cal-up-d.late{color:var(--red)}
.cal-up-date{font-size:12px;font-weight:700;color:var(--grey600);min-width:74px}
.cal-up-camp{font-weight:800;min-width:120px}
.cal-up-t{color:var(--grey700);font-weight:600}
.cal-up-ok{font-size:10.5px;font-weight:800;color:var(--green);background:var(--green-bg);border-radius:5px;padding:2px 7px}
.cal-up-ed{font-size:10.5px;font-weight:800;color:var(--blue);background:var(--blue-bg);border-radius:5px;padding:2px 7px}
.cal-up.done{opacity:.5}
.cal-up.done .cal-up-t{text-decoration:line-through}
.cal-empty{text-align:center;color:var(--grey400);padding:28px;font-size:13px}
.tl-row.flash .tl-body{animation:tlflash 1.3s ease-out}
@keyframes tlflash{0%{background:var(--point);border-radius:8px}100%{background:transparent}}
.cal-note{font-size:11.5px;color:var(--grey500);padding:9px 22px;border-top:1px solid var(--grey100);background:var(--grey50)}
.fchip.cal-chip .n.stop{color:var(--red);background:var(--red-bg)}

/* 후보 리스트 — PM 선정 체크칸 */
th.pickcell,td.pickcell{width:46px;text-align:center;padding-left:22px!important;padding-right:0!important}
td.pickcell input{width:16px;height:16px;cursor:pointer;accent-color:var(--grey900)}
table.grid tbody tr.picked{background:var(--blue-bg)}
table.grid tbody tr.picked:hover{background:#dceaff}
select.tonesel{border:1px solid var(--grey200);border-radius:8px;padding:4px 6px;font-family:inherit;
  font-size:12.5px;font-weight:700;color:var(--grey700);background:#fff;cursor:pointer;max-width:118px}
select.tonesel:hover{border-color:var(--grey400)}

/* 고객사 요청사항 — 눌러서 채우는 표 */
table.sheet td.kick-v{cursor:pointer;transition:background .12s}
table.sheet td.kick-v:hover{background:var(--grey50)}
table.sheet tr.blank td.kick-v{background:#fffdf5}
table.sheet tr.divide th,table.sheet tr.divide td{border-top:2px solid var(--grey200)}
.kick-empty{color:var(--grey300);font-size:12.5px}
textarea.kick-in{width:100%;border:1.5px solid var(--point);border-radius:8px;padding:6px 9px;
  font-family:inherit;font-size:13px;line-height:1.5;resize:vertical}
.btn:disabled{opacity:.45;cursor:not-allowed}
.deal-row{border:1px solid var(--grey200);border-radius:9px;padding:8px 11px;margin-bottom:6px}
.deal-row .q{font-weight:800;font-size:12px;color:var(--blue)}
.deal-row .n{display:block;font-weight:700;margin-top:2px}
.deal-row .m{display:block;color:var(--grey500);font-size:11.5px;margin-top:2px}
.fchip.cal-chip.muted{color:var(--grey400);border-style:dashed}

/* ── 로그인 ─────────────────────────────────────────────── */
.login-wrap{position:fixed;inset:0;z-index:9000;background:rgba(23,28,36,.55);backdrop-filter:blur(3px);
  display:flex;align-items:center;justify-content:center;padding:20px}
.login-box{background:#fff;border-radius:18px;padding:30px 28px 24px;width:100%;max-width:360px;
  box-shadow:0 24px 60px rgba(0,0,0,.28)}
.login-box .lg-logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;letter-spacing:-.02em}
.login-box .lg-logo .sq{width:26px;height:26px;border-radius:8px;background:var(--grey900);color:#fff;
  display:grid;place-items:center;font-size:14px;font-weight:800}
.login-box .lg-sub{color:var(--grey500);font-size:12.5px;margin:6px 0 18px}
.login-box .field{display:block;margin-bottom:12px}
.login-box .field span{display:block;font-size:12px;font-weight:700;color:var(--grey600);margin-bottom:5px}
.login-box .field input{width:100%;border:1.5px solid var(--grey200);border-radius:10px;padding:10px 12px;
  font-family:inherit;font-size:14px;background:var(--grey50)}
.login-box .field input:focus{outline:none;border-color:var(--point);background:#fff}
.login-box .lg-err{min-height:18px;font-size:12px;color:var(--red);font-weight:600;margin-bottom:8px}
.login-box .lg-note{font-size:11.5px;color:var(--grey400);line-height:1.6;margin-top:14px;text-align:center}
.authbar{background:var(--red-bg);color:var(--red);font-size:11.5px;font-weight:700;line-height:1.5;
  padding:9px 12px;margin:0 12px 8px;border-radius:10px}
.authbar span{display:block;font-weight:500;margin-top:3px;color:var(--grey600)}
.authbar code{background:#fff;border-radius:4px;padding:1px 4px;font-size:10.5px}
.whoami{padding:8px 12px 2px;font-size:12.5px;color:var(--grey600);display:flex;align-items:center;gap:8px}
.whoami b{color:var(--grey900);font-weight:800}
.whoami .linkbtn{margin-left:auto}
.who-tag{font-size:10.5px;font-weight:700;color:var(--grey500);background:var(--grey100);
  border-radius:5px;padding:1px 6px;margin-left:6px;vertical-align:1px}
.acct{font-size:11px;font-weight:800;border-radius:6px;padding:2px 8px}
.acct.on{background:var(--green-bg);color:var(--green)}
.acct.off{background:var(--red-bg);color:var(--red)}