@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

/* 그 아래에 나머지 코드 붙여넣기 */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root{
  --bg:#f5f4f0;--surface:#fff;--border:#e8e6e1;
  --text:#1a1916;--muted:#8a8880;
  --title:#585858;
}

body{font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);min-height:100vh}

/* ── Header ── */
.header{
  background:var(--surface);border-bottom:1px solid var(--border);
  padding:13px 32px;display:flex;align-items:center;gap:14px;
  position:sticky;top:0;z-index:200;
}
.header h1{font-size:17px;font-weight:600;letter-spacing:-.3px}
.header-spacer{flex:1}
.status-dot{width:7px;height:7px;border-radius:50%;background:#4caf7d;flex-shrink:0}
.now-label{font-family:'DM Mono',monospace;font-size:12px;color:var(--muted)}

/* This Week badge */
.this-week-badge{
  font-size:11px;font-weight:600;letter-spacing:.3px;
  background:#e8f5ee;color:#2d6a4f;border:1px solid #b6dcc8;
  border-radius:20px;padding:3px 10px;
}

/* ── Custom Dropdown ── */
.dd-wrap{position:relative}
.dd-btn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bg);border:1px solid var(--border);border-radius:20px;
  padding:5px 10px 5px 13px;font-size:13px;font-weight:500;
  cursor:pointer;user-select:none;white-space:nowrap;
  transition:border-color .15s,background .15s;
}
.dd-btn:hover{border-color:#c0bdb8;background:#eeedea}
.dd-btn .dd-label-prefix{color:var(--muted);font-weight:400;margin-right:2px}
.dd-btn .dd-arrow{
  width:16px;height:16px;display:flex;align-items:center;justify-content:center;
  color:var(--muted);transition:transform .2s;flex-shrink:0;
}
.dd-wrap.open .dd-arrow{transform:rotate(180deg)}
.dd-menu{
  display:none;position:absolute;top:calc(100% + 6px);right:0;
  background:var(--surface);border:1px solid var(--border);border-radius:12px;
  box-shadow:0 8px 24px rgba(0,0,0,.10);min-width:140px;
  overflow:hidden;z-index:300;
}
.dd-wrap.open .dd-menu{display:block}
.dd-item{
  padding:9px 14px;font-size:13px;cursor:pointer;
  transition:background .1s;white-space:nowrap;
}
.dd-item:hover{background:var(--bg)}
.dd-item.active{font-weight:600;color:var(--text);background:#f0efeb}

/** ── Layout ── */
.main{max-width:880px;margin:0 auto;padding:22px 20px 60px}
.week-range{font-size:16px;color:#ffffff;font-weight:700;margin-bottom:18px}

/** ── Cards ── */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px}
.card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:18px 20px}
.card-label{font-size:12px;color:var(--muted);margin-bottom:4px}
.card-value{font-size:26px;font-weight:600;letter-spacing:-.5px}
.c-green{color:#2d6a4f}.c-orange{color:#c06010}.c-blue{color:#2a5fad}


/** ── Section ── */
.section {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 12px;
}

/* 메인 제목(ACTIVITY LOG, 카테고리별 분석, TIMELINE 등) 스타일 */
.section-title {
  font-size: 15px;           /* 글자 크기 확대 (기존 11px -> 15px) */
  font-weight: 800;           /* 글자 두께 아주 진하게 (기존 600 -> 800) */
  color: var(--title);         /* 색상을 흐린 회색에서 진한 검정색으로 변경 */
  letter-spacing: -0.2px;     /* 가독성을 위해 자간 살짝 조절 */
  margin-bottom: 18px;        /* 제목 아래 간격 확대 */
  display: block;
  text-transform: uppercase;  /* 대문자 유지 (원치 않으시면 이 줄 삭제) */
}



/** ── Daily bars ── */
.daily-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:14px}
.daily-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted)}
.leg-item{display:flex;align-items:center;gap:5px}
.leg-dot{width:8px;height:8px;border-radius:2px;flex-shrink:0}
.daily-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}
.day-col{display:flex;flex-direction:column;align-items:center;gap:3px}
.bar-wrap{width:100%;height:80px;display:flex;align-items:flex-end;justify-content:center;gap:2px}



