/* =========================================================
   프로젝트 매니저 — app.css v2 (tokens.css 이후)
   원칙: 경계선 대신 표면, 키캡은 꼭 필요한 곳에만, 행마다 정보 3개 이하
   ========================================================= */

*, *::before, *::after { box-sizing: border-box; }
.app, .sheet {
  font-family: var(--font-sans); font-size: var(--fs-base); line-height: var(--lh-tight);
  color: var(--text); word-break: keep-all; -webkit-font-smoothing: antialiased; letter-spacing: -0.003em;
}
.num, .dday, .amount, time { font-variant-numeric: tabular-nums; }
button, input, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration: none; }
svg.i { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
svg.i-20 { width: 20px; height: 20px; }
svg.i-12 { width: 12px; height: 12px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.trunc { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.muted { color: var(--text-secondary); }
.faint { color: var(--text-tertiary); }
.unit { color: var(--text-tertiary); font-weight: var(--fw-regular); margin-left: 1px; }
.sep { color: var(--text-disabled); }

/* ---------- 골격: 크롬 위에 패널 한 장 ---------- */
.app { display: grid; grid-template-rows: var(--topbar-h) minmax(0, 1fr) var(--statusbar-h); background: var(--bg-app); overflow: hidden; position: relative; }
.main { display: grid; grid-template-columns: var(--list-w, var(--list-w-full)) minmax(0, 1fr); min-height: 0; padding-right: 8px; }
.app[data-density="mid"] { --list-w: var(--list-w-mid); }
.app[data-density="compact"] { --list-w: var(--list-w-compact); }

.topbar { display: flex; align-items: center; gap: 2px; padding: 0 12px 0 16px; }
.wordmark { display: flex; align-items: center; gap: 9px; font-weight: var(--fw-semibold); letter-spacing: -0.02em; font-size: 14px; margin-right: 18px; white-space: nowrap; }
.monogram { width: 22px; height: 22px; border-radius: 6px; background: var(--text); color: var(--bg-panel); display: grid; place-items: center; font-size: 10.5px; font-weight: 700; letter-spacing: -0.05em; }
.nav-link { display: flex; align-items: center; gap: 7px; height: 30px; padding: 0 10px; border-radius: var(--radius-md); color: var(--text-secondary); white-space: nowrap; font-weight: var(--fw-medium); }
.nav-link svg { color: var(--text-tertiary); }
.nav-link:hover { background: var(--bg-hover); color: var(--text); }
.nav-link.is-active { background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-raise); }
.nav-link.is-active svg { color: var(--accent); }
.cmdk { display: flex; align-items: center; gap: 8px; width: 320px; height: 32px; padding: 0 8px 0 10px; margin-left: auto; border: 0; border-radius: var(--radius-lg); background: var(--bg-hover); color: var(--text-tertiary); }
.cmdk:hover { background: var(--border); }
.cmdk .kbd { margin-left: auto; background: var(--bg-panel); }
.topbar-end { display: flex; align-items: center; gap: 8px; margin-left: 10px; }

/* 버튼 */
.btn { display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 12px; border-radius: var(--radius-lg); border: 0; background: var(--bg-panel); box-shadow: var(--shadow-raise); white-space: nowrap; font-weight: var(--fw-medium); color: var(--text); }
.btn:hover { background: var(--bg-subtle); }
.btn-primary { background: var(--accent); color: var(--accent-text); box-shadow: 0 1px 2px rgba(20, 30, 80, .18), inset 0 1px 0 rgba(255, 255, 255, .12); }
.btn-primary:hover { background: var(--accent-hover); }
.btn-primary .kbd { background: rgba(255, 255, 255, .16); color: inherit; opacity: .9; }
.btn-ghost { box-shadow: none; background: transparent; color: var(--text-secondary); }
.btn-ghost:hover { background: var(--bg-hover-panel); color: var(--text); }
.btn-sm { height: 26px; padding: 0 9px; font-size: var(--fs-sm); border-radius: var(--radius-md); gap: 6px; }
.icon-btn { display: inline-grid; place-items: center; width: 30px; height: 30px; border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text-tertiary); }
.icon-btn:hover { background: var(--bg-hover-panel); color: var(--text); }
.icon-btn.is-on { color: var(--accent); }
.text-btn { border: 0; background: none; padding: 0; color: var(--text-secondary); font-size: var(--fs-sm); font-weight: var(--fw-medium); display: inline-flex; align-items: center; gap: 6px; }
.text-btn:hover { color: var(--text); }

/* 키캡 — 테두리 없는 작은 각인 */
.kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 17px; height: 17px; padding: 0 5px; border: 0; border-radius: 4px; background: var(--bg-inset); color: var(--text-tertiary); font-size: 10.5px; font-weight: var(--fw-medium); line-height: 1; letter-spacing: 0; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kbd-plain { background: none; padding: 0; min-width: 0; height: auto; }

.is-focus, :focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* 아바타 */
.avatar { width: 20px; height: 20px; border-radius: 50%; display: inline-grid; place-items: center; font-size: 10px; font-weight: var(--fw-semibold); flex: none; background: var(--av-1-bg); color: var(--av-1-fg); }
.avatar.sm { width: 18px; height: 18px; font-size: 9.5px; }
.avatar.lg { width: 26px; height: 26px; font-size: 11.5px; }
.avatar[data-c="2"] { background: var(--av-2-bg); color: var(--av-2-fg); }
.avatar[data-c="3"] { background: var(--av-3-bg); color: var(--av-3-fg); }
.avatar[data-c="4"] { background: var(--av-4-bg); color: var(--av-4-fg); }
.avatar[data-c="none"] { background: transparent; box-shadow: inset 0 0 0 1px var(--border-strong); }

/* ---------- 상태 글리프: 색 + 모양 ---------- */
[data-status="in_progress"] { --s: var(--status-progress); --s-subtle: var(--status-progress-subtle); }
[data-status="waiting"]     { --s: var(--status-waiting);  --s-subtle: var(--status-waiting-subtle); }
[data-status="on_hold"]     { --s: var(--status-hold);     --s-subtle: var(--status-hold-subtle); }
[data-status="done"]        { --s: var(--status-done);     --s-subtle: var(--status-done-subtle); }
[data-status="cancelled"]   { --s: var(--status-cancelled);--s-subtle: var(--status-cancelled-subtle); }
.sg { position: relative; display: inline-block; width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--s); flex: none; }
[data-status="in_progress"] .sg, .sg[data-status="in_progress"] { background: conic-gradient(var(--s) 0 50%, transparent 50% 100%); background-clip: padding-box; }
[data-status="waiting"] .sg, .sg[data-status="waiting"] { border-style: dashed; }
[data-status="on_hold"] .sg::after { content: ""; position: absolute; left: 1.5px; right: 1.5px; top: 50%; height: 1.5px; margin-top: -.75px; background: var(--s); }
[data-status="done"] .sg { background: var(--s); }
[data-status="done"] .sg::after { content: ""; position: absolute; left: 2.3px; top: .6px; width: 2.6px; height: 4.8px; border: solid var(--bg-panel); border-width: 0 1.3px 1.3px 0; transform: rotate(45deg); }
[data-status="cancelled"] .sg::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; width: 1.5px; margin-left: -.75px; background: var(--s); transform: rotate(45deg); }
.status { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--text-secondary); }

