/* 업무보고 — 의료인공지능데이터정책과
 *
 * 설계 논지: 이 화면은 폼이 아니라 장부다. 과원은 이미 존재하는 일지의
 * 다음 줄을 쓴다. 그래서 입력칸은 지난 기록 아래에 같은 모양으로 이어 붙고,
 * 왼쪽 세로선(장부의 등)이 내 항목에서 굵어진다.
 *
 * 활자 규칙: 기계가 찍는 값(건수·ISO 날짜·파일경로·저장상태)만 monospace,
 * 한글은 언제나 비례 서체. 한글을 mono 로 조판하면 자간이 벌어져 읽기 나쁘다.
 */

:root {
  --paper: #fbfbf9;
  --surface: #ffffff;
  --ink: #16202b;
  --ink-soft: #5c6b7a;
  --ink-faint: #97a3ae;
  --rule: #e2e7eb;
  --rule-strong: #c9d2d9;
  /* 원고지 인쇄색에서 가져온 초록 — 기록·저장 상태에만 쓴다 */
  --stamp: #1f6f5c;
  --stamp-wash: #eef6f3;
  --alert: #a8321e;
  --alert-wash: #fdf1ef;

  --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", Pretendard,
          "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "D2Coding", monospace;

  --gutter: 20px;
  --measure: 34rem;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.65;
}

:focus-visible {
  outline: 2px solid var(--stamp);
  outline-offset: 2px;
}

/* ── 상단 ─────────────────────────────────────────────── */

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px var(--gutter);
  background: var(--surface);
  border-bottom: 1px solid var(--rule);
  position: sticky;
  top: 0;
  z-index: 10;
}

.topbar__title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.topbar__who {
  font-size: 0.875rem;
  color: var(--ink-soft);
  display: flex;
  align-items: center;
  gap: 12px;
}

.root {
  padding: var(--gutter);
  max-width: var(--measure);
  margin: 0 auto;
}

/* ── 공용 ─────────────────────────────────────────────── */

.muted { color: var(--ink-soft); }

.meta {
  font-family: var(--mono);
  font-size: 0.8125rem;
  color: var(--ink-soft);
  letter-spacing: 0.01em;
}

.display {
  font-size: clamp(1.5rem, 5.5vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.25;
  margin: 0;
}

.backlink {
  font-size: 0.875rem;
  color: var(--ink-soft);
  background: none;
  border: 0;
  padding: 6px 0;
  cursor: pointer;
  display: inline-block;
  margin-bottom: 14px;
}
.backlink:hover { color: var(--ink); }

.linkbtn {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: var(--stamp);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── 홈 머리말과 진행 눈금 ─────────────────────────────── */

.head {
  margin-bottom: 22px;
}

.head__row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.head__count {
  font-family: var(--mono);
  font-size: 0.9375rem;
  color: var(--ink-soft);
  white-space: nowrap;
}

.head__dates {
  font-size: 0.875rem;
  color: var(--ink-faint);
  margin-top: 2px;
}

.head__hint {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin: 12px 0 0;
}

/* 프로젝트 수만큼의 눈금 — 기록된 것이 채워진다 */
.ticks {
  display: flex;
  gap: 3px;
  margin-top: 12px;
  flex-wrap: wrap;
}
.ticks__mark {
  width: 14px;
  height: 4px;
  border-radius: 1px;
  background: var(--rule-strong);
}
.ticks__mark.is-on { background: var(--stamp); }

/* ── 업무 목록 (카드가 아니라 장부의 줄) ──────────────── */

.rows {
  border-top: 1px solid var(--rule);
}

.row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--rule);
}

.row__mark {
  font-family: var(--mono);
  font-size: 0.875rem;
  width: 1.25em;
  flex: none;
  text-align: center;
  color: var(--ink-faint);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  line-height: 1.4;
}
.row__mark[aria-pressed="true"] { color: var(--ink); }
.row__mark.is-done { color: var(--stamp); cursor: default; }