.day-name{font-size:12px;color:var(--muted)}
.day-total{font-family:'DM Mono',monospace;font-size:10px;color:var(--muted)}
.day-work-label{font-size:9px;font-weight:600;color:#4caf7d;letter-spacing:.3px;text-transform:uppercase}
.day-pct{font-size:10px;color:var(--muted);min-height:14px}




/** ── Workload (hourly) ── */
.wl-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px}
.wl-mode-toggle{display:flex;border:1px solid var(--border);border-radius:20px;overflow:hidden;background:var(--bg)}
.wl-mode-btn{
  padding:4px 14px;font-size:12px;font-weight:500;cursor:pointer;
  color:var(--muted);transition:all .15s;user-select:none;
}
.wl-mode-btn.active{background:var(--text);color:#fff}
.wl-mode-btn:first-child{border-radius:20px 0 0 20px}
.wl-mode-btn:last-child{border-radius:0 20px 20px 0}
.wl-day-tabs{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:14px}
.wl-tab{
  padding:4px 11px;border-radius:20px;font-size:12px;font-weight:500;
  border:1px solid var(--border);cursor:pointer;background:var(--bg);color:var(--muted);
  transition:all .12s;
}
.wl-tab.active{background:var(--text);color:#fff;border-color:var(--text)}
.wl-meta{font-size:12px;color:var(--muted);margin-bottom:15px}
.wl-chart{position:relative;width:100%}
.wl-y-labels{
  position:absolute;left:0;top:0;bottom:20px;
  display:flex;flex-direction:column-reverse;justify-content:space-between;
  font-size:10px;color:var(--muted);font-family:'DM Mono',monospace;
  pointer-events:none;width:28px;
}
.wl-area{margin-left:34px}
.wl-grid-lines{position:absolute;left:0;right:0;top:0;bottom:0;pointer-events:none}
.wl-grid-line{position:absolute;left:0;right:0;border-top:1px dashed var(--border)}
.wl-bars{
  display:flex;align-items:flex-end;gap:2px;
  height:120px;position:relative;
}
.wl-bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:0}



.ds-seg{
  width:16px;
  border-radius:0
  ;position:relative;
  cursor:default;
}


.wl-seg {
  width: 70%;
  position: relative;
  cursor: default;
  transition: opacity .15s;
  border-radius: 0 !important; /* 추가: 중간 조각 사이의 틈 제거 */
}


.tl-seg {
  height: 100%;
  position: relative;
  cursor: default;
}









/** ── 공통 말풍선 (Daily Summary & Workload & Timeline 공유) ── */
/* 1. 레이어 우선순위 핵심: 마우스 올린 요소(부모)를 맨 앞으로 */
.ds-seg:hover,
.wl-seg:hover, 
.tl-seg:hover {
  z-index: 100; /* 마우스 올린 요소를 다른 요소들보다 위에 표시하여 말풍선이 가려지지 않도록 함 */
  position: relative; /* z-index가 적용되려면 position이 relative, absolute, fixed 중 하나여야 함 */
  filter: brightness(1.1); /* 마우스 올렸을 때 막대 색을 살짝 밝게 해서 반응 피드백 주기 */
}

/* 2. 말풍선 핵심: 위치와 내용 출력 */
.ds-seg:hover::after,
.wl-seg:hover::after, 
.tl-seg:hover::after{
  content: attr(data-tip);    /* 데이터 출력 */
  position: absolute;
  bottom: 100%;               /* 막대 바로 위 */
  left: 50%;
  transform: translateX(-50%); /* 중앙 정렬 */
  
  /* 시인성을 위한 최소 디자인 */
  font-size: 11px;
  background: #1a1916;
  opacity: 0.8;  /* 투명도 */
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;        /* 줄바꿈 방지 */
  pointer-events: none       /* 마우스 간섭 방지 (중요) */
}




/** ── Daily bars & Workload 공통 스타일 조정 ── */
/* 세그먼트들을 세로로 쌓아주는 컨테이너 */
.ds-stack {
  display: flex;
  flex-direction: column-reverse; /* 아래에서부터 위로 쌓음 */
  align-items: center;
  width: 16px;
  height: 100%;
}

.wl-stack{
  width:100%;
  display:flex;
  flex-direction:column-reverse;
  align-items:center;
  height:120px;
  justify-content:flex-start;
  position:relative
}

/* 기둥의 맨 상단 조각만 곡률 적용 */
/* ds-stack은 역순(column-reverse)이므로 마지막 자식(:last-child)이 시각적 맨 위입니다. */
.ds-stack .ds-seg:last-child,
.wl-stack .wl-seg:last-child {
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
}

/* 홀로 있는 막대 (카테고리가 하나만 있는 막대) */
/* 스택에 포함되지 않은 단독 막대도 윗부분을 둥글게 처리합니다. */
.ds-seg:not(.ds-stack .ds-seg) {
  border-top-left-radius: 5px !important;
  border-top-right-radius: 5px !important;
}




.wl-x-labels{display:flex;gap:2px;margin-top:4px}
.wl-x-label{flex:1;text-align:center;font-size:9px;color:var(--muted);font-family:'DM Mono',monospace}
.wl-legend{display:flex;flex-wrap:wrap;gap:12px;font-size:12px;color:var(--muted);margin-top:12px}
.wl-note{font-size:11px;color:var(--muted);margin-top:8px}

/* ── Timeline ── */
.tl-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
}

