/*
 * P0 수납 정본: docs/go_work/trackdata_order2_mockup_260722/mockup.css?v=c7
 * 카드 내부(.rdc 이하)의 수치·구조를 유지하고 W2 풀스크린 상세 외곽에만 scope를 추가했다.
 */
.v2-detail {
  --rdc-panel-w: 440px;
  --rdc-card-h: 842px;
  --rdc-card-h: clamp(760px, calc(100dvh - 58px), 960px);
  --rdc-base: #060606;
  --rdc-ink: #fff;
  --rdc-ink2: rgba(255, 255, 255, .74);
  --rdc-caption: rgba(255, 255, 255, .55);
  --rdc-line: rgba(255, 255, 255, .06);
  --rdc-scrim: linear-gradient(to bottom, rgba(6, 6, 6, 0) 0%, rgba(6, 6, 6, .04) 32%, rgba(6, 6, 6, .48) 62%, #060606 100%);
  --track-zone-1: #6aa7ff;
  --track-zone-2: #35cfa0;
  --track-zone-3: #c8f135;
  --track-zone-4: #ffad3d;
  --track-zone-5: #ff6474;
  --chart-1: #00d992;
  --chart-2: #378add;
  --radius: 2px;
  --font-body: "Pretendard Variable", Pretendard, "Noto Sans KR", system-ui, sans-serif;
  width: 100%;
}

.v2-detail .record-stage {
  display: block;
  width: 100%;
  padding: 0;
  overflow: visible;
  border: 1px solid var(--border);
  background: var(--rdc-base);
}

.v2-detail .card-viewport {
  width: min(var(--rdc-panel-w), 100%);
  margin: 0 auto;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  background: var(--rdc-base);
}

.v2-detail .card-viewport::-webkit-scrollbar,
.v2-detail .rdc__scroll::-webkit-scrollbar {
  display: none;
}

.v2-detail .card-track {
  display: flex;
  align-items: stretch;
}

.v2-detail .data-card {
  min-width: 0;
  flex: 0 0 100%;
  scroll-snap-align: start;
}

.v2-detail .rdc {
  --accent: #00d992;
  --accent-ink: #060606;
  --accent-soft: rgba(0, 217, 146, .10);
  --chart-1: #00d992;
  --chart-2: #378add;
  --teal: #1d9e75;
  --amber: #ef9f27;
  --coral: #d85a30;
  --track-zone-1: #6aa7ff;
  --track-zone-2: #35cfa0;
  --track-zone-3: #c8f135;
  --track-zone-4: #ffad3d;
  --track-zone-5: #ff6474;
  position: relative;
  width: 100%;
  height: var(--rdc-card-h);
  overflow: hidden;
  background: var(--rdc-base);
  color: var(--rdc-ink);
  font-family: var(--font-body);
}

.v2-detail .rdc__scroll {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: none;
}

.v2-detail .rdc__media {
  position: relative;
  height: 48%;
  min-height: 0;
  overflow: hidden;
}

.v2-detail .rdc__bg {
  position: absolute;
  inset: 0;
  background: url("../assets/running-seed.webp") center 30% / cover no-repeat;
  transform: scale(1.002);
}

.v2-detail .rdc__scrim {
  position: absolute;
  inset: 0;
  background: var(--rdc-scrim);
}

.v2-detail .rdc__route-overlay {
  --route-overlay-x: 54%;
  position: absolute;
  z-index: 1;
  bottom: 27%;
  left: var(--route-overlay-x);
  width: 38%;
  height: 22%;
  overflow: visible;
  pointer-events: none;
}

.v2-detail .rdc__route-overlay path {
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}

.v2-detail .rdc__route-overlay-line {
  stroke: #fff;
  stroke-width: 4;
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .29));
}

.v2-detail .rdc__top {
  position: relative;
  z-index: 2;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 22px 0;
}

.v2-detail .rdc__title {
  margin: 0;
  color: var(--rdc-ink);
  font-size: 52px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.045em;
}

.v2-detail .rdc__actions {
  display: flex;
  gap: 9px;
  padding-top: 3px;
}