/* 줄 전체가 펼치기 버튼이다 — 사업명이 길어 잘렸을 때 탭해서 전체를 본다 */
.row__body {
  flex: 1;
  min-width: 0;
  display: block;
  text-align: left;
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.row__name {
  display: block;
  font-weight: 600;
  letter-spacing: -0.01em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.row.is-open .row__name {
  white-space: normal;
  overflow: visible;
}

.row__meta {
  display: block;
  font-size: 0.8125rem;
  color: var(--ink-faint);
  margin-top: 1px;
}

/* 펼친 상세 */
.detail {
  padding: 2px 0 12px 32px;
  border-bottom: 1px solid var(--rule);
}

.detail__line {
  margin: 0 0 3px;
  font-size: 0.875rem;
  color: var(--ink-soft);
  display: flex;
  gap: 8px;
  overflow-wrap: anywhere;
}

.detail__key {
  flex: none;
  width: 5.2em;
  font-size: 0.75rem;
  color: var(--ink-faint);
  padding-top: 2px;
}

.detail__link {
  display: inline-block;
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* ── 버튼 ─────────────────────────────────────────────── */

.btn {
  font: inherit;
  font-size: 0.9375rem;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--ink);
  border-radius: 6px;
  padding: 9px 14px;
  min-height: 40px;
  cursor: pointer;
  white-space: nowrap;
}
.btn:hover { border-color: var(--ink-faint); }

.btn--primary {
  background: var(--stamp);
  border-color: var(--stamp);
  color: #fff;
  font-weight: 600;
  min-height: 48px;
  width: 100%;
}
.btn--primary:hover { background: #1a5e4e; border-color: #1a5e4e; }
.btn--primary:disabled { opacity: 0.5; cursor: default; }

.btn--wide { width: 100%; margin-bottom: 8px; min-height: 48px; }

/* ── 계획 (PLAN.md — 입력칸 위에 띄우는 참고) ─────────── */

.plan {
  margin-top: 16px;
  border: 1px solid var(--rule);
  border-radius: 8px;
  background: var(--surface);
  padding: 4px 14px 10px;
}

.plan__summary {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-soft);
  cursor: pointer;
  padding: 8px 0;
  list-style: none;
}
.plan__summary::-webkit-details-marker { display: none; }
.plan__summary::before {
  content: '▾ ';
  color: var(--ink-faint);
}
.plan:not([open]) .plan__summary::before { content: '▸ '; }

.plan__row {
  padding: 8px 0;
  border-top: 1px solid var(--rule);
}

.plan__label {
  display: block;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--stamp);
  letter-spacing: 0.02em;
  margin-bottom: 3px;
}

.plan__text {
  margin: 0;
  font-size: 0.875rem;
  line-height: 1.55;
  color: var(--ink-soft);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.plan__milestone {
  display: flex;
  gap: 8px;
  align-items: baseline;
  font-size: 0.875rem;
  color: var(--ink-soft);
  padding: 1px 0;
}
.plan__milestone > span:nth-child(2) {
  flex: 1;
  min-width: 0;
  overflow-wrap: anywhere;
}

.plan__due {
  font-family: var(--mono);
  font-size: 0.75rem;
  color: var(--ink-faint);
  flex: none;
  width: 5.2em;
}

.plan__state {
  flex: none;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

.plan__edit {
  display: inline-block;
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--ink-faint);
}

/* ── 일지 흐름 (입력 화면의 시그니처) ─────────────────── */

.ledger { margin: 18px 0 8px; }

.entry {
  position: relative;
  padding: 0 0 20px 18px;
  border-left: 2px solid var(--rule);
}
.entry:last-child { padding-bottom: 0; }

.entry__stamp {
  font-size: 0.8125rem;
  color: var(--ink-faint);
  display: flex;
  gap: 10px;
  margin-bottom: 8px;
}

/* ISO 날짜는 기계가 찍는 값이라 mono */
.entry__date { font-family: var(--mono); }

.entry__label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--ink-faint);
  margin-bottom: 2px;
}
.entry__label:not(:first-of-type) { margin-top: 10px; }

.entry__text {
  white-space: pre-wrap;
  color: var(--ink-soft);
  font-size: 0.9375rem;
  margin: 0 0 2px;
  overflow-wrap: anywhere;
}

/* 내 항목 — 등이 굵어지고 초록으로 바뀐다 */
.entry--live {
  border-left: 3px solid var(--stamp);
  padding-left: 17px;
  padding-bottom: 0;
}
.entry--live .entry__stamp { color: var(--stamp); font-weight: 600; }

.field { margin-bottom: 14px; }

.field__label {
  display: block;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 6px;
}

textarea {
  display: block;
  width: 100%;
  min-height: 120px;
  padding: 12px;
  font-family: var(--sans);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
  background: var(--surface);
  border: 1px solid var(--rule-strong);
  border-radius: 6px;
  resize: vertical;
}
textarea::placeholder { color: var(--ink-faint); }
textarea:focus { border-color: var(--stamp); }

/* ── 저장 상태 (…  ↔  ✓) ─────────────────────────────── */

.savestate {
  font-family: var(--mono);
  font-size: 0.75rem;
  min-height: 1.5rem;
  color: var(--ink-faint);
  transition: opacity 0.5s ease;
}
.savestate[data-state="saved"] { color: var(--stamp); }
.savestate[data-state="error"] { color: var(--alert); }
.savestate.is-fading { opacity: 0.4; }

/* ── 알림 ─────────────────────────────────────────────── */

.notice {
  border: 1px solid;
  border-radius: 6px;
  padding: 12px 14px;
  margin: 14px 0;
  font-size: 0.9375rem;
}
.notice--ok { background: var(--stamp-wash); border-color: #b9ddd0; color: #14513f; }
.notice--error { background: var(--alert-wash); border-color: #e8b4aa; color: var(--alert); }
.notice--warn { background: #fdf6e8; border-color: #e6d3a8; color: #7a5a12; }
.notice small { display: block; margin-top: 4px; opacity: 0.85; }

.submit-area { margin-top: 22px; }

/* ── 열람 ─────────────────────────────────────────────── */

.tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 20px; }

.tab {
  font-size: 0.875rem;
  border: 1px solid var(--rule-strong);
  background: var(--surface);
  color: var(--ink-soft);
  border-radius: 999px;
  padding: 7px 13px;
  min-height: 36px;
  cursor: pointer;
}
.tab[aria-selected="true"] {
  background: var(--ink);
  border-color: var(--ink);
  color: #fff;
}

.peek {
  border-left: 2px solid var(--rule);
  padding: 2px 0 2px 14px;
  margin: 0 0 14px 32px;
  white-space: pre-wrap;
  font-size: 0.875rem;
  color: var(--ink-soft);
  overflow-wrap: anywhere;
}

/* ── 넓은 화면 ────────────────────────────────────────── */

@media (min-width: 640px) {
  :root { --gutter: 32px; }
  .root { padding-top: 28px; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}