/* D-day */
.dday { font-size: var(--fs-sm); font-weight: var(--fw-medium); color: var(--text-tertiary); white-space: nowrap; flex: none; letter-spacing: 0; }
.dday[data-due="overdue"] { color: var(--urgent); font-weight: var(--fw-semibold); }
.dday[data-due="today"] { color: var(--warn); background: var(--warn-subtle); padding: 1px 6px; border-radius: 4px; margin-right: -6px; font-weight: var(--fw-semibold); }
.dday[data-due="soon"] { color: var(--warn); font-weight: var(--fw-semibold); }
.dday[data-due="closed"] { color: var(--text-disabled); }
.prio-high { width: 8px; height: 8px; flex: none; color: var(--urgent); }
.prio-low { width: 11px; height: 11px; flex: none; color: var(--text-tertiary); }

/* ---------- 사이드바 ---------- */
.sidebar { display: flex; flex-direction: column; min-height: 0; position: relative; }
.resize-handle { position: absolute; top: 0; bottom: 0; right: -4px; width: 8px; cursor: col-resize; }
.filters { padding: 4px 12px 10px; display: flex; flex-direction: column; gap: 8px; }
.search-field { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: var(--radius-lg); background: var(--bg-hover); color: var(--text-tertiary); }
.search-field input { border: 0; background: none; outline: none; flex: 1; min-width: 0; color: var(--text); }
.search-field input::placeholder { color: var(--text-tertiary); }
.filters .search-field .kbd, .filter-label { display: none; }
.chips { display: flex; flex-wrap: wrap; gap: 2px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 8px; border: 0; border-radius: var(--radius-md); background: transparent; font-size: var(--fs-sm); color: var(--text-tertiary); white-space: nowrap; font-weight: var(--fw-medium); }
.chip .count { font-variant-numeric: tabular-nums; color: var(--text-disabled); font-weight: var(--fw-regular); }
.chip:hover { background: var(--bg-hover); color: var(--text-secondary); }
.chip.is-on { background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-raise); }
.chip.is-on .count { color: var(--text-tertiary); }
.chip:not(.is-on) .sg { opacity: .45; }
.chip-tag { color: var(--accent-strong); background: var(--accent-subtle); padding-right: 2px; }
.filter-row { display: flex; align-items: center; gap: 2px; }
.toggle { display: inline-flex; align-items: center; gap: 7px; height: 26px; padding: 0 8px; border-radius: var(--radius-md); border: 0; background: none; font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; font-weight: var(--fw-medium); }
.toggle .kbd { display: none; }
.toggle:hover { background: var(--bg-hover); }
.toggle .check { width: 13px; height: 13px; border-radius: 4px; box-shadow: inset 0 0 0 1.5px var(--border-strong); display: grid; place-items: center; }
.toggle.is-on { color: var(--text); }
.toggle.is-on .check { background: var(--accent); box-shadow: none; color: #fff; }
.dropdown { display: inline-flex; align-items: center; gap: 4px; height: 26px; padding: 0 6px 0 8px; border-radius: var(--radius-md); border: 0; background: none; font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; font-weight: var(--fw-medium); }
.dropdown:hover { background: var(--bg-hover); color: var(--text); }
.filter-summary { display: flex; align-items: center; gap: 6px; height: 34px; margin: 2px 8px 4px; padding: 0 8px 0 10px; border: 0 !important; border-radius: var(--radius-lg); background: var(--bg-hover) !important; width: auto !important; font-size: var(--fs-sm); color: var(--text-secondary); font-weight: var(--fw-medium); }
.filter-summary .kbd { background: var(--bg-panel); }

.list-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 20px 6px; font-size: var(--fs-xs); color: var(--text-tertiary); font-weight: var(--fw-medium); letter-spacing: .01em; }
.project-list { flex: 1; min-height: 0; overflow: hidden; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 2px; position: relative; }
.list-jump { position: absolute; left: 50%; transform: translateX(-50%); bottom: 10px; display: inline-flex; align-items: center; gap: 6px; height: 26px; padding: 0 10px; border-radius: var(--radius-lg); background: var(--bg-panel); box-shadow: var(--shadow-pop); font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; border: 0; }

