/* ============================================================
   worknote.css — 작업 노트 (완료 기록 캘린더, v93)
   설계 「20 작업 노트」 src/worknote.css 포팅 — #h2cal · .wn-modal 범위
   ============================================================ */

#h2cal, .wn-modal {
  --panel: #ffffff; --panel-sub: #fbfaf2; --panel-alt: #f6f5ec;
  --line: #dcd8c0; --line-soft: #e8e5d1; --line-faint: #edebdb;
  --text: #1c2430; --text-mid: #3a4030; --sub: #6b7160; --muted: #98a08a;
  --faint: #c6c8b4; --slate: #4f5644;
  --accent: #5a6636; --accent-hover: #4d5434; --accent-fg: #4d5434;
  --accent-bg: #ecead7; --accent-bg-2: #f5f4e7; --accent-line: #c9c5a1;
  --ok: #4d7c2f; --ok-fg: #3f6626; --ok-bg: #e9f0e0; --ok-line: #cbdcb6;
  --warn: #b8860b; --warn-fg: #8f6708; --warn-bg: #faf1dc; --warn-line: #e6d3a3;
  --danger: #a8442a; --danger-fg: #8c3721; --danger-bg: #f7e7e1;
  --neutral-bg: #eceade; --r-pill: 99px;
  --fs-sm: 11.5px; --fs-xs: 10.5px; --fs-body: 12.5px;
  color: var(--text);
}

#h2cal .wn-bar { display: flex; align-items: center; gap: 10px; padding: 12px 16px;
          border-bottom: 1px solid var(--line-soft); flex-wrap: wrap; }
#h2cal .wn-nav { width: 28px; height: 28px; border: 1px solid var(--line); border-radius: 7px;
          background: var(--panel); font: inherit; color: var(--slate); cursor: pointer; }
#h2cal .wn-nav:hover { background: #f6f5ec; }
#h2cal .wn-seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
#h2cal .wn-seg button { padding: 5px 11px; border: 0; font: inherit; font-size: 12.5px; font-weight: 600;
                 cursor: pointer; background: var(--panel); color: var(--sub); }
#h2cal .wn-seg button.is-on { background: var(--accent); color: #fff; }
#h2cal .wn-btn { display: inline-flex; align-items: center; gap: 5px; padding: 6px 12px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  font: inherit; font-size: 11.5px; font-weight: 700; color: var(--text); cursor: pointer; white-space: nowrap; }
#h2cal .wn-btn:hover { background: #f6f5ec; }
#h2cal .wn-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
#h2cal .wn-btn--primary:hover { background: var(--accent-hover); }

/* 월간 격자 */
#h2cal .wn-dow { display: grid; grid-template-columns: repeat(7, 1fr); border-bottom: 1px solid var(--line-soft); }
#h2cal .wn-dow span { padding: 7px 0; text-align: center; font-size: var(--fs-sm); font-weight: 700; }
#h2cal .wn-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
#h2cal .wn-cell { display: block; text-align: left; min-height: 96px; border: 0;
           border-right: 1px solid var(--line-faint); border-bottom: 1px solid var(--line-faint);
           padding: 5px 6px; font: inherit; cursor: pointer; background: var(--panel); min-width: 0; }
#h2cal .wn-cell:hover { background: var(--panel-alt); }
#h2cal .wn-cell.is-sel { box-shadow: inset 0 0 0 1.5px var(--accent); background: #f3f2e6; }
#h2cal .wn-cell.is-out { background: var(--panel-sub); }
#h2cal .wn-d { font-size: var(--fs-sm); font-weight: 700; font-variant-numeric: tabular-nums; }
#h2cal .wn-today { font-size: 10.5px; font-weight: 800; color: #fff; background: var(--accent);
            border-radius: var(--r-pill); padding: 0 5px; }
#h2cal .wn-done { margin-left: auto; font-size: var(--fs-xs); font-weight: 800; color: var(--ok-fg);
           background: var(--ok-bg); border-radius: var(--r-pill); padding: 1px 6px; white-space: nowrap; }

/* 물동량 칩 */
#h2cal .wn-vol { display: flex; gap: 3px; margin-top: 4px; }
#h2cal .wn-vol--m { width: 50%; min-width: 74px; }
#h2cal .wn-vol--w { width: 70%; min-width: 84px; }
#h2cal .wn-vol span { flex: 1; min-width: 0; display: flex; align-items: baseline; justify-content: center;
               gap: 1px; border-radius: 5px; padding: 1px 2px; }
#h2cal .wn-vol b { font-size: 10.5px; font-variant-numeric: tabular-nums; }
#h2cal .wn-vol i { font-size: 10.5px; font-weight: 700; font-style: normal; }
#h2cal .wn-vol--out { background: var(--accent-bg); color: var(--accent-fg); }
#h2cal .wn-vol--in  { background: var(--ok-bg);     color: var(--ok-fg); }

#h2cal .wn-ev { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; min-width: 0; }
#h2cal .wn-ev span { font-size: var(--fs-xs); font-weight: 700; border-radius: 5px; padding: 2px 5px;
              white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#h2cal .wn-more { font-size: var(--fs-xs); color: var(--muted); font-weight: 700; }

/* 주간 */
#h2cal .wn-week { display: grid; grid-template-columns: repeat(7, 1fr); }
#h2cal .wn-wcell { display: block; text-align: left; min-height: 260px; border: 0;
            border-right: 1px solid var(--line-faint); padding: 8px; font: inherit;
            cursor: pointer; background: var(--panel); min-width: 0; }
#h2cal .wn-wcell:hover { background: var(--panel-alt); }
#h2cal .wn-wcell.is-sel { box-shadow: inset 0 0 0 1.5px var(--accent); background: #f3f2e6; }

