/* A4 결과지 한 장 — Dr.PMA 웹 결과지(pidu_web/css/sheet.css)를 그대로 옮김(2026-10-21). PEA 에서 바꾼 것은 맨 아래 블록.
   원래 머리말: Dr.PMA 새 보고서(F2) 1쪽.
   견본: app_logos/site/pma-design/report-f2.html 의 첫 `.a4`.
   앱 PDF(`lib/features/report/alignment_page.dart`)도 같은 견본으로 바뀐다.

   종이에 찍히므로 흰 바탕 + 차콜 글자. 핑크·블루는 종이에서 읽히게
   화면의 파스텔보다 진하게 쓴다. 점수 띠만 앱 결과 화면과 같은 차콜이다.

   **폭을 794px 로 박는다.** A4 한 장에 꽉 찬 배치라, 폰 폭에 맞춰 늘였다
   줄였다 하면 칸이 무너진다. 종이 한 장을 그대로 두고 화면 폭에 맞게 통째로
   줄여 보여 준다(확대는 두 손가락으로, `result.js` 의 fitSheet). 폭을 바꾸면
   거기 794 도 함께 바꿀 것. */

.sheet {
  --ink: #121417;
  --ink2: #3A3F47;
  --muted: #6E737C;
  --line: #E3E5E8;
  --soft: #F4F5F6;
  --pink: #D63F7A;
  --pink-soft: #FBE3EC;
  --blue: #2F78D6;
  --blue-soft: #E3EEFB;
  --gray-soft: #ECEDEF;

  display: flex; flex-direction: column;
  width: 794px;
  min-height: 1123px;
  box-sizing: border-box;
  padding: 30px 34px 22px;
  background: #fff;
  color: var(--ink);
  font-family: "Pretendard Variable", "Pretendard", "Malgun Gothic", sans-serif;
  font-size: 12px;
  line-height: 1.45;
  letter-spacing: 0;
  transform-origin: top left;
}
.sheet *, .sheet *::before, .sheet *::after { box-sizing: border-box; }
.sheet h1, .sheet h2, .sheet p { margin: 0; }

/* 화면 폭에 맞춰 통째로 줄인다. 줄인 만큼 높이도 줄어야 아래가 비지 않는다. */
.sheet-wrap { overflow: hidden; }

/* ---- 머리글: 굵은 차콜 윗줄 + 아이콘 + 제목, 오른쪽 연구코드 ---- */
.sheet .hd {
  display: flex; align-items: flex-end; justify-content: space-between;
  border-top: 3px solid var(--ink); padding-top: 12px;
}
.sheet .hd .l { display: flex; align-items: center; gap: 12px; }
.sheet .hd .l img { width: 40px; height: 40px; border-radius: 9px; display: block; }
.sheet .hd h1 { font-size: 25px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; }
.sheet .hd .l small { display: block; font-size: 10.5px; color: var(--muted); font-weight: 700; letter-spacing: .1em; margin-top: 2px; }
.sheet .hd .r { text-align: right; }
.sheet .hd .r small { display: block; font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: .08em; }
.sheet .hd .r b { font-size: 22px; font-weight: 700; letter-spacing: .02em; }

/* ---- 정보 줄: 위아래 가는 선만 ---- */
.sheet .info {
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr));
  margin: 10px 0 10px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.sheet .info div { padding: 7px 0; min-width: 0; }