/* ---------- 목록 항목 ---------- */
.project-item { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 9px 12px 10px; border-radius: var(--radius-lg); color: var(--text); flex: none; }
.pi-row { display: flex; align-items: center; gap: 7px; min-width: 0; }
.pi-name { flex: 1; font-weight: var(--fw-medium); font-size: 13.5px; letter-spacing: -0.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; line-height: 19px; }
.pi-meta { font-size: var(--fs-sm); color: var(--text-secondary); line-height: 16px; gap: 10px; }
.pi-meta .sep { display: none; }
.pi-meta .pi-client { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.pi-meta .status { order: -1; gap: 0; }
.pi-meta .status .sg { margin-right: 0; }
.pi-meta .status { font-size: 0; }                  /* 목록에선 글리프만 — 모양이 라벨 역할 */
.pi-meta .status .sg { font-size: var(--fs-sm); }
.pi-tags { display: none; }
.pi-meta .pi-due { flex: none; font-variant-numeric: tabular-nums; color: var(--text); font-weight: var(--fw-medium); letter-spacing: 0; }
.pi-meta .pi-due::after { content: "·"; color: var(--text-disabled); margin-left: 7px; font-weight: var(--fw-regular); }
.project-item.is-closed .pi-due, .project-item.is-low .pi-due { color: var(--text-secondary); }
.pi-orders { display: inline-flex; align-items: center; gap: 3px; color: var(--text-tertiary); font-variant-numeric: tabular-nums; flex: none; }
.pi-orders svg { width: 13px; height: 13px; }
.pi-spacer { flex: 1; }
.pi-log { font-size: var(--fs-sm); color: var(--text-tertiary); line-height: 16px; padding-left: 0; gap: 6px; }
.pi-log .sep { display: none; }
.pi-log .pi-log-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; flex: 0 1 auto; }
.pi-log time { flex: none; margin-left: auto; color: var(--text-disabled); }
.pi-pin { width: 13px; height: 13px; color: var(--text-tertiary); flex: none; }
.pi-draft { width: 13px; height: 13px; color: var(--text-tertiary); flex: none; }
.new-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--new-dot); flex: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--new-dot) 18%, transparent); }
.pi-excluded { font-size: var(--fs-xs); color: var(--text-tertiary); background: var(--bg-inset); border-radius: 4px; padding: 0 5px; line-height: 16px; flex: none; }

