/* ── Chips Design System ── */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700&family=DM+Mono:wght@400;500&display=swap');

:root {
  --bg:#0f0f13;--surface:#1a1a22;--surface2:#22222e;--surface3:#2a2a38;
  --border:#2e2e3e;--border2:#3a3a52;
  --accent:#7c6af7;--accent2:#f76a8a;--accent3:#f7a76a;
  --text:#e8e8f0;--text-muted:#7070a0;--text-dim:#4a4a6a;
  --green:#4ade80;--yellow:#fbbf24;--red:#f87171;
  --blue:#60a5fa;--purple:#a78bfa;--pink:#f472b6;--teal:#2dd4bf;
  --admin-grad:linear-gradient(135deg,#7c6af7,#f76a8a);
  --row-hover:rgba(124,106,247,.04);
  --row-border:rgba(46,46,62,.5);
  --row-border2:rgba(46,46,62,.35);
  --weekend-bg:rgba(251,191,36,.08);
  --weekend-solid:#1e1c14;
  --today-bg:rgba(247,106,138,.10);
  --today-hd-bg:rgba(247,106,138,.18);
  --today-pos-bg:rgba(124,106,247,.12);
  --today-solid:#14121e;
  --today-accent:#f76a8a;
  --count-bg:var(--surface);
  --input-bg:var(--surface2);
  --ana-bar-track:#2a2a3e;--ana-chart-text:#9ca3af;--attend-label-color:#ffffff;
}

body.light {
  --bg:#ffffff;--surface:#ffffff;--surface2:#f0f0f8;--surface3:#e4e4ee;
  --border:#d0d0e4;--border2:#bebede;
  --text:#18182e;--text-muted:#5050a0;--text-dim:#9090c0;
  --row-hover:rgba(124,106,247,.06);
  --row-border:rgba(180,180,210,.7);
  --row-border2:rgba(180,180,210,.5);
  --weekend-bg:rgba(251,191,36,.12);
  --weekend-solid:#fffbe6;
  --today-bg:rgba(247,106,138,.12);
  --today-hd-bg:rgba(247,106,138,.20);
  --today-pos-bg:rgba(124,106,247,.14);
  --today-solid:#f0effe;
  --today-accent:#e8457a;
  --count-bg:#f0f0f8;
  --input-bg:#ffffff;
  --ana-bar-track:#e4e4ee;--ana-chart-text:#8888b0;--attend-label-color:#18182e;
}

* { box-sizing:border-box; margin:0; padding:0 }
[hidden] { display:none !important }
body { font-family:'Noto Sans KR',sans-serif; background:var(--bg); color:var(--text); min-height:100vh; overflow-x:clip; transition:background .2s,color .2s }

/* HEADER */
.header { background:var(--surface); border-bottom:1px solid var(--border); padding:12px 16px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:100; height:46px; box-sizing:border-box }
.header-left { display:flex; align-items:center; gap:10px }
.header-right { display:flex; align-items:center; gap:6px }
.header-title { font-size:15px; font-weight:700; letter-spacing:.04em; color:var(--accent) }
.mode-badge { font-size:10px; font-weight:600; padding:3px 10px; border-radius:20px; font-family:'DM Mono',monospace; background:var(--admin-grad); color:#fff }
.hdr-btn { width:32px; height:32px; border-radius:9px; border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; text-decoration:none }
.hdr-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent) }