.sheet .info small { display: block; font-size: 9.5px; color: var(--muted); font-weight: 700; letter-spacing: .06em; }
.sheet .info b { display: block; font-size: 13.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---- 점수 띠(차콜) ----
   점수 · 단계 · 직전 대비 · 최근 추이를 한 띠에. 다시 오는 사람에게 가장
   궁금한 것이 "저번보다 나아졌나"라서 점수에서 눈을 떼지 않고 읽혀야 한다. */
.sheet .band {
  display: grid; grid-template-columns: 170px minmax(0, 1fr) 160px;
  background: var(--ink); color: #fff;
  border-radius: 6px; overflow: hidden;
  margin-bottom: 14px;
}
.sheet .band.solo { grid-template-columns: 170px minmax(0, 1fr); }
.sheet .band .sc { padding: 12px 16px; display: flex; align-items: baseline; gap: 4px; }
.sheet .band .sc b { font-size: 56px; font-weight: 700; letter-spacing: -0.05em; line-height: .95; }
.sheet .band .sc span { font-size: 14px; color: #A8ADB6; }
.sheet .band .st {
  display: flex; flex-direction: column; justify-content: center; gap: 3px;
  padding: 12px 10px 12px 16px; border-left: 1px solid #2A2E35; min-width: 0;
}
.sheet .band .st b { font-size: 15px; font-weight: 700; }
.sheet .band .st em { font-style: normal; color: #9CC9FF; font-weight: 700; font-size: 13px; }
.sheet .band .st em.down { color: #F9A8C9; }
.sheet .band .st em:empty { display: none; }
.sheet .band .st small { color: #8B919C; font-size: 10px; }
.sheet .band .tr { border-left: 1px solid #2A2E35; padding: 10px 14px; }
.sheet .band .tr small { display: block; font-size: 9.5px; color: #8B919C; font-weight: 700; letter-spacing: .06em; }
.sheet .band .tr svg { display: block; width: 100%; height: 40px; }
.sheet .band .tr b { font-size: 12px; color: #9CC9FF; white-space: nowrap; }

/* ---- 방향 셋 ---- */
.sheet .dirs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 12px; }
.sheet .vh {
  display: flex; justify-content: space-between; align-items: baseline;
  border-top: 2px solid var(--ink); padding-top: 5px; margin-bottom: 6px;
}
.sheet .vh b { font-size: 15px; font-weight: 700; }
.sheet .vh span { font-size: 10px; color: var(--muted); font-weight: 700; letter-spacing: .06em; }

/* 사진은 찍은 그대로 넣는다. 둘레만 연회색 — 예전 남색 바탕은 걷었다. */
.sheet .pic {
  height: 188px; border-radius: 4px; background: var(--soft);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden; margin-bottom: 6px;
}
.sheet .pic canvas { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; border-radius: 0; background: none; }

.sheet table.mt { width: 100%; border-collapse: collapse; table-layout: auto; }
.sheet table.mt td {
  padding: 4px 0; border: 0; border-top: 1px solid var(--line);
  font-size: 11.5px; vertical-align: middle; text-align: left; white-space: nowrap;
}
/* 이름이 길면 줄을 바꾸지 않고 눌러 담는다. 두 줄이 되면 세 칸의 지표
   줄이 서로 어긋난다. */
.sheet table.mt td.n { color: var(--ink2); overflow: hidden; text-overflow: ellipsis; max-width: 0; width: 100%; }
.sheet table.mt td.v { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; padding-right: 6px; }
.sheet table.mt td.s { width: 34px; text-align: right; }
.sheet table.mt tr.risk td.v { color: var(--pink); }

/* 상태 알약 */
.sheet .p { display: inline-block; font-size: 9.5px; font-weight: 800; padding: 1px 6px; border-radius: 3px; line-height: 1.5; }
.sheet .p.ok { background: var(--blue-soft); color: var(--blue); }
.sheet .p.wa { background: var(--gray-soft); color: var(--ink2); }
.sheet .p.bad { background: var(--pink-soft); color: var(--pink); }
.sheet .p.ref { color: var(--muted); box-shadow: inset 0 0 0 1px var(--line); }

/* ---- 아래 칸들: 굵은 차콜 윗줄로 나눈다 ---- */
.sheet .row3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 12px; }
.sheet .two { display: grid; grid-template-columns: 1.4fr 1fr; gap: 14px; }
.sheet .sec { border-top: 2px solid var(--ink); padding-top: 6px; min-width: 0; }
.sheet .sec > h2 { font-size: 13.5px; font-weight: 700; margin-bottom: 6px; }
.sheet .none { font-size: 10px; color: var(--muted); margin-top: 6px; }
.sheet .txt { font-size: 11.5px; }

/* 부위별: 차콜 막대, 75점 아래는 핑크 */
.sheet .rg { display: grid; grid-template-columns: 48px 1fr 26px; gap: 6px; align-items: center; margin: 8px 0; font-size: 12px; }
.sheet .rg i { display: block; height: 7px; border-radius: 4px; background: var(--soft); overflow: hidden; }
.sheet .rg i u { display: block; height: 100%; border-radius: 4px; background: var(--ink); text-decoration: none; }
.sheet .rg.low i u { background: var(--pink); }
.sheet .rg b { text-align: right; font-weight: 700; }

/* 먼저 볼 부위: 핑크 동그라미 번호 */
.sheet .pr .fi { display: grid; grid-template-columns: 22px 1fr; gap: 6px; padding: 6px 0; border-top: 1px solid var(--line); }
.sheet .pr .fi:first-of-type { border-top: 0; }
.sheet .pr em {
  font-style: normal; width: 20px; height: 20px; border-radius: 50%;
  background: var(--pink); color: #fff; font-weight: 800; font-size: 11px;
  text-align: center; line-height: 20px;
}
.sheet .pr b { display: block; font-size: 12.5px; font-weight: 700; }
.sheet .pr small { font-size: 10.5px; color: var(--muted); }

/* 근육 지도 */
.sheet .mapbox { display: flex; justify-content: center; }
.sheet .mapbox canvas { max-width: 100%; max-height: 140px; width: auto; height: auto; display: block; }
.sheet .maplegend { display: flex; justify-content: center; gap: 14px; margin-top: 5px; font-size: 9.5px; color: var(--muted); font-weight: 700; }
.sheet .maplegend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 4px; vertical-align: 0; }
.sheet .maplegend i.t { background: var(--pink); }
.sheet .maplegend i.w { background: var(--blue); }

/* 이번에 나온 근육: 핑크·블루 칩 */
.sheet .mus .grp { margin: 2px 0 6px; line-height: 1.9; }
.sheet .mus .lab { font-size: 11.5px; font-weight: 800; margin-right: 6px; }
.sheet .mus .lab.t { color: var(--pink); }
.sheet .mus .lab.w { color: var(--blue); }
.sheet .chip { display: inline-block; width: auto; height: auto; font-size: 10.5px; font-weight: 700; border-radius: 3px; padding: 1px 7px; margin: 0 3px 0 0; line-height: 1.6; }
.sheet .chip.t { background: var(--pink-soft); color: var(--pink); }
.sheet .chip.w { background: var(--blue-soft); color: var(--blue); }

/* 할 운동 */
.sheet .exc .er { display: grid; grid-template-columns: 38px 1fr auto; padding: 5px 0; border-top: 1px solid var(--line); font-size: 12px; align-items: center; gap: 4px; }
.sheet .exc .er:first-of-type { border-top: 0; }
.sheet .exc .er i { font-style: normal; font-size: 9.5px; font-weight: 800; }
.sheet .exc .er i.t { color: var(--pink); }
.sheet .exc .er i.w { color: var(--blue); }
.sheet .exc .er b { font-weight: 700; }
.sheet .exc .er span { color: var(--muted); font-size: 11px; white-space: nowrap; }

/* 아래 고지. 종이 맨 아래에 붙인다. */
.sheet .ft {
  margin-top: auto; padding-top: 7px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; gap: 20px;
  font-size: 9px; color: var(--muted); line-height: 1.5;
}
.sheet .ft .p { font-size: 9px; padding: 0 5px; }
.sheet .ft .brandline { flex: none; text-align: right; white-space: nowrap; }
.sheet .two { margin-bottom: 10px; }

@media print {
  /* @page 여백 0 은 result.js printSheet 가 인쇄하는 동안만 넣는다(전후 비교 인쇄는 style.css 12mm 그대로) */
  body { background: #fff; }
  .sheet { transform: none !important; box-shadow: none; }
  .sheet-wrap { height: auto !important; }
}

/* ---- PEA 에서 바꾼 것(2026-10-21) ---- */
/* 추천 운동을 싣지 않아 '이번에 나온 근육' 칸이 한 줄을 다 쓴다 */
.sheet .two.one { grid-template-columns: 1fr; }
/* 머리글 오른쪽: 연구코드 대신 업체(학원) 로고 또는 이름 */
.sheet .hd .r img.org { display: block; max-height: 40px; max-width: 170px; object-fit: contain; margin-left: auto; }
.sheet .hd .r b.orgname { font-size: 16px; letter-spacing: 0; }

/* 결과지 아래: 저장 칸·방향별 다시 찍기(화면에만) */
#postureResult .sheet-wrap { border-radius: 4px; box-shadow: 0 1px 3px rgba(0,0,0,.08); background: #fff; }
#postureResult .save-card { margin-top: 14px; }
.retake-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 12px 0 4px; }
.retake-row .hint { width: 100%; margin: 0; }

/* 한 장 배치: 왼쪽 1/3 부위별 점수 + 근육 지도, 오른쪽 2/3 소견 */
.sheet .row3.pea { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); margin-bottom: 8px; }
.sheet .row3.pea .stack { display: grid; gap: 10px; align-content: start; min-width: 0; }
/* PEA 는 한 장이라 사진 칸·지표 줄을 조금 낮춘다 */
.sheet:has(.row3.pea) .pic { height: 172px; }
.sheet:has(.row3.pea) table.mt td { padding-top: 3px; padding-bottom: 3px; }
/* 소견 칸. 소견마다 번호·제목·값·점수·단계 / 허용폭 눈금 / 이유 / 늘일·강화할 근육 / 흔한 경우 */
.sheet .fds h2 small { font-size: 10.5px; color: var(--muted); font-weight: 600; margin-left: 6px; letter-spacing: 0; }
.sheet .fdl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 2px; }
.sheet .fd { border-top: 1px solid var(--line); padding: 5px 0 4px; min-width: 0; break-inside: avoid; }
.sheet .fd:first-child { border-top: 0; }
.sheet .fd h3 { display: flex; gap: 6px; align-items: center; font-size: 12.5px; font-weight: 700; margin: 0; line-height: 1.35; }
.sheet .fd h3 em { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--ink); color: #fff; font-style: normal; font-size: 10.5px; font-weight: 800; display: grid; place-items: center; }
.sheet .fd.risk h3 em { background: var(--pink); }
.sheet .fd h3 span:first-of-type { flex: 1; min-width: 0; }
.sheet .fd h3 small { flex: none; font-size: 10px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.sheet .fd .gg { position: relative; height: 4px; border-radius: 2px; margin: 4px 0 3px 24px;
  background: linear-gradient(90deg, var(--blue-soft) 0 33.33%, var(--gray-soft) 33.33% 66.66%, var(--pink-soft) 66.66%); }
.sheet .fd .gg i { position: absolute; top: -2px; width: 3px; height: 8px; margin-left: -1.5px; border-radius: 1px; background: var(--ink); }
.sheet .fd p { font-size: 10.5px; line-height: 1.45; color: var(--ink2); margin: 0 0 2px 24px; }
.sheet .fd .grp { margin-left: 24px; line-height: 1.75; }
.sheet .fd .grp .chip + .m { margin-left: 8px; }
.sheet .fd .m { font-size: 9.5px; font-weight: 800; margin-right: 3px; }
.sheet .fd .m.t { color: var(--pink); }
.sheet .fd .m.w { color: var(--blue); }
.sheet .fd .chip { font-size: 9.5px; padding: 0 5px; }
.sheet .fd .notes { font-size: 9.5px; color: var(--muted); margin-left: 24px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sheet .fds > .none { margin-top: 4px; }
/* 한 장에 안 들어가면(result.js fitOnePage) 단계적으로 줄인다: 이유는 끝까지 남긴다 */
.sheet.tight .pic { height: 150px !important; }
.sheet.tight .fd .notes { display: none; }
.sheet.tight .fd p { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sheet.tighter .pic { height: 132px !important; }
.sheet.tighter .fd .gg { display: none; }
.sheet.tighter .fd p { -webkit-line-clamp: 1; }
.sheet.tighter .fd { padding: 3px 0 2px; }
/* 소견이 아주 많을 때 마지막 단계: 이유 줄을 빼고 제목·값·근육만 */
.sheet.tightest .pic { height: 120px !important; }
.sheet.tightest .fd p { display: none; }
.sheet.tightest .fd .grp { line-height: 1.55; }
.sheet.tightest table.mt td { padding-top: 2px !important; padding-bottom: 2px !important; }

/* ---- 전후 비교 보고서(records/compare.js): 구성은 그대로, 머리글·색만 결과지에 맞춤(2026-10-21) ---- */
.cmp-report {
  --ink: #121417; --ink2: #3A3F47; --muted-ink: #6E737C; --hair: #E3E5E8;
  --pink: #D63F7A; --pink-soft: #FBE3EC; --blue: #2F78D6; --blue-soft: #E3EEFB; --gray-soft: #ECEDEF;
  color: var(--ink);
}
.cmp-report .rep-hd { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; border-top: 3px solid var(--ink); padding: 12px 0 10px; margin-bottom: 12px; }
.cmp-report .rep-hd .l { display: flex; align-items: center; gap: 12px; }
.cmp-report .rep-hd .l img { width: 40px; height: 40px; border-radius: 9px; display: block; }
.cmp-report .rep-hd h1 { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.15; margin: 0; }
.cmp-report .rep-hd small { display: block; font-size: 10.5px; color: var(--muted-ink); font-weight: 700; letter-spacing: .1em; margin-top: 2px; }
.cmp-report .rep-hd .r { text-align: right; }
.cmp-report .rep-hd .r img.org { display: block; max-height: 40px; max-width: 170px; object-fit: contain; margin-left: auto; }
.cmp-report .rep-hd .r b { font-size: 16px; }
.cmp-report .card { border-radius: 4px; box-shadow: none; border: 1px solid var(--hair); }
.cmp-report .card h2 { border-top: 2px solid var(--ink); padding-top: 6px; }
.cmp-report .cmp-head { border-top: 0; background: var(--ink); color: #fff; }
.cmp-report .cmp-head .sub, .cmp-report .cmp-score small, .cmp-report .cmp-score > .ph { color: rgba(255,255,255,.7); }
.cmp-report .cmp-score b { color: rgba(255,255,255,.55); }
.cmp-report .cmp-score .after b { color: #fff; }
.cmp-report .delta.up { background: var(--blue-soft); color: var(--blue); }
.cmp-report .delta.down { background: var(--pink-soft); color: var(--pink); }
.cmp-report .delta.flat { background: var(--gray-soft); color: var(--ink2); }
.cmp-report .lv.keep { background: var(--blue-soft); color: var(--blue); }
.cmp-report .lv.watch { background: var(--gray-soft); color: var(--ink2); }
.cmp-report .lv.risk { background: var(--pink-soft); color: var(--pink); }
.cmp-report .cmp-view .shot, .cmp-report .no-shot { border-radius: 4px; }
.cmp-report .cmp-view figure:last-child figcaption { color: var(--ink); }
@media print {
  .cmp-report .cmp-head { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .cmp-report .card h2 { break-after: avoid; }
}

/* 결과지 인쇄: 종이(sheet)만 찍는다 */
@media print {
  body.printing-sheet #postureResult > :not(.sheet-wrap) { display: none !important; }
  body.printing-sheet #postureResult .sheet-wrap { box-shadow: none; border-radius: 0; }
  body.printing-sheet main:not(#postureResult), body.printing-sheet .side-nav, body.printing-sheet .topbar { display: none !important; }
  body.printing-sheet #postureResult { padding: 0 !important; margin: 0 !important; max-width: none !important; }
}