.project-item:hover, .project-item.is-hover { background: var(--bg-hover); }
.project-item[data-due="overdue"] .pi-name { color: var(--text); }
.project-item[data-due="overdue"]:not(.is-open) { background: var(--urgent-tint); }
.project-item.is-open { background: var(--bg-panel); box-shadow: var(--shadow-raise); }
.project-item.is-open .pi-name { color: var(--text); }
.project-item.is-cursor { box-shadow: inset 0 0 0 1.5px var(--focus-ring); }
.project-item.is-open.is-cursor { box-shadow: inset 0 0 0 1.5px var(--focus-ring), 0 1px 2px rgba(20, 24, 31, .06); }
.project-item.is-high .pi-name { font-weight: var(--fw-semibold); }
.project-item.is-low .pi-name { color: var(--text-secondary); font-weight: var(--fw-regular); }
.project-item.is-closed .pi-name { color: var(--text-tertiary); font-weight: var(--fw-regular); }
.project-item.is-closed .pi-meta, .project-item.is-closed .pi-log { color: var(--text-disabled); }
.project-item.is-leaving { opacity: .55; }

.project-item.is-mid { padding: 8px 12px 9px; }
.project-item.is-mid .pi-log { display: none; }
.project-item.is-compact { padding: 6px 10px 6px 16px; gap: 0; border-radius: var(--radius-md); }
.project-item.is-compact::before { content: ""; position: absolute; left: 7px; top: 50%; width: 3px; height: 12px; margin-top: -6px; border-radius: 2px; background: var(--s); }
.project-item.is-compact .pi-meta, .project-item.is-compact .pi-log { display: none; }
.project-item.is-compact .pi-name { font-size: var(--fs-sm); line-height: 17px; }

/* ---------- 작업 패널: 한 장의 표면 ---------- */
.panel { background: var(--bg-panel); display: flex; flex-direction: column; min-width: 0; min-height: 0; position: relative; overflow: hidden; border-radius: var(--radius-panel); box-shadow: var(--shadow-panel); }
.panel-progress { position: absolute; top: 0; left: 0; height: 2px; background: var(--accent); z-index: 2; }
.panel-scroll { flex: 1; min-height: 0; overflow: hidden; }
.panel-inner { max-width: 760px; padding: 28px 40px 40px; }

.detail-head { display: flex; gap: 16px; align-items: flex-start; }
.detail-client { font-size: var(--fs-sm); color: var(--text-tertiary); display: flex; gap: 6px; align-items: center; margin-bottom: 6px; font-weight: var(--fw-medium); }
.detail-client .sep, .detail-client .faint { display: none; }
.detail-title { margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-semibold); letter-spacing: var(--ls-title); line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.detail-actions { display: flex; gap: 0; margin-left: auto; flex: none; margin-top: -4px; }

/* ---------- 상세 v3: 툴바 / 본문 / 속성 사이드 ---------- */
.detail-toolbar { display: flex; align-items: center; gap: 4px; height: 46px; padding: 0 12px 0 14px; border-bottom: 1px solid var(--border); flex: none; }
.crumbs { display: flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-tertiary); margin-left: 6px; min-width: 0; white-space: nowrap; }
.crumbs b { color: var(--text-secondary); font-weight: var(--fw-medium); }
.toolbar-end { margin-left: auto; display: flex; align-items: center; gap: 2px; }
.toolbar-div { width: 1px; height: 18px; background: var(--border); margin: 0 6px; }
.detail { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 296px; }
.detail-main { min-width: 0; overflow: hidden; padding: 30px 40px 32px 40px; display: flex; flex-direction: column; }
.detail-aside { min-width: 0; overflow: hidden; border-left: 1px solid var(--border); background: var(--bg-subtle); padding: 6px 0 24px; display: flex; flex-direction: column; }
.aside-sec { padding: 16px 20px 18px; border-bottom: 1px solid var(--border); }
.aside-sec:last-child { border-bottom: 0; }
.aside-title { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-tertiary); letter-spacing: .02em; margin: 0 0 10px; }
.prop { display: grid; grid-template-columns: 64px minmax(0, 1fr); align-items: center; min-height: 34px; }
.prop-label { font-size: var(--fs-sm); color: var(--text-tertiary); }
.prop-value { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; }
.prop-value .picker-trigger { margin-left: -8px; }
.date-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.date-cell { display: flex; flex-direction: column; gap: 3px; }
.date-cell small { font-size: var(--fs-xs); color: var(--text-tertiary); }
.date-cell span { font-weight: var(--fw-medium); font-variant-numeric: tabular-nums; }
.timeline-bar { position: relative; height: 6px; border-radius: 3px; background: var(--bg-inset); box-shadow: inset 0 0 0 1px var(--border); margin: 16px 0 8px; }
.timeline-bar .range-fill { border-radius: 3px; }
.timeline-bar .range-today { top: -3px; width: 12px; height: 12px; margin-left: -6px; }
.timeline-foot { display: flex; justify-content: space-between; font-size: var(--fs-xs); color: var(--text-tertiary); font-variant-numeric: tabular-nums; }
.mini-order { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border-radius: var(--radius-lg); background: var(--bg-panel); box-shadow: var(--shadow-raise); }
.mini-order + .mini-order { margin-top: 6px; }
.mini-order-top { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.mini-order-top .order-vendor { font-size: var(--fs-sm); }
.mini-order-top .amount { margin-left: auto; font-size: var(--fs-sm); }
.mini-order .steps .step-line { width: 12px; margin: 0 5px; }
.meta-line { display: flex; align-items: center; gap: 8px; font-size: var(--fs-sm); color: var(--text-secondary); min-height: 26px; }
.meta-line .faint { margin-left: auto; }

.title-block { display: flex; flex-direction: column; gap: 0; }
.desc-block { margin-top: 26px; padding: 16px 18px 14px; border-radius: var(--radius-lg); background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--border); }
.desc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.desc-head .section-label { margin: 0; }
.work-area { margin-top: 28px; display: flex; flex-direction: column; min-height: 0; }
.log.has-rail { position: relative; }
.log.has-rail::before { content: ""; position: absolute; left: 12.5px; top: 20px; bottom: 16px; width: 1px; background: var(--border); }
.log.has-rail .avatar, .log.has-rail .dot { position: relative; z-index: 1; box-shadow: 0 0 0 3px var(--bg-panel); }
.log.has-rail .dot { box-shadow: inset 0 0 0 1.5px var(--border-strong), 0 0 0 3px var(--bg-panel); }
.log-note .prose { color: var(--text); }
.log-day { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; padding: 14px 0 2px; font-size: var(--fs-xs); font-weight: var(--fw-semibold); color: var(--text-tertiary); }

