/* 공통 머리 — 모든 화면 같은 자리 · 같은 크기 (기준: 빌렉/스케치_상단머리_공통틀.html)
   ① 메뉴 묶음 / ② 제목 + 상태 뱃지 / 설명 한 줄 │ ③ 기간 이동 ‹ 값 ›
   머리에는 모든 화면에 공통인 것만 둔다. 화면마다 다른 버튼(추가 · 엑셀 · 다음 단계 등)은 쓰는 자리
   (도구 줄 끝 · 목록 머리 오른쪽 · 단계 옆)에 .acts 묶음으로 둔다.
   그리는 곳: 목록 화면 = shell.html (vals.ph) · Shadow DOM 화면 = app.js pageHead() · 배송지시서 = shell.html dayhead
   Shadow DOM 화면은 이 파일을 <link>로 따로 붙인다 (색은 style.css :root 토큰을 물려받음) */
.ph { background: #FFF; border-bottom: 1px solid var(--line); padding: 14px 28px; min-height: 74px; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
/* Shadow DOM 화면: main 안쪽 여백(16 · 28)을 거슬러 위쪽을 꽉 채움 */
.ph.bleed { margin: -16px -28px 0; }
.ph-t { display: flex; flex-direction: column; min-width: 0; flex: 1 1 320px; }
.ph-cr { font-size: 11.5px; color: var(--text-3); white-space: nowrap; }
/* 설명: 제목 아래 한 줄 (설명이 없어도 줄 높이는 그대로 → 모든 화면 머리 높이 같게) */
.ph-desc { font-size: 12px; color: var(--text-3); min-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ph-desc u { text-decoration: none; border-bottom: 1px dotted var(--text-mute); cursor: help; }
.ph-t h1 { margin: 0; font-size: 19px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; white-space: nowrap; display: flex; align-items: center; gap: 8px; color: var(--text); }
.ph-tag { font-size: 13px; font-weight: 600; color: var(--text-3); padding: 1px 8px; border-radius: 6px; background: var(--gray-100); letter-spacing: 0; }
.ph-tag:empty { display: none; }
.ph-tag.live { background: var(--info-50); color: var(--info-700); }
.ph-per, .ph-btns { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: none; }
.ph-vsep { width: 1px; height: 22px; background: var(--line); flex: none; }
/* 버튼: 화면마다 .btn 모양이 달라도 머리 · 버튼 묶음(.acts) 안에서는 높이 · 글자 한 가지 */
.ph .btn, .acts .btn { height: 32px; box-sizing: border-box; display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; border-radius: 7px; font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.ph .btn[hidden] { display: none; }
/* 화면마다 다른 버튼 묶음: 도구 줄 끝 · 목록 머리 오른쪽 (주 버튼이 맨 끝) */
.acts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
/* 기간 이동 ‹ 값 › — 지금 보는 기간이라 버튼보다 눈에 띄게 (주색 테두리 · 옅은 주색 바탕 · 큰 글자) */
.ph-nav { display: inline-flex; align-items: center; border: 1px solid var(--primary-line); border-radius: 8px; overflow: hidden; background: var(--primary-soft); flex: none; }
.ph-nav button { border: 0; background: transparent; width: 36px; height: 36px; cursor: pointer; color: var(--primary); font: inherit; font-size: 20px; font-weight: 700; line-height: 1; }
.ph-nav button:hover:not(:disabled) { background: var(--brand-100); }
.ph-nav button:disabled { color: var(--brand-200); cursor: default; }
/* 날짜 이동을 제목 바로 옆에 (pageHead near) */
.ph.near .ph-t { flex: 0 1 auto; }
.ph.near .ph-per { margin-left: 14px; }
/* 가운데 값을 누르면 달력 (숨긴 date · month 칸의 showPicker · 달력은 값 바로 아래에 뜸) */
.ph-nav b.ph-cal { position: relative; cursor: pointer; }
.ph-nav b.ph-cal:hover { background: var(--brand-50); }
.ph-cal svg { width: 15px; height: 15px; margin-left: 7px; vertical-align: -2px; color: var(--primary); }
.ph-cal input { position: absolute; left: 0; top: 0; width: 100%; height: 100%; opacity: 0; pointer-events: none; border: 0; padding: 0; margin: 0; }
.ph-nav b { min-width: 112px; text-align: center; padding: 0 14px; font-size: 16px; font-weight: 700; color: var(--brand-800); font-variant-numeric: tabular-nums; border-left: 1px solid var(--primary-line); border-right: 1px solid var(--primary-line); line-height: 36px; white-space: nowrap; background: #FFF; }
/* 탭으로 합친 메뉴의 탭 줄 (app.js PAGE_TABS · 스케치_메뉴정리.html A안): 머리 맨 아래 · 머리 밑줄에 겹쳐 고른 탭은 굵은 밑줄
   목록 화면 = shell.html · Shadow DOM 화면 = pageHead() (같은 모양) */
.ph.has-tabs { padding-bottom: 0; }
.ph-tabs { flex: 1 0 100%; display: flex; flex-wrap: wrap; margin: 2px 0 -1px -12px; }
.ph-tab { display: inline-flex; align-items: center; gap: 5px; padding: 8px 12px; min-height: 40px; box-sizing: border-box; border-bottom: 3px solid transparent; color: var(--text-3); text-decoration: none; font-size: 13.5px; font-weight: 600; white-space: nowrap; }
.ph-tab:hover { color: var(--text); }
.ph-tab[aria-current] { border-bottom-color: var(--primary); color: var(--text); font-weight: 700; }
.ph-tab-n { font-size: 12px; font-weight: 400; color: var(--text-mute); font-variant-numeric: tabular-nums; }
.ph-tab-b { display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px; font-size: 11px; font-weight: 700; color: #FFF; background: var(--warn-500); font-variant-numeric: tabular-nums; }