:root {
  color-scheme: dark;
  --bg: #191919;
  --surface: #1e1e1e;
  --surface-soft: #242424;
  --line: #303030;
  --text: #e7e7e5;
  --text-2: #b2b2ae;
  --text-3: #80807c;
  --brand: #deded9;
  --brand-soft: #30302e;
  --danger: #ee8983;
  --warning: #d2b184;
  --success: #90c8a6;

  --st-plan-bg: #303030;
  --st-plan-fg: #c2c2bd;
  --st-progress-bg: #293b48;
  --st-progress-fg: #accbdf;
  --st-done-bg: #293d30;
  --st-done-fg: #a1c8ad;
  --st-hold-bg: #453828;
  --st-hold-fg: #dac09a;
  --st-issue-bg: #482d2b;
  --st-issue-fg: #eea39d;
  --st-idle-bg: #2d2d2d;
  --st-idle-fg: #a5a5a0;
  --st-ref-bg: #3d334b;
  --st-ref-fg: #c9b8df;

  --due-past-bg: #482d2b;
  --due-past-fg: #eea39d;
  --due-today-bg: #393939;
  --due-today-fg: #e4e4df;
  --due-week-bg: #423629;
  --due-week-fg: #d9bc94;
  --due-fortnight-bg: #293c32;
  --due-fortnight-fg: #a6cbb5;
  --due-future-bg: #303030;
  --due-future-fg: #c0c0bb;
  --due-none-bg: #292929;
  --due-none-fg: #a5a5a0;

  --ev-ad-bg: #49395e;
  --ev-ad-fg: #f0e8ff;
  --ev-ad-border: #b681ff;
  --ev-sale-bg: #2c4936;
  --ev-sale-fg: #e0f5e7;
  --ev-sale-border: #66d69a;
  --hol-bg: #652d27;
  --hol-fg: #ffe4df;
  --hol-border: #ee7668;
  --sun: #c38c86;
  --sat: #a2afbd;
  --today-bg: #191919;
  --today-ring: #ef5353;
  --today-fg: #ffffff;

  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;
  --r-sm: 4px;
  --r-md: 6px;
  --r-lg: 10px;
  --r-pill: 999px;
  --shadow-sm: 0 2px 8px rgb(0 0 0 / 12%);
  --shadow-lg: 0 16px 48px rgb(0 0 0 / 45%);
  --font: Pretendard, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --fs-xs: 11px;
  --fs-sm: 12px;
  --fs-md: 13px;
  --fs-base: 14px;
  --fs-lg: 16px;
  --fs-xl: 20px;
  --fs-2xl: 24px;
  --topbar-h: 76px;
  --tabs-h: 44px;
  --chat-w: 320px;
  --cal-foot-h: 126px;
  --control-h: 34px;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg);
  color: var(--text);
  font: var(--fs-base)/1.45 var(--font);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; }
