* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg:#f4f5f7; --panel:#fff; --line:#e3e6ea; --text:#1f2733; --muted:#7a8699;
  --slate:#64748b; --indigo:#6366f1; --purple:#a855f7; --amber:#f59e0b;
  --pink:#ec4899; --green:#22c55e; --teal:#14b8a6; --blue:#3b82f6;
}
body { font-family:-apple-system,"Segoe UI","Malgun Gothic",sans-serif; background:var(--bg); color:var(--text); }

.topbar { display:flex; justify-content:space-between; align-items:center; padding:12px 18px;
  background:var(--panel); border-bottom:1px solid var(--line); position:sticky; top:0; z-index:10; }
.brand { display:flex; align-items:center; gap:10px; }
.brand h1 { font-size:18px; font-weight:700; }
.logo { font-size:22px; }
.env-badge { font-size:11px; font-weight:700; color:#fff; background:var(--amber); padding:2px 8px; border-radius:10px; }
.actions { display:flex; align-items:center; gap:8px; }
.summary { font-size:13px; color:var(--muted); margin-right:6px; }
.btn { border:1px solid var(--line); background:#fff; color:var(--text); padding:7px 12px;
  border-radius:8px; cursor:pointer; font-size:13px; }
.btn:hover { background:#f0f2f5; }
.btn.primary { background:var(--indigo); color:#fff; border-color:var(--indigo); }
.btn.primary:hover { filter:brightness(1.07); }

.board { display:flex; gap:12px; padding:16px; overflow-x:auto; align-items:flex-start; min-height:calc(100vh - 58px); }
.board[hidden], .analytics[hidden] { display:none !important; }
.loading { color:var(--muted); padding:40px; }
.col { background:#eef0f3; border-radius:12px; width:230px; flex:0 0 230px; max-height:calc(100vh - 90px); display:flex; flex-direction:column; }
.col.handoff { opacity:.72; }
.col-head { padding:10px 12px; font-weight:700; font-size:13px; display:flex; justify-content:space-between; align-items:center;
  border-top:3px solid var(--slate); border-radius:12px 12px 0 0; }
.col-head .cnt { font-weight:600; color:var(--muted); font-size:12px; }
.col-head .opt { font-size:10px; color:var(--muted); font-weight:500; }
.col-body { padding:8px; overflow-y:auto; display:flex; flex-direction:column; gap:8px; }

.card { background:#fff; border:1px solid var(--line); border-radius:10px; padding:10px; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.04); }
.card:hover { box-shadow:0 3px 8px rgba(0,0,0,.10); transform:translateY(-1px); }
.card .biz { font-size:10px; font-weight:700; color:#fff; background:var(--slate); padding:1px 6px; border-radius:6px; }
.card .ttl { font-size:13px; font-weight:600; margin:6px 0 4px; line-height:1.35; }
.card .meta { display:flex; justify-content:space-between; font-size:11px; color:var(--muted); }
.card .dday { font-weight:700; }
.dday.urgent { color:#ef4444; } .dday.soon { color:var(--amber); } .dday.ok { color:var(--green); }

.biz-KR{background:#3b82f6}.biz-US{background:#ef4444}.biz-JP{background:#a855f7}
.biz-GELATO{background:#ec4899}.biz-GLOBAL{background:#14b8a6}.biz-B2B{background:#64748b}.biz-ETC{background:#94a3b8}

.modal-bg { position:fixed; inset:0; background:rgba(15,20,30,.45); display:flex; align-items:center; justify-content:center; z-index:50; }
.modal-bg[hidden] { display:none; }
.modal { background:#fff; border-radius:14px; width:440px; max-width:94vw; max-height:90vh; overflow:auto; }
.modal.wide { width:620px; }
.modal-head { display:flex; justify-content:space-between; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line); }
.modal-head h2 { font-size:16px; }
.x { border:none; background:none; font-size:18px; cursor:pointer; color:var(--muted); }
.form { padding:16px 18px; display:flex; flex-direction:column; gap:11px; }
.form label { font-size:12px; color:var(--muted); display:flex; flex-direction:column; gap:4px; }
.form input, .form select { border:1px solid var(--line); border-radius:8px; padding:8px; font-size:14px; color:var(--text); }
.form label.chk { flex-direction:row; align-items:center; gap:6px; font-size:13px; color:var(--text); }
.row2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.row4 { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.hint { color:var(--indigo); font-size:11px; }
.form-foot { display:flex; justify-content:flex-end; gap:8px; margin-top:6px; }

.detail-body { padding:16px 18px; }
.d-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:8px 16px; font-size:13px; margin-bottom:14px; }
.d-grid div span { color:var(--muted); margin-right:6px; }
.timeline { border-left:2px solid var(--line); margin:8px 0 14px; padding-left:14px; }
.tl-item { position:relative; padding:6px 0; font-size:13px; }
.tl-item::before { content:''; position:absolute; left:-21px; top:11px; width:9px; height:9px; border-radius:50%; background:var(--line); }
.tl-item.done::before { background:var(--green); } .tl-item.in_progress::before { background:var(--indigo); }
.tl-item .when { color:var(--muted); font-size:11px; margin-left:6px; }
.move-bar { display:flex; gap:8px; flex-wrap:wrap; border-top:1px solid var(--line); padding-top:12px; }
.section-t { font-size:12px; font-weight:700; color:var(--muted); margin:10px 0 4px; }
.toast { position:fixed; bottom:20px; left:50%; transform:translateX(-50%); background:#1f2733; color:#fff;
  padding:10px 18px; border-radius:8px; font-size:13px; z-index:99; opacity:0; transition:opacity .2s; }
.toast.show { opacity:1; }

/* 컬럼 헤더 카운트 진행/보류/드랍 */
.col-head { cursor:pointer; user-select:none; }
.cnt b { color:var(--text); } .c-hold { color:var(--amber); } .c-drop { color:#ef4444; }

/* 컬럼 접기 */
.col.collapsed { width:42px; flex:0 0 42px; background:#e7eaee; }
.col-head.vertical { flex-direction:column; align-items:center; gap:8px; height:100%;
  border-top:none; border-left:3px solid; border-radius:12px; padding:10px 4px; }
.col-head.vertical .vtxt { writing-mode:vertical-rl; white-space:nowrap; font-size:12px; }
.col-head.vertical .cnt { writing-mode:horizontal-tb; font-size:10px; }

/* 카드 상태 */
.card-top { display:flex; justify-content:space-between; align-items:center; }
.st-badge { font-size:10px; font-weight:700; padding:1px 6px; border-radius:6px; color:#fff; }
.st-hold, .st-badge.st-hold { background:var(--amber); }
.st-drop, .st-badge.st-dropped { background:#ef4444; }
.card-hold { background:#fffaf0; border-color:#fcd9a0; }
.card-drop { background:#fef2f2; border-color:#f3b4b4; opacity:.75; }
.card-drop .ttl { text-decoration:line-through; }

/* 상태 선택 바 */
.status-bar { display:flex; align-items:center; gap:6px; margin-bottom:10px; font-size:13px; }
.st-btn { border:1px solid var(--line); background:#fff; padding:5px 12px; border-radius:16px; cursor:pointer; font-size:12px; }
.st-btn.on { color:#fff; border-color:transparent; }
.st-btn.on.st-active { background:var(--green); } .st-btn.on.st-hold { background:var(--amber); } .st-btn.on.st-dropped { background:#ef4444; }
.reason-box { font-size:12px; padding:8px 10px; border-radius:8px; margin-bottom:12px; background:#f7f8fa; border-left:3px solid var(--muted); }
.reason-box.st-hold { border-left-color:var(--amber); background:#fffaf0; }
.reason-box.st-drop { border-left-color:#ef4444; background:#fef2f2; }
.reason-box .when { color:var(--muted); }
.muted { color:var(--muted); font-size:12px; }
.danger-o { margin-left:auto; border-color:#ef4444; color:#ef4444; }

/* 게이트 */
.gate-item { border:1px solid var(--line); border-radius:10px; padding:12px; margin-bottom:10px; }
.attach { display:flex; gap:6px; margin-top:8px; }
.attach input { flex:1; border:1px solid var(--line); border-radius:8px; padding:7px; font-size:13px; }

/* 탭 */
.tabs { display:flex; gap:4px; margin-left:14px; }
.tab { border:none; background:#eef0f3; color:var(--muted); padding:7px 16px; border-radius:8px; cursor:pointer; font-size:13px; font-weight:600; }
.tab.on { background:var(--indigo); color:#fff; }

/* 진도분석 */
.analytics { padding:18px; }
.an-wrap { max-width:1200px; margin:0 auto; }
.an-head { font-size:18px; font-weight:700; margin-bottom:14px; }
.kpi-row { display:grid; grid-template-columns:repeat(7,1fr); gap:10px; margin-bottom:16px; }
.kpi { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px; text-align:center; }
.kpi-v { font-size:26px; font-weight:800; }
.kpi-l { font-size:12px; color:var(--muted); margin-top:4px; }
.kpi.accent .kpi-v { color:var(--indigo); } .kpi.danger .kpi-v { color:#ef4444; } .kpi.warn .kpi-v { color:var(--amber); }
.an-grid { display:grid; grid-template-columns:1.6fr 1fr; gap:14px; margin-bottom:14px; }
.panel { background:#fff; border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:14px; }
.panel h3 { font-size:14px; margin-bottom:12px; }
.panel h3 .muted { font-weight:400; }
.bars { display:flex; flex-direction:column; gap:7px; }
.bar-row { display:grid; grid-template-columns:120px 1fr 64px; align-items:center; gap:8px; font-size:12px; }
.bar-row.dim { opacity:.55; }
.bar-label { text-align:right; color:var(--text); }
.bar-track { background:#eef0f3; border-radius:6px; height:18px; overflow:hidden; }
.bar-fill { height:100%; border-radius:6px; position:relative; min-width:2px; }
.bar-delay { position:absolute; right:0; top:0; height:100%; background:rgba(239,68,68,.85); }
.bar-num { font-size:12px; font-weight:600; }
.panel table { width:100%; border-collapse:collapse; font-size:12.5px; }
.panel th { text-align:left; color:var(--muted); font-weight:600; padding:6px 8px; border-bottom:1px solid var(--line); font-size:11px; }
.panel td { padding:7px 8px; border-bottom:1px solid #f0f2f5; }
.rowlink { cursor:pointer; } .rowlink:hover { background:#f6f8fb; }
@media (max-width:900px){ .kpi-row{grid-template-columns:repeat(3,1fr)} .an-grid{grid-template-columns:1fr} }