/* ---------- 상세 v4: 왼쪽 작업 로그(세로 전체) / 오른쪽 프로젝트 정보 ---------- */
.detail.is-split { grid-template-columns: minmax(0, 1fr) 360px; }
.log-col { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.log-col-head { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 32px; flex: none; }
.log-col-head h2 { margin: 0; font-size: 15px; font-weight: var(--fw-semibold); letter-spacing: -0.01em; display: flex; align-items: baseline; gap: 8px; }
.log-col-head h2 .count { font-size: var(--fs-sm); color: var(--text-tertiary); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }
.log-col-head .seg-tabs { margin-left: auto; }
.log-scroll { flex: 1; min-height: 0; overflow: hidden; padding: 0 32px 24px; position: relative; }
.log-scroll::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 40px; background: linear-gradient(to bottom, transparent, var(--bg-panel)); pointer-events: none; }

.info-col { min-width: 0; overflow: hidden; border-left: 1px solid var(--border); background: var(--bg-subtle); display: flex; flex-direction: column; position: relative; }
.info-col::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 36px; background: linear-gradient(to bottom, transparent, var(--bg-subtle)); pointer-events: none; }
.info-head { padding: 20px 20px 16px; border-bottom: 1px solid var(--border); }
.info-title { margin: 0; font-size: 19px; font-weight: var(--fw-semibold); letter-spacing: -0.02em; line-height: 1.32; }
.segment.is-fill { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); width: 100%; margin-top: 14px; }
.segment.is-fill .segment-btn { justify-content: center; padding: 0 4px; gap: 5px; font-size: var(--fs-sm); height: 30px; }
.segment.is-fill .segment-btn .kbd { font-size: 10px; }

