/* 희로그 공용 컴포넌트 — 카드, 버튼, 세그먼트, 체크리스트, 토스트, 모달
 * 지시서 07: 디자인 시스템 전면 교체. 클래스 구조·셀렉터는 그대로 두고 값만 새 토큰 기준으로 교체했다.
 * 그림자/그라디언트 금지, 폰트 웨이트는 400/500만, 라운드는 16/10/8px 세 값만 사용한다.
 */

.hg-page {
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 16px 40px;
}

.hg-card {
  background: var(--hg-card);
  border: 0.5px solid var(--hg-border);
  border-radius: var(--hg-radius-card);
  box-shadow: var(--hg-shadow-card);
  padding: var(--space-card-pad);
  margin-bottom: var(--space-card-gap);
}
.hg-card-title {
  font-size: var(--fs-title);
  font-weight: var(--fw-title);
  color: var(--hg-text2);
  letter-spacing: -0.1px;
  margin-bottom: 10px;
}

/* ── 버튼 ── */
.hg-btn {
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: 500;
  border-radius: var(--hg-radius-control);
  border: none;
  cursor: pointer;
  padding: 10px 16px;
  transition: opacity 0.12s;
}
.hg-btn:active { opacity: 0.75; }
.hg-btn-primary { background: var(--hg-accent); color: #fff; }
.hg-btn-ghost { background: transparent; color: var(--hg-text2); border: 0.5px solid var(--hg-border-strong); }
.hg-btn-ghost-sm {
  font-family: inherit;
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--hg-text3);
  background: transparent;
  border: 1px dashed var(--hg-border-strong);
  border-radius: var(--hg-radius-control);
  padding: 8px 12px;
  width: 100%;
  cursor: pointer;
}
.hg-btn-ghost-sm:active { background: var(--hg-bg); }
.hg-btn-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  border: 0.5px solid var(--hg-border);
  background: var(--hg-bg-elevated);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  font-size: 14px;
  color: var(--hg-text1);
  flex-shrink: 0;
}
.hg-btn-icon.active {
  background: var(--hg-accent);
  color: #fff;
  border-color: var(--hg-accent);
}

/* ── 세그먼트 (오전/오후, 손글씨/타자, 기간 전환 등 토글) — 지시서 08 2-1 ── */
.hg-segment {
  display: flex;
  gap: 0;
  padding: 3px;
  background: #F5F5F7;
  border-radius: 999px;
  border: none;
}
.hg-segment-btn {
  flex: 1;
  height: 28px;
  padding: 0 12px;
  border: none;
  border-radius: 999px;
  background: transparent;
  color: var(--hg-text2);
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.hg-segment-btn.active {
  background: #FFFFFF;
  border: 0.5px solid rgba(0,0,0,0.08);
  color: var(--hg-text1);
  font-weight: 500;
}

/* ── 날짜 탐색 (daily_logs 상단 공통) ── */
.hg-datenav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 4px 2px 12px;
}
.hg-datenav-label {
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  color: var(--hg-text1);
  cursor: pointer;
}
.hg-datenav-label.sat { color: var(--hg-accent); }
.hg-datenav-label.sun { color: var(--hg-danger); }

/* ── 체크리스트 ── */
.hg-check-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 0.5px solid var(--hg-border);
}
.hg-check-row:last-child { border-bottom: none; }
.hg-checkbox {
  width: 18px; height: 18px;
  border-radius: var(--hg-radius-pill);
  border: 1.5px solid var(--hg-border-strong);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.hg-checkbox.checked { background: var(--hg-accent); border-color: var(--hg-accent); }
.hg-check-text {
  flex: 1;
  min-width: 0;
  font-size: var(--fs-body);
  color: var(--hg-text1);
  word-break: break-word;
}
.hg-check-text.done { color: var(--hg-text4); text-decoration: line-through; }
.hg-check-text[data-edit-text] { cursor: pointer; }
.hg-check-text-edit {
  flex: 1;
  min-width: 0;
  border: none;
  border-bottom: 1px solid var(--hg-accent);
  background: transparent;
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--hg-text1);
  outline: none;
  padding: 0;
}
.hg-check-remove {
  flex-shrink: 0;
  background: none;
  border: none;
  color: var(--hg-text4);
  font-size: 14px;
  cursor: pointer;
  padding: 2px 4px;
}
.hg-check-input-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.hg-check-input {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--hg-border);
  border-radius: var(--hg-radius-control);
  padding: 9px 11px;
  font-family: inherit;
  font-size: var(--fs-body);
  outline: none;
  background: var(--hg-bg);
}
.hg-check-input:focus { border-color: var(--hg-accent); background: #fff; }

.hg-ref-box {
  background: var(--hg-bg);
  border-radius: var(--hg-radius-control);
  border: 0.5px solid var(--hg-border);
  padding: 10px 12px;
  margin-bottom: 10px;
}
.hg-ref-box-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--hg-text4);
  margin-bottom: 6px;
}
.hg-ref-item {
  font-size: var(--fs-caption);
  color: var(--hg-text3);
  padding: 2px 0;
}