/* MONTH NAV */
.month-nav { display:flex; align-items:center; justify-content:center; gap:14px; padding:14px 16px; background:var(--surface); border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none }
.month-nav::-webkit-scrollbar { display:none }
.nav-btn { width:34px; height:34px; border-radius:10px; border:1px solid var(--border); background:var(--surface2); color:var(--text); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s }
.nav-btn:hover { background:var(--accent); border-color:var(--accent) }
.today-btn { height:28px; border-radius:14px; border:1px solid var(--today-accent); background:transparent; color:var(--today-accent); font-size:11px; font-weight:700; cursor:pointer; padding:0 10px; font-family:'Noto Sans KR',sans-serif; transition:all .15s; white-space:nowrap }
.today-btn:hover { background:var(--today-accent); color:#fff }
.month-label { font-family:'DM Mono',monospace; font-size:19px; font-weight:500; min-width:128px; text-align:center }

/* MEMO BAR */
.memo-bar { padding:9px 14px; background:var(--surface); border-bottom:1px solid var(--border); display:flex; gap:8px; align-items:center }
.memo-lbl { font-size:10px; color:var(--text-muted); white-space:nowrap; font-family:'DM Mono',monospace }
.memo-input { flex:1; background:var(--input-bg); border:1px solid var(--border); border-radius:8px; padding:5px 9px; color:var(--text); font-size:12px; font-family:'Noto Sans KR',sans-serif; outline:none; transition:border-color .2s }
.memo-input:focus { border-color:var(--accent) }
.memo-input:disabled { color:var(--text-muted); font-weight:400; -webkit-text-fill-color:var(--text-muted); opacity:1 }

/* STATS */
.stats-bar { display:flex; padding:9px 14px; background:var(--surface2); border-bottom:1px solid var(--border); overflow-x:auto; scrollbar-width:none; gap:5px }
.stats-bar::-webkit-scrollbar { display:none }
.stat-chip { display:flex; align-items:center; gap:4px; padding:4px 10px; border-radius:20px; font-size:10px; white-space:nowrap; font-family:'DM Mono',monospace }
.stat-dot { width:6px; height:6px; border-radius:50% }

/* LEGEND */
.legend { padding:9px 14px; display:flex; gap:0; border-bottom:1px solid var(--border); background:var(--bg) }
.legend-item { display:flex; align-items:center; justify-content:center; gap:4px; font-size:10px; color:var(--text-muted); flex:1 }
.legend-dot { width:9px; height:9px; border-radius:3px; flex-shrink:0 }

/* TABLE */
.table-wrap { overflow-x:auto; padding:10px 6px; -webkit-overflow-scrolling:touch; background:var(--bg) }
table { border-collapse:separate; border-spacing:0; min-width:580px; width:100%; background:var(--bg) }
th { font-size:9px; font-weight:500; color:var(--text-muted); text-align:center; padding:4px 3px 2px; border-bottom:1px solid var(--border); font-family:'DM Mono',monospace; background:var(--bg); position:sticky; top:0; z-index:10; white-space:nowrap; cursor:pointer; transition:background .12s }
th.name-col { text-align:left; padding-left:6px; padding-right:1px; min-width:72px; width:72px; cursor:default; position:-webkit-sticky; position:sticky; left:0; z-index:20; background:var(--bg) !important; border-right:2px solid var(--border) }
th.name-col:hover { background:var(--bg) }
th:not(.name-col):hover { background:var(--surface2) }
tr:hover td { background:var(--row-hover) }
td { border-bottom:1px solid var(--row-border); padding:3px 2px; text-align:center; vertical-align:middle; transition:background .15s; background:var(--bg) }
td.name-cell { text-align:left; padding-left:6px; padding-right:1px; font-size:12px; font-weight:500; white-space:nowrap; position:-webkit-sticky; position:sticky; left:0; z-index:20; background:var(--bg) !important; min-width:72px; width:72px; border-right:2px solid var(--border) }
tr:hover td.name-cell { background:var(--bg) }
.dayoff-col { position:-webkit-sticky; position:sticky; left:72px; z-index:19; min-width:40px; width:40px; background:var(--bg) !important; border-right:2px solid var(--border); text-align:center; white-space:nowrap }
th.dayoff-col { background:var(--bg) !important; font-size:8px; font-weight:600; color:var(--text-muted) }
.dayoff-cell { padding:1px 2px }
.dayoff-btn { width:34px; height:22px; border-radius:5px; border:1px dashed var(--border2); background:var(--input-bg); color:var(--text-dim); font-size:9px; font-weight:600; cursor:pointer; font-family:'Noto Sans KR',sans-serif; transition:all .14s; padding:0 2px }
.dayoff-btn.filled { border-style:solid; border-color:var(--accent); color:var(--accent); background:rgba(124,106,247,.1); font-weight:700 }
.dayoff-btn:hover { border-color:var(--accent); color:var(--accent) }
.count-cell.dayoff-col { background:var(--count-bg) !important }
.dayoff-opt.active { border:2px solid var(--accent); background:rgba(124,106,247,.15) }
.shift-btn { min-width:36px; height:24px; border-radius:6px; border:none; font-size:10px; font-weight:700; cursor:pointer; transition:all .12s; display:flex; align-items:center; justify-content:center; margin:0 auto; font-family:'Noto Sans KR',sans-serif; padding:0 3px; white-space:nowrap }
.shift-btn:hover { filter:brightness(1.15); transform:scale(1.08) }
.shift-btn:active { transform:scale(.95) }
.weekend { background:var(--weekend-bg) }
body.light .shift-btn { filter:saturate(1.2) }

/* DAY HEADER */
.th-inner { display:flex; flex-direction:column; align-items:center; gap:1px; padding:2px 0 }
.th-day { font-size:9px; font-weight:600; line-height:1 }
.th-dow { font-size:7px; opacity:.6; line-height:1 }
.th-dots { display:flex; gap:2px; justify-content:center; min-height:5px; margin-top:1px }
.th-dot { width:6px; height:6px; border-radius:50%; flex-shrink:0; background:#39ff14; box-shadow:0 0 4px #39ff14 }
.th-holi { font-size:6px; color:#f87171; line-height:1; max-width:28px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; opacity:.9 }

.main-content { padding-bottom:20px }

/* DAILY COUNT ROW */
.count-row td { border-bottom:none; border-top:2px solid var(--border2); padding:4px 2px; background:var(--count-bg) !important }
.count-row td.name-cell { background:var(--count-bg) !important; font-size:10px; color:var(--text-muted); font-family:'DM Mono',monospace; letter-spacing:.04em; z-index:6 }
.count-cell { text-align:center; vertical-align:middle; padding:2px 2px }
.count-cell .cnt-work, .count-cell .cnt-off { display:block; line-height:1.3 }
.cnt-work { font-size:12px; font-weight:800; color:#7c6af7; font-family:'DM Mono',monospace; line-height:1.4 }
.cnt-off { font-size:12px; font-weight:800; color:#f87171; font-family:'DM Mono',monospace; line-height:1.4 }

/* PAGE TABS */
.page-tabs { display:flex; background:var(--surface); border-bottom:2px solid var(--border); padding:0 4px; gap:0; position:sticky; top:46px; z-index:99; overflow-x:auto; scrollbar-width:none; height:42px; box-sizing:border-box }
.page-tabs::-webkit-scrollbar { display:none }
.page-tab { padding:9px 8px; font-size:10px; font-weight:700; cursor:pointer; border:none; background:transparent; color:var(--text-muted); border-bottom:3px solid transparent; margin-bottom:-2px; transition:all .15s; font-family:'Noto Sans KR',sans-serif; white-space:nowrap; letter-spacing:0; flex:1; text-align:center }
.page-tab.active { color:var(--accent); border-bottom-color:var(--accent) }
.page-tab:hover:not(.active) { color:var(--text); background:var(--surface2) }
.schedule-view { display:block }
.status-view { padding-bottom:60px }

/* STATUS NAV */
.status-nav { display:flex; align-items:center; justify-content:center; gap:14px; padding:13px 16px; background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:88px; z-index:90 }
.status-month-label { font-family:'DM Mono',monospace; font-size:18px; font-weight:600; min-width:110px; text-align:center }

/* POSITION BOARD */
.pos-board { overflow-x:auto; padding:10px 4px; -webkit-overflow-scrolling:touch }
.pos-table { border-collapse:separate; border-spacing:0; min-width:400px; width:100% }
.pos-table th.date-col { min-width:62px; width:62px; position:-webkit-sticky; position:sticky; left:0; z-index:20; background:var(--surface) !important; text-align:center; padding:5px 3px; font-size:9px; font-weight:600; color:var(--text-muted); border-bottom:2px solid var(--border); font-family:'DM Mono',monospace; white-space:nowrap; border-right:3px solid var(--border) }
.pos-table td.date-cell { position:-webkit-sticky; position:sticky; left:0; z-index:20; background:var(--bg) !important; border-bottom:1px solid var(--row-border2); padding:2px 4px; min-width:62px; white-space:nowrap; border-right:3px solid var(--border) }
.date-cell.weekend-row { background:var(--weekend-solid) !important }
.date-cell.today-row { background:var(--today-solid) !important }
.pos-leader-freeze { position:-webkit-sticky; position:sticky; left:62px; z-index:19; background:var(--bg) !important; border-right:3px solid var(--border); -webkit-transform:translateZ(0); transform:translateZ(0) }
.pos-leader-freeze + td,
.pos-leader-freeze + th { border-left:none !important }
.pos-table thead .pos-leader-freeze { z-index:21; background:var(--surface) !important }
.pos-table tr.today-row td.pos-leader-freeze { background:var(--today-solid) !important }
.pos-table tr.weekend-row td.pos-leader-freeze { background:var(--weekend-solid) !important }
.date-inner { display:flex; flex-direction:row; align-items:center; justify-content:center; gap:4px }
.date-info { display:flex; flex-direction:column; align-items:center; gap:0 }
.pub-chk { width:16px; height:16px; cursor:pointer; accent-color:#7c6af7; flex-shrink:0 }
.pub-chk-all { display:block; margin:0 auto 3px }
.date-col-label { display:block; text-align:center }
.date-d { font-size:11px; font-weight:700; font-family:'DM Mono',monospace; line-height:1.2 }
.date-w { font-size:8px; opacity:.6; line-height:1 }

/* Position group headers */
.pos-table th.grp-th:not(.pos-leader-freeze) { text-align:center; padding:4px 3px; font-size:9px; font-weight:700; border-bottom:2px solid var(--border); white-space:nowrap; font-family:'Noto Sans KR',sans-serif; background:var(--surface) }
.pos-table th.grp-th.pos-leader-freeze { text-align:center; padding:4px 3px; font-size:9px; font-weight:700; border-bottom:2px solid var(--border); white-space:nowrap; font-family:'Noto Sans KR',sans-serif }
.pos-table th.pos-th:not(.pos-leader-freeze) { text-align:center; padding:3px 2px; font-size:8px; font-weight:600; border-bottom:1px solid var(--border); white-space:nowrap; font-family:'DM Mono',monospace; color:var(--text-muted); min-width:44px; background:var(--surface) }
.pos-table th.pos-th.pos-leader-freeze { text-align:center; padding:3px 2px; font-size:8px; font-weight:600; border-bottom:1px solid var(--border); white-space:nowrap; font-family:'DM Mono',monospace; color:var(--text-muted); min-width:44px }
.pos-table td.assign-cell:not(.pos-leader-freeze) { background:var(--bg) }

/* Assignment cell */
.pos-table td.assign-cell { padding:2px 2px; text-align:center; vertical-align:middle; border-bottom:1px solid var(--row-border2); border-right:1px solid var(--row-border2) }
.pos-table tr.weekend-row td.assign-cell { background:var(--weekend-bg) !important }
.assign-cell.weekend-row { background:var(--weekend-bg) !important }
.assign-cell.today-row { background:var(--today-pos-bg) !important }

/* Assign button */
.assign-btn { width:42px; min-height:24px; border-radius:6px; border:1px dashed var(--border2); background:var(--input-bg); color:var(--text-dim); font-size:9px; cursor:pointer; padding:2px 2px; transition:all .14s; font-family:'Noto Sans KR',sans-serif; line-height:1.2; display:flex; align-items:center; justify-content:center; margin:0 auto; word-break:keep-all; text-align:center }
.assign-btn:hover { border-color:var(--accent); color:var(--accent); background:rgba(124,106,247,.08) }
.assign-btn.filled { border-style:solid; border-color:transparent; font-size:9px; font-weight:700; color:#fff }

/* Group border colors */
.col-head { border-left:3px solid #f7a76a !important }
.col-bank1 { border-left:3px solid #60a5fa !important }
.col-bank2 { border-left:3px solid #4ade80 !important }
.col-bank3 { border-left:3px solid #f472b6 !important }
.grp-head-th { border-left:3px solid #f7a76a !important; color:#f7a76a !important }
.grp-bank1-th { border-left:3px solid #60a5fa !important; color:#60a5fa !important }
.grp-bank2-th { border-left:3px solid #4ade80 !important; color:#4ade80 !important }
.grp-bank3-th { border-left:3px solid #f472b6 !important; color:#f472b6 !important }

/* Today row highlight */
.pos-table tr.today-row td { background:rgba(124,106,247,.18) !important }
.pos-table tr.today-row td.date-cell { background:var(--today-solid) !important; border-left:3px solid var(--today-accent) !important }
.pos-table tr.today-row td.date-cell .date-d { color:var(--today-accent); font-weight:800 }
.pos-table tr.today-row td.date-cell .date-w { color:var(--today-accent); opacity:1 }
/* Weekend row highlight */
.pos-table tr.weekend-row td { background:var(--weekend-bg) !important }
.pos-table tr.weekend-row td.date-cell { background:var(--weekend-solid) !important }
.pos-table tr.weekend-row td.assign-cell.pos-leader-freeze { background:var(--weekend-solid) !important }

/* Staff picker popup */
.picker-ov { display:flex; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:400; align-items:flex-end; justify-content:center }
.picker-box { background:var(--surface); border-radius:20px 20px 0 0; border-top:1px solid var(--border); padding:18px 16px 32px; width:100%; max-width:480px; animation:slideUp .22s ease }
.picker-handle { width:34px; height:4px; background:var(--border); border-radius:2px; margin:0 auto 14px }
.picker-title { font-size:13px; font-weight:600; text-align:center; margin-bottom:14px; color:var(--text) }
.picker-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin-bottom:12px; max-height:260px; overflow-y:auto }
.picker-item { padding:10px 6px; border-radius:10px; border:2px solid var(--border); background:var(--surface2); cursor:pointer; text-align:center; font-size:12px; font-weight:600; transition:all .14s; font-family:'Noto Sans KR',sans-serif }
.picker-item:hover { border-color:var(--accent); background:rgba(124,106,247,.1) }
.picker-item.current { border-color:var(--accent); background:rgba(124,106,247,.15); color:var(--accent) }
.picker-clear { width:100%; padding:11px; border-radius:11px; border:1px solid rgba(248,113,113,.3); background:rgba(248,113,113,.08); color:var(--red); font-size:12px; cursor:pointer; font-family:'Noto Sans KR',sans-serif; margin-bottom:8px }
.picker-close { width:100%; padding:11px; border-radius:11px; border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); font-size:12px; cursor:pointer; font-family:'Noto Sans KR',sans-serif }

/* Settings Panel */
.panel { display:block; position:fixed; inset:0; background:var(--bg); z-index:500; overflow-y:auto; padding-bottom:40px; animation:slideUp .22s ease }
@keyframes slideUp { from{transform:translateY(20px);opacity:0} to{transform:translateY(0);opacity:1} }
.panel-hdr { background:var(--surface); border-bottom:1px solid var(--border); padding:14px 16px; display:flex; align-items:center; justify-content:space-between; position:sticky; top:0; z-index:10 }
.panel-title { font-size:14px; font-weight:700 }
.panel-close { width:32px; height:32px; border-radius:9px; border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s }
.panel-close:hover { background:var(--red); color:#fff; border-color:var(--red) }
.panel-tabs { display:flex; border-bottom:1px solid var(--border); background:var(--surface); padding:0 14px; overflow-x:auto; scrollbar-width:none }
.panel-tabs::-webkit-scrollbar { display:none }
.ptab { padding:11px 14px; font-size:12px; font-weight:600; cursor:pointer; border:none; background:transparent; color:var(--text-muted); border-bottom:2px solid transparent; transition:all .15s; font-family:'Noto Sans KR',sans-serif; white-space:nowrap }
.ptab.active { color:var(--accent); border-bottom-color:var(--accent) }
.panel-body { padding:16px }
.sec-lbl { font-size:10px; font-weight:600; color:var(--text-muted); letter-spacing:.08em; text-transform:uppercase; font-family:'DM Mono',monospace; margin-bottom:11px }

/* Cards */
.card-list { display:flex; flex-direction:column; gap:7px; margin-bottom:14px }
.m-card, .s-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:11px 12px; display:flex; align-items:center; gap:9px }
.color-dot { width:20px; height:20px; border-radius:6px; flex-shrink:0; cursor:pointer; transition:transform .15s }
.color-dot:hover { transform:scale(1.15) }
.color-pick { width:28px; height:28px; border:2px solid var(--border); border-radius:6px; padding:0; cursor:pointer; flex-shrink:0; background:none; -webkit-appearance:none; appearance:none }
.color-pick::-webkit-color-swatch-wrapper { padding:0 }
.color-pick::-webkit-color-swatch { border:none; border-radius:4px }
.name-inp { flex:1; background:transparent; border:none; color:var(--text); font-size:13px; font-weight:500; font-family:'Noto Sans KR',sans-serif; outline:none; min-width:0; border-bottom:1px solid transparent; padding-bottom:1px; transition:border-color .15s }
.name-inp:focus { color:var(--accent); border-bottom-color:var(--accent) }
.card-acts { display:flex; gap:5px; flex-shrink:0 }
.ic { width:28px; height:28px; border-radius:8px; border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s }
.ic.up:hover, .ic.dn:hover { background:rgba(124,106,247,.15); border-color:var(--accent); color:var(--accent) }
.ic.ok:hover { background:rgba(74,222,128,.15); border-color:var(--green); color:var(--green) }
.ic.rm:hover { background:rgba(248,113,113,.15); border-color:var(--red); color:var(--red) }

/* Color picker */
.icp { display:none; flex-wrap:wrap; gap:5px; padding:7px; background:var(--surface2); border-radius:9px; border:1px solid var(--border); margin-top:5px }
.icp.open { display:flex }
.icp-dot { width:22px; height:22px; border-radius:5px; cursor:pointer; border:2px solid transparent; transition:all .15s; flex-shrink:0 }
.icp-dot:hover { transform:scale(1.12) }
.icp-dot.sel { border-color:#fff; transform:scale(1.12) }

/* Add row */
.add-row { display:flex; gap:8px; align-items:center; margin-bottom:6px }
.add-inp { flex:1; background:var(--surface2); border:1px solid var(--border); border-radius:9px; padding:8px 11px; color:var(--text); font-size:13px; font-family:'Noto Sans KR',sans-serif; outline:none; transition:border-color .2s }
.add-inp:focus { border-color:var(--accent) }
.add-btn { padding:8px 14px; border-radius:9px; border:none; background:var(--accent); color:#fff; font-size:12px; font-weight:600; cursor:pointer; white-space:nowrap; font-family:'Noto Sans KR',sans-serif }
.add-btn:hover { opacity:.85 }
.hint { font-size:11px; color:var(--text-dim); line-height:1.5 }

/* Emoji & shift styling */
.emoji-btn-sm { width:34px; height:34px; border-radius:9px; border:1px solid var(--border); background:var(--surface2); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:border-color .15s }
.emoji-btn-sm:hover { border-color:var(--accent) }
.swatch { width:28px; height:28px; border-radius:8px; cursor:pointer; border:2px solid rgba(255,255,255,.1); flex-shrink:0; transition:transform .15s }
.swatch:hover { transform:scale(1.1) }
.def-tag { font-size:9px; padding:2px 7px; border-radius:6px; background:rgba(124,106,247,.14); color:var(--accent); font-family:'DM Mono',monospace; white-space:nowrap; flex-shrink:0 }
.shift-inp { flex:1; background:transparent; border:none; color:var(--text); font-size:13px; font-weight:500; font-family:'Noto Sans KR',sans-serif; outline:none; min-width:0; border-bottom:1px solid transparent; padding-bottom:1px; transition:border-color .15s }
.shift-inp:focus { color:var(--accent); border-bottom-color:var(--accent) }
.emoji-grid { display:none; flex-wrap:wrap; gap:4px; padding:8px; background:var(--surface2); border-radius:9px; border:1px solid var(--border); margin-top:6px }
.emoji-grid.open { display:flex }
.em { font-size:17px; width:32px; height:32px; border-radius:7px; display:flex; align-items:center; justify-content:center; cursor:pointer; border:2px solid transparent; transition:all .12s }
.em:hover { background:var(--surface3) }
.em.sel { border-color:var(--accent); background:var(--surface3) }
.color-strip { display:flex; gap:5px; flex-wrap:wrap; padding:8px; background:var(--surface2); border-radius:9px; border:1px solid var(--border) }
.cs { width:22px; height:22px; border-radius:5px; cursor:pointer; border:2px solid transparent; transition:all .15s; flex-shrink:0 }
.cs:hover { transform:scale(1.12) }
.cs.sel { border-color:#fff; transform:scale(1.12) }
.new-shift-form { background:var(--surface); border:1px dashed var(--border2); border-radius:12px; padding:14px; display:flex; flex-direction:column; gap:10px; margin-bottom:8px }
.form-row { display:flex; gap:8px; align-items:flex-end }
.big-btn { width:100%; padding:10px; border-radius:10px; border:none; background:var(--admin-grad); color:#fff; font-size:12px; font-weight:700; cursor:pointer; font-family:'Noto Sans KR',sans-serif; transition:opacity .15s }
.big-btn:hover { opacity:.88 }

/* Event list */
.ev-card { background:var(--surface); border:1px solid var(--border); border-radius:12px; padding:11px 13px; display:flex; align-items:center; gap:10px; margin-bottom:7px }
.ev-color-bar { width:4px; height:36px; border-radius:4px; flex-shrink:0 }
.ev-info { flex:1; min-width:0 }
.ev-date { font-size:10px; color:var(--text-muted); font-family:'DM Mono',monospace; margin-bottom:2px }
.ev-title { font-size:13px; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.ev-type-dot { width:10px; height:10px; border-radius:3px; flex-shrink:0 }

/* Shift / Event popup */
.overlay { display:flex; position:fixed; inset:0; background:rgba(0,0,0,.6); z-index:500; align-items:flex-end; justify-content:center }
.popup { background:var(--surface); border-radius:20px 20px 0 0; border-top:1px solid var(--border); padding:18px 18px 32px; width:100%; max-width:480px; animation:slideUp .22s ease }
.pop-handle { width:34px; height:4px; background:var(--border); border-radius:2px; margin:0 auto 14px }
.pop-title { font-size:13px; font-weight:600; text-align:center; margin-bottom:14px }
.shift-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:7px; margin-bottom:14px }
.sh-opt { padding:10px 5px; border-radius:10px; border:2px solid transparent; cursor:pointer; text-align:center; font-size:11px; font-weight:600; transition:all .15s; font-family:'DM Mono',monospace }
.sh-opt:hover { transform:scale(1.04) }
.sh-opt.sel { border-color:rgba(255,255,255,.6) !important }
.pop-btn-row { display:flex; gap:8px; margin-top:4px }
.pop-close { width:100%; padding:11px; border-radius:11px; border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); font-size:12px; cursor:pointer; font-family:'Noto Sans KR',sans-serif }
.pop-btn-row .pop-close { width:auto; flex:1 }
.pop-save { flex:1; padding:11px; border-radius:11px; border:none; background:var(--accent); color:#fff; font-size:12px; font-weight:700; cursor:pointer; font-family:'Noto Sans KR',sans-serif; transition:opacity .15s }
.pop-save:active { opacity:.7 }
.pop-save:disabled { opacity:.5; cursor:default }
.pop-delete { flex:1; padding:11px; border-radius:11px; border:1px solid #f87171; background:transparent; color:#f87171; font-size:12px; font-weight:700; cursor:pointer; font-family:'Noto Sans KR',sans-serif; transition:opacity .15s }
.pop-delete:active { opacity:.7 }

/* Toast */
/* MONTHLY CALENDAR OVERLAY */
.cal-overlay { position:fixed; inset:0; background:var(--bg); z-index:400; overflow-y:auto; animation:fadeIn .2s ease }
@keyframes fadeIn { from { opacity:0 } to { opacity:1 } }
.cal-header { position:sticky; top:0; z-index:10; display:flex; align-items:center; justify-content:space-between; padding:12px 16px; background:var(--surface); border-bottom:1px solid var(--border) }
.cal-title { font-size:16px; font-weight:700; font-family:'Noto Sans KR',sans-serif }
.cal-back-btn { height:32px; border-radius:16px; border:1px solid var(--accent); background:transparent; color:var(--accent); font-size:12px; font-weight:700; cursor:pointer; padding:0 14px; font-family:'Noto Sans KR',sans-serif; transition:all .15s }
.cal-back-btn:hover { background:var(--accent); color:#fff }
.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); padding:8px; gap:1px }
.cal-dow { text-align:center; font-size:10px; font-weight:700; color:var(--text-muted); padding:6px 0; font-family:'DM Mono',monospace }
.cal-dow.sun { color:var(--red) }
.cal-dow.sat { color:var(--blue) }
.cal-cell { min-height:70px; border:1px solid var(--border); border-radius:6px; padding:4px; background:var(--surface); position:relative }
.cal-cell.empty { border-color:transparent; background:transparent }
.cal-cell.sun { background:var(--weekend-bg) }
.cal-cell.sat { background:var(--weekend-bg) }
.cal-cell.today { background:var(--today-bg); border-color:var(--today-accent) }
.cal-day { font-size:11px; font-weight:700; font-family:'DM Mono',monospace; margin-bottom:2px }
.cal-cell.sun .cal-day { color:var(--red) }
.cal-cell.sat .cal-day { color:var(--blue) }
.cal-ev { font-size:9px; font-weight:600; color:var(--text); line-height:1.3; word-break:break-all; padding:1px 3px; background:var(--surface2); border-radius:3px; margin-top:2px; border-left:2px solid var(--accent) }
.monthly-btn { height:28px; border-radius:14px; border:1px solid var(--accent); background:transparent; color:var(--accent); font-size:10px; font-weight:700; cursor:pointer; padding:0 10px; font-family:'Noto Sans KR',sans-serif; transition:all .15s; white-space:nowrap; margin-left:6px }
.monthly-btn:hover { background:var(--accent); color:#fff }
.excel-btn { border-color:#217346; color:#217346 }
.excel-btn:hover { background:#217346; color:#fff }

.toast-msg { position:fixed; bottom:80px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--surface); color:var(--text); border:1px solid var(--border); border-left:4px solid var(--accent); padding:10px 20px; border-radius:10px; font-size:13px; font-weight:600; font-family:'Noto Sans KR',sans-serif; box-shadow:0 4px 20px rgba(0,0,0,.25); opacity:0; transition:opacity .3s,transform .3s; z-index:9999; pointer-events:none }
.toast-msg.show { opacity:1; transform:translateX(-50%) translateY(0) }

/* Event popup */
.ev-popup-header { display:flex; align-items:center; gap:8px; margin-bottom:16px; justify-content:center }
.ev-date-label { font-size:12px; color:var(--text-muted); font-family:'DM Mono',monospace }
.ev-type-row { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; margin-bottom:14px }
.ev-type-btn { padding:8px 4px; border-radius:9px; border:2px solid transparent; cursor:pointer; text-align:center; font-size:10px; font-weight:600; transition:all .14s; display:flex; flex-direction:column; gap:3px; align-items:center }
.ev-type-btn:hover { transform:scale(1.04) }
.ev-type-btn.sel { border-color:rgba(255,255,255,.5) }
.ev-type-icon { font-size:16px }
.ev-input-wrap { margin-bottom:12px }
.ev-input-lbl { font-size:10px; color:var(--text-muted); font-family:'DM Mono',monospace; margin-bottom:5px }
.ev-text-inp { width:100%; background:var(--input-bg); border:1px solid var(--border); border-radius:9px; padding:9px 11px; color:var(--text); font-size:13px; font-family:'Noto Sans KR',sans-serif; outline:none; transition:border-color .2s }
.ev-text-inp:focus { border-color:var(--accent) }
.ev-save-btn { width:100%; padding:11px; border-radius:11px; border:none; background:var(--admin-grad); color:#fff; font-size:13px; font-weight:700; cursor:pointer; font-family:'Noto Sans KR',sans-serif; margin-bottom:8px; transition:opacity .15s }
.ev-save-btn:hover { opacity:.88 }
.ev-del-btn { width:100%; padding:10px; border-radius:11px; border:1px solid rgba(248,113,113,.3); background:rgba(248,113,113,.1); color:var(--red); font-size:12px; cursor:pointer; font-family:'Noto Sans KR',sans-serif }

/* Confirm dialog */
.confirm-ov { display:flex; position:fixed; inset:0; background:rgba(0,0,0,.65); z-index:600; align-items:center; justify-content:center; padding:20px }
.conf-box { background:var(--surface); border:1px solid var(--border); border-radius:16px; padding:22px; width:100%; max-width:310px; animation:pop .18s ease }
@keyframes pop { from{opacity:0;transform:scale(.94)} to{opacity:1;transform:scale(1)} }
.conf-title { font-size:14px; font-weight:700; margin-bottom:8px }
.conf-msg { font-size:12px; color:var(--text-muted); margin-bottom:18px; line-height:1.6 }
.conf-btns { display:flex; gap:8px }
.conf-btn { flex:1; padding:10px; border-radius:10px; border:none; font-size:12px; font-weight:600; cursor:pointer; font-family:'Noto Sans KR',sans-serif; transition:all .15s }
.conf-btn.cancel { background:var(--surface2); color:var(--text-muted) }
.conf-btn.danger { background:rgba(248,113,113,.15); color:var(--red); border:1px solid rgba(248,113,113,.28) }
.conf-btn.danger:hover { background:rgba(248,113,113,.3) }

/* Summary view */
.summary-view { padding-bottom:60px }
.sum-nav { display:flex; align-items:center; justify-content:center; gap:14px; padding:13px 16px; background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:88px; z-index:90 }
.sum-month-label { font-family:'DM Mono',monospace; font-size:18px; font-weight:600; min-width:110px; text-align:center }
.sum-board { overflow-x:auto; padding:6px 4px; -webkit-overflow-scrolling:touch }
.sum-table { border-collapse:separate; border-spacing:0; min-width:300px; width:100% }
.sum-table th.name-col2 { min-width:56px; width:56px; position:relative; z-index:12; background:var(--surface); text-align:left; padding:5px 7px; font-size:9px; font-weight:600; color:var(--text-muted); border-bottom:2px solid var(--border); font-family:'DM Mono',monospace; white-space:nowrap }
.sum-table th.grp-th2 { text-align:center; padding:4px 3px; font-size:9px; font-weight:700; border-bottom:2px solid var(--border); white-space:nowrap; font-family:'Noto Sans KR',sans-serif; position:relative; z-index:1; background:var(--surface) }
.sum-table th.pos-th2 { text-align:center; padding:3px 2px; font-size:8px; font-weight:600; border-bottom:1px solid var(--border); white-space:nowrap; font-family:'DM Mono',monospace; color:var(--text-muted); min-width:38px; position:relative; z-index:1; background:var(--surface) }
.sum-table th:not(.name-col) { position:relative; z-index:1; background:var(--surface) }
.sum-table td:not(.name-cell) { position:relative; z-index:1; background:var(--bg) }
.sum-table td.name-cell2 { position:relative; z-index:5; background:var(--bg); border-right:2px solid var(--border); border-bottom:1px solid var(--row-border); padding:5px 7px; font-size:11px; font-weight:600; white-space:nowrap }
.sum-table tr:hover td { background:var(--row-hover) }
.sum-table tr:hover td.name-cell2 { background:var(--bg) }
.sum-table td.cnt-cell { text-align:center; border-bottom:1px solid var(--row-border2); border-right:1px solid var(--row-border2); padding:3px 2px }
.cnt-badge { display:inline-flex; align-items:center; justify-content:center; min-width:22px; height:18px; border-radius:5px; font-size:10px; font-weight:700; font-family:'DM Mono',monospace; padding:0 4px }
.cnt-badge.has { color:#fff }
.cnt-badge.none { color:var(--text-dim); font-size:9px; opacity:.4 }
.sum-total-row td { border-top:2px solid var(--border2); border-bottom:none; background:var(--surface) !important; font-weight:700 }
.sum-total-row td.name-cell2 { background:var(--surface) !important; font-size:9px; color:var(--text-muted) }

/* Shift leader view */
.shift-leader-view { padding-bottom:60px }
.sl-nav { display:flex; align-items:center; justify-content:center; gap:14px; padding:13px 16px; background:var(--surface); border-bottom:1px solid var(--border); position:sticky; top:88px; z-index:90 }
.sl-month-label { font-family:'DM Mono',monospace; font-size:18px; font-weight:600; min-width:110px; text-align:center }
.sl-board { overflow-x:auto; padding:6px 4px; -webkit-overflow-scrolling:touch }
.sl-table { border-collapse:separate; border-spacing:0; min-width:400px; width:100% }
.sl-table th.bu-col { min-width:44px; width:44px; position:relative; z-index:12; background:var(--surface); text-align:center; padding:5px 3px; font-size:9px; font-weight:600; color:var(--text-muted); border-bottom:2px solid var(--border); font-family:'DM Mono',monospace }
.sl-table th.sl-leader-col { min-width:52px; width:52px; position:sticky; left:44px; z-index:12; background:var(--surface); text-align:center; padding:5px 3px; font-size:9px; font-weight:600; color:var(--text-muted); border-bottom:2px solid var(--border); font-family:'Noto Sans KR',sans-serif; border-right:2px solid var(--border) }
.sl-table td.bu-cell { position:relative; z-index:5; background:var(--surface2); border-right:1px solid var(--border); border-bottom:1px solid var(--border); padding:3px 4px; min-width:44px; text-align:center; font-size:10px; font-weight:700; color:var(--accent); font-family:'DM Mono',monospace }
.sl-table td.sl-leader-cell { position:sticky; left:44px; z-index:5; background:var(--surface2); border-right:2px solid var(--border); border-bottom:1px solid var(--border); padding:2px 3px; min-width:52px; text-align:center; vertical-align:middle }
.sl-table th.sl-day-hd { text-align:center; padding:5px 2px; border-bottom:2px solid var(--border); font-family:'DM Mono',monospace; font-size:9px; font-weight:500; color:var(--text-muted); white-space:nowrap; background:var(--surface); min-width:46px }
.sl-table th.sl-day-hd .dhd-inner { display:flex; flex-direction:column; align-items:center; gap:0 }
.sl-table td.sl-cell { padding:2px 2px; text-align:center; vertical-align:middle; border-bottom:1px solid var(--row-border2); border-right:1px solid var(--row-border2) }
.sl-cell.weekend-col { background:var(--weekend-bg) }
.sl-cell.today-col { background:var(--today-pos-bg) !important }
.sl-btn { width:42px; min-height:24px; border-radius:6px; border:1px dashed var(--border2); background:var(--input-bg); color:var(--text-dim); font-size:9px; cursor:pointer; padding:2px 2px; transition:all .14s; font-family:'Noto Sans KR',sans-serif; line-height:1.2; display:flex; align-items:center; justify-content:center; margin:0 auto; word-break:keep-all; text-align:center }
.sl-btn:hover { border-color:var(--accent); color:var(--accent); background:rgba(124,106,247,.08) }
.sl-btn.filled { border-style:solid; border-color:transparent; font-size:9px; font-weight:700; color:#fff }

/* Member card checkboxes */
.chk-wrap { display:flex; flex-direction:column; gap:3px; flex-shrink:0; align-items:center }
.chk-item { display:flex; align-items:center; gap:3px; font-size:9px; color:var(--text-muted); font-family:'DM Mono',monospace; cursor:pointer; white-space:nowrap }
.chk-item input[type=checkbox] { width:12px; height:12px; accent-color:var(--accent); cursor:pointer }
.badge-leader { font-size:8px; padding:1px 5px; border-radius:4px; background:rgba(247,167,106,.2); color:#f7a76a; font-family:'DM Mono',monospace; font-weight:700 }
.badge-main { font-size:8px; padding:1px 5px; border-radius:4px; background:rgba(124,106,247,.2); color:var(--accent); font-family:'DM Mono',monospace; font-weight:700 }

/* Today highlight */
th.today-col { background:var(--today-hd-bg) !important; border-top:3px solid var(--today-accent) !important }
th.today-col .th-day { color:var(--today-accent); font-weight:800; font-size:11px }
th.today-col .th-dow { color:var(--today-accent); opacity:1; font-weight:700 }
td.today-col { background:var(--today-bg) !important; box-shadow:inset 0 0 0 1px rgba(247,106,138,.15) }
th.selected-col { background:rgba(124,106,247,.18) !important; border-top:3px solid var(--accent) !important }
th.selected-col .th-day { color:var(--accent); font-weight:800; font-size:11px }
th.selected-col .th-dow { color:var(--accent); opacity:1; font-weight:700 }
td.selected-col { background:rgba(124,106,247,.08) !important; box-shadow:inset 0 0 0 1px rgba(124,106,247,.15) }

/* Other month date dimming */
.other-month { opacity:.35 }
.week-start { border-left:3px solid #f87171 !important }

/* Scrollbar */
::-webkit-scrollbar { width:6px; height:6px }
::-webkit-scrollbar-track { background:transparent }
::-webkit-scrollbar-thumb { background:var(--border); border-radius:4px }

/* ── HTML/JS class aliases & missing rules ── */

/* Popup header layout */
.popup-hdr { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px }
.popup-title { font-size:14px; font-weight:700 }
.popup-close-btn { width:28px; height:28px; border-radius:8px; border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s }
.popup-close-btn:hover { background:var(--red); color:#fff; border-color:var(--red) }
.popup-sub { font-size:11px; color:var(--text-muted); text-align:center; margin-bottom:14px; font-family:'DM Mono',monospace }

/* Shift popup options */
.sh-emoji { font-size:16px; display:block; margin-bottom:2px }
.sh-name { font-size:10px; display:block; color:var(--text-muted) }
.sh-opt { background:var(--surface2); display:flex; flex-direction:column; align-items:center; gap:2px }
.sh-clear { background:rgba(248,113,113,.08); border-color:rgba(248,113,113,.2) }
.sh-clear:hover { background:rgba(248,113,113,.15) }

/* Event type button active state (JS uses .active, CSS had .sel) */
.ev-type-btn.active { border-color:var(--accent); background:rgba(124,106,247,.12) }
.ev-type-btn:not(.active) { background:var(--surface2) }

/* Event popup aliases */
.ev-inp-wrap { margin-bottom:12px }
.ev-inp-lbl { font-size:10px; color:var(--text-muted); font-family:'DM Mono',monospace; margin-bottom:5px; display:block }
.ev-inp-row { display:flex; gap:6px; align-items:center }
.ev-inp-row .ev-text-inp { flex:1 }
.ev-inp-del { width:32px; height:32px; border:1px solid var(--border); border-radius:8px; background:var(--card); color:var(--text-muted); font-size:14px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s }
.ev-inp-del:hover { background:#fee2e2; color:#ef4444; border-color:#fca5a5 }
.ev-actions { display:flex; flex-direction:column; gap:8px; margin-bottom:12px }
.ev-existing { margin-top:12px }
.ev-exist-title { font-size:10px; font-weight:600; color:var(--text-muted); margin-bottom:8px; font-family:'DM Mono',monospace }

/* Event list items (used in event popup & settings panel) */
.ev-list { display:flex; flex-direction:column; gap:6px }
.ev-list-item { display:flex; align-items:center; gap:8px; padding:8px 10px; background:var(--surface2); border:1px solid var(--border); border-radius:10px }
.ev-list-icon { font-size:14px; flex-shrink:0 }
.ev-list-date { font-size:11px; color:var(--text-muted); font-family:'DM Mono',monospace; flex-shrink:0 }
.ev-list-title { font-size:12px; font-weight:500; flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.ev-list-del { width:24px; height:24px; border-radius:6px; border:1px solid rgba(248,113,113,.2); background:rgba(248,113,113,.06); color:var(--red); font-size:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:all .15s }
.ev-list-del:hover { background:rgba(248,113,113,.2) }
.ev-list-empty { text-align:center; padding:24px; color:var(--text-dim); font-size:12px }

/* Picker popup aliases */
.picker-actions { margin-top:8px }
.picker-clear-btn { width:100%; padding:11px; border-radius:11px; border:1px solid rgba(248,113,113,.3); background:rgba(248,113,113,.08); color:var(--red); font-size:12px; cursor:pointer; font-family:'Noto Sans KR',sans-serif }
.picker-clear-btn:hover { background:rgba(248,113,113,.2) }

/* Panel aliases */
.panel-close-btn { width:32px; height:32px; border-radius:9px; border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); font-size:18px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s }
.panel-close-btn:hover { background:var(--red); color:#fff; border-color:var(--red) }
.panel-events-nav { display:flex; align-items:center; justify-content:center; gap:14px; padding:12px 0; margin-bottom:8px }

/* Confirm dialog aliases */
.conf-cancel { background:var(--surface2); color:var(--text-muted) }
.conf-ok { background:rgba(248,113,113,.15); color:var(--red); border:1px solid rgba(248,113,113,.28) }
.conf-ok:hover { background:rgba(248,113,113,.3) }

/* Color dot (member identifier) */
.color-dot { width:10px; height:10px; border-radius:50%; display:inline-block; flex-shrink:0; vertical-align:middle; margin-right:4px }

/* Member name cell */
.name-cell { vertical-align:middle; white-space:nowrap }
.name-cell .color-dot { display:inline-block; vertical-align:middle; margin-right:4px }

/* Settings panel - Member & Shift cards */
.name-inp { flex:0 0 80px; min-width:0; width:80px; background:var(--input-bg); border:1px solid var(--border); border-radius:8px; padding:5px 8px; color:var(--text); font-size:12px; font-family:'Noto Sans KR',sans-serif; outline:none }
.excl-lbl { color:var(--red,#f87171) !important }
.name-inp:focus { border-color:var(--accent) }
.color-inp { width:28px; height:28px; border-radius:8px; border:1px solid var(--border); cursor:pointer; padding:0; flex-shrink:0 }
.card-chk-lbl { display:flex; align-items:center; gap:4px; font-size:10px; color:var(--text-muted); cursor:pointer; white-space:nowrap; flex-shrink:0 }
.card-chk-lbl input[type=checkbox] { width:13px; height:13px; accent-color:var(--accent); cursor:pointer }
.card-btn { width:26px; height:26px; border-radius:7px; border:1px solid var(--border); background:var(--surface2); color:var(--text-muted); font-size:10px; cursor:pointer; display:flex; align-items:center; justify-content:center; transition:all .15s; flex-shrink:0 }
.card-btn:hover { border-color:var(--accent); color:var(--accent) }
.del-btn:hover { border-color:var(--red); color:var(--red); background:rgba(248,113,113,.08) }

/* Add card forms */
.add-card-form { background:var(--surface); border:1px dashed var(--border2); border-radius:12px; padding:12px; margin-top:12px }
.add-form-row { display:flex; gap:8px; align-items:center; margin-bottom:8px }
.add-name-inp { flex:1; background:var(--input-bg); border:1px solid var(--border); border-radius:8px; padding:7px 10px; color:var(--text); font-size:12px; font-family:'Noto Sans KR',sans-serif; outline:none }
.add-name-inp:focus { border-color:var(--accent) }
.add-color-inp { width:32px; height:32px; border-radius:8px; border:1px solid var(--border); cursor:pointer; padding:0; flex-shrink:0 }
.add-chk-lbl { display:flex; align-items:center; gap:4px; font-size:11px; color:var(--text-muted); cursor:pointer }
.add-chk-lbl input[type=checkbox] { width:13px; height:13px; accent-color:var(--accent); cursor:pointer }
.add-btn { width:100%; padding:9px; border-radius:10px; border:1px dashed var(--accent); background:rgba(124,106,247,.06); color:var(--accent); font-size:12px; font-weight:600; cursor:pointer; font-family:'Noto Sans KR',sans-serif; transition:all .15s }
.add-btn:hover { background:rgba(124,106,247,.15) }
.add-emoji-inp { width:44px; background:var(--input-bg); border:1px solid var(--border); border-radius:8px; padding:7px 4px; color:var(--text); font-size:16px; text-align:center; outline:none }
.add-emoji-inp:focus { border-color:var(--accent) }

/* Shift card emoji */
.sh-card-emoji { font-size:18px; flex-shrink:0 }

/* Memo save button */
.memo-save-btn { padding:5px 14px; border-radius:8px; border:1px solid var(--accent); background:rgba(124,106,247,.1); color:var(--accent); font-size:11px; font-weight:600; cursor:pointer; font-family:'Noto Sans KR',sans-serif; flex-shrink:0; transition:all .15s }
.memo-save-btn:hover { background:rgba(124,106,247,.2) }

/* Shift leader name column (compact) */
.sl-name-col { min-width:36px !important; width:36px !important; padding-left:4px !important; padding-right:2px !important }

/* Shift leader fixed column */
.fixed-col { width:auto; text-align:center; padding:2px 4px; white-space:nowrap; border-right:2px solid var(--border); position:-webkit-sticky; position:sticky; left:36px; z-index:14 }
th.fixed-col { font-size:9px; font-weight:600; color:var(--text-muted); border-bottom:2px solid var(--border); font-family:'DM Mono',monospace; background:var(--surface) !important }
td.fixed-col { background:var(--surface2) !important; border-bottom:1px solid var(--border); vertical-align:middle }

/* Shift leader day-off column (after fixed-col) */
.sl-dayoff-col { position:-webkit-sticky; position:sticky; left:106px; z-index:13; min-width:40px; width:40px; background:var(--bg) !important; border-right:2px solid var(--border); text-align:center; white-space:nowrap }
th.sl-dayoff-col { background:var(--bg) !important; font-size:8px; font-weight:600; color:var(--text-muted) }

/* Panel body */
.panel-body { padding:16px }

/* Legend dot alias (JS uses lg-dot, CSS had legend-dot) */
.lg-dot { width:9px; height:9px; border-radius:3px; flex-shrink:0; display:inline-block }

/* Event add clickable area on day headers (admin) */
.th-ev-btn { position:absolute; bottom:0; left:0; right:0; height:6px; cursor:pointer; opacity:0; transition:opacity .15s }
th:hover .th-ev-btn { opacity:1; background:var(--accent); border-radius:0 0 3px 3px }

/* ── MOBILE ── */
@media (max-width:768px) {
  .table-wrap { padding:4px 0 }
  th.name-col { min-width:72px; width:72px; padding-left:6px; padding-right:1px; font-size:8px }
  td.name-cell { min-width:72px; width:72px; padding-left:6px; padding-right:1px; font-size:11px }
  .shift-btn { min-width:32px; height:22px; font-size:9px; padding:0 2px }
  .dayoff-col { min-width:36px; width:36px; left:72px }
  .dayoff-btn { width:30px; height:20px; font-size:8px }
  .th-day { font-size:8px }
  .th-dow { font-size:6px }
  .pos-table th.date-col, .pos-table td.date-cell { min-width:54px; width:54px }
  .sl-dayoff-col { min-width:36px; width:36px; left:106px }
  .pos-leader-freeze { left:54px }
  .pos-board { padding:4px 0 }
  .assign-btn { width:38px; min-height:22px; font-size:8px }
  .sum-table th.name-col2, .sum-table td.name-cell2 { min-width:48px; width:48px; padding:4px 5px; font-size:10px }
  .sl-table th.bu-col, .sl-table td.bu-cell { min-width:36px; width:36px }
  .month-nav { justify-content:flex-start }
}

/* ── Analysis Panel Table ── */
.ana-table { width:100%; border-collapse:collapse; font-size:13px; margin-top:8px }
.ana-table th, .ana-table td { padding:6px 10px; text-align:center; border-bottom:1px solid var(--border) }
.ana-table th { font-weight:600; background:var(--bg2); font-size:12px }
.ana-table th.ana-name-col, .ana-table td.ana-name-col { text-align:left; min-width:80px }
.ana-table tbody tr:hover { background:var(--bg2) }
.ana-badge { display:inline-block; padding:2px 7px; border-radius:10px; font-size:12px; font-weight:600 }

/* ── Analysis Picker ── */
.ana-picker-wrap { padding: 8px 0 }
.ana-year-row { display:flex; gap:8px; margin-bottom:16px }
.ana-year-btn {
  flex:1; padding:10px 0; border-radius:10px; border:2px solid var(--border);
  background:var(--bg2); color:var(--text); font-size:14px; font-weight:600; cursor:pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.ana-year-btn.selected { border-color:var(--accent); background:var(--accent); color:#fff }
.ana-month-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-bottom:20px }
.ana-month-btn {
  padding:10px 0; border-radius:10px; border:2px solid var(--border);
  background:var(--bg2); color:var(--text); font-size:13px; font-weight:500; cursor:pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.ana-month-btn.selected { border-color:var(--accent); background:var(--accent); color:#fff }
.ana-confirm-btn {
  width:100%; padding:13px 0; border-radius:12px; border:none;
  background:var(--accent); color:#fff; font-size:15px; font-weight:700; cursor:pointer;
  transition: opacity .15s;
}
.ana-confirm-btn:disabled { opacity:.35; cursor:default }

/* ── 제외 월 선택 패널 ── */
.m-card { flex-wrap: wrap; align-items: center }
.excl-month-panel { width: 100%; margin-top: 6px; padding: 8px; background: var(--surface2); border-radius: 8px; border: 1px solid var(--border) }
.excl-month-panel.hidden { display: none }
.excl-year-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px }
.excl-year-lbl { flex: 1; text-align: center; font-size: 13px; font-weight: 600; color: var(--text, #e2e8f0) }
.excl-year-btn { padding: 2px 8px; border-radius: 6px; border: 1px solid var(--border, #333); background: var(--bg, #0f0f13); color: var(--text, #e2e8f0); cursor: pointer; font-size: 11px }
.excl-month-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px }
.excl-month-lbl { display: flex; align-items: center; justify-content: center; gap: 3px; padding: 5px 0; border-radius: 6px; border: 1px solid var(--border, #333); background: var(--bg, #0f0f13); color: var(--text, #e2e8f0); font-size: 12px; cursor: pointer; transition: background .12s, border-color .12s; user-select: none }
.excl-month-lbl.selected { background: var(--red, #f87171); border-color: var(--red, #f87171); color: #fff }
.excl-month-lbl input[type=checkbox] { display: none }
.excl-save-btn { display: block; width: 100%; margin-top: 8px; padding: 7px 0; border-radius: 8px; border: none; background: var(--red, #f87171); color: #fff; font-size: 13px; font-weight: 600; cursor: pointer; transition: opacity .15s }
.excl-save-btn:hover { opacity: 0.85 }

/* ── Rank Select (member card & add form) ── */
.card-rank-sel, .add-rank-sel {
  padding: 4px 8px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface2); color: var(--text); font-size: 12px; cursor: pointer;
  max-width: 100px;
}

/* ── Analysis View (main tab) ── */
.analysis-container { padding: 0 0 16px }
.ana-result-wrap { margin-top: 12px; padding: 16px; border-radius: 12px; background: var(--surface2); min-height: 120px }
.ana-placeholder { color: var(--text-muted); font-size: 14px; text-align: center; padding: 32px 0 }

/* ── Analysis: 월 선택 ── */
.ana-month-selector {
  padding: 12px 16px;
  background: var(--surface2);
  border-radius: 10px;
  margin-bottom: 12px;
}
.ana-month-selector .excl-month-lbl.selected { background: var(--accent, #a78bfa); border-color: var(--accent, #a78bfa); color: #fff }

/* ── Analysis: 서브탭 ── */
.ana-subtabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  padding-left: 4px;
}
.ana-subtab {
  padding: 5px 14px;
  border: 1px solid var(--border, #333);
  border-radius: 6px;
  background: transparent;
  color: var(--text-muted, #888);
  font-size: 0.78rem;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.ana-subtab.active {
  background: var(--accent, #a78bfa);
  color: #fff;
  border-color: transparent;
}

/* ── Analysis: 결과 섹션 카드 ── */
.ana-section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.ana-section-title {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.ana-section-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.ana-more-btn {
  font-size: 0.68rem;
  padding: 2px 8px;
  border-radius: 4px;
  border: 1px solid var(--border, rgba(255,255,255,0.12));
  background: transparent;
  color: var(--text-muted, #888);
  cursor: pointer;
  letter-spacing: 0.03em;
}
.ana-more-btn:hover {
  background: var(--surface3, rgba(255,255,255,0.06));
}
.ana-attend-detail-summary {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 10px;
  font-size: 0.78rem;
  color: var(--text-muted, #888);
}

/* ── Analysis: 요약 카드 ── */
.ana-summary-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.ana-summary-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
}
.ana-summary-val {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text, #e2e8f0);
}
.ana-summary-lbl {
  font-size: 0.68rem;
  color: var(--text-muted, #888);
  margin-top: 2px;
}

/* ── Analysis: 일별 출근 인원 현황 ── */
.ana-attend-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 4px;
}
.ana-attend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ana-attend-label {
  width: 34px;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--attend-label-color, #ffffff);
  text-align: right;
  flex-shrink: 0;
}
.ana-attend-bar-wrap {
  flex: 1;
  height: 18px;
  background: var(--bg-card2, rgba(255,255,255,0.06));
  border-radius: 4px;
  overflow: hidden;
}
.ana-attend-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
  min-width: 2px;
}
.ana-attend-days {
  width: 28px;
  font-size: 0.78rem;
  color: var(--text-muted, #888);
  text-align: left;
  flex-shrink: 0;
}
.ana-attend-pct {
  width: 36px;
  font-size: 0.75rem;
  color: var(--text-sub, #aaa);
  text-align: right;
  flex-shrink: 0;
}

/* ── Analysis: 근무일 현황 ── */
.ana-member-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.ana-member-entry {
  margin-bottom: 3px;
}
.ana-member-row {
  display: grid;
  grid-template-columns: 8px 52px 1fr 36px;
  align-items: center;
  column-gap: 6px;
}
.ana-member-chips-row {
  padding-left: 13px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 2px;
}
.ana-member-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
}
.ana-member-name {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text, #e2e8f0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ana-member-days {
  font-size: 0.78rem;
  color: var(--text-muted, #888);
  text-align: right;
  white-space: nowrap;
}
.ana-member-bar-track {
  width: 100%;
  height: 8px;
  border-radius: 4px;
  background: var(--ana-bar-track, #2a2a3e);
  overflow: hidden;
}
.ana-member-bar-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.4s ease;
  opacity: 0.85;
}
.ana-member-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}
.ana-member-chip {
  font-size: 0.7rem;
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface3, rgba(255,255,255,0.08));
  color: var(--text-muted, #aaa);
  white-space: nowrap;
}
.ana-member-rank {
  font-size: 0.62rem;
  padding: 1px 4px;
  border-radius: 3px;
  flex-shrink: 0;
  white-space: nowrap;
  color: #fff;
  opacity: 0.9;
}
.ana-rank-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.ana-rank-legend-item {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.7rem;
  color: var(--text-muted, #aaa);
}
.ana-rank-legend-dot {
  width: 8px;
  height: 8px;
  border-radius: 2px;
  flex-shrink: 0;
}

/* ── Analysis: 근무일 상세(뱅크 분포) ── */
.ana-member-detail-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 6px;
}
.ana-member-detail-entry {
  padding: 4px 0;
}
.ana-member-detail-row {
  display: grid;
  grid-template-columns: 8px 52px 1fr 38px;
  align-items: center;
  column-gap: 6px;
}
.ana-member-stack-track {
  width: 100%;
  height: 10px;
  border-radius: 5px;
  background: var(--ana-bar-track, #2a2a3e);
  overflow: hidden;
  display: flex;
}
.ana-member-stack-seg {
  height: 100%;
  opacity: 0.9;
  transition: width 0.4s ease;
  min-width: 2px;
}
.ana-member-stack-info {
  padding-left: 66px;
  margin-top: 2px;
  font-size: 0.68rem;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  color: var(--text-muted, #aaa);
}
.ana-member-stack-info span {
  white-space: nowrap;
}

/* ── Analysis: SVG 차트 ── */
.ana-chart-wrap {
  width: 100%;
  overflow-x: auto;
}

/* ── Analysis: 직급 도표 ── */
.ana-rank-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -4px;
  padding: 0 4px;
}
.ana-rank-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.8rem;
}
.ana-rank-table th {
  color: var(--text-muted, #888);
  font-weight: 500;
  padding: 4px 6px;
  text-align: center;
  border-bottom: 1px solid var(--border, #333);
}
.ana-rank-table td {
  padding: 4px 6px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  color: var(--text, #e2e8f0);
}
.ana-rank-table tr:last-child td { border-bottom: none; }
.ana-rank-table td:first-child { text-align: left; }

/* ── Analysis: 개인별 ── */
.ana-member-sel {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid var(--border, #333);
  background: var(--input-bg, #111);
  color: var(--text, #e2e8f0);
  font-size: 0.9rem;
  margin-bottom: 12px;
  box-sizing: border-box;
}
.ana-person-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.ana-person-badge {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.ana-person-name {
  font-size: 1rem;
  font-weight: 600;
  color: var(--text, #e2e8f0);
}
.ana-person-rank {
  font-size: 0.8rem;
  color: var(--text-muted);
  background: var(--surface3);
  padding: 2px 6px;
  border-radius: 4px;
}
.ana-person-total {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--text-muted, #888);
}
.ana-rank-compare {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ana-rank-compare-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ana-rank-compare-name {
  width: 64px;
  font-size: 0.8rem;
  color: var(--text, #e2e8f0);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex-shrink: 0;
}
.ana-rank-compare-bars {
  flex: 1;
  display: flex;
  gap: 2px;
  height: 14px;
  align-items: center;
}
.ana-rank-compare-bar {
  height: 100%;
  border-radius: 2px;
}
.ana-rank-compare-total {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  width: 24px;
  text-align: right;
  flex-shrink: 0;
}
.ana-position-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
}
.ana-position-cell {
  background: var(--surface3);
  border-radius: 6px;
  padding: 8px 4px;
  text-align: center;
}
.ana-position-cell-val {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--text, #e2e8f0);
}
.ana-position-cell-lbl {
  font-size: 0.65rem;
  color: var(--text-muted, #888);
  margin-top: 2px;
}
.ana-coworker-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ana-coworker-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ana-coworker-badge {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}
.ana-coworker-name {
  flex: 1;
  font-size: 0.85rem;
  color: var(--text, #e2e8f0);
}
.ana-coworker-bar {
  height: 4px;
  border-radius: 2px;
  min-width: 4px;
}
.ana-coworker-count {
  font-size: 0.78rem;
  color: var(--text-muted, #888);
  width: 28px;
  text-align: right;
}

/* 뱅크별 페어 카드 */
.ana-bank-pair-card {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
}
.ana-bank-pair-card:first-of-type {
  margin-top: 8px;
}
.ana-bank-pair-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}
.ana-bank-pair-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

/* ── Analysis: 월별 비교 ── */
.ana-compare-desc {
  font-size: 0.75rem;
  color: var(--text-muted, #888);
  margin: 6px 0 12px;
}
.ana-compare-card {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface2);
  overflow: hidden;
}
.ana-compare-card + .ana-compare-card {
  margin-top: 8px;
}
.ana-compare-card-title {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 6px;
}
.ana-compare-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.72rem;
  table-layout: fixed;
}
.ana-compare-table th {
  color: var(--text-muted, #888);
  font-weight: 500;
  padding: 4px 4px;
  text-align: center;
  border-bottom: 1px solid var(--border);
}
.ana-compare-table th:first-child {
  text-align: left;
  width: 64px;
}
.ana-compare-table td {
  padding: 4px 4px;
  text-align: center;
  color: var(--text);
}
.ana-compare-lbl {
  text-align: left !important;
  color: var(--text-muted, #888) !important;
  font-size: 0.7rem;
}
.ana-compare-val {
  font-weight: 600;
  color: var(--text);
}
.ana-compare-pct {
  font-size: 0.68rem;
  color: var(--text-muted, #888);
  margin-left: 3px;
}
.ana-compare-total {
  font-weight: 600;
  color: var(--text);
}
.ana-compare-delta-row td {
  border-top: 1px dashed var(--border);
  font-weight: 600;
  font-size: 0.72rem;
}
.ana-compare-delta-pos { color: #4ade80; }
.ana-compare-delta-neg { color: #f87171; }
.ana-compare-delta-zero { color: var(--text-muted, #888); }
.ana-compare-delta-none { color: var(--text-muted, #888); font-weight: 400; }

@media (max-width: 480px) {
  .ana-compare-card { padding: 8px 8px; }
  .ana-compare-card-title { font-size: 0.78rem; }
  .ana-compare-table { font-size: 0.62rem; }
  .ana-compare-table th,
  .ana-compare-table td { padding: 3px 1px; word-break: keep-all; }
  .ana-compare-table th:first-child,
  .ana-compare-lbl { width: 46px; font-size: 0.6rem; }
  .ana-compare-val { font-size: 0.66rem; }
  .ana-compare-pct { display: block; margin-left: 0; font-size: 0.58rem; line-height: 1.1; }
  .ana-compare-total { font-size: 0.66rem; }
  .ana-compare-delta-row td { font-size: 0.62rem; }
}

/* 월별비교 범례 */
.ana-compare-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 4px 0 10px;
  font-size: 0.72rem;
  color: var(--text-muted, #888);
}
.ana-compare-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.ana-compare-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 2px;
  display: inline-block;
}

/* 월별비교 stacked bar 차트 */
.ana-compare-chart {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 4px 0 10px;
}
.ana-compare-stack-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.ana-compare-stack-lbl {
  flex-shrink: 0;
  width: 60px;
  font-size: 0.72rem;
  color: var(--text-muted, #888);
  text-align: right;
}
.ana-compare-stack-bar {
  flex: 1;
  display: flex;
  height: 18px;
  border-radius: 4px;
  overflow: hidden;
  background: var(--surface, #1a1a1a);
  border: 1px solid var(--border);
}
.ana-compare-stack-seg {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.75);
  overflow: hidden;
  white-space: nowrap;
  transition: width 0.3s ease;
}
.ana-compare-stack-empty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--text-muted, #888);
}
.ana-compare-stack-tot {
  flex-shrink: 0;
  width: 32px;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text);
  text-align: right;
}

@media (max-width: 480px) {
  .ana-compare-stack-lbl { width: 44px; font-size: 0.68rem; }
  .ana-compare-stack-tot { width: 28px; font-size: 0.68rem; }
  .ana-compare-stack-bar { height: 16px; }
  .ana-compare-stack-seg { font-size: 0.64rem; }
}