:root {
  --bg: #eef1f4;
  --panel: #ffffff;
  --ink: #15202b;
  --muted: #6b7885;
  --line: #d5dce3;
  --line-dark: #aab4be;
  --blue: #1769e0;
  --blue-soft: #e8f1ff;
  --cyan: #27d7d1;
  --yellow: #f1c84b;
  --magenta: #ec4d9c;
  --red: #e1564f;
  --green: #2b9c63;
  --mono: "IBM Plex Mono", Consolas, monospace;
}

* { box-sizing: border-box; }
html, body { min-height: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink); font-family: "Pretendard", system-ui, sans-serif; }
button, input { font: inherit; }
button { color: inherit; }

.app-header {
  height: 68px; padding: 0 22px; display: flex; align-items: center; justify-content: space-between;
  background: #111a23; color: white; border-bottom: 1px solid #263441;
}
.title-block { display: flex; align-items: center; gap: 14px; }
.app-index { font: 600 11px var(--mono); padding: 7px 8px; color: var(--cyan); border: 1px solid rgba(39,215,209,.45); }
.title-block h1 { margin: 0; font-size: 17px; letter-spacing: -.03em; }
.title-block p { margin: 3px 0 0; font: 500 9px var(--mono); color: #8ea0b0; letter-spacing: .12em; }
.header-state { display: flex; align-items: center; gap: 8px; font: 500 9px var(--mono); color: #8ea0b0; }
.header-state b { color: white; margin-left: 6px; }
.state-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 4px rgba(39,215,209,.12); }

.workspace { min-height: calc(100vh - 68px); display: grid; grid-template-columns: 310px minmax(480px,1fr) 360px; }
body.member-mode .workspace { grid-template-columns: 310px minmax(480px,1fr); }
body.member-mode .result-panel { display: none; }
body.member-mode .layer-toggles label { display: none; }
body.member-mode .layer-toggles { gap: 8px; }
body.member-mode .viewer-footer { display: none; }
body.member-mode .member-tabs { display: none; }
body.member-mode .muscle-side-panel { display: none !important; }
body.member-mode .canvas-shell.has-muscle-panel .member-summary-card { right: 8px; left: auto; transform: translateX(8px); }
/* [이식] 강사 권한 분기 — 회원(비강사) 화면에서 강사 전용 UI 숨김 */
body.member-mode:not(.coach-access) .audience-switch,
body.member-mode:not(.coach-access) .layer-toggles > label,
body.member-mode:not(.coach-access) #final-result-button,
body.member-mode:not(.coach-access) #manual-button,
body.member-mode:not(.coach-access) .technical-note,
body.member-mode:not(.coach-access) .viewer-footer,
body.member-mode:not(.coach-access) .muscle-side-panel { display: none !important; }
body:not(.coach-access) [data-coach-only] { display: none !important; }
.control-panel, .result-panel { background: var(--panel); }
.control-panel { border-right: 1px solid var(--line); overflow-y: auto; max-height: calc(100vh - 68px); }
.result-panel { border-left: 1px solid var(--line); overflow-y: auto; max-height: calc(100vh - 68px); }
.panel-section { padding: 22px; border-bottom: 1px solid var(--line); }
.section-label { display: flex; align-items: center; gap: 8px; margin-bottom: 15px; font: 600 10px var(--mono); letter-spacing: .06em; text-transform: uppercase; }
.section-label > span { color: var(--blue); }
.section-label.compact { margin: 0 0 5px; }

.capture-diagram { height: 240px; background: #f7f9fb; border: 1px solid var(--line); color: #52616e; }
.capture-diagram svg { width: 100%; height: 100%; }
.capture-diagram .axis { fill: none; stroke: var(--blue); stroke-width: 1; stroke-dasharray: 4 4; }
.capture-diagram .body { fill: none; stroke: #17232e; stroke-width: 7; stroke-linecap: round; stroke-linejoin: round; }
.capture-diagram circle.body { fill: #f7f9fb; }
.capture-diagram .measure { fill: none; stroke: var(--cyan); stroke-width: 2; }
.capture-diagram .dots circle { fill: var(--yellow); stroke: #17232e; stroke-width: 2; }
.capture-diagram text { font: 600 8px var(--mono); fill: #71808d; letter-spacing: .08em; }
.capture-diagram text.side-mark { font-size: 18px; fill: #e1564f; }
.capture-rules { list-style: none; margin: 14px 0 0; padding: 0; }
.capture-rules li { display: grid; grid-template-columns: 46px 1fr; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 11px; }
.capture-rules b { font-size: 10px; }.capture-rules span { color: var(--muted); }

.capture-progress { position: sticky; top: 0; z-index: 8; display: grid; grid-template-columns: repeat(3, 1fr); background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 5px 15px rgba(21,32,43,.05); }
.capture-step { min-width: 0; padding: 12px 5px 10px; display: grid; gap: 2px; justify-items: center; border: 0; border-right: 1px solid var(--line); background: #fff; cursor: pointer; }
.capture-step:last-child { border-right: 0; }
.capture-step span { color: var(--line-dark); font: 600 8px var(--mono); }
.capture-step b { font-size: 11px; }
.capture-step small { color: var(--muted); font-size: 8px; }
.capture-step:disabled { cursor: not-allowed; opacity: .58; }
.capture-step.is-active { box-shadow: inset 0 -3px 0 var(--blue); background: var(--blue-soft); }
.capture-step.is-active span, .capture-step.is-active b { color: var(--blue); }
.capture-step.is-complete { box-shadow: inset 0 -3px 0 var(--green); }
.capture-step.is-complete span { color: var(--green); }
.capture-step.is-complete small { color: var(--green); font-weight: 700; }

.file-drop { height: 112px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border: 1px dashed var(--line-dark); background: #f8fafc; cursor: pointer; transition: .18s; text-align: center; }
.file-drop:hover, .file-drop:focus-within { border-color: var(--blue); background: var(--blue-soft); }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload-icon { width: 26px; height: 26px; display: grid; place-items: center; border-radius: 50%; background: var(--blue); color: white; font-size: 17px; }
.file-drop strong { font-size: 12px; }.file-drop small { color: var(--muted); font: 400 9px var(--mono); }
.view-upload { position: relative; scroll-margin-top: 74px; }
.view-upload[hidden] { display: none; }
.view-upload.is-current { box-shadow: inset 4px 0 0 var(--blue); }
.view-upload.is-complete { box-shadow: inset 4px 0 0 var(--green); }
.view-upload-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; }
.view-upload-head .section-label { margin-bottom: 15px; }
.view-state { flex: 0 0 auto; padding: 4px 6px; border: 1px solid var(--line); color: var(--muted); background: #f6f8fa; font: 600 8px var(--mono); }
.view-upload.is-current .view-state { border-color: #a5c7f7; color: var(--blue); background: var(--blue-soft); }
.view-upload.is-complete .view-state { border-color: #a7d7bd; color: var(--green); background: #eef9f3; }
.side-direction { margin: 0 0 10px; padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; border: 1px solid var(--line); }
.side-direction legend { padding: 0 5px; color: var(--muted); font-size: 9px; }
.side-direction label { padding: 8px 6px; display: flex; align-items: center; gap: 5px; background: #f5f7f9; font-size: 9px; cursor: pointer; }
.side-direction input { accent-color: var(--blue); }
.side-direction b { color: var(--red); font: 700 12px var(--mono); }
.file-drop-preview { position: relative; overflow: hidden; }
.file-drop-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .2; filter: saturate(.6); }
.file-drop-preview > span, .file-drop-preview > strong, .file-drop-preview > small { position: relative; z-index: 1; }
.back-orientation { margin-bottom: 10px; padding: 10px 13px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; background: #111a23; color: white; border: 1px solid #334452; }
.back-orientation span:last-child { text-align: right; }
.back-orientation b { display: block; color: #ff5c5c; font: 700 20px var(--mono); }
.back-orientation small { display: block; color: #a9b5bf; font-size: 8px; }
.back-orientation i { color: #7f909d; font: normal 600 8px var(--mono); }
.technical-note.is-warning { color: #a84842; }
.capture-complete { margin: 14px; padding: 14px; display: grid; gap: 4px; border: 1px solid #83c8a4; background: #eef9f3; }
.capture-complete[hidden] { display: none; }
.capture-complete b { color: var(--green); font-size: 11px; }
.capture-complete span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.capture-complete button { margin-top: 7px; height: 36px; border: 0; background: var(--green); color: white; font-size: 10px; font-weight: 700; cursor: pointer; }
.primary-button, .secondary-button { border: 0; cursor: pointer; font-weight: 700; }
.primary-button { width: 100%; height: 43px; margin-top: 10px; background: var(--blue); color: white; font-size: 12px; }
.primary-button:disabled, .secondary-button:disabled { opacity: .38; cursor: not-allowed; }
.button-row { display: grid; grid-template-columns: 1.4fr .6fr; gap: 7px; margin-top: 7px; }
.secondary-button { height: 36px; background: white; border: 1px solid var(--line-dark); font-size: 10px; }
.technical-note { margin: 12px 0 0; color: var(--muted); font-size: 9px; line-height: 1.55; }
.live-section { background: linear-gradient(180deg, #ffffff, #f6fbff); }
.live-consent { margin: 10px 0; padding: 9px; display: flex; align-items: flex-start; gap: 7px; color: #3c4a56; background: #eef6ff; border: 1px solid #c7dcef; font-size: 9px; line-height: 1.45; cursor: pointer; }
.live-consent input { margin-top: 1px; accent-color: var(--blue); }
.live-field { display: grid; gap: 5px; margin-top: 9px; }
.live-field[hidden] { display: none; }
.live-field span { color: var(--muted); font: 700 8px var(--mono); letter-spacing: .05em; }
.live-field select { width: 100%; height: 34px; padding: 0 9px; border: 1px solid var(--line-dark); background: white; color: var(--ink); font-size: 10px; }
.live-actions { margin-top: 9px; display: grid; grid-template-columns: 1.2fr .55fr .55fr; gap: 7px; }
.live-actions .primary-button, .live-actions .secondary-button { margin-top: 0; height: 36px; }
.live-voice-toggle { margin-top: 7px; width: 100%; border-color: #c7e6db; color: #0f744f; background: #ecfff7; }
.live-voice-toggle:not(.is-on) { border-color: #d5dce2; color: #52616c; background: #f3f6f8; }
.live-manual-shot, .live-upload-fallback { width: 100%; margin-top: 7px; }
.live-mini-status { margin-top: 9px; min-height: 28px; padding: 8px 9px; color: #52606d; background: #f5f7f9; border-left: 3px solid var(--blue); font-size: 9px; line-height: 1.45; }
.sr-live { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.capture-record-panel { margin-top: 9px; padding: 9px; background: #101820; border: 1px solid #263442; color: #d8e5ee; }
.capture-record-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; color: var(--cyan); font: 800 8px var(--mono); letter-spacing: .08em; }
.capture-record-head button { border: 1px solid #405262; background: transparent; color: #aebdca; font-size: 8px; height: 24px; padding: 0 7px; cursor: pointer; }
.capture-record-list { margin-top: 8px; display: grid; gap: 7px; max-height: 190px; overflow: auto; }
.capture-record-list small { color: #7f909e; font-size: 8px; line-height: 1.45; }
.capture-record-item { display: grid; grid-template-columns: 54px 1fr; gap: 8px; align-items: center; padding: 6px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.08); }
.capture-record-item img { width: 54px; height: 72px; object-fit: cover; background: #050a0f; }
.capture-record-item b { display: block; color: white; font-size: 9px; }
.capture-record-item span { display: block; margin-top: 3px; color: #9eacb8; font-size: 8px; line-height: 1.35; }

.viewer-panel { min-width: 0; display: flex; flex-direction: column; background: #202b34; }
.viewer-toolbar { height: 64px; flex: 0 0 auto; padding: 0 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; background: white; border-bottom: 1px solid var(--line); }
.viewer-toolbar strong { font-size: 11px; }
.layer-toggles { display: flex; flex-wrap: wrap; justify-content: end; gap: 12px; }
.layer-toggles label { display: flex; align-items: center; gap: 5px; color: var(--muted); font: 500 9px var(--mono); cursor: pointer; }
.layer-toggles input { width: 13px; height: 13px; accent-color: var(--blue); }
.audience-switch { height: 30px; display: inline-grid; grid-template-columns: 1fr 1fr; padding: 3px; gap: 3px; border: 1px solid #cdd6df; background: #edf2f6; border-radius: 999px; }
.audience-switch button { min-width: 58px; padding: 0 10px; border: 0; border-radius: 999px; background: transparent; color: #61717f; font-size: 9px; font-weight: 700; cursor: pointer; }
.audience-switch button.is-active { color: #101820; background: white; box-shadow: 0 2px 8px rgba(21,32,43,.12); }
.final-result-button { height: 32px; padding: 0 12px; border: 0; background: var(--green); color: white; font-size: 9px; font-weight: 700; cursor: pointer; }
.final-result-button[hidden] { display: none; }
.canvas-shell { flex: 1; min-height: 560px; position: relative; overflow: hidden; display: grid; place-items: center; background-color: #1e2932; background-image: linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px); background-size: 24px 24px; }
.canvas-shell.is-live-active { min-height: min(82vh, 820px); }
.live-camera-stage { position: absolute; inset: 0; z-index: 12; overflow: hidden; background: #101820; }
/* [전체화면 촬영 2026-08-06] 촬영 중에는 카메라가 창을 꽉 채운다. */
body.capture-full { overflow: hidden; }
/* [2026-09-03 은정님 "후면 촬영으로 바꾸는 버튼이 없었어"]
   inset:0 은 «주소창·아래 막대까지 포함한» 높이라, 폰에서는 화면 아래쪽이 사파리 막대에 덮였다.
   그 자리에 «전면/후면 바꾸기» 단추가 있었다 — 버튼이 없던 게 아니라 가려져 있었던 것이다.
   100dvh 는 막대를 뺀 «지금 실제로 보이는» 높이다. */
body.capture-full .live-camera-stage { position: fixed; inset: 0; height: 100dvh; z-index: 9000; border-radius: 0; }
body.capture-full .app-header,
body.capture-full .control-panel,
body.capture-full .viewer-toolbar,
body.capture-full .viewer-footer { display: none; }
/* 전체화면일 때 빠져나갈 버튼 — 바깥 버튼이 안 보이기 때문이다 */
.live-exit { position: absolute; z-index: 9100; right: 12px; top: 12px; height: 36px; padding: 0 14px;
  border: 1px solid rgba(255,255,255,.28); border-radius: 18px; background: rgba(12,19,26,.72);
  color: #fff; font: 800 12px/1 system-ui, -apple-system, sans-serif; cursor: pointer; display: none; }
body.capture-full .live-exit { display: block; }
.live-camera-stage[hidden] { display: none; }
.live-camera-stage video, .live-camera-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; }
.live-camera-stage.is-selfie video { transform: scaleX(-1); }
.live-guide-frame { position: absolute; left: 50%; top: 3.5%; bottom: 3.5%; width: min(54%, 390px); transform: translateX(-50%); border: 1px solid rgba(255,255,255,.34); pointer-events: none; }
.live-guide-frame.is-dynamic { transform: none; transition: left .24s ease, top .24s ease, width .24s ease, height .24s ease; }
.live-guide-frame::before, .live-guide-frame::after { content: ""; position: absolute; background: rgba(255,255,255,.18); }
.live-guide-frame::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.live-guide-frame::after { left: 0; right: 0; top: 50%; height: 1px; }
.live-guide-center { position: absolute; left: 50%; top: 7%; bottom: 4%; border-left: 1px solid rgba(255,57,57,.82); transform: translateX(-50%); }

.live-tilt-warn { position: absolute; z-index: 7; left: 50%; top: 12px; transform: translateX(-50%); padding: 8px 14px; border-radius: 999px; color: #fff; background: rgba(214,45,45,.94); font: 800 12px/1.2 system-ui, -apple-system, sans-serif; box-shadow: 0 6px 18px rgba(0,0,0,.35); }
.live-tilt-warn[hidden] { display: none; }
/* [프레임 안내 2026-08-06] 회원이 볼 것은 이것 하나다. 2~3m 떨어져서도 읽히게 크게. */
.live-frame-badge { position: absolute; z-index: 7; left: 50%; top: 54px; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 11px 22px;
  border-radius: 999px; background: rgba(12,19,26,.84); box-shadow: 0 8px 24px rgba(0,0,0,.34);
  transition: background .25s ease; pointer-events: none; white-space: nowrap; }
.live-frame-badge[hidden] { display: none; }

/* [단계 표시 2026-08-17] 지금 몇 번째·어느 방향 사진인지. 소리가 없어도 알 수 있게. */
.live-step-chip { position: absolute; z-index: 8; left: 50%; top: 14px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 8px; padding: 6px 13px; border-radius: 999px;
  background: rgba(12,16,22,.66); backdrop-filter: blur(6px); pointer-events: none; }
.live-step-chip[hidden] { display: none; }
.live-step-chip b { color: #9fe870; font: 800 12.5px/1.2 system-ui, -apple-system, sans-serif; letter-spacing: .02em; }
.live-step-chip span { color: #fff; font: 700 15px/1.2 system-ui, -apple-system, sans-serif; }
.live-frame-badge b { color: #fff; font: 800 19px/1.2 system-ui, -apple-system, sans-serif; }
.live-frame-badge span { color: rgba(255,255,255,.74); font: 600 12.5px/1.2 system-ui, -apple-system, sans-serif; }
.live-frame-badge.is-ok { background: rgba(45,124,68,.92); }
.live-frame-badge.is-fix { background: rgba(184,112,26,.92); }

/* 대안: 카드는 그대로 두고 반투명하게 (은정님 선택용) */
.live-camera-stage.card-see-through .live-status-card { background: rgba(10,16,22,.45); border-color: rgba(255,255,255,.22); }
.live-camera-stage.card-see-through .live-status-card small { color: #d3dee7; }
.live-guide-head, .live-guide-feet { position: absolute; left: 50%; width: 82px; height: 26px; border: 1px dashed rgba(39,215,209,.62); border-radius: 50%; transform: translateX(-50%); }
.live-guide-head { top: 5%; }.live-guide-feet { bottom: 2%; height: 20px; border-radius: 999px; }
.live-countdown { position: absolute; z-index: 4; left: 50%; top: 50%; width: 112px; height: 112px; display: grid; place-items: center; transform: translate(-50%, -50%); border-radius: 50%; color: white; background: rgba(255,57,57,.82); font: 800 54px var(--mono); box-shadow: 0 0 0 12px rgba(255,57,57,.15); }
.live-countdown[hidden] { display: none; }
.live-review { position: absolute; z-index: 8; left: 50%; top: 50%; width: min(520px, calc(100% - 28px)); display: grid; grid-template-columns: 190px 1fr; gap: 12px; padding: 12px; transform: translate(-50%, -50%); color: white; background: rgba(12,19,26,.96); border: 1px solid rgba(39,215,209,.42); box-shadow: 0 18px 54px rgba(0,0,0,.45); }
.live-review[hidden] { display: none; }
.live-review img { width: 100%; height: 230px; object-fit: contain; background: #050a0f; border: 1px solid rgba(255,255,255,.12); }
.live-review strong { display: block; margin-top: 6px; font-size: 15px; }
.live-review span { display: block; margin-top: 6px; color: #aebdca; font-size: 9px; line-height: 1.5; }
.live-review p { margin: 14px 0 0; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.live-review button { height: 34px; border: 0; color: white; background: var(--blue); font-size: 10px; font-weight: 800; cursor: pointer; }
.live-review button:last-child { background: transparent; border: 1px solid #52616d; }
.live-status-card { position: absolute; z-index: 4; left: 18px; right: 18px; bottom: 18px; padding: 13px 15px; color: white; background: linear-gradient(145deg, rgba(12,19,26,.9), rgba(20,35,47,.88)); border: 1px solid rgba(39,215,209,.35); box-shadow: 0 16px 40px rgba(0,0,0,.32); backdrop-filter: blur(10px); }
.live-status-card > span { color: var(--cyan); font: 800 8px var(--mono); letter-spacing: .1em; }
.live-status-card > strong { display: block; margin-top: 4px; font-size: 14px; }
.live-status-card > small { display: block; margin-top: 4px; color: #b6c5d0; font-size: 9px; line-height: 1.45; }
.live-angle-row { margin-top: 8px; display: flex; flex-wrap: wrap; gap: 6px; }
.live-angle-row[hidden] { display: none; }
.live-angle-row b { padding: 5px 7px; color: #101820; background: var(--cyan); font: 800 10px var(--mono); }
.anatomy-side { position: absolute; z-index: 5; top: 16px; color: #ff4f4f; font: 600 28px var(--mono); text-shadow: 0 1px 3px #000; pointer-events: none; }
.anatomy-side small { display: block; margin-top: 1px; color: rgba(255,255,255,.68); font: 500 8px var(--mono); }
.anatomy-r { left: 16px; }.anatomy-l { right: 16px; text-align: right; }
#analysis-canvas { display: block; width: 100%; height: 100%; position: absolute; inset: 0; cursor: crosshair; }
.empty-canvas { z-index: 2; color: #8c9aa6; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.empty-canvas[hidden] { display: none; }
.empty-canvas strong { font: 600 11px var(--mono); letter-spacing: .1em; }.empty-canvas span { font-size: 10px; }
.empty-figure { width: 90px; height: 180px; position: relative; margin-bottom: 16px; border-left: 1px dashed #53616c; border-right: 1px dashed #53616c; }
.empty-figure i { position: absolute; left: 50%; transform: translateX(-50%); display: block; border: 1px solid #657580; border-radius: 50%; }
.empty-figure i:nth-child(1) { width: 34px; height: 34px; top: 0; }
.empty-figure i:nth-child(2) { width: 64px; top: 48px; border-radius: 0; }
.empty-figure i:nth-child(3) { width: 45px; top: 101px; border-radius: 0; }
.empty-figure i:nth-child(4) { width: 1px; height: 118px; top: 48px; border-radius: 0; }
.empty-figure i:nth-child(5) { width: 64px; top: 165px; border-radius: 0; }
.manual-prompt { position: absolute; z-index: 4; top: 16px; left: 50%; transform: translateX(-50%); min-width: 320px; padding: 12px 16px; background: rgba(17,26,35,.94); color: white; border: 1px solid var(--magenta); text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
.manual-prompt span { display: block; color: var(--magenta); font: 600 9px var(--mono); }.manual-prompt strong { display: block; margin: 4px; font-size: 12px; }.manual-prompt small { color: #9fadb8; font-size: 9px; }
.member-summary-card { position: absolute; z-index: 6; right: 8px; top: 52px; width: min(228px, calc(100% - 28px)); padding: 10px; transform: translateX(12px); color: white; background: linear-gradient(145deg, rgba(12,19,26,.92), rgba(24,39,52,.9)); border: 1px solid rgba(39,215,209,.35); box-shadow: 0 14px 34px rgba(0,0,0,.25); backdrop-filter: blur(8px); }
.member-summary-card[hidden] { display: none; }
.member-summary-card > span { color: var(--cyan); font: 700 7px var(--mono); letter-spacing: .12em; }
.member-summary-card > strong { display: block; margin-top: 3px; font-size: 14px; letter-spacing: -.03em; }
.member-summary-card > p { margin: 3px 0 8px; color: #a9b8c4; font-size: 8px; line-height: 1.35; }
.member-quick-list { display: grid; gap: 5px; }
.member-quick-item { display: grid; grid-template-columns: 34px 1fr; column-gap: 7px; row-gap: 1px; align-items: center; padding: 7px; background: rgba(255,255,255,.06); border-left: 3px solid var(--green); }
.member-quick-item.status-observe { border-left-color: var(--yellow); }
.member-quick-item.status-notable { border-left-color: var(--red); }
.member-quick-item b { grid-row: 1 / span 2; display: grid; place-items: center; min-height: 26px; color: #101820; background: var(--green); font: 800 8px var(--mono); }
.member-quick-item.status-observe b { background: var(--yellow); }
.member-quick-item.status-notable b { color: white; background: var(--red); }
.member-quick-item span { font-size: 10px; font-weight: 800; }
.member-quick-item i { color: #bfd0dc; font-style: normal; font-size: 8px; line-height: 1.25; }
.member-quick-item em { grid-column: 2; margin-top: 3px; color: #9fb2bf; font-style: normal; font-size: 8px; line-height: 1.4; }
.canvas-shell.has-muscle-panel .member-summary-card { right: auto; left: 8px; transform: translateX(-8px); }
body.member-mode .member-summary-card { top: 62px; right: 12px; width: min(190px, calc(100% - 24px)); padding: 9px; transform: none; border-color: rgba(255,255,255,.18); }
body.member-mode .member-summary-card > span { display: none; }
body.member-mode .member-summary-card > strong { font-size: 13px; }
body.member-mode .member-summary-card > p { margin-bottom: 6px; font-size: 8px; }
body.member-mode .member-quick-list { gap: 4px; }
body.member-mode .member-quick-item { grid-template-columns: 28px 1fr; padding: 6px; }
body.member-mode .member-quick-item:nth-child(n+3) { display: none; }
body.member-mode .member-quick-item b { min-height: 24px; font-size: 7px; }
body.member-mode .member-quick-item span { font-size: 9px; }

.member-final-panel { position: absolute; z-index: 10; inset: 18px; display: flex; flex-direction: column; overflow: hidden; color: #10202c; background: linear-gradient(145deg, rgba(12,19,26,.98), rgba(21,34,45,.98)); border: 1px solid rgba(39,215,209,.22); box-shadow: 0 24px 70px rgba(0,0,0,.44); }
.member-final-panel[hidden] { display: none; }
.member-final-head { flex: 0 0 auto; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; border-bottom: 1px solid rgba(255,255,255,.12); background: rgba(9,15,22,.74); }
.member-final-head span { display: block; color: var(--cyan); font: 800 8px var(--mono); letter-spacing: .14em; }
.member-final-head strong { display: block; margin-top: 3px; color: white; font-size: 20px; letter-spacing: -.04em; }
.member-final-head button { height: 30px; padding: 0 11px; border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.06); color: white; font-size: 9px; font-weight: 800; cursor: pointer; }
.member-final-body { min-height: 0; padding: 14px; overflow: auto; }
.member-final-card { min-height: 100%; display: grid; grid-template-columns: minmax(320px, 1.06fr) minmax(240px, .94fr); gap: 14px; align-items: stretch; }
.member-plane-visual { position: relative; min-height: 100%; display: grid; place-items: stretch; border: 1px solid rgba(255,255,255,.1); background: #111a23; overflow: hidden; }
.member-plane-visual svg { position: relative; z-index: 1; width: 100%; height: 100%; min-height: 620px; display: block; }
.member-plane-visual .plane { fill: rgba(72,185,220,.18); stroke: rgba(28,96,126,.48); stroke-width: 1.4; }
.member-plane-visual .plane-line { stroke: rgba(21,72,98,.46); stroke-width: 1.2; }
.member-plane-visual .body-fill { fill: rgba(196,113,96,.35); stroke: rgba(80,50,46,.38); stroke-width: 2; }
.member-plane-visual .body-line { stroke: rgba(40,55,66,.55); stroke-width: 4; stroke-linecap: round; fill: none; }
.member-plane-visual .centerline { stroke: #ff3939; stroke-width: 2.4; stroke-linecap: round; }
.member-plane-visual .axis-label { fill: #143041; font: 800 12px var(--mono); letter-spacing: .08em; }
.member-plane-visual .caption { fill: rgba(20,48,65,.78); font: 700 10px Pretendard, sans-serif; }
.member-plane-visual .arrow { stroke: #e24035; stroke-width: 8; stroke-linecap: round; fill: none; filter: drop-shadow(0 4px 6px rgba(226,64,53,.25)); }
.member-plane-visual .arrow-soft { stroke: #e24035; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 7 7; fill: none; opacity: .72; }
.exbody-skeleton-svg .stage-bg { fill: #1d2933; }
.exbody-skeleton-svg .floor-grid line, .exbody-skeleton-svg .floor-grid path { stroke: rgba(255,255,255,.08); stroke-width: 1; fill: none; }
.exbody-skeleton-svg .mode-pills rect { fill: rgba(255,255,255,.11); stroke: rgba(255,255,255,.12); }
.exbody-skeleton-svg .mode-pills rect:first-child { fill: #54d7e8; }
.exbody-skeleton-svg .mode-pills text { fill: #edf8ff; text-anchor: middle; font: 800 10px Pretendard, sans-serif; }
.exbody-skeleton-svg .corner-label { fill: rgba(218,234,244,.56); font: 800 8px var(--mono); letter-spacing: .12em; }
.exbody-skeleton-svg .corner-label.right { text-anchor: end; fill: rgba(255,255,255,.38); }
.exbody-skeleton-svg .reference-lines path { stroke: #f1d642; stroke-width: 2; stroke-dasharray: 8 8; fill: none; opacity: .96; }
.exbody-skeleton-svg .centerline-blue { stroke: #1698ff; stroke-width: 5; stroke-linecap: round; }
.exbody-skeleton-svg .center-deviation { stroke: #15a7ff; stroke-width: 4; stroke-linecap: round; fill: none; opacity: .8; }
.exbody-skeleton-svg .bone-fill { fill: rgba(214,238,249,.22); stroke: rgba(224,244,252,.92); stroke-width: 3; }
.exbody-skeleton-svg .bone-line { stroke: rgba(224,244,252,.9); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.exbody-skeleton-svg .bone-line.thin { stroke-width: 2; }
.exbody-skeleton-svg .bone-line.foot { stroke-width: 7; }
.exbody-skeleton-svg .rib { stroke: rgba(224,244,252,.72); stroke-width: 4; fill: none; }
.exbody-skeleton-svg .rib.small { stroke-width: 3; opacity: .56; }
.exbody-skeleton-svg .actual-lines path { stroke: #ff3e52; stroke-width: 4; stroke-linecap: round; fill: none; }
.exbody-skeleton-svg .actual-lines circle { fill: #ff3e52; stroke: rgba(10,16,22,.95); stroke-width: 3; }
.exbody-skeleton-svg .blue-arrow { stroke: #1698ff; stroke-width: 7; stroke-linecap: round; fill: none; }
.exbody-skeleton-svg .red-arrow { stroke: #ff3e52; stroke-width: 7; stroke-linecap: round; fill: none; }
.exbody-skeleton-svg .measure-tags rect { fill: rgba(9,13,18,.88); stroke: rgba(255,255,255,.14); }
.exbody-skeleton-svg .measure-tags text { fill: #d9f7ff; text-anchor: middle; font: 900 12px var(--mono); }
.exbody-skeleton-svg .right-report rect { fill: rgba(8,13,19,.56); stroke: rgba(255,255,255,.08); }
.exbody-skeleton-svg .right-report circle { fill: #54d7e8; }
.exbody-skeleton-svg .report-title { fill: #70e8f5; font: 900 13px Pretendard, sans-serif; }
.exbody-skeleton-svg .report-title.small { font-size: 10px; fill: rgba(218,234,244,.82); }
.exbody-skeleton-svg .report-line { fill: white; font: 800 9px Pretendard, sans-serif; }
.exbody-skeleton-svg .report-copy { fill: rgba(218,234,244,.72); font: 700 7px Pretendard, sans-serif; }
.exbody-skeleton-svg .exercise-pill { fill: #7ee7f4 !important; stroke: none !important; }
.exbody-skeleton-svg .exercise-text { fill: #12303d; text-anchor: middle; font: 900 8px Pretendard, sans-serif; }
.exbody-skeleton-svg--tall .stage-bg { fill: url(#member-tall-bg); }
.exbody-skeleton-svg--tall .floor-grid--tall line,
.exbody-skeleton-svg--tall .floor-grid--tall path { stroke: rgba(255,255,255,.09); stroke-width: 1; }
.exbody-skeleton-svg--tall .mode-pills--tall text { font-size: 9px; }
.exbody-skeleton-svg--tall .reference-lines--tall path { stroke: #f1d642; stroke-width: 1.8; stroke-dasharray: 7 8; opacity: .9; }
.exbody-skeleton-svg--tall .centerline-blue--thin { stroke: #1698ff; stroke-width: 4; opacity: .96; }
.exbody-skeleton-svg--tall .anatomy-side-label .side-letter { fill: #ff3e52; font: 950 30px var(--mono); }
.exbody-skeleton-svg--tall .anatomy-side-label .side-copy { fill: rgba(255,255,255,.82); font: 800 9px Pretendard, sans-serif; letter-spacing: -.02em; }
.exbody-skeleton-svg--tall .anatomy-side-label--l { text-anchor: end; }
.exbody-skeleton-svg--tall .orientation-helper { fill: rgba(218,234,244,.78); text-anchor: middle; font: 900 10px Pretendard, sans-serif; }
.exbody-skeleton-svg--tall .skull-fill { fill: rgba(224,244,252,.23); stroke: rgba(234,249,255,.96); stroke-width: 3; }
.exbody-skeleton-svg--tall .skull-jaw,
.exbody-skeleton-svg--tall .teeth-line,
.exbody-skeleton-svg--tall .skull-hole-line { stroke: rgba(234,249,255,.82); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round; }
.exbody-skeleton-svg--tall .skull-hole { fill: rgba(9,15,22,.72); stroke: rgba(234,249,255,.55); stroke-width: 1.4; }
.exbody-skeleton-svg--tall .spine-main { stroke-width: 9; opacity: .92; }
.exbody-skeleton-svg--tall .vertebra { fill: rgba(234,249,255,.72); stroke: rgba(15,28,38,.7); stroke-width: 1; }
.exbody-skeleton-svg--tall .clavicle { stroke-width: 5; }
.exbody-skeleton-svg--tall .scapula { fill: rgba(224,244,252,.14); stroke: rgba(224,244,252,.74); stroke-width: 3; stroke-linecap: round; }
.exbody-skeleton-svg--tall .sternum { stroke: rgba(224,244,252,.88); stroke-width: 5; stroke-linecap: round; }
.exbody-skeleton-svg--tall .rib-detail { stroke: rgba(224,244,252,.68); stroke-width: 4; fill: none; stroke-linecap: round; }
.exbody-skeleton-svg--tall .arm,
.exbody-skeleton-svg--tall .leg { stroke-width: 10; }
.exbody-skeleton-svg--tall .forearm-detail,
.exbody-skeleton-svg--tall .leg-detail,
.exbody-skeleton-svg--tall .hand-bones { stroke: rgba(224,244,252,.74); stroke-width: 3; stroke-linecap: round; fill: none; }
.exbody-skeleton-svg--tall .pelvis-wing { fill: rgba(224,244,252,.18); stroke: rgba(224,244,252,.86); stroke-width: 4; }
.exbody-skeleton-svg--tall .sacrum { fill: rgba(224,244,252,.18); stroke: rgba(224,244,252,.8); stroke-width: 3; }
.exbody-skeleton-svg--tall .pelvis-line { stroke-width: 7; }
.exbody-skeleton-svg--tall .joint-ring { fill: rgba(13,23,31,.9); stroke: rgba(244,253,255,.98); stroke-width: 4; }
.exbody-skeleton-svg--tall .muscle-alerts path { stroke: rgba(255,62,82,.42); stroke-width: 20; stroke-linecap: round; fill: none; filter: drop-shadow(0 0 8px rgba(255,62,82,.22)); }
.exbody-skeleton-svg--tall .actual-lines--tall path { stroke-width: 4.5; }
.exbody-skeleton-svg--tall .actual-lines--tall circle { fill: #ff3e52; stroke: rgba(12,18,24,.96); stroke-width: 3; }
.exbody-skeleton-svg--tall .measure-tags--tall rect { fill: rgba(9,13,18,.9); stroke: rgba(255,255,255,.2); }
.exbody-skeleton-svg--tall .measure-tags--tall text { fill: #d9f7ff; font-size: 12px; }
.exbody-skeleton-svg--tall .side-chip rect { fill: rgba(9,13,18,.84); stroke: rgba(255,62,82,.78); }
.exbody-skeleton-svg--tall .side-chip text { fill: #fff; text-anchor: middle; font: 900 11px Pretendard, sans-serif; }
.exbody-skeleton-svg--tall .side-chip--r rect { stroke: rgba(255,62,82,.95); }
.exbody-skeleton-svg--tall .side-chip--l rect { stroke: rgba(255,62,82,.95); }
.exbody-skeleton-svg--tall .mini-summary-on-svg text { fill: rgba(218,234,244,.82); font: 800 9px Pretendard, sans-serif; }
.member-reference-skeleton-svg { background: #fff; }
.member-reference-skeleton-svg .reference-white-bg { fill: #fff; }
.member-reference-skeleton-svg .reference-skeleton-photo { opacity: .98; }
.member-reference-skeleton-svg .reference-skeleton-photo--oblique { filter: drop-shadow(0 0 14px rgba(255,255,255,.12)); }
.member-reference-skeleton-svg .reference-guide-lines path { stroke: #f1d642; stroke-width: 1.9; stroke-dasharray: 8 8; fill: none; opacity: .82; }
.member-reference-skeleton-svg .reference-center-line { stroke: #ff3347; stroke-width: 3.5; stroke-linecap: round; opacity: .98; }
.member-reference-skeleton-svg .reference-body-line { stroke: #21a4ff; stroke-width: 4; stroke-linecap: round; stroke-dasharray: 9 7; fill: none; opacity: .86; }
.member-reference-skeleton-svg .reference-measure-lines path { stroke: #ff3347; stroke-width: 4; stroke-linecap: round; fill: none; }
.member-reference-skeleton-svg .reference-measure-lines circle { fill: #ff3347; stroke: rgba(255,255,255,.96); stroke-width: 3; }
.member-reference-skeleton-svg .reference-blue-arrow { stroke: #21a4ff; stroke-width: 4.5; stroke-linecap: round; fill: none; opacity: .92; }
.member-reference-skeleton-svg .reference-red-arrow { stroke: #ff3347; stroke-width: 4.5; stroke-linecap: round; fill: none; opacity: .92; }
.member-reference-skeleton-svg .reference-side-label .side-letter { fill: #ff3347; font: 950 32px var(--mono); }
.member-reference-skeleton-svg .reference-side-label .side-copy { fill: #182631; font: 900 10px Pretendard, sans-serif; letter-spacing: -.02em; }
.member-reference-skeleton-svg .reference-side-label--l { text-anchor: end; }
.member-reference-skeleton-svg .reference-orientation-helper { fill: rgba(20,34,45,.74); text-anchor: middle; font: 900 10px Pretendard, sans-serif; }
.member-reference-skeleton-svg .reference-measure-tags rect { fill: rgba(12,18,24,.92); stroke: rgba(255,255,255,.35); }
.member-reference-skeleton-svg .reference-measure-tags text { fill: #e7fbff; text-anchor: middle; font: 950 12px var(--mono); }
.member-reference-skeleton-svg .reference-side-chip rect { fill: rgba(12,18,24,.88); stroke: rgba(255,51,71,.92); }
.member-reference-skeleton-svg .reference-side-chip text { fill: #fff; text-anchor: middle; font: 950 11px Pretendard, sans-serif; }
.member-reference-skeleton-svg .reference-priority-list rect { fill: rgba(12,18,24,.78); stroke: rgba(255,51,71,.28); }
.member-reference-skeleton-svg .reference-priority-list text { fill: #fff; font: 900 9px Pretendard, sans-serif; }
.member-reference-skeleton-svg .reference-legend rect { fill: rgba(2,4,6,.74); stroke: rgba(255,255,255,.18); }
.member-reference-skeleton-svg .reference-legend text { fill: rgba(255,255,255,.88); font: 900 9px Pretendard, sans-serif; }
.member-reference-skeleton-svg .reference-legend .legend-red { stroke: #ff3347; stroke-width: 3; stroke-linecap: round; fill: none; }
.member-reference-skeleton-svg .reference-legend .legend-blue { stroke: #21a4ff; stroke-width: 3; stroke-linecap: round; stroke-dasharray: 6 5; fill: none; }
.member-final-side { display: grid; align-content: start; gap: 10px; }
.member-final-copy { padding: 14px; background: #10202c; color: white; }
.member-final-copy span { color: var(--cyan); font: 800 8px var(--mono); letter-spacing: .12em; }
.member-final-copy strong { display: block; margin-top: 5px; font-size: 17px; line-height: 1.25; }
.member-final-copy p { margin: 7px 0 0; color: #b8c9d5; font-size: 10px; line-height: 1.55; }
.member-final-list { display: grid; gap: 8px; }
.member-final-item { padding: 10px 11px; display: grid; grid-template-columns: 42px 1fr; gap: 9px; align-items: center; background: white; border: 1px solid rgba(16,32,44,.12); box-shadow: inset 4px 0 0 var(--green); }
.member-final-item.status-observe { box-shadow: inset 4px 0 0 var(--yellow); }
.member-final-item.status-notable { box-shadow: inset 4px 0 0 var(--red); }
.member-final-item b { height: 30px; display: grid; place-items: center; color: #10202c; background: #e9f6ef; font: 900 8px var(--mono); }
.member-final-item.status-observe b { background: #fff1b9; }
.member-final-item.status-notable b { color: white; background: var(--red); }
.member-final-item strong { display: block; font-size: 12px; }
.member-final-item span { display: block; margin-top: 3px; color: #637381; font-size: 9px; line-height: 1.35; }
.member-final-note { padding: 10px 12px; color: #61717f; background: rgba(255,255,255,.64); border: 1px dashed rgba(16,32,44,.18); font-size: 9px; line-height: 1.45; }
.member-final-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.member-final-photo { min-width: 0; padding: 7px; background: rgba(255,255,255,.72); border: 1px solid rgba(16,32,44,.12); }
.member-final-photo img { display: block; width: 100%; height: 112px; object-fit: contain; background: #10202c; } /* [2026-08-11] cover→contain: 사진을 자르지 않는다 */
.member-final-photo b { display: block; margin-top: 6px; font-size: 9px; }
.member-final-photo span { display: block; margin-top: 2px; color: #697985; font-size: 8px; line-height: 1.35; }
.member-final-photo button { width: 100%; height: 25px; margin-top: 6px; border: 1px solid rgba(16,32,44,.18); background: white; color: #10202c; font-size: 8px; font-weight: 800; cursor: pointer; }
.member-exercise-section { padding: 12px; background: white; border: 1px solid rgba(16,32,44,.12); }
.member-exercise-section > b { display: block; font-size: 12px; }
.member-exercise-section > p { margin: 5px 0 10px; color: #697985; font-size: 9px; line-height: 1.45; }
.member-exercise-list { display: grid; gap: 7px; }
.member-exercise-card { padding: 9px; border-left: 3px solid var(--cyan); background: #f5f9fb; }
.member-exercise-card span { color: #1769e0; font: 800 8px var(--mono); }
.member-exercise-card strong { display: block; margin-top: 3px; font-size: 11px; }
.member-exercise-card small { display: block; margin-top: 4px; color: #60717e; font-size: 8px; line-height: 1.45; }
.assessment-processing-panel { position: absolute; z-index: 12; inset: 18px; display: grid; place-items: center; background: rgba(12,19,26,.74); backdrop-filter: blur(8px); }
.assessment-processing-panel[hidden] { display: none; }
.assessment-processing-card { width: min(820px, calc(100% - 24px)); padding: 18px; color: white; background: linear-gradient(150deg, rgba(12,19,26,.97), rgba(21,38,52,.97)); border: 1px solid rgba(39,215,209,.34); box-shadow: 0 24px 68px rgba(0,0,0,.38); }
.assessment-processing-card > span { color: var(--cyan); font: 800 8px var(--mono); letter-spacing: .14em; }
.assessment-processing-card > strong { display: block; margin-top: 6px; font-size: 20px; }
.assessment-processing-card > p { margin: 6px 0 14px; color: #aebdca; font-size: 10px; line-height: 1.55; }
.processing-captures { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.processing-capture { padding: 8px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12); }
.processing-capture img { width: 100%; height: 150px; display: block; object-fit: contain; background: #050a0f; } /* [2026-08-11] cover→contain */
.processing-capture b { display: block; margin-top: 6px; font-size: 9px; }
.processing-capture span { color: #9fb0bc; font-size: 8px; }
.processing-steps { margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; list-style: none; }
.processing-steps li { padding: 8px; color: #d8e5ee; background: rgba(255,255,255,.05); border-left: 3px solid var(--green); font-size: 9px; }
.muscle-side-panel { position: absolute; z-index: 7; right: 10px; top: 48px; width: min(248px, calc(100% - 24px)); max-height: calc(100% - 116px); overflow: auto; color: white; background: linear-gradient(155deg, rgba(11,18,25,.96), rgba(21,37,49,.94)); border: 1px solid rgba(255,255,255,.18); box-shadow: 0 16px 38px rgba(0,0,0,.32); backdrop-filter: blur(10px); }
.muscle-side-panel[hidden] { display: none; }
.muscle-side-panel header { padding: 12px 13px 10px; border-bottom: 1px solid rgba(255,255,255,.12); }
.muscle-side-panel header > span { color: var(--cyan); font: 700 8px var(--mono); letter-spacing: .1em; }
.muscle-side-panel header > strong { display: block; margin-top: 4px; font-size: 15px; }
.muscle-side-panel header > p { margin: 5px 0 0; color: #9fb0bc; font-size: 8px; line-height: 1.45; }
.muscle-side-list { display: grid; }
.muscle-side-item { padding: 8px 11px; border-bottom: 1px solid rgba(255,255,255,.09); }
.muscle-side-item:last-child { border-bottom: 0; }
.muscle-side-item > div { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.muscle-side-item h3 { margin: 0; font-size: 10px; }
.muscle-side-item b { padding: 3px 5px; color: #101820; background: var(--yellow); font: 800 7px var(--mono); }
.muscle-side-item.status-notable b { color: white; background: #ff4d76; }
.muscle-side-empty { padding: 24px 15px; color: #aebcc6; font-size: 9px; line-height: 1.6; text-align: center; }
.muscle-tag-row { display: grid; grid-template-columns: 56px 1fr; gap: 6px; align-items: start; margin-top: 5px; }
.muscle-tag-row > span { padding-top: 3px; color: #98a9b6; font-size: 7px; font-weight: 700; }
.muscle-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.muscle-tags i { padding: 3px 5px; border: 1px solid currentColor; border-radius: 999px; font-style: normal; font-size: 7px; line-height: 1.2; }
.muscle-tag-row.short .muscle-tags i { color: #ff5a7f; background: rgba(255,77,118,.1); }
.muscle-tag-row.long .muscle-tags i { color: #37d9e6; background: rgba(39,215,209,.1); }
.muscle-tag-row.check .muscle-tags i { color: #f1c84b; background: rgba(241,200,75,.1); }
.muscle-side-panel footer { padding: 8px 12px; display: grid; gap: 4px; border-top: 1px solid rgba(255,255,255,.12); color: #9fb0bc; font-size: 7px; }
.muscle-side-panel footer span { display: flex; align-items: center; gap: 5px; }
.muscle-key { width: 13px; height: 3px; display: inline-block; }.muscle-key.short { background: #ff5a7f; }.muscle-key.long { background: #37d9e6; }.muscle-key.check { background: #f1c84b; }
.member-tabs { position: absolute; z-index: 6; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; gap: 7px; padding: 7px; max-width: calc(100% - 36px); overflow-x: auto; background: rgba(12,19,26,.82); border: 1px solid rgba(255,255,255,.16); box-shadow: 0 12px 32px rgba(0,0,0,.22); backdrop-filter: blur(8px); }
.member-tabs[hidden] { display: none; }
.member-tabs button { flex: 0 0 auto; min-width: 48px; height: 30px; padding: 0 10px; border: 1px solid rgba(255,255,255,.15); border-radius: 999px; background: rgba(255,255,255,.06); color: #c8d6e0; font-size: 10px; font-weight: 800; cursor: pointer; }
.member-tabs button.is-active { color: #101820; background: var(--cyan); border-color: var(--cyan); box-shadow: 0 0 0 3px rgba(39,215,209,.12); }
.viewer-footer { height: 42px; flex: 0 0 auto; padding: 0 14px; display: flex; align-items: center; gap: 16px; background: #111a23; color: #8ea0b0; font: 500 8px var(--mono); }
.viewer-footer span { display: flex; align-items: center; gap: 5px; }.viewer-footer button { margin-left: auto; border: 1px solid #3e4e5a; background: transparent; color: white; padding: 6px 9px; font: 500 8px var(--mono); cursor: pointer; }.viewer-footer button:disabled { opacity: .35; }
.legend-dot { width: 7px; height: 7px; border-radius: 50%; }.legend-dot.auto { background: var(--cyan); }.legend-dot.inferred { background: var(--yellow); }.legend-dot.manual { background: var(--magenta); }.legend-dot.muscle { background: #ff4d76; }
.legend-line { width: 18px; height: 0; border-top: 3px solid currentColor; display: inline-block; transform: translateY(-1px); }.legend-line.red { color: #ff3939; }.legend-line.blue { color: #1769e0; }.legend-line.yellow { color: var(--yellow); }

.final-report { scroll-margin-top: 16px; border-bottom: 5px solid var(--green); background: #fff; }
.final-report[hidden] { display: none; }
.final-report-head { padding: 20px 22px 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 15px; background: #111a23; color: white; }
.final-report-head span { color: var(--cyan); font: 600 8px var(--mono); letter-spacing: .12em; }
.final-report-head h2 { margin: 5px 0 0; font-size: 18px; }
.final-report-head > strong { padding: 7px 9px; color: #111a23; background: var(--yellow); font: 700 10px var(--mono); }
/* [정합성수정] 원본: display:none — 세 방향 등록 상태와 계산 결과를 구분하는 안내였습니다 */
.final-view-grid { display: grid; grid-template-columns: repeat(3, 1fr); }
.final-view-grid article { min-width: 0; padding: 10px 11px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.final-view-grid article:last-child { border-right: 0; }
.final-view-grid article.is-analyzed { box-shadow: inset 0 3px 0 var(--green); background: #f3fbf7; }
.final-view-grid span { color: var(--blue); font: 600 8px var(--mono); }
.final-view-grid b { display: block; margin-top: 4px; font-size: 10px; }
.final-view-grid p { margin: 4px 0 0; color: var(--muted); font-size: 8px; line-height: 1.35; }
.final-findings { padding: 11px 18px; border-bottom: 1px solid var(--line); }
.final-findings > span { color: var(--muted); font: 600 8px var(--mono); }
.final-findings div { margin-top: 6px; display: grid; gap: 4px; font-size: 9px; line-height: 1.35; }
.final-findings div i { display: block; padding-left: 13px; position: relative; font-style: normal; }
.final-findings div i::before { content: ""; position: absolute; left: 0; top: 5px; width: 6px; height: 6px; border-radius: 50%; background: var(--yellow); }
.multi-view-detail { padding: 11px 18px; border-bottom: 1px solid var(--line); background: #fff; }
.multi-view-detail .section-label { margin-bottom: 8px; }
.multi-view-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.multi-view-card { padding: 8px 9px; border: 1px solid var(--line); background: #fafcff; }
.multi-view-card.status-observe { border-color: #ead38a; background: #fff9e9; }
.multi-view-card.status-notable { border-color: #e6aaa6; background: #fff3f2; }
.multi-view-card span { color: var(--muted); font: 700 8px var(--mono); }
.multi-view-card strong { display: block; margin-top: 4px; font-size: 10px; }
/* [정합성수정] 원본: display:none — 방향별 카드 설명문이었습니다 */
.multi-view-card p { font-size: 10px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
.three-d-report { padding: 11px 18px; border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #f7fbff, #fff); }
.three-d-report .section-label { margin-bottom: 6px; }
.three-d-report p { margin: 0 0 8px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.three-d-visual { margin: 8px 0; min-height: 210px; border: 1px solid #d7e2ea; background: radial-gradient(circle at 50% 30%, #1f3445, #101820 72%); color: #d8e5ee; overflow: hidden; }
.three-d-visual:empty { display: none; }
.three-d-stage { display: grid; grid-template-columns: minmax(170px, .9fr) 1fr; gap: 10px; align-items: center; padding: 10px; }
.three-d-stage svg { width: 100%; height: 200px; display: block; }
.three-d-stage .axis-neutral { stroke: rgba(255,255,255,.26); stroke-dasharray: 5 5; }
.three-d-stage .axis-body { stroke: #27d7d1; stroke-width: 4; fill: none; filter: drop-shadow(0 0 6px rgba(39,215,209,.3)); }
.three-d-stage .axis-warn { stroke: #ff3939; stroke-width: 3; fill: none; stroke-dasharray: 6 4; }
.three-d-stage .bone-bar { stroke: rgba(255,255,255,.82); stroke-width: 5; stroke-linecap: round; }
.three-d-stage .limb { stroke: rgba(255,255,255,.66); stroke-width: 4; stroke-linecap: round; }
.three-d-stage .joint { fill: #27d7d1; stroke: #081018; stroke-width: 2; }
.three-d-stage .depth { fill: rgba(23,105,224,.18); stroke: #1769e0; stroke-width: 2; }
.three-d-stage text { fill: rgba(255,255,255,.58); font: 700 8px var(--mono); letter-spacing: .08em; }
.three-d-stage aside { display: grid; gap: 7px; }
.three-d-stage aside b { color: white; font-size: 13px; }
.three-d-stage aside span { color: #aebdca; font-size: 9px; line-height: 1.45; }
.three-d-vector { padding: 7px 8px; background: rgba(255,255,255,.06); border-left: 3px solid var(--green); }
.three-d-vector.status-observe { border-left-color: var(--yellow); }
.three-d-vector.status-notable { border-left-color: var(--red); }
.three-d-vector strong { display: block; color: white; font: 800 10px var(--mono); }
.three-d-vector small { display: block; margin-top: 3px; color: #9eacb8; font-size: 8px; line-height: 1.35; }
.body3d-viewer { display: grid; gap: 8px; padding: 9px; }
.body3d-canvas-wrap { position: relative; min-height: 300px; border: 1px solid rgba(255,255,255,.08); background: #101820; touch-action: none; overflow: hidden; }
.body3d-canvas { width: 100%; height: 320px; display: block; cursor: grab; }
.body3d-canvas:active { cursor: grabbing; }
.body3d-badge { position: absolute; left: 10px; top: 10px; padding: 6px 8px; background: rgba(8,16,24,.78); border: 1px solid rgba(39,215,209,.35); color: #d8e5ee; font: 800 9px var(--mono); letter-spacing: .05em; }
.body3d-controls { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.body3d-controls button { height: 26px; padding: 0 10px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.06); color: #d8e5ee; font-size: 8px; font-weight: 800; cursor: pointer; }
.body3d-controls button:hover { border-color: var(--cyan); color: white; }
.body3d-controls label { display: inline-flex; align-items: center; gap: 4px; min-height: 26px; padding: 0 8px; border: 1px solid rgba(255,255,255,.12); color: #aebdca; font-size: 8px; }
.body3d-controls input { accent-color: var(--cyan); }
.body3d-blocked { padding: 18px; min-height: 150px; display: grid; align-content: center; gap: 8px; background: rgba(255,255,255,.04); border-left: 4px solid var(--yellow); }
.three-d-grid > .body3d-blocked { grid-column: 1 / -1; color: #d8e5ee; background: #101820; }
.body3d-blocked b { color: #fff; font-size: 12px; }
.body3d-blocked span { color: #b7c5d0; font-size: 9px; line-height: 1.55; }
.three-d-findings { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.three-d-finding { padding: 8px 9px; border: 1px solid var(--line); background: #fff; box-shadow: inset 3px 0 0 var(--cyan); }
.three-d-finding.is-attention { box-shadow: inset 3px 0 0 var(--yellow); background: #fffaf0; }
.three-d-finding span { display: block; color: var(--muted); font: 700 8px var(--mono); }
.three-d-finding b { display: block; margin-top: 3px; font-size: 10px; }
.three-d-finding p { display: block; margin: 4px 0 0; font-size: 8px; line-height: 1.35; color: var(--muted); }
.exercise-reco { grid-column: 1 / -1; margin-top: 8px; padding: 9px; border: 1px solid #d7e2ea; background: #f7fbff; }
.exercise-reco > b { display: block; font-size: 10px; }
.exercise-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 7px; }
.exercise-card { padding: 8px; background: #fff; border: 1px solid var(--line); }
.exercise-card span { color: var(--blue); font: 800 8px var(--mono); }
.exercise-card strong { display: block; margin-top: 4px; font-size: 10px; }
.exercise-card small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.35; }
.three-d-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.three-d-card { min-width: 0; padding: 8px 9px; border: 1px solid var(--line); background: white; box-shadow: inset 0 3px 0 var(--green); }
.three-d-card.status-observe { box-shadow: inset 0 3px 0 var(--yellow); }
.three-d-card.status-notable { box-shadow: inset 0 3px 0 var(--red); }
.three-d-card span { color: var(--blue); font: 700 8px var(--mono); letter-spacing: .06em; }
.three-d-card strong { display: block; margin-top: 4px; font: 700 11px var(--mono); }
/* [정합성수정] 원본: display:none — 3D 카드 설명문이었습니다 */
.three-d-card p { font-size: 10px; color: var(--muted); line-height: 1.5; margin-top: 4px; }
.three-d-export { margin-top: 8px; width: 100%; height: 30px; border: 0; background: #111a23; color: white; font-size: 8px; font-weight: 800; cursor: pointer; }
.three-d-export:disabled { opacity: .42; cursor: not-allowed; }
/* [정합성수정] 원본: display:none — 3D가 진단값이 아니라는 핵심 고지였습니다 */
.final-next-analysis b { color: #7b5c12; font-size: 9px; }
.final-next-analysis span { color: #685b3c; font-size: 8px; line-height: 1.55; }

.result-header { padding: 22px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-end; justify-content: space-between; }
.quality-gate { margin: 14px 18px 0; padding: 12px; display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: center; border: 1px solid var(--line); background: #f5f7f9; }
.quality-gate strong { padding: 7px; text-align: center; background: #dbe1e6; font: 600 10px var(--mono); }.quality-gate span { color: var(--muted); font-size: 9px; line-height: 1.45; }
.quality-gate.is-pass { border-color: #83c8a4; background: #eef9f3; }.quality-gate.is-pass strong { background: var(--green); color: white; }
.quality-gate.is-hold { border-color: #e5bd67; background: #fff8e7; }.quality-gate.is-hold strong { background: var(--yellow); color: #3f3314; }
.result-header .section-label { margin: 0; }.confidence { text-align: right; }.confidence span { display: block; color: var(--muted); font-size: 8px; }.confidence strong { font: 600 24px var(--mono); }.confidence strong:not(:empty)::after { content: "%"; font-size: 10px; color: var(--muted); }
.chain-empty { margin: 22px; padding: 30px 20px; text-align: center; color: var(--muted); background: #f7f9fb; border: 1px dashed var(--line-dark); font-size: 10px; line-height: 1.6; }
.chain-item { position: relative; padding: 11px 16px 11px 38px; border-bottom: 1px solid var(--line); }
.chain-item::before { content: ""; position: absolute; left: 22px; top: 0; bottom: 0; border-left: 1px solid var(--line-dark); }
.chain-item::after { content: ""; position: absolute; left: 18px; top: 17px; width: 9px; height: 9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px white; }
.chain-item.status-observe::after { background: var(--yellow); }.chain-item.status-notable::after { background: var(--red); }
.chain-top { display: flex; justify-content: space-between; gap: 12px; }.chain-top span { color: var(--blue); font: 600 8px var(--mono); }.chain-top b { font-size: 9px; padding: 3px 6px; background: #eef2f5; }
.chain-item h3 { margin: 4px 0 3px; font-size: 11px; }.chain-value { font: 600 17px var(--mono); }.chain-value small { margin-left: 3px; font-size: 8px; color: var(--muted); }
/* [정합성수정] 원본: display:none — 지표별 의미 설명이었습니다 */
.chain-item p { font-size: 10px; color: var(--muted); line-height: 1.55; margin-top: 4px; }
.paired-axis { display: grid; grid-template-columns: 1fr 1fr; gap: 5px; margin-top: 6px; }.paired-axis div { padding: 6px; background: #f5f7f9; }.paired-axis span { display: block; color: var(--muted); font-size: 8px; }.paired-axis strong { font: 600 11px var(--mono); }.paired-axis small { display: block; margin-top: 3px; color: var(--muted); font-size: 8px; line-height: 1.4; }
.manual-result { padding: 20px 22px; border-bottom: 1px solid var(--line); background: #fff7fb; }.q-angle-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }.q-angle-grid div { padding: 10px; border: 1px solid #f0b8d4; }.q-angle-grid span { display: block; font-size: 8px; color: var(--muted); }.q-angle-grid strong { font: 600 20px var(--mono); }.q-angle-grid strong::after { content: "°"; font-size: 10px; }.manual-result p { color: var(--muted); font-size: 8px; line-height: 1.5; }
/* [정합성수정] 원본: display:none — 사진 한 장으로 알 수 없는 것을 밝히는 패널이었습니다 */

.loading { position: fixed; inset: 0; z-index: 20; display: flex; flex-direction: column; align-items: center; justify-content: center; background: rgba(17,26,35,.95); color: white; }.loading[hidden] { display: none; }.loading strong { margin-top: 20px; font-size: 13px; }.loading span { margin-top: 6px; color: #91a0ad; font-size: 10px; }.scanner { width: 150px; height: 150px; border: 1px solid #3b4d5b; position: relative; overflow: hidden; }.scanner::before,.scanner::after { content:""; position:absolute; background:#3b4d5b; }.scanner::before { left:50%; top:0; bottom:0; width:1px; }.scanner::after { top:50%; left:0; right:0; height:1px; }.scanner i { position: absolute; left: 0; right: 0; height: 2px; background: var(--cyan); box-shadow: 0 0 15px var(--cyan); animation: scan 1.5s infinite ease-in-out; } @keyframes scan { 0%,100% { top: 5%; } 50% { top: 94%; } }
.toast { position: fixed; z-index: 30; left: 50%; bottom: 22px; transform: translateX(-50%); padding: 11px 16px; background: #111a23; color: white; border-left: 3px solid var(--red); font-size: 10px; box-shadow: 0 10px 30px rgba(0,0,0,.25); }.toast[hidden] { display: none; }

@media (max-width: 1180px) {
  .workspace, body.member-mode .workspace { grid-template-columns: 280px 1fr; }.result-panel { grid-column: 1 / -1; max-height: none; border-left: 0; border-top: 1px solid var(--line); }.chain-list { display: grid; grid-template-columns: repeat(3,1fr); }.chain-item { border-right: 1px solid var(--line); }.limit-panel { max-width: 700px; }
  .member-final-card { grid-template-columns: 1fr; }
  .member-plane-visual { min-height: 360px; }
  .member-plane-visual svg { height: 360px; }
}
@media (max-width: 760px) {
  .app-header { padding: 0 14px; }.header-state { display: none; }.workspace { display: block; }.control-panel { border-right: 0; max-height: none; overflow: visible; }.capture-progress { top: 0; }.capture-diagram { height: 280px; }.live-actions { grid-template-columns: 1fr 1fr; }.live-actions .primary-button { grid-column: 1 / -1; }.viewer-toolbar { height: auto; padding: 12px; display: block; }.layer-toggles { justify-content: start; margin-top: 10px; }.canvas-shell { min-height: 600px; }.canvas-shell.is-live-active { min-height: 78vh; }.live-guide-frame { width: min(68%, 340px); top: 2.5%; bottom: 2.5%; }.chain-list { display: block; }.result-panel { max-height: none; }.manual-prompt { min-width: calc(100% - 24px); }.member-summary-card { left: auto; right: 8px; top: 52px; width: min(220px, calc(100% - 28px)); transform: translateX(8px); }.canvas-shell.has-muscle-panel .member-summary-card { left: 8px; right: auto; transform: translateX(-8px); }.muscle-side-panel { top: 52px; right: 8px; width: min(230px, calc(100% - 28px)); }.member-tabs { left: 12px; right: 12px; transform: none; }.viewer-footer { flex-wrap: wrap; height: auto; padding: 10px; }
  .member-final-panel { inset: 8px; }
  .member-final-head { display: grid; gap: 8px; align-items: start; }
  .member-final-head strong { font-size: 17px; }
  .member-final-body { padding: 9px; }
  .member-final-photo-grid, .processing-captures, .processing-steps { grid-template-columns: 1fr; }
  .member-final-photo img, .processing-capture img { height: 160px; }
  .assessment-processing-panel { inset: 8px; }
}

@media (max-width: 520px) {
  .final-view-grid, .multi-view-grid, .three-d-grid, .three-d-findings, .exercise-list { grid-template-columns: 1fr; }
  .three-d-stage { grid-template-columns: 1fr; }
  .body3d-canvas { height: 280px; }
  .final-view-grid article { border-right: 0; }
  .member-plane-visual { min-height: 300px; }
  .member-plane-visual svg { height: 300px; }
  .member-final-item { grid-template-columns: 34px 1fr; }
}

/* ===== [2026-07-30] 네이비 '근육 균형 가설' 결과 패널 · 깨끗한 사진 · 고정 해부 이미지 ===== */
.member-final-card.layout-panel { display: flex; flex-direction: column; gap: 16px; color: #dbe8f2; }
.member-report-head span { display: block; color: var(--cyan); font: 800 9px var(--mono); letter-spacing: .14em; }
.member-report-head strong { display: block; margin-top: 4px; color: #fff; font-size: 22px; letter-spacing: -.03em; }
.member-report-head p { margin: 6px 0 0; color: #9fb1bf; font-size: 12px; line-height: 1.55; }

.member-report-main { display: grid; grid-template-columns: minmax(300px, 1fr) minmax(280px, .94fr); gap: 16px; align-items: stretch; }
.member-photo-col { display: flex; flex-direction: column; gap: 8px; }
.member-dir-indicator { align-self: flex-start; padding: 5px 12px; border-radius: 999px; background: rgba(39,215,209,.14); border: 1px solid rgba(39,215,209,.4); color: #8ff0ec; font: 800 11px var(--mono); letter-spacing: .1em; }

/* 사진 + 정렬선 오버레이 */
.member-photo-align { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 10px; border-radius: 14px; background: #0e1620; border: 1px solid rgba(255,255,255,.1); }
.member-photo-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.member-photo-head b { color: #cfe0ec; font-size: 12px; }
.member-photo-tabs { display: flex; gap: 6px; }
.member-photo-tabs button { padding: 5px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.04); color: #b7c6d3; font-size: 12px; cursor: pointer; }
.member-photo-tabs button.is-active { color: #06222a; background: var(--cyan); border-color: var(--cyan); font-weight: 800; }
.member-photo-stage { position: relative; width: 100%; border-radius: 10px; overflow: hidden; background: #0a1017; min-height: 260px; display: grid; place-items: center; }
.member-photo-stage img { display: block; max-width: 100%; max-height: 62vh; width: auto; height: auto; }
.member-photo-stage canvas { position: absolute; inset: 0; margin: auto; pointer-events: none; }
.member-photo-cap { color: #8fa3b3; font-size: 11px; }
.member-retake-btn { align-self: flex-start; padding: 6px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.05); color: #cfe0ec; font-size: 12px; cursor: pointer; }

/* 네이비 가설 패널 */
.member-hypo-panel { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; background: linear-gradient(160deg,#122232,#0c1826); border: 1px solid rgba(59,130,246,.22); }
.member-hypo-head h3 { margin: 0; color: #eaf3fb; font-size: 17px; letter-spacing: -.02em; }
.member-hypo-head p { margin: 5px 0 0; color: #8798a6; font-size: 10.5px; line-height: 1.5; }
.member-hypo-list { display: flex; flex-direction: column; gap: 10px; }
.member-hypo-list .muscle-side-item { padding: 11px 12px; border: 1px solid rgba(255,255,255,.08); border-radius: 10px; background: rgba(255,255,255,.02); }
.member-hypo-list .muscle-side-item > div { margin-bottom: 4px; }
.member-hypo-list .muscle-side-item h3 { font-size: 13px; color: #eaf3fb; }
.member-hypo-list .muscle-side-item b { font-size: 9px; padding: 3px 7px; }
.member-hypo-list .hypo-desc { margin: 2px 0 8px; color: #aebccb; font-size: 11px; line-height: 1.5; }
.member-hypo-list .muscle-tag-row { grid-template-columns: 78px 1fr; }
.member-hypo-list .muscle-tag-row > span { font-size: 9px; padding-top: 4px; }
.member-hypo-list .muscle-tags i { font-size: 10px; padding: 4px 8px; }
.member-hypo-list .muscle-side-empty { font-size: 12px; }
.member-hypo-legend { display: flex; flex-wrap: wrap; gap: 12px; padding-top: 10px; border-top: 1px solid rgba(255,255,255,.08); }
.member-hypo-legend .lg { position: relative; padding-left: 16px; color: #b7c6d3; font-size: 10.5px; }
.member-hypo-legend .lg::before { content: ""; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 11px; height: 11px; border-radius: 50%; }
.member-hypo-legend .lg.short::before { background: #ff5a7f; }
.member-hypo-legend .lg.long::before { background: #37d9e6; }
.member-hypo-legend .lg.check::before { background: #f1c84b; }

/* 정면·측면·후면 고정 해부 이미지 */
.member-anatomy { border-top: 1px solid rgba(255,255,255,.1); padding-top: 14px; }
.member-anatomy-head h3 { margin: 0; color: #eaf3fb; font-size: 15px; }
.member-anatomy-head p { margin: 5px 0 12px; color: #8798a6; font-size: 11px; line-height: 1.5; }
.member-anatomy-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.member-anatomy-card { margin: 0; display: flex; flex-direction: column; gap: 6px; }
.member-anatomy-card figcaption { color: #9fb1bf; font: 800 10px var(--mono); letter-spacing: .08em; text-align: center; }
.anatomy-stage { position: relative; aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; border: 1px solid rgba(255,255,255,.1); background: #0e1620; }
.anatomy-canvas { width: 100%; height: 100%; display: block; }
.anatomy-empty { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; color: #8798a6; font-size: 12px; line-height: 1.5; }

/* 고급 보기(3D) */
.member-advanced { border: 1px solid rgba(255,255,255,.12); border-radius: 12px; background: rgba(9,15,22,.5); }
.member-advanced > summary { padding: 11px 14px; cursor: pointer; color: #c7d6e2; font-size: 12px; font-weight: 700; list-style: none; }
.member-advanced > summary::-webkit-details-marker { display: none; }
.member-advanced > summary::before { content: "▸ "; color: #6c8ba3; }
.member-advanced[open] > summary::before { content: "▾ "; }
.member-advanced .member-3d-left { padding: 0 14px 14px; }
.member-advanced .member-3d-stage { width: 100%; height: 420px; border-radius: 10px; overflow: hidden; background: #0e1620; }
.member-advanced .member-3d-legend { margin-top: 6px; color: #8fa3b3; font-size: 11px; display: flex; align-items: center; gap: 6px; }
.member-advanced .member-3d-legend .lg-s, .member-advanced .member-3d-legend .lg-l { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.member-advanced .member-3d-legend .lg-s { background: #ff5a7f; }
.member-advanced .member-3d-legend .lg-l { background: #37d9e6; }

.member-final-note { color: #7f909d; font-size: 11px; line-height: 1.5; }
.member-final-disclaimer { color: #6c7c89; font-size: 10.5px; line-height: 1.5; }

@media (max-width: 820px) {
  .member-report-main { grid-template-columns: 1fr; }
  .member-anatomy-cards { grid-template-columns: 1fr; }
}

/* [스켈레톤 크기 2026-08-01v2] 뷰어 높이를 화면에 맞춤 — 고정 높이 강제 탓에 다리가 잘리던 문제 수정 */
#member-combined-3d { width: 100%; height: clamp(420px, 62vh, 680px); min-height: 0; }
#member-combined-3d canvas { display: block; width: 100% !important; height: 100% !important; }

/* [수평계 2026-08-04] 촬영 화면 좌우 기울기 배지 — z-index 5 (기존: countdown/status 4, capture-diag 6, review 8) */
.device-level { position: absolute; z-index: 5; top: 12px; right: 12px; width: 146px; padding: 9px 11px; color: white; background: linear-gradient(145deg, rgba(12,19,26,.9), rgba(20,35,47,.88)); border: 1px solid rgba(39,215,209,.35); border-radius: 10px; box-shadow: 0 12px 30px rgba(0,0,0,.3); backdrop-filter: blur(8px); pointer-events: none; }
.device-level[hidden] { display: none; }
.device-level-text { display: block; font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: -.01em; }
.device-level-bar { position: relative; height: 6px; margin-top: 8px; background: rgba(255,255,255,.16); border-radius: 999px; }
.device-level-bar > b { position: absolute; left: 50%; top: -3px; width: 1px; height: 12px; background: rgba(255,255,255,.42); }
.device-level-dot { position: absolute; top: 50%; left: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; background: rgba(255,255,255,.55); transition: left .12s linear, background .2s ease; }
.device-level-angle { display: block; margin-top: 6px; color: #b6c5d0; font: 600 9px/1.35 var(--mono); font-style: normal; }
.device-level[data-level="ok"] .device-level-text { color: #2bffba; }
.device-level[data-level="ok"] .device-level-dot { background: #2bffba; }
.device-level[data-level="warn"] .device-level-text { color: #ffc46b; }
.device-level[data-level="warn"] .device-level-dot { background: #ffc46b; }
.device-level[data-level="bad"] .device-level-text { color: #ff9b9b; }
.device-level[data-level="bad"] .device-level-dot { background: #ff6b6b; }
.device-level[data-level="unknown"] .device-level-text { color: #dfe9f2; }

/* [겹쳐보기 2026-08-04] 지난달 모습 토글 — z-index 7 (비어 있던 값), 회원에게도 보인다 */
.ghost-toggle { position: absolute; z-index: 7; top: 100px; right: 12px; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; color: white; background: rgba(12,19,26,.86); border: 1px solid rgba(255,228,92,.45); border-radius: 999px; box-shadow: 0 8px 22px rgba(0,0,0,.28); font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer; user-select: none; }
.ghost-toggle[hidden] { display: none; }
.ghost-toggle input { width: 13px; height: 13px; margin: 0; accent-color: #ffe45c; cursor: pointer; }
.ghost-hint, .live-status-card > .ghost-hint { display: block; margin-top: 7px; color: #ffe45c; font-size: 9px; font-weight: 700; line-height: 1.45; }
.ghost-hint[hidden], .live-status-card > .ghost-hint[hidden] { display: none; }

@media (max-width: 520px) {
  .device-level { width: 126px; padding: 8px 9px; top: 10px; right: 10px; }
  .device-level-text { font-size: 10px; }
  .ghost-toggle { top: 92px; right: 10px; padding: 6px 9px; font-size: 9px; }
}

/* [촬영지문 2026-08-04] 카메라가 지난 촬영과 다른 자리였다는 안내.
   눈에는 띄되 실패처럼 보이지 않게, 품질 보류(.quality-gate.is-hold)와 같은 계열의 색을 쓴다. */
.capture-move-notice { margin: 10px 18px 0; padding: 11px 13px; border: 1px solid #e5bd67; border-left-width: 3px; background: #fff8e7; color: #5f4c1c; font-size: 11px; font-weight: 600; line-height: 1.55; }
.capture-move-notice[hidden] { display: none; }
.capture-move-detail { margin: 6px 18px 0; color: var(--muted); font: 600 9px var(--mono); letter-spacing: .02em; line-height: 1.5; }
.capture-move-detail[hidden] { display: none; }

/* 사진 촬영 동의 (2026-08-04) */
.live-consent-box{background:#fafafa;border:1px solid #e5e7eb;border-radius:11px;padding:12px 14px;margin:10px 0}
.live-consent{display:flex;gap:10px;align-items:flex-start;cursor:pointer;font-size:13px;line-height:1.55}
.live-consent input{margin-top:2px;flex:0 0 auto;width:17px;height:17px}
.live-consent b{display:block;color:#191919;font-weight:700;font-size:13.5px}
.live-consent em{display:block;font-style:normal;color:#5b6068;font-size:12px;margin-top:3px;line-height:1.55}

/* [측면고정 2026-08-05] 좌우 선택 UI 를 없애고 규칙 한 줄로 대체 */
.side-fixed-note{margin:0 0 10px;padding:10px 12px;border:1px solid var(--line);border-radius:9px;
background:var(--blue-soft);color:var(--ink);font-size:12.5px;line-height:1.6}
.side-fixed-note b{font-weight:700}

/* [3단계표시 2026-08-05] 숫자 대신 고름·관찰·뚜렷 세 칸 막대.
   회원 화면에서만 쓴다. 강사 화면에는 숫자를 그대로 남긴다. */
.band-bar{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;margin:7px 0 6px}
.band-bar i{position:relative;height:22px;border-radius:6px;background:#eef1f4;border:1px solid var(--line);
display:flex;align-items:center;justify-content:center}
.band-bar i em{font-style:normal;font-size:10.5px;font-weight:700;color:#98a3ad;letter-spacing:-.2px}
.band-bar i.is-on{border-color:transparent}
.band-bar i.is-on em{color:#fff}
.band-bar.status-aligned i.is-on{background:var(--green)}
.band-bar.status-observe i.is-on{background:var(--yellow)}
.band-bar.status-observe i.is-on em{color:#3d2f00}
.band-bar.status-notable i.is-on{background:var(--red)}
.repeat-badge{display:inline-block;margin-top:5px;font-style:normal;font-size:10.5px;font-weight:700;
padding:3px 9px;border-radius:999px;background:var(--blue-soft);color:var(--blue)}

/* [촬영안내 2026-08-05] 촬영 전에 한 번 뜨는 안내.
   랜딩·설문앱과 같은 흰 배경 + 연노랑으로 만든다(측정 화면 톤 정리의 첫 조각). */
.shoot-guide{position:fixed;inset:0;z-index:400;background:rgba(12,20,28,.62);
overflow-y:auto;padding:28px 16px;display:flex;align-items:flex-start;justify-content:center}
.shoot-guide[hidden]{display:none}
.shoot-guide-card{width:100%;max-width:640px;background:#fff;border-radius:20px;padding:30px 30px 26px;
font-family:Pretendard,"Apple SD Gothic Neo","Noto Sans KR",-apple-system,sans-serif;
color:#36393f;line-height:1.65;word-break:keep-all;box-shadow:0 18px 50px rgba(0,0,0,.28)}
.sg-badge{display:inline-block;background:#fff6ab;color:#6b5d00;font-size:12px;font-weight:700;
padding:5px 13px;border-radius:20px}
.shoot-guide-card h1{font-size:25px;font-weight:800;letter-spacing:-.7px;line-height:1.4;
margin:14px 0 8px;color:#191919}
.sg-sub{font-size:14.5px;color:#5b6068;margin:0}
.sg-devs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:22px 0 6px}
.sg-dev{background:#fafafa;border:1px solid #e5e7eb;border-radius:14px;padding:16px;text-align:center}
.sg-dev svg{width:32px;height:32px;stroke:#191919;stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
.sg-dev b{display:block;font-size:14.5px;color:#191919;margin:8px 0 4px;font-weight:700}
.sg-dev span{font-size:12.5px;color:#5b6068;line-height:1.55;display:block}
.sg-devnote{text-align:center;font-size:12.5px;color:#8a9099;margin:10px 0 0}
.sg-steps{list-style:none;margin:22px 0 0;padding:0;display:flex;flex-direction:column;gap:11px}
.sg-steps li{display:grid;grid-template-columns:42px 1fr;gap:14px;align-items:start;
background:#fafafa;border-radius:14px;padding:16px 17px}
.sg-steps i{width:42px;height:42px;border-radius:50%;background:#ffe45c;color:#191919;
display:flex;align-items:center;justify-content:center;font-size:16px;font-weight:800;font-style:normal}
.sg-steps h3{font-size:15.5px;font-weight:800;color:#191919;letter-spacing:-.3px;margin:0}
.sg-steps p{font-size:13px;color:#5b6068;margin:5px 0 0}
.sg-level{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:10px}
.sg-lv{background:#fff;border:1px solid #e5e7eb;border-radius:10px;padding:9px 11px;text-align:center}
.sg-lv b{display:block;font-size:11.5px;font-weight:700}
.sg-lv i{display:block;height:5px;border-radius:3px;background:#e8ebef;position:relative;margin:7px 0}
.sg-lv i::after{content:"";position:absolute;top:-3px;width:11px;height:11px;border-radius:50%}
.sg-lv.off b{color:#a86a1f}.sg-lv.off i::after{left:22%;background:#e08a3d}
.sg-lv.on b{color:#5f7a4d}.sg-lv.on i::after{left:calc(50% - 5.5px);background:#7d9a6a}
.sg-lv small{font-size:10.5px;color:#8a9099}
.sg-order{margin-top:18px;background:#fff6ab;border-radius:14px;padding:16px 18px}
.sg-order>b{font-size:14.5px;font-weight:800;color:#191919;display:block;margin-bottom:10px}
.sg-order>div{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.sg-order span{background:rgba(255,255,255,.75);border-radius:10px;padding:9px 10px;
font-size:12.5px;font-weight:700;color:#191919;display:block}
.sg-order em{display:block;font-style:normal;font-size:11px;font-weight:800;color:#8a7a00;margin-bottom:3px}
.sg-order small{display:block;font-size:11px;font-weight:500;color:#5b6068;margin-top:3px;line-height:1.45}
.sg-why{margin:18px 0 0;padding-top:16px;border-top:1px solid #e5e7eb;font-size:12.5px;color:#8a9099;line-height:1.7}
.sg-why b{color:#5b6068}
.sg-start{margin-top:20px;width:100%;min-height:52px;border:0;border-radius:999px;background:#111;color:#fff;
font-size:16px;font-weight:700;cursor:pointer;font-family:inherit}
.sg-start:hover{background:#000}
.live-guide-reopen{margin-top:6px}
@media(max-width:560px){
  .shoot-guide{padding:14px 10px}
  .shoot-guide-card{padding:24px 20px 22px;border-radius:16px}
  .sg-devs,.sg-level{grid-template-columns:1fr}
  .sg-order>div{grid-template-columns:1fr}
}

/* [기록 2026-08-08] "안 찍혀요" — 촬영 중에만, 눈에 띄지 않게 왼쪽 아래 */
.live-help { position: absolute; z-index: 9100; left: 12px; bottom: 12px; height: 32px; padding: 0 13px;
  border: 1px solid rgba(255,255,255,.24); border-radius: 16px; background: rgba(12,19,26,.62);
  color: rgba(255,255,255,.82); font: 700 12px/1 system-ui, -apple-system, sans-serif; cursor: pointer; display: none; }
.live-help:active { background: rgba(12,19,26,.9); }
body.capture-full .live-help { display: block; }

/* [막다른 길 방지 2026-08-08] 20초 넘게 막히면 뜬다. 멀리서도 눌러야 하므로 크게. */
.live-escape { position: absolute; z-index: 9200; left: 50%; bottom: 58px; transform: translateX(-50%);
  width: min(88vw, 420px); display: flex; flex-direction: column; gap: 9px;
  background: rgba(10,16,22,.92); border: 1px solid rgba(255,255,255,.2); border-radius: 16px; padding: 15px; }
.live-escape p { margin: 0 0 2px; color: #fff; font: 800 16px/1.4 system-ui, -apple-system, sans-serif; text-align: center; }
.live-escape button { min-height: 52px; border: 0; border-radius: 12px; cursor: pointer;
  font: 800 16px/1.35 system-ui, -apple-system, sans-serif; padding: 8px 14px; }
.live-escape button[data-escape="switch"] { background: #2f6fb0; color: #fff; }
.live-escape button[data-escape="upload"] { background: #e8edf1; color: #16212b; }

/* [되돌림 2026-08-09] cover 를 뺀다.
   어제 "화면 가득"을 노리고 cover 로 바꿨는데, 카메라가 가로로 넓은 영상을 주면
   세로로 긴 폰 화면을 채우려고 **위아래를 잘라낸다**. 머리와 다리가 잘리고 상체만 남는다.

   더 나쁜 것: 앱은 잘리기 전 원본을 보고 판정한다.
   그래서 회원 눈에는 반만 보이는데 앱은 "다 들어왔어요"라고 할 수 있다.
   회원이 보는 것과 앱이 재는 것은 반드시 같아야 한다.

   회원 말: "전면 화각이 너무 넓어서 상체가 반만 들어와"

   화면이 남는 것은 검은 띠로 두는 게 맞다. 잘라서 채우는 것보다 낫다. */

/* [전환 2026-08-08] 촬영 중 앞뒤 카메라 바꾸기 — 오른쪽 아래, 멀리서도 누를 수 있게 */
.live-flip { position: absolute; z-index: 9100; right: 12px; bottom: 12px;
  min-height: 44px; padding: 0 16px; display: none; align-items: center; gap: 7px;
  border: 1px solid rgba(255,255,255,.26); border-radius: 22px; background: rgba(12,19,26,.68);
  color: #fff; font: 800 14px/1 system-ui, -apple-system, sans-serif; cursor: pointer; }
.live-flip span { font-size: 17px; }
.live-flip:active { background: rgba(12,19,26,.92); }
body.capture-full .live-flip { display: inline-flex; }

/* [화면 채우기 2026-08-09] 가로 영상일 때만 잘라서 채운다.
   잘리는 건 좌우뿐이다. 위아래(전신)는 하나도 안 잃는다. */
.live-camera-stage.fill-crop video,
.live-camera-stage.fill-crop canvas { object-fit: cover; }

/* [카메라 위를 비운다 2026-08-09]
   회원 말: "파란색 글들 전부 안보이게해줘 카메라에 아무것도 안보이게해"
   혼자 찍는 사람은 자기 모습을 봐야 한다. 그 위에 글이 얹히면 자기를 못 본다.
   남기는 것은 넷뿐 — 지금 상태(배지) · 숫자(카운트) · 끝내기 · 도움. 나머지는 다 치운다. */
body.capture-full .live-guide-frame,
body.capture-full .live-tilt-warn,
body.capture-full .ghost-toggle,
body.capture-full .ghost-overlay-toggle,
body.capture-full [class*="ghost"],
body.capture-full .live-status-card,
body.capture-full .live-angle-row,
body.capture-full #live-detail-message,
body.capture-full #live-main-message,
body.capture-full .live-mini-status,
body.capture-full #capture-diag:not([data-debug]) { display: none !important; }

/* 남기는 넷은 작고 구석에 */
body.capture-full .live-frame-badge { top: 58px; }
/* 전체화면에서도 단계 칩은 남긴다 — 소리가 없을 때 이것 말고는 알 방법이 없다 */
body.capture-full .live-step-chip { top: 14px; }
body.capture-full .live-exit,
body.capture-full .live-help { opacity: .72; }
/* [2026-09-03] 카메라 바꾸기만은 흐리게 두지 않는다 — 못 찾으면 촬영이 통째로 막힌다 */
body.capture-full .live-flip { opacity: 1; }
body.capture-full .live-exit:active,
body.capture-full .live-flip:active,
body.capture-full .live-help:active { opacity: 1; }

/* [진단 2026-08-09] 막혔을 때만 뜨는 줄. 무엇이 얼마나 모자란지 숫자로. */
.live-escape-why { margin: -2px 0 4px; padding: 9px 11px; border-radius: 9px;
  background: rgba(255,255,255,.08); color: #cfe0ec;
  font: 600 12.5px/1.7 Menlo, Consolas, monospace; white-space: pre-line; text-align: left; }

/* [2026-08-09] 회원 말: "카메라 바꾸기 맨 아래로 넣어주고, 사진으로 올릴게요 제거해,
   앞에 측정하는 수치도 제거해. 화면이 보였으면 좋겠어"

   화면을 덮던 창을 없앴다. 남는 건 맨 아래 한 줄뿐이다.
   혼자 찍는 사람은 자기 모습을 봐야 한다. 그 위에 무엇도 올리지 않는다. */
body.capture-full .live-escape { display: none !important; }

body.capture-full .live-flip {
  left: 50%; right: auto; transform: translateX(-50%);
  bottom: calc(20px + env(safe-area-inset-bottom, 0px));
  min-height: 54px; padding: 0 26px; border-radius: 27px;
  background: rgba(12,19,26,.86); font-size: 15px; opacity: 1;
  border-color: rgba(255,255,255,.45);
}
body.capture-full .live-help { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); left: 12px; }
body.capture-full .live-exit { top: calc(12px + env(safe-area-inset-top, 0px)); right: 12px; }


/* [촬영 중 안내 한 줄 2026-08-10]
   촬영 화면에서는 상자도 색도 숫자도 없애고, 지금 무엇을 하면 되는지 짧은 말만 남긴다.
   이게 없으면 안 찍힐 때 회원은 그냥 서 있게 된다. 실제로 그렇게 됐다. */
body.capture-full .live-frame-badge {
  top: 68px; padding: 0; background: none !important; box-shadow: none;
  max-width: 84vw; text-align: center; pointer-events: none;
}
body.capture-full .live-frame-badge b {
  font: 800 21px/1.3 system-ui, -apple-system, sans-serif; color: #fff;
  text-shadow: 0 2px 10px rgba(0,0,0,.75), 0 0 3px rgba(0,0,0,.9);
  word-break: keep-all;
}
body.capture-full .live-frame-badge span { display: none; }   /* 설명 줄은 뺀다 — 한 줄이면 된다 */


/* [사진 먼저 2026-08-11 은정님]
   폰에서는 3D 골격이 화면을 다 차지해서, 정작 본인 사진은 한참 내려야 나왔다.
   본인 몸이 먼저다. 좁은 화면에서는 사진 칸을 위로 올린다. */
@media (max-width: 860px) {
  .member-final-card.layout-3d { display: flex; flex-direction: column; }
  .member-final-card.layout-3d .member-final-side { order: 1; }
  .member-final-card.layout-3d .member-3d-left { order: 2; }
}
/* [2026-08-11 밤 · 왜곡 수정] 여기 있던 img { width:100% } 를 지웠다.
   위쪽 원래 규칙(max-height:62vh, 비율 유지)과 겹쳐서, 넓은 노트북 화면에서
   가로는 꽉 채우고 세로는 못 자라 사진이 눌려 보였다. 폰은 좁아서 안 걸렸을 뿐이다.
   원래 규칙 하나만 남긴다 — 비율은 절대 강제하지 않는다. */


/* [스크롤 2026-08-11 은정님]
   3D 골격 위에 손가락이 닿으면 화면이 안 올라갔다. 뼈를 돌리는 동작으로 먹혀서다.
   위아래로 미는 것은 화면 넘김, 좌우로 미는 것만 뼈 돌리기로 나눈다. */
.member-3d-stage, .member-3d-stage canvas { touch-action: pan-y !important; }
.body3d-viewer canvas, #member-combined-3d canvas { touch-action: pan-y !important; }

/* 배포 트리거용 주석 — 깨어있기 가동 (2026-08-16 01:10) */

/* 배포 트리거 — 깨어있기 화면끄기 판으로 교체 */

/* 배포 트리거 — Vercel 재로그인 후 다시 올리기 (2026-08-16 15시) */

/* [2026-08-26] 들어오자마자 고르는 두 길 — 실시간 셀프 촬영 / 사진 올리기
   왼쪽 패널은 밝은 바탕이라 흰 테두리가 안 보였다 → 밝은 바탕용으로 그림 */
.mode-choice-grid { display: grid; gap: 10px; }
.mode-choice-card {
  display: block; width: 100%; text-align: left; cursor: pointer;
  border: 1.5px solid #d9dee4; border-radius: 14px;
  background: #fff; color: inherit;
  padding: 14px 16px;
  box-shadow: 0 1px 4px rgba(20, 30, 40, 0.06);
  transition: border-color 120ms ease, background 120ms ease, transform 120ms ease;
}
.mode-choice-card:hover, .mode-choice-card:focus-visible {
  border-color: #111; background: #fff6ab33; outline: none; transform: translateY(-1px);
}
.mode-choice-card b { display: block; font-size: 15px; margin-bottom: 4px; }
.mode-choice-card b::before { content: "→ "; color: #b9a11a; }
.mode-choice-card span { display: block; font-size: 12.5px; color: #5b6068; line-height: 1.55; }