/* ── 인풋 (기상시간 등) ── */
.hg-time-input {
  font-family: inherit;
  font-size: 18px;
  font-weight: 500;
  color: var(--hg-text1);
  border: 1px solid var(--hg-border);
  border-radius: var(--hg-radius-control);
  background: var(--hg-bg);
  padding: 0 14px;
  height: 34px;
  outline: none;
  width: 100%;
}
.hg-time-input:focus { border-color: var(--hg-accent); background: #fff; }
.hg-time-input:disabled { background: #fff; }

.hg-textarea {
  width: 100%;
  min-height: 120px;
  border: 1px solid var(--hg-border);
  border-radius: var(--hg-radius-control);
  background: var(--hg-bg);
  font-family: inherit;
  font-size: var(--fs-body);
  line-height: 1.6;
  padding: 12px;
  outline: none;
  resize: vertical;
}
.hg-textarea:focus { border-color: var(--hg-accent); background: #fff; }

/* ── 토스트 ── */
.hg-toast {
  position: fixed;
  left: 50%;
  bottom: calc(24px + var(--hg-safe-bottom));
  transform: translateX(-50%) translateY(12px);
  background: rgba(29,29,31,0.92);
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: 500;
  padding: 10px 18px;
  border-radius: var(--hg-radius-pill);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s, transform 0.18s;
  z-index: 900;
  white-space: nowrap;
}
.hg-toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── 모달 (바텀시트 공용) ── */
.hg-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 800;
  background: rgba(0,0,0,0.32);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}
.hg-modal-sheet {
  background: #fff;
  border-radius: var(--hg-radius-card) var(--hg-radius-card) 0 0;
  width: 100%;
  max-width: 480px;
  padding: 20px 20px calc(20px + var(--hg-safe-bottom));
}
.hg-modal-handle {
  width: 36px; height: 4px;
  background: var(--hg-border-strong);
  border-radius: 2px;
  margin: 0 auto 18px;
}
.hg-modal-title {
  font-size: var(--fs-display);
  font-weight: var(--fw-display);
  color: var(--hg-text1);
  margin-bottom: 6px;
}
.hg-modal-msg {
  font-size: var(--fs-body);
  color: var(--hg-text2);
  line-height: 1.55;
  margin-bottom: 18px;
}
.hg-modal-btns {
  display: flex;
  gap: 8px;
}
.hg-modal-btns .hg-btn { flex: 1; }

/* ── 준비 중 화면 ── */
.hg-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 80px 20px;
  text-align: center;
}
.hg-placeholder-icon {
  width: 56px; height: 56px;
  border-radius: var(--hg-radius-control);
  background: var(--hg-bg-elevated);
  border: 0.5px solid var(--hg-border);
  display: flex; align-items: center; justify-content: center;
  font-size: 23px;
}
.hg-placeholder-title { font-size: var(--fs-display); font-weight: var(--fw-display); color: var(--hg-text1); }
.hg-placeholder-sub { font-size: var(--fs-body); color: var(--hg-text3); }

/* ── 오전/오후 잠금 바 ── */
.hg-lock-bar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px 2px;
}
.hg-lock-badge {
  font-size: var(--fs-caption);
  font-weight: 500;
  color: var(--hg-text3);
  margin-right: auto;
}
.hg-lock-bar .hg-btn {
  padding: 7px 12px;
  font-size: var(--fs-caption);
}

/* ── 투두 항목 타자/손글씨 선택 토글 — 선택 칩 스펙(지시서 08 2-2) ── */
.hg-mode-toggle {
  display: flex;
  gap: 6px;
  margin: 10px 0 8px;
}
.hg-mode-toggle .hg-segment-btn {
  flex: 0 0 auto;
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  background: #FFFFFF;
  border: 0.5px solid rgba(0,0,0,0.1);
  color: var(--hg-text2);
  font-weight: 400;
}
.hg-mode-toggle .hg-segment-btn.active {
  background: rgba(46,124,246,0.08);
  color: var(--hg-accent);
  border-color: var(--hg-accent);
  font-weight: 500;
}