.todo-progress { display: inline-flex; align-items: center; gap: 8px; color: var(--text-secondary); font-weight: var(--fw-medium); letter-spacing: 0; font-variant-numeric: tabular-nums; }
.todo-progress .bar { width: 48px; height: 4px; border-radius: 2px; background: var(--bg-inset); box-shadow: inset 0 0 0 1px var(--border); position: relative; overflow: hidden; }
.todo-progress .bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 2px; }
.todo-list { display: flex; flex-direction: column; gap: 1px; }
.todo-item { display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; column-gap: 10px; align-items: start; padding: 6px 8px; margin: 0 -8px; border-radius: var(--radius-md); font-size: var(--fs-base); line-height: 1.45; }
.todo-item:hover, .todo-item.is-hover { background: var(--bg-hover-panel); }
.todo-item.is-cursor { box-shadow: inset 0 0 0 1.5px var(--focus-ring); background: var(--bg-panel); }
.todo-check { width: 16px; height: 16px; margin-top: 1.5px; border-radius: 5px; border: 0; padding: 0; background: var(--bg-panel); box-shadow: inset 0 0 0 1.5px var(--border-strong); display: grid; place-items: center; color: #fff; }
.todo-item.is-done .todo-check { background: var(--accent); box-shadow: none; }
.todo-item.is-done .todo-text { color: var(--text-tertiary); text-decoration: line-through; text-decoration-color: var(--text-disabled); }
.todo-meta { display: flex; align-items: center; gap: 6px; font-size: var(--fs-xs); color: var(--text-tertiary); white-space: nowrap; padding-top: 1px; font-variant-numeric: tabular-nums; }
.todo-meta .dday { font-size: var(--fs-xs); }
.todo-fold { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 8px; margin: 2px -8px 0; border: 0; background: none; border-radius: var(--radius-md); font-size: var(--fs-sm); color: var(--text-tertiary); width: calc(100% + 16px); text-align: left; }
.todo-fold:hover { background: var(--bg-hover-panel); color: var(--text-secondary); }
.todo-add { display: flex; align-items: center; gap: 10px; height: 32px; padding: 0 8px; margin: 2px -8px 0; border-radius: var(--radius-md); color: var(--text-tertiary); font-size: var(--fs-base); }
.todo-add:hover { background: var(--bg-hover-panel); }
.todo-add .kbd { margin-left: auto; }
.info-col .prose { font-size: var(--fs-base); color: var(--text-secondary); }

/* 상태 세그먼트 */
.segment { display: inline-flex; padding: 3px; gap: 2px; border-radius: 9px; background: var(--bg-inset); }
.segment-btn { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 11px 0 10px; border: 0; border-radius: 7px; background: transparent; color: var(--text-tertiary); white-space: nowrap; font-weight: var(--fw-medium); }
.segment-btn:hover { color: var(--text); }
.segment-btn .sg { opacity: .55; }
.segment-btn .kbd { background: none; padding: 0; min-width: 0; color: var(--text-disabled); font-size: 11px; margin-left: 1px; }
.segment-btn.is-current { background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-raise); }
.segment-btn.is-current .sg { opacity: 1; }
.segment-btn.is-current .kbd { color: var(--text-tertiary); }

/* 속성 */
.meta-grid { display: grid; grid-template-columns: 76px minmax(0, 1fr); row-gap: 2px; column-gap: 12px; align-items: center; font-size: var(--fs-base); }
.meta-label { color: var(--text-tertiary); font-size: var(--fs-sm); line-height: 32px; }
.meta-value { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-width: 0; min-height: 32px; }
.picker-trigger { display: inline-flex; align-items: center; gap: 7px; height: 28px; padding: 0 8px; margin-left: -8px; border: 0; border-radius: var(--radius-md); background: none; white-space: nowrap; font-weight: var(--fw-medium); }
.picker-trigger:hover { background: var(--bg-hover-panel); }
.picker-trigger .kbd { display: none; }
.picker-trigger:hover .kbd, .picker-trigger.is-focus .kbd { display: inline-flex; }
.tag { display: inline-flex; align-items: center; height: 22px; padding: 0 8px; border-radius: 11px; background: var(--bg-inset); font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; font-weight: var(--fw-medium); }

.schedule { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.schedule-dates { white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
.schedule-dates .sep { margin: 0 4px; }
.range-bar { position: relative; flex: 1; min-width: 100px; max-width: 200px; height: 4px; border-radius: 2px; background: var(--bg-inset); }
.range-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 2px; background: var(--accent); opacity: .85; }
.range-today { position: absolute; top: -3px; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: var(--bg-panel); box-shadow: 0 0 0 2px var(--accent); }
.range-note { font-size: var(--fs-sm); color: var(--text-tertiary); white-space: nowrap; font-variant-numeric: tabular-nums; }

.section-label { font-size: var(--fs-sm); color: var(--text-tertiary); font-weight: var(--fw-medium); margin-bottom: 8px; }
.prose { line-height: var(--lh-base); color: var(--text); white-space: pre-line; }
.prose a { color: var(--accent-strong); text-decoration: none; background: var(--accent-subtle); padding: 0 3px; border-radius: 3px; }
.fade-more { position: relative; max-height: calc(13px * 1.62 * 4); overflow: hidden; }
.fade-more::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 32px; background: linear-gradient(to bottom, transparent, var(--bg-panel)); }
.divider { height: 1px; background: var(--border); border: 0; margin: 0; }

/* 탭 */
.tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); }
.tab { display: inline-flex; align-items: center; gap: 7px; height: 40px; padding: 0; border: 0; background: none; color: var(--text-tertiary); font-weight: var(--fw-medium); position: relative; white-space: nowrap; }
.tab .count { color: var(--text-disabled); font-variant-numeric: tabular-nums; font-weight: var(--fw-regular); }
.tab .kbd { display: none; }
.tab:hover { color: var(--text-secondary); }
.tab.is-current { color: var(--text); }
.tab.is-current .count { color: var(--text-tertiary); }
.tab.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--text); border-radius: 1px; }

