/* =========================================================
   LIFTRIX Shared Modals
   安全版：既存モーダルの位置・幅・表示制御は触らない
========================================================= */

:root{
  /* Modal Surface */
  --liftrix-modal-radius: 18px;
  --liftrix-modal-radius-sm: 14px;
  --liftrix-modal-radius-lg: 22px;

  --liftrix-modal-border: rgba(132,169,255,0.18);
  --liftrix-modal-border-strong: rgba(132,169,255,0.26);

  --liftrix-modal-bg:
    radial-gradient(circle at top left, rgba(63,169,255,0.10), transparent 38%),
    linear-gradient(180deg, rgba(12,27,52,0.98), rgba(5,14,29,0.98));

  --liftrix-modal-bg-soft:
    linear-gradient(180deg, rgba(18,32,56,0.96), rgba(8,17,33,0.98));

  --liftrix-modal-shadow:
    0 28px 80px rgba(0,0,0,0.52),
    inset 0 1px 0 rgba(255,255,255,0.045);

  --liftrix-modal-overlay-bg: rgba(0,0,0,0.58);
  --liftrix-modal-overlay-blur: blur(10px);

  /* Modal Text */
  --liftrix-modal-title: #F7FBFF;
  --liftrix-modal-subtitle: rgba(221,233,255,0.62);
  --liftrix-modal-muted: rgba(221,233,255,0.48);

  /* Modal Spacing */
  --liftrix-modal-padding: 20px;
  --liftrix-modal-padding-sm: 16px;
  --liftrix-modal-gap: 14px;
}

/* =========================================================
   New Modal Classes
   新規モーダルではこのクラスを使う
========================================================= */

.liftrixModalOverlay{
  background: var(--liftrix-modal-overlay-bg);
  backdrop-filter: var(--liftrix-modal-overlay-blur);
  -webkit-backdrop-filter: var(--liftrix-modal-overlay-blur);
}

.liftrixModal{
  border-radius: var(--liftrix-modal-radius);
  border: 1px solid var(--liftrix-modal-border);
  background: var(--liftrix-modal-bg);
  box-shadow: var(--liftrix-modal-shadow);
  color: var(--liftrix-modal-title);
}

.liftrixModal--soft{
  background: var(--liftrix-modal-bg-soft);
}

.liftrixModalHeader{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--liftrix-modal-gap);
  padding-bottom: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.liftrixModalTitle{
  margin: 0;
  color: var(--liftrix-modal-title);
  font-size: 18px;
  font-weight: 950;
  letter-spacing: -0.03em;
  line-height: 1.15;
}

.liftrixModalLead{
  margin: 6px 0 0;
  color: var(--liftrix-modal-subtitle);
  font-size: 12px;
  font-weight: 800;
  line-height: 1.5;
}

.liftrixModalBody{
  padding-top: var(--liftrix-modal-gap);
}

.liftrixModalActions{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding-top: var(--liftrix-modal-gap);
}

/* =========================================================
   Safe Existing Modal Compatibility
   既存モーダルの位置・サイズ・display・z-indexは触らない
========================================================= */

/* Admin / Account Management 系 */
.modalDialog,
.modalContent{
  border-color: var(--liftrix-modal-border);
  box-shadow: var(--liftrix-modal-shadow);
}

/* Calendar Slot 系 */
.slotModal,
.slotModalContent,
.createSlotModal{
  border-color: var(--liftrix-modal-border);
  box-shadow: var(--liftrix-modal-shadow);
}

/* 背景 overlay は色味だけ。display / position は触らない */
.modalOverlay,
.slotOverlay{
  background: var(--liftrix-modal-overlay-bg);
  backdrop-filter: var(--liftrix-modal-overlay-blur);
  -webkit-backdrop-filter: var(--liftrix-modal-overlay-blur);
}

/* タイトル系だけ軽く統一 */
.modalTitle,
.slotModalTitle{
  color: var(--liftrix-modal-title);
  font-weight: 950;
  letter-spacing: -0.03em;
}

.modalLead,
.modalSub,
.slotModalLead,
.slotModalSub{
  color: var(--liftrix-modal-subtitle);
  font-weight: 800;
}

/* 閉じるボタンは形だけ少し統一。位置は触らない */
.modalCloseBtn,
.slotCloseBtn,
.goalModal__close,
.graphPointModalClose{
  border-radius: 999px;
  color: rgba(247,251,255,0.78);
  background: rgba(255,255,255,0.045);
  border: 1px solid rgba(255,255,255,0.10);
}

.modalCloseBtn:hover,
.slotCloseBtn:hover,
.goalModal__close:hover,
.graphPointModalClose:hover{
  color: #FFFFFF;
  background: rgba(255,255,255,0.075);
}

/* =========================================================
   Modal Target / Info Cards
========================================================= */

.modalTargetCard,
.slotModalInfoCard,
.modalInfoCard{
  border-radius: 14px;
  border: 1px solid rgba(132,169,255,0.16);
  background:
    linear-gradient(180deg, rgba(18,32,56,0.78), rgba(8,17,33,0.90));
}

/* =========================================================
   Safety Notes
   以下は意図的に指定しない:
   position / top / left / right / bottom
   width / height / max-width / max-height
   display / opacity / visibility
   transform
   z-index
   overflow
========================================================= */