/*
 * 데일리로그 탭 전용 보강 스타일 (지시서 06에서 처음 도입, 지시서 07에서 공용 토큰 값과 함께 갱신).
 * `.dl-v2`로 스코프하여 정산·매매일지 등 다른 탭이 재사용하는 동일 클래스(.hg-card, .hg-checkbox,
 * .hg-segment, .hg-check-row 등)의 기본값(components.css)과 다른 값이 필요한 경우만 여기 남긴다.
 * 예산/정산 카드(.receipt-*, .cat-box, .type-pill, .daily-input-* 등 우리.zip 이식분)는 다루지 않는다.
 * 데일리로그의 캘린더 모달은 고유 id(#hg-cal-overlay)로만 스코프해 정산/매매일지 달력에 영향 없게 한다.
 */

.dl-v2.hg-page { padding: 16px 16px 40px; }

/* ── 카드 공통 ── */
.dl-v2 .hg-card {
  background: var(--card);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  padding: var(--space-card-pad);
  margin-bottom: var(--space-card-gap);
}
.dl-v2 section:not(.hg-card) { margin-bottom: var(--space-card-gap); }
.dl-v2 .hg-card-title {
  font-size: var(--fs-title);
  font-weight: var(--fw-title);
  color: var(--text-secondary);
  letter-spacing: -0.1px;
  margin-bottom: 10px;
}

/* ── 날짜 탐색 ── */
.dl-v2 .hg-datenav { padding: 2px 2px 14px; }
.dl-v2 .hg-datenav-label {
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  color: var(--text-primary);
}
.dl-v2 .hg-datenav-label.sat { color: var(--accent); }
.dl-v2 .hg-datenav-label.sun { color: var(--danger); }
.dl-v2 .hg-btn-icon {
  background: var(--card);
  border: 0.5px solid var(--border);
  color: var(--text-secondary);
}
.dl-v2 .hg-btn-icon.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

/* 오전/오후, 손글씨/타자 세그먼트, 타자/손글씨 선택 칩 — 지시서 08 2번: 앱 전체 공용 스펙(components.css)을
   그대로 쓴다. 예전엔 데일리로그만 accent 배경으로 다르게 오버라이드했지만, 정산 탭과 다르게 보이는
   원인이라 제거했다. */

/* ── 잠금 바 ── */
.dl-v2 .hg-lock-bar { padding: 14px 2px; }
.dl-v2 .hg-lock-badge { color: var(--text-secondary); font-weight: 500; font-size: var(--fs-caption); }
.dl-v2 .hg-lock-bar .hg-btn.hg-btn-ghost {
  background: transparent;
  color: var(--text-secondary);
  border: 0.5px solid var(--border);
  font-weight: 500;
}