.tl-bar {
  height: 20px;
  border-radius: 6px;
  display: flex;
  margin-bottom: 10px;
  /* 툴팁을 보여주기 위해 overflow를 열어두되, 다른 레이아웃에 영향 없게 설정 */
  overflow: visible !important; 
  position: relative;
  background: var(--border);
}





/* 바의 양 끝 둥근 모양 유지 (텍스트에 영향 없음) */
.tl-seg:first-child { border-top-left-radius: 6px; border-bottom-left-radius: 6px; }
.tl-seg:last-child { border-top-right-radius: 6px; border-bottom-right-radius: 6px; }

/* 검은색 말풍선 툴팁 (Workload와 동일한 스타일) */
.tl-seg:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: #1a1916;
  color: #fff;
  font-size: 11px;
  font-family: 'DM Sans', sans-serif; /* 폰트가 변하지 않도록 강제 지정 */
  font-weight: 400;
  padding: 4px 8px;
  border-radius: 5px;
  white-space: nowrap;
  z-index: 999;
  pointer-events: none;
}

.tl-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}

.tl-item {
  display: flex;
  align-items: center;
  gap: 5px;
}

.tl-dot {
  width: 10px;  /* 크기를 살짝 키워 3D 효과가 잘 보이게 */
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  margin-right: 6px;
  vertical-align: middle;
  /* 핵심: 구형 그라데이션과 내부 그림자 */
  box-shadow: 
    inset 2px 2px 3px rgba(255,255,255,0.5), /* 왼쪽 위 밝은 빛 */
    inset -2px -2px 3px rgba(0,0,0,0.3),      /* 오른쪽 아래 어둠 */
    0 1px 2px rgba(0,0,0,0.2);               /* 외부 바닥 그림자 */
}


/* ── Tables ── */
.data-table{width:100%;border-collapse:collapse}
.data-table th{font-size:11px;color:var(--muted);font-weight:500;text-align:left;padding:5px 0;border-bottom:1px solid var(--border)}
.data-table th:not(:first-child){text-align:right}
.data-table td{padding:9px 0;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
.data-table td:not(:first-child){text-align:right}
.data-table tr:last-child td{border-bottom:none}
.cat-name-cell{display:flex;align-items:center;gap:7px}
.cat-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0}
.share-wrap{display:inline-flex;align-items:center;gap:6px}
.share-bar{width:70px;height:4px;background:var(--border);border-radius:2px;overflow:hidden;display:inline-block;vertical-align:middle}
.share-fill{height:100%;border-radius:2px}

/* ── Log ── */
.log-filters{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:12px}
.filter-pill{
  padding:4px 12px;border-radius:20px;font-size:12px;font-weight:500;
  border:1px solid var(--border);cursor:pointer;background:var(--bg);color:var(--muted);transition:all .15s;
}
.filter-pill.active{background:var(--text);color:#fff;border-color:var(--text)}
.log-f{font-family:'DM Mono',monospace;font-size:12px;max-width:380px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cat-badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--muted)}
.mono{font-family:'DM Mono',monospace;font-size:12px}

/* ── Config ── */
.config-toggle{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;cursor:pointer;color:var(--muted);user-select:none}
.config-toggle:hover{color:var(--text)}
.toggle-arrow{transition:transform .2s;display:inline-block}
.config-body{display:none;margin-top:14px}
.config-body.open{display:block}

/* 카테고리 버킷 그리드 */
.config-cats{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 14px;
}

