:root {
  --ink: #18202a;
  --text: #2e3740;
  --muted: #68737c;
  --paper: #f5f6f6;
  --surface: #ffffff;
  --line: #d8dde0;
  --line-dark: #b8c0c5;
  --blue: #235f9f;
  --blue-dark: #194d82;
  --blue-pale: #edf3f8;
  --teal: #278a86;
  --teal-dark: #176a67;
  --orange: #d85b3c;
  --green: #27795b;
}

* { box-sizing: border-box; }
html { max-width: 100%; overflow-x: hidden; scroll-behavior: smooth; }
body {
  max-width: 100%;
  overflow-x: hidden;
  margin: 0;
  color: var(--text);
  background: var(--paper);
  font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  word-break: keep-all;
  overflow-wrap: break-word;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
button, input { font: inherit; }
button { color: inherit; }
[hidden] { display: none !important; }

main { overflow: hidden; }
.site-header {
  width: min(1180px, calc(100% - 48px));
  min-height: 72px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; align-items: baseline; gap: 8px; margin-bottom: 8px; color: var(--ink); font-size: 25px; font-weight: 800; line-height: 1; letter-spacing: -.035em; text-decoration: none; }
.brand-sub { color: var(--muted); font-size: 12px; font-weight: 600; line-height: 1; letter-spacing: -.01em; }
.header-nav { display: flex; align-items: center; gap: 28px; }
.header-nav a { min-height: 44px; display: inline-flex; align-items: center; color: #4d5962; font-size: 14px; font-weight: 650; text-decoration: none; }
.header-nav a:hover { color: var(--blue-dark); text-decoration: underline; text-underline-offset: 4px; }
.header-nav a:focus-visible { outline: 3px solid rgba(35,95,159,.23); outline-offset: 3px; }

.hero {
  width: min(1180px, calc(100% - 48px));
  margin: 0 auto;
  padding: 64px 0 76px;
  display: grid;
  grid-template-columns: minmax(0, .86fr) minmax(500px, 1.14fr);
  align-items: center;
  gap: clamp(42px, 6vw, 82px);
}
.hero-copy { min-width: 0; }
h1, h2, h3, p { text-wrap: pretty; }
h1 { max-width: 12.5em; margin: 0; color: var(--ink); font-size: clamp(30px, 2.7vw, 37px); line-height: 1.3; letter-spacing: -.035em; font-weight: 760; }
.hero-lede { max-width: 38em; margin: 24px 0 28px; color: #55616a; font-size: 17px; line-height: 1.72; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-privacy { max-width: 31em; margin: 14px 0 0; color: #4f5b63; font-size: 14px; line-height: 1.55; }
.hero-privacy p { margin: 0; word-break: keep-all; }
.nowrap { white-space: nowrap; }
.hero-privacy p + p { margin-top: 2px; }
.hero-checklist { max-width: 31em; margin: 22px 0 0; padding: 16px 18px 17px; background: var(--blue-pale); border: 1px solid #cddcea; border-radius: 6px; }
.hero-checklist strong { display: block; margin-bottom: 9px; color: var(--blue-dark); font-size: 15px; font-weight: 780; }
.hero-checklist ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.hero-checklist li { position: relative; padding-left: 27px; color: var(--ink); font-size: 15px; font-weight: 620; line-height: 1.5; }
.hero-checklist li::before { content: ""; position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; background: var(--blue); }
.hero-checklist li::after { content: ""; position: absolute; left: 6.5px; top: 5.5px; width: 4px; height: 8px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
body:not([data-view="home"]) .hero,
body:not([data-view="home"]) .home-section,
body:not([data-view="home"]) .header-nav { display: none; }
.mobile-only { display: none; }

.button { min-height: 48px; padding: 11px 18px; border: 1px solid transparent; border-radius: 4px; background: transparent; font-size: 15px; font-weight: 720; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
.button:hover { transform: none; }
.button:focus-visible { outline: 3px solid rgba(35,95,159,.23); outline-offset: 2px; }
.button-primary { color: #fff; background: var(--blue); border-color: var(--blue); }
.button-primary:hover { background: var(--blue-dark); border-color: var(--blue-dark); }
.button-quiet { color: var(--ink); background: var(--surface); border-color: var(--line-dark); }
.button-quiet:hover { border-color: var(--ink); }
.button-record { color: #fff; background: var(--green); border-color: var(--green); }
.button-stop { color: #fff; background: var(--orange); border-color: var(--orange); }
.button[disabled] { opacity: .45; pointer-events: none; }

.preview-stage { min-width: 0; padding: 22px; background: linear-gradient(155deg, #e4eef7 0%, #eef3f7 100%); border-radius: 14px; }
.result-preview { min-width: 0; padding: 22px; background: var(--surface); border: 1px solid #c4ced6; border-radius: 10px; overflow: hidden; box-shadow: 0 1px 2px rgba(24,32,42,.06), 0 16px 36px rgba(24,32,42,.13); }
.preview-stage-label { margin: 0 2px 12px; color: var(--ink); font-size: 15px; font-weight: 760; }
.preview-chrome { display: flex; align-items: center; gap: 6px; margin: -22px -22px 18px; padding: 9px 14px; background: #eef1f4; border-bottom: 1px solid #d8dee3; }
.preview-chrome i { width: 9px; height: 9px; border-radius: 50%; background: #cbd2d8; }
.preview-chrome span { flex: 0 1 240px; margin-left: 12px; padding: 3px 12px; color: #5f6b73; background: #fff; border: 1px solid #dde2e6; border-radius: 999px; font-size: 11px; font-weight: 650; letter-spacing: .01em; }
.preview-heading { padding-bottom: 14px; display: flex; align-items: baseline; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--line); }
.preview-heading strong { color: var(--ink); font-size: 15px; }
.preview-heading span { color: var(--muted); font-size: 12px; }
.preview-context { margin: 15px 0; padding: 9px 11px; display: flex; justify-content: space-between; gap: 12px; background: #f3f5f6; border: 1px solid var(--line); font-size: 11px; }
.preview-context span { color: var(--muted); }
.preview-context strong { color: #3d4951; font-weight: 720; }
.preview-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(170px, .65fr); gap: 12px; }
.preview-evidence, .preview-point, .preview-content { border: 1px solid var(--line); }
.preview-evidence { min-width: 0; padding: 12px; background: #f7f8f8; }
.preview-evidence small, .preview-point small, .preview-content small { display: block; color: var(--muted); font-size: 11px; }
.preview-evidence-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.preview-evidence-head span { color: #41515d; font-size: 10px; font-weight: 680; }
.preview-evidence-head i { width: 6px; height: 6px; display: inline-block; margin-right: 3px; border-radius: 50%; background: var(--blue); vertical-align: 1px; }
.trend-panel { margin-top: 9px; padding: 12px 12px 9px; background: #fff; border: 1px solid #d9dfe2; }
.trend-meta { display: flex; justify-content: space-between; color: #7a858c; font-size: 8px; }
.trend-panel svg { width: 100%; height: 148px; display: block; overflow: visible; }
.trend-grid { fill: none; stroke: #e3e7e9; stroke-width: 1; }
.trend-baseline { fill: none; stroke: #aeb9c0; stroke-width: 1; stroke-dasharray: 4 4; }
.trend-area { fill: #edf3f8; }
.trend-line { fill: none; stroke: #526876; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.trend-dots circle { fill: #fff; stroke: #526876; stroke-width: 2; }
.trend-dots .selected { fill: var(--blue); stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 3px rgba(35,95,159,.4)); }
.trend-marker { fill: none; stroke: var(--blue); stroke-width: 1; stroke-dasharray: 3 4; }
.trend-label rect { fill: var(--blue); }
.trend-label text { fill: #fff; font-size: 9px; font-weight: 700; text-anchor: middle; }
.trend-reps { margin-top: -19px; padding: 0 2px; display: grid; grid-template-columns: repeat(8, 1fr); color: #879197; font-size: 8px; text-align: center; }
.trend-reps .selected { color: var(--blue); font-weight: 800; }
.trend-caption { margin: 10px 0 0; padding-top: 9px; display: flex; justify-content: space-between; gap: 10px; border-top: 1px solid #e1e5e7; font-size: 9px; }
.trend-caption b { color: var(--blue-dark); }
.trend-caption span { color: #67737b; text-align: right; }
.preview-notes { min-width: 0; display: grid; gap: 12px; }
.preview-point, .preview-content { padding: 15px; }
.preview-point { border: 1px solid #d6e3ee; border-radius: 4px; background: var(--blue-pale); }
.preview-point strong, .preview-content strong, .preview-content span { display: block; }
.preview-point strong, .preview-content strong { margin-top: 8px; color: var(--ink); font-size: 13px; line-height: 1.55; }
.preview-content span { margin-top: 7px; color: var(--muted); font-size: 11px; }
.preview-content .preview-source-tag { width: fit-content; padding: 4px 7px; color: var(--blue-dark); background: var(--blue-pale); border-radius: 3px; font-size: 10px; font-weight: 760; }

.home-section { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 82px 0; border-top: 1px solid var(--line); }
.home-section-heading { max-width: 700px; margin-bottom: 32px; }
.home-section-heading h2 { margin: 0; color: var(--ink); font-size: clamp(28px, 3vw, 38px); line-height: 1.25; letter-spacing: -.035em; }
.home-section-heading p { max-width: 40em; margin: 12px 0 0; color: var(--muted); font-size: 16px; line-height: 1.7; }
.service-flow { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); border: 1px solid var(--line); background: var(--surface); }
.service-flow li { min-width: 0; padding: 24px 20px; position: relative; border-left: 1px solid var(--line); }
.service-flow li:first-child { border-left: 0; }
.service-flow li:not(:last-child)::after { content: ""; width: 8px; height: 8px; position: absolute; z-index: 2; top: 42px; right: -5px; border-top: 1.5px solid #7b858c; border-right: 1.5px solid #7b858c; background: var(--surface); transform: rotate(45deg); }
.service-flow svg { width: 44px; height: 44px; margin-bottom: 20px; fill: none; stroke: #46525a; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.service-flow strong, .service-flow span, .service-flow small { display: block; }
.service-flow strong { color: var(--ink); font-size: 15px; line-height: 1.4; }
.service-flow span { margin-top: 9px; color: var(--muted); font-size: 13px; line-height: 1.6; }
.service-flow small { margin-top: 10px; color: var(--muted); font-size: 11px; font-weight: 600; }
.metric-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.metric-cards article { min-height: 270px; padding: 26px; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); }
.metric-number { color: #97a2a9; font-size: 11px; font-weight: 760; letter-spacing: .08em; }
.metric-bars { min-height: 76px; margin: 19px 0 3px; padding: 14px 0 12px; display: grid; gap: 10px; border-top: 1px solid #e1e5e7; border-bottom: 1px solid #e1e5e7; }
.metric-bars span { display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 9px; }
.metric-bars b { color: #7a858c; font-size: 9px; font-weight: 650; }
.metric-bars i { height: 7px; display: block; position: relative; background: #d7dfe4; border-radius: 1px; }
.metric-bars i::after { content: ""; position: absolute; inset: 0; width: 100%; background: #526876; border-radius: inherit; }
.metric-bars .bar-long { width: 92%; }
.metric-bars .bar-medium { width: 72%; }
.metric-bars .bar-short { width: 54%; }
.depth-bars i::after { background: var(--blue); }
.metric-cards h3 { margin: 17px 0 8px; color: var(--ink); font-size: 20px; letter-spacing: -.02em; }
.metric-cards p { max-width: 30em; margin: 0; color: var(--muted); font-size: 15px; line-height: 1.68; }
.limits-section { display: grid; grid-template-columns: minmax(250px, .7fr) minmax(0, 1.3fr); gap: 70px; }
.limits-section .home-section-heading { margin: 0; }
.limits-section ul { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line-dark); }
.limits-section li { padding: 15px 0 15px 22px; position: relative; color: #47535b; border-bottom: 1px solid var(--line); font-size: 16px; }
.service-observes li::before { content: "✓"; position: absolute; left: 0; color: var(--blue); font-weight: 800; }
.eyebrow { margin: 0 0 12px; color: #52606a; font-size: 13px; font-weight: 700; }

.workspace, .results { width: min(1200px, calc(100% - 48px)); margin: 0 auto; padding: 66px 0 112px; }
.section-heading { margin-bottom: 30px; display: flex; justify-content: space-between; align-items: end; gap: 36px; }
.section-heading h2 { margin: 0; max-width: 800px; color: var(--ink); font-size: clamp(30px, 3.5vw, 45px); line-height: 1.12; letter-spacing: -.04em; }
.section-deck { margin: 12px 0 0; color: var(--muted); font-size: 14px; }
.stepper { list-style: none; margin: 0; padding: 0; display: flex; border: 1px solid var(--line); background: var(--surface); }
.stepper li { min-width: 92px; padding: 11px 15px; display: flex; align-items: center; gap: 8px; color: #7d888f; border-left: 1px solid var(--line); font-size: 14px; font-weight: 720; }
.stepper li:first-child { border-left: 0; }
.stepper span { color: inherit; font-size: 12px; font-weight: 700; line-height: 1; }
.stepper .active { color: #fff; background: var(--ink); }

.capture-layout { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(300px, .55fr); gap: 18px; align-items: start; }
.capture-layout > *, .evidence-grid > *, .verify-media > * { min-width: 0; }
.capture-mode-question { margin: 0 0 9px; color: var(--ink); font-size: 14px; font-weight: 780; }
.capture-modes { margin-bottom: 10px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.capture-mode { min-width: 0; min-height: 78px; padding: 14px 48px 14px 16px; position: relative; color: #58646d; background: #fff; border: 1px solid var(--line); border-radius: 5px; text-align: left; cursor: pointer; }
.capture-mode::before { content: ""; width: 20px; height: 20px; position: absolute; top: 50%; right: 16px; transform: translateY(-50%); border: 1.5px solid #b3bcc2; border-radius: 50%; background: #fff; box-sizing: border-box; }
.capture-mode::after { content: none; }
.capture-mode strong, .capture-mode span { display: block; }
.capture-mode strong { color: var(--ink); font-size: 14px; }
.capture-mode span { margin-top: 3px; font-size: 11px; }
.capture-mode em { margin-left: 5px; padding: 2px 6px; vertical-align: 2px; color: var(--blue-dark); background: var(--blue-pale); border-radius: 3px; font-size: 9px; font-style: normal; font-weight: 760; }
.capture-mode.active { background: #edf3f8; border-color: var(--blue-dark); box-shadow: 0 0 0 1px var(--blue-dark); }
.capture-mode.active::before { border-color: var(--blue); background: var(--blue); }
.capture-mode.active::after { content: ""; width: 5px; height: 10px; position: absolute; top: 50%; right: 23.5px; margin-top: -7px; border-right: 2px solid #fff; border-bottom: 2px solid #fff; transform: rotate(45deg); }
.capture-mode:focus-visible { z-index: 2; outline: 3px solid rgba(35,95,159,.23); outline-offset: -3px; }
.capture-mode-description { margin: 0 0 18px; color: var(--muted); font-size: 12px; }
.camera-card, .guide-card, .evidence-card, .observation-card, .compare-card, .recommend-section, .lower-exercise-section, .technical-details { background: var(--surface); border: 1px solid var(--line); border-radius: 6px; box-shadow: none; }
.camera-card { padding: 12px; }
.camera-stage { height: clamp(470px, 68svh, 620px); min-height: 0; overflow: hidden; display: grid; grid-template-rows: minmax(0, 1fr) auto; background: #15191d; border-radius: 3px; }
.camera-preview { min-height: 0; position: relative; overflow: hidden; display: grid; place-items: center; background: #15191d; }
.camera-preview::before, .camera-preview::after { content: ""; position: absolute; z-index: 1; pointer-events: none; background: rgba(255,255,255,.1); }
.camera-preview::before { top: 0; bottom: 0; left: 50%; width: 1px; }
.camera-preview::after { top: 50%; right: 0; left: 0; height: 1px; }
.camera-stage video, .camera-stage canvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #101316; }
.camera-stage canvas { z-index: 3; pointer-events: none; background: transparent; }
.camera-stage.mirrored #preview-video, .camera-stage.mirrored #preview-overlay { transform: scaleX(-1); transform-origin: center; }
.camera-placeholder { position: relative; z-index: 2; width: min(430px, 78%); padding: 30px; display: flex; flex-direction: column; align-items: center; gap: 7px; color: #f2f4f5; text-align: center; }
.camera-placeholder strong { margin-top: 18px; font-size: 15px; }
.camera-placeholder small { color: #929da5; font-size: 12px; }
.capture-status { width: 100%; min-height: 116px; padding: 12px 18px 13px; position: relative; z-index: 5; display: grid; align-content: center; color: #fff; background: #111b25; border-top: 1px solid #40505e; text-align: center; }
.capture-status strong { display: block; font-size: clamp(22px, 2.8vw, 34px); font-weight: 800; line-height: 1.12; white-space: nowrap; }
.capture-status-action { margin-top: 5px; display: block; color: #fff; font-size: clamp(28px, 3.7vw, 40px); font-weight: 850; line-height: 1.12; letter-spacing: -.035em; word-break: keep-all; overflow-wrap: normal; }
.capture-status span { margin-top: 5px; display: block; color: #cbd6de; font-size: clamp(11px, 1.2vw, 15px); font-weight: 650; line-height: 1.35; word-break: keep-all; }
.frame-guide { width: 100%; height: 310px; position: relative; border: 1px dashed rgba(255,255,255,.22); }
.frame-guide i { width: 30px; height: 30px; position: absolute; display: block; border-color: #82aace; border-style: solid; }
.frame-guide i:nth-child(1) { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.frame-guide i:nth-child(2) { top: -1px; right: -1px; border-width: 2px 2px 0 0; }
.frame-guide i:nth-child(3) { bottom: -1px; left: -1px; border-width: 0 0 2px 2px; }
.frame-guide i:nth-child(4) { right: -1px; bottom: -1px; border-width: 0 2px 2px 0; }
.camera-controls { padding: 12px 0 0; display: flex; flex-wrap: wrap; align-items: stretch; gap: 7px; }
.facing-control { min-height: 48px; padding: 6px 10px; display: inline-flex; align-items: center; gap: 8px; color: var(--muted); background: #fff; border: 1px solid var(--line-dark); border-radius: 4px; font-size: 11px; font-weight: 700; }
.facing-control select { min-height: 32px; color: var(--ink); background: #fff; border: 0; font-size: 13px; font-weight: 700; }
.sound-toggle[aria-pressed="false"] { color: #68737c; background: #eef0f1; }
.android-effects-note { margin: 12px 2px 2px; color: var(--ink); font-size: 14px; font-weight: 620; line-height: 1.55; }
.local-note { margin: 12px 2px 2px; color: #4f5b63; font-size: 13px; line-height: 1.55; }
body[data-view="home"] .local-note { display: none; }
.mobile-upload-note { margin: 12px 0 2px; padding: 13px 15px; color: #3c5264; background: var(--blue-pale); border: 1px solid #d6e3ee; border-radius: 6px; font-size: 12.5px; line-height: 1.6; }
.mobile-upload-note b { display: block; margin-bottom: 4px; color: var(--blue-dark); font-size: 13px; }
.mobile-upload-note p { margin: 0; }
.mobile-upload-note p:first-of-type { color: var(--ink); font-size: 16px; font-weight: 750; line-height: 1.5; }
.mobile-upload-note p + p { margin-top: 8px; color: #56616a; font-size: 12px; }
.mobile-upload-note .upload-note-warn { margin-top: 4px; color: #3c4a54; font-size: 14px; font-weight: 600; }
.unusable-actions, .analysis-retry { display: flex; flex-wrap: wrap; gap: 8px; }
.analysis-retry { margin-top: 18px; }
.requirements-focus { outline: 3px solid rgba(35,95,159,.35); outline-offset: 4px; transition: outline-color .3s ease; }
.record-badge { position: absolute; z-index: 6; top: 10px; left: 10px; padding: 7px 8px; color: #fff; background: rgba(18,24,28,.82); border: 1px solid #485158; border-radius: 4px; font-size: 9px; font-weight: 650; line-height: 1; }
.record-badge span { width: 7px; height: 7px; margin-right: 6px; display: inline-block; border-radius: 50%; background: var(--orange); animation: pulse 1s infinite; }
.countdown { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; color: #fff; background: rgba(12,16,19,.74); font-size: 104px; font-weight: 720; line-height: 1; }
.low-rep-note { margin: -10px 0 22px; padding: 11px 14px; color: #4f5e68; background: #f0f3f5; border: 1px solid #e1e5e8; border-radius: 6px; font-size: 12px; }

.guide-card { position: sticky; top: 18px; padding: 28px; }
.card-label { margin: 0 0 9px; color: var(--blue); font-size: 11px; font-weight: 760; }
.guide-card h3, .evidence-card h3, .observation-card h3 { margin: 0; color: var(--ink); font-size: 23px; line-height: 1.25; letter-spacing: -.03em; }
.instruction-list { list-style: none; margin: 29px 0; padding: 0; border-top: 1px solid var(--line); }
.instruction-list li { padding: 19px 0; display: grid; grid-template-columns: 28px 1fr; gap: 12px; border-bottom: 1px solid var(--line); }
.instruction-list li > span { color: var(--blue); font-size: 12px; font-weight: 700; line-height: 1.6; }
.instruction-list strong, .instruction-list small { display: block; }
.instruction-list strong { color: var(--ink); font-size: 16px; line-height: 1.4; }
.instruction-list small { margin-top: 5px; color: #4f5a63; font-size: 13.5px; line-height: 1.6; word-break: keep-all; }
.capture-caution { margin: -9px 0 20px; padding: 13px 15px; display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: start; background: #fff8e8; border: 1px solid #ecd9a6; border-radius: 6px; }
.capture-caution b { padding: 2px 7px; color: #7a5310; background: #fbe9bd; border-radius: 4px; font-size: 12px; font-weight: 800; line-height: 1.5; }
.capture-caution p { margin: 0; color: #3d454c; font-size: 13.5px; line-height: 1.6; word-break: keep-all; }
.notice-box { padding: 15px 16px; color: #56616a; background: #f0f2f3; border: 1px solid #e1e5e8; border-radius: 6px; font-size: 12px; }
.retry-position-note { margin-top: 12px; padding: 15px 16px; color: #5f4a24; background: #fff7e7; border: 1px solid #efdcb6; border-radius: 6px; font-size: 12px; }

.analysis-panel { width: min(720px, calc(100% - 48px)); margin: 90px auto 150px; padding: 52px 44px; color: #fff; background: var(--ink); border-radius: 6px; text-align: left; }
.analysis-panel .eyebrow { color: #91b8db; }
.analysis-panel h2 { max-width: 590px; margin: 0; font-size: 36px; letter-spacing: -.035em; }
.analysis-panel p { color: #bbc3c9; }
.progress { height: 5px; margin: 29px 0 0; overflow: hidden; background: #424c55; }
.progress i { width: 4%; height: 100%; display: block; background: #7facd4; transition: width .35s; }
.analysis-count { font-size: 11px; font-weight: 600; line-height: 1; }
.analysis-panel .analysis-keep { margin: 14px 0 0; color: #9aa4ab; font-size: 13px; line-height: 1.5; word-break: keep-all; }

.results-heading { padding-bottom: 23px; border-bottom: 1px solid var(--ink); }
.notice-stack { display: grid; gap: 8px; margin-bottom: 18px; }
.result-notice { padding: 13px 15px; display: grid; grid-template-columns: 1fr; gap: 3px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); font-size: 12px; }
.result-notice b { color: var(--muted); font-size: 11px; font-weight: 700; line-height: 1.5; }
.result-notice.info { border-color: #d6e3ee; }
.result-notice.warn { border-color: #efdcb6; background: #fffaf1; }
.result-notice.error { border-color: #efc9bd; background: #fff5f2; }
.unusable-result { padding: 32px; background: var(--surface); border: 1px solid var(--line); border-top: 4px solid var(--orange); border-radius: 6px; }
.unusable-result h3 { margin: 0; color: var(--ink); font-size: 27px; letter-spacing: -.03em; }
.unusable-result #unusable-messages { margin: 14px 0 24px; color: var(--muted); font-size: 14px; }
.unusable-result #unusable-messages p { margin: 6px 0; }
.result-lead { margin: 0 0 14px; padding: 18px 20px; color: var(--ink); background: var(--blue-pale); border: 1px solid #d6e3ee; border-radius: 6px; font-size: 18px; font-weight: 760; line-height: 1.45; }
.result-summary { margin-bottom: 14px; display: grid; grid-template-columns: repeat(4, 1fr); background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.summary-chip { min-height: 112px; padding: 20px; border-left: 1px solid var(--line); }
.summary-chip:first-child { border-left: 0; }
.summary-chip small, .summary-chip strong { display: block; }
.summary-chip small { margin-top: 8px; color: var(--muted); font-size: 11px; word-break: keep-all; }
.summary-chip strong { color: var(--ink); font-size: clamp(20px, 2.1vw, 28px); line-height: 1.2; letter-spacing: -.03em; }
.result-flow { margin: 0 0 22px; padding: 16px 19px; color: #44525c; background: #fff; border: 1px solid var(--line); border-radius: 6px; font-size: 13px; line-height: 1.7; }
.result-flow p { margin: 0; }
.result-flow p + p { margin-top: 5px; }
.rep-charts { margin: 0 0 20px; padding: 22px; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.rep-charts-heading { margin-bottom: 18px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.rep-charts-heading h3 { margin: 0; color: var(--ink); font-size: 24px; letter-spacing: -.025em; }
.rep-charts-heading > p { max-width: 410px; margin: 0; color: var(--muted); font-size: 11px; text-align: right; }
.rep-chart-scroll { max-width: 100%; overflow-x: hidden; }
.rep-chart-scroll.scrollable { overflow-x: auto; overscroll-behavior-inline: contain; scrollbar-gutter: stable; }
.rep-chart-inner { min-width: 0; }
.series-chart-wrap { width: 100%; overflow: hidden; }
.series-chart { width: 100%; height: auto; min-height: 310px; display: block; touch-action: manipulation; }
.series-axis { stroke: #aeb8be; stroke-width: 1; }
.series-standing-band { fill: #e9ecee; opacity: .78; }
.series-standing-label { fill: #6b767e; font-size: 11px; font-weight: 650; }
.series-chart.narrow .series-standing-label { font-size: 14px; }
.series-alert-range { fill: #f5b88f; opacity: .16; cursor: pointer; }
.series-alert-range:hover, .series-alert-range:focus-visible { opacity: .26; outline: none; }
.series-standing-line { stroke: #78858c; stroke-width: 1.25; stroke-dasharray: 6 5; }
.series-median-line { stroke: #7a858b; stroke-width: 1; stroke-dasharray: 5 5; opacity: .62; }
.series-hip-line { fill: none; stroke: var(--ink); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.series-title { fill: var(--ink); font-size: 16px; font-weight: 780; }
.series-detail, .series-axis-label, .series-reference-label { fill: #647078; font-size: 11px; font-weight: 620; }
.series-time-axis line { stroke: #aeb8be; stroke-width: 1; }
.series-time-axis text { fill: #647078; font-size: 10px; text-anchor: middle; }
.series-point { color: var(--ink); cursor: pointer; }
.series-point.knee { color: var(--blue); }
.series-point circle { fill: #fff; stroke: currentColor; stroke-width: 3; transition: r .15s ease, stroke-width .15s ease; }
.series-rep-guides line { stroke: #dfe4e7; stroke-width: 1; stroke-dasharray: 2 4; }
.series-rep-axis-label { fill: #647078; font-size: 11px; font-weight: 620; text-anchor: end; }
.series-rep-tick { cursor: pointer; }
.series-rep-tick rect { fill: transparent; }
.series-rep-tick text { fill: #3f4a52; font-size: 13px; font-weight: 760; text-anchor: middle; }
.series-chart.narrow { min-height: 0; }
.series-chart.narrow .series-title { font-size: 22px; }
.series-chart.narrow .series-detail, .series-chart.narrow .series-axis-label, .series-chart.narrow .series-rep-axis-label { font-size: 15px; }
.series-chart.narrow .series-time-axis text { font-size: 14px; }
.series-chart.narrow .series-rep-tick text { font-size: 19px; }
.series-rep-tick.flagged rect { fill: #fdeee6; }
.series-rep-tick.flagged text { fill: #b24a2c; }
.series-rep-tick.active rect { fill: none; stroke: #8a959c; stroke-width: 1.2; }
.series-rep-tick:hover rect { fill: #eef1f3; }
.series-point.flagged { color: var(--orange); }
.series-point.flagged circle { fill: #fff8f3; stroke-width: 4; }
.series-point.active circle, .series-point:hover circle, .series-point:focus-visible circle { r: 10px; stroke-width: 4; }
.series-point:focus-visible { outline: none; }
.series-unavailable { padding: 28px; color: #6a4d3d; background: #fff8f3; border: 1px solid #e9c6b1; font-size: 13px; }
.rep-bar-chart + .rep-bar-chart { margin-top: 25px; padding-top: 21px; border-top: 1px solid var(--line); }
.rep-bar-chart-title { margin-bottom: 6px; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 9px; }
.rep-bar-chart-title h4 { margin: 0; color: var(--ink); font-size: 15px; white-space: nowrap; }
.rep-bar-chart-title span { color: var(--muted); font-size: 12px; }
.rep-bar-summary { min-height: 18px; margin: 0 0 7px; color: #4a5963; font-size: 13px; line-height: 1.5; }
.chart-help { position: relative; margin-left: auto; color: var(--blue-dark); font-size: 10px; }
.chart-help summary { list-style: none; cursor: pointer; font-weight: 700; white-space: nowrap; }
.chart-help summary::-webkit-details-marker { display: none; }
.chart-help p { position: absolute; right: 0; top: 17px; z-index: 5; width: 300px; margin: 0; padding: 10px 12px; color: #40505b; background: #fff; border: 1px solid #aebcc7; border-radius: 4px; box-shadow: 0 8px 22px rgba(19,31,42,.13); font-size: 10px; font-weight: 500; line-height: 1.55; }
.rep-bar-stage { position: relative; height: 190px; padding-left: 22px; }
.rep-bar-grid { position: absolute; inset: 0 0 0 22px; display: grid; gap: 5px; z-index: 2; }
.rep-bar-button { min-width: 0; height: 190px; padding: 0 2px; display: grid; grid-template-rows: 17px 148px 25px; color: var(--text); background: transparent; border: 0; border-bottom: 2px solid transparent; text-align: center; cursor: pointer; }
.rep-bar-button:hover, .rep-bar-button.active { background: #f2f6f9; border-bottom-color: var(--blue); }
.rep-bar-button:focus-visible { outline: 3px solid rgba(35,95,159,.23); outline-offset: -2px; }
.rep-bar-tag { min-height: 15px; align-self: end; justify-self: center; padding: 2px 4px; color: transparent; border-radius: 3px; font-size: 10px; font-weight: 800; line-height: 1.2; white-space: nowrap; }
.rep-bar-value { position: absolute; left: 0; right: 0; z-index: 3; color: #667078; font-size: 11px; font-weight: 650; line-height: 1; white-space: nowrap; }
.rep-bar-space { height: 148px; position: relative; display: flex; align-items: flex-end; justify-content: center; }
.rep-bar-fill { width: min(70%, 22px); min-height: 2px; display: block; background: #cfd5d8; border: 1px solid #b6bec3; border-bottom: 0; border-radius: 2px 2px 0 0; }
.rep-bar-chart.family-knee .rep-bar-fill { background: var(--blue); border-color: var(--blue-dark); }
.rep-bar-chart.family-depth .rep-bar-fill { background: var(--teal); border-color: var(--teal-dark); }
.rep-bar-button small { padding-top: 6px; color: #69737a; font-size: 11px; font-weight: 650; line-height: 1; }
.rep-bar-button.flagged .rep-bar-tag { color: #fff; background: var(--orange); }
.rep-bar-button.flagged .rep-bar-value { color: #9f3e28; font-weight: 820; }
.rep-bar-button.flagged .rep-bar-fill { width: min(84%, 27px); background: var(--orange); border: 2px solid #a83f27; border-bottom: 0; }
.rep-bar-button.early .rep-bar-tag { color: #fff; background: #59646c; }
.rep-bar-button.early .rep-bar-value { color: #3f494f; font-weight: 760; }
.rep-bar-button.early .rep-bar-fill { width: min(80%, 25px); background: #65717a; border: 2px solid #3f494f; border-bottom: 0; }
.rep-bar-button.excluded .rep-bar-tag { color: #5f676c; background: #e0e3e4; }
.rep-bar-button.excluded .rep-bar-value { color: #7a8287; }
.rep-chart-zero { position: absolute; left: 0; bottom: 19px; color: #7b858b; font-size: 8px; line-height: 1; }
.rep-chart-median { position: absolute; left: 22px; right: 0; z-index: 1; border-top: 1px dashed #6d777e; }
.rep-chart-median em { position: absolute; right: 0; bottom: 3px; padding: 2px 4px; color: #505a60; background: rgba(255,255,255,.9); font-size: 8px; font-style: normal; font-weight: 700; line-height: 1; }
.rep-chart-reference { position: absolute; left: 22px; right: 0; z-index: 1; border-top: 1px solid #a7b0b6; }
.rep-chart-reference em { position: absolute; left: 0; top: 3px; padding: 2px 4px; color: #626d74; background: rgba(255,255,255,.92); font-size: 8px; font-style: normal; font-weight: 700; line-height: 1; }
.rep-chart-caption { margin: 18px 0 0; padding: 12px 14px; color: #4f5e68; background: var(--blue-pale); border: 1px solid #d6e3ee; border-radius: 6px; font-size: 12px; }
.reference-charts { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.reference-charts > summary { display: flex; align-items: center; gap: 8px; color: var(--ink); cursor: pointer; list-style: none; font-size: 16px; }
.reference-charts > summary strong { font-weight: 760; }
.reference-charts > summary::-webkit-details-marker { display: none; }
.reference-charts > summary::after { content: '▾'; margin-left: auto; color: #78838a; transition: transform .18s ease; }
.reference-charts:not([open]) > summary::after { transform: rotate(-90deg); }
.reference-charts > summary em { display: none; margin-left: auto; color: var(--muted); font-size: 10px; font-style: normal; font-weight: 600; }
.reference-charts > summary::after { margin-left: 0; }
.reference-badge { padding: 3px 6px; color: #59636a !important; background: #e7eaec; border-radius: 3px; font-size: 9px !important; font-weight: 760; line-height: 1; }
.reference-charts .rep-bar-chart-title h4 { display: none; }
.reference-chart-scroll { max-width: 100%; margin-top: 17px; overflow-x: auto; overscroll-behavior-inline: contain; }
.rep-bar-chart.reference .rep-bar-fill { background: #b7bec2; border-color: #90999e; }
.rep-bar-chart.reference .rep-bar-stage { height: 198px; }
.rep-bar-chart.reference .rep-bar-button { height: 198px; grid-template-rows: 17px 156px 25px; cursor: default; }
.rep-bar-chart.reference .rep-bar-space { height: 156px; }
.rep-bar-chart.reference .rep-bar-button:hover { background: transparent; border-bottom-color: transparent; }
.rep-bar-chart.reference .rep-chart-median { border-top-color: #899399; }
.rep-bar-chart.reference .rep-bar-value { left: 50%; right: auto; transform: translateX(-50%); padding: 1px 3px; background: rgba(255,255,255,.94); border-radius: 2px; }
.rep-overview { margin: 0 0 20px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.rep-overview-heading { margin-bottom: 16px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.rep-overview-heading h3 { margin: 0; color: var(--ink); font-size: 24px; letter-spacing: -.025em; }
.rep-overview-heading > p { margin: 0; color: var(--muted); font-size: 11px; text-align: right; }
.rep-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.rep-overview-card { min-width: 0; padding: 0; overflow: hidden; color: var(--ink); background: #fff; border: 1px solid var(--line); border-radius: 5px; text-align: left; cursor: pointer; }
.rep-overview-card:hover { border-color: #8da9bd; }
.rep-overview-card:focus-visible { outline: 3px solid rgba(35,95,159,.23); outline-offset: 2px; }
.rep-overview-card.flagged { border-color: #779dbb; box-shadow: inset 0 0 0 1px #779dbb; }
.rep-overview-card.active { border-color: var(--blue); box-shadow: inset 0 0 0 2px var(--blue); }
.rep-overview-card.excluded { color: #6b7378; background: #eef0f1; border-color: #c8ced1; box-shadow: none; }
.rep-thumbnail-wrap { position: relative; display: block; background: #11161a; border-bottom: 1px solid var(--line); }
.rep-thumbnail { width: 100%; height: clamp(130px, 13vw, 182px); display: block; object-fit: contain; background: #11161a; }
.rep-overview-card.excluded .rep-thumbnail { filter: grayscale(1); opacity: .58; }
.rep-tags { position: absolute; top: 8px; left: 8px; right: 8px; display: flex; flex-wrap: wrap; gap: 4px; pointer-events: none; }
.rep-tags span { padding: 4px 6px; color: #fff; background: rgba(25,77,130,.92); border-radius: 3px; font-size: 9px; font-weight: 750; line-height: 1; }
.rep-tags span:nth-child(2) { background: rgba(42,52,61,.9); }
.rep-overview-body { padding: 12px; display: block; }
.rep-overview-head { min-height: 23px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.rep-overview-head strong { font-size: 13px; }
.rep-overview-head em { padding: 3px 5px; color: #5e666b; background: #d9dddf; border-radius: 3px; font-size: 9px; font-style: normal; font-weight: 740; }
.rep-overview-metric { margin-top: 10px; display: block; }
.rep-overview-metric > span:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.rep-overview-metric small { color: var(--muted); font-size: 9px; }
.rep-overview-metric b { color: var(--ink); font-size: 11px; }
.rep-overview-note { min-height: 36px; margin-top: 11px; padding-top: 10px; display: block; color: #53616a; border-top: 1px solid #e3e6e8; font-size: 9px; line-height: 1.45; }
.rep-median-track { position: relative; height: 7px; margin-top: 5px; display: block; background: #e7ebed; border-radius: 10px; }
.rep-median-track.empty { opacity: .45; }
.rep-median-span { position: absolute; top: 2px; height: 3px; min-width: 2px; background: #83a9c8; border-radius: 5px; }
.rep-median-marker { position: absolute; top: -2px; width: 1px; height: 11px; background: #3f4b53; }
.rep-value-marker { position: absolute; top: 0; width: 7px; height: 7px; border: 2px solid #fff; border-radius: 50%; background: var(--blue); transform: translateX(-50%); box-shadow: 0 0 0 1px var(--blue); }

.evidence-grid { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(300px, .6fr); gap: 16px; }
.evidence-card, .observation-card { padding: 18px; }
.card-topline { min-height: 58px; margin-bottom: 15px; display: flex; justify-content: space-between; gap: 20px; }
.frame-time { color: var(--muted); font-size: 10px; font-weight: 650; line-height: 1; }
#evidence-canvas { width: 100%; max-height: 650px; object-fit: contain; background: #101316; border-radius: 3px; }
.evidence-caption { margin-bottom: 0; color: var(--muted); font-size: 12px; }
.observation-card { padding: 25px; }
.metric-line { padding: 21px 0; border-bottom: 1px solid var(--line); }
.metric-line:last-child { border-bottom: 0; }
.metric-line small, .metric-line strong, .metric-line span { display: block; }
.metric-line small { color: var(--muted); font-size: 11px; }
.metric-line strong { margin: 6px 0; color: var(--ink); font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -.045em; }
.metric-line span { color: #626d75; font-size: 12px; }
.uncertainty-note { margin-top: 22px; padding: 14px; color: #52616c; background: var(--blue-pale); border: 1px solid #d6e3ee; border-radius: 6px; font-size: 12px; }
.feedback-card { margin: 0 0 18px; padding: 22px 24px; background: var(--blue-pale); border: 1px solid #cddce8; border-radius: 6px; }
.feedback-list { display: grid; gap: 8px; }
.feedback-item { width: 100%; padding: 14px 16px; display: grid; grid-template-columns: 1fr; align-items: start; gap: 6px; color: var(--ink); background: rgba(255,255,255,.72); border: 1px solid #d2dfe8; border-radius: 6px; text-align: left; cursor: pointer; }
.feedback-item:hover { border-color: #7b9db9; }
.feedback-item:focus-visible { outline: 3px solid rgba(35,95,159,.23); outline-offset: 2px; }
.feedback-item > span { display: block; }
.feedback-item b, .feedback-item strong { display: block; }
.feedback-item b { margin-bottom: 3px; color: var(--blue-dark); font-size: 11px; }
.feedback-item strong { font-size: 14px; }
.feedback-item small { color: #53636f; font-size: 13px; line-height: 1.55; }
.feedback-item.primary { border-color: var(--blue); }
.feedback-neutral { margin: 0; color: #53636f; font-size: 13px; }
.feedback-card.neutral { background: var(--surface); border-color: var(--line); }
.compare-card { margin-top: 16px; padding: 22px; }
.compare-heading { margin-bottom: 13px; display: flex; align-items: end; justify-content: space-between; gap: 24px; }
.compare-heading h3 { margin: 0; color: var(--ink); font-size: 23px; letter-spacing: -.025em; }
.compare-heading > p { max-width: 460px; margin: 0; color: var(--muted); font-size: 11px; text-align: right; }
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.compare-item { padding: 14px; background: #f0f2f3; border: 1px solid transparent; border-radius: 4px; }
.compare-item.selected { border-color: #8aabc5; background: #f3f7fa; }
.compare-item small, .compare-item strong { display: block; }
.compare-item small { font-size: 11px; }
.compare-item strong { color: var(--ink); font-size: 13px; }
.compare-shot canvas { width: 100%; max-height: 330px; margin: 10px 0; object-fit: contain; background: #101316; border-radius: 3px; }
.compare-shot canvas.body-crop { max-height: 440px; background: transparent; }

.recommend-section { margin-top: 46px; padding: 30px; border-top: 3px solid var(--ink); }
.section-heading.compact { margin-bottom: 12px; }
.section-heading.compact h2 { font-size: 33px; }
.recommend-disclaimer { max-width: 850px; color: var(--muted); font-size: 13px; }
.recommend-grid { margin-top: 24px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.recommend-card { overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: 5px; }
.recommend-media { position: relative; aspect-ratio: 16 / 8.5; background: #e5e8ea; border-bottom: 1px solid var(--line); }
.recommend-media video { width: 100%; height: 100%; display: block; object-fit: cover; }
.recommend-card.media-error .recommend-media::after { content: "브라우저에서 바로 재생하지 못했습니다. 아래 링크로 열어 주세요."; position: absolute; inset: 0; padding: 24px; display: grid; place-items: center; color: #fff; background: #283139; text-align: center; font-size: 12px; }
.recommend-body { padding: 18px; }
.recommend-tag { display: inline-block; padding: 5px 7px; color: var(--blue-dark); background: var(--blue-pale); border-radius: 3px; font-size: 10px; font-weight: 720; }
.recommend-body h3 { margin: 11px 0 4px; color: var(--ink); font-size: 20px; }
.recommend-body p { margin: 3px 0 0; color: var(--muted); font-size: 12px; }
.recommend-body .recommend-reason { margin: 13px 0 10px; color: #53606a; line-height: 1.65; }
.recommend-reason b { color: var(--ink); }
.recommend-link { margin-top: 13px; display: inline-block; color: var(--blue-dark); font-size: 12px; font-weight: 720; text-underline-offset: 3px; }
.attribution { margin: 21px 0 0; color: var(--muted); font-size: 11px; }
.lower-exercise-section { margin-top: 14px; padding: 24px; }
.lower-exercise-heading { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.lower-exercise-heading h2 { margin: 2px 0 0; color: var(--ink); font-size: 25px; letter-spacing: -.03em; }
.lower-exercise-icon { width: 34px; height: 34px; display: grid; flex: none; place-items: center; color: var(--teal-dark); background: #e4f2f1; border-radius: 50%; font-size: 18px; font-weight: 760; }
.lower-exercise-description { margin: 9px 0 17px; color: var(--muted); font-size: 13px; }
#lower-exercise-card { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.lower-exercise-card { display: grid; grid-template-rows: auto 1fr; overflow: hidden; border: 1px solid var(--line); border-radius: 5px; }
.lower-exercise-media { position: relative; min-height: 190px; background: #e5e8ea; }
.lower-exercise-media video { width: 100%; height: 100%; display: block; object-fit: cover; }
.lower-exercise-card.media-error .lower-exercise-media::after { content: "브라우저에서 바로 재생하지 못했습니다. 오른쪽 링크로 열어 주세요."; position: absolute; inset: 0; padding: 20px; display: grid; place-items: center; color: #fff; background: #283139; text-align: center; font-size: 11px; }
.lower-exercise-body { padding: 22px; align-self: center; }
.lower-exercise-tag { display: inline-block; padding: 5px 8px; color: var(--teal-dark); background: #e4f2f1; border-radius: 3px; font-size: 10px; font-weight: 760; }
.lower-exercise-body h3 { margin: 11px 0 7px; color: var(--ink); font-size: 21px; }
.lower-exercise-meta { margin: 0; color: var(--muted); font-size: 12px; }
.lower-exercise-source { margin: 8px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.technical-details { margin-top: 14px; padding: 17px 20px; color: var(--muted); font-size: 12px; }
.technical-details summary { color: var(--ink); font-size: 12px; font-weight: 720; cursor: pointer; }
.technical-details code { font-family: inherit; }
.retry-card { margin-top: 14px; padding: 24px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 24px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.retry-copy { min-width: 0; }
.retry-card h3 { margin: 0; color: var(--ink); font-size: 21px; letter-spacing: -.025em; }
.retry-card p:last-child { margin: 7px 0 0; color: var(--muted); font-size: 12px; }
.retry-card .button { flex: none; }
.retry-card .retry-lock-warning { margin: 14px 0 0; padding: 11px 13px; color: #5f4a24; background: #fff7e7; border: 1px solid #efdcb6; border-radius: 6px; font-size: 12px; }
.retry-warmup { margin-top: 20px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.retry-warmup[hidden] { display: none; }
.retry-warmup-item { display: grid; grid-template-columns: minmax(130px, 38%) minmax(0, 1fr); overflow: hidden; border: 1px solid var(--line); border-radius: 5px; }
.retry-warmup-media { position: relative; min-height: 128px; background: #e5e8ea; }
.retry-warmup-media video { width: 100%; height: 100%; display: block; object-fit: cover; }
.retry-warmup-item.media-error .retry-warmup-media::after { content: "브라우저에서 바로 재생하지 못했습니다. 오른쪽 링크로 열어 주세요."; position: absolute; inset: 0; padding: 18px; display: grid; place-items: center; color: #fff; background: #283139; text-align: center; font-size: 11px; }
.retry-warmup-body { padding: 16px 18px; }
.retry-warmup-body .retry-warmup-label { margin: 0 0 7px; color: var(--blue-dark); font-size: 11px; font-weight: 720; }
.retry-warmup-body h4 { margin: 0 0 8px; color: var(--ink); font-size: 17px; }
.retry-warmup-body p { margin: 4px 0 0; color: var(--muted); font-size: 11px; line-height: 1.55; }
.verify-section { margin: 30px 0 34px; padding-bottom: 38px; border-bottom: 1px solid var(--ink); }
.verify-heading h2 { margin: 0; color: var(--ink); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.35; letter-spacing: -.03em; }
.verify-heading > p:last-child { margin: 8px 0 20px; color: var(--muted); font-size: 14px; }
.verify-result { margin-top: 14px; padding: 22px; background: var(--surface); border: 1px solid var(--line); border-radius: 6px; }
.verify-result-head { display: flex; justify-content: space-between; gap: 18px; align-items: start; margin-bottom: 16px; }
.verify-result-head h3 { margin: 0; color: var(--ink); font-size: 21px; }
.verify-verdict { padding: 6px 9px; color: var(--blue-dark); background: var(--blue-pale); border-radius: 4px; font-size: 11px; font-weight: 760; white-space: nowrap; }
.verify-verdict.worse { color: #8f3d2d; background: #fff0eb; }
.verify-verdict.neutral { color: #46555f; background: #edf0f2; }
.verify-verdict.unavailable { color: #616b72; background: #edf0f1; }
.verify-summary { margin-bottom: 4px; color: var(--ink); font-size: 14px; font-weight: 650; }
.verify-values { margin: 0 0 4px; color: #53606a; font-size: 13px; font-variant-numeric: tabular-nums; }
.verify-media { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 17px; }
.verify-shot { padding: 12px; background: #f0f2f3; }
.verify-shot small, .verify-shot strong { display: block; }
.verify-shot small { margin-bottom: 8px; color: var(--muted); font-size: 10px; }
.verify-shot img, .verify-shot canvas { width: 100%; max-height: 340px; display: block; object-fit: contain; background: #101316; border-radius: 3px; }
.verify-shot img, .verify-shot canvas.body-crop { max-height: 440px; background: transparent; }
.verify-shot strong { margin-top: 8px; color: var(--ink); font-size: 12px; }
.verify-caution { margin: 13px 0 0; padding: 11px 13px; color: #6d552b; background: #fff8e9; font-size: 11px; }
.verify-caution b { color: inherit; }
.verify-reason { color: #5d656b; background: #f0f2f3; }

.site-footer { width: min(1180px, calc(100% - 48px)); margin: 0 auto; padding: 42px 0 54px; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(420px, .85fr); gap: 26px 70px; color: var(--muted); border-top: 1px solid var(--line-dark); font-size: 13px; }
.site-footer strong { color: var(--ink); font-size: 15px; }
.site-footer p { margin: 7px 0 0; }
.site-footer .research-source { max-width: 50em; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); font-size: 12px; line-height: 1.65; }
.site-footer .research-source b { color: #48555e; }
.site-footer dl { margin: 0; display: grid; grid-template-columns: 1fr; gap: 13px 24px; align-content: start; }
.site-footer dl div { display: grid; grid-template-columns: 68px 1fr; gap: 10px; }
.site-footer dt { color: var(--muted); }
.site-footer dd { margin: 0; color: var(--ink); }
.footer-license { grid-column: 1 / -1; }
.footer-license a { color: var(--blue-dark); font-weight: 700; text-underline-offset: 3px; }
.footer-note { grid-column: 1 / -1; padding-top: 20px; border-top: 1px solid var(--line); }
.footer-note a { color: var(--blue-dark); font-weight: 700; text-underline-offset: 3px; }

@keyframes pulse { 50% { opacity: .3; } }

@media (max-width: 920px) {
  .hero { grid-template-columns: 1fr; gap: 42px; padding-top: 60px; }
  .preview-stage { max-width: 720px; }
  .service-flow { grid-template-columns: 1fr; }
  .service-flow li, .service-flow li:nth-child(odd), .service-flow li:nth-child(-n+2) { padding: 16px 20px; display: grid; grid-template-columns: 36px 1fr; column-gap: 16px; align-items: center; border-left: 0; border-top: 1px solid var(--line); }
  .service-flow li:first-child { border-top: 0; }
  .service-flow svg { width: 36px; height: 36px; margin: 0; grid-row: span 2; }
  .service-flow small { grid-column: 2; margin-top: 2px; }
  .service-flow li:not(:last-child)::after { top: auto; right: auto; bottom: -5px; left: 34px; transform: rotate(135deg); }
  .site-footer { grid-template-columns: 1fr; }
  .capture-layout, .evidence-grid { grid-template-columns: 1fr; }
  .guide-card { position: static; }
}

@media (max-width: 680px) {
  .site-header, .hero, .home-section, .workspace, .results, .site-footer { width: calc(100% - 32px); }
  .site-header { height: 68px; }
  .hero { padding: 44px 0 60px; }
  h1 { font-size: clamp(31px, 9vw, 38px); }
  .hero-lede { font-size: 16px; }
  .desktop-capture-action, .desktop-upload-action, .desktop-camera-control, .desktop-only { display: none !important; }
  .mobile-only { display: inline-flex; }
  .mobile-upload-action { width: 100%; align-items: center; justify-content: center; }
  .preview-heading { align-items: flex-start; flex-direction: column; gap: 4px; }
  .preview-grid { grid-template-columns: 1fr; }
  .home-section { padding: 60px 0; }
  .service-flow, .metric-cards { grid-template-columns: 1fr; }
  .service-flow li, .service-flow li:nth-child(odd), .service-flow li:nth-child(-n+2) { border-top: 1px solid var(--line); border-left: 0; }
  .service-flow li:first-child { border-top: 0; }
  .service-flow li:last-child { grid-column: auto; }
  .limits-section { grid-template-columns: 1fr; gap: 28px; }
  .workspace, .results { padding-top: 48px; }
  .section-heading { align-items: start; }
  .section-heading h2 { font-size: 33px; }
  .stepper { display: none; }
  .camera-stage { height: clamp(440px, 68svh, 560px); min-height: 0; }
  .capture-modes { grid-template-columns: 1fr; }
  .capture-mode { min-height: 60px; padding-block: 11px; border: 1px solid var(--line); }
  .capture-status { min-height: 116px; padding: 11px 9px 12px; }
  .capture-status strong { font-size: clamp(23px, 7vw, 31px); }
  .capture-status-action { font-size: clamp(28px, 8.5vw, 38px); }
  .capture-status span { margin-top: 5px; font-size: 12px; }
  .camera-controls .file-button { width: 100%; display: inline-flex; align-items: center; justify-content: center; }
  .camera-controls #camera-button, .camera-controls #record-button, .camera-controls #stop-button { flex: 1 1 100%; }
  .camera-controls .sound-toggle, .facing-control { flex: 1 1 calc(50% - 4px); }
  .result-summary { grid-template-columns: 1fr 1fr; }
  .summary-chip { min-height: 105px; border-top: 1px solid var(--line); border-left: 1px solid var(--line); }
  .summary-chip:nth-child(-n+2) { border-top: 0; }
  .summary-chip:nth-child(odd) { border-left: 0; }
  .rep-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .rep-charts { padding: 16px; }
  .rep-charts-heading { align-items: start; flex-direction: column; gap: 6px; }
  .rep-charts-heading > p { text-align: left; }
  .rep-bar-grid { gap: 2px; }
  .rep-bar-button { padding-inline: 0; }
  .rep-bar-tag { padding-inline: 1px; font-size: 9px; }
  .rep-bar-value, .rep-bar-button small { font-size: 10px; }
  .chart-help p { width: min(270px, calc(100vw - 64px)); }
  .reference-charts:not([open]) > summary em { display: inline; color: var(--blue-dark); }
  .reference-charts[open] > summary em { display: none; }
  .rep-overview { padding: 16px; }
  .rep-overview-heading, .compare-heading { align-items: start; flex-direction: column; gap: 6px; }
  .rep-overview-heading > p, .compare-heading > p { text-align: left; }
  .rep-thumbnail { height: clamp(132px, 41vw, 180px); }
  .feedback-item { grid-template-columns: 1fr; gap: 7px; }
  .recommend-grid, .compare-grid { grid-template-columns: 1fr; }
  .verify-media { grid-template-columns: 1fr; }
  .retry-card { grid-template-columns: 1fr; }
  .retry-warmup { grid-template-columns: 1fr; }
  .retry-warmup-item { grid-template-columns: 1fr; }
  .retry-warmup-media { aspect-ratio: 16 / 8.5; min-height: 0; }
  #lower-exercise-card { display: flex; overflow-x: auto; gap: 12px; padding-bottom: 6px; scroll-snap-type: x mandatory; }
  .lower-exercise-card { flex: 0 0 min(84vw, 330px); scroll-snap-align: start; }
  .lower-exercise-media { aspect-ratio: 16 / 8.5; min-height: 0; }
  .analysis-panel { width: calc(100% - 28px); padding: 46px 24px; }
  .site-footer dl { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .brand { font-size: 22px; margin-bottom: 6px; }
  .brand-sub { font-size: 11px; }
  .header-nav { gap: 12px; }
  .header-nav a { font-size: 12px; }
  .hero-actions .button { width: 100%; }
  .preview-stage { padding: 12px; border-radius: 12px; }
  .result-preview { padding: 15px; }
  .preview-chrome { margin: -15px -15px 14px; padding: 8px 12px; }
  .preview-context { margin-inline: -1px; }
  .camera-stage { height: clamp(390px, 70svh, 500px); min-height: 0; }
  .capture-layout, .camera-card, .camera-stage { width: 100%; max-width: 100%; min-width: 0; }
  .camera-card { overflow: hidden; }
  .camera-stage video, .camera-stage canvas { max-width: 100%; }
  .camera-placeholder { width: 88%; padding: 20px; }
  .frame-guide { height: 250px; }
  .camera-controls .button { flex: 1 1 46%; }
  .camera-controls .file-button { display: inline-flex; align-items: center; justify-content: center; }
  .recommend-section, .lower-exercise-section { padding: 20px; }
  .results-heading { align-items: stretch; flex-direction: column; }
  .results-heading .button { width: 100%; }
  .rep-overview-body { padding: 10px; }
  .verify-result { padding: 17px; }
  .verify-result-head { flex-direction: column; gap: 10px; }
  .verify-verdict { white-space: normal; }
}

/* Main-page evidence preview and metric diagrams */
.preview-alert { margin: 16px 0 12px; color: var(--ink); font-size: 16px; font-weight: 780; line-height: 1.48; word-break: keep-all; }
.preview-summary { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--line); background: #f7f8f8; }
.preview-summary div { min-width: 0; padding: 11px 9px; border-left: 1px solid var(--line); }
.preview-summary div:first-child { border-left: 0; }
.preview-summary strong, .preview-summary span { display: block; }
.preview-summary strong { color: var(--ink); font-size: 15px; line-height: 1.2; }
.preview-summary span { margin-top: 4px; color: var(--muted); font-size: 9px; line-height: 1.35; }
.preview-series-card { margin-top: 12px; padding: 10px 10px 5px; overflow: hidden; border: 1px solid var(--line); }
.preview-series-card svg { width: 100%; height: auto; display: block; }
.preview-series-alert { fill: #f5b88f; opacity: .18; }
.preview-series-axis { stroke: #b3bdc3; stroke-width: 1; }
.preview-series-reference { stroke: #7b878e; stroke-width: 1; stroke-dasharray: 5 4; opacity: .7; }
.preview-series-hip { fill: none; stroke: var(--ink); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.preview-series-title { fill: var(--ink); font-size: 13px; font-weight: 800; }
.preview-series-detail, .preview-series-note, .preview-series-time { fill: #69767e; font-size: 9px; font-weight: 650; }
.preview-series-points { fill: #fff; stroke: var(--ink); stroke-width: 2.5; }
.preview-series-points.knee { stroke: var(--blue); }
.preview-series-points .flagged { fill: #fff7f1; stroke: var(--orange); stroke-width: 3.5; }
.preview-series-reps text { y: 251px; fill: #68747b; font-size: 9px; font-weight: 700; text-anchor: middle; }
.preview-series-reps text.flagged { fill: #9b4b20; font-weight: 850; }
.preview-bar-card { margin-top: 12px; padding: 12px 12px 9px; border: 1px solid var(--line); }
.preview-bar-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.preview-bar-head strong { color: var(--ink); font-size: 11px; }
.preview-bar-head span { color: var(--muted); font-size: 9px; }
.preview-bars { height: 114px; margin-top: 8px; padding-top: 20px; position: relative; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: end; gap: 5px; }
.preview-bars > span { height: 94px; position: relative; display: grid; grid-template-rows: 13px minmax(0, 1fr) 13px; align-items: end; justify-items: center; }
.preview-bars b, .preview-bars small { position: relative; z-index: 2; color: #6d7880; font-size: 7px; font-style: normal; font-weight: 700; }
.preview-bars > span > i { width: min(23px, 70%); height: var(--bar); display: block; align-self: end; background: var(--blue); border-radius: 2px 2px 0 0; }
.preview-bars .flagged > i { background: var(--orange); }
.preview-bars .flagged b, .preview-bars .flagged small { color: #9b4b20; font-weight: 850; }
.preview-bars em { padding: 2px 4px; position: absolute; z-index: 3; top: -15px; color: #873a16; background: #fff0e6; border: 1px solid #f0b38e; border-radius: 2px; font-size: 7px; font-style: normal; font-weight: 800; white-space: nowrap; }
.preview-median-line { height: 0; position: absolute; z-index: 1; right: 0; bottom: 55px; left: 0; border-top: 1px dashed #79868e; }
.preview-median-line span { padding: 1px 3px; position: absolute; top: -12px; right: 0; color: #65727a; background: #fff; font-size: 7px; font-style: normal; }
.preview-content-list { margin-top: 12px; display: grid; grid-template-columns: 1.35fr .85fr .8fr; border: 1px solid var(--line); }
.preview-content-list p { min-width: 0; margin: 0; padding: 10px; border-left: 1px solid var(--line); }
.preview-content-list p:first-child { border-left: 0; }
.preview-content-list span, .preview-content-list strong { display: block; }
.preview-content-list span { color: var(--muted); font-size: 8px; }
.preview-content-list strong { margin-top: 4px; color: var(--ink); font-size: 10px; line-height: 1.35; }
.preview-content-list small { width: fit-content; margin-top: 5px; padding: 2px 4px; display: block; color: var(--blue-dark); background: var(--blue-pale); border-radius: 2px; font-size: 7px; font-weight: 760; }
.metric-cards article { min-height: 0; }
.metric-rep-diagram { height: 88px; margin: auto 0 0; padding: 10px; position: relative; background: #f7f8f8; border: 1px solid var(--line); }
.metric-cards article p { margin-bottom: 16px; }
.metric-pose-diagram svg { width: 100%; height: 100%; display: block; }
.pose-lines { fill: none; stroke: #69767f; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.knee-measure { fill: none; stroke: var(--blue); stroke-width: 3; stroke-linecap: round; }
.hip-measure { fill: none; stroke: #258c8b; stroke-width: 3; stroke-linecap: round; }
.pose-label text { fill: #6c7880; font-size: 9px; font-weight: 680; text-anchor: middle; }
.metric-example { margin: 10px 0 0; padding: 8px 10px; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; color: var(--blue-dark); background: var(--blue-pale); }
.metric-example span { font-size: 10px; font-weight: 700; }
.metric-example strong { font-size: 18px; }
.metric-example.teal { color: #176b6a; background: #e8f5f3; }
.metric-example.neutral { color: #4f5c64; background: #edf0f1; }
.metric-rep-diagram { padding: 20px 15px 14px; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); align-items: end; gap: 7px; }
.metric-rep-diagram > span { height: var(--h); position: relative; z-index: 2; display: block; background: var(--blue); border-radius: 2px 2px 0 0; }
.metric-rep-diagram > span.accent { background: var(--orange); }
.metric-median { height: 0; position: absolute; z-index: 1; right: 10px; bottom: 69px; left: 10px; border-top: 1px dashed #7b878e; }
.metric-median::after { content: "세트 중앙값"; padding: 1px 3px; position: absolute; top: -14px; right: 0; color: #6e7980; background: #f7f8f8; font-size: 8px; font-style: normal; }
.metric-footnote { margin: 18px 0 0; color: var(--muted); font-size: 14px; }

@media (max-width: 680px) {
  .preview-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .preview-summary div:nth-child(3) { border-left: 0; }
  .preview-summary div:nth-child(n+3) { border-top: 1px solid var(--line); }
  .preview-bars { gap: 2px; }
  .preview-content-list { grid-template-columns: 1fr; }
  .preview-content-list p { border-top: 1px solid var(--line); border-left: 0; }
  .preview-content-list p:first-child { border-top: 0; }
  .metric-cards article { min-height: 0; }
}

/* 국민체력100 콘텐츠 "더 보기" (접힌 목록) */
.content-more { grid-column: 1 / -1; margin-top: 14px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); }
.content-more summary { cursor: pointer; padding: 12px 16px; font-size: 13px; font-weight: 720; color: var(--blue-dark); list-style: none; display: flex; align-items: center; gap: 8px; }
.content-more summary::-webkit-details-marker { display: none; }
.content-more summary::before { content: "+"; display: inline-block; width: 14px; text-align: center; font-weight: 800; }
.content-more[open] summary::before { content: "−"; }
.content-more summary span { color: var(--muted); font-weight: 600; }
.content-more ul { list-style: none; margin: 0; padding: 0 16px 4px; }
.content-more li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 4px 12px; align-items: baseline; padding: 10px 0; border-top: 1px solid var(--line); font-size: 13px; }
.content-more-title { color: var(--ink); font-weight: 650; min-width: 0; overflow-wrap: anywhere; }
.content-more-meta { color: var(--muted); font-size: 12px; white-space: nowrap; }
.content-more li a { color: var(--blue-dark); font-size: 12px; font-weight: 720; white-space: nowrap; text-underline-offset: 3px; }
.content-more-source { margin: 0; padding: 8px 16px 12px; color: var(--muted); font-size: 11px; line-height: 1.55; }
@media (max-width: 560px) {
  .content-more li { grid-template-columns: minmax(0, 1fr) auto; }
  .content-more-meta { grid-column: 1 / 2; white-space: normal; }
  .content-more li a { grid-column: 2 / 3; grid-row: 1 / span 2; align-self: center; }
}

/* 한 세트 더: 회차별 비교 그래프 */
.verify-chart { margin: 14px 0 4px; padding: 12px 12px 10px; background: #fafbfb; border: 1px solid var(--line); border-radius: 5px; }
.verify-chart svg { width: 100%; height: auto; display: block; }
.verify-chart-label { fill: var(--ink); font-size: 13px; font-weight: 760; }
.verify-chart-axis { stroke: #aeb8be; stroke-width: 1; }
.verify-chart-tick { fill: #647078; font-size: 10px; text-anchor: end; dominant-baseline: middle; }
.verify-chart-x text { fill: #647078; font-size: 10px; text-anchor: middle; }
.verify-chart-x text.end { text-anchor: end; }
.verify-median { stroke-width: 1.2; stroke-dasharray: 5 5; opacity: .7; }
.verify-median.previous { stroke: #9aa4ab; }
.verify-dot.previous { fill: #c4cbd0; stroke: #fff; stroke-width: 1.5; }
.verify-line { fill: none; stroke-width: 2.2; stroke-linejoin: round; stroke-linecap: round; }
.verify-line.previous { stroke: #b9c1c7; }
.verify-chart.knee .verify-line.current { stroke: var(--blue); }
.verify-chart.depth .verify-line.current { stroke: var(--teal); }
.verify-chart.knee .verify-median.current { stroke: var(--blue); }
.verify-chart.knee .verify-dot.current { fill: var(--blue); stroke: #fff; stroke-width: 1.5; }
.verify-chart.depth .verify-median.current { stroke: var(--teal); }
.verify-chart.depth .verify-dot.current { fill: var(--teal); stroke: #fff; stroke-width: 1.5; }
.verify-chart figcaption { margin-top: 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: #55626a; font-size: 12px; }
.verify-key-item { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; margin-right: 8px; }
.verify-key { width: 10px; height: 10px; display: inline-block; flex: 0 0 auto; border-radius: 50%; }
.verify-key.previous { background: #c4cbd0; }
.verify-chart.narrow .verify-chart-label { font-size: 15px; }
.verify-chart.narrow .verify-chart-tick,
.verify-chart.narrow .verify-chart-x text { font-size: 12.5px; }
.verify-chart.knee .verify-key.current { background: var(--blue); }
.verify-chart.depth .verify-key.current { background: var(--teal); }