/* ── 투두 소요시간(--:--) 입력/표시 ── */
.hg-duration-input {
  flex: 0 0 auto;
  width: 68px;
  text-align: center;
  border: 1px solid var(--hg-border);
  border-radius: var(--hg-radius-control);
  padding: 8px 4px;
  font-family: inherit;
  font-size: var(--fs-caption);
  outline: none;
  background: var(--hg-bg);
}
.hg-duration-input:focus { border-color: var(--hg-accent); background: #fff; }
.hg-todo-duration-label {
  flex: 0 0 auto;
  font-size: 11px;
  font-weight: 500;
  color: var(--hg-text3);
  white-space: nowrap;
}
.hg-todo-duration-label.locked-red { color: var(--hg-danger); }

/* ── 손글씨 투두 항목 미리보기 — 타자 입력 텍스트와 동일하게 배경/테두리 없이 인라인으로 표시 ── */
.hg-todo-stroke-preview {
  flex: 1;
  min-width: 0;
}
.hg-todo-stroke-preview.done {
  opacity: 0.5;
  filter: grayscale(1);
}

/* ── 펜 설정 툴바 — 캔버스를 압박하지 않는 작은 크기 ── */
.hg-pen-toolbar {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 6px;
  padding: 5px 8px;
  background: var(--hg-bg);
  border: 0.5px solid var(--hg-border);
  border-radius: var(--hg-radius-pill);
}
.hg-pen-thickness {
  display: flex;
  gap: 2px;
  flex: 0 0 auto;
}
.hg-pen-thick-btn {
  width: 24px;
  height: 24px;
  border: none;
  background: transparent;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.hg-pen-thick-btn.active {
  background: var(--hg-bg-elevated);
  box-shadow: inset 0 0 0 1.5px var(--hg-accent);
}
.hg-pen-thick-dot {
  border-radius: 50%;
  background: var(--hg-text1);
}
.hg-pen-thick-input {
  width: 46px;
  height: 24px;
  border: 1px solid var(--hg-border-strong);
  border-radius: var(--hg-radius-pill);
  background: #fff;
  font-family: inherit;
  font-size: 11px;
  text-align: center;
  padding: 0 4px;
  outline: none;
}
.hg-pen-thick-input:focus { border-color: var(--hg-accent); }
.hg-pen-thick-custom {
  display: flex;
  align-items: center;
  font-size: 10px;
  font-weight: 500;
  color: var(--hg-accent);
  margin-left: 2px;
  white-space: nowrap;
}
.hg-pen-colors {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}
.hg-pen-swatch {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 1.5px solid var(--hg-border-strong);
  cursor: pointer;
  padding: 0;
  flex: 0 0 auto;
}
.hg-pen-swatch.active {
  box-shadow: 0 0 0 2px var(--hg-bg), 0 0 0 3.5px var(--hg-accent);
}
.hg-pen-color-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
  border: none;
  padding: 0;
}
.hg-pen-eraser {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--hg-text3);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 6px;
  white-space: nowrap;
}
.hg-pen-eraser.active {
  color: var(--hg-accent);
  background: rgba(46,124,246,0.1);
  border-radius: var(--hg-radius-pill);
}
.hg-pen-expand {
  flex: 0 0 auto;
  background: none;
  border: none;
  color: var(--hg-text3);
  font-family: inherit;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 6px;
  white-space: nowrap;
}
.hg-pen-expand:disabled { opacity: 0.35; cursor: default; }

/* ── 매매일지 — 계좌 섹션 ── */
.hg-ta-block {
  margin-bottom: 16px;
}
.hg-ta-block:last-child { margin-bottom: 0; }
.hg-ta-label {
  font-size: 11px;
  font-weight: 500;
  color: var(--hg-text3);
  margin-bottom: 6px;
}

/* ── 매매일지 — 이번주 시나리오(주 단위 저장, 읽기 전용 + 수정) ── */
.hg-ws-meta {
  font-size: 11px;
  color: var(--hg-text3);
}

/* ── 매매일지 — 매매기록 한 줄(종목/매도매수/비고) ── */
.hg-tl-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}
.hg-tl-row .hg-tl-side {
  flex: 0 0 auto;
  margin: 0;
}

/* ── 매매일지 — 기록 완료 후 깔끔한 보기 화면: "제목(포인트 바) + 회색 박스 내용"을 구획마다 반복하고
   구획 사이는 헤어라인으로 나눠 표처럼 리듬감 있게 구분한다. ── */