/* 일간 타임라인 */
#h2cal .wn-hour { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 10px;
           border-top: 1px solid var(--line-faint); min-height: 44px; padding: 6px 0; }
#h2cal .wn-hour__t { font-size: 11.5px; color: var(--muted); font-variant-numeric: tabular-nums; }

/* 하단 선택 바 */
#h2cal .wn-selbar { display: flex; align-items: center; gap: 9px; padding: 11px 16px;
             border-top: 1px solid var(--line-soft); background: var(--panel-sub); flex-wrap: wrap; }

/* 상세 모달 */
.wn-modal { position: fixed; inset: 0; z-index: 110; background: rgba(16, 24, 40, .44);
            display: flex; align-items: flex-start; justify-content: center; padding: 40px 20px; overflow-y: auto;
            font-size: 13.5px; }
.wn-card { width: 640px; max-width: 100%; max-height: calc(100vh - 80px); display: flex; flex-direction: column;
           background: var(--panel); border-radius: 14px; box-shadow: 0 30px 70px rgba(16, 24, 40, .32); overflow: hidden; }
.wn-card__head { flex: none; display: flex; align-items: flex-start; gap: 11px;
                 padding: 16px 18px 14px; border-bottom: 1px solid var(--line-soft); }
.wn-card__body { flex: 1; min-height: 0; overflow-y: auto; padding: 15px 18px 18px; }
.wn-card__foot { flex: none; display: flex; align-items: center; gap: 9px;
                 padding: 13px 18px 16px; border-top: 1px solid var(--line-soft); flex-wrap: wrap; }
.wn-modal .wn-x { width: 24px; height: 24px; border: 0; border-radius: 6px; background: none;
                  font: inherit; font-size: 12.5px; color: var(--faint); cursor: pointer; padding: 0; }
.wn-modal .wn-x:hover { background: #f4f3e8; color: var(--danger); }
.wn-modal .wn-btn { display: inline-flex; align-items: center; gap: 5px; padding: 7px 13px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--text); cursor: pointer; white-space: nowrap; }
.wn-modal .wn-btn:hover { background: #f6f5ec; }
.wn-modal .wn-btn--primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.wn-modal .wn-btn--primary:hover { background: var(--accent-hover); }

.wn-kpi { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.wn-kpi > div { border: 1px solid var(--line-soft); border-radius: 11px; padding: 11px 12px; min-width: 0; }
.wn-kpi span { display: block; font-size: 11.5px; color: var(--sub); font-weight: 600; }
.wn-kpi b { display: block; font-size: 20px; font-variant-numeric: tabular-nums; margin-top: 4px; letter-spacing:-.4px; }

.wn-log { display: flex; align-items: flex-start; gap: 9px; padding: 9px 11px;
          border: 1px solid var(--line-soft); border-radius: 10px; background: var(--panel-sub); min-width: 0; }
.wn-file { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
           border: 1px solid var(--accent-line); border-radius: 7px; background: var(--accent-bg-2);
           font: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--accent-fg);
           cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
           text-decoration: none; }
.wn-file:hover { border-color: var(--accent); text-decoration: none; }

.wn-tag { padding: 5px 11px; border: 1px solid var(--line); border-radius: var(--r-pill);
          background: var(--panel); font: inherit; font-size: 11.5px; font-weight: 600;
          color: var(--sub); cursor: pointer; white-space: nowrap; }
.wn-tag.is-on { background: var(--accent-bg); border-color: var(--accent-line); color: var(--accent-fg); }

.wn-scope { padding: 4px 11px; border: 1.5px solid var(--line); border-radius: var(--r-pill);
            background: var(--panel); font: inherit; font-size: 11.5px; font-weight: 600;
            color: var(--sub); cursor: pointer; white-space: nowrap; }
.wn-scope.is-on { font-weight: 700; }
.wn-memo-ta { width: 100%; padding: 11px 12px; border: 1.5px solid var(--line); border-radius: 10px;
              outline: none; font: inherit; font-size: var(--fs-body); line-height: 1.7; resize: vertical;
              color: var(--text); box-sizing: border-box; background: var(--panel); }
.wn-memo-ta:focus { border-color: var(--accent); }

/* ── v208 항목별 묶어보기 (시안 「20 작업 노트」 그룹 헤더 · 그룹 행) ── */
#h2cal .wn-gh { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 12px;
                border: 0; font: inherit; text-align: left; cursor: pointer; }
#h2cal .wn-gh:hover { background: #f5f4e7 !important; }
#h2cal .wn-gr { display: flex; align-items: flex-start; gap: 10px; padding: 8px 12px 8px 36px;
                border-bottom: 1px solid #f2f1e4; min-width: 0; }
#h2cal .wn-gr:last-child { border-bottom: 0; }
#h2cal .wn-file { display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px;
                  border: 1px solid var(--accent-line); border-radius: 7px; background: var(--accent-bg-2);
                  font: inherit; font-size: var(--fs-xs); font-weight: 700; color: var(--accent-fg); }
/* 주 보기 항목 요약 칩 — 아이콘·이름·건수 한 줄 */
#h2cal .wn-wcell .wn-ev span { display: flex; align-items: center; }
/* 월 보기 물동량 칩 — 라벨이 중간에서 줄바꿈되지 않게 (시안 .wn-vol--m 갱신) */
#h2cal .wn-vol--m { display: flex; gap: 3px; width: 100%; min-width: 0; }
#h2cal .wn-vol--m > span { flex: 1; min-width: 0; white-space: nowrap; padding: 1px 3px; }