/* 개별 버킷 */
.cfg-bucket {
  background: var(--bg);
  border: 2px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px;
  min-height: 90px;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.cfg-bucket.drag-over {
  border-color: var(--bucket-color, #4a90d9);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bucket-color, #4a90d9) 20%, transparent);
  transform: translateY(-2px);
}

.cfg-cat-head{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.cfg-color{width:12px;height:12px;border-radius:3px;flex-shrink:0}
.cfg-color-pick{
  width:14px;height:14px;border-radius:4px;flex-shrink:0;
  border:none;padding:0;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  outline:none;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.15);
  transition:transform .1s,box-shadow .1s;
}
.cfg-color-pick:hover{transform:scale(1.15);box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.15)}
.cfg-color-pick::-webkit-color-swatch-wrapper{padding:0;border-radius:4px}
.cfg-color-pick::-webkit-color-swatch{border:none;border-radius:4px}
.cfg-name{font-size:13px;font-weight:600;flex:1;border-radius:5px;padding:1px 4px;margin:-1px -4px;outline:none;min-width:40px;transition:background .12s,box-shadow .12s}
.cfg-name[contenteditable]:hover{background:rgba(0,0,0,.05)}
.cfg-name[contenteditable]:focus{background:rgba(0,0,0,.07);box-shadow:0 0 0 2px rgba(0,0,0,.12);cursor:text}
.cfg-del{background:none;border:none;cursor:pointer;color:var(--muted);font-size:18px;line-height:1;padding:0}
.cfg-del:hover{color:#c0392b}

/* 버킷 내부 칩 존 */
.cfg-chip-zone {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  min-height: 28px;
}

/* 공통 칩 스타일 */
.cfg-chip {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 12px;
  border: 1px solid var(--border);
  cursor: grab;
  user-select: none;
  background: var(--surface);
  color: var(--muted);
  transition: opacity .15s, transform .1s, box-shadow .1s;
  white-space: nowrap;
}
.cfg-chip:active { cursor: grabbing; }
.cfg-chip.dragging {
  opacity: 0.4;
  transform: scale(0.95);
}
.cfg-chip:hover {
  box-shadow: 0 2px 6px rgba(0,0,0,.12);
  transform: translateY(-1px);
}

/* 미분류 풀 칩은 연한 배경 */
.cfg-chip-pool {
  background: #f0efe9;
  border: 1.5px solid #a8a5a0;
  color: #3a3835;
}

/* 미분류 풀 섹션 */
.cfg-pool-section {
  margin-bottom: 14px;
}
.cfg-pool-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.cfg-pool-zone {
  background: var(--bg);
  border: 2px dashed var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  min-height: 46px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  transition: border-color .15s, background .15s;
}
.cfg-pool-zone.drag-over {
  border-color: #aaa;
  background: #eeedea;
}
.cfg-pool-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  align-self: center;
}

.add-row{display:flex;gap:8px;margin-top:4px}
.cfg-section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 18px;
}
.cfg-section-head .section-title {
  margin-bottom: 0;
}
.import-pc-row {
  position: relative;
}
.import-dd-wrap {
  position: relative;
  display: inline-block;
}
.btn-import-pc {
  padding: 5px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  cursor: pointer;
  background: var(--bg);
  color: var(--muted);
  border: 1px solid var(--border);
  transition: all .15s;
  display: inline-flex;
  align-items: center;
}
.btn-import-pc:hover {
  background: var(--text);
  color: #fff;
  border-color: var(--text);
}
.import-dd-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  min-width: 180px;
  overflow: hidden;
  z-index: 300;
}
.import-dd-wrap.open .import-dd-menu { display: block; }
.import-dd-item {
  padding: 9px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background .1s;
  white-space: nowrap;
}
.import-dd-item:hover { background: var(--bg); }
.add-input{flex:1;border:1px solid var(--border);border-radius:8px;padding:6px 10px;font-size:13px;font-family:inherit;background:var(--surface);color:var(--text);outline:none}
.add-input:focus{border-color:var(--text)}
.color-pick{width:34px;height:34px;border-radius:8px;border:1px solid var(--border);padding:2px;cursor:pointer}
.btn-add{padding:0 14px;border-radius:8px;font-size:13px;font-family:inherit;font-weight:500;cursor:pointer;background:var(--text);color:#fff;border:none;height:34px}
.btn-add:hover{opacity:.8}

.btn-rand-color {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  position: relative; /* tooltip용 */
}
.btn-rand-color:hover { background: var(--hover); }
.btn-rand-color:hover::after {
  content: attr(data-tip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  background: #1a1916;
  opacity: 0.8;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  white-space: nowrap;
  margin-bottom: 4px;
}

.cfg-hint{font-size:11px;color:var(--muted);margin-top:8px}

/* ── Page Tabs ── */
.page-tabs{
  display:flex;border-bottom:1px solid var(--border);
  background:var(--surface);padding:0 32px;
  position:sticky;top:57px;z-index:190;
}
.page-tab{
  padding:11px 18px;font-size:13px;font-weight:500;cursor:pointer;
  color:var(--muted);border-bottom:2px solid transparent;
  margin-bottom:-1px;transition:color .15s,border-color .15s;user-select:none;
}
.page-tab:hover{color:var(--text)}
.page-tab.active{color:var(--text);border-bottom-color:var(--text)}
.tab-panel{display:none}
.tab-panel.active{display:block}


/* Activity Log */
.log-cat-dd-wrap { position: relative; display: inline-block; }
.log-cat-dd-trigger { cursor: pointer; user-select: none; transition: opacity .15s; }
.log-cat-dd-trigger:hover { opacity: .75; }
.log-cat-dd-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,.10);
  min-width: 140px;
  overflow: hidden;
  z-index: 300;
}
.log-cat-dd-wrap.open .log-cat-dd-menu { display: block; }
.log-cat-dd-item {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  font-size: 13px;
  cursor: pointer;
  transition: background .1s;
  white-space: nowrap;
}
.log-cat-dd-item:hover { background: var(--bg); }
.log-cat-dd-ignore { border-top: 1px solid var(--border); color: #c0392b; }
.log-row-unclassified td { color: var(--muted); }
/* 빈 행의 높이를 고정하여 테이블 모양 유지 */
.data-table tr.empty-row td {
  height: 41px; /* 기존 td와 비슷한 높이 */
  border-bottom: 1px solid var(--border);
  color: transparent;
  user-select: none;
}

/* 마지막 줄 보더 정리 */
.data-table tr:last-child td {
  border-bottom: none;
}
/* ── Work/Idle 토글 ── */
.cfg-type-toggle {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 20px;
  cursor: pointer;
  user-select: none;
  transition: background 0.2s, color 0.2s;
  margin-left: auto;
  margin-right: 4px;
}
.cfg-type-toggle.work {
  background: #d4edda;
  color: #1a7a3a;
  border: 1px solid #a8d5b5;
}
.cfg-type-toggle.idle {
  background: #ffe5cc;
  color: #b85c00;
  border: 1px solid #f5c28a;
}

/* ── 시스템 분류 드롭다운 옵션 ── */
.log-cat-dd-system {
  color: #5b8dee;
  font-weight: 500;
}
.log-cat-dd-system:hover { background: #eef3ff; }

/* ── 소분류 드롭다운 그룹 헤더 ── */
.log-cat-dd-group-label {
  padding: 6px 14px 3px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
  color: var(--muted);
  pointer-events: none;
  user-select: none;
}
.log-cat-dd-group-label:not(:first-child) {
  border-top: 1px solid var(--border);
  margin-top: 3px;
  padding-top: 8px;
}

/* 소분류 드롭다운 색상 도트 */
.log-cat-dd-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  display: inline-block;
}

/* 시스템 분류 위 구분선 */
.log-cat-dd-divider {
  border-top: 1px solid var(--border);
  margin: 3px 0;
}

/* 드롭다운 메뉴 최대 높이 + 스크롤 (소분류 많을 때) */
.log-cat-dd-menu {
  max-height: 300px;
  overflow-y: auto;
}

/* ── 기타(3분 미만) 펼침 ── */
.etc-summary-row { cursor: pointer; }
.etc-chevron { margin-left: 4px; vertical-align: middle; transition: transform .2s; }
.etc-detail-body {
  padding: 6px 14px 10px;
  background: var(--bg);
  border-bottom: 1px solid var(--border);
}
.etc-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 0;
  border-bottom: 1px solid var(--border);
  font-size: 13px;
}
.etc-item:last-child { border-bottom: none; }
.etc-item-name {
  flex: 1;
  color: var(--muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.etc-item-min { color: var(--muted); min-width: 34px; text-align: right; }


/* ════════════════════════════════════════
   PC 히트맵 탭 스타일
   ════════════════════════════════════════ */

/* ── 헤더 행 ── */
.hm-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

/* ── PC 필터 버튼 ── */
.hm-pc-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.hm-pc-btn {
  padding: 4px 13px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  border: 1.5px solid;
  background: transparent;
  transition: all .15s;
  letter-spacing: .2px;
}
.hm-pc-btn:hover { opacity: .8; transform: translateY(-1px); }
.hm-pc-btn--on { box-shadow: 0 2px 8px rgba(0,0,0,.15); }

/* ── 범례/메타 행 ── */
.hm-meta-row {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: 12px;
  color: var(--muted);
}
.hm-meta-pcs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}
.hm-leg-pc {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: var(--text);
  font-weight: 500;
}
.hm-leg-dot {
  width: 10px;
  height: 10px;
  border-radius: 3px;
  flex-shrink: 0;
}
.hm-meta-intensity {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
}

/* ── 스크롤 래퍼 (가로 스크롤 지원) ── */
.hm-scroll-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 4px;
}
.hm-table-wrap {
  min-width: 680px; /* 24셀 × 최소 너비 보장 */
}