button { cursor: pointer; }
button:disabled { cursor: default; opacity: .45; }
a { color: inherit; text-decoration-color: var(--text-3); }
::selection { background: #544660; color: #fff; }
* { scrollbar-width: thin; scrollbar-color: #50504d transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-thumb { background: #50504d; border-radius: 8px; }
::-webkit-scrollbar-track { background: transparent; }

.app {
  height: 100dvh;
  display: grid;
  grid-template-rows: var(--topbar-h) var(--tabs-h) minmax(0, 1fr);
  overflow: hidden;
}
.topbar {
  display: grid;
  grid-template-columns: max-content minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--sp-3);
  height: var(--topbar-h);
  padding: 0 var(--sp-5);
  border-bottom: 1px solid var(--line);
  background: var(--bg);
}
.app-name { font-size: var(--fs-lg); font-weight: 700; white-space: nowrap; }
.app-name small {
  display: block;
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: 400;
}
.refs { display: flex; gap: var(--sp-2); min-width: 0; overflow-x: auto; }
.ref {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  flex: 0 0 auto;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface-soft);
  color: var(--text-2);
  font-size: var(--fs-sm);
}
.ref b { color: var(--text); font-size: var(--fs-md); font-weight: 600; }
.ref.past b { color: var(--text-3); }
.user { color: var(--text-2); font-size: var(--fs-sm); white-space: nowrap; }
.tabs {
  display: flex;
  align-items: stretch;
  gap: var(--sp-1);
  padding: 0 var(--sp-4);
  overflow-x: auto;
  border-bottom: 1px solid var(--line);
  background: var(--bg);
  scrollbar-width: thin;
}
.tab {
  flex: 0 0 auto;
  padding: 0 var(--sp-3);
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-3);
  font-size: var(--fs-md);
  white-space: nowrap;
}
.tab:hover { color: var(--text); background: #222; }
.tab[aria-selected="true"] {
  color: var(--text);
  border-bottom-color: #bdbdb6;
  font-weight: 600;
}
.main {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--chat-w);
  min-height: 0;
}
.view { min-width: 0; min-height: 0; padding: var(--sp-4); overflow: auto; }
.view-cal { overflow: hidden; }
.toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}
.toolbar h1 { margin: 0; font-size: var(--fs-lg); font-weight: 650; }
.actions { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.filters {
  display: grid;
  grid-template-columns: repeat(4, minmax(100px, 1fr)) minmax(160px, 1.6fr);
  gap: var(--sp-2);
  margin: var(--sp-3) 0;
}
.list-head { display: flex; align-items: baseline; gap: var(--sp-2); }
.list-head small { color: var(--text-3); }

.cal {
  height: 100%;
  min-height: 0;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) var(--cal-foot-h);
  gap: var(--sp-3);
}
.cal-toolbar { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.cal-toolbar h1 {
  margin: 0 var(--sp-2);
  font-size: var(--fs-xl);
  font-weight: 700;
  letter-spacing: -.5px;
}
.cal-body {
  display: grid;
  grid-template-rows: 28px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
  border: 1px solid #292929;
  border-radius: var(--r-sm);
  background: var(--bg);
}
.cal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cal-days span {
  display: grid;
  place-items: center;
  border-bottom: 1px solid #292929;
  background: var(--bg);
  color: var(--text-3);
  font-size: var(--fs-xs);
  font-weight: 400;
}
.cal-grid {
  --weeks: 6;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: repeat(var(--weeks), minmax(0, 1fr));
  min-height: 0;
}
.cal.week .cal-grid { --weeks: 1; }
.cal.fortnight .cal-grid { --weeks: 2; }
.cal.month.five .cal-grid { --weeks: 5; }
.cal-week {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  min-height: 0;
  overflow: hidden;
  border-bottom: 1px solid #262626;
}
.cal-week:last-child { border-bottom: 0; }
.cal-cell {
  position: relative;
  min-width: 0;
  min-height: 0;
  padding: 1px 4px;
  overflow: hidden;
  border-right: 1px solid #262626;
  border-bottom: 1px solid #262626;
}
.cal-cell:nth-child(7n) { border-right: 0; }
.cal-week .cal-cell { border-bottom: 0; cursor: pointer; }
.cal-cell:hover { background: #1d1d1d; }
.cal-head {
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  min-width: 0;
  height: 24px;
}
.date {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  min-width: 24px;
  height: 24px;
  padding: 0 2px;
  color: var(--text);
  font-size: var(--fs-sm);
  white-space: nowrap;
}
.sun .date { color: var(--sun); }
.sat .date { color: var(--sat); }
.cal-days .sun, .cal-days .sat { color: var(--text-3); }
.cal-cell.is-hol .date { color: var(--sun); }
.cal-cell.outside { background: #171717; }
.cal-cell.outside .date { opacity: .4; }
.cal-cell.today { background: var(--today-bg); box-shadow: none; }
/* 오늘 칸 노란 테두리: 일정 막대 위에 그려지고 레이아웃은 밀리지 않음 */
.cal-cell.today::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  box-shadow: inset 0 0 0 2px #FACC15;
  pointer-events: none;
}
.today .date {
  border-radius: 50%;
  background: var(--today-ring);
  color: var(--today-fg);
  font-weight: 600;
}
.cal-cell.selected { outline: 1px solid #85857e; outline-offset: -1px; }
.cal-head .hol {
  min-width: 0;
  padding: 1px 5px;
  overflow: hidden;
  border-radius: var(--r-sm);
  font-size: 10px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.cal-events { display: grid; gap: 3px; margin-top: 2px; }
.wk-ev {
  position: absolute;
  inset: 25px 0 auto;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: 17px;
  row-gap: 1px;
  pointer-events: none;
}
.ev {
  display: block;
  min-width: 0;
  overflow: hidden;
  padding: 2px 5px;
  border: 0;
  border-left: 3px solid #90908b;
  border-radius: var(--r-sm);
  background: #353533;
  color: var(--text);
  font-size: var(--fs-xs);
  line-height: 1.35;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.ev-ad {
  background: var(--ev-ad-bg);
  color: var(--ev-ad-fg);
  border-color: var(--ev-ad-border);
}
.ev-sale {
  background: var(--ev-sale-bg);
  color: var(--ev-sale-fg);
  border-color: var(--ev-sale-border);
}
.hol {
  border: 0;
  border-left: 3px solid var(--hol-border);
  border-radius: var(--r-sm);
  background: var(--hol-bg);
  color: var(--hol-fg);
}
.wk-ev .ev {
  margin: 0 2px;
  padding: 0 4px;
  line-height: 17px;
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
}
.wk-ev .ev:hover { filter: brightness(1.15); }
.ev.cont-l {
  margin-left: 0;
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
  border-left-color: transparent;
}
.ev.cont-r { margin-right: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; }
.ev.done { opacity: .42; text-decoration: line-through; }
.ev.past, .cal-week:has(~ .cal-week .today) .wk-ev .ev { opacity: .46; }
.cal-week:has(~ .cal-week .today) .wk-ev .ev.done { opacity: .3; }
.more {
  border: 0;
  background: transparent;
  color: var(--text-3);
  font-size: var(--fs-xs);
}
.more:hover { color: var(--text); }
.cal-cell .more { position: absolute; left: 4px; bottom: 1px; padding: 0 4px; }
.cal-foot {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--sp-3);
  min-height: 0;
}
.panel {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  padding: var(--sp-3);
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
}
.panel-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}
.panel-head h2 { margin: 0; font-size: var(--fs-md); font-weight: 600; }
.panel-head small { color: var(--text-3); font-size: var(--fs-xs); }
.unscheduled {
  display: flex;
  align-content: flex-start;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: var(--sp-1);
  min-height: 0;
  overflow: auto;
}
.unscheduled .chip { cursor: grab; touch-action: none; overflow: hidden; text-overflow: ellipsis; }
.memo textarea {
  width: 100%;
  height: 100%;
  min-height: 0;
  resize: none;
  background: #202020;
  font-size: var(--fs-md);
}
.cal-dots, .day-list, .mobile-list { display: none; }
.dot { flex: 0 0 5px; width: 5px; height: 5px; border-radius: 50%; background: var(--text-3); }
.dot.ad { background: var(--ev-ad-border); }
.dot.sale { background: var(--ev-sale-border); }
.dot.holiday { background: var(--hol-border); }
.day-item { display: flex; align-items: center; gap: var(--sp-2); padding: 4px 0; font-size: var(--fs-sm); }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--control-h);
  padding: 0 var(--sp-3);
  border: 1px solid #363636;
  border-radius: var(--r-sm);
  background: var(--surface-soft);
  color: var(--text);
  font-size: var(--fs-md);
  font-weight: 500;
  white-space: nowrap;
}
.btn:hover { background: #303030; border-color: #4b4b47; }
.btn.primary { background: #deded9; border-color: #deded9; color: #202020; }
.btn.primary:hover { background: #f0f0eb; border-color: #f0f0eb; }
.btn.danger { color: var(--danger); border-color: #533633; background: #302321; }
.btn.success { color: var(--success); background: var(--st-done-bg); border-color: #3a5141; }
.btn.ghost { border-color: transparent; background: transparent; color: var(--text-2); }
.btn.ghost:hover { background: #2a2a2a; color: var(--text); }
.btn.icon { width: var(--control-h); padding: 0; }
.btn.small { min-height: 26px; padding-inline: var(--sp-2); font-size: var(--fs-xs); }
:where(button, input, select, textarea, a):focus-visible { outline: 2px solid #b8b8b1; outline-offset: 2px; }
input:not([type="checkbox"]), select, textarea {
  width: 100%;
  min-width: 0;
  padding: 7px 10px;
  border: 1px solid #393939;
  border-radius: var(--r-sm);
  background: #222;
  color: var(--text);
}
input:not([type="checkbox"]), select { min-height: var(--control-h); }
input::placeholder, textarea::placeholder { color: var(--text-3); }
input[readonly] { background: var(--surface-soft); color: var(--text-2); }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: var(--danger); }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: #aaa9a1; }
.search { position: relative; }
.search input { padding-left: 30px; }
.search-icon { color: var(--text-3); }
.search .search-icon { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); }
.segment { display: inline-flex; border: 1px solid #363636; border-radius: var(--r-sm); overflow: hidden; }
.segment .btn { border: 0; border-radius: 0; background: transparent; color: var(--text-3); }
.segment .btn:hover { background: #292929; color: var(--text); }
.segment .btn[aria-pressed="true"] { background: #343432; color: var(--text); }

.badge, .chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 2px 7px;
  border-radius: var(--r-sm);
  font-size: var(--fs-xs);
  font-weight: 500;
  white-space: nowrap;
}
.chip { border: 1px solid #393939; background: #2c2c2b; color: var(--text-2); }
.chip.dday { background: #353533; border-color: #484845; color: var(--text); }
.st-plan { background: var(--st-plan-bg); color: var(--st-plan-fg); }
.st-progress { background: var(--st-progress-bg); color: var(--st-progress-fg); }
.st-done { background: var(--st-done-bg); color: var(--st-done-fg); }
.st-hold { background: var(--st-hold-bg); color: var(--st-hold-fg); }
.st-issue { background: var(--st-issue-bg); color: var(--st-issue-fg); }
.st-idle { background: var(--st-idle-bg); color: var(--st-idle-fg); }
.st-ref { background: var(--st-ref-bg); color: var(--st-ref-fg); }
.due-past { background: var(--due-past-bg); color: var(--due-past-fg); }
.due-today { background: var(--due-today-bg); color: var(--due-today-fg); }
.due-week { background: var(--due-week-bg); color: var(--due-week-fg); }
.due-fortnight { background: var(--due-fortnight-bg); color: var(--due-fortnight-fg); }
.due-future { background: var(--due-future-bg); color: var(--due-future-fg); }
.due-none { background: var(--due-none-bg); color: var(--due-none-fg); }
.chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.chips .chip button { border: 0; background: none; padding: 0 0 0 2px; color: var(--text-3); }
.checks { display: flex; flex-wrap: wrap; gap: var(--sp-3); }
.checks label { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-md); color: var(--text); font-weight: 400; }

.table-wrap { overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.table { width: 100%; min-width: 1120px; border-collapse: separate; border-spacing: 0; font-size: var(--fs-sm); }
.table th {
  position: sticky;
  top: 0;
  z-index: 2;
  padding: 10px 8px;
  background: #222;
  color: var(--text-3);
  font-weight: 500;
  text-align: left;
  white-space: nowrap;
}
.table td { padding: 10px 8px; border-top: 1px solid #2b2b2b; vertical-align: middle; }
.table th.sortable { cursor: pointer; user-select: none; }
.table tbody tr { cursor: pointer; }
.table tbody tr:hover { background: #232323; }
.table tbody tr.selected { background: var(--brand-soft); }
.table .check { width: 36px; text-align: center; }
.table .task { min-width: 220px; font-weight: 600; }
.table .date-col { width: 90px; white-space: nowrap; }
.table .attach { width: 54px; text-align: center; }
.muted { color: var(--text-3); }
.task-meta { margin-top: 3px; color: var(--text-3); font-size: var(--fs-xs); font-weight: 400; }
.card { padding: var(--sp-3); border: 1px solid #363636; border-radius: var(--r-md); background: #252525; }
.card:hover { border-color: #4b4b47; }
.card-head { display: flex; align-items: flex-start; gap: var(--sp-2); }
.card-title { flex: 1; min-width: 0; margin: 0; font-size: var(--fs-md); font-weight: 600; overflow-wrap: anywhere; }
.card-badges { display: flex; flex-wrap: wrap; gap: var(--sp-1); margin-top: var(--sp-2); }
.card-info { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 10px; margin: var(--sp-2) 0 0; font-size: var(--fs-sm); }
.card-info dt { color: var(--text-3); }
.card-info dd { margin: 0; overflow-wrap: anywhere; }
.card-foot { display: flex; justify-content: space-between; gap: var(--sp-2); margin-top: var(--sp-3); color: var(--text-2); font-size: var(--fs-xs); }

.board { display: grid; grid-auto-flow: column; grid-auto-columns: 270px; gap: var(--sp-3); height: 100%; overflow-x: auto; }
.lane { display: grid; grid-template-rows: auto minmax(0, 1fr); min-height: 0; border: 1px solid var(--line); border-radius: var(--r-md); background: #1d1d1d; }
.lane-head { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3); color: var(--text-2); font-size: var(--fs-md); font-weight: 600; }
.lane-body { display: grid; align-content: start; gap: var(--sp-2); padding: 0 var(--sp-2) var(--sp-2); overflow-y: auto; }
.lane .card { box-shadow: var(--shadow-sm); }
.lane-body .card { cursor: grab; touch-action: none; }
.tl-wrap { height: 100%; display: grid; grid-template-rows: auto minmax(0, 1fr); gap: var(--sp-3); }
.timeline { --task-w: 220px; --day-w: 38px; overflow: auto; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.tl-row { display: grid; grid-template-columns: var(--task-w) max-content; width: max-content; min-height: 44px; }
.tl-name { position: sticky; left: 0; z-index: 3; padding: 12px 10px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface); font-size: var(--fs-sm); }
.tl-grid {
  position: relative;
  display: grid;
  grid-template-columns: repeat(var(--days, 28), var(--day-w));
  align-items: center;
  border-bottom: 1px solid var(--line);
  background-image: linear-gradient(to right, #282828 1px, transparent 1px);
  background-size: var(--day-w) 100%;
}
.tl-head { position: sticky; top: 0; z-index: 5; background: var(--surface-soft); }
.tl-head .tl-name { background: var(--surface-soft); color: var(--text-3); }
.tl-date { padding: 8px 0; text-align: center; color: var(--text-3); font-size: var(--fs-xs); }
.tl-date.sun, .tl-date.is-hol { color: var(--sun); }
.tl-date.sat { color: var(--sat); }
.tl-bar {
  grid-column: var(--start, 1) / span var(--span, 3);
  z-index: 1;
  min-width: 0;
  height: 24px;
  margin: 0 3px;
  padding: 3px 7px;
  border: 0;
  border-left: 3px solid #90908b;
  border-radius: var(--r-sm);
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--fs-xs);
}
.tl-bar.ev-ad { border-color: var(--ev-ad-border); }
.tl-bar.ev-sale { border-color: var(--ev-sale-border); }
.tl-today { position: absolute; top: 0; bottom: 0; left: calc(var(--today-index, 0) * var(--day-w) + var(--day-w) / 2); z-index: 2; width: 1px; background: var(--today-ring); pointer-events: none; }

.chat { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; min-height: 0; border-left: 1px solid var(--line); background: #1c1c1c; }
.chat-head { padding: var(--sp-4); border-bottom: 1px solid var(--line); font-size: var(--fs-md); font-weight: 600; }
.chat-log { overflow-y: auto; padding: var(--sp-3); }
.chat-compose { padding: var(--sp-3); border-top: 1px solid var(--line); }
.chat-compose textarea { min-height: 72px; max-height: 120px; resize: vertical; font-size: var(--fs-md); }
.chat-fab, .chat-head .chat-close, .sheet-mask { display: none; }
.message { display: grid; gap: 5px; margin-bottom: var(--sp-4); }
.message small { color: var(--text-3); font-size: var(--fs-xs); }
.bubble { justify-self: start; max-width: 94%; padding: 10px 12px; border: 1px solid #333; border-radius: 2px 8px 8px; background: #242424; font-size: var(--fs-md); overflow-wrap: anywhere; white-space: pre-wrap; }
.message.me .bubble { justify-self: end; background: #30302e; border-color: #41413d; border-radius: 8px 2px 8px 8px; }
.message.me small { text-align: right; }
.chat-log .pending .bubble { color: var(--text-3); }
.changes { margin-top: var(--sp-2); padding: var(--sp-2); border: 1px solid var(--line); border-radius: var(--r-md); background: #202020; }
.changes h3 { margin: 0 0 5px; color: var(--text-2); font-size: var(--fs-xs); font-weight: 500; }
.change { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); padding: 6px 0; border-top: 1px solid var(--line); font-size: var(--fs-xs); }
.change span { min-width: 0; overflow-wrap: anywhere; }
.change .btn { flex-shrink: 0; }
.rejected { color: var(--danger); }

.modal-mask { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; padding: var(--sp-5); background: rgb(0 0 0 / 65%); }
.modal { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; width: min(760px, 100%); max-height: 90dvh; overflow: hidden; border: 1px solid #3a3a3a; background: #202020; border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--sp-4); border-bottom: 1px solid var(--line); }
.modal-head h2 { margin: 0; font-size: var(--fs-lg); font-weight: 650; }
.modal-body { padding: var(--sp-4); overflow-y: auto; }
.modal-foot { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--line); background: #242424; }
.modal-foot .push { margin-left: auto; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3) var(--sp-4); }
.field { display: grid; gap: 5px; min-width: 0; }
.field label { color: var(--text-2); font-size: var(--fs-sm); font-weight: 500; }
.field .hint { color: var(--text-3); font-size: var(--fs-xs); }
.field .error { color: var(--danger); font-size: var(--fs-xs); }
.wide { grid-column: 1 / -1; }
.attachments { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-top: var(--sp-3); }
.thumb { width: 84px; margin: 0; }
.thumb img { display: block; width: 84px; height: 64px; object-fit: cover; border: 1px solid var(--line); border-radius: var(--r-sm); }
.thumb figcaption { margin-top: 4px; color: var(--text-2); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.history { list-style: none; margin: var(--sp-4) 0 0; padding: 0; }
.history li { padding: var(--sp-2) 0; border-top: 1px solid var(--line); font-size: var(--fs-sm); }
.history time { display: block; color: var(--text-3); font-size: var(--fs-xs); }
.hist-item .who { font-weight: 600; }
.hist-item .chg { color: var(--text-2); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.meta-line { margin-top: var(--sp-3); color: var(--text-3); font-size: var(--fs-xs); }

.login { min-height: 100dvh; display: grid; place-items: center; padding: var(--sp-5); }
.login-card { width: min(380px, 100%); padding: var(--sp-6); border: 1px solid #353535; border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.login-card h1 { margin: 0 0 var(--sp-2); font-size: var(--fs-xl); font-weight: 650; }
.login-card p { color: var(--text-2); font-size: var(--fs-md); }
.people { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin: var(--sp-5) 0; }
.people .btn { min-height: 44px; }
.people .btn[aria-pressed="true"] { color: var(--text); border-color: #aaa99f; background: var(--brand-soft); }
.pin { text-align: center; letter-spacing: 8px; font-size: var(--fs-xl); }
.login-card .primary { width: 100%; margin-top: var(--sp-4); }
.login-err { min-height: 18px; margin-top: var(--sp-2); color: var(--danger); font-size: var(--fs-sm); }
.drag-ghost { position: fixed; z-index: 200; pointer-events: none; opacity: .9; box-shadow: var(--shadow-lg); max-width: 220px; }
.drop-hover { outline: 2px dashed #aaa99f !important; outline-offset: -2px; background: var(--brand-soft) !important; }
.toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 300; max-width: calc(100vw - 32px); padding: 10px 16px; border: 1px solid #484844; border-radius: var(--r-md); background: #30302e; color: var(--text); font-size: var(--fs-md); box-shadow: var(--shadow-lg); overflow-wrap: anywhere; }
.empty { padding: var(--sp-6); color: var(--text-3); text-align: center; }

@media (max-width: 1100px) and (min-width: 769px) {
  .topbar { grid-template-columns: max-content minmax(0, 1fr) auto auto; gap: var(--sp-2); padding-inline: var(--sp-3); }
  .ref { padding-inline: var(--sp-2); }
  .filters { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .filters .search { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  :root { --topbar-h: 106px; --tabs-h: 44px; --cal-foot-h: 112px; --control-h: 40px; }
  .topbar {
    grid-template-columns: minmax(0, 1fr) auto auto;
    grid-template-rows: 48px 58px;
    gap: 0 var(--sp-2);
    padding: 0 var(--sp-3);
  }
  .app-name { font-size: var(--fs-base); }
  .app-name small { font-size: 10px; }
  .refs { grid-row: 2; grid-column: 1 / -1; align-self: center; }
  .ref { padding: 6px var(--sp-2); font-size: var(--fs-xs); }
  .top-search { width: 40px; padding: 0; }
  .top-search input { display: none; }
  .top-search .search-icon { display: block; }
  .user { max-width: 60px; overflow: hidden; text-overflow: ellipsis; }
  .tabs { padding-inline: var(--sp-2); }
  .tab { padding-inline: var(--sp-3); }
  .main { grid-template-columns: minmax(0, 1fr); }
  .view { padding: var(--sp-2); }
  .toolbar { flex-wrap: wrap; gap: var(--sp-2); }
  .filters { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .filters .search { grid-column: 1 / -1; }
  .table-wrap { display: none; }
  .mobile-list { display: grid; gap: var(--sp-2); padding-bottom: 72px; }
  .chat { display: none; }
  .chat-fab {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-height: var(--control-h);
    padding: 0 10px;
    border: 1px solid var(--line);
    border-radius: var(--r-sm);
    background: var(--surface-soft);
    color: var(--text);
    font-size: var(--fs-sm);
    white-space: nowrap;
  }
  .sheet-mask.is-open { display: block; position: fixed; inset: 0; z-index: 50; background: rgb(0 0 0 / 60%); }
  .chat.is-open {
    display: grid;
    position: fixed;
    inset: auto 0 0;
    z-index: 51;
    height: min(78dvh, 680px);
    padding-bottom: env(safe-area-inset-bottom);
    border: 1px solid #3a3a3a;
    border-radius: 16px 16px 0 0;
    box-shadow: var(--shadow-lg);
  }
  .chat-head { display: flex; justify-content: space-between; align-items: center; }
  .chat-head .chat-close { display: inline-flex; }
  .cal { gap: var(--sp-2); }
  .cal.month { grid-template-rows: auto minmax(0, 1fr) 88px var(--cal-foot-h); }
  .cal.month .cal-events,
  .cal.month .wk-ev,
  .cal.month .cal-head .hol,
  .cal.month .more { display: none; }
  .cal.month .cal-cell { padding: 2px; text-align: right; }
  .cal.month .cal-head { justify-content: flex-start; }
  .cal.month .date { flex-basis: 22px; width: 22px; height: 22px; font-size: var(--fs-xs); }
  .cal-dots { display: flex; justify-content: flex-end; gap: 3px; margin-top: 2px; padding-right: 5px; }
  .day-list { display: block; min-height: 0; overflow-y: auto; padding: var(--sp-2); background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
  .day-list h2 { margin: 0 0 var(--sp-1); font-size: var(--fs-sm); font-weight: 500; }
  .day-item { padding: 3px 0; }
  .cal-foot { gap: var(--sp-2); }
  .panel { padding: var(--sp-2); }
  .panel-head { flex-wrap: wrap; gap: 2px; margin-bottom: var(--sp-1); }
  .panel-head small { font-size: 10px; }
  .cal.week .cal-body, .cal.fortnight .cal-body { overflow-x: auto; }
  .cal.week .cal-days, .cal.week .cal-grid,
  .cal.fortnight .cal-days, .cal.fortnight .cal-grid { min-width: 700px; }
  .cal-toolbar h1 { font-size: var(--fs-base); margin: 0; }
  input:not([type="checkbox"]), select, textarea { font-size: 16px; }
  .chat-compose textarea { font-size: 16px; }
  .memo textarea { font-size: 13px; }
  .unscheduled .chip { font-size: 10px; }
  .modal { width: 100%; max-height: 94dvh; border-radius: 12px 12px 0 0; }
  .modal-mask { align-items: flex-end; padding: 0; }
  .form-grid { grid-template-columns: 1fr; }
  .form-grid .wide { grid-column: auto; }
  .modal-foot { flex-wrap: wrap; padding-bottom: calc(var(--sp-3) + env(safe-area-inset-bottom)); }
  .board { grid-auto-columns: min(84vw, 290px); }
  .timeline { --task-w: 130px; }
}

@media print {
  :root {
    color-scheme: light;
    --bg: #fff;
    --surface: #fff;
    --surface-soft: #fff;
    --line: #aaa;
    --text: #000;
    --text-2: #000;
    --text-3: #333;
    --brand: #000;
    --brand-soft: #fff;
    --danger: #000;
    --warning: #000;
    --success: #000;
    --ev-ad-bg: #fff;
    --ev-ad-fg: #000;
    --ev-ad-border: #555;
    --ev-sale-bg: #fff;
    --ev-sale-fg: #000;
    --ev-sale-border: #555;
    --hol-bg: #fff;
    --hol-fg: #000;
    --hol-border: #555;
    --sun: #000;
    --sat: #000;
    --today-bg: #fff;
    --today-ring: #000;
    --today-fg: #000;
  }
  * { box-shadow: none !important; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
  html, body { height: auto; background: #fff; color: #000; font-size: 9pt; }
  body * {
    background-color: #fff !important;
    color: #000 !important;
    border-color: #aaa !important;
    text-shadow: none !important;
    filter: none !important;
  }
  .app { display: block; height: auto; overflow: visible; }
  .topbar { display: flex; height: auto; padding: 0 0 4mm; border-bottom: 1px solid #aaa; }
  .refs { overflow: visible; flex-wrap: wrap; }
  .top-search, .topbar > .btn, .user, .tabs, .chat, .chat-fab,
  .sheet-mask, .filters, .toolbar .actions, .modal-mask, .login,
  .toast { display: none !important; }
  .main { display: block; }
  .view { padding: 4mm 0 0; overflow: visible; }
  .toolbar { margin-bottom: 3mm; }
  .table-wrap { display: block; overflow: visible; border-radius: 0; }
  .mobile-list { display: none; }
  .table { min-width: 0; width: 100%; font-size: 7.5pt; }
  .table th, .table td { padding: 2mm 1mm; overflow-wrap: anywhere; }
  .table th, .tl-name, .tl-head { position: static; }
  .table .task { min-width: 0; }
  .table .date-col { width: auto; white-space: nowrap; }
  thead { display: table-header-group; }
  tr, .card, .history li { break-inside: avoid; }
  .cal-toolbar .btn, .cal-toolbar .segment { display: none !important; }
  .print-cal .cal { height: 150mm; grid-template-rows: auto minmax(0, 1fr) 27mm; gap: 3mm; }
  .print-cal .cal-body { grid-template-rows: 7mm minmax(0, 1fr); overflow: hidden; }
  .print-cal .cal-days, .print-cal .cal-grid { min-width: 0; }
  .print-cal .cal-events { display: grid; }
  .print-cal .cal-dots, .print-cal .day-list, .print-cal .more { display: none !important; }
  .print-cal .cal-cell { text-align: left; padding: 1mm; }
  .print-cal .cal-head { justify-content: space-between; }
  .print-cal .cal-head .hol { display: inline-flex; }
  .print-cal .ev { font-size: 7pt; padding: .5mm 1mm; }
  .print-cal .wk-ev { display: grid !important; }
  .print-cal .wk-ev .ev { padding: 0 1mm; line-height: 17px; }
  .print-cal .cal-week { break-inside: avoid; }
  .print-cal .cal-foot { grid-template-columns: 1fr 1fr; gap: 3mm; }
  .print-cal .panel { padding: 2mm; }
  .print-cal .unscheduled { overflow: visible; }
  .print-cal .memo textarea { border: 0; padding: 0; font-size: 8pt; }
  .ev, .hol, .tl-bar { border: 1px solid #aaa; border-left: 3px solid #555 !important; }
  .ev.cont-l { border-left-width: 1px; }
  .ev.done, .ev.past, .cal-week:has(~ .cal-week .today) .wk-ev .ev,
  .cal-cell.outside .date { opacity: 1; }
  .today .date { border: 1px solid #000 !important; background: #fff !important; color: #000 !important; }
  .cal-cell.selected { outline: none; }
  .board { display: flex; align-items: flex-start; flex-wrap: wrap; height: auto; overflow: visible; }
  .lane { width: calc(33.333% - 3mm); break-inside: avoid; }
  .lane-body { overflow: visible; }
  .timeline { overflow: visible; }
  .tl-grid { background-image: linear-gradient(to right, #ddd 1px, transparent 1px); }
  .tl-today { background-color: #000 !important; }
}

/* 종료일 표시 */
.ev.ev-end { border-left-style: dashed; }
.ev.ev-end b { font-weight: 600; }

/* 태그 색 6종 (구분·상태 선택지별 지정) */
.c-gray   { --t-bg: #373737; --t-fg: #d3d3d0; --e-bg: #3a3a3a; --e-fg: #ececea; --e-bd: #9b9b97; }
.c-red    { --t-bg: #522e2a; --t-fg: #f2b8b0; --e-bg: #5a2e2a; --e-fg: #ffe4df; --e-bd: #ee7668; }
.c-yellow { --t-bg: #4a3c21; --t-fg: #e8cc8f; --e-bg: #4d4021; --e-fg: #fbefd2; --e-bd: #e0b84f; }
.c-green  { --t-bg: #293d30; --t-fg: #a1c8ad; --e-bg: #2c4936; --e-fg: #e0f5e7; --e-bd: #66d69a; }
.c-blue   { --t-bg: #263a4d; --t-fg: #a9c8e6; --e-bg: #28405a; --e-fg: #e2efff; --e-bd: #5ea4ee; }
.c-purple { --t-bg: #3d334b; --t-fg: #c9b8df; --e-bg: #49395e; --e-fg: #f0e8ff; --e-bd: #b681ff; }
.tag { background: var(--t-bg); color: var(--t-fg); }
.ev[class*="c-"], .drag-ghost[class*="c-"] { background: var(--e-bg); color: var(--e-fg); border-color: var(--e-bd); }
.dot[class*="c-"] { background: var(--e-bd); }
.swatches { display: flex; gap: 6px; flex-wrap: wrap; }
.swatch { width: 26px; height: 26px; padding: 0; border: 2px solid transparent; border-radius: 50%; background: var(--e-bd); }
.swatch[aria-pressed="true"] { border-color: var(--text); box-shadow: 0 0 0 2px var(--bg) inset; }
.color-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 6px 0; border-top: 1px solid var(--line); }
.color-group h3 { margin: var(--sp-3) 0 var(--sp-1); font-size: var(--fs-sm); color: var(--text-2); }
.app.no-top { grid-template-rows: minmax(0, 1fr); }
.app.no-top .topbar, .app.no-top .tabs { display: none; }
.top-restore { display: none; }
.app.no-top ~ .top-restore { display: inline-flex; position: fixed; top: 6px; right: 8px; z-index: 30; min-height: 28px; padding: 0 8px; opacity: .7; }
.app.no-top ~ .top-restore:hover { opacity: 1; }
@media print { .top-restore { display: none !important; } }
.topbar-btns { display: flex; align-items: center; gap: var(--sp-2); }
@media (max-width: 768px) {
  .topbar-btns .lbl { display: none; }
  .topbar-btns .btn { padding: 0 8px; }
}
@media print { .topbar-btns { display: none !important; } }
.chat-head { display: flex; align-items: center; gap: var(--sp-2); }

/* 클로드 패널 접기 */
.main.chat-off { grid-template-columns: minmax(0, 1fr); }
.main.chat-off .chat { display: none; }
.chat-reopen { display: none; }
.main.chat-off .chat-reopen { display: inline-flex; position: fixed; right: 12px; bottom: 12px; z-index: 30; }
.chat-head .chat-fold { margin-left: auto; }
/* 일정 미정 왼쪽 사이드바 */
.cal-wrap { display: grid; grid-template-columns: 250px minmax(0, 1fr); gap: var(--sp-3); height: 100%; min-height: 0; }
.undated-side { display: flex; flex-direction: column; gap: 6px; min-height: 0; padding: var(--sp-3); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); }
.undated-side .panel-head { margin: 0; }
.side-list { display: grid; align-content: start; gap: 6px; overflow-y: auto; min-height: 0; padding-right: 2px; }
.side-card { padding: 8px 10px; cursor: grab; touch-action: none; }
.side-card .card-title { font-size: var(--fs-md); }
.side-card .card-badges { margin-top: 4px; }
.cal-foot.memo-only { grid-template-columns: 1fr; }
.panel-head .side-open { margin-left: auto; }
.kbd-hint { font-size: var(--fs-xs); }
@media (max-width: 768px) {
  .chat-head .chat-fold, .side-open, .main.chat-off .chat-reopen { display: none; }
  .main.chat-off .chat.is-open { display: grid; }
}
@media print { .chat-reopen, .side-open { display: none !important; } .cal-wrap { display: block; } .undated-side { display: none; } }

/* 프로그램 수정 요청 창 */
.modal.modal-dev { width: min(820px, 100%); }
.dev-wrap { display: grid; grid-template-rows: minmax(260px, 52dvh) auto auto; gap: var(--sp-3); }
.dev-log { border: 1px solid var(--line); border-radius: var(--r-md); background: var(--bg); }
.dev-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); align-items: end; }
.changes.spec textarea { margin: 6px 0; font-size: var(--fs-md); }
.dev-history summary { cursor: pointer; color: var(--text-2); font-size: var(--fs-sm); }
.dev-reqs { display: grid; gap: 6px; margin-top: 8px; }
.dev-req { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); }
.dev-req-text { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 768px) { .dev-wrap { grid-template-rows: minmax(220px, 50dvh) auto auto; } }
.drop-line { position: fixed; z-index: 190; height: 2px; border-radius: 2px; background: var(--today-ring); pointer-events: none; box-shadow: 0 0 0 1px rgb(0 0 0 / 40%); }