.v2-detail .rdc__act {
  position: relative;
  display: inline-flex;
  min-width: var(--tap-icon);
  min-height: var(--tap-icon);
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 0 2px;
  background: transparent;
  color: var(--rdc-ink2);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.4;
}

.v2-detail .rdc__act::after,
.v2-detail .segment-select-button::after,
.v2-detail .chart-toggle__button::after,
.v2-detail .route-map-action::after {
  position: absolute;
  content: "";
}

.v2-detail .rdc__act::after {
  inset: 0;
  pointer-events: none;
}

.v2-detail .rdc__act .app-icon {
  width: 14px;
  height: 14px;
}

.v2-detail .rdc__hero {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  padding: 0 22px 14px;
}

.v2-detail .rdc__hero-left {
  min-width: 0;
}

.v2-detail .rdc__subname {
  overflow: hidden;
  margin-bottom: 3px;
  color: var(--rdc-ink2);
  font-size: 15px;
  line-height: 1.35;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-detail .rdc__subname b {
  color: var(--rdc-ink);
  font-weight: 700;
}

.v2-detail .rdc__primary {
  color: var(--rdc-ink);
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -.035em;
}

.v2-detail .rdc__unit {
  margin-left: 2px;
  color: var(--rdc-ink2);
  font-size: .58em;
  font-weight: 500;
  letter-spacing: -.02em;
}

.v2-detail .rdc__meta {
  flex: 0 0 auto;
  padding-bottom: 2px;
  color: var(--rdc-ink2);
  text-align: right;
}

.v2-detail .rdc__date {
  font-size: 15px;
  line-height: 1.35;
}

.v2-detail .rdc__time {
  margin-top: 3px;
  color: var(--rdc-caption);
  font-size: 12px;
}

.v2-detail .rdc__body {
  min-height: 52%;
  padding: 22px 22px 40px;
  background: var(--rdc-base);
}

.v2-detail .rdc__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 30px 16px;
}

.v2-detail .rdc__stat {
  min-width: 0;
  text-align: center;
}

.v2-detail .rdc__stat-label {
  margin-bottom: 5px;
  color: var(--rdc-ink2);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.35;
}

.v2-detail .rdc__stat-value {
  color: var(--rdc-ink);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.v2-detail .rdc__sections {
  margin-top: 18px;
}

.v2-detail .rdc__section + .rdc__section {
  margin-top: 22px;
  padding-top: 22px;
  border-top: 1px solid var(--rdc-line);
}

.v2-detail .rdc__section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
  color: var(--rdc-ink2);
  font-size: 15px;
  font-weight: 700;
  line-height: 1.35;
}

.v2-detail .rdc__section-head span + span,
.v2-detail .rdc__section-head em {
  color: var(--rdc-caption);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
}

.v2-detail .rdc--data-only .rdc__body {
  min-height: 100%;
}

.v2-detail .rdc--data-only .rdc__title,
.v2-detail .rdc__area-title {
  font-size: 22px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}

.v2-detail .rdc__body--data {
  --rdc-data-head-height: 44px;
  display: flex;
  flex-direction: column;
  padding-top: 48px;
}

.v2-detail .rdc__data-head {
  display: flex;
  min-height: var(--rdc-data-head-height);
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
}

.v2-detail .rdc__data-head .rdc__meta {
  padding-bottom: 3px;
}

.v2-detail .rdc__data-primary {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin-top: 20px;
  padding-top: 18px;
  border-top: 1px solid var(--rdc-line);
}