/* ── 인풋류 ── */
.dl-v2 .hg-time-input,
.dl-v2 .hg-textarea,
.dl-v2 .hg-check-input,
.dl-v2 .hg-duration-input {
  border: 0.5px solid var(--border);
  border-radius: var(--radius-input);
  background: var(--bg);
  color: var(--text-primary);
  font-weight: 500;
}
.dl-v2 .hg-time-input { font-size: 18px; font-weight: 500; }
.dl-v2 .hg-textarea,
.dl-v2 .hg-check-input { font-size: var(--fs-body); font-weight: 400; }
.dl-v2 .hg-time-input:focus,
.dl-v2 .hg-textarea:focus,
.dl-v2 .hg-check-input:focus,
.dl-v2 .hg-duration-input:focus {
  border-color: var(--accent);
  background: #fff;
}
.dl-v2 .hg-time-input:disabled { background: #fff; }
.dl-v2 .hg-todo-duration-label { color: var(--text-tertiary); font-weight: 500; }
.dl-v2 .hg-todo-duration-label.locked-red { color: var(--danger); }

/* ── 버튼 ── */
.dl-v2 .hg-btn { font-weight: 500; }
.dl-v2 .hg-btn-primary { background: var(--accent); color: #fff; }
.dl-v2 .hg-btn-ghost-sm {
  color: var(--text-tertiary);
  border: 1px dashed var(--border);
}

/* ── 체크박스 (레퍼런스 1 스타일) ── */
.dl-v2 .hg-checkbox {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-chip);
  border: 1.5px solid var(--border);
  background: #fff;
}
.dl-v2 .hg-checkbox.checked {
  background: var(--accent);
  border-color: var(--accent);
}
.dl-v2 .hg-check-row { border-bottom: 0.5px solid var(--border); padding: 10px 0; }
.dl-v2 .hg-check-row:last-child { border-bottom: none; }
.dl-v2 .hg-check-text {
  font-size: var(--fs-body);
  font-weight: 400;
  color: var(--text-primary);
}
.dl-v2 .hg-check-remove { color: var(--text-tertiary); }
.dl-v2 .hg-ref-box {
  background: var(--bg);
  border: 0.5px solid var(--border);
  border-radius: var(--radius-input);
}
.dl-v2 .hg-ref-box-label { color: var(--text-tertiary); font-weight: 500; font-size: 11px; }
.dl-v2 .hg-ref-item { color: var(--text-secondary); font-size: var(--fs-caption); }

/* ── 체크 완료 취소선 애니메이션 (손글씨풍 곡선, 0.4초) ── */
.dl-v2 .hg-check-text-wrap {
  position: relative;
  display: inline-flex;
  flex: 1;
  min-width: 0;
  align-items: center;
}
.dl-v2 .hg-check-text.done { color: var(--text-tertiary); text-decoration: none; }
.dl-v2 .hg-strike-svg {
  position: absolute;
  left: -2%;
  top: 50%;
  width: 104%;
  height: 16px;
  transform: translateY(-50%);
  overflow: visible;
  pointer-events: none;
}
.dl-v2 .hg-strike-svg path {
  fill: none;
  stroke: var(--accent);
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 140;
  stroke-dashoffset: 140;
  animation: hg-strike-draw 0.4s ease forwards;
}
@keyframes hg-strike-draw {
  to { stroke-dashoffset: 0; }
}

/* ── 펜 설정 툴바 (무채색 + 선택 상태만 accent, 크기 축소) ── */
.dl-v2 .hg-pen-toolbar {
  background: var(--bg);
  border: 0.5px solid var(--border);
  padding: 4px 7px;
  gap: 8px;
}
.dl-v2 .hg-pen-thick-btn { width: 22px; height: 22px; }
.dl-v2 .hg-pen-thick-btn.active {
  background: var(--card);
  box-shadow: inset 0 0 0 1.5px var(--accent);
}
.dl-v2 .hg-pen-thick-dot { background: var(--text-secondary); }
.dl-v2 .hg-pen-swatch { width: 16px; height: 16px; border-color: var(--border); }
.dl-v2 .hg-pen-swatch.active {
  box-shadow: 0 0 0 2px var(--bg), 0 0 0 3.5px var(--accent);
}
.dl-v2 .hg-pen-eraser { color: var(--text-tertiary); font-size: 11px; }

/* ── 데일리로그 날짜 탐색 캘린더 모달 (id로만 스코프 — 정산/매매일지 달력과 분리) ── */
#hg-cal-overlay .cal-sheet {
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
}
#hg-cal-overlay .cal-header-title {
  font-size: var(--fs-title);
  font-weight: var(--fw-title);
  color: var(--text-primary);
}
#hg-cal-overlay .cal-nav-btn { background: var(--bg); color: var(--text-secondary); }
#hg-cal-overlay .cal-nav-btn:active { background: var(--border); }
#hg-cal-overlay .cal-days-header span { color: var(--text-tertiary); font-weight: 500; }
#hg-cal-overlay .cal-days-header span:nth-child(6) { color: var(--accent); }
#hg-cal-overlay .cal-days-header span:last-child { color: var(--danger); }
#hg-cal-overlay .cal-day { color: var(--text-primary); font-weight: 500; }
#hg-cal-overlay .cal-day:active { background: var(--bg); }
#hg-cal-overlay .cal-day.sat { color: var(--accent); }
#hg-cal-overlay .cal-day.sun { color: var(--danger); }
#hg-cal-overlay .cal-day.today::after { background: var(--accent); }
#hg-cal-overlay .cal-day.selected { background: var(--accent) !important; }
#hg-cal-overlay .cal-day.selected.today::after { background: #fff; }
#hg-cal-overlay .cal-close { background: var(--bg); color: var(--text-primary); font-weight: 500; }
#hg-cal-overlay .cal-close:active { background: var(--border); }