/* ═══ 🩺 건강 페이지 마감 (독립형 · 사장님 11-09 「최고급으로」) ═══
 *   틀(건강.html)과 체크리스트 틀 안이 함께 읽는다 — 칸 · 기능은 그대로 두고 겉모양만.
 *   머리는 물때 · 28수 · 주역과 같은 틀. 판은 한 겹, 금색은 제목과 선택된 것에만.
 *   연결: tools_sync_health.py (건강.html · 체크리스트에 <link> 1줄씩)
 */
:root {
  --lx-gold: #e9c46a; --lx-gold-hi: #f6e3ae; --lx-gold-lo: #a7812f;
  --lx-line: rgba(214, 178, 94, .17); --lx-line-soft: rgba(255, 255, 255, .07);
  --lx-card: linear-gradient(180deg, rgba(255, 250, 235, .05), rgba(255, 250, 235, .022));
  --lx-field: rgba(0, 0, 0, .26);
  --lx-serif: 'Nanum Myeongjo', '바탕', 'Batang', 'AppleMyungjo', 'Noto Serif KR', serif;
}

/* ── 바탕 — 천문시계 다른 페이지와 같은 밤하늘 ── */
body:has(#scHealthTop) {
  background: radial-gradient(1100px 700px at 15% -10%, rgba(233, 196, 106, .09), transparent 60%),
              radial-gradient(900px 600px at 85% 110%, rgba(40, 120, 170, .16), transparent 60%),
              linear-gradient(180deg, #0c141b 0%, #070a0e 70%) fixed;
}
body:has(#scHealthTop)::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; opacity: .32; z-index: 0;
  background-image: radial-gradient(1px 1px at 12% 18%, #fff8 50%, transparent 51%), radial-gradient(1px 1px at 68% 9%, #fff6 50%, transparent 51%),
                    radial-gradient(1px 1px at 82% 34%, #fff5 50%, transparent 51%), radial-gradient(1px 1px at 30% 72%, #fff4 50%, transparent 51%),
                    radial-gradient(1.5px 1.5px at 47% 26%, #ffe9a8 50%, transparent 51%), radial-gradient(1px 1px at 92% 78%, #fff5 50%, transparent 51%);
}
#scHero, #scHealthTop, #scPages { position: relative; z-index: 1; }

/* ── 머리 ── */
#scHero { text-align: center; padding: 14px 16px 8px; }
#scHero .brand { display: inline-flex; align-items: center; gap: 16px; }
#scHero .emblem { width: 74px; height: 74px; filter: drop-shadow(0 0 18px rgba(233, 196, 106, .35)); }
#scHero .titles { text-align: left; }
#scHero h1 { margin: 0; font-family: var(--lx-serif); font-weight: 800; font-size: 34px; letter-spacing: .18em; line-height: 1.25;
  background-image: linear-gradient(180deg, #fff6d6, #e9c46a 55%, #a7812f); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
#scHero .hz-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
#scHero .hz-t { font-family: var(--lx-serif); color: var(--lx-gold); opacity: .8; letter-spacing: .5em; font-size: 14px; padding-left: .5em; }
#scHero .fold { appearance: none; background: transparent; border: none; color: rgba(214, 178, 94, .7); font-size: 11.5px; cursor: pointer; padding: 2px 8px; }
#scHero .fold:hover { color: var(--lx-gold-hi); }
#scHero .orn { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 12px auto 8px; color: var(--lx-gold-lo); max-width: 420px; }
#scHero .orn::before, #scHero .orn::after { content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--lx-gold-lo), transparent); }
#scHero .lead { text-align: center; color: #c7c2b3; font-size: 14px; max-width: 660px; margin: 0 auto; }
#scHero.folded .orn, #scHero.folded .lead { display: none; }

/* ── 위 줄 — 대상 · 탭 ── */
#scHealthTop { background: rgba(10, 15, 19, .82) !important; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid var(--lx-line) !important; border-radius: 14px !important; box-shadow: 0 12px 30px rgba(0, 0, 0, .32) !important; }
#scHealthTop .scTitle { display: none; }
#scHealthTop .scTabs { border-color: var(--lx-line); }
#scHealthTop .scTabs button.on { background: linear-gradient(180deg, #ecd392, #c49b4c) !important; font-weight: 700 !important; }

/* ── 화면 — 겹겹 틀을 걷고 제목만 ── */
#scPages .screen { background: transparent !important; border: 0 !important; box-shadow: none !important; }
#scPages .screen > .head { display: none !important; }   /* 세 탭의 큰 제목 줄 삭제 (11-09 사장님) — 위 탭이 이름을 말한다 */
#scPages .screen { margin-top: 16px !important; }
#scPages .screen > .body { padding: 0 !important; background: transparent !important; }

/* ── 판 한 겹 ── */
.panel, #scPages .pm-live-panel, #scPages .saju-panel {
  background: var(--lx-card) !important; border: 1px solid var(--lx-line) !important; border-radius: 16px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .045), 0 14px 34px rgba(0, 0, 0, .22) !important;
  -webkit-backdrop-filter: none !important; backdrop-filter: none !important; margin-bottom: 18px;
}
.panel { padding: 20px 22px; }
.panel .panel, .panel .pm-live-panel { background: none !important; border: 0 !important; border-top: 1px solid var(--lx-line-soft) !important; border-radius: 0 !important; box-shadow: none !important; padding: 14px 0 0 !important; margin: 14px 0 0 !important; }

/* ── 제목 ── */
.panel h4, .panel-title { font-family: var(--lx-serif) !important; color: var(--lx-gold-hi) !important; font-weight: 800 !important; font-size: 17px !important; letter-spacing: .03em; }

/* ── 체크리스트를 감싸던 접기 줄 — 틀만 걷는다 ── */
#scPages .pm-cl-fold { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; }
#scPages .pm-cl-fold > summary { display: none; }
#scPages .pm-cl-fold > div { background: none !important; border: 0 !important; text-align: center; opacity: .8; padding: 0 0 10px !important; }

/* ── 입력칸 ── */
input[type="text"], input[type="number"], input[type="date"], input[type="tel"], input:not([type]), select, textarea {
  background-color: var(--lx-field) !important; border-color: var(--lx-line) !important; transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--lx-gold) !important; box-shadow: 0 0 0 3px rgba(233, 196, 106, .13) !important; }

/* ── 주 단추 — 줄마다 긴 금띠였던 것을 알약으로 ── */
.btn-primary { display: block; width: auto !important; min-width: 260px; margin: 16px auto 0 !important; padding: 11px 36px !important; border-radius: 999px !important;
  background: linear-gradient(180deg, #ecd392, #c49b4c) !important; color: #1a1408 !important; border: 0 !important; font-weight: 700 !important; box-shadow: 0 6px 18px rgba(196, 155, 76, .22), inset 0 1px 0 rgba(255, 255, 255, .35) !important; }
.btn-primary:hover { filter: brightness(1.06); }

/* ── 작은 고름 단추 ── */
.wqc-btn, .weight-time-btn, .pm-hcf-hopt { background: rgba(255, 255, 255, .03) !important; border: 1px solid var(--lx-line-soft) !important; font-weight: 500 !important; transition: border-color .15s, background .15s; }
.wqc-btn:hover, .weight-time-btn:hover, .pm-hcf-hopt:hover { border-color: var(--lx-line) !important; }
.weight-time-btn.active, .wqc-btn.active, .wqc-btn.selected, .wqc-btn.on, .pm-hcf-hopt.on, .pm-hcf-hopt.active, .pm-hcf-hopt.selected, .role-toggle-btn.active {
  background: rgba(233, 196, 106, .16) !important; border-color: var(--lx-gold) !important; color: var(--lx-gold-hi) !important; box-shadow: none !important; }

/* ── 네 지표 · 변화 · 생활 습관 칸 ── */
.hc-metric-card, .pm-hcf-hcard, .pm-hcf-cross { background: rgba(255, 255, 255, .022) !important; border: 1px solid var(--lx-line-soft) !important; border-radius: 12px !important; box-shadow: none !important; }
.health-highlight-card { background: rgba(255, 255, 255, .022) !important; border: 1px solid var(--lx-line-soft) !important; border-top: 2px solid var(--lx-gold-lo) !important; border-radius: 12px !important; box-shadow: none !important; }
.health-highlight-card:nth-child(1) { border-top-color: #4fb79f !important; }
.health-highlight-card:nth-child(2) { border-top-color: #df5a80 !important; }

/* ── 체크리스트 틀 안 ── */
body:has(#appContent) { background: transparent !important; padding: 0 !important; }
.container { background: transparent !important; border: 0 !important; box-shadow: none !important; }
.header-bar { background: linear-gradient(120deg, rgba(233, 196, 106, .1), rgba(255, 255, 255, .015)) !important; border: 1px solid var(--lx-line) !important; border-radius: 12px !important; }
.mini-day { background: transparent !important; border: 1px solid transparent !important; border-radius: 9px !important; font-weight: 500 !important; }
.mini-day:hover { border-color: var(--lx-line) !important; }
.mini-day.today, .mini-day.selected { border-color: var(--lx-gold) !important; background: rgba(233, 196, 106, .12) !important; color: var(--lx-gold-hi) !important; font-weight: 700 !important; }
td.time-segment { background: rgba(233, 196, 106, .055) !important; color: var(--lx-gold-hi) !important; font-family: var(--lx-serif); letter-spacing: .06em; }
.couple-check-panel { overflow: hidden; padding: 0 !important; }
.couple-panel-hdr { background: rgba(233, 196, 106, .06) !important; border-left: 0 !important; border-bottom: 1px solid var(--lx-line-soft) !important; }

/* ── 폰 ── */
@media (max-width: 760px) {
  #scHero .emblem { width: 56px; height: 56px; }
  #scHero h1 { font-size: 26px; }
  #scHero .lead { font-size: 13px; }
  .panel { padding: 14px 12px; }
  .btn-primary { width: 100% !important; min-width: 0; }
  #dividerText { white-space: normal !important; }
}

/* ── 다듬기 ── */
html:has(#scHealthTop) { background: #070a0e; }
body:has(#scHealthTop) { background-attachment: scroll !important; }
#scPages .pm-cl-fold > div > div:first-of-type { text-align: center !important; background: none !important; border: 0 !important; }
.panel h4 span, .panel-title span { font-family: inherit; }
.panel h4 > span:not([class*="badge"]):not([class*="chip"]), .panel-title > span { font-family: 'Noto Sans KR', Pretendard, 'Malgun Gothic', sans-serif; font-weight: 400 !important; letter-spacing: 0; }
/* 곳곳의 민트색 기록 단추 — 금색 테 하나로 */
#scPages .panel button[style*="--mint"], .panel button[style*="--mint"] { background: rgba(233, 196, 106, .12) !important; border: 1px solid rgba(233, 196, 106, .55) !important; color: var(--lx-gold-hi) !important; border-radius: 999px !important; font-weight: 700 !important; }
.name-compare-note { background: rgba(255, 255, 255, .03) !important; border: 1px solid var(--lx-line-soft) !important; color: #c7c2b3 !important; border-radius: 10px !important; }
#scPages .pm-cl-fold > div:first-of-type { justify-content: center !important; }
@media (max-width: 760px) { .header-title { font-size: 16px !important; white-space: nowrap; } }
/* 틀 높이는 건강.html 이 내용에 맞춘다 — 안쪽이 틀 높이를 다시 밀어내지 않게 */
html:has(#appContent), body:has(#appContent) { min-height: 0 !important; height: auto !important; }

/* ── 📱 폰(760 이하)만 가로로 미는 줄 (사장님 11-10 「건강에서 가로 스크롤 — 네가 찾아서」) · 칸이 세 줄 네 줄로 꺾이던 곳 ── */
@media (max-width: 760px) {
  #scToday, .mini-cal-month-nav, .weight-quick-checks, #gwSlots, #htBox > div:first-child,
  div:has(> #cpTabH), div:has(> label > #cpTemp), div:has(> label > #gwW), div:has(> label > #gwTemp), div:has(> #gwExportBtn), .health-highlight-grid {
    display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(214, 178, 94, .55) rgba(255, 255, 255, .06); padding-bottom: 4px;
  }
  #scToday > *, .mini-cal-month-nav > *, .weight-quick-checks > *, #gwSlots > *, #htBox > div:first-child > *,
  div:has(> #cpTabH) > *, div:has(> label > #cpTemp) > *, div:has(> label > #gwW) > *, div:has(> label > #gwTemp) > *, div:has(> #gwExportBtn) > * { flex: 0 0 auto !important; white-space: nowrap; }
  .wqc-item { flex-wrap: nowrap !important; }
  .health-highlight-grid > * { flex: 0 0 200px !important; }
  /* 날짜별 기록의 값 칸 — 「산/소」처럼 글자 중간에서 꺾여 윗줄과 겹치던 것 */
  [id$="VitalList"] > div, [id$="BtList"] > div, [id$="GrowthList"] > div { white-space: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(214, 178, 94, .55) rgba(255, 255, 255, .06); padding-bottom: 6px; }
  [id$="VitalList"] > div > div, [id$="BtList"] > div > div, [id$="GrowthList"] > div > div { white-space: normal; }
}
@media (max-width: 760px) { /* 한 줄로 민 칸이 틀 전체를 넓히지 않게 */
  .weight-record-grid, .weight-record-grid > * { min-width: 0 !important; max-width: 100%; }
  .weight-quick-checks { width: 100%; min-width: 0 !important; max-width: 100%; box-sizing: border-box; }
}

/* 📱 책 단추 줄 — 폰(760 이하)만 한 줄로 두고 가로로 민다 (사장님 11-10) */
@media (max-width: 760px) {
  [data-ck-row] { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(214, 178, 94, .55) rgba(255, 255, 255, .06); padding-bottom: 4px; }
  [data-ck-row] > * { flex: 0 0 auto !important; white-space: nowrap; }
}

/* 📱 생활 습관 여섯 칸 — 폰(760 이하)만 한 줄로 두고 가로로 민다 (사장님 11-10) */
@media (max-width: 760px) {
  .pm-hcf-hgrid { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(214, 178, 94, .55) rgba(255, 255, 255, .06); padding-bottom: 4px; }
  .pm-hcf-hgrid > * { flex: 0 0 170px !important; }
}

/* 📱 검진표 저장 · 내보내기 단추 — 폰(760 이하)만 작게, 한 줄로 두고 가로로 민다 (사장님 11-10) */
@media (max-width: 760px) {
  div:has(> #ckSaveBtn), div:has(> [id$="ExportBtn"]) { display: flex !important; flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(214, 178, 94, .55) rgba(255, 255, 255, .06); padding-bottom: 4px; }
  div:has(> #ckSaveBtn) > *, div:has(> [id$="ExportBtn"]) > * { flex: 0 0 auto !important; min-width: 0 !important; width: auto !important; white-space: nowrap; }
}

/* 📱 폰(760 이하)은 가로를 끝까지 (사장님 11-10 「건강에서 가로 크기를 최대한 크게」) — 겹겹이던 좌우 여백을 걷는다 */
@media (max-width: 760px) {
  #scPages { padding: 0 4px !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
  #scPages .screen { margin-left: 0 !important; margin-right: 0 !important; width: auto !important; }
  #scHealthTop { width: calc(100% - 8px) !important; max-width: none !important; }
  #scPages .pm-cl-fold { margin: 0 !important; }
  #scPages .panel:not(.panel .panel), #scPages .pm-live-panel:not(.panel .pm-live-panel), #scPages .saju-panel:not(.panel .saju-panel),
  body:has(#appContent) .panel:not(.panel .panel) { padding-left: 8px !important; padding-right: 8px !important; }
  body:has(#appContent) .container { padding-left: 0 !important; padding-right: 0 !important; margin-left: 0 !important; margin-right: 0 !important; max-width: none !important; }
}
@media (max-width: 760px) { #scPages .panel.pm-cl-fold:not(.panel .panel) { padding: 0 !important; } }

/* 기록할 사람 · 체질 · 계정을 가로 한 줄로 (사장님 11-10) — 폰은 넘치는 만큼 가로로 민다 */
.input-row:has(#toggleHusband) { display: flex !important; flex-wrap: nowrap !important; align-items: flex-end !important; gap: 12px !important; }
.input-row:has(#toggleHusband) > .cp-field:has(#toggleHusband) { flex: 0 0 auto !important; width: auto !important; min-width: 0 !important; }
.input-row:has(#toggleHusband) > .cp-field:has(#constSelect) { flex: 1 1 140px !important; min-width: 130px !important; width: auto !important; }
.input-row:has(#toggleHusband) > .cp-field:has(#btnNewUser) { flex: 0 0 auto !important; width: auto !important; }
.input-row:has(#toggleHusband) .cp-label { white-space: nowrap; }
.input-row:has(#toggleHusband) .cp-label .status-text { margin-left: 14px !important; }
.input-row:has(#toggleHusband) .role-toggle { display: inline-flex !important; flex: 0 0 auto !important; width: auto !important; }
.input-row:has(#toggleHusband) .role-toggle-btn { flex: 0 0 auto !important; white-space: nowrap; }
@media (max-width: 760px) {
  .input-row:has(#toggleHusband) { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(214, 178, 94, .55) rgba(255, 255, 255, .06); padding-bottom: 4px; }
  .input-row:has(#toggleHusband) > .cp-field:has(#constSelect) { flex: 0 0 140px !important; }
}

/* 체질 칸은 「체질 미설정」 글자만큼만 (사장님 11-10 「최대한 줄여」) — 그 글자가 곧 「모르면 그대로」라 작은 안내는 뺀다 */
.input-row:has(#toggleHusband) > .cp-field:has(#constSelect) { flex: 0 0 auto !important; min-width: 0 !important; }
.input-row:has(#toggleHusband) .cp-field:has(#constSelect) .cp-hint { display: none; }
#constSelect { width: 122px !important; min-width: 0 !important; padding-left: 10px !important; padding-right: 4px !important; }

/* 부부체크 — 「가정 측정 기록 …」 줄을 없애고 위로 붙인다 (사장님 11-10) */
#scPages .pm-cl-fold > div:first-of-type { display: none !important; }
#scPages .screen[data-page="23"] { margin-top: 8px !important; }
#scPages .pm-cl-fold { margin-top: 0 !important; }
body:has(#appContent) h1:empty { display: none !important; }
body:has(#appContent) #appContent, body:has(#appContent) #appContent > .container:first-child { margin-top: 0 !important; padding-top: 0 !important; }

/* 📱 아침 · 점심 · 저녁 식사 칸 — 폰(760 이하)만 나란히 두고 가로로 민다 (사장님 11-10) */
@media (max-width: 760px) {
  .meal-grid { display: flex !important; flex-wrap: nowrap !important; gap: 12px !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(214, 178, 94, .55) rgba(255, 255, 255, .06); padding-bottom: 6px; }
  .meal-grid > * { flex: 0 0 230px !important; min-width: 0; }
}

/* 잠 일지 — 저장 · 모아보기 · 무리 나눠 보기를 가로 한 줄로 (사장님 11-10) · 결과 글은 그 아래로 */
#sleepPanel { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: 8px; }
#sleepPanel > * { flex: 0 0 100%; min-width: 0; }
#sleepPanel > #slSave { flex: 0 0 auto !important; order: 1; margin: 14px 0 0 !important; }
#sleepPanel > div:has(> #slMine) { flex: 0 0 auto !important; order: 2; margin: 14px 0 0 !important; flex-wrap: nowrap !important; }
#sleepPanel > #slNight { order: 3; }
#sleepPanel > #slSum { order: 4; }
/* 잠 일지 입력 — 세 항목을 상자로 나누고(이름표 · 설명 · 입력칸 구별), 입력칸과 단위를 붙인다 (사장님 11-10 「설명을 구별 · 시간과 뒤를 연결」) */
#sleepPanel > div:has(> div > #slHours) { gap: 10px !important; align-items: stretch !important; }
#sleepPanel > div:has(> div > #slHours) > div { display: block; padding: 8px 12px 10px; border: 1px solid rgba(214,178,94,.28); border-radius: 10px; background: rgba(214,178,94,.04); }
#sleepPanel > div:has(> div > #slHours) > div > .wqc-label { flex: 0 0 100%; margin: 0 0 6px !important; font-size: 14.5px !important; font-weight: 700 !important; color: #e8d6a8 !important; line-height: 1.35; }
#sleepPanel > div:has(> div > #slHours) > div > .wqc-label > span { display: block; margin-top: 2px; font-size: 12px !important; font-weight: 400 !important; color: var(--muted, #9aa7ad) !important; opacity: 1 !important; }
#sleepPanel > div:has(> div > #slHours) > div:nth-child(2) > .wqc-label::after { content: '셋 가운데 하나를 누르세요'; display: block; margin-top: 2px; font-size: 12px; font-weight: 400; color: var(--muted, #9aa7ad); }
#sleepPanel > div:has(> div > #slHours) .weight-unit { margin: 0 !important; }
/* 폰 — 세 상자를 한 줄로 두고 가로로 민다 (사장님 11-10) */
@media (max-width: 760px) {
  #sleepPanel > div:has(> div > #slHours) { flex-wrap: nowrap !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; scrollbar-color: rgba(214,178,94,.55) rgba(255,255,255,.06); padding-bottom: 4px; }
  #sleepPanel > div:has(> div > #slHours) > div { flex: 0 0 auto; white-space: nowrap; }
  #sleepPanel > div:has(> div > #slHours) #slQBtns { flex-wrap: nowrap !important; }
}
/* 아래 설명 두 줄 — 입력과 구별되게 한 상자로 묶는다 (style 글은 글꼴 정리 때 띄어 쓴 꼴로 바뀌므로 자리로 고른다) */
#sleepPanel > div:has(> div > #slHours) ~ div:not([id]):not(:has(button)) { margin: 0 !important; padding: 2px 12px; border-left: 3px solid rgba(214,178,94,.55); background: rgba(255,255,255,.03); font-size: 12.5px !important; line-height: 1.6; }
#sleepPanel > div:has(> div > #slHours) + div { margin-top: 10px !important; padding-top: 6px; border-radius: 0 8px 0 0; }
#sleepPanel > div:has(> div > #slHours) + div + div { padding-bottom: 6px; border-radius: 0 0 8px 0; }
#sleepPanel > div:has(> div > #slHours) ~ div:not([id]):not(:has(button))::before { content: "ⓘ "; color: #d4af37; }

/* 폰 — 칸 제목(집에서 잰 값 · 바이탈 · 병원 · 피검사 · 자료)이 길어 두 줄로 꺾이며 📚 단추와 엉켰다 → 한 줄로 두고 가로로 민다 (사장님 11-10) */
@media (max-width: 760px) {
  body:has(#sleepPanel) .panel > h4 { flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  body:has(#sleepPanel) .panel > h4::-webkit-scrollbar { display: none; }
  body:has(#sleepPanel) .panel > h4 > span { flex: none; white-space: nowrap !important; }
  body:has(#sleepPanel) .panel > h4 > button { flex: none !important; }
  #cpArchiveSummary { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; }
  #cpArchiveSummary > div { white-space: nowrap; width: max-content; min-width: 100%; box-sizing: border-box; }
}

/* 폰 — 「○○ 건강 체크」 머리줄: 「나 (본인 확인)」이 아랫줄로 떨어졌다 → 한 줄, 길면 가로로 민다 (사장님 11-10) */
@media (max-width: 760px) {
  .couple-panel-hdr { display: flex !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 6px !important; }
  .couple-panel-hdr::-webkit-scrollbar { display: none; }
  .couple-panel-hdr > * { flex: none !important; overflow: visible !important; white-space: nowrap !important; margin-top: 0 !important; }
  .couple-panel-hdr > .ck2Book { margin-left: auto !important; }
}

/* 폰 — 성장관찰 칸 제목이 길어 두 줄로 꺾였다 → 한 줄, 길면 가로로 민다 (사장님 11-10) */
@media (max-width: 760px) {
  article[data-page="25"] .panel > h4, article[data-page="25"] .pm-live-panel > div:first-child { display: flex !important; align-items: center; flex-wrap: nowrap !important; white-space: nowrap !important; overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px; }
  article[data-page="25"] .panel > h4::-webkit-scrollbar, article[data-page="25"] .pm-live-panel > div:first-child::-webkit-scrollbar { display: none; }
  article[data-page="25"] .panel > h4 > *, article[data-page="25"] .pm-live-panel > div:first-child > * { flex: none !important; white-space: nowrap !important; }
}

/* 폰 — 검진 탭 · 부부체크 탭 칸 제목을 모두 한 줄로, 길면 가로로 민다 (사장님 11-10) */
@media (max-width: 760px) {
  article[data-page="16"] .panel > h4,
  article[data-page="16"] .panel > div:first-child:has(> h4),
  body:has(#sleepPanel) .panel > h2.panel-title {
    display: flex !important; align-items: center !important; flex-wrap: nowrap !important; white-space: nowrap !important;
    overflow-x: auto; overflow-y: hidden; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px;
  }
  article[data-page="16"] .panel > h4::-webkit-scrollbar,
  article[data-page="16"] .panel > div:first-child:has(> h4)::-webkit-scrollbar,
  body:has(#sleepPanel) .panel > h2.panel-title::-webkit-scrollbar { display: none; }
  article[data-page="16"] .panel > h4 > *,
  article[data-page="16"] .panel > div:first-child:has(> h4) > *,
  article[data-page="16"] .panel > div:first-child:has(> h4) > h4 > *,
  body:has(#sleepPanel) .panel > h2.panel-title > * { flex: none !important; white-space: nowrap !important; }
}

/* 폰 — 「▾ 펼쳐서 입력 / ▴ 접기」는 제목 줄을 밀지 않아도 늘 보이게 오른쪽 끝에 붙인다 (사장님 11-10 「뒤로 가서 안 보이면 처음에는 못 찾는다」) */
@media (max-width: 760px) {
  article[data-page="16"] .panel > div:first-child:has(> h4) > #ckFormToggle {
    position: sticky !important; right: 0; z-index: 2; margin-left: auto !important;
    background: linear-gradient(rgba(212,175,55,.28), rgba(212,175,55,.28)), #172124 !important;
    box-shadow: -10px 0 10px 2px #141c1f !important;
  }
}