.v2-detail .rdc__data-primary strong {
  display: block;
  color: var(--rdc-ink);
  font-size: 32px;
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.v2-detail .rdc__data-primary p {
  max-width: 46%;
  margin: 0;
  color: var(--rdc-caption);
  font-size: 11px;
  line-height: 1.5;
  text-align: right;
}

.v2-detail .rdc__anchor-line {
  padding: 14px 0;
  border-top: 1px solid var(--rdc-line);
  border-bottom: 1px solid var(--rdc-line);
}

.v2-detail .rdc__data-head + .rdc__anchor-line {
  margin-top: 20px;
}

.v2-detail .rdc__anchor-line b {
  display: block;
  color: var(--rdc-ink);
  font-size: 18px;
  font-weight: 600;
}

.v2-detail .rdc__anchor-line small,
.v2-detail .rdc__anchor-line span {
  display: block;
  margin-top: 3px;
  color: var(--rdc-caption);
  font-size: 11px;
}

.v2-detail .rdc__anchor-line .rdc__stat-label {
  margin: 0 0 4px;
  color: var(--rdc-ink2);
  font-size: 15px;
}

.v2-detail .rdc__stats--compact {
  gap: 16px;
}

.v2-detail .rdc__stats--compact .rdc__stat-label {
  font-size: 13px;
}

.v2-detail .rdc__stats--compact .rdc__stat-value {
  font-size: 25px;
}

.v2-detail .rdc__stats--compact p {
  margin: 7px 0 0;
  color: var(--rdc-caption);
  font-size: 10px;
  line-height: 1.45;
}

.v2-detail .rdc__stat-value--split {
  font-size: 23px;
}

.v2-detail .lap-route-area {
  display: grid;
  gap: 10px;
  max-height: 250px;
}

.v2-detail .rdc__area-title {
  display: flex;
  min-height: var(--rdc-data-head-height);
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  color: var(--rdc-ink);
}

.v2-detail .rdc__area-title em {
  color: var(--rdc-caption);
  font-size: 12px;
  font-style: normal;
  font-weight: 500;
  letter-spacing: 0;
}

.v2-detail .lap-data-area {
  margin-top: 50px;
}

.v2-detail .lap-spread-value {
  font-size: 20px !important;
}

.v2-detail .segment-title-row {
  display: flex;
  align-items: center;
  gap: 10px;
}

.v2-detail .segment-select-button {
  position: relative;
  width: 45px;
  height: 30px;
  padding: 0;
  border-radius: calc(var(--radius) * 2.5);
  background: var(--track-zone-3);
  color: #060606;
  font-size: 14px;
  font-weight: 800;
  line-height: 1;
}

.v2-detail .segment-select-button::after {
  inset: -7px 0;
}

.v2-detail .lap-list {
  display: grid;
  gap: 7px;
}

.v2-detail .lap-list > div {
  display: grid;
  min-height: 22px;
  grid-template-columns: 58px minmax(0, 1fr) 58px;
  align-items: center;
  gap: 10px;
}

.v2-detail .lap-list span {
  display: grid;
  min-width: 0;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: baseline;
  gap: 4px;
  color: var(--rdc-caption);
  font-variant-numeric: tabular-nums;
}

.v2-detail .lap-list span b {
  color: var(--rdc-ink2);
  font-size: 10px;
  font-weight: 700;
  text-align: left;
}

.v2-detail .lap-list span small {
  overflow: hidden;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.v2-detail .lap-list i {
  display: block;
  width: var(--bar);
  height: 4px;
  background: linear-gradient(90deg, rgba(200, 241, 53, .22), var(--accent));
}

.v2-detail .lap-list > div > b {
  color: var(--rdc-ink2);
  font-size: 12px;
  font-weight: 600;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

.v2-detail .line-chart,
.v2-detail .terrain-chart {
  position: relative;
  height: 190px;
}

.v2-detail .terrain-chart {
  height: 160px;
}

.v2-detail .line-chart svg,
.v2-detail .terrain-chart svg {
  width: 100%;
  height: 100%;
  overflow: visible;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.v2-detail .grid-line {
  fill: none;
  stroke: var(--rdc-line);
  stroke-width: 2;
}

.v2-detail .pace-line,
.v2-detail .hr-line,
.v2-detail .cadence-line {
  fill: none;
  stroke-width: 4;
  vector-effect: non-scaling-stroke;
}

.v2-detail .pace-line,
.v2-detail .cadence-line {
  stroke: var(--accent);
}

.v2-detail .hr-line {
  stroke: var(--chart-2);
}

.v2-detail .terrain-fill {
  fill: url("#v2-terrain-area-gradient");
  stroke: none;
}

.v2-detail .terrain-ridge {
  fill: none;
  stroke: var(--chart-2);
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}

.v2-detail .terrain-gradient-stop--top {
  stop-color: var(--chart-2);
  stop-opacity: .18;
}

.v2-detail .terrain-gradient-stop--bottom {
  stop-color: var(--chart-2);
  stop-opacity: 0;
}

.v2-detail [data-chart-series] {
  transition: opacity 180ms ease;
}

.v2-detail [data-chart-series].is-series-hidden {
  opacity: 0;
}

.v2-detail .chart-toggle {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 12px;
}

.v2-detail .chart-toggle__button {
  --chart-chip-color: var(--accent);
  position: relative;
  min-height: 34px;
  padding: 7px 12px;
  border: 1px solid color-mix(in srgb, var(--chart-chip-color) 76%, transparent);
  border-radius: var(--radius-pill);
  background: var(--chart-chip-color);
  color: var(--chart-chip-ink, var(--accent-ink));
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  transition: filter 160ms ease, opacity 160ms ease;
}

.v2-detail .chart-toggle__button::after {
  inset: -5px 0;
}

.v2-detail .chart-toggle__button--heart,
.v2-detail .chart-toggle__button--terrain {
  --chart-chip-color: var(--chart-2);
}

.v2-detail .chart-toggle__button[aria-pressed="false"] {
  border-color: color-mix(in srgb, var(--chart-chip-color) 24%, var(--rdc-line));
  background: color-mix(in srgb, var(--chart-chip-color) 18%, var(--rdc-base));
  filter: saturate(.16);
  opacity: .72;
}

.v2-detail .trend-gap-note {
  margin: 10px 0 0;
  color: var(--rdc-caption);
  font-size: 10px;
  line-height: 1.45;
  text-align: right;
}

.v2-detail .zone-bar {
  display: flex;
  height: 8px;
  margin-top: 14px;
  overflow: hidden;
}

.v2-detail .zone-bar i {
  flex: 0 0 var(--size);
}

.v2-detail .zone-bar i:nth-child(1) { background: var(--track-zone-1); }
.v2-detail .zone-bar i:nth-child(2) { background: var(--track-zone-2); }
.v2-detail .zone-bar i:nth-child(3) { background: var(--track-zone-3); }
.v2-detail .zone-bar i:nth-child(4) { background: var(--track-zone-4); }
.v2-detail .zone-bar i:nth-child(5) { background: var(--track-zone-5); }

.v2-detail .zone-bar__unclassified {
  flex: 0 0 var(--size);
  background: var(--rdc-caption);
}

.v2-detail .zone-list {
  display: grid;
  gap: 15px;
}

.v2-detail .zone-row {
  --zone-color: var(--track-zone-1);
  display: grid;
  min-height: 0;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: initial;
  gap: 7px 14px;
}

.v2-detail .zone-row:nth-child(2) { --zone-color: var(--track-zone-2); }
.v2-detail .zone-row:nth-child(3) { --zone-color: var(--track-zone-3); }
.v2-detail .zone-row:nth-child(4) { --zone-color: var(--track-zone-4); }
.v2-detail .zone-row:nth-child(5) { --zone-color: var(--track-zone-5); }

.v2-detail .zone-row__name,
.v2-detail .zone-row__time {
  display: flex;
  width: auto;
  height: auto;
  align-items: baseline;
  gap: 8px;
  overflow: visible;
  border-radius: 0;
  background: transparent;
}

.v2-detail .zone-row__time {
  justify-content: flex-end;
}

.v2-detail .zone-row__name b,
.v2-detail .zone-row__time b {
  color: var(--rdc-ink);
  font-size: 13px;
  font-weight: 700;
}

.v2-detail .zone-row__name span,
.v2-detail .zone-row__time span {
  color: var(--rdc-caption);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
}

.v2-detail .zone-row__track {
  width: auto;
  height: 7px;
  grid-column: 1 / -1;
  overflow: hidden;
  border-radius: 0;
  background: color-mix(in srgb, var(--zone-color) 16%, transparent);
}

.v2-detail .zone-row__track i {
  display: block;
  width: var(--zone-share);
  height: 100%;
  border-radius: 0;
  background: var(--zone-color);
}

.v2-detail .zone-unclassified {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px dashed var(--rdc-line);
  color: var(--rdc-caption);
  font-size: 11px;
}

.v2-detail .zone-unclassified b {
  color: var(--rdc-ink2);
  font-size: 12px;
}

.v2-detail .terrain-summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px 12px;
}

.v2-detail .terrain-fact {
  display: flex;
  min-width: 0;
  min-height: 72px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 0;
  background: transparent;
  text-align: center;
}

.v2-detail .terrain-fact > span {
  display: block;
  color: var(--rdc-ink2);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.35;
}

.v2-detail .terrain-fact strong {
  display: block;
  max-width: 100%;
  margin-top: 6px;
  color: var(--rdc-ink);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.025em;
  white-space: nowrap;
}

.v2-detail .terrain-fact small {
  display: block;
  max-width: 100%;
  margin-top: 6px;
  color: var(--rdc-caption);
  font-size: 10px;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

.v2-detail .route-switch {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: 1px solid var(--rdc-line);
}

.v2-detail .route-switch--laps {
  width: 50%;
  min-width: 178px;
  margin-left: auto;
}

.v2-detail .route-switch button {
  min-height: 44px;
  padding: 8px 6px;
  background: transparent;
  color: var(--rdc-caption);
  font-size: 14px;
}

.v2-detail .route-switch button + button {
  border-left: 1px solid var(--rdc-line);
}

.v2-detail .route-switch button.active {
  background: var(--track-zone-3);
  color: #060606;
  font-weight: 800;
}

.v2-detail .route-preview {
  position: relative;
  height: 230px;
  overflow: hidden;
  border: 1px solid var(--rdc-line);
  background: #060606;
}

.v2-detail .lap-route-preview {
  height: auto;
  aspect-ratio: 2.8 / 1;
}

.v2-detail .route-preview--line {
  border: 0;
  background: transparent;
}

.v2-detail .route-preview.is-hidden {
  display: none;
}

.v2-detail .route-preview svg {
  width: 100%;
  height: 100%;
}

.v2-detail .route-map-image {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  user-select: none;
}

.v2-detail .route-map-image--mini {
  object-position: 50% 39%;
}

.v2-detail .route-course {
  position: absolute;
  z-index: 1;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.v2-detail .route-course--mini {
  filter: drop-shadow(0 1px 3px rgba(0, 0, 0, .58));
}

.v2-detail .route-line {
  fill: none;
  stroke: var(--track-zone-3);
  stroke-width: 6;
  vector-effect: non-scaling-stroke;
}

.v2-detail .route-line--solo {
  stroke-width: 7;
}

.v2-detail .route-start {
  fill: var(--track-zone-2);
  stroke: #060606;
  stroke-width: 3;
}

.v2-detail .route-end {
  fill: var(--track-zone-5);
  stroke: #060606;
  stroke-width: 3;
}

.v2-detail .route-map-action {
  position: absolute;
  z-index: 3;
  top: var(--space-2);
  right: var(--space-2);
  display: grid;
  width: var(--tap-icon);
  height: var(--tap-icon);
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: var(--radius);
  background: rgba(6, 6, 6, .76);
  color: #fff;
  backdrop-filter: blur(8px);
}

.v2-detail .route-map-action::after {
  inset: 0;
  pointer-events: none;
}

.v2-detail .route-map-action .app-icon {
  width: var(--space-5);
  height: var(--space-5);
}

.v2-detail .route-attribution {
  position: absolute;
  z-index: 3;
  bottom: var(--space-1);
  left: var(--space-1);
  max-width: calc(100% - var(--space-2));
  padding: 2px var(--space-1);
  background: rgba(6, 6, 6, .68);
  color: rgba(255, 255, 255, .78);
  font-size: 8px;
  font-style: normal;
  line-height: 1.35;
  letter-spacing: .01em;
  white-space: nowrap;
}

.v2-route-overlay {
  position: fixed;
  z-index: 90;
  inset: 0;
  display: grid;
  padding: var(--space-3);
  place-items: stretch;
  background: rgba(0, 0, 0, .88);
}

.v2-route-overlay[hidden] {
  display: none;
}

.v2-route-overlay__panel {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  background: #060606;
}

.v2-route-overlay .route-map-image {
  object-position: 50% 50%;
  transform: scale(1.025);
}

.v2-route-overlay .route-course {
  z-index: 2;
  padding: var(--space-6);
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .72));
}

@media (max-width: 479px) {
  .v2-detail .record-stage {
    margin-inline: calc(var(--space-4) * -1);
    border-right: 0;
    border-left: 0;
  }

  .v2-detail .rdc__top,
  .v2-detail .rdc__hero,
  .v2-detail .rdc__body {
    padding-right: 18px;
    padding-left: 18px;
  }

  .v2-detail .rdc__title {
    font-size: 46px;
  }

  .v2-detail .rdc--data-only .rdc__title,
  .v2-detail .rdc__area-title {
    font-size: 20px;
  }

  .v2-detail .lap-spread-value {
    font-size: 18px !important;
  }

  .v2-detail .rdc__actions {
    gap: 7px;
  }

  .v2-detail .rdc__act {
    font-size: 13px;
  }

  .v2-detail .rdc__stat-value {
    font-size: 28px;
  }

  .v2-detail .rdc__data-head .rdc__meta {
    display: none;
  }

  .v2-detail .lap-list > div {
    grid-template-columns: 50px minmax(0, 1fr) 54px;
    gap: 8px;
  }

  .v2-detail .terrain-summary-grid {
    gap: 20px 10px;
  }

  .v2-detail .terrain-fact {
    min-height: 68px;
  }

  .v2-detail .terrain-fact > span {
    font-size: 11px;
  }

  .v2-detail .terrain-fact strong {
    font-size: 18px;
  }

  .v2-detail .terrain-fact small {
    font-size: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .v2-detail *,
  .v2-detail *::before,
  .v2-detail *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
  }
}

/* ──────────────────────────────────────────────────────────────
 * 기록 상세 재정렬 (2026.07.25)
 * 원칙① 완성형은 감싸지 않는다 / C 진본 대조 결과 반영
 * ────────────────────────────────────────────────────────────── */

/* 원칙① — .rdc 싱글카드는 제목·액션·여백을 자체 보유한 완성형이므로
   상위 페이지 헤드·좌우 여백 없이 화면 폭 전체(full-bleed)로 노출한다.
   ★.rdc 내부(겉동결 §4)는 무접촉 — 바깥 래퍼만 걷어낸다. */
.detail-page--bleed {
  max-width: none;
  padding: 0;
}

/* 페이지 여백이 0이므로 좁은 폭에서 쓰던 음수 마진(1001행)도 함께 해제한다 */
.detail-page--bleed .record-stage {
  margin-inline: 0;
  border: 0;
}

.detail-page--bleed > .page-dots,
.detail-page--bleed > .detail-swipe-hint {
  padding-right: var(--page-gutter);
  padding-left: var(--page-gutter);
}

.detail-page--bleed > .detail-swipe-hint {
  padding-bottom: var(--space-4);
}

/* C — 체성분·근력 kind 배경: 본앱 진본(src/index.css:7200~7202)이 kind별 실사진을 쓴다.
   목업이 임의 그라데이션으로 대체해 큰 빈 영역이 생겼던 것을 진본 자산·초점으로 되돌린다.
   미디어 높이(body 56% / strength 52%)는 진본과 이미 동일. */
.v2-detail .rdc--body .rdc__bg {
  background: url("../assets/body-seed.webp") center 20% / cover no-repeat;
}

.v2-detail .rdc--strength .rdc__bg {
  background: url("../assets/strength-seed.webp") center 26% / cover no-repeat;
}

/* ──────────────────────────────────────────────────────────────
 * 근력(strength) kind — 진본 복구 (2026.07.26)
 *
 * 근거: 본앱 진본 `src/index.css:7220 / 7234~7244`(.rdc__herotitle · 근력 종목 블록 §13)
 *       + 캡처 `docs/go_work/mobile_surgery_260724/real_app_scan/기록상세_근력세션_데스크탑1280.png`
 * 배경: 목업이 이 블록을 `css/app.css:5364~5459`에 자체 수치로 옮겨 적으면서
 *       종목명 28→20px · 세트 18→15px 등으로 축소돼 진본 대비 위계가 무너져 있었다.
 *       .rdc는 §4 겉동결이므로 '새 디자인'을 넣지 않고 **진본 수치로만** 되돌린다.
 * 방식: 카드 부품의 규칙은 카드 자신의 스타일시트(이 파일)가 소유한다(§9-6).
 *       app.css보다 뒤에 로드되므로 같은 특이도로 자연 승계된다(!important 없음).
 *       app.css의 옛 수치는 이제 사문화 — app.css 담당자가 정리할 잔여로 남긴다.
 * 범위: 근력 전용 셀렉터만. .rdc__stat*(체성분 공용)·.rdc__act(러닝 V2 공용)은 무접촉.
 * ────────────────────────────────────────────────────────────── */

.v2-detail {
  /* 진본 --rdc-fs-* 간접층 이식 — 값 대조가 1:1로 가능해진다 */
  --rdc-fs-hero: var(--fs-40);      /* 본앱 --rdc-fs-hero = --fs-40 (근력 부위명) */
  --rdc-fs-ex-name: var(--fs-28);   /* 본앱 --rdc-fs-ex-name = --fs-28 (종목명) */
  --rdc-fs-set: 18px;               /* 본앱 --rdc-fs-set = --fs-xl(18) — 목업 fs 스케일에 18 없음 */
  --rdc-fs-ex-action: var(--fs-15b); /* 본앱 --rdc-fs-action = --fs-15(15) */
}

/* 부위명 hero — 진본 40px/800/1.05 (목업은 48px로 부풀어 있었다) */
.v2-detail .rdc__herotitle {
  font-size: var(--rdc-fs-hero);
}

/* 종목 블록 — 진본 padding 22px, 첫 항목은 구분선만 제거(패딩은 유지) */
.v2-detail .rdc__ex {
  padding: var(--sp-22) 0;
}

.v2-detail .rdc__ex:first-child {
  padding-top: var(--sp-22);
  border-top: 0;
}

/* 저장 + — 진본 15px/300/nowrap. 44px 히트영역은 목업 터치 규격(승인분) 유지 */
.v2-detail .rdc__ex-save {
  font-size: var(--rdc-fs-ex-action);
  font-weight: 300;
  white-space: nowrap;
}

/* 종목명 — 진본 28px/600 (목업은 20px/650으로 축소돼 있었다) */
.v2-detail .rdc__ex-name {
  font-size: var(--rdc-fs-ex-name);
  font-weight: 600;
}

/* 세트 목록 — 진본 margin-top 14 / gap 13 */
.v2-detail .rdc__sets {
  margin-top: var(--sp-14);
  gap: var(--sp-13);
}

/* 세트 행 — 진본 gap 16 (목업은 .rdc__ex-head와 규칙을 공유해 12로 좁아져 있었다) */
.v2-detail .rdc__set {
  gap: var(--space-4);
}

/* 세트명·횟수 — 진본 18px, 횟수 굵기 500 */
.v2-detail .rdc__set-name,
.v2-detail .rdc__set-reps {
  font-size: var(--rdc-fs-set);
}

.v2-detail .rdc__set-reps {
  font-weight: 500;
}

/* ★app.css에서 이관(2026.07.26) — 카드 규칙은 카드 스타일시트가 소유(§9-6·§10-1-a) */
.v2-detail .rdc__exlist {
  display: flex;
  flex-direction: column;
}