/* 로그 입력 */
.composer { border: 0; border-radius: var(--radius-lg); background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--border); padding: 10px 12px 8px 14px; }
.composer textarea { display: block; width: 100%; border: 0; resize: none; outline: none; background: none; line-height: var(--lh-base); min-height: 21px; }
.composer textarea::placeholder { color: var(--text-tertiary); }
.composer-foot { display: flex; align-items: center; justify-content: flex-end; gap: 8px; font-size: var(--fs-xs); color: var(--text-tertiary); margin-top: 2px; }
.composer-foot .sep { display: none; }
.composer-foot .hint:has(.kbd:only-child) { }
.composer-foot .hint:first-child:not(:last-child):has(+ .sep) { display: none; }
.composer.is-focus { outline: none; background: var(--bg-panel); box-shadow: inset 0 0 0 1.5px var(--focus-ring), 0 0 0 4px var(--accent-subtle); }

/* 로그 */
.log { display: flex; flex-direction: column; }
.log-note { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; padding: 14px 0 12px; }
.log-head { display: flex; align-items: baseline; gap: 8px; margin-bottom: 2px; }
.log-author { font-weight: var(--fw-semibold); }
.log-time, .log-edited { font-size: var(--fs-sm); color: var(--text-tertiary); }
.log-tools { margin-left: auto; display: flex; gap: 0; opacity: 0; }
.log-note:hover .log-tools, .log-note.is-hover .log-tools { opacity: 1; }
.log-event { display: grid; grid-template-columns: 26px minmax(0, 1fr); column-gap: 12px; align-items: center; padding: 4px 0; font-size: var(--fs-sm); color: var(--text-tertiary); position: relative; }
.log-event .dot { justify-self: center; width: 6px; height: 6px; border-radius: 50%; background: var(--bg-panel); box-shadow: inset 0 0 0 1.5px var(--border-strong); }
.log-event b { font-weight: var(--fw-medium); color: var(--text-secondary); }
.log-event .arrow { color: var(--text-disabled); margin: 0 4px; }

/* 상태줄 — 핵심 키 다섯 개까지 */
.statusbar { display: flex; align-items: center; gap: 16px; padding: 0 16px; font-size: var(--fs-xs); color: var(--text-tertiary); white-space: nowrap; overflow: hidden; }
.statusbar > .hint:nth-of-type(n+6):not(.statusbar-end) { display: none; }
.hint { display: inline-flex; align-items: center; gap: 5px; }
.hint .kbd { height: 16px; min-width: 16px; font-size: 10px; background: var(--bg-hover); }
.statusbar-end { margin-left: auto; display: flex; gap: 16px; align-items: center; color: var(--text-disabled); }
.leader { display: inline-flex; align-items: center; gap: 5px; height: 18px; padding: 0 6px; border-radius: 4px; background: var(--accent); color: var(--accent-text); font-weight: var(--fw-semibold); }

/* 요약 숫자 */
.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.stat { padding: 14px 16px 14px; display: flex; flex-direction: column; gap: 4px; border: 0; background: var(--bg-subtle); border-radius: var(--radius-lg); text-align: left; box-shadow: inset 0 0 0 1px var(--border); }
.stat:hover { background: var(--bg-hover-panel); }
.stat + .stat { padding-left: 16px; border-left: 0; }
.stat-num { font-size: 28px; font-weight: var(--fw-semibold); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; line-height: 1.15; }
.stat-label { font-size: var(--fs-sm); color: var(--text-secondary); display: flex; gap: 6px; align-items: center; font-weight: var(--fw-medium); }
.stat[data-due="overdue"] .stat-num { color: var(--urgent); }
.stat[data-due="today"] .stat-num { color: var(--warn); }

/* 표 */
.table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: var(--fs-base); }
.table th { position: sticky; top: 0; background: var(--bg-panel); text-align: left; font-weight: var(--fw-medium); font-size: var(--fs-sm); color: var(--text-tertiary); padding: 0 10px; height: 34px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.table td { padding: 0 10px; height: 46px; border-bottom: 1px solid var(--border); white-space: nowrap; vertical-align: middle; }
.table .r { text-align: right; }
.table td.r { font-variant-numeric: tabular-nums; font-weight: var(--fw-medium); }
.table tr.is-cursor td { background: var(--accent-subtle); border-bottom-color: transparent; }
.table tr.is-cursor td:first-child { border-radius: 8px 0 0 8px; box-shadow: inset 2px 0 0 var(--focus-ring); }
.table tr.is-cursor td:last-child { border-radius: 0 8px 8px 0; }
.table tbody tr:hover td { background: var(--bg-subtle); }
.table tfoot td { font-weight: var(--fw-semibold); border-bottom: 0; height: 46px; }
.cell-sub { display: block; font-size: var(--fs-sm); color: var(--text-tertiary); margin-top: 1px; }

/* 발주 3단계 */
.steps { display: inline-flex; align-items: center; font-size: var(--fs-sm); color: var(--text-tertiary); white-space: nowrap; font-variant-numeric: tabular-nums; }
.step { display: inline-flex; align-items: center; gap: 6px; }
.step-dot { width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--border-strong); background: var(--bg-panel); flex: none; }
.step.is-done { color: var(--text-secondary); }
.step.is-done .step-dot { background: var(--accent); box-shadow: none; }
.step.is-next .step-dot { box-shadow: inset 0 0 0 1.5px var(--accent); }
.step-line { width: 20px; height: 1.5px; background: var(--border-strong); margin: 0 8px; border-radius: 1px; }
.step-line.is-done { background: var(--accent); }
.stage { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-sm); color: var(--text-secondary); white-space: nowrap; }

