/* =========================================================
   LIFTRIX Shared Spacing
   全画面共通余白ルール
========================================================= */

:root{
  /* Spacing Scale */
  --liftrix-space-0: 0;
  --liftrix-space-1: 4px;
  --liftrix-space-2: 8px;
  --liftrix-space-3: 12px;
  --liftrix-space-4: 16px;
  --liftrix-space-5: 20px;
  --liftrix-space-6: 24px;
  --liftrix-space-7: 32px;
  --liftrix-space-8: 40px;

  /* Page */
  --liftrix-page-padding-x: 24px;
  --liftrix-page-padding-y: 18px;
  --liftrix-page-gap: 16px;

  /* Sections */
  --liftrix-section-gap: 16px;
  --liftrix-section-gap-sm: 10px;
  --liftrix-section-gap-lg: 24px;

  /* Cards */
  --liftrix-card-gap: 12px;
  --liftrix-card-padding-base: 16px;
  --liftrix-card-padding-compact: 12px;
  --liftrix-card-padding-wide: 20px;

  /* Forms */
  --liftrix-form-gap: 14px;
  --liftrix-field-gap: 8px;
  --liftrix-action-gap: 10px;

  /* Mobile */
  --liftrix-mobile-page-padding-x: 14px;
  --liftrix-mobile-page-padding-y: 10px;
  --liftrix-mobile-section-gap: 12px;
}

/* =========================================================
   New Utility Classes
   新規画面ではこのクラスを使う
========================================================= */

.liftrixPagePad{
  padding: var(--liftrix-page-padding-y) var(--liftrix-page-padding-x);
}

.liftrixStack{
  display: flex;
  flex-direction: column;
  gap: var(--liftrix-section-gap);
}

.liftrixStackSm{
  display: flex;
  flex-direction: column;
  gap: var(--liftrix-section-gap-sm);
}

.liftrixStackLg{
  display: flex;
  flex-direction: column;
  gap: var(--liftrix-section-gap-lg);
}

.liftrixGridGap{
  gap: var(--liftrix-card-gap);
}

.liftrixFormStack{
  display: flex;
  flex-direction: column;
  gap: var(--liftrix-form-gap);
}

.liftrixActionRow{
  display: flex;
  align-items: center;
  gap: var(--liftrix-action-gap);
}

/* =========================================================
   Existing Safe Compatibility
   既存画面への安全な余白調整
========================================================= */

.planCreateMain,
.exerciseFormArea,
.dateControls,
.optionalVideoArea,
.bottomActions,
.planPreviewColumn{
  gap: var(--liftrix-card-gap);
}

.stepHead,
.previewCardHead{
  gap: var(--liftrix-action-gap);
}

.planStepCard,
.previewCard{
  padding: var(--liftrix-card-padding-base);
}

/* フォーム周り */
.field{
  min-width: 0;
}

.fieldLabel{
  margin-bottom: var(--liftrix-field-gap);
}

.metricGrid,
.typeSwitch,
.weekdayRow,
.summaryGrid{
  gap: var(--liftrix-action-gap);
}

/* =========================================================
   Mobile Safety
========================================================= */

@media (max-width: 760px){
  .liftrixPagePad{
    padding: var(--liftrix-mobile-page-padding-y) var(--liftrix-mobile-page-padding-x);
  }

  .liftrixStack{
    gap: var(--liftrix-mobile-section-gap);
  }
}