/* 페이지 CSS — 상세 화면 조합: 헤더(정체+동작) · 탭 · 개요(보기/편집 전환) · 청구서(4상태 표) · 활동(타임라인)
   보기↔편집은 page_detail의 data-state="view|edit" — 보기는 dl(p_dl), 편집은 폼(p_fields)이 같은 카드 안에서 교대한다 */
.page_detail { display: flex; flex-direction: column; gap: 20px; max-width: 1120px; }
.page_detail .p_head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.page_detail .p_identity { display: flex; align-items: center; gap: 16px; min-width: 0; }
.page_detail .p_avatar { display: inline-flex; align-items: center; justify-content: center; width: 3.5rem; height: 3.5rem; border-radius: 50%; background: var(--color-brand-soft); font-size: var(--text-lg); font-weight: var(--weight-semibold); color: var(--color-text-brand); flex: none; }
.page_detail .p_title { display: flex; align-items: center; gap: var(--space-8); font-size: var(--text-2xl); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-snug); flex-wrap: wrap; }
.page_detail .p_meta { margin-top: var(--space-4); font-size: var(--text-sm); color: var(--color-text-secondary); }
.page_detail .p_meta a { color: inherit; }
.page_detail .p_actions { display: flex; gap: 8px; flex-wrap: wrap; }
.page_detail[data-state="edit"] .p_actions { display: none; }   /* 편집 중엔 헤더 동작 숨김 — 저장 바가 유일한 출구 */
.page_detail .tab_menu .i_tab { display: inline-flex; align-items: center; gap: var(--space-8); }
/* 개요 — 2열(본문 | 요약). 1024 아래 1열 */
.page_detail .p_grid { display: grid; grid-template-columns: 1fr 320px; gap: 20px; align-items: start; }
.page_detail .p_dl { display: grid; grid-template-columns: 140px 1fr; gap: 12px 24px; font-size: var(--text-sm); }
.page_detail .p_dl dt { color: var(--color-text-muted); }
.page_detail .p_dl dd { min-width: 0; color: var(--color-text-primary); overflow-wrap: anywhere; }
.page_detail .p_dl dd:empty::before { content: "—"; color: var(--color-text-muted); }
.page_detail .p_dl .p_tags { display: flex; gap: var(--space-4); flex-wrap: wrap; }
.page_detail .p_fields { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 20px; }
.page_detail .p_fields .m_wide { grid-column: 1 / -1; }
.page_detail .p_fields .i_help:empty { display: none; }
.page_detail .p_fields legend.i_label { margin-bottom: var(--space-8); }   /* legend는 flex 흐름 밖(UA) — gap 대신 margin */
.page_detail .p_radios { display: flex; gap: var(--space-16); min-height: 2.5rem; align-items: center; flex-wrap: wrap; }
.page_detail[data-state="view"] .p_fields { display: none; }
.page_detail[data-state="edit"] .p_dl { display: none; }
.page_detail .p_side { display: flex; flex-direction: column; gap: 20px; }
.page_detail .p_kv { display: flex; flex-direction: column; }
.page_detail .p_kv div { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-12); padding: var(--space-8) 0; border-top: 1px solid var(--color-border-subtle); font-size: var(--text-sm); }
.page_detail .p_kv div:first-child { border-top: none; padding-top: 0; }
.page_detail .p_kv dt { color: var(--color-text-secondary); }
.page_detail .p_kv dd { font-weight: var(--weight-medium); font-variant-numeric: tabular-nums; text-align: right; }
.page_detail .p_owner { display: flex; align-items: center; gap: var(--space-12); }
.page_detail .p_owner .p_avatar { width: 2.5rem; height: 2.5rem; font-size: var(--text-sm); }
.page_detail .p_owner_meta { display: flex; flex-direction: column; font-size: var(--text-sm); line-height: 1.3; }
.page_detail .p_owner_meta small { font-size: var(--text-xs); color: var(--color-text-muted); }
/* 저장 바 — 편집 모드일 때만. 취소는 변경이 있으면 확인 dialog를 거친다 */
.page_detail .p_savebar { display: none; align-items: center; gap: 12px; padding: 12px 16px; border: 1px solid var(--color-border-default); border-radius: var(--radius-12); background: var(--color-surface-card); font-size: var(--text-sm); position: sticky; bottom: 16px; z-index: var(--z-sticky); box-shadow: var(--shadow-lg); }
.page_detail[data-state="edit"] .p_savebar { display: flex; }
.page_detail .p_savebar .p_spacer { flex: 1; }
/* 청구서 — 표 위 헤더 줄, 4상태는 table_wrap의 data-state */
.page_detail .p_invoice_head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.page_detail .p_invoice_head .p_sub { font-size: var(--text-sm); color: var(--color-text-secondary); }
.page_detail .table_data { min-width: 640px; }
.page_detail .p_skel_row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--color-border-subtle); }
.page_detail .p_skel_row .skeleton { width: 25%; }
/* 활동 — 타임라인. 점과 선은 li의 ::before/::after, 시각은 time */
.page_detail .p_timeline { display: flex; flex-direction: column; list-style: none; }
.page_detail .p_timeline li { display: grid; grid-template-columns: 1rem 1fr; gap: 0 12px; padding-bottom: 20px; position: relative; }
.page_detail .p_timeline li::before { content: ""; width: 0.625rem; height: 0.625rem; margin: 0.375rem 0 0 0.1875rem; border: 2px solid var(--color-brand); border-radius: 50%; background: var(--color-surface-card); }
.page_detail .p_timeline li::after { content: ""; width: 2px; background: var(--color-border-subtle); position: absolute; top: 1.125rem; bottom: 0; left: 0.4375rem; }
.page_detail .p_timeline li:last-child::after { display: none; }
.page_detail .p_timeline li:last-child { padding-bottom: 0; }
.page_detail .p_timeline .p_event { font-size: var(--text-sm); color: var(--color-text-primary); }
.page_detail .p_timeline .p_event strong { font-weight: var(--weight-medium); }
.page_detail .p_timeline time { display: block; margin-top: 2px; font-size: var(--text-xs); color: var(--color-text-muted); }
@media (max-width: 1023px) {
  .page_detail .p_grid { grid-template-columns: 1fr; }
}
@media (max-width: 639px) {
  .page_detail .p_actions { width: 100%; }
  .page_detail .p_dl { grid-template-columns: 1fr; gap: 4px 0; }
  .page_detail .p_dl dt { margin-top: var(--space-8); }
  .page_detail .p_dl dt:first-child { margin-top: 0; }
  .page_detail .p_fields { grid-template-columns: 1fr; }
  .page_detail .p_savebar { flex-wrap: wrap; }
}