.hg-muted { color: var(--hg-text4); }
.hg-tv-wrap { display: flex; flex-direction: column; }
.hg-tv-block { padding: 14px 0; }
.hg-tv-block:first-child { padding-top: 0; }
.hg-tv-block:not(:first-child) { border-top: 0.5px solid var(--hg-border); }
.hg-tv-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  color: var(--hg-text2);
  letter-spacing: 0.2px;
  margin-bottom: 8px;
}
.hg-tv-label-bar {
  width: 3px;
  height: 11px;
  border-radius: 2px;
  background: var(--hg-accent);
  flex-shrink: 0;
}
.hg-tv-box {
  font-size: var(--fs-body);
  color: var(--hg-text1);
  line-height: 1.6;
  white-space: pre-wrap;
  word-break: break-word;
}
/* 매매기록 — 종목/구분/비고 3칸을 표처럼 정렬 */
.hg-tv-trades { display: flex; flex-direction: column; }
.hg-tv-trade-head, .hg-tv-trade {
  display: grid;
  grid-template-columns: 1fr 52px 1fr;
  gap: 8px;
  align-items: center;
  padding: 7px 0;
  font-size: var(--fs-body);
}
.hg-tv-trade-head {
  font-size: 11px;
  color: var(--hg-text3);
  border-bottom: 0.5px solid var(--hg-border);
  padding-bottom: 6px;
}
.hg-tv-trade-head span:nth-child(2) { text-align: center; }
.hg-tv-trade { border-bottom: 0.5px solid var(--hg-border); }
.hg-tv-trade:last-child { border-bottom: none; }
.hg-tv-trade-name { font-weight: 500; color: var(--hg-text1); }
.hg-tv-trade-side { font-size: 11px; font-weight: 500; text-align: center; }
.hg-tv-trade-side.buy { color: var(--hg-accent); }
.hg-tv-trade-side.sell { color: var(--hg-danger); }
.hg-tv-trade-memo { color: var(--hg-text3); font-size: 12px; }

/* ── 칩(매매 종목)/태그 필(감정 태그) 공용 ── */
.hg-tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}
.hg-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 6px 6px 12px;
  border-radius: var(--hg-radius-pill);
  background: var(--hg-bg);
  border: 0.5px solid var(--hg-border);
  font-size: var(--fs-body);
  color: var(--hg-text1);
}
.hg-chip-remove {
  background: none;
  border: none;
  color: var(--hg-text4);
  cursor: pointer;
  font-size: 12px;
  padding: 2px 6px 2px 2px;
}
.hg-tag-pill {
  height: 26px;
  padding: 0 10px;
  border-radius: 8px;
  border: 0.5px solid rgba(0,0,0,0.1);
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 400;
  color: var(--hg-text2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
}
.hg-tag-pill.selected {
  background: rgba(46,124,246,0.08);
  color: var(--hg-accent);
  border-color: var(--hg-accent);
  font-weight: 500;
}

/* ── 매매일지 — 오버뷰 캘린더 ── */
.hg-cal-daysheader {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin: 10px 0 4px;
}
.hg-cal-daysheader span {
  text-align: center;
  font-size: 11px;
  font-weight: 500;
  color: var(--hg-text4);
  padding: 4px 0;
}
.hg-cal-daysheader span.sat { color: var(--hg-accent); }
.hg-cal-daysheader span.sun { color: var(--hg-danger); }
.hg-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.hg-cal-cell {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  border-radius: var(--hg-radius-control);
  cursor: pointer;
}
.hg-cal-cell:active { background: var(--hg-bg); }
.hg-cal-cell.empty { pointer-events: none; }
.hg-cal-daynum { font-size: var(--fs-body); font-weight: 400; color: var(--hg-text1); }
.hg-cal-cell.sat .hg-cal-daynum { color: var(--hg-accent); }
.hg-cal-cell.sun .hg-cal-daynum { color: var(--hg-danger); }
.hg-cal-cell.today .hg-cal-daynum { font-weight: 500; text-decoration: underline; }
.hg-cal-dots { display: flex; gap: 3px; height: 6px; }
.hg-cal-dot { width: 5px; height: 5px; border-radius: 50%; }
.hg-cal-dot.sim { background: var(--hg-accent); }
.hg-cal-dot.real { background: var(--hg-danger); }
.hg-cal-legend {
  display: flex;
  justify-content: center;
  gap: 18px;
  margin-top: 14px;
  font-size: 11px;
  color: var(--hg-text3);
}
.hg-cal-legend span { display: inline-flex; align-items: center; gap: 5px; }

/* ── 매매일지 — 리스트 ── */
.hg-list-row {
  padding: 12px 4px;
  border-bottom: 0.5px solid var(--hg-border);
  cursor: pointer;
}
.hg-list-row:last-child { border-bottom: none; }
.hg-list-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 6px;
}
.hg-list-date { font-size: var(--fs-body); font-weight: 500; color: var(--hg-text1); }
.hg-list-mode-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 9px;
  border-radius: var(--hg-radius-pill);
}
.hg-list-mode-badge.sim { background: color-mix(in srgb, var(--hg-accent) 15%, transparent); color: var(--hg-accent); }
.hg-list-mode-badge.real { background: color-mix(in srgb, var(--hg-danger) 15%, transparent); color: var(--hg-danger); }
.hg-list-trades { font-size: var(--fs-body); color: var(--hg-text2); }
.hg-list-trades.muted { color: var(--hg-text4); }