/* ── X축 헤더 + 합계 행의 공통 행 구조 ── */
.hm-x-row {
  display: flex;
  align-items: stretch;
}

/* 요일 레이블 칸 */
.hm-y-label-cell {
  width: 36px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 8px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: .3px;
}

/* X축 시간 레이블 */
.hm-x-labels {
  flex: 1;
  display: flex;
}
.hm-x-cell {
  flex: 1;
  text-align: center;
  font-size: 9px;
  font-family: 'DM Mono', monospace;
  color: var(--muted);
  padding-bottom: 4px;
  min-width: 0;
}

/* 행 우측 합계 칸 */
.hm-row-total-cell {
  width: 52px;
  flex-shrink: 0;
  text-align: right;
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-left: 6px;
}
.hm-col-header {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .3px;
  color: var(--muted);
  text-transform: uppercase;
}

/* ── 24셀 컨테이너 ── */
.hm-cells {
  flex: 1;
  display: flex;
  gap: 2px;
}

/* ── 히트맵 셀 ── */
.hm-cell {
  flex: 1;
  height: 28px;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--border);
  overflow: hidden;
  display: flex;
  flex-direction: column; /* PC별 세로 분할 */
  cursor: default;
  transition: transform .1s, box-shadow .1s;
  min-width: 0;
  position: relative;
}
.hm-cell:not(.hm-cell--empty):hover {
  transform: scaleY(1.12);
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
  z-index: 10;
}
.hm-cell--empty {
  background: var(--bg);
  border-color: var(--border);
  opacity: .5;
}