.order-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-sm); color: var(--text-secondary); font-variant-numeric: tabular-nums; }
.order-summary b { color: var(--text); font-weight: var(--fw-semibold); }
.order-list { display: flex; flex-direction: column; gap: 6px; }
.order-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 16px; row-gap: 10px; padding: 12px 14px; border-radius: var(--radius-lg); background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--border); position: relative; }
.order-item.is-cursor { background: var(--bg-panel); box-shadow: inset 0 0 0 1.5px var(--focus-ring); }
.order-title { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.order-vendor { font-weight: var(--fw-semibold); white-space: nowrap; }
.order-content { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--text-secondary); }
.amount { font-weight: var(--fw-semibold); text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.order-foot { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.order-foot .btn { margin-left: auto; }

.seg-tabs { display: inline-flex; gap: 2px; padding: 3px; border-radius: 9px; background: var(--bg-inset); }
.seg-tab { height: 26px; padding: 0 11px; border: 0; border-radius: 7px; background: none; font-size: var(--fs-sm); color: var(--text-tertiary); font-weight: var(--fw-medium); display: inline-flex; gap: 6px; align-items: center; white-space: nowrap; }
.seg-tab .count { color: var(--text-disabled); font-variant-numeric: tabular-nums; }
.seg-tab.is-current { background: var(--bg-panel); color: var(--text); box-shadow: var(--shadow-raise); }
.seg-tab.is-current .count { color: var(--text-tertiary); }

/* 오버레이 */
.scrim { position: absolute; inset: 0; background: var(--scrim); }
.palette { position: absolute; left: 50%; top: 96px; width: 600px; transform: translateX(-50%); background: var(--bg-panel); border-radius: 12px; box-shadow: var(--shadow-modal); overflow: hidden; }
.palette-input { display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 18px; border-bottom: 1px solid var(--border); font-size: var(--fs-md); }
.caret { display: inline-block; width: 1.5px; height: 18px; background: var(--accent); vertical-align: middle; margin-left: 1px; }
.palette-body { padding: 6px 8px 10px; }
.palette-section { padding: 12px 10px 6px; font-size: var(--fs-xs); color: var(--text-tertiary); font-weight: var(--fw-medium); }
.palette-row { display: flex; align-items: center; gap: 12px; height: 38px; padding: 0 10px; border-radius: var(--radius-lg); color: var(--text); }
.palette-row .icon-slot { width: 16px; display: grid; place-items: center; color: var(--text-tertiary); flex: none; }
.palette-row .row-sub { color: var(--text-tertiary); font-size: var(--fs-sm); }
.palette-row .row-end { margin-left: auto; display: flex; align-items: center; gap: 4px; flex: none; }
.palette-row.is-selected { background: var(--accent-subtle); }
.palette-row.is-selected .icon-slot { color: var(--accent); }
mark { background: none; color: var(--accent-strong); font-weight: var(--fw-semibold); }
.palette-foot { display: flex; gap: 16px; padding: 0 18px; height: 36px; align-items: center; border-top: 1px solid var(--border); background: var(--bg-subtle); font-size: var(--fs-xs); color: var(--text-tertiary); }

.toast { display: inline-flex; align-items: center; gap: 14px; height: 40px; padding: 0 8px 0 16px; border-radius: 10px; background: #1E2127; color: #F1F2F4; box-shadow: var(--shadow-pop); font-size: var(--fs-base); position: relative; overflow: hidden; white-space: nowrap; }
[data-theme="dark"] .toast { background: #2B2F36; }
.toast .text-btn { color: #AFC2FA; font-weight: var(--fw-semibold); }
.toast .kbd { background: rgba(255, 255, 255, .1); color: rgba(255, 255, 255, .6); }
.toast-timer { position: absolute; left: 0; bottom: 0; height: 2px; background: rgba(175, 194, 250, .6); }