/* PC별 세로 분할 세그먼트 */
.hm-cell-seg {
  /* flex 값은 JS에서 inline으로 설정 */
  min-height: 2px;
  transition: opacity .15s;
}

/* ── 주말 행 배경 ── */
.hm-row-weekend .hm-cell--empty {
  background: #f0efe9;
}
.hm-row-weekend .hm-y-label-cell {
  color: #b88a50;
}

/* ── 요일 행 간격 ── */
.hm-x-row + .hm-x-row {
  margin-top: 3px;
}

/* ── 합계 행 ── */
.hm-total-row {
  display: none;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}
.hm-col-total-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .3px;
  color: var(--muted);
  text-transform: uppercase;
}
.hm-col-totals { display: none; }
.hm-col-total {
  font-size: 9px;
  color: var(--muted);
  padding-top: 2px;
  padding-bottom: 0;
}

/* ── 하단 PC별 요약 막대 ── */
.hm-summary {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.hm-sum-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .3px;
  text-transform: uppercase;
  margin-bottom: 12px;
}
.hm-sum-rows {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.hm-sum-row {
  display: flex;
  align-items: flex-end;
  gap: 10px;
}
.hm-sum-pc-label {
  width: 90px;
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.hm-sum-bar-track {
  flex: 1;
  height: 8px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
}

.hm-sum-bar-wi {
  height: 100%;
  display: flex;
  border-radius: 4px;
  overflow: hidden;
  transition: width .4s ease;
}
.hm-sum-bar-work {
  height: 100%;
  transition: width .3s ease;
}
.hm-sum-bar-idle {
  height: 100%;
  opacity: 0.28;
  transition: width .3s ease;
}
.hm-sum-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
  width: 110px;
}
.hm-sum-val {
  font-size: 12px;
  color: var(--muted);
  line-height: 1.2;
}
.hm-sum-wi-pct {
  font-size: 10px;
  color: var(--muted);
  display: flex;
  gap: 3px;
  align-items: center;
}
.hm-wi-work { font-weight: 600; }
.hm-wi-idle { opacity: 0.6; }
.hm-wi-sep  { opacity: 0.4; }


/* ── 마우스 따라다니는 툴팁 ── */
.hm-tooltip {
  display: none;
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  background: #1a1916;
  color: #fff;
  font-size: 11px;
  font-family: 'DM Mono', monospace;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(0,0,0,.25);
  opacity: .93;
}